@classytic/labs 0.1.0

package/dist/geography/cycle-lab/preset.mjs

@@ -0,0 +1,254 @@
+'use client';
+
+import { Chip, StatusPill } from "../../kit/controls.mjs";
+import { ControlBar, Field, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { CycleDiagram, edgeKey } from "../../kit/cycle.mjs";
+import { WATER_CYCLE } from "../cycles.mjs";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/geography/cycle-lab/preset.tsx
+/**
+* CycleLab — ONE authorable lab for every cycle (water, rock, carbon, nitrogen,
+* food chains…). The creator/agent declares the model (nodes + process-labelled
+* edges) and a challenge; the shared CycleDiagram renders it. Not a bespoke
+* WaterCycle/RockCycle widget — the cycle is data.
+*
+*  • challenge='trace' — click a stage; its outgoing arrows + the processes that
+*    drive them light up. The branched rock/carbon cycles reveal that you don't
+*    have to go all the way around — any rock can melt or re-weather.
+*  • challenge='label-process' — the process names are stripped off the arrows
+*    into a tray; match each one to the transition it drives. That IS the IGCSE
+*    skill, and it's unambiguous (clean rings like the water cycle).
+*
+* Tokenized, reduced-motion safe (all motion is click-driven), agent-drivable.
+*/
+const hash = (s) => {
+	let h = 0;
+	for (let i = 0; i < s.length; i++) h = h * 31 + s.charCodeAt(i) | 0;
+	return h >>> 0;
+};
+function CycleLab({ nodes = WATER_CYCLE.nodes, edges = WATER_CYCLE.edges, challenge = "label-process", size = 340, title = "The water cycle", prompt, objectives }) {
+	if (challenge === "trace") return /* @__PURE__ */ jsx(TraceCycle, {
+		nodes,
+		edges,
+		size,
+		title,
+		prompt,
+		objectives,
+		activity: "cycle-trace"
+	});
+	return /* @__PURE__ */ jsx(LabelProcess, {
+		nodes,
+		edges,
+		size,
+		title,
+		prompt,
+		objectives,
+		hash,
+		activity: "cycle-label"
+	});
+}
+function TraceCycle({ nodes, edges, size, title, prompt, objectives, activity }) {
+	const [active, setActive] = useState(null);
+	const [seen, setSeen] = useState(/* @__PURE__ */ new Set());
+	const [reported, setReported] = useState(false);
+	useCheckpoint({
+		solved: reported,
+		activity
+	});
+	const labelOf = (id) => nodes.find((n) => n.id === id)?.label ?? "";
+	const out = active ? edges.filter((e) => e.from === active) : [];
+	const click = (id) => {
+		setActive(id);
+		setSeen((s) => {
+			const next = new Set(s).add(id);
+			if (next.size >= nodes.length) setReported(true);
+			return next;
+		});
+	};
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		style: {
+			borderRadius: 14,
+			background: "var(--stage-bg)",
+			border: "1px solid var(--stage-grid)",
+			padding: 8
+		},
+		children: /* @__PURE__ */ jsx(CycleDiagram, {
+			nodes,
+			edges,
+			size,
+			activeId: active,
+			onNodeClick: click,
+			ariaLabel: `${title} — click a stage to trace its transitions`
+		})
+	}), /* @__PURE__ */ jsx(LiveRegion, { children: active ? `${labelOf(active)} leads to ${out.map((e) => `${labelOf(e.to)} by ${e.label}`).join(", ") || "nothing further"}.` : "" })] });
+	const footer = /* @__PURE__ */ jsxs("div", {
+		className: "lab-bar",
+		style: {
+			flexWrap: "wrap",
+			gap: 10,
+			minHeight: 30
+		},
+		children: [active ? out.length ? out.map((e) => /* @__PURE__ */ jsxs("span", {
+			style: { fontSize: 13 },
+			children: [
+				/* @__PURE__ */ jsx("b", {
+					style: { color: "var(--stage-accent)" },
+					children: labelOf(active)
+				}),
+				/* @__PURE__ */ jsxs("span", {
+					style: { color: "var(--stage-muted)" },
+					children: [
+						" —",
+						e.label,
+						"→ "
+					]
+				}),
+				/* @__PURE__ */ jsx("b", { children: labelOf(e.to) })
+			]
+		}, edgeKey(e))) : /* @__PURE__ */ jsxs("span", {
+			style: { color: "var(--stage-muted)" },
+			children: [labelOf(active), " is an end of this path here."]
+		}) : /* @__PURE__ */ jsx("span", {
+			style: { color: "var(--stage-muted)" },
+			children: "Tap a stage to begin."
+		}), /* @__PURE__ */ jsxs(StatusPill, {
+			ok: seen.size >= nodes.length,
+			children: [
+				seen.size,
+				"/",
+				nodes.length,
+				" stages traced"
+			]
+		})]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt: prompt ?? "Click each stage to trace where it goes — and which process drives the change.",
+		objectives,
+		footer,
+		children: figure
+	});
+}
+function LabelProcess({ nodes, edges, size, title, prompt, objectives, hash: h, activity }) {
+	const labelEdges = useMemo(() => edges.filter((e) => e.label), [edges]);
+	const trueLabel = useMemo(() => Object.fromEntries(labelEdges.map((e) => [edgeKey(e), e.label])), [labelEdges]);
+	const allLabels = useMemo(() => [...new Set(labelEdges.map((e) => e.label))].sort((a, b) => h(a) - h(b)), [labelEdges, h]);
+	const [assign, setAssign] = useState({});
+	const [sel, setSel] = useState(null);
+	const correct = (k) => assign[k] === trueLabel[k];
+	const placed = labelEdges.filter((e) => correct(edgeKey(e))).map((e) => assign[edgeKey(e)]);
+	const pool = allLabels.filter((l) => !placed.includes(l));
+	const solvedCount = labelEdges.filter((e) => correct(edgeKey(e))).length;
+	const solved = solvedCount === labelEdges.length;
+	useCheckpoint({
+		solved: solved && pool.length === 0,
+		activity
+	});
+	const onSlot = (key) => {
+		if (correct(key)) {
+			setAssign((a) => ({
+				...a,
+				[key]: null
+			}));
+			return;
+		}
+		if (!sel) return;
+		setAssign((a) => ({
+			...a,
+			[key]: sel
+		}));
+		setSel(null);
+	};
+	const edgeSlot = (_e, key, mid) => {
+		const val = assign[key];
+		const ok = val != null && val === trueLabel[key];
+		const bad = val != null && !ok;
+		const w = (val ? val.length * 5.7 : 16) + 16;
+		const stroke = ok ? "var(--stage-good)" : bad ? "var(--stage-danger)" : "var(--stage-grid)";
+		const fill = ok ? "var(--stage-good)" : bad ? "var(--stage-danger)" : "var(--stage-muted)";
+		return /* @__PURE__ */ jsxs("g", {
+			onClick: () => onSlot(key),
+			style: { cursor: "pointer" },
+			role: "button",
+			"aria-label": val ? `${val}${ok ? " correct" : " wrong"}` : "empty slot",
+			children: [/* @__PURE__ */ jsx("rect", {
+				x: Math.round(mid.x - w / 2),
+				y: mid.y - 10,
+				width: Math.round(w),
+				height: 20,
+				rx: 10,
+				fill: "var(--stage-bg)",
+				stroke,
+				strokeWidth: 1.6
+			}), /* @__PURE__ */ jsx("text", {
+				x: mid.x,
+				y: mid.y,
+				fontSize: 10.5,
+				fontWeight: 700,
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				fill,
+				children: val ?? "?"
+			})]
+		});
+	};
+	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		style: {
+			borderRadius: 14,
+			background: "var(--stage-bg)",
+			border: "1px solid var(--stage-grid)",
+			padding: 8
+		},
+		children: /* @__PURE__ */ jsx(CycleDiagram, {
+			nodes,
+			edges,
+			size,
+			edgeSlot,
+			ariaLabel: `${title} — match each process to its arrow`
+		})
+	}), /* @__PURE__ */ jsx(LiveRegion, { children: solved ? "All processes matched correctly." : `${solvedCount} of ${labelEdges.length} processes matched.` })] });
+	const controls = /* @__PURE__ */ jsx(ControlBar, { children: /* @__PURE__ */ jsx(Field, {
+		label: "processes",
+		children: /* @__PURE__ */ jsx("span", {
+			style: {
+				display: "flex",
+				flexWrap: "wrap",
+				gap: 8
+			},
+			children: pool.length ? pool.map((l) => /* @__PURE__ */ jsx(Chip, {
+				selected: sel === l,
+				onClick: () => setSel((s) => s === l ? null : l),
+				children: l
+			}, l)) : /* @__PURE__ */ jsx("span", {
+				style: {
+					color: "var(--stage-good)",
+					fontWeight: 700
+				},
+				children: "All processes placed ✓"
+			})
+		})
+	}) });
+	const footer = /* @__PURE__ */ jsxs(StatusPill, {
+		ok: solved,
+		children: [
+			solvedCount,
+			"/",
+			labelEdges.length,
+			" correct"
+		]
+	});
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title,
+		prompt: prompt ?? "Pick a process, then tap the arrow it drives. Green locks it in; tap a locked one to take it back.",
+		objectives,
+		controls,
+		footer,
+		children: figure
+	});
+}
+
+//#endregion
+export { CycleLab };

package/dist/geography/cycles.d.mts

@@ -0,0 +1,21 @@
+import { CycleEdge, CycleNode } from "../kit/cycle.mjs";
+
+//#region src/geography/cycles.d.ts
+interface CycleSpec {
+  nodes: CycleNode[];
+  edges: CycleEdge[];
+}
+/** Water cycle — a clean 5-stage ring; each edge is one distinct process. */
+declare const WATER_CYCLE: CycleSpec;
+/** Rock cycle — a ring PLUS shortcuts: any rock can skip ahead (heat, re-weather). */
+declare const ROCK_CYCLE: CycleSpec;
+/** Carbon cycle — branched (CO₂ in/out by several routes); ties to photo/respiration. */
+declare const CARBON_CYCLE: CycleSpec;
+declare const CYCLE_PRESETS: {
+  readonly water: CycleSpec;
+  readonly rock: CycleSpec;
+  readonly carbon: CycleSpec;
+};
+type CyclePresetKey = keyof typeof CYCLE_PRESETS;
+//#endregion
+export { CARBON_CYCLE, CYCLE_PRESETS, CyclePresetKey, CycleSpec, ROCK_CYCLE, WATER_CYCLE };

package/dist/geography/cycles.mjs

@@ -0,0 +1,205 @@
+//#region src/geography/cycles.ts
+/** Water cycle — a clean 5-stage ring; each edge is one distinct process. */
+const WATER_CYCLE = {
+	nodes: [
+		{
+			id: "ocean",
+			label: "Ocean",
+			tone: "var(--stage-accent-2)"
+		},
+		{
+			id: "vapour",
+			label: "Water vapour",
+			tone: "var(--stage-muted)"
+		},
+		{
+			id: "clouds",
+			label: "Clouds",
+			tone: "var(--stage-fg)"
+		},
+		{
+			id: "precip",
+			label: "Rain & snow",
+			tone: "var(--stage-accent)"
+		},
+		{
+			id: "rivers",
+			label: "Rivers & ground",
+			tone: "var(--stage-good)"
+		}
+	],
+	edges: [
+		{
+			from: "ocean",
+			to: "vapour",
+			label: "evaporation"
+		},
+		{
+			from: "vapour",
+			to: "clouds",
+			label: "condensation"
+		},
+		{
+			from: "clouds",
+			to: "precip",
+			label: "precipitation"
+		},
+		{
+			from: "precip",
+			to: "rivers",
+			label: "infiltration"
+		},
+		{
+			from: "rivers",
+			to: "ocean",
+			label: "runoff"
+		}
+	]
+};
+/** Rock cycle — a ring PLUS shortcuts: any rock can skip ahead (heat, re-weather). */
+const ROCK_CYCLE = {
+	nodes: [
+		{
+			id: "magma",
+			label: "Magma",
+			tone: "var(--stage-danger)"
+		},
+		{
+			id: "igneous",
+			label: "Igneous",
+			tone: "var(--stage-accent)"
+		},
+		{
+			id: "sediment",
+			label: "Sediment",
+			tone: "var(--stage-warn)"
+		},
+		{
+			id: "sedimentary",
+			label: "Sedimentary",
+			tone: "var(--stage-good)"
+		},
+		{
+			id: "metamorphic",
+			label: "Metamorphic",
+			tone: "var(--stage-accent-2)"
+		}
+	],
+	edges: [
+		{
+			from: "magma",
+			to: "igneous",
+			label: "cooling"
+		},
+		{
+			from: "igneous",
+			to: "sediment",
+			label: "weathering"
+		},
+		{
+			from: "sediment",
+			to: "sedimentary",
+			label: "compaction"
+		},
+		{
+			from: "sedimentary",
+			to: "metamorphic",
+			label: "heat & pressure"
+		},
+		{
+			from: "metamorphic",
+			to: "magma",
+			label: "melting"
+		},
+		{
+			from: "igneous",
+			to: "metamorphic",
+			label: "heat & pressure"
+		},
+		{
+			from: "sedimentary",
+			to: "sediment",
+			label: "weathering"
+		}
+	]
+};
+/** Carbon cycle — branched (CO₂ in/out by several routes); ties to photo/respiration. */
+const CARBON_CYCLE = {
+	nodes: [
+		{
+			id: "air",
+			label: "Atmospheric CO₂",
+			tone: "var(--stage-muted)"
+		},
+		{
+			id: "plants",
+			label: "Plants",
+			tone: "var(--stage-good)"
+		},
+		{
+			id: "animals",
+			label: "Animals",
+			tone: "var(--stage-accent)"
+		},
+		{
+			id: "dead",
+			label: "Dead matter",
+			tone: "var(--stage-warn)"
+		},
+		{
+			id: "fossil",
+			label: "Fossil fuels",
+			tone: "var(--stage-fg)"
+		}
+	],
+	edges: [
+		{
+			from: "air",
+			to: "plants",
+			label: "photosynthesis"
+		},
+		{
+			from: "plants",
+			to: "animals",
+			label: "feeding"
+		},
+		{
+			from: "animals",
+			to: "dead",
+			label: "death"
+		},
+		{
+			from: "dead",
+			to: "air",
+			label: "decomposition"
+		},
+		{
+			from: "plants",
+			to: "air",
+			label: "respiration"
+		},
+		{
+			from: "animals",
+			to: "air",
+			label: "respiration"
+		},
+		{
+			from: "dead",
+			to: "fossil",
+			label: "fossilisation"
+		},
+		{
+			from: "fossil",
+			to: "air",
+			label: "combustion"
+		}
+	]
+};
+const CYCLE_PRESETS = {
+	water: WATER_CYCLE,
+	rock: ROCK_CYCLE,
+	carbon: CARBON_CYCLE
+};
+
+//#endregion
+export { CARBON_CYCLE, CYCLE_PRESETS, ROCK_CYCLE, WATER_CYCLE };

package/dist/geography/index.d.mts

@@ -0,0 +1,4 @@
+import { CycleDiagram, CycleEdge, CycleNode, edgeKey } from "../kit/cycle.mjs";
+import { CycleChallenge, CycleLab, CycleLabProps } from "./cycle-lab/preset.mjs";
+import { CARBON_CYCLE, CYCLE_PRESETS, CyclePresetKey, CycleSpec, ROCK_CYCLE, WATER_CYCLE } from "./cycles.mjs";
+export { CARBON_CYCLE, CYCLE_PRESETS, type CycleChallenge, CycleDiagram, type CycleEdge, CycleLab, type CycleLabProps, type CycleNode, type CyclePresetKey, type CycleSpec, ROCK_CYCLE, WATER_CYCLE, edgeKey };

package/dist/geography/index.mjs

@@ -0,0 +1,5 @@
+import { CycleDiagram, edgeKey } from "../kit/cycle.mjs";
+import { CARBON_CYCLE, CYCLE_PRESETS, ROCK_CYCLE, WATER_CYCLE } from "./cycles.mjs";
+import { CycleLab } from "./cycle-lab/preset.mjs";
+
+export { CARBON_CYCLE, CYCLE_PRESETS, CycleDiagram, CycleLab, ROCK_CYCLE, WATER_CYCLE, edgeKey };

package/dist/geometry/board/index.d.mts

@@ -0,0 +1 @@
+import { GeoElement, GeometryBoard, GeometryBoardProps, geoSceneToDoc } from "./preset.mjs";

package/dist/geometry/board/preset.d.mts

@@ -0,0 +1,71 @@
+import { ReactNode } from "react";
+import { SceneDoc, ViewBox } from "@classytic/stage";
+
+//#region src/geometry/board/preset.d.ts
+type View = ViewBox;
+type GeoElement = {
+  type: 'point';
+  id: string;
+  x: number;
+  y: number;
+  draggable?: boolean;
+  label?: string;
+  color?: string;
+} | {
+  type: 'circle';
+  id: string;
+  center: string;
+  radius?: number;
+  through?: string;
+  color?: string;
+} | {
+  type: 'line';
+  id?: string;
+  through: [string, string];
+  color?: string;
+  dashed?: boolean;
+} | {
+  type: 'segment';
+  id?: string;
+  from: string;
+  to: string;
+  color?: string;
+  label?: string;
+  dashed?: boolean;
+} | {
+  type: 'intersect';
+  id: string;
+  of: [string, string];
+  pick?: 0 | 1;
+  label?: string;
+  color?: string;
+} | {
+  type: 'midpoint';
+  id: string;
+  of: [string, string];
+  label?: string;
+  color?: string;
+} | {
+  type: 'measure';
+  kind: 'distance';
+  of: [string, string];
+  label?: string;
+};
+interface GeometryBoardProps {
+  scene?: GeoElement[];
+  view?: View;
+  title?: string;
+  subtitle?: string;
+  height?: number;
+}
+/** Convert a declarative geometry construction into a portable SceneDoc. Stable
+ *  ids (index-based for unnamed segments/lines/measures) keep resolve continuity. */
+declare function geoSceneToDoc(scene: GeoElement[], view: View): SceneDoc;
+declare function GeometryBoard({
+  scene,
+  view,
+  title,
+  height
+}: GeometryBoardProps): ReactNode;
+//#endregion
+export { GeoElement, GeometryBoard, GeometryBoardProps, geoSceneToDoc };

package/dist/geometry/board/preset.mjs

@@ -0,0 +1,148 @@
+'use client';
+
+import { useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Scene } from "@classytic/stage";
+
+//#region src/geometry/board/preset.tsx
+/**
+* GeometryBoard — a declarative interactive-geometry engine, now on the
+* @classytic/stage scene model. A creator describes a CONSTRUCTION as a list of
+* `GeoElement`s; we convert it to a portable SceneDoc and let stage's resolver
+* do the dependency math (circle/line intersection, midpoints) + dragging +
+* a11y. The canvas geometry math is gone — stage already owns it.
+*
+*   <GeometryBoard scene={[
+*     { type:'point', id:'A', x:3, y:0, draggable:true },
+*     { type:'circle', id:'cA', center:'A', radius:3.2 },
+*     { type:'intersect', id:'P', of:['cA','cB'], pick:0 },
+*   ]} />
+*/
+const DEFAULT_VIEW = {
+	xMin: -1,
+	xMax: 11,
+	yMin: -5,
+	yMax: 5
+};
+/** Convert a declarative geometry construction into a portable SceneDoc. Stable
+*  ids (index-based for unnamed segments/lines/measures) keep resolve continuity. */
+function geoSceneToDoc(scene, view) {
+	return {
+		schemaVersion: 2,
+		type: "stage-scene",
+		view,
+		elements: scene.map((el, i) => {
+			switch (el.type) {
+				case "point": return {
+					id: el.id,
+					kind: "point",
+					label: el.label,
+					style: { color: el.color },
+					free: {
+						at: {
+							x: el.x,
+							y: el.y
+						},
+						draggable: el.draggable
+					}
+				};
+				case "circle": return {
+					id: el.id,
+					kind: "circle",
+					style: { color: el.color },
+					def: {
+						op: "circle",
+						center: { ref: el.center },
+						...el.radius != null ? { radius: el.radius } : {},
+						...el.through ? { through: { ref: el.through } } : {}
+					}
+				};
+				case "line": return {
+					id: el.id ?? `l${i}`,
+					kind: "line",
+					style: {
+						color: el.color,
+						dashed: el.dashed
+					},
+					def: {
+						op: "line",
+						through: [{ ref: el.through[0] }, { ref: el.through[1] }]
+					}
+				};
+				case "segment": return {
+					id: el.id ?? `s${i}`,
+					kind: "segment",
+					label: el.label,
+					style: {
+						color: el.color,
+						dashed: el.dashed
+					},
+					def: {
+						op: "segment",
+						from: { ref: el.from },
+						to: { ref: el.to }
+					}
+				};
+				case "intersect": return {
+					id: el.id,
+					kind: "point",
+					label: el.label,
+					style: { color: el.color },
+					def: {
+						op: "intersect",
+						of: [{ ref: el.of[0] }, { ref: el.of[1] }],
+						pick: el.pick ?? 0
+					}
+				};
+				case "midpoint": return {
+					id: el.id,
+					kind: "point",
+					label: el.label,
+					style: { color: el.color },
+					def: {
+						op: "midpoint",
+						of: [{ ref: el.of[0] }, { ref: el.of[1] }]
+					}
+				};
+				case "measure": return {
+					id: `d${i}`,
+					kind: "measure",
+					label: el.label,
+					def: {
+						op: "distance",
+						of: [{ ref: el.of[0] }, { ref: el.of[1] }]
+					}
+				};
+			}
+		}),
+		bindings: []
+	};
+}
+function GeometryBoard({ scene = [], view = DEFAULT_VIEW, title, height = 360 }) {
+	const initial = useMemo(() => geoSceneToDoc(scene, view), [scene, view]);
+	const [doc, setDoc] = useState(initial);
+	useEffect(() => {
+		setDoc(initial);
+	}, [initial]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "not-prose",
+		children: [title && /* @__PURE__ */ jsx("p", {
+			style: {
+				fontWeight: 600,
+				marginBottom: 6
+			},
+			children: title
+		}), /* @__PURE__ */ jsx(Scene, {
+			doc,
+			onChange: setDoc,
+			interactive: true,
+			showGrid: true,
+			showAxes: true,
+			height,
+			ariaLabel: title ?? "Geometry construction"
+		})]
+	});
+}
+
+//#endregion
+export { GeometryBoard, geoSceneToDoc };