@memberjunction/ng-entity-relationship-diagram 5.30.1 → 5.31.0

package/dist/lib/components/erd-diagram.component.js

@@ -1,1908 +1,1041 @@
-import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
-import * as d3 from 'd3';
-import * as dagre from '@dagrejs/dagre';
+/**
+ * @module erd-diagram.component
+ * @description
+ * Schema-grouped Entity Relationship Diagram.  Each schema becomes a rounded
+ * rectangular band; entities tile in a grid within the band.  Click a node to
+ * enter focus mode (neighbours highlighted, everything else dimmed) and see a
+ * floating details card with its inbound and outbound FKs.
+ *
+ * The component is pure Angular + SVG (no D3, no Dagre).  Layout is computed
+ * by a pure function in `../layout/compute-erd-layout.ts` that is easily
+ * unit-tested.
+ *
+ * Public API is preserved from the previous D3-based implementation so
+ * existing consumers (Database Designer wizard preview, admin ERD dashboard,
+ * Entity Record view) continue to work without changes.
+ */
+import { Component, Input, Output, EventEmitter, ElementRef, ViewChild, HostBinding, ChangeDetectionStrategy, ChangeDetectorRef, inject, } from '@angular/core';
+import { computeErdLayout, pointsToPath, getNeighbors, } from '../layout/compute-erd-layout';
+import { computeDagreLayout } from '../layout/compute-dagre-layout';
 import * as i0 from "@angular/core";
-const _c0 = ["erdContainer"];
-function ERDDiagramComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "h3");
+const _c0 = ["canvasRef"];
+function ERDDiagramComponent_Conditional_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_0_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onClearSearch()); });
+    i0.ɵɵtext(1, "\u00D7");
+    i0.ɵɵelementEnd();
+} }
+function ERDDiagramComponent_Conditional_0_Conditional_18_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 46);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_0_Conditional_18_For_2_Template_button_click_0_listener() { const chip_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onSchemaChipToggle(chip_r6.name)); });
+    i0.ɵɵelementStart(1, "span", 47);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 5)(4, "button", 6);
-    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.zoomIn()); });
-    i0.ɵɵelement(5, "span", 7);
+    i0.ɵɵelementStart(3, "span", 48);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const chip_r6 = ctx.$implicit;
+    i0.ɵɵclassProp("active", chip_r6.active);
+    i0.ɵɵattribute("aria-pressed", chip_r6.active);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(chip_r6.name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(chip_r6.count);
+} }
+function ERDDiagramComponent_Conditional_0_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30);
+    i0.ɵɵrepeaterCreate(1, ERDDiagramComponent_Conditional_0_Conditional_18_For_2_Template, 5, 5, "button", 45, i0.ɵɵcomponentInstance().trackByChip, true);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.schemaChips);
+} }
+function ERDDiagramComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "header", 1)(1, "div", 19)(2, "div", 20);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 8);
-    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_1_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.zoomOut()); });
-    i0.ɵɵelement(7, "span", 9);
+    i0.ɵɵelementStart(4, "div", 21)(5, "span", 22);
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 10);
-    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_1_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.resetZoom()); });
-    i0.ɵɵelement(9, "span", 11);
+    i0.ɵɵelementStart(7, "span", 23);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 12);
-    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_1_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.refresh(); return i0.ɵɵresetView(ctx_r1.refreshRequested.emit()); });
-    i0.ɵɵelement(11, "span", 13);
+    i0.ɵɵelementStart(9, "span", 24);
+    i0.ɵɵtext(10, "\u00B7");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span");
+    i0.ɵɵtext(12);
     i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(13, "label", 25);
+    i0.ɵɵelement(14, "i", 26);
+    i0.ɵɵelementStart(15, "input", 27);
+    i0.ɵɵlistener("input", function ERDDiagramComponent_Conditional_0_Template_input_input_15_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSearchChange($event.target.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(16, ERDDiagramComponent_Conditional_0_Conditional_16_Template, 2, 0, "button", 28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 29);
+    i0.ɵɵconditionalCreate(18, ERDDiagramComponent_Conditional_0_Conditional_18_Template, 3, 0, "div", 30);
+    i0.ɵɵelementStart(19, "div", 31)(20, "button", 32);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_0_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setLayoutAlgorithm("schema-grid")); });
+    i0.ɵɵelement(21, "i", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "button", 34);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_0_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setLayoutAlgorithm("dagre")); });
+    i0.ɵɵelement(23, "i", 35);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(24, "div", 36)(25, "button", 37);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_0_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.zoomBy(1.2)); });
+    i0.ɵɵelement(26, "i", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "button", 39);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_0_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.zoomBy(0.83)); });
+    i0.ɵɵelement(28, "i", 40);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "button", 41);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_Conditional_0_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.fitToView()); });
+    i0.ɵɵelement(30, "i", 42);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "span", 43);
+    i0.ɵɵtext(32);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.headerTitle);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r2.visibleCount);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("of ", ctx_r2.totalCount, " entities");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("", ctx_r2.layout.edges.length, " relationships");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r2.searchQuery);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.searchQuery ? 16 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.schemaChips.length > 1 ? 18 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.headerTitle);
+    i0.ɵɵclassProp("active", ctx_r2.activeLayout === "schema-grid");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r2.activeLayout === "dagre");
+    i0.ɵɵadvance(10);
+    i0.ɵɵtextInterpolate(ctx_r2.zoomPercent);
+} }
+function ERDDiagramComponent_Conditional_14_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "g", 49);
+    i0.ɵɵelement(1, "rect", 50);
+    i0.ɵɵelementStart(2, "text", 51);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const band_r7 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x", band_r7.x)("y", band_r7.y)("width", band_r7.width)("height", band_r7.height);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x", band_r7.x + band_r7.width / 2)("y", band_r7.y + 32);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", band_r7.schemaName, " ");
 } }
-function ERDDiagramComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 4)(1, "div", 14)(2, "div", 15);
-    i0.ɵɵelement(3, "div", 16)(4, "div", 16)(5, "div", 16);
+function ERDDiagramComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ERDDiagramComponent_Conditional_14_For_1_Template, 4, 7, ":svg:g", 49, i0.ɵɵcomponentInstance().trackByBand, true);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵrepeater(ctx_r2.layout.bands);
+} }
+function ERDDiagramComponent_For_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(0, "path", 52);
+} if (rf & 2) {
+    const edge_r8 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("erd-edge-active", ctx_r2.isEdgeActive(edge_r8))("erd-edge-dimmed", ctx_r2.isEdgeDimmed(edge_r8));
+    i0.ɵɵattribute("d", ctx_r2.edgePath(edge_r8))("marker-start", ctx_r2.config.crowsFoot ?? true ? ctx_r2.isEdgeActive(edge_r8) ? "url(#erd-many-active)" : "url(#erd-many)" : null)("marker-end", ctx_r2.isEdgeActive(edge_r8) ? "url(#erd-arrow-active)" : "url(#erd-arrow)");
+} }
+function ERDDiagramComponent_Conditional_18_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "g", 54);
+    i0.ɵɵelement(1, "rect", 55);
+    i0.ɵɵelementStart(2, "text", 56);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const edge_r9 = i0.ɵɵnextContext().$implicit;
+    const pos_r10 = i0.ɵɵreadContextLet(0);
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("erd-edge-label-active", ctx_r2.isEdgeActive(edge_r9))("erd-edge-label-dimmed", ctx_r2.isEdgeDimmed(edge_r9));
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x", pos_r10.x - pos_r10.w / 2 - 4)("y", pos_r10.y - 8)("width", pos_r10.w + 8);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x", pos_r10.x)("y", pos_r10.y + 4);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(edge_r9.sourceField.name);
+} }
+function ERDDiagramComponent_Conditional_18_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdeclareLet(0);
+    i0.ɵɵconditionalCreate(1, ERDDiagramComponent_Conditional_18_For_2_Conditional_1_Template, 4, 10, ":svg:g", 53);
+} if (rf & 2) {
+    const edge_r9 = ctx.$implicit;
+    const pos_r11 = i0.ɵɵstoreLet(i0.ɵɵnextContext(2).edgeLabelPosition(edge_r9));
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(pos_r11 ? 1 : -1);
+} }
+function ERDDiagramComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "g", 14);
+    i0.ɵɵrepeaterCreate(1, ERDDiagramComponent_Conditional_18_For_2_Template, 2, 2, null, null, i0.ɵɵcomponentInstance().trackByEdge, true);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r2.layout.edges);
+} }
+function ERDDiagramComponent_For_21_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 64);
+    i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 17);
-    i0.ɵɵtext(7, "Loading diagram...");
+} if (rf & 2) {
+    const node_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r2.formatCount(node_r13.customData.rows));
+} }
+function ERDDiagramComponent_For_21_For_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 70);
+    i0.ɵɵtext(1, "PK");
+    i0.ɵɵelementEnd();
+} }
+function ERDDiagramComponent_For_21_For_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 71);
+    i0.ɵɵtext(1, "FK");
+    i0.ɵɵelementEnd();
+} }
+function ERDDiagramComponent_For_21_For_11_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 73);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r14 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", field_r14.type);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r14.type);
+} }
+function ERDDiagramComponent_For_21_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "foreignObject", 66);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(1, "div", 69);
+    i0.ɵɵconditionalCreate(2, ERDDiagramComponent_For_21_For_11_Conditional_2_Template, 2, 0, "span", 70)(3, ERDDiagramComponent_For_21_For_11_Conditional_3_Template, 2, 0, "span", 71);
+    i0.ɵɵelementStart(4, "span", 72);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(6, ERDDiagramComponent_For_21_For_11_Conditional_6_Template, 2, 2, "span", 73);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r14 = ctx.$implicit;
+    const ɵ$index_149_r15 = ctx.$index;
+    const node_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵattribute("y", 36 + ɵ$index_149_r15 * 22)("width", node_r13.width);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("erd-field-pk", field_r14.isPrimaryKey)("erd-field-fk", !field_r14.isPrimaryKey && field_r14.relatedNodeId);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r14.isPrimaryKey ? 2 : field_r14.relatedNodeId ? 3 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", field_r14.name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r14.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(field_r14.type ? 6 : -1);
+} }
+function ERDDiagramComponent_For_21_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "foreignObject", 74);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_For_21_Conditional_12_Template_foreignObject_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const node_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onToggleExpand(node_r13.id, $event)); });
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(1, "div", 75);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const node_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵattribute("y", 36 + node_r13.visibleFields.length * 22 + 6)("width", node_r13.width - 8);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" + ", node_r13.fields.length - node_r13.visibleFields.length, " more fields ");
+} }
+function ERDDiagramComponent_For_21_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(0, "g", 57);
+    i0.ɵɵlistener("click", function ERDDiagramComponent_For_21_Template_g_click_0_listener($event) { const node_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNodeClick(node_r13, $event)); })("mouseenter", function ERDDiagramComponent_For_21_Template_g_mouseenter_0_listener($event) { const node_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNodeMouseEnter(node_r13, $event)); })("mouseleave", function ERDDiagramComponent_For_21_Template_g_mouseleave_0_listener() { const node_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onNodeMouseLeave(node_r13)); });
+    i0.ɵɵelement(1, "rect", 58)(2, "rect", 59)(3, "rect", 60);
+    i0.ɵɵelementStart(4, "foreignObject", 61);
+    i0.ɵɵnamespaceHTML();
+    i0.ɵɵelementStart(5, "div", 62)(6, "span", 63);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(8, ERDDiagramComponent_For_21_Conditional_8_Template, 2, 1, "span", 64);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelement(9, "line", 65);
+    i0.ɵɵrepeaterCreate(10, ERDDiagramComponent_For_21_For_11_Template, 7, 10, ":svg:foreignObject", 66, i0.ɵɵcomponentInstance().trackByField, true);
+    i0.ɵɵconditionalCreate(12, ERDDiagramComponent_For_21_Conditional_12_Template, 3, 3, ":svg:foreignObject", 67);
+    i0.ɵɵelement(13, "rect", 68);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const node_r13 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("erd-node-focus", ctx_r2.isFocus(node_r13.id))("erd-node-neighbour", ctx_r2.isNeighbour(node_r13.id))("erd-node-dimmed", ctx_r2.isDimmed(node_r13.id));
+    i0.ɵɵattribute("transform", "translate(" + node_r13.x + " " + node_r13.y + ")");
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", node_r13.width)("height", node_r13.height);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", node_r13.width)("height", node_r13.height);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", node_r13.width);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", node_r13.width - 28);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("title", node_r13.name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(node_r13.name);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(node_r13.customData && node_r13.customData.rows != null ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("x2", node_r13.width);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(node_r13.visibleFields);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(node_r13.hasMore ? 12 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("width", node_r13.width)("height", node_r13.height);
+} }
+function ERDDiagramComponent_Conditional_22_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵtext(1, "Try adjusting schema filters or clearing search");
+    i0.ɵɵelementEnd();
+} }
+function ERDDiagramComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 76);
+    i0.ɵɵelement(2, "i", 77);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 78);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, ERDDiagramComponent_Conditional_22_Conditional_5_Template, 2, 0, "div", 79);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(ctx_r2.config.emptyStateIcon || "fa-solid fa-diagram-project");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.totalCount === 0 ? ctx_r2.config.emptyStateMessage || "No entities to display" : "No entities match", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.totalCount > 0 ? 5 : -1);
+} }
+function ERDDiagramComponent_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 80);
+    i0.ɵɵelement(2, "i", 81);
+    i0.ɵɵelementStart(3, "span");
+    i0.ɵɵtext(4, "Loading\u2026");
     i0.ɵɵelementEnd()()();
 } }
-/**
- * Default configuration values for the ERD diagram.
- * These values provide a good starting point for most use cases.
- */
-/** Default dagre configuration */
-const DEFAULT_DAGRE_CONFIG = {
-    rankDir: 'LR',
-    nodeSep: 80, // Increased from 50 - more vertical space between nodes in same rank
-    rankSep: 150, // Increased from 100 - more horizontal space between ranks for labels
-    edgeSep: 20, // Increased from 10 - more space between edge paths
-    ranker: 'network-simplex',
-    align: undefined
-};
-const DEFAULT_CONFIG = {
-    nodeWidth: 180,
-    nodeBaseHeight: 60,
-    fieldHeight: 20,
-    maxNodeHeight: 300,
-    chargeStrength: -800,
-    linkDistance: 80,
-    collisionPadding: 20,
-    showFieldDetails: true,
-    showRelationshipLabels: true,
-    showHeader: true,
-    showNodeCount: true,
-    showMinimap: false,
-    showLegend: false,
-    enableDragging: true,
-    enableZoom: true,
-    enablePan: true,
-    minZoom: 0.1,
-    maxZoom: 4,
-    initialZoom: 1,
-    enableMultiSelect: false,
-    animationDuration: 750,
-    fitOnLoad: true,
-    skipAnimation: false,
-    emptyStateMessage: 'No entities to display',
-    emptyStateIcon: 'fa-solid fa-diagram-project',
-    layoutAlgorithm: 'dagre',
-    dagreConfig: DEFAULT_DAGRE_CONFIG,
-    colors: {
-        nodeBackground: '#f8f9fa',
-        nodeBorder: '#333',
-        nodeHeader: '#007bff',
-        nodeHeaderText: 'white',
-        primaryKeyBackground: '#fff3cd',
-        primaryKeyText: '#856404',
-        foreignKeyBackground: '#cce5ff',
-        foreignKeyText: '#004085',
-        linkColor: '#666',
-        selectedBorder: '#4CAF50',
-        highlightBorder: '#ff9800',
-        relatedBorder: '#ff6b35'
-    }
-};
-/**
- * Entity Relationship Diagram component using D3.js force-directed graph.
- *
- * This is a **generic, reusable Angular component** that can visualize any data
- * that conforms to the `ERDNode` interface. It is completely decoupled from
- * MemberJunction-specific types and can be used in any Angular project.
- *
- * ## Features
- *
- * - **Interactive Force-Directed Layout**: Nodes automatically arrange themselves
- *   using physics-based simulation with customizable forces
- * - **Zoom and Pan**: Mouse wheel zoom and drag-to-pan with configurable limits
- * - **Node Selection**: Click to select nodes with visual highlighting
- * - **Focus Mode**: Show a single node with its N-hop related entities
- * - **Relationship Visualization**: Arrows show foreign key relationships
- * - **Customizable Styling**: Full control over colors, sizes, and appearance
- * - **Rich Event System**: Comprehensive events for integration with parent components
- * - **State Persistence**: Save and restore diagram state (zoom, pan, selection, positions)
- *
- * ## Basic Usage
- *
- * ```html
- * <mj-erd-diagram
- *   [nodes]="entityNodes"
- *   [selectedNodeId]="selectedId"
- *   [config]="erdConfig"
- *   (nodeClick)="onNodeClick($event)"
- *   (nodeSelected)="onNodeSelected($event)"
- *   (zoomChange)="onZoomChange($event)">
- * </mj-erd-diagram>
- * ```
- *
- * ## Focus Mode Example
- *
- * Show a single entity with its immediate relationships:
- *
- * ```html
- * <mj-erd-diagram
- *   [nodes]="allNodes"
- *   [focusNodeId]="'user-entity-id'"
- *   [focusDepth]="1"
- *   (nodeSelected)="onNodeSelected($event)">
- * </mj-erd-diagram>
- * ```
- *
- * ## State Persistence Example
- *
- * ```typescript
- * // Save state
- * const state = this.erdDiagram.getState();
- * localStorage.setItem('erd-state', JSON.stringify(state));
- *
- * // Restore state
- * const savedState = JSON.parse(localStorage.getItem('erd-state'));
- * this.erdDiagram.setState(savedState);
- * ```
- *
- * @see ERDNode for the node data structure
- * @see ERDConfig for configuration options
- * @see ERDState for state persistence
- */
 export class ERDDiagramComponent {
-    erdContainer;
-    // ============================================================================
-    // INPUTS - Data
-    // ============================================================================
-    /**
-     * The nodes (entities) to display in the diagram.
-     * Each node should conform to the `ERDNode` interface.
-     *
-     * @example
-     * ```typescript
-     * nodes: ERDNode[] = [
-     *   {
-     *     id: 'user-1',
-     *     name: 'Users',
-     *     fields: [
-     *       { id: 'id', name: 'ID', isPrimaryKey: true },
-     *       { id: 'email', name: 'Email', isPrimaryKey: false }
-     *     ]
-     *   }
-     * ];
-     * ```
-     */
+    cdr = inject(ChangeDetectorRef);
+    host = inject(ElementRef);
+    // ─── INPUTS ───────────────────────────────────────────────────────────
     nodes = [];
-    /**
-     * ID of the currently selected node.
-     * Use this for external control of selection state.
-     * The component will highlight this node and emit selection events accordingly.
-     *
-     * @example `[selectedNodeId]="'entity-123'"`
-     */
     selectedNodeId = null;
-    /**
-     * IDs of nodes to highlight (in addition to selected node).
-     * Highlighted nodes receive a distinct visual style (orange border by default).
-     * Useful for showing search results or related items.
-     *
-     * @example `[highlightedNodeIds]="['entity-1', 'entity-2']"`
-     */
     highlightedNodeIds = [];
-    /**
-     * ID of the node to focus on.
-     * When set, the diagram will only show this node and its related nodes
-     * up to `focusDepth` hops away. This is useful for entity-centric views.
-     *
-     * Set to `null` to show all nodes.
-     *
-     * @example `[focusNodeId]="'user-entity-id'"`
-     */
     focusNodeId = null;
-    /**
-     * Number of relationship hops to include when in focus mode.
-     * - `0`: Show only the focus node
-     * - `1`: Show focus node + directly related nodes
-     * - `2`: Show focus node + nodes within 2 relationship hops
-     *
-     * Only applies when `focusNodeId` is set.
-     *
-     * @default 1
-     * @example `[focusDepth]="2"`
-     */
     focusDepth = 1;
-    // ============================================================================
-    // INPUTS - State
-    // ============================================================================
-    /**
-     * Whether the diagram is currently refreshing/loading.
-     * When `true`, displays a loading overlay on the diagram.
-     *
-     * @example `[isRefreshing]="isLoadingData"`
-     */
     isRefreshing = false;
-    /**
-     * Whether the diagram is in read-only mode.
-     * When `true`, disables dragging and selection (zoom/pan still work).
-     *
-     * @default false
-     */
     readOnly = false;
-    // ============================================================================
-    // INPUTS - Configuration
-    // ============================================================================
-    /**
-     * Configuration options for the diagram.
-     * All options are optional with sensible defaults.
-     *
-     * @see ERDConfig for all available options
-     * @example
-     * ```typescript
-     * config: ERDConfig = {
-     *   nodeWidth: 200,
-     *   chargeStrength: -1000,
-     *   colors: {
-     *     nodeHeader: '#0066cc'
-     *   }
-     * };
-     * ```
-     */
     config = {};
-    /**
-     * Whether to show the header bar with zoom controls.
-     * Set to `false` to hide the header and use programmatic control instead.
-     *
-     * @default true
-     */
     showHeader = true;
-    /**
-     * Title to display in the header bar.
-     * Only visible when `showHeader` is `true`.
-     *
-     * @default 'Entity Relationship Diagram'
-     */
     headerTitle = 'Entity Relationship Diagram';
-    // ============================================================================
-    // OUTPUTS - Selection Events
-    // ============================================================================
-    /**
-     * Emitted when a node is clicked.
-     * Set `event.cancel = true` to prevent the default selection behavior.
-     *
-     * @example
-     * ```typescript
-     * onNodeClick(event: ERDNodeClickEvent) {
-     *   console.log('Clicked:', event.node.name);
-     *   // Prevent selection for certain nodes
-     *   if (event.node.customData?.['locked']) {
-     *     event.cancel = true;
-     *   }
-     * }
-     * ```
-     */
+    // ─── OUTPUTS (preserved from legacy API) ──────────────────────────────
     nodeClick = new EventEmitter();
-    /**
-     * Emitted when a node is double-clicked.
-     * Useful for opening detail views or triggering actions.
-     *
-     * @example
-     * ```typescript
-     * onNodeDoubleClick(event: ERDNodeDoubleClickEvent) {
-     *   this.openEntityDetail(event.node.id);
-     * }
-     * ```
-     */
     nodeDoubleClick = new EventEmitter();
-    /**
-     * Emitted when a node is selected (after click, unless cancelled).
-     * The node parameter contains the full `ERDNode` data.
-     */
     nodeSelected = new EventEmitter();
-    /**
-     * Emitted when the current node is deselected.
-     * This happens when clicking the background or selecting a different node.
-     */
     nodeDeselected = new EventEmitter();
-    /**
-     * Emitted when a relationship link is clicked.
-     * The event includes both source and target nodes for context.
-     */
     linkClick = new EventEmitter();
-    // ============================================================================
-    // OUTPUTS - Hover Events
-    // ============================================================================
-    /**
-     * Emitted when the mouse enters a node.
-     * Includes related nodes and position for tooltip display.
-     *
-     * @example
-     * ```typescript
-     * onNodeHover(event: ERDNodeHoverEvent) {
-     *   this.showTooltip(event.node, event.position);
-     * }
-     * ```
-     */
     nodeHover = new EventEmitter();
-    /**
-     * Emitted when the mouse leaves a node.
-     */
     nodeHoverEnd = new EventEmitter();
-    /**
-     * Emitted when the mouse enters a relationship link.
-     */
     linkHover = new EventEmitter();
-    /**
-     * Emitted when the mouse leaves a relationship link.
-     */
     linkHoverEnd = new EventEmitter();
-    // ============================================================================
-    // OUTPUTS - Context Menu Events
-    // ============================================================================
-    /**
-     * Emitted when a node is right-clicked.
-     * Set `event.cancel = true` to prevent the default browser context menu.
-     *
-     * @example
-     * ```typescript
-     * onNodeContextMenu(event: ERDNodeContextMenuEvent) {
-     *   event.cancel = true;
-     *   this.showContextMenu(event.node, event.position);
-     * }
-     * ```
-     */
     nodeContextMenu = new EventEmitter();
-    /**
-     * Emitted when a relationship link is right-clicked.
-     */
     linkContextMenu = new EventEmitter();
-    /**
-     * Emitted when the diagram background is right-clicked.
-     * Includes diagram coordinates for adding new nodes at click position.
-     */
     diagramContextMenu = new EventEmitter();
-    // ============================================================================
-    // OUTPUTS - Drag Events
-    // ============================================================================
-    /**
-     * Emitted when a node drag operation starts.
-     * Set `event.cancel = true` to prevent the drag.
-     */
     nodeDragStart = new EventEmitter();
-    /**
-     * Emitted when a node drag operation ends.
-     */
     nodeDragEnd = new EventEmitter();
-    // ============================================================================
-    // OUTPUTS - Diagram Events
-    // ============================================================================
-    /**
-     * Emitted when zoom level or pan position changes.
-     * Useful for synchronizing zoom controls or saving view state.
-     */
     zoomChange = new EventEmitter();
-    /**
-     * Emitted when the diagram requests a refresh.
-     * Triggered by the refresh button in the header.
-     */
     refreshRequested = new EventEmitter();
-    /**
-     * Emitted when the force simulation completes initial layout.
-     * Useful for performing actions after nodes have settled.
-     */
     layoutComplete = new EventEmitter();
+    stateChange = new EventEmitter();
+    // ─── VIEW CHILDREN ────────────────────────────────────────────────────
+    canvasRef;
+    // ─── STATE ────────────────────────────────────────────────────────────
+    /** Current pan + zoom. */
+    transform = { x: 0, y: 0, k: 1 };
+    /** Set of schema names the user has filtered IN.  Null means "all". */
+    activeSchemas = null;
+    /** Search query string. */
+    searchQuery = '';
+    /** Node IDs the user has clicked "+N more fields" on. */
+    expandedNodeIds = new Set();
+    /** Node currently being hovered (for highlight preview). */
+    hoverNodeId = null;
+    /** Cached layout — recomputed when nodes, filter, search or expansion changes. */
+    layout = { nodes: [], edges: [], bands: [], totalWidth: 0, totalHeight: 0 };
     /**
-     * Emitted when diagram state changes (selection, zoom, highlights).
-     * Useful for auto-saving state or syncing with other components.
+     * Active layout algorithm.  Starts from `config.layoutAlgorithm` (default
+     * `schema-grid`) but can be toggled at runtime via `setLayoutAlgorithm`.
+     * Exposed so the chrome toggle + saved user state can drive it.
      */
-    stateChange = new EventEmitter();
-    // ============================================================================
-    // PRIVATE STATE
-    // ============================================================================
-    svg = null;
-    simulation = null;
-    internalNodes = [];
-    internalLinks = [];
-    visibleNodes = [];
-    visibleLinks = [];
-    zoom = null;
+    activeLayout = 'schema-grid';
+    /** Derived schema summary for the chip row. */
+    schemaChips = [];
+    /** Derived — number of entities currently visible. */
+    visibleCount = 0;
+    /** Derived — total entities in the input, before any filtering. */
+    totalCount = 0;
+    /** Derived — the Set of IDs in the focus/hover neighbourhood (null when no highlight active). */
+    highlightSet = null;
+    /** Derived — the single selected entity, if any. */
+    selectedEntity = null;
+    // Panning bookkeeping (not reactive).  Public so the template can bind a
+    // cursor attribute to it; treat as internal state.
+    panning = false;
+    panStart = null;
+    /** Raw mousedown coords — used to compute drag distance for the
+     *  pan-vs-click threshold. */
+    dragOrigin = null;
+    /** True once movement crossed the drag threshold — used to suppress
+     *  the synthetic click that follows the mouseup. */
+    dragMoved = false;
+    /** Pixels of movement before mousedown is treated as a drag. */
+    static DRAG_THRESHOLD = 4;
+    /** Bound window listeners — kept on the instance so we can detach. */
+    boundWindowMove;
+    boundWindowUp;
     resizeObserver;
-    lastKnownSize = { width: 0, height: 0 };
-    resizeTimeout;
-    mergedConfig = DEFAULT_CONFIG;
-    layoutCompleted = false;
-    isLayoutFrozen = false;
-    // ============================================================================
-    // LIFECYCLE HOOKS
-    // ============================================================================
-    ngAfterViewInit() {
-        setTimeout(() => {
-            this.setupERD();
-        }, 100);
-        this.setupResizeObserver();
-    }
+    rootClass = true;
+    // ─── LIFECYCLE ────────────────────────────────────────────────────────
     ngOnChanges(changes) {
-        if (changes['nodes'] && !changes['nodes'].firstChange) {
-            this.setupERD();
-        }
-        if (changes['selectedNodeId'] && !changes['selectedNodeId'].firstChange) {
-            this.updateSelectionHighlighting();
-            this.emitStateChange();
-        }
-        if (changes['highlightedNodeIds'] && !changes['highlightedNodeIds'].firstChange) {
-            this.updateHighlighting();
-            this.emitStateChange();
-        }
-        if (changes['focusNodeId'] && !changes['focusNodeId'].firstChange) {
-            this.setupERD();
-            this.emitStateChange();
-        }
-        if (changes['focusDepth'] && !changes['focusDepth'].firstChange) {
-            if (this.focusNodeId) {
-                this.setupERD();
-                this.emitStateChange();
+        const nodesChanged = !!changes['nodes'];
+        // Compare config by the fields we actually use — consumers that bind
+        // an inline `[config]="{...}"` object literal get a new reference
+        // every CD cycle, so a naive `changes['config']` check would
+        // recompute + refit endlessly.
+        const configChanged = this.configAffectsLayout(changes['config']?.previousValue, changes['config']?.currentValue);
+        if (nodesChanged || configChanged) {
+            if (nodesChanged) {
+                this.activeSchemas = null;
+                this.expandedNodeIds = new Set();
+                this.hoverNodeId = null;
             }
+            // Honour `config.layoutAlgorithm` on first arrival; runtime
+            // changes happen via `setLayoutAlgorithm`.
+            if (this.config.layoutAlgorithm === 'dagre')
+                this.activeLayout = 'dagre';
+            else if (this.config.layoutAlgorithm === 'schema-grid')
+                this.activeLayout = 'schema-grid';
+            this.recompute();
+            // Fit-to-view once the DOM has the new canvas dimensions.
+            queueMicrotask(() => this.fitToView());
         }
-        if (changes['config'] && !changes['config'].firstChange) {
-            this.mergeConfig();
-            this.setupERD();
-        }
-    }
-    ngOnDestroy() {
-        if (this.simulation) {
-            this.simulation.stop();
-        }
-        if (this.resizeObserver) {
-            this.resizeObserver.disconnect();
-        }
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
+        if (changes['focusNodeId']) {
+            this.updateHighlightSet();
+            this.cdr.markForCheck();
         }
     }
-    // ============================================================================
-    // PUBLIC API - Zoom Control
-    // ============================================================================
-    /**
-     * Zoom in on the diagram by a fixed factor (1.2x).
-     * Uses smooth animation transition.
-     */
-    zoomIn() {
-        if (this.zoom && this.svg) {
-            this.svg.transition().duration(300).call(this.zoom.scaleBy, 1.2);
-        }
+    /** True iff any config field that influences the cached layout changed. */
+    configAffectsLayout(prev, curr) {
+        if (prev === curr)
+            return false;
+        return ((prev?.nodeWidth ?? null) !== (curr?.nodeWidth ?? null) ||
+            (prev?.fieldHeight ?? null) !== (curr?.fieldHeight ?? null) ||
+            (prev?.showAllFields ?? null) !== (curr?.showAllFields ?? null) ||
+            (prev?.showSchemaBands ?? null) !== (curr?.showSchemaBands ?? null) ||
+            (prev?.crowsFoot ?? null) !== (curr?.crowsFoot ?? null) ||
+            (prev?.maxFitZoom ?? null) !== (curr?.maxFitZoom ?? null) ||
+            (prev?.minZoom ?? null) !== (curr?.minZoom ?? null) ||
+            (prev?.maxZoom ?? null) !== (curr?.maxZoom ?? null));
     }
-    /**
-     * Zoom out on the diagram by a fixed factor (0.83x).
-     * Uses smooth animation transition.
-     */
-    zoomOut() {
-        if (this.zoom && this.svg) {
-            this.svg.transition().duration(300).call(this.zoom.scaleBy, 0.83);
-        }
+    ngAfterViewInit() {
+        this.resizeObserver = this.watchResize();
+        this.recompute();
+        queueMicrotask(() => this.fitToView());
     }
-    /**
-     * Reset zoom to default level (1x) and center the diagram.
-     * Uses smooth animation transition.
-     */
-    resetZoom() {
-        if (this.zoom && this.svg) {
-            this.svg.transition().duration(500).call(this.zoom.transform, d3.zoomIdentity);
-        }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        // Detach any pan listeners still bound from an in-progress drag.
+        if (this.boundWindowMove)
+            window.removeEventListener('mousemove', this.boundWindowMove);
+        if (this.boundWindowUp)
+            window.removeEventListener('mouseup', this.boundWindowUp);
     }
-    /**
-     * Zoom and pan to center on a specific node.
-     *
-     * @param nodeId - ID of the node to center on
-     * @param scale - Optional zoom scale (default: 1.5)
-     *
-     * @example
-     * ```typescript
-     * // Center on node with default zoom
-     * this.erdDiagram.zoomToNode('user-entity-id');
-     *
-     * // Center with custom zoom level
-     * this.erdDiagram.zoomToNode('user-entity-id', 2.0);
-     * ```
-     */
-    zoomToNode(nodeId, scale = 1.5) {
-        const node = this.internalNodes.find(n => n.id === nodeId);
-        if (!node || !this.zoom || !this.svg)
-            return;
-        const container = this.erdContainer.nativeElement;
-        const width = container.clientWidth;
-        const height = container.clientHeight;
-        const x = width / 2 - (node.x || 0) * scale;
-        const y = height / 2 - (node.y || 0) * scale;
-        this.svg.transition().duration(this.mergedConfig.animationDuration).call(this.zoom.transform, d3.zoomIdentity.translate(x, y).scale(scale));
+    // ─── RECOMPUTATION ────────────────────────────────────────────────────
+    /** Rebuild the layout + derived view-model from current inputs/state. */
+    recompute() {
+        this.totalCount = this.nodes.length;
+        const filteredBySchema = this.activeSchemas
+            ? this.nodes.filter(n => this.activeSchemas.has(n.schemaName || '_'))
+            : this.nodes;
+        const q = this.searchQuery.trim().toLowerCase();
+        const filtered = q
+            ? filteredBySchema.filter(n => n.name.toLowerCase().includes(q) ||
+                (n.schemaName?.toLowerCase().includes(q) ?? false) ||
+                n.fields.some(f => f.name.toLowerCase().includes(q)))
+            : filteredBySchema;
+        this.visibleCount = filtered.length;
+        const commonOpts = {
+            nodeWidth: this.config.nodeWidth ?? 220,
+            fieldHeight: this.config.fieldHeight ?? 22,
+            expandedNodeIds: this.expandedNodeIds,
+            showAllFields: this.config.showAllFields ?? false,
+        };
+        this.layout = this.activeLayout === 'dagre'
+            ? computeDagreLayout(filtered, {
+                ...commonOpts,
+                rankDir: this.config.dagreConfig?.rankDir ?? 'LR',
+                nodeSep: this.config.dagreConfig?.nodeSep,
+                rankSep: this.config.dagreConfig?.rankSep,
+            })
+            : computeErdLayout(filtered, commonOpts);
+        this.schemaChips = this.buildSchemaChips();
+        this.updateHighlightSet();
+        this.updateSelectedEntity();
+        this.cdr.markForCheck();
     }
     /**
-     * Fit all visible nodes within the viewport.
-     * Calculates optimal zoom level and position to show all nodes.
+     * Switch between the schema-grid and dagre hierarchical layouts at
+     * runtime.  Emits a state change so the consumer can persist the
+     * user's preference (via `userStateChange` on `mj-erd-composite`).
      *
-     * @param padding - Padding around nodes (default: 50px)
+     * Also clears the current focus/selection — switching layouts moves
+     * cards to entirely new positions, so the previously-selected entity
+     * would otherwise stay highlighted in a different spot with the side
+     * panel still open, which is jarring.  A clean slate is better.
      */
-    zoomToFit(padding = 50) {
-        if (!this.svg || !this.zoom || this.visibleNodes.length === 0)
-            return;
-        const container = this.erdContainer.nativeElement;
-        const width = container.clientWidth;
-        const height = container.clientHeight;
-        // Guard against zero container dimensions (container not laid out yet)
-        if (width === 0 || height === 0)
-            return;
-        // Calculate bounds
-        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-        this.visibleNodes.forEach(node => {
-            const halfWidth = node.width / 2;
-            const halfHeight = node.height / 2;
-            minX = Math.min(minX, (node.x || 0) - halfWidth);
-            minY = Math.min(minY, (node.y || 0) - halfHeight);
-            maxX = Math.max(maxX, (node.x || 0) + halfWidth);
-            maxY = Math.max(maxY, (node.y || 0) + halfHeight);
-        });
-        // Guard against invalid bounds (nodes without valid positions)
-        if (!isFinite(minX) || !isFinite(minY) || !isFinite(maxX) || !isFinite(maxY))
-            return;
-        const boundsWidth = maxX - minX + padding * 2;
-        const boundsHeight = maxY - minY + padding * 2;
-        // Guard against zero-dimension bounds
-        if (boundsWidth <= 0 || boundsHeight <= 0)
-            return;
-        const centerX = (minX + maxX) / 2;
-        const centerY = (minY + maxY) / 2;
-        const scale = Math.min(width / boundsWidth, height / boundsHeight, this.mergedConfig.maxZoom);
-        // Final sanity check before applying transform
-        if (!isFinite(scale) || scale <= 0)
+    setLayoutAlgorithm(algo) {
+        if (this.activeLayout === algo)
             return;
-        const translateX = width / 2 - centerX * scale;
-        const translateY = height / 2 - centerY * scale;
-        this.svg.transition().duration(this.mergedConfig.animationDuration).call(this.zoom.transform, d3.zoomIdentity.translate(translateX, translateY).scale(scale));
+        this.activeLayout = algo;
+        const hadSelection = !!(this.focusNodeId || this.selectedNodeId);
+        this.focusNodeId = null;
+        this.selectedNodeId = null;
+        this.hoverNodeId = null;
+        this.updateHighlightSet();
+        this.updateSelectedEntity();
+        if (hadSelection)
+            this.nodeDeselected.emit();
+        this.recompute();
+        queueMicrotask(() => this.fitToView());
+        this.stateChange.emit(this.getState());
     }
-    // ============================================================================
-    // PUBLIC API - Selection
-    // ============================================================================
-    /**
-     * Programmatically select a node by ID.
-     *
-     * @param nodeId - ID of the node to select
-     * @returns `true` if node was found and selected, `false` otherwise
-     */
-    selectNode(nodeId) {
-        const node = this.nodes.find(n => n.id === nodeId);
-        if (node) {
-            this.nodeSelected.emit(node);
-            return true;
+    buildSchemaChips() {
+        const counts = new Map();
+        for (const n of this.nodes) {
+            const s = n.schemaName || '_';
+            counts.set(s, (counts.get(s) ?? 0) + 1);
         }
-        return false;
+        return [...counts.entries()]
+            .sort(([a], [b]) => a.localeCompare(b))
+            .map(([name, count]) => ({
+            name,
+            count,
+            active: this.activeSchemas ? this.activeSchemas.has(name) : true,
+        }));
     }
-    /**
-     * Clear all selections.
-     */
-    deselectAll() {
-        this.nodeDeselected.emit();
-        this.clearAllHighlighting();
+    updateHighlightSet() {
+        const id = this.focusNodeId ?? this.hoverNodeId;
+        this.highlightSet = id ? getNeighbors(this.nodes, id) : null;
     }
-    // ============================================================================
-    // PUBLIC API - Highlighting
-    // ============================================================================
-    /**
-     * Highlight a specific node.
-     *
-     * @param nodeId - ID of the node to highlight
-     */
-    highlightNode(nodeId) {
-        if (!this.highlightedNodeIds.includes(nodeId)) {
-            this.highlightedNodeIds = [...this.highlightedNodeIds, nodeId];
-            this.updateHighlighting();
-            this.emitStateChange();
-        }
+    updateSelectedEntity() {
+        const id = this.focusNodeId ?? this.selectedNodeId;
+        this.selectedEntity = id ? this.nodes.find(n => n.id === id) ?? null : null;
     }
-    /**
-     * Clear all highlights.
-     */
-    clearHighlights() {
-        this.highlightedNodeIds = [];
-        this.updateHighlighting();
-        this.emitStateChange();
+    watchResize() {
+        const observer = new ResizeObserver(() => this.fitToView());
+        observer.observe(this.host.nativeElement);
+        return observer;
     }
+    // ─── PAN / ZOOM / FIT ────────────────────────────────────────────────
     /**
-     * Highlight a node and all its directly related nodes.
+     * Mousedown anywhere on the SVG (background OR a node card).  We
+     * arm a potential pan and attach window-level move/up listeners so
+     * the drag continues even if the cursor leaves the canvas (passes
+     * over the focus card, scrollbars, the chrome, etc.).
      *
-     * @param nodeId - ID of the center node
-     * @param depth - Number of relationship hops to highlight (default: 1)
+     * The actual `panning = true` flip happens in the move handler once
+     * the cursor crosses `DRAG_THRESHOLD` — that way short clicks still
+     * register as clicks on cards (no accidental selection-toggle from
+     * a tiny mouse jitter).
      */
-    highlightRelated(nodeId, depth = 1) {
-        const relatedIds = this.getRelatedNodeIds(nodeId, depth);
-        this.highlightedNodeIds = [nodeId, ...relatedIds];
-        this.updateHighlighting();
-        this.emitStateChange();
+    onBackgroundMouseDown(e) {
+        if (e.button !== 0)
+            return;
+        this.dragOrigin = { clientX: e.clientX, clientY: e.clientY };
+        this.dragMoved = false;
+        this.panStart = { x: e.clientX - this.transform.x, y: e.clientY - this.transform.y };
+        this.boundWindowMove = (ev) => this.onWindowMouseMove(ev);
+        this.boundWindowUp = (ev) => this.onWindowMouseUp(ev);
+        window.addEventListener('mousemove', this.boundWindowMove);
+        window.addEventListener('mouseup', this.boundWindowUp);
     }
-    /**
-     * Get nodes that are related to a specific node.
-     *
-     * @param nodeId - ID of the node to find relationships for
-     * @param depth - Number of relationship hops (default: 1)
-     * @returns Array of relationship information
-     */
-    getRelatedNodes(nodeId, depth = 1) {
-        const result = [];
-        const visited = new Set([nodeId]);
-        const toProcess = [{ id: nodeId, currentDepth: 0 }];
-        while (toProcess.length > 0) {
-            const current = toProcess.shift();
-            if (current.currentDepth >= depth)
-                continue;
-            // Find outgoing relationships
-            this.nodes.forEach(node => {
-                node.fields.forEach(field => {
-                    if (field.relatedNodeId) {
-                        if (node.id === current.id && !visited.has(field.relatedNodeId)) {
-                            const targetNode = this.nodes.find(n => n.id === field.relatedNodeId);
-                            if (targetNode) {
-                                visited.add(field.relatedNodeId);
-                                toProcess.push({ id: field.relatedNodeId, currentDepth: current.currentDepth + 1 });
-                                result.push({
-                                    node: targetNode,
-                                    link: {
-                                        sourceNodeId: node.id,
-                                        targetNodeId: field.relatedNodeId,
-                                        sourceField: field,
-                                        isSelfReference: node.id === field.relatedNodeId
-                                    },
-                                    direction: 'outgoing',
-                                    field
-                                });
-                            }
-                        }
-                        // Incoming relationships
-                        if (field.relatedNodeId === current.id && !visited.has(node.id)) {
-                            visited.add(node.id);
-                            toProcess.push({ id: node.id, currentDepth: current.currentDepth + 1 });
-                            result.push({
-                                node,
-                                link: {
-                                    sourceNodeId: node.id,
-                                    targetNodeId: field.relatedNodeId,
-                                    sourceField: field,
-                                    isSelfReference: node.id === field.relatedNodeId
-                                },
-                                direction: 'incoming',
-                                field
-                            });
-                        }
-                    }
-                });
-            });
+    onWindowMouseMove(e) {
+        if (!this.dragOrigin || !this.panStart)
+            return;
+        if (!this.panning) {
+            const dx = e.clientX - this.dragOrigin.clientX;
+            const dy = e.clientY - this.dragOrigin.clientY;
+            if (Math.hypot(dx, dy) < ERDDiagramComponent.DRAG_THRESHOLD)
+                return;
+            this.panning = true;
+            this.dragMoved = true;
         }
-        return result;
-    }
-    // ============================================================================
-    // PUBLIC API - State Management
-    // ============================================================================
-    /**
-     * Get the current state of the diagram for persistence.
-     * Includes selection, highlights, zoom, pan, and node positions.
-     *
-     * @returns Current diagram state
-     *
-     * @example
-     * ```typescript
-     * // Save to localStorage
-     * const state = erdDiagram.getState();
-     * localStorage.setItem('erd-state', JSON.stringify(state));
-     * ```
-     */
-    getState() {
-        const zoomState = this.getZoomState();
-        const nodePositions = {};
-        this.internalNodes.forEach(node => {
-            nodePositions[node.id] = {
-                x: node.x || 0,
-                y: node.y || 0,
-                fx: node.fx,
-                fy: node.fy
-            };
-        });
-        return {
-            selectedNodeId: this.selectedNodeId,
-            highlightedNodeIds: [...this.highlightedNodeIds],
-            zoomLevel: zoomState.zoomLevel,
-            translateX: zoomState.translateX,
-            translateY: zoomState.translateY,
-            focusNodeId: this.focusNodeId,
-            focusDepth: this.focusDepth,
-            nodePositions
+        this.transform = {
+            ...this.transform,
+            x: e.clientX - this.panStart.x,
+            y: e.clientY - this.panStart.y,
         };
+        this.emitZoom();
+        this.cdr.markForCheck();
     }
-    /**
-     * Restore a previously saved diagram state.
-     *
-     * @param state - State object from `getState()`
-     * @param restorePositions - Whether to restore node positions (default: true)
-     *
-     * @example
-     * ```typescript
-     * // Restore from localStorage
-     * const savedState = JSON.parse(localStorage.getItem('erd-state'));
-     * if (savedState) {
-     *   erdDiagram.setState(savedState);
-     * }
-     * ```
-     */
-    setState(state, restorePositions = true) {
-        if (state.highlightedNodeIds) {
-            this.highlightedNodeIds = [...state.highlightedNodeIds];
+    onWindowMouseUp(_e) {
+        // If a drag actually happened, swallow the synthetic click that
+        // browsers fire on mouseup so it doesn't reach the node click
+        // handler and toggle the focus.  We use capture phase + once so
+        // we only catch the immediate next click from this mouse-up.
+        if (this.dragMoved) {
+            const swallow = (ev) => {
+                ev.stopPropagation();
+                ev.preventDefault();
+            };
+            window.addEventListener('click', swallow, { capture: true, once: true });
         }
-        // Restore zoom/pan
-        if (this.svg && this.zoom && state.zoomLevel != null) {
-            this.svg.call(this.zoom.transform, d3.zoomIdentity
-                .translate(state.translateX || 0, state.translateY || 0)
-                .scale(state.zoomLevel));
+        this.panning = false;
+        this.panStart = null;
+        this.dragOrigin = null;
+        this.dragMoved = false;
+        if (this.boundWindowMove) {
+            window.removeEventListener('mousemove', this.boundWindowMove);
+            this.boundWindowMove = undefined;
         }
-        // Restore node positions
-        if (restorePositions && state.nodePositions) {
-            this.internalNodes.forEach(node => {
-                const savedPos = state.nodePositions?.[node.id];
-                if (savedPos) {
-                    node.x = savedPos.x;
-                    node.y = savedPos.y;
-                    node.fx = savedPos.fx;
-                    node.fy = savedPos.fy;
-                }
-            });
-            // Restart simulation briefly to update display
-            if (this.simulation) {
-                this.simulation.alpha(0.1).restart();
-            }
+        if (this.boundWindowUp) {
+            window.removeEventListener('mouseup', this.boundWindowUp);
+            this.boundWindowUp = undefined;
         }
-        this.updateSelectionHighlighting();
-        this.updateHighlighting();
     }
-    // ============================================================================
-    // PUBLIC API - Layout Control
-    // ============================================================================
-    /**
-     * Freeze the layout simulation.
-     * Nodes will stay in their current positions and won't move.
-     */
-    freezeLayout() {
-        this.isLayoutFrozen = true;
-        if (this.simulation) {
-            this.simulation.stop();
-            // Fix all node positions
-            this.internalNodes.forEach(node => {
-                node.fx = node.x;
-                node.fy = node.y;
-            });
-        }
-    }
-    /**
-     * Unfreeze the layout simulation.
-     * Nodes will resume natural movement based on forces.
-     */
-    unfreezeLayout() {
-        this.isLayoutFrozen = false;
-        // Unfix all node positions
-        this.internalNodes.forEach(node => {
-            node.fx = null;
-            node.fy = null;
-        });
-        if (this.simulation) {
-            this.simulation.alpha(0.3).restart();
-        }
-    }
-    /**
-     * Center the diagram without changing zoom level.
-     */
-    centerDiagram() {
-        if (!this.svg || !this.zoom || this.visibleNodes.length === 0)
+    onWheel(e) {
+        if (this.config.enableZoom === false)
             return;
-        const container = this.erdContainer.nativeElement;
-        const width = container.clientWidth;
-        const height = container.clientHeight;
-        // Calculate center of all nodes
-        let sumX = 0, sumY = 0;
-        this.visibleNodes.forEach(node => {
-            sumX += node.x || 0;
-            sumY += node.y || 0;
-        });
-        const centerX = sumX / this.visibleNodes.length;
-        const centerY = sumY / this.visibleNodes.length;
-        const currentTransform = d3.zoomTransform(this.svg.node());
-        const translateX = width / 2 - centerX * currentTransform.k;
-        const translateY = height / 2 - centerY * currentTransform.k;
-        this.svg.transition().duration(this.mergedConfig.animationDuration).call(this.zoom.transform, d3.zoomIdentity.translate(translateX, translateY).scale(currentTransform.k));
-    }
-    // ============================================================================
-    // PUBLIC API - Utilities
-    // ============================================================================
-    /**
-     * Rebuild the entire ERD visualization.
-     */
-    refresh() {
-        this.setupERD();
-    }
-    /**
-     * Trigger a resize recalculation.
-     * Call this when the container size changes.
-     */
-    triggerResize() {
-        if (this.resizeTimeout) {
-            clearTimeout(this.resizeTimeout);
-        }
-        this.resizeTimeout = window.setTimeout(() => {
-            this.resizeSVG();
-        }, 100);
-    }
-    /**
-     * Get current zoom state.
-     *
-     * @returns Current zoom level and translation
-     */
-    getZoomState() {
-        if (!this.svg) {
-            return { zoomLevel: 1, translateX: 0, translateY: 0 };
-        }
-        const transform = d3.zoomTransform(this.svg.node());
-        return {
-            zoomLevel: transform.k,
-            translateX: transform.x,
-            translateY: transform.y
+        e.preventDefault();
+        const svg = this.canvasRef?.nativeElement;
+        if (!svg)
+            return;
+        const rect = svg.getBoundingClientRect();
+        const mx = e.clientX - rect.left;
+        const my = e.clientY - rect.top;
+        const delta = -e.deltaY * 0.001;
+        const minZoom = this.config.minZoom ?? 0.15;
+        const maxZoom = this.config.maxZoom ?? 2.5;
+        const newK = Math.max(minZoom, Math.min(maxZoom, this.transform.k * (1 + delta)));
+        const ratio = newK / this.transform.k;
+        this.transform = {
+            k: newK,
+            x: mx - (mx - this.transform.x) * ratio,
+            y: my - (my - this.transform.y) * ratio,
         };
+        this.emitZoom();
+        this.cdr.markForCheck();
     }
-    /**
-     * Export the diagram as an SVG string.
-     *
-     * @returns SVG markup string
-     */
-    exportAsSVG() {
-        if (!this.svg)
-            return '';
-        const svgNode = this.svg.node();
-        if (!svgNode)
-            return '';
-        const serializer = new XMLSerializer();
-        return serializer.serializeToString(svgNode);
-    }
-    // ============================================================================
-    // SETUP METHODS
-    // ============================================================================
-    setupERD() {
-        if (!this.erdContainer?.nativeElement) {
+    zoomBy(factor) {
+        const svg = this.canvasRef?.nativeElement;
+        if (!svg)
             return;
-        }
-        this.layoutCompleted = false;
-        this.mergeConfig();
-        this.clearVisualization();
-        this.createInternalNodes();
-        this.createInternalLinks();
-        this.applyFocusMode();
-        this.createVisualization();
-    }
-    mergeConfig() {
-        this.mergedConfig = {
-            ...DEFAULT_CONFIG,
-            ...this.config,
-            colors: {
-                ...DEFAULT_CONFIG.colors,
-                ...this.config.colors
-            },
-            dagreConfig: {
-                ...DEFAULT_DAGRE_CONFIG,
-                ...this.config.dagreConfig
-            }
+        const rect = svg.getBoundingClientRect();
+        const mx = rect.width / 2;
+        const my = rect.height / 2;
+        const minZoom = this.config.minZoom ?? 0.15;
+        const maxZoom = this.config.maxZoom ?? 2.5;
+        const newK = Math.max(minZoom, Math.min(maxZoom, this.transform.k * factor));
+        const ratio = newK / this.transform.k;
+        this.transform = {
+            k: newK,
+            x: mx - (mx - this.transform.x) * ratio,
+            y: my - (my - this.transform.y) * ratio,
         };
-        // Map 'horizontal' and 'vertical' layout algorithms to dagre with appropriate direction
-        if (this.mergedConfig.layoutAlgorithm === 'horizontal') {
-            this.mergedConfig.dagreConfig.rankDir = 'LR';
-        }
-        else if (this.mergedConfig.layoutAlgorithm === 'vertical') {
-            this.mergedConfig.dagreConfig.rankDir = 'TB';
-        }
+        this.emitZoom();
+        this.cdr.markForCheck();
     }
-    resizeSVG() {
-        if (!this.svg || !this.erdContainer?.nativeElement) {
+    fitToView() {
+        const svg = this.canvasRef?.nativeElement;
+        if (!svg)
             return;
-        }
-        const container = this.erdContainer.nativeElement;
-        const width = container.clientWidth || 800;
-        const height = container.clientHeight || 600;
-        if (Math.abs(this.lastKnownSize.width - width) < 5 &&
-            Math.abs(this.lastKnownSize.height - height) < 5) {
+        const rect = svg.getBoundingClientRect();
+        if (rect.width === 0 || rect.height === 0 || this.layout.totalWidth === 0)
+            return;
+        const padding = 60;
+        // Allow fit to scale UP for small diagrams (e.g. the Database Designer
+        // wizard preview, where a single entity + a couple of satellites
+        // would otherwise look lost in the pane).  Consumers can override via
+        // `config.maxFitZoom`.  Default 2.5x: a 220px card becomes ~550px,
+        // which comfortably fills a typical preview pane without looking
+        // cartoonish (13px text → ~33px, still a readable ceiling).
+        const maxFit = this.config.maxFitZoom ?? 2.5;
+        const idealK = Math.min((rect.width - padding * 2) / this.layout.totalWidth, (rect.height - padding * 2) / this.layout.totalHeight, maxFit);
+        // Clamp the fit zoom so cards stay legible.  On very large schemas
+        // (hundreds of entities) fit-to-view would otherwise shrink each card
+        // to a few pixels wide.  We'd rather show part of the canvas at a
+        // readable zoom and let the user pan to see the rest.
+        const minZoom = this.config.minZoom ?? 0.35;
+        const k = Math.max(idealK, minZoom);
+        // Center horizontally only if the canvas fits; otherwise anchor at left
+        // so the user starts at the first schema band instead of the middle.
+        const canvasFitsX = this.layout.totalWidth * k <= rect.width - padding * 2;
+        const canvasFitsY = this.layout.totalHeight * k <= rect.height - padding * 2;
+        const newX = canvasFitsX ? (rect.width - this.layout.totalWidth * k) / 2 : padding;
+        const newY = canvasFitsY ? (rect.height - this.layout.totalHeight * k) / 2 : padding;
+        // Idempotent guard.  If the computed transform is effectively identical
+        // to the current one, bail out without reassigning or calling
+        // markForCheck.  Without this, a consumer that passes an inline
+        // `[config]="{...}"` object literal re-triggers ngOnChanges on every
+        // change-detection tick, producing an infinite fitToView → markForCheck
+        // → CD → ngOnChanges → fitToView loop (NG0103).
+        const TOL = 0.001;
+        if (Math.abs(this.transform.k - k) < TOL &&
+            Math.abs(this.transform.x - newX) < 0.5 &&
+            Math.abs(this.transform.y - newY) < 0.5) {
             return;
         }
-        this.lastKnownSize = { width, height };
-        const svgElement = this.svg.node();
-        if (svgElement) {
-            svgElement.style.width = '100%';
-            svgElement.style.height = '100%';
-        }
-        this.svg.attr('viewBox', `0 0 ${width} ${height}`);
-        if (this.simulation && !this.isLayoutFrozen) {
-            this.simulation.force('center', d3.forceCenter(width / 2, height / 2));
-            this.simulation.alpha(0.3).restart();
-        }
+        this.transform = { k, x: newX, y: newY };
+        this.emitZoom();
+        this.layoutComplete.emit();
+        this.cdr.markForCheck();
     }
-    setupResizeObserver() {
-        if (!this.erdContainer?.nativeElement) {
+    centerOn(nodeId) {
+        const n = this.layout.nodes.find(x => x.id === nodeId);
+        const svg = this.canvasRef?.nativeElement;
+        if (!n || !svg)
             return;
-        }
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.resizeTimeout) {
-                clearTimeout(this.resizeTimeout);
-            }
-            this.resizeTimeout = window.setTimeout(() => {
-                const container = this.erdContainer?.nativeElement;
-                if (!container)
-                    return;
-                const newWidth = container.clientWidth;
-                const newHeight = container.clientHeight;
-                if (Math.abs(this.lastKnownSize.width - newWidth) >= 5 ||
-                    Math.abs(this.lastKnownSize.height - newHeight) >= 5) {
-                    requestAnimationFrame(() => {
-                        this.resizeSVG();
-                    });
-                }
-            }, 50);
-        });
-        this.resizeObserver.observe(this.erdContainer.nativeElement);
+        const rect = svg.getBoundingClientRect();
+        const k = Math.max(this.transform.k, 0.9);
+        this.transform = {
+            k,
+            x: rect.width / 2 - (n.x + n.width / 2) * k,
+            y: rect.height / 2 - (n.y + n.height / 2) * k,
+        };
+        this.emitZoom();
+        // External callers (e.g. zoomToNode invoked from the side panel)
+        // need CD to pick up the new transform — onNodeClick used to do
+        // this itself but external pathways were silently no-op'ing.
+        this.cdr.markForCheck();
     }
-    clearVisualization() {
-        if (this.simulation) {
-            this.simulation.stop();
-        }
-        d3.select(this.erdContainer.nativeElement).selectAll('*').remove();
+    emitZoom() {
+        this.zoomChange.emit({
+            zoomLevel: this.transform.k,
+            translateX: this.transform.x,
+            translateY: this.transform.y,
+        });
     }
-    // ============================================================================
-    // FOCUS MODE
-    // ============================================================================
-    applyFocusMode() {
-        if (!this.focusNodeId) {
-            // No focus mode - show all nodes
-            this.visibleNodes = [...this.internalNodes];
-            this.visibleLinks = [...this.internalLinks];
+    // ─── NODE INTERACTIONS ───────────────────────────────────────────────
+    onNodeClick(node, e) {
+        e.stopPropagation();
+        const event = { node, mouseEvent: e, cancel: false };
+        this.nodeClick.emit(event);
+        if (event.cancel)
             return;
+        if (this.focusNodeId === node.id) {
+            // Toggle off — deselect.
+            this.focusNodeId = null;
+            this.selectedNodeId = null;
+            this.nodeDeselected.emit();
         }
-        // Get IDs of nodes within focus depth
-        const visibleIds = new Set([this.focusNodeId]);
-        const relatedIds = this.getRelatedNodeIds(this.focusNodeId, this.focusDepth);
-        relatedIds.forEach(id => visibleIds.add(id));
-        // Filter nodes
-        this.visibleNodes = this.internalNodes.filter(n => visibleIds.has(n.id));
-        // Filter links - only show links between visible nodes
-        this.visibleLinks = this.internalLinks.filter(link => {
-            const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
-            const targetId = typeof link.target === 'string' ? link.target : link.target.id;
-            return visibleIds.has(sourceId) && visibleIds.has(targetId);
-        });
-    }
-    getRelatedNodeIds(nodeId, depth) {
-        const visited = new Set([nodeId]);
-        const toProcess = [{ id: nodeId, currentDepth: 0 }];
-        const result = [];
-        while (toProcess.length > 0) {
-            const current = toProcess.shift();
-            if (current.currentDepth >= depth)
-                continue;
-            // Find relationships
-            this.nodes.forEach(node => {
-                node.fields.forEach(field => {
-                    if (field.relatedNodeId) {
-                        // Outgoing from current
-                        if (node.id === current.id && !visited.has(field.relatedNodeId)) {
-                            visited.add(field.relatedNodeId);
-                            result.push(field.relatedNodeId);
-                            toProcess.push({ id: field.relatedNodeId, currentDepth: current.currentDepth + 1 });
-                        }
-                        // Incoming to current
-                        if (field.relatedNodeId === current.id && !visited.has(node.id)) {
-                            visited.add(node.id);
-                            result.push(node.id);
-                            toProcess.push({ id: node.id, currentDepth: current.currentDepth + 1 });
-                        }
-                    }
-                });
-            });
+        else {
+            this.focusNodeId = node.id;
+            this.selectedNodeId = node.id;
+            this.nodeSelected.emit(node);
+            this.centerOn(node.id);
         }
-        return result;
+        this.updateHighlightSet();
+        this.updateSelectedEntity();
+        this.cdr.markForCheck();
     }
-    // ============================================================================
-    // NODE/LINK CREATION
-    // ============================================================================
-    createInternalNodes() {
-        const cfg = this.mergedConfig;
-        this.internalNodes = this.nodes.map(node => {
-            const primaryKeys = node.fields.filter(f => f.isPrimaryKey);
-            const foreignKeys = node.fields.filter(f => f.relatedNodeId && !f.isPrimaryKey);
-            const fieldCount = Math.max(1, primaryKeys.length + foreignKeys.length);
-            const calculatedHeight = Math.min(cfg.nodeBaseHeight + (fieldCount * cfg.fieldHeight), cfg.maxNodeHeight);
-            return {
-                id: node.id,
-                name: node.name || node.schemaName || 'Unknown',
-                node: node,
-                width: cfg.nodeWidth,
-                height: calculatedHeight,
-                primaryKeys: primaryKeys,
-                foreignKeys: foreignKeys
-            };
+    onNodeMouseEnter(node, e) {
+        this.hoverNodeId = node.id;
+        this.updateHighlightSet();
+        const related = this.nodes.filter(n => this.highlightSet?.has(n.id) && n.id !== node.id);
+        this.nodeHover.emit({
+            node, mouseEvent: e, relatedNodes: related,
+            position: { x: e.clientX, y: e.clientY },
         });
+        this.cdr.markForCheck();
     }
-    createInternalLinks() {
-        this.internalLinks = [];
-        const nodeMap = new Map(this.internalNodes.map(n => [n.id, n]));
-        this.nodes.forEach(node => {
-            node.fields.forEach(field => {
-                if (field.relatedNodeId) {
-                    const sourceNode = nodeMap.get(node.id);
-                    const targetNode = nodeMap.get(field.relatedNodeId);
-                    if (sourceNode && targetNode) {
-                        const isSelfReference = node.id === field.relatedNodeId;
-                        const targetField = targetNode.primaryKeys.find(pk => pk.name === field.relatedFieldName);
-                        this.internalLinks.push({
-                            source: sourceNode,
-                            target: targetNode,
-                            sourceField: field,
-                            targetField: targetField,
-                            isSelfReference: isSelfReference
-                        });
-                    }
-                }
-            });
-        });
+    onNodeMouseLeave(node) {
+        this.hoverNodeId = null;
+        this.updateHighlightSet();
+        this.nodeHoverEnd.emit(node);
+        this.cdr.markForCheck();
+    }
+    onToggleExpand(nodeId, e) {
+        e.stopPropagation();
+        if (this.expandedNodeIds.has(nodeId))
+            this.expandedNodeIds.delete(nodeId);
+        else
+            this.expandedNodeIds.add(nodeId);
+        // New Set reference so @for trackBy treats it as changed.
+        this.expandedNodeIds = new Set(this.expandedNodeIds);
+        this.recompute();
+    }
+    // ─── CHROME INTERACTIONS ─────────────────────────────────────────────
+    onSearchChange(value) {
+        this.searchQuery = value;
+        this.recompute();
+    }
+    onClearSearch() {
+        this.searchQuery = '';
+        this.recompute();
+    }
+    onSchemaChipToggle(schemaName) {
+        const current = this.activeSchemas ?? new Set(this.schemaChips.map(c => c.name));
+        const next = new Set(current);
+        if (next.has(schemaName))
+            next.delete(schemaName);
+        else
+            next.add(schemaName);
+        this.activeSchemas = next.size === this.schemaChips.length ? null : next;
+        this.recompute();
+    }
+    onRequestRefresh() {
+        this.refreshRequested.emit();
+    }
+    // ─── DERIVED DATA FOR TEMPLATE ───────────────────────────────────────
+    /** Path string for an edge — uses the orthogonal polyline from layout. */
+    edgePath(edge) {
+        return pointsToPath(edge.points);
     }
-    // ============================================================================
-    // DAGRE LAYOUT
-    // ============================================================================
     /**
-     * Applies dagre hierarchical layout to position nodes and compute edge paths.
-     * This provides clean, orthogonal edge routing.
+     * Whether to render FK field labels along edges.  Defaults to ON in
+     * both layouts — the zoom-gate (>=0.55x) keeps the labels off when
+     * the user is zoomed out far enough to see hundreds of entities, so
+     * "noise on dense views" isn't a real concern.  Consumers can still
+     * force off via `config.showRelationshipLabels: false`.
      */
-    applyDagreLayout() {
-        const cfg = this.mergedConfig;
-        const dagreCfg = cfg.dagreConfig;
-        // Create a new directed graph
-        const g = new dagre.graphlib.Graph({ directed: true, multigraph: true });
-        // Set graph options
-        g.setGraph({
-            rankdir: dagreCfg.rankDir,
-            nodesep: dagreCfg.nodeSep,
-            ranksep: dagreCfg.rankSep,
-            edgesep: dagreCfg.edgeSep,
-            ranker: dagreCfg.ranker,
-            align: dagreCfg.align
-        });
-        // Default edge label (required by dagre)
-        g.setDefaultEdgeLabel(() => ({}));
-        // Add nodes to the graph
-        this.visibleNodes.forEach(node => {
-            g.setNode(node.id, {
-                width: node.width,
-                height: node.height,
-                label: node.name
-            });
-        });
-        // Add edges to the graph
-        this.visibleLinks.forEach((link, index) => {
-            const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
-            const targetId = typeof link.target === 'string' ? link.target : link.target.id;
-            // Use index as edge name for multigraph support (multiple edges between same nodes)
-            g.setEdge(sourceId, targetId, {
-                label: link.sourceField.name || '',
-                labelpos: 'c',
-                labeloffset: 10
-            }, `edge-${index}`);
-        });
-        // Run the layout algorithm
-        dagre.layout(g);
-        // Apply computed positions to nodes
-        this.visibleNodes.forEach(node => {
-            const dagreNode = g.node(node.id);
-            if (dagreNode) {
-                node.x = dagreNode.x;
-                node.y = dagreNode.y;
-                // Fix position to prevent force simulation from moving nodes
-                node.fx = dagreNode.x;
-                node.fy = dagreNode.y;
-            }
-        });
-        // Store edge points for orthogonal path rendering
-        this.visibleLinks.forEach((link, index) => {
-            const sourceId = typeof link.source === 'string' ? link.source : link.source.id;
-            const targetId = typeof link.target === 'string' ? link.target : link.target.id;
-            const edge = g.edge(sourceId, targetId, `edge-${index}`);
-            if (edge && edge.points) {
-                link.points = edge.points;
-            }
-        });
+    get showEdgeLabels() {
+        const enabled = this.config.showRelationshipLabels ?? true;
+        if (!enabled)
+            return false;
+        return this.transform.k >= 0.55;
     }
     /**
-     * Checks if the current layout algorithm uses dagre.
+     * Pick a point along the edge polyline for a label and approximate
+     * its width.  Returns null for self-loops (no good place to put text).
+     * Uses the longest horizontal segment when one exists; falls back to
+     * the segment midpoint otherwise.
      */
-    usesDagreLayout() {
-        const algo = this.mergedConfig.layoutAlgorithm;
-        return algo === 'dagre' || algo === 'horizontal' || algo === 'vertical';
-    }
-    // ============================================================================
-    // VISUALIZATION
-    // ============================================================================
-    createVisualization() {
-        const container = this.erdContainer.nativeElement;
-        const width = container.clientWidth || 800;
-        const height = container.clientHeight || 600;
-        const cfg = this.mergedConfig;
-        const colors = cfg.colors;
-        this.lastKnownSize = { width, height };
-        // Create zoom behavior
-        if (cfg.enableZoom) {
-            this.zoom = d3.zoom()
-                .scaleExtent([cfg.minZoom, cfg.maxZoom])
-                .on('zoom', (event) => {
-                if (this.svg) {
-                    this.svg.select('.chart-area').attr('transform', event.transform);
-                    this.zoomChange.emit({
-                        zoomLevel: event.transform.k,
-                        translateX: event.transform.x,
-                        translateY: event.transform.y
-                    });
-                }
-            });
-        }
-        // Create SVG
-        this.svg = d3
-            .select(container)
-            .append('svg')
-            .attr('viewBox', `0 0 ${width} ${height}`)
-            .style('width', '100%')
-            .style('height', '100%')
-            .style('position', 'absolute')
-            .style('top', '0')
-            .style('left', '0');
-        if (this.zoom) {
-            this.svg.call(this.zoom);
-        }
-        // Background click handler
-        this.svg.on('click', (event) => {
-            if (event.target === event.currentTarget) {
-                this.nodeDeselected.emit();
-                this.clearAllHighlighting();
+    edgeLabelPosition(edge) {
+        if (edge.selfReference)
+            return null;
+        const pts = edge.points;
+        if (pts.length < 2)
+            return null;
+        // Find the longest horizontal segment so the label sits on a
+        // straight portion, not over a corner.
+        let bestIdx = 0;
+        let bestLen = 0;
+        for (let i = 0; i < pts.length - 1; i++) {
+            const [x1, y1] = pts[i];
+            const [x2, y2] = pts[i + 1];
+            if (Math.abs(y2 - y1) > 0.5)
+                continue; // skip vertical segs
+            const len = Math.abs(x2 - x1);
+            if (len > bestLen) {
+                bestLen = len;
+                bestIdx = i;
             }
-        });
-        // Background context menu handler
-        this.svg.on('contextmenu', (event) => {
-            if (event.target === event.currentTarget) {
-                const contextEvent = {
-                    mouseEvent: event,
-                    cancel: false,
-                    position: { x: event.clientX, y: event.clientY },
-                    diagramPosition: this.screenToDiagramCoords(event.clientX, event.clientY)
-                };
-                this.diagramContextMenu.emit(contextEvent);
-                if (contextEvent.cancel) {
-                    event.preventDefault();
-                }
-            }
-        });
-        const chartArea = this.svg.append('g').attr('class', 'chart-area');
-        // Define arrow marker
-        this.svg
-            .append('defs')
-            .selectAll('marker')
-            .data(['end-arrow'])
-            .enter()
-            .append('marker')
-            .attr('id', 'end-arrow')
-            .attr('viewBox', '0 -5 10 10')
-            .attr('refX', 8)
-            .attr('refY', 0)
-            .attr('markerWidth', 6)
-            .attr('markerHeight', 6)
-            .attr('orient', 'auto')
-            .append('path')
-            .attr('d', 'M0,-5L10,0L0,5')
-            .attr('fill', colors.linkColor);
-        // Apply layout based on algorithm
-        if (this.usesDagreLayout()) {
-            // Use dagre for hierarchical layout with orthogonal edges
-            this.applyDagreLayout();
-            this.simulation = null; // No force simulation needed
-        }
-        else {
-            // Create force simulation with visible nodes only (original behavior)
-            this.simulation = d3
-                .forceSimulation(this.visibleNodes)
-                .force('link', d3
-                .forceLink(this.visibleLinks)
-                .id((d) => d.id)
-                .distance((d) => {
-                const source = d.source;
-                const target = d.target;
-                const sourceSize = Math.max(source.width, source.height);
-                const targetSize = Math.max(target.width, target.height);
-                return (sourceSize + targetSize) / 2 + cfg.linkDistance;
-            }))
-                .force('charge', d3.forceManyBody().strength(cfg.chargeStrength))
-                .force('center', d3.forceCenter(width / 2, height / 2))
-                .force('collision', d3.forceCollide().radius((d) => {
-                return Math.max(d.width, d.height) / 2 + cfg.collisionPadding;
-            }));
-        }
-        // Create links
-        const link = chartArea
-            .selectAll('.link')
-            .data(this.visibleLinks)
-            .enter()
-            .append('g')
-            .attr('class', (d) => d.isSelfReference ? 'link-group self-reference' : 'link-group');
-        link
-            .append('path')
-            .attr('class', 'link')
-            .attr('stroke', colors.linkColor)
-            .attr('stroke-opacity', 0.8)
-            .attr('stroke-width', 2)
-            .attr('fill', 'none')
-            .attr('marker-end', (d) => (d.isSelfReference ? 'none' : 'url(#end-arrow)'));
-        if (cfg.showRelationshipLabels) {
-            // Add background rect for label (will be sized after text is rendered)
-            // Self-referencing links get distinct styling via .self-reference CSS class
-            link
-                .append('rect')
-                .attr('class', 'link-label-bg')
-                .attr('stroke-width', 0.5)
-                .attr('stroke-opacity', (d) => d.isSelfReference ? 0.6 : 0.4)
-                .attr('rx', 2)
-                .attr('ry', 2);
-            // Add the label text
-            link
-                .append('text')
-                .attr('class', 'link-label')
-                .attr('font-size', '10px')
-                .attr('text-anchor', 'middle')
-                .attr('dominant-baseline', 'middle')
-                .text((d) => d.sourceField.name || '');
-        }
-        // Link event handlers
-        this.attachLinkEventHandlers(link);
-        // Create nodes
-        const nodeGroup = chartArea
-            .selectAll('.node')
-            .data(this.visibleNodes)
-            .enter()
-            .append('g')
-            .attr('class', 'node')
-            .style('cursor', this.readOnly ? 'default' : 'pointer');
-        if (cfg.enableDragging && !this.readOnly) {
-            nodeGroup.call(d3.drag()
-                .on('start', (event, d) => this.dragstarted(event, d))
-                .on('drag', (event, d) => this.dragged(event, d))
-                .on('end', (event, d) => this.dragended(event, d)));
-        }
-        // Node rectangle
-        nodeGroup
-            .append('rect')
-            .attr('class', 'entity-rect')
-            .attr('width', (d) => d.width)
-            .attr('height', (d) => d.height)
-            .attr('x', (d) => -d.width / 2)
-            .attr('y', (d) => -d.height / 2)
-            .attr('fill', colors.nodeBackground)
-            .attr('stroke', colors.nodeBorder)
-            .attr('stroke-width', 2)
-            .attr('rx', 4);
-        // Node header
-        nodeGroup
-            .append('rect')
-            .attr('class', 'entity-header')
-            .attr('width', (d) => d.width)
-            .attr('height', 30)
-            .attr('x', (d) => -d.width / 2)
-            .attr('y', (d) => -d.height / 2)
-            .attr('fill', colors.nodeHeader)
-            .attr('rx', 4);
-        nodeGroup
-            .append('rect')
-            .attr('class', 'entity-header-bottom')
-            .attr('width', (d) => d.width)
-            .attr('height', 15)
-            .attr('x', (d) => -d.width / 2)
-            .attr('y', (d) => -d.height / 2 + 15)
-            .attr('fill', colors.nodeHeader);
-        // Node name
-        const entityNameText = nodeGroup
-            .append('text')
-            .attr('class', 'entity-name')
-            .attr('text-anchor', 'middle')
-            .attr('y', (d) => -d.height / 2 + 20)
-            .attr('font-size', '12px')
-            .attr('font-weight', 'bold')
-            .attr('fill', colors.nodeHeaderText)
-            .text((d) => d.name);
-        // Truncate entity names that overflow the header
-        entityNameText.each((_d, i, nodes) => {
-            this.truncateTextElement(nodes[i], cfg.nodeWidth - 16);
-        });
-        // Add fields if configured
-        if (cfg.showFieldDetails) {
-            this.renderNodeFields(nodeGroup, colors);
         }
-        // Event handlers
-        this.attachNodeEventHandlers(nodeGroup);
-        // Tooltips
-        nodeGroup
-            .append('title')
-            .text((d) => `${d.name}\nPrimary Keys: ${d.primaryKeys.length}\nForeign Keys: ${d.foreignKeys.length}`);
-        // Handle layout completion based on algorithm type
-        if (this.usesDagreLayout()) {
-            // Dagre layout is synchronous - positions are already set
-            this.updatePositions(link, nodeGroup);
-            this.layoutCompleted = true;
-            this.layoutComplete.emit();
-            // Fit to view after positions are set
-            if (cfg.fitOnLoad && this.visibleNodes.length > 1) {
-                setTimeout(() => this.zoomToFit(), 50);
-            }
-        }
-        else if (this.simulation) {
-            // Force simulation layout
-            if (cfg.skipAnimation) {
-                // Run simulation to completion without animation
-                this.simulation.stop();
-                // Run enough ticks to settle the layout (typically 300 is enough)
-                const tickCount = 300;
-                for (let i = 0; i < tickCount; i++) {
-                    this.simulation.tick();
-                }
-                // Update positions once at the end
-                this.updatePositions(link, nodeGroup);
-                this.layoutCompleted = true;
-                this.layoutComplete.emit();
-                // Fit to view after positions are set
-                if (cfg.fitOnLoad && this.visibleNodes.length > 1) {
-                    setTimeout(() => this.zoomToFit(), 50);
-                }
-            }
-            else {
-                // Normal animated mode
-                // Simulation tick
-                this.simulation.on('tick', () => {
-                    this.updatePositions(link, nodeGroup);
-                });
-                // Layout complete detection
-                this.simulation.on('end', () => {
-                    if (!this.layoutCompleted) {
-                        this.layoutCompleted = true;
-                        this.layoutComplete.emit();
-                        if (cfg.fitOnLoad && this.visibleNodes.length > 1) {
-                            setTimeout(() => this.zoomToFit(), 100);
-                        }
-                    }
-                });
-            }
-        }
-        // Apply initial selection highlighting
-        this.updateSelectionHighlighting();
-        this.updateHighlighting();
+        const [x1, y1] = pts[bestIdx];
+        const [x2, y2] = pts[bestIdx + 1];
+        const x = (x1 + x2) / 2;
+        const y = (y1 + y2) / 2;
+        // 6.5 px per char is a good approximation for the 11px mono we
+        // use for labels — only used to size the background rect.
+        const w = Math.max(20, edge.sourceField.name.length * 6.5);
+        return { x, y, w };
     }
-    renderNodeFields(nodeGroup, colors) {
-        nodeGroup.each((d, i, nodes) => {
-            const group = d3.select(nodes[i]);
-            let currentY = -d.height / 2 + 40;
-            // Primary keys
-            d.primaryKeys.forEach((pk) => {
-                const fieldGroup = group.append('g').attr('class', 'field-group primary-key');
-                fieldGroup
-                    .append('rect')
-                    .attr('class', 'field-bg')
-                    .attr('x', -d.width / 2 + 2)
-                    .attr('y', currentY - 15)
-                    .attr('width', d.width - 4)
-                    .attr('height', 18)
-                    .attr('fill', colors.primaryKeyBackground);
-                fieldGroup
-                    .append('text')
-                    .attr('class', 'field-icon')
-                    .attr('x', -d.width / 2 + 8)
-                    .attr('y', currentY - 2)
-                    .attr('font-size', '10px')
-                    .attr('fill', colors.primaryKeyText)
-                    .text('🔑');
-                const pkNameEl = fieldGroup
-                    .append('text')
-                    .attr('class', 'field-name')
-                    .attr('x', -d.width / 2 + 25)
-                    .attr('y', currentY - 2)
-                    .attr('font-size', '11px')
-                    .attr('font-weight', 'bold')
-                    .attr('fill', colors.primaryKeyText)
-                    .text(pk.name || '')
-                    .node();
-                if (pkNameEl)
-                    this.truncateTextElement(pkNameEl, d.width - 33);
-                currentY += 20;
-            });
-            // Foreign keys
-            d.foreignKeys.forEach((fk) => {
-                const fieldGroup = group.append('g').attr('class', 'field-group foreign-key');
-                fieldGroup
-                    .append('rect')
-                    .attr('class', 'field-bg')
-                    .attr('x', -d.width / 2 + 2)
-                    .attr('y', currentY - 15)
-                    .attr('width', d.width - 4)
-                    .attr('height', 18)
-                    .attr('fill', colors.foreignKeyBackground);
-                fieldGroup
-                    .append('text')
-                    .attr('class', 'field-icon')
-                    .attr('x', -d.width / 2 + 8)
-                    .attr('y', currentY - 2)
-                    .attr('font-size', '10px')
-                    .attr('fill', colors.foreignKeyText)
-                    .text('🔗');
-                const fkNameEl = fieldGroup
-                    .append('text')
-                    .attr('class', 'field-name')
-                    .attr('x', -d.width / 2 + 25)
-                    .attr('y', currentY - 2)
-                    .attr('font-size', '11px')
-                    .attr('fill', colors.foreignKeyText)
-                    .text(fk.name || '')
-                    .node();
-                if (fkNameEl)
-                    this.truncateTextElement(fkNameEl, d.width - 33);
-                currentY += 20;
-            });
-        });
+    /** Whether a node should appear dimmed (highlight mode active, node not in set). */
+    isDimmed(nodeId) {
+        return !!this.highlightSet && !this.highlightSet.has(nodeId);
     }
-    /** Truncate an SVG text element to fit within maxWidth, adding "…" if needed */
-    truncateTextElement(textEl, maxWidth) {
-        const original = textEl.textContent || '';
-        if (!original || textEl.getComputedTextLength() <= maxWidth)
-            return;
-        // Binary search for the longest fitting substring
-        let lo = 0;
-        let hi = original.length;
-        while (lo < hi) {
-            const mid = Math.ceil((lo + hi) / 2);
-            textEl.textContent = original.slice(0, mid) + '…';
-            if (textEl.getComputedTextLength() <= maxWidth) {
-                lo = mid;
-            }
-            else {
-                hi = mid - 1;
-            }
-        }
-        textEl.textContent = lo < original.length ? original.slice(0, lo) + '…' : original;
+    /** Whether a node is the current focus (strong border). */
+    isFocus(nodeId) {
+        return this.focusNodeId === nodeId;
     }
-    attachNodeEventHandlers(nodeGroup) {
-        nodeGroup
-            .on('click', (event, d) => {
-            if (this.readOnly)
-                return;
-            event.stopPropagation();
-            // Emit click event with cancel pattern
-            const clickEvent = {
-                node: d.node,
-                mouseEvent: event,
-                cancel: false
-            };
-            this.nodeClick.emit(clickEvent);
-            if (clickEvent.cancel) {
-                return;
-            }
-            // Handle selection
-            if (this.selectedNodeId === d.node.id) {
-                this.nodeDeselected.emit();
-            }
-            else {
-                this.nodeSelected.emit(d.node);
-                // Auto-zoom if node is too small
-                if (this.svg) {
-                    const currentTransform = d3.zoomTransform(this.svg.node());
-                    const currentRenderedWidth = d.width * currentTransform.k;
-                    if (currentRenderedWidth < 20) {
-                        this.zoomToNode(d.node.id);
-                    }
-                }
-            }
-            this.updateSelectionHighlighting();
-        })
-            .on('dblclick', (event, d) => {
-            event.stopPropagation();
-            const dblClickEvent = {
-                node: d.node,
-                mouseEvent: event,
-                cancel: false
-            };
-            this.nodeDoubleClick.emit(dblClickEvent);
-        })
-            .on('mouseenter', (event, d) => {
-            const relatedInfo = this.getRelatedNodes(d.node.id, 1);
-            const relatedNodes = relatedInfo.map(r => r.node);
-            const hoverEvent = {
-                node: d.node,
-                mouseEvent: event,
-                relatedNodes,
-                position: { x: event.clientX, y: event.clientY }
-            };
-            this.nodeHover.emit(hoverEvent);
-        })
-            .on('mouseleave', (_event, d) => {
-            this.nodeHoverEnd.emit(d.node);
-        })
-            .on('contextmenu', (event, d) => {
-            const contextEvent = {
-                node: d.node,
-                mouseEvent: event,
-                cancel: false,
-                position: { x: event.clientX, y: event.clientY }
-            };
-            this.nodeContextMenu.emit(contextEvent);
-            if (contextEvent.cancel) {
-                event.preventDefault();
-            }
-        });
+    /** Whether a node is a 1-hop neighbour of the focus (medium border). */
+    isNeighbour(nodeId) {
+        return !!this.highlightSet && this.highlightSet.has(nodeId) && !this.isFocus(nodeId);
     }
-    attachLinkEventHandlers(linkGroup) {
-        linkGroup
-            .on('click', (event, d) => {
-            event.stopPropagation();
-            const sourceNode = d.source.node;
-            const targetNode = d.target.node;
-            const link = {
-                sourceNodeId: sourceNode.id,
-                targetNodeId: targetNode.id,
-                sourceField: d.sourceField,
-                targetField: d.targetField,
-                isSelfReference: d.isSelfReference
-            };
-            const clickEvent = {
-                link,
-                sourceNode,
-                targetNode,
-                mouseEvent: event,
-                cancel: false
-            };
-            this.linkClick.emit(clickEvent);
-        })
-            .on('mouseenter', (event, d) => {
-            const sourceNode = d.source.node;
-            const targetNode = d.target.node;
-            const link = {
-                sourceNodeId: sourceNode.id,
-                targetNodeId: targetNode.id,
-                sourceField: d.sourceField,
-                targetField: d.targetField,
-                isSelfReference: d.isSelfReference
-            };
-            const hoverEvent = {
-                link,
-                sourceNode,
-                targetNode,
-                mouseEvent: event,
-                position: { x: event.clientX, y: event.clientY }
-            };
-            this.linkHover.emit(hoverEvent);
-        })
-            .on('mouseleave', (_event, d) => {
-            const sourceNode = d.source.node;
-            const targetNode = d.target.node;
-            const link = {
-                sourceNodeId: sourceNode.id,
-                targetNodeId: targetNode.id,
-                sourceField: d.sourceField,
-                targetField: d.targetField,
-                isSelfReference: d.isSelfReference
-            };
-            this.linkHoverEnd.emit(link);
-        })
-            .on('contextmenu', (event, d) => {
-            const sourceNode = d.source.node;
-            const targetNode = d.target.node;
-            const link = {
-                sourceNodeId: sourceNode.id,
-                targetNodeId: targetNode.id,
-                sourceField: d.sourceField,
-                targetField: d.targetField,
-                isSelfReference: d.isSelfReference
-            };
-            const contextEvent = {
-                link,
-                sourceNode,
-                targetNode,
-                mouseEvent: event,
-                cancel: false,
-                position: { x: event.clientX, y: event.clientY }
-            };
-            this.linkContextMenu.emit(contextEvent);
-            if (contextEvent.cancel) {
-                event.preventDefault();
-            }
-        });
+    /** Whether an edge is part of the active highlight subgraph. */
+    isEdgeActive(edge) {
+        return !!this.highlightSet && this.highlightSet.has(edge.sourceId) && this.highlightSet.has(edge.targetId);
     }
-    updatePositions(link, nodeGroup) {
-        const usesDagre = this.usesDagreLayout();
-        // Update link paths
-        link.select('path').attr('d', (d) => {
-            const source = d.source;
-            const target = d.target;
-            if (d.isSelfReference) {
-                // Create a larger loop that goes around the bottom of the entity
-                // Start from right side, loop down and around, return to left side
-                const startX = source.x + source.width / 2; // Right edge center
-                const startY = source.y;
-                const endY = source.y + source.height / 2; // Bottom edge Y
-                const loopExtent = 60; // How far out the loop extends
-                // Use a path that goes: right edge -> curves down-right -> bottom -> curves up to bottom edge
-                return `M ${startX} ${startY}
-                C ${startX + loopExtent} ${startY},
-                  ${startX + loopExtent} ${endY + loopExtent},
-                  ${source.x} ${endY + loopExtent}
-                C ${source.x - loopExtent} ${endY + loopExtent},
-                  ${source.x - source.width / 2 - loopExtent / 2} ${endY},
-                  ${source.x - source.width / 2} ${endY}`;
-            }
-            // Use dagre edge points if available (provides cleaner orthogonal paths)
-            if (usesDagre && d.points && d.points.length >= 2) {
-                return this.createPathFromDagrePoints(d.points);
-            }
-            // Fallback to manual orthogonal path
-            const sourcePoint = this.getSourceConnectionPoint(source, d.sourceField);
-            const targetPoint = this.getTargetConnectionPoint(target, d.targetField);
-            return this.createOrthogonalPath(sourcePoint, targetPoint);
-        });
-        // Update link labels and their background boxes
-        link.select('text').attr('transform', (d) => {
-            const source = d.source;
-            const target = d.target;
-            if (d.isSelfReference) {
-                // Position label at the bottom of the loop (below the entity)
-                const loopExtent = 60;
-                return `translate(${source.x}, ${source.y + source.height / 2 + loopExtent + 8})`;
-            }
-            // Use midpoint of dagre edge points if available
-            if (usesDagre && d.points && d.points.length >= 2) {
-                const midIndex = Math.floor(d.points.length / 2);
-                const midPoint = d.points[midIndex];
-                return `translate(${midPoint.x}, ${midPoint.y})`;
-            }
-            // Fallback to midpoint between nodes
-            const midX = (source.x + target.x) / 2;
-            const midY = (source.y + target.y) / 2;
-            return `translate(${midX}, ${midY - 8})`;
-        });
-        // Update label background rects to match text size and position
-        link.each(function () {
-            const group = d3.select(this);
-            const textEl = group.select('text.link-label').node();
-            const bgRect = group.select('rect.link-label-bg');
-            if (textEl && !bgRect.empty()) {
-                const bbox = textEl.getBBox();
-                const padding = 3;
-                // Get the transform from the text element
-                const transform = group.select('text.link-label').attr('transform');
-                bgRect
-                    .attr('x', bbox.x - padding)
-                    .attr('y', bbox.y - padding)
-                    .attr('width', bbox.width + padding * 2)
-                    .attr('height', bbox.height + padding * 2)
-                    .attr('transform', transform);
-            }
-        });
-        // Update node positions
-        nodeGroup.attr('transform', (d) => `translate(${d.x},${d.y})`);
+    /** Whether an edge should appear dimmed. */
+    isEdgeDimmed(edge) {
+        return !!this.highlightSet && !this.isEdgeActive(edge);
     }
-    // ============================================================================
-    // GEOMETRY HELPERS
-    // ============================================================================
-    getSourceConnectionPoint(sourceNode, field) {
-        let connectY = sourceNode.y;
-        if (field) {
-            const fkIndex = sourceNode.foreignKeys.findIndex((fk) => fk.id === field.id);
-            if (fkIndex >= 0) {
-                const fieldY = -sourceNode.height / 2 + 40 + sourceNode.primaryKeys.length * 20 + fkIndex * 20;
-                connectY = sourceNode.y + fieldY + 10;
-            }
-            else {
-                // Check if the field is a primary key that also serves as a foreign key (IS-A pattern)
-                const pkIndex = sourceNode.primaryKeys.findIndex((pk) => pk.id === field.id);
-                if (pkIndex >= 0) {
-                    const fieldY = -sourceNode.height / 2 + 40 + pkIndex * 20;
-                    connectY = sourceNode.y + fieldY + 10;
-                }
-            }
-        }
-        return {
-            x: sourceNode.x + sourceNode.width / 2,
-            y: connectY,
-        };
+    /** Zoom percentage string for the toolbar readout. */
+    get zoomPercent() {
+        return Math.round(this.transform.k * 100) + '%';
     }
-    getTargetConnectionPoint(targetNode, targetField) {
-        let connectY = targetNode.y - targetNode.height / 2 + 40;
-        if (targetField && targetField.isPrimaryKey) {
-            const pkIndex = targetNode.primaryKeys.findIndex((pk) => pk.id === targetField.id);
-            if (pkIndex >= 0) {
-                const fieldY = -targetNode.height / 2 + 40 + pkIndex * 20;
-                connectY = targetNode.y + fieldY + 10;
-            }
-        }
-        return {
-            x: targetNode.x - targetNode.width / 2,
-            y: connectY,
-        };
+    /** Short friendly row-count string (e.g. 1248 → "1.2k"). */
+    formatCount(n) {
+        if (n == null)
+            return '';
+        if (n >= 1000)
+            return (n / 1000).toFixed(n >= 10000 ? 0 : 1) + 'k';
+        return n.toString();
     }
-    createOrthogonalPath(source, target) {
-        const dx = target.x - source.x;
-        let midX;
-        if (dx > 0) {
-            midX = source.x + dx * 0.7;
-        }
-        else {
-            midX = source.x + Math.max(dx * 0.3, -50);
-        }
-        return `M ${source.x} ${source.y}
-            L ${midX} ${source.y}
-            L ${midX} ${target.y}
-            L ${target.x} ${target.y}`;
+    /** Number of PK fields — handy aggregate (kept for external API parity). */
+    pkCount(entity) {
+        return entity.fields.filter(f => f.isPrimaryKey).length;
     }
-    /**
-     * Creates an SVG path string from dagre's edge points.
-     * Dagre provides an array of points for each edge that forms a clean orthogonal path.
-     * @param points Array of {x, y} coordinates from dagre layout
-     * @returns SVG path string
-     */
-    createPathFromDagrePoints(points) {
-        if (!points || points.length < 2) {
-            return '';
-        }
-        // Start with Move to first point
-        let path = `M ${points[0].x} ${points[0].y}`;
-        // Add Line to each subsequent point
-        for (let i = 1; i < points.length; i++) {
-            path += ` L ${points[i].x} ${points[i].y}`;
-        }
-        return path;
+    /** Number of FK fields — handy aggregate (kept for external API parity). */
+    fkCount(entity) {
+        return entity.fields.filter(f => !!f.relatedNodeId).length;
+    }
+    // ─── LEGACY API SHIMS ────────────────────────────────────────────────
+    // Kept so existing consumers (mj-entity-erd wrapper, admin ERD dashboard)
+    // continue to compile and work.  The new implementation doesn't need
+    // most of these, but we preserve the shape.
+    zoomIn() { this.zoomBy(1.2); }
+    zoomOut() { this.zoomBy(0.83); }
+    resetZoom() { this.fitToView(); }
+    zoomToFit(_padding) { this.fitToView(); }
+    zoomToNode(nodeId, _scale) { this.centerOn(nodeId); }
+    triggerResize() { this.fitToView(); }
+    refresh() {
+        this.recompute();
+        queueMicrotask(() => this.fitToView());
     }
-    screenToDiagramCoords(screenX, screenY) {
-        if (!this.svg)
-            return { x: 0, y: 0 };
-        const svgNode = this.svg.node();
-        if (!svgNode)
-            return { x: 0, y: 0 };
-        const rect = svgNode.getBoundingClientRect();
-        const transform = d3.zoomTransform(svgNode);
+    getState() {
         return {
-            x: (screenX - rect.left - transform.x) / transform.k,
-            y: (screenY - rect.top - transform.y) / transform.k
+            selectedNodeId: this.selectedNodeId,
+            highlightedNodeIds: [...this.highlightedNodeIds],
+            zoomLevel: this.transform.k,
+            translateX: this.transform.x,
+            translateY: this.transform.y,
+            focusNodeId: this.focusNodeId,
+            focusDepth: this.focusDepth,
+            nodePositions: {},
+            layoutAlgorithm: this.activeLayout,
         };
     }
-    // ============================================================================
-    // HIGHLIGHTING
-    // ============================================================================
-    clearAllHighlighting() {
-        if (!this.svg)
-            return;
-        this.svg.selectAll('.node')
-            .classed('selected', false)
-            .classed('highlighted', false)
-            .classed('relationship-connected', false)
-            .classed('entity-connections-highlighted', false);
-        this.svg.selectAll('.entity-rect')
-            .classed('highlighted', false)
-            .classed('relationship-highlighted', false)
-            .classed('connection-highlighted', false)
-            .style('stroke', null)
-            .style('stroke-width', null)
-            .style('filter', null);
-        this.svg.selectAll('.link-group')
-            .classed('highlighted', false);
-        this.svg.selectAll('.link')
-            .classed('highlighted', false);
-        this.svg.selectAll('.link-label')
-            .classed('highlighted', false);
-    }
-    updateSelectionHighlighting() {
-        if (!this.svg)
-            return;
-        // Clear previous selection styling — remove inline styles so CSS classes take over
-        this.svg.selectAll('.node')
-            .classed('selected', false)
-            .select('.entity-rect')
-            .style('stroke', null)
-            .style('stroke-width', null)
-            .style('filter', null);
-        if (this.selectedNodeId) {
-            this.svg.selectAll('.node')
-                .filter((d) => d.id === this.selectedNodeId)
-                .classed('selected', true);
+    setState(state, _restorePositions) {
+        if (state.selectedNodeId !== undefined)
+            this.selectedNodeId = state.selectedNodeId;
+        if (state.highlightedNodeIds !== undefined)
+            this.highlightedNodeIds = [...state.highlightedNodeIds];
+        if (state.focusNodeId !== undefined)
+            this.focusNodeId = state.focusNodeId;
+        if (state.focusDepth !== undefined)
+            this.focusDepth = state.focusDepth;
+        if (state.zoomLevel !== undefined || state.translateX !== undefined || state.translateY !== undefined) {
+            this.transform = {
+                k: state.zoomLevel ?? this.transform.k,
+                x: state.translateX ?? this.transform.x,
+                y: state.translateY ?? this.transform.y,
+            };
         }
-    }
-    updateHighlighting() {
-        if (!this.svg)
-            return;
-        const highlightSet = new Set(this.highlightedNodeIds);
-        this.svg.selectAll('.node')
-            .classed('highlighted', (d) => highlightSet.has(d.id))
-            .filter((d) => highlightSet.has(d.id))
-            .select('.entity-rect')
-            .classed('highlighted', true);
-    }
-    emitStateChange() {
-        const state = this.getState();
-        this.stateChange.emit(state);
-    }
-    // ============================================================================
-    // DRAG HANDLERS
-    // ============================================================================
-    dragstarted(event, d) {
-        if (this.isLayoutFrozen)
-            return;
-        const dragEvent = {
-            node: d.node,
-            startPosition: { x: d.x || 0, y: d.y || 0 },
-            currentPosition: { x: d.x || 0, y: d.y || 0 },
-            cancel: false
-        };
-        this.nodeDragStart.emit(dragEvent);
-        if (dragEvent.cancel)
-            return;
-        if (!event.active && this.simulation) {
-            this.simulation.alphaTarget(0.3).restart();
+        if (state.layoutAlgorithm && state.layoutAlgorithm !== this.activeLayout) {
+            this.activeLayout = state.layoutAlgorithm;
+            this.recompute();
         }
-        d.fx = d.x;
-        d.fy = d.y;
-    }
-    dragged(event, d) {
-        if (this.isLayoutFrozen)
-            return;
-        d.fx = event.x;
-        d.fy = event.y;
+        this.updateHighlightSet();
+        this.updateSelectedEntity();
+        this.cdr.markForCheck();
     }
-    dragended(event, d) {
-        if (this.isLayoutFrozen)
-            return;
-        const dragEvent = {
-            node: d.node,
-            startPosition: { x: 0, y: 0 }, // Start position not tracked in drag
-            currentPosition: { x: d.x || 0, y: d.y || 0 },
-            cancel: false
-        };
-        this.nodeDragEnd.emit(dragEvent);
-        if (!event.active && this.simulation) {
-            this.simulation.alphaTarget(0);
-        }
-        d.fx = null;
-        d.fy = null;
+    exportAsSVG() {
+        const svg = this.canvasRef?.nativeElement;
+        if (!svg)
+            return '';
+        return new XMLSerializer().serializeToString(svg);
     }
+    // ─── TRACK-BYs ───────────────────────────────────────────────────────
+    trackByBand = (_, b) => b.schemaName;
+    trackByEdge = (_, e) => e.id;
+    trackByNode = (_, n) => n.id;
+    trackByField = (_, f) => f.id || f.name;
+    trackByChip = (_, c) => c.name;
     static ɵfac = function ERDDiagramComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ERDDiagramComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ERDDiagramComponent, selectors: [["mj-erd-diagram"]], viewQuery: function ERDDiagramComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 5);
         } if (rf & 2) {
             let _t;
-            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.erdContainer = _t.first);
-        } }, inputs: { nodes: "nodes", selectedNodeId: "selectedNodeId", highlightedNodeIds: "highlightedNodeIds", focusNodeId: "focusNodeId", focusDepth: "focusDepth", isRefreshing: "isRefreshing", readOnly: "readOnly", config: "config", showHeader: "showHeader", headerTitle: "headerTitle" }, outputs: { nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", nodeSelected: "nodeSelected", nodeDeselected: "nodeDeselected", linkClick: "linkClick", nodeHover: "nodeHover", nodeHoverEnd: "nodeHoverEnd", linkHover: "linkHover", linkHoverEnd: "linkHoverEnd", nodeContextMenu: "nodeContextMenu", linkContextMenu: "linkContextMenu", diagramContextMenu: "diagramContextMenu", nodeDragStart: "nodeDragStart", nodeDragEnd: "nodeDragEnd", zoomChange: "zoomChange", refreshRequested: "refreshRequested", layoutComplete: "layoutComplete", stateChange: "stateChange" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 5, vars: 2, consts: [["erdContainer", ""], [1, "erd-section"], [1, "section-header"], [1, "erd-container"], [1, "loading-overlay"], [1, "erd-controls"], ["title", "Zoom In", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-plus"], ["title", "Zoom Out", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-search-minus"], ["title", "Reset Zoom", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Refresh Diagram", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"]], template: function ERDDiagramComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵconditionalCreate(1, ERDDiagramComponent_Conditional_1_Template, 12, 1, "div", 2);
-            i0.ɵɵelementStart(2, "div", 3, 0);
-            i0.ɵɵconditionalCreate(4, ERDDiagramComponent_Conditional_4_Template, 8, 0, "div", 4);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.canvasRef = _t.first);
+        } }, hostVars: 2, hostBindings: function ERDDiagramComponent_HostBindings(rf, ctx) { if (rf & 2) {
+            i0.ɵɵclassProp("erd-root", ctx.rootClass);
+        } }, inputs: { nodes: "nodes", selectedNodeId: "selectedNodeId", highlightedNodeIds: "highlightedNodeIds", focusNodeId: "focusNodeId", focusDepth: "focusDepth", isRefreshing: "isRefreshing", readOnly: "readOnly", config: "config", showHeader: "showHeader", headerTitle: "headerTitle" }, outputs: { nodeClick: "nodeClick", nodeDoubleClick: "nodeDoubleClick", nodeSelected: "nodeSelected", nodeDeselected: "nodeDeselected", linkClick: "linkClick", nodeHover: "nodeHover", nodeHoverEnd: "nodeHoverEnd", linkHover: "linkHover", linkHoverEnd: "linkHoverEnd", nodeContextMenu: "nodeContextMenu", linkContextMenu: "linkContextMenu", diagramContextMenu: "diagramContextMenu", nodeDragStart: "nodeDragStart", nodeDragEnd: "nodeDragEnd", zoomChange: "zoomChange", refreshRequested: "refreshRequested", layoutComplete: "layoutComplete", stateChange: "stateChange" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 24, vars: 7, consts: [["canvasRef", ""], [1, "erd-chrome"], [1, "erd-canvas-wrap"], [1, "erd-canvas", 3, "mousedown", "wheel"], ["id", "erd-arrow", "viewBox", "0 0 10 10", "refX", "9", "refY", "5", "markerWidth", "7", "markerHeight", "7", "orient", "auto"], ["d", "M 0 0 L 10 5 L 0 10 z", 1, "erd-marker"], ["id", "erd-arrow-active", "viewBox", "0 0 10 10", "refX", "9", "refY", "5", "markerWidth", "7", "markerHeight", "7", "orient", "auto"], ["d", "M 0 0 L 10 5 L 0 10 z", 1, "erd-marker", "erd-marker-active"], ["id", "erd-many", "viewBox", "-10 -6 14 12", "refX", "-8", "refY", "0", "markerWidth", "14", "markerHeight", "14", "orient", "auto"], ["d", "M 0 -5 L -8 0 L 0 5 M -8 0 L 4 0", 1, "erd-marker-stroke"], ["id", "erd-many-active", "viewBox", "-10 -6 14 12", "refX", "-8", "refY", "0", "markerWidth", "14", "markerHeight", "14", "orient", "auto"], ["d", "M 0 -5 L -8 0 L 0 5 M -8 0 L 4 0", 1, "erd-marker-stroke", "erd-marker-active"], [1, "erd-edges"], ["fill", "none", 1, "erd-edge", 3, "erd-edge-active", "erd-edge-dimmed"], [1, "erd-edge-labels"], [1, "erd-nodes"], [1, "erd-node", 3, "erd-node-focus", "erd-node-neighbour", "erd-node-dimmed"], [1, "erd-empty"], [1, "erd-loading-overlay"], [1, "erd-title-group"], [1, "erd-title"], [1, "erd-subtitle"], [1, "erd-count-pill"], [1, "erd-count-label"], [1, "erd-dot"], [1, "erd-search"], ["aria-hidden", "true", 1, "fa-solid", "fa-magnifying-glass"], ["type", "text", "placeholder", "Search entities, schemas, fields\u2026", "spellcheck", "false", "aria-label", "Search entities", 3, "input", "value"], ["type", "button", "aria-label", "Clear search", 1, "erd-search-clear"], [1, "erd-chrome-right"], ["role", "group", "aria-label", "Filter by schema", 1, "erd-schema-chips"], ["role", "group", "aria-label", "Layout mode", 1, "erd-toolbar"], ["type", "button", "title", "Schema grid \u2014 grouped by schema, predictable", "aria-label", "Schema-grid layout", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-table-cells"], ["type", "button", "title", "Hierarchical \u2014 classic ERD, relationship-driven", "aria-label", "Hierarchical layout", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-sitemap"], ["role", "group", "aria-label", "Zoom controls", 1, "erd-toolbar"], ["type", "button", "title", "Zoom in", "aria-label", "Zoom in", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-magnifying-glass-plus"], ["type", "button", "title", "Zoom out", "aria-label", "Zoom out", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-magnifying-glass-minus"], ["type", "button", "title", "Fit to view", "aria-label", "Fit to view", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-expand"], [1, "erd-zoom-val"], ["type", "button", "aria-label", "Clear search", 1, "erd-search-clear", 3, "click"], ["type", "button", 1, "erd-chip", 3, "active"], ["type", "button", 1, "erd-chip", 3, "click"], [1, "erd-chip-label"], [1, "erd-chip-count"], [1, "erd-band"], ["rx", "16", 1, "erd-band-rect"], ["text-anchor", "middle", 1, "erd-band-title"], ["fill", "none", 1, "erd-edge"], [1, "erd-edge-label", 3, "erd-edge-label-active", "erd-edge-label-dimmed"], [1, "erd-edge-label"], ["height", "16", "rx", "3", 1, "erd-edge-label-bg"], ["text-anchor", "middle", 1, "erd-edge-label-text"], [1, "erd-node", 3, "click", "mouseenter", "mouseleave"], ["x", "0", "y", "2", "rx", "8", 1, "erd-node-shadow"], ["x", "0", "y", "0", "rx", "8", 1, "erd-node-body"], ["x", "0", "y", "0", "height", "36", "rx", "6", 1, "erd-node-header"], ["x", "14", "y", "8", "height", "22"], ["xmlns", "http://www.w3.org/1999/xhtml", 1, "erd-node-header-content"], [1, "erd-node-name", 3, "title"], [1, "erd-node-rows"], ["x1", "0", "y1", "36", "y2", "36", 1, "erd-node-separator"], ["x", "0", "height", "22"], ["x", "4", "height", "14"], ["x", "0", "y", "0", "rx", "8", 1, "erd-node-frame"], ["xmlns", "http://www.w3.org/1999/xhtml", 1, "erd-field-row"], [1, "erd-field-chip", "erd-field-chip-pk"], [1, "erd-field-chip", "erd-field-chip-fk"], [1, "erd-field-name", 3, "title"], [1, "erd-field-type", 3, "title"], ["x", "4", "height", "14", 3, "click"], ["xmlns", "http://www.w3.org/1999/xhtml", 1, "erd-field-more"], [1, "erd-empty-icon"], ["aria-hidden", "true"], [1, "erd-empty-title"], [1, "erd-empty-hint"], [1, "erd-loading-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-circle-notch", "fa-spin"]], template: function ERDDiagramComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵconditionalCreate(0, ERDDiagramComponent_Conditional_0_Template, 33, 12, "header", 1);
+            i0.ɵɵelementStart(1, "div", 2);
+            i0.ɵɵnamespaceSVG();
+            i0.ɵɵelementStart(2, "svg", 3, 0);
+            i0.ɵɵlistener("mousedown", function ERDDiagramComponent_Template_svg_mousedown_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onBackgroundMouseDown($event)); })("wheel", function ERDDiagramComponent_Template_svg_wheel_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onWheel($event)); });
+            i0.ɵɵelementStart(4, "defs")(5, "marker", 4);
+            i0.ɵɵelement(6, "path", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(7, "marker", 6);
+            i0.ɵɵelement(8, "path", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "marker", 8);
+            i0.ɵɵelement(10, "path", 9);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(11, "marker", 10);
+            i0.ɵɵelement(12, "path", 11);
             i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(13, "g");
+            i0.ɵɵconditionalCreate(14, ERDDiagramComponent_Conditional_14_Template, 2, 0);
+            i0.ɵɵelementStart(15, "g", 12);
+            i0.ɵɵrepeaterCreate(16, ERDDiagramComponent_For_17_Template, 1, 7, ":svg:path", 13, ctx.trackByEdge, true);
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(18, ERDDiagramComponent_Conditional_18_Template, 3, 0, ":svg:g", 14);
+            i0.ɵɵelementStart(19, "g", 15);
+            i0.ɵɵrepeaterCreate(20, ERDDiagramComponent_For_21_Template, 14, 20, ":svg:g", 16, ctx.trackByNode, true);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵconditionalCreate(22, ERDDiagramComponent_Conditional_22_Template, 6, 4, "div", 17);
+            i0.ɵɵconditionalCreate(23, ERDDiagramComponent_Conditional_23_Template, 5, 0, "div", 18);
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
+            i0.ɵɵconditional(ctx.showHeader ? 0 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵattribute("data-panning", ctx.panning ? "true" : null);
+            i0.ɵɵadvance(11);
+            i0.ɵɵattribute("transform", "translate(" + ctx.transform.x + " " + ctx.transform.y + ") scale(" + ctx.transform.k + ")");
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showHeader ? 1 : -1);
-            i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.isRefreshing ? 4 : -1);
-        } }, styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.erd-section[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page);\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.section-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  color: var(--mj-text-primary);\n}\n\n.erd-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.control-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.erd-container[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  width: 100%;\n  min-height: 400px;\n  box-sizing: border-box;\n}\n\n.erd-container[_ngcontent-%COMP%]   svg[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-page);\n  opacity: 0.95;\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0s;\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  border-top-color: var(--mj-status-warning);\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n\n.spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  border-top-color: var(--mj-status-success);\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  text-align: center;\n}\n\n\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .node .entity-rect {\n  fill: var(--mj-bg-surface-card);\n  stroke: var(--mj-text-primary);\n}\n\n[_nghost-%COMP%]     .erd-container svg .node .entity-header, \n[_nghost-%COMP%]     .erd-container svg .node .entity-header-bottom {\n  fill: var(--mj-brand-primary);\n}\n\n[_nghost-%COMP%]     .erd-container svg .node .entity-name {\n  fill: var(--mj-text-inverse);\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .field-group.primary-key .field-bg {\n  fill: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface-card));\n}\n\n[_nghost-%COMP%]     .erd-container svg .field-group.primary-key .field-name, \n[_nghost-%COMP%]     .erd-container svg .field-group.primary-key .field-icon {\n  fill: var(--mj-text-primary);\n}\n\n[_nghost-%COMP%]     .erd-container svg .field-group.foreign-key .field-bg {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n}\n\n[_nghost-%COMP%]     .erd-container svg .field-group.foreign-key .field-name, \n[_nghost-%COMP%]     .erd-container svg .field-group.foreign-key .field-icon {\n  fill: var(--mj-text-primary);\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link-label-bg {\n  fill: var(--mj-bg-surface-card);\n  stroke: var(--mj-text-muted);\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link-label {\n  fill: var(--mj-text-muted);\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link {\n  stroke: var(--mj-text-muted);\n}\n\n[_nghost-%COMP%]     .erd-container svg #end-arrow path {\n  fill: var(--mj-text-muted);\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .node .entity-rect.highlighted {\n  stroke: var(--mj-status-warning) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-warning) 50%, transparent));\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-rect {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mj-status-success) 50%, transparent));\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-header {\n  fill: color-mix(in srgb, var(--mj-status-success) 85%, black) !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-header-bottom {\n  fill: color-mix(in srgb, var(--mj-status-success) 85%, black) !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.selected .entity-name {\n  fill: var(--mj-text-inverse) !important;\n  font-weight: bold !important;\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-success) 50%, transparent));\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.relationship-connected .entity-header {\n  fill: var(--mj-status-success) !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.relationship-connected .entity-header-bottom {\n  fill: var(--mj-status-success) !important;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n  stroke: var(--mj-status-warning) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-warning) 50%, transparent));\n  opacity: 0.9;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.entity-connections-highlighted .entity-header {\n  fill: var(--mj-status-warning) !important;\n  opacity: 0.8;\n}\n\n[_nghost-%COMP%]     .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n  fill: var(--mj-status-warning) !important;\n  opacity: 0.8;\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .link-group.self-reference .link-label-bg {\n  fill: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  stroke: var(--mj-status-success);\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group.self-reference .link-label {\n  fill: color-mix(in srgb, var(--mj-status-success) 80%, var(--mj-text-primary));\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link {\n  stroke-width: 2px;\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link:hover {\n  stroke-width: 3px;\n  stroke: var(--mj-status-success);\n  opacity: 1;\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link.highlighted {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 4px !important;\n  opacity: 1 !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-success) 60%, transparent));\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link-label {\n  font-family: Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  opacity: 0.8;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group .link-label.highlighted {\n  opacity: 1;\n  font-weight: bold;\n  fill: var(--mj-status-success);\n}\n\n[_nghost-%COMP%]     .erd-container svg .link-group.highlighted {\n  z-index: 10;\n}\n\n\n\n[_nghost-%COMP%]     .erd-container svg .field-group .field-bg {\n  transition: fill 0.2s;\n}\n\n[_nghost-%COMP%]     .erd-container svg .field-group:hover .field-bg {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface-card)) !important;\n}"] });
+            i0.ɵɵconditional(ctx.config.showSchemaBands ?? true ? 14 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.layout.edges);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.showEdgeLabels ? 18 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.layout.nodes);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.visibleCount === 0 ? 22 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.isRefreshing ? 23 : -1);
+        } }, styles: ["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  --erd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace;\n}\n\n\n\n\n.erd-chrome[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  padding: 14px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n  min-height: 64px;\n}\n\n.erd-title-group[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n.erd-title[_ngcontent-%COMP%] {\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n}\n\n.erd-subtitle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.erd-count-pill[_ngcontent-%COMP%] {\n  font-family: var(--erd-mono);\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  line-height: 1.3;\n}\n\n.erd-count-label[_ngcontent-%COMP%] { color: var(--mj-text-secondary); }\n.erd-dot[_ngcontent-%COMP%] { color: var(--mj-text-muted); }\n\n.erd-search[_ngcontent-%COMP%] {\n  flex: 1;\n  max-width: 440px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color .12s, background .12s, box-shadow .12s;\n}\n\n.erd-search[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.erd-search[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n  font-size: 13px;\n}\n\n.erd-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  flex: 1;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  font: inherit;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.erd-search[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder { color: var(--mj-text-muted); }\n\n.erd-search-clear[_ngcontent-%COMP%] {\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0 4px;\n}\n\n.erd-search-clear[_ngcontent-%COMP%]:hover { color: var(--mj-text-primary); }\n\n.erd-chrome-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-left: auto;\n}\n\n\n\n.erd-schema-chips[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  padding: 3px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n}\n\n.erd-chip[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border: 0;\n  background: transparent;\n  border-radius: 7px;\n  font-family: var(--erd-mono);\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background .1s, color .1s;\n}\n\n.erd-chip[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.erd-chip.active[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n}\n\n.erd-chip-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  padding: 1px 5px;\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 80%, transparent);\n  color: var(--mj-text-muted);\n}\n\n\n\n.erd-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 3px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n}\n\n.erd-toolbar[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  border: 0;\n  background: transparent;\n  border-radius: 5px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  transition: background .1s, color .1s;\n}\n\n.erd-toolbar[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.erd-toolbar[_ngcontent-%COMP%]   button.active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.erd-zoom-val[_ngcontent-%COMP%] {\n  padding: 0 8px;\n  font-family: var(--erd-mono);\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n  min-width: 42px;\n  text-align: right;\n}\n\n\n\n\n.erd-canvas-wrap[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface-sunken);\n  min-height: 300px;\n}\n\n.erd-canvas[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  user-select: none;\n  cursor: grab;\n  display: block;\n}\n\n.erd-canvas[data-panning=\"true\"][_ngcontent-%COMP%] { cursor: grabbing; }\n\n.erd-canvas[_ngcontent-%COMP%]   text[_ngcontent-%COMP%] { pointer-events: none; }\n\n\n\n.erd-band-rect[_ngcontent-%COMP%] {\n  fill: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n  stroke: var(--mj-border-default);\n  stroke-width: 1;\n}\n\n.erd-band-title[_ngcontent-%COMP%] {\n  font-family: var(--erd-mono);\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  fill: var(--mj-text-muted);\n}\n\n\n\n.erd-edge[_ngcontent-%COMP%] {\n  stroke: var(--mj-border-strong);\n  stroke-width: 1.2;\n  transition: stroke-width .15s, opacity .15s;\n}\n\n.erd-edge-active[_ngcontent-%COMP%] {\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.8;\n}\n\n.erd-edge-dimmed[_ngcontent-%COMP%] { opacity: 0.18; }\n\n\n\n\n.erd-edge-label[_ngcontent-%COMP%] {\n  pointer-events: none;\n  transition: opacity .15s;\n}\n\n.erd-edge-label-bg[_ngcontent-%COMP%] {\n  fill: var(--mj-bg-surface);\n  stroke: var(--mj-border-default);\n  stroke-width: 0.75;\n}\n\n.erd-edge-label-text[_ngcontent-%COMP%] {\n  font-family: var(--erd-mono);\n  font-size: 11px;\n  fill: var(--mj-text-secondary);\n}\n\n.erd-edge-label-active[_ngcontent-%COMP%]   .erd-edge-label-bg[_ngcontent-%COMP%] {\n  stroke: var(--mj-brand-primary);\n}\n\n.erd-edge-label-active[_ngcontent-%COMP%]   .erd-edge-label-text[_ngcontent-%COMP%] {\n  fill: var(--mj-brand-primary);\n}\n\n.erd-edge-label-dimmed[_ngcontent-%COMP%] { opacity: 0.18; }\n\n\n\n.erd-marker[_ngcontent-%COMP%] { fill: var(--mj-border-strong); }\n.erd-marker-active[_ngcontent-%COMP%], \n.erd-marker-active.erd-marker[_ngcontent-%COMP%], \n.erd-marker-active.erd-marker-stroke[_ngcontent-%COMP%] { fill: var(--mj-brand-primary); stroke: var(--mj-brand-primary); }\n.erd-marker-stroke[_ngcontent-%COMP%] { stroke: var(--mj-border-strong); stroke-width: 1.4; fill: none; stroke-linecap: round; }\n\n\n\n.erd-node[_ngcontent-%COMP%] {\n  cursor: pointer;\n  transition: opacity .15s;\n}\n\n.erd-node-dimmed[_ngcontent-%COMP%] { opacity: 0.22; }\n\n.erd-node-shadow[_ngcontent-%COMP%] {\n  fill: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.erd-node-body[_ngcontent-%COMP%] {\n  fill: var(--mj-bg-surface);\n}\n\n\n\n\n\n.erd-node-frame[_ngcontent-%COMP%] {\n  fill: none;\n  stroke: var(--mj-border-default);\n  stroke-width: 1;\n  pointer-events: none;\n}\n\n.erd-node-focus[_ngcontent-%COMP%]   .erd-node-frame[_ngcontent-%COMP%] {\n  stroke: var(--mj-brand-primary);\n  stroke-width: 2;\n}\n\n.erd-node-neighbour[_ngcontent-%COMP%]   .erd-node-frame[_ngcontent-%COMP%] {\n  stroke-width: 1.5;\n}\n\n.erd-node-header[_ngcontent-%COMP%] {\n  fill: var(--mj-bg-surface-card);\n}\n\n.erd-node-separator[_ngcontent-%COMP%] {\n  stroke: var(--mj-border-default);\n  stroke-width: 1;\n}\n\n\n\n.erd-node-header-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--erd-mono);\n  line-height: 22px;\n  height: 22px;\n  color: var(--mj-text-primary);\n}\n\n.erd-node-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.erd-node-rows[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n\n\n.erd-field-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 22px;\n  padding: 0 12px 0 8px;\n  font-family: var(--erd-mono);\n  line-height: 22px;\n  box-sizing: border-box;\n}\n\n.erd-field-chip[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 14px;\n  border-radius: 3px;\n  font-size: 8px;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  line-height: 1;\n}\n\n.erd-field-chip-pk[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n.erd-field-chip-fk[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.erd-field-name[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.erd-field-type[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  \n\n  max-width: 45%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.erd-field-more[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 14px;\n  border-radius: 3px;\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  font-family: inherit;\n  font-size: 9px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: opacity .1s;\n}\n\n.erd-field-more[_ngcontent-%COMP%]:hover { opacity: 1; }\n\n\n\n\n.erd-empty[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  pointer-events: none;\n}\n\n.erd-empty-icon[_ngcontent-%COMP%] {\n  font-size: 40px;\n  color: var(--mj-text-muted);\n  opacity: 0.45;\n}\n\n.erd-empty-title[_ngcontent-%COMP%] {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.erd-empty-hint[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.erd-loading-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-bg-page) 90%, transparent);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n}\n\n.erd-loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.erd-loading-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 20px;\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ERDDiagramComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-erd-diagram', template: "<div class=\"erd-section\">\n  @if (showHeader) {\n    <div class=\"section-header\">\n      <h3>{{ headerTitle }}</h3>\n      <div class=\"erd-controls\">\n        <button class=\"control-btn\" (click)=\"zoomIn()\" title=\"Zoom In\">\n          <span class=\"fa-solid fa-search-plus\"></span>\n        </button>\n        <button class=\"control-btn\" (click)=\"zoomOut()\" title=\"Zoom Out\">\n          <span class=\"fa-solid fa-search-minus\"></span>\n        </button>\n        <button class=\"control-btn\" (click)=\"resetZoom()\" title=\"Reset Zoom\">\n          <span class=\"fa-solid fa-expand\"></span>\n        </button>\n        <button class=\"control-btn\" (click)=\"refresh(); refreshRequested.emit()\" title=\"Refresh Diagram\">\n          <span class=\"fa-solid fa-refresh\"></span>\n        </button>\n      </div>\n    </div>\n  }\n  <div class=\"erd-container\" #erdContainer>\n    @if (isRefreshing) {\n      <div class=\"loading-overlay\">\n        <div class=\"loading-content\">\n          <div class=\"loading-spinner\">\n            <div class=\"spinner-ring\"></div>\n            <div class=\"spinner-ring\"></div>\n            <div class=\"spinner-ring\"></div>\n          </div>\n          <div class=\"loading-text\">Loading diagram...</div>\n        </div>\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/**\n * ERD Diagram Component - MJ Design Tokens\n * MJ theming for the Entity Relationship Diagram visualization\n */\n\n:host {\n  display: block;\n  height: 100%;\n  width: 100%;\n}\n\n.erd-section {\n  background: var(--mj-bg-page);\n  overflow: hidden;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n}\n\n.section-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.section-header h3 {\n  margin: 0;\n  color: var(--mj-text-primary);\n}\n\n.erd-controls {\n  display: flex;\n  gap: 8px;\n}\n\n.control-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.control-btn:hover:not(:disabled) {\n  background: var(--mj-bg-surface-sunken);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.control-btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.erd-container {\n  flex: 1;\n  position: relative;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n  width: 100%;\n  min-height: 400px;\n  box-sizing: border-box;\n}\n\n.erd-container svg {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100% !important;\n  height: 100% !important;\n  box-sizing: border-box;\n}\n\n/* Loading overlay - using mj-loading component styling */\n.loading-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-page);\n  opacity: 0.95;\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s linear infinite;\n}\n\n.spinner-ring:nth-child(1) {\n  border-top-color: var(--mj-brand-primary);\n  animation-delay: 0s;\n}\n\n.spinner-ring:nth-child(2) {\n  border-top-color: var(--mj-status-warning);\n  animation-delay: 0.3s;\n  transform: scale(0.8);\n}\n\n.spinner-ring:nth-child(3) {\n  border-top-color: var(--mj-status-success);\n  animation-delay: 0.6s;\n  transform: scale(0.6);\n}\n\n.loading-text {\n  color: var(--mj-text-secondary);\n  font-weight: 500;\n  text-align: center;\n}\n\n/* Animations */\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* \u2500\u2500 Base node colors (override D3 presentation attributes) \u2500\u2500 */\n:host ::ng-deep .erd-container svg .node .entity-rect {\n  fill: var(--mj-bg-surface-card);\n  stroke: var(--mj-text-primary);\n}\n\n:host ::ng-deep .erd-container svg .node .entity-header,\n:host ::ng-deep .erd-container svg .node .entity-header-bottom {\n  fill: var(--mj-brand-primary);\n}\n\n:host ::ng-deep .erd-container svg .node .entity-name {\n  fill: var(--mj-text-inverse);\n}\n\n/* Field backgrounds and text */\n:host ::ng-deep .erd-container svg .field-group.primary-key .field-bg {\n  fill: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface-card));\n}\n\n:host ::ng-deep .erd-container svg .field-group.primary-key .field-name,\n:host ::ng-deep .erd-container svg .field-group.primary-key .field-icon {\n  fill: var(--mj-text-primary);\n}\n\n:host ::ng-deep .erd-container svg .field-group.foreign-key .field-bg {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n}\n\n:host ::ng-deep .erd-container svg .field-group.foreign-key .field-name,\n:host ::ng-deep .erd-container svg .field-group.foreign-key .field-icon {\n  fill: var(--mj-text-primary);\n}\n\n/* \u2500\u2500 Link colors \u2500\u2500 */\n:host ::ng-deep .erd-container svg .link-group .link-label-bg {\n  fill: var(--mj-bg-surface-card);\n  stroke: var(--mj-text-muted);\n}\n\n:host ::ng-deep .erd-container svg .link-group .link-label {\n  fill: var(--mj-text-muted);\n}\n\n:host ::ng-deep .erd-container svg .link-group .link {\n  stroke: var(--mj-text-muted);\n}\n\n:host ::ng-deep .erd-container svg #end-arrow path {\n  fill: var(--mj-text-muted);\n}\n\n/* \u2500\u2500 Node highlighting styles \u2500\u2500 */\n:host ::ng-deep .erd-container svg .node .entity-rect.highlighted {\n  stroke: var(--mj-status-warning) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-warning) 50%, transparent));\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-rect {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 4px !important;\n  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--mj-status-success) 50%, transparent));\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header {\n  fill: color-mix(in srgb, var(--mj-status-success) 85%, black) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-header-bottom {\n  fill: color-mix(in srgb, var(--mj-status-success) 85%, black) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.selected .entity-name {\n  fill: var(--mj-text-inverse) !important;\n  font-weight: bold !important;\n}\n\n/* Related/connected nodes - using tertiary accent */\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-rect.relationship-highlighted {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-success) 50%, transparent));\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header {\n  fill: var(--mj-status-success) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.relationship-connected .entity-header-bottom {\n  fill: var(--mj-status-success) !important;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-rect.connection-highlighted {\n  stroke: var(--mj-status-warning) !important;\n  stroke-width: 3px !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-warning) 50%, transparent));\n  opacity: 0.9;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header {\n  fill: var(--mj-status-warning) !important;\n  opacity: 0.8;\n}\n\n:host ::ng-deep .erd-container svg .node.entity-connections-highlighted .entity-header-bottom {\n  fill: var(--mj-status-warning) !important;\n  opacity: 0.8;\n}\n\n/* Self-referencing links \u2014 distinct green accent */\n:host ::ng-deep .erd-container svg .link-group.self-reference .link-label-bg {\n  fill: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  stroke: var(--mj-status-success);\n}\n\n:host ::ng-deep .erd-container svg .link-group.self-reference .link-label {\n  fill: color-mix(in srgb, var(--mj-status-success) 80%, var(--mj-text-primary));\n}\n\n/* Link styles */\n:host ::ng-deep .erd-container svg .link-group .link {\n  stroke-width: 2px;\n  transition: all 0.2s ease;\n  cursor: pointer;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link:hover {\n  stroke-width: 3px;\n  stroke: var(--mj-status-success);\n  opacity: 1;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link.highlighted {\n  stroke: var(--mj-status-success) !important;\n  stroke-width: 4px !important;\n  opacity: 1 !important;\n  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--mj-status-success) 60%, transparent));\n}\n\n:host ::ng-deep .erd-container svg .link-group .link-label {\n  font-family: Roboto, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  opacity: 0.8;\n  pointer-events: none;\n  transition: opacity 0.2s ease;\n}\n\n:host ::ng-deep .erd-container svg .link-group .link-label.highlighted {\n  opacity: 1;\n  font-weight: bold;\n  fill: var(--mj-status-success);\n}\n\n:host ::ng-deep .erd-container svg .link-group.highlighted {\n  z-index: 10;\n}\n\n/* Field hover */\n:host ::ng-deep .erd-container svg .field-group .field-bg {\n  transition: fill 0.2s;\n}\n\n:host ::ng-deep .erd-container svg .field-group:hover .field-bg {\n  fill: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface-card)) !important;\n}\n\n"] }]
-    }], null, { erdContainer: [{
-            type: ViewChild,
-            args: ['erdContainer', { static: false }]
-        }], nodes: [{
+        args: [{ standalone: false, selector: 'mj-erd-diagram', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- \u2500\u2500 CHROME \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (showHeader) {\n  <header class=\"erd-chrome\">\n    <div class=\"erd-title-group\">\n      <div class=\"erd-title\">{{ headerTitle }}</div>\n      <div class=\"erd-subtitle\">\n        <span class=\"erd-count-pill\">{{ visibleCount }}</span>\n        <span class=\"erd-count-label\">of {{ totalCount }} entities</span>\n        <span class=\"erd-dot\">\u00B7</span>\n        <span>{{ layout.edges.length }} relationships</span>\n      </div>\n    </div>\n\n    <label class=\"erd-search\">\n      <i class=\"fa-solid fa-magnifying-glass\" aria-hidden=\"true\"></i>\n      <input\n        type=\"text\"\n        [value]=\"searchQuery\"\n        (input)=\"onSearchChange($any($event.target).value)\"\n        placeholder=\"Search entities, schemas, fields\u2026\"\n        spellcheck=\"false\"\n        aria-label=\"Search entities\" />\n      @if (searchQuery) {\n        <button type=\"button\" class=\"erd-search-clear\" (click)=\"onClearSearch()\" aria-label=\"Clear search\">\u00D7</button>\n      }\n    </label>\n\n    <div class=\"erd-chrome-right\">\n      @if (schemaChips.length > 1) {\n        <div class=\"erd-schema-chips\" role=\"group\" aria-label=\"Filter by schema\">\n          @for (chip of schemaChips; track trackByChip($index, chip)) {\n            <button\n              type=\"button\"\n              class=\"erd-chip\"\n              [class.active]=\"chip.active\"\n              (click)=\"onSchemaChipToggle(chip.name)\"\n              [attr.aria-pressed]=\"chip.active\">\n              <span class=\"erd-chip-label\">{{ chip.name }}</span>\n              <span class=\"erd-chip-count\">{{ chip.count }}</span>\n            </button>\n          }\n        </div>\n      }\n\n      <div class=\"erd-toolbar\" role=\"group\" aria-label=\"Layout mode\">\n        <button\n          type=\"button\"\n          [class.active]=\"activeLayout === 'schema-grid'\"\n          (click)=\"setLayoutAlgorithm('schema-grid')\"\n          title=\"Schema grid \u2014 grouped by schema, predictable\"\n          aria-label=\"Schema-grid layout\">\n          <i class=\"fa-solid fa-table-cells\" aria-hidden=\"true\"></i>\n        </button>\n        <button\n          type=\"button\"\n          [class.active]=\"activeLayout === 'dagre'\"\n          (click)=\"setLayoutAlgorithm('dagre')\"\n          title=\"Hierarchical \u2014 classic ERD, relationship-driven\"\n          aria-label=\"Hierarchical layout\">\n          <i class=\"fa-solid fa-sitemap\" aria-hidden=\"true\"></i>\n        </button>\n      </div>\n\n      <div class=\"erd-toolbar\" role=\"group\" aria-label=\"Zoom controls\">\n        <button type=\"button\" (click)=\"zoomBy(1.2)\" title=\"Zoom in\" aria-label=\"Zoom in\">\n          <i class=\"fa-solid fa-magnifying-glass-plus\" aria-hidden=\"true\"></i>\n        </button>\n        <button type=\"button\" (click)=\"zoomBy(0.83)\" title=\"Zoom out\" aria-label=\"Zoom out\">\n          <i class=\"fa-solid fa-magnifying-glass-minus\" aria-hidden=\"true\"></i>\n        </button>\n        <button type=\"button\" (click)=\"fitToView()\" title=\"Fit to view\" aria-label=\"Fit to view\">\n          <i class=\"fa-solid fa-expand\" aria-hidden=\"true\"></i>\n        </button>\n        <span class=\"erd-zoom-val\">{{ zoomPercent }}</span>\n      </div>\n    </div>\n  </header>\n}\n\n<!-- \u2500\u2500 CANVAS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n<!-- Pan handling is window-level once mousedown fires (see component) so\n     dragging continues even if the cursor leaves the canvas-wrap. -->\n<div class=\"erd-canvas-wrap\">\n\n  <svg\n    #canvasRef\n    class=\"erd-canvas\"\n    [attr.data-panning]=\"panning ? 'true' : null\"\n    (mousedown)=\"onBackgroundMouseDown($event)\"\n    (wheel)=\"onWheel($event)\">\n\n    <defs>\n      <marker id=\"erd-arrow\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto\">\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" class=\"erd-marker\" />\n      </marker>\n      <marker id=\"erd-arrow-active\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto\">\n        <path d=\"M 0 0 L 10 5 L 0 10 z\" class=\"erd-marker erd-marker-active\" />\n      </marker>\n      <marker id=\"erd-many\" viewBox=\"-10 -6 14 12\" refX=\"-8\" refY=\"0\" markerWidth=\"14\" markerHeight=\"14\" orient=\"auto\">\n        <path d=\"M 0 -5 L -8 0 L 0 5 M -8 0 L 4 0\" class=\"erd-marker-stroke\" />\n      </marker>\n      <marker id=\"erd-many-active\" viewBox=\"-10 -6 14 12\" refX=\"-8\" refY=\"0\" markerWidth=\"14\" markerHeight=\"14\" orient=\"auto\">\n        <path d=\"M 0 -5 L -8 0 L 0 5 M -8 0 L 4 0\" class=\"erd-marker-stroke erd-marker-active\" />\n      </marker>\n    </defs>\n\n    <g [attr.transform]=\"'translate(' + transform.x + ' ' + transform.y + ') scale(' + transform.k + ')'\">\n\n      <!-- Schema bands -->\n      @if ((config.showSchemaBands ?? true)) {\n        @for (band of layout.bands; track trackByBand($index, band)) {\n          <g class=\"erd-band\">\n            <rect\n              [attr.x]=\"band.x\" [attr.y]=\"band.y\"\n              [attr.width]=\"band.width\" [attr.height]=\"band.height\"\n              rx=\"16\"\n              class=\"erd-band-rect\" />\n            <text\n              [attr.x]=\"band.x + band.width / 2\"\n              [attr.y]=\"band.y + 32\"\n              text-anchor=\"middle\"\n              class=\"erd-band-title\">\n              {{ band.schemaName }}\n            </text>\n          </g>\n        }\n      }\n\n      <!-- Edges -->\n      <g class=\"erd-edges\">\n        @for (edge of layout.edges; track trackByEdge($index, edge)) {\n          <path\n            [attr.d]=\"edgePath(edge)\"\n            fill=\"none\"\n            class=\"erd-edge\"\n            [class.erd-edge-active]=\"isEdgeActive(edge)\"\n            [class.erd-edge-dimmed]=\"isEdgeDimmed(edge)\"\n            [attr.marker-start]=\"(config.crowsFoot ?? true) ? (isEdgeActive(edge) ? 'url(#erd-many-active)' : 'url(#erd-many)') : null\"\n            [attr.marker-end]=\"isEdgeActive(edge) ? 'url(#erd-arrow-active)' : 'url(#erd-arrow)'\" />\n        }\n      </g>\n\n      <!-- Edge labels \u2014 FK field names rendered along edges.  Only shown\n           when zoom is high enough for the text to be legible, and only\n           when config.showRelationshipLabels resolves true. -->\n      @if (showEdgeLabels) {\n        <g class=\"erd-edge-labels\">\n          @for (edge of layout.edges; track trackByEdge($index, edge)) {\n            @let pos = edgeLabelPosition(edge);\n            @if (pos) {\n              <g\n                class=\"erd-edge-label\"\n                [class.erd-edge-label-active]=\"isEdgeActive(edge)\"\n                [class.erd-edge-label-dimmed]=\"isEdgeDimmed(edge)\">\n                <rect\n                  [attr.x]=\"pos.x - pos.w / 2 - 4\"\n                  [attr.y]=\"pos.y - 8\"\n                  [attr.width]=\"pos.w + 8\"\n                  height=\"16\"\n                  rx=\"3\"\n                  class=\"erd-edge-label-bg\" />\n                <text\n                  [attr.x]=\"pos.x\"\n                  [attr.y]=\"pos.y + 4\"\n                  text-anchor=\"middle\"\n                  class=\"erd-edge-label-text\">{{ edge.sourceField.name }}</text>\n              </g>\n            }\n          }\n        </g>\n      }\n\n      <!-- Nodes -->\n      <g class=\"erd-nodes\">\n        @for (node of layout.nodes; track trackByNode($index, node)) {\n          <g\n            class=\"erd-node\"\n            [attr.transform]=\"'translate(' + node.x + ' ' + node.y + ')'\"\n            [class.erd-node-focus]=\"isFocus(node.id)\"\n            [class.erd-node-neighbour]=\"isNeighbour(node.id)\"\n            [class.erd-node-dimmed]=\"isDimmed(node.id)\"\n            (click)=\"onNodeClick(node, $event)\"\n            (mouseenter)=\"onNodeMouseEnter(node, $event)\"\n            (mouseleave)=\"onNodeMouseLeave(node)\">\n\n            <!-- Card shadow -->\n            <rect class=\"erd-node-shadow\"\n              [attr.width]=\"node.width\" [attr.height]=\"node.height\"\n              x=\"0\" y=\"2\" rx=\"8\" />\n\n            <!-- Card body -->\n            <rect class=\"erd-node-body\"\n              [attr.width]=\"node.width\" [attr.height]=\"node.height\"\n              x=\"0\" y=\"0\" rx=\"8\" />\n\n            <!-- Header -->\n            <rect class=\"erd-node-header\"\n              x=\"0\" y=\"0\"\n              [attr.width]=\"node.width\" height=\"36\"\n              rx=\"6\" />\n            <foreignObject x=\"14\" y=\"8\" [attr.width]=\"node.width - 28\" height=\"22\">\n              <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"erd-node-header-content\">\n                <span class=\"erd-node-name\" [title]=\"node.name\">{{ node.name }}</span>\n                @if (node.customData && $any(node.customData).rows != null) {\n                  <span class=\"erd-node-rows\">{{ formatCount($any(node.customData).rows) }}</span>\n                }\n              </div>\n            </foreignObject>\n\n            <!-- Separator -->\n            <line class=\"erd-node-separator\"\n              x1=\"0\" [attr.x2]=\"node.width\" y1=\"36\" y2=\"36\" />\n\n            <!-- Fields -->\n            @for (field of node.visibleFields; track trackByField($index, field); let i = $index) {\n              <foreignObject x=\"0\" [attr.y]=\"36 + i * 22\" [attr.width]=\"node.width\" height=\"22\">\n                <div xmlns=\"http://www.w3.org/1999/xhtml\"\n                     class=\"erd-field-row\"\n                     [class.erd-field-pk]=\"field.isPrimaryKey\"\n                     [class.erd-field-fk]=\"!field.isPrimaryKey && field.relatedNodeId\">\n                  @if (field.isPrimaryKey) {\n                    <span class=\"erd-field-chip erd-field-chip-pk\">PK</span>\n                  } @else if (field.relatedNodeId) {\n                    <span class=\"erd-field-chip erd-field-chip-fk\">FK</span>\n                  }\n                  <span class=\"erd-field-name\" [title]=\"field.name\">{{ field.name }}</span>\n                  @if (field.type) {\n                    <span class=\"erd-field-type\" [title]=\"field.type\">{{ field.type }}</span>\n                  }\n                </div>\n              </foreignObject>\n            }\n\n            <!-- +N more toggle -->\n            @if (node.hasMore) {\n              <foreignObject\n                x=\"4\"\n                [attr.y]=\"36 + node.visibleFields.length * 22 + 6\"\n                [attr.width]=\"node.width - 8\"\n                height=\"14\"\n                (click)=\"onToggleExpand(node.id, $event)\">\n                <div xmlns=\"http://www.w3.org/1999/xhtml\" class=\"erd-field-more\">\n                  + {{ node.fields.length - node.visibleFields.length }} more fields\n                </div>\n              </foreignObject>\n            }\n\n            <!-- Outline frame \u2014 drawn last so the focus/neighbour stroke\n                 sits above the header instead of being clipped by it. -->\n            <rect class=\"erd-node-frame\"\n              [attr.width]=\"node.width\" [attr.height]=\"node.height\"\n              x=\"0\" y=\"0\" rx=\"8\" />\n          </g>\n        }\n      </g>\n    </g>\n  </svg>\n\n  <!-- Focus details are rendered by the consumer's side panel\n       (mj-entity-details inside mj-erd-composite); the in-canvas\n       floating focus card was removed as it duplicated that content. -->\n\n  <!-- \u2500\u2500 Empty state \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (visibleCount === 0) {\n    <div class=\"erd-empty\">\n      <div class=\"erd-empty-icon\">\n        <i [class]=\"config.emptyStateIcon || 'fa-solid fa-diagram-project'\" aria-hidden=\"true\"></i>\n      </div>\n      <div class=\"erd-empty-title\">\n        {{ totalCount === 0 ? (config.emptyStateMessage || 'No entities to display') : 'No entities match' }}\n      </div>\n      @if (totalCount > 0) {\n        <div class=\"erd-empty-hint\">Try adjusting schema filters or clearing search</div>\n      }\n    </div>\n  }\n\n  <!-- \u2500\u2500 Loading overlay \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n  @if (isRefreshing) {\n    <div class=\"erd-loading-overlay\">\n      <div class=\"erd-loading-content\">\n        <i class=\"fa-solid fa-circle-notch fa-spin\" aria-hidden=\"true\"></i>\n        <span>Loading\u2026</span>\n      </div>\n    </div>\n  }\n</div>\n", styles: ["/**\n * ERD Diagram Component \u2014 MJ Design Tokens.\n *\n * Uses MJ semantic tokens for all colors so the diagram adapts automatically\n * to light/dark mode via the app's global theme.  Per-schema accent colors\n * are OKLCH computed from a hash of the schema name (categorical chart\n * colors, one of the few intentional exceptions to the token rule).\n *\n * Typography: MJ's default UI font inherits; entity/field names use a\n * platform monospace stack so they read as technical identifiers.\n */\n\n/* !important on display + direction keeps consumer classes (e.g. a host\n   `.something { display: block }`) from collapsing the flex layout \u2014 without\n   this the chrome + canvas-wrap stop being flex items and .erd-canvas-wrap's\n   `flex: 1` has no effect, causing the SVG to shrink to its min-height. */\n:host {\n  display: flex !important;\n  flex-direction: column !important;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  --erd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace;\n}\n\n/* \u2550\u2550\u2550 CHROME \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.erd-chrome {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  padding: 14px 24px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n  min-height: 64px;\n}\n\n.erd-title-group {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  flex-shrink: 0;\n}\n\n.erd-title {\n  font-size: 15px;\n  font-weight: 600;\n  letter-spacing: -0.01em;\n  color: var(--mj-text-primary);\n}\n\n.erd-subtitle {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.erd-count-pill {\n  font-family: var(--erd-mono);\n  font-size: 11px;\n  font-weight: 600;\n  padding: 2px 8px;\n  border-radius: 10px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n  color: var(--mj-brand-primary);\n  line-height: 1.3;\n}\n\n.erd-count-label { color: var(--mj-text-secondary); }\n.erd-dot { color: var(--mj-text-muted); }\n\n.erd-search {\n  flex: 1;\n  max-width: 440px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface-card);\n  transition: border-color .12s, background .12s, box-shadow .12s;\n}\n\n.erd-search:focus-within {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.erd-search > i {\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n  font-size: 13px;\n}\n\n.erd-search input {\n  flex: 1;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  font: inherit;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.erd-search input::placeholder { color: var(--mj-text-muted); }\n\n.erd-search-clear {\n  border: 0;\n  background: transparent;\n  color: var(--mj-text-muted);\n  font-size: 18px;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0 4px;\n}\n\n.erd-search-clear:hover { color: var(--mj-text-primary); }\n\n.erd-chrome-right {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin-left: auto;\n}\n\n/* Schema chips */\n.erd-schema-chips {\n  display: flex;\n  gap: 4px;\n  padding: 3px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 10px;\n}\n\n.erd-chip {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 5px 10px;\n  border: 0;\n  background: transparent;\n  border-radius: 7px;\n  font-family: var(--erd-mono);\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: background .1s, color .1s;\n}\n\n.erd-chip:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.erd-chip.active {\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);\n}\n\n.erd-chip-count {\n  font-size: 10px;\n  padding: 1px 5px;\n  border-radius: 6px;\n  background: color-mix(in srgb, var(--mj-bg-surface-card) 80%, transparent);\n  color: var(--mj-text-muted);\n}\n\n/* Toolbar */\n.erd-toolbar {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  padding: 3px;\n  background: var(--mj-bg-surface-card);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n}\n\n.erd-toolbar button {\n  width: 28px;\n  height: 28px;\n  border: 0;\n  background: transparent;\n  border-radius: 5px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 12px;\n  transition: background .1s, color .1s;\n}\n\n.erd-toolbar button:hover {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-primary);\n}\n\n.erd-toolbar button.active {\n  background: color-mix(in srgb, var(--mj-brand-primary) 14%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.erd-zoom-val {\n  padding: 0 8px;\n  font-family: var(--erd-mono);\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n  min-width: 42px;\n  text-align: right;\n}\n\n/* \u2550\u2550\u2550 CANVAS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.erd-canvas-wrap {\n  flex: 1;\n  position: relative;\n  overflow: hidden;\n  background: var(--mj-bg-surface-sunken);\n  min-height: 300px;\n}\n\n.erd-canvas {\n  width: 100%;\n  height: 100%;\n  user-select: none;\n  cursor: grab;\n  display: block;\n}\n\n.erd-canvas[data-panning=\"true\"] { cursor: grabbing; }\n\n.erd-canvas text { pointer-events: none; }\n\n/* Schema band \u2014 subtle neutral grouping (no per-schema color) */\n.erd-band-rect {\n  fill: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n  stroke: var(--mj-border-default);\n  stroke-width: 1;\n}\n\n.erd-band-title {\n  font-family: var(--erd-mono);\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  fill: var(--mj-text-muted);\n}\n\n/* Edges */\n.erd-edge {\n  stroke: var(--mj-border-strong);\n  stroke-width: 1.2;\n  transition: stroke-width .15s, opacity .15s;\n}\n\n.erd-edge-active {\n  stroke: var(--mj-brand-primary);\n  stroke-width: 1.8;\n}\n\n.erd-edge-dimmed { opacity: 0.18; }\n\n/* Edge labels \u2014 FK field name on a small chip along the edge.\n   Background uses surface so the text is legible over crossings. */\n.erd-edge-label {\n  pointer-events: none;\n  transition: opacity .15s;\n}\n\n.erd-edge-label-bg {\n  fill: var(--mj-bg-surface);\n  stroke: var(--mj-border-default);\n  stroke-width: 0.75;\n}\n\n.erd-edge-label-text {\n  font-family: var(--erd-mono);\n  font-size: 11px;\n  fill: var(--mj-text-secondary);\n}\n\n.erd-edge-label-active .erd-edge-label-bg {\n  stroke: var(--mj-brand-primary);\n}\n\n.erd-edge-label-active .erd-edge-label-text {\n  fill: var(--mj-brand-primary);\n}\n\n.erd-edge-label-dimmed { opacity: 0.18; }\n\n/* Edge markers (crow's-foot and arrow) */\n.erd-marker { fill: var(--mj-border-strong); }\n.erd-marker-active,\n.erd-marker-active.erd-marker,\n.erd-marker-active.erd-marker-stroke { fill: var(--mj-brand-primary); stroke: var(--mj-brand-primary); }\n.erd-marker-stroke { stroke: var(--mj-border-strong); stroke-width: 1.4; fill: none; stroke-linecap: round; }\n\n/* Node card */\n.erd-node {\n  cursor: pointer;\n  transition: opacity .15s;\n}\n\n.erd-node-dimmed { opacity: 0.22; }\n\n.erd-node-shadow {\n  fill: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n}\n\n.erd-node-body {\n  fill: var(--mj-bg-surface);\n}\n\n/* Outline rendered as a separate rect on top of the header so the focus\n   stroke is visible all the way around the card (otherwise the header\n   fill clips the top edge of the body's stroke). */\n.erd-node-frame {\n  fill: none;\n  stroke: var(--mj-border-default);\n  stroke-width: 1;\n  pointer-events: none;\n}\n\n.erd-node-focus .erd-node-frame {\n  stroke: var(--mj-brand-primary);\n  stroke-width: 2;\n}\n\n.erd-node-neighbour .erd-node-frame {\n  stroke-width: 1.5;\n}\n\n.erd-node-header {\n  fill: var(--mj-bg-surface-card);\n}\n\n.erd-node-separator {\n  stroke: var(--mj-border-default);\n  stroke-width: 1;\n}\n\n/* Header content (foreignObject) \u2014 entity name + row count on one line */\n.erd-node-header-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--erd-mono);\n  line-height: 22px;\n  height: 22px;\n  color: var(--mj-text-primary);\n}\n\n.erd-node-name {\n  font-size: 13px;\n  font-weight: 600;\n  flex: 1;\n  min-width: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.erd-node-rows {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  flex-shrink: 0;\n}\n\n/* Field row (foreignObject) \u2014 chip + name + type, all on one line */\n.erd-field-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  height: 22px;\n  padding: 0 12px 0 8px;\n  font-family: var(--erd-mono);\n  line-height: 22px;\n  box-sizing: border-box;\n}\n\n.erd-field-chip {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 22px;\n  height: 14px;\n  border-radius: 3px;\n  font-size: 8px;\n  font-weight: 700;\n  letter-spacing: 0.05em;\n  line-height: 1;\n}\n\n.erd-field-chip-pk {\n  background: color-mix(in srgb, var(--mj-status-warning) 20%, var(--mj-bg-surface));\n  color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n.erd-field-chip-fk {\n  background: color-mix(in srgb, var(--mj-brand-primary) 18%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.erd-field-name {\n  flex: 1;\n  min-width: 0;\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.erd-field-type {\n  flex-shrink: 0;\n  font-size: 10px;\n  color: var(--mj-text-muted);\n  /* Cap very long type strings so the field name still has room */\n  max-width: 45%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* +N more toggle (foreignObject) */\n.erd-field-more {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 14px;\n  border-radius: 3px;\n  background: var(--mj-bg-surface-card);\n  opacity: 0.7;\n  font-family: inherit;\n  font-size: 9px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: opacity .1s;\n}\n\n.erd-field-more:hover { opacity: 1; }\n\n/* \u2550\u2550\u2550 EMPTY + LOADING \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */\n\n.erd-empty {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  pointer-events: none;\n}\n\n.erd-empty-icon {\n  font-size: 40px;\n  color: var(--mj-text-muted);\n  opacity: 0.45;\n}\n\n.erd-empty-title {\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.erd-empty-hint {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.erd-loading-overlay {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-bg-page) 90%, transparent);\n  backdrop-filter: blur(2px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n}\n\n.erd-loading-content {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n}\n\n.erd-loading-content i {\n  color: var(--mj-brand-primary);\n  font-size: 20px;\n}\n"] }]
+    }], null, { nodes: [{
             type: Input
         }], selectedNodeId: [{
             type: Input
@@ -1958,6 +1091,12 @@ export class ERDDiagramComponent {
             type: Output
         }], stateChange: [{
             type: Output
+        }], canvasRef: [{
+            type: ViewChild,
+            args: ['canvasRef', { static: false }]
+        }], rootClass: [{
+            type: HostBinding,
+            args: ['class.erd-root']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ERDDiagramComponent, { className: "ERDDiagramComponent", filePath: "src/lib/components/erd-diagram.component.ts", lineNumber: 195 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ERDDiagramComponent, { className: "ERDDiagramComponent", filePath: "src/lib/components/erd-diagram.component.ts", lineNumber: 86 }); })();
 //# sourceMappingURL=erd-diagram.component.js.map