@zentto/studio 0.5.1 → 0.6.0

package/dist/designer/zs-page-designer.js

@@ -78,7 +78,18 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         this.undoStack = [];
         this.redoStack = [];
         this.saveTimer = null;
+        // InteractJS
+        this.interactLoaded = false;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        this.interact = null;
+        this.dragClone = null;
+        this.dragSourceType = null;
+        this.dragSourceFieldId = null;
+        this.dragSourceSectionIndex = -1;
+        this.dragInsertIndex = -1;
+        this.dragTargetSectionIndex = -1;
         // ─── API Panel (Data Sources) ──────────────────────
+        this.showTemplateMenu = false;
         this.apiSources = [];
         this.apiLoading = false;
         this.apiBaseUrl = '';
@@ -539,12 +550,386 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
       padding: 16px; border-radius: 4px; overflow: auto;
       white-space: pre; tab-size: 2;
     }
+
+    /* ─── InteractJS Drag & Drop ─────────────────── */
+    .dragging { opacity: 0.4; cursor: grabbing !important; }
+    .drag-clone {
+      position: fixed; pointer-events: none; z-index: 9999;
+      opacity: 0.85; border: 2px solid var(--zrd-accent);
+      border-radius: 6px; background: white;
+      box-shadow: 0 8px 24px rgba(25,118,210,0.25);
+      padding: 8px 12px; font-size: 12px; font-weight: 500;
+      color: var(--zrd-accent); max-width: 200px;
+      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .drop-active { border: 2px dashed var(--zrd-accent) !important; background: rgba(25,118,210,0.04) !important; }
+    .drop-target { background: rgba(25,118,210,0.1) !important; border-color: var(--zrd-accent) !important; }
+    .resize-active { outline: 2px dashed var(--zrd-accent); outline-offset: 2px; }
+    .drag-insert-line {
+      position: absolute; left: 4px; right: 4px; height: 2px;
+      background: var(--zrd-accent); border-radius: 1px; z-index: 10;
+      pointer-events: none;
+    }
+    .drag-insert-line::before, .drag-insert-line::after {
+      content: ''; position: absolute; top: -3px;
+      width: 8px; height: 8px; border-radius: 50%;
+      background: var(--zrd-accent);
+    }
+    .drag-insert-line::before { left: -4px; }
+    .drag-insert-line::after { right: -4px; }
+    .canvas-field.can-drop { box-shadow: 0 0 0 2px rgba(25,118,210,0.3); }
+    .section-drop-zone {
+      min-height: 8px; transition: all 0.15s; border-radius: 4px;
+      margin: 2px 4px;
+    }
+    .section-drop-zone.drop-active {
+      min-height: 32px; border: 2px dashed var(--zrd-accent);
+      background: rgba(25,118,210,0.06);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 11px; color: var(--zrd-accent);
+    }
   `; }
     // ─── Lifecycle ────────────────────────────────────
     updated(changed) {
         if (changed.has('schema') && this.schema && this.undoStack.length === 0) {
             this.undoStack = [JSON.stringify(this.schema)];
         }
+        // Initialize InteractJS after render when in design mode
+        if (this.viewMode === 'design' && this.schema) {
+            this.initInteract();
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.cleanupInteract();
+    }
+    // ─── InteractJS Integration ───────────────────────
+    async initInteract() {
+        if (!this.interactLoaded) {
+            try {
+                // @ts-ignore — optional peer dependency
+                const mod = await import('interactjs');
+                this.interact = mod.default;
+                this.interactLoaded = true;
+            }
+            catch {
+                console.warn('[zs-page-designer] InteractJS not available, falling back to native drag');
+                return;
+            }
+        }
+        // Schedule setup after DOM updates
+        requestAnimationFrame(() => this.setupInteractions());
+    }
+    cleanupInteract() {
+        if (!this.interact)
+            return;
+        const root = this.shadowRoot;
+        if (!root)
+            return;
+        // Clean all interact instances within shadow DOM
+        root.querySelectorAll('.toolbox-item, .canvas-field, .drop-zone, .section-drop-zone, .canvas-grid').forEach(el => {
+            try {
+                this.interact.unset(el);
+            }
+            catch { /* already cleaned */ }
+        });
+        if (this.dragClone) {
+            this.dragClone.remove();
+            this.dragClone = null;
+        }
+    }
+    setupInteractions() {
+        if (!this.interact || !this.shadowRoot)
+            return;
+        const interact = this.interact;
+        const root = this.shadowRoot;
+        // ── Toolbox items: draggable to canvas ──
+        root.querySelectorAll('.toolbox-item').forEach(el => {
+            // Avoid re-initializing
+            if (el.__interactSetup)
+                return;
+            el.__interactSetup = true;
+            interact(el).draggable({
+                inertia: false,
+                autoScroll: true,
+                listeners: {
+                    start: (event) => {
+                        const type = event.target.getAttribute('data-field-type');
+                        if (!type)
+                            return;
+                        this.dragSourceType = type;
+                        this.dragSourceFieldId = null;
+                        this.dragSourceSectionIndex = -1;
+                        event.target.classList.add('dragging');
+                        // Create clone
+                        this.createDragClone(event.clientX, event.clientY, event.target.querySelector('.toolbox-label')?.textContent ?? type);
+                    },
+                    move: (event) => {
+                        if (this.dragClone) {
+                            this.dragClone.style.left = `${event.clientX + 12}px`;
+                            this.dragClone.style.top = `${event.clientY + 12}px`;
+                        }
+                    },
+                    end: (event) => {
+                        event.target.classList.remove('dragging');
+                        this.removeDragClone();
+                        this.dragSourceType = null;
+                    },
+                },
+            });
+        });
+        // ── Canvas fields: draggable for reorder + cross-section ──
+        root.querySelectorAll('.canvas-field').forEach(el => {
+            if (el.__interactSetup)
+                return;
+            el.__interactSetup = true;
+            interact(el).draggable({
+                inertia: false,
+                autoScroll: true,
+                listeners: {
+                    start: (event) => {
+                        const fieldId = event.target.getAttribute('data-field-id');
+                        const si = parseInt(event.target.getAttribute('data-section-index') ?? '-1');
+                        if (!fieldId)
+                            return;
+                        this.dragSourceFieldId = fieldId;
+                        this.dragSourceType = null;
+                        this.dragSourceSectionIndex = si;
+                        event.target.classList.add('dragging');
+                        const label = event.target.querySelector('.field-preview-label')?.textContent ?? fieldId;
+                        this.createDragClone(event.clientX, event.clientY, label);
+                    },
+                    move: (event) => {
+                        if (this.dragClone) {
+                            this.dragClone.style.left = `${event.clientX + 12}px`;
+                            this.dragClone.style.top = `${event.clientY + 12}px`;
+                        }
+                        // Calculate insert position
+                        this.updateInsertIndicator(event);
+                    },
+                    end: (event) => {
+                        event.target.classList.remove('dragging');
+                        this.removeDragClone();
+                        this.removeInsertIndicator();
+                        // Perform reorder if we have a valid target
+                        if (this.dragSourceFieldId && this.dragTargetSectionIndex >= 0 && this.dragInsertIndex >= 0) {
+                            this.performFieldMove(this.dragSourceFieldId, this.dragSourceSectionIndex, this.dragTargetSectionIndex, this.dragInsertIndex);
+                        }
+                        this.dragSourceFieldId = null;
+                        this.dragSourceSectionIndex = -1;
+                        this.dragInsertIndex = -1;
+                        this.dragTargetSectionIndex = -1;
+                    },
+                },
+            });
+        });
+        // ── Drop zones: accept fields from toolbox ──
+        root.querySelectorAll('.drop-zone, .section-drop-zone').forEach(el => {
+            if (el.__interactSetup)
+                return;
+            el.__interactSetup = true;
+            interact(el).dropzone({
+                accept: '.toolbox-item, .canvas-field',
+                overlap: 0.25,
+                ondragenter: (event) => {
+                    event.target.classList.add('drop-active', 'drop-target');
+                },
+                ondragleave: (event) => {
+                    event.target.classList.remove('drop-active', 'drop-target');
+                },
+                ondrop: (event) => {
+                    event.target.classList.remove('drop-active', 'drop-target');
+                    const si = parseInt(event.target.getAttribute('data-section-index') ?? '0');
+                    if (this.dragSourceType) {
+                        // Drop from toolbox
+                        this.addField(this.dragSourceType, si);
+                    }
+                    else if (this.dragSourceFieldId) {
+                        // Drop from canvas (cross-section move)
+                        const insertIdx = this.schema?.sections[si]?.fields.length ?? 0;
+                        this.performFieldMove(this.dragSourceFieldId, this.dragSourceSectionIndex, si, insertIdx);
+                    }
+                },
+            });
+        });
+        // ── Canvas grids: drop zones for reorder within section ──
+        root.querySelectorAll('.canvas-grid').forEach(el => {
+            if (el.__interactSetup)
+                return;
+            el.__interactSetup = true;
+            interact(el).dropzone({
+                accept: '.toolbox-item, .canvas-field',
+                overlap: 0.1,
+                ondragenter: (event) => {
+                    event.target.classList.add('drop-active');
+                },
+                ondragleave: (event) => {
+                    event.target.classList.remove('drop-active');
+                },
+                ondrop: (event) => {
+                    event.target.classList.remove('drop-active');
+                    const si = parseInt(event.target.getAttribute('data-section-index') ?? '0');
+                    if (this.dragSourceType) {
+                        const insertIdx = this.dragInsertIndex >= 0 ? this.dragInsertIndex : (this.schema?.sections[si]?.fields.length ?? 0);
+                        this.addFieldAtIndex(this.dragSourceType, si, insertIdx);
+                    }
+                },
+            });
+        });
+        // ── Resize handles on selected field ──
+        root.querySelectorAll('.canvas-field--selected').forEach(fieldEl => {
+            if (fieldEl.__interactResize)
+                return;
+            fieldEl.__interactResize = true;
+            const maxCols = this.schema?.layout.columns ?? 2;
+            interact(fieldEl).resizable({
+                edges: { left: '.rh-w, .rh-nw, .rh-sw', right: '.rh-e, .rh-ne, .rh-se', top: false, bottom: false },
+                listeners: {
+                    start: (event) => {
+                        event.target.classList.add('resize-active');
+                    },
+                    move: (event) => {
+                        // Calculate colSpan based on width change
+                        const grid = event.target.closest('.canvas-grid');
+                        if (!grid)
+                            return;
+                        const gridWidth = grid.getBoundingClientRect().width;
+                        const colWidth = gridWidth / maxCols;
+                        const newColSpan = Math.max(1, Math.min(maxCols, Math.round(event.rect.width / colWidth)));
+                        const fieldId = event.target.getAttribute('data-field-id');
+                        if (fieldId && this.schema) {
+                            for (const s of this.schema.sections) {
+                                const f = s.fields.find(f => f.id === fieldId);
+                                if (f && f.colSpan !== newColSpan) {
+                                    f.colSpan = newColSpan;
+                                    this.requestUpdate();
+                                    break;
+                                }
+                            }
+                        }
+                    },
+                    end: (event) => {
+                        event.target.classList.remove('resize-active');
+                        this.commitChange();
+                    },
+                },
+                modifiers: interact.modifiers ? [
+                    interact.modifiers.restrictSize({
+                        min: { width: 80, height: 30 },
+                    }),
+                ] : [],
+            });
+        });
+    }
+    createDragClone(x, y, label) {
+        this.removeDragClone();
+        const clone = document.createElement('div');
+        clone.className = 'drag-clone';
+        clone.textContent = label;
+        clone.style.left = `${x + 12}px`;
+        clone.style.top = `${y + 12}px`;
+        document.body.appendChild(clone);
+        this.dragClone = clone;
+    }
+    removeDragClone() {
+        if (this.dragClone) {
+            this.dragClone.remove();
+            this.dragClone = null;
+        }
+    }
+    updateInsertIndicator(event) {
+        if (!this.shadowRoot || !this.schema)
+            return;
+        const root = this.shadowRoot;
+        // Find which canvas-grid we're over
+        const grids = root.querySelectorAll('.canvas-grid');
+        for (let si = 0; si < grids.length; si++) {
+            const grid = grids[si];
+            const rect = grid.getBoundingClientRect();
+            if (event.clientX >= rect.left && event.clientX <= rect.right &&
+                event.clientY >= rect.top && event.clientY <= rect.bottom) {
+                this.dragTargetSectionIndex = si;
+                // Find insert position among fields
+                const fields = grid.querySelectorAll('.canvas-field');
+                let insertIdx = fields.length;
+                for (let fi = 0; fi < fields.length; fi++) {
+                    const fieldRect = fields[fi].getBoundingClientRect();
+                    const midY = fieldRect.top + fieldRect.height / 2;
+                    if (event.clientY < midY) {
+                        insertIdx = fi;
+                        break;
+                    }
+                }
+                this.dragInsertIndex = insertIdx;
+                this.showInsertLine(grid, fields, insertIdx);
+                return;
+            }
+        }
+        this.removeInsertIndicator();
+    }
+    showInsertLine(grid, fields, index) {
+        this.removeInsertIndicator();
+        const line = document.createElement('div');
+        line.className = 'drag-insert-line';
+        line.setAttribute('data-insert-line', 'true');
+        if (fields.length === 0 || index >= fields.length) {
+            // Append at end
+            grid.appendChild(line);
+            line.style.position = 'relative';
+            line.style.marginTop = '4px';
+        }
+        else {
+            // Insert before the field at index
+            const targetField = fields[index];
+            targetField.style.position = 'relative';
+            grid.insertBefore(line, targetField);
+            line.style.position = 'relative';
+            line.style.marginBottom = '4px';
+        }
+    }
+    removeInsertIndicator() {
+        if (!this.shadowRoot)
+            return;
+        this.shadowRoot.querySelectorAll('[data-insert-line]').forEach(el => el.remove());
+    }
+    performFieldMove(fieldId, fromSi, toSi, toIndex) {
+        if (!this.schema || fromSi < 0)
+            return;
+        const fromSection = this.schema.sections[fromSi];
+        const toSection = this.schema.sections[toSi];
+        if (!fromSection || !toSection)
+            return;
+        const fromFi = fromSection.fields.findIndex(f => f.id === fieldId);
+        if (fromFi < 0)
+            return;
+        const [field] = fromSection.fields.splice(fromFi, 1);
+        // Adjust target index if moving within same section and removing shifted indices
+        let adjustedIndex = toIndex;
+        if (fromSi === toSi && fromFi < toIndex) {
+            adjustedIndex = Math.max(0, toIndex - 1);
+        }
+        adjustedIndex = Math.min(adjustedIndex, toSection.fields.length);
+        toSection.fields.splice(adjustedIndex, 0, field);
+        this.commitChange();
+    }
+    addFieldAtIndex(type, sectionIndex, insertIndex) {
+        if (!this.schema) {
+            this.addField(type, sectionIndex);
+            return;
+        }
+        if (sectionIndex >= this.schema.sections.length)
+            sectionIndex = 0;
+        const id = `${type}_${Date.now()}`;
+        const meta = getAllFields().find(f => f.type === type);
+        const newField = {
+            id, type, field: id,
+            label: meta?.label ?? type,
+            props: meta?.defaultProps ? { ...meta.defaultProps } : undefined,
+        };
+        const idx = Math.min(insertIndex, this.schema.sections[sectionIndex].fields.length);
+        this.schema.sections[sectionIndex].fields.splice(idx, 0, newField);
+        this.selectedFieldId = id;
+        this.commitChange();
     }
     // ─── Undo/Redo ────────────────────────────────────
     pushUndo() {
@@ -700,6 +1085,19 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
             this.commitChange();
         }}">+ Seccion</button>
 
+        <div style="position:relative;display:inline-block;">
+          <button class="tb-btn" @click="${() => { this.showTemplateMenu = !this.showTemplateMenu; }}">📋 Plantillas ▾</button>
+          ${this.showTemplateMenu ? this.renderTemplateMenu() : nothing}
+        </div>
+
+        <button class="tb-btn tb-btn--danger" @click="${() => {
+            this.schema = { id: 'new-form', version: '1.0', title: 'Nuevo Formulario', layout: { type: 'grid', columns: 2 }, sections: [{ id: 'main', title: 'Datos', fields: [] }] };
+            this.undoStack = [JSON.stringify(this.schema)];
+            this.redoStack = [];
+            this.selectedFieldId = null;
+            this.commitChange();
+        }}">🗑 Nuevo</button>
+
         <div class="toolbar-sep"></div>
 
         <button class="tb-btn ${this.viewMode === 'design' ? 'tb-btn--active' : ''}" @click="${() => { this.viewMode = 'design'; }}">✏️ Diseño</button>
@@ -750,6 +1148,7 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
                   ${items.map(f => html `
                     <div class="toolbox-item"
                       draggable="true"
+                      data-field-type="${f.type}"
                       @dragstart="${(e) => { this.dragType = f.type; e.dataTransfer?.setData('text/plain', f.type); }}"
                       @dragend="${() => { this.dragType = null; }}"
                       @dblclick="${() => this.addField(f.type)}"
@@ -797,7 +1196,7 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
     }
     renderDesignCanvas() {
         if (!this.schema) {
-            return html `<div class="drop-zone ${this.dragType ? 'drop-zone--active' : ''}" style="width:500px;height:200px;display:flex;align-items:center;justify-content:center;"
+            return html `<div class="drop-zone ${this.dragType ? 'drop-zone--active' : ''}" data-section-index="0" style="width:500px;height:200px;display:flex;align-items:center;justify-content:center;"
         @dragover="${(e) => e.preventDefault()}"
         @drop="${(e) => { e.preventDefault(); if (this.dragType) {
                 this.addField(this.dragType);
@@ -816,10 +1215,12 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
               <span style="flex:1;"></span>
               <span style="font-size:10px;color:var(--zrd-text-muted);">${section.fields.length} campos</span>
             </div>
-            <div class="canvas-grid" style="grid-template-columns:repeat(${section.columns ?? cols}, 1fr);">
+            <div class="section-drop-zone" data-section-index="${si}" data-position="top"></div>
+            <div class="canvas-grid" data-section-index="${si}" style="grid-template-columns:repeat(${section.columns ?? cols}, 1fr);">
               ${section.fields.map((field, fi) => this.renderCanvasField(field, si, fi, section.columns ?? cols))}
             </div>
             <div class="drop-zone ${this.dragType ? 'drop-zone--active' : ''}"
+              data-section-index="${si}"
               @dragover="${(e) => e.preventDefault()}"
               @drop="${(e) => { e.preventDefault(); if (this.dragType) {
             this.addField(this.dragType, si);
@@ -840,6 +1241,8 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         return html `
       <div class="canvas-field ${isSelected ? 'canvas-field--selected' : ''}"
         style="${gridCol ? `grid-column:${gridCol};` : ''}"
+        data-field-id="${field.id}"
+        data-section-index="${si}"
         @click="${(e) => { e.stopPropagation(); this.selectedFieldId = field.id; }}"
       >
         <!-- Type badge -->
@@ -1180,6 +1583,145 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
       </div>
     `;
     }
+    // ─── Template Menu ─────────────────────────────────
+    renderTemplateMenu() {
+        const templates = [
+            {
+                id: 'blank', icon: '📄', title: 'En Blanco', desc: '2 columnas, sin campos',
+                schema: { id: 'blank', version: '1.0', title: 'Nuevo Formulario', layout: { type: 'grid', columns: 2, gap: 16 }, sections: [{ id: 'main', title: 'Datos', fields: [] }] },
+            },
+            {
+                id: 'contact', icon: '👤', title: 'Contacto', desc: 'Nombre, email, telefono, pais',
+                schema: { id: 'contact', version: '1.0', title: 'Ficha de Contacto', layout: { type: 'grid', columns: 2, gap: 16 }, sections: [
+                        { id: 's1', title: 'Datos Personales', fields: [
+                                { id: 'nombre', type: 'text', field: 'nombre', label: 'Nombre Completo', required: true },
+                                { id: 'email', type: 'email', field: 'email', label: 'Email', required: true },
+                                { id: 'telefono', type: 'phone', field: 'telefono', label: 'Telefono' },
+                                { id: 'pais', type: 'select', field: 'pais', label: 'Pais', props: { options: [{ value: 'VE', label: 'Venezuela' }, { value: 'CO', label: 'Colombia' }, { value: 'MX', label: 'Mexico' }, { value: 'ES', label: 'España' }, { value: 'US', label: 'EEUU' }] } },
+                                { id: 'notas', type: 'textarea', field: 'notas', label: 'Notas', colSpan: 2 },
+                            ] },
+                    ], actions: [{ id: 'save', type: 'submit', label: 'Guardar', variant: 'primary' }, { id: 'cancel', type: 'reset', label: 'Cancelar', variant: 'secondary' }] },
+            },
+            {
+                id: 'client', icon: '🏢', title: 'Cliente Completo', desc: 'Datos personales, direccion, fiscal, tags',
+                schema: { id: 'client', version: '1.0', title: 'Registro de Cliente', layout: { type: 'grid', columns: 2, gap: 16 }, sections: [
+                        { id: 's1', title: 'Datos del Cliente', fields: [
+                                { id: 'razon', type: 'text', field: 'razonSocial', label: 'Razon Social', required: true },
+                                { id: 'rif', type: 'text', field: 'rif', label: 'RIF / NIT', required: true },
+                                { id: 'email', type: 'email', field: 'email', label: 'Email' },
+                                { id: 'telefono', type: 'phone', field: 'telefono', label: 'Telefono' },
+                                { id: 'contacto', type: 'text', field: 'contacto', label: 'Persona de Contacto' },
+                                { id: 'tipo', type: 'select', field: 'tipo', label: 'Tipo', props: { options: [{ value: 'empresa', label: 'Empresa' }, { value: 'persona', label: 'Persona Natural' }] } },
+                            ] },
+                        { id: 's2', title: 'Direccion', fields: [
+                                { id: 'direccion', type: 'address', field: 'direccion', label: 'Direccion Fiscal', colSpan: 2 },
+                            ] },
+                        { id: 's3', title: 'Configuracion', fields: [
+                                { id: 'limite', type: 'currency', field: 'limiteCredito', label: 'Limite de Credito' },
+                                { id: 'plazo', type: 'number', field: 'plazoPago', label: 'Plazo de Pago (dias)' },
+                                { id: 'tags', type: 'chips', field: 'tags', label: 'Etiquetas', colSpan: 2, props: { allowCustom: true, colorMode: 'auto', options: [{ value: 'vip', label: 'VIP' }, { value: 'mayorista', label: 'Mayorista' }, { value: 'credito', label: 'Credito' }] } },
+                                { id: 'activo', type: 'switch', field: 'activo', label: 'Cliente Activo' },
+                            ] },
+                    ], actions: [{ id: 'save', type: 'submit', label: 'Guardar Cliente', variant: 'primary' }, { id: 'cancel', type: 'reset', label: 'Cancelar', variant: 'secondary' }] },
+            },
+            {
+                id: 'employee', icon: '👷', title: 'Empleado', desc: 'Datos personales, laborales, salario',
+                schema: { id: 'employee', version: '1.0', title: 'Ficha de Empleado', layout: { type: 'grid', columns: 3, gap: 16 }, sections: [
+                        { id: 's1', title: 'Datos Personales', fields: [
+                                { id: 'nombre', type: 'text', field: 'nombre', label: 'Nombre', required: true },
+                                { id: 'apellido', type: 'text', field: 'apellido', label: 'Apellido', required: true },
+                                { id: 'cedula', type: 'text', field: 'cedula', label: 'Cedula', required: true },
+                                { id: 'fechaNac', type: 'date', field: 'fechaNacimiento', label: 'Fecha Nacimiento' },
+                                { id: 'genero', type: 'select', field: 'genero', label: 'Genero', props: { options: [{ value: 'M', label: 'Masculino' }, { value: 'F', label: 'Femenino' }] } },
+                                { id: 'email', type: 'email', field: 'email', label: 'Email' },
+                            ] },
+                        { id: 's2', title: 'Datos Laborales', fields: [
+                                { id: 'fechaIngreso', type: 'date', field: 'fechaIngreso', label: 'Fecha Ingreso', required: true },
+                                { id: 'depto', type: 'text', field: 'departamento', label: 'Departamento' },
+                                { id: 'cargo', type: 'text', field: 'cargo', label: 'Cargo', required: true },
+                                { id: 'salario', type: 'currency', field: 'salario', label: 'Salario', required: true },
+                                { id: 'contrato', type: 'select', field: 'tipoContrato', label: 'Contrato', props: { options: [{ value: 'indefinido', label: 'Indefinido' }, { value: 'temporal', label: 'Temporal' }, { value: 'prueba', label: 'Prueba' }] } },
+                                { id: 'activo', type: 'switch', field: 'activo', label: 'Activo' },
+                            ] },
+                    ], actions: [{ id: 'save', type: 'submit', label: 'Guardar Empleado', variant: 'primary' }, { id: 'cancel', type: 'reset', label: 'Cancelar', variant: 'secondary' }] },
+            },
+            {
+                id: 'invoice', icon: '📄', title: 'Factura', desc: 'Cabecera de factura con campos fiscales',
+                schema: { id: 'invoice', version: '1.0', title: 'Factura de Venta', layout: { type: 'grid', columns: 3, gap: 16 }, sections: [
+                        { id: 's1', title: 'Datos de la Factura', fields: [
+                                { id: 'numero', type: 'text', field: 'numero', label: 'Numero', required: true, readOnly: true },
+                                { id: 'fecha', type: 'date', field: 'fecha', label: 'Fecha', required: true },
+                                { id: 'vencimiento', type: 'date', field: 'fechaVencimiento', label: 'Vencimiento' },
+                                { id: 'cliente', type: 'lookup', field: 'clienteId', label: 'Cliente', required: true, colSpan: 2, props: { placeholder: 'Buscar cliente...' } },
+                                { id: 'vendedor', type: 'select', field: 'vendedorId', label: 'Vendedor' },
+                            ] },
+                        { id: 's2', title: 'Totales', fields: [
+                                { id: 'subtotal', type: 'currency', field: 'subtotal', label: 'Subtotal', readOnly: true },
+                                { id: 'iva', type: 'currency', field: 'iva', label: 'IVA', readOnly: true },
+                                { id: 'total', type: 'currency', field: 'total', label: 'Total', readOnly: true },
+                                { id: 'observaciones', type: 'textarea', field: 'observaciones', label: 'Observaciones', colSpan: 3 },
+                            ] },
+                    ], actions: [{ id: 'save', type: 'submit', label: 'Guardar Factura', variant: 'primary' }, { id: 'cancel', type: 'reset', label: 'Cancelar', variant: 'secondary' }] },
+            },
+            {
+                id: 'product', icon: '📦', title: 'Producto', desc: 'Articulo con precio, stock, imagen',
+                schema: { id: 'product', version: '1.0', title: 'Ficha de Producto', layout: { type: 'grid', columns: 2, gap: 16 }, sections: [
+                        { id: 's1', title: 'Datos del Producto', fields: [
+                                { id: 'codigo', type: 'text', field: 'codigo', label: 'Codigo', required: true },
+                                { id: 'nombre', type: 'text', field: 'nombre', label: 'Nombre', required: true },
+                                { id: 'categoria', type: 'select', field: 'categoria', label: 'Categoria', props: { options: [{ value: 'hardware', label: 'Hardware' }, { value: 'software', label: 'Software' }, { value: 'servicio', label: 'Servicio' }] } },
+                                { id: 'precio', type: 'currency', field: 'precioVenta', label: 'Precio Venta', required: true },
+                                { id: 'costo', type: 'currency', field: 'costo', label: 'Costo' },
+                                { id: 'stock', type: 'number', field: 'stock', label: 'Stock Actual' },
+                                { id: 'desc', type: 'textarea', field: 'descripcion', label: 'Descripcion', colSpan: 2 },
+                                { id: 'activo', type: 'switch', field: 'activo', label: 'Activo' },
+                            ] },
+                    ], actions: [{ id: 'save', type: 'submit', label: 'Guardar Producto', variant: 'primary' }, { id: 'cancel', type: 'reset', label: 'Cancelar', variant: 'secondary' }] },
+            },
+            {
+                id: 'survey', icon: '📋', title: 'Encuesta', desc: 'Formulario con rating, checkboxes, radio',
+                schema: { id: 'survey', version: '1.0', title: 'Encuesta de Satisfaccion', layout: { type: 'grid', columns: 1, gap: 20 }, sections: [
+                        { id: 's1', title: 'Tu Opinion', fields: [
+                                { id: 'nombre', type: 'text', field: 'nombre', label: 'Tu Nombre' },
+                                { id: 'satisfaccion', type: 'rating', field: 'satisfaccion', label: 'Nivel de Satisfaccion', required: true, props: { mode: 'rating', maxRating: 5 } },
+                                { id: 'recomendaria', type: 'radio', field: 'recomendaria', label: 'Recomendarias nuestro servicio?', props: { mode: 'radio', horizontal: true, options: [{ value: 'si', label: 'Si' }, { value: 'no', label: 'No' }, { value: 'tal_vez', label: 'Tal vez' }] } },
+                                { id: 'aspectos', type: 'chips', field: 'aspectos', label: 'Que te gusto?', props: { allowCustom: false, colorMode: 'auto', options: [{ value: 'atencion', label: 'Atencion' }, { value: 'rapidez', label: 'Rapidez' }, { value: 'calidad', label: 'Calidad' }, { value: 'precio', label: 'Precio' }] } },
+                                { id: 'comentarios', type: 'textarea', field: 'comentarios', label: 'Comentarios adicionales', placeholder: 'Cuentanos mas...' },
+                            ] },
+                    ], actions: [{ id: 'send', type: 'submit', label: 'Enviar Encuesta', variant: 'primary' }] },
+            },
+        ];
+        return html `
+      <div style="position:absolute;top:100%;left:0;z-index:100;background:white;border:1px solid #ddd;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,0.15);width:320px;max-height:400px;overflow-y:auto;margin-top:4px;">
+        <div style="padding:10px 12px;border-bottom:1px solid #eee;font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:0.5px;">
+          Cargar Plantilla
+        </div>
+        ${templates.map(t => html `
+          <div style="display:flex;align-items:flex-start;gap:10px;padding:10px 14px;cursor:pointer;transition:background 0.1s;border-bottom:1px solid #f5f5f5;"
+            @click="${() => {
+            this.schema = structuredClone(t.schema);
+            this.undoStack = [JSON.stringify(this.schema)];
+            this.redoStack = [];
+            this.selectedFieldId = null;
+            this.showTemplateMenu = false;
+            this.commitChange();
+        }}"
+            @mouseenter="${(e) => { e.currentTarget.style.background = '#f0f7ff'; }}"
+            @mouseleave="${(e) => { e.currentTarget.style.background = ''; }}"
+          >
+            <span style="font-size:22px;margin-top:1px;">${t.icon}</span>
+            <div>
+              <div style="font-size:13px;font-weight:600;color:#333;">${t.title}</div>
+              <div style="font-size:11px;color:#999;margin-top:1px;">${t.desc}</div>
+            </div>
+          </div>
+        `)}
+        <div style="padding:8px 14px;border-top:1px solid #eee;">
+          <div style="font-size:10px;color:#bbb;text-align:center;">Clic en una plantilla para cargarla</div>
+        </div>
+      </div>
+    `;
+    }
     renderApiAuth() {
         if (this.apiLoggedIn) {
             return html `
@@ -1456,6 +1998,9 @@ __decorate([
 __decorate([
     state()
 ], ZsPageDesigner.prototype, "zoom", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "showTemplateMenu", void 0);
 __decorate([
     state()
 ], ZsPageDesigner.prototype, "apiSources", void 0);