@classytic/labs 0.2.0 → 0.3.0

package/dist/chem/periodic-trends/preset.mjs

@@ -1,9 +1,11 @@
 'use client';
 
-import { Chip } from "../../kit/controls.mjs";
-import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
-import { ChallengeCard, useChallenge, useCheckpoint } from "../../kit/pedagogy.mjs";
-import { thermalColor } from "../../kit/thermal.mjs";
+import { ActivitySelect } from "../../kit/controls.mjs";
+import { Field, Readout } from "../../kit/frame.mjs";
+import { AuthoredActivityRuntime, AuthoredMetricGate } from "../../kit/authored-activity-runtime.mjs";
+import { Figure, HUE, STROKE, tint } from "../../kit/figure/figure.mjs";
+import { FigText } from "../../kit/figure/text.mjs";
+import { Arrow } from "../../kit/figure/beam.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
@@ -14,7 +16,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * (atomic radius, ionisation energy, electronegativity) and every tile recolours;
 * hover an element for its value. The gradients make the rules obvious: radius grows
 * DOWN and LEFT (toward caesium); ionisation energy and electronegativity grow UP and
-* RIGHT (toward fluorine). Periods 1–5 (H–Xe); a curated dataset, not a formula , 
+* RIGHT (toward fluorine). Periods 1–5 (H–Xe); a curated dataset, not a formula ,
 * which property is shown (and any highlighted element) is authorable, and a
 * predict-first question ships with it.
 */
@@ -566,27 +568,36 @@ const PROPS = {
 		unit: "pm",
 		idx: 5,
 		trend: "grows ↓ and ←",
-		corner: "biggest at the bottom-left (Rb, Cs)"
+		corner: "biggest at the bottom-left (Rb, Cs)",
+		across: -1,
+		down: 1
 	},
 	ie: {
 		label: "Ionisation energy",
 		unit: "kJ/mol",
 		idx: 7,
 		trend: "grows ↑ and →",
-		corner: "highest at the top-right (F, Ne, He)"
+		corner: "highest at the top-right (F, Ne, He)",
+		across: 1,
+		down: -1
 	},
 	en: {
 		label: "Electronegativity",
 		unit: "",
 		idx: 6,
 		trend: "grows ↑ and →",
-		corner: "highest at the top-right (F)"
+		corner: "highest at the top-right (F)",
+		across: 1,
+		down: -1
 	}
 };
-const W = 600, CELL = 30, OX = 12, OY = 30;
+/** Sequential single-hue ramp (pale paper → full hue-1) for a 0..1 normalised value. */
+const heat = (t) => tint(HUE[1], Math.round(8 + 92 * Math.max(0, Math.min(1, t))));
+const W = 600, CELL = 32, OX = 12, OY = 10;
+const LEGEND_STEPS = 40, LEGEND_STEP_W = 5, LEGEND_H = 12;
 const CHALLENGE = [{
 	id: "period",
-	prompt: "Going LEFT → RIGHT across a period, atomic radius…",
+	prompt: "Going left to right across a period, atomic radius…",
 	choices: [
 		{
 			value: "down",
@@ -623,207 +634,306 @@ const CHALLENGE = [{
 	answer: "tr",
 	explain: "Small, tightly-held atoms top-right cling hardest to their electrons, so they need the most energy to ionise."
 }];
+const STEPS = [
+	{
+		id: "predict",
+		phase: "predict",
+		title: "Predict the direction",
+		lead: "Commit to the across-period trend before opening the heatmap.",
+		success: "period-prediction"
+	},
+	{
+		id: "explore",
+		phase: "act",
+		title: "Change the property",
+		lead: "Compare a size trend with an energy trend.",
+		reveal: ["model"],
+		controls: true,
+		success: "property-compared"
+	},
+	{
+		id: "observe",
+		phase: "observe",
+		title: "Read the gradient",
+		lead: "Use colour and a selected element as evidence.",
+		reveal: ["model", "evidence"]
+	},
+	{
+		id: "explain",
+		phase: "explain",
+		title: "Explain the energetic trend",
+		lead: "Connect position in the table to ionisation energy.",
+		success: "energy-explanation"
+	},
+	{
+		id: "transfer",
+		phase: "transfer",
+		title: "Inspect another element",
+		lead: "Select an element and report its property value.",
+		reveal: ["model", "evidence"],
+		controls: true,
+		success: "element-inspected"
+	}
+];
 function PeriodicTrendsLab({ property: prop0 = "radius", highlight, title = "Periodic trends: read the table as a heatmap", prompt = "Colour every element by a property and the trend appears as a gradient. Hover an element for its value; switch the property to see the pattern flip.", objectives = [
 	"Read periodic trends as colour gradients across the table",
 	"Atomic radius grows down a group and shrinks across a period",
 	"Ionisation energy & electronegativity grow up and to the right"
-] } = {}) {
+], activity } = {}) {
 	const [prop, setProp] = useState(prop0);
 	const [selZ, setSelZ] = useState(highlight ? ELEMENTS.find((e) => e[1] === highlight)?.[0] ?? null : null);
-	const challenge = useChallenge(CHALLENGE);
-	useCheckpoint({
-		solved: challenge.allCorrect,
-		activity: "periodic-trends"
-	});
+	const initialZ = highlight ? ELEMENTS.find((e) => e[1] === highlight)?.[0] ?? null : null;
 	const cfg = PROPS[prop];
 	const vals = ELEMENTS.map((e) => e[cfg.idx]).filter((v) => v != null);
 	const lo = Math.min(...vals), hi = Math.max(...vals);
 	const norm = (v) => hi > lo ? (v - lo) / (hi - lo) : .5;
-	const H = 236;
 	const sel = selZ != null ? ELEMENTS.find((e) => e[0] === selZ) : void 0;
-	const legY = 196;
+	const legY = 186;
+	const H = 208;
+	const unit = cfg.unit ? ` ${cfg.unit}` : "", gapMid = 472 / 2;
+	const acrossY = 72, acrossX0 = gapMid - 92, acrossX1 = gapMid - 12;
+	const downX = 276, downY0 = 54, downY1 = 94, legendX0 = 132;
 	const figure = /* @__PURE__ */ jsx("div", {
-		style: {
-			borderRadius: 14,
-			overflow: "hidden",
-			background: "var(--stage-bg)",
-			border: "1px solid var(--stage-grid)"
-		},
-		children: /* @__PURE__ */ jsxs("svg", {
-			viewBox: `0 0 ${W} ${H}`,
-			width: "100%",
-			role: "img",
-			"aria-label": `Periodic table coloured by ${cfg.label}`,
+		className: "chem-scene chem-periodic-scene chem-wide-scene",
+		role: "region",
+		"aria-label": "Interactive periodic table; scroll horizontally on a narrow screen",
+		tabIndex: 0,
+		children: /* @__PURE__ */ jsxs(Figure, {
+			viewBox: [W, H],
+			domain: "chem",
+			label: `Periodic table coloured by ${cfg.label}`,
 			children: [
-				/* @__PURE__ */ jsxs("text", {
-					x: OX,
-					y: 18,
-					fontSize: 12,
-					fontWeight: 700,
-					fill: "var(--stage-fg)",
-					children: [
-						cfg.label,
-						cfg.unit ? ` (${cfg.unit})` : "",
-						", ",
-						cfg.trend
-					]
-				}),
 				ELEMENTS.map((e) => {
 					const z = e[0], sym = e[1], period = e[3], group = e[4];
 					const v = e[cfg.idx];
 					const x = OX + (group - 1) * CELL, y = OY + (period - 1) * CELL;
 					const t = v != null ? norm(v) : null;
-					const fill = t != null ? thermalColor(t) : "var(--stage-grid)";
 					const isSel = selZ === z;
 					return /* @__PURE__ */ jsxs("g", {
+						className: "chem-periodic-element",
 						onPointerEnter: () => setSelZ(z),
 						onClick: () => setSelZ(z),
-						style: { cursor: "pointer" },
+						role: "button",
+						tabIndex: 0,
+						"aria-label": `${e[2]}, ${cfg.label} ${v ?? "unavailable"} ${cfg.unit}`,
+						onKeyDown: (event) => {
+							if (event.key === "Enter" || event.key === " ") {
+								event.preventDefault();
+								setSelZ(z);
+							}
+						},
 						children: [/* @__PURE__ */ jsx("rect", {
 							x,
 							y,
 							width: CELL - 2,
 							height: CELL - 2,
 							rx: 3,
-							fill,
-							opacity: v != null ? .9 : .4,
-							stroke: isSel ? "var(--stage-fg)" : "var(--stage-bg)",
-							strokeWidth: isSel ? 2 : 1
-						}), /* @__PURE__ */ jsx("text", {
+							fill: t != null ? heat(t) : tint(HUE.soft, 18),
+							stroke: isSel ? HUE.ink : HUE.paper,
+							strokeWidth: isSel ? STROKE.edge : STROKE.hair
+						}), /* @__PURE__ */ jsx(FigText, {
 							x: x + (CELL - 2) / 2,
-							y: y + (CELL - 2) / 2 + 3.5,
-							textAnchor: "middle",
-							fontSize: 10.5,
-							fontWeight: 700,
-							fill: t != null && (t < .25 || t > .75) ? "#fff" : "var(--stage-fg)",
+							y: y + (CELL - 2) / 2,
+							anchor: "middle",
+							baseline: "middle",
+							tone: t == null ? "soft" : "ink",
 							children: sym
 						})]
 					}, z);
 				}),
-				/* @__PURE__ */ jsx("text", {
+				/* @__PURE__ */ jsxs(FigText, {
+					x: gapMid,
+					y: 40,
+					anchor: "middle",
+					size: "title",
+					children: [cfg.label, cfg.unit ? ` (${cfg.unit})` : ""]
+				}),
+				/* @__PURE__ */ jsx(Arrow, {
+					x1: cfg.across > 0 ? acrossX0 : acrossX1,
+					y1: acrossY,
+					x2: cfg.across > 0 ? acrossX1 : acrossX0,
+					y2: acrossY,
+					color: HUE[1],
+					weight: "edge",
+					head: 9
+				}),
+				/* @__PURE__ */ jsx(FigText, {
+					x: 368 / 2,
+					y: 92,
+					anchor: "middle",
+					size: "note",
+					tone: "soft",
+					children: "grows across a period"
+				}),
+				/* @__PURE__ */ jsx(Arrow, {
+					x1: downX,
+					y1: cfg.down > 0 ? downY0 : downY1,
+					x2: downX,
+					y2: cfg.down > 0 ? downY1 : downY0,
+					color: HUE[1],
+					weight: "edge",
+					head: 9
+				}),
+				/* @__PURE__ */ jsx(FigText, {
+					x: 288,
+					y: 148 / 2,
+					baseline: "middle",
+					size: "note",
+					tone: "soft",
+					children: "grows down a group"
+				}),
+				/* @__PURE__ */ jsx(FigText, {
 					x: OX,
-					y: 207,
-					fontSize: 10,
-					fill: "var(--stage-muted)",
-					children: "low"
+					y: 192,
+					baseline: "middle",
+					size: "eyebrow",
+					tone: "soft",
+					children: "scale"
 				}),
-				Array.from({ length: 40 }, (_, i) => /* @__PURE__ */ jsx("rect", {
-					x: 38 + i * 5,
+				/* @__PURE__ */ jsxs(FigText, {
+					x: legendX0 - 6,
+					y: 192,
+					anchor: "end",
+					baseline: "middle",
+					size: "note",
+					children: [lo, unit]
+				}),
+				Array.from({ length: LEGEND_STEPS }, (_, i) => /* @__PURE__ */ jsx("rect", {
+					x: legendX0 + i * LEGEND_STEP_W,
 					y: legY,
-					width: 5,
-					height: 12,
-					fill: thermalColor(i / 39)
+					width: 5.5,
+					height: LEGEND_H,
+					fill: heat(i / (LEGEND_STEPS - 1))
 				}, i)),
-				/* @__PURE__ */ jsx("text", {
-					x: 242,
-					y: 207,
-					fontSize: 10,
-					fill: "var(--stage-muted)",
-					children: "high"
-				}),
-				/* @__PURE__ */ jsxs("text", {
-					x: 38,
-					y: 222,
-					fontSize: 9.5,
-					fill: "var(--stage-muted)",
-					children: [lo, cfg.unit ? ` ${cfg.unit}` : ""]
+				/* @__PURE__ */ jsx("rect", {
+					x: legendX0,
+					y: legY,
+					width: LEGEND_STEPS * LEGEND_STEP_W,
+					height: LEGEND_H,
+					rx: 2,
+					fill: "none",
+					stroke: HUE.soft,
+					strokeWidth: STROKE.hair
 				}),
-				/* @__PURE__ */ jsxs("text", {
-					x: 238,
-					y: 222,
-					textAnchor: "end",
-					fontSize: 9.5,
-					fill: "var(--stage-muted)",
-					children: [hi, cfg.unit ? ` ${cfg.unit}` : ""]
+				/* @__PURE__ */ jsxs(FigText, {
+					x: 338,
+					y: 192,
+					baseline: "middle",
+					size: "note",
+					children: [hi, unit]
 				})
 			]
 		})
 	});
-	const aside = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Callout, {
-		tone: "result",
-		children: sel ? /* @__PURE__ */ jsxs("span", {
-			style: {
-				display: "grid",
-				gap: 2,
-				fontVariantNumeric: "tabular-nums"
-			},
-			children: [/* @__PURE__ */ jsxs("span", {
-				style: {
-					fontWeight: 800,
-					fontSize: 15
+	const evidence = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Readout, {
+		value: sel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			sel[2],
+			" (",
+			sel[1],
+			") · Z=",
+			sel[0]
+		] }) : /* @__PURE__ */ jsx(Fragment$1, { children: "Select an element" }),
+		sub: sel ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			cfg.label,
+			": ",
+			sel[cfg.idx] != null ? `${sel[cfg.idx]} ${cfg.unit}` : "unavailable"
+		] }) : /* @__PURE__ */ jsx(Fragment$1, { children: "Hover, focus, or click a tile." })
+	}), /* @__PURE__ */ jsxs("p", {
+		className: "chem-explanation",
+		children: [
+			cfg.label,
+			" ",
+			/* @__PURE__ */ jsx("strong", { children: cfg.trend }),
+			", ",
+			cfg.corner,
+			"."
+		]
+	})] });
+	const controls = /* @__PURE__ */ jsx(Field, {
+		label: "colour by",
+		children: /* @__PURE__ */ jsx(ActivitySelect, {
+			ariaLabel: "colour by",
+			value: prop,
+			onChange: setProp,
+			options: Object.keys(PROPS).map((p) => ({
+				value: p,
+				label: PROPS[p].label
+			}))
+		})
+	});
+	return /* @__PURE__ */ jsx(AuthoredActivityRuntime, {
+		focusLayout: "immersive",
+		activity: activity ?? {
+			pattern: "investigation",
+			title,
+			objectives,
+			steps: STEPS,
+			questions: CHALLENGE,
+			success: [
+				{
+					id: "period-prediction",
+					source: "answer",
+					key: "period",
+					pendingLabel: "Choose the atomic-radius trend."
 				},
-				children: [
-					sel[2],
-					" (",
-					sel[1],
-					") · Z=",
-					sel[0]
-				]
-			}), /* @__PURE__ */ jsxs("span", {
-				style: {
-					fontSize: 13,
-					color: "var(--stage-muted)"
+				{
+					id: "property-compared",
+					source: "metric",
+					key: "propertyChanged",
+					operator: "eq",
+					value: true,
+					pendingLabel: "Choose ionisation energy or electronegativity."
 				},
-				children: [
-					cfg.label,
-					": ",
-					sel[cfg.idx] != null ? `${sel[cfg.idx]} ${cfg.unit}` : ", "
-				]
-			})]
-		}) : /* @__PURE__ */ jsxs("span", {
-			style: { fontSize: 13 },
-			children: [
-				"Hover any element to read its ",
-				cfg.label.toLowerCase(),
-				"."
+				{
+					id: "energy-explanation",
+					source: "answer",
+					key: "ie",
+					pendingLabel: "Identify where ionisation energy is highest."
+				},
+				{
+					id: "element-inspected",
+					source: "metric",
+					key: "selectedElement",
+					operator: "neq",
+					value: initialZ ?? -1,
+					pendingLabel: "Select another element."
+				}
 			]
-		})
-	}), /* @__PURE__ */ jsx("div", {
-		style: {
-			display: "grid",
-			gap: 6,
-			padding: "8px 2px 0",
-			fontSize: 13
 		},
-		children: /* @__PURE__ */ jsxs("span", {
-			style: { color: "var(--stage-muted)" },
-			children: [
-				cfg.label,
-				" ",
-				/* @__PURE__ */ jsx("strong", {
-					style: { color: "var(--stage-fg)" },
-					children: cfg.trend
-				}),
-				", ",
-				cfg.corner,
-				". Switch the property and watch the gradient flip direction."
-			]
-		})
-	})] });
-	const footer = /* @__PURE__ */ jsx(ChallengeCard, {
-		questions: CHALLENGE,
-		state: challenge,
-		title: "Predict first"
-	});
-	return /* @__PURE__ */ jsx(LabFrame, {
+		activityId: "periodic-trends",
+		eyebrow: "Chemical periodicity",
 		title,
-		prompt,
-		objectives,
-		aside,
-		controls: /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
-			label: "colour by",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "lab-field-row",
-				style: { flexWrap: "wrap" },
-				children: Object.keys(PROPS).map((p) => /* @__PURE__ */ jsx(Chip, {
-					selected: prop === p,
-					onClick: () => setProp(p),
-					children: PROPS[p].label
-				}, p))
-			})
-		}) }),
-		footer,
-		children: figure
+		description: prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: cfg.label }), sel ? /* @__PURE__ */ jsxs("span", { children: [
+			sel[1],
+			" · ",
+			sel[cfg.idx] ?? "—",
+			" ",
+			cfg.unit
+		] }) : null] }),
+		evidence: ({ sequence }) => sequence.shows("evidence") ? evidence : null,
+		controls: ({ sequence }) => sequence.current.controls ? controls : null,
+		observation: ({ sequence }) => sequence.shows("model") ? `${cfg.label} ${cfg.trend}; the colour gradient makes the direction visible.` : null,
+		transcript: /* @__PURE__ */ jsxs("p", { children: [
+			"The periodic table is coloured by ",
+			cfg.label.toLowerCase(),
+			".",
+			" ",
+			sel ? `${sel[2]}, atomic number ${sel[0]}, has a value of ${sel[cfg.idx] ?? "unavailable"} ${cfg.unit}.` : "No element is selected."
+		] }),
+		children: ({ sequence, complete }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "property-compared",
+				met: sequence.current.id === "explore" && prop !== prop0,
+				complete
+			}),
+			/* @__PURE__ */ jsx(AuthoredMetricGate, {
+				conditionId: "element-inspected",
+				met: sequence.current.id === "transfer" && selZ != null && selZ !== initialZ,
+				complete
+			}),
+			sequence.shows("model") ? figure : /* @__PURE__ */ jsx("p", { children: "Answer the prediction to reveal the periodic heatmap." })
+		] })
 	});
 }
 

package/dist/chem/reaction-lab.d.mts

@@ -1,3 +1,4 @@
+import { AuthoredActivity } from "../kit/activity-authoring.mjs";
 import { ReactNode } from "react";
 
 //#region src/chem/reaction-lab.d.ts
@@ -7,12 +8,14 @@ interface ReactionLabProps {
   b?: string;
   title?: string;
   height?: number;
+  activity?: AuthoredActivity;
 }
 declare function ReactionLab({
   a,
   b,
   title,
-  height
+  height,
+  activity
 }?: ReactionLabProps): ReactNode;
 //#endregion
 export { ReactionLab, ReactionLabProps };