@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/components/ui/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/ui/date-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAI5D,yCAAyC;AACzC,MAAM,WAAW,eAAe;IAC9B;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IAC9B,iEAAiE;IACjE,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAA;IACnC,gEAAgE;IAChE,aAAa,EAAE,gBAAgB,CAAA;IAC/B,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxC,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAA;IACrB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,+EAA+E;IAC/E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IACxC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IACjC,iEAAiE;IACjE,KAAK,CAAC,EAAE,IAAI,CAAA;IACZ,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAgB,EAChB,aAAa,EACb,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,cAAc,EACd,QAAQ,EACR,KAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,GACV,EAAE,eAAe,+BA0HjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/ui/date-picker.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAY,KAAK,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAI5D,yCAAyC;AACzC,MAAM,WAAW,eAAe;IAC9B;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,MAAM,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IAC9B,iEAAiE;IACjE,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,MAAM,CAAA;IACnC,gEAAgE;IAChE,aAAa,EAAE,gBAAgB,CAAA;IAC/B,sFAAsF;IACtF,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACxC,oEAAoE;IACpE,aAAa,EAAE,MAAM,CAAA;IACrB,uEAAuE;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,qDAAqD;IACrD,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACnB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAC1B,+EAA+E;IAC/E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAA;IAC3C,uCAAuC;IACvC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAA;IACxC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;IACjC,iEAAiE;IACjE,KAAK,CAAC,EAAE,IAAI,CAAA;IACZ,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAQD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,MAAM,EACN,UAAU,EACV,aAAa,EACb,YAAgB,EAChB,aAAa,EACb,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,YAAmB,EACnB,aAAa,EACb,cAAc,EACd,QAAQ,EACR,KAAkB,EAClB,QAAgB,EAChB,QAAgB,EAChB,IAAI,EACJ,IAAI,EACJ,EAAE,EACF,SAAS,GACV,EAAE,eAAe,+BAkIjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/ui/date-picker.js

@@ -69,6 +69,14 @@ function DatePicker({ label, format, monthLabel, weekdayLabels, firstWeekday = 0
         setOwnOpen(next);
     };
     const canClear = chosen !== null && clearLabel !== undefined;
-    return (_jsxs("div", { "data-slot": "date-picker", className: cn('relative w-full', className), children: [canClear ? (_jsx("button", { type: "button", "data-slot": "date-picker-clear", "aria-label": clearLabel, disabled: disabled, onClick: clear, className: cn('text-muted-foreground hover:text-foreground absolute top-1/2 right-9 z-10 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-sm outline-none', 'transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50'), children: _jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) })) : null, _jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { "data-slot": "date-picker-trigger", id: triggerId, "aria-label": label, "aria-describedby": shown === '' ? undefined : valueId, "aria-invalid": required && chosen === null ? true : undefined, disabled: disabled, className: cn('border-input bg-background text-foreground w-full justify-between outline-none', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', canClear && 'pr-16'), children: _jsx("span", { "data-slot": "date-picker-value", "aria-hidden": "true", className: shown === '' ? 'text-muted-foreground' : undefined, children: shown === '' ? placeholder : shown }) }), _jsx(PopoverContent, { sideOffset: 4, "aria-label": label, className: "w-auto p-0", children: _jsx(Calendar, { label: label, monthLabel: monthLabel(month), weekdayLabels: weekdayLabels, firstWeekday: firstWeekday, previousLabel: previousLabel, nextLabel: nextLabel, month: month, onMonthChange: setMonth, value: chosen, onValueChange: choose, isDateDisabled: isDateDisabled, dayLabel: dayLabel, today: today }) })] }), shown === '' ? null : (_jsx("span", { id: valueId, className: "sr-only", children: shown })), name === undefined ? null : (_jsx("input", { type: "hidden", name: name, ...(form === undefined ? null : { form }), value: chosen === null ? '' : iso(chosen), readOnly: true }))] }));
+    return (_jsxs("div", { "data-slot": "date-picker", className: cn('relative w-full', className), children: [canClear ? (_jsx("button", { type: "button", "data-slot": "date-picker-clear", "aria-label": clearLabel, disabled: disabled, onClick: clear, className: cn('text-muted-foreground hover:text-foreground absolute top-1/2 right-9 z-10 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-sm outline-none', 'transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', 
+                // The floor, as a band rather than a step. This control is absolutely
+                // positioned over the field's own trigger, and `pr-16` on that trigger
+                // reserves exactly 64px of clear space; a 44px step at `right-9` would be
+                // 44 wide starting there and would run 16px under the value text the
+                // reservation exists to keep clear. The band adds ten rather than
+                // twenty-two, and `absolute` already gives it the containing block it
+                // needs, so no positioning class is added to the control itself.
+                'pointer-coarse:before:absolute pointer-coarse:before:left-1/2 pointer-coarse:before:top-1/2 pointer-coarse:before:h-11 pointer-coarse:before:w-11 pointer-coarse:before:-translate-x-1/2 pointer-coarse:before:-translate-y-1/2 pointer-coarse:before:content-[""]'), children: _jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) })) : null, _jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { "data-slot": "date-picker-trigger", id: triggerId, "aria-label": label, "aria-describedby": shown === '' ? undefined : valueId, "aria-invalid": required && chosen === null ? true : undefined, disabled: disabled, className: cn('border-input bg-background text-foreground w-full justify-between outline-none', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', canClear && 'pr-16'), children: _jsx("span", { "data-slot": "date-picker-value", "aria-hidden": "true", className: shown === '' ? 'text-muted-foreground' : undefined, children: shown === '' ? placeholder : shown }) }), _jsx(PopoverContent, { sideOffset: 4, "aria-label": label, className: "w-auto p-0", children: _jsx(Calendar, { label: label, monthLabel: monthLabel(month), weekdayLabels: weekdayLabels, firstWeekday: firstWeekday, previousLabel: previousLabel, nextLabel: nextLabel, month: month, onMonthChange: setMonth, value: chosen, onValueChange: choose, isDateDisabled: isDateDisabled, dayLabel: dayLabel, today: today }) })] }), shown === '' ? null : (_jsx("span", { id: valueId, className: "sr-only", children: shown })), name === undefined ? null : (_jsx("input", { type: "hidden", name: name, ...(form === undefined ? null : { form }), value: chosen === null ? '' : iso(chosen), readOnly: true }))] }));
 }
 export { DatePicker };

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

@@ -73,11 +73,19 @@ export type DiagramNode = {
 /**
  * One relation between two nodes, with the word that says what it is.
  *
- * A relation is drawn as a straight line between the two node marks, so the
- * geometry a caller lays out is the geometry a reader sees. The label is placed
- * beside the line rather than on it, because a label drawn over a line has to
- * be knocked out with a halo, and a halo has to be filled with the colour of
- * the surface the diagram happens to sit on, which the component is not told.
+ * A relation is drawn as a straight line from one mark towards another, so the
+ * geometry a caller lays out is the geometry a reader sees. The line stops at the
+ * mark's own edge with the ink clearance between, or at whichever label printed
+ * under that mark the line would otherwise run through, which is what keeps an edge
+ * heading downward from running through the name printed under its own node while a
+ * relation leaving sideways still reaches the mark it joins.
+ *
+ * The label is placed beside the line rather than on it, because a label drawn
+ * over a line has to be knocked out with a halo, and a halo has to be filled with
+ * the colour of the surface the diagram happens to sit on, which the component is
+ * not told. How far beside is the label's own extent measured across the line,
+ * not a fixed number, because a label's width runs along a horizontal line and
+ * across a vertical one, and one number clears the first and not the second.
  *
  * `indirect` draws the line dashed. That is the standing convention for "this
  * holds, but not by this route", and it is chosen over fading the line because
@@ -211,8 +219,31 @@ export type DiagramProps = DiagramFigure & ({
  * 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

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

@@ -1 +1 @@
-{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../src/components/ui/diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAI3C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,gDAAgD;AAChD,KAAK,aAAa,GAAG;IACnB,8EAA8E;IAC9E,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,oGAAoG;IACpG,SAAS,EAAE,SAAS,eAAe,EAAE,CAAA;IACrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,CACI;IACE;;;;;OAKG;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,GACD;IACE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AAiIH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,YAAY,+BAgHd;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../src/components/ui/diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAc3C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,gDAAgD;AAChD,KAAK,aAAa,GAAG;IACnB,8EAA8E;IAC9E,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,oGAAoG;IACpG,SAAS,EAAE,SAAS,eAAe,EAAE,CAAA;IACrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,CACI;IACE;;;;;OAKG;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,GACD;IACE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AA8KH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,YAAY,+BAsHd;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

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/dialog.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, RefObject } from 'react';
 /**
  * The props the Dialog root forwards to Base UI.
  *
@@ -12,6 +12,17 @@ export interface DialogProps {
     defaultOpen?: boolean;
     /** Called when the open state changes. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Called after the open state change has finished animating, in both
+     * directions.
+     *
+     * Named because "the state changed" and "the panel has finished coming and
+     * going" are different moments, and a caller that unmounts on the first one
+     * takes the exit transition with it. It fires once the animations the panel
+     * declared have ended, and it fires immediately when there were none: a
+     * consumer whose own stylesheet removes transitions still gets told.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
     /** Whether the dialog is modal. @defaultValue true */
     modal?: boolean | 'trap-focus';
     /** The trigger and content. */
@@ -48,6 +59,18 @@ export interface DialogContentProps extends ComponentProps<'div'> {
      * @defaultValue 'Close'
      */
     closeLabel?: string;
+    /**
+     * The element that takes focus when the dialog opens.
+     *
+     * Left out, the panel focuses its first tabbable element, which is right for
+     * a dialog whose first control is the one the reader came for. It is named
+     * here for the dialog whose first tabbable element is not that control: a
+     * search field, where the reader opened the dialog to type and where the
+     * dialog wants the field rather than whatever the panel happens to draw
+     * first. A ref and not an element because the panel does not exist until the
+     * portal commits.
+     */
+    initialFocus?: RefObject<HTMLElement | null>;
 }
 /** The props DialogHeader forwards to a plain container. */
 export interface DialogHeaderProps extends ComponentProps<'div'> {
@@ -72,12 +95,18 @@ export interface DialogCloseProps extends ComponentProps<'button'> {
  * closes. Always give it a `DialogTitle`, which names the dialog for every
  * reader. Use a Dialog for a decision or a short task; for content that is
  * not a task, use a Popover or navigate to a page.
+ *
+ * The built-in close control is 16px for a mouse and a trackpad and takes the
+ * 44px coarse-pointer floor on touch input, without moving on screen: it stays in
+ * the panel's top-right corner and the panel's own padding stays what it is. Pass
+ * `showCloseButton={false}` and draw your own control when a dialog's header runs
+ * the full width of its panel, which is what `search-dialog.tsx` does.
  */
 declare function Dialog({ ...props }: DialogProps): import("react").JSX.Element;
 /** The element that opens the dialog. */
 declare function DialogTrigger({ className, ...props }: DialogTriggerProps): import("react").JSX.Element;
 /** The dialog panel, its backdrop and its portal. */
-declare function DialogContent({ className, side, showCloseButton, closeLabel, children, ...props }: DialogContentProps): import("react").JSX.Element;
+declare function DialogContent({ className, side, showCloseButton, closeLabel, initialFocus, children, ...props }: DialogContentProps): import("react").JSX.Element;
 /** The dialog's heading area, above the body. */
 declare function DialogHeader({ className, ...props }: DialogHeaderProps): import("react").JSX.Element;
 /** The dialog's action area, below the body. */

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

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,GAAG,YAAY,CAAA;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,mDAAmD;AACnD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAEvE;;;;;GAKG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACrD,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,IAAI,CAAC;CAAG;AAEjE,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,GAAG,CAAC;CAAG;AAEtE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAqBrE;;;;;;;;GAQG;AACH,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAExC;AAED,yCAAyC;AACzC,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAcjE;AAED,qDAAqD;AACrD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAe,EACf,eAAsB,EACtB,UAAoB,EACpB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAgCpB;AAED,iDAAiD;AACjD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAQ/D;AAED,gDAAgD;AAChD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAW/D;AAED,0EAA0E;AAC1E,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAQ7D;AAED,yCAAyC;AACzC,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAQzE;AAED,gEAAgE;AAChE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAc7D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,WAAW,GACZ,CAAA"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,GAAG,YAAY,CAAA;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,mDAAmD;AACnD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAEvE;;;;;GAKG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACrD,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAC7C;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,IAAI,CAAC;CAAG;AAEjE,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,GAAG,CAAC;CAAG;AAEtE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAgCrE;;;;;;;;;;;;;;GAcG;AACH,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAExC;AAED,yCAAyC;AACzC,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAmBjE;AAED,qDAAqD;AACrD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAe,EACf,eAAsB,EACtB,UAAoB,EACpB,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAiDpB;AAED,iDAAiD;AACjD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAQ/D;AAED,gDAAgD;AAChD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAW/D;AAED,0EAA0E;AAC1E,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAQ7D;AAED,yCAAyC;AACzC,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAQzE;AAED,gEAAgE;AAChE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAc7D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,WAAW,GACZ,CAAA"}

package/dist/components/ui/dialog.js

@@ -10,12 +10,23 @@ const VIEWPORT = {
     left: 'fixed inset-y-0 left-0 z-50 flex',
     right: 'fixed inset-y-0 right-0 z-50 flex',
 };
+/**
+ * The panel a dialog draws at each side.
+ *
+ * The two widths are authored container tokens rather than steps of a size scale,
+ * because an overlay's width is a property of the kind of surface it is and not of
+ * the page grid underneath it. `overlay-panel` is the side sheet, which is a panel
+ * beside the work; `overlay-dialog` is the centred card, which is a decision or a
+ * short task. Both used to be spelled with Tailwind's own container steps, which
+ * ship at the same values, so nothing rendered differently and a retune of the
+ * authored token would have moved one spelling and not the other.
+ */
 const POPUP = {
-    center: 'w-full max-w-md rounded-xl border data-[starting-style]:scale-95 data-[ending-style]:scale-95',
+    center: 'w-full max-w-overlay-dialog rounded-xl border data-[starting-style]:scale-95 data-[ending-style]:scale-95',
     top: 'w-full rounded-b-xl border-x border-b data-[starting-style]:-translate-y-4 data-[ending-style]:-translate-y-4',
     bottom: 'w-full rounded-t-xl border-x border-t data-[starting-style]:translate-y-4 data-[ending-style]:translate-y-4',
-    left: 'h-full w-3/4 max-w-sm rounded-r-xl border-y border-r data-[starting-style]:-translate-x-4 data-[ending-style]:-translate-x-4',
-    right: 'h-full w-3/4 max-w-sm rounded-l-xl border-y border-l data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4',
+    left: 'h-full w-3/4 max-w-overlay-panel rounded-r-xl border-y border-r data-[starting-style]:-translate-x-4 data-[ending-style]:-translate-x-4',
+    right: 'h-full w-3/4 max-w-overlay-panel rounded-l-xl border-y border-l data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4',
 };
 /**
  * A modal surface that interrupts the page.
@@ -25,17 +36,40 @@ const POPUP = {
  * closes. Always give it a `DialogTitle`, which names the dialog for every
  * reader. Use a Dialog for a decision or a short task; for content that is
  * not a task, use a Popover or navigate to a page.
+ *
+ * The built-in close control is 16px for a mouse and a trackpad and takes the
+ * 44px coarse-pointer floor on touch input, without moving on screen: it stays in
+ * the panel's top-right corner and the panel's own padding stays what it is. Pass
+ * `showCloseButton={false}` and draw your own control when a dialog's header runs
+ * the full width of its panel, which is what `search-dialog.tsx` does.
  */
 function Dialog({ ...props }) {
     return _jsx(DialogPrimitive.Root, { ...props });
 }
 /** The element that opens the dialog. */
 function DialogTrigger({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", className: cn('bg-background shadow-xs inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', className), ...props }));
+    return (_jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", className: cn('bg-background shadow-xs inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium outline-none', 
+        // The same step `Button`'s `default` size takes, and this string is that
+        // size's string: the trigger here was written as a copy of it and the copy
+        // did not bring the coarse-pointer floor with it, which left a dialog's
+        // own trigger below both the 44px standard and its own trigger on desktop.
+        'pointer-coarse:h-11 pointer-coarse:min-w-11', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', className), ...props }));
 }
 /** The dialog panel, its backdrop and its portal. */
-function DialogContent({ className, side = 'center', showCloseButton = true, closeLabel = 'Close', children, ...props }) {
-    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-backdrop", className: "bg-background/80 fixed inset-0 z-50 backdrop-blur-sm transition-opacity duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsx(DialogPrimitive.Viewport, { "data-slot": "dialog-viewport", className: VIEWPORT[side], children: _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('bg-background shadow-md relative grid gap-4 p-6 outline-none', 'transition-[opacity,transform] duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0', POPUP[side], className), ...props, children: [children, showCloseButton ? (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", "aria-label": closeLabel, className: "ring-offset-background focus-visible:ring-ring absolute top-4 right-4 rounded-sm opacity-70 outline-none transition-opacity duration-fast ease-out hover:opacity-100 focus-visible:ring-[3px] disabled:pointer-events-none", children: _jsx(XIcon, { className: "size-4" }) })) : null] }) })] }));
+function DialogContent({ className, side = 'center', showCloseButton = true, closeLabel = 'Close', initialFocus, children, ...props }) {
+    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-backdrop", className: "bg-background/80 fixed inset-0 z-50 backdrop-blur-sm transition-opacity duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsx(DialogPrimitive.Viewport, { "data-slot": "dialog-viewport", className: VIEWPORT[side], children: _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", initialFocus: initialFocus, className: cn('bg-background shadow-md relative grid gap-4 p-6 outline-none', 'transition-[opacity,transform] duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0', POPUP[side], className), ...props, children: [children, showCloseButton ? (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", "aria-label": closeLabel, className: cn('ring-offset-background focus-visible:ring-ring absolute top-4 right-4 flex items-center justify-center rounded-sm opacity-70 outline-none', 
+                            // The floor, as a coarse-pointer step. A dialog is the one surface where
+                            // growing a control is more constrained than it looks, because the
+                            // close button is absolutely positioned in the panel's top-right corner
+                            // and a 44px box at a 16px inset overhangs the panel's own 24px padding
+                            // into the header. What it reaches there is the empty right-hand end of
+                            // the title row, and the answer for a dialog whose header does reach
+                            // there is `showCloseButton={false}` and a close control of the caller's
+                            // own, which `search-dialog.tsx` draws in its field row. A band was the
+                            // other option and it is worse: at a 16px corner inset any 44px band
+                            // hangs off the panel, and on a phone the panel is the viewport minus
+                            // its own gutter, so the overhang is clipped by the screen.
+                            'transition-opacity duration-fast ease-out hover:opacity-100 focus-visible:ring-[3px]', 'pointer-coarse:size-11', 'disabled:pointer-events-none'), children: _jsx(XIcon, { className: "size-4" }) })) : null] }) })] }));
 }
 /** The dialog's heading area, above the body. */
 function DialogHeader({ className, ...props }) {