@classytic/labs 0.1.0 → 0.2.0

package/dist/kit/logic-gates.mjs

@@ -33,16 +33,36 @@ function gatePorts(type, x, y, s) {
 		}
 	};
 }
+/** Where a small TYPE label (AND/OR/…) sits INSIDE the gate body: resolved per shape so it lands
+*  on the visual centroid (the D-body of AND, the right-shifted bulge of OR/XOR, the triangle of
+*  NOT) instead of overlapping an edge. */
+function gateLabelPos(type, x, y, s) {
+	const base = baseOf(type);
+	const cy = y + s / 2;
+	if (base === "OR" || base === "XOR") return {
+		x: x + .46 * s,
+		y: cy
+	};
+	if (base === "NOT") return {
+		x: x + .3 * s,
+		y: cy
+	};
+	return {
+		x: x + .38 * s,
+		y: cy
+	};
+}
 /** A logic gate glyph. `live` = its OUTPUT is high. */
 function GateGlyph({ x, y, size: s, type, live, label }) {
 	const base = baseOf(type);
-	const stroke = METAL;
+	const stroke = live ? LIVE : METAL;
+	const fill = live ? "color-mix(in oklab, var(--stage-live) 14%, var(--stage-bg))" : BG;
 	const ports = gatePorts(type, x, y, s);
 	const cy = y + s / 2;
 	let body;
 	if (base === "AND") body = /* @__PURE__ */ jsx("path", {
 		d: `M${x},${y} H${x + .36 * s} A${.5 * s},${.5 * s} 0 0 1 ${x + .36 * s},${y + s} H${x} Z`,
-		fill: BG,
+		fill,
 		stroke,
 		strokeWidth: 2,
 		strokeLinejoin: "round"
@@ -51,26 +71,19 @@ function GateGlyph({ x, y, size: s, type, live, label }) {
 		const ox = base === "XOR" ? x + .08 * s : x;
 		body = /* @__PURE__ */ jsx("path", {
 			d: `M${ox},${y} C${ox + .22 * s},${y + .16 * s} ${ox + .22 * s},${y + .84 * s} ${ox},${y + s} C${ox + .45 * s},${y + s} ${ox + .72 * s},${y + .82 * s} ${x + .86 * s},${cy} C${ox + .72 * s},${y + .18 * s} ${ox + .45 * s},${y} ${ox},${y} Z`,
-			fill: BG,
+			fill,
 			stroke,
 			strokeWidth: 2,
 			strokeLinejoin: "round"
 		});
 	} else body = /* @__PURE__ */ jsx("path", {
 		d: `M${x + .06 * s},${y} L${x + .7 * s},${cy} L${x + .06 * s},${y + s} Z`,
-		fill: BG,
+		fill,
 		stroke,
 		strokeWidth: 2,
 		strokeLinejoin: "round"
 	});
 	return /* @__PURE__ */ jsxs("g", { children: [
-		live && /* @__PURE__ */ jsx("circle", {
-			cx: x + .46 * s,
-			cy,
-			r: s * .62,
-			fill: LIVE,
-			opacity: .12
-		}),
 		base === "XOR" && /* @__PURE__ */ jsx("path", {
 			d: `M${x - .02 * s},${y} C${x + .2 * s},${y + .16 * s} ${x + .2 * s},${y + .84 * s} ${x - .02 * s},${y + s}`,
 			fill: "none",
@@ -103,57 +116,45 @@ function GateGlyph({ x, y, size: s, type, live, label }) {
 			strokeWidth: 1.4,
 			strokeLinecap: "round"
 		}),
-		label && /* @__PURE__ */ jsx("text", {
-			x: ports.output.x - (base === "NOT" ? .42 : .5) * s,
-			y: cy,
-			fill: FG,
-			fontSize: Math.max(8, s * .22),
-			fontWeight: 700,
-			textAnchor: "middle",
-			dominantBaseline: "central",
-			style: { pointerEvents: "none" },
-			children: label
-		})
+		label && (() => {
+			const lp = gateLabelPos(type, x, y, s);
+			return /* @__PURE__ */ jsx("text", {
+				x: lp.x,
+				y: lp.y,
+				fill: FG,
+				fontSize: Math.max(7, s * .17),
+				fontWeight: 700,
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				style: { pointerEvents: "none" },
+				children: label
+			});
+		})()
 	] });
 }
-/** An output LED — glows `color` when on, with a soft halo + sheen; dim ring off. */
+/** An output LED: a clean filled disc (lit = `color`, idle = a faint outlined disc). No glow. */
 function Lamp({ cx, cy, r, on, color = LIVE, label }) {
-	const lit = color;
 	return /* @__PURE__ */ jsxs("g", { children: [
-		on && /* @__PURE__ */ jsx("circle", {
-			cx,
-			cy,
-			r: r * 2.1,
-			fill: lit,
-			opacity: .18
-		}),
-		on && /* @__PURE__ */ jsx("circle", {
-			cx,
-			cy,
-			r: r * 1.45,
-			fill: lit,
-			opacity: .28
-		}),
 		/* @__PURE__ */ jsx("circle", {
 			cx,
 			cy,
 			r,
-			fill: on ? lit : "color-mix(in oklab, var(--stage-metal) 22%, transparent)",
-			stroke: on ? lit : METAL,
+			fill: on ? color : "color-mix(in oklab, var(--stage-metal) 14%, var(--stage-bg))",
+			stroke: on ? color : METAL,
 			strokeWidth: 1.5
 		}),
 		/* @__PURE__ */ jsx("circle", {
-			cx: cx - r * .3,
-			cy: cy - r * .32,
-			r: r * .34,
+			cx: cx - r * .28,
+			cy: cy - r * .3,
+			r: r * .28,
 			fill: SHEEN,
-			opacity: on ? .8 : .3
+			opacity: on ? .5 : .2
 		}),
 		label && /* @__PURE__ */ jsx("text", {
 			x: cx,
-			y: cy + r + 4,
+			y: cy + r + 5,
 			fill: FG,
-			fontSize: Math.max(8, r * .9),
+			fontSize: Math.max(8, r * .85),
 			fontWeight: 700,
 			textAnchor: "middle",
 			dominantBaseline: "hanging",
@@ -162,6 +163,204 @@ function Lamp({ cx, cy, r, on, color = LIVE, label }) {
 		})
 	] });
 }
+/** Which of segments a–g are lit for each hex digit 0–F (decoder truth, for a 7-seg display). */
+const SEG_MAP = [
+	[
+		1,
+		1,
+		1,
+		1,
+		1,
+		1,
+		0
+	],
+	[
+		0,
+		1,
+		1,
+		0,
+		0,
+		0,
+		0
+	],
+	[
+		1,
+		1,
+		0,
+		1,
+		1,
+		0,
+		1
+	],
+	[
+		1,
+		1,
+		1,
+		1,
+		0,
+		0,
+		1
+	],
+	[
+		0,
+		1,
+		1,
+		0,
+		0,
+		1,
+		1
+	],
+	[
+		1,
+		0,
+		1,
+		1,
+		0,
+		1,
+		1
+	],
+	[
+		1,
+		0,
+		1,
+		1,
+		1,
+		1,
+		1
+	],
+	[
+		1,
+		1,
+		1,
+		0,
+		0,
+		0,
+		0
+	],
+	[
+		1,
+		1,
+		1,
+		1,
+		1,
+		1,
+		1
+	],
+	[
+		1,
+		1,
+		1,
+		1,
+		0,
+		1,
+		1
+	],
+	[
+		1,
+		1,
+		1,
+		0,
+		1,
+		1,
+		1
+	],
+	[
+		0,
+		0,
+		1,
+		1,
+		1,
+		1,
+		1
+	],
+	[
+		1,
+		0,
+		0,
+		1,
+		1,
+		1,
+		0
+	],
+	[
+		0,
+		1,
+		1,
+		1,
+		1,
+		0,
+		1
+	],
+	[
+		1,
+		0,
+		0,
+		1,
+		1,
+		1,
+		1
+	],
+	[
+		1,
+		0,
+		0,
+		0,
+		1,
+		1,
+		1
+	]
+].map((r) => r.map(Boolean));
+function digitSegments(value) {
+	return SEG_MAP[(value % 16 + 16) % 16];
+}
+/**
+* A seven-segment display digit. Drive it with a `value` (0–15 → 0–F) or explicit `segs`
+* (a..g booleans). Lit segments glow in the display colour; dark segments are a faint ghost,
+* so you read it like a real LED display. This is the output for binary/decoder/DLD labs.
+*/
+function SevenSegment({ x, y, w = 46, h = 80, value, segs, color = "var(--stage-warn)" }) {
+	const on = segs ?? (value !== void 0 ? digitSegments(value) : [
+		false,
+		false,
+		false,
+		false,
+		false,
+		false,
+		false
+	]);
+	const t = Math.min(w, h) * .13;
+	const off = "color-mix(in oklab, var(--stage-metal) 16%, transparent)";
+	const seg = (key, lit, x1, y1, x2, y2) => /* @__PURE__ */ jsx("line", {
+		x1,
+		y1,
+		x2,
+		y2,
+		stroke: lit ? color : off,
+		strokeWidth: t,
+		strokeLinecap: "round",
+		opacity: lit ? 1 : .55
+	}, key);
+	const midY = y + h / 2;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("rect", {
+			x: x - t,
+			y: y - t,
+			width: w + 2 * t,
+			height: h + 2 * t,
+			rx: 6,
+			fill: "color-mix(in oklab, var(--stage-bg) 80%, var(--stage-metal))",
+			stroke: "var(--stage-grid)",
+			strokeWidth: 1
+		}),
+		seg("a", on[0], x + t, y, x + w - t, y),
+		seg("b", on[1], x + w, y + t, x + w, midY - t * .5),
+		seg("c", on[2], x + w, midY + t * .5, x + w, y + h - t),
+		seg("d", on[3], x + t, y + h, x + w - t, y + h),
+		seg("e", on[4], x, midY + t * .5, x, y + h - t),
+		seg("f", on[5], x, y + t, x, midY - t * .5),
+		seg("g", on[6], x + t, midY, x + w - t, midY)
+	] });
+}
 /** An input switch (toggle). Render inside a `<g onClick>` in the lab for taps. */
 function ToggleSwitch({ x, y, w, h, on, label }) {
 	const r = h / 2;
@@ -207,4 +406,4 @@ function ToggleSwitch({ x, y, w, h, on, label }) {
 }
 
 //#endregion
-export { GateGlyph, Lamp, ToggleSwitch, gatePorts };
+export { GateGlyph, Lamp, SevenSegment, ToggleSwitch, gatePorts };

package/dist/kit/palette.mjs

@@ -0,0 +1,26 @@
+//#region src/kit/palette.ts
+/**
+* Categorical colour palette, theme-aware. The eight hues live as CSS custom
+* properties (`--stage-cat-1`..`--stage-cat-8`) in @classytic/stage's styles.css,
+* with tuned LIGHT (:root) and DARK (.dark) values, so a series/group colour
+* adapts to the theme instead of being a fixed hex that only reads on one
+* background. Labs import these instead of hardcoding their own hex arrays.
+*
+*   • SVG / CSS labs        → CATEGORICAL (var(--stage-cat-N) strings)
+*   • canvas labs that read tokens via getComputedStyle().getPropertyValue()
+*                           → CATEGORICAL_TOKENS (the bare custom-property names)
+*
+* cat-1/2/3 align with --stage-accent / --stage-accent-2 / --stage-good.
+*/
+const N = 8;
+/** `var(--stage-cat-N)` strings — drop straight into SVG fill/stroke or CSS. */
+const CATEGORICAL = Array.from({ length: N }, (_, i) => `var(--stage-cat-${i + 1})`);
+/** Bare custom-property names — for canvas labs that resolve via getPropertyValue. */
+const CATEGORICAL_TOKENS = Array.from({ length: N }, (_, i) => `--stage-cat-${i + 1}`);
+/** The i-th categorical colour (var string), wrapping. */
+const catColor = (i) => CATEGORICAL[(i % N + N) % N];
+/** The i-th categorical token name (for canvas getPropertyValue), wrapping. */
+const catToken = (i) => CATEGORICAL_TOKENS[(i % N + N) % N];
+
+//#endregion
+export { CATEGORICAL, catColor, catToken };

package/dist/kit/pedagogy.d.mts

@@ -36,7 +36,7 @@ interface Hints {
   reveal: () => void;
   reset: () => void;
 }
-/** Progressive hint state — reveal one at a time. */
+/** Progressive hint state, reveal one at a time. */
 declare function useHints(hints?: string[]): Hints;
 /** Learner-visible goal banner ("You'll be able to …"). */
 declare function Objectives({
@@ -44,7 +44,7 @@ declare function Objectives({
 }: {
   items?: string[];
 }): ReactNode;
-/** The hint ladder — revealed hints + a "need a hint?" button while more remain. */
+/** The hint ladder, revealed hints + a "need a hint?" button while more remain. */
 declare function HintLadder({
   hints
 }: {
@@ -104,14 +104,14 @@ interface RevealSolutionProps {
   solution: ReactNode;
   /** Gate the button (e.g. only after a wrong attempt). Default: always shown. */
   available?: boolean;
-  /** Fired ONCE when the learner reveals — let the lab dock the score (peek ≠ solve). */
+  /** Fired ONCE when the learner reveals, let the lab dock the score (peek ≠ solve). */
   onReveal?: () => void;
   buttonLabel?: string;
   /** The warning shown with the solution. */
   note?: string;
 }
 /**
- * The shared "Show answer" escape hatch — so no lab is a dead-end "wrong/right".
+ * The shared "Show answer" escape hatch, so no lab is a dead-end "wrong/right".
  * Manages its own shown/hidden; `key` it (e.g. per step/event) to reset between
  * questions. Revealing is a deliberate peek: it warns and reports via `onReveal`.
  */

package/dist/kit/pedagogy.mjs

@@ -6,23 +6,23 @@ import { useLearner } from "@classytic/stage";
 
 //#region src/kit/pedagogy.tsx
 /**
-* Pedagogy/assessment kit — the formative-feedback layer every lab shares.
+* Pedagogy/assessment kit, the formative-feedback layer every lab shares.
 *
 * `LabMeta` (objectives, hints, misconceptions, successCriteria) was authored
 * but never rendered. This turns it into the Brilliant-style loop:
-*   • `useCheckpoint` — the ONE assessment seam: report once on first solve,
+*   • `useCheckpoint`, the ONE assessment seam: report once on first solve,
 *     with a hint penalty folded into the score. Kills the per-lab
 *     `if (x === answer) report(...)` + done-ref boilerplate.
-*   • `useHints` + `<HintLadder>` — progressive reveal; each hint taken docks
+*   • `useHints` + `<HintLadder>`, progressive reveal; each hint taken docks
 *     the score (pass `hints.count` to useCheckpoint).
-*   • `<Objectives>` — the learner-visible goal banner.
-*   • `<Feedback>` — unifies success / try-again / misconception note (the
+*   • `<Objectives>`, the learner-visible goal banner.
+*   • `<Feedback>`, unifies success / try-again / misconception note (the
 *     misconception is a boolean the lab computes from resolved state).
-*   • `<RevealSolution>` — the shared "Show answer" escape hatch every lab gets:
+*   • `<RevealSolution>`, the shared "Show answer" escape hatch every lab gets:
 *     a button → a warned solution panel, firing `onReveal` once so the lab can
 *     dock the score (peeking ≠ solving). No more dead-end "wrong/right".
 *
-* Domain glue over stage's learner seam — stays in labs so stage is a pure
+* Domain glue over stage's learner seam, stays in labs so stage is a pure
 * engine; imports only `useLearner` from @classytic/stage.
 */
 /** Report completion once, the first time `solved` becomes true. */
@@ -69,7 +69,7 @@ function useCheckpoint({ solved, activity, score, hintsUsed = 0, hintPenalty = .
 		reported
 	};
 }
-/** Progressive hint state — reveal one at a time. */
+/** Progressive hint state, reveal one at a time. */
 function useHints(hints = []) {
 	const [n, setN] = useState(0);
 	return {
@@ -91,7 +91,7 @@ function Objectives({ items }) {
 		}), /* @__PURE__ */ jsx("ul", { children: items.map((o, i) => /* @__PURE__ */ jsx("li", { children: o }, i)) })]
 	});
 }
-/** The hint ladder — revealed hints + a "need a hint?" button while more remain. */
+/** The hint ladder, revealed hints + a "need a hint?" button while more remain. */
 function HintLadder({ hints }) {
 	if (hints.revealed.length === 0 && !hints.hasMore) return null;
 	return /* @__PURE__ */ jsxs("div", {
@@ -147,16 +147,20 @@ function ChallengeCard({ questions, state, title = "Predict first" }) {
 					state.total
 				]
 			})]
-		}), questions.map((q) => {
+		}), questions.map((q, i) => {
 			const picked = state.picks[q.id];
 			const answered = picked != null;
 			const correct = picked === q.answer;
 			return /* @__PURE__ */ jsxs("div", {
 				className: "lab-challenge-q",
 				children: [
-					/* @__PURE__ */ jsx("span", {
+					/* @__PURE__ */ jsxs("span", {
 						className: "lab-challenge-prompt",
-						children: q.prompt
+						children: [questions.length > 1 && /* @__PURE__ */ jsx("span", {
+							className: "lab-challenge-num",
+							"aria-hidden": true,
+							children: i + 1
+						}), /* @__PURE__ */ jsx("span", { children: q.prompt })]
 					}),
 					/* @__PURE__ */ jsx("div", {
 						className: "lab-choices",
@@ -185,7 +189,7 @@ function ChallengeCard({ questions, state, title = "Predict first" }) {
 						className: "lab-pill",
 						"data-state": "no",
 						role: "status",
-						children: "Not yet — try again"
+						children: "Not yet, try again"
 					}))
 				]
 			}, q.id);
@@ -244,7 +248,7 @@ function AskBox({ prompt, placeholder = "your answer", check, activity }) {
 						className: "lab-pill",
 						"data-state": "no",
 						role: "status",
-						children: "Not yet — try again"
+						children: "Not yet, try again"
 					})
 				]
 			}),
@@ -263,7 +267,7 @@ function AskBox({ prompt, placeholder = "your answer", check, activity }) {
 	});
 }
 /** Unified success / misconception / try-again feedback. */
-function Feedback({ ok, misconception, okText = "Correct", tryText = "Not yet — keep going" }) {
+function Feedback({ ok, misconception, okText = "Correct", tryText = "Not yet, keep going" }) {
 	if (ok) return /* @__PURE__ */ jsxs("span", {
 		className: "lab-pill",
 		"data-state": "ok",
@@ -288,11 +292,11 @@ function Feedback({ ok, misconception, okText = "Correct", tryText = "Not yet
 	});
 }
 /**
-* The shared "Show answer" escape hatch — so no lab is a dead-end "wrong/right".
+* The shared "Show answer" escape hatch, so no lab is a dead-end "wrong/right".
 * Manages its own shown/hidden; `key` it (e.g. per step/event) to reset between
 * questions. Revealing is a deliberate peek: it warns and reports via `onReveal`.
 */
-function RevealSolution({ solution, available = true, onReveal, buttonLabel = "Show answer", note = "Peeking — this one won’t count as solved on your own." }) {
+function RevealSolution({ solution, available = true, onReveal, buttonLabel = "Show answer", note = "Peeking, this one won’t count as solved on your own." }) {
 	const [shown, setShown] = useState(false);
 	if (shown) return /* @__PURE__ */ jsxs("div", {
 		className: "lab-solution",

package/dist/kit/play.d.mts

@@ -6,7 +6,7 @@ interface PlayGate {
   inView: boolean;
   playing: boolean;
   setPlaying: (p: boolean) => void;
-  /** playing && inView — pass to useFrameLoop's `running`. */
+  /** playing && inView, pass to useFrameLoop's `running`. */
   running: boolean;
 }
 declare function usePlayGate(autoPlay?: boolean): PlayGate;

package/dist/kit/play.mjs

@@ -8,9 +8,9 @@ import { useInView } from "@classytic/stage";
 /**
 * Play-gate for hand-driven sim labs (those running their own useFrameLoop rather
 * than going through <Scene>, which already has this). It does two things:
-*   • off-screen pause — the loop only runs while the figure is visible, so a page
+*   • off-screen pause, the loop only runs while the figure is visible, so a page
 *     of labs doesn't pin the CPU;
-*   • press-to-start — an ambient animation shouldn't auto-run; show a ▶ Play
+*   • press-to-start, an ambient animation shouldn't auto-run; show a ▶ Play
 *     overlay until the learner starts it.
 *
 * Usage:
@@ -19,7 +19,7 @@ import { useInView } from "@classytic/stage";
 *   …  <PlayWrap gate={gate}>{figureSvg}</PlayWrap>
 *
 * For a USER-TRIGGERED lab (a Run/Drop button already decides when to animate),
-* skip the overlay — just gate the existing condition on visibility with `useInView`.
+* skip the overlay, just gate the existing condition on visibility with `useInView`.
 */
 function usePlayGate(autoPlay = false) {
 	const { ref, inView } = useInView();

package/dist/kit/predict.d.mts

@@ -0,0 +1,55 @@
+import { GuessTone } from "./vessel.mjs";
+import { ReactNode } from "react";
+import { Vec2 } from "@classytic/stage";
+
+//#region src/kit/predict.d.ts
+interface PredictPlotProps {
+  /** Given data points, already plotted (the pattern to extend). */
+  data: Vec2[];
+  /** The controlled ghost point the learner drags. */
+  guess: Vec2;
+  onGuess: (p: Vec2, phase: 'move' | 'commit') => void;
+  /** Colour the ghost by correctness (parent decides). */
+  tone?: GuessTone;
+  /** First-quadrant window; axes sit at the corner. */
+  xMax: number;
+  yMax: number;
+  xStep?: number;
+  yStep?: number;
+  xLabel?: string;
+  yLabel?: string;
+  height?: number;
+  /** Lock the ghost to its x (vertical drag only). Default true , predict the y. */
+  lockX?: boolean;
+  /** Snap the ghost to the grid on drag. Default true. */
+  snap?: boolean;
+  /** Draw the underlying rule line y = slope·x + intercept (e.g. once solved). */
+  rule?: {
+    slope: number;
+    intercept: number;
+  } | null;
+  /** Faint guide column at x = guess.x so the learner sees which input they're on. */
+  showColumn?: boolean;
+  /** Readout the guess coordinate as a label by the ghost. */
+  readout?: boolean;
+}
+declare function PredictPlot({
+  data,
+  guess,
+  onGuess,
+  tone,
+  xMax,
+  yMax,
+  xStep,
+  yStep,
+  xLabel,
+  yLabel,
+  height,
+  lockX,
+  snap,
+  rule,
+  showColumn,
+  readout
+}: PredictPlotProps): ReactNode;
+//#endregion
+export { PredictPlot, PredictPlotProps };