@classytic/labs 0.1.0 → 0.3.0

package/dist/logic/LogicScene.d.mts

@@ -0,0 +1,32 @@
+import { LogicDoc } from "./contract.mjs";
+import { ReactNode } from "react";
+
+//#region src/logic/LogicScene.d.ts
+interface LogicSceneProps {
+  doc: LogicDoc;
+  /** tap an input switch to toggle it. */
+  onToggleInput?: (id: string) => void;
+  /** tap an output LED (e.g. to cycle a predicted value in a challenge). */
+  onOutputClick?: (id: string) => void;
+  /** what to show on each output (default its actual 0/1); a challenge can return '?' or a guess. */
+  outputText?: (id: string, actual: boolean) => string;
+  /** mark each output correct/incorrect/neutral (a challenge ring). */
+  outputState?: (id: string, actual: boolean) => 'ok' | 'no' | undefined;
+  /** light the signal only through this many propagation levels (step-by-step). Default: all. */
+  reveal?: number;
+  /** print 0/1 beside inputs and gates. */
+  showValues?: boolean;
+  ariaLabel?: string;
+}
+declare function LogicScene({
+  doc,
+  onToggleInput,
+  onOutputClick,
+  outputText,
+  outputState,
+  reveal,
+  showValues,
+  ariaLabel
+}: LogicSceneProps): ReactNode;
+//#endregion
+export { LogicScene, LogicSceneProps };

package/dist/logic/LogicScene.mjs

@@ -0,0 +1,333 @@
+'use client';
+
+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
+const COL = 128, ROW = 66, MX = 34, MY = 30;
+const SW_W = 50, SW_H = 26, GATE = 48, LED_R = 16;
+const NET_HUES = [
+	"oklch(0.62 0.19 255)",
+	"oklch(0.70 0.17 50)",
+	"oklch(0.62 0.20 320)",
+	"oklch(0.68 0.16 160)",
+	"oklch(0.62 0.21 25)",
+	"oklch(0.66 0.15 200)",
+	"oklch(0.64 0.18 290)",
+	"oklch(0.72 0.16 110)"
+];
+function LogicScene({ doc, onToggleInput, onOutputClick, outputText, outputState, reveal, showValues, ariaLabel = "logic circuit" }) {
+	const sol = evaluate(doc);
+	const levelOf = (id) => sol.depthOf(id);
+	const lit = (id) => sol.high(id) && (reveal === void 0 || levelOf(id) < reveal);
+	const cols = sol.levels.length;
+	const colCount = Math.max(1, ...sol.levels.map((l) => l.length), doc.outputs.length);
+	const slotC = (n, i) => (colCount - n) * ROW / 2 + i * ROW + ROW / 2;
+	const halfH = (gate) => (gate ? GATE : SW_H) / 2;
+	const raw = /* @__PURE__ */ new Map();
+	sol.levels.forEach((ids, lvl) => ids.forEach((id, i) => raw.set(id, {
+		x: MX + lvl * COL,
+		y: slotC(ids.length, i),
+		gate: lvl > 0
+	})));
+	const outRaw = doc.outputs.map((o, i) => ({
+		id: o.id,
+		y: slotC(doc.outputs.length, i)
+	}));
+	let top = Infinity, bot = -Infinity;
+	raw.forEach((p) => {
+		top = Math.min(top, p.y - halfH(p.gate));
+		bot = Math.max(bot, p.y + halfH(p.gate));
+	});
+	outRaw.forEach((o) => {
+		top = Math.min(top, o.y - LED_R);
+		bot = Math.max(bot, o.y + LED_R);
+	});
+	const vOff = MY - top;
+	const pos = /* @__PURE__ */ new Map();
+	raw.forEach((p, id) => pos.set(id, {
+		x: p.x,
+		y: p.y + vOff,
+		gate: p.gate
+	}));
+	const outX = MX + cols * COL;
+	const outY = new Map(outRaw.map((o) => [o.id, o.y + vOff]));
+	const outPort = (id) => {
+		const p = pos.get(id);
+		if (!p) return null;
+		if (!p.gate) return {
+			x: p.x + SW_W,
+			y: p.y
+		};
+		const g = doc.gates.find((q) => q.id === id);
+		return gatePorts((g && getGate(g.kind)?.glyph) ?? "AND", p.x, p.y - GATE / 2, GATE).output;
+	};
+	const W = outX + 80, H = bot - top + MY * 2;
+	const sinkPorts = /* @__PURE__ */ new Map();
+	const addSink = (src, p) => {
+		if (!src || !p) return;
+		const arr = sinkPorts.get(src) ?? [];
+		arr.push(p);
+		sinkPorts.set(src, arr);
+	};
+	for (const g of doc.gates) {
+		const p = pos.get(g.id);
+		if (!p) continue;
+		const ins = gatePorts(getGate(g.kind)?.glyph ?? "AND", p.x, p.y - GATE / 2, GATE).inputs;
+		g.in.forEach((src, k) => addSink(src, ins[k] ?? null));
+	}
+	for (const o of doc.outputs) addSink(o.in, {
+		x: outX - LED_R - 4,
+		y: outY.get(o.id) ?? MY
+	});
+	const order = /* @__PURE__ */ new Map();
+	let oi = 0;
+	doc.inputs.forEach((i) => order.set(i.id, oi++));
+	doc.gates.forEach((g) => order.set(g.id, oi++));
+	const hue = (src) => NET_HUES[(order.get(src) ?? 0) % NET_HUES.length];
+	const byCol = /* @__PURE__ */ new Map();
+	for (const src of sinkPorts.keys()) {
+		const sp = outPort(src);
+		if (!sp) continue;
+		const k = Math.round(sp.x);
+		const a = byCol.get(k) ?? [];
+		a.push(src);
+		byCol.set(k, a);
+	}
+	const trunkX = /* @__PURE__ */ new Map();
+	byCol.forEach((srcs) => {
+		srcs.sort((a, b) => (outPort(a)?.y ?? 0) - (outPort(b)?.y ?? 0));
+		srcs.forEach((src, i) => {
+			const sp = outPort(src);
+			const near = Math.min(...sinkPorts.get(src).map((s) => s.x));
+			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((all, src) => {
+		const sp = outPort(src);
+		if (!sp) return;
+		const on = lit(src), col = hue(src), tx = trunkX.get(src) ?? sp.x + 14;
+		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,
+			color: col
+		}, `e-${src}`));
+		if (hi - lo > 1) wires.push(/* @__PURE__ */ jsx(Wire, {
+			points: [[tx, lo], [tx, hi]],
+			live: on,
+			color: col
+		}, `t-${src}`));
+		list.forEach((s, i) => wires.push(/* @__PURE__ */ jsx(Wire, {
+			points: [[tx, s.y], [s.x, s.y]],
+			live: on,
+			color: col
+		}, `b-${src}-${i}`)));
+		const tap = (yy, k) => {
+			if (yy > lo + .5 && yy < hi - .5) junctions.push(/* @__PURE__ */ jsx(JunctionDot, {
+				x: tx,
+				y: yy,
+				r: 3,
+				live: on,
+				color: col
+			}, `j-${src}-${k}`));
+		};
+		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", {
+		className: "logic-scene-frame",
+		style: { "--logic-scene-width": `${W}px` },
+		children: /* @__PURE__ */ jsxs("svg", {
+			viewBox: `0 ${viewTop} ${W} ${viewBottom - viewTop}`,
+			width: "100%",
+			role: "img",
+			"aria-label": ariaLabel,
+			children: [
+				wires,
+				junctions,
+				doc.inputs.map((inp) => {
+					const p = pos.get(inp.id);
+					if (!p) return null;
+					return /* @__PURE__ */ jsxs("g", {
+						role: onToggleInput ? "button" : void 0,
+						tabIndex: onToggleInput ? 0 : void 0,
+						"aria-label": onToggleInput ? `toggle ${inp.label ?? inp.id}` : void 0,
+						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 === " ") {
+								e.preventDefault();
+								onToggleInput(inp.id);
+							}
+						} : void 0,
+						children: [/* @__PURE__ */ jsx(ToggleSwitch, {
+							x: p.x,
+							y: p.y - SW_H / 2,
+							w: SW_W,
+							h: SW_H,
+							on: sol.value(inp.id),
+							label: inp.label
+						}), 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)",
+								fontSize: 11,
+								fontWeight: 800,
+								textAnchor: "middle",
+								dominantBaseline: "central",
+								children: on ? "1" : "0"
+							});
+						})()]
+					}, inp.id);
+				}),
+				doc.gates.map((g) => {
+					const p = pos.get(g.id);
+					if (!p) return null;
+					const gl = getGate(g.kind)?.glyph ?? "AND";
+					const op = gatePorts(gl, p.x, p.y - GATE / 2, GATE).output;
+					return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx(GateGlyph, {
+						x: p.x,
+						y: p.y - GATE / 2,
+						size: GATE,
+						type: gl,
+						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)",
+						fontSize: 11,
+						fontWeight: 800,
+						textAnchor: "start",
+						dominantBaseline: "auto",
+						children: sol.value(g.id) ? "1" : "0"
+					})] }, g.id);
+				}),
+				doc.outputs.map((o) => {
+					const oy = outY.get(o.id) ?? MY;
+					const actual = sol.outputs[o.id] ?? false;
+					const st = outputState?.(o.id, actual);
+					const txt = outputText?.(o.id, actual) ?? (actual ? "1" : "0");
+					return /* @__PURE__ */ jsxs("g", {
+						role: onOutputClick ? "button" : void 0,
+						tabIndex: onOutputClick ? 0 : void 0,
+						"aria-label": onOutputClick ? `set ${o.label ?? o.id}` : void 0,
+						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 === " ") {
+								e.preventDefault();
+								onOutputClick(o.id);
+							}
+						} : void 0,
+						children: [
+							st && /* @__PURE__ */ jsx("circle", {
+								cx: outX,
+								cy: oy,
+								r: 22,
+								fill: "none",
+								stroke: st === "ok" ? "var(--stage-good)" : "var(--stage-danger, #e03131)",
+								strokeWidth: 2
+							}),
+							/* @__PURE__ */ jsx(Lamp, {
+								cx: outX,
+								cy: oy,
+								r: LED_R,
+								on: lit(o.in),
+								color: o.color,
+								label: o.label
+							}),
+							/* @__PURE__ */ jsx("text", {
+								className: "logic-svg-passive",
+								x: outX,
+								y: oy,
+								fill: lit(o.in) ? "var(--stage-bg)" : "var(--stage-fg)",
+								fontSize: 14,
+								fontWeight: 800,
+								textAnchor: "middle",
+								dominantBaseline: "central",
+								children: txt
+							})
+						]
+					}, o.id);
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { LogicScene };

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 };