@classytic/labs 0.6.0 → 0.7.0

package/dist/lab-def/lab-runtime.mjs

@@ -3,7 +3,8 @@
 import { LabEmbedProvider } from "../kit/embed.mjs";
 import { LabRestartScope } from "../kit/restart.mjs";
 import { ControlPolicy } from "../kit/frame.mjs";
-import { Component, createElement, useCallback, useEffect, useState } from "react";
+import { loadRuntime, loadWithRetry } from "./runtime-load.mjs";
+import { Component, createElement, useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@/components/ui/button";
 
@@ -11,8 +12,8 @@ import { Button } from "@/components/ui/button";
 /**
 * LabRuntime — render a lab from its manifest's PER-LAB lazy loader. Mirrors the
 * loading / ready / error+retry states of the domain-level LazyLab (blocks/lazy-resolve),
-* but the boundary here is one chunk PER LAB (`manifest.loadRuntime`), not per domain —
-* opening one lab downloads only that lab, not its whole subject.
+* with the boundary selected by each manifest's `loadRuntime`. Shared dependencies and
+* host registry costs still depend on the consumer's bundle graph and require measurement.
 */
 /**
 * Catches a lab that throws while RENDERING (bad authored data, not a failed import).
@@ -64,27 +65,63 @@ var LabRenderBoundary = class extends Component {
 		});
 	}
 };
-function LabRuntime({ loader, preload, preloadKey, attributes }) {
+function LabRuntime({ loader, preload, preloadKey, attributes, activation = "immediate" }) {
+	const host = useRef(null);
+	const focusedPlaceholder = useRef(false);
+	const [activated, setActivated] = useState(activation === "immediate");
+	const active = activation === "immediate" || activated;
+	const activate = useCallback(() => setActivated(true), []);
 	const [state, setState] = useState({
+		loader,
+		preload,
+		preloadKey,
 		status: "loading",
 		Comp: null
 	});
 	const [attempt, setAttempt] = useState(0);
+	const current = state.loader === loader && state.preload === preload && state.preloadKey === preloadKey;
+	const ready = current && state.status === "ready" && state.Comp;
 	useEffect(() => {
+		if (active || activation !== "near-viewport") return;
+		const element = host.current;
+		if (!element) return;
+		if (typeof IntersectionObserver === "undefined") return activate();
+		const observer = new IntersectionObserver((entries) => {
+			if (!entries.some((entry) => entry.isIntersecting)) return;
+			observer.disconnect();
+			activate();
+		}, { rootMargin: "300px 0px" });
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [
+		active,
+		activation,
+		activate
+	]);
+	useEffect(() => {
+		if (!active) return;
 		let alive = true;
 		setState({
+			loader,
+			preload,
+			preloadKey,
 			status: "loading",
 			Comp: null
 		});
-		const load = () => Promise.all([loader(), preload?.(attributes) ?? Promise.resolve()]);
-		load().catch(() => new Promise((wait) => setTimeout(wait, 600)).then(load)).then(([mod]) => {
+		Promise.all([loadRuntime(loader), preload ? loadWithRetry(() => preload(attributes)) : Promise.resolve()]).then(([mod]) => {
 			if (alive) setState({
+				loader,
+				preload,
+				preloadKey,
 				status: "ready",
 				Comp: mod.default
 			});
 		}, (error) => {
 			console.error("[labs] a lab runtime failed to load", error);
 			if (alive) setState({
+				loader,
+				preload,
+				preloadKey,
 				status: "error",
 				Comp: null
 			});
@@ -93,73 +130,127 @@ function LabRuntime({ loader, preload, preloadKey, attributes }) {
 			alive = false;
 		};
 	}, [
+		active,
 		loader,
 		preload,
 		preloadKey,
 		attempt
 	]);
+	useLayoutEffect(() => {
+		if (!ready && !(current && state.status === "error") || !focusedPlaceholder.current || !host.current) return;
+		const first = host.current.querySelector("button:not([disabled]):not([aria-disabled=\"true\"]), [tabindex=\"0\"]:not([aria-disabled=\"true\"]), input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href]");
+		(first ?? host.current).focus();
+		focusedPlaceholder.current = !ready;
+	}, [
+		ready,
+		current,
+		state.status
+	]);
 	const retry = useCallback(() => setAttempt((n) => n + 1), []);
-	if (state.status === "error") {
-		return /* @__PURE__ */ jsxs("div", {
-			role: "alert",
-			style: {
-				display: "grid",
-				placeItems: "center",
-				gap: 8,
-				minHeight: 80,
-				padding: 12,
-				color: "var(--destructive)",
-				fontSize: 12,
-				textAlign: "center"
-			},
-			children: [/* @__PURE__ */ jsx("span", { children: "This lab failed to load." }), /* @__PURE__ */ jsx(Button, {
-				type: "button",
-				size: "sm",
-				variant: "outline",
-				onClick: retry,
-				children: "Retry"
-			})]
-		});
-	}
-	if (state.status === "loading" || !state.Comp) {
-		return /* @__PURE__ */ jsx("div", {
-			"aria-busy": "true",
-			style: {
-				display: "grid",
-				placeItems: "center",
-				minHeight: 80,
-				color: "var(--stage-muted)",
-				fontSize: 12
-			},
-			children: "loading lab…"
-		});
-	}
-	/**
-	* Every lab rendered from an MDX tag arrives here, and only here, so this is where a
-	* lab learns that the surrounding lesson has already introduced it. Importing a lab
-	* component directly (gallery, stage-preview, authoring) bypasses this and keeps the
-	* full self-introducing heading, which is correct: there, nothing else names it.
-	*
-	* The authored title/prompt ride the same provider rather than relying on the lab to
-	* thread them: most labs never declared the props, so a lesson could not rename them.
-	* They are still passed to the component too, for the labs that do take them.
-	*/
-	/**
-	* The creator's control policy rides the same provider, for the same reason.
-	*
-	* `controlConfig` is how a teacher narrows a multi-mode lab to the one setup today's lesson is
-	* about: lock the temperature so the class explores pressure against volume and nothing else.
-	* The mechanism has been there the whole time and 18 of 296 labs could receive it, because each
-	* one had to declare the prop and forward it by hand. Applied here it reaches every lab rendered
-	* from a manifest, including the ones that will never take the prop.
-	*/
-	return createElement(LabEmbedProvider, {
-		title: attributes.title,
-		prompt: attributes.mission ?? attributes.prompt
-	}, createElement(ControlPolicy, {
-		config: attributes.controlConfig,
-		children: createElement(LabRestartScope, { children: createElement(state.Comp, attributes) })
-	}));
+	const render = () => {
+		if (activation === "near-viewport" && (!active || !current || state.status === "loading")) {
+			return /* @__PURE__ */ jsxs("div", {
+				"aria-busy": active || undefined,
+				style: {
+					display: "grid",
+					placeItems: "center",
+					gap: 8,
+					minHeight: 80,
+					color: "var(--stage-muted)",
+					fontSize: 12
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					role: "status",
+					children: active ? "loading lab…" : "Interactive lab"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					style: { minHeight: "var(--lab-target, 44px)" },
+					"aria-disabled": active || undefined,
+					onClick: activate,
+					children: "Load lab"
+				})]
+			});
+		}
+		if (current && state.status === "error") {
+			return /* @__PURE__ */ jsxs("div", {
+				role: "alert",
+				style: {
+					display: "grid",
+					placeItems: "center",
+					gap: 8,
+					minHeight: 80,
+					padding: 12,
+					color: "var(--destructive)",
+					fontSize: 12,
+					textAlign: "center"
+				},
+				children: [/* @__PURE__ */ jsx("span", { children: "This lab failed to load." }), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "sm",
+					variant: "outline",
+					style: { minHeight: "var(--lab-target, 44px)" },
+					onClick: retry,
+					children: "Retry"
+				})]
+			});
+		}
+		if (!ready) {
+			return /* @__PURE__ */ jsx("div", {
+				"aria-busy": "true",
+				style: {
+					display: "grid",
+					placeItems: "center",
+					minHeight: 80,
+					color: "var(--stage-muted)",
+					fontSize: 12
+				},
+				children: "loading lab…"
+			});
+		}
+		/**
+		* Every lab rendered from an MDX tag arrives here, and only here, so this is where a
+		* lab learns that the surrounding lesson has already introduced it. Importing a lab
+		* component directly (gallery, stage-preview, authoring) bypasses this and keeps the
+		* full self-introducing heading, which is correct: there, nothing else names it.
+		*
+		* The authored title/prompt ride the same provider rather than relying on the lab to
+		* thread them: most labs never declared the props, so a lesson could not rename them.
+		* They are still passed to the component too, for the labs that do take them.
+		*/
+		/**
+		* The creator's control policy rides the same provider, for the same reason.
+		*
+		* `controlConfig` is how a teacher narrows a multi-mode lab to the one setup today's lesson is
+		* about: lock the temperature so the class explores pressure against volume and nothing else.
+		* The mechanism has been there the whole time and 18 of 296 labs could receive it, because each
+		* one had to declare the prop and forward it by hand. Applied here it reaches every lab rendered
+		* from a manifest, including the ones that will never take the prop.
+		*/
+		return createElement(LabEmbedProvider, {
+			title: attributes.title,
+			prompt: attributes.mission ?? attributes.prompt
+		}, createElement(ControlPolicy, {
+			config: attributes.controlConfig,
+			children: createElement(LabRestartScope, { children: createElement(state.Comp, attributes) })
+		}));
+	};
+	const content = render();
+	if (activation === "immediate") return content;
+	return /* @__PURE__ */ jsx("div", {
+		ref: host,
+		tabIndex: -1,
+		onPointerEnter: activate,
+		onFocusCapture: () => {
+			if (!ready) focusedPlaceholder.current = true;
+			activate();
+		},
+		onBlurCapture: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) focusedPlaceholder.current = false;
+		},
+		children: content
+	});
 }
 
 //#endregion

package/dist/lab-def/runtime-load.mjs

@@ -0,0 +1,35 @@
+//#region src/lab-def/runtime-load.ts
+/** Private loader cache: the stable loader function identifies one runtime chunk.
+* Rejected requests are evicted; both the passing retry and its timer are shared.
+*/
+const pendingRuntimes = new WeakMap();
+function loadWithRetry(load) {
+	return Promise.resolve().then(load).catch(() => new Promise((resolve) => setTimeout(resolve, 600)).then(load));
+}
+function loadRuntime(loader) {
+	const existing = pendingRuntimes.get(loader);
+	if (existing) return existing;
+	const pending = loadWithRetry(loader).catch((error) => {
+		if (pendingRuntimes.get(loader) === pending) pendingRuntimes.delete(loader);
+		throw error;
+	});
+	pendingRuntimes.set(loader, pending);
+	return pending;
+}
+/**
+* Warm a lab before it mounts: its runtime chunk through the shared cache above (so the later
+* mount joins the same request) and, in parallel, an optional attribute-aware asset preload.
+*
+* Meant for intent (pointer enter or focus on a lesson's lab link, a "next step" button), so it
+* never rejects: it resolves `true` once both are warm and `false` when a load failed, leaving the
+* mounted lab to show its own Retry. On the server it does nothing and resolves `false`, so it is
+* safe to call from shared render code. Calling it again is cheap: the runtime request is shared
+* and asset preloads are expected to cache by their own key.
+*/
+function preloadRuntime(loader, assets) {
+	if (typeof document === "undefined") return Promise.resolve(false);
+	return Promise.all([loadRuntime(loader), assets ? loadWithRetry(assets) : undefined]).then(() => true, () => false);
+}
+
+//#endregion
+export { loadRuntime, loadWithRetry, preloadRuntime };

package/dist/lab-def/to-block.mjs

@@ -47,7 +47,12 @@ function manifestToBlock(manifest) {
 				onChange,
 				...manifest.omit ? { omit: manifest.omit } : {}
 			});
-			return /* @__PURE__ */ jsxs("div", { children: [panel, runtime] });
+			const preview = manifest.schema.safeParse(attributes).success ? runtime : /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "py-2 text-sm text-muted-foreground",
+				children: "Complete the highlighted fields to preview this lab."
+			});
+			return /* @__PURE__ */ jsxs("div", { children: [panel, preview] });
 		}
 	});
 }

package/dist/logic/LogicScene.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import { textWidth } from "../kit/figure/text-metrics.mjs";
 import { FigText } from "../kit/figure/text.mjs";
 import { Figure, HUE, STROKE } from "../kit/figure/figure.mjs";
 import { useMarkDrawn } from "../runtime/drawn-controls.mjs";
@@ -10,7 +11,6 @@ import { JunctionDot, Wire } from "../kit/electronics/wire.mjs";
 import { InputSwitch } from "../kit/electronics/logic-bench.mjs";
 import "../kit/electronics/index.mjs";
 import { getGate } from "./registry.mjs";
-import { registerBuiltinGates } from "./gates.mjs";
 import { evaluate } from "./evaluate.mjs";
 import { GateGlyph, gatePorts } from "../kit/logic-gates/gate.mjs";
 import "../kit/logic-gates/index.mjs";
@@ -50,7 +50,6 @@ function LogicScene({ doc, onToggleInput, inputControl, focusInputControl, level
 	useMarkDrawn(levelControl);
 	const viewport = useRef(null);
 	if (inputControl && !focusInputControl) throw new TypeError("A bound circuit input needs its focus control.");
-	registerBuiltinGates();
 	const sol = evaluate(doc);
 	const levelOf = (id) => sol.depthOf(id);
 	const lit = (id) => sol.high(id) && (reveal === undefined || levelOf(id) < reveal);
@@ -97,7 +96,12 @@ function LogicScene({ doc, onToggleInput, inputControl, focusInputControl, level
 		const gl = (g && getGate(g.kind)?.glyph) ?? "AND";
 		return gatePorts(gl, p.x, p.y - GATE / 2, GATE).output;
 	};
-	const W = outX + 80, H = bot - top + MY * 2;
+	const outputLabelX = outX + LED_R * 2.4 + 10;
+	const W = Math.max(outX + 80, ...doc.outputs.map((output) => outputLabelX + textWidth(output.label ?? "", {
+		role: "note",
+		weight: "semibold"
+	}) + 12));
+	const H = bot - top + MY * 2;
 	const sinkPorts = new Map();
 	const addSink = (src, p) => {
 		if (!src || !p) return;
@@ -420,9 +424,16 @@ function LogicScene({ doc, onToggleInput, inputControl, focusInputControl, level
 								y: oy,
 								r: LED_R,
 								on: lit(o.in),
-								color: o.color,
-								label: o.label
+								color: o.color
 							}),
+							o.label ? /* @__PURE__ */ jsx(FigText, {
+								x: outputLabelX,
+								y: oy + 4,
+								size: "note",
+								weight: "semibold",
+								caps: false,
+								children: o.label
+							}) : null,
 							/* @__PURE__ */ jsx(FigText, {
 								className: "logic-svg-passive",
 								x: outX,

package/dist/logic/index.d.mts

@@ -2,8 +2,7 @@ import { GateType } from "../kit/logic-gates/gate.mjs";
 import { GateDef, LogicDiagnostic, LogicDoc, LogicGate, LogicInput, LogicOutput, LogicSolution } from "./contract.mjs";
 import { PortRef, addNode, connect, deleteNode, disconnect, moveNode, relabel, setGoal, setInputValue, toggleInput } from "../domains/ict/logic-builder/edit-ops.mjs";
 import { LogicEditScene, LogicEditSceneProps } from "../domains/ict/logic-builder/LogicEditScene.mjs";
-import { getGate, listGates, registerGate } from "./registry.mjs";
-import { registerBuiltinGates } from "./gates.mjs";
+import { getGate, listGates, registerBuiltinGates, registerGate } from "./registry.mjs";
 import { evaluate, truthTable } from "./evaluate.mjs";
 import { LogicScene, LogicSceneProps } from "./LogicScene.mjs";
 import { LOGIC_PRESETS, LogicPresetKey, presetDoc } from "./presets.mjs";

package/dist/logic/index.mjs

@@ -1,5 +1,4 @@
-import { getGate, listGates, registerGate } from "./registry.mjs";
-import { registerBuiltinGates } from "./gates.mjs";
+import { getGate, listGates, registerBuiltinGates, registerGate } from "./registry.mjs";
 import { evaluate, truthTable } from "./evaluate.mjs";
 import { LogicScene } from "./LogicScene.mjs";
 import { LogicEditScene } from "../domains/ict/logic-builder/LogicEditScene.mjs";

package/dist/logic/registry.d.mts

@@ -1,5 +1,10 @@
 import { GateDef } from "./contract.mjs";
 //#region src/logic/registry.d.ts
+/**
+ * Attach Labs glyphs to Stage's built-in gates, once. Nothing registers at import (Labs declares
+ * only CSS as side-effectful), so `getGate`, `listGates` and `registerGate` run this first.
+ */
+export declare function registerBuiltinGates(): void;
 export declare function registerGate(def: GateDef): void;
 export declare function getGate(kind: string): GateDef | undefined;
 export declare function listGates(): GateDef[];

package/dist/logic/registry.mjs

@@ -1,9 +1,38 @@
-import { registerGate } from "@classytic/stage/logic";
+import { getGate, registerGate } from "@classytic/stage/logic";
 
 //#region src/logic/registry.ts
 /** Presentation registry paired with Stage's behavioral gate registry. */
 const registry = new Map();
+/** The glyph Labs draws for each Stage built-in gate. */
+const BUILTIN_GLYPHS = {
+	AND: "AND",
+	OR: "OR",
+	NOT: "NOT",
+	NAND: "NAND",
+	NOR: "NOR",
+	XOR: "XOR",
+	XNOR: "XNOR",
+	buffer: "BUF"
+};
+let builtins = false;
+/**
+* Attach Labs glyphs to Stage's built-in gates, once. Nothing registers at import (Labs declares
+* only CSS as side-effectful), so `getGate`, `listGates` and `registerGate` run this first.
+*/
+function registerBuiltinGates() {
+	if (builtins) return;
+	builtins = true;
+	for (const [kind, glyph] of Object.entries(BUILTIN_GLYPHS)) {
+		const engine = getGate(kind);
+		if (!engine) throw new Error(`Stage digital gate "${kind}" is not registered.`);
+		registry.set(kind, {
+			...engine,
+			glyph
+		});
+	}
+}
 function registerGate$1(def) {
+	registerBuiltinGates();
 	registry.set(def.kind, def);
 	registerGate({
 		kind: def.kind,
@@ -13,11 +42,13 @@ function registerGate$1(def) {
 	});
 }
 function getGate$1(kind) {
+	registerBuiltinGates();
 	return registry.get(kind);
 }
 function listGates() {
+	registerBuiltinGates();
 	return [...registry.values()];
 }
 
 //#endregion
-export { getGate$1 as getGate, listGates, registerGate$1 as registerGate };
+export { getGate$1 as getGate, listGates, registerBuiltinGates, registerGate$1 as registerGate };

package/dist/logic/runtime/index.d.mts

@@ -1,7 +1,6 @@
 import { GateType } from "../../kit/logic-gates/gate.mjs";
 import { GateDef, LogicDiagnostic, LogicDoc, LogicGate, LogicInput, LogicOutput, LogicSolution } from "../contract.mjs";
-import { getGate, listGates, registerGate } from "../registry.mjs";
-import { registerBuiltinGates } from "../gates.mjs";
+import { getGate, listGates, registerBuiltinGates, registerGate } from "../registry.mjs";
 import { evaluate, truthTable } from "../evaluate.mjs";
 import { LogicScene, LogicSceneProps } from "../LogicScene.mjs";
 import { LOGIC_PRESETS, LogicPresetKey, presetDoc } from "../presets.mjs";

package/dist/logic/runtime/index.mjs

@@ -1,7 +1,6 @@
 'use client';
 
-import { getGate, listGates, registerGate } from "../registry.mjs";
-import { registerBuiltinGates } from "../gates.mjs";
+import { getGate, listGates, registerBuiltinGates, registerGate } from "../registry.mjs";
 import { evaluate, truthTable } from "../evaluate.mjs";
 import { LogicScene } from "../LogicScene.mjs";
 import { LOGIC_PRESETS, presetDoc } from "../presets.mjs";

package/dist/math/answer-accuracy/core.mjs

@@ -1,5 +1,5 @@
 import { isRefusal } from "@classytic/stage/result";
-import { checkNumber, parseValue } from "@classytic/stage/math";
+import { checkNumber, parseValue } from "@classytic/stage/math/answer";
 
 //#region src/math/answer-accuracy/core.ts
 /**

package/dist/math/index.d.mts

@@ -6,7 +6,8 @@ import { FactorSplitStrategy, FactorTreeNode, NumberStructureMode, factorPairs,
 import { MYSTERY_BUCKET_ASSET } from "./mystery-bucket/asset.mjs";
 import { mysteryBucketDoc } from "./mystery-bucket/preset.mjs";
 import "./mystery-bucket/index.mjs";
-import { Derivation, DerivationProps, DerivationStep } from "../domains/math/reasoning/derivation/derivation.mjs";
+import { DerivationStep } from "../domains/math/reasoning/derivation/steps.mjs";
+import { Derivation, DerivationProps } from "../domains/math/reasoning/derivation/derivation.mjs";
 import { Derived, InteractiveProblem, InteractiveProblemProps, ProblemAsk, ProblemEquation, ProblemParam } from "./interactive/preset.mjs";
 import "./interactive/index.mjs";
 import { GivenCase, RuleChoice, Triangle, ambiguityNote, areaFrom, ruleFor, solveAAS, solveSAS, solveSSA, solveSSS, triangleProblems } from "./oblique-triangle/core.mjs";

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

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { AnswerSpec } from "@classytic/stage/math";
+import { AnswerSpec } from "@classytic/stage/math/answer";
 //#region src/math/interactive/preset.d.ts
 export interface ProblemParam {
   name: string;

package/dist/math/interactive/preset.mjs

@@ -1,14 +1,18 @@
 'use client';
 
-import { FigureValueControl } from "../../kit/figure/value-control.mjs";
-import "../../kit/figure/index.mjs";
+import { Figure } from "../../kit/figure/figure.mjs";
 import { labActivity } from "../../kit/goal-activity.mjs";
 import { AuthoredActivityRuntime } from "../../kit/authored-activity-runtime.mjs";
+import { FigureValueControl, figureValueText, figureValueWidth } from "../../kit/figure/value-control.mjs";
+import { Cluster } from "../../kit/layout.mjs";
+import "../../kit/figure/index.mjs";
 import { useMemo, useState } from "react";
-import { Axes, Dot, Grid, Plot, Stage } from "@classytic/stage";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { isRefusal } from "@classytic/stage/result";
-import { areaBetween, checkAnswer, compileExpr, intersections, normalAt, roots, tangentAt } from "@classytic/stage/math";
+import { areaBetween, compileExpr, intersections, normalAt, roots, tangentAt } from "@classytic/stage/math";
+import { checkAnswer as checkAnswer$1 } from "@classytic/stage/math/answer";
+import { Stage } from "@classytic/stage/view";
+import { Axes, Dot, Grid, Plot } from "@classytic/stage/primitives";
 
 //#region src/math/interactive/preset.tsx
 /**
@@ -200,6 +204,7 @@ function InteractiveProblem({ equations, params = [], xRange = [-6.5, 6.5], yRan
 			yMax
 		},
 		height,
+		pad: 24,
 		preserveAspect: false,
 		ariaLabel: title,
 		children: [
@@ -210,25 +215,10 @@ function InteractiveProblem({ equations, params = [], xRange = [-6.5, 6.5], yRan
 				color: cu.color,
 				weight: 2.5
 			}, i)),
-			overlays,
-			params.map((p, i) => /* @__PURE__ */ jsx(FigureValueControl, {
-				x: 56 + i * 112,
-				y: 4,
-				surface: "paper",
-				name: p.label ?? p.name,
-				value: vals[p.name] ?? p.value,
-				min: p.min,
-				max: p.max,
-				step: p.step ?? 1,
-				label: p.label ?? p.name,
-				onChange: (n) => setVals((v) => ({
-					...v,
-					[p.name]: n
-				}))
-			}, p.name))
+			overlays
 		]
 	});
-	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+	return /* @__PURE__ */ jsxs(AuthoredActivityRuntime, {
 		className: "math-interactive-problem-activity",
 		activity: authoredActivity,
 		activityId: activity,
@@ -245,13 +235,45 @@ function InteractiveProblem({ equations, params = [], xRange = [-6.5, 6.5], yRan
 		] }, i)) }),
 		observation: prompt || ask ? undefined : "Move the values on the graph and watch what changes.",
 		grade: ask ? (_question, response) => ({
-			correct: checkAnswer(ask.answer, String(response)),
-			feedback: checkAnswer(ask.answer, String(response)) ? "" : "Revisit the evidence and try again."
+			correct: checkAnswer$1(ask.answer, String(response)),
+			feedback: checkAnswer$1(ask.answer, String(response)) ? "" : "Revisit the evidence and try again."
 		}) : undefined,
 		response: ask ? String(ask.answer.value) : undefined,
 		onRestart: reset,
 		dirty,
-		children: figure
+		children: [params.length ? /* @__PURE__ */ jsx(Cluster, {
+			"aria-label": "Graph parameters",
+			children: params.map((p) => {
+				const name = p.label ?? p.name;
+				const step = p.step ?? 1;
+				const width = Math.max(...[
+					p.min,
+					p.max,
+					vals[p.name] ?? p.value
+				].map((value) => figureValueWidth(figureValueText(value, step, name))));
+				return /* @__PURE__ */ jsx(Figure, {
+					viewBox: [width, 44],
+					intrinsic: true,
+					interactive: true,
+					label: `Adjust ${name}`,
+					children: /* @__PURE__ */ jsx(FigureValueControl, {
+						x: width / 2,
+						y: 4,
+						surface: "paper",
+						name,
+						value: vals[p.name] ?? p.value,
+						min: p.min,
+						max: p.max,
+						step,
+						label: name,
+						onChange: (n) => setVals((v) => ({
+							...v,
+							[p.name]: n
+						}))
+					})
+				}, p.name);
+			})
+		}) : null, figure]
 	});
 }
 

package/dist/math/lines-in-space/index.mjs

@@ -1,5 +1,5 @@
 import { project } from "../../kit/geometry/orthographic-projection.mjs";
-import { add, angleBetween, clipToSphere, cross, dot, fmt, fmtVec, lineProblems, norm, pointAt, scale, screenCrossing, sub, unit } from "./core.mjs";
+import { add, angleBetween, clipToSphere, cross, dot, fmt as fmt$1, fmtVec, lineProblems, norm, pointAt, scale, screenCrossing, sub, unit } from "./core.mjs";
 import LinesInSpace from "../../domains/math/vectors-matrices/lines-in-space/runtime.mjs";
 import "@classytic/stage/core";
 

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

@@ -1,4 +1,6 @@
-import { AssetSpec } from "@classytic/stage";
+import { AssetSpec } from "@classytic/stage/scene";
 //#region src/math/mystery-bucket/asset.d.ts
 export declare const MYSTERY_BUCKET_ASSET: AssetSpec;
+/** Register the `mystery-bucket` asset (idempotent). `mysteryBucketDoc` calls it. */
+export declare function registerMysteryBucketAsset(): void;
 //#endregion