@mstone6969/graph 0.0.0-stage → 0.2.0

package/dist/charts/diagrams/LogicGateDiagram.js

@@ -0,0 +1,216 @@
+import { Chart2D } from "../../core/Chart2D.js";
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { LogicCircuit } from "./LogicCircuit.js";
+import { LogicCircuitLayout } from "./LogicCircuitLayout.js";
+import { LogicCircuitSamples } from "./LogicCircuitSamples.js";
+import { LogicGateKind, LogicLayering, LogicState, LogicStateLabels, LogicSymbolStyle } from "./logicEnums.js";
+// src/charts/diagrams/LogicGateDiagram.ts
+var WORD = {
+	[LogicState.True]: "true",
+	[LogicState.False]: "false",
+	[LogicState.Unknown]: "unknown"
+};
+var NET_LABEL_SCALE = .55;
+var CHIP_TEXT = 12;
+var KIND_NAME = {
+	[LogicGateKind.Input]: "Input",
+	[LogicGateKind.Output]: "Output",
+	[LogicGateKind.And]: "AND",
+	[LogicGateKind.Or]: "OR",
+	[LogicGateKind.Not]: "NOT",
+	[LogicGateKind.Nand]: "NAND",
+	[LogicGateKind.Nor]: "NOR",
+	[LogicGateKind.Xor]: "XOR",
+	[LogicGateKind.Xnor]: "XNOR",
+	[LogicGateKind.Buffer]: "Buffer",
+	[LogicGateKind.Unknown]: "Unknown"
+};
+/**
+* Show a digital circuit's structure and the logic value on every wire. Gates use ANSI/IEEE Std 91
+* distinctive shapes (or IEC 60617 rectangles), laid out left to right by `LogicCircuitLayout`, and
+* values come from ternary simulation in `LogicCircuit`. Status colour shows state on each wire,
+* always with 1, 0 or X as text beside it.
+*/
+var LogicGateDiagram = class LogicGateDiagram extends Chart2D {
+	static meta = {
+		id: "logic-gate-diagram",
+		name: "Logic gate diagram",
+		family: ChartFamily.Scientific,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Draws a digital circuit from its gates and wires, simulates it from the input values, and marks each wire true, false or unknown.",
+		tags: [
+			"logic",
+			"circuit",
+			"digital",
+			"gates",
+			"boolean",
+			"schematic",
+			"ansi"
+		],
+		sample: (seed) => LogicCircuitSamples.everyGate(seed),
+		variants: {
+			symbols: [LogicSymbolStyle.Ansi, LogicSymbolStyle.Iec],
+			layering: [LogicLayering.Inputs, LogicLayering.Outputs],
+			stateLabels: [LogicStateLabels.Nets, LogicStateLabels.Terminals]
+		}
+	};
+	#present = /* @__PURE__ */ new Set();
+	defaults() {
+		return {
+			symbols: LogicSymbolStyle.Ansi,
+			layering: LogicLayering.Inputs,
+			stateLabels: LogicStateLabels.Nets
+		};
+	}
+	plotMargin() {
+		return {
+			top: 8,
+			right: 12,
+			bottom: 8,
+			left: 12
+		};
+	}
+	/** The evaluated circuit, with `issues` listing any rows it had to set aside. */
+	circuit() {
+		return new LogicCircuit(this.options.data, this.options.fields);
+	}
+	table() {
+		return {
+			columns: [
+				"id",
+				"type",
+				"label",
+				"inputs",
+				"state"
+			],
+			rows: [...this.circuit().nodes.values()].map((node) => [
+				node.id,
+				node.kind,
+				node.label,
+				node.inputs.map((id) => id ?? "floating").join(" "),
+				WORD[node.state]
+			])
+		};
+	}
+	legendItems() {
+		const { good, critical, inkMuted } = this.theme;
+		const items = [{
+			key: "true",
+			label: "1 true",
+			color: good
+		}, {
+			key: "false",
+			label: "0 false",
+			color: critical
+		}];
+		return this.#present.has(LogicState.Unknown) ? [...items, {
+			key: "unknown",
+			label: "X unknown",
+			color: inkMuted
+		}] : items;
+	}
+	#color(ctx, state) {
+		return state === LogicState.True ? ctx.theme.good : state === LogicState.False ? ctx.theme.critical : ctx.theme.inkMuted;
+	}
+	static #nodeTip(node, color) {
+		const rows = [["Type", KIND_NAME[node.kind]], ["State", `${node.state} (${WORD[node.state]})`]];
+		if (node.inputs.length) rows.push(["Inputs", node.inputs.map((id) => id ?? "floating").join(", ")]);
+		return {
+			title: node.label,
+			rows,
+			color
+		};
+	}
+	draw(ctx) {
+		const { symbols, layering, stateLabels } = this.options;
+		const circuit = this.circuit();
+		const layout = new LogicCircuitLayout(circuit, ctx.plot, symbols, layering);
+		this.#present = new Set([...circuit.nodes.values()].map((node) => node.state));
+		if (layout.nets.some((net) => net.state === LogicState.Unknown)) this.#present.add(LogicState.Unknown);
+		const { x, y, scale } = layout.view;
+		const stage = ctx.nest(`translate(${x},${y}) scale(${scale})`, "circuit");
+		this.#drawNets(stage, layout);
+		this.#drawGates(stage, layout);
+		this.#drawTerminals(stage, layout);
+		this.#drawStateMarks(stage, stateLabels === LogicStateLabels.Nets && layout.scale >= NET_LABEL_SCALE ? layout.stateMarks : []);
+	}
+	#drawNets(ctx, layout) {
+		const nets = ctx.marks("nets", "path", layout.nets, (net) => net.id).attr("fill", "none").attr("stroke", (net) => this.#color(ctx, net.state)).attr("stroke-width", 2).attr("stroke-linecap", "round").attr("stroke-dasharray", (net) => net.state === LogicState.Unknown ? "5 4" : null);
+		ctx.set(nets, {
+			d: (net) => net.path,
+			opacity: 1
+		}, {
+			d: (net) => net.path,
+			opacity: 0
+		}, 8);
+		ctx.hover(nets, (net) => ({
+			title: net.driver?.label ?? "Floating pin",
+			rows: [["State", `${net.state} (${WORD[net.state]})`], ["Fan-out", net.fanout]],
+			color: this.#color(ctx, net.state)
+		}));
+		const dots = ctx.marks("junctions", "circle", layout.junctions, (dot) => dot.key).attr("fill", (dot) => this.#color(ctx, dot.state));
+		ctx.set(dots, {
+			cx: (dot) => dot.x,
+			cy: (dot) => dot.y,
+			r: 4
+		}, { r: 0 }, 8);
+	}
+	#drawGates(ctx, layout) {
+		const { ink, surface } = ctx.theme;
+		const gates = ctx.marks("gates", "path", layout.gates, (gate) => gate.node.id).attr("fill", surface).attr("stroke", ink).attr("stroke-width", 2).attr("stroke-linejoin", "round");
+		ctx.set(gates, {
+			d: (gate) => gate.shape.body,
+			transform: (gate) => `translate(${gate.x},${gate.y})`,
+			opacity: 1
+		}, {
+			d: (gate) => gate.shape.body,
+			opacity: 0
+		}, 12);
+		ctx.hover(gates, (gate) => LogicGateDiagram.#nodeTip(gate.node, this.#color(ctx, gate.node.state)));
+		const named = layout.gates.filter((gate) => gate.shape.qualifier);
+		const qualifiers = ctx.text(ctx.marks("qualifiers", "text", named, (gate) => gate.node.id), Math.max(8, 13 * layout.scale), "ink").attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("pointer-events", "none").text((gate) => gate.shape.qualifier);
+		ctx.set(qualifiers, {
+			x: (gate) => gate.x + gate.shape.width * .44,
+			y: (gate) => gate.y
+		});
+	}
+	#drawTerminals(ctx, layout) {
+		const { surface } = ctx.theme;
+		const input = (terminal) => terminal.node.kind === LogicGateKind.Input;
+		const chips = ctx.marks("terminals", "rect", layout.terminals, (terminal) => terminal.node.id).attr("fill", (terminal) => this.#color(ctx, terminal.node.state)).attr("stroke", surface).attr("stroke-width", 2);
+		ctx.set(chips, {
+			x: (terminal) => terminal.x - terminal.size / 2,
+			y: (terminal) => terminal.y - terminal.size / 2,
+			width: (terminal) => terminal.size,
+			height: (terminal) => terminal.size,
+			rx: (terminal) => input(terminal) ? 4 : terminal.size / 2
+		});
+		ctx.hover(chips, (terminal) => LogicGateDiagram.#nodeTip(terminal.node, this.#color(ctx, terminal.node.state)));
+		const values = ctx.marks("terminal-values", "text", layout.terminals.filter((terminal) => terminal.size >= CHIP_TEXT), (terminal) => terminal.node.id).attr("font-size", 11).attr("font-weight", 600).attr("font-family", ctx.theme.fontFamily).attr("text-anchor", "middle").attr("dominant-baseline", "central").attr("pointer-events", "none").attr("fill", (terminal) => ctx.palette.inkOn(this.#color(ctx, terminal.node.state))).text((terminal) => terminal.node.state);
+		ctx.set(values, {
+			x: (terminal) => terminal.x,
+			y: (terminal) => terminal.y
+		});
+		const last = /* @__PURE__ */ new Map();
+		const shown = layout.terminals.filter((terminal) => {
+			const previous = last.get(input(terminal));
+			if (!terminal.text || previous !== void 0 && Math.abs(terminal.y - previous) < 12) return false;
+			last.set(input(terminal), terminal.y);
+			return true;
+		});
+		const labels = ctx.text(ctx.marks("terminal-labels", "text", shown, (terminal) => terminal.node.id), 11, "ink").attr("dominant-baseline", "central").attr("text-anchor", (terminal) => input(terminal) ? "end" : "start").text((terminal) => terminal.text);
+		ctx.set(labels, {
+			x: (terminal) => terminal.x + (input(terminal) ? -1 : 1) * (terminal.size / 2 + 4),
+			y: (terminal) => terminal.y
+		});
+	}
+	#drawStateMarks(ctx, marks) {
+		const texts = ctx.text(ctx.marks("state-marks", "text", marks, (mark) => mark.key), 10, "ink").attr("font-weight", 600).attr("stroke", ctx.theme.surface).attr("stroke-width", 3).attr("paint-order", "stroke").attr("pointer-events", "none").text((mark) => mark.state);
+		ctx.set(texts, {
+			x: (mark) => mark.x,
+			y: (mark) => mark.y - 4
+		});
+	}
+};
+export { LogicGateDiagram };

package/dist/charts/diagrams/LogicGateSymbol.js

@@ -0,0 +1,113 @@
+import { LogicGateKind, LogicSymbolStyle } from "./logicEnums.js";
+// src/charts/diagrams/LogicGateSymbol.ts
+var WIDTH = 48;
+var HEIGHT = 36;
+var PITCH = 12;
+var BUBBLE = 4;
+var SHIELD = 7;
+var CURVE = .42;
+var INVERTED = /* @__PURE__ */ new Set([
+	LogicGateKind.Not,
+	LogicGateKind.Nand,
+	LogicGateKind.Nor,
+	LogicGateKind.Xnor
+]);
+var OR_FAMILY = /* @__PURE__ */ new Set([
+	LogicGateKind.Or,
+	LogicGateKind.Nor,
+	LogicGateKind.Xor,
+	LogicGateKind.Xnor
+]);
+var AND_FAMILY = /* @__PURE__ */ new Set([LogicGateKind.And, LogicGateKind.Nand]);
+var SINGLE = /* @__PURE__ */ new Set([LogicGateKind.Not, LogicGateKind.Buffer]);
+var XOR_FAMILY = /* @__PURE__ */ new Set([LogicGateKind.Xor, LogicGateKind.Xnor]);
+var n = (value) => +value.toFixed(2);
+/** Gate outlines: ANSI/IEEE Std 91 distinctive shapes, or IEC 60617 rectangles, with extension lines past three inputs. */
+var LogicGateSymbol = class LogicGateSymbol {
+	static width = WIDTH;
+	static height(inputs) {
+		return Math.max(HEIGHT, (inputs - 1) * PITCH + PITCH);
+	}
+	static shape(kind, inputs, style, scale) {
+		const height = LogicGateSymbol.height(inputs) * scale;
+		const width = WIDTH * scale;
+		const bubble = BUBBLE * scale;
+		const inverted = INVERTED.has(kind);
+		const end = inverted ? width - bubble * 2 : width;
+		const half = HEIGHT / 2 * scale;
+		const ring = inverted ? ` M${n(end)},0 a${n(bubble)},${n(bubble)} 0 1,0 ${n(bubble * 2)},0 a${n(bubble)},${n(bubble)} 0 1,0 ${n(-bubble * 2)},0 Z` : "";
+		const ys = LogicGateSymbol.#pinOffsets(inputs, scale);
+		const flat = (x) => ys.map((y) => ({
+			x,
+			y
+		}));
+		if (style === LogicSymbolStyle.Iec || kind === LogicGateKind.Unknown) {
+			const top = n(-height / 2), bottom = n(height / 2);
+			return {
+				body: `M0,${top} H${n(end)} V${bottom} H0 Z${ring}`,
+				pins: flat(0),
+				width,
+				height,
+				qualifier: LogicGateSymbol.#qualifier(kind, inputs)
+			};
+		}
+		const wings = height / 2 > half + .01 ? LogicGateSymbol.#wings(height / 2, half) : "";
+		if (SINGLE.has(kind)) {
+			const start = 6 * scale, rise = n(half * .75);
+			return {
+				body: `M${n(start)},${-rise} L${n(end)},0 L${n(start)},${rise} Z${ring}`,
+				pins: flat(n(start)),
+				width,
+				height,
+				qualifier: ""
+			};
+		}
+		if (AND_FAMILY.has(kind)) {
+			const flatEnd = n(end - half);
+			return {
+				body: `M0,${n(-half)} H${flatEnd} A${n(half)},${n(half)} 0 0 1 ${flatEnd},${n(half)} H0 Z${wings}${ring}`,
+				pins: flat(0),
+				width,
+				height,
+				qualifier: ""
+			};
+		}
+		const back = XOR_FAMILY.has(kind) ? SHIELD * scale : 0;
+		const bow = half * CURVE * 2;
+		const shoulder = n(back + (end - back) * .55);
+		const body = `M${n(back)},${n(-half)} Q${n(back + bow)},0 ${n(back)},${n(half)} Q${shoulder},${n(half)} ${n(end)},0 Q${shoulder},${n(-half)} ${n(back)},${n(-half)} Z`;
+		const shield = back ? ` M0,${n(-half)} Q${n(bow)},0 0,${n(half)}` : "";
+		const pins = ys.map((y) => ({
+			x: n(LogicGateSymbol.#bowAt(y, half, bow)),
+			y
+		}));
+		return {
+			body: body + shield + wings + ring,
+			pins,
+			width,
+			height,
+			qualifier: ""
+		};
+	}
+	static #pinOffsets(inputs, scale) {
+		if (inputs === 1) return [0];
+		if (inputs === 2) return [-9 * scale, 9 * scale].map(n);
+		return Array.from({ length: inputs }, (_, i) => n((i - (inputs - 1) / 2) * PITCH * scale));
+	}
+	/** The back curve is a quadratic whose y runs linearly with t, so it can be solved directly for x. */
+	static #bowAt(y, half, bow) {
+		if (Math.abs(y) >= half) return 0;
+		const t = (y + half) / (2 * half);
+		return 2 * t * (1 - t) * bow;
+	}
+	static #wings(reach, half) {
+		return ` M0,${n(-reach)} V${n(-half)} M0,${n(half)} V${n(reach)}`;
+	}
+	static #qualifier(kind, inputs) {
+		if (AND_FAMILY.has(kind)) return "&";
+		if (XOR_FAMILY.has(kind)) return inputs > 2 ? "2k+1" : "=1";
+		if (OR_FAMILY.has(kind)) return "≥1";
+		return SINGLE.has(kind) ? "1" : "?";
+	}
+};
+export { LogicGateSymbol };

package/dist/charts/diagrams/NetworkTopologyDiagram.js

@@ -0,0 +1,247 @@
+import { ChartFamily, DataShape, Dimension } from "../../core/enums.js";
+import { ArchitectureCanvas } from "./ArchitectureCanvas.js";
+import { ArchitectureDirection, ArchitectureRouting, NetworkDeviceKind, TopologyArrangement } from "./architectureEnums.js";
+import { ArchitectureLinkLabels } from "./ArchitectureLinkLabels.js";
+import { ArchitectureFlow, ArchitectureRouter } from "./ArchitectureRouter.js";
+import { ArchitectureSamples } from "./ArchitectureSamples.js";
+import { ArchitectureShapes } from "./ArchitectureShapes.js";
+import { ArchitectureText } from "./ArchitectureText.js";
+import { TopologyLayout } from "./TopologyLayout.js";
+// src/charts/diagrams/NetworkTopologyDiagram.ts
+var TIER = {
+	[NetworkDeviceKind.Cloud]: 0,
+	[NetworkDeviceKind.Router]: 1,
+	[NetworkDeviceKind.Switch]: 2,
+	[NetworkDeviceKind.Server]: 3,
+	[NetworkDeviceKind.Database]: 3
+};
+var LEGEND = {
+	[NetworkDeviceKind.Cloud]: "Cloud",
+	[NetworkDeviceKind.Router]: "Router",
+	[NetworkDeviceKind.Switch]: "Switch",
+	[NetworkDeviceKind.Server]: "Server",
+	[NetworkDeviceKind.Database]: "Database"
+};
+var KINDS = Object.values(NetworkDeviceKind);
+var ICON = 34;
+var SMALLEST_ICON = 14;
+var WIDEST_TEXT = 96;
+var NAME = 11;
+var ADDRESS = 9.5;
+var LINE = 13;
+var LINK_TEXT = 10;
+var LANE = 26;
+var id = (value) => value === null || value === void 0 || value === "" ? null : String(value);
+/**
+* Network topology diagram: devices as their conventional icons, with labelled links, placed
+* automatically from the nodes and links alone. `Tiered` follows the hierarchical network model
+* (Cisco's core, distribution and access layers): clouds, then routers, switches, and servers with
+* databases. Unknown kinds count as servers. Use it to show how devices connect, not where they stand.
+*/
+var NetworkTopologyDiagram = class extends ArchitectureCanvas {
+	static meta = {
+		id: "network-topology-diagram",
+		name: "Network topology diagram",
+		family: ChartFamily.Network,
+		dimension: Dimension.Two,
+		shape: DataShape.Graph,
+		description: "Lays out routers, switches, servers, clouds and databases by tier, ring or force, with their links labelled.",
+		tags: [
+			"network",
+			"topology",
+			"infrastructure",
+			"router",
+			"switch"
+		],
+		sample: (seed) => ArchitectureSamples.officeNetwork(seed),
+		variants: {
+			arrangement: [
+				TopologyArrangement.Tiered,
+				TopologyArrangement.Radial,
+				TopologyArrangement.Force
+			],
+			direction: [ArchitectureDirection.TopDown, ArchitectureDirection.LeftRight],
+			routing: [ArchitectureRouting.Orthogonal, ArchitectureRouting.Direct],
+			linkLabels: [true, false]
+		},
+		/** Only tiers have a flow to turn, and rings and forces always draw straight links. */
+		valid: (values) => values.arrangement === TopologyArrangement.Tiered || values.direction === ArchitectureDirection.TopDown && values.routing === ArchitectureRouting.Direct
+	};
+	defaults() {
+		return {
+			arrangement: TopologyArrangement.Tiered,
+			direction: ArchitectureDirection.TopDown,
+			routing: ArchitectureRouting.Orthogonal,
+			linkLabels: true,
+			kind: "kind",
+			name: "name",
+			address: "address",
+			linkLabel: "label"
+		};
+	}
+	get linkFields() {
+		return [this.options.linkLabel];
+	}
+	#devices() {
+		const seen = /* @__PURE__ */ new Set(), { kind, name, address } = this.options;
+		return (this.options.data?.nodes ?? []).flatMap((node) => {
+			const key = id(node?.id);
+			if (key === null || seen.has(key)) return [];
+			seen.add(key);
+			const raw = String(node[kind] ?? "").trim().toLowerCase();
+			return [{
+				id: key,
+				node,
+				kind: KINDS.includes(raw) ? raw : NetworkDeviceKind.Server,
+				name: id(node[name]) ?? key,
+				address: id(node[address]) ?? ""
+			}];
+		});
+	}
+	#wires(devices) {
+		const index = new Map(devices.map((device, i) => [device.id, i]));
+		return (this.options.data?.links ?? []).flatMap((link, i) => {
+			const a = index.get(id(link?.source) ?? ""), b = index.get(id(link?.target) ?? "");
+			return a === void 0 || b === void 0 || a === b ? [] : [{
+				key: `${i}:${a}-${b}`,
+				link,
+				a,
+				b
+			}];
+		});
+	}
+	/** How big a device can be: one row or column of cells must fit, and links keep a lane between tiers. */
+	#fit(devices, plot, horizontal) {
+		if (this.options.arrangement !== TopologyArrangement.Tiered) {
+			const room = Math.sqrt(plot.width * plot.height / Math.max(1, devices.length));
+			return {
+				icon: Math.max(SMALLEST_ICON, Math.min(ICON * .8, room * .32)),
+				textWidth: Math.min(WIDEST_TEXT * .8, room * .9),
+				textLines: room > 90 ? 2 : 1
+			};
+		}
+		const tally = /* @__PURE__ */ new Map();
+		for (const device of devices) tally.set(TIER[device.kind], (tally.get(TIER[device.kind]) ?? 0) + 1);
+		const widest = Math.max(1, ...tally.values()), tiers = Math.max(1, tally.size);
+		const across = (horizontal ? plot.height : plot.width) / widest, along = (horizontal ? plot.width : plot.height) / tiers;
+		if (horizontal) {
+			const textLines = across >= 60 ? 2 : 1;
+			return {
+				icon: Math.max(SMALLEST_ICON, Math.min(ICON, across - textLines * LINE - 4, along * .45)),
+				textWidth: Math.min(WIDEST_TEXT, along - LANE),
+				textLines
+			};
+		}
+		const textLines = along >= 86 ? 2 : 1;
+		return {
+			icon: Math.max(SMALLEST_ICON, Math.min(ICON, across * .6, along - textLines * LINE - LANE)),
+			textWidth: Math.min(WIDEST_TEXT, across - 6),
+			textLines
+		};
+	}
+	#points(devices, wires, area, horizontal) {
+		const pairs = wires.map(({ a, b }) => [a, b]);
+		if (this.options.arrangement === TopologyArrangement.Tiered) return TopologyLayout.tiered(devices.map((device) => TIER[device.kind]), pairs, area, horizontal);
+		const degree = devices.map((_, i) => wires.filter(({ a, b }) => a === i || b === i).length);
+		const cloud = devices.findIndex((device) => device.kind === NetworkDeviceKind.Cloud);
+		const rings = TopologyLayout.radial(devices.length, pairs, cloud >= 0 ? cloud : degree.indexOf(Math.max(...degree)), area);
+		return this.options.arrangement === TopologyArrangement.Force ? TopologyLayout.force(rings, pairs, area) : rings;
+	}
+	#views(devices, points, fit, plot) {
+		return devices.map((device, i) => {
+			const lines = [ArchitectureText.fit(device.name, fit.textWidth, NAME), fit.textLines > 1 ? ArchitectureText.fit(device.address, fit.textWidth, ADDRESS) : ""].filter(Boolean);
+			const width = Math.round(Math.max(fit.icon * 1.25, ...lines.map((line, l) => ArchitectureText.width(line, l ? ADDRESS : NAME)))), height = Math.round(fit.icon + lines.length * LINE + 2);
+			const x = Math.round(Math.max(0, Math.min(plot.width - width, points[i].x - width / 2))), y = Math.round(Math.max(0, Math.min(plot.height - height, points[i].y - height / 2)));
+			return {
+				...device,
+				icon: fit.icon,
+				lines,
+				rect: {
+					x,
+					y,
+					width,
+					height
+				},
+				centre: {
+					x: x + width / 2,
+					y: y + fit.icon / 2
+				}
+			};
+		});
+	}
+	draw(ctx) {
+		const { arrangement, direction, routing, linkLabels, linkLabel } = this.options;
+		const tiered = arrangement === TopologyArrangement.Tiered;
+		const horizontal = tiered && direction === ArchitectureDirection.LeftRight;
+		const devices = this.#devices(), wires = this.#wires(devices), { plot } = ctx;
+		const fit = this.#fit(devices, plot, horizontal);
+		const cell = {
+			width: Math.max(fit.icon * 1.25, Math.min(fit.textWidth, WIDEST_TEXT * .7)),
+			height: fit.icon + fit.textLines * LINE + 2
+		};
+		const views = devices.length ? this.#views(devices, this.#points(devices, wires, {
+			width: plot.width,
+			height: plot.height,
+			cell
+		}, horizontal), fit, plot) : [];
+		for (const kind of KINDS) if (views.some((view) => view.kind === kind)) ctx.palette.color(LEGEND[kind]);
+		const rects = views.map((view) => view.rect);
+		const routes = ArchitectureRouter.route(wires.map(({ a, b }) => ({
+			from: rects[a],
+			to: rects[b],
+			blocks: rects.filter((rect) => rect !== rects[a] && rect !== rects[b]),
+			flow: TIER[views[a].kind] === TIER[views[b].kind] ? ArchitectureFlow.None : void 0
+		})), {
+			rects,
+			flow: !tiered ? ArchitectureFlow.None : horizontal ? ArchitectureFlow.Right : ArchitectureFlow.Down,
+			direct: !tiered || routing === ArchitectureRouting.Direct,
+			bounds: plot
+		});
+		const links = wires.map((wire, i) => {
+			const text = id(wire.link[linkLabel]);
+			return {
+				key: wire.key,
+				links: [wire.link],
+				route: routes[i],
+				arrow: false,
+				tip: {
+					title: `${views[wire.a].name} — ${views[wire.b].name}`,
+					rows: text ? [["Link", text]] : []
+				}
+			};
+		});
+		this.drawLinks(ctx, links, 1);
+		const shapes = views.map((view) => ({
+			view,
+			shape: ArchitectureShapes.device(view.kind, view.centre.x, view.centre.y, view.icon),
+			fill: ctx.palette.color(LEGEND[view.kind])
+		}));
+		const bodies = ctx.marks("devices", "path", shapes, (d) => d.view.id).attr("fill", (d) => d.fill);
+		ctx.set(bodies, { d: (d) => d.shape.body });
+		ctx.hover(bodies, (d) => ({
+			title: d.view.name,
+			color: d.fill,
+			rows: [["Type", LEGEND[d.view.kind]], ...d.view.address ? [["Address", d.view.address]] : []]
+		}));
+		const glyphs = ctx.marks("glyphs", "path", shapes.filter((d) => d.shape.glyph), (d) => d.view.id).attr("fill", "none").attr("stroke", (d) => ctx.palette.inkOn(d.fill)).attr("stroke-width", 1.5).attr("stroke-linecap", "round").style("pointer-events", "none");
+		ctx.set(glyphs, { d: (d) => d.shape.glyph });
+		const lines = views.flatMap((view) => view.lines.map((text, i) => ({
+			key: `${view.id}:${i}`,
+			text,
+			i,
+			x: view.rect.x + view.rect.width / 2,
+			y: view.rect.y + view.icon + 12 + i * LINE
+		})));
+		const words = ctx.marks("labels", "text", lines, (d) => d.key).attr("text-anchor", "middle").attr("font-size", (d) => d.i ? ADDRESS : NAME).attr("fill", (d) => d.i ? ctx.theme.inkMuted : ctx.theme.ink).style("pointer-events", "none").text((d) => d.text);
+		ctx.set(words, {
+			x: (d) => d.x,
+			y: (d) => d.y
+		});
+		const requests = links.map((view) => ({
+			lines: linkLabels && view.tip.rows?.length ? [ArchitectureText.fit(String(view.tip.rows[0][1]), 90, LINK_TEXT)] : [],
+			route: view.route
+		}));
+		this.drawLinkLabels(ctx, links, ArchitectureLinkLabels.place(requests, rects, LINK_TEXT, plot), LINK_TEXT);
+	}
+};
+export { NetworkTopologyDiagram };