@classytic/labs 0.3.0 → 0.4.0

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

@@ -1,5 +1,4 @@
 import { CSSProperties, ReactNode } from "react";
-
 //#region src/kit/figure/body.d.ts
 interface BallProps {
   cx: number;
@@ -12,32 +11,16 @@ interface BallProps {
   flash?: number;
   flashColor?: string;
   opacity?: number;
+  /** Physical spheres may carry a highlight; abstract nodes should disable it. */
+  sheen?: boolean;
   /** Selected/active: thicker outline in the ink colour. */
   active?: boolean;
   className?: string;
   style?: CSSProperties;
 }
-declare function Ball({
-  cx,
-  cy,
-  r,
-  color,
-  label,
-  flash,
-  flashColor,
-  opacity,
-  active,
-  className,
-  style
-}: BallProps): ReactNode;
+declare function Ball({ cx, cy, r, color, label, flash, flashColor, opacity, sheen, active, className, style }: BallProps): ReactNode;
 /** Crowd particle: fill + outline only (no sheen), tuned for 20–200 instances. */
-declare function Particle({
-  x,
-  y,
-  r,
-  color,
-  opacity
-}: {
+declare function Particle({ x, y, r, color, opacity }: {
   x: number;
   y: number;
   r?: number;
@@ -58,17 +41,6 @@ interface BlockProps {
   style?: CSSProperties;
 }
 /** A rounded solid mass (a block on a ramp, a tile, a cell in a grid). */
-declare function Block({
-  x,
-  y,
-  w,
-  h,
-  color,
-  label,
-  radius,
-  active,
-  className,
-  style
-}: BlockProps): ReactNode;
+declare function Block({ x, y, w, h, color, label, radius, active, className, style }: BlockProps): ReactNode;
 //#endregion
 export { Ball, BallProps, Block, BlockProps, Particle };

package/dist/kit/figure/body.mjs

@@ -5,8 +5,8 @@ import { FigText } from "./text.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/figure/body.tsx
-function Ball({ cx, cy, r, color = "var(--fig-hue-1)", label, flash = 0, flashColor = "var(--fig-warn)", opacity, active = false, className, style }) {
-	const sheen = r >= 6;
+function Ball({ cx, cy, r, color = "var(--fig-hue-1)", label, flash = 0, flashColor = "var(--fig-warn)", opacity, sheen = true, active = false, className, style }) {
+	const showSheen = sheen && r >= 6;
 	return /* @__PURE__ */ jsxs("g", {
 		className,
 		style,
@@ -29,7 +29,7 @@ function Ball({ cx, cy, r, color = "var(--fig-hue-1)", label, flash = 0, flashCo
 				stroke: active ? "var(--fig-ink)" : shade(color),
 				strokeWidth: active ? STROKE.edge : STROKE.hair
 			}),
-			sheen && /* @__PURE__ */ jsx("ellipse", {
+			showSheen && /* @__PURE__ */ jsx("ellipse", {
 				cx: cx - r * .3,
 				cy: cy - r * .34,
 				rx: r * .32,

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

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/kit/figure/container.d.ts
 type GlassShape = 'beaker' | 'box' | 'flask' | 'tube' | 'cylinder';
 interface GlassProps {
@@ -32,29 +31,9 @@ declare function glassInner(x: number, y: number, w: number, h: number, shape?:
   w: number;
   h: number;
 };
-declare function Glass({
-  x,
-  y,
-  w,
-  h,
-  shape,
-  fill,
-  liquid,
-  liquidOpacity,
-  label,
-  rim,
-  shadow,
-  children,
-  overlay
-}: GlassProps): ReactNode;
+declare function Glass({ x, y, w, h, shape, fill, liquid, liquidOpacity, label, rim, shadow, children, overlay }: GlassProps): ReactNode;
 /** Rising bubbles inside a vessel (call inside <Glass>; pass the inner rect and a phase). */
-declare function Bubbles({
-  inner,
-  liquidTop,
-  count,
-  phase,
-  color
-}: {
+declare function Bubbles({ inner, liquidTop, count, phase, color }: {
   inner: {
     x: number;
     y: number;
@@ -67,15 +46,7 @@ declare function Bubbles({
   color?: string;
 }): ReactNode;
 /** A translucent field/region (a gas volume, an electric field, a tissue) with a soft edge. */
-declare function Region({
-  x,
-  y,
-  w,
-  h,
-  color,
-  radius,
-  label
-}: {
+declare function Region({ x, y, w, h, color, radius, label }: {
   x: number;
   y: number;
   w: number;

package/dist/kit/figure/container.mjs

@@ -61,6 +61,8 @@ function Glass({ x, y, w, h, shape = "beaker", fill = 0, liquid = "var(--fig-hue
 	const d = silhouette(x, y, w, h, shape);
 	const inner = glassInner(x, y, w, h, shape);
 	const liq = Math.max(0, Math.min(1, fill));
+	const overfilled = Math.max(0, fill - 1);
+	const rise = Math.min(inner.h * .12, overfilled * inner.h);
 	const liquidTop = inner.y + inner.h - liq * inner.h;
 	const wall = STROKE.edge;
 	const bot = y + h - wall;
@@ -117,6 +119,14 @@ function Glass({ x, y, w, h, shape = "beaker", fill = 0, liquid = "var(--fig-hue
 				})
 			]
 		}),
+		overfilled > 0 && /* @__PURE__ */ jsx("path", {
+			d: `M ${inner.x} ${inner.y} h ${inner.w} v ${-rise} q ${-inner.w * .25} ${rise * .6} ${-inner.w * .5} 0 q ${-inner.w * .25} ${-rise * .6} ${-inner.w * .5} 0 Z`,
+			fill: liquid,
+			fillOpacity: Math.min(1, liquidOpacity + .2),
+			stroke: liquid,
+			strokeWidth: STROKE.line,
+			strokeLinejoin: "round"
+		}),
 		/* @__PURE__ */ jsx("path", {
 			d: d.replace(/\s*Z\s*$/, ""),
 			fill: "none",

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

@@ -0,0 +1,39 @@
+import { ReactNode } from "react";
+//#region src/kit/figure/digits.d.ts
+interface FigDigitsProps {
+  x: number;
+  y: number;
+  /** Size in figure units. An instrument's own scale, not the document's. */
+  size: number;
+  /** 400 to 800. A moulded or printed number is usually heavy. */
+  weight?: number;
+  anchor?: 'start' | 'middle' | 'end';
+  /** Explicit, because the face colour decides it rather than a theme tone. */
+  color?: string;
+  /**
+   * Monospace, for anything that counts.
+   *
+   * A proportional digit changes width as the value changes, so a running counter visibly jitters.
+   * Real instruments use a fixed pitch for the same reason.
+   */
+  mono?: boolean;
+  /** Letter spacing, e.g. '0.09em' for an engraved legend. */
+  tracking?: string;
+  /** A halo behind the glyphs, for text sitting over a busy face. */
+  halo?: boolean;
+  /**
+   * Fixed-width digits without switching to a monospace family.
+   *
+   * What a meter reading actually needs: the face keeps the document's typeface, but the digits
+   * stop changing width, so a needle sweeping past 9 to 10 does not shove the number sideways.
+   */
+  tabular?: boolean;
+  /** `central` centres the glyphs on `y`, for a number inside a tick or a dial. */
+  baseline?: 'central';
+  /** Let clicks through, for a label drawn over an interactive control. */
+  inert?: boolean;
+  children: ReactNode;
+}
+declare function FigDigits({ x, y, size, weight, anchor, color, mono, tracking, halo, tabular, baseline, inert, children }: FigDigitsProps): ReactNode;
+//#endregion
+export { FigDigits, FigDigitsProps };

package/dist/kit/figure/digits.mjs

@@ -0,0 +1,30 @@
+'use client';
+
+import { jsx } from "react/jsx-runtime";
+
+//#region src/kit/figure/digits.tsx
+function FigDigits({ x, y, size, weight = 700, anchor = "middle", color, mono = false, tracking, halo = false, tabular = false, baseline, inert = false, children }) {
+	return /* @__PURE__ */ jsx("text", {
+		x,
+		y,
+		textAnchor: anchor,
+		fill: color,
+		fontSize: size,
+		fontWeight: weight,
+		fontFamily: mono ? "monospace" : void 0,
+		dominantBaseline: baseline,
+		pointerEvents: inert ? "none" : void 0,
+		style: tracking || tabular ? {
+			...tracking ? { letterSpacing: tracking } : {},
+			...tabular ? { fontVariantNumeric: "tabular-nums" } : {}
+		} : void 0,
+		paintOrder: halo ? "stroke" : void 0,
+		stroke: halo ? "var(--fig-paper)" : void 0,
+		strokeWidth: halo ? 3 : void 0,
+		strokeLinejoin: halo ? "round" : void 0,
+		children
+	});
+}
+
+//#endregion
+export { FigDigits };

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

@@ -1,7 +1,6 @@
 import { CSSProperties, ReactNode } from "react";
-
 //#region src/kit/figure/figure.d.ts
-type FigDomain = 'chem' | 'physics' | 'biology' | 'math' | 'commerce';
+type FigDomain = 'chem' | 'physics' | 'biology' | 'math' | 'commerce' | 'computing';
 /** Stable id prefix for defs inside the nearest <Figure>. */
 declare function useFigureId(): string;
 /** `url(#…)` reference to a shared def (`shadow`, `glow`) or a caller-registered one. */
@@ -18,18 +17,20 @@ interface FigureProps {
   preserveAspectRatio?: string;
   /** Decorative figures (label still required for the text alternative in the transcript). */
   decorative?: boolean;
+  /** Allows keyboard-operable FigureAction descendants; changes the SVG from image to group semantics. */
+  interactive?: boolean;
   children?: ReactNode;
 }
-declare function Figure({
-  viewBox,
-  domain,
-  label,
-  className,
-  style,
-  preserveAspectRatio,
-  decorative,
-  children
-}: FigureProps): ReactNode;
+/**
+ * A scene's viewBox width is its TYPE SCALE, because `font-size` inside an SVG resolves in user
+ * units and `.lab-figure` is always `width: 100%`. On-screen size is `token × container ÷ viewBox`,
+ * so a 720-unit scene at 390 px sets its body text at 6.5 px while a 340-unit one sets it at 13.8.
+ * Keep a scene at or below about 440 units wide, and compose tall rather than wide, or its labels
+ * are unreadable on a phone. Normalizing the tokens against the viewBox here was tried and reverted:
+ * it made every wide scene's text legible and collided 35 of them, so the drawing is what has to
+ * change, one scene at a time.
+ */
+declare function Figure({ viewBox, domain, label, className, style, preserveAspectRatio, decorative, interactive, children }: FigureProps): ReactNode;
 /** Stroke roles → user-unit widths (mirrors --fig-* in styles/figure.css). */
 type StrokeRole = 'hair' | 'line' | 'edge' | 'bold';
 declare const STROKE: Record<StrokeRole, number>;
@@ -50,6 +51,24 @@ declare const HUE: {
   readonly wood: "var(--fig-wood)";
   readonly glass: "var(--fig-glass)";
   readonly liquid: "var(--fig-liquid)";
+  readonly device: "var(--fig-device)";
+  readonly deviceSoft: "var(--fig-device-soft)";
+  readonly deviceEdge: "var(--fig-device-edge)";
+  readonly cavity: "var(--fig-cavity)";
+  /**
+   * Observed solids, pinned like the device ladder so a theme change cannot restate the evidence.
+   *
+   * Use these ONLY for a colour a learner reads off the apparatus, above all a precipitate. Every
+   * other pale value here is mixed toward `--fig-paper`, which is the page background and so dark
+   * in dark mode, and a white precipitate drawn that way vanishes in one theme.
+   */
+  readonly solidWhite: "var(--fig-solid-white)";
+  readonly solidCream: "var(--fig-solid-cream)";
+  readonly solidYellow: "var(--fig-solid-yellow)";
+  readonly solidPurple: "var(--fig-solid-purple)";
+  readonly solidDark: "var(--fig-solid-dark)";
+  readonly obsDark: "var(--fig-obs-dark)";
+  readonly obsLit: "var(--fig-obs-lit)";
 };
 /** A colour mixed toward the paper (for fills that must recede in both themes). */
 declare const tint: (color: string, pct: number) => string;
@@ -58,5 +77,52 @@ declare const shade: (color: string, pct?: number) => string;
 /** A colour at reduced alpha (for glows and shaded areas). */
 declare const alpha: (color: string, pct: number) => string;
 declare const fmt: (n: number, digits?: number) => string;
+/**
+ * A number in the notation chemistry actually uses: `1.8 × 10⁻¹⁰`, not `1.8e-10`.
+ *
+ * `toExponential` prints for a machine. It was going straight onto figure labels, so a solubility
+ * product read `1.1e-12`, a concentration read `1e-6 mol/dm³`, and a mixture two hundred times
+ * under its limit announced itself as `2e+2 times under it`. None of those are how the quantity is
+ * written in any book the learner will ever open, and the last one is worse than ugly: it dresses
+ * the plain number 200 up as something that needs decoding.
+ *
+ * So the exponent is only reached for when it earns its place. Between a hundredth and ten thousand
+ * the ordinary decimal is shorter AND clearer, and that band covers most of what a learner
+ * measures; outside it the mantissa and a real superscripted power of ten are used.
+ *
+ * The band's lower edge is 0.01 rather than 0.001 because of what a render showed: a figure listed
+ * two concentrations one above the other and got `0.001` over `10⁻⁴`. Both were right and the pair
+ * was unreadable, because comparing two numbers means comparing their notation first. Dropping the
+ * edge puts every concentration a learner mixes on the same side of it.
+ */
+declare function sci(value: number, digits?: number): string;
+/**
+ * A material: the four opaque values an object is built from.
+ *
+ * Flat vector illustration reads as DESIGNED when every object is built from one small ramp, and
+ * as a colouring book when each shape invents its own tint. Ours were inventing: a single crucible
+ * carried about ten distinct colours (`tint(paper,78)`, `tint(paper,74)`, `tint(paper,62)`,
+ * `alpha(paper,60)`, `alpha(hot,30)`…) and five stroke weights. The published guidance is blunt
+ * about both — three to six colours per illustration, one consistent stroke weight, opaque shapes
+ * rather than transparency — and about what happens when you ignore it.
+ *
+ * So the ramp is fixed and computed once per object:
+ *
+ *   line   the contour. One weight, everywhere: `STROKE.line`.
+ *   light  the lit face, up and to the left. The light comes from one direction, always.
+ *   base   the body.
+ *   shade  the turned-away face and any recess.
+ *
+ * Every value is a `color-mix` toward ink or paper, so all four are OPAQUE. Reach for `alpha`
+ * only for something genuinely translucent — a flame, a liquid seen through glass — and never to
+ * fake a darker shade.
+ */
+interface Material {
+  readonly line: string;
+  readonly light: string;
+  readonly base: string;
+  readonly shade: string;
+}
+declare const material: (color: string) => Material;
 //#endregion
-export { FigDomain, Figure, FigureProps, HUE, STROKE, StrokeRole, alpha, figUrl, fmt, shade, tint, useFigureId };
+export { FigDomain, Figure, FigureProps, HUE, Material, STROKE, StrokeRole, alpha, figUrl, fmt, material, sci, shade, tint, useFigureId };

package/dist/kit/figure/figure.mjs

@@ -22,11 +22,22 @@ import { jsx, jsxs } from "react/jsx-runtime";
 const Ctx = createContext(null);
 /** Stable id prefix for defs inside the nearest <Figure>. */
 function useFigureId() {
-	return useContext(Ctx)?.uid ?? "fig";
+	const ctx = useContext(Ctx);
+	const localUid = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+	return ctx?.uid ?? `fig${localUid}`;
 }
 /** `url(#…)` reference to a shared def (`shadow`, `glow`) or a caller-registered one. */
 const figUrl = (uid, name) => `url(#${uid}-${name})`;
-function Figure({ viewBox, domain, label, className, style, preserveAspectRatio, decorative = false, children }) {
+/**
+* A scene's viewBox width is its TYPE SCALE, because `font-size` inside an SVG resolves in user
+* units and `.lab-figure` is always `width: 100%`. On-screen size is `token × container ÷ viewBox`,
+* so a 720-unit scene at 390 px sets its body text at 6.5 px while a 340-unit one sets it at 13.8.
+* Keep a scene at or below about 440 units wide, and compose tall rather than wide, or its labels
+* are unreadable on a phone. Normalizing the tokens against the viewBox here was tried and reverted:
+* it made every wide scene's text legible and collided 35 of them, so the drawing is what has to
+* change, one scene at a time.
+*/
+function Figure({ viewBox, domain, label, className, style, preserveAspectRatio, decorative = false, interactive = false, children }) {
 	const uid = useId().replace(/:/g, "");
 	const vb = typeof viewBox === "string" ? viewBox : `0 0 ${viewBox[0]} ${viewBox[1]}`;
 	return /* @__PURE__ */ jsx(Ctx.Provider, {
@@ -37,7 +48,7 @@ function Figure({ viewBox, domain, label, className, style, preserveAspectRatio,
 			viewBox: vb,
 			preserveAspectRatio,
 			style,
-			role: decorative ? void 0 : "img",
+			role: decorative ? void 0 : interactive ? "group" : "img",
 			"aria-label": decorative ? void 0 : label,
 			"aria-hidden": decorative || void 0,
 			children: [/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("filter", {
@@ -85,7 +96,25 @@ const HUE = {
 	metal: "var(--fig-metal)",
 	wood: "var(--fig-wood)",
 	glass: "var(--fig-glass)",
-	liquid: "var(--fig-liquid)"
+	liquid: "var(--fig-liquid)",
+	device: "var(--fig-device)",
+	deviceSoft: "var(--fig-device-soft)",
+	deviceEdge: "var(--fig-device-edge)",
+	cavity: "var(--fig-cavity)",
+	/**
+	* Observed solids, pinned like the device ladder so a theme change cannot restate the evidence.
+	*
+	* Use these ONLY for a colour a learner reads off the apparatus, above all a precipitate. Every
+	* other pale value here is mixed toward `--fig-paper`, which is the page background and so dark
+	* in dark mode, and a white precipitate drawn that way vanishes in one theme.
+	*/
+	solidWhite: "var(--fig-solid-white)",
+	solidCream: "var(--fig-solid-cream)",
+	solidYellow: "var(--fig-solid-yellow)",
+	solidPurple: "var(--fig-solid-purple)",
+	solidDark: "var(--fig-solid-dark)",
+	obsDark: "var(--fig-obs-dark)",
+	obsLit: "var(--fig-obs-lit)"
 };
 /** A colour mixed toward the paper (for fills that must recede in both themes). */
 const tint = (color, pct) => `color-mix(in oklab, ${color} ${pct}%, var(--fig-paper))`;
@@ -94,6 +123,53 @@ const shade = (color, pct = 70) => `color-mix(in oklab, ${color} ${pct}%, var(--
 /** A colour at reduced alpha (for glows and shaded areas). */
 const alpha = (color, pct) => `color-mix(in oklab, ${color} ${pct}%, transparent)`;
 const fmt = (n, digits = 1) => Number(n.toFixed(digits)).toString();
+const SUPERSCRIPT = [
+	"⁰",
+	"¹",
+	"²",
+	"³",
+	"⁴",
+	"⁵",
+	"⁶",
+	"⁷",
+	"⁸",
+	"⁹"
+];
+/**
+* A number in the notation chemistry actually uses: `1.8 × 10⁻¹⁰`, not `1.8e-10`.
+*
+* `toExponential` prints for a machine. It was going straight onto figure labels, so a solubility
+* product read `1.1e-12`, a concentration read `1e-6 mol/dm³`, and a mixture two hundred times
+* under its limit announced itself as `2e+2 times under it`. None of those are how the quantity is
+* written in any book the learner will ever open, and the last one is worse than ugly: it dresses
+* the plain number 200 up as something that needs decoding.
+*
+* So the exponent is only reached for when it earns its place. Between a hundredth and ten thousand
+* the ordinary decimal is shorter AND clearer, and that band covers most of what a learner
+* measures; outside it the mantissa and a real superscripted power of ten are used.
+*
+* The band's lower edge is 0.01 rather than 0.001 because of what a render showed: a figure listed
+* two concentrations one above the other and got `0.001` over `10⁻⁴`. Both were right and the pair
+* was unreadable, because comparing two numbers means comparing their notation first. Dropping the
+* edge puts every concentration a learner mixes on the same side of it.
+*/
+function sci(value, digits = 1) {
+	if (!Number.isFinite(value)) return "—";
+	if (value === 0) return "0";
+	const magnitude = Math.abs(value);
+	if (magnitude >= .01 && magnitude < 1e4) return fmt(value, magnitude < 1 ? digits + 2 : digits);
+	const exponent = Math.floor(Math.log10(magnitude));
+	const mantissa = value / 10 ** exponent;
+	const power = `${exponent < 0 ? "⁻" : ""}${String(Math.abs(exponent)).split("").map((d) => SUPERSCRIPT[Number(d)]).join("")}`;
+	const lead = fmt(mantissa, digits);
+	return lead === "1" ? `10${power}` : `${lead} × 10${power}`;
+}
+const material = (color) => ({
+	line: shade(color, 52),
+	light: tint(color, 26),
+	base: tint(color, 58),
+	shade: tint(color, 84)
+});
 
 //#endregion
-export { Figure, HUE, STROKE, alpha, figUrl, fmt, shade, tint, useFigureId };
+export { Figure, HUE, STROKE, alpha, figUrl, fmt, material, sci, shade, tint, useFigureId };

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

@@ -0,0 +1,54 @@
+//#region src/kit/figure/gauge.d.ts
+/**
+ * Stroke widths that encode PHYSICAL THICKNESS, not contour weight.
+ *
+ * ── Why this is not `STROKE` ────────────────────────────────────────────────────────────────────
+ * `STROKE` has four roles because a CONTOUR only needs four: a hairline, a normal edge, an
+ * emphasised edge, and a heavy one. Keeping every outline in the library on those four is most of
+ * what makes the drawings look like one set.
+ *
+ * Apparatus drawings use a stroke for something else entirely. A plug pin, a cable, a coil turn
+ * and a steel strut are all drawn as lines whose WIDTH IS THE OBJECT: a 16-unit stroke is not an
+ * emphatic outline, it is a pin seen end-on. Pulling those onto the contour scale does not tidy
+ * them, it makes the pin thinner than the wire beside it and destroys the drawing.
+ *
+ * So there are two scales with two jobs, and a reader can tell from the call site which question
+ * was being asked. The names are indicative rather than prescriptive, the same way `STROKE.hair`
+ * does not mean the line is literally a hair: pick the one whose thickness matches the thing.
+ *
+ * ── Why it exists at all ────────────────────────────────────────────────────────────────────────
+ * These were bare numbers in six apparatus labs, about 130 of them, which `figure:check` flags for
+ * good reason: a magic width is almost always an accident, and the handful that are deliberate
+ * should say so. This is how they say so.
+ */
+declare const GAUGE: {
+  /** A scratched guide line. */
+  readonly hair: 1;
+  /** A scale marking or a thin leader. */
+  readonly fine: 1.5;
+  /** Hook-up wire, a coil turn seen from the side. */
+  readonly wire: 2;
+  /** A thicker lead, or a drawn edge that has to carry over a busy fill. */
+  readonly lead: 2.5;
+  /** A bar, a spoke, a terminal. */
+  readonly bar: 3;
+  /** A rod or a shaft. */
+  readonly rod: 3.5;
+  /** A strut or a frame member. */
+  readonly strut: 4;
+  /** A cable, or a winding drawn as one body. */
+  readonly cable: 5;
+  /** A duct, a thick winding, a housing rib. */
+  readonly duct: 6;
+  /** A beam. */
+  readonly beam: 7;
+  /** A block seen edge-on. */
+  readonly block: 8;
+  /** A core, a heavy casing wall. */
+  readonly core: 9;
+  /** A pin or a slab: an object whose whole width is the stroke. */
+  readonly pin: 16;
+};
+type GaugeRole = keyof typeof GAUGE;
+//#endregion
+export { GAUGE, GaugeRole };

package/dist/kit/figure/gauge.mjs

@@ -0,0 +1,54 @@
+//#region src/kit/figure/gauge.ts
+/**
+* Stroke widths that encode PHYSICAL THICKNESS, not contour weight.
+*
+* ── Why this is not `STROKE` ────────────────────────────────────────────────────────────────────
+* `STROKE` has four roles because a CONTOUR only needs four: a hairline, a normal edge, an
+* emphasised edge, and a heavy one. Keeping every outline in the library on those four is most of
+* what makes the drawings look like one set.
+*
+* Apparatus drawings use a stroke for something else entirely. A plug pin, a cable, a coil turn
+* and a steel strut are all drawn as lines whose WIDTH IS THE OBJECT: a 16-unit stroke is not an
+* emphatic outline, it is a pin seen end-on. Pulling those onto the contour scale does not tidy
+* them, it makes the pin thinner than the wire beside it and destroys the drawing.
+*
+* So there are two scales with two jobs, and a reader can tell from the call site which question
+* was being asked. The names are indicative rather than prescriptive, the same way `STROKE.hair`
+* does not mean the line is literally a hair: pick the one whose thickness matches the thing.
+*
+* ── Why it exists at all ────────────────────────────────────────────────────────────────────────
+* These were bare numbers in six apparatus labs, about 130 of them, which `figure:check` flags for
+* good reason: a magic width is almost always an accident, and the handful that are deliberate
+* should say so. This is how they say so.
+*/
+const GAUGE = {
+	/** A scratched guide line. */
+	hair: 1,
+	/** A scale marking or a thin leader. */
+	fine: 1.5,
+	/** Hook-up wire, a coil turn seen from the side. */
+	wire: 2,
+	/** A thicker lead, or a drawn edge that has to carry over a busy fill. */
+	lead: 2.5,
+	/** A bar, a spoke, a terminal. */
+	bar: 3,
+	/** A rod or a shaft. */
+	rod: 3.5,
+	/** A strut or a frame member. */
+	strut: 4,
+	/** A cable, or a winding drawn as one body. */
+	cable: 5,
+	/** A duct, a thick winding, a housing rib. */
+	duct: 6,
+	/** A beam. */
+	beam: 7,
+	/** A block seen edge-on. */
+	block: 8,
+	/** A core, a heavy casing wall. */
+	core: 9,
+	/** A pin or a slab: an object whose whole width is the stroke. */
+	pin: 16
+};
+
+//#endregion
+export { GAUGE };

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

@@ -1,5 +1,4 @@
 import { ReactNode } from "react";
-
 //#region src/kit/figure/illustration.d.ts
 interface IllustrationProps {
   /** Light-theme asset URL (the host's `public/…`). */
@@ -15,14 +14,6 @@ interface IllustrationProps {
   loading?: 'lazy' | 'eager';
   className?: string;
 }
-declare function Illustration({
-  src,
-  srcDark,
-  alt,
-  ratio,
-  caption,
-  loading,
-  className
-}: IllustrationProps): ReactNode;
+declare function Illustration({ src, srcDark, alt, ratio, caption, loading, className }: IllustrationProps): ReactNode;
 //#endregion
 export { Illustration, IllustrationProps };

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

@@ -1,7 +1,13 @@
-import { FigDomain, Figure, FigureProps, HUE, STROKE, StrokeRole, alpha, figUrl, fmt, shade, tint, useFigureId } from "./figure.mjs";
-import { FigTag, FigText, FigTextProps, FigTextSize, FigTextTone } from "./text.mjs";
+import { FigDomain, Figure, FigureProps, HUE, Material, STROKE, StrokeRole, alpha, figUrl, fmt, material, sci, shade, tint, useFigureId } from "./figure.mjs";
+import { GAUGE, GaugeRole } from "./gauge.mjs";
+import { FigDigits, FigDigitsProps } from "./digits.mjs";
+import { FigParagraph, FigParagraphProps, FigTag, FigText, FigTextProps, FigTextSize, FigTextTone, wrapText } from "./text.mjs";
 import { Ball, BallProps, Block, BlockProps, Particle } from "./body.mjs";
 import { Bubbles, Glass, GlassProps, GlassShape, Region, glassInner } from "./container.mjs";
 import { Arrow, ArrowProps, Ground, Ray, Track } from "./beam.mjs";
 import { Area, Curve, Marker, PlotBox, PlotFrame, PlotFrameProps, SegmentBar, scale } from "./plot.mjs";
-import { Illustration, IllustrationProps } from "./illustration.mjs";
+import { Legend, LegendEntry, LegendMark, LegendProps } from "./legend.mjs";
+import { Illustration, IllustrationProps } from "./illustration.mjs";
+import { FigureAction } from "./action.mjs";
+import { AccessPathGlyph, DataPacket, FigureHeader, FigureHeaderProps, FigureStatusLine, FigureStatusLineProps, IndexPage, QueryOperator, StorageNode } from "./system.mjs";
+export { AccessPathGlyph, Area, Arrow, type ArrowProps, Ball, type BallProps, Block, type BlockProps, Bubbles, Curve, DataPacket, FigDigits, type FigDigitsProps, type FigDomain, FigParagraph, type FigParagraphProps, FigTag, FigText, type FigTextProps, type FigTextSize, type FigTextTone, Figure, FigureAction, FigureHeader, type FigureHeaderProps, type FigureProps, FigureStatusLine, type FigureStatusLineProps, GAUGE, type GaugeRole, Glass, type GlassProps, type GlassShape, Ground, HUE, Illustration, type IllustrationProps, IndexPage, Legend, type LegendEntry, type LegendMark, type LegendProps, Marker, type Material, Particle, type PlotBox, PlotFrame, type PlotFrameProps, QueryOperator, Ray, Region, STROKE, SegmentBar, StorageNode, type StrokeRole, Track, alpha, figUrl, fmt, glassInner, material, scale, sci, shade, tint, useFigureId, wrapText };

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

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+//#region src/kit/figure/legend.d.ts
+/** How the thing this entry names is actually drawn. */
+type LegendMark = 'line' | 'dashed' | 'fill' | 'dot';
+interface LegendEntry {
+  label: string;
+  /** Defaults to hue-1, so a single-series legend needs no colour at all. */
+  color?: string;
+  mark?: LegendMark;
+}
+interface LegendProps {
+  /** Left edge of the first entry (user units). */
+  x: number;
+  /** Vertical centre of the row (user units). */
+  y: number;
+  entries: readonly LegendEntry[];
+  /**
+   * Wrap to a new row past this width. Omit to keep every entry on one row, which is right for
+   * two or three short labels and wrong for five.
+   */
+  maxWidth?: number;
+  /** Row height when wrapping. */
+  lineHeight?: number;
+}
+declare function Legend({ x, y, entries, maxWidth, lineHeight }: LegendProps): ReactNode;
+//#endregion
+export { Legend, LegendEntry, LegendMark, LegendProps };