@classytic/labs 0.3.0 → 0.4.0

package/dist/kit/networking/primitives.mjs

@@ -0,0 +1,798 @@
+'use client';
+
+import { HUE, STROKE, shade, tint } from "../figure/figure.mjs";
+import { FigText } from "../figure/text.mjs";
+import { Arrow } from "../figure/beam.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/networking/primitives.tsx
+const toneColor = (tone) => {
+	if (tone === "secondary") return HUE[2];
+	if (tone === "good") return HUE.good;
+	if (tone === "warning") return HUE.warn;
+	if (tone === "danger") return HUE.danger;
+	if (tone === "neutral") return tint(HUE.ink, 72);
+	return HUE[1];
+};
+/** A small data envelope with enough internal structure to remain recognisable without a letter. */
+function PacketGlyph({ x, y, tone = "primary", state = "moving", scale = 1 }) {
+	const color = state === "dropped" ? HUE.danger : toneColor(tone);
+	return /* @__PURE__ */ jsxs("g", {
+		transform: `translate(${x} ${y}) scale(${scale})`,
+		"aria-label": `${state} packet`,
+		children: [
+			state === "moving" ? /* @__PURE__ */ jsx("path", {
+				d: "M-10 6h5m-8 5h8m-5 5h5",
+				fill: "none",
+				stroke: tint(color, 52),
+				strokeWidth: STROKE.hair,
+				strokeLinecap: "round"
+			}) : null,
+			/* @__PURE__ */ jsx("rect", {
+				width: 30,
+				height: 20,
+				rx: 4,
+				fill: state === "dropped" ? tint(HUE.danger, 82) : color,
+				stroke: state === "dropped" ? HUE.danger : shade(color, 28),
+				strokeWidth: STROKE.hair
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M5 7h20M5 13h13",
+				fill: "none",
+				stroke: HUE.paper,
+				strokeWidth: STROKE.hair
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: "M3 3h24",
+				fill: "none",
+				stroke: tint(HUE.paper, 35),
+				strokeWidth: STROKE.hair
+			}),
+			state === "dropped" ? /* @__PURE__ */ jsx("path", {
+				d: "M8 3l14 14m0-14L8 17",
+				fill: "none",
+				stroke: HUE.danger,
+				strokeWidth: STROKE.edge
+			}) : state === "queued" ? /* @__PURE__ */ jsx("path", {
+				d: "M22 11v5m4-5v5",
+				fill: "none",
+				stroke: HUE.paper,
+				strokeWidth: STROKE.hair
+			}) : null
+		]
+	});
+}
+/** A bounded fleet whose geometry changes with device count without overflowing a lesson figure. */
+function DeviceCluster({ x, y, count, label, state = "idle", maxVisible = 6 }) {
+	const visible = Math.min(Math.max(0, count), maxVisible);
+	const color = state === "delivered" ? HUE.good : state === "waiting" ? HUE.warn : HUE.ink;
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": `${count} ${label.toLowerCase()} devices`,
+		children: [
+			Array.from({ length: visible }, (_, index) => {
+				const column = index % 3;
+				const row = Math.floor(index / 3);
+				const deviceX = x + column * 25;
+				const deviceY = y + row * 34;
+				return /* @__PURE__ */ jsxs("g", {
+					transform: `translate(${deviceX} ${deviceY})`,
+					children: [/* @__PURE__ */ jsx("rect", {
+						width: 18,
+						height: 28,
+						rx: 5,
+						fill: tint(color, state === "idle" ? 5 : 12),
+						stroke: color,
+						strokeWidth: STROKE.line
+					}), /* @__PURE__ */ jsx("line", {
+						x1: 6,
+						y1: 23,
+						x2: 12,
+						y2: 23,
+						stroke: color,
+						strokeWidth: STROKE.hair
+					})]
+				}, index);
+			}),
+			count > maxVisible ? /* @__PURE__ */ jsxs(FigText, {
+				x: x + 82,
+				y: y + 38,
+				size: "label",
+				tone: "soft",
+				halo: false,
+				children: ["+", count - maxVisible]
+			}) : null,
+			/* @__PURE__ */ jsx(FigText, {
+				x: x + 25,
+				y: y + 82,
+				anchor: "middle",
+				size: "label",
+				tone: "ink",
+				halo: false,
+				children: label
+			})
+		]
+	});
+}
+/** Resolver cache drawer; a visible record distinguishes a hit from an empty lookup. */
+function CacheGlyph({ x, y, warm, label = "Cache" }) {
+	const color = warm ? HUE.good : HUE.ink;
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": `${warm ? "warm" : "empty"} resolver cache`,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: 58,
+				height: 38,
+				rx: 7,
+				fill: tint(color, warm ? 12 : 5),
+				stroke: color,
+				strokeWidth: STROKE.line
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: `M${x + 8} ${y + 11}h42M${x + 8} ${y + 19}h28`,
+				fill: "none",
+				stroke: color,
+				strokeWidth: STROKE.hair
+			}),
+			warm ? /* @__PURE__ */ jsx("circle", {
+				cx: x + 47,
+				cy: y + 27,
+				r: 4,
+				fill: HUE.good
+			}) : null,
+			/* @__PURE__ */ jsx(FigText, {
+				x: x + 29,
+				y: y + 57,
+				anchor: "middle",
+				size: "label",
+				tone: "ink",
+				halo: false,
+				children: label
+			})
+		]
+	});
+}
+/** Packet-sized finite-buffer slots; empty capacity stays visible instead of disappearing. */
+function QueueSlots({ x, y, capacity, filled, columns = 6, columnGap = 26, rowGap = 44 }) {
+	return /* @__PURE__ */ jsx("g", {
+		"aria-label": `${filled} of ${capacity} queue slots occupied`,
+		children: Array.from({ length: capacity }, (_, index) => {
+			const slotX = x + index % columns * columnGap;
+			const slotY = y + Math.floor(index / columns) * rowGap;
+			return index < filled ? /* @__PURE__ */ jsx(PacketGlyph, {
+				x: slotX,
+				y: slotY,
+				state: "queued"
+			}, index) : /* @__PURE__ */ jsx("rect", {
+				x: slotX,
+				y: slotY,
+				width: 30,
+				height: 20,
+				rx: 4,
+				fill: "none",
+				stroke: tint(HUE.ink, 58),
+				strokeWidth: STROKE.hair,
+				strokeDasharray: "3 3"
+			}, index);
+		})
+	});
+}
+/** Compact queue occupancy: repeated cells preserve the finite-buffer idea without drawing every packet. */
+function QueueBufferGlyph({ x, y, width, capacity, filled, state = "clear" }) {
+	const visible = Math.min(8, Math.max(1, capacity));
+	const occupied = capacity > 0 ? Math.round(Math.min(filled, capacity) / capacity * visible) : 0;
+	const gap = 3;
+	const cellWidth = (width - gap * (visible - 1)) / visible;
+	const color = state === "dropping" ? HUE.danger : state === "building" ? HUE.warn : HUE.good;
+	return /* @__PURE__ */ jsx("g", {
+		"aria-label": `${filled} of ${capacity} queue slots occupied`,
+		children: Array.from({ length: visible }, (_, index) => /* @__PURE__ */ jsx("rect", {
+			x: x + index * (cellWidth + gap),
+			y,
+			width: cellWidth,
+			height: 10,
+			rx: 3,
+			fill: index < occupied ? color : tint(HUE.ink, 8),
+			stroke: index < occupied ? color : tint(HUE.ink, 50),
+			strokeWidth: STROKE.hair
+		}, index))
+	});
+}
+/**
+* Every meter state has a colour, and the compiler enforces it.
+*
+* Written as a record over the union rather than a chain of ternaries ending in a default. A default
+* branch silently absorbs anything it does not recognise: `overloaded` arrived here for months and
+* came out the same green as `clear`, so a GPU that could not load its model showed a healthy bar.
+* A record cannot do that. Add a state and this object fails to compile until it is given a colour.
+*/
+const METER_INK = {
+	clear: HUE.good,
+	building: HUE.warn,
+	dropping: HUE.danger,
+	overloaded: HUE.danger
+};
+/** A compact quantitative buffer: length communicates occupancy; color communicates consequence. */
+function CapacityMeter({ x, y, width, value, maximum, state = "clear", label = "Buffer", header = true }) {
+	const ratio = maximum > 0 ? Math.min(1, Math.max(0, value / maximum)) : 0;
+	const color = METER_INK[state];
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": `${label}: ${value} of ${maximum}`,
+		children: [
+			header ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FigText, {
+				x,
+				y: y - 12,
+				size: "label",
+				tone: "soft",
+				halo: false,
+				children: label
+			}), /* @__PURE__ */ jsxs(FigText, {
+				x: x + width,
+				y: y - 12,
+				anchor: "end",
+				size: "label",
+				tone: "ink",
+				halo: false,
+				children: [
+					value,
+					" / ",
+					maximum
+				]
+			})] }) : null,
+			/* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width,
+				height: 18,
+				rx: 9,
+				fill: tint(HUE.ink, 7)
+			}),
+			ratio > 0 ? /* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: Math.max(18, width * ratio),
+				height: 18,
+				rx: 9,
+				fill: color
+			}) : null,
+			/* @__PURE__ */ jsx("line", {
+				x1: x + width,
+				y1: y - 3,
+				x2: x + width,
+				y2: y + 21,
+				stroke: state === "dropping" ? HUE.danger : tint(HUE.ink, 52),
+				strokeWidth: STROKE.edge
+			})
+		]
+	});
+}
+/** One message in a protocol sequence; direction comes from its endpoints, not a mode flag. */
+function SequenceMessage({ fromX, toX, y, label, state = "future" }) {
+	const color = state === "error" ? HUE.danger : state === "current" ? HUE[1] : state === "complete" ? HUE.good : tint(HUE.ink, 38);
+	return /* @__PURE__ */ jsxs("g", {
+		opacity: state === "future" ? .42 : 1,
+		"aria-label": `${label}, ${state}`,
+		children: [/* @__PURE__ */ jsx(FigText, {
+			x: (fromX + toX) / 2,
+			y: y - 7,
+			anchor: "middle",
+			size: "note",
+			tone: state === "error" ? "hot" : "ink",
+			halo: false,
+			children: label
+		}), /* @__PURE__ */ jsx(Arrow, {
+			x1: fromX,
+			y1: y,
+			x2: toX,
+			y2: y,
+			color,
+			weight: state === "current" ? "bold" : "line"
+		})]
+	});
+}
+/** Quiet alignment rail shared by protocol and service-exchange scenes. */
+function SequenceLifeline({ x, top, bottom }) {
+	return /* @__PURE__ */ jsx("line", {
+		x1: x,
+		y1: top,
+		x2: x,
+		y2: bottom,
+		stroke: tint(HUE.ink, 28),
+		strokeWidth: STROKE.hair,
+		strokeDasharray: "3 5"
+	});
+}
+/** Every port state has a colour, for the same reason the meter does. See {@link METER_INK}. */
+const PORT_INK = {
+	idle: HUE.ink,
+	active: HUE[1],
+	success: HUE.good,
+	error: HUE.danger
+};
+/** A consistent service endpoint label for listeners, forwards, and upstream connections. */
+function PortBadge({ x, y, port, protocol = "TCP", label, state = "idle", width = 68 }) {
+	const color = PORT_INK[state];
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": `${protocol} port ${port}${label ? `, ${label}` : ""}, ${state}`,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width,
+				height: 22,
+				rx: 11,
+				fill: tint(color, state === "idle" ? 5 : 11),
+				stroke: state === "idle" ? tint(HUE.ink, 48) : color,
+				strokeWidth: STROKE.hair
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: x + 11,
+				cy: y + 11,
+				r: 3,
+				fill: color
+			}),
+			/* @__PURE__ */ jsxs(FigText, {
+				x: x + 20,
+				y: y + 15,
+				size: "note",
+				tone: "ink",
+				halo: false,
+				children: [
+					protocol,
+					" ",
+					port
+				]
+			}),
+			label ? /* @__PURE__ */ jsx(FigText, {
+				x: x + width + 7,
+				y: y + 15,
+				size: "note",
+				tone: "soft",
+				halo: false,
+				children: label
+			}) : null
+		]
+	});
+}
+function NodeSymbol({ kind, cx, cy, color }) {
+	const common = {
+		fill: "none",
+		stroke: color,
+		strokeWidth: STROKE.line,
+		strokeLinecap: "round",
+		strokeLinejoin: "round"
+	};
+	if (kind === "phone") return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: cx - 7,
+			y: cy - 11,
+			width: 14,
+			height: 22,
+			rx: 3
+		}), /* @__PURE__ */ jsx("line", {
+			x1: cx - 3,
+			y1: cy + 7,
+			x2: cx + 3,
+			y2: cy + 7
+		})]
+	});
+	if (kind === "laptop") return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: cx - 12,
+			y: cy - 9,
+			width: 24,
+			height: 16,
+			rx: 2
+		}), /* @__PURE__ */ jsx("path", { d: `M${cx - 16} ${cy + 11}h32l-4-4h-24z` })]
+	});
+	if (kind === "camera") return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: cx - 13,
+				y: cy - 8,
+				width: 20,
+				height: 16,
+				rx: 3
+			}),
+			/* @__PURE__ */ jsx("path", { d: `M${cx + 7} ${cy - 5}l7-4v18l-7-4z` }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: cx - 4,
+				cy,
+				r: 3
+			})
+		]
+	});
+	if (kind === "router") return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: cx - 14,
+			y: cy - 6,
+			width: 28,
+			height: 14,
+			rx: 4
+		}), /* @__PURE__ */ jsx("path", { d: `M${cx - 8} ${cy + 1}h16m-3-3 3 3-3 3m-10-6-3 3 3 3` })]
+	});
+	if (kind === "modem") return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: cx - 12,
+			y: cy - 12,
+			width: 24,
+			height: 24,
+			rx: 4
+		}), /* @__PURE__ */ jsx("path", { d: `M${cx - 7} ${cy - 5}q4-5 8 0t8 0M${cx - 7} ${cy + 4}q4-5 8 0t8 0` })]
+	});
+	if (kind === "resolver") return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx,
+			cy,
+			r: 12
+		}), /* @__PURE__ */ jsx("path", { d: `M${cx - 12} ${cy}h24M${cx} ${cy - 12}c5 5 5 19 0 24M${cx} ${cy - 12}c-5 5-5 19 0 24` })]
+	});
+	if (kind === "server") return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: cx - 12,
+				y: cy - 13,
+				width: 24,
+				height: 8,
+				rx: 2
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: cx - 12,
+				y: cy - 4,
+				width: 24,
+				height: 8,
+				rx: 2
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: cx - 12,
+				y: cy + 5,
+				width: 24,
+				height: 8,
+				rx: 2
+			}),
+			/* @__PURE__ */ jsx("path", { d: `M${cx - 8} ${cy - 9}h3M${cx - 8} ${cy}h3M${cx - 8} ${cy + 9}h3` })
+		]
+	});
+	if (kind === "gpu") return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: cx - 13,
+				y: cy - 10,
+				width: 26,
+				height: 16,
+				rx: 2
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: cx - 6,
+				y: cy - 5,
+				width: 12,
+				height: 6,
+				rx: 1
+			}),
+			/* @__PURE__ */ jsx("path", { d: `M${cx - 9} ${cy + 6}v4M${cx - 3} ${cy + 6}v4M${cx + 3} ${cy + 6}v4M${cx + 9} ${cy + 6}v4` })
+		]
+	});
+	if (kind === "database") return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [
+			/* @__PURE__ */ jsx("ellipse", {
+				cx,
+				cy: cy - 8,
+				rx: 11,
+				ry: 4.5
+			}),
+			/* @__PURE__ */ jsx("path", { d: `M${cx - 11} ${cy - 8}v16c0 2.5 4.9 4.5 11 4.5s11-2 11-4.5v-16` }),
+			/* @__PURE__ */ jsx("path", { d: `M${cx - 11} ${cy}c0 2.5 4.9 4.5 11 4.5s11-2 11-4.5` })
+		]
+	});
+	if (kind === "broker") return /* @__PURE__ */ jsx("g", {
+		...common,
+		children: /* @__PURE__ */ jsx("path", { d: `M${cx - 13} ${cy - 10}h26v20h-26zM${cx - 8} ${cy - 4}h16M${cx - 8} ${cy + 2}h11m2-3 4 3-4 3` })
+	});
+	return /* @__PURE__ */ jsxs("g", {
+		...common,
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: cx - 11,
+			y: cy - 13,
+			width: 22,
+			height: 26,
+			rx: 3
+		}), /* @__PURE__ */ jsx("path", { d: `M${cx - 6} ${cy - 6}h12M${cx - 6} ${cy}h12M${cx - 6} ${cy + 6}h7` })]
+	});
+}
+/** Every chip state has a colour, for the same reason the meter does. See {@link METER_INK}. */
+const CHIP_INK = {
+	idle: HUE.ink,
+	active: HUE[1],
+	building: HUE.warn,
+	success: HUE.good,
+	warning: HUE.warn,
+	error: HUE.danger
+};
+/** Compact endpoint for dense routes and traces; it keeps icon and label on one baseline. */
+/**
+* Roughly how wide one character of `note` text is, in figure units.
+*
+* An estimate, and only ever used to decide whether a label needs condensing at all. The size is a
+* CSS token, so its pixel value is not knowable while the markup is being built; once the decision
+* is made the browser does the fitting exactly.
+*/
+const APPROX_NOTE_GLYPH = 6.4;
+/** Space the icon and the padding take before the label starts. */
+const LABEL_INSET = 45;
+function EndpointChip({ x, y, label, kind, state = "idle", width = 96 }) {
+	const color = CHIP_INK[state];
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": `${label}, ${kind}, ${state}`,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width,
+				height: 38,
+				rx: 10,
+				fill: tint(color, state === "idle" ? 4 : 9),
+				stroke: state === "idle" ? tint(HUE.ink, 44) : color,
+				strokeWidth: state === "active" ? STROKE.line : STROKE.hair
+			}),
+			/* @__PURE__ */ jsx(NodeSymbol, {
+				kind,
+				cx: x + 20,
+				cy: y + 19,
+				color
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: x + 39,
+				y: y + 24,
+				size: "note",
+				tone: "ink",
+				halo: false,
+				fit: label.length * APPROX_NOTE_GLYPH > width - LABEL_INSET ? width - LABEL_INSET : void 0,
+				children: label
+			})
+		]
+	});
+}
+/** Vendor-neutral endpoint or infrastructure node with one stable label position. */
+function NetworkNode({ x, y, label, kind, tone = "neutral", active = false, width = 96, appearance = "bare", status }) {
+	const color = toneColor(tone);
+	const nodeColor = tone === "neutral" ? HUE.ink : color;
+	const left = x - width / 2;
+	if (appearance === "bare") return /* @__PURE__ */ jsxs("g", {
+		"aria-label": `${label}, ${kind}${active ? ", active" : ""}`,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: x,
+				cy: y + 21,
+				r: 20,
+				fill: tint(nodeColor, active ? 18 : 9),
+				stroke: active ? color : tint(nodeColor, 48),
+				strokeWidth: active ? STROKE.edge : STROKE.hair
+			}),
+			/* @__PURE__ */ jsx(NodeSymbol, {
+				kind,
+				cx: x,
+				cy: y + 21,
+				color: active ? color : nodeColor
+			}),
+			status ? /* @__PURE__ */ jsx("circle", {
+				cx: x + 15,
+				cy: y + 7,
+				r: 4.5,
+				fill: toneColor(status),
+				stroke: HUE.paper,
+				strokeWidth: STROKE.edge
+			}) : null,
+			/* @__PURE__ */ jsx(FigText, {
+				x,
+				y: y + 60,
+				anchor: "middle",
+				size: "label",
+				tone: "ink",
+				halo: false,
+				children: label
+			})
+		]
+	});
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": `${label}, ${kind}${active ? ", active" : ""}`,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: left,
+				y,
+				width,
+				height: 54,
+				rx: 10,
+				fill: HUE.device,
+				stroke: active ? color : HUE.deviceSoft,
+				strokeWidth: active ? STROKE.edge : STROKE.hair
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: left + 5,
+				y: y + 5,
+				width: width - 10,
+				height: 3,
+				rx: 1.5,
+				fill: active ? color : HUE.deviceSoft
+			}),
+			/* @__PURE__ */ jsx(NodeSymbol, {
+				kind,
+				cx: left + 24,
+				cy: y + 29,
+				color: active ? color : HUE.deviceEdge
+			}),
+			status ? /* @__PURE__ */ jsx("circle", {
+				cx: left + width - 10,
+				cy: y + 12,
+				r: 4.5,
+				fill: toneColor(status),
+				stroke: HUE.device,
+				strokeWidth: STROKE.edge
+			}) : null,
+			/* @__PURE__ */ jsx(FigText, {
+				x: left + 43,
+				y: y + 33,
+				size: "label",
+				tone: "ink",
+				halo: false,
+				children: label
+			})
+		]
+	});
+}
+/** A cellular mast with sector panels and radio arcs; `groundY` is its reusable alignment seam. */
+function TowerGlyph({ x, groundY, label, tone = "primary", active = false, height = 58 }) {
+	const color = toneColor(tone);
+	const top = groundY - height;
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": `${label ?? "Cell tower"}${active ? ", serving" : ""}`,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: `M${x} ${top + 10}L${x - 15} ${groundY}M${x} ${top + 10}l15 ${groundY - top - 10}M${x - 10} ${groundY - 18}h20M${x - 7} ${groundY - 34}h14`,
+				fill: "none",
+				stroke: active ? color : HUE.deviceSoft,
+				strokeWidth: STROKE.line
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: x - 3,
+				y: top + 2,
+				width: 6,
+				height: 18,
+				rx: 3,
+				fill: active ? color : HUE.device,
+				stroke: active ? shade(color, 28) : HUE.deviceSoft,
+				strokeWidth: STROKE.hair
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: `M${x - 9} ${top + 8}q-10 8 0 16M${x + 9} ${top + 8}q10 8 0 16`,
+				fill: "none",
+				stroke: active ? color : HUE.deviceSoft,
+				strokeWidth: active ? STROKE.edge : STROKE.hair
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: x - 20,
+				y1: groundY,
+				x2: x + 20,
+				y2: groundY,
+				stroke: HUE.deviceEdge,
+				strokeWidth: STROKE.edge,
+				strokeLinecap: "round"
+			}),
+			label ? /* @__PURE__ */ jsx(FigText, {
+				x,
+				y: groundY + 18,
+				anchor: "middle",
+				size: "label",
+				tone: active ? tone === "secondary" ? "hue-2" : "hue-1" : "ink",
+				children: label
+			}) : null
+		]
+	});
+}
+function LinkGate({ x, y, height = 88, tone = "primary" }) {
+	const color = toneColor(tone);
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": "capacity gate",
+		children: [/* @__PURE__ */ jsx("rect", {
+			x,
+			y,
+			width: 10,
+			height,
+			rx: 3,
+			fill: color,
+			stroke: shade(color, 28),
+			strokeWidth: STROKE.edge
+		}), /* @__PURE__ */ jsx("rect", {
+			x: x + 2,
+			y: y + 4,
+			width: 3,
+			height: height - 8,
+			rx: 1.5,
+			fill: tint(HUE.paper, 35)
+		})]
+	});
+}
+function CertificateGlyph({ x, y, valid = true }) {
+	const color = valid ? HUE.good : HUE.danger;
+	return /* @__PURE__ */ jsxs("g", {
+		"aria-label": `${valid ? "valid" : "rejected"} certificate`,
+		children: [
+			/* @__PURE__ */ jsx("path", {
+				d: `M${x} ${y}h34v42h-34zM${x + 7} ${y + 10}h20M${x + 7} ${y + 17}h14`,
+				fill: tint(color, 14),
+				stroke: color,
+				strokeWidth: STROKE.line
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: x + 24,
+				cy: y + 30,
+				r: 6,
+				fill: color
+			}),
+			valid ? /* @__PURE__ */ jsx("path", {
+				d: `M${x + 21} ${y + 30}l2 2 4-5`,
+				fill: "none",
+				stroke: HUE.paper,
+				strokeWidth: STROKE.hair
+			}) : /* @__PURE__ */ jsx("path", {
+				d: `M${x + 21} ${y + 27}l6 6m0-6-6 6`,
+				fill: "none",
+				stroke: HUE.paper,
+				strokeWidth: STROKE.hair
+			})
+		]
+	});
+}
+/** Cumulative protocol wrappers: every lower layer visibly contains the payload above it. */
+function ProtocolStack({ x, y, layers, active = 0, width = 128 }) {
+	return /* @__PURE__ */ jsx("g", {
+		"aria-label": `${layers.length}-layer protocol stack`,
+		children: layers.map((layer, index) => {
+			const inset = (layers.length - index - 1) * 8;
+			const layerX = x + inset;
+			const layerWidth = width - inset * 2;
+			const layerY = y + index * 30;
+			return /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("rect", {
+					x: layerX,
+					y: layerY,
+					width: layerWidth,
+					height: 26,
+					rx: 6,
+					fill: tint(HUE[1], index === active ? 18 : 7),
+					stroke: index === active ? HUE[1] : tint(HUE[1], 42),
+					strokeWidth: index === active ? STROKE.edge : STROKE.hair
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: layerX + 5,
+					y: layerY + 5,
+					width: 3,
+					height: 16,
+					rx: 1.5,
+					fill: index === active ? HUE[1] : tint(HUE[1], 48)
+				}),
+				/* @__PURE__ */ jsx(FigText, {
+					x: x + width / 2,
+					y: layerY + 17,
+					anchor: "middle",
+					size: "label",
+					tone: "ink",
+					halo: false,
+					children: layer
+				})
+			] }, layer);
+		})
+	});
+}
+
+//#endregion
+export { CacheGlyph, CapacityMeter, CertificateGlyph, DeviceCluster, EndpointChip, LinkGate, NetworkNode, PacketGlyph, PortBadge, ProtocolStack, QueueBufferGlyph, QueueSlots, SequenceLifeline, SequenceMessage, TowerGlyph };