@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/diagrams/ArchitectureDiagram.js

@@ -0,0 +1,331 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { ArchitectureCanvas } from "./ArchitectureCanvas.js";
+import { ArchitectureDetail, ArchitectureDirection, ArchitectureKind, ArchitectureLevel, ArchitectureRouting } from "./architectureEnums.js";
+import { ArchitectureLayout } from "./ArchitectureLayout.js";
+import { ArchitectureLinkLabels } from "./ArchitectureLinkLabels.js";
+import { ArchitectureModel } from "./ArchitectureModel.js";
+import { ArchitectureFlow, ArchitectureRouter } from "./ArchitectureRouter.js";
+import { ArchitectureSamples } from "./ArchitectureSamples.js";
+import { ArchitectureShapes } from "./ArchitectureShapes.js";
+import { ArchitectureText } from "./ArchitectureText.js";
+// src/charts/diagrams/ArchitectureDiagram.ts
+var HEADER = 24;
+var HEAD = 20;
+var LID = 8;
+var BOX = 164;
+var NAME = 12;
+var SMALL = 10;
+var LEADING = 1.25;
+var PAD = 8;
+var BOUNDARY_TEXT = 11;
+var LINK_TEXT = 10;
+var WIDEST_LINK = 118;
+/** On-screen pixels below which small text is dropped, and the least a remaining name or link label is enlarged to. */
+var SMALLEST = 6.5;
+var LEGIBLE = 8;
+var ROUND_LABEL = 9;
+var LEGEND = [
+	[[ArchitectureKind.Person], "Person"],
+	[[ArchitectureKind.System], "Software system"],
+	[[ArchitectureKind.Container, ArchitectureKind.Database], "Container"],
+	[[ArchitectureKind.Component], "Component"]
+];
+var TYPE = {
+	[ArchitectureKind.Person]: "Person",
+	[ArchitectureKind.System]: "Software System",
+	[ArchitectureKind.Container]: "Container",
+	[ArchitectureKind.Database]: "Container",
+	[ArchitectureKind.Component]: "Component",
+	[ArchitectureKind.Boundary]: "Boundary"
+};
+/**
+* C4 architecture diagram (Simon Brown's C4 model; shapes after C4-PlantUML): people, software
+* systems, containers and components as labelled boxes, with one data set zooming through the
+* context, container and component levels. Use it to explain how a system is put together. Layout
+* comes from the nodes, their `parent` column and the links, with arrows routed around boxes.
+*/
+var ArchitectureDiagram = class extends ArchitectureCanvas {
+	static meta = {
+		id: "architecture-diagram",
+		name: "C4 architecture diagram",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Shows software as C4 people, systems, containers and components in nested boundaries, at the context, container or component level.",
+		tags: [
+			"c4",
+			"architecture",
+			"software",
+			"boundary",
+			"container"
+		],
+		sample: (seed) => ArchitectureSamples.parcelTracking(seed),
+		variants: {
+			level: [
+				ArchitectureLevel.Containers,
+				ArchitectureLevel.Context,
+				ArchitectureLevel.Components
+			],
+			direction: [ArchitectureDirection.TopDown, ArchitectureDirection.LeftRight],
+			routing: [ArchitectureRouting.Orthogonal, ArchitectureRouting.Direct],
+			detail: [ArchitectureDetail.Full, ArchitectureDetail.Names]
+		}
+	};
+	defaults() {
+		return {
+			level: ArchitectureLevel.Containers,
+			direction: ArchitectureDirection.TopDown,
+			routing: ArchitectureRouting.Orthogonal,
+			detail: ArchitectureDetail.Full,
+			kind: "kind",
+			parent: "parent",
+			name: "name",
+			technology: "technology",
+			description: "description",
+			external: "external",
+			linkLabel: "label",
+			linkTechnology: "technology"
+		};
+	}
+	get linkFields() {
+		return [this.options.linkLabel, this.options.linkTechnology];
+	}
+	legendItems() {
+		return this.#external ? [...this.palette.items(), {
+			key: "External",
+			color: this.theme.axis
+		}] : this.palette.items();
+	}
+	#external = false;
+	#type(item) {
+		const technology = this.#column(item, this.options.technology), base = TYPE[item.kind];
+		return `[${technology ? `${base}: ${technology}` : base}]`;
+	}
+	#column(item, column) {
+		return String(item.node[column] ?? "").trim();
+	}
+	#full() {
+		return this.options.detail === ArchitectureDetail.Full;
+	}
+	#measure = (item) => {
+		const full = this.#full();
+		const width = full ? BOX : Math.min(BOX, Math.max(104, ArchitectureText.width(item.name, NAME * 1.05) + 16, ArchitectureText.width(this.#type(item), SMALL) + 16));
+		const room = width - 16;
+		const name = full ? ArchitectureText.wrap(item.name, room, NAME * 1.05, 2).length : 2;
+		const about = full ? ArchitectureText.wrap(this.#column(item, this.options.description), room, SMALL, 2).length : 0;
+		const text = name * NAME * LEADING + SMALL * LEADING + (about ? about * SMALL * LEADING + 4 : 0);
+		const extra = item.kind === ArchitectureKind.Person ? HEAD : item.kind === ArchitectureKind.Database ? 16 : 0;
+		return {
+			width: Math.ceil(width),
+			height: Math.round(text + 16 + extra)
+		};
+	};
+	/** The path of an element, plus the lid line a cylinder needs on top of its fill. */
+	#shape(view) {
+		const { item, rect } = view;
+		if (item.kind === ArchitectureKind.Person) return {
+			body: ArchitectureShapes.person(rect, HEAD),
+			lid: ""
+		};
+		if (item.kind === ArchitectureKind.Database) return ArchitectureShapes.cylinder(rect, LID);
+		return {
+			body: ArchitectureShapes.box(rect),
+			lid: ""
+		};
+	}
+	#fill(ctx, item) {
+		if (item.external) return ctx.theme.axis;
+		return ctx.palette.color(LEGEND.find(([kinds]) => kinds.includes(item.kind))?.[1] ?? "Container");
+	}
+	/** The space a box's text may use, under a person's head or a cylinder's lid. */
+	#textSpan({ item, rect }) {
+		return {
+			top: rect.y + PAD + (item.kind === ArchitectureKind.Person ? HEAD : item.kind === ArchitectureKind.Database ? 16 : 0),
+			bottom: rect.y + rect.height - PAD
+		};
+	}
+	/** The biggest size, up to `target`, at which this box holds its whole name. */
+	#largestName(view, target) {
+		const { top, bottom } = this.#textSpan(view), room = view.rect.width - 16;
+		for (let size = Math.min(24, target); size > NAME; size -= .5) {
+			const rows = ArchitectureText.wrap(view.item.name, room, size * 1.05, 2);
+			if (rows.length * size * LEADING <= bottom - top && !rows.at(-1).endsWith("…")) return size;
+		}
+		return NAME;
+	}
+	/** Text of one closed box. Every name takes the same `size`; below that scale the smaller lines are dropped. */
+	#lines(ctx, view, ratio, size) {
+		const { item, rect } = view;
+		const ink = ctx.palette.inkOn(this.#fill(ctx, item));
+		const { top, bottom } = this.#textSpan(view), room = rect.width - 16;
+		const fine = SMALL * ratio >= SMALLEST;
+		const rows = ArchitectureText.wrap(item.name, room, size * 1.05, Math.max(1, Math.min(2, Math.floor((bottom - top) / (size * LEADING)))));
+		const lines = [];
+		let y = top;
+		const put = (text, tall, weight) => {
+			if (!text || y + tall * LEADING > bottom + 1) return;
+			y += tall * LEADING;
+			lines.push({
+				key: `${item.id}:${lines.length}`,
+				text,
+				x: rect.x + rect.width / 2,
+				y: y - tall * .28,
+				size: tall,
+				weight,
+				fill: ink
+			});
+		};
+		for (const line of rows) put(line, size, 600);
+		if (fine) {
+			put(ArchitectureText.fit(this.#type(item), room, SMALL), SMALL, 400);
+			if (this.#full()) {
+				y += 4;
+				for (const line of ArchitectureText.wrap(this.#column(item, this.options.description), room, SMALL, 2)) put(line, SMALL, 400);
+			}
+		}
+		const slack = (bottom - y) / 2;
+		return lines.map((line) => ({
+			...line,
+			y: line.y + slack
+		}));
+	}
+	#boundaryTitle(item, rect, ratio) {
+		const size = Math.min(BOUNDARY_TEXT * 1.4, Math.max(BOUNDARY_TEXT, LEGIBLE / ratio));
+		return {
+			text: ArchitectureText.fit(`${item.name} ${this.#type(item)}`, rect.width - 18, size),
+			size
+		};
+	}
+	#requests(model, rects, titles) {
+		return model.relations.map(({ source, target }) => {
+			const free = /* @__PURE__ */ new Set([...ArchitectureModel.lineage(source), ...ArchitectureModel.lineage(target)]);
+			const closed = model.items.filter((item) => !free.has(item)).map((item) => rects.get(item));
+			return {
+				from: rects.get(source),
+				to: rects.get(target),
+				blocks: [...closed, ...titles]
+			};
+		});
+	}
+	#link(relation, route) {
+		const { linkLabel, linkTechnology } = this.options;
+		const rows = relation.links.map((link) => {
+			const technology = String(link[linkTechnology] ?? "");
+			return [String(link[linkLabel] ?? "Link"), technology ? `[${technology}]` : ""];
+		});
+		return {
+			key: relation.key,
+			links: relation.links,
+			route,
+			arrow: true,
+			tip: {
+				title: `${relation.source.name} → ${relation.target.name}`,
+				rows
+			}
+		};
+	}
+	#linkLines({ links }, size) {
+		const label = String(links[0][this.options.linkLabel] ?? ""), technology = String(links[0][this.options.linkTechnology] ?? "");
+		if (!label) return [];
+		const more = links.length > 1 ? ` +${links.length - 1}` : "", room = WIDEST_LINK * size / LINK_TEXT;
+		return [...ArchitectureText.wrap(`${label}${more}`, room, size, 2), ...technology ? [ArchitectureText.fit(`[${technology}]`, room, size)] : []];
+	}
+	draw(ctx) {
+		const { level, direction, routing } = this.options;
+		const horizontal = direction === ArchitectureDirection.LeftRight;
+		const model = new ArchitectureModel(this.options.data, {
+			kind: this.options.kind,
+			parent: this.options.parent,
+			name: this.options.name,
+			external: this.options.external,
+			linkLabel: this.options.linkLabel,
+			linkTechnology: this.options.linkTechnology
+		}, level);
+		for (const [kinds, label] of LEGEND) if (model.items.some((item) => !item.open && !item.external && kinds.includes(item.kind))) ctx.palette.color(label);
+		this.#external = model.items.some((item) => !item.open && item.external);
+		const plan = ArchitectureLayout.place(model, {
+			horizontal,
+			measure: this.#measure,
+			header: HEADER
+		});
+		const titles = model.items.filter((item) => item.open).map((item) => {
+			const rect = plan.rects.get(item);
+			return {
+				x: rect.x + 2,
+				y: rect.y + 2,
+				width: Math.min(rect.width - 4, Math.ceil(ArchitectureText.width(`${item.name} ${this.#type(item)}`, BOUNDARY_TEXT * 1.4)) + ROUND_LABEL),
+				height: 20
+			};
+		});
+		const routes = ArchitectureRouter.route(this.#requests(model, plan.rects, titles), {
+			rects: [...plan.rects.values(), ...titles],
+			flow: horizontal ? ArchitectureFlow.Right : ArchitectureFlow.Down,
+			direct: routing === ArchitectureRouting.Direct,
+			skirt: model.items.filter((item) => item.open).map((item) => plan.rects.get(item))
+		});
+		const views = model.items.map((item) => ({
+			item,
+			rect: plan.rects.get(item)
+		}));
+		const links = model.relations.map((relation, i) => this.#link(relation, routes[i]));
+		const corners = [...views.map(({ rect }) => rect), ...routes.flat().map((at) => ({
+			...at,
+			width: 0,
+			height: 0
+		}))];
+		const box = {
+			x: Math.min(0, ...corners.map((at) => at.x)),
+			y: Math.min(0, ...corners.map((at) => at.y)),
+			right: Math.max(1, ...corners.map((at) => at.x + at.width)),
+			bottom: Math.max(1, ...corners.map((at) => at.y + at.height))
+		};
+		const width = box.right - box.x, height = box.bottom - box.y;
+		const ratio = Math.min(1, ctx.plot.width / width, ctx.plot.height / height);
+		const stage = ctx.nest(`translate(${(ctx.plot.width - width * ratio) / 2 - box.x * ratio},${(ctx.plot.height - height * ratio) / 2 - box.y * ratio}) scale(${ratio})`, "architecture");
+		const open = views.filter((view) => view.item.open), closed = views.filter((view) => !view.item.open);
+		const frames = stage.marks("boundaries", "path", open, (d) => d.item.id).attr("fill", "none").attr("stroke", ctx.theme.inkMuted).attr("stroke-width", 1.5 / ratio).attr("stroke-dasharray", "7 5");
+		stage.set(frames, { d: (d) => ArchitectureShapes.box(d.rect, 8) });
+		stage.hover(frames, (d) => ({
+			title: d.item.name,
+			rows: [["Type", TYPE[d.item.kind]], ["Holds", d.item.children.length]]
+		}));
+		this.drawLinks(stage, links, ratio);
+		const boxes = stage.marks("elements", "path", closed, (d) => d.item.id).attr("fill", (d) => this.#fill(ctx, d.item));
+		stage.set(boxes, { d: (d) => this.#shape(d).body });
+		stage.hover(boxes, (d) => ({
+			title: d.item.name,
+			color: this.#fill(ctx, d.item),
+			rows: [["Type", this.#type(d.item).slice(1, -1)], ...this.#column(d.item, this.options.description) ? [["About", this.#column(d.item, this.options.description)]] : []]
+		}));
+		const lids = stage.marks("lids", "path", closed.filter((view) => view.item.kind === ArchitectureKind.Database), (d) => d.item.id).attr("fill", "none").attr("stroke", ctx.theme.surface).attr("stroke-width", 2 / ratio).style("pointer-events", "none");
+		stage.set(lids, { d: (d) => this.#shape(d).lid });
+		const nameSize = SMALL * ratio >= SMALLEST ? NAME : Math.min(...closed.map((view) => this.#largestName(view, LEGIBLE / ratio)));
+		const words = stage.marks("words", "text", closed.flatMap((view) => this.#lines(ctx, view, ratio, nameSize)), (d) => d.key).attr("text-anchor", "middle").attr("font-size", (d) => d.size).attr("font-weight", (d) => d.weight).attr("fill", (d) => d.fill).style("pointer-events", "none").text((d) => d.text);
+		stage.set(words, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const headings = open.map(({ item, rect }) => ({
+			item,
+			rect,
+			...this.#boundaryTitle(item, rect, ratio)
+		}));
+		const heads = stage.marks("boundary-titles", "text", headings, (d) => d.item.id).attr("font-size", (d) => d.size).attr("fill", ctx.theme.inkSecondary).style("pointer-events", "none").text((d) => d.text);
+		stage.set(heads, {
+			x: (d) => d.rect.x + ROUND_LABEL,
+			y: (d) => d.rect.y + 17
+		});
+		const size = Math.max(LINK_TEXT, SMALLEST / ratio);
+		const placed = ArchitectureLinkLabels.place(model.relations.map((relation, i) => ({
+			lines: this.#linkLines(relation, size),
+			route: routes[i]
+		})), [...closed.map((view) => view.rect), ...titles], size, {
+			x: box.x,
+			y: box.y,
+			width,
+			height
+		});
+		this.drawLinkLabels(stage, links, placed, size);
+	}
+};
+export { ArchitectureDiagram };

package/dist/charts/diagrams/ArchitectureLayout.js

@@ -0,0 +1,106 @@
+import { UmlLayout } from "../structure/UmlLayout.js";
+import { ArchitectureModel } from "./ArchitectureModel.js";
+// src/charts/diagrams/ArchitectureLayout.ts
+var INSET = 18;
+var ROOM_ACROSS = 36;
+var ROOM_DOWN = 24;
+var ROOM_RIGHT = 54;
+/**
+* Compound layered layout: every boundary is laid out by itself, inner scope first, and then acts
+* as one box in the scope around it, as in ELK Layered with separate children. A link between
+* scopes counts in their lowest common scope, between the two children that hold its ends.
+*/
+var ArchitectureLayout = class ArchitectureLayout {
+	#model;
+	#options;
+	#rects = /* @__PURE__ */ new Map();
+	static place(model, options) {
+		return new ArchitectureLayout(model, options).#plan();
+	}
+	constructor(model, options) {
+		this.#model = model;
+		this.#options = options;
+	}
+	#plan() {
+		const { width, height } = this.#scope(null, this.#model.items.filter((item) => !item.parent), 0, 0);
+		return {
+			rects: this.#rects,
+			width,
+			height
+		};
+	}
+	/** Lays `items` out from (0,0), leaving each child's subtree in local coordinates to be moved by `#shift`. */
+	#scope(owner, items, x, y) {
+		const { horizontal } = this.#options;
+		const sizes = new Map(items.map((item) => [item, item.open ? this.#open(item) : this.#options.measure(item)]));
+		const boxes = items.map((item) => {
+			const size = sizes.get(item);
+			return {
+				id: item.id,
+				width: size.width + (horizontal ? 0 : ROOM_ACROSS),
+				height: size.height + (horizontal ? ROOM_ACROSS : 0)
+			};
+		});
+		const plan = UmlLayout.place(boxes, this.#edges(owner, items), {
+			horizontal,
+			orthogonal: true,
+			clearance: horizontal ? ROOM_RIGHT : ROOM_DOWN
+		});
+		const byId = new Map(items.map((item) => [item.id, item]));
+		for (const box of plan.boxes) {
+			const item = byId.get(box.id), size = sizes.get(item);
+			const left = Math.round(x + box.x + (box.width - size.width) / 2), top = Math.round(y + box.y + (box.height - size.height) / 2);
+			this.#shift(item, left, top, size);
+		}
+		return {
+			width: plan.width,
+			height: plan.height
+		};
+	}
+	#open(item) {
+		const shown = new Set(this.#model.items);
+		const inner = this.#scope(item, item.children.filter((child) => shown.has(child)), INSET, this.#options.header + INSET / 2);
+		return {
+			width: Math.max(inner.width + 36, 150),
+			height: inner.height + this.#options.header + INSET * 1.5
+		};
+	}
+	/** Children were placed relative to their boundary, so they move with it. */
+	#shift(item, left, top, size) {
+		this.#rects.set(item, {
+			x: left,
+			y: top,
+			width: Math.round(size.width),
+			height: Math.round(size.height)
+		});
+		const move = (parent) => {
+			for (const child of parent.children) {
+				const rect = this.#rects.get(child);
+				if (!rect) continue;
+				rect.x += left;
+				rect.y += top;
+				move(child);
+			}
+		};
+		move(item);
+	}
+	#edges(owner, items) {
+		const members = new Set(items), seen = /* @__PURE__ */ new Set(), edges = [];
+		const inScope = (item) => [...ArchitectureModel.lineage(item)].find((at) => members.has(at));
+		for (const { source, target } of this.#model.relations) {
+			const upper = inScope(source), lower = inScope(target);
+			if (!upper || !lower || upper === lower || upper.parent !== owner) continue;
+			const pair = `${upper.id}>${lower.id}`;
+			if (seen.has(pair)) continue;
+			seen.add(pair);
+			edges.push({
+				upper: upper.id,
+				lower: lower.id,
+				priority: 0,
+				trunk: null
+			});
+		}
+		return edges;
+	}
+};
+export { ArchitectureLayout };

package/dist/charts/diagrams/ArchitectureLinkLabels.js

@@ -0,0 +1,78 @@
+import { ArchitectureText } from "./ArchitectureText.js";
+// src/charts/diagrams/ArchitectureLinkLabels.ts
+var LINE = 12;
+/** A label beside an upright line leaves the line showing. */
+var GAP = 3;
+var FRACTIONS = [
+	.5,
+	.32,
+	.68,
+	.18,
+	.82
+];
+var overlap = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+var crossed = (a, b, rect) => {
+	const steps = Math.ceil(Math.hypot(b.x - a.x, b.y - a.y) / 6);
+	for (let i = 0; i <= steps; i++) {
+		const x = a.x + (b.x - a.x) * i / steps, y = a.y + (b.y - a.y) * i / steps;
+		if (x > rect.x && x < rect.x + rect.width && y > rect.y && y < rect.y + rect.height) return true;
+	}
+	return false;
+};
+/** Puts each label on its own line, at the first spot that hits no box, label or other line. Labels with no such spot are dropped, not stacked. */
+var ArchitectureLinkLabels = class ArchitectureLinkLabels {
+	static place(requests, obstacles, size, bounds) {
+		const placed = [];
+		const order = requests.map((_, i) => i).sort((a, b) => ArchitectureLinkLabels.#length(requests[b].route) - ArchitectureLinkLabels.#length(requests[a].route));
+		for (const index of [...order].reverse()) {
+			const { lines } = requests[index];
+			if (!lines.length) continue;
+			for (const shown of lines.length > 1 ? [lines, lines.slice(0, 1)] : [lines]) {
+				const rect = ArchitectureLinkLabels.#spot(requests, index, shown, obstacles, placed, size, bounds);
+				if (rect) {
+					placed.push({
+						index,
+						lines: shown,
+						rect
+					});
+					break;
+				}
+			}
+		}
+		return placed;
+	}
+	static #length(route) {
+		return route.slice(1).reduce((sum, at, i) => sum + Math.hypot(at.x - route[i].x, at.y - route[i].y), 0);
+	}
+	static #spot(requests, index, lines, obstacles, placed, size, bounds) {
+		const route = requests[index].route;
+		const width = Math.max(...lines.map((line) => ArchitectureText.width(line, size))) + 6;
+		const height = lines.length * LINE * size / 10 + 6;
+		const segments = route.slice(1).map((end, i) => ({
+			start: route[i],
+			end
+		})).sort((a, b) => Math.hypot(b.end.x - b.start.x, b.end.y - b.start.y) - Math.hypot(a.end.x - a.start.x, a.end.y - a.start.y));
+		for (const { start, end } of segments) {
+			const upright = Math.abs(end.x - start.x) < 1;
+			for (const t of FRACTIONS) {
+				const x = start.x + (end.x - start.x) * t, y = start.y + (end.y - start.y) * t - height / 2;
+				for (const left of upright ? [x + GAP, x - GAP - width] : [x - width / 2]) {
+					const rect = {
+						x: left,
+						y,
+						width,
+						height
+					};
+					if (ArchitectureLinkLabels.#clear(rect, requests, index, obstacles, placed, bounds)) return rect;
+				}
+			}
+		}
+		return null;
+	}
+	static #clear(rect, requests, index, obstacles, placed, bounds) {
+		if (rect.x < bounds.x || rect.y < bounds.y || rect.x + rect.width > bounds.x + bounds.width || rect.y + rect.height > bounds.y + bounds.height) return false;
+		if (obstacles.some((box) => overlap(rect, box)) || placed.some((label) => overlap(rect, label.rect))) return false;
+		return !requests.some((other, i) => i !== index && other.route.slice(1).some((at, k) => crossed(other.route[k], at, rect)));
+	}
+};
+export { ArchitectureLinkLabels };

package/dist/charts/diagrams/ArchitectureModel.js

@@ -0,0 +1,108 @@
+import { ArchitectureKind, ArchitectureLevel } from "./architectureEnums.js";
+// src/charts/diagrams/ArchitectureModel.ts
+var DEPTH = {
+	[ArchitectureKind.Person]: 0,
+	[ArchitectureKind.System]: 0,
+	[ArchitectureKind.Boundary]: 0,
+	[ArchitectureKind.Container]: 1,
+	[ArchitectureKind.Database]: 1,
+	[ArchitectureKind.Component]: 2
+};
+var ZOOM = {
+	[ArchitectureLevel.Context]: 0,
+	[ArchitectureLevel.Containers]: 1,
+	[ArchitectureLevel.Components]: 2
+};
+var KINDS = new Set(Object.values(ArchitectureKind));
+var truthy = (value) => value === true || value === 1 || typeof value === "string" && /^(true|yes|1)$/i.test(value);
+var key = (value) => value === null || value === void 0 || value === "" ? null : String(value);
+/**
+* The element tree of a C4 model and what one zoom level shows of it. An opened element becomes a
+* boundary, a hidden element's links rise to its nearest visible ancestor, and duplicates merge:
+* Structurizr's implied relationships.
+*/
+var ArchitectureModel = class {
+	roots = [];
+	/** Everything drawn, parents before children. */
+	items = [];
+	relations = [];
+	#all = /* @__PURE__ */ new Map();
+	constructor(data, fields, level) {
+		this.#read(data?.nodes ?? [], fields);
+		this.#show(level);
+		this.#relate(data?.links ?? []);
+	}
+	#read(nodes, fields) {
+		for (const node of Array.isArray(nodes) ? nodes : []) {
+			const id = key(node?.id);
+			if (id === null || this.#all.has(id)) continue;
+			const raw = String(node[fields.kind] ?? "").trim().toLowerCase().replace(/^software\s*/, "");
+			this.#all.set(id, {
+				id,
+				node,
+				kind: KINDS.has(raw) ? raw : ArchitectureKind.Container,
+				name: key(node[fields.name]) ?? id,
+				external: truthy(node[fields.external]),
+				parent: null,
+				children: [],
+				open: false
+			});
+		}
+		for (const item of this.#all.values()) {
+			const above = this.#all.get(key(item.node[fields.parent]) ?? "");
+			if (!above || this.#above(above, item)) this.roots.push(item);
+			else {
+				item.parent = above;
+				above.children.push(item);
+			}
+		}
+	}
+	/** True when `a` is `b` or contains it. A parent column that loops stops at the first repeat. */
+	#above(a, b) {
+		const seen = /* @__PURE__ */ new Set();
+		for (let at = a; at && !seen.has(at); at = at.parent) {
+			if (at === b) return true;
+			seen.add(at);
+		}
+		return false;
+	}
+	#show(level) {
+		const zoom = ZOOM[level];
+		const shown = (item) => DEPTH[item.kind] <= zoom;
+		const visit = (item) => {
+			this.items.push(item);
+			item.open = (item.kind === ArchitectureKind.Boundary || !item.external) && item.children.some(shown);
+			if (item.open) item.children.filter(shown).forEach(visit);
+		};
+		this.roots.forEach(visit);
+	}
+	#visible(id) {
+		const shown = new Set(this.items);
+		for (let at = this.#all.get(id ?? "") ?? null; at; at = at.parent) if (shown.has(at)) return at;
+		return null;
+	}
+	#relate(links) {
+		const merged = /* @__PURE__ */ new Map();
+		for (const link of Array.isArray(links) ? links : []) {
+			const source = this.#visible(key(link?.source)), target = this.#visible(key(link?.target));
+			if (!source || !target || this.#above(source, target) || this.#above(target, source)) continue;
+			const id = `${source.id}\0${target.id}`;
+			const relation = merged.get(id);
+			if (relation) relation.links.push(link);
+			else merged.set(id, {
+				key: id,
+				source,
+				target,
+				links: [link]
+			});
+		}
+		this.relations.push(...merged.values());
+	}
+	/** The item and all that contain it. */
+	static lineage(item) {
+		const line = /* @__PURE__ */ new Set();
+		for (let at = item; at; at = at.parent) line.add(at);
+		return line;
+	}
+};
+export { ArchitectureModel };