@zentto/studio 0.1.0

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

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+import type { AppConfig } from '@zentto/studio-core';
+import '../zentto-studio-app.js';
+export declare class ZsAppWizard extends LitElement {
+    static styles: import("lit").CSSResult[];
+    initialConfig: AppConfig | null;
+    private currentStep;
+    private selectedTemplate;
+    private config;
+    private editingNavIndex;
+    private showIconPicker;
+    private iconPickerTarget;
+    connectedCallback(): void;
+    private canNext;
+    private next;
+    private prev;
+    private finish;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderTemplateStep;
+    private renderBrandingStep;
+    private renderNavStep;
+    private addNavItem;
+    private moveNav;
+    private renderPagesStep;
+    private getContentIcon;
+    private renderPreviewStep;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zs-app-wizard': ZsAppWizard;
+    }
+}
+//# sourceMappingURL=zs-app-wizard.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,493 @@
+// @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
+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);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 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: 'pages', title: 'Paginas', icon: '📄', description: 'Agrega paginas y contenido' },
+    { id: 'preview', title: 'Vista Previa', icon: '👁️', description: 'Revisa y finaliza' },
+];
+const SIDEBAR_STYLES = [
+    { value: 'dark', label: 'Oscuro', preview: '#1e1e2d' },
+    { value: 'light', label: 'Claro', preview: '#ffffff' },
+    { value: 'branded', label: 'Marca', preview: '#e67e22' },
+];
+const ICON_PALETTE = [
+    '📊', '👥', '📦', '💰', '🛒', '📄', '📋', '➕', '⚙️', '📈',
+    '🏢', '🏦', '🌐', '🚚', '✅', '🤝', '📅', '🔍', '📝', '🏷️',
+    '⭐', '🎯', '💼', '📱', '🖥️', '🔔', '🔒', '📂', '🗂️', '💡',
+    '🏠', '🍽️', '🏖️', '🕐', '👷', '🛡️', '🎓', '🏭', '✈️', '🔧',
+];
+const COLOR_PALETTE = [
+    '#e67e22', '#3498db', '#27ae60', '#e74c3c', '#9b59b6',
+    '#f39c12', '#1abc9c', '#34495e', '#e91e63', '#00bcd4',
+    '#ff6b6b', '#6bcb77', '#4ecdc4', '#45b7d1', '#96ceb4',
+    '#ffd93d', '#ff69b4', '#a29bfe', '#fd79a8', '#2d3436',
+];
+let ZsAppWizard = class ZsAppWizard extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.initialConfig = null;
+        this.currentStep = 0;
+        this.selectedTemplate = null;
+        this.config = null;
+        this.editingNavIndex = -1;
+        this.showIconPicker = false;
+        this.iconPickerTarget = 'nav';
+    }
+    static { this.styles = [studioTokens, fieldBaseStyles, css `
+    :host { display: block; font-family: var(--zs-font-family); }
+
+    .wizard {
+      max-width: 900px; margin: 0 auto;
+      background: var(--zs-bg); border-radius: 12px;
+      border: 1px solid var(--zs-border);
+      overflow: hidden;
+    }
+
+    /* Steps bar */
+    .wizard-steps {
+      display: flex; background: var(--zs-bg-secondary);
+      border-bottom: 1px solid var(--zs-border); padding: 0;
+    }
+    .wizard-step {
+      flex: 1; display: flex; align-items: center; gap: 8px;
+      padding: 16px 20px; cursor: pointer;
+      color: var(--zs-text-muted); font-size: 13px;
+      border-bottom: 3px solid transparent;
+      transition: all 150ms;
+    }
+    .wizard-step:hover { color: var(--zs-text-secondary); }
+    .wizard-step--active {
+      color: var(--zs-primary); border-bottom-color: var(--zs-primary);
+      font-weight: 500;
+    }
+    .wizard-step--done { color: var(--zs-success); }
+    .wizard-step-icon { font-size: 18px; }
+    .wizard-step-title { white-space: nowrap; }
+
+    /* Body */
+    .wizard-body { padding: 32px; min-height: 400px; }
+    .wizard-title { font-size: 22px; font-weight: 600; margin: 0 0 4px; color: var(--zs-text); }
+    .wizard-desc { font-size: 14px; color: var(--zs-text-secondary); margin: 0 0 24px; }
+
+    /* Footer */
+    .wizard-footer {
+      display: flex; justify-content: space-between;
+      padding: 16px 32px; border-top: 1px solid var(--zs-border);
+      background: var(--zs-bg-secondary);
+    }
+
+    /* Template cards */
+    .template-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
+    .template-card {
+      padding: 24px; border: 2px solid var(--zs-border);
+      border-radius: 12px; cursor: pointer;
+      transition: all 200ms; text-align: center;
+    }
+    .template-card:hover { border-color: var(--zs-primary); transform: translateY(-2px); box-shadow: 0 4px 12px var(--zs-shadow); }
+    .template-card--selected { border-color: var(--zs-primary); background: var(--zs-primary-light); }
+    .template-icon { font-size: 40px; margin-bottom: 12px; }
+    .template-title { font-size: 16px; font-weight: 600; color: var(--zs-text); }
+    .template-desc { font-size: 13px; color: var(--zs-text-secondary); margin-top: 4px; }
+
+    /* Form groups */
+    .form-group { margin-bottom: 20px; }
+    .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; }
+
+    /* Color picker grid */
+    .color-grid { display: flex; flex-wrap: wrap; gap: 8px; }
+    .color-swatch {
+      width: 36px; height: 36px; border-radius: 8px;
+      cursor: pointer; border: 3px solid transparent;
+      transition: all 150ms;
+    }
+    .color-swatch:hover { transform: scale(1.15); }
+    .color-swatch--selected { border-color: var(--zs-text); box-shadow: 0 0 0 2px white, 0 0 0 4px var(--zs-text); }
+
+    /* Sidebar style picker */
+    .style-grid { display: flex; gap: 12px; }
+    .style-option {
+      flex: 1; padding: 16px; text-align: center;
+      border: 2px solid var(--zs-border); border-radius: 8px;
+      cursor: pointer; transition: all 150ms;
+    }
+    .style-option:hover { border-color: var(--zs-primary); }
+    .style-option--selected { border-color: var(--zs-primary); background: var(--zs-primary-light); }
+    .style-preview {
+      width: 60px; height: 40px; border-radius: 4px;
+      margin: 0 auto 8px; border: 1px solid var(--zs-border);
+    }
+
+    /* Nav editor */
+    .nav-list { border: 1px solid var(--zs-border); border-radius: 8px; overflow: hidden; }
+    .nav-item-row {
+      display: flex; align-items: center; gap: 8px;
+      padding: 10px 12px; border-bottom: 1px solid var(--zs-border);
+      font-size: 14px;
+    }
+    .nav-item-row:last-child { border-bottom: none; }
+    .nav-item-icon { font-size: 18px; cursor: pointer; }
+    .nav-item-title { flex: 1; }
+    .nav-item-actions { display: flex; gap: 4px; }
+    .nav-item-btn {
+      border: none; background: none; cursor: pointer;
+      font-size: 14px; padding: 2px 6px; border-radius: 4px;
+      color: var(--zs-text-muted); transition: all 100ms;
+    }
+    .nav-item-btn:hover { background: var(--zs-bg-hover); color: var(--zs-text); }
+    .nav-item-btn--danger:hover { color: var(--zs-danger); }
+    .add-btn {
+      display: flex; align-items: center; gap: 6px;
+      padding: 8px 16px; margin-top: 12px;
+      border: 1px dashed var(--zs-border); border-radius: 8px;
+      background: none; cursor: pointer;
+      font-family: var(--zs-font-family); font-size: 13px;
+      color: var(--zs-text-secondary); transition: all 150ms;
+    }
+    .add-btn:hover { border-color: var(--zs-primary); color: var(--zs-primary); }
+
+    /* Icon picker */
+    .icon-grid { display: flex; flex-wrap: wrap; gap: 4px; }
+    .icon-btn {
+      width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
+      border: 1px solid transparent; border-radius: 6px;
+      cursor: pointer; font-size: 18px; background: none;
+      transition: all 100ms;
+    }
+    .icon-btn:hover { background: var(--zs-bg-hover); border-color: var(--zs-border); }
+    .icon-btn--selected { background: var(--zs-primary-light); border-color: var(--zs-primary); }
+
+    /* Preview */
+    .preview-container {
+      border: 1px solid var(--zs-border); border-radius: 8px;
+      height: 500px; overflow: hidden;
+    }
+
+    /* Buttons */
+    .btn {
+      padding: 10px 24px; border-radius: var(--zs-radius);
+      font-family: var(--zs-font-family); font-size: 14px;
+      font-weight: 500; cursor: pointer; border: 1px solid transparent;
+      transition: all 150ms;
+    }
+    .btn--primary { background: var(--zs-primary); color: white; }
+    .btn--primary:hover { background: var(--zs-primary-hover); }
+    .btn--secondary { background: var(--zs-bg); color: var(--zs-text); border-color: var(--zs-border); }
+    .btn--secondary:hover { background: var(--zs-bg-hover); }
+    .btn--success { background: var(--zs-success); color: white; }
+    .btn--success:hover { opacity: 0.9; }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+  `]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.initialConfig) {
+            this.config = structuredClone(this.initialConfig);
+            this.currentStep = 1; // skip template selection
+        }
+    }
+    // ─── Navigation ───────────────────────────────────
+    canNext() {
+        if (this.currentStep === 0)
+            return this.selectedTemplate != null || this.config != null;
+        return this.config != null;
+    }
+    next() {
+        if (this.currentStep === 0 && !this.config && this.selectedTemplate) {
+            this.config = getAppTemplate(this.selectedTemplate);
+        }
+        if (this.currentStep < STEPS.length - 1)
+            this.currentStep++;
+    }
+    prev() {
+        if (this.currentStep > 0)
+            this.currentStep--;
+    }
+    finish() {
+        if (!this.config)
+            return;
+        this.dispatchEvent(new CustomEvent('wizard-complete', {
+            detail: { config: structuredClone(this.config) },
+            bubbles: true, composed: true,
+        }));
+    }
+    // ─── Render ───────────────────────────────────────
+    render() {
+        return html `
+      <div class="wizard">
+        <div class="wizard-steps">
+          ${STEPS.map((step, i) => html `
+            <div class="wizard-step ${i === this.currentStep ? 'wizard-step--active' : i < this.currentStep ? 'wizard-step--done' : ''}"
+              @click="${() => { if (i <= this.currentStep || this.config)
+            this.currentStep = i; }}">
+              <span class="wizard-step-icon">${i < this.currentStep ? '✓' : step.icon}</span>
+              <span class="wizard-step-title">${step.title}</span>
+            </div>
+          `)}
+        </div>
+
+        <div class="wizard-body">
+          <h2 class="wizard-title">${STEPS[this.currentStep].title}</h2>
+          <p class="wizard-desc">${STEPS[this.currentStep].description}</p>
+
+          ${this.currentStep === 0 ? this.renderTemplateStep() :
+            this.currentStep === 1 ? this.renderBrandingStep() :
+                this.currentStep === 2 ? this.renderNavStep() :
+                    this.currentStep === 3 ? this.renderPagesStep() :
+                        this.renderPreviewStep()}
+        </div>
+
+        <div class="wizard-footer">
+          <button class="btn btn--secondary" ?disabled="${this.currentStep === 0}" @click="${this.prev}">Anterior</button>
+          ${this.currentStep < STEPS.length - 1
+            ? html `<button class="btn btn--primary" ?disabled="${!this.canNext()}" @click="${this.next}">Siguiente</button>`
+            : html `<button class="btn btn--success" @click="${this.finish}">Crear Aplicacion</button>`}
+        </div>
+      </div>
+    `;
+    }
+    // ─── Step 1: Template Selection ──────────────────
+    renderTemplateStep() {
+        const templates = listAppTemplates();
+        return html `
+      <div class="template-grid">
+        ${templates.map(t => html `
+          <div class="template-card ${this.selectedTemplate === t.id ? 'template-card--selected' : ''}"
+            @click="${() => { this.selectedTemplate = t.id; }}">
+            <div class="template-icon">${t.icon}</div>
+            <div class="template-title">${t.title}</div>
+            <div class="template-desc">${t.description}</div>
+          </div>
+        `)}
+      </div>
+    `;
+    }
+    // ─── Step 2: Branding ─────────────────────────────
+    renderBrandingStep() {
+        if (!this.config)
+            return nothing;
+        const b = this.config.branding;
+        return html `
+      <div class="form-row">
+        <div class="form-group">
+          <label class="form-label">Nombre de la App</label>
+          <input class="zs-input" .value="${b.title ?? ''}" @input="${(e) => { this.config.branding.title = e.target.value; this.requestUpdate(); }}" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">Subtitulo</label>
+          <input class="zs-input" .value="${b.subtitle ?? ''}" @input="${(e) => { this.config.branding.subtitle = e.target.value; this.requestUpdate(); }}" />
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">Color Principal</label>
+        <div class="color-grid">
+          ${COLOR_PALETTE.map(color => html `
+            <div class="color-swatch ${b.primaryColor === color ? 'color-swatch--selected' : ''}"
+              style="background: ${color}"
+              @click="${() => { this.config.branding.primaryColor = color; this.requestUpdate(); }}"
+            ></div>
+          `)}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">Estilo del Sidebar</label>
+        <div class="style-grid">
+          ${SIDEBAR_STYLES.map(s => html `
+            <div class="style-option ${b.sidebarStyle === s.value ? 'style-option--selected' : ''}"
+              @click="${() => { this.config.branding.sidebarStyle = s.value; this.requestUpdate(); }}">
+              <div class="style-preview" style="background: ${s.preview}"></div>
+              <div style="font-size:13px;font-weight:500;">${s.label}</div>
+            </div>
+          `)}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="form-label">URL del Logo (opcional)</label>
+        <input class="zs-input" .value="${b.logo ?? ''}" placeholder="https://..." @input="${(e) => { this.config.branding.logo = e.target.value; this.requestUpdate(); }}" />
+      </div>
+    `;
+    }
+    // ─── Step 3: Navigation Editor ────────────────────
+    renderNavStep() {
+        if (!this.config)
+            return nothing;
+        return html `
+      <div class="nav-list">
+        ${this.config.navigation.map((item, i) => html `
+          <div class="nav-item-row">
+            <span class="nav-item-icon" @click="${() => { this.editingNavIndex = i; this.showIconPicker = !this.showIconPicker; }}">${item.icon ?? (item.kind === 'header' ? '📌' : item.kind === 'divider' ? '—' : '📄')}</span>
+            ${item.kind === 'divider'
+            ? html `<span class="nav-item-title" style="color:var(--zs-text-muted);font-style:italic;">Separador</span>`
+            : html `<input class="zs-input" style="height:32px;font-size:13px;" .value="${item.title ?? ''}" @input="${(e) => { this.config.navigation[i].title = e.target.value; this.requestUpdate(); }}" />`}
+            <div class="nav-item-actions">
+              <button class="nav-item-btn" title="Subir" @click="${() => this.moveNav(i, -1)}">↑</button>
+              <button class="nav-item-btn" title="Bajar" @click="${() => this.moveNav(i, 1)}">↓</button>
+              <button class="nav-item-btn nav-item-btn--danger" title="Eliminar" @click="${() => { this.config.navigation.splice(i, 1); this.requestUpdate(); }}">✕</button>
+            </div>
+          </div>
+        `)}
+      </div>
+
+      ${this.showIconPicker ? html `
+        <div style="margin-top:12px;padding:12px;border:1px solid var(--zs-border);border-radius:8px;">
+          <div style="font-size:12px;color:var(--zs-text-secondary);margin-bottom:8px;">Selecciona un icono:</div>
+          <div class="icon-grid">
+            ${ICON_PALETTE.map(icon => html `
+              <button class="icon-btn" @click="${() => {
+            if (this.editingNavIndex >= 0) {
+                this.config.navigation[this.editingNavIndex].icon = icon;
+                this.showIconPicker = false;
+                this.requestUpdate();
+            }
+        }}">${icon}</button>
+            `)}
+          </div>
+        </div>
+      ` : ''}
+
+      <div style="display:flex;gap:8px;">
+        <button class="add-btn" @click="${() => this.addNavItem('page')}">➕ Pagina</button>
+        <button class="add-btn" @click="${() => this.addNavItem('header')}">📌 Seccion</button>
+        <button class="add-btn" @click="${() => this.addNavItem('divider')}">— Separador</button>
+      </div>
+    `;
+    }
+    addNavItem(kind) {
+        if (!this.config)
+            return;
+        if (kind === 'divider') {
+            this.config.navigation.push({ kind: 'divider' });
+        }
+        else if (kind === 'header') {
+            this.config.navigation.push({ kind: 'header', title: 'Nueva Seccion' });
+        }
+        else {
+            const id = `page-${Date.now()}`;
+            this.config.navigation.push({ segment: id, title: 'Nueva Pagina', icon: '📄' });
+            // Auto-create page
+            this.config.pages.push({ id, segment: id, title: 'Nueva Pagina', content: 'empty' });
+        }
+        this.requestUpdate();
+    }
+    moveNav(index, dir) {
+        if (!this.config)
+            return;
+        const newIndex = index + dir;
+        if (newIndex < 0 || newIndex >= this.config.navigation.length)
+            return;
+        const items = this.config.navigation;
+        [items[index], items[newIndex]] = [items[newIndex], items[index]];
+        this.requestUpdate();
+    }
+    // ─── Step 4: Pages ────────────────────────────────
+    renderPagesStep() {
+        if (!this.config)
+            return nothing;
+        return html `
+      <div class="nav-list">
+        ${this.config.pages.map((page, i) => html `
+          <div class="nav-item-row">
+            <span class="nav-item-icon">${this.getContentIcon(page.content)}</span>
+            <div style="flex:1;">
+              <input class="zs-input" style="height:30px;font-size:13px;margin-bottom:4px;" .value="${page.title}" @input="${(e) => { this.config.pages[i].title = e.target.value; this.requestUpdate(); }}" />
+              <div style="display:flex;gap:8px;align-items:center;">
+                <span style="font-size:11px;color:var(--zs-text-muted);">/${page.segment}</span>
+                <select style="font-size:11px;padding:2px 6px;border:1px solid var(--zs-border);border-radius:4px;" .value="${page.content}" @change="${(e) => { this.config.pages[i].content = e.target.value; this.requestUpdate(); }}">
+                  <option value="empty">Vacia</option>
+                  <option value="cards">Cards/Dashboard</option>
+                  <option value="datagrid">Grid de Datos</option>
+                  <option value="schema">Formulario</option>
+                  <option value="chart">Graficos</option>
+                  <option value="html">HTML</option>
+                  <option value="iframe">iFrame</option>
+                  <option value="tabs">Tabs</option>
+                  <option value="custom">Custom</option>
+                </select>
+              </div>
+            </div>
+            <button class="nav-item-btn nav-item-btn--danger" @click="${() => { this.config.pages.splice(i, 1); this.requestUpdate(); }}">✕</button>
+          </div>
+        `)}
+      </div>
+      <button class="add-btn" @click="${() => {
+            const id = `page-${Date.now()}`;
+            this.config.pages.push({ id, segment: id, title: 'Nueva Pagina', content: 'empty' });
+            this.requestUpdate();
+        }}">➕ Nueva Pagina</button>
+    `;
+    }
+    getContentIcon(type) {
+        const icons = {
+            cards: '🏠', datagrid: '📊', schema: '📝', chart: '📈',
+            html: '🌐', iframe: '🖼️', tabs: '📑', empty: '📄',
+            custom: '🧩', split: '📐', report: '📋',
+        };
+        return icons[type] ?? '📄';
+    }
+    // ─── Step 5: Preview ──────────────────────────────
+    renderPreviewStep() {
+        if (!this.config)
+            return nothing;
+        return html `
+      <div style="display:flex;gap:16px;margin-bottom:16px;">
+        <div style="flex:1;">
+          <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>
+        <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>
+      </div>
+      <div class="preview-container">
+        <zentto-studio-app .config="${this.config}"></zentto-studio-app>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object })
+], ZsAppWizard.prototype, "initialConfig", void 0);
+__decorate([
+    state()
+], ZsAppWizard.prototype, "currentStep", void 0);
+__decorate([
+    state()
+], ZsAppWizard.prototype, "selectedTemplate", void 0);
+__decorate([
+    state()
+], ZsAppWizard.prototype, "config", void 0);
+__decorate([
+    state()
+], ZsAppWizard.prototype, "editingNavIndex", void 0);
+__decorate([
+    state()
+], ZsAppWizard.prototype, "showIconPicker", void 0);
+__decorate([
+    state()
+], ZsAppWizard.prototype, "iconPickerTarget", void 0);
+ZsAppWizard = __decorate([
+    customElement('zs-app-wizard')
+], ZsAppWizard);
+export { ZsAppWizard };
+//# sourceMappingURL=zs-app-wizard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zs-app-wizard.js","sourceRoot":"","sources":["../../src/designer/zs-app-wizard.ts"],"names":[],"mappings":"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"}

package/dist/designer/zs-page-designer.d.ts

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import type { StudioSchema } from '@zentto/studio-core';
+import '../zentto-studio-renderer.js';
+export declare class ZsPageDesigner extends LitElement {
+    static styles: import("lit").CSSResult[];
+    schema: StudioSchema | null;
+    data: Record<string, unknown>;
+    private selectedFieldId;
+    private viewMode;
+    private dragType;
+    private renderKey;
+    private get selectedField();
+    private get selectedSectionIndex();
+    render(): import("lit-html").TemplateResult<1>;
+    private renderToolbox;
+    private renderCanvas;
+    private renderDesignView;
+    private renderProperties;
+    private addField;
+    private addFieldToSection;
+    private removeField;
+    private moveField;
+    private emitChange;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zs-page-designer': ZsPageDesigner;
+    }
+}
+//# sourceMappingURL=zs-page-designer.d.ts.map

package/dist/designer/zs-page-designer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zs-page-designer.d.ts","sourceRoot":"","sources":["../../src/designer/zs-page-designer.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAAE,YAAY,EAAmC,MAAM,qBAAqB,CAAC;AAIzF,OAAO,8BAA8B,CAAC;AAEtC,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BAuJV;IAEyB,MAAM,EAAE,YAAY,GAAG,IAAI,CAAQ;IACnC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAEtD,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,QAAQ,CAA2C;IAC3D,OAAO,CAAC,QAAQ,CAA0B;IAC1C,OAAO,CAAC,SAAS,CAAK;IAE/B,OAAO,KAAK,aAAa,GAOxB;IAED,OAAO,KAAK,oBAAoB,GAG/B;IAID,MAAM;IAYN,OAAO,CAAC,aAAa;IAmCrB,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,gBAAgB;IA2CxB,OAAO,CAAC,gBAAgB;IA8FxB,OAAO,CAAC,QAAQ;IAWhB,OAAO,CAAC,iBAAiB;IAgBzB,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,UAAU;CAQnB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}