@zentto/studio 0.5.2 → 0.6.1

package/dist/zentto-studio-renderer.js

@@ -28,6 +28,8 @@ import './fields/zs-field-chart.js';
 import './fields/zs-field-media.js';
 import './fields/zs-field-treeview.js';
 import './fields/zs-field-chips.js';
+import './fields/zs-field-datagrid.js';
+import './fields/zs-field-report.js';
 let ZenttoStudioRenderer = class ZenttoStudioRenderer extends LitElement {
     constructor() {
         super(...arguments);
@@ -41,105 +43,105 @@ let ZenttoStudioRenderer = class ZenttoStudioRenderer extends LitElement {
         this.activeSection = 0;
         this.renderCounter = 0; // force re-renders
     }
-    static { this.styles = [studioTokens, fieldBaseStyles, css `
-    :host {
-      display: block;
-      font-family: var(--zs-font-family);
-      color: var(--zs-text);
-    }
-    .zs-renderer { background: var(--zs-bg); border-radius: var(--zs-radius-lg); }
-    .zs-header {
-      padding: var(--zs-spacing-md);
-      border-bottom: 1px solid var(--zs-border);
-    }
-    .zs-title {
-      margin: 0; font-size: var(--zs-font-size-xl); font-weight: 600;
-      color: var(--zs-text);
-    }
-    .zs-description {
-      margin: 4px 0 0; font-size: var(--zs-font-size); color: var(--zs-text-secondary);
-    }
-    .zs-body { padding: var(--zs-spacing-md); }
-    .zs-section {
-      margin-bottom: var(--zs-spacing-lg);
-    }
-    .zs-section-title {
-      font-size: var(--zs-font-size-lg); font-weight: 600;
-      margin: 0 0 var(--zs-spacing-sm) 0; color: var(--zs-text);
-      padding-bottom: var(--zs-spacing-xs);
-      border-bottom: 2px solid var(--zs-primary-light);
-    }
-    .zs-section-description {
-      font-size: var(--zs-font-size-sm); color: var(--zs-text-secondary);
-      margin: 0 0 var(--zs-spacing-sm) 0;
-    }
-    .zs-section-grid {
-      display: grid;
-      gap: var(--zs-spacing-md);
-    }
-    .zs-actions {
-      display: flex; gap: var(--zs-spacing-sm);
-      padding: var(--zs-spacing-md);
-      border-top: 1px solid var(--zs-border);
-      justify-content: flex-end;
-    }
-    .zs-btn {
-      padding: 8px 20px; border-radius: var(--zs-radius);
-      font-family: var(--zs-font-family); font-size: var(--zs-font-size);
-      font-weight: 500; cursor: pointer; border: 1px solid transparent;
-      transition: all var(--zs-transition);
-    }
-    .zs-btn--primary {
-      background: var(--zs-primary); color: white; border-color: var(--zs-primary);
-    }
-    .zs-btn--primary:hover { background: var(--zs-primary-hover); }
-    .zs-btn--secondary {
-      background: var(--zs-bg); color: var(--zs-text); border-color: var(--zs-border);
-    }
-    .zs-btn--secondary:hover { background: var(--zs-bg-hover); }
-    .zs-btn--danger {
-      background: var(--zs-danger); color: white; border-color: var(--zs-danger);
-    }
-    .zs-btn--ghost {
-      background: transparent; color: var(--zs-text-secondary); border-color: transparent;
-    }
-    .zs-btn--ghost:hover { color: var(--zs-text); background: var(--zs-bg-hover); }
-    .zs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-    .zs-field-hidden { display: none; }
-
-    /* Tabs */
-    .zs-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--zs-border); margin-bottom: var(--zs-spacing-md); }
-    .zs-tab {
-      padding: 8px 16px; cursor: pointer; border: none; background: none;
-      font-family: var(--zs-font-family); font-size: var(--zs-font-size);
-      color: var(--zs-text-secondary); border-bottom: 2px solid transparent;
-      margin-bottom: -2px; transition: all var(--zs-transition);
-    }
-    .zs-tab:hover { color: var(--zs-text); }
-    .zs-tab--active { color: var(--zs-primary); border-bottom-color: var(--zs-primary); font-weight: 500; }
-
-    /* Wizard */
-    .zs-wizard-steps {
-      display: flex; align-items: center; gap: 8px;
-      margin-bottom: var(--zs-spacing-lg); padding: 0 var(--zs-spacing-md);
-    }
-    .zs-wizard-step {
-      display: flex; align-items: center; gap: 8px;
-    }
-    .zs-wizard-circle {
-      width: 32px; height: 32px; border-radius: 50%;
-      display: flex; align-items: center; justify-content: center;
-      font-size: var(--zs-font-size-sm); font-weight: 600;
-      background: var(--zs-bg-secondary); color: var(--zs-text-secondary);
-      border: 2px solid var(--zs-border);
-    }
-    .zs-wizard-circle--active { background: var(--zs-primary); color: white; border-color: var(--zs-primary); }
-    .zs-wizard-circle--done { background: var(--zs-success); color: white; border-color: var(--zs-success); }
-    .zs-wizard-label { font-size: var(--zs-font-size-sm); color: var(--zs-text-secondary); }
-    .zs-wizard-label--active { color: var(--zs-text); font-weight: 500; }
-    .zs-wizard-line { flex: 1; height: 2px; background: var(--zs-border); }
-    .zs-wizard-line--done { background: var(--zs-success); }
-    .zs-wizard-nav { display: flex; justify-content: space-between; padding: var(--zs-spacing-md); }
+    static { this.styles = [studioTokens, fieldBaseStyles, css `
+    :host {
+      display: block;
+      font-family: var(--zs-font-family);
+      color: var(--zs-text);
+    }
+    .zs-renderer { background: var(--zs-bg); border-radius: var(--zs-radius-lg); }
+    .zs-header {
+      padding: var(--zs-spacing-md);
+      border-bottom: 1px solid var(--zs-border);
+    }
+    .zs-title {
+      margin: 0; font-size: var(--zs-font-size-xl); font-weight: 600;
+      color: var(--zs-text);
+    }
+    .zs-description {
+      margin: 4px 0 0; font-size: var(--zs-font-size); color: var(--zs-text-secondary);
+    }
+    .zs-body { padding: var(--zs-spacing-md); }
+    .zs-section {
+      margin-bottom: var(--zs-spacing-lg);
+    }
+    .zs-section-title {
+      font-size: var(--zs-font-size-lg); font-weight: 600;
+      margin: 0 0 var(--zs-spacing-sm) 0; color: var(--zs-text);
+      padding-bottom: var(--zs-spacing-xs);
+      border-bottom: 2px solid var(--zs-primary-light);
+    }
+    .zs-section-description {
+      font-size: var(--zs-font-size-sm); color: var(--zs-text-secondary);
+      margin: 0 0 var(--zs-spacing-sm) 0;
+    }
+    .zs-section-grid {
+      display: grid;
+      gap: var(--zs-spacing-md);
+    }
+    .zs-actions {
+      display: flex; gap: var(--zs-spacing-sm);
+      padding: var(--zs-spacing-md);
+      border-top: 1px solid var(--zs-border);
+      justify-content: flex-end;
+    }
+    .zs-btn {
+      padding: 8px 20px; border-radius: var(--zs-radius);
+      font-family: var(--zs-font-family); font-size: var(--zs-font-size);
+      font-weight: 500; cursor: pointer; border: 1px solid transparent;
+      transition: all var(--zs-transition);
+    }
+    .zs-btn--primary {
+      background: var(--zs-primary); color: white; border-color: var(--zs-primary);
+    }
+    .zs-btn--primary:hover { background: var(--zs-primary-hover); }
+    .zs-btn--secondary {
+      background: var(--zs-bg); color: var(--zs-text); border-color: var(--zs-border);
+    }
+    .zs-btn--secondary:hover { background: var(--zs-bg-hover); }
+    .zs-btn--danger {
+      background: var(--zs-danger); color: white; border-color: var(--zs-danger);
+    }
+    .zs-btn--ghost {
+      background: transparent; color: var(--zs-text-secondary); border-color: transparent;
+    }
+    .zs-btn--ghost:hover { color: var(--zs-text); background: var(--zs-bg-hover); }
+    .zs-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .zs-field-hidden { display: none; }
+
+    /* Tabs */
+    .zs-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--zs-border); margin-bottom: var(--zs-spacing-md); }
+    .zs-tab {
+      padding: 8px 16px; cursor: pointer; border: none; background: none;
+      font-family: var(--zs-font-family); font-size: var(--zs-font-size);
+      color: var(--zs-text-secondary); border-bottom: 2px solid transparent;
+      margin-bottom: -2px; transition: all var(--zs-transition);
+    }
+    .zs-tab:hover { color: var(--zs-text); }
+    .zs-tab--active { color: var(--zs-primary); border-bottom-color: var(--zs-primary); font-weight: 500; }
+
+    /* Wizard */
+    .zs-wizard-steps {
+      display: flex; align-items: center; gap: 8px;
+      margin-bottom: var(--zs-spacing-lg); padding: 0 var(--zs-spacing-md);
+    }
+    .zs-wizard-step {
+      display: flex; align-items: center; gap: 8px;
+    }
+    .zs-wizard-circle {
+      width: 32px; height: 32px; border-radius: 50%;
+      display: flex; align-items: center; justify-content: center;
+      font-size: var(--zs-font-size-sm); font-weight: 600;
+      background: var(--zs-bg-secondary); color: var(--zs-text-secondary);
+      border: 2px solid var(--zs-border);
+    }
+    .zs-wizard-circle--active { background: var(--zs-primary); color: white; border-color: var(--zs-primary); }
+    .zs-wizard-circle--done { background: var(--zs-success); color: white; border-color: var(--zs-success); }
+    .zs-wizard-label { font-size: var(--zs-font-size-sm); color: var(--zs-text-secondary); }
+    .zs-wizard-label--active { color: var(--zs-text); font-weight: 500; }
+    .zs-wizard-line { flex: 1; height: 2px; background: var(--zs-border); }
+    .zs-wizard-line--done { background: var(--zs-success); }
+    .zs-wizard-nav { display: flex; justify-content: space-between; padding: var(--zs-spacing-md); }
   `]; }
     // ─── Lifecycle ───────────────────────────────────────────────
     connectedCallback() {
@@ -273,48 +275,48 @@ let ZenttoStudioRenderer = class ZenttoStudioRenderer extends LitElement {
             return html `<div class="zs-renderer" style="padding:24px;color:var(--zs-text-muted)">No schema loaded</div>`;
         }
         const layoutType = this.schema.layout.type;
-        return html `
-      <div class="zs-renderer">
-        ${this.schema.title ? html `
-          <div class="zs-header">
-            <h2 class="zs-title">${this.schema.title}</h2>
-            ${this.schema.description ? html `<p class="zs-description">${this.schema.description}</p>` : ''}
-          </div>
-        ` : ''}
-
+        return html `
+      <div class="zs-renderer">
+        ${this.schema.title ? html `
+          <div class="zs-header">
+            <h2 class="zs-title">${this.schema.title}</h2>
+            ${this.schema.description ? html `<p class="zs-description">${this.schema.description}</p>` : ''}
+          </div>
+        ` : ''}
+
         ${layoutType === 'tabs' ? this.renderTabs() :
             layoutType === 'wizard' ? this.renderWizard() :
-                this.renderSections()}
-
-        ${this.renderActions('bottom')}
-      </div>
+                this.renderSections()}
+
+        ${this.renderActions('bottom')}
+      </div>
     `;
     }
     renderSections() {
         if (!this.schema || !this.model)
             return nothing;
-        return html `
-      <div class="zs-body">
-        ${this.schema.sections.map(section => this.renderSection(section))}
-      </div>
+        return html `
+      <div class="zs-body">
+        ${this.schema.sections.map(section => this.renderSection(section))}
+      </div>
     `;
     }
     renderTabs() {
         if (!this.schema || !this.model)
             return nothing;
         const sections = this.schema.sections;
-        return html `
-      <div class="zs-tabs">
-        ${sections.map((s, i) => html `
-          <button
-            class="zs-tab ${i === this.activeSection ? 'zs-tab--active' : ''}"
-            @click="${() => { this.activeSection = i; }}"
-          >${s.title ?? `Tab ${i + 1}`}</button>
-        `)}
-      </div>
-      <div class="zs-body">
-        ${this.renderSection(sections[this.activeSection])}
-      </div>
+        return html `
+      <div class="zs-tabs">
+        ${sections.map((s, i) => html `
+          <button
+            class="zs-tab ${i === this.activeSection ? 'zs-tab--active' : ''}"
+            @click="${() => { this.activeSection = i; }}"
+          >${s.title ?? `Tab ${i + 1}`}</button>
+        `)}
+      </div>
+      <div class="zs-body">
+        ${this.renderSection(sections[this.activeSection])}
+      </div>
     `;
     }
     renderWizard() {
@@ -322,31 +324,31 @@ let ZenttoStudioRenderer = class ZenttoStudioRenderer extends LitElement {
             return nothing;
         const sections = this.schema.sections;
         const total = sections.length;
-        return html `
-      <div class="zs-wizard-steps">
-        ${sections.map((s, i) => html `
-          ${i > 0 ? html `<div class="zs-wizard-line ${i <= this.activeSection ? 'zs-wizard-line--done' : ''}"></div>` : ''}
-          <div class="zs-wizard-step">
-            <div class="zs-wizard-circle ${i === this.activeSection ? 'zs-wizard-circle--active' : i < this.activeSection ? 'zs-wizard-circle--done' : ''}">
-              ${i < this.activeSection ? '✓' : i + 1}
-            </div>
-            <span class="zs-wizard-label ${i === this.activeSection ? 'zs-wizard-label--active' : ''}">${s.title ?? `Paso ${i + 1}`}</span>
-          </div>
-        `)}
-      </div>
-      <div class="zs-body">
-        ${this.renderSection(sections[this.activeSection])}
-      </div>
-      <div class="zs-wizard-nav">
-        <button
-          class="zs-btn zs-btn--secondary"
-          ?disabled="${this.activeSection === 0}"
-          @click="${() => { this.activeSection = Math.max(0, this.activeSection - 1); }}"
-        >Anterior</button>
+        return html `
+      <div class="zs-wizard-steps">
+        ${sections.map((s, i) => html `
+          ${i > 0 ? html `<div class="zs-wizard-line ${i <= this.activeSection ? 'zs-wizard-line--done' : ''}"></div>` : ''}
+          <div class="zs-wizard-step">
+            <div class="zs-wizard-circle ${i === this.activeSection ? 'zs-wizard-circle--active' : i < this.activeSection ? 'zs-wizard-circle--done' : ''}">
+              ${i < this.activeSection ? '✓' : i + 1}
+            </div>
+            <span class="zs-wizard-label ${i === this.activeSection ? 'zs-wizard-label--active' : ''}">${s.title ?? `Paso ${i + 1}`}</span>
+          </div>
+        `)}
+      </div>
+      <div class="zs-body">
+        ${this.renderSection(sections[this.activeSection])}
+      </div>
+      <div class="zs-wizard-nav">
+        <button
+          class="zs-btn zs-btn--secondary"
+          ?disabled="${this.activeSection === 0}"
+          @click="${() => { this.activeSection = Math.max(0, this.activeSection - 1); }}"
+        >Anterior</button>
         ${this.activeSection < total - 1
             ? html `<button class="zs-btn zs-btn--primary" @click="${() => { this.activeSection = Math.min(total - 1, this.activeSection + 1); }}">Siguiente</button>`
-            : html `<button class="zs-btn zs-btn--primary" @click="${() => this.handleAction('__wizard_finish__')}">Finalizar</button>`}
-      </div>
+            : html `<button class="zs-btn zs-btn--primary" @click="${() => this.handleAction('__wizard_finish__')}">Finalizar</button>`}
+      </div>
     `;
     }
     renderSection(section) {
@@ -361,14 +363,14 @@ let ZenttoStudioRenderer = class ZenttoStudioRenderer extends LitElement {
         }
         const columns = section.columns ?? this.schema?.layout.columns ?? 1;
         const gap = this.schema?.layout.gap ?? 16;
-        return html `
-      <div class="zs-section">
-        ${section.title ? html `<h3 class="zs-section-title">${section.title}</h3>` : ''}
-        ${section.description ? html `<p class="zs-section-description">${section.description}</p>` : ''}
-        <div class="zs-section-grid" style="grid-template-columns: repeat(${columns}, 1fr); gap: ${gap}px;">
-          ${section.fields.map(field => this.renderField(field))}
-        </div>
-      </div>
+        return html `
+      <div class="zs-section">
+        ${section.title ? html `<h3 class="zs-section-title">${section.title}</h3>` : ''}
+        ${section.description ? html `<p class="zs-section-description">${section.description}</p>` : ''}
+        <div class="zs-section-grid" style="grid-template-columns: repeat(${columns}, 1fr); gap: ${gap}px;">
+          ${section.fields.map(field => this.renderField(field))}
+        </div>
+      </div>
     `;
     }
     renderField(field) {
@@ -403,10 +405,10 @@ let ZenttoStudioRenderer = class ZenttoStudioRenderer extends LitElement {
         const gridStyle = fullWidth ? 'grid-column: 1 / -1' : colSpan > 1 ? `grid-column: span ${colSpan}` : '';
         // Render based on tag name
         const tag = getFieldTag(field.type);
-        return html `
-      <div style="${gridStyle}" @field-change="${this.handleFieldChange}">
-        ${this.renderFieldByTag(tag, field, value, errors, disabled, readOnly, required, mergedProps)}
-      </div>
+        return html `
+      <div style="${gridStyle}" @field-change="${this.handleFieldChange}">
+        ${this.renderFieldByTag(tag, field, value, errors, disabled, readOnly, required, mergedProps)}
+      </div>
     `;
     }
     renderFieldByTag(tag, field, value, errors, disabled, readOnly, required, props) {
@@ -419,165 +421,178 @@ let ZenttoStudioRenderer = class ZenttoStudioRenderer extends LitElement {
         };
         switch (tag) {
             case 'zs-field-text':
-                return html `<zs-field-text
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${value != null ? String(value) : ''}"
-          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
-          .inputType="${props.inputType ?? 'text'}"
-          .multiline="${field.type === 'textarea'}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}" ?readOnly="${baseAttrs.readOnly}"
+                return html `<zs-field-text
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${value != null ? String(value) : ''}"
+          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
+          .inputType="${props.inputType ?? 'text'}"
+          .multiline="${field.type === 'textarea'}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}" ?readOnly="${baseAttrs.readOnly}"
         ></zs-field-text>`;
             case 'zs-field-number':
-                return html `<zs-field-number
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${value != null ? Number(value) : null}"
-          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
-          .isCurrency="${!!props.isCurrency}" .isPercentage="${!!props.isPercentage}"
-          .currencySymbol="${props.currencySymbol ?? '$'}"
-          .mode="${props.mode ?? 'input'}"
-          .min="${props.min ?? 0}" .max="${props.max ?? 100}"
-          .step="${props.step ?? 1}"
-          .maxRating="${props.maxRating ?? 5}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}" ?readOnly="${baseAttrs.readOnly}"
+                return html `<zs-field-number
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${value != null ? Number(value) : null}"
+          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
+          .isCurrency="${!!props.isCurrency}" .isPercentage="${!!props.isPercentage}"
+          .currencySymbol="${props.currencySymbol ?? '$'}"
+          .mode="${props.mode ?? 'input'}"
+          .min="${props.min ?? 0}" .max="${props.max ?? 100}"
+          .step="${props.step ?? 1}"
+          .maxRating="${props.maxRating ?? 5}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}" ?readOnly="${baseAttrs.readOnly}"
         ></zs-field-number>`;
             case 'zs-field-select':
-                return html `<zs-field-select
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${value ?? ''}"
-          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
-          .options="${props.options ?? []}"
-          .multiple="${!!props.multiple}"
-          .mode="${props.mode ?? 'select'}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
+                return html `<zs-field-select
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${value ?? ''}"
+          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
+          .options="${props.options ?? []}"
+          .multiple="${!!props.multiple}"
+          .mode="${props.mode ?? 'select'}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
         ></zs-field-select>`;
             case 'zs-field-date':
-                return html `<zs-field-date
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${value != null ? String(value) : ''}"
-          .helpText="${baseAttrs.helpText}"
-          .mode="${props.mode ?? 'date'}"
-          .min="${props.min ?? ''}" .max="${props.max ?? ''}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}" ?readOnly="${baseAttrs.readOnly}"
+                return html `<zs-field-date
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${value != null ? String(value) : ''}"
+          .helpText="${baseAttrs.helpText}"
+          .mode="${props.mode ?? 'date'}"
+          .min="${props.min ?? ''}" .max="${props.max ?? ''}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}" ?readOnly="${baseAttrs.readOnly}"
         ></zs-field-date>`;
             case 'zs-field-checkbox':
-                return html `<zs-field-checkbox
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${value ?? false}"
-          .helpText="${baseAttrs.helpText}"
-          .mode="${props.mode ?? 'checkbox'}"
-          .options="${props.options ?? []}"
-          .horizontal="${!!props.horizontal}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
+                return html `<zs-field-checkbox
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${value ?? false}"
+          .helpText="${baseAttrs.helpText}"
+          .mode="${props.mode ?? 'checkbox'}"
+          .options="${props.options ?? []}"
+          .horizontal="${!!props.horizontal}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
         ></zs-field-checkbox>`;
             case 'zs-field-switch':
-                return html `<zs-field-switch
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${!!value}"
-          .helpText="${baseAttrs.helpText}"
-          .errors="${baseAttrs.errors}"
-          ?disabled="${baseAttrs.disabled}"
+                return html `<zs-field-switch
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${!!value}"
+          .helpText="${baseAttrs.helpText}"
+          .errors="${baseAttrs.errors}"
+          ?disabled="${baseAttrs.disabled}"
         ></zs-field-switch>`;
             case 'zs-field-file':
-                return html `<zs-field-file
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .helpText="${baseAttrs.helpText}"
-          .accept="${props.accept ?? ''}"
-          .multiple="${!!props.multiple}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
+                return html `<zs-field-file
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .helpText="${baseAttrs.helpText}"
+          .accept="${props.accept ?? ''}"
+          .multiple="${!!props.multiple}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
         ></zs-field-file>`;
             case 'zs-field-lookup':
-                return html `<zs-field-lookup
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${value ?? ''}" .displayValue="${props.displayValue ?? ''}"
-          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
-          .options="${props.lookupOptions ?? []}"
-          .minChars="${props.minChars ?? 2}"
-          .debounceMs="${props.debounceMs ?? 300}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
+                return html `<zs-field-lookup
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${value ?? ''}" .displayValue="${props.displayValue ?? ''}"
+          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
+          .options="${props.lookupOptions ?? []}"
+          .minChars="${props.minChars ?? 2}"
+          .debounceMs="${props.debounceMs ?? 300}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
         ></zs-field-lookup>`;
             case 'zs-field-separator':
-                return html `<zs-field-separator
-          .variant="${props.variant ?? 'thin'}"
+                return html `<zs-field-separator
+          .variant="${props.variant ?? 'thin'}"
         ></zs-field-separator>`;
             case 'zs-field-heading':
-                return html `<zs-field-heading
-          .label="${baseAttrs.label}" .helpText="${baseAttrs.helpText}"
-          .level="${props.level ?? 'h2'}"
+                return html `<zs-field-heading
+          .label="${baseAttrs.label}" .helpText="${baseAttrs.helpText}"
+          .level="${props.level ?? 'h2'}"
         ></zs-field-heading>`;
             case 'zs-field-html':
-                return html `<zs-field-html
-          .content="${props.content ?? String(value ?? '')}"
+                return html `<zs-field-html
+          .content="${props.content ?? String(value ?? '')}"
         ></zs-field-html>`;
             case 'zs-field-signature':
-                return html `<zs-field-signature
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${value != null ? String(value) : ''}"
-          .helpText="${baseAttrs.helpText}"
-          .penWidth="${props.penWidth ?? 2}"
-          .penColor="${props.penColor ?? '#000000'}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
+                return html `<zs-field-signature
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${value != null ? String(value) : ''}"
+          .helpText="${baseAttrs.helpText}"
+          .penWidth="${props.penWidth ?? 2}"
+          .penColor="${props.penColor ?? '#000000'}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
         ></zs-field-signature>`;
             case 'zs-field-address':
-                return html `<zs-field-address
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${value ?? {}}" .helpText="${baseAttrs.helpText}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}" ?readOnly="${baseAttrs.readOnly}"
+                return html `<zs-field-address
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${value ?? {}}" .helpText="${baseAttrs.helpText}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}" ?readOnly="${baseAttrs.readOnly}"
         ></zs-field-address>`;
             case 'zs-field-chart':
-                return html `<zs-field-chart
-          .label="${baseAttrs.label}"
-          .chartType="${props.chartType ?? 'bar'}"
-          .data="${props.chartData ?? []}"
-          .width="${props.width ?? 400}"
-          .height="${props.height ?? 250}"
+                return html `<zs-field-chart
+          .label="${baseAttrs.label}"
+          .chartType="${props.chartType ?? 'bar'}"
+          .data="${props.chartData ?? []}"
+          .width="${props.width ?? 400}"
+          .height="${props.height ?? 250}"
         ></zs-field-chart>`;
             case 'zs-field-media':
-                return html `<zs-field-media
-          .label="${baseAttrs.label}"
-          .src="${value != null ? String(value) : props.src ?? ''}"
-          .mediaType="${props.mediaType ?? 'image'}"
-          .alt="${props.alt ?? ''}"
+                return html `<zs-field-media
+          .label="${baseAttrs.label}"
+          .src="${value != null ? String(value) : props.src ?? ''}"
+          .mediaType="${props.mediaType ?? 'image'}"
+          .alt="${props.alt ?? ''}"
         ></zs-field-media>`;
             case 'zs-field-treeview':
-                return html `<zs-field-treeview
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${Array.isArray(value) ? value : (value ? [value] : [])}"
-          .helpText="${baseAttrs.helpText}"
-          .nodes="${props.nodes ?? []}"
-          .multiSelect="${!!props.multiSelect}"
-          .showCheckboxes="${!!props.showCheckboxes}"
-          .searchable="${!!props.searchable}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
+                return html `<zs-field-treeview
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${Array.isArray(value) ? value : (value ? [value] : [])}"
+          .helpText="${baseAttrs.helpText}"
+          .nodes="${props.nodes ?? []}"
+          .multiSelect="${!!props.multiSelect}"
+          .showCheckboxes="${!!props.showCheckboxes}"
+          .searchable="${!!props.searchable}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
         ></zs-field-treeview>`;
             case 'zs-field-chips':
-                return html `<zs-field-chips
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${Array.isArray(value) ? value : []}"
-          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
-          .options="${props.options ?? []}"
-          .allowCustom="${props.allowCustom !== false}"
-          .maxChips="${props.maxChips ?? 0}"
-          .colorMode="${props.colorMode ?? 'default'}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
+                return html `<zs-field-chips
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${Array.isArray(value) ? value : []}"
+          .placeholder="${baseAttrs.placeholder}" .helpText="${baseAttrs.helpText}"
+          .options="${props.options ?? []}"
+          .allowCustom="${props.allowCustom !== false}"
+          .maxChips="${props.maxChips ?? 0}"
+          .colorMode="${props.colorMode ?? 'default'}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
         ></zs-field-chips>`;
+            case 'zs-field-datagrid':
+                return html `<zs-field-datagrid
+          .config="${field}"
+          .rows="${Array.isArray(value) ? value : props.rows ?? []}"
+          .theme="${this.themeMode}"
+        ></zs-field-datagrid>`;
+            case 'zs-field-report':
+                return html `<zs-field-report
+          .config="${field}"
+          .template="${props.template ?? null}"
+          .data="${value ?? props.data ?? null}"
+          .theme="${this.themeMode}"
+        ></zs-field-report>`;
             default:
-                return html `<zs-field-text
-          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
-          .value="${value != null ? String(value) : ''}"
-          .placeholder="${baseAttrs.placeholder}"
-          .errors="${baseAttrs.errors}"
-          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
+                return html `<zs-field-text
+          .fieldId="${baseAttrs.fieldId}" .label="${baseAttrs.label}"
+          .value="${value != null ? String(value) : ''}"
+          .placeholder="${baseAttrs.placeholder}"
+          .errors="${baseAttrs.errors}"
+          ?required="${baseAttrs.required}" ?disabled="${baseAttrs.disabled}"
         ></zs-field-text>`;
         }
     }
@@ -588,20 +603,20 @@ let ZenttoStudioRenderer = class ZenttoStudioRenderer extends LitElement {
         if (actions.length === 0)
             return nothing;
         const ctx = this.buildContext();
-        return html `
-      <div class="zs-actions">
+        return html `
+      <div class="zs-actions">
         ${actions.map(action => {
             const enabled = isActionEnabled(action, ctx);
             const variant = action.variant ?? 'secondary';
-            return html `
-            <button
-              class="zs-btn zs-btn--${variant}"
-              ?disabled="${!enabled}"
-              @click="${() => this.handleAction(action.id)}"
-            >${action.label}</button>
+            return html `
+            <button
+              class="zs-btn zs-btn--${variant}"
+              ?disabled="${!enabled}"
+              @click="${() => this.handleAction(action.id)}"
+            >${action.label}</button>
           `;
-        })}
-      </div>
+        })}
+      </div>
     `;
     }
 };