@classytic/labs 0.1.0

package/dist/math/area-model/asset.mjs

@@ -0,0 +1,270 @@
+'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/area-model/asset.tsx
+const asVec = (v, d) => v && typeof v === "object" && "x" in v ? v : d;
+function resolver({ params, bound }) {
+	const o = asVec(params.origin, {
+		x: 0,
+		y: 0
+	});
+	const a = Math.max(0, Math.round(num(params.a, 3)));
+	const b = Math.max(0, Math.round(num(params.b, 2)));
+	const u = num(params.unit, 1);
+	const factorMode = num(params.mode, 0) === 1;
+	const xv = Math.max(.4, num(bound.x, 2));
+	const revealed = !factorMode || bound.revealed === true || bound.revealed === 1;
+	const solved = bound.solved === true || bound.solved === 1;
+	const regions = [];
+	regions.push({
+		x0: o.x,
+		y0: o.y,
+		x1: o.x + xv,
+		y1: o.y + xv,
+		role: "x2",
+		label: "x²"
+	});
+	if (a > 0) regions.push({
+		x0: o.x + xv,
+		y0: o.y,
+		x1: o.x + xv + a * u,
+		y1: o.y + xv,
+		role: "xterm",
+		label: a === 1 ? "x" : `${a}x`
+	});
+	if (b > 0) regions.push({
+		x0: o.x,
+		y0: o.y + xv,
+		x1: o.x + xv,
+		y1: o.y + xv + b * u,
+		role: "xterm",
+		label: b === 1 ? "x" : `${b}x`
+	});
+	if (a > 0 && b > 0) regions.push({
+		x0: o.x + xv,
+		y0: o.y + xv,
+		x1: o.x + xv + a * u,
+		y1: o.y + xv + b * u,
+		role: "const",
+		label: String(a * b)
+	});
+	const grid = [];
+	for (let k = 1; k < a; k++) grid.push([{
+		x: o.x + xv + k * u,
+		y: o.y
+	}, {
+		x: o.x + xv + k * u,
+		y: o.y + xv + b * u
+	}]);
+	for (let k = 1; k < b; k++) grid.push([{
+		x: o.x,
+		y: o.y + xv + k * u
+	}, {
+		x: o.x + xv + a * u,
+		y: o.y + xv + k * u
+	}]);
+	const w = xv + a * u;
+	const h = xv + b * u;
+	const sideBottom = {
+		at: {
+			x: o.x + w / 2,
+			y: o.y
+		},
+		text: revealed ? `x${a ? ` + ${a}` : ""}` : "x + ?"
+	};
+	const sideLeft = {
+		at: {
+			x: o.x,
+			y: o.y + h / 2
+		},
+		text: revealed ? `x${b ? ` + ${b}` : ""}` : "x + ?"
+	};
+	return {
+		kind: "asset-geom",
+		parts: {
+			outline: [
+				{
+					x: o.x,
+					y: o.y
+				},
+				{
+					x: o.x + w,
+					y: o.y
+				},
+				{
+					x: o.x + w,
+					y: o.y + h
+				},
+				{
+					x: o.x,
+					y: o.y + h
+				}
+			],
+			split: [{
+				x: o.x + xv,
+				y: o.y
+			}, {
+				x: o.x + xv,
+				y: o.y + h
+			}],
+			split2: [{
+				x: o.x,
+				y: o.y + xv
+			}, {
+				x: o.x + w,
+				y: o.y + xv
+			}]
+		},
+		meta: {
+			regions,
+			grid,
+			sideBottom,
+			sideLeft,
+			solved,
+			revealed,
+			expanded: {
+				sq: 1,
+				lin: a + b,
+				con: a * b
+			}
+		}
+	};
+}
+const FILL = {
+	x2: "url(#stage-grad-weight)",
+	xterm: "url(#stage-grad-weight-2)",
+	const: "url(#stage-grad-metal)"
+};
+function Component({ geom }) {
+	const c = useCoords();
+	const p = geom.parts;
+	const m = geom.meta ?? {};
+	const P = (v) => c.toPx(v.x, v.y);
+	const good = m.solved ? "var(--stage-good)" : "var(--stage-metal)";
+	const renderRegion = (r, i) => {
+		const [lx, ty] = P({
+			x: r.x0,
+			y: r.y1
+		});
+		const [rx, by] = P({
+			x: r.x1,
+			y: r.y0
+		});
+		const wpx = Math.abs(rx - lx);
+		const hpx = Math.abs(by - ty);
+		const fs = Math.max(11, Math.min(22, Math.min(wpx, hpx) * .4));
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+			x: lx,
+			y: ty,
+			width: wpx,
+			height: hpx,
+			rx: Math.min(6, Math.min(wpx, hpx) * .12),
+			fill: FILL[r.role],
+			stroke: "color-mix(in oklab, var(--stage-sheen) 32%, transparent)",
+			strokeWidth: 1
+		}), /* @__PURE__ */ jsx("text", {
+			x: lx + wpx / 2,
+			y: ty + hpx / 2,
+			fill: "var(--stage-fg)",
+			fontSize: fs,
+			fontWeight: 700,
+			textAnchor: "middle",
+			dominantBaseline: "central",
+			style: { pointerEvents: "none" },
+			children: r.label
+		})] }, `r${i}`);
+	};
+	const outline = p.outline ?? [];
+	const [ox0, oy0] = P(outline[0] ?? {
+		x: 0,
+		y: 0
+	});
+	const [ox2, oy2] = P(outline[2] ?? {
+		x: 0,
+		y: 0
+	});
+	const sb = m.sideBottom;
+	const [sbx, sby] = P(sb.at);
+	const [slx, sly] = P(m.sideLeft.at);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(StageAssetDefs, {}), /* @__PURE__ */ jsxs("g", { children: [
+		(m.regions ?? []).map(renderRegion),
+		(m.grid ?? []).map(([g0, g1], i) => {
+			const [x1, y1] = P(g0);
+			const [x2, y2] = P(g1);
+			return /* @__PURE__ */ jsx("line", {
+				x1,
+				y1,
+				x2,
+				y2,
+				stroke: "color-mix(in oklab, var(--stage-sheen) 16%, transparent)",
+				strokeWidth: 1
+			}, `g${i}`);
+		}),
+		["split", "split2"].map((key) => {
+			const seg = p[key];
+			if (!seg) return null;
+			const [x1, y1] = P(seg[0]);
+			const [x2, y2] = P(seg[1]);
+			return /* @__PURE__ */ jsx("line", {
+				x1,
+				y1,
+				x2,
+				y2,
+				stroke: "color-mix(in oklab, var(--stage-sheen) 50%, transparent)",
+				strokeWidth: 1.5
+			}, key);
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: Math.min(ox0, ox2),
+			y: Math.min(oy0, oy2),
+			width: Math.abs(ox2 - ox0),
+			height: Math.abs(oy2 - oy0),
+			rx: 4,
+			fill: "none",
+			stroke: good,
+			strokeWidth: 3
+		}),
+		m.solved && /* @__PURE__ */ jsx("rect", {
+			x: Math.min(ox0, ox2),
+			y: Math.min(oy0, oy2),
+			width: Math.abs(ox2 - ox0),
+			height: Math.abs(oy2 - oy0),
+			rx: 4,
+			fill: "none",
+			stroke: "var(--stage-good)",
+			strokeWidth: 14,
+			opacity: .16
+		}),
+		/* @__PURE__ */ jsx("text", {
+			x: sbx,
+			y: sby + 20,
+			fill: "var(--stage-fg)",
+			fontSize: 14,
+			fontWeight: 600,
+			textAnchor: "middle",
+			dominantBaseline: "hanging",
+			children: sb.text
+		}),
+		/* @__PURE__ */ jsx("text", {
+			x: slx - 12,
+			y: sly,
+			fill: "var(--stage-fg)",
+			fontSize: 14,
+			fontWeight: 600,
+			textAnchor: "end",
+			dominantBaseline: "central",
+			children: m.sideLeft.text
+		})
+	] })] });
+}
+const AREA_MODEL_ASSET = {
+	resolver,
+	Component
+};
+registerAsset("area-model", AREA_MODEL_ASSET);
+
+//#endregion
+export { AREA_MODEL_ASSET };

package/dist/math/area-model/index.d.mts

@@ -0,0 +1,2 @@
+import { AREA_MODEL_ASSET } from "./asset.mjs";
+import { AreaModelLab, AreaModelProps, areaModelDoc } from "./preset.mjs";

package/dist/math/area-model/preset.d.mts

@@ -0,0 +1,29 @@
+import { AREA_MODEL_ASSET } from "./asset.mjs";
+import { ReactNode } from "react";
+import { SceneDoc } from "@classytic/stage";
+
+//#region src/math/area-model/preset.d.ts
+interface AreaModelProps {
+  a?: number;
+  b?: number;
+  mode?: 'expand' | 'factor';
+  unit?: number;
+  controlId?: string;
+  height?: number;
+}
+declare function areaModelDoc({
+  a,
+  b,
+  mode,
+  unit
+}: AreaModelProps): SceneDoc;
+declare function AreaModelLab({
+  a,
+  b,
+  mode,
+  unit,
+  controlId,
+  height
+}: AreaModelProps): ReactNode;
+//#endregion
+export { AreaModelLab, AreaModelProps, areaModelDoc };

package/dist/math/area-model/preset.mjs

@@ -0,0 +1,243 @@
+'use client';
+
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { CheckButton, LabStyles, Slider, StatusPill, Stepper } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { AREA_MODEL_ASSET } from "./asset.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Scene, controlsFromScene, registerAsset, resolve, useControlSurface, useEditor } from "@classytic/stage";
+
+//#region src/math/area-model/preset.tsx
+/**
+* Area-model algebra tiles — a SceneDoc FACTORY for (x+a)(x+b), built on
+* @classytic/stage. Two modes share ONE asset:
+*  - EXPAND: drag x and watch x² + (a+b)x + ab; strips grow with x, the
+*    constant block does not — the multiplication made visible.
+*  - FACTOR: given x² + px + q, find a and b (steppers + Check). The unique
+*    positive factor pair {a,b} makes the check unambiguous (swap accepted).
+*/
+registerAsset("area-model", AREA_MODEL_ASSET);
+const MAX_X = 3.5;
+function areaModelDoc({ a = 3, b = 2, mode = "expand", unit = 1 }) {
+	const factor = mode === "factor";
+	const totalW = MAX_X + a * unit;
+	const totalH = MAX_X + b * unit;
+	return {
+		schemaVersion: 2,
+		type: "stage-scene",
+		view: {
+			xMin: -1.4,
+			xMax: totalW + 1,
+			yMin: -1.6,
+			yMax: totalH + .8
+		},
+		elements: [
+			{
+				id: "x",
+				kind: "scalar",
+				label: "x",
+				a11y: { label: "side length x" },
+				free: {
+					value: 2,
+					min: .5,
+					max: MAX_X,
+					step: .25
+				}
+			},
+			{
+				id: "revealed",
+				kind: "scalar",
+				free: { value: factor ? 0 : 1 }
+			},
+			{
+				id: "solved",
+				kind: "scalar",
+				free: { value: 0 }
+			},
+			{
+				id: "area",
+				kind: "asset",
+				def: {
+					op: "asset",
+					asset: "area-model",
+					params: {
+						origin: {
+							x: 0,
+							y: 0
+						},
+						a,
+						b,
+						unit,
+						mode: factor ? 1 : 0
+					},
+					bind: {
+						x: { ref: "x" },
+						revealed: { ref: "revealed" },
+						solved: { ref: "solved" }
+					}
+				}
+			}
+		],
+		bindings: []
+	};
+}
+const expandLabel = (a, b) => `(x + ${a})(x + ${b}) = x² + ${a + b}x + ${a * b}`;
+const trinomialLabel = (a, b) => `x² + ${a + b}x + ${a * b}`;
+function AreaModelLab({ a = 3, b = 2, mode = "expand", unit = 1, controlId, height = 380 }) {
+	const { editor, doc } = useEditor(useMemo(() => areaModelDoc({
+		a,
+		b,
+		mode,
+		unit
+	}), [
+		a,
+		b,
+		mode,
+		unit
+	]));
+	const resolved = resolve(doc);
+	const x = Number(resolved.values.get("x") ?? 2);
+	useControlSurface(controlId, useMemo(() => controlsFromScene(editor, [{
+		id: "x",
+		name: "x",
+		min: .5,
+		max: MAX_X,
+		step: .25
+	}]), [editor]));
+	const setX = (v) => {
+		editor.dispatch({
+			op: "mutate",
+			id: "x",
+			patch: { free: { value: v } }
+		});
+	};
+	const [ga, setGa] = useState(1);
+	const [gb, setGb] = useState(1);
+	const [result, setResult] = useState(null);
+	const p = a + b;
+	const q = a * b;
+	useCheckpoint({
+		solved: result === "correct",
+		activity: `factor-x2+${p}x+${q}`,
+		response: `(x+${ga})(x+${gb})`
+	});
+	const check = () => {
+		const ok = ga + gb === p && ga * gb === q;
+		setResult(ok ? "correct" : "wrong");
+		editor.dispatch({
+			op: "mutate",
+			id: "revealed",
+			patch: { free: { value: ok ? 1 : 0 } }
+		});
+		editor.dispatch({
+			op: "mutate",
+			id: "solved",
+			patch: { free: { value: ok ? 1 : 0 } }
+		});
+	};
+	if (mode === "factor") {
+		const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabStyles, {}), /* @__PURE__ */ jsx(Scene, {
+			doc,
+			interactive: false,
+			showGrid: false,
+			showAxes: false,
+			height,
+			ariaLabel: `Area model to factor ${trinomialLabel(a, b)}`
+		})] });
+		const controlBar = /* @__PURE__ */ jsxs(ControlBar, { children: [
+			/* @__PURE__ */ jsx("span", {
+				style: { fontWeight: 600 },
+				children: "(x +"
+			}),
+			/* @__PURE__ */ jsx(Stepper, {
+				label: "a",
+				value: ga,
+				min: 0,
+				max: 12,
+				onChange: (v) => {
+					setGa(v);
+					setResult(null);
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sep",
+				children: ")(x +"
+			}),
+			/* @__PURE__ */ jsx(Stepper, {
+				label: "b",
+				value: gb,
+				min: 0,
+				max: 12,
+				onChange: (v) => {
+					setGb(v);
+					setResult(null);
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sep",
+				children: ")"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: { opacity: .7 },
+				children: /* @__PURE__ */ jsx(Tex$1, { tex: `\\to x^2 + ${ga + gb}x + ${ga * gb}` })
+			}),
+			/* @__PURE__ */ jsx(CheckButton, {
+				onClick: check,
+				children: "Check"
+			}),
+			result === "correct" && /* @__PURE__ */ jsx(StatusPill, {
+				ok: true,
+				children: "✓ Correct!"
+			}),
+			result === "wrong" && /* @__PURE__ */ jsxs(StatusPill, {
+				ok: false,
+				children: [
+					"Not yet — match ",
+					p,
+					"x and ",
+					q
+				]
+			})
+		] });
+		const footer = /* @__PURE__ */ jsx(LiveRegion, { children: result === "correct" ? `Correct. The factors are x plus ${a} and x plus ${b}.` : "" });
+		return /* @__PURE__ */ jsx(LabFrame, {
+			title: "Area-model factoring",
+			prompt: `Factor ${trinomialLabel(a, b)} — find the two side lengths.`,
+			controls: controlBar,
+			footer,
+			children: figure
+		});
+	}
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabStyles, {}), /* @__PURE__ */ jsx(Scene, {
+		doc,
+		interactive: false,
+		showGrid: false,
+		showAxes: false,
+		height,
+		ariaLabel: `Area model for (x + ${a})(x + ${b})`
+	})] });
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title: "Area-model expansion",
+		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
+			label: expandLabel(a, b),
+			value: /* @__PURE__ */ jsxs("strong", { children: ["x = ", x] }),
+			children: /* @__PURE__ */ jsx(Slider, {
+				value: x,
+				min: .5,
+				max: MAX_X,
+				step: .25,
+				onChange: setX,
+				ariaLabel: "side length x"
+			})
+		}), /* @__PURE__ */ jsxs("span", {
+			style: { opacity: .75 },
+			children: ["area = ", ((x + a) * (x + b)).toFixed(2)]
+		})] }),
+		children: figure
+	});
+}
+
+//#endregion
+export { AreaModelLab, areaModelDoc };

package/dist/math/balance-algebra/asset.d.mts

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

package/dist/math/balance-algebra/asset.mjs

@@ -0,0 +1,150 @@
+'use client';
+
+import { num, toRad } from "../../core/util.mjs";
+import { ScaleFrame } from "../../kit/scale.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { StageAssetDefs, WeightGlyph, XBlockGlyph, registerAsset, useCoords, vec } from "@classytic/stage";
+
+//#region src/math/balance-algebra/asset.tsx
+const TRAY_R = .82;
+const HANG = .72;
+const asVec = (v, d) => v && typeof v === "object" && "x" in v ? v : d;
+function layoutPan(center, items) {
+	const count = items.length || 1;
+	const slot = count === 1 ? 0 : .78;
+	return items.map((it, i) => ({
+		cx: center.x + (i - (count - 1) / 2) * slot,
+		yBase: center.y,
+		w: .62,
+		h: .62,
+		kind: it.kind,
+		label: it.label
+	}));
+}
+function resolver({ params, bound }) {
+	const pivot = asVec(params.pivot, {
+		x: 0,
+		y: .4
+	});
+	const arm = num(params.arm, 3.3);
+	const coef = Math.max(0, Math.round(num(params.coef, 2)));
+	const addend = Math.max(0, Math.round(num(params.addend, 1)));
+	const rhs = Math.max(0, Math.round(num(params.rhs, 7)));
+	const tiltDeg = num(bound.tilt, 0);
+	const balanced = bound.balanced === true || bound.balanced === 1;
+	const rad = toRad(tiltDeg);
+	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 leftItems = [...coef > 0 ? [{
+		kind: "x",
+		label: coef === 1 ? "x" : `${coef}x`
+	}] : [], ...addend > 0 ? [{
+		kind: "const",
+		label: String(addend)
+	}] : []];
+	const rightItems = [{
+		kind: "const",
+		label: String(rhs)
+	}];
+	return {
+		kind: "asset-geom",
+		parts: {
+			pivot,
+			beamA,
+			beamB,
+			pedestal,
+			foot,
+			trayLC,
+			trayRC
+		},
+		meta: {
+			items: [...layoutPan(trayLC, leftItems), ...layoutPan(trayRC, rightItems)],
+			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 renderItem = (it, i) => {
+		const [cx, baseY] = P({
+			x: it.cx,
+			y: it.yBase
+		});
+		const wpx = c.sx(it.w);
+		const hpx = c.sy(it.h);
+		const box = {
+			cx,
+			top: baseY - hpx,
+			wpx,
+			hpx,
+			label: it.label
+		};
+		return /* @__PURE__ */ jsx("g", { children: it.kind === "x" ? /* @__PURE__ */ jsx(XBlockGlyph, { ...box }) : /* @__PURE__ */ jsx(WeightGlyph, { ...box }) }, i);
+	};
+	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
+		}),
+		/* @__PURE__ */ jsx("g", { children: (m.items ?? []).map(renderItem) })
+	] });
+}
+const BALANCE_ALGEBRA_ASSET = {
+	resolver,
+	Component
+};
+registerAsset("balance-algebra", BALANCE_ALGEBRA_ASSET);
+
+//#endregion
+export { BALANCE_ALGEBRA_ASSET };

package/dist/math/balance-algebra/index.d.mts

@@ -0,0 +1,2 @@
+import { BALANCE_ALGEBRA_ASSET } from "./asset.mjs";
+import { BalanceAlgebraLab, BalanceAlgebraProps, BalanceEquation, balanceAlgebraDoc } from "./preset.mjs";