@classytic/labs 0.6.0 → 0.7.0

package/dist/domains/ict/code-trace/manifest.mjs

@@ -0,0 +1,81 @@
+import { defineLab } from "../../../lab-def/define-lab.mjs";
+import { codeTraceModel } from "./model.mjs";
+
+//#region src/domains/ict/code-trace/manifest.ts
+var manifest_default = defineLab({
+	id: "code-trace",
+	domain: "ict",
+	group: "Programming",
+	title: "Run a program one line at a time",
+	description: "A short program recorded in the real language, played back line by line: the line about to run, variables as tagged boxes that change as lines run, and a console that prints as it happens. Before a print line runs, the learner can predict what it will show.",
+	model: codeTraceModel,
+	examples: [{
+		name: "default",
+		props: {}
+	}, {
+		name: "predict-the-branch",
+		props: { predict: [{
+			line: 3,
+			choices: [
+				"even",
+				"odd",
+				"12"
+			]
+		}] }
+	}],
+	taxonomy: {
+		grades: [
+			"8",
+			"9",
+			"10",
+			"11",
+			"12",
+			"undergraduate"
+		],
+		outcomes: [
+			"programming",
+			"variables",
+			"selection",
+			"iteration",
+			"tracing"
+		],
+		durationMinutes: 6,
+		interaction: "explorer",
+		authorability: "simple",
+		representation: "schematic",
+		related: ["recursion-tree", "sorting-quest"],
+		qualityTier: "flagship",
+		primaryMechanic: "sequencing",
+		learnerAction: "step a recorded program line by line and predict each print before it runs",
+		evidenceTypes: ["observation", "model-state"],
+		mobileMode: "investigation",
+		misconceptions: [
+			"every line of a program runs, including both branches of an if",
+			"input() gives a number",
+			"a variable keeps every value it was given",
+			"a loop body runs once"
+		]
+	},
+	experience: {
+		objectives: [
+			"Follow which line runs next, including the lines a condition or loop skips",
+			"Say what each variable holds after each line",
+			"Predict what a print line will show before it runs"
+		],
+		phases: [
+			"act",
+			"observe",
+			"explain"
+		],
+		responses: ["choice"],
+		accessibility: {
+			keyboard: true,
+			textAlternative: true,
+			reducedMotion: true
+		}
+	},
+	loadRuntime: () => import("./runtime.mjs")
+});
+
+//#endregion
+export { manifest_default as default };

package/dist/domains/ict/code-trace/model.mjs

@@ -0,0 +1,199 @@
+import { defineLabModel } from "../../../model/define.mjs";
+import { z } from "zod";
+import { changedAt, finished, lineCounts, nextLine, outputAt, printedAt, stepAt, traceLines, traceProblems, variablesAt } from "@classytic/stage/program";
+
+//#region src/domains/ict/code-trace/model.ts
+/** A short program recorded in CPython 3.12: the default the gallery and a bare tag show. */
+const SAMPLE = {
+	code: "n = int(input('Number: '))\nif n % 2 == 0:\n    print('even')\nelse:\n    print('odd')\n",
+	language: "python 3.12.12",
+	inputs: ["12"],
+	steps: [
+		{
+			line: 1,
+			vars: { n: {
+				type: "int",
+				repr: "12"
+			} },
+			out: "Number: 12\n",
+			input: "12"
+		},
+		{
+			line: 2,
+			vars: { n: {
+				type: "int",
+				repr: "12"
+			} },
+			out: "Number: 12\n",
+			note: "12 % 2 == 0 → True"
+		},
+		{
+			line: 3,
+			vars: { n: {
+				type: "int",
+				repr: "12"
+			} },
+			out: "Number: 12\neven\n"
+		}
+	]
+};
+const value = z.object({
+	type: z.string().max(40),
+	repr: z.string().max(400)
+});
+const trace = z.object({
+	code: z.string().min(1).max(4e3),
+	language: z.string().min(1).max(40),
+	inputs: z.array(z.string().max(200)).max(20).optional(),
+	steps: z.array(z.object({
+		line: z.number().int().min(1),
+		vars: z.record(z.string(), value),
+		out: z.string().max(4e3),
+		input: z.string().max(400).optional(),
+		note: z.string().max(120).optional()
+	})).max(400),
+	error: z.object({
+		line: z.number().int(),
+		type: z.string(),
+		message: z.string()
+	}).optional()
+});
+/** A question asked before a printing line runs: the right answer is whatever that line printed. */
+const question = z.object({
+	line: z.number().int().min(1).describe("the print line to ask about"),
+	pass: z.number().int().min(1).default(1).describe("which time that line runs (a loop body runs many times)"),
+	choices: z.array(z.string().min(1).max(60)).min(2).max(4)
+});
+const printed = (t, p) => printedAt(t, p).replace(/\n$/, "");
+/** The position whose step is the `pass`-th run of `line`, or -1. */
+function positionOf(t, line, pass) {
+	let seen = 0;
+	for (let i = 0; i < t.steps.length; i++) if (t.steps[i].line === line && ++seen === pass) return i + 1;
+	return -1;
+}
+const codeTraceModel = defineLabModel({
+	id: "code-trace",
+	params: z.object({
+		trace: trace.default(SAMPLE).describe("a recorded run (curriculum lib/trace_record.py writes it)"),
+		predict: z.array(question).max(8).default([]).describe("print lines to predict before they run")
+	}).superRefine((p, ctx) => {
+		for (const problem of traceProblems(p.trace)) ctx.addIssue({
+			code: "custom",
+			message: problem,
+			path: ["trace"]
+		});
+		p.predict.forEach((q, i) => {
+			const at = positionOf(p.trace, q.line, q.pass);
+			if (at < 0) ctx.addIssue({
+				code: "custom",
+				message: `line ${q.line} never runs ${q.pass} time(s)`,
+				path: ["predict", i]
+			});
+			else if (!q.choices.includes(printed(p.trace, at))) ctx.addIssue({
+				code: "custom",
+				message: `none of the choices is what line ${q.line} printed: ${JSON.stringify(printed(p.trace, at))}`,
+				path: [
+					"predict",
+					i,
+					"choices"
+				]
+			});
+		});
+	}),
+	resolve: (p) => ({
+		...p,
+		lines: traceLines(p.trace),
+		asks: p.predict.map((q) => ({
+			at: positionOf(p.trace, q.line, q.pass),
+			choices: q.choices
+		}))
+	}),
+	initial: () => ({
+		p: 0,
+		guesses: {}
+	}),
+	controls: (c) => ({
+		next: c.action({
+			label: "Next line",
+			enabled: (s, st) => !finished(s.trace, st.p),
+			run: (s, st) => ({
+				...st,
+				p: Math.min(s.trace.steps.length, st.p + 1)
+			})
+		}),
+		back: c.action({
+			label: "Back one line",
+			enabled: (_s, st) => st.p > 0,
+			run: (_s, st) => ({
+				...st,
+				p: st.p - 1
+			})
+		}),
+		guess: c.choice({
+			label: "What will it print?",
+			when: (s, st) => s.asks.some((a) => a.at === st.p + 1 && st.guesses[a.at] === undefined),
+			options: (s, st) => [{
+				value: "",
+				label: "Not answered yet"
+			}, ...(s.asks.find((a) => a.at === st.p + 1)?.choices ?? []).map((choice) => ({
+				value: choice,
+				label: choice
+			}))],
+			get: () => "",
+			set: (st, choice) => choice === "" ? st : {
+				...st,
+				p: st.p + 1,
+				guesses: {
+					...st.guesses,
+					[String(st.p + 1)]: choice
+				}
+			}
+		})
+	}),
+	read: (s, st) => {
+		const t = s.trace;
+		const step = stepAt(t, st.p);
+		const done = finished(t, st.p);
+		const ask = s.asks.find((a) => a.at === st.p + 1 && st.guesses[a.at] === undefined);
+		const guessed = st.guesses[String(st.p)];
+		const answer = printed(t, st.p);
+		return {
+			lines: s.lines,
+			language: t.language,
+			position: st.p,
+			total: t.steps.length,
+			current: step?.line ?? null,
+			next: nextLine(t, st.p),
+			note: step?.note ? {
+				line: step.line,
+				text: step.note
+			} : null,
+			variables: variablesAt(t, st.p),
+			changed: changedAt(t, st.p),
+			output: outputAt(t, st.p),
+			counts: lineCounts(t, st.p),
+			done,
+			error: done && t.error ? t.error : null,
+			question: ask ? { choices: ask.choices } : null,
+			feedback: guessed === undefined ? null : {
+				guessed,
+				answer,
+				right: guessed === answer
+			},
+			predicted: s.asks.every((a) => st.guesses[a.at] !== undefined),
+			skipped: s.lines.filter((text, i) => text.trim() !== "" && !lineCounts(t, st.p).has(i + 1)).length
+		};
+	},
+	goals: {
+		ran: (r) => r.done,
+		predicted: (r) => r.done && r.predicted
+	},
+	witness: (s) => ({
+		p: s.trace.steps.length,
+		guesses: Object.fromEntries(s.asks.map((a) => [String(a.at), printed(s.trace, a.at)]))
+	}),
+	describe: (_s, _st, r) => r.done ? `The program has finished${r.error ? ` with ${r.error.type} on line ${r.error.line}` : ""}. Output: ${r.output.join(" / ") || "nothing"}.` : `Line ${r.next} runs next. ${r.variables.map((v) => `${v.name} = ${v.value.repr}`).join(", ") || "No variables yet"}.`
+});
+
+//#endregion
+export { codeTraceModel };

package/dist/domains/ict/code-trace/runtime.mjs

@@ -0,0 +1,30 @@
+'use client';
+
+import { useLab } from "../../../runtime/use-lab.mjs";
+import { AuthoredActivityRuntime } from "../../../kit/authored-activity-runtime.mjs";
+import { useNarrow } from "../../../kit/figure/narrow.mjs";
+import { codeTraceModel } from "./model.mjs";
+import { codeTraceActivity } from "./activity.mjs";
+import { CodeTraceScene } from "./scene.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/ict/code-trace/runtime.tsx
+function CodeTraceLab(props = {}) {
+	const lab = useLab(codeTraceModel, props);
+	const { ref, narrow } = useNarrow();
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		lab,
+		activity: codeTraceActivity,
+		layout: "stack",
+		sceneLabel: "A program on a code card, its variables as boxes, and its console",
+		status: ({ reading }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: reading.done ? "finished" : `line ${reading.next} next` }), /* @__PURE__ */ jsx("span", { children: `${reading.position} of ${reading.total} lines run` })] }),
+		observation: ({ reading }) => reading.error ? `It stopped on line ${reading.error.line}: ${reading.error.type}. Nothing after that line ran.` : reading.done ? reading.skipped ? "The program has finished. The dimmed lines never ran: a condition skipped them." : "The program has finished. Every line ran." : undefined,
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			children: /* @__PURE__ */ jsx(CodeTraceScene, { narrow })
+		})
+	});
+}
+
+//#endregion
+export { CodeTraceLab, CodeTraceLab as default };

package/dist/domains/ict/code-trace/scene.mjs

@@ -0,0 +1,321 @@
+'use client';
+
+import { FigParagraph, FigText } from "../../../kit/figure/text.mjs";
+import { ACCENT } from "../../../kit/scene/tokens.mjs";
+import { Figure, HUE, STROKE, alpha, tint } from "../../../kit/figure/figure.mjs";
+import { GripKey, GripKeyRow, keyWidth } from "../../../kit/figure/grip.mjs";
+import { useControl } from "../../../runtime/use-control.mjs";
+import { Solid } from "../../../kit/scene/objects/block.mjs";
+import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { codeTraceModel } from "./model.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/domains/ict/code-trace/scene.tsx
+const MONO = .6;
+function CodeTraceScene({ narrow = false }) {
+	const { reading, scenario, state } = useLabView(codeTraceModel);
+	const next = useControl(codeTraceModel, "next");
+	const back = useControl(codeTraceModel, "back");
+	const guess = useControl(codeTraceModel, "guess");
+	const label = codeTraceModel.describe(scenario, state, reading);
+	const r = reading;
+	const W = narrow ? 360 : 720;
+	const pad = narrow ? 4 : 16;
+	const gutter = narrow ? 26 : 40;
+	const codeW = narrow ? W - pad * 2 : 404;
+	const longest = Math.max(1, ...r.lines.map((l) => l.length));
+	const fs = Math.max(10.5, Math.min(15, (codeW - gutter - 10) / (longest * MONO)));
+	const lineH = Math.round(fs * 1.8);
+	const codeY = 46;
+	const codeH = 24 + r.lines.length * lineH;
+	const noteY = codeY + codeH + 20;
+	const sideX = narrow ? pad : pad + codeW + 20;
+	const sideW = narrow ? codeW : W - sideX - pad;
+	const varsTop = narrow ? noteY + 18 : codeY;
+	const boxW = narrow ? 100 : 118;
+	const perRow = Math.max(1, Math.floor((sideW + 12) / (boxW + 12)));
+	const varRows = Math.max(1, Math.ceil(r.variables.length / perRow));
+	const varsH = r.variables.length ? 22 + varRows * 92 : 26;
+	const consoleY = varsTop + varsH + 8;
+	const shownLines = r.output.slice(-6);
+	const outBottom = 44 + Math.max(2, shownLines.length) * 20;
+	const choices = r.question?.choices ?? [];
+	const rowW = choices.reduce((sum, c) => sum + keyWidth(c), 0) + 8 * Math.max(0, choices.length - 1);
+	const stacked = rowW > sideW - 24;
+	const askH = r.question ? 30 + (stacked ? choices.length * 36 : 36) + 26 : 0;
+	const consoleH = outBottom + askH + (r.error ? 22 : 0);
+	const feedbackH = r.feedback ? 46 : 12;
+	const H = Math.max(codeY + codeH + 40, consoleY + consoleH + feedbackH);
+	const nextText = r.done ? "Finished" : "Next line";
+	const nextW = keyWidth(nextText);
+	const backW = keyWidth("Back");
+	return /* @__PURE__ */ jsxs(Figure, {
+		viewBox: [W, H],
+		domain: "computing",
+		label,
+		children: [
+			/* @__PURE__ */ jsx(GripKey, {
+				x: pad + nextW / 2,
+				y: 20,
+				w: nextW,
+				h: 28,
+				text: nextText,
+				control: next
+			}),
+			/* @__PURE__ */ jsx(GripKey, {
+				x: pad + nextW + 10 + backW / 2,
+				y: 20,
+				w: backW,
+				h: 28,
+				text: "Back",
+				control: back
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: W - pad,
+				y: 25,
+				size: "note",
+				anchor: "end",
+				tone: "soft",
+				caps: false,
+				children: r.language
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: pad,
+				y: codeY,
+				width: codeW,
+				height: codeH,
+				rx: 10,
+				fill: tint(HUE.paper, 90),
+				stroke: alpha(HUE.ink, 18),
+				strokeWidth: STROKE.hair
+			}),
+			r.lines.map((text, i) => {
+				const n = i + 1;
+				const y = codeY + 12 + i * lineH;
+				const base = y + lineH * .66;
+				const isNext = r.next === n && !r.done;
+				const isError = r.error?.line === n;
+				const runs = r.counts.get(n) ?? 0;
+				const skipped = r.done && runs === 0 && text.trim() !== "";
+				return /* @__PURE__ */ jsxs("g", { children: [
+					isNext || isError ? /* @__PURE__ */ jsx("rect", {
+						x: pad + 4,
+						y: y + 2,
+						width: codeW - 8,
+						height: lineH - 4,
+						rx: 6,
+						fill: alpha(isError ? HUE.danger : HUE[1], 16)
+					}) : null,
+					isNext ? /* @__PURE__ */ jsx("path", {
+						d: `M${pad + 4},${base - 9} l7,5 l-7,5 z`,
+						fill: HUE[1]
+					}) : null,
+					/* @__PURE__ */ jsx(FigText, {
+						x: pad + gutter - 8,
+						y: base,
+						size: "note",
+						anchor: "end",
+						tone: "soft",
+						caps: false,
+						children: String(n)
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: pad + gutter,
+						y: base,
+						fontSize: fs,
+						tone: isError ? "hot" : "ink",
+						opacity: skipped ? .38 : 1,
+						caps: false,
+						className: "fig-code",
+						children: text
+					}),
+					runs > 1 ? /* @__PURE__ */ jsx(FigText, {
+						x: pad + codeW - 10,
+						y: base,
+						size: "note",
+						anchor: "end",
+						tone: "hue-2",
+						caps: false,
+						children: `×${runs}`
+					}) : null
+				] }, n);
+			}),
+			r.note ? /* @__PURE__ */ jsx(FigText, {
+				x: pad + 4,
+				y: noteY,
+				size: "label",
+				tone: r.note.text.endsWith("True") ? "good" : "hot",
+				caps: false,
+				className: "fig-code",
+				children: `line ${r.note.line}:  ${r.note.text}`
+			}) : null,
+			/* @__PURE__ */ jsx(FigText, {
+				x: sideX,
+				y: varsTop + 12,
+				size: "note",
+				tone: "soft",
+				caps: false,
+				children: r.variables.length ? "variables" : "variables (none yet)"
+			}),
+			r.variables.map(({ name, value }, i) => {
+				const col = i % perRow;
+				const row = Math.floor(i / perRow);
+				const x = sideX + col * (boxW + 12);
+				const y = varsTop + 22 + row * 92;
+				const changed = r.changed.includes(name);
+				return /* @__PURE__ */ jsxs("g", { children: [
+					/* @__PURE__ */ jsx(Solid, {
+						x,
+						y,
+						w: boxW,
+						h: 58,
+						radius: 9,
+						ramp: changed ? ACCENT.amber : ACCENT.cobalt
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: x + 10,
+						y: y + 9,
+						width: boxW - 20,
+						height: 26,
+						rx: 5,
+						fill: tint(HUE.paper, 97)
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x + boxW / 2,
+						y: y + 27,
+						size: "measure",
+						anchor: "middle",
+						tone: "ink",
+						weight: "bold",
+						caps: false,
+						className: "fig-code",
+						fit: boxW - 26,
+						children: value.repr
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x + boxW / 2,
+						y: y + 50,
+						size: "note",
+						anchor: "middle",
+						tone: "inverse",
+						caps: false,
+						children: value.type
+					}),
+					/* @__PURE__ */ jsx("rect", {
+						x: x + boxW / 2 - 30,
+						y: y + 63,
+						width: 60,
+						height: 20,
+						rx: 4,
+						fill: tint(HUE.paper, 97),
+						stroke: alpha(HUE.ink, 25),
+						strokeWidth: STROKE.hair
+					}),
+					/* @__PURE__ */ jsx(FigText, {
+						x: x + boxW / 2,
+						y: y + 77,
+						size: "label",
+						anchor: "middle",
+						tone: "ink",
+						weight: "bold",
+						caps: false,
+						className: "fig-code",
+						fit: 56,
+						children: name
+					})
+				] }, name);
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: sideX,
+				y: consoleY,
+				width: sideW,
+				height: consoleH,
+				rx: 14,
+				fill: tint(HUE.ink, 8),
+				stroke: alpha(HUE.ink, 30),
+				strokeWidth: STROKE.line
+			}),
+			/* @__PURE__ */ jsx(FigText, {
+				x: sideX + 14,
+				y: consoleY + 20,
+				size: "note",
+				tone: "soft",
+				caps: false,
+				children: "console"
+			}),
+			shownLines.map((line, i) => /* @__PURE__ */ jsx(FigText, {
+				x: sideX + 14,
+				y: consoleY + 44 + i * 20,
+				size: "label",
+				tone: "ink",
+				caps: false,
+				className: "fig-code",
+				fit: sideW - 28,
+				children: line || " "
+			}, `${r.output.length - shownLines.length + i}`)),
+			r.error ? /* @__PURE__ */ jsx(FigText, {
+				x: sideX + 14,
+				y: consoleY + outBottom + 6,
+				size: "label",
+				tone: "hot",
+				caps: false,
+				className: "fig-code",
+				fit: sideW - 28,
+				children: `${r.error.type}: ${r.error.message}`
+			}) : null,
+			r.question ? /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx(FigText, {
+					x: sideX + sideW / 2,
+					y: consoleY + outBottom + 10,
+					size: "label",
+					anchor: "middle",
+					tone: "warn",
+					weight: "bold",
+					caps: false,
+					children: "What will it print?"
+				}),
+				stacked ? choices.map((choice, i) => /* @__PURE__ */ jsx(GripKey, {
+					x: sideX + sideW / 2,
+					y: consoleY + outBottom + 38 + i * 36,
+					w: sideW - 24,
+					h: 28,
+					text: choice,
+					label: `It will print: ${choice}`,
+					control: guess,
+					option: choice
+				}, choice)) : /* @__PURE__ */ jsx(GripKeyRow, {
+					x: sideX + sideW / 2,
+					y: consoleY + outBottom + 38,
+					control: guess,
+					options: choices.map((choice) => ({
+						value: choice,
+						text: choice
+					})),
+					align: "middle",
+					even: true,
+					h: 28
+				}),
+				/* @__PURE__ */ jsx(FigText, {
+					x: sideX + sideW / 2,
+					y: consoleY + outBottom + askH - 14,
+					size: "note",
+					anchor: "middle",
+					tone: "soft",
+					caps: false,
+					children: "not sure? press Next line to see"
+				})
+			] }) : null,
+			r.feedback ? /* @__PURE__ */ jsx(FigParagraph, {
+				x: sideX + 4,
+				y: consoleY + consoleH + 20,
+				width: sideW - 8,
+				size: "label",
+				tone: r.feedback.right ? "good" : "hot",
+				children: r.feedback.right ? `✓ You said ${JSON.stringify(r.feedback.guessed)}. Right.` : `You said ${JSON.stringify(r.feedback.guessed)}; it printed ${JSON.stringify(r.feedback.answer)}.`
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { CodeTraceScene };

package/dist/domains/ict/coin-change/scene.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import { Disclosure } from "../../../kit/frame.mjs";
-import { Stack } from "../../../kit/layout.mjs";
 import { TraceTransport } from "../../../kit/transport.mjs";
 import { useControl } from "../../../runtime/use-control.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { Stack } from "../../../kit/layout.mjs";
 import { useAsking } from "../../../kit/shell/earned.mjs";
 import { AlgorithmDiagram, AlgorithmEvidenceTable, ArrayStrip } from "../../../kit/algorithms/index.mjs";
 import { CoinGlyph } from "../../../kit/probability.mjs";

package/dist/domains/ict/complexity-growth/scene.mjs

@@ -2,9 +2,9 @@
 
 import { Slider } from "../../../kit/controls.mjs";
 import { Field } from "../../../kit/frame.mjs";
-import { Stack } from "../../../kit/layout.mjs";
 import { useControl } from "../../../runtime/use-control.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { Stack } from "../../../kit/layout.mjs";
 import { AlgorithmBars, AlgorithmEvidenceTable } from "../../../kit/algorithms/index.mjs";
 import { growthModel } from "./model.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/domains/ict/cost-derivation/scene.mjs

@@ -4,11 +4,10 @@ import { FigText } from "../../../kit/figure/text.mjs";
 import { HUE, tint } from "../../../kit/figure/figure.mjs";
 import { Slider, Stepper } from "../../../kit/controls.mjs";
 import { Disclosure, Field } from "../../../kit/frame.mjs";
-import { useNarrow } from "../../../kit/figure/narrow.mjs";
-import { Stack } from "../../../kit/layout.mjs";
-import "../../../kit/figure/index.mjs";
 import { useControl } from "../../../runtime/use-control.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { useNarrow } from "../../../kit/figure/narrow.mjs";
+import { Stack } from "../../../kit/layout.mjs";
 import { SceneSettings } from "../../../kit/scene-settings.mjs";
 import { AlgorithmDiagram, AlgorithmEvidenceTable, ArrayStrip } from "../../../kit/algorithms/index.mjs";
 import { costDerivationModel } from "./model.mjs";

package/dist/domains/ict/graph-algorithm/scene.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import { Disclosure } from "../../../kit/frame.mjs";
-import { Stack } from "../../../kit/layout.mjs";
 import { TraceTransport } from "../../../kit/transport.mjs";
 import { useControl } from "../../../runtime/use-control.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { Stack } from "../../../kit/layout.mjs";
 import { useAsking, usePrediction } from "../../../kit/shell/earned.mjs";
 import { AlgorithmEvidenceTable, ArrayStrip } from "../../../kit/algorithms/index.mjs";
 import { AlgorithmGraphView } from "../../../kit/algorithms/graph.mjs";

package/dist/domains/ict/grid-path-dp/scene.mjs

@@ -1,9 +1,9 @@
 'use client';
 
-import { Stack } from "../../../kit/layout.mjs";
 import { TraceTransport } from "../../../kit/transport.mjs";
 import { useControl } from "../../../runtime/use-control.mjs";
 import { useLabView } from "../../../runtime/use-lab-view.mjs";
+import { Stack } from "../../../kit/layout.mjs";
 import { useAsking } from "../../../kit/shell/earned.mjs";
 import { AlgorithmTable, ArrayStrip } from "../../../kit/algorithms/index.mjs";
 import { dpModel } from "./model.mjs";