@miguimono/json-schema 2.0.0

package/dist/schema/ng16/fesm2022/json-schema-ng16.mjs

@@ -0,0 +1,1656 @@
+import * as i0 from '@angular/core';
+import { signal, EventEmitter, computed, Output, Input, ChangeDetectionStrategy, Component, Injectable, ViewChild } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgIf, NgTemplateOutlet, NgClass, NgFor } from '@angular/common';
+
+/**
+ * Tipos y modelos base de la librería Schema.
+ * ---------------------------------------------------------------------------
+ * Este archivo define:
+ *  - Tipos de configuración (dirección del layout, estilos, depuración, etc.)
+ *  - Estructuras del grafo normalizado (nodos y aristas)
+ *  - Estructura de configuración SchemaSettings (por secciones)
+ *  - Valores por defecto (DEFAULT_SETTINGS)
+ *
+ * CONVENCIONES:
+ *  - No se realizan operaciones lógicas aquí; solo contratos y defaults.
+ *  - No modifiques nombres de propiedades existentes: otros módulos dependen
+ *    de ellas. Cualquier cambio es breaking.
+ *  - Todos los ejemplos son ilustrativos y no afectan el comportamiento.
+ */
+/* =========================================
+ *             Valores por defecto
+ * ========================================= */
+/**
+ * Valores por defecto (seguros) de configuración.
+ * - Estos valores son fusionados con `SchemaSettings` provistos por el usuario.
+ * - No contienen lógica condicional; son constantes.
+ */
+const DEFAULT_SETTINGS = {
+    messages: {
+        isLoading: false,
+        isError: false,
+        loadingMessage: "Cargando…",
+        errorMessage: "Error al cargar el esquema",
+        emptyMessage: "No hay datos para mostrar",
+    },
+    colors: {
+        linkStroke: "#019df4",
+        linkStrokeWidth: 2,
+        accentByKey: null,
+        accentInverse: false,
+        accentFill: false,
+        showColorTrue: false,
+        showColorFalse: false,
+        showColorNull: false,
+    },
+    layout: {
+        layoutDirection: "RIGHT",
+        layoutAlign: "firstChild",
+        linkStyle: "curve",
+        curveTension: 30,
+        straightThresholdDx: 60,
+        columnGapPx: 64,
+        rowGapPx: 32,
+    },
+    dataView: {
+        /* a) Extracción */
+        titleKeyPriority: [],
+        hiddenKeysGlobal: [],
+        treatScalarArraysAsAttribute: true,
+        maxDepth: null,
+        labelData: {},
+        /* b) Presentación general */
+        previewMaxKeys: 999,
+        valueMaxChars: null,
+        valueShowTooltip: false,
+        noWrapKeys: [],
+        maxCardWidth: null,
+        maxCardHeight: null,
+        defaultNodeSize: { width: 256, height: 64 },
+        /* c) Presentación de imagen */
+        showImage: null,
+        imageSizePx: 32,
+        imageShape: "rounded",
+        imageBorder: false,
+        imageBg: "transparent",
+        imageFit: "contain",
+        imageFallback: null,
+        /* d) Interacción */
+        enableCollapse: true,
+        /* e) Medición */
+        autoResizeCards: true,
+        paddingWidthPx: 16,
+        paddingHeightPx: 0,
+    },
+    viewport: {
+        height: 800,
+        minHeight: 480,
+        showToolbar: true,
+        toolbarControls: {
+            showLinkStyle: true,
+            showLayoutAlign: true,
+            showLayoutDirection: true,
+        },
+    },
+};
+
+// URL: projects/schema-ng16/src/lib/models.ts
+
+// URL: projects/schema-ng16/src/lib/components/schema-card.component.ts
+class SchemaCardComponent {
+    constructor() {
+        /* ============================ Inputs (con alias para evitar conflictos con métodos) ============================ */
+        this._node = signal(null);
+        this._cardTemplate = signal(null);
+        this._settings = signal(DEFAULT_SETTINGS);
+        this._hasChildren = signal(false);
+        this._showCollapseControls = signal(false);
+        this._isCollapsed = signal(false);
+        /* ============================ Outputs =========================== */
+        this.nodeClick = new EventEmitter();
+        this.toggleRequest = new EventEmitter();
+        /* ============================ View derivada ===================== */
+        this.view = computed(() => {
+            const s = this.settings(); // nunca null; siempre hay defaults
+            // Grupo de imagen
+            const imageSizePx = s.dataView?.imageSizePx ?? DEFAULT_SETTINGS.dataView.imageSizePx;
+            const imageShape = (s.dataView?.imageShape ?? DEFAULT_SETTINGS.dataView.imageShape);
+            const imageBorder = s.dataView?.imageBorder ?? DEFAULT_SETTINGS.dataView.imageBorder;
+            const imageBg = s.dataView?.imageBg ?? DEFAULT_SETTINGS.dataView.imageBg;
+            const imageFit = s.dataView?.imageFit ?? DEFAULT_SETTINGS.dataView.imageFit;
+            // Presentación general
+            const maxCardWidth = s.dataView?.maxCardWidth ?? null;
+            const maxCardHeight = s.dataView?.maxCardHeight ?? null;
+            const noWrapKeys = s.dataView?.noWrapKeys ?? [];
+            const labelData = s.dataView?.labelData ?? {};
+            const valueShowTooltip = s.dataView?.valueShowTooltip ?? false;
+            const valueMaxChars = s.dataView?.valueMaxChars ?? null;
+            // Acentos
+            const accentByKey = s.colors?.accentByKey ?? null;
+            const accentFill = s.colors?.accentFill ?? false;
+            const accentInverse = s.colors?.accentInverse ?? false;
+            const reqTrue = s.colors?.showColorTrue ?? false;
+            const reqFalse = s.colors?.showColorFalse ?? false;
+            const reqNull = s.colors?.showColorNull ?? false;
+            let showTrue = reqTrue;
+            let showFalse = reqFalse;
+            let showNull = reqNull;
+            const anyRequested = reqTrue || reqFalse || reqNull;
+            if (accentByKey && !anyRequested) {
+                showTrue = true;
+                showFalse = true;
+                showNull = true;
+            }
+            return {
+                // Imagen
+                showImageKey: s.dataView?.showImage ?? null,
+                imageSizePx,
+                imageShape,
+                imageBorder,
+                imageBg,
+                imageFit,
+                imageFallback: s.dataView?.imageFallback ?? null,
+                // Presentación
+                maxCardWidth,
+                maxCardHeight,
+                noWrapKeys,
+                labelData,
+                valueShowTooltip,
+                valueMaxChars,
+                // Defaults de tamaño
+                defaultNodeW: DEFAULT_SETTINGS.dataView.defaultNodeSize?.width ?? 120,
+                defaultNodeH: DEFAULT_SETTINGS.dataView.defaultNodeSize?.height ?? 60,
+                // Acentos
+                accentByKey,
+                accentFill,
+                accentInverse,
+                showColorTrue: showTrue,
+                showColorFalse: showFalse,
+                showColorNull: showNull,
+            };
+        });
+    }
+    set nodeInput(value) {
+        this._node.set(value ?? null);
+    }
+    node() {
+        return this._node();
+    }
+    set cardTemplateInput(value) {
+        this._cardTemplate.set(value ?? null);
+    }
+    cardTemplate() {
+        return this._cardTemplate();
+    }
+    set settingsInput(value) {
+        this._settings.set(value ?? DEFAULT_SETTINGS);
+    }
+    settings() {
+        return this._settings();
+    }
+    set hasChildrenInput(value) {
+        this._hasChildren.set(!!value);
+    }
+    hasChildren() {
+        return this._hasChildren();
+    }
+    set showCollapseControlsInput(value) {
+        this._showCollapseControls.set(!!value);
+    }
+    showCollapseControls() {
+        return this._showCollapseControls();
+    }
+    set isCollapsedInput(value) {
+        this._isCollapsed.set(!!value);
+    }
+    isCollapsed() {
+        return this._isCollapsed();
+    }
+    /* ============================ API interna ======================= */
+    onClick(event) {
+        event.stopPropagation();
+        const n = this.node();
+        if (n)
+            this.nodeClick.emit(n);
+    }
+    onToggle(event) {
+        event.stopPropagation();
+        const n = this.node();
+        if (n)
+            this.toggleRequest.emit(n);
+    }
+    objToPairs(obj) {
+        const entries = Object.entries(obj ?? {});
+        const imgKey = this.view().showImageKey;
+        const accentKey = this.view().accentByKey;
+        return entries.filter(([k]) => {
+            if (imgKey && k === imgKey)
+                return false;
+            if (accentKey && k === accentKey)
+                return false;
+            return true;
+        });
+    }
+    showImageKey() {
+        const k = this.view().showImageKey;
+        return k && typeof k === "string" && k.trim() ? k : null;
+    }
+    imageSrc() {
+        const key = this.showImageKey();
+        if (!key)
+            return null;
+        const v = this.node()?.data?.[key];
+        return typeof v === "string" && v.trim() !== "" ? v : null;
+    }
+    imageAlt() {
+        const n = this.node();
+        if (!n)
+            return "imagen";
+        return n.jsonMeta?.title || n.label || "imagen";
+    }
+    getAccentClasses() {
+        const v = this.view();
+        const k = v.accentByKey;
+        if (!k)
+            return [];
+        const n = this.node();
+        const val = n?.data?.[k];
+        const classes = [];
+        const pushIf = (cond, cls) => cond && classes.push(cls);
+        if (!v.accentInverse) {
+            pushIf(val === true && v.showColorTrue, "accent-true");
+            pushIf(val === false && v.showColorFalse, "accent-false");
+            pushIf(val === null && v.showColorNull, "accent-null");
+            if (v.accentFill) {
+                pushIf(val === true && v.showColorTrue, "accent-fill-true");
+                pushIf(val === false && v.showColorFalse, "accent-fill-false");
+                pushIf(val === null && v.showColorNull, "accent-fill-null");
+            }
+        }
+        else {
+            pushIf(val === true && v.showColorTrue, "accent-false");
+            pushIf(val === false && v.showColorFalse, "accent-true");
+            pushIf(val === null && v.showColorNull, "accent-null");
+            if (v.accentFill) {
+                pushIf(val === true && v.showColorTrue, "accent-fill-false");
+                pushIf(val === false && v.showColorFalse, "accent-fill-true");
+                pushIf(val === null && v.showColorNull, "accent-fill-null");
+            }
+        }
+        return classes;
+    }
+    isNoWrapKey(key) {
+        const arr = this.view().noWrapKeys ?? [];
+        return Array.isArray(arr) ? arr.includes(key) : false;
+    }
+    arrowGlyph() {
+        const dir = this.settings().layout?.layoutDirection ?? DEFAULT_SETTINGS.layout.layoutDirection;
+        const collapsed = !!this.isCollapsed();
+        if (dir === "DOWN")
+            return collapsed ? "▼" : "▲";
+        return collapsed ? "▶" : "◀";
+    }
+    displayValue(val) {
+        const str = val == null ? String(val) : String(val);
+        const limit = this.view().valueMaxChars;
+        if (typeof limit === "number" && limit > 0 && str.length > limit) {
+            return str.slice(0, limit) + "…";
+        }
+        return str;
+    }
+    valueTitle(val) {
+        if (!this.view().valueShowTooltip)
+            return null;
+        return val == null ? String(val) : String(val);
+    }
+    displayKey(key) {
+        const map = this.view().labelData ?? {};
+        return Object.prototype.hasOwnProperty.call(map, key) ? map[key] : key;
+    }
+    hasComputedTitle() {
+        const t = this.node()?.jsonMeta?.title;
+        return !!t && String(t).trim() !== "";
+    }
+    onImgError(ev) {
+        const el = ev.target;
+        if (!el)
+            return;
+        const tried = el.dataset["fallbackApplied"] === "1";
+        const fallback = this.view().imageFallback;
+        if (fallback && !tried) {
+            el.dataset["fallbackApplied"] = "1";
+            el.src = fallback;
+            return;
+        }
+        el.removeAttribute("src");
+        if (!this.view().imageBg)
+            el.style.background = "#e2e8f0";
+        if (this.view().imageBorder === undefined)
+            el.style.border = "1px solid rgba(0,0,0,0.06)";
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SchemaCardComponent, isStandalone: true, selector: "schema-card", inputs: { nodeInput: ["node", "nodeInput"], cardTemplateInput: ["cardTemplate", "cardTemplateInput"], settingsInput: ["settings", "settingsInput"], hasChildrenInput: ["hasChildren", "hasChildrenInput"], showCollapseControlsInput: ["showCollapseControls", "showCollapseControlsInput"], isCollapsedInput: ["isCollapsed", "isCollapsedInput"] }, outputs: { nodeClick: "nodeClick", toggleRequest: "toggleRequest" }, ngImport: i0, template: "<div\n  class=\"schema-card\"\n  [attr.data-node-id]=\"node()?.id ?? ''\"\n  [ngClass]=\"getAccentClasses()\"\n  [style.left.px]=\"node()?.x ?? 0\"\n  [style.top.px]=\"node()?.y ?? 0\"\n  [style.width.px]=\"node()?.width ?? view().defaultNodeW\"\n  [style.height.px]=\"node()?.height ?? view().defaultNodeH\"\n  [style.maxWidth.px]=\"view().maxCardWidth\"\n  [style.maxHeight.px]=\"view().maxCardHeight\"\n  (click)=\"onClick($event)\"\n  style=\"z-index: 1; position: absolute;\"\n>\n  <button\n    *ngIf=\"showCollapseControls() && hasChildren()\"\n    type=\"button\"\n    class=\"collapse-btn\"\n    [attr.aria-pressed]=\"isCollapsed()\"\n    (click)=\"onToggle($event)\"\n    [attr.title]=\"isCollapsed() ? 'Expandir' : 'Colapsar'\"\n  >\n    <span class=\"chev\">{{ arrowGlyph() }}</span>\n  </button>\n\n  <!-- Template externo opcional -->\n  <ng-container\n    *ngIf=\"cardTemplate(); else defaultTpl\"\n    [ngTemplateOutlet]=\"cardTemplate()\"\n    [ngTemplateOutletContext]=\"{ $implicit: node() }\"\n  ></ng-container>\n\n  <!-- Template por defecto -->\n  <ng-template #defaultTpl>\n    <div class=\"card-body\">\n      <div class=\"card-row\">\n        <!-- Miniatura opcional -->\n        <img\n          *ngIf=\"imageSrc() as src\"\n          class=\"thumb\"\n          [class.shape-square]=\"view().imageShape === 'square'\"\n          [class.shape-rounded]=\"view().imageShape === 'rounded'\"\n          [class.shape-circle]=\"view().imageShape === 'circle'\"\n          [attr.width]=\"view().imageSizePx\"\n          [attr.height]=\"view().imageSizePx\"\n          [style.width.px]=\"view().imageSizePx\"\n          [style.height.px]=\"view().imageSizePx\"\n          [style.background]=\"view().imageBg ?? null\"\n          [style.border]=\"view().imageBorder ? '1px solid rgba(0,0,0,0.06)' : 'none'\"\n          [style.object-fit]=\"view().imageFit\"\n          [src]=\"src\"\n          [alt]=\"imageAlt()\"\n          loading=\"lazy\"\n          decoding=\"async\"\n          (error)=\"onImgError($event)\"\n        />\n\n        <div class=\"card-col\">\n          <div class=\"card-title\" *ngIf=\"hasComputedTitle()\">\n            {{ node()?.jsonMeta?.title }}\n          </div>\n\n          <!-- Vista previa de atributos -->\n          <div class=\"card-preview\" *ngIf=\"node()?.jsonMeta?.attributes as attrs\">\n            <div *ngFor=\"let kv of objToPairs(attrs)\" class=\"kv\">\n              <span class=\"k\">{{ displayKey(kv[0]) }}:</span>\n              <span\n                class=\"v\"\n                [class.v-true]=\"kv[1] === true\"\n                [class.v-false]=\"kv[1] === false\"\n                [class.v-null]=\"kv[1] === null\"\n                [class.nowrap]=\"isNoWrapKey(kv[0])\"\n                [attr.title]=\"valueTitle(kv[1])\"\n              >\n                {{ displayValue(kv[1]) }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Badges con conteos de arrays no escalares -->\n          <div class=\"array-badges\" *ngIf=\"node()?.jsonMeta?.arrayCounts as arrs\">\n            <ng-container *ngFor=\"let e of objToPairs(arrs)\">\n              <span class=\"arr-badge\">\n                {{ displayKey(e[0]) }}: {{ e[1] }} {{ e[1] === 1 ? \"item\" : \"items\" }}\n              </span>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".schema-card{border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 2px 8px #00000014;-webkit-user-select:none;user-select:none;box-sizing:border-box;word-break:normal;overflow-wrap:normal;overflow:hidden;transition:left .16s ease,top .16s ease,opacity .12s ease}.collapse-btn{position:absolute;top:6px;right:8px;width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.12);background:#f8fafc;cursor:pointer;display:grid;place-items:center;padding:0;line-height:1;z-index:2}.collapse-btn span{font-size:.5rem}.chev{display:inline-block;transition:transform .16s ease}.chev.collapsed{transform:rotate(180deg)}.card-body{padding:12px 20px}.card-row{display:flex;align-items:flex-start;gap:10px}.card-col{flex:1 1 auto;min-width:0}.thumb{flex:0 0 auto;display:block;object-fit:contain;background:transparent;border:1px solid rgba(0,0,0,.06)}.shape-square{border-radius:4px}.shape-rounded{border-radius:8px}.shape-circle{border-radius:999px}.card-title{font-weight:700;font-size:14px;margin-bottom:6px}.card-preview{font-size:12px;line-height:1.28}.kv{display:grid;grid-template-columns:max-content max-content;column-gap:10px;align-items:baseline;margin:3px 0;padding-right:8px}.k{opacity:.66;font-weight:600;font-size:12px}.v{font-size:10.75px;line-height:1.25;letter-spacing:.1px;padding-right:6px;display:inline-block}.v-true{color:#16a34a;font-weight:700}.v-false{color:#dc2626;font-weight:700}.v-null{color:#6b7280;font-weight:700}.array-badges{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}.arr-badge{font-size:10px;background:#eef2ff;color:#3730a3;padding:2px 6px;border-radius:999px}.nowrap{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important}.schema-card.accent-true{border-color:#16a34a;box-shadow:0 2px 10px #16a34a26}.schema-card.accent-false{border-color:#dc2626;box-shadow:0 2px 10px #dc262626}.schema-card.accent-null{border-color:#6b7280;box-shadow:0 2px 10px #6b72802e}.schema-card.accent-fill-true{background:#16a34a1a}.schema-card.accent-fill-false{background:#dc26261a}.schema-card.accent-fill-null{background:#6b72801f}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "schema-card", standalone: true, imports: [CommonModule, NgIf, NgTemplateOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"schema-card\"\n  [attr.data-node-id]=\"node()?.id ?? ''\"\n  [ngClass]=\"getAccentClasses()\"\n  [style.left.px]=\"node()?.x ?? 0\"\n  [style.top.px]=\"node()?.y ?? 0\"\n  [style.width.px]=\"node()?.width ?? view().defaultNodeW\"\n  [style.height.px]=\"node()?.height ?? view().defaultNodeH\"\n  [style.maxWidth.px]=\"view().maxCardWidth\"\n  [style.maxHeight.px]=\"view().maxCardHeight\"\n  (click)=\"onClick($event)\"\n  style=\"z-index: 1; position: absolute;\"\n>\n  <button\n    *ngIf=\"showCollapseControls() && hasChildren()\"\n    type=\"button\"\n    class=\"collapse-btn\"\n    [attr.aria-pressed]=\"isCollapsed()\"\n    (click)=\"onToggle($event)\"\n    [attr.title]=\"isCollapsed() ? 'Expandir' : 'Colapsar'\"\n  >\n    <span class=\"chev\">{{ arrowGlyph() }}</span>\n  </button>\n\n  <!-- Template externo opcional -->\n  <ng-container\n    *ngIf=\"cardTemplate(); else defaultTpl\"\n    [ngTemplateOutlet]=\"cardTemplate()\"\n    [ngTemplateOutletContext]=\"{ $implicit: node() }\"\n  ></ng-container>\n\n  <!-- Template por defecto -->\n  <ng-template #defaultTpl>\n    <div class=\"card-body\">\n      <div class=\"card-row\">\n        <!-- Miniatura opcional -->\n        <img\n          *ngIf=\"imageSrc() as src\"\n          class=\"thumb\"\n          [class.shape-square]=\"view().imageShape === 'square'\"\n          [class.shape-rounded]=\"view().imageShape === 'rounded'\"\n          [class.shape-circle]=\"view().imageShape === 'circle'\"\n          [attr.width]=\"view().imageSizePx\"\n          [attr.height]=\"view().imageSizePx\"\n          [style.width.px]=\"view().imageSizePx\"\n          [style.height.px]=\"view().imageSizePx\"\n          [style.background]=\"view().imageBg ?? null\"\n          [style.border]=\"view().imageBorder ? '1px solid rgba(0,0,0,0.06)' : 'none'\"\n          [style.object-fit]=\"view().imageFit\"\n          [src]=\"src\"\n          [alt]=\"imageAlt()\"\n          loading=\"lazy\"\n          decoding=\"async\"\n          (error)=\"onImgError($event)\"\n        />\n\n        <div class=\"card-col\">\n          <div class=\"card-title\" *ngIf=\"hasComputedTitle()\">\n            {{ node()?.jsonMeta?.title }}\n          </div>\n\n          <!-- Vista previa de atributos -->\n          <div class=\"card-preview\" *ngIf=\"node()?.jsonMeta?.attributes as attrs\">\n            <div *ngFor=\"let kv of objToPairs(attrs)\" class=\"kv\">\n              <span class=\"k\">{{ displayKey(kv[0]) }}:</span>\n              <span\n                class=\"v\"\n                [class.v-true]=\"kv[1] === true\"\n                [class.v-false]=\"kv[1] === false\"\n                [class.v-null]=\"kv[1] === null\"\n                [class.nowrap]=\"isNoWrapKey(kv[0])\"\n                [attr.title]=\"valueTitle(kv[1])\"\n              >\n                {{ displayValue(kv[1]) }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Badges con conteos de arrays no escalares -->\n          <div class=\"array-badges\" *ngIf=\"node()?.jsonMeta?.arrayCounts as arrs\">\n            <ng-container *ngFor=\"let e of objToPairs(arrs)\">\n              <span class=\"arr-badge\">\n                {{ displayKey(e[0]) }}: {{ e[1] }} {{ e[1] === 1 ? \"item\" : \"items\" }}\n              </span>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".schema-card{border-radius:12px;border:1px solid rgba(0,0,0,.08);background:#fff;box-shadow:0 2px 8px #00000014;-webkit-user-select:none;user-select:none;box-sizing:border-box;word-break:normal;overflow-wrap:normal;overflow:hidden;transition:left .16s ease,top .16s ease,opacity .12s ease}.collapse-btn{position:absolute;top:6px;right:8px;width:24px;height:24px;border-radius:6px;border:1px solid rgba(0,0,0,.12);background:#f8fafc;cursor:pointer;display:grid;place-items:center;padding:0;line-height:1;z-index:2}.collapse-btn span{font-size:.5rem}.chev{display:inline-block;transition:transform .16s ease}.chev.collapsed{transform:rotate(180deg)}.card-body{padding:12px 20px}.card-row{display:flex;align-items:flex-start;gap:10px}.card-col{flex:1 1 auto;min-width:0}.thumb{flex:0 0 auto;display:block;object-fit:contain;background:transparent;border:1px solid rgba(0,0,0,.06)}.shape-square{border-radius:4px}.shape-rounded{border-radius:8px}.shape-circle{border-radius:999px}.card-title{font-weight:700;font-size:14px;margin-bottom:6px}.card-preview{font-size:12px;line-height:1.28}.kv{display:grid;grid-template-columns:max-content max-content;column-gap:10px;align-items:baseline;margin:3px 0;padding-right:8px}.k{opacity:.66;font-weight:600;font-size:12px}.v{font-size:10.75px;line-height:1.25;letter-spacing:.1px;padding-right:6px;display:inline-block}.v-true{color:#16a34a;font-weight:700}.v-false{color:#dc2626;font-weight:700}.v-null{color:#6b7280;font-weight:700}.array-badges{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}.arr-badge{font-size:10px;background:#eef2ff;color:#3730a3;padding:2px 6px;border-radius:999px}.nowrap{white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important}.schema-card.accent-true{border-color:#16a34a;box-shadow:0 2px 10px #16a34a26}.schema-card.accent-false{border-color:#dc2626;box-shadow:0 2px 10px #dc262626}.schema-card.accent-null{border-color:#6b7280;box-shadow:0 2px 10px #6b72802e}.schema-card.accent-fill-true{background:#16a34a1a}.schema-card.accent-fill-false{background:#dc26261a}.schema-card.accent-fill-null{background:#6b72801f}\n"] }]
+        }], propDecorators: { nodeInput: [{
+                type: Input,
+                args: ["node"]
+            }], cardTemplateInput: [{
+                type: Input,
+                args: ["cardTemplate"]
+            }], settingsInput: [{
+                type: Input,
+                args: ["settings"]
+            }], hasChildrenInput: [{
+                type: Input,
+                args: ["hasChildren"]
+            }], showCollapseControlsInput: [{
+                type: Input,
+                args: ["showCollapseControls"]
+            }], isCollapsedInput: [{
+                type: Input,
+                args: ["isCollapsed"]
+            }], nodeClick: [{
+                type: Output
+            }], toggleRequest: [{
+                type: Output
+            }] } });
+
+// URL: projects/schema-ng16/src/lib/components/schema-links.component.ts
+class SchemaLinksComponent {
+    constructor() {
+        /* ============================ Inputs ============================ */
+        this._edges = signal([]);
+        this._settings = signal(DEFAULT_SETTINGS);
+        // Importante: públicos para el template (antes eran private)
+        this._width = signal(4000);
+        this._height = signal(2000);
+        /* ============================ Outputs =========================== */
+        this.linkClick = new EventEmitter();
+        /* ============================ View derivada ===================== */
+        this.view = computed(() => {
+            const s = this.settings();
+            const colors = s.colors ?? DEFAULT_SETTINGS.colors;
+            const layout = s.layout ?? DEFAULT_SETTINGS.layout;
+            return {
+                linkStroke: colors.linkStroke ?? DEFAULT_SETTINGS.colors.linkStroke,
+                linkStrokeWidth: colors.linkStrokeWidth ?? DEFAULT_SETTINGS.colors.linkStrokeWidth,
+                linkStyle: layout.linkStyle ?? DEFAULT_SETTINGS.layout.linkStyle,
+                curveTension: layout.curveTension ?? DEFAULT_SETTINGS.layout.curveTension,
+                straightThresholdDx: layout.straightThresholdDx ?? DEFAULT_SETTINGS.layout.straightThresholdDx,
+            };
+        });
+        /* ============================ Render helpers ==================== */
+        this.trackEdgeId = (_, e) => e.id;
+    }
+    set edgesInput(value) {
+        this._edges.set(Array.isArray(value) ? value : []);
+    }
+    edges() {
+        return this._edges();
+    }
+    set settingsInput(value) {
+        this._settings.set(value ?? DEFAULT_SETTINGS);
+    }
+    settings() {
+        return this._settings();
+    }
+    set width(value) {
+        this._width.set(typeof value === "number" && isFinite(value) ? value : 4000);
+    }
+    set height(value) {
+        this._height.set(typeof value === "number" && isFinite(value) ? value : 2000);
+    }
+    pathFor(e) {
+        const pts = e.points ?? [];
+        if (pts.length === 0)
+            return "";
+        const v = this.view();
+        const style = v.linkStyle;
+        if (style === "line") {
+            const a = pts[0];
+            const b = pts[pts.length - 1];
+            return `M ${a.x},${a.y} L ${b.x},${b.y}`;
+        }
+        if (style === "curve") {
+            const a = pts[0];
+            const b = pts[pts.length - 1];
+            const threshold = Number.isFinite(v.straightThresholdDx)
+                ? v.straightThresholdDx
+                : DEFAULT_SETTINGS.layout.straightThresholdDx;
+            const dxAbs = Math.abs(b.x - a.x);
+            if (dxAbs < (threshold ?? 0)) {
+                return `M ${a.x},${a.y} L ${b.x},${b.y}`;
+            }
+            const baseT = Number.isFinite(v.curveTension) ? v.curveTension : DEFAULT_SETTINGS.layout.curveTension;
+            const t = Math.max(20, Math.min(200, baseT ?? 30));
+            const dir = Math.sign(b.x - a.x) || 1;
+            const dy = b.y - a.y;
+            let c1x = a.x + dir * t;
+            let c1y = a.y;
+            let c2x = b.x - dir * t;
+            let c2y = b.y;
+            if (Math.abs(dy) < 1) {
+                const bow = Math.max(8, Math.min(96, t * 0.5));
+                c1y = a.y - bow;
+                c2y = b.y + bow;
+            }
+            return `M ${a.x},${a.y} C ${c1x},${c1y} ${c2x},${c2y} ${b.x},${b.y}`;
+        }
+        if (pts.length === 1)
+            return `M ${pts[0].x},${pts[0].y}`;
+        const first = pts[0];
+        let d = `M ${first.x},${first.y}`;
+        for (let i = 1; i < pts.length; i++)
+            d += ` L ${pts[i].x},${pts[i].y}`;
+        return d;
+    }
+    /* ============================ Eventos ========================== */
+    onLinkClick(e, ev) {
+        ev.stopPropagation();
+        this.linkClick.emit(e);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SchemaLinksComponent, isStandalone: true, selector: "schema-links", inputs: { edgesInput: ["edges", "edgesInput"], settingsInput: ["settings", "settingsInput"], width: "width", height: "height" }, outputs: { linkClick: "linkClick" }, ngImport: i0, template: "<svg class=\"schema-links\" [attr.width]=\"_width()\" [attr.height]=\"_height()\">\n  <g>\n    <path\n      *ngFor=\"let e of edges(); trackBy: trackEdgeId\"\n      [attr.d]=\"pathFor(e)\"\n      [attr.stroke]=\"view().linkStroke\"\n      [attr.stroke-width]=\"view().linkStrokeWidth\"\n      fill=\"none\"\n      (click)=\"onLinkClick(e, $event)\"\n    />\n  </g>\n</svg>\n", styles: [".schema-links{position:absolute;left:0;top:0;pointer-events:auto;overflow:visible;z-index:0}path{cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaLinksComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "schema-links", standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg class=\"schema-links\" [attr.width]=\"_width()\" [attr.height]=\"_height()\">\n  <g>\n    <path\n      *ngFor=\"let e of edges(); trackBy: trackEdgeId\"\n      [attr.d]=\"pathFor(e)\"\n      [attr.stroke]=\"view().linkStroke\"\n      [attr.stroke-width]=\"view().linkStrokeWidth\"\n      fill=\"none\"\n      (click)=\"onLinkClick(e, $event)\"\n    />\n  </g>\n</svg>\n", styles: [".schema-links{position:absolute;left:0;top:0;pointer-events:auto;overflow:visible;z-index:0}path{cursor:pointer}\n"] }]
+        }], propDecorators: { edgesInput: [{
+                type: Input,
+                args: ["edges"]
+            }], settingsInput: [{
+                type: Input,
+                args: ["settings"]
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], linkClick: [{
+                type: Output
+            }] } });
+
+/**
+ * Servicio: JsonAdapterService
+ * Convierte un JSON arbitrario en un grafo normalizado (nodes + edges).
+ * - Aplica reglas de extracción (titleKeyPriority, hiddenKeysGlobal, etc.).
+ * - Conservar rutas únicas (`jsonPath`) como IDs de nodos.
+ * - Incluye metadatos útiles (childOrder, arrayCounts, atributos).
+ * - No calcula layout.
+ */
+class JsonAdapterService {
+    /**
+     * Normaliza un JSON a grafo de nodos y aristas.
+     * @param input Objeto JSON arbitrario.
+     * @param opts  Configuración parcial (`SchemaSettings`).
+     */
+    normalize(input, opts = {}) {
+        // Merge por secciones
+        const settings = {
+            colors: { ...DEFAULT_SETTINGS.colors, ...(opts.colors ?? {}) },
+            layout: { ...DEFAULT_SETTINGS.layout, ...(opts.layout ?? {}) },
+            dataView: { ...DEFAULT_SETTINGS.dataView, ...(opts.dataView ?? {}) },
+            messages: { ...DEFAULT_SETTINGS.messages, ...(opts.messages ?? {}) },
+            viewport: { ...DEFAULT_SETTINGS.viewport, ...(opts.viewport ?? {}) },
+        };
+        // Accesos rápidos
+        const dv = settings.dataView;
+        const titleKeyPriority = dv.titleKeyPriority ?? [];
+        const hiddenKeysGlobal = dv.hiddenKeysGlobal ?? [];
+        const treatScalarArraysAsAttribute = dv.treatScalarArraysAsAttribute ?? false;
+        const previewMaxKeys = dv.previewMaxKeys ?? 999;
+        const defaultNodeSize = dv.defaultNodeSize ?? { width: 256, height: 64 };
+        const maxDepth = dv.maxDepth ?? null;
+        // Claves a ocultar explícitamente en preview
+        const imageKey = dv.showImage && dv.showImage.trim() !== "" ? dv.showImage : null;
+        const accentKey = settings.colors.accentByKey && settings.colors.accentByKey.trim() !== "" ? settings.colors.accentByKey : null;
+        const nodes = [];
+        const edges = [];
+        // Helpers
+        const isScalar = (v) => v === null || ["string", "number", "boolean"].includes(typeof v);
+        /** Determina si un array contiene solo escalares. */
+        const arrayIsScalar = (arr) => Array.isArray(arr) && arr.length > 0 && arr.every(isScalar);
+        /**
+         * Escoge un título a partir de prioridades de clave.
+         * Retorna también la clave usada para no duplicar en atributos.
+         */ const pickTitle = (obj, priorities) => {
+            if (Array.isArray(priorities) && priorities.length > 0) {
+                for (const k of priorities) {
+                    const v = obj?.[k];
+                    if (v != null && String(v).trim() !== "") {
+                        return { title: String(v), usedKey: k };
+                    }
+                }
+            }
+            return { title: "", usedKey: undefined };
+        };
+        /**
+         * Construye un subconjunto de atributos (clave → valor) para vista previa.
+         * - Excluye claves ocultas o la usada como título.
+         * - Incluye escalares y arrays escalares (si está habilitado).
+         */
+        const buildPreviewAttributes = (obj, usedKey) => {
+            const toHide = new Set(hiddenKeysGlobal);
+            if (usedKey)
+                toHide.add(usedKey);
+            if (imageKey)
+                toHide.add(imageKey);
+            if (accentKey)
+                toHide.add(accentKey);
+            const entries = [];
+            for (const [k, v] of Object.entries(obj ?? {})) {
+                if (toHide.has(k))
+                    continue;
+                if (isScalar(v)) {
+                    entries.push([k, v]);
+                }
+                else if (Array.isArray(v) && treatScalarArraysAsAttribute && arrayIsScalar(v)) {
+                    entries.push([k, v.join(", ")]);
+                }
+            }
+            return Object.fromEntries(entries.slice(0, previewMaxKeys));
+        };
+        /** Determina si un objeto puede representarse como entidad (nodo). */
+        const isEntity = (obj) => {
+            if (!obj || typeof obj !== "object" || Array.isArray(obj))
+                return false;
+            return Object.values(obj).some(isScalar);
+        };
+        /** Retorna un mapa clave → longitud de arrays no escalares. */
+        const arrayCountsOf = (obj) => {
+            const out = {};
+            for (const [k, v] of Object.entries(obj)) {
+                if (Array.isArray(v) && !(v.length > 0 && v.every(isScalar))) {
+                    out[k] = v.length;
+                }
+            }
+            return out;
+        };
+        // Contadores auxiliares
+        const childCounter = new Map();
+        const childOrderByParent = new Map();
+        /**
+         * Crea un nodo y opcionalmente una arista hacia su padre.
+         */
+        const addNode = (jsonPath, obj, parentId) => {
+            const { title, usedKey } = pickTitle(obj, titleKeyPriority);
+            const attrs = buildPreviewAttributes(obj, usedKey);
+            // Orden relativo entre hermanos
+            let childOrder = undefined;
+            if (parentId) {
+                const idx = childOrderByParent.get(parentId) ?? 0;
+                childOrder = idx;
+                childOrderByParent.set(parentId, idx + 1);
+            }
+            const node = {
+                id: jsonPath,
+                jsonPath,
+                label: title,
+                data: obj,
+                jsonMeta: {
+                    title,
+                    titleKeyUsed: usedKey,
+                    attributes: attrs,
+                    childrenCount: 0,
+                    arrayCounts: arrayCountsOf(obj),
+                    childOrder,
+                },
+                width: defaultNodeSize.width,
+                height: defaultNodeSize.height,
+            };
+            nodes.push(node);
+            if (parentId) {
+                edges.push({
+                    id: `${parentId}__${node.id}`,
+                    source: parentId,
+                    target: node.id,
+                });
+            }
+            return node.id;
+        };
+        /**
+         * Recorrido recursivo del JSON.
+         * - Usa `jsonPath` para mantener rutas únicas.
+         * - Crea nodos solo cuando `isEntity(obj)` es verdadero.
+         */
+        const traverse = (val, path, parentId, depth = 0) => {
+            if (maxDepth !== null && depth > maxDepth)
+                return;
+            if (Array.isArray(val)) {
+                val.forEach((c, i) => traverse(c, `${path}[${i}]`, parentId, depth + 1));
+                return;
+            }
+            if (val && typeof val === "object") {
+                const obj = val;
+                let myId = parentId;
+                if (isEntity(obj)) {
+                    myId = addNode(path, obj, parentId);
+                    if (parentId)
+                        childCounter.set(parentId, (childCounter.get(parentId) ?? 0) + 1);
+                }
+                for (const [k, v] of Object.entries(obj)) {
+                    if (isScalar(v))
+                        continue;
+                    if (Array.isArray(v)) {
+                        const scalarArr = v.length > 0 && v.every(isScalar);
+                        if (scalarArr && treatScalarArraysAsAttribute)
+                            continue;
+                        v.forEach((c, i) => traverse(c, `${path}.${k}[${i}]`, myId, depth + 1));
+                    }
+                    else {
+                        traverse(v, `${path}.${k}`, myId, depth + 1);
+                    }
+                }
+            }
+        };
+        traverse(input, "$", undefined, 0);
+        // Completar metadatos (childrenCount)
+        nodes.forEach((n) => {
+            n.jsonMeta = n.jsonMeta ?? {};
+            n.jsonMeta.childrenCount = childCounter.get(n.id) ?? 0;
+        });
+        return { nodes, edges, meta: {} };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JsonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JsonAdapterService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JsonAdapterService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+// URL: projects/schema-ng16/src/lib/services/json-adapter.service.ts
+
+/**
+ * Servicio: SchemaLayoutService
+ * ----------------------------------------------------------------------------
+ * Calcula posiciones (x,y) para un grafo normalizado (nodos/aristas) usando
+ * un layout jerárquico tipo "tidy tree" en dos variantes:
+ *  - layoutDirection = "RIGHT": el árbol crece de izquierda → derecha.
+ *  - layoutDirection = "DOWN" : el árbol crece de arriba → abajo.
+ *
+ * Características:
+ *  - Respeta el orden de los hijos según `jsonMeta.childOrder` (estable, derivado del JSON).
+ *  - Soporta alineación del padre con respecto a los hijos: "firstChild" o "center".
+ *  - Genera puntos para aristas compatibles con estilos: "orthogonal", "curve" y "line".
+ *  - Mantiene "pins" en `meta.pinY` o `meta.pinX` (pre-alistado por el componente) para anclajes.
+ */
+/**
+ * Servicio de layout tipo “tidy tree” para RIGHT/DOWN.
+ * No gestiona pan/zoom ni overlays; solo posiciones y trayectorias.
+ */
+class SchemaLayoutService {
+    /**
+     * Aplica layout al grafo.
+     * @param g         Grafo normalizado (nodos/aristas).
+     * @param settings  Configuración parcial. Se fusiona con DEFAULT_SETTINGS.
+     * @returns         Grafo con nodos posicionados y aristas con `points`.
+     */
+    async layout(g, settings = DEFAULT_SETTINGS) {
+        const s = this.mergeSettings(settings);
+        // Dirección principal y opciones de alineación/estilo
+        const dir = s.layout?.layoutDirection ?? DEFAULT_SETTINGS.layout.layoutDirection;
+        const alignFirstChild = (s.layout?.layoutAlign ?? DEFAULT_SETTINGS.layout.layoutAlign) === "firstChild";
+        const linkStyle = s.layout?.linkStyle ?? DEFAULT_SETTINGS.layout.linkStyle;
+        // Gaps (separaciones) con defaults seguros
+        const GAP_X = s.layout?.columnGapPx ?? DEFAULT_SETTINGS.layout.columnGapPx ?? 0;
+        const GAP_Y = s.layout?.rowGapPx ?? DEFAULT_SETTINGS.layout.rowGapPx ?? 0;
+        // Índices de consulta rápida
+        const nodesById = new Map(g.nodes.map((n) => [n.id, n]));
+        const childrenById = new Map();
+        const parentsById = new Map();
+        for (const n of g.nodes) {
+            childrenById.set(n.id, []);
+            parentsById.set(n.id, []);
+        }
+        for (const e of g.edges) {
+            if (childrenById.has(e.source))
+                childrenById.get(e.source).push(e.target);
+            if (parentsById.has(e.target))
+                parentsById.get(e.target).push(e.source);
+        }
+        // Orden estable por childOrder (si empatan, ordena por id)
+        for (const [pid, arr] of childrenById) {
+            arr.sort((aId, bId) => {
+                const a = nodesById.get(aId);
+                const b = nodesById.get(bId);
+                const ao = a?.jsonMeta?.childOrder ?? 0;
+                const bo = b?.jsonMeta?.childOrder ?? 0;
+                return ao === bo ? (a?.id ?? "").localeCompare(b?.id ?? "") : ao - bo;
+            });
+        }
+        // Raíces (nodos sin padres)
+        const roots = g.nodes.filter((n) => (parentsById.get(n.id)?.length ?? 0) === 0);
+        // Profundidad por nodo (BFS)
+        const depthById = new Map();
+        const q = [...roots];
+        for (const r of roots)
+            depthById.set(r.id, 0);
+        while (q.length) {
+            const n = q.shift();
+            const d = depthById.get(n.id) ?? 0;
+            for (const cid of childrenById.get(n.id) ?? []) {
+                if (!depthById.has(cid)) {
+                    depthById.set(cid, d + 1);
+                    const cn = nodesById.get(cid);
+                    if (cn)
+                        q.push(cn);
+                }
+            }
+        }
+        // Helpers de tamaño (con fallback a defaults)
+        const getW = (n) => {
+            const fallback = DEFAULT_SETTINGS.dataView.defaultNodeSize?.width ?? 1;
+            const w = n.width ?? fallback;
+            return Number.isFinite(w) && w > 0 ? w : fallback;
+        };
+        const getH = (n) => {
+            const fallback = DEFAULT_SETTINGS.dataView.defaultNodeSize?.height ?? 1;
+            const h = n.height ?? fallback;
+            return Number.isFinite(h) && h > 0 ? h : fallback;
+        };
+        // Tamaño acumulado de cada subárbol en el eje secundario (para apilado)
+        const subtreeSize = new Map();
+        const measureSubtree = (id) => {
+            const node = nodesById.get(id);
+            const kids = childrenById.get(id) ?? [];
+            if (!node) {
+                subtreeSize.set(id, 0);
+                return 0;
+            }
+            if (kids.length === 0) {
+                const leafSize = dir === "RIGHT" ? getH(node) : getW(node);
+                subtreeSize.set(id, leafSize);
+                return leafSize;
+            }
+            let sum = 0;
+            for (let i = 0; i < kids.length; i++) {
+                sum += measureSubtree(kids[i]);
+                if (i < kids.length - 1)
+                    sum += GAP_Y; // espacio entre hermanos
+            }
+            subtreeSize.set(id, sum);
+            return sum;
+        };
+        for (const r of roots)
+            measureSubtree(r.id);
+        // Offset acumulado por profundidad en el eje principal
+        const depths = Array.from(depthById.values());
+        const maxDepth = depths.length ? Math.max(0, ...depths) : 0;
+        const sizeByDepth = new Array(maxDepth + 1).fill(0);
+        for (let d = 0; d <= maxDepth; d++) {
+            const nodesAtD = g.nodes.filter((n) => (depthById.get(n.id) ?? 0) === d);
+            sizeByDepth[d] = dir === "RIGHT" ? Math.max(1, ...nodesAtD.map(getW), 1) : Math.max(1, ...nodesAtD.map(getH), 1);
+        }
+        const mainOffset = new Array(maxDepth + 1).fill(0);
+        for (let d = 1; d <= maxDepth; d++) {
+            mainOffset[d] = mainOffset[d - 1] + sizeByDepth[d - 1] + GAP_X;
+        }
+        // Preparación de "pin" en meta (mapa de centros por eje secundario)
+        const meta = g.meta ?? {};
+        const pinKey = dir === "RIGHT" ? "pinY" : "pinX";
+        if (!meta[pinKey])
+            meta[pinKey] = {};
+        const pin = meta[pinKey] ?? {};
+        /**
+         * Coloca recursivamente un subárbol:
+         *  - depth: profundidad actual
+         *  - start: posición inicial en el eje secundario para apilar hijos
+         * Retorna el tamaño del subárbol en el eje secundario.
+         */
+        const placeSubtree = (id, depth, start) => {
+            const node = nodesById.get(id);
+            const kids = childrenById.get(id) ?? [];
+            const mySize = subtreeSize.get(id) ?? 0;
+            const mainPos = mainOffset[depth] ?? 0;
+            if (!node)
+                return mySize;
+            // Hoja: centra sobre el rango [start, start+mySize]
+            if (kids.length === 0) {
+                const centerSec = start + mySize / 2;
+                if (dir === "RIGHT") {
+                    node.x = Math.round(mainPos);
+                    node.y = Math.round(centerSec - getH(node) / 2);
+                    pin[node.id] = Math.round((node.y ?? 0) + getH(node) / 2);
+                }
+                else {
+                    node.y = Math.round(mainPos);
+                    node.x = Math.round(centerSec - getW(node) / 2);
+                    pin[node.id] = Math.round((node.x ?? 0) + getW(node) / 2);
+                }
+                return mySize;
+            }
+            // Nodo con hijos: posiciona hijos apilados y centra el padre
+            let cursor = start;
+            const childCenters = [];
+            for (let i = 0; i < kids.length; i++) {
+                const cid = kids[i];
+                const cNode = nodesById.get(cid);
+                const cSize = subtreeSize.get(cid) ?? (cNode ? (dir === "RIGHT" ? getH(cNode) : getW(cNode)) : 0);
+                placeSubtree(cid, depth + 1, cursor);
+                if (cNode) {
+                    const cCenter = dir === "RIGHT" ? (cNode.y ?? 0) + getH(cNode) / 2 : (cNode.x ?? 0) + getW(cNode) / 2;
+                    childCenters.push(cCenter);
+                }
+                cursor += cSize + (i < kids.length - 1 ? GAP_Y : 0);
+            }
+            // Objetivo de centrado del padre
+            const targetCenter = alignFirstChild || childCenters.length === 0
+                ? (childCenters[0] ?? 0)
+                : childCenters.reduce((a, b) => a + b, 0) / Math.max(1, childCenters.length);
+            if (dir === "RIGHT") {
+                node.x = Math.round(mainPos);
+                node.y = Math.round(targetCenter - getH(node) / 2);
+                pin[node.id] = Math.round(targetCenter);
+            }
+            else {
+                node.y = Math.round(mainPos);
+                node.x = Math.round(targetCenter - getW(node) / 2);
+                pin[node.id] = Math.round(targetCenter);
+            }
+            return mySize;
+        };
+        // Coloca cada raíz con un margen superior/izquierdo inicial
+        let globalCursor = 40;
+        for (let i = 0; i < roots.length; i++) {
+            const r = roots[i];
+            const rSize = subtreeSize.get(r.id) ?? (dir === "RIGHT" ? getH(r) : getW(r));
+            placeSubtree(r.id, 0, globalCursor);
+            globalCursor += rSize + (i < roots.length - 1 ? (s.layout.rowGapPx ?? 0) : 0);
+        }
+        // Generación de puntos para aristas en función del estilo
+        const edges = g.edges.map((e) => {
+            const a = nodesById.get(e.source);
+            const b = nodesById.get(e.target);
+            if (!a || !b)
+                return { ...e, points: [] };
+            if (dir === "RIGHT") {
+                const ax = (a.x ?? 0) + getW(a);
+                const ay = (a.y ?? 0) + Math.round(getH(a) / 2);
+                const bx = b.x ?? 0;
+                const by = (b.y ?? 0) + Math.round(getH(b) / 2);
+                if (linkStyle === "orthogonal") {
+                    const midX = Math.round((ax + bx) / 2);
+                    return {
+                        ...e,
+                        points: [
+                            { x: ax, y: ay },
+                            { x: midX, y: ay },
+                            { x: midX, y: by },
+                            { x: bx, y: by },
+                        ],
+                    };
+                }
+                // curve/line: el componente define la forma final (curva o línea)
+                return {
+                    ...e,
+                    points: [
+                        { x: ax, y: ay },
+                        { x: bx, y: by },
+                    ],
+                };
+            }
+            else {
+                const ax = (a.x ?? 0) + Math.round(getW(a) / 2);
+                const ay = (a.y ?? 0) + getH(a);
+                const bx = (b.x ?? 0) + Math.round(getW(b) / 2);
+                const by = b.y ?? 0;
+                if (linkStyle === "orthogonal") {
+                    const midY = Math.round((ay + by) / 2);
+                    return {
+                        ...e,
+                        points: [
+                            { x: ax, y: ay },
+                            { x: ax, y: midY },
+                            { x: bx, y: midY },
+                            { x: bx, y: by },
+                        ],
+                    };
+                }
+                return {
+                    ...e,
+                    points: [
+                        { x: ax, y: ay },
+                        { x: bx, y: by },
+                    ],
+                };
+            }
+        });
+        // Retorna copias superficiales (no muta el original `g`)
+        return { nodes: g.nodes.map((n) => ({ ...n })), edges, meta: { ...(g.meta ?? {}) } };
+    }
+    /**
+     * Fusiona settings parciales con DEFAULT_SETTINGS, sección por sección.
+     */
+    mergeSettings(s) {
+        return {
+            colors: { ...DEFAULT_SETTINGS.colors, ...(s.colors ?? {}) },
+            layout: { ...DEFAULT_SETTINGS.layout, ...(s.layout ?? {}) },
+            dataView: { ...DEFAULT_SETTINGS.dataView, ...(s.dataView ?? {}) },
+            messages: { ...DEFAULT_SETTINGS.messages, ...(s.messages ?? {}) },
+            viewport: { ...DEFAULT_SETTINGS.viewport, ...(s.viewport ?? {}) },
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaLayoutService, providedIn: "root" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaLayoutService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: "root" }]
+        }] });
+
+// URL: projects/schema-ng16/src/lib/components/schema.component.ts
+class SchemaComponent {
+    set dataInput(v) {
+        this._data.set(v);
+    }
+    data() {
+        return this._data();
+    }
+    set settingsInput(v) {
+        this._settings.set(v ?? DEFAULT_SETTINGS);
+    }
+    settings() {
+        return this._settings();
+    }
+    set cardTemplateInput(tpl) {
+        this._cardTemplate.set(tpl ?? null);
+    }
+    cardTemplate() {
+        return this._cardTemplate();
+    }
+    set isLoadingInput(v) {
+        this._isLoading.set(!!v);
+    }
+    isLoading() {
+        return this._isLoading();
+    }
+    set isErrorInput(v) {
+        this._isError.set(!!v);
+    }
+    isError() {
+        return this._isError();
+    }
+    set emptyMessageInput(v) {
+        this._emptyMessage.set(typeof v === "string" ? v : "No hay datos para mostrar");
+    }
+    emptyMessage() {
+        return this._emptyMessage();
+    }
+    set loadingMessageInput(v) {
+        this._loadingMessage.set(typeof v === "string" ? v : "Cargando…");
+    }
+    loadingMessage() {
+        return this._loadingMessage();
+    }
+    set errorMessageInput(v) {
+        this._errorMessage.set(typeof v === "string" ? v : "Error al cargar el esquema");
+    }
+    errorMessage() {
+        return this._errorMessage();
+    }
+    constructor(adapter, layoutService) {
+        this.adapter = adapter;
+        this.layoutService = layoutService;
+        // ===== Inputs (Angular 16 con alias, alimentan señales internas) =====
+        this._data = signal(null);
+        this._settings = signal(DEFAULT_SETTINGS);
+        this._cardTemplate = signal(null);
+        // Overlays (mantienen compatibilidad con propiedades existentes)
+        this._isLoading = signal(false);
+        this._isError = signal(false);
+        this._emptyMessage = signal("No hay datos para mostrar");
+        this._loadingMessage = signal("Cargando…");
+        this._errorMessage = signal("Error al cargar el esquema");
+        // Viewport (no son inputs; se derivan de settings)
+        this.viewportHeight = signal(800);
+        this.minViewportHeight = signal(480);
+        this.showToolbar = signal(true);
+        // ===== Outputs =====
+        this.nodeClick = new EventEmitter();
+        this.linkClick = new EventEmitter();
+        // ===== Estado de grafo =====
+        this.fullGraph = signal({ nodes: [], edges: [] });
+        this.graph = signal({ nodes: [], edges: [] });
+        this.nodes = computed(() => this.graph().nodes);
+        this.edges = computed(() => this.graph().edges);
+        // ===== Pan/zoom =====
+        this.scale = signal(1);
+        this.minScale = signal(0.2);
+        this.maxScale = signal(3);
+        this.tx = signal(0);
+        this.ty = signal(0);
+        this.dragging = false;
+        this.lastX = 0;
+        this.lastY = 0;
+        this.lastViewport = null;
+        /** Último punto de interacción sobre la stage (coordenadas de pantalla relativas al root). */
+        this.lastPointerScreen = null;
+        this.wheelRaf = null;
+        this.pendingWheel = null;
+        this.transform = computed(() => `translate(${this.tx()}px, ${this.ty()}px) scale(${this.scale()})`);
+        this.virtualWidth = 12000;
+        this.virtualHeight = 6000;
+        // ===== Toolbar overrides =====
+        this.opt_linkStyle = signal("orthogonal");
+        this.opt_layoutAlign = signal("firstChild");
+        this.opt_layoutDirection = signal("RIGHT");
+        // ===== Mensajes derivados (prioriza settings.messages si están definidos) =====
+        this.isLoadingView = computed(() => this.settings().messages?.isLoading ?? this.isLoading());
+        this.isErrorView = computed(() => this.settings().messages?.isError ?? this.isError());
+        this.emptyMessageView = computed(() => this.settings().messages?.emptyMessage ?? this.emptyMessage());
+        this.loadingMessageView = computed(() => this.settings().messages?.loadingMessage ?? this.loadingMessage());
+        this.errorMessageView = computed(() => this.settings().messages?.errorMessage ?? this.errorMessage());
+        // ===== Collapse/expand =====
+        this.childrenById = new Map();
+        this.parentsById = new Map();
+        this.collapsed = new Set();
+        this.measureIdsToCheck = null;
+        this.hasComputedOnce = false;
+        this.enableCollapse = computed(() => {
+            const b = this.baseSettings();
+            return b.dataView?.enableCollapse ?? DEFAULT_SETTINGS.dataView.enableCollapse;
+        });
+        // ===== Toolbar controls visibility =====
+        this.toolbarShowLinkStyle = computed(() => {
+            const b = this.baseSettings();
+            return b.viewport?.toolbarControls?.showLinkStyle ?? true;
+        });
+        this.toolbarShowLayoutAlign = computed(() => {
+            const b = this.baseSettings();
+            return b.viewport?.toolbarControls?.showLayoutAlign ?? true;
+        });
+        this.toolbarShowLayoutDirection = computed(() => {
+            const b = this.baseSettings();
+            return b.viewport?.toolbarControls?.showLayoutDirection ?? true;
+        });
+        // ===== Settings efectivos =====
+        this.baseSettings = computed(() => {
+            const s = this.settings() ?? {};
+            return {
+                messages: { ...DEFAULT_SETTINGS.messages, ...s.messages },
+                viewport: { ...DEFAULT_SETTINGS.viewport, ...s.viewport },
+                colors: { ...DEFAULT_SETTINGS.colors, ...s.colors },
+                layout: { ...DEFAULT_SETTINGS.layout, ...s.layout },
+                dataView: { ...DEFAULT_SETTINGS.dataView, ...s.dataView },
+            };
+        });
+        this.effectiveSettings = computed(() => {
+            const b = this.baseSettings();
+            return {
+                ...b,
+                layout: {
+                    ...b.layout,
+                    linkStyle: this.opt_linkStyle(),
+                    layoutAlign: this.opt_layoutAlign(),
+                    layoutDirection: this.opt_layoutDirection(),
+                },
+            };
+        });
+        /** Devuelve si el nodo tiene hijos (para pintar botón de colapso). */
+        this.hasChildren = (id) => (this.childrenById.get(id)?.length ?? 0) > 0;
+        /** Devuelve si el nodo está colapsado (estado visual en la card). */
+        this.isNodeCollapsed = (id) => this.collapsed.has(id);
+        this.trackByNodeId = (_, n) => n?.id;
+    }
+    recomputeFromSettings() {
+        const b = this.baseSettings();
+        this.viewportHeight.set(b.viewport?.height ?? DEFAULT_SETTINGS.viewport.height);
+        this.minViewportHeight.set(b.viewport?.minHeight ?? DEFAULT_SETTINGS.viewport.minHeight);
+        this.showToolbar.set(b.viewport?.showToolbar ?? DEFAULT_SETTINGS.viewport.showToolbar);
+        this.opt_linkStyle.set((b.layout?.linkStyle ?? DEFAULT_SETTINGS.layout.linkStyle));
+        this.opt_layoutAlign.set((b.layout?.layoutAlign ?? DEFAULT_SETTINGS.layout.layoutAlign));
+        this.opt_layoutDirection.set((b.layout?.layoutDirection ?? DEFAULT_SETTINGS.layout.layoutDirection));
+    }
+    ngAfterViewInit() {
+        this.recomputeFromSettings();
+        const rootEl = this.rootRef?.nativeElement;
+        if (rootEl && "ResizeObserver" in window) {
+            const r0 = rootEl.getBoundingClientRect();
+            this.lastViewport = { w: r0.width, h: r0.height };
+            this.resizeObs = new ResizeObserver(() => {
+                const rect = rootEl.getBoundingClientRect();
+                this.preserveCenterOnResize(rect.width, rect.height);
+            });
+            this.resizeObs.observe(rootEl);
+        }
+        this.compute();
+    }
+    ngOnChanges(_) {
+        this.recomputeFromSettings();
+        this.compute();
+    }
+    ngOnDestroy() {
+        if (this.resizeObs) {
+            try {
+                this.resizeObs.disconnect();
+            }
+            catch { }
+        }
+    }
+    // ===== Pipeline principal =====
+    async compute() {
+        if (this.isLoadingView())
+            return;
+        if (this.hasComputedOnce && this.data() === this.lastDataRef && this.settings() === this.lastSettingsRef) {
+            return;
+        }
+        const s = this.effectiveSettings();
+        const normalized = this.adapter.normalize(this.data(), s);
+        this.ensurePinMeta(normalized, s);
+        this.fullGraph.set(this.cloneGraph(normalized));
+        this.buildIndices();
+        if (!this.enableCollapse())
+            this.collapsed.clear();
+        const visible = this.buildVisibleGraphFromCollapsed();
+        let laid = await this.layoutService.layout(visible, s);
+        this.graph.set(this.cloneGraph(laid));
+        if (s.dataView?.autoResizeCards ?? DEFAULT_SETTINGS.dataView.autoResizeCards) {
+            const maxPasses = 6;
+            this.measureIdsToCheck = null; // primera pasada: medir todo
+            for (let pass = 1; pass <= maxPasses; pass++) {
+                await this.nextFrame();
+                const changed = this.measureAndApply(pass);
+                if (!changed)
+                    break;
+                laid = await this.layoutService.layout(this.graph(), s);
+                this.graph.set(this.cloneGraph(laid));
+            }
+        }
+        this.updateVirtualSizeFromGraph(laid);
+        this.fitToViewByBounds(); // asegura minScale y encuadre base
+        this.centerOnFirstNodeOrFit(); // centra como doble clic
+        this.lastDataRef = this.data();
+        this.lastSettingsRef = this.settings();
+        this.hasComputedOnce = true;
+    }
+    async relayoutVisible(anchorId, anchorScreen) {
+        const s = this.effectiveSettings();
+        const visible = this.buildVisibleGraphFromCollapsed();
+        let laid = await this.layoutService.layout(visible, s);
+        this.graph.set(this.cloneGraph(laid));
+        if (s.dataView?.autoResizeCards ?? DEFAULT_SETTINGS.dataView.autoResizeCards) {
+            const maxPasses = 4;
+            this.measureIdsToCheck = null; // primera pasada: medir todo
+            for (let pass = 1; pass <= maxPasses; pass++) {
+                await this.nextFrame();
+                const changed = this.measureAndApply(pass);
+                if (!changed)
+                    break;
+                laid = await this.layoutService.layout(this.graph(), s);
+                this.graph.set(this.cloneGraph(laid));
+            }
+        }
+        this.updateVirtualSizeFromGraph(laid);
+        await this.animateToGraph(laid, 260, anchorId, anchorScreen);
+    }
+    async onCardToggle(n) {
+        if (!this.enableCollapse() || !n?.id)
+            return;
+        const anchorBefore = this.getNodeScreenCenter(n);
+        if (this.collapsed.has(n.id))
+            this.collapsed.delete(n.id);
+        else
+            this.collapsed.add(n.id);
+        await this.relayoutVisible(n.id, anchorBefore);
+    }
+    // --- Animación de transición entre grafos (requerido por relayoutVisible) ---
+    async animateToGraph(target, durationMs = 260, anchorId, anchorScreen) {
+        const start = this.cloneGraph(this.graph());
+        const startNodeById = new Map(start.nodes.map((n) => [n.id, n]));
+        const startEdgeById = new Map(start.edges.map((e) => [e.id, e]));
+        const lerp = (a, b, t) => a + (b - a) * t;
+        const easeInOut = (t) => (t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2);
+        const alignPoints = (a = [], b = []) => {
+            const aa = a.length ? [...a] : [];
+            const bb = b.length ? [...b] : [];
+            const len = Math.max(aa.length, bb.length, 2);
+            while (aa.length < len)
+                aa.push(aa[aa.length - 1] ?? { x: 0, y: 0 });
+            while (bb.length < len)
+                bb.push(bb[bb.length - 1] ?? { x: 0, y: 0 });
+            return { aa, bb, len };
+        };
+        const t0 = performance.now();
+        const run = (resolve) => {
+            const now = performance.now();
+            const raw = Math.min(1, (now - t0) / Math.max(1, durationMs));
+            const t = easeInOut(raw);
+            const frame = { nodes: [], edges: [], meta: { ...(target.meta ?? {}) } };
+            for (const endNode of target.nodes) {
+                const sNode = startNodeById.get(endNode.id) ?? endNode;
+                const xn = lerp(sNode.x ?? 0, endNode.x ?? 0, t);
+                const yn = lerp(sNode.y ?? 0, endNode.y ?? 0, t);
+                const wn = lerp(sNode.width ?? 0, endNode.width ?? 0, t);
+                const hn = lerp(sNode.height ?? 0, endNode.height ?? 0, t);
+                frame.nodes.push({
+                    ...endNode,
+                    x: Math.round(xn),
+                    y: Math.round(yn),
+                    width: Math.round(wn),
+                    height: Math.round(hn),
+                });
+            }
+            for (const endEdge of target.edges) {
+                const sEdge = startEdgeById.get(endEdge.id) ?? endEdge;
+                const { aa, bb, len } = alignPoints(sEdge.points, endEdge.points);
+                const pts = new Array(len)
+                    .fill(0)
+                    .map((_, i) => ({ x: lerp(aa[i].x, bb[i].x, t), y: lerp(aa[i].y, bb[i].y, t) }));
+                frame.edges.push({ ...endEdge, points: pts });
+            }
+            this.graph.set(frame);
+            if (anchorId && anchorScreen)
+                this.applyAnchorAfterLayout(anchorId, anchorScreen);
+            if (raw < 1) {
+                requestAnimationFrame(() => run(resolve));
+            }
+            else {
+                this.graph.set(this.cloneGraph(target));
+                if (anchorId && anchorScreen)
+                    this.applyAnchorAfterLayout(anchorId, anchorScreen);
+                resolve();
+            }
+        };
+        await new Promise((resolve) => requestAnimationFrame(() => run(resolve)));
+    }
+    // ===== Interacción (solo en .stage) =====
+    onWheel(e) {
+        e.preventDefault();
+        this.pendingWheel = { deltaY: e.deltaY, clientX: e.clientX, clientY: e.clientY };
+        if (this.wheelRaf !== null)
+            return;
+        this.wheelRaf = requestAnimationFrame(() => {
+            const ev = this.pendingWheel;
+            this.pendingWheel = null;
+            this.wheelRaf = null;
+            if (!ev)
+                return;
+            const rect = this.rootRef.nativeElement.getBoundingClientRect();
+            const mouseX = ev.clientX - rect.left;
+            const mouseY = ev.clientY - rect.top;
+            this.lastPointerScreen = { x: mouseX, y: mouseY };
+            const oldScale = this.scale();
+            const factor = 1 + (-ev.deltaY > 0 ? 0.08 : -0.08);
+            const newScale = Math.max(this.minScale(), Math.min(this.maxScale(), oldScale * factor));
+            const worldX = (mouseX - this.tx()) / oldScale;
+            const worldY = (mouseY - this.ty()) / oldScale;
+            this.tx.set(mouseX - worldX * newScale);
+            this.ty.set(mouseY - worldY * newScale);
+            this.scale.set(newScale);
+        });
+    }
+    onPointerDown(e) {
+        e.preventDefault();
+        this.dragging = true;
+        const el = e.target;
+        if (el && el.closest && el.closest(".collapse-btn")) {
+            this.dragging = false;
+            return;
+        }
+        try {
+            e.target.setPointerCapture?.(e.pointerId);
+        }
+        catch { }
+        const rect = this.rootRef.nativeElement.getBoundingClientRect();
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+        this.lastPointerScreen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+    onPointerMove(e) {
+        const rect = this.rootRef.nativeElement.getBoundingClientRect();
+        this.lastPointerScreen = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+        if (!this.dragging)
+            return;
+        const dx = e.clientX - this.lastX;
+        const dy = e.clientY - this.lastY;
+        this.tx.set(this.tx() + dx);
+        this.ty.set(this.ty() + dy);
+        this.lastX = e.clientX;
+        this.lastY = e.clientY;
+    }
+    onPointerUp() {
+        this.dragging = false;
+    }
+    onPointerLeave() {
+        this.dragging = false;
+        this.lastPointerScreen = null;
+    }
+    onDblClick() {
+        this.centerOnFirstNodeOrFit();
+    }
+    // ===== Toolbar actions =====
+    zoomIn() {
+        this.applyZoom(1.15);
+    }
+    zoomOut() {
+        this.applyZoom(1 / 1.15);
+    }
+    resetView() {
+        this.centerOnFirstNodeOrFit();
+    }
+    setLinkStyle(v) {
+        const ok = v === "orthogonal" || v === "curve" || v === "line";
+        this.opt_linkStyle.set(ok ? v : "orthogonal");
+        this.relayoutVisible();
+    }
+    setLayoutAlign(v) {
+        const ok = v === "firstChild" || v === "center";
+        this.opt_layoutAlign.set(ok ? v : "center");
+        this.relayoutVisible();
+    }
+    setLayoutDirection(v) {
+        const ok = v === "RIGHT" || v === "DOWN";
+        this.opt_layoutDirection.set(ok ? v : "RIGHT");
+        this.relayoutVisible();
+    }
+    /* ========================================================================
+     * Helpers
+     * ===================================================================== */
+    cloneGraph(g) {
+        return {
+            nodes: g.nodes.map((n) => ({ ...n })),
+            edges: g.edges.map((e) => ({ ...e })),
+            meta: { ...(g.meta ?? {}) },
+        };
+    }
+    nextFrame() {
+        return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+    }
+    ensurePinMeta(g, s) {
+        if (!g.meta)
+            g.meta = {};
+        const dir = s.layout?.layoutDirection ?? DEFAULT_SETTINGS.layout.layoutDirection;
+        const key = dir === "RIGHT" ? "pinY" : "pinX";
+        if (!g.meta[key])
+            g.meta[key] = {};
+    }
+    updateVirtualSizeFromGraph(g) {
+        const pad = 200;
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const n of g.nodes) {
+            const x = n.x ?? 0;
+            const y = n.y ?? 0;
+            const w = n.width ?? 0;
+            const h = n.height ?? 0;
+            minX = Math.min(minX, x);
+            minY = Math.min(minY, y);
+            maxX = Math.max(maxX, x + w);
+            maxY = Math.max(maxY, y + h);
+        }
+        if (!isFinite(minX) || !isFinite(minY) || !isFinite(maxX) || !isFinite(maxY)) {
+            this.virtualWidth = 12000;
+            this.virtualHeight = 6000;
+            return;
+        }
+        const neededW = Math.max(1, Math.ceil(maxX - Math.min(0, minX)) + pad);
+        const neededH = Math.max(1, Math.ceil(maxY - Math.min(0, minY)) + pad);
+        this.virtualWidth = Math.max(neededW, 2000);
+        this.virtualHeight = Math.max(neededH, 1200);
+    }
+    buildIndices() {
+        this.childrenById.clear();
+        this.parentsById.clear();
+        const g = this.fullGraph();
+        for (const n of g.nodes) {
+            this.childrenById.set(n.id, []);
+            this.parentsById.set(n.id, []);
+        }
+        for (const e of g.edges) {
+            const ch = this.childrenById.get(e.source);
+            if (ch)
+                ch.push(e.target);
+            const pr = this.parentsById.get(e.target);
+            if (pr)
+                pr.push(e.source);
+        }
+    }
+    isVisibleNodeByCollapsedAncestors(id) {
+        if (!this.enableCollapse())
+            return true;
+        const stack = [...(this.parentsById.get(id) ?? [])];
+        const seen = new Set();
+        while (stack.length) {
+            const p = stack.pop();
+            if (seen.has(p))
+                continue;
+            seen.add(p);
+            if (this.collapsed.has(p))
+                return false;
+            const pp = this.parentsById.get(p);
+            if (pp && pp.length)
+                stack.push(...pp);
+        }
+        return true;
+    }
+    buildVisibleGraphFromCollapsed() {
+        const full = this.fullGraph();
+        if (!this.enableCollapse())
+            return this.cloneGraph(full);
+        const visibleNodeSet = new Set();
+        for (const n of full.nodes) {
+            if (this.isVisibleNodeByCollapsedAncestors(n.id))
+                visibleNodeSet.add(n.id);
+        }
+        const nodes = full.nodes.filter((n) => visibleNodeSet.has(n.id));
+        const edges = full.edges.filter((e) => visibleNodeSet.has(e.source) && visibleNodeSet.has(e.target));
+        return { nodes, edges, meta: full.meta };
+    }
+    measureAndApply(pass) {
+        const s = this.effectiveSettings();
+        const extraW = s.dataView?.paddingWidthPx ?? 0;
+        const extraH = s.dataView?.paddingHeightPx ?? 0;
+        const maxW = s.dataView?.maxCardWidth ?? Infinity;
+        const maxH = s.dataView?.maxCardHeight ?? Infinity;
+        const root = this.rootRef.nativeElement;
+        const cards = Array.from(root.querySelectorAll(".schema-card"));
+        const visMap = new Map(this.graph().nodes.map((n) => [n.id, n]));
+        const fullMap = new Map(this.fullGraph().nodes.map((n) => [n.id, n]));
+        let changed = false;
+        const idsToMeasure = pass === 1 ? null : this.measureIdsToCheck;
+        const nextChanged = new Set();
+        const measures = [];
+        for (const el of cards) {
+            const id = el.getAttribute("data-node-id") ?? undefined;
+            if (!id)
+                continue;
+            if (idsToMeasure && !idsToMeasure.has(id))
+                continue;
+            const node = visMap.get(id);
+            if (!node)
+                continue;
+            const prevW = el.style.width;
+            const prevH = el.style.height;
+            el.style.width = "auto";
+            el.style.height = "auto";
+            const wIntrinsic = Math.ceil(el.scrollWidth);
+            const hIntrinsic = Math.ceil(el.scrollHeight);
+            el.style.width = prevW;
+            el.style.height = prevH;
+            const targetW = Math.min(wIntrinsic + extraW, maxW);
+            const targetH = Math.min(hIntrinsic + extraH, maxH);
+            measures.push({ id, w: targetW, h: targetH });
+        }
+        for (const m of measures) {
+            const node = visMap.get(m.id);
+            if (!node)
+                continue;
+            if ((node.width ?? 0) !== m.w || (node.height ?? 0) !== m.h) {
+                node.width = m.w;
+                node.height = m.h;
+                changed = true;
+                nextChanged.add(m.id);
+                const full = fullMap.get(m.id);
+                if (full) {
+                    full.width = m.w;
+                    full.height = m.h;
+                }
+            }
+        }
+        this.measureIdsToCheck = nextChanged.size ? nextChanged : null;
+        return changed;
+    }
+    getViewportSize() {
+        const el = this.rootRef.nativeElement;
+        const rect = el.getBoundingClientRect();
+        return { w: rect.width, h: rect.height };
+    }
+    getGraphBounds() {
+        const ns = this.nodes();
+        if (!ns.length)
+            return { minX: 0, minY: 0, maxX: 1, maxY: 1 };
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        for (const n of ns) {
+            const nx = n.x ?? 0;
+            const ny = n.y ?? 0;
+            const nw = n.width ?? 0;
+            const nh = n.height ?? 0;
+            minX = Math.min(minX, nx);
+            minY = Math.min(minY, ny);
+            maxX = Math.max(maxX, nx + nw);
+            maxY = Math.max(maxY, ny + nh);
+        }
+        return { minX, minY, maxX, maxY };
+    }
+    computeScaleToFit(pad = 24) {
+        const { w, h } = this.getViewportSize();
+        const { minX, minY, maxX, maxY } = this.getGraphBounds();
+        const gw = Math.max(1, maxX - minX);
+        const gh = Math.max(1, maxY - minY);
+        const sx = (w - pad) / gw;
+        const sy = (h - pad) / gh;
+        const fit = Math.max(0.05, Math.min(sx, sy));
+        return { fit, minX, minY, maxX, maxY, w, h };
+    }
+    fitToViewByBounds() {
+        const { fit, minX, minY, maxX, maxY, w, h } = this.computeScaleToFit(24);
+        this.minScale.set(Math.min(fit, 1));
+        this.scale.set(Math.max(this.scale(), this.minScale()));
+        const cx = (minX + maxX) / 2;
+        const cy = (minY + maxY) / 2;
+        const s = this.scale();
+        this.tx.set(w / 2 - cx * s);
+        this.ty.set(h / 2 - cy * s);
+    }
+    /** Zoom anclado al último punto de interacción sobre la stage; si no hay, usa el centro del viewport. */
+    applyZoom(factor) {
+        const rect = this.rootRef.nativeElement.getBoundingClientRect();
+        const anchor = this.lastPointerScreen ?? { x: rect.width / 2, y: rect.height / 2 };
+        const oldScale = this.scale();
+        const newScale = Math.max(this.minScale(), Math.min(this.maxScale(), oldScale * factor));
+        const worldX = (anchor.x - this.tx()) / oldScale;
+        const worldY = (anchor.y - this.ty()) / oldScale;
+        this.tx.set(anchor.x - worldX * newScale);
+        this.ty.set(anchor.y - worldY * newScale);
+        this.scale.set(newScale);
+    }
+    preserveCenterOnResize(newW, newH) {
+        if (!this.lastViewport) {
+            this.lastViewport = { w: newW, h: newH };
+            return;
+        }
+        const oldW = this.lastViewport.w;
+        const oldH = this.lastViewport.h;
+        const s = this.scale();
+        const worldCx = (oldW / 2 - this.tx()) / s;
+        const worldCy = (oldH / 2 - this.ty()) / s;
+        this.tx.set(newW / 2 - worldCx * s);
+        this.ty.set(newH / 2 - worldCy * s);
+        this.lastViewport = { w: newW, h: newH };
+    }
+    getNodeById(id) {
+        if (!id)
+            return undefined;
+        return this.graph().nodes.find((n) => n.id === id);
+    }
+    getNodeScreenCenter(n) {
+        const s = this.scale();
+        const cx = (n.x ?? 0) + (n.width ?? 0) / 2;
+        const cy = (n.y ?? 0) + (n.height ?? 0) / 2;
+        return { x: cx * s + this.tx(), y: cy * s + this.ty() };
+    }
+    applyAnchorAfterLayout(nodeId, targetScreen) {
+        const n = this.getNodeById(nodeId);
+        if (!n)
+            return;
+        this.centerOnNodeAtScreen(n, targetScreen);
+    }
+    getFirstVisibleNode() {
+        const list = this.nodes();
+        return list.length ? list[0] : null;
+    }
+    centerOnNode(n) {
+        const rect = this.rootRef.nativeElement.getBoundingClientRect();
+        const viewportCx = rect.width / 2;
+        const viewportCy = rect.height / 2;
+        const s = this.scale();
+        const nodeCx = (n.x ?? 0) + (n.width ?? 0) / 2;
+        const nodeCy = (n.y ?? 0) + (n.height ?? 0) / 2;
+        this.tx.set(viewportCx - nodeCx * s);
+        this.ty.set(viewportCy - nodeCy * s);
+    }
+    /** Centra un nodo de forma que su centro quede en una posición de pantalla dada (x,y). */
+    centerOnNodeAtScreen(n, screen) {
+        const s = this.scale();
+        const nodeCx = (n.x ?? 0) + (n.width ?? 0) / 2;
+        const nodeCy = (n.y ?? 0) + (n.height ?? 0) / 2;
+        this.tx.set(screen.x - nodeCx * s);
+        this.ty.set(screen.y - nodeCy * s);
+    }
+    centerOnFirstNodeOrFit() {
+        const first = this.getFirstVisibleNode();
+        if (first)
+            this.centerOnNode(first);
+        else
+            this.fitToViewByBounds();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaComponent, deps: [{ token: JsonAdapterService }, { token: SchemaLayoutService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: SchemaComponent, isStandalone: true, selector: "schema", inputs: { dataInput: ["data", "dataInput"], settingsInput: ["settings", "settingsInput"], cardTemplateInput: ["cardTemplate", "cardTemplateInput"], isLoadingInput: ["isLoading", "isLoadingInput"], isErrorInput: ["isError", "isErrorInput"], emptyMessageInput: ["emptyMessage", "emptyMessageInput"], loadingMessageInput: ["loadingMessage", "loadingMessageInput"], errorMessageInput: ["errorMessage", "errorMessageInput"] }, outputs: { nodeClick: "nodeClick", linkClick: "linkClick" }, viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["root"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- URL: projects/schema-ng16/src/lib/components/schema.component.html -->\n<div class=\"schema-root\" #root [style.height.px]=\"viewportHeight()\" [style.minHeight.px]=\"minViewportHeight()\">\n  <div class=\"schema-toolbar\" *ngIf=\"showToolbar() && !isLoadingView() && !isErrorView()\">\n    <div class=\"toolbar-actions\">\n      <button type=\"button\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n      <button type=\"button\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n      <button type=\"button\" (click)=\"resetView()\" title=\"Centrar\">\u293E</button>\n    </div>\n\n    <div class=\"toolbar-selectors\">\n      <label *ngIf=\"toolbarShowLinkStyle()\">\n        Enlaces:\n        <select #ls [value]=\"opt_linkStyle()\" (change)=\"setLinkStyle(ls.value)\">\n          <option value=\"curve\">Curvo</option>\n          <option value=\"orthogonal\">Ortogonal</option>\n          <option value=\"line\">Lineal</option>\n        </select>\n      </label>\n\n      <label *ngIf=\"toolbarShowLayoutAlign()\">\n        Alineaci\u00F3n:\n        <select #la [value]=\"opt_layoutAlign()\" (change)=\"setLayoutAlign(la.value)\">\n          <option value=\"firstChild\">Superior</option>\n          <option value=\"center\">Centrado</option>\n        </select>\n      </label>\n\n      <label *ngIf=\"toolbarShowLayoutDirection()\">\n        Direcci\u00F3n:\n        <select #ld [value]=\"opt_layoutDirection()\" (change)=\"setLayoutDirection(ld.value)\">\n          <option value=\"RIGHT\">Derecha</option>\n          <option value=\"DOWN\">Abajo</option>\n        </select>\n      </label>\n    </div>\n  </div>\n\n  <!-- Overlays -->\n  <div class=\"overlay loading\" *ngIf=\"isLoadingView()\">\n    <div class=\"loading-banner\">\n      <div class=\"shimmer\"></div>\n      <span class=\"msg\">{{ loadingMessageView() }}</span>\n    </div>\n  </div>\n\n  <div class=\"overlay empty\" *ngIf=\"!isLoadingView() && data == null\">\n    <div class=\"empty-banner\">{{ emptyMessageView() }}</div>\n  </div>\n\n  <div class=\"overlay error\" *ngIf=\"!isLoadingView() && isErrorView()\">\n    <div class=\"error-banner\">{{ errorMessageView() }}</div>\n  </div>\n\n  <!-- Stage -->\n  <div\n    class=\"stage\"\n    (wheel)=\"onWheel($event)\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp()\"\n    (pointerleave)=\"onPointerLeave()\"\n    (dblclick)=\"onDblClick()\"\n    [style.transform]=\"transform()\"\n    [style.width.px]=\"virtualWidth\"\n    [style.height.px]=\"virtualHeight\"\n    *ngIf=\"!isLoadingView() && !isErrorView()\"\n  >\n    <schema-links\n      [edges]=\"edges()\"\n      [settings]=\"effectiveSettings()\"\n      (linkClick)=\"linkClick.emit($event)\"\n      [width]=\"virtualWidth\"\n      [height]=\"virtualHeight\"\n    ></schema-links>\n\n    <ng-container *ngFor=\"let n of nodes(); trackBy: trackByNodeId\">\n      <schema-card\n        [node]=\"n\"\n        [settings]=\"effectiveSettings()\"\n        [cardTemplate]=\"cardTemplate()\"\n        [hasChildren]=\"hasChildren(n.id)\"\n        [showCollapseControls]=\"enableCollapse()\"\n        [isCollapsed]=\"isNodeCollapsed(n.id)\"\n        (toggleRequest)=\"onCardToggle($event)\"\n        (nodeClick)=\"nodeClick.emit($event)\"\n      ></schema-card>\n    </ng-container>\n  </div>\n</div>\n", styles: [".toolbar-actions button{border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit}.toolbar-selectors select{border:0;background:transparent;appearance:none;font:inherit;color:inherit}.schema-toolbar{border-radius:10px;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 8px #00000014}.loading-banner,.empty-banner,.error-banner{pointer-events:auto;border-radius:10px;padding:16px 20px;box-shadow:0 6px 20px #00000014;font-weight:600}.schema-root{position:relative;width:100%;overflow:hidden;background:#f7f9fb;border-radius:8px}.schema-toolbar{position:absolute;inset:12px 12px auto;z-index:20;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;background:#ffffffe6;padding:8px 12px;box-shadow:0 2px 8px #00000014}.toolbar-actions{display:inline-flex;gap:8px;align-items:center}.toolbar-actions button{min-width:32px;height:32px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#f7f9fb;font-weight:600;font-size:13px;line-height:1.2;cursor:pointer}.toolbar-selectors{display:inline-flex;gap:10px;align-items:center;justify-content:flex-end}.toolbar-selectors select{height:28px;border-radius:6px;border:1px solid rgba(0,0,0,.12);background:#f9fafb;padding:0 6px;cursor:pointer;font-size:12px;line-height:1.2}@media (max-width: 768px){.schema-toolbar{grid-template-columns:1fr;grid-auto-rows:auto}.toolbar-actions{order:1;justify-content:flex-start}.toolbar-selectors{order:2;justify-content:stretch;flex-wrap:wrap;gap:8px 10px}}@media (max-width: 600px){.toolbar-selectors{flex-direction:column;align-items:stretch;gap:8px}.toolbar-selectors label{display:flex;align-items:center;justify-content:space-between;gap:8px}.toolbar-selectors select{width:100%}}.stage{position:absolute;left:0;top:0;width:12000px;height:6000px;transform-origin:0 0;touch-action:none;-ms-touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:10;pointer-events:none}.loading-banner,.empty-banner,.error-banner{font-size:13px;line-height:1.2}.loading .loading-banner{width:min(720px,90%);background:#eee;position:relative;overflow:hidden;color:#374151}.loading .msg{position:relative;z-index:1}.loading .shimmer{position:absolute;inset:0;background:linear-gradient(to right,#e0e0e0 8%,#f0f0f0 18%,#e0e0e0 33%);background-size:1000px 100%;animation:shimmer 3s infinite linear;opacity:.9}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.empty .empty-banner{background:#fff;border:1px dashed #cbd5e1;color:#475569}.error .error-banner{background:#fff1f2;border:1px solid #fecdd3;color:#b91c1c}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SchemaCardComponent, selector: "schema-card", inputs: ["node", "cardTemplate", "settings", "hasChildren", "showCollapseControls", "isCollapsed"], outputs: ["nodeClick", "toggleRequest"] }, { kind: "component", type: SchemaLinksComponent, selector: "schema-links", inputs: ["edges", "settings", "width", "height"], outputs: ["linkClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "schema", standalone: true, imports: [CommonModule, NgFor, NgIf, SchemaCardComponent, SchemaLinksComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- URL: projects/schema-ng16/src/lib/components/schema.component.html -->\n<div class=\"schema-root\" #root [style.height.px]=\"viewportHeight()\" [style.minHeight.px]=\"minViewportHeight()\">\n  <div class=\"schema-toolbar\" *ngIf=\"showToolbar() && !isLoadingView() && !isErrorView()\">\n    <div class=\"toolbar-actions\">\n      <button type=\"button\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n      <button type=\"button\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n      <button type=\"button\" (click)=\"resetView()\" title=\"Centrar\">\u293E</button>\n    </div>\n\n    <div class=\"toolbar-selectors\">\n      <label *ngIf=\"toolbarShowLinkStyle()\">\n        Enlaces:\n        <select #ls [value]=\"opt_linkStyle()\" (change)=\"setLinkStyle(ls.value)\">\n          <option value=\"curve\">Curvo</option>\n          <option value=\"orthogonal\">Ortogonal</option>\n          <option value=\"line\">Lineal</option>\n        </select>\n      </label>\n\n      <label *ngIf=\"toolbarShowLayoutAlign()\">\n        Alineaci\u00F3n:\n        <select #la [value]=\"opt_layoutAlign()\" (change)=\"setLayoutAlign(la.value)\">\n          <option value=\"firstChild\">Superior</option>\n          <option value=\"center\">Centrado</option>\n        </select>\n      </label>\n\n      <label *ngIf=\"toolbarShowLayoutDirection()\">\n        Direcci\u00F3n:\n        <select #ld [value]=\"opt_layoutDirection()\" (change)=\"setLayoutDirection(ld.value)\">\n          <option value=\"RIGHT\">Derecha</option>\n          <option value=\"DOWN\">Abajo</option>\n        </select>\n      </label>\n    </div>\n  </div>\n\n  <!-- Overlays -->\n  <div class=\"overlay loading\" *ngIf=\"isLoadingView()\">\n    <div class=\"loading-banner\">\n      <div class=\"shimmer\"></div>\n      <span class=\"msg\">{{ loadingMessageView() }}</span>\n    </div>\n  </div>\n\n  <div class=\"overlay empty\" *ngIf=\"!isLoadingView() && data == null\">\n    <div class=\"empty-banner\">{{ emptyMessageView() }}</div>\n  </div>\n\n  <div class=\"overlay error\" *ngIf=\"!isLoadingView() && isErrorView()\">\n    <div class=\"error-banner\">{{ errorMessageView() }}</div>\n  </div>\n\n  <!-- Stage -->\n  <div\n    class=\"stage\"\n    (wheel)=\"onWheel($event)\"\n    (pointerdown)=\"onPointerDown($event)\"\n    (pointermove)=\"onPointerMove($event)\"\n    (pointerup)=\"onPointerUp()\"\n    (pointerleave)=\"onPointerLeave()\"\n    (dblclick)=\"onDblClick()\"\n    [style.transform]=\"transform()\"\n    [style.width.px]=\"virtualWidth\"\n    [style.height.px]=\"virtualHeight\"\n    *ngIf=\"!isLoadingView() && !isErrorView()\"\n  >\n    <schema-links\n      [edges]=\"edges()\"\n      [settings]=\"effectiveSettings()\"\n      (linkClick)=\"linkClick.emit($event)\"\n      [width]=\"virtualWidth\"\n      [height]=\"virtualHeight\"\n    ></schema-links>\n\n    <ng-container *ngFor=\"let n of nodes(); trackBy: trackByNodeId\">\n      <schema-card\n        [node]=\"n\"\n        [settings]=\"effectiveSettings()\"\n        [cardTemplate]=\"cardTemplate()\"\n        [hasChildren]=\"hasChildren(n.id)\"\n        [showCollapseControls]=\"enableCollapse()\"\n        [isCollapsed]=\"isNodeCollapsed(n.id)\"\n        (toggleRequest)=\"onCardToggle($event)\"\n        (nodeClick)=\"nodeClick.emit($event)\"\n      ></schema-card>\n    </ng-container>\n  </div>\n</div>\n", styles: [".toolbar-actions button{border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit}.toolbar-selectors select{border:0;background:transparent;appearance:none;font:inherit;color:inherit}.schema-toolbar{border-radius:10px;border:1px solid rgba(0,0,0,.06);box-shadow:0 2px 8px #00000014}.loading-banner,.empty-banner,.error-banner{pointer-events:auto;border-radius:10px;padding:16px 20px;box-shadow:0 6px 20px #00000014;font-weight:600}.schema-root{position:relative;width:100%;overflow:hidden;background:#f7f9fb;border-radius:8px}.schema-toolbar{position:absolute;inset:12px 12px auto;z-index:20;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px;background:#ffffffe6;padding:8px 12px;box-shadow:0 2px 8px #00000014}.toolbar-actions{display:inline-flex;gap:8px;align-items:center}.toolbar-actions button{min-width:32px;height:32px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#f7f9fb;font-weight:600;font-size:13px;line-height:1.2;cursor:pointer}.toolbar-selectors{display:inline-flex;gap:10px;align-items:center;justify-content:flex-end}.toolbar-selectors select{height:28px;border-radius:6px;border:1px solid rgba(0,0,0,.12);background:#f9fafb;padding:0 6px;cursor:pointer;font-size:12px;line-height:1.2}@media (max-width: 768px){.schema-toolbar{grid-template-columns:1fr;grid-auto-rows:auto}.toolbar-actions{order:1;justify-content:flex-start}.toolbar-selectors{order:2;justify-content:stretch;flex-wrap:wrap;gap:8px 10px}}@media (max-width: 600px){.toolbar-selectors{flex-direction:column;align-items:stretch;gap:8px}.toolbar-selectors label{display:flex;align-items:center;justify-content:space-between;gap:8px}.toolbar-selectors select{width:100%}}.stage{position:absolute;left:0;top:0;width:12000px;height:6000px;transform-origin:0 0;touch-action:none;-ms-touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;z-index:10;pointer-events:none}.loading-banner,.empty-banner,.error-banner{font-size:13px;line-height:1.2}.loading .loading-banner{width:min(720px,90%);background:#eee;position:relative;overflow:hidden;color:#374151}.loading .msg{position:relative;z-index:1}.loading .shimmer{position:absolute;inset:0;background:linear-gradient(to right,#e0e0e0 8%,#f0f0f0 18%,#e0e0e0 33%);background-size:1000px 100%;animation:shimmer 3s infinite linear;opacity:.9}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}.empty .empty-banner{background:#fff;border:1px dashed #cbd5e1;color:#475569}.error .error-banner{background:#fff1f2;border:1px solid #fecdd3;color:#b91c1c}\n"] }]
+        }], ctorParameters: () => [{ type: JsonAdapterService }, { type: SchemaLayoutService }], propDecorators: { dataInput: [{
+                type: Input,
+                args: ["data"]
+            }], settingsInput: [{
+                type: Input,
+                args: ["settings"]
+            }], cardTemplateInput: [{
+                type: Input,
+                args: ["cardTemplate"]
+            }], isLoadingInput: [{
+                type: Input,
+                args: ["isLoading"]
+            }], isErrorInput: [{
+                type: Input,
+                args: ["isError"]
+            }], emptyMessageInput: [{
+                type: Input,
+                args: ["emptyMessage"]
+            }], loadingMessageInput: [{
+                type: Input,
+                args: ["loadingMessage"]
+            }], errorMessageInput: [{
+                type: Input,
+                args: ["errorMessage"]
+            }], nodeClick: [{
+                type: Output
+            }], linkClick: [{
+                type: Output
+            }], rootRef: [{
+                type: ViewChild,
+                args: ["root", { static: true }]
+            }] } });
+
+// URL: projects/schema-ng16/src/public-api.ts
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_SETTINGS, JsonAdapterService, SchemaCardComponent, SchemaComponent, SchemaLayoutService, SchemaLinksComponent };
+//# sourceMappingURL=json-schema-ng16.mjs.map