@eifi1/ui-kit 0.53.0 → 0.55.0

package/dist/components/mini-calendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/mini-calendar.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { upperFirst } from \"../lib/text-case\";\nimport { FOCUS_RING, FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { addMonthsClamped, localeWeekStart, monthKey, parseIsoDate, sameYmd, toLocalIso } from \"../lib/dates\";\nimport { useKitLabels, useKitLocale, useKitWeekStart, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_MINI_CALENDAR_LABELS } from \"./mini-calendar-labels\";\n\n/**\n * Every string this calendar can speak — the `miniCalendar` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * package carries no translation catalog (see the README), so the English defaults\n * below are a starting point and not a commitment. `previousMonth`/`nextMonth` were already props for the\n * reason the audit records: a German app reached this component through a bare\n * re-export and announced its two icon-only arrows in English on a page whose\n * `<html lang>` says `de`.\n *\n * The month caption is deliberately NOT here. It is produced by `Intl` from the\n * `locale` prop, so it is already in the user's language, and the grid takes its\n * accessible name from that element rather than from a string someone has to\n * translate a second time.\n *\n * The ones that interpolate a date are FUNCTIONS taking the formatted date, for the\n * reason `DataTableLabels` gives for its counted strings: a value glued into an\n * English template literal is untranslatable, and the grammar around a date moves\n * with it in most languages.\n */\nexport interface MiniCalendarLabels {\n  previousMonth: string;\n  nextMonth: string;\n  /**\n   * Accessible name of one day cell, given that day formatted in `locale`\n   * (\"Monday, 14 September 2026\").\n   *\n   * The name has to carry the WHOLE date. The visible text of a cell is the day\n   * number alone, and \"14\" on its own tells a screen-reader user nothing — not the\n   * month they have arrowed into, not the year, not the weekday they are picking.\n   */\n  day: (date: string) => string;\n  /** Range mode: what the NEXT click will set. Spoken after every click, and the\n   *  grid's description while the panel is open. */\n  chooseStart: string;\n  chooseEnd: string;\n  /** Range mode: spoken after the click that set the start. */\n  startSelected: (date: string) => string;\n  /** Range mode: spoken after the click that completed the range. */\n  rangeSelected: (from: string, to: string) => string;\n}\n\n// Defined in ./mini-calendar-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_MINI_CALENDAR_LABELS };\n\n/**\n * How a day is spoken. The weekday is in there on purpose: picking a date is very\n * often picking a *day of the week* (\"the first Monday\"), and a grid that makes you\n * count columns to find one is a grid you cannot use without sight.\n */\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/**\n * `onSelect` is omitted from the `<div>` attributes and kept as this component's own:\n * the DOM event of that name is a text-selection event taking one argument, and this one\n * answers with the two ISO dates a range is made of. Everything else a `<div>` takes\n * passes through to the root, so a tour anchor or a test id can find the calendar —\n * before this, a closed prop list dropped both (audit §api-design).\n */\nexport interface MiniCalendarProps extends Omit<ComponentPropsWithRef<\"div\">, \"onSelect\"> {\n  /** The selection's start as \"YYYY-MM-DD\"; `\"\"` (the default) for none. */\n  from?: string;\n  /** The selection's end; `\"\"` (the default) for none. */\n  to?: string;\n  /**\n   * BCP 47 tag for the month caption, the weekday heads, the day numbers and the\n   * spoken dates. Optional since the kit grew `<UiKitProvider locale>`: a calendar\n   * NESTED in another kit component (the data table's date filter) has no call site\n   * of its own to pass one at, so it reads the provider's. Without either, `Intl`\n   * uses the runtime's default.\n   */\n  locale?: string;\n  /**\n   * The weekday the grid starts on, `0` = Sunday … `6` = Saturday (as `Date#getDay`).\n   * Defaults to the LOCALE's first day — Monday in most of Europe, Sunday in the US,\n   * Saturday in much of the Arab world — which is what the user's own wall calendar\n   * does. It was hard-wired to Monday before, which is wrong for most of the people\n   * who use a Sunday-first calendar and invisible to the people who wrote this one.\n   *\n   * Resolved as: this prop, else `<UiKitProvider weekStartsOn>`, else the locale's\n   * week info, else Monday.\n   */\n  weekStartsOn?: WeekDay;\n  onSelect: (from: string, to: string) => void;\n  /** `\"range\"` (default) = two-click from→to; `\"single\"` = one click selects a\n   *  single day (emitted as `onSelect(iso, iso)`). */\n  mode?: \"single\" | \"range\";\n  /** Optional inclusive ISO bounds; days outside `[min, max]` are disabled. */\n  min?: string;\n  max?: string;\n  /** User-facing strings; see {@link MiniCalendarLabels}. */\n  labels?: LabelOverride<MiniCalendarLabels>;\n  /**\n   * Take focus to the day the grid opens on — the selected one, or today — when this\n   * calendar mounts. For a panel that opened BECAUSE the user asked to pick a date:\n   * landing them on the day they are editing is the difference between one arrow key\n   * and a hunt through 42 cells.\n   *\n   * Off by default, and not called `autoFocus`, because it is not the same promise as\n   * the DOM attribute of that name: a calendar rendered INLINE (the data-table's\n   * column filter draws one above its from/to inputs) must not take the page's focus\n   * merely by existing.\n   */\n  focusOnOpen?: boolean;\n  /**\n   * `\"sm\"` (default) is the compact picker: 32px round days, the size the date\n   * pickers and the data-table filter draw. `\"lg\"` is a MONTH VIEW for a page — tall\n   * cells in a ruled grid, the day number in the top corner and {@link renderDay}'s\n   * content under it — the calendar a planner page hand-built before this existed.\n   * Both are the same grid underneath: the same roles, roving tabindex, keys, RTL\n   * mirroring and week start.\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * Custom content for one day: events, an amount, a dot. Called for every day of the\n   * month on show; return `null` for none.\n   *\n   * ⚠️ **It renders INSIDE the day's button** — a dot under the number at `\"sm\"`, a\n   * column under it at `\"lg\"` — so it must not be interactive: no links, no buttons,\n   * no inputs. A control inside a control is invalid HTML, and a screen reader lands\n   * on the day and never reaches what is inside it. Events that are themselves\n   * clickable are shown here as plain text, and the DAY is what is clicked: pass\n   * `mode=\"single\"` and let `onSelect` open a day panel (a drawer, a popover) that\n   * lists that day's events as real links.\n   *\n   * The day's accessible name stays the full date; this content is attached to it as\n   * its DESCRIPTION (`aria-describedby`), so \"Monday, 14 September 2026\" is read\n   * first and \"Rent due · Plumber\" after it. Anything decorative (a coloured dot)\n   * should be `aria-hidden` or carry an `sr-only` word for what it means.\n   */\n  renderDay?: (day: Date, state: MiniCalendarDayState) => ReactNode;\n  /**\n   * The month on show, as \"YYYY-MM\". FOLLOWED rather than controlled, exactly like\n   * `from`/`to`: when it changes the grid moves there, and in between the user pages\n   * freely — every move to another month is reported through {@link onMonthChange}.\n   * For a month page whose own header (a month picker, a Today button) drives the\n   * calendar. Left out, the grid opens on the selection or today.\n   */\n  month?: string;\n  /** Called with \"YYYY-MM\" whenever the USER moves the grid to another month (the\n   *  arrows, PageUp/PageDown, arrowing off the edge). */\n  onMonthChange?: (month: string) => void;\n  /**\n   * Hide the built-in previous/next arrows and month caption, for a page that draws\n   * its own. The caption is kept for assistive technology (visually hidden), because\n   * it is what names the grid.\n   */\n  hideNavigation?: boolean;\n  /**\n   * Fill the leading and trailing cells with the neighbouring months' days, muted —\n   * the wall-calendar look, where the first row does not start on a hole.\n   *\n   * They are real days, not decoration: each is named with its whole date, honours\n   * `min`/`max`, and a click selects it and moves the grid to its month (focus goes\n   * with it). They are NOT stops of the roving tabindex — the keyboard already reaches\n   * them by arrowing off the month's edge, which moves the grid the same way — and\n   * `renderDay` is not called for them, so a day's events are drawn once, in its own\n   * month. Default `false`: the cells stay empty.\n   */\n  showOutsideDays?: boolean;\n  /** Extra classes for the calendar's root. */\n  className?: string;\n}\n\n/** What {@link MiniCalendarProps.renderDay} is told about the day it draws. */\nexport interface MiniCalendarDayState {\n  /** The day as \"YYYY-MM-DD\". */\n  iso: string;\n  /** The day number as drawn, in the calendar's locale. */\n  label: string;\n  today: boolean;\n  /** Outside `min`/`max`. */\n  disabled: boolean;\n  /** Part of the selection — an end or a day between. */\n  selected: boolean;\n  rangeStart: boolean;\n  rangeEnd: boolean;\n  /** Strictly between the two ends of a range. */\n  inRange: boolean;\n  /** The day that holds the tab stop. */\n  active: boolean;\n  size: \"sm\" | \"lg\";\n}\n\nexport type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n/** Where `d` sits in a week that starts on `weekStart` (the first column = 0). */\nconst weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;\n\n/** Move `d` by whole months without rolling over (see {@link addMonthsClamped}). */\nconst stepMonths = addMonthsClamped;\n\n/** A month-view cell: tall enough for two or three event lines, shorter on a phone. */\nconst LG_CELL_HEIGHT = \"min-h-16 md:min-h-24\";\n\n/** The 1st of a \"YYYY-MM\" month, or null when absent or malformed. */\nconst monthStart = (key: string | undefined) => (key ? parseIsoDate(`${key}-01`) : null);\n\n/** `day`'s day of the month in `first`'s month, clamped to that month's length. */\nfunction sameDayIn(first: Date, day: Date): Date {\n  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();\n  return new Date(first.getFullYear(), first.getMonth(), Math.min(day.getDate(), last));\n}\n\n/**\n * Month-grid range picker used by the data-table date filter. Click once to set\n * the start (and clear the end), click again to set the end; clicking with a\n * full range already selected starts over. The week starts where the locale's does\n * (or at `weekStartsOn`), and every label comes from `Intl` in that locale.\n * In `single` mode each click selects one day. Days outside `min`/`max` (when\n * given) are disabled.\n *\n * **It is a grid, in the APG sense** (audit §a11y, \"MiniCalendar is unusable with a\n * keyboard or screen reader\"). Before this it was 42 buttons in a `grid-cols-7` div:\n * every one of them in the tab order, none of them saying which date it was, and no\n * way to reach next month without a mouse. Now the month is a `role=\"grid\"` of rows\n * and `gridcell`s, exactly one day is tabbable (the roving tabindex), and the arrows\n * walk the calendar the way the pattern says — day, week, month — crossing into the\n * neighbouring month by MOVING the grid rather than stopping at its edge.\n *\n * Out-of-range days are `aria-disabled` rather than `disabled`, which is the APG\n * guidance and not a shortcut: a `disabled` button cannot be focused, so a bounded\n * month would have holes that the roving tabindex falls into. They stay reachable and\n * readable, and the click handler is what refuses them.\n */\nexport function MiniCalendar({\n  from = \"\",\n  to = \"\",\n  locale: localeProp,\n  weekStartsOn,\n  onSelect,\n  mode = \"range\",\n  min,\n  max,\n  labels: labelsProp,\n  focusOnOpen,\n  size = \"sm\",\n  renderDay,\n  month,\n  onMonthChange,\n  hideNavigation,\n  showOutsideDays = false,\n  className,\n  ...rest\n}: MiniCalendarProps) {\n  const lg = size === \"lg\";\n  const labels = useKitLabels(\"miniCalendar\", DEFAULT_MINI_CALENDAR_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const providerWeekStart = useKitWeekStart();\n  const weekStart = useMemo(\n    () => weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale),\n    [weekStartsOn, providerWeekStart, locale],\n  );\n  // Day numbers through `Intl` too: `getDate()` is always ASCII digits, and a locale\n  // that writes its own (Arabic, Persian, Bengali …) would get a grid of foreign\n  // numerals under a caption in its own script.\n  const dayNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const fromDate = parseIsoDate(from);\n  const toDate = parseIsoDate(to);\n  const minDate = min ? parseIsoDate(min) : null;\n  const maxDate = max ? parseIsoDate(max) : null;\n  const isDisabled = (d: Date) => Boolean((minDate && d < minDate) || (maxDate && d > maxDate));\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const id = useId();\n  const monthId = `${id}-month`;\n  const hintId = `${id}-hint`;\n  const { announce, regionProps } = useAnnounce();\n\n  /**\n   * The day that holds the tab order, and with it the visible month — one piece of\n   * state, not two, because they cannot be allowed to disagree: a tabbable cell in a\n   * month that is not on screen is a tab stop that focuses nothing.\n   *\n   * Starts on the selection, or on today when there is none, pulled inside `[min, max]`\n   * so a bounded calendar opens on a day it will actually let you pick.\n   */\n  const [activeIso, setActiveIso] = useState(() => {\n    let start = fromDate ?? toDate ?? new Date();\n    // A `month` wins over the selection's month: the page asked for THAT month. The\n    // selection (or today) is kept when it falls inside it, else the 1st.\n    const first = monthStart(month);\n    if (first && monthKey(start) !== month) start = first;\n    if (minDate && start < minDate) return toLocalIso(minDate);\n    if (maxDate && start > maxDate) return toLocalIso(maxDate);\n    return toLocalIso(start);\n  });\n\n  // Follow the caller's value when it changes from outside (a preset, a cleared\n  // filter, a form reset). Written as a render-phase adjustment rather than an effect\n  // so the grid never paints one frame on the old month.\n  const [lastValue, setLastValue] = useState({ from, to });\n  if (lastValue.from !== from || lastValue.to !== to) {\n    // Follow the end that actually CHANGED, not `from` unconditionally. Picking the\n    // end of a range that spans months used to send the grid back to the start's\n    // month — which with a roving tabindex means the cell the user just activated is\n    // no longer rendered, and their focus goes with it to `<body>`.\n    const changed = lastValue.from !== from ? from : to;\n    setLastValue({ from, to });\n    const next = parseIsoDate(changed) ?? fromDate ?? toDate;\n    if (next && toLocalIso(next) !== activeIso) setActiveIso(toLocalIso(next));\n  }\n\n  // …and the caller's month, the same way. Only a CHANGE moves the grid, so paging\n  // with the arrows is not snapped back by a parent that ignores `onMonthChange`.\n  const [lastMonth, setLastMonth] = useState(month);\n  if (lastMonth !== month) {\n    setLastMonth(month);\n    const first = monthStart(month);\n    const current = parseIsoDate(activeIso) ?? new Date();\n    if (first && monthKey(current) !== month) {\n      // Keep the day of the month, clamped: the 31st in a 30-day month is the 30th.\n      setActiveIso(toLocalIso(sameDayIn(first, current)));\n    }\n  }\n\n  const activeDate = parseIsoDate(activeIso) ?? new Date();\n  const view = { year: activeDate.getFullYear(), month: activeDate.getMonth() };\n\n  const firstOfMonth = new Date(view.year, view.month, 1);\n  const lastOfMonth = new Date(view.year, view.month + 1, 0);\n  // Leading blanks up to the first of the month, counted from the week's first day —\n  // or the previous month's last days, with `showOutsideDays` (and the next month's\n  // first ones at the end). `new Date(y, m, 0)` is the day before the 1st, so the\n  // offsets below roll into the neighbouring month by themselves.\n  const startWeekday = weekdayIndex(firstOfMonth, weekStart);\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < startWeekday; i++) {\n    cells.push(showOutsideDays ? new Date(view.year, view.month, i - startWeekday + 1) : null);\n  }\n  for (let d = 1; d <= lastOfMonth.getDate(); d++) cells.push(new Date(view.year, view.month, d));\n  for (let extra = 1; cells.length % 7 !== 0; extra++) {\n    cells.push(showOutsideDays ? new Date(view.year, view.month + 1, extra) : null);\n  }\n  const weeks: (Date | null)[][] = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  // The first letter only, not CSS `capitalize`, which upper-cased every word: Spanish\n  // read \"Septiembre De 2026\" and Hungarian \"2026. Szeptember\" (refactor audit\n  // 2026-10-30, DUP-11) — while the same panel with `monthJump` read them right.\n  const monthLabel = upperFirst(firstOfMonth.toLocaleDateString(locale, { month: \"long\", year: \"numeric\" }), locale);\n  const formatDay = (d: Date) => d.toLocaleDateString(locale, DAY_NAME_FORMAT);\n\n  // Weekday labels via locale, from the week's first day: the narrow one for the\n  // column head, the long one as its accessible name — \"M\" is the same letter for\n  // Monday, March and May, and a column header is the one place a screen reader\n  // reads it on its own.\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        narrow: d.toLocaleDateString(locale, { weekday: \"narrow\" }),\n        short: d.toLocaleDateString(locale, { weekday: \"short\" }),\n        long: d.toLocaleDateString(locale, { weekday: \"long\" }),\n      };\n    });\n  }, [locale, weekStart]);\n\n  /**\n   * A day whose cell has to take focus once it exists. Arrowing off the edge of the\n   * month renders a different month, so the element to focus is not in the DOM at the\n   * time the key is handled — it is one commit away.\n   */\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const iso = pendingFocus.current;\n    if (!iso) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-iso=\"${iso}\"]`)?.focus();\n  });\n\n  // The roving tab stop is the day to open on, so there is nothing else to work out\n  // here — it is already the selection, or today, pulled inside the bounds.\n  useEffect(() => {\n    if (!focusOnOpen) return;\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, [focusOnOpen]);\n\n  /** Move the roving tabindex, and the month with it when the day lands outside. */\n  const moveTo = (d: Date, focus: boolean) => {\n    const iso = toLocalIso(d);\n    if (iso === activeIso) return;\n    if (focus) pendingFocus.current = iso;\n    setActiveIso(iso);\n    const key = monthKey(d);\n    if (key !== monthKey(activeDate)) onMonthChange?.(key);\n  };\n\n  /**\n   * On each day rather than once on the grid: the cell is where focus is, and a\n   * container listening for keys it cannot itself receive is the shape\n   * `jsx-a11y/interactive-supports-focus` objects to. One shared function, not a\n   * closure per cell — it reads the active day from state, which is always the\n   * focused one.\n   */\n  const onDayKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    const next = new Date(activeDate);\n    // ←/→ are \"previous/next day\" along the READING direction: the grid's columns run\n    // right-to-left in RTL (it is a CSS grid, so the browser mirrors it), and ArrowLeft\n    // there moves to the day that sits to the left — the next one.\n    const step = horizontalStep(e.key, e.currentTarget);\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        next.setDate(next.getDate() + step);\n        break;\n      case \"ArrowUp\":\n        next.setDate(next.getDate() - 7);\n        break;\n      case \"ArrowDown\":\n        next.setDate(next.getDate() + 7);\n        break;\n      case \"Home\":\n        next.setDate(next.getDate() - weekdayIndex(next, weekStart));\n        break;\n      case \"End\":\n        next.setDate(next.getDate() + (6 - weekdayIndex(next, weekStart)));\n        break;\n      // Shift+Page is the year step, as in the APG example. It is the only way to\n      // reach a birth year without holding PageUp for four hundred keystrokes.\n      case \"PageUp\":\n        next.setTime(stepMonths(next, e.shiftKey ? -12 : -1).getTime());\n        break;\n      case \"PageDown\":\n        next.setTime(stepMonths(next, e.shiftKey ? 12 : 1).getTime());\n        break;\n      default:\n        return;\n    }\n    // Before the no-op check: every key above also scrolls the panel this calendar\n    // usually sits in, and a day that cannot move still must not move the page.\n    e.preventDefault();\n    moveTo(next, true);\n  };\n\n  const moveMonth = (delta: number) => {\n    // Focus stays on the arrow button the user is pressing — only the grid moves.\n    moveTo(stepMonths(activeDate, delta), false);\n  };\n\n  const handleClick = (d: Date) => {\n    // The guard that `disabled` used to be. Out-of-range days are focusable on\n    // purpose (see the component note), so refusing the click is this function's job.\n    if (isDisabled(d)) return;\n    const iso = toLocalIso(d);\n    // Keep the tab order on the day that was just activated even if the caller\n    // ignores the selection — a controlled component may reject it, and the roving\n    // tabindex is this component's own state, not an echo of the value.\n    moveTo(d, false);\n    if (mode === \"single\") {\n      onSelect(iso, iso);\n      return;\n    }\n    const f = parseIsoDate(from);\n    const tt = parseIsoDate(to);\n    if (!f || (f && tt)) {\n      // start a new selection\n      onSelect(iso, \"\");\n      announce(labels.startSelected(formatDay(d)));\n      return;\n    }\n    // f set, tt empty\n    if (d < f) {\n      onSelect(iso, toLocalIso(f));\n      announce(labels.rangeSelected(formatDay(d), formatDay(f)));\n    } else {\n      onSelect(toLocalIso(f), iso);\n      announce(labels.rangeSelected(formatDay(f), formatDay(d)));\n    }\n  };\n\n  const today = new Date();\n  const hasBand = Boolean(fromDate && toDate && !sameYmd(fromDate, toDate));\n  const daysInMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();\n  const inRange = (d: Date) => {\n    if (!fromDate || !toDate) return false;\n    return d >= fromDate && d <= toDate;\n  };\n\n  // What the next click does. A range is two clicks and nothing on screen says which\n  // one you are on — sighted users read it off the highlighted start.\n  const awaitingEnd = Boolean(fromDate) && !toDate;\n  const rangeHint = awaitingEnd ? labels.chooseEnd : labels.chooseStart;\n\n  return (\n    // The caller's classes come last, so tailwind-merge lets them win the way\n    // `className` does everywhere else in the kit; `...rest` first, as in the rest of\n    // this wave, so nothing from outside can take the grid's own wiring away.\n    <div {...rest} className={cn(\"select-none\", className)}>\n      {hideNavigation ? (\n        // Still in the tree: the caption is what names the grid.\n        <div id={monthId} className=\"sr-only-fixed\">\n          {monthLabel}\n        </div>\n      ) : (\n        <div className={cn(\"flex items-center justify-between\", lg ? \"pb-2\" : \"pb-1\")}>\n          <button\n            type=\"button\"\n            onClick={() => moveMonth(-1)}\n            aria-label={labels.previousMonth}\n            className=\"rounded p-1 text-muted hover:bg-hover\"\n          >\n            {/* Mirrored in RTL: \"previous\" points to the reading START, which is right. */}\n            <ChevronLeft className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n          </button>\n          {/* Named by this element rather than by a string of its own, and `aria-live`\n            so paging months says which month you have landed on — the caption is the\n            only thing on screen that changes when the grid moves, and the user\n            pressing the arrow is not inside the grid to hear the cells change. */}\n          <div\n            id={monthId}\n            aria-live=\"polite\"\n            className={lg ? \"text-base font-semibold text-primary\" : \"text-xs font-medium text-secondary\"}\n          >\n            {monthLabel}\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => moveMonth(1)}\n            aria-label={labels.nextMonth}\n            className=\"rounded p-1 text-muted hover:bg-hover\"\n          >\n            <ChevronRight className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n          </button>\n        </div>\n      )}\n      <div\n        ref={gridRef}\n        role=\"grid\"\n        aria-labelledby={monthId}\n        aria-describedby={mode === \"range\" ? hintId : undefined}\n        className={cn(\n          \"grid\",\n          // The month view is RULED: a 1px gap over a border-coloured ground draws the\n          // lines between the cells, the way a wall calendar does.\n          lg ? \"gap-px overflow-hidden rounded-lg border border-subtle bg-[var(--border)]\" : \"gap-y-0.5\",\n        )}\n      >\n        <div\n          role=\"row\"\n          className={cn(\n            \"grid grid-cols-7 text-center font-medium\",\n            lg ? \"gap-px text-xs text-muted\" : \"text-micro uppercase text-placeholder\",\n          )}\n        >\n          {weekdayLabels.map((w, i) => (\n            <div key={i} role=\"columnheader\" aria-label={w.long} className={lg ? \"bg-surface py-2\" : \"py-0.5\"}>\n              {lg ? w.short : w.narrow}\n            </div>\n          ))}\n        </div>\n        {weeks.map((week, wi) => (\n          // No column gap: the days of a range join into ONE band. With a gap each day\n          // was its own tinted box, and a selected fortnight read as fourteen chips.\n          <div key={wi} role=\"row\" className={cn(\"grid grid-cols-7\", lg && \"gap-px\")}>\n            {week.map((d, di) => {\n              // The padding cells still have to BE cells, or the rows are ragged and\n              // a screen reader's \"column 3\" stops meaning Wednesday.\n              if (!d) {\n                return <div key={di} role=\"gridcell\" className={lg ? cn(LG_CELL_HEIGHT, \"bg-surface-2\") : \"h-8\"} />;\n              }\n              const iso = toLocalIso(d);\n              const disabled = isDisabled(d);\n              // A neighbouring month's day (`showOutsideDays`): a muted, selectable\n              // cell outside the tab order — see the prop.\n              if (d.getMonth() !== view.month) {\n                return (\n                  <div\n                    key={di}\n                    role=\"none\"\n                    className={cn(\n                      \"relative flex\",\n                      lg ? cn(\"min-w-0\", LG_CELL_HEIGHT) : \"h-8 items-center justify-center\",\n                    )}\n                  >\n                    <button\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-iso={iso}\n                      data-outside=\"\"\n                      tabIndex={-1}\n                      aria-label={labels.day(formatDay(d))}\n                      aria-selected={!disabled && inRange(d)}\n                      aria-disabled={disabled || undefined}\n                      onClick={() => {\n                        if (disabled) return;\n                        // Focus follows into the month the click moves the grid to:\n                        // this button is gone after the next commit.\n                        pendingFocus.current = iso;\n                        handleClick(d);\n                      }}\n                      onKeyDown={onDayKeyDown}\n                      className={cn(\n                        \"text-xs tabular-nums text-placeholder transition-colors\",\n                        FOCUS_RING,\n                        \"focus-visible:ring-inset\",\n                        disabled ? \"cursor-not-allowed opacity-60\" : \"hover:bg-hover\",\n                        lg\n                          ? cn(\"flex w-full min-w-0 items-start bg-surface-2 p-1.5\", LG_CELL_HEIGHT)\n                          : \"size-8 rounded-full\",\n                      )}\n                    >\n                      {lg ? (\n                        <span className=\"inline-flex size-6 items-center justify-center\">\n                          {dayNumber.format(d.getDate())}\n                        </span>\n                      ) : (\n                        dayNumber.format(d.getDate())\n                      )}\n                    </button>\n                  </div>\n                );\n              }\n              const isStart = !disabled && fromDate && sameYmd(d, fromDate);\n              const isEnd = !disabled && toDate && sameYmd(d, toDate);\n              const isToday = sameYmd(d, today);\n              const isInRange = !disabled && inRange(d) && !isStart && !isEnd;\n              const isActive = iso === activeIso;\n              const isSelected = Boolean(isStart || isEnd || isInRange);\n              const label = dayNumber.format(d.getDate());\n              const content = renderDay?.(d, {\n                iso,\n                label,\n                today: isToday,\n                disabled,\n                selected: isSelected,\n                rangeStart: Boolean(isStart),\n                rangeEnd: Boolean(isEnd),\n                inRange: isInRange,\n                active: isActive,\n                size,\n              });\n              const filled = hasContent(content);\n              const contentId = `${id}-day-${iso}`;\n              // The band behind the day: full width between the ends, half width at an\n              // end (so the round endpoint sits ON the band's tip), rounded where a row\n              // or the month breaks it. Only when both ends exist and differ — a lone\n              // start is a dot, not a band of one. The month view tints whole cells\n              // instead, so it has no band.\n              const banded = !lg && hasBand && !disabled && (isStart || isEnd || isInRange);\n              const lastOfMonth = d.getDate() === daysInMonth(d);\n              const band = banded\n                ? cn(\n                    \"pointer-events-none absolute inset-y-0 bg-brand-soft\",\n                    isStart ? \"start-1/2 end-0\" : isEnd ? \"start-0 end-1/2\" : \"inset-x-0\",\n                    isInRange && (di === 0 || d.getDate() === 1) && \"rounded-s-full\",\n                    isInRange && (di === 6 || lastOfMonth) && \"rounded-e-full\",\n                    isStart && (di === 6 || lastOfMonth) && \"hidden\",\n                    isEnd && (di === 0 || d.getDate() === 1) && \"hidden\",\n                  )\n                : null;\n              return (\n                <div\n                  key={di}\n                  role=\"none\"\n                  className={cn(\"relative flex\", lg ? \"min-w-0\" : \"h-8 items-center justify-center\")}\n                >\n                  {band && <span aria-hidden className={band} />}\n                  <button\n                    key={di}\n                    type=\"button\"\n                    role=\"gridcell\"\n                    data-iso={iso}\n                    // The roving tabindex: ONE tab stop for the whole month. Every day\n                    // being tabbable meant 31 stops between a date field and the next\n                    // control, which is the same reason the pattern exists.\n                    tabIndex={isActive ? 0 : -1}\n                    aria-label={labels.day(formatDay(d))}\n                    // The custom content is the day's DESCRIPTION: `aria-label` replaces\n                    // the button's text as its name, so without this link a screen\n                    // reader would hear the date and never the events drawn under it.\n                    aria-describedby={filled ? contentId : undefined}\n                    aria-selected={isSelected}\n                    aria-disabled={disabled || undefined}\n                    aria-current={isToday ? \"date\" : undefined}\n                    onClick={() => handleClick(d)}\n                    onKeyDown={onDayKeyDown}\n                    className={\n                      lg\n                        ? cn(\n                            \"flex w-full min-w-0 flex-col items-stretch gap-1 overflow-hidden p-1.5 text-start text-xs transition-colors\",\n                            LG_CELL_HEIGHT,\n                            FOCUS_RING,\n                            \"focus-visible:ring-inset\",\n                            disabled\n                              ? \"cursor-not-allowed bg-surface text-placeholder\"\n                              : isSelected\n                                ? \"bg-brand-soft text-primary hover:bg-brand-soft-hover\"\n                                : \"bg-surface text-primary hover:bg-hover\",\n                          )\n                        : cn(\n                            \"relative size-8 rounded-full text-xs tabular-nums transition-colors\",\n                            // A grid you can walk with the keyboard needs to show where the\n                            // keyboard IS. Inset because the cells sit half a pixel apart and\n                            // an outset ring would be drawn over by its neighbours; the\n                            // colour flips on the selected days for the reason the numpad's\n                            // \"Done\" key does — a --brand ring on a --brand fill is a ring\n                            // that exists only in the DOM.\n                            FOCUS_RING_WIDTH,\n                            \"focus-visible:outline-none focus-visible:ring-inset\",\n                            isStart || isEnd ? \"focus-visible:ring-brand-contrast\" : \"focus-visible:ring-brand\",\n                            disabled\n                              ? \"cursor-not-allowed text-placeholder\"\n                              : // The two selected states are the BRAND, not a fixed sky: the endpoints\n                                // are the solid fill and the days between them its soft tint. Hardcoding\n                                // them left an app that changed `--brand` with a calendar in the old\n                                // colour (docs/module-audit-2026-09-22.md §theming). Both token pairs\n                                // flip light/dark themselves, so there is no `dark:` partner to carry —\n                                // one would override the token and bring the hardcoded hue back.\n                                isStart || isEnd\n                                ? \"bg-brand text-brand-contrast hover:bg-brand-hover\"\n                                : isInRange\n                                  ? \"font-medium text-brand-muted hover:bg-brand-soft-hover\"\n                                  : \"text-primary hover:bg-hover\",\n                            isToday && !isStart && !isEnd && !isInRange && !disabled && \"ring-1 ring-inset ring-strong\",\n                          )\n                    }\n                  >\n                    {lg ? (\n                      <>\n                        <span\n                          className={cn(\n                            \"inline-flex size-6 shrink-0 items-center justify-center self-start rounded-full tabular-nums\",\n                            isStart || isEnd\n                              ? \"bg-brand font-semibold text-brand-contrast\"\n                              : isToday && !disabled\n                                ? \"font-semibold text-brand ring-1 ring-inset ring-brand\"\n                                : isInRange && \"font-medium text-brand-muted\",\n                          )}\n                        >\n                          {label}\n                        </span>\n                        {filled && (\n                          <span id={contentId} className=\"flex min-w-0 flex-col gap-0.5\">\n                            {content}\n                          </span>\n                        )}\n                      </>\n                    ) : (\n                      <>\n                        {label}\n                        {/* Under the number, inside the circle: room for a dot or two. */}\n                        {filled && (\n                          <span\n                            id={contentId}\n                            className=\"pointer-events-none absolute inset-x-0 bottom-0.5 flex justify-center gap-px leading-none\"\n                          >\n                            {content}\n                          </span>\n                        )}\n                      </>\n                    )}\n                  </button>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n      {/* `sr-only-fixed`, not `sr-only`: this renders inside whatever panel a consumer\n          opens it in, and there is no wrapper we can require to be `relative` — see\n          the note on the class in tokens.css. */}\n      {mode === \"range\" && (\n        <span id={hintId} className=\"sr-only-fixed\">\n          {rangeHint}\n        </span>\n      )}\n      <span {...regionProps} />\n    </div>\n  );\n}\n"],"mappings":";AA6fQ,SAoOc,UApOd,KAIA,YAJA;AA7fR,SAAS,WAAW,OAAO,SAAS,QAAQ,gBAAgB;AAE5D,SAAS,aAAa,oBAAoB;AAC1C,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,YAAY,wBAAwB;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB,iBAAiB,UAAU,cAAc,SAAS,kBAAkB;AAC/F,SAAS,cAAc,cAAc,uBAA2C;AAChF,SAAS,oCAAoC;AAmD7C,MAAM,kBAA8C;AAAA,EAClD,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP,MAAM;AACR;AAyIA,MAAM,eAAe,CAAC,GAAS,eAAwB,EAAE,OAAO,IAAI,YAAY,KAAK;AAGrF,MAAM,aAAa;AAGnB,MAAM,iBAAiB;AAGvB,MAAM,aAAa,CAAC,QAA6B,MAAM,aAAa,GAAG,GAAG,KAAK,IAAI;AAGnF,SAAS,UAAU,OAAa,KAAiB;AAC/C,QAAM,OAAO,IAAI,KAAK,MAAM,YAAY,GAAG,MAAM,SAAS,IAAI,GAAG,CAAC,EAAE,QAAQ;AAC5E,SAAO,IAAI,KAAK,MAAM,YAAY,GAAG,MAAM,SAAS,GAAG,KAAK,IAAI,IAAI,QAAQ,GAAG,IAAI,CAAC;AACtF;AAuBO,SAAS,aAAa;AAAA,EAC3B,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,KAAK,SAAS;AACpB,QAAM,SAAS,aAAa,gBAAgB,8BAA8B,UAAU;AACpF,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,oBAAoB,gBAAgB;AAC1C,QAAM,YAAY;AAAA,IAChB,MAAM,gBAAgB,qBAAqB,gBAAgB,MAAM;AAAA,IACjE,CAAC,cAAc,mBAAmB,MAAM;AAAA,EAC1C;AAIA,QAAM,YAAY,QAAQ,MAAM,IAAI,KAAK,aAAa,MAAM,GAAG,CAAC,MAAM,CAAC;AACvE,QAAM,WAAW,aAAa,IAAI;AAClC,QAAM,SAAS,aAAa,EAAE;AAC9B,QAAM,UAAU,MAAM,aAAa,GAAG,IAAI;AAC1C,QAAM,UAAU,MAAM,aAAa,GAAG,IAAI;AAC1C,QAAM,aAAa,CAAC,MAAY,QAAS,WAAW,IAAI,WAAa,WAAW,IAAI,OAAQ;AAE5F,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,KAAK,MAAM;AACjB,QAAM,UAAU,GAAG,EAAE;AACrB,QAAM,SAAS,GAAG,EAAE;AACpB,QAAM,EAAE,UAAU,YAAY,IAAI,YAAY;AAU9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAM;AAC/C,QAAI,QAAQ,YAAY,UAAU,oBAAI,KAAK;AAG3C,UAAM,QAAQ,WAAW,KAAK;AAC9B,QAAI,SAAS,SAAS,KAAK,MAAM,MAAO,SAAQ;AAChD,QAAI,WAAW,QAAQ,QAAS,QAAO,WAAW,OAAO;AACzD,QAAI,WAAW,QAAQ,QAAS,QAAO,WAAW,OAAO;AACzD,WAAO,WAAW,KAAK;AAAA,EACzB,CAAC;AAKD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE,MAAM,GAAG,CAAC;AACvD,MAAI,UAAU,SAAS,QAAQ,UAAU,OAAO,IAAI;AAKlD,UAAM,UAAU,UAAU,SAAS,OAAO,OAAO;AACjD,iBAAa,EAAE,MAAM,GAAG,CAAC;AACzB,UAAM,OAAO,aAAa,OAAO,KAAK,YAAY;AAClD,QAAI,QAAQ,WAAW,IAAI,MAAM,UAAW,cAAa,WAAW,IAAI,CAAC;AAAA,EAC3E;AAIA,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,MAAI,cAAc,OAAO;AACvB,iBAAa,KAAK;AAClB,UAAM,QAAQ,WAAW,KAAK;AAC9B,UAAM,UAAU,aAAa,SAAS,KAAK,oBAAI,KAAK;AACpD,QAAI,SAAS,SAAS,OAAO,MAAM,OAAO;AAExC,mBAAa,WAAW,UAAU,OAAO,OAAO,CAAC,CAAC;AAAA,IACpD;AAAA,EACF;AAEA,QAAM,aAAa,aAAa,SAAS,KAAK,oBAAI,KAAK;AACvD,QAAM,OAAO,EAAE,MAAM,WAAW,YAAY,GAAG,OAAO,WAAW,SAAS,EAAE;AAE5E,QAAM,eAAe,IAAI,KAAK,KAAK,MAAM,KAAK,OAAO,CAAC;AACtD,QAAM,cAAc,IAAI,KAAK,KAAK,MAAM,KAAK,QAAQ,GAAG,CAAC;AAKzD,QAAM,eAAe,aAAa,cAAc,SAAS;AACzD,QAAM,QAAyB,CAAC;AAChC,WAAS,IAAI,GAAG,IAAI,cAAc,KAAK;AACrC,UAAM,KAAK,kBAAkB,IAAI,KAAK,KAAK,MAAM,KAAK,OAAO,IAAI,eAAe,CAAC,IAAI,IAAI;AAAA,EAC3F;AACA,WAAS,IAAI,GAAG,KAAK,YAAY,QAAQ,GAAG,IAAK,OAAM,KAAK,IAAI,KAAK,KAAK,MAAM,KAAK,OAAO,CAAC,CAAC;AAC9F,WAAS,QAAQ,GAAG,MAAM,SAAS,MAAM,GAAG,SAAS;AACnD,UAAM,KAAK,kBAAkB,IAAI,KAAK,KAAK,MAAM,KAAK,QAAQ,GAAG,KAAK,IAAI,IAAI;AAAA,EAChF;AACA,QAAM,QAA2B,CAAC;AAClC,WAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,EAAG,OAAM,KAAK,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC;AAK1E,QAAM,aAAa,WAAW,aAAa,mBAAmB,QAAQ,EAAE,OAAO,QAAQ,MAAM,UAAU,CAAC,GAAG,MAAM;AACjH,QAAM,YAAY,CAAC,MAAY,EAAE,mBAAmB,QAAQ,eAAe;AAM3E,QAAM,gBAAgB,QAAQ,MAAM;AAClC,UAAM,MAAM,IAAI,KAAK,MAAM,GAAG,IAAI,SAAS;AAC3C,WAAO,MAAM,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,GAAG,MAAM;AACzC,YAAM,IAAI,IAAI,KAAK,GAAG;AACtB,QAAE,QAAQ,IAAI,QAAQ,IAAI,CAAC;AAC3B,aAAO;AAAA,QACL,QAAQ,EAAE,mBAAmB,QAAQ,EAAE,SAAS,SAAS,CAAC;AAAA,QAC1D,OAAO,EAAE,mBAAmB,QAAQ,EAAE,SAAS,QAAQ,CAAC;AAAA,QACxD,MAAM,EAAE,mBAAmB,QAAQ,EAAE,SAAS,OAAO,CAAC;AAAA,MACxD;AAAA,IACF,CAAC;AAAA,EACH,GAAG,CAAC,QAAQ,SAAS,CAAC;AAOtB,QAAM,eAAe,OAAsB,IAAI;AAC/C,YAAU,MAAM;AACd,UAAM,MAAM,aAAa;AACzB,QAAI,CAAC,IAAK;AACV,iBAAa,UAAU;AACvB,YAAQ,SAAS,cAA2B,cAAc,GAAG,IAAI,GAAG,MAAM;AAAA,EAC5E,CAAC;AAID,YAAU,MAAM;AACd,QAAI,CAAC,YAAa;AAClB,YAAQ,SAAS,cAA2B,gBAAgB,GAAG,MAAM;AAAA,EACvE,GAAG,CAAC,WAAW,CAAC;AAGhB,QAAM,SAAS,CAAC,GAAS,UAAmB;AAC1C,UAAM,MAAM,WAAW,CAAC;AACxB,QAAI,QAAQ,UAAW;AACvB,QAAI,MAAO,cAAa,UAAU;AAClC,iBAAa,GAAG;AAChB,UAAM,MAAM,SAAS,CAAC;AACtB,QAAI,QAAQ,SAAS,UAAU,EAAG,iBAAgB,GAAG;AAAA,EACvD;AASA,QAAM,eAAe,CAAC,MAAwC;AAC5D,UAAM,OAAO,IAAI,KAAK,UAAU;AAIhC,UAAM,OAAO,eAAe,EAAE,KAAK,EAAE,aAAa;AAClD,YAAQ,OAAO,eAAe,EAAE,KAAK;AAAA,MACnC,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,IAAI,IAAI;AAClC;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,IAAI,CAAC;AAC/B;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,IAAI,CAAC;AAC/B;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,IAAI,aAAa,MAAM,SAAS,CAAC;AAC3D;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,KAAK,QAAQ,KAAK,IAAI,aAAa,MAAM,SAAS,EAAE;AACjE;AAAA;AAAA;AAAA,MAGF,KAAK;AACH,aAAK,QAAQ,WAAW,MAAM,EAAE,WAAW,MAAM,EAAE,EAAE,QAAQ,CAAC;AAC9D;AAAA,MACF,KAAK;AACH,aAAK,QAAQ,WAAW,MAAM,EAAE,WAAW,KAAK,CAAC,EAAE,QAAQ,CAAC;AAC5D;AAAA,MACF;AACE;AAAA,IACJ;AAGA,MAAE,eAAe;AACjB,WAAO,MAAM,IAAI;AAAA,EACnB;AAEA,QAAM,YAAY,CAAC,UAAkB;AAEnC,WAAO,WAAW,YAAY,KAAK,GAAG,KAAK;AAAA,EAC7C;AAEA,QAAM,cAAc,CAAC,MAAY;AAG/B,QAAI,WAAW,CAAC,EAAG;AACnB,UAAM,MAAM,WAAW,CAAC;AAIxB,WAAO,GAAG,KAAK;AACf,QAAI,SAAS,UAAU;AACrB,eAAS,KAAK,GAAG;AACjB;AAAA,IACF;AACA,UAAM,IAAI,aAAa,IAAI;AAC3B,UAAM,KAAK,aAAa,EAAE;AAC1B,QAAI,CAAC,KAAM,KAAK,IAAK;AAEnB,eAAS,KAAK,EAAE;AAChB,eAAS,OAAO,cAAc,UAAU,CAAC,CAAC,CAAC;AAC3C;AAAA,IACF;AAEA,QAAI,IAAI,GAAG;AACT,eAAS,KAAK,WAAW,CAAC,CAAC;AAC3B,eAAS,OAAO,cAAc,UAAU,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;AAAA,IAC3D,OAAO;AACL,eAAS,WAAW,CAAC,GAAG,GAAG;AAC3B,eAAS,OAAO,cAAc,UAAU,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC;AAAA,IAC3D;AAAA,EACF;AAEA,QAAM,QAAQ,oBAAI,KAAK;AACvB,QAAM,UAAU,QAAQ,YAAY,UAAU,CAAC,QAAQ,UAAU,MAAM,CAAC;AACxE,QAAM,cAAc,CAAC,MAAY,IAAI,KAAK,EAAE,YAAY,GAAG,EAAE,SAAS,IAAI,GAAG,CAAC,EAAE,QAAQ;AACxF,QAAM,UAAU,CAAC,MAAY;AAC3B,QAAI,CAAC,YAAY,CAAC,OAAQ,QAAO;AACjC,WAAO,KAAK,YAAY,KAAK;AAAA,EAC/B;AAIA,QAAM,cAAc,QAAQ,QAAQ,KAAK,CAAC;AAC1C,QAAM,YAAY,cAAc,OAAO,YAAY,OAAO;AAE1D;AAAA;AAAA;AAAA;AAAA,IAIE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,eAAe,SAAS,GAClD;AAAA;AAAA;AAAA,QAEC,oBAAC,SAAI,IAAI,SAAS,WAAU,iBACzB,sBACH;AAAA,UAEA,qBAAC,SAAI,WAAW,GAAG,qCAAqC,KAAK,SAAS,MAAM,GAC1E;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,UAAU,EAAE;AAAA,YAC3B,cAAY,OAAO;AAAA,YACnB,WAAU;AAAA,YAGV,8BAAC,eAAY,WAAU,2BAA0B,eAAW,MAAC;AAAA;AAAA,QAC/D;AAAA,QAKA;AAAA,UAAC;AAAA;AAAA,YACC,IAAI;AAAA,YACJ,aAAU;AAAA,YACV,WAAW,KAAK,yCAAyC;AAAA,YAExD;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM,UAAU,CAAC;AAAA,YAC1B,cAAY,OAAO;AAAA,YACnB,WAAU;AAAA,YAEV,8BAAC,gBAAa,WAAU,2BAA0B,eAAW,MAAC;AAAA;AAAA,QAChE;AAAA,SACF;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL,mBAAiB;AAAA,UACjB,oBAAkB,SAAS,UAAU,SAAS;AAAA,UAC9C,WAAW;AAAA,YACT;AAAA;AAAA;AAAA,YAGA,KAAK,8EAA8E;AAAA,UACrF;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAW;AAAA,kBACT;AAAA,kBACA,KAAK,8BAA8B;AAAA,gBACrC;AAAA,gBAEC,wBAAc,IAAI,CAAC,GAAG,MACrB,oBAAC,SAAY,MAAK,gBAAe,cAAY,EAAE,MAAM,WAAW,KAAK,oBAAoB,UACtF,eAAK,EAAE,QAAQ,EAAE,UADV,CAEV,CACD;AAAA;AAAA,YACH;AAAA,YACC,MAAM,IAAI,CAAC,MAAM;AAAA;AAAA;AAAA,cAGhB,oBAAC,SAAa,MAAK,OAAM,WAAW,GAAG,oBAAoB,MAAM,QAAQ,GACtE,eAAK,IAAI,CAAC,GAAG,OAAO;AAGnB,oBAAI,CAAC,GAAG;AACN,yBAAO,oBAAC,SAAa,MAAK,YAAW,WAAW,KAAK,GAAG,gBAAgB,cAAc,IAAI,SAAzE,EAAgF;AAAA,gBACnG;AACA,sBAAM,MAAM,WAAW,CAAC;AACxB,sBAAM,WAAW,WAAW,CAAC;AAG7B,oBAAI,EAAE,SAAS,MAAM,KAAK,OAAO;AAC/B,yBACE;AAAA,oBAAC;AAAA;AAAA,sBAEC,MAAK;AAAA,sBACL,WAAW;AAAA,wBACT;AAAA,wBACA,KAAK,GAAG,WAAW,cAAc,IAAI;AAAA,sBACvC;AAAA,sBAEA;AAAA,wBAAC;AAAA;AAAA,0BACC,MAAK;AAAA,0BACL,MAAK;AAAA,0BACL,YAAU;AAAA,0BACV,gBAAa;AAAA,0BACb,UAAU;AAAA,0BACV,cAAY,OAAO,IAAI,UAAU,CAAC,CAAC;AAAA,0BACnC,iBAAe,CAAC,YAAY,QAAQ,CAAC;AAAA,0BACrC,iBAAe,YAAY;AAAA,0BAC3B,SAAS,MAAM;AACb,gCAAI,SAAU;AAGd,yCAAa,UAAU;AACvB,wCAAY,CAAC;AAAA,0BACf;AAAA,0BACA,WAAW;AAAA,0BACX,WAAW;AAAA,4BACT;AAAA,4BACA;AAAA,4BACA;AAAA,4BACA,WAAW,kCAAkC;AAAA,4BAC7C,KACI,GAAG,sDAAsD,cAAc,IACvE;AAAA,0BACN;AAAA,0BAEC,eACC,oBAAC,UAAK,WAAU,kDACb,oBAAU,OAAO,EAAE,QAAQ,CAAC,GAC/B,IAEA,UAAU,OAAO,EAAE,QAAQ,CAAC;AAAA;AAAA,sBAEhC;AAAA;AAAA,oBAzCK;AAAA,kBA0CP;AAAA,gBAEJ;AACA,sBAAM,UAAU,CAAC,YAAY,YAAY,QAAQ,GAAG,QAAQ;AAC5D,sBAAM,QAAQ,CAAC,YAAY,UAAU,QAAQ,GAAG,MAAM;AACtD,sBAAM,UAAU,QAAQ,GAAG,KAAK;AAChC,sBAAM,YAAY,CAAC,YAAY,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC;AAC1D,sBAAM,WAAW,QAAQ;AACzB,sBAAM,aAAa,QAAQ,WAAW,SAAS,SAAS;AACxD,sBAAM,QAAQ,UAAU,OAAO,EAAE,QAAQ,CAAC;AAC1C,sBAAM,UAAU,YAAY,GAAG;AAAA,kBAC7B;AAAA,kBACA;AAAA,kBACA,OAAO;AAAA,kBACP;AAAA,kBACA,UAAU;AAAA,kBACV,YAAY,QAAQ,OAAO;AAAA,kBAC3B,UAAU,QAAQ,KAAK;AAAA,kBACvB,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR;AAAA,gBACF,CAAC;AACD,sBAAM,SAAS,WAAW,OAAO;AACjC,sBAAM,YAAY,GAAG,EAAE,QAAQ,GAAG;AAMlC,sBAAM,SAAS,CAAC,MAAM,WAAW,CAAC,aAAa,WAAW,SAAS;AACnE,sBAAMA,eAAc,EAAE,QAAQ,MAAM,YAAY,CAAC;AACjD,sBAAM,OAAO,SACT;AAAA,kBACE;AAAA,kBACA,UAAU,oBAAoB,QAAQ,oBAAoB;AAAA,kBAC1D,cAAc,OAAO,KAAK,EAAE,QAAQ,MAAM,MAAM;AAAA,kBAChD,cAAc,OAAO,KAAKA,iBAAgB;AAAA,kBAC1C,YAAY,OAAO,KAAKA,iBAAgB;AAAA,kBACxC,UAAU,OAAO,KAAK,EAAE,QAAQ,MAAM,MAAM;AAAA,gBAC9C,IACA;AACJ,uBACE;AAAA,kBAAC;AAAA;AAAA,oBAEC,MAAK;AAAA,oBACL,WAAW,GAAG,iBAAiB,KAAK,YAAY,iCAAiC;AAAA,oBAEhF;AAAA,8BAAQ,oBAAC,UAAK,eAAW,MAAC,WAAW,MAAM;AAAA,sBAC5C;AAAA,wBAAC;AAAA;AAAA,0BAEC,MAAK;AAAA,0BACL,MAAK;AAAA,0BACL,YAAU;AAAA,0BAIV,UAAU,WAAW,IAAI;AAAA,0BACzB,cAAY,OAAO,IAAI,UAAU,CAAC,CAAC;AAAA,0BAInC,oBAAkB,SAAS,YAAY;AAAA,0BACvC,iBAAe;AAAA,0BACf,iBAAe,YAAY;AAAA,0BAC3B,gBAAc,UAAU,SAAS;AAAA,0BACjC,SAAS,MAAM,YAAY,CAAC;AAAA,0BAC5B,WAAW;AAAA,0BACX,WACE,KACI;AAAA,4BACE;AAAA,4BACA;AAAA,4BACA;AAAA,4BACA;AAAA,4BACA,WACI,mDACA,aACE,yDACA;AAAA,0BACR,IACA;AAAA,4BACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOA;AAAA,4BACA;AAAA,4BACA,WAAW,QAAQ,sCAAsC;AAAA,4BACzD,WACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAOA,WAAW,QACT,sDACA,YACE,2DACA;AAAA;AAAA,4BACR,WAAW,CAAC,WAAW,CAAC,SAAS,CAAC,aAAa,CAAC,YAAY;AAAA,0BAC9D;AAAA,0BAGL,eACC,iCACE;AAAA;AAAA,8BAAC;AAAA;AAAA,gCACC,WAAW;AAAA,kCACT;AAAA,kCACA,WAAW,QACP,+CACA,WAAW,CAAC,WACV,0DACA,aAAa;AAAA,gCACrB;AAAA,gCAEC;AAAA;AAAA,4BACH;AAAA,4BACC,UACC,oBAAC,UAAK,IAAI,WAAW,WAAU,iCAC5B,mBACH;AAAA,6BAEJ,IAEA,iCACG;AAAA;AAAA,4BAEA,UACC;AAAA,8BAAC;AAAA;AAAA,gCACC,IAAI;AAAA,gCACJ,WAAU;AAAA,gCAET;AAAA;AAAA,4BACH;AAAA,6BAEJ;AAAA;AAAA,wBA3FG;AAAA,sBA6FP;AAAA;AAAA;AAAA,kBAnGK;AAAA,gBAoGP;AAAA,cAEJ,CAAC,KAzMO,EA0MV;AAAA,aACD;AAAA;AAAA;AAAA,MACH;AAAA,MAIC,SAAS,WACR,oBAAC,UAAK,IAAI,QAAQ,WAAU,iBACzB,qBACH;AAAA,MAEF,oBAAC,UAAM,GAAG,aAAa;AAAA,OACzB;AAAA;AAEJ;","names":["lastOfMonth"]}
+{"version":3,"sources":["../../src/components/mini-calendar.tsx"],"sourcesContent":["import { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { upperFirst } from \"../lib/text-case\";\nimport { FOCUS_RING, FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport { horizontalStep } from \"../lib/direction\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport {\n  addMonthsClamped,\n  currentDate,\n  localeWeekStart,\n  monthKey,\n  parseIsoDate,\n  sameYmd,\n  toLocalIso,\n} from \"../lib/dates\";\nimport { dateFormatter } from \"../lib/intl-cache\";\nimport { useKitLabels, useKitLocale, useKitWeekStart, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_MINI_CALENDAR_LABELS } from \"./mini-calendar-labels\";\n\n/**\n * Every string this calendar can speak — the `miniCalendar` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * package carries no translation catalog (see the README), so the English defaults\n * below are a starting point and not a commitment. `previousMonth`/`nextMonth` were already props for the\n * reason the audit records: a German app reached this component through a bare\n * re-export and announced its two icon-only arrows in English on a page whose\n * `<html lang>` says `de`.\n *\n * The month caption is deliberately NOT here. It is produced by `Intl` from the\n * `locale` prop, so it is already in the user's language, and the grid takes its\n * accessible name from that element rather than from a string someone has to\n * translate a second time.\n *\n * The ones that interpolate a date are FUNCTIONS taking the formatted date, for the\n * reason `DataTableLabels` gives for its counted strings: a value glued into an\n * English template literal is untranslatable, and the grammar around a date moves\n * with it in most languages.\n */\nexport interface MiniCalendarLabels {\n  previousMonth: string;\n  nextMonth: string;\n  /**\n   * Accessible name of one day cell, given that day formatted in `locale`\n   * (\"Monday, 14 September 2026\").\n   *\n   * The name has to carry the WHOLE date. The visible text of a cell is the day\n   * number alone, and \"14\" on its own tells a screen-reader user nothing — not the\n   * month they have arrowed into, not the year, not the weekday they are picking.\n   */\n  day: (date: string) => string;\n  /** Range mode: what the NEXT click will set. Spoken after every click, and the\n   *  grid's description while the panel is open. */\n  chooseStart: string;\n  chooseEnd: string;\n  /** Range mode: spoken after the click that set the start. */\n  startSelected: (date: string) => string;\n  /** Range mode: spoken after the click that completed the range. */\n  rangeSelected: (from: string, to: string) => string;\n}\n\n// Defined in ./mini-calendar-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_MINI_CALENDAR_LABELS };\n\n/**\n * How a day is spoken. The weekday is in there on purpose: picking a date is very\n * often picking a *day of the week* (\"the first Monday\"), and a grid that makes you\n * count columns to find one is a grid you cannot use without sight.\n */\nconst DAY_NAME_FORMAT: Intl.DateTimeFormatOptions = {\n  weekday: \"long\",\n  day: \"numeric\",\n  month: \"long\",\n  year: \"numeric\",\n};\n\n/**\n * `onSelect` is omitted from the `<div>` attributes and kept as this component's own:\n * the DOM event of that name is a text-selection event taking one argument, and this one\n * answers with the two ISO dates a range is made of. Everything else a `<div>` takes\n * passes through to the root, so a tour anchor or a test id can find the calendar —\n * before this, a closed prop list dropped both (audit §api-design).\n */\nexport interface MiniCalendarProps extends Omit<ComponentPropsWithRef<\"div\">, \"onSelect\"> {\n  /** The selection's start as \"YYYY-MM-DD\"; `\"\"` (the default) for none. */\n  from?: string;\n  /** The selection's end; `\"\"` (the default) for none. */\n  to?: string;\n  /**\n   * BCP 47 tag for the month caption, the weekday heads, the day numbers and the\n   * spoken dates. Optional since the kit grew `<UiKitProvider locale>`: a calendar\n   * NESTED in another kit component (the data table's date filter) has no call site\n   * of its own to pass one at, so it reads the provider's. Without either, `Intl`\n   * uses the runtime's default.\n   */\n  locale?: string;\n  /**\n   * The weekday the grid starts on, `0` = Sunday … `6` = Saturday (as `Date#getDay`).\n   * Defaults to the LOCALE's first day — Monday in most of Europe, Sunday in the US,\n   * Saturday in much of the Arab world — which is what the user's own wall calendar\n   * does. It was hard-wired to Monday before, which is wrong for most of the people\n   * who use a Sunday-first calendar and invisible to the people who wrote this one.\n   *\n   * Resolved as: this prop, else `<UiKitProvider weekStartsOn>`, else the locale's\n   * week info, else Monday.\n   */\n  weekStartsOn?: WeekDay;\n  onSelect: (from: string, to: string) => void;\n  /** `\"range\"` (default) = two-click from→to; `\"single\"` = one click selects a\n   *  single day (emitted as `onSelect(iso, iso)`). */\n  mode?: \"single\" | \"range\";\n  /** Optional inclusive ISO bounds; days outside `[min, max]` are disabled. */\n  min?: string;\n  max?: string;\n  /** User-facing strings; see {@link MiniCalendarLabels}. */\n  labels?: LabelOverride<MiniCalendarLabels>;\n  /**\n   * Take focus to the day the grid opens on — the selected one, or today — when this\n   * calendar mounts. For a panel that opened BECAUSE the user asked to pick a date:\n   * landing them on the day they are editing is the difference between one arrow key\n   * and a hunt through 42 cells.\n   *\n   * Off by default, and not called `autoFocus`, because it is not the same promise as\n   * the DOM attribute of that name: a calendar rendered INLINE (the data-table's\n   * column filter draws one above its from/to inputs) must not take the page's focus\n   * merely by existing.\n   */\n  focusOnOpen?: boolean;\n  /**\n   * `\"sm\"` (default) is the compact picker: 32px round days, the size the date\n   * pickers and the data-table filter draw. `\"lg\"` is a MONTH VIEW for a page — tall\n   * cells in a ruled grid, the day number in the top corner and {@link renderDay}'s\n   * content under it — the calendar a planner page hand-built before this existed.\n   * Both are the same grid underneath: the same roles, roving tabindex, keys, RTL\n   * mirroring and week start.\n   */\n  size?: \"sm\" | \"lg\";\n  /**\n   * Custom content for one day: events, an amount, a dot. Called for every day of the\n   * month on show; return `null` for none.\n   *\n   * ⚠️ **It renders INSIDE the day's button** — a dot under the number at `\"sm\"`, a\n   * column under it at `\"lg\"` — so it must not be interactive: no links, no buttons,\n   * no inputs. A control inside a control is invalid HTML, and a screen reader lands\n   * on the day and never reaches what is inside it. Events that are themselves\n   * clickable are shown here as plain text, and the DAY is what is clicked: pass\n   * `mode=\"single\"` and let `onSelect` open a day panel (a drawer, a popover) that\n   * lists that day's events as real links.\n   *\n   * The day's accessible name stays the full date; this content is attached to it as\n   * its DESCRIPTION (`aria-describedby`), so \"Monday, 14 September 2026\" is read\n   * first and \"Rent due · Plumber\" after it. Anything decorative (a coloured dot)\n   * should be `aria-hidden` or carry an `sr-only` word for what it means.\n   */\n  renderDay?: (day: Date, state: MiniCalendarDayState) => ReactNode;\n  /**\n   * The month on show, as \"YYYY-MM\". FOLLOWED rather than controlled, exactly like\n   * `from`/`to`: when it changes the grid moves there, and in between the user pages\n   * freely — every move to another month is reported through {@link onMonthChange}.\n   * For a month page whose own header (a month picker, a Today button) drives the\n   * calendar. Left out, the grid opens on the selection or today.\n   */\n  month?: string;\n  /** Called with \"YYYY-MM\" whenever the USER moves the grid to another month (the\n   *  arrows, PageUp/PageDown, arrowing off the edge). */\n  onMonthChange?: (month: string) => void;\n  /**\n   * Hide the built-in previous/next arrows and month caption, for a page that draws\n   * its own. The caption is kept for assistive technology (visually hidden), because\n   * it is what names the grid.\n   */\n  hideNavigation?: boolean;\n  /**\n   * Fill the leading and trailing cells with the neighbouring months' days, muted —\n   * the wall-calendar look, where the first row does not start on a hole.\n   *\n   * They are real days, not decoration: each is named with its whole date, honours\n   * `min`/`max`, and a click selects it and moves the grid to its month (focus goes\n   * with it). They are NOT stops of the roving tabindex — the keyboard already reaches\n   * them by arrowing off the month's edge, which moves the grid the same way — and\n   * `renderDay` is not called for them, so a day's events are drawn once, in its own\n   * month. Default `false`: the cells stay empty.\n   */\n  showOutsideDays?: boolean;\n  /** Extra classes for the calendar's root. */\n  className?: string;\n}\n\n/** What {@link MiniCalendarProps.renderDay} is told about the day it draws. */\nexport interface MiniCalendarDayState {\n  /** The day as \"YYYY-MM-DD\". */\n  iso: string;\n  /** The day number as drawn, in the calendar's locale. */\n  label: string;\n  today: boolean;\n  /** Outside `min`/`max`. */\n  disabled: boolean;\n  /** Part of the selection — an end or a day between. */\n  selected: boolean;\n  rangeStart: boolean;\n  rangeEnd: boolean;\n  /** Strictly between the two ends of a range. */\n  inRange: boolean;\n  /** The day that holds the tab stop. */\n  active: boolean;\n  size: \"sm\" | \"lg\";\n}\n\nexport type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n/** Where `d` sits in a week that starts on `weekStart` (the first column = 0). */\nconst weekdayIndex = (d: Date, weekStart: WeekDay) => (d.getDay() - weekStart + 7) % 7;\n\n/** Move `d` by whole months without rolling over (see {@link addMonthsClamped}). */\nconst stepMonths = addMonthsClamped;\n\n/** A month-view cell: tall enough for two or three event lines, shorter on a phone. */\nconst LG_CELL_HEIGHT = \"min-h-16 md:min-h-24\";\n\n/** The 1st of a \"YYYY-MM\" month, or null when absent or malformed. */\nconst monthStart = (key: string | undefined) => (key ? parseIsoDate(`${key}-01`) : null);\n\n/** `day`'s day of the month in `first`'s month, clamped to that month's length. */\nfunction sameDayIn(first: Date, day: Date): Date {\n  const last = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate();\n  return new Date(first.getFullYear(), first.getMonth(), Math.min(day.getDate(), last));\n}\n\n/**\n * Month-grid range picker used by the data-table date filter. Click once to set\n * the start (and clear the end), click again to set the end; clicking with a\n * full range already selected starts over. The week starts where the locale's does\n * (or at `weekStartsOn`), and every label comes from `Intl` in that locale.\n * In `single` mode each click selects one day. Days outside `min`/`max` (when\n * given) are disabled.\n *\n * **It is a grid, in the APG sense** (audit §a11y, \"MiniCalendar is unusable with a\n * keyboard or screen reader\"). Before this it was 42 buttons in a `grid-cols-7` div:\n * every one of them in the tab order, none of them saying which date it was, and no\n * way to reach next month without a mouse. Now the month is a `role=\"grid\"` of rows\n * and `gridcell`s, exactly one day is tabbable (the roving tabindex), and the arrows\n * walk the calendar the way the pattern says — day, week, month — crossing into the\n * neighbouring month by MOVING the grid rather than stopping at its edge.\n *\n * Out-of-range days are `aria-disabled` rather than `disabled`, which is the APG\n * guidance and not a shortcut: a `disabled` button cannot be focused, so a bounded\n * month would have holes that the roving tabindex falls into. They stay reachable and\n * readable, and the click handler is what refuses them.\n */\nexport function MiniCalendar({\n  from = \"\",\n  to = \"\",\n  locale: localeProp,\n  weekStartsOn,\n  onSelect,\n  mode = \"range\",\n  min,\n  max,\n  labels: labelsProp,\n  focusOnOpen,\n  size = \"sm\",\n  renderDay,\n  month,\n  onMonthChange,\n  hideNavigation,\n  showOutsideDays = false,\n  className,\n  ...rest\n}: MiniCalendarProps) {\n  const lg = size === \"lg\";\n  const labels = useKitLabels(\"miniCalendar\", DEFAULT_MINI_CALENDAR_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const providerWeekStart = useKitWeekStart();\n  const weekStart = useMemo(\n    () => weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale),\n    [weekStartsOn, providerWeekStart, locale],\n  );\n  // Day numbers through `Intl` too: `getDate()` is always ASCII digits, and a locale\n  // that writes its own (Arabic, Persian, Bengali …) would get a grid of foreign\n  // numerals under a caption in its own script.\n  const dayNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const fromDate = parseIsoDate(from);\n  const toDate = parseIsoDate(to);\n  const minDate = min ? parseIsoDate(min) : null;\n  const maxDate = max ? parseIsoDate(max) : null;\n  const isDisabled = (d: Date) => Boolean((minDate && d < minDate) || (maxDate && d > maxDate));\n\n  const gridRef = useRef<HTMLDivElement>(null);\n  const id = useId();\n  const monthId = `${id}-month`;\n  const hintId = `${id}-hint`;\n  const { announce, regionProps } = useAnnounce();\n\n  /**\n   * The day that holds the tab order, and with it the visible month — one piece of\n   * state, not two, because they cannot be allowed to disagree: a tabbable cell in a\n   * month that is not on screen is a tab stop that focuses nothing.\n   *\n   * Starts on the selection, or on today when there is none, pulled inside `[min, max]`\n   * so a bounded calendar opens on a day it will actually let you pick.\n   */\n  const [activeIso, setActiveIso] = useState(() => {\n    // Today is the kit's (`currentDate`), so a dev clock that moved it opens the grid\n    // there too (0.55).\n    let start = fromDate ?? toDate ?? currentDate();\n    // A `month` wins over the selection's month: the page asked for THAT month. The\n    // selection (or today) is kept when it falls inside it, else the 1st.\n    const first = monthStart(month);\n    if (first && monthKey(start) !== month) start = first;\n    if (minDate && start < minDate) return toLocalIso(minDate);\n    if (maxDate && start > maxDate) return toLocalIso(maxDate);\n    return toLocalIso(start);\n  });\n\n  // Follow the caller's value when it changes from outside (a preset, a cleared\n  // filter, a form reset). Written as a render-phase adjustment rather than an effect\n  // so the grid never paints one frame on the old month.\n  const [lastValue, setLastValue] = useState({ from, to });\n  if (lastValue.from !== from || lastValue.to !== to) {\n    // Follow the end that actually CHANGED, not `from` unconditionally. Picking the\n    // end of a range that spans months used to send the grid back to the start's\n    // month — which with a roving tabindex means the cell the user just activated is\n    // no longer rendered, and their focus goes with it to `<body>`.\n    const changed = lastValue.from !== from ? from : to;\n    setLastValue({ from, to });\n    const next = parseIsoDate(changed) ?? fromDate ?? toDate;\n    if (next && toLocalIso(next) !== activeIso) setActiveIso(toLocalIso(next));\n  }\n\n  // …and the caller's month, the same way. Only a CHANGE moves the grid, so paging\n  // with the arrows is not snapped back by a parent that ignores `onMonthChange`.\n  const [lastMonth, setLastMonth] = useState(month);\n  if (lastMonth !== month) {\n    setLastMonth(month);\n    const first = monthStart(month);\n    const current = parseIsoDate(activeIso) ?? currentDate();\n    if (first && monthKey(current) !== month) {\n      // Keep the day of the month, clamped: the 31st in a 30-day month is the 30th.\n      setActiveIso(toLocalIso(sameDayIn(first, current)));\n    }\n  }\n\n  const activeDate = parseIsoDate(activeIso) ?? currentDate();\n  const view = { year: activeDate.getFullYear(), month: activeDate.getMonth() };\n\n  const firstOfMonth = new Date(view.year, view.month, 1);\n  const lastOfMonth = new Date(view.year, view.month + 1, 0);\n  // Leading blanks up to the first of the month, counted from the week's first day —\n  // or the previous month's last days, with `showOutsideDays` (and the next month's\n  // first ones at the end). `new Date(y, m, 0)` is the day before the 1st, so the\n  // offsets below roll into the neighbouring month by themselves.\n  const startWeekday = weekdayIndex(firstOfMonth, weekStart);\n  const cells: (Date | null)[] = [];\n  for (let i = 0; i < startWeekday; i++) {\n    cells.push(showOutsideDays ? new Date(view.year, view.month, i - startWeekday + 1) : null);\n  }\n  for (let d = 1; d <= lastOfMonth.getDate(); d++) cells.push(new Date(view.year, view.month, d));\n  for (let extra = 1; cells.length % 7 !== 0; extra++) {\n    cells.push(showOutsideDays ? new Date(view.year, view.month + 1, extra) : null);\n  }\n  const weeks: (Date | null)[][] = [];\n  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));\n\n  // The first letter only, not CSS `capitalize`, which upper-cased every word: Spanish\n  // read \"Septiembre De 2026\" and Hungarian \"2026. Szeptember\" (refactor audit\n  // 2026-10-30, DUP-11) — while the same panel with `monthJump` read them right.\n  // Both through the kit's formatter cache: every day cell names its date, which was a\n  // formatter per cell and render (keksdose audit follow-up, 2026-11-01).\n  const monthLabel = upperFirst(dateFormatter(locale, { month: \"long\", year: \"numeric\" }).format(firstOfMonth), locale);\n  const formatDay = (d: Date) => dateFormatter(locale, DAY_NAME_FORMAT).format(d);\n\n  // Weekday labels via locale, from the week's first day: the narrow one for the\n  // column head, the long one as its accessible name — \"M\" is the same letter for\n  // Monday, March and May, and a column header is the one place a screen reader\n  // reads it on its own.\n  const weekdayLabels = useMemo(() => {\n    const ref = new Date(2024, 0, 7 + weekStart); // 7 January 2024 was a Sunday\n    return Array.from({ length: 7 }, (_, i) => {\n      const d = new Date(ref);\n      d.setDate(ref.getDate() + i);\n      return {\n        narrow: d.toLocaleDateString(locale, { weekday: \"narrow\" }),\n        short: d.toLocaleDateString(locale, { weekday: \"short\" }),\n        long: d.toLocaleDateString(locale, { weekday: \"long\" }),\n      };\n    });\n  }, [locale, weekStart]);\n\n  /**\n   * A day whose cell has to take focus once it exists. Arrowing off the edge of the\n   * month renders a different month, so the element to focus is not in the DOM at the\n   * time the key is handled — it is one commit away.\n   */\n  const pendingFocus = useRef<string | null>(null);\n  useEffect(() => {\n    const iso = pendingFocus.current;\n    if (!iso) return;\n    pendingFocus.current = null;\n    gridRef.current?.querySelector<HTMLElement>(`[data-iso=\"${iso}\"]`)?.focus();\n  });\n\n  // The roving tab stop is the day to open on, so there is nothing else to work out\n  // here — it is already the selection, or today, pulled inside the bounds.\n  useEffect(() => {\n    if (!focusOnOpen) return;\n    gridRef.current?.querySelector<HTMLElement>('[tabindex=\"0\"]')?.focus();\n  }, [focusOnOpen]);\n\n  /** Move the roving tabindex, and the month with it when the day lands outside. */\n  const moveTo = (d: Date, focus: boolean) => {\n    const iso = toLocalIso(d);\n    if (iso === activeIso) return;\n    if (focus) pendingFocus.current = iso;\n    setActiveIso(iso);\n    const key = monthKey(d);\n    if (key !== monthKey(activeDate)) onMonthChange?.(key);\n  };\n\n  /**\n   * On each day rather than once on the grid: the cell is where focus is, and a\n   * container listening for keys it cannot itself receive is the shape\n   * `jsx-a11y/interactive-supports-focus` objects to. One shared function, not a\n   * closure per cell — it reads the active day from state, which is always the\n   * focused one.\n   */\n  const onDayKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    const next = new Date(activeDate);\n    // ←/→ are \"previous/next day\" along the READING direction: the grid's columns run\n    // right-to-left in RTL (it is a CSS grid, so the browser mirrors it), and ArrowLeft\n    // there moves to the day that sits to the left — the next one.\n    const step = horizontalStep(e.key, e.currentTarget);\n    switch (step ? \"horizontal\" : e.key) {\n      case \"horizontal\":\n        next.setDate(next.getDate() + step);\n        break;\n      case \"ArrowUp\":\n        next.setDate(next.getDate() - 7);\n        break;\n      case \"ArrowDown\":\n        next.setDate(next.getDate() + 7);\n        break;\n      case \"Home\":\n        next.setDate(next.getDate() - weekdayIndex(next, weekStart));\n        break;\n      case \"End\":\n        next.setDate(next.getDate() + (6 - weekdayIndex(next, weekStart)));\n        break;\n      // Shift+Page is the year step, as in the APG example. It is the only way to\n      // reach a birth year without holding PageUp for four hundred keystrokes.\n      case \"PageUp\":\n        next.setTime(stepMonths(next, e.shiftKey ? -12 : -1).getTime());\n        break;\n      case \"PageDown\":\n        next.setTime(stepMonths(next, e.shiftKey ? 12 : 1).getTime());\n        break;\n      default:\n        return;\n    }\n    // Before the no-op check: every key above also scrolls the panel this calendar\n    // usually sits in, and a day that cannot move still must not move the page.\n    e.preventDefault();\n    moveTo(next, true);\n  };\n\n  const moveMonth = (delta: number) => {\n    // Focus stays on the arrow button the user is pressing — only the grid moves.\n    moveTo(stepMonths(activeDate, delta), false);\n  };\n\n  const handleClick = (d: Date) => {\n    // The guard that `disabled` used to be. Out-of-range days are focusable on\n    // purpose (see the component note), so refusing the click is this function's job.\n    if (isDisabled(d)) return;\n    const iso = toLocalIso(d);\n    // Keep the tab order on the day that was just activated even if the caller\n    // ignores the selection — a controlled component may reject it, and the roving\n    // tabindex is this component's own state, not an echo of the value.\n    moveTo(d, false);\n    if (mode === \"single\") {\n      onSelect(iso, iso);\n      return;\n    }\n    const f = parseIsoDate(from);\n    const tt = parseIsoDate(to);\n    if (!f || (f && tt)) {\n      // start a new selection\n      onSelect(iso, \"\");\n      announce(labels.startSelected(formatDay(d)));\n      return;\n    }\n    // f set, tt empty\n    if (d < f) {\n      onSelect(iso, toLocalIso(f));\n      announce(labels.rangeSelected(formatDay(d), formatDay(f)));\n    } else {\n      onSelect(toLocalIso(f), iso);\n      announce(labels.rangeSelected(formatDay(f), formatDay(d)));\n    }\n  };\n\n  // The ring and `aria-current=\"date\"` on the kit's today: a day a dev clock moved it to\n  // with `setToday`, else the device's (0.55, keksdose's 0.51 adoption N2).\n  const today = currentDate();\n  const hasBand = Boolean(fromDate && toDate && !sameYmd(fromDate, toDate));\n  const daysInMonth = (d: Date) => new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate();\n  const inRange = (d: Date) => {\n    if (!fromDate || !toDate) return false;\n    return d >= fromDate && d <= toDate;\n  };\n\n  // What the next click does. A range is two clicks and nothing on screen says which\n  // one you are on — sighted users read it off the highlighted start.\n  const awaitingEnd = Boolean(fromDate) && !toDate;\n  const rangeHint = awaitingEnd ? labels.chooseEnd : labels.chooseStart;\n\n  return (\n    // The caller's classes come last, so tailwind-merge lets them win the way\n    // `className` does everywhere else in the kit; `...rest` first, as in the rest of\n    // this wave, so nothing from outside can take the grid's own wiring away.\n    <div {...rest} className={cn(\"select-none\", className)}>\n      {hideNavigation ? (\n        // Still in the tree: the caption is what names the grid.\n        <div id={monthId} className=\"sr-only-fixed\">\n          {monthLabel}\n        </div>\n      ) : (\n        <div className={cn(\"flex items-center justify-between\", lg ? \"pb-2\" : \"pb-1\")}>\n          <button\n            type=\"button\"\n            onClick={() => moveMonth(-1)}\n            aria-label={labels.previousMonth}\n            className=\"rounded p-1 text-muted hover:bg-hover\"\n          >\n            {/* Mirrored in RTL: \"previous\" points to the reading START, which is right. */}\n            <ChevronLeft className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n          </button>\n          {/* Named by this element rather than by a string of its own, and `aria-live`\n            so paging months says which month you have landed on — the caption is the\n            only thing on screen that changes when the grid moves, and the user\n            pressing the arrow is not inside the grid to hear the cells change. */}\n          <div\n            id={monthId}\n            aria-live=\"polite\"\n            className={lg ? \"text-base font-semibold text-primary\" : \"text-xs font-medium text-secondary\"}\n          >\n            {monthLabel}\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => moveMonth(1)}\n            aria-label={labels.nextMonth}\n            className=\"rounded p-1 text-muted hover:bg-hover\"\n          >\n            <ChevronRight className=\"size-4 rtl:-scale-x-100\" aria-hidden />\n          </button>\n        </div>\n      )}\n      <div\n        ref={gridRef}\n        role=\"grid\"\n        aria-labelledby={monthId}\n        aria-describedby={mode === \"range\" ? hintId : undefined}\n        className={cn(\n          \"grid\",\n          // The month view is RULED: a 1px gap over a border-coloured ground draws the\n          // lines between the cells, the way a wall calendar does.\n          lg ? \"gap-px overflow-hidden rounded-lg border border-subtle bg-[var(--border)]\" : \"gap-y-0.5\",\n        )}\n      >\n        <div\n          role=\"row\"\n          className={cn(\n            \"grid grid-cols-7 text-center font-medium\",\n            lg ? \"gap-px text-xs text-muted\" : \"text-micro uppercase text-placeholder\",\n          )}\n        >\n          {weekdayLabels.map((w, i) => (\n            <div key={i} role=\"columnheader\" aria-label={w.long} className={lg ? \"bg-surface py-2\" : \"py-0.5\"}>\n              {lg ? w.short : w.narrow}\n            </div>\n          ))}\n        </div>\n        {weeks.map((week, wi) => (\n          // No column gap: the days of a range join into ONE band. With a gap each day\n          // was its own tinted box, and a selected fortnight read as fourteen chips.\n          <div key={wi} role=\"row\" className={cn(\"grid grid-cols-7\", lg && \"gap-px\")}>\n            {week.map((d, di) => {\n              // The padding cells still have to BE cells, or the rows are ragged and\n              // a screen reader's \"column 3\" stops meaning Wednesday.\n              if (!d) {\n                return <div key={di} role=\"gridcell\" className={lg ? cn(LG_CELL_HEIGHT, \"bg-surface-2\") : \"h-8\"} />;\n              }\n              const iso = toLocalIso(d);\n              const disabled = isDisabled(d);\n              // A neighbouring month's day (`showOutsideDays`): a muted, selectable\n              // cell outside the tab order — see the prop.\n              if (d.getMonth() !== view.month) {\n                return (\n                  <div\n                    key={di}\n                    role=\"none\"\n                    className={cn(\n                      \"relative flex\",\n                      lg ? cn(\"min-w-0\", LG_CELL_HEIGHT) : \"h-8 items-center justify-center\",\n                    )}\n                  >\n                    <button\n                      type=\"button\"\n                      role=\"gridcell\"\n                      data-iso={iso}\n                      data-outside=\"\"\n                      tabIndex={-1}\n                      aria-label={labels.day(formatDay(d))}\n                      aria-selected={!disabled && inRange(d)}\n                      aria-disabled={disabled || undefined}\n                      onClick={() => {\n                        if (disabled) return;\n                        // Focus follows into the month the click moves the grid to:\n                        // this button is gone after the next commit.\n                        pendingFocus.current = iso;\n                        handleClick(d);\n                      }}\n                      onKeyDown={onDayKeyDown}\n                      className={cn(\n                        \"text-xs tabular-nums text-placeholder transition-colors\",\n                        FOCUS_RING,\n                        \"focus-visible:ring-inset\",\n                        disabled ? \"cursor-not-allowed opacity-60\" : \"hover:bg-hover\",\n                        lg\n                          ? cn(\"flex w-full min-w-0 items-start bg-surface-2 p-1.5\", LG_CELL_HEIGHT)\n                          : \"size-8 rounded-full\",\n                      )}\n                    >\n                      {lg ? (\n                        <span className=\"inline-flex size-6 items-center justify-center\">\n                          {dayNumber.format(d.getDate())}\n                        </span>\n                      ) : (\n                        dayNumber.format(d.getDate())\n                      )}\n                    </button>\n                  </div>\n                );\n              }\n              const isStart = !disabled && fromDate && sameYmd(d, fromDate);\n              const isEnd = !disabled && toDate && sameYmd(d, toDate);\n              const isToday = sameYmd(d, today);\n              const isInRange = !disabled && inRange(d) && !isStart && !isEnd;\n              const isActive = iso === activeIso;\n              const isSelected = Boolean(isStart || isEnd || isInRange);\n              const label = dayNumber.format(d.getDate());\n              const content = renderDay?.(d, {\n                iso,\n                label,\n                today: isToday,\n                disabled,\n                selected: isSelected,\n                rangeStart: Boolean(isStart),\n                rangeEnd: Boolean(isEnd),\n                inRange: isInRange,\n                active: isActive,\n                size,\n              });\n              const filled = hasContent(content);\n              const contentId = `${id}-day-${iso}`;\n              // The band behind the day: full width between the ends, half width at an\n              // end (so the round endpoint sits ON the band's tip), rounded where a row\n              // or the month breaks it. Only when both ends exist and differ — a lone\n              // start is a dot, not a band of one. The month view tints whole cells\n              // instead, so it has no band.\n              const banded = !lg && hasBand && !disabled && (isStart || isEnd || isInRange);\n              const lastOfMonth = d.getDate() === daysInMonth(d);\n              const band = banded\n                ? cn(\n                    \"pointer-events-none absolute inset-y-0 bg-brand-soft\",\n                    isStart ? \"start-1/2 end-0\" : isEnd ? \"start-0 end-1/2\" : \"inset-x-0\",\n                    isInRange && (di === 0 || d.getDate() === 1) && \"rounded-s-full\",\n                    isInRange && (di === 6 || lastOfMonth) && \"rounded-e-full\",\n                    isStart && (di === 6 || lastOfMonth) && \"hidden\",\n                    isEnd && (di === 0 || d.getDate() === 1) && \"hidden\",\n                  )\n                : null;\n              return (\n                <div\n                  key={di}\n                  role=\"none\"\n                  className={cn(\"relative flex\", lg ? \"min-w-0\" : \"h-8 items-center justify-center\")}\n                >\n                  {band && <span aria-hidden className={band} />}\n                  <button\n                    key={di}\n                    type=\"button\"\n                    role=\"gridcell\"\n                    data-iso={iso}\n                    // The roving tabindex: ONE tab stop for the whole month. Every day\n                    // being tabbable meant 31 stops between a date field and the next\n                    // control, which is the same reason the pattern exists.\n                    tabIndex={isActive ? 0 : -1}\n                    aria-label={labels.day(formatDay(d))}\n                    // The custom content is the day's DESCRIPTION: `aria-label` replaces\n                    // the button's text as its name, so without this link a screen\n                    // reader would hear the date and never the events drawn under it.\n                    aria-describedby={filled ? contentId : undefined}\n                    aria-selected={isSelected}\n                    aria-disabled={disabled || undefined}\n                    aria-current={isToday ? \"date\" : undefined}\n                    onClick={() => handleClick(d)}\n                    onKeyDown={onDayKeyDown}\n                    className={\n                      lg\n                        ? cn(\n                            \"flex w-full min-w-0 flex-col items-stretch gap-1 overflow-hidden p-1.5 text-start text-xs transition-colors\",\n                            LG_CELL_HEIGHT,\n                            FOCUS_RING,\n                            \"focus-visible:ring-inset\",\n                            disabled\n                              ? \"cursor-not-allowed bg-surface text-placeholder\"\n                              : isSelected\n                                ? \"bg-brand-soft text-primary hover:bg-brand-soft-hover\"\n                                : \"bg-surface text-primary hover:bg-hover\",\n                          )\n                        : cn(\n                            \"relative size-8 rounded-full text-xs tabular-nums transition-colors\",\n                            // A grid you can walk with the keyboard needs to show where the\n                            // keyboard IS. Inset because the cells sit half a pixel apart and\n                            // an outset ring would be drawn over by its neighbours; the\n                            // colour flips on the selected days for the reason the numpad's\n                            // \"Done\" key does — a --brand ring on a --brand fill is a ring\n                            // that exists only in the DOM.\n                            FOCUS_RING_WIDTH,\n                            \"focus-visible:outline-none focus-visible:ring-inset\",\n                            isStart || isEnd ? \"focus-visible:ring-brand-contrast\" : \"focus-visible:ring-brand\",\n                            disabled\n                              ? \"cursor-not-allowed text-placeholder\"\n                              : // The two selected states are the BRAND, not a fixed sky: the endpoints\n                                // are the solid fill and the days between them its soft tint. Hardcoding\n                                // them left an app that changed `--brand` with a calendar in the old\n                                // colour (docs/module-audit-2026-09-22.md §theming). Both token pairs\n                                // flip light/dark themselves, so there is no `dark:` partner to carry —\n                                // one would override the token and bring the hardcoded hue back.\n                                isStart || isEnd\n                                ? \"bg-brand text-brand-contrast hover:bg-brand-hover\"\n                                : isInRange\n                                  ? \"font-medium text-brand-muted hover:bg-brand-soft-hover\"\n                                  : \"text-primary hover:bg-hover\",\n                            isToday && !isStart && !isEnd && !isInRange && !disabled && \"ring-1 ring-inset ring-strong\",\n                          )\n                    }\n                  >\n                    {lg ? (\n                      <>\n                        <span\n                          className={cn(\n                            \"inline-flex size-6 shrink-0 items-center justify-center self-start rounded-full tabular-nums\",\n                            isStart || isEnd\n                              ? \"bg-brand font-semibold text-brand-contrast\"\n                              : isToday && !disabled\n                                ? \"font-semibold text-brand ring-1 ring-inset ring-brand\"\n                                : isInRange && \"font-medium text-brand-muted\",\n                          )}\n                        >\n                          {label}\n                        </span>\n                        {filled && (\n                          <span id={contentId} className=\"flex min-w-0 flex-col gap-0.5\">\n                            {content}\n                          </span>\n                        )}\n                      </>\n                    ) : (\n                      <>\n                        {label}\n                        {/* Under the number, inside the circle: room for a dot or two. */}\n                        {filled && (\n                          <span\n                            id={contentId}\n                            className=\"pointer-events-none absolute inset-x-0 bottom-0.5 flex justify-center gap-px leading-none\"\n                          >\n                            {content}\n                          </span>\n                        )}\n                      </>\n                    )}\n                  </button>\n                </div>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n      {/* `sr-only-fixed`, not `sr-only`: this renders inside whatever panel a consumer\n          opens it in, and there is no wrapper we can require to be `relative` — see\n          the note on the class in tokens.css. */}\n      {mode === \"range\" && (\n        <span id={hintId} className=\"sr-only-fixed\">\n          {rangeHint}\n        </span>\n      )}\n      <span {...regionProps} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["lastOfMonth"]}

package/dist/components/modal.d.ts

@@ -152,8 +152,56 @@ export interface ModalProps extends Omit<ComponentPropsWithoutRef<"div">, "role"
      * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one
      * made from an effect that depends on that close (ReauthDialog's on a resolved submit)
      * runs again once `busy` turns false, because the close changes with it.
+     *
+     * A dialog that must not be dismissed while NOTHING runs — a code shown once — wants
+     * {@link ModalProps.held} instead: the same hold without the request. Either way, each
+     * refused press is reported to {@link ModalProps.onDismissRefused}.
      */
     busy?: boolean;
+    /**
+     * Hold the dialog open: every dismissal `busy` refuses is refused — the backdrop,
+     * Escape, Back, the frame's X and an `actions(close)` button — but no request is
+     * claimed: the panel is not `aria-busy`. For a dialog the user must not lose by
+     * accident while nothing is in flight (keksdose audit follow-up, 2026-11-01): keksdose's
+     * one-time recovery code (auth/recovery-code-pane.tsx) refused in its own `onClose`,
+     * which comes after the exit has started and cannot hold Back — the first Back spent
+     * the dialog's history entry, and the second left the page, and the code with it.
+     * Held, a refused Back puts the entry back, so every Back is held, not only the first.
+     * The refusal is silent, as under `busy` — `onClose` is not called — so what the
+     * dialog is waiting for is said up front; an app that also answers the refused press
+     * hears it through {@link ModalProps.onDismissRefused}.
+     *
+     * The way out is a close the CALLER decides on, which is never held: `open={false}`
+     * (the exit still plays) or unmounting, from the dialog's own "I have saved it" button.
+     * Not the `close` that `actions` and `headerActions` receive — that is the dialog's
+     * own dismissal, and held like the rest.
+     *
+     * `DialogFrame`'s X is DISABLED while held, where under `busy` it stays enabled and its
+     * press is dropped: a request is over in a moment, a hold lasts until the user acts,
+     * and an X that does nothing for that long reads as broken. Disabled rather than
+     * hidden, so the header does not reflow the moment the hold lifts; a caller that wants
+     * it gone passes `closeButton={!held}`. Independent of `busy`: either one holds.
+     */
+    held?: boolean;
+    /**
+     * Called when `busy` or `held` refuses a dismissal — once per refused attempt, with
+     * the way it came: `"backdrop"`, `"escape"`, `"back"` (the platform Back) or `"close"`
+     * (the frame's X, a `close` that `actions` or `headerActions` received, any close
+     * through `ModalCloseContext`). `onClose` is still not called; the dialog stays.
+     *
+     * 0.54 follow-up: keksdose's recovery-code dialog (auth/recovery-code-pane.tsx) showed
+     * a "why won't it close" banner after a refused press, from its own refusing
+     * `onClose`. Moving to `held` lost it, since a held press never reaches `onClose`;
+     * this is where the app hears it again, and from Back too, which its `onClose` could
+     * only hear once.
+     *
+     * Only refusals: not a dismissal that goes through, not a close the caller decides on,
+     * not an Escape a layer over the dialog or the owner's `onKeyDown` claim took first,
+     * not a press on a panel already on its way out. Held, the frame's X is disabled and
+     * cannot be pressed; under `busy` it reports `"close"`. With `urlParam`, Back is never
+     * held, so never reported. A Back is reported after its history entry is put back.
+     */
+    onDismissRefused?: (via: "backdrop" | "escape" | "back" | "close") => void;
     /**
      * The PANEL — the `role="dialog"` element the rest of the props go on, not the
      * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on

package/dist/components/modal.js

@@ -97,6 +97,8 @@ function ModalPanel({
   role = "dialog",
   urlParam: _urlParam,
   busy = false,
+  held = false,
+  onDismissRefused,
   "aria-busy": ariaBusy,
   ownHistoryEntry = true,
   ref,
@@ -124,16 +126,34 @@ function ModalPanel({
     setDismissed(true);
     onClose();
   });
-  const requestClose = useCallback(() => {
-    if (!busy) lower();
-  }, [busy, lower]);
-  const backdropClose = useBackdropClose(active ? requestClose : () => {
+  const holding = busy || held;
+  const refusedRef = useRef(onDismissRefused);
+  const openRef = useRef(active);
+  useEffect(() => {
+    refusedRef.current = onDismissRefused;
+    openRef.current = active;
+  });
+  const refuse = useCallback((via) => {
+    if (openRef.current) refusedRef.current?.(via);
+  }, []);
+  const dismiss = useCallback(
+    (via) => {
+      if (holding) refuse(via);
+      else lower();
+    },
+    [holding, lower, refuse]
+  );
+  const requestClose = useCallback(() => dismiss("close"), [dismiss]);
+  const backdropClose = useBackdropClose(active ? () => dismiss("backdrop") : () => {
+  });
+  useOverlayHistory(active && ownHistoryEntry, () => dismiss("back"), {
+    held: holding,
+    onRefused: () => refuse("back")
   });
-  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: busy });
   useBodyScrollLock(active);
   useFocusTrap(panelRef, { active, initialFocus: "container" });
   const leaving = closing || exiting;
-  const layer = useDismissLayer(active, requestClose);
+  const layer = useDismissLayer(active, () => dismiss("escape"));
   const handleKeyDown = (e) => {
     runOwnKeyDown(e, onKeyDown, layer);
     takeEscape(e);

package/dist/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBreakpoint } from \"../hooks/use-breakpoint\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useDialogParam, type DialogParam } from \"../hooks/use-search-param-state\";\nimport { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from \"../hooks/use-close-transition\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n  // `md:` as the panel's own CSS reads it, at the text size in force: 768 px at Normal,\n  // 960 at Large. `innerWidth >= 768` dragged the bottom sheet of an 800 px window at\n  // Large (refactor audit 2026-10-30, DUP-9). Without `matchMedia` (jsdom), the desktop.\n  const wide = useBreakpoint(\"md\", true);\n\n  const endDrag = () => {\n    from.current = null;\n  };\n\n  return {\n    /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own\n     *  closes, so \"the position resets when the dialog closes\" needs saying. */\n    reset: () => setOffset(null),\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    handlers: !enabled\n      ? undefined\n      : {\n          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n            if (e.button !== 0 || !wide) return;\n            const target = e.target as HTMLElement;\n            // Only the panel itself and its non-interactive chrome start a drag; a\n            // press inside any control belongs to that control.\n            if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n            try {\n              // Capture is what lets the handlers live on the panel: every later\n              // pointer event for this pointer retargets here, so the drag keeps\n              // working once the pointer outruns the panel's own box — which it always\n              // does, since the panel moves out from under it.\n              e.currentTarget.setPointerCapture(e.pointerId);\n            } catch {\n              // jsdom implements no pointer capture, and a browser throws\n              // NotFoundError for a pointerId that is already gone. Neither is worth\n              // refusing the drag: uncaptured, the panel still gets the moves that\n              // land on it.\n            }\n          },\n          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n            const start = from.current;\n            if (!start) return;\n            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n          },\n          onPointerUp: endDrag,\n          // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n          // lost capture both mean no `pointerup` is coming. Without them the drag would\n          // stay \"live\" and the next move over the panel would jump it.\n          onPointerCancel: endDrag,\n          onLostPointerCapture: endDrag,\n        },\n  };\n}\n\n/**\n * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X\n * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the\n * way Escape does — calling `onClose` from inside unmounts with no exit, which is the\n * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.\n */\nexport const ModalCloseContext = createContext<(() => void) | null>(null);\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  /**\n   * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.\n   *\n   * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,\n   * which is every caller before this prop and stays exactly as it was. That idiom has\n   * one blind spot: a close the CALLER decides on (a save that succeeded, a\n   * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,\n   * because there is nothing left to animate. kastlan's `FormModal` was nothing but an\n   * `if (!open) return null` gate in front of this.\n   *\n   * Passed, the component stays mounted while closed and renders nothing, and a flip\n   * to `false` plays the same exit a dismissal does before the panel goes. The focus\n   * trap, the scroll lock and the Back-gesture history entry are held only while\n   * `open` is true — they are released the moment it turns false, so focus is back on\n   * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,\n   * Back, the frame's X) animates first and then calls `onClose`; the `false` that\n   * comes back from it is not animated a second time.\n   *\n   * The body is unmounted once the exit has finished, as it is today, so a form inside\n   * still starts fresh on the next open.\n   */\n  open?: boolean;\n  /** `\"alertdialog\"` for a dialog that interrupts to ask a question the user must\n   *  answer (a confirmation) — screen readers announce it with more urgency. Only the\n   *  two dialog roles are allowed: the panel stays modal either way. */\n  role?: \"dialog\" | \"alertdialog\";\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less\n   * the backdrop's margin, capped at 110rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose\n   * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured\n   * table pasted from a spreadsheet and had patched themselves to\n   * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size=\"lg\"`\n   * and then `max-w-5xl`. The cap is the generous one of the two, because a table\n   * squeezed into a box in the middle of a wide screen is a table scrolled sideways\n   * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.\n   * In rem, so it grows with the text size until the screen stops it.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all four are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\" | \"2xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a\n   * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see\n   * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule\n   * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself\n   * no longer holds the dialog open (Wave 2, DUP-1).\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n  /**\n   * Bind the open state to a URL search param (0.12.0): `\"edit\"` is open while\n   * `?edit` is in the query, `{ key: \"dialog\", value: \"create-lease\" }` while\n   * `?dialog=create-lease` is. The URL is then the only state — `open` is ignored —\n   * and the dialog opens from anywhere that sets the param: {@link useDialogParam}'s\n   * setter, a `<Link>`, a shared link, a reload.\n   *\n   * kastlan's `useDialogParam` did this beside the dialog, so its open state could be\n   * deep-linked and captured in a feedback report. Here it also owns the history:\n   * opening through `useDialogParam` pushes an entry, so the Back gesture closes the\n   * dialog by leaving it, and a close (Escape, the backdrop, the X) goes back over\n   * that entry rather than stacking a second one. The dialog's own Back handling\n   * ({@link useOverlayHistory}'s throwaway entry) stays off in this mode — the param's\n   * entry already is one, and two would take two Back presses to close one dialog.\n   *\n   * `onClose` still runs, after the param is cleared. Requires a react-router Router.\n   */\n  urlParam?: DialogParam;\n  /**\n   * A request the dialog started is in flight: it stays until the caller says otherwise\n   * (refactor audit 2026-10-30, DUP-3). A request that has left cannot be called back by\n   * closing the dialog, and the dialog should not pretend it can.\n   *\n   * While true the panel is `aria-busy`, and every dismissal is refused before the exit\n   * starts — the backdrop, Escape, Back, the frame's X and an `actions(close)` button —\n   * so nothing lowers and snaps back. Five dialogs used to hold Escape by hand, in an\n   * `onKeyDown`, and nothing else: a backdrop press or Android's Back closed four of them\n   * mid-request, and CancelSubscriptionConfirm, which guarded its `onClose`, lowered its\n   * panel and popped it back up.\n   *\n   * Escape still goes to whatever is open over the dialog first (a list, a tooltip); the\n   * press that reaches the dialog's own layer is taken and dropped. A refused Back puts\n   * the dialog's history entry back, so the Back after the request closes the dialog\n   * rather than leaving the page.\n   *\n   * Not held: a close the caller decides on (`open={false}`, unmounting), and — with\n   * `urlParam` — Back, which leaves the param's entry like any other navigation. A close\n   * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one\n   * made from an effect that depends on that close (ReauthDialog's on a resolved submit)\n   * runs again once `busy` turns false, because the close changes with it.\n   */\n  busy?: boolean;\n  /**\n   * The PANEL — the `role=\"dialog\"` element the rest of the props go on, not the\n   * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on\n   * `FullBleedDialog`). Merged with the panel's own ref, which the focus\n   * trap holds. Set while the panel is in the document: `null` while a dialog with\n   * `open={false}` is closed, and after a `urlParam` dialog's param is cleared.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The URL-bound dialog: the param is the open state, and closing clears it. A\n * component of its own so the router hook is only called by a `Modal` that asked for\n * it — a plain `Modal` must keep working with no Router above it.\n */\nfunction UrlParamModal({ urlParam, onClose, ...rest }: ModalProps & { urlParam: DialogParam }) {\n  const [open, setOpen] = useDialogParam(urlParam);\n  // Closed from here the moment the dismissal is decided. Going back is a traversal\n  // the browser lands a task later, and between the two the param still says \"open\":\n  // without this the panel, already lowered, would pop back up for that task.\n  const [leaving, setLeaving] = useState(false);\n  if (leaving && !open) setLeaving(false);\n  return (\n    <ModalPanel\n      {...rest}\n      open={open && !leaving}\n      ownHistoryEntry={false}\n      onClose={() => {\n        setLeaving(true);\n        setOpen(false);\n        onClose();\n      }}\n    />\n  );\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal(props: ModalProps) {\n  return props.urlParam !== undefined ? (\n    <UrlParamModal {...props} urlParam={props.urlParam} />\n  ) : (\n    <ModalPanel {...props} />\n  );\n}\n\nfunction ModalPanel({\n  onClose,\n  open,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n  style,\n  role = \"dialog\",\n  urlParam: _urlParam,\n  busy = false,\n  \"aria-busy\": ariaBusy,\n  ownHistoryEntry = true,\n  ref,\n  ...rest\n}: ModalProps & {\n  /** False when the URL already holds an entry for this dialog — see `urlParam`. */\n  ownHistoryEntry?: boolean;\n}) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  // The caller's `ref` beside the trap's (round 0.35 R4): memoised, so the panel is not\n  // detached and re-attached on every render.\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const drag = useDragOffset(Boolean(draggable));\n  // Without `open`, mounted means open — the constant `true` every hook below used to\n  // be given. With it, `open` itself.\n  const active = open ?? true;\n\n  // Whether the last close came through `requestClose`, i.e. has ALREADY been\n  // animated. Set in the same batch as the caller's `onClose`, so the render that sees\n  // `open` turn false also sees this and does not lower the panel a second time.\n  const [dismissed, setDismissed] = useState(false);\n  // The exit of a close the caller decided on (only reachable with `open`). Adjusted\n  // during render when `open` flips — `Collapse`'s pattern — so the very render that\n  // closes it already paints the `-out` classes rather than a frame of nothing.\n  const [exiting, setExiting] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setDismissed(false);\n    setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());\n    if (open) drag.reset();\n  }\n  useEffect(() => {\n    if (!exiting) return;\n    const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [exiting]);\n\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit unless it passes `open`, which is what that prop is for.\n  const { closing, requestClose: lower } = useCloseTransition(() => {\n    setDismissed(true);\n    onClose();\n  });\n  // `busy` (DUP-3) refuses HERE, before `lower` starts the exit: a refusal in the\n  // caller's `onClose` comes 220ms too late, after the panel has already gone down.\n  // A new function when `busy` flips, so a close asked for from an effect while busy\n  // (a resolved action whose caller's `isPending` trails its promise) runs again.\n  const requestClose = useCallback(() => {\n    if (!busy) lower();\n  }, [busy, lower]);\n  // A panel on its way out after `open` turned false is already closed: a press on\n  // its fading backdrop must not report a second close.\n  const backdropClose = useBackdropClose(active ? requestClose : () => {});\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Held only while open: a closed `open={false}` dialog must not own a history entry.\n  // `held`: a Back while busy is refused, and the entry it took is put back.\n  useOverlayHistory(active && ownHistoryEntry, requestClose, { held: busy });\n\n  // Through the shared hook and not by hand: this component's own save/restore copy\n  // was one half of the pair that left the page permanently unscrollable when a dialog\n  // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(active);\n\n  // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n  // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n  // users. Through the shared hook since this component is where it came from — the\n  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n  // and nesting, none of which this copy had. Released when `open` turns false, which\n  // hands focus back to the trigger while the panel is still on its way out.\n  //\n  // \"The panel itself\" only when nothing inside asked for focus: a field the app\n  // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took\n  // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the\n  // one the app chose to show; the trigger still gets focus back on close.\n  useFocusTrap(panelRef, { active, initialFocus: \"container\" });\n  const leaving = closing || exiting;\n\n  // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a\n  // tooltip opened inside takes the key before the dialog does, wherever focus is —\n  // and the dialog gets it even when focus is not in the panel.\n  const layer = useDismissLayer(active, requestClose);\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler sees Escape only while this dialog is the layer on top: a\n    // tooltip or a list open over it takes that press first (0.35, KS's gear wizard).\n    runOwnKeyDown(e, onKeyDown, layer);\n    // To whatever is on top — this dialog, unless something opened over it — and\n    // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.\n    takeEscape(e);\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  if (!active && !exiting) return null;\n  return createPortal(\n    <div\n      // Out of the accessibility tree for the length of a caller-driven exit: focus is\n      // already back on the page, and an `aria-modal` panel that is leaving would hide\n      // that page from a screen reader for 220ms. Not `inert` — that would let a tap\n      // fall through the fading backdrop to the row underneath.\n      aria-hidden={exiting || undefined}\n      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):\n      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.\n      data-kit-layer=\"backdrop\"\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        leaving ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- always\n          role=\"dialog\" or \"alertdialog\" (the ternary hides that from the rule): `onKeyDown`\n          is Escape-to-close per the APG dialog pattern, and the drag handlers are\n          swipe-to-dismiss, whose keyboard path is that same Escape. */}\n      <div\n        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n        // wrapper that spreads its own props through to this one cannot then take away\n        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n        // losing any of the three is silent, and the symptom (a dialog a screen reader\n        // walks straight out of) shows up nowhere near the call site that caused it.\n        {...rest}\n        ref={setPanel}\n        // Normalised at runtime too: an untyped caller's `role=\"presentation\"` must not\n        // take the dialog role away (props-passthrough pins that).\n        role={role === \"alertdialog\" ? \"alertdialog\" : \"dialog\"}\n        aria-modal=\"true\"\n        // A caller's own `aria-busy` (a preview still loading) is kept beside `busy`.\n        aria-busy={busy ? true : ariaBusy}\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        {...drag.handlers}\n        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n        // assigning it outright would drop a caller's own `style` on every render but\n        // the ones where the panel is being dragged.\n        style={{ ...style, ...drag.style }}\n        className={cn(\n          leaving ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\", \"2xl\": \"max-w-[110rem]\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/modal.tsx"],"sourcesContent":["import { createContext, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MouseEvent as ReactMouseEvent,\n  PointerEvent as ReactPointerEvent,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { useBreakpoint } from \"../hooks/use-breakpoint\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useDialogParam, type DialogParam } from \"../hooks/use-search-param-state\";\nimport { OVERLAY_EXIT_MS, skipsExitAnimation, useCloseTransition } from \"../hooks/use-close-transition\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer } from \"../hooks/use-dismiss\";\n\n/**\n * Drag the panel by its top strip, in pointer space (dev#460).\n *\n * Deliberately not a library and not persisted: the offset is component state that\n * dies with the dialog. It starts only on a press that lands on the panel's own\n * chrome — never on a field, a button or a link, which is what keeps \"drag to select\n * text in the textarea\" working. Above `md` only: below it the panel is a\n * full-width bottom sheet with nothing beside it to uncover.\n *\n * The whole gesture stays on the PANEL — captured pointer, React handlers — rather than\n * on `window`. The first shape of this added `pointermove`/`pointerup` to `window` from\n * inside the `pointerdown` handler and took them off again from the `pointerup` handler,\n * so the teardown ran only if the gesture ended: React never sees a listener added from\n * an event handler, and an unmount mid-drag left a live `pointermove` on `window` for\n * the life of the page, pinning this hook's state with it. The one caller that enables\n * dragging is the feedback composer, which closes ITSELF on submit — a Ctrl+Enter sent\n * with the pointer still down is exactly that order of events, once per drag.\n */\nfunction useDragOffset(enabled: boolean) {\n  const [offset, setOffset] = useState<{ x: number; y: number } | null>(null);\n  const from = useRef<{ x: number; y: number; ox: number; oy: number } | null>(null);\n  // `md:` as the panel's own CSS reads it, at the text size in force: 768 px at Normal,\n  // 960 at Large. `innerWidth >= 768` dragged the bottom sheet of an 800 px window at\n  // Large (refactor audit 2026-10-30, DUP-9). Without `matchMedia` (jsdom), the desktop.\n  const wide = useBreakpoint(\"md\", true);\n\n  const endDrag = () => {\n    from.current = null;\n  };\n\n  return {\n    /** Back to where the panel opens. A `Modal` with an `open` prop outlives its own\n     *  closes, so \"the position resets when the dialog closes\" needs saying. */\n    reset: () => setOffset(null),\n    style: offset ? { transform: `translate(${offset.x}px, ${offset.y}px)` } : undefined,\n    handlers: !enabled\n      ? undefined\n      : {\n          onPointerDown: (e: ReactPointerEvent<HTMLDivElement>) => {\n            if (e.button !== 0 || !wide) return;\n            const target = e.target as HTMLElement;\n            // Only the panel itself and its non-interactive chrome start a drag; a\n            // press inside any control belongs to that control.\n            if (target.closest(\"input,textarea,select,button,a,[role='button']\")) return;\n            from.current = { x: e.clientX, y: e.clientY, ox: offset?.x ?? 0, oy: offset?.y ?? 0 };\n            try {\n              // Capture is what lets the handlers live on the panel: every later\n              // pointer event for this pointer retargets here, so the drag keeps\n              // working once the pointer outruns the panel's own box — which it always\n              // does, since the panel moves out from under it.\n              e.currentTarget.setPointerCapture(e.pointerId);\n            } catch {\n              // jsdom implements no pointer capture, and a browser throws\n              // NotFoundError for a pointerId that is already gone. Neither is worth\n              // refusing the drag: uncaptured, the panel still gets the moves that\n              // land on it.\n            }\n          },\n          onPointerMove: (e: ReactPointerEvent<HTMLDivElement>) => {\n            const start = from.current;\n            if (!start) return;\n            setOffset({ x: start.ox + e.clientX - start.x, y: start.oy + e.clientY - start.y });\n          },\n          onPointerUp: endDrag,\n          // A cancel (the browser taking the pointer for a scroll or a gesture) and a\n          // lost capture both mean no `pointerup` is coming. Without them the drag would\n          // stay \"live\" and the next move over the panel would jump it.\n          onPointerCancel: endDrag,\n          onLostPointerCapture: endDrag,\n        },\n  };\n}\n\n/**\n * The panel's own ANIMATED dismissal, for chrome rendered inside it. `DialogFrame`'s X\n * and its `actions(close)` read this, so a Cancel or an X lowers the panel exactly the\n * way Escape does — calling `onClose` from inside unmounts with no exit, which is the\n * documented limit of {@link useCloseTransition}. `null` outside a `Modal`.\n */\nexport const ModalCloseContext = createContext<(() => void) | null>(null);\n\n/**\n * Backdrop handlers that close only when a press starts AND ends on the\n * backdrop itself. A plain onClick fires on mouseup, so dragging a text\n * selection that starts inside the panel and releases over the backdrop would\n * dismiss the dialog (feedback #254) — and the reverse drag would too, since\n * click targets the common ancestor of the down/up elements.\n */\nexport function useBackdropClose(onClose: () => void) {\n  const pressStartedOnBackdrop = useRef(false);\n  return {\n    onMouseDown: (e: ReactMouseEvent<HTMLDivElement>) => {\n      pressStartedOnBackdrop.current = e.target === e.currentTarget;\n    },\n    onMouseUp: (e: ReactMouseEvent<HTMLDivElement>) => {\n      const started = pressStartedOnBackdrop.current;\n      pressStartedOnBackdrop.current = false;\n      if (started && e.target === e.currentTarget) onClose();\n    },\n  };\n}\n\n// Tab-cycle target set: the interactive descendants the focus trap rotates\n// through. Querying live (per keystroke) means dynamically rendered fields are\n// included automatically.\n/**\n * `extends ComponentPropsWithoutRef<\"div\">` so anything a `<div>` takes reaches the\n * PANEL — the element with `role=\"dialog\"`, which is the one a consumer means. That is\n * where a `data-tour` anchor, a test id, an `aria-describedby` or an `aria-label` has\n * to land; before this, a closed prop list dropped all four silently (audit §api-design).\n */\nexport interface ModalProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"role\"> {\n  /** Invoked on backdrop click and on Escape. */\n  onClose: () => void;\n  /**\n   * Who decides whether the dialog is up, when the caller wants to keep it MOUNTED.\n   *\n   * Left out, the dialog is open for as long as it is mounted — `{open && <Modal/>}`,\n   * which is every caller before this prop and stays exactly as it was. That idiom has\n   * one blind spot: a close the CALLER decides on (a save that succeeded, a\n   * `setOpen(false)` from outside) unmounts the panel on the spot, with no exit,\n   * because there is nothing left to animate. kastlan's `FormModal` was nothing but an\n   * `if (!open) return null` gate in front of this.\n   *\n   * Passed, the component stays mounted while closed and renders nothing, and a flip\n   * to `false` plays the same exit a dismissal does before the panel goes. The focus\n   * trap, the scroll lock and the Back-gesture history entry are held only while\n   * `open` is true — they are released the moment it turns false, so focus is back on\n   * the trigger while the panel is still lowering. A dismissal (Escape, the backdrop,\n   * Back, the frame's X) animates first and then calls `onClose`; the `false` that\n   * comes back from it is not animated a second time.\n   *\n   * The body is unmounted once the exit has finished, as it is today, so a form inside\n   * still starts fresh on the next open.\n   */\n  open?: boolean;\n  /** `\"alertdialog\"` for a dialog that interrupts to ask a question the user must\n   *  answer (a confirmation) — screen readers announce it with more urgency. Only the\n   *  two dialog roles are allowed: the panel stays modal either way. */\n  role?: \"dialog\" | \"alertdialog\";\n  children: ReactNode;\n  /**\n   * Panel max-width: `md` (28rem), `lg` (32rem), `xl` (48rem), `2xl` (the display less\n   * the backdrop's margin, capped at 110rem).\n   *\n   * `xl` exists because two callers had already written `className=\"max-w-3xl\"` to\n   * reach it — the payee backfill's preview table and the price-merge dialog, both\n   * of which hold a list and several fields rather than one question. A caller\n   * patching a missing size IS the signal that the size is missing, and a\n   * hand-written width in a `className` is a width nothing else can line up with.\n   *\n   * `2xl` is the same signal one size up (round 0.34 C3, KS U1): a dialog whose\n   * content is a TABLE to be read. Kurvenschmiede's five part dialogs hold a measured\n   * table pasted from a spreadsheet and had patched themselves to\n   * `w-[min(110rem,94vw)] max-w-none`; Keksdose's report drilldown passed `size=\"lg\"`\n   * and then `max-w-5xl`. The cap is the generous one of the two, because a table\n   * squeezed into a box in the middle of a wide screen is a table scrolled sideways\n   * (KS feedback #16); below the cap the panel is as wide as the backdrop lets it be.\n   * In rem, so it grows with the text size until the screen stops it.\n   *\n   * The panel is `w-full` under every one of them, so the cap only bites once the\n   * viewport is wider than it: on a phone all four are the same full-width bottom\n   * sheet. Nothing here may introduce a `min-w-*`, which is what would break that.\n   */\n  size?: \"md\" | \"lg\" | \"xl\" | \"2xl\";\n  /** Extra classes for the panel (e.g. `space-y-3` for form content spacing). */\n  className?: string;\n  /** id of the heading element, wired to `aria-labelledby`. */\n  labelledBy?: string;\n  /**\n   * Extra key handling on the panel (e.g. Ctrl/Cmd+Enter to submit). Runs first; a\n   * `preventDefault()` on Escape HERE keeps the dialog open — the owner's claim (see\n   * `use-dismiss.ts`). One a field inside makes does not, since 0.34: the rule\n   * `FullBleedDialog` already had, so a search box keeping Chromium from clearing itself\n   * no longer holds the dialog open (Wave 2, DUP-1).\n   */\n  onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void;\n  /**\n   * Drop the backdrop's mobile margin so the panel can reach the screen edges\n   * (a full-screen sheet on phones). The panel still needs its own\n   * `h-[100dvh] max-w-full rounded-none` classes via `className` to fill it; the\n   * desktop `md:p-4` margin is kept. Defaults to false (padded on all sizes).\n   */\n  fullBleed?: boolean;\n  /**\n   * Let the user drag the panel out of the way by its top edge (Keksdose feedback\n   * dev#460: *\"Make the feedback dialog draggable so I can see behind it if it\n   * blocks something.\"*).\n   *\n   * Opt-in, because it only makes sense for a dialog whose content is ABOUT the page\n   * behind it — the feedback composer is the case, an ordinary form is not, and a\n   * draggable panel that has nothing to reveal is a control that can only get lost.\n   *\n   * Pointer-only by design: it is a \"move this out of the way\" gesture, not a layout\n   * choice worth persisting, and the position resets when the dialog closes. On a\n   * phone the panel is a bottom sheet the width of the screen, so dragging is\n   * suppressed there — there is nothing beside it to see.\n   */\n  draggable?: boolean;\n  /**\n   * Bind the open state to a URL search param (0.12.0): `\"edit\"` is open while\n   * `?edit` is in the query, `{ key: \"dialog\", value: \"create-lease\" }` while\n   * `?dialog=create-lease` is. The URL is then the only state — `open` is ignored —\n   * and the dialog opens from anywhere that sets the param: {@link useDialogParam}'s\n   * setter, a `<Link>`, a shared link, a reload.\n   *\n   * kastlan's `useDialogParam` did this beside the dialog, so its open state could be\n   * deep-linked and captured in a feedback report. Here it also owns the history:\n   * opening through `useDialogParam` pushes an entry, so the Back gesture closes the\n   * dialog by leaving it, and a close (Escape, the backdrop, the X) goes back over\n   * that entry rather than stacking a second one. The dialog's own Back handling\n   * ({@link useOverlayHistory}'s throwaway entry) stays off in this mode — the param's\n   * entry already is one, and two would take two Back presses to close one dialog.\n   *\n   * `onClose` still runs, after the param is cleared. Requires a react-router Router.\n   */\n  urlParam?: DialogParam;\n  /**\n   * A request the dialog started is in flight: it stays until the caller says otherwise\n   * (refactor audit 2026-10-30, DUP-3). A request that has left cannot be called back by\n   * closing the dialog, and the dialog should not pretend it can.\n   *\n   * While true the panel is `aria-busy`, and every dismissal is refused before the exit\n   * starts — the backdrop, Escape, Back, the frame's X and an `actions(close)` button —\n   * so nothing lowers and snaps back. Five dialogs used to hold Escape by hand, in an\n   * `onKeyDown`, and nothing else: a backdrop press or Android's Back closed four of them\n   * mid-request, and CancelSubscriptionConfirm, which guarded its `onClose`, lowered its\n   * panel and popped it back up.\n   *\n   * Escape still goes to whatever is open over the dialog first (a list, a tooltip); the\n   * press that reaches the dialog's own layer is taken and dropped. A refused Back puts\n   * the dialog's history entry back, so the Back after the request closes the dialog\n   * rather than leaving the page.\n   *\n   * Not held: a close the caller decides on (`open={false}`, unmounting), and — with\n   * `urlParam` — Back, which leaves the param's entry like any other navigation. A close\n   * the dialog asks for itself through `ModalCloseContext` while busy is refused too; one\n   * made from an effect that depends on that close (ReauthDialog's on a resolved submit)\n   * runs again once `busy` turns false, because the close changes with it.\n   *\n   * A dialog that must not be dismissed while NOTHING runs — a code shown once — wants\n   * {@link ModalProps.held} instead: the same hold without the request. Either way, each\n   * refused press is reported to {@link ModalProps.onDismissRefused}.\n   */\n  busy?: boolean;\n  /**\n   * Hold the dialog open: every dismissal `busy` refuses is refused — the backdrop,\n   * Escape, Back, the frame's X and an `actions(close)` button — but no request is\n   * claimed: the panel is not `aria-busy`. For a dialog the user must not lose by\n   * accident while nothing is in flight (keksdose audit follow-up, 2026-11-01): keksdose's\n   * one-time recovery code (auth/recovery-code-pane.tsx) refused in its own `onClose`,\n   * which comes after the exit has started and cannot hold Back — the first Back spent\n   * the dialog's history entry, and the second left the page, and the code with it.\n   * Held, a refused Back puts the entry back, so every Back is held, not only the first.\n   * The refusal is silent, as under `busy` — `onClose` is not called — so what the\n   * dialog is waiting for is said up front; an app that also answers the refused press\n   * hears it through {@link ModalProps.onDismissRefused}.\n   *\n   * The way out is a close the CALLER decides on, which is never held: `open={false}`\n   * (the exit still plays) or unmounting, from the dialog's own \"I have saved it\" button.\n   * Not the `close` that `actions` and `headerActions` receive — that is the dialog's\n   * own dismissal, and held like the rest.\n   *\n   * `DialogFrame`'s X is DISABLED while held, where under `busy` it stays enabled and its\n   * press is dropped: a request is over in a moment, a hold lasts until the user acts,\n   * and an X that does nothing for that long reads as broken. Disabled rather than\n   * hidden, so the header does not reflow the moment the hold lifts; a caller that wants\n   * it gone passes `closeButton={!held}`. Independent of `busy`: either one holds.\n   */\n  held?: boolean;\n  /**\n   * Called when `busy` or `held` refuses a dismissal — once per refused attempt, with\n   * the way it came: `\"backdrop\"`, `\"escape\"`, `\"back\"` (the platform Back) or `\"close\"`\n   * (the frame's X, a `close` that `actions` or `headerActions` received, any close\n   * through `ModalCloseContext`). `onClose` is still not called; the dialog stays.\n   *\n   * 0.54 follow-up: keksdose's recovery-code dialog (auth/recovery-code-pane.tsx) showed\n   * a \"why won't it close\" banner after a refused press, from its own refusing\n   * `onClose`. Moving to `held` lost it, since a held press never reaches `onClose`;\n   * this is where the app hears it again, and from Back too, which its `onClose` could\n   * only hear once.\n   *\n   * Only refusals: not a dismissal that goes through, not a close the caller decides on,\n   * not an Escape a layer over the dialog or the owner's `onKeyDown` claim took first,\n   * not a press on a panel already on its way out. Held, the frame's X is disabled and\n   * cannot be pressed; under `busy` it reports `\"close\"`. With `urlParam`, Back is never\n   * held, so never reported. A Back is reported after its history entry is put back.\n   */\n  onDismissRefused?: (via: \"backdrop\" | \"escape\" | \"back\" | \"close\") => void;\n  /**\n   * The PANEL — the `role=\"dialog\"` element the rest of the props go on, not the\n   * backdrop around it (0.35, round 0.35 R4, the follow-up to API-2; as on\n   * `FullBleedDialog`). Merged with the panel's own ref, which the focus\n   * trap holds. Set while the panel is in the document: `null` while a dialog with\n   * `open={false}` is closed, and after a `urlParam` dialog's param is cleared.\n   */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/** The way a dismissal came, as {@link ModalProps.onDismissRefused} names it. */\ntype DismissedVia = Parameters<NonNullable<ModalProps[\"onDismissRefused\"]>>[0];\n\n/**\n * The URL-bound dialog: the param is the open state, and closing clears it. A\n * component of its own so the router hook is only called by a `Modal` that asked for\n * it — a plain `Modal` must keep working with no Router above it.\n */\nfunction UrlParamModal({ urlParam, onClose, ...rest }: ModalProps & { urlParam: DialogParam }) {\n  const [open, setOpen] = useDialogParam(urlParam);\n  // Closed from here the moment the dismissal is decided. Going back is a traversal\n  // the browser lands a task later, and between the two the param still says \"open\":\n  // without this the panel, already lowered, would pop back up for that task.\n  const [leaving, setLeaving] = useState(false);\n  if (leaving && !open) setLeaving(false);\n  return (\n    <ModalPanel\n      {...rest}\n      open={open && !leaving}\n      ownHistoryEntry={false}\n      onClose={() => {\n        setLeaving(true);\n        setOpen(false);\n        onClose();\n      }}\n    />\n  );\n}\n\n/**\n * Centered (bottom-sheet on mobile) modal dialog: dimmed backdrop, single\n * rounded panel. Owns the overlay mechanics that the hand-rolled dialogs each\n * re-implemented or lacked — backdrop-click + Escape to close, the platform Back\n * gesture (Keksdose feedback #172), background scroll lock (feedback #204), focus\n * into the panel on open and back to the trigger on close, a Tab focus trap, and\n * `role=\"dialog\"`/`aria-modal`.\n */\nexport function Modal(props: ModalProps) {\n  return props.urlParam !== undefined ? (\n    <UrlParamModal {...props} urlParam={props.urlParam} />\n  ) : (\n    <ModalPanel {...props} />\n  );\n}\n\nfunction ModalPanel({\n  onClose,\n  open,\n  children,\n  size = \"md\",\n  className,\n  labelledBy,\n  onKeyDown,\n  fullBleed,\n  draggable,\n  style,\n  role = \"dialog\",\n  urlParam: _urlParam,\n  busy = false,\n  held = false,\n  onDismissRefused,\n  \"aria-busy\": ariaBusy,\n  ownHistoryEntry = true,\n  ref,\n  ...rest\n}: ModalProps & {\n  /** False when the URL already holds an entry for this dialog — see `urlParam`. */\n  ownHistoryEntry?: boolean;\n}) {\n  const panelRef = useRef<HTMLDivElement>(null);\n  // The caller's `ref` beside the trap's (round 0.35 R4): memoised, so the panel is not\n  // detached and re-attached on every render.\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [ref]);\n  const drag = useDragOffset(Boolean(draggable));\n  // Without `open`, mounted means open — the constant `true` every hook below used to\n  // be given. With it, `open` itself.\n  const active = open ?? true;\n\n  // Whether the last close came through `requestClose`, i.e. has ALREADY been\n  // animated. Set in the same batch as the caller's `onClose`, so the render that sees\n  // `open` turn false also sees this and does not lower the panel a second time.\n  const [dismissed, setDismissed] = useState(false);\n  // The exit of a close the caller decided on (only reachable with `open`). Adjusted\n  // during render when `open` flips — `Collapse`'s pattern — so the very render that\n  // closes it already paints the `-out` classes rather than a frame of nothing.\n  const [exiting, setExiting] = useState(false);\n  const [prevOpen, setPrevOpen] = useState(open);\n  if (open !== prevOpen) {\n    setPrevOpen(open);\n    setDismissed(false);\n    setExiting(open === false && prevOpen === true && !dismissed && !skipsExitAnimation());\n    if (open) drag.reset();\n  }\n  useEffect(() => {\n    if (!exiting) return;\n    const timer = setTimeout(() => setExiting(false), OVERLAY_EXIT_MS);\n    return () => clearTimeout(timer);\n  }, [exiting]);\n\n  // The panel lowers itself before the caller unmounts it (live #320 rework). Every\n  // dismissal below goes through `requestClose`; `onClose` still does the closing, one\n  // animation later. A caller that closes the dialog ITSELF — after a save, say —\n  // unmounts with no exit unless it passes `open`, which is what that prop is for.\n  const { closing, requestClose: lower } = useCloseTransition(() => {\n    setDismissed(true);\n    onClose();\n  });\n  // `busy` (DUP-3) and `held` refuse HERE, before `lower` starts the exit: a refusal in\n  // the caller's `onClose` comes 220ms too late, after the panel has already gone down.\n  // A new function when the hold flips, so a close asked for from an effect while busy\n  // (a resolved action whose caller's `isPending` trails its promise) runs again.\n  const holding = busy || held;\n  // A refused dismissal is reported with the way it came (`onDismissRefused`, 0.54\n  // follow-up). Both read live, as `onClose` is: an inline `onDismissRefused` must not\n  // hand the chrome a new `close` every render, which would re-run an effect that depends\n  // on it (ReauthDialog's). Not while the panel is on its way out: a press then is moot.\n  const refusedRef = useRef(onDismissRefused);\n  const openRef = useRef(active);\n  useEffect(() => {\n    refusedRef.current = onDismissRefused;\n    openRef.current = active;\n  });\n  const refuse = useCallback((via: DismissedVia) => {\n    if (openRef.current) refusedRef.current?.(via);\n  }, []);\n  const dismiss = useCallback(\n    (via: DismissedVia) => {\n      if (holding) refuse(via);\n      else lower();\n    },\n    [holding, lower, refuse],\n  );\n  // The close the panel's own chrome calls (`ModalCloseContext`): the frame's X, the\n  // `close` its `actions` and `headerActions` receive.\n  const requestClose = useCallback(() => dismiss(\"close\"), [dismiss]);\n  // A panel on its way out after `open` turned false is already closed: a press on\n  // its fading backdrop must not report a second close.\n  const backdropClose = useBackdropClose(active ? () => dismiss(\"backdrop\") : () => {});\n  // Back means the same as Escape here. On a phone Escape doesn't exist, so without\n  // this the only way out of a dialog is finding its close button — and Back, the\n  // gesture everyone reaches for, navigated the page underneath instead (#172).\n  // Held only while open: a closed `open={false}` dialog must not own a history entry.\n  // `held`: a Back while busy or held is refused, and the entry it took is put back.\n  useOverlayHistory(active && ownHistoryEntry, () => dismiss(\"back\"), {\n    held: holding,\n    onRefused: () => refuse(\"back\"),\n  });\n\n  // Through the shared hook and not by hand: this component's own save/restore copy\n  // was one half of the pair that left the page permanently unscrollable when a dialog\n  // containing an open sheet was closed — see the note in use-body-scroll-lock.ts.\n  useBodyScrollLock(active);\n\n  // Focus the panel itself (not the first field) so opening doesn't pop the mobile\n  // keyboard, while still moving focus into the dialog for keyboard and screen-reader\n  // users. Through the shared hook since this component is where it came from — the\n  // hook adds per-keystroke recomputation, a guard on restoring to a detached node,\n  // and nesting, none of which this copy had. Released when `open` turns false, which\n  // hands focus back to the trigger while the panel is still on its way out.\n  //\n  // \"The panel itself\" only when nothing inside asked for focus: a field the app\n  // autofocuses on purpose keeps it (0.33.1, keksdose live #402 — the same trap took\n  // an autofocused amount straight back in `FullBleedDialog`). Its keyboard is then the\n  // one the app chose to show; the trigger still gets focus back on close.\n  useFocusTrap(panelRef, { active, initialFocus: \"container\" });\n  const leaving = closing || exiting;\n\n  // One layer on the Escape stack while open (Wave 2, DUP-1): a list, a popover or a\n  // tooltip opened inside takes the key before the dialog does, wherever focus is —\n  // and the dialog gets it even when focus is not in the panel.\n  const layer = useDismissLayer(active, () => dismiss(\"escape\"));\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler sees Escape only while this dialog is the layer on top: a\n    // tooltip or a list open over it takes that press first (0.35, KS's gear wizard).\n    runOwnKeyDown(e, onKeyDown, layer);\n    // To whatever is on top — this dialog, unless something opened over it — and\n    // stopped here. Tab containment lives in useFocusTrap, which listens on the panel.\n    takeEscape(e);\n  };\n\n  // Portal to <body> so the `fixed inset-0 z-50` overlay escapes whatever stacking\n  // context its caller sits in. Rendered inline, a modal opened from e.g. the top\n  // bar (a z-30 context) could paint BELOW a sibling z-30 sticky element like the\n  // expanded transaction editor (feedback #320). The tour/command-palette overlays\n  // already portal for the same reason.\n  if (!active && !exiting) return null;\n  return createPortal(\n    <div\n      // Out of the accessibility tree for the length of a caller-driven exit: focus is\n      // already back on the page, and an `aria-modal` panel that is leaving would hide\n      // that page from a screen reader for 220ms. Not `inert` — that would let a tap\n      // fall through the fading backdrop to the row underneath.\n      aria-hidden={exiting || undefined}\n      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6):\n      // a backdrop, so the tour measures the panel inside it to tell a full-screen sheet.\n      data-kit-layer=\"backdrop\"\n      className={cn(\n        // Live #320. The panel below rises only where it is bottom-anchored: from md up\n        // it is centred, and a centred box sliding up from off-screen reads as a\n        // different component arriving rather than as the same one settling.\n        leaving ? \"animate-overlay-out\" : \"animate-overlay\",\n        \"fixed inset-0 z-50 flex items-end justify-center bg-black/40 md:items-center\",\n        fullBleed ? \"p-0 md:p-4\" : \"p-4\",\n      )}\n      {...backdropClose}\n    >\n      {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- always\n          role=\"dialog\" or \"alertdialog\" (the ternary hides that from the rule): `onKeyDown`\n          is Escape-to-close per the APG dialog pattern, and the drag handlers are\n          swipe-to-dismiss, whose keyboard path is that same Escape. */}\n      <div\n        // `...rest` FIRST, everything the dialog needs to be a dialog after it. A\n        // wrapper that spreads its own props through to this one cannot then take away\n        // the role, the modality or the `tabIndex={-1}` that `useFocusTrap` needs —\n        // losing any of the three is silent, and the symptom (a dialog a screen reader\n        // walks straight out of) shows up nowhere near the call site that caused it.\n        {...rest}\n        ref={setPanel}\n        // Normalised at runtime too: an untyped caller's `role=\"presentation\"` must not\n        // take the dialog role away (props-passthrough pins that).\n        role={role === \"alertdialog\" ? \"alertdialog\" : \"dialog\"}\n        aria-modal=\"true\"\n        // A caller's own `aria-busy` (a preview still loading) is kept beside `busy`.\n        aria-busy={busy ? true : ariaBusy}\n        aria-labelledby={labelledBy}\n        tabIndex={-1}\n        onKeyDown={handleKeyDown}\n        {...drag.handlers}\n        // MERGED, not replaced: `drag.style` is undefined until a drag starts, so\n        // assigning it outright would drop a caller's own `style` on every render but\n        // the ones where the panel is being dragged.\n        style={{ ...style, ...drag.style }}\n        className={cn(\n          leaving ? \"animate-sheet-out md:animate-none\" : \"animate-sheet md:animate-none\",\n          \"w-full rounded-lg border border-subtle bg-surface shadow-sm outline-none\",\n          { md: \"max-w-md\", lg: \"max-w-lg\", xl: \"max-w-3xl\", \"2xl\": \"max-w-[110rem]\" }[size],\n          // A panel taller than the screen has to scroll ITSELF. The backdrop is\n          // `fixed inset-0` and the body is scroll-locked while a dialog is open, so\n          // without this the overflow simply had nowhere to go: on a phone the panel\n          // is bottom-anchored, so it grew UPWARD past the top edge and the part that\n          // went past it could not be reached by any gesture (Keksdose live #254, on\n          // the price-merge dialog — but it was every dialog with more than a screen\n          // of content). `max-h-full` resolves against the backdrop's content box,\n          // which is the viewport minus its own padding, so the panel stops exactly\n          // where the screen does; `overscroll-contain` keeps the fling inside it.\n          //\n          // Three callers had already patched themselves with `max-h-[90vh]` +\n          // an inner scroller. Those still win — `cn` is tailwind-merge — and this is\n          // the default they should not have needed.\n          \"max-h-full overflow-y-auto overscroll-contain\",\n          \"p-4\",\n          // The grab affordance sits on the panel's own top strip: a drag handle of\n          // its own would be one more control in a dialog that is mostly one field.\n          draggable && \"md:[&>*:first-child]:cursor-grab\",\n          className,\n        )}\n      >\n        <ModalCloseContext.Provider value={requestClose}>{children}</ModalCloseContext.Provider>\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/month-picker.d.ts

@@ -179,4 +179,4 @@ export interface MonthPickerProps extends Omit<ComponentPropsWithoutRef<"div">,
  * and a year list in two popovers). The grid does both jobs — the year arrows and
  * PageUp/PageDown cover what the year list did, without a fixed ±5-year window.
  */
-export declare function MonthPicker(props: MonthPickerProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+export declare function MonthPicker(props: MonthPickerProps): import("react").JSX.Element;

package/dist/components/month-picker.js

@@ -4,7 +4,8 @@ import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { Calendar, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { dirOf, horizontalStep } from "../lib/direction.js";
-import { monthKey, pad } from "../lib/dates.js";
+import { currentDate, monthKey, pad } from "../lib/dates.js";
+import { returnFocus } from "../lib/focus-left.js";
 import { upperFirst } from "../lib/text-case.js";
 import { Button } from "./button.js";
 import { FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER } from "./field-base.js";
@@ -18,7 +19,7 @@ import {
   FieldBox,
   FieldLabelLine,
   LABEL_ABOVE_BOX,
-  LockedReason,
+  LockFrame,
   mergeDescribedBy,
   mergeRefs,
   useFieldMessages,
@@ -63,8 +64,7 @@ function useFocusBackOnClose(open, triggerRef) {
     const justClosed = wasOpen.current && !open;
     wasOpen.current = open;
     if (!justClosed) return;
-    const active = document.activeElement;
-    if (!active || active === document.body) triggerRef.current?.focus();
+    returnFocus({ opener: triggerRef.current });
   }, [open, triggerRef]);
 }
 function useTriggerRef(triggerRef, fieldRef) {
@@ -414,7 +414,7 @@ function MonthPicker(props) {
   const maxKey = boundKey(max);
   const minYear = parseYear(min);
   const maxYear = parseYear(max);
-  const currentKey = boundKey(currentMonth) ?? monthKey(/* @__PURE__ */ new Date());
+  const currentKey = boundKey(currentMonth) ?? monthKey(currentDate());
   const currentYear = parseYear(currentKey);
   const shownKey = years ? selectedYear !== null ? String(selectedYear) : null : selected ? toKey(selected) : null;
   const triggerText = shownKey ? formatOptions === void 0 && fromProvider?.(shownKey, { unit: years ? "year" : "month", source: "monthPicker", locale, weekday: false }) || upperFirst(
@@ -445,7 +445,7 @@ function MonthPicker(props) {
     "aria-describedby": mergeDescribedBy(ownAria["aria-describedby"], reasonId)
   };
   const rootClass = locked ? void 0 : className;
-  const withReason = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: cn("block", className), children: box }) : box;
+  const withReason = (box) => /* @__PURE__ */ jsx(LockFrame, { lock, display: disabledReasonDisplay, className, children: box });
   const labelId = `${id}-label`;
   const valueId = `${id}-value`;
   const panelId = `${id}-panel`;