@miguimono/json-schema 2.0.0

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

@@ -0,0 +1,1654 @@
+import * as i0 from '@angular/core';
+import { input, EventEmitter, computed, Output, ChangeDetectionStrategy, Component, Input, Injectable, signal, ViewChild } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgTemplateOutlet, NgFor, NgIf } 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-ng19/src/lib/models.ts
+
+// URL: projects/schema-ng19/src/lib/components/schema-card.component.ts
+/**
+ * Componente: SchemaCardComponent
+ * ----------------------------------------------------------------------------
+ * Renderiza un `SchemaNode` como tarjeta posicionada en el “stage”.*
+ * Responsabilidades:
+ *  - Mostrar título, atributos de vista previa y badges de arrays no escalares.
+ *  - Soportar una miniatura de imagen opcional (grupo de settings de imagen).
+ *  - Emitir eventos de interacción: click de nodo y solicitud de colapso.
+ *  - Aplicar clases de acento (accent-true/false/null y variantes fill).
+ *
+ * Reglas:
+ *  - La posición (left/top) y tamaño (width/height) vienen del layout/medición.
+ *  - No calcula layout; solo representa el nodo con base en `SchemaSettings`.
+ *  - Si `cardTemplate` está definido, se usa en lugar del template por defecto.
+ *
+ * Imagen (grupo completo en `settings.dataView`):
+ *  - `showImage`: clave en `node.data` con la URL a mostrar (si existe).
+ *  - `imageSizePx`: tamaño en px del cuadro (ancho/alto iguales).
+ *  - `imageShape`: "square" | "rounded" | "circle".
+ *  - `imageBorder`: borde sutil opcional alrededor de la miniatura.
+ *  - `imageBg`: color/fondo CSS del cuadro de imagen (e.g., "transparent").
+ *  - `imageFit`: "contain" | "cover" | "scale-down" (mapea a `object-fit`).
+ *  - `imageFallback`: URL local/remota a usar si la imagen falla (no implementado aquí).
+ *
+ * Acentos (grupo `settings.colors`):
+ *  - `accentByKey`: clave booleana en `node.data`. Si no hay clave, no hay acento.
+ *  - `accentInverse`: invierte la semántica (true↔false).
+ *  - `accentFill`: si `true`, además del borde aplica fondo suave.
+ *  - `showColorTrue/False/Null`: habilitan visuales para cada caso.
+ *
+ * Vista previa:
+ *  - `jsonMeta.attributes` se deriva en el adapter y se trunca según settings globales.
+ *  - Las claves incluidas en `noWrapKeys` se presentan en una sola línea (nowrap).
+ *
+ * Accesibilidad:
+ *  - `alt` para la imagen se deriva del título o `label` del nodo.
+ *
+ * Nota:
+ *  - Este componente no decide si se muestra el botón de colapso; expone
+ *    `showCollapseControls` e `isCollapsed`, y emite `toggleRequest`. La UI del
+ *    botón puede implementarse en el template custom si se usa `cardTemplate`.
+ */
+class SchemaCardComponent {
+    /* ============================ Inputs ============================ */
+    /** Nodo a representar. Requerido. */
+    node = input.required();
+    /** Template alternativo para renderizar la card (reemplaza al default). */
+    cardTemplate = input(null);
+    /** Settings efectivos aplicables a la card (colores, imagen, etc.). */
+    settings = input(DEFAULT_SETTINGS);
+    /** Indica si este nodo tiene hijos (para mostrar controles de colapso). */
+    hasChildren = input(false);
+    /** Controla si se muestra la UI de colapso (el botón/indicador). */
+    showCollapseControls = input(false);
+    /** Indica si el nodo está colapsado (para iconografía/estado visual). */
+    isCollapsed = input(false);
+    /* ============================ Outputs =========================== */
+    /** Click del usuario sobre la card (burbujeo controlado). */
+    nodeClick = new EventEmitter();
+    /** Solicitud de colapso/expandir desde la card. */
+    toggleRequest = new EventEmitter();
+    /* ============================ View derivada ===================== */
+    /**
+     * Vista aplanada derivada de `settings`.
+     * - Si `accentByKey` está definido y no hay showColor* en true,
+     *   se activan internamente los tres (true/false/null) para visual por defecto.
+     */
+    view = computed(() => {
+        const s = this.settings() ?? DEFAULT_SETTINGS;
+        // 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) {
+            // Activación interna por DX; no modifica settings globales
+            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 para tamaño en ausencia de medición
+            defaultNodeW: DEFAULT_SETTINGS.dataView.defaultNodeSize?.width ?? 120,
+            defaultNodeH: DEFAULT_SETTINGS.dataView.defaultNodeSize?.height ?? 60,
+            // Acentos
+            accentByKey,
+            accentFill,
+            accentInverse,
+            showColorTrue: showTrue,
+            showColorFalse: showFalse,
+            showColorNull: showNull,
+        };
+    });
+    /* ============================ API interna ======================= */
+    /** Emite click del nodo y evita burbujeo accidental. */
+    onClick(event) {
+        event.stopPropagation();
+        const n = this.node();
+        if (n)
+            this.nodeClick.emit(n);
+    }
+    /** Emite solicitud de toggle (colapso/expandir). */
+    onToggle(event) {
+        event.stopPropagation();
+        const n = this.node();
+        if (n)
+            this.toggleRequest.emit(n);
+    }
+    /** Convierte objeto a pares clave-valor iterables. */
+    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; // Oculta la URL de imagen
+            if (accentKey && k === accentKey)
+                return false; // Oculta la clave de acento (true/false)
+            return true;
+        });
+    }
+    /** Clave configurada para la imagen; `null` si no hay. */
+    showImageKey() {
+        const k = this.view().showImageKey;
+        return k && typeof k === "string" && k.trim() ? k : null;
+    }
+    /** URL de imagen si existe y es válida. */
+    imageSrc() {
+        const key = this.showImageKey();
+        if (!key)
+            return null;
+        const v = this.node()?.data?.[key];
+        return typeof v === "string" && v.trim() !== "" ? v : null;
+    }
+    /** Texto alternativo accesible para la miniatura. */
+    imageAlt() {
+        const n = this.node();
+        if (!n)
+            return "imagen";
+        return n.jsonMeta?.title || n.label || "imagen";
+    }
+    /**
+     * Determina clases de acento según `accentByKey` y flags de color.
+     * No aplica estilos si `accentByKey` no está definido en `node.data`.
+     */
+    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) => {
+            if (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;
+    }
+    /** Indica si una clave debe mostrarse en una sola línea. */
+    isNoWrapKey(key) {
+        const arr = this.view().noWrapKeys ?? [];
+        return Array.isArray(arr) ? arr.includes(key) : false;
+    }
+    /** Glifo de flecha para estados colapsado/expandido (cuando se use). */
+    arrowGlyph() {
+        const dir = this.settings()?.layout?.layoutDirection ?? DEFAULT_SETTINGS.layout.layoutDirection;
+        const collapsed = !!this.isCollapsed();
+        if (dir === "DOWN")
+            return collapsed ? "▼" : "▲";
+        return collapsed ? "▶" : "◀";
+    }
+    /** Presentación del valor (aplica truncamiento cuando corresponde). */
+    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;
+    }
+    /** Tooltip con el valor completo (si está habilitado). */
+    valueTitle(val) {
+        if (!this.view().valueShowTooltip)
+            return null;
+        return val == null ? String(val) : String(val);
+    }
+    /** Mapea clave a etiqueta legible, si está definida en `labelData`. */
+    displayKey(key) {
+        const map = this.view().labelData ?? {};
+        return Object.prototype.hasOwnProperty.call(map, key) ? map[key] : key;
+    }
+    /** Indica si existe un título calculado para la card. */
+    hasComputedTitle() {
+        const t = this.node()?.jsonMeta?.title;
+        return !!t && String(t).trim() !== "";
+    }
+    /**
+     * Manejo de error en carga de imagen:
+     *  - Si existe `imageFallback` y no se intentó antes, usarla (una sola vez).
+     *  - Si no hay fallback o ya falló, remover `src` y aplicar fondo suave.
+     */
+    onImgError(ev) {
+        const el = ev.target;
+        if (!el)
+            return;
+        const ds = el.dataset;
+        const tried = ds["fallbackApplied"] === "1";
+        const fallback = this.view().imageFallback;
+        if (fallback && !tried) {
+            ds["fallbackApplied"] = "1";
+            el.src = fallback;
+            return;
+        }
+        // Sin fallback (o ya falló)
+        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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.18", type: SchemaCardComponent, isStandalone: true, selector: "schema-card", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, hasChildren: { classPropertyName: "hasChildren", publicName: "hasChildren", isSignal: true, isRequired: false, transformFunction: null }, showCollapseControls: { classPropertyName: "showCollapseControls", publicName: "showCollapseControls", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, 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  <!--\n    Si se provee un template externo (ng-template), se renderiza en lugar\n    del contenido por defecto. En ese caso, el consumidor puede usar el\n    contexto \"$implicit: node\" para personalizar completamente la card.\n  -->\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 (derivados por el adapter) -->\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: ["@charset \"UTF-8\";.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, NgTemplateOutlet], 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  <!--\n    Si se provee un template externo (ng-template), se renderiza en lugar\n    del contenido por defecto. En ese caso, el consumidor puede usar el\n    contexto \"$implicit: node\" para personalizar completamente la card.\n  -->\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 (derivados por el adapter) -->\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: ["@charset \"UTF-8\";.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: { nodeClick: [{
+                type: Output
+            }], toggleRequest: [{
+                type: Output
+            }] } });
+
+// URL: projects/schema-ng19/src/lib/components/schema-links.component.ts
+/**
+ * Componente: SchemaLinksComponent
+ * ----------------------------------------------------------------------------
+ * Dibuja todas las aristas del grafo en un único SVG posicionado tras las cards.
+ *
+ * Responsabilidades:
+ *  - Convertir `SchemaEdge.points` (calculados en el layout) en paths SVG.
+ *  - Adaptar la forma según `settings.layout.linkStyle`:
+ *      - "line"       : segmento recto entre extremos.
+ *      - "curve"      : curva cúbica con tensión configurable (si el dx supera
+ *                       `straightThresholdDx`; en tramos muy cortos, usa línea).
+ *      - "orthogonal" : secuencia de segmentos “L” usando todos los bends.
+ *  - Emitir `linkClick` cuando se hace click sobre una arista.
+ *
+ * Parámetros relevantes de `SchemaSettings`:
+ *  - colors.linkStroke        : color del trazo (CSS).
+ *  - colors.linkStrokeWidth   : grosor del trazo (px).
+ *  - layout.linkStyle         : "orthogonal" | "curve" | "line".
+ *  - layout.curveTension      : control de curvatura (px). Rango sugerido: 20–200.
+ *  - layout.straightThresholdDx: si |dx| < threshold → línea recta en modo "curve".
+ *
+ * Notas:
+ *  - Este componente no calcula puntos; asume que `SchemaLayoutService` ya los
+ *    generó y decide la forma final según el estilo actual.
+ *  - `width/height` del SVG deben sincronizarse con el “stage” del contenedor.
+ */
+class SchemaLinksComponent {
+    /* ============================ Inputs ============================ */
+    /** Conjunto de aristas a dibujar (sus `points` provienen del layout). */
+    edges = input.required();
+    /** Settings efectivos para estilo y color de enlaces. */
+    settings = input(DEFAULT_SETTINGS);
+    /** Ancho del lienzo virtual (coherente con el “stage” del contenedor). */
+    width = 4000;
+    /** Alto del lienzo virtual (coherente con el “stage” del contenedor). */
+    height = 2000;
+    /* ============================ Outputs =========================== */
+    /** Evento emitido al hacer click en una arista. */
+    linkClick = new EventEmitter();
+    /* ============================ View derivada ===================== */
+    /**
+     * Vista aplanada para estilos de path.
+     * Usa `DEFAULT_SETTINGS` como fallback para garantizar estabilidad.
+     */
+    view = computed(() => {
+        const s = this.settings() ?? DEFAULT_SETTINGS;
+        const colors = s.colors ?? DEFAULT_SETTINGS.colors;
+        const layout = s.layout ?? DEFAULT_SETTINGS.layout;
+        // Defaults seguros (numéricos y cadenas)
+        const linkStroke = colors.linkStroke ?? DEFAULT_SETTINGS.colors.linkStroke;
+        const linkStrokeWidth = colors.linkStrokeWidth ?? DEFAULT_SETTINGS.colors.linkStrokeWidth;
+        const linkStyle = layout.linkStyle ?? DEFAULT_SETTINGS.layout.linkStyle;
+        const curveTension = layout.curveTension ?? DEFAULT_SETTINGS.layout.curveTension;
+        const straightThresholdDx = layout.straightThresholdDx ?? DEFAULT_SETTINGS.layout.straightThresholdDx;
+        return {
+            linkStroke,
+            linkStrokeWidth,
+            linkStyle,
+            curveTension,
+            straightThresholdDx,
+        };
+    });
+    /* ============================ Render helpers ==================== */
+    /**
+     * Construye el atributo `d` del path según el estilo de enlace.
+     * Supone que `e.points` contiene al menos el punto de inicio y fin.
+     */
+    pathFor(e) {
+        const pts = e.points ?? [];
+        if (pts.length === 0)
+            return "";
+        const v = this.view();
+        const style = v.linkStyle;
+        // Estilo "line": un segmento recto de A a B
+        if (style === "line") {
+            const a = pts[0];
+            const b = pts[pts.length - 1];
+            return `M ${a.x},${a.y} L ${b.x},${b.y}`;
+        }
+        // Estilo "curve": curva cúbica con tensión en X
+        if (style === "curve") {
+            const a = pts[0];
+            const b = pts[pts.length - 1];
+            // Evita curvas “demasiado cortas”: usa línea recta cuando |dx| < threshold
+            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}`;
+            }
+            // Asegura límites razonables de tensión
+            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;
+            // Puntos de control con separación horizontal `t`
+            let c1x = a.x + dir * t;
+            let c1y = a.y;
+            let c2x = b.x - dir * t;
+            let c2y = b.y;
+            // Si el delta vertical es muy pequeño, introduce una “panza” suave
+            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}`;
+        }
+        // Estilo "orthogonal": usa todos los puntos como quiebres (L)
+        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++) {
+            const p = pts[i];
+            d += ` L ${p.x},${p.y}`;
+        }
+        return d;
+    }
+    /* ============================ Eventos ========================== */
+    /** Maneja el click en una arista sin burbujarlo al stage. */
+    onLinkClick(e, ev) {
+        ev.stopPropagation();
+        this.linkClick.emit(e);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaLinksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SchemaLinksComponent, isStandalone: true, selector: "schema-links", inputs: { edges: { classPropertyName: "edges", publicName: "edges", isSignal: true, isRequired: true, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: false, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { linkClick: "linkClick" }, ngImport: i0, template: "<svg class=\"schema-links\" [attr.width]=\"width\" [attr.height]=\"height\">\n  <g>\n    @for (e of edges(); track e.id) {\n    <path\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    ></path>\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"], 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, changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg class=\"schema-links\" [attr.width]=\"width\" [attr.height]=\"height\">\n  <g>\n    @for (e of edges(); track e.id) {\n    <path\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    ></path>\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: { 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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: JsonAdapterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵ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-ng19/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 ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: SchemaLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵ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-ng19/src/lib/services/schema-layout.service.ts
+
+// URL: projects/schema-ng19/src/lib/components/schema.component.ts
+class SchemaComponent {
+    adapter;
+    layoutService;
+    // ===== Inputs =====
+    data = input();
+    settings = input(null);
+    cardTemplate = input(null);
+    // Overlays
+    isLoading = input(false);
+    isError = input(false);
+    emptyMessage = input("No hay datos para mostrar");
+    loadingMessage = input("Cargando…");
+    errorMessage = input("Error al cargar el esquema");
+    // Viewport
+    viewportHeight = signal(800);
+    minViewportHeight = signal(480);
+    showToolbar = signal(true);
+    // ===== Outputs =====
+    nodeClick = new EventEmitter();
+    linkClick = new EventEmitter();
+    // ===== Estado de grafo =====
+    fullGraph = signal({ nodes: [], edges: [] });
+    graph = signal({ nodes: [], edges: [] });
+    nodes = computed(() => this.graph().nodes);
+    edges = computed(() => this.graph().edges);
+    rootRef;
+    // ===== Pan/zoom =====
+    scale = signal(1);
+    minScale = signal(0.2);
+    maxScale = signal(3);
+    tx = signal(0);
+    ty = signal(0);
+    dragging = false;
+    lastX = 0;
+    lastY = 0;
+    lastViewport = null;
+    /** Último punto de interacción sobre la stage (coordenadas de pantalla relativas al root). */
+    lastPointerScreen = null;
+    wheelRaf = null;
+    pendingWheel = null;
+    transform = computed(() => `translate(${this.tx()}px, ${this.ty()}px) scale(${this.scale()})`);
+    virtualWidth = 12000;
+    virtualHeight = 6000;
+    // ===== Toolbar overrides =====
+    opt_linkStyle = signal("orthogonal");
+    opt_layoutAlign = signal("firstChild");
+    opt_layoutDirection = signal("RIGHT");
+    // ===== Mensajes derivados =====
+    isLoadingView = computed(() => this.settings()?.messages?.isLoading ?? this.isLoading());
+    isErrorView = computed(() => this.settings()?.messages?.isError ?? this.isError());
+    emptyMessageView = computed(() => this.settings()?.messages?.emptyMessage ?? this.emptyMessage());
+    loadingMessageView = computed(() => this.settings()?.messages?.loadingMessage ?? this.loadingMessage());
+    errorMessageView = computed(() => this.settings()?.messages?.errorMessage ?? this.errorMessage());
+    // ===== Collapse/expand =====
+    childrenById = new Map();
+    parentsById = new Map();
+    collapsed = new Set();
+    measureIdsToCheck = null;
+    lastDataRef;
+    lastSettingsRef;
+    hasComputedOnce = false;
+    enableCollapse = computed(() => {
+        const b = this.baseSettings();
+        return b.dataView?.enableCollapse ?? DEFAULT_SETTINGS.dataView.enableCollapse;
+    });
+    // ===== Toolbar controls visibility =====
+    toolbarShowLinkStyle = computed(() => {
+        const b = this.baseSettings();
+        return b.viewport?.toolbarControls?.showLinkStyle ?? true;
+    });
+    toolbarShowLayoutAlign = computed(() => {
+        const b = this.baseSettings();
+        return b.viewport?.toolbarControls?.showLayoutAlign ?? true;
+    });
+    toolbarShowLayoutDirection = computed(() => {
+        const b = this.baseSettings();
+        return b.viewport?.toolbarControls?.showLayoutDirection ?? true;
+    });
+    constructor(adapter, layoutService) {
+        this.adapter = adapter;
+        this.layoutService = layoutService;
+    }
+    // ===== Settings efectivos =====
+    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 },
+        };
+    });
+    effectiveSettings = computed(() => {
+        const b = this.baseSettings();
+        return {
+            ...b,
+            layout: {
+                ...b.layout,
+                linkStyle: this.opt_linkStyle(),
+                layoutAlign: this.opt_layoutAlign(),
+                layoutDirection: this.opt_layoutDirection(),
+            },
+        };
+    });
+    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));
+    }
+    // ===== Ciclo de vida =====
+    resizeObs;
+    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);
+    }
+    /** Devuelve si el nodo tiene hijos (para pintar botón de colapso). */
+    hasChildren = (id) => (this.childrenById.get(id)?.length ?? 0) > 0;
+    /** Devuelve si el nodo está colapsado (estado visual en la card). */
+    isNodeCollapsed = (id) => this.collapsed.has(id);
+    // --- 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 (posibles extraíbles)
+     * ===================================================================== */
+    // ---- Gráfico / DOM ----
+    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 };
+    }
+    // ---- Medición ----
+    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;
+    }
+    // ---- Viewport / encuadre ----
+    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 };
+    }
+    // ---- Foco / anclaje ----
+    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);
+    }
+    // ---- Centrados reutilizables ----
+    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 ɵ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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: SchemaComponent, isStandalone: true, selector: "schema", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null }, cardTemplate: { classPropertyName: "cardTemplate", publicName: "cardTemplate", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, loadingMessage: { classPropertyName: "loadingMessage", publicName: "loadingMessage", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", linkClick: "linkClick" }, viewQueries: [{ propertyName: "rootRef", first: true, predicate: ["root"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- URL: projects/schema-ng19/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    @for (n of nodes(); track n.id) {\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    }\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.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-ng19/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    @for (n of nodes(); track n.id) {\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    }\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: { nodeClick: [{
+                type: Output
+            }], linkClick: [{
+                type: Output
+            }], rootRef: [{
+                type: ViewChild,
+                args: ["root", { static: true }]
+            }] } });
+
+/*
+ * Public API Surface of scheme
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_SETTINGS, JsonAdapterService, SchemaCardComponent, SchemaComponent, SchemaLayoutService };
+//# sourceMappingURL=json-schema.mjs.map