@classytic/labs 0.1.0 → 0.2.0

package/dist/discrete/truth-table/preset.mjs

@@ -12,17 +12,17 @@ import { useControlSurface, useLearner } from "@classytic/stage";
 
 //#region src/discrete/truth-table/preset.tsx
 /**
-* TruthTableEngine — the GENERAL authorable truth-table tool. A creator declares
+* TruthTableEngine, the GENERAL authorable truth-table tool. A creator declares
 * any propositional formula (¬ ∧ ∨ ⊕ → ↔, unicode or ASCII) and a mode; the lab
 * derives EVERYTHING from the stage logic kernel (parse → truth table → classify
-* → equivalence). No per-problem widget — one tool covers all of propositional
+* → equivalence). No per-problem widget, one tool covers all of propositional
 * logic, from "fill the implication table" to "are these two equivalent?".
 *
 * Modes:
-*   • show     — full reference table with sub-expression columns built up
+*   • show    , full reference table with sub-expression columns built up
 *                textbook-style (vars → ¬p → q∧r → … → the whole formula).
-*   • fill     — learner toggles each output cell, then Check (graded per cell).
-*   • classify — learner judges tautology / contradiction / contingency.
+*   • fill    , learner toggles each output cell, then Check (graded per cell).
+*   • classify, learner judges tautology / contradiction / contingency.
 * Pass `compare` to put a second formula beside the first + an equivalence verdict
 * (De Morgan, contrapositive, p→q ≡ ¬p∨q …). Agent-drivable via `controlId`.
 */
@@ -31,6 +31,8 @@ const CLASSES = [
 	"contradiction",
 	"contingency"
 ];
+/** 2^n rows: past this a truth table is impractical to render and unsafe for 32-bit shifts. */
+const MAX_VARS = 12;
 /** Sub-expressions in build-up (post-order) order, deduped, vars/consts excluded;
 *  the root formula is last. */
 function subformulas(n) {
@@ -83,8 +85,9 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 		cmp
 	]);
 	const envs = useMemo(() => {
+		if (vars.length > MAX_VARS) return [];
 		const rows = [];
-		for (let m = 0; m < 1 << vars.length; m++) {
+		for (let m = 0; m < 2 ** vars.length; m++) {
 			const env = {};
 			vars.forEach((v, i) => {
 				env[v] = (m & 1 << vars.length - 1 - i) !== 0;
@@ -201,6 +204,26 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 			]
 		})
 	});
+	if (vars.length > MAX_VARS) return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "lab-misconception",
+			role: "status",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					children: "⚠"
+				}),
+				" This truth table has ",
+				vars.length,
+				" variables (",
+				2 ** vars.length,
+				" rows). Keep it to ",
+				MAX_VARS,
+				" or fewer."
+			]
+		})
+	});
 	const th = {
 		padding: "6px 12px",
 		fontWeight: 700,
@@ -381,7 +404,7 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 			className: "lab-bar",
 			children: /* @__PURE__ */ jsx(StatusPill, {
 				ok: equiv,
-				children: equiv ? "Equivalent ✓ — identical columns" : "NOT equivalent — columns differ"
+				children: equiv ? "Equivalent ✓, identical columns" : "NOT equivalent, columns differ"
 			})
 		})
 	] });
@@ -419,7 +442,7 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 				}),
 				checked && /* @__PURE__ */ jsx(StatusPill, {
 					ok: guess === cls,
-					children: guess === cls ? `✓ ${cls}` : `Not quite — it’s a ${cls}`
+					children: guess === cls ? `✓ ${cls}` : `Not quite, it’s a ${cls}`
 				})
 			] }),
 			!compare && mode === "fill" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CheckButton, {
@@ -428,7 +451,7 @@ function TruthTableLab({ formula, compare, mode: mode0 = "fill", breakdown = tru
 				children: "Check"
 			}), checked && /* @__PURE__ */ jsx(StatusPill, {
 				ok: allFilledCorrect,
-				children: allFilledCorrect ? "All correct ✓" : "Some cells are off — fix the red ones"
+				children: allFilledCorrect ? "All correct ✓" : "Some cells are off, fix the red ones"
 			})] })
 		] }),
 		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [!compare && mode !== "show" && /* @__PURE__ */ jsx(RevealSolution, {

package/dist/discrete/venn/preset.mjs

@@ -10,14 +10,14 @@ import { compileLogic, useControlSurface, useLearner } from "@classytic/stage";
 
 //#region src/discrete/venn/preset.tsx
 /**
-* VennSetBoard — the GENERAL sets + inclusion–exclusion tool (2 or 3 sets). The
+* VennSetBoard, the GENERAL sets + inclusion–exclusion tool (2 or 3 sets). The
 * creator declares set MEMBERS; the lab places each element in its true region,
 * shows live region counts, and (explore) the inclusion–exclusion breakdown
-* |A∪B| = |A| + |B| − |A∩B| — the "overcount, then correct" spine made visible.
+* |A∪B| = |A| + |B| − |A∩B|, the "overcount, then correct" spine made visible.
 *
 * The trinity made literal: a SET expression is a PROPOSITIONAL formula over
 * membership (∩↔∧, ∪↔∨, ᶜ↔¬), so "shade the region for A ∩ ¬B" runs on the SAME
-* `compileLogic` kernel as the truth-table lab — one source of truth.
+* `compileLogic` kernel as the truth-table lab, one source of truth.
 *
 * Self-contained SVG (a fixed diagram, not a coordinate plot), so no Stage coords
 * needed; counts/IE come from `@classytic/labs/discrete/core`.
@@ -27,77 +27,77 @@ const GEO2 = {
 		0,
 		0,
 		340,
-		210
+		224
 	],
 	circles: [{
 		cx: 132,
-		cy: 108,
-		r: 84
+		cy: 118,
+		r: 82
 	}, {
 		cx: 208,
-		cy: 108,
-		r: 84
+		cy: 118,
+		r: 82
 	}],
 	centroids: {
-		"10": [78, 108],
-		"01": [262, 108],
-		"11": [170, 108],
-		"00": [38, 26]
+		"10": [80, 118],
+		"01": [260, 118],
+		"11": [170, 118],
+		"00": [40, 30]
 	},
 	labels: [{
-		x: 70,
-		y: 22
+		x: 104,
+		y: 26
 	}, {
-		x: 270,
-		y: 22
+		x: 236,
+		y: 26
 	}]
 };
 const GEO3 = {
 	vb: [
 		0,
 		0,
-		340,
-		260
+		360,
+		306
 	],
 	circles: [
 		{
-			cx: 132,
-			cy: 102,
-			r: 80
+			cx: 140,
+			cy: 116,
+			r: 78
 		},
 		{
-			cx: 208,
-			cy: 102,
-			r: 80
+			cx: 220,
+			cy: 116,
+			r: 78
 		},
 		{
-			cx: 170,
-			cy: 168,
-			r: 80
+			cx: 180,
+			cy: 186,
+			r: 78
 		}
 	],
 	centroids: {
-		"100": [96, 78],
-		"010": [244, 78],
-		"001": [170, 210],
-		"110": [170, 66],
-		"101": [116, 144],
-		"011": [224, 144],
-		"111": [170, 118],
-		"000": [38, 28]
+		"100": [104, 96],
+		"010": [256, 96],
+		"001": [180, 232],
+		"110": [180, 84],
+		"101": [132, 162],
+		"011": [228, 162],
+		"111": [180, 140],
+		"000": [44, 30]
 	},
 	labels: [
 		{
-			x: 78,
-			y: 20
+			x: 104,
+			y: 30
 		},
 		{
-			x: 262,
-			y: 20
+			x: 256,
+			y: 30
 		},
 		{
-			x: 170,
-			y: 252
+			x: 180,
+			y: 296
 		}
 	]
 };
@@ -274,6 +274,23 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 			invoke: reset
 		}
 	});
+	if (n < 2 || n > 3) return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "lab-misconception",
+			role: "status",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					children: "⚠"
+				}),
+				" The Venn lab supports 2 or 3 sets; you gave ",
+				n,
+				". Reduce the number of sets."
+			]
+		})
+	});
 	const [vx, vy, vw, vh] = geo.vb;
 	const showShade = mode === "shade";
 	const figure = /* @__PURE__ */ jsx("div", {
@@ -307,10 +324,10 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 					cy: c.cy,
 					r: c.r,
 					fill: PALETTE[i],
-					fillOpacity: .06,
-					stroke: "var(--stage-fg)",
-					strokeOpacity: .5,
-					strokeWidth: 1.5
+					fillOpacity: .09,
+					stroke: PALETTE[i],
+					strokeOpacity: .7,
+					strokeWidth: 2
 				}, i)),
 				geo.labels.map((l, i) => /* @__PURE__ */ jsx("text", {
 					x: l.x,
@@ -319,20 +336,26 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 					fontSize: 15,
 					fontWeight: 800,
 					textAnchor: "middle",
+					style: {
+						paintOrder: "stroke",
+						stroke: "var(--stage-bg)",
+						strokeWidth: 4,
+						strokeLinejoin: "round"
+					},
 					children: names[i]
 				}, i)),
 				mode === "explore" && regions.filter((r) => r.count > 0 && r.sig !== "0".repeat(n)).map((r) => /* @__PURE__ */ jsx("text", {
 					x: r.centroid[0],
 					y: r.centroid[1],
 					fill: "var(--stage-fg)",
-					fontSize: 15,
+					fontSize: 16,
 					fontWeight: 700,
 					textAnchor: "middle",
 					dominantBaseline: "central",
 					style: {
 						paintOrder: "stroke",
 						stroke: "var(--stage-bg)",
-						strokeWidth: 4,
+						strokeWidth: 4.5,
 						strokeLinejoin: "round"
 					},
 					children: r.count
@@ -441,7 +464,7 @@ function VennSetBoardLab({ sets, mode: mode0 = "explore", target, title = "Sets
 			}),
 			checked && /* @__PURE__ */ jsx(StatusPill, {
 				ok: correct,
-				children: correct ? "✓ Exactly right" : "Not quite — adjust the regions"
+				children: correct ? "✓ Exactly right" : "Not quite, adjust the regions"
 			})
 		] }) : void 0,
 		footer: /* @__PURE__ */ jsxs(Fragment$1, { children: [mode === "shade" && /* @__PURE__ */ jsx(RevealSolution, {

package/dist/geography/cycle-lab/preset.mjs

@@ -10,15 +10,15 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/geography/cycle-lab/preset.tsx
 /**
-* CycleLab — ONE authorable lab for every cycle (water, rock, carbon, nitrogen,
+* CycleLab, ONE authorable lab for every cycle (water, rock, carbon, nitrogen,
 * food chains…). The creator/agent declares the model (nodes + process-labelled
 * edges) and a challenge; the shared CycleDiagram renders it. Not a bespoke
-* WaterCycle/RockCycle widget — the cycle is data.
+* WaterCycle/RockCycle widget, the cycle is data.
 *
-*  • challenge='trace' — click a stage; its outgoing arrows + the processes that
+*  • challenge='trace', click a stage; its outgoing arrows + the processes that
 *    drive them light up. The branched rock/carbon cycles reveal that you don't
-*    have to go all the way around — any rock can melt or re-weather.
-*  • challenge='label-process' — the process names are stripped off the arrows
+*    have to go all the way around, any rock can melt or re-weather.
+*  • challenge='label-process', the process names are stripped off the arrows
 *    into a tray; match each one to the transition it drives. That IS the IGCSE
 *    skill, and it's unambiguous (clean rings like the water cycle).
 *
@@ -81,7 +81,7 @@ function TraceCycle({ nodes, edges, size, title, prompt, objectives, activity })
 			size,
 			activeId: active,
 			onNodeClick: click,
-			ariaLabel: `${title} — click a stage to trace its transitions`
+			ariaLabel: `${title}: a cycle diagram with ${nodes.length} stages (${nodes.map((nd) => nd.label).join(", ")}) connected by labelled process arrows. Activate a stage to trace its outgoing transitions and the processes that drive them.`
 		})
 	}), /* @__PURE__ */ jsx(LiveRegion, { children: active ? `${labelOf(active)} leads to ${out.map((e) => `${labelOf(e.to)} by ${e.label}`).join(", ") || "nothing further"}.` : "" })] });
 	const footer = /* @__PURE__ */ jsxs("div", {
@@ -101,7 +101,7 @@ function TraceCycle({ nodes, edges, size, title, prompt, objectives, activity })
 				/* @__PURE__ */ jsxs("span", {
 					style: { color: "var(--stage-muted)" },
 					children: [
-						" —",
+						" , ",
 						e.label,
 						"→ "
 					]
@@ -126,7 +126,7 @@ function TraceCycle({ nodes, edges, size, title, prompt, objectives, activity })
 	});
 	return /* @__PURE__ */ jsx(LabFrame, {
 		title,
-		prompt: prompt ?? "Click each stage to trace where it goes — and which process drives the change.",
+		prompt: prompt ?? "Click each stage to trace where it goes, and which process drives the change.",
 		objectives,
 		footer,
 		children: figure
@@ -171,9 +171,16 @@ function LabelProcess({ nodes, edges, size, title, prompt, objectives, hash: h,
 		const fill = ok ? "var(--stage-good)" : bad ? "var(--stage-danger)" : "var(--stage-muted)";
 		return /* @__PURE__ */ jsxs("g", {
 			onClick: () => onSlot(key),
+			onKeyDown: (e) => {
+				if (e.key === "Enter" || e.key === " ") {
+					e.preventDefault();
+					onSlot(key);
+				}
+			},
 			style: { cursor: "pointer" },
 			role: "button",
-			"aria-label": val ? `${val}${ok ? " correct" : " wrong"}` : "empty slot",
+			tabIndex: 0,
+			"aria-label": val ? `${val}, ${ok ? "correctly matched, activate to take it back" : "incorrect, activate to clear"}` : sel ? `Empty process slot, activate to place ${sel} here` : "Empty process slot, pick a process first, then activate to place it here",
 			children: [/* @__PURE__ */ jsx("rect", {
 				x: Math.round(mid.x - w / 2),
 				y: mid.y - 10,
@@ -207,7 +214,7 @@ function LabelProcess({ nodes, edges, size, title, prompt, objectives, hash: h,
 			edges,
 			size,
 			edgeSlot,
-			ariaLabel: `${title} — match each process to its arrow`
+			ariaLabel: `${title}: a cycle diagram with ${nodes.length} stages (${nodes.map((nd) => nd.label).join(", ")}) and ${labelEdges.length} arrows whose process labels have been removed. Pick a process from the tray, then activate the arrow slot it drives to match it.`
 		})
 	}), /* @__PURE__ */ jsx(LiveRegion, { children: solved ? "All processes matched correctly." : `${solvedCount} of ${labelEdges.length} processes matched.` })] });
 	const controls = /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {

package/dist/geography/cycles.d.mts

@@ -5,11 +5,11 @@ interface CycleSpec {
   nodes: CycleNode[];
   edges: CycleEdge[];
 }
-/** Water cycle — a clean 5-stage ring; each edge is one distinct process. */
+/** Water cycle, a clean 5-stage ring; each edge is one distinct process. */
 declare const WATER_CYCLE: CycleSpec;
-/** Rock cycle — a ring PLUS shortcuts: any rock can skip ahead (heat, re-weather). */
+/** Rock cycle, a ring PLUS shortcuts: any rock can skip ahead (heat, re-weather). */
 declare const ROCK_CYCLE: CycleSpec;
-/** Carbon cycle — branched (CO₂ in/out by several routes); ties to photo/respiration. */
+/** Carbon cycle, branched (CO₂ in/out by several routes); ties to photo/respiration. */
 declare const CARBON_CYCLE: CycleSpec;
 declare const CYCLE_PRESETS: {
   readonly water: CycleSpec;

package/dist/geography/cycles.mjs

@@ -1,5 +1,5 @@
 //#region src/geography/cycles.ts
-/** Water cycle — a clean 5-stage ring; each edge is one distinct process. */
+/** Water cycle, a clean 5-stage ring; each edge is one distinct process. */
 const WATER_CYCLE = {
 	nodes: [
 		{
@@ -56,7 +56,7 @@ const WATER_CYCLE = {
 		}
 	]
 };
-/** Rock cycle — a ring PLUS shortcuts: any rock can skip ahead (heat, re-weather). */
+/** Rock cycle, a ring PLUS shortcuts: any rock can skip ahead (heat, re-weather). */
 const ROCK_CYCLE = {
 	nodes: [
 		{
@@ -123,7 +123,7 @@ const ROCK_CYCLE = {
 		}
 	]
 };
-/** Carbon cycle — branched (CO₂ in/out by several routes); ties to photo/respiration. */
+/** Carbon cycle, branched (CO₂ in/out by several routes); ties to photo/respiration. */
 const CARBON_CYCLE = {
 	nodes: [
 		{

package/dist/geometry/board/preset.d.mts

@@ -55,6 +55,7 @@ interface GeometryBoardProps {
   scene?: GeoElement[];
   view?: View;
   title?: string;
+  prompt?: string;
   subtitle?: string;
   height?: number;
 }
@@ -65,6 +66,7 @@ declare function GeometryBoard({
   scene,
   view,
   title,
+  prompt,
   height
 }: GeometryBoardProps): ReactNode;
 //#endregion

package/dist/geometry/board/preset.mjs

@@ -1,16 +1,17 @@
 'use client';
 
+import { LabFrame } from "../../kit/frame.mjs";
 import { useEffect, useMemo, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Scene } from "@classytic/stage";
 
 //#region src/geometry/board/preset.tsx
 /**
-* GeometryBoard — a declarative interactive-geometry engine, now on the
+* GeometryBoard, a declarative interactive-geometry engine, now on the
 * @classytic/stage scene model. A creator describes a CONSTRUCTION as a list of
 * `GeoElement`s; we convert it to a portable SceneDoc and let stage's resolver
 * do the dependency math (circle/line intersection, midpoints) + dragging +
-* a11y. The canvas geometry math is gone — stage already owns it.
+* a11y. The canvas geometry math is gone, stage already owns it.
 *
 *   <GeometryBoard scene={[
 *     { type:'point', id:'A', x:3, y:0, draggable:true },
@@ -118,29 +119,24 @@ function geoSceneToDoc(scene, view) {
 		bindings: []
 	};
 }
-function GeometryBoard({ scene = [], view = DEFAULT_VIEW, title, height = 360 }) {
+function GeometryBoard({ scene = [], view = DEFAULT_VIEW, title = "Geometry construction", prompt = "Drag the points to explore the construction.", height = 360 }) {
 	const initial = useMemo(() => geoSceneToDoc(scene, view), [scene, view]);
 	const [doc, setDoc] = useState(initial);
 	useEffect(() => {
 		setDoc(initial);
 	}, [initial]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "not-prose",
-		children: [title && /* @__PURE__ */ jsx("p", {
-			style: {
-				fontWeight: 600,
-				marginBottom: 6
-			},
-			children: title
-		}), /* @__PURE__ */ jsx(Scene, {
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		children: /* @__PURE__ */ jsx(Scene, {
 			doc,
 			onChange: setDoc,
 			interactive: true,
 			showGrid: true,
 			showAxes: true,
 			height,
-			ariaLabel: title ?? "Geometry construction"
-		})]
+			ariaLabel: title
+		})
 	});
 }
 

package/dist/geometry/builder.mjs

@@ -7,7 +7,7 @@ import { Axes, Dot, Grid, Stage, ToolIcon, isCircleVal, isLineVal, isVec2, rende
 
 //#region src/geometry/builder.tsx
 /**
-* GeometryBuilder — a visual, click-to-build editor for a `GeometryBoard` scene.
+* GeometryBuilder, a visual, click-to-build editor for a `GeometryBoard` scene.
 *
 * Pick a tool, click the board: drop points, connect them into segments/lines,
 * draw circles (centre → through-point), mark the intersection of two
@@ -16,7 +16,7 @@ import { Axes, Dot, Grid, Stage, ToolIcon, isCircleVal, isLineVal, isVec2, rende
 *
 * Now on the @classytic/stage engine: the construction is converted to a SceneDoc
 * and rendered with stage's resolver + `renderElements` (SVG, accessible, real
-* draggable points) — the canvas geometry math is gone. `GeometryBoard` is the
+* draggable points), the canvas geometry math is gone. `GeometryBoard` is the
 * read-only render of this editor's output.
 */
 const TOOLS = [
@@ -303,7 +303,7 @@ function GeometryBuilder({ scene = [], onChange, title = "Build a construction",
 				view: VIEW,
 				height,
 				onPointerMath: onBuild,
-				ariaLabel: `Geometry construction editor — ${tool} tool`,
+				ariaLabel: `Geometry construction editor, ${tool} tool`,
 				className: "cursor-crosshair",
 				children: [
 					/* @__PURE__ */ jsx(Grid, {}),

package/dist/ict/number-systems/base-odometer.mjs

@@ -11,11 +11,11 @@ import { useInView } from "@classytic/stage";
 
 //#region src/ict/number-systems/base-odometer.tsx
 /**
-* BaseOdometer — the same quantity, ticking in every base at once.
+* BaseOdometer, the same quantity, ticking in every base at once.
 *
 * Stacked odometer rows (one per base) all driven by ONE shared integer:
-* increment it and binary/octal/decimal/hex roll in lockstep — the binary row
-* rolls fastest (the rightmost-bit frequency cascade), hex barely moves — so
+* increment it and binary/octal/decimal/hex roll in lockstep, the binary row
+* rolls fastest (the rightmost-bit frequency cascade), hex barely moves, so
 * "base is a costume, not a different number" is something you watch, not read.
 * A race toggle auto-counts via the frame loop so the cascade plays as motion.
 * Composes the shared WheelRow (DRY: the wheel + carry animation live in one place).
@@ -31,7 +31,7 @@ function BaseOdometerLab({ bases = [
 	8,
 	10,
 	16
-], width = "auto", start = 0, max = 255, race = false, speed = 2, highlightBase, target, title = "Base odometer", prompt = "One quantity, every base at once — +1 and watch them all roll.", objectives }) {
+], width = "auto", start = 0, max = 255, race = false, speed = 2, highlightBase, target, title = "Base odometer", prompt = "One quantity, every base at once: +1 and watch them all roll.", objectives }) {
 	const [value, setValue] = useState(Math.max(0, Math.min(max, Math.floor(start))));
 	const [racing, setRacing] = useState(race);
 	const acc = useRef(0);

package/dist/ict/number-systems/bit-grouper.d.mts

@@ -7,7 +7,7 @@ interface BitGrouperProps {
   /** Group sizes offered as chips (4 = hex, 3 = octal). */
   groupings?: number[];
   start?: number;
-  /** Pose "build this value" — reports via the learner seam when matched. */
+  /** Pose "build this value", reports via the learner seam when matched. */
   target?: {
     value: number;
     base: 16 | 8 | 2;

package/dist/ict/number-systems/bit-grouper.mjs

@@ -9,10 +9,10 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ict/number-systems/bit-grouper.tsx
 /**
-* BitGrouper — slice a byte into nibbles and read the hex.
+* BitGrouper, slice a byte into nibbles and read the hex.
 *
 * A strip of tappable bits that auto-slices into groups of k FROM THE RIGHT
-* (4 for hex, 3 for octal), translating each group to a hex/octal digit live —
+* (4 for hex, 3 for octal), translating each group to a hex/octal digit live , 
 * the "group the bits" trick made physical. Flip between hex and octal to watch
 * the SAME bits re-slice and the leftmost group pad with zeros; in octal the top
 * group of a byte never exceeds 3 (greyed), which is exactly why hex won.
@@ -42,7 +42,7 @@ function sliceFromRight(value, width, k) {
 	}
 	return groups;
 }
-function BitGrouperLab({ width = 8, groupSize = 4, groupings = [4, 3], start = 0, target, showColor = false, title = "Bit grouper", prompt = "Tap the bits. Group from the right — 4 per hex digit, 3 per octal digit.", objectives }) {
+function BitGrouperLab({ width = 8, groupSize = 4, groupings = [4, 3], start = 0, target, showColor = false, title = "Bit grouper", prompt = "Tap the bits. Group from the right: 4 per hex digit, 3 per octal digit.", objectives }) {
 	const cap = (1 << width) - 1;
 	const [value, setValue] = useState(Math.max(0, Math.min(cap, Math.floor(start))));
 	const [k, setK] = useState(groupSize);
@@ -135,7 +135,7 @@ function BitGrouperLab({ width = 8, groupSize = 4, groupings = [4, 3], start = 0
 				children: [
 					"the greyed top octal group is only ",
 					width % k,
-					" bits — it never passes ",
+					" bits, it never passes ",
 					(1 << width % k) - 1,
 					", so octal wastes the top of a byte (why hex won)"
 				]

package/dist/ict/number-systems/place-value-dial.d.mts

@@ -5,7 +5,7 @@ interface PlaceValueDialProps {
   base?: number;
   width?: number;
   start?: number;
-  /** Pose "spin the dials to N" — reports via the learner seam when matched. */
+  /** Pose "spin the dials to N", reports via the learner seam when matched. */
   target?: number;
   /** Base chips the learner can switch between (re-bases the same value). */
   bases?: number[];

package/dist/ict/number-systems/place-value-dial.mjs

@@ -10,13 +10,13 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/ict/number-systems/place-value-dial.tsx
 /**
-* PlaceValueDial — count in any base and watch the carry ripple.
+* PlaceValueDial, count in any base and watch the carry ripple.
 *
 * A row of odometer wheels in base-N. +1 ticks the ones wheel; when it passes
-* N−1 it snaps to 0 and KICKS the next wheel up — the carry ripples left while
+* N−1 it snaps to 0 and KICKS the next wheel up, the carry ripples left while
 * the power-of-N place values light up and sum to the live value. Re-base the
 * SAME count with the base chips to see "10 in any base means you ticked over
-* the base exactly once". In base-2 the wheels become ON/OFF cells — the
+* the base exactly once". In base-2 the wheels become ON/OFF cells, the
 * "lightbulbs worth 1-2-4-8-16" picture. (Anti-pattern guard: weights stay on
 * screen, the carry is shown not hidden, and it works in both directions.)
 */

package/dist/ict/number-systems/wheel.d.mts

@@ -12,7 +12,7 @@ interface DigitWheelProps {
   digit: number;
   /** 0 (settled) → 1 (just changed); slides the digit stack while it decays. */
   roll?: number;
-  /** +1 counted up, −1 counted down — direction the wheel rolls. */
+  /** +1 counted up, −1 counted down, direction the wheel rolls. */
   dir?: number;
   /** Non-zero digits read as "active" (accent); a zero is muted. */
   active?: boolean;
@@ -32,7 +32,7 @@ declare function DigitWheel({
   onTap,
   ariaLabel
 }: DigitWheelProps): ReactNode;
-/** A binary ON/OFF cell — the "lightbulb worth 2^n" picture for base-2 mode. */
+/** A binary ON/OFF cell, the "lightbulb worth 2^n" picture for base-2 mode. */
 declare function BitCell({
   on,
   onTap,
@@ -56,7 +56,7 @@ interface WheelRowProps {
 }
 /**
  * A row of odometer wheels (or bit cells) for `value` in `base`, with the
- * carry-ripple roll animation OWNED here — the single reusable place-value
+ * carry-ripple roll animation OWNED here, the single reusable place-value
  * primitive both PlaceValueDial and BaseOdometer compose, so the animation +
  * weight rendering live in exactly one spot.
  */