@eifi1/ui-kit 0.51.4 → 0.51.6

package/dist/components/field-parts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, isValidElement, useContext, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { plainText } from \"../lib/plain-text\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { useInlineFacts } from \"../hooks/use-large-text\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { HelpPopover } from \"./help-popover\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/**\n * The pieces of a field's anatomy the kit's fields share — the static label, the hint\n * (caption or \"?\"), the caption and the error under a field, the label strip over a\n * bare group, the write lock on a control that saves itself, and the wiring under them\n * (`aria-describedby`, refs). Private to the package — not re-exported from the barrel,\n * except `FieldLabel` and `FLOATING_LABEL_STATIC`, which the barrel names (ui.tsx did until\n * 0.34 split it).\n *\n * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and\n * month pickers, whose trigger is a button in a wrapper of their own, and the groups\n * with no field box) sat beside this one with its own copies of `isTextHint` and the\n * caption class (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n *\n * Nothing here imports a field module: field-base, input, select and textarea import this, and so do the combobox family,\n * the pickers and the native choice controls — the lint's no-cycle rule holds it.\n */\n\n/* ── the wiring: descriptions and refs ─────────────────────────────────────── */\n\n/**\n * Ids to describe a control by, merged in reading order: whatever the caller already\n * pointed at (standing advice), then the caption or description, then the error (the\n * news). Merge, never replace — see {@link useFieldError}. An empty list is `undefined`,\n * never `\"\"`: a dangling attribute describes the control as nothing at all.\n *\n * Here since 0.34 (DUP-11, refactor audit 2026-10); `choice-parts.ts` held it, beside a\n * copy of the presence rule, for the native choice controls alone.\n */\nexport function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined {\n  const list = ids.filter(Boolean);\n  return list.length ? list.join(\" \") : undefined;\n}\n\n// The ref plumbing lives in ../lib/refs since round 0.35 (Tooltip needs it, and this module\n// renders a Tooltip); the fields keep importing it from here.\nexport { assignRef, mergeRefs } from \"../lib/refs\";\n\n/* ── the static label ─────────────────────────────────────────────────────── */\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nexport const STATIC_LABEL_TYPE =\n  \"text-caption leading-tight text-muted peer-disabled:opacity-50\";\n\n/**\n * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md\n * §10.17): a static label ABOVE the field — the phone card's \"label above value\" (§4) —\n * not a label squeezed into the field's top strip, where a long one ended in \"…\". It\n * stops being absolute, so it wraps like any text (`truncate-until-large` beside it); it\n * takes the pointer, since nothing of the field lies under it any more; and the field\n * no longer reserves the strip for it (`FIELD_FLOATING_PAD`). In the first row of a box\n * that is a grid at Large ({@link LABEL_ABOVE_BOX}), wherever it sits in the DOM — a\n * floating label FOLLOWS its input, for `peer-*`. `large:` classes, so it costs no\n * render and is right on the first paint; Normal keeps the floating label.\n *\n * The placement only: a label element adds `large:block` (a `<span>` or `<label>` in\n * flow), a label ROW keeps its `flex`.\n */\nexport const LABEL_ABOVE_AT_LARGE =\n  \"large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto\";\n\n/**\n * The box a field's label is positioned in — {@link FloatingField}'s `relative` wrapper,\n * a date or month picker's root — at Large, while it holds a label above\n * ({@link LABEL_ABOVE_AT_LARGE}): one column, the label's row over the field's. The\n * field's own absolute parts in the box (a chevron, a clear ×, a reveal toggle, a\n * calculator) are placed in the second row, so their `top-1/2` and `inset-y-*` still\n * measure the FIELD and not label and field together; the label's own elements carry\n * `data-field-label` and stay in the first. Only on a box with a visible label: without\n * one the second row would be empty.\n */\nexport const LABEL_ABOVE_BOX =\n  \"large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below. At Large,\n// a label above the field (LABEL_ABOVE_AT_LARGE).\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute start-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n);\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport interface FieldLabelProps extends ComponentPropsWithRef<\"span\"> {\n  children: ReactNode;\n}\n\nexport function FieldLabel({ children, className, ...rest }: FieldLabelProps) {\n  return (\n    // `data-field-label`: a label of the box it stands in, kept in the first row at Large\n    // (LABEL_ABOVE_BOX).\n    <span data-field-label=\"\" {...rest} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled `Select` / `Input` as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n *\n * For a FACT — a format, a limit, a consequence — which at Large and on a touch screen\n * becomes the field's caption ({@link useInlineHint}). Paragraph-long HELP the field is\n * usable without belongs in a `HelpPopover` instead (0.34, §10.23), which opens on a tap\n * and stays a \"?\" at every size.\n */\nexport interface FieldHintProps extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  /** The explanation. It is both the tooltip's text and, by default, the button's\n   *  accessible name, so a screen reader gets it without the bubble ever opening. */\n  label: string;\n  /** Default `\"start\"`: before the hint in the reading direction (the left in LTR, the\n   *  right in RTL). `left` / `right` stay physical. */\n  side?: TooltipSide;\n}\n\nexport function FieldHint({\n  label,\n  side = \"start\",\n  className,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: FieldHintProps) {\n  return (\n    // `tap=\"toggle\"` (0.25): the \"?\" exists only to explain, so a tap on a phone shows\n    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a\n    // tap) would otherwise make it show nothing at all.\n    <Tooltip label={label} side={side} portal tap=\"toggle\">\n      <button\n        {...rest}\n        // `type` after the spread, not before. These render inside forms — that is the\n        // only place a field has a label line — and a hint that defaulted to `submit`\n        // because a caller spread a props object at it would save the form on a click\n        // meant to explain a field.\n        type=\"button\"\n        // The explanation names the button unless the caller says otherwise; passing\n        // `aria-label` is how you shorten it for a screen reader without shortening\n        // what the bubble shows.\n        aria-label={ariaLabel ?? label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        // The kit's focus frame (0.32, §5): the \"?\" is a tab stop, and had no ring at all.\n        className={cn(\n          \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n          FOCUS_RING,\n          className,\n        )}\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/**\n * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md\n * §4 \"No fact only in a tooltip\"): at Large and Extra large, and on a touch screen, a\n * {@link FieldHint} becomes its own words — so the field shows them as its CAPTION under\n * the box, where they are read without hovering or tapping a 14 px \"?\". Anywhere else,\n * and for any other hint, the hint unchanged.\n *\n * A FieldHint only, on purpose (0.34, §10.23): a FieldHint is a FACT, and a fact stays\n * visible. Paragraph-long HELP — why, how, what the options mean; the field is usable\n * without it — goes in a `HelpPopover`, which this leaves on the label line at every\n * size: printed under the field it was the longest thing in the form (keksdose K3).\n *\n * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a\n * field that resolves its own `hint` (an app's, or one of the kit's own outside this\n * file) calls it first and then treats the result as it treated a text hint.\n *\n * `withHelp` (round 0.36): the field has a `help`, whose \"?\" is the field's only one\n * ({@link fieldHelpMark}) — so a FieldHint is its words at EVERY size, not only at Large\n * and on touch.\n */\nexport function useInlineHint(hint: ReactNode, withHelp = false): ReactNode {\n  const inline = useInlineFacts();\n  if ((inline || withHelp) && isValidElement(hint) && hint.type === FieldHint) {\n    const words = (hint.props as FieldHintProps).label;\n    if (words) return words;\n  }\n  return hint;\n}\n\n/* ── help (round 0.36, docs/text-size-harmonization.md §4, §10.23) ─────────── */\n\n/**\n * The doc every field's `help` prop points at.\n *\n * A field may carry two kinds of words (§10.23): a FACT — a format, a limit, a\n * consequence — which stays visible, and HELP — why the field exists, how to choose,\n * what the options mean — which the field is usable without and which may sit behind a\n * \"?\". Until 0.36 a field had one slot, `hint`, so a field with both had to drop one or\n * print a paragraph (Kurvenschmiede's \"How it was measured\", round 0.36 H). Now:\n *\n * - `hint` is the fact, the caption under the field, on its `aria-describedby`;\n * - `help` is the help, a {@link HelpPopover} \"?\" on the label line (an unlabelled\n *   field's at its end edge, as a hint's), named \"About “<label>”\" (`common.aboutField`,\n *   from the label's text, else the `aria-label`, else `common.help`). Pass a\n *   `HelpPopover` as `help` to name it yourself (\"What do the statuses mean?\").\n *\n * The help's \"?\" is then the field's ONLY \"?\": a `FieldHint` passed as `hint` beside it\n * draws none of its own and shows its words as the caption at every size, as it does at\n * Large and on touch; any other `hint` is the caption too. Two \"?\" side by side would\n * look the same and open different things.\n */\nexport interface FieldHelpProps {\n  /**\n   * Help the field is usable without — why it exists, how to choose, what the options\n   * mean — behind the field's one \"?\" on its label line: a {@link HelpPopover} named\n   * \"About “<label>”\" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).\n   * Pass a `HelpPopover` to name it yourself. `hint` stays the visible fact: with `help`\n   * set it is the caption under the field at every size, a `FieldHint` included.\n   */\n  help?: ReactNode;\n}\n\n/**\n * The \"?\" for a field's `help` — the field's own name, \"About “<label>”\", in the reader's\n * language. A component so that a field without `help` asks the labels nothing.\n */\nfunction FieldHelp({ name, children }: { name: ReactNode; children: ReactNode }) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = plainText(name);\n  return <HelpPopover label={text === undefined ? common.help : common.aboutField(text)}>{children}</HelpPopover>;\n}\n\n/**\n * A field's `help` as the \"?\" for its label line, or `undefined` when there is none. A\n * {@link HelpPopover} is used as it is (it carries its own name); anything else is put\n * in one named \"About “<name>”\" — `name` is the field's label, else its `aria-label`.\n */\nexport function fieldHelpMark(help: ReactNode, name: ReactNode): ReactNode | undefined {\n  if (!hasContent(help)) return undefined;\n  if (isValidElement(help) && help.type === HelpPopover) return help;\n  return <FieldHelp name={name}>{help}</FieldHelp>;\n}\n\n/** What {@link useFieldHint} needs to draw a field's `help`. */\nexport interface FieldHelpSource {\n  /** The field's `help`. */\n  help?: ReactNode;\n  /** What names its \"?\": the field's label, else its `aria-label`. */\n  name?: ReactNode;\n}\n\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-caption leading-tight text-muted\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself — a text hint, or any hint beside a `help` — or `undefined`. */\n  captionText: ReactNode | undefined;\n  /** What rides the label line — the `help`'s \"?\" ({@link fieldHelpMark}), else a\n   *  non-text hint (a FieldHint) — or, on a field with no label line, the end edge\n   *  outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Whether a resolved `hint` goes under the field as its caption: text always (see\n * {@link isTextHint}); with a `help` beside it, whatever it is — the label line's \"?\"\n * is the help's (round 0.36, §4).\n */\nexport function isHintCaption(hint: ReactNode, withHelp: boolean): boolean {\n  return isTextHint(hint) || (withHelp && hasContent(hint));\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}. With a `help` ({@link\n * FieldHelpProps}), the help's \"?\" takes the label line and the hint is the caption.\n */\nexport function useFieldHint(\n  hintProp: ReactNode,\n  describedBy: string | undefined,\n  { help, name }: FieldHelpSource = {},\n): FieldHintParts {\n  const helpMark = fieldHelpMark(help, name);\n  const withHelp = helpMark !== undefined;\n  const hint = useInlineHint(hintProp, withHelp);\n  const captionId = useId();\n  const caption = isHintCaption(hint, withHelp);\n  return {\n    describedBy: caption ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: caption ? captionId : undefined,\n    captionText: caption ? hint : undefined,\n    labelHint: helpMark ?? (!caption && hasContent(hint) ? hint : undefined),\n  };\n}\n\n/** The error line under a field — one type for every field's message (DUP-8, refactor\n *  audit 2026-10: ChipInput and FileDropzone printed theirs in `text-xs`). */\nexport const FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-danger\";\n\n/**\n * The message under a field that is wrong, and the wiring that attaches it.\n *\n * `invalid` paints the field (`FIELD_INVALID`) and sets `aria-invalid`, and there it\n * stopped: a field that announces \"invalid\" and nothing else has told a screen-reader\n * user only that they are stuck. The message was always on screen — a sibling `<p>`\n * beside the field — and never in the accessibility tree, because attaching it needs an\n * id on the message and an `aria-describedby` on the control, and no caller was going to\n * mint one by hand for every field on a form.\n *\n * Two rules the wiring has to keep:\n *\n *  - **Merge, never replace.** A field may already point at a hint (\"at least twelve\n *    characters\"). Overwriting that reference to say the field is wrong trades one half\n *    of the answer for the other — and it keeps the half the user has already read. The\n *    hint stays first: it is the standing advice, the error is the news.\n *  - **`invalid` keeps working alone**, for the forms whose message lives somewhere else\n *    entirely (a summary at the top of a dialog). There is nothing to point at then, and\n *    a dangling id describes the field as nothing at all.\n *\n * Deliberately NOT `role=\"alert\"`. `aria-describedby` is read when focus reaches the\n * control, which is where a field's own error is wanted; an alert would also interrupt\n * whatever is being read at the time, on every keystroke of a form that re-validates as\n * you type.\n *\n * Every field's since 0.34 (DUP-8, refactor audit 2026-10): it was ui.tsx's own, so the\n * combobox family restated it as `useComboboxFieldError` — without the fourth argument,\n * so Autocomplete announced a form library's `aria-invalid` and did not paint it — and\n * ten fields restated it inline.\n */\nexport function useFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy: string | undefined,\n  /** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`\n   *  `RhfField`), not our `invalid` prop — and a field that announces invalid should\n   *  look it too. */\n  ariaInvalid?: unknown,\n): { isInvalid: boolean; describedBy: string | undefined; errorEl: ReactNode } {\n  const errorId = useId();\n  const hasError = hasContent(error);\n  return {\n    /** A field carrying a message that says what is wrong with it IS wrong. */\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy: mergeDescribedBy(describedBy, hasError && errorId),\n    errorEl: hasError ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row. At Large the ROW stands above the field, so the label inside it drops the\n * margin a label above takes alone (`large:mb-0`), and stays level with its \"?\".\n */\nexport const LABEL_IN_ROW = \"static min-w-0 large:mb-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasContent(reason), reasonId };\n}\n\n/**\n * A locked control and its reason — the kit's ONE frame for it, used by Button,\n * IconButton, Chip, Checkbox, Switch and every field that locks (DUP-3, refactor audit\n * 2026-10: Button's `ReasonFrame` and Chip's `ChipReasonFrame` were copies of it, and\n * only those two drew the line, so a field locked through `commit` kept its reason in a\n * tooltip on a phone while the Save beside it said it in words). Where it shows is\n * {@link DisabledReasonDisplay}'s: by default a LINE under the control at Large and on a\n * touch screen ({@link DisabledReasonLine}), the kit {@link Tooltip} otherwise.\n *\n * A component of its own so only a LOCKED control asks the text size and the pointer;\n * the hundreds of unlocked controls on a page subscribe to nothing.\n *\n * Tooltip form: the control in a FRAGMENT with a `hidden` copy of the reason for its\n * `aria-describedby`, so the Tooltip does not also clone its bubble's id into the\n * description — the same sentence twice would be read on every focus. Line form: the\n * line IS the description (it carries `reasonId`), and no bubble repeats what is on\n * screen.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  display,\n  line: lineProp,\n  side,\n  portal,\n  className,\n  lineClassName,\n  children,\n}: {\n  /** The reason, and the id the control's `aria-describedby` names. */\n  lock: Pick<LockReason, \"reason\" | \"reasonId\">;\n  /** Where the reason shows — the control's `disabledReasonDisplay`. Default `\"auto\"`. */\n  display?: DisabledReasonDisplay;\n  /** The answer of a caller that asked {@link useDisabledReasonLine} for its own layout\n   *  already (Checkbox, Switch); wins over `display`. */\n  line?: boolean;\n  /** The bubble's side and portal — IconButton's `tooltipSide` / `tooltipPortal`. */\n  side?: TooltipSide;\n  portal?: boolean;\n  className?: string;\n  /** Classes for the line itself — a list row's padding, so the words line up with the\n   *  row's. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  const asked = useDisabledReasonLine(display);\n  if (lineProp ?? asked) {\n    return (\n      <DisabledReasonLine id={lock.reasonId} reason={lock.reason} className={className} lineClassName={lineClassName}>\n        {children}\n      </DisabledReasonLine>\n    );\n  }\n  return (\n    <Tooltip label={lock.reason} side={side} portal={portal} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── no fact only in a tooltip (0.32, docs/text-size-harmonization.md §4, §10.8) ── */\n\n/**\n * Where a control's `disabledReason` is shown (§4 \"No fact only in a tooltip\"):\n *\n * - `\"auto\"` (default): as a LINE under the control at Large and Extra large and on a\n *   touch screen (`useInlineFacts`) — the reader asked for bigger type, or cannot hover\n *   — and in the kit {@link Tooltip} otherwise, where a pointer can hover it open and\n *   the form keeps its rhythm. Inside {@link CompactControls} (a top bar, a dense row's\n *   inline actions) it stays the tooltip at every size: there is no room for a line.\n * - `\"line\"`: always the line — a form whose locked submit should say why at once.\n * - `\"tooltip\"`: always the tooltip — a place the caller knows has no room, and where\n *   the reason is also said elsewhere on the screen (a banner over the form).\n *\n * Either way the reason is the control's `aria-describedby`, so a screen reader hears\n * it on focus; the line IS that description (one copy), the tooltip keeps its hidden\n * copy as before.\n */\nexport type DisabledReasonDisplay = \"auto\" | \"line\" | \"tooltip\";\n\n/**\n * Marks a region where the controls must stay compact at every text size (§4, §10.8):\n * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a\n * `disabledReason` stays in the tooltip rather than a line. AppShell puts its top bar\n * in one (\"the top bar keeps its essential icons\"); `RowActions` its inline icons.\n *\n * For a toolbar that has no room, not for a whole page: the contract asks that the icon\n * alone be rare. A dense row's actions belong in `RowActions`, which collapses them\n * into a \"⋯\" menu at Large instead.\n */\nexport const CompactControlsContext = createContext(false);\n\nexport function CompactControls({ children, compact = true }: { children: ReactNode; compact?: boolean }) {\n  return <CompactControlsContext.Provider value={compact}>{children}</CompactControlsContext.Provider>;\n}\n\n/** Whether a control's `disabledReason` is drawn as a line here — see\n *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,\n *  ToggleGroup) and an app's control that has a reason to give. */\nexport function useDisabledReasonLine(display: DisabledReasonDisplay = \"auto\"): boolean {\n  const compact = useContext(CompactControlsContext);\n  const inline = useInlineFacts();\n  if (display === \"line\") return true;\n  if (display === \"tooltip\") return false;\n  return inline && !compact;\n}\n\n/** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked\n *  control's \"why\" reads like a field's standing advice. Capped, so a long reason under\n *  a small control wraps rather than widening its row without end. */\nexport const DISABLED_REASON_LINE_CLASS =\n  \"mt-1 block max-w-[20rem] text-caption leading-tight text-muted\";\n\n/**\n * A control and its `disabledReason` as a line under it — the `\"line\"` form of\n * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the\n * control's own layout, e.g. `self-stretch`); `items-start` keeps the control its own\n * width, and a column parent still stretches the wrapper (FormActions' phone stack).\n * The line carries `id`, which the control's `aria-describedby` names.\n */\nexport function DisabledReasonLine({\n  id,\n  reason,\n  className,\n  lineClassName,\n  children,\n}: {\n  id: string;\n  reason: ReactNode;\n  className?: string;\n  /** Classes for the line itself (0.34) — a list row's padding, so its words start\n   *  where the row's do. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span data-slot=\"disabled-reason\" className={cn(\"inline-flex max-w-full flex-col items-start\", className)}>\n      {children}\n      <span id={id} className={cn(DISABLED_REASON_LINE_CLASS, lineClassName)}>\n        {reason}\n      </span>\n    </span>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n\n/* ── fields not built on FloatingField: pickers and bare groups ──────────── */\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then a lock's reason, then the error —\n   *  the standing advice before the news, as {@link useFieldError} orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** What rides the LABEL line — the `help`'s \"?\", else a `FieldHint` — or `undefined`\n   *  when the hint is a caption and there is no help. */\n  labelHint: ReactNode;\n}\n\n/**\n * `hint` / `help` / `error` / `invalid` resolved the way `Select` resolves them —\n * {@link useFieldHint} and {@link useFieldError} together, for a field that draws what\n * goes under it in one place (a picker, a group, a field built on another).\n */\nexport function useFieldMessages({\n  hint,\n  help,\n  name,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n  reasonId,\n}: FieldHelpSource & {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n  /** A lock's reason (`useLockReason`'s `reasonId`, while locked): described after the\n   *  caption and before the error, as on Select. */\n  reasonId?: string | false;\n}): FieldMessages {\n  const hintParts = useFieldHint(hint, describedBy, { help, name });\n  const field = useFieldError(error, invalid, mergeDescribedBy(hintParts.describedBy, reasonId), ariaInvalid);\n  return {\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    below:\n      hintParts.captionText !== undefined || field.errorEl !== null ? (\n        <>\n          <FieldCaption parts={hintParts} />\n          {field.errorEl}\n        </>\n      ) : null,\n    labelHint: hintParts.labelHint,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in field-base.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({\n  below,\n  reserve,\n  children,\n}: {\n  below: ReactNode;\n  reserve: boolean;\n  children: ReactNode;\n}) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise. Above the field at Large.\n    <div\n      data-field-label=\"\"\n      className={cn(\"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n    >\n      <FieldLabel className={cn(LABEL_IN_ROW, \"max-w-full\")}>{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is: 20px at Normal, for every group the kit\n * draws one over — ToggleGroup's `labelPlacement=\"strip\"`, SwatchPicker, IconPicker\n * and {@link FieldStrip} (whose `pad` named two heights until 0.34).\n *\n * The label ROW, not the label, is what has to fit (keksdose dev#593, kk K4, measured in\n * headless Chromium): it sits `top-1` (4px) and is as tall as the taller of the label\n * (11px `text-caption` in a `leading-tight` line, 13.75px) and its \"?\" (a 14px icon,\n * `size-3.5`) — so it ends 18px down. The strip has to be at least that:\n *\n *     label row: 4 + max(13.75, 14) = 18   ≤   strip: 20   (2px clear of the content)\n *\n * Until 0.34 a 16px strip (`\"field\"`) stood over the segmented group so that 16 + its\n * 26px box made a labelled Input's 42px (keksdose's `ClearedStatusPicker`, live #288 /\n * #431). The label and its \"?\" then crossed the group's top border by 2px — *\"the\n * question mark even interferes with it\"* (at 125 %: label row 424–438, border at 436).\n * The 4px come out of the group's segments instead (`STRIP_SEGMENT` in\n * toggle-group.tsx): 20 + 22 = 42. A tile, a map, a row of buttons — content with no\n * inset — needed the 20px already (keksdose's `FlagPicker` and location field, `pt-5`).\n *\n * Every term is rem, so the sum holds at any browser font size. At Large and Extra large\n * there is no strip: the label row stands above the content, in flow\n * ({@link LABEL_ABOVE_AT_LARGE}), and the padding goes (`large:pt-0` in\n * {@link LabelStrip}), so nothing lies under the label to cross.\n */\nexport const LABEL_STRIP_PAD = \"pt-5\";\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n *\n * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the\n * `role=\"group\"` its label names. The kit's own groups pass none, so their wrapper is\n * the bare box it was in 0.22.\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  /** What rides the label line beside the label — a resolved `labelHint`\n   *  ({@link useFieldMessages}), never a raw `hint`: a FieldHint is the caption at Large\n   *  and on touch, and the caller draws that under its group. */\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    // At Large the row is a label above the group, in flow (0.33, §10.17), and the\n    // strip's padding goes: nothing lies under it any more.\n    <div {...rest} className={cn(\"relative min-w-0\", LABEL_STRIP_PAD, \"large:pt-0\", className)}>\n      <div\n        data-field-label=\"\"\n        className={cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n      >\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(LABEL_IN_ROW, \"max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AAkHI,SAyV6B,UAzV7B,KAgUA,YAhUA;AAlHJ,SAAS,eAAe,gBAAgB,YAAY,aAAa;AAEjE,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,uBAAuB,oBAAoB;AACpD,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,eAAiC;AAC1C,SAAS,uBAAyC;AA8B3C,SAAS,oBAAoB,KAAmE;AACrG,QAAM,OAAO,IAAI,OAAO,OAAO;AAC/B,SAAO,KAAK,SAAS,KAAK,KAAK,GAAG,IAAI;AACxC;AAIA,SAAS,WAAW,iBAAiB;AAS9B,MAAM,oBACX;AAgBK,MAAM,uBACX;AAYK,MAAM,kBACX;AAKK,MAAM,wBAAwB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAWO,SAAS,WAAW,EAAE,UAAU,WAAW,GAAG,KAAK,GAAoB;AAC5E;AAAA;AAAA;AAAA,IAGE,oBAAC,UAAK,oBAAiB,IAAI,GAAG,MAAM,WAAW,GAAG,uBAAuB,QAAQ,SAAS,GACvF,UACH;AAAA;AAEJ;AAkCO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAmB;AACjB;AAAA;AAAA;AAAA;AAAA,IAIE,oBAAC,WAAQ,OAAc,MAAY,QAAM,MAAC,KAAI,UAC5C;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QAKJ,MAAK;AAAA,QAIL,cAAY,aAAa;AAAA,QAIzB,SAAS,CAAC,MAAM,EAAE,eAAe;AAAA,QAEjC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEA,8BAAC,cAAW,WAAU,YAAW;AAAA;AAAA,IACnC,GACF;AAAA;AAEJ;AAsBO,SAAS,cAAc,MAAiB,WAAW,OAAkB;AAC1E,QAAM,SAAS,eAAe;AAC9B,OAAK,UAAU,aAAa,eAAe,IAAI,KAAK,KAAK,SAAS,WAAW;AAC3E,UAAM,QAAS,KAAK,MAAyB;AAC7C,QAAI,MAAO,QAAO;AAAA,EACpB;AACA,SAAO;AACT;AAuCA,SAAS,UAAU,EAAE,MAAM,SAAS,GAA6C;AAC/E,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,OAAO,UAAU,IAAI;AAC3B,SAAO,oBAAC,eAAY,OAAO,SAAS,SAAY,OAAO,OAAO,OAAO,WAAW,IAAI,GAAI,UAAS;AACnG;AAOO,SAAS,cAAc,MAAiB,MAAwC;AACrF,MAAI,CAAC,WAAW,IAAI,EAAG,QAAO;AAC9B,MAAI,eAAe,IAAI,KAAK,KAAK,SAAS,YAAa,QAAO;AAC9D,SAAO,oBAAC,aAAU,MAAa,gBAAK;AACtC;AAoBO,SAAS,WAAW,MAA0C;AACnE,SAAQ,OAAO,SAAS,YAAY,SAAS,MAAO,OAAO,SAAS;AACtE;AAIO,MAAM,sBAAsB;AAqB5B,SAAS,cAAc,MAAiB,UAA4B;AACzE,SAAO,WAAW,IAAI,KAAM,YAAY,WAAW,IAAI;AACzD;AAOO,SAAS,aACd,UACA,aACA,EAAE,MAAM,KAAK,IAAqB,CAAC,GACnB;AAChB,QAAM,WAAW,cAAc,MAAM,IAAI;AACzC,QAAM,WAAW,aAAa;AAC9B,QAAM,OAAO,cAAc,UAAU,QAAQ;AAC7C,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,cAAc,MAAM,QAAQ;AAC5C,SAAO;AAAA,IACL,aAAa,UAAU,iBAAiB,aAAa,SAAS,IAAI;AAAA,IAClE,WAAW,UAAU,YAAY;AAAA,IACjC,aAAa,UAAU,OAAO;AAAA,IAC9B,WAAW,aAAa,CAAC,WAAW,WAAW,IAAI,IAAI,OAAO;AAAA,EAChE;AACF;AAIO,MAAM,oBAAoB;AAgC1B,SAAS,cACd,OACA,SACA,aAIA,aAC6E;AAC7E,QAAM,UAAU,MAAM;AACtB,QAAM,WAAW,WAAW,KAAK;AACjC,SAAO;AAAA;AAAA,IAEL,WAAW,QAAQ,OAAO,KAAK,YAAY,gBAAgB,QAAQ,gBAAgB;AAAA,IACnF,aAAa,iBAAiB,aAAa,YAAY,OAAO;AAAA,IAC9D,SAAS,WACP,oBAAC,OAAE,IAAI,SAAS,WAAW,mBACxB,iBACH,IACE;AAAA,EACN;AACF;AAGO,SAAS,aAAa,EAAE,OAAO,UAAU,GAAkD;AAChG,MAAI,MAAM,gBAAgB,OAAW,QAAO;AAC5C,SACE,oBAAC,OAAE,IAAI,MAAM,WAAW,WAAW,GAAG,qBAAqB,SAAS,GACjE,gBAAM,aACT;AAEJ;AASO,MAAM,eAAe;AAWrB,SAAS,eAAe,EAAE,MAAM,SAAS,GAA6C;AAC3F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,oBAAiB;AAAA,MACjB,WAAW,GAAG,iFAAiF,oBAAoB;AAAA,MAElH;AAAA;AAAA,QACD,oBAAC,UAAK,WAAU,kDAAkD,gBAAK;AAAA;AAAA;AAAA,EACzE;AAEJ;AAQO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,SAAS,OAAW,QAAO,gCAAG,UAAS;AAC3C,SACE,qBAAC,SAAI,WAAW,GAAG,6BAA6B,SAAS,GACvD;AAAA,wBAAC,SAAI,WAAU,kBAAkB,UAAS;AAAA,IAC1C,oBAAC,UAAK,WAAU,8BAA8B,gBAAK;AAAA,KACrD;AAEJ;AAmBO,SAAS,cAAc,QAAiC,gBAAuC;AACpG,QAAM,SAAS,gBAAgB,QAAQ,cAAc;AACrD,QAAM,WAAW,MAAM;AACvB,SAAO,EAAE,QAAQ,QAAQ,WAAW,MAAM,GAAG,SAAS;AACxD;AAuBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAgBG;AACD,QAAM,QAAQ,sBAAsB,OAAO;AAC3C,MAAI,YAAY,OAAO;AACrB,WACE,oBAAC,sBAAmB,IAAI,KAAK,UAAU,QAAQ,KAAK,QAAQ,WAAsB,eAC/E,UACH;AAAA,EAEJ;AACA,SACE,oBAAC,WAAQ,OAAO,KAAK,QAAQ,MAAY,QAAgB,WACvD,2CACG;AAAA;AAAA,IACD,oBAAC,UAAK,IAAI,KAAK,UAAU,QAAM,MAC5B,eAAK,QACR;AAAA,KACF,GACF;AAEJ;AAgCO,MAAM,yBAAyB,cAAc,KAAK;AAElD,SAAS,gBAAgB,EAAE,UAAU,UAAU,KAAK,GAA+C;AACxG,SAAO,oBAAC,uBAAuB,UAAvB,EAAgC,OAAO,SAAU,UAAS;AACpE;AAKO,SAAS,sBAAsB,UAAiC,QAAiB;AACtF,QAAM,UAAU,WAAW,sBAAsB;AACjD,QAAM,SAAS,eAAe;AAC9B,MAAI,YAAY,OAAQ,QAAO;AAC/B,MAAI,YAAY,UAAW,QAAO;AAClC,SAAO,UAAU,CAAC;AACpB;AAKO,MAAM,6BACX;AASK,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,SACE,qBAAC,UAAK,aAAU,mBAAkB,WAAW,GAAG,+CAA+C,SAAS,GACrG;AAAA;AAAA,IACD,oBAAC,UAAK,IAAQ,WAAW,GAAG,4BAA4B,aAAa,GAClE,kBACH;AAAA,KACF;AAEJ;AAUO,MAAM,uBAAuB,cAAc,KAAK;AAsBhD,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASkB;AAChB,QAAM,YAAY,aAAa,MAAM,aAAa,EAAE,MAAM,KAAK,CAAC;AAChE,QAAM,QAAQ,cAAc,OAAO,SAAS,iBAAiB,UAAU,aAAa,QAAQ,GAAG,WAAW;AAC1G,SAAO;AAAA,IACL,WAAW,MAAM;AAAA,IACjB,aAAa,MAAM;AAAA,IACnB,OACE,UAAU,gBAAgB,UAAa,MAAM,YAAY,OACvD,iCACE;AAAA,0BAAC,gBAAa,OAAO,WAAW;AAAA,MAC/B,MAAM;AAAA,OACT,IACE;AAAA,IACN,WAAW,UAAU;AAAA,EACvB;AACF;AASO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,MAAI,UAAU,QAAQ,CAAC,QAAS,QAAO,gCAAG,UAAS;AACnD,SACE,qBAAC,SACE;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAUO,SAAS,eAAe,EAAE,OAAO,KAAK,GAA2C;AACtF,MAAI,CAAC,WAAW,IAAI,EAAG,QAAO,oBAAC,cAAY,iBAAM;AACjD;AAAA;AAAA;AAAA,IAGE;AAAA,MAAC;AAAA;AAAA,QACC,oBAAiB;AAAA,QACjB,WAAW,GAAG,iFAAiF,oBAAoB;AAAA,QAEnH;AAAA,8BAAC,cAAW,WAAW,GAAG,cAAc,YAAY,GAAI,iBAAM;AAAA,UAC9D,oBAAC,UAAK,WAAU,kDAAkD,gBAAK;AAAA;AAAA;AAAA,IACzE;AAAA;AAEJ;AA2BO,MAAM,kBAAkB;AAgBxB,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAUG;AACD;AAAA;AAAA;AAAA,IAGE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,oBAAoB,iBAAiB,cAAc,SAAS,GACvF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,oBAAiB;AAAA,UACjB,WAAW,GAAG,wEAAwE,oBAAoB;AAAA,UAK1G;AAAA,gCAAC,cAAW,IAAI,SAAS,WAAW,GAAG,cAAc,cAAc,YAAY,YAAY,GACxF,iBACH;AAAA,YACC,WAAW,IAAI,KAAK,oBAAC,UAAK,WAAU,kDAAkD,gBAAK;AAAA;AAAA;AAAA,MAC9F;AAAA,MACC;AAAA,OACH;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/field-parts.tsx"],"sourcesContent":["import { createContext, isValidElement, useContext, useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { plainText } from \"../lib/plain-text\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { useInlineFacts } from \"../hooks/use-large-text\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { HelpPopover } from \"./help-popover\";\nimport { Tooltip, type TooltipSide } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\n\n/**\n * The pieces of a field's anatomy the kit's fields share — the static label, the hint\n * (caption or \"?\"), the caption and the error under a field, the label strip over a\n * bare group, the write lock on a control that saves itself, and the wiring under them\n * (`aria-describedby`, refs). Private to the package — not re-exported from the barrel,\n * except `FieldLabel` and `FLOATING_LABEL_STATIC`, which the barrel names (ui.tsx did until\n * 0.34 split it).\n *\n * One file since 0.23: until then the pickers' half (`field-anatomy.tsx`: the date and\n * month pickers, whose trigger is a button in a wrapper of their own, and the groups\n * with no field box) sat beside this one with its own copies of `isTextHint` and the\n * caption class (keksdose K4: \"uniform field anatomy … today it is a patchwork\").\n *\n * Nothing here imports a field module: field-base, input, select and textarea import this, and so do the combobox family,\n * the pickers and the native choice controls — the lint's no-cycle rule holds it.\n */\n\n/* ── the wiring: descriptions and refs ─────────────────────────────────────── */\n\n/**\n * Ids to describe a control by, merged in reading order: whatever the caller already\n * pointed at (standing advice), then the caption or description, then the error (the\n * news). Merge, never replace — see {@link useFieldError}. An empty list is `undefined`,\n * never `\"\"`: a dangling attribute describes the control as nothing at all.\n *\n * Here since 0.34 (DUP-11, refactor audit 2026-10); `choice-parts.ts` held it, beside a\n * copy of the presence rule, for the native choice controls alone.\n */\nexport function mergeDescribedBy(...ids: Array<string | false | null | undefined>): string | undefined {\n  const list = ids.filter(Boolean);\n  return list.length ? list.join(\" \") : undefined;\n}\n\n// The ref plumbing lives in ../lib/refs since round 0.35 (Tooltip needs it, and this module\n// renders a Tooltip); the fields keep importing it from here.\nexport { assignRef, mergeRefs } from \"../lib/refs\";\n\n/* ── the static label ─────────────────────────────────────────────────────── */\n\n// The TYPE of the small static label, without any placement. Split out so the\n// label and anything sharing its line (see `hint` on {@link FloatingField}) are\n// laid out by one flex row instead of by two absolute offsets guessing at the\n// same baseline — which is what put dev#468's \"?\" three pixels above the word it\n// belongs to.\nexport const STATIC_LABEL_TYPE = \"text-caption leading-tight text-muted peer-disabled:opacity-50\";\n\n/**\n * A field's label at Large and Extra large (0.33, docs/text-size-harmonization.md\n * §10.17): a static label ABOVE the field — the phone card's \"label above value\" (§4) —\n * not a label squeezed into the field's top strip, where a long one ended in \"…\". It\n * stops being absolute, so it wraps like any text (`truncate-until-large` beside it); it\n * takes the pointer, since nothing of the field lies under it any more; and the field\n * no longer reserves the strip for it (`FIELD_FLOATING_PAD`). In the first row of a box\n * that is a grid at Large ({@link LABEL_ABOVE_BOX}), wherever it sits in the DOM — a\n * floating label FOLLOWS its input, for `peer-*`. `large:` classes, so it costs no\n * render and is right on the first paint; Normal keeps the floating label.\n *\n * The placement only: a label element adds `large:block` (a `<span>` or `<label>` in\n * flow), a label ROW keeps its `flex`.\n */\nexport const LABEL_ABOVE_AT_LARGE =\n  \"large:static large:row-start-1 large:mb-1 large:max-w-none large:pointer-events-auto\";\n\n/**\n * The box a field's label is positioned in — {@link FloatingField}'s `relative` wrapper,\n * a date or month picker's root — at Large, while it holds a label above\n * ({@link LABEL_ABOVE_AT_LARGE}): one column, the label's row over the field's. The\n * field's own absolute parts in the box (a chevron, a clear ×, a reveal toggle, a\n * calculator) are placed in the second row, so their `top-1/2` and `inset-y-*` still\n * measure the FIELD and not label and field together; the label's own elements carry\n * `data-field-label` and stay in the first. Only on a box with a visible label: without\n * one the second row would be empty.\n */\nexport const LABEL_ABOVE_BOX =\n  \"large:grid large:grid-cols-[minmax(0,1fr)] large:[&>.absolute:not([data-field-label])]:row-start-2\";\n\n// A field that always has a value (select / dropdown trigger) keeps the label\n// permanently in the floated position — small, in the top strip, value below. At Large,\n// a label above the field (LABEL_ABOVE_AT_LARGE).\nexport const FLOATING_LABEL_STATIC = cn(\n  \"pointer-events-none absolute start-3 top-1\",\n  STATIC_LABEL_TYPE,\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n);\n\n/**\n * The floating label for a custom-dropdown trigger (a `<span>`, since the trigger is a\n * button not a labelable input). Same placement as {@link FloatingField}'s static label,\n * so every labelled field lines up. Render inside a `relative` wrapper, before the trigger.\n */\nexport interface FieldLabelProps extends ComponentPropsWithRef<\"span\"> {\n  children: ReactNode;\n}\n\nexport function FieldLabel({ children, className, ...rest }: FieldLabelProps) {\n  return (\n    // `data-field-label`: a label of the box it stands in, kept in the first row at Large\n    // (LABEL_ABOVE_BOX).\n    <span data-field-label=\"\" {...rest} className={cn(FLOATING_LABEL_STATIC, \"z-10\", className)}>\n      {children}\n    </span>\n  );\n}\n\n/* ── hint ─────────────────────────────────────────────────────────────────── */\n\n/**\n * The \"?\" that explains a field, on the field's own label line (dev#468).\n *\n * Pass it to a labelled `Select` / `Input` as `hint`. It exists as a\n * component rather than as a snippet each form repeats because the previous\n * version was exactly that snippet — an absolutely-positioned button whose\n * `top-1.5` was one guess at where an 11px label sits — and the reporter's\n * follow-up was *\"question mark is not centered. Is it part of the hoc?\n * positioning problems seem quite frequently.\"* It was not part of the HOC. Now\n * it is, and there is one place left where the answer can be wrong.\n *\n * A `<button>` rather than a bare icon: hover alone puts the explanation out of\n * reach of a keyboard and of every touch device, and the tooltip shows on focus\n * too. The text is also its accessible name, so a screen reader gets it without\n * the bubble ever opening.\n *\n * For a FACT — a format, a limit, a consequence — which at Large and on a touch screen\n * becomes the field's caption ({@link useInlineHint}). Paragraph-long HELP the field is\n * usable without belongs in a `HelpPopover` instead (0.34, §10.23), which opens on a tap\n * and stays a \"?\" at every size.\n */\nexport interface FieldHintProps extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n  /** The explanation. It is both the tooltip's text and, by default, the button's\n   *  accessible name, so a screen reader gets it without the bubble ever opening. */\n  label: string;\n  /** Default `\"start\"`: before the hint in the reading direction (the left in LTR, the\n   *  right in RTL). `left` / `right` stay physical. */\n  side?: TooltipSide;\n}\n\nexport function FieldHint({ label, side = \"start\", className, \"aria-label\": ariaLabel, ...rest }: FieldHintProps) {\n  return (\n    // `tap=\"toggle\"` (0.25): the \"?\" exists only to explain, so a tap on a phone shows\n    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a\n    // tap) would otherwise make it show nothing at all.\n    <Tooltip label={label} side={side} portal tap=\"toggle\">\n      <button\n        {...rest}\n        // `type` after the spread, not before. These render inside forms — that is the\n        // only place a field has a label line — and a hint that defaulted to `submit`\n        // because a caller spread a props object at it would save the form on a click\n        // meant to explain a field.\n        type=\"button\"\n        // The explanation names the button unless the caller says otherwise; passing\n        // `aria-label` is how you shorten it for a screen reader without shortening\n        // what the bubble shows.\n        aria-label={ariaLabel ?? label}\n        // Nothing to activate: the tooltip opens on hover and on focus, and a\n        // click that did something as well would be a second, undiscoverable\n        // behaviour on the same target.\n        onClick={(e) => e.preventDefault()}\n        // The kit's focus frame (0.32, §5): the \"?\" is a tab stop, and had no ring at all.\n        className={cn(\n          \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n          FOCUS_RING,\n          className,\n        )}\n      >\n        <HelpCircle className=\"size-3.5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/**\n * A field's `hint` as the field should draw it here (0.32, docs/text-size-harmonization.md\n * §4 \"No fact only in a tooltip\"): at Large and Extra large, and on a touch screen, a\n * {@link FieldHint} becomes its own words — so the field shows them as its CAPTION under\n * the box, where they are read without hovering or tapping a 14 px \"?\". Anywhere else,\n * and for any other hint, the hint unchanged.\n *\n * A FieldHint only, on purpose (0.34, §10.23): a FieldHint is a FACT, and a fact stays\n * visible. Paragraph-long HELP — why, how, what the options mean; the field is usable\n * without it — goes in a `HelpPopover`, which this leaves on the label line at every\n * size: printed under the field it was the longest thing in the form (keksdose K3).\n *\n * The kit's fields call it through {@link useFieldHint} / {@link useFieldMessages}; a\n * field that resolves its own `hint` (an app's, or one of the kit's own outside this\n * file) calls it first and then treats the result as it treated a text hint.\n *\n * `withHelp` (round 0.36): the field has a `help`, whose \"?\" is the field's only one\n * ({@link fieldHelpMark}) — so a FieldHint is its words at EVERY size, not only at Large\n * and on touch.\n */\nexport function useInlineHint(hint: ReactNode, withHelp = false): ReactNode {\n  const inline = useInlineFacts();\n  if ((inline || withHelp) && isValidElement(hint) && hint.type === FieldHint) {\n    const words = (hint.props as FieldHintProps).label;\n    if (words) return words;\n  }\n  return hint;\n}\n\n/* ── help (round 0.36, docs/text-size-harmonization.md §4, §10.23) ─────────── */\n\n/**\n * The doc every field's `help` prop points at.\n *\n * A field may carry two kinds of words (§10.23): a FACT — a format, a limit, a\n * consequence — which stays visible, and HELP — why the field exists, how to choose,\n * what the options mean — which the field is usable without and which may sit behind a\n * \"?\". Until 0.36 a field had one slot, `hint`, so a field with both had to drop one or\n * print a paragraph (Kurvenschmiede's \"How it was measured\", round 0.36 H). Now:\n *\n * - `hint` is the fact, the caption under the field, on its `aria-describedby`;\n * - `help` is the help, a {@link HelpPopover} \"?\" on the label line (an unlabelled\n *   field's at its end edge, as a hint's), named \"About “<label>”\" (`common.aboutField`,\n *   from the label's text, else the `aria-label`, else `common.help`). Pass a\n *   `HelpPopover` as `help` to name it yourself (\"What do the statuses mean?\").\n *\n * The help's \"?\" is then the field's ONLY \"?\": a `FieldHint` passed as `hint` beside it\n * draws none of its own and shows its words as the caption at every size, as it does at\n * Large and on touch; any other `hint` is the caption too. Two \"?\" side by side would\n * look the same and open different things.\n */\nexport interface FieldHelpProps {\n  /**\n   * Help the field is usable without — why it exists, how to choose, what the options\n   * mean — behind the field's one \"?\" on its label line: a {@link HelpPopover} named\n   * \"About “<label>”\" that opens on a tap (round 0.36, docs/text-size-harmonization.md §4).\n   * Pass a `HelpPopover` to name it yourself. `hint` stays the visible fact: with `help`\n   * set it is the caption under the field at every size, a `FieldHint` included.\n   */\n  help?: ReactNode;\n}\n\n/**\n * The \"?\" for a field's `help` — the field's own name, \"About “<label>”\", in the reader's\n * language. A component so that a field without `help` asks the labels nothing.\n */\nfunction FieldHelp({ name, children }: { name: ReactNode; children: ReactNode }) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = plainText(name);\n  return <HelpPopover label={text === undefined ? common.help : common.aboutField(text)}>{children}</HelpPopover>;\n}\n\n/**\n * A field's `help` as the \"?\" for its label line, or `undefined` when there is none. A\n * {@link HelpPopover} is used as it is (it carries its own name); anything else is put\n * in one named \"About “<name>”\" — `name` is the field's label, else its `aria-label`.\n */\nexport function fieldHelpMark(help: ReactNode, name: ReactNode): ReactNode | undefined {\n  if (!hasContent(help)) return undefined;\n  if (isValidElement(help) && help.type === HelpPopover) return help;\n  return <FieldHelp name={name}>{help}</FieldHelp>;\n}\n\n/** What {@link useFieldHint} needs to draw a field's `help`. */\nexport interface FieldHelpSource {\n  /** The field's `help`. */\n  help?: ReactNode;\n  /** What names its \"?\": the field's label, else its `aria-label`. */\n  name?: ReactNode;\n}\n\n/**\n * Whether a `hint` is a CAPTION (plain text: a non-empty string or a number) or\n * something for the label line (a {@link FieldHint} \"?\", or any other node).\n *\n * The rule {@link Select} and `NumberInput` already keep: the label line is 11px of\n * strip shared with the label, and a sentence placed there ran over the label and into\n * the value; a \"?\" under the field would be a button floating free of the label it\n * explains.\n */\nexport function isTextHint(hint: ReactNode): hint is string | number {\n  return (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n}\n\n/** The caption under a field — Select's and NumberInput's type, so every field's\n *  standing advice reads alike. */\nexport const FIELD_CAPTION_CLASS = \"mt-1 text-caption leading-tight text-muted\";\n\nexport interface FieldHintParts {\n  /** The caller's `aria-describedby` with the caption's id appended — standing\n   *  advice first; the error (the news) is appended after this by the field. */\n  describedBy: string | undefined;\n  /** The caption's id while there is one. */\n  captionId: string | undefined;\n  /** The caption itself — a text hint, or any hint beside a `help` — or `undefined`. */\n  captionText: ReactNode | undefined;\n  /** What rides the label line — the `help`'s \"?\" ({@link fieldHelpMark}), else a\n   *  non-text hint (a FieldHint) — or, on a field with no label line, the end edge\n   *  outside the box. `undefined` when there is none. */\n  labelHint: ReactNode | undefined;\n}\n\n/**\n * Whether a resolved `hint` goes under the field as its caption: text always (see\n * {@link isTextHint}); with a `help` beside it, whatever it is — the label line's \"?\"\n * is the help's (round 0.36, §4).\n */\nexport function isHintCaption(hint: ReactNode, withHelp: boolean): boolean {\n  return isTextHint(hint) || (withHelp && hasContent(hint));\n}\n\n/**\n * Split a field's `hint` into the caption under it (attached with `aria-describedby`)\n * or the \"?\" on its label line. See {@link isTextHint}. With a `help` ({@link\n * FieldHelpProps}), the help's \"?\" takes the label line and the hint is the caption.\n */\nexport function useFieldHint(\n  hintProp: ReactNode,\n  describedBy: string | undefined,\n  { help, name }: FieldHelpSource = {},\n): FieldHintParts {\n  const helpMark = fieldHelpMark(help, name);\n  const withHelp = helpMark !== undefined;\n  const hint = useInlineHint(hintProp, withHelp);\n  const captionId = useId();\n  const caption = isHintCaption(hint, withHelp);\n  return {\n    describedBy: caption ? mergeDescribedBy(describedBy, captionId) : describedBy,\n    captionId: caption ? captionId : undefined,\n    captionText: caption ? hint : undefined,\n    labelHint: helpMark ?? (!caption && hasContent(hint) ? hint : undefined),\n  };\n}\n\n/** The error line under a field — one type for every field's message (DUP-8, refactor\n *  audit 2026-10: ChipInput and FileDropzone printed theirs in `text-xs`). */\nexport const FIELD_ERROR_CLASS = \"mt-1 text-caption leading-tight text-danger\";\n\n/**\n * The message under a field that is wrong, and the wiring that attaches it.\n *\n * `invalid` paints the field (`FIELD_INVALID`) and sets `aria-invalid`, and there it\n * stopped: a field that announces \"invalid\" and nothing else has told a screen-reader\n * user only that they are stuck. The message was always on screen — a sibling `<p>`\n * beside the field — and never in the accessibility tree, because attaching it needs an\n * id on the message and an `aria-describedby` on the control, and no caller was going to\n * mint one by hand for every field on a form.\n *\n * Two rules the wiring has to keep:\n *\n *  - **Merge, never replace.** A field may already point at a hint (\"at least twelve\n *    characters\"). Overwriting that reference to say the field is wrong trades one half\n *    of the answer for the other — and it keeps the half the user has already read. The\n *    hint stays first: it is the standing advice, the error is the news.\n *  - **`invalid` keeps working alone**, for the forms whose message lives somewhere else\n *    entirely (a summary at the top of a dialog). There is nothing to point at then, and\n *    a dangling id describes the field as nothing at all.\n *\n * Deliberately NOT `role=\"alert\"`. `aria-describedby` is read when focus reaches the\n * control, which is where a field's own error is wanted; an alert would also interrupt\n * whatever is being read at the time, on every keystroke of a form that re-validates as\n * you type.\n *\n * Every field's since 0.34 (DUP-8, refactor audit 2026-10): it was ui.tsx's own, so the\n * combobox family restated it as `useComboboxFieldError` — without the fourth argument,\n * so Autocomplete announced a form library's `aria-invalid` and did not paint it — and\n * ten fields restated it inline.\n */\nexport function useFieldError(\n  error: ReactNode,\n  invalid: boolean | undefined,\n  describedBy: string | undefined,\n  /** The caller's own `aria-invalid`. A form library sets THIS (see `@eifi1/ui-kit/rhf`\n   *  `RhfField`), not our `invalid` prop — and a field that announces invalid should\n   *  look it too. */\n  ariaInvalid?: unknown,\n): { isInvalid: boolean; describedBy: string | undefined; errorEl: ReactNode } {\n  const errorId = useId();\n  const hasError = hasContent(error);\n  return {\n    /** A field carrying a message that says what is wrong with it IS wrong. */\n    isInvalid: Boolean(invalid) || hasError || ariaInvalid === true || ariaInvalid === \"true\",\n    describedBy: mergeDescribedBy(describedBy, hasError && errorId),\n    errorEl: hasError ? (\n      <p id={errorId} className={FIELD_ERROR_CLASS}>\n        {error}\n      </p>\n    ) : null,\n  };\n}\n\n/** The caption under a field, as {@link Select} draws its own. */\nexport function FieldCaption({ parts, className }: { parts: FieldHintParts; className?: string }) {\n  if (parts.captionText === undefined) return null;\n  return (\n    <p id={parts.captionId} className={cn(FIELD_CAPTION_CLASS, className)}>\n      {parts.captionText}\n    </p>\n  );\n}\n\n/**\n * Classes that take a static floating label (`FLOATING_LABEL_STATIC`: `FieldLabel`,\n * `ComboboxFieldLabel`) out of its own absolute slot and into a {@link StaticLabelRow}.\n * `static` wins over `absolute` through `cn`'s merge; `min-w-0` lets it truncate in\n * the row. At Large the ROW stands above the field, so the label inside it drops the\n * margin a label above takes alone (`large:mb-0`), and stays level with its \"?\".\n */\nexport const LABEL_IN_ROW = \"static min-w-0 large:mb-0\";\n\n/**\n * A static label and its \"?\" on one line, in the top strip of a field that lays out its\n * own label — the combobox family, which cannot use {@link FloatingField} because the\n * trigger, the anchored panel and the label hang off a box of their own.\n *\n * FloatingField's static row, with one difference: it stops at `end-9`, the column the\n * chevron (or the clear \"×\") takes, so a long label truncates before it rather than\n * putting the \"?\" on top of the chevron. The hint keeps its width; the label gives way.\n */\nexport function StaticLabelRow({ hint, children }: { hint: ReactNode; children: ReactNode }) {\n  return (\n    <div\n      data-field-label=\"\"\n      className={cn(\n        \"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\",\n        LABEL_ABOVE_AT_LARGE,\n      )}\n    >\n      {children}\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * A field with no label line and a FieldHint \"?\": the hint at the end edge, OUTSIDE the\n * box, as an unlabelled {@link Select} has placed it since 0.15.5. Without a hint the\n * field is returned exactly as it was, so the wrapper costs nothing where it does not\n * apply.\n */\nexport function EndHintRow({\n  hint,\n  className,\n  children,\n}: {\n  hint: ReactNode | undefined;\n  className?: string;\n  children: ReactNode;\n}) {\n  if (hint === undefined) return <>{children}</>;\n  return (\n    <div className={cn(\"flex items-center gap-1.5\", className)}>\n      <div className=\"min-w-0 flex-1\">{children}</div>\n      <span className=\"flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/* ── the write lock on a control that saves itself (keksdose K3) ───────────── */\n\nexport interface LockReason {\n  /** The reason in force — the lock's (with `commit` under a locked\n   *  `WriteLockProvider`), else the control's own `disabledReason`. */\n  reason: ReactNode;\n  /** There is a reason: the control is locked the focusable way. */\n  locked: boolean;\n  /** The id of the reason's hidden copy, for the control's `aria-describedby`. */\n  reasonId: string;\n}\n\n/**\n * {@link Button}'s `commit` + `disabledReason`, for a control that IS its own commit — a\n * switch, a checkbox or a select that saves on change, a list row whose click writes.\n * The lock's reason wins over the control's own (`useCommitReason`).\n */\nexport function useLockReason(commit: CommitScope | undefined, disabledReason: ReactNode): LockReason {\n  const reason = useCommitReason(commit, disabledReason);\n  const reasonId = useId();\n  return { reason, locked: hasContent(reason), reasonId };\n}\n\n/**\n * A locked control and its reason — the kit's ONE frame for it, used by Button,\n * IconButton, Chip, Checkbox, Switch and every field that locks (DUP-3, refactor audit\n * 2026-10: Button's `ReasonFrame` and Chip's `ChipReasonFrame` were copies of it, and\n * only those two drew the line, so a field locked through `commit` kept its reason in a\n * tooltip on a phone while the Save beside it said it in words). Where it shows is\n * {@link DisabledReasonDisplay}'s: by default a LINE under the control at Large and on a\n * touch screen ({@link DisabledReasonLine}), the kit {@link Tooltip} otherwise.\n *\n * A component of its own so only a LOCKED control asks the text size and the pointer;\n * the hundreds of unlocked controls on a page subscribe to nothing.\n *\n * Tooltip form: the control in a FRAGMENT with a `hidden` copy of the reason for its\n * `aria-describedby`, so the Tooltip does not also clone its bubble's id into the\n * description — the same sentence twice would be read on every focus. Line form: the\n * line IS the description (it carries `reasonId`), and no bubble repeats what is on\n * screen.\n *\n * `className` is the wrapper's, which becomes the outermost element while locked — a\n * control moves its own layout classes here so a lock does not reflow the form.\n */\nexport function LockedReason({\n  lock,\n  display,\n  line: lineProp,\n  side,\n  portal,\n  className,\n  lineClassName,\n  children,\n}: {\n  /** The reason, and the id the control's `aria-describedby` names. */\n  lock: Pick<LockReason, \"reason\" | \"reasonId\">;\n  /** Where the reason shows — the control's `disabledReasonDisplay`. Default `\"auto\"`. */\n  display?: DisabledReasonDisplay;\n  /** The answer of a caller that asked {@link useDisabledReasonLine} for its own layout\n   *  already (Checkbox, Switch); wins over `display`. */\n  line?: boolean;\n  /** The bubble's side and portal — IconButton's `tooltipSide` / `tooltipPortal`. */\n  side?: TooltipSide;\n  portal?: boolean;\n  className?: string;\n  /** Classes for the line itself — a list row's padding, so the words line up with the\n   *  row's. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  const asked = useDisabledReasonLine(display);\n  if (lineProp ?? asked) {\n    return (\n      <DisabledReasonLine id={lock.reasonId} reason={lock.reason} className={className} lineClassName={lineClassName}>\n        {children}\n      </DisabledReasonLine>\n    );\n  }\n  return (\n    <Tooltip label={lock.reason} side={side} portal={portal} className={className}>\n      <>\n        {children}\n        <span id={lock.reasonId} hidden>\n          {lock.reason}\n        </span>\n      </>\n    </Tooltip>\n  );\n}\n\n/* ── no fact only in a tooltip (0.32, docs/text-size-harmonization.md §4, §10.8) ── */\n\n/**\n * Where a control's `disabledReason` is shown (§4 \"No fact only in a tooltip\"):\n *\n * - `\"auto\"` (default): as a LINE under the control at Large and Extra large and on a\n *   touch screen (`useInlineFacts`) — the reader asked for bigger type, or cannot hover\n *   — and in the kit {@link Tooltip} otherwise, where a pointer can hover it open and\n *   the form keeps its rhythm. Inside {@link CompactControls} (a top bar, a dense row's\n *   inline actions) it stays the tooltip at every size: there is no room for a line.\n * - `\"line\"`: always the line — a form whose locked submit should say why at once.\n * - `\"tooltip\"`: always the tooltip — a place the caller knows has no room, and where\n *   the reason is also said elsewhere on the screen (a banner over the form).\n *\n * Either way the reason is the control's `aria-describedby`, so a screen reader hears\n * it on focus; the line IS that description (one copy), the tooltip keeps its hidden\n * copy as before.\n */\nexport type DisabledReasonDisplay = \"auto\" | \"line\" | \"tooltip\";\n\n/**\n * Marks a region where the controls must stay compact at every text size (§4, §10.8):\n * an IconButton keeps its icon alone (its `label` stays the name and the tooltip) and a\n * `disabledReason` stays in the tooltip rather than a line. AppShell puts its top bar\n * in one (\"the top bar keeps its essential icons\"); `RowActions` its inline icons.\n *\n * For a toolbar that has no room, not for a whole page: the contract asks that the icon\n * alone be rare. A dense row's actions belong in `RowActions`, which collapses them\n * into a \"⋯\" menu at Large instead.\n */\nexport const CompactControlsContext = createContext(false);\n\nexport function CompactControls({ children, compact = true }: { children: ReactNode; compact?: boolean }) {\n  return <CompactControlsContext.Provider value={compact}>{children}</CompactControlsContext.Provider>;\n}\n\n/** Whether a control's `disabledReason` is drawn as a line here — see\n *  {@link DisabledReasonDisplay}. For the kit's own controls (Button, IconButton, Chip,\n *  ToggleGroup) and an app's control that has a reason to give. */\nexport function useDisabledReasonLine(display: DisabledReasonDisplay = \"auto\"): boolean {\n  const compact = useContext(CompactControlsContext);\n  const inline = useInlineFacts();\n  if (display === \"line\") return true;\n  if (display === \"tooltip\") return false;\n  return inline && !compact;\n}\n\n/** The reason line's type: a field caption's ({@link FIELD_CAPTION_CLASS}), so a locked\n *  control's \"why\" reads like a field's standing advice. Capped, so a long reason under\n *  a small control wraps rather than widening its row without end. */\nexport const DISABLED_REASON_LINE_CLASS = \"mt-1 block max-w-[20rem] text-caption leading-tight text-muted\";\n\n/**\n * A control and its `disabledReason` as a line under it — the `\"line\"` form of\n * {@link DisabledReasonDisplay}. The wrapper is the flex item now (`className`: the\n * control's own layout, e.g. `self-stretch`); `items-start` keeps the control its own\n * width, and a column parent still stretches the wrapper (FormActions' phone stack).\n * The line carries `id`, which the control's `aria-describedby` names.\n */\nexport function DisabledReasonLine({\n  id,\n  reason,\n  className,\n  lineClassName,\n  children,\n}: {\n  id: string;\n  reason: ReactNode;\n  className?: string;\n  /** Classes for the line itself (0.34) — a list row's padding, so its words start\n   *  where the row's do. */\n  lineClassName?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span data-slot=\"disabled-reason\" className={cn(\"inline-flex max-w-full flex-col items-start\", className)}>\n      {children}\n      <span id={id} className={cn(DISABLED_REASON_LINE_CLASS, lineClassName)}>\n        {reason}\n      </span>\n    </span>\n  );\n}\n\n/* ── groups ───────────────────────────────────────────────────────────────── */\n\n/**\n * Set by {@link CheckboxGroup}: its legend carries the one required star, so a box\n * inside it keeps the native `required` (a form still refuses an empty set) but draws no\n * star of its own — four stars on four languages would read as four separate demands.\n * ChoiceCardGroup's `InGroupContext`, for the plain checkbox.\n */\nexport const RequiredStarOnLegend = createContext(false);\n\n/* ── fields not built on FloatingField: pickers and bare groups ──────────── */\n\nexport interface FieldMessages {\n  /** `invalid`, a message, or an `aria-invalid` from outside (a form library). */\n  isInvalid: boolean;\n  /** The caller's description, then the caption, then a lock's reason, then the error —\n   *  the standing advice before the news, as {@link useFieldError} orders them. */\n  describedBy: string | undefined;\n  /** The caption and the error, for under the field; `null` when there is neither. */\n  below: ReactNode;\n  /** What rides the LABEL line — the `help`'s \"?\", else a `FieldHint` — or `undefined`\n   *  when the hint is a caption and there is no help. */\n  labelHint: ReactNode;\n}\n\n/**\n * `hint` / `help` / `error` / `invalid` resolved the way `Select` resolves them —\n * {@link useFieldHint} and {@link useFieldError} together, for a field that draws what\n * goes under it in one place (a picker, a group, a field built on another).\n */\nexport function useFieldMessages({\n  hint,\n  help,\n  name,\n  error,\n  invalid,\n  describedBy,\n  ariaInvalid,\n  reasonId,\n}: FieldHelpSource & {\n  hint?: ReactNode;\n  error?: ReactNode;\n  invalid?: boolean;\n  describedBy?: string;\n  ariaInvalid?: unknown;\n  /** A lock's reason (`useLockReason`'s `reasonId`, while locked): described after the\n   *  caption and before the error, as on Select. */\n  reasonId?: string | false;\n}): FieldMessages {\n  const hintParts = useFieldHint(hint, describedBy, { help, name });\n  const field = useFieldError(error, invalid, mergeDescribedBy(hintParts.describedBy, reasonId), ariaInvalid);\n  return {\n    isInvalid: field.isInvalid,\n    describedBy: field.describedBy,\n    below:\n      hintParts.captionText !== undefined || field.errorEl !== null ? (\n        <>\n          <FieldCaption parts={hintParts} />\n          {field.errorEl}\n        </>\n      ) : null,\n    labelHint: hintParts.labelHint,\n  };\n}\n\n/**\n * The field and what is under it, as one box — `FieldGroup` in field-base.tsx, for the same\n * reasons written there. Nothing of its own while there is nothing under the field and\n * the caller passed no `error` key (the DOM is exactly what it was before these props);\n * once `error` is passed the box is kept even with no message, so the trigger is never\n * reparented — and remounted, losing focus — as the message comes and goes.\n */\nexport function FieldBox({ below, reserve, children }: { below: ReactNode; reserve: boolean; children: ReactNode }) {\n  if (below === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {below}\n    </div>\n  );\n}\n\n/**\n * The static label in a trigger field's top strip — a {@link FieldLabel}, or, with a\n * `FieldHint`, the label and its \"?\" laid out on ONE flex row (dev#468: two absolute\n * offsets guessing at the same baseline put the \"?\" three pixels above its word).\n * `FloatingField`'s static-label row, except that it stops at `end-9`: the date and\n * month triggers keep that column (`pe-9`) for the calendar glyph or the clear ×, and a\n * long label truncates before it rather than putting the \"?\" on top of it.\n */\nexport function FieldLabelLine({ label, hint }: { label: ReactNode; hint?: ReactNode }) {\n  if (!hasContent(hint)) return <FieldLabel>{label}</FieldLabel>;\n  return (\n    // `z-10` as FieldLabel has it: the trigger after it is `relative` and would paint\n    // over the row (and take the \"?\"'s hover) otherwise. Above the field at Large.\n    <div\n      data-field-label=\"\"\n      className={cn(\n        \"pointer-events-none absolute start-3 end-9 top-1 z-10 flex items-center gap-1\",\n        LABEL_ABOVE_AT_LARGE,\n      )}\n    >\n      <FieldLabel className={cn(LABEL_IN_ROW, \"max-w-full\")}>{label}</FieldLabel>\n      <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n    </div>\n  );\n}\n\n/**\n * How tall the strip over a bare group is: 20px at Normal, for every group the kit\n * draws one over — ToggleGroup's `labelPlacement=\"strip\"`, SwatchPicker, IconPicker\n * and {@link FieldStrip} (whose `pad` named two heights until 0.34).\n *\n * The label ROW, not the label, is what has to fit (keksdose dev#593, kk K4, measured in\n * headless Chromium): it sits `top-1` (4px) and is as tall as the taller of the label\n * (11px `text-caption` in a `leading-tight` line, 13.75px) and its \"?\" (a 14px icon,\n * `size-3.5`) — so it ends 18px down. The strip has to be at least that:\n *\n *     label row: 4 + max(13.75, 14) = 18   ≤   strip: 20   (2px clear of the content)\n *\n * Until 0.34 a 16px strip (`\"field\"`) stood over the segmented group so that 16 + its\n * 26px box made a labelled Input's 42px (keksdose's `ClearedStatusPicker`, live #288 /\n * #431). The label and its \"?\" then crossed the group's top border by 2px — *\"the\n * question mark even interferes with it\"* (at 125 %: label row 424–438, border at 436).\n * The 4px come out of the group's segments instead (`STRIP_SEGMENT` in\n * toggle-group.tsx): 20 + 22 = 42. A tile, a map, a row of buttons — content with no\n * inset — needed the 20px already (keksdose's `FlagPicker` and location field, `pt-5`).\n *\n * Every term is rem, so the sum holds at any browser font size. At Large and Extra large\n * there is no strip: the label row stands above the content, in flow\n * ({@link LABEL_ABOVE_AT_LARGE}), and the padding goes (`large:pt-0` in\n * {@link LabelStrip}), so nothing lies under the label to cross.\n */\nexport const LABEL_STRIP_PAD = \"pt-5\";\n\n/**\n * The 11px label (and its `FieldHint`) over a group that is NOT a field — keksdose K2:\n * a segmented control or a row of swatches standing in a form row beside labelled\n * inputs, whose label must sit on the same line as theirs (`top-1`, `inset-x-3`, the\n * type of a field's static label) without the group growing a field's border round\n * it. `id` goes on the label so the group can be `aria-labelledby` it.\n *\n * `relative` is load-bearing twice over: the row is positioned against it, and a\n * caller's `sr-only` label cannot escape it (sr-only-containment).\n *\n * Any other attribute (`rest`) lands on the wrapper — {@link FieldStrip} makes it the\n * `role=\"group\"` its label names. The kit's own groups pass none, so their wrapper is\n * the bare box it was in 0.22.\n */\nexport function LabelStrip({\n  labelId,\n  label,\n  hint,\n  disabled,\n  className,\n  children,\n  ...rest\n}: Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  labelId: string;\n  label: ReactNode;\n  /** What rides the label line beside the label — a resolved `labelHint`\n   *  ({@link useFieldMessages}), never a raw `hint`: a FieldHint is the caption at Large\n   *  and on touch, and the caller draws that under its group. */\n  hint?: ReactNode;\n  /** Dim the label with its group, as `peer-disabled:` dims a field's own. */\n  disabled?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    // At Large the row is a label above the group, in flow (0.33, §10.17), and the\n    // strip's padding goes: nothing lies under it any more.\n    <div {...rest} className={cn(\"relative min-w-0\", LABEL_STRIP_PAD, \"large:pt-0\", className)}>\n      <div\n        data-field-label=\"\"\n        className={cn(\"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\", LABEL_ABOVE_AT_LARGE)}\n      >\n        {/* `static`: FieldLabel positions itself absolutely; here the ROW is\n            positioned, so the label and its \"?\" are centred on one line by the flex\n            layout (dev#468). */}\n        <FieldLabel id={labelId} className={cn(LABEL_IN_ROW, \"max-w-full\", disabled && \"opacity-50\")}>\n          {label}\n        </FieldLabel>\n        {hasContent(hint) && <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>}\n      </div>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/field-sync.js

@@ -221,7 +221,13 @@ function FieldSyncRow({
           children,
           /* @__PURE__ */ jsxs("span", { className: "pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3", children: [
             state === "edited" && /* @__PURE__ */ jsx(PencilLine, { "aria-hidden": true, className: "size-4 text-[var(--status-edited)]" }),
-            state === "pending" && /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none" }),
+            state === "pending" && /* @__PURE__ */ jsx(
+              Loader2,
+              {
+                "aria-hidden": true,
+                className: "size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none"
+              }
+            ),
             state === "synced" && /* @__PURE__ */ jsx(
               Check,
               {
@@ -246,15 +252,7 @@ function FieldSyncRow({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              role: isError ? "alert" : "status",
-              "aria-live": isError ? "assertive" : "polite",
-              className: "sr-only",
-              children: shown === null ? "" : text
-            }
-          )
+          /* @__PURE__ */ jsx("span", { role: isError ? "alert" : "status", "aria-live": isError ? "assertive" : "polite", className: "sr-only", children: shown === null ? "" : text })
         ]
       }
     )

package/dist/components/field-sync.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-sync.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { AlertCircle, Check, Loader2, Pencil, PencilLine } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { DEFAULT_FIELD_SYNC_LABELS } from \"./field-sync-labels\";\n\n/**\n * Sync state for a field backed by a database row.\n *\n * The four states a value can be in between the keyboard and the server:\n *\n *   synced   the draft equals what was last persisted\n *   edited   the draft differs and nothing has been sent yet\n *   pending  a save is in flight\n *   error    the last save was rejected; `error` carries why\n *\n * `useFieldSync` is the engine and holds no opinion about markup;\n * `FieldSyncIndicator` is the affordance and holds no state. They are separate\n * because the state is useful without the dot — a form can disable its submit\n * button while any field is `pending`, and a router can block navigation while\n * any field is `edited`.\n */\nexport type FieldSyncState = \"synced\" | \"edited\" | \"pending\" | \"error\";\n\nexport interface FieldSyncLabels {\n  synced: string;\n  edited: string;\n  pending: string;\n  /** Shown when the failure carries no message of its own. */\n  error: string;\n  retry: string;\n}\n\n// Defined in ./field-sync-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_FIELD_SYNC_LABELS };\n\nexport interface UseFieldSyncOptions<T> {\n  /** What the database currently holds. Changing it re-seeds a CLEAN field. */\n  value: T;\n  /** Persist `next`. Reject — or throw — to put the field in `error`. */\n  onSave: (next: T) => Promise<void> | void;\n  /**\n   * Quiet period before an edit saves itself, in ms. Default `0`: no auto-save at\n   * all, so `save()` is the only way to persist — called on blur by `FieldSyncRow`,\n   * and on Enter by the caller. Saving after a pause in typing wrote half-finished\n   * values to the database whenever somebody stopped to think; pass a positive\n   * number only for a field where that is genuinely wanted.\n   */\n  debounceMs?: number;\n  /** How to tell two values apart. Defaults to `Object.is`. */\n  equals?: (a: T, b: T) => boolean;\n  /** Called once per rejected save, with whatever `onSave` threw. */\n  onError?: (error: Error) => void;\n}\n\nexport interface UseFieldSyncReturn<T> {\n  /** The draft — bind this to the input, not the `value` option. */\n  value: T;\n  setValue: (next: T) => void;\n  state: FieldSyncState;\n  /** Non-null exactly when `state === \"error\"`. */\n  error: Error | null;\n  /** True whenever the draft differs from the last persisted value. */\n  dirty: boolean;\n  /** Persist now, cancelling any pending debounce. A no-op on a clean field. */\n  save: () => void;\n  /** Send the current draft again after a failure. */\n  retry: () => void;\n  /** Throw the draft away and go back to the last persisted value. */\n  reset: () => void;\n}\n\nfunction toError(cause: unknown): Error {\n  if (cause instanceof Error) return cause;\n  // An EMPTY message for a rejection that carried none, not an English one: the\n  // indicator shows `error.message` when there is one and the translated\n  // `fieldSync.error` otherwise, so a fallback message here was an English sentence\n  // that outranked the app's own translation. The original value stays on `cause`\n  // for whoever logs it from `onError`.\n  return new Error(typeof cause === \"string\" ? cause : \"\", { cause });\n}\n\n/**\n * Track one database-backed field: a local draft, a debounced save, and the state\n * of the round trip.\n *\n * Four things this handles that a `useState` + `useEffect` in a page does not:\n *\n *   1. **An edit during a save is never lost.** A save in flight is not cancelled\n *      and not raced — when it settles, the draft is compared again and sent once\n *      more if it moved. Cancelling instead would drop a keystroke that arrived\n *      mid-flight; firing immediately would let two writes land out of order.\n *   2. **The server value is only adopted when the field is clean.** An external\n *      refresh that overwrote what somebody was typing would be a data-loss bug, so\n *      a dirty draft wins and keeps winning until it is saved or reset.\n *   3. **Nothing is set after unmount.** The save resolves into a component that\n *      may be gone — a row scrolled out of a virtualised table, a closed dialog.\n *   4. **`onSave` is read through a ref**, so an inline arrow — which every call\n *      site will pass — does not restart the debounce on every render.\n */\nexport function useFieldSync<T>({\n  value,\n  onSave,\n  debounceMs = 0,\n  equals = Object.is,\n  onError,\n}: UseFieldSyncOptions<T>): UseFieldSyncReturn<T> {\n  const [draft, setDraft] = useState<T>(value);\n  const [state, setState] = useState<FieldSyncState>(\"synced\");\n  const [error, setError] = useState<Error | null>(null);\n\n  // The last value known to be on the server. Not state: it changes together with\n  // `state` inside the save, and a second render for it would be a wasted one.\n  const savedRef = useRef<T>(value);\n  const draftRef = useRef<T>(value);\n  const inFlightRef = useRef(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mountedRef = useRef(true);\n\n  // Latest-ref for the callbacks and comparators, so a caller passing inline\n  // functions (all of them) does not invalidate the timer on every render.\n  const onSaveRef = useRef(onSave);\n  const onErrorRef = useRef(onError);\n  const equalsRef = useRef(equals);\n  useEffect(() => {\n    onSaveRef.current = onSave;\n    onErrorRef.current = onError;\n    equalsRef.current = equals;\n  });\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  // A named inner function so the settle path can start the next round by calling it\n  // again; a `useCallback` cannot refer to its own binding while it is being built.\n  const flush = useCallback(() => {\n    const run = async (): Promise<void> => {\n      if (inFlightRef.current) return; // the settle path below picks the new draft up\n      const next = draftRef.current;\n      if (equalsRef.current(next, savedRef.current)) return;\n\n      inFlightRef.current = true;\n      setState(\"pending\");\n      setError(null);\n      try {\n        await onSaveRef.current(next);\n        savedRef.current = next;\n        inFlightRef.current = false;\n        if (!mountedRef.current) return;\n        // The draft may have moved while this was in the air. Compare against what is\n        // on screen NOW, not against what was sent.\n        if (equalsRef.current(draftRef.current, next)) {\n          setState(\"synced\");\n        } else {\n          setState(\"edited\");\n          void run();\n        }\n      } catch (cause) {\n        inFlightRef.current = false;\n        const err = toError(cause);\n        onErrorRef.current?.(err);\n        if (!mountedRef.current) return;\n        setState(\"error\");\n        setError(err);\n      }\n    };\n    return run();\n  }, []);\n\n  const setValue = useCallback(\n    (next: T) => {\n      draftRef.current = next;\n      setDraft(next);\n      if (timerRef.current) clearTimeout(timerRef.current);\n\n      if (equalsRef.current(next, savedRef.current)) {\n        // Typed back to what the server already has. Nothing to send, and an error\n        // from the previous attempt no longer describes anything.\n        setState(inFlightRef.current ? \"pending\" : \"synced\");\n        setError(null);\n        return;\n      }\n\n      setState(\"edited\");\n      setError(null);\n      if (debounceMs > 0) timerRef.current = setTimeout(() => void flush(), debounceMs);\n    },\n    [debounceMs, flush],\n  );\n\n  const save = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    void flush();\n  }, [flush]);\n\n  const retry = save;\n\n  const reset = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    draftRef.current = savedRef.current;\n    setDraft(savedRef.current);\n    setState(inFlightRef.current ? \"pending\" : \"synced\");\n    setError(null);\n  }, []);\n\n  // Anything that is not `synced` has something not yet on the server: `edited` and\n  // `error` obviously, and `pending` too — the write is in the air, not landed.\n  // Derived from state rather than by comparing against `savedRef` during render,\n  // because a ref read here would not re-render when the comparison's answer changes.\n  const dirty = state !== \"synced\";\n\n  // Adopt a new server value ONLY when there is nothing local to lose.\n  useEffect(() => {\n    if (inFlightRef.current) return;\n    if (!equalsRef.current(draftRef.current, savedRef.current)) return; // dirty: keep it\n    if (equalsRef.current(value, savedRef.current)) return; // unchanged\n    savedRef.current = value;\n    draftRef.current = value;\n    setDraft(value);\n    setState(\"synced\");\n    setError(null);\n  }, [value]);\n\n  return { value: draft, setValue, state, error, dirty, save, retry, reset };\n}\n\nconst STATE_STYLE: Record<FieldSyncState, { color: string; Icon: typeof Check }> = {\n  synced: { color: \"var(--status-synced)\", Icon: Check },\n  edited: { color: \"var(--status-edited)\", Icon: Pencil },\n  pending: { color: \"var(--status-pending)\", Icon: Loader2 },\n  error: { color: \"var(--status-error)\", Icon: AlertCircle },\n};\n\nexport interface FieldSyncIndicatorProps {\n  state: FieldSyncState;\n  /** The failure. Its message becomes the tooltip when `state === \"error\"`. */\n  error?: Error | null;\n  /** Override any of the five English defaults. */\n  labels?: LabelOverride<FieldSyncLabels>;\n  /** Render the label beside the icon instead of only in the tooltip. Always on at\n   *  Large and Extra large (0.32, docs/text-size-harmonization.md §4 \"No fact only in a\n   *  tooltip\"): the reader who asked for bigger type gets the words, not a 14 px glyph\n   *  and a bubble. */\n  showLabel?: boolean;\n  /** When given, the error state renders a retry button after the icon. */\n  onRetry?: () => void;\n  className?: string;\n}\n\n/**\n * The affordance for {@link useFieldSync}: a coloured icon, and the reason on hover.\n *\n * **Every state has its own icon, and that is not decoration.** The four colours\n * include the green/red pair, which is the one combination this package's palette\n * otherwise refuses (see the note in `tokens.css`) because red-green colour blindness\n * affects roughly one man in twelve. The icon is what carries the meaning for them,\n * and what carries it into a greyscale print or a screenshot. WCAG 1.4.1 is the same\n * requirement stated formally.\n *\n * The state is also announced: the wrapper is a polite live region, so a screen\n * reader hears \"Saving…\" then \"Saved\" without the user going looking. `error` is\n * assertive instead — a failed write is worth interrupting for.\n */\nexport function FieldSyncIndicator({\n  state,\n  error,\n  labels,\n  showLabel = false,\n  onRetry,\n  className,\n}: FieldSyncIndicatorProps) {\n  const l = useKitLabels(\"fieldSync\", DEFAULT_FIELD_SYNC_LABELS, labels);\n  const large = useLargeText();\n  showLabel = showLabel || large;\n  const { color, Icon } = STATE_STYLE[state];\n  const text =\n    state === \"error\" ? (error?.message?.trim() ? error.message : l.error) : l[state];\n\n  return (\n    <span\n      // The ICON carries the status colour; the words are `--text-secondary`, because\n      // the amber of `edited` is a graphic colour (3:1), not a text colour (4.5:1).\n      className={cn(\"inline-flex items-center gap-1.5 text-xs text-secondary\", className)}\n      // Polite for the three ordinary states so save chatter does not interrupt\n      // typing; assertive for a failure, which the user has to know about now.\n      role={state === \"error\" ? \"alert\" : \"status\"}\n      aria-live={state === \"error\" ? \"assertive\" : \"polite\"}\n    >\n      <Tooltip label={showLabel ? undefined : text} redact={state === \"error\"}>\n        <span className=\"inline-flex items-center gap-1.5\">\n          <Icon\n            aria-hidden\n            style={{ color }}\n            className={cn(\"size-3.5 shrink-0\", state === \"pending\" && \"animate-spin\")}\n          />\n          {/* Always in the DOM, so the live region has something to announce even\n              when the label is visually a tooltip. */}\n          <span className={showLabel ? undefined : \"sr-only\"}>{text}</span>\n        </span>\n      </Tooltip>\n      {state === \"error\" && onRetry && (\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          // The kit's focus frame (0.32, §5), stood off the word.\n          className={cn(\n            \"rounded underline underline-offset-2 hover:no-underline focus-visible:ring-offset-2 focus-visible:ring-offset-surface\",\n            FOCUS_RING,\n          )}\n          style={{ color }}\n        >\n          {l.retry}\n        </button>\n      )}\n    </span>\n  );\n}\n\n/**\n * The field's own frame, coloured by state — applied from the WRAPPER to whatever\n * native control sits inside it, so {@link FieldSyncRow} works with any of the kit's\n * inputs (and a caller's own) without each one growing a `syncState` prop.\n *\n * Border AND a 1px ring, for the reason {@link FIELD_INVALID} gives: a lone 1px\n * border loses a vertical edge to sub-pixel spread at 125% display scaling. The\n * `:focus` twins are what keep the state visible while the reader is typing —\n * the base field class's `focus:` brand colour is `(0,2,0)` and would otherwise win\n * over a descendant selector exactly when the field is in use.\n *\n * `synced` is green, but {@link FieldSyncRow} paints it only for a moment after a\n * save lands — a form of eight permanently green boxes says nothing the absence of\n * colour does not.\n *\n * Every class is a literal so Tailwind's scanner can see it.\n */\nexport const FIELD_SYNC_FRAME: Record<FieldSyncState, string> = {\n  synced:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-synced)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-synced)] [&_:is(input,select,textarea):focus]:border-[var(--status-synced)] [&_:is(input,select,textarea):focus]:ring-[var(--status-synced)]\",\n  edited:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-edited)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-edited)] [&_:is(input,select,textarea):focus]:border-[var(--status-edited)] [&_:is(input,select,textarea):focus]:ring-[var(--status-edited)]\",\n  pending:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-pending)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-pending)] [&_:is(input,select,textarea):focus]:border-[var(--status-pending)] [&_:is(input,select,textarea):focus]:ring-[var(--status-pending)]\",\n  error:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-error)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-error)] [&_:is(input,select,textarea):focus]:border-[var(--status-error)] [&_:is(input,select,textarea):focus]:ring-[var(--status-error)]\",\n};\n\n/** How long the green \"saved\" frame and check stay after a save lands, in ms. */\nexport const FIELD_SYNC_SAVED_MS = 1500;\n\nexport interface FieldSyncRowProps<T> extends Omit<FieldSyncIndicatorProps, \"state\" | \"error\" | \"showLabel\"> {\n  sync: UseFieldSyncReturn<T>;\n  children: ReactNode;\n  /** Call `sync.save()` when focus leaves the field. Default true — together with the\n   *  hook's default `debounceMs: 0` this is \"save on blur\": nothing is written while\n   *  the reader is still typing, however long they pause. */\n  saveOnBlur?: boolean;\n  /** How long the saved confirmation shows. Default {@link FIELD_SYNC_SAVED_MS}. */\n  savedMs?: number;\n}\n\n/**\n * A field wearing its sync state — as its FRAME COLOUR and an ICON AT THE END OF THE\n * FIELD, so the field never changes size (a helper line appearing under it moved\n * everything below it on every save):\n *\n *   edited   amber frame, pencil          — changed, not yet saved\n *   pending  blue frame, spinning circle  — for as long as the save is in flight\n *   synced   green frame, check           — for {@link FIELD_SYNC_SAVED_MS} after a\n *                                            save lands, then an ordinary field again\n *   error    red frame, alert mark        — hover or focus the mark for the reason;\n *                                            click it to retry\n *\n * It saves when focus LEAVES the field (`saveOnBlur`), not after a pause in typing: a\n * database write in the middle of a word is a write nobody asked for. Enter in a\n * single-line field is the caller's to wire to `sync.save`.\n *\n * Colour is never the only signal: every state has its own icon, and the state text is\n * always in the DOM as a live region — polite for the ordinary states, assertive for\n * a failure. The input gets end padding for the icon whether or not one is showing,\n * so the text never reflows when the state changes.\n */\nexport function FieldSyncRow<T>({\n  sync,\n  children,\n  className,\n  labels,\n  onRetry,\n  saveOnBlur = true,\n  savedMs = FIELD_SYNC_SAVED_MS,\n}: FieldSyncRowProps<T>) {\n  const l = useKitLabels(\"fieldSync\", DEFAULT_FIELD_SYNC_LABELS, labels);\n  const { state, error } = sync;\n  const isError = state === \"error\";\n  const text = isError ? (error?.message?.trim() ? error.message : l.error) : l[state];\n  const retry = onRetry ?? sync.retry;\n\n  // The saved confirmation: on only for the moment after a save lands. Keyed on the\n  // TRANSITION pending → synced, so a field that starts synced shows nothing. The\n  // transition is seen while rendering, against the previous state; the effect only\n  // owns the timer that turns it off again.\n  const [previous, setPrevious] = useState(state);\n  const [justSaved, setJustSaved] = useState(false);\n  if (state !== previous) {\n    setPrevious(state);\n    setJustSaved(state === \"synced\" && previous === \"pending\");\n  }\n  useEffect(() => {\n    if (!justSaved) return;\n    const t = setTimeout(() => setJustSaved(false), savedMs);\n    return () => clearTimeout(t);\n  }, [justSaved, savedMs]);\n  const shown: FieldSyncState | null = state === \"synced\" ? (justSaved ? \"synced\" : null) : state;\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- not an interaction:\n       `onBlur` listens for focus leaving the row's own controls (which are the\n       interactive elements) to save; the wrapper itself is never focused. */\n    <div\n      data-field-sync={state}\n      className={cn(\n        // `relative` for the icon and for the sr-only live region's containing block.\n        \"relative [&_:is(input,select,textarea)]:pe-9\",\n        shown && FIELD_SYNC_FRAME[shown],\n        className,\n      )}\n      onBlur={\n        saveOnBlur\n          ? (e) => {\n              // Focus moving between two controls INSIDE the row is not leaving it.\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) sync.save();\n            }\n          : undefined\n      }\n    >\n      {children}\n      <span className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3\">\n        {state === \"edited\" && (\n          <PencilLine aria-hidden className=\"size-4 text-[var(--status-edited)]\" />\n        )}\n        {state === \"pending\" && (\n          <Loader2 aria-hidden className=\"size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none\" />\n        )}\n        {state === \"synced\" && (\n          <Check\n            aria-hidden\n            className={cn(\n              \"size-4 text-[var(--status-synced)] transition-opacity duration-500 motion-reduce:transition-none\",\n              justSaved ? \"opacity-100\" : \"opacity-0\",\n            )}\n          />\n        )}\n        {isError && (\n          <Tooltip label={text} portal redact>\n            <button\n              type=\"button\"\n              onClick={retry}\n              aria-label={l.retry}\n              className={cn(\n                \"pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:ring-offset-2 focus-visible:ring-offset-surface\",\n                FOCUS_RING,\n              )}\n            >\n              <AlertCircle aria-hidden className=\"size-4\" />\n            </button>\n          </Tooltip>\n        )}\n      </span>\n      <span\n        role={isError ? \"alert\" : \"status\"}\n        aria-live={isError ? \"assertive\" : \"polite\"}\n        className=\"sr-only\"\n      >\n        {shown === null ? \"\" : text}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/field-sync.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { AlertCircle, Check, Loader2, Pencil, PencilLine } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Tooltip } from \"./tooltip\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useLargeText } from \"../hooks/use-large-text\";\nimport { DEFAULT_FIELD_SYNC_LABELS } from \"./field-sync-labels\";\n\n/**\n * Sync state for a field backed by a database row.\n *\n * The four states a value can be in between the keyboard and the server:\n *\n *   synced   the draft equals what was last persisted\n *   edited   the draft differs and nothing has been sent yet\n *   pending  a save is in flight\n *   error    the last save was rejected; `error` carries why\n *\n * `useFieldSync` is the engine and holds no opinion about markup;\n * `FieldSyncIndicator` is the affordance and holds no state. They are separate\n * because the state is useful without the dot — a form can disable its submit\n * button while any field is `pending`, and a router can block navigation while\n * any field is `edited`.\n */\nexport type FieldSyncState = \"synced\" | \"edited\" | \"pending\" | \"error\";\n\nexport interface FieldSyncLabels {\n  synced: string;\n  edited: string;\n  pending: string;\n  /** Shown when the failure carries no message of its own. */\n  error: string;\n  retry: string;\n}\n\n// Defined in ./field-sync-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_FIELD_SYNC_LABELS };\n\nexport interface UseFieldSyncOptions<T> {\n  /** What the database currently holds. Changing it re-seeds a CLEAN field. */\n  value: T;\n  /** Persist `next`. Reject — or throw — to put the field in `error`. */\n  onSave: (next: T) => Promise<void> | void;\n  /**\n   * Quiet period before an edit saves itself, in ms. Default `0`: no auto-save at\n   * all, so `save()` is the only way to persist — called on blur by `FieldSyncRow`,\n   * and on Enter by the caller. Saving after a pause in typing wrote half-finished\n   * values to the database whenever somebody stopped to think; pass a positive\n   * number only for a field where that is genuinely wanted.\n   */\n  debounceMs?: number;\n  /** How to tell two values apart. Defaults to `Object.is`. */\n  equals?: (a: T, b: T) => boolean;\n  /** Called once per rejected save, with whatever `onSave` threw. */\n  onError?: (error: Error) => void;\n}\n\nexport interface UseFieldSyncReturn<T> {\n  /** The draft — bind this to the input, not the `value` option. */\n  value: T;\n  setValue: (next: T) => void;\n  state: FieldSyncState;\n  /** Non-null exactly when `state === \"error\"`. */\n  error: Error | null;\n  /** True whenever the draft differs from the last persisted value. */\n  dirty: boolean;\n  /** Persist now, cancelling any pending debounce. A no-op on a clean field. */\n  save: () => void;\n  /** Send the current draft again after a failure. */\n  retry: () => void;\n  /** Throw the draft away and go back to the last persisted value. */\n  reset: () => void;\n}\n\nfunction toError(cause: unknown): Error {\n  if (cause instanceof Error) return cause;\n  // An EMPTY message for a rejection that carried none, not an English one: the\n  // indicator shows `error.message` when there is one and the translated\n  // `fieldSync.error` otherwise, so a fallback message here was an English sentence\n  // that outranked the app's own translation. The original value stays on `cause`\n  // for whoever logs it from `onError`.\n  return new Error(typeof cause === \"string\" ? cause : \"\", { cause });\n}\n\n/**\n * Track one database-backed field: a local draft, a debounced save, and the state\n * of the round trip.\n *\n * Four things this handles that a `useState` + `useEffect` in a page does not:\n *\n *   1. **An edit during a save is never lost.** A save in flight is not cancelled\n *      and not raced — when it settles, the draft is compared again and sent once\n *      more if it moved. Cancelling instead would drop a keystroke that arrived\n *      mid-flight; firing immediately would let two writes land out of order.\n *   2. **The server value is only adopted when the field is clean.** An external\n *      refresh that overwrote what somebody was typing would be a data-loss bug, so\n *      a dirty draft wins and keeps winning until it is saved or reset.\n *   3. **Nothing is set after unmount.** The save resolves into a component that\n *      may be gone — a row scrolled out of a virtualised table, a closed dialog.\n *   4. **`onSave` is read through a ref**, so an inline arrow — which every call\n *      site will pass — does not restart the debounce on every render.\n */\nexport function useFieldSync<T>({\n  value,\n  onSave,\n  debounceMs = 0,\n  equals = Object.is,\n  onError,\n}: UseFieldSyncOptions<T>): UseFieldSyncReturn<T> {\n  const [draft, setDraft] = useState<T>(value);\n  const [state, setState] = useState<FieldSyncState>(\"synced\");\n  const [error, setError] = useState<Error | null>(null);\n\n  // The last value known to be on the server. Not state: it changes together with\n  // `state` inside the save, and a second render for it would be a wasted one.\n  const savedRef = useRef<T>(value);\n  const draftRef = useRef<T>(value);\n  const inFlightRef = useRef(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const mountedRef = useRef(true);\n\n  // Latest-ref for the callbacks and comparators, so a caller passing inline\n  // functions (all of them) does not invalidate the timer on every render.\n  const onSaveRef = useRef(onSave);\n  const onErrorRef = useRef(onError);\n  const equalsRef = useRef(equals);\n  useEffect(() => {\n    onSaveRef.current = onSave;\n    onErrorRef.current = onError;\n    equalsRef.current = equals;\n  });\n\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, []);\n\n  // A named inner function so the settle path can start the next round by calling it\n  // again; a `useCallback` cannot refer to its own binding while it is being built.\n  const flush = useCallback(() => {\n    const run = async (): Promise<void> => {\n      if (inFlightRef.current) return; // the settle path below picks the new draft up\n      const next = draftRef.current;\n      if (equalsRef.current(next, savedRef.current)) return;\n\n      inFlightRef.current = true;\n      setState(\"pending\");\n      setError(null);\n      try {\n        await onSaveRef.current(next);\n        savedRef.current = next;\n        inFlightRef.current = false;\n        if (!mountedRef.current) return;\n        // The draft may have moved while this was in the air. Compare against what is\n        // on screen NOW, not against what was sent.\n        if (equalsRef.current(draftRef.current, next)) {\n          setState(\"synced\");\n        } else {\n          setState(\"edited\");\n          void run();\n        }\n      } catch (cause) {\n        inFlightRef.current = false;\n        const err = toError(cause);\n        onErrorRef.current?.(err);\n        if (!mountedRef.current) return;\n        setState(\"error\");\n        setError(err);\n      }\n    };\n    return run();\n  }, []);\n\n  const setValue = useCallback(\n    (next: T) => {\n      draftRef.current = next;\n      setDraft(next);\n      if (timerRef.current) clearTimeout(timerRef.current);\n\n      if (equalsRef.current(next, savedRef.current)) {\n        // Typed back to what the server already has. Nothing to send, and an error\n        // from the previous attempt no longer describes anything.\n        setState(inFlightRef.current ? \"pending\" : \"synced\");\n        setError(null);\n        return;\n      }\n\n      setState(\"edited\");\n      setError(null);\n      if (debounceMs > 0) timerRef.current = setTimeout(() => void flush(), debounceMs);\n    },\n    [debounceMs, flush],\n  );\n\n  const save = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    void flush();\n  }, [flush]);\n\n  const retry = save;\n\n  const reset = useCallback(() => {\n    if (timerRef.current) clearTimeout(timerRef.current);\n    draftRef.current = savedRef.current;\n    setDraft(savedRef.current);\n    setState(inFlightRef.current ? \"pending\" : \"synced\");\n    setError(null);\n  }, []);\n\n  // Anything that is not `synced` has something not yet on the server: `edited` and\n  // `error` obviously, and `pending` too — the write is in the air, not landed.\n  // Derived from state rather than by comparing against `savedRef` during render,\n  // because a ref read here would not re-render when the comparison's answer changes.\n  const dirty = state !== \"synced\";\n\n  // Adopt a new server value ONLY when there is nothing local to lose.\n  useEffect(() => {\n    if (inFlightRef.current) return;\n    if (!equalsRef.current(draftRef.current, savedRef.current)) return; // dirty: keep it\n    if (equalsRef.current(value, savedRef.current)) return; // unchanged\n    savedRef.current = value;\n    draftRef.current = value;\n    setDraft(value);\n    setState(\"synced\");\n    setError(null);\n  }, [value]);\n\n  return { value: draft, setValue, state, error, dirty, save, retry, reset };\n}\n\nconst STATE_STYLE: Record<FieldSyncState, { color: string; Icon: typeof Check }> = {\n  synced: { color: \"var(--status-synced)\", Icon: Check },\n  edited: { color: \"var(--status-edited)\", Icon: Pencil },\n  pending: { color: \"var(--status-pending)\", Icon: Loader2 },\n  error: { color: \"var(--status-error)\", Icon: AlertCircle },\n};\n\nexport interface FieldSyncIndicatorProps {\n  state: FieldSyncState;\n  /** The failure. Its message becomes the tooltip when `state === \"error\"`. */\n  error?: Error | null;\n  /** Override any of the five English defaults. */\n  labels?: LabelOverride<FieldSyncLabels>;\n  /** Render the label beside the icon instead of only in the tooltip. Always on at\n   *  Large and Extra large (0.32, docs/text-size-harmonization.md §4 \"No fact only in a\n   *  tooltip\"): the reader who asked for bigger type gets the words, not a 14 px glyph\n   *  and a bubble. */\n  showLabel?: boolean;\n  /** When given, the error state renders a retry button after the icon. */\n  onRetry?: () => void;\n  className?: string;\n}\n\n/**\n * The affordance for {@link useFieldSync}: a coloured icon, and the reason on hover.\n *\n * **Every state has its own icon, and that is not decoration.** The four colours\n * include the green/red pair, which is the one combination this package's palette\n * otherwise refuses (see the note in `tokens.css`) because red-green colour blindness\n * affects roughly one man in twelve. The icon is what carries the meaning for them,\n * and what carries it into a greyscale print or a screenshot. WCAG 1.4.1 is the same\n * requirement stated formally.\n *\n * The state is also announced: the wrapper is a polite live region, so a screen\n * reader hears \"Saving…\" then \"Saved\" without the user going looking. `error` is\n * assertive instead — a failed write is worth interrupting for.\n */\nexport function FieldSyncIndicator({\n  state,\n  error,\n  labels,\n  showLabel = false,\n  onRetry,\n  className,\n}: FieldSyncIndicatorProps) {\n  const l = useKitLabels(\"fieldSync\", DEFAULT_FIELD_SYNC_LABELS, labels);\n  const large = useLargeText();\n  showLabel = showLabel || large;\n  const { color, Icon } = STATE_STYLE[state];\n  const text = state === \"error\" ? (error?.message?.trim() ? error.message : l.error) : l[state];\n\n  return (\n    <span\n      // The ICON carries the status colour; the words are `--text-secondary`, because\n      // the amber of `edited` is a graphic colour (3:1), not a text colour (4.5:1).\n      className={cn(\"inline-flex items-center gap-1.5 text-xs text-secondary\", className)}\n      // Polite for the three ordinary states so save chatter does not interrupt\n      // typing; assertive for a failure, which the user has to know about now.\n      role={state === \"error\" ? \"alert\" : \"status\"}\n      aria-live={state === \"error\" ? \"assertive\" : \"polite\"}\n    >\n      <Tooltip label={showLabel ? undefined : text} redact={state === \"error\"}>\n        <span className=\"inline-flex items-center gap-1.5\">\n          <Icon\n            aria-hidden\n            style={{ color }}\n            className={cn(\"size-3.5 shrink-0\", state === \"pending\" && \"animate-spin\")}\n          />\n          {/* Always in the DOM, so the live region has something to announce even\n              when the label is visually a tooltip. */}\n          <span className={showLabel ? undefined : \"sr-only\"}>{text}</span>\n        </span>\n      </Tooltip>\n      {state === \"error\" && onRetry && (\n        <button\n          type=\"button\"\n          onClick={onRetry}\n          // The kit's focus frame (0.32, §5), stood off the word.\n          className={cn(\n            \"rounded underline underline-offset-2 hover:no-underline focus-visible:ring-offset-2 focus-visible:ring-offset-surface\",\n            FOCUS_RING,\n          )}\n          style={{ color }}\n        >\n          {l.retry}\n        </button>\n      )}\n    </span>\n  );\n}\n\n/**\n * The field's own frame, coloured by state — applied from the WRAPPER to whatever\n * native control sits inside it, so {@link FieldSyncRow} works with any of the kit's\n * inputs (and a caller's own) without each one growing a `syncState` prop.\n *\n * Border AND a 1px ring, for the reason {@link FIELD_INVALID} gives: a lone 1px\n * border loses a vertical edge to sub-pixel spread at 125% display scaling. The\n * `:focus` twins are what keep the state visible while the reader is typing —\n * the base field class's `focus:` brand colour is `(0,2,0)` and would otherwise win\n * over a descendant selector exactly when the field is in use.\n *\n * `synced` is green, but {@link FieldSyncRow} paints it only for a moment after a\n * save lands — a form of eight permanently green boxes says nothing the absence of\n * colour does not.\n *\n * Every class is a literal so Tailwind's scanner can see it.\n */\nexport const FIELD_SYNC_FRAME: Record<FieldSyncState, string> = {\n  synced:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-synced)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-synced)] [&_:is(input,select,textarea):focus]:border-[var(--status-synced)] [&_:is(input,select,textarea):focus]:ring-[var(--status-synced)]\",\n  edited:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-edited)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-edited)] [&_:is(input,select,textarea):focus]:border-[var(--status-edited)] [&_:is(input,select,textarea):focus]:ring-[var(--status-edited)]\",\n  pending:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-pending)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-pending)] [&_:is(input,select,textarea):focus]:border-[var(--status-pending)] [&_:is(input,select,textarea):focus]:ring-[var(--status-pending)]\",\n  error:\n    \"[&_:is(input,select,textarea)]:border-[var(--status-error)] [&_:is(input,select,textarea)]:ring-1 [&_:is(input,select,textarea)]:ring-[var(--status-error)] [&_:is(input,select,textarea):focus]:border-[var(--status-error)] [&_:is(input,select,textarea):focus]:ring-[var(--status-error)]\",\n};\n\n/** How long the green \"saved\" frame and check stay after a save lands, in ms. */\nexport const FIELD_SYNC_SAVED_MS = 1500;\n\nexport interface FieldSyncRowProps<T> extends Omit<FieldSyncIndicatorProps, \"state\" | \"error\" | \"showLabel\"> {\n  sync: UseFieldSyncReturn<T>;\n  children: ReactNode;\n  /** Call `sync.save()` when focus leaves the field. Default true — together with the\n   *  hook's default `debounceMs: 0` this is \"save on blur\": nothing is written while\n   *  the reader is still typing, however long they pause. */\n  saveOnBlur?: boolean;\n  /** How long the saved confirmation shows. Default {@link FIELD_SYNC_SAVED_MS}. */\n  savedMs?: number;\n}\n\n/**\n * A field wearing its sync state — as its FRAME COLOUR and an ICON AT THE END OF THE\n * FIELD, so the field never changes size (a helper line appearing under it moved\n * everything below it on every save):\n *\n *   edited   amber frame, pencil          — changed, not yet saved\n *   pending  blue frame, spinning circle  — for as long as the save is in flight\n *   synced   green frame, check           — for {@link FIELD_SYNC_SAVED_MS} after a\n *                                            save lands, then an ordinary field again\n *   error    red frame, alert mark        — hover or focus the mark for the reason;\n *                                            click it to retry\n *\n * It saves when focus LEAVES the field (`saveOnBlur`), not after a pause in typing: a\n * database write in the middle of a word is a write nobody asked for. Enter in a\n * single-line field is the caller's to wire to `sync.save`.\n *\n * Colour is never the only signal: every state has its own icon, and the state text is\n * always in the DOM as a live region — polite for the ordinary states, assertive for\n * a failure. The input gets end padding for the icon whether or not one is showing,\n * so the text never reflows when the state changes.\n */\nexport function FieldSyncRow<T>({\n  sync,\n  children,\n  className,\n  labels,\n  onRetry,\n  saveOnBlur = true,\n  savedMs = FIELD_SYNC_SAVED_MS,\n}: FieldSyncRowProps<T>) {\n  const l = useKitLabels(\"fieldSync\", DEFAULT_FIELD_SYNC_LABELS, labels);\n  const { state, error } = sync;\n  const isError = state === \"error\";\n  const text = isError ? (error?.message?.trim() ? error.message : l.error) : l[state];\n  const retry = onRetry ?? sync.retry;\n\n  // The saved confirmation: on only for the moment after a save lands. Keyed on the\n  // TRANSITION pending → synced, so a field that starts synced shows nothing. The\n  // transition is seen while rendering, against the previous state; the effect only\n  // owns the timer that turns it off again.\n  const [previous, setPrevious] = useState(state);\n  const [justSaved, setJustSaved] = useState(false);\n  if (state !== previous) {\n    setPrevious(state);\n    setJustSaved(state === \"synced\" && previous === \"pending\");\n  }\n  useEffect(() => {\n    if (!justSaved) return;\n    const t = setTimeout(() => setJustSaved(false), savedMs);\n    return () => clearTimeout(t);\n  }, [justSaved, savedMs]);\n  const shown: FieldSyncState | null = state === \"synced\" ? (justSaved ? \"synced\" : null) : state;\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- not an interaction:\n       `onBlur` listens for focus leaving the row's own controls (which are the\n       interactive elements) to save; the wrapper itself is never focused. */\n    <div\n      data-field-sync={state}\n      className={cn(\n        // `relative` for the icon and for the sr-only live region's containing block.\n        \"relative [&_:is(input,select,textarea)]:pe-9\",\n        shown && FIELD_SYNC_FRAME[shown],\n        className,\n      )}\n      onBlur={\n        saveOnBlur\n          ? (e) => {\n              // Focus moving between two controls INSIDE the row is not leaving it.\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) sync.save();\n            }\n          : undefined\n      }\n    >\n      {children}\n      <span className=\"pointer-events-none absolute inset-y-0 end-0 flex items-center pe-3\">\n        {state === \"edited\" && <PencilLine aria-hidden className=\"size-4 text-[var(--status-edited)]\" />}\n        {state === \"pending\" && (\n          <Loader2\n            aria-hidden\n            className=\"size-4 animate-spin text-[var(--status-pending)] motion-reduce:animate-none\"\n          />\n        )}\n        {state === \"synced\" && (\n          <Check\n            aria-hidden\n            className={cn(\n              \"size-4 text-[var(--status-synced)] transition-opacity duration-500 motion-reduce:transition-none\",\n              justSaved ? \"opacity-100\" : \"opacity-0\",\n            )}\n          />\n        )}\n        {isError && (\n          <Tooltip label={text} portal redact>\n            <button\n              type=\"button\"\n              onClick={retry}\n              aria-label={l.retry}\n              className={cn(\n                \"pointer-events-auto flex rounded-full text-[var(--status-error)] focus-visible:ring-offset-2 focus-visible:ring-offset-surface\",\n                FOCUS_RING,\n              )}\n            >\n              <AlertCircle aria-hidden className=\"size-4\" />\n            </button>\n          </Tooltip>\n        )}\n      </span>\n      <span role={isError ? \"alert\" : \"status\"} aria-live={isError ? \"assertive\" : \"polite\"} className=\"sr-only\">\n        {shown === null ? \"\" : text}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/file-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/file-button.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, DragEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { Spinner } from \"./spinner\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { DEFAULT_FILE_PICKER_LABELS } from \"../hooks/use-file-picker-labels\";\nimport { useFilePicker, type UseFilePickerOptions } from \"../hooks/use-file-picker\";\n\n/**\n * A button that opens the file picker — the shape all three apps kept writing by hand\n * as a `<Button>` plus a hidden `<input type=\"file\">` plus a ref between them (seven\n * copies in keksdose, two each in kastlan and lenkbank).\n *\n * Every copy had to remember the same four things, and each one forgot at least one:\n *\n *  1. **Reset the input after every pick.** A file input fires `change` only when its\n *     value CHANGES, so picking the same file twice in a row — the retry after a failed\n *     upload, the second photo of the same receipt — did nothing at all, which reads as\n *     a broken button. `value = \"\"` after each pick; always, not per call site.\n *  2. **`type=\"button\"`.** `<Button>` does not set it, and inside a form a bare button\n *     submits the form before the picker opens.\n *  3. **Check the file.** `accept` filters the DIALOG, not the result: the dialog's\n *     \"All files\" switch, a drop, and a mobile share sheet all hand over whatever the\n *     user chose. So `accept` is re-checked here, along with `maxSize`, `maxFiles` and\n *     an optional `isValid`.\n *  4. **Say no without a toast.** A rejection is reported through `onReject`, with a\n *     translated message per file, and spoken through a live region — the kit does not\n *     decide how an app surfaces errors (keksdose's proposal §1 asked for exactly that).\n *\n * The part that is not a button — the hidden input, the check, the announcement — is\n * {@link useFilePicker}, for the case where the thing that opens the picker is someone\n * else's control (a card's \"Add\" action, a menu item, a second button for the camera).\n */\n\n// The picker's words, its screening and `useFilePicker` live in hooks/use-file-picker\n// since 0.34 (MOD-8, refactor audit 2026-10): useFileDrop is built on the hook, and a hook\n// importing a component module was a folder-level back-edge. Re-exported here, so every\n// import of them from this module keeps working.\nexport { DEFAULT_FILE_PICKER_LABELS };\nexport {\n  formatAccept,\n  judgePick,\n  matchesAccept,\n  screenFiles,\n  summariseRejections,\n  useFilePicker,\n} from \"../hooks/use-file-picker\";\nexport type {\n  FilePickHandler,\n  FilePickerLabels,\n  FileRejection,\n  FileRejectionReason,\n  FileScreenOptions,\n  UseFilePickerOptions,\n  UseFilePickerReturn,\n} from \"../hooks/use-file-picker\";\n\n/* ── FileButton ──────────────────────────────────────────────────────────── */\n\ntype ButtonOwnProps = ComponentPropsWithoutRef<typeof Button>;\n\nexport interface FileButtonProps\n  extends Omit<UseFilePickerOptions, \"disabled\">,\n    // `onDrop` & co. stay the caller's own when `droppable` is off; `type` is fixed to\n    // \"button\" (see 2. above) — a file trigger never submits a form.\n    Omit<ButtonOwnProps, \"type\" | \"children\" | \"accept\" | \"capture\" | \"multiple\"> {\n  /** The button's content — usually an icon and a word. It is the accessible name. */\n  children: ReactNode;\n  /** Busy: disabled, `aria-busy`, and a spinner before the content — for \"uploading\". */\n  pending?: boolean;\n  /** Also accept files dropped ON the button (lenkbank's \"drop onto the button\").\n   *  Off by default: a button that silently takes drops is a surprise on a page that\n   *  has a real drop target elsewhere. */\n  droppable?: boolean;\n  /**\n   * Show what was picked beside the button: the file's name, or \"3 files selected\"\n   * (`filePicker.selected`) for several — a native `<input type=\"file\">` says this,\n   * and a bare button that takes a file and says nothing leaves the user to trust it.\n   * The read-out is a polite live region and describes the button, so it is heard\n   * when it changes and again on focus. It holds the last ACCEPTED pick: a refused\n   * file leaves it as it was. Off by default, so the button's layout is unchanged.\n   */\n  showFileName?: boolean;\n  /**\n   * Why picking is not available — {@link Button}'s `disabledReason`, with the picker's\n   * half added (keksdose K3): the button is `aria-disabled` but stays focusable, the\n   * reason is in the kit Tooltip and its description, a click opens no picker, and a\n   * `droppable` button takes no drop (the drag is still cancelled, so the browser does\n   * not navigate to the file). Wins over `disabled`, as on Button.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This pick COMMITS — an upload that starts on pick, an attachment saved at once.\n   * Under a locked {@link WriteLockProvider} it takes the `disabledReason` path with\n   * the lock's reason (which wins over one of its own). No provider, or an unlocked\n   * one: no effect. A picker that only fills a form the user saves later is not a\n   * commit, and is left live — the form's Save carries the lock.\n   */\n  commit?: CommitScope;\n  /** The `<button>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n\n/**\n * {@link useFilePicker} behind a {@link Button}: `variant` and every other button prop\n * pass through, and the ref is the `<button>` (so `ref.current.click()` opens the\n * picker from elsewhere too).\n *\n * ```tsx\n * <FileButton accept=\"image/*,application/pdf\" capture=\"environment\" variant=\"secondary\"\n *   maxSize={10_000_000} onFiles={([f]) => upload(f)} onReject={([r]) => setError(r.message)}>\n *   <Camera aria-hidden /> Photograph receipt\n * </FileButton>\n * ```\n */\nexport function FileButton({\n  ref,\n  accept,\n  multiple,\n  capture,\n  maxSize,\n  maxFiles,\n  isValid,\n  invalidMessage,\n  onFiles,\n  onPick,\n  onReject,\n  labels,\n  pending,\n  droppable,\n  showFileName = false,\n  disabled,\n  disabledReason: ownDisabledReason,\n  commit,\n  children,\n  className,\n  onClick,\n  onDragEnter,\n  onDragOver,\n  onDragLeave,\n  onDrop,\n  ...rest\n}: FileButtonProps) {\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const inert = Boolean(disabled || pending);\n  // What takes no files: busy, disabled, or locked with a reason. Kept apart from\n  // `inert`, which is what reaches the button's NATIVE `disabled` — a locked button\n  // stays focusable (Button's `disabledReason` path), so `locked` must not get there.\n  const refusing = inert || locked;\n  const [picked, setPicked] = useState<readonly File[]>([]);\n  const pickedId = useId();\n  const pickerLabels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labels);\n  const picker = useFilePicker({\n    accept,\n    multiple,\n    capture,\n    maxSize,\n    maxFiles,\n    isValid,\n    invalidMessage,\n    onFiles: showFileName\n      ? (files) => {\n          setPicked(files);\n          onFiles?.(files);\n        }\n      : onFiles,\n    onPick,\n    onReject,\n    labels,\n    disabled: refusing,\n  });\n  const pickedText =\n    picked.length === 0 ? \"\" : picked.length === 1 ? picked[0].name : pickerLabels.selected(picked.length, picked[0].name);\n  const [dragOver, setDragOver] = useState(false);\n\n  const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes(\"Files\");\n  // Only when `droppable`: otherwise the caller's own handlers are passed untouched.\n  const dropHandlers = droppable\n    ? {\n        onDragEnter: (e: DragEvent<HTMLButtonElement>) => {\n          onDragEnter?.(e);\n          if (!hasFiles(e)) return;\n          e.preventDefault();\n          if (!refusing) setDragOver(true);\n        },\n        onDragOver: (e: DragEvent<HTMLButtonElement>) => {\n          onDragOver?.(e);\n          if (!hasFiles(e)) return;\n          // Always cancel for a file drag, busy or not: an uncancelled drop makes the\n          // browser NAVIGATE to the file, which loses the page.\n          e.preventDefault();\n          e.dataTransfer.dropEffect = refusing ? \"none\" : \"copy\";\n        },\n        onDragLeave: (e: DragEvent<HTMLButtonElement>) => {\n          onDragLeave?.(e);\n          if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;\n          setDragOver(false);\n        },\n        onDrop: (e: DragEvent<HTMLButtonElement>) => {\n          onDrop?.(e);\n          if (!hasFiles(e)) return;\n          e.preventDefault();\n          setDragOver(false);\n          picker.take(e.dataTransfer.files);\n        },\n      }\n    : { onDragEnter, onDragOver, onDragLeave, onDrop };\n\n  // `Button` is a plain function component; under React 19 `ref` is an ordinary prop\n  // and reaches the `<button>` through its `...rest`. Its props type just does not\n  // declare it, hence the widening here rather than a second button implementation.\n  const refProp = { ref } as { ref?: Ref<HTMLButtonElement> };\n\n  const button = (\n    <Button\n      {...rest}\n      {...refProp}\n      {...dropHandlers}\n      type=\"button\"\n      disabled={inert}\n      // Resolved here rather than passed on as `commit`: the picker above has to know\n      // it is locked too, and one resolution keeps the two from disagreeing.\n      disabledReason={locked ? disabledReason : undefined}\n      aria-busy={pending || undefined}\n      aria-describedby={\n        showFileName && pickedText\n          ? [rest[\"aria-describedby\"], pickedId].filter(Boolean).join(\" \")\n          : rest[\"aria-describedby\"]\n      }\n      data-drag-over={dragOver || undefined}\n      className={cn(\n        // A live drag gets the focus ring's colour as a ring: \"let go here\", in the\n        // same vocabulary the button already uses for \"you are here\".\n        dragOver && \"ring-2 ring-brand\",\n        // Beside a long file name it is the NAME that gives way, never the button.\n        showFileName && \"shrink-0\",\n        className,\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        if (!e.defaultPrevented) picker.open();\n      }}\n    >\n      {/* `label={null}`: the spinner is decoration here — `aria-busy` says the same\n          thing on the button, and a spoken \"Loading\" would run into its name. */}\n      {pending && <Spinner label={null} className=\"size-4\" />}\n      {children}\n    </Button>\n  );\n\n  if (!showFileName) {\n    return (\n      <>\n        {button}\n        {picker.element}\n      </>\n    );\n  }\n  return (\n    // One inline row, so the name sits beside the button wherever the button sits; the\n    // name truncates rather than pushing the row wider (at Normal: from Large up it wraps,\n    // `truncate-until-large`, text size §10.17), and the full list is in the\n    // kit's own Tooltip — not a native `title` (0.16.0 shipped one: the one-tooltip rule\n    // since keksdose dev#523, and a title never opens on touch). Lazy, so the closed\n    // bubble adds nothing to the read-out's text.\n    <span className=\"inline-flex max-w-full min-w-0 items-center gap-2\">\n      {button}\n      {/* The live region is the OUTER span and never remounts: a Tooltip with an empty\n          label renders no wrapper, so wrapping the region itself would swap its element\n          the moment the first file arrives — and a fresh live region may not announce. */}\n      <span\n        id={pickedId}\n        aria-live=\"polite\"\n        data-slot=\"file-button-name\"\n        className=\"flex min-w-0 text-sm text-secondary\"\n      >\n        <Tooltip label={picked.map((f) => f.name).join(\", \")} lazy className=\"min-w-0\">\n          <span className=\"block truncate-until-large\">{pickedText}</span>\n        </Tooltip>\n      </span>\n      {picker.element}\n    </span>\n  );\n}\n"],"mappings":"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","names":["useFilePicker"]}
+{"version":3,"sources":["../../src/components/file-button.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, DragEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { Spinner } from \"./spinner\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { DEFAULT_FILE_PICKER_LABELS } from \"../hooks/use-file-picker-labels\";\nimport { useFilePicker, type UseFilePickerOptions } from \"../hooks/use-file-picker\";\n\n/**\n * A button that opens the file picker — the shape all three apps kept writing by hand\n * as a `<Button>` plus a hidden `<input type=\"file\">` plus a ref between them (seven\n * copies in keksdose, two each in kastlan and lenkbank).\n *\n * Every copy had to remember the same four things, and each one forgot at least one:\n *\n *  1. **Reset the input after every pick.** A file input fires `change` only when its\n *     value CHANGES, so picking the same file twice in a row — the retry after a failed\n *     upload, the second photo of the same receipt — did nothing at all, which reads as\n *     a broken button. `value = \"\"` after each pick; always, not per call site.\n *  2. **`type=\"button\"`.** `<Button>` does not set it, and inside a form a bare button\n *     submits the form before the picker opens.\n *  3. **Check the file.** `accept` filters the DIALOG, not the result: the dialog's\n *     \"All files\" switch, a drop, and a mobile share sheet all hand over whatever the\n *     user chose. So `accept` is re-checked here, along with `maxSize`, `maxFiles` and\n *     an optional `isValid`.\n *  4. **Say no without a toast.** A rejection is reported through `onReject`, with a\n *     translated message per file, and spoken through a live region — the kit does not\n *     decide how an app surfaces errors (keksdose's proposal §1 asked for exactly that).\n *\n * The part that is not a button — the hidden input, the check, the announcement — is\n * {@link useFilePicker}, for the case where the thing that opens the picker is someone\n * else's control (a card's \"Add\" action, a menu item, a second button for the camera).\n */\n\n// The picker's words, its screening and `useFilePicker` live in hooks/use-file-picker\n// since 0.34 (MOD-8, refactor audit 2026-10): useFileDrop is built on the hook, and a hook\n// importing a component module was a folder-level back-edge. Re-exported here, so every\n// import of them from this module keeps working.\nexport { DEFAULT_FILE_PICKER_LABELS };\nexport {\n  formatAccept,\n  judgePick,\n  matchesAccept,\n  screenFiles,\n  summariseRejections,\n  useFilePicker,\n} from \"../hooks/use-file-picker\";\nexport type {\n  FilePickHandler,\n  FilePickerLabels,\n  FileRejection,\n  FileRejectionReason,\n  FileScreenOptions,\n  UseFilePickerOptions,\n  UseFilePickerReturn,\n} from \"../hooks/use-file-picker\";\n\n/* ── FileButton ──────────────────────────────────────────────────────────── */\n\ntype ButtonOwnProps = ComponentPropsWithoutRef<typeof Button>;\n\nexport interface FileButtonProps\n  extends\n    Omit<UseFilePickerOptions, \"disabled\">,\n    // `onDrop` & co. stay the caller's own when `droppable` is off; `type` is fixed to\n    // \"button\" (see 2. above) — a file trigger never submits a form.\n    Omit<ButtonOwnProps, \"type\" | \"children\" | \"accept\" | \"capture\" | \"multiple\"> {\n  /** The button's content — usually an icon and a word. It is the accessible name. */\n  children: ReactNode;\n  /** Busy: disabled, `aria-busy`, and a spinner before the content — for \"uploading\". */\n  pending?: boolean;\n  /** Also accept files dropped ON the button (lenkbank's \"drop onto the button\").\n   *  Off by default: a button that silently takes drops is a surprise on a page that\n   *  has a real drop target elsewhere. */\n  droppable?: boolean;\n  /**\n   * Show what was picked beside the button: the file's name, or \"3 files selected\"\n   * (`filePicker.selected`) for several — a native `<input type=\"file\">` says this,\n   * and a bare button that takes a file and says nothing leaves the user to trust it.\n   * The read-out is a polite live region and describes the button, so it is heard\n   * when it changes and again on focus. It holds the last ACCEPTED pick: a refused\n   * file leaves it as it was. Off by default, so the button's layout is unchanged.\n   */\n  showFileName?: boolean;\n  /**\n   * Why picking is not available — {@link Button}'s `disabledReason`, with the picker's\n   * half added (keksdose K3): the button is `aria-disabled` but stays focusable, the\n   * reason is in the kit Tooltip and its description, a click opens no picker, and a\n   * `droppable` button takes no drop (the drag is still cancelled, so the browser does\n   * not navigate to the file). Wins over `disabled`, as on Button.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * This pick COMMITS — an upload that starts on pick, an attachment saved at once.\n   * Under a locked {@link WriteLockProvider} it takes the `disabledReason` path with\n   * the lock's reason (which wins over one of its own). No provider, or an unlocked\n   * one: no effect. A picker that only fills a form the user saves later is not a\n   * commit, and is left live — the form's Save carries the lock.\n   */\n  commit?: CommitScope;\n  /** The `<button>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\n/**\n * {@link useFilePicker} behind a {@link Button}: `variant` and every other button prop\n * pass through, and the ref is the `<button>` (so `ref.current.click()` opens the\n * picker from elsewhere too).\n *\n * ```tsx\n * <FileButton accept=\"image/*,application/pdf\" capture=\"environment\" variant=\"secondary\"\n *   maxSize={10_000_000} onFiles={([f]) => upload(f)} onReject={([r]) => setError(r.message)}>\n *   <Camera aria-hidden /> Photograph receipt\n * </FileButton>\n * ```\n */\nexport function FileButton({\n  ref,\n  accept,\n  multiple,\n  capture,\n  maxSize,\n  maxFiles,\n  isValid,\n  invalidMessage,\n  onFiles,\n  onPick,\n  onReject,\n  labels,\n  pending,\n  droppable,\n  showFileName = false,\n  disabled,\n  disabledReason: ownDisabledReason,\n  commit,\n  children,\n  className,\n  onClick,\n  onDragEnter,\n  onDragOver,\n  onDragLeave,\n  onDrop,\n  ...rest\n}: FileButtonProps) {\n  const disabledReason = useCommitReason(commit, ownDisabledReason);\n  const locked = hasContent(disabledReason);\n  const inert = Boolean(disabled || pending);\n  // What takes no files: busy, disabled, or locked with a reason. Kept apart from\n  // `inert`, which is what reaches the button's NATIVE `disabled` — a locked button\n  // stays focusable (Button's `disabledReason` path), so `locked` must not get there.\n  const refusing = inert || locked;\n  const [picked, setPicked] = useState<readonly File[]>([]);\n  const pickedId = useId();\n  const pickerLabels = useKitLabels(\"filePicker\", DEFAULT_FILE_PICKER_LABELS, labels);\n  const picker = useFilePicker({\n    accept,\n    multiple,\n    capture,\n    maxSize,\n    maxFiles,\n    isValid,\n    invalidMessage,\n    onFiles: showFileName\n      ? (files) => {\n          setPicked(files);\n          onFiles?.(files);\n        }\n      : onFiles,\n    onPick,\n    onReject,\n    labels,\n    disabled: refusing,\n  });\n  const pickedText =\n    picked.length === 0\n      ? \"\"\n      : picked.length === 1\n        ? picked[0].name\n        : pickerLabels.selected(picked.length, picked[0].name);\n  const [dragOver, setDragOver] = useState(false);\n\n  const hasFiles = (e: DragEvent) => Array.from(e.dataTransfer?.types ?? []).includes(\"Files\");\n  // Only when `droppable`: otherwise the caller's own handlers are passed untouched.\n  const dropHandlers = droppable\n    ? {\n        onDragEnter: (e: DragEvent<HTMLButtonElement>) => {\n          onDragEnter?.(e);\n          if (!hasFiles(e)) return;\n          e.preventDefault();\n          if (!refusing) setDragOver(true);\n        },\n        onDragOver: (e: DragEvent<HTMLButtonElement>) => {\n          onDragOver?.(e);\n          if (!hasFiles(e)) return;\n          // Always cancel for a file drag, busy or not: an uncancelled drop makes the\n          // browser NAVIGATE to the file, which loses the page.\n          e.preventDefault();\n          e.dataTransfer.dropEffect = refusing ? \"none\" : \"copy\";\n        },\n        onDragLeave: (e: DragEvent<HTMLButtonElement>) => {\n          onDragLeave?.(e);\n          if (e.currentTarget.contains(e.relatedTarget as Node | null)) return;\n          setDragOver(false);\n        },\n        onDrop: (e: DragEvent<HTMLButtonElement>) => {\n          onDrop?.(e);\n          if (!hasFiles(e)) return;\n          e.preventDefault();\n          setDragOver(false);\n          picker.take(e.dataTransfer.files);\n        },\n      }\n    : { onDragEnter, onDragOver, onDragLeave, onDrop };\n\n  // `Button` is a plain function component; under React 19 `ref` is an ordinary prop\n  // and reaches the `<button>` through its `...rest`. Its props type just does not\n  // declare it, hence the widening here rather than a second button implementation.\n  const refProp = { ref } as { ref?: Ref<HTMLButtonElement> };\n\n  const button = (\n    <Button\n      {...rest}\n      {...refProp}\n      {...dropHandlers}\n      type=\"button\"\n      disabled={inert}\n      // Resolved here rather than passed on as `commit`: the picker above has to know\n      // it is locked too, and one resolution keeps the two from disagreeing.\n      disabledReason={locked ? disabledReason : undefined}\n      aria-busy={pending || undefined}\n      aria-describedby={\n        showFileName && pickedText\n          ? [rest[\"aria-describedby\"], pickedId].filter(Boolean).join(\" \")\n          : rest[\"aria-describedby\"]\n      }\n      data-drag-over={dragOver || undefined}\n      className={cn(\n        // A live drag gets the focus ring's colour as a ring: \"let go here\", in the\n        // same vocabulary the button already uses for \"you are here\".\n        dragOver && \"ring-2 ring-brand\",\n        // Beside a long file name it is the NAME that gives way, never the button.\n        showFileName && \"shrink-0\",\n        className,\n      )}\n      onClick={(e) => {\n        onClick?.(e);\n        if (!e.defaultPrevented) picker.open();\n      }}\n    >\n      {/* `label={null}`: the spinner is decoration here — `aria-busy` says the same\n          thing on the button, and a spoken \"Loading\" would run into its name. */}\n      {pending && <Spinner label={null} className=\"size-4\" />}\n      {children}\n    </Button>\n  );\n\n  if (!showFileName) {\n    return (\n      <>\n        {button}\n        {picker.element}\n      </>\n    );\n  }\n  return (\n    // One inline row, so the name sits beside the button wherever the button sits; the\n    // name truncates rather than pushing the row wider (at Normal: from Large up it wraps,\n    // `truncate-until-large`, text size §10.17), and the full list is in the\n    // kit's own Tooltip — not a native `title` (0.16.0 shipped one: the one-tooltip rule\n    // since keksdose dev#523, and a title never opens on touch). Lazy, so the closed\n    // bubble adds nothing to the read-out's text.\n    <span className=\"inline-flex max-w-full min-w-0 items-center gap-2\">\n      {button}\n      {/* The live region is the OUTER span and never remounts: a Tooltip with an empty\n          label renders no wrapper, so wrapping the region itself would swap its element\n          the moment the first file arrives — and a fresh live region may not announce. */}\n      <span\n        id={pickedId}\n        aria-live=\"polite\"\n        data-slot=\"file-button-name\"\n        className=\"flex min-w-0 text-sm text-secondary\"\n      >\n        <Tooltip label={picked.map((f) => f.name).join(\", \")} lazy className=\"min-w-0\">\n          <span className=\"block truncate-until-large\">{pickedText}</span>\n        </Tooltip>\n      </span>\n      {picker.element}\n    </span>\n  );\n}\n"],"mappings":";AAiOI,SAsCE,UAPY,KA/Bd;AAjOJ,SAAS,OAAO,gBAAgB;AAEhC,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,eAAe;AACxB,SAAS,eAAe;AACxB,SAAS,uBAAyC;AAClD,SAAS,kCAAkC;AAC3C,SAAS,qBAAgD;AAiCzD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAAA;AAAA,OACK;AAuEA,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,iBAAiB,gBAAgB,QAAQ,iBAAiB;AAChE,QAAM,SAAS,WAAW,cAAc;AACxC,QAAM,QAAQ,QAAQ,YAAY,OAAO;AAIzC,QAAM,WAAW,SAAS;AAC1B,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0B,CAAC,CAAC;AACxD,QAAM,WAAW,MAAM;AACvB,QAAM,eAAe,aAAa,cAAc,4BAA4B,MAAM;AAClF,QAAM,SAAS,cAAc;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,eACL,CAAC,UAAU;AACT,gBAAU,KAAK;AACf,gBAAU,KAAK;AAAA,IACjB,IACA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,aACJ,OAAO,WAAW,IACd,KACA,OAAO,WAAW,IAChB,OAAO,CAAC,EAAE,OACV,aAAa,SAAS,OAAO,QAAQ,OAAO,CAAC,EAAE,IAAI;AAC3D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,QAAM,WAAW,CAAC,MAAiB,MAAM,KAAK,EAAE,cAAc,SAAS,CAAC,CAAC,EAAE,SAAS,OAAO;AAE3F,QAAM,eAAe,YACjB;AAAA,IACE,aAAa,CAAC,MAAoC;AAChD,oBAAc,CAAC;AACf,UAAI,CAAC,SAAS,CAAC,EAAG;AAClB,QAAE,eAAe;AACjB,UAAI,CAAC,SAAU,aAAY,IAAI;AAAA,IACjC;AAAA,IACA,YAAY,CAAC,MAAoC;AAC/C,mBAAa,CAAC;AACd,UAAI,CAAC,SAAS,CAAC,EAAG;AAGlB,QAAE,eAAe;AACjB,QAAE,aAAa,aAAa,WAAW,SAAS;AAAA,IAClD;AAAA,IACA,aAAa,CAAC,MAAoC;AAChD,oBAAc,CAAC;AACf,UAAI,EAAE,cAAc,SAAS,EAAE,aAA4B,EAAG;AAC9D,kBAAY,KAAK;AAAA,IACnB;AAAA,IACA,QAAQ,CAAC,MAAoC;AAC3C,eAAS,CAAC;AACV,UAAI,CAAC,SAAS,CAAC,EAAG;AAClB,QAAE,eAAe;AACjB,kBAAY,KAAK;AACjB,aAAO,KAAK,EAAE,aAAa,KAAK;AAAA,IAClC;AAAA,EACF,IACA,EAAE,aAAa,YAAY,aAAa,OAAO;AAKnD,QAAM,UAAU,EAAE,IAAI;AAEtB,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,UAAU;AAAA,MAGV,gBAAgB,SAAS,iBAAiB;AAAA,MAC1C,aAAW,WAAW;AAAA,MACtB,oBACE,gBAAgB,aACZ,CAAC,KAAK,kBAAkB,GAAG,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,IAC7D,KAAK,kBAAkB;AAAA,MAE7B,kBAAgB,YAAY;AAAA,MAC5B,WAAW;AAAA;AAAA;AAAA,QAGT,YAAY;AAAA;AAAA,QAEZ,gBAAgB;AAAA,QAChB;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,kBAAU,CAAC;AACX,YAAI,CAAC,EAAE,iBAAkB,QAAO,KAAK;AAAA,MACvC;AAAA,MAIC;AAAA,mBAAW,oBAAC,WAAQ,OAAO,MAAM,WAAU,UAAS;AAAA,QACpD;AAAA;AAAA;AAAA,EACH;AAGF,MAAI,CAAC,cAAc;AACjB,WACE,iCACG;AAAA;AAAA,MACA,OAAO;AAAA,OACV;AAAA,EAEJ;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOE,qBAAC,UAAK,WAAU,qDACb;AAAA;AAAA,MAID;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,aAAU;AAAA,UACV,aAAU;AAAA,UACV,WAAU;AAAA,UAEV,8BAAC,WAAQ,OAAO,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,GAAG,MAAI,MAAC,WAAU,WACnE,8BAAC,UAAK,WAAU,8BAA8B,sBAAW,GAC3D;AAAA;AAAA,MACF;AAAA,MACC,OAAO;AAAA,OACV;AAAA;AAEJ;","names":["useFilePicker"]}