@classytic/labs 0.6.0 → 0.7.0

package/dist/kit/data/categorical-bar-core.mjs

@@ -1,32 +1,36 @@
 'use client';
 
-import { FigText, measureTextWidth, wrapText } from "../figure/text.mjs";
+import { textWidth } from "../figure/text-metrics.mjs";
+import { FigText, wrapText } from "../figure/text.mjs";
 import { Figure, HUE } from "../figure/figure.mjs";
 import { useMarkDrawn } from "../../runtime/drawn-controls.mjs";
 import { GripDot, GripKey, GripSlider } from "../figure/grip.mjs";
 import { Legend, legendLayout } from "../figure/legend.mjs";
 import { useNarrow } from "../figure/narrow.mjs";
-import { GraphBarMark, GraphFrequencyAxis, GraphPanel, GraphTie, sceneGraph } from "../scene/graph.mjs";
-import "../figure/index.mjs";
+import { GraphBarMark, GraphFrequencyAxis, GraphPanel, GraphTie, graphAxisLabelLines, sceneGraph } from "../scene/graph.mjs";
 import { AlgorithmDiagram, AlgorithmEvidenceTable } from "../algorithms/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/data/categorical-bar-core.tsx
+const noteWidth = (text) => textWidth(text, {
+	role: "note",
+	caps: false
+});
 /** Private owner for categorical painting, focused native binding and fixed-scale composition. */
 function CategoricalBarCore({ mode, series, rows, frequencies, parts, totals, ceiling, partControl, frequencyControl, checkControl, verdict = null, feedback, showTable = true, label, xLabel = "Category", yLabel = "Frequency" }) {
 	useMarkDrawn(frequencyControl);
 	useMarkDrawn(partControl, "tap");
 	const { ref, narrow, width } = useNarrow();
 	const single = mode === "single", count = series.length;
-	const lane = Math.max(56, 16 + String(ceiling).length * 8.6);
+	const lane = Math.max(56, 16 + noteWidth(String(ceiling)));
 	const names = rows.flatMap((row) => wrapText(row.category, 52, 7.4, { breakLongWords: true }));
-	const pitch = Math.max(count * lane, ...names.map((line) => 16 + measureTextWidth(line)));
-	const railWidth = Math.max(52, 18 + String(ceiling).length * 8.6);
+	const pitch = Math.max(count * lane, ...names.map((line) => 16 + noteWidth(line)));
+	const railWidth = Math.max(52, 18 + noteWidth(String(ceiling)));
 	const available = width > 0 ? width : narrow ? 344 : 560;
 	const W = single ? Math.max(narrow ? 344 : 560, railWidth + 20 + rows.length * pitch) : Math.max(available - railWidth, 20 + rows.length * pitch);
 	const left = single ? railWidth : 0, plotWidth = W - left - 20;
-	const yTitleRows = single ? wrapText(yLabel, plotWidth, 13.5, { breakLongWords: true }).length : 1;
-	const xTitleRows = wrapText(xLabel, plotWidth, 13.5, { breakLongWords: true }).length;
+	const yTitleRows = single ? graphAxisLabelLines(yLabel, plotWidth).length : 1;
+	const xTitleRows = graphAxisLabelLines(xLabel, plotWidth).length;
 	const top = single ? 96 + Math.max(0, yTitleRows - 1) * 18 : 72;
 	const graph = sceneGraph({
 		x: left,
@@ -35,11 +39,17 @@ function CategoricalBarCore({ mode, series, rows, frequencies, parts, totals, ce
 		h: 180
 	}, [0, rows.length], [0, ceiling]);
 	const baseline = graph.Y(0), slot = plotWidth / rows.length;
-	const lines = rows.map((row) => wrapText(row.category, slot - 16, 7.4, { breakLongWords: true }));
+	const lines = rows.map((row) => wrapText(row.category, slot - 16, 7.4, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	}));
 	const nameRows = Math.max(1, ...lines.map((name) => name.length));
 	const categoryY = baseline + 40, axisLabelY = categoryY + (nameRows + (mode === "stacked" ? 1 : 0)) * 18 + 12;
 	const checkY = axisLabelY + xTitleRows * 18 + 26;
-	const messages = verdict ? wrapText(feedback ?? (verdict === "right" ? "The drawn heights match the target." : "Check the bar heights against the supplied information."), single ? plotWidth : Math.max(24, available - 24), single ? 7.4 : 13.5, single ? undefined : { breakLongWords: true }) : [];
+	const messages = verdict ? wrapText(feedback ?? (verdict === "right" ? "The drawn heights match the target." : "Check the bar heights against the supplied information."), single ? plotWidth : Math.max(24, available - 24), undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	}) : [];
 	const H = single ? checkY + 40 + messages.length * 18 : axisLabelY + xTitleRows * 18 + 20;
 	const color = (i) => single ? HUE[1] : HUE[i + 1];
 	const center = (i) => graph.X(i + .5);
@@ -161,7 +171,7 @@ function CategoricalBarCore({ mode, series, rows, frequencies, parts, totals, ce
 		color: color(i),
 		mark: "fill"
 	}));
-	const headerLabels = wrapText(yLabel, Math.max(24, available - 24), 13.5, { breakLongWords: true });
+	const headerLabels = graphAxisLabelLines(yLabel, Math.max(24, available - 24));
 	const legendY = 16 + headerLabels.length * 18 + 14;
 	const headerH = legendY + legendLayout(legendEntries, Math.max(24, available - 24), 20, true).height + 12;
 	const axisGraph = sceneGraph({
@@ -171,7 +181,10 @@ function CategoricalBarCore({ mode, series, rows, frequencies, parts, totals, ce
 		h: 180
 	}, [0, rows.length], [0, ceiling]);
 	const selected = parts.find((part) => String(part.categoryIndex * count + part.seriesIndex) === partControl.value);
-	const selectedLines = mode === "stacked" && selected ? wrapText(`${series[selected.seriesIndex]}: ${selected.top} − ${selected.base} = ${selected.frequency}`, Math.max(24, available - 24), 13.5, { breakLongWords: true }) : [];
+	const selectedLines = mode === "stacked" && selected ? wrapText(`${series[selected.seriesIndex]}: ${selected.top} − ${selected.base} = ${selected.frequency}`, Math.max(24, available - 24), undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	}) : [];
 	const footerCheckY = selectedLines.length ? 16 + selectedLines.length * 18 + 28 : 20;
 	return /* @__PURE__ */ jsxs("div", {
 		ref,

package/dist/kit/data/histogram-construction-board.d.mts

@@ -1,5 +1,4 @@
 import { GripChoiceControl, GripNumberControl, GripPressControl } from "../figure/grip.mjs";
-import "../figure/index.mjs";
 import { ReactNode } from "react";
 //#region src/kit/data/histogram-construction-board.d.ts
 export interface HistogramConstructionClass {

package/dist/kit/data/histogram-construction-board.mjs

@@ -1,21 +1,26 @@
 'use client';
 
-import { FigText, measureTextWidth, wrapText } from "../figure/text.mjs";
+import { textWidth } from "../figure/text-metrics.mjs";
+import { FigText, wrapText } from "../figure/text.mjs";
 import { Figure } from "../figure/figure.mjs";
 import { useMarkDrawn } from "../../runtime/drawn-controls.mjs";
 import { GripDot, GripKey, GripSlider } from "../figure/grip.mjs";
 import { useNarrow } from "../figure/narrow.mjs";
-import "../figure/index.mjs";
 import { AlgorithmEvidenceTable } from "../algorithms/index.mjs";
 import { HistogramPlot } from "./histogram-plot.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/data/histogram-construction-board.tsx
+/** Wrapped lines are drawn as label-role text as written (the widest role these boards wrap). */
+const labelLineWidth = (text) => textWidth(text, {
+	role: "label",
+	caps: false
+});
 const className = (c) => c.label ?? `${c.from}–${c.to}`;
 const displayNumber = (value) => String(Number(value.toPrecision(12)));
 const linesFor = (text, width) => wrapText(text, width, 7.4, {
 	breakLongWords: true,
-	measureWidth: measureTextWidth
+	measureWidth: labelLineWidth
 });
 /** Continuous boundaries and supplied density heights; Stage owns every class calculation. */
 function HistogramConstructionBoard({ classes, focusedClass, selectedHeight, densityMax, densityTickStep, xLabel, showTable = true, classControl, heightControl, checkControl, verdict = null, feedback, label }) {

package/dist/kit/data/histogram-interval-board.d.mts

@@ -1,6 +1,5 @@
 import { GripChoiceControl, GripNumberControl, GripPressControl } from "../figure/grip.mjs";
 import { BoundTextControl } from "../controls.mjs";
-import "../figure/index.mjs";
 import { ReactNode } from "react";
 //#region src/kit/data/histogram-interval-board.d.ts
 export interface HistogramIntervalClass {

package/dist/kit/data/histogram-interval-board.mjs

@@ -1,6 +1,7 @@
 'use client';
 
-import { FigText, measureTextWidth, wrapText } from "../figure/text.mjs";
+import { textWidth } from "../figure/text-metrics.mjs";
+import { FigText, wrapText } from "../figure/text.mjs";
 import { Figure, HUE, STROKE } from "../figure/figure.mjs";
 import { useMarkDrawn } from "../../runtime/drawn-controls.mjs";
 import { GripDot, GripKey, GripSlider } from "../figure/grip.mjs";
@@ -8,16 +9,20 @@ import { ActionButton, TextInput } from "../controls.mjs";
 import { ControlRow, Field } from "../frame.mjs";
 import { useNarrow } from "../figure/narrow.mjs";
 import { GraphBarMark } from "../scene/graph.mjs";
-import "../figure/index.mjs";
 import { AlgorithmEvidenceTable } from "../algorithms/index.mjs";
 import { HistogramPlot } from "./histogram-plot.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/data/histogram-interval-board.tsx
+/** Wrapped lines are drawn as label-role text as written (the widest role these boards wrap). */
+const labelLineWidth = (text) => textWidth(text, {
+	role: "label",
+	caps: false
+});
 const display = (n) => String(Number(n.toPrecision(12)));
 const linesFor = (s, width) => wrapText(s, width, 7.4, {
 	breakLongWords: true,
-	measureWidth: measureTextWidth
+	measureWidth: labelLineWidth
 });
 /** Selects supplied histogram areas; Stage alone clips classes and estimates their frequencies. */
 function HistogramIntervalBoard({ classes, range, activeBoundary, selectedCut, densityMax, densityTickStep, measure, unit, showTable = true, estimatedFrequency, boundaryControl, cutControl, estimateControl, checkControl, verdict = null, feedback, label }) {

package/dist/kit/data/histogram-plot.mjs

@@ -1,13 +1,18 @@
 'use client';
 
-import { FigText, measureTextWidth, wrapText } from "../figure/text.mjs";
+import { textWidth } from "../figure/text-metrics.mjs";
+import { FigText, wrapText } from "../figure/text.mjs";
 import { HUE } from "../figure/figure.mjs";
 import { GraphBarMark, GraphPanel, sceneGraph } from "../scene/graph.mjs";
-import "../figure/index.mjs";
 import { AlgorithmDiagram } from "../algorithms/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/data/histogram-plot.tsx
+/** Wrapped lines are drawn as label-role text as written (the widest role these boards wrap). */
+const labelLineWidth = (text) => textWidth(text, {
+	role: "label",
+	caps: false
+});
 /** One continuous histogram axis and bar painter; overlay readings and writers belong to callers. */
 function HistogramPlot({ classes, availableWidth: F, densityMax, densityTickStep, xLabel, label, className, focusKey, renderClipped, renderOverlay, trackRows = 0 }) {
 	const lo = classes[0]?.from ?? 0, hi = classes.at(-1)?.to ?? 1;
@@ -32,7 +37,7 @@ function HistogramPlot({ classes, availableWidth: F, densityMax, densityTickStep
 	const bottom = top + plotHeight;
 	const xTitle = wrapText(xLabel, W - 24, 7.4, {
 		breakLongWords: true,
-		measureWidth: measureTextWidth
+		measureWidth: labelLineWidth
 	});
 	return /* @__PURE__ */ jsxs(AlgorithmDiagram, {
 		viewBox: [W, bottom + 72 + xTitle.length * 18 + trackRows * 48],

package/dist/kit/data/index.mjs

@@ -271,4 +271,4 @@ function ClassEdgeGrip({ axis, bins, min = 2, max = 16, onBins }) {
 }
 
 //#endregion
-export { BoxStrip, CategoricalBarBoard, ClassAxis, ClassEdgeGrip, CountColumns, CumulativePointBoard, HistogramConstructionBoard, HistogramIntervalBoard, PictogramBoard, PictogramSymbol, PieChartBoard, ScatterPointBoard, SeriesChartBoard, TwoWayTableBoard, boundary, classIndex, classesOf, valueAxis };
+export { BoxStrip, CategoricalBarBoard, ClassAxis, ClassEdgeGrip, CountColumns, PictogramBoard, PictogramSymbol, PieChartBoard, SeriesChartBoard, TwoWayTableBoard, boundary, classIndex, classesOf, valueAxis };

package/dist/kit/data/pictogram-board.d.mts

@@ -1,5 +1,4 @@
 import { GripChoiceControl, GripNumberControl, GripPressControl } from "../figure/grip.mjs";
-import "../figure/index.mjs";
 import { ReactNode } from "react";
 //#region src/kit/data/pictogram-board.d.ts
 export interface PictogramRow {

package/dist/kit/data/pictogram-board.mjs

@@ -1,16 +1,21 @@
 'use client';
 
+import { textWidth } from "../figure/text-metrics.mjs";
 import { FigText, wrapText } from "../figure/text.mjs";
 import { Figure, HUE, STROKE, alpha } from "../figure/figure.mjs";
 import { useMarkDrawn } from "../../runtime/drawn-controls.mjs";
 import { GripDot, GripKey, GripSlider } from "../figure/grip.mjs";
 import { useNarrow } from "../figure/narrow.mjs";
-import "../figure/index.mjs";
 import { catColor } from "../palette.mjs";
 import { AlgorithmDiagram, AlgorithmEvidenceTable } from "../algorithms/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/data/pictogram-board.tsx
+/** Row names and frequencies are drawn as note-role text as written. */
+const noteWidth = (text) => textWidth(text, {
+	role: "note",
+	caps: false
+});
 /** One symbol's supplied fraction of a circle; no frequency or target calculation. */
 function PictogramSymbol({ cx, cy, r = 12, numerator, denominator, color = HUE[1] }) {
 	if (numerator === 0) return null;
@@ -42,19 +47,31 @@ function PictogramBoard({ data, rows, keyValue, partDenominator, maxSymbols, uni
 	useMarkDrawn(partsControl);
 	const { ref, width } = useNarrow();
 	const available = width > 0 ? width : 348;
-	const left = 148, pitch = 36, right = 26 + Math.max(112, ...rows.map((row) => String(row.frequency).length * 9));
+	const left = 148, pitch = 36, right = 26 + Math.max(112, ...rows.map((row) => noteWidth(String(row.frequency))));
 	const W = Math.max(available, left + maxSymbols * pitch + right + 24);
-	const names = rows.map((row) => wrapText(row.category, left - 28, 13.5, { breakLongWords: true }));
+	const names = rows.map((row) => wrapText(row.category, left - 28, undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	}));
 	const heights = names.map((lines) => Math.max(76, lines.length * 18 + 38));
 	const ys = heights.map((_, i) => 72 + heights.slice(0, i).reduce((a, b) => a + b, 0));
 	const selected = rows.find((row) => String(row.index) === rowControl.value);
-	const keyLines = wrapText(`= ${keyValue}${unit ? ` ${unit}` : ""}`, available - 64, 13.5, { breakLongWords: true });
+	const keyLines = wrapText(`= ${keyValue}${unit ? ` ${unit}` : ""}`, available - 64, undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	});
 	const headerH = 32 + keyLines.length * 18;
 	const evidence = selected ? `${selected.category}: ${selected.wholeSymbols} whole${selected.remainderParts ? ` + ${selected.remainderParts}/${selected.partDenominator}` : ""} symbols; represents ${selected.frequency}${unit ? ` ${unit}` : ""}` : "Row unavailable";
-	const evidenceLines = wrapText(evidence, available - 24, 13.5, { breakLongWords: true });
+	const evidenceLines = wrapText(evidence, available - 24, undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	});
 	const cycleY = evidenceLines.length * 18 + 26;
 	const checkY = cycleY + (rowControl.options.length > 1 ? 48 : 0);
-	const messages = verdict ? wrapText(feedback ?? (verdict === "right" ? "The symbol rows match the supplied information." : "Compare each row with the fixed symbol key."), available - 24, 13.5, { breakLongWords: true }) : [];
+	const messages = verdict ? wrapText(feedback ?? (verdict === "right" ? "The symbol rows match the supplied information." : "Compare each row with the fixed symbol key."), available - 24, undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	}) : [];
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: "pictogram-apparatus",

package/dist/kit/data/pie-chart-board.d.mts

@@ -1,5 +1,4 @@
-import { GripChoiceControl, GripDrag, GripNumberControl, GripPoint, GripPressControl } from "../figure/grip.mjs";
-import "../figure/index.mjs";
+import { GripChoiceControl, GripNumberControl, GripPressControl } from "../figure/grip.mjs";
 import { ReactNode } from "react";
 //#region src/kit/data/pie-chart-board.d.ts
 export interface PieChartSector {
@@ -30,9 +29,6 @@ export interface PieChartBoardProps {
   showTable?: boolean;
   label: string;
 }
-/** Coordinate unwrapping only: the bound model remains responsible for limits and snapping. */
-declare function piePointerAdapter(cx: number, cy: number): (point: GripPoint, drag: GripDrag) => number;
 /** A single selected sector boundary; all numerical geometry comes from Stage. */
 export declare function PieChartBoard({ rows, sectors, totalFrequency, usedAngle, remainingAngle, categoryControl, angleControl, checkControl, verdict, feedback, showTable, label }: PieChartBoardProps): ReactNode;
-//#endregion
-export {};
+//#endregion

package/dist/kit/data/pie-chart-board.mjs

@@ -6,35 +6,15 @@ import { useMarkDrawn } from "../../runtime/drawn-controls.mjs";
 import { GripDot, GripKey, GripSlider } from "../figure/grip.mjs";
 import { Legend, legendLayout } from "../figure/legend.mjs";
 import { useNarrow } from "../figure/narrow.mjs";
-import "../figure/index.mjs";
 import { catColor } from "../palette.mjs";
 import { AlgorithmEvidenceTable } from "../algorithms/index.mjs";
-import { useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/data/pie-chart-board.tsx
 const pointAt = (cx, cy, r, angle) => ({
 	x: cx + r * Math.sin(angle * Math.PI / 180),
 	y: cy - r * Math.cos(angle * Math.PI / 180)
 });
-/** Coordinate unwrapping only: the bound model remains responsible for limits and snapping. */
-function piePointerAdapter(cx, cy) {
-	let start, last = 0, accumulated = 0;
-	const bearing = (p) => Math.atan2(p.x - cx, cy - p.y) * 180 / Math.PI;
-	return (point, drag) => {
-		if (start !== drag.start) {
-			start = drag.start;
-			accumulated = drag.value;
-			last = bearing(drag.start);
-		}
-		if (Math.hypot(point.x - cx, point.y - cy) < 8) return accumulated;
-		const next = bearing(point);
-		const delta = (next - last + 540) % 360 - 180;
-		accumulated += delta;
-		last = next;
-		return accumulated;
-	};
-}
 function SectorMark({ sector, cx, cy, r }) {
 	const color = catColor(sector.index);
 	if (sector.angle === 0) return null;
@@ -63,12 +43,6 @@ function PieChartBoard({ rows, sectors, totalFrequency, usedAngle, remainingAngl
 	const { ref, width } = useNarrow();
 	const W = width > 0 ? Math.min(380, Math.max(300, width)) : 348;
 	const cx = W / 2, cy = 214, r = Math.min(150, W / 2 - 26);
-	const adapter = useRef(null);
-	if (!adapter.current || adapter.current.cx !== cx || adapter.current.cy !== cy) adapter.current = {
-		cx,
-		cy,
-		toValue: piePointerAdapter(cx, cy)
-	};
 	const selected = sectors.find((sector) => String(sector.index) === categoryControl.value);
 	const end = selected ? pointAt(cx, cy, r, selected.end) : null;
 	const from = selected ? pointAt(cx, cy, r, selected.start) : null;
@@ -121,7 +95,7 @@ function PieChartBoard({ rows, sectors, totalFrequency, usedAngle, remainingAngl
 					cy,
 					r
 				}, sector.index)),
-				from && end && selected ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+				from && end && selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					/* @__PURE__ */ jsx("line", {
 						"data-pie-ray": "start",
 						x1: cx,
@@ -164,7 +138,10 @@ function PieChartBoard({ rows, sectors, totalFrequency, usedAngle, remainingAngl
 							value: selected.angle,
 							range: [0, selected.maxAngle]
 						},
-						toValue: adapter.current.toValue,
+						turn: {
+							cx,
+							cy
+						},
 						children: /* @__PURE__ */ jsx(GripDot, {
 							cx: end.x,
 							cy: end.y,
@@ -226,4 +203,4 @@ function PieChartBoard({ rows, sectors, totalFrequency, usedAngle, remainingAngl
 }
 
 //#endregion
-export { PieChartBoard, piePointerAdapter };
+export { PieChartBoard };

package/dist/kit/data/scatter-point-board.d.mts

@@ -1,5 +1,4 @@
 import { GripChoiceControl, GripPointControl, GripPressControl } from "../figure/grip.mjs";
-import "../figure/index.mjs";
 import { ReactNode } from "react";
 //#region src/kit/data/scatter-point-board.d.ts
 type Point = {

package/dist/kit/data/scatter-point-board.mjs

@@ -1,16 +1,21 @@
 'use client';
 
-import { FigText, measureTextWidth, wrapText } from "../figure/text.mjs";
+import { textWidth } from "../figure/text-metrics.mjs";
+import { FigText, wrapText } from "../figure/text.mjs";
 import { Figure, HUE, STROKE } from "../figure/figure.mjs";
 import { useMarkDrawn } from "../../runtime/drawn-controls.mjs";
 import { GripKey, GripPad } from "../figure/grip.mjs";
 import { useNarrow } from "../figure/narrow.mjs";
 import { GraphPanel, sceneGraph } from "../scene/graph.mjs";
-import "../figure/index.mjs";
 import { AlgorithmDiagram, AlgorithmEvidenceTable } from "../algorithms/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/data/scatter-point-board.tsx
+/** Wrapped lines are drawn as label-role text as written (the widest role these boards wrap). */
+const labelLineWidth = (text) => textWidth(text, {
+	role: "label",
+	caps: false
+});
 /** A supplied coordinate cross; its size is in picture pixels, never data units. */
 function GraphCrossMark({ x, y, r = 5, color = HUE[1] }) {
 	return /* @__PURE__ */ jsx("path", {
@@ -25,7 +30,7 @@ function GraphCrossMark({ x, y, r = 5, color = HUE[1] }) {
 const axisName = (label, unit) => `${label}${unit ? ` (${unit})` : ""}`;
 const linesFor = (text, width) => wrapText(text, width, 7.4, {
 	breakLongWords: true,
-	measureWidth: measureTextWidth
+	measureWidth: labelLineWidth
 });
 const ticks = ([lo, hi], step) => {
 	if (!(step > 0)) return [];

package/dist/kit/data/series-chart-board.d.mts

@@ -1,5 +1,4 @@
 import { GripChoiceControl, GripNumberControl, GripPressControl } from "../figure/grip.mjs";
-import "../figure/index.mjs";
 import { ReactNode } from "react";
 //#region src/kit/data/series-chart-board.d.ts
 export interface SeriesChartPart {

package/dist/kit/data/two-way-table-board.d.mts

@@ -1,6 +1,5 @@
 import { GripChoiceControl, GripPressControl } from "../figure/grip.mjs";
 import { BoundTextControl } from "../controls.mjs";
-import "../figure/index.mjs";
 import { ReactNode } from "react";
 //#region src/kit/data/two-way-table-board.d.ts
 export interface TwoWayTableCell {

package/dist/kit/data/two-way-table-board.mjs

@@ -1,16 +1,20 @@
 'use client';
 
+import { textWidth } from "../figure/text-metrics.mjs";
 import { FigText, wrapText } from "../figure/text.mjs";
 import { Figure } from "../figure/figure.mjs";
 import { useMarkDrawn } from "../../runtime/drawn-controls.mjs";
 import { GripKey } from "../figure/grip.mjs";
 import { TextInput } from "../controls.mjs";
 import { useNarrow } from "../figure/narrow.mjs";
-import "../figure/index.mjs";
 import { AlgorithmEvidenceTable } from "../algorithms/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/data/two-way-table-board.tsx
+const noteWidth = (text) => textWidth(text, {
+	role: "note",
+	caps: false
+});
 const cellContext = (c) => c.kind === "body" ? `Row ${c.rowLabel} · column ${c.columnLabel}` : c.kind === "row-total" ? `Row total for ${c.rowLabel}` : c.kind === "column-total" ? `Column total for ${c.columnLabel}` : "Grand total for all groups";
 const cellEvidence = (c) => c.status === "unentered" ? "not entered" : c.status === "invalid" ? `invalid count: ${c.text}` : c.value === null ? "unavailable" : String(c.value);
 /** One native text writer in a semantic table; all supplied counts come from the model. */
@@ -64,13 +68,25 @@ function TwoWayTableBoard({ rowLabels, columnLabels, cells, rowQuestion = "Row g
 		});
 	})] }));
 	const context = selected ? `${cellContext(selected)}: ${cellEvidence(selected)}${unit && selected.status === "entered" ? ` ${unit}` : ""}` : "Selected cell unavailable";
-	const contextLines = wrapText(context, W - 24, 13.5, { breakLongWords: true });
-	const dimensions = wrapText(`Rows: ${rowQuestion} · Columns: ${columnQuestion}`, W - 24, 13.5, { breakLongWords: true });
-	const legend = wrapText("Bold counts are given; — means not entered.", W - 24, 13.5, { breakLongWords: true });
+	const contextLines = wrapText(context, W - 24, undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	});
+	const dimensions = wrapText(`Rows: ${rowQuestion} · Columns: ${columnQuestion}`, W - 24, undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	});
+	const legend = wrapText("Bold counts are given; — means not entered.", W - 24, undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	});
 	const hasCycle = cellControl.options.length > 1;
 	const paired = hasCycle && W >= 280;
 	const cycleY = 26 + contextLines.length * 18, checkY = cycleY + (hasCycle && !paired ? 48 : 0);
-	const messages = verdict ? wrapText(feedback ?? (verdict === "right" ? "The entered counts match the supplied table." : "Use the visible givens and totals to check the counts."), W - 24, 13.5, { breakLongWords: true }) : [];
+	const messages = verdict ? wrapText(feedback ?? (verdict === "right" ? "The entered counts match the supplied table." : "Use the visible givens and totals to check the counts."), W - 24, undefined, {
+		breakLongWords: true,
+		measureWidth: noteWidth
+	}) : [];
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: "two-way-table-board",

package/dist/kit/data-scene.mjs

@@ -2,7 +2,6 @@
 
 import { FigText } from "./figure/text.mjs";
 import { Figure, HUE, STROKE } from "./figure/figure.mjs";
-import "./figure/index.mjs";
 import { registerScene } from "./scenes.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/kit/diagram/annotations.mjs

@@ -2,10 +2,10 @@
 
 import { FigText } from "../figure/text.mjs";
 import { STROKE } from "../figure/figure.mjs";
-import "../figure/index.mjs";
+import { fmt, useCoords } from "@classytic/stage/core";
 import { Fragment } from "react";
-import { Label, Segment, Vector, fmt, useCoords } from "@classytic/stage";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Label, Segment, Vector } from "@classytic/stage/primitives";
 
 //#region src/kit/diagram/annotations.tsx
 /**
@@ -132,6 +132,53 @@ function EqualTicks({ from, to, count = 1, sizePx = 6, color = "var(--stage-fg)"
 	});
 }
 /**
+* A dimension: the length between `from` and `to`, drawn the exam way, a thin line parallel to the
+* side and `offsetPx` outside it, short bars at both ends, and the label ("2 m", "x + 4") at its middle.
+* `side` picks which side of from → to the line sits on: 'left' or 'right' of the direction of travel
+* (on screen). Sized in pixels, so it reads the same at any view scale.
+*/
+function DimensionMark({ from, to, label, side = "right", offsetPx = 14, color = "var(--stage-muted)" }) {
+	const c = useCoords();
+	const a = c.toPx(from.x, from.y);
+	const b = c.toPx(to.x, to.y);
+	const dx = b[0] - a[0];
+	const dy = b[1] - a[1];
+	const m = Math.hypot(dx, dy) || 1;
+	const ux = dx / m;
+	const uy = dy / m;
+	const sgn = side === "right" ? 1 : -1;
+	const nx = -uy * sgn;
+	const ny = ux * sgn;
+	const o = offsetPx;
+	const p = (q, k) => [q[0] + nx * k, q[1] + ny * k];
+	const [a1, b1] = [p(a, o), p(b, o)];
+	const bar = 5;
+	const d = [
+		`M ${fmt(a1[0])} ${fmt(a1[1])} L ${fmt(b1[0])} ${fmt(b1[1])}`,
+		`M ${fmt(p(a, o - bar)[0])} ${fmt(p(a, o - bar)[1])} L ${fmt(p(a, o + bar)[0])} ${fmt(p(a, o + bar)[1])}`,
+		`M ${fmt(p(b, o - bar)[0])} ${fmt(p(b, o - bar)[1])} L ${fmt(p(b, o + bar)[0])} ${fmt(p(b, o + bar)[1])}`
+	].join(" ");
+	const mid = p([(a[0] + b[0]) / 2, (a[1] + b[1]) / 2], o + 12);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", {
+		d,
+		fill: "none",
+		stroke: color,
+		strokeWidth: STROKE.line,
+		strokeLinecap: "round"
+	}), label && /* @__PURE__ */ jsx(FigText, {
+		x: Math.round(mid[0] * 100) / 100,
+		y: Math.round(mid[1] * 100) / 100,
+		color: "var(--stage-fg)",
+		size: "label",
+		weight: "semibold",
+		anchor: "middle",
+		baseline: "middle",
+		halo: true,
+		caps: false,
+		children: label
+	})] });
+}
+/**
 * An arrow (tail → tail+comp) with an optional tip label and optional dashed x/y
 * component decomposition, the SVG equivalent of the old canvas
 * `drawVector(..., { label, components })`.
@@ -190,4 +237,4 @@ function LabeledVector({ tail = {
 }
 
 //#endregion
-export { AngleArc, LabeledVector, RightAngleMark };
+export { AngleArc, DimensionMark, EqualTicks, LabeledVector, RightAngleMark };

package/dist/kit/diagram/label-placement.mjs

@@ -1,5 +1,33 @@
+import { labelBox } from "../figure/text-metrics.mjs";
+import { parseRichText } from "@classytic/stage/core";
+
 //#region src/kit/diagram/label-placement.ts
-function placeDiagramLabel(preferred, bounds, occupied) {
+/**
+* Pixel-space placement for diagram labels. Stage still owns coordinate conversion and drawing.
+*
+*   stageLabelBox(text, at, options)             the box a Stage `<Label>` covers
+*   placeDiagramLabel(label, bounds, occupied)   measure a Stage `<Label>` and step it clear
+*   placeLabelBox(box, bounds, occupied)         the same search for a box measured elsewhere
+*
+* A label's box comes from the measured advance table (`labelBox`), never from a character count,
+* so a long label is pushed as far as its real ends need and a short one is not pushed further.
+*/
+/** Stage `<Label>` draws at 14 px, weight 600, with a 3 px halo stroke (1.5 px each side). */
+const STAGE_LABEL = {
+	size: 14,
+	weight: 600,
+	pad: 1.5
+};
+const r2 = (v) => Math.round(v * 100) / 100;
+/**
+* The box a Stage `<Label>` covers at `at`: 14 px weight 600 unless `options` says otherwise, its
+* halo included, its `_` / `^` runs measured at script size.
+*/
+const stageLabelBox = (text, at, options = {}) => labelBox(parseRichText(text), at, {
+	...STAGE_LABEL,
+	...options
+});
+function placeLabelBox(preferred, bounds, occupied) {
 	const clamp = (box) => ({
 		...box,
 		x: Math.max(box.halfWidth + 8, Math.min(bounds.width - box.halfWidth - 8, box.x)),
@@ -24,6 +52,23 @@ function placeDiagramLabel(preferred, bounds, occupied) {
 	}
 	return candidates.find((candidate) => occupied.every((box) => !intersects(candidate, box))) ?? candidates[0];
 }
+/**
+* Measure `label` as Stage `<Label>` draws it (its `_` / `^` runs at script size) and place it clear
+* of `occupied` inside `bounds`. The result's `dx, dy` replace the label's own offsets.
+*/
+function placeDiagramLabel(label, bounds, occupied) {
+	const { text, x, y, ...drawn } = label;
+	const preferred = stageLabelBox(text, {
+		x,
+		y
+	}, drawn);
+	const box = placeLabelBox(preferred, bounds, occupied);
+	return {
+		...box,
+		dx: r2((drawn.dx ?? 0) + box.x - preferred.x),
+		dy: r2((drawn.dy ?? 0) + box.y - preferred.y)
+	};
+}
 
 //#endregion
-export { placeDiagramLabel };
+export { placeDiagramLabel, placeLabelBox, stageLabelBox };

package/dist/kit/discrete/tile.mjs

@@ -1,11 +1,9 @@
 'use client';
 
 import { FigText } from "../figure/text.mjs";
+import { SCENE } from "../scene/tokens.mjs";
 import { HUE, STROKE, alpha } from "../figure/figure.mjs";
 import { FigureAction } from "../figure/action.mjs";
-import { SCENE } from "../scene/tokens.mjs";
-import "../scene/index.mjs";
-import "../figure/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/discrete/tile.tsx