@classytic/labs 0.2.0 → 0.3.0

package/dist/logic/LogicScene.mjs

@@ -1,9 +1,10 @@
 'use client';
 
-import { JunctionDot, Wire } from "../kit/electronics.mjs";
-import { GateGlyph, Lamp, ToggleSwitch, gatePorts } from "../kit/logic-gates.mjs";
+import { JunctionDot, Wire } from "../kit/electronics/wire.mjs";
+import { Lamp, ToggleSwitch } from "../kit/logic-gates/display.mjs";
 import { getGate } from "./registry.mjs";
 import { evaluate } from "./evaluate.mjs";
+import { GateGlyph, gatePorts } from "../kit/logic-gates/gate.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/logic/LogicScene.tsx
@@ -106,14 +107,72 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 			trunkX.set(src, sp.x + Math.min(14 + i * 11, Math.max(8, near - sp.x - 8)));
 		});
 	});
+	const columnOf = (x) => Math.round((x - MX) / COL);
+	const gateBoxes = doc.gates.map((g) => ({ p: pos.get(g.id) })).filter((item) => !!item.p).map(({ p }) => ({
+		col: columnOf(p.x),
+		top: p.y - GATE / 2 - 6,
+		bottom: p.y + GATE / 2 + 6
+	}));
+	const blockedAt = (y, fromCol, toCol) => gateBoxes.some((box) => box.col > fromCol && box.col < toCol && y > box.top && y < box.bottom);
+	let gatesTop = Infinity, gatesBottom = -Infinity;
+	pos.forEach((p) => {
+		gatesTop = Math.min(gatesTop, p.y - halfH(p.gate) - 18);
+		gatesBottom = Math.max(gatesBottom, p.y + halfH(p.gate));
+	});
+	outY.forEach((y) => {
+		gatesTop = Math.min(gatesTop, y - LED_R);
+		gatesBottom = Math.max(gatesBottom, y + LED_R + 20);
+	});
+	const midY = (gatesTop + gatesBottom) / 2;
+	const detours = [];
+	const longSinks = /* @__PURE__ */ new Set();
+	let lanesAbove = 0, lanesBelow = 0;
+	const approachesInto = /* @__PURE__ */ new Map();
+	sinkPorts.forEach((list, src) => {
+		const sp = outPort(src);
+		if (!sp) return;
+		const fromCol = columnOf(sp.x - SW_W / 2);
+		for (const sink of list) {
+			const toCol = columnOf(sink.x);
+			if (toCol - fromCol < 2 || !blockedAt(sink.y, fromCol, toCol)) continue;
+			const laneY = (sp.y + sink.y) / 2 < midY ? gatesTop - 10 - lanesAbove++ * 10 : gatesBottom + 10 + lanesBelow++ * 10;
+			const arriving = approachesInto.get(toCol) ?? 0;
+			approachesInto.set(toCol, arriving + 1);
+			detours.push({
+				src,
+				sink,
+				laneY,
+				approachX: sink.x - 12 - arriving * 8
+			});
+			longSinks.add(sink);
+		}
+	});
+	const viewTop = Math.min(0, gatesTop - 10 - lanesAbove * 10);
+	const viewBottom = Math.max(H, gatesBottom + 10 + lanesBelow * 10);
 	const wires = [];
 	const junctions = [];
-	sinkPorts.forEach((list, src) => {
+	sinkPorts.forEach((all, src) => {
 		const sp = outPort(src);
 		if (!sp) return;
 		const on = lit(src), col = hue(src), tx = trunkX.get(src) ?? sp.x + 14;
-		const ys = [sp.y, ...list.map((s) => s.y)];
+		const list = all.filter((s) => !longSinks.has(s));
+		const lanes = detours.filter((d) => d.src === src);
+		const ys = [
+			sp.y,
+			...list.map((s) => s.y),
+			...lanes.map((d) => d.laneY)
+		];
 		const lo = Math.min(...ys), hi = Math.max(...ys);
+		lanes.forEach((d, i) => wires.push(/* @__PURE__ */ jsx(Wire, {
+			points: [
+				[tx, d.laneY],
+				[d.approachX, d.laneY],
+				[d.approachX, d.sink.y],
+				[d.sink.x, d.sink.y]
+			],
+			live: on,
+			color: col
+		}, `d-${src}-${i}`)));
 		wires.push(/* @__PURE__ */ jsx(Wire, {
 			points: [[sp.x, sp.y], [tx, sp.y]],
 			live: on,
@@ -140,18 +199,13 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 		};
 		tap(sp.y, "s");
 		list.forEach((s, i) => tap(s.y, `${i}`));
+		lanes.forEach((d, i) => tap(d.laneY, `lane-${i}`));
 	});
 	return /* @__PURE__ */ jsx("div", {
-		style: {
-			borderRadius: 12,
-			overflow: "hidden",
-			background: "var(--stage-bg)",
-			border: "1px solid var(--stage-grid)",
-			maxWidth: W,
-			margin: "0 auto"
-		},
+		className: "logic-scene-frame",
+		style: { "--logic-scene-width": `${W}px` },
 		children: /* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
+			viewBox: `0 ${viewTop} ${W} ${viewBottom - viewTop}`,
 			width: "100%",
 			role: "img",
 			"aria-label": ariaLabel,
@@ -165,7 +219,8 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 						role: onToggleInput ? "button" : void 0,
 						tabIndex: onToggleInput ? 0 : void 0,
 						"aria-label": onToggleInput ? `toggle ${inp.label ?? inp.id}` : void 0,
-						style: { cursor: onToggleInput ? "pointer" : "default" },
+						className: "logic-scene-control",
+						"data-interactive": !!onToggleInput || void 0,
 						onClick: onToggleInput ? () => onToggleInput(inp.id) : void 0,
 						onKeyDown: onToggleInput ? (e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -183,6 +238,7 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 						}), showValues && (() => {
 							const on = sol.value(inp.id);
 							return /* @__PURE__ */ jsx("text", {
+								className: "logic-svg-passive",
 								x: on ? p.x + SW_H * .55 : p.x + SW_W - SW_H * .55,
 								y: p.y,
 								fill: "var(--stage-fg)",
@@ -190,7 +246,6 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 								fontWeight: 800,
 								textAnchor: "middle",
 								dominantBaseline: "central",
-								style: { pointerEvents: "none" },
 								children: on ? "1" : "0"
 							});
 						})()]
@@ -209,6 +264,7 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 						live: lit(g.id),
 						label: g.label ?? getGate(g.kind)?.label
 					}), showValues && /* @__PURE__ */ jsx("text", {
+						className: "logic-svg-passive",
 						x: op.x + 4,
 						y: op.y - 6,
 						fill: lit(g.id) ? hue(g.id) : "var(--stage-muted)",
@@ -216,7 +272,6 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 						fontWeight: 800,
 						textAnchor: "start",
 						dominantBaseline: "auto",
-						style: { pointerEvents: "none" },
 						children: sol.value(g.id) ? "1" : "0"
 					})] }, g.id);
 				}),
@@ -229,7 +284,8 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 						role: onOutputClick ? "button" : void 0,
 						tabIndex: onOutputClick ? 0 : void 0,
 						"aria-label": onOutputClick ? `set ${o.label ?? o.id}` : void 0,
-						style: { cursor: onOutputClick ? "pointer" : "default" },
+						className: "logic-scene-control",
+						"data-interactive": !!onOutputClick || void 0,
 						onClick: onOutputClick ? () => onOutputClick(o.id) : void 0,
 						onKeyDown: onOutputClick ? (e) => {
 							if (e.key === "Enter" || e.key === " ") {
@@ -255,6 +311,7 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 								label: o.label
 							}),
 							/* @__PURE__ */ jsx("text", {
+								className: "logic-svg-passive",
 								x: outX,
 								y: oy,
 								fill: lit(o.in) ? "var(--stage-bg)" : "var(--stage-fg)",
@@ -262,7 +319,6 @@ function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState
 								fontWeight: 800,
 								textAnchor: "middle",
 								dominantBaseline: "central",
-								style: { pointerEvents: "none" },
 								children: txt
 							})
 						]

package/dist/logic/SequentialLogicLab.d.mts

@@ -0,0 +1,23 @@
+import { SequentialLogicDoc } from "./sequential.mjs";
+import { SEQUENTIAL_PRESETS, SequentialPresetKey } from "./sequential-presets.mjs";
+import { ReactNode } from "react";
+
+//#region src/logic/SequentialLogicLab.d.ts
+interface SequentialLogicLabProps {
+  doc?: SequentialLogicDoc;
+  preset?: SequentialPresetKey;
+  title?: string;
+  description?: string;
+  clock?: string;
+  historyLength?: number;
+}
+declare function SequentialLogicLab({
+  doc: authoredDoc,
+  preset,
+  title,
+  description,
+  clock,
+  historyLength
+}?: SequentialLogicLabProps): ReactNode;
+//#endregion
+export { SequentialLogicLab, SequentialLogicLabProps };

package/dist/logic/SequentialLogicLab.mjs

@@ -0,0 +1,179 @@
+'use client';
+
+import { Activity } from "../kit/activity.mjs";
+import { createSequentialState, observeSequential, readUnsigned, stepSequential } from "./sequential.mjs";
+import { SEQUENTIAL_PRESETS, sequentialPreset } from "./sequential-presets.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+import { Clock3, RotateCcw } from "lucide-react";
+
+//#region src/logic/SequentialLogicLab.tsx
+function SequentialLogicLab({ doc: authoredDoc, preset = "d-flip-flop", title, description, clock, historyLength = 10 } = {}) {
+	const selected = useMemo(() => sequentialPreset(preset), [preset]);
+	const doc = authoredDoc ?? selected.doc;
+	const clockId = clock ?? selected.clock;
+	const initialInputs = () => Object.fromEntries(doc.inputs.map((item) => [item.id, item.value ?? false]));
+	const [inputs, setInputs] = useState(initialInputs);
+	const [state, setState] = useState(() => createSequentialState(doc));
+	const [history, setHistory] = useState([]);
+	const solution = observeSequential(doc, state, inputs);
+	const record = (next, nextInputs) => {
+		const observed = observeSequential(doc, next, nextInputs);
+		setHistory((items) => [...items, {
+			tick: next.tick,
+			inputs: { ...nextInputs },
+			outputs: { ...observed.outputs }
+		}].slice(-historyLength));
+	};
+	const applyInputs = (nextInputs) => {
+		const next = stepSequential(doc, state, nextInputs).state;
+		setInputs(nextInputs);
+		setState(next);
+		record(next, nextInputs);
+	};
+	const toggle = (id) => applyInputs({
+		...inputs,
+		[id]: !inputs[id]
+	});
+	const pulse = () => {
+		if (!clockId) return;
+		const lowInputs = {
+			...inputs,
+			[clockId]: false
+		};
+		const low = stepSequential(doc, state, lowInputs).state;
+		const highInputs = {
+			...lowInputs,
+			[clockId]: true
+		};
+		const high = stepSequential(doc, low, highInputs).state;
+		setInputs(highInputs);
+		setState(high);
+		record(high, highInputs);
+	};
+	const reset = () => {
+		setInputs(initialInputs());
+		setState(createSequentialState(doc));
+		setHistory([]);
+	};
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "sequential-lab",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Sequential logic",
+				title: title ?? selected.title,
+				description: description ?? selected.description
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsxs("strong", { children: ["tick ", state.tick] }),
+				/* @__PURE__ */ jsxs("span", { children: [
+					doc.cells.length,
+					" state element",
+					doc.cells.length === 1 ? "" : "s"
+				] }),
+				/* @__PURE__ */ jsx("span", { children: solution.valid ? "stable" : `${solution.diagnostics.length} issue(s)` })
+			] }),
+			/* @__PURE__ */ jsx(Activity.Workspace, { children: /* @__PURE__ */ jsxs(Activity.Canvas, {
+				label: "Sequential circuit state",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "sequential-signal-flow",
+					children: [
+						/* @__PURE__ */ jsxs("section", {
+							className: "sequential-bank",
+							"aria-label": "Inputs",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sequential-bank-label",
+								children: "inputs"
+							}), /* @__PURE__ */ jsx("div", {
+								className: "sequential-bit-row",
+								children: doc.inputs.filter((item) => item.id !== clockId).map((item) => /* @__PURE__ */ jsxs(Button, {
+									variant: "outline",
+									"data-active": inputs[item.id] || void 0,
+									onClick: () => toggle(item.id),
+									children: [
+										item.label ?? item.id,
+										" ",
+										/* @__PURE__ */ jsx("strong", { children: inputs[item.id] ? 1 : 0 })
+									]
+								}, item.id))
+							})]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "sequential-flow-arrow",
+							"aria-hidden": true,
+							children: "→"
+						}),
+						/* @__PURE__ */ jsxs("section", {
+							className: "sequential-bank",
+							"aria-label": "Memory",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sequential-bank-label",
+								children: "stored state"
+							}), /* @__PURE__ */ jsx("div", {
+								className: "sequential-cell-list",
+								children: doc.cells.map((cell) => /* @__PURE__ */ jsxs("div", {
+									className: "sequential-cell",
+									"data-kind": cell.kind,
+									children: [/* @__PURE__ */ jsx("span", { children: cell.kind.replaceAll("-", " ") }), /* @__PURE__ */ jsx("strong", { children: cell.kind === "fsm" ? state.machines[cell.id] : cell.kind === "counter" ? `${readUnsigned(state, cell.id)} · ${[...state.bits[cell.id] ?? []].reverse().map(Number).join("")}` : [...state.bits[cell.id] ?? []].reverse().map(Number).join("") })]
+								}, cell.id))
+							})]
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "sequential-flow-arrow",
+							"aria-hidden": true,
+							children: "→"
+						}),
+						/* @__PURE__ */ jsxs("section", {
+							className: "sequential-bank",
+							"aria-label": "Outputs",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sequential-bank-label",
+								children: "outputs"
+							}), /* @__PURE__ */ jsx("div", {
+								className: "sequential-bit-row",
+								children: doc.outputs.length ? doc.outputs.map((output) => /* @__PURE__ */ jsxs("output", {
+									className: "sequential-output",
+									"data-high": solution.outputs[output.id] || void 0,
+									children: [/* @__PURE__ */ jsx("span", { children: output.label ?? output.id }), /* @__PURE__ */ jsx("strong", { children: solution.outputs[output.id] ? 1 : 0 })]
+								}, output.id)) : /* @__PURE__ */ jsx("output", {
+									className: "sequential-output",
+									"data-high": true,
+									children: state.machines[doc.cells[0]?.id ?? ""] ?? "—"
+								})
+							})]
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "sequential-trace",
+					"aria-label": "Recent state trace",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "sequential-bank-label",
+						children: "recent edges"
+					}), history.length === 0 ? /* @__PURE__ */ jsx("p", { children: "Change an input or pulse the clock to begin the trace." }) : /* @__PURE__ */ jsx("ol", { children: history.map((sample, index) => /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsxs("span", { children: ["t", sample.tick] }), /* @__PURE__ */ jsx("strong", { children: Object.values(sample.outputs).map(Number).join("") || state.machines[doc.cells[0]?.id ?? ""] })] }, `${sample.tick}-${index}`)) })]
+				})]
+			}) }),
+			solution.diagnostics.length > 0 && /* @__PURE__ */ jsx(Activity.Feedback, { children: solution.diagnostics.map((item) => /* @__PURE__ */ jsx("span", { children: item.message }, `${item.code}-${item.nodeId}`)) }),
+			/* @__PURE__ */ jsxs(Activity.Transport, { children: [
+				/* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon",
+					onClick: reset,
+					"aria-label": "Reset simulation",
+					children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": true })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "sequential-transport-state",
+					children: clockId ? "Ready for the next clock edge" : "Inputs update this latch immediately"
+				}),
+				clockId && /* @__PURE__ */ jsxs(Button, {
+					onClick: pulse,
+					children: [/* @__PURE__ */ jsx(Clock3, { "aria-hidden": true }), " Pulse clock"]
+				})
+			] })
+		]
+	});
+}
+
+//#endregion
+export { SequentialLogicLab };

package/dist/logic/ShiftScene.d.mts

@@ -0,0 +1,17 @@
+import { ShiftSnapshot } from "./shift.mjs";
+import { ReactNode } from "react";
+
+//#region src/logic/ShiftScene.d.ts
+interface ShiftSceneProps {
+  history: ShiftSnapshot[];
+  /** Pattern the learner is trying to load, entry stage first. */
+  target?: boolean[];
+  label: string;
+}
+declare function ShiftScene({
+  history,
+  target,
+  label
+}: ShiftSceneProps): ReactNode;
+//#endregion
+export { ShiftScene, ShiftSceneProps };

package/dist/logic/ShiftScene.mjs

@@ -0,0 +1,170 @@
+'use client';
+
+import { Figure, HUE, STROKE, alpha, tint } from "../kit/figure/figure.mjs";
+import { FigText } from "../kit/figure/text.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/logic/ShiftScene.tsx
+const W = 680;
+const CELL = 54;
+const GAP = 34;
+const CHAIN_Y = 58;
+const GRID_TOP = 150;
+const ROW = 30;
+const LIVE = "var(--stage-live)";
+function ShiftScene({ history, target, label }) {
+	const now = history[history.length - 1];
+	const width = now.stages.length;
+	const x0 = (W - (width * CELL + (width - 1) * GAP)) / 2;
+	const stageX = (index) => x0 + index * 88;
+	const rows = history.slice(-6);
+	const firstShown = history.length - rows.length;
+	const gridBottom = GRID_TOP + rows.length * ROW;
+	const H = gridBottom + (target ? 56 : 24);
+	const arrow = (xa, xb, y, key, on) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+		x1: xa,
+		y1: y,
+		x2: xb - 7,
+		y2: y,
+		stroke: on ? LIVE : alpha(HUE.ink, 55),
+		strokeWidth: STROKE.edge
+	}), /* @__PURE__ */ jsx("path", {
+		d: `M${xb},${y} L${xb - 9},${y - 5} L${xb - 9},${y + 5} Z`,
+		fill: on ? LIVE : alpha(HUE.ink, 55)
+	})] }, key);
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H],
+		domain: "math",
+		label,
+		children: [
+			/* @__PURE__ */ jsx(FigText, {
+				x: x0 - 58,
+				y: 90,
+				size: "label",
+				anchor: "middle",
+				tone: "ink",
+				children: "in"
+			}),
+			arrow(x0 - 40, x0, 85, "in", !!now.fed),
+			now.stages.map((bit, index) => {
+				const x = stageX(index);
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx("rect", {
+						x,
+						y: CHAIN_Y,
+						width: CELL,
+						height: CELL,
+						rx: 6,
+						fill: bit ? tint(LIVE, 70) : alpha(HUE.soft, 8),
+						stroke: bit ? LIVE : alpha(HUE.soft, 50),
+						strokeWidth: bit ? STROKE.edge : STROKE.line
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x + CELL / 2,
+						y: 93,
+						size: "title",
+						anchor: "middle",
+						tone: "ink",
+						halo: false,
+						children: bit ? "1" : "0"
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: x + CELL / 2,
+						y1: CHAIN_Y,
+						x2: x + CELL / 2,
+						y2: CHAIN_Y - 16,
+						stroke: bit ? LIVE : alpha(HUE.soft, 60),
+						strokeWidth: STROKE.line
+					}),
+					/* @__PURE__ */ jsxs(FigText, {
+						x: x + CELL / 2,
+						y: CHAIN_Y - 22,
+						size: "note",
+						anchor: "middle",
+						tone: "soft",
+						children: ["stage ", index + 1]
+					}),
+					index < width - 1 && arrow(x + CELL, stageX(index + 1), 85, `link-${index}`, bit)
+				] }, `stage-${index}`);
+			}),
+			arrow(stageX(width - 1) + CELL, stageX(width - 1) + CELL + 40, 85, "out", !!now.out),
+			/* @__PURE__ */ jsx(FigText, {
+				x: stageX(width - 1) + CELL + 58,
+				y: 90,
+				size: "label",
+				anchor: "middle",
+				tone: "ink",
+				children: "out"
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: x0,
+				y: GRID_TOP - 12,
+				size: "note",
+				tone: "soft",
+				children: "after each clock edge"
+			}),
+			rows.map((snapshot, r) => {
+				const y = GRID_TOP + r * ROW;
+				const edge = firstShown + r;
+				const latest = r === rows.length - 1;
+				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(FigText, {
+					x: x0 - 12,
+					y: y + 19,
+					size: "note",
+					anchor: "end",
+					tone: latest ? "ink" : "soft",
+					children: edge === 0 ? "start" : `edge ${edge}, fed ${snapshot.fed ? 1 : 0}`
+				}), snapshot.stages.map((bit, index) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+					x: stageX(index) + 6,
+					y: y + 3,
+					width: CELL - 12,
+					height: ROW - 6,
+					rx: 4,
+					fill: bit ? tint(LIVE, latest ? 75 : 45) : alpha(HUE.soft, 6),
+					stroke: bit ? alpha(LIVE, latest ? 100 : 45) : alpha(HUE.soft, latest ? 45 : 25),
+					strokeWidth: STROKE.hair
+				}), /* @__PURE__ */ jsx(FigText, {
+					x: stageX(index) + CELL / 2,
+					y: y + 20,
+					size: "note",
+					anchor: "middle",
+					tone: bit ? "ink" : "soft",
+					halo: false,
+					children: bit ? "1" : "0"
+				})] }, `cell-${edge}-${index}`))] }, `row-${edge}`);
+			}),
+			target && /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(FigText, {
+				x: x0 - 12,
+				y: gridBottom + 30,
+				size: "note",
+				anchor: "end",
+				tone: "ink",
+				children: "target"
+			}), target.map((bit, index) => {
+				const match = now.stages[index] === bit;
+				return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+					x: stageX(index) + 6,
+					y: gridBottom + 12,
+					width: CELL - 12,
+					height: ROW - 6,
+					rx: 4,
+					fill: "none",
+					stroke: match ? LIVE : HUE.hot,
+					strokeWidth: STROKE.line,
+					strokeDasharray: "4 3"
+				}), /* @__PURE__ */ jsx(FigText, {
+					x: stageX(index) + CELL / 2,
+					y: gridBottom + 29,
+					size: "note",
+					anchor: "middle",
+					tone: match ? "ink" : "hot",
+					halo: false,
+					children: bit ? "1" : "0"
+				})] }, `target-${index}`);
+			})] })
+		]
+	});
+}
+
+//#endregion
+export { ShiftScene };

package/dist/logic/TimingScene.d.mts

@@ -0,0 +1,29 @@
+import { Wave } from "./timing.mjs";
+import { ReactNode } from "react";
+
+//#region src/logic/TimingScene.d.ts
+interface TimingSceneProps {
+  clock: Wave;
+  d: Wave;
+  latch: Wave;
+  flipFlop: Wave;
+  disagree: number[];
+  violations: number[];
+  /** The Q rows stay hidden until the learner has predicted. */
+  revealed: boolean;
+  onToggleD?: (slot: number) => void;
+  label: string;
+}
+declare function TimingScene({
+  clock,
+  d,
+  latch,
+  flipFlop,
+  disagree,
+  violations,
+  revealed,
+  onToggleD,
+  label
+}: TimingSceneProps): ReactNode;
+//#endregion
+export { TimingScene, TimingSceneProps };