@classytic/labs 0.6.0 → 0.7.0

package/dist/kit/shell/context.mjs

@@ -4,23 +4,55 @@ import { createContext, use } from "react";
 
 //#region src/kit/shell/context.ts
 /**
-* The lab shell contract: one context with `state`, `actions` and `meta` (the Vercel composition
-* rule "state-context-interface"). Every `Shell.*` part reads this interface and nothing else, so
+* The lab shell contract: `state`, `actions` and `meta` (the Vercel composition rule
+* "state-context-interface"), each in its own context lane (below). Every `Shell.*` part reads
+* this interface and nothing else, so
 * a part never knows how the state is kept: the authored-activity provider implements it today,
 * and a hand-built lab can implement it tomorrow without touching a single part.
 */
-const ShellContext = createContext(null);
+const ShellMetaContext = createContext(null);
+const ShellActionsContext = createContext(null);
+const ShellStateContext = createContext(null);
+const ShellVerdictContext = createContext(undefined);
+const ShellSpotlightContext = createContext(undefined);
+const OUTSIDE = "Shell parts must be rendered inside <Shell.Provider>";
+function useShellMeta() {
+	const meta = use(ShellMetaContext);
+	if (!meta) throw new Error(OUTSIDE);
+	return meta;
+}
+function useShellActions() {
+	const actions = use(ShellActionsContext);
+	if (!actions) throw new Error(OUTSIDE);
+	return actions;
+}
+function useShellState() {
+	const state = use(ShellStateContext);
+	if (!state) throw new Error(OUTSIDE);
+	return state;
+}
+/** The checked verdict of the current answer; undefined before Check, on a fresh try, outside a lab. */
+function useShellVerdict() {
+	return use(ShellVerdictContext);
+}
+/**
+* All three lanes, for a shell part that needs the answer draft, the actions and the step together
+* (the choice cards, the Check button). It re-renders on every keystroke: anything that does not
+* read the draft uses a narrower hook. tests/policy/shell-context-lanes.test.ts keeps it in the shell.
+*/
 function useShell() {
-	const value = use(ShellContext);
-	if (!value) throw new Error("Shell parts must be rendered inside <Shell.Provider>");
-	return value;
+	return {
+		state: useShellState(),
+		actions: useShellActions(),
+		meta: useShellMeta()
+	};
 }
 /** For a lab's scene: is the note pointing at this piece of evidence right now? */
 function useSpotlight(id) {
-	return use(ShellContext)?.state.spotlight === id;
+	return use(ShellSpotlightContext) === id;
 }
 /** The host sets the course's teacher once, around its lesson renderer. */
 const CoachContext = createContext(undefined);
 
 //#endregion
-export { CoachContext, ShellContext, useShell, useSpotlight };
+export { CoachContext, ShellActionsContext, ShellMetaContext, ShellSpotlightContext, ShellStateContext, ShellVerdictContext, useShell, useShellActions, useShellMeta, useShellState, useShellVerdict, useSpotlight };

package/dist/kit/shell/earned.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import { ShellContext } from "./context.mjs";
+import { ShellActionsContext, ShellMetaContext, ShellStateContext, ShellVerdictContext } from "./context.mjs";
 import { use } from "react";
 import { jsx } from "react/jsx-runtime";
 
@@ -13,8 +13,8 @@ import { jsx } from "react/jsx-runtime";
 * A scene that draws its own readings reads this and decides what to draw.
 */
 function useEarned() {
-	const shell = use(ShellContext);
-	return shell ? shell.meta.revealed : true;
+	const meta = use(ShellMetaContext);
+	return meta ? meta.revealed : true;
 }
 /**
 * One measured value in the readout line, withheld until the prediction is made. The line mixes set-up
@@ -38,8 +38,9 @@ function Measured({ children, label }) {
 * for one particular prediction; false once it is checked, right or wrong.
 */
 function useAsking(id) {
-	const shell = use(ShellContext);
-	return Boolean(shell && shell.meta.question?.id === id && shell.state.verdict === undefined);
+	const meta = use(ShellMetaContext);
+	const verdict = use(ShellVerdictContext);
+	return Boolean(meta && meta.question?.id === id && verdict === undefined);
 }
 /**
 * Choice question `id` while it is the current step's question, for a scene that lets the learner
@@ -48,13 +49,14 @@ function useAsking(id) {
 * as a row of pills. Undefined on any other step and outside a lab.
 */
 function usePrediction(id) {
-	const shell = use(ShellContext);
-	const question = shell?.meta.question;
-	if (!shell || question?.id !== id || !("choices" in question) || question.kind === "select") return undefined;
-	const committed = shell.state.verdict !== undefined;
-	const picked = shell.state.picked;
+	const question = use(ShellMetaContext)?.question;
+	const state = use(ShellStateContext);
+	const actions = use(ShellActionsContext);
+	if (!state || !actions || question?.id !== id || !("choices" in question) || question.kind === "select") return undefined;
+	const committed = state.verdict !== undefined;
+	const picked = state.picked;
 	const pick = (value) => {
-		if (!committed) shell.actions.pick(value);
+		if (!committed) actions.pick(value);
 	};
 	const options = question.choices.filter((c) => !committed || c.value === picked).map((c) => ({
 		value: c.value,

package/dist/kit/shell/index.d.mts

@@ -2,8 +2,8 @@ import { ModelEntry, WrittenEntry, modelEntry } from "./model-entry.mjs";
 import { Body, Keys, NarrowKeys, Observation, Panel, QuestionFrame, Readings, Readout, Scene, SplitFrame, StackFrame, Stage, Task, Transcript } from "./parts.mjs";
 import { FrozenScene } from "./frozen-scene.mjs";
 import { DirectScene } from "./scene-control.mjs";
-import { Coach, CoachContext, ShellContextValue, useShell, useSpotlight } from "./context.mjs";
-import { ShellProvider, ShellProviderProps } from "./provider.mjs";
+import { Coach, CoachContext, ShellContextValue, useShell, useShellActions, useShellMeta, useShellState, useShellVerdict, useSpotlight } from "./context.mjs";
+import { ShellProvider, ShellProviderProps, ShellScope } from "./provider.mjs";
 import { EvidenceDisclosure, QuestionEvidence, useEvidenceDisclosure } from "./question-evidence.mjs";
 import { NoteProps } from "./note.mjs";
 import { HelpDialogProps } from "./help.mjs";
@@ -71,4 +71,4 @@ export interface LabShellProps extends Omit<ShellProviderProps, 'children' | 'en
 /** The default arrangement of the parts, rendered by `AuthoredActivityRuntime`. */
 export declare function LabShell({ concealEvidence, frame, className, model, task, scene, sceneLabel, controls, keys, readout, observation, evidence, details, transcript, entry, ...provider }: LabShellProps): ReactNode;
 //#endregion
-export { type Coach, CoachContext, type EvidenceDisclosure, type ModelEntry, QuestionEvidence, type ShellContextValue, WrittenEntry, modelEntry, useEvidenceDisclosure, useShell, useSpotlight };
+export { type Coach, CoachContext, type EvidenceDisclosure, type ModelEntry, QuestionEvidence, type ShellContextValue, ShellScope, WrittenEntry, modelEntry, useEvidenceDisclosure, useShell, useShellActions, useShellMeta, useShellState, useShellVerdict, useSpotlight };

package/dist/kit/shell/index.mjs

@@ -3,13 +3,13 @@
 import { HelpDialog } from "./help.mjs";
 import { FocusButton, ShellRoot, useActivity } from "../activity.mjs";
 import "./frame.mjs";
-import { CoachContext, useShell, useSpotlight } from "./context.mjs";
+import { CoachContext, useShell, useShellActions, useShellMeta, useShellState, useShellVerdict, useSpotlight } from "./context.mjs";
 import { Note } from "./note.mjs";
 import { Action, Body, Choices, Entry, Keys, NarrowKeys, Observation, Panel, Prompt, QuestionFrame, Readings, Readout, Response, Scene, SplitFrame, StackFrame, Stage, Steps, Task, Transcript } from "./parts.mjs";
 import { DirectScene } from "./scene-control.mjs";
 import { FrozenScene } from "./frozen-scene.mjs";
 import { SelectChoices } from "./select-choices.mjs";
-import { ShellProvider } from "./provider.mjs";
+import { ShellProvider, ShellScope } from "./provider.mjs";
 import { ModelEntryBinding, WrittenEntry, modelEntry } from "./model-entry.mjs";
 import { QuestionEvidence, useEvidenceDisclosure } from "./question-evidence.mjs";
 import { useRef } from "react";
@@ -19,7 +19,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 /**
 * The lab shell.
 *
-*   <Shell.Provider …>                      state, actions, meta (./context)
+*   <Shell.Provider …>                      state, actions, meta, one context lane each (./context)
 *     <Shell.SplitFrame>                    or <Shell.StackFrame> for full-width labs
 *       <Shell.Steps />                     ✓ Predict — 2 Try it — 3 Look closer   [focus]
 *       <Shell.Body>
@@ -122,4 +122,4 @@ function LabShell({ concealEvidence = false, frame = "split", className, model,
 }
 
 //#endregion
-export { CoachContext, LabShell, Note, QuestionEvidence, Shell, WrittenEntry, modelEntry, useEvidenceDisclosure, useShell, useSpotlight };
+export { CoachContext, LabShell, QuestionEvidence, Shell, ShellScope, WrittenEntry, modelEntry, useEvidenceDisclosure, useShell, useShellActions, useShellMeta, useShellState, useShellVerdict, useSpotlight };

package/dist/kit/shell/model-entry.mjs

@@ -2,8 +2,9 @@
 
 import { TextInput } from "../controls.mjs";
 import { Field } from "../frame.mjs";
-import { ShellContext, useShell } from "./context.mjs";
+import { ShellMetaContext, useShellMeta } from "./context.mjs";
 import { useControl, visibleControls } from "../../runtime/use-control.mjs";
+import { useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/kit/shell/model-entry.tsx
@@ -16,37 +17,54 @@ function modelEntry(model, entry) {
 	};
 }
 function ModelEntryBinding({ entry, children }) {
-	const shell = useShell();
+	const meta = useShellMeta();
 	const input = useControl(entry.model, entry.input);
 	const commit = useControl(entry.model, entry.commit);
 	const unsure = useControl(entry.model, entry.unsure ?? entry.commit);
 	if (commit.kind !== "action") throw new TypeError("A model entry commit must be an action control.");
 	const ready = !input.hidden && !input.locked && !commit.hidden && !commit.locked && commit.enabled;
-	const byId = new Map(shell.meta.steps.map((step) => [step.id, step]));
-	const visible = visibleControls(shell.meta.sequence.current, shell.meta.sequence.history.map((id) => byId.get(id)));
+	const byId = new Map(meta.steps.map((step) => [step.id, step]));
+	const visible = visibleControls(meta.sequence.current, meta.sequence.history.map((id) => byId.get(id)));
 	const inStep = visible === "all" || visible.has(entry.input) && visible.has(entry.commit);
 	const shown = inStep && !input.hidden && !commit.hidden;
-	return /* @__PURE__ */ jsx(ShellContext, {
-		value: {
-			...shell,
-			meta: {
-				...shell.meta,
-				entry: shown ? {
-					form: entry.form,
-					ready,
-					onCheck: () => {
-						if (ready) commit.run();
-					},
-					onUnsure: entry.unsure && unsure.kind === "action" && !unsure.hidden && !unsure.locked && unsure.enabled ? () => unsure.run() : undefined
-				} : undefined
-			}
-		},
+	const canUnsure = Boolean(entry.unsure && unsure.kind === "action" && !unsure.hidden && !unsure.locked && unsure.enabled);
+	const run = useRef({
+		commit,
+		unsure
+	});
+	run.current = {
+		commit,
+		unsure
+	};
+	const form = entry.form;
+	const withEntry = useMemo(() => ({
+		...meta,
+		entry: shown ? {
+			form,
+			ready,
+			onCheck: () => {
+				if (ready) run.current.commit.run();
+			},
+			onUnsure: canUnsure ? () => {
+				const action = run.current.unsure;
+				if (action.kind === "action") action.run();
+			} : undefined
+		} : undefined
+	}), [
+		meta,
+		shown,
+		form,
+		ready,
+		canUnsure
+	]);
+	return /* @__PURE__ */ jsx(ShellMetaContext, {
+		value: withEntry,
 		children
 	});
 }
 /** Enter submits the same bound action as Check; composing an IME syllable never submits. */
 function WrittenEntry({ control }) {
-	const { meta } = useShell();
+	const meta = useShellMeta();
 	if (control.hidden) return null;
 	return /* @__PURE__ */ jsx("form", {
 		onSubmit: (event) => {

package/dist/kit/shell/model-note.mjs

@@ -0,0 +1,52 @@
+'use client';
+
+import { cn } from "../../core/util.mjs";
+import { modelNoteOf } from "../../model/model-note.mjs";
+import { LabContext } from "../../runtime/use-lab.mjs";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/shell/model-note.tsx
+/**
+* The lab's scientific model, as one quiet line under Readings: "Model: <summary>", with where it
+* holds behind its own closed disclosure. Only the card's learner fields are shown. Built from the Stage model cards the
+* lab's model declares (`model: ORBIT_FLIGHT_CARD`), never from text written in the lab. Never in
+* the picture. A lesson hides it with `modelNote={false}`; a lab with no card shows nothing.
+*/
+/** The note for the lab's current state, or undefined (no lab, no card, or hidden by the lesson). */
+function useModelNote() {
+	const lab = useContext(LabContext);
+	if (!lab?.session || lab.props.modelNote === false) return undefined;
+	return modelNoteOf(lab.model.modelCards(lab.session.scenario, lab.session.state));
+}
+/** `after`: other readings sit above it, so a hairline separates the model from the numbers. */
+function ModelNoteLine({ note, after }) {
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-label": "The model behind these readings",
+		"data-lab-model-note": note.ids.join(" "),
+		className: cn("min-w-0 text-xs leading-relaxed", after && "mt-3 border-t border-border/60 pt-2"),
+		children: [/* @__PURE__ */ jsxs("p", {
+			className: "m-0",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-foreground/80",
+					children: "Model:"
+				}),
+				" ",
+				note.summary
+			]
+		}), note.limits.length > 0 ? /* @__PURE__ */ jsxs("details", {
+			className: "mt-1",
+			children: [/* @__PURE__ */ jsx("summary", {
+				className: "cursor-pointer rounded-md py-1 outline-none focus-visible:ring-2 focus-visible:ring-foreground/20",
+				children: "Where it holds"
+			}), /* @__PURE__ */ jsx("ul", {
+				className: "m-0 mt-1 list-disc space-y-0.5 pl-4",
+				children: note.limits.map((limit) => /* @__PURE__ */ jsx("li", { children: limit }, limit))
+			})]
+		}) : null]
+	});
+}
+
+//#endregion
+export { ModelNoteLine, useModelNote };

package/dist/kit/shell/note.mjs

@@ -17,6 +17,8 @@ function initialsOf(coach) {
 function Note({ text, evidence, verdict, revealed: shown, lead }) {
 	const { state, actions, meta } = useShell();
 	const right = (verdict ?? state.verdict) === "right";
+	const question = meta.question;
+	const approximate = question?.kind === "numeric" && (question.relative ?? question.tolerance ?? 0) > 0;
 	const revealed = shown ?? state.revealed;
 	const showing = evidence !== undefined && state.spotlight === evidence;
 	return /* @__PURE__ */ jsxs("div", {
@@ -35,7 +37,7 @@ function Note({ text, evidence, verdict, revealed: shown, lead }) {
 				children: [
 					/* @__PURE__ */ jsx("strong", {
 						className: revealed ? "text-foreground" : right ? "text-[color:var(--lab-good-ink)]" : "text-[color:var(--shell-miss-ink)]",
-						children: lead ?? (revealed ? "Here it is." : right ? "Exactly." : "Not quite.")
+						children: lead ?? (revealed ? "Here it is." : right ? approximate ? "Correct." : "Exactly." : "Not quite.")
 					}),
 					" ",
 					text ? /* @__PURE__ */ jsx(RichText, { children: text }) : right ? "" : "Look at the picture again, then try another answer."

package/dist/kit/shell/parts.d.mts

@@ -25,8 +25,9 @@ export declare function Body({ children }: {
  */
 declare function StepsPart(): ReactNode;
 /**
- * The lab's key live numbers as one quiet line under the picture ("300 K · 12/106 successful ·
- * 80% product"): the lab passes its `status`; children are separated by a middle dot.
+ * The lab's key live numbers under the picture ("300 K", "12/106 successful", "80% product"): the
+ * lab passes its `status`; each child is a quiet chip (styles/shell.css `.lab-readout`), so a
+ * wrapped line on a phone never starts with a separator.
  */
 export declare function Readout({ children }: {
   children?: ReactNode;

package/dist/kit/shell/parts.mjs

@@ -5,15 +5,15 @@ import { RichText } from "../rich.mjs";
 import { SHELL_CHOICE, SHELL_CHOICE_MARKER, SHELL_CTA, SHELL_CTA_SOFT, SHELL_RADIO } from "../appearance.mjs";
 import { STROKE } from "../figure/figure.mjs";
 import { IconButton } from "../controls.mjs";
-import "../figure/index.mjs";
 import { ShowMe } from "./show-me.mjs";
 import { HelpDialog } from "./help.mjs";
 import { FocusButton, ShellRoot } from "../activity.mjs";
 import "./frame.mjs";
 import { openingOrder } from "../authored-response.mjs";
 import { choiceDisplayOrder } from "../choice-order.mjs";
-import { useShell } from "./context.mjs";
+import { useShell, useShellActions, useShellMeta, useShellState, useShellVerdict } from "./context.mjs";
 import { Note } from "./note.mjs";
+import { ModelNoteLine, useModelNote } from "./model-note.mjs";
 import { isChoice, isSelect, spoken } from "./questions.mjs";
 import { createContext, memo, use, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -38,7 +38,7 @@ import { Textarea } from "@/components/ui/textarea";
 /** Which frame the parts sit in, so Body and Stage lay themselves out without a prop. */
 const FrameContext = createContext("stack");
 function FrameRoot({ variant, className, children }) {
-	const { meta } = useShell();
+	const meta = useShellMeta();
 	return /* @__PURE__ */ jsxs(ShellRoot, {
 		className: cn("lab-authored-activity mx-auto grid grid-cols-1 w-full max-w-[1080px] gap-5", className),
 		"data-frame": variant,
@@ -89,12 +89,14 @@ function Body({ children }) {
 * Start over (once the learner has begun) and the focus icon. The step names live in the lab's own prompts; the bar only says how far along.
 */
 function StepsPart() {
-	const { state, actions, meta } = useShell();
+	const actions = useShellActions();
+	const meta = useShellMeta();
+	const verdict = useShellVerdict();
 	const { index, total, canAdvance } = meta.sequence;
 	const done = index + (canAdvance ? 1 : 0);
-	const started = index > 0 || state.verdict !== undefined || meta.dirty;
+	const started = index > 0 || verdict !== undefined || meta.dirty;
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex min-h-8 items-center gap-3",
+		className: "lab-shell-progress flex min-h-8 items-center gap-3",
 		children: [
 			total > 1 ? /* @__PURE__ */ jsx("div", {
 				className: "h-1 flex-1 overflow-hidden rounded-full bg-foreground/10",
@@ -125,13 +127,14 @@ function StepsPart() {
 	});
 }
 /**
-* The lab's key live numbers as one quiet line under the picture ("300 K · 12/106 successful ·
-* 80% product"): the lab passes its `status`; children are separated by a middle dot.
+* The lab's key live numbers under the picture ("300 K", "12/106 successful", "80% product"): the
+* lab passes its `status`; each child is a quiet chip (styles/shell.css `.lab-readout`), so a
+* wrapped line on a phone never starts with a separator.
 */
 function Readout({ children }) {
 	if (!children) return null;
 	return /* @__PURE__ */ jsx("p", {
-		className: "m-0 flex flex-wrap justify-center gap-x-2.5 gap-y-1 text-[13px] text-muted-foreground tabular-nums [&>*+*]:before:me-2.5 [&>*+*]:before:text-foreground/30 [&>*+*]:before:content-['·']",
+		className: "lab-status text-[13px] text-muted-foreground tabular-nums",
 		role: "status",
 		"aria-live": "off",
 		children
@@ -186,7 +189,7 @@ function NarrowKeys({ children }) {
 	});
 }
 function Panel({ children }) {
-	const { state } = useShell();
+	const state = useShellState();
 	const ref = useRef(null);
 	useEffect(() => {
 		if (state.nudged) ref.current?.scrollIntoView({
@@ -212,7 +215,7 @@ function Task({ children }) {
 }
 /** The step's question, or its instruction when it asks none. */
 function PromptPart({ lead: showLead = true }) {
-	const { meta } = useShell();
+	const meta = useShellMeta();
 	const { lead, title, sceneOwnsPrompt } = meta.sequence.current;
 	const text = meta.question?.prompt ?? (sceneOwnsPrompt ? undefined : lead ?? title);
 	if (!text) return null;
@@ -231,8 +234,9 @@ function PromptPart({ lead: showLead = true }) {
 }
 /** What the lab says about what the learner is seeing, once they have earned it. */
 function Observation({ children, earned }) {
-	const { meta, state } = useShell();
-	const asking = meta.question !== undefined && state.verdict === undefined;
+	const meta = useShellMeta();
+	const verdict = useShellVerdict();
+	const asking = meta.question !== undefined && verdict === undefined;
 	if (!children || earned && !meta.revealed || asking) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: "m-0 text-sm leading-relaxed text-muted-foreground",
@@ -241,7 +245,7 @@ function Observation({ children, earned }) {
 }
 /** The note for a picked choice: its own feedback wins, then the question's explain / tryAgain. */
 function ChoiceNote({ question, choice }) {
-	const { state } = useShell();
+	const state = useShellState();
 	const right = state.verdict === "right";
 	if (question.feedbackMode === "deferred") return /* @__PURE__ */ jsx(Note, {
 		revealed: true,
@@ -258,10 +262,13 @@ function ChoiceNote({ question, choice }) {
 * Check. Short answers (an expression, a number, one word) sit two per row, like a keypad.
 */
 function ChoicesPart() {
+	const question = useShellMeta().question;
+	return isChoice(question) ? /* @__PURE__ */ jsx(ChoiceCards, { question }) : null;
+}
+function ChoiceCards({ question }) {
 	const instanceId = useId();
-	const { state, actions, meta } = useShell();
-	const question = meta.question;
-	if (!isChoice(question)) return null;
+	const state = useShellState();
+	const actions = useShellActions();
 	const choices = question.order === "fixed" ? question.choices : choiceDisplayOrder(question.choices, question.answer, `${question.id}:${typeof question.prompt === "string" ? question.prompt : ""}`);
 	const pictured = choices.some((c) => c.art != null);
 	const keypad = !pictured && choices.length >= 2 && choices.every((c) => spoken(c.label).length <= 18);
@@ -337,7 +344,7 @@ function ChoicesPart() {
 }
 /** The teacher's note after Check for a typed, ordered or written answer. */
 function AnswerNote({ question }) {
-	const { state } = useShell();
+	const state = useShellState();
 	if (!state.verdict) return null;
 	const right = state.verdict === "right";
 	const text = state.feedback ?? (right ? question.explain : "tryAgain" in question ? question.tryAgain : undefined);
@@ -353,7 +360,8 @@ const tileText = (tile) => typeof tile === "number" ? Number.isSafeInteger(tile)
 * behave exactly as they do for a typed box, and nothing is marked before Check.
 */
 function TileAnswer({ question }) {
-	const { state, actions } = useShell();
+	const state = useShellState();
+	const actions = useShellActions();
 	const chosen = state.typed ?? "";
 	const locked = state.verdict !== undefined;
 	const [before, after = ""] = (question.line ?? "{}").split("{}");
@@ -405,7 +413,8 @@ function TypedAnswer({ question }) {
 	return /* @__PURE__ */ jsx(TypedBox, { question });
 }
 function TypedBox({ question }) {
-	const { state, actions } = useShell();
+	const state = useShellState();
+	const actions = useShellActions();
 	const instanceId = useId();
 	const id = `${instanceId}-answer-${question.id}`;
 	const right = state.verdict === "right";
@@ -447,7 +456,8 @@ function TypedBox({ question }) {
 }
 /** A written reflection: recorded, then the criteria to compare it with. */
 function ReflectionAnswer({ question }) {
-	const { state, actions } = useShell();
+	const state = useShellState();
+	const actions = useShellActions();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "grid gap-3",
 		children: [/* @__PURE__ */ jsx(Textarea, {
@@ -475,7 +485,8 @@ function ReflectionAnswer({ question }) {
 }
 /** An ordering: move each item up or down, then Check the order. */
 function OrderAnswer({ question }) {
-	const { state, actions } = useShell();
+	const state = useShellState();
+	const actions = useShellActions();
 	const order = state.order ?? openingOrder(question);
 	const labels = new Map(question.items.map((item) => [item.value, item.label]));
 	const locked = state.verdict !== undefined;
@@ -522,8 +533,7 @@ function OrderAnswer({ question }) {
 }
 /** A question answered by typing, writing or ordering. Choice and select questions have their own parts. */
 function ResponsePart() {
-	const { meta } = useShell();
-	const question = meta.question;
+	const question = useShellMeta().question;
 	if (!question || isChoice(question) || isSelect(question)) return null;
 	if (question.kind === "reflection") return /* @__PURE__ */ jsx(ReflectionAnswer, { question }, question.id);
 	if (question.kind === "ordering") return /* @__PURE__ */ jsx(OrderAnswer, { question }, question.id);
@@ -535,7 +545,7 @@ function ResponsePart() {
 * The hints stay shown across tries of the same question (the Action part owns them).
 */
 function WrongActions({ hints }) {
-	const { actions } = useShell();
+	const actions = useShellActions();
 	const [open, setOpen] = useState(false);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex gap-2.5",
@@ -601,7 +611,8 @@ function answered(question, state) {
 }
 /** "Get help" on a step that asks no question: the step's hints, one at a time. */
 function StepHelp() {
-	const { actions, meta } = useShell();
+	const actions = useShellActions();
+	const meta = useShellMeta();
 	const hints = useQuestionHints(`${meta.sequence.current.id}:${meta.hints.join("\0")}`, meta.hints, actions.hint);
 	const [open, setOpen] = useState(false);
 	if (!meta.hints.length) return null;
@@ -622,7 +633,7 @@ function StepHelp() {
 }
 /** A play step's own typed commit, under the prompt, while the step's goal is still open. */
 function EntryPart() {
-	const { meta } = useShell();
+	const meta = useShellMeta();
 	if (meta.question || !meta.entry || meta.sequence.canAdvance || meta.controlsLocked) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: "grid gap-3",
@@ -670,7 +681,7 @@ function ActionPart() {
 			className: "flex flex-wrap gap-2.5",
 			children: [/* @__PURE__ */ jsx(WrongActions, { hints }), cta("Continue", actions.next)]
 		}) : /* @__PURE__ */ jsx(WrongActions, { hints });
-		return withUnsure(cta(question.kind === "reflection" ? "Save" : "Check", actions.check, undefined, !answered(question, state), question.kind === "numeric" || question.kind === "expression" || question.kind === "text"), predicting && question.kind !== "reflection" ? actions.reveal : undefined);
+		return withUnsure(cta(question.kind === "reflection" ? "Save" : "Check", actions.check, undefined, !answered(question, state), question.kind === "numeric" || question.kind === "expression" || question.kind === "set" || question.kind === "interval" || question.kind === "factored" || question.kind === "text"), predicting && question.kind !== "reflection" ? actions.reveal : undefined);
 	}
 	const help = !canAdvance && meta.hints.length ? /* @__PURE__ */ jsx(StepHelp, {}) : null;
 	if (meta.entry && !canAdvance && !meta.controlsLocked) return /* @__PURE__ */ jsxs("div", {
@@ -698,9 +709,10 @@ function ActionPart() {
 }
 /** Full readings, on demand. `evidence` joins them once the step's result may show. */
 function Readings({ children, evidence }) {
-	const { meta } = useShell();
+	const meta = useShellMeta();
 	const shown = evidence && meta.revealed ? evidence : null;
-	if (!children && !shown) return null;
+	const note = useModelNote();
+	if (!children && !shown && !note) return null;
 	return /* @__PURE__ */ jsxs("details", {
 		className: "min-w-0 max-w-full text-sm text-muted-foreground",
 		children: [/* @__PURE__ */ jsx("summary", {
@@ -708,7 +720,14 @@ function Readings({ children, evidence }) {
 			children: "Readings"
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 max-w-full pt-2",
-			children: [shown, children]
+			children: [
+				shown,
+				children,
+				note ? /* @__PURE__ */ jsx(ModelNoteLine, {
+					note,
+					after: Boolean(shown || children)
+				}) : null
+			]
 		})]
 	});
 }

package/dist/kit/shell/provider.d.mts

@@ -1,7 +1,7 @@
 import { LearningSequence, LearningSequenceStep } from "../learning-sequence.mjs";
 import { AuthoredQuestion } from "../activity-authoring.mjs";
 import { AnswerGrader, AuthoredResponseResult } from "../authored-response.mjs";
-import { Coach } from "./context.mjs";
+import { Coach, ShellContextValue } from "./context.mjs";
 import { ReactNode } from "react";
 //#region src/kit/shell/provider.d.ts
 export interface ShellProviderProps {
@@ -31,4 +31,13 @@ export interface ShellProviderProps {
   children: ReactNode;
 }
 export declare function ShellProvider({ lockQuestions, title, sequence, steps, question, questionEpoch, onRespond, grade, hints, onHint, coach, onRestart, onRetry, dirty, children }: ShellProviderProps): ReactNode;
+/**
+ * Provide one `{ state, actions, meta }` value through the shell's context lanes (./context): the
+ * provider above uses it, and so can a hand-built shell or a test that fixes a shell state. Pass a
+ * memoized `meta` and `actions` where the value is rebuilt often, or their readers re-render too.
+ */
+export declare function ShellScope({ value, children }: {
+  value: ShellContextValue;
+  children: ReactNode;
+}): ReactNode;
 //#endregion