@classytic/labs 0.2.0 → 0.3.0

package/dist/networking/NetworkScene.mjs

@@ -0,0 +1,54 @@
+'use client';
+
+import { NetworkDeviceGlyph } from "../kit/networking/glyphs.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/networking/NetworkScene.tsx
+function NetworkScene({ doc, activeDeviceId, activeLinkId, selectedDeviceId, onSelectDevice, ariaLabel }) {
+	const byId = new Map(doc.devices.map((device) => [device.id, device]));
+	const points = doc.devices.map((device) => device.at);
+	const minX = Math.min(...points.map((point) => point.x), 0);
+	const maxX = Math.max(...points.map((point) => point.x), 200);
+	const minY = Math.min(...points.map((point) => point.y), 0);
+	const maxY = Math.max(...points.map((point) => point.y), 100);
+	return /* @__PURE__ */ jsx("div", {
+		className: "network-scene",
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: `${minX - 52} ${minY - 54} ${Math.max(260, maxX - minX + 104)} ${Math.max(150, maxY - minY + 108)}`,
+			role: "img",
+			"aria-label": ariaLabel ?? doc.title ?? "Network topology",
+			children: [/* @__PURE__ */ jsx("g", {
+				className: "network-links",
+				children: doc.links.map((link) => {
+					const a = byId.get(link.a.deviceId);
+					const b = byId.get(link.b.deviceId);
+					if (!a || !b) return null;
+					const down = link.state === "down";
+					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+						x1: a.at.x,
+						y1: a.at.y,
+						x2: b.at.x,
+						y2: b.at.y,
+						className: "network-link",
+						"data-active": link.id === activeLinkId || void 0,
+						"data-down": down || void 0
+					}), /* @__PURE__ */ jsx("text", {
+						x: (a.at.x + b.at.x) / 2,
+						y: (a.at.y + b.at.y) / 2 - 8,
+						className: "network-link-label",
+						textAnchor: "middle",
+						children: down ? "down" : link.label ?? `${link.latencyMs ?? 1} ms`
+					})] }, link.id);
+				})
+			}), doc.devices.map((device) => /* @__PURE__ */ jsx(NetworkDeviceGlyph, {
+				device,
+				active: device.id === activeDeviceId,
+				selected: device.id === selectedDeviceId,
+				onSelect: onSelectDevice ? () => onSelectDevice(device.id) : void 0
+			}, device.id))]
+		})
+	});
+}
+
+//#endregion
+export { NetworkScene };

package/dist/networking/PacketInspector.d.mts

@@ -0,0 +1,11 @@
+import { NetworkPacket } from "./contract.mjs";
+import { ReactNode } from "react";
+
+//#region src/networking/PacketInspector.d.ts
+declare function PacketInspector({
+  packet
+}: {
+  packet: NetworkPacket;
+}): ReactNode;
+//#endregion
+export { PacketInspector };

package/dist/networking/PacketInspector.mjs

@@ -0,0 +1,32 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/networking/PacketInspector.tsx
+function PacketInspector({ packet }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "network-packet",
+		"aria-label": "Packet layers",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "network-packet-head",
+			children: [/* @__PURE__ */ jsx("strong", { children: "Packet" }), /* @__PURE__ */ jsxs("span", { children: [packet.bytes, " bytes"] })]
+		}), /* @__PURE__ */ jsx("ol", {
+			className: "network-layer-list",
+			children: packet.layers.map((layer) => /* @__PURE__ */ jsxs("li", {
+				className: "network-layer",
+				"data-layer": layer.kind,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "network-layer-name",
+						children: layer.kind
+					}),
+					/* @__PURE__ */ jsx("strong", { children: layer.protocol }),
+					/* @__PURE__ */ jsx("span", { children: layer.summary })
+				]
+			}, layer.kind))
+		})]
+	});
+}
+
+//#endregion
+export { PacketInspector };

package/dist/networking/PlugScene.mjs

@@ -0,0 +1,192 @@
+'use client';
+
+import { Figure, HUE, STROKE, alpha } from "../kit/figure/figure.mjs";
+import { FigText } from "../kit/figure/text.mjs";
+import { PAIRS, WIRE_INK, isStriped, pairOf, pairPins } from "./media.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/networking/PlugScene.tsx
+const W = 680;
+const H = 330;
+const PLUG = {
+	x: 176,
+	y: 34,
+	w: 328,
+	h: 132
+};
+const CH = {
+	w: 32,
+	gap: 5,
+	top: 44,
+	bottom: 158
+};
+const CONTACT_H = 16;
+const BRACKET_Y = 214;
+const EMPTY = "var(--fig-device-edge)";
+const PLUG_BODY = "var(--fig-device-soft)";
+const PLUG_EDGE = "var(--fig-device-edge)";
+const chX = (index) => {
+	const span = 8 * CH.w + 7 * CH.gap;
+	return PLUG.x + (PLUG.w - span) / 2 + index * (CH.w + CH.gap);
+};
+/** A striped wire is the pale half of its pair: the colour with white bands across it. */
+function Wire({ x, y, w, h, wire }) {
+	const id = wire ? `stripe-${wire}` : void 0;
+	if (!wire) return /* @__PURE__ */ jsx("rect", {
+		x,
+		y,
+		width: w,
+		height: h,
+		fill: EMPTY
+	});
+	const ink = WIRE_INK[wire];
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+		x,
+		y,
+		width: w,
+		height: h,
+		fill: ink
+	}), isStriped(wire) && /* @__PURE__ */ jsxs("g", {
+		clipPath: `url(#${id})`,
+		children: [/* @__PURE__ */ jsx("clipPath", {
+			id,
+			children: /* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: w,
+				height: h
+			})
+		}), Array.from({ length: 6 }, (_, band) => /* @__PURE__ */ jsx("rect", {
+			x,
+			y: y + 8 + band * 18,
+			width: w,
+			height: 7,
+			fill: "oklch(0.99 0 0)",
+			opacity: .92
+		}, band))]
+	})] });
+}
+function PlugScene({ pins, standard, wrong = [], showPairs = true, onPinClick, selected, label }) {
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H],
+		domain: "math",
+		label,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: PLUG.x + 128,
+				y: PLUG.y - 14,
+				width: 72,
+				height: 18,
+				rx: 4,
+				fill: PLUG_BODY,
+				stroke: PLUG_EDGE,
+				strokeWidth: STROKE.hair
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: PLUG.x,
+				y: PLUG.y,
+				width: PLUG.w,
+				height: PLUG.h,
+				rx: 7,
+				fill: PLUG_BODY,
+				stroke: PLUG_EDGE,
+				strokeWidth: STROKE.edge
+			}),
+			Array.from({ length: 8 }, (_, index) => {
+				const x = chX(index);
+				const pin = index + 1;
+				const wire = pins[index];
+				const isWrong = wrong.includes(pin);
+				return /* @__PURE__ */ jsxs("g", {
+					className: "network-scene-target",
+					"data-interactive": Boolean(onPinClick) || void 0,
+					role: onPinClick ? "button" : void 0,
+					tabIndex: onPinClick ? 0 : void 0,
+					"aria-label": `Pin ${pin}, ${wire ? wire.replace("-", " ") : "empty"}${isWrong ? ", wrong" : ""}`,
+					onClick: () => onPinClick?.(pin),
+					onKeyDown: (event) => {
+						if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							onPinClick?.(pin);
+						}
+					},
+					children: [
+						/* @__PURE__ */ jsx(Wire, {
+							x,
+							y: CH.top + CONTACT_H,
+							w: CH.w,
+							h: CH.bottom - CH.top - CONTACT_H,
+							wire
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: x + 4,
+							y: CH.top,
+							width: CH.w - 8,
+							height: CONTACT_H,
+							rx: 1.5,
+							fill: HUE.warn
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x,
+							y: CH.top,
+							width: CH.w,
+							height: CH.bottom - CH.top,
+							fill: "none",
+							stroke: isWrong ? HUE.danger : PLUG_EDGE,
+							strokeWidth: isWrong ? STROKE.edge : STROKE.hair
+						}),
+						selected && !wire && /* @__PURE__ */ jsx("rect", {
+							x: x + 2,
+							y: CH.top + CONTACT_H + 2,
+							width: CH.w - 4,
+							height: 16,
+							rx: 2,
+							fill: alpha(WIRE_INK[selected], 45)
+						}),
+						/* @__PURE__ */ jsx(FigText, {
+							x: x + CH.w / 2,
+							y: CH.bottom + 18,
+							size: "note",
+							anchor: "middle",
+							tone: isWrong ? "hot" : "ink",
+							children: pin
+						})
+					]
+				}, pin);
+			}),
+			showPairs && PAIRS.map((pair, index) => {
+				const pinsFor = pairPins(standard, pair.name);
+				if (pinsFor.length !== 2) return null;
+				const a = chX(pinsFor[0] - 1) + CH.w / 2;
+				const b = chX(pinsFor[1] - 1) + CH.w / 2;
+				const split = pinsFor[1] - pinsFor[0] !== 1;
+				const lift = split ? 30 : 12;
+				const ink = WIRE_INK[pair.wires[1]];
+				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+					d: `M${a},${BRACKET_Y - 10} C${a},${BRACKET_Y + lift} ${b},${BRACKET_Y + lift} ${b},${BRACKET_Y - 10}`,
+					fill: "none",
+					stroke: ink,
+					strokeWidth: split ? STROKE.bold : STROKE.line
+				}), /* @__PURE__ */ jsx(FigText, {
+					x: (a + b) / 2,
+					y: split ? BRACKET_Y + lift + 14 : BRACKET_Y - 14,
+					size: "note",
+					anchor: "middle",
+					tone: pairOf(pair.wires[1]) >= 0 ? "ink" : "soft",
+					children: pair.name
+				})] }, pair.name);
+			}),
+			showPairs && /* @__PURE__ */ jsx(FigText, {
+				x: W / 2,
+				y: H - 12,
+				size: "note",
+				anchor: "middle",
+				tone: "soft",
+				children: "blue holds the middle two pins, so green has to step around it"
+			})
+		]
+	});
+}
+
+//#endregion
+export { PlugScene };

package/dist/networking/SubnetScene.mjs

@@ -0,0 +1,124 @@
+'use client';
+
+import { Figure, HUE, STROKE, alpha, tint } from "../kit/figure/figure.mjs";
+import { FigText } from "../kit/figure/text.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/networking/SubnetScene.tsx
+const W = 680;
+const H = 250;
+const LABEL_X = 12;
+const BITS_X = 128;
+const BIT_W = 15;
+const BIT_STEP = 16;
+const OCTET_GAP = 6;
+const ROW_H = 26;
+const ROW_A = 86;
+const ROW_B = 140;
+const bitX = (index) => BITS_X + index * BIT_STEP + Math.floor(index / 8) * OCTET_GAP;
+function BitRow({ y, bits, differing, label }) {
+	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(FigText, {
+		x: LABEL_X,
+		y: y + ROW_H / 2 + 5,
+		size: "label",
+		tone: "ink",
+		children: label
+	}), bits.map((bit, index) => {
+		const x = bitX(index);
+		const differs = differing.includes(index);
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+			x,
+			y,
+			width: BIT_W,
+			height: ROW_H,
+			rx: 2,
+			fill: bit.network ? tint(HUE[1], 30) : alpha(HUE.soft, 10),
+			stroke: differs ? HUE.danger : alpha(HUE.soft, 30),
+			strokeWidth: differs ? STROKE.line : STROKE.hair
+		}), /* @__PURE__ */ jsx(FigText, {
+			x: x + BIT_W / 2,
+			y: y + ROW_H / 2 + 4,
+			size: "note",
+			anchor: "middle",
+			tone: bit.network ? "ink" : "soft",
+			halo: false,
+			children: bit.value
+		})] }, index);
+	})] });
+}
+function SubnetScene({ aLabel, bLabel, aBits, bBits, prefix, differing, same, label }) {
+	const lineX = prefix >= 32 ? bitX(31) + BIT_W + 3 : bitX(prefix) - 3;
+	const first = differing.length ? differing[0] : -1;
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H],
+		domain: "math",
+		label,
+		children: [
+			/* @__PURE__ */ jsx(FigText, {
+				x: BITS_X,
+				y: 30,
+				size: "note",
+				tone: "soft",
+				children: "network"
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: Math.min(W - 40, lineX + 10),
+				y: 30,
+				size: "note",
+				tone: "soft",
+				children: "host"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: lineX,
+				y1: 38,
+				x2: lineX,
+				y2: 176,
+				stroke: HUE[1],
+				strokeWidth: STROKE.bold
+			}),
+			/* @__PURE__ */ jsxs(FigText, {
+				x: lineX,
+				y: 52,
+				size: "label",
+				anchor: "middle",
+				tone: "hue-1",
+				children: ["/", prefix]
+			}),
+			/* @__PURE__ */ jsx(BitRow, {
+				y: ROW_A,
+				bits: aBits,
+				differing,
+				label: aLabel
+			}),
+			/* @__PURE__ */ jsx(BitRow, {
+				y: ROW_B,
+				bits: bBits,
+				differing,
+				label: bLabel
+			}),
+			first >= 0 && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+				d: `M${bitX(first) + BIT_W / 2},172 l0,14`,
+				stroke: HUE.danger,
+				strokeWidth: STROKE.line
+			}), /* @__PURE__ */ jsx(FigText, {
+				x: Math.min(W - 90, bitX(first) + BIT_W / 2),
+				y: 200,
+				size: "note",
+				anchor: "middle",
+				tone: "hot",
+				children: "first bit that differs"
+			})] }),
+			/* @__PURE__ */ jsx(FigText, {
+				x: W / 2,
+				y: H - 14,
+				size: "label",
+				anchor: "middle",
+				tone: same ? "good" : "hot",
+				children: same ? "the network halves match, so these two can talk directly" : "the network halves differ, so everything between them goes through a router"
+			})
+		]
+	});
+}
+
+//#endregion
+export { SubnetScene };