@classytic/labs 0.1.0

package/dist/ict/number-systems/wheel.mjs

@@ -0,0 +1,279 @@
+'use client';
+
+import { useFrameTick } from "../../kit/anim.mjs";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInView } from "@classytic/stage";
+
+//#region src/ict/number-systems/wheel.tsx
+/**
+* Shared building blocks for the number-system labs: base digit helpers + the
+* DigitWheel glyph (a mechanical odometer wheel). Tokenized SVG only — colours
+* are `--stage-*` so the wheels retheme with the host. The roll is DATA: the lab
+* passes a 0..1 `roll` phase its frame loop decays, so the digit visibly slides
+* into place (no fake "press play" — the motion tracks the real value change).
+*/
+/** Seconds for a wheel to settle after a digit changes. */
+const ROLL_DUR = .32;
+/** 0-9 then A-F… for bases up to 16. */
+function digitChar(d) {
+	return d < 10 ? String(d) : String.fromCharCode(65 + d - 10);
+}
+/** The `width` digits of `value` in `base`, most-significant first, zero-padded. */
+function toDigits(value, base, width) {
+	const out = [];
+	let v = Math.max(0, Math.floor(value));
+	for (let i = 0; i < width; i++) {
+		out.unshift(v % base);
+		v = Math.floor(v / base);
+	}
+	return out;
+}
+/** Largest value representable in `width` digits of `base`. */
+function maxValue(base, width) {
+	return Math.pow(base, width) - 1;
+}
+const CELL_W = 38;
+const CELL_H = 50;
+const ROW = 34;
+/**
+* One odometer wheel: the current digit large + the next/previous digits peeking
+* (clipped) at the top/bottom edges, so it unmistakably reads as a wheel mid-roll.
+*/
+function DigitWheel({ base, digit, roll = 0, dir = 1, active, onTap, ariaLabel }) {
+	const r = Math.max(0, Math.min(1, roll));
+	const cy = CELL_H / 2;
+	const cx = CELL_W / 2;
+	const up = (digit + 1) % base;
+	const down = (digit - 1 + base) % base;
+	const offset = r * dir * ROW;
+	const col = active ? "var(--stage-accent)" : "var(--stage-muted)";
+	const clipId = `wheel-clip-${CELL_W}-${CELL_H}`;
+	return /* @__PURE__ */ jsxs("svg", {
+		width: CELL_W,
+		height: CELL_H,
+		viewBox: `0 0 ${CELL_W} ${CELL_H}`,
+		role: onTap ? "button" : "img",
+		"aria-label": ariaLabel,
+		onClick: onTap,
+		style: {
+			cursor: onTap ? "pointer" : "default",
+			flex: "0 0 auto"
+		},
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+				id: clipId,
+				children: /* @__PURE__ */ jsx("rect", {
+					x: 0,
+					y: 0,
+					width: CELL_W,
+					height: CELL_H,
+					rx: 7
+				})
+			}) }),
+			/* @__PURE__ */ jsx("rect", {
+				x: .75,
+				y: .75,
+				width: CELL_W - 1.5,
+				height: CELL_H - 1.5,
+				rx: 7,
+				fill: "var(--stage-bg)",
+				stroke: "var(--stage-fg)",
+				strokeOpacity: .35,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ jsx("g", {
+				clipPath: `url(#${clipId})`,
+				fontWeight: 700,
+				textAnchor: "middle",
+				style: { pointerEvents: "none" },
+				children: /* @__PURE__ */ jsxs("g", {
+					transform: `translate(0 ${offset})`,
+					children: [
+						/* @__PURE__ */ jsx("text", {
+							x: cx,
+							y: cy - ROW,
+							fill: "var(--stage-muted)",
+							fontSize: 18,
+							opacity: .3,
+							dominantBaseline: "central",
+							children: digitChar(down)
+						}),
+						/* @__PURE__ */ jsx("text", {
+							x: cx,
+							y: cy,
+							fill: col,
+							fontSize: 26,
+							dominantBaseline: "central",
+							children: digitChar(digit)
+						}),
+						/* @__PURE__ */ jsx("text", {
+							x: cx,
+							y: 59,
+							fill: "var(--stage-muted)",
+							fontSize: 18,
+							opacity: .3,
+							dominantBaseline: "central",
+							children: digitChar(up)
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: .75,
+				y: .75,
+				width: CELL_W - 1.5,
+				height: CELL_H - 1.5,
+				rx: 7,
+				fill: "none",
+				stroke: "var(--stage-fg)",
+				strokeOpacity: active ? .5 : .25,
+				strokeWidth: 1.5
+			})
+		]
+	});
+}
+/** A binary ON/OFF cell — the "lightbulb worth 2^n" picture for base-2 mode. */
+function BitCell({ on, onTap, ariaLabel }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: CELL_W,
+		height: CELL_H,
+		viewBox: `0 0 ${CELL_W} ${CELL_H}`,
+		role: onTap ? "button" : "img",
+		"aria-label": ariaLabel,
+		onClick: onTap,
+		style: {
+			cursor: onTap ? "pointer" : "default",
+			flex: "0 0 auto"
+		},
+		children: [
+			on && /* @__PURE__ */ jsx("rect", {
+				x: 2,
+				y: 2,
+				width: CELL_W - 4,
+				height: CELL_H - 4,
+				rx: 7,
+				fill: "var(--stage-good)",
+				opacity: .18
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: .75,
+				y: .75,
+				width: CELL_W - 1.5,
+				height: CELL_H - 1.5,
+				rx: 7,
+				fill: on ? "color-mix(in oklab, var(--stage-good) 26%, var(--stage-bg))" : "var(--stage-bg)",
+				stroke: on ? "var(--stage-good)" : "var(--stage-fg)",
+				strokeOpacity: on ? 1 : .3,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: CELL_W / 2,
+				y: CELL_H / 2,
+				fill: on ? "var(--stage-good)" : "var(--stage-muted)",
+				fontSize: 24,
+				fontWeight: 800,
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				style: { pointerEvents: "none" },
+				children: on ? "1" : "0"
+			})
+		]
+	});
+}
+/**
+* A row of odometer wheels (or bit cells) for `value` in `base`, with the
+* carry-ripple roll animation OWNED here — the single reusable place-value
+* primitive both PlaceValueDial and BaseOdometer compose, so the animation +
+* weight rendering live in exactly one spot.
+*/
+function WheelRow({ value, base, width, cells, showWeights, onTapDigit, ariaPrefix = "" }) {
+	const digits = toDigits(value, base, width);
+	const prev = useRef(digits);
+	const roll = useRef(digits.map(() => 0));
+	const dir = useRef(digits.map(() => 1));
+	const { ref: viewRef, inView } = useInView();
+	useEffect(() => {
+		const p = prev.current;
+		let rightmost = -1;
+		digits.forEach((d, i) => {
+			if (d !== (p[i] ?? d)) rightmost = i;
+		});
+		digits.forEach((d, i) => {
+			const pp = p[i] ?? d;
+			if (d !== pp) {
+				const delay = rightmost - i;
+				roll.current[i] = 1 + Math.max(0, delay) * .45;
+				dir.current[i] = (d - pp + base) % base <= base / 2 ? 1 : -1;
+			}
+		});
+		prev.current = digits;
+	}, [
+		value,
+		base,
+		width
+	]);
+	useFrameTick(roll.current.some((r) => r > 0) && inView, (f) => {
+		const dt = Math.min(.05, f.dtMs / 1e3);
+		roll.current = roll.current.map((r) => Math.max(0, r - dt / ROLL_DUR));
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref: viewRef,
+		className: "lab-playwrap",
+		style: {
+			display: "flex",
+			gap: 8,
+			alignItems: "flex-start"
+		},
+		children: digits.map((d, i) => {
+			const place = width - 1 - i;
+			const weight = Math.pow(base, place);
+			return /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "center",
+					gap: 4
+				},
+				children: [cells ? /* @__PURE__ */ jsx(BitCell, {
+					on: d === 1,
+					onTap: onTapDigit ? () => onTapDigit(i) : void 0,
+					ariaLabel: `${ariaPrefix}bit worth ${weight}, ${d ? "on" : "off"}`
+				}) : /* @__PURE__ */ jsx(DigitWheel, {
+					base,
+					digit: d,
+					roll: Math.min(1, roll.current[i] ?? 0),
+					dir: dir.current[i] ?? 1,
+					active: d !== 0,
+					onTap: onTapDigit ? () => onTapDigit(i) : void 0,
+					ariaLabel: `${ariaPrefix}place ${place}, digit ${digitChar(d)}`
+				}), showWeights && /* @__PURE__ */ jsxs("div", {
+					style: {
+						textAlign: "center",
+						lineHeight: 1.15
+					},
+					children: [/* @__PURE__ */ jsxs("div", {
+						style: {
+							fontSize: 10,
+							color: "var(--stage-muted)",
+							fontVariantNumeric: "tabular-nums"
+						},
+						children: [base, /* @__PURE__ */ jsx("sup", { children: place })]
+					}), /* @__PURE__ */ jsx("div", {
+						style: {
+							fontSize: 12,
+							fontWeight: 700,
+							fontVariantNumeric: "tabular-nums",
+							color: d !== 0 ? "var(--stage-good)" : "var(--stage-muted)",
+							opacity: d !== 0 ? 1 : .6
+						},
+						children: weight
+					})]
+				})]
+			}, i);
+		})
+	});
+}
+
+//#endregion
+export { BitCell, DigitWheel, WheelRow, digitChar, maxValue, toDigits };

package/dist/index.d.mts

@@ -0,0 +1,10 @@
+import { Rng, gaussian, mulberry32, randInt, sample, shuffle } from "./core/rng.mjs";
+import { approxEq, clamp, cn, lerp, num, remap, toDeg, toRad } from "./core/util.mjs";
+import { RealFn, derivativeAt, estimateOneSidedLimit, integrate, riemannSum, sampleFunction, secantSlope } from "./core/numeric.mjs";
+import { Tex } from "./core/tex.mjs";
+import { RichText } from "./kit/rich.mjs";
+import { EASINGS, Easing, cubicBezier, easeInCubic, easeInOut, easeOutCubic, elastic, linear, rushFrom, rushInto, smooth, squish, thereAndBack } from "./core/easing.mjs";
+import { SciValue, derive, useSciValue, useValue, value } from "./core/reactive.mjs";
+import { Keyframe, TweenOptions, TweenState, keyframes, useTween } from "./core/timeline.mjs";
+import { RichSpan, parseRichText } from "./core/index.mjs";
+export { EASINGS, type Easing, type Keyframe, type RealFn, type RichSpan, RichText, type Rng, type SciValue, Tex, type TweenOptions, type TweenState, approxEq, clamp, cn, cubicBezier, derivativeAt, derive, easeInCubic, easeInOut, easeOutCubic, elastic, estimateOneSidedLimit, gaussian, integrate, keyframes, lerp, linear, mulberry32, num, parseRichText, randInt, remap, riemannSum, rushFrom, rushInto, sample, sampleFunction, secantSlope, shuffle, smooth, squish, thereAndBack, toDeg, toRad, useSciValue, useTween, useValue, value };

package/dist/index.mjs

@@ -0,0 +1,11 @@
+import { approxEq, clamp, cn, lerp, num, remap, toDeg, toRad } from "./core/util.mjs";
+import { derivativeAt, estimateOneSidedLimit, integrate, riemannSum, sampleFunction, secantSlope } from "./core/numeric.mjs";
+import { gaussian, mulberry32, randInt, sample, shuffle } from "./core/rng.mjs";
+import { Tex } from "./core/tex.mjs";
+import { RichText } from "./kit/rich.mjs";
+import { EASINGS, cubicBezier, easeInCubic, easeInOut, easeOutCubic, elastic, linear, rushFrom, rushInto, smooth, squish, thereAndBack } from "./core/easing.mjs";
+import { derive, useSciValue, useValue, value } from "./core/reactive.mjs";
+import { keyframes, useTween } from "./core/timeline.mjs";
+import { parseRichText } from "./core/index.mjs";
+
+export { EASINGS, RichText, Tex, approxEq, clamp, cn, cubicBezier, derivativeAt, derive, easeInCubic, easeInOut, easeOutCubic, elastic, estimateOneSidedLimit, gaussian, integrate, keyframes, lerp, linear, mulberry32, num, parseRichText, randInt, remap, riemannSum, rushFrom, rushInto, sample, sampleFunction, secantSlope, shuffle, smooth, squish, thereAndBack, toDeg, toRad, useSciValue, useTween, useValue, value };

package/dist/kit/anim.mjs

@@ -0,0 +1,52 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useFrameLoop } from "@classytic/stage";
+
+//#region src/kit/anim.ts
+/**
+* Animation boilerplate, factored out of every timed lab.
+*
+* Before, each lab hand-rolled: a reduced-motion ref, a throwaway `tick` state,
+* and a `useFrameLoop` that bumped the tick every frame to force a re-render.
+* These two hooks collapse all of that to one line each.
+*/
+/**
+* prefers-reduced-motion, read once at mount. The value is read synchronously, so
+* for labs whose FIRST render visibly depends on it (and that hydrate from SSR)
+* prefer {@link useReducedMotionDeferred} to avoid a hydration mismatch.
+*/
+function useReducedMotion() {
+	const ref = useRef(void 0);
+	if (ref.current === void 0) ref.current = typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches;
+	return ref.current;
+}
+/**
+* Hydration-safe prefers-reduced-motion: returns `false` on the server AND the first
+* client render (so SSR markup matches), then flips to the real value after mount.
+* Use this in SSR'd labs that gate their first paint on the reduced-motion flag.
+*/
+function useReducedMotionDeferred() {
+	const [reduce, setReduce] = useState(false);
+	useEffect(() => {
+		setReduce(typeof matchMedia !== "undefined" && matchMedia("(prefers-reduced-motion: reduce)").matches);
+	}, []);
+	return reduce;
+}
+/**
+* Run `step` once per animation frame while `running`, then re-render. Replaces the
+* per-lab `const [, setTick] = useState(0)` + `setTick(t => (t + 1) & 0xffff)` dance:
+* integrate into your refs inside `step`, and the view repaints automatically.
+*/
+function useFrameTick(running, step) {
+	const [, setTick] = useState(0);
+	const bump = useCallback(() => setTick((t) => t + 1 & 65535), []);
+	useFrameLoop((f) => {
+		step?.(f);
+		bump();
+	}, { running });
+	return bump;
+}
+
+//#endregion
+export { useFrameTick, useReducedMotion, useReducedMotionDeferred };

package/dist/kit/annotate.mjs

@@ -0,0 +1,116 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/annotate.tsx
+const TONE = {
+	info: "var(--stage-accent)",
+	good: "var(--stage-good)",
+	warn: "var(--stage-warn)",
+	bad: "var(--stage-danger, #e03131)",
+	muted: "var(--stage-muted)"
+};
+const charW = 6.4;
+/** A labelled pointer to (x,y): a dot, a leader line, and a tinted bubble offset by
+*  (dx,dy). Keep dx/dy pointing into open space so the bubble clears the figure.
+*  (Named `Pointer`, not Callout, to avoid clashing with frame.js's prose-box Callout
+*  and cms-ui's document-level Callout block — this one anchors to FIGURE geometry.) */
+function Pointer({ x, y, text, dx = 30, dy = -26, tone = "info", fontSize = 11 }) {
+	const col = TONE[tone];
+	const w = text.length * (charW * (fontSize / 11)) + 14, h = fontSize + 9;
+	const bx = dx >= 0 ? x + dx : x + dx - w, by = y + dy - h / 2;
+	return /* @__PURE__ */ jsxs("g", {
+		style: { pointerEvents: "none" },
+		children: [
+			/* @__PURE__ */ jsx("line", {
+				x1: x,
+				y1: y,
+				x2: dx >= 0 ? bx : bx + w,
+				y2: by + h / 2,
+				stroke: col,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: x,
+				cy: y,
+				r: 3,
+				fill: col
+			}),
+			/* @__PURE__ */ jsx("rect", {
+				x: bx,
+				y: by,
+				width: w,
+				height: h,
+				rx: h / 2,
+				fill: "var(--stage-bg)",
+				stroke: col,
+				strokeWidth: 1.5
+			}),
+			/* @__PURE__ */ jsx("text", {
+				x: bx + w / 2,
+				y: by + h / 2,
+				textAnchor: "middle",
+				dominantBaseline: "central",
+				fontSize,
+				fontWeight: 700,
+				fill: col,
+				children: text
+			})
+		]
+	});
+}
+/** A pulsing attention ring at (cx,cy) — draws the eye to "look here". */
+function Spotlight({ cx, cy, r = 13, tone = "warn" }) {
+	const col = TONE[tone];
+	return /* @__PURE__ */ jsxs("g", {
+		style: { pointerEvents: "none" },
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx,
+			cy,
+			r,
+			fill: "none",
+			stroke: col,
+			strokeWidth: 2,
+			className: "lab-pulse",
+			style: {
+				transformBox: "fill-box",
+				transformOrigin: "center"
+			}
+		}), /* @__PURE__ */ jsx("circle", {
+			cx,
+			cy,
+			r: r * .55,
+			fill: "none",
+			stroke: col,
+			strokeWidth: 2,
+			opacity: .9
+		})]
+	});
+}
+/** A span bracket from x1→x2 at height y with a centred label — "this range means …".
+*  `side: 'below'` drops the ticks/label under y; 'above' lifts them over it. */
+function Bracket({ x1, x2, y, text, tone = "info", side = "below", fontSize = 11 }) {
+	const col = TONE[tone];
+	const tick = 6 * (side === "below" ? 1 : -1), ly = y + (side === "below" ? 14 : -8);
+	return /* @__PURE__ */ jsxs("g", {
+		style: { pointerEvents: "none" },
+		children: [/* @__PURE__ */ jsx("path", {
+			d: `M${x1},${y + tick} L${x1},${y} L${x2},${y} L${x2},${y + tick}`,
+			fill: "none",
+			stroke: col,
+			strokeWidth: 1.5
+		}), /* @__PURE__ */ jsx("text", {
+			x: (x1 + x2) / 2,
+			y: ly,
+			textAnchor: "middle",
+			dominantBaseline: side === "below" ? "hanging" : "auto",
+			fontSize,
+			fontWeight: 700,
+			fill: col,
+			children: text
+		})]
+	});
+}
+
+//#endregion
+export { Bracket, Pointer, Spotlight };

package/dist/kit/answer-check.d.mts

@@ -0,0 +1,38 @@
+//#region src/kit/answer-check.d.ts
+/**
+ * answer-check — the "is the student right?" layer of the interactive-problem
+ * engine. Pure, built on @classytic/stage's expr engine. Two real modes (the ones
+ * exams need): a NUMBER (value within tolerance, parsed so `pi/2` or `2*sqrt(5)`
+ * count) and an EXPRESSION (any algebraically-EQUIVALENT form accepted, checked
+ * BOTH symbolically — simplify(student − answer) → 0 — AND numerically by sampling,
+ * so `(x+1)(x+2)` ≡ `x^2+3x+2`). No hand-marking, no "exact-string" brittleness.
+ */
+/** Evaluate a numeric answer string (`3.14`, `pi/2`, `2*sqrt(5)`) → number (NaN if invalid). */
+declare function parseValue(raw: string): number;
+/** Numeric match with a relative-ish tolerance (default ~1% of scale). */
+declare function checkNumber(student: number, value: number, tol?: number): boolean;
+interface ExprCheckOpts {
+  /** Variables to sample (defaults to the union of both sides' free vars). */
+  vars?: string[];
+  /** Sampling domain for the numeric pass. */
+  domain?: [number, number];
+  tol?: number;
+  samples?: number;
+}
+/** True if `student` is algebraically equivalent to `answer` (symbolic OR numeric). */
+declare function checkExpression(student: string, answer: string, opts?: ExprCheckOpts): boolean;
+type AnswerSpec = {
+  kind: 'number';
+  value: number;
+  tol?: number;
+} | {
+  kind: 'expression';
+  value: string;
+  vars?: string[];
+  domain?: [number, number];
+  tol?: number;
+};
+/** Check a raw student string against an authored answer spec. */
+declare function checkAnswer(spec: AnswerSpec, raw: string): boolean;
+//#endregion
+export { AnswerSpec, ExprCheckOpts, checkAnswer, checkExpression, checkNumber, parseValue };

package/dist/kit/answer-check.mjs

@@ -0,0 +1,65 @@
+import { compileExpr, parseExpr, simplify } from "@classytic/stage";
+
+//#region src/kit/answer-check.ts
+/**
+* answer-check — the "is the student right?" layer of the interactive-problem
+* engine. Pure, built on @classytic/stage's expr engine. Two real modes (the ones
+* exams need): a NUMBER (value within tolerance, parsed so `pi/2` or `2*sqrt(5)`
+* count) and an EXPRESSION (any algebraically-EQUIVALENT form accepted, checked
+* BOTH symbolically — simplify(student − answer) → 0 — AND numerically by sampling,
+* so `(x+1)(x+2)` ≡ `x^2+3x+2`). No hand-marking, no "exact-string" brittleness.
+*/
+/** Compile, returning the usable form or null (never the error union). */
+function tryCompile(src) {
+	const c = compileExpr(src);
+	if (c.error !== void 0) return null;
+	return c;
+}
+/** Evaluate a numeric answer string (`3.14`, `pi/2`, `2*sqrt(5)`) → number (NaN if invalid). */
+function parseValue(raw) {
+	const c = tryCompile(raw);
+	return c ? c.fn({}) : NaN;
+}
+/** Numeric match with a relative-ish tolerance (default ~1% of scale). */
+function checkNumber(student, value, tol = .01) {
+	if (!Number.isFinite(student) || !Number.isFinite(value)) return false;
+	return Math.abs(student - value) <= tol * Math.max(1, Math.abs(value));
+}
+const isZeroNode = (n, eps = 1e-9) => n.type === "num" && Math.abs(n.value) < eps;
+/** True if `student` is algebraically equivalent to `answer` (symbolic OR numeric). */
+function checkExpression(student, answer, opts = {}) {
+	const a = tryCompile(student);
+	const b = tryCompile(answer);
+	if (!a || !b) return false;
+	try {
+		if (isZeroNode(simplify(parseExpr(`(${student}) - (${answer})`)), opts.tol ?? 1e-9)) return true;
+	} catch {}
+	const vars = opts.vars ?? [...new Set([...a.vars, ...b.vars])];
+	const [lo, hi] = opts.domain ?? [-3.3, 3.7];
+	const tol = opts.tol ?? 1e-6;
+	const samples = opts.samples ?? 32;
+	const PHI = .6180339887498949;
+	const R2 = .4142135623730951;
+	let finite = 0;
+	for (let i = 0; i < samples; i++) {
+		const scope = {};
+		vars.forEach((v, j) => {
+			scope[v] = lo + (hi - lo) * (((i + 1) * PHI + (j + 1) * R2) % 1);
+		});
+		const ya = a.fn(scope);
+		const yb = b.fn(scope);
+		if (!Number.isFinite(ya) || !Number.isFinite(yb)) continue;
+		finite++;
+		if (Math.abs(ya - yb) > tol * Math.max(1, Math.abs(ya), Math.abs(yb))) return false;
+	}
+	return finite >= 5;
+}
+/** Check a raw student string against an authored answer spec. */
+function checkAnswer(spec, raw) {
+	if (!raw || !raw.trim()) return false;
+	if (spec.kind === "number") return checkNumber(parseValue(raw), spec.value, spec.tol);
+	return checkExpression(raw, spec.value, spec);
+}
+
+//#endregion
+export { checkAnswer, checkExpression, checkNumber, parseValue };

package/dist/kit/asset-util.mjs

@@ -0,0 +1,15 @@
+//#region src/kit/asset-util.ts
+/** Normalized pixel rect from two DESIGN-space corners (handles the y-flip safely). */
+function pxRect(P, x0, y0, x1, y1) {
+	const [ax, ay] = P(x0, y0);
+	const [bx, by] = P(x1, y1);
+	return {
+		x: Math.min(ax, bx),
+		y: Math.min(ay, by),
+		width: Math.abs(bx - ax),
+		height: Math.abs(by - ay)
+	};
+}
+
+//#endregion
+export { pxRect };

package/dist/kit/controls.mjs

@@ -0,0 +1,77 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/controls.tsx
+/**
+* The `.lab-*` control CSS now SHIPS in `@classytic/labs/styles.css` (imported by
+* the host), instead of being injected at runtime. `LabStyles` is a no-op kept
+* for back-compat with presets that still render `<LabStyles/>`.
+* @deprecated import `@classytic/labs/styles.css` once in your global CSS instead.
+*/
+function LabStyles() {
+	return null;
+}
+function Stepper({ value, onChange, min = 0, max = 99, label }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "lab-stepper",
+		role: "group",
+		"aria-label": label,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `decrease${label ? " " + label : ""}`,
+				onClick: () => onChange(Math.max(min, value - 1)),
+				children: "−"
+			}),
+			/* @__PURE__ */ jsx("b", { children: value }),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": `increase${label ? " " + label : ""}`,
+				onClick: () => onChange(Math.min(max, value + 1)),
+				children: "+"
+			})
+		]
+	});
+}
+function CheckButton({ onClick, disabled, children = "Check" }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "lab-btn",
+		onClick,
+		disabled,
+		children
+	});
+}
+function StatusPill({ ok, children }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: "lab-pill",
+		"data-state": ok ? "ok" : "no",
+		children
+	});
+}
+function Chip({ selected, onClick, children }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "lab-chip",
+		"data-sel": selected,
+		onClick,
+		children
+	});
+}
+function Slider(props) {
+	return /* @__PURE__ */ jsx("input", {
+		type: "range",
+		className: "lab-slider",
+		value: props.value,
+		min: props.min,
+		max: props.max,
+		step: props.step,
+		"aria-label": props.ariaLabel,
+		onChange: (e) => props.onChange(Number(e.currentTarget.value)),
+		style: props.style
+	});
+}
+
+//#endregion
+export { CheckButton, Chip, LabStyles, Slider, StatusPill, Stepper };