@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-dependency-viewer.mjs

@@ -0,0 +1,1761 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, HostListener, computed, effect, inject, input, output, signal, untracked, viewChild } from "@angular/core";
+const NODE_MIN_WIDTH = 160;
+const NODE_MAX_WIDTH = 240;
+const NODE_HEIGHT = 40;
+const NODE_HEIGHT_TWO_LINE = 54;
+const LABEL_FONT_SIZE = 12;
+const LABEL_FONT_WEIGHT = 500;
+const LABEL_LINE_HEIGHT = 15;
+const LABEL_BASELINE_SHIFT = 4;
+const EDGE_LABEL_FONT_SIZE = 9;
+const EDGE_LABEL_GAP = 4;
+const H_GAP = 80;
+const V_GAP = 24;
+const BOW_CLEARANCE = 28;
+const BOW_LANE_STEP = 18;
+const BOW_LABEL_MARGIN = 10;
+const TOGGLE_EXTENT = 18;
+const TOGGLE_CLEARANCE = 13;
+const ROUTE_SAMPLES = 24;
+const ROUTE_INSET = 3;
+const FIT_PADDING = 24;
+const MAX_FIT_SCALE = 1;
+const MIN_FIT_SCALE = .05;
+const CHAR_WIDTH_CLASSES = [
+	["ijl", .23],
+	[" !.,:;'|Ift/\\[]", .28],
+	["-()r`", .33],
+	["ckszxyvJ", .5],
+	["abdeghnopqu0123456789$#?_L", .56],
+	["TZF", .61],
+	["ABEKPSVXY&", .67],
+	["CDHNRUw", .72],
+	["GOQ", .78],
+	["Mm%", .83],
+	["W", .94],
+	["@", 1]
+];
+const CHAR_WIDTHS = /* @__PURE__ */ new Map();
+for (const [chars, width] of CHAR_WIDTH_CLASSES) for (const c of chars) CHAR_WIDTHS.set(c, width);
+function estimateTextWidth(text, fontSize) {
+	let em = 0;
+	for (const ch of text.normalize("NFD")) {
+		if (/\p{M}/u.test(ch)) continue;
+		const code = ch.codePointAt(0) ?? 0;
+		em += CHAR_WIDTHS.get(ch) ?? (code > 11903 ? 1 : .6);
+	}
+	return em * fontSize * 1.04;
+}
+function createTextMeasurer(fontFamily, fontSize, fontWeight) {
+	if (typeof document !== "undefined" && typeof CanvasRenderingContext2D === "function") {
+		const ctx = document.createElement("canvas").getContext("2d");
+		if (ctx) {
+			ctx.font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+			if (!ctx.font.includes(`${fontSize}px`)) ctx.font = `${fontWeight} ${fontSize}px sans-serif`;
+			return (text) => ctx.measureText(text).width;
+		}
+	}
+	return (text) => estimateTextWidth(text, fontSize);
+}
+function ellipsize(text, maxWidth, measure) {
+	let lo = 0;
+	let hi = text.length;
+	while (lo < hi) {
+		const mid = lo + hi + 1 >> 1;
+		if (measure(text.slice(0, mid).trimEnd() + "…") <= maxWidth) lo = mid;
+		else hi = mid - 1;
+	}
+	return text.slice(0, lo).trimEnd() + "…";
+}
+function splitWord(word, maxWidth, measure) {
+	for (let i = word.length - 1; i > 0; i--) if (word[i - 1] === "-" && measure(word.slice(0, i)) <= maxWidth) return [word.slice(0, i), word.slice(i)];
+	let lo = 1;
+	let hi = word.length;
+	while (lo < hi) {
+		const mid = lo + hi + 1 >> 1;
+		if (measure(word.slice(0, mid)) <= maxWidth) lo = mid;
+		else hi = mid - 1;
+	}
+	return [word.slice(0, lo), word.slice(lo)];
+}
+function wrapLabel(text, maxWidth, measure) {
+	const label = text.trim().replace(/\s+/g, " ");
+	if (!label || measure(label) <= maxWidth) return {
+		lines: [label],
+		truncated: false
+	};
+	const lines = [];
+	let rest = label.split(" ");
+	while (rest.length && lines.length < 1) {
+		let take = 0;
+		while (take < rest.length && measure(rest.slice(0, take + 1).join(" ")) <= maxWidth) take++;
+		if (take === 0) {
+			const [head, tail] = splitWord(rest[0], maxWidth, measure);
+			lines.push(head);
+			rest = [tail, ...rest.slice(1)];
+		} else {
+			lines.push(rest.slice(0, take).join(" "));
+			rest = rest.slice(take);
+		}
+	}
+	const last = rest.join(" ");
+	if (!last) return {
+		lines,
+		truncated: false
+	};
+	if (measure(last) <= maxWidth) return {
+		lines: [...lines, last],
+		truncated: false
+	};
+	return {
+		lines: [...lines, ellipsize(last, maxWidth, measure)],
+		truncated: true
+	};
+}
+const edgeLabelWidth = (measure, label) => label ? measure(label) * EDGE_LABEL_FONT_SIZE / LABEL_FONT_SIZE : 0;
+function measureNodes(nodes, measure) {
+	const all = [...nodes];
+	let widest = 0;
+	for (const node of all) widest = Math.max(widest, measure(node.label ?? ""));
+	const width = Math.min(NODE_MAX_WIDTH, Math.max(NODE_MIN_WIDTH, Math.ceil(widest) + 24));
+	const labels = /* @__PURE__ */ new Map();
+	let twoLine = false;
+	for (const node of all) {
+		const wrapped = wrapLabel(node.label ?? "", width - 24, measure);
+		labels.set(node.id, wrapped);
+		if (wrapped.lines.length > 1) twoLine = true;
+	}
+	return {
+		width,
+		height: twoLine ? NODE_HEIGHT_TWO_LINE : NODE_HEIGHT,
+		gap: H_GAP,
+		labels,
+		measure
+	};
+}
+const RELATION_STYLES = {
+	depends: {
+		color: "var(--color-neutral-400)",
+		dashed: false,
+		label: "depends on"
+	},
+	blocks: {
+		color: "var(--color-error-default)",
+		dashed: false,
+		label: "blocks"
+	},
+	references: {
+		color: "var(--color-info-default, #3b82f6)",
+		dashed: true,
+		label: "references"
+	},
+	requires: {
+		color: "var(--color-warning-default)",
+		dashed: false,
+		label: "requires"
+	},
+	extends: {
+		color: "var(--color-primary-400)",
+		dashed: true,
+		label: "extends"
+	},
+	implements: {
+		color: "var(--color-success-default)",
+		dashed: true,
+		label: "implements"
+	},
+	uses: {
+		color: "var(--color-neutral-300)",
+		dashed: true,
+		label: "uses"
+	}
+};
+function measureTree(node, depth, dir, visited, backEdges, metrics) {
+	visited.add(node.id);
+	const children = [];
+	for (const child of node.children || []) {
+		if (visited.has(child.id)) {
+			backEdges.push({
+				from: node.id,
+				to: child.id
+			});
+			continue;
+		}
+		children.push(measureTree(child, depth + 1, dir, visited, backEdges, metrics));
+	}
+	const nodePrimary = dir === "horizontal" ? metrics.width : metrics.height;
+	const nodeSecondary = dir === "horizontal" ? metrics.height : metrics.width;
+	if (children.length === 0) return {
+		node,
+		primary: nodePrimary,
+		secondary: nodeSecondary,
+		children,
+		depth
+	};
+	const totalChildSecondary = children.reduce((sum, c) => sum + c.secondary, 0) + (children.length - 1) * V_GAP;
+	const maxChildPrimary = Math.max(...children.map((c) => c.primary));
+	return {
+		node,
+		primary: nodePrimary + metrics.gap + maxChildPrimary,
+		secondary: Math.max(nodeSecondary, totalChildSecondary),
+		children,
+		depth
+	};
+}
+function placeNode(source, original, x, y, depth, parentId, metrics) {
+	const label = metrics.labels.get(source.id);
+	return {
+		id: source.id,
+		label: source.label,
+		description: source.description,
+		icon: source.icon,
+		status: source.status || "default",
+		type: source.type,
+		moreCount: source.moreCount,
+		x,
+		y,
+		width: metrics.width,
+		height: metrics.height,
+		lines: label?.lines ?? [source.label],
+		truncated: label?.truncated ?? false,
+		depth,
+		parentId,
+		incomingCount: original?.dependsOn?.length ?? 0,
+		outgoingCount: original?.children?.length ?? 0
+	};
+}
+function layoutTreeH(measure, x, y, parentId, nodes, edges, allNodes, nodeMap, metrics) {
+	const nodeY = y + measure.secondary / 2 - metrics.height / 2;
+	const laid = placeNode(measure.node, allNodes.get(measure.node.id), x, nodeY, measure.depth, parentId, metrics);
+	nodes.push(laid);
+	nodeMap.set(laid.id, laid);
+	if (parentId) {
+		const parent = nodeMap.get(parentId);
+		const sx = parent.x + parent.width;
+		const sy = parent.y + parent.height / 2;
+		const tx = x;
+		const ty = nodeY + metrics.height / 2;
+		const mx = sx + metrics.gap / 2;
+		edges.push({
+			id: `${parentId}→${measure.node.id}`,
+			sourceId: parentId,
+			targetId: measure.node.id,
+			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,
+			arrow: false,
+			marker: "depends"
+		});
+	}
+	let childY = y;
+	for (const child of measure.children) {
+		layoutTreeH(child, x + metrics.width + metrics.gap, childY, measure.node.id, nodes, edges, allNodes, nodeMap, metrics);
+		childY += child.secondary + V_GAP;
+	}
+}
+function layoutTreeV(measure, x, y, parentId, nodes, edges, allNodes, nodeMap, metrics) {
+	const nodeX = x + measure.secondary / 2 - metrics.width / 2;
+	const laid = placeNode(measure.node, allNodes.get(measure.node.id), nodeX, y, measure.depth, parentId, metrics);
+	nodes.push(laid);
+	nodeMap.set(laid.id, laid);
+	if (parentId) {
+		const parent = nodeMap.get(parentId);
+		const sx = parent.x + parent.width / 2;
+		const sy = parent.y + parent.height;
+		const tx = nodeX + metrics.width / 2;
+		const ty = y;
+		const my = sy + metrics.gap / 2;
+		edges.push({
+			id: `${parentId}→${measure.node.id}`,
+			sourceId: parentId,
+			targetId: measure.node.id,
+			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,
+			arrow: false,
+			marker: "depends"
+		});
+	}
+	let childX = x;
+	for (const child of measure.children) {
+		layoutTreeV(child, childX, y + metrics.height + metrics.gap, measure.node.id, nodes, edges, allNodes, nodeMap, metrics);
+		childX += child.secondary + V_GAP;
+	}
+}
+function collectAllNodes(node, map) {
+	if (map.has(node.id)) return;
+	map.set(node.id, node);
+	for (const child of node.children || []) collectAllNodes(child, map);
+}
+const push = (map, key, value) => {
+	const bucket = map.get(key);
+	if (bucket) bucket.push(value);
+	else map.set(key, [value]);
+};
+const cubicPath = (p) => `M ${p[0].x} ${p[0].y} C ${p[1].x} ${p[1].y}, ${p[2].x} ${p[2].y}, ${p[3].x} ${p[3].y}`;
+function cubicAt(p, t) {
+	const m = 1 - t;
+	return {
+		x: m * m * m * p[0].x + 3 * m * m * t * p[1].x + 3 * m * t * t * p[2].x + t * t * t * p[3].x,
+		y: m * m * m * p[0].y + 3 * m * m * t * p[1].y + 3 * m * t * t * p[2].y + t * t * t * p[3].y
+	};
+}
+function crossedNodes(points, nodes, exclude) {
+	const hit = /* @__PURE__ */ new Map();
+	for (let i = 0; i <= ROUTE_SAMPLES; i++) {
+		const p = cubicAt(points, i / ROUTE_SAMPLES);
+		for (const n of nodes) {
+			if (exclude.has(n.id) || hit.has(n.id)) continue;
+			if (p.x > n.x + ROUTE_INSET && p.x < n.x + n.width - ROUTE_INSET && p.y > n.y + ROUTE_INSET && p.y < n.y + n.height - ROUTE_INSET) hit.set(n.id, n);
+		}
+	}
+	return [...hit.values()];
+}
+function directGeometry(source, target, dir) {
+	if (dir === "horizontal") {
+		const p0 = {
+			x: source.x + source.width,
+			y: source.y + source.height / 2
+		};
+		const p3 = {
+			x: target.x,
+			y: target.y + target.height / 2
+		};
+		const mx = (p0.x + p3.x) / 2;
+		const points = [
+			p0,
+			{
+				x: mx,
+				y: p0.y
+			},
+			{
+				x: mx,
+				y: p3.y
+			},
+			p3
+		];
+		return {
+			path: cubicPath(points),
+			labelX: mx,
+			labelY: (p0.y + p3.y) / 2,
+			labelAnchor: "middle",
+			points
+		};
+	}
+	const p0 = {
+		x: source.x + source.width / 2,
+		y: source.y + source.height
+	};
+	const p3 = {
+		x: target.x + target.width / 2,
+		y: target.y
+	};
+	const my = (p0.y + p3.y) / 2;
+	const points = [
+		p0,
+		{
+			x: p0.x,
+			y: my
+		},
+		{
+			x: p3.x,
+			y: my
+		},
+		p3
+	];
+	return {
+		path: cubicPath(points),
+		labelX: (p0.x + p3.x) / 2,
+		labelY: my,
+		labelAnchor: "middle",
+		points
+	};
+}
+function sideAttach(node, other, side, dir) {
+	const underToggle = node.outgoingCount > 0 && (dir === "horizontal" && side === "right" || dir === "vertical" && side === "below");
+	if (side === "right" || side === "left") {
+		const x = side === "right" ? node.x + node.width : node.x;
+		let y = node.y + node.height / 2;
+		if (underToggle) y += Math.sign(other.y - node.y || 1) * TOGGLE_CLEARANCE;
+		return {
+			x,
+			y
+		};
+	}
+	const y = side === "below" ? node.y + node.height : node.y;
+	let x = node.x + node.width / 2;
+	if (underToggle) x += Math.sign(other.x - node.x || 1) * TOGGLE_CLEARANCE;
+	return {
+		x,
+		y
+	};
+}
+function bowedGeometry(source, target, obstacles, side, dir, lane = 0, baseOverride) {
+	const all = [
+		source,
+		target,
+		...obstacles
+	];
+	const control = (BOW_CLEARANCE + lane * BOW_LANE_STEP) / .75;
+	const p0 = sideAttach(source, target, side, dir);
+	const p3 = sideAttach(target, source, side, dir);
+	const toggleSide = dir === "horizontal" ? "right" : "below";
+	const extent = (n) => side === toggleSide && n.outgoingCount > 0 ? TOGGLE_EXTENT : 0;
+	const outward = side === "below" || side === "right" ? 1 : -1;
+	let column;
+	let base;
+	switch (side) {
+		case "below":
+			column = Math.max(...all.map((n) => n.y + n.height));
+			base = Math.max(...all.map((n) => n.y + n.height + extent(n)));
+			break;
+		case "above":
+			column = base = Math.min(...all.map((n) => n.y));
+			break;
+		case "right":
+			column = Math.max(...all.map((n) => n.x + n.width));
+			base = Math.max(...all.map((n) => n.x + n.width + extent(n)));
+			break;
+		case "left": column = base = Math.min(...all.map((n) => n.x));
+	}
+	if (baseOverride !== void 0) base = baseOverride;
+	const reach = base + outward * control;
+	const points = side === "right" || side === "left" ? [
+		p0,
+		{
+			x: reach,
+			y: p0.y
+		},
+		{
+			x: reach,
+			y: p3.y
+		},
+		p3
+	] : [
+		p0,
+		{
+			x: p0.x,
+			y: reach
+		},
+		{
+			x: p3.x,
+			y: reach
+		},
+		p3
+	];
+	const apex = cubicAt(points, .5);
+	const sideways = side === "right" || side === "left";
+	const labelX = sideways ? apex.x + outward * EDGE_LABEL_GAP : apex.x;
+	const labelY = sideways ? apex.y : apex.y + outward * 8.5;
+	const along = sideways ? [p0.y, p3.y] : [p0.x, p3.x];
+	return {
+		path: cubicPath(points),
+		labelX,
+		labelY,
+		labelAnchor: sideways ? outward > 0 ? "start" : "end" : "middle",
+		points,
+		bow: {
+			side,
+			column,
+			base,
+			apex: side === "right" || side === "left" ? apex.x : apex.y,
+			lo: Math.min(...along),
+			hi: Math.max(...along),
+			source,
+			target,
+			obstacles,
+			dir
+		}
+	};
+}
+function requiredGap(nodes, edges, dir, metrics, labelsShown) {
+	const along = dir === "horizontal" ? {
+		start: (n) => n.x,
+		end: (n) => n.x + n.width,
+		out: "right",
+		back: "left"
+	} : {
+		start: (n) => n.y,
+		end: (n) => n.y + n.height,
+		out: "below",
+		back: "above"
+	};
+	const first = Math.min(...nodes.map(along.start));
+	const last = Math.max(...nodes.map(along.end));
+	let need = metrics.gap;
+	for (const { bow, label } of edges) {
+		if (!bow) continue;
+		const shown = labelsShown && label;
+		const room = dir === "horizontal" ? shown ? EDGE_LABEL_GAP + edgeLabelWidth(metrics.measure, label) : 0 : shown ? 13 : 0;
+		if (bow.side === along.out && bow.column < last) need = Math.max(need, bow.apex - bow.column + room + BOW_LABEL_MARGIN);
+		else if (bow.side === along.back && bow.column > first) need = Math.max(need, bow.column - bow.apex + room + BOW_LABEL_MARGIN);
+	}
+	return Math.ceil(need);
+}
+const acrossSides = (dir) => dir === "horizontal" ? ["below", "above"] : ["right", "left"];
+const alongSides = (dir) => dir === "horizontal" ? ["right", "left"] : ["below", "above"];
+function routeCrossRef(source, target, dir, nodes) {
+	const exclude = /* @__PURE__ */ new Set([source.id, target.id]);
+	const [s0, s1] = dir === "horizontal" ? [source.x, source.x + source.width] : [source.y, source.y + source.height];
+	const [t0, t1] = dir === "horizontal" ? [target.x, target.x + target.width] : [target.y, target.y + target.height];
+	const ahead = t0 >= s1;
+	const behind = t1 <= s0;
+	let best = null;
+	let bestCount = Infinity;
+	let obstacles;
+	let sides;
+	if (ahead) {
+		const direct = directGeometry(source, target, dir);
+		obstacles = crossedNodes(direct.points, nodes, exclude);
+		if (!obstacles.length) return direct;
+		best = direct;
+		bestCount = obstacles.length;
+		sides = [...acrossSides(dir), ...alongSides(dir)];
+	} else {
+		const c0 = {
+			x: source.x + source.width / 2,
+			y: source.y + source.height / 2
+		};
+		const c1 = {
+			x: target.x + target.width / 2,
+			y: target.y + target.height / 2
+		};
+		obstacles = crossedNodes([
+			c0,
+			c0,
+			c1,
+			c1
+		], nodes, exclude);
+		sides = behind ? [...acrossSides(dir), ...alongSides(dir)] : alongSides(dir);
+	}
+	for (const side of sides) {
+		const candidate = bowedGeometry(source, target, obstacles, side, dir);
+		const count = crossedNodes(candidate.points, nodes, exclude).length;
+		if (count < bestCount) {
+			best = candidate;
+			bestCount = count;
+			if (count === 0) break;
+		}
+	}
+	return best ?? bowedGeometry(source, target, obstacles, sides[0], dir);
+}
+function spreadBows(edges) {
+	const groups = /* @__PURE__ */ new Map();
+	for (const edge of edges) if (edge.bow) push(groups, `${edge.bow.side}@${Math.round(edge.bow.column)}`, {
+		edge,
+		bow: edge.bow
+	});
+	for (const group of groups.values()) {
+		if (group.length < 2) continue;
+		group.sort((a, b) => a.bow.hi - a.bow.lo - (b.bow.hi - b.bow.lo));
+		const side = group[0].bow.side;
+		const base = side === "below" || side === "right" ? Math.max(...group.map((g) => g.bow.base)) : Math.min(...group.map((g) => g.bow.base));
+		const placed = [];
+		for (const { edge, bow } of group) {
+			const taken = new Set(placed.filter((p) => p.lo < bow.hi && bow.lo < p.hi).map((p) => p.lane));
+			let lane = 0;
+			while (taken.has(lane)) lane++;
+			placed.push({
+				lo: bow.lo,
+				hi: bow.hi,
+				lane
+			});
+			if (lane === 0 && base === bow.base) continue;
+			const geo = bowedGeometry(bow.source, bow.target, bow.obstacles, bow.side, bow.dir, lane, base);
+			edge.path = geo.path;
+			edge.labelX = geo.labelX;
+			edge.labelY = geo.labelY;
+			edge.labelAnchor = geo.labelAnchor;
+			edge.bow = geo.bow;
+		}
+	}
+}
+function resolveRelation(relation) {
+	return relation && RELATION_STYLES[relation] ? relation : "depends";
+}
+function createCrossRefEdges(nodeMap, allOriginal, dir, backEdges) {
+	const edges = [];
+	const nodes = [...nodeMap.values()];
+	for (const [, orig] of allOriginal) {
+		if (!orig.dependsOn?.length) continue;
+		const target = nodeMap.get(orig.id);
+		if (!target) continue;
+		for (const dep of orig.dependsOn) {
+			const source = nodeMap.get(dep.id);
+			if (!source) continue;
+			const relation = resolveRelation(dep.relation);
+			const style = RELATION_STYLES[relation];
+			const geo = routeCrossRef(source, target, dir, nodes);
+			edges.push({
+				id: `${dep.id}⇢${orig.id}`,
+				sourceId: dep.id,
+				targetId: orig.id,
+				path: geo.path,
+				relation: dep.relation,
+				label: dep.relationLabel ?? style.label,
+				labelX: geo.labelX,
+				labelY: geo.labelY,
+				labelAnchor: geo.labelAnchor,
+				color: style.color,
+				dashed: style.dashed,
+				isCrossRef: true,
+				arrow: true,
+				marker: relation,
+				bow: geo.bow
+			});
+		}
+	}
+	for (const back of backEdges) {
+		const source = nodeMap.get(back.from);
+		const target = nodeMap.get(back.to);
+		if (!source || !target) continue;
+		const style = RELATION_STYLES.depends;
+		const geo = routeCrossRef(source, target, dir, nodes);
+		edges.push({
+			id: `${back.from}↺${back.to}`,
+			sourceId: back.from,
+			targetId: back.to,
+			path: geo.path,
+			labelX: geo.labelX,
+			labelY: geo.labelY,
+			labelAnchor: geo.labelAnchor,
+			color: style.color,
+			dashed: true,
+			isCrossRef: true,
+			arrow: true,
+			marker: "depends",
+			bow: geo.bow
+		});
+	}
+	spreadBows(edges);
+	return edges;
+}
+function collectGraph(roots) {
+	const nodes = /* @__PURE__ */ new Map();
+	const order = [];
+	const edges = /* @__PURE__ */ 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
+			});
+			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()]
+	};
+}
+function assignLayers(order, edges) {
+	const out = /* @__PURE__ */ new Map();
+	for (const edge of edges) push(out, edge.from, edge);
+	const UNSEEN = 0, ON_STACK = 1, DONE = 2;
+	const state = /* @__PURE__ */ 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;
+			if (seen !== UNSEEN) continue;
+			state.set(edge.to, ON_STACK);
+			stack.push({
+				id: edge.to,
+				next: 0
+			});
+		}
+	}
+	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;
+}
+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;
+}
+function positionIndex(layers) {
+	const index = /* @__PURE__ */ new Map();
+	for (const layer of layers) layer.forEach((id, i) => index.set(id, i));
+	return index;
+}
+function countCrossings(layers, edges, layerOf) {
+	const index = positionIndex(layers);
+	const groups = /* @__PURE__ */ 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 === void 0 || to === void 0) 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;
+}
+const ORDER_SWEEPS = 8;
+function orderLayers(layers, edges, layerOf) {
+	const predecessors = /* @__PURE__ */ new Map();
+	const successors = /* @__PURE__ */ 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);
+		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 m = median((reference.get(id) ?? []).map((n) => index.get(n)).filter((p) => p !== void 0));
+			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;
+}
+const ALIGN_PASSES = 4;
+function alignSecondary(layers, edges, step) {
+	const predecessors = /* @__PURE__ */ new Map();
+	const successors = /* @__PURE__ */ 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 = /* @__PURE__ */ 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 !== void 0);
+				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));
+		}
+	}
+	const min = Math.min(...pos.values());
+	for (const [id, value] of pos) pos.set(id, value - min);
+	return pos;
+}
+function layoutLayered(roots, dir, allNodes, metrics) {
+	const { order, nodes: originals, edges } = collectGraph(roots);
+	if (!order.length) return {
+		nodes: [],
+		edges: [],
+		nodeMap: /* @__PURE__ */ 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" ? metrics.width : metrics.height;
+	const secondarySize = dir === "horizontal" ? metrics.height : metrics.width;
+	const secondary = alignSecondary(ordered, edges, secondarySize + V_GAP);
+	const nodes = [];
+	const nodeMap = /* @__PURE__ */ new Map();
+	for (const layer of ordered) for (const id of layer) {
+		const source = originals.get(id);
+		if (!source) continue;
+		const primary = (layerOf.get(id) ?? 0) * (primarySize + metrics.gap);
+		const across = secondary.get(id) ?? 0;
+		const laid = placeNode(source, allNodes.get(id), dir === "horizontal" ? primary : across, dir === "horizontal" ? across : primary, layerOf.get(id) ?? 0, null, metrics);
+		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];
+		const geo = routeCrossRef(source, target, dir, laidOut);
+		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,
+			labelAnchor: geo.labelAnchor,
+			color: edge.structural ? "var(--color-neutral-400)" : style.color,
+			dashed: edge.back || !edge.structural && style.dashed,
+			isCrossRef: edge.back,
+			arrow: true,
+			marker: relation,
+			bow: geo.bow
+		});
+	}
+	spreadBows(layoutEdges);
+	const width = (depth + 1) * primarySize + depth * metrics.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
+	};
+}
+const STATUS_COLORS = {
+	default: {
+		bg: "var(--color-neutral-50)",
+		border: "var(--color-neutral-300)",
+		text: "var(--color-text-primary)"
+	},
+	active: {
+		bg: "var(--color-primary-50)",
+		border: "var(--color-primary-400)",
+		text: "var(--color-text-primary)"
+	},
+	success: {
+		bg: "var(--color-success-50, #f0fdf4)",
+		border: "var(--color-success-default)",
+		text: "var(--color-text-primary)"
+	},
+	warning: {
+		bg: "var(--color-warning-50, #fffbeb)",
+		border: "var(--color-warning-default)",
+		text: "var(--color-text-primary)"
+	},
+	error: {
+		bg: "var(--color-error-50, #fef2f2)",
+		border: "var(--color-error-default)",
+		text: "var(--color-text-primary)"
+	},
+	muted: {
+		bg: "var(--color-neutral-100)",
+		border: "var(--color-neutral-200)",
+		text: "var(--color-text-tertiary)"
+	}
+};
+function parseRgb(color) {
+	const hex = color.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+	if (hex) {
+		const h = hex[1];
+		const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+		return [
+			0,
+			2,
+			4
+		].map((i) => parseInt(full.slice(i, i + 2), 16));
+	}
+	const rgb = color.match(/^rgba?\(([^)]+)\)/i);
+	if (rgb) {
+		const p = rgb[1].split(",").map((s) => parseFloat(s));
+		if (p.length >= 3 && p.every((n) => !Number.isNaN(n))) return [
+			p[0],
+			p[1],
+			p[2]
+		];
+	}
+	return null;
+}
+function readableInk(color) {
+	const rgb = parseRgb(color);
+	if (!rgb) return "var(--color-text-primary)";
+	const [r, g, b] = rgb.map((c) => {
+		const s = c / 255;
+		return s <= .03928 ? s / 12.92 : Math.pow((s + .055) / 1.055, 2.4);
+	});
+	return .2126 * r + .7152 * g + .0722 * b > .4 ? "#111827" : "#f9fafb";
+}
+var DependencyViewerComponent = class DependencyViewerComponent {
+	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 */ []);
+	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 */ []);
+	autoFit = input(false, ...ngDevMode ? [{ debugName: "autoFit" }] : /* istanbul ignore next */ []);
+	fitMode = input(null, ...ngDevMode ? [{ debugName: "fitMode" }] : /* istanbul ignore next */ []);
+	minNodeSize = input(null, ...ngDevMode ? [{ debugName: "minNodeSize" }] : /* istanbul ignore next */ []);
+	interactive = input(true, ...ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []);
+	anchorNodeId = input(null, ...ngDevMode ? [{ debugName: "anchorNodeId" }] : /* istanbul ignore next */ []);
+	typeColors = input({}, ...ngDevMode ? [{ debugName: "typeColors" }] : /* istanbul ignore next */ []);
+	hiddenRelations = input([], ...ngDevMode ? [{ debugName: "hiddenRelations" }] : /* istanbul ignore next */ []);
+	hiddenTypes = input([], ...ngDevMode ? [{ debugName: "hiddenTypes" }] : /* istanbul ignore next */ []);
+	zoomInLabel = input("Zoom in", ...ngDevMode ? [{ debugName: "zoomInLabel" }] : /* istanbul ignore next */ []);
+	zoomOutLabel = input("Zoom out", ...ngDevMode ? [{ debugName: "zoomOutLabel" }] : /* istanbul ignore next */ []);
+	resetZoomLabel = input("Reset", ...ngDevMode ? [{ debugName: "resetZoomLabel" }] : /* istanbul ignore next */ []);
+	depthLabel = input("Depth:", ...ngDevMode ? [{ debugName: "depthLabel" }] : /* istanbul ignore next */ []);
+	childrenLabel = input("Children:", ...ngDevMode ? [{ debugName: "childrenLabel" }] : /* istanbul ignore next */ []);
+	dependsOnLabel = input("Depends on:", ...ngDevMode ? [{ debugName: "dependsOnLabel" }] : /* istanbul ignore next */ []);
+	dependenciesLabel = input("Dependencies:", ...ngDevMode ? [{ debugName: "dependenciesLabel" }] : /* istanbul ignore next */ []);
+	nodeSelect = output();
+	nodeExpand = output();
+	zoom = signal(100, ...ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []);
+	panX = signal(40, ...ngDevMode ? [{ debugName: "panX" }] : /* istanbul ignore next */ []);
+	panY = signal(40, ...ngDevMode ? [{ debugName: "panY" }] : /* istanbul ignore next */ []);
+	selectedNodeId = signal(null, ...ngDevMode ? [{ debugName: "selectedNodeId" }] : /* istanbul ignore next */ []);
+	collapsedIds = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "collapsedIds" }] : /* istanbul ignore next */ []);
+	isPanning = false;
+	lastMouseX = 0;
+	lastMouseY = 0;
+	hostEl = inject(ElementRef);
+	canvasRef = viewChild("canvas", ...ngDevMode ? [{ debugName: "canvasRef" }] : /* istanbul ignore next */ []);
+	anchorPos = null;
+	lineHeight = LABEL_LINE_HEIGHT;
+	baselineShift = LABEL_BASELINE_SHIFT;
+	textMeasure = null;
+	measureText() {
+		if (!this.textMeasure) {
+			let family = "";
+			if (typeof getComputedStyle === "function") family = getComputedStyle(this.hostEl.nativeElement).fontFamily;
+			this.textMeasure = createTextMeasurer(family || "sans-serif", LABEL_FONT_SIZE, LABEL_FONT_WEIGHT);
+		}
+		return this.textMeasure;
+	}
+	roots = computed(() => {
+		const root = this.root();
+		return Array.isArray(root) ? root : [root];
+	}, ...ngDevMode ? [{ debugName: "roots" }] : /* istanbul ignore next */ []);
+	effectiveRoots = computed(() => {
+		const collapsed = this.collapsedIds();
+		const visited = /* @__PURE__ */ new Set();
+		return this.roots().map((root) => this.pruneCollapsed(root, collapsed, visited));
+	}, ...ngDevMode ? [{ debugName: "effectiveRoots" }] : /* istanbul ignore next */ []);
+	allOriginalNodes = computed(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const root of this.roots()) collectAllNodes(root, map);
+		return map;
+	}, ...ngDevMode ? [{ debugName: "allOriginalNodes" }] : /* istanbul ignore next */ []);
+	nodeMetrics = computed(() => measureNodes(this.allOriginalNodes().values(), this.measureText()), ...ngDevMode ? [{ debugName: "nodeMetrics" }] : /* istanbul ignore next */ []);
+	graph = computed(() => {
+		const dir = this.direction();
+		const hiddenTypes = new Set(this.hiddenTypes());
+		const hiddenRelations = new Set(this.hiddenRelations());
+		const allNodes = this.allOriginalNodes();
+		const place = (metrics) => this.layout() === "layered" ? layoutLayered(this.effectiveRoots(), dir, allNodes, metrics) : this.layoutTree(dir, allNodes, metrics);
+		const metrics = this.nodeMetrics();
+		let placed = place(metrics);
+		const gap = requiredGap(placed.nodes, placed.edges, dir, metrics, this.showEdgeLabels());
+		if (gap > metrics.gap) placed = place({
+			...metrics,
+			gap
+		});
+		const edges = placed.edges.filter((e) => !(e.relation && hiddenRelations.has(e.relation)));
+		const visibleNodes = hiddenTypes.size ? placed.nodes.filter((n) => !(n.type && hiddenTypes.has(n.type))) : placed.nodes;
+		const visibleIds = new Set(visibleNodes.map((n) => n.id));
+		return {
+			nodes: visibleNodes,
+			edges: hiddenTypes.size ? edges.filter((e) => visibleIds.has(e.sourceId) && visibleIds.has(e.targetId)) : edges,
+			nodeMap: placed.nodeMap,
+			width: placed.width,
+			height: placed.height
+		};
+	}, ...ngDevMode ? [{ debugName: "graph" }] : /* istanbul ignore next */ []);
+	layoutTree(dir, allNodes, metrics) {
+		const backEdges = [];
+		const visited = /* @__PURE__ */ new Set();
+		const measured = this.effectiveRoots().map((root) => measureTree(root, 0, dir, visited, backEdges, metrics));
+		const nodes = [];
+		const nodeMap = /* @__PURE__ */ new Map();
+		const treeEdges = [];
+		let offset = 0;
+		for (const measure of measured) {
+			if (dir === "horizontal") layoutTreeH(measure, 0, offset, null, nodes, treeEdges, allNodes, nodeMap, metrics);
+			else layoutTreeV(measure, offset, 0, null, nodes, treeEdges, allNodes, nodeMap, metrics);
+			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" ? primary : secondary,
+			height: dir === "horizontal" ? secondary : primary
+		};
+	}
+	contentHeight = signal(null, ...ngDevMode ? [{ debugName: "contentHeight" }] : /* istanbul ignore next */ []);
+	effectiveFitMode = computed(() => this.fitMode() ?? (this.autoFit() ? "contain" : "none"), ...ngDevMode ? [{ debugName: "effectiveFitMode" }] : /* istanbul ignore next */ []);
+	hostHeight = computed(() => this.contentHeight() === null ? this.height() : "auto", ...ngDevMode ? [{ debugName: "hostHeight" }] : /* istanbul ignore next */ []);
+	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 / this.nodeMetrics().width));
+	}, ...ngDevMode ? [{ debugName: "minFitScale" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const nodeMap = this.graph().nodeMap;
+			const anchorId = this.anchorNodeId() ?? this.selectedNodeId();
+			if (this.effectiveFitMode() !== "none" || !anchorId) {
+				this.anchorPos = null;
+				return;
+			}
+			const node = nodeMap.get(anchorId);
+			if (!node) {
+				this.anchorPos = null;
+				return;
+			}
+			const prev = this.anchorPos;
+			if (prev && prev.id === anchorId && (prev.x !== node.x || prev.y !== node.y)) {
+				const dx = node.x - prev.x;
+				const dy = node.y - prev.y;
+				untracked(() => {
+					const z = this.zoom() / 100;
+					this.panX.set(this.panX() - dx * z);
+					this.panY.set(this.panY() - dy * z);
+				});
+			}
+			this.anchorPos = {
+				id: anchorId,
+				x: node.x,
+				y: node.y
+			};
+		});
+		effect(() => {
+			if (this.effectiveFitMode() === "none") {
+				untracked(() => this.contentHeight.set(null));
+				return;
+			}
+			if (!this.canvasRef()) return;
+			this.graph();
+			this.minFitScale();
+			untracked(() => this.fit());
+		});
+		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.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 */ []);
+	zoomLabel = computed(() => Math.round(this.zoom()), ...ngDevMode ? [{ debugName: "zoomLabel" }] : /* istanbul ignore next */ []);
+	selectedNode = computed(() => {
+		const id = this.selectedNodeId();
+		if (!id) return null;
+		return this.graph().nodes.find((n) => n.id === id) ?? null;
+	}, ...ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []);
+	selectedDependsOn = computed(() => {
+		const id = this.selectedNodeId();
+		if (!id) return [];
+		return this.allOriginalNodes().get(id)?.dependsOn ?? [];
+	}, ...ngDevMode ? [{ debugName: "selectedDependsOn" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => {
+		const seen = /* @__PURE__ */ new Map();
+		for (const edge of this.graph().edges) {
+			if (!edge.label || seen.has(edge.label)) continue;
+			seen.set(edge.label, {
+				label: edge.label,
+				color: edge.color,
+				dashed: edge.dashed
+			});
+		}
+		return Array.from(seen.values());
+	}, ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	typeLegendItems = computed(() => {
+		const colors = this.typeColors();
+		const seen = /* @__PURE__ */ new Map();
+		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]
+			});
+		}
+		return Array.from(seen.values());
+	}, ...ngDevMode ? [{ debugName: "typeLegendItems" }] : /* istanbul ignore next */ []);
+	hasChildren(nodeId) {
+		return !!this.allOriginalNodes().get(nodeId)?.children?.length;
+	}
+	isCollapsed(nodeId) {
+		return this.collapsedIds().has(nodeId);
+	}
+	getRelationLabel(relation) {
+		return RELATION_STYLES[relation]?.label ?? relation;
+	}
+	pruneCollapsed(node, collapsed, visited) {
+		if (visited.has(node.id) || collapsed.has(node.id) || !node.children?.length) return {
+			...node,
+			children: []
+		};
+		visited.add(node.id);
+		return {
+			...node,
+			children: node.children.map((c) => this.pruneCollapsed(c, collapsed, visited))
+		};
+	}
+	selectNode(id, event) {
+		event.stopPropagation();
+		const next = this.selectedNodeId() === id ? null : id;
+		this.selectedNodeId.set(next);
+		if (!next) return;
+		const original = this.allOriginalNodes().get(id);
+		if (original) this.nodeSelect.emit(original);
+	}
+	expandNode(id, event) {
+		event.stopPropagation();
+		this.selectedNodeId.set(id);
+		const original = this.allOriginalNodes().get(id);
+		if (original) this.nodeExpand.emit(original);
+	}
+	toggleCollapse(id, event) {
+		event.stopPropagation();
+		this.collapsedIds.update((set) => {
+			const next = new Set(set);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	}
+	deselectNode() {
+		this.selectedNodeId.set(null);
+	}
+	zoomIn() {
+		this.zoom.update((z) => Math.min(z + 25, 300));
+	}
+	zoomOut() {
+		this.zoom.update((z) => Math.max(z - 25, 25));
+	}
+	resetZoom() {
+		this.resetView();
+	}
+	focusNode(id) {
+		const node = this.graph().nodeMap.get(id);
+		if (!node) return;
+		const z = this.zoom() / 100;
+		const el = this.canvasEl();
+		const viewW = el?.clientWidth ?? 0;
+		const viewH = el?.clientHeight ?? 0;
+		this.panX.set(viewW / 2 - (node.x + node.width / 2) * z);
+		this.panY.set(viewH / 2 - (node.y + node.height / 2) * z);
+		this.anchorPos = {
+			id,
+			x: node.x,
+			y: node.y
+		};
+	}
+	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;
+		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);
+		this.panX.set((viewW - box.width * scale) / 2 - box.x * scale);
+		const scaledHeight = box.height * scale;
+		if (mode === "fit-width") {
+			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);
+		}
+		this.anchorPos = null;
+	}
+	resetView() {
+		if (this.effectiveFitMode() !== "none") {
+			this.fit();
+			return;
+		}
+		this.zoom.set(100);
+		this.panX.set(40);
+		this.panY.set(40);
+	}
+	expand(id) {
+		this.collapsedIds.update((set) => {
+			if (!set.has(id)) return set;
+			const next = new Set(set);
+			next.delete(id);
+			return next;
+		});
+	}
+	collapse(id) {
+		this.collapsedIds.update((set) => {
+			if (set.has(id)) return set;
+			const next = new Set(set);
+			next.add(id);
+			return next;
+		});
+	}
+	expandAll() {
+		this.collapsedIds.set(/* @__PURE__ */ new Set());
+	}
+	collapseAll() {
+		const ids = /* @__PURE__ */ new Set();
+		for (const [id, node] of this.allOriginalNodes()) if (node.children?.length) ids.add(id);
+		this.collapsedIds.set(ids);
+	}
+	canvasEl() {
+		return this.canvasRef()?.nativeElement ?? this.hostEl.nativeElement.querySelector(".dep-viewer__canvas");
+	}
+	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);
+		}
+		const measure = this.nodeMetrics().measure;
+		const labelsShown = this.showEdgeLabels();
+		for (const e of edges) {
+			const w = labelsShown ? edgeLabelWidth(measure, e.label) : 0;
+			const before = e.labelAnchor === "start" ? 0 : e.labelAnchor === "end" ? w : w / 2;
+			minX = Math.min(minX, e.labelX - before);
+			maxX = Math.max(maxX, e.labelX - before + w);
+			minY = Math.min(minY, e.labelY - EDGE_LABEL_FONT_SIZE / 2);
+			maxY = Math.max(maxY, e.labelY + EDGE_LABEL_FONT_SIZE / 2);
+		}
+		return {
+			x: minX - FIT_PADDING,
+			y: minY - FIT_PADDING,
+			width: maxX - minX + 48,
+			height: maxY - minY + 48
+		};
+	}
+	onMouseDown(event) {
+		if (!this.interactive() || event.button !== 0) return;
+		this.isPanning = true;
+		this.lastMouseX = event.clientX;
+		this.lastMouseY = event.clientY;
+	}
+	onMouseMove(event) {
+		if (!this.isPanning) return;
+		this.panX.update((x) => x + event.clientX - this.lastMouseX);
+		this.panY.update((y) => y + event.clientY - this.lastMouseY);
+		this.lastMouseX = event.clientX;
+		this.lastMouseY = event.clientY;
+	}
+	onMouseUp() {
+		this.isPanning = false;
+	}
+	onWheel(event) {
+		if (!this.interactive()) return;
+		event.preventDefault();
+		this.zoom.update((z) => event.deltaY < 0 ? Math.min(z + 10, 300) : Math.max(z - 10, 25));
+	}
+	getNodeBg(node) {
+		return (node.type ? this.typeColors()[node.type] : void 0) ?? STATUS_COLORS[node.status].bg;
+	}
+	getNodeBorder(node) {
+		return (node.type ? this.typeColors()[node.type] : void 0) ?? STATUS_COLORS[node.status].border;
+	}
+	getNodeText(node) {
+		const typeColor = node.type ? this.typeColors()[node.type] : void 0;
+		return typeColor ? readableInk(typeColor) : STATUS_COLORS[node.status].text;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: DependencyViewerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		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
+			},
+			zoomInLabel: {
+				classPropertyName: "zoomInLabel",
+				publicName: "zoomInLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			zoomOutLabel: {
+				classPropertyName: "zoomOutLabel",
+				publicName: "zoomOutLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			resetZoomLabel: {
+				classPropertyName: "resetZoomLabel",
+				publicName: "resetZoomLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			depthLabel: {
+				classPropertyName: "depthLabel",
+				publicName: "depthLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			childrenLabel: {
+				classPropertyName: "childrenLabel",
+				publicName: "childrenLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dependsOnLabel: {
+				classPropertyName: "dependsOnLabel",
+				publicName: "dependsOnLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dependenciesLabel: {
+				classPropertyName: "dependenciesLabel",
+				publicName: "dependenciesLabel",
+				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()\" [attr.title]=\"zoomInLabel()\" [attr.aria-label]=\"zoomInLabel()\">+</button>\n      <span class=\"dep-viewer__zoom\">{{ zoomLabel() }}%</span>\n      <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" [attr.title]=\"zoomOutLabel()\" [attr.aria-label]=\"zoomOutLabel()\">−</button>\n      <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" [attr.title]=\"resetZoomLabel()\" [attr.aria-label]=\"resetZoomLabel()\">⟲</button>\n    }\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '→' : '↓' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- background click clears the pointer selection; node selection is pointer-only in this component (known gap) -->\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 — 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        <!-- A label the box couldn't hold in full is offered whole as a tooltip. -->\n        @if (node.truncated) {\n          <title>{{ node.label }}</title>\n        }\n        <!-- Opaque backdrop. The status fills are translucent tints (in the dark\n             theme --color-success-50 & co. resolve to rgba(…, 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        <!-- One <tspan> per wrapped line, each restarting at the box's centre; the\n             block of lines is centred on the box vertically. No whitespace between\n             the spans — it would end up in the text. -->\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + baselineShift - ((node.lines.length - 1) * lineHeight) / 2\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node)\"\n          class=\"dep-viewer__node-label\"\n        >@for (line of node.lines; track $index) {<tspan [attr.x]=\"node.x + node.width / 2\" [attr.dy]=\"$first ? 0 : lineHeight\">{{ line }}</tspan>}</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) ? '+' : '−' }}</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) ? '+' : '−' }}</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 — 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            [attr.text-anchor]=\"edge.labelAnchor ?? '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 }}\">●</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>{{ depthLabel() }} {{ node.depth }}</span>\n      <span>{{ childrenLabel() }} {{ node.outgoingCount }}</span>\n      <span>{{ dependsOnLabel() }} {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>{{ dependenciesLabel() }}</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              → {{ 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;overflow:visible}.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: "22.2.2",
+	ngImport: i0,
+	type: DependencyViewerComponent,
+	decorators: [{
+		type: Component,
+		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()\" [attr.title]=\"zoomInLabel()\" [attr.aria-label]=\"zoomInLabel()\">+</button>\n      <span class=\"dep-viewer__zoom\">{{ zoomLabel() }}%</span>\n      <button class=\"dep-viewer__btn\" (click)=\"zoomOut()\" [attr.title]=\"zoomOutLabel()\" [attr.aria-label]=\"zoomOutLabel()\">−</button>\n      <button class=\"dep-viewer__btn dep-viewer__btn--reset\" (click)=\"resetZoom()\" [attr.title]=\"resetZoomLabel()\" [attr.aria-label]=\"resetZoomLabel()\">⟲</button>\n    }\n    <span class=\"dep-viewer__direction-label\">{{ direction() === 'horizontal' ? '→' : '↓' }}</span>\n  </div>\n}\n\n<!-- Canvas -->\n<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- background click clears the pointer selection; node selection is pointer-only in this component (known gap) -->\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 — 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        <!-- A label the box couldn't hold in full is offered whole as a tooltip. -->\n        @if (node.truncated) {\n          <title>{{ node.label }}</title>\n        }\n        <!-- Opaque backdrop. The status fills are translucent tints (in the dark\n             theme --color-success-50 & co. resolve to rgba(…, 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        <!-- One <tspan> per wrapped line, each restarting at the box's centre; the\n             block of lines is centred on the box vertically. No whitespace between\n             the spans — it would end up in the text. -->\n        <text\n          [attr.x]=\"node.x + node.width / 2\"\n          [attr.y]=\"node.y + node.height / 2 + baselineShift - ((node.lines.length - 1) * lineHeight) / 2\"\n          text-anchor=\"middle\"\n          [attr.fill]=\"getNodeText(node)\"\n          class=\"dep-viewer__node-label\"\n        >@for (line of node.lines; track $index) {<tspan [attr.x]=\"node.x + node.width / 2\" [attr.dy]=\"$first ? 0 : lineHeight\">{{ line }}</tspan>}</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) ? '+' : '−' }}</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) ? '+' : '−' }}</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 — 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            [attr.text-anchor]=\"edge.labelAnchor ?? '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 }}\">●</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>{{ depthLabel() }} {{ node.depth }}</span>\n      <span>{{ childrenLabel() }} {{ node.outgoingCount }}</span>\n      <span>{{ dependsOnLabel() }} {{ node.incomingCount }}</span>\n    </div>\n    @if (selectedDependsOn().length) {\n      <div class=\"dep-viewer__detail-deps\">\n        <strong>{{ dependenciesLabel() }}</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              → {{ 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;overflow:visible}.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
+			}]
+		}],
+		zoomInLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "zoomInLabel",
+				required: false
+			}]
+		}],
+		zoomOutLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "zoomOutLabel",
+				required: false
+			}]
+		}],
+		resetZoomLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resetZoomLabel",
+				required: false
+			}]
+		}],
+		depthLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "depthLabel",
+				required: false
+			}]
+		}],
+		childrenLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "childrenLabel",
+				required: false
+			}]
+		}],
+		dependsOnLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dependsOnLabel",
+				required: false
+			}]
+		}],
+		dependenciesLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dependenciesLabel",
+				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: [{
+			type: HostListener,
+			args: ["document:mouseup"]
+		}]
+	}
+});
+export { DependencyViewerComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-dependency-viewer.mjs.map