@classytic/labs 0.1.0 → 0.3.0

package/dist/domains/ml/activity.mjs

@@ -0,0 +1,80 @@
+import { IconButton } from "../../kit/controls.mjs";
+import { Activity, RunTransport } from "../../kit/activity.mjs";
+import { ControlPolicy } from "../../kit/frame.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { RotateCcw } from "lucide-react";
+
+//#region src/domains/ml/activity.tsx
+/** One predictable learning anatomy for every ML lab; algorithms keep their own scenes. */
+function MLActivity({ className, eyebrow = "Machine learning", title, prompt, status, figure, instruments, controls, feedback, transport, challenge, support, controlConfig, canvasLabel, inspectorLabel = "Evidence and controls" }) {
+	return /* @__PURE__ */ jsx(ControlPolicy, {
+		config: controlConfig,
+		children: /* @__PURE__ */ jsxs(Activity.Root, {
+			className: `ml-activity ${className}`,
+			children: [
+				/* @__PURE__ */ jsxs(Activity.Header, { children: [/* @__PURE__ */ jsx(Activity.Heading, {
+					eyebrow,
+					title,
+					description: prompt
+				}), /* @__PURE__ */ jsx(Activity.FocusButton, {})] }),
+				/* @__PURE__ */ jsx(Activity.Status, { children: status }),
+				challenge ? /* @__PURE__ */ jsx(Activity.Transcript, {
+					label: "Prediction challenge",
+					defaultOpen: true,
+					children: challenge
+				}) : null,
+				/* @__PURE__ */ jsxs(Activity.Workspace, { children: [/* @__PURE__ */ jsx(Activity.Canvas, {
+					label: canvasLabel,
+					children: figure
+				}), /* @__PURE__ */ jsx(Activity.Inspector, {
+					label: inspectorLabel,
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "lab-activity-inspector-section",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "ml-instrument-stack",
+							children: instruments
+						}), controls ? /* @__PURE__ */ jsx("div", {
+							className: "lab-activity-fields ml-controls",
+							children: controls
+						}) : null]
+					})
+				})] }),
+				/* @__PURE__ */ jsxs(Activity.Feedback, { children: [/* @__PURE__ */ jsx("span", { children: "Observe" }), /* @__PURE__ */ jsx("p", { children: feedback })] }),
+				support ? /* @__PURE__ */ jsx(Activity.Transcript, {
+					label: "Optional help",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "ml-lesson-support",
+						children: /* @__PURE__ */ jsx("section", { children: support })
+					})
+				}) : null,
+				/* @__PURE__ */ jsx(Activity.Transport, { children: transport })
+			]
+		})
+	});
+}
+function MLRunTransport({ running, onReset, onToggle, onStep, state, detail, disabled, runLabel = "Run" }) {
+	return /* @__PURE__ */ jsx(RunTransport, {
+		running,
+		onReset,
+		onToggle,
+		onStep,
+		state,
+		detail,
+		disabled,
+		runLabel
+	});
+}
+function MLResetTransport({ onReset, state, detail }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+		label: "Reset activity",
+		onClick: onReset,
+		children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "lab-transport-state",
+		"aria-live": "polite",
+		children: [/* @__PURE__ */ jsx("strong", { children: state }), detail ? /* @__PURE__ */ jsx("span", { children: detail }) : null]
+	})] });
+}
+
+//#endregion
+export { MLActivity, MLResetTransport, MLRunTransport };

package/dist/domains/ml/classifier-threshold/manifest.mjs

@@ -0,0 +1,68 @@
+import { defineLab } from "../../../lab-def/define-lab.mjs";
+import { commonLabProps } from "../../../blocks/lab-block.mjs";
+import { z } from "zod";
+
+//#region src/domains/ml/classifier-threshold/manifest.ts
+const scores = z.array(z.number().finite()).min(2).max(100);
+var manifest_default = defineLab({
+	id: "classifier-threshold",
+	domain: "ml",
+	group: "Machine learning",
+	title: "Classification threshold (precision/recall)",
+	description: "The precision–recall trade-off, draggable: positive and negative examples overlap on a score axis; slide the threshold and the 2×2 confusion matrix + precision/recall/accuracy/F1 update live, pushing precision up costs recall. Author the two score sets.",
+	schema: z.object({
+		positives: scores.optional(),
+		negatives: scores.optional(),
+		threshold: z.number().finite().default(5),
+		span: z.number().finite().min(1).max(100).default(10),
+		...commonLabProps
+	}).superRefine((props, context) => {
+		if (props.threshold < 0 || props.threshold > props.span) context.addIssue({
+			code: "custom",
+			path: ["threshold"],
+			message: "Threshold must sit inside the score span"
+		});
+		for (const key of ["positives", "negatives"]) props[key]?.forEach((score, index) => {
+			if (score < 0 || score > props.span) context.addIssue({
+				code: "custom",
+				path: [key, index],
+				message: "Scores must sit inside the score span"
+			});
+		});
+	}),
+	taxonomy: {
+		grades: ["11", "12"],
+		outcomes: [
+			"machine-learning",
+			"classification",
+			"precision-recall"
+		],
+		durationMinutes: 12,
+		interaction: "explorer",
+		authorability: "moderate"
+	},
+	experience: {
+		objectives: [
+			"Predict how raising a decision threshold changes recall",
+			"Connect threshold movement to confusion-matrix counts and classification metrics",
+			"Explain the precision–recall trade-off for an unfamiliar operating point"
+		],
+		phases: [
+			"predict",
+			"act",
+			"observe",
+			"explain",
+			"transfer"
+		],
+		responses: ["choice"],
+		accessibility: {
+			keyboard: true,
+			textAlternative: true,
+			reducedMotion: true
+		}
+	},
+	loadRuntime: () => import("./runtime.mjs")
+});
+
+//#endregion
+export { manifest_default as default };

package/dist/{ml/classifier/preset.d.mts → domains/ml/classifier-threshold/runtime.d.mts}

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-//#region src/ml/classifier/preset.d.ts
+//#region src/domains/ml/classifier-threshold/runtime.d.ts
 interface ClassifierProps {
   positives?: number[];
   negatives?: number[];

package/dist/domains/ml/classifier-threshold/runtime.mjs

@@ -0,0 +1,342 @@
+'use client';
+
+import { clamp } from "../../../core/util.mjs";
+import { Slider, StatusPill } from "../../../kit/controls.mjs";
+import { ChallengeCard, useChallenge, useCheckpoint } from "../../../kit/pedagogy.mjs";
+import { MLActivity, MLResetTransport } from "../activity.mjs";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Circle, Dot, Label, MovableDot, Polygon, Segment, Stage } from "@classytic/stage";
+
+//#region src/domains/ml/classifier-threshold/runtime.tsx
+/**
+* ClassifierThresholdLab, the precision/recall trade-off you can drag. Positive
+* and negative examples sit along a score axis (they OVERLAP, like any real
+* classifier). Drag the threshold: everything to its right is predicted positive.
+* The 2×2 confusion matrix and precision / recall / accuracy / F1 update live ,
+* slide right and precision climbs while recall falls; there's no setting that
+* maxes both. Misclassified points get a red ring.
+*
+* A data-analytics instrument from pure primitives: Dot + a horizontal MovableDot
+* threshold + a live HTML confusion matrix.
+*/
+const POS = "var(--stage-good)";
+const NEG = "var(--stage-muted)";
+const DEFAULT_POS = [
+	4,
+	5,
+	5.5,
+	6,
+	6.5,
+	7,
+	7.5,
+	8,
+	8.5,
+	9
+];
+const DEFAULT_NEG = [
+	1,
+	1.5,
+	2,
+	2.5,
+	3,
+	3.5,
+	4,
+	4.5,
+	5,
+	6
+];
+const PREDICT_Q = [{
+	id: "recall-vs-threshold",
+	prompt: "As you raise the threshold (label fewer things positive), what happens to recall, the share of true positives you catch?",
+	choices: [
+		{
+			value: "down",
+			label: "recall falls"
+		},
+		{
+			value: "up",
+			label: "recall rises"
+		},
+		{
+			value: "same",
+			label: "unchanged"
+		}
+	],
+	answer: "down",
+	explain: "Raising the threshold means fewer points clear the bar, so you catch fewer of the real positives (more false negatives): recall falls. Precision usually rises in return, since the ones you do call positive are more likely correct. That is the trade-off, no single threshold maxes both."
+}];
+function ClassifierThresholdLab({ positives = DEFAULT_POS, negatives = DEFAULT_NEG, threshold = 5, span = 10, title = "The precision–recall trade-off", prompt = "Drag the threshold: everything to its right is called positive. Watch the confusion matrix, pushing precision up costs you recall.", objectives, height = 300 }) {
+	const view = {
+		xMin: 0,
+		xMax: span,
+		yMin: -4,
+		yMax: 4
+	};
+	const [t, setT] = useState(threshold);
+	const [moved, setMoved] = useState(false);
+	const ch = useChallenge(PREDICT_Q);
+	useCheckpoint({
+		solved: moved && ch.allCorrect,
+		activity: "classifier-threshold"
+	});
+	const TP = positives.filter((s) => s >= t).length;
+	const FN = positives.length - TP;
+	const FP = negatives.filter((s) => s >= t).length;
+	const TN = negatives.length - FP;
+	const total = positives.length + negatives.length;
+	const precision = TP + FP === 0 ? 0 : TP / (TP + FP);
+	const recall = TP + FN === 0 ? 0 : TP / (TP + FN);
+	const accuracy = (TP + TN) / total;
+	const f1 = precision + recall === 0 ? 0 : 2 * precision * recall / (precision + recall);
+	const dragT = (p) => {
+		setT(clamp(p.x, view.xMin, view.xMax));
+		if (!moved) setMoved(true);
+	};
+	const setThreshold = (value) => {
+		setT(clamp(value, view.xMin, view.xMax));
+		setMoved(true);
+	};
+	const reset = () => {
+		setT(threshold);
+		setMoved(false);
+	};
+	const yOf = (i) => i % 3 - 1;
+	const dot = (s, i, posClass) => {
+		const wrong = s >= t !== posClass;
+		const cy = (posClass ? 2 : -2) + yOf(i) * .5;
+		return /* @__PURE__ */ jsxs("g", { children: [wrong && /* @__PURE__ */ jsx(Circle, {
+			center: {
+				x: s,
+				y: cy
+			},
+			r: .42,
+			color: "var(--stage-danger)",
+			fill: "none",
+			weight: 2
+		}), /* @__PURE__ */ jsx(Dot, {
+			x: s,
+			y: cy,
+			r: 5.5,
+			color: posClass ? POS : NEG
+		})] }, `${posClass ? "p" : "n"}${i}`);
+	};
+	const Cell = ({ label, n, tone }) => /* @__PURE__ */ jsxs("div", {
+		className: "ml-confusion-cell",
+		style: { "--ml-tone": tone },
+		children: [/* @__PURE__ */ jsx("div", { children: label }), /* @__PURE__ */ jsx("strong", { children: n })]
+	});
+	const Metric = ({ label, v }) => /* @__PURE__ */ jsxs("div", {
+		className: "ml-metric",
+		children: [/* @__PURE__ */ jsxs("div", { children: [
+			label,
+			" ",
+			(v * 100).toFixed(0),
+			"%"
+		] }), /* @__PURE__ */ jsx("div", {
+			className: "ml-meter",
+			children: /* @__PURE__ */ jsx("div", { style: { "--ml-value": `${v * 100}%` } })
+		})]
+	});
+	const figure = /* @__PURE__ */ jsxs(Stage, {
+		view,
+		height,
+		preserveAspect: false,
+		ariaLabel: `Score axis with a threshold at ${t.toFixed(1)}; precision ${(precision * 100).toFixed(0)}%, recall ${(recall * 100).toFixed(0)}%`,
+		children: [
+			/* @__PURE__ */ jsx(Polygon, {
+				points: [
+					{
+						x: t,
+						y: view.yMin
+					},
+					{
+						x: span,
+						y: view.yMin
+					},
+					{
+						x: span,
+						y: view.yMax
+					},
+					{
+						x: t,
+						y: view.yMax
+					}
+				],
+				color: "transparent",
+				fill: "var(--stage-accent)",
+				fillOpacity: .08,
+				weight: 0
+			}),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: 0,
+					y: 0
+				},
+				to: {
+					x: span,
+					y: 0
+				},
+				color: "var(--stage-grid)",
+				weight: 1
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: 1.2,
+				y: 3.5,
+				text: "positives ●",
+				size: 11,
+				color: POS
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: 1.2,
+				y: -3.5,
+				text: "negatives ●",
+				size: 11,
+				color: NEG
+			}),
+			/* @__PURE__ */ jsx(Label, {
+				x: span - 1.3,
+				y: 3.5,
+				text: "→ called +",
+				size: 11,
+				color: "var(--stage-accent)"
+			}),
+			positives.map((s, i) => dot(s, i, true)),
+			negatives.map((s, i) => dot(s, i, false)),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: t,
+					y: view.yMin
+				},
+				to: {
+					x: t,
+					y: view.yMax
+				},
+				color: "var(--stage-accent)",
+				weight: 2.5,
+				dashed: true
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: {
+					x: t,
+					y: 0
+				},
+				onMove: dragT,
+				constrain: "horizontal",
+				range: {
+					min: view.xMin,
+					max: view.xMax
+				},
+				r: 9,
+				color: "var(--stage-accent)",
+				ariaLabel: "decision threshold"
+			})
+		]
+	});
+	const instruments = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "ml-confusion-grid",
+		children: [
+			/* @__PURE__ */ jsx(Cell, {
+				label: "true +",
+				n: TP,
+				tone: POS
+			}),
+			/* @__PURE__ */ jsx(Cell, {
+				label: "false −",
+				n: FN,
+				tone: "var(--stage-warn)"
+			}),
+			/* @__PURE__ */ jsx(Cell, {
+				label: "false +",
+				n: FP,
+				tone: "var(--stage-danger)"
+			}),
+			/* @__PURE__ */ jsx(Cell, {
+				label: "true −",
+				n: TN,
+				tone: NEG
+			})
+		]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "ml-metrics",
+		children: [
+			/* @__PURE__ */ jsx(Metric, {
+				label: "precision",
+				v: precision
+			}),
+			/* @__PURE__ */ jsx(Metric, {
+				label: "recall",
+				v: recall
+			}),
+			/* @__PURE__ */ jsx(Metric, {
+				label: "accuracy",
+				v: accuracy
+			}),
+			/* @__PURE__ */ jsx(Metric, {
+				label: "F1",
+				v: f1
+			}),
+			/* @__PURE__ */ jsxs(StatusPill, {
+				ok: true,
+				children: ["threshold ", t.toFixed(1)]
+			})
+		]
+	})] });
+	const controls = /* @__PURE__ */ jsxs("div", {
+		className: "lab-field",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "lab-field-head",
+			children: [/* @__PURE__ */ jsx("span", { children: "Decision threshold" }), /* @__PURE__ */ jsx("strong", { children: t.toFixed(1) })]
+		}), /* @__PURE__ */ jsx(Slider, {
+			value: t,
+			min: view.xMin,
+			max: view.xMax,
+			step: .1,
+			onChange: setThreshold,
+			ariaLabel: "decision threshold"
+		})]
+	});
+	return /* @__PURE__ */ jsx(MLActivity, {
+		className: "ml-classifier",
+		title,
+		prompt,
+		status: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("strong", { children: moved ? "Threshold explored" : "Ready" }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"precision ",
+				(precision * 100).toFixed(0),
+				"%"
+			] }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"recall ",
+				(recall * 100).toFixed(0),
+				"%"
+			] }),
+			/* @__PURE__ */ jsxs("span", { children: [
+				"F1 ",
+				(f1 * 100).toFixed(0),
+				"%"
+			] })
+		] }),
+		figure,
+		instruments,
+		controls,
+		feedback: moved ? `At ${t.toFixed(1)}, ${TP} positives are caught and ${FP} negatives are false alarms. Moving right usually trades recall for precision.` : "Predict what raising the threshold will do, then move it and compare the confusion matrix.",
+		objectives,
+		transport: /* @__PURE__ */ jsx(MLResetTransport, {
+			onReset: reset,
+			state: moved ? `Threshold ${t.toFixed(1)}` : "Ready",
+			detail: `${TP} true positives · ${FP} false positives`
+		}),
+		challenge: /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: PREDICT_Q,
+			state: ch,
+			title: "Predict first"
+		}),
+		canvasLabel: "Classifier scores and decision threshold",
+		inspectorLabel: "Confusion matrix, metrics and threshold"
+	});
+}
+
+//#endregion
+export { ClassifierThresholdLab, ClassifierThresholdLab as default };

package/dist/domains/ml/decision-boundary/manifest.mjs

@@ -0,0 +1,56 @@
+import { defineLab } from "../../../lab-def/define-lab.mjs";
+import { commonLabProps } from "../../../blocks/lab-block.mjs";
+import { z } from "zod";
+
+//#region src/domains/ml/decision-boundary/manifest.ts
+var manifest_default = defineLab({
+	id: "decision-boundary",
+	domain: "ml",
+	group: "Machine learning",
+	title: "Linear decision boundary (perceptron)",
+	description: "A linear classifier you can see think: choose a generated dataset, drag the boundary’s two handles to split two classes by hand, then watch a perceptron learn. XOR exposes why one straight line is not enough.",
+	schema: z.object({
+		dataset: z.enum([
+			"separable",
+			"overlap",
+			"xor"
+		]).default("separable"),
+		seed: z.number().int().min(0).max(2147483647).default(11),
+		...commonLabProps
+	}),
+	taxonomy: {
+		grades: ["11", "12"],
+		outcomes: [
+			"machine-learning",
+			"classification",
+			"perceptron"
+		],
+		durationMinutes: 15,
+		interaction: "explorer",
+		authorability: "moderate"
+	},
+	experience: {
+		objectives: [
+			"Predict whether a dataset can be separated by one straight boundary",
+			"Use misclassification evidence to adjust or train a perceptron",
+			"Explain why XOR requires a nonlinear boundary or richer representation"
+		],
+		phases: [
+			"predict",
+			"act",
+			"observe",
+			"explain",
+			"transfer"
+		],
+		responses: ["choice"],
+		accessibility: {
+			keyboard: true,
+			textAlternative: true,
+			reducedMotion: true
+		}
+	},
+	loadRuntime: () => import("./runtime.mjs")
+});
+
+//#endregion
+export { manifest_default as default };

package/dist/{ml/boundary/preset.d.mts → domains/ml/decision-boundary/runtime.d.mts}

@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
 
-//#region src/ml/boundary/preset.d.ts
+//#region src/domains/ml/decision-boundary/runtime.d.ts
 type BoundaryDataset = 'separable' | 'overlap' | 'xor';
 interface BoundaryProps {
   dataset?: BoundaryDataset;