@classytic/labs 0.4.0 → 0.6.0

package/dist/domains/geometry/geometry-board/builder.mjs

@@ -0,0 +1,342 @@
+'use client';
+
+import { geoSceneToDoc } from "../../../geometry/board/construction.mjs";
+import { useMemo, useState } from "react";
+import { Axes, Dot, Grid, Stage, ToolIcon, isCircleVal, isLineVal, isVec2, renderElements, resolve } from "@classytic/stage";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+
+//#region src/domains/geometry/geometry-board/builder.tsx
+/**
+* GeometryBuilder, a visual, click-to-build editor for a `GeometryBoard` scene.
+*
+* Pick a tool, click the board: drop points, connect them into segments/lines,
+* draw circles (centre → through-point), mark the intersection of two
+* circles/lines, add midpoints and distance measures, drag points to move them,
+* or delete. It emits the SAME declarative `GeoElement[]` scene the board renders.
+*
+* Now on the @classytic/stage engine: the construction is converted to a SceneDoc
+* and rendered with stage's resolver + `renderElements` (SVG, accessible, real
+* draggable points), the canvas geometry math is gone. `GeometryBoard` is the
+* read-only render of this editor's output.
+*/
+const TOOLS = [
+	{
+		id: "select",
+		icon: "select",
+		label: "move",
+		hint: "drag a point to move it"
+	},
+	{
+		id: "point",
+		icon: "point",
+		label: "point",
+		hint: "click empty space to place a point"
+	},
+	{
+		id: "segment",
+		icon: "segment",
+		label: "segment",
+		hint: "click two points"
+	},
+	{
+		id: "line",
+		icon: "line",
+		label: "line",
+		hint: "click two points"
+	},
+	{
+		id: "circle",
+		icon: "circle",
+		label: "circle",
+		hint: "click centre, then a point on it"
+	},
+	{
+		id: "intersect",
+		icon: "intersect",
+		label: "intersect",
+		hint: "click two circles/lines"
+	},
+	{
+		id: "midpoint",
+		icon: "midpoint",
+		label: "midpoint",
+		hint: "click two points"
+	},
+	{
+		id: "measure",
+		icon: "measure",
+		label: "measure",
+		hint: "click two points"
+	},
+	{
+		id: "delete",
+		icon: "delete",
+		label: "delete",
+		hint: "click a point to remove it"
+	}
+];
+const VIEW = {
+	xMin: -8,
+	xMax: 8,
+	yMin: -5.5,
+	yMax: 5.5
+};
+const snap = (v) => Math.round(v * 2) / 2;
+const POINT_KINDS = new Set([
+	"point",
+	"intersect",
+	"midpoint"
+]);
+const nextPointId = (scene) => {
+	const used = new Set(scene.filter((e) => e.type === "point").map((e) => e.id));
+	for (const ch of "ABCDEFGHJKLMNOPQRSTUVWXYZ") if (!used.has(ch)) return ch;
+	return `P${scene.length}`;
+};
+const nextId = (scene, prefix) => {
+	let i = 1;
+	const ids = new Set(scene.map((e) => e.id).filter(Boolean));
+	while (ids.has(`${prefix}${i}`)) i++;
+	return `${prefix}${i}`;
+};
+function GeometryBuilder({ scene = [], onChange, title = "Build a construction", height = 380 } = {}) {
+	const [tool, setTool] = useState("point");
+	const [pending, setPending] = useState([]);
+	const set = (next) => onChange?.(next);
+	const doc = useMemo(() => geoSceneToDoc(scene, VIEW), [scene]);
+	const resolved = useMemo(() => resolve(doc), [doc]);
+	const points = useMemo(() => {
+		const m = new Map();
+		for (const el of scene) {
+			if (!POINT_KINDS.has(el.type)) continue;
+			const id = el.id;
+			const v = resolved.values.get(id);
+			if (isVec2(v)) m.set(id, v);
+		}
+		return m;
+	}, [scene, resolved]);
+	const pointAt = (mx, my) => {
+		let best = null, bestD = .5;
+		for (const [id, p] of points) {
+			const d = Math.hypot(mx - p.x, my - p.y);
+			if (d < bestD) {
+				bestD = d;
+				best = id;
+			}
+		}
+		return best;
+	};
+	const elementAt = (mx, my) => {
+		let best = null, bestD = .4;
+		for (const el of scene) {
+			const id = el.id;
+			if (!id) continue;
+			const v = resolved.values.get(id);
+			if (isCircleVal(v)) {
+				const d = Math.abs(Math.hypot(mx - v.center.x, my - v.center.y) - v.r);
+				if (d < bestD) {
+					bestD = d;
+					best = id;
+				}
+			} else if (isLineVal(v) && v.kind === "line") {
+				const dx = v.b.x - v.a.x, dy = v.b.y - v.a.y, L = Math.hypot(dx, dy) || 1;
+				const dist = Math.abs((dy * (mx - v.a.x) - dx * (my - v.a.y)) / L);
+				if (dist < bestD) {
+					bestD = dist;
+					best = id;
+				}
+			}
+		}
+		return best;
+	};
+	const onBuild = (p) => {
+		const [mx, my] = p;
+		if (tool === "select") return;
+		if (tool === "point") {
+			const id = nextPointId(scene);
+			set([...scene, {
+				type: "point",
+				id,
+				x: snap(mx),
+				y: snap(my),
+				draggable: true,
+				label: id
+			}]);
+			return;
+		}
+		if (tool === "delete") {
+			const eid = pointAt(mx, my) ?? elementAt(mx, my);
+			if (eid) set(scene.filter((el) => el.id !== eid));
+			return;
+		}
+		if (tool === "segment" || tool === "line" || tool === "midpoint" || tool === "measure") {
+			const pid = pointAt(mx, my);
+			if (!pid) return;
+			const next = [...pending, pid];
+			if (next.length < 2) {
+				setPending(next);
+				return;
+			}
+			const a = next[0], b = next[1];
+			if (tool === "segment") set([...scene, {
+				type: "segment",
+				from: a,
+				to: b,
+				color: "var(--stage-good)"
+			}]);
+			else if (tool === "line") set([...scene, {
+				type: "line",
+				id: nextId(scene, "l"),
+				through: [a, b],
+				color: "var(--stage-fg)"
+			}]);
+			else if (tool === "midpoint") {
+				const id = nextId(scene, "M");
+				set([...scene, {
+					type: "midpoint",
+					id,
+					of: [a, b],
+					label: id
+				}]);
+			} else set([...scene, {
+				type: "measure",
+				kind: "distance",
+				of: [a, b],
+				label: `|${a}${b}|`
+			}]);
+			setPending([]);
+			return;
+		}
+		if (tool === "circle") {
+			const pid = pointAt(mx, my);
+			if (!pid) return;
+			const next = [...pending, pid];
+			if (next.length < 2) {
+				setPending(next);
+				return;
+			}
+			set([...scene, {
+				type: "circle",
+				id: nextId(scene, "c"),
+				center: next[0],
+				through: next[1],
+				color: "var(--stage-accent)"
+			}]);
+			setPending([]);
+			return;
+		}
+		if (tool === "intersect") {
+			const eid = elementAt(mx, my);
+			if (!eid) return;
+			const next = [...pending, eid];
+			if (next.length < 2) {
+				setPending(next);
+				return;
+			}
+			const id1 = nextId(scene, "X");
+			const add = [{
+				type: "intersect",
+				id: id1,
+				of: [next[0], next[1]],
+				pick: 0,
+				label: id1,
+				color: "var(--stage-warn)"
+			}];
+			const a = scene.find((el) => el.id === next[0]);
+			const b = scene.find((el) => el.id === next[1]);
+			if (a?.type === "circle" && b?.type === "circle") {
+				const id2 = nextId([...scene, ...add], "X");
+				add.push({
+					type: "intersect",
+					id: id2,
+					of: [next[0], next[1]],
+					pick: 1,
+					label: id2,
+					color: "var(--stage-warn)"
+				});
+			}
+			set([...scene, ...add]);
+			setPending([]);
+		}
+	};
+	const onPointMove = (id, p, phase) => {
+		const x = phase === "commit" ? snap(p.x) : p.x;
+		const y = phase === "commit" ? snap(p.y) : p.y;
+		set(scene.map((el) => el.type === "point" && el.id === id ? {
+			...el,
+			x,
+			y
+		} : el));
+	};
+	const hint = TOOLS.find((t) => t.id === tool)?.hint ?? "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "not-prose geometry-builder",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "geometry-builder-toolbar",
+				role: "toolbar",
+				"aria-label": "Geometry construction tools",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "geometry-builder-title",
+						children: title
+					}),
+					TOOLS.map((t) => /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						onClick: () => {
+							setTool(t.id);
+							setPending([]);
+						},
+						size: "sm",
+						variant: tool === t.id ? "secondary" : "ghost",
+						className: "geometry-builder-tool",
+						"aria-pressed": tool === t.id,
+						"data-selected": tool === t.id || undefined,
+						children: [/* @__PURE__ */ jsx(ToolIcon, { name: t.icon }), t.label]
+					}, t.id)),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "sm",
+						variant: "outline",
+						onClick: () => set([]),
+						className: "geometry-builder-clear",
+						children: "Clear"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("p", {
+				className: "geometry-builder-hint",
+				"aria-live": "polite",
+				children: [hint, pending.length ? ` · ${pending.length} selected` : ""]
+			}),
+			/* @__PURE__ */ jsxs(Stage, {
+				view: VIEW,
+				height,
+				onPointerMath: onBuild,
+				ariaLabel: `Geometry construction editor, ${tool} tool`,
+				className: "geometry-builder-stage",
+				children: [
+					/* @__PURE__ */ jsx(Grid, {}),
+					/* @__PURE__ */ jsx(Axes, {}),
+					renderElements(doc, resolved, {
+						draggablePoints: tool === "select",
+						onPointMove
+					}),
+					pending.map((id) => {
+						const p = points.get(id);
+						return p ? /* @__PURE__ */ jsx(Dot, {
+							x: p.x,
+							y: p.y,
+							r: 8,
+							color: "var(--stage-warn)",
+							opacity: .6
+						}, `sel-${id}`) : null;
+					})
+				]
+			})
+		]
+	});
+}
+
+//#endregion
+export { GeometryBuilder };

package/dist/domains/geometry/geometry-board/manifest.mjs

@@ -1,13 +1,10 @@
 import { defineLab } from "../../../lab-def/define-lab.mjs";
+import { DEFAULT_SCENE } from "./scene.mjs";
 import { z } from "zod";
 
 //#region src/domains/geometry/geometry-board/manifest.ts
-/** A construction element, discriminated on `type` (mirrors GeoElement in
-*  src/geometry/board/preset.tsx). Built via the custom GeometryBuilder (loadAuthoring).*
-*  `hidden` exists because classical constructions need scaffolding: the circle on
-*  diameter OP that locates the tangent points, the ray that pins a point to a rim.
-*  It must resolve so the dependent points move, and it must not be drawn, or the
-*  learner reads the machinery as part of the theorem. */
+/** Hidden scaffolding stays in the construction DAG so dependent points resolve.
+* GeoElement and its Stage adapter live in geometry/board/construction.ts. */
 const idRef = z.string();
 const geoElementSchema = z.discriminatedUnion("type", [
 	z.object({
@@ -74,27 +71,33 @@ const geoElementSchema = z.discriminatedUnion("type", [
 		])]),
 		label: z.string().optional()
 	})
-]).refine((el) => el.type !== "measure" || (el.kind === "angle" ? el.of.length === 3 : el.of.length === 2), { message: "a distance measure needs two points, an angle measure needs three (vertex in the middle)" });
+]).refine((el) => el.type !== "measure" || (el.kind === "angle" ? el.of.length === 3 : el.of.length === 2), { message: "a distance measure needs two points, an angle measure needs three (vertex in the middle)" }).transform((el) => el);
 /** Geometry board — has a CUSTOM visual authoring editor (GeometryBuilder), so the manifest
 *  declares loadAuthoring; the schema-driven form can't express a click-to-build construction. */
 var manifest_default = defineLab({
 	id: "geometry-board",
+	kind: "tool",
 	domain: "geometry",
 	group: "Geometry",
 	title: "Geometry board",
 	description: "Build a construction, points, circles, lines & computed intersections. Drag points live.",
 	schema: z.object({
-		scene: z.array(geoElementSchema).optional(),
-		title: z.string().optional(),
-		prompt: z.string().optional().describe("what to do and what to watch"),
+		scene: z.array(geoElementSchema).default(DEFAULT_SCENE).describe("authored construction, including hidden dependent scaffolding"),
+		title: z.string().default("Geometry"),
+		prompt: z.string().default("Drag the points to explore the construction.").describe("what to do and what to watch"),
 		subtitle: z.string().optional(),
-		height: z.number().min(200).max(640).optional().describe("figure height in pixels"),
+		height: z.number().min(200).max(640).default(360).describe("figure height in pixels"),
 		view: z.object({
 			xMin: z.number(),
 			xMax: z.number(),
 			yMin: z.number(),
 			yMax: z.number()
-		}).optional().describe("visible window; defaults to x -1..11, y -5..5")
+		}).refine((v) => v.xMax > v.xMin && v.yMax > v.yMin, "view maximums must exceed minimums on both axes").default({
+			xMin: -1,
+			xMax: 11,
+			yMin: -5,
+			yMax: 5
+		}).describe("visible window; defaults to x -1..11, y -5..5")
 	}),
 	experience: {
 		objectives: [
@@ -102,13 +105,7 @@ var manifest_default = defineLab({
 			"Drag free points while preserving construction relationships",
 			"Use measurements and invariants to justify a geometric claim"
 		],
-		phases: [
-			"predict",
-			"act",
-			"observe",
-			"explain",
-			"transfer"
-		],
+		phases: ["act", "observe"],
 		responses: ["reflection"],
 		accessibility: {
 			keyboard: true,
@@ -117,6 +114,7 @@ var manifest_default = defineLab({
 		}
 	},
 	taxonomy: {
+		qualityTier: "support",
 		grades: [
 			"9",
 			"10",

package/dist/domains/geometry/geometry-board/runtime.d.mts

@@ -0,0 +1,5 @@
+import { ReactNode } from "react";
+//#region src/domains/geometry/geometry-board/runtime.d.ts
+/** Authored construction tool: manipulation supplies evidence, never an invented score. */
+export default function GeometryBoardLab(attrs?: Record<string, unknown>): ReactNode;
+//#endregion

package/dist/domains/geometry/geometry-board/runtime.mjs

@@ -1,14 +1,42 @@
 'use client';
 
-import { GeometryBoard } from "../../../geometry/board/preset.mjs";
-import { asScene } from "./scene.mjs";
-import { jsx } from "react/jsx-runtime";
+import manifest_default from "./manifest.mjs";
+import { geoSceneToDoc } from "../../../geometry/board/construction.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { Scene } from "@classytic/stage";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/domains/geometry/geometry-board/runtime.tsx
-function GeometryBoardLab(a) {
-	return /* @__PURE__ */ jsx(GeometryBoard, {
-		scene: asScene(a.scene),
-		title: a.title ?? "Geometry"
+/** Authored construction tool: manipulation supplies evidence, never an invented score. */
+function GeometryBoardLab(attrs = {}) {
+	const parsed = useMemo(() => manifest_default.schema.safeParse(attrs), [attrs]);
+	const initial = useMemo(() => parsed.success ? geoSceneToDoc(parsed.data.scene, parsed.data.view) : null, [parsed]);
+	const [doc, setDoc] = useState(initial);
+	useEffect(() => {
+		setDoc(initial);
+	}, [initial]);
+	if (!parsed.success) return /* @__PURE__ */ jsxs("p", {
+		role: "alert",
+		children: ["Invalid geometry construction: ", parsed.error.issues.map((issue) => issue.message).join("; ")]
+	});
+	if (!doc) return null;
+	const { title, prompt, subtitle, height } = parsed.data;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "geometry-board-activity",
+		children: [
+			/* @__PURE__ */ jsx("h2", { children: title }),
+			subtitle ? /* @__PURE__ */ jsx("p", { children: subtitle }) : null,
+			prompt ? /* @__PURE__ */ jsx("p", { children: prompt }) : null,
+			/* @__PURE__ */ jsx(Scene, {
+				doc,
+				onChange: setDoc,
+				interactive: true,
+				showGrid: true,
+				showAxes: true,
+				height,
+				ariaLabel: title
+			})
+		]
 	});
 }
 

package/dist/domains/geometry/geometry-board/scene.mjs

@@ -56,7 +56,7 @@ const DEFAULT_SCENE = [
 		label: "|PQ|"
 	}
 ];
-const asScene = (raw) => Array.isArray(raw) && raw.length ? raw : DEFAULT_SCENE;
+const asScene = (raw) => Array.isArray(raw) ? raw : DEFAULT_SCENE;
 
 //#endregion
 export { DEFAULT_SCENE, asScene };

package/dist/domains/geometry/intersecting-circles/activity.mjs

@@ -0,0 +1,20 @@
+import { defineActivity } from "../../../runtime/activity.mjs";
+import { intersectingCirclesModel } from "./model.mjs";
+
+//#region src/domains/geometry/intersecting-circles/activity.ts
+const intersectingCirclesActivity = defineActivity(intersectingCirclesModel, () => ({
+	pattern: "investigation",
+	title: "Common chord of two circles",
+	objectives: ["Compare centre distance with the sum and difference of the radii", "Relate the common chord to a right triangle"],
+	steps: [{
+		id: "compare-crossings",
+		title: "Compare crossing and separated circles",
+		phase: "act",
+		lead: "Move the centres to find two crossings, then pull them apart until the circles no longer meet.",
+		controls: ["centreA", "centreB"],
+		goal: "compared"
+	}]
+}));
+
+//#endregion
+export { intersectingCirclesActivity };

package/dist/domains/geometry/intersecting-circles/manifest.mjs

@@ -1,5 +1,5 @@
 import { defineLab } from "../../../lab-def/define-lab.mjs";
-import { z } from "zod";
+import { intersectingCirclesModel } from "./model.mjs";
 
 //#region src/domains/geometry/intersecting-circles/manifest.ts
 var manifest_default = defineLab({
@@ -8,12 +8,38 @@ var manifest_default = defineLab({
 	group: "Geometry",
 	title: "Intersecting circles",
 	description: "Common chord of two circles, drag the centres, chord length by Pythagoras.",
-	schema: z.object({
-		prompt: z.string().optional(),
-		r1: z.number().optional(),
-		r2: z.number().optional(),
-		title: z.string().optional()
-	}),
+	model: intersectingCirclesModel,
+	examples: [
+		{
+			name: "default",
+			props: {}
+		},
+		{
+			name: "03 constructing a triangle from three sides",
+			props: {
+				r1: 3.5,
+				r2: 2.5,
+				title: "Half-size stall: arcs of 3.5 and 2.5",
+				prompt: "Drag B until AB reads 4, then past 6."
+			}
+		},
+		{
+			name: "04 constructing shapes from triangles",
+			props: {
+				r1: 4,
+				r2: 3,
+				title: "Sticks of 4 and 3 on a base AB",
+				prompt: "Drag B until AB reads 5, then 7, then 8."
+			}
+		},
+		{
+			name: "Equal radii",
+			props: {
+				r1: 3,
+				r2: 3
+			}
+		}
+	],
 	experience: {
 		objectives: [
 			"Predict whether two circles intersect from radii and centre distance",
@@ -35,6 +61,7 @@ var manifest_default = defineLab({
 		}
 	},
 	taxonomy: {
+		qualityTier: "support",
 		grades: [
 			"9",
 			"10",

package/dist/domains/geometry/intersecting-circles/model.mjs

@@ -0,0 +1,109 @@
+import { defineLabModel } from "../../../model/define.mjs";
+import { z } from "zod";
+import { commonChord } from "@classytic/stage/math/geometry";
+
+//#region src/domains/geometry/intersecting-circles/model.ts
+const initialA = {
+	x: 3,
+	y: 0
+};
+const initialB = {
+	x: 6.4,
+	y: 0
+};
+const bounds = {
+	min: {
+		x: -1,
+		y: -5
+	},
+	max: {
+		x: 11,
+		y: 5
+	}
+};
+function measurement(s, st) {
+	const result = commonChord({
+		center: st.A,
+		radius: s.r1
+	}, {
+		center: st.B,
+		radius: s.r2
+	});
+	if (!result.ok) throw new TypeError(result.message);
+	return result.value;
+}
+function move(s, st, id, point) {
+	const next = {
+		...st,
+		[id]: point
+	};
+	if (point.x === st[id].x && point.y === st[id].y) return st;
+	const reading = measurement(s, next);
+	return {
+		...next,
+		seenIntersection: st.seenIntersection || reading.relation === "intersecting",
+		seenSeparation: st.seenSeparation || reading.relation === "separate"
+	};
+}
+const intersectingCirclesModel = defineLabModel({
+	id: "intersecting-circles",
+	params: z.object({
+		r1: z.number().finite().min(1).max(5).default(3.2).describe("Radius of circle A, construction units"),
+		r2: z.number().finite().min(1).max(5).default(2.8).describe("Radius of circle B, construction units"),
+		height: z.number().finite().min(200).max(800).default(360).describe("Height of the geometry board in pixels")
+	}),
+	resolve: (p) => p,
+	initial: () => ({
+		A: initialA,
+		B: initialB,
+		seenIntersection: false,
+		seenSeparation: false
+	}),
+	controls: (c) => ({
+		centreA: c.point({
+			label: "Centre A",
+			step: {
+				x: .1,
+				y: .1
+			},
+			bounds: () => bounds,
+			get: (st) => st.A,
+			set: (st, point, s) => move(s, st, "A", point)
+		}),
+		centreB: c.point({
+			label: "Centre B",
+			step: {
+				x: .1,
+				y: .1
+			},
+			bounds: () => bounds,
+			get: (st) => st.B,
+			set: (st, point, s) => move(s, st, "B", point)
+		})
+	}),
+	read(s, st) {
+		const truth = measurement(s, st);
+		return {
+			...truth,
+			compared: st.seenIntersection && st.seenSeparation,
+			status: truth.relation === "intersecting" ? "Two crossing points" : truth.relation === "external-tangent" || truth.relation === "internal-tangent" ? "One touching point" : truth.relation === "coincident" ? "Identical circles: infinitely many shared points" : "No shared points"
+		};
+	},
+	goals: { compared: (r) => r.compared },
+	witness: () => ({
+		A: {
+			x: -1,
+			y: 0
+		},
+		B: {
+			x: 11,
+			y: 0
+		},
+		seenIntersection: true,
+		seenSeparation: true
+	}),
+	describe: (s, st, r) => `Common chord of two circles. A (${st.A.x.toFixed(1)}, ${st.A.y.toFixed(1)}), radius ${s.r1}; B (${st.B.x.toFixed(1)}, ${st.B.y.toFixed(1)}), radius ${s.r2}. d = ${r.distance.toFixed(2)}. ${r.status}. ${r.chordLength === null ? "No unique common chord." : `Chord |PQ| = ${r.chordLength.toFixed(2)}.`}`
+});
+
+//#endregion
+export { intersectingCirclesModel };

package/dist/domains/geometry/intersecting-circles/runtime.d.mts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+//#region src/domains/geometry/intersecting-circles/runtime.d.ts
+export interface IntersectingCirclesProps {
+  r1?: number;
+  r2?: number;
+  title?: string;
+  prompt?: string;
+  height?: number;
+}
+export default function IntersectingCircles(props: Readonly<Record<string, unknown>>): ReactNode;
+//#endregion