@nanisoft/prism-ui 0.10.1 → 0.13.0

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

@@ -0,0 +1,111 @@
+import { type CalendarWeekdays } from './calendar.js';
+/** The props the Date picker accepts. */
+export interface DatePickerProps {
+    /**
+     * The accessible name of the field.
+     *
+     * Required. It is rendered as the field's own name rather than as visible text,
+     * because a visible label belongs above the control and that is the caller's
+     * `Label` to place. What the Component owns is the name, and a field with no
+     * name is a field a screen reader reader cannot say out loud.
+     */
+    label: string;
+    /**
+     * Formats a chosen date for the field.
+     *
+     * Required, and required as a function rather than as a format string, because a
+     * date is a phrase in the reader's language and their convention. This Component
+     * ships no date format: a hardcoded one would be a claim about how dates are
+     * written in every consumer's product.
+     */
+    format: (date: Date) => string;
+    /** The caption for a month on show, in the reader's language. */
+    monthLabel: (month: Date) => string;
+    /** The seven weekday headings, starting from `firstWeekday`. */
+    weekdayLabels: CalendarWeekdays;
+    /** Which day the reader's week starts on, as `Date.prototype.getDay()` numbers it. */
+    firstWeekday?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** The accessible name of the control that steps back one month. */
+    previousLabel: string;
+    /** The accessible name of the control that steps forward one month. */
+    nextLabel: string;
+    /**
+     * The accessible name of the control that clears the field.
+     *
+     * Omit it and the control is not rendered. The words are the caller's because
+     * they are a sentence a reader hears, and a Component that chose them would be
+     * shipping English into every consumer's form.
+     */
+    clearLabel?: string;
+    /**
+     * What the field shows before a date is chosen.
+     *
+     * Hidden from the accessibility tree, because the field already has a name and
+     * a placeholder that becomes a second name is a field announced twice.
+     */
+    placeholder?: string;
+    /** The chosen date, when the field is controlled. */
+    value?: Date | null;
+    /** The date chosen initially, for an uncontrolled field. */
+    defaultValue?: Date | null;
+    /** Called with the chosen date, or `null` when the reader clears the field. */
+    onValueChange?: (date: Date | null) => void;
+    /** Whether a date cannot be chosen. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** The full accessible name of a day, in the reader's own date format. */
+    dayLabel?: (date: Date) => string;
+    /** The date to mark as today. Defaults to the reader's clock. */
+    today?: Date;
+    /** Whether the reader may not open the calendar or choose a date. */
+    disabled?: boolean;
+    /** Whether a date must be chosen before the form submits. */
+    required?: boolean;
+    /**
+     * The form field name. The chosen date is submitted as `YYYY-MM-DD`.
+     *
+     * Never the displayed string. A form that posts whatever the reader's locale
+     * wrote makes every reader of that data parse a phrase.
+     */
+    name?: string;
+    /** Identifies the form that owns the hidden input. */
+    form?: string;
+    /** The field's own id, so a label elsewhere can point at it. */
+    id?: string;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A field that opens a month grid and holds the date the reader picks.
+ *
+ * **It is built on the Calendar rather than beside it.** The month grid is a
+ * month grid: six rows, a roving tab stop, arrow keys that cross into the next
+ * month, and a rule about what a disabled date means. A picker with its own grid
+ * would be a second answer to all six questions, and the second answer is the one
+ * that ships the bug.
+ *
+ * **Choosing a date commits it and closes, in one gesture.** A field that left the
+ * grid open after a choice asks the reader to confirm an answer they already gave,
+ * and the Popover returns focus to the trigger on close, so a reader who is
+ * tabbing onward from the field is where they expect to be rather than back at
+ * the top of the document.
+ *
+ * **The month on show follows the answer, every time the field is opened.** A
+ * filled field opens on the month of its value, and an empty one on the current
+ * month. Without this, re-picking a date in a different month would reset the grid
+ * to the month the caller seeded it with, which is the month the reader was in
+ * the first time and is a silent undo of the navigation they just did.
+ *
+ * **The field shows the caller's formatted date and submits an ISO day.** Those are
+ * two different strings on purpose: one is read by a person and written in their
+ * language, the other is read by a machine that has no locale. A field that
+ * submitted what it displayed hands every downstream reader a phrase to parse.
+ *
+ * **The name and the value are announced separately.** The name is the field's
+ * label and the value is its description, which is how a field is read: "Delivery
+ * date, 17 March 2026". Letting the visible date become the button's name would
+ * replace the field's name with its current answer, so a reader who tabs through
+ * a form of five date fields hears five dates and no questions.
+ */
+declare function DatePicker({ label, format, monthLabel, weekdayLabels, firstWeekday, previousLabel, nextLabel, clearLabel, placeholder, value, defaultValue, onValueChange, isDateDisabled, dayLabel, today, disabled, required, name, form, id, className, }: DatePickerProps): import("react").JSX.Element;
+export { DatePicker };
+//# sourceMappingURL=date-picker.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,74 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from 'lucide-react';
+import { useCallback, useId, useState } from 'react';
+import { Calendar } from './calendar.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { cn } from '../../lib/utils.js';
+/** `YYYY-MM-DD`, which is the only date format a form should post. */
+const iso = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+const startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+/**
+ * A field that opens a month grid and holds the date the reader picks.
+ *
+ * **It is built on the Calendar rather than beside it.** The month grid is a
+ * month grid: six rows, a roving tab stop, arrow keys that cross into the next
+ * month, and a rule about what a disabled date means. A picker with its own grid
+ * would be a second answer to all six questions, and the second answer is the one
+ * that ships the bug.
+ *
+ * **Choosing a date commits it and closes, in one gesture.** A field that left the
+ * grid open after a choice asks the reader to confirm an answer they already gave,
+ * and the Popover returns focus to the trigger on close, so a reader who is
+ * tabbing onward from the field is where they expect to be rather than back at
+ * the top of the document.
+ *
+ * **The month on show follows the answer, every time the field is opened.** A
+ * filled field opens on the month of its value, and an empty one on the current
+ * month. Without this, re-picking a date in a different month would reset the grid
+ * to the month the caller seeded it with, which is the month the reader was in
+ * the first time and is a silent undo of the navigation they just did.
+ *
+ * **The field shows the caller's formatted date and submits an ISO day.** Those are
+ * two different strings on purpose: one is read by a person and written in their
+ * language, the other is read by a machine that has no locale. A field that
+ * submitted what it displayed hands every downstream reader a phrase to parse.
+ *
+ * **The name and the value are announced separately.** The name is the field's
+ * label and the value is its description, which is how a field is read: "Delivery
+ * date, 17 March 2026". Letting the visible date become the button's name would
+ * replace the field's name with its current answer, so a reader who tabs through
+ * a form of five date fields hears five dates and no questions.
+ */
+function DatePicker({ label, format, monthLabel, weekdayLabels, firstWeekday = 0, previousLabel, nextLabel, clearLabel, placeholder, value, defaultValue = null, onValueChange, isDateDisabled, dayLabel, today = new Date(), disabled = false, required = false, name, form, id, className, }) {
+    const [ownValue, setOwnValue] = useState(defaultValue);
+    const [ownOpen, setOwnOpen] = useState(false);
+    const [month, setMonth] = useState(() => startOfMonth(defaultValue ?? today));
+    const generated = useId();
+    const triggerId = id ?? generated;
+    const valueId = `${generated}-value`;
+    const chosen = value === undefined ? ownValue : value;
+    const open = ownOpen;
+    const shown = chosen === null ? '' : format(chosen);
+    const choose = (date) => {
+        if (value === undefined)
+            setOwnValue(date);
+        onValueChange?.(date);
+        setOwnOpen(false);
+    };
+    const clear = useCallback(() => {
+        if (value === undefined)
+            setOwnValue(null);
+        onValueChange?.(null);
+    }, [onValueChange, value]);
+    const onOpenChange = (next) => {
+        // Reseeded on every open rather than held, so the grid always arrives on the
+        // month the reader is about to edit.
+        if (next)
+            setMonth(startOfMonth(chosen ?? today));
+        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 }))] }));
+}
+export { DatePicker };

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

@@ -1,3 +1,4 @@
+import type { PackId } from '../../theming/index.js';
 /**
  * One named thing in a Diagram, at a position the caller chooses.
  *
@@ -7,11 +8,12 @@
  * another, so a caller that means a column spreads it rather than repeating a
  * number.
  *
- * `emphasis` marks the one node the drawing is about, and it is the only
- * difference a node may carry: the emphasised node takes the brand ink, which
- * DESIGN.md's Brand Ink Rule names as the colour for something that must read
- * as the brand rather than as body text. Two emphasised nodes are a caller's
- * mistake, not a second emphasis level.
+ * A node carries two differences and no more. `emphasis` marks the one node the
+ * drawing is about, and it is the emphasised node that takes the brand ink,
+ * which is what DESIGN.md's Brand Ink Rule names as the colour for something
+ * that must read as the brand rather than as body text; two emphasised nodes are
+ * a caller's mistake, not a second emphasis level. `pack` is the node's own hue,
+ * and it is per node for the reasons given on that field.
  */
 export type DiagramNode = {
     /**
@@ -25,12 +27,48 @@ export type DiagramNode = {
      * reader does not read it: see `DiagramProps` for what carries the meaning.
      */
     name: string;
+    /**
+     * The second line printed under the name, which is the one-line role the thing
+     * plays: "the shared language", "the engine", "built next".
+     *
+     * It is a field rather than a word written into `label`, because the two
+     * audiences are different and a role description that exists only inside the
+     * accessible name has been given to one of them and withheld from the other.
+     * It is drawn on the picture, it is read aloud as part of the name when the
+     * caller passes no `label`, and because both come out of the same field they
+     * are the same words and cannot drift.
+     */
+    subtitle?: string;
     /** The node's position along the horizontal axis, in the caller's space. */
     x: number;
     /** The node's position along the vertical axis, in the caller's space. */
     y: number;
     /** Marks the node the diagram is about. See the Brand Ink Rule. */
     emphasis?: boolean;
+    /**
+     * The node's pack, which is the hue its mark wears.
+     *
+     * `PackId` rather than `string`, because a pack is one of the six published
+     * packs: a free-text field would accept a name matching no emitted rule, and a
+     * mark under a boundary nothing matches keeps the colour of whatever pack is
+     * above it, which is a silent wrong answer rather than a rejected one.
+     *
+     * **It is per node, and that is settled rather than incidental.** A pack on
+     * the Diagram would be one boundary on the section, and the boundary is the
+     * unit of a second pack on a MARK: `ProductMark` is the item that established
+     * it, and a mark here is a node. Per node is also what a schematic wants. One
+     * drawing of a product set shows one mark per product and each wears its own
+     * hue, which a single boundary could not express at all.
+     *
+     * The boundary lands on the `<circle>` this node draws, and not on the `<svg>`
+     * and not on the node's `<g>`, so it moves that one mark's fill and stroke and
+     * nothing else. A circle has no radius concept, so the pack re-inks the mark
+     * and cannot re-round it, which is the half of the pack boundary law a
+     * consumer implementing only the colour half gets wrong. `default` is the
+     * absence of the attribute, exactly as `themeAttributes` spells it, so a node
+     * on the base pack carries no `data-pack` and resolves from the page.
+     */
+    pack?: PackId;
 };
 /**
  * One relation between two nodes, with the word that says what it is.
@@ -55,7 +93,7 @@ export type DiagramRelation = {
     /** Draws the line dashed, for a relation that holds but not by this route. */
     indirect?: boolean;
 };
-/** What both arms of `DiagramProps` carry. */
+/** What every arm of `DiagramProps` carries. */
 type DiagramFigure = {
     /** The things drawn. At least one, or the Diagram renders an empty canvas. */
     nodes: readonly DiagramNode[];
@@ -71,11 +109,18 @@ type DiagramFigure = {
 /**
  * The props a Diagram takes.
  *
- * The name is required unless the drawing is decorative, and it is forbidden
- * when it is. That is a union rather than `label?: string` because only a union
- * lets the type system see the exception: an optional label on one type can
- * only be optional everywhere or required everywhere, and both halves of that
- * are wrong. `Separator` takes the same shape as `decorative`.
+ * The name is required unless the drawing is decorative or the nodes can be read
+ * as the name, and it is forbidden when the drawing is decorative. That is a
+ * union rather than `label?: string` because only a union lets the type system
+ * see the exception: an optional label on one type can only be optional
+ * everywhere or required everywhere, and both halves of that are wrong.
+ * `Separator` takes the same shape as `decorative`.
+ *
+ * The third arm is the one that makes the name derivable. It spells the absence
+ * as `label?: never` rather than `label?: string`, so "the caller named it" and
+ * "the caller passed nothing" cannot be confused for one another and a caller
+ * cannot hand the drawing an empty name by passing one: an unnamed image is the
+ * one outcome this prop must not have.
  */
 export type DiagramProps = DiagramFigure & ({
     /**
@@ -90,6 +135,16 @@ export type DiagramProps = DiagramFigure & ({
     /** The name of the drawing, and the only thing a screen reader reads from it. */
     label: string;
     decorative?: false;
+} | {
+    /**
+     * No name is passed, so the drawing is named by what its own marks say:
+     * every node's `name`, and its `subtitle` where it has one, in the order
+     * the caller drew them. A caller who gives a node a role description is
+     * describing the picture, and a picture's own words are the honest source
+     * for the name announced over it.
+     */
+    label?: never;
+    decorative?: false;
 });
 /**
  * A diagram of named things and the relations between them.
@@ -107,13 +162,27 @@ export type DiagramProps = DiagramFigure & ({
  * roster, and a `'use client'` line added here would put it back on that roster.
  *
  * **Accessibility.** A diagram carries meaning, so by default it is one image
- * with a name: `role="img"` and the `label` the caller passes. Everything inside
- * a `role="img"` is presentational, so the node names and relation words are
- * drawn for sighted readers and the surrounding sentence is what a screen reader
- * gets. Pass `decorative` when the sentence already says what the drawing
+ * with a name: `role="img"` and the drawing's name. Everything inside a
+ * `role="img"` is presentational, so the node names, the node subtitles and the
+ * relation words are drawn for sighted readers and the name is what a screen
+ * reader gets. That is why the name is derived from the nodes' own text when the
+ * caller passes no `label`: everything on the marks is invisible to the one
+ * reader who is not looking at the picture, so a role description written only
+ * into a label is a role description a sighted reader never sees. Pass `label`
+ * when the drawing needs a name that says what it is rather than what it holds,
+ * and omit it when the two would be the same sentence written twice. Pass
+ * `decorative` when the surrounding sentence already says what the drawing
  * shows, and the whole tree leaves the accessibility tree with nothing named
  * inside it.
  *
+ * **A node may wear its own pack.** `pack` on a node puts the boundary on the
+ * circle that node draws, which is the mark, and the mark is the one place a
+ * pack boundary belongs without moving anything but colour: a circle has no
+ * radius concept, so the pack re-inks the mark and cannot re-round it. Nothing
+ * else in the drawing answers to it, the node's name beside the mark keeps the
+ * page's ink, and a page that files two pack regions can make a diagram section
+ * the second one rather than moving it to the header's product switcher.
+ *
  * **Shape.** Nodes are circles and relations are paths. Both are shapes with no
  * radius concept, so no corner radius here is a function of `--radius` and a
  * pack boundary above the drawing moves nothing about its shape. A `<rect>` was

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":"AAEA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,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,8CAA8C;AAC9C,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;;;;;;;;GAQG;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,CACJ,CAAA;AAoFH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,YAAY,+BAsFd;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;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"}

package/dist/components/ui/diagram.js

@@ -1,5 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
+/**
+ * The drawing's accessible name, derived from the text its own marks carry.
+ *
+ * Derived rather than passed because the two audiences are different and a
+ * Component able to reach only one of them reaches neither. Everything inside a
+ * `role="img"` is presentational, so the words drawn on the marks are words no
+ * screen reader reads, and the label is the one thing it does read. A caller who
+ * put a node's role description into the label and not onto the node had
+ * published half of it: the half a sighted reader loses. Reading the name off the
+ * marks is what makes that drift impossible rather than merely discouraged, and
+ * it is why the drawn line and the announced line are the same field.
+ *
+ * Relation words are not part of it, and that is the honest limit of a
+ * derivation rather than an oversight. A derived name says what the drawing
+ * holds; a caller whose relations matter to a screen reader user passes a
+ * `label` that says so. Inventing a sentence out of the relations would be this
+ * Component writing the words, which is the one thing it does not do.
+ */
+function derivedName(nodes) {
+    return nodes.reduce((name, node) => {
+        // Parentheses between a thing and its role, commas between things, so a
+        // reader hearing the list can tell which words belong to which mark. Both
+        // are punctuation assembled here rather than a word this Component wrote.
+        const words = node.subtitle ? `${node.name} (${node.subtitle})` : node.name;
+        return name === '' ? words : `${name}, ${words}`;
+    }, '');
+}
 /**
  * The canvas the Diagram draws into, in its own user units.
  *
@@ -21,6 +48,12 @@ const CANVAS_HEIGHT = 400;
  * and a name is wider than the mark. The band is the honest cost of a server
  * component not being able to measure text, and it is why a name that runs long
  * still lands inside the canvas rather than off its edge.
+ *
+ * A node's subtitle, where it has one, is the deepest ink a node draws, at
+ * `NODE_SUBTITLE_OFFSET` below the mark, and that is inside the band too. The
+ * cost of not being able to measure text is paid once rather than per line, and
+ * paying it for the second line is what keeps the two-line node inside the
+ * canvas rather than under its own floor.
  */
 const PADDING = 56;
 /** The node mark's radius. A circle, so there is no corner radius for the pack to move. */
@@ -35,7 +68,17 @@ const NODE_RADIUS = 5;
  */
 const NODE_NAME_SIZE = 13;
 const NODE_NAME_OFFSET = 20;
+const NODE_SUBTITLE_SIZE = 11;
 const RELATION_NAME_SIZE = 11;
+/**
+ * The subtitle's baseline, measured down from the mark's centre.
+ *
+ * The name's baseline, then the subtitle's own size, then a line of leading. It is
+ * the deepest any node draws and it is why `PADDING` has to be what it is; a
+ * second line that were placed on the name rather than below it would collide
+ * with it on every node that had one.
+ */
+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.
@@ -83,13 +126,27 @@ function fit(nodes) {
  * roster, and a `'use client'` line added here would put it back on that roster.
  *
  * **Accessibility.** A diagram carries meaning, so by default it is one image
- * with a name: `role="img"` and the `label` the caller passes. Everything inside
- * a `role="img"` is presentational, so the node names and relation words are
- * drawn for sighted readers and the surrounding sentence is what a screen reader
- * gets. Pass `decorative` when the sentence already says what the drawing
+ * with a name: `role="img"` and the drawing's name. Everything inside a
+ * `role="img"` is presentational, so the node names, the node subtitles and the
+ * relation words are drawn for sighted readers and the name is what a screen
+ * reader gets. That is why the name is derived from the nodes' own text when the
+ * caller passes no `label`: everything on the marks is invisible to the one
+ * reader who is not looking at the picture, so a role description written only
+ * into a label is a role description a sighted reader never sees. Pass `label`
+ * when the drawing needs a name that says what it is rather than what it holds,
+ * and omit it when the two would be the same sentence written twice. Pass
+ * `decorative` when the surrounding sentence already says what the drawing
  * shows, and the whole tree leaves the accessibility tree with nothing named
  * inside it.
  *
+ * **A node may wear its own pack.** `pack` on a node puts the boundary on the
+ * circle that node draws, which is the mark, and the mark is the one place a
+ * pack boundary belongs without moving anything but colour: a circle has no
+ * radius concept, so the pack re-inks the mark and cannot re-round it. Nothing
+ * else in the drawing answers to it, the node's name beside the mark keeps the
+ * page's ink, and a page that files two pack regions can make a diagram section
+ * the second one rather than moving it to the header's product switcher.
+ *
  * **Shape.** Nodes are circles and relations are paths. Both are shapes with no
  * radius concept, so no corner radius here is a function of `--radius` and a
  * pack boundary above the drawing moves nothing about its shape. A `<rect>` was
@@ -128,12 +185,17 @@ function fit(nodes) {
 function Diagram({ nodes, relations, label, decorative = false, className, }) {
     const place = fit(nodes);
     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
+    // string is the one value the accessible name must never take, and the caller
+    // who passed it has said no more than the caller who passed nothing.
+    const name = label !== undefined && label.trim() !== '' ? label : derivedName(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) }] : [];
     });
-    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 : label, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', className), children: [drawn.map(({ relation, from, 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.
@@ -144,7 +206,15 @@ function Diagram({ nodes, relations, label, decorative = false, className, }) {
                 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);
-                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, 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.id));
+                // `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.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { XIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 const VIEWPORT = {
     center: 'fixed inset-0 z-50 flex items-center justify-center p-4',
     top: 'fixed inset-x-0 top-0 z-50 flex justify-center',

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

@@ -0,0 +1,105 @@
+import type { ComponentProps, ReactNode } from 'react';
+/** What happened to one line. */
+export type DiffLineKind = 'context' | 'added' | 'removed';
+/** One line of a change. */
+export type DiffLine = {
+    /** What happened to it. @defaultValue 'context' */
+    kind?: DiffLineKind;
+    /**
+     * The number this line had before the change.
+     *
+     * A removed line has one and no new number, an added line the reverse, and a
+     * context line both. That asymmetry is the structural signal that says which
+     * side a line is on, and it is why the line numbers are the first thing in the
+     * markup rather than decoration beside the content.
+     */
+    oldNumber?: number;
+    /** The number this line has after the change. */
+    newNumber?: number;
+    /** The line's text, exactly as it is in the file. */
+    content: string;
+    /**
+     * The character ranges within `content` that actually changed.
+     *
+     * Optional, and a line with none is drawn whole. This is what separates a diff
+     * that shows a line changed from one that shows what changed inside it, and it
+     * is the difference between reading a change and scanning for it.
+     */
+    changed?: readonly (readonly [number, number])[];
+};
+/** The words a reader is told for each kind, because the Component ships none. */
+export type DiffLabels = {
+    /** Read for a line that was added. */
+    added: string;
+    /** Read for a line that was removed. */
+    removed: string;
+    /** Read for a line that did not change. */
+    context: string;
+};
+/** The props the Diff accepts. */
+export interface DiffProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** The lines, in file order. */
+    lines: readonly DiffLine[];
+    /**
+     * The accessible name of the change, read before its lines.
+     *
+     * Required rather than defaulted, because a page with two diffs is a page where
+     * a reader cannot tell which change they are in, and the name is the caller's
+     * word.
+     */
+    label: string;
+    /**
+     * The words for each kind of line.
+     *
+     * Required, and the reason is the same one that makes a Dialog's close label a
+     * prop: a diff that announced "added" and "removed" in English would be a diff
+     * every consumer inherits in a language they did not choose. A shared library
+     * cannot know whether the word for this is "added" or "ajoute" or "hinzugefugt".
+     */
+    labels: DiffLabels;
+    /** The name of the thing that changed, shown above the lines. */
+    file?: string;
+    /**
+     * A summary of the change, shown beside the file name.
+     *
+     * The caller's words, because a diff that computed "3 additions, 1 deletion"
+     * would be shipping a sentence. What it counts is left to the caller for the
+     * same reason, and because a diff of a rename has no additions at all.
+     */
+    summary?: ReactNode;
+    /** Layout only. */
+    className?: string;
+    /** What a reader is told when there is nothing to show. */
+    empty?: ReactNode;
+}
+/**
+ * A change, as lines with the numbers they had and the numbers they have.
+ *
+ * **The bar is change density, not a side marker.** A diff conventionally marks
+ * each line with a coloured wash and a rail, which tells a reader that a line
+ * changed and nothing about how much. Rewriting one identifier in a long line
+ * leaves the same mark as replacing the whole line, so the reader's eye, which is
+ * fast at finding saturated bands, is drawn to the least interesting change in the
+ * file. Here the bar's width is the fraction of the line that actually changed, so
+ * the eye goes to the line that was rewritten rather than the line that was
+ * touched, and the marks that used to be a wash become a measurement.
+ *
+ * **The line numbers carry the side, not the colour.** An added line has a new
+ * number and no old one; a removed line the reverse. That asymmetry is structural,
+ * it is how every diff reader a developer has ever used distinguishes the two, and
+ * it does not depend on distinguishing red from green. The colour is redundant on
+ * top of it, which is the right way round: the shape carries the meaning and the
+ * colour reinforces it.
+ *
+ * **It is a table, because a diff is two columns of numbers beside a column of
+ * text.** Row and column navigation, the count of lines, and the association
+ * between a line and its number all come from the semantics rather than from a
+ * grid of divs, and a reader moving by row hears the file the way they read it.
+ *
+ * **The changed words are emphasised by weight.** See the note on the helper: a
+ * diff that tinted them would spend the two hues a reader is most likely to be
+ * unable to tell apart, and weight survives greyscale.
+ */
+declare function Diff({ lines, label, labels, file, summary, className, empty, ...props }: DiffProps): import("react").JSX.Element;
+export { Diff };
+//# sourceMappingURL=diff.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../../src/components/ui/diff.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,iCAAiC;AACjC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;AAE1D,4BAA4B;AAC5B,MAAM,MAAM,QAAQ,GAAG;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAA;CACjD,CAAA;AAED,kFAAkF;AAClF,MAAM,MAAM,UAAU,GAAG;IACvB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAA;IACf,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,kCAAkC;AAClC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxE,gCAAgC;IAChC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC1B;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,MAAM,EAAE,UAAU,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAgED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BA6H3F;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}