@classytic/labs 0.2.0 → 0.3.0

package/dist/math/trig/rules.mjs

@@ -51,6 +51,28 @@ const CAST_RULE = {
 		step: 15
 	}],
 	compute: (v) => explainCast(v.deg ?? 0),
+	challenge: [{
+		id: "cast-q3",
+		prompt: "At 210° in quadrant 3, which trig function is positive?",
+		choices: [
+			{
+				value: "sin",
+				label: "sin",
+				feedback: "The y-coordinate is negative in quadrant 3."
+			},
+			{
+				value: "cos",
+				label: "cos",
+				feedback: "The x-coordinate is negative in quadrant 3."
+			},
+			{
+				value: "tan",
+				label: "tan"
+			}
+		],
+		answer: "tan",
+		explain: "Both sin and cos are negative, so their ratio tan = sin ÷ cos is positive."
+	}],
 	derivation: [
 		{
 			tex: "\\cos\\theta = x, \\quad \\sin\\theta = y",
@@ -73,11 +95,7 @@ const EXACT_RULE = {
 	name: "Exact special-angle values",
 	formula: "\\sin 30^\\circ=\\tfrac12,\\; \\cos 30^\\circ=\\tfrac{\\sqrt3}{2},\\; \\sin 45^\\circ=\\tfrac{\\sqrt2}{2}",
 	analogy: "They all come from two triangles: the 45-45-90 (sides 1,1,√2) and the 30-60-90 (sides 1,√3,2).",
-	figure: (v) => createElement(Fragment, null, createElement("div", { style: {
-		display: "grid",
-		gap: 6,
-		justifyItems: "center"
-	} }, createElement(UnitCircleMini, {
+	figure: (v) => createElement(Fragment, null, createElement("div", { className: "trig-rule-figures" }, createElement(UnitCircleMini, {
 		deg: v.deg ?? 0,
 		showLegs: true,
 		showValue: true
@@ -91,6 +109,26 @@ const EXACT_RULE = {
 		step: 30
 	}],
 	compute: (v) => explainExact(v.deg ?? 0),
+	challenge: [{
+		id: "exact-150-reference",
+		prompt: "150° has the same reference triangle as which acute angle?",
+		choices: [
+			{
+				value: "30",
+				label: "30°"
+			},
+			{
+				value: "45",
+				label: "45°"
+			},
+			{
+				value: "60",
+				label: "60°"
+			}
+		],
+		answer: "30",
+		explain: "150° is 30° away from the 180° axis, so its reference angle is 30°."
+	}],
 	tricks: [
 		"Only the multiples of 30° and 45° are \"exact\".",
 		"Find the reference angle, look up its value, then apply the CAST sign.",
@@ -119,9 +157,10 @@ const PYTHAG_RULE = {
 		{ tex: "\\Rightarrow \\cos^2\\theta + \\sin^2\\theta = 1" }
 	],
 	tricks: [
-		"Divide by cos²θ → 1 + tan²θ = sec²θ.",
-		"Divide by sin²θ → 1 + cot²θ = csc²θ.",
-		"Lets you get cos from sin (up to sign): cosθ = ±√(1 − sin²θ)."
+		"Gets cos from sin, up to sign: cosθ = ±√(1 − sin²θ). The quadrant decides the sign, not the identity.",
+		"Recognise it hiding in an equation: replace sin²θ with 1 − cos²θ so a lone cosθ term survives.",
+		"Later (Paper 3): divide by cos²θ to get 1 + tan²θ = sec²θ.",
+		"Later (Paper 3): divide by sin²θ to get 1 + cot²θ = cosec²θ."
 	]
 };
 const DEG_RAD_RULE = {
@@ -142,6 +181,28 @@ const DEG_RAD_RULE = {
 		step: 15
 	}],
 	compute: (v) => explainDegRad(v.deg ?? 0),
+	challenge: [{
+		id: "degrees-radians-30",
+		prompt: "A 30° turn is what fraction of π radians?",
+		choices: [
+			{
+				value: "pi-3",
+				label: "π/3",
+				feedback: "π/3 is 60°."
+			},
+			{
+				value: "pi-6",
+				label: "π/6"
+			},
+			{
+				value: "pi-12",
+				label: "π/12",
+				feedback: "π/12 is 15°."
+			}
+		],
+		answer: "pi-6",
+		explain: "30/180 simplifies to 1/6, so 30° × π/180° = π/6."
+	}],
 	tricks: [
 		"× π/180 to go deg → rad; × 180/π to go back.",
 		"Memorise the anchors: 180°=π, 90°=π/2, 60°=π/3, 45°=π/4, 30°=π/6.",

package/dist/math/trig-explorer.mjs

@@ -2,8 +2,8 @@
 
 import { toDeg, toRad } from "../core/util.mjs";
 import { Tex as Tex$1 } from "../core/tex.mjs";
-import { CheckButton } from "../kit/controls.mjs";
-import { ControlBar, LabFrame } from "../kit/frame.mjs";
+import { CheckButton, Chip } from "../kit/controls.mjs";
+import { Activity } from "../kit/activity.mjs";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Axes, Circle, Dot, Grid, MovableDot, Polyline, Segment, Stage, Vector, useFrameLoop, useInView } from "@classytic/stage";
@@ -171,17 +171,15 @@ function TrigExplorer({ functions, startDeg = 30 } = {}) {
 			]
 		})
 	});
-	return /* @__PURE__ */ jsx(LabFrame, {
-		title: "Trig Explorer",
-		prompt: "Drag the angle on the circle (or press play), sin and cos are just its shadows.",
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+	const controls = /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
+		children: [
 			/* @__PURE__ */ jsx(CheckButton, {
 				onClick: () => setPlaying((p) => !p),
 				children: playing ? "Pause" : "Play"
 			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				className: "lab-chip",
+			/* @__PURE__ */ jsx(Chip, {
+				selected: false,
 				onClick: () => {
 					setPlaying(false);
 					setTheta(toRad(startDeg));
@@ -189,19 +187,46 @@ function TrigExplorer({ functions, startDeg = 30 } = {}) {
 				children: "Reset"
 			}),
 			/* @__PURE__ */ jsxs("span", {
-				style: {
-					marginLeft: "auto",
-					display: "inline-flex",
-					gap: 16,
-					fontVariantNumeric: "tabular-nums"
-				},
+				className: "lab-trig-readouts",
 				children: [/* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(Tex$1, { tex: `\\theta\\ ${deg.toFixed(0)}^\\circ` }) }), fns.map((fn) => /* @__PURE__ */ jsx("span", {
-					style: { color: FN_COLOR[fn] },
+					className: "lab-trig-function",
+					"data-function": fn,
 					children: /* @__PURE__ */ jsx(Tex$1, { tex: `\\${fn}\\theta\\ ${FN_EVAL[fn](theta).toFixed(2)}` })
 				}, fn))]
 			})
-		] }),
-		children: figure
+		]
+	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-trig-explorer-activity",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Trigonometric motion",
+				title: "Trig Explorer",
+				description: "Drag the angle on the circle—or play the motion—to see sin and cos as its projections."
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsx("strong", { children: playing ? "Tracing the circle" : "Paused" }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					"θ ",
+					deg.toFixed(0),
+					"°"
+				] }),
+				/* @__PURE__ */ jsx("span", { children: fns.join(" + ") })
+			] }),
+			/* @__PURE__ */ jsx(Activity.Workspace, { children: /* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Unit circle and unrolled waves",
+				children: figure
+			}) }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: "The horizontal projection is cosine and the vertical projection is sine; their wave traces come from the same rotating point." })] }),
+			/* @__PURE__ */ jsxs(Activity.LiveRegion, { children: [
+				"Angle ",
+				deg.toFixed(0),
+				" degrees. ",
+				fns.map((fn) => `${fn} ${FN_EVAL[fn](theta).toFixed(2)}`).join(", "),
+				"."
+			] }),
+			/* @__PURE__ */ jsx(Activity.Transport, { children: controls })
+		]
 	});
 }
 

package/dist/ml/index.d.mts

@@ -1,6 +1,6 @@
-import { RegressionLab, RegressionProps } from "./regression/preset.mjs";
-import { KMeansLab, KMeansProps } from "./kmeans/preset.mjs";
-import { ClassifierProps, ClassifierThresholdLab } from "./classifier/preset.mjs";
-import { BoundaryDataset, BoundaryProps, DecisionBoundaryLab } from "./boundary/preset.mjs";
-import { KNNBoundaryLab, KnnDataset, KnnProps } from "./knn/preset.mjs";
+import { RegressionLab, RegressionProps } from "../domains/ml/regression/runtime.mjs";
+import { KMeansLab, KMeansProps } from "../domains/ml/kmeans/runtime.mjs";
+import { ClassifierProps, ClassifierThresholdLab } from "../domains/ml/classifier-threshold/runtime.mjs";
+import { BoundaryDataset, BoundaryProps, DecisionBoundaryLab } from "../domains/ml/decision-boundary/runtime.mjs";
+import { KNNBoundaryLab, KnnDataset, KnnProps } from "../domains/ml/knn/runtime.mjs";
 export { type BoundaryDataset, type BoundaryProps, type ClassifierProps, ClassifierThresholdLab, DecisionBoundaryLab, KMeansLab, type KMeansProps, KNNBoundaryLab, type KnnDataset, type KnnProps, RegressionLab, type RegressionProps };

package/dist/ml/index.mjs

@@ -1,7 +1,7 @@
-import { RegressionLab } from "./regression/preset.mjs";
-import { KMeansLab } from "./kmeans/preset.mjs";
-import { ClassifierThresholdLab } from "./classifier/preset.mjs";
-import { DecisionBoundaryLab } from "./boundary/preset.mjs";
-import { KNNBoundaryLab } from "./knn/preset.mjs";
+import { RegressionLab } from "../domains/ml/regression/runtime.mjs";
+import { KMeansLab } from "../domains/ml/kmeans/runtime.mjs";
+import { ClassifierThresholdLab } from "../domains/ml/classifier-threshold/runtime.mjs";
+import { DecisionBoundaryLab } from "../domains/ml/decision-boundary/runtime.mjs";
+import { KNNBoundaryLab } from "../domains/ml/knn/runtime.mjs";
 
 export { ClassifierThresholdLab, DecisionBoundaryLab, KMeansLab, KNNBoundaryLab, RegressionLab };

package/dist/networking/EncapScene.mjs

@@ -0,0 +1,227 @@
+'use client';
+
+import { Figure, HUE, STROKE, alpha, tint } from "../kit/figure/figure.mjs";
+import { FigText } from "../kit/figure/text.mjs";
+import { opensTo } from "./encapsulation.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/networking/EncapScene.tsx
+const W = 680;
+const H = 292;
+const STRIP = {
+	x: 40,
+	y: 46,
+	w: 600,
+	h: 34
+};
+const NODE = {
+	w: 84,
+	h: 34,
+	y: 166
+};
+const MAC_Y = 150;
+const IP_Y = 248;
+/** The colour of a layer is the colour of anything that works at that layer. */
+const LAYER_INK = {
+	"data-link": HUE[3],
+	network: HUE[2],
+	transport: HUE[1],
+	application: HUE.good
+};
+const PAYLOAD_INK = HUE.good;
+/**
+* Named with the SAME words as the blocks in the strip above, so the shared colour is readable as a
+* statement rather than left as a puzzle: this box is Ethernet-coloured because Ethernet is all it
+* ever reads. Kept short because the caption must fit inside the node pitch, and "opens to the
+* application layer" is both jargon and wide enough to run over its neighbours.
+*/
+const READS = {
+	"data-link": "reads Ethernet",
+	network: "reads IPv4",
+	transport: "reads TCP",
+	application: "reads the message"
+};
+function EncapScene({ frame, path, frames, activeSegment, label }) {
+	const leading = [...frame.headers].reverse().map((header) => ({
+		key: header.protocol,
+		kind: header.kind,
+		bytes: header.bytes - (header.trailerBytes ?? 0),
+		text: header.protocol
+	})).filter((block) => block.bytes > 0);
+	const trailing = frame.headers.filter((header) => header.trailerBytes).map((header) => ({
+		key: `${header.protocol}-fcs`,
+		kind: header.kind,
+		bytes: header.trailerBytes,
+		text: "FCS"
+	}));
+	const blocks = [
+		...leading,
+		{
+			key: "payload",
+			kind: null,
+			bytes: frame.payloadBytes,
+			text: "your message"
+		},
+		...trailing
+	];
+	const total = Math.max(1, frame.onWireBytes);
+	let cursor = STRIP.x;
+	const drawn = blocks.map((block) => {
+		const width = block.bytes / total * STRIP.w;
+		const x = cursor;
+		cursor += width;
+		return {
+			...block,
+			x,
+			width,
+			ink: block.kind ? LAYER_INK[block.kind] : PAYLOAD_INK
+		};
+	});
+	const nodeX = (index) => STRIP.x + STRIP.w / path.length * (index + .5) - NODE.w / 2;
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H],
+		domain: "math",
+		label,
+		children: [
+			/* @__PURE__ */ jsx(FigText, {
+				x: STRIP.x,
+				y: STRIP.y - 14,
+				size: "note",
+				tone: "soft",
+				children: "on the wire"
+			}),
+			/* @__PURE__ */ jsxs(FigText, {
+				x: STRIP.x + STRIP.w,
+				y: STRIP.y - 14,
+				size: "note",
+				anchor: "end",
+				tone: "ink",
+				children: [
+					frame.onWireBytes,
+					" bytes to carry ",
+					frame.payloadBytes
+				]
+			}),
+			drawn.map((block) => /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("rect", {
+					x: block.x,
+					y: STRIP.y,
+					width: Math.max(1, block.width),
+					height: STRIP.h,
+					fill: tint(block.ink, block.kind ? 62 : 45),
+					stroke: alpha(block.ink, 70),
+					strokeWidth: STROKE.hair
+				}),
+				block.width > 46 && /* @__PURE__ */ jsx(FigText, {
+					x: block.x + block.width / 2,
+					y: STRIP.y + 22,
+					size: "note",
+					anchor: "middle",
+					tone: "ink",
+					halo: false,
+					children: block.text
+				}),
+				block.width > 26 && /* @__PURE__ */ jsx(FigText, {
+					x: block.x + block.width / 2,
+					y: STRIP.y + STRIP.h + 16,
+					size: "note",
+					anchor: "middle",
+					tone: "soft",
+					children: block.bytes
+				})
+			] }, block.key)),
+			path.slice(0, -1).map((node, index) => {
+				const from = nodeX(index) + NODE.w;
+				const to = nodeX(index + 1);
+				return /* @__PURE__ */ jsx("line", {
+					x1: from,
+					y1: NODE.y + NODE.h / 2,
+					x2: to,
+					y2: NODE.y + NODE.h / 2,
+					stroke: alpha(HUE.soft, 55),
+					strokeWidth: STROKE.line
+				}, `wire-${node.id}`);
+			}),
+			frames.map((wire, index) => {
+				const fromIndex = path.indexOf(wire.segment.from);
+				const toIndex = path.indexOf(wire.segment.to);
+				const left = nodeX(fromIndex) + NODE.w / 2;
+				const right = nodeX(toIndex) + NODE.w / 2;
+				const active = activeSegment === index;
+				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+					x1: left,
+					y1: 156,
+					x2: right,
+					y2: 156,
+					stroke: active ? LAYER_INK["data-link"] : alpha(LAYER_INK["data-link"], 35),
+					strokeWidth: active ? STROKE.bold : STROKE.line
+				}), /* @__PURE__ */ jsxs(FigText, {
+					x: (left + right) / 2,
+					y: MAC_Y - 4,
+					size: "note",
+					anchor: "middle",
+					tone: active ? "ink" : "soft",
+					children: [
+						wire.mac.from,
+						" → ",
+						wire.mac.to
+					]
+				})] }, `seg-${index}`);
+			}),
+			path.map((node, index) => {
+				const x = nodeX(index);
+				const ink = LAYER_INK[opensTo(node.kind)];
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx("rect", {
+						x,
+						y: NODE.y,
+						width: NODE.w,
+						height: NODE.h,
+						rx: 5,
+						fill: tint(ink, 66),
+						stroke: alpha(ink, 75),
+						strokeWidth: STROKE.line
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x + NODE.w / 2,
+						y: NODE.y + 22,
+						size: "note",
+						anchor: "middle",
+						tone: "ink",
+						halo: false,
+						children: node.name
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x + NODE.w / 2,
+						y: NODE.y + NODE.h + 16,
+						size: "note",
+						anchor: "middle",
+						tone: "soft",
+						children: READS[opensTo(node.kind)]
+					})
+				] }, node.id);
+			}),
+			path[0]?.ip && path[path.length - 1]?.ip && /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+				d: `M${nodeX(0) + NODE.w / 2},${IP_Y - 10} L${nodeX(0) + NODE.w / 2},${IP_Y} L${nodeX(path.length - 1) + NODE.w / 2},${IP_Y} L${nodeX(path.length - 1) + NODE.w / 2},${IP_Y - 10}`,
+				fill: "none",
+				stroke: LAYER_INK.network,
+				strokeWidth: STROKE.line
+			}), /* @__PURE__ */ jsxs(FigText, {
+				x: W / 2,
+				y: 268,
+				size: "note",
+				anchor: "middle",
+				tone: "ink",
+				children: [
+					path[0].ip,
+					" → ",
+					path[path.length - 1].ip,
+					", unchanged the whole way"
+				]
+			})] })
+		]
+	});
+}
+
+//#endregion
+export { EncapScene };

package/dist/networking/MediaScene.mjs

@@ -0,0 +1,217 @@
+'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/MediaScene.tsx
+const W = 680;
+const H = 250;
+const RUN = {
+	x: 96,
+	w: 470,
+	y: 118
+};
+const DEVICE_BODY = "var(--fig-device)";
+const DEVICE_EDGE = "var(--fig-device-edge)";
+const CAVITY = "var(--fig-cavity)";
+/** A small box at each end, so every medium visibly connects two things. */
+function Endpoint({ x, label }) {
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: x - 26,
+			y: RUN.y - 22,
+			width: 52,
+			height: 44,
+			rx: 5,
+			fill: DEVICE_BODY,
+			stroke: DEVICE_EDGE,
+			strokeWidth: STROKE.hair
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: x - 16,
+			y: RUN.y - 12,
+			width: 32,
+			height: 12,
+			rx: 2,
+			fill: CAVITY
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x,
+			y: RUN.y + 40,
+			size: "note",
+			anchor: "middle",
+			tone: "soft",
+			children: label
+		})
+	] });
+}
+/** Interference arriving from a noisy machine. Only copper cares. */
+function Noise({ absorbed }) {
+	const x = RUN.x + RUN.w / 2;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx(FigText, {
+			x,
+			y: 34,
+			size: "note",
+			anchor: "middle",
+			tone: absorbed ? "hot" : "soft",
+			children: "electrical noise"
+		}),
+		[
+			-70,
+			-20,
+			30
+		].map((offset) => /* @__PURE__ */ jsx("path", {
+			d: `M${x + offset},44 l6,10 l-9,4 l8,12`,
+			fill: "none",
+			stroke: absorbed ? HUE.danger : alpha(HUE.soft, 40),
+			strokeWidth: STROKE.line,
+			strokeLinecap: "round"
+		}, offset)),
+		/* @__PURE__ */ jsx(FigText, {
+			x,
+			y: 92,
+			size: "note",
+			anchor: "middle",
+			tone: absorbed ? "hot" : "good",
+			children: absorbed ? "induced into both wires" : "cannot enter the glass"
+		})
+	] });
+}
+/** Twisted pair: two conductors that swap sides, so induced noise lands equally on both. */
+function Copper() {
+	const { x, w, y } = RUN;
+	const turns = 11;
+	const step = w / turns;
+	const amp = 9;
+	const wave = (phase) => {
+		let d = `M${x},${y + phase * amp}`;
+		for (let index = 0; index < turns; index++) {
+			const x0 = x + index * step;
+			d += ` Q${x0 + step / 2},${y - phase * amp * 1.6} ${x0 + step},${y + phase * amp}`;
+		}
+		return d;
+	};
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("path", {
+			d: wave(1),
+			fill: "none",
+			stroke: HUE[1],
+			strokeWidth: STROKE.edge
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: wave(-1),
+			fill: "none",
+			stroke: tint(HUE[1], 55),
+			strokeWidth: STROKE.edge
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: x + w / 2,
+			y: y + 62,
+			size: "note",
+			anchor: "middle",
+			tone: "soft",
+			children: "the same noise lands on both wires, so the difference between them survives"
+		})
+	] });
+}
+/** Optical fibre: light bouncing inside a core it cannot escape. */
+function Fibre() {
+	const { x, w, y } = RUN;
+	const half = 15;
+	const bounces = 7;
+	const step = w / bounces;
+	let path = `M${x},${y}`;
+	for (let index = 0; index < bounces; index++) path += ` L${x + (index + .5) * step},${y + (index % 2 === 0 ? -12 : half - 3)}`;
+	path += ` L${x + w},${y}`;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x,
+			y: y - half - 6,
+			width: w,
+			height: 42,
+			rx: 4,
+			fill: alpha(HUE[3], 18)
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x,
+			y: y - half,
+			width: w,
+			height: half * 2,
+			fill: alpha(HUE.paper, 90),
+			stroke: alpha(HUE[3], 45),
+			strokeWidth: STROKE.hair
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: path,
+			fill: "none",
+			stroke: HUE.warn,
+			strokeWidth: STROKE.bold,
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx(FigText, {
+			x: x + w / 2,
+			y: y + 62,
+			size: "note",
+			anchor: "middle",
+			tone: "soft",
+			children: "light reflects off the boundary every time, so it never leaves the core"
+		})
+	] });
+}
+/** Radio: one transmitter, and everyone inside the circle receives it. */
+function Radio() {
+	const { x, w, y } = RUN;
+	const cx = x + 40;
+	return /* @__PURE__ */ jsxs("g", { children: [[
+		46,
+		78,
+		110,
+		142
+	].map((r, index) => /* @__PURE__ */ jsx("path", {
+		d: `M${cx + r * .3},${y - r * .72} A${r},${r} 0 0 1 ${cx + r * .3},${y + r * .72}`,
+		fill: "none",
+		stroke: HUE[2],
+		strokeWidth: STROKE.line,
+		opacity: .8 - index * .15
+	}, r)), /* @__PURE__ */ jsx(FigText, {
+		x: x + w / 2 + 40,
+		y: y + 62,
+		size: "note",
+		anchor: "middle",
+		tone: "soft",
+		children: "everyone inside the circle receives it, whether or not they were meant to"
+	})] });
+}
+function MediaScene({ medium, noisy = false, label }) {
+	const { x, w } = RUN;
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H],
+		domain: "physics",
+		label,
+		children: [
+			noisy && /* @__PURE__ */ jsx(Noise, { absorbed: medium !== "fibre" }),
+			medium === "copper" && /* @__PURE__ */ jsx(Copper, {}),
+			medium === "fibre" && /* @__PURE__ */ jsx(Fibre, {}),
+			medium === "radio" && /* @__PURE__ */ jsx(Radio, {}),
+			/* @__PURE__ */ jsx(Endpoint, {
+				x: x - 34,
+				label: "switch"
+			}),
+			medium === "radio" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Endpoint, {
+				x: x + w - 60,
+				label: "in range"
+			}), /* @__PURE__ */ jsx(Endpoint, {
+				x: x + w + 30,
+				label: "also in range"
+			})] }) : /* @__PURE__ */ jsx(Endpoint, {
+				x: x + w + 34,
+				label: "device"
+			})
+		]
+	});
+}
+
+//#endregion
+export { MediaScene };

package/dist/networking/NetworkScene.d.mts

@@ -0,0 +1,22 @@
+import { NetworkDoc } from "./contract.mjs";
+import { ReactNode } from "react";
+
+//#region src/networking/NetworkScene.d.ts
+interface NetworkSceneProps {
+  doc: NetworkDoc;
+  activeDeviceId?: string;
+  activeLinkId?: string;
+  selectedDeviceId?: string;
+  onSelectDevice?: (id: string) => void;
+  ariaLabel?: string;
+}
+declare function NetworkScene({
+  doc,
+  activeDeviceId,
+  activeLinkId,
+  selectedDeviceId,
+  onSelectDevice,
+  ariaLabel
+}: NetworkSceneProps): ReactNode;
+//#endregion
+export { NetworkScene, NetworkSceneProps };