@eifi1/ui-kit 0.51.6 → 0.52.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-base.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  FieldCaption,\n  FLOATING_LABEL_STATIC,\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_ABOVE_BOX,\n  STATIC_LABEL_TYPE,\n  type FieldHintParts,\n} from \"./field-parts\";\nimport { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from \"./ui-labels\";\n\n/**\n * The field base: what Input, Select and Textarea — and every kit field built on the same\n * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating\n * label and its `FloatingField` box, `Label`, the chevron, and the words of the password\n * reveal and the character counter. The message under a wrong field is field-parts'\n * `useFieldError`, every field's.\n *\n * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are\n * the three fields' shared parts (`@internal`), as are the Select's own classes and its\n * `SelectWidthFloor` (0.51).\n */\n\n/**\n * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page\n * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped\n * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard\n * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard\n * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:\n * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.\n *\n * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.\n * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};\n * add it to any other text-entry control whose type is below 16 px.\n */\nexport const FIELD_TOUCH_TEXT = \"pointer-coarse:text-[length:max(0.875rem,16px)]\";\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand \" +\n  // The focus line, whole at fractional display scaling (K5 follow-up, keksdose run 78):\n  // at 125 % a 1px border covers 1.25 device pixels, and the sides that fall across a\n  // pixel boundary read half-strength. A 1px INSET ring in the focus colour beside it\n  // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the\n  // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device\n  // pixel. Inset: nothing outside the field moves or is covered.\n  \"focus:ring-1 focus:ring-inset focus:ring-brand \" +\n  // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.\n  FIELD_TOUCH_TEXT +\n  \" \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own\n  // `text-primary` overrides the browser's grey — so a read-only value\n  // sat there at full body-text strength, indistinguishable from one you could retype\n  // (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-surface-2 disabled:text-muted \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: plain\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-surface-2 [&[readonly]]:text-muted\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK = \"[&[readonly]]:bg-surface [&[readonly]]:text-primary\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2. At Large the label stands above the field (0.33, §10.17,\n// LABEL_ABOVE_AT_LARGE), so the strip goes and the field is FIELD_BASE's `py-2` again.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1 large:py-2\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives.\nexport const FIELD_INVALID =\n  \"border-danger-strong ring-1 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies in the\n * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) and the field\n * is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order. On focus the\n *    line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's\n *    inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at\n *    125 %) — where a ring would draw a box round the figure.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-start hover:bg-hover\",\n  \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n *  `<svg>`'s props, and an interface declaring no members is the same type wearing a\n *  name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n  return (\n    <ChevronDown\n      {...rest}\n      // After the spread: the chevron is decoration beside a control that already has\n      // a name, and an `aria-hidden` a caller could switch off by accident is a second\n      // announcement of the same field.\n      aria-hidden\n      className={cn(\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\", className)}\n    />\n  );\n}\n\n/** A native dropdown Select's dress: no native arrow, and `pe-9`, the room the\n *  {@link FieldChevron} takes. Shared with {@link SelectWidthFloor}. `@internal` */\nexport const SELECT_MENU_DRESS = \"appearance-none pe-9\";\n\n/** The compact Select (`size=\"sm\"`): the field's colours, a toolbar button's height.\n *  `py-0` and a fixed height rather than a smaller padding, so the box is 28px whatever\n *  line height the caller's type brings with it. Shared with {@link SelectWidthFloor}.\n *  `@internal` */\nexport const SELECT_SM = \"h-7 py-0 ps-2 pe-7 text-xs\";\n\n/**\n * The width an UNLABELLED Select needs to show the widest of `values` whole: an invisible,\n * zero-height line under it, in the select's own type, padding, chevron room and border\n * (the same classes), one value per line. Placed beside the Select in the box that sizes\n * it, it holds that box to the widest value, and the `w-full` select fills it. `@internal`\n *\n * Why it takes a sizer (0.51, Kurvenschmiede N5). A `<select>` with a percentage width\n * is a \"compressible\" element: its min-content contribution is ZERO (CSS Sizing 3\n * §5.2.2), so the auto table layout squeezes its column to the header, and beside a\n * `grow` column every other column IS squeezed to its min-content (data-table-fit.ts).\n * The user roster's role select stood 92px and read \"Meml…\" and \"Admi…\" (KS review,\n * 0.49 and 0.50). `min-width: max-content` on the select would hold it instead — but to\n * its widest OPTION, and an unavailable role's option carries its reason (\"Customer (owns\n * work)\", RoleSelect's `optionDisabledReason`): the column would widen for a text that is\n * never the selected value. So the caller says which values can be selected, in the\n * current language.\n */\nexport function SelectWidthFloor({ values, size = \"md\" }: { values: readonly string[]; size?: \"sm\" | \"md\" }) {\n  if (values.length === 0) return null;\n  return (\n    <span\n      aria-hidden\n      data-select-floor=\"\"\n      className={cn(\n        FIELD_BASE,\n        SELECT_MENU_DRESS,\n        size === \"sm\" && SELECT_SM,\n        // The horizontal box only: no height, no vertical padding or border, not painted.\n        \"invisible h-0 overflow-hidden border-y-0 py-0 whitespace-nowrap shadow-none\",\n      )}\n    >\n      {values.map((value, i) => (\n        // The value as generated content, not as text: it is laid out (and so measured)\n        // the same, but a test's `getByText(\"Member\")` still finds the one option, and a\n        // find-in-page or a copied row does not meet a word nobody sees.\n        <span key={i} data-value={value} className=\"block before:content-[attr(data-value)]\" />\n      ))}\n    </span>\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\n//\n// At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it\n// wraps; always in its floated look, since there is no strip to float into and no\n// placeholder to stand in for; no transition, since it never moves.\nconst LABEL_FLOATED_AT_LARGE = \"large:text-caption large:leading-tight large:text-secondary large:transition-none\";\n\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n  LABEL_FLOATED_AT_LARGE,\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48). At Large the row stands\n// above the field, as the label alone does, and nothing at the end edge is under it.\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-placeholder\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_FLOATED_AT_LARGE,\n);\n\n/** The static label's row with its \"?\" at the field's end, in the top strip — and at\n *  Large above the field (LABEL_ABOVE_AT_LARGE). */\nconst STATIC_ROW_CLASS = cn(\n  \"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\",\n  LABEL_ABOVE_AT_LARGE,\n);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithRef<\"div\"> {\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the end edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n  ...rest\n}: FloatingFieldProps) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  // A label drawn over the field: at Large it stands above it instead (0.33, §10.17),\n  // in the first row of this box (LABEL_ABOVE_BOX), though it FOLLOWS the control in\n  // the DOM — `peer-*` reads the input before it.\n  const above = label !== undefined && !srOnlyLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      // In the first row at Large, out of LABEL_ABOVE_BOX's rule for the field's parts.\n      data-field-label={above && !withHint ? \"\" : undefined}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate-until-large\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate-until-large\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    // `relative` is the whole contract of this wrapper — the floating label and every\n    // control that hangs off it (a reveal toggle, a chevron) are positioned against\n    // this box — so it is merged through `cn` after the spread rather than left where\n    // a caller's stray `className` or `style` could unset it. At Large, with a label\n    // above, a grid: the label's row over the field's, the field's parts in the latter.\n    <div {...rest} className={cn(\"relative\", above && LABEL_ABOVE_BOX, className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n        // the field's own end padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div data-field-label=\"\" className={atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS}>\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\nexport interface LabelProps extends ComponentPropsWithRef<\"label\"> {\n  /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n   *  screen reader hears is the control's own `required` / `aria-required`, which\n   *  the caller still sets — a \"star\" read out as the last word of every name is\n   *  noise, and a control that is not marked required is not required however its\n   *  label looks. */\n  required?: boolean;\n  /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n  size?: \"sm\" | \"md\";\n  /** Dim the label with its control. A label ABOVE its field is not the field's\n   *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n  disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n  return (\n    <label\n      {...rest}\n      className={cn(\n        \"inline-flex items-center gap-0.5 font-medium leading-none text-primary\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n      {required && (\n        <span aria-hidden className=\"text-danger\">\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\n// The message under a field that is wrong, and the wiring that attaches it — `useFieldError`\n// — lives in field-parts since 0.34, every field's (DUP-8, refactor audit 2026-10).\n\n/**\n * @internal A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nexport function FieldGroup({\n  errorEl,\n  reserve = false,\n  children,\n}: {\n  errorEl: ReactNode;\n  /** The caller passed `error`: keep the box even while there is no message. */\n  reserve?: boolean;\n  children: ReactNode;\n}) {\n  if (errorEl === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {errorEl}\n    </div>\n  );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n  /** While the value is hidden — activating the toggle will show it. */\n  show: string;\n  /** While the value is shown. */\n  hide: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_REVEAL_LABELS };\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n  /** The counter as part of the field's description, read when focus reaches the\n   *  field: \"12 of 80 characters\". */\n  count: (used: number, max: number) => string;\n  /** Said once, politely, on entering the last stretch before the limit: \"8\n   *  characters left\". */\n  remaining: (left: number) => string;\n  /** Said once, politely, on reaching the limit. */\n  limitReached: string;\n}\n\n// Defined in ./ui-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHARACTER_COUNT_LABELS };\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n *  and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n  return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** @internal The counter's length: the controlled `value`'s, else what the field has been typed\n *  to (from `defaultValue` on). `track` is called from the field's change handler. */\nexport function useTypedLength(value: unknown, defaultValue: unknown) {\n  const [typed, setTyped] = useState(() => textLength(defaultValue));\n  return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n *  left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n *  person typing means. */\nfunction nearLimitAt(max: number): number {\n  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n  if (used >= max) return \"limit\";\n  return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * @internal The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n *  - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n *  - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n *    read with the field when focus reaches it, and never while typing;\n *  - a polite live region that speaks ONCE per stretch: on entering the last tenth\n *    (\"8 characters left\") and on reaching the limit. A region that changed on every\n *    keystroke would talk over the user's own typing echo for the whole message.\n *    Nothing is said on mount: a stored note already near its limit is not news.\n */\nexport function CharacterCount({\n  id,\n  used,\n  max,\n  labels,\n  caption,\n}: {\n  id: string;\n  used: number;\n  max: number;\n  labels: CharacterCountLabels;\n  caption: ReactNode;\n}) {\n  const zone = countZone(used, max);\n  // What the live region holds, re-set only when the stretch changes — the previous\n  // render's zone kept in state, the pattern React documents for \"adjusting state when\n  // a prop changes\", so the region's text (and so the announcement) changes at most\n  // once per crossing.\n  const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n  if (said.zone !== zone) {\n    setSaid({\n      zone,\n      text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n    });\n  }\n  return (\n    // `relative` holds the sr-only region (see sr-only-containment.test).\n    <div className=\"relative mt-1 flex items-start gap-2\">\n      <div className=\"min-w-0 flex-1\">{caption}</div>\n      <span\n        aria-hidden\n        className={cn(\n          \"shrink-0 text-caption leading-tight tabular-nums\",\n          zone === \"limit\" ? \"text-danger\" : zone === \"near\" ? \"text-warning\" : \"text-muted\",\n        )}\n      >\n        {used}/{max}\n      </span>\n      <span id={id} hidden>\n        {labels.count(used, max)}\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {said.text}\n      </span>\n    </div>\n  );\n}\n\n/** @internal What goes under a text field: the caption (beside the counter, when there is one),\n *  then the error. `null` when there is nothing, so a field with none keeps exactly the\n *  DOM it had (see {@link FieldGroup}). */\nexport function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n  if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n  return (\n    <>\n      {counter ?? <FieldCaption parts={hint} />}\n      {errorEl}\n    </>\n  );\n}\n\n/**\n * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nexport const FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-placeholder\";\n\n/** @internal A placeholder with something to show. `\"\"` and blanks are the float trick's own\n *  `\" \"`, never the caller's hint. */\nexport const hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n  placeholder !== undefined && placeholder.trim() !== \"\";\n\n/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n *  labels>` > English. One place, so the namespace is named once. */\nexport function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n  return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/field-base.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport {\n  FieldCaption,\n  FLOATING_LABEL_STATIC,\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_ABOVE_BOX,\n  STATIC_LABEL_TYPE,\n  type FieldHintParts,\n} from \"./field-parts\";\nimport { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from \"./field-base-labels\";\n\n/**\n * The field base: what Input, Select and Textarea — and every kit field built on the same\n * look — share (0.34, MOD-2, refactor audit 2026-10). The `FIELD_*` classes, the floating\n * label and its `FloatingField` box, `Label`, the chevron, and the words of the password\n * reveal and the character counter. The message under a wrong field is field-parts'\n * `useFieldError`, every field's.\n *\n * Public through the barrel (src/index.ts) by name. `FieldGroup`, the counter and the\n * placeholder helpers are\n * the three fields' shared parts (`@internal`), as are the Select's own classes and its\n * `SelectWidthFloor` (0.51).\n */\n\n/**\n * The 16 px floor on touch (docs/text-size-harmonization.md §10.1). iOS zooms the page\n * when a field under 16 px takes focus, and keksdose's `maximum-scale=1` — which stopped\n * it — goes so pinch zoom works again (WCAG 1.4.4). A zoomed page drops the keyboard\n * inset to 0 (§10.2), so the zoom would put a pinned editor footer behind the keyboard\n * (keksdose #154). So on a coarse pointer a field is at least 16 px, at every text size:\n * `max()` leaves Large and Extra large alone, where `text-sm` is already 17.5 / 21 px.\n *\n * In px on purpose: the threshold is the browser's, in CSS px, whatever the root size.\n * Font size only — the line height keeps `text-sm`'s ratio. Part of {@link FIELD_BASE};\n * add it to any other text-entry control whose type is below 16 px.\n */\nexport const FIELD_TOUCH_TEXT = \"pointer-coarse:text-[length:max(0.875rem,16px)]\";\n\nexport const FIELD_BASE =\n  \"block w-full rounded-md border border-subtle bg-surface px-3 py-2 text-sm text-primary shadow-sm placeholder:text-placeholder focus:border-brand \" +\n  // The focus line, whole at fractional display scaling (K5 follow-up, keksdose run 78):\n  // at 125 % a 1px border covers 1.25 device pixels, and the sides that fall across a\n  // pixel boundary read half-strength. A 1px INSET ring in the focus colour beside it\n  // doubles the line inward — FIELD_INVALID's border-plus-ring (live #295), and the\n  // DatePicker stepper's fix (0.34) — so every side keeps one fully covered device\n  // pixel. Inset: nothing outside the field moves or is covered.\n  //\n  // Under More contrast the ring is 2px, so the line is 3px — what `--focus-ring-width`\n  // gives every `FOCUS_RING` there, and what `appearance.contrastHelp` promises (\"thickens\n  // focus frames\"); before 0.52 a text field kept its 2px (refactor audit 2026-10-30,\n  // DOC-2). Still inset, so nothing moves.\n  \"focus:ring-1 contrast:focus:ring-2 focus:ring-inset focus:ring-brand \" +\n  // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.\n  FIELD_TOUCH_TEXT +\n  \" \" +\n  // A field the user cannot change has to LOOK settled. Without this, `disabled`\n  // dimmed the floating label and nothing else — FIELD_BASE's own\n  // `text-primary` overrides the browser's grey — so a read-only value\n  // sat there at full body-text strength, indistinguishable from one you could retype\n  // (Keksdose dev#455/#474).\n  \"disabled:cursor-default disabled:bg-surface-2 disabled:text-muted \" +\n  // Same for a field that takes focus but refuses keys: `readOnly` is not\n  // `disabled`, and a value that cannot be edited should not claim it can be. Opt\n  // OUT with {@link FIELD_WRITABLE_LOOK} in the one case where `readOnly` does not\n  // mean that — see the two-factor code field, which uses it to block an autofill\n  // and drops it the moment you focus the field.\n  //\n  // ⚠️ The ATTRIBUTE, never the `:read-only` pseudo-class (Keksdose dev#477).\n  // `:read-only` does not mean \"was marked readonly\" — per Selectors 4 it matches\n  // everything that is not `:read-write`, and only editable inputs/textareas and\n  // contenteditable elements are `:read-write`. So `read-only:` matched every\n  // `<select>` in the app and every field-styled `<button>` built on this base —\n  // the native selects, the date trigger, the entity/currency/multi pickers — and\n  // painted them all in the \"you may not edit this\" grey. On one transaction form\n  // that made three different-looking families out of one field style: plain\n  // inputs, grey selects, grey trigger buttons.\n  \"[&[readonly]]:bg-surface-2 [&[readonly]]:text-muted\";\n\n/** Cancels FIELD_BASE's read-only treatment for a field that is `readOnly` for a\n *  reason other than \"you may not edit this\". Attribute-scoped for the same reason\n *  FIELD_BASE is — the two have to cancel on the identical selector or twMerge\n *  cannot make the later one win. */\nexport const FIELD_WRITABLE_LOOK = \"[&[readonly]]:bg-surface [&[readonly]]:text-primary\";\n\n// Extra top padding leaves room for a label that floats INSIDE the field (the\n// \"filled\" pattern) — the label sits in the top strip, the value below it. Used by\n// every labelled field (native + custom-dropdown triggers). twMerge lets pt/pb win\n// over FIELD_BASE's py-2. At Large the label stands above the field (0.33, §10.17,\n// LABEL_ABOVE_AT_LARGE), so the strip goes and the field is FIELD_BASE's `py-2` again.\nexport const FIELD_FLOATING_PAD = \"pt-4 pb-1 large:py-2\";\n\n// Error/required highlight for a field that is missing a value — a `--danger`\n// border and matching focus ring so the control itself shows what's wrong, not just\n// a note beside it (feedback #235). Layered after FIELD_BASE so twMerge wins.\n//\n// The `ring-1` is not decoration; it is what makes the highlight SURVIVE display\n// scaling (Keksdose live #295 — *\"Account select boundary. It is not highlighted on\n// the sides.\"*). At 125%, the browser's usual setting on a 2560px screen, a 1px CSS\n// border is 1.25 device pixels: the horizontal edges land on whole rows and paint\n// solid, while one of the two VERTICAL edges lands across a pixel boundary and is\n// spread over two columns at partial coverage. Measured on the receipt's required\n// account field, dark theme, back when this was a hard-coded rose (full =\n// rgb(208,30,78)): left/top/bottom all 208, right 160 then 115 — the side that is\n// supposed to shout, at 55–77% of the others. A border plus a ring is 2 CSS px, so\n// whatever the fraction there is always one fully covered device pixel on every side\n// (re-measured: worst side 241). It is the GEOMETRY that carries that, not the hue,\n// so the fix survives a consumer re-pointing `--danger-border`.\n//\n// A ring rather than `border-2`: a box-shadow adds no layout, so an invalid field\n// stays exactly the size of a valid one and nothing beside it moves when the value\n// arrives. Under More contrast the ring is 2px, as FIELD_BASE's focus line (0.52, DOC-2).\nexport const FIELD_INVALID =\n  \"border-danger-strong ring-1 contrast:ring-2 ring-danger-strong focus:border-[var(--danger)] focus:ring-[var(--danger)]\";\n\nexport const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, \"peer placeholder:text-transparent\");\n\n/**\n * The PHONE display treatment (Keksdose feedback #176, carried across the entry\n * forms by #179): the field chrome removed so the ONE input a form is actually\n * about reads as the thing itself, not as another boxed row in a stack.\n *\n * Every control that takes `variant=\"display\"` — {@link Input}, `NumberInput`,\n * `AmountInput` — means exactly the same thing by it: the treatment applies in the\n * phone layout (`usePhoneLayout()`, `max-md:` at the text size in force) and the field\n * is untouched above it, so a caller never has\n * to ask the viewport, and a form can't end up half-treated across breakpoints.\n *\n * What stays, deliberately:\n *  - A hairline baseline. With the box gone something still has to say \"you can\n *    type here\"; it takes the brand colour on focus, where a bordered field would\n *    light its whole outline. Each edge is set exactly once (`border-x-0\n *    border-t-0 border-b`) so the rule can't hinge on utility order. On focus the\n *    line is doubled inward by an inset shadow on that edge alone — FIELD_BASE's\n *    inset ring, for the same reason (K5 follow-up: a 1px line reads half-strength at\n *    125 %) — where a ring would draw a box round the figure.\n *  - The muted placeholder colour, because a display field is usually empty at\n *    the moment it matters most and has nothing else to show.\n *  - The label, moved to `sr-only` rather than dropped: display type is legible\n *    to the eye, not to a screen reader.\n *\n * Size and weight are NOT here — an amount wants display type, a subject line\n * wants a heading — so each control adds its own on top.\n */\nexport const FIELD_DISPLAY =\n  \"block w-full border-x-0 border-t-0 border-b border-subtle bg-transparent px-0 pt-0 pb-1 text-primary shadow-none placeholder:text-placeholder focus:border-brand focus:shadow-[inset_0_-1px_0_var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60\";\n\n// A field-styled button trigger for the custom dropdown controls (MultiSelect,\n// CurrencySelect) — the field look (border/bg) as a flex row for the value + chevron,\n// so they don't hand-copy the field classes. Add FIELD_FLOATING_PAD only when the\n// trigger carries a label (unlabelled triggers stay normal height to match buttons /\n// adjacent controls). Pair the labelled case with a static FieldLabel.\n// `relative` so the trigger can host an absolutely-centred FieldChevron / clear\n// button the way the native Select does.\n//\n// `[&>:first-child]:min-h-[1lh]` holds one line box open whatever the value is. A\n// trigger with nothing chosen and no placeholder renders an EMPTY value span, an\n// empty span has no line box, and the trigger collapsed to its padding — 18px\n// tall in a stack of 38px fields (an RhfCombobox without a placeholder; DatePicker\n// and MonthPicker had met the same thing as Keksdose live #294 and patched their\n// own span with a U+00A0). Here, on the shared class, it covers every trigger\n// built on it, including a `renderTrigger` one. `1lh` rather than a fixed height\n// so it tracks whatever type the trigger is set in; the first child is the value\n// in every trigger here (the chevron and the clear button are absolute).\nexport const FIELD_TRIGGER = cn(\n  FIELD_BASE,\n  \"relative flex items-center justify-between gap-2 text-start hover:bg-hover\",\n  \"[&>:first-child]:min-h-[1lh]\",\n);\n\n/** An alias rather than an interface: the chevron adds nothing of its own to an\n *  `<svg>`'s props, and an interface declaring no members is the same type wearing a\n *  name that suggests otherwise. */\nexport type FieldChevronProps = Omit<ComponentPropsWithRef<\"svg\">, \"children\">;\n\n/** The dropdown chevron, shared by the native {@link Select} and every custom\n * {@link FIELD_TRIGGER} control.\n *\n * Absolutely positioned and centred on the FIELD box. As an ordinary flex child\n * it centres on the *content* box instead, and `FIELD_FLOATING_PAD` (pt-4 pb-1)\n * pushes that box's midline down — so a labelled currency/multi-select chevron\n * sat visibly lower than the native select's right beside it (feedback #400).\n * Pair it with `pe-9` on the trigger so the value can't run underneath. At the\n * inline END, not the right: a right-to-left form reads the value from the right,\n * and a chevron parked on top of its first word hid exactly the part that says\n * what was picked. */\nexport function FieldChevron({ className, ...rest }: FieldChevronProps) {\n  return (\n    <ChevronDown\n      {...rest}\n      // After the spread: the chevron is decoration beside a control that already has\n      // a name, and an `aria-hidden` a caller could switch off by accident is a second\n      // announcement of the same field.\n      aria-hidden\n      className={cn(\"pointer-events-none absolute end-2.5 top-1/2 size-4 -translate-y-1/2 text-placeholder\", className)}\n    />\n  );\n}\n\n/** A native dropdown Select's dress: no native arrow, and `pe-9`, the room the\n *  {@link FieldChevron} takes. Shared with {@link SelectWidthFloor}. `@internal` */\nexport const SELECT_MENU_DRESS = \"appearance-none pe-9\";\n\n/** The compact Select (`size=\"sm\"`): the field's colours, a toolbar button's height.\n *  `py-0` and a fixed height rather than a smaller padding, so the box is 28px whatever\n *  line height the caller's type brings with it. Shared with {@link SelectWidthFloor}.\n *  `@internal` */\nexport const SELECT_SM = \"h-7 py-0 ps-2 pe-7 text-xs\";\n\n/**\n * The width an UNLABELLED Select needs to show the widest of `values` whole: an invisible,\n * zero-height line under it, in the select's own type, padding, chevron room and border\n * (the same classes), one value per line. Placed beside the Select in the box that sizes\n * it, it holds that box to the widest value, and the `w-full` select fills it. `@internal`\n *\n * Why it takes a sizer (0.51, Kurvenschmiede N5). A `<select>` with a percentage width\n * is a \"compressible\" element: its min-content contribution is ZERO (CSS Sizing 3\n * §5.2.2), so the auto table layout squeezes its column to the header, and beside a\n * `grow` column every other column IS squeezed to its min-content (data-table-fit.ts).\n * The user roster's role select stood 92px and read \"Meml…\" and \"Admi…\" (KS review,\n * 0.49 and 0.50). `min-width: max-content` on the select would hold it instead — but to\n * its widest OPTION, and an unavailable role's option carries its reason (\"Customer (owns\n * work)\", RoleSelect's `optionDisabledReason`): the column would widen for a text that is\n * never the selected value. So the caller says which values can be selected, in the\n * current language.\n */\nexport function SelectWidthFloor({ values, size = \"md\" }: { values: readonly string[]; size?: \"sm\" | \"md\" }) {\n  if (values.length === 0) return null;\n  return (\n    <span\n      aria-hidden\n      data-select-floor=\"\"\n      className={cn(\n        FIELD_BASE,\n        SELECT_MENU_DRESS,\n        size === \"sm\" && SELECT_SM,\n        // The horizontal box only: no height, no vertical padding or border, not painted.\n        \"invisible h-0 overflow-hidden border-y-0 py-0 whitespace-nowrap shadow-none\",\n      )}\n    >\n      {values.map((value, i) => (\n        // The value as generated content, not as text: it is laid out (and so measured)\n        // the same, but a test's `getByText(\"Member\")` still finds the one option, and a\n        // find-in-page or a copied row does not meet a word nobody sees.\n        <span key={i} data-value={value} className=\"block before:content-[attr(data-value)]\" />\n      ))}\n    </span>\n  );\n}\n\n// Animated label that starts centred (as a placeholder) in an empty field and\n// floats up INSIDE the top strip on focus or once the field has a value. Sits on\n// the field's own surface, so no background chip and nothing to mismatch the card.\n//\n// At Large it is a static label ABOVE the field instead (0.33, §10.17): in flow, so it\n// wraps; always in its floated look, since there is no strip to float into and no\n// placeholder to stand in for; no transition, since it never moves.\nconst LABEL_FLOATED_AT_LARGE = \"large:text-caption large:leading-tight large:text-secondary large:transition-none\";\n\nexport const FLOATING_LABEL_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 text-sm text-placeholder transition-all\",\n  \"max-w-[calc(100%-1.5rem)] truncate-until-large\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  \"large:block\",\n  LABEL_FLOATED_AT_LARGE,\n);\n\n// The animated label again, as a ROW that the label and its \"?\" share — same\n// placement, same float, same type, but with the type on the row so the label\n// INHERITS it. It has to be that way round: `peer-focus:` compiles to a sibling\n// selector, so the classes have to sit on the element that is actually a sibling\n// of the input, and a label nested inside a wrapper is not one.\n//\n// Wider end clearance than the label alone takes (`3rem` rather than `1.5rem`),\n// because the controls that carry an animated label are the ones with something\n// at the end edge of the field — NumberInput's calculator is the case this was\n// written for. The label truncates a little sooner; the alternative was the \"?\"\n// sitting on top of a button (steering-design feedback #48). At Large the row stands\n// above the field, as the label alone does, and nothing at the end edge is under it.\nconst FLOATING_ROW_CLASS = cn(\n  \"pointer-events-none absolute start-3 top-2.5 flex items-center gap-1 transition-all\",\n  \"max-w-[calc(100%-3rem)] text-sm text-placeholder\",\n  \"peer-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-secondary\",\n  \"peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-secondary\",\n  \"peer-disabled:opacity-50\",\n  LABEL_ABOVE_AT_LARGE,\n  LABEL_FLOATED_AT_LARGE,\n);\n\n/** The static label's row with its \"?\" at the field's end, in the top strip — and at\n *  Large above the field (LABEL_ABOVE_AT_LARGE). */\nconst STATIC_ROW_CLASS = cn(\n  \"pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1\",\n  LABEL_ABOVE_AT_LARGE,\n);\n\n/**\n * The one place that assembles a labelled field: a `relative` wrapper around the\n * control (`children`) plus a floating label inside the top strip. Pass `staticLabel`\n * for controls that always have a value (selects); omit it for free-text fields whose\n * label animates from centred→up. Used by Input/Select/Textarea/NumberInput; the\n * dropdown controls that need a ref + menu keep their own wrapper but the same label\n * (via {@link FieldLabel}) and trigger ({@link FIELD_TRIGGER}) styles.\n */\nexport interface FloatingFieldProps extends ComponentPropsWithRef<\"div\"> {\n  htmlFor?: string;\n  label?: ReactNode;\n  staticLabel?: boolean;\n  /** Keep the label in the accessibility tree but out of the layout — what\n   *  {@link FIELD_DISPLAY} needs, since a floating label inside a field with no\n   *  field left would have nothing to float in. */\n  srOnlyLabel?: boolean;\n  /** Something interactive that belongs to the LABEL rather than to the value —\n   *  in practice a {@link FieldHint} \"?\" (dev#468). It is rendered in a flex row\n   *  with the label, so it is centred on the label's line by the layout instead\n   *  of by a hand-tuned `top-…`, and it can never drift when the type changes.\n   *\n   *  It rides an ANIMATED label too, and the two cases place it differently on\n   *  purpose. A static label has a field-wide strip to itself, so the hint sits\n   *  at the far end of it and a long label truncates into the gap. An animated\n   *  one belongs to a control with something at the end edge of the field — a\n   *  calculator, a stepper — so the hint follows the label instead, and it is\n   *  the label that gives way (steering-design feedback #48). */\n  hint?: ReactNode;\n  children: ReactNode;\n}\n\nexport function FloatingField({\n  className,\n  htmlFor,\n  label,\n  staticLabel,\n  srOnlyLabel,\n  hint,\n  children,\n  ...rest\n}: FloatingFieldProps) {\n  const withHint = hint !== undefined && !srOnlyLabel;\n  const atEnd = withHint && staticLabel;\n  // A label drawn over the field: at Large it stands above it instead (0.33, §10.17),\n  // in the first row of this box (LABEL_ABOVE_BOX), though it FOLLOWS the control in\n  // the DOM — `peer-*` reads the input before it.\n  const above = label !== undefined && !srOnlyLabel;\n  const labelEl = label !== undefined && (\n    <label\n      htmlFor={htmlFor}\n      // In the first row at Large, out of LABEL_ABOVE_BOX's rule for the field's parts.\n      data-field-label={above && !withHint ? \"\" : undefined}\n      className={\n        srOnlyLabel\n          ? \"sr-only\"\n          : atEnd\n            ? cn(\"pointer-events-none min-w-0 truncate-until-large\", STATIC_LABEL_TYPE)\n            : withHint\n              ? \"pointer-events-none min-w-0 truncate-until-large\"\n              : staticLabel\n                ? FLOATING_LABEL_STATIC\n                : FLOATING_LABEL_CLASS\n      }\n    >\n      {label}\n    </label>\n  );\n  return (\n    // `relative` is the whole contract of this wrapper — the floating label and every\n    // control that hangs off it (a reveal toggle, a chevron) are positioned against\n    // this box — so it is merged through `cn` after the spread rather than left where\n    // a caller's stray `className` or `style` could unset it. At Large, with a label\n    // above, a grid: the label's row over the field's, the field's parts in the latter.\n    <div {...rest} className={cn(\"relative\", above && LABEL_ABOVE_BOX, className)}>\n      {children}\n      {withHint ? (\n        // Static: `inset-x-3` rather than `start-3`, so a long label truncates at\n        // the field's own end padding instead of running under the chevron.\n        // Animated: the row floats with the label and is only as wide as it needs\n        // to be. Either way the hint keeps its width (`shrink-0`) and the label\n        // is the one that gives way.\n        <div data-field-label=\"\" className={atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS}>\n          {labelEl}\n          <span className=\"pointer-events-auto flex shrink-0 items-center\">{hint}</span>\n        </div>\n      ) : (\n        labelEl\n      )}\n    </div>\n  );\n}\n\nexport interface LabelProps extends ComponentPropsWithRef<\"label\"> {\n  /** Draw the required mark after the text. The mark is `aria-hidden`: what a\n   *  screen reader hears is the control's own `required` / `aria-required`, which\n   *  the caller still sets — a \"star\" read out as the last word of every name is\n   *  noise, and a control that is not marked required is not required however its\n   *  label looks. */\n  required?: boolean;\n  /** `sm` for a toolbar or a dense filter row (12px), `md` otherwise (14px). */\n  size?: \"sm\" | \"md\";\n  /** Dim the label with its control. A label ABOVE its field is not the field's\n   *  `peer`, so `peer-disabled:` cannot reach it the way it reaches a floating one. */\n  disabled?: boolean;\n}\n\n/**\n * The label ABOVE a field, for the places a floating label does not fit: a control\n * the kit did not render (a third-party picker, a range slider, a group of radios),\n * a filter bar whose fields are unlabelled {@link Select}s, a form that sets labels\n * above its fields throughout.\n *\n * A new component rather than a mode of {@link FieldLabel}, because the two share\n * nothing but the word. `FieldLabel` is an absolutely positioned `<span>` inside a\n * trigger's `relative` box and has to stay exactly that for every dropdown that\n * already lines up with it; this is a real `<label>` in normal flow, with `htmlFor`,\n * that a click focuses the control through. Spacing below it belongs to the caller's\n * layout (`space-y-1.5` on the pair, typically), as it would for any block.\n */\nexport function Label({ required, size = \"md\", disabled, className, children, ...rest }: LabelProps) {\n  return (\n    <label\n      {...rest}\n      className={cn(\n        \"inline-flex items-center gap-0.5 font-medium leading-none text-primary\",\n        size === \"sm\" ? \"text-xs\" : \"text-sm\",\n        disabled && \"cursor-default opacity-50\",\n        className,\n      )}\n    >\n      {children}\n      {required && (\n        <span aria-hidden className=\"text-danger\">\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\n// The message under a field that is wrong, and the wiring that attaches it — `useFieldError`\n// — lives in field-parts since 0.34, every field's (DUP-8, refactor audit 2026-10).\n\n/**\n * @internal A field and its message as one box.\n *\n * The message cannot go INSIDE the field's own `relative` box. The password reveal\n * toggle is `inset-y-0` and the select chevron is `top-1/2`, so both centre on\n * whatever that box contains — put two lines of message in it and the chevron drifts\n * down out of the field, between the value and the text. So the field keeps its box\n * and this wraps the pair.\n *\n * WHEN IT WRAPS. A field that never takes `error` renders nothing of its own here,\n * which is what keeps the prop additive: it is exactly the DOM it was before the prop\n * existed, down to the bare `<input>` an unlabelled {@link Input} drops straight into a\n * caller's flex row. A field that DOES take `error` — the key is passed, whatever its\n * value — is wrapped for as long as it is mounted, message or not (`reserve`).\n *\n * It used to wrap only while a message showed, and that cost the control its\n * identity: a fragment and a `<div>` are different elements at the same spot in the\n * tree, so React threw the `<input>` away and mounted a new one every time the message\n * came or went. Focus fell to `<body>`, the caret went with it, and an uncontrolled\n * field lost what had been typed — Kurvenschmiede's confirm-password dialog clears its\n * \"Wrong password\" on change, so the first keystroke of the retry dropped the user out\n * of the field. Keeping the box stops that; the field is never reparented.\n *\n * The other ways to keep it stable were worse. A box on EVERY field changes what every\n * flex row and grid in three apps lays out (`flex-1`, `w-56`, `col-span-2` on the\n * field would land on a child of the item instead of the item). A `display: contents`\n * box would keep the flex/grid item, but a contents box takes no margin, so a parent's\n * `space-y-*` stops spacing the field — the shape of Kurvenschmiede's reset-password\n * form and gear wizard, both `space-y-*` stacks of fields with `error` — and it moves\n * `first:`/`last:`/`> *` matches. A field passing `error` already took this plain box\n * whenever its message showed, so what changes is only that it keeps it while none\n * does; every such call site in the three apps sits in a block or a `space-y`/grid\n * stack where a full-width block box is the field's own size. The case it does change\n * is a field passing `error` whose `className` sizes it as a flex item (`flex-1` in a\n * row): that caller already lost the sizing while a message showed, and now sees the\n * same box without one. Pass `error` only where a message can actually appear.\n *\n * `className` is NOT moved out here, for the same reason — it goes on the field, as it\n * always has, so the box cannot silently change what that prop styles.\n */\nexport function FieldGroup({\n  errorEl,\n  reserve = false,\n  children,\n}: {\n  errorEl: ReactNode;\n  /** The caller passed `error`: keep the box even while there is no message. */\n  reserve?: boolean;\n  children: ReactNode;\n}) {\n  if (errorEl === null && !reserve) return <>{children}</>;\n  return (\n    <div>\n      {children}\n      {errorEl}\n    </div>\n  );\n}\n\n/** The two names the password reveal toggle can wear. See {@link Input}. */\nexport interface PasswordRevealLabels {\n  /** While the value is hidden — activating the toggle will show it. */\n  show: string;\n  /** While the value is shown. */\n  hide: string;\n}\n\n// Defined in ./field-base-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_REVEAL_LABELS };\n\n/**\n * What the character counter of {@link Input} and {@link Textarea} (`showCount`) says.\n * The visible \"12/80\" is digits and a slash and is not translated; these are the words\n * a screen reader gets instead of it.\n */\nexport interface CharacterCountLabels {\n  /** The counter as part of the field's description, read when focus reaches the\n   *  field: \"12 of 80 characters\". */\n  count: (used: number, max: number) => string;\n  /** Said once, politely, on entering the last stretch before the limit: \"8\n   *  characters left\". */\n  remaining: (left: number) => string;\n  /** Said once, politely, on reaching the limit. */\n  limitReached: string;\n}\n\n// Defined in ./field-base-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_CHARACTER_COUNT_LABELS };\n\n/** The length the browser's own `maxLength` counts — UTF-16 code units — so the counter\n *  and the limit can never disagree about whether a field is full. */\nfunction textLength(value: unknown): number {\n  return value === undefined || value === null ? 0 : String(value).length;\n}\n\n/** @internal The counter's length: the controlled `value`'s, else what the field has been typed\n *  to (from `defaultValue` on). `track` is called from the field's change handler. */\nexport function useTypedLength(value: unknown, defaultValue: unknown) {\n  const [typed, setTyped] = useState(() => textLength(defaultValue));\n  return { used: value !== undefined ? textLength(value) : typed, track: (text: string) => setTyped(text.length) };\n}\n\ntype CountZone = \"ok\" | \"near\" | \"limit\";\n\n/** The last stretch before the limit: a tenth of it, at least 1 and at most 20 — \"8\n *  left\" of 80, and 20 of 2,000 rather than 200, which is not \"near\" in any sense a\n *  person typing means. */\nfunction nearLimitAt(max: number): number {\n  return Math.min(20, Math.max(1, Math.ceil(max * 0.1)));\n}\n\nfunction countZone(used: number, max: number): CountZone {\n  if (used >= max) return \"limit\";\n  return max - used <= nearLimitAt(max) ? \"near\" : \"ok\";\n}\n\n/**\n * @internal The live \"12/80\" under a field with `showCount` (keksdose K11: the admin broadcast,\n * support replies, canned replies and the handoff note each counted by hand, and one\n * announced every keystroke).\n *\n * Three channels, each saying only what it should:\n *  - the digits, `aria-hidden` — \"12 slash 80\" is not a sentence;\n *  - a `hidden` \"12 of 80 characters\" on the field's `aria-describedby`, so the count is\n *    read with the field when focus reaches it, and never while typing;\n *  - a polite live region that speaks ONCE per stretch: on entering the last tenth\n *    (\"8 characters left\") and on reaching the limit. A region that changed on every\n *    keystroke would talk over the user's own typing echo for the whole message.\n *    Nothing is said on mount: a stored note already near its limit is not news.\n */\nexport function CharacterCount({\n  id,\n  used,\n  max,\n  labels,\n  caption,\n}: {\n  id: string;\n  used: number;\n  max: number;\n  labels: CharacterCountLabels;\n  caption: ReactNode;\n}) {\n  const zone = countZone(used, max);\n  // What the live region holds, re-set only when the stretch changes — the previous\n  // render's zone kept in state, the pattern React documents for \"adjusting state when\n  // a prop changes\", so the region's text (and so the announcement) changes at most\n  // once per crossing.\n  const [said, setSaid] = useState<{ zone: CountZone; text: string }>({ zone, text: \"\" });\n  if (said.zone !== zone) {\n    setSaid({\n      zone,\n      text: zone === \"near\" ? labels.remaining(max - used) : zone === \"limit\" ? labels.limitReached : \"\",\n    });\n  }\n  return (\n    // `relative` holds the sr-only region (see sr-only-containment.test).\n    <div className=\"relative mt-1 flex items-start gap-2\">\n      <div className=\"min-w-0 flex-1\">{caption}</div>\n      <span\n        aria-hidden\n        className={cn(\n          \"shrink-0 text-caption leading-tight tabular-nums\",\n          zone === \"limit\" ? \"text-danger\" : zone === \"near\" ? \"text-warning\" : \"text-muted\",\n        )}\n      >\n        {used}/{max}\n      </span>\n      <span id={id} hidden>\n        {labels.count(used, max)}\n      </span>\n      <span role=\"status\" className=\"sr-only\">\n        {said.text}\n      </span>\n    </div>\n  );\n}\n\n/** @internal What goes under a text field: the caption (beside the counter, when there is one),\n *  then the error. `null` when there is nothing, so a field with none keeps exactly the\n *  DOM it had (see {@link FieldGroup}). */\nexport function fieldBelow(hint: FieldHintParts, counter: ReactNode, errorEl: ReactNode): ReactNode {\n  if (counter === null && hint.captionText === undefined && errorEl === null) return null;\n  return (\n    <>\n      {counter ?? <FieldCaption parts={hint} />}\n      {errorEl}\n    </>\n  );\n}\n\n/**\n * @internal kastlan 8: a caller's placeholder on a LABELLED field, shown once the label has\n * floated out of its way — on focus — and transparent until then, while the label sits\n * where the placeholder would be. Without it the field forced `placeholder=\" \"` for the\n * float trick and dropped the caller's text without a word (kastlan's \"note\" field lost\n * its hint). `:placeholder-shown` still drives the float: it matches an empty field\n * whatever the placeholder's text is.\n */\nexport const FLOATING_PLACEHOLDER_ON_FOCUS = \"focus:placeholder:text-placeholder\";\n\n/** @internal A placeholder with something to show. `\"\"` and blanks are the float trick's own\n *  `\" \"`, never the caller's hint. */\nexport const hasPlaceholderText = (placeholder: string | undefined): placeholder is string =>\n  placeholder !== undefined && placeholder.trim() !== \"\";\n\n/** @internal The counter's words: the `characterCount` namespace — prop > `<UiKitProvider\n *  labels>` > English. One place, so the namespace is named once. */\nexport function useCharacterCountLabels(prop: Partial<CharacterCountLabels> | undefined): CharacterCountLabels {\n  return useKitLabels(\"characterCount\", DEFAULT_CHARACTER_COUNT_LABELS, prop);\n}\n"],"mappings":"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","names":[]}

package/dist/components/field-sync-labels.d.ts

@@ -1,2 +1,3 @@
 import type { FieldSyncLabels } from "./field-sync.js";
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export declare const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/field-sync-labels.ts"],"sourcesContent":["// The English words of ./field-sync, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./field-sync re-exports them.\n\nimport type { FieldSyncLabels } from \"./field-sync\";\n\nexport const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels = {\n  synced: \"Saved\",\n  edited: \"Unsaved changes\",\n  pending: \"Saving…\",\n  error: \"Could not save\",\n  retry: \"Retry\",\n};\n"],"mappings":";AAMO,MAAM,4BAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT;","names":[]}
+{"version":3,"sources":["../../src/components/field-sync-labels.ts"],"sourcesContent":["// The English words of ./field-sync, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./field-sync re-exports them.\n\nimport type { FieldSyncLabels } from \"./field-sync\";\n\n/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */\nexport const DEFAULT_FIELD_SYNC_LABELS: FieldSyncLabels = {\n  synced: \"Saved\",\n  edited: \"Unsaved changes\",\n  pending: \"Saving…\",\n  error: \"Could not save\",\n  retry: \"Retry\",\n};\n"],"mappings":";AAOO,MAAM,4BAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,OAAO;AACT;","names":[]}

package/dist/components/field-sync.d.ts

@@ -16,8 +16,16 @@ import { DEFAULT_FIELD_SYNC_LABELS } from "./field-sync-labels.js";
  * because the state is useful without the dot — a form can disable its submit
  * button while any field is `pending`, and a router can block navigation while
  * any field is `edited`.
+ *
+ * Deprecated in 0.52 as a whole, removed in 0.53 (decision 4 of the refactor audit
+ * 2026-10-30, MOD-5): no app renders it or calls the hook — 483 lines and a namespace in
+ * seven catalogues that only this package's tests and showcase read. An app that wants
+ * it keeps a copy of this file.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export type FieldSyncState = "synced" | "edited" | "pending" | "error";
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface FieldSyncLabels {
     synced: string;
     edited: string;
@@ -27,6 +35,7 @@ export interface FieldSyncLabels {
     retry: string;
 }
 export { DEFAULT_FIELD_SYNC_LABELS };
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface UseFieldSyncOptions<T> {
     /** What the database currently holds. Changing it re-seeds a CLEAN field. */
     value: T;
@@ -45,6 +54,7 @@ export interface UseFieldSyncOptions<T> {
     /** Called once per rejected save, with whatever `onSave` threw. */
     onError?: (error: Error) => void;
 }
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface UseFieldSyncReturn<T> {
     /** The draft — bind this to the input, not the `value` option. */
     value: T;
@@ -78,8 +88,11 @@ export interface UseFieldSyncReturn<T> {
  *      may be gone — a row scrolled out of a virtualised table, a closed dialog.
  *   4. **`onSave` is read through a ref**, so an inline arrow — which every call
  *      site will pass — does not restart the debounce on every render.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export declare function useFieldSync<T>({ value, onSave, debounceMs, equals, onError, }: UseFieldSyncOptions<T>): UseFieldSyncReturn<T>;
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface FieldSyncIndicatorProps {
     state: FieldSyncState;
     /** The failure. Its message becomes the tooltip when `state === "error"`. */
@@ -108,6 +121,8 @@ export interface FieldSyncIndicatorProps {
  * The state is also announced: the wrapper is a polite live region, so a screen
  * reader hears "Saving…" then "Saved" without the user going looking. `error` is
  * assertive instead — a failed write is worth interrupting for.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export declare function FieldSyncIndicator({ state, error, labels, showLabel, onRetry, className, }: FieldSyncIndicatorProps): import("react").JSX.Element;
 /**
@@ -126,10 +141,15 @@ export declare function FieldSyncIndicator({ state, error, labels, showLabel, on
  * colour does not.
  *
  * Every class is a literal so Tailwind's scanner can see it.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export declare const FIELD_SYNC_FRAME: Record<FieldSyncState, string>;
-/** How long the green "saved" frame and check stay after a save lands, in ms. */
+/** How long the green "saved" frame and check stay after a save lands, in ms.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export declare const FIELD_SYNC_SAVED_MS = 1500;
+/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */
 export interface FieldSyncRowProps<T> extends Omit<FieldSyncIndicatorProps, "state" | "error" | "showLabel"> {
     sync: UseFieldSyncReturn<T>;
     children: ReactNode;
@@ -160,5 +180,7 @@ export interface FieldSyncRowProps<T> extends Omit<FieldSyncIndicatorProps, "sta
  * always in the DOM as a live region — polite for the ordinary states, assertive for
  * a failure. The input gets end padding for the icon whether or not one is showing,
  * so the text never reflows when the state changes.
+ *
+ * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.
  */
 export declare function FieldSyncRow<T>({ sync, children, className, labels, onRetry, saveOnBlur, savedMs, }: FieldSyncRowProps<T>): import("react").JSX.Element;

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 = 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":[]}
+{"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 *\n * Deprecated in 0.52 as a whole, removed in 0.53 (decision 4 of the refactor audit\n * 2026-10-30, MOD-5): no app renders it or calls the hook — 483 lines and a namespace in\n * seven catalogues that only this package's tests and showcase read. An app that wants\n * it keeps a copy of this file.\n *\n * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.\n */\nexport type FieldSyncState = \"synced\" | \"edited\" | \"pending\" | \"error\";\n\n/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */\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\n/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */\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\n/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */\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 *\n * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.\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\n/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */\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 *\n * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.\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 *\n * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.\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.\n *\n * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */\nexport const FIELD_SYNC_SAVED_MS = 1500;\n\n/** @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53. */\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 *\n * @deprecated 0.52 — none: no app uses the FieldSync family (MOD-5); removed in 0.53.\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/form-actions.js

@@ -5,7 +5,9 @@ import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { useBreakpoint, usePhoneLayout } from "../hooks/use-breakpoint.js";
 import { useLargeText } from "../hooks/use-large-text.js";
-import { isApplePlatform } from "../hooks/use-hotkey.js";
+import { isApplePlatform, matchesHotkey } from "../hooks/use-hotkey.js";
+import { isComposing } from "../lib/ime.js";
+import { hasContent } from "../lib/presence.js";
 import { Button } from "./button.js";
 import { Spinner } from "./spinner.js";
 import { mergeRefs } from "./field-parts.js";
@@ -46,6 +48,10 @@ function shortcutScope(row, formId) {
   if (named instanceof HTMLFormElement) return named;
   return row.closest("form") ?? row.closest('[role="dialog"]') ?? row.parentElement;
 }
+const SUBMIT_CHORDS = [
+  { ctrl: true, meta: false, shift: false, alt: false, key: "Enter" },
+  { ctrl: false, meta: true, shift: false, alt: false, key: "Enter" }
+];
 function isDestructiveData(value) {
   return typeof value === "object" && value !== null && !isValidElement(value) && "onClick" in value;
 }
@@ -110,8 +116,8 @@ function FormActions({
   useEffect(() => {
     if (submitShortcut !== "mod-enter") return;
     const onKeyDown = (e) => {
-      if (e.key !== "Enter" || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) return;
-      if (e.repeat || e.isComposing || e.defaultPrevented || !canSaveRef.current) return;
+      if (!SUBMIT_CHORDS.some((chord) => matchesHotkey(e, chord))) return;
+      if (e.repeat || isComposing(e) || e.defaultPrevented || !canSaveRef.current) return;
       const scope = shortcutScope(rootRef.current, form);
       if (!scope || !(e.target instanceof Node) || !scope.contains(e.target)) return;
       e.preventDefault();
@@ -123,8 +129,8 @@ function FormActions({
   const apple = submitShortcut ? isApplePlatform() : false;
   const placement = useResolvedPlacement(placementProp);
   const bleedLength = bleed === void 0 || bleed === "" ? void 0 : cssLength(bleed);
-  const hasDestructive = destructive !== void 0 && destructive !== null && destructive !== false;
-  const hasStart = startSlot !== void 0 && startSlot !== null && startSlot !== false;
+  const hasDestructive = isDestructiveData(destructive) || hasContent(destructive);
+  const hasStart = hasContent(startSlot);
   const justify = align ?? (hasDestructive || hasStart ? "between" : "end");
   const destructiveNode = !hasDestructive ? null : isDestructiveData(destructive) ? /* @__PURE__ */ jsx(
     Button,