@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/components/form-actions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { isApplePlatform } from \"../hooks/use-hotkey\";\nimport { Button, Spinner, type ButtonProps, type ButtonSize, type ButtonVariant } from \"./ui\";\nimport { useWriteLock } from \"./write-lock\";\n\n/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */\nexport interface FormActionsLabels {\n  save: string;\n  cancel: string;\n  /**\n   * The {@link FormActionsProps.submitShortcut} hint beside Save's text, when\n   * {@link FormActionsProps.submitShortcutHint} shows it. `apple` is true on a Mac,\n   * iPhone or iPad, where the key is Cmd: \"⌘ Enter\" there, \"Ctrl+Enter\" elsewhere\n   * (a German keyboard says \"Strg\").\n   */\n  submitShortcut: (apple: boolean) => string;\n}\n\nexport const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels = {\n  save: \"Save\",\n  cancel: \"Cancel\",\n  submitShortcut: (apple) => (apple ? \"⌘ Enter\" : \"Ctrl+Enter\"),\n};\n\n/** See {@link FormActionsProps.submitShortcut}. */\nexport type FormActionsSubmitShortcut = \"mod-enter\";\n\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\n/**\n * Where the row sits:\n *  - `inline` (default): under the form's last field, `pt-4` above it.\n *  - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface\n *    colour with a rule above, clear of the phone's home indicator — for a long form\n *    whose Save should not be a scroll away.\n *  - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,\n *    FullBleedDialog's `footer`), which already pads and rules it.\n */\nexport type FormActionsPlacement = \"inline\" | \"sticky\" | \"dialog\";\n\n/**\n * A placement per breakpoint, mobile first — `{ base: \"sticky\", md: \"inline\" }` is a\n * Save row stuck to the bottom of a phone's long form and in the flow under the last\n * field from 768px up, where the form fits. The breakpoints are Tailwind's (sm 640,\n * md 768, lg 1024, xl 1280px), as `BulkActionBar`'s `variant` breakpoints are, and\n * resolved the same way, in JS: the sticky row is positioned by inline style, which a\n * `md:` class cannot reach. keksdose switched `placement` on its own media query at\n * every long form for want of this. The breakpoints are the VIEWPORT's, not the\n * container's: a form in a narrow pane on a wide screen resolves to `md`.\n */\nexport interface ResponsiveFormActionsPlacement {\n  base: FormActionsPlacement;\n  sm?: FormActionsPlacement;\n  md?: FormActionsPlacement;\n  lg?: FormActionsPlacement;\n  xl?: FormActionsPlacement;\n}\n\nconst BREAKPOINTS = [\n  [\"xl\", \"(min-width: 1280px)\"],\n  [\"lg\", \"(min-width: 1024px)\"],\n  [\"md\", \"(min-width: 768px)\"],\n  [\"sm\", \"(min-width: 640px)\"],\n] as const;\n\n/** The placement in force: the widest breakpoint that matches AND names one, else\n *  `base`. The queries are subscribed unconditionally (hooks cannot be skipped); a\n *  plain string ignores them. Without `matchMedia` (SSR, tests) none match, so the row\n *  renders its `base`, the phone's. The same resolution as BulkActionBar's variant. */\nfunction useResolvedPlacement(\n  placement: FormActionsPlacement | ResponsiveFormActionsPlacement,\n): FormActionsPlacement {\n  const matches = {\n    xl: useMediaQuery(BREAKPOINTS[0][1], false),\n    lg: useMediaQuery(BREAKPOINTS[1][1], false),\n    md: useMediaQuery(BREAKPOINTS[2][1], false),\n    sm: useMediaQuery(BREAKPOINTS[3][1], false),\n  };\n  if (typeof placement === \"string\") return placement;\n  for (const [key] of BREAKPOINTS) {\n    const p = placement[key];\n    if (matches[key] && p !== undefined) return p;\n  }\n  return placement.base;\n}\n\n/** A CSS length: a number is pixels. */\nfunction cssLength(value: string | number): string {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * What a `sticky` row sticks to — see {@link FormActionsProps.stickyWithin}.\n *  - `viewport` (default): the page's (or AppShell pane's) bottom edge, lifted onto\n *    the phone's bottom nav by `--app-nav-h`.\n *  - `container`: the bottom of whatever scroll container it is in — a dialog body, a\n *    side pane, a panel with `overflow-y-auto` — at `bottom: 0`, with no nav offset.\n */\nexport type FormActionsStickyWithin = \"viewport\" | \"container\";\n\n/**\n * Extra attributes for the save button — an `id`, `data-*` hooks for tests or\n * analytics, an `aria-describedby`. The props FormActions drives itself (type, click,\n * disabled, variant, form, children, the busy state) are not among them.\n */\nexport type FormActionsSubmitProps = Omit<\n  ButtonProps,\n  \"type\" | \"onClick\" | \"disabled\" | \"disabledReason\" | \"variant\" | \"form\" | \"children\" | \"aria-busy\" | \"commit\"\n> & { [key: `data-${string}`]: string | number | boolean | undefined };\n\n/** The start-side action of {@link FormActionsProps.destructive}, as data. */\nexport interface FormActionsDestructive {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  /** See Button's `disabledReason`. */\n  disabledReason?: ReactNode;\n}\n\nconst ALIGN_CLASS: Record<FormActionsAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {\n  inline: \"pt-4\",\n  sticky: \"sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3\",\n  dialog: \"\",\n};\n\nexport interface FormActionsProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */\n  onCancel?: () => void;\n  /**\n   * Given: the save button is `type=\"button\"` and calls this — for a dialog or a row\n   * that saves from a handler. Omitted: it is `type=\"submit\"` and submits the\n   * enclosing `<form>` (or the one named by {@link form}).\n   */\n  onSubmit?: () => void;\n  /** The save button's text. Default `form.save` from the provider, else \"Save\". */\n  submitLabel?: ReactNode;\n  /** The cancel button's text. Default `form.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /** The save button's text while `pending` (\"Saving…\"). Default: `submitLabel`. */\n  pendingLabel?: ReactNode;\n  /**\n   * A Lucide icon before the save button's text. While `pending` the spinner takes\n   * ITS place rather than being added in front of it — an icon written into\n   * `submitLabel` itself stays, so the button would show the spinner AND the glyph,\n   * two statuses side by side (keksdose's crop Apply needed a `pendingLabel` copy of\n   * its text only to drop the check mark).\n   */\n  submitIcon?: LucideIcon;\n  /** Attributes passed through to the save button: `id`, `data-*`, `aria-*`, a\n   *  `className`. See {@link FormActionsSubmitProps}. */\n  submitProps?: FormActionsSubmitProps;\n  /**\n   * The save is running: a spinner in the save button, `aria-busy` on it, and the\n   * button disabled, so a second click cannot send the form twice. Cancel stays\n   * usable. The spinner goes in front of the text, or in place of {@link submitIcon}.\n   */\n  pending?: boolean;\n  /** Disable save for a reason of the form's own (an unbalanced entry). */\n  submitDisabled?: boolean;\n  /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */\n  submitDisabledReason?: ReactNode;\n  /**\n   * Save is a commit: under a locked {@link WriteLockProvider} it is disabled with the\n   * lock's reason (over `submitDisabledReason`), focusable, the reason in its tooltip —\n   * Button's `commit`. The `{ label, onClick }` form of {@link destructive} is a\n   * commit too and is locked with it; Cancel and `children` are not (closing a form\n   * writes nothing). No provider, or an unlocked one: no effect. Default `false`.\n   *\n   * keksdose wrote `submitDisabled={lock.locked || …}` and\n   * `submitDisabledReason={lock.locked ? lock.reason : undefined}` at each form; this is\n   * that pair, read from the provider.\n   */\n  commit?: boolean;\n  /** The save button's variant. Default `brand`; `danger` for a save that destroys\n   *  (kastlan's `destructive` flag on its own FormActions). */\n  submitVariant?: ButtonVariant;\n  /**\n   * The Cancel button's variant. Default `secondary` (the outlined button, as before).\n   * `ghost` for a row where Cancel should step back further than an outline — keksdose\n   * G3: a quiet inline row (a confirm under a table row, a card's own small editor)\n   * whose Cancel was a ghost button before it moved onto FormActions, which drew every\n   * Cancel outlined.\n   */\n  cancelVariant?: ButtonVariant;\n  /**\n   * The size of every button the row draws itself — Save, Cancel and the\n   * `{ label, onClick }` form of {@link destructive}: Button's `size`. Default `md`.\n   * `sm` (12px text, `px-2 py-1`) for a dense row: a confirm inside a table's expansion\n   * row, a toolbar card. keksdose G3: two such rows had small hand-built buttons and lost\n   * them on adopting FormActions, which had no size. At `sm` the spinner and\n   * {@link submitIcon} shrink with the text.\n   *\n   * Your own elements (`children`, an element passed as `destructive`, `start`) are\n   * yours to size — pass them `size=\"sm\"` too. A `size` in {@link submitProps} still\n   * wins for Save, as it always has.\n   */\n  size?: ButtonSize;\n  /**\n   * A destructive action at the START of the row, apart from Save and Cancel — the\n   * \"Delete\" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger\n   * button, or an element of your own (a {@link DangerConfirm}, say). With it the row\n   * is `between`-aligned unless `align` says otherwise.\n   */\n  destructive?: ReactNode | FormActionsDestructive;\n  /**\n   * Something neutral at the START of the row — a caption (\"Last saved 2 min ago\",\n   * \"Drag the corners to crop\"), a \"View activity\" link. After {@link destructive}\n   * when both are given; like it, makes the row `between`-aligned unless `align` says\n   * otherwise. `children` are for further ACTIONS, beside Cancel.\n   */\n  start?: ReactNode;\n  /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */\n  align?: FormActionsAlign;\n  /** See {@link FormActionsPlacement}, or one per breakpoint — see\n   *  {@link ResponsiveFormActionsPlacement}. Default `inline`. */\n  placement?: FormActionsPlacement | ResponsiveFormActionsPlacement;\n  /**\n   * While the row is `sticky`: pull it out over its container's inline padding by this\n   * much (a CSS length, a number in px) and give the same back as padding — so the\n   * rule above it and its surface run edge to edge, while the buttons stay on the\n   * content's line. Without it a sticky row in a padded card or pane is a strip inset\n   * from both sides, with the content scrolling past it in the gutters (keksdose wrote\n   * `@max-md:-mx-3 @max-md:px-3` by hand). Pass the container's padding (`\"0.75rem\"`,\n   * `12`, `\"var(--pane-px)\"`). Applied only while the resolved placement is sticky, so\n   * `placement={{ base: \"sticky\", md: \"inline\" }}` bleeds on the phone alone. The margin\n   * is `calc(-1 * X)`; jsdom folds that to `calc(-X)`, so match it loosely in tests.\n   */\n  bleed?: string | number;\n  /**\n   * With `placement=\"sticky\"`: what the row sticks to. Default `viewport`.\n   *\n   * CSS sticky always sticks to the NEAREST scroll container, so the default row\n   * already holds inside a scrolling pane — but it offsets itself by `--app-nav-h`,\n   * which AppShell publishes on the document: inside a pane or a portalled dialog\n   * body on a phone it then floats a nav's height above that container's bottom,\n   * with the content scrolling through the gap. `container` drops that offset.\n   *\n   * What neither value can fix, because it is the layout, not the row:\n   *  - sticky moves only within its PARENT box. Inside a DataTable expansion row the\n   *    parent is the expansion cell, so the row pins to the table's own scroller\n   *    (`overflow-auto`, bounded by `maxBodyHeight`) and only while the cell spans\n   *    that scroller's bottom edge — not to the page.\n   *  - any `overflow` other than `visible`/`clip` between the row and the scroller\n   *    you mean (an `overflow-x-auto` wrapper, an `overflow-hidden` card) becomes the\n   *    scroll container; if THAT box does not scroll, the row never sticks.\n   *  - the offset is resolved against the scroller's content box, so a scroller with\n   *    bottom padding leaves that strip uncovered; give the row a negative `bottom`\n   *    through `style` and the same amount back as padding.\n   */\n  stickyWithin?: FormActionsStickyWithin;\n  /** The `id` of the `<form>` the save button submits, when the row is rendered\n   *  outside it (a dialog's footer slot). */\n  form?: string;\n  /**\n   * A keyboard shortcut that presses Save from anywhere in the form. `\"mod-enter\"`:\n   * Ctrl+Enter, or Cmd+Enter on a Mac — both are accepted everywhere, as keksdose's\n   * editors always have. keksdose K14 (inputs audit 2026-10-02, S5): its transaction\n   * editor, category editor and create card each wrote this as an `onKeyDown` on a\n   * container, re-stating `!pending && !saveDisabled && !lock.locked` every time, and\n   * the one that forgot the lock let the demo's refused save through from the keyboard.\n   *\n   * What it does is what pressing Save does — the same button is clicked, so a form\n   * submits with its validation and its submitter, and `onSubmit` is called in the\n   * `type=\"button\"` mode — and it does NOTHING while Save could not be pressed:\n   * `pending`, `submitDisabled`, or a `commit` under a locked {@link WriteLockProvider}.\n   *\n   * Scoped to the form Save submits (the `form` prop's, else the enclosing `<form>`):\n   * the chord counts only when the focus is inside it, so two editors on one page each\n   * answer for their own fields. Without a form (an `onSubmit` row in a plain container)\n   * the scope is the nearest `role=\"dialog\"`, else the row's parent element — the\n   * container the row ends.\n   *\n   * Listened for on the document, so it runs AFTER every React handler: a field that\n   * takes Ctrl+Enter for itself calls `preventDefault()` or `stopPropagation()` and\n   * the row stays out of it (keksdose live #202 — the create card's Ctrl+Shift+Enter\n   * must create ONE row; the chord here is exactly Ctrl/Cmd+Enter, never with Shift or\n   * Alt). Not during IME composition, and not on a held key's repeats.\n   *\n   * The save button announces it with `aria-keyshortcuts`; {@link submitShortcutHint}\n   * also shows it.\n   */\n  submitShortcut?: FormActionsSubmitShortcut;\n  /** Show the {@link submitShortcut} beside Save's text (\"Ctrl+Enter\", \"⌘ Enter\"; the\n   *  `form.submitShortcut` label), dimmed. Hidden on a touch-only device, which has no\n   *  keyboard to press it on. Default `false`. */\n  submitShortcutHint?: boolean;\n  /** Extra actions, placed before Cancel. */\n  children?: ReactNode;\n}\n\n/** Hand `el` to a caller's ref, whichever kind it is. */\nfunction assignRef<E>(ref: Ref<E> | undefined, el: E | null): void {\n  if (typeof ref === \"function\") ref(el);\n  else if (ref) (ref as { current: E | null }).current = el;\n}\n\n/**\n * Where {@link FormActionsProps.submitShortcut} listens: the form Save submits (named\n * by `formId`, else the enclosing one), else the nearest dialog, else the row's parent.\n */\nfunction shortcutScope(row: HTMLElement | null, formId: string | undefined): Element | null {\n  if (!row) return null;\n  const named = formId ? row.ownerDocument.getElementById(formId) : null;\n  if (named instanceof HTMLFormElement) return named;\n  return row.closest(\"form\") ?? row.closest('[role=\"dialog\"]') ?? row.parentElement;\n}\n\nfunction isDestructiveData(value: unknown): value is FormActionsDestructive {\n  return typeof value === \"object\" && value !== null && !isValidElement(value) && \"onClick\" in value;\n}\n\n/**\n * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's\n * `FormActions`, with the labels from the provider, a pending state and a place for\n * the destructive action.\n *\n * ```tsx\n * <form onSubmit={form.handleSubmit(save)}>\n *   …\n *   <FormActions onCancel={close} pending={mutation.isPending} />\n * </form>\n * ```\n *\n * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`\n * so the button's name stays its text; `aria-busy` is what says it is working.\n */\nexport function FormActions({\n  onCancel,\n  onSubmit,\n  submitLabel,\n  cancelLabel,\n  pendingLabel,\n  submitIcon: SubmitIcon,\n  submitProps,\n  pending = false,\n  submitDisabled = false,\n  submitDisabledReason,\n  commit = false,\n  submitVariant = \"brand\",\n  cancelVariant = \"secondary\",\n  size = \"md\",\n  destructive,\n  start: startSlot,\n  align,\n  placement: placementProp = \"inline\",\n  stickyWithin = \"viewport\",\n  bleed,\n  form,\n  submitShortcut,\n  submitShortcutHint = false,\n  children,\n  className,\n  style,\n  ...rest\n}: FormActionsProps) {\n  const labels = useKitLabels(\"form\", DEFAULT_FORM_ACTIONS_LABELS);\n  const lock = useWriteLock();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const saveRef = useRef<HTMLButtonElement | null>(null);\n  // The caller's own `submitProps.ref` still gets the element.\n  const callerSaveRef = submitProps?.ref;\n  const setSaveRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      saveRef.current = el;\n      assignRef(callerSaveRef, el);\n    },\n    [callerSaveRef],\n  );\n  // The save settled and the form is still here — it failed, and the user retries. The\n  // button was natively disabled while it ran, and a focused button that turns disabled\n  // drops the focus to <body> (DangerConfirm's 0.24 fix, keksdose). Only after a press\n  // of THIS button (`pressed`: a click or the shortcut), so a `pending` that comes and\n  // goes on its own never pulls the page's focus in.\n  const pressed = useRef(false);\n  const wasPending = useRef(pending);\n  useEffect(() => {\n    const settled = wasPending.current && !pending;\n    wasPending.current = pending;\n    if (!settled) return;\n    const ours = pressed.current;\n    pressed.current = false;\n    if (!ours) return;\n    if (document.activeElement === null || document.activeElement === document.body) saveRef.current?.focus();\n  }, [pending]);\n  // Read by the shortcut's listener at the moment of the key press, so the listener\n  // itself is attached once and never sees a stale `pending`.\n  const canSave = !pending && !submitDisabled && !(commit && lock.locked);\n  const canSaveRef = useRef(canSave);\n  useEffect(() => {\n    canSaveRef.current = canSave;\n  });\n  useEffect(() => {\n    if (submitShortcut !== \"mod-enter\") return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"Enter\" || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) return;\n      if (e.repeat || e.isComposing || e.defaultPrevented || !canSaveRef.current) return;\n      const scope = shortcutScope(rootRef.current, form);\n      if (!scope || !(e.target instanceof Node) || !scope.contains(e.target)) return;\n      e.preventDefault();\n      saveRef.current?.click();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [submitShortcut, form]);\n  const apple = submitShortcut ? isApplePlatform() : false;\n  const placement = useResolvedPlacement(placementProp);\n  const bleedLength = bleed === undefined || bleed === \"\" ? undefined : cssLength(bleed);\n  const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;\n  const hasStart = startSlot !== undefined && startSlot !== null && startSlot !== false;\n  const justify = align ?? (hasDestructive || hasStart ? \"between\" : \"end\");\n  const destructiveNode = !hasDestructive ? null : isDestructiveData(destructive) ? (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      tone=\"danger\"\n      size={size}\n      onClick={destructive.onClick}\n      disabled={destructive.disabled}\n      disabledReason={destructive.disabledReason}\n      commit={commit}\n    >\n      {destructive.label}\n    </Button>\n  ) : (\n    destructive\n  );\n  const saveLabel = submitLabel ?? labels.save;\n  // The glyphs follow the text: 16px beside `md`'s 14px text, 14px beside `sm`'s 12px.\n  const saveSize = submitProps?.size ?? size;\n  const glyphClass = saveSize === \"sm\" ? \"size-3.5\" : \"size-4\";\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"form-actions\"\n      data-placement={placement}\n      data-sticky-within={placement === \"sticky\" ? stickyWithin : undefined}\n      {...rest}\n      style={\n        placement === \"sticky\"\n          ? {\n              paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\",\n              // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`\n              // pinned the row under AppShell's nav, which covers the page's last ~56px.\n              // `--app-nav-h` is the nav's measured height (0px from md up, and outside an\n              // AppShell); the 1px overlaps the two top borders into one line. In a\n              // container the nav is not underneath: `--app-nav-h` is the document's,\n              // and would hold the row that far above the container's own edge.\n              bottom: stickyWithin === \"container\" ? 0 : \"max(0px, calc(var(--app-nav-h, 0px) - 1px))\",\n              ...(bleedLength !== undefined && {\n                marginInline: `calc(-1 * ${bleedLength})`,\n                paddingInline: bleedLength,\n              }),\n              ...style,\n            }\n          : style\n      }\n      className={cn(\"flex flex-wrap items-center gap-2\", ALIGN_CLASS[justify], PLACEMENT_CLASS[placement], className)}\n    >\n      {(hasDestructive || hasStart) && (\n        <div className=\"me-auto flex min-w-0 flex-wrap items-center gap-2\">\n          {destructiveNode}\n          {hasStart && startSlot}\n        </div>\n      )}\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {children}\n        {onCancel && (\n          <Button type=\"button\" variant={cancelVariant} size={size} onClick={onCancel}>\n            {cancelLabel ?? labels.cancel}\n          </Button>\n        )}\n        <Button\n          {...submitProps}\n          ref={setSaveRef}\n          aria-keyshortcuts={\n            submitShortcut === \"mod-enter\" ? \"Control+Enter Meta+Enter\" : submitProps?.[\"aria-keyshortcuts\"]\n          }\n          type={onSubmit ? \"button\" : \"submit\"}\n          form={form}\n          onClick={() => {\n            pressed.current = true;\n            onSubmit?.();\n          }}\n          variant={submitVariant}\n          size={saveSize}\n          disabled={pending || submitDisabled}\n          disabledReason={pending ? undefined : submitDisabledReason}\n          // Not while pending: the save already left, and the lock's look over the\n          // spinner would say it had not.\n          commit={commit && !pending}\n          aria-busy={pending || undefined}\n        >\n          {pending ? (\n            <Spinner label={null} className={glyphClass} />\n          ) : (\n            SubmitIcon && <SubmitIcon aria-hidden className={cn(glyphClass, \"shrink-0\")} />\n          )}\n          {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}\n          {submitShortcut && submitShortcutHint && (\n            // Hidden from the accessibility tree: `aria-keyshortcuts` already says it,\n            // and in the name it would make the button \"Save Ctrl+Enter\".\n            <kbd\n              aria-hidden\n              className=\"ms-1 font-sans text-[0.85em] font-normal whitespace-nowrap opacity-70 pointer-coarse:hidden\"\n            >\n              {labels.submitShortcut(apple)}\n            </kbd>\n          )}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/form-actions.tsx"],"sourcesContent":["import { isValidElement, useCallback, useEffect, useRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useBreakpoint, usePhoneLayout } from \"../hooks/use-breakpoint\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { isApplePlatform } from \"../hooks/use-hotkey\";\nimport { Button, Spinner, type ButtonProps, type ButtonSize, type ButtonVariant } from \"./ui\";\nimport { useWriteLock } from \"./write-lock\";\n\n/** The words {@link FormActions} renders on its own behalf — the `form` namespace. */\nexport interface FormActionsLabels {\n  save: string;\n  cancel: string;\n  /**\n   * The {@link FormActionsProps.submitShortcut} hint beside Save's text, when\n   * {@link FormActionsProps.submitShortcutHint} shows it. `apple` is true on a Mac,\n   * iPhone or iPad, where the key is Cmd: \"⌘ Enter\" there, \"Ctrl+Enter\" elsewhere\n   * (a German keyboard says \"Strg\").\n   */\n  submitShortcut: (apple: boolean) => string;\n}\n\nexport const DEFAULT_FORM_ACTIONS_LABELS: FormActionsLabels = {\n  save: \"Save\",\n  cancel: \"Cancel\",\n  submitShortcut: (apple) => (apple ? \"⌘ Enter\" : \"Ctrl+Enter\"),\n};\n\n/** See {@link FormActionsProps.submitShortcut}. */\nexport type FormActionsSubmitShortcut = \"mod-enter\";\n\nexport type FormActionsAlign = \"start\" | \"center\" | \"end\" | \"between\";\n\n/**\n * Where the row sits:\n *  - `inline` (default): under the form's last field, `pt-4` above it.\n *  - `sticky`: stuck to the bottom of the scrolling page or pane, on the surface\n *    colour with a rule above, clear of the phone's home indicator — for a long form\n *    whose Save should not be a scroll away.\n *  - `dialog`: no spacing of its own, for a dialog's footer slot (DialogFrame,\n *    FullBleedDialog's `footer`), which already pads and rules it.\n */\nexport type FormActionsPlacement = \"inline\" | \"sticky\" | \"dialog\";\n\n/**\n * When the row's buttons STACK, one per line at the row's full width (0.32,\n * docs/text-size-harmonization.md §4 \"FormActions stack full width on a phone layout\"):\n *\n *  - `\"auto\"` (default): on the phone layout (`usePhoneLayout()`, `max-md:` at the text\n *    size in force) at Large and Extra large. There a phone is 312 or 260 px of text\n *    wide, and Cancel and a \"Save changes\" side by side wrap into a ragged pair with\n *    one 48 px target squeezed against the other. Normal keeps the row the apps tuned.\n *  - `\"phone\"`: on the phone layout at every text size.\n *  - `\"never\"`: always the row.\n *\n * Stacked, the order is the DOM's — the start group (the destructive action), the extra\n * actions, Cancel, then Save at the bottom, under the thumb — so the visual order and\n * the tab order stay one.\n */\nexport type FormActionsStack = \"auto\" | \"phone\" | \"never\";\n\n/**\n * A placement per breakpoint, mobile first — `{ base: \"sticky\", md: \"inline\" }` is a\n * Save row stuck to the bottom of a phone's long form and in the flow under the last\n * field from 768px up, where the form fits. The breakpoints are the classes' (sm 640,\n * md 768, lg 1024, xl 1280px at Normal text size, and 1.25 / 1.5 times that at Large /\n * Extra large, as `md:` is since 0.32), as `BulkActionBar`'s `variant` breakpoints are, and\n * resolved the same way, in JS: the sticky row is positioned by inline style, which a\n * `md:` class cannot reach. keksdose switched `placement` on its own media query at\n * every long form for want of this. The breakpoints are the VIEWPORT's, not the\n * container's: a form in a narrow pane on a wide screen resolves to `md`.\n */\nexport interface ResponsiveFormActionsPlacement {\n  base: FormActionsPlacement;\n  sm?: FormActionsPlacement;\n  md?: FormActionsPlacement;\n  lg?: FormActionsPlacement;\n  xl?: FormActionsPlacement;\n}\n\n/** Widest first: the first that matches and names a value wins. Each is the class's own\n *  breakpoint at the text size in force (`useBreakpoint`), so `md` here is `md:` there. */\nconst BREAKPOINTS = [\"xl\", \"lg\", \"md\", \"sm\"] as const;\n\n/** The placement in force: the widest breakpoint that matches AND names one, else\n *  `base`. The queries are subscribed unconditionally (hooks cannot be skipped); a\n *  plain string ignores them. Without `matchMedia` (SSR, tests) none match, so the row\n *  renders its `base`, the phone's. The same resolution as BulkActionBar's variant. */\nfunction useResolvedPlacement(\n  placement: FormActionsPlacement | ResponsiveFormActionsPlacement,\n): FormActionsPlacement {\n  const matches = {\n    xl: useBreakpoint(\"xl\"),\n    lg: useBreakpoint(\"lg\"),\n    md: useBreakpoint(\"md\"),\n    sm: useBreakpoint(\"sm\"),\n  };\n  if (typeof placement === \"string\") return placement;\n  for (const key of BREAKPOINTS) {\n    const p = placement[key];\n    if (matches[key] && p !== undefined) return p;\n  }\n  return placement.base;\n}\n\n/** A CSS length: a number is pixels. */\nfunction cssLength(value: string | number): string {\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\n/**\n * What a `sticky` row sticks to — see {@link FormActionsProps.stickyWithin}.\n *  - `viewport` (default): the page's (or AppShell pane's) bottom edge, lifted onto\n *    the phone's bottom nav by `--app-nav-h`.\n *  - `container`: the bottom of whatever scroll container it is in — a dialog body, a\n *    side pane, a panel with `overflow-y-auto` — at `bottom: 0`, with no nav offset.\n */\nexport type FormActionsStickyWithin = \"viewport\" | \"container\";\n\n/**\n * Extra attributes for the save button — an `id`, `data-*` hooks for tests or\n * analytics, an `aria-describedby`. The props FormActions drives itself (type, click,\n * disabled, variant, form, children, the busy state) are not among them.\n */\nexport type FormActionsSubmitProps = Omit<\n  ButtonProps,\n  \"type\" | \"onClick\" | \"disabled\" | \"disabledReason\" | \"variant\" | \"form\" | \"children\" | \"aria-busy\" | \"commit\"\n> & { [key: `data-${string}`]: string | number | boolean | undefined };\n\n/** The start-side action of {@link FormActionsProps.destructive}, as data. */\nexport interface FormActionsDestructive {\n  label: ReactNode;\n  onClick: () => void;\n  disabled?: boolean;\n  /** See Button's `disabledReason`. */\n  disabledReason?: ReactNode;\n}\n\nconst ALIGN_CLASS: Record<FormActionsAlign, string> = {\n  start: \"justify-start\",\n  center: \"justify-center\",\n  end: \"justify-end\",\n  between: \"justify-between\",\n};\n\nconst PLACEMENT_CLASS: Record<FormActionsPlacement, string> = {\n  inline: \"pt-4\",\n  sticky: \"sticky bottom-0 z-10 border-t border-[var(--border)] bg-[var(--bg-surface)] pt-3\",\n  dialog: \"\",\n};\n\nexport interface FormActionsProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Called by Cancel. Omitted: no Cancel button (a form that only saves). */\n  onCancel?: () => void;\n  /**\n   * Given: the save button is `type=\"button\"` and calls this — for a dialog or a row\n   * that saves from a handler. Omitted: it is `type=\"submit\"` and submits the\n   * enclosing `<form>` (or the one named by {@link form}).\n   */\n  onSubmit?: () => void;\n  /** The save button's text. Default `form.save` from the provider, else \"Save\". */\n  submitLabel?: ReactNode;\n  /** The cancel button's text. Default `form.cancel` from the provider, else \"Cancel\". */\n  cancelLabel?: ReactNode;\n  /** The save button's text while `pending` (\"Saving…\"). Default: `submitLabel`. */\n  pendingLabel?: ReactNode;\n  /**\n   * A Lucide icon before the save button's text. While `pending` the spinner takes\n   * ITS place rather than being added in front of it — an icon written into\n   * `submitLabel` itself stays, so the button would show the spinner AND the glyph,\n   * two statuses side by side (keksdose's crop Apply needed a `pendingLabel` copy of\n   * its text only to drop the check mark).\n   */\n  submitIcon?: LucideIcon;\n  /** Attributes passed through to the save button: `id`, `data-*`, `aria-*`, a\n   *  `className`. See {@link FormActionsSubmitProps}. */\n  submitProps?: FormActionsSubmitProps;\n  /**\n   * The save is running: a spinner in the save button, `aria-busy` on it, and the\n   * button disabled, so a second click cannot send the form twice. Cancel stays\n   * usable. The spinner goes in front of the text, or in place of {@link submitIcon}.\n   */\n  pending?: boolean;\n  /** Disable save for a reason of the form's own (an unbalanced entry). */\n  submitDisabled?: boolean;\n  /** Why save is disabled — see Button's `disabledReason`. Keeps it focusable. */\n  submitDisabledReason?: ReactNode;\n  /**\n   * Save is a commit: under a locked {@link WriteLockProvider} it is disabled with the\n   * lock's reason (over `submitDisabledReason`), focusable, the reason in its tooltip —\n   * Button's `commit`. The `{ label, onClick }` form of {@link destructive} is a\n   * commit too and is locked with it; Cancel and `children` are not (closing a form\n   * writes nothing). No provider, or an unlocked one: no effect. Default `false`.\n   *\n   * keksdose wrote `submitDisabled={lock.locked || …}` and\n   * `submitDisabledReason={lock.locked ? lock.reason : undefined}` at each form; this is\n   * that pair, read from the provider.\n   */\n  commit?: boolean;\n  /** The save button's variant. Default `brand`; `danger` for a save that destroys\n   *  (kastlan's `destructive` flag on its own FormActions). */\n  submitVariant?: ButtonVariant;\n  /**\n   * The Cancel button's variant. Default `secondary` (the outlined button, as before).\n   * `ghost` for a row where Cancel should step back further than an outline — keksdose\n   * G3: a quiet inline row (a confirm under a table row, a card's own small editor)\n   * whose Cancel was a ghost button before it moved onto FormActions, which drew every\n   * Cancel outlined.\n   */\n  cancelVariant?: ButtonVariant;\n  /**\n   * The size of every button the row draws itself — Save, Cancel and the\n   * `{ label, onClick }` form of {@link destructive}: Button's `size`. Default `md`.\n   * `sm` (12px text, `px-2 py-1`) for a dense row: a confirm inside a table's expansion\n   * row, a toolbar card. keksdose G3: two such rows had small hand-built buttons and lost\n   * them on adopting FormActions, which had no size. At `sm` the spinner and\n   * {@link submitIcon} shrink with the text.\n   *\n   * Your own elements (`children`, an element passed as `destructive`, `start`) are\n   * yours to size — pass them `size=\"sm\"` too. A `size` in {@link submitProps} still\n   * wins for Save, as it always has.\n   */\n  size?: ButtonSize;\n  /**\n   * A destructive action at the START of the row, apart from Save and Cancel — the\n   * \"Delete\" of an edit dialog. Pass `{ label, onClick }` for the kit's quiet danger\n   * button, or an element of your own (a {@link DangerConfirm}, say). With it the row\n   * is `between`-aligned unless `align` says otherwise.\n   */\n  destructive?: ReactNode | FormActionsDestructive;\n  /**\n   * Something neutral at the START of the row — a caption (\"Last saved 2 min ago\",\n   * \"Drag the corners to crop\"), a \"View activity\" link. After {@link destructive}\n   * when both are given; like it, makes the row `between`-aligned unless `align` says\n   * otherwise. `children` are for further ACTIONS, beside Cancel.\n   */\n  start?: ReactNode;\n  /** Horizontal alignment. Default `end` (`between` with a `destructive` action). */\n  align?: FormActionsAlign;\n  /** See {@link FormActionsPlacement}, or one per breakpoint — see\n   *  {@link ResponsiveFormActionsPlacement}. Default `inline`. */\n  placement?: FormActionsPlacement | ResponsiveFormActionsPlacement;\n  /**\n   * While the row is `sticky`: pull it out over its container's inline padding by this\n   * much (a CSS length, a number in px) and give the same back as padding — so the\n   * rule above it and its surface run edge to edge, while the buttons stay on the\n   * content's line. Without it a sticky row in a padded card or pane is a strip inset\n   * from both sides, with the content scrolling past it in the gutters (keksdose wrote\n   * `@max-md:-mx-3 @max-md:px-3` by hand). Pass the container's padding (`\"0.75rem\"`,\n   * `12`, `\"var(--pane-px)\"`). Applied only while the resolved placement is sticky, so\n   * `placement={{ base: \"sticky\", md: \"inline\" }}` bleeds on the phone alone. The margin\n   * is `calc(-1 * X)`; jsdom folds that to `calc(-X)`, so match it loosely in tests.\n   */\n  bleed?: string | number;\n  /**\n   * With `placement=\"sticky\"`: what the row sticks to. Default `viewport`.\n   *\n   * CSS sticky always sticks to the NEAREST scroll container, so the default row\n   * already holds inside a scrolling pane — but it offsets itself by `--app-nav-h`,\n   * which AppShell publishes on the document: inside a pane or a portalled dialog\n   * body on a phone it then floats a nav's height above that container's bottom,\n   * with the content scrolling through the gap. `container` drops that offset.\n   *\n   * What neither value can fix, because it is the layout, not the row:\n   *  - sticky moves only within its PARENT box. Inside a DataTable expansion row the\n   *    parent is the expansion cell, so the row pins to the table's own scroller\n   *    (`overflow-auto`, bounded by `maxBodyHeight`) and only while the cell spans\n   *    that scroller's bottom edge — not to the page.\n   *  - any `overflow` other than `visible`/`clip` between the row and the scroller\n   *    you mean (an `overflow-x-auto` wrapper, an `overflow-hidden` card) becomes the\n   *    scroll container; if THAT box does not scroll, the row never sticks.\n   *  - the offset is resolved against the scroller's content box, so a scroller with\n   *    bottom padding leaves that strip uncovered; give the row a negative `bottom`\n   *    through `style` and the same amount back as padding.\n   */\n  stickyWithin?: FormActionsStickyWithin;\n  /** The `id` of the `<form>` the save button submits, when the row is rendered\n   *  outside it (a dialog's footer slot). */\n  form?: string;\n  /**\n   * A keyboard shortcut that presses Save from anywhere in the form. `\"mod-enter\"`:\n   * Ctrl+Enter, or Cmd+Enter on a Mac — both are accepted everywhere, as keksdose's\n   * editors always have. keksdose K14 (inputs audit 2026-10-02, S5): its transaction\n   * editor, category editor and create card each wrote this as an `onKeyDown` on a\n   * container, re-stating `!pending && !saveDisabled && !lock.locked` every time, and\n   * the one that forgot the lock let the demo's refused save through from the keyboard.\n   *\n   * What it does is what pressing Save does — the same button is clicked, so a form\n   * submits with its validation and its submitter, and `onSubmit` is called in the\n   * `type=\"button\"` mode — and it does NOTHING while Save could not be pressed:\n   * `pending`, `submitDisabled`, or a `commit` under a locked {@link WriteLockProvider}.\n   *\n   * Scoped to the form Save submits (the `form` prop's, else the enclosing `<form>`):\n   * the chord counts only when the focus is inside it, so two editors on one page each\n   * answer for their own fields. Without a form (an `onSubmit` row in a plain container)\n   * the scope is the nearest `role=\"dialog\"`, else the row's parent element — the\n   * container the row ends.\n   *\n   * Listened for on the document, so it runs AFTER every React handler: a field that\n   * takes Ctrl+Enter for itself calls `preventDefault()` or `stopPropagation()` and\n   * the row stays out of it (keksdose live #202 — the create card's Ctrl+Shift+Enter\n   * must create ONE row; the chord here is exactly Ctrl/Cmd+Enter, never with Shift or\n   * Alt). Not during IME composition, and not on a held key's repeats.\n   *\n   * The save button announces it with `aria-keyshortcuts`; {@link submitShortcutHint}\n   * also shows it.\n   */\n  submitShortcut?: FormActionsSubmitShortcut;\n  /** Show the {@link submitShortcut} beside Save's text (\"Ctrl+Enter\", \"⌘ Enter\"; the\n   *  `form.submitShortcut` label), dimmed. Hidden on a touch-only device, which has no\n   *  keyboard to press it on. Default `false`. */\n  submitShortcutHint?: boolean;\n  /** When the buttons stack full width — see {@link FormActionsStack}. Default `auto`:\n   *  on the phone layout at Large and Extra large. */\n  stack?: FormActionsStack;\n  /** Extra actions, placed before Cancel. */\n  children?: ReactNode;\n}\n\n/** Hand `el` to a caller's ref, whichever kind it is. */\nfunction assignRef<E>(ref: Ref<E> | undefined, el: E | null): void {\n  if (typeof ref === \"function\") ref(el);\n  else if (ref) (ref as { current: E | null }).current = el;\n}\n\n/**\n * Where {@link FormActionsProps.submitShortcut} listens: the form Save submits (named\n * by `formId`, else the enclosing one), else the nearest dialog, else the row's parent.\n */\nfunction shortcutScope(row: HTMLElement | null, formId: string | undefined): Element | null {\n  if (!row) return null;\n  const named = formId ? row.ownerDocument.getElementById(formId) : null;\n  if (named instanceof HTMLFormElement) return named;\n  return row.closest(\"form\") ?? row.closest('[role=\"dialog\"]') ?? row.parentElement;\n}\n\nfunction isDestructiveData(value: unknown): value is FormActionsDestructive {\n  return typeof value === \"object\" && value !== null && !isValidElement(value) && \"onClick\" in value;\n}\n\n/**\n * The Save / Cancel row every form, wizard-step form and dialog ends in — kastlan's\n * `FormActions`, with the labels from the provider, a pending state and a place for\n * the destructive action.\n *\n * ```tsx\n * <form onSubmit={form.handleSubmit(save)}>\n *   …\n *   <FormActions onCancel={close} pending={mutation.isPending} />\n * </form>\n * ```\n *\n * The spinner is the kit's {@link Spinner}, drawn inside the button with `label={null}`\n * so the button's name stays its text; `aria-busy` is what says it is working.\n */\nexport function FormActions({\n  onCancel,\n  onSubmit,\n  submitLabel,\n  cancelLabel,\n  pendingLabel,\n  submitIcon: SubmitIcon,\n  submitProps,\n  pending = false,\n  submitDisabled = false,\n  submitDisabledReason,\n  commit = false,\n  submitVariant = \"brand\",\n  cancelVariant = \"secondary\",\n  size = \"md\",\n  destructive,\n  start: startSlot,\n  align,\n  placement: placementProp = \"inline\",\n  stickyWithin = \"viewport\",\n  bleed,\n  form,\n  submitShortcut,\n  submitShortcutHint = false,\n  stack = \"auto\",\n  children,\n  className,\n  style,\n  ...rest\n}: FormActionsProps) {\n  const phone = usePhoneLayout();\n  const large = useLargeText();\n  const stacked = stack !== \"never\" && phone && (stack === \"phone\" || large);\n  // Stacked, a button fills its line — also inside the reason line's wrapper, which the\n  // column stretches but which keeps its control at the control's own width.\n  const full = stacked ? \"w-full\" : undefined;\n  const labels = useKitLabels(\"form\", DEFAULT_FORM_ACTIONS_LABELS);\n  const lock = useWriteLock();\n  const rootRef = useRef<HTMLDivElement>(null);\n  const saveRef = useRef<HTMLButtonElement | null>(null);\n  // The caller's own `submitProps.ref` still gets the element.\n  const callerSaveRef = submitProps?.ref;\n  const setSaveRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      saveRef.current = el;\n      assignRef(callerSaveRef, el);\n    },\n    [callerSaveRef],\n  );\n  // The save settled and the form is still here — it failed, and the user retries. The\n  // button was natively disabled while it ran, and a focused button that turns disabled\n  // drops the focus to <body> (DangerConfirm's 0.24 fix, keksdose). Only after a press\n  // of THIS button (`pressed`: a click or the shortcut), so a `pending` that comes and\n  // goes on its own never pulls the page's focus in.\n  const pressed = useRef(false);\n  const wasPending = useRef(pending);\n  useEffect(() => {\n    const settled = wasPending.current && !pending;\n    wasPending.current = pending;\n    if (!settled) return;\n    const ours = pressed.current;\n    pressed.current = false;\n    if (!ours) return;\n    if (document.activeElement === null || document.activeElement === document.body) saveRef.current?.focus();\n  }, [pending]);\n  // Read by the shortcut's listener at the moment of the key press, so the listener\n  // itself is attached once and never sees a stale `pending`.\n  const canSave = !pending && !submitDisabled && !(commit && lock.locked);\n  const canSaveRef = useRef(canSave);\n  useEffect(() => {\n    canSaveRef.current = canSave;\n  });\n  useEffect(() => {\n    if (submitShortcut !== \"mod-enter\") return;\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== \"Enter\" || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) return;\n      if (e.repeat || e.isComposing || e.defaultPrevented || !canSaveRef.current) return;\n      const scope = shortcutScope(rootRef.current, form);\n      if (!scope || !(e.target instanceof Node) || !scope.contains(e.target)) return;\n      e.preventDefault();\n      saveRef.current?.click();\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [submitShortcut, form]);\n  const apple = submitShortcut ? isApplePlatform() : false;\n  const placement = useResolvedPlacement(placementProp);\n  const bleedLength = bleed === undefined || bleed === \"\" ? undefined : cssLength(bleed);\n  const hasDestructive = destructive !== undefined && destructive !== null && destructive !== false;\n  const hasStart = startSlot !== undefined && startSlot !== null && startSlot !== false;\n  const justify = align ?? (hasDestructive || hasStart ? \"between\" : \"end\");\n  const destructiveNode = !hasDestructive ? null : isDestructiveData(destructive) ? (\n    <Button\n      type=\"button\"\n      variant=\"ghost\"\n      tone=\"danger\"\n      size={size}\n      onClick={destructive.onClick}\n      disabled={destructive.disabled}\n      disabledReason={destructive.disabledReason}\n      commit={commit}\n      className={full}\n    >\n      {destructive.label}\n    </Button>\n  ) : (\n    destructive\n  );\n  const saveLabel = submitLabel ?? labels.save;\n  // The glyphs follow the text: 16px beside `md`'s 14px text, 14px beside `sm`'s 12px.\n  const saveSize = submitProps?.size ?? size;\n  const glyphClass = saveSize === \"sm\" ? \"size-3.5\" : \"size-4\";\n\n  return (\n    <div\n      ref={rootRef}\n      data-slot=\"form-actions\"\n      data-placement={placement}\n      data-sticky-within={placement === \"sticky\" ? stickyWithin : undefined}\n      {...rest}\n      style={\n        placement === \"sticky\"\n          ? {\n              paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\",\n              // On the phone's bottom nav, not behind it (keksdose live #361): `bottom-0`\n              // pinned the row under AppShell's nav, which covers the page's last ~56px.\n              // `--app-nav-h` is the nav's measured height (0px from md up, and outside an\n              // AppShell); the 1px overlaps the two top borders into one line. In a\n              // container the nav is not underneath: `--app-nav-h` is the document's,\n              // and would hold the row that far above the container's own edge.\n              bottom: stickyWithin === \"container\" ? 0 : \"max(0px, calc(var(--app-nav-h, 0px) - 1px))\",\n              ...(bleedLength !== undefined && {\n                marginInline: `calc(-1 * ${bleedLength})`,\n                paddingInline: bleedLength,\n              }),\n              ...style,\n            }\n          : style\n      }\n      data-stacked={stacked || undefined}\n      className={cn(\n        stacked ? \"flex flex-col items-stretch gap-2\" : cn(\"flex flex-wrap items-center gap-2\", ALIGN_CLASS[justify]),\n        PLACEMENT_CLASS[placement],\n        className,\n      )}\n    >\n      {(hasDestructive || hasStart) && (\n        <div\n          className={\n            stacked ? \"flex min-w-0 flex-col items-stretch gap-2\" : \"me-auto flex min-w-0 flex-wrap items-center gap-2\"\n          }\n        >\n          {destructiveNode}\n          {hasStart && startSlot}\n        </div>\n      )}\n      <div className={stacked ? \"flex flex-col items-stretch gap-2\" : \"flex flex-wrap items-center gap-2\"}>\n        {children}\n        {onCancel && (\n          <Button type=\"button\" variant={cancelVariant} size={size} onClick={onCancel} className={full}>\n            {cancelLabel ?? labels.cancel}\n          </Button>\n        )}\n        <Button\n          {...submitProps}\n          ref={setSaveRef}\n          aria-keyshortcuts={\n            submitShortcut === \"mod-enter\" ? \"Control+Enter Meta+Enter\" : submitProps?.[\"aria-keyshortcuts\"]\n          }\n          type={onSubmit ? \"button\" : \"submit\"}\n          form={form}\n          onClick={() => {\n            pressed.current = true;\n            onSubmit?.();\n          }}\n          variant={submitVariant}\n          size={saveSize}\n          disabled={pending || submitDisabled}\n          disabledReason={pending ? undefined : submitDisabledReason}\n          // Not while pending: the save already left, and the lock's look over the\n          // spinner would say it had not.\n          commit={commit && !pending}\n          aria-busy={pending || undefined}\n          className={cn(submitProps?.className, full)}\n        >\n          {pending ? (\n            <Spinner label={null} className={glyphClass} />\n          ) : (\n            SubmitIcon && <SubmitIcon aria-hidden className={cn(glyphClass, \"shrink-0\")} />\n          )}\n          {pending && pendingLabel !== undefined ? pendingLabel : saveLabel}\n          {submitShortcut && submitShortcutHint && (\n            // Hidden from the accessibility tree: `aria-keyshortcuts` already says it,\n            // and in the name it would make the button \"Save Ctrl+Enter\".\n            <kbd\n              aria-hidden\n              className=\"ms-1 font-sans text-[0.85em] font-normal whitespace-nowrap opacity-70 pointer-coarse:hidden\"\n            >\n              {labels.submitShortcut(apple)}\n            </kbd>\n          )}\n        </Button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/full-bleed-dialog.d.ts

@@ -1,6 +1,16 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 
+/**
+ * The padding around the dialog's scrolling body, as a CSS length (0.32,
+ * docs/text-size-harmonization.md §10.11). Exported because a caller's sticky footer has
+ * to reach across it: Chrome resolves a sticky offset against the scrollport's CONTENT
+ * box, so a pinned row sits this far short of the panel's edge unless it cancels it
+ * (keksdose's editor footer). In rem, so it grows with the text size — keksdose's px
+ * copy (`SCROLLER_GUTTER_PX = 12`) was 3–6 px off at 125/150 %. Use it in `calc()`:
+ * `bottom: calc(${inset}px - ${DIALOG_GUTTER})`.
+ */
+declare const DIALOG_GUTTER = "0.75rem";
 /**
  * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way
  * to say "the props of this" and five call sites across keksdose and kastlan had already
@@ -95,4 +105,4 @@ interface FullBleedDialogProps extends Omit<ComponentPropsWithoutRef<"div">, "ti
  */
 declare function FullBleedDialog({ open, onClose, title, headingAs: Heading, header, closeLabel, children, backCloses, className, footer, onMouseDown, onMouseUp, onKeyDown, ...rest }: FullBleedDialogProps): react.ReactPortal | null;
 
-export { FullBleedDialog, type FullBleedDialogProps };
+export { DIALOG_GUTTER, FullBleedDialog, type FullBleedDialogProps };

package/dist/components/full-bleed-dialog.js

@@ -9,6 +9,7 @@ import { useBodyScrollLock } from "../hooks/use-body-scroll-lock.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { useCloseTransition } from "../hooks/use-close-transition.js";
 import { useFocusTrap } from "../hooks/use-focus-trap.js";
+const DIALOG_GUTTER = "0.75rem";
 function FullBleedDialog({
   open,
   onClose,
@@ -95,7 +96,7 @@ function FullBleedDialog({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3", children }),
+              /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", style: { padding: DIALOG_GUTTER }, children }),
               footer !== void 0 && footer !== null && footer !== false && /* @__PURE__ */ jsx(
                 "div",
                 {
@@ -114,6 +115,7 @@ function FullBleedDialog({
   );
 }
 export {
+  DIALOG_GUTTER,
   FullBleedDialog
 };
 //# sourceMappingURL=full-bleed-dialog.js.map

package/dist/components/full-bleed-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/full-bleed-dialog.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useBackdropClose } from \"./modal\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\n\n/**\n * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way\n * to say \"the props of this\" and five call sites across keksdose and kastlan had already\n * written one (audit §api-design).\n *\n * It extends the `<div>` attributes so a caller can reach the OUTER element — the one\n * carrying `role=\"dialog\"`, and therefore the one an `aria-label`, an\n * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going\n * to the panel inside it, which is what it has always meant here.\n */\nexport interface FullBleedDialogProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  open: boolean;\n  /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —\n   *  the platform Back gesture all call this. */\n  onClose: () => void;\n  /**\n   * The dialog's HEADING: rendered as a real `h2` (see {@link headingAs}) at the start\n   * of the header strip, and wired to the dialog's `aria-labelledby`, so the dialog is\n   * announced by name rather than as just \"dialog\".\n   *\n   * Before this the strip was a styled `div`, and a caller that wanted its full-screen\n   * phone editor NAMED had to leave this component for `DialogFrame fullBleed` —\n   * keksdose's budget-table phone editor says so in a comment at the call site. A\n   * caller's own `aria-label` / `aria-labelledby` still wins.\n   */\n  title?: ReactNode;\n  /** The heading level of {@link title}. `h2` by default, as `DialogFrame`'s. */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * Free content for the header strip, beside the close button — after the\n   * {@link title} when there is one, or on its own (the row editor shows the row's\n   * own first cell here). It does not name the dialog; `title` does.\n   */\n  header?: ReactNode;\n  closeLabel: string;\n  children: ReactNode;\n  /**\n   * Push a history entry so Back dismisses this dialog instead of navigating\n   * (Keksdose feedback #172). On by default, because a full-screen form that ignores\n   * the phone's universal \"go back\" gesture does not merely fail to close — the\n   * navigation lands somewhere else with the form still notionally open.\n   *\n   * **Off for a caller whose open state is already in the URL.** The transactions\n   * create card is `?action=new`, so Back already pops it through the router; a\n   * sentinel on top of that would cost two presses to close one dialog. One owner of\n   * the Back press, always.\n   */\n  backCloses?: boolean;\n  /** Extra classes for the PANEL (not the backdrop). */\n  className?: string;\n  /**\n   * A row pinned under the scrolling body — an Apply, a Save. Keksdose's `RangeSheet`\n   * (reports/report-range-field.tsx) is a hand-rolled copy of this dialog for want of\n   * exactly this slot: a date range picked on a phone is committed by a sticky Apply,\n   * and a button at the end of the body scrolls away with the calendar.\n   *\n   * Outside the scroller, so it stays put without `position: sticky` (which would\n   * need the body to be the scroll container of its own child and paint over the\n   * last field); padded for the home indicator, since it is the panel's bottom edge.\n   */\n  footer?: ReactNode;\n}\n\n/**\n * The phone's full-screen dialog: a panel that covers the viewport edge to edge.\n *\n * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback\n * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,\n * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is\n * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any\n * layout that does leave a backdrop visible, and costs nothing where none is.\n *\n * ## Why it is a component\n *\n * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose\n * live #307's follow-up needed the same shell for the transactions CREATE card —\n * *\"Is the creation window of the tx still different than the edit window? Since the tx\n * list still appears below when scrolling down?\"* — and the two answers to that are\n * either one component or two copies that drift. Every previous convergence in that app\n * drifted the moment a second surface was written beside the first, which is what\n * `field-layer-parity` exists to catch one layer down.\n *\n * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back\n * handling are all here, once.\n *\n * ## What the caller still owns\n *\n * The HEADER's content, because the two callers name themselves differently: the row\n * editor shows the row's own first column, the create card a plain title. A plain\n * title belongs in `title`, which is a real heading and the dialog's name; `header`\n * stays the free slot beside it. And `open`,\n * because who decides is the caller's business — see {@link backCloses}.\n */\nexport function FullBleedDialog({\n  open,\n  onClose,\n  title,\n  headingAs: Heading = \"h2\",\n  header,\n  closeLabel,\n  children,\n  backCloses = true,\n  className,\n  footer,\n  onMouseDown,\n  onMouseUp,\n  onKeyDown,\n  ...rest\n}: FullBleedDialogProps) {\n  // Every way OUT goes through `requestClose`, so the panel lowers itself before the\n  // caller unmounts it (live #320 rework). `onClose` is still what finally runs — this\n  // only delays it by the length of the animation.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // The page behind must not scroll or jump under the overlay (feedback #204).\n  useBodyScrollLock(open);\n  useOverlayHistory(open && backCloses, requestClose);\n\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const hasTitle = title !== undefined && title !== null && title !== false;\n  const hasHeader = header !== undefined && header !== null && header !== false;\n  // The half of \"modal\" this dialog was only claiming. It has said\n  // `aria-modal=\"true\"` since it was extracted from `data-table.tsx`, which tells\n  // assistive technology to hide everything outside it — while the user's focus stayed\n  // on the row they tapped, in the part that is now hidden. Tab then walked them\n  // through a table the screen reader would not describe, and on a phone this dialog\n  // covers the whole screen, so there was nothing on screen to say where they were.\n  //\n  // `initialFocus` is left at the default — the dialog itself, not the first field.\n  // This is the phone's row EDITOR and its first child is usually an input; focusing it\n  // would pull the software keyboard up over half the form before the user has said\n  // which field they came for. `Modal` made the same call for the same reason.\n  useFocusTrap(dialogRef, { active: open });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler first (keksdose's transaction-search keeps its list keys on\n    // the dialog); a `preventDefault()` IN THAT HANDLER claims the key, Escape included.\n    // Only there: a descendant's preventDefault does not count. A SearchField in the\n    // header prevents Escape to stop Chromium clearing a type=search input, and in\n    // 0.8.0 that silently stopped Escape from closing the dialog (keksdose).\n    const preventedBefore = e.defaultPrevented;\n    onKeyDown?.(e);\n    const claimedByCaller = !preventedBefore && e.defaultPrevented;\n    if (claimedByCaller || e.key !== \"Escape\") return;\n    // On the panel, the way `Modal` does it, and NOT through `useEscapeKey`: this\n    // dialog is the thing a `PickerSheet` opens on top of, and a document-level\n    // listener cannot tell which of the two the user meant. One press would dismiss\n    // the sheet AND throw away the edit behind it — Keksdose live #309 (*\"Mouse Back\n    // does not only close the select but also the whole edit or create dialog\"*) on a\n    // different key. The sheet's own handler stops the event here, so the innermost\n    // overlay is the one that closes, which is only true because focus is now in it.\n    e.stopPropagation();\n    requestClose();\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever\n       inside it holds focus, and the mouse handlers are the backdrop press (Escape and the\n       close button are its keyboard path). */\n    <div\n      // `animate-overlay` on the backdrop and `animate-sheet` on the panel (live #320):\n      // the backdrop fades, the panel rises from the bottom edge it is anchored to.\n      // Both are no-ops under prefers-reduced-motion — see tokens.css.\n      //\n      // …and the same two backwards while `closing`, which is the #320 rework. The\n      // backdrop keeps taking pointer events on the way out: a tap during those 220ms\n      // is a tap on a dialog that is leaving, and letting it through to the row\n      // underneath would open a second one.\n      //\n      // `...rest` first, the dialog's own contract after it. A caller adding a\n      // `data-tour` anchor must not be able to take away the role, the modality or the\n      // `tabIndex` below by passing one of them too — this is the element the focus\n      // trap holds, and each of those failures is invisible on screen.\n      {...rest}\n      className={cn(\n        \"fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none\",\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // The heading names the dialog unless the caller named it some other way — an\n      // `aria-labelledby` of its own, or an `aria-label` (which a `labelledby` would\n      // silently outrank).\n      aria-labelledby={rest[\"aria-labelledby\"] ?? (hasTitle && !rest[\"aria-label\"] ? titleId : undefined)}\n      // `tabIndex={-1}` is what makes the line above more than a claim: without it the\n      // container cannot take focus and `useFocusTrap` silently does nothing.\n      tabIndex={-1}\n      ref={dialogRef}\n      onKeyDown={handleKeyDown}\n      // COMPOSED with the backdrop's, not overridden by them. These two used to ride\n      // `...rest` and then lose to `{...backdropClose}` spread after it, silently —\n      // and the one caller about to pass one is keksdose's RangeSheet, whose\n      // `onMouseDown={(e) => e.stopPropagation()}` is its dev#477 fix: a press in a\n      // portalled sheet must not reach a document-level \"outside click\" listener,\n      // which would unmount the day cell before its `click`. The caller's runs first;\n      // the backdrop's still runs after it, since it is the same element.\n      onMouseDown={(e) => {\n        onMouseDown?.(e);\n        backdropClose.onMouseDown(e);\n      }}\n      onMouseUp={(e) => {\n        onMouseUp?.(e);\n        backdropClose.onMouseUp(e);\n      }}\n    >\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col overflow-hidden bg-[var(--bg-surface)] shadow-xl\",\n          closing ? \"animate-sheet-out\" : \"animate-sheet\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center justify-between gap-2 border-b border-[var(--border)] px-3 py-3\">\n          {hasTitle ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Heading id={titleId} className=\"min-w-0 break-words text-base font-semibold leading-snug text-[var(--text-primary)]\">\n                {title}\n              </Heading>\n              {hasHeader && <div className=\"min-w-0 flex-1 font-medium\">{header}</div>}\n            </div>\n          ) : (\n            <div className=\"min-w-0 flex-1 font-medium\">{header}</div>\n          )}\n          <button\n            type=\"button\"\n            onClick={requestClose}\n            aria-label={closeLabel}\n            className=\"-me-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n        {/* px-3, not px-4: every pixel of chrome here is width the form fields lose\n            on a phone (feedback #32). The body is the only thing that scrolls, so the\n            header stays put and the page underneath cannot move at all. */}\n        {/* `min-h-0` so it is the BODY that gives way to a footer, not the footer that\n            is pushed off the bottom edge. */}\n        <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain px-3 py-3\">{children}</div>\n        {footer !== undefined && footer !== null && footer !== false && (\n          <div\n            data-full-bleed-footer=\"\"\n            className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-[var(--border)] px-3 pt-3\"\n            style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AAsOY,SACE,KADF;AAtOZ,SAAS,OAAO,cAAc;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AA+FtB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AAIvB,QAAM,EAAE,SAAS,aAAa,IAAI,mBAAmB,OAAO;AAC5D,QAAM,gBAAgB,iBAAiB,YAAY;AAEnD,oBAAkB,IAAI;AACtB,oBAAkB,QAAQ,YAAY,YAAY;AAElD,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU;AACpE,QAAM,YAAY,WAAW,UAAa,WAAW,QAAQ,WAAW;AAYxE,eAAa,WAAW,EAAE,QAAQ,KAAK,CAAC;AAExC,QAAM,gBAAgB,CAAC,MAAqC;AAM1D,UAAM,kBAAkB,EAAE;AAC1B,gBAAY,CAAC;AACb,UAAM,kBAAkB,CAAC,mBAAmB,EAAE;AAC9C,QAAI,mBAAmB,EAAE,QAAQ,SAAU;AAQ3C,MAAE,gBAAgB;AAClB,iBAAa;AAAA,EACf;AAEA,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AAErD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,MAAC;AAAA;AAAA,QAcE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,UAAU,wBAAwB;AAAA,QACpC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QAIX,mBAAiB,KAAK,iBAAiB,MAAM,YAAY,CAAC,KAAK,YAAY,IAAI,UAAU;AAAA,QAGzF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAW;AAAA,QAQX,aAAa,CAAC,MAAM;AAClB,wBAAc,CAAC;AACf,wBAAc,YAAY,CAAC;AAAA,QAC7B;AAAA,QACA,WAAW,CAAC,MAAM;AAChB,sBAAY,CAAC;AACb,wBAAc,UAAU,CAAC;AAAA,QAC3B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,sBAAsB;AAAA,cAChC;AAAA,YACF;AAAA,YAEA;AAAA,mCAAC,SAAI,WAAU,qFACZ;AAAA,2BACC,qBAAC,SAAI,WAAU,0CACb;AAAA,sCAAC,WAAQ,IAAI,SAAS,WAAU,uFAC7B,iBACH;AAAA,kBACC,aAAa,oBAAC,SAAI,WAAU,8BAA8B,kBAAO;AAAA,mBACpE,IAEA,oBAAC,SAAI,WAAU,8BAA8B,kBAAO;AAAA,gBAEtD;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAY;AAAA,oBACZ,WAAU;AAAA,oBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,gBACxB;AAAA,iBACF;AAAA,cAMA,oBAAC,SAAI,WAAU,+DAA+D,UAAS;AAAA,cACtF,WAAW,UAAa,WAAW,QAAQ,WAAW,SACrD;AAAA,gBAAC;AAAA;AAAA,kBACC,0BAAuB;AAAA,kBACvB,WAAU;AAAA,kBACV,OAAO,EAAE,eAAe,4CAA4C;AAAA,kBAEnE;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}
+{"version":3,"sources":["../../src/components/full-bleed-dialog.tsx"],"sourcesContent":["import { useId, useRef } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { X } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useBackdropClose } from \"./modal\";\nimport { useBodyScrollLock } from \"../hooks/use-body-scroll-lock\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { useCloseTransition } from \"../hooks/use-close-transition\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\n\n/**\n * The padding around the dialog's scrolling body, as a CSS length (0.32,\n * docs/text-size-harmonization.md §10.11). Exported because a caller's sticky footer has\n * to reach across it: Chrome resolves a sticky offset against the scrollport's CONTENT\n * box, so a pinned row sits this far short of the panel's edge unless it cancels it\n * (keksdose's editor footer). In rem, so it grows with the text size — keksdose's px\n * copy (`SCROLLER_GUTTER_PX = 12`) was 3–6 px off at 125/150 %. Use it in `calc()`:\n * `bottom: calc(${inset}px - ${DIALOG_GUTTER})`.\n */\nexport const DIALOG_GUTTER = \"0.75rem\";\n\n/**\n * Named and exported, because `ComponentProps<typeof FullBleedDialog>` was the only way\n * to say \"the props of this\" and five call sites across keksdose and kastlan had already\n * written one (audit §api-design).\n *\n * It extends the `<div>` attributes so a caller can reach the OUTER element — the one\n * carrying `role=\"dialog\"`, and therefore the one an `aria-label`, an\n * `aria-describedby` or a `data-tour` anchor belongs on. {@link className} keeps going\n * to the panel inside it, which is what it has always meant here.\n */\nexport interface FullBleedDialogProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  open: boolean;\n  /** The X, the backdrop (where one shows) and — unless {@link backCloses} is off —\n   *  the platform Back gesture all call this. */\n  onClose: () => void;\n  /**\n   * The dialog's HEADING: rendered as a real `h2` (see {@link headingAs}) at the start\n   * of the header strip, and wired to the dialog's `aria-labelledby`, so the dialog is\n   * announced by name rather than as just \"dialog\".\n   *\n   * Before this the strip was a styled `div`, and a caller that wanted its full-screen\n   * phone editor NAMED had to leave this component for `DialogFrame fullBleed` —\n   * keksdose's budget-table phone editor says so in a comment at the call site. A\n   * caller's own `aria-label` / `aria-labelledby` still wins.\n   */\n  title?: ReactNode;\n  /** The heading level of {@link title}. `h2` by default, as `DialogFrame`'s. */\n  headingAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  /**\n   * Free content for the header strip, beside the close button — after the\n   * {@link title} when there is one, or on its own (the row editor shows the row's\n   * own first cell here). It does not name the dialog; `title` does.\n   */\n  header?: ReactNode;\n  closeLabel: string;\n  children: ReactNode;\n  /**\n   * Push a history entry so Back dismisses this dialog instead of navigating\n   * (Keksdose feedback #172). On by default, because a full-screen form that ignores\n   * the phone's universal \"go back\" gesture does not merely fail to close — the\n   * navigation lands somewhere else with the form still notionally open.\n   *\n   * **Off for a caller whose open state is already in the URL.** The transactions\n   * create card is `?action=new`, so Back already pops it through the router; a\n   * sentinel on top of that would cost two presses to close one dialog. One owner of\n   * the Back press, always.\n   */\n  backCloses?: boolean;\n  /** Extra classes for the PANEL (not the backdrop). */\n  className?: string;\n  /**\n   * A row pinned under the scrolling body — an Apply, a Save. Keksdose's `RangeSheet`\n   * (reports/report-range-field.tsx) is a hand-rolled copy of this dialog for want of\n   * exactly this slot: a date range picked on a phone is committed by a sticky Apply,\n   * and a button at the end of the body scrolls away with the calendar.\n   *\n   * Outside the scroller, so it stays put without `position: sticky` (which would\n   * need the body to be the scroll container of its own child and paint over the\n   * last field); padded for the home indicator, since it is the panel's bottom edge.\n   */\n  footer?: ReactNode;\n}\n\n/**\n * The phone's full-screen dialog: a panel that covers the viewport edge to edge.\n *\n * Not {@link Modal}, and that is a decision rather than an omission. Keksdose feedback\n * #32: the inset panel #204 shipped left a strip of page showing beside it on a phone,\n * and tapping that strip dismissed a form mid-edit. With no backdrop exposed there is\n * nothing to mis-tap, so the X is the way out — `backdropClose` stays wired for any\n * layout that does leave a backdrop visible, and costs nothing where none is.\n *\n * ## Why it is a component\n *\n * It was markup inside `data-table.tsx`, where it is the phone's row EDITOR. Keksdose\n * live #307's follow-up needed the same shell for the transactions CREATE card —\n * *\"Is the creation window of the tx still different than the edit window? Since the tx\n * list still appears below when scrolling down?\"* — and the two answers to that are\n * either one component or two copies that drift. Every previous convergence in that app\n * drifted the moment a second surface was written beside the first, which is what\n * `field-layer-parity` exists to catch one layer down.\n *\n * So the panel, the header strip, the scrolling body, the body-scroll lock and the Back\n * handling are all here, once.\n *\n * ## What the caller still owns\n *\n * The HEADER's content, because the two callers name themselves differently: the row\n * editor shows the row's own first column, the create card a plain title. A plain\n * title belongs in `title`, which is a real heading and the dialog's name; `header`\n * stays the free slot beside it. And `open`,\n * because who decides is the caller's business — see {@link backCloses}.\n */\nexport function FullBleedDialog({\n  open,\n  onClose,\n  title,\n  headingAs: Heading = \"h2\",\n  header,\n  closeLabel,\n  children,\n  backCloses = true,\n  className,\n  footer,\n  onMouseDown,\n  onMouseUp,\n  onKeyDown,\n  ...rest\n}: FullBleedDialogProps) {\n  // Every way OUT goes through `requestClose`, so the panel lowers itself before the\n  // caller unmounts it (live #320 rework). `onClose` is still what finally runs — this\n  // only delays it by the length of the animation.\n  const { closing, requestClose } = useCloseTransition(onClose);\n  const backdropClose = useBackdropClose(requestClose);\n  // The page behind must not scroll or jump under the overlay (feedback #204).\n  useBodyScrollLock(open);\n  useOverlayHistory(open && backCloses, requestClose);\n\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const titleId = useId();\n  const hasTitle = title !== undefined && title !== null && title !== false;\n  const hasHeader = header !== undefined && header !== null && header !== false;\n  // The half of \"modal\" this dialog was only claiming. It has said\n  // `aria-modal=\"true\"` since it was extracted from `data-table.tsx`, which tells\n  // assistive technology to hide everything outside it — while the user's focus stayed\n  // on the row they tapped, in the part that is now hidden. Tab then walked them\n  // through a table the screen reader would not describe, and on a phone this dialog\n  // covers the whole screen, so there was nothing on screen to say where they were.\n  //\n  // `initialFocus` is left at the default — the dialog itself, not the first field.\n  // This is the phone's row EDITOR and its first child is usually an input; focusing it\n  // would pull the software keyboard up over half the form before the user has said\n  // which field they came for. `Modal` made the same call for the same reason.\n  useFocusTrap(dialogRef, { active: open });\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    // The caller's handler first (keksdose's transaction-search keeps its list keys on\n    // the dialog); a `preventDefault()` IN THAT HANDLER claims the key, Escape included.\n    // Only there: a descendant's preventDefault does not count. A SearchField in the\n    // header prevents Escape to stop Chromium clearing a type=search input, and in\n    // 0.8.0 that silently stopped Escape from closing the dialog (keksdose).\n    const preventedBefore = e.defaultPrevented;\n    onKeyDown?.(e);\n    const claimedByCaller = !preventedBefore && e.defaultPrevented;\n    if (claimedByCaller || e.key !== \"Escape\") return;\n    // On the panel, the way `Modal` does it, and NOT through `useEscapeKey`: this\n    // dialog is the thing a `PickerSheet` opens on top of, and a document-level\n    // listener cannot tell which of the two the user meant. One press would dismiss\n    // the sheet AND throw away the edit behind it — Keksdose live #309 (*\"Mouse Back\n    // does not only close the select but also the whole edit or create dialog\"*) on a\n    // different key. The sheet's own handler stops the event here, so the innermost\n    // overlay is the one that closes, which is only true because focus is now in it.\n    e.stopPropagation();\n    requestClose();\n  };\n\n  if (!open || typeof document === \"undefined\") return null;\n\n  return createPortal(\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- the dialog\n       container, per the APG dialog pattern: `onKeyDown` is Escape-to-close for whatever\n       inside it holds focus, and the mouse handlers are the backdrop press (Escape and the\n       close button are its keyboard path). */\n    <div\n      // `animate-overlay` on the backdrop and `animate-sheet` on the panel (live #320):\n      // the backdrop fades, the panel rises from the bottom edge it is anchored to.\n      // Both are no-ops under prefers-reduced-motion — see tokens.css.\n      //\n      // …and the same two backwards while `closing`, which is the #320 rework. The\n      // backdrop keeps taking pointer events on the way out: a tap during those 220ms\n      // is a tap on a dialog that is leaving, and letting it through to the row\n      // underneath would open a second one.\n      //\n      // `...rest` first, the dialog's own contract after it. A caller adding a\n      // `data-tour` anchor must not be able to take away the role, the modality or the\n      // `tabIndex` below by passing one of them too — this is the element the focus\n      // trap holds, and each of those failures is invisible on screen.\n      {...rest}\n      className={cn(\n        \"fixed inset-0 z-50 flex items-stretch justify-center bg-black/40 outline-none\",\n        closing ? \"animate-overlay-out\" : \"animate-overlay\",\n      )}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      // The heading names the dialog unless the caller named it some other way — an\n      // `aria-labelledby` of its own, or an `aria-label` (which a `labelledby` would\n      // silently outrank).\n      aria-labelledby={rest[\"aria-labelledby\"] ?? (hasTitle && !rest[\"aria-label\"] ? titleId : undefined)}\n      // `tabIndex={-1}` is what makes the line above more than a claim: without it the\n      // container cannot take focus and `useFocusTrap` silently does nothing.\n      tabIndex={-1}\n      ref={dialogRef}\n      onKeyDown={handleKeyDown}\n      // COMPOSED with the backdrop's, not overridden by them. These two used to ride\n      // `...rest` and then lose to `{...backdropClose}` spread after it, silently —\n      // and the one caller about to pass one is keksdose's RangeSheet, whose\n      // `onMouseDown={(e) => e.stopPropagation()}` is its dev#477 fix: a press in a\n      // portalled sheet must not reach a document-level \"outside click\" listener,\n      // which would unmount the day cell before its `click`. The caller's runs first;\n      // the backdrop's still runs after it, since it is the same element.\n      onMouseDown={(e) => {\n        onMouseDown?.(e);\n        backdropClose.onMouseDown(e);\n      }}\n      onMouseUp={(e) => {\n        onMouseUp?.(e);\n        backdropClose.onMouseUp(e);\n      }}\n    >\n      <div\n        className={cn(\n          \"flex h-full w-full flex-col overflow-hidden bg-[var(--bg-surface)] shadow-xl\",\n          closing ? \"animate-sheet-out\" : \"animate-sheet\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center justify-between gap-2 border-b border-[var(--border)] px-3 py-3\">\n          {hasTitle ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n              <Heading id={titleId} className=\"min-w-0 break-words text-base font-semibold leading-snug text-[var(--text-primary)]\">\n                {title}\n              </Heading>\n              {hasHeader && <div className=\"min-w-0 flex-1 font-medium\">{header}</div>}\n            </div>\n          ) : (\n            <div className=\"min-w-0 flex-1 font-medium\">{header}</div>\n          )}\n          <button\n            type=\"button\"\n            onClick={requestClose}\n            aria-label={closeLabel}\n            className=\"-me-1 shrink-0 rounded p-1.5 text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        </div>\n        {/* DIALOG_GUTTER (0.75rem, the px-3 py-3 it was), not px-4: every pixel of\n            chrome here is width the form fields lose on a phone (feedback #32). The\n            body is the only thing that scrolls, so the header stays put and the page\n            underneath cannot move at all. */}\n        {/* `min-h-0` so it is the BODY that gives way to a footer, not the footer that\n            is pushed off the bottom edge. */}\n        <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain\" style={{ padding: DIALOG_GUTTER }}>\n          {children}\n        </div>\n        {footer !== undefined && footer !== null && footer !== false && (\n          <div\n            data-full-bleed-footer=\"\"\n            className=\"flex shrink-0 flex-wrap items-center justify-end gap-2 border-t border-[var(--border)] px-3 pt-3\"\n            style={{ paddingBottom: \"max(0.75rem, env(safe-area-inset-bottom))\" }}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n"],"mappings":";AAiPY,SACE,KADF;AAjPZ,SAAS,OAAO,cAAc;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,SAAS;AAElB,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAClC,SAAS,0BAA0B;AACnC,SAAS,oBAAoB;AAWtB,MAAM,gBAAgB;AA+FtB,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AAIvB,QAAM,EAAE,SAAS,aAAa,IAAI,mBAAmB,OAAO;AAC5D,QAAM,gBAAgB,iBAAiB,YAAY;AAEnD,oBAAkB,IAAI;AACtB,oBAAkB,QAAQ,YAAY,YAAY;AAElD,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,UAAU,UAAa,UAAU,QAAQ,UAAU;AACpE,QAAM,YAAY,WAAW,UAAa,WAAW,QAAQ,WAAW;AAYxE,eAAa,WAAW,EAAE,QAAQ,KAAK,CAAC;AAExC,QAAM,gBAAgB,CAAC,MAAqC;AAM1D,UAAM,kBAAkB,EAAE;AAC1B,gBAAY,CAAC;AACb,UAAM,kBAAkB,CAAC,mBAAmB,EAAE;AAC9C,QAAI,mBAAmB,EAAE,QAAQ,SAAU;AAQ3C,MAAE,gBAAgB;AAClB,iBAAa;AAAA,EACf;AAEA,MAAI,CAAC,QAAQ,OAAO,aAAa,YAAa,QAAO;AAErD,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL;AAAA,MAAC;AAAA;AAAA,QAcE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,UAAU,wBAAwB;AAAA,QACpC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QAIX,mBAAiB,KAAK,iBAAiB,MAAM,YAAY,CAAC,KAAK,YAAY,IAAI,UAAU;AAAA,QAGzF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,WAAW;AAAA,QAQX,aAAa,CAAC,MAAM;AAClB,wBAAc,CAAC;AACf,wBAAc,YAAY,CAAC;AAAA,QAC7B;AAAA,QACA,WAAW,CAAC,MAAM;AAChB,sBAAY,CAAC;AACb,wBAAc,UAAU,CAAC;AAAA,QAC3B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,UAAU,sBAAsB;AAAA,cAChC;AAAA,YACF;AAAA,YAEA;AAAA,mCAAC,SAAI,WAAU,qFACZ;AAAA,2BACC,qBAAC,SAAI,WAAU,0CACb;AAAA,sCAAC,WAAQ,IAAI,SAAS,WAAU,uFAC7B,iBACH;AAAA,kBACC,aAAa,oBAAC,SAAI,WAAU,8BAA8B,kBAAO;AAAA,mBACpE,IAEA,oBAAC,SAAI,WAAU,8BAA8B,kBAAO;AAAA,gBAEtD;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,SAAS;AAAA,oBACT,cAAY;AAAA,oBACZ,WAAU;AAAA,oBAEV,8BAAC,KAAE,WAAU,UAAS;AAAA;AAAA,gBACxB;AAAA,iBACF;AAAA,cAOA,oBAAC,SAAI,WAAU,qDAAoD,OAAO,EAAE,SAAS,cAAc,GAChG,UACH;AAAA,cACC,WAAW,UAAa,WAAW,QAAQ,WAAW,SACrD;AAAA,gBAAC;AAAA;AAAA,kBACC,0BAAuB;AAAA,kBACvB,WAAU;AAAA,kBACV,OAAO,EAAE,eAAe,4CAA4C;AAAA,kBAEnE;AAAA;AAAA,cACH;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA,IACF;AAAA,IACA,SAAS;AAAA,EACX;AACF;","names":[]}

package/dist/components/iban-input.d.ts

@@ -1,17 +1,19 @@
 import 'react';
 import '../lib/iban.js';
-export { cu as DEFAULT_IBAN_INPUT_LABELS, dr as IbanInput, ds as IbanInputLabels, dt as IbanInputProps } from '../delete-account-setting-CpIhzxxZ.js';
+export { cD as DEFAULT_IBAN_INPUT_LABELS, dC as IbanInput, dD as IbanInputLabels, dE as IbanInputProps } from '../delete-account-setting-FLyJf-kZ.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
+import '../hooks/use-breakpoint.js';
 import './chip.js';
 import 'lucide-react';
+import './field-parts.js';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -80,6 +82,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import './appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
@@ -92,4 +97,4 @@ import './sign-chip.js';
 import './column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import './field-parts.js';
+import './focus-ring.js';

package/dist/components/image-grid.js

@@ -63,7 +63,7 @@ function ImageGrid({
                 onClick: () => onOpen ? onOpen(i) : setOpenIndex(i),
                 className: cn(
                   "block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]",
-                  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
+                  "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
                   ASPECT_CLASS[aspect]
                 ),
                 children: kind === "file" ? /* @__PURE__ */ jsxs("span", { className: "flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]", children: [

package/dist/components/image-grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/image-grid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { FileText } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { AuthedFetcher } from \"../hooks/use-authed-src\";\nimport { AuthedImage } from \"./authed-image\";\nimport { Lightbox, imageItemKind } from \"./lightbox\";\nimport type { ImageItem, LightboxLabels } from \"./lightbox\";\n\nexport interface ImageGridLabels {\n  /** The list's accessible name. */\n  list: string;\n  /** An open button's name when an item's `alt` is empty: \"Image 3 of 7\". */\n  item: (index: number, count: number) => string;\n  /** The name of the group of per-image actions, given the image's name. */\n  actions: (name: string) => string;\n}\n\nexport const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels = {\n  list: \"Images\",\n  item: (index, count) => `Image ${index} of ${count}`,\n  actions: (name) => `Actions for ${name}`,\n};\n\nexport interface ImageGridProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"children\"> {\n  items: readonly ImageItem[];\n  /** The app's authenticated GET — thumbnails and the lightbox fetch through it. Only\n   *  images are fetched for the grid; a file (PDF) tile shows its icon and name. */\n  fetcher?: AuthedFetcher | null;\n  /**\n   * Per-image actions — a delete, an edit. Rendered BESIDE the open button (on top of\n   * the thumbnail's corner), never inside it: a button inside a button is invalid HTML\n   * and a screen reader flattens it into the outer one's name, where it cannot be\n   * reached. Use `IconButton variant=\"overlay\"` for controls that sit on a photo.\n   */\n  renderActions?: (item: ImageItem, index: number) => ReactNode;\n  /**\n   * What a tile's click does. Left out, the grid opens its own {@link Lightbox} on that\n   * image. Given, the grid opens nothing — for a caller that keeps the lightbox's\n   * index in the URL, or that opens something else.\n   */\n  onOpen?: (index: number) => void;\n  /**\n   * A fixed column count. Left out, the grid is responsive: as many columns of at\n   * least {@link minTileSize} px as fit, so the same grid is three across in a card on\n   * a phone and eight across on a desktop page — no breakpoints to choose.\n   */\n  columns?: number;\n  /** The smallest a tile may be in the responsive layout. Default 96 (px). */\n  minTileSize?: number;\n  /** `square` (default) crops to a square; `video` to 16:9; `auto` keeps each image's\n   *  own proportions (a floor plan), within a square-ish box. */\n  aspect?: \"square\" | \"video\" | \"auto\";\n  /** Props for the built-in lightbox (ignored with {@link onOpen}). */\n  lightbox?: {\n    loop?: boolean;\n    zoom?: boolean;\n    download?: boolean;\n    onDownload?: (item: ImageItem, index: number) => void;\n    labels?: Partial<LightboxLabels>;\n  };\n  labels?: Partial<ImageGridLabels>;\n}\n\nconst ASPECT_CLASS = {\n  square: \"aspect-square\",\n  video: \"aspect-video\",\n  auto: \"aspect-[4/3]\",\n} as const;\n\n/**\n * A file name as stem and extension, so a tile can cut the stem and keep the\n * extension whole: \"floor-plan-level-2.p / df\" (a break inside the extension) told the\n * reader less than \"floor-plan-le….pdf\" does. A leading dot (\".env\") or an\n * \"extension\" longer than five characters is not treated as one.\n */\nexport function splitFileName(name: string): [stem: string, ext: string] {\n  const dot = name.lastIndexOf(\".\");\n  if (dot <= 0 || name.length - dot > 6) return [name, \"\"];\n  return [name.slice(0, dot), name.slice(dot)];\n}\n\n/**\n * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect\n * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each\n * of which drew its own `grid grid-cols-N` of `<img>` that nothing could open, with no\n * loading state and nowhere to put a delete.\n *\n * Each tile is a real `<button>` named by the image's alt, with the actions beside it\n * and the caption below it — outside the button, so the name stays the alt and the\n * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while\n * loading, a \"couldn't load\" tile on failure.\n */\nexport function ImageGrid({\n  items,\n  fetcher,\n  renderActions,\n  onOpen,\n  columns,\n  minTileSize = 96,\n  aspect = \"square\",\n  lightbox,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: ImageGridProps) {\n  const labels = useKitLabels(\"imageGrid\", DEFAULT_IMAGE_GRID_LABELS, labelsProp);\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n  const count = items.length;\n\n  const gridStyle: CSSProperties = {\n    gridTemplateColumns:\n      columns !== undefined\n        ? `repeat(${columns}, minmax(0, 1fr))`\n        : `repeat(auto-fill, minmax(min(${minTileSize}px, 100%), 1fr))`,\n    ...style,\n  };\n\n  return (\n    <>\n      <ul\n        aria-label={labels.list}\n        {...rest}\n        className={cn(\"grid gap-2\", className)}\n        style={gridStyle}\n      >\n        {items.map((item, i) => {\n          const name = item.alt || labels.item(i + 1, count);\n          const kind = imageItemKind(item);\n          const actions = renderActions?.(item, i);\n          return (\n            <li key={item.key ?? item.src} className=\"relative min-w-0\">\n              <button\n                type=\"button\"\n                aria-label={name}\n                onClick={() => (onOpen ? onOpen(i) : setOpenIndex(i))}\n                className={cn(\n                  \"block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]\",\n                  \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n                  ASPECT_CLASS[aspect],\n                )}\n              >\n                {kind === \"file\" ? (\n                  <span className=\"flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]\">\n                    <FileText aria-hidden className=\"size-6 shrink-0 text-[var(--text-muted)]\" />\n                    <FileNameLabel name={item.fileName ?? item.alt ?? \"\"} />\n                  </span>\n                ) : (\n                  <AuthedImage\n                    src={item.thumbnailSrc ?? item.src}\n                    // The button is named already; the picture inside it is decoration\n                    // to a reader, or the name would be read twice.\n                    alt=\"\"\n                    fetcher={fetcher}\n                    loading=\"lazy\"\n                    wrapperClassName=\"h-full w-full\"\n                    className={cn(\"h-full w-full\", aspect === \"auto\" ? \"object-contain\" : \"object-cover\")}\n                  />\n                )}\n              </button>\n              {actions !== undefined && actions !== null && actions !== false && (\n                <div\n                  role=\"group\"\n                  aria-label={labels.actions(name)}\n                  // A backdrop behind the whole group, in the inverse token the overlay\n                  // buttons use: a translucent disc alone took most of its colour from\n                  // the picture, and on a pale photo or the light file tile the glyphs\n                  // washed out. Two layers of the inverse keep them readable over any\n                  // picture, in both themes.\n                  className=\"absolute end-1 top-1 flex gap-1 rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_40%,transparent)] p-0.5 backdrop-blur-sm\"\n                >\n                  {actions}\n                </div>\n              )}\n              {item.caption !== undefined && item.caption !== null && item.caption !== false && (\n                <div className=\"mt-1 line-clamp-2 text-xs text-[var(--text-secondary)]\">{item.caption}</div>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n      {!onOpen && (\n        <Lightbox\n          open={openIndex !== null}\n          onClose={() => setOpenIndex(null)}\n          items={items}\n          index={openIndex ?? 0}\n          onIndexChange={setOpenIndex}\n          fetcher={fetcher}\n          {...lightbox}\n        />\n      )}\n    </>\n  );\n}\n\n/** One line: the stem truncates, the extension never does. */\nfunction FileNameLabel({ name }: { name: string }) {\n  const [stem, ext] = splitFileName(name);\n  return (\n    <span aria-hidden className=\"flex max-w-full min-w-0\">\n      <span className=\"min-w-0 truncate\">{stem}</span>\n      {ext && <span className=\"shrink-0\">{ext}</span>}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/image-grid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from \"react\";\nimport { FileText } from \"lucide-react\";\n\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { AuthedFetcher } from \"../hooks/use-authed-src\";\nimport { AuthedImage } from \"./authed-image\";\nimport { Lightbox, imageItemKind } from \"./lightbox\";\nimport type { ImageItem, LightboxLabels } from \"./lightbox\";\n\nexport interface ImageGridLabels {\n  /** The list's accessible name. */\n  list: string;\n  /** An open button's name when an item's `alt` is empty: \"Image 3 of 7\". */\n  item: (index: number, count: number) => string;\n  /** The name of the group of per-image actions, given the image's name. */\n  actions: (name: string) => string;\n}\n\nexport const DEFAULT_IMAGE_GRID_LABELS: ImageGridLabels = {\n  list: \"Images\",\n  item: (index, count) => `Image ${index} of ${count}`,\n  actions: (name) => `Actions for ${name}`,\n};\n\nexport interface ImageGridProps extends Omit<ComponentPropsWithoutRef<\"ul\">, \"children\"> {\n  items: readonly ImageItem[];\n  /** The app's authenticated GET — thumbnails and the lightbox fetch through it. Only\n   *  images are fetched for the grid; a file (PDF) tile shows its icon and name. */\n  fetcher?: AuthedFetcher | null;\n  /**\n   * Per-image actions — a delete, an edit. Rendered BESIDE the open button (on top of\n   * the thumbnail's corner), never inside it: a button inside a button is invalid HTML\n   * and a screen reader flattens it into the outer one's name, where it cannot be\n   * reached. Use `IconButton variant=\"overlay\"` for controls that sit on a photo.\n   */\n  renderActions?: (item: ImageItem, index: number) => ReactNode;\n  /**\n   * What a tile's click does. Left out, the grid opens its own {@link Lightbox} on that\n   * image. Given, the grid opens nothing — for a caller that keeps the lightbox's\n   * index in the URL, or that opens something else.\n   */\n  onOpen?: (index: number) => void;\n  /**\n   * A fixed column count. Left out, the grid is responsive: as many columns of at\n   * least {@link minTileSize} px as fit, so the same grid is three across in a card on\n   * a phone and eight across on a desktop page — no breakpoints to choose.\n   */\n  columns?: number;\n  /** The smallest a tile may be in the responsive layout. Default 96 (px). */\n  minTileSize?: number;\n  /** `square` (default) crops to a square; `video` to 16:9; `auto` keeps each image's\n   *  own proportions (a floor plan), within a square-ish box. */\n  aspect?: \"square\" | \"video\" | \"auto\";\n  /** Props for the built-in lightbox (ignored with {@link onOpen}). */\n  lightbox?: {\n    loop?: boolean;\n    zoom?: boolean;\n    download?: boolean;\n    onDownload?: (item: ImageItem, index: number) => void;\n    labels?: Partial<LightboxLabels>;\n  };\n  labels?: Partial<ImageGridLabels>;\n}\n\nconst ASPECT_CLASS = {\n  square: \"aspect-square\",\n  video: \"aspect-video\",\n  auto: \"aspect-[4/3]\",\n} as const;\n\n/**\n * A file name as stem and extension, so a tile can cut the stem and keep the\n * extension whole: \"floor-plan-level-2.p / df\" (a break inside the extension) told the\n * reader less than \"floor-plan-le….pdf\" does. A leading dot (\".env\") or an\n * \"extension\" longer than five characters is not treated as one.\n */\nexport function splitFileName(name: string): [stem: string, ext: string] {\n  const dot = name.lastIndexOf(\".\");\n  if (dot <= 0 || name.length - dot > 6) return [name, \"\"];\n  return [name.slice(0, dot), name.slice(dot)];\n}\n\n/**\n * A grid of thumbnails that open in a {@link Lightbox} — kastlan's room and defect\n * photos (room-inspector, unit-rooms-tab) and its floor plans (unit-floor-plan), each\n * of which drew its own `grid grid-cols-N` of `<img>` that nothing could open, with no\n * loading state and nowhere to put a delete.\n *\n * Each tile is a real `<button>` named by the image's alt, with the actions beside it\n * and the caption below it — outside the button, so the name stays the alt and the\n * caption is read once. Placeholders come from {@link AuthedImage}: a skeleton while\n * loading, a \"couldn't load\" tile on failure.\n */\nexport function ImageGrid({\n  items,\n  fetcher,\n  renderActions,\n  onOpen,\n  columns,\n  minTileSize = 96,\n  aspect = \"square\",\n  lightbox,\n  labels: labelsProp,\n  className,\n  style,\n  ...rest\n}: ImageGridProps) {\n  const labels = useKitLabels(\"imageGrid\", DEFAULT_IMAGE_GRID_LABELS, labelsProp);\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n  const count = items.length;\n\n  const gridStyle: CSSProperties = {\n    gridTemplateColumns:\n      columns !== undefined\n        ? `repeat(${columns}, minmax(0, 1fr))`\n        : `repeat(auto-fill, minmax(min(${minTileSize}px, 100%), 1fr))`,\n    ...style,\n  };\n\n  return (\n    <>\n      <ul\n        aria-label={labels.list}\n        {...rest}\n        className={cn(\"grid gap-2\", className)}\n        style={gridStyle}\n      >\n        {items.map((item, i) => {\n          const name = item.alt || labels.item(i + 1, count);\n          const kind = imageItemKind(item);\n          const actions = renderActions?.(item, i);\n          return (\n            <li key={item.key ?? item.src} className=\"relative min-w-0\">\n              <button\n                type=\"button\"\n                aria-label={name}\n                onClick={() => (onOpen ? onOpen(i) : setOpenIndex(i))}\n                className={cn(\n                  \"block w-full overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-hover)]\",\n                  \"focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]\",\n                  ASPECT_CLASS[aspect],\n                )}\n              >\n                {kind === \"file\" ? (\n                  <span className=\"flex h-full w-full flex-col items-center justify-center gap-1 p-2 text-center text-xs text-[var(--text-secondary)]\">\n                    <FileText aria-hidden className=\"size-6 shrink-0 text-[var(--text-muted)]\" />\n                    <FileNameLabel name={item.fileName ?? item.alt ?? \"\"} />\n                  </span>\n                ) : (\n                  <AuthedImage\n                    src={item.thumbnailSrc ?? item.src}\n                    // The button is named already; the picture inside it is decoration\n                    // to a reader, or the name would be read twice.\n                    alt=\"\"\n                    fetcher={fetcher}\n                    loading=\"lazy\"\n                    wrapperClassName=\"h-full w-full\"\n                    className={cn(\"h-full w-full\", aspect === \"auto\" ? \"object-contain\" : \"object-cover\")}\n                  />\n                )}\n              </button>\n              {actions !== undefined && actions !== null && actions !== false && (\n                <div\n                  role=\"group\"\n                  aria-label={labels.actions(name)}\n                  // A backdrop behind the whole group, in the inverse token the overlay\n                  // buttons use: a translucent disc alone took most of its colour from\n                  // the picture, and on a pale photo or the light file tile the glyphs\n                  // washed out. Two layers of the inverse keep them readable over any\n                  // picture, in both themes.\n                  className=\"absolute end-1 top-1 flex gap-1 rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_40%,transparent)] p-0.5 backdrop-blur-sm\"\n                >\n                  {actions}\n                </div>\n              )}\n              {item.caption !== undefined && item.caption !== null && item.caption !== false && (\n                <div className=\"mt-1 line-clamp-2 text-xs text-[var(--text-secondary)]\">{item.caption}</div>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n      {!onOpen && (\n        <Lightbox\n          open={openIndex !== null}\n          onClose={() => setOpenIndex(null)}\n          items={items}\n          index={openIndex ?? 0}\n          onIndexChange={setOpenIndex}\n          fetcher={fetcher}\n          {...lightbox}\n        />\n      )}\n    </>\n  );\n}\n\n/** One line: the stem truncates, the extension never does. */\nfunction FileNameLabel({ name }: { name: string }) {\n  const [stem, ext] = splitFileName(name);\n  return (\n    <span aria-hidden className=\"flex max-w-full min-w-0\">\n      <span className=\"min-w-0 truncate\">{stem}</span>\n      {ext && <span className=\"shrink-0\">{ext}</span>}\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/inline-edit-field.js

@@ -5,6 +5,7 @@ import { cn } from "../lib/cn.js";
 import { useAnnounce } from "../hooks/use-announce.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { Input, Spinner } from "./ui.js";
+import { FOCUS_RING } from "./focus-ring.js";
 import { Tooltip } from "./tooltip.js";
 import { useCommitReason } from "./write-lock.js";
 const DEFAULT_INLINE_EDIT_LABELS = {
@@ -18,6 +19,7 @@ function hasContent(node) {
 function RenderEditor({ render, ...props }) {
   return render(props);
 }
+const VALUE_WRAP_AT_LARGE = "large:whitespace-normal large:break-words";
 function asPromise(result) {
   return result && typeof result.then === "function" ? result : null;
 }
@@ -193,7 +195,7 @@ function InlineEditField(props) {
   const alignClass = align === "end" ? "text-end" : "text-start";
   let body;
   if (readOnly) {
-    body = /* @__PURE__ */ jsx("span", { ...private_, className: cn("block min-w-0 truncate", alignClass), children: content });
+    body = /* @__PURE__ */ jsx("span", { ...private_, className: cn("block min-w-0 truncate", VALUE_WRAP_AT_LARGE, alignClass), children: content });
   } else if (editing) {
     const describedBy = failed ? errorId : void 0;
     const editorProps = {
@@ -239,7 +241,7 @@ function InlineEditField(props) {
             ) }),
             pending && /* @__PURE__ */ jsx(Spinner, { label: null, className: "size-4 shrink-0" })
           ] }),
-          failed && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-[11px] leading-tight text-[var(--danger)]", children: failure })
+          failed && /* @__PURE__ */ jsx("p", { id: errorId, className: "mt-1 text-caption leading-tight text-[var(--danger)]", children: failure })
         ]
       }
     );
@@ -255,7 +257,9 @@ function InlineEditField(props) {
           "aria-describedby": reasonId,
           onClick: (e) => e.preventDefault(),
           className: cn(
-            "block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+            "block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none",
+            VALUE_WRAP_AT_LARGE,
+            FOCUS_RING,
             alignClass
           ),
           children: content
@@ -274,7 +278,9 @@ function InlineEditField(props) {
         ...private_,
         onClick: () => setOpen(true),
         className: cn(
-          "block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]",
+          "block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none",
+          VALUE_WRAP_AT_LARGE,
+          FOCUS_RING,
           alignClass
         ),
         children: content

package/dist/components/inline-edit-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/inline-edit-field.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from \"react\";\nimport type { FocusEvent, InputHTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Input, Spinner } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\n\n/**\n * Every string {@link InlineEditField} says on its own behalf — the `inlineEdit`\n * namespace of `<UiKitProvider labels>`, overridable per instance through `labels`.\n */\nexport interface InlineEditLabels {\n  /** The display button's tooltip and description — what pressing it does. Receives\n   *  the field's `label` (\"Budget name\" → \"Edit Budget name\"). */\n  edit: (label: string) => string;\n  /** Shown (and spoken) when `onCommit` rejects and no `formatError` says better. */\n  failed: string;\n  /** What the display shows for an empty value, when no `placeholder` is given. */\n  empty: string;\n}\n\nexport const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels = {\n  edit: (label) => `Edit ${label}`,\n  failed: \"The change could not be saved.\",\n  empty: \"Empty\",\n};\n\n/** What an `editor` render prop is handed: the draft and the means to end the edit. */\nexport interface InlineEditorProps<T> {\n  /** The draft — seeded from `value` each time the editor opens. */\n  value: T;\n  /** Replace the draft (every keystroke). */\n  onChange: (next: T) => void;\n  /**\n   * End the edit and save. Without an argument it saves the draft; WITH one it saves\n   * that — for an editor whose own commit hands over a resolved value (`NumberInput`'s\n   * `onCommit` gives \"1050\" for a typed \"1100-50\"). Called twice (the editor's own\n   * Enter, then the field's), the second call does nothing.\n   */\n  commit: (next?: T) => void;\n  /** End the edit and drop the draft — what Escape does. */\n  cancel: () => void;\n  /** The save is in flight: make the control read-only (not disabled — it has focus). */\n  pending: boolean;\n  /** The field's `label`, for the control's accessible name. */\n  label: string;\n  /** The last save failed and the draft has not been touched since. */\n  invalid: boolean;\n  /** The id of the failure message while there is one, for `aria-describedby`. */\n  describedBy: string | undefined;\n  /** The four above as attributes — spread them on a kit field that takes the DOM\n   *  spelling: `<AmountInput {...p.inputProps} … />`. */\n  inputProps: {\n    \"aria-label\": string;\n    \"aria-invalid\": true | undefined;\n    \"aria-describedby\": string | undefined;\n    readOnly: boolean;\n  };\n}\n\ninterface InlineEditFieldBaseProps<T> {\n  /** The saved value — what the display shows, and what the editor opens on. */\n  value: T;\n  /**\n   * Save `next`. Return a promise and the field waits: the editor stays open and\n   * read-only with a spinner until it settles, closes when it resolves, and STAYS OPEN\n   * with the failure under it when it rejects (or throws) — the typed value is kept for\n   * a retry. Not called when the draft equals `value` (see `isEqual`): opening the\n   * editor and leaving it unchanged is not a write.\n   */\n  onCommit: (next: T) => void | Promise<unknown>;\n  /** What the value is (\"Budget name\", \"Assigned\") — the editor's accessible name and\n   *  the subject of the display's \"Edit …\" description. Not drawn: inline, the row or\n   *  the column header is the visible label. */\n  label: string;\n  /** The value as the display shows it — a formatted amount, a date. Default: the\n   *  value as text. */\n  display?: (value: T) => ReactNode;\n  /** Whether the draft is unchanged, so leaving the editor is not a write. Default\n   *  `Object.is`. keksdose compares assigned amounts as NUMBERS — \"1100\" is the\n   *  server's \"1100.0000\". */\n  isEqual?: (a: T, b: T) => boolean;\n  /** What the display shows for an empty value (`\"\"`, `null`, an empty `display`).\n   *  Default `labels.empty`. */\n  placeholder?: ReactNode;\n  /** `\"end\"` for a figure in a right-aligned money column. Default `\"start\"`. */\n  align?: \"start\" | \"end\";\n  /** Look, do not touch — a guest's view: the value as plain text, no button. */\n  readOnly?: boolean;\n  /**\n   * Why it cannot be edited now — the write lock's sentence, a closed period. The\n   * value stays a BUTTON (focusable, `aria-disabled`) with the reason in the kit\n   * Tooltip and its description; it opens no editor. An editor that is open when the\n   * reason arrives closes, its draft dropped: a field you can type into must be one\n   * whose value can be saved (keksdose dev#496).\n   */\n  disabledReason?: ReactNode;\n  /** This field COMMITS — under a locked {@link WriteLockProvider} it takes the\n   *  `disabledReason` path with the lock's reason (which wins over its own). No\n   *  provider, or an unlocked one: no effect. */\n  commit?: boolean;\n  /** The value is the user's own data: `data-private` on the display and the editor,\n   *  so the app's demo-mode blur covers both. */\n  redact?: boolean;\n  /** Turns a rejection into words. Default `labels.failed`. */\n  formatError?: (error: unknown) => ReactNode;\n  /** Controlled open state — a row's swipe action that opens the editor from outside\n   *  (keksdose's assigned cell). Left out, the field keeps its own. */\n  editing?: boolean;\n  /** Called with the next open state: on open, on a save that resolved, on cancel. */\n  onEditingChange?: (editing: boolean) => void;\n  /** Attributes for the DEFAULT text editor's `<input>` — `maxLength`, `inputMode`,\n   *  `autoComplete`. Ignored with `editor`. */\n  inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, \"value\" | \"defaultValue\" | \"onChange\" | \"type\">;\n  /** Classes for the root. */\n  className?: string;\n  labels?: Partial<InlineEditLabels>;\n}\n\ntype EditorRender<T> = (props: InlineEditorProps<T>) => ReactNode;\n\n/**\n * The editor. Optional for a string value — the kit's `Input`, compact — and\n * REQUIRED for anything else, since only the caller knows how to edit a number or an\n * amount. Render a kit field from the props it is handed:\n *\n * ```tsx\n * editor={(p) => (\n *   <NumberInput calculator={false} ariaLabel={p.label} value={p.value} onChange={p.onChange}\n *     onCommit={p.commit} aria-invalid={p.invalid || undefined} aria-describedby={p.describedBy} />\n * )}\n * ```\n *\n * The field itself handles Enter (save), Escape (cancel) and focus leaving the editor\n * (save) around whatever is rendered — a key the editor has already handled\n * (`preventDefault`, as a listbox does for its Enter) is left to it. Focus counts as\n * \"inside\" across a portal, so a picker or a phone keypad the editor opens does not\n * end the edit.\n */\nexport type InlineEditFieldProps<T = string> = InlineEditFieldBaseProps<T> &\n  ([T] extends [string] ? { editor?: EditorRender<T> } : { editor: EditorRender<T> });\n\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\n/** Calls the `editor` render prop as a component of its own: the props it is handed\n *  close over the field's refs, and a render prop called in the field's own render\n *  would read like a ref read during render. Module-level, so the type is stable and\n *  the editor never remounts. */\nfunction RenderEditor<T>({ render, ...props }: InlineEditorProps<T> & { render: EditorRender<T> }) {\n  return render(props);\n}\n\n/** `onCommit`'s result, if it is a promise. */\nfunction asPromise(result: unknown): Promise<unknown> | null {\n  return result && typeof (result as Promise<unknown>).then === \"function\" ? (result as Promise<unknown>) : null;\n}\n\n/**\n * A value that edits in place: a quiet button showing the value; click it (or Enter\n * on it) and it becomes a field; Enter or leaving the field saves, Escape cancels\n * (keksdose K9).\n *\n * keksdose has three of them by hand — the budget's assigned cell (budget-cells.tsx),\n * the invoice line's value cells (invoice-lines-table.tsx `EditableCell`) and the\n * budget rename (budgets-page.tsx, an `Input` + Save + Cancel with no Escape) — and\n * each had to learn the same rules:\n *\n *  - **The display's accessible name is the VALUE.** A cell named \"Edit\" reads a table\n *    of \"edit, edit, edit\"; the action is the description instead (\"Edit Assigned\"),\n *    in the kit Tooltip on hover and focus.\n *  - **An unchanged draft is not a write.** Opening the editor and leaving it was a PUT\n *    in keksdose until `isEqual` compared numbers, and on a sealed budget an outbox row\n *    for a change nobody made.\n *  - **A failed save keeps the editor.** The typed value is the user's work; the\n *    failure is shown under it (attached with `aria-describedby`, and spoken), and the\n *    next keystroke clears it. Escape still drops the draft.\n *  - **Locked means a disabled BUTTON, not a disabled field** (keksdose dev#496): at\n *    rest a real row shows this button, so a locked page shows the same, with the\n *    reason — never a field that takes keys it cannot save.\n *\n * Inside a {@link DataTable} cell it needs nothing extra: the table already leaves a\n * click or a key on a control of the cell to that control. Focus returns to the value\n * after Enter or Escape; after a save that came from focus leaving, it stays where the\n * user put it.\n *\n * ```tsx\n * <InlineEditField label={t(\"budgets.name\")} value={budget.name}\n *   onCommit={(name) => rename.mutateAsync({ id: budget.id, name })} inputProps={{ maxLength: 120 }} />\n * ```\n */\nexport function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {\n  const {\n    value,\n    onCommit,\n    label,\n    display,\n    isEqual = Object.is,\n    placeholder,\n    align = \"start\",\n    readOnly = false,\n    disabledReason: ownDisabledReason,\n    commit,\n    redact = false,\n    formatError,\n    editing: editingProp,\n    onEditingChange,\n    inputProps,\n    className,\n    labels: labelsProp,\n  } = props;\n  const editor = props.editor as EditorRender<T> | undefined;\n  const labels = useKitLabels(\"inlineEdit\", DEFAULT_INLINE_EDIT_LABELS, labelsProp);\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n\n  const [openState, setOpenState] = useState(false);\n  const open = editingProp ?? openState;\n  // Locked (or read-only) wins over an open flag: a stale `editing` must never bring a\n  // live commit-on-blur field back on a page that cannot save it.\n  const editing = open && !locked && !readOnly;\n  const [draft, setDraft] = useState<T>(value);\n  const [pending, setPending] = useState(false);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const failed = hasContent(failure);\n\n  const errorId = useId();\n  const reasonId = useId();\n  const displayRef = useRef<HTMLButtonElement>(null);\n  const editorRef = useRef<HTMLDivElement>(null);\n  const alert = useAnnounce({ politeness: \"assertive\" });\n\n  // One edit ends once: Enter in a NumberInput commits through its own `onCommit` and\n  // then reaches the field's Enter; a save that closes the editor unmounts the focused\n  // control, which some browsers answer with a blur. The second ending is a no-op.\n  const ended = useRef(false);\n  const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mounted = useRef(true);\n  // The latest draft for the deferred blur check, which runs after a render.\n  const draftRef = useRef(draft);\n  useEffect(() => {\n    draftRef.current = draft;\n  });\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n      if (blurTimer.current) clearTimeout(blurTimer.current);\n    };\n  }, []);\n\n  // Seed the draft when the editor opens — from wherever the open came (the button, a\n  // controlled `editing`). During render, like DangerConfirm's wipe, so no frame shows\n  // the editor holding the previous edit's text.\n  const [wasEditing, setWasEditing] = useState(editing);\n  if (wasEditing !== editing) {\n    setWasEditing(editing);\n    if (editing) {\n      setDraft(value);\n      setFailure(null);\n      setPending(false);\n    }\n  }\n  // An open editor that a lock (or `readOnly`) took away is closed for good, not\n  // merely hidden until the lock lifts.\n  if (openState && !editing && editingProp === undefined) setOpenState(false);\n\n  // Focus follows the edit: into the editor when it opens, back to the value when it\n  // closes — but only if focus went down with the editor (Enter, Escape, a save that\n  // resolved under it). A save that came from focus LEAVING keeps focus where it went.\n  const prevEditing = useRef(editing);\n  useEffect(() => {\n    const changed = prevEditing.current !== editing;\n    prevEditing.current = editing;\n    if (!changed) return;\n    if (editing) {\n      // A fresh edit, which may end once. Here rather than in the seed above: a ref is\n      // not written during render, and no event can end the edit before this runs.\n      ended.current = false;\n      const control = editorRef.current?.querySelector<HTMLElement>(\n        \"input:not([type=hidden]), textarea, select, [contenteditable='true'], [tabindex]:not([tabindex='-1']), button\",\n      );\n      control?.focus();\n      if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) control.select();\n      return;\n    }\n    // However it closed — a save, Escape, a lock taking it away — a blur check still\n    // queued from the editor has nothing left to save.\n    ended.current = true;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (lost) displayRef.current?.focus();\n  }, [editing]);\n\n  const setOpen = (next: boolean) => {\n    if (editingProp === undefined) setOpenState(next);\n    onEditingChange?.(next);\n  };\n\n  const fail = (caught: unknown) => {\n    ended.current = false;\n    const message = formatError ? formatError(caught) : labels.failed;\n    setFailure(hasContent(message) ? message : labels.failed);\n    alert.announce(typeof message === \"string\" && message !== \"\" ? message : labels.failed);\n    // Focus back into the editor if the failure left it nowhere (a pending field that\n    // the browser let go of); never pulled back from somewhere the user went.\n    const active = document.activeElement;\n    if (active === null || active === document.body) {\n      editorRef.current?.querySelector<HTMLElement>(\"input, textarea, select, [tabindex]\")?.focus();\n    }\n  };\n\n  const save = (next: T = draftRef.current) => {\n    if (!editing || ended.current || pending) return;\n    ended.current = true;\n    if (next !== draftRef.current) setDraft(next);\n    if (isEqual(next, value)) {\n      setOpen(false);\n      return;\n    }\n    let result: unknown;\n    try {\n      result = onCommit(next);\n    } catch (caught) {\n      fail(caught);\n      return;\n    }\n    const promise = asPromise(result);\n    if (!promise) {\n      setOpen(false);\n      return;\n    }\n    setPending(true);\n    setFailure(null);\n    promise.then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        setOpen(false);\n      },\n      (caught: unknown) => {\n        if (!mounted.current) return;\n        setPending(false);\n        fail(caught);\n      },\n    );\n  };\n\n  const cancel = () => {\n    // A request that has left cannot be called back; Escape waits for it.\n    if (!editing || pending) return;\n    ended.current = true;\n    setOpen(false);\n  };\n\n  const change = (next: T) => {\n    if (pending) return;\n    setDraft(next);\n    // Now, not after the render: a blur check scheduled before that render reads it.\n    draftRef.current = next;\n    // The failure described the draft that was sent; once edited it describes nothing\n    // on screen, and the next save (or blur) is a fresh attempt.\n    setFailure(null);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      // Ours, not the dialog's or the popover's around the field.\n      e.preventDefault();\n      e.stopPropagation();\n      cancel();\n      return;\n    }\n    // Not mid-composition: Enter there picks the IME's candidate (Japanese, Chinese).\n    if (e.key === \"Enter\" && !e.nativeEvent.isComposing && !e.shiftKey) {\n      e.preventDefault();\n      save();\n    }\n  };\n\n  // Leaving the editor saves. Deferred one task, and cancelled by any focus that lands\n  // back inside: React reports focus moves through PORTALS to the component tree, so a\n  // calculator popover or a phone keypad the editor opened counts as inside, which a\n  // DOM `contains` check would get wrong. A failure on screen holds the editor: the\n  // user is looking at why, and moving away is not a retry.\n  const onBlur = (e: FocusEvent<HTMLDivElement>) => {\n    if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = setTimeout(() => {\n      blurTimer.current = null;\n      if (!mounted.current || failed) return;\n      save();\n    }, 0);\n  };\n  const onFocus = () => {\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n  };\n\n  const private_ = redact ? { \"data-private\": true } : undefined;\n  const shown = display ? display(value) : value === null || value === undefined ? \"\" : String(value);\n  const content = hasContent(shown) ? (\n    shown\n  ) : (\n    <span className=\"text-[var(--text-muted)]\">{placeholder ?? labels.empty}</span>\n  );\n  const alignClass = align === \"end\" ? \"text-end\" : \"text-start\";\n\n  let body: ReactNode;\n  if (readOnly) {\n    body = (\n      <span {...private_} className={cn(\"block min-w-0 truncate\", alignClass)}>\n        {content}\n      </span>\n    );\n  } else if (editing) {\n    const describedBy = failed ? errorId : undefined;\n    const editorProps: InlineEditorProps<T> = {\n      value: draft,\n      onChange: change,\n      commit: save,\n      cancel,\n      pending,\n      label,\n      invalid: failed,\n      describedBy,\n      inputProps: {\n        \"aria-label\": label,\n        \"aria-invalid\": failed || undefined,\n        \"aria-describedby\": describedBy,\n        readOnly: pending,\n      },\n    };\n    body = (\n      // A wrapper for the keys and the focus, not a control: the keys belong to the\n      // field inside it, which is what has focus.\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- see above\n      <div\n        ref={editorRef}\n        {...private_}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        aria-busy={pending || undefined}\n        className=\"min-w-0\"\n      >\n        <div className=\"flex min-w-0 items-center gap-1.5\">\n          <div className=\"min-w-0 flex-1\">\n            {editor ? (\n              <RenderEditor render={editor} {...editorProps} />\n            ) : (\n              <Input\n                {...inputProps}\n                {...editorProps.inputProps}\n                value={String(draft ?? \"\")}\n                onChange={(e) => change(e.target.value as unknown as T)}\n                className={cn(\"px-2 py-1\", alignClass, inputProps?.className)}\n              />\n            )}\n          </div>\n          {/* Decorative: `aria-busy` on the wrapper says it. */}\n          {pending && <Spinner label={null} className=\"size-4 shrink-0\" />}\n        </div>\n        {failed && (\n          <p id={errorId} className=\"mt-1 text-[11px] leading-tight text-[var(--danger)]\">\n            {failure}\n          </p>\n        )}\n      </div>\n    );\n  } else if (locked) {\n    // Button's `disabledReason` path, spelled out for a button that must look like\n    // the value rather than like a Button: focusable, `aria-disabled`, every\n    // activation swallowed, the reason in the kit Tooltip and in a `hidden` copy that\n    // describes it. The button in a FRAGMENT so the Tooltip does not add the bubble as\n    // a second description of the same sentence.\n    body = (\n      <Tooltip label={disabledReason} className=\"flex w-full min-w-0\">\n        <>\n          <button\n            ref={displayRef}\n            type=\"button\"\n            {...private_}\n            aria-disabled\n            aria-describedby={reasonId}\n            onClick={(e) => e.preventDefault()}\n            className={cn(\n              \"block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n              alignClass,\n            )}\n          >\n            {content}\n          </button>\n          <span id={reasonId} hidden>\n            {disabledReason}\n          </span>\n        </>\n      </Tooltip>\n    );\n  } else {\n    body = (\n      // Lazy: a table of these mounts no bubble until one is hovered or focused, and\n      // the closed bubble's text is in no ancestor's accessible name.\n      <Tooltip label={labels.edit(label)} lazy className=\"flex w-full min-w-0\">\n        <button\n          ref={displayRef}\n          type=\"button\"\n          {...private_}\n          onClick={() => setOpen(true)}\n          className={cn(\n            \"block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)]\",\n            alignClass,\n          )}\n        >\n          {content}\n        </button>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-editing={editing || undefined}>\n      {body}\n      {/* Always mounted: a live region that mounts with its message is usually missed. */}\n      <span {...alert.regionProps} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/inline-edit-field.tsx"],"sourcesContent":["import { useEffect, useId, useRef, useState } from \"react\";\nimport type { FocusEvent, InputHTMLAttributes, KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Input, Spinner } from \"./ui\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason } from \"./write-lock\";\n\n/**\n * Every string {@link InlineEditField} says on its own behalf — the `inlineEdit`\n * namespace of `<UiKitProvider labels>`, overridable per instance through `labels`.\n */\nexport interface InlineEditLabels {\n  /** The display button's tooltip and description — what pressing it does. Receives\n   *  the field's `label` (\"Budget name\" → \"Edit Budget name\"). */\n  edit: (label: string) => string;\n  /** Shown (and spoken) when `onCommit` rejects and no `formatError` says better. */\n  failed: string;\n  /** What the display shows for an empty value, when no `placeholder` is given. */\n  empty: string;\n}\n\nexport const DEFAULT_INLINE_EDIT_LABELS: InlineEditLabels = {\n  edit: (label) => `Edit ${label}`,\n  failed: \"The change could not be saved.\",\n  empty: \"Empty\",\n};\n\n/** What an `editor` render prop is handed: the draft and the means to end the edit. */\nexport interface InlineEditorProps<T> {\n  /** The draft — seeded from `value` each time the editor opens. */\n  value: T;\n  /** Replace the draft (every keystroke). */\n  onChange: (next: T) => void;\n  /**\n   * End the edit and save. Without an argument it saves the draft; WITH one it saves\n   * that — for an editor whose own commit hands over a resolved value (`NumberInput`'s\n   * `onCommit` gives \"1050\" for a typed \"1100-50\"). Called twice (the editor's own\n   * Enter, then the field's), the second call does nothing.\n   */\n  commit: (next?: T) => void;\n  /** End the edit and drop the draft — what Escape does. */\n  cancel: () => void;\n  /** The save is in flight: make the control read-only (not disabled — it has focus). */\n  pending: boolean;\n  /** The field's `label`, for the control's accessible name. */\n  label: string;\n  /** The last save failed and the draft has not been touched since. */\n  invalid: boolean;\n  /** The id of the failure message while there is one, for `aria-describedby`. */\n  describedBy: string | undefined;\n  /** The four above as attributes — spread them on a kit field that takes the DOM\n   *  spelling: `<AmountInput {...p.inputProps} … />`. */\n  inputProps: {\n    \"aria-label\": string;\n    \"aria-invalid\": true | undefined;\n    \"aria-describedby\": string | undefined;\n    readOnly: boolean;\n  };\n}\n\ninterface InlineEditFieldBaseProps<T> {\n  /** The saved value — what the display shows, and what the editor opens on. */\n  value: T;\n  /**\n   * Save `next`. Return a promise and the field waits: the editor stays open and\n   * read-only with a spinner until it settles, closes when it resolves, and STAYS OPEN\n   * with the failure under it when it rejects (or throws) — the typed value is kept for\n   * a retry. Not called when the draft equals `value` (see `isEqual`): opening the\n   * editor and leaving it unchanged is not a write.\n   */\n  onCommit: (next: T) => void | Promise<unknown>;\n  /** What the value is (\"Budget name\", \"Assigned\") — the editor's accessible name and\n   *  the subject of the display's \"Edit …\" description. Not drawn: inline, the row or\n   *  the column header is the visible label. */\n  label: string;\n  /** The value as the display shows it — a formatted amount, a date. Default: the\n   *  value as text. */\n  display?: (value: T) => ReactNode;\n  /** Whether the draft is unchanged, so leaving the editor is not a write. Default\n   *  `Object.is`. keksdose compares assigned amounts as NUMBERS — \"1100\" is the\n   *  server's \"1100.0000\". */\n  isEqual?: (a: T, b: T) => boolean;\n  /** What the display shows for an empty value (`\"\"`, `null`, an empty `display`).\n   *  Default `labels.empty`. */\n  placeholder?: ReactNode;\n  /** `\"end\"` for a figure in a right-aligned money column. Default `\"start\"`. */\n  align?: \"start\" | \"end\";\n  /** Look, do not touch — a guest's view: the value as plain text, no button. */\n  readOnly?: boolean;\n  /**\n   * Why it cannot be edited now — the write lock's sentence, a closed period. The\n   * value stays a BUTTON (focusable, `aria-disabled`) with the reason in the kit\n   * Tooltip and its description; it opens no editor. An editor that is open when the\n   * reason arrives closes, its draft dropped: a field you can type into must be one\n   * whose value can be saved (keksdose dev#496).\n   */\n  disabledReason?: ReactNode;\n  /** This field COMMITS — under a locked {@link WriteLockProvider} it takes the\n   *  `disabledReason` path with the lock's reason (which wins over its own). No\n   *  provider, or an unlocked one: no effect. */\n  commit?: boolean;\n  /** The value is the user's own data: `data-private` on the display and the editor,\n   *  so the app's demo-mode blur covers both. */\n  redact?: boolean;\n  /** Turns a rejection into words. Default `labels.failed`. */\n  formatError?: (error: unknown) => ReactNode;\n  /** Controlled open state — a row's swipe action that opens the editor from outside\n   *  (keksdose's assigned cell). Left out, the field keeps its own. */\n  editing?: boolean;\n  /** Called with the next open state: on open, on a save that resolved, on cancel. */\n  onEditingChange?: (editing: boolean) => void;\n  /** Attributes for the DEFAULT text editor's `<input>` — `maxLength`, `inputMode`,\n   *  `autoComplete`. Ignored with `editor`. */\n  inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, \"value\" | \"defaultValue\" | \"onChange\" | \"type\">;\n  /** Classes for the root. */\n  className?: string;\n  labels?: Partial<InlineEditLabels>;\n}\n\ntype EditorRender<T> = (props: InlineEditorProps<T>) => ReactNode;\n\n/**\n * The editor. Optional for a string value — the kit's `Input`, compact — and\n * REQUIRED for anything else, since only the caller knows how to edit a number or an\n * amount. Render a kit field from the props it is handed:\n *\n * ```tsx\n * editor={(p) => (\n *   <NumberInput calculator={false} ariaLabel={p.label} value={p.value} onChange={p.onChange}\n *     onCommit={p.commit} aria-invalid={p.invalid || undefined} aria-describedby={p.describedBy} />\n * )}\n * ```\n *\n * The field itself handles Enter (save), Escape (cancel) and focus leaving the editor\n * (save) around whatever is rendered — a key the editor has already handled\n * (`preventDefault`, as a listbox does for its Enter) is left to it. Focus counts as\n * \"inside\" across a portal, so a picker or a phone keypad the editor opens does not\n * end the edit.\n */\nexport type InlineEditFieldProps<T = string> = InlineEditFieldBaseProps<T> &\n  ([T] extends [string] ? { editor?: EditorRender<T> } : { editor: EditorRender<T> });\n\nfunction hasContent(node: ReactNode): boolean {\n  return node !== undefined && node !== null && node !== false && node !== \"\";\n}\n\n/** Calls the `editor` render prop as a component of its own: the props it is handed\n *  close over the field's refs, and a render prop called in the field's own render\n *  would read like a ref read during render. Module-level, so the type is stable and\n *  the editor never remounts. */\nfunction RenderEditor<T>({ render, ...props }: InlineEditorProps<T> & { render: EditorRender<T> }) {\n  return render(props);\n}\n\n/**\n * The value at Large and Extra large (0.32.1, keksdose's 0.32 report;\n * docs/text-size-harmonization.md §4 \"nothing truncates\"): the display button, the\n * locked one and the read-only text wrap instead of ending in \"…\", and break a word too\n * long for the cell, so an IBAN or an e-mail address shows to its last character. The\n * value IS the button's accessible name and the thing being edited: a reader who needs\n * big type cannot recover a cut-off end by squinting. A `large:` class, so a table of\n * these keeps its one-line cells at Normal.\n *\n * `break-words`, not `[overflow-wrap:anywhere]`: these live in table cells (keksdose's\n * budget and invoice lines), and `anywhere` lowers the value's min-content width to one\n * letter, so an auto-sized column could squeeze an amount to a digit per line. With\n * `break-word` a column keeps each word whole; the button is `w-full`, so a word wider\n * than a sized cell still breaks.\n */\nconst VALUE_WRAP_AT_LARGE = \"large:whitespace-normal large:break-words\";\n\n/** `onCommit`'s result, if it is a promise. */\nfunction asPromise(result: unknown): Promise<unknown> | null {\n  return result && typeof (result as Promise<unknown>).then === \"function\" ? (result as Promise<unknown>) : null;\n}\n\n/**\n * A value that edits in place: a quiet button showing the value; click it (or Enter\n * on it) and it becomes a field; Enter or leaving the field saves, Escape cancels\n * (keksdose K9).\n *\n * keksdose has three of them by hand — the budget's assigned cell (budget-cells.tsx),\n * the invoice line's value cells (invoice-lines-table.tsx `EditableCell`) and the\n * budget rename (budgets-page.tsx, an `Input` + Save + Cancel with no Escape) — and\n * each had to learn the same rules:\n *\n *  - **The display's accessible name is the VALUE.** A cell named \"Edit\" reads a table\n *    of \"edit, edit, edit\"; the action is the description instead (\"Edit Assigned\"),\n *    in the kit Tooltip on hover and focus.\n *  - **An unchanged draft is not a write.** Opening the editor and leaving it was a PUT\n *    in keksdose until `isEqual` compared numbers, and on a sealed budget an outbox row\n *    for a change nobody made.\n *  - **A failed save keeps the editor.** The typed value is the user's work; the\n *    failure is shown under it (attached with `aria-describedby`, and spoken), and the\n *    next keystroke clears it. Escape still drops the draft.\n *  - **Locked means a disabled BUTTON, not a disabled field** (keksdose dev#496): at\n *    rest a real row shows this button, so a locked page shows the same, with the\n *    reason — never a field that takes keys it cannot save.\n *\n * Inside a {@link DataTable} cell it needs nothing extra: the table already leaves a\n * click or a key on a control of the cell to that control. Focus returns to the value\n * after Enter or Escape; after a save that came from focus leaving, it stays where the\n * user put it.\n *\n * ```tsx\n * <InlineEditField label={t(\"budgets.name\")} value={budget.name}\n *   onCommit={(name) => rename.mutateAsync({ id: budget.id, name })} inputProps={{ maxLength: 120 }} />\n * ```\n */\nexport function InlineEditField<T = string>(props: InlineEditFieldProps<T>) {\n  const {\n    value,\n    onCommit,\n    label,\n    display,\n    isEqual = Object.is,\n    placeholder,\n    align = \"start\",\n    readOnly = false,\n    disabledReason: ownDisabledReason,\n    commit,\n    redact = false,\n    formatError,\n    editing: editingProp,\n    onEditingChange,\n    inputProps,\n    className,\n    labels: labelsProp,\n  } = props;\n  const editor = props.editor as EditorRender<T> | undefined;\n  const labels = useKitLabels(\"inlineEdit\", DEFAULT_INLINE_EDIT_LABELS, labelsProp);\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n\n  const [openState, setOpenState] = useState(false);\n  const open = editingProp ?? openState;\n  // Locked (or read-only) wins over an open flag: a stale `editing` must never bring a\n  // live commit-on-blur field back on a page that cannot save it.\n  const editing = open && !locked && !readOnly;\n  const [draft, setDraft] = useState<T>(value);\n  const [pending, setPending] = useState(false);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const failed = hasContent(failure);\n\n  const errorId = useId();\n  const reasonId = useId();\n  const displayRef = useRef<HTMLButtonElement>(null);\n  const editorRef = useRef<HTMLDivElement>(null);\n  const alert = useAnnounce({ politeness: \"assertive\" });\n\n  // One edit ends once: Enter in a NumberInput commits through its own `onCommit` and\n  // then reaches the field's Enter; a save that closes the editor unmounts the focused\n  // control, which some browsers answer with a blur. The second ending is a no-op.\n  const ended = useRef(false);\n  const blurTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mounted = useRef(true);\n  // The latest draft for the deferred blur check, which runs after a render.\n  const draftRef = useRef(draft);\n  useEffect(() => {\n    draftRef.current = draft;\n  });\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n      if (blurTimer.current) clearTimeout(blurTimer.current);\n    };\n  }, []);\n\n  // Seed the draft when the editor opens — from wherever the open came (the button, a\n  // controlled `editing`). During render, like DangerConfirm's wipe, so no frame shows\n  // the editor holding the previous edit's text.\n  const [wasEditing, setWasEditing] = useState(editing);\n  if (wasEditing !== editing) {\n    setWasEditing(editing);\n    if (editing) {\n      setDraft(value);\n      setFailure(null);\n      setPending(false);\n    }\n  }\n  // An open editor that a lock (or `readOnly`) took away is closed for good, not\n  // merely hidden until the lock lifts.\n  if (openState && !editing && editingProp === undefined) setOpenState(false);\n\n  // Focus follows the edit: into the editor when it opens, back to the value when it\n  // closes — but only if focus went down with the editor (Enter, Escape, a save that\n  // resolved under it). A save that came from focus LEAVING keeps focus where it went.\n  const prevEditing = useRef(editing);\n  useEffect(() => {\n    const changed = prevEditing.current !== editing;\n    prevEditing.current = editing;\n    if (!changed) return;\n    if (editing) {\n      // A fresh edit, which may end once. Here rather than in the seed above: a ref is\n      // not written during render, and no event can end the edit before this runs.\n      ended.current = false;\n      const control = editorRef.current?.querySelector<HTMLElement>(\n        \"input:not([type=hidden]), textarea, select, [contenteditable='true'], [tabindex]:not([tabindex='-1']), button\",\n      );\n      control?.focus();\n      if (control instanceof HTMLInputElement || control instanceof HTMLTextAreaElement) control.select();\n      return;\n    }\n    // However it closed — a save, Escape, a lock taking it away — a blur check still\n    // queued from the editor has nothing left to save.\n    ended.current = true;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (lost) displayRef.current?.focus();\n  }, [editing]);\n\n  const setOpen = (next: boolean) => {\n    if (editingProp === undefined) setOpenState(next);\n    onEditingChange?.(next);\n  };\n\n  const fail = (caught: unknown) => {\n    ended.current = false;\n    const message = formatError ? formatError(caught) : labels.failed;\n    setFailure(hasContent(message) ? message : labels.failed);\n    alert.announce(typeof message === \"string\" && message !== \"\" ? message : labels.failed);\n    // Focus back into the editor if the failure left it nowhere (a pending field that\n    // the browser let go of); never pulled back from somewhere the user went.\n    const active = document.activeElement;\n    if (active === null || active === document.body) {\n      editorRef.current?.querySelector<HTMLElement>(\"input, textarea, select, [tabindex]\")?.focus();\n    }\n  };\n\n  const save = (next: T = draftRef.current) => {\n    if (!editing || ended.current || pending) return;\n    ended.current = true;\n    if (next !== draftRef.current) setDraft(next);\n    if (isEqual(next, value)) {\n      setOpen(false);\n      return;\n    }\n    let result: unknown;\n    try {\n      result = onCommit(next);\n    } catch (caught) {\n      fail(caught);\n      return;\n    }\n    const promise = asPromise(result);\n    if (!promise) {\n      setOpen(false);\n      return;\n    }\n    setPending(true);\n    setFailure(null);\n    promise.then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        setOpen(false);\n      },\n      (caught: unknown) => {\n        if (!mounted.current) return;\n        setPending(false);\n        fail(caught);\n      },\n    );\n  };\n\n  const cancel = () => {\n    // A request that has left cannot be called back; Escape waits for it.\n    if (!editing || pending) return;\n    ended.current = true;\n    setOpen(false);\n  };\n\n  const change = (next: T) => {\n    if (pending) return;\n    setDraft(next);\n    // Now, not after the render: a blur check scheduled before that render reads it.\n    draftRef.current = next;\n    // The failure described the draft that was sent; once edited it describes nothing\n    // on screen, and the next save (or blur) is a fresh attempt.\n    setFailure(null);\n  };\n\n  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.defaultPrevented) return;\n    if (e.key === \"Escape\") {\n      // Ours, not the dialog's or the popover's around the field.\n      e.preventDefault();\n      e.stopPropagation();\n      cancel();\n      return;\n    }\n    // Not mid-composition: Enter there picks the IME's candidate (Japanese, Chinese).\n    if (e.key === \"Enter\" && !e.nativeEvent.isComposing && !e.shiftKey) {\n      e.preventDefault();\n      save();\n    }\n  };\n\n  // Leaving the editor saves. Deferred one task, and cancelled by any focus that lands\n  // back inside: React reports focus moves through PORTALS to the component tree, so a\n  // calculator popover or a phone keypad the editor opened counts as inside, which a\n  // DOM `contains` check would get wrong. A failure on screen holds the editor: the\n  // user is looking at why, and moving away is not a retry.\n  const onBlur = (e: FocusEvent<HTMLDivElement>) => {\n    if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = setTimeout(() => {\n      blurTimer.current = null;\n      if (!mounted.current || failed) return;\n      save();\n    }, 0);\n  };\n  const onFocus = () => {\n    if (blurTimer.current) clearTimeout(blurTimer.current);\n    blurTimer.current = null;\n  };\n\n  const private_ = redact ? { \"data-private\": true } : undefined;\n  const shown = display ? display(value) : value === null || value === undefined ? \"\" : String(value);\n  const content = hasContent(shown) ? (\n    shown\n  ) : (\n    <span className=\"text-[var(--text-muted)]\">{placeholder ?? labels.empty}</span>\n  );\n  const alignClass = align === \"end\" ? \"text-end\" : \"text-start\";\n\n  let body: ReactNode;\n  if (readOnly) {\n    body = (\n      <span {...private_} className={cn(\"block min-w-0 truncate\", VALUE_WRAP_AT_LARGE, alignClass)}>\n        {content}\n      </span>\n    );\n  } else if (editing) {\n    const describedBy = failed ? errorId : undefined;\n    const editorProps: InlineEditorProps<T> = {\n      value: draft,\n      onChange: change,\n      commit: save,\n      cancel,\n      pending,\n      label,\n      invalid: failed,\n      describedBy,\n      inputProps: {\n        \"aria-label\": label,\n        \"aria-invalid\": failed || undefined,\n        \"aria-describedby\": describedBy,\n        readOnly: pending,\n      },\n    };\n    body = (\n      // A wrapper for the keys and the focus, not a control: the keys belong to the\n      // field inside it, which is what has focus.\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- see above\n      <div\n        ref={editorRef}\n        {...private_}\n        onKeyDown={onKeyDown}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        aria-busy={pending || undefined}\n        className=\"min-w-0\"\n      >\n        <div className=\"flex min-w-0 items-center gap-1.5\">\n          <div className=\"min-w-0 flex-1\">\n            {editor ? (\n              <RenderEditor render={editor} {...editorProps} />\n            ) : (\n              <Input\n                {...inputProps}\n                {...editorProps.inputProps}\n                value={String(draft ?? \"\")}\n                onChange={(e) => change(e.target.value as unknown as T)}\n                className={cn(\"px-2 py-1\", alignClass, inputProps?.className)}\n              />\n            )}\n          </div>\n          {/* Decorative: `aria-busy` on the wrapper says it. */}\n          {pending && <Spinner label={null} className=\"size-4 shrink-0\" />}\n        </div>\n        {failed && (\n          <p id={errorId} className=\"mt-1 text-caption leading-tight text-[var(--danger)]\">\n            {failure}\n          </p>\n        )}\n      </div>\n    );\n  } else if (locked) {\n    // Button's `disabledReason` path, spelled out for a button that must look like\n    // the value rather than like a Button: focusable, `aria-disabled`, every\n    // activation swallowed, the reason in the kit Tooltip and in a `hidden` copy that\n    // describes it. The button in a FRAGMENT so the Tooltip does not add the bubble as\n    // a second description of the same sentence.\n    body = (\n      <Tooltip label={disabledReason} className=\"flex w-full min-w-0\">\n        <>\n          <button\n            ref={displayRef}\n            type=\"button\"\n            {...private_}\n            aria-disabled\n            aria-describedby={reasonId}\n            onClick={(e) => e.preventDefault()}\n            className={cn(\n              \"block w-full min-w-0 cursor-not-allowed truncate rounded-sm focus:outline-none\",\n              VALUE_WRAP_AT_LARGE,\n              FOCUS_RING,\n              alignClass,\n            )}\n          >\n            {content}\n          </button>\n          <span id={reasonId} hidden>\n            {disabledReason}\n          </span>\n        </>\n      </Tooltip>\n    );\n  } else {\n    body = (\n      // Lazy: a table of these mounts no bubble until one is hovered or focused, and\n      // the closed bubble's text is in no ancestor's accessible name.\n      <Tooltip label={labels.edit(label)} lazy className=\"flex w-full min-w-0\">\n        <button\n          ref={displayRef}\n          type=\"button\"\n          {...private_}\n          onClick={() => setOpen(true)}\n          className={cn(\n            \"block w-full min-w-0 truncate rounded-sm underline-offset-2 hover:underline focus:outline-none\",\n            VALUE_WRAP_AT_LARGE,\n            FOCUS_RING,\n            alignClass,\n          )}\n        >\n          {content}\n        </button>\n      </Tooltip>\n    );\n  }\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-editing={editing || undefined}>\n      {body}\n      {/* Always mounted: a live region that mounts with its message is usually missed. */}\n      <span {...alert.regionProps} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}