@classytic/labs 0.1.0 → 0.2.0

package/dist/kit/predict.mjs

@@ -0,0 +1,146 @@
+'use client';
+
+import { CoordPlane } from "./coords.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, MovableDot, Point, Segment } from "@classytic/stage";
+
+//#region src/kit/predict.tsx
+const TONE_COLOR = {
+	idle: "var(--stage-accent)",
+	ok: "var(--stage-good)",
+	no: "var(--stage-warn)"
+};
+const C_DATA = "var(--stage-fg)";
+const C_GRID = "var(--stage-muted)";
+function PredictPlot({ data, guess, onGuess, tone = "idle", xMax, yMax, xStep = 1, yStep, xLabel, yLabel, height = 340, lockX = true, snap = true, rule = null, showColumn = true, readout = true }) {
+	const yS = yStep ?? Math.max(1, Math.round(yMax / 8));
+	const view = {
+		xMin: -xMax * .04,
+		xMax: xMax * 1.04,
+		yMin: -yMax * .06,
+		yMax: yMax * 1.06
+	};
+	const gColor = TONE_COLOR[tone];
+	const snapXY = (p) => {
+		const x = lockX ? guess.x : snap ? Math.round(p.x / xStep) * xStep : p.x;
+		const y = snap ? Math.round(p.y / yS) * yS : p.y;
+		return {
+			x,
+			y: Math.max(0, Math.min(yMax, y))
+		};
+	};
+	return /* @__PURE__ */ jsxs(CoordPlane, {
+		view,
+		height,
+		preserveAspect: false,
+		stepX: xStep,
+		stepY: yS,
+		ariaLabel: `Plot: ${data.length} points given, drag to predict the point at ${xLabel ?? "x"} = ${guess.x}`,
+		children: [
+			yLabel && /* @__PURE__ */ jsx(Label, {
+				x: 0,
+				y: view.yMax,
+				text: yLabel,
+				dx: 6,
+				dy: -2,
+				anchor: "start",
+				size: 12,
+				weight: 700
+			}),
+			xLabel && /* @__PURE__ */ jsx(Label, {
+				x: view.xMax,
+				y: 0,
+				text: xLabel,
+				dx: -2,
+				dy: 16,
+				anchor: "end",
+				size: 12,
+				weight: 700
+			}),
+			showColumn && /* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: guess.x,
+					y: 0
+				},
+				to: {
+					x: guess.x,
+					y: yMax
+				},
+				color: C_GRID,
+				weight: 1.5,
+				dashed: true,
+				opacity: .5
+			}),
+			rule && /* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: 0,
+					y: rule.intercept
+				},
+				to: {
+					x: xMax,
+					y: rule.slope * xMax + rule.intercept
+				},
+				color: "var(--stage-good)",
+				weight: 2,
+				opacity: .7
+			}),
+			data.map((d, i) => /* @__PURE__ */ jsx(Point, {
+				x: d.x,
+				y: d.y,
+				r: 6,
+				color: C_DATA
+			}, `d${i}`)),
+			/* @__PURE__ */ jsx(Segment, {
+				from: {
+					x: guess.x,
+					y: guess.y
+				},
+				to: {
+					x: 0,
+					y: guess.y
+				},
+				color: gColor,
+				weight: 1.5,
+				dashed: true,
+				opacity: .8
+			}),
+			readout && /* @__PURE__ */ jsx(Label, {
+				x: 0,
+				y: guess.y,
+				text: String(guess.y),
+				dx: -8,
+				anchor: "end",
+				size: 11,
+				weight: 700,
+				color: gColor
+			}),
+			/* @__PURE__ */ jsx(MovableDot, {
+				value: guess,
+				onMove: (p, phase) => onGuess(snapXY(p), phase),
+				constrain: lockX ? "vertical" : void 0,
+				color: gColor,
+				r: 8,
+				step: yS,
+				range: {
+					min: 0,
+					max: yMax
+				},
+				ariaLabel: `your prediction at ${xLabel ?? "x"} = ${guess.x}, drag up or down to set ${yLabel ?? "y"}`
+			}),
+			guess.y <= .001 && /* @__PURE__ */ jsx(Label, {
+				x: guess.x,
+				y: 0,
+				text: "drag up ↑",
+				dx: 0,
+				dy: -14,
+				anchor: "middle",
+				size: 11,
+				weight: 700,
+				color: gColor
+			})
+		]
+	});
+}
+
+//#endregion
+export { PredictPlot };

package/dist/kit/receipt.d.mts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+
+//#region src/kit/receipt.d.ts
+interface ReceiptItem {
+  qty: number;
+  name: string;
+  /** unit price. */
+  unit: number;
+}
+interface ReceiptSceneProps {
+  store?: string;
+  items: ReceiptItem[];
+  currency?: string;
+  /** show the computed total-items value (else "—"). */
+  revealItems?: boolean;
+  /** show the computed total-cost value (else "—"). */
+  revealCost?: boolean;
+  width?: number;
+}
+declare function ReceiptScene({
+  store,
+  items,
+  currency,
+  revealItems,
+  revealCost,
+  width
+}: ReceiptSceneProps): ReactNode;
+//#endregion
+export { ReceiptItem, ReceiptScene, ReceiptSceneProps };

package/dist/kit/receipt.mjs

@@ -0,0 +1,94 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/receipt.tsx
+const money = (currency, n) => `${currency}${Math.round(n * 100) / 100}`;
+function ReceiptScene({ store = "Half Foods", items, currency = "$", revealItems = false, revealCost = false, width = 260 }) {
+	const totalItems = items.reduce((s, it) => s + it.qty, 0);
+	const totalCost = items.reduce((s, it) => s + it.qty * it.unit, 0);
+	const row = {
+		display: "flex",
+		justifyContent: "space-between",
+		gap: 12,
+		alignItems: "baseline"
+	};
+	const muted = "var(--stage-muted)";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "not-prose",
+		role: "img",
+		"aria-label": `Receipt from ${store}, ${items.length} line items`,
+		style: {
+			width,
+			padding: 16,
+			borderRadius: 14,
+			border: "2px solid var(--stage-accent)",
+			background: "color-mix(in oklab, var(--stage-fg) 4%, var(--stage-bg))",
+			display: "grid",
+			gap: 10,
+			fontVariantNumeric: "tabular-nums"
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					fontWeight: 800,
+					fontSize: 16
+				},
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					style: {
+						width: 22,
+						height: 22,
+						borderRadius: "50%",
+						background: "conic-gradient(var(--stage-good) 0 25%, var(--stage-accent) 0 60%, var(--stage-warn) 0 100%)",
+						display: "inline-block"
+					}
+				}), store]
+			}),
+			items.map((it, i) => /* @__PURE__ */ jsxs("div", {
+				style: {
+					...row,
+					color: muted
+				},
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					it.qty,
+					" ",
+					it.name
+				] }), /* @__PURE__ */ jsxs("span", {
+					style: { whiteSpace: "nowrap" },
+					children: [money(currency, it.unit), " each"]
+				})]
+			}, i)),
+			/* @__PURE__ */ jsx("div", { style: {
+				borderTop: "1px dashed color-mix(in oklab, var(--stage-fg) 30%, transparent)",
+				margin: "2px 0"
+			} }),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					...row,
+					fontWeight: 700
+				},
+				children: [/* @__PURE__ */ jsx("span", { children: "Total items" }), /* @__PURE__ */ jsx("span", {
+					style: { color: revealItems ? "var(--stage-good)" : muted },
+					children: revealItems ? totalItems : "—"
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					...row,
+					fontWeight: 800
+				},
+				children: [/* @__PURE__ */ jsx("span", { children: "Total" }), /* @__PURE__ */ jsx("span", {
+					style: { color: revealCost ? "var(--stage-good)" : muted },
+					children: revealCost ? money(currency, totalCost) : "—"
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { ReceiptScene };

package/dist/kit/rich.mjs

@@ -6,9 +6,9 @@ import { parseRichText } from "@classytic/stage";
 
 //#region src/kit/rich.tsx
 /**
-* RichText — render `_`/`^` notation as real HTML <sub>/<sup> in lab readouts /
+* RichText, render `_`/`^` notation as real HTML <sub>/<sup> in lab readouts /
 * control bars (the DOM counterpart of stage's SVG `<Label>`). Both share the
-* ONE grammar, `parseRichText` from @classytic/stage — so "V_C" never reads as a
+* ONE grammar, `parseRichText` from @classytic/stage, so "V_C" never reads as a
 * dirty underscore and the parsing rule lives in a single source of truth.
 */
 function RichText({ children }) {

package/dist/kit/rule.d.mts

@@ -0,0 +1,59 @@
+import { CalcStep, Worked } from "./calc.mjs";
+import { ReactNode } from "react";
+
+//#region src/kit/rule.d.ts
+interface RuleInput {
+  key: string;
+  label: string;
+  default: number;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+interface RuleDef<I extends Record<string, number> = Record<string, number>> {
+  id: string;
+  name: string;
+  /** Headline formula, LaTeX. */
+  formula: string;
+  /** One-line intuition / analogy. */
+  analogy?: string;
+  /** A diagram shown under the formula. Static, OR a function of the current
+   *  inputs so the GEOMETRY moves with the calculator (e.g. a unit circle that
+   *  turns as θ changes). This is the visual-proof primitive authors compose. */
+  figure?: ReactNode | ((vals: I) => ReactNode);
+  /** Live-calculator knobs (omit for a static formula card). */
+  inputs?: RuleInput[];
+  /** Compute the worked result from the current inputs (shows its working). */
+  compute?: (vals: I) => Worked;
+  /** Why it's true: ordered proof/derivation lines, revealed on demand. */
+  derivation?: CalcStep[];
+  /** Identities, shortcuts, common traps. */
+  tricks?: string[];
+}
+/** Render a worked calculation's steps (LaTeX line + note, last one highlighted).
+ *  The shared step view for both authored lessons and the dynamic solvers. */
+declare function WorkedSteps({
+  worked,
+  accent
+}: {
+  worked: Worked;
+  accent?: boolean;
+}): ReactNode;
+/** The card body (no frame) — embed in a lesson, a RuleLab, or beside a widget. */
+declare function RuleCard({
+  rule
+}: {
+  rule: RuleDef;
+}): ReactNode;
+/** A RuleCard wrapped in a LabFrame — the standalone lab / CMS-block form. */
+declare function RuleLab({
+  rule,
+  title,
+  prompt
+}: {
+  rule: RuleDef;
+  title?: string;
+  prompt?: string;
+}): ReactNode;
+//#endregion
+export { RuleCard, RuleDef, RuleInput, RuleLab, WorkedSteps };

package/dist/kit/rule.mjs

@@ -0,0 +1,215 @@
+'use client';
+
+import { Tex } from "../core/tex.mjs";
+import { Stepper } from "./controls.mjs";
+import { LabFrame } from "./frame.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/rule.tsx
+/**
+* RuleCard, the authorable CONCEPT engine. A bare formula is inert; a Rule bundles
+* everything a learner needs to actually UNDERSTAND it, and an author supplies it
+* all as data, no bespoke code per concept:
+*
+*   • formula     , the headline identity (LaTeX).
+*   • analogy     , the one-line intuition ("a combination is a team: order
+*                   doesn't matter").
+*   • calculator  , live input knobs + a worked computation that SHOWS its working
+*                   (every substitution + simplification), via kit/calc's Worked.
+*   • derivation  , the proof / why-it's-true, revealed on demand.
+*   • tricks      , the identities, shortcuts and traps that make someone fluent.
+*
+* One reusable component renders all of it (Brilliant-style concept card). Domains
+* declare their rules as data (see discrete/rules.ts) and drop them in a lab or a
+* lesson. Pure presentation over <Tex> + kit controls.
+*/
+/** Render a worked calculation's steps (LaTeX line + note, last one highlighted).
+*  The shared step view for both authored lessons and the dynamic solvers. */
+function WorkedSteps({ worked, accent = true }) {
+	return /* @__PURE__ */ jsx(StepList, {
+		steps: worked.steps,
+		accent
+	});
+}
+function StepList({ steps, accent }) {
+	return /* @__PURE__ */ jsx("ol", {
+		style: {
+			listStyle: "none",
+			margin: 0,
+			padding: 0,
+			display: "flex",
+			flexDirection: "column",
+			gap: 6
+		},
+		children: steps.map((s, i) => /* @__PURE__ */ jsxs("li", {
+			style: {
+				display: "flex",
+				flexWrap: "wrap",
+				alignItems: "baseline",
+				gap: "4px 14px",
+				padding: "5px 10px",
+				borderRadius: 8,
+				background: accent && i === steps.length - 1 ? "color-mix(in oklab, var(--stage-good) 14%, transparent)" : "transparent"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: { fontSize: 15 },
+				children: /* @__PURE__ */ jsx(Tex, { tex: s.tex })
+			}), s.note && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: 12.5,
+					color: "var(--stage-muted)"
+				},
+				children: s.note
+			})]
+		}, i))
+	});
+}
+/** The card body (no frame) — embed in a lesson, a RuleLab, or beside a widget. */
+function RuleCard({ rule }) {
+	const [vals, setVals] = useState(() => Object.fromEntries((rule.inputs ?? []).map((f) => [f.key, f.default])));
+	const [showProof, setShowProof] = useState(false);
+	const worked = useMemo(() => rule.compute ? rule.compute(vals) : null, [rule, vals]);
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			border: "1px solid var(--stage-grid)",
+			borderRadius: 14,
+			background: "var(--stage-bg)",
+			overflow: "hidden"
+		},
+		children: /* @__PURE__ */ jsxs("div", {
+			style: {
+				padding: "14px 16px",
+				display: "grid",
+				gap: 12
+			},
+			children: [
+				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("div", {
+					style: {
+						fontWeight: 800,
+						fontSize: 16
+					},
+					children: rule.name
+				}), rule.analogy && /* @__PURE__ */ jsxs("div", {
+					style: {
+						marginTop: 3,
+						fontSize: 13.5,
+						color: "var(--stage-muted)"
+					},
+					children: [/* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: 10,
+							fontWeight: 800,
+							letterSpacing: .4,
+							textTransform: "uppercase",
+							color: "var(--stage-accent)",
+							marginRight: 8
+						},
+						children: "analogy"
+					}), rule.analogy]
+				})] }),
+				/* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						justifyContent: "center",
+						padding: "8px 4px",
+						fontSize: 18
+					},
+					children: /* @__PURE__ */ jsx(Tex, {
+						tex: rule.formula,
+						block: true
+					})
+				}),
+				rule.figure != null && /* @__PURE__ */ jsx("div", {
+					style: {
+						display: "flex",
+						justifyContent: "center"
+					},
+					children: typeof rule.figure === "function" ? rule.figure(vals) : rule.figure
+				}),
+				rule.inputs && rule.inputs.length > 0 && worked && /* @__PURE__ */ jsxs("div", {
+					style: {
+						display: "grid",
+						gap: 10,
+						borderTop: "1px solid var(--stage-grid)",
+						paddingTop: 12
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							display: "flex",
+							flexWrap: "wrap",
+							gap: 14
+						},
+						children: rule.inputs.map((f) => /* @__PURE__ */ jsx(Stepper, {
+							label: f.label,
+							value: vals[f.key] ?? f.default,
+							min: f.min ?? 0,
+							max: f.max ?? 99,
+							step: f.step ?? 1,
+							onChange: (v) => setVals((s) => ({
+								...s,
+								[f.key]: v
+							}))
+						}, f.key))
+					}), /* @__PURE__ */ jsx(StepList, {
+						steps: worked.steps,
+						accent: true
+					})]
+				}),
+				rule.derivation && rule.derivation.length > 0 && /* @__PURE__ */ jsxs("div", {
+					style: {
+						borderTop: "1px solid var(--stage-grid)",
+						paddingTop: 10
+					},
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "lab-chip",
+						onClick: () => setShowProof((p) => !p),
+						"aria-expanded": showProof,
+						children: showProof ? "▾ why it works" : "▸ why it works"
+					}), showProof && /* @__PURE__ */ jsx("div", {
+						style: { marginTop: 8 },
+						children: /* @__PURE__ */ jsx(StepList, { steps: rule.derivation })
+					})]
+				}),
+				rule.tricks && rule.tricks.length > 0 && /* @__PURE__ */ jsxs("div", {
+					style: {
+						borderTop: "1px solid var(--stage-grid)",
+						paddingTop: 10
+					},
+					children: [/* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: 10,
+							fontWeight: 800,
+							letterSpacing: .4,
+							textTransform: "uppercase",
+							color: "var(--stage-muted)",
+							marginBottom: 6
+						},
+						children: "tricks & traps"
+					}), /* @__PURE__ */ jsx("ul", {
+						style: {
+							margin: 0,
+							paddingLeft: 18,
+							display: "grid",
+							gap: 4,
+							fontSize: 13.5
+						},
+						children: rule.tricks.map((t, i) => /* @__PURE__ */ jsx("li", { children: t }, i))
+					})]
+				})
+			]
+		})
+	});
+}
+/** A RuleCard wrapped in a LabFrame — the standalone lab / CMS-block form. */
+function RuleLab({ rule, title, prompt }) {
+	return /* @__PURE__ */ jsx(LabFrame, {
+		title: title ?? rule.name,
+		prompt: prompt ?? "Plug in numbers to see the rule work, then reveal why it is true.",
+		children: /* @__PURE__ */ jsx(RuleCard, { rule })
+	});
+}
+
+//#endregion
+export { RuleCard, RuleLab, WorkedSteps };

package/dist/kit/scale.mjs

@@ -9,7 +9,7 @@ const EDGE = "color-mix(in oklab, var(--stage-metal) 60%, black)";
 const SHEEN = "color-mix(in oklab, var(--stage-sheen) 70%, transparent)";
 const SHADE = "color-mix(in oklab, var(--stage-metal) 62%, black)";
 const GOOD = "var(--stage-good)";
-/** A solid rectangular bar (metal rod) between two points — reads as a rigid
+/** A solid rectangular bar (metal rod) between two points, reads as a rigid
 *  strut, not a string. Returns an SVG path for a filled quad of width `w`. */
 function barPath(x1, y1, x2, y2, w) {
 	const dx = x2 - x1, dy = y2 - y1;

package/dist/kit/scene-library.d.mts

@@ -0,0 +1,22 @@
+import { DataSceneSpec } from "./data-scene.mjs";
+import { ReactNode } from "react";
+
+//#region src/kit/scene-library.d.ts
+declare function loadSceneLibrary(): DataSceneSpec[];
+declare function saveSceneLibrary(specs: DataSceneSpec[]): void;
+/** Bulk-register saved skins. Call once at app boot: registerScenes(loadSceneLibrary()). */
+declare function registerScenes(specs: DataSceneSpec[]): void;
+interface SceneLibrary {
+  specs: DataSceneSpec[];
+  upsert: (spec: DataSceneSpec, prevName?: string) => void;
+  remove: (name: string) => void;
+}
+/** Load + register saved skins on mount; mutations persist and re-register. */
+declare function useSceneLibrary(): SceneLibrary;
+declare function SceneLibraryManager({
+  onUse
+}: {
+  onUse?: (spec: DataSceneSpec) => void;
+}): ReactNode;
+//#endregion
+export { SceneLibrary, SceneLibraryManager, loadSceneLibrary, registerScenes, saveSceneLibrary, useSceneLibrary };