@life-cockpit/angular-ui-kit 2.12.0 → 2.12.1

package/fesm2022/life-cockpit-angular-ui-kit.mjs

@@ -13273,13 +13273,16 @@ function directGeometry(source, target, dir) {
         const p3 = { x: target.x, y: target.y + target.height / 2 };
         const mx = (p0.x + p3.x) / 2;
         const points = [p0, { x: mx, y: p0.y }, { x: mx, y: p3.y }, p3];
-        return { path: cubicPath(points), labelX: mx, labelY: (p0.y + p3.y) / 2 - 8, points };
+        // labelY is the curve midpoint, not a baseline offset: the template centres the
+        // text on it via `dominant-baseline`. Nudging it up instead (as this did) pushes
+        // the label out of a 24px gutter and into the node above it.
+        return { path: cubicPath(points), labelX: mx, labelY: (p0.y + p3.y) / 2, points };
     }
     const p0 = { x: source.x + source.width / 2, y: source.y + source.height };
     const p3 = { x: target.x + target.width / 2, y: target.y };
     const my = (p0.y + p3.y) / 2;
     const points = [p0, { x: p0.x, y: my }, { x: p3.x, y: my }, p3];
-    return { path: cubicPath(points), labelX: (p0.x + p3.x) / 2, labelY: my - 8, points };
+    return { path: cubicPath(points), labelX: (p0.x + p3.x) / 2, labelY: my, points };
 }
 /**
  * Leaves from one side of both boxes and bows clear of everything in `obstacles`,
@@ -13805,11 +13808,11 @@ class DependencyViewerComponent {
         return typeColor ? readableInk(typeColor) : STATUS_COLORS[node.status].text;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DependencyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DependencyViewerComponent, isStandalone: true, selector: "lc-dependency-viewer", inputs: { root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEdgeLabels: { classPropertyName: "showEdgeLabels", publicName: "showEdgeLabels", isSignal: true, isRequired: false, transformFunction: null }, edgeWidth: { classPropertyName: "edgeWidth", publicName: "edgeWidth", isSignal: true, isRequired: false, transformFunction: null }, anchorNodeId: { classPropertyName: "anchorNodeId", publicName: "anchorNodeId", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, hiddenRelations: { classPropertyName: "hiddenRelations", publicName: "hiddenRelations", isSignal: true, isRequired: false, transformFunction: null }, hiddenTypes: { classPropertyName: "hiddenTypes", publicName: "hiddenTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelect: "nodeSelect", nodeExpand: "nodeExpand" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()" }, properties: { "class": "\"dep-viewer\"", "style.height": "height()" } }, ngImport: i0, template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n    <span class=\"dep-viewer__zoom\">{{ zoom() }}%</span>\n    <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n    <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" title=\"Reset\">\u27F2</button>\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  class=\"dep-viewer__canvas\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\"\n  (click)=\"deselectNode()\"\n>\n  <svg\n    [attr.width]=\"svgWidth()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.transform]=\"transform()\"\n    class=\"dep-viewer__svg\"\n  >\n    <!-- Arrow markers for cross-reference edges -->\n    <defs>\n      <marker id=\"arrow-default\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n      <marker id=\"arrow-blocks\"   markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-error-default)\"/></marker>\n      <marker id=\"arrow-references\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-info-default, #3b82f6)\"/></marker>\n      <marker id=\"arrow-requires\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-warning-default)\"/></marker>\n      <marker id=\"arrow-extends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-primary-400)\"/></marker>\n      <marker id=\"arrow-implements\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-success-default)\"/></marker>\n      <marker id=\"arrow-uses\"     markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-300)\"/></marker>\n      <marker id=\"arrow-depends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n    </defs>\n\n    <!-- Edges -->\n    @for (edge of layout().edges; track edge.id) {\n      <path\n        [attr.d]=\"edge.path\"\n        [attr.stroke]=\"edge.color\"\n        [attr.stroke-width]=\"edgeWidth()\"\n        [attr.stroke-dasharray]=\"edge.dashed ? '6 3' : 'none'\"\n        [attr.marker-end]=\"edge.isCrossRef ? 'url(#arrow-' + edge.marker + ')' : ''\"\n        fill=\"none\"\n        class=\"dep-viewer__edge\"\n        [class.dep-viewer__edge--cross-ref]=\"edge.isCrossRef\"\n      />\n      @if (showEdgeLabels() && edge.isCrossRef && edge.label) {\n        <text\n          [attr.x]=\"edge.labelX\"\n          [attr.y]=\"edge.labelY\"\n          class=\"dep-viewer__edge-label\"\n          [attr.fill]=\"edge.color\"\n          text-anchor=\"middle\"\n        >{{ edge.label }}</text>\n      }\n    }\n\n    <!-- Nodes -->\n    @for (node of layout().nodes; track node.id) {\n      <g\n        class=\"dep-viewer__node\"\n        [class.dep-viewer__node--selected]=\"selectedNodeId() === node.id\"\n        (click)=\"selectNode(node.id, $event)\"\n        (dblclick)=\"expandNode(node.id, $event)\"\n      >\n        <!-- Opaque backdrop. The status fills are translucent tints (in the dark\n             theme --color-success-50 & co. resolve to rgba(\u2026, 0.18)), so without\n             something solid beneath them the edges routed under a node show\n             straight through it. This keeps the tint compositing against the\n             viewer's own surface instead of against whatever passes behind. -->\n        <rect\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          class=\"dep-viewer__node-backdrop\"\n        />\n        <rect\n          class=\"dep-viewer__node-fill\"\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          [attr.fill]=\"getNodeBg(node)\"\n          [attr.stroke]=\"selectedNodeId() === node.id ? 'var(--color-primary-500)' : getNodeBorder(node)\"\n          stroke-width=\"1.5\"\n        />\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + 4\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node)\"\n          class=\"dep-viewer__node-label\"\n        >{{ node.label }}</text>\n\n        <!-- \"+N\" marker: this node has more neighbours than are shown -->\n        @if (node.moreCount) {\n          <g class=\"dep-viewer__more\">\n            <rect\n              [attr.x]=\"node.x + node.width - 26\"\n              [attr.y]=\"node.y - 8\"\n              width=\"32\" height=\"16\" rx=\"8\" ry=\"8\"\n            />\n            <text\n              [attr.x]=\"node.x + node.width - 10\"\n              [attr.y]=\"node.y + 3\"\n              text-anchor=\"middle\"\n            >+{{ node.moreCount }}</text>\n          </g>\n        }\n\n        <!-- Collapse/expand toggle -->\n        @if (hasChildren(node.id)) {\n          <g\n            class=\"dep-viewer__toggle\"\n            (click)=\"toggleCollapse(node.id, $event)\"\n          >\n            @if (direction() === 'horizontal') {\n              <circle\n                [attr.cx]=\"node.x + node.width + 10\"\n                [attr.cy]=\"node.y + node.height / 2\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width + 10\"\n                [attr.y]=\"node.y + node.height / 2 + 4\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            } @else {\n              <circle\n                [attr.cx]=\"node.x + node.width / 2\"\n                [attr.cy]=\"node.y + node.height + 10\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width / 2\"\n                [attr.y]=\"node.y + node.height + 14\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            }\n          </g>\n        }\n      </g>\n    }\n  </svg>\n</div>\n\n<!-- Legend -->\n@if (legendItems().length || typeLegendItems().length) {\n  <div class=\"dep-viewer__legend\">\n    @for (item of legendItems(); track item.label) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"24\" height=\"10\">\n          <line\n            x1=\"0\" y1=\"5\" x2=\"24\" y2=\"5\"\n            [attr.stroke]=\"item.color\"\n            stroke-width=\"2\"\n            [attr.stroke-dasharray]=\"item.dashed ? '4 2' : 'none'\"\n          />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.label }}</span>\n      </span>\n    }\n    @for (item of typeLegendItems(); track item.type) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"10\" height=\"10\">\n          <rect width=\"10\" height=\"10\" rx=\"2\" ry=\"2\" [attr.fill]=\"item.color\" />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.type }}</span>\n      </span>\n    }\n  </div>\n}\n\n<!-- Detail panel -->\n@if (selectedNode(); as node) {\n  <div class=\"dep-viewer__detail\">\n    <div class=\"dep-viewer__detail-header\">\n      <span class=\"dep-viewer__detail-status dep-viewer__detail-status--{{ node.status }}\">\u25CF</span>\n      <strong>{{ node.label }}</strong>\n      @if (node.type) {\n        <span class=\"dep-viewer__detail-type\">{{ node.type }}</span>\n      }\n    </div>\n    @if (node.description) {\n      <p class=\"dep-viewer__detail-desc\">{{ node.description }}</p>\n    }\n    <div class=\"dep-viewer__detail-meta\">\n      <span>Depth: {{ node.depth }}</span>\n      <span>Children: {{ node.outgoingCount }}</span>\n      <span>Depends on: {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>Dependencies:</strong>\n        <ul>\n          @for (dep of selectedDependsOn(); track dep.id) {\n            <li>\n              <span class=\"dep-viewer__dep-relation\">{{\n                dep.relationLabel || getRelationLabel(dep.relation || 'depends')\n              }}</span>\n              \u2192 {{ dep.id }}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.dep-viewer__toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);-webkit-user-select:none;user-select:none}.dep-viewer__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;font-size:14px;line-height:1}.dep-viewer__btn:hover{background:var(--color-surface-hover)}.dep-viewer__btn--reset{margin-left:4px}.dep-viewer__zoom{font-size:12px;min-width:40px;text-align:center;color:var(--color-text-secondary)}.dep-viewer__direction-label{margin-left:8px;font-size:14px;color:var(--color-text-tertiary)}.dep-viewer__canvas{cursor:grab;overflow:hidden;width:100%;height:100%}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__svg{transform-origin:0 0;transition:transform .1s ease-out}.dep-viewer__edge{pointer-events:none;transition:opacity .15s}.dep-viewer__edge--cross-ref{opacity:.8}.dep-viewer__edge-label{font-size:9px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__node{cursor:pointer;transition:filter .15s}.dep-viewer__node:hover{filter:brightness(.96)}.dep-viewer__node--selected rect{stroke-width:2.5}.dep-viewer__node-backdrop{fill:var(--color-surface)}.dep-viewer__node-label{font-size:12px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__toggle{cursor:pointer}.dep-viewer__toggle:hover circle{fill:var(--color-surface-hover)}.dep-viewer__more{pointer-events:none}.dep-viewer__more rect{fill:var(--color-surface-2);stroke:var(--color-border-strong);stroke-width:1}.dep-viewer__more text{font-size:9px;font-weight:600;fill:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.dep-viewer__toggle-text{font-size:11px;font-weight:600;fill:var(--color-text-secondary);pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__legend{display:flex;flex-wrap:wrap;gap:12px;padding:6px 12px;border-top:1px solid var(--color-border);background:var(--color-surface-2)}.dep-viewer__legend-item{display:flex;align-items:center;gap:4px}.dep-viewer__legend-text{font-size:11px;color:var(--color-text-secondary)}.dep-viewer__detail{position:absolute;bottom:12px;right:12px;width:240px;padding:12px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--elevation-1);font-size:12px;z-index:10}.dep-viewer__detail-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.dep-viewer__detail-type{margin-left:auto;padding:1px 6px;border-radius:3px;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:10px;font-weight:500}.dep-viewer__detail-status{font-size:10px}.dep-viewer__detail-status--default{color:var(--color-text-tertiary)}.dep-viewer__detail-status--active{color:var(--color-primary-400)}.dep-viewer__detail-status--success{color:var(--color-success-default)}.dep-viewer__detail-status--warning{color:var(--color-warning-default)}.dep-viewer__detail-status--error{color:var(--color-error-default)}.dep-viewer__detail-status--muted{color:var(--color-text-disabled)}.dep-viewer__detail-desc{color:var(--color-text-secondary);margin:0 0 6px;line-height:1.4}.dep-viewer__detail-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--color-text-tertiary);font-size:11px}.dep-viewer__detail-deps{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-border)}.dep-viewer__detail-deps ul{list-style:none;margin:4px 0 0;padding:0}.dep-viewer__detail-deps li{padding:2px 0;color:var(--color-text-secondary)}.dep-viewer__dep-relation{display:inline-block;padding:1px 4px;background:var(--color-surface-hover);border-radius:3px;font-size:10px;font-weight:500;color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.10", type: DependencyViewerComponent, isStandalone: true, selector: "lc-dependency-viewer", inputs: { root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, showEdgeLabels: { classPropertyName: "showEdgeLabels", publicName: "showEdgeLabels", isSignal: true, isRequired: false, transformFunction: null }, edgeWidth: { classPropertyName: "edgeWidth", publicName: "edgeWidth", isSignal: true, isRequired: false, transformFunction: null }, anchorNodeId: { classPropertyName: "anchorNodeId", publicName: "anchorNodeId", isSignal: true, isRequired: false, transformFunction: null }, typeColors: { classPropertyName: "typeColors", publicName: "typeColors", isSignal: true, isRequired: false, transformFunction: null }, hiddenRelations: { classPropertyName: "hiddenRelations", publicName: "hiddenRelations", isSignal: true, isRequired: false, transformFunction: null }, hiddenTypes: { classPropertyName: "hiddenTypes", publicName: "hiddenTypes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeSelect: "nodeSelect", nodeExpand: "nodeExpand" }, host: { listeners: { "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp()" }, properties: { "class": "\"dep-viewer\"", "style.height": "height()" } }, ngImport: i0, template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n    <span class=\"dep-viewer__zoom\">{{ zoom() }}%</span>\n    <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n    <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" title=\"Reset\">\u27F2</button>\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  class=\"dep-viewer__canvas\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\"\n  (click)=\"deselectNode()\"\n>\n  <svg\n    [attr.width]=\"svgWidth()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.transform]=\"transform()\"\n    class=\"dep-viewer__svg\"\n  >\n    <!-- Arrow markers for cross-reference edges -->\n    <defs>\n      <marker id=\"arrow-default\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n      <marker id=\"arrow-blocks\"   markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-error-default)\"/></marker>\n      <marker id=\"arrow-references\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-info-default, #3b82f6)\"/></marker>\n      <marker id=\"arrow-requires\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-warning-default)\"/></marker>\n      <marker id=\"arrow-extends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-primary-400)\"/></marker>\n      <marker id=\"arrow-implements\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-success-default)\"/></marker>\n      <marker id=\"arrow-uses\"     markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-300)\"/></marker>\n      <marker id=\"arrow-depends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n    </defs>\n\n    <!-- Edges. Their labels are deliberately NOT drawn here \u2014 see below. -->\n    @for (edge of layout().edges; track edge.id) {\n      <path\n        [attr.d]=\"edge.path\"\n        [attr.stroke]=\"edge.color\"\n        [attr.stroke-width]=\"edgeWidth()\"\n        [attr.stroke-dasharray]=\"edge.dashed ? '6 3' : 'none'\"\n        [attr.marker-end]=\"edge.isCrossRef ? 'url(#arrow-' + edge.marker + ')' : ''\"\n        fill=\"none\"\n        class=\"dep-viewer__edge\"\n        [class.dep-viewer__edge--cross-ref]=\"edge.isCrossRef\"\n      />\n    }\n\n    <!-- Nodes -->\n    @for (node of layout().nodes; track node.id) {\n      <g\n        class=\"dep-viewer__node\"\n        [class.dep-viewer__node--selected]=\"selectedNodeId() === node.id\"\n        (click)=\"selectNode(node.id, $event)\"\n        (dblclick)=\"expandNode(node.id, $event)\"\n      >\n        <!-- Opaque backdrop. The status fills are translucent tints (in the dark\n             theme --color-success-50 & co. resolve to rgba(\u2026, 0.18)), so without\n             something solid beneath them the edges routed under a node show\n             straight through it. This keeps the tint compositing against the\n             viewer's own surface instead of against whatever passes behind. -->\n        <rect\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          class=\"dep-viewer__node-backdrop\"\n        />\n        <rect\n          class=\"dep-viewer__node-fill\"\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          [attr.fill]=\"getNodeBg(node)\"\n          [attr.stroke]=\"selectedNodeId() === node.id ? 'var(--color-primary-500)' : getNodeBorder(node)\"\n          stroke-width=\"1.5\"\n        />\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + 4\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node)\"\n          class=\"dep-viewer__node-label\"\n        >{{ node.label }}</text>\n\n        <!-- \"+N\" marker: this node has more neighbours than are shown -->\n        @if (node.moreCount) {\n          <g class=\"dep-viewer__more\">\n            <rect\n              [attr.x]=\"node.x + node.width - 26\"\n              [attr.y]=\"node.y - 8\"\n              width=\"32\" height=\"16\" rx=\"8\" ry=\"8\"\n            />\n            <text\n              [attr.x]=\"node.x + node.width - 10\"\n              [attr.y]=\"node.y + 3\"\n              text-anchor=\"middle\"\n            >+{{ node.moreCount }}</text>\n          </g>\n        }\n\n        <!-- Collapse/expand toggle -->\n        @if (hasChildren(node.id)) {\n          <g\n            class=\"dep-viewer__toggle\"\n            (click)=\"toggleCollapse(node.id, $event)\"\n          >\n            @if (direction() === 'horizontal') {\n              <circle\n                [attr.cx]=\"node.x + node.width + 10\"\n                [attr.cy]=\"node.y + node.height / 2\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width + 10\"\n                [attr.y]=\"node.y + node.height / 2 + 4\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            } @else {\n              <circle\n                [attr.cx]=\"node.x + node.width / 2\"\n                [attr.cy]=\"node.y + node.height + 10\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width / 2\"\n                [attr.y]=\"node.y + node.height + 14\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            }\n          </g>\n        }\n      </g>\n    }\n\n    <!-- Edge labels last: SVG paints in document order, so anything drawn before\n         the nodes is covered by them. A label sits at the midpoint of its edge,\n         which frequently lands on a node \u2014 it has to come after. The halo (see\n         the stylesheet) keeps it legible over whatever it lands on. -->\n    @if (showEdgeLabels()) {\n      @for (edge of layout().edges; track edge.id) {\n        @if (edge.isCrossRef && edge.label) {\n          <text\n            [attr.x]=\"edge.labelX\"\n            [attr.y]=\"edge.labelY\"\n            class=\"dep-viewer__edge-label\"\n            [attr.fill]=\"edge.color\"\n            text-anchor=\"middle\"\n          >{{ edge.label }}</text>\n        }\n      }\n    }\n  </svg>\n</div>\n\n<!-- Legend -->\n@if (legendItems().length || typeLegendItems().length) {\n  <div class=\"dep-viewer__legend\">\n    @for (item of legendItems(); track item.label) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"24\" height=\"10\">\n          <line\n            x1=\"0\" y1=\"5\" x2=\"24\" y2=\"5\"\n            [attr.stroke]=\"item.color\"\n            stroke-width=\"2\"\n            [attr.stroke-dasharray]=\"item.dashed ? '4 2' : 'none'\"\n          />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.label }}</span>\n      </span>\n    }\n    @for (item of typeLegendItems(); track item.type) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"10\" height=\"10\">\n          <rect width=\"10\" height=\"10\" rx=\"2\" ry=\"2\" [attr.fill]=\"item.color\" />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.type }}</span>\n      </span>\n    }\n  </div>\n}\n\n<!-- Detail panel -->\n@if (selectedNode(); as node) {\n  <div class=\"dep-viewer__detail\">\n    <div class=\"dep-viewer__detail-header\">\n      <span class=\"dep-viewer__detail-status dep-viewer__detail-status--{{ node.status }}\">\u25CF</span>\n      <strong>{{ node.label }}</strong>\n      @if (node.type) {\n        <span class=\"dep-viewer__detail-type\">{{ node.type }}</span>\n      }\n    </div>\n    @if (node.description) {\n      <p class=\"dep-viewer__detail-desc\">{{ node.description }}</p>\n    }\n    <div class=\"dep-viewer__detail-meta\">\n      <span>Depth: {{ node.depth }}</span>\n      <span>Children: {{ node.outgoingCount }}</span>\n      <span>Depends on: {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>Dependencies:</strong>\n        <ul>\n          @for (dep of selectedDependsOn(); track dep.id) {\n            <li>\n              <span class=\"dep-viewer__dep-relation\">{{\n                dep.relationLabel || getRelationLabel(dep.relation || 'depends')\n              }}</span>\n              \u2192 {{ dep.id }}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.dep-viewer__toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);-webkit-user-select:none;user-select:none}.dep-viewer__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;font-size:14px;line-height:1}.dep-viewer__btn:hover{background:var(--color-surface-hover)}.dep-viewer__btn--reset{margin-left:4px}.dep-viewer__zoom{font-size:12px;min-width:40px;text-align:center;color:var(--color-text-secondary)}.dep-viewer__direction-label{margin-left:8px;font-size:14px;color:var(--color-text-tertiary)}.dep-viewer__canvas{cursor:grab;overflow:hidden;width:100%;height:100%}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__svg{transform-origin:0 0;transition:transform .1s ease-out}.dep-viewer__edge{pointer-events:none;transition:opacity .15s}.dep-viewer__edge--cross-ref{opacity:.8}.dep-viewer__edge-label{font-size:9px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none;dominant-baseline:central;paint-order:stroke;stroke:var(--color-surface);stroke-width:3px;stroke-linejoin:round}.dep-viewer__node{cursor:pointer;transition:filter .15s}.dep-viewer__node:hover{filter:brightness(.96)}.dep-viewer__node--selected rect{stroke-width:2.5}.dep-viewer__node-backdrop{fill:var(--color-surface)}.dep-viewer__node-label{font-size:12px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__toggle{cursor:pointer}.dep-viewer__toggle:hover circle{fill:var(--color-surface-hover)}.dep-viewer__more{pointer-events:none}.dep-viewer__more rect{fill:var(--color-surface-2);stroke:var(--color-border-strong);stroke-width:1}.dep-viewer__more text{font-size:9px;font-weight:600;fill:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.dep-viewer__toggle-text{font-size:11px;font-weight:600;fill:var(--color-text-secondary);pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__legend{display:flex;flex-wrap:wrap;gap:12px;padding:6px 12px;border-top:1px solid var(--color-border);background:var(--color-surface-2)}.dep-viewer__legend-item{display:flex;align-items:center;gap:4px}.dep-viewer__legend-text{font-size:11px;color:var(--color-text-secondary)}.dep-viewer__detail{position:absolute;bottom:12px;right:12px;width:240px;padding:12px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--elevation-1);font-size:12px;z-index:10}.dep-viewer__detail-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.dep-viewer__detail-type{margin-left:auto;padding:1px 6px;border-radius:3px;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:10px;font-weight:500}.dep-viewer__detail-status{font-size:10px}.dep-viewer__detail-status--default{color:var(--color-text-tertiary)}.dep-viewer__detail-status--active{color:var(--color-primary-400)}.dep-viewer__detail-status--success{color:var(--color-success-default)}.dep-viewer__detail-status--warning{color:var(--color-warning-default)}.dep-viewer__detail-status--error{color:var(--color-error-default)}.dep-viewer__detail-status--muted{color:var(--color-text-disabled)}.dep-viewer__detail-desc{color:var(--color-text-secondary);margin:0 0 6px;line-height:1.4}.dep-viewer__detail-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--color-text-tertiary);font-size:11px}.dep-viewer__detail-deps{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-border)}.dep-viewer__detail-deps ul{list-style:none;margin:4px 0 0;padding:0}.dep-viewer__detail-deps li{padding:2px 0;color:var(--color-text-secondary)}.dep-viewer__dep-relation{display:inline-block;padding:1px 4px;background:var(--color-surface-hover);border-radius:3px;font-size:10px;font-weight:500;color:var(--color-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.10", ngImport: i0, type: DependencyViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lc-dependency-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': '"dep-viewer"', '[style.height]': 'height()' }, template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n    <span class=\"dep-viewer__zoom\">{{ zoom() }}%</span>\n    <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n    <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" title=\"Reset\">\u27F2</button>\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  class=\"dep-viewer__canvas\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\"\n  (click)=\"deselectNode()\"\n>\n  <svg\n    [attr.width]=\"svgWidth()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.transform]=\"transform()\"\n    class=\"dep-viewer__svg\"\n  >\n    <!-- Arrow markers for cross-reference edges -->\n    <defs>\n      <marker id=\"arrow-default\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n      <marker id=\"arrow-blocks\"   markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-error-default)\"/></marker>\n      <marker id=\"arrow-references\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-info-default, #3b82f6)\"/></marker>\n      <marker id=\"arrow-requires\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-warning-default)\"/></marker>\n      <marker id=\"arrow-extends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-primary-400)\"/></marker>\n      <marker id=\"arrow-implements\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-success-default)\"/></marker>\n      <marker id=\"arrow-uses\"     markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-300)\"/></marker>\n      <marker id=\"arrow-depends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n    </defs>\n\n    <!-- Edges -->\n    @for (edge of layout().edges; track edge.id) {\n      <path\n        [attr.d]=\"edge.path\"\n        [attr.stroke]=\"edge.color\"\n        [attr.stroke-width]=\"edgeWidth()\"\n        [attr.stroke-dasharray]=\"edge.dashed ? '6 3' : 'none'\"\n        [attr.marker-end]=\"edge.isCrossRef ? 'url(#arrow-' + edge.marker + ')' : ''\"\n        fill=\"none\"\n        class=\"dep-viewer__edge\"\n        [class.dep-viewer__edge--cross-ref]=\"edge.isCrossRef\"\n      />\n      @if (showEdgeLabels() && edge.isCrossRef && edge.label) {\n        <text\n          [attr.x]=\"edge.labelX\"\n          [attr.y]=\"edge.labelY\"\n          class=\"dep-viewer__edge-label\"\n          [attr.fill]=\"edge.color\"\n          text-anchor=\"middle\"\n        >{{ edge.label }}</text>\n      }\n    }\n\n    <!-- Nodes -->\n    @for (node of layout().nodes; track node.id) {\n      <g\n        class=\"dep-viewer__node\"\n        [class.dep-viewer__node--selected]=\"selectedNodeId() === node.id\"\n        (click)=\"selectNode(node.id, $event)\"\n        (dblclick)=\"expandNode(node.id, $event)\"\n      >\n        <!-- Opaque backdrop. The status fills are translucent tints (in the dark\n             theme --color-success-50 & co. resolve to rgba(\u2026, 0.18)), so without\n             something solid beneath them the edges routed under a node show\n             straight through it. This keeps the tint compositing against the\n             viewer's own surface instead of against whatever passes behind. -->\n        <rect\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          class=\"dep-viewer__node-backdrop\"\n        />\n        <rect\n          class=\"dep-viewer__node-fill\"\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          [attr.fill]=\"getNodeBg(node)\"\n          [attr.stroke]=\"selectedNodeId() === node.id ? 'var(--color-primary-500)' : getNodeBorder(node)\"\n          stroke-width=\"1.5\"\n        />\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + 4\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node)\"\n          class=\"dep-viewer__node-label\"\n        >{{ node.label }}</text>\n\n        <!-- \"+N\" marker: this node has more neighbours than are shown -->\n        @if (node.moreCount) {\n          <g class=\"dep-viewer__more\">\n            <rect\n              [attr.x]=\"node.x + node.width - 26\"\n              [attr.y]=\"node.y - 8\"\n              width=\"32\" height=\"16\" rx=\"8\" ry=\"8\"\n            />\n            <text\n              [attr.x]=\"node.x + node.width - 10\"\n              [attr.y]=\"node.y + 3\"\n              text-anchor=\"middle\"\n            >+{{ node.moreCount }}</text>\n          </g>\n        }\n\n        <!-- Collapse/expand toggle -->\n        @if (hasChildren(node.id)) {\n          <g\n            class=\"dep-viewer__toggle\"\n            (click)=\"toggleCollapse(node.id, $event)\"\n          >\n            @if (direction() === 'horizontal') {\n              <circle\n                [attr.cx]=\"node.x + node.width + 10\"\n                [attr.cy]=\"node.y + node.height / 2\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width + 10\"\n                [attr.y]=\"node.y + node.height / 2 + 4\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            } @else {\n              <circle\n                [attr.cx]=\"node.x + node.width / 2\"\n                [attr.cy]=\"node.y + node.height + 10\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width / 2\"\n                [attr.y]=\"node.y + node.height + 14\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            }\n          </g>\n        }\n      </g>\n    }\n  </svg>\n</div>\n\n<!-- Legend -->\n@if (legendItems().length || typeLegendItems().length) {\n  <div class=\"dep-viewer__legend\">\n    @for (item of legendItems(); track item.label) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"24\" height=\"10\">\n          <line\n            x1=\"0\" y1=\"5\" x2=\"24\" y2=\"5\"\n            [attr.stroke]=\"item.color\"\n            stroke-width=\"2\"\n            [attr.stroke-dasharray]=\"item.dashed ? '4 2' : 'none'\"\n          />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.label }}</span>\n      </span>\n    }\n    @for (item of typeLegendItems(); track item.type) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"10\" height=\"10\">\n          <rect width=\"10\" height=\"10\" rx=\"2\" ry=\"2\" [attr.fill]=\"item.color\" />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.type }}</span>\n      </span>\n    }\n  </div>\n}\n\n<!-- Detail panel -->\n@if (selectedNode(); as node) {\n  <div class=\"dep-viewer__detail\">\n    <div class=\"dep-viewer__detail-header\">\n      <span class=\"dep-viewer__detail-status dep-viewer__detail-status--{{ node.status }}\">\u25CF</span>\n      <strong>{{ node.label }}</strong>\n      @if (node.type) {\n        <span class=\"dep-viewer__detail-type\">{{ node.type }}</span>\n      }\n    </div>\n    @if (node.description) {\n      <p class=\"dep-viewer__detail-desc\">{{ node.description }}</p>\n    }\n    <div class=\"dep-viewer__detail-meta\">\n      <span>Depth: {{ node.depth }}</span>\n      <span>Children: {{ node.outgoingCount }}</span>\n      <span>Depends on: {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>Dependencies:</strong>\n        <ul>\n          @for (dep of selectedDependsOn(); track dep.id) {\n            <li>\n              <span class=\"dep-viewer__dep-relation\">{{\n                dep.relationLabel || getRelationLabel(dep.relation || 'depends')\n              }}</span>\n              \u2192 {{ dep.id }}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.dep-viewer__toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);-webkit-user-select:none;user-select:none}.dep-viewer__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;font-size:14px;line-height:1}.dep-viewer__btn:hover{background:var(--color-surface-hover)}.dep-viewer__btn--reset{margin-left:4px}.dep-viewer__zoom{font-size:12px;min-width:40px;text-align:center;color:var(--color-text-secondary)}.dep-viewer__direction-label{margin-left:8px;font-size:14px;color:var(--color-text-tertiary)}.dep-viewer__canvas{cursor:grab;overflow:hidden;width:100%;height:100%}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__svg{transform-origin:0 0;transition:transform .1s ease-out}.dep-viewer__edge{pointer-events:none;transition:opacity .15s}.dep-viewer__edge--cross-ref{opacity:.8}.dep-viewer__edge-label{font-size:9px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__node{cursor:pointer;transition:filter .15s}.dep-viewer__node:hover{filter:brightness(.96)}.dep-viewer__node--selected rect{stroke-width:2.5}.dep-viewer__node-backdrop{fill:var(--color-surface)}.dep-viewer__node-label{font-size:12px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__toggle{cursor:pointer}.dep-viewer__toggle:hover circle{fill:var(--color-surface-hover)}.dep-viewer__more{pointer-events:none}.dep-viewer__more rect{fill:var(--color-surface-2);stroke:var(--color-border-strong);stroke-width:1}.dep-viewer__more text{font-size:9px;font-weight:600;fill:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.dep-viewer__toggle-text{font-size:11px;font-weight:600;fill:var(--color-text-secondary);pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__legend{display:flex;flex-wrap:wrap;gap:12px;padding:6px 12px;border-top:1px solid var(--color-border);background:var(--color-surface-2)}.dep-viewer__legend-item{display:flex;align-items:center;gap:4px}.dep-viewer__legend-text{font-size:11px;color:var(--color-text-secondary)}.dep-viewer__detail{position:absolute;bottom:12px;right:12px;width:240px;padding:12px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--elevation-1);font-size:12px;z-index:10}.dep-viewer__detail-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.dep-viewer__detail-type{margin-left:auto;padding:1px 6px;border-radius:3px;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:10px;font-weight:500}.dep-viewer__detail-status{font-size:10px}.dep-viewer__detail-status--default{color:var(--color-text-tertiary)}.dep-viewer__detail-status--active{color:var(--color-primary-400)}.dep-viewer__detail-status--success{color:var(--color-success-default)}.dep-viewer__detail-status--warning{color:var(--color-warning-default)}.dep-viewer__detail-status--error{color:var(--color-error-default)}.dep-viewer__detail-status--muted{color:var(--color-text-disabled)}.dep-viewer__detail-desc{color:var(--color-text-secondary);margin:0 0 6px;line-height:1.4}.dep-viewer__detail-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--color-text-tertiary);font-size:11px}.dep-viewer__detail-deps{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-border)}.dep-viewer__detail-deps ul{list-style:none;margin:4px 0 0;padding:0}.dep-viewer__detail-deps li{padding:2px 0;color:var(--color-text-secondary)}.dep-viewer__dep-relation{display:inline-block;padding:1px 4px;background:var(--color-surface-hover);border-radius:3px;font-size:10px;font-weight:500;color:var(--color-text-secondary)}\n"] }]
+            args: [{ selector: 'lc-dependency-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': '"dep-viewer"', '[style.height]': 'height()' }, template: "<!-- Toolbar -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n    <span class=\"dep-viewer__zoom\">{{ zoom() }}%</span>\n    <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" title=\"Zoom out\">\u2212</button>\n    <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" title=\"Reset\">\u27F2</button>\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  class=\"dep-viewer__canvas\"\n  (mousedown)=\"onMouseDown($event)\"\n  (wheel)=\"onWheel($event)\"\n  (click)=\"deselectNode()\"\n>\n  <svg\n    [attr.width]=\"svgWidth()\"\n    [attr.height]=\"svgHeight()\"\n    [attr.viewBox]=\"viewBox()\"\n    [style.transform]=\"transform()\"\n    class=\"dep-viewer__svg\"\n  >\n    <!-- Arrow markers for cross-reference edges -->\n    <defs>\n      <marker id=\"arrow-default\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n      <marker id=\"arrow-blocks\"   markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-error-default)\"/></marker>\n      <marker id=\"arrow-references\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-info-default, #3b82f6)\"/></marker>\n      <marker id=\"arrow-requires\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-warning-default)\"/></marker>\n      <marker id=\"arrow-extends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-primary-400)\"/></marker>\n      <marker id=\"arrow-implements\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-success-default)\"/></marker>\n      <marker id=\"arrow-uses\"     markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-300)\"/></marker>\n      <marker id=\"arrow-depends\"  markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\"><path d=\"M0,0 L8,3 L0,6 Z\" fill=\"var(--color-neutral-400)\"/></marker>\n    </defs>\n\n    <!-- Edges. Their labels are deliberately NOT drawn here \u2014 see below. -->\n    @for (edge of layout().edges; track edge.id) {\n      <path\n        [attr.d]=\"edge.path\"\n        [attr.stroke]=\"edge.color\"\n        [attr.stroke-width]=\"edgeWidth()\"\n        [attr.stroke-dasharray]=\"edge.dashed ? '6 3' : 'none'\"\n        [attr.marker-end]=\"edge.isCrossRef ? 'url(#arrow-' + edge.marker + ')' : ''\"\n        fill=\"none\"\n        class=\"dep-viewer__edge\"\n        [class.dep-viewer__edge--cross-ref]=\"edge.isCrossRef\"\n      />\n    }\n\n    <!-- Nodes -->\n    @for (node of layout().nodes; track node.id) {\n      <g\n        class=\"dep-viewer__node\"\n        [class.dep-viewer__node--selected]=\"selectedNodeId() === node.id\"\n        (click)=\"selectNode(node.id, $event)\"\n        (dblclick)=\"expandNode(node.id, $event)\"\n      >\n        <!-- Opaque backdrop. The status fills are translucent tints (in the dark\n             theme --color-success-50 & co. resolve to rgba(\u2026, 0.18)), so without\n             something solid beneath them the edges routed under a node show\n             straight through it. This keeps the tint compositing against the\n             viewer's own surface instead of against whatever passes behind. -->\n        <rect\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          class=\"dep-viewer__node-backdrop\"\n        />\n        <rect\n          class=\"dep-viewer__node-fill\"\n          [attr.x]=\"node.x\"\n          [attr.y]=\"node.y\"\n          [attr.width]=\"node.width\"\n          [attr.height]=\"node.height\"\n          rx=\"6\" ry=\"6\"\n          [attr.fill]=\"getNodeBg(node)\"\n          [attr.stroke]=\"selectedNodeId() === node.id ? 'var(--color-primary-500)' : getNodeBorder(node)\"\n          stroke-width=\"1.5\"\n        />\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + 4\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node)\"\n          class=\"dep-viewer__node-label\"\n        >{{ node.label }}</text>\n\n        <!-- \"+N\" marker: this node has more neighbours than are shown -->\n        @if (node.moreCount) {\n          <g class=\"dep-viewer__more\">\n            <rect\n              [attr.x]=\"node.x + node.width - 26\"\n              [attr.y]=\"node.y - 8\"\n              width=\"32\" height=\"16\" rx=\"8\" ry=\"8\"\n            />\n            <text\n              [attr.x]=\"node.x + node.width - 10\"\n              [attr.y]=\"node.y + 3\"\n              text-anchor=\"middle\"\n            >+{{ node.moreCount }}</text>\n          </g>\n        }\n\n        <!-- Collapse/expand toggle -->\n        @if (hasChildren(node.id)) {\n          <g\n            class=\"dep-viewer__toggle\"\n            (click)=\"toggleCollapse(node.id, $event)\"\n          >\n            @if (direction() === 'horizontal') {\n              <circle\n                [attr.cx]=\"node.x + node.width + 10\"\n                [attr.cy]=\"node.y + node.height / 2\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width + 10\"\n                [attr.y]=\"node.y + node.height / 2 + 4\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            } @else {\n              <circle\n                [attr.cx]=\"node.x + node.width / 2\"\n                [attr.cy]=\"node.y + node.height + 10\"\n                r=\"8\"\n                fill=\"var(--color-neutral-100)\" stroke=\"var(--color-neutral-300)\" stroke-width=\"1\"\n              />\n              <text\n                [attr.x]=\"node.x + node.width / 2\"\n                [attr.y]=\"node.y + node.height + 14\"\n                text-anchor=\"middle\"\n                class=\"dep-viewer__toggle-text\"\n              >{{ isCollapsed(node.id) ? '+' : '\u2212' }}</text>\n            }\n          </g>\n        }\n      </g>\n    }\n\n    <!-- Edge labels last: SVG paints in document order, so anything drawn before\n         the nodes is covered by them. A label sits at the midpoint of its edge,\n         which frequently lands on a node \u2014 it has to come after. The halo (see\n         the stylesheet) keeps it legible over whatever it lands on. -->\n    @if (showEdgeLabels()) {\n      @for (edge of layout().edges; track edge.id) {\n        @if (edge.isCrossRef && edge.label) {\n          <text\n            [attr.x]=\"edge.labelX\"\n            [attr.y]=\"edge.labelY\"\n            class=\"dep-viewer__edge-label\"\n            [attr.fill]=\"edge.color\"\n            text-anchor=\"middle\"\n          >{{ edge.label }}</text>\n        }\n      }\n    }\n  </svg>\n</div>\n\n<!-- Legend -->\n@if (legendItems().length || typeLegendItems().length) {\n  <div class=\"dep-viewer__legend\">\n    @for (item of legendItems(); track item.label) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"24\" height=\"10\">\n          <line\n            x1=\"0\" y1=\"5\" x2=\"24\" y2=\"5\"\n            [attr.stroke]=\"item.color\"\n            stroke-width=\"2\"\n            [attr.stroke-dasharray]=\"item.dashed ? '4 2' : 'none'\"\n          />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.label }}</span>\n      </span>\n    }\n    @for (item of typeLegendItems(); track item.type) {\n      <span class=\"dep-viewer__legend-item\">\n        <svg width=\"10\" height=\"10\">\n          <rect width=\"10\" height=\"10\" rx=\"2\" ry=\"2\" [attr.fill]=\"item.color\" />\n        </svg>\n        <span class=\"dep-viewer__legend-text\">{{ item.type }}</span>\n      </span>\n    }\n  </div>\n}\n\n<!-- Detail panel -->\n@if (selectedNode(); as node) {\n  <div class=\"dep-viewer__detail\">\n    <div class=\"dep-viewer__detail-header\">\n      <span class=\"dep-viewer__detail-status dep-viewer__detail-status--{{ node.status }}\">\u25CF</span>\n      <strong>{{ node.label }}</strong>\n      @if (node.type) {\n        <span class=\"dep-viewer__detail-type\">{{ node.type }}</span>\n      }\n    </div>\n    @if (node.description) {\n      <p class=\"dep-viewer__detail-desc\">{{ node.description }}</p>\n    }\n    <div class=\"dep-viewer__detail-meta\">\n      <span>Depth: {{ node.depth }}</span>\n      <span>Children: {{ node.outgoingCount }}</span>\n      <span>Depends on: {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>Dependencies:</strong>\n        <ul>\n          @for (dep of selectedDependsOn(); track dep.id) {\n            <li>\n              <span class=\"dep-viewer__dep-relation\">{{\n                dep.relationLabel || getRelationLabel(dep.relation || 'depends')\n              }}</span>\n              \u2192 {{ dep.id }}\n            </li>\n          }\n        </ul>\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;position:relative;overflow:hidden;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface)}.dep-viewer__toolbar{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--color-border);background:var(--color-surface-2);-webkit-user-select:none;user-select:none}.dep-viewer__btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:4px;background:var(--color-surface);color:var(--color-text-secondary);cursor:pointer;font-size:14px;line-height:1}.dep-viewer__btn:hover{background:var(--color-surface-hover)}.dep-viewer__btn--reset{margin-left:4px}.dep-viewer__zoom{font-size:12px;min-width:40px;text-align:center;color:var(--color-text-secondary)}.dep-viewer__direction-label{margin-left:8px;font-size:14px;color:var(--color-text-tertiary)}.dep-viewer__canvas{cursor:grab;overflow:hidden;width:100%;height:100%}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__svg{transform-origin:0 0;transition:transform .1s ease-out}.dep-viewer__edge{pointer-events:none;transition:opacity .15s}.dep-viewer__edge--cross-ref{opacity:.8}.dep-viewer__edge-label{font-size:9px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none;dominant-baseline:central;paint-order:stroke;stroke:var(--color-surface);stroke-width:3px;stroke-linejoin:round}.dep-viewer__node{cursor:pointer;transition:filter .15s}.dep-viewer__node:hover{filter:brightness(.96)}.dep-viewer__node--selected rect{stroke-width:2.5}.dep-viewer__node-backdrop{fill:var(--color-surface)}.dep-viewer__node-label{font-size:12px;font-weight:500;pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__toggle{cursor:pointer}.dep-viewer__toggle:hover circle{fill:var(--color-surface-hover)}.dep-viewer__more{pointer-events:none}.dep-viewer__more rect{fill:var(--color-surface-2);stroke:var(--color-border-strong);stroke-width:1}.dep-viewer__more text{font-size:9px;font-weight:600;fill:var(--color-text-secondary);-webkit-user-select:none;user-select:none}.dep-viewer__toggle-text{font-size:11px;font-weight:600;fill:var(--color-text-secondary);pointer-events:none;-webkit-user-select:none;user-select:none}.dep-viewer__legend{display:flex;flex-wrap:wrap;gap:12px;padding:6px 12px;border-top:1px solid var(--color-border);background:var(--color-surface-2)}.dep-viewer__legend-item{display:flex;align-items:center;gap:4px}.dep-viewer__legend-text{font-size:11px;color:var(--color-text-secondary)}.dep-viewer__detail{position:absolute;bottom:12px;right:12px;width:240px;padding:12px;background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--elevation-1);font-size:12px;z-index:10}.dep-viewer__detail-header{display:flex;align-items:center;gap:6px;margin-bottom:4px;font-size:13px}.dep-viewer__detail-type{margin-left:auto;padding:1px 6px;border-radius:3px;background:var(--color-surface-hover);color:var(--color-text-secondary);font-size:10px;font-weight:500}.dep-viewer__detail-status{font-size:10px}.dep-viewer__detail-status--default{color:var(--color-text-tertiary)}.dep-viewer__detail-status--active{color:var(--color-primary-400)}.dep-viewer__detail-status--success{color:var(--color-success-default)}.dep-viewer__detail-status--warning{color:var(--color-warning-default)}.dep-viewer__detail-status--error{color:var(--color-error-default)}.dep-viewer__detail-status--muted{color:var(--color-text-disabled)}.dep-viewer__detail-desc{color:var(--color-text-secondary);margin:0 0 6px;line-height:1.4}.dep-viewer__detail-meta{display:flex;flex-wrap:wrap;gap:8px;color:var(--color-text-tertiary);font-size:11px}.dep-viewer__detail-deps{margin-top:8px;padding-top:8px;border-top:1px solid var(--color-border)}.dep-viewer__detail-deps ul{list-style:none;margin:4px 0 0;padding:0}.dep-viewer__detail-deps li{padding:2px 0;color:var(--color-text-secondary)}.dep-viewer__dep-relation{display:inline-block;padding:1px 4px;background:var(--color-surface-hover);border-radius:3px;font-size:10px;font-weight:500;color:var(--color-text-secondary)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { root: [{ type: i0.Input, args: [{ isSignal: true, alias: "root", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], showEdgeLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdgeLabels", required: false }] }], edgeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "edgeWidth", required: false }] }], anchorNodeId: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchorNodeId", required: false }] }], typeColors: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeColors", required: false }] }], hiddenRelations: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenRelations", required: false }] }], hiddenTypes: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenTypes", required: false }] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeExpand: [{ type: i0.Output, args: ["nodeExpand"] }], onMouseMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]