@classytic/labs 0.1.0

package/dist/math/mystery-bucket/asset.d.mts

@@ -0,0 +1,6 @@
+import { AssetSpec } from "@classytic/stage";
+
+//#region src/math/mystery-bucket/asset.d.ts
+declare const MYSTERY_BUCKET_ASSET: AssetSpec;
+//#endregion
+export { MYSTERY_BUCKET_ASSET };

package/dist/math/mystery-bucket/asset.mjs

@@ -0,0 +1,145 @@
+'use client';
+
+import { num, toRad } from "../../core/util.mjs";
+import { ScaleFrame } from "../../kit/scale.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { BucketGlyph, StageAssetDefs, WeightGlyph, registerAsset, useCoords, vec } from "@classytic/stage";
+
+//#region src/math/mystery-bucket/asset.tsx
+const TRAY_R = .95;
+const HANG = .72;
+const asVec = (v, d) => v && typeof v === "object" && "x" in v ? v : d;
+function resolver({ params }) {
+	const pivot = asVec(params.pivot, {
+		x: 0,
+		y: .4
+	});
+	const arm = num(params.arm, 3.3);
+	const weight = Math.max(0, Math.round(num(params.bucketWeight, 5)));
+	const buckets = Math.max(1, Math.round(num(params.bucketCount, 1)));
+	const total = weight * buckets;
+	const count = Math.max(0, Math.round(num(params.count, 0)));
+	const diff = total - count;
+	const balanced = diff === 0;
+	const rad = toRad(Math.max(-13, Math.min(13, diff * 4.5)));
+	const beamA = vec.rotateAbout({
+		x: pivot.x - arm,
+		y: pivot.y
+	}, pivot, rad);
+	const beamB = vec.rotateAbout({
+		x: pivot.x + arm,
+		y: pivot.y
+	}, pivot, rad);
+	const baseY = pivot.y - 1.05;
+	const pedestal = [
+		{
+			x: pivot.x - .12,
+			y: pivot.y - .05
+		},
+		{
+			x: pivot.x + .12,
+			y: pivot.y - .05
+		},
+		{
+			x: pivot.x + .3,
+			y: baseY
+		},
+		{
+			x: pivot.x - .3,
+			y: baseY
+		}
+	];
+	const foot = [{
+		x: pivot.x - .55,
+		y: baseY
+	}, {
+		x: pivot.x + .55,
+		y: baseY
+	}];
+	const trayLC = {
+		x: beamA.x,
+		y: beamA.y - HANG
+	};
+	const trayRC = {
+		x: beamB.x,
+		y: beamB.y - HANG
+	};
+	const lUsable = TRAY_R * 2 * .86;
+	const bw = Math.min(1.15, lUsable / buckets * .96);
+	const bucketList = Array.from({ length: buckets }, (_, i) => ({
+		cx: trayLC.x + (i - (buckets - 1) / 2) * (buckets > 1 ? lUsable / buckets : 0),
+		yBase: trayLC.y,
+		wpx: bw,
+		hpx: bw,
+		label: balanced ? String(weight) : "?"
+	}));
+	const cw = count > 0 ? Math.min(.5, TRAY_R * 2 * .86 / count) : .5;
+	const coins = Array.from({ length: count }, (_, i) => ({
+		cx: trayRC.x + (i - (count - 1) / 2) * cw,
+		yBase: trayRC.y,
+		wpx: cw * .92,
+		hpx: cw * .92,
+		label: "1"
+	}));
+	return {
+		kind: "asset-geom",
+		parts: {
+			pivot,
+			beamA,
+			beamB,
+			pedestal,
+			foot,
+			trayLC,
+			trayRC
+		},
+		meta: {
+			buckets: bucketList,
+			coins,
+			balanced
+		}
+	};
+}
+function Component({ geom }) {
+	const c = useCoords();
+	const p = geom.parts;
+	const m = geom.meta ?? {};
+	const P = (v) => c.toPx(v.x, v.y);
+	const pivot = p.pivot;
+	const toGlyph = (b) => {
+		const [gx, gy] = P({
+			x: b.cx,
+			y: b.yBase
+		});
+		const hpx = c.sy(b.hpx);
+		return {
+			cx: gx,
+			top: gy - hpx,
+			wpx: c.sx(b.wpx),
+			hpx,
+			label: b.label
+		};
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(StageAssetDefs, {}),
+		/* @__PURE__ */ jsx(ScaleFrame, {
+			pivot,
+			beamA: p.beamA,
+			beamB: p.beamB,
+			trayLC: p.trayLC,
+			trayRC: p.trayRC,
+			baseY: pivot.y - 1.05,
+			panR: TRAY_R,
+			balanced: m.balanced
+		}),
+		(m.buckets ?? []).map((b, i) => /* @__PURE__ */ jsx(BucketGlyph, { ...toGlyph(b) }, `b${i}`)),
+		(m.coins ?? []).map((coin, i) => /* @__PURE__ */ jsx(WeightGlyph, { ...toGlyph(coin) }, `c${i}`))
+	] });
+}
+const MYSTERY_BUCKET_ASSET = {
+	resolver,
+	Component
+};
+registerAsset("mystery-bucket", MYSTERY_BUCKET_ASSET);
+
+//#endregion
+export { MYSTERY_BUCKET_ASSET };

package/dist/math/mystery-bucket/index.d.mts

@@ -0,0 +1,2 @@
+import { MYSTERY_BUCKET_ASSET } from "./asset.mjs";
+import { MysteryBucketLab, MysteryBucketProps, mysteryBucketDoc } from "./preset.mjs";

package/dist/math/mystery-bucket/preset.d.mts

@@ -0,0 +1,36 @@
+import { MYSTERY_BUCKET_ASSET } from "./asset.mjs";
+import { ReactNode } from "react";
+import { SceneDoc } from "@classytic/stage";
+
+//#region src/math/mystery-bucket/preset.d.ts
+interface MysteryBucketProps {
+  /** The hidden weight inside EACH bucket (the unknown). 1–maxWeights. */
+  bucketWeight?: number;
+  /** How many identical buckets sit on the left pan (coefficients: 2 = "2x"). */
+  bucketCount?: number;
+  /** Most unit weights a learner can stack. */
+  maxWeights?: number;
+  /** Where the learner starts (units already on the pan). */
+  start?: number;
+  title?: string;
+  prompt?: string;
+  height?: number;
+}
+/** Params → a portable SceneDoc (the asset self-registers on import). */
+declare function mysteryBucketDoc(params: {
+  bucketWeight: number;
+  count: number;
+  bucketCount?: number;
+  maxWeights?: number;
+}): SceneDoc;
+declare function MysteryBucketLab({
+  bucketWeight,
+  bucketCount,
+  maxWeights,
+  start,
+  title,
+  prompt,
+  height
+}?: MysteryBucketProps): ReactNode;
+//#endregion
+export { MysteryBucketLab, MysteryBucketProps, mysteryBucketDoc };

package/dist/math/mystery-bucket/preset.mjs

@@ -0,0 +1,116 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { StatusPill, Stepper } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { MYSTERY_BUCKET_ASSET } from "./asset.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Scene, registerAsset } from "@classytic/stage";
+
+//#region src/math/mystery-bucket/preset.tsx
+/**
+* MysteryBucket — the essentials opener. A sealed bucket of hidden weight sits
+* on a balance; the learner adds 1-unit weights to the other pan until the beam
+* is level. When it balances, the bucket's weight is revealed — they've "weighed
+* the unknown" with no symbols at all. This is the concrete ground the letter x
+* (and coefficients, and equations) is built on in later lessons.
+*
+* A SceneDoc factory + a thin interactive shell (add/remove a unit) on the
+* mystery-bucket asset. Solve reports to the learner seam.
+*/
+registerAsset("mystery-bucket", MYSTERY_BUCKET_ASSET);
+/** Params → a portable SceneDoc (the asset self-registers on import). */
+function mysteryBucketDoc(params) {
+	return {
+		schemaVersion: 2,
+		type: "stage-scene",
+		view: {
+			xMin: -5,
+			xMax: 5,
+			yMin: -2.4,
+			yMax: 3.4
+		},
+		elements: [{
+			id: "scale",
+			kind: "asset",
+			def: {
+				op: "asset",
+				asset: "mystery-bucket",
+				params: {
+					bucketWeight: params.bucketWeight,
+					bucketCount: params.bucketCount ?? 1,
+					count: params.count
+				},
+				bind: {}
+			}
+		}],
+		bindings: []
+	};
+}
+function MysteryBucketLab({ bucketWeight = 5, bucketCount = 1, maxWeights = 12, start = 0, title = "The mystery bucket", prompt = "Add weights until the scale is level — then you’ve weighed the mystery.", height = 340 } = {}) {
+	const buckets = Math.max(1, Math.round(bucketCount));
+	const per = clamp(Math.round(bucketWeight), 1, maxWeights);
+	const total = per * buckets;
+	const cap = Math.max(maxWeights, total + 2);
+	const [count, setCount] = useState(clamp(Math.round(start), 0, cap));
+	useEffect(() => {
+		setCount(clamp(Math.round(start), 0, cap));
+	}, [start, cap]);
+	const balanced = count === total;
+	const doc = useMemo(() => mysteryBucketDoc({
+		bucketWeight: per,
+		bucketCount: buckets,
+		count,
+		maxWeights: cap
+	}), [
+		per,
+		buckets,
+		count,
+		cap
+	]);
+	useCheckpoint({
+		solved: balanced,
+		activity: "mystery-bucket"
+	});
+	const reveal = buckets === 1 ? `The bucket weighs ${per}.` : `${buckets} buckets balance ${total} — so each bucket weighs ${per}.`;
+	const status = balanced ? `Level! ${reveal}` : count < total ? "The bucket side is heavier — add more weights." : "Too heavy now — take some off.";
+	const figure = /* @__PURE__ */ jsx(Scene, {
+		doc,
+		interactive: false,
+		showGrid: false,
+		showAxes: false,
+		height,
+		ariaLabel: `Balance: a mystery bucket against ${count} unit weights — ${balanced ? "level" : "tipping"}`
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx(Field, {
+				label: "weights",
+				children: /* @__PURE__ */ jsx(Stepper, {
+					value: count,
+					min: 0,
+					max: cap,
+					onChange: setCount,
+					label: "unit weights"
+				})
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: { opacity: .85 },
+				children: status
+			}),
+			/* @__PURE__ */ jsx(StatusPill, {
+				ok: balanced,
+				children: balanced ? "✓ Balanced" : "Not level"
+			})
+		] }),
+		footer: /* @__PURE__ */ jsx(LiveRegion, { children: status }),
+		children: figure
+	});
+}
+
+//#endregion
+export { MysteryBucketLab, mysteryBucketDoc };

package/dist/math/number-line/index.d.mts

@@ -0,0 +1 @@
+import { NumberLineLab, NumberLineProps } from "./preset.mjs";

package/dist/math/number-line/preset.d.mts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+//#region src/math/number-line/preset.d.ts
+interface NumberLineProps {
+  min?: number;
+  max?: number;
+  start?: number;
+  /** If set, the learner must land the marker here (e.g. the solution −3). */
+  target?: number;
+  title?: string;
+  prompt?: string;
+  height?: number;
+}
+declare function NumberLineLab({
+  min,
+  max,
+  start,
+  target,
+  title,
+  prompt,
+  height
+}?: NumberLineProps): ReactNode;
+//#endregion
+export { NumberLineLab, NumberLineProps };

package/dist/math/number-line/preset.mjs

@@ -0,0 +1,142 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dot, Label, MovableDot, Segment, Stage } from "@classytic/stage";
+
+//#region src/math/number-line/preset.tsx
+/**
+* NumberLineLab — see a number's place, including BELOW zero. A horizontal line
+* with a draggable marker that snaps to integers; optionally pose a target
+* ("drag to where x lands") so the learner discovers that taking away more than
+* you have lands you left of zero — a negative. Reusable for integers,
+* inequalities, and the "owing weight" intuition.
+*/
+const snap = (v) => Math.round(v);
+function NumberLineLab({ min = -8, max = 8, start = 0, target, title = "Number line", prompt = "Drag the marker along the line.", height = 200 } = {}) {
+	const [val, setVal] = useState(clamp(snap(start), min, max));
+	useEffect(() => {
+		setVal(clamp(snap(start), min, max));
+	}, [
+		start,
+		min,
+		max
+	]);
+	const solved = target != null && val === target;
+	useCheckpoint({
+		solved,
+		activity: "number-line"
+	});
+	const ticks = useMemo(() => {
+		const t = [];
+		for (let i = min; i <= max; i++) t.push(i);
+		return t;
+	}, [min, max]);
+	const span = max - min;
+	const markerColor = solved ? "var(--stage-good)" : "var(--stage-accent)";
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin: min - .8,
+			xMax: max + .8,
+			yMin: -1.3,
+			yMax: 1.3
+		},
+		height,
+		preserveAspect: false,
+		ariaLabel: `Number line from ${min} to ${max}; marker at ${val}`,
+		children: [
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: min,
+					y: 0
+				},
+				to: {
+					x: 0,
+					y: 0
+				},
+				color: "var(--stage-danger)",
+				opacity: .22,
+				weight: 9
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: min,
+					y: 0
+				},
+				to: {
+					x: max,
+					y: 0
+				},
+				color: "var(--stage-fg)",
+				opacity: .6,
+				weight: 2
+			}),
+			ticks.map((t) => /* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: t,
+					y: t === 0 ? -.26 : -.16
+				},
+				to: {
+					x: t,
+					y: t === 0 ? .26 : .16
+				},
+				color: "var(--stage-fg)",
+				opacity: t === 0 ? .7 : .35,
+				weight: t === 0 ? 2 : 1
+			}, `t${t}`)),
+			ticks.filter((t) => span <= 16 || t % 2 === 0).map((t) => /* @__PURE__ */ jsx(Label, {
+				x: t,
+				y: 0,
+				text: String(t),
+				color: "var(--stage-muted)",
+				dy: 22,
+				size: 12
+			}, `l${t}`)),
+			solved && target != null && /* @__PURE__ */ jsx(Dot, {
+				x: target,
+				y: 0,
+				r: 11,
+				color: "var(--stage-good)",
+				opacity: .3
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: val,
+					y: 0
+				},
+				onMove: (p) => setVal(clamp(snap(p.x), min, max)),
+				constrain: "horizontal",
+				range: {
+					min,
+					max
+				},
+				step: 1,
+				color: markerColor,
+				ariaLabel: "number-line marker"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsxs("span", {
+			style: {
+				fontWeight: 600,
+				fontVariantNumeric: "tabular-nums"
+			},
+			children: ["value = ", val]
+		}), target != null && /* @__PURE__ */ jsx(StatusPill, {
+			ok: solved,
+			children: solved ? `✓ Landed on ${target}` : "Not there yet"
+		})] }),
+		footer: /* @__PURE__ */ jsx(LiveRegion, { children: target != null ? solved ? `Landed on ${target}` : `Marker at ${val}` : `Marker at ${val}` }),
+		children: figure
+	});
+}
+
+//#endregion
+export { NumberLineLab };

package/dist/math/parabola/index.d.mts

@@ -0,0 +1 @@
+import { ParabolaProps, VertexParabolaLab } from "./preset.mjs";

package/dist/math/parabola/preset.d.mts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+
+//#region src/math/parabola/preset.d.ts
+interface ParabolaProps {
+  a?: number;
+  height?: number;
+}
+declare function VertexParabolaLab({
+  a,
+  height
+}: ParabolaProps): ReactNode;
+//#endregion
+export { ParabolaProps, VertexParabolaLab };

package/dist/math/parabola/preset.mjs

@@ -0,0 +1,79 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { LabFrame } from "../../kit/frame.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Grid, MovableDot, Plot, Stage, Tex } from "@classytic/stage";
+
+//#region src/math/parabola/preset.tsx
+/**
+* Vertex-form parabola — drag the vertex (h,k); the curve y = a(x−h)²+k and its
+* equation update live. A direct composition of @classytic/stage primitives
+* (Plot + a draggable handle + KaTeX), no scene DAG needed — shows the
+* primitives are usable on their own, not only through <Scene>.
+*/
+function equationTex(a, h, k) {
+	const sq = `\\left(${h === 0 ? "x" : `x ${h < 0 ? "+" : "-"} ${Math.abs(h)}`}\\right)^2`;
+	return `y = ${a === 1 ? sq : `${a}${sq}`}${k === 0 ? "" : ` ${k < 0 ? "-" : "+"} ${Math.abs(k)}`}`;
+}
+function VertexParabolaLab({ a = 1, height = 380 }) {
+	const [vertex, setVertex] = useState({
+		x: -4,
+		y: -3
+	});
+	const h = vertex.x;
+	const k = vertex.y;
+	const y = (x) => a * (x - h) * (x - h) + k;
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin: -8,
+			xMax: 8,
+			yMin: -5,
+			yMax: 7
+		},
+		height,
+		ariaLabel: "Drag the vertex to graph the parabola",
+		children: [
+			/* @__PURE__ */ jsx(Grid, {}),
+			/* @__PURE__ */ jsx(Axes, {}),
+			/* @__PURE__ */ jsx(Plot.OfX, {
+				y,
+				color: "var(--stage-accent)",
+				weight: 3
+			}),
+			/* @__PURE__ */ jsx(Tex, {
+				x: 3.5,
+				y: 6,
+				tex: equationTex(a, h, k),
+				size: 18
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: vertex,
+				onMove: (p) => setVertex({
+					x: Math.round(p.x),
+					y: Math.round(p.y)
+				}),
+				color: "var(--stage-good)",
+				ariaLabel: "parabola vertex"
+			})
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title: "Vertex-form parabola",
+		footer: /* @__PURE__ */ jsxs("p", {
+			className: "lab-prompt",
+			children: [
+				"Drag the ",
+				/* @__PURE__ */ jsx("strong", { children: "vertex" }),
+				" — the curve and the equation update. Vertex form ",
+				/* @__PURE__ */ jsx(Tex$1, { tex: "y = a(x-h)^2 + k" }),
+				"."
+			]
+		}),
+		children: figure
+	});
+}
+
+//#endregion
+export { VertexParabolaLab };

package/dist/math/pattern/asset.d.mts

@@ -0,0 +1,6 @@
+import { AssetSpec } from "@classytic/stage";
+
+//#region src/math/pattern/asset.d.ts
+declare const PATTERN_FIGURE_ASSET: AssetSpec;
+//#endregion
+export { PATTERN_FIGURE_ASSET };

package/dist/math/pattern/asset.mjs

@@ -0,0 +1,102 @@
+'use client';
+
+import { num } from "../../core/util.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { StageAssetDefs, registerAsset, useCoords } from "@classytic/stage";
+
+//#region src/math/pattern/asset.tsx
+const asVec = (v, d) => v && typeof v === "object" && "x" in v ? v : d;
+function resolver({ params }) {
+	const o = asVec(params.origin, {
+		x: 0,
+		y: 0
+	});
+	const step = Math.max(1, Math.round(num(params.n, 1)));
+	const a = Math.max(0, Math.round(num(params.a, 2)));
+	const b = Math.max(0, Math.round(num(params.b, 1)));
+	const cell = num(params.cell, .5);
+	const s = cell - cell * .08;
+	const cells = [];
+	for (let r = 0; r < step; r++) for (let col = 0; col < a; col++) cells.push({
+		x: o.x + col * cell,
+		y: o.y + r * cell,
+		s,
+		role: "grow"
+	});
+	for (let col = 0; col < b; col++) cells.push({
+		x: o.x + col * cell,
+		y: o.y - cell * 1.5,
+		s,
+		role: "const"
+	});
+	const count = a * step + b;
+	const widthCells = Math.max(a, b, 1);
+	return {
+		kind: "asset-geom",
+		parts: { captionAt: {
+			x: o.x + widthCells * cell / 2,
+			y: o.y - cell * 2.6
+		} },
+		meta: {
+			cells,
+			n: step,
+			count,
+			a,
+			b
+		}
+	};
+}
+function Component({ geom }) {
+	const c = useCoords();
+	const p = geom.parts;
+	const m = geom.meta ?? {};
+	const P = (v) => c.toPx(v.x, v.y);
+	const renderCell = (cell, i) => {
+		const [lx, ty] = P({
+			x: cell.x,
+			y: cell.y + cell.s
+		});
+		const wpx = c.sx(cell.s);
+		return /* @__PURE__ */ jsx("rect", {
+			x: lx,
+			y: ty,
+			width: wpx,
+			height: c.sy(cell.s),
+			rx: Math.min(4, wpx * .2),
+			fill: cell.role === "grow" ? "url(#stage-grad-weight)" : "url(#stage-grad-weight-2)",
+			stroke: "color-mix(in oklab, var(--stage-sheen) 32%, transparent)",
+			strokeWidth: 1
+		}, i);
+	};
+	const [cx, cy] = P(p.captionAt ?? {
+		x: 0,
+		y: 0
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(StageAssetDefs, {}),
+		/* @__PURE__ */ jsx("g", { children: (m.cells ?? []).map(renderCell) }),
+		/* @__PURE__ */ jsxs("text", {
+			x: cx,
+			y: cy,
+			fill: "var(--stage-fg)",
+			fontSize: 13,
+			fontWeight: 600,
+			textAnchor: "middle",
+			dominantBaseline: "hanging",
+			children: [
+				"n = ",
+				m.n,
+				" → ",
+				m.count
+			]
+		})
+	] });
+}
+const PATTERN_FIGURE_ASSET = {
+	resolver,
+	Component
+};
+registerAsset("pattern-figure", PATTERN_FIGURE_ASSET);
+
+//#endregion
+export { PATTERN_FIGURE_ASSET };

package/dist/math/pattern/index.d.mts

@@ -0,0 +1,2 @@
+import { PATTERN_FIGURE_ASSET } from "./asset.mjs";
+import { GrowingPatternLab, GrowingPatternProps, growingPatternDoc } from "./preset.mjs";