@classytic/labs 0.1.0 → 0.2.0

package/dist/math/ratio-share/preset.mjs

@@ -0,0 +1,204 @@
+'use client';
+
+import { gcd, round } from "../../core/util.mjs";
+import { StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, LabFrame } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { getScene } from "../../kit/scenes.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, MovableDot, Segment, Stage } from "@classytic/stage";
+
+//#region src/math/ratio-share/preset.tsx
+/**
+* RatioShareLab, the authorable "share in a ratio" manipulative: a quantity is a
+* single bar, and the learner drags ONE divider to split it in the ratio a:b.
+* The split reads back live as an amount AND as a ratio that simplifies, so
+* "share £60 in 2:3" becomes a thing you slide until 24:36 clicks to 2:3. The
+* target divider is shown faint; landing on any split whose simplified ratio is
+* a:b solves it (so 40:60 and 2:3 are visibly the same share).
+*
+* One engine, many uses, all data: set the ratio a:b, the total, the unit and
+* the two side labels. Built on the juiced <MovableDot>.
+*/
+function RatioShareLab(props = {}) {
+	const { a = 2, b = 3, total = 100, unit = "", labelA = "A", labelB = "B", step = 1, scene, height = 220, title = "Share in a ratio", prompt = `Share ${total}${unit ? " " + unit : ""} in the ratio ${a} : ${b}. Drag the divider.`, activity = "ratio-share" } = props;
+	const correct = total * a / (a + b);
+	const clamp = (v) => Math.max(0, Math.min(total, Math.round(v / step) * step));
+	const [split, setSplit] = useState(clamp(props.total != null ? 0 : 0));
+	useEffect(() => {
+		setSplit(0);
+	}, [
+		total,
+		a,
+		b,
+		step
+	]);
+	const rest = total - split;
+	const tg = gcd(a, b);
+	const sg = gcd(split, rest);
+	const solved = split > 0 && rest > 0 && split / sg === a / tg && rest / sg === b / tg;
+	const colA = solved ? "var(--stage-good)" : "var(--stage-accent)";
+	const colB = solved ? "#34c6c6" : "#e85aa6";
+	useCheckpoint({
+		solved,
+		activity,
+		response: `${split} : ${rest}`
+	});
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin: -total * .04,
+			xMax: total * 1.12,
+			yMin: -1.7,
+			yMax: 1.5
+		},
+		height,
+		preserveAspect: false,
+		pad: 14,
+		ariaLabel: `A bar of ${total} split into ${split} and ${rest}`,
+		children: [
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: 0,
+					y: 0
+				},
+				to: {
+					x: Math.max(1e-4, split),
+					y: 0
+				},
+				color: colA,
+				weight: 34
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: split,
+					y: 0
+				},
+				to: {
+					x: total,
+					y: 0
+				},
+				color: colB,
+				weight: 34,
+				opacity: .92
+			}),
+			split > total * .06 && /* @__PURE__ */ jsx(Label, {
+				x: split / 2,
+				y: 0,
+				text: `${round(split)}`,
+				color: "var(--stage-fg)",
+				size: 13,
+				weight: 700
+			}),
+			rest > total * .06 && /* @__PURE__ */ jsx(Label, {
+				x: (split + total) / 2,
+				y: 0,
+				text: `${round(rest)}`,
+				color: "var(--stage-fg)",
+				size: 13,
+				weight: 700
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: 0,
+				y: 0,
+				text: labelA,
+				color: "var(--stage-muted)",
+				size: 12,
+				anchor: "start",
+				dy: 32
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: total,
+				y: 0,
+				text: labelB,
+				color: "var(--stage-muted)",
+				size: 12,
+				anchor: "end",
+				dy: 32
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: correct,
+					y: -.85
+				},
+				to: {
+					x: correct,
+					y: .85
+				},
+				color: "var(--stage-good)",
+				weight: 1.75,
+				opacity: solved ? .9 : .5,
+				dashed: true
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: split,
+					y: 0
+				},
+				onMove: (p) => setSplit(clamp(p.x)),
+				constrain: "horizontal",
+				range: {
+					min: 0,
+					max: total
+				},
+				snap: step,
+				step,
+				readout: () => `${round(split)} : ${round(rest)}`,
+				color: "var(--stage-fg)",
+				r: 9,
+				ariaLabel: "ratio divider"
+			})
+		]
+	});
+	const controls = /* @__PURE__ */ jsxs(ControlBar, { children: [
+		/* @__PURE__ */ jsxs("span", {
+			style: {
+				fontWeight: 700,
+				fontSize: 16,
+				fontVariantNumeric: "tabular-nums"
+			},
+			children: [
+				round(split),
+				" : ",
+				round(rest)
+			]
+		}),
+		split > 0 && rest > 0 && /* @__PURE__ */ jsxs("span", {
+			style: { opacity: .75 },
+			children: [
+				"= ",
+				round(split / sg),
+				" : ",
+				round(rest / sg)
+			]
+		}),
+		/* @__PURE__ */ jsx(StatusPill, {
+			ok: solved,
+			children: solved ? `✓ ${a} : ${b}` : `target ${a} : ${b}`
+		})
+	] });
+	const twin = scene && scene !== "none" ? getScene(scene)?.render({
+		frac: total > 0 ? split / total : 0,
+		guessTone: solved ? "ok" : "idle",
+		color: colA,
+		label: `${labelA}: ${round(split)}`,
+		width: 132,
+		height: 170
+	}) : null;
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		controls,
+		aside: twin ? /* @__PURE__ */ jsx("div", {
+			style: {
+				display: "grid",
+				placeItems: "center"
+			},
+			children: twin
+		}) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { RatioShareLab };

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

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

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

@@ -0,0 +1,22 @@
+import { ReceiptItem } from "../../kit/receipt.mjs";
+import { ReactNode } from "react";
+
+//#region src/math/receipt/preset.d.ts
+interface ReceiptProps {
+  store?: string;
+  items?: ReceiptItem[];
+  currency?: string;
+  /** Which totals to ask for. Default both. */
+  ask?: {
+    items?: boolean;
+    cost?: boolean;
+  };
+  /** Extra wrong tiles (numbers for items, e.g. 18; pass cost ones as "$16"). */
+  distractors?: (string | number)[];
+  title?: string;
+  prompt?: string;
+  activity?: string;
+}
+declare function ReceiptLab(props?: ReceiptProps): ReactNode;
+//#endregion
+export { ReceiptLab, ReceiptProps };

package/dist/math/receipt/preset.mjs

@@ -0,0 +1,137 @@
+'use client';
+
+import { LabFrame } from "../../kit/frame.mjs";
+import { Blank, SlotTray, useSlotFill } from "../../kit/slot-fill.mjs";
+import { ReceiptScene } from "../../kit/receipt.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/math/receipt/preset.tsx
+/**
+* ReceiptLab, "complete the receipt totals", multiplicative + additive reasoning grounded
+* in a real bill. The learner reads qty × unit price per line and tap-fills the total items
+* and total cost from a tile tray (with the classic "summed the prices, forgot the quantity"
+* distractors); a correct fill reveals the totals on the receipt itself.
+*
+* Pure composition of existing primitives: <ReceiptScene> (the concrete twin) + the inline
+* slot engine (`useSlotFill` + `Blank` + `SlotTray`). It is also the seed of the percentage
+* family, swap the "total" question for "apply a 20% discount" on the same scene.
+*/
+const DEFAULT_ITEMS = [{
+	qty: 6,
+	name: "Pineapples",
+	unit: 5
+}, {
+	qty: 3,
+	name: "Mangoes",
+	unit: 2
+}];
+function ReceiptLab(props = {}) {
+	const { store = "Half Foods", items = DEFAULT_ITEMS, currency = "$", ask = {
+		items: true,
+		cost: true
+	}, distractors = [], title = "Complete the receipt totals", prompt = "Each line is the quantity times the price each. Work out the totals.", activity = "receipt-totals" } = props;
+	const totalItems = items.reduce((s, it) => s + it.qty, 0);
+	const totalCost = items.reduce((s, it) => s + it.qty * it.unit, 0);
+	const sumUnit = items.reduce((s, it) => s + it.unit, 0);
+	const money = (n) => `${currency}${Math.round(n * 100) / 100}`;
+	const slots = [];
+	if (ask.items !== false) slots.push({
+		id: "items",
+		answer: totalItems
+	});
+	if (ask.cost !== false) slots.push({
+		id: "cost",
+		answer: money(totalCost)
+	});
+	const itemPool = new Set([
+		totalItems,
+		totalItems * 2,
+		totalCost
+	]);
+	const costPool = new Set([
+		money(totalCost),
+		money(sumUnit),
+		money(Math.round(totalCost * .5))
+	]);
+	const tiles = Array.from(new Set([
+		...ask.items !== false ? itemPool : [],
+		...ask.cost !== false ? costPool : [],
+		...distractors
+	]));
+	const [revealed, setRevealed] = useState({
+		items: false,
+		cost: false
+	});
+	const fill = useSlotFill(slots, tiles, activity, () => setRevealed({
+		items: true,
+		cost: true
+	}));
+	const figure = /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			justifyContent: "center"
+		},
+		children: /* @__PURE__ */ jsx(ReceiptScene, {
+			store,
+			items,
+			currency,
+			revealItems: revealed.items || fill.filled.items != null,
+			revealCost: revealed.cost || fill.filled.cost != null
+		})
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		footer: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				gap: 14,
+				justifyItems: "center",
+				marginTop: 4
+			},
+			children: [
+				/* @__PURE__ */ jsxs("p", {
+					style: {
+						margin: 0,
+						fontWeight: 700,
+						fontSize: 16,
+						lineHeight: 1.9,
+						textAlign: "center"
+					},
+					children: [ask.items !== false && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						"A total of ",
+						/* @__PURE__ */ jsx(Blank, {
+							fill,
+							id: "items"
+						}),
+						" items were purchased.",
+						" "
+					] }), ask.cost !== false && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						"The total cost was ",
+						/* @__PURE__ */ jsx(Blank, {
+							fill,
+							id: "cost",
+							width: 64
+						}),
+						"."
+					] })]
+				}),
+				/* @__PURE__ */ jsx(SlotTray, { fill }),
+				fill.solved && /* @__PURE__ */ jsx("p", {
+					role: "status",
+					style: {
+						margin: 0,
+						color: "var(--stage-good)",
+						fontWeight: 700
+					},
+					children: "✓ Receipt complete."
+				})
+			]
+		}),
+		children: figure
+	});
+}
+
+//#endregion
+export { ReceiptLab };

package/dist/math/sequence-predict/index.d.mts

@@ -0,0 +1 @@
+import { SequencePredict, SequencePredictProps, SequenceRule } from "./preset.mjs";

package/dist/math/sequence-predict/preset.d.mts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+
+//#region src/math/sequence-predict/preset.d.ts
+type SequenceRule = 'geometric' | 'arithmetic';
+interface SequencePredictProps {
+  /** First term (index 0). */
+  start?: number;
+  rule?: SequenceRule;
+  /** ×ratio (geometric) or +difference (arithmetic). */
+  factor?: number;
+  /** How many leading terms show their value. */
+  shown?: number;
+  /** How many following terms the learner predicts. */
+  predict?: number;
+  /** Caption for each dish, e.g. "Day". */
+  stepLabel?: string;
+  /** Extra wrong-answer tiles in the tray. */
+  distractors?: number[];
+  /** Light up the items added at each step (the "it doubled" cue). */
+  highlightNew?: boolean;
+  /** Which COUNT scene represents each term: 'cluster' | 'grid' | 'coins' | 'blocks' | … */
+  scene?: string;
+  /** Tint for the items (default accent). */
+  color?: string;
+  /** Round dish values (keep integers for counts). */
+  integer?: boolean;
+  height?: number;
+  title?: string;
+  prompt?: string;
+  activity?: string;
+}
+declare function SequencePredict(props?: SequencePredictProps): ReactNode;
+//#endregion
+export { SequencePredict, SequencePredictProps, SequenceRule };

package/dist/math/sequence-predict/preset.mjs

@@ -0,0 +1,130 @@
+'use client';
+
+import { LabFrame } from "../../kit/frame.mjs";
+import { getScene } from "../../kit/scenes.mjs";
+import { SlotFill } from "../../kit/slot-fill.mjs";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/math/sequence-predict/preset.tsx
+/**
+* SequencePredict, the flagship "watch it grow, then predict the next term" lab, the
+* joke-that-doubles lesson. A sequence is shown as a row of <DotCluster> dishes (you
+* SEE 3 → 6 → 12 get denser, the new dots lit up), and the learner fills the hidden
+* terms by tapping number tiles (<SlotFill>) instead of typing. It's the exponential/
+* geometric counterpart to <LinearModelLab>: discover the multiplicative (or additive)
+* rule from the picture, not from a formula handed to you.
+*
+* Authorable as one config: the start value, ×ratio or +difference, how many terms are
+* shown vs predicted, the story sentence, and the distractor tiles. Same engine covers
+* "doubles each day", "halves each hour", "+3 each step", compound interest, half-life.
+*/
+function buildTerms(start, rule, factor, n, integer) {
+	const out = [start];
+	for (let i = 1; i < n; i++) {
+		const v = rule === "geometric" ? out[i - 1] * factor : out[i - 1] + factor;
+		out.push(integer ? Math.round(v) : v);
+	}
+	return out;
+}
+/** Plausible wrong tiles, the classic "added instead of multiplied" near-misses. */
+function autoDistractors(answers, terms, factor) {
+	const real = new Set(terms);
+	const cand = /* @__PURE__ */ new Set();
+	for (const a of answers) {
+		cand.add(a + factor);
+		cand.add(a - factor);
+		cand.add(Math.round(a * 1.5));
+	}
+	return [...cand].filter((v) => v > 0 && !real.has(v)).sort((x, y) => x - y).slice(0, 3);
+}
+function SequencePredict(props = {}) {
+	const { start = 3, rule = "geometric", factor = 2, shown = 1, predict = 2, stepLabel = "Day", distractors = [], highlightNew = true, scene = "cluster", color, integer = true, height, title = "How does it grow?", prompt = rule === "geometric" ? `Each ${stepLabel.toLowerCase()} it multiplies by ${factor}. Fill in the hidden counts.` : `Each ${stepLabel.toLowerCase()} it changes by ${factor}. Fill in the hidden counts.`, activity = "sequence-predict" } = props;
+	const nTerms = shown + predict;
+	const terms = buildTerms(start, rule, factor, nTerms, integer);
+	const [revealed, setRevealed] = useState(false);
+	const dish = Math.max(96, Math.min(140, (height ?? 150) - (nTerms > 4 ? (nTerms - 4) * 8 : 0)));
+	const slots = [];
+	for (let i = shown; i < nTerms; i++) slots.push({
+		id: `t${i}`,
+		answer: terms[i],
+		label: `${stepLabel} ${i}`
+	});
+	const answers = slots.map((s) => Number(s.answer));
+	const extras = distractors.length ? distractors : autoDistractors(answers, terms, factor);
+	const tilePool = Array.from(new Set([...answers, ...extras])).sort((a, b) => a - b);
+	const sceneMeta = getScene(scene) ?? getScene("cluster");
+	const figure = /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			gap: 14,
+			justifyContent: "center",
+			flexWrap: "wrap",
+			alignItems: "flex-end"
+		},
+		children: terms.map((v, i) => {
+			const isPredicted = i >= shown;
+			const show = !isPredicted || revealed;
+			const added = i === 0 ? 0 : Math.max(0, terms[i] - terms[i - 1]);
+			return /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "grid",
+					justifyItems: "center",
+					gap: 4,
+					padding: 6,
+					borderRadius: 12,
+					border: isPredicted && i === nTerms - 1 ? "2px solid var(--stage-accent)" : "2px solid transparent"
+				},
+				children: [
+					/* @__PURE__ */ jsxs("span", {
+						style: {
+							fontSize: 13,
+							fontWeight: 700,
+							color: "var(--stage-fg)"
+						},
+						children: [
+							stepLabel,
+							" ",
+							i
+						]
+					}),
+					sceneMeta.render({
+						count: v,
+						highlight: highlightNew ? added : 0,
+						width: dish,
+						height: dish,
+						color
+					}),
+					/* @__PURE__ */ jsx("span", {
+						style: {
+							minWidth: 32,
+							padding: "2px 8px",
+							borderRadius: 5,
+							fontSize: 14,
+							fontWeight: 800,
+							textAlign: "center",
+							background: "var(--stage-bg)",
+							border: "1.5px solid color-mix(in oklab, var(--stage-fg) 30%, transparent)",
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: show ? v : "?"
+					})
+				]
+			}, i);
+		})
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		footer: /* @__PURE__ */ jsx(SlotFill, {
+			slots,
+			tiles: tilePool,
+			activity,
+			onSolved: () => setRevealed(true)
+		}),
+		children: figure
+	});
+}
+
+//#endregion
+export { SequencePredict };

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

@@ -0,0 +1 @@
+import { StraightLineLab, StraightLineMode, StraightLineProps } from "./preset.mjs";

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

@@ -0,0 +1,37 @@
+import { LabAskSpec } from "../../kit/ask.mjs";
+import { ReactNode } from "react";
+import { Vec2 } from "@classytic/stage";
+
+//#region src/math/straight-line/preset.d.ts
+type StraightLineMode = 'two-point' | 'gradient-intercept' | 'intercept-form' | 'parallel' | 'perpendicular';
+interface StraightLineProps {
+  mode?: StraightLineMode;
+  /** Starting draggable points (two-point / gradient-intercept / intercept-form). */
+  pointA?: Vec2;
+  pointB?: Vec2;
+  /** The fixed line for parallel / perpendicular modes. */
+  given?: {
+    m: number;
+    c: number;
+  };
+  /** Starting position of the draggable point P (parallel / perpendicular). */
+  through?: Vec2;
+  view?: {
+    xMin: number;
+    xMax: number;
+    yMin: number;
+    yMax: number;
+  };
+  height?: number;
+  /** Drag snap step in units (0 = free). Default 1. */
+  snap?: number;
+  /** two-point: also show |AB| and the midpoint. */
+  showDistance?: boolean;
+  title?: string;
+  prompt?: string;
+  ask?: LabAskSpec;
+  activity?: string;
+}
+declare function StraightLineLab(props?: StraightLineProps): ReactNode;
+//#endregion
+export { StraightLineLab, StraightLineMode, StraightLineProps };