@classytic/labs 0.6.0 → 0.7.0

package/dist/illustrations/story-scene/physics/see-saw.mjs

@@ -1,9 +1,10 @@
 'use client';
 
 import { HUE, STROKE, tint } from "../../../kit/figure/figure.mjs";
+import { Grounding } from "../../../kit/scene/materials.mjs";
 import { GAUGE } from "../../../kit/figure/gauge.mjs";
-import { Ground, Shadow } from "../../../kit/scene/scenery.mjs";
 import "../../../kit/figure/index.mjs";
+import { Ground } from "../../../kit/scene/scenery.mjs";
 import { phase, r2 } from "../model.mjs";
 import { Dim, INK, Label } from "../parts.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -65,9 +66,9 @@ function SeeSawScene({ q, t }) {
 	const labelR = useForce ? q.label("forceR") : q.label("massR");
 	return /* @__PURE__ */ jsxs("g", { children: [
 		/* @__PURE__ */ jsx(Ground, {}),
-		/* @__PURE__ */ jsx(Shadow, {
+		/* @__PURE__ */ jsx(Grounding, {
 			cx: PX,
-			cy: 188 + 1,
+			y: 188 + 1,
 			rx: 40,
 			ry: 4
 		}),

package/dist/illustrations/story-scene/physics/trolley-pull.mjs

@@ -1,9 +1,10 @@
 'use client';
 
 import { HUE, STROKE, alpha, tint } from "../../../kit/figure/figure.mjs";
+import { Grounding } from "../../../kit/scene/materials.mjs";
 import { Arrow } from "../../../kit/figure/beam.mjs";
-import { Ground, Shadow } from "../../../kit/scene/scenery.mjs";
 import "../../../kit/figure/index.mjs";
+import { Ground } from "../../../kit/scene/scenery.mjs";
 import { lerp, phase, r2 } from "../model.mjs";
 import { AngleArc, INK, Label, useStoryPaint } from "../parts.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -28,9 +29,9 @@ function TrolleyPullScene({ q, t }) {
 		/* @__PURE__ */ jsxs("g", {
 			transform: `translate(${r2(dx)} 0)`,
 			children: [
-				/* @__PURE__ */ jsx(Shadow, {
+				/* @__PURE__ */ jsx(Grounding, {
 					cx: 96,
-					cy: 188 + 1,
+					y: 188 + 1,
 					rx: 62,
 					ry: 4
 				}),

package/dist/illustrations/story-scene/story-scene.mjs

@@ -1,13 +1,16 @@
 'use client';
 
 import { Figure } from "../../kit/figure/figure.mjs";
+import { useReducedMotion as useReducedMotion$1 } from "../../kit/anim.mjs";
 import "../../kit/figure/index.mjs";
 import { STORY_SCENE_IDS, isStorySceneId } from "./specs.mjs";
 import { describeStory, resolveStory } from "./model.mjs";
 import { SceneClip, VIEW } from "./parts.mjs";
 import { loadStoryScene, loadedStoryScene } from "./registry.mjs";
+import { useFrameDriver } from "@classytic/stage/core";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { reducedVariant } from "@classytic/stage/motion";
 
 //#region src/illustrations/story-scene/story-scene.tsx
 /**
@@ -36,35 +39,41 @@ function parseValues(values) {
 		return {};
 	}
 }
-/** 0 → 1 once, when the picture first scrolls into view. Starts (and stays) at 1 when not playing. */
+/**
+* 0 → 1 once, when the picture first scrolls into view. Starts (and stays) at 1 when not playing.
+* An explain motion on the shared frame clock (a ClockProvider driver reproduces it): under
+* reduced motion, live, it finishes at once (
+educedVariant('explain')), so the finished picture
+* shows. The picture is a pure function of 	, so this one short move re-renders only the
+* illustration, for its 1.5 s.
+*/
 function useStoryProgress(ref, play, signature) {
 	const [t, setT] = useState(1);
+	const reduced = useReducedMotion$1();
+	const driver = useFrameDriver();
 	useIsoLayoutEffect(() => {
-		if (!play) {
-			setT(1);
-			return;
-		}
-		const reduce = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
-		if (reduce) {
+		if (!play || reduced && reducedVariant("explain").mode === "finish") {
 			setT(1);
 			return;
 		}
 		setT(0);
-		let raf = 0;
-		let start = 0;
-		const step = (now) => {
-			if (!start) start = now;
-			const k = Math.min(1, (now - start) / DURATION_MS);
-			setT(k);
-			if (k < 1) raf = requestAnimationFrame(step);
-		};
+		let stop = null;
 		const run = () => {
-			raf = requestAnimationFrame(step);
+			let start = null;
+			stop = driver.subscribe((f) => {
+				start ??= f.timeMs;
+				const k = Math.min(1, (f.timeMs - start) / DURATION_MS);
+				setT(k);
+				if (k === 1) {
+					stop?.();
+					stop = null;
+				}
+			});
 		};
 		const el = ref.current;
 		if (!el || typeof IntersectionObserver === "undefined") {
 			run();
-			return () => cancelAnimationFrame(raf);
+			return () => stop?.();
 		}
 		const io = new IntersectionObserver((entries) => {
 			if (entries.some((entry) => entry.isIntersecting)) {
@@ -75,9 +84,14 @@ function useStoryProgress(ref, play, signature) {
 		io.observe(el);
 		return () => {
 			io.disconnect();
-			cancelAnimationFrame(raf);
+			stop?.();
 		};
-	}, [play, signature]);
+	}, [
+		play,
+		signature,
+		reduced,
+		driver
+	]);
 	return t;
 }
 function StoryScene({ scene = "speedometer", values, ask, unit, currency, caption, animate = true, height }) {

package/dist/index.d.mts

@@ -1,11 +1,8 @@
 import { approxEq, clamp, cn, lerp, num, remap, toDeg, toRad } from "./core/util.mjs";
-import { RealFn, derivativeAt, riemannSum, sampleFunction, secantSlope } from "./core/numeric.mjs";
-import { Rng, gaussian, mulberry32, randInt, sample, shuffle } from "./core/rng.mjs";
 import { RichText } from "./kit/rich.mjs";
 import { EASINGS, Easing, cubicBezier, easeInCubic, easeInOut, easeOutCubic, elastic, linear, rushFrom, rushInto, smooth, squish, thereAndBack } from "./core/easing.mjs";
 import { SciValue, derive, useSciValue, useValue, value } from "./core/reactive.mjs";
-import { Keyframe, TweenOptions, TweenState, keyframes, useTween } from "./core/timeline.mjs";
 import { RichSpan, parseRichText } from "./core/index.mjs";
-import { LabCatalogItem, LabComponent, LabRegistry, LabValidation, createLabRegistry } from "./registry/registry.mjs";
 import { LabRuntime } from "./lab-def/lab-runtime.mjs";
-export { EASINGS, type Easing, type Keyframe, type LabCatalogItem, type LabComponent, type LabRegistry, LabRuntime, type LabValidation, type RealFn, type RichSpan, RichText, type Rng, type SciValue, type TweenOptions, type TweenState, approxEq, clamp, cn, createLabRegistry, cubicBezier, derivativeAt, derive, easeInCubic, easeInOut, easeOutCubic, elastic, gaussian, keyframes, lerp, linear, mulberry32, num, parseRichText, randInt, remap, riemannSum, rushFrom, rushInto, sample, sampleFunction, secantSlope, shuffle, smooth, squish, thereAndBack, toDeg, toRad, useSciValue, useTween, useValue, value };
+import { LabCatalogItem, LabComponent, LabIntentHandlers, LabRegistry, LabRegistryOptions, LabValidation, createLabRegistry } from "./registry/registry.mjs";
+export { EASINGS, type Easing, type LabCatalogItem, type LabComponent, type LabIntentHandlers, type LabRegistry, type LabRegistryOptions, LabRuntime, type LabValidation, type RichSpan, RichText, type SciValue, approxEq, clamp, cn, createLabRegistry, cubicBezier, derive, easeInCubic, easeInOut, easeOutCubic, elastic, lerp, linear, num, parseRichText, remap, rushFrom, rushInto, smooth, squish, thereAndBack, toDeg, toRad, useSciValue, useValue, value };

package/dist/index.mjs

@@ -1,12 +1,9 @@
 import { approxEq, clamp, cn, lerp, num, remap, toDeg, toRad } from "./core/util.mjs";
-import { derivativeAt, riemannSum, sampleFunction, secantSlope } from "./core/numeric.mjs";
-import { gaussian, mulberry32, randInt, sample, shuffle } from "./core/rng.mjs";
 import { RichText } from "./kit/rich.mjs";
 import { EASINGS, cubicBezier, easeInCubic, easeInOut, easeOutCubic, elastic, linear, rushFrom, rushInto, smooth, squish, thereAndBack } from "./core/easing.mjs";
 import { derive, useSciValue, useValue, value } from "./core/reactive.mjs";
-import { keyframes, useTween } from "./core/timeline.mjs";
 import { parseRichText } from "./core/index.mjs";
 import { LabRuntime } from "./lab-def/lab-runtime.mjs";
 import { createLabRegistry } from "./registry/registry.mjs";
 
-export { EASINGS, LabRuntime, RichText, approxEq, clamp, cn, createLabRegistry, cubicBezier, derivativeAt, derive, easeInCubic, easeInOut, easeOutCubic, elastic, gaussian, keyframes, lerp, linear, mulberry32, num, parseRichText, randInt, remap, riemannSum, rushFrom, rushInto, sample, sampleFunction, secantSlope, shuffle, smooth, squish, thereAndBack, toDeg, toRad, useSciValue, useTween, useValue, value };
+export { EASINGS, LabRuntime, RichText, approxEq, clamp, cn, createLabRegistry, cubicBezier, derive, easeInCubic, easeInOut, easeOutCubic, elastic, lerp, linear, num, parseRichText, remap, rushFrom, rushInto, smooth, squish, thereAndBack, toDeg, toRad, useSciValue, useValue, value };

package/dist/kit/active-recall.mjs

@@ -1,6 +1,5 @@
 'use client';
 
-import { mulberry32 } from "../core/rng.mjs";
 import { Tex } from "../core/tex.mjs";
 import { splitInlineMath } from "./rich.mjs";
 import { IconButton } from "./controls.mjs";
@@ -9,6 +8,7 @@ import { isRecallDue, scheduleRecall } from "./recall-schedule.mjs";
 import { useEffect, useId, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircle, BookOpen, Brain, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Layers, ListChecks, Shuffle, Sigma, Sparkles, TriangleAlert, XCircle } from "lucide-react";
+import { mulberry32 } from "@classytic/stage/rng";
 
 //#region src/kit/active-recall.tsx
 /**

package/dist/kit/activity-authoring.d.mts

@@ -84,6 +84,32 @@ export interface AuthoredExpressionQuestion extends AuthoredQuestionBase, TypedA
   domain?: [number, number];
   tolerance?: number;
 }
+/**
+ * A set, typed the way a book writes it: `{1, 2, 3}`, ordered pairs `{(1, 2), (3, 4)}`, or nested
+ * `{∅, {a}, {a, b}}`. Marked as a set (stage's `checkSetAnswer`): order and repeats do not matter.
+ */
+export interface AuthoredSetQuestion extends AuthoredQuestionBase, TypedAnswerBox {
+  kind: 'set';
+  answer: string;
+}
+/**
+ * A solution set of reals, typed as a book writes it: `(-∞, -2) ∪ (0, ∞)`, `[1, 5)`, `x ≥ 3` or
+ * `-1 < x ≤ 2`. Marked by stage's `checkIntervalAnswer`: any form of the same set is right.
+ */
+export interface AuthoredIntervalQuestion extends AuthoredQuestionBase, TypedAnswerBox {
+  kind: 'interval';
+  answer: string;
+}
+/**
+ * "Factorise": right only when the typed answer equals `answer` AND is written as a product of
+ * factors irreducible over Q (stage's `checkFactoredAnswer`). `(x - 3y)(x - 4y)` passes; the
+ * expanded form and a half-way `(x^2 - 4)(x + 1)` do not. `variables` names the letters (`7xy`).
+ */
+export interface AuthoredFactoredQuestion extends AuthoredQuestionBase, TypedAnswerBox {
+  kind: 'factored';
+  answer: string;
+  variables?: string[];
+}
 export interface AuthoredTextQuestion extends AuthoredQuestionBase, TypedAnswerBox {
   kind: 'text';
   answers: string[];
@@ -99,7 +125,7 @@ export interface AuthoredReflectionQuestion extends Omit<AuthoredQuestionBase, '
   rubric: string[];
   placeholder?: string;
 }
-export type AuthoredQuestion = AuthoredChoiceQuestion | AuthoredSelectQuestion | AuthoredNumericQuestion | AuthoredExpressionQuestion | AuthoredTextQuestion | AuthoredOrderingQuestion | AuthoredReflectionQuestion;
+export type AuthoredQuestion = AuthoredChoiceQuestion | AuthoredSelectQuestion | AuthoredNumericQuestion | AuthoredExpressionQuestion | AuthoredSetQuestion | AuthoredIntervalQuestion | AuthoredFactoredQuestion | AuthoredTextQuestion | AuthoredOrderingQuestion | AuthoredReflectionQuestion;
 /** Runtime-only question factory; JSON-authored questions remain in `questions`. */
 export interface AuthoredLiveQuestion {
   readonly modelId: string;

package/dist/kit/activity.mjs

@@ -86,7 +86,7 @@ const ShellRoot = function ShellRoot({ children, className, ref: forwardedRef, r
 		}
 		setFocused(true);
 	};
-	return /* @__PURE__ */ jsx(ActivityContext.Provider, {
+	return /* @__PURE__ */ jsx(ActivityContext, {
 		value: {
 			focused,
 			toggleFocus

package/dist/kit/algorithms/graph.d.mts

@@ -29,7 +29,7 @@ export interface EdgeLayout extends GraphEdgeRoute {
   x2: number;
   y2: number;
   directed: boolean;
-  weight?: string;
+  label?: string;
   labelX: number;
   labelY: number;
   labelBox?: Box;
@@ -49,13 +49,15 @@ export declare const GRAPH_VIEWBOX: {
 };
 export declare const circleHitsBox: (cx: number, cy: number, r: number, box: Box) => boolean;
 export interface GraphLayoutOptions {
+  /** Semantic edge captions (e.g. input symbols), laid out with the same measured bounds as weights. */
+  edgeLabels?: Record<string, string>;
   showWeights?: boolean;
   /** Exact badge strings for the whole authored trace keep placement and framing stable. */
   badgeSamples?: Record<string, readonly string[]>;
 }
 export declare function layoutGraph(graph: AlgorithmGraph, options?: GraphLayoutOptions): GraphLayout;
 /** Actual text and node bounds expand the natural canvas; no name or badge is clipped to presets. */
-export declare function graphLayoutFrame(layout: GraphLayout, extra?: readonly Box[]): {
+export declare function graphLayoutFrame(layout: GraphLayout, extra?: readonly Box[], framing?: 'preset' | 'content'): {
   x: number;
   y: number;
   width: number;
@@ -68,6 +70,11 @@ export interface GraphPick {
   onPick: (value: string) => void;
 }
 export interface AlgorithmGraphViewProps {
+  /** Accessible name for this graph's domain. */
+  label?: string;
+  edgeLabels?: Record<string, string>;
+  /** Small diagrams can frame their measured content instead of reserving the teaching-map preset. */
+  framing?: 'preset' | 'content';
   graph: AlgorithmGraph;
   current?: string;
   activeEdge?: string;
@@ -96,6 +103,6 @@ export interface AlgorithmGraphViewProps {
   /** Draw edge weights. Defaults to whether the graph has any. */
   showWeights?: boolean;
 }
-export declare function AlgorithmGraphView({ graph, current, activeEdge, visited, discovered, pathEdges, distances, badges, badgeSamples, tree, rejected, cycleEdges, ignored, colour, pick, showWeights }: AlgorithmGraphViewProps): import("react").JSX.Element;
+export declare function AlgorithmGraphView({ label, edgeLabels, framing, graph, current, activeEdge, visited, discovered, pathEdges, distances, badges, badgeSamples, tree, rejected, cycleEdges, ignored, colour, pick, showWeights }: AlgorithmGraphViewProps): import("react").JSX.Element;
 //#endregion
 export { AlgorithmGraphLegend, type AlgorithmGraphTone, type Box, boxesOverlap, graphTextWidth, segmentHitsBox };

package/dist/kit/algorithms/graph.mjs

@@ -2,7 +2,6 @@
 
 import { FigText } from "../figure/text.mjs";
 import { GripKey, GripLock } from "../figure/grip.mjs";
-import "../figure/index.mjs";
 import { AlgorithmDiagram } from "./index.mjs";
 import { boxesOverlap, graphTextWidth, segmentHitsBox } from "./graph-geometry.mjs";
 import { layoutGraphTargets } from "./graph-targets.mjs";
@@ -223,17 +222,17 @@ function layoutGraph(graph, options = {}) {
 	});
 	const edges = segments.map((segment) => {
 		const { edge, from, ux, uy, length } = segment;
-		const weight = showWeights ? formatWeight(edge.weight ?? 1) : undefined;
+		const label = options.edgeLabels && Object.hasOwn(options.edgeLabels, edge.id) ? options.edgeLabels[edge.id] : showWeights ? formatWeight(edge.weight ?? 1) : undefined;
 		const offset = mode === "compact" ? 3.2 : 2.9;
 		const base = {
 			...routes.get(edge.id),
 			id: edge.id,
 			directed: Boolean(edge.directed),
-			weight,
+			label,
 			labelX: segment.path ? segment.anchor.x - segment.tangent.y * offset : from.x + ux * length * .5 - uy * offset,
 			labelY: segment.path ? segment.anchor.y + segment.tangent.x * offset : from.y + uy * length * .5 + ux * offset
 		};
-		if (!weight) return base;
+		if (!label) return base;
 		let best;
 		for (const [order, t] of [
 			.5,
@@ -245,7 +244,7 @@ function layoutGraph(graph, options = {}) {
 			for (const [ringIndex, ring] of rings.entries()) for (const sideSign of [1, -1]) {
 				const x = segment.path ? segment.anchor.x + segment.tangent.x * (t - .5) * Math.max(length, 24) - segment.tangent.y * (offset + ring) * sideSign : from.x + ux * length * t - uy * (offset + ring) * sideSign;
 				const y = segment.path ? segment.anchor.y + segment.tangent.y * (t - .5) * Math.max(length, 24) + segment.tangent.x * (offset + ring) * sideSign : from.y + uy * length * t + ux * (offset + ring) * sideSign;
-				const box = textBox(x, y, weight, META_FONT, "middle");
+				const box = textBox(x, y, label, META_FONT, "middle");
 				const score = cost(box, segment) + order * .1 + ringIndex * .8;
 				if (!best || score < best.score) best = {
 					score,
@@ -271,7 +270,7 @@ function layoutGraph(graph, options = {}) {
 	};
 }
 /** Actual text and node bounds expand the natural canvas; no name or badge is clipped to presets. */
-function graphLayoutFrame(layout, extra = []) {
+function graphLayoutFrame(layout, extra = [], framing = "preset") {
 	const boxes = [
 		...extra,
 		...layout.nodes.flatMap((node) => [
@@ -287,8 +286,8 @@ function graphLayoutFrame(layout, extra = []) {
 		...layout.edges.flatMap((edge) => [edge.bounds, ...edge.labelBox ? [edge.labelBox] : []])
 	];
 	if (!boxes.length) return { ...GRAPH_VIEWBOX };
-	const x = Math.min(GRAPH_VIEWBOX.x, ...boxes.map((box) => box.x0 - 5));
-	const right = Math.max(GRAPH_VIEWBOX.x + GRAPH_VIEWBOX.width, ...boxes.map((box) => box.x1 + 5));
+	const x = Math.min(...framing === "preset" ? [GRAPH_VIEWBOX.x] : [], ...boxes.map((box) => box.x0 - 5));
+	const right = Math.max(...framing === "preset" ? [GRAPH_VIEWBOX.x + GRAPH_VIEWBOX.width] : [], ...boxes.map((box) => box.x1 + 5));
 	const y = Math.min(...boxes.map((box) => box.y0)) - 5;
 	const bottom = Math.max(...boxes.map((box) => box.y1)) + 5;
 	return {
@@ -299,7 +298,7 @@ function graphLayoutFrame(layout, extra = []) {
 	};
 }
 const EMPTY = new Set();
-function AlgorithmGraphView({ graph, current, activeEdge, visited = EMPTY, discovered = EMPTY, pathEdges = [], distances, badges, badgeSamples, tree = EMPTY, rejected = EMPTY, cycleEdges = EMPTY, ignored = EMPTY, colour, pick, showWeights }) {
+function AlgorithmGraphView({ label = "Algorithm graph", edgeLabels, framing = "preset", graph, current, activeEdge, visited = EMPTY, discovered = EMPTY, pathEdges = [], distances, badges, badgeSamples, tree = EMPTY, rejected = EMPTY, cycleEdges = EMPTY, ignored = EMPTY, colour, pick, showWeights }) {
 	const markerId = `algorithm-arrow-${useId().replaceAll(":", "")}`;
 	const badgeText = (id) => badges?.[id] ?? (distances ? formatWeight(distances[id] ?? Infinity) : undefined);
 	const samples = Object.fromEntries(graph.nodes.map((node) => {
@@ -308,13 +307,14 @@ function AlgorithmGraphView({ graph, current, activeEdge, visited = EMPTY, disco
 	}));
 	const layout = layoutGraph(graph, {
 		showWeights,
+		edgeLabels,
 		badgeSamples: samples
 	});
 	const targets = layoutGraphTargets(layout, pick?.kind === "edge" ? pick.options.map((o) => ({
 		id: o.value,
 		label: o.label
 	})) : []);
-	const frame = graphLayoutFrame(layout, targets.map((target) => target.box));
+	const frame = graphLayoutFrame(layout, targets.map((target) => target.box), framing);
 	const pathSet = new Set(pathEdges);
 	const pickable = new Map((pick?.options ?? []).map((option) => [option.value, option.label]));
 	const choose = (value) => (event) => {
@@ -327,7 +327,7 @@ function AlgorithmGraphView({ graph, current, activeEdge, visited = EMPTY, disco
 		viewBox: `${frame.x * 5} ${frame.y * 5} ${frame.width * 5} ${frame.height * 5}`,
 		interactive: !!pick,
 		focusKey: pick?.kind === "edge" ? `edge:${pick.picked ?? targets[0]?.id}` : current,
-		label: pick ? "Algorithm graph: choose on the drawing or from the list" : "Algorithm graph",
+		label: pick ? `${label}: choose on the drawing or from the list` : label,
 		children: /* @__PURE__ */ jsxs("g", {
 			className: "algorithm-scene-svg",
 			"data-layout": layout.mode,
@@ -371,7 +371,7 @@ function AlgorithmGraphView({ graph, current, activeEdge, visited = EMPTY, disco
 							x2: edge.x2,
 							y2: edge.y2,
 							markerEnd: edge.directed ? `url(#${markerId})` : undefined
-						}), edge.weight !== undefined && /* @__PURE__ */ jsx(FigText, {
+						}), edge.label !== undefined && /* @__PURE__ */ jsx(FigText, {
 							className: "algorithm-scene-meta",
 							x: edge.labelX,
 							y: edge.labelY,
@@ -379,7 +379,7 @@ function AlgorithmGraphView({ graph, current, activeEdge, visited = EMPTY, disco
 							baseline: "middle",
 							fontSize: META_FONT,
 							caps: false,
-							children: edge.weight
+							children: edge.label
 						})]
 					}, edge.id);
 				}),
@@ -439,7 +439,7 @@ function AlgorithmGraphView({ graph, current, activeEdge, visited = EMPTY, disco
 						]
 					}, node.id);
 				}),
-				/* @__PURE__ */ jsx(GripLock.Provider, {
+				/* @__PURE__ */ jsx(GripLock, {
 					value: { locked: false },
 					children: targets.map((target) => /* @__PURE__ */ jsxs("g", {
 						className: "algorithm-edge-choice",

package/dist/kit/algorithms/index.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { FigText } from "../figure/text.mjs";
+import { ACCENT } from "../scene/tokens.mjs";
 import { Figure } from "../figure/figure.mjs";
 import { useMarkDrawn } from "../../runtime/drawn-controls.mjs";
-import { ACCENT } from "../scene/tokens.mjs";
 import { Solid } from "../scene/objects/block.mjs";
 import "../scene/index.mjs";
 import { useId, useLayoutEffect, useRef, useState } from "react";
@@ -249,7 +249,7 @@ function AlgorithmEdge({ d, active = false }) {
 	});
 }
 /** Preserve table coordinates and usable cells; wide matrices scroll rather than squeeze. */
-function AlgorithmTable({ rows, control, rowLabels, colLabels, corner, followValue, focusKey, inspection = false, resetKey }) {
+function AlgorithmTable({ rows, label = "Dynamic programming table", control, rowLabels, colLabels, corner, followValue, focusKey, inspection = false, resetKey }) {
 	useMarkDrawn(control, "tap");
 	const columns = rows[0]?.length ?? 0;
 	const viewport = useRef(null);
@@ -300,7 +300,7 @@ function AlgorithmTable({ rows, control, rowLabels, colLabels, corner, followVal
 		"data-part": "algorithm-table-viewport",
 		"data-inspection": local ? "local" : undefined,
 		role: "region",
-		"aria-label": "Dynamic programming table",
+		"aria-label": label,
 		"aria-describedby": local ? cueId : undefined,
 		tabIndex: 0,
 		children: /* @__PURE__ */ jsxs("table", {

package/dist/kit/anim.d.mts

@@ -1,42 +1,96 @@
-import { FrameInfo } from "@classytic/stage";
+import { FrameDriver, FrameInfo, useReducedMotion as useReducedMotion$1 } from "@classytic/stage/core";
+import { MotionRole, Sequence, SequenceStep, SpringSpec, VisualSample, VisualStateDef } from "@classytic/stage/motion";
 //#region src/kit/anim.d.ts
+/** One-shot frame requests on a frame driver, in the shape `createPointerDrag` takes. */
+export interface FrameRequest {
+  schedule: (callback: () => void) => number;
+  cancelFrame: (handle: number) => void;
+}
 /**
- * prefers-reduced-motion, hydration-safe and live.
- *
- * It used to be read once during render, which is wrong twice over: the server says `false` while a
- * browser with the setting on says `true` (a hydration mismatch in every SSR'd lab), and the value
- * never followed the learner changing the setting. useSyncExternalStore renders the server snapshot
- * during hydration, then the real value, and re-renders on every change.
- *
- * Stage 0.7 exports the same hook (`useReducedMotion` from `@classytic/stage`); this one goes once
- * Labs builds against that release.
+ * Next-frame callbacks on a frame driver instead of a raw `requestAnimationFrame` (MO-15), so a
+ * pointer flush runs in the same frame, in order, as every other loop on the page, and a
+ * `ClockProvider` driver (a test, a video render) drives drags too.
  */
-export declare function useReducedMotion(): boolean;
-/** The same hook under its older name: it was the hydration-safe variant, which the hook now always is. */
-export declare const useReducedMotionDeferred: typeof useReducedMotion;
+declare function frameRequest(driver: FrameDriver): FrameRequest;
+/** `frameRequest` on this subtree's driver; stable while the driver is. */
+declare function useFrameRequest(): FrameRequest;
 /**
  * Run `step` once per animation frame while `running`, then re-render. Replaces the
  * per-lab `const [, setTick] = useState(0)` + `setTick(t => (t + 1) & 0xffff)` dance:
  * integrate into your refs inside `step`, and the view repaints automatically.
  */
 export declare function useFrameTick(running: boolean, step?: (f: FrameInfo) => void): () => void;
-export interface SettleFeel {
-  /** Spring stiffness; with the default damping, 180 gives a small quick overshoot (a meter needle). */
-  stiffness?: number;
-  damping?: number;
-  /** Close enough to call it settled, in the value's own units (and per second). */
-  epsilon?: number;
-}
 /**
- * A drawn value that SETTLES on its target instead of jumping: a meter needle, a gauge, a pointer
- * that swings past and comes to rest. Animation only: the target is the model's (stage's) truth,
- * and the in-between values never reach the model. Works in a lab with no clock (where `useLabFrame`
- * never fires), and runs frames only while moving.
+ * How a settle moves: any Stage spring spec (`{ stiffness, damping }` or `{ duration, bounce }`,
+ * with `restDelta` as a fraction of the travel) and the motion's role (default `feedback`).
+ */
+export type SettleFeel = SpringSpec & {
+  role?: MotionRole;
+};
+/**
+ * A drawn value that SETTLES on its target instead of jumping: a gauge, a part sliding into place,
+ * a beam that tilts past and comes to rest. Animation only: the target is the model's truth and
+ * the in-between values never reach the model. Works in a lab with no model clock.
  *
- * `apply(value)` writes the drawn value through a ref (`el.setAttribute('transform', …)`), so React
- * never re-renders per frame. Render the target in JSX too, for the server and the first paint.
- * Reduced motion: `apply(target)` at once, no swing.
+ * Runs on Stage's closed-form `springTrack`: frame-rate independent, a new target keeps the
+ * current velocity, and rest is relative to the travel (a 0..1 fade and a 300-unit slide both land
+ * cleanly). `apply(value)` writes through a ref, so React never re-renders per frame; render the
+ * target in JSX for the server and the first paint. Reduced motion: `apply(target)` at once.
  */
 declare function useSettle(target: number, apply: (value: number) => void, feel?: SettleFeel): void;
+export interface FollowFeel {
+  /** Roughly the seconds to reach a new target (critically damped, never past it). Default 0.25. */
+  smoothTime?: number;
+  /** Cap in value units per second. */
+  maxSpeed?: number;
+  /**
+   * Follow-through on a sudden change: a damped ring of `kick * jump` (clamped to `maxKick`), the
+   * swing of a moving-coil needle. Presentation only. Default 0 (none).
+   */
+  kick?: number;
+  maxKick?: number;
+  role?: MotionRole;
+}
+/**
+ * A drawn value that FOLLOWS its target without ever reading past it (`smoothDamp`), optionally
+ * with a small physical ring on sudden changes. For an instrument needle: the number printed beside
+ * it is the authoritative reading and never springs. Returns the drawn value as a ref, so JSX can
+ * render the current pose on a re-render instead of snapping to the target.
+ */
+declare function useFollow(target: number, apply: (value: number) => void, { smoothTime, maxSpeed, kick, maxKick, role }?: FollowFeel): {
+  readonly current: number;
+};
+/** Where a sequence's playhead is sent: its start, its end, the end of a label, or seconds. */
+export type SequenceTarget<L extends string> = 'start' | 'end' | L | number;
+export interface SequenceOptions<L extends string> {
+  /** Where the playhead heads. Changing it mid-play turns back from where the head IS. Default 'end'. */
+  to?: SequenceTarget<L>;
+  /** Where the head starts on mount. Default: at `to` (no play on mount). Pass 'start' to play in. */
+  from?: SequenceTarget<L>;
+  /** Playback rate, sequence seconds per clock second. Default 1. */
+  rate?: number;
+}
+/**
+ * Explanation choreography (cause, response, reading) on the shared clock. `steps` is a Stage
+ * `sequence` (labels, `at` positions, purpose roles); keep it a module constant or memoise it.
+ * `draw(progress, t)` receives every step's eased 0..1 progress on each frame the head moves, and
+ * once on mount, so the picture is a pure function of the head's time (seekable, deterministic).
+ *
+ * Reduced motion uses the sequence's reduced variant: explain steps finish at once, feedback keeps
+ * a short fade, ambient steps hold at 0. Returns the sequence (its labels and duration).
+ */
+declare function useSequence<L extends string>(steps: readonly (SequenceStep & {
+  label: L;
+})[], draw: (progress: Readonly<Record<L, number>>, t: number) => void, { to, from, rate }?: SequenceOptions<L>): Sequence<L>;
+/**
+ * An apparatus's visual state (off, warming, on, cooling, fault) on the shared clock: a bulb that
+ * glows up and fades instead of mounting and unmounting its glow. `def` is a Stage visual-state
+ * definition (`apparatusVisual()`); keep it a module constant. `write(sample)` receives the level
+ * and the shown state on each frame of a transition, and once on mount. Default role `feedback`:
+ * under reduced motion the level jumps to the new state.
+ */
+declare function useVisualState<S extends string>(def: VisualStateDef<S>, state: S, write: (sample: VisualSample<S>) => void, { role }?: {
+  role?: MotionRole;
+}): void;
 //#endregion
-export {};
+export { useReducedMotion$1 as useReducedMotion };