@classytic/labs 0.3.0 → 0.4.0

package/dist/kit/activity.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import { ActionButton, IconButton, Slider } from "./controls.mjs";
-import { useLabEmbed } from "./embed.mjs";
+import { useAuthoredHeadline, useLabEmbed } from "./embed.mjs";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@/components/ui/button";
@@ -14,6 +14,51 @@ const useActivity = () => {
 	if (!value) throw new Error("Activity compound components must be used inside Activity.Root");
 	return value;
 };
+/**
+* Whether the learner has earned the measurements yet.
+*
+* Defaults to true, so a lab rendered outside the authored runtime (a bare scene, the gallery, a
+* host embed) behaves exactly as before. The runtime lowers it during a predict step.
+*/
+const EarnedContext = createContext(true);
+/** Provided by the authored runtime; nothing else should set it. */
+const EarnedProvider = EarnedContext.Provider;
+/**
+* Has the learner earned the measured view yet?
+*
+* `Activity.Measured` covers a value sitting in a slot, but a scene that draws its own readings onto
+* a figure cannot wrap them in a span. Those scenes read the gate directly and decide what to draw.
+* Outside an activity the context defaults to true, so a figure rendered on its own (gallery,
+* authoring preview, a lesson that only wants the picture) still shows everything.
+*/
+function useEarned() {
+	return useContext(EarnedContext);
+}
+/**
+* One measured value in the status strip, withheld until the prediction is made.
+*
+* The strip mixes two different things. "Spring", "solid", "120 W" are SETUP: what the learner
+* chose, which they need in order to orient, and which gives nothing away. "T 2.22 s", "f 0.45 Hz",
+* "2.40 m" are MEASUREMENTS: the model's answer. Printing those beside "where is the speed
+* greatest?" answers the question in the act of asking it, and 173 labs pass a status strip.
+*
+* Marking the measured items rather than splitting the prop keeps the setup items exactly where
+* they are, and keeps the decision local to the lab that knows which is which.
+*
+* A dash holds the place rather than the item vanishing: the strip keeps its shape, and a gap
+* where a number will be is itself a promise that the model is about to answer.
+*/
+function Measured({ children, label }) {
+	if (useContext(EarnedContext)) return /* @__PURE__ */ jsx("span", { children });
+	return /* @__PURE__ */ jsx("span", {
+		className: "lab-activity-measured-pending",
+		"aria-label": label ?? "measured after you predict",
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: "—"
+		})
+	});
+}
 const Root = function Root({ children, className, ref: forwardedRef, role, tabIndex, focusLayout = "standard", ...props }) {
 	const rootRef = useRef(null);
 	const restoreFocusRef = useRef(null);
@@ -114,15 +159,33 @@ function Header({ children }) {
 	});
 }
 function Heading({ eyebrow, title, description }) {
-	if (useLabEmbed()) return /* @__PURE__ */ jsxs("div", {
+	/**
+	* Inside a lesson the page has already said what this is, so the eyebrow and the
+	* product name are the third telling and cost the figure a chunk of the frame.
+	* The description survives, because it is the only line that says what to DO.
+	*
+	* The title is kept for screen readers rather than dropped: it is this region's
+	* accessible name and the document outline would otherwise gain a nameless block.
+	*/
+	const embedded = useLabEmbed();
+	/**
+	* A lesson's own words beat the preset's general ones. The preset writes its heading once
+	* for every use; the lesson knows which use this is, and in which language. Note the title
+	* still matters when embedded even though it is not painted: it is this region's
+	* accessible name, so a Bangla lesson needs it in Bangla for a screen reader.
+	*/
+	const lesson = useAuthoredHeadline();
+	const shownTitle = lesson.title ?? title;
+	const shownDescription = lesson.prompt ?? description;
+	if (embedded) return /* @__PURE__ */ jsxs("div", {
 		className: "lab-activity-heading",
 		"data-embedded": "true",
 		children: [/* @__PURE__ */ jsx("h3", {
 			className: "lab-sr-only",
-			children: title
-		}), description && /* @__PURE__ */ jsx("div", {
+			children: shownTitle
+		}), shownDescription && /* @__PURE__ */ jsx("div", {
 			className: "lab-activity-description",
-			children: description
+			children: shownDescription
 		})]
 	});
 	return /* @__PURE__ */ jsxs("div", {
@@ -132,10 +195,10 @@ function Heading({ eyebrow, title, description }) {
 				className: "lab-activity-eyebrow",
 				children: eyebrow
 			}),
-			/* @__PURE__ */ jsx("h3", { children: title }),
-			description && /* @__PURE__ */ jsx("div", {
+			/* @__PURE__ */ jsx("h3", { children: shownTitle }),
+			shownDescription && /* @__PURE__ */ jsx("div", {
 				className: "lab-activity-description",
-				children: description
+				children: shownDescription
 			})
 		]
 	});
@@ -186,7 +249,25 @@ function Dock({ children }) {
 		children
 	});
 }
-function Inspector({ children, label = "Inspector", defaultOpen, responsive = true }) {
+/**
+* A disclosure that opens itself when there is room, and stays shut when there is not.
+*
+* This was written as `Inspector`, for readings, and the behaviour turned out to be the general
+* answer to "the phone card is mostly chrome". Measured across 323 labs as authored in real A Level
+* physics lessons, the median figure share is 18%, and the region that took the height splits into
+* two cases. One is the header. The other is a dock with every control in it at once:
+* `StoppingDistance` shows four sliders, two mode buttons and a transport above a 140px drawing, so
+* the controls are five times the height of the thing they operate.
+*
+* A learner meeting that lesson has to work out which of six controls matters before anything
+* happens. Usually one does: this lesson asks what happens when SPEED doubles, and reaction time
+* and braking deceleration are there to be held fixed, not swept. Those belong behind a summary,
+* where a phone gets the drawing back and a desktop still sees them without a click.
+*
+* `Inspector` is now this with a readings label, so the responsive behaviour has one implementation
+* rather than two that drift.
+*/
+function Disclosure({ children, label = "Inspector", defaultOpen, responsive = true }) {
 	const ref = useRef(null);
 	const userChoice = useRef(false);
 	useEffect(() => {
@@ -220,6 +301,10 @@ function Inspector({ children, label = "Inspector", defaultOpen, responsive = tr
 		})]
 	});
 }
+/** Readings. The disclosure above, labelled for the one thing it was built to hold. */
+function Inspector(props) {
+	return /* @__PURE__ */ jsx(Disclosure, { ...props });
+}
 /**
 * Canonical content boundary inside an Inspector.
 *
@@ -233,10 +318,12 @@ function InspectorSection({ children, className }) {
 		children
 	});
 }
-function Feedback({ children }) {
+function Feedback({ children, message }) {
+	const content = children ?? message;
+	if (!content) return null;
 	return /* @__PURE__ */ jsx("div", {
 		className: "lab-activity-feedback",
-		children
+		children: content
 	});
 }
 function Transport({ children }) {
@@ -318,7 +405,9 @@ function Transcript({ children, label = "Event transcript", defaultOpen = false
 }
 function LiveRegion({ children }) {
 	return /* @__PURE__ */ jsx("div", {
+		role: "status",
 		"aria-live": "polite",
+		"aria-atomic": "true",
 		className: "lab-sr-only",
 		children
 	});
@@ -351,16 +440,50 @@ function RunTransport({ running, onReset, onToggle, onStep, state, detail, disab
 		})
 	] });
 }
+function StepTransport({ onReset, onStep, state, detail, disabled, resetLabel = "Restart", stepLabel = "Next step" }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(IconButton, {
+			label: resetLabel,
+			onClick: onReset,
+			children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "lab-transport-state",
+			"aria-live": "polite",
+			children: [/* @__PURE__ */ jsx("strong", { children: state }), detail ? /* @__PURE__ */ jsx("span", { children: detail }) : null]
+		}),
+		/* @__PURE__ */ jsx(IconButton, {
+			label: stepLabel,
+			onClick: onStep,
+			disabled,
+			children: /* @__PURE__ */ jsx(StepForward, { "aria-hidden": "true" })
+		})
+	] });
+}
+/** Compact transport for direct-manipulation activities that only need reset and live state. */
+function ResetTransport({ onReset, state, detail, resetLabel = "Reset activity" }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(IconButton, {
+		label: resetLabel,
+		onClick: onReset,
+		children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "lab-transport-state",
+		"aria-live": "polite",
+		children: [/* @__PURE__ */ jsx("strong", { children: state }), detail ? /* @__PURE__ */ jsx("span", { children: detail }) : null]
+	})] });
+}
 const Activity = {
 	Root,
 	Header,
 	Heading,
 	FocusButton,
 	Status,
+	Measured,
 	Workspace,
 	Canvas,
 	Dock,
 	Inspector,
+	Disclosure,
 	InspectorSection,
 	Feedback,
 	Transport,
@@ -371,4 +494,4 @@ const Activity = {
 };
 
 //#endregion
-export { Activity, RunTransport };
+export { Activity, EarnedProvider, Measured, ResetTransport, RunTransport, StepTransport, useEarned };

package/dist/kit/anim.d.mts

@@ -0,0 +1,22 @@
+import { FrameInfo } from "@classytic/stage";
+//#region src/kit/anim.d.ts
+/**
+ * prefers-reduced-motion, read once at mount. The value is read synchronously, so
+ * for labs whose FIRST render visibly depends on it (and that hydrate from SSR)
+ * prefer {@link useReducedMotionDeferred} to avoid a hydration mismatch.
+ */
+declare function useReducedMotion(): boolean;
+/**
+ * Hydration-safe prefers-reduced-motion: returns `false` on the server AND the first
+ * client render (so SSR markup matches), then flips to the real value after mount.
+ * Use this in SSR'd labs that gate their first paint on the reduced-motion flag.
+ */
+declare function useReducedMotionDeferred(): boolean;
+/**
+ * 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.
+ */
+declare function useFrameTick(running: boolean, step?: (f: FrameInfo) => void): () => void;
+//#endregion
+export { useFrameTick, useReducedMotion, useReducedMotionDeferred };

package/dist/kit/annotate.mjs

@@ -17,15 +17,18 @@ function DiagramLabel({ className, x, y, text, tone = "foreground", fontSize = 1
 	const width = shown.length * charW * (fontSize / 11);
 	const leftExtent = anchor === "start" ? 0 : anchor === "middle" ? width / 2 : width;
 	const rightExtent = anchor === "end" ? 0 : anchor === "middle" ? width / 2 : width;
+	const px = bounds ? Math.max(bounds.left + leftExtent, Math.min(bounds.right - rightExtent, x)) : x;
+	const py = bounds ? Math.max(bounds.top + fontSize, Math.min(bounds.bottom, y)) : y;
+	const fill = tone === "foreground" ? "var(--stage-fg)" : TONE[tone];
 	return /* @__PURE__ */ jsx("text", {
 		className,
-		x: bounds ? Math.max(bounds.left + leftExtent, Math.min(bounds.right - rightExtent, x)) : x,
-		y: bounds ? Math.max(bounds.top + fontSize, Math.min(bounds.bottom, y)) : y,
+		x: px,
+		y: py,
 		textAnchor: anchor,
 		dominantBaseline: "central",
 		fontSize,
 		fontWeight,
-		fill: tone === "foreground" ? "var(--stage-fg)" : TONE[tone],
+		fill,
 		paintOrder: halo ? "stroke" : void 0,
 		stroke: halo ? "var(--stage-bg)" : void 0,
 		strokeWidth: halo ? Math.max(3, fontSize * .3) : void 0,
@@ -40,13 +43,14 @@ function Pointer({ x, y, text, dx = 30, dy = -26, tone = "info", fontSize = 11 }
 	const col = TONE[tone];
 	const w = text.length * (charW * (fontSize / 11)) + 14, h = fontSize + 9;
 	const bx = dx >= 0 ? x + dx : x + dx - w, by = y + dy - h / 2;
+	const anchorX = dx >= 0 ? bx : bx + w;
 	return /* @__PURE__ */ jsxs("g", {
 		pointerEvents: "none",
 		children: [
 			/* @__PURE__ */ jsx("line", {
 				x1: x,
 				y1: y,
-				x2: dx >= 0 ? bx : bx + w,
+				x2: anchorX,
 				y2: by + h / 2,
 				stroke: col,
 				strokeWidth: 1.5

package/dist/kit/ask.d.mts

@@ -1,7 +1,6 @@
 import { ChallengeChoice } from "./pedagogy.mjs";
-import { AnswerSpec } from "./answer-check.mjs";
 import { ReactNode } from "react";
-
+import { AnswerSpec } from "@classytic/stage/math";
 //#region src/kit/ask.d.ts
 /** A serializable question spec an author attaches to a lab. */
 interface LabAskSpec {

package/dist/kit/ask.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { AskBox, ChallengeCard, useChallenge, useCheckpoint } from "./pedagogy.mjs";
-import { checkAnswer } from "./answer-check.mjs";
 import { jsx } from "react/jsx-runtime";
+import { checkAnswer } from "@classytic/stage/math";
 
 //#region src/kit/ask.tsx
 function McqAsk({ prompt, choices, answer, explain, activity }) {

package/dist/kit/assets.d.mts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+//#region src/kit/assets.d.ts
+type LabAssetKind = 'image' | 'model' | 'video';
+interface LabAssetRequest {
+  domain: string;
+  labId: string;
+  slot: string;
+  kind: LabAssetKind;
+  variant?: string;
+  format?: string;
+}
+interface LabAssetSource {
+  src: string;
+  srcDark?: string;
+  mimeType?: string;
+  width?: number;
+  height?: number;
+  maxBytes?: number;
+}
+type LabAssetValue = string | LabAssetSource;
+type LabAssetResolver = (request: LabAssetRequest) => LabAssetValue | undefined;
+declare function defaultLabAssetResolver(request: LabAssetRequest): LabAssetSource;
+interface LabAssetProviderProps {
+  resolver: LabAssetResolver;
+  children: ReactNode;
+}
+declare function LabAssetProvider({ resolver, children }: LabAssetProviderProps): ReactNode;
+declare function useLabAsset(request: LabAssetRequest, override?: LabAssetValue): LabAssetSource | undefined;
+//#endregion
+export { LabAssetKind, LabAssetProvider, LabAssetProviderProps, LabAssetRequest, LabAssetResolver, LabAssetSource, LabAssetValue, defaultLabAssetResolver, useLabAsset };

package/dist/kit/assets.mjs

@@ -0,0 +1,31 @@
+'use client';
+
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/kit/assets.tsx
+const EXTENSIONS = {
+	image: "webp",
+	model: "glb",
+	video: "webm"
+};
+function defaultLabAssetResolver(request) {
+	const suffix = request.variant ? `-${request.variant}` : "";
+	const extension = request.format ?? EXTENSIONS[request.kind];
+	return { src: `/labs/illustrations/${request.domain}/${request.labId}${suffix}.${extension}` };
+}
+const LabAssetContext = createContext(defaultLabAssetResolver);
+function LabAssetProvider({ resolver, children }) {
+	return /* @__PURE__ */ jsx(LabAssetContext.Provider, {
+		value: resolver,
+		children
+	});
+}
+function useLabAsset(request, override) {
+	const resolver = useContext(LabAssetContext);
+	const value = override ?? resolver(request);
+	return typeof value === "string" ? { src: value } : value;
+}
+
+//#endregion
+export { LabAssetProvider, defaultLabAssetResolver, useLabAsset };

package/dist/kit/authored-activity-runtime.d.mts

@@ -3,7 +3,6 @@ import { AuthoredActivity, CompiledAuthoredActivity } from "./activity-authoring
 import { AuthoredResponseResult } from "./authored-response.mjs";
 import { ControlConfig } from "./frame.mjs";
 import { ReactNode } from "react";
-
 //#region src/kit/authored-activity-runtime.d.ts
 interface AuthoredActivityContext {
   sequence: LearningSequence;
@@ -32,6 +31,8 @@ interface AuthoredActivityRuntimeProps {
   observation?: ReactNode | ((context: AuthoredActivityContext) => ReactNode);
   /** Accessible account of scene state and changes. */
   transcript?: ReactNode | ((context: AuthoredActivityContext) => ReactNode);
+  /** Keep narration available to assistive technology without adding visible chrome. */
+  transcriptMode?: 'disclosure' | 'sr-only';
   /** Optional hints, worked support, or solution-reveal affordances. */
   support?: ReactNode | ((context: AuthoredActivityContext) => ReactNode);
   /** Creator policy for hiding or locking named Field/Control descendants. */
@@ -46,14 +47,14 @@ interface AuthoredActivityRuntimeProps {
   inspectorLayout?: 'stacked' | 'side';
   /** Controls how the activity uses a large focused viewport. */
   focusLayout?: 'compact' | 'standard' | 'immersive';
+  /**
+   * Changes only shell composition and density. Domain content still owns the science.
+   * This prevents every authored lab from inheriting the same tall mobile anatomy.
+   */
+  presentation?: 'standard' | 'observation' | 'construction' | 'investigation' | 'diagnosis';
 }
 /** Completes a domain-evaluated authored metric gate once per satisfied transition. */
-declare function AuthoredMetricGate({
-  conditionId,
-  met,
-  complete,
-  outcome
-}: {
+declare function AuthoredMetricGate({ conditionId, met, complete, outcome }: {
   conditionId: string;
   met: boolean;
   complete: AuthoredActivityContext['complete'];
@@ -64,29 +65,6 @@ declare function AuthoredMetricGate({
  * assessment wiring, feedback placement, responsive anatomy, and completion reporting;
  * domain packages provide only their model, controls/evidence, and transcript.
  */
-declare function AuthoredActivityRuntime({
-  className,
-  activity,
-  activityId,
-  eyebrow,
-  title,
-  description,
-  status,
-  task,
-  children,
-  inspector,
-  evidence,
-  controls,
-  observation,
-  transcript,
-  support,
-  controlConfig,
-  onResponse,
-  onComplete,
-  initialStepId,
-  onStepChange,
-  inspectorLayout,
-  focusLayout
-}: AuthoredActivityRuntimeProps): ReactNode;
+declare function AuthoredActivityRuntime({ className, activity, activityId, eyebrow, title, description, status, task, children, inspector, evidence, controls, observation, transcript, transcriptMode, support, controlConfig, onResponse, onComplete, initialStepId, onStepChange, inspectorLayout, focusLayout, presentation }: AuthoredActivityRuntimeProps): ReactNode;
 //#endregion
 export { AuthoredActivityContext, AuthoredActivityRuntime, AuthoredActivityRuntimeProps, AuthoredMetricGate };

package/dist/kit/authored-activity-runtime.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import { Activity } from "./activity.mjs";
+import { Activity, EarnedProvider } from "./activity.mjs";
 import { ControlPolicy } from "./frame.mjs";
 import { useCheckpoint } from "./pedagogy.mjs";
 import { compileAuthoredActivity } from "./activity-authoring.mjs";
@@ -36,7 +36,7 @@ function AuthoredMetricGate({ conditionId, met, complete, outcome }) {
 * assessment wiring, feedback placement, responsive anatomy, and completion reporting;
 * domain packages provide only their model, controls/evidence, and transcript.
 */
-function AuthoredActivityRuntime({ className, activity, activityId, eyebrow = "Interactive lesson", title, description, status, task, children, inspector, evidence, controls, observation, transcript, support, controlConfig, onResponse, onComplete, initialStepId, onStepChange, inspectorLayout = "stacked", focusLayout = "standard" }) {
+function AuthoredActivityRuntime({ className, activity, activityId, eyebrow = "Interactive lesson", title, description, status, task, children, inspector, evidence, controls, observation, transcript, transcriptMode = "sr-only", support, controlConfig, onResponse, onComplete, initialStepId, onStepChange, inspectorLayout = "stacked", focusLayout = "standard", presentation = "standard" }) {
 	const plan = useMemo(() => compileAuthoredActivity(activity), [activity]);
 	const authored = plan.source;
 	const sequence = useLearningSequence(plan.steps, {
@@ -52,7 +52,8 @@ function AuthoredActivityRuntime({ className, activity, activityId, eyebrow = "I
 	const questionPosition = condition && (condition.source === "answer" || condition.source === "reflection") ? plan.questionIndex[condition.key] : void 0;
 	const question = questionPosition == null ? void 0 : authored.questions?.[questionPosition];
 	const solved = sequence.index === sequence.total - 1 && sequence.canAdvance;
-	const observationUnlocked = sequence.current.phase !== "predict" || sequence.canAdvance;
+	/** Predictions withhold evidence until the learner commits. */
+	const evidenceEarned = sequence.current.phase !== "predict" || sequence.canAdvance;
 	useCheckpoint({
 		solved,
 		activity: activityId
@@ -66,6 +67,7 @@ function AuthoredActivityRuntime({ className, activity, activityId, eyebrow = "I
 		if (result.correct === true || condition.source === "reflection" && result.correct === null) sequence.complete(condition.id, Array.isArray(result.response) ? result.response.join(",") : String(result.response));
 	};
 	const renderedTask = renderSlot(task, context);
+	const renderedStatus = renderSlot(status, context);
 	const renderedModel = renderSlot(children, context);
 	const renderedEvidence = renderSlot(evidence, context);
 	const renderedInspector = renderSlot(inspector, context);
@@ -73,73 +75,83 @@ function AuthoredActivityRuntime({ className, activity, activityId, eyebrow = "I
 	const renderedObservation = renderSlot(observation, context);
 	const renderedTranscript = renderSlot(transcript, context);
 	const renderedSupport = renderSlot(support, context);
-	return /* @__PURE__ */ jsx(ControlPolicy, {
-		config: controlConfig,
-		children: /* @__PURE__ */ jsxs(Activity.Root, {
-			className: ["lab-authored-activity", className].filter(Boolean).join(" "),
-			"data-inspector-layout": inspectorLayout,
-			focusLayout,
-			children: [
-				/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
-					eyebrow,
-					title: title ?? authored.title ?? sequence.current.title ?? "Interactive activity",
-					description
-				}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
-				/* @__PURE__ */ jsxs(Activity.Status, { children: [
-					(sequence.current.title ?? "").toLowerCase().includes(sequence.current.phase.toLowerCase()) ? null : /* @__PURE__ */ jsx("strong", { children: sequence.current.phase }),
-					/* @__PURE__ */ jsx("span", { children: sequence.current.title }),
-					renderSlot(status, context)
-				] }),
-				renderedTask || question || sequence.current.lead ? /* @__PURE__ */ jsxs("section", {
-					className: "lab-authored-task",
-					"aria-label": "Your task",
-					children: [
-						sequence.current.lead ? /* @__PURE__ */ jsx("p", {
-							className: "lab-authored-task-lead",
-							children: sequence.current.lead
-						}) : null,
-						renderedTask,
-						question ? /* @__PURE__ */ jsx(AuthoredResponse, {
+	return /* @__PURE__ */ jsx(EarnedProvider, {
+		value: evidenceEarned,
+		children: /* @__PURE__ */ jsx(ControlPolicy, {
+			config: controlConfig,
+			children: /* @__PURE__ */ jsxs(Activity.Root, {
+				className: ["lab-authored-activity", className].filter(Boolean).join(" "),
+				"data-inspector-layout": inspectorLayout,
+				"data-presentation": presentation,
+				focusLayout,
+				children: [
+					/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+						eyebrow,
+						title: title ?? authored.title ?? sequence.current.title ?? "Interactive activity",
+						description
+					}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+					renderedStatus ? /* @__PURE__ */ jsx(Activity.Status, { children: renderedStatus }) : null,
+					sequence.current.lead && sequence.current.title ? /* @__PURE__ */ jsx("span", {
+						className: "lab-sr-only",
+						children: sequence.current.title
+					}) : null,
+					sequence.current.lead ?? sequence.current.title ? /* @__PURE__ */ jsx("p", {
+						className: "lab-authored-task-lead lab-authored-lead-solo",
+						children: sequence.current.lead ?? sequence.current.title
+					}) : null,
+					/* @__PURE__ */ jsxs(Activity.Workspace, { children: [
+						/* @__PURE__ */ jsx(Activity.Canvas, {
+							label: `${String(title ?? authored.title ?? "Interactive activity")} model`,
+							children: renderedModel
+						}),
+						renderedControls ? /* @__PURE__ */ jsx(Activity.Dock, { children: /* @__PURE__ */ jsx("section", {
+							className: "lab-activity-fields lab-authored-controls",
+							"aria-label": "Controls",
+							children: renderedControls
+						}) }) : null,
+						renderedEvidence && evidenceEarned || renderedInspector ? /* @__PURE__ */ jsxs(Activity.Inspector, {
+							label: "Explore evidence",
+							defaultOpen: inspectorLayout === "side",
+							responsive: false,
+							children: [renderedEvidence && evidenceEarned ? /* @__PURE__ */ jsx("section", {
+								className: "lab-authored-evidence",
+								"aria-label": "Evidence",
+								children: renderedEvidence
+							}) : null, renderedInspector]
+						}) : null
+					] }),
+					renderedTask || question ? /* @__PURE__ */ jsxs("section", {
+						className: "lab-authored-task",
+						"aria-label": "Your task",
+						children: [renderedTask, question ? /* @__PURE__ */ jsx(AuthoredResponse, {
 							question,
 							onRespond: respond
-						}, question.id) : null
-					]
-				}) : null,
-				/* @__PURE__ */ jsxs(Activity.Workspace, { children: [
-					/* @__PURE__ */ jsx(Activity.Canvas, {
-						label: `${String(title ?? authored.title ?? "Interactive activity")} model`,
-						children: renderedModel
-					}),
-					renderedControls ? /* @__PURE__ */ jsx(Activity.Dock, { children: /* @__PURE__ */ jsx("section", {
-						className: "lab-activity-fields lab-authored-controls",
-						"aria-label": "Controls",
-						children: renderedControls
-					}) }) : null,
-					renderedEvidence || renderedInspector ? /* @__PURE__ */ jsxs(Activity.Inspector, {
-						label: "Explore evidence",
-						defaultOpen: inspectorLayout === "side",
-						responsive: false,
-						children: [renderedEvidence ? /* @__PURE__ */ jsx("section", {
-							className: "lab-authored-evidence",
-							"aria-label": "Evidence",
-							children: renderedEvidence
-						}) : null, renderedInspector]
-					}) : null
-				] }),
-				renderedObservation && observationUnlocked ? /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: renderedObservation })] }) : null,
-				renderedTranscript || renderedSupport ? /* @__PURE__ */ jsxs(Activity.Transcript, {
-					label: renderedSupport ? "Learning support" : "Event transcript",
-					children: [renderedTranscript ? /* @__PURE__ */ jsx("section", {
-						className: "lab-authored-transcript",
+						}, question.id) : null]
+					}) : null,
+					renderedObservation && evidenceEarned ? /* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: renderedObservation })] }) : null,
+					renderedTranscript && transcriptMode === "sr-only" ? /* @__PURE__ */ jsx("section", {
+						className: "lab-sr-only",
 						"aria-label": "Event transcript",
 						children: renderedTranscript
-					}) : null, renderedSupport ? /* @__PURE__ */ jsx("section", {
-						className: "lab-authored-support",
-						children: renderedSupport
-					}) : null]
-				}) : null,
-				/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsx(LearningSequenceNav, { sequence }) })
-			]
+					}) : null,
+					renderedTranscript && transcriptMode === "disclosure" || renderedSupport ? /* @__PURE__ */ jsxs(Activity.Transcript, {
+						label: renderedSupport ? "Learning support" : "Event transcript",
+						children: [renderedTranscript && transcriptMode === "disclosure" ? /* @__PURE__ */ jsx("section", {
+							className: "lab-authored-transcript",
+							"aria-label": "Event transcript",
+							children: renderedTranscript
+						}) : null, renderedSupport ? /* @__PURE__ */ jsx("section", {
+							className: "lab-authored-support",
+							children: renderedSupport
+						}) : null]
+					}) : null,
+					/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsx(LearningSequenceNav, {
+						sequence,
+						prompted: !!question,
+						showPending: presentation === "standard"
+					}) })
+				]
+			})
 		})
 	});
 }

package/dist/kit/authored-response.d.mts

@@ -1,6 +1,5 @@
 import { AuthoredQuestion } from "./activity-authoring.mjs";
 import { ReactNode } from "react";
-
 //#region src/kit/authored-response.d.ts
 type AuthoredResponseValue = string | number | string[];
 interface AuthoredResponseResult {
@@ -10,10 +9,7 @@ interface AuthoredResponseResult {
 }
 declare function evaluateAuthoredResponse(question: AuthoredQuestion, response: AuthoredResponseValue): boolean | null;
 /** Standard renderer for the portable authored response contract. */
-declare function AuthoredResponse({
-  question,
-  onRespond
-}: {
+declare function AuthoredResponse({ question, onRespond }: {
   question: AuthoredQuestion;
   onRespond?: (result: AuthoredResponseResult) => void;
 }): ReactNode;