@classytic/labs 0.1.0

package/dist/geometry/builder.d.mts

@@ -0,0 +1,18 @@
+import { GeoElement } from "./board/preset.mjs";
+import { ReactNode } from "react";
+
+//#region src/geometry/builder.d.ts
+interface GeometryBuilderProps {
+  scene?: GeoElement[];
+  onChange?: (scene: GeoElement[]) => void;
+  title?: string;
+  height?: number;
+}
+declare function GeometryBuilder({
+  scene,
+  onChange,
+  title,
+  height
+}?: GeometryBuilderProps): ReactNode;
+//#endregion
+export { GeometryBuilder, GeometryBuilderProps };

package/dist/geometry/builder.mjs

@@ -0,0 +1,332 @@
+'use client';
+
+import { geoSceneToDoc } from "./board/preset.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Dot, Grid, Stage, ToolIcon, isCircleVal, isLineVal, isVec2, renderElements, resolve } from "@classytic/stage";
+
+//#region src/geometry/builder.tsx
+/**
+* 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
+* circles/lines, add midpoints and distance measures, drag points to move them,
+* or delete. It emits the SAME declarative `GeoElement[]` scene the board renders.
+*
+* 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
+* read-only render of this editor's output.
+*/
+const TOOLS = [
+	{
+		id: "select",
+		icon: "select",
+		label: "move",
+		hint: "drag a point to move it"
+	},
+	{
+		id: "point",
+		icon: "point",
+		label: "point",
+		hint: "click empty space to place a point"
+	},
+	{
+		id: "segment",
+		icon: "segment",
+		label: "segment",
+		hint: "click two points"
+	},
+	{
+		id: "line",
+		icon: "line",
+		label: "line",
+		hint: "click two points"
+	},
+	{
+		id: "circle",
+		icon: "circle",
+		label: "circle",
+		hint: "click centre, then a point on it"
+	},
+	{
+		id: "intersect",
+		icon: "intersect",
+		label: "intersect",
+		hint: "click two circles/lines"
+	},
+	{
+		id: "midpoint",
+		icon: "midpoint",
+		label: "midpoint",
+		hint: "click two points"
+	},
+	{
+		id: "measure",
+		icon: "measure",
+		label: "measure",
+		hint: "click two points"
+	},
+	{
+		id: "delete",
+		icon: "delete",
+		label: "delete",
+		hint: "click a point to remove it"
+	}
+];
+const VIEW = {
+	xMin: -8,
+	xMax: 8,
+	yMin: -5.5,
+	yMax: 5.5
+};
+const snap = (v) => Math.round(v * 2) / 2;
+const POINT_KINDS = new Set([
+	"point",
+	"intersect",
+	"midpoint"
+]);
+const nextPointId = (scene) => {
+	const used = new Set(scene.filter((e) => e.type === "point").map((e) => e.id));
+	for (const ch of "ABCDEFGHJKLMNOPQRSTUVWXYZ") if (!used.has(ch)) return ch;
+	return `P${scene.length}`;
+};
+const nextId = (scene, prefix) => {
+	let i = 1;
+	const ids = new Set(scene.map((e) => e.id).filter(Boolean));
+	while (ids.has(`${prefix}${i}`)) i++;
+	return `${prefix}${i}`;
+};
+function GeometryBuilder({ scene = [], onChange, title = "Build a construction", height = 380 } = {}) {
+	const [tool, setTool] = useState("point");
+	const [pending, setPending] = useState([]);
+	const set = (next) => onChange?.(next);
+	const doc = useMemo(() => geoSceneToDoc(scene, VIEW), [scene]);
+	const resolved = useMemo(() => resolve(doc), [doc]);
+	const points = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const el of scene) {
+			if (!POINT_KINDS.has(el.type)) continue;
+			const id = el.id;
+			const v = resolved.values.get(id);
+			if (isVec2(v)) m.set(id, v);
+		}
+		return m;
+	}, [scene, resolved]);
+	const pointAt = (mx, my) => {
+		let best = null, bestD = .5;
+		for (const [id, p] of points) {
+			const d = Math.hypot(mx - p.x, my - p.y);
+			if (d < bestD) {
+				bestD = d;
+				best = id;
+			}
+		}
+		return best;
+	};
+	const elementAt = (mx, my) => {
+		let best = null, bestD = .4;
+		for (const el of scene) {
+			const id = el.id;
+			if (!id) continue;
+			const v = resolved.values.get(id);
+			if (isCircleVal(v)) {
+				const d = Math.abs(Math.hypot(mx - v.center.x, my - v.center.y) - v.r);
+				if (d < bestD) {
+					bestD = d;
+					best = id;
+				}
+			} else if (isLineVal(v) && v.kind === "line") {
+				const dx = v.b.x - v.a.x, dy = v.b.y - v.a.y, L = Math.hypot(dx, dy) || 1;
+				const dist = Math.abs((dy * (mx - v.a.x) - dx * (my - v.a.y)) / L);
+				if (dist < bestD) {
+					bestD = dist;
+					best = id;
+				}
+			}
+		}
+		return best;
+	};
+	const onBuild = (p) => {
+		const [mx, my] = p;
+		if (tool === "select") return;
+		if (tool === "point") {
+			const id = nextPointId(scene);
+			set([...scene, {
+				type: "point",
+				id,
+				x: snap(mx),
+				y: snap(my),
+				draggable: true,
+				label: id
+			}]);
+			return;
+		}
+		if (tool === "delete") {
+			const eid = pointAt(mx, my) ?? elementAt(mx, my);
+			if (eid) set(scene.filter((el) => el.id !== eid));
+			return;
+		}
+		if (tool === "segment" || tool === "line" || tool === "midpoint" || tool === "measure") {
+			const pid = pointAt(mx, my);
+			if (!pid) return;
+			const next = [...pending, pid];
+			if (next.length < 2) {
+				setPending(next);
+				return;
+			}
+			const a = next[0], b = next[1];
+			if (tool === "segment") set([...scene, {
+				type: "segment",
+				from: a,
+				to: b,
+				color: "var(--stage-good)"
+			}]);
+			else if (tool === "line") set([...scene, {
+				type: "line",
+				id: nextId(scene, "l"),
+				through: [a, b],
+				color: "var(--stage-fg)"
+			}]);
+			else if (tool === "midpoint") {
+				const id = nextId(scene, "M");
+				set([...scene, {
+					type: "midpoint",
+					id,
+					of: [a, b],
+					label: id
+				}]);
+			} else set([...scene, {
+				type: "measure",
+				kind: "distance",
+				of: [a, b],
+				label: `|${a}${b}|`
+			}]);
+			setPending([]);
+			return;
+		}
+		if (tool === "circle") {
+			const pid = pointAt(mx, my);
+			if (!pid) return;
+			const next = [...pending, pid];
+			if (next.length < 2) {
+				setPending(next);
+				return;
+			}
+			set([...scene, {
+				type: "circle",
+				id: nextId(scene, "c"),
+				center: next[0],
+				through: next[1],
+				color: "var(--stage-accent)"
+			}]);
+			setPending([]);
+			return;
+		}
+		if (tool === "intersect") {
+			const eid = elementAt(mx, my);
+			if (!eid) return;
+			const next = [...pending, eid];
+			if (next.length < 2) {
+				setPending(next);
+				return;
+			}
+			const id1 = nextId(scene, "X");
+			const add = [{
+				type: "intersect",
+				id: id1,
+				of: [next[0], next[1]],
+				pick: 0,
+				label: id1,
+				color: "var(--stage-warn)"
+			}];
+			const a = scene.find((el) => el.id === next[0]);
+			const b = scene.find((el) => el.id === next[1]);
+			if (a?.type === "circle" && b?.type === "circle") {
+				const id2 = nextId([...scene, ...add], "X");
+				add.push({
+					type: "intersect",
+					id: id2,
+					of: [next[0], next[1]],
+					pick: 1,
+					label: id2,
+					color: "var(--stage-warn)"
+				});
+			}
+			set([...scene, ...add]);
+			setPending([]);
+		}
+	};
+	const onPointMove = (id, p, phase) => {
+		const x = phase === "commit" ? snap(p.x) : p.x;
+		const y = phase === "commit" ? snap(p.y) : p.y;
+		set(scene.map((el) => el.type === "point" && el.id === id ? {
+			...el,
+			x,
+			y
+		} : el));
+	};
+	const hint = TOOLS.find((t) => t.id === tool)?.hint ?? "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "not-prose my-4 overflow-hidden rounded-xl border border-border/70 bg-card",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-1.5 border-b border-border/60 bg-muted/30 px-3 py-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "mr-1 text-sm font-semibold",
+						children: title
+					}),
+					TOOLS.map((t) => /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: () => {
+							setTool(t.id);
+							setPending([]);
+						},
+						className: ["inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition", tool === t.id ? "bg-primary text-primary-foreground" : "border border-border/60 bg-background text-foreground hover:bg-muted"].join(" "),
+						children: [/* @__PURE__ */ jsx(ToolIcon, { name: t.icon }), t.label]
+					}, t.id)),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => set([]),
+						className: "ml-auto rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-destructive",
+						children: "clear"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "px-3 pt-1.5 text-xs text-muted-foreground",
+				children: [hint, pending.length ? ` · ${pending.length} selected` : ""]
+			}),
+			/* @__PURE__ */ jsxs(Stage, {
+				view: VIEW,
+				height,
+				onPointerMath: onBuild,
+				ariaLabel: `Geometry construction editor — ${tool} tool`,
+				className: "cursor-crosshair",
+				children: [
+					/* @__PURE__ */ jsx(Grid, {}),
+					/* @__PURE__ */ jsx(Axes, {}),
+					renderElements(doc, resolved, {
+						draggablePoints: tool === "select",
+						onPointMove
+					}),
+					pending.map((id) => {
+						const p = points.get(id);
+						return p ? /* @__PURE__ */ jsx(Dot, {
+							x: p.x,
+							y: p.y,
+							r: 8,
+							color: "var(--stage-warn)",
+							opacity: .6
+						}, `sel-${id}`) : null;
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { GeometryBuilder };

package/dist/geometry/index.d.mts

@@ -0,0 +1,4 @@
+import { GeoElement, GeometryBoard, GeometryBoardProps, geoSceneToDoc } from "./board/preset.mjs";
+import { IntersectingCircles, IntersectingCirclesProps } from "./intersecting-circles.mjs";
+import { GeometryBuilder, GeometryBuilderProps } from "./builder.mjs";
+export { type GeoElement, GeometryBoard, type GeometryBoardProps, GeometryBuilder, type GeometryBuilderProps, IntersectingCircles, type IntersectingCirclesProps, geoSceneToDoc };

package/dist/geometry/index.mjs

@@ -0,0 +1,5 @@
+import { GeometryBoard, geoSceneToDoc } from "./board/preset.mjs";
+import { IntersectingCircles } from "./intersecting-circles.mjs";
+import { GeometryBuilder } from "./builder.mjs";
+
+export { GeometryBoard, GeometryBuilder, IntersectingCircles, geoSceneToDoc };

package/dist/geometry/intersecting-circles.d.mts

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+//#region src/geometry/intersecting-circles.d.ts
+interface IntersectingCirclesProps {
+  r1?: number | string;
+  r2?: number | string;
+  title?: string;
+  height?: number;
+}
+declare function IntersectingCircles({
+  r1: r1p,
+  r2: r2p,
+  title,
+  height
+}?: IntersectingCirclesProps): ReactNode;
+//#endregion
+export { IntersectingCircles, IntersectingCirclesProps };

package/dist/geometry/intersecting-circles.mjs

@@ -0,0 +1,104 @@
+'use client';
+
+import { clamp, num } from "../core/util.mjs";
+import { GeometryBoard } from "./board/preset.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/geometry/intersecting-circles.tsx
+const COLORS = {
+	accent: "var(--stage-accent)",
+	warn: "var(--stage-warn)",
+	good: "var(--stage-good)"
+};
+function IntersectingCircles({ r1: r1p, r2: r2p, title = "Common chord of two circles", height = 360 } = {}) {
+	const r1 = clamp(num(r1p, 3.2), 1, 5);
+	const r2 = clamp(num(r2p, 2.8), 1, 5);
+	return /* @__PURE__ */ jsx(GeometryBoard, {
+		scene: [
+			{
+				type: "point",
+				id: "A",
+				x: 3,
+				y: 0,
+				draggable: true,
+				label: "A",
+				color: COLORS.accent
+			},
+			{
+				type: "point",
+				id: "B",
+				x: 6.4,
+				y: 0,
+				draggable: true,
+				label: "B",
+				color: COLORS.warn
+			},
+			{
+				type: "circle",
+				id: "cA",
+				center: "A",
+				radius: r1,
+				color: COLORS.accent
+			},
+			{
+				type: "circle",
+				id: "cB",
+				center: "B",
+				radius: r2,
+				color: COLORS.warn
+			},
+			{
+				type: "segment",
+				from: "A",
+				to: "B",
+				dashed: true
+			},
+			{
+				type: "intersect",
+				id: "P",
+				of: ["cA", "cB"],
+				pick: 0,
+				label: "P",
+				color: COLORS.good
+			},
+			{
+				type: "intersect",
+				id: "Q",
+				of: ["cA", "cB"],
+				pick: 1,
+				label: "Q",
+				color: COLORS.good
+			},
+			{
+				type: "segment",
+				from: "P",
+				to: "Q",
+				color: COLORS.good,
+				label: "chord"
+			},
+			{
+				type: "measure",
+				kind: "distance",
+				of: ["A", "B"],
+				label: "d = |AB|"
+			},
+			{
+				type: "measure",
+				kind: "distance",
+				of: ["P", "Q"],
+				label: "chord |PQ|"
+			}
+		],
+		view: {
+			xMin: -1,
+			xMax: 11,
+			yMin: -5,
+			yMax: 5
+		},
+		title,
+		height
+	});
+}
+
+//#endregion
+export { IntersectingCircles };

package/dist/ict/index.d.mts

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

package/dist/ict/index.mjs

@@ -0,0 +1,6 @@
+import { BitCell, DigitWheel, WheelRow, digitChar, maxValue, toDigits } from "./number-systems/wheel.mjs";
+import { PlaceValueDialLab } from "./number-systems/place-value-dial.mjs";
+import { BitGrouperLab } from "./number-systems/bit-grouper.mjs";
+import { BaseOdometerLab } from "./number-systems/base-odometer.mjs";
+
+export { BaseOdometerLab, BitCell, BitGrouperLab, DigitWheel, PlaceValueDialLab, WheelRow, digitChar, maxValue, toDigits };

package/dist/ict/number-systems/base-odometer.d.mts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+
+//#region src/ict/number-systems/base-odometer.d.ts
+interface BaseOdometerProps {
+  bases?: number[];
+  /** digit count per row; 'auto' sizes each base to hold `max`. */
+  width?: number | 'auto';
+  start?: number;
+  max?: number;
+  race?: boolean;
+  /** ticks per second while racing. */
+  speed?: number;
+  /** tint one base row as the focus/answer. */
+  highlightBase?: number;
+  target?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+}
+declare function BaseOdometerLab({
+  bases,
+  width,
+  start,
+  max,
+  race,
+  speed,
+  highlightBase,
+  target,
+  title,
+  prompt,
+  objectives
+}: BaseOdometerProps): ReactNode;
+//#endregion
+export { BaseOdometerLab, BaseOdometerProps };

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

@@ -0,0 +1,160 @@
+'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 { useFrameTick } from "../../kit/anim.mjs";
+import { WheelRow, digitChar, toDigits } from "./wheel.mjs";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useInView } from "@classytic/stage";
+
+//#region src/ict/number-systems/base-odometer.tsx
+/**
+* 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
+* "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).
+*/
+const LABELS = {
+	2: "BIN",
+	8: "OCT",
+	10: "DEC",
+	16: "HEX"
+};
+function BaseOdometerLab({ bases = [
+	2,
+	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 }) {
+	const [value, setValue] = useState(Math.max(0, Math.min(max, Math.floor(start))));
+	const [racing, setRacing] = useState(race);
+	const acc = useRef(0);
+	const { ref: viewRef, inView } = useInView();
+	const widthFor = (b) => width === "auto" ? Math.max(1, Math.ceil(Math.log(max + 1) / Math.log(b) - 1e-9)) : width;
+	const bump = (delta) => setValue((x) => Math.max(0, Math.min(max, x + delta)));
+	useFrameTick(racing && inView, (f) => {
+		acc.current += Math.min(.1, f.dtMs / 1e3) * speed;
+		if (acc.current >= 1) {
+			const steps = Math.floor(acc.current);
+			acc.current -= steps;
+			setValue((x) => (x + steps) % (max + 1));
+		}
+	});
+	const solved = target != null && value === target;
+	useCheckpoint({
+		solved,
+		activity: "base-odometer"
+	});
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: viewRef,
+		className: "lab-playwrap",
+		style: {
+			borderRadius: 14,
+			background: "var(--stage-bg)",
+			border: "1px solid var(--stage-grid)",
+			padding: "16px 14px",
+			display: "flex",
+			flexDirection: "column",
+			gap: 12
+		},
+		children: bases.map((b) => {
+			const hot = b === highlightBase;
+			return /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 12,
+					padding: hot ? "6px 8px" : 0,
+					borderRadius: 10,
+					background: hot ? "color-mix(in oklab, var(--stage-good) 12%, transparent)" : "transparent"
+				},
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							width: 42,
+							fontWeight: 800,
+							fontSize: 13,
+							color: hot ? "var(--stage-good)" : "var(--stage-muted)"
+						},
+						children: LABELS[b] ?? `b${b}`
+					}),
+					/* @__PURE__ */ jsx(WheelRow, {
+						value,
+						base: b,
+						width: widthFor(b),
+						ariaPrefix: `base ${b} `
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						style: {
+							marginLeft: "auto",
+							fontWeight: 700,
+							fontVariantNumeric: "tabular-nums",
+							color: "var(--stage-fg)"
+						},
+						children: [toDigits(value, b, widthFor(b)).map(digitChar).join(""), /* @__PURE__ */ jsx("sub", { children: b })]
+					})
+				]
+			}, b);
+		})
+	}), /* @__PURE__ */ jsx(LiveRegion, { children: `value ${value}` })] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		objectives,
+		controls: /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+			label: "count",
+			value: `= ${value}`,
+			children: /* @__PURE__ */ jsxs("span", {
+				style: {
+					display: "flex",
+					flexWrap: "wrap",
+					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(Chip, {
+						selected: racing,
+						onClick: () => setRacing((r) => !r),
+						children: racing ? "⏸ pause" : "▶ race"
+					})
+				]
+			})
+		}) }),
+		footer: target != null ? /* @__PURE__ */ jsx(StatusPill, {
+			ok: solved,
+			children: solved ? `✓ Reached ${target}` : `Count to ${target}`
+		}) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { BaseOdometerLab };