diff --git a/DEVELOPMENT_QUICKSTART.md b/DEVELOPMENT_QUICKSTART.md
new file mode 100644
index 0000000..9a0217e
--- /dev/null
+++ b/DEVELOPMENT_QUICKSTART.md
@@ -0,0 +1,39 @@
+# Insertr Development Quickstart
+
+## Project Structure
+
+- `lib/` - JavaScript library development (all Node.js tooling)
+- `insertr-cli/` - Go CLI application
+- `demo-site/` - Static HTML demo site
+
+## Getting Started
+
+### Library Development
+```bash
+cd lib/
+npm install
+npm run serve # Start development server
+npm run check # Validate setup
+npm run demo # Show demo instructions
+```
+
+### CLI Development
+```bash
+cd insertr-cli/
+air # Hot reload development server
+```
+
+### Build Everything
+```bash
+cd lib/
+npm run build:all # Builds library + CLI with embedded assets
+```
+
+## Architecture
+
+The CLI embeds the JavaScript library at build time for distribution. During development:
+- `lib/` contains the JavaScript library source and build tools
+- Air (Go hot reload) watches `lib/src/` and rebuilds when library changes
+- Demo site served from `lib/` package for unified development experience
+
+All Node.js dependencies and scripts are now consolidated in the `lib/` package.
\ No newline at end of file
diff --git a/TODO.md b/TODO.md
index 046d178..a15d07b 100644
--- a/TODO.md
+++ b/TODO.md
@@ -100,6 +100,9 @@ Bring the current library (`lib/`) up to feature parity with the archived protot
- [ ] Adaptive modal sizing and positioning
- [ ] Touch-optimized hover states
+#### 3.3 Server / CLI
+- [ ] A better way to inject insertr.js library into our CLI. Maybe use a cdn when library is stable.
+
## Key Files to Port/Adapt
### From Prototype (`demo-site/archive/insertr-old/`)
@@ -143,4 +146,4 @@ Keep the current library + CLI architecture while porting prototype features:
---
-*This TODO represents bringing a basic proof-of-concept up to production-ready feature parity with the original prototype.*
\ No newline at end of file
+*This TODO represents bringing a basic proof-of-concept up to production-ready feature parity with the original prototype.*
diff --git a/insertr-cli/assets/lib/insertr.js b/insertr-cli/assets/lib/insertr.js
deleted file mode 100644
index 3401a89..0000000
--- a/insertr-cli/assets/lib/insertr.js
+++ /dev/null
@@ -1,197 +0,0 @@
-var Insertr = (function () {
- 'use strict';
-
- /**
- * InsertrCore - Core functionality for content management
- */
- class InsertrCore {
- constructor(options = {}) {
- this.options = {
- apiEndpoint: options.apiEndpoint || '/api/content',
- siteId: options.siteId || 'default',
- ...options
- };
- }
-
- // Find all enhanced elements on the page
- findEnhancedElements() {
- return document.querySelectorAll('[data-insertr-enhanced="true"]');
- }
-
- // Get element metadata
- getElementMetadata(element) {
- return {
- contentId: element.getAttribute('data-content-id'),
- contentType: element.getAttribute('data-content-type'),
- element: element
- };
- }
-
- // Get all elements with their metadata
- getAllElements() {
- const elements = this.findEnhancedElements();
- return Array.from(elements).map(el => this.getElementMetadata(el));
- }
- }
-
- /**
- * InsertrEditor - Visual editing functionality
- */
- class InsertrEditor {
- constructor(core, options = {}) {
- this.core = core;
- this.options = options;
- this.isActive = false;
- }
-
- start() {
- if (this.isActive) return;
-
- console.log('๐ Starting Insertr Editor');
- this.isActive = true;
-
- // Add editor styles
- this.addEditorStyles();
-
- // Initialize all enhanced elements
- const elements = this.core.getAllElements();
- console.log(`๐ Found ${elements.length} editable elements`);
-
- elements.forEach(meta => this.initializeElement(meta));
- }
-
- initializeElement(meta) {
- const { element, contentId, contentType } = meta;
-
- // Add visual indicators
- element.style.cursor = 'pointer';
- element.style.position = 'relative';
-
- // Add interaction handlers
- this.addHoverEffects(element);
- this.addClickHandler(element, meta);
- }
-
- addHoverEffects(element) {
- element.addEventListener('mouseenter', () => {
- element.classList.add('insertr-editing-hover');
- });
-
- element.addEventListener('mouseleave', () => {
- element.classList.remove('insertr-editing-hover');
- });
- }
-
- addClickHandler(element, meta) {
- element.addEventListener('click', (e) => {
- e.preventDefault();
- this.openEditor(meta);
- });
- }
-
- openEditor(meta) {
- const { contentId, contentType, element } = meta;
- const currentContent = element.textContent.trim();
-
- // For now, use a simple prompt (will be replaced with proper modal)
- const newContent = prompt(
- `Edit ${contentType} content (ID: ${contentId}):`,
- currentContent
- );
-
- if (newContent !== null && newContent !== currentContent) {
- this.updateContent(meta, newContent);
- }
- }
-
- updateContent(meta, newContent) {
- const { element } = meta;
-
- // Update the element content
- element.textContent = newContent;
-
- // TODO: Save to backend API
- console.log(`๐พ Content updated:`, meta.contentId, newContent);
- }
-
- addEditorStyles() {
- const styles = `
- .insertr-editing-hover {
- outline: 2px dashed #007cba !important;
- outline-offset: 2px !important;
- background-color: rgba(0, 124, 186, 0.05) !important;
- }
-
- [data-insertr-enhanced="true"]:hover::after {
- content: "โ๏ธ " attr(data-content-type);
- position: absolute;
- top: -25px;
- left: 0;
- background: #007cba;
- color: white;
- padding: 2px 6px;
- font-size: 11px;
- border-radius: 3px;
- white-space: nowrap;
- z-index: 1000;
- font-family: monospace;
- }
- `;
-
- const styleSheet = document.createElement('style');
- styleSheet.type = 'text/css';
- styleSheet.innerHTML = styles;
- document.head.appendChild(styleSheet);
- }
- }
-
- /**
- * Insertr - The Tailwind of CMS
- * Main library entry point
- */
-
-
- // Create global Insertr instance
- window.Insertr = {
- // Core functionality
- core: null,
- editor: null,
-
- // Initialize the library
- init(options = {}) {
- console.log('๐ง Insertr v1.0.0 initializing...');
-
- this.core = new InsertrCore(options);
- this.editor = new InsertrEditor(this.core, options);
-
- // Auto-initialize if DOM is ready
- if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', () => this.start());
- } else {
- this.start();
- }
-
- return this;
- },
-
- // Start the editor
- start() {
- if (this.editor) {
- this.editor.start();
- }
- },
-
- // Version info
- version: '1.0.0'
- };
-
- // Auto-initialize in development mode
- if (document.querySelector('[data-insertr-enhanced]')) {
- window.Insertr.init();
- }
-
- var index = window.Insertr;
-
- return index;
-
-})();
diff --git a/insertr-cli/assets/lib/insertr.min.js b/insertr-cli/assets/lib/insertr.min.js
deleted file mode 100644
index b066bd2..0000000
--- a/insertr-cli/assets/lib/insertr.min.js
+++ /dev/null
@@ -1 +0,0 @@
-var Insertr=function(){"use strict";class t{constructor(t={}){this.options={apiEndpoint:t.apiEndpoint||"/api/content",siteId:t.siteId||"default",...t}}findEnhancedElements(){return document.querySelectorAll('[data-insertr-enhanced="true"]')}getElementMetadata(t){return{contentId:t.getAttribute("data-content-id"),contentType:t.getAttribute("data-content-type"),element:t}}getAllElements(){const t=this.findEnhancedElements();return Array.from(t).map(t=>this.getElementMetadata(t))}}class e{constructor(t,e={}){this.core=t,this.options=e,this.isActive=!1}start(){if(this.isActive)return;console.log("๐ Starting Insertr Editor"),this.isActive=!0,this.addEditorStyles();const t=this.core.getAllElements();console.log(`๐ Found ${t.length} editable elements`),t.forEach(t=>this.initializeElement(t))}initializeElement(t){const{element:e,contentId:n,contentType:i}=t;e.style.cursor="pointer",e.style.position="relative",this.addHoverEffects(e),this.addClickHandler(e,t)}addHoverEffects(t){t.addEventListener("mouseenter",()=>{t.classList.add("insertr-editing-hover")}),t.addEventListener("mouseleave",()=>{t.classList.remove("insertr-editing-hover")})}addClickHandler(t,e){t.addEventListener("click",t=>{t.preventDefault(),this.openEditor(e)})}openEditor(t){const{contentId:e,contentType:n,element:i}=t,o=i.textContent.trim(),r=prompt(`Edit ${n} content (ID: ${e}):`,o);null!==r&&r!==o&&this.updateContent(t,r)}updateContent(t,e){const{element:n}=t;n.textContent=e,console.log("๐พ Content updated:",t.contentId,e)}addEditorStyles(){const t=document.createElement("style");t.type="text/css",t.innerHTML='\n .insertr-editing-hover {\n outline: 2px dashed #007cba !important;\n outline-offset: 2px !important;\n background-color: rgba(0, 124, 186, 0.05) !important;\n }\n \n [data-insertr-enhanced="true"]:hover::after {\n content: "โ๏ธ " attr(data-content-type);\n position: absolute;\n top: -25px;\n left: 0;\n background: #007cba;\n color: white;\n padding: 2px 6px;\n font-size: 11px;\n border-radius: 3px;\n white-space: nowrap;\n z-index: 1000;\n font-family: monospace;\n }\n ',document.head.appendChild(t)}}return window.Insertr={core:null,editor:null,init(n={}){return console.log("๐ง Insertr v1.0.0 initializing..."),this.core=new t(n),this.editor=new e(this.core,n),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",()=>this.start()):this.start(),this},start(){this.editor&&this.editor.start()},version:"1.0.0"},document.querySelector("[data-insertr-enhanced]")&&window.Insertr.init(),window.Insertr}();
diff --git a/insertr-cli/pkg/content/assets/insertr.js b/insertr-cli/pkg/content/assets/insertr.js
index 0712e7f..db2ddda 100644
--- a/insertr-cli/pkg/content/assets/insertr.js
+++ b/insertr-cli/pkg/content/assets/insertr.js
@@ -15,7 +15,7 @@ var Insertr = (function () {
// Find all enhanced elements on the page
findEnhancedElements() {
- return document.querySelectorAll('[data-insertr-enhanced="true"]');
+ return document.querySelectorAll('.insertr');
}
// Get element metadata
@@ -608,7 +608,7 @@ var Insertr = (function () {
background-color: rgba(0, 124, 186, 0.05) !important;
}
- [data-insertr-enhanced="true"]:hover::after {
+ .insertr:hover::after {
content: "โ๏ธ " attr(data-content-type);
position: absolute;
top: -25px;
@@ -1142,16 +1142,16 @@ var Insertr = (function () {
}
/* Hide editing interface when not in edit mode */
- body:not(.insertr-edit-mode) [data-insertr-enhanced]:hover::after {
+ body:not(.insertr-edit-mode) .insertr:hover::after {
display: none !important;
}
/* Only show editing features when in edit mode */
- .insertr-authenticated.insertr-edit-mode [data-insertr-enhanced] {
+ .insertr-authenticated.insertr-edit-mode .insertr {
cursor: pointer;
}
- .insertr-authenticated.insertr-edit-mode [data-insertr-enhanced]:hover {
+ .insertr-authenticated.insertr-edit-mode .insertr:hover {
outline: 2px dashed #007cba !important;
outline-offset: 2px !important;
background-color: rgba(0, 124, 186, 0.05) !important;
@@ -1203,25 +1203,25 @@ var Insertr = (function () {
core: null,
editor: null,
auth: null,
-
+
// Initialize the library
init(options = {}) {
console.log('๐ง Insertr v1.0.0 initializing... (Hot Reload Ready)');
-
+
this.core = new InsertrCore(options);
this.auth = new InsertrAuth(options);
this.editor = new InsertrEditor(this.core, this.auth, options);
-
+
// Auto-initialize if DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => this.start());
} else {
this.start();
}
-
+
return this;
},
-
+
// Start the system - only creates the minimal trigger
start() {
if (this.auth) {
@@ -1236,37 +1236,36 @@ var Insertr = (function () {
this.editor.start();
}
},
-
+
// Public API methods
login() {
return this.auth ? this.auth.toggleAuthentication() : null;
},
-
+
logout() {
if (this.auth && this.auth.isAuthenticated()) {
this.auth.toggleAuthentication();
}
},
-
+
toggleEditMode() {
return this.auth ? this.auth.toggleEditMode() : null;
},
-
+
isAuthenticated() {
return this.auth ? this.auth.isAuthenticated() : false;
},
-
+
isEditMode() {
return this.auth ? this.auth.isEditMode() : false;
},
-
- // Version info
- version: '1.0.0'
+
+ // TODO: Version info based on package.json?
};
// Auto-initialize in development mode with proper DOM ready handling
function autoInitialize() {
- if (document.querySelector('[data-insertr-enhanced="true"]')) {
+ if (document.querySelector('.insertr')) {
window.Insertr.init();
}
}
diff --git a/insertr-cli/pkg/content/assets/insertr.min.js b/insertr-cli/pkg/content/assets/insertr.min.js
index 7b8caee..a1041fe 100644
--- a/insertr-cli/pkg/content/assets/insertr.min.js
+++ b/insertr-cli/pkg/content/assets/insertr.min.js
@@ -1 +1 @@
-var Insertr=function(){"use strict";class t{constructor(t={}){this.options={apiEndpoint:t.apiEndpoint||"/api/content",siteId:t.siteId||"default",...t}}findEnhancedElements(){return document.querySelectorAll('[data-insertr-enhanced="true"]')}getElementMetadata(t){return{contentId:t.getAttribute("data-content-id"),contentType:t.getAttribute("data-content-type"),element:t}}getAllElements(){const t=this.findEnhancedElements();return Array.from(t).map(t=>this.getElementMetadata(t))}}class e{constructor(){this.currentOverlay=null,this.setupStyles()}showEditForm(t,e,n,i){this.closeForm();const{element:r,contentId:o,contentType:s}=t,a=this.getFieldConfig(r,s),d=this.createEditForm(o,a,e),l=this.createOverlay(d);this.positionForm(r,l),this.setupFormHandlers(d,l,{onSave:n,onCancel:i}),document.body.appendChild(l),this.currentOverlay=l;const c=d.querySelector("input, textarea");return c&&setTimeout(()=>c.focus(),100),l}closeForm(){this.currentOverlay&&(this.currentOverlay.remove(),this.currentOverlay=null)}getFieldConfig(t,e){const n=t.tagName.toLowerCase(),i=Array.from(t.classList);let r={h1:{type:"text",label:"Headline",maxLength:60,placeholder:"Enter headline..."},h2:{type:"text",label:"Subheading",maxLength:80,placeholder:"Enter subheading..."},h3:{type:"text",label:"Section Title",maxLength:100,placeholder:"Enter title..."},h4:{type:"text",label:"Title",maxLength:100,placeholder:"Enter title..."},h5:{type:"text",label:"Title",maxLength:100,placeholder:"Enter title..."},h6:{type:"text",label:"Title",maxLength:100,placeholder:"Enter title..."},p:{type:"textarea",label:"Paragraph",rows:3,placeholder:"Enter paragraph text..."},a:{type:"link",label:"Link",placeholder:"Enter link text...",includeUrl:!0},span:{type:"text",label:"Text",placeholder:"Enter text..."},button:{type:"text",label:"Button Text",placeholder:"Enter button text..."}}[n]||{type:"text",label:"Text",placeholder:"Enter text..."};return i.includes("lead")&&(r={...r,label:"Lead Paragraph",rows:4,placeholder:"Enter lead paragraph..."}),"markdown"===e&&(r={...r,type:"markdown",label:"Markdown Content",rows:8}),r}createEditForm(t,e,n){const i=document.createElement("div");i.className="insertr-edit-form";let r=``;return"markdown"===e.type?r+=this.createMarkdownField(e,n):"link"===e.type&&e.includeUrl?r+=this.createLinkField(e,n):"textarea"===e.type?r+=this.createTextareaField(e,n):r+=this.createTextField(e,n),r+='\n \n \n \n
\n ',i.innerHTML=r,i}createMarkdownField(t,e){return`\n \n `}createLinkField(t,e){const n="object"==typeof e?e.text||"":e,i="object"==typeof e&&e.url||"";return`\n \n \n \n
\n \n \n \n
\n `}createTextareaField(t,e){const n="object"==typeof e?e.text||"":e;return`\n \n \n
\n `}createTextField(t,e){const n="object"==typeof e?e.text||"":e;return`\n \n \n
\n `}createOverlay(t){const e=document.createElement("div");return e.className="insertr-form-overlay",e.appendChild(t),e}positionForm(t,e){const n=t.getBoundingClientRect(),i=e.querySelector(".insertr-edit-form"),r=window.innerWidth;let o;o=r<768?Math.min(r-40,350):Math.min(Math.max(n.width,300),500),i.style.width=`${o}px`;const s=n.bottom+window.scrollY+10,a=Math.max(20,n.left+window.scrollX);e.style.position="absolute",e.style.top=`${s}px`,e.style.left=`${a}px`,e.style.zIndex="10000"}setupFormHandlers(t,e,{onSave:n,onCancel:i}){const r=t.querySelector(".insertr-btn-save"),o=t.querySelector(".insertr-btn-cancel");r&&r.addEventListener("click",()=>{const e=this.extractFormData(t);n(e)}),o&&o.addEventListener("click",()=>{i(),this.closeForm()});const s=t=>{"Escape"===t.key&&(i(),this.closeForm(),document.removeEventListener("keydown",s))};document.addEventListener("keydown",s),e.addEventListener("click",t=>{t.target===e&&(i(),this.closeForm())})}extractFormData(t){const e={},n=t.querySelector('input[name="text"]'),i=t.querySelector('input[name="url"]'),r=t.querySelector('input[name="content"], textarea[name="content"]');return n&&i?(e.text=n.value,e.url=i.value):r&&(e.text=r.value),e}escapeHtml(t){if("string"!=typeof t)return"";const e=document.createElement("div");return e.textContent=t,e.innerHTML}setupStyles(){const t=document.createElement("style");t.type="text/css",t.innerHTML="\n .insertr-form-overlay {\n position: absolute;\n z-index: 10000;\n }\n\n .insertr-edit-form {\n background: white;\n border: 2px solid #007cba;\n border-radius: 8px;\n padding: 1rem;\n box-shadow: 0 8px 25px rgba(0,0,0,0.15);\n width: 100%;\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n .insertr-form-header {\n font-weight: 600;\n color: #1f2937;\n margin-bottom: 1rem;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid #e5e7eb;\n font-size: 0.875rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .insertr-form-group {\n margin-bottom: 1rem;\n }\n\n .insertr-form-group:last-child {\n margin-bottom: 0;\n }\n\n .insertr-form-label {\n display: block;\n font-weight: 600;\n color: #374151;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n }\n\n .insertr-form-input, \n .insertr-form-textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n font-family: inherit;\n font-size: 1rem;\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n }\n\n .insertr-form-input:focus,\n .insertr-form-textarea:focus {\n outline: none;\n border-color: #007cba;\n box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);\n }\n\n .insertr-form-textarea {\n min-height: 120px;\n resize: vertical;\n font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n }\n\n .insertr-markdown-editor {\n min-height: 200px;\n font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n font-size: 0.9rem;\n line-height: 1.5;\n background-color: #f8fafc;\n }\n\n .insertr-form-actions {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid #e5e7eb;\n }\n\n .insertr-btn-save {\n background: #10b981;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s;\n font-size: 0.875rem;\n }\n\n .insertr-btn-save:hover {\n background: #059669;\n }\n\n .insertr-btn-cancel {\n background: #6b7280;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s;\n font-size: 0.875rem;\n }\n\n .insertr-btn-cancel:hover {\n background: #4b5563;\n }\n\n .insertr-form-help {\n font-size: 0.75rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n ",document.head.appendChild(t)}}class n{constructor(t,n,i={}){this.core=t,this.auth=n,this.options=i,this.isActive=!1,this.formRenderer=new e}start(){if(this.isActive)return;console.log("๐ Starting Insertr Editor"),this.isActive=!0,this.addEditorStyles();const t=this.core.getAllElements();console.log(`๐ Found ${t.length} editable elements`),t.forEach(t=>this.initializeElement(t))}initializeElement(t){const{element:e,contentId:n,contentType:i}=t;e.style.cursor="pointer",e.style.position="relative",this.addHoverEffects(e),this.addClickHandler(e,t)}addHoverEffects(t){t.addEventListener("mouseenter",()=>{t.classList.add("insertr-editing-hover")}),t.addEventListener("mouseleave",()=>{t.classList.remove("insertr-editing-hover")})}addClickHandler(t,e){t.addEventListener("click",t=>{this.auth.isAuthenticated()&&this.auth.isEditMode()&&(t.preventDefault(),this.openEditor(e))})}openEditor(t){const{element:e}=t,n=this.extractCurrentContent(e);this.formRenderer.showEditForm(t,n,e=>this.handleSave(t,e),()=>this.handleCancel(t))}extractCurrentContent(t){return"a"===t.tagName.toLowerCase()?{text:t.textContent.trim(),url:t.getAttribute("href")||""}:t.textContent.trim()}handleSave(t,e){console.log("๐พ Saving content:",t.contentId,e),this.updateElementContent(t.element,e),this.formRenderer.closeForm(),console.log("โ
Content saved:",t.contentId,e)}handleCancel(t){console.log("โ Edit cancelled:",t.contentId)}updateElementContent(t,e){"a"===t.tagName.toLowerCase()?(void 0!==e.text&&(t.textContent=e.text),void 0!==e.url&&t.setAttribute("href",e.url)):t.textContent=e.text||""}addEditorStyles(){const t=document.createElement("style");t.type="text/css",t.innerHTML='\n .insertr-editing-hover {\n outline: 2px dashed #007cba !important;\n outline-offset: 2px !important;\n background-color: rgba(0, 124, 186, 0.05) !important;\n }\n \n [data-insertr-enhanced="true"]:hover::after {\n content: "โ๏ธ " attr(data-content-type);\n position: absolute;\n top: -25px;\n left: 0;\n background: #007cba;\n color: white;\n padding: 2px 6px;\n font-size: 11px;\n border-radius: 3px;\n white-space: nowrap;\n z-index: 1000;\n font-family: monospace;\n }\n ',document.head.appendChild(t)}}class i{constructor(t={}){this.options={mockAuth:!1!==t.mockAuth,hideGatesAfterAuth:!0===t.hideGatesAfterAuth,...t},this.state={isAuthenticated:!1,editMode:!1,currentUser:null,activeEditor:null,isInitialized:!1,isAuthenticating:!1},this.statusIndicator=null}init(){console.log("๐ง Insertr: Scanning for editor gates"),this.setupEditorGates()}initializeFullSystem(){this.state.isInitialized||(console.log("๐ Initializing Insertr Editing System"),this.createAuthControls(),this.setupAuthenticationControls(),this.createStatusIndicator(),this.updateBodyClasses(),this.state.editMode=!0,this.state.isInitialized=!0,window.Insertr&&window.Insertr.startEditor&&window.Insertr.startEditor(),this.updateButtonStates(),this.updateStatusIndicator(),console.log("๐ฑ Editing system active - Controls in bottom-right corner"),console.log("โ๏ธ Edit mode enabled - Click elements to edit"))}setupEditorGates(){const t=document.querySelectorAll(".insertr-gate");0!==t.length?(console.log(`๐ช Found ${t.length} editor gate(s)`),this.addGateStyles(),t.forEach((t,e)=>{t.hasAttribute("data-original-text")||t.setAttribute("data-original-text",t.textContent),t.addEventListener("click",n=>{n.preventDefault(),this.handleGateClick(t,e)}),t.style.cursor="pointer"})):console.log("โน๏ธ No .insertr-gate elements found - editor access disabled")}async handleGateClick(t,e){if(this.state.isAuthenticating)return void console.log("โณ Authentication already in progress...");console.log(`๐ Editor gate activated (gate ${e+1})`),this.state.isAuthenticating=!0;const n=t.textContent;t.setAttribute("data-original-text",n),t.textContent="โณ Signing in...",t.style.pointerEvents="none";try{await this.performOAuthFlow(),this.initializeFullSystem(),this.options.hideGatesAfterAuth?this.hideAllGates():this.updateGateState()}catch(e){console.error("โ Authentication failed:",e);const n=t.getAttribute("data-original-text");n&&(t.textContent=n),t.style.pointerEvents=""}finally{this.state.isAuthenticating=!1}}async performOAuthFlow(){if(this.options.mockAuth)return console.log("๐ Mock OAuth: Simulating authentication..."),await new Promise(t=>setTimeout(t,1e3)),this.state.isAuthenticated=!0,this.state.currentUser={name:"Site Owner",email:"owner@example.com",role:"admin"},void console.log("โ
Mock OAuth: Authentication successful");throw new Error("Production OAuth not implemented yet")}hideAllGates(){document.body.classList.add("insertr-hide-gates"),console.log("๐ช Editor gates hidden (hideGatesAfterAuth enabled)")}updateGateState(){document.querySelectorAll(".insertr-gate").forEach(t=>{const e=t.getAttribute("data-original-text");e&&(t.textContent=e),t.style.pointerEvents="",t.style.opacity=""}),console.log("๐ช Editor gates restored to original state")}createAuthControls(){if(document.getElementById("insertr-auth-controls"))return;document.body.insertAdjacentHTML("beforeend",'\n \n \n \n
\n '),this.addControlStyles()}setupAuthenticationControls(){const t=document.getElementById("insertr-auth-toggle"),e=document.getElementById("insertr-edit-toggle");t&&t.addEventListener("click",()=>this.toggleAuthentication()),e&&e.addEventListener("click",()=>this.toggleEditMode())}toggleAuthentication(){this.state.isAuthenticated=!this.state.isAuthenticated,this.state.currentUser=this.state.isAuthenticated?{name:"Demo User",email:"demo@example.com",role:"editor"}:null,this.state.isAuthenticated||(this.state.editMode=!1),this.updateBodyClasses(),this.updateButtonStates(),this.updateStatusIndicator(),console.log(this.state.isAuthenticated?"โ
Authenticated as Demo User":"โ Logged out")}toggleEditMode(){this.state.isAuthenticated?(this.state.editMode=!this.state.editMode,!this.state.editMode&&this.state.activeEditor&&(this.state.activeEditor=null),this.updateBodyClasses(),this.updateButtonStates(),this.updateStatusIndicator(),console.log(this.state.editMode?"โ๏ธ Edit mode ON - Click elements to edit":"๐ Edit mode OFF - Read-only view")):console.warn("โ Cannot enable edit mode - not authenticated")}updateBodyClasses(){document.body.classList.toggle("insertr-authenticated",this.state.isAuthenticated),document.body.classList.toggle("insertr-edit-mode",this.state.editMode)}updateButtonStates(){const t=document.getElementById("insertr-auth-toggle"),e=document.getElementById("insertr-edit-toggle");t&&(t.textContent=this.state.isAuthenticated?"Logout":"Login as Client",t.className="insertr-auth-btn "+(this.state.isAuthenticated?"insertr-authenticated":"")),e&&(e.style.display=this.state.isAuthenticated?"inline-block":"none",e.textContent="Edit Mode: "+(this.state.editMode?"On":"Off"),e.className="insertr-auth-btn "+(this.state.editMode?"insertr-edit-active":""))}createStatusIndicator(){if(document.getElementById("insertr-status"))return;document.body.insertAdjacentHTML("beforeend",'\n \n
\n Visitor Mode\n \n
\n
\n \n \n
\n ',i.innerHTML=r,i}createMarkdownField(t,e){return`\n \n `}createLinkField(t,e){const n="object"==typeof e?e.text||"":e,i="object"==typeof e&&e.url||"";return`\n \n \n \n
\n \n \n \n
\n `}createTextareaField(t,e){const n="object"==typeof e?e.text||"":e;return`\n \n \n
\n `}createTextField(t,e){const n="object"==typeof e?e.text||"":e;return`\n \n \n
\n `}createOverlay(t){const e=document.createElement("div");return e.className="insertr-form-overlay",e.appendChild(t),e}positionForm(t,e){const n=t.getBoundingClientRect(),i=e.querySelector(".insertr-edit-form"),r=window.innerWidth;let o;o=r<768?Math.min(r-40,350):Math.min(Math.max(n.width,300),500),i.style.width=`${o}px`;const s=n.bottom+window.scrollY+10,a=Math.max(20,n.left+window.scrollX);e.style.position="absolute",e.style.top=`${s}px`,e.style.left=`${a}px`,e.style.zIndex="10000"}setupFormHandlers(t,e,{onSave:n,onCancel:i}){const r=t.querySelector(".insertr-btn-save"),o=t.querySelector(".insertr-btn-cancel");r&&r.addEventListener("click",()=>{const e=this.extractFormData(t);n(e)}),o&&o.addEventListener("click",()=>{i(),this.closeForm()});const s=t=>{"Escape"===t.key&&(i(),this.closeForm(),document.removeEventListener("keydown",s))};document.addEventListener("keydown",s),e.addEventListener("click",t=>{t.target===e&&(i(),this.closeForm())})}extractFormData(t){const e={},n=t.querySelector('input[name="text"]'),i=t.querySelector('input[name="url"]'),r=t.querySelector('input[name="content"], textarea[name="content"]');return n&&i?(e.text=n.value,e.url=i.value):r&&(e.text=r.value),e}escapeHtml(t){if("string"!=typeof t)return"";const e=document.createElement("div");return e.textContent=t,e.innerHTML}setupStyles(){const t=document.createElement("style");t.type="text/css",t.innerHTML="\n .insertr-form-overlay {\n position: absolute;\n z-index: 10000;\n }\n\n .insertr-edit-form {\n background: white;\n border: 2px solid #007cba;\n border-radius: 8px;\n padding: 1rem;\n box-shadow: 0 8px 25px rgba(0,0,0,0.15);\n width: 100%;\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n }\n\n .insertr-form-header {\n font-weight: 600;\n color: #1f2937;\n margin-bottom: 1rem;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid #e5e7eb;\n font-size: 0.875rem;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n }\n\n .insertr-form-group {\n margin-bottom: 1rem;\n }\n\n .insertr-form-group:last-child {\n margin-bottom: 0;\n }\n\n .insertr-form-label {\n display: block;\n font-weight: 600;\n color: #374151;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n }\n\n .insertr-form-input, \n .insertr-form-textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #d1d5db;\n border-radius: 6px;\n font-family: inherit;\n font-size: 1rem;\n transition: border-color 0.2s, box-shadow 0.2s;\n box-sizing: border-box;\n }\n\n .insertr-form-input:focus,\n .insertr-form-textarea:focus {\n outline: none;\n border-color: #007cba;\n box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1);\n }\n\n .insertr-form-textarea {\n min-height: 120px;\n resize: vertical;\n font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n }\n\n .insertr-markdown-editor {\n min-height: 200px;\n font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;\n font-size: 0.9rem;\n line-height: 1.5;\n background-color: #f8fafc;\n }\n\n .insertr-form-actions {\n display: flex;\n gap: 0.5rem;\n justify-content: flex-end;\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid #e5e7eb;\n }\n\n .insertr-btn-save {\n background: #10b981;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s;\n font-size: 0.875rem;\n }\n\n .insertr-btn-save:hover {\n background: #059669;\n }\n\n .insertr-btn-cancel {\n background: #6b7280;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s;\n font-size: 0.875rem;\n }\n\n .insertr-btn-cancel:hover {\n background: #4b5563;\n }\n\n .insertr-form-help {\n font-size: 0.75rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n ",document.head.appendChild(t)}}class n{constructor(t,n,i={}){this.core=t,this.auth=n,this.options=i,this.isActive=!1,this.formRenderer=new e}start(){if(this.isActive)return;console.log("๐ Starting Insertr Editor"),this.isActive=!0,this.addEditorStyles();const t=this.core.getAllElements();console.log(`๐ Found ${t.length} editable elements`),t.forEach(t=>this.initializeElement(t))}initializeElement(t){const{element:e,contentId:n,contentType:i}=t;e.style.cursor="pointer",e.style.position="relative",this.addHoverEffects(e),this.addClickHandler(e,t)}addHoverEffects(t){t.addEventListener("mouseenter",()=>{t.classList.add("insertr-editing-hover")}),t.addEventListener("mouseleave",()=>{t.classList.remove("insertr-editing-hover")})}addClickHandler(t,e){t.addEventListener("click",t=>{this.auth.isAuthenticated()&&this.auth.isEditMode()&&(t.preventDefault(),this.openEditor(e))})}openEditor(t){const{element:e}=t,n=this.extractCurrentContent(e);this.formRenderer.showEditForm(t,n,e=>this.handleSave(t,e),()=>this.handleCancel(t))}extractCurrentContent(t){return"a"===t.tagName.toLowerCase()?{text:t.textContent.trim(),url:t.getAttribute("href")||""}:t.textContent.trim()}handleSave(t,e){console.log("๐พ Saving content:",t.contentId,e),this.updateElementContent(t.element,e),this.formRenderer.closeForm(),console.log("โ
Content saved:",t.contentId,e)}handleCancel(t){console.log("โ Edit cancelled:",t.contentId)}updateElementContent(t,e){"a"===t.tagName.toLowerCase()?(void 0!==e.text&&(t.textContent=e.text),void 0!==e.url&&t.setAttribute("href",e.url)):t.textContent=e.text||""}addEditorStyles(){const t=document.createElement("style");t.type="text/css",t.innerHTML='\n .insertr-editing-hover {\n outline: 2px dashed #007cba !important;\n outline-offset: 2px !important;\n background-color: rgba(0, 124, 186, 0.05) !important;\n }\n \n .insertr:hover::after {\n content: "โ๏ธ " attr(data-content-type);\n position: absolute;\n top: -25px;\n left: 0;\n background: #007cba;\n color: white;\n padding: 2px 6px;\n font-size: 11px;\n border-radius: 3px;\n white-space: nowrap;\n z-index: 1000;\n font-family: monospace;\n }\n ',document.head.appendChild(t)}}class i{constructor(t={}){this.options={mockAuth:!1!==t.mockAuth,hideGatesAfterAuth:!0===t.hideGatesAfterAuth,...t},this.state={isAuthenticated:!1,editMode:!1,currentUser:null,activeEditor:null,isInitialized:!1,isAuthenticating:!1},this.statusIndicator=null}init(){console.log("๐ง Insertr: Scanning for editor gates"),this.setupEditorGates()}initializeFullSystem(){this.state.isInitialized||(console.log("๐ Initializing Insertr Editing System"),this.createAuthControls(),this.setupAuthenticationControls(),this.createStatusIndicator(),this.updateBodyClasses(),this.state.editMode=!0,this.state.isInitialized=!0,window.Insertr&&window.Insertr.startEditor&&window.Insertr.startEditor(),this.updateButtonStates(),this.updateStatusIndicator(),console.log("๐ฑ Editing system active - Controls in bottom-right corner"),console.log("โ๏ธ Edit mode enabled - Click elements to edit"))}setupEditorGates(){const t=document.querySelectorAll(".insertr-gate");0!==t.length?(console.log(`๐ช Found ${t.length} editor gate(s)`),this.addGateStyles(),t.forEach((t,e)=>{t.hasAttribute("data-original-text")||t.setAttribute("data-original-text",t.textContent),t.addEventListener("click",n=>{n.preventDefault(),this.handleGateClick(t,e)}),t.style.cursor="pointer"})):console.log("โน๏ธ No .insertr-gate elements found - editor access disabled")}async handleGateClick(t,e){if(this.state.isAuthenticating)return void console.log("โณ Authentication already in progress...");console.log(`๐ Editor gate activated (gate ${e+1})`),this.state.isAuthenticating=!0;const n=t.textContent;t.setAttribute("data-original-text",n),t.textContent="โณ Signing in...",t.style.pointerEvents="none";try{await this.performOAuthFlow(),this.initializeFullSystem(),this.options.hideGatesAfterAuth?this.hideAllGates():this.updateGateState()}catch(e){console.error("โ Authentication failed:",e);const n=t.getAttribute("data-original-text");n&&(t.textContent=n),t.style.pointerEvents=""}finally{this.state.isAuthenticating=!1}}async performOAuthFlow(){if(this.options.mockAuth)return console.log("๐ Mock OAuth: Simulating authentication..."),await new Promise(t=>setTimeout(t,1e3)),this.state.isAuthenticated=!0,this.state.currentUser={name:"Site Owner",email:"owner@example.com",role:"admin"},void console.log("โ
Mock OAuth: Authentication successful");throw new Error("Production OAuth not implemented yet")}hideAllGates(){document.body.classList.add("insertr-hide-gates"),console.log("๐ช Editor gates hidden (hideGatesAfterAuth enabled)")}updateGateState(){document.querySelectorAll(".insertr-gate").forEach(t=>{const e=t.getAttribute("data-original-text");e&&(t.textContent=e),t.style.pointerEvents="",t.style.opacity=""}),console.log("๐ช Editor gates restored to original state")}createAuthControls(){if(document.getElementById("insertr-auth-controls"))return;document.body.insertAdjacentHTML("beforeend",'\n \n \n \n
\n '),this.addControlStyles()}setupAuthenticationControls(){const t=document.getElementById("insertr-auth-toggle"),e=document.getElementById("insertr-edit-toggle");t&&t.addEventListener("click",()=>this.toggleAuthentication()),e&&e.addEventListener("click",()=>this.toggleEditMode())}toggleAuthentication(){this.state.isAuthenticated=!this.state.isAuthenticated,this.state.currentUser=this.state.isAuthenticated?{name:"Demo User",email:"demo@example.com",role:"editor"}:null,this.state.isAuthenticated||(this.state.editMode=!1),this.updateBodyClasses(),this.updateButtonStates(),this.updateStatusIndicator(),console.log(this.state.isAuthenticated?"โ
Authenticated as Demo User":"โ Logged out")}toggleEditMode(){this.state.isAuthenticated?(this.state.editMode=!this.state.editMode,!this.state.editMode&&this.state.activeEditor&&(this.state.activeEditor=null),this.updateBodyClasses(),this.updateButtonStates(),this.updateStatusIndicator(),console.log(this.state.editMode?"โ๏ธ Edit mode ON - Click elements to edit":"๐ Edit mode OFF - Read-only view")):console.warn("โ Cannot enable edit mode - not authenticated")}updateBodyClasses(){document.body.classList.toggle("insertr-authenticated",this.state.isAuthenticated),document.body.classList.toggle("insertr-edit-mode",this.state.editMode)}updateButtonStates(){const t=document.getElementById("insertr-auth-toggle"),e=document.getElementById("insertr-edit-toggle");t&&(t.textContent=this.state.isAuthenticated?"Logout":"Login as Client",t.className="insertr-auth-btn "+(this.state.isAuthenticated?"insertr-authenticated":"")),e&&(e.style.display=this.state.isAuthenticated?"inline-block":"none",e.textContent="Edit Mode: "+(this.state.editMode?"On":"Off"),e.className="insertr-auth-btn "+(this.state.editMode?"insertr-edit-active":""))}createStatusIndicator(){if(document.getElementById("insertr-status"))return;document.body.insertAdjacentHTML("beforeend",'\n \n
\n Visitor Mode\n \n
\n