@classytic/labs 0.1.0 → 0.2.0

package/dist/core/easing.mjs

@@ -12,7 +12,7 @@ const easeInOut = (t) => t < .5 ? 2 * t * t : 1 - (-2 * t + 2) ** 2 / 2;
 const rushInto = (t) => 2 * smooth(t / 2);
 /** Decelerate to rest (manim `rush_from`). */
 const rushFrom = (t) => 2 * smooth(t / 2 + .5) - 1;
-/** Go to 1 then back to 0 (manim `there_and_back`) — great for pulses. */
+/** Go to 1 then back to 0 (manim `there_and_back`), great for pulses. */
 const thereAndBack = (t) => smooth(t < .5 ? 2 * t : 2 * (1 - t));
 /** Overshoot then settle. */
 const elastic = (t) => {
@@ -49,7 +49,7 @@ function cubicBezier(x1, y1, x2, y2) {
 function squish(fn, a = .2, b = .8) {
 	return (t) => t < a ? 0 : t > b ? 1 : fn((t - a) / (b - a));
 }
-/** Built-in registry — extend with `registerEasing` (see ./registry). */
+/** Built-in registry, extend with `registerEasing` (see ./registry). */
 const EASINGS = {
 	linear,
 	smooth,

package/dist/core/numeric.d.mts

@@ -1,6 +1,6 @@
 //#region src/core/numeric.d.ts
 /**
- * numeric — small numerical-calculus helpers, used when an exact symbolic result
+ * numeric, small numerical-calculus helpers, used when an exact symbolic result
  * isn't available (e.g. a function the differentiator doesn't handle) or when a
  * widget just needs a number. Pure, dependency-free.
  */
@@ -17,7 +17,7 @@ declare function sampleFunction(fn: RealFn, range: [number, number], samples?: n
 /** Riemann sum of `fn` over `[a, b]` with `n` subintervals. A teaching estimate. */
 declare function riemannSum(fn: RealFn, range: [number, number], n: number, mode?: 'left' | 'right' | 'mid'): number;
 /**
- * Composite Simpson's rule — a high-accuracy definite-integral estimate (error
+ * Composite Simpson's rule, a high-accuracy definite-integral estimate (error
  * O(h⁴), vs O(h) for a Riemann sum). Used as the "reference" a Riemann sum
  * converges toward. `n` is forced even. Not exact, but accurate to ~machine
  * precision for smooth integrands at n≈1000.
@@ -26,7 +26,7 @@ declare function integrate(fn: RealFn, range: [number, number], n?: number): num
 /**
  * Estimate a one-sided limit of `fn` as x → c from `side` (+1 right, −1 left) by
  * sampling a shrinking sequence of offsets. Returns the closest-in value and
- * whether the sequence is *converging* (consecutive samples agree) — so callers
+ * whether the sequence is *converging* (consecutive samples agree), so callers
  * can honestly report "estimated limit" + confidence rather than a hard claim.
  */
 declare function estimateOneSidedLimit(fn: RealFn, c: number, side: 1 | -1): {

package/dist/core/numeric.mjs

@@ -32,7 +32,7 @@ function riemannSum(fn, range, n, mode = "mid") {
 	return sum * dx;
 }
 /**
-* Composite Simpson's rule — a high-accuracy definite-integral estimate (error
+* Composite Simpson's rule, a high-accuracy definite-integral estimate (error
 * O(h⁴), vs O(h) for a Riemann sum). Used as the "reference" a Riemann sum
 * converges toward. `n` is forced even. Not exact, but accurate to ~machine
 * precision for smooth integrands at n≈1000.
@@ -48,7 +48,7 @@ function integrate(fn, range, n = 1e3) {
 /**
 * Estimate a one-sided limit of `fn` as x → c from `side` (+1 right, −1 left) by
 * sampling a shrinking sequence of offsets. Returns the closest-in value and
-* whether the sequence is *converging* (consecutive samples agree) — so callers
+* whether the sequence is *converging* (consecutive samples agree), so callers
 * can honestly report "estimated limit" + confidence rather than a hard claim.
 */
 function estimateOneSidedLimit(fn, c, side) {

package/dist/core/reactive.d.mts

@@ -1,6 +1,6 @@
 //#region src/core/reactive.d.ts
 /**
- * Tiny reactive value — the `ValueTracker` / signal at the heart of
+ * Tiny reactive value, the `ValueTracker` / signal at the heart of
  * interactivity. A slider/drag updates a `value()`; anything derived from it
  * recomputes; React components bound via `useValue` repaint. Framework-light
  * (no external dep); the React glue is one hook.

package/dist/core/reactive.mjs

@@ -2,7 +2,7 @@ import { useEffect, useReducer, useRef } from "react";
 
 //#region src/core/reactive.ts
 /**
-* Tiny reactive value — the `ValueTracker` / signal at the heart of
+* Tiny reactive value, the `ValueTracker` / signal at the heart of
 * interactivity. A slider/drag updates a `value()`; anything derived from it
 * recomputes; React components bound via `useValue` repaint. Framework-light
 * (no external dep); the React glue is one hook.

package/dist/core/rng.d.mts

@@ -1,6 +1,6 @@
 //#region src/core/rng.d.ts
 /**
- * Seeded PRNG — deterministic randomness so a simulation is REPLAYABLE (same
+ * Seeded PRNG, deterministic randomness so a simulation is REPLAYABLE (same
  * seed → same run; an agent can pin a seed, a lesson reproduces exactly, SSR /
  * Remotion stays stable). mulberry32: tiny, fast, good enough for teaching. This
  * is the canonical home (generic numerics live in core, per the shared-math rule);
@@ -15,7 +15,7 @@ declare function randInt(rng: Rng, lo: number, hi: number): number;
 declare function shuffle<T>(arr: readonly T[], rng: Rng): T[];
 /** Sample `k` distinct items (without replacement). */
 declare function sample<T>(arr: readonly T[], k: number, rng: Rng): T[];
-/** A normal (Gaussian) variate via Box–Muller — for sampling-distribution sims. */
+/** A normal (Gaussian) variate via Box–Muller, for sampling-distribution sims. */
 declare function gaussian(rng: Rng, mu?: number, sigma?: number): number;
 //#endregion
 export { Rng, gaussian, mulberry32, randInt, sample, shuffle };

package/dist/core/rng.mjs

@@ -27,7 +27,7 @@ function shuffle(arr, rng) {
 function sample(arr, k, rng) {
 	return shuffle(arr, rng).slice(0, Math.max(0, Math.min(k, arr.length)));
 }
-/** A normal (Gaussian) variate via Box–Muller — for sampling-distribution sims. */
+/** A normal (Gaussian) variate via Box–Muller, for sampling-distribution sims. */
 function gaussian(rng, mu = 0, sigma = 1) {
 	let u = 0, v = 0;
 	while (u === 0) u = rng();

package/dist/core/tex.mjs

@@ -6,11 +6,11 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/core/tex.tsx
 /**
-* Tex — render a LaTeX string with KaTeX AT RENDER TIME, so the markup is
+* Tex, render a LaTeX string with KaTeX AT RENDER TIME, so the markup is
 * identical on the server and client: SSR/static exports show real maths (not raw
 * `\cdot`/`\dfrac`), there's no raw-then-hydrate flash, and hydration matches.
 *
-* `katex` is a static import kept in this OWN module — stage/labs `neverBundle`
+* `katex` is a static import kept in this OWN module, stage/labs `neverBundle`
 * leave it external, so only `<Tex>` importers pull it (the consumer resolves the
 * optional peer; non-Tex consumers never bundle it). If `renderToString` throws on
 * a malformed string we fall back to the raw LaTeX in a `<code>`. Pair with

package/dist/core/timeline.d.mts

@@ -27,7 +27,7 @@ interface Keyframe {
 /**
  * Pure multi-stage interpolation: build a `(t in [0,1]) => number` from
  * keyframes. The manim-style way to express richer programmatic animation
- * without a scheduler — drive `t` from `useTween`/`useFrameLoop`.
+ * without a scheduler, drive `t` from `useTween`/`useFrameLoop`.
  */
 declare function keyframes(frames: Keyframe[]): (t: number) => number;
 //#endregion

package/dist/core/timeline.mjs

@@ -52,7 +52,7 @@ function useTween(opts) {
 /**
 * Pure multi-stage interpolation: build a `(t in [0,1]) => number` from
 * keyframes. The manim-style way to express richer programmatic animation
-* without a scheduler — drive `t` from `useTween`/`useFrameLoop`.
+* without a scheduler, drive `t` from `useTween`/`useFrameLoop`.
 */
 function keyframes(frames) {
 	const ks = [...frames].sort((a, b) => a.at - b.at);

package/dist/core/util.mjs

@@ -13,6 +13,16 @@ function num(v, fallback) {
 }
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
 const lerp = (a, b, t) => a + (b - a) * t;
+/** Round to `dp` decimal places (default 2), as a number. The shared rounding
+*  the part-whole bar labs (percent / fraction / ratio) all need for readouts. */
+const round = (n, dp = 2) => Math.round(n * 10 ** dp) / 10 ** dp;
+/** Greatest common divisor (Euclid), 0→1 so a ratio/fraction can always reduce. */
+const gcd = (a, b) => {
+	a = Math.abs(a);
+	b = Math.abs(b);
+	while (b) [a, b] = [b, a % b];
+	return a || 1;
+};
 const DEG = Math.PI / 180;
 /** Degrees → radians. */
 const toRad = (deg) => deg * DEG;
@@ -28,4 +38,4 @@ function remap(x, inMin, inMax, outMin, outMax, doClamp = false) {
 }
 
 //#endregion
-export { approxEq, clamp, cn, lerp, num, remap, toDeg, toRad };
+export { approxEq, clamp, cn, gcd, lerp, num, remap, round, toDeg, toRad };

package/dist/discrete/arrangements/preset.mjs

@@ -5,33 +5,25 @@ import { CheckButton, Chip, StatusPill, Stepper } from "../../kit/controls.mjs";
 import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
 import { HintLadder, RevealSolution, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { factorial, multinomial } from "../core/combinatorics.mjs";
+import { CATEGORICAL } from "../../kit/palette.mjs";
 import { useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useControlSurface } from "@classytic/stage";
 
 //#region src/discrete/arrangements/preset.tsx
 /**
-* ArrangementsLab — arranging things in a row when some are IDENTICAL (the multiset
+* ArrangementsLab, arranging things in a row when some are IDENTICAL (the multiset
 * permutation the slots/selection labs don't cover). The classic MISSISSIPPI, or a
 * row of coloured beads. The derivation, made concrete: if all n were distinct
 * there'd be n! orders; but swapping two identical letters gives the SAME word, so
-* each real arrangement is counted (count of that letter)! times — divide it out:
+* each real arrangement is counted (count of that letter)! times, divide it out:
 *
 *   n! / (n₁! · n₂! · …)        (the multinomial coefficient)
 *
 * You watch two identical tiles swap into the same row (the overcount), then the
 * formula falls out. Predict-then-check. Kernel = factorial / multinomial.
 */
-const PALETTE = [
-	"#1c7ed6",
-	"#e8590c",
-	"#2f9e44",
-	"#9c36b5",
-	"#e03131",
-	"#0ca678",
-	"#f59f00",
-	"#1098ad"
-];
+const PALETTE = CATEGORICAL;
 function fromWord(w) {
 	const order = [], m = /* @__PURE__ */ new Map();
 	for (const ch of w.toUpperCase()) {
@@ -111,7 +103,7 @@ function ArrangementsLab({ word, items, title = "Arrange with repeats", prompt,
 		children: [
 			/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", {
 				className: "lab-field-label",
-				children: [n, " items in a row — identical ones share a colour"]
+				children: [n, " items in a row, identical ones share a colour"]
 			}), /* @__PURE__ */ jsx("div", {
 				style: {
 					display: "flex",
@@ -148,7 +140,7 @@ function ArrangementsLab({ word, items, title = "Arrange with repeats", prompt,
 						style: { color: swapGroup.color },
 						children: swapGroup.label
 					}),
-					"'s ⇄ — it's the ",
+					"'s ⇄, it's the ",
 					/* @__PURE__ */ jsx("b", { children: "same row" }),
 					". So every arrangement is counted ",
 					swapGroup.count,

package/dist/discrete/bayes/preset.mjs

@@ -2,7 +2,7 @@
 
 import { Chip, Slider } from "../../kit/controls.mjs";
 import { Callout, ControlBar, Field, LabFrame } from "../../kit/frame.mjs";
-import { HintLadder, RevealSolution, useHints } from "../../kit/pedagogy.mjs";
+import { ChallengeCard, HintLadder, RevealSolution, useChallenge, useCheckpoint, useHints } from "../../kit/pedagogy.mjs";
 import { bayes } from "../core/probability.mjs";
 import { ProportionModel } from "../../kit/proportion.mjs";
 import { FrequencyTree } from "../../kit/freq-tree.mjs";
@@ -14,8 +14,8 @@ import { SamplerCore } from "@classytic/stage/sim";
 
 //#region src/discrete/bayes/preset.tsx
 /**
-* BayesLab — base-rate neglect, taught Brilliant-style: ONE idea at a time, big.
-*   THEORY (default): a 4-step walkthrough — (1) the rare population, (2) the test
+* BayesLab, base-rate neglect, taught Brilliant-style: ONE idea at a time, big.
+*   THEORY (default): a 4-step walkthrough, (1) the rare population, (2) the test
 *   catches most sick people, (3) but also flags many healthy ones, (4) so a
 *   positive is usually a false alarm. Each step reveals one more layer of a large
 *   area model; the frequency tree + answer land on the last step.
@@ -28,11 +28,10 @@ const FALSEPOS = "var(--stage-warn, #e8a020)";
 const MUTED = "var(--stage-muted)";
 const pct = (x) => `${(x * 100).toFixed(x < .01 ? 2 : 1)}%`;
 const r0 = (x) => Math.round(x);
-function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, population = 1e3, conditionLabels = ["disease", "healthy"], testLabels = ["test +", "test −"], predict = false, title = "Bayes — the base-rate trap", prompt, objectives, hints: hintList, controlId }) {
+function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, population = 1e3, conditionLabels = ["disease", "healthy"], testLabels = ["test +", "test −"], predict = false, title = "Bayes: the base-rate trap", prompt, objectives, hints: hintList, controlId }) {
 	const [p, setP] = useState(prior);
 	const [s, setS] = useState(sensitivity);
 	const [f, setF] = useState(falsePositive);
-	const [guess, setGuess] = useState(.5);
 	const [revealed, setRevealed] = useState(!predict);
 	const [mode, setMode] = useState("theory");
 	const [perStep, setPerStep] = useState(50);
@@ -43,6 +42,33 @@ function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, populati
 	const posterior = bayes(s, p, f);
 	const [has, not] = conditionLabels, [pos] = testLabels;
 	const posShort = pos.replace("test ", "");
+	const predictQ = [{
+		id: "bayes-posterior",
+		prompt: `Of everyone who tests ${posShort}, roughly what fraction TRULY have the ${has}?`,
+		choices: [
+			{
+				value: "most",
+				label: "most of them"
+			},
+			{
+				value: "about-half",
+				label: "about half"
+			},
+			{
+				value: "small",
+				label: "only a small fraction"
+			}
+		],
+		answer: "small",
+		explain: `Base-rate neglect: the ${has} is rare (prior ${pct(p)}), so even an accurate test produces far more false alarms than true positives, the posterior stays small.`
+	}];
+	const ch = useChallenge(predictQ);
+	if (predict && ch.allCorrect && !revealed) setRevealed(true);
+	useCheckpoint({
+		solved: ch.allCorrect,
+		activity: "bayes:predict",
+		hintsUsed: hints.count
+	});
 	const N = population;
 	const tp = N * p * s, fn = N * p * (1 - s), fp = N * (1 - p) * f, tn = N * (1 - p) * (1 - f);
 	const sampling = mode === "sample";
@@ -96,7 +122,7 @@ function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, populati
 	useControlSurface(controlId, {
 		prevalence: {
 			type: "number",
-			label: "prior P(A) — prevalence",
+			label: "prior P(A): prevalence",
 			min: .001,
 			max: .5,
 			step: .001,
@@ -105,7 +131,7 @@ function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, populati
 		},
 		sensitivity: {
 			type: "number",
-			label: "P(B|A) — true-positive rate",
+			label: "P(B|A): true-positive rate",
 			min: .5,
 			max: 1,
 			step: .01,
@@ -114,7 +140,7 @@ function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, populati
 		},
 		falsePositive: {
 			type: "number",
-			label: "P(B|¬A) — false-positive rate",
+			label: "P(B|¬A): false-positive rate",
 			min: 0,
 			max: .5,
 			step: .01,
@@ -160,9 +186,9 @@ function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, populati
 		count: dHea
 	}];
 	const captions = [
-		`Out of ${r0(N).toLocaleString()} people, only ${r0(tp + fn)} actually have the ${has} — it's rare (${pct(p)}).`,
+		`Out of ${r0(N).toLocaleString()} people, only ${r0(tp + fn)} actually have the ${has}, it's rare (${pct(p)}).`,
 		`The test is sensitive: of those ${r0(tp + fn)} sick people it catches ${r0(tp)} (and misses ${r0(fn)}).`,
-		`But the same test also flags ${r0(fp)} of the ${r0(fp + tn)} healthy people — false alarms.`,
+		`But the same test also flags ${r0(fp)} of the ${r0(fp + tn)} healthy people, false alarms.`,
 		`So ${r0(tp + fp)} test ${posShort}, yet only ${r0(tp)} are truly sick → a positive means just ${pct(posterior)}.`
 	];
 	const figure = /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -257,29 +283,11 @@ function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, populati
 					]
 				})
 			]
-		}) : /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("p", {
-			className: "lab-prompt",
-			children: [
-				"🎯 Before the reveal — if you test ",
-				posShort,
-				", what's the chance you actually have it?"
-			]
-		}), /* @__PURE__ */ jsxs(ControlBar, { children: [/* @__PURE__ */ jsx(Field, {
-			label: "your guess",
-			value: pct(guess),
-			children: /* @__PURE__ */ jsx(Slider, {
-				value: guess,
-				min: 0,
-				max: 1,
-				step: .01,
-				onChange: setGuess,
-				ariaLabel: "your guess"
-			})
-		}), /* @__PURE__ */ jsx(Chip, {
-			selected: false,
-			onClick: () => setRevealed(true),
-			children: "reveal"
-		})] })] })] }) : void 0,
+		}) : /* @__PURE__ */ jsx(ChallengeCard, {
+			questions: predictQ,
+			state: ch,
+			title: "Predict first"
+		})] }) : void 0,
 		controls: /* @__PURE__ */ jsxs(ControlBar, { children: [
 			/* @__PURE__ */ jsx(Field, {
 				label: "mode",
@@ -382,7 +390,7 @@ function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, populati
 					posShort,
 					") = ",
 					pct(posterior),
-					" — far below the test's accuracy, because the prior is only ",
+					", far below the test's accuracy, because the prior is only ",
 					pct(p),
 					"."
 				] }),
@@ -395,7 +403,7 @@ function BayesLab({ prior = .01, sensitivity = .9, falsePositive = .09, populati
 	});
 }
 /** The answer as a picture: of everyone who tests +, what red share truly has it.
-*  A bar of JUST the positive region (true-positive red | false-positive orange) —
+*  A bar of JUST the positive region (true-positive red | false-positive orange) , 
 *  the posterior IS the red fraction, legible at any prior (unlike the 1%-wide
 *  column the area model degenerates to). minWidth keeps the red sliver visible. */
 function PositiveBar({ tp, fp, pos, has }) {

package/dist/discrete/binomial/preset.mjs

@@ -11,9 +11,9 @@ import { useControlSurface } from "@classytic/stage";
 
 //#region src/discrete/binomial/preset.tsx
 /**
-* BinomialDistributionLab — the bridge from counting to the bell. P(X=k successes
+* BinomialDistributionLab, the bridge from counting to the bell. P(X=k successes
 * in n trials) = C(n,k)·pᵏ·(1−p)ⁿ⁻ᵏ, drawn as bars you can interrogate: click a bar
-* and the formula DERIVES itself — k successes happen C(n,k) ways (the Pascal /
+* and the formula DERIVES itself, k successes happen C(n,k) ways (the Pascal /
 * counting number), each way has probability pᵏ for the successes times (1−p)ⁿ⁻ᵏ for
 * the failures. Slide p to watch it skew and (at ½) turn symmetric; slide n and flip
 * on the normal overlay to watch the binomial become the Galton-board bell. Mean np

package/dist/discrete/combination-studio/figure.d.mts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+//#region src/discrete/combination-studio/figure.d.ts
+type CharSlot = 'top' | 'bottom' | 'hat' | 'hold' | 'none';
+//#endregion
+export { CharSlot };

package/dist/discrete/combination-studio/figure.mjs

@@ -0,0 +1,159 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/discrete/combination-studio/figure.tsx
+const SKIN = "#e8b98c";
+/** A friendly stick-ish person who wears the chosen garments. */
+function CharacterFigure({ parts, size = 64, dim = false }) {
+	const { top = "#9aa3b2", bottom = "#5b6472", hat, hold } = parts;
+	return /* @__PURE__ */ jsxs("svg", {
+		width: size,
+		height: size,
+		viewBox: "0 0 64 64",
+		style: {
+			display: "block",
+			opacity: dim ? .28 : 1,
+			transition: "opacity .2s"
+		},
+		"aria-hidden": true,
+		children: [
+			/* @__PURE__ */ jsx("rect", {
+				x: "26",
+				y: "40",
+				width: "5",
+				height: "16",
+				rx: "2.5",
+				fill: bottom
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "33",
+				y: "40",
+				width: "5",
+				height: "16",
+				rx: "2.5",
+				fill: bottom
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "22",
+				y: "24",
+				width: "20",
+				height: "20",
+				rx: "6",
+				fill: top
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "17",
+				y: "26",
+				width: "5",
+				height: "14",
+				rx: "2.5",
+				fill: top
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: "42",
+				y: "26",
+				width: "5",
+				height: "14",
+				rx: "2.5",
+				fill: top
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "32",
+				cy: "16",
+				r: "9",
+				fill: SKIN
+			}),
+			hat && /* @__PURE__ */ jsx("path", {
+				d: "M20 13 Q32 -1 44 13 Z",
+				fill: hat
+			}),
+			hat && /* @__PURE__ */ jsx("rect", {
+				x: "18",
+				y: "12",
+				width: "28",
+				height: "3.4",
+				rx: "1.7",
+				fill: hat
+			}),
+			hold && /* @__PURE__ */ jsx("text", {
+				x: "47",
+				y: "44",
+				fontSize: "13",
+				textAnchor: "middle",
+				children: hold
+			})
+		]
+	});
+}
+/** A stacked outcome card: one emoji (or colour swatch) per category. */
+function ComboCard({ cells, size = 60, dim = false }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: 2,
+			opacity: dim ? .3 : 1,
+			transition: "opacity .2s",
+			width: size
+		},
+		"aria-hidden": true,
+		children: cells.map((c, i) => c.emoji ? /* @__PURE__ */ jsx("span", {
+			style: {
+				fontSize: size * .42,
+				lineHeight: 1
+			},
+			children: c.emoji
+		}, i) : /* @__PURE__ */ jsx("span", { style: {
+			width: size * .6,
+			height: size * .26,
+			borderRadius: 5,
+			background: c.color ?? "#9aa3b2"
+		} }, i))
+	});
+}
+/** A pickable option in a rack: the swatch/emoji + its label, selected ring. */
+function OptionSwatch({ emoji, color, label, selected, onClick }) {
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick,
+		"aria-pressed": selected,
+		"aria-label": label,
+		style: {
+			display: "inline-flex",
+			flexDirection: "column",
+			alignItems: "center",
+			gap: 3,
+			cursor: "pointer",
+			padding: "6px 8px",
+			borderRadius: 10,
+			background: "transparent",
+			border: `2px solid ${selected ? "var(--stage-accent)" : "var(--stage-grid)"}`,
+			boxShadow: selected ? "0 0 0 3px color-mix(in oklab, var(--stage-accent) 22%, transparent)" : "none",
+			transition: "border-color .15s, box-shadow .15s"
+		},
+		children: [emoji ? /* @__PURE__ */ jsx("span", {
+			style: {
+				fontSize: 24,
+				lineHeight: 1
+			},
+			children: emoji
+		}) : /* @__PURE__ */ jsx("span", { style: {
+			width: 28,
+			height: 18,
+			borderRadius: 5,
+			background: color ?? "#9aa3b2"
+		} }), /* @__PURE__ */ jsx("span", {
+			style: {
+				fontSize: 11,
+				color: "var(--stage-muted)",
+				fontWeight: 600
+			},
+			children: label
+		})]
+	});
+}
+
+//#endregion
+export { CharacterFigure, ComboCard, OptionSwatch };

package/dist/discrete/combination-studio/index.d.mts

@@ -0,0 +1,2 @@
+import { CharSlot } from "./figure.mjs";
+import { CombinationStudioLab, CombinationStudioProps, ComboCategory, ComboOption } from "./preset.mjs";

package/dist/discrete/combination-studio/preset.d.mts

@@ -0,0 +1,44 @@
+import { CharSlot } from "./figure.mjs";
+import { ReactNode } from "react";
+
+//#region src/discrete/combination-studio/preset.d.ts
+interface ComboOption {
+  id: string;
+  label: string;
+  emoji?: string;
+  color?: string;
+}
+interface ComboCategory {
+  id: string;
+  label: string;
+  slot?: CharSlot;
+  options: ComboOption[];
+}
+interface CombinationStudioProps {
+  /** The thing being built, e.g. "outfit", "sundae" (used in the headline + question). */
+  scenario?: string;
+  categories?: ComboCategory[];
+  /** 'character' assembles a person; 'card' stacks the chosen emoji (non-clothing). */
+  figure?: 'character' | 'card';
+  /** How many categories are in play at the start (rest revealed via + variable). */
+  startActive?: number;
+  /** Cap outcomes drawn on the wall. */
+  maxWall?: number;
+  title?: string;
+  prompt?: string;
+  objectives?: string[];
+  hints?: string[];
+}
+declare function CombinationStudioLab({
+  scenario,
+  categories,
+  figure,
+  startActive,
+  maxWall,
+  title,
+  prompt,
+  objectives,
+  hints: hintList
+}?: CombinationStudioProps): ReactNode;
+//#endregion
+export { CombinationStudioLab, CombinationStudioProps, ComboCategory, ComboOption };