@classytic/labs 0.1.0 → 0.3.0

package/dist/math/fraction-bar/preset.d.mts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+
+//#region src/math/fraction-bar/preset.d.ts
+interface FractionBarProps {
+  /** Number of equal parts the whole is cut into. Default 4. */
+  denom?: number;
+  /** Starting shaded parts. Default 0. */
+  num?: number;
+  /** Goal numerator; solved when that many parts are shaded. Omit to explore. */
+  target?: number;
+  /** If set, also show the fraction OF this quantity (k/n × whole). */
+  whole?: number;
+  unit?: string;
+  /** Second strip cut into this many parts, to show the equivalent fraction. */
+  compareDenom?: number;
+  /** Show the decimal + percent equivalents. Default true. */
+  showEquiv?: boolean;
+  /** Optional concrete twin (any level scene): the part-whole as a pie / jar / etc. */
+  scene?: string;
+  height?: number;
+  title?: string;
+  prompt?: string;
+  activity?: string;
+}
+declare function FractionBarLab(props?: FractionBarProps): ReactNode;
+//#endregion
+export { FractionBarLab, FractionBarProps };

package/dist/math/fraction-bar/preset.mjs

@@ -0,0 +1,231 @@
+'use client';
+
+import { gcd, round } from "../../core/util.mjs";
+import { StatusPill } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
+import { LinkedViews } from "../../kit/frame.mjs";
+import { useCheckpoint } from "../../kit/pedagogy.mjs";
+import { getScene } from "../../kit/scenes.mjs";
+import { BarStrip } from "../../kit/bar-strip.mjs";
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MovableDot, Segment, Stage } from "@classytic/stage";
+
+//#region src/math/fraction-bar/preset.tsx
+/**
+* FractionBarLab, the authorable PART-WHOLE / fraction manipulative: a strip is
+* split into `denom` equal parts and the learner drags to shade `num` of them.
+* The same shaded amount reads as a fraction, a decimal, a percent, and (when a
+* `whole` is set) a concrete quantity, so k/n, 0.75, 75% and "15 of 20" are
+* visibly ONE thing. An optional second strip at a different denominator makes
+* EQUIVALENT fractions (¾ = 6⁄8) something you see by re-cutting the same length.
+*
+* One engine, many uses, all data: set denom, a target to shade, a whole+unit
+* for "fraction of a quantity", or a compare denominator for equivalence. Built
+* on the juiced <MovableDot> (snaps to the cell boundaries, live readout).
+*/
+function FractionBarLab(props = {}) {
+	const { denom = 4, target, whole, unit = "", compareDenom, showEquiv = true, scene, height = 240, title = "Fractions", prompt = target != null ? `Shade ${target}/${denom} of the strip.` : "Drag to shade the strip.", activity = "fraction-bar" } = props;
+	const n = Math.max(1, Math.round(denom));
+	const clampN = (k) => Math.max(0, Math.min(n, Math.round(k)));
+	const [num, setNum] = useState(clampN(props.num ?? 0));
+	useEffect(() => {
+		setNum(clampN(props.num ?? 0));
+	}, [props.num, n]);
+	const solved = target != null && num === target;
+	const frac = num / n;
+	const g = gcd(num, n);
+	const simp = num > 0 && g > 1 ? `${num / g}/${n / g}` : null;
+	const fillColor = solved ? "var(--stage-good)" : "var(--stage-accent)";
+	useCheckpoint({
+		solved,
+		activity,
+		response: `${num}/${n}`
+	});
+	const hasCompare = compareDenom != null && compareDenom > 0;
+	const cmpShaded = hasCompare ? Math.round(frac * compareDenom) : 0;
+	const cmpExact = hasCompare ? Math.abs(frac * compareDenom - cmpShaded) < 1e-9 : false;
+	const Y_MAIN = hasCompare ? .75 : 0;
+	const Y_CMP = -.95;
+	const yMin = hasCompare ? -2.1 : -1.5;
+	const yMax = hasCompare ? 1.9 : 1.2;
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view: {
+			xMin: -.55,
+			xMax: n + .55,
+			yMin,
+			yMax
+		},
+		height,
+		preserveAspect: false,
+		pad: 14,
+		ariaLabel: `Fraction strip showing ${num} of ${n} parts shaded`,
+		children: [
+			/* @__PURE__ */ jsx(BarStrip, {
+				span: n,
+				cells: n,
+				shaded: num,
+				y: Y_MAIN,
+				color: fillColor
+			}),
+			target != null && !solved && /* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: target,
+					y: Y_MAIN - .85
+				},
+				to: {
+					x: target,
+					y: Y_MAIN + .85
+				},
+				color: "var(--stage-good)",
+				weight: 1.75,
+				opacity: .6,
+				dashed: true
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: num,
+					y: Y_MAIN
+				},
+				onMove: (p) => setNum(clampN(p.x)),
+				constrain: "horizontal",
+				range: {
+					min: 0,
+					max: n
+				},
+				snap: 1,
+				step: 1,
+				readout: () => `${num}/${n}`,
+				color: fillColor,
+				r: 9,
+				ariaLabel: "fraction boundary"
+			}),
+			hasCompare && /* @__PURE__ */ jsx(BarStrip, {
+				span: n,
+				cells: compareDenom,
+				shaded: cmpShaded,
+				y: Y_CMP,
+				color: "var(--stage-accent)",
+				weight: 26
+			})
+		]
+	});
+	const controls = /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "lab-numeric-primary",
+				children: [
+					num,
+					"/",
+					n
+				]
+			}),
+			hasCompare && cmpShaded > 0 && /* @__PURE__ */ jsxs("span", {
+				className: "lab-numeric-secondary",
+				children: [
+					"= ",
+					cmpShaded,
+					"/",
+					compareDenom,
+					cmpExact ? "" : " (≈)"
+				]
+			}),
+			simp && /* @__PURE__ */ jsxs("span", {
+				className: "lab-numeric-tertiary",
+				children: ["= ", simp]
+			}),
+			showEquiv && /* @__PURE__ */ jsxs("span", {
+				className: "lab-numeric-tertiary",
+				children: [
+					"= ",
+					round(frac),
+					" = ",
+					round(frac * 100),
+					"%"
+				]
+			}),
+			whole != null && /* @__PURE__ */ jsxs("span", {
+				className: "lab-numeric-secondary",
+				children: [
+					"= ",
+					round(frac * whole),
+					unit ? ` ${unit}` : "",
+					" of ",
+					whole
+				]
+			}),
+			target != null && /* @__PURE__ */ jsx(StatusPill, {
+				ok: solved,
+				children: solved ? `✓ ${target}/${n}` : `shade ${target}/${n}`
+			})
+		]
+	});
+	const twin = scene && scene !== "none" ? getScene(scene)?.render({
+		frac,
+		guessTone: solved ? "ok" : "idle",
+		color: fillColor,
+		label: `${num}/${n}`,
+		width: 132,
+		height: 170
+	}) : null;
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-fraction-bar-activity",
+		focusLayout: "compact",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Part–whole model",
+				title,
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [
+				/* @__PURE__ */ jsxs("strong", { children: [
+					num,
+					"/",
+					n
+				] }),
+				/* @__PURE__ */ jsxs("span", { children: [round(frac * 100), "%"] }),
+				whole != null ? /* @__PURE__ */ jsxs("span", { children: [
+					round(frac * whole),
+					" ",
+					unit
+				] }) : null
+			] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Interactive fraction model",
+				children: /* @__PURE__ */ jsx(LinkedViews, {
+					primary: figure,
+					representations: twin ? /* @__PURE__ */ jsx("div", {
+						className: "lab-rep",
+						children: twin
+					}) : void 0
+				})
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Equivalent representations",
+				children: controls
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: "The same shaded length remains unchanged when it is renamed as a simplified fraction, decimal, percentage, or equivalent partition." })] }),
+			/* @__PURE__ */ jsxs(Activity.LiveRegion, { children: [
+				num,
+				" of ",
+				n,
+				" equal parts shaded; ",
+				round(frac * 100),
+				" percent.",
+				solved ? " Target reached." : ""
+			] }),
+			/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: solved ? "Target reached" : "Move the boundary" }), /* @__PURE__ */ jsxs("span", { children: [
+					num,
+					"/",
+					n,
+					" shaded"
+				] })]
+			}) })
+		]
+	});
+}
+
+//#endregion
+export { FractionBarLab };

package/dist/math/function-machine/preset.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { CheckButton, Chip, LabStyles, StatusPill } from "../../kit/controls.mjs";
-import { ControlBar, LabFrame, LiveRegion } from "../../kit/frame.mjs";
+import { CheckButton, Chip, StatusPill } from "../../kit/controls.mjs";
+import { Activity } from "../../kit/activity.mjs";
 import { useCheckpoint } from "../../kit/pedagogy.mjs";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -9,7 +9,7 @@ import { Label, Polygon, Segment, Stage } from "@classytic/stage";
 
 //#region src/math/function-machine/preset.tsx
 /**
-* Function machine — a "predict the rule" interactive (Brilliant-style), built
+* Function machine, a "predict the rule" interactive (Brilliant-style), built
 * on @classytic/stage: inputs → outputs with index-matched connectors, a rule
 * chip, multiple-choice rules, and a Check that reports to the learner seam. A
 * GENERAL tool: a creator passes any inputs/outputs/choices/answer.
@@ -48,7 +48,7 @@ function FunctionMachineLab({ prompt = "Which rule produces these outputs?", inp
 	const check = () => {
 		setResult(sel === answer ? "correct" : "wrong");
 	};
-	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(LabStyles, {}), /* @__PURE__ */ jsxs(Stage, {
+	const figure = /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsxs(Stage, {
 		view: {
 			xMin: -7,
 			xMax: 7,
@@ -135,16 +135,12 @@ function FunctionMachineLab({ prompt = "Which rule produces these outputs?", inp
 				})
 			] }, i))
 		]
-	})] });
-	return /* @__PURE__ */ jsx(LabFrame, {
-		prompt,
-		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
+	}) });
+	const controls = /* @__PURE__ */ jsxs("div", {
+		className: "lab-activity-fields",
+		children: [
 			/* @__PURE__ */ jsx("div", {
-				style: {
-					display: "grid",
-					gridTemplateColumns: "1fr 1fr",
-					gap: 8
-				},
+				className: "lab-choice-grid",
 				children: choices.map((ch) => /* @__PURE__ */ jsx(Chip, {
 					selected: sel === ch,
 					onClick: () => {
@@ -165,11 +161,34 @@ function FunctionMachineLab({ prompt = "Which rule produces these outputs?", inp
 			}),
 			result === "wrong" && /* @__PURE__ */ jsx(StatusPill, {
 				ok: false,
-				children: "Not quite — try another rule"
+				children: "Not quite, try another rule"
 			})
-		] }),
-		footer: /* @__PURE__ */ jsx(LiveRegion, { children: result === "correct" ? "Correct." : result === "wrong" ? "Incorrect, try again." : "" }),
-		children: figure
+		]
+	});
+	return /* @__PURE__ */ jsxs(Activity.Root, {
+		className: "math-function-machine-activity",
+		focusLayout: "compact",
+		children: [
+			/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+				eyebrow: "Functions",
+				title: "Discover the rule",
+				description: prompt
+			}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+			/* @__PURE__ */ jsxs(Activity.Status, { children: [/* @__PURE__ */ jsx("strong", { children: result === "correct" ? "Rule found" : result === "wrong" ? "Try another rule" : "Compare the pairs" }), /* @__PURE__ */ jsxs("span", { children: [n, " input–output pairs"] })] }),
+			/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+				label: "Function machine mapping",
+				children: figure
+			}), /* @__PURE__ */ jsx(Activity.Inspector, {
+				label: "Rule choices",
+				children: controls
+			})] }),
+			/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("div", { children: "A valid function rule must transform every shown input into its paired output." })] }),
+			/* @__PURE__ */ jsx(Activity.LiveRegion, { children: result === "correct" ? "Correct." : result === "wrong" ? "Incorrect, try again." : "Choose a rule, then check it." }),
+			/* @__PURE__ */ jsx(Activity.Transport, { children: /* @__PURE__ */ jsxs("div", {
+				className: "lab-transport-state",
+				children: [/* @__PURE__ */ jsx("strong", { children: result === "correct" ? "Rule confirmed" : "Test one rule" }), /* @__PURE__ */ jsx("span", { children: sel ?? "No rule selected" })]
+			}) })
+		]
 	});
 }
 

package/dist/math/fundamental-theorem/index.d.mts

@@ -0,0 +1,2 @@
+import { FundamentalTheoremExplorer, FundamentalTheoremExplorerProps } from "./preset.mjs";
+export { FundamentalTheoremExplorer, type FundamentalTheoremExplorerProps };

package/dist/math/fundamental-theorem/index.mjs

@@ -0,0 +1,3 @@
+import { FundamentalTheoremExplorer } from "./preset.mjs";
+
+export { FundamentalTheoremExplorer };

package/dist/math/fundamental-theorem/preset.d.mts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+
+//#region src/math/fundamental-theorem/preset.d.ts
+interface FundamentalTheoremExplorerProps {
+  equation?: string;
+  xRange?: [number, number];
+  anchor?: number;
+  startX?: number;
+  title?: string;
+  height?: number;
+}
+declare function FundamentalTheoremExplorer({
+  equation,
+  xRange,
+  anchor: anchorInit,
+  startX,
+  title,
+  height
+}?: FundamentalTheoremExplorerProps): ReactNode;
+//#endregion
+export { FundamentalTheoremExplorer, FundamentalTheoremExplorerProps };

package/dist/math/fundamental-theorem/preset.mjs

@@ -0,0 +1,206 @@
+'use client';
+
+import { clamp } from "../../core/util.mjs";
+import { Tex as Tex$1 } from "../../core/tex.mjs";
+import { accumulationAt, derivativeAt, functionViewport, normalizeRange, riemannSlices, valueInRange } from "../calculus/core.mjs";
+import { MathActivity, MathExpressionError, MathResetTransport } from "../activity.mjs";
+import { useEffect, useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Grid, MovableDot, Plot, Polygon, Segment, Stage, compileExpr, evaluate, toLatex } from "@classytic/stage";
+
+//#region src/math/fundamental-theorem/preset.tsx
+const fmt$1 = (value) => Number.isFinite(value) ? value.toFixed(3) : "—";
+function FundamentalTheoremExplorer({ equation = "0.5*x^2 - 1", xRange = [-3, 4], anchor: anchorInit = -1, startX = 2, title = "Area becomes a new function", height = 250 } = {}) {
+	const [xMin, xMax] = normalizeRange(xRange, [-3, 4]);
+	const anchor = valueInRange(anchorInit, [xMin, xMax], -1);
+	const initialX = valueInRange(startX, [xMin, xMax], 2);
+	const [x, setX] = useState(initialX);
+	useEffect(() => setX(initialX), [initialX]);
+	const model = useMemo(() => {
+		const result = compileExpr(equation);
+		if (!result.ast) return {
+			ok: false,
+			error: result.error ?? "Invalid expression"
+		};
+		const ast = result.ast;
+		const fn = (at) => evaluate(ast, { x: at });
+		const accumulation = (at) => accumulationAt(fn, anchor, at);
+		return {
+			ok: true,
+			fn,
+			accumulation,
+			latex: toLatex(ast)
+		};
+	}, [anchor, equation]);
+	if (!model.ok) return /* @__PURE__ */ jsx(MathExpressionError, {
+		title,
+		expression: equation,
+		error: model.error
+	});
+	const { fn, accumulation, latex } = model;
+	const functionView = functionViewport(fn, [xMin, xMax]);
+	const accumulationView = functionViewport(accumulation, [xMin, xMax]);
+	const area = accumulation(x);
+	const functionValue = fn(x);
+	const accumulationSlope = derivativeAt(accumulation, x);
+	const agreement = Math.abs(accumulationSlope - functionValue);
+	const slices = riemannSlices(fn, anchor, x, 48, "mid");
+	const figure = /* @__PURE__ */ jsxs("div", {
+		className: "math-ftc-stack",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "math-ftc-plot",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "math-ftc-label",
+				children: "Original function f"
+			}), /* @__PURE__ */ jsxs(Stage, {
+				view: {
+					xMin,
+					xMax,
+					...functionView
+				},
+				height,
+				preserveAspect: false,
+				ariaLabel: `Original function ${equation} and accumulated area from ${anchor.toFixed(2)} to ${x.toFixed(2)}`,
+				children: [
+					/* @__PURE__ */ jsx(Grid, {}),
+					slices.map((slice, index) => /* @__PURE__ */ jsx(Polygon, {
+						points: [
+							{
+								x: slice.x0,
+								y: 0
+							},
+							{
+								x: slice.x1,
+								y: 0
+							},
+							{
+								x: slice.x1,
+								y: slice.height
+							},
+							{
+								x: slice.x0,
+								y: slice.height
+							}
+						],
+						color: slice.height >= 0 ? "var(--stage-accent)" : "var(--stage-danger)",
+						fill: slice.height >= 0 ? "var(--stage-accent)" : "var(--stage-danger)",
+						fillOpacity: .18,
+						weight: .5
+					}, index)),
+					/* @__PURE__ */ jsx(Axes, { labels: true }),
+					/* @__PURE__ */ jsx(Plot.OfX, {
+						y: fn,
+						domain: [xMin, xMax],
+						color: "var(--stage-accent)",
+						weight: 2.75
+					}),
+					/* @__PURE__ */ jsx(Segment, {
+						from: {
+							x: anchor,
+							y: functionView.yMin
+						},
+						to: {
+							x: anchor,
+							y: functionView.yMax
+						},
+						color: "var(--stage-muted)",
+						weight: 1,
+						dashed: true
+					}),
+					/* @__PURE__ */ jsx(MovableDot, {
+						value: {
+							x,
+							y: 0
+						},
+						onMove: (point) => setX(clamp(point.x, xMin, xMax)),
+						constrain: "horizontal",
+						color: "var(--stage-fg)",
+						ariaLabel: "moving upper integration bound"
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "math-ftc-plot",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "math-ftc-label",
+				children: "Accumulation A(x)"
+			}), /* @__PURE__ */ jsxs(Stage, {
+				view: {
+					xMin,
+					xMax,
+					...accumulationView
+				},
+				height,
+				preserveAspect: false,
+				ariaLabel: "Accumulation function whose slope matches the original function",
+				children: [
+					/* @__PURE__ */ jsx(Grid, {}),
+					/* @__PURE__ */ jsx(Axes, { labels: true }),
+					/* @__PURE__ */ jsx(Plot.OfX, {
+						y: accumulation,
+						domain: [xMin, xMax],
+						color: "var(--stage-good)",
+						weight: 2.75
+					}),
+					/* @__PURE__ */ jsx(MovableDot, {
+						value: {
+							x,
+							y: area
+						},
+						onMove: (point) => setX(clamp(point.x, xMin, xMax)),
+						color: "var(--stage-good)",
+						ariaLabel: "point on the accumulation function"
+					})
+				]
+			})]
+		})]
+	});
+	const reset = () => setX(initialX);
+	const details = /* @__PURE__ */ jsxs("div", {
+		className: "math-equation-detail",
+		children: [/* @__PURE__ */ jsx(Tex$1, { tex: `A(x)=\\int_{${anchor.toFixed(2)}}^x \\left(${latex}\\right)\\,dt` }), /* @__PURE__ */ jsx(Tex$1, { tex: `A'(${x.toFixed(2)})\\approx ${fmt$1(accumulationSlope)} = f(${x.toFixed(2)})` })]
+	});
+	return /* @__PURE__ */ jsx(MathActivity, {
+		className: "math-fundamental-theorem",
+		eyebrow: "Calculus · Fundamental Theorem",
+		title,
+		description: "Drag the shared probe. The upper graph accumulates signed area; the lower graph records that area as A(x). Compare its slope with the height of f.",
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("strong", { children: agreement < .002 ? "The rates agree" : "Comparing rates" }),
+			/* @__PURE__ */ jsxs("span", { children: ["x ", x.toFixed(2)] }),
+			/* @__PURE__ */ jsxs("span", { children: ["A(x) ", fmt$1(area)] })
+		] }),
+		figure,
+		measurements: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "math-result-probe",
+			children: [
+				/* @__PURE__ */ jsx("span", { children: "Fundamental Theorem" }),
+				/* @__PURE__ */ jsx("strong", { children: "A′(x) = f(x)" }),
+				/* @__PURE__ */ jsxs("small", { children: [
+					"A′(x) ",
+					fmt$1(accumulationSlope),
+					" · f(x) ",
+					fmt$1(functionValue),
+					" · difference",
+					" ",
+					agreement.toExponential(1)
+				] })
+			]
+		}), /* @__PURE__ */ jsx("p", {
+			className: "math-explain",
+			children: "A thin extra strip has area approximately f(x)·Δx, so the accumulation changes at rate f(x)."
+		})] }),
+		conclusion: agreement < .002 ? "The accumulation graph’s instantaneous slope matches the original function height at the shared x-position." : "Move the probe away from a discontinuity to compare the two rates.",
+		transport: /* @__PURE__ */ jsx(MathResetTransport, {
+			onReset: reset,
+			state: "Move the shared upper bound",
+			detail: `area ${fmt$1(area)}`
+		}),
+		details,
+		graphLabel: "Linked function and accumulation graphs",
+		inspectorLabel: "Area-to-slope connection"
+	});
+}
+
+//#endregion
+export { FundamentalTheoremExplorer };

package/dist/math/geometry-foundations/activity.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/math/geometry-foundations/activity.mjs

@@ -0,0 +1,74 @@
+import { defineAuthoredActivity } from "../../kit/activity-authoring.mjs";
+
+//#region src/math/geometry-foundations/activity.ts
+const geometryFoundationsActivity = defineAuthoredActivity({
+	pattern: "investigation",
+	title: "Decompose a shape to expose its invariant",
+	objectives: [
+		"Explain the Pythagorean relationship as conservation of area",
+		"Relate angles subtended by the same circle arc",
+		"Derive polygon angle sums by triangulation"
+	],
+	success: [{
+		id: "decomposition",
+		source: "answer",
+		key: "decomposition",
+		pendingLabel: "Explain why decomposition preserves the result."
+	}],
+	steps: [
+		{
+			id: "predict",
+			phase: "predict",
+			title: "Predict the invariant",
+			lead: "Commit before changing the shape."
+		},
+		{
+			id: "manipulate",
+			phase: "act",
+			title: "Change the construction",
+			lead: "Move one geometric parameter while the construction stays linked.",
+			controls: true
+		},
+		{
+			id: "observe",
+			phase: "observe",
+			title: "Compare representations",
+			lead: "Read the diagram and its measured quantities together."
+		},
+		{
+			id: "explain",
+			phase: "explain",
+			title: "Explain the decomposition",
+			lead: "Name the equal areas, shared arc, or component triangles."
+		},
+		{
+			id: "transfer",
+			phase: "transfer",
+			title: "Test another shape",
+			lead: "Change mode and decide which invariant still applies."
+		}
+	],
+	questions: [{
+		id: "decomposition",
+		prompt: "Why can a geometric rearrangement prove a formula?",
+		choices: [
+			{
+				value: "preserves",
+				label: "It preserves lengths and areas while exposing a new partition"
+			},
+			{
+				value: "appearance",
+				label: "A visually convincing picture is always a proof"
+			},
+			{
+				value: "measure",
+				label: "Measurement alone proves every possible case"
+			}
+		],
+		answer: "preserves",
+		explain: "A valid dissection accounts for every piece without overlap or gaps, so the total area is invariant."
+	}]
+});
+
+//#endregion
+export { geometryFoundationsActivity };

package/dist/math/geometry-foundations/core.d.mts

@@ -0,0 +1,22 @@
+//#region src/math/geometry-foundations/core.d.ts
+declare const GEOMETRY_FOUNDATION_MODES: readonly ["pythagorean", "circle-theorem", "polygon-angles"];
+type GeometryFoundationMode = (typeof GEOMETRY_FOUNDATION_MODES)[number];
+interface GeometryFoundationInput {
+  mode: GeometryFoundationMode;
+  sideA: number;
+  sideB: number;
+  centralAngle: number;
+  sides: number;
+}
+interface GeometryFoundationState {
+  headline: string;
+  formula: string;
+  values: ReadonlyArray<{
+    label: string;
+    value: string;
+  }>;
+  explanation: string;
+}
+declare function geometryFoundationState(input: GeometryFoundationInput): GeometryFoundationState;
+//#endregion
+export { GEOMETRY_FOUNDATION_MODES, GeometryFoundationInput, GeometryFoundationMode, GeometryFoundationState, geometryFoundationState };