@misoto22/design 0.7.0 → 0.9.0

package/dist/components/DatePicker/DatePicker.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CalendarDays } from "lucide-react";
-import { useRef, useState } from "react";
+import { useId, useRef, useState } from "react";
+import { dateMatchModifiers } from "react-day-picker";
 import { cn } from "../../lib/cn.js";
 import { Calendar } from "../Calendar/Calendar.js";
+import { useFieldControl } from "../Field/field-control.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover.js";
 const daysAgo = (n) => {
   const to = /* @__PURE__ */ new Date();
@@ -61,7 +63,8 @@ const DATE_PRESETS = [
 function PresetRail({
   presets,
   onPick,
-  label
+  label,
+  blocked
 }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -73,8 +76,13 @@ function PresetRail({
         "button",
         {
           type: "button",
-          onClick: () => onPick(preset.value()),
-          className: "rounded-(--radius-sm) px-2.5 py-1.5 text-start text-[13px] text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)",
+          disabled: blocked?.(preset.value()) ?? false,
+          onClick: () => {
+            const next = preset.value();
+            if (blocked?.(next)) return;
+            onPick(next);
+          },
+          className: "rounded-(--radius-sm) px-2.5 py-1.5 text-start text-[13px] text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
           children: preset.label
         },
         preset.label
@@ -94,32 +102,53 @@ function DatePicker({
   disabledDates,
   format = formatDate,
   presets,
-  className
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid
 }) {
   const rail = presets === true ? DATE_PRESETS : presets || void 0;
   const [open, setOpen] = useState(false);
   const [uncontrolled, setUncontrolled] = useState(defaultValue);
   const current = value ?? uncontrolled;
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const valueId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
   const choose = (next) => {
     if (value === void 0) setUncontrolled(next);
     onValueChange?.(next);
     if (next) setOpen(false);
   };
+  const refuses = (date) => disabledDates !== void 0 && dateMatchModifiers(date, disabledDates);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxs(
       PopoverTrigger,
       {
-        "aria-label": label,
+        id: triggerId,
+        "aria-labelledby": `${nameId} ${valueId}`,
+        "aria-describedby": describedBy,
+        "aria-invalid": ariaInvalid || void 0,
         disabled,
         className: cn(TRIGGER, current ? "text-(--ink)" : "text-(--ink-3-aa)", className),
         children: [
-          current ? format(current) : placeholder,
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx("span", { id: valueId, className: "truncate", children: current ? format(current) : placeholder }),
           /* @__PURE__ */ jsx(CalendarDays, { size: 14, strokeWidth: 1.5, "aria-hidden": true, className: "shrink-0 text-(--ink-3-aa)" })
         ]
       }
     ),
     /* @__PURE__ */ jsx(PopoverContent, { label, align: "start", className: "w-auto overflow-hidden p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
-      rail && /* @__PURE__ */ jsx(PresetRail, { presets: rail, onPick: choose, label: `${label} shortcuts` }),
+      rail && /* @__PURE__ */ jsx(
+        PresetRail,
+        {
+          presets: rail,
+          onPick: choose,
+          label: `${label} shortcuts`,
+          blocked: refuses
+        }
+      ),
       /* @__PURE__ */ jsx(
         Calendar,
         {
@@ -144,12 +173,21 @@ function DateRangePicker({
   months = 2,
   format = formatDate,
   presets = true,
-  className
+  className,
+  id,
+  "aria-describedby": describedBy,
+  "aria-invalid": ariaInvalid
 }) {
   const rail = presets === true ? RANGE_PRESETS : presets || void 0;
   const [open, setOpen] = useState(false);
   const [uncontrolled, setUncontrolled] = useState(defaultValue);
   const current = value ?? uncontrolled;
+  const field = useFieldControl();
+  const generated = useId();
+  const triggerId = id ?? generated;
+  const valueId = `${triggerId}-value`;
+  const nameId = field?.labelId ?? `${triggerId}-name`;
+  const refuses = (range) => disabledDates !== void 0 && [range.from, range.to].some((date) => date != null && dateMatchModifiers(date, disabledDates));
   const clicks = useRef(0);
   const choose = (next) => {
     clicks.current += 1;
@@ -167,11 +205,15 @@ function DateRangePicker({
     /* @__PURE__ */ jsxs(
       PopoverTrigger,
       {
-        "aria-label": label,
+        id: triggerId,
+        "aria-labelledby": `${nameId} ${valueId}`,
+        "aria-describedby": describedBy,
+        "aria-invalid": ariaInvalid || void 0,
         disabled,
         className: cn(TRIGGER, current?.from ? "text-(--ink)" : "text-(--ink-3-aa)", className),
         children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate", children: printed }),
+          field?.labelId == null && /* @__PURE__ */ jsx("span", { id: nameId, className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx("span", { id: valueId, className: "truncate", children: printed }),
           /* @__PURE__ */ jsx(CalendarDays, { size: 14, strokeWidth: 1.5, "aria-hidden": true, className: "shrink-0 text-(--ink-3-aa)" })
         ]
       }
@@ -186,7 +228,8 @@ function DateRangePicker({
             onValueChange?.(next);
             setOpen(false);
           },
-          label: `${label} shortcuts`
+          label: `${label} shortcuts`,
+          blocked: refuses
         }
       ),
       /* @__PURE__ */ jsx(

package/dist/components/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarDays } from 'lucide-react'\nimport { useRef, useState, type ComponentProps } from 'react'\nimport type { DateRange } from 'react-day-picker'\nimport { cn } from '../../lib/cn'\nimport { Calendar } from '../Calendar/Calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport type { DateRange }\n\n/** A named shortcut in the rail beside the calendar. */\nexport interface DatePreset<T> {\n  label: string\n  /** Computed when clicked, not when rendered — \"today\" must mean today. */\n  value: () => T\n}\n\n/** `n` days back from today, inclusive of today. */\nconst daysAgo = (n: number): DateRange => {\n  const to = new Date()\n  const from = new Date()\n  from.setDate(from.getDate() - (n - 1))\n  return { from, to }\n}\n\n/**\n * The shortcuts a range picker is asked for on nearly every screen it appears\n * on, so they ship rather than being rebuilt per dashboard.\n *\n * Computed on click: a preset list built at render time freezes \"today\" at\n * whenever the page loaded, which is wrong for anything left open overnight.\n */\nexport const RANGE_PRESETS: DatePreset<DateRange>[] = [\n  { label: 'Last 7 days', value: () => daysAgo(7) },\n  { label: 'Last 30 days', value: () => daysAgo(30) },\n  { label: 'Last 90 days', value: () => daysAgo(90) },\n  { label: 'Last 12 months', value: () => daysAgo(365) },\n  {\n    label: 'Month to date',\n    value: () => {\n      const to = new Date()\n      return { from: new Date(to.getFullYear(), to.getMonth(), 1), to }\n    },\n  },\n  {\n    label: 'Year to date',\n    value: () => {\n      const to = new Date()\n      return { from: new Date(to.getFullYear(), 0, 1), to }\n    },\n  },\n]\n\n/** The single-date equivalent. */\nexport const DATE_PRESETS: DatePreset<Date>[] = [\n  { label: 'Today', value: () => new Date() },\n  {\n    label: 'Tomorrow',\n    value: () => {\n      const date = new Date()\n      date.setDate(date.getDate() + 1)\n      return date\n    },\n  },\n  {\n    label: 'In a week',\n    value: () => {\n      const date = new Date()\n      date.setDate(date.getDate() + 7)\n      return date\n    },\n  },\n  {\n    label: 'In a month',\n    value: () => {\n      const date = new Date()\n      date.setMonth(date.getMonth() + 1)\n      return date\n    },\n  },\n]\n\n/**\n * The rail of shortcuts.\n *\n * A `<nav>`-less list of plain buttons rather than a menu: they set the same\n * value the grid beside them sets, so they are part of one control and should\n * Tab in the same pass rather than opening something.\n */\nfunction PresetRail<T>({\n  presets,\n  onPick,\n  label,\n}: {\n  presets: DatePreset<T>[]\n  onPick: (value: T) => void\n  label: string\n}) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className=\"flex shrink-0 flex-col gap-0.5 border-b border-(--rule) p-2 sm:border-b-0 sm:border-e max-sm:flex-row max-sm:flex-wrap\"\n    >\n      {presets.map((preset) => (\n        <button\n          key={preset.label}\n          type=\"button\"\n          onClick={() => onPick(preset.value())}\n          className=\"rounded-(--radius-sm) px-2.5 py-1.5 text-start text-[13px] text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink)\"\n        >\n          {preset.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\nconst TRIGGER =\n  'flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * The visitor's own locale, not a fixed `dd/mm/yyyy`.\n *\n * `03/04` is March the fourth in one country and the third of April in the\n * next, and there is no format that is unambiguous to everyone. `Intl` already\n * knows which one this reader expects.\n */\nconst formatDate = (date: Date) =>\n  new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)\n\nexport interface DatePickerProps {\n  value?: Date\n  defaultValue?: Date\n  onValueChange?: (value: Date | undefined) => void\n  /** Names the control. Required — the trigger's text is a value, not a label. */\n  label: string\n  placeholder?: string\n  disabled?: boolean\n  /** Days the reader may not choose. Passed straight to the calendar. */\n  disabledDates?: ComponentProps<typeof Calendar>['disabled']\n  /** How the chosen date is printed on the trigger. */\n  format?: (date: Date) => string\n  /**\n   * Shortcuts shown beside the grid. Pass `true` for the built-in set, an array\n   * for your own, or leave it off for none.\n   */\n  presets?: boolean | DatePreset<Date>[]\n  className?: string\n}\n\n/**\n * A date, chosen from a calendar.\n *\n * A trigger and a `Calendar` in a `Popover` — not a new component so much as\n * the composition people otherwise assemble slightly differently on every\n * screen.\n *\n * It is deliberately NOT a text input with a calendar attached. A typed date\n * needs parsing, and parsing needs a format, and a format is a locale argument\n * nobody wins. When typing genuinely matters — a birth date, a long way back —\n * the calendar's month and year are dropdowns, which is the same journey\n * without the ambiguity.\n *\n * @example\n * <Field label=\"Publish on\"><DatePicker label=\"Publish on\" /></Field>\n */\nexport function DatePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  label,\n  placeholder = 'Pick a date',\n  disabled = false,\n  disabledDates,\n  format = formatDate,\n  presets,\n  className,\n}: DatePickerProps) {\n  const rail = presets === true ? DATE_PRESETS : presets || undefined\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<Date | undefined>(defaultValue)\n  const current = value ?? uncontrolled\n\n  const choose = (next: Date | undefined) => {\n    if (value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n    if (next) setOpen(false)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        aria-label={label}\n        disabled={disabled}\n        className={cn(TRIGGER, current ? 'text-(--ink)' : 'text-(--ink-3-aa)', className)}\n      >\n        {current ? format(current) : placeholder}\n        <CalendarDays size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align=\"start\" className=\"w-auto overflow-hidden p-0\">\n        <div className=\"flex flex-col sm:flex-row\">\n          {rail && <PresetRail presets={rail} onPick={choose} label={`${label} shortcuts`} />}\n          <Calendar\n            mode=\"single\"\n            selected={current}\n            onSelect={choose}\n            disabled={disabledDates}\n            autoFocus\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport interface DateRangePickerProps {\n  value?: DateRange\n  defaultValue?: DateRange\n  onValueChange?: (value: DateRange | undefined) => void\n  label: string\n  placeholder?: string\n  disabled?: boolean\n  disabledDates?: ComponentProps<typeof Calendar>['disabled']\n  /** How many months are shown side by side. Falls back to one under `sm`. */\n  months?: number\n  format?: (date: Date) => string\n  /**\n   * Shortcuts shown beside the grid — Last 30 days and its neighbours. `true`\n   * for the built-in set, an array for your own.\n   *\n   * On by default here and off on the single picker, because \"last 30 days\" is\n   * most of what a range picker is ever asked for, while a single date is\n   * usually a specific one.\n   */\n  presets?: boolean | DatePreset<DateRange>[]\n  className?: string\n}\n\n/**\n * A span of dates — a stay, a reporting period, a filter.\n *\n * Two months side by side, because a range that crosses a month boundary is the\n * common case, and paging back and forth to see both ends is what makes a range\n * picker tiring. They stack under `sm`, where two would not fit — the calendar's\n * own `months` class already carries that, so there is nothing to override.\n *\n * The panel stays open until both ends are chosen: a range is not a value until\n * it has a second date, and closing on the first one would mean re-opening to\n * finish.\n *\n * @example\n * <DateRangePicker label=\"Reporting period\" />\n */\nexport function DateRangePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  label,\n  placeholder = 'Pick a range',\n  disabled = false,\n  disabledDates,\n  months = 2,\n  format = formatDate,\n  presets = true,\n  className,\n}: DateRangePickerProps) {\n  const rail = presets === true ? RANGE_PRESETS : presets || undefined\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<DateRange | undefined>(defaultValue)\n  const current = value ?? uncontrolled\n\n  /**\n   * How many days have been clicked since the panel opened.\n   *\n   * Counted, rather than inferred from the range being \"complete\", because the\n   * first click returns `{ from: day, to: day }` — a complete range by any\n   * reading of the value. Closing on that meant every attempt at a range\n   * produced a one-day one and shut the panel, which is the opposite of what a\n   * range picker is for.\n   */\n  const clicks = useRef(0)\n\n  const choose = (next: DateRange | undefined) => {\n    clicks.current += 1\n    if (value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n    if (clicks.current >= 2 && next?.from && next.to) setOpen(false)\n  }\n\n  const setPanel = (next: boolean) => {\n    if (next) clicks.current = 0\n    setOpen(next)\n  }\n\n  const complete = current?.from && current.to && current.from.getTime() !== current.to.getTime()\n  const printed = current?.from\n    ? complete\n      ? `${format(current.from)} – ${format(current.to!)}`\n      : `${format(current.from)} – …`\n    : placeholder\n\n  return (\n    <Popover open={open} onOpenChange={setPanel}>\n      <PopoverTrigger\n        aria-label={label}\n        disabled={disabled}\n        className={cn(TRIGGER, current?.from ? 'text-(--ink)' : 'text-(--ink-3-aa)', className)}\n      >\n        <span className=\"truncate\">{printed}</span>\n        <CalendarDays size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align=\"start\" className=\"w-auto overflow-hidden p-0\">\n        <div className=\"flex flex-col sm:flex-row\">\n          {rail && (\n            <PresetRail\n              presets={rail}\n              onPick={(next) => {\n                // A preset is a complete range in one gesture, so the panel\n                // closes — unlike a first click on the grid, which is half an\n                // answer.\n                if (value === undefined) setUncontrolled(next)\n                onValueChange?.(next)\n                setOpen(false)\n              }}\n              label={`${label} shortcuts`}\n            />\n          )}\n          <Calendar\n            mode=\"range\"\n            selected={current}\n            onSelect={choose}\n            disabled={disabledDates}\n            numberOfMonths={months}\n            autoFocus\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default DatePicker\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["'use client'\n\nimport { CalendarDays } from 'lucide-react'\nimport { useId, useRef, useState, type ComponentProps } from 'react'\nimport { dateMatchModifiers, type DateRange } from 'react-day-picker'\nimport { cn } from '../../lib/cn'\nimport { Calendar } from '../Calendar/Calendar'\nimport { useFieldControl } from '../Field/field-control'\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover'\n\nexport type { DateRange }\n\n/** A named shortcut in the rail beside the calendar. */\nexport interface DatePreset<T> {\n  label: string\n  /** Computed when clicked, not when rendered — \"today\" must mean today. */\n  value: () => T\n}\n\n/** `n` days back from today, inclusive of today. */\nconst daysAgo = (n: number): DateRange => {\n  const to = new Date()\n  const from = new Date()\n  from.setDate(from.getDate() - (n - 1))\n  return { from, to }\n}\n\n/**\n * The shortcuts a range picker is asked for on nearly every screen it appears\n * on, so they ship rather than being rebuilt per dashboard.\n *\n * Computed on click: a preset list built at render time freezes \"today\" at\n * whenever the page loaded, which is wrong for anything left open overnight.\n */\nexport const RANGE_PRESETS: DatePreset<DateRange>[] = [\n  { label: 'Last 7 days', value: () => daysAgo(7) },\n  { label: 'Last 30 days', value: () => daysAgo(30) },\n  { label: 'Last 90 days', value: () => daysAgo(90) },\n  { label: 'Last 12 months', value: () => daysAgo(365) },\n  {\n    label: 'Month to date',\n    value: () => {\n      const to = new Date()\n      return { from: new Date(to.getFullYear(), to.getMonth(), 1), to }\n    },\n  },\n  {\n    label: 'Year to date',\n    value: () => {\n      const to = new Date()\n      return { from: new Date(to.getFullYear(), 0, 1), to }\n    },\n  },\n]\n\n/** The single-date equivalent. */\nexport const DATE_PRESETS: DatePreset<Date>[] = [\n  { label: 'Today', value: () => new Date() },\n  {\n    label: 'Tomorrow',\n    value: () => {\n      const date = new Date()\n      date.setDate(date.getDate() + 1)\n      return date\n    },\n  },\n  {\n    label: 'In a week',\n    value: () => {\n      const date = new Date()\n      date.setDate(date.getDate() + 7)\n      return date\n    },\n  },\n  {\n    label: 'In a month',\n    value: () => {\n      const date = new Date()\n      date.setMonth(date.getMonth() + 1)\n      return date\n    },\n  },\n]\n\n/**\n * The rail of shortcuts.\n *\n * A `<nav>`-less list of plain buttons rather than a menu: they set the same\n * value the grid beside them sets, so they are part of one control and should\n * Tab in the same pass rather than opening something.\n *\n * Setting the same value means being refused for the same reasons: a shortcut\n * that commits a date the grid beside it will not accept hands the caller back\n * a value the control itself calls invalid. `blocked` is asked at render, so the\n * button is visibly unavailable rather than silently inert, and again on click,\n * because the value is computed then — \"today\" has to mean today.\n */\nfunction PresetRail<T>({\n  presets,\n  onPick,\n  label,\n  blocked,\n}: {\n  presets: DatePreset<T>[]\n  onPick: (value: T) => void\n  label: string\n  blocked?: (value: T) => boolean\n}) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className=\"flex shrink-0 flex-col gap-0.5 border-b border-(--rule) p-2 sm:border-b-0 sm:border-e max-sm:flex-row max-sm:flex-wrap\"\n    >\n      {presets.map((preset) => (\n        <button\n          key={preset.label}\n          type=\"button\"\n          disabled={blocked?.(preset.value()) ?? false}\n          onClick={() => {\n            const next = preset.value()\n            if (blocked?.(next)) return\n            onPick(next)\n          }}\n          className=\"rounded-(--radius-sm) px-2.5 py-1.5 text-start text-[13px] text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none\"\n        >\n          {preset.label}\n        </button>\n      ))}\n    </div>\n  )\n}\n\nconst TRIGGER =\n  'flex w-full items-center justify-between gap-2 rounded-(--radius) border border-(--rule-2) bg-(--paper) px-(--field-px) py-(--field-py) text-start text-sm transition-colors duration-(--duration-fast) hover:border-(--rule-hard) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * The visitor's own locale, not a fixed `dd/mm/yyyy`.\n *\n * `03/04` is March the fourth in one country and the third of April in the\n * next, and there is no format that is unambiguous to everyone. `Intl` already\n * knows which one this reader expects.\n */\nconst formatDate = (date: Date) =>\n  new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)\n\nexport interface DatePickerProps {\n  value?: Date\n  defaultValue?: Date\n  onValueChange?: (value: Date | undefined) => void\n  /**\n   * Names the control. Required — the trigger's text is a value, not a label.\n   *\n   * Announced together with the printed date rather than instead of it, so\n   * `format` reaches a screen reader as well as the screen. Inside a `Field`\n   * with a label, that label names the trigger and this one is not repeated.\n   */\n  label: string\n  placeholder?: string\n  disabled?: boolean\n  /**\n   * Days the reader may not choose.\n   *\n   * Reaches the calendar AND the shortcut rail: a preset landing on a blocked\n   * day is drawn unavailable and refuses the click, rather than committing a\n   * value the grid beside it would not accept.\n   */\n  disabledDates?: ComponentProps<typeof Calendar>['disabled']\n  /** How the chosen date is printed on the trigger. */\n  format?: (date: Date) => string\n  /**\n   * Shortcuts shown beside the grid. Pass `true` for the built-in set, an array\n   * for your own, or leave it off for none.\n   */\n  presets?: boolean | DatePreset<Date>[]\n  className?: string\n  /** The TRIGGER's id — the element a label points at. A `Field` sets it. */\n  id?: string\n  /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */\n  'aria-describedby'?: string\n  /** Announced on the trigger. A `Field` sets it from `error`. */\n  'aria-invalid'?: boolean | 'true' | 'false'\n}\n\n/**\n * A date, chosen from a calendar.\n *\n * A trigger and a `Calendar` in a `Popover` — not a new component so much as\n * the composition people otherwise assemble slightly differently on every\n * screen.\n *\n * It is deliberately NOT a text input with a calendar attached. A typed date\n * needs parsing, and parsing needs a format, and a format is a locale argument\n * nobody wins. When typing genuinely matters — a birth date, a long way back —\n * the calendar's month and year are dropdowns, which is the same journey\n * without the ambiguity.\n *\n * @example\n * <Field label=\"Publish on\"><DatePicker label=\"Publish on\" /></Field>\n */\nexport function DatePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  label,\n  placeholder = 'Pick a date',\n  disabled = false,\n  disabledDates,\n  format = formatDate,\n  presets,\n  className,\n  id,\n  'aria-describedby': describedBy,\n  'aria-invalid': ariaInvalid,\n}: DatePickerProps) {\n  const rail = presets === true ? DATE_PRESETS : presets || undefined\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<Date | undefined>(defaultValue)\n  const current = value ?? uncontrolled\n\n  const field = useFieldControl()\n  const generated = useId()\n  const triggerId = id ?? generated\n  const valueId = `${triggerId}-value`\n  const nameId = field?.labelId ?? `${triggerId}-name`\n\n  const choose = (next: Date | undefined) => {\n    if (value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n    if (next) setOpen(false)\n  }\n\n  const refuses = (date: Date) =>\n    disabledDates !== undefined && dateMatchModifiers(date, disabledDates)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        id={triggerId}\n        // The label and the printed date, in that order. `aria-label` outranked\n        // the trigger's own text, so `format` reached the screen and nothing\n        // else — the chosen date was invisible to a screen reader.\n        aria-labelledby={`${nameId} ${valueId}`}\n        aria-describedby={describedBy}\n        aria-invalid={ariaInvalid || undefined}\n        disabled={disabled}\n        className={cn(TRIGGER, current ? 'text-(--ink)' : 'text-(--ink-3-aa)', className)}\n      >\n        {field?.labelId == null && (\n          <span id={nameId} className=\"sr-only\">\n            {label}\n          </span>\n        )}\n        <span id={valueId} className=\"truncate\">\n          {current ? format(current) : placeholder}\n        </span>\n        <CalendarDays size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align=\"start\" className=\"w-auto overflow-hidden p-0\">\n        <div className=\"flex flex-col sm:flex-row\">\n          {rail && (\n            <PresetRail\n              presets={rail}\n              onPick={choose}\n              label={`${label} shortcuts`}\n              blocked={refuses}\n            />\n          )}\n          <Calendar\n            mode=\"single\"\n            selected={current}\n            onSelect={choose}\n            disabled={disabledDates}\n            autoFocus\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport interface DateRangePickerProps {\n  value?: DateRange\n  defaultValue?: DateRange\n  onValueChange?: (value: DateRange | undefined) => void\n  /** Names the control. Announced together with the printed range, not instead of it. */\n  label: string\n  placeholder?: string\n  disabled?: boolean\n  /**\n   * Days the reader may not choose.\n   *\n   * Reaches the shortcut rail as well as the grid, at the ENDS of each preset\n   * range — a shortcut whose interior straddles a blocked day is still offered,\n   * the way the grid still lets a reader drag a range across one.\n   */\n  disabledDates?: ComponentProps<typeof Calendar>['disabled']\n  /** How many months are shown side by side. Falls back to one under `sm`. */\n  months?: number\n  format?: (date: Date) => string\n  /**\n   * Shortcuts shown beside the grid — Last 30 days and its neighbours. `true`\n   * for the built-in set, an array for your own.\n   *\n   * On by default here and off on the single picker, because \"last 30 days\" is\n   * most of what a range picker is ever asked for, while a single date is\n   * usually a specific one.\n   */\n  presets?: boolean | DatePreset<DateRange>[]\n  className?: string\n  /** The TRIGGER's id — the element a label points at. A `Field` sets it. */\n  id?: string\n  /** Ids of the copy describing the control. A `Field` sets it from hint, error and description. */\n  'aria-describedby'?: string\n  /** Announced on the trigger. A `Field` sets it from `error`. */\n  'aria-invalid'?: boolean | 'true' | 'false'\n}\n\n/**\n * A span of dates — a stay, a reporting period, a filter.\n *\n * Two months side by side, because a range that crosses a month boundary is the\n * common case, and paging back and forth to see both ends is what makes a range\n * picker tiring. They stack under `sm`, where two would not fit — the calendar's\n * own `months` class already carries that, so there is nothing to override.\n *\n * The panel stays open until both ends are chosen: a range is not a value until\n * it has a second date, and closing on the first one would mean re-opening to\n * finish.\n *\n * @example\n * <DateRangePicker label=\"Reporting period\" />\n */\nexport function DateRangePicker({\n  value,\n  defaultValue,\n  onValueChange,\n  label,\n  placeholder = 'Pick a range',\n  disabled = false,\n  disabledDates,\n  months = 2,\n  format = formatDate,\n  presets = true,\n  className,\n  id,\n  'aria-describedby': describedBy,\n  'aria-invalid': ariaInvalid,\n}: DateRangePickerProps) {\n  const rail = presets === true ? RANGE_PRESETS : presets || undefined\n  const [open, setOpen] = useState(false)\n  const [uncontrolled, setUncontrolled] = useState<DateRange | undefined>(defaultValue)\n  const current = value ?? uncontrolled\n\n  const field = useFieldControl()\n  const generated = useId()\n  const triggerId = id ?? generated\n  const valueId = `${triggerId}-value`\n  const nameId = field?.labelId ?? `${triggerId}-name`\n\n  const refuses = (range: DateRange) =>\n    disabledDates !== undefined &&\n    [range.from, range.to].some((date) => date != null && dateMatchModifiers(date, disabledDates))\n\n  /**\n   * How many days have been clicked since the panel opened.\n   *\n   * Counted, rather than inferred from the range being \"complete\", because the\n   * first click returns `{ from: day, to: day }` — a complete range by any\n   * reading of the value. Closing on that meant every attempt at a range\n   * produced a one-day one and shut the panel, which is the opposite of what a\n   * range picker is for.\n   */\n  const clicks = useRef(0)\n\n  const choose = (next: DateRange | undefined) => {\n    clicks.current += 1\n    if (value === undefined) setUncontrolled(next)\n    onValueChange?.(next)\n    if (clicks.current >= 2 && next?.from && next.to) setOpen(false)\n  }\n\n  const setPanel = (next: boolean) => {\n    if (next) clicks.current = 0\n    setOpen(next)\n  }\n\n  const complete = current?.from && current.to && current.from.getTime() !== current.to.getTime()\n  const printed = current?.from\n    ? complete\n      ? `${format(current.from)} – ${format(current.to!)}`\n      : `${format(current.from)} – …`\n    : placeholder\n\n  return (\n    <Popover open={open} onOpenChange={setPanel}>\n      <PopoverTrigger\n        id={triggerId}\n        // The label and the printed range together — see DatePicker above.\n        aria-labelledby={`${nameId} ${valueId}`}\n        aria-describedby={describedBy}\n        aria-invalid={ariaInvalid || undefined}\n        disabled={disabled}\n        className={cn(TRIGGER, current?.from ? 'text-(--ink)' : 'text-(--ink-3-aa)', className)}\n      >\n        {field?.labelId == null && (\n          <span id={nameId} className=\"sr-only\">\n            {label}\n          </span>\n        )}\n        <span id={valueId} className=\"truncate\">\n          {printed}\n        </span>\n        <CalendarDays size={14} strokeWidth={1.5} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      </PopoverTrigger>\n      <PopoverContent label={label} align=\"start\" className=\"w-auto overflow-hidden p-0\">\n        <div className=\"flex flex-col sm:flex-row\">\n          {rail && (\n            <PresetRail\n              presets={rail}\n              onPick={(next) => {\n                // A preset is a complete range in one gesture, so the panel\n                // closes — unlike a first click on the grid, which is half an\n                // answer.\n                if (value === undefined) setUncontrolled(next)\n                onValueChange?.(next)\n                setOpen(false)\n              }}\n              label={`${label} shortcuts`}\n              blocked={refuses}\n            />\n          )}\n          <Calendar\n            mode=\"range\"\n            selected={current}\n            onSelect={choose}\n            disabled={disabledDates}\n            numberOfMonths={months}\n            autoFocus\n          />\n        </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nexport default DatePicker\n"],"mappings":"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","names":[]}

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -0,0 +1,73 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface DescriptionListItem {
+    /**
+     * A stable key. Optional: the index is used when it is absent, which is
+     * correct for the fixed field list a record page renders and wrong for a list
+     * whose rows are added, removed or reordered — pass it there.
+     */
+    id?: string;
+    /** The label. Rendered as a `<dt>`. */
+    term: ReactNode;
+    /** The value. Rendered as a `<dd>`, so it can be a `Badge` or a link. */
+    description: ReactNode;
+}
+/**
+ * Where the value sits relative to its label.
+ *
+ * `row` is the record-page shape: label in a fixed column at the inline start,
+ * value beside it, so a reader scans the labels down one edge. It collapses to
+ * one column under the `sm` breakpoint, because a 12rem label column on a phone
+ * leaves the value about eight characters wide.
+ *
+ * `stacked` puts the value under its label at every width — the right answer
+ * inside a card or a sidebar that is narrow by design rather than by viewport.
+ */
+type DescriptionListLayout = 'row' | 'stacked';
+interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /** The pairs, in the order they should read. An empty array renders nothing. */
+    items: DescriptionListItem[];
+    /** How the value sits relative to its label. See {@link DescriptionListLayout}. */
+    layout?: DescriptionListLayout;
+    /**
+     * Draws a hairline under every pair but the last. Off for a list inside a
+     * card that already has an edge, on for a list that is the page's structure.
+     */
+    divided?: boolean;
+}
+/**
+ * A record's fields: label, value, label, value.
+ *
+ * The single most repeated shape in any detail page, and the one most often
+ * hand-built out of a `<div>` grid — which loses the only thing the markup was
+ * carrying. A `<dl>` tells a screen reader that "Owner" names the thing beside
+ * it; a grid of divs tells it there are two columns of unrelated text, and the
+ * reader has to infer the pairing from reading order alone.
+ *
+ * Reach for `Table` instead when there are several records. This is one record
+ * seen from the front; a table is many records seen from above.
+ *
+ * Each pair is wrapped in a `<div>` — which the HTML specification allows
+ * inside a `<dl>` precisely so a pair can be laid out as a unit — so the
+ * hairline runs the full width of the row rather than stopping in the column
+ * gap.
+ *
+ * An empty `items` renders `null` rather than an empty bordered box. A record
+ * with no fields is a state the page above should be handling with an
+ * `EmptyState`, and a hairline around nothing looks like a component that
+ * failed to load.
+ *
+ * @example
+ * <DescriptionList
+ *   items={[
+ *     { term: 'Owner', description: 'Henry Chen' },
+ *     { term: 'Status', description: <Badge tone="success">Deployed</Badge> },
+ *   ]}
+ * />
+ * @example
+ * <DescriptionList layout="stacked" divided={false} items={fields} />
+ */
+declare function DescriptionList({ items, layout, divided, className, ...rest }: DescriptionListProps): react.JSX.Element | null;
+
+export { DescriptionList, type DescriptionListItem, type DescriptionListLayout, type DescriptionListProps, DescriptionList as default };

package/dist/components/DescriptionList/DescriptionList.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const LAYOUT = {
+  row: "grid gap-x-6 gap-y-1 sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]",
+  stacked: "grid gap-y-1"
+};
+function DescriptionList({
+  items,
+  layout = "row",
+  divided = true,
+  className,
+  ...rest
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("dl", { className: cn("m-0", !divided && "flex flex-col gap-3", className), ...rest, children: items.map((item, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        LAYOUT[layout],
+        divided && "border-b border-(--rule) py-3 first:pt-0 last:border-b-0 last:pb-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("dt", { className: "text-sm text-(--ink-3-aa)", children: item.term }),
+        /* @__PURE__ */ jsx("dd", { className: "m-0 text-sm text-(--ink-2)", children: item.description })
+      ]
+    },
+    item.id ?? index
+  )) });
+}
+var DescriptionList_default = DescriptionList;
+export {
+  DescriptionList,
+  DescriptionList_default as default
+};
+//# sourceMappingURL=DescriptionList.js.map

package/dist/components/DescriptionList/DescriptionList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DescriptionList/DescriptionList.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface DescriptionListItem {\n  /**\n   * A stable key. Optional: the index is used when it is absent, which is\n   * correct for the fixed field list a record page renders and wrong for a list\n   * whose rows are added, removed or reordered — pass it there.\n   */\n  id?: string\n  /** The label. Rendered as a `<dt>`. */\n  term: ReactNode\n  /** The value. Rendered as a `<dd>`, so it can be a `Badge` or a link. */\n  description: ReactNode\n}\n\n/**\n * Where the value sits relative to its label.\n *\n * `row` is the record-page shape: label in a fixed column at the inline start,\n * value beside it, so a reader scans the labels down one edge. It collapses to\n * one column under the `sm` breakpoint, because a 12rem label column on a phone\n * leaves the value about eight characters wide.\n *\n * `stacked` puts the value under its label at every width — the right answer\n * inside a card or a sidebar that is narrow by design rather than by viewport.\n */\nexport type DescriptionListLayout = 'row' | 'stacked'\n\nexport interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {\n  /** The pairs, in the order they should read. An empty array renders nothing. */\n  items: DescriptionListItem[]\n  /** How the value sits relative to its label. See {@link DescriptionListLayout}. */\n  layout?: DescriptionListLayout\n  /**\n   * Draws a hairline under every pair but the last. Off for a list inside a\n   * card that already has an edge, on for a list that is the page's structure.\n   */\n  divided?: boolean\n}\n\nconst LAYOUT: Record<DescriptionListLayout, string> = {\n  row: 'grid gap-x-6 gap-y-1 sm:grid-cols-[minmax(0,12rem)_minmax(0,1fr)]',\n  stacked: 'grid gap-y-1',\n}\n\n/**\n * A record's fields: label, value, label, value.\n *\n * The single most repeated shape in any detail page, and the one most often\n * hand-built out of a `<div>` grid — which loses the only thing the markup was\n * carrying. A `<dl>` tells a screen reader that \"Owner\" names the thing beside\n * it; a grid of divs tells it there are two columns of unrelated text, and the\n * reader has to infer the pairing from reading order alone.\n *\n * Reach for `Table` instead when there are several records. This is one record\n * seen from the front; a table is many records seen from above.\n *\n * Each pair is wrapped in a `<div>` — which the HTML specification allows\n * inside a `<dl>` precisely so a pair can be laid out as a unit — so the\n * hairline runs the full width of the row rather than stopping in the column\n * gap.\n *\n * An empty `items` renders `null` rather than an empty bordered box. A record\n * with no fields is a state the page above should be handling with an\n * `EmptyState`, and a hairline around nothing looks like a component that\n * failed to load.\n *\n * @example\n * <DescriptionList\n *   items={[\n *     { term: 'Owner', description: 'Henry Chen' },\n *     { term: 'Status', description: <Badge tone=\"success\">Deployed</Badge> },\n *   ]}\n * />\n * @example\n * <DescriptionList layout=\"stacked\" divided={false} items={fields} />\n */\nexport function DescriptionList({\n  items,\n  layout = 'row',\n  divided = true,\n  className,\n  ...rest\n}: DescriptionListProps) {\n  if (items.length === 0) return null\n\n  return (\n    <dl className={cn('m-0', !divided && 'flex flex-col gap-3', className)} {...rest}>\n      {items.map((item, index) => (\n        <div\n          key={item.id ?? index}\n          className={cn(\n            LAYOUT[layout],\n            divided && 'border-b border-(--rule) py-3 first:pt-0 last:border-b-0 last:pb-0',\n          )}\n        >\n          <dt className=\"text-sm text-(--ink-3-aa)\">{item.term}</dt>\n          <dd className=\"m-0 text-sm text-(--ink-2)\">{item.description}</dd>\n        </div>\n      ))}\n    </dl>\n  )\n}\n\nexport default DescriptionList\n"],"mappings":"AA0FQ,SAOE,KAPF;AAzFR,SAAS,UAAU;AAwCnB,MAAM,SAAgD;AAAA,EACpD,KAAK;AAAA,EACL,SAAS;AACX;AAkCO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,SAAS;AAAA,EACT,UAAU;AAAA,EACV;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,MAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,SACE,oBAAC,QAAG,WAAW,GAAG,OAAO,CAAC,WAAW,uBAAuB,SAAS,GAAI,GAAG,MACzE,gBAAM,IAAI,CAAC,MAAM,UAChB;AAAA,IAAC;AAAA;AAAA,MAEC,WAAW;AAAA,QACT,OAAO,MAAM;AAAA,QACb,WAAW;AAAA,MACb;AAAA,MAEA;AAAA,4BAAC,QAAG,WAAU,6BAA6B,eAAK,MAAK;AAAA,QACrD,oBAAC,QAAG,WAAU,8BAA8B,eAAK,aAAY;AAAA;AAAA;AAAA,IAPxD,KAAK,MAAM;AAAA,EAQlB,CACD,GACH;AAEJ;AAEA,IAAO,0BAAQ;","names":[]}

package/dist/components/Diagram/Diagram.d.ts

@@ -24,7 +24,12 @@ interface DiagramSpec {
     /** How the top-level nodes are laid out. Defaults to a row. */
     direction?: 'row' | 'column';
     nodes: DiagramNode[];
-    /** Arrows between adjacent top-level nodes, by id. */
+    /**
+     * Arrows between adjacent siblings, by id and in the order the rank runs.
+     * Each edge is spent the first time a pair matches it, at whatever depth
+     * that pair sits — and an edge that matches nothing says so in development
+     * rather than drawing nothing and reporting nothing.
+     */
     edges?: DiagramEdge[];
     /** The figure's caption. */
     caption?: string;
@@ -68,8 +73,8 @@ interface DiagramProps {
  *     edges: [{ from: 'edge', to: 'app', label: 'HTTPS' }],
  *     nodes: [
  *       { id: 'edge', label: 'Edge', note: 'CDN' },
- *       { id: 'app', label: 'Application', accent: true, children: [
- *         { label: 'Router' },
+ *       { id: 'app', label: 'Application', children: [
+ *         { label: 'Router', accent: true },
  *         { label: 'Handlers' },
  *       ] },
  *     ],

package/dist/components/Diagram/Diagram.js

@@ -1,9 +1,12 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../lib/cn.js";
+import { DEV, warn } from "../../lib/warn.js";
 function Diagram({ spec, className }) {
   const { nodes, edges = [], direction = "row", caption, label } = spec;
+  const { leads, drawn } = resolveLeads(nodes, edges);
+  if (DEV) warnSpec(nodes, edges, drawn);
   return /* @__PURE__ */ jsxs("figure", { className: cn("m-0", className), role: "group", "aria-label": label ?? caption ?? void 0, children: [
-    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--paper-2) p-[clamp(1.125rem,calc(2.5*var(--fluid)),1.875rem)] scroll-slim", children: /* @__PURE__ */ jsx(NodeList, { nodes, edges, direction, depth: 0 }) }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--paper-2) p-[clamp(1.125rem,calc(2.5*var(--fluid)),1.875rem)] scroll-slim", children: /* @__PURE__ */ jsx(NodeList, { nodes, leads, direction, depth: 0 }) }),
     caption && // A <div>, not a <figcaption>. A long-form stylesheet dropped around
     // this will style `figcaption` and `p` unlayered, and an unlayered rule
     // beats a utility whatever the specificity — inside an article a real
@@ -13,9 +16,30 @@ function Diagram({ spec, className }) {
     /* @__PURE__ */ jsx("div", { className: "mt-3 mono-meta leading-[1.6] text-(--ink-3-aa)", children: caption })
   ] });
 }
+function resolveLeads(nodes, edges) {
+  const leads = /* @__PURE__ */ new Map();
+  const drawn = /* @__PURE__ */ new Set();
+  const ranks = [nodes];
+  while (ranks.length > 0) {
+    const rank = ranks.shift();
+    for (let index = 1; index < rank.length; index += 1) {
+      const from = rank[index - 1];
+      const to = rank[index];
+      if (!from.id || !to.id) continue;
+      const edge = edges.find(
+        (candidate) => !drawn.has(candidate) && candidate.from === from.id && candidate.to === to.id
+      );
+      if (!edge) continue;
+      drawn.add(edge);
+      leads.set(to, edge);
+    }
+    for (const node of rank) if (node.children?.length) ranks.push(node.children);
+  }
+  return { leads, drawn };
+}
 function NodeList({
   nodes,
-  edges,
+  leads,
   direction,
   depth
 }) {
@@ -24,21 +48,17 @@ function NodeList({
     NodeFrame,
     {
       node,
-      edges,
+      leads,
       depth,
-      lead: index > 0 ? findEdge(edges, nodes[index - 1], node) : void 0,
+      lead: leads.get(node),
       row
     },
     node.id ?? `${node.label}-${index}`
   )) });
 }
-function findEdge(edges, from, to) {
-  if (!from.id || !to.id) return void 0;
-  return edges.find((edge) => edge.from === from.id && edge.to === to.id);
-}
 function NodeFrame({
   node,
-  edges,
+  leads,
   depth,
   lead,
   row
@@ -64,7 +84,7 @@ function NodeFrame({
               NodeList,
               {
                 nodes: children,
-                edges,
+                leads,
                 direction: node.direction ?? "row",
                 depth: depth + 1
               }
@@ -131,6 +151,58 @@ function EdgeMark({ label, row }) {
     }
   );
 }
+function warnSpec(nodes, edges, drawn) {
+  const ids = /* @__PURE__ */ new Set();
+  warnNodes(nodes, ids);
+  for (const edge of edges) {
+    if (drawn.has(edge)) continue;
+    const pair = `${edge.from} \u2192 ${edge.to}`;
+    const unknown = !ids.has(edge.from) || !ids.has(edge.to);
+    warn({
+      code: unknown ? "DIAGRAM_EDGE_UNKNOWN_NODE" : "DIAGRAM_EDGE_NOT_ADJACENT",
+      problem: unknown ? `The edge ${pair} names an id no node in this spec carries, so no arrow is drawn and nothing else changes.` : `The edge ${pair} names two nodes that are never consecutive siblings, so no arrow is drawn anywhere.`,
+      field: `spec.edges: ${pair}`,
+      fix: unknown ? "Give the node the id the edge names, or correct the edge to an id the spec already has." : "Write the edge from a node to the node immediately after it in the same rank, in that order. Nesting is containment here; an edge is a step between siblings.",
+      component: "Diagram"
+    });
+  }
+}
+function warnNodes(nodes, ids) {
+  for (const node of nodes) {
+    if (node.id) {
+      if (ids.has(node.id)) {
+        warn({
+          code: "DIAGRAM_DUPLICATE_ID",
+          problem: `Two nodes carry the id "${node.id}", so an edge naming it lands on whichever comes first and silently means the other.`,
+          field: `spec.nodes: id "${node.id}"`,
+          fix: "Make every id unique across the whole spec, or drop it from the node no edge names.",
+          component: "Diagram"
+        });
+      }
+      ids.add(node.id);
+    }
+    const isGroup = (node.children?.length ?? 0) > 0;
+    if (isGroup && node.accent) {
+      warn({
+        code: "DIAGRAM_ACCENT_ON_CONTAINER",
+        problem: `"${node.label}" has children, so it is drawn as a band \u2014 and a band has no fill for accent to take. It type-checks and paints nothing.`,
+        field: `spec.nodes: accent on "${node.label}"`,
+        fix: "Move accent to the leaf the diagram is actually about, or drop the children so this node becomes that leaf.",
+        component: "Diagram"
+      });
+    }
+    if (!isGroup && node.direction) {
+      warn({
+        code: "DIAGRAM_DIRECTION_ON_LEAF",
+        problem: `"${node.label}" has no children, so there is nothing here to lay out \u2014 direction is read only from a node that has some.`,
+        field: `spec.nodes: direction on "${node.label}"`,
+        fix: "Set direction on the parent whose axis you meant, or on spec.direction for the top rank.",
+        component: "Diagram"
+      });
+    }
+    if (node.children) warnNodes(node.children, ids);
+  }
+}
 var Diagram_default = Diagram;
 export {
   Diagram,

package/dist/components/Diagram/Diagram.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Diagram/Diagram.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface DiagramNode {\n  /** Only needed when an edge names this node. */\n  id?: string\n  /** The node's name, set in the interface face. */\n  label: string\n  /** What it is — one short line, a step back. */\n  note?: string\n  /** The one node the diagram is about. At most one or two per diagram. */\n  accent?: boolean\n  /** How this node's children are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  children?: DiagramNode[]\n  /** A line printed under the frame, outside it — what the box means. */\n  footnote?: string\n}\n\nexport interface DiagramEdge {\n  from: string\n  to: string\n  label?: string\n}\n\nexport interface DiagramSpec {\n  /** How the top-level nodes are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  nodes: DiagramNode[]\n  /** Arrows between adjacent top-level nodes, by id. */\n  edges?: DiagramEdge[]\n  /** The figure's caption. */\n  caption?: string\n  /** Names the figure for assistive tech when the caption does not. */\n  label?: string\n}\n\nexport interface DiagramProps {\n  spec: DiagramSpec\n  className?: string\n}\n\n/**\n * A flow or architecture diagram, drawn out of the system's own parts.\n *\n * The alternative it replaces is a fenced block of box-drawing characters —\n * `┌──────┬──────┐` — which is a picture rendered in a font chosen for code. It\n * inherits the code block's frame and scrollbar, so a diagram reads as terminal\n * output; it cannot wrap, so on a phone it either overflows or is scaled to\n * nothing; the box edges are text, so a screen reader reads the rules out loud;\n * and none of it responds to the theme.\n *\n * The other alternative is a diagramming library, which is several hundred\n * kilobytes of layout engine, renders after hydration, and draws in its own\n * palette. This is neither: hairline frames on the radius scale, mono labels,\n * the muted step for anything supporting — so a diagram belongs to the page it\n * sits on. It server-renders, because it is markup.\n *\n * NESTING IS CONTAINMENT, which is what most architecture diagrams actually\n * describe: this is inside that, and these two sit beside each other. Edges are\n * for the sequence between siblings, not for arbitrary wiring — a diagram that\n * needs arbitrary wiring is a diagram that wants a drawing, and this will not\n * pretend otherwise.\n *\n * It takes a spec rather than markup, so a fenced ```diagram block in an\n * article and a hand-written figure on a page are one renderer and one look —\n * and a wrong diagram is corrected by editing data.\n *\n * @example\n * <Diagram\n *   spec={{\n *     caption: 'One request, end to end.',\n *     edges: [{ from: 'edge', to: 'app', label: 'HTTPS' }],\n *     nodes: [\n *       { id: 'edge', label: 'Edge', note: 'CDN' },\n *       { id: 'app', label: 'Application', accent: true, children: [\n *         { label: 'Router' },\n *         { label: 'Handlers' },\n *       ] },\n *     ],\n *   }}\n * />\n */\nexport function Diagram({ spec, className }: DiagramProps) {\n  const { nodes, edges = [], direction = 'row', caption, label } = spec\n\n  return (\n    <figure className={cn('m-0', className)} role=\"group\" aria-label={label ?? caption ?? undefined}>\n      <div className=\"overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--paper-2) p-[clamp(1.125rem,calc(2.5*var(--fluid)),1.875rem)] scroll-slim\">\n        <NodeList nodes={nodes} edges={edges} direction={direction} depth={0} />\n      </div>\n      {caption && (\n        // A <div>, not a <figcaption>. A long-form stylesheet dropped around\n        // this will style `figcaption` and `p` unlayered, and an unlayered rule\n        // beats a utility whatever the specificity — inside an article a real\n        // figcaption came out uppercased and every label in the diagram\n        // inherited a paragraph margin. Nothing here uses a tag prose reaches\n        // for.\n        <div className=\"mt-3 mono-meta leading-[1.6] text-(--ink-3-aa)\">{caption}</div>\n      )}\n    </figure>\n  )\n}\n\n/** One rank of the diagram: the nodes, and any arrows between them. */\nfunction NodeList({\n  nodes,\n  edges,\n  direction,\n  depth,\n}: {\n  nodes: DiagramNode[]\n  edges: DiagramEdge[]\n  direction: 'row' | 'column'\n  depth: number\n}) {\n  const row = direction === 'row'\n\n  return (\n    <div className={cn('flex min-w-0 gap-3', row ? 'flex-col sm:flex-row' : 'flex-col')}>\n      {nodes.map((node, index) => (\n        <NodeFrame\n          key={node.id ?? `${node.label}-${index}`}\n          node={node}\n          edges={edges}\n          depth={depth}\n          lead={index > 0 ? findEdge(edges, nodes[index - 1]!, node) : undefined}\n          row={row}\n        />\n      ))}\n    </div>\n  )\n}\n\n/** The arrow that sits between two adjacent nodes, when an edge names them. */\nfunction findEdge(edges: DiagramEdge[], from: DiagramNode, to: DiagramNode): DiagramEdge | undefined {\n  if (!from.id || !to.id) return undefined\n  return edges.find((edge) => edge.from === from.id && edge.to === to.id)\n}\n\n/**\n * A node is one of two things, and they are drawn differently on purpose.\n *\n * A LEAF is a plate: a bordered card on paper, or ink-filled when it is what\n * the diagram is about. A CONTAINER is a band: a labelled hairline with its\n * children underneath, and NO frame of its own.\n *\n * That distinction is the whole design. Drawing a container as another box puts\n * three borders around anything two levels deep — the figure's frame, the\n * group's, and the plate's — and the result reads as packaging rather than as\n * structure. A rule with a name on it says \"these belong together\" using the\n * device every section head already uses, and leaves the borders to the things\n * that are actually objects.\n */\nfunction NodeFrame({\n  node,\n  edges,\n  depth,\n  lead,\n  row,\n}: {\n  node: DiagramNode\n  edges: DiagramEdge[]\n  depth: number\n  lead?: DiagramEdge\n  row: boolean\n}) {\n  const children = node.children ?? []\n  const isGroup = children.length > 0\n\n  return (\n    <>\n      {lead && <EdgeMark label={lead.label} row={row} />}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {isGroup ? (\n          <div\n            className={cn(\n              'min-w-0 flex-1 border-t pt-3',\n              depth === 0 ? 'border-(--ink)' : 'border-(--rule-2)',\n            )}\n          >\n            <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-0.5\">\n              <span className=\"font-sans text-[13.5px] leading-[1.35] text-(--ink)\">\n                {node.label}\n              </span>\n              {node.note && <span className=\"mono-meta text-(--ink-3-aa)\">{node.note}</span>}\n            </div>\n            <div className=\"mt-3\">\n              <NodeList\n                nodes={children}\n                edges={edges}\n                direction={node.direction ?? 'row'}\n                depth={depth + 1}\n              />\n            </div>\n          </div>\n        ) : (\n          <div\n            className={cn(\n              'flex min-w-0 flex-1 flex-col justify-center rounded-(--radius) px-3.5 py-3',\n              node.accent ? 'bg-(--accent)' : 'border border-(--rule-2) bg-(--paper)',\n            )}\n          >\n            {/* An identifier can be one long word — `TenantMainMiddleware` —\n                with no break opportunity, so it runs into the plate's edge\n                unless it is allowed to break inside itself. */}\n            <span\n              className={cn(\n                'block break-words font-sans text-[13.5px] leading-[1.35]',\n                node.accent ? 'text-(--accent-foreground)' : 'text-(--ink)',\n              )}\n            >\n              {node.label}\n            </span>\n            {node.note && (\n              <span\n                className={cn(\n                  'mt-1 block mono-meta',\n                  node.accent ? 'text-(--accent-foreground) opacity-70' : 'text-(--ink-3-aa)',\n                )}\n              >\n                {node.note}\n              </span>\n            )}\n          </div>\n        )}\n\n        {node.footnote && (\n          <span className=\"mt-2 block mono-meta text-(--ink-3-aa)\">{node.footnote}</span>\n        )}\n      </div>\n    </>\n  )\n}\n\n/**\n * The connector. An arrow and, when the edge is named, the name under it —\n * hidden from assistive tech, which reads the nodes in document order anyway\n * and has no use for a glyph pointing at the next one.\n */\nfunction EdgeMark({ label, row }: { label?: string; row: boolean }): ReactNode {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        'flex flex-none items-center justify-center gap-1.5 text-(--ink-3-aa)',\n        row ? 'sm:flex-col' : 'flex-col',\n      )}\n    >\n      {/* One glyph, turned. A row stacks into a column below `sm`, so the arrow\n          has to point the way the layout actually runs at that width. In RTL the\n          inline axis reverses, so the flat arrow is mirrored with it. */}\n      <span\n        className={cn(\n          'font-mono text-[13px] leading-none',\n          row ? 'rotate-90 sm:rotate-0 sm:rtl:-scale-x-100' : 'rotate-90',\n        )}\n      >\n        →\n      </span>\n      {label && <span className=\"mono-meta whitespace-nowrap\">{label}</span>}\n    </div>\n  )\n}\n\nexport default Diagram\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Diagram/Diagram.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { DEV, warn } from '../../lib/warn'\n\nexport interface DiagramNode {\n  /** Only needed when an edge names this node. */\n  id?: string\n  /** The node's name, set in the interface face. */\n  label: string\n  /** What it is — one short line, a step back. */\n  note?: string\n  /** The one node the diagram is about. At most one or two per diagram. */\n  accent?: boolean\n  /** How this node's children are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  children?: DiagramNode[]\n  /** A line printed under the frame, outside it — what the box means. */\n  footnote?: string\n}\n\nexport interface DiagramEdge {\n  from: string\n  to: string\n  label?: string\n}\n\nexport interface DiagramSpec {\n  /** How the top-level nodes are laid out. Defaults to a row. */\n  direction?: 'row' | 'column'\n  nodes: DiagramNode[]\n  /**\n   * Arrows between adjacent siblings, by id and in the order the rank runs.\n   * Each edge is spent the first time a pair matches it, at whatever depth\n   * that pair sits — and an edge that matches nothing says so in development\n   * rather than drawing nothing and reporting nothing.\n   */\n  edges?: DiagramEdge[]\n  /** The figure's caption. */\n  caption?: string\n  /** Names the figure for assistive tech when the caption does not. */\n  label?: string\n}\n\nexport interface DiagramProps {\n  spec: DiagramSpec\n  className?: string\n}\n\n/**\n * A flow or architecture diagram, drawn out of the system's own parts.\n *\n * The alternative it replaces is a fenced block of box-drawing characters —\n * `┌──────┬──────┐` — which is a picture rendered in a font chosen for code. It\n * inherits the code block's frame and scrollbar, so a diagram reads as terminal\n * output; it cannot wrap, so on a phone it either overflows or is scaled to\n * nothing; the box edges are text, so a screen reader reads the rules out loud;\n * and none of it responds to the theme.\n *\n * The other alternative is a diagramming library, which is several hundred\n * kilobytes of layout engine, renders after hydration, and draws in its own\n * palette. This is neither: hairline frames on the radius scale, mono labels,\n * the muted step for anything supporting — so a diagram belongs to the page it\n * sits on. It server-renders, because it is markup.\n *\n * NESTING IS CONTAINMENT, which is what most architecture diagrams actually\n * describe: this is inside that, and these two sit beside each other. Edges are\n * for the sequence between siblings, not for arbitrary wiring — a diagram that\n * needs arbitrary wiring is a diagram that wants a drawing, and this will not\n * pretend otherwise.\n *\n * It takes a spec rather than markup, so a fenced ```diagram block in an\n * article and a hand-written figure on a page are one renderer and one look —\n * and a wrong diagram is corrected by editing data.\n *\n * @example\n * <Diagram\n *   spec={{\n *     caption: 'One request, end to end.',\n *     edges: [{ from: 'edge', to: 'app', label: 'HTTPS' }],\n *     nodes: [\n *       { id: 'edge', label: 'Edge', note: 'CDN' },\n *       { id: 'app', label: 'Application', children: [\n *         { label: 'Router', accent: true },\n *         { label: 'Handlers' },\n *       ] },\n *     ],\n *   }}\n * />\n */\nexport function Diagram({ spec, className }: DiagramProps) {\n  const { nodes, edges = [], direction = 'row', caption, label } = spec\n  const { leads, drawn } = resolveLeads(nodes, edges)\n\n  if (DEV) warnSpec(nodes, edges, drawn)\n\n  return (\n    <figure className={cn('m-0', className)} role=\"group\" aria-label={label ?? caption ?? undefined}>\n      <div className=\"overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--paper-2) p-[clamp(1.125rem,calc(2.5*var(--fluid)),1.875rem)] scroll-slim\">\n        <NodeList nodes={nodes} leads={leads} direction={direction} depth={0} />\n      </div>\n      {caption && (\n        // A <div>, not a <figcaption>. A long-form stylesheet dropped around\n        // this will style `figcaption` and `p` unlayered, and an unlayered rule\n        // beats a utility whatever the specificity — inside an article a real\n        // figcaption came out uppercased and every label in the diagram\n        // inherited a paragraph margin. Nothing here uses a tag prose reaches\n        // for.\n        <div className=\"mt-3 mono-meta leading-[1.6] text-(--ink-3-aa)\">{caption}</div>\n      )}\n    </figure>\n  )\n}\n\n/** The arrow that leads INTO a node, for every node that earned one. */\ntype Leads = Map<DiagramNode, DiagramEdge>\n\n/**\n * Every arrow the spec earns, resolved once for the whole figure.\n *\n * Keyed by the node the arrow leads into, by OBJECT rather than by id: two\n * nodes sharing an id are a defect in the spec, not a licence to draw the same\n * arrow in two places. The same `edges` array used to be handed to every rank,\n * so a pair of ids reused two levels down drew the arrow again down there — an\n * arrow the author asked for once and the figure asserted twice.\n *\n * Ranks are walked breadth-first from the top and an edge is spent at the first\n * pair that matches it, which makes \"one edge, one arrow\" a property of the\n * renderer rather than a rule the author has to keep.\n */\nfunction resolveLeads(nodes: DiagramNode[], edges: DiagramEdge[]): { leads: Leads; drawn: Set<DiagramEdge> } {\n  const leads: Leads = new Map()\n  const drawn = new Set<DiagramEdge>()\n  const ranks: DiagramNode[][] = [nodes]\n\n  while (ranks.length > 0) {\n    const rank = ranks.shift()!\n    for (let index = 1; index < rank.length; index += 1) {\n      const from = rank[index - 1]!\n      const to = rank[index]!\n      if (!from.id || !to.id) continue\n      const edge = edges.find(\n        (candidate) =>\n          !drawn.has(candidate) && candidate.from === from.id && candidate.to === to.id,\n      )\n      if (!edge) continue\n      drawn.add(edge)\n      leads.set(to, edge)\n    }\n    for (const node of rank) if (node.children?.length) ranks.push(node.children)\n  }\n\n  return { leads, drawn }\n}\n\n/** One rank of the diagram: the nodes, and any arrows between them. */\nfunction NodeList({\n  nodes,\n  leads,\n  direction,\n  depth,\n}: {\n  nodes: DiagramNode[]\n  leads: Leads\n  direction: 'row' | 'column'\n  depth: number\n}) {\n  const row = direction === 'row'\n\n  return (\n    <div className={cn('flex min-w-0 gap-3', row ? 'flex-col sm:flex-row' : 'flex-col')}>\n      {nodes.map((node, index) => (\n        <NodeFrame\n          key={node.id ?? `${node.label}-${index}`}\n          node={node}\n          leads={leads}\n          depth={depth}\n          lead={leads.get(node)}\n          row={row}\n        />\n      ))}\n    </div>\n  )\n}\n\n/**\n * A node is one of two things, and they are drawn differently on purpose.\n *\n * A LEAF is a plate: a bordered card on paper, or ink-filled when it is what\n * the diagram is about. A CONTAINER is a band: a labelled hairline with its\n * children underneath, and NO frame of its own.\n *\n * That distinction is the whole design. Drawing a container as another box puts\n * three borders around anything two levels deep — the figure's frame, the\n * group's, and the plate's — and the result reads as packaging rather than as\n * structure. A rule with a name on it says \"these belong together\" using the\n * device every section head already uses, and leaves the borders to the things\n * that are actually objects.\n */\nfunction NodeFrame({\n  node,\n  leads,\n  depth,\n  lead,\n  row,\n}: {\n  node: DiagramNode\n  leads: Leads\n  depth: number\n  lead?: DiagramEdge\n  row: boolean\n}) {\n  const children = node.children ?? []\n  const isGroup = children.length > 0\n\n  return (\n    <>\n      {lead && <EdgeMark label={lead.label} row={row} />}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        {isGroup ? (\n          <div\n            className={cn(\n              'min-w-0 flex-1 border-t pt-3',\n              depth === 0 ? 'border-(--ink)' : 'border-(--rule-2)',\n            )}\n          >\n            <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-0.5\">\n              <span className=\"font-sans text-[13.5px] leading-[1.35] text-(--ink)\">\n                {node.label}\n              </span>\n              {node.note && <span className=\"mono-meta text-(--ink-3-aa)\">{node.note}</span>}\n            </div>\n            <div className=\"mt-3\">\n              <NodeList\n                nodes={children}\n                leads={leads}\n                direction={node.direction ?? 'row'}\n                depth={depth + 1}\n              />\n            </div>\n          </div>\n        ) : (\n          <div\n            className={cn(\n              'flex min-w-0 flex-1 flex-col justify-center rounded-(--radius) px-3.5 py-3',\n              node.accent ? 'bg-(--accent)' : 'border border-(--rule-2) bg-(--paper)',\n            )}\n          >\n            {/* An identifier can be one long word — `TenantMainMiddleware` —\n                with no break opportunity, so it runs into the plate's edge\n                unless it is allowed to break inside itself. */}\n            <span\n              className={cn(\n                'block break-words font-sans text-[13.5px] leading-[1.35]',\n                node.accent ? 'text-(--accent-foreground)' : 'text-(--ink)',\n              )}\n            >\n              {node.label}\n            </span>\n            {node.note && (\n              <span\n                className={cn(\n                  'mt-1 block mono-meta',\n                  node.accent ? 'text-(--accent-foreground) opacity-70' : 'text-(--ink-3-aa)',\n                )}\n              >\n                {node.note}\n              </span>\n            )}\n          </div>\n        )}\n\n        {node.footnote && (\n          <span className=\"mt-2 block mono-meta text-(--ink-3-aa)\">{node.footnote}</span>\n        )}\n      </div>\n    </>\n  )\n}\n\n/**\n * The connector. An arrow and, when the edge is named, the name under it —\n * hidden from assistive tech, which reads the nodes in document order anyway\n * and has no use for a glyph pointing at the next one.\n */\nfunction EdgeMark({ label, row }: { label?: string; row: boolean }): ReactNode {\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        'flex flex-none items-center justify-center gap-1.5 text-(--ink-3-aa)',\n        row ? 'sm:flex-col' : 'flex-col',\n      )}\n    >\n      {/* One glyph, turned. A row stacks into a column below `sm`, so the arrow\n          has to point the way the layout actually runs at that width. In RTL the\n          inline axis reverses, so the flat arrow is mirrored with it. */}\n      <span\n        className={cn(\n          'font-mono text-[13px] leading-none',\n          row ? 'rotate-90 sm:rotate-0 sm:rtl:-scale-x-100' : 'rotate-90',\n        )}\n      >\n        →\n      </span>\n      {label && <span className=\"mono-meta whitespace-nowrap\">{label}</span>}\n    </div>\n  )\n}\n\n/**\n * Everything the spec asked for that the renderer will not do, said out loud.\n *\n * All three failures here are silent by construction: the figure renders, it\n * renders beautifully, and it describes something other than what was written.\n * An author reading the picture has no way to tell an edge that was ignored\n * from an edge they forgot, so the console is the only place left to say it.\n *\n * Dev only, and guarded at the call site so a production bundle drops the walk\n * along with the messages.\n */\nfunction warnSpec(nodes: DiagramNode[], edges: DiagramEdge[], drawn: Set<DiagramEdge>): void {\n  const ids = new Set<string>()\n  warnNodes(nodes, ids)\n\n  for (const edge of edges) {\n    if (drawn.has(edge)) continue\n    const pair = `${edge.from} → ${edge.to}`\n    const unknown = !ids.has(edge.from) || !ids.has(edge.to)\n\n    warn({\n      code: unknown ? 'DIAGRAM_EDGE_UNKNOWN_NODE' : 'DIAGRAM_EDGE_NOT_ADJACENT',\n      problem: unknown\n        ? `The edge ${pair} names an id no node in this spec carries, so no arrow is drawn and nothing else changes.`\n        : `The edge ${pair} names two nodes that are never consecutive siblings, so no arrow is drawn anywhere.`,\n      field: `spec.edges: ${pair}`,\n      fix: unknown\n        ? 'Give the node the id the edge names, or correct the edge to an id the spec already has.'\n        : 'Write the edge from a node to the node immediately after it in the same rank, in that order. Nesting is containment here; an edge is a step between siblings.',\n      component: 'Diagram',\n    })\n  }\n}\n\n/** The node half of {@link warnSpec}: duplicate ids, and props read by nobody. */\nfunction warnNodes(nodes: DiagramNode[], ids: Set<string>): void {\n  for (const node of nodes) {\n    if (node.id) {\n      if (ids.has(node.id)) {\n        warn({\n          code: 'DIAGRAM_DUPLICATE_ID',\n          problem: `Two nodes carry the id \"${node.id}\", so an edge naming it lands on whichever comes first and silently means the other.`,\n          field: `spec.nodes: id \"${node.id}\"`,\n          fix: 'Make every id unique across the whole spec, or drop it from the node no edge names.',\n          component: 'Diagram',\n        })\n      }\n      ids.add(node.id)\n    }\n\n    const isGroup = (node.children?.length ?? 0) > 0\n\n    if (isGroup && node.accent) {\n      warn({\n        code: 'DIAGRAM_ACCENT_ON_CONTAINER',\n        problem: `\"${node.label}\" has children, so it is drawn as a band — and a band has no fill for accent to take. It type-checks and paints nothing.`,\n        field: `spec.nodes: accent on \"${node.label}\"`,\n        fix: 'Move accent to the leaf the diagram is actually about, or drop the children so this node becomes that leaf.',\n        component: 'Diagram',\n      })\n    }\n\n    if (!isGroup && node.direction) {\n      warn({\n        code: 'DIAGRAM_DIRECTION_ON_LEAF',\n        problem: `\"${node.label}\" has no children, so there is nothing here to lay out — direction is read only from a node that has some.`,\n        field: `spec.nodes: direction on \"${node.label}\"`,\n        fix: 'Set direction on the parent whose axis you meant, or on spec.direction for the top rank.',\n        component: 'Diagram',\n      })\n    }\n\n    if (node.children) warnNodes(node.children, ids)\n  }\n}\n\nexport default Diagram\n"],"mappings":"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","names":[]}

package/dist/components/Dialog/Dialog.d.ts

@@ -7,7 +7,14 @@ declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
 interface DialogContentProps extends Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'> {
-    /** Heading text. When omitted, a visually-hidden title is rendered for a11y. */
+    /**
+     * Heading text.
+     *
+     * Pass one even when `hideTitle` is set. Radix requires a title, so omitting
+     * it renders a hidden fallback reading the literal word "Dialog" — which
+     * satisfies an automated accessibility check and announces every unnamed
+     * modal in the application as the same thing. Development says so out loud.
+     */
     title?: ReactNode;
     /** Sub-heading under the title. */
     description?: ReactNode;
@@ -32,8 +39,16 @@ interface DialogContentProps extends Omit<ComponentProps<typeof DialogPrimitive.
  * usually by leaving focus behind in the page underneath.
  *
  * Radix requires a `Dialog.Title` whether or not one is shown, so a dialog
- * without a visible heading still renders a hidden one rather than logging a
- * warning and shipping an unnamed modal.
+ * without a visible heading still renders a hidden one rather than shipping an
+ * unnamed modal — and warns in development, because the fallback it renders is
+ * the literal word "Dialog" and a placeholder that passes an accessibility
+ * check is how the problem survives a review.
+ *
+ * Portals into the element an enclosing `OverlayContainer` names, and switches
+ * from viewport positioning to container positioning when there is one. A
+ * `fixed` panel covers the page whatever it is portalled into, so honouring
+ * the container without that swap would have moved the markup and left the
+ * picture unchanged.
  *
  * @example
  * <Dialog>