@zentto/studio 0.5.1 → 0.6.0

package/dist/designer/zs-app-wizard.d.ts

@@ -10,20 +10,35 @@ export declare class ZsAppWizard extends LitElement {
     private editingNavIndex;
     private showIconPicker;
     private iconPickerTarget;
+    private codeModalOpen;
+    private codeModalTitle;
+    private codeModalContent;
     connectedCallback(): void;
     private canNext;
     private next;
     private prev;
     private finish;
+    private ensureTheme;
+    private ensureDataSources;
     render(): import("lit-html").TemplateResult<1>;
     private renderTemplateStep;
     private renderBrandingStep;
     private renderNavStep;
     private addNavItem;
     private moveNav;
+    private renderDataSourcesStep;
     private renderPagesStep;
     private getContentIcon;
+    private renderThemeStep;
     private renderPreviewStep;
+    private exportJson;
+    private exportReactCode;
+    private exportNextCode;
+    private openCodeModal;
+    private closeCodeModal;
+    private copyCodeToClipboard;
+    private downloadCode;
+    private renderCodeModal;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/designer/zs-app-wizard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"zs-app-wizard.d.ts","sourceRoot":"","sources":["../../src/designer/zs-app-wizard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAAE,SAAS,EAAiD,MAAM,qBAAqB,CAAC;AAKpG,OAAO,yBAAyB,CAAC;AAqCjC,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,4BAiJV;IAEyB,aAAa,EAAE,SAAS,GAAG,IAAI,CAAQ;IAE1D,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,gBAAgB,CAA6B;IAE9D,iBAAiB;IAUjB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,MAAM;IAUd,MAAM;IAqCN,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,kBAAkB;IAkD1B,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,iBAAiB;CAqB1B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}
+{"version":3,"file":"zs-app-wizard.d.ts","sourceRoot":"","sources":["../../src/designer/zs-app-wizard.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAAE,SAAS,EAAiD,MAAM,qBAAqB,CAAC;AAOpG,OAAO,yBAAyB,CAAC;AAkEjC,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,4BAmOV;IAEyB,aAAa,EAAE,SAAS,GAAG,IAAI,CAAQ;IAE1D,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,MAAM,CAA0B;IACxC,OAAO,CAAC,eAAe,CAAM;IAC7B,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,gBAAgB,CAA6B;IAGrD,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,gBAAgB,CAAM;IAEvC,iBAAiB;IAUjB,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,IAAI;IAIZ,OAAO,CAAC,MAAM;IAUd,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,iBAAiB;IASzB,MAAM;IAyCN,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,kBAAkB;IAkD1B,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,UAAU;IAelB,OAAO,CAAC,OAAO;IAWf,OAAO,CAAC,qBAAqB;IAuG7B,OAAO,CAAC,eAAe;IAqCvB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,eAAe;IAuHvB,OAAO,CAAC,iBAAiB;IAyCzB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,YAAY;IAiBpB,OAAO,CAAC,eAAe;CAqBxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

package/dist/designer/zs-app-wizard.js

@@ -1,6 +1,6 @@
 // @zentto/studio — App Creation Wizard
 // Step-by-step wizard to create an AppConfig from a template
-// Steps: 1) Template → 2) Branding → 3) Navigation → 4) Pages → 5) Preview
+// Steps: 1) Template → 2) Branding → 3) Menu → 4) Data Sources → 5) Pages → 6) Style & Theme → 7) Preview
 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -11,14 +11,17 @@ import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { studioTokens, fieldBaseStyles } from '../styles/tokens.js';
 import { listAppTemplates, getAppTemplate } from '@zentto/studio-core';
+import { generateAppPage } from '@zentto/studio-core';
 // Import the app component for preview
 import '../zentto-studio-app.js';
 const STEPS = [
     { id: 'template', title: 'Plantilla', icon: '📋', description: 'Elige una plantilla base' },
     { id: 'branding', title: 'Marca', icon: '🎨', description: 'Personaliza tu aplicacion' },
     { id: 'navigation', title: 'Menu', icon: '📑', description: 'Configura el sidebar' },
+    { id: 'datasources', title: 'Fuentes de Datos', icon: '🔗', description: 'Conecta tus APIs y servicios' },
     { id: 'pages', title: 'Paginas', icon: '📄', description: 'Agrega paginas y contenido' },
-    { id: 'preview', title: 'Vista Previa', icon: '👁️', description: 'Revisa y finaliza' },
+    { id: 'theme', title: 'Estilo y Tema', icon: '🎭', description: 'Personaliza colores y tipografia' },
+    { id: 'preview', title: 'Vista Previa', icon: '👁️', description: 'Revisa, exporta y finaliza' },
 ];
 const SIDEBAR_STYLES = [
     { value: 'dark', label: 'Oscuro', preview: '#1e1e2d' },
@@ -37,6 +40,29 @@ const COLOR_PALETTE = [
     '#ff6b6b', '#6bcb77', '#4ecdc4', '#45b7d1', '#96ceb4',
     '#ffd93d', '#ff69b4', '#a29bfe', '#fd79a8', '#2d3436',
 ];
+const HTTP_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
+const THEME_MODES = [
+    { value: 'light', label: 'Claro', icon: '☀️' },
+    { value: 'dark', label: 'Oscuro', icon: '🌙' },
+    { value: 'auto', label: 'Automatico', icon: '🔄' },
+];
+const FONT_OPTIONS = [
+    'Inter, sans-serif',
+    'Roboto, sans-serif',
+    'Open Sans, sans-serif',
+    'Poppins, sans-serif',
+    'Nunito, sans-serif',
+    'system-ui, sans-serif',
+    'Georgia, serif',
+    'Fira Code, monospace',
+];
+const RADIUS_OPTIONS = [
+    { value: 0, label: 'Sin bordes' },
+    { value: 4, label: 'Sutil (4px)' },
+    { value: 8, label: 'Medio (8px)' },
+    { value: 12, label: 'Redondeado (12px)' },
+    { value: 20, label: 'Pill (20px)' },
+];
 let ZsAppWizard = class ZsAppWizard extends LitElement {
     constructor() {
         super(...arguments);
@@ -47,6 +73,10 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
         this.editingNavIndex = -1;
         this.showIconPicker = false;
         this.iconPickerTarget = 'nav';
+        // Code export modal
+        this.codeModalOpen = false;
+        this.codeModalTitle = '';
+        this.codeModalContent = '';
     }
     static { this.styles = [studioTokens, fieldBaseStyles, css `
     :host { display: block; font-family: var(--zs-font-family); }
@@ -62,13 +92,14 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
     .wizard-steps {
       display: flex; background: var(--zs-bg-secondary);
       border-bottom: 1px solid var(--zs-border); padding: 0;
+      overflow-x: auto;
     }
     .wizard-step {
-      flex: 1; display: flex; align-items: center; gap: 8px;
-      padding: 16px 20px; cursor: pointer;
-      color: var(--zs-text-muted); font-size: 13px;
+      flex: 1; display: flex; align-items: center; gap: 6px;
+      padding: 14px 12px; cursor: pointer;
+      color: var(--zs-text-muted); font-size: 12px;
       border-bottom: 3px solid transparent;
-      transition: all 150ms;
+      transition: all 150ms; min-width: 0; white-space: nowrap;
     }
     .wizard-step:hover { color: var(--zs-text-secondary); }
     .wizard-step--active {
@@ -76,8 +107,8 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
       font-weight: 500;
     }
     .wizard-step--done { color: var(--zs-success); }
-    .wizard-step-icon { font-size: 18px; }
-    .wizard-step-title { white-space: nowrap; }
+    .wizard-step-icon { font-size: 16px; }
+    .wizard-step-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
     /* Body */
     .wizard-body { padding: 32px; min-height: 400px; }
@@ -109,6 +140,7 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
     .form-label { font-size: 13px; font-weight: 500; color: var(--zs-text); margin-bottom: 6px; display: block; }
     .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
     .form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
+    .form-row-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
 
     /* Color picker grid */
     .color-grid { display: flex; flex-wrap: wrap; gap: 8px; }
@@ -193,6 +225,86 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
     .btn--success { background: var(--zs-success); color: white; }
     .btn--success:hover { opacity: 0.9; }
     .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+
+    /* Data source rows */
+    .ds-card {
+      border: 1px solid var(--zs-border); border-radius: 8px;
+      padding: 16px; margin-bottom: 12px;
+      background: var(--zs-bg);
+    }
+    .ds-card-header {
+      display: flex; align-items: center; justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .ds-card-title { font-size: 14px; font-weight: 500; color: var(--zs-text); }
+    .ds-method-badge {
+      display: inline-block; padding: 2px 8px; border-radius: 4px;
+      font-size: 11px; font-weight: 600; color: white;
+    }
+    .ds-method-GET { background: #27ae60; }
+    .ds-method-POST { background: #3498db; }
+    .ds-method-PUT { background: #e67e22; }
+    .ds-method-PATCH { background: #9b59b6; }
+    .ds-method-DELETE { background: #e74c3c; }
+
+    /* Theme preview card */
+    .theme-preview-card {
+      border: 1px solid var(--zs-border); border-radius: 12px;
+      padding: 24px; margin-top: 20px;
+      transition: all 200ms;
+    }
+    .theme-preview-header {
+      font-size: 16px; font-weight: 600; margin-bottom: 8px;
+    }
+    .theme-preview-text {
+      font-size: 13px; margin-bottom: 16px; opacity: 0.7;
+    }
+    .theme-preview-btn {
+      display: inline-block; padding: 8px 20px;
+      border: none; border-radius: 8px;
+      color: white; font-size: 13px; font-weight: 500;
+    }
+    .theme-preview-input {
+      display: inline-block; padding: 6px 12px;
+      border: 1px solid; border-radius: 8px;
+      font-size: 13px; margin-left: 8px; width: 150px;
+    }
+
+    /* Code modal */
+    .code-modal-overlay {
+      position: fixed; inset: 0; z-index: 9999;
+      background: rgba(0,0,0,0.5); display: flex;
+      align-items: center; justify-content: center;
+    }
+    .code-modal {
+      background: var(--zs-bg); border-radius: 12px;
+      width: 90%; max-width: 800px; max-height: 80vh;
+      display: flex; flex-direction: column;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+    }
+    .code-modal-header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: 16px 20px; border-bottom: 1px solid var(--zs-border);
+    }
+    .code-modal-header h3 { margin: 0; font-size: 16px; }
+    .code-modal-body {
+      flex: 1; overflow: auto; padding: 0;
+    }
+    .code-modal-body pre {
+      margin: 0; padding: 20px; font-size: 13px;
+      font-family: 'Fira Code', 'Cascadia Code', monospace;
+      line-height: 1.5; white-space: pre-wrap; word-break: break-word;
+      background: var(--zs-bg-secondary); min-height: 200px;
+    }
+    .code-modal-footer {
+      display: flex; gap: 8px; justify-content: flex-end;
+      padding: 12px 20px; border-top: 1px solid var(--zs-border);
+    }
+
+    /* Export buttons row */
+    .export-row {
+      display: flex; gap: 8px; flex-wrap: wrap;
+    }
   `]; }
     connectedCallback() {
         super.connectedCallback();
@@ -226,6 +338,19 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
             bubbles: true, composed: true,
         }));
     }
+    // ─── Helpers ──────────────────────────────────────
+    ensureTheme() {
+        if (!this.config.theme) {
+            this.config.theme = { mode: 'light' };
+        }
+        return this.config.theme;
+    }
+    ensureDataSources() {
+        if (!this.config.dataSources) {
+            this.config.dataSources = [];
+        }
+        return this.config.dataSources;
+    }
     // ─── Render ───────────────────────────────────────
     render() {
         return html `
@@ -248,8 +373,10 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
           ${this.currentStep === 0 ? this.renderTemplateStep() :
             this.currentStep === 1 ? this.renderBrandingStep() :
                 this.currentStep === 2 ? this.renderNavStep() :
-                    this.currentStep === 3 ? this.renderPagesStep() :
-                        this.renderPreviewStep()}
+                    this.currentStep === 3 ? this.renderDataSourcesStep() :
+                        this.currentStep === 4 ? this.renderPagesStep() :
+                            this.currentStep === 5 ? this.renderThemeStep() :
+                                this.renderPreviewStep()}
         </div>
 
         <div class="wizard-footer">
@@ -259,6 +386,8 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
             : html `<button class="btn btn--success" @click="${this.finish}">Crear Aplicacion</button>`}
         </div>
       </div>
+
+      ${this.codeModalOpen ? this.renderCodeModal() : nothing}
     `;
     }
     // ─── Step 1: Template Selection ──────────────────
@@ -397,7 +526,115 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
         [items[index], items[newIndex]] = [items[newIndex], items[index]];
         this.requestUpdate();
     }
-    // ─── Step 4: Pages ────────────────────────────────
+    // ─── Step 4: Data Sources ─────────────────────────
+    renderDataSourcesStep() {
+        if (!this.config)
+            return nothing;
+        const sources = this.ensureDataSources();
+        return html `
+      ${sources.length === 0 ? html `
+        <div style="text-align:center;padding:40px 20px;color:var(--zs-text-muted);">
+          <div style="font-size:40px;margin-bottom:12px;">🔗</div>
+          <div style="font-size:14px;">No hay fuentes de datos configuradas.</div>
+          <div style="font-size:13px;margin-top:4px;">Agrega APIs REST para conectar tus paginas con datos reales.</div>
+        </div>
+      ` : nothing}
+
+      ${sources.map((ds, i) => html `
+        <div class="ds-card">
+          <div class="ds-card-header">
+            <span class="ds-card-title">${ds.name || `Fuente ${i + 1}`}</span>
+            <div style="display:flex;gap:8px;align-items:center;">
+              <span class="ds-method-badge ds-method-${ds.method ?? 'GET'}">${ds.method ?? 'GET'}</span>
+              <button class="nav-item-btn nav-item-btn--danger" title="Eliminar"
+                @click="${() => { sources.splice(i, 1); this.requestUpdate(); }}">✕</button>
+            </div>
+          </div>
+
+          <div class="form-row" style="margin-bottom:12px;">
+            <div class="form-group" style="margin-bottom:0;">
+              <label class="form-label">ID</label>
+              <input class="zs-input" .value="${ds.id}" @input="${(e) => {
+            ds.id = e.target.value;
+            this.requestUpdate();
+        }}" placeholder="customers" />
+            </div>
+            <div class="form-group" style="margin-bottom:0;">
+              <label class="form-label">Nombre</label>
+              <input class="zs-input" .value="${ds.name}" @input="${(e) => {
+            ds.name = e.target.value;
+            this.requestUpdate();
+        }}" placeholder="Clientes" />
+            </div>
+          </div>
+
+          <div class="form-row" style="margin-bottom:12px;">
+            <div class="form-group" style="margin-bottom:0;grid-column:span 1;">
+              <label class="form-label">Metodo</label>
+              <select class="zs-input" .value="${ds.method ?? 'GET'}" @change="${(e) => {
+            ds.method = e.target.value;
+            this.requestUpdate();
+        }}">
+                ${HTTP_METHODS.map(m => html `<option value="${m}" ?selected="${ds.method === m}">${m}</option>`)}
+              </select>
+            </div>
+            <div class="form-group" style="margin-bottom:0;">
+              <label class="form-label">Intervalo de refresco (ms)</label>
+              <input class="zs-input" type="number" .value="${String(ds.refreshInterval ?? '')}" placeholder="0 = sin polling"
+                @input="${(e) => {
+            const v = parseInt(e.target.value);
+            ds.refreshInterval = isNaN(v) || v <= 0 ? undefined : v;
+            this.requestUpdate();
+        }}" />
+            </div>
+          </div>
+
+          <div class="form-group" style="margin-bottom:12px;">
+            <label class="form-label">URL</label>
+            <input class="zs-input" .value="${ds.url ?? ''}" @input="${(e) => {
+            ds.url = e.target.value;
+            this.requestUpdate();
+        }}" placeholder="https://api.ejemplo.com/v1/resource" />
+          </div>
+
+          <div class="form-group" style="margin-bottom:0;">
+            <label class="form-label">Headers (JSON, opcional)</label>
+            <textarea class="zs-input" rows="2" style="font-family:monospace;font-size:12px;resize:vertical;"
+              .value="${ds.headers ? JSON.stringify(ds.headers, null, 2) : ''}"
+              placeholder='{ "Authorization": "Bearer ..." }'
+              @change="${(e) => {
+            const raw = e.target.value.trim();
+            if (!raw) {
+                ds.headers = undefined;
+                this.requestUpdate();
+                return;
+            }
+            try {
+                ds.headers = JSON.parse(raw);
+            }
+            catch { /* ignore invalid JSON */ }
+            this.requestUpdate();
+        }}"
+            ></textarea>
+          </div>
+        </div>
+      `)}
+
+      <button class="add-btn" @click="${() => {
+            const id = `ds-${Date.now()}`;
+            this.ensureDataSources().push({
+                id,
+                name: '',
+                type: 'rest',
+                url: '',
+                method: 'GET',
+                autoFetch: true,
+            });
+            this.requestUpdate();
+        }}">🔗 Nueva Fuente de Datos</button>
+    `;
+    }
+    // ─── Step 5: Pages ────────────────────────────────
     renderPagesStep() {
         if (!this.config)
             return nothing;
@@ -442,28 +679,236 @@ let ZsAppWizard = class ZsAppWizard extends LitElement {
         };
         return icons[type] ?? '📄';
     }
-    // ─── Step 5: Preview ──────────────────────────────
+    // ─── Step 6: Style & Theme ────────────────────────
+    renderThemeStep() {
+        if (!this.config)
+            return nothing;
+        const theme = this.ensureTheme();
+        return html `
+      <!-- Theme mode -->
+      <div class="form-group">
+        <label class="form-label">Modo de Tema</label>
+        <div class="style-grid">
+          ${THEME_MODES.map(m => html `
+            <div class="style-option ${theme.mode === m.value ? 'style-option--selected' : ''}"
+              @click="${() => { theme.mode = m.value; this.requestUpdate(); }}">
+              <div style="font-size:28px;margin-bottom:6px;">${m.icon}</div>
+              <div style="font-size:13px;font-weight:500;">${m.label}</div>
+            </div>
+          `)}
+        </div>
+      </div>
+
+      <!-- Primary color -->
+      <div class="form-group">
+        <label class="form-label">Color Primario (--zs-primary)</label>
+        <div class="color-grid">
+          ${COLOR_PALETTE.map(color => html `
+            <div class="color-swatch ${theme.primaryColor === color ? 'color-swatch--selected' : ''}"
+              style="background: ${color}"
+              @click="${() => { theme.primaryColor = color; this.requestUpdate(); }}"
+            ></div>
+          `)}
+        </div>
+      </div>
+
+      <!-- Font family -->
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">Tipografia (--zs-font)</label>
+          <select class="zs-input" .value="${theme.fontFamily ?? 'Inter, sans-serif'}" @change="${(e) => {
+            theme.fontFamily = e.target.value;
+            this.requestUpdate();
+        }}">
+            ${FONT_OPTIONS.map(f => html `<option value="${f}" ?selected="${theme.fontFamily === f}">${f.split(',')[0]}</option>`)}
+          </select>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Border Radius (--zs-radius)</label>
+          <select class="zs-input" .value="${String(theme.borderRadius ?? 8)}" @change="${(e) => {
+            theme.borderRadius = parseInt(e.target.value);
+            this.requestUpdate();
+        }}">
+            ${RADIUS_OPTIONS.map(r => html `<option value="${r.value}" ?selected="${theme.borderRadius === r.value}">${r.label}</option>`)}
+          </select>
+        </div>
+      </div>
+
+      <!-- Accent color -->
+      <div class="form-group">
+        <label class="form-label">Color de Acento (--zs-accent, opcional)</label>
+        <div class="color-grid">
+          ${COLOR_PALETTE.map(color => html `
+            <div class="color-swatch ${theme.accentColor === color ? 'color-swatch--selected' : ''}"
+              style="background: ${color}"
+              @click="${() => { theme.accentColor = color; this.requestUpdate(); }}"
+            ></div>
+          `)}
+        </div>
+      </div>
+
+      <!-- Font size & spacing -->
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">Tamano de Fuente Base (px)</label>
+          <input class="zs-input" type="number" min="10" max="22" .value="${String(theme.fontSize ?? 14)}" @input="${(e) => {
+            theme.fontSize = parseInt(e.target.value) || 14;
+            this.requestUpdate();
+        }}" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">Espaciado Base (px)</label>
+          <input class="zs-input" type="number" min="2" max="16" .value="${String(theme.spacing ?? 8)}" @input="${(e) => {
+            theme.spacing = parseInt(e.target.value) || 8;
+            this.requestUpdate();
+        }}" />
+        </div>
+      </div>
+
+      <!-- Mini preview -->
+      <div class="theme-preview-card" style="
+        background: ${theme.mode === 'dark' ? '#1e1e2d' : '#ffffff'};
+        color: ${theme.mode === 'dark' ? '#e0e0e0' : '#333333'};
+        font-family: ${theme.fontFamily ?? 'Inter, sans-serif'};
+        font-size: ${theme.fontSize ?? 14}px;
+        border-radius: ${theme.borderRadius ?? 8}px;
+      ">
+        <div class="theme-preview-header" style="color: ${theme.primaryColor ?? '#3498db'};">
+          Vista previa del tema
+        </div>
+        <div class="theme-preview-text">
+          Asi se vera tu aplicacion con estos ajustes de estilo.
+        </div>
+        <span class="theme-preview-btn" style="
+          background: ${theme.primaryColor ?? '#3498db'};
+          border-radius: ${theme.borderRadius ?? 8}px;
+        ">Boton Primario</span>
+        <input class="theme-preview-input" value="Campo de texto"
+          style="
+            border-color: ${theme.mode === 'dark' ? '#444' : '#ccc'};
+            border-radius: ${theme.borderRadius ?? 8}px;
+            background: ${theme.mode === 'dark' ? '#2a2a3d' : '#f9f9f9'};
+            color: ${theme.mode === 'dark' ? '#e0e0e0' : '#333'};
+            font-family: ${theme.fontFamily ?? 'Inter, sans-serif'};
+          "
+          readonly
+        />
+      </div>
+    `;
+    }
+    // ─── Step 7: Preview ──────────────────────────────
     renderPreviewStep() {
         if (!this.config)
             return nothing;
+        const navPageCount = this.config.navigation.filter(n => n.kind !== 'divider' && n.kind !== 'header').length;
+        const dsCount = this.config.dataSources?.length ?? 0;
         return html `
-      <div style="display:flex;gap:16px;margin-bottom:16px;">
-        <div style="flex:1;">
+      <div style="display:flex;gap:16px;margin-bottom:16px;align-items:center;flex-wrap:wrap;">
+        <div style="flex:1;min-width:200px;">
           <div style="font-size:13px;color:var(--zs-text-secondary);margin-bottom:4px;">Resumen:</div>
-          <div style="font-size:14px;"><strong>${this.config.branding.title}</strong> — ${this.config.pages.length} paginas, ${this.config.navigation.filter(n => n.kind !== 'divider' && n.kind !== 'header').length} items en menu</div>
+          <div style="font-size:14px;">
+            <strong>${this.config.branding.title}</strong> —
+            ${this.config.pages.length} paginas,
+            ${navPageCount} items en menu${dsCount > 0 ? `, ${dsCount} fuentes de datos` : ''}
+          </div>
         </div>
+      </div>
+
+      <!-- Export buttons -->
+      <div class="export-row" style="margin-bottom:16px;">
+        <button class="btn btn--secondary" @click="${this.exportJson}">📋 Exportar JSON</button>
+        <button class="btn btn--secondary" @click="${this.exportReactCode}">⚛️ Exportar Codigo React</button>
+        <button class="btn btn--secondary" @click="${this.exportNextCode}">▲ Exportar Codigo Next.js</button>
         <button class="btn btn--secondary" @click="${() => {
             const json = JSON.stringify(this.config, null, 2);
             navigator.clipboard.writeText(json).then(() => {
                 alert('JSON copiado al portapapeles');
             });
-        }}">📋 Copiar JSON</button>
+        }}">📎 Copiar JSON</button>
       </div>
+
       <div class="preview-container">
         <zentto-studio-app .config="${this.config}"></zentto-studio-app>
       </div>
     `;
     }
+    // ─── Export Handlers ──────────────────────────────
+    exportJson() {
+        if (!this.config)
+            return;
+        const json = JSON.stringify(this.config, null, 2);
+        this.openCodeModal('Exportar JSON — AppConfig', json);
+    }
+    exportReactCode() {
+        if (!this.config)
+            return;
+        const code = generateAppPage(this.config, {
+            framework: 'react',
+            useClientDirective: false,
+        });
+        this.openCodeModal('Exportar Codigo React', code);
+    }
+    exportNextCode() {
+        if (!this.config)
+            return;
+        const code = generateAppPage(this.config, {
+            framework: 'nextjs',
+            useClientDirective: true,
+        });
+        this.openCodeModal('Exportar Codigo Next.js', code);
+    }
+    openCodeModal(title, content) {
+        this.codeModalTitle = title;
+        this.codeModalContent = content;
+        this.codeModalOpen = true;
+    }
+    closeCodeModal() {
+        this.codeModalOpen = false;
+        this.codeModalTitle = '';
+        this.codeModalContent = '';
+    }
+    copyCodeToClipboard() {
+        navigator.clipboard.writeText(this.codeModalContent).then(() => {
+            // Briefly change button text via a subtle approach
+            alert('Codigo copiado al portapapeles');
+        });
+    }
+    downloadCode() {
+        const isJson = this.codeModalTitle.includes('JSON');
+        const ext = isJson ? 'json' : 'tsx';
+        const mime = isJson ? 'application/json' : 'text/typescript';
+        const filename = isJson ? 'app-config.json' : 'StudioApp.tsx';
+        const blob = new Blob([this.codeModalContent], { type: mime });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename;
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+    // ─── Code Modal ───────────────────────────────────
+    renderCodeModal() {
+        return html `
+      <div class="code-modal-overlay" @click="${(e) => {
+            if (e.target === e.currentTarget)
+                this.closeCodeModal();
+        }}">
+        <div class="code-modal">
+          <div class="code-modal-header">
+            <h3>${this.codeModalTitle}</h3>
+            <button class="nav-item-btn" @click="${this.closeCodeModal}" style="font-size:18px;">✕</button>
+          </div>
+          <div class="code-modal-body">
+            <pre>${this.codeModalContent}</pre>
+          </div>
+          <div class="code-modal-footer">
+            <button class="btn btn--secondary" @click="${this.downloadCode}">💾 Descargar</button>
+            <button class="btn btn--primary" @click="${this.copyCodeToClipboard}">📋 Copiar</button>
+          </div>
+        </div>
+      </div>
+    `;
+    }
 };
 __decorate([
     property({ type: Object })
@@ -486,6 +931,15 @@ __decorate([
 __decorate([
     state()
 ], ZsAppWizard.prototype, "iconPickerTarget", void 0);
+__decorate([
+    state()
+], ZsAppWizard.prototype, "codeModalOpen", void 0);
+__decorate([
+    state()
+], ZsAppWizard.prototype, "codeModalTitle", void 0);
+__decorate([
+    state()
+], ZsAppWizard.prototype, "codeModalContent", void 0);
 ZsAppWizard = __decorate([
     customElement('zs-app-wizard')
 ], ZsAppWizard);