@zentto/studio 0.8.4 → 0.9.1

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

@@ -66,6 +66,10 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         this.provider = {};
         this.autoSaveMs = 1000;
         this.gridSnap = 1;
+        /** API base URL for save/load (e.g. "http://localhost:4000") */
+        this.saveApiUrl = '';
+        /** Auth token for save/load API */
+        this.saveApiToken = '';
         // ─── State ────────────────────────────────────────
         this.selectedFieldId = null;
         this.viewMode = 'design';
@@ -74,6 +78,17 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         this.editingTitle = false;
         this.collapsedSections = new Set();
         this.zoom = 1;
+        // Save/Load state
+        this.saveDialogOpen = false;
+        this.loadDialogOpen = false;
+        this.serverAddons = [];
+        this.serverLoading = false;
+        this.serverSaving = false;
+        this.editingAddonId = null;
+        this.saveName = '';
+        this.saveDesc = '';
+        this.saveIconEmoji = '📋';
+        this.saveModules = ['global'];
         // Undo/Redo
         this.undoStack = [];
         this.redoStack = [];
@@ -88,6 +103,15 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         this.dragSourceSectionIndex = -1;
         this.dragInsertIndex = -1;
         this.dragTargetSectionIndex = -1;
+        // ─── Dialog Styles (inline, no shadow DOM issues) ─
+        this.dialogOverlay = 'position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;';
+        this.dialogBox = 'background:white;border-radius:12px;width:480px;max-width:90vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3);';
+        this.dialogHeader = 'padding:16px 20px;border-bottom:1px solid #eee;font-size:16px;font-weight:600;color:#333;display:flex;justify-content:space-between;align-items:center;';
+        this.dialogBody = 'padding:16px 20px;overflow-y:auto;flex:1;';
+        this.dialogFooter = 'padding:12px 20px;border-top:1px solid #eee;display:flex;gap:8px;justify-content:flex-end;';
+        this.inputStyle = 'width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;font-family:inherit;box-sizing:border-box;';
+        this.btnPrimary = 'padding:8px 20px;border:none;border-radius:6px;background:#1976d2;color:white;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;';
+        this.btnSecondary = 'padding:8px 20px;border:1px solid #ddd;border-radius:6px;background:white;cursor:pointer;font-size:13px;font-family:inherit;';
         // ─── API Panel (Data Sources) ──────────────────────
         this.showTemplateMenu = false;
         this.apiSources = [];
@@ -1147,6 +1171,182 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         <div class="panel-resize"></div>
         ${this.renderRightPanel()}
       </div>
+      ${this.saveDialogOpen ? this.renderSaveDialog() : nothing}
+      ${this.loadDialogOpen ? this.renderLoadDialog() : nothing}
+    `;
+    }
+    // ─── Save/Load Server Methods ─────────────────────
+    getApiHeaders() {
+        const h = { 'Content-Type': 'application/json' };
+        if (this.saveApiToken)
+            h['Authorization'] = `Bearer ${this.saveApiToken}`;
+        else if (this.apiToken)
+            h['Authorization'] = `Bearer ${this.apiToken}`;
+        return h;
+    }
+    getApiBase() {
+        return (this.saveApiUrl || this.apiBaseUrl || '').replace(/\/+$/, '');
+    }
+    openSaveDialog() {
+        if (!this.schema)
+            return;
+        this.saveName = this.saveName || this.schema.title || '';
+        this.saveDialogOpen = true;
+    }
+    async openLoadDialog() {
+        this.loadDialogOpen = true;
+        this.serverLoading = true;
+        try {
+            const base = this.getApiBase();
+            const res = await fetch(`${base}/v1/studio/addons`, { headers: this.getApiHeaders() });
+            const json = await res.json();
+            this.serverAddons = (json.data ?? []).map((r) => ({
+                id: r.AddonId ?? r.id, title: r.Title ?? r.title, icon: r.Icon ?? r.icon ?? '📋',
+                modules: r.modules ?? [], createdAt: r.CreatedAt ?? r.createdAt ?? '',
+                config: r.config ?? (r.Config ? JSON.parse(r.Config) : {}),
+            }));
+        }
+        catch {
+            this.serverAddons = [];
+        }
+        this.serverLoading = false;
+    }
+    async saveToServer() {
+        if (!this.schema || !this.saveName.trim())
+            return;
+        this.serverSaving = true;
+        const base = this.getApiBase();
+        const body = JSON.stringify({
+            title: this.saveName.trim(), description: this.saveDesc.trim(),
+            icon: this.saveIconEmoji || '📋', modules: this.saveModules,
+            config: { type: 'schema', schema: this.schema },
+        });
+        try {
+            if (this.editingAddonId) {
+                await fetch(`${base}/v1/studio/addons/${this.editingAddonId}`, { method: 'PUT', headers: this.getApiHeaders(), body });
+            }
+            else {
+                const res = await fetch(`${base}/v1/studio/addons`, { method: 'POST', headers: this.getApiHeaders(), body });
+                const json = await res.json();
+                if (json.data?.addonId)
+                    this.editingAddonId = json.data.addonId;
+            }
+            this.saveDialogOpen = false;
+        }
+        catch (err) {
+            console.error('[designer] save error:', err);
+        }
+        this.serverSaving = false;
+    }
+    loadFromServer(addon) {
+        if (!this.schema)
+            return;
+        const config = addon.config;
+        const s = config?.schema ?? config;
+        this.schema = s;
+        this.undoStack = [JSON.stringify(s)];
+        this.redoStack = [];
+        this.selectedFieldId = null;
+        this.editingAddonId = addon.id;
+        this.saveName = addon.title;
+        this.loadDialogOpen = false;
+        this.emitChange();
+    }
+    async deleteFromServer(id) {
+        const base = this.getApiBase();
+        try {
+            await fetch(`${base}/v1/studio/addons/${id}`, { method: 'DELETE', headers: this.getApiHeaders() });
+        }
+        catch { }
+        this.serverAddons = this.serverAddons.filter(a => a.id !== id);
+    }
+    renderSaveDialog() {
+        const MODS = [
+            { v: 'global', l: 'Global' }, { v: 'compras', l: 'Compras' }, { v: 'ventas', l: 'Ventas' },
+            { v: 'inventario', l: 'Inventario' }, { v: 'contabilidad', l: 'Contabilidad' },
+            { v: 'nomina', l: 'Nómina' }, { v: 'bancos', l: 'Bancos' }, { v: 'crm', l: 'CRM' },
+        ];
+        return html `
+      <div style="${this.dialogOverlay}" @click="${(e) => { if (e.target === e.currentTarget)
+            this.saveDialogOpen = false; }}">
+        <div style="${this.dialogBox}" @click="${(e) => e.stopPropagation()}">
+          <div style="${this.dialogHeader}">
+            <span>${this.editingAddonId ? '💾 Actualizar' : '💾 Guardar'} en servidor</span>
+            <button style="border:none;background:none;font-size:18px;cursor:pointer;color:#999;" @click="${() => { this.saveDialogOpen = false; }}">✕</button>
+          </div>
+          <div style="${this.dialogBody}">
+            <div style="margin-bottom:12px;">
+              <label style="font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:4px;">Nombre *</label>
+              <input style="${this.inputStyle}" .value="${this.saveName}" @input="${(e) => { this.saveName = e.target.value; }}" placeholder="Mi formulario" />
+            </div>
+            <div style="margin-bottom:12px;">
+              <label style="font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:4px;">Descripcion</label>
+              <textarea style="${this.inputStyle}resize:vertical;min-height:50px;" .value="${this.saveDesc}" @input="${(e) => { this.saveDesc = e.target.value; }}"></textarea>
+            </div>
+            <div style="display:flex;gap:12px;margin-bottom:12px;">
+              <div>
+                <label style="font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:4px;">Icono</label>
+                <input style="${this.inputStyle}width:60px;font-size:20px;text-align:center;" .value="${this.saveIconEmoji}" maxlength="4" @input="${(e) => { this.saveIconEmoji = e.target.value; }}" />
+              </div>
+            </div>
+            <div>
+              <label style="font-size:12px;font-weight:600;color:#555;display:block;margin-bottom:6px;">Modulos donde aparece</label>
+              <div style="display:flex;flex-wrap:wrap;gap:6px;">
+                ${MODS.map(m => {
+            const active = this.saveModules.includes(m.v);
+            return html `<button style="padding:4px 10px;border:1px solid ${active ? '#1976d2' : '#ddd'};border-radius:14px;background:${active ? '#e3f2fd' : 'white'};color:${active ? '#1976d2' : '#666'};cursor:pointer;font-size:11px;font-family:inherit;font-weight:${active ? '600' : '400'};"
+                    @click="${() => { this.saveModules = active ? this.saveModules.filter(x => x !== m.v) : [...this.saveModules, m.v]; this.requestUpdate(); }}"
+                  >${m.l}</button>`;
+        })}
+              </div>
+            </div>
+          </div>
+          <div style="${this.dialogFooter}">
+            <button style="${this.btnSecondary}" @click="${() => { this.saveDialogOpen = false; }}">Cancelar</button>
+            <button style="${this.btnPrimary}${!this.saveName.trim() || this.serverSaving ? 'opacity:0.5;pointer-events:none;' : ''}" @click="${this.saveToServer}">
+              ${this.serverSaving ? '⏳ Guardando...' : this.editingAddonId ? '💾 Actualizar' : '💾 Guardar'}
+            </button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    renderLoadDialog() {
+        return html `
+      <div style="${this.dialogOverlay}" @click="${(e) => { if (e.target === e.currentTarget)
+            this.loadDialogOpen = false; }}">
+        <div style="${this.dialogBox}max-height:70vh;" @click="${(e) => e.stopPropagation()}">
+          <div style="${this.dialogHeader}">
+            <span>📂 Cargar desde servidor</span>
+            <button style="border:none;background:none;font-size:18px;cursor:pointer;color:#999;" @click="${() => { this.loadDialogOpen = false; }}">✕</button>
+          </div>
+          <div style="${this.dialogBody}">
+            ${this.serverLoading
+            ? html `<div style="text-align:center;padding:30px;color:#999;">⏳ Cargando...</div>`
+            : this.serverAddons.length === 0
+                ? html `<div style="text-align:center;padding:30px;color:#999;">No hay schemas guardados en el servidor.</div>`
+                : this.serverAddons.map(a => html `
+                    <div style="display:flex;align-items:center;gap:10px;padding:10px 8px;border-bottom:1px solid #f0f0f0;cursor:pointer;border-radius:6px;transition:background 0.1s;"
+                      @mouseover="${(e) => { e.currentTarget.style.background = '#f5f5f5'; }}"
+                      @mouseout="${(e) => { e.currentTarget.style.background = ''; }}"
+                      @click="${() => this.loadFromServer(a)}"
+                    >
+                      <span style="font-size:22px;">${a.icon}</span>
+                      <div style="flex:1;min-width:0;">
+                        <div style="font-size:13px;font-weight:600;color:#333;">${a.title}</div>
+                        <div style="font-size:10px;color:#999;">${a.modules.join(', ')} — ${a.createdAt ? new Date(a.createdAt).toLocaleDateString() : ''}</div>
+                      </div>
+                      <button style="border:none;background:none;cursor:pointer;color:#d32f2f;font-size:14px;padding:4px;" title="Eliminar"
+                        @click="${(e) => { e.stopPropagation(); this.deleteFromServer(a.id); }}"
+                      >🗑</button>
+                    </div>
+                  `)}
+          </div>
+          <div style="${this.dialogFooter}">
+            <button style="${this.btnSecondary}" @click="${() => { this.loadDialogOpen = false; }}">Cerrar</button>
+          </div>
+        </div>
+      </div>
     `;
     }
     // ─── Toolbar ──────────────────────────────────────
@@ -1197,6 +1397,8 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
 
         <span class="tb-spacer"></span>
 
+        <button class="tb-btn" style="color:#2e7d32;font-weight:600;" @click="${this.openSaveDialog}" title="Guardar en servidor">💾 Guardar</button>
+        <button class="tb-btn" @click="${this.openLoadDialog}" title="Cargar desde servidor">📂 Cargar</button>
         <button class="tb-btn" @click="${() => {
             if (this.schema) {
                 navigator.clipboard.writeText(JSON.stringify(this.schema, null, 2));
@@ -1385,7 +1587,7 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
         if (field.type === 'heading')
             return field.label ?? 'Titulo';
         if (field.type === 'datagrid')
-            return this.renderLiveDataGrid(field);
+            return '◫ ZenttoDataGrid';
         if (field.type === 'report')
             return '◫ ZenttoReportViewer';
         if (field.type === 'chart')
@@ -1406,34 +1608,6 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
             return '▸ Nodo 1\n  ▸ Nodo 2';
         return field.placeholder ?? field.type;
     }
-    /** Render live datagrid inside canvas — props update in real time */
-    renderLiveDataGrid(field) {
-        const p = field.props ?? {};
-        const rawEp = p.endpoint || '';
-        // Build full URL: if relative path and we have apiBaseUrl, prepend it
-        const ep = rawEp && !rawEp.startsWith('http') && this.apiBaseUrl
-            ? `${this.apiBaseUrl.replace(/\/+$/, '')}${rawEp.startsWith('/') ? '' : '/'}${rawEp}`
-            : rawEp;
-        const headers = {};
-        if (this.apiToken) {
-            headers['Authorization'] = `Bearer ${this.apiToken}`;
-            if (this.apiCompany)
-                headers['x-empresa'] = this.apiCompany;
-            if (this.apiBranch)
-                headers['x-sucursal'] = this.apiBranch;
-        }
-        return html `
-      <zs-field-datagrid
-        .config="${field}"
-        .endpoint="${ep}"
-        .authToken="${this.apiToken}"
-        .authHeaders="${headers}"
-        .designMode="${true}"
-        .theme="${'light'}"
-        style="display:block;width:100%;min-height:200px;"
-      ></zs-field-datagrid>
-    `;
-    }
     // ─── Right Panel (Properties — Figma-quality) ──────
     renderRightPanel() {
         const field = this.selectedField;
@@ -1567,345 +1741,9 @@ let ZsPageDesigner = class ZsPageDesigner extends LitElement {
             ` : ''}
           ` : ''}
         </div>
-
-        <!-- Type-specific props -->
-        ${this.renderTypeSpecificProps(field)}
-      </div>
-    `;
-    }
-    // ─── Type-Specific Property Panels ────────────────
-    renderTypeSpecificProps(field) {
-        switch (field.type) {
-            case 'datagrid': return this.renderDataGridProps(field);
-            case 'chart': return this.renderChartProps(field);
-            case 'report': return this.renderReportProps(field);
-            case 'select':
-            case 'multiselect':
-            case 'radio': return this.renderSelectProps(field);
-            case 'number':
-            case 'currency':
-            case 'percentage':
-            case 'slider':
-            case 'rating': return this.renderNumberProps(field);
-            case 'lookup': return this.renderLookupProps(field);
-            case 'chips':
-            case 'tags': return this.renderChipsProps(field);
-            case 'treeview': return this.renderTreeViewProps(field);
-            case 'date':
-            case 'time':
-            case 'datetime': return this.renderDateProps(field);
-            case 'file':
-            case 'image': return this.renderFileProps(field);
-            case 'signature': return this.renderSignatureProps(field);
-            default: return nothing;
-        }
-    }
-    setProp(field, key, value) {
-        if (!field.props)
-            field.props = {};
-        field.props[key] = value;
-        this.commitChange();
-    }
-    // ─── DataGrid Props ───────────────────────────────
-    renderDataGridProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('grid-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('grid-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>DataGrid Config</h4>
-        </div>
-        ${!this.collapsedSections.has('grid-config') ? html `
-          <div class="prop-info">◫ Conecta un endpoint y el grid cargara los datos en el canvas</div>
-          <div class="prop-row"><span class="prop-label">Altura</span><input class="prop-input" .value="${p.height ?? '400px'}" placeholder="400px" @change="${(e) => this.setProp(field, 'height', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Page Size</span><input class="prop-input" type="number" min="5" .value="${String(p.pageSize ?? 25)}" @change="${(e) => this.setProp(field, 'pageSize', parseInt(e.target.value) || 25)}" /></div>
-          <div class="prop-row"><span class="prop-label">Densidad</span>
-            <select class="prop-input" .value="${p.density ?? 'compact'}" @change="${(e) => this.setProp(field, 'density', e.target.value)}">
-              <option value="compact">Compacta</option>
-              <option value="standard">Estandar</option>
-              <option value="comfortable">Comoda</option>
-            </select>
-          </div>
-          <div class="prop-row"><span class="prop-label">Row Click</span>
-            <select class="prop-input" .value="${p.onRowClick ?? 'emit'}" @change="${(e) => this.setProp(field, 'onRowClick', e.target.value)}">
-              <option value="emit">Emitir evento</option>
-              <option value="navigate">Navegar</option>
-              <option value="select">Seleccionar</option>
-              <option value="detail">Detalle</option>
-            </select>
-          </div>
-          ${p.onRowClick === 'navigate' ? html `
-            <div class="prop-row"><span class="prop-label">Nav Segment</span><input class="prop-input" .value="${p.rowClickSegment ?? ''}" placeholder="/clientes/{id}" @change="${(e) => this.setProp(field, 'rowClickSegment', e.target.value)}" /></div>
-          ` : ''}
-          <div class="prop-divider"></div>
-          ${this.renderToggle('Toolbar', p.enableToolbar ?? true, (v) => this.setProp(field, 'enableToolbar', v))}
-          ${this.renderToggle('Busqueda', p.enableSearch ?? true, (v) => this.setProp(field, 'enableSearch', v))}
-          ${this.renderToggle('Exportar', p.enableExport ?? false, (v) => this.setProp(field, 'enableExport', v))}
-          ${this.renderToggle('Paginacion', p.enablePagination ?? true, (v) => this.setProp(field, 'enablePagination', v))}
-          ${this.renderToggle('Filtros Header', p.enableHeaderFilters ?? false, (v) => this.setProp(field, 'enableHeaderFilters', v))}
-          ${this.renderToggle('Clipboard', p.enableClipboard ?? false, (v) => this.setProp(field, 'enableClipboard', v))}
-          ${this.renderToggle('Seleccion Filas', p.enableRowSelection ?? false, (v) => this.setProp(field, 'enableRowSelection', v))}
-          ${this.renderToggle('Master-Detail', p.enableMasterDetail ?? false, (v) => this.setProp(field, 'enableMasterDetail', v))}
-          ${this.renderToggle('Totales', p.showTotals ?? false, (v) => this.setProp(field, 'showTotals', v))}
-          ${this.renderToggle('Context Menu', p.enableContextMenu ?? false, (v) => this.setProp(field, 'enableContextMenu', v))}
-          ${this.renderToggle('Find (Ctrl+F)', p.enableFind ?? false, (v) => this.setProp(field, 'enableFind', v))}
-          ${this.renderToggle('Status Bar', p.enableStatusBar ?? false, (v) => this.setProp(field, 'enableStatusBar', v))}
-          ${this.renderToggle('Filter Panel', p.enableFilterPanel ?? false, (v) => this.setProp(field, 'enableFilterPanel', v))}
-          ${this.renderToggle('Configurador', p.enableConfigurator ?? false, (v) => this.setProp(field, 'enableConfigurator', v))}
-          <div class="prop-divider"></div>
-          <div class="prop-row"><span class="prop-label">Moneda</span><input class="prop-input" .value="${p.defaultCurrency ?? ''}" placeholder="USD, VES, EUR..." @change="${(e) => this.setProp(field, 'defaultCurrency', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Archivo Export</span><input class="prop-input" .value="${p.exportFilename ?? ''}" placeholder="clientes" @change="${(e) => this.setProp(field, 'exportFilename', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Grid ID</span><input class="prop-input" style="font-family:'SF Mono','Consolas',monospace;font-size:10px;" .value="${p.gridId ?? ''}" placeholder="clientes-grid" @change="${(e) => this.setProp(field, 'gridId', e.target.value)}" /></div>
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Chart Props ──────────────────────────────────
-    renderChartProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('chart-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('chart-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Chart Config</h4>
-        </div>
-        ${!this.collapsedSections.has('chart-config') ? html `
-          <div class="prop-info">📊 Configuracion del grafico SVG</div>
-          <div class="prop-row"><span class="prop-label">Tipo</span>
-            <select class="prop-input" .value="${p.chartType ?? 'bar'}" @change="${(e) => this.setProp(field, 'chartType', e.target.value)}">
-              <option value="bar">Barras</option>
-              <option value="line">Lineas</option>
-              <option value="pie">Torta</option>
-              <option value="donut">Donut</option>
-              <option value="area">Area</option>
-            </select>
-          </div>
-          <div class="prop-row"><span class="prop-label">Titulo</span><input class="prop-input" .value="${p.chartTitle ?? ''}" placeholder="Ventas por Mes" @change="${(e) => this.setProp(field, 'chartTitle', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Label Field</span><input class="prop-input" .value="${p.labelField ?? ''}" placeholder="mes" @change="${(e) => this.setProp(field, 'labelField', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Value Field</span><input class="prop-input" .value="${p.valueField ?? ''}" placeholder="total" @change="${(e) => this.setProp(field, 'valueField', e.target.value)}" /></div>
-          <div class="prop-divider"></div>
-          <div class="prop-pos-grid">
-            <div class="prop-pos-cell">
-              <span class="prop-pos-label prop-pos-label--w">W</span>
-              <input type="number" min="100" .value="${String(p.width ?? 400)}" @change="${(e) => this.setProp(field, 'width', parseInt(e.target.value) || 400)}" />
-            </div>
-            <div class="prop-pos-cell">
-              <span class="prop-pos-label prop-pos-label--h">H</span>
-              <input type="number" min="100" .value="${String(p.height ?? 250)}" @change="${(e) => this.setProp(field, 'height', parseInt(e.target.value) || 250)}" />
-            </div>
-          </div>
-          <div class="prop-divider"></div>
-          ${this.renderToggle('Leyenda', p.showLegend ?? true, (v) => this.setProp(field, 'showLegend', v))}
-          ${this.renderToggle('Animacion', p.animated ?? false, (v) => this.setProp(field, 'animated', v))}
-        ` : ''}
       </div>
     `;
     }
-    // ─── Report Props ─────────────────────────────────
-    renderReportProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('report-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('report-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Report Config</h4>
-        </div>
-        ${!this.collapsedSections.has('report-config') ? html `
-          <div class="prop-info">📋 Configuracion de zentto-report</div>
-          <div class="prop-row"><span class="prop-label">Template ID</span><input class="prop-input" .value="${p.templateId ?? ''}" placeholder="invoice-template" @change="${(e) => this.setProp(field, 'templateId', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Zoom</span><input class="prop-input" type="number" min="25" max="300" step="25" .value="${String(p.zoom ?? 100)}" @change="${(e) => this.setProp(field, 'zoom', parseInt(e.target.value) || 100)}" /></div>
-          <div class="prop-row"><span class="prop-label">Altura</span><input class="prop-input" .value="${p.height ?? '500px'}" placeholder="500px" @change="${(e) => this.setProp(field, 'height', e.target.value)}" /></div>
-          <div class="prop-divider"></div>
-          ${this.renderToggle('Toolbar', p.showToolbar ?? true, (v) => this.setProp(field, 'showToolbar', v))}
-          ${this.renderToggle('Imprimir', p.showPrint ?? true, (v) => this.setProp(field, 'showPrint', v))}
-          ${this.renderToggle('Exportar PDF', p.showExportPdf ?? true, (v) => this.setProp(field, 'showExportPdf', v))}
-          ${this.renderToggle('Navegacion', p.showNavigation ?? true, (v) => this.setProp(field, 'showNavigation', v))}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Select/Radio Props ───────────────────────────
-    renderSelectProps(field) {
-        const p = field.props ?? {};
-        const options = p.options ?? [];
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('select-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('select-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Opciones</h4>
-        </div>
-        ${!this.collapsedSections.has('select-config') ? html `
-          ${options.map((opt, i) => html `
-            <div style="display:flex;gap:3px;margin-bottom:3px;align-items:center;">
-              <input class="prop-input" style="flex:1;" .value="${opt.value}" placeholder="valor" @change="${(e) => { options[i].value = e.target.value; this.setProp(field, 'options', [...options]); }}" />
-              <input class="prop-input" style="flex:1;" .value="${opt.label}" placeholder="label" @change="${(e) => { options[i].label = e.target.value; this.setProp(field, 'options', [...options]); }}" />
-              <button style="border:none;background:none;cursor:pointer;color:#d32f2f;font-size:12px;padding:2px 4px;" @click="${() => { options.splice(i, 1); this.setProp(field, 'options', [...options]); }}">✕</button>
-            </div>
-          `)}
-          <button style="width:100%;padding:4px;border:1px dashed #ccc;border-radius:4px;background:none;cursor:pointer;font-size:10px;color:#888;font-family:inherit;margin-top:4px;"
-            @click="${() => { options.push({ value: '', label: '' }); this.setProp(field, 'options', [...options]); }}"
-          >+ Agregar opcion</button>
-          ${field.type === 'radio' ? html `
-            <div class="prop-divider"></div>
-            ${this.renderToggle('Horizontal', p.horizontal ?? false, (v) => this.setProp(field, 'horizontal', v))}
-          ` : ''}
-          ${field.type === 'multiselect' ? html `
-            <div class="prop-divider"></div>
-            ${this.renderToggle('Multiple', true, () => { })}
-          ` : ''}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Number/Currency/Slider/Rating Props ──────────
-    renderNumberProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('number-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('number-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Numero Config</h4>
-        </div>
-        ${!this.collapsedSections.has('number-config') ? html `
-          ${field.type === 'currency' ? html `
-            <div class="prop-row"><span class="prop-label">Simbolo</span><input class="prop-input" .value="${p.currencySymbol ?? '$'}" @change="${(e) => this.setProp(field, 'currencySymbol', e.target.value)}" /></div>
-          ` : ''}
-          ${field.type === 'slider' || field.type === 'rating' ? html `
-            <div class="prop-pos-grid">
-              <div class="prop-pos-cell">
-                <span class="prop-pos-label prop-pos-label--x">Min</span>
-                <input type="number" .value="${String(p.min ?? 0)}" @change="${(e) => this.setProp(field, 'min', parseInt(e.target.value) || 0)}" />
-              </div>
-              <div class="prop-pos-cell">
-                <span class="prop-pos-label prop-pos-label--y">Max</span>
-                <input type="number" .value="${String(p.max ?? (field.type === 'rating' ? 5 : 100))}" @change="${(e) => this.setProp(field, 'max', parseInt(e.target.value) || 100)}" />
-              </div>
-            </div>
-            ${field.type === 'slider' ? html `
-              <div class="prop-row"><span class="prop-label">Step</span><input class="prop-input" type="number" min="1" .value="${String(p.step ?? 1)}" @change="${(e) => this.setProp(field, 'step', parseInt(e.target.value) || 1)}" /></div>
-            ` : ''}
-            ${field.type === 'rating' ? html `
-              <div class="prop-row"><span class="prop-label">Estrellas</span><input class="prop-input" type="number" min="3" max="10" .value="${String(p.maxRating ?? 5)}" @change="${(e) => this.setProp(field, 'maxRating', parseInt(e.target.value) || 5)}" /></div>
-            ` : ''}
-          ` : ''}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Lookup Props ─────────────────────────────────
-    renderLookupProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('lookup-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('lookup-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Lookup Config</h4>
-        </div>
-        ${!this.collapsedSections.has('lookup-config') ? html `
-          <div class="prop-row"><span class="prop-label">Min Chars</span><input class="prop-input" type="number" min="1" .value="${String(p.minChars ?? 2)}" @change="${(e) => this.setProp(field, 'minChars', parseInt(e.target.value) || 2)}" /></div>
-          <div class="prop-row"><span class="prop-label">Debounce</span><input class="prop-input" type="number" min="100" step="100" .value="${String(p.debounceMs ?? 300)}" @change="${(e) => this.setProp(field, 'debounceMs', parseInt(e.target.value) || 300)}" /></div>
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Chips/Tags Props ─────────────────────────────
-    renderChipsProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('chips-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('chips-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Chips Config</h4>
-        </div>
-        ${!this.collapsedSections.has('chips-config') ? html `
-          <div class="prop-row"><span class="prop-label">Max Chips</span><input class="prop-input" type="number" min="0" .value="${String(p.maxChips ?? 0)}" @change="${(e) => this.setProp(field, 'maxChips', parseInt(e.target.value) || 0)}" /></div>
-          <div class="prop-row"><span class="prop-label">Color Mode</span>
-            <select class="prop-input" .value="${p.colorMode ?? 'default'}" @change="${(e) => this.setProp(field, 'colorMode', e.target.value)}">
-              <option value="default">Default</option>
-              <option value="primary">Primary</option>
-              <option value="success">Success</option>
-              <option value="auto">Auto (ciclo)</option>
-            </select>
-          </div>
-          ${this.renderToggle('Permitir custom', p.allowCustom ?? true, (v) => this.setProp(field, 'allowCustom', v))}
-          ${this.renderSelectProps(field)}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── TreeView Props ───────────────────────────────
-    renderTreeViewProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('tree-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('tree-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>TreeView Config</h4>
-        </div>
-        ${!this.collapsedSections.has('tree-config') ? html `
-          ${this.renderToggle('Multi-select', p.multiSelect ?? false, (v) => this.setProp(field, 'multiSelect', v))}
-          ${this.renderToggle('Checkboxes', p.showCheckboxes ?? false, (v) => this.setProp(field, 'showCheckboxes', v))}
-          ${this.renderToggle('Buscador', p.searchable ?? false, (v) => this.setProp(field, 'searchable', v))}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Date Props ───────────────────────────────────
-    renderDateProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('date-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('date-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Fecha Config</h4>
-        </div>
-        ${!this.collapsedSections.has('date-config') ? html `
-          <div class="prop-row"><span class="prop-label">Modo</span>
-            <select class="prop-input" .value="${p.mode ?? 'date'}" @change="${(e) => this.setProp(field, 'mode', e.target.value)}">
-              <option value="date">Fecha</option>
-              <option value="time">Hora</option>
-              <option value="datetime">Fecha y Hora</option>
-            </select>
-          </div>
-          <div class="prop-row"><span class="prop-label">Min</span><input class="prop-input" type="date" .value="${p.min ?? ''}" @change="${(e) => this.setProp(field, 'min', e.target.value)}" /></div>
-          <div class="prop-row"><span class="prop-label">Max</span><input class="prop-input" type="date" .value="${p.max ?? ''}" @change="${(e) => this.setProp(field, 'max', e.target.value)}" /></div>
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── File/Image Props ─────────────────────────────
-    renderFileProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('file-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('file-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Archivo Config</h4>
-        </div>
-        ${!this.collapsedSections.has('file-config') ? html `
-          <div class="prop-row"><span class="prop-label">Accept</span><input class="prop-input" .value="${p.accept ?? ''}" placeholder="image/*,.pdf" @change="${(e) => this.setProp(field, 'accept', e.target.value)}" /></div>
-          ${this.renderToggle('Multiple', p.multiple ?? false, (v) => this.setProp(field, 'multiple', v))}
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Signature Props ──────────────────────────────
-    renderSignatureProps(field) {
-        const p = field.props ?? {};
-        return html `
-      <div class="prop-section">
-        <div class="prop-section-header" data-section="layout" @click="${() => this.toggleSection('sig-config')}">
-          <span class="collapse-icon ${this.collapsedSections.has('sig-config') ? 'collapse-icon--collapsed' : ''}">▾</span>
-          <h4>Firma Config</h4>
-        </div>
-        ${!this.collapsedSections.has('sig-config') ? html `
-          <div class="prop-row"><span class="prop-label">Grosor</span><input class="prop-input" type="number" min="1" max="10" .value="${String(p.penWidth ?? 2)}" @change="${(e) => this.setProp(field, 'penWidth', parseInt(e.target.value) || 2)}" /></div>
-          <div class="prop-row"><span class="prop-label">Color</span><input class="prop-input" type="color" .value="${p.penColor ?? '#000000'}" @change="${(e) => this.setProp(field, 'penColor', e.target.value)}" /></div>
-        ` : ''}
-      </div>
-    `;
-    }
-    // ─── Grid Configurator Modal ────────────────────
     renderFormProperties() {
         if (!this.schema)
             return nothing;
@@ -2416,6 +2254,12 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'grid-snap' })
 ], ZsPageDesigner.prototype, "gridSnap", void 0);
+__decorate([
+    property({ type: String, attribute: 'save-api-url' })
+], ZsPageDesigner.prototype, "saveApiUrl", void 0);
+__decorate([
+    property({ type: String, attribute: 'save-api-token' })
+], ZsPageDesigner.prototype, "saveApiToken", void 0);
 __decorate([
     state()
 ], ZsPageDesigner.prototype, "selectedFieldId", void 0);
@@ -2437,6 +2281,36 @@ __decorate([
 __decorate([
     state()
 ], ZsPageDesigner.prototype, "zoom", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "saveDialogOpen", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "loadDialogOpen", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "serverAddons", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "serverLoading", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "serverSaving", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "editingAddonId", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "saveName", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "saveDesc", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "saveIconEmoji", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "saveModules", void 0);
 __decorate([
     state()
 ], ZsPageDesigner.prototype, "showTemplateMenu", void 0);