@classytic/labs 0.6.0 → 0.7.0

package/dist/kit/figure/text-metrics.mjs

@@ -0,0 +1,125 @@
+import { ADVANCE_BOLD, ADVANCE_MONO, ADVANCE_REGULAR } from "./text-metrics.data.mjs";
+
+//#region src/kit/figure/text-metrics.ts
+/**
+* Text extents for figure text, from a measured advance table instead of `.length * N` guesses.
+*
+* Figure text cannot be measured while the markup is built (the server has no layout, and the
+* client must render the same markup), so every chip, tag and label box used to guess its width
+* from the character count. A guess per call site drifted per call site: one tag was too tight for
+* "220 mA", another left a gap round "1 kg". This module is the one place widths come from.
+*
+* The table (`text-metrics.data.ts`) is generated in Chrome from the faces a host is likely to set
+* (Geist, Segoe UI, Arial) and keeps the widest of them per character, so a box sized from it holds
+* its text in any of them. It is plain data: the same answer on the server and in the browser.
+*
+*   textWidth(text, { role })        the width in figure units at the role's size
+*   textBox(text, { role, x, y })    the box the text occupies, for placement and collision checks
+*/
+/** Size in figure units of each role (styles/figure.css `.fig-text`, at `--fig-k` 1). */
+const ROLE_SIZE = {
+	label: 12,
+	note: 12,
+	title: 12,
+	measure: 16,
+	eyebrow: 10,
+	data: 12
+};
+/** Default CSS weight of each role (styles/core.css `--lab-w-*`). */
+const ROLE_WEIGHT = {
+	label: 550,
+	note: 450,
+	title: 650,
+	measure: 650,
+	eyebrow: 650,
+	data: 650
+};
+const NAMED_WEIGHT = {
+	regular: 450,
+	medium: 550,
+	semibold: 650,
+	bold: 750
+};
+/** Fallback advance for a character outside the table: a wide letter, so a box never comes up short. */
+const UNKNOWN = .72;
+/** Combining marks and zero-width joiners draw on the previous glyph. */
+const ZERO_WIDTH = /[\u0300-\u036f\u200b-\u200d\u2060\ufe0f]/;
+/** Scripts drawn about a full em per glyph (Bangla, Devanagari, CJK). */
+const WIDE = /[\u0980-\u09ff\u0900-\u097f\u3000-\u9fff\uac00-\ud7af]/;
+const DIGITS = "0123456789";
+const widestDigit = (table) => Math.max(...[...DIGITS].map((d) => table[d] ?? UNKNOWN));
+const TABULAR_REGULAR = widestDigit(ADVANCE_REGULAR);
+const TABULAR_BOLD = widestDigit(ADVANCE_BOLD);
+const weightOf = (o, role) => typeof o.weight === "number" ? o.weight : o.weight ? NAMED_WEIGHT[o.weight] : ROLE_WEIGHT[role];
+/** Width in em of one character at weight `t` (0 regular, 1 bold). */
+function advance(ch, t, tabular) {
+	if (ZERO_WIDTH.test(ch)) return 0;
+	if (ch === " " || ch === " ") return .2;
+	if (tabular && DIGITS.includes(ch)) return TABULAR_REGULAR + (TABULAR_BOLD - TABULAR_REGULAR) * t;
+	const a = ADVANCE_REGULAR[ch];
+	const b = ADVANCE_BOLD[ch];
+	if (a === undefined || b === undefined) return WIDE.test(ch) ? 1 : UNKNOWN;
+	return a + (b - a) * t;
+}
+/** The width `text` takes in figure units, drawn in `role` (default `label`). */
+function textWidth(text, options = {}) {
+	const role = options.role ?? "label";
+	const size = options.size ?? ROLE_SIZE[role];
+	const s = String(text);
+	if (role === "data") return Math.round([...s].length * ADVANCE_MONO * size * 100) / 100;
+	const caps = options.caps ?? role === "eyebrow";
+	const t = Math.max(0, Math.min(1, (weightOf(options, role) - 450) / 300));
+	const glyphs = [...caps ? s.toUpperCase() : s];
+	const tabular = options.tabular ?? true;
+	const em = glyphs.reduce((w, ch) => w + advance(ch, t, tabular), 0);
+	const tracking = caps ? .06 * Math.max(0, glyphs.length - 1) : 0;
+	return Math.round((em + tracking) * size * 100) / 100;
+}
+/**
+* The box `text` occupies when drawn at (x, y) with `anchor` and `baseline`, in figure units. The
+* height is the line box (1.2 em); an alphabetic baseline puts about 0.8 em above `y`.
+*/
+function textBox(text, o) {
+	const size = o.size ?? ROLE_SIZE[o.role ?? "label"];
+	const w = textWidth(text, o);
+	const h = Math.round(size * 1.2 * 100) / 100;
+	const x = o.anchor === "middle" ? o.x - w / 2 : o.anchor === "end" ? o.x - w : o.x;
+	const top = o.baseline === "middle" ? o.y - h / 2 : o.baseline === "hanging" ? o.y - size * .1 : o.y - size * .9;
+	return {
+		x: Math.round(x * 100) / 100,
+		y: Math.round(top * 100) / 100,
+		w,
+		h
+	};
+}
+/** Script runs are drawn this much smaller (Stage `<Label>` and the labs `<RichText>`). */
+const SCRIPT_SCALE = .72;
+/**
+* The box a label covers when drawn at `at` (plus `dx, dy`) with its anchor and baseline, measured
+* from the advance table. `text` is the drawn string, or the rich spans of a `_` / `^` label (parse
+* them with Stage's `parseRichText`) so a script run counts at its drawn size and the markers
+* count as nothing.
+*/
+function labelBox(text, at, o = {}) {
+	const size = o.size ?? ROLE_SIZE[o.role ?? "label"];
+	const w = typeof text === "object" ? text.reduce((sum, sp) => sum + textWidth(sp.text, {
+		...o,
+		size: sp.script === "base" ? size : size * SCRIPT_SCALE
+	}), 0) : textWidth(text, o);
+	const x = at.x + (o.dx ?? 0);
+	const y = at.y + (o.dy ?? 0);
+	const h = size * 1.2;
+	const top = o.baseline === "auto" ? y - size * .9 : o.baseline === "hanging" ? y - size * .1 : y - h / 2;
+	const cx = o.anchor === "start" ? x + w / 2 : o.anchor === "end" ? x - w / 2 : x;
+	const pad = o.pad ?? 0;
+	const r2 = (v) => Math.round(v * 100) / 100;
+	return {
+		x: r2(cx),
+		y: r2(top + h / 2),
+		halfWidth: r2(w / 2 + pad),
+		halfHeight: r2(h / 2 + pad)
+	};
+}
+
+//#endregion
+export { ROLE_SIZE, labelBox, textBox, textWidth };

package/dist/kit/figure/text.d.mts

@@ -85,17 +85,6 @@ export interface FigParagraphProps extends Omit<FigTextProps, 'fit' | 'children'
  */
 export declare function FigParagraph({ x, y, width, size, lineHeight, children, ...rest }: FigParagraphProps): ReactNode;
 export declare function FigText({ x, y, size, weight, tone, anchor, baseline, rotate, halo, color, opacity, fontSize, fit, caps, className, children }: FigTextProps): ReactNode;
-/** A small rounded tag with text inside (legend chips, value pills, unit badges). */
-export declare function FigTag({ x, y, children, color, anchor, width }: {
-  x: number;
-  y: number;
-  children: ReactNode;
-  /** Fill colour; text renders inverse on it. */
-  color?: string;
-  anchor?: 'start' | 'middle' | 'end';
-  /** Explicit width (user units). Defaults to an estimate from the text length. */
-  width?: number;
-}): ReactNode;
 /**
  * Wrap a sentence to a width in user units, because SVG `<text>` does not wrap.
  *
@@ -112,7 +101,5 @@ export interface WrapTextOptions {
   /** Optional proportional pixel budget; default character-budget behavior stays unchanged. */
   measureWidth?: (text: string) => number;
 }
-/** Conservative natural glyph slots, shared by categorical layout and proportional wrapping. */
-export declare const measureTextWidth: (text: string) => number;
 export declare function wrapText(text: string, width: number, perChar?: number, options?: WrapTextOptions): string[];
 //#endregion

package/dist/kit/figure/text.mjs

@@ -1,7 +1,8 @@
 'use client';
 
+import { textWidth } from "./text-metrics.mjs";
 import { useLayoutEffect, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 
 //#region src/kit/figure/text.tsx
 /**
@@ -31,10 +32,9 @@ function measuredWidth(el) {
 	}
 }
 /**
-* Roughly how wide one character is at each size, in figure units.
-*
-* Estimates, because the sizes are CSS tokens and nothing can be measured while the markup is being
-* built. They only have to be close enough to choose a line break.
+* A typical character width at each size, in figure units. Widths now come from the measured
+* advance table (`textWidth`, text-metrics.ts); this survives only as `FigParagraph`'s default line
+* pitch and the minimum line budget it hands `wrapText`.
 */
 const CHAR_WIDTH = {
 	eyebrow: 6.2,
@@ -60,7 +60,13 @@ const CHAR_WIDTH = {
 */
 function FigParagraph({ x, y, width, size = "note", lineHeight, children, ...rest }) {
 	const step = lineHeight ?? CHAR_WIDTH[size] * 3;
-	return /* @__PURE__ */ jsx(Fragment$1, { children: wrapText(children, width, CHAR_WIDTH[size]).map((line, index) => /* @__PURE__ */ jsx(FigText, {
+	const measure = (t) => textWidth(t, {
+		role: size,
+		weight: rest.weight,
+		size: rest.fontSize,
+		caps: rest.caps === false ? false : undefined
+	});
+	return /* @__PURE__ */ jsx(Fragment$1, { children: wrapText(children, width, CHAR_WIDTH[size], { measureWidth: measure }).map((line, index) => /* @__PURE__ */ jsx(FigText, {
 		x,
 		y: y + index * step,
 		size,
@@ -70,7 +76,12 @@ function FigParagraph({ x, y, width, size = "note", lineHeight, children, ...res
 }
 function FigText({ x, y, size = "label", weight, tone = "ink", anchor = "start", baseline = "auto", rotate, halo = false, color, opacity, fontSize, fit, caps, className, children }) {
 	const plain = typeof children === "string" || typeof children === "number" ? String(children) : null;
-	const estimate = plain ? [...plain].reduce((w, ch) => w + CHAR_WIDTH[size] * (/[A-Z]/.test(ch) ? 1.45 : /[0-9]/.test(ch) ? 1.1 : 1), 0) * (weight === "bold" || weight === "semibold" ? 1.1 : 1) : Infinity;
+	const estimate = plain ? textWidth(plain, {
+		role: size,
+		weight,
+		size: fontSize,
+		caps: caps === false ? false : undefined
+	}) : Infinity;
 	const estimated = fit !== undefined && estimate > fit ? fit : undefined;
 	const ref = useRef(null);
 	const [squeeze, setSqueeze] = useState(estimated);
@@ -122,34 +133,6 @@ function FigText({ x, y, size = "label", weight, tone = "ink", anchor = "start",
 		children
 	});
 }
-/** A small rounded tag with text inside (legend chips, value pills, unit badges). */
-function FigTag({ x, y, children, color = "var(--fig-hue-1)", anchor = "start", width }) {
-	const pieces = Array.isArray(children) ? children : [children];
-	const text = pieces.every((c) => typeof c === "string" || typeof c === "number") ? pieces.join("") : "";
-	const w = width ?? Math.max(24, text.length * 7.2 + 14);
-	const h = 22;
-	const x0 = anchor === "middle" ? x - w / 2 : anchor === "end" ? x - w : x;
-	return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
-		x: x0,
-		y: y - h / 2,
-		width: w,
-		height: h,
-		rx: h / 2,
-		fill: `color-mix(in oklab, ${color} 16%, var(--fig-paper))`,
-		stroke: color,
-		strokeWidth: 1.5
-	}), /* @__PURE__ */ jsx(FigText, {
-		x: x0 + w / 2,
-		y,
-		anchor: "middle",
-		baseline: "middle",
-		size: "note",
-		className: "fig-tag-text",
-		children
-	})] });
-}
-/** Conservative natural glyph slots, shared by categorical layout and proportional wrapping. */
-const measureTextWidth = (text) => [...text].reduce((sum, char) => sum + (/\s/.test(char) ? 4 : /[MWmw]/.test(char) ? 13 : /[A-Z]/.test(char) ? 10 : 7.4), 0);
 function wrapText(text, width, perChar = 5.6, options = {}) {
 	if (options.measureWidth) {
 		const measure = options.measureWidth, available = Math.max(perChar * 8, width);
@@ -199,4 +182,4 @@ function wrapText(text, width, perChar = 5.6, options = {}) {
 }
 
 //#endregion
-export { FigParagraph, FigTag, FigText, measureTextWidth, wrapText };
+export { FigParagraph, FigText, wrapText };

package/dist/kit/figure/value-control.d.mts

@@ -43,7 +43,6 @@ interface Bound {
 }
 /** One display contract for the placed control and its natural-size field. */
 declare function figureValueText(value: number, step: number, name?: string, unit?: string, format?: (value: number) => string): string;
-/** Natural face width shared by a placed value and a wrapping field. */
 declare const figureValueWidth: (text: string) => number;
 /**
  * A value set where it belongs: a side's length on the side, a resistor's kΩ on the resistor.

package/dist/kit/figure/value-control.mjs

@@ -1,12 +1,14 @@
 'use client';
 
 import { useKeyScale } from "./key-scale.mjs";
+import { textWidth } from "./text-metrics.mjs";
 import { FigText } from "./text.mjs";
 import { HUE, STROKE } from "./figure.mjs";
 import { useMarkDrawn } from "../../runtime/drawn-controls.mjs";
 import { GripLock } from "./grip.mjs";
+import { usePointerDrag } from "./grip-pointer.mjs";
 import { useControlOverride } from "../frame.mjs";
-import { use, useRef, useState } from "react";
+import { use, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/figure/value-control.tsx
@@ -20,7 +22,13 @@ function figureValueText(value, step, name, unit = "", format) {
 	return name ? `${name} = ${amount}` : amount;
 }
 /** Natural face width shared by a placed value and a wrapping field. */
-const figureValueWidth = (text) => r2(text.length * 7.4 + 44);
+/** A value as drawn on its face: the label role, semibold, as written. */
+const valueTextWidth = (text) => textWidth(text, {
+	role: "label",
+	weight: "semibold",
+	caps: false
+});
+const figureValueWidth = (text) => r2(valueTextWidth(text) + 44);
 /**
 * A value set where it belongs: a side's length on the side, a resistor's kΩ on the resistor.
 *
@@ -50,7 +58,23 @@ function FigureValueControl(props) {
 	const { ref: scaleRef, scale } = useKeyScale(Boolean(bound?.hidden || !onChange || policy.hide || policy.lock));
 	const hit = Math.max(props.hit ?? 32, 44 / Math.min(scale.x, scale.y));
 	const drag = useRef(null);
-	const [dragging, setDragging] = useState(false);
+	const { dragging, handlers } = usePointerDrag({
+		locate: (event) => event.clientX,
+		start: (clientX) => {
+			drag.current = {
+				x: clientX,
+				value
+			};
+		},
+		move: (clientX) => {
+			if (drag.current) set(drag.current.value + Math.round((clientX - drag.current.x) / PX_PER_STEP) * step);
+		},
+		end: () => {
+			drag.current = null;
+		},
+		disabled: locked,
+		refuse: () => refuse()
+	});
 	const places = Math.max(0, (String(step).split(".")[1] ?? "").length);
 	const text = figureValueText(value, step, name, unit, props.format);
 	const cy = y + 18;
@@ -67,7 +91,7 @@ function FigureValueControl(props) {
 		strokeWidth: STROKE.hair
 	}) : null;
 	if (bound?.hidden) return null;
-	if (!onChange || policy.hide || policy.lock) return /* @__PURE__ */ jsxs("g", { children: [pill(r2(text.length * 7.4 + 24)), /* @__PURE__ */ jsx(FigText, {
+	if (!onChange || policy.hide || policy.lock) return /* @__PURE__ */ jsxs("g", { children: [pill(r2(valueTextWidth(text) + 24)), /* @__PURE__ */ jsx(FigText, {
 		x,
 		y: cy + 1,
 		size: "label",
@@ -86,24 +110,7 @@ function FigureValueControl(props) {
 	const w = figureValueWidth(text);
 	const left = r2(x - w / 2);
 	const right = r2(x + w / 2);
-	const textW = r2(text.length * 7.4);
-	const down = (event) => {
-		if (locked) return refuse();
-		event.currentTarget.setPointerCapture(event.pointerId);
-		drag.current = {
-			x: event.clientX,
-			value
-		};
-		setDragging(true);
-	};
-	const move = (event) => {
-		if (!drag.current) return;
-		set(drag.current.value + Math.round((event.clientX - drag.current.x) / PX_PER_STEP) * step);
-	};
-	const up = () => {
-		drag.current = null;
-		setDragging(false);
-	};
+	const textW = r2(valueTextWidth(text));
 	const keyDown = (event) => {
 		const big = Math.max(step, Math.round((max - min) / 5 / step) * step);
 		const next = {
@@ -164,10 +171,7 @@ function FigureValueControl(props) {
 		"aria-valuetext": text,
 		"data-dragging": dragging || undefined,
 		"data-locked": locked || undefined,
-		onPointerDown: down,
-		onPointerMove: move,
-		onPointerUp: up,
-		onPointerCancel: up,
+		...handlers,
 		onKeyDown: keyDown,
 		children: [
 			pill(w),

package/dist/kit/figure-drag.mjs

@@ -1,5 +1,6 @@
 'use client';
 
+import { usePointerDrag } from "./figure/grip-pointer.mjs";
 import { useRef, useState } from "react";
 
 //#region src/kit/figure-drag.ts
@@ -17,6 +18,9 @@ import { useRef, useState } from "react";
 * drop target can be tested against the same numbers the scene was drawn with. The grab offset is
 * kept, so the piece stays under the finger where it was picked up rather than jumping to centre.
 *
+* The pointer runs on the shared lifecycle (`usePointerDrag`): capture, lost capture and cancel
+* (which drop nothing), moves at most once per frame, and the tap slop measured in screen pixels.
+*
 * Keyboard parity is the caller's job and is one line: the same `onTap` from Enter or Space.
 */
 const NO_SCROLL = { touchAction: "none" };
@@ -34,53 +38,62 @@ function toFigure(event) {
 }
 function useFigureDrag({ onTap, onDrop, disabled = false }) {
 	const [drag, setDrag] = useState(null);
-	const grab = useRef(null);
+	/** The piece being held: its id, and the grab offset from the pointer to its origin. */
+	const held = useRef(null);
+	const pointer = usePointerDrag({
+		locate: (event) => ({
+			client: {
+				x: event.clientX,
+				y: event.clientY
+			},
+			fig: toFigure(event)
+		}),
+		position: (v) => v.client,
+		slop: TAP_SLOP_PX,
+		disabled,
+		start: (v) => {
+			const h = held.current;
+			if (!h) return false;
+			h.offset = v.fig ? {
+				x: h.origin.x - v.fig.x,
+				y: h.origin.y - v.fig.y
+			} : null;
+			return true;
+		},
+		move: (v) => {
+			const h = held.current;
+			if (!h || !h.offset || !v.fig) return;
+			h.at = {
+				x: v.fig.x + h.offset.x,
+				y: v.fig.y + h.offset.y
+			};
+			setDrag({
+				id: h.id,
+				at: h.at
+			});
+		},
+		end: ({ tap, cancelled, value }) => {
+			const h = held.current;
+			held.current = null;
+			setDrag(null);
+			if (!h || cancelled) return;
+			if (tap) onTap(h.id);
+			else if (value?.fig && h.offset) onDrop(h.id, h.at);
+			else onTap(h.id);
+		}
+	});
 	const handlers = (id, origin) => ({
 		style: NO_SCROLL,
+		...pointer.handlers,
 		onPointerDown: (event) => {
 			if (disabled || event.button > 0) return;
-			const p = toFigure(event) ?? origin;
-			event.currentTarget.setPointerCapture?.(event.pointerId);
-			grab.current = {
+			held.current = {
 				id,
-				pointer: event.pointerId,
-				offset: {
-					x: origin.x - p.x,
-					y: origin.y - p.y
-				},
-				startX: event.clientX,
-				startY: event.clientY,
-				moved: false,
+				origin,
+				offset: null,
 				at: origin
 			};
-		},
-		onPointerMove: (event) => {
-			const g = grab.current;
-			if (!g || g.pointer !== event.pointerId) return;
-			if (!g.moved && Math.hypot(event.clientX - g.startX, event.clientY - g.startY) < TAP_SLOP_PX) return;
-			const p = toFigure(event);
-			if (!p) return;
-			g.moved = true;
-			g.at = {
-				x: p.x + g.offset.x,
-				y: p.y + g.offset.y
-			};
-			setDrag({
-				id: g.id,
-				at: g.at
-			});
-		},
-		onPointerUp: (event) => {
-			const g = grab.current;
-			if (!g || g.pointer !== event.pointerId) return;
-			grab.current = null;
-			setDrag(null);
-			if (g.moved) onDrop(g.id, g.at);
-			else onTap(g.id);
-		},
-		onPointerCancel: () => {
-			grab.current = null;
-			setDrag(null);
+			pointer.handlers.onPointerDown(event);
 		}
 	});
 	return {

package/dist/kit/finance-viz/index.mjs

@@ -4,4 +4,4 @@ import { TradeoffCurve } from "./tradeoff-curve.mjs";
 import { AmountRail } from "./amount-rail.mjs";
 import { ApportionBar } from "./apportion-bar.mjs";
 
-export { AmountRail, ApportionBar, PlotChart, StockTimeline, TradeoffCurve };
+export { ApportionBar, PlotChart, StockTimeline, TradeoffCurve };

package/dist/kit/finance-viz/plot-chart.mjs

@@ -1,6 +1,7 @@
 'use client';
 
 import { Figure, HUE } from "../figure/figure.mjs";
+import { usePointerDrag } from "../figure/grip-pointer.mjs";
 import { Guide, PlotFrame } from "../figure/plot.mjs";
 import { Legend } from "../figure/legend.mjs";
 import { useNarrow } from "../figure/narrow.mjs";
@@ -55,6 +56,17 @@ function PlotChart({ xMax, yMax, yTicks, formatY = (n) => `${Math.round(n)}`, xL
 		event.preventDefault();
 		xControl.onChange(Math.max(controlMin, Math.min(controlMax, next[event.key])));
 	};
+	const scrub = usePointerDrag({
+		locate: (event) => ({
+			x: event.clientX,
+			box: event.currentTarget.querySelector(".lab-figure") ?? event.currentTarget
+		}),
+		start: (p) => {
+			setFromClientX(p.x, p.box);
+			return !xControl?.locked;
+		},
+		move: (p) => setFromClientX(p.x, p.box)
+	});
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: "finance-chart-frame",
@@ -67,13 +79,7 @@ function PlotChart({ xMax, yMax, yTicks, formatY = (n) => `${Math.round(n)}`, xL
 		"aria-valuetext": xControl?.valueText,
 		"aria-disabled": xControl?.locked || undefined,
 		"data-interactive": xControl ? true : undefined,
-		onPointerDown: xControl ? (event) => {
-			event.currentTarget.setPointerCapture(event.pointerId);
-			setFromClientX(event.clientX, event.currentTarget.querySelector(".lab-figure") ?? event.currentTarget);
-		} : undefined,
-		onPointerMove: xControl ? (event) => {
-			if (event.currentTarget.hasPointerCapture(event.pointerId)) setFromClientX(event.clientX, event.currentTarget.querySelector(".lab-figure") ?? event.currentTarget);
-		} : undefined,
+		...xControl ? scrub.handlers : {},
 		onKeyDown: xControl ? keyDown : undefined,
 		style: xControl ? {
 			cursor: xControl.locked ? "not-allowed" : "ew-resize",

package/dist/kit/finance-viz/tradeoff-curve.mjs

@@ -2,6 +2,7 @@
 
 import { Figure, HUE, STROKE } from "../figure/figure.mjs";
 import { snapTo } from "../snap.mjs";
+import { usePointerDrag } from "../figure/grip-pointer.mjs";
 import { Curve, Guide, Marker, PlotFrame } from "../figure/plot.mjs";
 import { Legend } from "../figure/legend.mjs";
 import { useNarrow } from "../figure/narrow.mjs";
@@ -46,6 +47,14 @@ function TradeoffCurve({ domain, falling, rising, optimum, marker, onMarkerChang
 		onMarkerChange(Math.max(x0, Math.min(x1, snapTo(value, step))));
 	};
 	const interactive = Boolean(onMarkerChange);
+	const scrub = usePointerDrag({
+		locate: (event) => ({
+			x: event.clientX,
+			box: event.currentTarget.querySelector(".lab-figure") ?? event.currentTarget
+		}),
+		start: (p) => setFromClientX(p.x, p.box),
+		move: (p) => setFromClientX(p.x, p.box)
+	});
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: "finance-chart-frame",
@@ -58,13 +67,7 @@ function TradeoffCurve({ domain, falling, rising, optimum, marker, onMarkerChang
 		"aria-valuetext": interactive ? markerValueText : undefined,
 		"aria-disabled": interactive && markerLocked || undefined,
 		"data-interactive": interactive || undefined,
-		onPointerDown: onMarkerChange ? (event) => {
-			event.currentTarget.setPointerCapture(event.pointerId);
-			setFromClientX(event.clientX, event.currentTarget.querySelector(".lab-figure") ?? event.currentTarget);
-		} : undefined,
-		onPointerMove: onMarkerChange ? (event) => {
-			if (event.currentTarget.hasPointerCapture(event.pointerId)) setFromClientX(event.clientX, event.currentTarget.querySelector(".lab-figure") ?? event.currentTarget);
-		} : undefined,
+		...onMarkerChange ? scrub.handlers : {},
 		onKeyDown: onMarkerChange ? (event) => {
 			if (marker == null) return;
 			const step = markerStep ?? (x1 - x0) / 100;

package/dist/kit/frame.mjs

@@ -53,7 +53,7 @@ function ControlPolicy({ config, children }) {
 			lock: join(outer.lock, config.lock)
 		};
 	}, [outer, config]);
-	return /* @__PURE__ */ jsx(ControlCtx.Provider, {
+	return /* @__PURE__ */ jsx(ControlCtx, {
 		value: merged,
 		children
 	});

package/dist/kit/freq-tree.mjs

@@ -2,7 +2,6 @@
 
 import { FigText } from "./figure/text.mjs";
 import { STROKE } from "./figure/figure.mjs";
-import "./figure/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/freq-tree.tsx

package/dist/kit/gameshow.mjs

@@ -2,10 +2,19 @@
 
 import { FigText } from "./figure/text.mjs";
 import { STROKE } from "./figure/figure.mjs";
-import "./figure/index.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useReducedMotion } from "@classytic/stage/core";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/gameshow.tsx
+/**
+* Game-show glyph kit, the "make a choice, open the reveal" vocabulary: a DOOR
+* that swings open to show what's behind it, plus a CAR (the prize) and a GOAT
+* (the booby prize) to live behind it. Drawn in PIXEL space, token-coloured, pure
+* SVG. The door's `open` (0→1) animates via an inline CSS transition on the leaf
+* (transform-origin left, swinging aside) so the host just flips the prop. Used by
+* the Monty Hall lab, reusable for any pick-a-box / reveal interaction.
+*/
 const FG = "var(--stage-fg)";
 const BG = "var(--stage-bg)";
 const METAL = "var(--stage-metal)";
@@ -19,6 +28,8 @@ const RECESS = "color-mix(in oklab, var(--stage-fg) 88%, var(--stage-bg))";
 /** A game-show door in box (x,y,w,h). `open` 0→1 swings the leaf aside to reveal
 *  `children` (the prize/goat drawn behind). `picked` rings it; `dim` greys it. */
 function DoorGlyph({ x, y, w, h, label, open = 0, picked = false, dim = false, children }) {
+	const clipId = `door-clip-${useId()}`;
+	const reducedMotion = useReducedMotion();
 	const r = Math.min(12, w * .12);
 	const inset = Math.max(4, w * .06);
 	const ix = x + inset, iy = y + inset, iw = w - inset * 2, ih = h - inset * 2;
@@ -45,7 +56,7 @@ function DoorGlyph({ x, y, w, h, label, open = 0, picked = false, dim = false, c
 				opacity: .4
 			}),
 			/* @__PURE__ */ jsx("clipPath", {
-				id: `door-clip-${label ?? ""}-${x}-${y}`,
+				id: clipId,
 				children: /* @__PURE__ */ jsx("rect", {
 					x: ix,
 					y: iy,
@@ -55,7 +66,7 @@ function DoorGlyph({ x, y, w, h, label, open = 0, picked = false, dim = false, c
 				})
 			}),
 			/* @__PURE__ */ jsxs("g", {
-				clipPath: `url(#door-clip-${label ?? ""}-${x}-${y})`,
+				clipPath: `url(#${clipId})`,
 				children: [
 					/* @__PURE__ */ jsx("rect", {
 						x: ix,
@@ -79,7 +90,7 @@ function DoorGlyph({ x, y, w, h, label, open = 0, picked = false, dim = false, c
 				style: {
 					transform: `scaleX(${Math.max(.04, 1 - open)})`,
 					transformOrigin: `${ix}px ${iy + ih / 2}px`,
-					transition: "transform 0.5s cubic-bezier(.4,0,.2,1)"
+					transition: reducedMotion ? "none" : "transform 0.5s cubic-bezier(.4,0,.2,1)"
 				},
 				children: [
 					/* @__PURE__ */ jsx("rect", {
@@ -124,7 +135,7 @@ function DoorGlyph({ x, y, w, h, label, open = 0, picked = false, dim = false, c
 						stroke: "color-mix(in oklab, black 25%, transparent)",
 						strokeWidth: STROKE.hair
 					}),
-					label != null && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("circle", {
+					label != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
 						cx: ix + iw * .5,
 						cy: iy + ih * .3,
 						r: Math.max(11, w * .16),