@classytic/labs 0.1.0

package/dist/blocks/math.mjs

@@ -0,0 +1,1536 @@
+import { Grapher } from "../math/grapher/preset.mjs";
+import { DerivativeExplorer } from "../math/derivative-explorer/preset.mjs";
+import { IntegralExplorer } from "../math/integral-explorer/preset.mjs";
+import { LimitExplorer } from "../math/limit-explorer/preset.mjs";
+import { LinearSystemLab } from "../math/linear-system/preset.mjs";
+import { NumberLineLab } from "../math/number-line/preset.mjs";
+import { AreaModelLab } from "../math/area-model/preset.mjs";
+import { GrowingPatternLab } from "../math/pattern/preset.mjs";
+import { MysteryBucketLab } from "../math/mystery-bucket/preset.mjs";
+import { BalanceAlgebraLab } from "../math/balance-algebra/preset.mjs";
+import { VertexParabolaLab } from "../math/parabola/preset.mjs";
+import { FunctionMachineLab } from "../math/function-machine/preset.mjs";
+import { TRIG_FNS, TrigExplorer } from "../math/trig-explorer.mjs";
+import { Derivation } from "../math/derivation.mjs";
+import { GradientDescent } from "../math/gradient-descent.mjs";
+import { InteractiveProblem } from "../math/interactive/preset.mjs";
+import { TriangleTrig } from "../math/triangle-trig/preset.mjs";
+import { ChipToggle, ConfigPanel, ConfigRow, NumField, SelectField, SmallButton, TextField } from "./authoring.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
+import { defineBlock } from "@classytic/cms-ui/contract";
+
+//#region src/blocks/math.tsx
+const resolveFns = (raw) => Array.isArray(raw) && raw.length ? raw : ["sin", "cos"];
+const TrigExplorerBlock = defineBlock({
+	key: "trig-explorer",
+	void: true,
+	label: "Trig explorer",
+	description: "Unit circle ↔ wave — drag the angle; sin & cos trace out. (tan/cot: use Graph)",
+	category: "interactive",
+	schema: z.object({
+		functions: z.array(z.enum(["sin", "cos"])).optional(),
+		startDeg: z.number().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const fns = resolveFns(attributes.functions);
+		const widget = /* @__PURE__ */ jsx(TrigExplorer, {
+			functions: fns,
+			startDeg: attributes.startDeg
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		const toggle = (fn) => {
+			const next = fns.includes(fn) ? fns.filter((f) => f !== fn) : [...fns, fn];
+			updateAttributes({ functions: next.length ? next : fns });
+		};
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(ConfigPanel, { children: /* @__PURE__ */ jsx(ConfigRow, {
+			label: "Functions",
+			children: TRIG_FNS.map((fn) => /* @__PURE__ */ jsx(ChipToggle, {
+				active: fns.includes(fn),
+				onClick: () => toggle(fn),
+				children: fn
+			}, fn))
+		}) }), widget] });
+	}
+});
+const equationSchema = z.union([z.string(), z.object({
+	expr: z.string(),
+	color: z.string().optional()
+})]);
+const paramSchema = z.object({
+	name: z.string(),
+	min: z.number(),
+	max: z.number(),
+	step: z.number().optional(),
+	value: z.number()
+});
+const asExprStrings = (raw) => {
+	if (typeof raw === "string") return [raw];
+	if (Array.isArray(raw)) return raw.map((e) => typeof e === "string" ? e : String(e?.expr ?? ""));
+	return ["sin(x)"];
+};
+const asParams = (raw) => Array.isArray(raw) ? raw : [];
+const GraphBlock = defineBlock({
+	key: "graph",
+	void: true,
+	label: "Graph (equation)",
+	description: "Plot equations you type — y = a·sin(b·x), x^2, … with learner sliders.",
+	category: "interactive",
+	schema: z.object({
+		equations: z.array(equationSchema).optional(),
+		params: z.array(paramSchema).optional(),
+		xRange: z.tuple([z.number(), z.number()]).optional(),
+		yScale: z.enum(["linear", "log"]).optional(),
+		title: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const equations = asExprStrings(attributes.equations);
+		const params = asParams(attributes.params);
+		const xRange = attributes.xRange ?? [-6.5, 6.5];
+		const yScale = attributes.yScale === "log" ? "log" : "linear";
+		const title = attributes.title ?? "Graph";
+		const widget = /* @__PURE__ */ jsx(Grapher, {
+			equations,
+			params,
+			xRange,
+			yScale,
+			title
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		const setEq = (i, v) => {
+			const next = [...equations];
+			next[i] = v;
+			updateAttributes({ equations: next });
+		};
+		const setParam = (i, patch) => {
+			updateAttributes({ params: params.map((p, j) => j === i ? {
+				...p,
+				...patch
+			} : p) });
+		};
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Title",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: title,
+					onChange: (v) => updateAttributes({ title: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-muted-foreground",
+						children: "Equations (use x and your slider names)"
+					}),
+					equations.map((eq, i) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "font-mono text-muted-foreground",
+								children: "y ="
+							}),
+							/* @__PURE__ */ jsx(TextField, {
+								value: eq,
+								mono: true,
+								placeholder: "a*sin(b*x) + c",
+								onChange: (v) => setEq(i, v),
+								className: "flex-1"
+							}),
+							equations.length > 1 && /* @__PURE__ */ jsx(SmallButton, {
+								tone: "danger",
+								onClick: () => updateAttributes({ equations: equations.filter((_, j) => j !== i) }),
+								children: "✕"
+							})
+						]
+					}, i)),
+					/* @__PURE__ */ jsx(SmallButton, {
+						onClick: () => updateAttributes({ equations: [...equations, ""] }),
+						children: "+ equation"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-muted-foreground",
+						children: "Sliders (learner-draggable)"
+					}),
+					params.map((p, i) => /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-1.5",
+						children: [
+							/* @__PURE__ */ jsx(TextField, {
+								value: p.name,
+								mono: true,
+								placeholder: "a",
+								onChange: (v) => setParam(i, { name: v }),
+								className: "w-14"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: "from"
+							}),
+							/* @__PURE__ */ jsx(NumField, {
+								value: p.min,
+								onChange: (v) => setParam(i, { min: v })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: "to"
+							}),
+							/* @__PURE__ */ jsx(NumField, {
+								value: p.max,
+								onChange: (v) => setParam(i, { max: v })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: "="
+							}),
+							/* @__PURE__ */ jsx(NumField, {
+								value: p.value,
+								onChange: (v) => setParam(i, { value: v })
+							}),
+							/* @__PURE__ */ jsx(SmallButton, {
+								tone: "danger",
+								onClick: () => updateAttributes({ params: params.filter((_, j) => j !== i) }),
+								children: "✕"
+							})
+						]
+					}, i)),
+					/* @__PURE__ */ jsx(SmallButton, {
+						onClick: () => updateAttributes({ params: [...params, {
+							name: nextParamName(params),
+							min: 0,
+							max: 3,
+							value: 1,
+							step: .1
+						}] }),
+						children: "+ slider"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "x window",
+				children: [
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[0],
+						onChange: (v) => updateAttributes({ xRange: [v, xRange[1]] })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "to"
+					}),
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[1],
+						onChange: (v) => updateAttributes({ xRange: [xRange[0], v] })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "y scale",
+				children: [/* @__PURE__ */ jsx(ChipToggle, {
+					active: yScale !== "log",
+					onClick: () => updateAttributes({ yScale: "linear" }),
+					children: "linear"
+				}), /* @__PURE__ */ jsx(ChipToggle, {
+					active: yScale === "log",
+					onClick: () => updateAttributes({ yScale: "log" }),
+					children: "log"
+				})]
+			})
+		] }), widget] });
+	}
+});
+const DerivativeExplorerBlock = defineBlock({
+	key: "derivative-explorer",
+	void: true,
+	label: "Derivative explorer",
+	description: "Drag a point; the secant becomes the exact tangent. Shows f′(x).",
+	category: "interactive",
+	schema: z.object({
+		equation: z.string().optional(),
+		xRange: z.tuple([z.number(), z.number()]).optional(),
+		startX: z.number().optional(),
+		title: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const equation = typeof attributes.equation === "string" && attributes.equation.trim() ? attributes.equation : "0.15*x^3 - x";
+		const xRange = attributes.xRange ?? [-4, 4];
+		const title = attributes.title ?? "The derivative is a slope";
+		const widget = /* @__PURE__ */ jsx(DerivativeExplorer, {
+			equation,
+			xRange,
+			startX: attributes.startX,
+			title
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Title",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: title,
+					onChange: (v) => updateAttributes({ title: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "f(x) =",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: equation,
+					mono: true,
+					placeholder: "0.15*x^3 - x",
+					onChange: (v) => updateAttributes({ equation: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "x window",
+				children: [
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[0],
+						onChange: (v) => updateAttributes({ xRange: [v, xRange[1]] })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "to"
+					}),
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[1],
+						onChange: (v) => updateAttributes({ xRange: [xRange[0], v] })
+					})
+				]
+			})
+		] }), widget] });
+	}
+});
+const GradientDescentBlock = defineBlock({
+	key: "gradient-descent",
+	void: true,
+	label: "Gradient descent",
+	description: "Walk downhill on a loss surface f(x,y) using exact ∂f/∂x, ∂f/∂y — the calculus behind ML.",
+	category: "interactive",
+	schema: z.object({
+		equation: z.string().optional(),
+		range: z.tuple([z.number(), z.number()]).optional(),
+		learningRate: z.number().optional(),
+		title: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const equation = typeof attributes.equation === "string" && attributes.equation.trim() ? attributes.equation : "x^2 + 2*y^2";
+		const range = attributes.range ?? [-3, 3];
+		const title = attributes.title ?? "Gradient descent";
+		const widget = /* @__PURE__ */ jsx(GradientDescent, {
+			equation,
+			range,
+			learningRate: attributes.learningRate,
+			title
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Title",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: title,
+					onChange: (v) => updateAttributes({ title: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "f(x,y) =",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: equation,
+					mono: true,
+					placeholder: "x^2 + 2*y^2",
+					onChange: (v) => updateAttributes({ equation: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "region",
+				children: [
+					/* @__PURE__ */ jsx(NumField, {
+						value: range[0],
+						onChange: (v) => updateAttributes({ range: [v, range[1]] })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "to"
+					}),
+					/* @__PURE__ */ jsx(NumField, {
+						value: range[1],
+						onChange: (v) => updateAttributes({ range: [range[0], v] })
+					})
+				]
+			})
+		] }), widget] });
+	}
+});
+const IntegralExplorerBlock = defineBlock({
+	key: "integral-explorer",
+	void: true,
+	label: "Integral explorer",
+	description: "Area under a curve via Riemann rectangles — drag endpoints, add n, converge.",
+	category: "interactive",
+	schema: z.object({
+		equation: z.string().optional(),
+		xRange: z.tuple([z.number(), z.number()]).optional(),
+		a: z.number().optional(),
+		b: z.number().optional(),
+		n: z.number().optional(),
+		title: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const equation = typeof attributes.equation === "string" && attributes.equation.trim() ? attributes.equation : "0.4*x^2 + 0.5";
+		const xRange = attributes.xRange ?? [-1, 4];
+		const title = attributes.title ?? "The integral is an area";
+		const widget = /* @__PURE__ */ jsx(IntegralExplorer, {
+			equation,
+			xRange,
+			a: attributes.a,
+			b: attributes.b,
+			n: attributes.n,
+			title
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Title",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: title,
+					onChange: (v) => updateAttributes({ title: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "f(x) =",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: equation,
+					mono: true,
+					placeholder: "0.4*x^2 + 0.5",
+					onChange: (v) => updateAttributes({ equation: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "x window",
+				children: [
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[0],
+						onChange: (v) => updateAttributes({ xRange: [v, xRange[1]] })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "to"
+					}),
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[1],
+						onChange: (v) => updateAttributes({ xRange: [xRange[0], v] })
+					})
+				]
+			})
+		] }), widget] });
+	}
+});
+const LimitExplorerBlock = defineBlock({
+	key: "limit-explorer",
+	void: true,
+	label: "Limit explorer",
+	description: "Approach x → c from both sides; see the limit even where f(c) is a hole.",
+	category: "interactive",
+	schema: z.object({
+		equation: z.string().optional(),
+		xRange: z.tuple([z.number(), z.number()]).optional(),
+		c: z.number().optional(),
+		title: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const equation = typeof attributes.equation === "string" && attributes.equation.trim() ? attributes.equation : "(x^2 - 1)/(x - 1)";
+		const xRange = attributes.xRange ?? [-1, 3];
+		const title = attributes.title ?? "Approaching a limit";
+		const widget = /* @__PURE__ */ jsx(LimitExplorer, {
+			equation,
+			xRange,
+			c: attributes.c,
+			title
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Title",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: title,
+					onChange: (v) => updateAttributes({ title: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "f(x) =",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: equation,
+					mono: true,
+					placeholder: "(x^2 - 1)/(x - 1)",
+					onChange: (v) => updateAttributes({ equation: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "x window",
+				children: [
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[0],
+						onChange: (v) => updateAttributes({ xRange: [v, xRange[1]] })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "to"
+					}),
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[1],
+						onChange: (v) => updateAttributes({ xRange: [xRange[0], v] })
+					})
+				]
+			})
+		] }), widget] });
+	}
+});
+const derivationStepSchema = z.union([z.string(), z.object({
+	tex: z.string(),
+	note: z.string().optional()
+})]);
+const asSteps = (raw) => {
+	if (!Array.isArray(raw)) return [{ tex: "a^2 + b^2 = c^2" }];
+	const out = raw.map((s) => typeof s === "string" ? { tex: s } : s).filter((s) => !!s && typeof s.tex === "string");
+	return out.length ? out : [{ tex: "a^2 + b^2 = c^2" }];
+};
+const DerivationBlock = defineBlock({
+	key: "derivation",
+	void: true,
+	label: "Derivation (steps)",
+	description: "A step-by-step equation derivation in LaTeX, revealed one line at a time.",
+	category: "interactive",
+	schema: z.object({
+		steps: z.array(derivationStepSchema).optional(),
+		title: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const steps = asSteps(attributes.steps);
+		const title = attributes.title ?? "Derivation";
+		const widget = /* @__PURE__ */ jsx(Derivation, {
+			steps,
+			title
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		const setStep = (i, patch) => updateAttributes({ steps: steps.map((s, j) => j === i ? {
+			...s,
+			...patch
+		} : s) });
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [/* @__PURE__ */ jsx(ConfigRow, {
+			label: "Title",
+			children: /* @__PURE__ */ jsx(TextField, {
+				value: title,
+				onChange: (v) => updateAttributes({ title: v }),
+				className: "flex-1"
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1.5",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "font-medium text-muted-foreground",
+					children: "Steps (LaTeX + optional note)"
+				}),
+				steps.map((s, i) => /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-1.5",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono text-muted-foreground",
+							children: i + 1
+						}),
+						/* @__PURE__ */ jsx(TextField, {
+							value: s.tex,
+							mono: true,
+							placeholder: "\\\\frac{y-y_P}{x-x_P} = ...",
+							onChange: (v) => setStep(i, { tex: v }),
+							className: "min-w-[12rem] flex-1"
+						}),
+						/* @__PURE__ */ jsx(TextField, {
+							value: s.note ?? "",
+							placeholder: "why…",
+							onChange: (v) => setStep(i, { note: v }),
+							className: "w-32"
+						}),
+						steps.length > 1 && /* @__PURE__ */ jsx(SmallButton, {
+							tone: "danger",
+							onClick: () => updateAttributes({ steps: steps.filter((_, j) => j !== i) }),
+							children: "✕"
+						})
+					]
+				}, i)),
+				/* @__PURE__ */ jsx(SmallButton, {
+					onClick: () => updateAttributes({ steps: [...steps, { tex: "" }] }),
+					children: "+ step"
+				})
+			]
+		})] }), widget] });
+	}
+});
+function nextParamName(params) {
+	const used = new Set(params.map((p) => p.name));
+	for (const n of [
+		"a",
+		"b",
+		"c",
+		"d",
+		"k",
+		"m",
+		"n",
+		"p",
+		"q"
+	]) if (!used.has(n)) return n;
+	return `p${params.length + 1}`;
+}
+/** System-of-equations render: two clue lines (slope-intercept) from scalar
+*  props, so the editor form + MDX stay simple number fields. */
+function LinearSystemView({ m1 = 1, b1 = 1, m2 = -1, b2 = 5 }) {
+	return /* @__PURE__ */ jsx(LinearSystemLab, { lines: [{
+		m: m1,
+		b: b1,
+		label: "clue A"
+	}, {
+		m: m2,
+		b: b2,
+		label: "clue B"
+	}] });
+}
+const LinearSystemBlock = defineBlock({
+	key: "linear-system",
+	tag: "LinearSystem",
+	void: true,
+	label: "System of equations (x & y)",
+	description: "Two clue lines on a grid — drag to the crossing point that obeys both. The advanced \"find x and y\" lab.",
+	category: "interactive",
+	schema: z.object({
+		m1: z.number().default(1),
+		b1: z.number().default(1),
+		m2: z.number().default(-1),
+		b2: z.number().default(5)
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const { m1 = 1, b1 = 1, m2 = -1, b2 = 5 } = attributes;
+		const widget = /* @__PURE__ */ jsx(LinearSystemView, {
+			m1,
+			b1,
+			m2,
+			b2
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [/* @__PURE__ */ jsxs(ConfigRow, {
+			label: "clue A: y =",
+			children: [
+				/* @__PURE__ */ jsx(NumField, {
+					value: m1,
+					onChange: (v) => updateAttributes({ m1: v })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "x +"
+				}),
+				/* @__PURE__ */ jsx(NumField, {
+					value: b1,
+					onChange: (v) => updateAttributes({ b1: v })
+				})
+			]
+		}), /* @__PURE__ */ jsxs(ConfigRow, {
+			label: "clue B: y =",
+			children: [
+				/* @__PURE__ */ jsx(NumField, {
+					value: m2,
+					onChange: (v) => updateAttributes({ m2: v })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "x +"
+				}),
+				/* @__PURE__ */ jsx(NumField, {
+					value: b2,
+					onChange: (v) => updateAttributes({ b2: v })
+				})
+			]
+		})] }), widget] });
+	}
+});
+const NumberLineBlock = defineBlock({
+	key: "number-line",
+	tag: "NumberLine",
+	void: true,
+	label: "Number line",
+	description: "A draggable marker on a number line (incl. below zero) — optionally pose a target to land on.",
+	category: "interactive",
+	schema: z.object({
+		min: z.number().default(-8),
+		max: z.number().default(8),
+		start: z.number().default(0),
+		target: z.number().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const { min = -8, max = 8, start = 0, target } = attributes;
+		const widget = /* @__PURE__ */ jsx(NumberLineLab, {
+			min,
+			max,
+			start,
+			target
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "from",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: min,
+					onChange: (v) => updateAttributes({ min: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "to",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: max,
+					onChange: (v) => updateAttributes({ max: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "start",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: start,
+					onChange: (v) => updateAttributes({ start: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "target",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: target ?? 0,
+					onChange: (v) => updateAttributes({ target: v })
+				})
+			})
+		] }), widget] });
+	}
+});
+const MysteryBucketBlock = defineBlock({
+	key: "mystery-bucket",
+	tag: "MysteryBucket",
+	void: true,
+	label: "Mystery bucket (weigh the unknown)",
+	description: "Essentials opener — add unit weights until a balance is level to discover the hidden weight. No symbols.",
+	category: "interactive",
+	schema: z.object({
+		bucketWeight: z.number().default(5),
+		bucketCount: z.number().default(1),
+		maxWeights: z.number().default(12),
+		start: z.number().default(0)
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const { bucketWeight = 5, bucketCount = 1, maxWeights = 12, start = 0 } = attributes;
+		const widget = /* @__PURE__ */ jsx(MysteryBucketLab, {
+			bucketWeight,
+			bucketCount,
+			maxWeights,
+			start
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "weight each",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: bucketWeight,
+					onChange: (v) => updateAttributes({ bucketWeight: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "buckets",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: bucketCount,
+					onChange: (v) => updateAttributes({ bucketCount: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "max weights",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: maxWeights,
+					onChange: (v) => updateAttributes({ maxWeights: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "start at",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: start,
+					onChange: (v) => updateAttributes({ start: v })
+				})
+			})
+		] }), widget] });
+	}
+});
+const BalanceAlgebraBlock = defineBlock({
+	key: "balance-algebra",
+	tag: "BalanceAlgebra",
+	void: true,
+	label: "Balance scale (algebra)",
+	description: "Drag x to balance a·x + b = c — learners solve a linear equation by balancing the scale.",
+	category: "interactive",
+	schema: z.object({
+		coef: z.number().default(2),
+		addend: z.number().default(1),
+		rhs: z.number().default(7),
+		answer: z.number().default(3),
+		controlId: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const { coef = 2, addend = 1, rhs = 7, answer = 3 } = attributes;
+		const widget = /* @__PURE__ */ jsx(BalanceAlgebraLab, {
+			coef,
+			addend,
+			rhs,
+			answer,
+			controlId: attributes.controlId
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "coefficient a",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: coef,
+					onChange: (v) => updateAttributes({ coef: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "addend b",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: addend,
+					onChange: (v) => updateAttributes({ addend: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "right side c",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: rhs,
+					onChange: (v) => updateAttributes({ rhs: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "answer x",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: answer,
+					onChange: (v) => updateAttributes({ answer: v })
+				})
+			})
+		] }), widget] });
+	}
+});
+const VertexParabolaBlock = defineBlock({
+	key: "vertex-parabola",
+	tag: "VertexParabola",
+	void: true,
+	label: "Parabola (drag the vertex)",
+	description: "Drag the vertex of y = a(x−h)² + k; the curve + equation update live.",
+	category: "interactive",
+	schema: z.object({ a: z.number().default(1) }),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const { a = 1 } = attributes;
+		const widget = /* @__PURE__ */ jsx(VertexParabolaLab, { a });
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(ConfigPanel, { children: /* @__PURE__ */ jsx(ConfigRow, {
+			label: "stretch a",
+			children: /* @__PURE__ */ jsx(NumField, {
+				value: a,
+				onChange: (v) => updateAttributes({ a: v })
+			})
+		}) }), widget] });
+	}
+});
+const AreaModelBlock = defineBlock({
+	key: "area-model",
+	tag: "AreaModel",
+	void: true,
+	label: "Area model (algebra tiles)",
+	description: "(x+a)(x+b) as a partitioned rectangle — EXPAND (drag x) or FACTOR (find a, b).",
+	category: "interactive",
+	schema: z.object({
+		a: z.number().default(3),
+		b: z.number().default(2),
+		mode: z.enum(["expand", "factor"]).default("expand"),
+		controlId: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const { a = 3, b = 2, mode: m = "expand" } = attributes;
+		const widget = /* @__PURE__ */ jsx(AreaModelLab, {
+			a,
+			b,
+			mode: m,
+			controlId: attributes.controlId
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "a in (x+a)",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: a,
+					onChange: (v) => updateAttributes({ a: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "b in (x+b)",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: b,
+					onChange: (v) => updateAttributes({ b: v })
+				})
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "mode",
+				children: [/* @__PURE__ */ jsx(ChipToggle, {
+					active: m !== "factor",
+					onClick: () => updateAttributes({ mode: "expand" }),
+					children: "expand"
+				}), /* @__PURE__ */ jsx(ChipToggle, {
+					active: m === "factor",
+					onClick: () => updateAttributes({ mode: "factor" }),
+					children: "factor"
+				})]
+			})
+		] }), widget] });
+	}
+});
+const GrowingPatternBlock = defineBlock({
+	key: "growing-pattern",
+	tag: "GrowingPattern",
+	void: true,
+	label: "Pattern → formula",
+	description: "A figure grows by a·n + b; learners find the rule (hidden predict row forces extrapolation).",
+	category: "interactive",
+	schema: z.object({
+		a: z.number().default(2),
+		b: z.number().default(3),
+		steps: z.number().default(4),
+		controlId: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const { a = 2, b = 3, steps = 4 } = attributes;
+		const widget = /* @__PURE__ */ jsx(GrowingPatternLab, {
+			a,
+			b,
+			steps,
+			controlId: attributes.controlId
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "per step a",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: a,
+					onChange: (v) => updateAttributes({ a: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "constant b",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: b,
+					onChange: (v) => updateAttributes({ b: v })
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "figures shown",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: steps,
+					onChange: (v) => updateAttributes({ steps: v })
+				})
+			})
+		] }), widget] });
+	}
+});
+const answerSchema = z.union([z.object({
+	kind: z.literal("number"),
+	value: z.number(),
+	tol: z.number().optional()
+}), z.object({
+	kind: z.literal("expression"),
+	value: z.string()
+})]);
+const askSchema = z.object({
+	prompt: z.string(),
+	answer: answerSchema,
+	placeholder: z.string().optional()
+});
+const deriveSchema = z.object({
+	kind: z.enum([
+		"intersections",
+		"roots",
+		"tangent",
+		"normal",
+		"area"
+	]),
+	of: z.union([z.number(), z.tuple([z.number(), z.number()])]).optional(),
+	at: z.union([z.number(), z.string()]).optional(),
+	between: z.tuple([z.number(), z.number()]).optional(),
+	from: z.union([z.number(), z.string()]).optional(),
+	to: z.union([z.number(), z.string()]).optional(),
+	label: z.string().optional()
+});
+const DERIVE_KINDS = [
+	"intersections",
+	"roots",
+	"tangent",
+	"normal",
+	"area"
+];
+/** Shared "ask + check" authoring row, used by the engine and representation blocks. */
+function AskEditor({ ask, onChange }) {
+	if (!ask) return /* @__PURE__ */ jsx(SmallButton, {
+		onClick: () => onChange({
+			prompt: "",
+			answer: {
+				kind: "number",
+				value: 0
+			}
+		}),
+		children: "+ question (checked answer)"
+	});
+	const isNum = ask.answer.kind === "number";
+	const setAns = (patch) => onChange({
+		...ask,
+		answer: {
+			...ask.answer,
+			...patch
+		}
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-1.5",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "font-medium text-muted-foreground",
+				children: "Question (graded)"
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Prompt",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: ask.prompt,
+					onChange: (v) => onChange({
+						...ask,
+						prompt: v
+					}),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "Answer is",
+				children: [/* @__PURE__ */ jsx(ChipToggle, {
+					active: isNum,
+					onClick: () => setAns({
+						kind: "number",
+						value: typeof ask.answer.value === "number" ? ask.answer.value : 0
+					}),
+					children: "a number"
+				}), /* @__PURE__ */ jsx(ChipToggle, {
+					active: !isNum,
+					onClick: () => setAns({
+						kind: "expression",
+						value: String(ask.answer.value ?? "")
+					}),
+					children: "an expression"
+				})]
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "Correct value",
+				children: [
+					isNum ? /* @__PURE__ */ jsx(NumField, {
+						value: Number(ask.answer.value) || 0,
+						onChange: (v) => setAns({ value: v })
+					}) : /* @__PURE__ */ jsx(TextField, {
+						value: String(ask.answer.value ?? ""),
+						mono: true,
+						placeholder: "6*x - 9",
+						onChange: (v) => setAns({ value: v }),
+						className: "flex-1"
+					}),
+					isNum && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "± tol"
+					}), /* @__PURE__ */ jsx(NumField, {
+						value: ask.answer.tol ?? .01,
+						onChange: (v) => setAns({ tol: v })
+					})] }),
+					/* @__PURE__ */ jsx(SmallButton, {
+						tone: "danger",
+						onClick: () => onChange(void 0),
+						children: "remove"
+					})
+				]
+			})
+		]
+	});
+}
+const InteractiveProblemBlock = defineBlock({
+	key: "interactive-problem",
+	void: true,
+	label: "Interactive problem (engine)",
+	description: "Author equations + sliders, derive roots/intersections/tangent/normal/area, and grade a typed answer — no code.",
+	category: "interactive",
+	schema: z.object({
+		equations: z.array(equationSchema).optional(),
+		params: z.array(paramSchema).optional(),
+		xRange: z.tuple([z.number(), z.number()]).optional(),
+		yRange: z.union([z.tuple([z.number(), z.number()]), z.literal("auto")]).optional(),
+		derive: z.array(deriveSchema).optional(),
+		ask: askSchema.optional(),
+		title: z.string().optional(),
+		prompt: z.string().optional(),
+		activity: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const equations = asExprStrings(attributes.equations);
+		const params = asParams(attributes.params);
+		const xRange = attributes.xRange ?? [-6.5, 6.5];
+		const yRange = attributes.yRange ?? "auto";
+		const derive = Array.isArray(attributes.derive) ? attributes.derive : [];
+		const ask = attributes.ask;
+		const widget = /* @__PURE__ */ jsx(InteractiveProblem, {
+			equations,
+			params,
+			xRange,
+			yRange,
+			derive,
+			ask,
+			title: attributes.title ?? "Interactive problem",
+			prompt: attributes.prompt,
+			activity: attributes.activity ?? "interactive-problem"
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		const upd = updateAttributes;
+		const setEq = (i, v) => updateAttributes({ equations: equations.map((e, j) => j === i ? v : e) });
+		const setParam = (i, patch) => updateAttributes({ params: params.map((p, j) => j === i ? {
+			...p,
+			...patch
+		} : p) });
+		const setDerive = (i, patch) => upd({ derive: derive.map((d, j) => j === i ? {
+			...d,
+			...patch
+		} : d) });
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Title",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: attributes.title ?? "",
+					placeholder: "Interactive problem",
+					onChange: (v) => updateAttributes({ title: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Prompt",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: attributes.prompt ?? "",
+					placeholder: "what the learner does",
+					onChange: (v) => updateAttributes({ prompt: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-muted-foreground",
+						children: "Equations (use x and your slider names)"
+					}),
+					equations.map((eq, i) => /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: "font-mono text-muted-foreground",
+								children: [i, ": y ="]
+							}),
+							/* @__PURE__ */ jsx(TextField, {
+								value: eq,
+								mono: true,
+								placeholder: "abs(p*x - q)",
+								onChange: (v) => setEq(i, v),
+								className: "flex-1"
+							}),
+							equations.length > 1 && /* @__PURE__ */ jsx(SmallButton, {
+								tone: "danger",
+								onClick: () => updateAttributes({ equations: equations.filter((_, j) => j !== i) }),
+								children: "✕"
+							})
+						]
+					}, i)),
+					/* @__PURE__ */ jsx(SmallButton, {
+						onClick: () => updateAttributes({ equations: [...equations, ""] }),
+						children: "+ equation"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-muted-foreground",
+						children: "Sliders (learner-draggable)"
+					}),
+					params.map((p, i) => /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-1.5",
+						children: [
+							/* @__PURE__ */ jsx(TextField, {
+								value: p.name,
+								mono: true,
+								placeholder: "k",
+								onChange: (v) => setParam(i, { name: v }),
+								className: "w-14"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: "from"
+							}),
+							/* @__PURE__ */ jsx(NumField, {
+								value: p.min,
+								onChange: (v) => setParam(i, { min: v })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: "to"
+							}),
+							/* @__PURE__ */ jsx(NumField, {
+								value: p.max,
+								onChange: (v) => setParam(i, { max: v })
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: "="
+							}),
+							/* @__PURE__ */ jsx(NumField, {
+								value: p.value,
+								onChange: (v) => setParam(i, { value: v })
+							}),
+							/* @__PURE__ */ jsx(SmallButton, {
+								tone: "danger",
+								onClick: () => updateAttributes({ params: params.filter((_, j) => j !== i) }),
+								children: "✕"
+							})
+						]
+					}, i)),
+					/* @__PURE__ */ jsx(SmallButton, {
+						onClick: () => updateAttributes({ params: [...params, {
+							name: nextParamName(params),
+							min: 0,
+							max: 10,
+							value: 1,
+							step: 1
+						}] }),
+						children: "+ slider"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium text-muted-foreground",
+						children: "Derive (computed + drawn live)"
+					}),
+					derive.map((d, i) => {
+						const kind = String(d.kind ?? "intersections");
+						const ofA = Array.isArray(d.of) ? Number(d.of[0]) : Number(d.of ?? 0);
+						const ofB = Array.isArray(d.of) ? Number(d.of[1] ?? 1) : 1;
+						return /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-1.5",
+							children: [
+								/* @__PURE__ */ jsx(SelectField, {
+									value: kind,
+									options: DERIVE_KINDS,
+									onChange: (v) => setDerive(i, { kind: v })
+								}),
+								kind === "intersections" && /* @__PURE__ */ jsxs(Fragment, { children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: "of eq"
+									}),
+									/* @__PURE__ */ jsx(NumField, {
+										value: ofA,
+										onChange: (v) => setDerive(i, { of: [v, ofB] })
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: "&"
+									}),
+									/* @__PURE__ */ jsx(NumField, {
+										value: ofB,
+										onChange: (v) => setDerive(i, { of: [ofA, v] })
+									})
+								] }),
+								kind === "roots" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: "of eq"
+								}), /* @__PURE__ */ jsx(NumField, {
+									value: Number(d.of ?? 0),
+									onChange: (v) => setDerive(i, { of: v })
+								})] }),
+								(kind === "tangent" || kind === "normal") && /* @__PURE__ */ jsxs(Fragment, { children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: "of eq"
+									}),
+									/* @__PURE__ */ jsx(NumField, {
+										value: Number(d.of ?? 0),
+										onChange: (v) => setDerive(i, { of: v })
+									}),
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: "at x"
+									}),
+									/* @__PURE__ */ jsx(TextField, {
+										value: String(d.at ?? ""),
+										mono: true,
+										placeholder: "2 or a param",
+										onChange: (v) => setDerive(i, { at: /^-?\d*\.?\d+$/.test(v) ? Number(v) : v }),
+										className: "w-20"
+									})
+								] }),
+								kind === "area" && /* @__PURE__ */ jsxs(Fragment, { children: [
+									/* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground",
+										children: "eqs"
+									}),
+									/* @__PURE__ */ jsx(NumField, {
+										value: Array.isArray(d.between) ? Number(d.between[0]) : 0,
+										onChange: (v) => setDerive(i, { between: [v, Array.isArray(d.between) ? Number(d.between[1] ?? 1) : 1] })
+									}),
+									/* @__PURE__ */ jsx(NumField, {
+										value: Array.isArray(d.between) ? Number(d.between[1] ?? 1) : 1,
+										onChange: (v) => setDerive(i, { between: [Array.isArray(d.between) ? Number(d.between[0]) : 0, v] })
+									})
+								] }),
+								/* @__PURE__ */ jsx(SmallButton, {
+									tone: "danger",
+									onClick: () => upd({ derive: derive.filter((_, j) => j !== i) }),
+									children: "✕"
+								})
+							]
+						}, i);
+					}),
+					/* @__PURE__ */ jsx(SmallButton, {
+						onClick: () => upd({ derive: [...derive, {
+							kind: "intersections",
+							of: [0, 1]
+						}] }),
+						children: "+ derive"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "x window",
+				children: [
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[0],
+						onChange: (v) => updateAttributes({ xRange: [v, xRange[1]] })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground",
+						children: "to"
+					}),
+					/* @__PURE__ */ jsx(NumField, {
+						value: xRange[1],
+						onChange: (v) => updateAttributes({ xRange: [xRange[0], v] })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "y window",
+				children: [
+					/* @__PURE__ */ jsx(ChipToggle, {
+						active: yRange === "auto",
+						onClick: () => updateAttributes({ yRange: "auto" }),
+						children: "auto"
+					}),
+					/* @__PURE__ */ jsx(ChipToggle, {
+						active: yRange !== "auto",
+						onClick: () => updateAttributes({ yRange: yRange === "auto" ? [-10, 10] : yRange }),
+						children: "fixed"
+					}),
+					yRange !== "auto" && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(NumField, {
+							value: yRange[0],
+							onChange: (v) => updateAttributes({ yRange: [v, yRange[1]] })
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: "to"
+						}),
+						/* @__PURE__ */ jsx(NumField, {
+							value: yRange[1],
+							onChange: (v) => updateAttributes({ yRange: [yRange[0], v] })
+						})
+					] })
+				]
+			}),
+			/* @__PURE__ */ jsx(AskEditor, {
+				ask,
+				onChange: (a) => upd({ ask: a })
+			})
+		] }), widget] });
+	}
+});
+const TriangleTrigBlock = defineBlock({
+	key: "triangle-trig",
+	void: true,
+	label: "Triangle trig (elevation/depression)",
+	description: "A right triangle for elevation/depression: give an angle + one side, solve the rest, grade a typed answer.",
+	category: "interactive",
+	schema: z.object({
+		angleDeg: z.number().optional(),
+		leg: z.number().optional(),
+		legKind: z.enum(["opposite", "adjacent"]).optional(),
+		mode: z.enum([
+			"elevation",
+			"depression",
+			"plain"
+		]).optional(),
+		labels: z.object({
+			opposite: z.string().optional(),
+			adjacent: z.string().optional(),
+			hypotenuse: z.string().optional(),
+			angle: z.string().optional()
+		}).optional(),
+		drive: z.array(z.enum(["angle", "leg"])).optional(),
+		ask: askSchema.optional(),
+		title: z.string().optional(),
+		prompt: z.string().optional(),
+		activity: z.string().optional()
+	}),
+	Component: ({ attributes, mode, updateAttributes }) => {
+		const a = attributes;
+		const drive = Array.isArray(a.drive) ? a.drive : ["angle"];
+		const labels = a.labels ?? {};
+		const ask = attributes.ask;
+		const widget = /* @__PURE__ */ jsx(TriangleTrig, {
+			...a,
+			drive,
+			ask
+		});
+		if (mode !== "editing" || !updateAttributes) return widget;
+		const upd = updateAttributes;
+		const toggleDrive = (k) => updateAttributes({ drive: drive.includes(k) ? drive.filter((d) => d !== k) : [...drive, k] });
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs(ConfigPanel, { children: [
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Title",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: a.title ?? "",
+					placeholder: "Angle of depression…",
+					onChange: (v) => updateAttributes({ title: v }),
+					className: "flex-1"
+				})
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Angle θ (°)",
+				children: /* @__PURE__ */ jsx(NumField, {
+					value: a.angleDeg ?? 31,
+					onChange: (v) => updateAttributes({ angleDeg: v })
+				})
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "Given leg",
+				children: [/* @__PURE__ */ jsx(NumField, {
+					value: a.leg ?? 15,
+					onChange: (v) => updateAttributes({ leg: v })
+				}), /* @__PURE__ */ jsx(SelectField, {
+					value: a.legKind ?? "opposite",
+					options: ["opposite", "adjacent"],
+					onChange: (v) => upd({ legKind: v })
+				})]
+			}),
+			/* @__PURE__ */ jsx(ConfigRow, {
+				label: "Framing",
+				children: /* @__PURE__ */ jsx(SelectField, {
+					value: a.mode ?? "depression",
+					options: [
+						"depression",
+						"elevation",
+						"plain"
+					],
+					onChange: (v) => upd({ mode: v })
+				})
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "Labels",
+				children: [/* @__PURE__ */ jsx(TextField, {
+					value: labels.opposite ?? "",
+					placeholder: "opposite",
+					onChange: (v) => updateAttributes({ labels: {
+						...labels,
+						opposite: v
+					} }),
+					className: "w-24"
+				}), /* @__PURE__ */ jsx(TextField, {
+					value: labels.adjacent ?? "",
+					placeholder: "adjacent",
+					onChange: (v) => updateAttributes({ labels: {
+						...labels,
+						adjacent: v
+					} }),
+					className: "w-24"
+				})]
+			}),
+			/* @__PURE__ */ jsxs(ConfigRow, {
+				label: "Draggable",
+				children: [/* @__PURE__ */ jsx(ChipToggle, {
+					active: drive.includes("angle"),
+					onClick: () => toggleDrive("angle"),
+					children: "angle"
+				}), /* @__PURE__ */ jsx(ChipToggle, {
+					active: drive.includes("leg"),
+					onClick: () => toggleDrive("leg"),
+					children: "given leg"
+				})]
+			}),
+			/* @__PURE__ */ jsx(AskEditor, {
+				ask,
+				onChange: (a2) => upd({ ask: a2 })
+			})
+		] }), widget] });
+	}
+});
+/** All math labs blocks — spread into a host's `defineBlock` list. */
+const mathBlocks = [
+	TrigExplorerBlock,
+	GraphBlock,
+	DerivativeExplorerBlock,
+	GradientDescentBlock,
+	IntegralExplorerBlock,
+	LimitExplorerBlock,
+	DerivationBlock,
+	LinearSystemBlock,
+	NumberLineBlock,
+	MysteryBucketBlock,
+	BalanceAlgebraBlock,
+	VertexParabolaBlock,
+	AreaModelBlock,
+	GrowingPatternBlock,
+	InteractiveProblemBlock,
+	TriangleTrigBlock
+];
+/** The MDX tag → component render map slice for the math domain. */
+const mathComponents = {
+	MysteryBucket: MysteryBucketLab,
+	NumberLine: NumberLineLab,
+	LinearSystem: LinearSystemView,
+	BalanceAlgebra: BalanceAlgebraLab,
+	VertexParabola: VertexParabolaLab,
+	AreaModel: AreaModelLab,
+	GrowingPattern: GrowingPatternLab,
+	FunctionMachine: FunctionMachineLab,
+	Graph: Grapher,
+	DerivativeExplorer,
+	IntegralExplorer,
+	LimitExplorer,
+	GradientDescent,
+	Derivation,
+	TrigExplorer,
+	InteractiveProblem,
+	TriangleTrig
+};
+
+//#endregion
+export { AreaModelBlock, BalanceAlgebraBlock, DerivationBlock, DerivativeExplorerBlock, GradientDescentBlock, GraphBlock, GrowingPatternBlock, IntegralExplorerBlock, InteractiveProblemBlock, LimitExplorerBlock, LinearSystemBlock, LinearSystemView, MysteryBucketBlock, NumberLineBlock, TriangleTrigBlock, TrigExplorerBlock, VertexParabolaBlock, mathBlocks, mathComponents };