@classytic/labs 0.1.0 → 0.2.0

package/dist/math/index.d.mts

@@ -1,3 +1,4 @@
+import { AnswerSpec, ExprCheckOpts, checkAnswer, checkExpression, checkNumber, parseValue } from "../kit/answer-check.mjs";
 import { GraphEquation, GraphParam, Grapher, GrapherProps } from "./grapher/preset.mjs";
 import { DerivativeExplorer, DerivativeExplorerProps } from "./derivative-explorer/preset.mjs";
 import { IntegralExplorer, IntegralExplorerProps } from "./integral-explorer/preset.mjs";
@@ -18,8 +19,32 @@ import { FunctionMachineLab, FunctionMachineProps } from "./function-machine/pre
 import { TRIG_FNS, TrigExplorer, TrigFn } from "./trig-explorer.mjs";
 import { Derivation, DerivationProps, DerivationStep } from "./derivation.mjs";
 import { GradientDescent, GradientDescentProps } from "./gradient-descent.mjs";
-import { AnswerSpec, ExprCheckOpts, checkAnswer, checkExpression, checkNumber, parseValue } from "../kit/answer-check.mjs";
 import { Derived, InteractiveProblem, InteractiveProblemProps, ProblemAsk, ProblemEquation, ProblemParam } from "./interactive/preset.mjs";
 import { TriangleTrig, TriangleTrigProps } from "./triangle-trig/preset.mjs";
+import { BrokenTreeLab, BrokenTreeProps } from "./broken-tree/preset.mjs";
+import { StraightLineLab, StraightLineMode, StraightLineProps } from "./straight-line/preset.mjs";
+import { CircleLab, CircleProps } from "./circle/preset.mjs";
+import { ConicKind, ConicLab, ConicProps } from "./conic/preset.mjs";
+import { DomainRangeLab, DomainRangeProps } from "./domain-range/preset.mjs";
+import { LinearModelLab, LinearModelProps } from "./linear-model/preset.mjs";
+import { RateMachineLab, RateMachineProps } from "./rate-machine/preset.mjs";
+import { SequencePredict, SequencePredictProps, SequenceRule } from "./sequence-predict/preset.mjs";
+import { PercentBarLab, PercentBarProps, PercentSegment } from "./percent-bar/preset.mjs";
+import { ComplexMode, ComplexPlaneLab, ComplexPlaneProps } from "./complex/preset.mjs";
+import { Complex, core_d_exports } from "./complex/core.mjs";
+import { COMPLEX_RULES } from "./complex/rules.mjs";
+import { TrigSignsLab, TrigSignsProps } from "./trig/preset.mjs";
+import { core_d_exports as core_d_exports$2 } from "./trig/core.mjs";
+import { TRIG_RULES } from "./trig/rules.mjs";
+import { FractionBarLab, FractionBarProps } from "./fraction-bar/preset.mjs";
+import { RatioShareLab, RatioShareProps } from "./ratio-share/preset.mjs";
+import { ReflectAxis, Transform, TransformKind, TransformLab, TransformProps, applyTf } from "./transform/preset.mjs";
+import { ReceiptLab, ReceiptProps } from "./receipt/preset.mjs";
+import { SystemSolveLab, SystemSolveProps } from "./system-solve/preset.mjs";
+import { CoordPlane, CoordPlaneProps, GradientTriangle, Lin, circleExpandedTex, circleTex, distance, interceptTex, intersectLines, lineFrom, lineTex, lineThrough, midpoint, num, parallelThrough, perpThrough, snapPoint, snapTo } from "../kit/coords.mjs";
 import { Fn1, Line, areaBetween, integrate, intersections, normalAt, roots, tangentAt } from "../kit/expr-analysis.mjs";
-export { AREA_MODEL_ASSET, type AnswerSpec, AreaModelLab, type AreaModelProps, BALANCE_ALGEBRA_ASSET, BalanceAlgebraLab, type BalanceAlgebraProps, type BalanceEquation, Derivation, type DerivationProps, type DerivationStep, DerivativeExplorer, type DerivativeExplorerProps, type Derived, type ExprCheckOpts, type Fn1, FunctionMachineLab, type FunctionMachineProps, GradientDescent, type GradientDescentProps, type GraphEquation, type GraphParam, Grapher, type GrapherProps, GrowingPatternLab, type GrowingPatternProps, HarmonicFormLab, type HarmonicFormProps, IntegralExplorer, type IntegralExplorerProps, InteractiveProblem, type InteractiveProblemProps, LimitExplorer, type LimitExplorerProps, type Line, LinearSystemLab, type LinearSystemProps, MYSTERY_BUCKET_ASSET, MysteryBucketLab, type MysteryBucketProps, NumberLineLab, type NumberLineProps, PATTERN_FIGURE_ASSET, type ParabolaProps, type ProblemAsk, type ProblemEquation, type ProblemParam, type SystemLine, TRIG_FNS, TriangleTrig, type TriangleTrigProps, TrigExplorer, type TrigFn, VertexParabolaLab, areaBetween, areaModelDoc, balanceAlgebraDoc, checkAnswer, checkExpression, checkNumber, growingPatternDoc, integrate, intersections, mysteryBucketDoc, normalAt, parseValue, roots, tangentAt };
+import { PolyRoots, core_d_exports as core_d_exports$1, factorTex, solveEquation } from "./poly/core.mjs";
+import { PolySolution, polyCoeffs, solutionTex, solvePoly } from "../kit/solve.mjs";
+import { factorSteps, solveSteps } from "./poly/steps.mjs";
+import { PolynomialSolverLab, PolynomialSolverProps } from "./poly/preset.mjs";
+export { AREA_MODEL_ASSET, type AnswerSpec, AreaModelLab, type AreaModelProps, BALANCE_ALGEBRA_ASSET, BalanceAlgebraLab, type BalanceAlgebraProps, type BalanceEquation, BrokenTreeLab, type BrokenTreeProps, COMPLEX_RULES, CircleLab, type CircleProps, type Complex, type ComplexMode, ComplexPlaneLab, type ComplexPlaneProps, type ConicKind, ConicLab, type ConicProps, CoordPlane, type CoordPlaneProps, Derivation, type DerivationProps, type DerivationStep, DerivativeExplorer, type DerivativeExplorerProps, type Derived, DomainRangeLab, type DomainRangeProps, type ExprCheckOpts, type Fn1, FractionBarLab, type FractionBarProps, FunctionMachineLab, type FunctionMachineProps, GradientDescent, type GradientDescentProps, GradientTriangle, type GraphEquation, type GraphParam, Grapher, type GrapherProps, GrowingPatternLab, type GrowingPatternProps, HarmonicFormLab, type HarmonicFormProps, IntegralExplorer, type IntegralExplorerProps, InteractiveProblem, type InteractiveProblemProps, LimitExplorer, type LimitExplorerProps, type Lin, type Line, LinearModelLab, type LinearModelProps, LinearSystemLab, type LinearSystemProps, MYSTERY_BUCKET_ASSET, MysteryBucketLab, type MysteryBucketProps, NumberLineLab, type NumberLineProps, PATTERN_FIGURE_ASSET, type ParabolaProps, PercentBarLab, type PercentBarProps, type PercentSegment, type PolyRoots, type PolySolution, PolynomialSolverLab, type PolynomialSolverProps, type ProblemAsk, type ProblemEquation, type ProblemParam, RateMachineLab, type RateMachineProps, RatioShareLab, type RatioShareProps, ReceiptLab, type ReceiptProps, type ReflectAxis, SequencePredict, type SequencePredictProps, type SequenceRule, StraightLineLab, type StraightLineMode, type StraightLineProps, type SystemLine, SystemSolveLab, type SystemSolveProps, TRIG_FNS, TRIG_RULES, type Transform, type TransformKind, TransformLab, type TransformProps, TriangleTrig, type TriangleTrigProps, TrigExplorer, type TrigFn, TrigSignsLab, type TrigSignsProps, VertexParabolaLab, applyTf, areaBetween, areaModelDoc, balanceAlgebraDoc, checkAnswer, checkExpression, checkNumber, circleExpandedTex, circleTex, core_d_exports as complex, distance, factorSteps, factorTex, growingPatternDoc, integrate, interceptTex, intersectLines, intersections, lineFrom, lineTex, lineThrough, midpoint, mysteryBucketDoc, normalAt, num, parallelThrough, parseValue, perpThrough, core_d_exports$1 as poly, polyCoeffs, roots, snapPoint, snapTo, solutionTex, solveEquation, solvePoly, solveSteps, tangentAt, core_d_exports$2 as trig };

package/dist/math/index.mjs

@@ -1,3 +1,4 @@
+import { checkAnswer, checkExpression, checkNumber, parseValue } from "../kit/answer-check.mjs";
 import { Grapher } from "./grapher/preset.mjs";
 import { DerivativeExplorer } from "./derivative-explorer/preset.mjs";
 import { IntegralExplorer } from "./integral-explorer/preset.mjs";
@@ -19,8 +20,32 @@ import { TRIG_FNS, TrigExplorer } from "./trig-explorer.mjs";
 import { Derivation } from "./derivation.mjs";
 import { GradientDescent } from "./gradient-descent.mjs";
 import { areaBetween, integrate, intersections, normalAt, roots, tangentAt } from "../kit/expr-analysis.mjs";
-import { checkAnswer, checkExpression, checkNumber, parseValue } from "../kit/answer-check.mjs";
 import { InteractiveProblem } from "./interactive/preset.mjs";
 import { TriangleTrig } from "./triangle-trig/preset.mjs";
+import { BrokenTreeLab } from "./broken-tree/preset.mjs";
+import { CoordPlane, GradientTriangle, circleExpandedTex, circleTex, distance, interceptTex, intersectLines, lineFrom, lineTex, lineThrough, midpoint, num, parallelThrough, perpThrough, snapPoint, snapTo } from "../kit/coords.mjs";
+import { StraightLineLab } from "./straight-line/preset.mjs";
+import { CircleLab } from "./circle/preset.mjs";
+import { ConicLab } from "./conic/preset.mjs";
+import { DomainRangeLab } from "./domain-range/preset.mjs";
+import { LinearModelLab } from "./linear-model/preset.mjs";
+import { RateMachineLab } from "./rate-machine/preset.mjs";
+import { SequencePredict } from "./sequence-predict/preset.mjs";
+import { PercentBarLab } from "./percent-bar/preset.mjs";
+import { core_exports } from "./complex/core.mjs";
+import { ComplexPlaneLab } from "./complex/preset.mjs";
+import { COMPLEX_RULES } from "./complex/rules.mjs";
+import { core_exports as core_exports$2 } from "./trig/core.mjs";
+import { TrigSignsLab } from "./trig/preset.mjs";
+import { TRIG_RULES } from "./trig/rules.mjs";
+import { FractionBarLab } from "./fraction-bar/preset.mjs";
+import { RatioShareLab } from "./ratio-share/preset.mjs";
+import { TransformLab, applyTf } from "./transform/preset.mjs";
+import { ReceiptLab } from "./receipt/preset.mjs";
+import { SystemSolveLab } from "./system-solve/preset.mjs";
+import { core_exports as core_exports$1, factorTex, solveEquation } from "./poly/core.mjs";
+import { polyCoeffs, solutionTex, solvePoly } from "../kit/solve.mjs";
+import { factorSteps, solveSteps } from "./poly/steps.mjs";
+import { PolynomialSolverLab } from "./poly/preset.mjs";
 
-export { AREA_MODEL_ASSET, AreaModelLab, BALANCE_ALGEBRA_ASSET, BalanceAlgebraLab, Derivation, DerivativeExplorer, FunctionMachineLab, GradientDescent, Grapher, GrowingPatternLab, HarmonicFormLab, IntegralExplorer, InteractiveProblem, LimitExplorer, LinearSystemLab, MYSTERY_BUCKET_ASSET, MysteryBucketLab, NumberLineLab, PATTERN_FIGURE_ASSET, TRIG_FNS, TriangleTrig, TrigExplorer, VertexParabolaLab, areaBetween, areaModelDoc, balanceAlgebraDoc, checkAnswer, checkExpression, checkNumber, growingPatternDoc, integrate, intersections, mysteryBucketDoc, normalAt, parseValue, roots, tangentAt };
+export { AREA_MODEL_ASSET, AreaModelLab, BALANCE_ALGEBRA_ASSET, BalanceAlgebraLab, BrokenTreeLab, COMPLEX_RULES, CircleLab, ComplexPlaneLab, ConicLab, CoordPlane, Derivation, DerivativeExplorer, DomainRangeLab, FractionBarLab, FunctionMachineLab, GradientDescent, GradientTriangle, Grapher, GrowingPatternLab, HarmonicFormLab, IntegralExplorer, InteractiveProblem, LimitExplorer, LinearModelLab, LinearSystemLab, MYSTERY_BUCKET_ASSET, MysteryBucketLab, NumberLineLab, PATTERN_FIGURE_ASSET, PercentBarLab, PolynomialSolverLab, RateMachineLab, RatioShareLab, ReceiptLab, SequencePredict, StraightLineLab, SystemSolveLab, TRIG_FNS, TRIG_RULES, TransformLab, TriangleTrig, TrigExplorer, TrigSignsLab, VertexParabolaLab, applyTf, areaBetween, areaModelDoc, balanceAlgebraDoc, checkAnswer, checkExpression, checkNumber, circleExpandedTex, circleTex, core_exports as complex, distance, factorSteps, factorTex, growingPatternDoc, integrate, interceptTex, intersectLines, intersections, lineFrom, lineTex, lineThrough, midpoint, mysteryBucketDoc, normalAt, num, parallelThrough, parseValue, perpThrough, core_exports$1 as poly, polyCoeffs, roots, snapPoint, snapTo, solutionTex, solveEquation, solvePoly, solveSteps, tangentAt, core_exports$2 as trig };

package/dist/math/integral-explorer/preset.mjs

@@ -11,7 +11,7 @@ import { Axes, Grid, MovableDot, Plot, Polygon, Stage, compileExpr, evaluate, to
 
 //#region src/math/integral-explorer/preset.tsx
 /**
-* IntegralExplorer — the integral as "area under the curve," on @classytic/stage.
+* IntegralExplorer, the integral as "area under the curve," on @classytic/stage.
 * Shades f(x) over [a,b] with n Riemann rectangles (SVG Polygons); drag the
 * endpoints, crank n, switch left/mid/right, and watch the estimate converge to
 * the Simpson reference. Reuses the pure `riemannSum`/`integrate` helpers.
@@ -71,7 +71,7 @@ function IntegralExplorer({ equation = "0.4*x^2 + 0.5", xRange = [-1, 4], a: aIn
 			children: [
 				"“",
 				equation,
-				"” — ",
+				"”, ",
 				model.error
 			]
 		})]

package/dist/math/interactive/preset.mjs

@@ -3,17 +3,17 @@
 import { Slider } from "../../kit/controls.mjs";
 import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
 import { AskBox } from "../../kit/pedagogy.mjs";
-import { areaBetween, intersections, normalAt, roots, tangentAt } from "../../kit/expr-analysis.mjs";
 import { checkAnswer } from "../../kit/answer-check.mjs";
+import { areaBetween, intersections, normalAt, roots, tangentAt } from "../../kit/expr-analysis.mjs";
 import { useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Axes, Dot, Grid, Plot, Stage, compileExpr } from "@classytic/stage";
 
 //#region src/math/interactive/preset.tsx
 /**
-* InteractiveProblem — the authorable engine: a CREATOR writes a config (equations,
+* InteractiveProblem, the authorable engine: a CREATOR writes a config (equations,
 * params, derived quantities, an optional ask+check) and gets a live, graded
-* interactive graph. No bespoke component per question — the same engine plots any
+* interactive graph. No bespoke component per question, the same engine plots any
 * equations, exposes params as sliders, DERIVES what the question needs (roots,
 * intersections, tangent/normal, area) from the symbolic engine, and CHECKS the
 * student's answer symbolically + numerically.

package/dist/math/limit-explorer/preset.mjs

@@ -11,10 +11,10 @@ import { Axes, Grid, MovableDot, Plot, Point, Segment, Stage, compileExpr, evalu
 
 //#region src/math/limit-explorer/preset.tsx
 /**
-* LimitExplorer — "what value does f approach as x → c?", on @classytic/stage.
+* LimitExplorer, "what value does f approach as x → c?", on @classytic/stage.
 * Plots f(x), drops a dashed line at x = c, and walks dots in from both sides
 * (h = 1, 0.1, 0.01, 0.001). When the two sides converge to one value, that's
-* the limit — even where f(c) itself is a hole. Reuses `estimateOneSidedLimit`.
+* the limit, even where f(c) itself is a hole. Reuses `estimateOneSidedLimit`.
 */
 const STEPS = [
 	1,
@@ -22,7 +22,7 @@ const STEPS = [
 	.01,
 	.001
 ];
-const fmt$1 = (v) => Number.isFinite(v) ? v.toFixed(4) : "—";
+const fmt$1 = (v) => Number.isFinite(v) ? v.toFixed(4) : ", ";
 function LimitExplorer({ equation = "(x^2 - 1)/(x - 1)", xRange = [-1, 3], c: cInit = 1, title = "Approaching a limit", height = 320 } = {}) {
 	const [xMin, xMax] = xRange;
 	const [c, setC] = useState(clamp(cInit, xMin, xMax));
@@ -60,7 +60,7 @@ function LimitExplorer({ equation = "(x^2 - 1)/(x - 1)", xRange = [-1, 3], c: cI
 			children: [
 				"“",
 				equation,
-				"” — ",
+				"”, ",
 				model.error
 			]
 		})]

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

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

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

@@ -0,0 +1,53 @@
+import { LabAskSpec } from "../../kit/ask.mjs";
+import { ReactNode } from "react";
+
+//#region src/math/linear-model/preset.d.ts
+interface LinearModelProps {
+  /** Hidden rule: y = slope·x + intercept. */
+  slope?: number;
+  intercept?: number;
+  /** Inputs already shown as data points (e.g. [0, 1]). */
+  given?: number[];
+  /** The input the learner predicts (e.g. 2). */
+  predictX?: number;
+  xMax?: number;
+  yMax?: number;
+  xStep?: number;
+  yStep?: number;
+  /** How close (in y units) counts as correct. Default ½ a y-step. */
+  tolerance?: number;
+  xLabel?: string;
+  yLabel?: string;
+  unit?: string;
+  /** The concrete twin beside the graph: 'none', 'vessel' (supports objects), or any
+   *  registered level scene ('tank' | 'bar' | 'battery' | 'jar' | 'pie' | 'balloon' |
+   *  'thermometer' | …). Author picks the skin; new scenes come from registerScene. */
+  scene?: string;
+  /** Extra concrete twins shown alongside `scene` (multi-representation): the same
+   *  quantity as a balloon AND a battery AND the graph, all live-linked. */
+  extraScenes?: string[];
+  /** Drop discrete objects (marbles) into the vessel = the input count. Off → just liquid. */
+  vesselObjects?: boolean;
+  /**
+   * What the concrete twin's LEVEL tracks:
+   *   'guess' (default) the liquid rises/falls live as you drag the point, so the
+   *           quantity is something you feel increase and decrease; it turns green
+   *           when your reading is right.
+   *   'truth' the twin sits at the real measured level (poured on load) and your
+   *           reading is a dashed line you match to it ("the real lab result").
+   */
+  vesselBinds?: 'guess' | 'truth';
+  /** Word for one object/scene caption (default: the x label). */
+  objectLabel?: string;
+  liquidColor?: string;
+  objectColor?: string;
+  height?: number;
+  title?: string;
+  prompt?: string;
+  activity?: string;
+  /** Optional graded follow-up (typed or multiple choice). */
+  ask?: LabAskSpec;
+}
+declare function LinearModelLab(props?: LinearModelProps): ReactNode;
+//#endregion
+export { LinearModelLab, LinearModelProps };

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

@@ -0,0 +1,164 @@
+'use client';
+
+import { Callout, LabFrame } from "../../kit/frame.mjs";
+import { Feedback, useCheckpoint } from "../../kit/pedagogy.mjs";
+import { useReducedMotion } from "../../kit/anim.mjs";
+import { LabAsk } from "../../kit/ask.mjs";
+import { PredictPlot } from "../../kit/predict.mjs";
+import { Vessel } from "../../kit/vessel.mjs";
+import { getScene } from "../../kit/scenes.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/math/linear-model/preset.tsx
+/**
+* LinearModelLab, the "concrete → graph" proportion/rate lab. A quantity rises in a
+* vessel on one side and is a point on the graph on the other; the learner PLOTS the
+* value for the next input by dragging a point. Discover the rule y = slope·x + intercept
+* from data, then (optionally) answer a follow-up.
+*
+* It is NOT the marble lab wearing different hats: the concrete scene is configurable so a
+* creator builds their OWN idea. `scene='vessel'` is a glass that fills (water pours in on
+* load, the level rises smoothly as you read it); `vesselObjects` decides whether discrete
+* things drop in (marbles for "marbles → volume") or it's just liquid (a bottle filling at
+* a steady rate, savings growing, charge over time). `scene='none'` drops the twin entirely.
+* Swap the labels, units, colours and objects and the same engine is a dozen different labs.
+*/
+const num = (n) => String(Math.round(n * 100) / 100);
+function LinearModelLab(props = {}) {
+	const { slope = 5, intercept = 10, given = [0, 1], predictX = 2, xMax = 6, yMax = 40, xStep = 1, yStep = 5, xLabel = "Marbles", yLabel = "Volume", unit = "mL", scene = "vessel", extraScenes = [], vesselObjects = false, vesselBinds = "guess", objectLabel, liquidColor = "var(--stage-accent)", objectColor = "#e85aa6", height = 340, title = "Find the volume", prompt = `Each step adds the same amount. Drag the point to the ${yLabel.toLowerCase()} at ${predictX} ${(objectLabel ?? xLabel).toLowerCase()}.`, activity = "linear-model", ask } = props;
+	const rule = (x) => slope * x + intercept;
+	const target = rule(predictX);
+	const tol = props.tolerance ?? yStep * .5;
+	const data = given.map((x) => ({
+		x,
+		y: rule(x)
+	}));
+	const [guess, setGuess] = useState({
+		x: predictX,
+		y: 0
+	});
+	const solved = Math.abs(guess.y - target) <= tol;
+	const moved = guess.y > .001;
+	const tone = solved ? "ok" : moved ? "no" : "idle";
+	const reduce = useReducedMotion();
+	const [filled, setFilled] = useState(false);
+	useEffect(() => {
+		const t = setTimeout(() => setFilled(true), reduce ? 0 : 80);
+		return () => clearTimeout(t);
+	}, [reduce]);
+	useCheckpoint({
+		solved,
+		activity,
+		response: `${xLabel}=${predictX} → ${num(guess.y)} ${unit}`
+	});
+	const figure = /* @__PURE__ */ jsx(PredictPlot, {
+		data,
+		guess,
+		onGuess: (p) => setGuess(p),
+		tone,
+		xMax,
+		yMax,
+		xStep,
+		yStep,
+		xLabel,
+		yLabel,
+		height,
+		rule: solved ? {
+			slope,
+			intercept
+		} : null
+	});
+	const readout = /* @__PURE__ */ jsx(Callout, {
+		tone: "result",
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				gap: 6,
+				fontSize: 13,
+				fontVariantNumeric: "tabular-nums"
+			},
+			children: [
+				/* @__PURE__ */ jsxs("span", { children: ["Your reading: ", /* @__PURE__ */ jsxs("strong", {
+					style: { color: `var(--stage-${solved ? "good" : moved ? "warn" : "fg"})` },
+					children: [
+						num(guess.y),
+						" ",
+						unit
+					]
+				})] }),
+				/* @__PURE__ */ jsx(Feedback, {
+					ok: solved,
+					okText: `Spot on, ${num(target)} ${unit}.`,
+					tryText: "Read the pattern off the given points."
+				}),
+				solved && /* @__PURE__ */ jsxs("span", { children: [
+					"Rule: ",
+					/* @__PURE__ */ jsxs("strong", { children: [
+						"+",
+						num(slope),
+						" ",
+						unit
+					] }),
+					" per ",
+					(objectLabel ?? xLabel).toLowerCase().replace(/s$/, ""),
+					"."
+				] })
+			]
+		})
+	});
+	const sceneLabel = `${predictX} ${(objectLabel ?? xLabel).toLowerCase()}`;
+	const truthFrac = (filled ? target : 0) / yMax;
+	const guessFrac = guess.y / yMax;
+	const live = vesselBinds === "guess";
+	const levelFrac = live ? guessFrac : truthFrac;
+	const readingFrac = live ? void 0 : guessFrac;
+	const levelColor = solved ? "var(--stage-good)" : liquidColor;
+	const names = scene === "none" ? [] : [scene, ...extraScenes];
+	const multi = names.length > 1;
+	const dim = multi ? Math.round((height - 8) / names.length) - 6 : height - 8;
+	const twins = names.map((name, i) => {
+		return /* @__PURE__ */ jsx("div", { children: name === "vessel" ? /* @__PURE__ */ jsx(Vessel, {
+			width: multi ? 110 : 132,
+			height: dim,
+			fillFrac: levelFrac,
+			guessFrac: readingFrac,
+			guessTone: tone,
+			objects: vesselObjects ? predictX : 0,
+			liquidColor: levelColor,
+			objectColor,
+			label: multi ? void 0 : sceneLabel,
+			scaleMax: multi ? void 0 : yMax,
+			scaleStep: yStep * 2,
+			unit
+		}) : getScene(name)?.render({
+			frac: levelFrac,
+			guessFrac: readingFrac,
+			guessTone: tone,
+			color: levelColor,
+			label: multi ? void 0 : sceneLabel,
+			width: multi ? 118 : 138,
+			height: dim
+		}) }, i);
+	}).filter((t) => t.props.children);
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt,
+		aside: twins.length ? /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				gap: 10,
+				justifyItems: "center"
+			},
+			children: [twins, readout]
+		}) : readout,
+		footer: ask ? /* @__PURE__ */ jsx(LabAsk, {
+			ask,
+			activity: `${activity}-followup`
+		}) : void 0,
+		children: figure
+	});
+}
+
+//#endregion
+export { LinearModelLab };

package/dist/math/linear-system/preset.mjs

@@ -10,13 +10,13 @@ import { Axes, Dot, Grid, MovableDot, Plot, Stage } from "@classytic/stage";
 
 //#region src/math/linear-system/preset.tsx
 /**
-* LinearSystemLab — two unknowns, two clues, one answer. Each equation is drawn
+* LinearSystemLab, two unknowns, two clues, one answer. Each equation is drawn
 * as a LINE: every point on it is an (x, y) pair that obeys that clue. The ONE
-* point that obeys BOTH clues is where the lines cross — the solution to the
+* point that obeys BOTH clues is where the lines cross, the solution to the
 * system. The learner drags a marker to find it; live ✓/✗ tells them whether the
 * point currently satisfies each clue, so the crossing is "where both go green".
 *
-* SVG <Stage> + Plot + a draggable MovableDot — accessible, theme-aware, on the
+* SVG <Stage> + Plot + a draggable MovableDot, accessible, theme-aware, on the
 * same engine as every other lab. (Lines in slope-intercept y = m·x + b; the
 * intersection is solved exactly.)
 */
@@ -32,7 +32,7 @@ const DEFAULT_LINES = [{
 	label: "clue B",
 	color: "var(--stage-accent-2)"
 }];
-function LinearSystemLab({ lines = DEFAULT_LINES, xRange = [-1, 7], yRange = [-1, 7], title = "Two unknowns, one answer", prompt = "Drag the point to where BOTH lines cross — that (x, y) obeys both clues.", height = 360 } = {}) {
+function LinearSystemLab({ lines = DEFAULT_LINES, xRange = [-1, 7], yRange = [-1, 7], title = "Two unknowns, one answer", prompt = "Drag the point to where BOTH lines cross, that (x, y) obeys both clues.", height = 360 } = {}) {
 	const [l1, l2] = lines;
 	const sol = useMemo(() => {
 		const dm = l1.m - l2.m;

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

@@ -11,9 +11,9 @@ import { Scene, registerAsset } from "@classytic/stage";
 
 //#region src/math/mystery-bucket/preset.tsx
 /**
-* MysteryBucket — the essentials opener. A sealed bucket of hidden weight sits
+* 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
+* 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.
 *
@@ -49,7 +49,7 @@ function mysteryBucketDoc(params) {
 		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 } = {}) {
+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;
@@ -74,15 +74,15 @@ function MysteryBucketLab({ bucketWeight = 5, bucketCount = 1, maxWeights = 12,
 		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 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"}`
+		ariaLabel: `Balance: a mystery bucket against ${count} unit weights, ${balanced ? "level" : "tipping"}`
 	});
 	return /* @__PURE__ */ jsx(LabFrame, {
 		title,

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

@@ -10,10 +10,10 @@ 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
+* 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,
+* you have lands you left of zero, a negative. Reusable for integers,
 * inequalities, and the "owing weight" intuition.
 */
 const snap = (v) => Math.round(v);
@@ -114,6 +114,7 @@ function NumberLineLab({ min = -8, max = 8, start = 0, target, title = "Number l
 					min,
 					max
 				},
+				snap: 1,
 				step: 1,
 				color: markerColor,
 				ariaLabel: "number-line marker"

package/dist/math/parabola/preset.mjs

@@ -8,9 +8,9 @@ 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
+* 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
+* (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) {
@@ -54,6 +54,7 @@ function VertexParabolaLab({ a = 1, height = 380 }) {
 					x: Math.round(p.x),
 					y: Math.round(p.y)
 				}),
+				snap: 1,
 				color: "var(--stage-good)",
 				ariaLabel: "parabola vertex"
 			})
@@ -66,7 +67,7 @@ function VertexParabolaLab({ a = 1, height = 380 }) {
 			children: [
 				"Drag the ",
 				/* @__PURE__ */ jsx("strong", { children: "vertex" }),
-				" — the curve and the equation update. Vertex form ",
+				", the curve and the equation update. Vertex form ",
 				/* @__PURE__ */ jsx(Tex$1, { tex: "y = a(x-h)^2 + k" }),
 				"."
 			]

package/dist/math/pattern/preset.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import { CheckButton, Chip, LabStyles, StatusPill, Stepper } from "../../kit/controls.mjs";
-import { ControlBar, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { ControlBar, ControlExpr, LabFrame, LiveRegion } from "../../kit/frame.mjs";
 import { useCheckpoint } from "../../kit/pedagogy.mjs";
 import { PATTERN_FIGURE_ASSET } from "./asset.mjs";
 import { useMemo, useState } from "react";
@@ -10,7 +10,7 @@ import { Scene, controlsFromScene, registerAsset, resolve, useControlSurface, us
 
 //#region src/math/pattern/preset.tsx
 /**
-* Growing pattern → formula — a SceneDoc FACTORY (Brilliant-style visual
+* Growing pattern → formula, a SceneDoc FACTORY (Brilliant-style visual
 * algebra), built on @classytic/stage. A creator declares the linear rule
 * count(n) = a·n + b; the template GENERATES the figures for n = 1..k and asks
 * the learner to find the rule. A linear rule is fixed by any two points, so
@@ -219,11 +219,8 @@ function GrowingPatternLab({ a = 2, b = 3, steps = 4, prompt = "Find the rule fo
 	return /* @__PURE__ */ jsx(LabFrame, {
 		prompt,
 		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
-			check === "steppers" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-				/* @__PURE__ */ jsx("span", {
-					style: { fontWeight: 600 },
-					children: "Your rule:"
-				}),
+			check === "steppers" ? /* @__PURE__ */ jsxs(ControlExpr, { children: [
+				/* @__PURE__ */ jsx("span", { children: "Your rule:" }),
 				/* @__PURE__ */ jsx(Stepper, {
 					label: "a",
 					value: aGuess,
@@ -234,10 +231,7 @@ function GrowingPatternLab({ a = 2, b = 3, steps = 4, prompt = "Find the rule fo
 						setResult(null);
 					}
 				}),
-				/* @__PURE__ */ jsx("span", {
-					className: "sep",
-					children: "· n \xA0+"
-				}),
+				/* @__PURE__ */ jsx("span", { children: "· n\xA0+" }),
 				/* @__PURE__ */ jsx(Stepper, {
 					label: "b",
 					value: bGuess,
@@ -275,14 +269,14 @@ function GrowingPatternLab({ a = 2, b = 3, steps = 4, prompt = "Find the rule fo
 			result === "correct" && /* @__PURE__ */ jsxs(StatusPill, {
 				ok: true,
 				children: [
-					"✓ Correct — predicts n = ",
+					"✓ Correct, predicts n = ",
 					predictN,
 					" too!"
 				]
 			}),
 			result === "wrong" && /* @__PURE__ */ jsx(StatusPill, {
 				ok: false,
-				children: "Not quite — match every step"
+				children: "Not quite, match every step"
 			})
 		] }),
 		footer: /* @__PURE__ */ jsx(LiveRegion, { children: result === "correct" ? `Correct. The rule is ${answer}.` : "" }),

package/dist/math/percent-bar/index.d.mts

@@ -0,0 +1 @@
+import { PercentBarLab, PercentBarProps, PercentSegment } from "./preset.mjs";

package/dist/math/percent-bar/preset.d.mts

@@ -0,0 +1,37 @@
+import { ReactNode } from "react";
+
+//#region src/math/percent-bar/preset.d.ts
+interface PercentSegment {
+  /** Share of the whole, 0..1 (segments are normalized together). */
+  frac: number;
+  label?: string;
+  color?: string;
+}
+interface PercentBarProps {
+  /** The quantity the full bar represents (100%). Default 100. */
+  whole?: number;
+  /** Unit on the concrete amount, e.g. "students", "mL", "$". */
+  unit?: string;
+  /** Starting fill in percent (0..100). Default 0. */
+  start?: number;
+  /** Goal in percent; solved when the fill lands on it. Omit for free explore. */
+  target?: number;
+  /** Snap granularity in percent. Default 5. */
+  snapPct?: number;
+  /** Show the concrete amount (percent × whole) alongside the percent. */
+  showValue?: boolean;
+  /** Optional authored breakdown drawn on a reference bar above the slider. */
+  segments?: PercentSegment[];
+  /** Caption for the reference bar (e.g. "The class", "Monthly budget"). */
+  referenceLabel?: string;
+  /** Optional concrete twin of the percentage: any level scene ('pie' | 'battery' |
+   *  'jar' | 'balloon' | …). A percentage shown as a pie filling is the obvious one. */
+  scene?: string;
+  height?: number;
+  title?: string;
+  prompt?: string;
+  activity?: string;
+}
+declare function PercentBarLab(props?: PercentBarProps): ReactNode;
+//#endregion
+export { PercentBarLab, PercentBarProps, PercentSegment };