@zentto/studio 0.1.0

package/dist/fields/zs-field-treeview.js

@@ -0,0 +1,234 @@
+// @zentto/studio — Tree View field component
+// Recursive tree with expand/collapse, selection, icons, drag-drop ready
+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 } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { fieldBaseStyles } from '../styles/tokens.js';
+let ZsFieldTreeView = class ZsFieldTreeView extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fieldId = '';
+        this.label = '';
+        this.helpText = '';
+        this.nodes = [];
+        this.value = []; // selected node IDs
+        this.required = false;
+        this.disabled = false;
+        this.multiSelect = false;
+        this.showCheckboxes = false;
+        this.searchable = false;
+        this.errors = [];
+        this.expanded = new Set();
+        this.searchQuery = '';
+    }
+    static { this.styles = [fieldBaseStyles, css `
+    :host { display: block; }
+    .zs-tree {
+      font-family: var(--zs-font-family, sans-serif);
+      font-size: var(--zs-font-size, 14px);
+      color: var(--zs-text, #212529);
+      border: 1px solid var(--zs-border, #dee2e6);
+      border-radius: var(--zs-radius, 6px);
+      padding: 8px;
+      max-height: 400px;
+      overflow-y: auto;
+      background: var(--zs-bg, white);
+    }
+    .zs-tree-node { user-select: none; }
+    .zs-tree-row {
+      display: flex; align-items: center; gap: 4px;
+      padding: 4px 6px; border-radius: 4px;
+      cursor: pointer; transition: background 100ms;
+    }
+    .zs-tree-row:hover { background: var(--zs-bg-hover, #f1f3f5); }
+    .zs-tree-row--selected {
+      background: var(--zs-primary-light, #fdebd0);
+      color: var(--zs-primary, #e67e22);
+    }
+    .zs-tree-row--disabled { opacity: 0.5; cursor: not-allowed; }
+    .zs-tree-toggle {
+      width: 20px; height: 20px; display: flex; align-items: center;
+      justify-content: center; flex-shrink: 0; font-size: 10px;
+      color: var(--zs-text-muted, #adb5bd); transition: transform 150ms;
+    }
+    .zs-tree-toggle--expanded { transform: rotate(90deg); }
+    .zs-tree-toggle--leaf { visibility: hidden; }
+    .zs-tree-icon { flex-shrink: 0; font-size: 16px; }
+    .zs-tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .zs-tree-children { padding-left: 20px; }
+    .zs-tree-search {
+      margin-bottom: 8px;
+    }
+    .zs-tree-search input {
+      width: 100%; padding: 6px 10px; border: 1px solid var(--zs-border, #dee2e6);
+      border-radius: 4px; font-size: 13px; outline: none;
+      background: var(--zs-bg-secondary, #f8f9fa);
+    }
+    .zs-tree-search input:focus {
+      border-color: var(--zs-primary, #e67e22);
+    }
+    .zs-tree-count {
+      font-size: 11px; color: var(--zs-text-muted, #adb5bd);
+      margin-top: 4px; text-align: right;
+    }
+    .zs-tree-checkbox {
+      accent-color: var(--zs-primary, #e67e22);
+      width: 15px; height: 15px; flex-shrink: 0;
+    }
+  `]; }
+    toggleExpand(nodeId) {
+        const next = new Set(this.expanded);
+        if (next.has(nodeId))
+            next.delete(nodeId);
+        else
+            next.add(nodeId);
+        this.expanded = next;
+    }
+    selectNode(node) {
+        if (node.disabled || this.disabled)
+            return;
+        let newValue;
+        if (this.multiSelect) {
+            newValue = this.value.includes(node.id)
+                ? this.value.filter(v => v !== node.id)
+                : [...this.value, node.id];
+        }
+        else {
+            newValue = this.value.includes(node.id) ? [] : [node.id];
+        }
+        this.dispatchEvent(new CustomEvent('field-change', {
+            detail: { fieldId: this.fieldId, value: this.multiSelect ? newValue : (newValue[0] ?? null) },
+            bubbles: true, composed: true,
+        }));
+        this.dispatchEvent(new CustomEvent('tree-select', {
+            detail: { fieldId: this.fieldId, nodeId: node.id, node },
+            bubbles: true, composed: true,
+        }));
+    }
+    matchesSearch(node) {
+        if (!this.searchQuery)
+            return true;
+        const q = this.searchQuery.toLowerCase();
+        if (node.label.toLowerCase().includes(q))
+            return true;
+        return node.children?.some(c => this.matchesSearch(c)) ?? false;
+    }
+    countNodes(nodes) {
+        let count = 0;
+        for (const n of nodes) {
+            count++;
+            if (n.children)
+                count += this.countNodes(n.children);
+        }
+        return count;
+    }
+    render() {
+        const hasError = this.errors.length > 0;
+        const labelClass = `zs-label ${this.required ? 'zs-label--required' : ''}`;
+        const filtered = this.searchQuery ? this.nodes.filter(n => this.matchesSearch(n)) : this.nodes;
+        return html `
+      <div class="zs-field">
+        ${this.label ? html `<label class="${labelClass}">${this.label}</label>` : ''}
+        <div class="zs-tree">
+          ${this.searchable ? html `
+            <div class="zs-tree-search">
+              <input type="text" placeholder="Buscar..." .value="${this.searchQuery}"
+                @input="${(e) => { this.searchQuery = e.target.value; }}" />
+            </div>
+          ` : ''}
+          ${filtered.map(node => this.renderNode(node, 0))}
+          <div class="zs-tree-count">${this.countNodes(this.nodes)} elementos</div>
+        </div>
+        ${hasError ? html `<span class="zs-error">${this.errors[0]}</span>` : ''}
+        ${this.helpText && !hasError ? html `<span class="zs-help">${this.helpText}</span>` : ''}
+      </div>
+    `;
+    }
+    renderNode(node, depth) {
+        if (this.searchQuery && !this.matchesSearch(node))
+            return '';
+        const hasChildren = node.children && node.children.length > 0;
+        const isExpanded = this.expanded.has(node.id);
+        const isSelected = this.value.includes(node.id);
+        const selectedValues = Array.isArray(this.value) ? this.value : [this.value];
+        const rowClasses = [
+            'zs-tree-row',
+            isSelected ? 'zs-tree-row--selected' : '',
+            node.disabled ? 'zs-tree-row--disabled' : '',
+        ].filter(Boolean).join(' ');
+        const toggleClass = [
+            'zs-tree-toggle',
+            hasChildren ? (isExpanded ? 'zs-tree-toggle--expanded' : '') : 'zs-tree-toggle--leaf',
+        ].filter(Boolean).join(' ');
+        return html `
+      <div class="zs-tree-node">
+        <div class="${rowClasses}" @click="${() => this.selectNode(node)}">
+          <span class="${toggleClass}" @click="${(e) => { e.stopPropagation(); this.toggleExpand(node.id); }}">▶</span>
+          ${this.showCheckboxes ? html `
+            <input type="checkbox" class="zs-tree-checkbox"
+              .checked="${selectedValues.includes(node.id)}"
+              ?disabled="${node.disabled || this.disabled}"
+              @click="${(e) => e.stopPropagation()}"
+              @change="${() => this.selectNode(node)}" />
+          ` : ''}
+          ${node.icon ? html `<span class="zs-tree-icon">${node.icon}</span>` : ''}
+          <span class="zs-tree-label">${node.label}</span>
+        </div>
+        ${hasChildren && isExpanded ? html `
+          <div class="zs-tree-children">
+            ${node.children.map(child => this.renderNode(child, depth + 1))}
+          </div>
+        ` : ''}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], ZsFieldTreeView.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], ZsFieldTreeView.prototype, "label", void 0);
+__decorate([
+    property()
+], ZsFieldTreeView.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Array })
+], ZsFieldTreeView.prototype, "nodes", void 0);
+__decorate([
+    property({ type: Array })
+], ZsFieldTreeView.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldTreeView.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldTreeView.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldTreeView.prototype, "multiSelect", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldTreeView.prototype, "showCheckboxes", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldTreeView.prototype, "searchable", void 0);
+__decorate([
+    property({ type: Array })
+], ZsFieldTreeView.prototype, "errors", void 0);
+__decorate([
+    state()
+], ZsFieldTreeView.prototype, "expanded", void 0);
+__decorate([
+    state()
+], ZsFieldTreeView.prototype, "searchQuery", void 0);
+ZsFieldTreeView = __decorate([
+    customElement('zs-field-treeview')
+], ZsFieldTreeView);
+export { ZsFieldTreeView };
+//# sourceMappingURL=zs-field-treeview.js.map

package/dist/fields/zs-field-treeview.js.map

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

package/dist/styles/tokens.d.ts

@@ -0,0 +1,3 @@
+export declare const studioTokens: import("lit").CSSResult;
+export declare const fieldBaseStyles: import("lit").CSSResult;
+//# sourceMappingURL=tokens.d.ts.map

package/dist/styles/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,yBAsExB,CAAC;AAEF,eAAO,MAAM,eAAe,yBAmF3B,CAAC"}

package/dist/styles/tokens.js

@@ -0,0 +1,159 @@
+// @zentto/studio — CSS custom properties (design tokens)
+// Prefix: --zs-* (Zentto Studio)
+import { css } from 'lit';
+export const studioTokens = css `
+  :host {
+    /* Colors */
+    --zs-primary: #e67e22;
+    --zs-primary-hover: #d35400;
+    --zs-primary-light: #fdebd0;
+    --zs-accent: #3498db;
+    --zs-danger: #e74c3c;
+    --zs-success: #27ae60;
+    --zs-warning: #f39c12;
+    --zs-info: #2980b9;
+
+    /* Neutrals */
+    --zs-bg: #ffffff;
+    --zs-bg-secondary: #f8f9fa;
+    --zs-bg-hover: #f1f3f5;
+    --zs-text: #212529;
+    --zs-text-secondary: #6c757d;
+    --zs-text-muted: #adb5bd;
+    --zs-border: #dee2e6;
+    --zs-border-focus: var(--zs-primary);
+    --zs-shadow: rgba(0, 0, 0, 0.08);
+
+    /* Typography */
+    --zs-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
+    --zs-font-size: 14px;
+    --zs-font-size-sm: 12px;
+    --zs-font-size-lg: 16px;
+    --zs-font-size-xl: 20px;
+    --zs-line-height: 1.5;
+
+    /* Spacing */
+    --zs-spacing-xs: 4px;
+    --zs-spacing-sm: 8px;
+    --zs-spacing-md: 16px;
+    --zs-spacing-lg: 24px;
+    --zs-spacing-xl: 32px;
+
+    /* Border */
+    --zs-radius: 6px;
+    --zs-radius-sm: 4px;
+    --zs-radius-lg: 8px;
+
+    /* Input */
+    --zs-input-height: 38px;
+    --zs-input-padding: 8px 12px;
+    --zs-input-border: 1px solid var(--zs-border);
+    --zs-input-bg: var(--zs-bg);
+
+    /* Label */
+    --zs-label-font-size: 13px;
+    --zs-label-font-weight: 500;
+    --zs-label-color: var(--zs-text);
+    --zs-label-margin: 0 0 4px 0;
+
+    /* Transitions */
+    --zs-transition: 150ms ease;
+  }
+
+  :host([theme="dark"]) {
+    --zs-bg: #1a1a2e;
+    --zs-bg-secondary: #16213e;
+    --zs-bg-hover: #0f3460;
+    --zs-text: #eaeaea;
+    --zs-text-secondary: #a0a0a0;
+    --zs-text-muted: #666;
+    --zs-border: #333;
+    --zs-shadow: rgba(0, 0, 0, 0.3);
+    --zs-input-bg: #16213e;
+  }
+`;
+export const fieldBaseStyles = css `
+  .zs-field {
+    display: flex;
+    flex-direction: column;
+    font-family: var(--zs-font-family);
+    font-size: var(--zs-font-size);
+    color: var(--zs-text);
+  }
+
+  .zs-field--horizontal {
+    flex-direction: row;
+    align-items: center;
+    gap: var(--zs-spacing-sm);
+  }
+
+  .zs-label {
+    font-size: var(--zs-label-font-size);
+    font-weight: var(--zs-label-font-weight);
+    color: var(--zs-label-color);
+    margin: var(--zs-label-margin);
+    user-select: none;
+  }
+
+  .zs-label--required::after {
+    content: ' *';
+    color: var(--zs-danger);
+  }
+
+  .zs-input {
+    height: var(--zs-input-height);
+    padding: var(--zs-input-padding);
+    border: var(--zs-input-border);
+    border-radius: var(--zs-radius);
+    background: var(--zs-input-bg);
+    color: var(--zs-text);
+    font-family: var(--zs-font-family);
+    font-size: var(--zs-font-size);
+    outline: none;
+    transition: border-color var(--zs-transition), box-shadow var(--zs-transition);
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .zs-input:focus {
+    border-color: var(--zs-border-focus);
+    box-shadow: 0 0 0 3px var(--zs-primary-light);
+  }
+
+  .zs-input:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    background: var(--zs-bg-secondary);
+  }
+
+  .zs-input::placeholder {
+    color: var(--zs-text-muted);
+  }
+
+  .zs-input--error {
+    border-color: var(--zs-danger);
+  }
+
+  .zs-input--error:focus {
+    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
+  }
+
+  .zs-error {
+    font-size: var(--zs-font-size-sm);
+    color: var(--zs-danger);
+    margin-top: 2px;
+  }
+
+  .zs-help {
+    font-size: var(--zs-font-size-sm);
+    color: var(--zs-text-muted);
+    margin-top: 2px;
+  }
+
+  .zs-textarea {
+    min-height: 80px;
+    resize: vertical;
+    height: auto;
+  }
+`;
+//# sourceMappingURL=tokens.js.map

package/dist/styles/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/styles/tokens.ts"],"names":[],"mappings":"AAAA,yDAAyD;AACzD,iCAAiC;AAEjC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE9B,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmFjC,CAAC"}

package/dist/zentto-studio-app.d.ts

@@ -0,0 +1,55 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { AppConfig } from '@zentto/studio-core';
+import './zentto-studio-renderer.js';
+export declare class ZenttoStudioApp extends LitElement {
+    static styles: import("lit").CSSResult[];
+    config: AppConfig | null;
+    customCss: string;
+    cssVars: Record<string, string>;
+    private currentSegment;
+    private sidebarCollapsed;
+    private expandedNavItems;
+    private pageData;
+    private pageLoading;
+    private renderKey;
+    private eventBus;
+    private history;
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private navigate;
+    private goBack;
+    private get currentPage();
+    private get breadcrumbs();
+    private loadPageData;
+    private hasRole;
+    render(): TemplateResult<1>;
+    private renderSidebarBrand;
+    private renderNavItem;
+    private renderSidebarFooter;
+    private renderBreadcrumbs;
+    private renderHeaderActions;
+    private renderPage;
+    private renderPageContent;
+    private renderCardsPage;
+    private renderSchemaPage;
+    private renderGridPage;
+    private renderChartPage;
+    private activeTab;
+    private renderTabsPage;
+    /** Navigate to a page segment programmatically */
+    navigateTo(segment: string): void;
+    /** Get current page segment */
+    getCurrentSegment(): string;
+    /** Get fetched data for current page */
+    getPageData(): Record<string, unknown>;
+    /** Reload current page data */
+    reloadData(): Promise<void>;
+    /** Update page data externally */
+    setPageData(data: Record<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zentto-studio-app': ZenttoStudioApp;
+    }
+}
+//# sourceMappingURL=zentto-studio-app.d.ts.map

package/dist/zentto-studio-app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zentto-studio-app.d.ts","sourceRoot":"","sources":["../src/zentto-studio-app.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAI1E,OAAO,KAAK,EACV,SAAS,EACV,MAAM,qBAAqB,CAAC;AAW7B,OAAO,6BAA6B,CAAC;AAErC,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,4BA8OV;IAIyB,MAAM,EAAE,SAAS,GAAG,IAAI,CAAQ;IAChC,SAAS,SAAM;IACf,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAIxD,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,gBAAgB,CAAqB;IAC7C,OAAO,CAAC,QAAQ,CAA+B;IAC/C,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,SAAS,CAAK;IAC/B,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,OAAO,CAAgB;IAI/B,iBAAiB;IAWjB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWrC,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,MAAM;IAQd,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,WAAW,GA0BtB;YAIa,YAAY;IAyB1B,OAAO,CAAC,OAAO;IAQf,MAAM;IA2CN,OAAO,CAAC,kBAAkB;IAmB1B,OAAO,CAAC,aAAa;IAyCrB,OAAO,CAAC,mBAAmB;IAqB3B,OAAO,CAAC,iBAAiB;IAoBzB,OAAO,CAAC,mBAAmB;IAgB3B,OAAO,CAAC,UAAU;IAmClB,OAAO,CAAC,iBAAiB;IAsBzB,OAAO,CAAC,eAAe;IAwCvB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,cAAc;IAyCtB,OAAO,CAAC,eAAe;IAgCd,OAAO,CAAC,SAAS,CAAK;IAE/B,OAAO,CAAC,cAAc;IAqBtB,kDAAkD;IAClD,UAAU,CAAC,OAAO,EAAE,MAAM;IAE1B,+BAA+B;IAC/B,iBAAiB,IAAI,MAAM;IAE3B,wCAAwC;IACxC,WAAW,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;IAEtC,+BAA+B;IACzB,UAAU;IAEhB,kCAAkC;IAClC,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;CAI1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}