@classytic/labs 0.1.0

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

@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+
+//#region src/ict/number-systems/bit-grouper.d.ts
+interface BitGrouperProps {
+  width?: number;
+  groupSize?: number;
+  /** Group sizes offered as chips (4 = hex, 3 = octal). */
+  groupings?: number[];
+  start?: number;
+  /** Pose "build this value" — reports via the learner seam when matched. */
+  target?: {
+    value: number;
+    base: 16 | 8 | 2;
+  };
+  showColor?: boolean;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function BitGrouperLab({
+  width,
+  groupSize,
+  groupings,
+  start,
+  target,
+  showColor,
+  title,
+  prompt,
+  objectives
+}: BitGrouperProps): ReactNode;
+//#endregion
+export { BitGrouperLab, BitGrouperProps };

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

@@ -0,0 +1,190 @@
+'use client';
+
+import { Chip, StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { BitCell, digitChar } from "./wheel.mjs";
+import { useState } from "react";
+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.
+*
+* 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 —
+* 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.
+*/
+function sliceFromRight(value, width, k) {
+	const nGroups = Math.ceil(width / k);
+	const groups = [];
+	for (let g = nGroups - 1; g >= 0; g--) {
+		const startPos = g * k;
+		const bitsInGroup = Math.min(k, width - startPos);
+		let digit = 0;
+		const cells = [];
+		for (let b = bitsInGroup - 1; b >= 0; b--) {
+			const pos = startPos + b;
+			const bit = value >> pos & 1;
+			digit += bit << b;
+			cells.push({
+				pos,
+				bit
+			});
+		}
+		groups.push({
+			digit,
+			cells,
+			full: bitsInGroup === 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 }) {
+	const cap = (1 << width) - 1;
+	const [value, setValue] = useState(Math.max(0, Math.min(cap, Math.floor(start))));
+	const [k, setK] = useState(groupSize);
+	const groups = sliceFromRight(value, width, k);
+	const radix = k === 4 ? 16 : k === 3 ? 8 : 2;
+	const prefix = radix === 16 ? "0x" : radix === 8 ? "0o" : "0b";
+	const hasPartial = groups.some((g) => !g.full);
+	const toggle = (pos) => setValue((x) => x ^ 1 << pos);
+	const solved = target != null && value === target.value;
+	useCheckpoint({
+		solved,
+		activity: "bit-grouper"
+	});
+	const bitStr = value.toString(2).padStart(width, "0");
+	const digitStr = groups.map((g) => digitChar(g.digit)).join("");
+	const swatch = `rgb(${value & 255}, ${value >> 3 & 255 || value & 255}, ${value >> 5 & 255 || value & 255})`;
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		style: {
+			borderRadius: 14,
+			background: "var(--stage-bg)",
+			border: "1px solid var(--stage-grid)",
+			padding: "18px 14px"
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					gap: 16,
+					justifyContent: "center",
+					alignItems: "flex-start",
+					flexWrap: "wrap"
+				},
+				children: groups.map((g, gi) => /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						gap: 6
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							gap: 5,
+							padding: "6px",
+							borderRadius: 9,
+							background: g.full ? "transparent" : "color-mix(in oklab, var(--stage-muted) 14%, transparent)",
+							border: "1px dashed var(--stage-grid)"
+						},
+						children: g.cells.map((c) => /* @__PURE__ */ jsx(BitCell, {
+							on: c.bit === 1,
+							onTap: () => toggle(c.pos),
+							ariaLabel: `bit ${c.pos}, ${c.bit ? "on" : "off"}`
+						}, c.pos))
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: 26,
+							fontWeight: 800,
+							color: g.full ? "var(--stage-accent)" : "var(--stage-muted)",
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: digitChar(g.digit)
+					})]
+				}, gi))
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				style: {
+					textAlign: "center",
+					marginTop: 12,
+					fontSize: 15,
+					fontWeight: 700,
+					fontVariantNumeric: "tabular-nums",
+					color: "var(--stage-fg)"
+				},
+				children: [
+					"0b",
+					bitStr,
+					" = ",
+					prefix,
+					digitStr,
+					" = ",
+					value
+				]
+			}),
+			radix === 8 && hasPartial && /* @__PURE__ */ jsxs("p", {
+				style: {
+					textAlign: "center",
+					fontSize: 12,
+					color: "var(--stage-muted)"
+				},
+				children: [
+					"the greyed top octal group is only ",
+					width % k,
+					" bits — it never passes ",
+					(1 << width % k) - 1,
+					", so octal wastes the top of a byte (why hex won)"
+				]
+			}),
+			showColor && /* @__PURE__ */ jsx("div", {
+				style: {
+					display: "flex",
+					justifyContent: "center",
+					marginTop: 10
+				},
+				children: /* @__PURE__ */ jsx("span", {
+					style: {
+						width: 64,
+						height: 24,
+						borderRadius: 6,
+						background: swatch,
+						border: "1px solid var(--stage-grid)"
+					},
+					"aria-label": "the bits as a colour swatch"
+				})
+			})
+		]
+	}), /* @__PURE__ */ jsx(LiveRegion, { children: `${prefix}${digitStr}, decimal ${value}` })] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		controls: /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+			label: "group by",
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "inline-flex",
+					gap: 6,
+					alignItems: "center"
+				},
+				children: groupings.map((gs) => /* @__PURE__ */ jsx(Chip, {
+					selected: gs === k,
+					onClick: () => setK(gs),
+					children: gs === 4 ? "4 → hex" : gs === 3 ? "3 → octal" : String(gs)
+				}, gs))
+			})
+		}) }),
+		footer: target != null ? /* @__PURE__ */ jsx(StatusPill, {
+			ok: solved,
+			children: solved ? "✓ Matches the target" : `Build ${target.base === 16 ? "0x" : target.base === 8 ? "0o" : "0b"}${target.value.toString(target.base).toUpperCase()}`
+		}) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { BitGrouperLab };

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

@@ -0,0 +1,4 @@
+import { PlaceValueDialLab, PlaceValueDialProps } from "./place-value-dial.mjs";
+import { BitGrouperLab, BitGrouperProps } from "./bit-grouper.mjs";
+import { BaseOdometerLab, BaseOdometerProps } from "./base-odometer.mjs";
+import { BitCell, DigitWheel, WheelRow, WheelRowProps, digitChar, maxValue, toDigits } from "./wheel.mjs";

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

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+
+//#region src/ict/number-systems/place-value-dial.d.ts
+interface PlaceValueDialProps {
+  base?: number;
+  width?: number;
+  start?: number;
+  /** 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[];
+  showWeights?: boolean;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function PlaceValueDialLab({
+  base: base0,
+  width,
+  start,
+  target,
+  bases,
+  showWeights,
+  title,
+  prompt,
+  objectives
+}: PlaceValueDialProps): ReactNode;
+//#endregion
+export { PlaceValueDialLab, PlaceValueDialProps };

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

@@ -0,0 +1,153 @@
+'use client';
+
+import { Tex } from "../../core/tex.mjs";
+import { Chip, StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { WheelRow, digitChar, maxValue, toDigits } from "./wheel.mjs";
+import { useState } from "react";
+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.
+*
+* 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
+* 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
+* "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.)
+*/
+function PlaceValueDialLab({ base: base0 = 2, width = 4, start = 0, target, bases = [
+	2,
+	8,
+	10,
+	16
+], showWeights = true, title = "Place-value dial", prompt = "Press +1 and watch the carry ripple left.", objectives }) {
+	const [base, setBase] = useState(base0);
+	const [value, setValue] = useState(Math.max(0, Math.floor(start)));
+	const cap = maxValue(base, width);
+	const v = Math.min(value, cap);
+	const digits = toDigits(v, base, width);
+	const solved = target != null && v === target;
+	useCheckpoint({
+		solved,
+		activity: "place-value-dial"
+	});
+	const bump = (delta) => setValue((x) => Math.max(0, Math.min(cap, x + delta)));
+	const cycleDigit = (i) => {
+		const place = width - 1 - i;
+		const weight = Math.pow(base, place);
+		const cur = digits[i] ?? 0;
+		const next = (cur + 1) % base;
+		setValue((x) => Math.max(0, Math.min(cap, x + (next - cur) * weight)));
+	};
+	const cells = base === 2;
+	const terms = digits.map((d, i) => ({
+		d,
+		place: width - 1 - i,
+		weight: Math.pow(base, width - 1 - i)
+	})).filter((t) => t.d !== 0);
+	const sumTex = terms.length ? terms.map((t) => `${digitChar(t.d)} \\cdot ${t.weight}`).join(" + ") + ` = ${v}` : `0 = ${v}`;
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		style: {
+			borderRadius: 14,
+			background: "var(--stage-bg)",
+			border: "1px solid var(--stage-grid)",
+			padding: "18px 14px"
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			style: {
+				display: "flex",
+				justifyContent: "center"
+			},
+			children: /* @__PURE__ */ jsx(WheelRow, {
+				value: v,
+				base,
+				width,
+				cells,
+				showWeights,
+				onTapDigit: cycleDigit
+			})
+		}), showWeights && /* @__PURE__ */ jsx("p", {
+			style: {
+				textAlign: "center",
+				marginTop: 14,
+				fontSize: 14,
+				fontWeight: 600,
+				fontVariantNumeric: "tabular-nums",
+				color: "var(--stage-fg)"
+			},
+			children: /* @__PURE__ */ jsx(Tex, { tex: sumTex })
+		})]
+	}), /* @__PURE__ */ jsx(LiveRegion, { children: `${v} in base ${base} is ${digits.map(digitChar).join("")}` })] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
+			label: "count",
+			value: /* @__PURE__ */ jsxs("span", {
+				style: { fontVariantNumeric: "tabular-nums" },
+				children: [
+					v,
+					" = ",
+					digits.map(digitChar).join(""),
+					/* @__PURE__ */ jsx("sub", { children: base })
+				]
+			}),
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					gap: 10,
+					alignItems: "center"
+				},
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "lang-speak",
+					onClick: () => bump(-1),
+					"aria-label": "minus one",
+					style: {
+						fontWeight: 800,
+						minWidth: 44
+					},
+					children: "−1"
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "lang-speak",
+					onClick: () => bump(1),
+					"aria-label": "plus one",
+					style: {
+						fontWeight: 800,
+						minWidth: 44
+					},
+					children: "+1"
+				})]
+			})
+		}), /* @__PURE__ */ jsx(Field, {
+			label: "base",
+			children: /* @__PURE__ */ jsx("span", {
+				style: {
+					display: "inline-flex",
+					gap: 6,
+					alignItems: "center"
+				},
+				children: bases.map((b) => /* @__PURE__ */ jsx(Chip, {
+					selected: b === base,
+					onClick: () => setBase(b),
+					children: b
+				}, b))
+			})
+		})] }),
+		footer: target != null ? /* @__PURE__ */ jsx(StatusPill, {
+			ok: solved,
+			children: solved ? `✓ Reached ${target}` : `Spin the dials to ${target}`
+		}) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { PlaceValueDialLab };

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

@@ -0,0 +1,73 @@
+import { ReactNode } from "react";
+
+//#region src/ict/number-systems/wheel.d.ts
+/** 0-9 then A-F… for bases up to 16. */
+declare function digitChar(d: number): string;
+/** The `width` digits of `value` in `base`, most-significant first, zero-padded. */
+declare function toDigits(value: number, base: number, width: number): number[];
+/** Largest value representable in `width` digits of `base`. */
+declare function maxValue(base: number, width: number): number;
+interface DigitWheelProps {
+  base: number;
+  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. */
+  dir?: number;
+  /** Non-zero digits read as "active" (accent); a zero is muted. */
+  active?: boolean;
+  onTap?: () => void;
+  ariaLabel?: string;
+}
+/**
+ * One odometer wheel: the current digit large + the next/previous digits peeking
+ * (clipped) at the top/bottom edges, so it unmistakably reads as a wheel mid-roll.
+ */
+declare function DigitWheel({
+  base,
+  digit,
+  roll,
+  dir,
+  active,
+  onTap,
+  ariaLabel
+}: DigitWheelProps): ReactNode;
+/** A binary ON/OFF cell — the "lightbulb worth 2^n" picture for base-2 mode. */
+declare function BitCell({
+  on,
+  onTap,
+  ariaLabel
+}: {
+  on: boolean;
+  onTap?: () => void;
+  ariaLabel?: string;
+}): ReactNode;
+interface WheelRowProps {
+  value: number;
+  base: number;
+  width: number;
+  /** base-2 ON/OFF cells instead of rolling wheels (the "lightbulb" picture). */
+  cells?: boolean;
+  /** show the power-of-base weight column under each wheel (glows when non-zero). */
+  showWeights?: boolean;
+  /** tap a wheel/cell to cycle that one place. */
+  onTapDigit?: (index: number) => void;
+  ariaPrefix?: string;
+}
+/**
+ * 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
+ * primitive both PlaceValueDial and BaseOdometer compose, so the animation +
+ * weight rendering live in exactly one spot.
+ */
+declare function WheelRow({
+  value,
+  base,
+  width,
+  cells,
+  showWeights,
+  onTapDigit,
+  ariaPrefix
+}: WheelRowProps): ReactNode;
+//#endregion
+export { BitCell, DigitWheel, WheelRow, WheelRowProps, digitChar, maxValue, toDigits };