@nanisoft/prism-ui 0.15.0 → 0.16.0

package/dist/components/ui/pulse-graph.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { INK_CLEARANCE, LABEL_DESCENT, fitPoints, strokeBetween, } from '../../lib/figure.js';
 import { cn } from '../../lib/utils.js';
 /**
  * The canvas the graph draws into, in its own user units.
@@ -7,18 +8,49 @@ import { cn } from '../../lib/utils.js';
  * the reason `Diagram` gives: type inside a scaled SVG is sized in the SVG's
  * own user units, so a viewBox derived from a caller's coordinates would make
  * the label size a function of how large a number the caller happened to use.
+ *
+ * **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 356 pixels a
+ * phone leaves a PulseGraph, a stage name came to 7.23 pixels and a node's note
+ * to 5.56, which is a picture of a shape with nothing written on it. 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. `DESIGN.md` states the rule under The figure
+ * floor.
  */
 const CANVAS_WIDTH = 640;
 const CANVAS_HEIGHT = 360;
+/**
+ * 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, one user unit is
+ * therefore never less than one pixel, and the smallest label in it is
+ * `NODE_NOTE_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 graph whose stage names are seven
+ * pixels tall has stopped being a graph: 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.
  *
- * Wider than `Diagram`'s, and the extra is on the bottom rather than split. A
- * pulse graph is read as a sequence running left to right, so the bottom band
- * carries the rail, the lane marks and the stage names set under them, and all
- * three are horizontal extents that a graph with more vertical spread would
- * collide with. Reserving it once here is cheaper than every caller learning
- * where not to put a node.
+ * The same band `Diagram` keeps on its top and its two sides, and the foot
+ * carries more than that: a pulse graph is read as a sequence running left to
+ * right, so the band below the fitted area holds the rail, and a lane whose mark
+ * lands low puts its note in the gap `RAIL_BAND` left rather than under the rail.
  */
 const PADDING = 56;
 /** The node mark's radius. A circle, so no corner radius for the pack to move. */
@@ -29,14 +61,29 @@ const NODE_RADIUS = 6;
  * The authored type scale is in `rem` and cannot be used inside a viewBox, where
  * a font size is a coordinate and not a length on the page. These are geometry,
  * the one thing Tailwind stays authoritative for.
+ *
+ * The note is twelve user units, which is what `--text-xs` resolves to, so at
+ * `LEGIBLE_MIN_WIDTH` it renders at exactly that step and never below it. It was
+ * ten, and ten is not a step this system sets interface type at, so a note was the
+ * smallest type the whole package emitted anywhere, a figure included. The name is
+ * one unit larger, which is the same hierarchy the two have always drawn.
  */
 const NODE_NAME_SIZE = 13;
 const NODE_NAME_OFFSET = 22;
-const NODE_NOTE_SIZE = 10;
-const NODE_NOTE_OFFSET = 35;
+const NODE_NOTE_SIZE = 12;
+/**
+ * The note's baseline, measured down from the mark's centre.
+ *
+ * The name's baseline, then the note's own size, then a line of leading, so the
+ * second line sits under the first rather than on it. It is the deepest any node
+ * draws, and the rail band below is measured from it.
+ */
+const NODE_NOTE_OFFSET = NODE_NAME_OFFSET + NODE_NOTE_SIZE + 5;
+/** The deepest ink a node draws below its mark's centre, in user units. */
+const NODE_NOTE_DEPTH = NODE_NOTE_OFFSET + LABEL_DESCENT * NODE_NOTE_SIZE;
 /**
  * The rail the marker rides, in user units, measured from the bottom of the
- * fitted area.
+ * canvas.
  *
  * It is a separate element from the edges because it is a different claim: the
  * edges say what connects to what, and the rail says there is an order. A graph
@@ -46,28 +93,64 @@ const NODE_NOTE_OFFSET = 35;
 const RAIL_OFFSET = 74;
 const RAIL_THICKNESS = 1.5;
 /**
- * The caller's points, fitted into the canvas with their aspect ratio kept and
- * the leftover shared out evenly.
+ * The band the rail reserves at the foot of the canvas, in user units.
  *
- * 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.
+ * It is the rail's own distance up from the bottom, then half its thickness, then
+ * the clearance the drawing keeps between two pieces of ink, then the deepest ink
+ * a node draws below its mark. The fitted area stops above the whole of it, so a
+ * lane whose mark lands on the bottom of that area puts its note in the gap this
+ * band left rather than on the rail's own stroke. It is arithmetic rather than a
+ * number because every term in it has its own reason, and retuning the rail or the
+ * type moves the fit with it rather than leaving the band behind.
  */
-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 });
+const RAIL_BAND = RAIL_OFFSET + RAIL_THICKNESS / 2 + INK_CLEARANCE + NODE_NOTE_DEPTH;
+/**
+ * The labels this drawing prints under one node, which are what a stroke leaving it
+ * has to be trimmed against.
+ *
+ * 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 note are both below
+ * its mark, so an edge leaving sideways runs along the mark's centre line and never
+ * enters either of them, while an edge 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 nodeLabels(node) {
+    const labels = [{ text: node.name, size: NODE_NAME_SIZE, offset: NODE_NAME_OFFSET }];
+    if (node.note !== undefined) {
+        labels.push({ text: node.note, size: NODE_NOTE_SIZE, offset: NODE_NOTE_OFFSET });
+    }
+    return labels;
+}
+/**
+ * The head a carrying edge grows, at the end of the stroke a reader can see.
+ *
+ * The head is part of the stroke rather than part of the target mark, so it is
+ * placed at the stroke's own end and not at an inset from the mark's centre. A
+ * head measured from the centre would sit inside the clearance the stroke stops at
+ * and the two would read as two marks with a gap between them rather than as one
+ * arrow. Measured from the stroke's own end the tip is one ink clearance from the
+ * mark it points at, which is the same gap every other end of every other connector
+ * on the rail keeps.
+ *
+ * This is the one piece of the drawing that earns its place by being static. An
+ * edge that carries something has to say so to a reader who has turned every
+ * animation off, and a dashed overlay read as direction only while the dashes
+ * were moving, so the claim vanished for exactly the reader who most needed it.
+ * A head does not move, so it does not need a cycle, and it is legible in a
+ * printed page. The rail's travelling marker is then free to be pure atmosphere
+ * rather than the only thing carrying the meaning.
+ */
+function flowHead(line) {
+    const dx = line.to.x - line.from.x;
+    const dy = line.to.y - line.from.y;
+    const length = Math.hypot(dx, dy);
+    if (length === 0)
+        return null;
+    const ux = dx / length;
+    const uy = dy / length;
+    const head = 5;
+    return (_jsx("path", { "data-slot": "pulse-graph-flow", d: `M ${line.to.x - uy * head} ${line.to.y + ux * head} L ${line.to.x} ${line.to.y} L ${line.to.x + uy * head} ${line.to.y - ux * head}`, strokeWidth: 1.5, fill: "none", className: "stroke-brand-ink" }));
 }
 /**
  * The lanes present, in ascending order.
@@ -159,19 +242,40 @@ function stagger(lane) {
  * 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.
  */
 function PulseGraph({ nodes, relations = [], label, decorative = false, className, }) {
-    const place = fit(nodes);
     const byId = new Map(nodes.map((node) => [node.id, node]));
     const lanes = lanesOf(nodes);
-    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) }] : [];
-    });
     /**
      * The rail's two ends, taken from the lanes that exist rather than from the
      * canvas. A rail as wide as the canvas regardless of where the nodes are would
@@ -179,6 +283,27 @@ function PulseGraph({ nodes, relations = [], label, decorative = false, classNam
      * about a caller's data that the caller did not make.
      */
     const railNodes = nodes.filter((node) => node.lane !== undefined);
+    // A lane's note is the deepest ink a node draws, and the rail sits below the
+    // fitted area, so the fit stops above the band the rail reserves. A field has
+    // no rail, nothing reserves the foot, and the fit is the same band the top and
+    // the two sides get.
+    const place = fitPoints(nodes, {
+        width: CANVAS_WIDTH,
+        height: CANVAS_HEIGHT,
+        padding: PADDING,
+        bottom: railNodes.length ? CANVAS_HEIGHT - RAIL_BAND : undefined,
+    });
+    const drawn = relations.flatMap((relation) => {
+        const from = byId.get(relation.from);
+        const to = byId.get(relation.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) }];
+    });
     const railAt = railNodes.length
         ? {
             x0: Math.min(...railNodes.map((node) => place(node).x)) - NODE_RADIUS - 10,
@@ -186,27 +311,16 @@ function PulseGraph({ nodes, relations = [], label, decorative = false, classNam
         }
         : null;
     const railY = CANVAS_HEIGHT - RAIL_OFFSET;
-    return (_jsxs("svg", { "data-slot": "pulse-graph", "data-unresolved-relations": relations.length - drawn.length, "data-lanes": lanes.length, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', className), children: [railAt ? (_jsxs("g", { "data-slot": "pulse-graph-rail", children: [_jsx("line", { "data-slot": "pulse-graph-rail-line", x1: railAt.x0, y1: railY, x2: railAt.x1, y2: railY, strokeWidth: RAIL_THICKNESS, className: "stroke-border" }), _jsx("g", { "data-slot": "pulse-graph-marker", className: "prism-ambient-travel prism-ambient-delay-1", style: { '--ambient-travel-distance': `${railAt.x1 - railAt.x0}px` }, children: _jsx("rect", { x: railAt.x0 - 2.5, y: railY - 2.5, width: 5, height: 5, rx: 2.5, className: "fill-brand-ink" }) })] })) : null, drawn.map(({ relation, from, to }) => (_jsxs("g", { "data-slot": "pulse-graph-relation", "data-relation": `${relation.from}-${relation.to}`, "data-carries": relation.carries || undefined, children: [_jsx("line", { x1: from.x, y1: from.y, x2: to.x, y2: to.y, strokeWidth: 1, strokeDasharray: relation.indirect ? '4 4' : undefined, className: "stroke-muted-foreground/50 fill-none" }), relation.carries
-                        ? (() => {
-                            const dx = to.x - from.x;
-                            const dy = to.y - from.y;
-                            const length = Math.hypot(dx, dy);
-                            if (length === 0)
-                                return null;
-                            // The head sits back from the target mark so it never overlaps
-                            // it, and is scaled to the line's own length so a short edge and
-                            // a long one get the same size head rather than a stretched one.
-                            const inset = NODE_RADIUS + 4;
-                            const ux = dx / length;
-                            const uy = dy / length;
-                            const hx = to.x - ux * inset;
-                            const hy = to.y - uy * inset;
-                            const head = 5;
-                            return (_jsx("path", { "data-slot": "pulse-graph-flow", d: `M ${hx - uy * head} ${hy + ux * head} L ${hx} ${hy} L ${hx + uy * head} ${hy - ux * head}`, strokeWidth: 1.5, fill: "none", className: "stroke-brand-ink" }));
-                        })()
-                        : null] }, `${relation.from}-${relation.to}`))), nodes.map((node) => {
-                const at = place(node);
-                return (_jsxs("g", { "data-slot": "pulse-graph-node", "data-node": node.id, "data-emphasis": node.emphasis || undefined, "data-lane": node.lane, children: [node.emphasis ? (_jsx("circle", { "data-slot": "pulse-graph-halo", cx: at.x, cy: at.y, r: NODE_RADIUS, strokeWidth: 0, className: cn('fill-brand-ink/25', 'prism-ambient-pulse', stagger(node.lane ?? 0)) })) : null, _jsx("circle", { cx: at.x, cy: at.y, r: NODE_RADIUS, 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.note ? (_jsx("text", { x: at.x, y: at.y + NODE_NOTE_OFFSET, fontSize: NODE_NOTE_SIZE, textAnchor: "middle", className: "fill-muted-foreground font-mono", children: node.note })) : 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": "pulse-graph-container", className: "w-full overflow-x-auto", children: _jsxs("svg", { "data-slot": "pulse-graph", "data-unresolved-relations": relations.length - drawn.length, "data-lanes": lanes.length, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', LEGIBLE_MIN_WIDTH, className), children: [railAt ? (_jsxs("g", { "data-slot": "pulse-graph-rail", children: [_jsx("line", { "data-slot": "pulse-graph-rail-line", x1: railAt.x0, y1: railY, x2: railAt.x1, y2: railY, strokeWidth: RAIL_THICKNESS, className: "stroke-border" }), _jsx("g", { "data-slot": "pulse-graph-marker", className: "prism-ambient-travel prism-ambient-delay-1", style: { '--ambient-travel-distance': `${railAt.x1 - railAt.x0}px` }, children: _jsx("rect", { x: railAt.x0 - 2.5, y: railY - 2.5, width: 5, height: 5, rx: 2.5, className: "fill-brand-ink" }) })] })) : null, drawn.map(({ relation, from, to }) => {
+                    const line = strokeBetween(from.at, to.at, NODE_RADIUS, from.labels, to.labels);
+                    return (_jsxs("g", { "data-slot": "pulse-graph-relation", "data-relation": `${relation.from}-${relation.to}`, "data-carries": relation.carries || undefined, children: [_jsx("line", { x1: line.from.x, y1: line.from.y, x2: line.to.x, y2: line.to.y, strokeWidth: 1, strokeDasharray: relation.indirect ? '4 4' : undefined, className: "stroke-muted-foreground/50 fill-none" }), relation.carries ? flowHead(line) : null] }, `${relation.from}-${relation.to}`));
+                }), nodes.map((node) => {
+                    const at = place(node);
+                    return (_jsxs("g", { "data-slot": "pulse-graph-node", "data-node": node.id, "data-emphasis": node.emphasis || undefined, "data-lane": node.lane, children: [node.emphasis ? (_jsx("circle", { "data-slot": "pulse-graph-halo", cx: at.x, cy: at.y, r: NODE_RADIUS, strokeWidth: 0, className: cn('fill-brand-ink/25', 'prism-ambient-pulse', stagger(node.lane ?? 0)) })) : null, _jsx("circle", { cx: at.x, cy: at.y, r: NODE_RADIUS, 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.note ? (_jsx("text", { "data-slot": "pulse-graph-node-note", x: at.x, y: at.y + NODE_NOTE_OFFSET, fontSize: NODE_NOTE_SIZE, textAnchor: "middle", className: "fill-muted-foreground font-mono", children: node.note })) : null] }, node.id));
+                })] }) }));
 }
 export { PulseGraph };

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

@@ -102,45 +102,47 @@ export declare function headingSizeClass(level: HeadingLevel): string;
  *
  * | level | step | authored value | at `sm` | authored value |
  * | --- | --- | --- | --- | --- |
- * | `h1` | `text-3xl` | 1.875rem / 1.2 | `sm:text-4xl` | 2.25rem / 1.111 |
- * | `h2` | `text-2xl` | 1.5rem / 1.333 | `sm:text-3xl` | 1.875rem / 1.2 |
- * | `h3` | `text-xl` | 1.25rem / 1.4 | `sm:text-2xl` | 1.5rem / 1.333 |
- * | `h4` | `text-lg` | 1.125rem / 1.556 | `sm:text-xl` | 1.25rem / 1.4 |
- * | `h5` | `text-lg` | 1.125rem / 1.556 | `sm:text-xl` | 1.25rem / 1.4 |
+ * | `h1` | `text-5xl` | 3rem / 1 | `sm:text-6xl` | 3.75rem / 1 |
+ * | `h2` | `text-4xl` | 2.25rem / 1.111 | `sm:text-5xl` | 3rem / 1 |
+ * | `h3` | `text-3xl` | 1.875rem / 1.2 | `sm:text-4xl` | 2.25rem / 1.111 |
+ * | `h4` | `text-2xl` | 1.5rem / 1.333 | `sm:text-3xl` | 1.875rem / 1.2 |
+ * | `h5` | `text-xl` | 1.25rem / 1.4 | `sm:text-2xl` | 1.5rem / 1.333 |
  * | `h6` | `text-lg` | 1.125rem / 1.556 | `sm:text-xl` | 1.25rem / 1.4 |
  *
- * **`h1` is Display and stays Display**, because that is the role `DESIGN.md`
- * gives it: a page's own heading is the largest thing on the page. The step above
- * it does not exist and this table does not invent one, so "nothing in the system
- * goes above `4xl`" is untouched and the authored scale in `packages/tokens` does
- * not change.
+ * **`h1` is Display and Display is the ceiling of the scale**, because that is
+ * the role `DESIGN.md` gives it: a page's own heading is the largest thing on the
+ * page. The two steps above `4xl` are authored rather than invented here, and they
+ * are authored as a pair rather than as one step, because every rung of this table
+ * is a pair: a base step and one step up at `sm`. A single new step would have made
+ * Display the one heading in the system that does not grow, which is a smaller
+ * defect than the one this table was written to remove and is still a defect.
+ * `5xl` is `4xl` times four thirds, which is the first gap in the group wider than
+ * any gap it already had, and `6xl` is `5xl` times five fourths. Nothing in the
+ * system goes above `6xl`, and no heading level steps above Display.
  *
  * **`h2` is one step below it, and `h2` is what almost every Block renders**,
  * because a Block is composed under a heading the document already owns. That is
- * the whole of the change a consumer sees: a section title moves from 1.875rem to
- * 1.5rem, and above `sm` from 2.25rem to 1.875rem.
+ * the whole of what a consumer sees: a section title moves from 1.5rem to
+ * 2.25rem, and above `sm` from 1.875rem to 3rem.
  *
- * **The floor is `h4`, and the floor is `text-lg`.** `lg` is the deepest authored
+ * **The floor is `h6`, and the floor is `text-lg`.** `lg` is the deepest authored
  * step that is not smaller than Body, and Body is 400 at 1.125rem, so a heading
  * that stepped one further would render smaller than the copy it introduces and
- * read as a caption rather than as a heading. `h5` and `h6` hold at that step and
- * do not wrap: `childLevel()` already clamps at `h6` for the same reason, and a
- * repeated size in a document that has nested a Block three deep is the cheaper
- * trade against a heading smaller than its own body. A heading at the floor is
- * still a heading: it keeps `font-semibold`, keeps `tracking-tight`, and keeps
- * `text-balance` at every step, so weight and tracking tell it apart from body
- * copy where size no longer can.
+ * read as a caption rather than as a heading. The table has six rows and the scale
+ * has exactly six steps at or above Body, so the ladder lands on the floor rather
+ * than running off the bottom of it: every level now holds a step of its own, where
+ * before `h4` through `h6` shared one. `childLevel()` clamps at `h6` for the same
+ * reason the table stops there. A heading at the floor is still a heading: it keeps
+ * `font-semibold`, keeps `tracking-tight`, and keeps `text-balance` at every step,
+ * so weight and tracking tell it apart from body copy where size no longer can.
  *
  * So a consumer gets the hierarchy by passing the level it was already passing,
  * and a Block moved from an `h2` section into an `h3` one carries its size with
  * it, which is what `headingLevel` was introduced to do.
  *
- * **`Prose` already walked this ladder**, at the same steps and stopping at the
- * same `h4`, so a document rendered through `Prose` and a page composed from
- * Blocks now read as one hierarchy rather than as two answers to one question.
- * This Component was the second answer, and it was the one every catalogue Item
- * used, which is why the disagreement was visible on every product page and not
- * on a documentation page.
+ * **`Prose` walks this ladder from one rung down**, because its measure is the
+ * reading measure rather than the page column and the Display step does not fit a
+ * 42rem column. See `Prose`.
  */
 export declare function SectionHeading({ index, eyebrow, title, as: Heading, description, align, id, className, }: {
     /**
@@ -168,11 +170,11 @@ export declare function SectionHeading({ index, eyebrow, title, as: Heading, des
      * entry point.
      *
      * It also picks the size, and there is no prop for the size. The table is in
-     * this Component's JSDoc above: `h1` at 1.875rem, `h2` at 1.5rem, `h3` at
-     * 1.25rem, and `h4` through `h6` at 1.125rem, each stepping up one authored
-     * step above `sm`. Passing a deeper level is therefore a typographic decision
-     * as well as an outline one, which is the point: a Block composed one level
-     * deeper should read as one level deeper.
+     * this Component's JSDoc above: `h1` at 3rem, `h2` at 2.25rem, `h3` at
+     * 1.875rem, `h4` at 1.5rem, `h5` at 1.25rem and `h6` at 1.125rem, each
+     * stepping up one authored step above `sm`. Passing a deeper level is
+     * therefore a typographic decision as well as an outline one, which is the
+     * point: a Block composed one level deeper should read as one level deeper.
      */
     as?: HeadingLevel;
     /**

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

@@ -1 +1 @@
-{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,+BAWjC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAKlE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAG5D;AAoBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CAE5D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,KAAK,EACL,EAAE,EAAE,OAAc,EAClB,WAAW,EACX,KAAgB,EAChB,EAAE,EACF,SAAS,GACV,EAAE;IACD;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACzB;;;;;;;;;;;;OAYG;IACH,EAAE,CAAC,EAAE,YAAY,CAAA;IACjB;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAgCA"}
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,+BAWjC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAKlE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAG5D;AAoBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CAE5D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,KAAK,EACL,EAAE,EAAE,OAAc,EAClB,WAAW,EACX,KAAgB,EAChB,EAAE,EACF,SAAS,GACV,EAAE;IACD;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACzB;;;;;;;;;;;;OAYG;IACH,EAAE,CAAC,EAAE,YAAY,CAAA;IACjB;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAgCA"}

package/dist/components/ui/section.js

@@ -63,11 +63,11 @@ export function childLevel(level) {
  * two copies in step.
  */
 const HEADING_SIZE = {
-    h1: 'text-3xl sm:text-4xl',
-    h2: 'text-2xl sm:text-3xl',
-    h3: 'text-xl sm:text-2xl',
-    h4: 'text-lg sm:text-xl',
-    h5: 'text-lg sm:text-xl',
+    h1: 'text-5xl sm:text-6xl',
+    h2: 'text-4xl sm:text-5xl',
+    h3: 'text-3xl sm:text-4xl',
+    h4: 'text-2xl sm:text-3xl',
+    h5: 'text-xl sm:text-2xl',
     h6: 'text-lg sm:text-xl',
 };
 /**
@@ -113,45 +113,47 @@ export function headingSizeClass(level) {
  *
  * | level | step | authored value | at `sm` | authored value |
  * | --- | --- | --- | --- | --- |
- * | `h1` | `text-3xl` | 1.875rem / 1.2 | `sm:text-4xl` | 2.25rem / 1.111 |
- * | `h2` | `text-2xl` | 1.5rem / 1.333 | `sm:text-3xl` | 1.875rem / 1.2 |
- * | `h3` | `text-xl` | 1.25rem / 1.4 | `sm:text-2xl` | 1.5rem / 1.333 |
- * | `h4` | `text-lg` | 1.125rem / 1.556 | `sm:text-xl` | 1.25rem / 1.4 |
- * | `h5` | `text-lg` | 1.125rem / 1.556 | `sm:text-xl` | 1.25rem / 1.4 |
+ * | `h1` | `text-5xl` | 3rem / 1 | `sm:text-6xl` | 3.75rem / 1 |
+ * | `h2` | `text-4xl` | 2.25rem / 1.111 | `sm:text-5xl` | 3rem / 1 |
+ * | `h3` | `text-3xl` | 1.875rem / 1.2 | `sm:text-4xl` | 2.25rem / 1.111 |
+ * | `h4` | `text-2xl` | 1.5rem / 1.333 | `sm:text-3xl` | 1.875rem / 1.2 |
+ * | `h5` | `text-xl` | 1.25rem / 1.4 | `sm:text-2xl` | 1.5rem / 1.333 |
  * | `h6` | `text-lg` | 1.125rem / 1.556 | `sm:text-xl` | 1.25rem / 1.4 |
  *
- * **`h1` is Display and stays Display**, because that is the role `DESIGN.md`
- * gives it: a page's own heading is the largest thing on the page. The step above
- * it does not exist and this table does not invent one, so "nothing in the system
- * goes above `4xl`" is untouched and the authored scale in `packages/tokens` does
- * not change.
+ * **`h1` is Display and Display is the ceiling of the scale**, because that is
+ * the role `DESIGN.md` gives it: a page's own heading is the largest thing on the
+ * page. The two steps above `4xl` are authored rather than invented here, and they
+ * are authored as a pair rather than as one step, because every rung of this table
+ * is a pair: a base step and one step up at `sm`. A single new step would have made
+ * Display the one heading in the system that does not grow, which is a smaller
+ * defect than the one this table was written to remove and is still a defect.
+ * `5xl` is `4xl` times four thirds, which is the first gap in the group wider than
+ * any gap it already had, and `6xl` is `5xl` times five fourths. Nothing in the
+ * system goes above `6xl`, and no heading level steps above Display.
  *
  * **`h2` is one step below it, and `h2` is what almost every Block renders**,
  * because a Block is composed under a heading the document already owns. That is
- * the whole of the change a consumer sees: a section title moves from 1.875rem to
- * 1.5rem, and above `sm` from 2.25rem to 1.875rem.
+ * the whole of what a consumer sees: a section title moves from 1.5rem to
+ * 2.25rem, and above `sm` from 1.875rem to 3rem.
  *
- * **The floor is `h4`, and the floor is `text-lg`.** `lg` is the deepest authored
+ * **The floor is `h6`, and the floor is `text-lg`.** `lg` is the deepest authored
  * step that is not smaller than Body, and Body is 400 at 1.125rem, so a heading
  * that stepped one further would render smaller than the copy it introduces and
- * read as a caption rather than as a heading. `h5` and `h6` hold at that step and
- * do not wrap: `childLevel()` already clamps at `h6` for the same reason, and a
- * repeated size in a document that has nested a Block three deep is the cheaper
- * trade against a heading smaller than its own body. A heading at the floor is
- * still a heading: it keeps `font-semibold`, keeps `tracking-tight`, and keeps
- * `text-balance` at every step, so weight and tracking tell it apart from body
- * copy where size no longer can.
+ * read as a caption rather than as a heading. The table has six rows and the scale
+ * has exactly six steps at or above Body, so the ladder lands on the floor rather
+ * than running off the bottom of it: every level now holds a step of its own, where
+ * before `h4` through `h6` shared one. `childLevel()` clamps at `h6` for the same
+ * reason the table stops there. A heading at the floor is still a heading: it keeps
+ * `font-semibold`, keeps `tracking-tight`, and keeps `text-balance` at every step,
+ * so weight and tracking tell it apart from body copy where size no longer can.
  *
  * So a consumer gets the hierarchy by passing the level it was already passing,
  * and a Block moved from an `h2` section into an `h3` one carries its size with
  * it, which is what `headingLevel` was introduced to do.
  *
- * **`Prose` already walked this ladder**, at the same steps and stopping at the
- * same `h4`, so a document rendered through `Prose` and a page composed from
- * Blocks now read as one hierarchy rather than as two answers to one question.
- * This Component was the second answer, and it was the one every catalogue Item
- * used, which is why the disagreement was visible on every product page and not
- * on a documentation page.
+ * **`Prose` walks this ladder from one rung down**, because its measure is the
+ * reading measure rather than the page column and the Display step does not fit a
+ * 42rem column. See `Prose`.
  */
 export function SectionHeading({ index, eyebrow, title, as: Heading = 'h2', description, align = 'center', id, className, }) {
     return (_jsxs("div", { className: cn('flex flex-col gap-4', align === 'center' ? 'items-center text-center' : 'items-start text-left', className), children: [index ? (_jsx("span", { className: "text-muted-foreground font-mono text-xs font-normal tracking-normal", children: index })) : null, eyebrow ? (_jsx("span", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: eyebrow })) : null, _jsx(Heading, { id: id, className: cn('font-semibold tracking-tight text-balance', headingSizeClass(Heading)), children: title }), description ? (_jsx("p", { className: "text-muted-foreground max-w-measure text-lg text-pretty", children: description })) : null] }));