@eifi1/ui-kit 0.51.7 → 0.53.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/date-picker.tsx"],"sourcesContent":["import type { ComponentType } from \"react\";\nimport { CalendarClock, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { addDaysIso } from \"../lib/dates\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport { FIELD_BASE } from \"./field-base\";\nimport { FieldBox, useFieldMessages } from \"./field-parts\";\nimport { Tooltip } from \"./tooltip\";\nimport { DateField, useDatePickerLabels, useTriggerFormat, withEndHint, type DatePickerBaseProps } from \"./date-field\";\nimport { PanelCalendar } from \"./jump-calendar\";\n// The shared field, the month-jump calendar and the range picker live in date-field.tsx,\n// jump-calendar.tsx and date-range-picker.tsx (MOD-9); their public names are still this\n// module's, so the barrel exports them as before.\nexport type { DateTriggerAttributes } from \"./date-field\";\nexport { DateRangePicker } from \"./date-range-picker\";\nexport type {\n  DateRangeCommit,\n  DateRangeDraftSummary,\n  DateRangePickerPreset,\n  DateRangePickerProps,\n  DateRangeTriggerRenderProps,\n} from \"./date-range-picker\";\n\n/**\n * The ‹ date › (today) row on a phone at Large and Extra large (0.32.1, the 360 px\n * Extra-large sweep; docs/text-size-harmonization.md §4): the field takes the first line\n * on its own, whole and with all four corners, and the buttons share the line under it\n * as one joined strip. Three 2.5rem buttons are 180 px at 150 %, and on a 360 px phone\n * they left the field 84 px — \"Book… 0\" for \"Booking date 07/09/2026\" — where a 360 px\n * row would hold the date only by cutting it. `large:max-sm:`, the scaled phone width,\n * so a tablet or a desktop at Large keeps the one row, and Normal is unchanged.\n */\nconst STEP_ROW_STACK_AT_LARGE = cn(\n  \"large:max-sm:flex-wrap large:max-sm:gap-y-2\",\n  \"large:max-sm:[&>[data-slot=date-step-field]]:order-first large:max-sm:[&>[data-slot=date-step-field]]:basis-full\",\n  \"large:max-sm:[&>[data-slot=date-step-field]]:ms-0 large:max-sm:[&_[role=combobox]]:rounded-md\",\n  // The buttons (each in its tooltip's wrapper) share the line under the field.\n  \"large:max-sm:[&>span]:flex-1 large:max-sm:[&>span>button]:w-full\",\n);\n\n// The focused part of the ‹ date › (today) row framed 2px wide, not 1 (keksdose live\n// #394, fourth round; kk K5). The row raises the focused part over the neighbour it\n// overlaps (`[&>*:focus-within]:z-20`), so all four of its sides are its own brand\n// border — but at a fractional device-pixel ratio a 1px line covers 1.25 device pixels\n// (at 125 %), and on whichever sides fall across a pixel boundary it is spread over two\n// pixels at partial strength: ‹'s left side and the date field's right read grey beside\n// the crisp ones (dark theme, measured: 82,87,146 against 139,147,248).\n//\n// A 1px INSET ring in the focus colour beside the 1px border doubles the line inward, so\n// every side keeps at least one fully covered device pixel at any scale — FIELD_INVALID's\n// border-plus-ring, for the same reason (live #295). A box-shadow, and inset: nothing\n// outside the part moves or is covered. `focus`, not `focus-visible`, as the row's\n// raise: a tap focuses too.\n//\n// 0.34 drew it here, on the parts — `focus:ring-1 focus:ring-inset` on each step and\n// `[&_[role=combobox]:focus]:…` from the row — and the K5 follow-up then moved that very\n// ring into FIELD_BASE for every field (keksdose run 78). Each part of this row is\n// FIELD_BASE, the steps directly and the trigger through FIELD_TRIGGER, so the copies went\n// (round 0.34 Wave 2). Not on every button in the row: keksdose's local fix\n// (`[&_button:focus]:ring-1 [&_button:focus]:ring-inset` on the row) also reached the\n// label's \"?\" and thinned its 2px focus frame to 1.\n\n/** One ‹ / › day-step button, sized to sit flush beside the field. */\nfunction StepButton({\n  icon: Icon,\n  label,\n  disabled,\n  onClick,\n  mirror,\n  className,\n}: {\n  icon: ComponentType<{ className?: string }>;\n  label: string;\n  disabled: boolean;\n  onClick: () => void;\n  /** Flip the icon in RTL — for the ‹ › day steps, whose \"previous\" points to the\n   *  reading start. Not for the today icon, which has no direction. */\n  mirror?: boolean;\n  /** The button's corners in the joined group (see DatePicker). */\n  className?: string;\n}) {\n  return (\n    <Tooltip label={label} portal>\n      <button\n        type=\"button\"\n        aria-label={label}\n        disabled={disabled}\n        onClick={onClick}\n        className={cn(\n          FIELD_BASE,\n          // FIELD_BASE is `block w-full` for text inputs; a step button is neither, and\n          // px-3 would make it wider than it needs to be. twMerge lets these win.\n          \"relative flex h-full w-10 shrink-0 items-center justify-center px-0 text-muted\",\n          \"hover:bg-hover hover:text-secondary\",\n          // Dimmed ICON, not a dimmed box: at 40% opacity the whole button — border\n          // included — faded out of the group and read as a broken, detached control.\n          \"disabled:cursor-not-allowed disabled:text-placeholder disabled:opacity-60 disabled:hover:bg-surface\",\n          // A part of a joined row: FIELD_BASE's 2px focus line, whole at 125 % (K5, the\n          // note above this function).\n          className,\n        )}\n      >\n        <Icon className={cn(\"size-4\", mirror && \"rtl:-scale-x-100\")} />\n      </button>\n    </Tooltip>\n  );\n}\n\nexport interface DatePickerProps extends DatePickerBaseProps {\n  /** ISO \"YYYY-MM-DD\", or \"\" for empty. */\n  value: string;\n  onChange: (iso: string) => void;\n  /**\n   * Flank the field with ‹ › buttons that move the value one day. For fields whose\n   * typical edit is a day or two — opening a calendar to go \"yesterday\" is three\n   * interactions for what should be one.\n   *\n   * Off by default: on a filter or a far-away date the buttons are dead weight, and\n   * they cost ~5rem of width that a narrow layout may not have.\n   */\n  step?: boolean;\n  /** Accessible names for the step buttons. Optional: they resolve from\n   *  `datePicker.previousDay` / `nextDay` in `<UiKitProvider labels>`, then from the\n   *  English defaults. This prop wins over both, for the one field that says it\n   *  differently. */\n  stepLabels?: { prev: string; next: string };\n  /**\n   * Today's date as ISO \"YYYY-MM-DD\". Adds a jump-to-today button beside the field,\n   * disabled once the value already is that day.\n   *\n   * Passed in rather than read from a clock here: a component that decides what \"today\"\n   * is cannot be tested at a fixed date, and the consumer already has one definition of\n   * it. The button is always RENDERED — going flat instead of disappearing — because a\n   * control that comes and goes with the value reflows whatever sits beside it, which\n   * is the report this exists to answer.\n   */\n  today?: string;\n  /** Accessible name for the today button; wins over `datePicker.today`. */\n  todayLabel?: string;\n}\n\n/** Single-date picker: a field showing the formatted date, opening a calendar. */\nexport function DatePicker(props: DatePickerProps) {\n  const {\n    value,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    step,\n    stepLabels,\n    today,\n    todayLabel,\n    className,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    invalid,\n    hint,\n    help,\n    error,\n    // Named so it reaches the field (and so its trigger) when a step/today row is the\n    // root and takes the rest of the caller's props.\n    \"aria-required\": ariaRequired,\n    // The trigger's, wherever the rest go (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, stepLabels, todayLabel);\n  const render = useTriggerFormat(\"datePicker\", locale, formatOptions, formatValue);\n  // keksdose K4: the caption and the error under the field, attached to the TRIGGER\n  // (the element a screen reader is on) after any description of the caller's own.\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n  });\n  // With a step or a today button beside it the field is no longer the outermost\n  // element — the flex row at the bottom is, and a caller's attributes belong on\n  // whichever of the two is actually the root. Naming the shared props rather than\n  // letting `...rest` carry them is what makes that choice possible.\n  const wrapped = Boolean(step || today);\n  const [triggerAria, wrapperRest] = splitTriggerAria(rest);\n  const field = (\n    <DateField\n      // With step/today buttons the flex row is the root and takes the caller's props —\n      // except the ones that name the field, which still belong on its trigger.\n      {...(wrapped ? triggerAria : rest)}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      aria-required={ariaRequired}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.panel}\n      disabled={disabled}\n      invalid={messages.isInvalid}\n      className={step ? \"min-w-0 flex-1\" : className}\n      // Named for STEP_ROW_STACK_AT_LARGE; only in the row, so a caller's own\n      // `data-slot` on a bare field is left alone.\n      {...(wrapped ? { \"data-slot\": \"date-step-field\" } : {})}\n      hasValue={Boolean(value)}\n      triggerText={value ? render(value) : (placeholder ?? \"\")}\n      onClear={() => onChange(\"\")}\n    >\n      {(close) => (\n        <PanelCalendar\n          monthJump={monthJump}\n          mode=\"single\"\n          focusOnOpen\n          from={value}\n          to={value}\n          locale={locale}\n          min={min}\n          max={max}\n          labels={calendarLabels}\n          onSelect={(iso) => {\n            onChange(iso);\n            close();\n          }}\n        />\n      )}\n    </DateField>\n  );\n  // Passed at all — even as `undefined` — the field keeps its box; see FieldBox.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const endHint = label === undefined ? messages.labelHint : undefined;\n  if (!wrapped) {\n    return (\n      <FieldBox below={messages.below} reserve={reserve}>\n        {withEndHint(field, endHint)}\n      </FieldBox>\n    );\n  }\n\n  // An empty field has nothing to step from, so both buttons are dead until a date\n  // is picked. Bounds are compared as strings: \"YYYY-MM-DD\" sorts chronologically.\n  const target = (days: number) => (value ? addDaysIso(value, days) : \"\");\n  const outOfBounds = (iso: string) => Boolean((min && iso < min) || (max && iso > max));\n  const blocked = (days: number) => {\n    const next = target(days);\n    if (!next || disabled) return true;\n    return outOfBounds(next);\n  };\n  const row = (\n    // ONE joined control, not three boxes in a row: the buttons and the field share\n    // their borders (each piece overlaps the previous by a pixel) and only the outer\n    // ends are rounded — the button-group shape, so ‹ date › reads as one field with\n    // controls rather than a field with loose buttons parked beside it, which is what\n    // the `gap-1` version looked like.\n    //\n    // items-stretch, not items-center: the buttons match the field's height, which\n    // varies with whether it carries a floating label. The field's trigger is nested\n    // inside DateField, so its inner corners are squared from here.\n    <div\n      {...wrapperRest}\n      className={cn(\n        \"flex items-stretch [&>*:not(:first-child)]:-ms-px\",\n        step && \"[&_[role=combobox]]:rounded-s-none\",\n        (step || today) && \"[&_[role=combobox]]:rounded-e-none\",\n        // The PART that is focused, pressed or invalid is raised over the neighbour it\n        // overlaps by a pixel, so its blue (or red) border shows on all four sides\n        // (keksdose live #394). `:focus-within`, not `:focus-visible`: a tap focuses\n        // without it, as does the sheet handing focus back, and the next part — later in\n        // the DOM — painted its grey left edge over the tapped one's right. Raising the\n        // whole part (each is `relative`) keeps the floating label and the icon above\n        // the trigger, which raising the trigger alone covered. Hover raises nothing: it\n        // changes no border, and would let a hovered › cover a focused field's edge.\n        \"[&>*:focus-within]:z-20 [&>*:active]:z-20 [&>*:has([aria-invalid=true])]:z-10\",\n        // …and its line is 2px, so no side of it reads half-strength at 125 % (live #394,\n        // fourth round): FIELD_BASE's inset ring, which every part of the row carries.\n        STEP_ROW_STACK_AT_LARGE,\n        className,\n      )}\n    >\n      {step && (\n        <StepButton\n          icon={ChevronLeft}\n          mirror\n          label={text.previousDay}\n          disabled={blocked(-1)}\n          onClick={() => onChange(target(-1))}\n          className=\"rounded-e-none\"\n        />\n      )}\n      {field}\n      {step && (\n        <StepButton\n          icon={ChevronRight}\n          mirror\n          label={text.nextDay}\n          disabled={blocked(1)}\n          onClick={() => onChange(target(1))}\n          className={cn(\"rounded-s-none\", today && \"rounded-e-none\")}\n        />\n      )}\n      {today && (\n        <StepButton\n          icon={CalendarClock}\n          label={text.today}\n          disabled={Boolean(disabled) || value === today || outOfBounds(today)}\n          onClick={() => onChange(today)}\n          className=\"rounded-s-none\"\n        />\n      )}\n    </div>\n  );\n  // Under the whole row, not under the field between the buttons: the message is about\n  // the date, and the steppers are part of how it is entered.\n  return (\n    <FieldBox below={messages.below} reserve={reserve}>\n      {withEndHint(row, endHint)}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/date-picker.tsx"],"sourcesContent":["import type { ComponentType, ReactNode } from \"react\";\nimport { CalendarClock, ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { addDaysIso } from \"../lib/dates\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { splitTriggerAria } from \"./trigger-aria\";\nimport { FIELD_BASE } from \"./field-base\";\nimport { FieldBox, LockedReason, useFieldMessages, useLockReason } from \"./field-parts\";\nimport { Tooltip } from \"./tooltip\";\nimport type { CommitScope } from \"./write-lock\";\nimport { DateField, useDatePickerLabels, useTriggerFormat, withEndHint, type DatePickerBaseProps } from \"./date-field\";\nimport { PanelCalendar } from \"./jump-calendar\";\n// The shared field, the month-jump calendar and the range picker live in date-field.tsx,\n// jump-calendar.tsx and date-range-picker.tsx (MOD-9); their public names are still this\n// module's, so the barrel exports them as before.\nexport type { DateTriggerAttributes } from \"./date-field\";\nexport { DateRangePicker } from \"./date-range-picker\";\nexport type {\n  DateRangeDraftSummary,\n  DateRangePickerPreset,\n  DateRangePickerProps,\n  DateRangeTriggerRenderProps,\n} from \"./date-range-picker\";\n\n/**\n * The ‹ date › (today) row on a phone at Large and Extra large (0.32.1, the 360 px\n * Extra-large sweep; docs/text-size-harmonization.md §4): the field takes the first line\n * on its own, whole and with all four corners, and the buttons share the line under it\n * as one joined strip. Three 2.5rem buttons are 180 px at 150 %, and on a 360 px phone\n * they left the field 84 px — \"Book… 0\" for \"Booking date 07/09/2026\" — where a 360 px\n * row would hold the date only by cutting it. `large:max-sm:`, the scaled phone width,\n * so a tablet or a desktop at Large keeps the one row, and Normal is unchanged.\n */\nconst STEP_ROW_STACK_AT_LARGE = cn(\n  \"large:max-sm:flex-wrap large:max-sm:gap-y-2\",\n  \"large:max-sm:[&>[data-slot=date-step-field]]:order-first large:max-sm:[&>[data-slot=date-step-field]]:basis-full\",\n  \"large:max-sm:[&>[data-slot=date-step-field]]:ms-0 large:max-sm:[&_[role=combobox]]:rounded-md\",\n  // The buttons (each in its tooltip's wrapper) share the line under the field.\n  \"large:max-sm:[&>span]:flex-1 large:max-sm:[&>span>button]:w-full\",\n);\n\n// The focused part of the ‹ date › (today) row framed 2px wide, not 1 (keksdose live\n// #394, fourth round; kk K5). The row raises the focused part over the neighbour it\n// overlaps (`[&>*:focus-within]:z-20`), so all four of its sides are its own brand\n// border — but at a fractional device-pixel ratio a 1px line covers 1.25 device pixels\n// (at 125 %), and on whichever sides fall across a pixel boundary it is spread over two\n// pixels at partial strength: ‹'s left side and the date field's right read grey beside\n// the crisp ones (dark theme, measured: 82,87,146 against 139,147,248).\n//\n// A 1px INSET ring in the focus colour beside the 1px border doubles the line inward, so\n// every side keeps at least one fully covered device pixel at any scale — FIELD_INVALID's\n// border-plus-ring, for the same reason (live #295). A box-shadow, and inset: nothing\n// outside the part moves or is covered. `focus`, not `focus-visible`, as the row's\n// raise: a tap focuses too.\n//\n// 0.34 drew it here, on the parts — `focus:ring-1 focus:ring-inset` on each step and\n// `[&_[role=combobox]:focus]:…` from the row — and the K5 follow-up then moved that very\n// ring into FIELD_BASE for every field (keksdose run 78). Each part of this row is\n// FIELD_BASE, the steps directly and the trigger through FIELD_TRIGGER, so the copies went\n// (round 0.34 Wave 2). Not on every button in the row: keksdose's local fix\n// (`[&_button:focus]:ring-1 [&_button:focus]:ring-inset` on the row) also reached the\n// label's \"?\" and thinned its 2px focus frame to 1.\n\n/**\n * One ‹ / › day-step (or today) button, sized to sit flush beside the field.\n *\n * Two kinds of \"cannot\" (refactor audit 2026-10-30, INP-4). `off` is natively `disabled`,\n * out of the tab order: the field is `disabled`, or empty with nothing to step from — no\n * press of these buttons gets there, so the focus is never on one as it turns. `refused`\n * is `aria-disabled` with a click that does nothing, JumpCalendar's rule: › pressed onto\n * `max`, ‹ onto `min` and Today onto today are refused by the very press the focus is on,\n * and a focused button that turns `disabled` drops the focus to <body>, mid-form\n * (keksdose's shared date field passes `step` and `today` in 14 files). A lock refuses\n * too, and the lock's reason describes the button.\n */\nfunction StepButton({\n  icon: Icon,\n  label,\n  off,\n  refused,\n  reasonId,\n  onClick,\n  mirror,\n  className,\n}: {\n  icon: ComponentType<{ className?: string }>;\n  label: string;\n  off: boolean;\n  refused: boolean;\n  /** While locked: the id of the lock's reason, which the row's frame shows. */\n  reasonId?: string;\n  onClick: () => void;\n  /** Flip the icon in RTL — for the ‹ › day steps, whose \"previous\" points to the\n   *  reading start. Not for the today icon, which has no direction. */\n  mirror?: boolean;\n  /** The button's corners in the joined group (see DatePicker). */\n  className?: string;\n}) {\n  const button = (\n    <button\n      type=\"button\"\n      aria-label={label}\n      disabled={off}\n      aria-disabled={(!off && refused) || undefined}\n      aria-describedby={reasonId}\n      onClick={() => {\n        if (!refused) onClick();\n      }}\n      className={cn(\n        FIELD_BASE,\n        // FIELD_BASE is `block w-full` for text inputs; a step button is neither, and\n        // px-3 would make it wider than it needs to be. twMerge lets these win.\n        \"relative flex h-full w-10 shrink-0 items-center justify-center px-0 text-muted\",\n        \"hover:bg-hover hover:text-secondary\",\n        // Dimmed ICON, not a dimmed box: at 40% opacity the whole button — border\n        // included — faded out of the group and read as a broken, detached control. The\n        // same look for the focusable kind (INP-4).\n        \"disabled:cursor-not-allowed disabled:text-placeholder disabled:opacity-60 disabled:hover:bg-surface\",\n        \"aria-disabled:cursor-not-allowed aria-disabled:text-placeholder aria-disabled:opacity-60 aria-disabled:hover:bg-surface\",\n        // A part of a joined row: FIELD_BASE's 2px focus line, whole at 125 % (K5, the\n        // note above this function).\n        className,\n      )}\n    >\n      <Icon className={cn(\"size-4\", mirror && \"rtl:-scale-x-100\")} />\n    </button>\n  );\n  // Locked, the row's frame holds the reason's bubble; a name bubble of its own as well\n  // would be two on one hover (IconButton drops its own the same way). The wrapper stays\n  // — STEP_ROW_STACK_AT_LARGE lays the buttons out by it.\n  if (reasonId) return <span className=\"relative inline-flex\">{button}</span>;\n  return (\n    <Tooltip label={label} portal>\n      {button}\n    </Tooltip>\n  );\n}\n\nexport interface DatePickerProps extends DatePickerBaseProps {\n  /** ISO \"YYYY-MM-DD\", or \"\" for empty. */\n  value: string;\n  onChange: (iso: string) => void;\n  /**\n   * Flank the field with ‹ › buttons that move the value one day. For fields whose\n   * typical edit is a day or two — opening a calendar to go \"yesterday\" is three\n   * interactions for what should be one. A button whose day is outside `min` / `max` is\n   * refused (`aria-disabled`, still focusable — 0.52); with no value both are disabled.\n   *\n   * Off by default: on a filter or a far-away date the buttons are dead weight, and\n   * they cost ~5rem of width that a narrow layout may not have.\n   */\n  step?: boolean;\n  /** Accessible names for the step buttons. Optional: they resolve from\n   *  `datePicker.previousDay` / `nextDay` in `<UiKitProvider labels>`, then from the\n   *  English defaults. This prop wins over both, for the one field that says it\n   *  differently. */\n  stepLabels?: { prev: string; next: string };\n  /**\n   * Today's date as ISO \"YYYY-MM-DD\". Adds a jump-to-today button beside the field,\n   * refused once the value already is that day — `aria-disabled`, so the focus stays on\n   * the button that was just pressed (0.52) — and disabled while that day is outside\n   * `min` / `max`.\n   *\n   * Passed in rather than read from a clock here: a component that decides what \"today\"\n   * is cannot be tested at a fixed date, and the consumer already has one definition of\n   * it. The button is always RENDERED — going flat instead of disappearing — because a\n   * control that comes and goes with the value reflows whatever sits beside it, which\n   * is the report this exists to answer.\n   */\n  today?: string;\n  /** Accessible name for the today button; wins over `datePicker.today`. */\n  todayLabel?: string;\n  /**\n   * This picker COMMITS — picking a date saves it (a row's date edited in place, a\n   * filter kept as it moves). Under a locked {@link WriteLockProvider} it is locked the\n   * `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every kit\n   * control. A date field inside a form with its own Save stays editable under the lock —\n   * leave this off there, and put `commit` on the Save. 0.52 (refactor audit 2026-10-30,\n   * API-3).\n   */\n  commit?: CommitScope;\n}\n\n/** Single-date picker: a field showing the formatted date, opening a calendar. */\nexport function DatePicker(props: DatePickerProps) {\n  const {\n    value,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    step,\n    stepLabels,\n    today,\n    todayLabel,\n    className,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    invalid,\n    hint,\n    help,\n    error,\n    // Named so it reaches the field (and so its trigger) when a step/today row is the\n    // root and takes the rest of the caller's props.\n    \"aria-required\": ariaRequired,\n    // The trigger's, wherever the rest go (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, stepLabels, todayLabel);\n  const render = useTriggerFormat(\"datePicker\", locale, formatOptions, formatValue);\n  // The write lock (API-3): Select's — the trigger stays reachable and says why.\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const change = (iso: string) => {\n    if (!locked) onChange(iso);\n  };\n  // keksdose K4: the caption and the error under the field, attached to the TRIGGER\n  // (the element a screen reader is on) after any description of the caller's own; a\n  // lock's reason between the two, as on Select.\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n    reasonId: locked && lock.reasonId,\n  });\n  // With a step or a today button beside it the field is no longer the outermost\n  // element — the flex row at the bottom is, and a caller's attributes belong on\n  // whichever of the two is actually the root. Naming the shared props rather than\n  // letting `...rest` carry them is what makes that choice possible.\n  const wrapped = Boolean(step || today);\n  const [triggerAria, wrapperRest] = splitTriggerAria(rest);\n  const field = (\n    <DateField\n      // With step/today buttons the flex row is the root and takes the caller's props —\n      // except the ones that name the field, which still belong on its trigger.\n      {...(wrapped ? triggerAria : rest)}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      aria-required={ariaRequired}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.panel}\n      disabled={disabled}\n      locked={locked}\n      invalid={messages.isInvalid}\n      // In the row, the field fills what the buttons leave and the caller's classes are\n      // the row's — with `today` alone too: dressed on `step` alone, a today-only row put\n      // them on both (refactor audit 2026-10-30, INP-13). Locked, they are the frame's.\n      className={wrapped ? \"min-w-0 flex-1\" : locked ? undefined : className}\n      // Named for STEP_ROW_STACK_AT_LARGE; only in the row, so a caller's own\n      // `data-slot` on a bare field is left alone.\n      {...(wrapped ? { \"data-slot\": \"date-step-field\" } : {})}\n      hasValue={Boolean(value)}\n      triggerText={value ? render(value) : (placeholder ?? \"\")}\n      onClear={() => change(\"\")}\n    >\n      {(close) => (\n        <PanelCalendar\n          monthJump={monthJump}\n          mode=\"single\"\n          focusOnOpen\n          from={value}\n          to={value}\n          locale={locale}\n          min={min}\n          max={max}\n          labels={calendarLabels}\n          onSelect={(iso) => {\n            change(iso);\n            close();\n          }}\n        />\n      )}\n    </DateField>\n  );\n  // Passed at all — even as `undefined` — the field keeps its box; see FieldBox.\n  const reserve = \"error\" in props || \"hint\" in props;\n  const endHint = label === undefined ? messages.labelHint : undefined;\n  // Locked, the field — or the whole row, whose buttons change the value too — sits in\n  // the reason's frame (the line, or the Tooltip), which becomes the outermost box: the\n  // caller's classes move onto it, as on Select, so a lock does not reflow the form.\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  if (!wrapped) {\n    return (\n      <FieldBox below={messages.below} reserve={reserve}>\n        {withReason(withEndHint(field, endHint))}\n      </FieldBox>\n    );\n  }\n\n  // An empty field has nothing to step from, so both buttons are off until a date is\n  // picked. Bounds are compared as strings: \"YYYY-MM-DD\" sorts chronologically.\n  const target = (days: number) => (value ? addDaysIso(value, days) : \"\");\n  const outOfBounds = (iso: string) => Boolean((min && iso < min) || (max && iso > max));\n  // A lock's reason wins over `disabled`, as on Select: the buttons stay focusable then.\n  const fieldOff = Boolean(disabled) && !locked;\n  const reasonId = locked ? lock.reasonId : undefined;\n  const row = (\n    // ONE joined control, not three boxes in a row: the buttons and the field share\n    // their borders (each piece overlaps the previous by a pixel) and only the outer\n    // ends are rounded — the button-group shape, so ‹ date › reads as one field with\n    // controls rather than a field with loose buttons parked beside it, which is what\n    // the `gap-1` version looked like.\n    //\n    // items-stretch, not items-center: the buttons match the field's height, which\n    // varies with whether it carries a floating label. The field's trigger is nested\n    // inside DateField, so its inner corners are squared from here.\n    <div\n      {...wrapperRest}\n      className={cn(\n        \"flex items-stretch [&>*:not(:first-child)]:-ms-px\",\n        step && \"[&_[role=combobox]]:rounded-s-none\",\n        (step || today) && \"[&_[role=combobox]]:rounded-e-none\",\n        // The PART that is focused, pressed or invalid is raised over the neighbour it\n        // overlaps by a pixel, so its blue (or red) border shows on all four sides\n        // (keksdose live #394). `:focus-within`, not `:focus-visible`: a tap focuses\n        // without it, as does the sheet handing focus back, and the next part — later in\n        // the DOM — painted its grey left edge over the tapped one's right. Raising the\n        // whole part (each is `relative`) keeps the floating label and the icon above\n        // the trigger, which raising the trigger alone covered. Hover raises nothing: it\n        // changes no border, and would let a hovered › cover a focused field's edge.\n        \"[&>*:focus-within]:z-20 [&>*:active]:z-20 [&>*:has([aria-invalid=true])]:z-10\",\n        // …and its line is 2px, so no side of it reads half-strength at 125 % (live #394,\n        // fourth round): FIELD_BASE's inset ring, which every part of the row carries.\n        STEP_ROW_STACK_AT_LARGE,\n        !locked && className,\n      )}\n    >\n      {step && (\n        <StepButton\n          icon={ChevronLeft}\n          mirror\n          label={text.previousDay}\n          off={fieldOff || !value}\n          refused={locked || outOfBounds(target(-1))}\n          reasonId={reasonId}\n          onClick={() => change(target(-1))}\n          className=\"rounded-e-none\"\n        />\n      )}\n      {field}\n      {step && (\n        <StepButton\n          icon={ChevronRight}\n          mirror\n          label={text.nextDay}\n          off={fieldOff || !value}\n          refused={locked || outOfBounds(target(1))}\n          reasonId={reasonId}\n          onClick={() => change(target(1))}\n          className={cn(\"rounded-s-none\", today && \"rounded-e-none\")}\n        />\n      )}\n      {today && (\n        // Refused once the value is today: pressable as a no-op would keep the focus too\n        // (INP-4), and this also says there is nothing to jump to. Today outside the\n        // bounds is `off`: no press here gets there, as MonthPicker's stepper has it — it\n        // was refused, a tab stop that could never do anything (0.52 code review,\n        // date-picker.tsx). A lock wins, focusable, to say why.\n        <StepButton\n          icon={CalendarClock}\n          label={text.today}\n          off={fieldOff || (!locked && outOfBounds(today))}\n          refused={locked || value === today}\n          reasonId={reasonId}\n          onClick={() => change(today)}\n          className=\"rounded-s-none\"\n        />\n      )}\n    </div>\n  );\n  // Under the whole row, not under the field between the buttons: the message is about\n  // the date, and the steppers are part of how it is entered.\n  return (\n    <FieldBox below={messages.below} reserve={reserve}>\n      {withReason(withEndHint(row, endHint))}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import type { CommitScope } from "./write-lock.js";
 import { type DatePickerBaseProps, type DateTriggerAttributes } from "./date-field.js";
 export interface DateRangePickerPreset {
     /**
@@ -19,22 +20,6 @@ export interface DateRangePickerPreset {
     from: string;
     to: string;
 }
-/**
- * When the picker hands its range to `onChange`.
- *
- *  - `"immediate"` (the default, and all of 0.7): a preset click commits and closes,
- *    and each calendar click is reported as it happens — the half-made `(from, "")`
- *    included. The right shape for quick ranges on a filter, where one click is one
- *    answer.
- *  - `"apply"`: the panel works on a DRAFT. A preset ARMS the calendar instead of
- *    committing, days can then be nudged ("last 3 months, but end it last Friday"),
- *    and nothing reaches `onChange` until Apply — which stays disabled until both ends
- *    exist. Cancel, Escape and an outside click discard the draft, and every open
- *    starts again from the committed value. keksdose's report range asked for exactly
- *    this: each commit there re-runs a whole page of charts, so an intermediate state
- *    must never escape the panel.
- */
-export type DateRangeCommit = "immediate" | "apply";
 export interface DateRangePickerProps extends DatePickerBaseProps {
     from: string;
     to: string;
@@ -44,8 +29,9 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
     onChange: (from: string, to: string, presetId?: string) => void;
     /** Separator between the two formatted dates in the trigger (default " – "). */
     separator?: string;
-    /** Optional named ranges rendered as a start-side column (last month / YTD / …). */
-    presets?: DateRangePickerPreset[];
+    /** Optional named ranges rendered as a start-side column (last month / YTD / …).
+     *  `readonly` since 0.52 (API-7): the picker never changes the list. */
+    presets?: readonly DateRangePickerPreset[];
     /**
      * The active preset's `id`, controlled — e.g. straight from keksdose's `?preset=`.
      * `null` (or an id no preset has, such as `"custom"`) says "no preset": nothing in
@@ -56,8 +42,36 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
      * itself; with no memory at all it falls back to the first preset whose dates match.
      */
     preset?: string | null;
-    /** See {@link DateRangeCommit}. Default `"immediate"`. */
-    commit?: DateRangeCommit;
+    /**
+     * When the picker hands its range to `onChange`.
+     *
+     *  - Left out (the default, and all of 0.7): a preset click commits and closes, and
+     *    each calendar click is reported as it happens — the half-made `(from, "")`
+     *    included. The right shape for quick ranges on a filter, where one click is one
+     *    answer.
+     *  - `apply`: the panel works on a DRAFT. A preset ARMS the calendar instead of
+     *    committing, days can then be nudged ("last 3 months, but end it last Friday"),
+     *    and nothing reaches `onChange` until Apply — which stays disabled until both ends
+     *    exist. Cancel, Escape and an outside click discard the draft, and every open
+     *    starts again from the committed value. keksdose's report range asked for exactly
+     *    this: each commit there re-runs a whole page of charts, so an intermediate state
+     *    must never escape the panel.
+     *
+     * `commit="apply"` until 0.52 (refactor audit 2026-10-30, API-3): `commit` is the write
+     * lock's prop on every other kit control. The old spelling went in 0.53.
+     */
+    apply?: boolean;
+    /**
+     * This picker COMMITS — picking a range saves it (a report's period kept per user, a
+     * filter persisted as it moves). Under a locked {@link WriteLockProvider} it is locked
+     * the `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every
+     * kit control since 0.33, and on this one since 0.52 (API-3). A range inside a form with
+     * its own Save stays editable under the lock — leave this off there.
+     *
+     * The strings `"immediate"` and `"apply"`, the panel's mode in 0.x, went in 0.53
+     * (deprecated in 0.52): `apply` is the mode.
+     */
+    commit?: CommitScope;
     /**
      * Draw the trigger yourself. keksdose's report range field
      * (reports/report-range-field.tsx, "Why this is app-level") is why: its trigger
@@ -82,7 +96,7 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
      */
     sheetBackCloses?: boolean;
     /**
-     * With `commit="apply"`: a line above the calendar saying what Apply would commit —
+     * With `apply`: a line above the calendar saying what Apply would commit —
      * keksdose's report range writes "Custom · 1 Mar 2026 – …" there
      * (report-range-field.tsx), the one place a preset armed and then nudged by a day is
      * seen to have become "Custom", and a half-made range to still lack its end. Called
@@ -91,7 +105,7 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
      * `""` until the second click. The line is a polite live region, so a screen reader
      * hears the draft change as the calendar is used.
      *
-     * Ignored in `"immediate"` mode, where there is no draft: every click is the value.
+     * Ignored without `apply`, where there is no draft: every click is the value.
      */
     renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;
 }
@@ -120,6 +134,6 @@ export interface DateRangeTriggerRenderProps {
     text: string;
 }
 /** Two-date range picker: click a start then an end; closes once both are set.
- *  With `presets`, a column of named ranges is shown beside the calendar; with
- *  `commit="apply"` the panel drafts and commits on Apply (see {@link DateRangeCommit}). */
+ *  With `presets`, a column of named ranges is shown beside the calendar; with `apply`
+ *  the panel drafts and commits on Apply (see {@link DateRangePickerProps.apply}). */
 export declare function DateRangePicker(props: DateRangePickerProps): import("react").JSX.Element;

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

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { cn } from "../lib/cn.js";
 import { useKitLocale } from "../i18n/kit-labels.js";
 import { Button } from "./button.js";
-import { FieldBox, useFieldMessages } from "./field-parts.js";
+import { FieldBox, LockedReason, useFieldMessages, useLockReason } from "./field-parts.js";
 import { usePhoneLayout } from "../hooks/use-breakpoint.js";
 import {
   DateField,
@@ -69,7 +69,7 @@ function RangePanel({
   presets,
   activeId,
   controlled,
-  commit,
+  drafting,
   close,
   frame,
   sheet,
@@ -78,7 +78,6 @@ function RangePanel({
   labels,
   renderDraftSummary
 }) {
-  const drafting = commit === "apply";
   const [draft, setDraft] = useState({
     from,
     to,
@@ -165,7 +164,8 @@ function DateRangePicker(props) {
     separator = " \u2013 ",
     presets,
     preset,
-    commit = "immediate",
+    apply,
+    commit,
     renderTrigger,
     sheetBackCloses,
     renderDraftSummary,
@@ -175,10 +175,13 @@ function DateRangePicker(props) {
     clearable,
     clearLabel,
     disabled,
+    disabledReason,
+    disabledReasonDisplay,
     invalid,
     hint,
     help,
     error,
+    className,
     // The trigger's (API-3).
     ref,
     ...rest
@@ -186,6 +189,9 @@ function DateRangePicker(props) {
   const locale = useKitLocale(localeProp);
   const text = useDatePickerLabels(clearLabel, void 0, void 0);
   const render = useTriggerFormat("dateRangePicker", locale, formatOptions, formatValue);
+  const drafting = apply ?? false;
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
   const messages = useFieldMessages({
     hint,
     help,
@@ -193,7 +199,9 @@ function DateRangePicker(props) {
     error,
     invalid,
     describedBy: rest["aria-describedby"],
-    ariaInvalid: rest["aria-invalid"]
+    ariaInvalid: rest["aria-invalid"],
+    // A lock's reason between the caption and the error, as on Select.
+    reasonId: locked && lock.reasonId
   });
   const [ownPreset, setOwnPreset] = useState(void 0);
   const controlled = preset !== void 0;
@@ -204,6 +212,7 @@ function DateRangePicker(props) {
   const hasPresets = Boolean(presets && presets.length > 0);
   const sheet = usePhoneLayout();
   const commitRange = (f, t, presetId) => {
+    if (locked) return;
     setOwnPreset(presetId);
     if (presetId === void 0) onChange(f, t);
     else onChange(f, t, presetId);
@@ -220,6 +229,8 @@ function DateRangePicker(props) {
       clearLabel: text.clear,
       panelLabel: text.rangePanel,
       disabled,
+      locked,
+      className: locked ? void 0 : className,
       invalid: messages.isInvalid,
       width: hasPresets ? "27.5rem" : void 0,
       hasValue: Boolean(from || to),
@@ -244,7 +255,7 @@ function DateRangePicker(props) {
           presets,
           activeId,
           controlled,
-          commit,
+          drafting,
           close,
           frame,
           sheet,
@@ -256,7 +267,12 @@ function DateRangePicker(props) {
       )
     }
   );
-  return /* @__PURE__ */ jsx(FieldBox, { below: messages.below, reserve: "error" in props || "hint" in props, children: withEndHint(field, label === void 0 ? messages.labelHint : void 0) });
+  const box = withEndHint(field, label === void 0 ? messages.labelHint : void 0);
+  return /* @__PURE__ */ jsx(FieldBox, { below: messages.below, reserve: "error" in props || "hint" in props, children: locked ? (
+    // DatePicker's frame: the line under the field, or the Tooltip with a hidden copy
+    // for `aria-describedby`; the outermost box, so it takes the caller's classes.
+    /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: cn("block", className), children: box })
+  ) : box });
 }
 export {
   DateRangePicker

package/dist/components/date-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/date-range-picker.tsx"],"sourcesContent":["// The two-date range picker: presets beside the calendar, `commit=\"apply\"` drafts, a\n// custom trigger. Moved out of date-picker.tsx as it was (MOD-9, refactor audit\n// 2026-10); date-picker still exports every public name here.\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale, type DatePickerLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { FieldBox, useFieldMessages } from \"./field-parts\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport {\n  DateField,\n  useDatePickerLabels,\n  useTriggerFormat,\n  withEndHint,\n  type DatePickerBaseProps,\n  type DateTriggerAttributes,\n  type PanelFrame,\n} from \"./date-field\";\nimport { PanelCalendar, type PanelCalendarProps } from \"./jump-calendar\";\n\nexport interface DateRangePickerPreset {\n  /**\n   * The preset's identity, independent of its dates — `\"last_3_months\"`, not two ISO\n   * strings. Optional for the 0.x callers that pass anonymous pairs.\n   *\n   * keksdose's report range field (report-range-field.tsx, \"Why this is app-level\")\n   * is why it exists: its URL stores `?preset=last_3_months` and recomputes the dates\n   * from today on every read, so a preset that is only its dates froze \"last 3 months\"\n   * at whatever day the panel rendered, and two presets that happen to cover the same\n   * days (this week and today, on a Monday) could not be told apart. With an `id` the\n   * choice is reported to `onChange` and shown as selected for as long as the range\n   * still matches it. Recompute `from`/`to` on every render (`calendarMonthPresets()`,\n   * `dateRangePresets()`) and pass the key as the id.\n   */\n  id?: string;\n  label: ReactNode;\n  from: string;\n  to: string;\n}\n\n/**\n * When the picker hands its range to `onChange`.\n *\n *  - `\"immediate\"` (the default, and all of 0.7): a preset click commits and closes,\n *    and each calendar click is reported as it happens — the half-made `(from, \"\")`\n *    included. The right shape for quick ranges on a filter, where one click is one\n *    answer.\n *  - `\"apply\"`: the panel works on a DRAFT. A preset ARMS the calendar instead of\n *    committing, days can then be nudged (\"last 3 months, but end it last Friday\"),\n *    and nothing reaches `onChange` until Apply — which stays disabled until both ends\n *    exist. Cancel, Escape and an outside click discard the draft, and every open\n *    starts again from the committed value. keksdose's report range asked for exactly\n *    this: each commit there re-runs a whole page of charts, so an intermediate state\n *    must never escape the panel.\n */\nexport type DateRangeCommit = \"immediate\" | \"apply\";\n\nexport interface DateRangePickerProps extends DatePickerBaseProps {\n  from: string;\n  to: string;\n  /** The committed range. `presetId` is the chosen preset's `id` when a preset\n   *  produced it (and the range was not nudged since), `undefined` for days picked by\n   *  hand. A 0.x two-argument handler simply ignores it. */\n  onChange: (from: string, to: string, presetId?: string) => void;\n  /** Separator between the two formatted dates in the trigger (default \" – \"). */\n  separator?: string;\n  /** Optional named ranges rendered as a start-side column (last month / YTD / …). */\n  presets?: DateRangePickerPreset[];\n  /**\n   * The active preset's `id`, controlled — e.g. straight from keksdose's `?preset=`.\n   * `null` (or an id no preset has, such as `\"custom\"`) says \"no preset\": nothing in\n   * the column is marked even if a preset happens to cover the same days. A preset is\n   * marked only while its dates still equal `from`/`to`.\n   *\n   * Leave it `undefined` and the picker remembers the last preset it committed\n   * itself; with no memory at all it falls back to the first preset whose dates match.\n   */\n  preset?: string | null;\n  /** See {@link DateRangeCommit}. Default `\"immediate\"`. */\n  commit?: DateRangeCommit;\n  /**\n   * Draw the trigger yourself. keksdose's report range field\n   * (reports/report-range-field.tsx, \"Why this is app-level\") is why: its trigger\n   * NAMES the active preset (\"Last 3 months\", the window as a muted suffix) where the\n   * kit's shows two dates, sits inside a Tooltip, and is squared off on one side so the\n   * granularity control can join it flush at the field's 42px.\n   *\n   * Spread `props.triggerProps` onto a `<button>` whole and put `props.valueProps` on\n   * the element that shows the value — see {@link DateTriggerAttributes} for what each\n   * part is for. The field around it (label, hidden name twin, clear/calendar glyph,\n   * popover or phone sheet) is unchanged.\n   */\n  renderTrigger?: (props: DateRangeTriggerRenderProps) => ReactNode;\n  /**\n   * In the phone layout (`usePhoneLayout()`) the panel opens as a full-screen sheet (`FullBleedDialog`)\n   * with presets in a grid above the calendar and Apply pinned in the footer, instead\n   * of the 440px popover that hung off a 360px screen (keksdose's report range field,\n   * which hand-rolled exactly this). This is its `backCloses`: on by default, so Back\n   * dismisses the sheet; off for a caller whose commit rewrites the URL with\n   * `replaceState` in the same tick — keksdose's `?preset/from/to` — where the router\n   * would overwrite the sheet's history marker.\n   */\n  sheetBackCloses?: boolean;\n  /**\n   * With `commit=\"apply\"`: a line above the calendar saying what Apply would commit —\n   * keksdose's report range writes \"Custom · 1 Mar 2026 – …\" there\n   * (report-range-field.tsx), the one place a preset armed and then nudged by a day is\n   * seen to have become \"Custom\", and a half-made range to still lack its end. Called\n   * with the DRAFT on every change, in the popover and the phone sheet alike; `preset`\n   * is the preset the column marks for it (none once a day was picked by hand), `to` is\n   * `\"\"` until the second click. The line is a polite live region, so a screen reader\n   * hears the draft change as the calendar is used.\n   *\n   * Ignored in `\"immediate\"` mode, where there is no draft: every click is the value.\n   */\n  renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;\n}\n\n/** What {@link DateRangePickerProps.renderDraftSummary} is called with. */\nexport interface DateRangeDraftSummary {\n  from: string;\n  to: string;\n  /** The preset the column marks for the draft, if any. */\n  preset: DateRangePickerPreset | undefined;\n}\n\n/** What {@link DateRangePickerProps.renderTrigger} is called with. */\nexport interface DateRangeTriggerRenderProps {\n  /** Spread onto the `<button>`, whole. Merge your class after `triggerProps.className`. */\n  triggerProps: DateTriggerAttributes;\n  /** Put on the element showing the value: the trigger is named \"label, value\" by\n   *  reference to this id. Without it the name is the label alone. */\n  valueProps: { id: string };\n  open: boolean;\n  from: string;\n  to: string;\n  /** The preset the column marks for the committed range, if any — the one to name. */\n  preset: DateRangePickerPreset | undefined;\n  /** What the kit's own trigger would show: the formatted range, or the placeholder. */\n  text: string;\n}\n\ninterface RangeDraft {\n  from: string;\n  to: string;\n  presetId: string | undefined;\n}\n\n/** Which preset (by index) the column marks, or -1. See `DateRangePickerProps.preset`. */\nfunction markedPreset(\n  presets: readonly DateRangePickerPreset[],\n  from: string,\n  to: string,\n  activeId: string | null | undefined,\n  controlled: boolean,\n): number {\n  const matches = (p: DateRangePickerPreset) => p.from === from && p.to === to;\n  if (activeId != null) {\n    const byId = presets.findIndex((p) => p.id === activeId && matches(p));\n    if (byId !== -1 || controlled) return byId;\n  } else if (controlled) {\n    return -1;\n  }\n  return presets.findIndex(matches);\n}\n\n/**\n * The preset column: a named group of toggle buttons, `aria-pressed` on the marked one.\n * Pressed-state rather than colour alone, because \"which range is this\" is the one\n * thing a screen-reader user opening the panel needs to hear.\n */\nfunction PresetColumn({\n  presets,\n  marked,\n  label,\n  onPick,\n  sheet,\n}: {\n  presets: readonly DateRangePickerPreset[];\n  marked: number;\n  label: string;\n  onPick: (p: DateRangePickerPreset) => void;\n  /** The phone sheet's shape: a two-column grid ABOVE the calendar with 44px rows —\n   *  a 128px column beside a month grid leaves the grid ~200px on a 360px screen. */\n  sheet?: boolean;\n}) {\n  return (\n    // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule\n    // between it and the calendar has to follow it in a right-to-left UI.\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={sheet ? \"grid grid-cols-2 gap-0.5\" : \"flex w-32 shrink-0 flex-col gap-0.5 border-e border-subtle pe-2\"}\n    >\n      {presets.map((p, i) => {\n        const selected = i === marked;\n        return (\n          <button\n            key={p.id ?? i}\n            type=\"button\"\n            aria-pressed={selected}\n            data-preset={p.id}\n            onClick={() => onPick(p)}\n            className={cn(\n              \"rounded px-2 text-start\",\n              // 44px on a phone: the kit's touch-target size (`SHEET_ROW_CLASS`).\n              sheet ? \"min-h-11 py-2 text-sm\" : \"py-1.5 text-xs\",\n              selected ? \"bg-active font-medium text-primary\" : \"text-secondary hover:bg-hover\",\n            )}\n          >\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * The panel's body. A component of its own so `commit=\"apply\"` can keep its draft in\n * state that is born when the panel opens: `Popover` unmounts its children on close,\n * so the draft is re-seeded from the committed value on every open, and an abandoned\n * half-selection cannot survive into the next one.\n */\nfunction RangePanel({\n  from,\n  to,\n  presets,\n  activeId,\n  controlled,\n  commit,\n  close,\n  frame,\n  sheet,\n  commitRange,\n  calendarProps,\n  labels,\n  renderDraftSummary,\n}: {\n  from: string;\n  to: string;\n  presets: readonly DateRangePickerPreset[] | undefined;\n  activeId: string | null | undefined;\n  controlled: boolean;\n  commit: DateRangeCommit;\n  close: () => void;\n  /** Where the body and the Apply row go — see `PanelFrame`. */\n  frame: PanelFrame;\n  sheet: boolean;\n  commitRange: (from: string, to: string, presetId: string | undefined) => void;\n  calendarProps: Pick<PanelCalendarProps, \"locale\" | \"min\" | \"max\" | \"labels\" | \"monthJump\">;\n  labels: DatePickerLabels;\n  renderDraftSummary?: DateRangePickerProps[\"renderDraftSummary\"];\n}) {\n  const drafting = commit === \"apply\";\n  const [draft, setDraft] = useState<RangeDraft>({\n    from,\n    to,\n    presetId: activeId ?? undefined,\n  });\n  // What the panel SHOWS: the draft while drafting, the committed value otherwise.\n  const shown = drafting ? draft : { from, to, presetId: activeId ?? undefined };\n  const marked = presets\n    ? markedPreset(presets, shown.from, shown.to, drafting ? draft.presetId : activeId, drafting || controlled)\n    : -1;\n  const complete = Boolean(draft.from && draft.to);\n\n  const summary =\n    drafting && renderDraftSummary\n      ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] })\n      : null;\n\n  const picker = (\n    <PanelCalendar\n      {...calendarProps}\n      focusOnOpen\n      from={shown.from}\n      to={shown.to}\n      onSelect={(f, t) => {\n        if (drafting) {\n          setDraft({ from: f, to: t, presetId: undefined });\n          return;\n        }\n        commitRange(f, t, undefined);\n        // Two-click range: only dismiss once both ends are chosen.\n        if (f && t) close();\n      }}\n    />\n  );\n  // The summary heads the CALENDAR's column, not the panel: beside a preset column it\n  // reads as the calendar's caption, and in the sheet it sits between the presets and\n  // the month it describes. `null` renders no line — a caller may opt out per draft —\n  // but keeps the wrapper, so the calendar is not remounted (and its month and focus\n  // lost) when a line comes or goes.\n  const calendar =\n    drafting && renderDraftSummary ? (\n      <div className=\"flex flex-col gap-2\">\n        {summary != null && (\n          <div aria-live=\"polite\" data-draft-summary=\"\" className=\"text-xs text-muted\">\n            {summary}\n          </div>\n        )}\n        {picker}\n      </div>\n    ) : (\n      picker\n    );\n\n  const body =\n    presets && presets.length > 0 ? (\n      <div className={sheet ? \"flex flex-col gap-3\" : \"flex gap-3\"}>\n        <PresetColumn\n          sheet={sheet}\n          presets={presets}\n          marked={marked}\n          label={labels.presets}\n          onPick={(p) => {\n            if (drafting) {\n              setDraft({ from: p.from, to: p.to, presetId: p.id });\n              return;\n            }\n            commitRange(p.from, p.to, p.id);\n            close();\n          }}\n        />\n        {/* `flex-1`: the calendar takes the rest of the panel. Content-sized it was\n            seven tiny cells beside a wide preset column. */}\n        <div className=\"min-w-0 flex-1\">{calendar}</div>\n      </div>\n    ) : (\n      calendar\n    );\n\n  if (!drafting) return frame(body);\n  return frame(\n    body,\n    <>\n      {/* `flex-1` in the sheet: two thumb-wide halves of the footer, not two small\n          buttons in its corner. */}\n      <Button type=\"button\" variant=\"ghost\" className={sheet ? \"flex-1\" : undefined} onClick={close}>\n        {labels.cancel}\n      </Button>\n      <Button\n        type=\"button\"\n        className={sheet ? \"flex-1\" : undefined}\n        // A half-made `(from, \"\")` would commit a window with no end — a blank\n        // report, one click into a two-click gesture.\n        disabled={!complete}\n        onClick={() => {\n          if (!complete) return;\n          commitRange(draft.from, draft.to, draft.presetId);\n          close();\n        }}\n      >\n        {labels.apply}\n      </Button>\n    </>,\n  );\n}\n\n/** Two-date range picker: click a start then an end; closes once both are set.\n *  With `presets`, a column of named ranges is shown beside the calendar; with\n *  `commit=\"apply\"` the panel drafts and commits on Apply (see {@link DateRangeCommit}). */\nexport function DateRangePicker(props: DateRangePickerProps) {\n  const {\n    from,\n    to,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    separator = \" – \",\n    presets,\n    preset,\n    commit = \"immediate\",\n    renderTrigger,\n    sheetBackCloses,\n    renderDraftSummary,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    invalid,\n    hint,\n    help,\n    error,\n    // The trigger's (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, undefined, undefined);\n  const render = useTriggerFormat(\"dateRangePicker\", locale, formatOptions, formatValue);\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n  });\n  // The preset this picker committed itself, for a caller that does not control\n  // `preset`. Cleared by a hand-picked range or a clear.\n  const [ownPreset, setOwnPreset] = useState<string | undefined>(undefined);\n  const controlled = preset !== undefined;\n  const activeId = controlled ? preset : ownPreset;\n  const a = from ? render(from) : \"\";\n  const b = to ? render(to) : \"\";\n  const triggerText = from ? (to ? `${a}${separator}${b}` : `${a}${separator}…`) : (placeholder ?? \"\");\n  const hasPresets = Boolean(presets && presets.length > 0);\n  const sheet = usePhoneLayout();\n  const commitRange = (f: string, t: string, presetId: string | undefined) => {\n    setOwnPreset(presetId);\n    // Two arguments when no preset is involved — exactly the 0.7 call, so a caller's\n    // `toHaveBeenCalledWith(from, to)` and a variadic handler see no difference.\n    if (presetId === undefined) onChange(f, t);\n    else onChange(f, t, presetId);\n  };\n  const field = (\n    <DateField\n      {...rest}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.rangePanel}\n      disabled={disabled}\n      invalid={messages.isInvalid}\n      // Widen so the preset column sits beside the calendar (default otherwise).\n      width={hasPresets ? \"27.5rem\" : undefined}\n      hasValue={Boolean(from || to)}\n      triggerText={triggerText}\n      onClear={() => commitRange(\"\", \"\", undefined)}\n      sheet={sheet}\n      sheetBackCloses={sheetBackCloses}\n      renderTrigger={\n        renderTrigger &&\n        ((triggerProps, valueId) =>\n          renderTrigger({\n            triggerProps,\n            valueProps: { id: valueId },\n            open: triggerProps[\"aria-expanded\"],\n            from,\n            to,\n            preset: presets?.[markedPreset(presets, from, to, activeId, controlled)],\n            text: triggerText,\n          }))\n      }\n    >\n      {(close, frame) => (\n        <RangePanel\n          from={from}\n          to={to}\n          presets={presets}\n          activeId={activeId}\n          controlled={controlled}\n          commit={commit}\n          close={close}\n          frame={frame}\n          sheet={sheet}\n          commitRange={commitRange}\n          calendarProps={{ locale, min, max, labels: calendarLabels, monthJump }}\n          labels={text}\n          renderDraftSummary={renderDraftSummary}\n        />\n      )}\n    </DateField>\n  );\n  return (\n    <FieldBox below={messages.below} reserve={\"error\" in props || \"hint\" in props}>\n      {withEndHint(field, label === undefined ? messages.labelHint : undefined)}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/date-range-picker.tsx"],"sourcesContent":["// The two-date range picker: presets beside the calendar, `apply` drafts, a custom\n// trigger. Moved out of date-picker.tsx as it was (MOD-9, refactor audit\n// 2026-10); date-picker still exports every public name here.\nimport { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale, type DatePickerLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { FieldBox, LockedReason, useFieldMessages, useLockReason } from \"./field-parts\";\nimport type { CommitScope } from \"./write-lock\";\nimport { usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport {\n  DateField,\n  useDatePickerLabels,\n  useTriggerFormat,\n  withEndHint,\n  type DatePickerBaseProps,\n  type DateTriggerAttributes,\n  type PanelFrame,\n} from \"./date-field\";\nimport { PanelCalendar, type PanelCalendarProps } from \"./jump-calendar\";\n\nexport interface DateRangePickerPreset {\n  /**\n   * The preset's identity, independent of its dates — `\"last_3_months\"`, not two ISO\n   * strings. Optional for the 0.x callers that pass anonymous pairs.\n   *\n   * keksdose's report range field (report-range-field.tsx, \"Why this is app-level\")\n   * is why it exists: its URL stores `?preset=last_3_months` and recomputes the dates\n   * from today on every read, so a preset that is only its dates froze \"last 3 months\"\n   * at whatever day the panel rendered, and two presets that happen to cover the same\n   * days (this week and today, on a Monday) could not be told apart. With an `id` the\n   * choice is reported to `onChange` and shown as selected for as long as the range\n   * still matches it. Recompute `from`/`to` on every render (`calendarMonthPresets()`,\n   * `dateRangePresets()`) and pass the key as the id.\n   */\n  id?: string;\n  label: ReactNode;\n  from: string;\n  to: string;\n}\n\nexport interface DateRangePickerProps extends DatePickerBaseProps {\n  from: string;\n  to: string;\n  /** The committed range. `presetId` is the chosen preset's `id` when a preset\n   *  produced it (and the range was not nudged since), `undefined` for days picked by\n   *  hand. A 0.x two-argument handler simply ignores it. */\n  onChange: (from: string, to: string, presetId?: string) => void;\n  /** Separator between the two formatted dates in the trigger (default \" – \"). */\n  separator?: string;\n  /** Optional named ranges rendered as a start-side column (last month / YTD / …).\n   *  `readonly` since 0.52 (API-7): the picker never changes the list. */\n  presets?: readonly DateRangePickerPreset[];\n  /**\n   * The active preset's `id`, controlled — e.g. straight from keksdose's `?preset=`.\n   * `null` (or an id no preset has, such as `\"custom\"`) says \"no preset\": nothing in\n   * the column is marked even if a preset happens to cover the same days. A preset is\n   * marked only while its dates still equal `from`/`to`.\n   *\n   * Leave it `undefined` and the picker remembers the last preset it committed\n   * itself; with no memory at all it falls back to the first preset whose dates match.\n   */\n  preset?: string | null;\n  /**\n   * When the picker hands its range to `onChange`.\n   *\n   *  - Left out (the default, and all of 0.7): a preset click commits and closes, and\n   *    each calendar click is reported as it happens — the half-made `(from, \"\")`\n   *    included. The right shape for quick ranges on a filter, where one click is one\n   *    answer.\n   *  - `apply`: the panel works on a DRAFT. A preset ARMS the calendar instead of\n   *    committing, days can then be nudged (\"last 3 months, but end it last Friday\"),\n   *    and nothing reaches `onChange` until Apply — which stays disabled until both ends\n   *    exist. Cancel, Escape and an outside click discard the draft, and every open\n   *    starts again from the committed value. keksdose's report range asked for exactly\n   *    this: each commit there re-runs a whole page of charts, so an intermediate state\n   *    must never escape the panel.\n   *\n   * `commit=\"apply\"` until 0.52 (refactor audit 2026-10-30, API-3): `commit` is the write\n   * lock's prop on every other kit control. The old spelling went in 0.53.\n   */\n  apply?: boolean;\n  /**\n   * This picker COMMITS — picking a range saves it (a report's period kept per user, a\n   * filter persisted as it moves). Under a locked {@link WriteLockProvider} it is locked\n   * the `disabledReason` way, with the lock's reason; a {@link CommitScope}, as on every\n   * kit control since 0.33, and on this one since 0.52 (API-3). A range inside a form with\n   * its own Save stays editable under the lock — leave this off there.\n   *\n   * The strings `\"immediate\"` and `\"apply\"`, the panel's mode in 0.x, went in 0.53\n   * (deprecated in 0.52): `apply` is the mode.\n   */\n  commit?: CommitScope;\n  /**\n   * Draw the trigger yourself. keksdose's report range field\n   * (reports/report-range-field.tsx, \"Why this is app-level\") is why: its trigger\n   * NAMES the active preset (\"Last 3 months\", the window as a muted suffix) where the\n   * kit's shows two dates, sits inside a Tooltip, and is squared off on one side so the\n   * granularity control can join it flush at the field's 42px.\n   *\n   * Spread `props.triggerProps` onto a `<button>` whole and put `props.valueProps` on\n   * the element that shows the value — see {@link DateTriggerAttributes} for what each\n   * part is for. The field around it (label, hidden name twin, clear/calendar glyph,\n   * popover or phone sheet) is unchanged.\n   */\n  renderTrigger?: (props: DateRangeTriggerRenderProps) => ReactNode;\n  /**\n   * In the phone layout (`usePhoneLayout()`) the panel opens as a full-screen sheet (`FullBleedDialog`)\n   * with presets in a grid above the calendar and Apply pinned in the footer, instead\n   * of the 440px popover that hung off a 360px screen (keksdose's report range field,\n   * which hand-rolled exactly this). This is its `backCloses`: on by default, so Back\n   * dismisses the sheet; off for a caller whose commit rewrites the URL with\n   * `replaceState` in the same tick — keksdose's `?preset/from/to` — where the router\n   * would overwrite the sheet's history marker.\n   */\n  sheetBackCloses?: boolean;\n  /**\n   * With `apply`: a line above the calendar saying what Apply would commit —\n   * keksdose's report range writes \"Custom · 1 Mar 2026 – …\" there\n   * (report-range-field.tsx), the one place a preset armed and then nudged by a day is\n   * seen to have become \"Custom\", and a half-made range to still lack its end. Called\n   * with the DRAFT on every change, in the popover and the phone sheet alike; `preset`\n   * is the preset the column marks for it (none once a day was picked by hand), `to` is\n   * `\"\"` until the second click. The line is a polite live region, so a screen reader\n   * hears the draft change as the calendar is used.\n   *\n   * Ignored without `apply`, where there is no draft: every click is the value.\n   */\n  renderDraftSummary?: (draft: DateRangeDraftSummary) => ReactNode;\n}\n\n/** What {@link DateRangePickerProps.renderDraftSummary} is called with. */\nexport interface DateRangeDraftSummary {\n  from: string;\n  to: string;\n  /** The preset the column marks for the draft, if any. */\n  preset: DateRangePickerPreset | undefined;\n}\n\n/** What {@link DateRangePickerProps.renderTrigger} is called with. */\nexport interface DateRangeTriggerRenderProps {\n  /** Spread onto the `<button>`, whole. Merge your class after `triggerProps.className`. */\n  triggerProps: DateTriggerAttributes;\n  /** Put on the element showing the value: the trigger is named \"label, value\" by\n   *  reference to this id. Without it the name is the label alone. */\n  valueProps: { id: string };\n  open: boolean;\n  from: string;\n  to: string;\n  /** The preset the column marks for the committed range, if any — the one to name. */\n  preset: DateRangePickerPreset | undefined;\n  /** What the kit's own trigger would show: the formatted range, or the placeholder. */\n  text: string;\n}\n\ninterface RangeDraft {\n  from: string;\n  to: string;\n  presetId: string | undefined;\n}\n\n/** Which preset (by index) the column marks, or -1. See `DateRangePickerProps.preset`. */\nfunction markedPreset(\n  presets: readonly DateRangePickerPreset[],\n  from: string,\n  to: string,\n  activeId: string | null | undefined,\n  controlled: boolean,\n): number {\n  const matches = (p: DateRangePickerPreset) => p.from === from && p.to === to;\n  if (activeId != null) {\n    const byId = presets.findIndex((p) => p.id === activeId && matches(p));\n    if (byId !== -1 || controlled) return byId;\n  } else if (controlled) {\n    return -1;\n  }\n  return presets.findIndex(matches);\n}\n\n/**\n * The preset column: a named group of toggle buttons, `aria-pressed` on the marked one.\n * Pressed-state rather than colour alone, because \"which range is this\" is the one\n * thing a screen-reader user opening the panel needs to hear.\n */\nfunction PresetColumn({\n  presets,\n  marked,\n  label,\n  onPick,\n  sheet,\n}: {\n  presets: readonly DateRangePickerPreset[];\n  marked: number;\n  label: string;\n  onPick: (p: DateRangePickerPreset) => void;\n  /** The phone sheet's shape: a two-column grid ABOVE the calendar with 44px rows —\n   *  a 128px column beside a month grid leaves the grid ~200px on a 360px screen. */\n  sheet?: boolean;\n}) {\n  return (\n    // `border-e`/`pe`, not `-r`: the preset column is on the START side, and the rule\n    // between it and the calendar has to follow it in a right-to-left UI.\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={sheet ? \"grid grid-cols-2 gap-0.5\" : \"flex w-32 shrink-0 flex-col gap-0.5 border-e border-subtle pe-2\"}\n    >\n      {presets.map((p, i) => {\n        const selected = i === marked;\n        return (\n          <button\n            key={p.id ?? i}\n            type=\"button\"\n            aria-pressed={selected}\n            data-preset={p.id}\n            onClick={() => onPick(p)}\n            className={cn(\n              \"rounded px-2 text-start\",\n              // 44px on a phone: the kit's touch-target size (`SHEET_ROW_CLASS`).\n              sheet ? \"min-h-11 py-2 text-sm\" : \"py-1.5 text-xs\",\n              selected ? \"bg-active font-medium text-primary\" : \"text-secondary hover:bg-hover\",\n            )}\n          >\n            {p.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * The panel's body. A component of its own so `apply` can keep its draft in state that\n * is born when the panel opens: `Popover` unmounts its children on close,\n * so the draft is re-seeded from the committed value on every open, and an abandoned\n * half-selection cannot survive into the next one.\n */\nfunction RangePanel({\n  from,\n  to,\n  presets,\n  activeId,\n  controlled,\n  drafting,\n  close,\n  frame,\n  sheet,\n  commitRange,\n  calendarProps,\n  labels,\n  renderDraftSummary,\n}: {\n  from: string;\n  to: string;\n  presets: readonly DateRangePickerPreset[] | undefined;\n  activeId: string | null | undefined;\n  controlled: boolean;\n  /** `apply`: the panel works on a draft. */\n  drafting: boolean;\n  close: () => void;\n  /** Where the body and the Apply row go — see `PanelFrame`. */\n  frame: PanelFrame;\n  sheet: boolean;\n  commitRange: (from: string, to: string, presetId: string | undefined) => void;\n  calendarProps: Pick<PanelCalendarProps, \"locale\" | \"min\" | \"max\" | \"labels\" | \"monthJump\">;\n  labels: DatePickerLabels;\n  renderDraftSummary?: DateRangePickerProps[\"renderDraftSummary\"];\n}) {\n  const [draft, setDraft] = useState<RangeDraft>({\n    from,\n    to,\n    presetId: activeId ?? undefined,\n  });\n  // What the panel SHOWS: the draft while drafting, the committed value otherwise.\n  const shown = drafting ? draft : { from, to, presetId: activeId ?? undefined };\n  const marked = presets\n    ? markedPreset(presets, shown.from, shown.to, drafting ? draft.presetId : activeId, drafting || controlled)\n    : -1;\n  const complete = Boolean(draft.from && draft.to);\n\n  const summary =\n    drafting && renderDraftSummary\n      ? renderDraftSummary({ from: draft.from, to: draft.to, preset: presets?.[marked] })\n      : null;\n\n  const picker = (\n    <PanelCalendar\n      {...calendarProps}\n      focusOnOpen\n      from={shown.from}\n      to={shown.to}\n      onSelect={(f, t) => {\n        if (drafting) {\n          setDraft({ from: f, to: t, presetId: undefined });\n          return;\n        }\n        commitRange(f, t, undefined);\n        // Two-click range: only dismiss once both ends are chosen.\n        if (f && t) close();\n      }}\n    />\n  );\n  // The summary heads the CALENDAR's column, not the panel: beside a preset column it\n  // reads as the calendar's caption, and in the sheet it sits between the presets and\n  // the month it describes. `null` renders no line — a caller may opt out per draft —\n  // but keeps the wrapper, so the calendar is not remounted (and its month and focus\n  // lost) when a line comes or goes.\n  const calendar =\n    drafting && renderDraftSummary ? (\n      <div className=\"flex flex-col gap-2\">\n        {summary != null && (\n          <div aria-live=\"polite\" data-draft-summary=\"\" className=\"text-xs text-muted\">\n            {summary}\n          </div>\n        )}\n        {picker}\n      </div>\n    ) : (\n      picker\n    );\n\n  const body =\n    presets && presets.length > 0 ? (\n      <div className={sheet ? \"flex flex-col gap-3\" : \"flex gap-3\"}>\n        <PresetColumn\n          sheet={sheet}\n          presets={presets}\n          marked={marked}\n          label={labels.presets}\n          onPick={(p) => {\n            if (drafting) {\n              setDraft({ from: p.from, to: p.to, presetId: p.id });\n              return;\n            }\n            commitRange(p.from, p.to, p.id);\n            close();\n          }}\n        />\n        {/* `flex-1`: the calendar takes the rest of the panel. Content-sized it was\n            seven tiny cells beside a wide preset column. */}\n        <div className=\"min-w-0 flex-1\">{calendar}</div>\n      </div>\n    ) : (\n      calendar\n    );\n\n  if (!drafting) return frame(body);\n  return frame(\n    body,\n    <>\n      {/* `flex-1` in the sheet: two thumb-wide halves of the footer, not two small\n          buttons in its corner. */}\n      <Button type=\"button\" variant=\"ghost\" className={sheet ? \"flex-1\" : undefined} onClick={close}>\n        {labels.cancel}\n      </Button>\n      <Button\n        type=\"button\"\n        className={sheet ? \"flex-1\" : undefined}\n        // A half-made `(from, \"\")` would commit a window with no end — a blank\n        // report, one click into a two-click gesture.\n        disabled={!complete}\n        onClick={() => {\n          if (!complete) return;\n          commitRange(draft.from, draft.to, draft.presetId);\n          close();\n        }}\n      >\n        {labels.apply}\n      </Button>\n    </>,\n  );\n}\n\n/** Two-date range picker: click a start then an end; closes once both are set.\n *  With `presets`, a column of named ranges is shown beside the calendar; with `apply`\n *  the panel drafts and commits on Apply (see {@link DateRangePickerProps.apply}). */\nexport function DateRangePicker(props: DateRangePickerProps) {\n  const {\n    from,\n    to,\n    onChange,\n    locale: localeProp,\n    placeholder,\n    min,\n    max,\n    formatOptions,\n    formatValue,\n    separator = \" – \",\n    presets,\n    preset,\n    apply,\n    commit,\n    renderTrigger,\n    sheetBackCloses,\n    renderDraftSummary,\n    calendarLabels,\n    monthJump,\n    label,\n    clearable,\n    clearLabel,\n    disabled,\n    disabledReason,\n    disabledReasonDisplay,\n    invalid,\n    hint,\n    help,\n    error,\n    className,\n    // The trigger's (API-3).\n    ref,\n    ...rest\n  } = props;\n  const locale = useKitLocale(localeProp);\n  const text = useDatePickerLabels(clearLabel, undefined, undefined);\n  const render = useTriggerFormat(\"dateRangePicker\", locale, formatOptions, formatValue);\n  const drafting = apply ?? false;\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  const messages = useFieldMessages({\n    hint,\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: rest[\"aria-describedby\"],\n    ariaInvalid: rest[\"aria-invalid\"],\n    // A lock's reason between the caption and the error, as on Select.\n    reasonId: locked && lock.reasonId,\n  });\n  // The preset this picker committed itself, for a caller that does not control\n  // `preset`. Cleared by a hand-picked range or a clear.\n  const [ownPreset, setOwnPreset] = useState<string | undefined>(undefined);\n  const controlled = preset !== undefined;\n  const activeId = controlled ? preset : ownPreset;\n  const a = from ? render(from) : \"\";\n  const b = to ? render(to) : \"\";\n  const triggerText = from ? (to ? `${a}${separator}${b}` : `${a}${separator}…`) : (placeholder ?? \"\");\n  const hasPresets = Boolean(presets && presets.length > 0);\n  const sheet = usePhoneLayout();\n  const commitRange = (f: string, t: string, presetId: string | undefined) => {\n    if (locked) return;\n    setOwnPreset(presetId);\n    // Two arguments when no preset is involved — exactly the 0.7 call, so a caller's\n    // `toHaveBeenCalledWith(from, to)` and a variadic handler see no difference.\n    if (presetId === undefined) onChange(f, t);\n    else onChange(f, t, presetId);\n  };\n  const field = (\n    <DateField\n      {...rest}\n      fieldRef={ref}\n      aria-describedby={messages.describedBy}\n      label={label}\n      labelHint={messages.labelHint}\n      clearable={clearable}\n      clearLabel={text.clear}\n      panelLabel={text.rangePanel}\n      disabled={disabled}\n      locked={locked}\n      // Locked, the caller's classes are the reason's frame's (below).\n      className={locked ? undefined : className}\n      invalid={messages.isInvalid}\n      // Widen so the preset column sits beside the calendar (default otherwise).\n      width={hasPresets ? \"27.5rem\" : undefined}\n      hasValue={Boolean(from || to)}\n      triggerText={triggerText}\n      onClear={() => commitRange(\"\", \"\", undefined)}\n      sheet={sheet}\n      sheetBackCloses={sheetBackCloses}\n      renderTrigger={\n        renderTrigger &&\n        ((triggerProps, valueId) =>\n          renderTrigger({\n            triggerProps,\n            valueProps: { id: valueId },\n            open: triggerProps[\"aria-expanded\"],\n            from,\n            to,\n            preset: presets?.[markedPreset(presets, from, to, activeId, controlled)],\n            text: triggerText,\n          }))\n      }\n    >\n      {(close, frame) => (\n        <RangePanel\n          from={from}\n          to={to}\n          presets={presets}\n          activeId={activeId}\n          controlled={controlled}\n          drafting={drafting}\n          close={close}\n          frame={frame}\n          sheet={sheet}\n          commitRange={commitRange}\n          calendarProps={{ locale, min, max, labels: calendarLabels, monthJump }}\n          labels={text}\n          renderDraftSummary={renderDraftSummary}\n        />\n      )}\n    </DateField>\n  );\n  const box = withEndHint(field, label === undefined ? messages.labelHint : undefined);\n  return (\n    <FieldBox below={messages.below} reserve={\"error\" in props || \"hint\" in props}>\n      {locked ? (\n        // DatePicker's frame: the line under the field, or the Tooltip with a hidden copy\n        // for `aria-describedby`; the outermost box, so it takes the caller's classes.\n        <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n          {box}\n        </LockedReason>\n      ) : (\n        box\n      )}\n    </FieldBox>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/error-boundary.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Component } from "react";
+import { Component, useEffect } from "react";
 import { AlertTriangle, RefreshCw, WifiOff } from "lucide-react";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { Button } from "./button.js";
@@ -8,6 +8,7 @@ import { EmptyState } from "./empty-state.js";
 import { CopyButton } from "./copy-button.js";
 import { Disclosure } from "./disclosure.js";
 import { documentNavigation } from "../lib/document-navigation.js";
+import { useAnnounce } from "../hooks/use-announce.js";
 import { DEFAULT_ERROR_BOUNDARY_LABELS } from "./error-boundary-labels.js";
 function read(get) {
   try {
@@ -264,37 +265,43 @@ function ErrorFallback({
   const Icon = mode === "offline" ? WifiOff : mode === "update" ? RefreshCw : AlertTriangle;
   const reportText = report ? formatCrashReport(report) : null;
   const errorLine = details.message ? `${details.name}: ${details.message}` : details.name;
+  const alert = useAnnounce({ politeness: "assertive" });
+  const { announce } = alert;
+  const spoken = `${title}. ${hint}`;
+  useEffect(() => announce(spoken), [announce, spoken]);
   const reloadButton = /* @__PURE__ */ jsx(Button, { variant: mode === "error" ? "secondary" : "default", onClick: reloadPage, children: text.reload }, "reload");
   const retryButton = chunk ? null : /* @__PURE__ */ jsx(Button, { variant: mode === "error" ? "default" : "secondary", onClick: reset, children: text.retry }, "retry");
-  return /* @__PURE__ */ jsx(
-    EmptyState,
-    {
-      role: "alert",
-      tone: mode === "error" ? "danger" : void 0,
-      headingAs,
-      className,
-      icon: /* @__PURE__ */ jsx(Icon, {}),
-      title,
-      hint,
-      action: /* @__PURE__ */ jsxs(Fragment, { children: [
-        showMessage && mode === "error" && // A quotation, not prose: left-aligned and monospaced, so it reads as the
-        // program's words and can be read out or screenshotted verbatim.
-        /* @__PURE__ */ jsx(
-          "p",
-          {
-            "data-error-message": "",
-            className: "-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-danger-strong bg-danger-soft px-3 py-2 text-start font-mono text-xs text-primary",
-            children: errorLine
-          }
-        ),
-        filing === "filed" && /* @__PURE__ */ jsx("p", { className: "-mt-1 mb-1 basis-full text-xs", children: reference ? text.reportedAs(reference) : text.reported }),
-        mode === "error" ? [retryButton, reloadButton] : [reloadButton, retryButton],
-        copyReport && reportText !== null && filing !== "filed" && /* @__PURE__ */ jsx(CopyButton, { variant: "label", buttonVariant: "ghost", label: text.copyReport, text: reportText }),
-        actions,
-        showDetails && reportText !== null && /* @__PURE__ */ jsx(Disclosure, { variant: "bare", title: text.details, className: "basis-full text-start", children: /* @__PURE__ */ jsx("pre", { className: "max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-secondary", children: reportText }) })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { ...alert.regionProps }),
+    /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        tone: mode === "error" ? "danger" : void 0,
+        headingAs,
+        className,
+        icon: /* @__PURE__ */ jsx(Icon, {}),
+        title,
+        hint,
+        action: /* @__PURE__ */ jsxs(Fragment, { children: [
+          showMessage && mode === "error" && // A quotation, not prose: left-aligned and monospaced, so it reads as the
+          // program's words and can be read out or screenshotted verbatim.
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-error-message": "",
+              className: "-mt-1 mb-1 basis-full whitespace-pre-wrap break-words rounded-md border border-danger-strong bg-danger-soft px-3 py-2 text-start font-mono text-xs text-primary",
+              children: errorLine
+            }
+          ),
+          filing === "filed" && /* @__PURE__ */ jsx("p", { className: "-mt-1 mb-1 basis-full text-xs", children: reference ? text.reportedAs(reference) : text.reported }),
+          mode === "error" ? [retryButton, reloadButton] : [reloadButton, retryButton],
+          copyReport && reportText !== null && filing !== "filed" && /* @__PURE__ */ jsx(CopyButton, { variant: "label", buttonVariant: "ghost", label: text.copyReport, text: reportText }),
+          actions,
+          showDetails && reportText !== null && /* @__PURE__ */ jsx(Disclosure, { variant: "bare", title: text.details, className: "basis-full text-start", children: /* @__PURE__ */ jsx("pre", { className: "max-h-60 overflow-auto whitespace-pre-wrap break-words text-xs text-secondary", children: reportText }) })
+        ] })
+      }
+    )
+  ] });
 }
 export {
   DEFAULT_ERROR_BOUNDARY_LABELS,