@nanisoft/prism-ui 0.15.0 → 0.16.1

package/dist/components/ui/diagram.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { INK_CLEARANCE, fitPoints, labelHalfHeight, labelHalfWidth, strokeBetween, } from '../../lib/figure.js';
 import { cn } from '../../lib/utils.js';
 /**
  * The drawing's accessible name, derived from the text its own marks carry.
@@ -37,9 +38,40 @@ function derivedName(nodes) {
  * drawing would come out with 3px labels in one call and 40px labels in another.
  * Fitting the caller's points into a fixed canvas makes the label a constant
  * and makes the drawing a function of the shape rather than of the scale.
+ *
+ * **A fixed canvas fixes the ratio, and the ratio was the half of the argument
+ * that was missing.** Every label's rendered size is its size in user units times
+ * the rendered width over this number, so a drawing that is right at a desktop
+ * width shrinks with its container until it says nothing. In the 342 pixels a
+ * phone leaves a Diagram, the largest label drawn here came to just under seven
+ * pixels. The canvas is still the right answer and it is what keeps a label a
+ * constant rather than a function of the caller's arithmetic; what it does not do
+ * is set a floor, and `LEGIBLE_MIN_WIDTH` is that floor.
  */
 const CANVAS_WIDTH = 640;
 const CANVAS_HEIGHT = 400;
+/**
+ * The width below which the drawing stops being legible, as a spacing multiple.
+ *
+ * The floor is `CANVAS_WIDTH` itself, so the rule is one sentence: the drawing is
+ * never rendered narrower than its own coordinate space, and one user unit is
+ * therefore never less than one pixel. Every label is then at least its own size
+ * in user units, and the smallest of them is `RELATION_NAME_SIZE`, which is the
+ * size `--text-xs` resolves to. So no label this drawing sets is smaller than
+ * `text-xs`, and at the floor the smallest is exactly it.
+ *
+ * **A container narrower than the floor scrolls rather than shrinking, and that
+ * is the answer this repository already gives a table and a board.** A table that
+ * restacks has stopped being a table, and a schematic whose labels are six pixels
+ * tall has stopped being a schematic: it is the shape with nothing written on it
+ * a reader can read. So the drawing holds its size and the container moves under
+ * it, which is what `Table` does with seven columns and what `Gantt01` does with
+ * a schedule of names and bars.
+ *
+ * `160` is `CANVAS_WIDTH` as a multiple of the authored spacing base, which is
+ * how a width nobody held a separate decision for is written.
+ */
+const LEGIBLE_MIN_WIDTH = 'min-w-160';
 /**
  * The band left empty around the fitted points, in user units.
  *
@@ -65,11 +97,17 @@ const NODE_RADIUS = 5;
  * a font size is a coordinate and not a length on the page. These are geometry,
  * the one thing Tailwind stays authoritative for, and they are the only numbers
  * in this file that are not a token.
+ *
+ * The two supporting sizes are twelve user units, which is what `--text-xs`
+ * resolves to, so at `LEGIBLE_MIN_WIDTH` they render at exactly that step and
+ * never below it. The name is one unit larger, which is the same ratio between
+ * the two this drawing has always drawn, so the hierarchy between a name and the
+ * line under it is the hierarchy it was.
  */
 const NODE_NAME_SIZE = 13;
 const NODE_NAME_OFFSET = 20;
-const NODE_SUBTITLE_SIZE = 11;
-const RELATION_NAME_SIZE = 11;
+const NODE_SUBTITLE_SIZE = 12;
+const RELATION_NAME_SIZE = 12;
 /**
  * The subtitle's baseline, measured down from the mark's centre.
  *
@@ -80,35 +118,51 @@ const RELATION_NAME_SIZE = 11;
  */
 const NODE_SUBTITLE_OFFSET = NODE_NAME_OFFSET + NODE_SUBTITLE_SIZE + 5;
 /**
- * How far a relation's label sits off its line, in user units. Perpendicular to
- * the line, so the label never sits on the stroke it belongs to.
+ * Where a relation's label sits, which is beside the line and never on it.
+ *
+ * The offset is the label's own half-width measured across the line plus its half
+ * height, then the clearance. A single number cannot do this: on a horizontal
+ * line a label's width runs along the line and its height across it, and on a
+ * vertical line those two swap, so a constant that clears a horizontal relation
+ * leaves a vertical one sitting on its own stroke.
+ *
+ * It is measured from the middle of the stroke a reader can see rather than of
+ * the line between the two mark centres, so the label stays beside the line that
+ * was drawn.
  */
-const RELATION_NAME_LIFT = 7;
+function relationLabel(label, segment) {
+    const dx = segment.to.x - segment.from.x;
+    const dy = segment.to.y - segment.from.y;
+    const length = Math.hypot(dx, dy);
+    const middle = {
+        x: (segment.from.x + segment.to.x) / 2,
+        y: (segment.from.y + segment.to.y) / 2,
+    };
+    if (length === 0)
+        return middle;
+    const across = { x: -dy / length, y: dx / length };
+    const extent = Math.abs(across.x) * labelHalfWidth(label, RELATION_NAME_SIZE) +
+        Math.abs(across.y) * labelHalfHeight(RELATION_NAME_SIZE);
+    const offset = extent + INK_CLEARANCE;
+    return { x: middle.x + across.x * offset, y: middle.y + across.y * offset };
+}
 /**
- * The caller's points, fitted into the canvas with their aspect ratio kept and
- * the leftover shared out evenly.
+ * The labels this drawing prints under one node, which are what a stroke leaving it
+ * has to be trimmed against.
  *
- * A caller whose points span one axis only, or who passes a single node, gets
- * the other axis centred rather than a division by zero: the scale is taken
- * over the axes that have an extent, and a diagram with no extent at all keeps
- * the caller's own numbers.
+ * Each label is its own obstacle rather than one box enclosing both, and that is the
+ * whole of the trim rule as it applies here: a node's name and its second line are
+ * both below its mark, so a relation leaving sideways runs along the mark's centre
+ * line and clears both, while one leaving downward enters both. The arithmetic is
+ * `lib/figure`, which is where the shared answer lives; what is left here is the two
+ * labels this drawing prints and where it prints them.
  */
-function fit(nodes) {
-    if (nodes.length === 0)
-        return () => ({ x: CANVAS_WIDTH / 2, y: CANVAS_HEIGHT / 2 });
-    const xs = nodes.map((node) => node.x);
-    const ys = nodes.map((node) => node.y);
-    const minX = Math.min(...xs);
-    const minY = Math.min(...ys);
-    const spanX = Math.max(...xs) - minX;
-    const spanY = Math.max(...ys) - minY;
-    const roomX = CANVAS_WIDTH - PADDING * 2;
-    const roomY = CANVAS_HEIGHT - PADDING * 2;
-    const scale = Math.min(spanX === 0 ? Number.POSITIVE_INFINITY : roomX / spanX, spanY === 0 ? Number.POSITIVE_INFINITY : roomY / spanY);
-    const unit = Number.isFinite(scale) && scale > 0 ? scale : 1;
-    const offsetX = PADDING + (roomX - spanX * unit) / 2 - minX * unit;
-    const offsetY = PADDING + (roomY - spanY * unit) / 2 - minY * unit;
-    return (node) => ({ x: node.x * unit + offsetX, y: node.y * unit + offsetY });
+function nodeLabels(node) {
+    const labels = [{ text: node.name, size: NODE_NAME_SIZE, offset: NODE_NAME_OFFSET }];
+    if (node.subtitle !== undefined) {
+        labels.push({ text: node.subtitle, size: NODE_SUBTITLE_SIZE, offset: NODE_SUBTITLE_OFFSET });
+    }
+    return labels;
 }
 /**
  * A diagram of named things and the relations between them.
@@ -175,15 +229,38 @@ function fit(nodes) {
  * caller `stroke`, so the surface is `nodes`, `relations`, `label`,
  * `decorative` and `className` and nothing else.
  *
- * Positions are the caller's: the Component fits and draws, and it does not lay
- * out a graph, so it cannot know that two labels will not collide. A relation
+ * **No stroke crosses a label, and every relation still reaches the marks it
+ * joins.** A relation used to run from one mark's centre to the other, and a node's
+ * name is printed under its mark, so every edge heading downward struck through the
+ * name of the node it left. Each label a node prints is now its own obstacle rather
+ * than part of one box enclosing the whole node, and a relation is trimmed only
+ * against the labels it would actually enter. That direction is the whole of the
+ * rule: a name and its second line both sit below their mark, so a relation
+ * leaving sideways runs along the mark's centre line and clears both, and it stops
+ * at the mark's own edge with the ink clearance between. Backing every relation off
+ * the widest label at its node instead detached them from the marks they connect,
+ * which is a drawing of a shape with no relations on it. The Component cannot know
+ * that two labels will not collide with one another, which is the caller's
+ * positions to settle, and it does know every mark's radius, both label offsets and
+ * every label's own width, because a monospaced label's width is its character
+ * count. A relation's
+ * own label is offset by its own extent across the line. Those are two pieces of
+ * geometry the drawing had and did not use, and `test/diagram.test.tsx` asserts
+ * both halves as geometry rather than the presence of a class name.
+ *
+ * **No label is drawn below `text-xs`.** The drawing is wrapped in a container
+ * that scrolls sideways, and the drawing itself holds a floor of its own
+ * coordinate space, so a phone sees the whole diagram at a legible size rather
+ * than the whole diagram at six pixels. That is the same bargain `Table` strikes
+ * with seven columns, and it is a bargain rather than an accident because the
+ * alternative is a picture of a shape with nothing written on it. A relation
  * naming a node that is not in `nodes` is dropped, and the count of dropped
  * relations is on the element as `data-unresolved-relations` rather than
  * swallowed, because a line that silently did not draw is the failure this
  * Component exists to make impossible.
  */
 function Diagram({ nodes, relations, label, decorative = false, className, }) {
-    const place = fit(nodes);
+    const place = fitPoints(nodes, { width: CANVAS_WIDTH, height: CANVAS_HEIGHT, padding: PADDING });
     const byId = new Map(nodes.map((node) => [node.id, node]));
     // An empty `label` is the same answer as no `label`, so the drawing is named by
     // what its own marks carry rather than announced as an unnamed image. A blank
@@ -193,28 +270,33 @@ function Diagram({ nodes, relations, label, decorative = false, className, }) {
     const drawn = relations.flatMap((relation) => {
         const from = byId.get(relation.from);
         const to = byId.get(relation.to);
-        return from && to ? [{ relation, from: place(from), to: place(to) }] : [];
+        if (!from || !to)
+            return [];
+        // Each end carries its mark's centre and the labels printed under it, because
+        // a stroke is trimmed against the labels it would enter and the two are not the
+        // same thing.
+        const end = (node) => ({ at: place(node), labels: nodeLabels(node) });
+        return [{ relation, from: end(from), to: end(to) }];
     });
-    return (_jsxs("svg", { "data-slot": "diagram", "data-unresolved-relations": relations.length - drawn.length, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : name, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', className), children: [drawn.map(({ relation, from, to }) => {
-                // A label placed beside its line rather than on it. The offset is the
-                // line's normal, so a vertical relation's label sits beside it and a
-                // horizontal one's sits above it, and neither ever sits on the stroke.
-                const dx = to.x - from.x;
-                const dy = to.y - from.y;
-                const length = Math.hypot(dx, dy);
-                const lift = length === 0 ? 0 : RELATION_NAME_LIFT / length;
-                return (_jsxs("g", { "data-slot": "diagram-relation", "data-relation": `${relation.from}-${relation.to}`, children: [_jsx("path", { d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`, strokeWidth: 1, strokeDasharray: relation.indirect ? '4 4' : undefined, className: "stroke-muted-foreground fill-none" }), _jsx("text", { x: (from.x + to.x) / 2 - dy * lift, y: (from.y + to.y) / 2 + dx * lift, fontSize: RELATION_NAME_SIZE, textAnchor: "middle", className: "fill-muted-foreground font-mono", children: relation.label })] }, `${relation.from}-${relation.to}`));
-            }), nodes.map((node) => {
-                const at = place(node);
-                // `default` is the absence of the attribute, spelled the way the token
-                // build spells it, so a node on the base pack resolves its fill and its
-                // stroke from the page rather than from a selector nothing emits.
-                const boundary = node.pack !== undefined && node.pack !== 'default' ? node.pack : undefined;
-                return (_jsxs("g", { "data-slot": "diagram-node", "data-node": node.id, "data-emphasis": node.emphasis || undefined, children: [_jsx("circle", { cx: at.x, cy: at.y, r: NODE_RADIUS, "data-pack": boundary, strokeWidth: node.emphasis ? 2 : 1, className: cn(node.emphasis ? 'fill-accent stroke-brand-ink' : 'fill-card stroke-border') }), _jsx("text", { x: at.x, y: at.y + NODE_NAME_OFFSET, fontSize: NODE_NAME_SIZE, textAnchor: "middle", className: "fill-foreground font-mono", children: node.name }), node.subtitle ? (_jsx("text", { "data-slot": "diagram-node-subtitle", x: at.x, y: at.y + NODE_SUBTITLE_OFFSET, fontSize: NODE_SUBTITLE_SIZE, textAnchor: "middle", 
-                            // Muted ink rather than the name's own: the line below a name is
-                            // supporting, and a reader's eye reaches the name first. Both are
-                            // contract roles, so a boundary above either moves it.
-                            className: "fill-muted-foreground font-mono", children: node.subtitle })) : null] }, node.id));
-            })] }));
+    return (
+    // The sideways region, for the reason `LEGIBLE_MIN_WIDTH` states: the drawing
+    // holds a legible floor and a container narrower than it moves under the
+    // drawing rather than the drawing shrinking below what it says.
+    _jsx("div", { "data-slot": "diagram-container", className: "w-full overflow-x-auto", children: _jsxs("svg", { "data-slot": "diagram", "data-unresolved-relations": relations.length - drawn.length, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : name, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', LEGIBLE_MIN_WIDTH, className), children: [drawn.map(({ relation, from, to }) => {
+                    const line = strokeBetween(from.at, to.at, NODE_RADIUS, from.labels, to.labels);
+                    const at = relationLabel(relation.label, line);
+                    return (_jsxs("g", { "data-slot": "diagram-relation", "data-relation": `${relation.from}-${relation.to}`, children: [_jsx("path", { d: `M ${line.from.x} ${line.from.y} L ${line.to.x} ${line.to.y}`, strokeWidth: 1, strokeDasharray: relation.indirect ? '4 4' : undefined, className: "stroke-muted-foreground fill-none" }), _jsx("text", { x: at.x, y: at.y, fontSize: RELATION_NAME_SIZE, textAnchor: "middle", className: "fill-muted-foreground font-mono", children: relation.label })] }, `${relation.from}-${relation.to}`));
+                }), nodes.map((node) => {
+                    const at = place(node);
+                    // `default` is the absence of the attribute, spelled the way the token
+                    // build spells it, so a node on the base pack resolves its fill and its
+                    // stroke from the page rather than from a selector nothing emits.
+                    const boundary = node.pack !== undefined && node.pack !== 'default' ? node.pack : undefined;
+                    return (_jsxs("g", { "data-slot": "diagram-node", "data-node": node.id, "data-emphasis": node.emphasis || undefined, children: [_jsx("circle", { cx: at.x, cy: at.y, r: NODE_RADIUS, "data-pack": boundary, strokeWidth: node.emphasis ? 2 : 1, className: cn(node.emphasis ? 'fill-accent stroke-brand-ink' : 'fill-card stroke-border') }), _jsx("text", { x: at.x, y: at.y + NODE_NAME_OFFSET, fontSize: NODE_NAME_SIZE, textAnchor: "middle", className: "fill-foreground font-mono", children: node.name }), node.subtitle ? (_jsx("text", { "data-slot": "diagram-node-subtitle", x: at.x, y: at.y + NODE_SUBTITLE_OFFSET, fontSize: NODE_SUBTITLE_SIZE, textAnchor: "middle", 
+                                // Muted ink rather than the name's own: the line below a name is
+                                // supporting, and a reader's eye reaches the name first. Both are
+                                // contract roles, so a boundary above either moves it.
+                                className: "fill-muted-foreground font-mono", children: node.subtitle })) : null] }, node.id));
+                })] }) }));
 }
 export { Diagram };

package/dist/components/ui/fact-list.d.ts

@@ -75,6 +75,23 @@ export type FactListProps = ComponentProps<'dl'> & {
  * wraps and a value that does not are both common and centring one of them reads
  * as an error.
  *
+ * **The value is set flush left, and the reason is the values rather than the
+ * rows.** A right-aligned value is the right answer in a column of figures, where
+ * the digits are the same width and the comparison a reader makes is between the
+ * ends of them. This Component has no numeric mode, no `tabular-nums` and no
+ * monospaced arm, so nothing here is a figure and nothing lines up on its last
+ * digit: what lines up is the first letter of each answer, and right alignment
+ * moves that edge to a different place on every row. A value long enough to wrap
+ * is the case that shows it, because the second line starts wherever the first
+ * one ended and the column reads as a mistake rather than as a decision. `text-
+ * balance` stays, because it is the same reason it was there: a two-line answer
+ * should break where it breaks well, not where the measure runs out.
+ *
+ * A fact whose value *is* a figure is not the case this loses. A caller that wants
+ * a right-aligned figure column composes it: the value is a `ReactNode`, so a
+ * caller can pass the span it wants, and Prism holds no opinion about a value it
+ * did not lay out.
+ *
  * The hairline between rows is `border-border`, so a list of facts reads as a
  * table without becoming one: no header row, because a fact has no column
  * header, and no `Table` semantics, because these are terms and their answers

package/dist/components/ui/fact-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fact-list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/fact-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;GAOG;AACH,MAAM,MAAM,IAAI,GAAG;IACjB;;;;OAIG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,6DAA6D;IAC7D,KAAK,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG;IACjD;;;;OAIG;IACH,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,sCAuCrE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"fact-list.d.ts","sourceRoot":"","sources":["../../../src/components/ui/fact-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;GAOG;AACH,MAAM,MAAM,IAAI,GAAG;IACjB;;;;OAIG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB,6DAA6D;IAC7D,KAAK,EAAE,SAAS,CAAA;IAChB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,IAAI,CAAC,GAAG;IACjD;;;;OAIG;IACH,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,iBAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,sCAuCrE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/fact-list.js

@@ -20,6 +20,23 @@ import { cn } from '../../lib/utils.js';
  * wraps and a value that does not are both common and centring one of them reads
  * as an error.
  *
+ * **The value is set flush left, and the reason is the values rather than the
+ * rows.** A right-aligned value is the right answer in a column of figures, where
+ * the digits are the same width and the comparison a reader makes is between the
+ * ends of them. This Component has no numeric mode, no `tabular-nums` and no
+ * monospaced arm, so nothing here is a figure and nothing lines up on its last
+ * digit: what lines up is the first letter of each answer, and right alignment
+ * moves that edge to a different place on every row. A value long enough to wrap
+ * is the case that shows it, because the second line starts wherever the first
+ * one ended and the column reads as a mistake rather than as a decision. `text-
+ * balance` stays, because it is the same reason it was there: a two-line answer
+ * should break where it breaks well, not where the measure runs out.
+ *
+ * A fact whose value *is* a figure is not the case this loses. A caller that wants
+ * a right-aligned figure column composes it: the value is a `ReactNode`, so a
+ * caller can pass the span it wants, and Prism holds no opinion about a value it
+ * did not lay out.
+ *
  * The hairline between rows is `border-border`, so a list of facts reads as a
  * table without becoming one: no header row, because a fact has no column
  * header, and no `Table` semantics, because these are terms and their answers
@@ -33,6 +50,6 @@ import { cn } from '../../lib/utils.js';
 function FactList({ facts, label, className, ...props }) {
     if (facts.length === 0)
         return null;
-    return (_jsxs("dl", { "data-slot": "fact-list", className: cn('flex w-full flex-col text-sm', className), ...props, children: [label ? (_jsx("dt", { className: "text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase", children: label })) : null, facts.map((fact, index) => (_jsxs("div", { "data-slot": "fact-list-row", className: "border-border flex items-start justify-between gap-6 border-b py-2 last:border-b-0", children: [_jsx("dt", { className: "text-muted-foreground shrink-0 font-medium", children: fact.label }), _jsx("dd", { className: "text-right text-balance", children: fact.href ? (_jsx("a", { href: fact.href, rel: fact.newTab ? 'noopener noreferrer' : undefined, target: fact.newTab ? '_blank' : undefined, className: "underline underline-offset-4 hover:underline", children: fact.value })) : (fact.value) })] }, index)))] }));
+    return (_jsxs("dl", { "data-slot": "fact-list", className: cn('flex w-full flex-col text-sm', className), ...props, children: [label ? (_jsx("dt", { className: "text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase", children: label })) : null, facts.map((fact, index) => (_jsxs("div", { "data-slot": "fact-list-row", className: "border-border flex items-start justify-between gap-6 border-b py-2 last:border-b-0", children: [_jsx("dt", { className: "text-muted-foreground shrink-0 font-medium", children: fact.label }), _jsx("dd", { className: "text-left text-balance", children: fact.href ? (_jsx("a", { href: fact.href, rel: fact.newTab ? 'noopener noreferrer' : undefined, target: fact.newTab ? '_blank' : undefined, className: "underline underline-offset-4 hover:underline", children: fact.value })) : (fact.value) })] }, index)))] }));
 }
 export { FactList };

package/dist/components/ui/prose.d.ts

@@ -105,6 +105,17 @@ export type ProseProps = ComponentProps<'div'> & {
  * is: the caller's own flow content.
  *
  * It is a server Component: no hook, no context and no client code.
+ *
+ * **The heading ladder here is the one `SectionHeading` walks, entered one rung
+ * down, and the reason is the measure rather than a second decision.** A run of
+ * prose is held to `--container-measure`, 42rem. The Display step is 3rem, and a
+ * 42rem column is fourteen of them, so a document title set at Display is a
+ * title broken into fragments rather than a title. So the child treatments set
+ * `h1` at `4xl` and descend one authored step per level to `lg` at `h5` and
+ * `h6`, which is the same scale, the same floor and the same rule about a
+ * heading never rendering smaller than the copy it introduces, entered at the
+ * rung that fits the column. A document and a page are therefore one hierarchy
+ * at different reading widths rather than two answers to one question.
  */
 declare function Prose({ children, size, fullWidth, className, ...props }: ProseProps): import("react").JSX.Element;
 export { Prose };

package/dist/components/ui/prose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../../src/components/ui/prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;GAOG;AACH,QAAA,MAAM,WAAW;;;CAGP,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAA;AAEhD;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/C;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAa,EAAE,SAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAwC7F;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../../src/components/ui/prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;GAOG;AACH,QAAA,MAAM,WAAW;;;CAGP,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAA;AAEhD;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/C;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAa,EAAE,SAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BA0C7F;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/prose.js

@@ -65,13 +65,24 @@ const PROSE_SIZES = {
  * is: the caller's own flow content.
  *
  * It is a server Component: no hook, no context and no client code.
+ *
+ * **The heading ladder here is the one `SectionHeading` walks, entered one rung
+ * down, and the reason is the measure rather than a second decision.** A run of
+ * prose is held to `--container-measure`, 42rem. The Display step is 3rem, and a
+ * 42rem column is fourteen of them, so a document title set at Display is a
+ * title broken into fragments rather than a title. So the child treatments set
+ * `h1` at `4xl` and descend one authored step per level to `lg` at `h5` and
+ * `h6`, which is the same scale, the same floor and the same rule about a
+ * heading never rendering smaller than the copy it introduces, entered at the
+ * rung that fits the column. A document and a page are therefore one hierarchy
+ * at different reading widths rather than two answers to one question.
  */
 function Prose({ children, size = 'base', fullWidth = false, className, ...props }) {
     return (_jsx("div", { "data-slot": "prose", "data-size": size, className: cn('text-pretty flex flex-col gap-4 leading-relaxed', fullWidth ? 'max-w-none' : 'max-w-measure', PROSE_SIZES[size], 
         // The block treatments. Every child is styled by its own tag so a
         // consumer's plain elements read as the system, and the gaps the flex
         // column owns are the rhythm between blocks.
-        '[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:underline', '[&_blockquote]:border-border [&_blockquote]:text-muted-foreground [&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:italic', '[&_code]:bg-muted [&_code]:text-muted-foreground [&_code]:rounded-sm [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs', '[&_h1]:text-balance [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:tracking-tight', '[&_h2]:text-balance [&_h2]:mt-2 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:tracking-tight', '[&_h3]:text-balance [&_h3]:mt-2 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:tracking-tight', '[&_h4]:text-balance [&_h4]:text-lg [&_h4]:font-semibold', '[&_hr]:bg-border [&_hr]:h-px [&_hr]:my-2', '[&_img]:rounded-lg', '[&_li]:leading-relaxed [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6', '[&_p]:leading-relaxed', '[&_pre]:bg-muted [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-xs', '[&_pre_code]:bg-transparent [&_pre_code]:p-0', '[&_strong]:font-semibold', 
+        '[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:underline', '[&_blockquote]:border-border [&_blockquote]:text-muted-foreground [&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:italic', '[&_code]:bg-muted [&_code]:text-muted-foreground [&_code]:rounded-sm [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs', '[&_h1]:text-balance [&_h1]:text-4xl [&_h1]:font-semibold [&_h1]:tracking-tight', '[&_h2]:text-balance [&_h2]:mt-2 [&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:tracking-tight', '[&_h3]:text-balance [&_h3]:mt-2 [&_h3]:text-2xl [&_h3]:font-semibold [&_h3]:tracking-tight', '[&_h4]:text-balance [&_h4]:text-xl [&_h4]:font-semibold', '[&_h5]:text-balance [&_h5]:text-lg [&_h5]:font-semibold', '[&_h6]:text-balance [&_h6]:text-lg [&_h6]:font-semibold', '[&_hr]:bg-border [&_hr]:h-px [&_hr]:my-2', '[&_img]:rounded-lg', '[&_li]:leading-relaxed [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6', '[&_p]:leading-relaxed', '[&_pre]:bg-muted [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-xs', '[&_pre_code]:bg-transparent [&_pre_code]:p-0', '[&_strong]:font-semibold', 
         // The one treatment that changes a box type rather than decorating one.
         // The reasoning, and the two spec rules it rests on, are in this
         // component's JSDoc: a `display: table` box cannot be a scroll container,

package/dist/components/ui/pulse-graph.d.ts

@@ -87,7 +87,12 @@ type PulseFigure = {
     relations?: readonly PulseRelation[];
     /**
      * Layout only, exactly as on every Component: grid placement and width.
-     * Changing a Prism-owned visual property from here is prohibited.
+     * Changing a Prism-owned visual property from here is prohibited, and this
+     * Component spreads no other prop, so there is no second way to do it.
+     *
+     * It lands on the drawing inside the sideways region rather than on the region
+     * itself, so a caller narrowing the figure narrows the drawing and the region
+     * still holds the floor.
      */
     className?: string;
 };
@@ -175,9 +180,36 @@ export type PulseGraphProps = PulseFigure & ({
  * sentence is what a screen reader gets. Pass `decorative` when that sentence
  * already says what the drawing shows.
  *
- * Positions are the caller's. The Component fits and draws, and it does not lay
- * out a graph, so it cannot know that two labels will not collide. A relation
- * naming a node that is not in `nodes` is dropped and counted on the element.
+ * **No stroke crosses a label, and every connector still reaches the marks it
+ * joins.** An edge used to run from one mark's centre to the other, and a node's
+ * name is printed under its mark, so every edge heading downward struck through the
+ * name of the node it left. Each label a node prints is now its own obstacle rather
+ * than part of one box enclosing the whole node, and an edge is trimmed only against
+ * the labels it would actually enter. That direction is the whole of the rule: a
+ * name and a note both sit below their mark, so an edge leaving sideways runs along
+ * the mark's centre line and clears both, and it stops at the mark's own edge with
+ * the ink clearance between. Backing every edge off the widest label at its node
+ * instead detached all five connectors on a six-stage rail from the circles they
+ * connect, which is a drawing of a shape with no relations on it. The Component
+ * cannot know that two labels will not collide with one another, which is the
+ * caller's positions to settle, and it does know every mark's radius, both label
+ * offsets and every label's own width, because a monospaced label's width is its
+ * character count. The rail is held to
+ * the same clearance rather than to a fixed distance from the canvas bottom,
+ * because a note is the deepest ink a node draws and a lane whose mark lands low
+ * put it under the rail. `test/pulse-graph.test.tsx` asserts both halves as
+ * geometry rather than the presence of a class name.
+ *
+ * **No label is drawn below `text-xs`.** The drawing is wrapped in a container
+ * that scrolls sideways, and the drawing itself holds a floor of its own
+ * coordinate space, so a phone sees the whole graph at a legible size rather than
+ * the whole graph at six pixels. That is the same bargain `Table` strikes with
+ * seven columns, and it is a bargain rather than an accident because the
+ * alternative is a picture of a shape with nothing written on it.
+ *
+ * Positions are the caller's, and two labels crossing one another is still the
+ * caller's to settle. A relation naming a node that is not in `nodes` is dropped
+ * and counted on the element.
  */
 declare function PulseGraph({ nodes, relations, label, decorative, className, }: PulseGraphProps): import("react").JSX.Element;
 export { PulseGraph };

package/dist/components/ui/pulse-graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pulse-graph.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pulse-graph.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAA;IACV;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,iDAAiD;AACjD,KAAK,WAAW,GAAG;IACjB;;;;;OAKG;IACH,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,aAAa,EAAE,CAAA;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,CACI;IACE;;;;OAIG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AAsHH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,SAAc,EACd,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,eAAe,+BA4MjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"pulse-graph.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pulse-graph.tsx"],"names":[],"mappings":"AAaA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAA;IACV;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,iDAAiD;AACjD,KAAK,WAAW,GAAG;IACjB;;;;;OAKG;IACH,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,aAAa,EAAE,CAAA;IACpC;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,CACI;IACE;;;;OAIG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AA2MH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,SAAc,EACd,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,eAAe,+BAoMjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}