@classytic/labs 0.1.0 → 0.2.0

package/dist/kit/coords.mjs

@@ -0,0 +1,192 @@
+'use client';
+
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Axes, Grid, Label, Segment, Stage } from "@classytic/stage";
+
+//#region src/kit/coords.tsx
+const EPS = 1e-9;
+/** The line through two points (vertical-safe). */
+function lineThrough(a, b) {
+	if (Math.abs(b.x - a.x) < EPS) return {
+		m: Infinity,
+		c: NaN,
+		vertical: a.x
+	};
+	const m = (b.y - a.y) / (b.x - a.x);
+	return {
+		m,
+		c: a.y - m * a.x
+	};
+}
+/** y on a line at x (NaN for a vertical line). */
+function yAt(l, x) {
+	return l.vertical !== void 0 ? NaN : l.m * x + l.c;
+}
+/** The line of gradient m through point p. */
+function lineFrom(m, p) {
+	return {
+		m,
+		c: p.y - m * p.x
+	};
+}
+/** The line parallel to `l` through p (same gradient). */
+function parallelThrough(l, p) {
+	if (l.vertical !== void 0) return {
+		m: Infinity,
+		c: NaN,
+		vertical: p.x
+	};
+	return lineFrom(l.m, p);
+}
+/** The line perpendicular to `l` through p (gradient −1/m; verticals ↔ horizontals). */
+function perpThrough(l, p) {
+	if (l.vertical !== void 0) return lineFrom(0, p);
+	if (Math.abs(l.m) < EPS) return {
+		m: Infinity,
+		c: NaN,
+		vertical: p.x
+	};
+	return lineFrom(-1 / l.m, p);
+}
+/** Where two lines cross (null if parallel). Vertical-safe. */
+function intersectLines(l1, l2) {
+	if (l1.vertical !== void 0 && l2.vertical !== void 0) return null;
+	if (l1.vertical !== void 0) return {
+		x: l1.vertical,
+		y: yAt(l2, l1.vertical)
+	};
+	if (l2.vertical !== void 0) return {
+		x: l2.vertical,
+		y: yAt(l1, l2.vertical)
+	};
+	if (Math.abs(l1.m - l2.m) < EPS) return null;
+	const x = (l2.c - l1.c) / (l1.m - l2.m);
+	return {
+		x,
+		y: yAt(l1, x)
+	};
+}
+function distance(a, b) {
+	return Math.hypot(b.x - a.x, b.y - a.y);
+}
+function midpoint(a, b) {
+	return {
+		x: (a.x + b.x) / 2,
+		y: (a.y + b.y) / 2
+	};
+}
+/** Round to a clean string, trims trailing zeros; up to `dp` decimals. */
+function num(n, dp = 2) {
+	if (!Number.isFinite(n)) return "∞";
+	const r = Math.round(n * 10 ** dp) / 10 ** dp;
+	return String(r);
+}
+/** "+ 3" / "− 3" (unicode minus), with an optional leading space. */
+function signed(n, dp = 2) {
+	return `${n < 0 ? "−" : "+"} ${num(Math.abs(n), dp)}`;
+}
+/** A gradient coefficient: "x", "−x", "2x", "½x" … (no leading +/−1 noise). */
+function coefX(m, dp = 2) {
+	if (Math.abs(m - 1) < EPS) return "x";
+	if (Math.abs(m + 1) < EPS) return "−x";
+	return `${num(m, dp)}x`;
+}
+/** Human-readable equation of a line: "y = 2x − 3", "x = 4", "y = 5". */
+function lineTex(l, dp = 2) {
+	if (l.vertical !== void 0) return `x = ${num(l.vertical, dp)}`;
+	if (Math.abs(l.m) < EPS) return `y = ${num(l.c, dp)}`;
+	if (Math.abs(l.c) < EPS) return `y = ${coefX(l.m, dp)}`;
+	return `y = ${coefX(l.m, dp)} ${signed(l.c, dp)}`;
+}
+/** Intercept form "x/a + y/b = 1" for a line cutting the axes at (a,0),(0,b). */
+function interceptTex(a, b, dp = 2) {
+	return `x/${num(a, dp)} + y/${num(b, dp)} = 1`;
+}
+/** Circle "(x − a)² + (y − b)² = r²" with centre (a,b). */
+function circleTex(a, b, r, dp = 2) {
+	return `${Math.abs(a) < EPS ? "x²" : `(x ${signed(-a, dp)})²`} + ${Math.abs(b) < EPS ? "y²" : `(y ${signed(-b, dp)})²`} = ${num(r * r, dp)}`;
+}
+/** Expanded circle x² + y² + Dx + Ey + F = 0 (the completing-the-square form). */
+function circleExpandedTex(a, b, r, dp = 2) {
+	const D = -2 * a, E = -2 * b, F = a * a + b * b - r * r;
+	return `x² + y²${Math.abs(D) < EPS ? "" : ` ${signed(D, dp)}x`.replace("+ ", "+ ").replace("− ", "− ")}${Math.abs(E) < EPS ? "" : ` ${signed(E, dp)}y`}${Math.abs(F) < EPS ? "" : ` ${signed(F, dp)}`} = 0`;
+}
+/** Snap a value to the nearest `step` (0 → no snap). */
+function snapTo(v, step = 0) {
+	return step > 0 ? Math.round(v / step) * step : v;
+}
+function snapPoint(p, step = 0) {
+	return {
+		x: snapTo(p.x, step),
+		y: snapTo(p.y, step)
+	};
+}
+/** The framed coordinate plane every coord-geometry lab draws on. */
+function CoordPlane({ view, height = 360, ariaLabel, step, stepX, stepY, pad, labels = true, preserveAspect = true, children }) {
+	return /* @__PURE__ */ jsxs(Stage, {
+		view,
+		height,
+		pad: pad ?? (labels ? 26 : 12),
+		preserveAspect,
+		ariaLabel,
+		children: [
+			/* @__PURE__ */ jsx(Grid, {
+				step,
+				stepX,
+				stepY
+			}),
+			/* @__PURE__ */ jsx(Axes, {
+				ticks: true,
+				step,
+				stepX,
+				stepY,
+				labels
+			}),
+			children
+		]
+	});
+}
+/** The rise/run right-triangle under a line segment, makes "gradient = Δy/Δx" visible. */
+function GradientTriangle({ a, b, color = "var(--stage-muted)", showLabels = true }) {
+	const corner = {
+		x: b.x,
+		y: a.y
+	};
+	const dx = b.x - a.x;
+	const dy = b.y - a.y;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Segment, {
+			from: a,
+			to: corner,
+			color,
+			weight: 1.5,
+			dashed: true
+		}),
+		/* @__PURE__ */ jsx(Segment, {
+			from: corner,
+			to: b,
+			color,
+			weight: 1.5,
+			dashed: true
+		}),
+		showLabels && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Label, {
+			x: (a.x + corner.x) / 2,
+			y: a.y,
+			text: `Δx = ${num(dx)}`,
+			color,
+			size: 11,
+			dy: dy >= 0 ? 14 : -8
+		}), /* @__PURE__ */ jsx(Label, {
+			x: corner.x,
+			y: (corner.y + b.y) / 2,
+			text: `Δy = ${num(dy)}`,
+			color,
+			size: 11,
+			dx: dx >= 0 ? 8 : -8,
+			anchor: dx >= 0 ? "start" : "end"
+		})] })
+	] });
+}
+
+//#endregion
+export { CoordPlane, GradientTriangle, circleExpandedTex, circleTex, distance, interceptTex, intersectLines, lineFrom, lineTex, lineThrough, midpoint, num, parallelThrough, perpThrough, snapPoint, snapTo };

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

@@ -0,0 +1,27 @@
+import { SceneMeta } from "./scenes.mjs";
+
+//#region src/kit/data-scene.d.ts
+type DataSceneSpec = {
+  name: string;
+  label?: string;
+  kind: 'count';
+  icon: string;
+} | {
+  name: string;
+  label?: string;
+  kind: 'level';
+  icon: string;
+  slots?: number;
+} | {
+  name: string;
+  label?: string;
+  kind: 'level';
+  shape: 'box' | 'cup' | 'circle';
+  color?: string;
+};
+/** Build a registry scene from a data spec, no render code authored. */
+declare function dataScene(spec: DataSceneSpec): SceneMeta;
+/** Build AND register a data scene, so it appears in every lab + authoring picker. */
+declare function registerDataScene(spec: DataSceneSpec): SceneMeta;
+//#endregion
+export { DataSceneSpec, dataScene, registerDataScene };

package/dist/kit/data-scene.mjs

@@ -0,0 +1,199 @@
+'use client';
+
+import { registerScene } from "./scenes.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/data-scene.tsx
+const clamp01 = (n) => Math.max(0, Math.min(1, n));
+const Cap = ({ label }) => label ? /* @__PURE__ */ jsx("span", {
+	style: {
+		fontSize: 12,
+		fontWeight: 700,
+		color: "var(--stage-fg)"
+	},
+	children: label
+}) : null;
+/** N icons, wrapped to fit; the last `highlight` stay vivid, the rest desaturate. */
+function iconCountRender(icon) {
+	return (q) => {
+		const n = Math.max(0, Math.round(q.count ?? 0));
+		const hl = q.highlight ?? 0;
+		const w = q.width ?? 120, h = q.height ?? 130;
+		const size = Math.max(12, Math.min(30, Math.sqrt(w * (h - 24) * .62 / Math.max(1, n))));
+		return /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				justifyItems: "center",
+				gap: 4
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					role: "img",
+					"aria-label": `${n} ${icon}`,
+					style: {
+						width: w,
+						minHeight: h - (q.label ? 22 : 6),
+						display: "flex",
+						flexWrap: "wrap",
+						alignContent: "center",
+						justifyContent: "center",
+						gap: 2
+					},
+					children: Array.from({ length: n }).map((_, i) => /* @__PURE__ */ jsx("span", {
+						style: {
+							fontSize: size,
+							lineHeight: 1,
+							opacity: i >= n - hl ? 1 : .92,
+							filter: i < n - hl ? "saturate(0.5)" : "none",
+							animation: `data-pop 0.3s ease-out ${i * .03}s backwards`
+						},
+						children: icon
+					}, i))
+				}),
+				/* @__PURE__ */ jsx(Cap, { label: q.label }),
+				/* @__PURE__ */ jsx("style", { children: `@keyframes data-pop{from{opacity:0;transform:scale(0.4)}to{opacity:1}}` })
+			]
+		});
+	};
+}
+/** A fixed row of `slots` icons; round(frac·slots) are lit, the rest greyed (a rating). */
+function iconLevelRender(icon, slots) {
+	return (q) => {
+		const lit = Math.round(clamp01(q.frac ?? 0) * slots);
+		const w = q.width ?? 120;
+		return /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "grid",
+				justifyItems: "center",
+				gap: 6
+			},
+			children: [/* @__PURE__ */ jsx("div", {
+				role: "img",
+				"aria-label": `${lit} of ${slots}`,
+				style: {
+					width: w,
+					display: "flex",
+					flexWrap: "wrap",
+					justifyContent: "center",
+					gap: 4
+				},
+				children: Array.from({ length: slots }).map((_, i) => /* @__PURE__ */ jsx("span", {
+					style: {
+						fontSize: 26,
+						opacity: i < lit ? 1 : .25,
+						filter: i < lit ? "none" : "grayscale(1)",
+						transition: "opacity 0.3s, filter 0.3s"
+					},
+					children: icon
+				}, i))
+			}), /* @__PURE__ */ jsx(Cap, { label: q.label })]
+		});
+	};
+}
+/** A coloured shape that fills with the fraction: a box / cup (fill up) or circle (pie). */
+function shapeLevelRender(shape, color) {
+	return (q) => {
+		const w = q.width ?? 120, h = q.height ?? 150;
+		const f = clamp01(q.frac ?? 0);
+		const c = color ?? q.color ?? "var(--stage-accent)";
+		const FG = "var(--stage-fg)", MUTED = "var(--stage-muted)";
+		const aria = `${shape} ${f * 100 | 0}% full`;
+		const lbl = q.label ? /* @__PURE__ */ jsx("text", {
+			x: w / 2,
+			y: h - 6,
+			fontSize: 12,
+			fontWeight: 700,
+			fill: FG,
+			textAnchor: "middle",
+			children: q.label
+		}) : null;
+		if (shape === "circle") {
+			const cx = w / 2, cy = (h - (q.label ? 22 : 8)) / 2 + 4, r = Math.min(cx, cy) - 8;
+			const a = f * 2 * Math.PI, ex = cx + r * Math.sin(a), ey = cy - r * Math.cos(a), large = f > .5 ? 1 : 0;
+			const d = f <= 0 ? "" : f >= 1 ? `M ${cx} ${cy - r} A ${r} ${r} 0 1 1 ${cx - .01} ${cy - r} Z` : `M ${cx} ${cy} L ${cx} ${cy - r} A ${r} ${r} 0 ${large} 1 ${ex} ${ey} Z`;
+			return /* @__PURE__ */ jsxs("svg", {
+				width: w,
+				height: h,
+				viewBox: `0 0 ${w} ${h}`,
+				role: "img",
+				"aria-label": aria,
+				children: [
+					/* @__PURE__ */ jsx("circle", {
+						cx,
+						cy,
+						r,
+						fill: "color-mix(in oklab, var(--stage-fg) 10%, transparent)",
+						stroke: MUTED,
+						strokeWidth: 1.5
+					}),
+					d && /* @__PURE__ */ jsx("path", {
+						d,
+						fill: c,
+						fillOpacity: .85
+					}),
+					lbl
+				]
+			});
+		}
+		const bw = shape === "cup" ? Math.min(w - 24, 78) : w - 36, bx = (w - bw) / 2;
+		const top = 12, bot = h - (q.label ? 28 : 12);
+		const fillTop = bot - f * (bot - top);
+		const outline = shape === "cup" ? `M ${bx + 5} ${top} L ${bx} ${bot} L ${bx + bw} ${bot} L ${bx + bw - 5} ${top}` : `M ${bx} ${top} L ${bx} ${bot} L ${bx + bw} ${bot} L ${bx + bw} ${top}`;
+		return /* @__PURE__ */ jsxs("svg", {
+			width: w,
+			height: h,
+			viewBox: `0 0 ${w} ${h}`,
+			role: "img",
+			"aria-label": aria,
+			children: [
+				/* @__PURE__ */ jsx("rect", {
+					x: bx,
+					y: fillTop,
+					width: bw,
+					height: Math.max(0, bot - fillTop),
+					fill: c,
+					fillOpacity: .5,
+					style: { transition: "y 0.5s ease-out, height 0.5s ease-out" }
+				}),
+				/* @__PURE__ */ jsx("path", {
+					d: outline,
+					fill: "none",
+					stroke: MUTED,
+					strokeWidth: 2.5,
+					strokeLinejoin: "round"
+				}),
+				lbl
+			]
+		});
+	};
+}
+/** Build a registry scene from a data spec, no render code authored. */
+function dataScene(spec) {
+	if (spec.kind === "count") return {
+		name: spec.name,
+		kind: "count",
+		label: spec.label ?? spec.name,
+		render: iconCountRender(spec.icon)
+	};
+	if ("icon" in spec) return {
+		name: spec.name,
+		kind: "level",
+		label: spec.label ?? spec.name,
+		render: iconLevelRender(spec.icon, spec.slots ?? 5)
+	};
+	return {
+		name: spec.name,
+		kind: "level",
+		label: spec.label ?? spec.name,
+		render: shapeLevelRender(spec.shape, spec.color)
+	};
+}
+/** Build AND register a data scene, so it appears in every lab + authoring picker. */
+function registerDataScene(spec) {
+	const meta = dataScene(spec);
+	registerScene(meta);
+	return meta;
+}
+
+//#endregion
+export { dataScene, registerDataScene };

package/dist/kit/diagram.mjs

@@ -1,8 +1,9 @@
 'use client';
 
+import { BulbGlyph, CellGlyph, ResistorGlyph, SwitchGlyph } from "./electronics.mjs";
 import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Label, Polygon, Segment, Vector, useCoords } from "@classytic/stage";
+import { Label, Segment, Vector, useCoords } from "@classytic/stage";
 
 //#region src/kit/diagram.tsx
 /**
@@ -39,6 +40,12 @@ function AngleArc({ at, from, to, rPx = 26, color = "var(--stage-fg)", label })
 		fontWeight: 600,
 		textAnchor: "middle",
 		dominantBaseline: "middle",
+		style: {
+			paintOrder: "stroke",
+			stroke: "var(--stage-bg)",
+			strokeWidth: 3.5,
+			strokeLinejoin: "round"
+		},
 		children: label
 	})] });
 }
@@ -67,7 +74,7 @@ function RightAngleMark({ at, u, v, sizePx = 12, color = "var(--stage-muted)" })
 }
 /**
 * An arrow (tail → tail+comp) with an optional tip label and optional dashed
-* x/y component decomposition — the SVG equivalent of the old canvas
+* x/y component decomposition, the SVG equivalent of the old canvas
 * `drawVector(..., { label, components })`.
 */
 function LabeledVector({ tail = {
@@ -122,55 +129,109 @@ function LabeledVector({ tail = {
 		})()
 	] });
 }
-/** A schematic resistor: an outlined box (filled with the canvas bg) + a label
-*  above and an optional reading below. The SVG equivalent of the old canvas
-*  `drawResistor`. */
-function ResistorBox({ center, w, h, color = "var(--stage-accent)", label, reading }) {
-	const x0 = center.x - w / 2, x1 = center.x + w / 2;
-	const y0 = center.y - h / 2, y1 = center.y + h / 2;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Polygon, {
-			points: [
-				{
-					x: x0,
-					y: y0
-				},
-				{
-					x: x1,
-					y: y0
-				},
-				{
-					x: x1,
-					y: y1
-				},
-				{
-					x: x0,
-					y: y1
-				}
-			],
-			color,
-			fill: "var(--stage-bg)",
-			fillOpacity: 1,
-			weight: 2
-		}),
-		label && /* @__PURE__ */ jsx(Label, {
-			x: center.x,
-			y: y1,
-			text: label,
-			color: "var(--stage-fg)",
-			size: 11,
-			dy: -12
-		}),
-		reading && /* @__PURE__ */ jsx(Label, {
-			x: center.x,
-			y: y0,
-			text: reading,
-			color,
-			size: 11,
-			dy: 16
+/**
+* Math-coordinate ADAPTERS over the canonical pixel-space electronics glyph library
+* (kit/electronics.tsx). A lab drawing on a math-unit <Stage> places a real
+* schematic symbol by giving a `center` in view units; the adapter projects to
+* pixels and renders the ONE canonical glyph, so there is a single definition of
+* each symbol across every circuit lab. `liveAt`/state props drive the glyph.
+*/
+function ResistorBox({ center, w, color = "var(--stage-fg)", label, reading, live }) {
+	const c = useCoords();
+	const [cx, cy] = c.toPx(center.x, center.y);
+	const half = Math.max(c.sx(w / 2), 24);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ResistorGlyph, {
+		cx,
+		cy,
+		half,
+		live,
+		label
+	}), reading && /* @__PURE__ */ jsx(Label, {
+		x: center.x,
+		y: center.y,
+		text: reading,
+		color,
+		size: 11,
+		dy: 22
+	})] });
+}
+/** Rotate a glyph 90° for a vertical wire, keeping its label horizontal (rendered separately). */
+function Oriented({ cx, cy, orient, label, glyph }) {
+	if (orient === "h") return /* @__PURE__ */ jsx(Fragment, { children: glyph(true) });
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("g", {
+		transform: `rotate(90 ${cx} ${cy})`,
+		children: glyph(false)
+	}), label && /* @__PURE__ */ jsx("text", {
+		x: cx + 16,
+		y: cy + 4,
+		fill: "var(--stage-fg)",
+		fontSize: 11,
+		fontWeight: 600,
+		textAnchor: "start",
+		style: { pointerEvents: "none" },
+		children: label
+	})] });
+}
+/** Cell / battery at a math `center`; `half` (units) → terminal reach. `cells` > 1 = a battery. */
+function CellBox({ center, half, live, label, cells, orient = "h" }) {
+	const c = useCoords();
+	const [cx, cy] = c.toPx(center.x, center.y);
+	const h = Math.max(c.sx(half), 22);
+	return /* @__PURE__ */ jsx(Oriented, {
+		cx,
+		cy,
+		orient,
+		label,
+		glyph: (s) => /* @__PURE__ */ jsx(CellGlyph, {
+			cx,
+			cy,
+			half: h,
+			live,
+			label: s ? label : void 0,
+			cells
 		})
-	] });
+	});
+}
+/** Filament lamp at a math `center`; `brightness` 0..1 glows it. */
+function BulbBox({ center, half, live, brightness, label, orient = "h" }) {
+	const c = useCoords();
+	const [cx, cy] = c.toPx(center.x, center.y);
+	const h = Math.max(c.sx(half), 22);
+	return /* @__PURE__ */ jsx(Oriented, {
+		cx,
+		cy,
+		orient,
+		label,
+		glyph: (s) => /* @__PURE__ */ jsx(BulbGlyph, {
+			cx,
+			cy,
+			half: h,
+			live,
+			brightness,
+			label: s ? label : void 0
+		})
+	});
+}
+/** SPST switch at a math `center`; `closed` lays the lever down. */
+function SwitchBox({ center, half, live, closed, label, orient = "h" }) {
+	const c = useCoords();
+	const [cx, cy] = c.toPx(center.x, center.y);
+	const h = Math.max(c.sx(half), 22);
+	return /* @__PURE__ */ jsx(Oriented, {
+		cx,
+		cy,
+		orient,
+		label,
+		glyph: (s) => /* @__PURE__ */ jsx(SwitchGlyph, {
+			cx,
+			cy,
+			half: h,
+			live,
+			closed,
+			label: s ? label : void 0
+		})
+	});
 }
 
 //#endregion
-export { AngleArc, LabeledVector, ResistorBox, RightAngleMark };
+export { AngleArc, BulbBox, CellBox, LabeledVector, ResistorBox, RightAngleMark, SwitchBox };