@life-cockpit/angular-ui-kit 2.14.0 → 2.16.0

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

@@ -13503,6 +13503,15 @@ const BACK_EDGE_BOW = 36;
 const ROUTE_SAMPLES = 24;
 /** Ignore grazing the very edge of a box — only a real incursion counts. */
 const ROUTE_INSET = 3;
+/** Breathing room around the graph's bounding box when auto-fitting, in layout units. */
+const FIT_PADDING = 24;
+/**
+ * Auto-fit shrinks to fit but never enlarges: blowing a two-node graph up to fill
+ * a 600px frame reads as broken, not as "fitted".
+ */
+const MAX_FIT_SCALE = 1;
+/** Floor for the fit scale, so a huge graph in a tiny box stays a graph, not a smear. */
+const MIN_FIT_SCALE = 0.05;
 const RELATION_STYLES = {
     depends: { color: 'var(--color-neutral-400)', dashed: false, label: 'depends on' },
     blocks: { color: 'var(--color-error-default)', dashed: false, label: 'blocks' },
@@ -13572,7 +13581,7 @@ function layoutTreeH(measure, x, y, parentId, nodes, edges, allNodes, nodeMap) {
             path: `M ${sx} ${sy} C ${mx} ${sy}, ${mx} ${ty}, ${tx} ${ty}`,
             labelX: mx, labelY: (sy + ty) / 2,
             color: 'var(--color-neutral-300)', dashed: false, isCrossRef: false,
-            marker: 'depends',
+            arrow: false, marker: 'depends',
         });
     }
     let childY = y;
@@ -13605,7 +13614,7 @@ function layoutTreeV(measure, x, y, parentId, nodes, edges, allNodes, nodeMap) {
             path: `M ${sx} ${sy} C ${sx} ${my}, ${tx} ${my}, ${tx} ${ty}`,
             labelX: (sx + tx) / 2, labelY: my,
             color: 'var(--color-neutral-300)', dashed: false, isCrossRef: false,
-            marker: 'depends',
+            arrow: false, marker: 'depends',
         });
     }
     let childX = x;
@@ -13775,7 +13784,8 @@ function createCrossRefEdges(nodeMap, allOriginal, dir, backEdges) {
                 path: geo.path, relation: dep.relation,
                 label: dep.relationLabel ?? style.label,
                 labelX: geo.labelX, labelY: geo.labelY,
-                color: style.color, dashed: style.dashed, isCrossRef: true, marker: relation,
+                color: style.color, dashed: style.dashed, isCrossRef: true,
+                arrow: true, marker: relation,
             });
         }
     }
@@ -13793,11 +13803,367 @@ function createCrossRefEdges(nodeMap, allOriginal, dir, backEdges) {
         edges.push({
             id: `${back.from}↺${back.to}`, sourceId: back.from, targetId: back.to,
             path: geo.path, labelX: geo.labelX, labelY: geo.labelY,
-            color: style.color, dashed: true, isCrossRef: true, marker: 'depends',
+            color: style.color, dashed: true, isCrossRef: true,
+            arrow: true, marker: 'depends',
         });
     }
     return edges;
 }
+const push = (map, key, value) => {
+    const bucket = map.get(key);
+    if (bucket)
+        bucket.push(value);
+    else
+        map.set(key, [value]);
+};
+/**
+ * Flattens the input into the node set and the precedence links the layered
+ * layout works on.
+ *
+ * Both link kinds are precedence: `dependsOn` says "this comes after that", and a
+ * `children` link says the same of a parent and its child. Layering over their
+ * union is what keeps a `children` edge pointing *with* the flow instead of
+ * doubling back across the graph, and means nothing in the input goes undrawn.
+ * A pair joined both ways is one edge, styled by its `dependsOn` relation.
+ *
+ * A self-link is dropped: it constrains a node to sit after itself, which no
+ * layering can satisfy, and it has nowhere to be drawn.
+ */
+function collectGraph(roots) {
+    const nodes = new Map();
+    const order = [];
+    const edges = new Map();
+    const walk = (node) => {
+        if (!nodes.has(node.id)) {
+            nodes.set(node.id, node);
+            order.push(node.id);
+        }
+        for (const child of node.children || []) {
+            const fresh = !nodes.has(child.id);
+            if (node.id !== child.id) {
+                edges.set(`${node.id}→${child.id}`, {
+                    from: node.id, to: child.id, structural: true, back: false,
+                });
+            }
+            // Guards the recursion: a cycle or a second parent revisits a node that is
+            // already collected, and there is nothing left to collect from it.
+            if (fresh)
+                walk(child);
+        }
+    };
+    for (const root of roots)
+        walk(root);
+    for (const id of order) {
+        for (const dep of nodes.get(id)?.dependsOn || []) {
+            if (dep.id === id || !nodes.has(dep.id))
+                continue;
+            const style = RELATION_STYLES[resolveRelation(dep.relation)];
+            edges.set(`${dep.id}→${id}`, {
+                from: dep.id, to: id, relation: dep.relation,
+                label: dep.relationLabel ?? style.label,
+                structural: false, back: false,
+            });
+        }
+    }
+    return { order, nodes, edges: [...edges.values()] };
+}
+/**
+ * Longest-path layering: a node sits one layer past the deepest thing it depends
+ * on, so every forward edge points strictly onwards and a node with several
+ * predecessors clears *all* of them. Nodes with no predecessor land in layer 0.
+ *
+ * A cycle can't be layered — some link in the loop has to point backwards. A DFS
+ * picks those out (a link to a node still on the stack) and marks them `back`;
+ * the layering then runs on what's left, which is acyclic by construction. So a
+ * cyclic input lays out fine, with the loop-closing links drawn as return edges.
+ */
+function assignLayers(order, edges) {
+    const out = new Map();
+    for (const edge of edges)
+        push(out, edge.from, edge);
+    // Iterative DFS: a recursive one overflows the stack on a long chain, and a
+    // process-order graph is mostly chain.
+    const UNSEEN = 0, ON_STACK = 1, DONE = 2;
+    const state = new Map();
+    for (const start of order) {
+        if (state.get(start))
+            continue;
+        state.set(start, ON_STACK);
+        const stack = [{ id: start, next: 0 }];
+        while (stack.length) {
+            const frame = stack[stack.length - 1];
+            const outgoing = out.get(frame.id) ?? [];
+            if (frame.next >= outgoing.length) {
+                state.set(frame.id, DONE);
+                stack.pop();
+                continue;
+            }
+            const edge = outgoing[frame.next++];
+            const seen = state.get(edge.to) ?? UNSEEN;
+            if (seen === ON_STACK)
+                edge.back = true; // closes a loop
+            if (seen !== UNSEEN)
+                continue;
+            state.set(edge.to, ON_STACK);
+            stack.push({ id: edge.to, next: 0 });
+        }
+    }
+    // Longest path over what's left, walked in topological order.
+    const indegree = new Map(order.map(id => [id, 0]));
+    for (const edge of edges) {
+        if (!edge.back)
+            indegree.set(edge.to, (indegree.get(edge.to) ?? 0) + 1);
+    }
+    const layer = new Map(order.map(id => [id, 0]));
+    const queue = order.filter(id => !indegree.get(id));
+    for (let i = 0; i < queue.length; i++) {
+        for (const edge of out.get(queue[i]) ?? []) {
+            if (edge.back)
+                continue;
+            layer.set(edge.to, Math.max(layer.get(edge.to) ?? 0, (layer.get(queue[i]) ?? 0) + 1));
+            const remaining = (indegree.get(edge.to) ?? 0) - 1;
+            indegree.set(edge.to, remaining);
+            if (!remaining)
+                queue.push(edge.to);
+        }
+    }
+    return layer;
+}
+/** Median of the neighbour positions, or -1 when a node has no neighbours to follow. */
+function median(values) {
+    if (!values.length)
+        return -1;
+    const sorted = [...values].sort((a, b) => a - b);
+    const mid = sorted.length >> 1;
+    return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+}
+/** Row index of every node within its own layer. */
+function positionIndex(layers) {
+    const index = new Map();
+    for (const layer of layers)
+        layer.forEach((id, i) => index.set(id, i));
+    return index;
+}
+/**
+ * Edges cross when their endpoints are ordered oppositely in the two layers they
+ * span. Counted per layer *pair* rather than per adjacent layer, so an edge
+ * skipping a layer is scored too — this layout has no dummy nodes, and in a
+ * dependency graph the long edges are exactly the ones that tangle.
+ */
+function countCrossings(layers, edges, layerOf) {
+    const index = positionIndex(layers);
+    const groups = new Map();
+    for (const edge of edges) {
+        if (edge.back)
+            continue;
+        const from = index.get(edge.from);
+        const to = index.get(edge.to);
+        if (from === undefined || to === undefined)
+            continue;
+        push(groups, `${layerOf.get(edge.from)}:${layerOf.get(edge.to)}`, [from, to]);
+    }
+    let crossings = 0;
+    for (const pairs of groups.values()) {
+        for (let i = 0; i < pairs.length; i++) {
+            for (let j = i + 1; j < pairs.length; j++) {
+                if ((pairs[i][0] - pairs[j][0]) * (pairs[i][1] - pairs[j][1]) < 0)
+                    crossings++;
+            }
+        }
+    }
+    return crossings;
+}
+/** Sweeps to run over the layers; each one reorders against the previous result. */
+const ORDER_SWEEPS = 8;
+/**
+ * Crossing minimisation, median heuristic (Sugiyama's second phase): a node wants
+ * to sit level with the middle of its neighbours, and ordering every layer that
+ * way repeatedly untangles the edges between them.
+ *
+ * Sweeps alternate direction — downward passes order a layer by its predecessors,
+ * upward passes by its successors — because settling one side alone just moves the
+ * tangle to the other. The heuristic isn't monotonic, so the best ordering seen is
+ * kept rather than the last one.
+ */
+function orderLayers(layers, edges, layerOf) {
+    const predecessors = new Map();
+    const successors = new Map();
+    for (const edge of edges) {
+        if (edge.back)
+            continue;
+        push(predecessors, edge.to, edge.from);
+        push(successors, edge.from, edge.to);
+    }
+    const current = layers.map(layer => [...layer]);
+    let best = current.map(layer => [...layer]);
+    let bestCrossings = countCrossings(current, edges, layerOf);
+    for (let sweep = 0; sweep < ORDER_SWEEPS && bestCrossings > 0; sweep++) {
+        const downward = sweep % 2 === 0;
+        const reference = downward ? predecessors : successors;
+        const index = positionIndex(current);
+        // The first layer of a downward sweep (and the last of an upward one) has no
+        // reference layer, so it stays as it is and anchors the sweep.
+        const targets = current.map((_, i) => i);
+        for (const i of downward ? targets.slice(1) : targets.slice(0, -1).reverse()) {
+            current[i] = [...current[i]]
+                .map((id, row) => {
+                const neighbours = (reference.get(id) ?? [])
+                    .map(n => index.get(n))
+                    .filter((p) => p !== undefined);
+                const m = median(neighbours);
+                // No neighbours to follow: hold the current row, so a free node doesn't
+                // get swept to the top of the layer on every pass.
+                return { id, row, key: m < 0 ? row : m };
+            })
+                .sort((a, b) => a.key - b.key || a.row - b.row)
+                .map(entry => entry.id);
+        }
+        const crossings = countCrossings(current, edges, layerOf);
+        if (crossings < bestCrossings) {
+            bestCrossings = crossings;
+            best = current.map(layer => [...layer]);
+        }
+    }
+    return best;
+}
+/** Alignment passes run after ordering, to straighten the edges it left behind. */
+const ALIGN_PASSES = 4;
+/**
+ * Secondary-axis coordinates: with the row *order* fixed, slide each node towards
+ * the middle of its neighbours so chains run straight instead of stair-stepping.
+ *
+ * Order and spacing are invariants here — the ordering phase chose them, and this
+ * must not undo its work. So each layer is placed by a forward cascade that can
+ * only push nodes further along, then shifted back by the average push: a uniform
+ * shift keeps every gap and every relative position, and cancels the drift the
+ * cascade would otherwise accumulate down the layer.
+ */
+function alignSecondary(layers, edges, step) {
+    const predecessors = new Map();
+    const successors = new Map();
+    for (const edge of edges) {
+        if (edge.back)
+            continue;
+        push(predecessors, edge.to, edge.from);
+        push(successors, edge.from, edge.to);
+    }
+    const pos = new Map();
+    for (const layer of layers)
+        layer.forEach((id, i) => pos.set(id, i * step));
+    for (let pass = 0; pass < ALIGN_PASSES; pass++) {
+        const downward = pass % 2 === 0;
+        const reference = downward ? predecessors : successors;
+        const indices = layers.map((_, i) => i);
+        for (const i of downward ? indices.slice(1) : indices.slice(0, -1).reverse()) {
+            const layer = layers[i];
+            if (!layer.length)
+                continue;
+            const wanted = layer.map(id => {
+                const neighbours = (reference.get(id) ?? [])
+                    .map(n => pos.get(n))
+                    .filter((p) => p !== undefined);
+                return neighbours.length ? median(neighbours) : (pos.get(id) ?? 0);
+            });
+            const placed = [];
+            for (let k = 0; k < layer.length; k++) {
+                placed[k] = k === 0 ? wanted[k] : Math.max(wanted[k], placed[k - 1] + step);
+            }
+            const drift = placed.reduce((sum, p, k) => sum + (p - wanted[k]), 0) / placed.length;
+            layer.forEach((id, k) => pos.set(id, placed[k] - drift));
+        }
+    }
+    // Normalise so the graph starts at the origin, like the tree layout does.
+    const min = Math.min(...pos.values());
+    for (const [id, value] of pos)
+        pos.set(id, value - min);
+    return pos;
+}
+/**
+ * Places the nodes of a dependency graph in layers running left→right
+ * (`horizontal`) or top→bottom (`vertical`).
+ *
+ * Unlike the tree layout, the column a node lands in is decided by the *graph*, not
+ * by the shape of the `children` nesting it happened to arrive in: layer = longest
+ * dependency path to it. Every link is drawn, including the ones a tree layout has
+ * to discard to keep a single parent per node.
+ */
+function layoutLayered(roots, dir, allNodes) {
+    const { order, nodes: originals, edges } = collectGraph(roots);
+    if (!order.length) {
+        return { nodes: [], edges: [], nodeMap: new Map(), width: 0, height: 0 };
+    }
+    const layerOf = assignLayers(order, edges);
+    const depth = Math.max(...layerOf.values());
+    const layers = Array.from({ length: depth + 1 }, () => []);
+    for (const id of order)
+        layers[layerOf.get(id) ?? 0].push(id);
+    const ordered = orderLayers(layers, edges, layerOf);
+    const primarySize = dir === 'horizontal' ? NODE_WIDTH : NODE_HEIGHT;
+    const secondarySize = dir === 'horizontal' ? NODE_HEIGHT : NODE_WIDTH;
+    const secondary = alignSecondary(ordered, edges, secondarySize + V_GAP);
+    const nodes = [];
+    const nodeMap = new Map();
+    for (const layer of ordered) {
+        for (const id of layer) {
+            const source = originals.get(id);
+            if (!source)
+                continue;
+            const original = allNodes.get(id);
+            const primary = (layerOf.get(id) ?? 0) * (primarySize + H_GAP);
+            const across = secondary.get(id) ?? 0;
+            const laid = {
+                id, label: source.label, description: source.description, icon: source.icon,
+                status: source.status || 'default', type: source.type, moreCount: source.moreCount,
+                x: dir === 'horizontal' ? primary : across,
+                y: dir === 'horizontal' ? across : primary,
+                width: NODE_WIDTH, height: NODE_HEIGHT,
+                depth: layerOf.get(id) ?? 0,
+                // Layers come from the whole graph, not from one parent — there is no
+                // single node this one hangs off, so nothing to report as its parent.
+                parentId: null,
+                incomingCount: original?.dependsOn?.length ?? 0,
+                outgoingCount: original?.children?.length ?? 0,
+            };
+            nodes.push(laid);
+            nodeMap.set(id, laid);
+        }
+    }
+    const laidOut = [...nodeMap.values()];
+    const layoutEdges = [];
+    for (const edge of edges) {
+        const source = nodeMap.get(edge.from);
+        const target = nodeMap.get(edge.to);
+        if (!source || !target)
+            continue;
+        const relation = resolveRelation(edge.relation);
+        const style = RELATION_STYLES[relation];
+        // A back edge runs against the flow by definition, so the direct route would
+        // double back through its own layers — it always bows clear instead.
+        const geo = routeCrossRef(source, target, dir, laidOut, /* allowDirect */ !edge.back);
+        layoutEdges.push({
+            id: `${edge.from}${edge.back ? '↺' : '⇢'}${edge.to}`,
+            sourceId: edge.from, targetId: edge.to,
+            path: geo.path, relation: edge.relation, label: edge.label,
+            labelX: geo.labelX, labelY: geo.labelY,
+            color: edge.structural ? 'var(--color-neutral-400)' : style.color,
+            dashed: edge.back || (!edge.structural && style.dashed),
+            // Everything here is a real dependency, so nothing is dimmed as secondary
+            // except the return edges — which the layering had to break to lay out.
+            isCrossRef: edge.back,
+            arrow: true,
+            marker: relation,
+        });
+    }
+    const width = (depth + 1) * primarySize + depth * H_GAP;
+    const across = Math.max(...laidOut.map(n => (dir === 'horizontal' ? n.y : n.x))) + secondarySize;
+    return {
+        nodes,
+        edges: layoutEdges,
+        nodeMap,
+        width: dir === 'horizontal' ? width : across,
+        height: dir === 'horizontal' ? across : width,
+    };
+}
 // ── Status colors ────────────────────────────────────────────────────────────
 // Labels read from the theme's semantic ink, not from a `--color-<status>-700`.
 // Those resolve to dark ink in both themes (error-700 is #6b0909), which on the
@@ -13852,6 +14218,8 @@ function readableInk(color) {
  * Dependency viewer component for visualizing hierarchical and cross-cutting relationships.
  *
  * Features:
+ * - Tree layout (depth in the `children` nesting) and layered/DAG layout (depth in
+ *   the dependency graph), via `layout`
  * - Horizontal (left-to-right) and vertical (top-to-bottom) layout directions
  * - Bidirectional dependencies: children (right/down) and dependsOn (cross-references)
  * - Relationship types: depends, blocks, references, requires, extends, implements, uses
@@ -13860,6 +14228,8 @@ function readableInk(color) {
  * - Color-coded edges per relationship type
  * - Node status colors (default, active, success, warning, error, muted)
  * - Pan and zoom controls with mouse wheel support
+ * - Fitting (`fitMode` / `autoFit`, `minNodeSize`) and a static, non-navigable
+ *   mode (`interactive: false`)
  * - Collapsible sub-trees
  * - Interactive node selection with detail panel
  * - Legend showing active relationship types
@@ -13868,11 +14238,24 @@ function readableInk(color) {
  *
  * ## Feeding it a graph
  *
- * `root` is a *tree*, but the input is treated as a graph: a link back to a node
- * that already has a place in the layout — a cycle, or a node reached from a
- * second parent — is drawn as a cross-reference arrow instead of being followed.
- * Every node is laid out exactly once, and no input can make the layout recurse
- * forever.
+ * `root` takes a single node (a tree) or an array (a forest — the shape to use for
+ * a flat set of items related only by `dependsOn`). Either way the input is treated
+ * as a graph: a link back to a node that already has a place in the layout — a
+ * cycle, or a node reached from a second parent — is drawn as a cross-reference
+ * arrow instead of being followed. Every node is laid out exactly once, and no
+ * input can make the layout recurse forever.
+ *
+ * ## Picking a layout
+ *
+ * `tree` (default) answers "what contains what": the column is the depth in the
+ * `children` nesting, and `dependsOn` links are drawn over the top without moving
+ * anything.
+ *
+ * `layered` answers "what has to happen first": the column is the depth in the
+ * dependency graph, so a node always sits past everything it depends on. Reach for
+ * it whenever the question is about order or impact rather than containment —
+ * a tree layout can only approximate that by first reducing the graph to a
+ * spanning tree, which throws away every link that doesn't fit one parent per node.
  *
  * For incremental exploration, hand in a wider `root` per step and let
  * `nodeExpand` drive the loading. Pan, zoom, collapse state and selection all
@@ -13884,6 +14267,28 @@ function readableInk(color) {
  * <lc-dependency-viewer [root]="specTree" direction="horizontal" />
  * ```
  *
+ * @example Order of work — a flat set of items, laid out by their dependencies
+ * ```html
+ * <lc-dependency-viewer
+ *   [root]="items()"
+ *   layout="layered"
+ *   direction="horizontal"
+ *   fitMode="fit-width"
+ *   (nodeSelect)="openItem($event)"
+ * />
+ * ```
+ *
+ * @example Static overview — the whole graph at a glance, click-through only
+ * ```html
+ * <lc-dependency-viewer
+ *   [root]="graph()"
+ *   [autoFit]="true"
+ *   [interactive]="false"
+ *   height="360px"
+ *   (nodeSelect)="openDetail($event)"
+ * />
+ * ```
+ *
  * @example Incremental graph exploration
  * ```html
  * <lc-dependency-viewer
@@ -13896,12 +14301,69 @@ function readableInk(color) {
  * ```
  */
 class DependencyViewerComponent {
+    /**
+     * The graph to draw. A single node is the root of a tree; an array is a forest,
+     * which is how you feed a flat set of items that has no natural root — e.g. the
+     * specs of a plan, related only by `dependsOn`.
+     */
     root = input.required(...(ngDevMode ? [{ debugName: "root" }] : /* istanbul ignore next */ []));
     direction = input('horizontal', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
     height = input('500px', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    /**
+     * `tree` (default) places nodes by their depth in the `children` nesting, and
+     * draws `dependsOn` links over the top as cross-references.
+     *
+     * `layered` places them by their depth in the *dependency* graph: a node always
+     * sits past everything it depends on, transitively, and nodes that depend on
+     * nothing start the first layer. That makes `direction="horizontal"` read as an
+     * order of work — left to right — which a tree layout can only approximate by
+     * first throwing away every link that doesn't fit a single-parent hierarchy.
+     *
+     * Use `layered` for process, sequencing and impact views; `tree` for containment
+     * hierarchies, where the nesting *is* the structure.
+     */
+    layout = input('tree', ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
     showToolbar = input(true, ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
     showEdgeLabels = input(true, ...(ngDevMode ? [{ debugName: "showEdgeLabels" }] : /* istanbul ignore next */ []));
     edgeWidth = input(1.5, ...(ngDevMode ? [{ debugName: "edgeWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Scales and centres the graph so that all of it fits the canvas, and re-fits
+     * whenever the container or the graph changes size. Turns the viewer into an
+     * overview: nothing to pan or zoom to, everything visible at once.
+     *
+     * Shrinks only — the fit never enlarges past 100%, so a two-node graph keeps its
+     * natural size instead of ballooning to fill the frame.
+     *
+     * Pair with `interactive: false` for a purely static display.
+     *
+     * Shorthand for `fitMode="contain"`, which supersedes it.
+     */
+    autoFit = input(false, ...(ngDevMode ? [{ debugName: "autoFit" }] : /* istanbul ignore next */ []));
+    /**
+     * How the graph is scaled into the frame. Defaults to `autoFit`'s setting —
+     * `contain` when it is on, `none` when it isn't — and overrides it when set.
+     *
+     * `contain` fits both axes, so everything is visible at once but a big graph
+     * shrinks to get there. `fit-width` fits the width only and lets the viewer grow
+     * as tall as the graph needs, so the nodes keep a readable size and the *page*
+     * scrolls; the graph itself never scrolls internally. Past roughly 20 nodes a
+     * process view generally wants `fit-width`.
+     */
+    fitMode = input(null, ...(ngDevMode ? [{ debugName: "fitMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Smallest node width, in px, that fitting may shrink to. Below it the fit stops
+     * scaling down and lets the graph overflow instead — which `fit-width` turns into
+     * page scroll, and `contain` into clipping. Pair it with `fit-width`.
+     *
+     * Nodes are 160px wide unscaled, so e.g. `80` allows shrinking to half size.
+     */
+    minNodeSize = input(null, ...(ngDevMode ? [{ debugName: "minNodeSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Viewport navigation: drag-to-pan, wheel-zoom and the toolbar's zoom buttons.
+     * `false` freezes the viewport — node selection, expansion and collapse keep
+     * working, so `nodeSelect` still fires in a static viewer.
+     */
+    interactive = input(true, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
     /**
      * Node the viewport holds still across `root` updates. Defaults to the node the
      * user last selected, which keeps click-to-expand steady without any wiring.
@@ -13927,39 +14389,45 @@ class DependencyViewerComponent {
     lastMouseX = 0;
     lastMouseY = 0;
     hostEl = inject((ElementRef));
+    canvasRef = viewChild('canvas', ...(ngDevMode ? [{ debugName: "canvasRef" }] : /* istanbul ignore next */ []));
     /** Last known layout position of the anchor, to compensate pan after a relayout. */
     anchorPos = null;
-    effectiveRoot = computed(() => this.pruneCollapsed(this.root(), this.collapsedIds(), new Set()), ...(ngDevMode ? [{ debugName: "effectiveRoot" }] : /* istanbul ignore next */ []));
+    roots = computed(() => {
+        const root = this.root();
+        return Array.isArray(root) ? root : [root];
+    }, ...(ngDevMode ? [{ debugName: "roots" }] : /* istanbul ignore next */ []));
+    effectiveRoots = computed(() => {
+        const collapsed = this.collapsedIds();
+        // One `visited` set across the whole forest: a node reachable from two roots
+        // is the same node, and must be pruned identically wherever it turns up.
+        const visited = new Set();
+        return this.roots().map(root => this.pruneCollapsed(root, collapsed, visited));
+    }, ...(ngDevMode ? [{ debugName: "effectiveRoots" }] : /* istanbul ignore next */ []));
     allOriginalNodes = computed(() => {
         const map = new Map();
-        collectAllNodes(this.root(), map);
+        for (const root of this.roots())
+            collectAllNodes(root, map);
         return map;
     }, ...(ngDevMode ? [{ debugName: "allOriginalNodes" }] : /* istanbul ignore next */ []));
-    layout = computed(() => {
-        const root = this.effectiveRoot();
+    /**
+     * The laid-out graph. Named `graph` rather than `layout` because `layout` is the
+     * input that picks *how* it gets laid out.
+     */
+    graph = computed(() => {
         const dir = this.direction();
         const hiddenTypes = new Set(this.hiddenTypes());
         const hiddenRelations = new Set(this.hiddenRelations());
-        const backEdges = [];
-        const measured = measureTree(root, 0, dir, new Set(), backEdges);
-        const nodes = [];
-        const nodeMap = new Map();
-        const treeEdges = [];
         const allNodes = this.allOriginalNodes();
-        if (dir === 'horizontal') {
-            layoutTreeH(measured, 0, 0, null, nodes, treeEdges, allNodes, nodeMap);
-        }
-        else {
-            layoutTreeV(measured, 0, 0, null, nodes, treeEdges, allNodes, nodeMap);
-        }
-        const crossEdges = createCrossRefEdges(nodeMap, allNodes, dir, backEdges);
-        const edges = [...treeEdges, ...crossEdges].filter(e => !(e.relation && hiddenRelations.has(e.relation)));
+        const placed = this.layout() === 'layered'
+            ? layoutLayered(this.effectiveRoots(), dir, allNodes)
+            : this.layoutTree(dir, allNodes);
+        const edges = placed.edges.filter(e => !(e.relation && hiddenRelations.has(e.relation)));
         // Type filtering hides nodes and anything still pointing at them. It runs
         // after layout so the remaining nodes keep the positions they'd have anyway —
         // toggling a filter must not reshuffle the whole graph.
         const visibleNodes = hiddenTypes.size
-            ? nodes.filter(n => !(n.type && hiddenTypes.has(n.type)))
-            : nodes;
+            ? placed.nodes.filter(n => !(n.type && hiddenTypes.has(n.type)))
+            : placed.nodes;
         const visibleIds = new Set(visibleNodes.map(n => n.id));
         const visibleEdges = hiddenTypes.size
             ? edges.filter(e => visibleIds.has(e.sourceId) && visibleIds.has(e.targetId))
@@ -13967,11 +14435,66 @@ class DependencyViewerComponent {
         return {
             nodes: visibleNodes,
             edges: visibleEdges,
+            nodeMap: placed.nodeMap,
+            width: placed.width,
+            height: placed.height,
+        };
+    }, ...(ngDevMode ? [{ debugName: "graph" }] : /* istanbul ignore next */ []));
+    /**
+     * Tree layout over the forest: each root gets its own band along the secondary
+     * axis. A `visited` set shared by all of them keeps a node that hangs off two
+     * roots from being laid out twice — the second link becomes a cross-reference,
+     * exactly as a second parent within one tree does.
+     */
+    layoutTree(dir, allNodes) {
+        const backEdges = [];
+        const visited = new Set();
+        const measured = this.effectiveRoots().map(root => measureTree(root, 0, dir, visited, backEdges));
+        const nodes = [];
+        const nodeMap = new Map();
+        const treeEdges = [];
+        let offset = 0;
+        for (const measure of measured) {
+            if (dir === 'horizontal') {
+                layoutTreeH(measure, 0, offset, null, nodes, treeEdges, allNodes, nodeMap);
+            }
+            else {
+                layoutTreeV(measure, offset, 0, null, nodes, treeEdges, allNodes, nodeMap);
+            }
+            offset += measure.secondary + V_GAP;
+        }
+        const primary = measured.length ? Math.max(...measured.map(m => m.primary)) : 0;
+        const secondary = Math.max(0, offset - V_GAP);
+        return {
+            nodes,
+            edges: [...treeEdges, ...createCrossRefEdges(nodeMap, allNodes, dir, backEdges)],
             nodeMap,
-            width: dir === 'horizontal' ? measured.primary : measured.secondary,
-            height: dir === 'horizontal' ? measured.secondary : measured.primary,
+            width: dir === 'horizontal' ? primary : secondary,
+            height: dir === 'horizontal' ? secondary : primary,
         };
-    }, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    }
+    /**
+     * Height `fit-width` derived from the graph, or `null` under any other mode.
+     *
+     * `fit-width` scales to the frame's width and lets the height follow the graph,
+     * so a tall graph runs past the frame and the *page* scrolls instead of the nodes
+     * shrinking out of legibility. The height is therefore always the graph's, never
+     * the frame's — including when the graph is the shorter of the two. Deriving it
+     * unconditionally is also what keeps the fit stable: this height becomes the
+     * canvas's, so a fit that consulted the canvas height would be reading back its
+     * own last output and could flip between two answers forever.
+     */
+    contentHeight = signal(null, ...(ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []));
+    effectiveFitMode = computed(() => this.fitMode() ?? (this.autoFit() ? 'contain' : 'none'), ...(ngDevMode ? [{ debugName: "effectiveFitMode" }] : /* istanbul ignore next */ []));
+    /** The host only gives up its configured height when the fit made it grow. */
+    hostHeight = computed(() => (this.contentHeight() === null ? this.height() : 'auto'), ...(ngDevMode ? [{ debugName: "hostHeight" }] : /* istanbul ignore next */ []));
+    /** `minNodeSize` expressed as the scale it forbids fitting to go below. */
+    minFitScale = computed(() => {
+        const min = this.minNodeSize();
+        if (!min || min <= 0)
+            return MIN_FIT_SCALE;
+        return Math.min(MAX_FIT_SCALE, Math.max(MIN_FIT_SCALE, min / NODE_WIDTH));
+    }, ...(ngDevMode ? [{ debugName: "minFitScale" }] : /* istanbul ignore next */ []));
     constructor() {
         // Keep the anchor node pinned to its screen position across relayouts. A new
         // `root` (an expand step) re-runs the tree layout from scratch, which recentres
@@ -13979,9 +14502,11 @@ class DependencyViewerComponent {
         // graph slides underneath it. Compensating the pan by the anchor's own delta is
         // what makes incremental expansion feel stable.
         effect(() => {
-            const nodeMap = this.layout().nodeMap;
+            const nodeMap = this.graph().nodeMap;
             const anchorId = this.anchorNodeId() ?? this.selectedNodeId();
-            if (!anchorId) {
+            // Fitting recentres the whole graph on every relayout, which subsumes
+            // holding one node still. Running both would have them fight over the pan.
+            if (this.effectiveFitMode() !== 'none' || !anchorId) {
                 this.anchorPos = null;
                 return;
             }
@@ -14004,19 +14529,49 @@ class DependencyViewerComponent {
             }
             this.anchorPos = { id: anchorId, x: node.x, y: node.y };
         });
+        // Re-fit when the graph changes shape. Reading `canvasRef` here (rather than
+        // only inside `fit`) is what gets the *first* fit to run: the view child
+        // resolves after the initial render, which re-triggers this effect at the
+        // point the canvas finally has a measurable size.
+        effect(() => {
+            if (this.effectiveFitMode() === 'none') {
+                // Leaving fit-width behind: the grown height was this fit's doing, so it
+                // goes with it, or the host keeps a size nothing is maintaining any more.
+                untracked(() => this.contentHeight.set(null));
+                return;
+            }
+            if (!this.canvasRef())
+                return;
+            this.graph();
+            this.minFitScale();
+            untracked(() => this.fit());
+        });
+        // …and when the container changes size. ResizeObserver delivers an initial
+        // callback on observe, so this covers the first fit in a browser too.
+        effect(onCleanup => {
+            const el = this.canvasRef()?.nativeElement;
+            if (this.effectiveFitMode() === 'none' || !el || typeof ResizeObserver === 'undefined')
+                return;
+            const observer = new ResizeObserver(() => this.fit());
+            observer.observe(el);
+            onCleanup(() => observer.disconnect());
+        });
     }
-    svgWidth = computed(() => this.layout().width + 80, ...(ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []));
-    svgHeight = computed(() => this.layout().height + 80, ...(ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []));
+    svgWidth = computed(() => this.graph().width + 80, ...(ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []));
+    svgHeight = computed(() => this.graph().height + 80, ...(ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []));
     viewBox = computed(() => `0 0 ${this.svgWidth()} ${this.svgHeight()}`, ...(ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []));
     transform = computed(() => {
         const z = this.zoom() / 100;
         return `translate(${this.panX()}px, ${this.panY()}px) scale(${z})`;
     }, ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    // A fitted scale is an arbitrary fraction; the readout is not the source of
+    // truth, so it rounds rather than printing "63.41999999%".
+    zoomLabel = computed(() => Math.round(this.zoom()), ...(ngDevMode ? [{ debugName: "zoomLabel" }] : /* istanbul ignore next */ []));
     selectedNode = computed(() => {
         const id = this.selectedNodeId();
         if (!id)
             return null;
-        return this.layout().nodes.find(n => n.id === id) ?? null;
+        return this.graph().nodes.find(n => n.id === id) ?? null;
     }, ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
     selectedDependsOn = computed(() => {
         const id = this.selectedNodeId();
@@ -14029,8 +14584,10 @@ class DependencyViewerComponent {
     // of built-in relation types they borrow their colour from.
     legendItems = computed(() => {
         const seen = new Map();
-        for (const edge of this.layout().edges) {
-            if (!edge.isCrossRef || !edge.label || seen.has(edge.label))
+        for (const edge of this.graph().edges) {
+            // Keyed off the label, not `isCrossRef`: in the layered layout the labelled
+            // dependency edges are the main flow, not cross-references.
+            if (!edge.label || seen.has(edge.label))
                 continue;
             seen.set(edge.label, { label: edge.label, color: edge.color, dashed: edge.dashed });
         }
@@ -14039,7 +14596,7 @@ class DependencyViewerComponent {
     typeLegendItems = computed(() => {
         const colors = this.typeColors();
         const seen = new Map();
-        for (const node of this.layout().nodes) {
+        for (const node of this.graph().nodes) {
             if (!node.type || seen.has(node.type) || !colors[node.type])
                 continue;
             seen.set(node.type, { type: node.type, color: colors[node.type] });
@@ -14107,11 +14664,11 @@ class DependencyViewerComponent {
     // expand/collapse. Mirrors lc-tree-view's expandAll()/collapseAll() surface.
     /** Centres the viewport on a node. No-op for an id that isn't laid out. */
     focusNode(id) {
-        const node = this.layout().nodeMap.get(id);
+        const node = this.graph().nodeMap.get(id);
         if (!node)
             return;
         const z = this.zoom() / 100;
-        const el = this.hostEl.nativeElement.querySelector('.dep-viewer__canvas');
+        const el = this.canvasEl();
         const viewW = el?.clientWidth ?? 0;
         const viewH = el?.clientHeight ?? 0;
         // Invert screen = pan + z * layout for the node's centre.
@@ -14119,8 +14676,62 @@ class DependencyViewerComponent {
         this.panY.set(viewH / 2 - (node.y + node.height / 2) * z);
         this.anchorPos = { id, x: node.x, y: node.y };
     }
-    /** Restores the initial zoom and pan. */
+    /**
+     * Scales and centres the graph to fit the canvas, per `fitMode`. Called for you
+     * when fitting is on; public so a caller can fit on demand without it.
+     *
+     * No-op while the canvas has no size (before the first render, or in a detached
+     * / `display: none` container) — the fit observers re-run once it does.
+     */
+    fit() {
+        const mode = this.effectiveFitMode();
+        if (mode === 'none')
+            return;
+        const el = this.canvasEl();
+        const viewW = el?.clientWidth ?? 0;
+        const viewH = el?.clientHeight ?? 0;
+        if (!viewW || !viewH)
+            return;
+        const box = this.contentBox();
+        if (box.width <= 0 || box.height <= 0)
+            return;
+        // `fit-width` deliberately ignores the height: it is the mode that lets the
+        // graph be taller than the frame. That is also what keeps it stable — the
+        // height it produces feeds back in as the canvas's own height, and a scale
+        // derived from that height would chase itself.
+        const natural = mode === 'fit-width'
+            ? viewW / box.width
+            : Math.min(viewW / box.width, viewH / box.height);
+        const scale = Math.min(MAX_FIT_SCALE, Math.max(this.minFitScale(), natural));
+        this.zoom.set(scale * 100);
+        // Invert screen = pan + scale * layout for the box's top-left corner, so the
+        // box lands centred in the canvas.
+        this.panX.set((viewW - box.width * scale) / 2 - box.x * scale);
+        const scaledHeight = box.height * scale;
+        if (mode === 'fit-width') {
+            // The viewer takes the graph's height and pins it to the top. Past the frame
+            // that means the page scrolls through a readable graph rather than the frame
+            // clipping one that was shrunk to fit.
+            this.contentHeight.set(Math.ceil(scaledHeight));
+            this.panY.set(-box.y * scale);
+        }
+        else {
+            this.contentHeight.set(null);
+            this.panY.set((viewH - scaledHeight) / 2 - box.y * scale);
+        }
+        // The camera just moved deliberately; a stale anchor baseline would have the
+        // next relayout "correct" a position this fit had already chosen.
+        this.anchorPos = null;
+    }
+    /**
+     * Restores the initial view — the fitted one under `autoFit`, otherwise the
+     * default zoom and pan.
+     */
     resetView() {
+        if (this.effectiveFitMode() !== 'none') {
+            this.fit();
+            return;
+        }
         this.zoom.set(100);
         this.panX.set(40);
         this.panY.set(40);
@@ -14158,8 +14769,47 @@ class DependencyViewerComponent {
         }
         this.collapsedIds.set(ids);
     }
+    // ── Viewport measurement ───────────────────────────────────────────────────
+    canvasEl() {
+        return (this.canvasRef()?.nativeElement ??
+            this.hostEl.nativeElement.querySelector('.dep-viewer__canvas'));
+    }
+    /**
+     * Bounding box of everything drawn, in layout units.
+     *
+     * Edge label points stand in for the edges themselves. A parent→child edge stays
+     * inside the node boxes anyway, and a bowed cross-reference puts its label at the
+     * apex of the bow — the only part of it that reaches outside them.
+     */
+    contentBox() {
+        const { nodes, edges } = this.graph();
+        if (!nodes.length)
+            return { x: 0, y: 0, width: 0, height: 0 };
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const n of nodes) {
+            minX = Math.min(minX, n.x);
+            minY = Math.min(minY, n.y);
+            maxX = Math.max(maxX, n.x + n.width);
+            maxY = Math.max(maxY, n.y + n.height);
+        }
+        for (const e of edges) {
+            minX = Math.min(minX, e.labelX);
+            minY = Math.min(minY, e.labelY);
+            maxX = Math.max(maxX, e.labelX);
+            maxY = Math.max(maxY, e.labelY);
+        }
+        return {
+            x: minX - FIT_PADDING,
+            y: minY - FIT_PADDING,
+            width: maxX - minX + FIT_PADDING * 2,
+            height: maxY - minY + FIT_PADDING * 2,
+        };
+    }
     onMouseDown(event) {
-        if (event.button !== 0)
+        if (!this.interactive() || event.button !== 0)
             return;
         this.isPanning = true;
         this.lastMouseX = event.clientX;
@@ -14175,6 +14825,10 @@ class DependencyViewerComponent {
     }
     onMouseUp() { this.isPanning = false; }
     onWheel(event) {
+        // Return *before* preventDefault: a static viewer must not swallow the wheel
+        // event, or the page can't be scrolled past it.
+        if (!this.interactive())
+            return;
         event.preventDefault();
         this.zoom.update(z => event.deltaY < 0 ? Math.min(z + 10, 300) : Math.max(z - 10, 25));
     }
@@ -14195,12 +14849,12 @@ 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. 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 });
+    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 }, layout: { classPropertyName: "layout", publicName: "layout", 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 }, autoFit: { classPropertyName: "autoFit", publicName: "autoFit", isSignal: true, isRequired: false, transformFunction: null }, fitMode: { classPropertyName: "fitMode", publicName: "fitMode", isSignal: true, isRequired: false, transformFunction: null }, minNodeSize: { classPropertyName: "minNodeSize", publicName: "minNodeSize", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", 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": "hostHeight()" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Toolbar. The zoom cluster is navigation, so it goes with `interactive`; the\n     direction indicator is a read-out and stays. -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    @if (interactive()) {\n      <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n      <span class=\"dep-viewer__zoom\">{{ zoomLabel() }}%</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    }\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  #canvas\n  class=\"dep-viewer__canvas\"\n  [class.dep-viewer__canvas--static]=\"!interactive()\"\n  [class.dep-viewer__canvas--sized]=\"contentHeight() !== null\"\n  [style.height.px]=\"contentHeight()\"\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 graph().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.arrow ? '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 graph().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 graph().edges; track edge.id) {\n        @if (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:flex;flex-direction:column;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%;flex:1 1 auto;min-height:0}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__canvas--static,.dep-viewer__canvas--static:active{cursor:default}.dep-viewer__canvas--sized{flex:0 0 auto}.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. 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: [{
+            args: [{ selector: 'lc-dependency-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class]': '"dep-viewer"', '[style.height]': 'hostHeight()' }, template: "<!-- Toolbar. The zoom cluster is navigation, so it goes with `interactive`; the\n     direction indicator is a read-out and stays. -->\n@if (showToolbar()) {\n  <div class=\"dep-viewer__toolbar\">\n    @if (interactive()) {\n      <button class=\"dep-viewer__btn\" (click)=\"zoomIn()\" title=\"Zoom in\">+</button>\n      <span class=\"dep-viewer__zoom\">{{ zoomLabel() }}%</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    }\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '\u2192' : '\u2193' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<div\n  #canvas\n  class=\"dep-viewer__canvas\"\n  [class.dep-viewer__canvas--static]=\"!interactive()\"\n  [class.dep-viewer__canvas--sized]=\"contentHeight() !== null\"\n  [style.height.px]=\"contentHeight()\"\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 graph().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.arrow ? '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 graph().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 graph().edges; track edge.id) {\n        @if (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:flex;flex-direction:column;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%;flex:1 1 auto;min-height:0}.dep-viewer__canvas:active{cursor:grabbing}.dep-viewer__canvas--static,.dep-viewer__canvas--static:active{cursor:default}.dep-viewer__canvas--sized{flex:0 0 auto}.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 }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", 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 }] }], autoFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFit", required: false }] }], fitMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "fitMode", required: false }] }], minNodeSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "minNodeSize", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", 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"] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }], onMouseMove: [{
                 type: HostListener,
                 args: ['document:mousemove', ['$event']]
             }], onMouseUp: [{