@eifi1/ui-kit 0.53.0 → 0.55.0

package/dist/components/danger-confirm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/danger-confirm.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithRef, FormEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Label } from \"./field-base\";\nimport { Spinner } from \"./spinner\";\nimport type { ButtonVariant } from \"./button-look\";\nimport type { InputProps } from \"./input\";\nimport { Checkbox } from \"./checkbox\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { DEFAULT_DANGER_CONFIRM_LABELS } from \"./danger-confirm-labels\";\n\n/**\n * How typed text is compared with the text it has to repeat — shared by\n * `DangerConfirm`'s `phraseMatch` and `useConfirm`'s `typedMatch`.\n *\n * - `\"trim\"` ignores spaces around the typed text — a phone keyboard's autocomplete\n *   likes to add one. Case counts: \"delete\" is not \"DELETE\".\n * - `\"exact\"` compares character for character, spaces included.\n * - `\"caseless\"` trims AND ignores case: for an e-mail address, whose domain is\n *   case-insensitive and whose local part every real mail server treats so. Both apps'\n *   \"type the account's address\" rules (keksdose's `TYPE_EMAIL`, Kurvenschmiede's\n *   `TypedConfirm`) compared `trim().toLowerCase()`, and a capital the user's keyboard\n *   put at the start must not make the right row look like the wrong one.\n */\nexport type TypedMatch = \"trim\" | \"exact\" | \"caseless\";\n\n/** Whether `typed` repeats `target` under `mode` — see {@link TypedMatch}. Exported for\n *  a caller that draws its own field (a dialog that also picks a recipient) and wants\n *  the same rule as the kit's. */\nexport function typedMatches(typed: string, target: string, mode: TypedMatch = \"trim\"): boolean {\n  if (mode === \"exact\") return typed === target;\n  if (mode === \"trim\") return typed.trim() === target;\n  // `toLowerCase`, not `toLocaleLowerCase`: the comparison must not change with the\n  // reader's locale (a Turkish dotless i would otherwise fail an ASCII address).\n  return typed.trim().toLowerCase() === target.trim().toLowerCase();\n}\n\n/**\n * Busy-while-a-promise-runs, for an action that MAY return one: `run(result, onResolved)`\n * marks the caller pending until `result` settles, calls `onResolved` if it fulfilled,\n * and only clears the flag if it rejected — the caller shows why and the user retries.\n * Nothing runs after unmount. Shared by `DangerConfirm` and `ReauthDialog`, whose\n * contract is the same: resolve = done, reject = stay put.\n *\n * @internal\n */\nexport function usePromisePending() {\n  const [pending, setPending] = useState(false);\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const run = useCallback((result: unknown, onResolved: () => void): boolean => {\n    if (!result || typeof (result as Promise<unknown>).then !== \"function\") return false;\n    setPending(true);\n    (result as Promise<unknown>).then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        onResolved();\n      },\n      () => {\n        if (mounted.current) setPending(false);\n      },\n    );\n    return true;\n  }, []);\n  return { pending, run };\n}\n\n/** The one word {@link CurrentPasswordInput} says on its own behalf — the\n *  `dangerConfirm.password` label, shared with DangerConfirm's password field, so an\n *  app translates \"Password\" once. */\nexport type CurrentPasswordInputLabels = Pick<DangerConfirmLabels, \"password\">;\n\n/**\n * Everything {@link Input} takes except what makes this field what it is: `type` is\n * always `\"password\"` and `autoComplete` always `\"current-password\"`.\n */\nexport interface CurrentPasswordInputProps extends Omit<InputProps, \"type\" | \"autoComplete\" | \"label\"> {\n  /**\n   * The visible label. Default `dangerConfirm.password` (\"Password\") — unless the field\n   * is named another way (`aria-label` / `aria-labelledby`), which then stays the only\n   * name. Pass the app's own word on a sign-in form (\"Password\", \"Your password\"), or\n   * `null` for a field whose `<label htmlFor>` is drawn elsewhere (a form library's\n   * label), which would otherwise be labelled twice.\n   */\n  label?: ReactNode;\n  /** The value as a string — the `(next) => …` shape, so a caller holding it in\n   *  `useState` need not unwrap `event.target.value`. Fires alongside `onChange`,\n   *  never instead of it, so a form library's `onChange` keeps working. */\n  onValueChange?: (value: string) => void;\n  /**\n   * A check is running (the sign-in request, the re-auth). The field turns `readOnly`,\n   * NOT `disabled`: the field being submitted is usually the focused one (Enter was\n   * pressed in it), and disabling a focused field drops focus to `<body>` — the user\n   * lands nowhere when the \"wrong password\" answer comes back.\n   */\n  busy?: boolean;\n  /** Per-instance override of `dangerConfirm.password`. */\n  labels?: LabelOverride<CurrentPasswordInputLabels>;\n}\n\n/**\n * The \"prove it is you\" field: a password input that a password manager fills with\n * the CURRENT password and never offers to generate a new one for.\n *\n * It is the field of a sign-in form, a re-auth step ({@link ReauthDialog} draws the same\n * field), and {@link DangerConfirm}'s `requirePassword`. Public since 0.22 for kastlan's\n * sign-in and re-auth (kastlan 1), which wrote `type=\"password\"` +\n * `autoComplete=\"current-password\"` by hand — and a sign-in field that forgets the\n * second half gets the browser's \"suggest a strong password\" offer on the one form where\n * a NEW password is never what is wanted. The reverse matters as much: a field that sets\n * a NEW password (a passphrase, a sign-up) must NOT be this one — keksdose #170 keeps\n * its passphrase doors on `new-password` / `off` for that reason.\n *\n * Everything else is {@link Input}: the reveal toggle, `error` (under the field,\n * `aria-describedby`, `aria-invalid`), `invalid`, `name`, `id`, `autoFocus`, `required`.\n * The ref is the `<input>`, so it works with `@eifi1/ui-kit/rhf`'s `RhfField` / a\n * `register()` spread, and controlled or uncontrolled.\n *\n * ```tsx\n * <CurrentPasswordInput name=\"password\" label={t(\"password\")} error={errors.password?.message}\n *   busy={isSubmitting} {...register(\"password\")} />\n * ```\n */\nexport function CurrentPasswordInput({\n  label,\n  onValueChange,\n  onChange,\n  busy,\n  readOnly,\n  labels: labelsProp,\n  ...rest\n}: CurrentPasswordInputProps) {\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const namedOtherwise = rest[\"aria-label\"] !== undefined || rest[\"aria-labelledby\"] !== undefined;\n  return (\n    <Input\n      // `ref` (the `<input>`) rides along: a React 19 ref prop since 0.34 (MOD-4, refactor\n      // audit 2026-10), where this was `forwardRef`.\n      {...rest}\n      // After the spread: a props object spread at the field must not turn it into a\n      // text field, or into one the password manager offers a new password for.\n      type=\"password\"\n      autoComplete=\"current-password\"\n      label={\n        label === undefined ? (namedOtherwise ? undefined : labels.password) : hasContent(label) ? label : undefined\n      }\n      readOnly={Boolean(busy) || readOnly}\n      onChange={(e) => {\n        onChange?.(e);\n        onValueChange?.(e.target.value);\n      }}\n    />\n  );\n}\n\n/** The words {@link TypedConfirmField} says on its own behalf — the `dangerConfirm`\n *  namespace's `phrase` and `phrasePlaceholder`, shared with DangerConfirm's own field,\n *  so the sentence \"Type “X” to confirm\" is translated once. */\nexport type TypedConfirmFieldLabels = Pick<DangerConfirmLabels, \"phrase\" | \"phrasePlaceholder\">;\n\nexport interface TypedConfirmFieldProps extends Omit<\n  InputProps,\n  \"type\" | \"value\" | \"defaultValue\" | \"label\" | \"placeholder\"\n> {\n  /** The text to repeat — a word (\"DELETE\"), a name, an e-mail address. */\n  target: string;\n  /** How the typed text is compared with `target` — {@link TypedMatch}. Default\n   *  `\"trim\"`, as {@link typedMatches}; `\"caseless\"` for an address or an\n   *  acknowledgement word a user may type in any case. */\n  match?: TypedMatch;\n  /** Controlled value. Left out, the field keeps its own (start: `defaultValue`). */\n  value?: string;\n  defaultValue?: string;\n  /** The typed text as a string, on every keystroke. Fires alongside `onChange`. */\n  onValueChange?: (value: string) => void;\n  /**\n   * The typed text started or stopped matching `target` — fired from the keystroke\n   * that flipped it, so an uncontrolled field can still drive the button it guards. A\n   * controlled caller that resets the value itself (on a close) knows the answer\n   * already, and gets no call for that; it can also compute it with {@link typedMatches}.\n   */\n  onMatchedChange?: (matched: boolean) => void;\n  /** The label. Default `dangerConfirm.phrase(target)` — \"Type “DELETE” to confirm\". */\n  label?: ReactNode;\n  /** Text inside the empty field. Default `dangerConfirm.phrasePlaceholder` (unset).\n   *  Given, the label moves ABOVE the field: a floating label occupies the empty\n   *  field, which is exactly where a placeholder shows. `\"\"` means none. */\n  placeholder?: string;\n  /** The guarded action is running: the field turns `readOnly` (not `disabled`, which\n   *  would drop the focus Enter left in it). */\n  busy?: boolean;\n  labels?: LabelOverride<TypedConfirmFieldLabels>;\n}\n\n/**\n * The \"type this to confirm\" field — {@link DangerConfirm}'s `phrase` field and\n * `useConfirm({ requireTyped })`'s, on its own (keksdose K7).\n *\n * keksdose writes it by hand four times: the privacy enrol, upgrade and sweep dialogs\n * (type the acknowledgement word, then the key doors appear) and the admin's \"type the\n * user's address\" (`UserActionConfirm`), each an `Input` plus its own\n * `trim().toUpperCase()` / `toLowerCase()` comparison. None of those places is an\n * arm → confirm tile or a modal confirm — what is guarded is a whole form, or the\n * next step of a dialog — so the field had to stand alone. What it brings over a plain\n * `Input`: one match rule ({@link typedMatches}, which lower-cases locale-independently\n * on purpose), the label worded from the target in the app's language, and the\n * attributes a phone keyboard needs to leave the text alone (no autocomplete, no\n * auto-capital, no autocorrect, no spellcheck — a keyboard that \"corrects\" an e-mail\n * address makes the guard unpassable).\n *\n * The field reports whether it matches (`onMatchedChange`, and `data-matched` on the\n * `<input>` for styling); what the match unlocks is the caller's. The ref is the\n * `<input>`.\n *\n * ```tsx\n * const [ok, setOk] = useState(false);\n * <TypedConfirmField target={t(\"privacy.enroll_ack_word\")} match=\"caseless\" onMatchedChange={setOk} />\n * {ok && <KeyDoorsForm … />}\n * ```\n */\nexport function TypedConfirmField({\n  ref,\n  target,\n  match = \"trim\",\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onMatchedChange,\n  onChange,\n  label: labelProp,\n  placeholder: placeholderProp,\n  busy,\n  readOnly,\n  labels: labelsProp,\n  id,\n  className,\n  ...rest\n}: TypedConfirmFieldProps) {\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const [own, setOwn] = useState(defaultValue);\n  const value = valueProp ?? own;\n  const matched = typedMatches(value, target, match);\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const label =\n    labelProp !== undefined ? labelProp : typeof labels.phrase === \"function\" ? labels.phrase(target) : labels.phrase;\n  const fromLabels =\n    labels.phrasePlaceholder === undefined\n      ? undefined\n      : typeof labels.phrasePlaceholder === \"function\"\n        ? labels.phrasePlaceholder(target)\n        : labels.phrasePlaceholder;\n  const placeholder = placeholderProp ?? fromLabels;\n\n  const fieldProps = {\n    ...rest,\n    ref,\n    id: fieldId,\n    value,\n    autoComplete: \"off\",\n    autoCapitalize: \"off\",\n    autoCorrect: \"off\",\n    spellCheck: false,\n    readOnly: Boolean(busy) || readOnly,\n    \"data-matched\": matched || undefined,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e);\n      const next = e.target.value;\n      if (valueProp === undefined) setOwn(next);\n      onValueChange?.(next);\n      const nextMatched = typedMatches(next, target, match);\n      if (nextMatched !== matched) onMatchedChange?.(nextMatched);\n    },\n  };\n\n  if (placeholder) {\n    return (\n      // A static label above, so the placeholder has the empty field to itself.\n      <div className={cn(\"space-y-1.5\", className)}>\n        <Label htmlFor={fieldId}>{label}</Label>\n        <Input {...fieldProps} placeholder={placeholder} />\n      </div>\n    );\n  }\n  return <Input {...fieldProps} label={label} className={className} />;\n}\n\n/**\n * Every string the tile renders — the `dangerConfirm` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. The arm and\n * confirm buttons are usually worded per action (\"Delete budget\"), which is what the\n * `armLabel` / `confirmLabel` props are for; these are the fallbacks.\n */\nexport interface DangerConfirmLabels {\n  /** The button that arms the tile. */\n  arm: string;\n  /** The button that runs the action once the guards are satisfied. */\n  confirm: string;\n  cancel: string;\n  /** The warning above the fields, when no `prompt` is given. */\n  prompt: string;\n  /** Label of the password field (`requirePassword`). */\n  password: string;\n  /** Label of the type-to-confirm field. A FUNCTION of the phrase by default, like\n   *  every message that carries a value: where the phrase sits in the sentence moves\n   *  with the language. A plain STRING is taken as the finished label — for an app\n   *  whose catalogue already words it (\"Type DELETE to confirm\") and would otherwise\n   *  wrap it as `() => label`. */\n  phrase: string | ((phrase: string) => string);\n  /** Placeholder of the type-to-confirm field — a string, or a function of the\n   *  phrase (`(p) => p` echoes it). Optional and unset by default: the field keeps its\n   *  floating label, as before. Given, the label moves ABOVE the field (a floating\n   *  label occupies the empty field, which is exactly where a placeholder shows) and\n   *  the placeholder fills the field. An empty string means none. */\n  phrasePlaceholder?: string | ((phrase: string) => string);\n  /** 0.22: the checkbox `requireAcknowledge={true}` shows — \"I have read what this does\n   *  and want to continue\" (keksdose's `admin.users.confirm_ack`). */\n  acknowledge: string;\n  /**\n   * 0.23: why the armed confirm is held while the typed phrase does not match yet — in\n   * the confirm's tooltip and its description (keksdose G4a). A FUNCTION of the phrase\n   * by default (\"Type “DELETE” to confirm\"), or a finished STRING, as `phrase`.\n   */\n  needsPhrase: string | ((phrase: string) => string);\n  /** 0.23: why the armed confirm is held while the `requireAcknowledge` box is unticked\n   *  — \"Tick the box to confirm\". */\n  needsAcknowledge: string;\n  /** 0.23: why the armed confirm is held while the `requirePassword` field is empty —\n   *  \"Enter your password to confirm\". */\n  needsPassword: string;\n}\n\n// Defined in ./danger-confirm-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_DANGER_CONFIRM_LABELS };\n\n/**\n * What the guards were answered with — the second argument of\n * {@link DangerConfirmProps.onConfirm} (0.23, keksdose G4b). A key is there only when its\n * guard was asked for, so the object can go into a request body as it is.\n */\nexport interface DangerConfirmValues {\n  /**\n   * The text typed into the `phrase` field — as the match rule compared it: trimmed\n   * under `phraseMatch` `\"trim\"` and `\"caseless\"` (the spaces a phone keyboard adds are\n   * not part of it), exactly as typed under `\"exact\"`. The case is the user's, even\n   * under `\"caseless\"`: a server that re-checks applies its own rule to it. Absent\n   * without a `phrase`.\n   */\n  typed?: string;\n  /** The entered password — the same value as the first argument. Absent without\n   *  `requirePassword`. */\n  password?: string;\n  /** `true` when the `requireAcknowledge` box was shown — it was ticked, since the\n   *  confirm is held until it is. Absent without one. */\n  acknowledged?: true;\n}\n\n/**\n * One line of {@link DangerConfirmProps.consequences}: what the action will do. A plain\n * string, or this, for a key of its own and the `severe` mark.\n */\nexport interface DangerConsequence {\n  /** React key — keksdose keys its lines by what they say (\"api_tokens\", \"only_door\").\n   *  Default: the text when it is a string, else the position. */\n  key?: string;\n  text: ReactNode;\n  /** \"There is no way back\" — painted in the danger colour rather than the list's\n   *  muted one. keksdose reserves it for the one line that loses something for good. */\n  severe?: boolean;\n}\n\nexport interface DangerConfirmProps extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> {\n  /**\n   * Runs the action, with the entered password when `requirePassword` is on.\n   *\n   * Return a promise and the tile manages itself: busy until it settles, disarmed\n   * (fields wiped) when it resolves, still armed when it rejects — so the user can\n   * correct a wrong password and retry. The rejection is not swallowed for you to\n   * miss: handle it (and show why) in the caller, as with any mutation.\n   *\n   * 0.23: the second argument is what every guard was answered with — the typed phrase,\n   * the password, the tick ({@link DangerConfirmValues}). keksdose G4b: its admin\n   * actions send the address the admin TYPED, and the server re-checks it against the\n   * account (`assert_confirmed`), so a client that put the wrong row's id in the request\n   * is refused rather than obeyed; the tile kept the text to itself.\n   *\n   *     onConfirm={(_password, { typed }) =>\n   *       reset.mutateAsync({ id, confirm: { acknowledged: true, confirm_email: typed ?? null } })}\n   *\n   * A second argument rather than one object in place of the password: every\n   * `(password) => …` and `() => …` handler, and a `mutation.mutate` passed as it is,\n   * keeps working unchanged, and a handler that needs one guard's answer names it.\n   */\n  onConfirm: (password: string | undefined, values: DangerConfirmValues) => void | Promise<unknown>;\n  /** Show a password field; confirm is held until it is filled. */\n  requirePassword?: boolean;\n  /**\n   * Show an \"I understand\" checkbox; confirm is held until it is ticked\n   * (keksdose K7). `true` words it with `labels.acknowledge`; any other node IS the\n   * checkbox's label (\"I understand Anna will be signed out everywhere\").\n   *\n   * The guard for an action whose risk is MIS-TARGETING less than carelessness:\n   * keksdose's admin password reset asks for a typed address when the account has an\n   * encrypted door to lose, and a tick otherwise (`UserActionConfirm`), and its plan\n   * editor asks for the tick alone (`UserPlanEditor`). Both were hand-built beside this\n   * tile because it had no tick. It combines with `phrase` and `requirePassword`: every\n   * guard given must be satisfied.\n   */\n  requireAcknowledge?: ReactNode;\n  /**\n   * What the action will do, said before it happens — a list under the prompt, shown\n   * once armed (keksdose K7, `UserActionConfirm`'s consequences). Strings, or\n   * {@link DangerConsequence}s for a `severe` line in the danger colour.\n   *\n   * Derive them from the row's own facts rather than reciting the worst case: an admin\n   * who reads the same paragraph on every row stops reading it (keksdose dev#488).\n   */\n  consequences?: readonly (string | DangerConsequence)[];\n  /** Show a \"type <phrase> to confirm\" field; confirm is held until the field matches\n   *  (case-sensitive; surrounding spaces ignored unless `phraseMatch=\"exact\"`). */\n  phrase?: string;\n  /**\n   * How the typed text is compared with `phrase`. `\"trim\"` (default) ignores spaces\n   * around it — a phone keyboard's autocomplete likes to add one. `\"exact\"` compares\n   * character for character, spaces included, for an app whose contract is \"type\n   * exactly this\". `\"caseless\"` (0.18) also ignores case — for a phrase that is an\n   * e-mail address (keksdose's \"type the user's address\" admin rule). See\n   * {@link TypedMatch}.\n   */\n  phraseMatch?: TypedMatch;\n  /** The warning above the fields. Defaults to `labels.prompt`. */\n  prompt?: ReactNode;\n  /** `\"danger\"` (default) for what cannot be undone; `\"warning\"` for what can, at a\n   *  cost (loading demo data over your own). Colours the prompt, and picks the arm\n   *  button's variant and — unless {@link DangerConfirmProps.confirmVariant} is\n   *  given — the confirm's. */\n  tone?: \"danger\" | \"warning\";\n  /**\n   * The confirm button's variant, apart from `tone` (0.24, keksdose). Default: what\n   * `tone` picks, as before — `\"danger\"` for `\"danger\"`, `\"default\"` for `\"warning\"`.\n   *\n   * `tone` says how bad the outcome is; this says how loud the last press is, and the two\n   * need not agree. keksdose's `UserActionConfirm` (an admin resets somebody else's\n   * password) asks an AMBER question — what it guards against is mis-targeting, not data\n   * loss, so the danger colour stays its one `severe` consequence's — and ends in a RED\n   * Go, as its hand-built panel did before it moved onto this tile in 0.23; with only\n   * `tone`, the amber question made Go the neutral `default` fill. `tone=\"warning\"\n   * confirmVariant=\"danger\"` is that panel again.\n   */\n  confirmVariant?: ButtonVariant;\n  /**\n   * Hold the armed confirm for a reason of the CALLER's own (0.24, keksdose) — the\n   * tile's counterpart of FormActions' `submitDisabledReason`. While it has content the\n   * confirm is held exactly as by the built-in guards: `aria-disabled` but focusable,\n   * the reason in the kit {@link Tooltip} and its description, a press — or Enter in a\n   * field — does nothing. Nothing else changes: the arm button stays usable, and no\n   * line is printed under the buttons.\n   *\n   * keksdose's `UserPlanEditor` (\"move this account onto another plan\") must not confirm\n   * the plan the account already holds — the request would only write FREE → FREE into\n   * the audit trail. With no guard of its own to give, it passed \"Pick a different plan\"\n   * as `lockedReason`, which is a LOCK: documented as \"the action is not available\",\n   * spelled out under the buttons as well as in the tooltip, and meant for a write the\n   * user cannot make land. A guard the user lifts by changing a field is this prop.\n   *\n   * Which reason the held confirm names: a write lock's first (`lockedReason`, `commit`\n   * — nothing in the tile lifts it), then this one, then the built-in guards in the\n   * order they are drawn (the tick, the phrase, the password). This one before the\n   * built-ins because it is usually about a field in\n   * {@link DangerConfirmProps.children}, which is drawn ABOVE them — the rule since 0.23\n   * is \"the first open guard in the order the user meets it\" — and because it is about\n   * WHAT is being confirmed (which plan), which has to be settled before acknowledging\n   * it means anything. It is also the order keksdose's plan editor had, its\n   * `lockedReason` winning over the tick.\n   */\n  confirmDisabledReason?: ReactNode;\n  /**\n   * Fields of the caller's own, drawn INSIDE the armed tile (0.24, keksdose): after the\n   * prompt and the consequences, before the tick, the typed phrase and the password —\n   * the order is \"what this does, what to do it with, then prove you mean it\". Nothing\n   * is drawn for them while the tile is disarmed, and nothing at all without them, so a\n   * tile without children is laid out exactly as before.\n   *\n   * keksdose's `UserPlanEditor` asks WHICH plan before it asks for the tick; with no\n   * place inside the tile for the picker, the `Select` sat above it, and the tile's\n   * prompt — the panel's title by rights — became the \"FREE → PRO\" line under the\n   * picker. With the picker here, the prompt is the title again.\n   *\n   * The fields are the caller's: their values are not wiped on disarm (an uncontrolled\n   * field starts over anyway — the slot unmounts), not passed to `onConfirm`, and a\n   * guard on them is {@link DangerConfirmProps.confirmDisabledReason}. Arming moves\n   * focus to their first form field (an input, a select, a combobox, a radio…), else to\n   * the tile's own first field as before; Tab then goes on through the tick, the phrase\n   * and the password to Cancel and the confirm. They sit inside the tile's `<form>`:\n   * Enter in a text field confirms once every guard allows, and a {@link Button} among\n   * them needs `type=\"button\"` — without one it SUBMITS the form, as a native button\n   * does.\n   */\n  children?: ReactNode;\n  /** Visible text of the arm button; defaults to `labels.arm`. */\n  armLabel?: ReactNode;\n  /** Visible text of the confirm button; defaults to `labels.confirm`. */\n  confirmLabel?: ReactNode;\n  /**\n   * The action is running: confirm shows a spinner and nothing can be pressed — Cancel\n   * included. For a caller that tracks the mutation itself (a `useMutation`'s\n   * `isPending`); a promise returned from `onConfirm` does the same on its own.\n   *\n   * Cancel stays disabled ON PURPOSE, unlike FormActions' (keksdose asked in 0.24 why the\n   * two differ). Once the request has left, nothing on the client can call it back —\n   * not even an `AbortSignal`, which only stops the waiting, not the server — so a usable\n   * Cancel could only collapse the tile while the action went on: \"Cancel\" pressed, and\n   * the account reset anyway. Every way of settling what comes back is wrong somewhere: a\n   * resolve after the Cancel did what the user called off; a reject finds the fields\n   * wiped (a collapsed tile holds no password), so the 0.23 \"stay armed and retry\" is\n   * gone; and re-arming while the first request runs is either a busy tile with empty\n   * fields or — if the busy state went with the Cancel — a second destructive request\n   * beside the first. FormActions' Cancel leaves an editor whose save is the user's own\n   * edit landing, and a form can be edited again; the tile's action is the one that\n   * cannot be undone, so it says nothing it cannot keep and waits — the wait is one\n   * request long.\n   *\n   * When the action settles still armed (it failed) and the press on the confirm had\n   * dropped the focus — a natively disabled button loses it — focus comes back to the\n   * confirm, so a keyboard user can retry or Shift+Tab to the field to correct (0.24).\n   */\n  busy?: boolean;\n  /** The arm button is disabled. */\n  disabled?: boolean;\n  /**\n   * Why the action is not available — a read-only demo, a write lock, a missing\n   * permission. Disables the arm button like `disabled`, and SAYS so: the sentence is\n   * shown under the button and attached to it with `aria-describedby`, and the button\n   * stays focusable (`aria-disabled`) so a keyboard user can land on it and hear why.\n   *\n   * On the ARM button rather than the confirm: arming asks for a password, and asking\n   * for a password for a write that can never land is the worse of the two. A tile that\n   * is ALREADY armed when the reason arrives (controlled `armed`, or a lock that landed\n   * while it was open) keeps its fields but its confirm takes the reason the same way\n   * — focusable, `aria-disabled`, the reason in its tooltip — and Enter does nothing.\n   */\n  lockedReason?: ReactNode;\n  /**\n   * This tile COMMITS — the 0.18 write-lock opt-in that {@link Button} has (keksdose\n   * K3). Under a locked {@link WriteLockProvider} the lock's reason becomes\n   * `lockedReason` (and wins over one of the tile's own), so a page that mounts the\n   * provider no longer threads `lockedReason={lock.locked ? lock.reason : undefined}`\n   * into every tile. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** Controlled armed state. The parent can then collapse the tile from a mutation's\n   *  own `onSuccess` without returning a promise. */\n  armed?: boolean;\n  /** Called with the next armed state — on arm, cancel, and a resolved `onConfirm`. */\n  onArmedChange?: (armed: boolean) => void;\n  /** User-facing strings; see {@link DangerConfirmLabels}. */\n  labels?: LabelOverride<DangerConfirmLabels>;\n}\n\n/** What counts as a FIELD among the caller's `children` — what arming focuses. Not\n *  any tabbable element: a \"see the plans\" link or a disclosure button before the\n *  picker is not where the user starts. `[tabindex=\"-1\"]` is a roving radio group's\n *  unselected option; the selected one (`0`) is the group's stop. */\nconst SLOT_FIELD = [\n  'input:not([type=\"hidden\"])',\n  \"select\",\n  \"textarea\",\n  ...[\"combobox\", \"listbox\", \"radio\", \"checkbox\", \"switch\", \"slider\", \"spinbutton\", \"textbox\"].map(\n    (role) => `[role=\"${role}\"]`,\n  ),\n]\n  .map((selector) => `${selector}:not(:disabled):not([tabindex=\"-1\"]):not([aria-hidden=\"true\"])`)\n  .join(\", \");\n\n/** The first field among the caller's `children`, skipping a native radio that is not\n *  the checked one of its group (Tab lands on the checked one). */\nfunction firstSlotField(slot: HTMLElement | null): HTMLElement | null {\n  if (!slot) return null;\n  for (const el of slot.querySelectorAll<HTMLElement>(SLOT_FIELD)) {\n    if (el.closest(\"[hidden], [inert]\")) continue;\n    if (el instanceof HTMLInputElement && el.type === \"radio\" && !el.checked && el.name) {\n      const group = el.form?.elements.namedItem(el.name);\n      const checked =\n        group instanceof RadioNodeList && Array.from(group).some((r) => r instanceof HTMLInputElement && r.checked);\n      if (checked) continue;\n    }\n    return el;\n  }\n  return null;\n}\n\n/**\n * An \"arm → confirm\" tile for destructive actions: one button, which expands into a\n * warning, an optional list of consequences, optional fields of the caller's own\n * (`children`, 0.24), an optional \"I understand\" tick, an optional type-to-confirm\n * field, an optional password field and a confirm that is held until every guard is\n * satisfied — the built-in ones, and the caller's `confirmDisabledReason` (0.24).\n *\n * A held confirm SAYS which guard is still open (0.23, keksdose G4a): it is\n * `aria-disabled` rather than `disabled` — still focusable, so a keyboard user can land\n * on it — with the reason in the kit {@link Tooltip} and its description (\"Type\n * “DELETE” to confirm\", \"Tick the box to confirm\", \"Enter your password to confirm\";\n * `labels.needs*`), the first open guard in the order they are drawn. FormActions'\n * `submitDisabledReason` does the same for a form's Save. Pressing it, or Enter in a\n * field, does nothing. A lock's reason wins over a guard's, the caller's guard over the\n * built-in ones; while the action runs the confirm is plainly disabled, its spinner\n * saying why — and so is Cancel, which cannot call back a request that has left (see\n * `busy`).\n *\n * Keksdose hand-rolled it three times (load demo data, wipe everything, reset a\n * budget) and then as `shared/components/danger-confirm.tsx`; the only app-specific\n * part was its write-lock hook, which is `lockedReason` here.\n *\n * The fields are a `<form>`, so Enter confirms once the guards allow it. They are\n * wiped every time the tile disarms — a password must not sit in a collapsed tile.\n * Arming moves focus to the first field (or Cancel, when there is none — never to the\n * destructive button itself), and disarming moves it back to the arm button, so the\n * keyboard user is never left on an element that just vanished.\n */\nexport function DangerConfirm({\n  onConfirm,\n  requirePassword,\n  requireAcknowledge,\n  consequences,\n  phrase,\n  phraseMatch = \"trim\",\n  prompt,\n  tone = \"danger\",\n  confirmVariant,\n  confirmDisabledReason,\n  children,\n  armLabel,\n  confirmLabel,\n  busy: busyProp,\n  disabled,\n  lockedReason: ownLockedReason,\n  commit,\n  armed: armedProp,\n  onArmedChange,\n  labels: labelsProp,\n  className,\n  ...rest\n}: DangerConfirmProps) {\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const lockedReason = useCommitReason(commit, ownLockedReason);\n  const [armedState, setArmedState] = useState(false);\n  const armed = armedProp ?? armedState;\n  const [password, setPassword] = useState(\"\");\n  const [typed, setTyped] = useState(\"\");\n  const [acknowledged, setAcknowledged] = useState(false);\n  const { pending, run } = usePromisePending();\n  const busy = Boolean(busyProp) || pending;\n  // `readOnly` rather than `disabled` on the fields while busy: disabling the field\n  // that has focus (Enter was pressed in it) drops focus to <body>.\n  const promptId = useId();\n  const consequencesId = useId();\n  const reasonId = useId();\n\n  // The buttons focus is moved to are found by id.\n  const armId = useId();\n  const cancelId = useId();\n  const confirmId = useId();\n  const firstFieldRef = useRef<HTMLInputElement>(null);\n  // The caller's fields (`children`), searched for their first form field on arm.\n  const slotRef = useRef<HTMLDivElement>(null);\n  // Focus moves only after a transition — never on mount, so a tile that renders armed\n  // (controlled) does not take the page's focus merely by existing.\n  const moveFocus = useRef(false);\n  // A confirm from this tile is under way — see the focus return after a failure below.\n  const confirmed = useRef(false);\n\n  // A disarm from anywhere (cancel, a resolved confirm, the parent) wipes the fields.\n  // During render, like NumberField's draft, so no frame shows a collapsed tile that\n  // still holds a password.\n  const [wasArmed, setWasArmed] = useState(armed);\n  if (wasArmed !== armed) {\n    setWasArmed(armed);\n    if (!armed) {\n      setPassword(\"\");\n      setTyped(\"\");\n      setAcknowledged(false);\n    }\n  }\n\n  const prevArmed = useRef(armed);\n  useEffect(() => {\n    const changed = prevArmed.current !== armed;\n    prevArmed.current = armed;\n    const byUser = moveFocus.current;\n    moveFocus.current = false;\n    if (!changed) return;\n    if (armed) {\n      if (byUser) {\n        // The caller's fields come first on the page, so first in focus too.\n        (firstSlotField(slotRef.current) ?? firstFieldRef.current ?? document.getElementById(cancelId))?.focus();\n      }\n      return;\n    }\n    confirmed.current = false;\n    // A controlled parent collapsing the tile from its own `onSuccess` did not go\n    // through `setArmed`; if focus went down with the form, bring it back too.\n    const lost = document.activeElement === null || document.activeElement === document.body;\n    if (byUser || lost) document.getElementById(armId)?.focus();\n  }, [armed, armId, cancelId]);\n\n  // The action settled and the tile is still armed — it failed, and the user retries.\n  // The confirm was natively disabled while it ran, and a focused button that turns\n  // disabled drops the focus to <body>: bring it back to the button that was pressed.\n  // Only after a confirm from THIS tile (`confirmed`), so a `busy` that comes and goes\n  // on its own never pulls the page's focus in. (A resolve disarms, and the effect\n  // above takes the focus to the arm button.)\n  const wasBusy = useRef(busy);\n  useEffect(() => {\n    const settled = wasBusy.current && !busy;\n    wasBusy.current = busy;\n    if (!settled) return;\n    const ours = confirmed.current;\n    confirmed.current = false;\n    if (!ours || !armed) return;\n    if (document.activeElement === null || document.activeElement === document.body) {\n      document.getElementById(confirmId)?.focus();\n    }\n  }, [busy, armed, confirmId]);\n\n  const setArmed = (next: boolean) => {\n    moveFocus.current = true;\n    if (armedProp === undefined) setArmedState(next);\n    onArmedChange?.(next);\n  };\n\n  const locked = hasContent(lockedReason);\n  // `true` words the tick with the namespace; any other node is its label; `false`,\n  // `null` and `\"\"` are no tick at all.\n  const acknowledgeLabel: ReactNode =\n    requireAcknowledge === true ? labels.acknowledge : hasContent(requireAcknowledge) ? requireAcknowledge : null;\n  const asksAcknowledge = acknowledgeLabel !== null;\n  const passwordOk = !requirePassword || password !== \"\";\n  const phraseOk = phrase === undefined || typedMatches(typed, phrase, phraseMatch);\n  const acknowledgeOk = !asksAcknowledge || acknowledged;\n  const callerHeld = hasContent(confirmDisabledReason);\n  // `{cond && <Select />}` and `[null, false]` are no fields: no wrapper, no gap.\n  const hasFields = Children.toArray(children).some(hasContent);\n  const canConfirm = passwordOk && phraseOk && acknowledgeOk && !callerHeld && !busy;\n  // The first guard still open, in the order the fields are drawn — the one the user\n  // meets next, so the sentence points at it.\n  const guardReason: string | undefined = !acknowledgeOk\n    ? labels.needsAcknowledge\n    : !phraseOk\n      ? typeof labels.needsPhrase === \"function\"\n        ? labels.needsPhrase(phrase ?? \"\")\n        : labels.needsPhrase\n      : !passwordOk\n        ? labels.needsPassword\n        : undefined;\n  // The lock first (no guard can lift it); none while busy, when the guards were met and\n  // the spinner is the state; then the caller's guard — about the fields drawn above the\n  // built-in ones, and about WHAT is confirmed — then the first built-in guard still open.\n  const confirmReason: ReactNode = locked\n    ? lockedReason\n    : busy\n      ? undefined\n      : callerHeld\n        ? confirmDisabledReason\n        : guardReason;\n\n  const submit = (e: FormEvent) => {\n    e.preventDefault();\n    // `locked` too: Enter in a field submits the form without the button's say (and\n    // `canConfirm` holds the caller's guard the same way).\n    if (!canConfirm || locked) return;\n    const values: DangerConfirmValues = {\n      ...(phrase !== undefined && { typed: phraseMatch === \"exact\" ? typed : typed.trim() }),\n      ...(requirePassword && { password }),\n      ...(asksAcknowledge && { acknowledged: true as const }),\n    };\n    confirmed.current = true;\n    // Disarms when it resolves; a rejection leaves it armed, fields kept: the caller\n    // shows why, the user retries.\n    run(onConfirm(values.password, values), () => setArmed(false));\n  };\n\n  // The first field takes focus on arm: the tick, then the phrase, then the password —\n  // the order they are drawn in.\n  const firstField = asksAcknowledge ? \"acknowledge\" : phrase !== undefined ? \"phrase\" : \"password\";\n  const lines = (consequences ?? []).map((item, index) =>\n    typeof item === \"string\"\n      ? { key: item, text: item as ReactNode, severe: false }\n      : { key: item.key ?? String(index), text: item.text, severe: Boolean(item.severe) },\n  );\n\n  const toneText = tone === \"warning\" ? \"text-warning\" : \"text-danger\";\n\n  if (!armed) {\n    const arm = (\n      <Button\n        id={armId}\n        type=\"button\"\n        variant={tone === \"warning\" ? \"secondary\" : \"danger\"}\n        disabled={disabled}\n        aria-disabled={locked || undefined}\n        aria-describedby={locked ? reasonId : undefined}\n        onClick={() => {\n          if (!locked) setArmed(true);\n        }}\n        className=\"aria-disabled:cursor-not-allowed aria-disabled:opacity-50\"\n      >\n        {armLabel ?? labels.arm}\n      </Button>\n    );\n    return (\n      <div {...rest} className={cn(\"space-y-1\", className)}>\n        {locked ? (\n          // The reason on the button itself too, where the pointer that tried it is —\n          // the line below can sit out of view in a long settings card. Portalled, so\n          // a card that scrolls neither clips it nor grows by it.\n          //\n          // The button in a FRAGMENT on purpose: Tooltip clones an element child to\n          // add the bubble to its `aria-describedby`, and the button is already\n          // described by the visible line below — the same sentence twice, read out\n          // on every focus. A fragment is left as it is, so the bubble stays visual.\n          <Tooltip label={lockedReason} portal>\n            <>{arm}</>\n          </Tooltip>\n        ) : (\n          arm\n        )}\n        {locked && (\n          <p id={reasonId} className=\"text-xs text-muted\">\n            {lockedReason}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"space-y-2\", className)}>\n      <form\n        className=\"space-y-2\"\n        aria-describedby={lines.length > 0 ? `${promptId} ${consequencesId}` : promptId}\n        aria-busy={busy || undefined}\n        onSubmit={submit}\n        noValidate\n      >\n        <p id={promptId} className={cn(\"text-xs font-medium\", toneText)}>\n          {prompt ?? labels.prompt}\n        </p>\n        {lines.length > 0 && (\n          <ul id={consequencesId} className=\"list-disc space-y-1 ps-5 text-xs text-secondary\">\n            {lines.map((line) => (\n              <li key={line.key} className={line.severe ? \"text-danger\" : undefined}>\n                {line.text}\n              </li>\n            ))}\n          </ul>\n        )}\n        {/* The caller's fields: after what the action does, before the proof that it is\n            meant. No wrapper without them — a 0.23 tile's markup is unchanged. */}\n        {hasFields && (\n          <div ref={slotRef} className=\"space-y-2\">\n            {children}\n          </div>\n        )}\n        {asksAcknowledge && (\n          <Checkbox\n            ref={firstField === \"acknowledge\" ? firstFieldRef : undefined}\n            label={acknowledgeLabel}\n            checked={acknowledged}\n            // Not `disabled` while busy, for the same reason the fields are readOnly:\n            // the box may hold the focus. A change while busy is simply not taken.\n            onCheckedChange={(next) => {\n              if (!busy) setAcknowledged(next);\n            }}\n          />\n        )}\n        {phrase !== undefined && (\n          <TypedConfirmField\n            ref={firstField === \"phrase\" ? firstFieldRef : undefined}\n            target={phrase}\n            match={phraseMatch}\n            value={typed}\n            onValueChange={setTyped}\n            busy={busy}\n            // Already resolved through this tile's own `labels` prop; handed on so a\n            // per-instance phrase wording reaches the field.\n            labels={{ phrase: labels.phrase, phrasePlaceholder: labels.phrasePlaceholder }}\n          />\n        )}\n        {requirePassword && (\n          <CurrentPasswordInput\n            ref={firstField === \"password\" ? firstFieldRef : undefined}\n            label={labels.password}\n            value={password}\n            busy={busy}\n            onValueChange={setPassword}\n          />\n        )}\n        <div className=\"flex flex-wrap gap-2\">\n          <Button id={cancelId} type=\"button\" variant=\"ghost\" disabled={busy} onClick={() => setArmed(false)}>\n            {labels.cancel}\n          </Button>\n          <Button\n            id={confirmId}\n            type=\"submit\"\n            variant={confirmVariant ?? (tone === \"warning\" ? \"default\" : \"danger\")}\n            disabled={!canConfirm}\n            // Held by a guard (the caller's or a built-in one), or armed and then locked\n            // (or rendered armed under a lock): the confirm says why the way Button\n            // does — focusable, `aria-disabled`, the reason in its tooltip and\n            // description, a press swallowed (the submit with it) — and the fields stay\n            // as typed. Only busy is the native `disabled`.\n            disabledReason={confirmReason}\n            aria-busy={busy || undefined}\n          >\n            {busy && <Spinner label={null} className=\"h-4 w-4\" />}\n            {confirmLabel ?? labels.confirm}\n          </Button>\n        </div>\n        {locked && <p className=\"text-xs text-muted\">{lockedReason}</p>}\n      </form>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/danger-confirm.tsx"],"sourcesContent":["import { Children, useCallback, useEffect, useId, useRef, useState } from \"react\";\nimport type { ChangeEvent, ComponentPropsWithRef, FormEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { hasContent } from \"../lib/presence\";\nimport { returnFocus } from \"../lib/focus-left\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { Label } from \"./field-base\";\nimport { FIELD_ERROR_CLASS } from \"./field-parts\";\nimport { Spinner } from \"./spinner\";\nimport type { ButtonVariant } from \"./button-look\";\nimport type { InputProps } from \"./input\";\nimport { Checkbox } from \"./checkbox\";\nimport { Tooltip } from \"./tooltip\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport { DEFAULT_DANGER_CONFIRM_LABELS } from \"./danger-confirm-labels\";\n\n/**\n * How typed text is compared with the text it has to repeat — shared by\n * `DangerConfirm`'s `phraseMatch` and `useConfirm`'s `typedMatch`.\n *\n * - `\"trim\"` ignores spaces around the typed text — a phone keyboard's autocomplete\n *   likes to add one. Case counts: \"delete\" is not \"DELETE\".\n * - `\"exact\"` compares character for character, spaces included.\n * - `\"caseless\"` trims AND ignores case: for an e-mail address, whose domain is\n *   case-insensitive and whose local part every real mail server treats so. Both apps'\n *   \"type the account's address\" rules (keksdose's `TYPE_EMAIL`, Kurvenschmiede's\n *   `TypedConfirm`) compared `trim().toLowerCase()`, and a capital the user's keyboard\n *   put at the start must not make the right row look like the wrong one.\n */\nexport type TypedMatch = \"trim\" | \"exact\" | \"caseless\";\n\n/** Whether `typed` repeats `target` under `mode` — see {@link TypedMatch}. Exported for\n *  a caller that draws its own field (a dialog that also picks a recipient) and wants\n *  the same rule as the kit's. */\nexport function typedMatches(typed: string, target: string, mode: TypedMatch = \"trim\"): boolean {\n  if (mode === \"exact\") return typed === target;\n  if (mode === \"trim\") return typed.trim() === target;\n  // `toLowerCase`, not `toLocaleLowerCase`: the comparison must not change with the\n  // reader's locale (a Turkish dotless i would otherwise fail an ASCII address).\n  return typed.trim().toLowerCase() === target.trim().toLowerCase();\n}\n\n/**\n * Busy-while-a-promise-runs, for an action that MAY return one: `run(result, onResolved)`\n * marks the caller pending until `result` settles, calls `onResolved` if it fulfilled,\n * and only clears the flag if it rejected — the caller shows why and the user retries.\n * Nothing runs after unmount. Shared by `DangerConfirm` and `ReauthDialog`, whose\n * contract is the same: resolve = done, reject = stay put.\n *\n * @internal\n */\nexport function usePromisePending() {\n  const [pending, setPending] = useState(false);\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n  const run = useCallback((result: unknown, onResolved: () => void): boolean => {\n    if (!result || typeof (result as Promise<unknown>).then !== \"function\") return false;\n    setPending(true);\n    (result as Promise<unknown>).then(\n      () => {\n        if (!mounted.current) return;\n        setPending(false);\n        onResolved();\n      },\n      () => {\n        if (mounted.current) setPending(false);\n      },\n    );\n    return true;\n  }, []);\n  return { pending, run };\n}\n\n/** The one word {@link CurrentPasswordInput} says on its own behalf — the\n *  `dangerConfirm.password` label, shared with DangerConfirm's password field, so an\n *  app translates \"Password\" once. */\nexport type CurrentPasswordInputLabels = Pick<DangerConfirmLabels, \"password\">;\n\n/**\n * Everything {@link Input} takes except what makes this field what it is: `type` is\n * always `\"password\"` and `autoComplete` always `\"current-password\"`.\n */\nexport interface CurrentPasswordInputProps extends Omit<InputProps, \"type\" | \"autoComplete\" | \"label\"> {\n  /**\n   * The visible label. Default `dangerConfirm.password` (\"Password\") — unless the field\n   * is named another way (`aria-label` / `aria-labelledby`), which then stays the only\n   * name. Pass the app's own word on a sign-in form (\"Password\", \"Your password\"), or\n   * `null` for a field whose `<label htmlFor>` is drawn elsewhere (a form library's\n   * label), which would otherwise be labelled twice.\n   */\n  label?: ReactNode;\n  /** The value as a string — the `(next) => …` shape, so a caller holding it in\n   *  `useState` need not unwrap `event.target.value`. Fires alongside `onChange`,\n   *  never instead of it, so a form library's `onChange` keeps working. */\n  onValueChange?: (value: string) => void;\n  /**\n   * A check is running (the sign-in request, the re-auth). The field turns `readOnly`,\n   * NOT `disabled`: the field being submitted is usually the focused one (Enter was\n   * pressed in it), and disabling a focused field drops focus to `<body>` — the user\n   * lands nowhere when the \"wrong password\" answer comes back.\n   */\n  busy?: boolean;\n  /** Per-instance override of `dangerConfirm.password`. */\n  labels?: LabelOverride<CurrentPasswordInputLabels>;\n}\n\n/**\n * The \"prove it is you\" field: a password input that a password manager fills with\n * the CURRENT password and never offers to generate a new one for.\n *\n * It is the field of a sign-in form, a re-auth step ({@link ReauthDialog} draws the same\n * field), and {@link DangerConfirm}'s `requirePassword`. Public since 0.22 for kastlan's\n * sign-in and re-auth (kastlan 1), which wrote `type=\"password\"` +\n * `autoComplete=\"current-password\"` by hand — and a sign-in field that forgets the\n * second half gets the browser's \"suggest a strong password\" offer on the one form where\n * a NEW password is never what is wanted. The reverse matters as much: a field that sets\n * a NEW password (a passphrase, a sign-up) must NOT be this one — keksdose #170 keeps\n * its passphrase doors on `new-password` / `off` for that reason.\n *\n * Everything else is {@link Input}: the reveal toggle, `error` (under the field,\n * `aria-describedby`, `aria-invalid`), `invalid`, `name`, `id`, `autoFocus`, `required`.\n * The ref is the `<input>`, so it works with `@eifi1/ui-kit/rhf`'s `RhfField` / a\n * `register()` spread, and controlled or uncontrolled.\n *\n * ```tsx\n * <CurrentPasswordInput name=\"password\" label={t(\"password\")} error={errors.password?.message}\n *   busy={isSubmitting} {...register(\"password\")} />\n * ```\n */\nexport function CurrentPasswordInput({\n  label,\n  onValueChange,\n  onChange,\n  busy,\n  readOnly,\n  labels: labelsProp,\n  ...rest\n}: CurrentPasswordInputProps) {\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const namedOtherwise = rest[\"aria-label\"] !== undefined || rest[\"aria-labelledby\"] !== undefined;\n  return (\n    <Input\n      // `ref` (the `<input>`) rides along: a React 19 ref prop since 0.34 (MOD-4, refactor\n      // audit 2026-10), where this was `forwardRef`.\n      {...rest}\n      // After the spread: a props object spread at the field must not turn it into a\n      // text field, or into one the password manager offers a new password for.\n      type=\"password\"\n      autoComplete=\"current-password\"\n      label={\n        label === undefined ? (namedOtherwise ? undefined : labels.password) : hasContent(label) ? label : undefined\n      }\n      readOnly={Boolean(busy) || readOnly}\n      onChange={(e) => {\n        onChange?.(e);\n        onValueChange?.(e.target.value);\n      }}\n    />\n  );\n}\n\n/** The words {@link TypedConfirmField} says on its own behalf — the `dangerConfirm`\n *  namespace's `phrase` and `phrasePlaceholder`, shared with DangerConfirm's own field,\n *  so the sentence \"Type “X” to confirm\" is translated once. */\nexport type TypedConfirmFieldLabels = Pick<DangerConfirmLabels, \"phrase\" | \"phrasePlaceholder\">;\n\nexport interface TypedConfirmFieldProps extends Omit<\n  InputProps,\n  \"type\" | \"value\" | \"defaultValue\" | \"label\" | \"placeholder\"\n> {\n  /** The text to repeat — a word (\"DELETE\"), a name, an e-mail address. */\n  target: string;\n  /** How the typed text is compared with `target` — {@link TypedMatch}. Default\n   *  `\"trim\"`, as {@link typedMatches}; `\"caseless\"` for an address or an\n   *  acknowledgement word a user may type in any case. */\n  match?: TypedMatch;\n  /** Controlled value. Left out, the field keeps its own (start: `defaultValue`). */\n  value?: string;\n  defaultValue?: string;\n  /** The typed text as a string, on every keystroke. Fires alongside `onChange`. */\n  onValueChange?: (value: string) => void;\n  /**\n   * The typed text started or stopped matching `target` — fired from the keystroke\n   * that flipped it, so an uncontrolled field can still drive the button it guards. A\n   * controlled caller that resets the value itself (on a close) knows the answer\n   * already, and gets no call for that; it can also compute it with {@link typedMatches}.\n   */\n  onMatchedChange?: (matched: boolean) => void;\n  /** The label. Default `dangerConfirm.phrase(target)` — \"Type “DELETE” to confirm\". */\n  label?: ReactNode;\n  /** Text inside the empty field. Default `dangerConfirm.phrasePlaceholder` (unset).\n   *  Given, the label moves ABOVE the field: a floating label occupies the empty\n   *  field, which is exactly where a placeholder shows. `\"\"` means none. */\n  placeholder?: string;\n  /** The guarded action is running: the field turns `readOnly` (not `disabled`, which\n   *  would drop the focus Enter left in it). */\n  busy?: boolean;\n  labels?: LabelOverride<TypedConfirmFieldLabels>;\n}\n\n/**\n * The \"type this to confirm\" field — {@link DangerConfirm}'s `phrase` field and\n * `useConfirm({ requireTyped })`'s, on its own (keksdose K7).\n *\n * keksdose writes it by hand four times: the privacy enrol, upgrade and sweep dialogs\n * (type the acknowledgement word, then the key doors appear) and the admin's \"type the\n * user's address\" (`UserActionConfirm`), each an `Input` plus its own\n * `trim().toUpperCase()` / `toLowerCase()` comparison. None of those places is an\n * arm → confirm tile or a modal confirm — what is guarded is a whole form, or the\n * next step of a dialog — so the field had to stand alone. What it brings over a plain\n * `Input`: one match rule ({@link typedMatches}, which lower-cases locale-independently\n * on purpose), the label worded from the target in the app's language, and the\n * attributes a phone keyboard needs to leave the text alone (no autocomplete, no\n * auto-capital, no autocorrect, no spellcheck — a keyboard that \"corrects\" an e-mail\n * address makes the guard unpassable).\n *\n * The field reports whether it matches (`onMatchedChange`, and `data-matched` on the\n * `<input>` for styling); what the match unlocks is the caller's. The ref is the\n * `<input>`.\n *\n * ```tsx\n * const [ok, setOk] = useState(false);\n * <TypedConfirmField target={t(\"privacy.enroll_ack_word\")} match=\"caseless\" onMatchedChange={setOk} />\n * {ok && <KeyDoorsForm … />}\n * ```\n */\nexport function TypedConfirmField({\n  ref,\n  target,\n  match = \"trim\",\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onMatchedChange,\n  onChange,\n  label: labelProp,\n  placeholder: placeholderProp,\n  busy,\n  readOnly,\n  labels: labelsProp,\n  id,\n  className,\n  ...rest\n}: TypedConfirmFieldProps) {\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const [own, setOwn] = useState(defaultValue);\n  const value = valueProp ?? own;\n  const matched = typedMatches(value, target, match);\n  const generated = useId();\n  const fieldId = id ?? generated;\n  const label =\n    labelProp !== undefined ? labelProp : typeof labels.phrase === \"function\" ? labels.phrase(target) : labels.phrase;\n  const fromLabels =\n    labels.phrasePlaceholder === undefined\n      ? undefined\n      : typeof labels.phrasePlaceholder === \"function\"\n        ? labels.phrasePlaceholder(target)\n        : labels.phrasePlaceholder;\n  const placeholder = placeholderProp ?? fromLabels;\n\n  const fieldProps = {\n    ...rest,\n    ref,\n    id: fieldId,\n    value,\n    autoComplete: \"off\",\n    autoCapitalize: \"off\",\n    autoCorrect: \"off\",\n    spellCheck: false,\n    readOnly: Boolean(busy) || readOnly,\n    \"data-matched\": matched || undefined,\n    onChange: (e: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e);\n      const next = e.target.value;\n      if (valueProp === undefined) setOwn(next);\n      onValueChange?.(next);\n      const nextMatched = typedMatches(next, target, match);\n      if (nextMatched !== matched) onMatchedChange?.(nextMatched);\n    },\n  };\n\n  if (placeholder) {\n    return (\n      // A static label above, so the placeholder has the empty field to itself.\n      <div className={cn(\"space-y-1.5\", className)}>\n        <Label htmlFor={fieldId}>{label}</Label>\n        <Input {...fieldProps} placeholder={placeholder} />\n      </div>\n    );\n  }\n  return <Input {...fieldProps} label={label} className={className} />;\n}\n\n/**\n * Every string the tile renders — the `dangerConfirm` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. The arm and\n * confirm buttons are usually worded per action (\"Delete budget\"), which is what the\n * `armLabel` / `confirmLabel` props are for; these are the fallbacks.\n */\nexport interface DangerConfirmLabels {\n  /** The button that arms the tile. */\n  arm: string;\n  /** The button that runs the action once the guards are satisfied. */\n  confirm: string;\n  cancel: string;\n  /** The warning above the fields, when no `prompt` is given. */\n  prompt: string;\n  /** Label of the password field (`requirePassword`). */\n  password: string;\n  /** Label of the type-to-confirm field. A FUNCTION of the phrase by default, like\n   *  every message that carries a value: where the phrase sits in the sentence moves\n   *  with the language. A plain STRING is taken as the finished label — for an app\n   *  whose catalogue already words it (\"Type DELETE to confirm\") and would otherwise\n   *  wrap it as `() => label`. */\n  phrase: string | ((phrase: string) => string);\n  /** Placeholder of the type-to-confirm field — a string, or a function of the\n   *  phrase (`(p) => p` echoes it). Optional and unset by default: the field keeps its\n   *  floating label, as before. Given, the label moves ABOVE the field (a floating\n   *  label occupies the empty field, which is exactly where a placeholder shows) and\n   *  the placeholder fills the field. An empty string means none. */\n  phrasePlaceholder?: string | ((phrase: string) => string);\n  /** 0.22: the checkbox `requireAcknowledge={true}` shows — \"I have read what this does\n   *  and want to continue\" (keksdose's `admin.users.confirm_ack`). */\n  acknowledge: string;\n  /**\n   * 0.23: why the armed confirm is held while the typed phrase does not match yet — in\n   * the confirm's tooltip and its description (keksdose G4a). A FUNCTION of the phrase\n   * by default (\"Type “DELETE” to confirm\"), or a finished STRING, as `phrase`.\n   */\n  needsPhrase: string | ((phrase: string) => string);\n  /** 0.23: why the armed confirm is held while the `requireAcknowledge` box is unticked\n   *  — \"Tick the box to confirm\". */\n  needsAcknowledge: string;\n  /** 0.23: why the armed confirm is held while the `requirePassword` field is empty —\n   *  \"Enter your password to confirm\". */\n  needsPassword: string;\n}\n\n// Defined in ./danger-confirm-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_DANGER_CONFIRM_LABELS };\n\n/**\n * What the guards were answered with — the second argument of\n * {@link DangerConfirmProps.onConfirm} (0.23, keksdose G4b). A key is there only when its\n * guard was asked for, so the object can go into a request body as it is.\n */\nexport interface DangerConfirmValues {\n  /**\n   * The text typed into the `phrase` field — as the match rule compared it: trimmed\n   * under `phraseMatch` `\"trim\"` and `\"caseless\"` (the spaces a phone keyboard adds are\n   * not part of it), exactly as typed under `\"exact\"`. The case is the user's, even\n   * under `\"caseless\"`: a server that re-checks applies its own rule to it. Absent\n   * without a `phrase`.\n   */\n  typed?: string;\n  /** The entered password — the same value as the first argument. Absent without\n   *  `requirePassword`. */\n  password?: string;\n  /** `true` when the `requireAcknowledge` box was shown — it was ticked, since the\n   *  confirm is held until it is. Absent without one. */\n  acknowledged?: true;\n}\n\n/**\n * One line of {@link DangerConfirmProps.consequences}: what the action will do. A plain\n * string, or this, for a key of its own and the `severe` mark.\n */\nexport interface DangerConsequence {\n  /** React key — keksdose keys its lines by what they say (\"api_tokens\", \"only_door\").\n   *  Default: the text when it is a string, else the position. */\n  key?: string;\n  text: ReactNode;\n  /** \"There is no way back\" — painted in the danger colour rather than the list's\n   *  muted one. keksdose reserves it for the one line that loses something for good. */\n  severe?: boolean;\n}\n\nexport interface DangerConfirmProps extends Omit<ComponentPropsWithRef<\"div\">, \"onChange\"> {\n  /**\n   * Runs the action, with the entered password when `requirePassword` is on.\n   *\n   * Return a promise and the tile manages itself: busy until it settles, disarmed\n   * (fields wiped) when it resolves, still armed when it rejects — so the user can\n   * correct a wrong password and retry. The rejection is not swallowed for you to\n   * miss: handle it (and show why) in the caller, as with any mutation.\n   *\n   * 0.23: the second argument is what every guard was answered with — the typed phrase,\n   * the password, the tick ({@link DangerConfirmValues}). keksdose G4b: its admin\n   * actions send the address the admin TYPED, and the server re-checks it against the\n   * account (`assert_confirmed`), so a client that put the wrong row's id in the request\n   * is refused rather than obeyed; the tile kept the text to itself.\n   *\n   *     onConfirm={(_password, { typed }) =>\n   *       reset.mutateAsync({ id, confirm: { acknowledged: true, confirm_email: typed ?? null } })}\n   *\n   * A second argument rather than one object in place of the password: every\n   * `(password) => …` and `() => …` handler, and a `mutation.mutate` passed as it is,\n   * keeps working unchanged, and a handler that needs one guard's answer names it.\n   */\n  onConfirm: (password: string | undefined, values: DangerConfirmValues) => void | Promise<unknown>;\n  /** Show a password field; confirm is held until it is filled. */\n  requirePassword?: boolean;\n  /**\n   * Show an \"I understand\" checkbox; confirm is held until it is ticked\n   * (keksdose K7). `true` words it with `labels.acknowledge`; any other node IS the\n   * checkbox's label (\"I understand Anna will be signed out everywhere\").\n   *\n   * The guard for an action whose risk is MIS-TARGETING less than carelessness:\n   * keksdose's admin password reset asks for a typed address when the account has an\n   * encrypted door to lose, and a tick otherwise (`UserActionConfirm`), and its plan\n   * editor asks for the tick alone (`UserPlanEditor`). Both were hand-built beside this\n   * tile because it had no tick. It combines with `phrase` and `requirePassword`: every\n   * guard given must be satisfied.\n   */\n  requireAcknowledge?: ReactNode;\n  /**\n   * What the action will do, said before it happens — a list under the prompt, shown\n   * once armed (keksdose K7, `UserActionConfirm`'s consequences). Strings, or\n   * {@link DangerConsequence}s for a `severe` line in the danger colour.\n   *\n   * Derive them from the row's own facts rather than reciting the worst case: an admin\n   * who reads the same paragraph on every row stops reading it (keksdose dev#488).\n   */\n  consequences?: readonly (string | DangerConsequence)[];\n  /** Show a \"type <phrase> to confirm\" field; confirm is held until the field matches\n   *  (case-sensitive; surrounding spaces ignored unless `phraseMatch=\"exact\"`). */\n  phrase?: string;\n  /**\n   * How the typed text is compared with `phrase`. `\"trim\"` (default) ignores spaces\n   * around it — a phone keyboard's autocomplete likes to add one. `\"exact\"` compares\n   * character for character, spaces included, for an app whose contract is \"type\n   * exactly this\". `\"caseless\"` (0.18) also ignores case — for a phrase that is an\n   * e-mail address (keksdose's \"type the user's address\" admin rule). See\n   * {@link TypedMatch}.\n   */\n  phraseMatch?: TypedMatch;\n  /** The warning above the fields. Defaults to `labels.prompt`. */\n  prompt?: ReactNode;\n  /** `\"danger\"` (default) for what cannot be undone; `\"warning\"` for what can, at a\n   *  cost (loading demo data over your own). Colours the prompt, and picks the arm\n   *  button's variant and — unless {@link DangerConfirmProps.confirmVariant} is\n   *  given — the confirm's. */\n  tone?: \"danger\" | \"warning\";\n  /**\n   * The confirm button's variant, apart from `tone` (0.24, keksdose). Default: what\n   * `tone` picks, as before — `\"danger\"` for `\"danger\"`, `\"default\"` for `\"warning\"`.\n   *\n   * `tone` says how bad the outcome is; this says how loud the last press is, and the two\n   * need not agree. keksdose's `UserActionConfirm` (an admin resets somebody else's\n   * password) asks an AMBER question — what it guards against is mis-targeting, not data\n   * loss, so the danger colour stays its one `severe` consequence's — and ends in a RED\n   * Go, as its hand-built panel did before it moved onto this tile in 0.23; with only\n   * `tone`, the amber question made Go the neutral `default` fill. `tone=\"warning\"\n   * confirmVariant=\"danger\"` is that panel again.\n   */\n  confirmVariant?: ButtonVariant;\n  /**\n   * Hold the armed confirm for a reason of the CALLER's own (0.24, keksdose) — the\n   * tile's counterpart of FormActions' `submitDisabledReason`. While it has content the\n   * confirm is held exactly as by the built-in guards: `aria-disabled` but focusable,\n   * the reason in the kit {@link Tooltip} and its description, a press — or Enter in a\n   * field — does nothing. Nothing else changes: the arm button stays usable, and no\n   * line is printed under the buttons.\n   *\n   * keksdose's `UserPlanEditor` (\"move this account onto another plan\") must not confirm\n   * the plan the account already holds — the request would only write FREE → FREE into\n   * the audit trail. With no guard of its own to give, it passed \"Pick a different plan\"\n   * as `lockedReason`, which is a LOCK: documented as \"the action is not available\",\n   * spelled out under the buttons as well as in the tooltip, and meant for a write the\n   * user cannot make land. A guard the user lifts by changing a field is this prop.\n   *\n   * Which reason the held confirm names: a write lock's first (`lockedReason`, `commit`\n   * — nothing in the tile lifts it), then this one, then the built-in guards in the\n   * order they are drawn (the tick, the phrase, the password). This one before the\n   * built-ins because it is usually about a field in\n   * {@link DangerConfirmProps.children}, which is drawn ABOVE them — the rule since 0.23\n   * is \"the first open guard in the order the user meets it\" — and because it is about\n   * WHAT is being confirmed (which plan), which has to be settled before acknowledging\n   * it means anything. It is also the order keksdose's plan editor had, its\n   * `lockedReason` winning over the tick.\n   */\n  confirmDisabledReason?: ReactNode;\n  /**\n   * Fields of the caller's own, drawn INSIDE the armed tile (0.24, keksdose): after the\n   * prompt and the consequences, before the tick, the typed phrase and the password —\n   * the order is \"what this does, what to do it with, then prove you mean it\". Nothing\n   * is drawn for them while the tile is disarmed, and nothing at all without them, so a\n   * tile without children is laid out exactly as before.\n   *\n   * keksdose's `UserPlanEditor` asks WHICH plan before it asks for the tick; with no\n   * place inside the tile for the picker, the `Select` sat above it, and the tile's\n   * prompt — the panel's title by rights — became the \"FREE → PRO\" line under the\n   * picker. With the picker here, the prompt is the title again.\n   *\n   * The fields are the caller's: their values are not wiped on disarm (an uncontrolled\n   * field starts over anyway — the slot unmounts), not passed to `onConfirm`, and a\n   * guard on them is {@link DangerConfirmProps.confirmDisabledReason}. Arming moves\n   * focus to their first form field (an input, a select, a combobox, a radio…), else to\n   * the tile's own first field as before; Tab then goes on through the tick, the phrase\n   * and the password to Cancel and the confirm. They sit inside the tile's `<form>`:\n   * Enter in a text field confirms once every guard allows, and a {@link Button} among\n   * them needs `type=\"button\"` — without one it SUBMITS the form, as a native button\n   * does.\n   */\n  children?: ReactNode;\n  /** Visible text of the arm button; defaults to `labels.arm`. */\n  armLabel?: ReactNode;\n  /** Visible text of the confirm button; defaults to `labels.confirm`. */\n  confirmLabel?: ReactNode;\n  /**\n   * The action is running: confirm shows a spinner and nothing can be pressed — Cancel\n   * included. For a caller that tracks the mutation itself (a `useMutation`'s\n   * `isPending`); a promise returned from `onConfirm` does the same on its own.\n   *\n   * Cancel stays disabled ON PURPOSE, unlike FormActions' (keksdose asked in 0.24 why the\n   * two differ). Once the request has left, nothing on the client can call it back —\n   * not even an `AbortSignal`, which only stops the waiting, not the server — so a usable\n   * Cancel could only collapse the tile while the action went on: \"Cancel\" pressed, and\n   * the account reset anyway. Every way of settling what comes back is wrong somewhere: a\n   * resolve after the Cancel did what the user called off; a reject finds the fields\n   * wiped (a collapsed tile holds no password), so the 0.23 \"stay armed and retry\" is\n   * gone; and re-arming while the first request runs is either a busy tile with empty\n   * fields or — if the busy state went with the Cancel — a second destructive request\n   * beside the first. FormActions' Cancel leaves an editor whose save is the user's own\n   * edit landing, and a form can be edited again; the tile's action is the one that\n   * cannot be undone, so it says nothing it cannot keep and waits — the wait is one\n   * request long.\n   *\n   * When the action settles still armed (it failed) and the press on the confirm had\n   * dropped the focus — a natively disabled button loses it — focus comes back to the\n   * confirm, so a keyboard user can retry or Shift+Tab to the field to correct (0.24).\n   */\n  busy?: boolean;\n  /**\n   * Why the last confirm failed (\"Wrong password\"), in the tile beside the field it is\n   * about rather than in a toast away from it (keksdose audit follow-up, 2026-11-01:\n   * PasswordDangerCard toasted its `password_incorrect` for want of this). The app sets\n   * it from the failure and words it — a 400 is a wrong password, a 500 is not.\n   *\n   * Drawn as the field's own `error`, as {@link ReauthDialog} draws its own: under the\n   * password with `requirePassword`, else under the typed phrase — the field painted,\n   * `aria-invalid`, the message its `aria-describedby` — and in a tile with neither, as\n   * a line above the buttons. Announced as it appears (`role=\"alert\"`): it arrives\n   * after the press, with focus on the confirm, where a field's description alone is\n   * not heard. Passed at all — even as `undefined` — the field keeps its box, as with\n   * Input's `error`, so the message going away does not rebuild the field mid-edit.\n   *\n   * Hidden while the next attempt runs, once the user edits the tick, the phrase or the\n   * password (it is about what was submitted), and when the tile arms or disarms, until\n   * the next confirm; shown again when a confirm fails with it still set. So a\n   * mutation's error can be handed over as it is:\n   * `error={mut.error ? message(mut.error) : undefined}`.\n   */\n  error?: ReactNode;\n  /** The arm button is disabled. */\n  disabled?: boolean;\n  /**\n   * Why the action is not available — a read-only demo, a write lock, a missing\n   * permission. Disables the arm button like `disabled`, and SAYS so: the sentence is\n   * shown under the button and attached to it with `aria-describedby`, and the button\n   * stays focusable (`aria-disabled`) so a keyboard user can land on it and hear why.\n   *\n   * On the ARM button rather than the confirm: arming asks for a password, and asking\n   * for a password for a write that can never land is the worse of the two. A tile that\n   * is ALREADY armed when the reason arrives (controlled `armed`, or a lock that landed\n   * while it was open) keeps its fields but its confirm takes the reason the same way\n   * — focusable, `aria-disabled`, the reason in its tooltip — and Enter does nothing.\n   */\n  lockedReason?: ReactNode;\n  /**\n   * This tile COMMITS — the 0.18 write-lock opt-in that {@link Button} has (keksdose\n   * K3). Under a locked {@link WriteLockProvider} the lock's reason becomes\n   * `lockedReason` (and wins over one of the tile's own), so a page that mounts the\n   * provider no longer threads `lockedReason={lock.locked ? lock.reason : undefined}`\n   * into every tile. No provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** Controlled armed state. The parent can then collapse the tile from a mutation's\n   *  own `onSuccess` without returning a promise. */\n  armed?: boolean;\n  /** Called with the next armed state — on arm, cancel, and a resolved `onConfirm`. */\n  onArmedChange?: (armed: boolean) => void;\n  /** User-facing strings; see {@link DangerConfirmLabels}. */\n  labels?: LabelOverride<DangerConfirmLabels>;\n}\n\n/** What counts as a FIELD among the caller's `children` — what arming focuses. Not\n *  any tabbable element: a \"see the plans\" link or a disclosure button before the\n *  picker is not where the user starts. `[tabindex=\"-1\"]` is a roving radio group's\n *  unselected option; the selected one (`0`) is the group's stop. */\nconst SLOT_FIELD = [\n  'input:not([type=\"hidden\"])',\n  \"select\",\n  \"textarea\",\n  ...[\"combobox\", \"listbox\", \"radio\", \"checkbox\", \"switch\", \"slider\", \"spinbutton\", \"textbox\"].map(\n    (role) => `[role=\"${role}\"]`,\n  ),\n]\n  .map((selector) => `${selector}:not(:disabled):not([tabindex=\"-1\"]):not([aria-hidden=\"true\"])`)\n  .join(\", \");\n\n/** The first field among the caller's `children`, skipping a native radio that is not\n *  the checked one of its group (Tab lands on the checked one). */\nfunction firstSlotField(slot: HTMLElement | null): HTMLElement | null {\n  if (!slot) return null;\n  for (const el of slot.querySelectorAll<HTMLElement>(SLOT_FIELD)) {\n    if (el.closest(\"[hidden], [inert]\")) continue;\n    if (el instanceof HTMLInputElement && el.type === \"radio\" && !el.checked && el.name) {\n      const group = el.form?.elements.namedItem(el.name);\n      const checked =\n        group instanceof RadioNodeList && Array.from(group).some((r) => r instanceof HTMLInputElement && r.checked);\n      if (checked) continue;\n    }\n    return el;\n  }\n  return null;\n}\n\n/**\n * An \"arm → confirm\" tile for destructive actions: one button, which expands into a\n * warning, an optional list of consequences, optional fields of the caller's own\n * (`children`, 0.24), an optional \"I understand\" tick, an optional type-to-confirm\n * field, an optional password field and a confirm that is held until every guard is\n * satisfied — the built-in ones, and the caller's `confirmDisabledReason` (0.24).\n *\n * A held confirm SAYS which guard is still open (0.23, keksdose G4a): it is\n * `aria-disabled` rather than `disabled` — still focusable, so a keyboard user can land\n * on it — with the reason in the kit {@link Tooltip} and its description (\"Type\n * “DELETE” to confirm\", \"Tick the box to confirm\", \"Enter your password to confirm\";\n * `labels.needs*`), the first open guard in the order they are drawn. FormActions'\n * `submitDisabledReason` does the same for a form's Save. Pressing it, or Enter in a\n * field, does nothing. A lock's reason wins over a guard's, the caller's guard over the\n * built-in ones; while the action runs the confirm is plainly disabled, its spinner\n * saying why — and so is Cancel, which cannot call back a request that has left (see\n * `busy`).\n *\n * Keksdose hand-rolled it three times (load demo data, wipe everything, reset a\n * budget) and then as `shared/components/danger-confirm.tsx`; the only app-specific\n * part was its write-lock hook, which is `lockedReason` here.\n *\n * The fields are a `<form>`, so Enter confirms once the guards allow it. They are\n * wiped every time the tile disarms — a password must not sit in a collapsed tile.\n * Arming moves focus to the first field (or Cancel, when there is none — never to the\n * destructive button itself), and disarming moves it back to the arm button, so the\n * keyboard user is never left on an element that just vanished.\n */\nexport function DangerConfirm(props: DangerConfirmProps) {\n  const {\n    onConfirm,\n    requirePassword,\n    requireAcknowledge,\n    consequences,\n    phrase,\n    phraseMatch = \"trim\",\n    prompt,\n    tone = \"danger\",\n    confirmVariant,\n    confirmDisabledReason,\n    children,\n    armLabel,\n    confirmLabel,\n    busy: busyProp,\n    error,\n    disabled,\n    lockedReason: ownLockedReason,\n    commit,\n    armed: armedProp,\n    onArmedChange,\n    labels: labelsProp,\n    className,\n    ...rest\n  } = props;\n  const labels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS, labelsProp);\n  const lockedReason = useCommitReason(commit, ownLockedReason);\n  const [armedState, setArmedState] = useState(false);\n  const armed = armedProp ?? armedState;\n  const [password, setPassword] = useState(\"\");\n  const [typed, setTyped] = useState(\"\");\n  const [acknowledged, setAcknowledged] = useState(false);\n  // The `error` describes what was submitted: an edit, an arm or a disarm leaves it\n  // describing nothing on screen. Cleared by the next confirm — ReauthDialog's `edited`.\n  const [errorStale, setErrorStale] = useState(false);\n  const { pending, run } = usePromisePending();\n  const busy = Boolean(busyProp) || pending;\n  // `readOnly` rather than `disabled` on the fields while busy: disabling the field\n  // that has focus (Enter was pressed in it) drops focus to <body>.\n  const promptId = useId();\n  const consequencesId = useId();\n  const reasonId = useId();\n\n  // The buttons focus is moved to are found by id.\n  const armId = useId();\n  const cancelId = useId();\n  const confirmId = useId();\n  const firstFieldRef = useRef<HTMLInputElement>(null);\n  // The caller's fields (`children`), searched for their first form field on arm.\n  const slotRef = useRef<HTMLDivElement>(null);\n  // Focus moves only after a transition — never on mount, so a tile that renders armed\n  // (controlled) does not take the page's focus merely by existing.\n  const moveFocus = useRef(false);\n  // A confirm from this tile is under way — see the focus return after a failure below.\n  const confirmed = useRef(false);\n\n  // A disarm from anywhere (cancel, a resolved confirm, the parent) wipes the fields.\n  // During render, like NumberField's draft, so no frame shows a collapsed tile that\n  // still holds a password.\n  const [wasArmed, setWasArmed] = useState(armed);\n  if (wasArmed !== armed) {\n    setWasArmed(armed);\n    // An `error` still passed is about the attempt before: not shown until a confirm.\n    setErrorStale(true);\n    if (!armed) {\n      setPassword(\"\");\n      setTyped(\"\");\n      setAcknowledged(false);\n    }\n  }\n\n  const prevArmed = useRef(armed);\n  useEffect(() => {\n    const changed = prevArmed.current !== armed;\n    prevArmed.current = armed;\n    const byUser = moveFocus.current;\n    moveFocus.current = false;\n    if (!changed) return;\n    if (armed) {\n      if (byUser) {\n        // The caller's fields come first on the page, so first in focus too.\n        (firstSlotField(slotRef.current) ?? firstFieldRef.current ?? document.getElementById(cancelId))?.focus();\n      }\n      return;\n    }\n    confirmed.current = false;\n    // Back to the arm button when the focus went down with the form — Cancel's, or a\n    // controlled parent collapsing the tile from its own `onSuccess`, which did not go\n    // through `setArmed`. By the kit's one rule (lib/focus-left `returnFocus`; 0.52 code\n    // review 2026-10-31, held to 0.55): it was moved for every `setArmed(false)` too, so a\n    // confirm that resolved after the user had gone on to another field took them back.\n    returnFocus({ opener: document.getElementById(armId) });\n  }, [armed, armId, cancelId]);\n\n  // The action settled and the tile is still armed — it failed, and the user retries.\n  // The confirm was natively disabled while it ran, and a focused button that turns\n  // disabled drops the focus to <body>: bring it back to the button that was pressed.\n  // Only after a confirm from THIS tile (`confirmed`), so a `busy` that comes and goes\n  // on its own never pulls the page's focus in. (A resolve disarms, and the effect\n  // above takes the focus to the arm button.)\n  const wasBusy = useRef(busy);\n  useEffect(() => {\n    const settled = wasBusy.current && !busy;\n    wasBusy.current = busy;\n    if (!settled) return;\n    const ours = confirmed.current;\n    confirmed.current = false;\n    if (!ours || !armed) return;\n    if (document.activeElement === null || document.activeElement === document.body) {\n      document.getElementById(confirmId)?.focus();\n    }\n  }, [busy, armed, confirmId]);\n\n  const setArmed = (next: boolean) => {\n    moveFocus.current = true;\n    if (armedProp === undefined) setArmedState(next);\n    onArmedChange?.(next);\n  };\n\n  const locked = hasContent(lockedReason);\n  // `true` words the tick with the namespace; any other node is its label; `false`,\n  // `null` and `\"\"` are no tick at all.\n  const acknowledgeLabel: ReactNode =\n    requireAcknowledge === true ? labels.acknowledge : hasContent(requireAcknowledge) ? requireAcknowledge : null;\n  const asksAcknowledge = acknowledgeLabel !== null;\n  const passwordOk = !requirePassword || password !== \"\";\n  const phraseOk = phrase === undefined || typedMatches(typed, phrase, phraseMatch);\n  const acknowledgeOk = !asksAcknowledge || acknowledged;\n  const callerHeld = hasContent(confirmDisabledReason);\n  // `{cond && <Select />}` and `[null, false]` are no fields: no wrapper, no gap.\n  const hasFields = Children.toArray(children).some(hasContent);\n  const canConfirm = passwordOk && phraseOk && acknowledgeOk && !callerHeld && !busy;\n  // The first guard still open, in the order the fields are drawn — the one the user\n  // meets next, so the sentence points at it.\n  const guardReason: string | undefined = !acknowledgeOk\n    ? labels.needsAcknowledge\n    : !phraseOk\n      ? typeof labels.needsPhrase === \"function\"\n        ? labels.needsPhrase(phrase ?? \"\")\n        : labels.needsPhrase\n      : !passwordOk\n        ? labels.needsPassword\n        : undefined;\n  // The lock first (no guard can lift it); none while busy, when the guards were met and\n  // the spinner is the state; then the caller's guard — about the fields drawn above the\n  // built-in ones, and about WHAT is confirmed — then the first built-in guard still open.\n  const confirmReason: ReactNode = locked\n    ? lockedReason\n    : busy\n      ? undefined\n      : callerHeld\n        ? confirmDisabledReason\n        : guardReason;\n\n  const submit = (e: FormEvent) => {\n    e.preventDefault();\n    // `locked` too: Enter in a field submits the form without the button's say (and\n    // `canConfirm` holds the caller's guard the same way).\n    if (!canConfirm || locked) return;\n    const values: DangerConfirmValues = {\n      ...(phrase !== undefined && { typed: phraseMatch === \"exact\" ? typed : typed.trim() }),\n      ...(requirePassword && { password }),\n      ...(asksAcknowledge && { acknowledged: true as const }),\n    };\n    confirmed.current = true;\n    setErrorStale(false);\n    // Disarms when it resolves; a rejection leaves it armed, fields kept: the caller\n    // shows why, the user retries.\n    run(onConfirm(values.password, values), () => setArmed(false));\n  };\n\n  // The failure's message, under the field it is about: the password, else the phrase,\n  // else (a tile with neither) a line of its own. Not while the next attempt runs.\n  const shownError = errorStale || busy ? undefined : error;\n  const errorAlert = hasContent(shownError) ? <span role=\"alert\">{shownError}</span> : undefined;\n  const errorOn = requirePassword ? \"password\" : phrase !== undefined ? \"phrase\" : \"line\";\n  // Passed at all, the carrying field keeps its box (Input's `error` rule): only then.\n  const fieldError = (field: \"password\" | \"phrase\") =>\n    \"error\" in props && errorOn === field ? { error: errorAlert } : {};\n  const edited = () => setErrorStale(true);\n\n  // The first field takes focus on arm: the tick, then the phrase, then the password —\n  // the order they are drawn in.\n  const firstField = asksAcknowledge ? \"acknowledge\" : phrase !== undefined ? \"phrase\" : \"password\";\n  const lines = (consequences ?? []).map((item, index) =>\n    typeof item === \"string\"\n      ? { key: item, text: item as ReactNode, severe: false }\n      : { key: item.key ?? String(index), text: item.text, severe: Boolean(item.severe) },\n  );\n\n  const toneText = tone === \"warning\" ? \"text-warning\" : \"text-danger\";\n\n  if (!armed) {\n    const arm = (\n      <Button\n        id={armId}\n        type=\"button\"\n        variant={tone === \"warning\" ? \"secondary\" : \"danger\"}\n        disabled={disabled}\n        aria-disabled={locked || undefined}\n        aria-describedby={locked ? reasonId : undefined}\n        onClick={() => {\n          if (!locked) setArmed(true);\n        }}\n        className=\"aria-disabled:cursor-not-allowed aria-disabled:opacity-50\"\n      >\n        {armLabel ?? labels.arm}\n      </Button>\n    );\n    return (\n      <div {...rest} className={cn(\"space-y-1\", className)}>\n        {locked ? (\n          // The reason on the button itself too, where the pointer that tried it is —\n          // the line below can sit out of view in a long settings card. Portalled, so\n          // a card that scrolls neither clips it nor grows by it.\n          //\n          // The button in a FRAGMENT on purpose: Tooltip clones an element child to\n          // add the bubble to its `aria-describedby`, and the button is already\n          // described by the visible line below — the same sentence twice, read out\n          // on every focus. A fragment is left as it is, so the bubble stays visual.\n          <Tooltip label={lockedReason} portal>\n            <>{arm}</>\n          </Tooltip>\n        ) : (\n          arm\n        )}\n        {locked && (\n          <p id={reasonId} className=\"text-xs text-muted\">\n            {lockedReason}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div {...rest} className={cn(\"space-y-2\", className)}>\n      <form\n        className=\"space-y-2\"\n        aria-describedby={lines.length > 0 ? `${promptId} ${consequencesId}` : promptId}\n        aria-busy={busy || undefined}\n        onSubmit={submit}\n        noValidate\n      >\n        <p id={promptId} className={cn(\"text-xs font-medium\", toneText)}>\n          {prompt ?? labels.prompt}\n        </p>\n        {lines.length > 0 && (\n          <ul id={consequencesId} className=\"list-disc space-y-1 ps-5 text-xs text-secondary\">\n            {lines.map((line) => (\n              <li key={line.key} className={line.severe ? \"text-danger\" : undefined}>\n                {line.text}\n              </li>\n            ))}\n          </ul>\n        )}\n        {/* The caller's fields: after what the action does, before the proof that it is\n            meant. No wrapper without them — a 0.23 tile's markup is unchanged. */}\n        {hasFields && (\n          <div ref={slotRef} className=\"space-y-2\">\n            {children}\n          </div>\n        )}\n        {asksAcknowledge && (\n          <Checkbox\n            ref={firstField === \"acknowledge\" ? firstFieldRef : undefined}\n            label={acknowledgeLabel}\n            checked={acknowledged}\n            // Not `disabled` while busy, for the same reason the fields are readOnly:\n            // the box may hold the focus. A change while busy is simply not taken.\n            onCheckedChange={(next) => {\n              if (busy) return;\n              setAcknowledged(next);\n              edited();\n            }}\n          />\n        )}\n        {phrase !== undefined && (\n          <TypedConfirmField\n            ref={firstField === \"phrase\" ? firstFieldRef : undefined}\n            target={phrase}\n            match={phraseMatch}\n            value={typed}\n            onValueChange={(next) => {\n              setTyped(next);\n              edited();\n            }}\n            busy={busy}\n            // Already resolved through this tile's own `labels` prop; handed on so a\n            // per-instance phrase wording reaches the field.\n            labels={{ phrase: labels.phrase, phrasePlaceholder: labels.phrasePlaceholder }}\n            {...fieldError(\"phrase\")}\n          />\n        )}\n        {requirePassword && (\n          <CurrentPasswordInput\n            ref={firstField === \"password\" ? firstFieldRef : undefined}\n            label={labels.password}\n            value={password}\n            busy={busy}\n            onValueChange={(next) => {\n              setPassword(next);\n              edited();\n            }}\n            {...fieldError(\"password\")}\n          />\n        )}\n        {errorOn === \"line\" && errorAlert !== undefined && (\n          <p className={cn(FIELD_ERROR_CLASS, \"mt-0\")}>{errorAlert}</p>\n        )}\n        <div className=\"flex flex-wrap gap-2\">\n          <Button id={cancelId} type=\"button\" variant=\"ghost\" disabled={busy} onClick={() => setArmed(false)}>\n            {labels.cancel}\n          </Button>\n          <Button\n            id={confirmId}\n            type=\"submit\"\n            variant={confirmVariant ?? (tone === \"warning\" ? \"default\" : \"danger\")}\n            disabled={!canConfirm}\n            // Held by a guard (the caller's or a built-in one), or armed and then locked\n            // (or rendered armed under a lock): the confirm says why the way Button\n            // does — focusable, `aria-disabled`, the reason in its tooltip and\n            // description, a press swallowed (the submit with it) — and the fields stay\n            // as typed. Only busy is the native `disabled`.\n            disabledReason={confirmReason}\n            aria-busy={busy || undefined}\n          >\n            {busy && <Spinner label={null} className=\"h-4 w-4\" />}\n            {confirmLabel ?? labels.confirm}\n          </Button>\n        </div>\n        {locked && <p className=\"text-xs text-muted\">{lockedReason}</p>}\n      </form>\n    </div>\n  );\n}\n"],"mappings":";AAoJI,SAutBQ,UAvtBR,KA+IE,YA/IF;AApJJ,SAAS,UAAU,aAAa,WAAW,OAAO,QAAQ,gBAAgB;AAE1E,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,oBAAwC;AACjD,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,aAAa;AACtB,SAAS,yBAAyB;AAClC,SAAS,eAAe;AAGxB,SAAS,gBAAgB;AACzB,SAAS,eAAe;AACxB,SAAS,uBAAyC;AAClD,SAAS,qCAAqC;AAoBvC,SAAS,aAAa,OAAe,QAAgB,OAAmB,QAAiB;AAC9F,MAAI,SAAS,QAAS,QAAO,UAAU;AACvC,MAAI,SAAS,OAAQ,QAAO,MAAM,KAAK,MAAM;AAG7C,SAAO,MAAM,KAAK,EAAE,YAAY,MAAM,OAAO,KAAK,EAAE,YAAY;AAClE;AAWO,SAAS,oBAAoB;AAClC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,UAAU,OAAO,IAAI;AAC3B,YAAU,MAAM;AACd,YAAQ,UAAU;AAClB,WAAO,MAAM;AACX,cAAQ,UAAU;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AACL,QAAM,MAAM,YAAY,CAAC,QAAiB,eAAoC;AAC5E,QAAI,CAAC,UAAU,OAAQ,OAA4B,SAAS,WAAY,QAAO;AAC/E,eAAW,IAAI;AACf,IAAC,OAA4B;AAAA,MAC3B,MAAM;AACJ,YAAI,CAAC,QAAQ,QAAS;AACtB,mBAAW,KAAK;AAChB,mBAAW;AAAA,MACb;AAAA,MACA,MAAM;AACJ,YAAI,QAAQ,QAAS,YAAW,KAAK;AAAA,MACvC;AAAA,IACF;AACA,WAAO;AAAA,EACT,GAAG,CAAC,CAAC;AACL,SAAO,EAAE,SAAS,IAAI;AACxB;AA0DO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAA8B;AAC5B,QAAM,SAAS,aAAa,iBAAiB,+BAA+B,UAAU;AACtF,QAAM,iBAAiB,KAAK,YAAY,MAAM,UAAa,KAAK,iBAAiB,MAAM;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MAGE,GAAG;AAAA,MAGJ,MAAK;AAAA,MACL,cAAa;AAAA,MACb,OACE,UAAU,SAAa,iBAAiB,SAAY,OAAO,WAAY,WAAW,KAAK,IAAI,QAAQ;AAAA,MAErG,UAAU,QAAQ,IAAI,KAAK;AAAA,MAC3B,UAAU,CAAC,MAAM;AACf,mBAAW,CAAC;AACZ,wBAAgB,EAAE,OAAO,KAAK;AAAA,MAChC;AAAA;AAAA,EACF;AAEJ;AAmEO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,SAAS,aAAa,iBAAiB,+BAA+B,UAAU;AACtF,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,YAAY;AAC3C,QAAM,QAAQ,aAAa;AAC3B,QAAM,UAAU,aAAa,OAAO,QAAQ,KAAK;AACjD,QAAM,YAAY,MAAM;AACxB,QAAM,UAAU,MAAM;AACtB,QAAM,QACJ,cAAc,SAAY,YAAY,OAAO,OAAO,WAAW,aAAa,OAAO,OAAO,MAAM,IAAI,OAAO;AAC7G,QAAM,aACJ,OAAO,sBAAsB,SACzB,SACA,OAAO,OAAO,sBAAsB,aAClC,OAAO,kBAAkB,MAAM,IAC/B,OAAO;AACf,QAAM,cAAc,mBAAmB;AAEvC,QAAM,aAAa;AAAA,IACjB,GAAG;AAAA,IACH;AAAA,IACA,IAAI;AAAA,IACJ;AAAA,IACA,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,UAAU,QAAQ,IAAI,KAAK;AAAA,IAC3B,gBAAgB,WAAW;AAAA,IAC3B,UAAU,CAAC,MAAqC;AAC9C,iBAAW,CAAC;AACZ,YAAM,OAAO,EAAE,OAAO;AACtB,UAAI,cAAc,OAAW,QAAO,IAAI;AACxC,sBAAgB,IAAI;AACpB,YAAM,cAAc,aAAa,MAAM,QAAQ,KAAK;AACpD,UAAI,gBAAgB,QAAS,mBAAkB,WAAW;AAAA,IAC5D;AAAA,EACF;AAEA,MAAI,aAAa;AACf;AAAA;AAAA,MAEE,qBAAC,SAAI,WAAW,GAAG,eAAe,SAAS,GACzC;AAAA,4BAAC,SAAM,SAAS,SAAU,iBAAM;AAAA,QAChC,oBAAC,SAAO,GAAG,YAAY,aAA0B;AAAA,SACnD;AAAA;AAAA,EAEJ;AACA,SAAO,oBAAC,SAAO,GAAG,YAAY,OAAc,WAAsB;AACpE;AA2SA,MAAM,aAAa;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG,CAAC,YAAY,WAAW,SAAS,YAAY,UAAU,UAAU,cAAc,SAAS,EAAE;AAAA,IAC3F,CAAC,SAAS,UAAU,IAAI;AAAA,EAC1B;AACF,EACG,IAAI,CAAC,aAAa,GAAG,QAAQ,gEAAgE,EAC7F,KAAK,IAAI;AAIZ,SAAS,eAAe,MAA8C;AACpE,MAAI,CAAC,KAAM,QAAO;AAClB,aAAW,MAAM,KAAK,iBAA8B,UAAU,GAAG;AAC/D,QAAI,GAAG,QAAQ,mBAAmB,EAAG;AACrC,QAAI,cAAc,oBAAoB,GAAG,SAAS,WAAW,CAAC,GAAG,WAAW,GAAG,MAAM;AACnF,YAAM,QAAQ,GAAG,MAAM,SAAS,UAAU,GAAG,IAAI;AACjD,YAAM,UACJ,iBAAiB,iBAAiB,MAAM,KAAK,KAAK,EAAE,KAAK,CAAC,MAAM,aAAa,oBAAoB,EAAE,OAAO;AAC5G,UAAI,QAAS;AAAA,IACf;AACA,WAAO;AAAA,EACT;AACA,SAAO;AACT;AA8BO,SAAS,cAAc,OAA2B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,SAAS,aAAa,iBAAiB,+BAA+B,UAAU;AACtF,QAAM,eAAe,gBAAgB,QAAQ,eAAe;AAC5D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,QAAQ,aAAa;AAC3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAGtD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,EAAE,SAAS,IAAI,IAAI,kBAAkB;AAC3C,QAAM,OAAO,QAAQ,QAAQ,KAAK;AAGlC,QAAM,WAAW,MAAM;AACvB,QAAM,iBAAiB,MAAM;AAC7B,QAAM,WAAW,MAAM;AAGvB,QAAM,QAAQ,MAAM;AACpB,QAAM,WAAW,MAAM;AACvB,QAAM,YAAY,MAAM;AACxB,QAAM,gBAAgB,OAAyB,IAAI;AAEnD,QAAM,UAAU,OAAuB,IAAI;AAG3C,QAAM,YAAY,OAAO,KAAK;AAE9B,QAAM,YAAY,OAAO,KAAK;AAK9B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,MAAI,aAAa,OAAO;AACtB,gBAAY,KAAK;AAEjB,kBAAc,IAAI;AAClB,QAAI,CAAC,OAAO;AACV,kBAAY,EAAE;AACd,eAAS,EAAE;AACX,sBAAgB,KAAK;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,YAAY,OAAO,KAAK;AAC9B,YAAU,MAAM;AACd,UAAM,UAAU,UAAU,YAAY;AACtC,cAAU,UAAU;AACpB,UAAM,SAAS,UAAU;AACzB,cAAU,UAAU;AACpB,QAAI,CAAC,QAAS;AACd,QAAI,OAAO;AACT,UAAI,QAAQ;AAEV,SAAC,eAAe,QAAQ,OAAO,KAAK,cAAc,WAAW,SAAS,eAAe,QAAQ,IAAI,MAAM;AAAA,MACzG;AACA;AAAA,IACF;AACA,cAAU,UAAU;AAMpB,gBAAY,EAAE,QAAQ,SAAS,eAAe,KAAK,EAAE,CAAC;AAAA,EACxD,GAAG,CAAC,OAAO,OAAO,QAAQ,CAAC;AAQ3B,QAAM,UAAU,OAAO,IAAI;AAC3B,YAAU,MAAM;AACd,UAAM,UAAU,QAAQ,WAAW,CAAC;AACpC,YAAQ,UAAU;AAClB,QAAI,CAAC,QAAS;AACd,UAAM,OAAO,UAAU;AACvB,cAAU,UAAU;AACpB,QAAI,CAAC,QAAQ,CAAC,MAAO;AACrB,QAAI,SAAS,kBAAkB,QAAQ,SAAS,kBAAkB,SAAS,MAAM;AAC/E,eAAS,eAAe,SAAS,GAAG,MAAM;AAAA,IAC5C;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,SAAS,CAAC;AAE3B,QAAM,WAAW,CAAC,SAAkB;AAClC,cAAU,UAAU;AACpB,QAAI,cAAc,OAAW,eAAc,IAAI;AAC/C,oBAAgB,IAAI;AAAA,EACtB;AAEA,QAAM,SAAS,WAAW,YAAY;AAGtC,QAAM,mBACJ,uBAAuB,OAAO,OAAO,cAAc,WAAW,kBAAkB,IAAI,qBAAqB;AAC3G,QAAM,kBAAkB,qBAAqB;AAC7C,QAAM,aAAa,CAAC,mBAAmB,aAAa;AACpD,QAAM,WAAW,WAAW,UAAa,aAAa,OAAO,QAAQ,WAAW;AAChF,QAAM,gBAAgB,CAAC,mBAAmB;AAC1C,QAAM,aAAa,WAAW,qBAAqB;AAEnD,QAAM,YAAY,SAAS,QAAQ,QAAQ,EAAE,KAAK,UAAU;AAC5D,QAAM,aAAa,cAAc,YAAY,iBAAiB,CAAC,cAAc,CAAC;AAG9E,QAAM,cAAkC,CAAC,gBACrC,OAAO,mBACP,CAAC,WACC,OAAO,OAAO,gBAAgB,aAC5B,OAAO,YAAY,UAAU,EAAE,IAC/B,OAAO,cACT,CAAC,aACC,OAAO,gBACP;AAIR,QAAM,gBAA2B,SAC7B,eACA,OACE,SACA,aACE,wBACA;AAER,QAAM,SAAS,CAAC,MAAiB;AAC/B,MAAE,eAAe;AAGjB,QAAI,CAAC,cAAc,OAAQ;AAC3B,UAAM,SAA8B;AAAA,MAClC,GAAI,WAAW,UAAa,EAAE,OAAO,gBAAgB,UAAU,QAAQ,MAAM,KAAK,EAAE;AAAA,MACpF,GAAI,mBAAmB,EAAE,SAAS;AAAA,MAClC,GAAI,mBAAmB,EAAE,cAAc,KAAc;AAAA,IACvD;AACA,cAAU,UAAU;AACpB,kBAAc,KAAK;AAGnB,QAAI,UAAU,OAAO,UAAU,MAAM,GAAG,MAAM,SAAS,KAAK,CAAC;AAAA,EAC/D;AAIA,QAAM,aAAa,cAAc,OAAO,SAAY;AACpD,QAAM,aAAa,WAAW,UAAU,IAAI,oBAAC,UAAK,MAAK,SAAS,sBAAW,IAAU;AACrF,QAAM,UAAU,kBAAkB,aAAa,WAAW,SAAY,WAAW;AAEjF,QAAM,aAAa,CAAC,UAClB,WAAW,SAAS,YAAY,QAAQ,EAAE,OAAO,WAAW,IAAI,CAAC;AACnE,QAAM,SAAS,MAAM,cAAc,IAAI;AAIvC,QAAM,aAAa,kBAAkB,gBAAgB,WAAW,SAAY,WAAW;AACvF,QAAM,SAAS,gBAAgB,CAAC,GAAG;AAAA,IAAI,CAAC,MAAM,UAC5C,OAAO,SAAS,WACZ,EAAE,KAAK,MAAM,MAAM,MAAmB,QAAQ,MAAM,IACpD,EAAE,KAAK,KAAK,OAAO,OAAO,KAAK,GAAG,MAAM,KAAK,MAAM,QAAQ,QAAQ,KAAK,MAAM,EAAE;AAAA,EACtF;AAEA,QAAM,WAAW,SAAS,YAAY,iBAAiB;AAEvD,MAAI,CAAC,OAAO;AACV,UAAM,MACJ;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,MAAK;AAAA,QACL,SAAS,SAAS,YAAY,cAAc;AAAA,QAC5C;AAAA,QACA,iBAAe,UAAU;AAAA,QACzB,oBAAkB,SAAS,WAAW;AAAA,QACtC,SAAS,MAAM;AACb,cAAI,CAAC,OAAQ,UAAS,IAAI;AAAA,QAC5B;AAAA,QACA,WAAU;AAAA,QAET,sBAAY,OAAO;AAAA;AAAA,IACtB;AAEF,WACE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,aAAa,SAAS,GAChD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASC,oBAAC,WAAQ,OAAO,cAAc,QAAM,MAClC,0CAAG,eAAI,GACT;AAAA,UAEA;AAAA,MAED,UACC,oBAAC,OAAE,IAAI,UAAU,WAAU,sBACxB,wBACH;AAAA,OAEJ;AAAA,EAEJ;AAEA,SACE,oBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,aAAa,SAAS,GACjD;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,oBAAkB,MAAM,SAAS,IAAI,GAAG,QAAQ,IAAI,cAAc,KAAK;AAAA,MACvE,aAAW,QAAQ;AAAA,MACnB,UAAU;AAAA,MACV,YAAU;AAAA,MAEV;AAAA,4BAAC,OAAE,IAAI,UAAU,WAAW,GAAG,uBAAuB,QAAQ,GAC3D,oBAAU,OAAO,QACpB;AAAA,QACC,MAAM,SAAS,KACd,oBAAC,QAAG,IAAI,gBAAgB,WAAU,mDAC/B,gBAAM,IAAI,CAAC,SACV,oBAAC,QAAkB,WAAW,KAAK,SAAS,gBAAgB,QACzD,eAAK,QADC,KAAK,GAEd,CACD,GACH;AAAA,QAID,aACC,oBAAC,SAAI,KAAK,SAAS,WAAU,aAC1B,UACH;AAAA,QAED,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,eAAe,gBAAgB,gBAAgB;AAAA,YACpD,OAAO;AAAA,YACP,SAAS;AAAA,YAGT,iBAAiB,CAAC,SAAS;AACzB,kBAAI,KAAM;AACV,8BAAgB,IAAI;AACpB,qBAAO;AAAA,YACT;AAAA;AAAA,QACF;AAAA,QAED,WAAW,UACV;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,eAAe,WAAW,gBAAgB;AAAA,YAC/C,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,OAAO;AAAA,YACP,eAAe,CAAC,SAAS;AACvB,uBAAS,IAAI;AACb,qBAAO;AAAA,YACT;AAAA,YACA;AAAA,YAGA,QAAQ,EAAE,QAAQ,OAAO,QAAQ,mBAAmB,OAAO,kBAAkB;AAAA,YAC5E,GAAG,WAAW,QAAQ;AAAA;AAAA,QACzB;AAAA,QAED,mBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,eAAe,aAAa,gBAAgB;AAAA,YACjD,OAAO,OAAO;AAAA,YACd,OAAO;AAAA,YACP;AAAA,YACA,eAAe,CAAC,SAAS;AACvB,0BAAY,IAAI;AAChB,qBAAO;AAAA,YACT;AAAA,YACC,GAAG,WAAW,UAAU;AAAA;AAAA,QAC3B;AAAA,QAED,YAAY,UAAU,eAAe,UACpC,oBAAC,OAAE,WAAW,GAAG,mBAAmB,MAAM,GAAI,sBAAW;AAAA,QAE3D,qBAAC,SAAI,WAAU,wBACb;AAAA,8BAAC,UAAO,IAAI,UAAU,MAAK,UAAS,SAAQ,SAAQ,UAAU,MAAM,SAAS,MAAM,SAAS,KAAK,GAC9F,iBAAO,QACV;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,SAAS,mBAAmB,SAAS,YAAY,YAAY;AAAA,cAC7D,UAAU,CAAC;AAAA,cAMX,gBAAgB;AAAA,cAChB,aAAW,QAAQ;AAAA,cAElB;AAAA,wBAAQ,oBAAC,WAAQ,OAAO,MAAM,WAAU,WAAU;AAAA,gBAClD,gBAAgB,OAAO;AAAA;AAAA;AAAA,UAC1B;AAAA,WACF;AAAA,QACC,UAAU,oBAAC,OAAE,WAAU,sBAAsB,wBAAa;AAAA;AAAA;AAAA,EAC7D,GACF;AAEJ;","names":[]}

package/dist/components/data-table-column-settings.js

@@ -4,7 +4,7 @@ import { useId, useLayoutEffect, useRef } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { claimEscape } from "../hooks/use-dismiss.js";
-import { firstTabStop } from "../lib/focus-left.js";
+import { firstTabStop, returnFocus } from "../lib/focus-left.js";
 import { Tooltip } from "./tooltip.js";
 import { isTableOwnColumn } from "./data-table-row-actions.js";
 import { columnLabel } from "./data-table-shared.js";
@@ -32,8 +32,8 @@ function ColumnSettingsPanel({
     (drawer.querySelector('input[type="checkbox"]') ?? firstTabStop(drawer, { includeSelf: false }))?.focus();
   }, [showSettings]);
   const close = () => {
+    returnFocus({ opener: columnsRail.current, closing: drawerRef.current });
     setShowSettings(false);
-    columnsRail.current?.focus();
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Tooltip, { label: columnsCountLabel, portal: true, children: /* @__PURE__ */ jsx(

package/dist/components/data-table-column-settings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-column-settings.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { claimEscape } from \"../hooks/use-dismiss\";\nimport { firstTabStop } from \"../lib/focus-left\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { columnLabel } from \"./data-table-shared\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's column settings on a wide screen: the vertical \"Columns (n/m)\" rail and\n// the drawer it opens, with \"Auto-size\" and a show/hide box per column. Moved out of\n// data-table.tsx whole (refactor audit 2026-10, MOD-3 step 5).\n\n/** The \"Columns\" rail and its drawer (`columnSettings`). */\nexport function ColumnSettingsPanel<T>({\n  columns,\n  hiddenCols,\n  setHiddenCols,\n  autoHidden,\n  keepColumn,\n  showSettings,\n  setShowSettings,\n  columnsCountLabel,\n  labels,\n  autoSizeAll,\n}: {\n  /** Every column, hidden ones included; the actions column is left out here. */\n  columns: readonly DataTableColumn<T>[];\n  hiddenCols: Set<string>;\n  setHiddenCols: Dispatch<SetStateAction<Set<string>>>;\n  /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and\n   *  marked \"hidden for width\". */\n  autoHidden: Set<string>;\n  /** A tick keeps a column in whatever the width; an untick drops that (data-table-fit.ts). */\n  keepColumn: (key: string, on: boolean) => void;\n  showSettings: boolean;\n  setShowSettings: (open: boolean) => void;\n  /** \"Columns (n/m)\", the rail's text and name. */\n  columnsCountLabel: string;\n  labels: DataTableLabels;\n  autoSizeAll: () => void;\n}) {\n  // The \"Columns\" rail button — where the drawer's X hands focus back (BUG-7a).\n  const columnsRail = useRef<HTMLButtonElement | null>(null);\n  const drawerRef = useRef<HTMLDivElement | null>(null);\n  const drawerId = useId();\n  // The opening half (refactor audit 2026-10-30, DSP-13). Opened from the rail, the focus\n  // goes into the drawer: the rail it was on turns zero wide and leaves the tab order in\n  // the same render, and the focus sat in a control nobody could see. To the first column\n  // box — what the drawer is opened for — or, with none, its first control. Only when the\n  // rail opened it: a drawer that starts open (its state is the table's) takes nothing.\n  const focusOnOpen = useRef(false);\n  useLayoutEffect(() => {\n    if (!showSettings || !focusOnOpen.current) return;\n    focusOnOpen.current = false;\n    const drawer = drawerRef.current;\n    if (!drawer) return;\n    (\n      drawer.querySelector<HTMLElement>('input[type=\"checkbox\"]') ?? firstTabStop(drawer, { includeSelf: false })\n    )?.focus();\n  }, [showSettings]);\n  const close = () => {\n    setShowSettings(false);\n    // Back to the rail that opened it: the drawer is about to go inert, and focus would\n    // fall to <body> with it (BUG-7a).\n    columnsRail.current?.focus();\n  };\n  return (\n    <>\n      <Tooltip label={columnsCountLabel} portal>\n        <button\n          ref={columnsRail}\n          type=\"button\"\n          onClick={() => {\n            focusOnOpen.current = true;\n            setShowSettings(true);\n          }}\n          aria-label={columnsCountLabel}\n          // A disclosure: it says whether the drawer is open, and never hides itself from\n          // a screen reader — `aria-hidden` on it while it held the focus left the reader\n          // with nothing to say (DSP-13). Zero wide and out of the tab order while open.\n          aria-expanded={showSettings}\n          aria-controls={drawerId}\n          tabIndex={showSettings ? -1 : 0}\n          className={cn(\n            \"group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out\",\n            \"border-s border-subtle\",\n            \"hover:bg-hover\",\n            showSettings ? \"w-0 border-s-0\" : \"w-8 cursor-pointer\",\n          )}\n        >\n          <span\n            className=\"whitespace-nowrap text-xs font-medium tracking-wide text-muted group-hover:text-secondary\"\n            style={{ writingMode: \"vertical-rl\", transform: \"rotate(180deg)\" }}\n          >\n            {columnsCountLabel}\n          </span>\n        </button>\n      </Tooltip>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Escape\n          for whatever control in the drawer holds the focus; the group itself is no control. */}\n      <div\n        ref={drawerRef}\n        id={drawerId}\n        // Named by its own heading's words, so a reader entering it hears \"Columns (4/9),\n        // group\" before the first box (DSP-13).\n        role=\"group\"\n        aria-label={columnsCountLabel}\n        // Closed, the drawer is only `w-0`: without `inert` its X, Auto-size and one\n        // checkbox per column stayed tab stops and in the accessibility tree, and Tab\n        // after the last cell walked into controls nobody could see (BUG-7a).\n        inert={!showSettings || undefined}\n        // Escape closes it onto the rail, as its X does. Claimed, not handed to the Escape\n        // stack: inside a dialog the drawer is what the key closes, not the dialog.\n        onKeyDown={(e) => {\n          if (e.key !== \"Escape\" || !showSettings) return;\n          claimEscape(e);\n          close();\n        }}\n        className={cn(\n          \"shrink-0 overflow-hidden transition-[width] duration-200 ease-out\",\n          showSettings ? \"w-56\" : \"w-0\",\n        )}\n      >\n        <div className=\"flex w-56 flex-col border-s border-subtle p-2\">\n          <div className=\"mb-2 flex items-center justify-between gap-1\">\n            <div className=\"text-xs font-medium uppercase tracking-wide text-muted\">{columnsCountLabel}</div>\n            <Tooltip label={labels.close} portal>\n              <button\n                type=\"button\"\n                onClick={close}\n                aria-label={labels.close}\n                className=\"rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </Tooltip>\n          </div>\n          <button\n            type=\"button\"\n            onClick={autoSizeAll}\n            className=\"mb-2 rounded border border-subtle px-2 py-1 text-xs font-medium text-secondary hover:bg-hover\"\n          >\n            {labels.autoSize}\n          </button>\n          <div className=\"flex flex-col gap-0.5\">\n            {columns.map((col) => {\n              if (isTableOwnColumn(col.key)) return null;\n              // Ticked = drawn: a column left out for width is unticked, so the boxes\n              // and \"Columns (8/10)\" say the same (keksdose live #451).\n              const forWidth = !hiddenCols.has(col.key) && autoHidden.has(col.key);\n              const checked = !hiddenCols.has(col.key) && !forWidth;\n              const headerLabel = columnLabel(col);\n              return (\n                <label\n                  key={col.key}\n                  className=\"inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-hover\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    className=\"size-3.5 shrink-0\"\n                    checked={checked}\n                    onChange={(e) => {\n                      keepColumn(col.key, e.target.checked);\n                      setHiddenCols((s) => {\n                        const next = new Set(s);\n                        if (e.target.checked) next.delete(col.key);\n                        else next.add(col.key);\n                        return next;\n                      });\n                    }}\n                  />\n                  {/* The panel is `w-56`: a long column name wraps from Large up rather\n                      than reading \"Accoun…\" beside its box (text size §10.17, round\n                      0.34 T1). */}\n                  {forWidth ? (\n                    // Under the name, as part of the box's name: \"Email, hidden for width\".\n                    <span className=\"flex min-w-0 flex-col\">\n                      <span className=\"truncate-until-large\">{headerLabel}</span>\n                      <span className=\"text-micro text-muted\" data-hidden-for-width=\"\">\n                        {labels.hiddenForWidth}\n                      </span>\n                    </span>\n                  ) : (\n                    <span className=\"min-w-0 truncate-until-large\">{headerLabel}</span>\n                  )}\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/data-table-column-settings.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef } from \"react\";\nimport type { Dispatch, SetStateAction } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { claimEscape } from \"../hooks/use-dismiss\";\nimport { firstTabStop, returnFocus } from \"../lib/focus-left\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { columnLabel } from \"./data-table-shared\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's column settings on a wide screen: the vertical \"Columns (n/m)\" rail and\n// the drawer it opens, with \"Auto-size\" and a show/hide box per column. Moved out of\n// data-table.tsx whole (refactor audit 2026-10, MOD-3 step 5).\n\n/** The \"Columns\" rail and its drawer (`columnSettings`). */\nexport function ColumnSettingsPanel<T>({\n  columns,\n  hiddenCols,\n  setHiddenCols,\n  autoHidden,\n  keepColumn,\n  showSettings,\n  setShowSettings,\n  columnsCountLabel,\n  labels,\n  autoSizeAll,\n}: {\n  /** Every column, hidden ones included; the actions column is left out here. */\n  columns: readonly DataTableColumn<T>[];\n  hiddenCols: Set<string>;\n  setHiddenCols: Dispatch<SetStateAction<Set<string>>>;\n  /** The columns the table's width leaves out (`fitPriority`, 0.48): unticked, and\n   *  marked \"hidden for width\". */\n  autoHidden: Set<string>;\n  /** A tick keeps a column in whatever the width; an untick drops that (data-table-fit.ts). */\n  keepColumn: (key: string, on: boolean) => void;\n  showSettings: boolean;\n  setShowSettings: (open: boolean) => void;\n  /** \"Columns (n/m)\", the rail's text and name. */\n  columnsCountLabel: string;\n  labels: DataTableLabels;\n  autoSizeAll: () => void;\n}) {\n  // The \"Columns\" rail button — where the drawer's X hands focus back (BUG-7a).\n  const columnsRail = useRef<HTMLButtonElement | null>(null);\n  const drawerRef = useRef<HTMLDivElement | null>(null);\n  const drawerId = useId();\n  // The opening half (refactor audit 2026-10-30, DSP-13). Opened from the rail, the focus\n  // goes into the drawer: the rail it was on turns zero wide and leaves the tab order in\n  // the same render, and the focus sat in a control nobody could see. To the first column\n  // box — what the drawer is opened for — or, with none, its first control. Only when the\n  // rail opened it: a drawer that starts open (its state is the table's) takes nothing.\n  const focusOnOpen = useRef(false);\n  useLayoutEffect(() => {\n    if (!showSettings || !focusOnOpen.current) return;\n    focusOnOpen.current = false;\n    const drawer = drawerRef.current;\n    if (!drawer) return;\n    (\n      drawer.querySelector<HTMLElement>('input[type=\"checkbox\"]') ?? firstTabStop(drawer, { includeSelf: false })\n    )?.focus();\n  }, [showSettings]);\n  const close = () => {\n    // Back to the rail that opened it: the drawer is about to go inert, and focus would\n    // fall to <body> with it (BUG-7a). By the kit's one rule (lib/focus-left\n    // `returnFocus`; 0.52 code review 2026-10-31, held to 0.55): from inside the drawer or\n    // from nowhere, and checked it took — not over a focus the page already holds.\n    returnFocus({ opener: columnsRail.current, closing: drawerRef.current });\n    setShowSettings(false);\n  };\n  return (\n    <>\n      <Tooltip label={columnsCountLabel} portal>\n        <button\n          ref={columnsRail}\n          type=\"button\"\n          onClick={() => {\n            focusOnOpen.current = true;\n            setShowSettings(true);\n          }}\n          aria-label={columnsCountLabel}\n          // A disclosure: it says whether the drawer is open, and never hides itself from\n          // a screen reader — `aria-hidden` on it while it held the focus left the reader\n          // with nothing to say (DSP-13). Zero wide and out of the tab order while open.\n          aria-expanded={showSettings}\n          aria-controls={drawerId}\n          tabIndex={showSettings ? -1 : 0}\n          className={cn(\n            \"group flex shrink-0 items-start justify-center overflow-hidden pt-3 transition-[width] duration-200 ease-out\",\n            \"border-s border-subtle\",\n            \"hover:bg-hover\",\n            showSettings ? \"w-0 border-s-0\" : \"w-8 cursor-pointer\",\n          )}\n        >\n          <span\n            className=\"whitespace-nowrap text-xs font-medium tracking-wide text-muted group-hover:text-secondary\"\n            style={{ writingMode: \"vertical-rl\", transform: \"rotate(180deg)\" }}\n          >\n            {columnsCountLabel}\n          </span>\n        </button>\n      </Tooltip>\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Escape\n          for whatever control in the drawer holds the focus; the group itself is no control. */}\n      <div\n        ref={drawerRef}\n        id={drawerId}\n        // Named by its own heading's words, so a reader entering it hears \"Columns (4/9),\n        // group\" before the first box (DSP-13).\n        role=\"group\"\n        aria-label={columnsCountLabel}\n        // Closed, the drawer is only `w-0`: without `inert` its X, Auto-size and one\n        // checkbox per column stayed tab stops and in the accessibility tree, and Tab\n        // after the last cell walked into controls nobody could see (BUG-7a).\n        inert={!showSettings || undefined}\n        // Escape closes it onto the rail, as its X does. Claimed, not handed to the Escape\n        // stack: inside a dialog the drawer is what the key closes, not the dialog.\n        onKeyDown={(e) => {\n          if (e.key !== \"Escape\" || !showSettings) return;\n          claimEscape(e);\n          close();\n        }}\n        className={cn(\n          \"shrink-0 overflow-hidden transition-[width] duration-200 ease-out\",\n          showSettings ? \"w-56\" : \"w-0\",\n        )}\n      >\n        <div className=\"flex w-56 flex-col border-s border-subtle p-2\">\n          <div className=\"mb-2 flex items-center justify-between gap-1\">\n            <div className=\"text-xs font-medium uppercase tracking-wide text-muted\">{columnsCountLabel}</div>\n            <Tooltip label={labels.close} portal>\n              <button\n                type=\"button\"\n                onClick={close}\n                aria-label={labels.close}\n                className=\"rounded p-0.5 text-placeholder hover:bg-hover hover:text-secondary\"\n              >\n                <X className=\"size-4\" />\n              </button>\n            </Tooltip>\n          </div>\n          <button\n            type=\"button\"\n            onClick={autoSizeAll}\n            className=\"mb-2 rounded border border-subtle px-2 py-1 text-xs font-medium text-secondary hover:bg-hover\"\n          >\n            {labels.autoSize}\n          </button>\n          <div className=\"flex flex-col gap-0.5\">\n            {columns.map((col) => {\n              if (isTableOwnColumn(col.key)) return null;\n              // Ticked = drawn: a column left out for width is unticked, so the boxes\n              // and \"Columns (8/10)\" say the same (keksdose live #451).\n              const forWidth = !hiddenCols.has(col.key) && autoHidden.has(col.key);\n              const checked = !hiddenCols.has(col.key) && !forWidth;\n              const headerLabel = columnLabel(col);\n              return (\n                <label\n                  key={col.key}\n                  className=\"inline-flex cursor-pointer items-center gap-1.5 rounded px-1 py-0.5 text-xs hover:bg-hover\"\n                >\n                  <input\n                    type=\"checkbox\"\n                    className=\"size-3.5 shrink-0\"\n                    checked={checked}\n                    onChange={(e) => {\n                      keepColumn(col.key, e.target.checked);\n                      setHiddenCols((s) => {\n                        const next = new Set(s);\n                        if (e.target.checked) next.delete(col.key);\n                        else next.add(col.key);\n                        return next;\n                      });\n                    }}\n                  />\n                  {/* The panel is `w-56`: a long column name wraps from Large up rather\n                      than reading \"Accoun…\" beside its box (text size §10.17, round\n                      0.34 T1). */}\n                  {forWidth ? (\n                    // Under the name, as part of the box's name: \"Email, hidden for width\".\n                    <span className=\"flex min-w-0 flex-col\">\n                      <span className=\"truncate-until-large\">{headerLabel}</span>\n                      <span className=\"text-micro text-muted\" data-hidden-for-width=\"\">\n                        {labels.hiddenForWidth}\n                      </span>\n                    </span>\n                  ) : (\n                    <span className=\"min-w-0 truncate-until-large\">{headerLabel}</span>\n                  )}\n                </label>\n              );\n            })}\n          </div>\n        </div>\n      </div>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/data-table-filter-popover.d.ts

@@ -30,7 +30,8 @@ interface FilterPopoverProps<T> {
  * The contents of a column's filter Popover. Renders the right control set for
  * the column's filter type — text search, select checklist, date range (presets
  * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs
- * toggle — driving the shared {@link FilterValue} state.
+ * toggle (none for `numberFilter(getValue, { abs: false })`) — driving the shared
+ * {@link FilterValue} state.
  */
 export declare function FilterPopover<T>({ column, state, onChange, onClear, selectOptions, locale: localeProp, labels: labelsProp, autoFocus, }: FilterPopoverProps<T>): import("react").JSX.Element | null;
 export {};

package/dist/components/data-table-filter-popover.js

@@ -149,6 +149,7 @@ function FilterPopover({
       ] })
     ] });
   }
+  const absBox = filter.abs !== false;
   const v = state.type === "number" ? state : { type: "number", min: "", max: "", abs: false };
   const shown = (bound) => {
     const own = typed[bound];
@@ -161,7 +162,7 @@ function FilterPopover({
       type: "number",
       min: bound === "min" ? read : v.min,
       max: bound === "max" ? read : v.max,
-      abs: v.abs
+      abs: absBox && v.abs
     });
   };
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
@@ -197,7 +198,7 @@ function FilterPopover({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-secondary", children: [
+    absBox && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm text-secondary", children: [
       /* @__PURE__ */ jsx(
         "input",
         {

package/dist/components/data-table-filter-popover.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-filter-popover.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { MiniCalendar } from \"./mini-calendar\";\nimport { dateRangePresets } from \"../lib/dates\";\nimport { resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { DataTableColumn } from \"./data-table\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { resolveDataTableLabels } from \"./data-table-shared\";\nimport { useKitLabelOverrides, useKitLocale } from \"../i18n/kit-labels\";\n\ninterface FilterPopoverProps<T> {\n  column: DataTableColumn<T>;\n  state: FilterValue;\n  onChange: (next: FilterValue) => void;\n  onClear: () => void;\n  selectOptions: { value: string; label: string }[];\n  /** BCP-47 locale for the date picker / labels. Falls back to the provider's. */\n  locale?: string;\n  /** Already resolved by {@link DataTable}. Standalone (it is exported), omit it and\n   *  the `dataTable` namespace of `<UiKitProvider labels>` is used. */\n  labels?: DataTableLabels;\n  /**\n   * Focus the text filter's input on mount. True, because that is right for the one\n   * place this component normally lives: a Popover opened by an explicit press on\n   * \"Filter\", which exists in order to be typed into and which the user has just asked\n   * for. It was hard-coded, which made it right there and wrong everywhere else — a\n   * browser scrolls whatever takes focus into view, so embedding this control in an\n   * ordinary page (the showcase documents it on one) landed the reader 25,000px down a\n   * page they had not scrolled. An embedder that is not a popover passes `false`.\n   */\n  autoFocus?: boolean;\n}\n\n/**\n * The contents of a column's filter Popover. Renders the right control set for\n * the column's filter type — text search, select checklist, date range (presets\n * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs\n * toggle — driving the shared {@link FilterValue} state.\n */\nexport function FilterPopover<T>({\n  column,\n  state,\n  onChange,\n  onClear,\n  selectOptions,\n  locale: localeProp,\n  labels: labelsProp,\n  autoFocus = true,\n}: FilterPopoverProps<T>) {\n  // Both hooks run before the early return below, unconditionally.\n  const overrides = useKitLabelOverrides(\"dataTable\");\n  const labels = labelsProp ?? resolveDataTableLabels(overrides);\n  // No `\"en\"` fallback any more: that pinned the calendar to English in a table that\n  // was never handed a locale, under a provider that had one.\n  const locale = useKitLocale(localeProp);\n  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase\n  // React's own autofocus does, once when the input mounts (it is stable across\n  // renders, so a re-render does not re-take focus).\n  const focusOnMount = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el && autoFocus) el.focus();\n    },\n    [autoFocus],\n  );\n  // The number bounds' marks, and what the typist wrote in each box — see the number\n  // section below (BUG-10).\n  const mark = decimalMark(locale);\n  const [typed, setTyped] = useState<{ min: string | null; max: string | null }>({ min: null, max: null });\n  const filter = resolveFilter(column);\n  if (!filter) return null;\n\n  // `focus:outline-none` with only a 1px border tint to replace it is the same finding\n  // the audit records against the numpad's keys: on a panel of four identical fields a\n  // border going from --border to --border-strong is not a location. The ring is, and it\n  // is the package's brand focus colour, as on every field (field-base.tsx).\n  const inputBase =\n    \"block w-full rounded border border-subtle bg-surface px-2 py-1.5 text-sm text-secondary placeholder:text-placeholder focus:border-strong focus:outline-none \" +\n    FOCUS_RING +\n    \" \" +\n    // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.\n    FIELD_TOUCH_TEXT;\n  const buttonBase = \"rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary hover:bg-hover\";\n\n  const clearRow = (\n    <div className=\"flex justify-end pt-1\">\n      <button type=\"button\" onClick={onClear} className={cn(buttonBase, \"flex items-center gap-1\")}>\n        <X className=\"size-3\" /> {labels.clearFilter}\n      </button>\n    </div>\n  );\n\n  if (filter.type === \"text\") {\n    const v = state.type === \"text\" ? state : { type: \"text\" as const, q: \"\" };\n    return (\n      <div className=\"space-y-2\">\n        <input\n          type=\"text\"\n          // A prop now, defaulting to what the popover needs; see `autoFocus` on the\n          // props above. Focused by `focusOnMount` rather than the `autoFocus`\n          // attribute, because here taking focus is the default, not an opt-in.\n          ref={focusOnMount}\n          value={v.q}\n          onChange={(e) => onChange({ type: \"text\", q: e.target.value })}\n          placeholder={labels.filterPlaceholder}\n          className={inputBase}\n        />\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"select\") {\n    const v = state.type === \"select\" ? state : { type: \"select\" as const, values: [] };\n    const toggle = (val: string) => {\n      const set = new Set(v.values);\n      if (set.has(val)) set.delete(val);\n      else set.add(val);\n      onChange({ type: \"select\", values: Array.from(set) });\n    };\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between text-xs text-muted\">\n          <span>{labels.selectFilter}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: selectOptions.map((o) => o.value) })}\n              className={buttonBase}\n            >\n              {labels.selectAll}\n            </button>\n            <button type=\"button\" onClick={() => onChange({ type: \"select\", values: [] })} className={buttonBase}>\n              {labels.selectNone}\n            </button>\n          </div>\n        </div>\n        <ul className=\"max-h-56 overflow-y-auto rounded border border-subtle\">\n          {selectOptions.map((o) => {\n            const checked = v.values.includes(o.value);\n            return (\n              <li key={o.value}>\n                <label className=\"flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-hover\">\n                  <input type=\"checkbox\" checked={checked} onChange={() => toggle(o.value)} className=\"size-3.5\" />\n                  <span className=\"truncate\">{o.label}</span>\n                </label>\n              </li>\n            );\n          })}\n          {selectOptions.length === 0 && <li className=\"px-2 py-2 text-sm text-muted\">—</li>}\n        </ul>\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"date\") {\n    const v = state.type === \"date\" ? state : { type: \"date\" as const, from: \"\", to: \"\" };\n    const set = (from: string, to: string) => onChange({ type: \"date\", from, to });\n    const presets = dateRangePresets();\n    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;\n    // Side by side, the 7rem preset column leaves a phone's calendar and its two\n    // native date inputs ~180px, which clips \"mm/dd/yyyy\" mid-placeholder. Below `sm`\n    // the presets wrap as a row above the calendar, which then gets the panel's width.\n    return (\n      <div className=\"flex flex-col gap-3 sm:flex-row\">\n        <ul className=\"flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap\">\n          {presets.map((p) => {\n            const active = isActivePreset(p);\n            return (\n              <li key={p.key}>\n                <button\n                  type=\"button\"\n                  onClick={() => set(p.from, p.to)}\n                  className={cn(\n                    \"block rounded px-2 py-1 text-start transition-colors sm:w-full\",\n                    active ? \"bg-brand-soft text-brand-muted\" : \"text-secondary hover:bg-hover\",\n                  )}\n                >\n                  {labels.presets[p.key] ?? p.key}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          {/* No `labels` here: the calendar reads `miniCalendar` from the provider\n              itself, which is the only way a calendar nested this deep was ever going\n              to be translated — the table has no prop to forward them through. */}\n          <MiniCalendar from={v.from} to={v.to} locale={locale} onSelect={set} />\n          <div className=\"grid grid-cols-2 gap-2\">\n            <label className=\"text-xs text-muted\">\n              {labels.dateFrom}\n              <input\n                type=\"date\"\n                value={v.from}\n                onChange={(e) => set(e.target.value, v.to)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n            <label className=\"text-xs text-muted\">\n              {labels.dateTo}\n              <input\n                type=\"date\"\n                value={v.to}\n                onChange={(e) => set(v.from, e.target.value)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n          </div>\n          {clearRow}\n        </div>\n      </div>\n    );\n  }\n\n  // number\n  const v = state.type === \"number\" ? state : { type: \"number\" as const, min: \"\", max: \"\", abs: false };\n  // The bounds were native `type=\"number\"` inputs, the one numeric entry in the kit that\n  // bypassed decimal-marks (BUG-10, refactor audit 2026-10): where the browser refuses a\n  // comma, a German \"12,50\" read as empty and the filter silently stayed off while the box\n  // showed the text. A text box with the decimal keyboard now, read as NumberInput reads\n  // (`readTyped`): the state holds the dot-decimal figure, and the box keeps the typist's\n  // own text while it says the same (`showsTyped`), else the bound in the locale's mark.\n  const shown = (bound: \"min\" | \"max\") => {\n    const own = typed[bound];\n    return own !== null && showsTyped(own, mark, v[bound]) ? own : localizeMark(v[bound], mark);\n  };\n  const setBound = (bound: \"min\" | \"max\", raw: string) => {\n    setTyped((t) => ({ ...t, [bound]: raw }));\n    const read = readTyped(raw, mark);\n    onChange({\n      type: \"number\",\n      min: bound === \"min\" ? read : v.min,\n      max: bound === \"max\" ? read : v.max,\n      abs: v.abs,\n    });\n  };\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"grid grid-cols-2 gap-2\">\n        <label className=\"text-xs text-muted\">\n          {labels.numberMin} (≥)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"min\")}\n            onChange={(e) => setBound(\"min\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n        <label className=\"text-xs text-muted\">\n          {labels.numberMax} (≤)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"max\")}\n            onChange={(e) => setBound(\"max\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n      </div>\n      <label className=\"flex items-center gap-2 text-sm text-secondary\">\n        <input\n          type=\"checkbox\"\n          checked={v.abs}\n          onChange={(e) => onChange({ type: \"number\", min: v.min, max: v.max, abs: e.target.checked })}\n          className=\"size-3.5\"\n        />\n        {labels.numberAbs}\n      </label>\n      {clearRow}\n    </div>\n  );\n}\n"],"mappings":"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","names":["v"]}
+{"version":3,"sources":["../../src/components/data-table-filter-popover.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { decimalMark, localizeMark, readTyped, showsTyped } from \"../lib/decimal-marks\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { MiniCalendar } from \"./mini-calendar\";\nimport { dateRangePresets } from \"../lib/dates\";\nimport { resolveFilter } from \"./data-table-filters\";\nimport type { FilterValue } from \"./data-table-filters\";\nimport type { DataTableColumn } from \"./data-table\";\nimport type { DataTableLabels } from \"./data-table-labels\";\nimport { resolveDataTableLabels } from \"./data-table-shared\";\nimport { useKitLabelOverrides, useKitLocale } from \"../i18n/kit-labels\";\n\ninterface FilterPopoverProps<T> {\n  column: DataTableColumn<T>;\n  state: FilterValue;\n  onChange: (next: FilterValue) => void;\n  onClear: () => void;\n  selectOptions: { value: string; label: string }[];\n  /** BCP-47 locale for the date picker / labels. Falls back to the provider's. */\n  locale?: string;\n  /** Already resolved by {@link DataTable}. Standalone (it is exported), omit it and\n   *  the `dataTable` namespace of `<UiKitProvider labels>` is used. */\n  labels?: DataTableLabels;\n  /**\n   * Focus the text filter's input on mount. True, because that is right for the one\n   * place this component normally lives: a Popover opened by an explicit press on\n   * \"Filter\", which exists in order to be typed into and which the user has just asked\n   * for. It was hard-coded, which made it right there and wrong everywhere else — a\n   * browser scrolls whatever takes focus into view, so embedding this control in an\n   * ordinary page (the showcase documents it on one) landed the reader 25,000px down a\n   * page they had not scrolled. An embedder that is not a popover passes `false`.\n   */\n  autoFocus?: boolean;\n}\n\n/**\n * The contents of a column's filter Popover. Renders the right control set for\n * the column's filter type — text search, select checklist, date range (presets\n * + {@link MiniCalendar} + from/to inputs), or numeric min/max with an abs\n * toggle (none for `numberFilter(getValue, { abs: false })`) — driving the shared\n * {@link FilterValue} state.\n */\nexport function FilterPopover<T>({\n  column,\n  state,\n  onChange,\n  onClear,\n  selectOptions,\n  locale: localeProp,\n  labels: labelsProp,\n  autoFocus = true,\n}: FilterPopoverProps<T>) {\n  // Both hooks run before the early return below, unconditionally.\n  const overrides = useKitLabelOverrides(\"dataTable\");\n  const labels = labelsProp ?? resolveDataTableLabels(overrides);\n  // No `\"en\"` fallback any more: that pinned the calendar to English in a table that\n  // was never handed a locale, under a provider that had one.\n  const locale = useKitLocale(localeProp);\n  // What `autoFocus` did, done by hand: a callback ref runs in the same commit phase\n  // React's own autofocus does, once when the input mounts (it is stable across\n  // renders, so a re-render does not re-take focus).\n  const focusOnMount = useCallback(\n    (el: HTMLInputElement | null) => {\n      if (el && autoFocus) el.focus();\n    },\n    [autoFocus],\n  );\n  // The number bounds' marks, and what the typist wrote in each box — see the number\n  // section below (BUG-10).\n  const mark = decimalMark(locale);\n  const [typed, setTyped] = useState<{ min: string | null; max: string | null }>({ min: null, max: null });\n  const filter = resolveFilter(column);\n  if (!filter) return null;\n\n  // `focus:outline-none` with only a 1px border tint to replace it is the same finding\n  // the audit records against the numpad's keys: on a panel of four identical fields a\n  // border going from --border to --border-strong is not a location. The ring is, and it\n  // is the package's brand focus colour, as on every field (field-base.tsx).\n  const inputBase =\n    \"block w-full rounded border border-subtle bg-surface px-2 py-1.5 text-sm text-secondary placeholder:text-placeholder focus:border-strong focus:outline-none \" +\n    FOCUS_RING +\n    \" \" +\n    // §10.1: a filter field is a field — 16 px on touch, or iOS zooms on focus.\n    FIELD_TOUCH_TEXT;\n  const buttonBase = \"rounded border border-subtle bg-surface px-2 py-1 text-xs text-secondary hover:bg-hover\";\n\n  const clearRow = (\n    <div className=\"flex justify-end pt-1\">\n      <button type=\"button\" onClick={onClear} className={cn(buttonBase, \"flex items-center gap-1\")}>\n        <X className=\"size-3\" /> {labels.clearFilter}\n      </button>\n    </div>\n  );\n\n  if (filter.type === \"text\") {\n    const v = state.type === \"text\" ? state : { type: \"text\" as const, q: \"\" };\n    return (\n      <div className=\"space-y-2\">\n        <input\n          type=\"text\"\n          // A prop now, defaulting to what the popover needs; see `autoFocus` on the\n          // props above. Focused by `focusOnMount` rather than the `autoFocus`\n          // attribute, because here taking focus is the default, not an opt-in.\n          ref={focusOnMount}\n          value={v.q}\n          onChange={(e) => onChange({ type: \"text\", q: e.target.value })}\n          placeholder={labels.filterPlaceholder}\n          className={inputBase}\n        />\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"select\") {\n    const v = state.type === \"select\" ? state : { type: \"select\" as const, values: [] };\n    const toggle = (val: string) => {\n      const set = new Set(v.values);\n      if (set.has(val)) set.delete(val);\n      else set.add(val);\n      onChange({ type: \"select\", values: Array.from(set) });\n    };\n    return (\n      <div className=\"space-y-2\">\n        <div className=\"flex items-center justify-between text-xs text-muted\">\n          <span>{labels.selectFilter}</span>\n          <div className=\"flex gap-1\">\n            <button\n              type=\"button\"\n              onClick={() => onChange({ type: \"select\", values: selectOptions.map((o) => o.value) })}\n              className={buttonBase}\n            >\n              {labels.selectAll}\n            </button>\n            <button type=\"button\" onClick={() => onChange({ type: \"select\", values: [] })} className={buttonBase}>\n              {labels.selectNone}\n            </button>\n          </div>\n        </div>\n        <ul className=\"max-h-56 overflow-y-auto rounded border border-subtle\">\n          {selectOptions.map((o) => {\n            const checked = v.values.includes(o.value);\n            return (\n              <li key={o.value}>\n                <label className=\"flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-hover\">\n                  <input type=\"checkbox\" checked={checked} onChange={() => toggle(o.value)} className=\"size-3.5\" />\n                  <span className=\"truncate\">{o.label}</span>\n                </label>\n              </li>\n            );\n          })}\n          {selectOptions.length === 0 && <li className=\"px-2 py-2 text-sm text-muted\">—</li>}\n        </ul>\n        {clearRow}\n      </div>\n    );\n  }\n\n  if (filter.type === \"date\") {\n    const v = state.type === \"date\" ? state : { type: \"date\" as const, from: \"\", to: \"\" };\n    const set = (from: string, to: string) => onChange({ type: \"date\", from, to });\n    const presets = dateRangePresets();\n    const isActivePreset = (p: { from: string; to: string }) => v.from === p.from && v.to === p.to;\n    // Side by side, the 7rem preset column leaves a phone's calendar and its two\n    // native date inputs ~180px, which clips \"mm/dd/yyyy\" mid-placeholder. Below `sm`\n    // the presets wrap as a row above the calendar, which then gets the panel's width.\n    return (\n      <div className=\"flex flex-col gap-3 sm:flex-row\">\n        <ul className=\"flex flex-wrap gap-0.5 text-xs sm:w-28 sm:shrink-0 sm:flex-col sm:flex-nowrap\">\n          {presets.map((p) => {\n            const active = isActivePreset(p);\n            return (\n              <li key={p.key}>\n                <button\n                  type=\"button\"\n                  onClick={() => set(p.from, p.to)}\n                  className={cn(\n                    \"block rounded px-2 py-1 text-start transition-colors sm:w-full\",\n                    active ? \"bg-brand-soft text-brand-muted\" : \"text-secondary hover:bg-hover\",\n                  )}\n                >\n                  {labels.presets[p.key] ?? p.key}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <div className=\"min-w-0 flex-1 space-y-2\">\n          {/* No `labels` here: the calendar reads `miniCalendar` from the provider\n              itself, which is the only way a calendar nested this deep was ever going\n              to be translated — the table has no prop to forward them through. */}\n          <MiniCalendar from={v.from} to={v.to} locale={locale} onSelect={set} />\n          <div className=\"grid grid-cols-2 gap-2\">\n            <label className=\"text-xs text-muted\">\n              {labels.dateFrom}\n              <input\n                type=\"date\"\n                value={v.from}\n                onChange={(e) => set(e.target.value, v.to)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n            <label className=\"text-xs text-muted\">\n              {labels.dateTo}\n              <input\n                type=\"date\"\n                value={v.to}\n                onChange={(e) => set(v.from, e.target.value)}\n                className={cn(\"mt-0.5\", inputBase)}\n              />\n            </label>\n          </div>\n          {clearRow}\n        </div>\n      </div>\n    );\n  }\n\n  // number\n  // `abs: false` on the filter: no \"Absolute value\" box, and a state that carries `abs`\n  // anyway (a view stored before the column lost the box) is handed on without it at the\n  // first bound typed — there is no box to untick it with (kastlan reuse audit\n  // 2026-11-02, proposal 7).\n  const absBox = filter.abs !== false;\n  const v = state.type === \"number\" ? state : { type: \"number\" as const, min: \"\", max: \"\", abs: false };\n  // The bounds were native `type=\"number\"` inputs, the one numeric entry in the kit that\n  // bypassed decimal-marks (BUG-10, refactor audit 2026-10): where the browser refuses a\n  // comma, a German \"12,50\" read as empty and the filter silently stayed off while the box\n  // showed the text. A text box with the decimal keyboard now, read as NumberInput reads\n  // (`readTyped`): the state holds the dot-decimal figure, and the box keeps the typist's\n  // own text while it says the same (`showsTyped`), else the bound in the locale's mark.\n  const shown = (bound: \"min\" | \"max\") => {\n    const own = typed[bound];\n    return own !== null && showsTyped(own, mark, v[bound]) ? own : localizeMark(v[bound], mark);\n  };\n  const setBound = (bound: \"min\" | \"max\", raw: string) => {\n    setTyped((t) => ({ ...t, [bound]: raw }));\n    const read = readTyped(raw, mark);\n    onChange({\n      type: \"number\",\n      min: bound === \"min\" ? read : v.min,\n      max: bound === \"max\" ? read : v.max,\n      abs: absBox && v.abs,\n    });\n  };\n  return (\n    <div className=\"space-y-2\">\n      <div className=\"grid grid-cols-2 gap-2\">\n        <label className=\"text-xs text-muted\">\n          {labels.numberMin} (≥)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"min\")}\n            onChange={(e) => setBound(\"min\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n        <label className=\"text-xs text-muted\">\n          {labels.numberMax} (≤)\n          <input\n            type=\"text\"\n            inputMode=\"decimal\"\n            autoComplete=\"off\"\n            value={shown(\"max\")}\n            onChange={(e) => setBound(\"max\", e.target.value)}\n            className={cn(\"mt-0.5\", inputBase)}\n          />\n        </label>\n      </div>\n      {absBox && (\n        <label className=\"flex items-center gap-2 text-sm text-secondary\">\n          <input\n            type=\"checkbox\"\n            checked={v.abs}\n            onChange={(e) => onChange({ type: \"number\", min: v.min, max: v.max, abs: e.target.checked })}\n            className=\"size-3.5\"\n          />\n          {labels.numberAbs}\n        </label>\n      )}\n      {clearRow}\n    </div>\n  );\n}\n"],"mappings":"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","names":["v"]}

package/dist/components/data-table-filters.d.ts

@@ -17,6 +17,11 @@ export type ColumnFilter<T> = {
 } | {
     type: "number";
     getValue: (row: T) => number | null | undefined;
+    /** `false`: no "Absolute value" box, for a figure that is never negative (a year, a
+     *  count, a size), where the box only offers a choice that changes nothing. A state
+     *  or a link that carries `abs` anyway is read without it. Default `true`. See
+     *  {@link numberFilter}. */
+    abs?: boolean;
 };
 /** The current state of a column's filter (what the user has entered). */
 export type FilterValue = {
@@ -39,6 +44,22 @@ export type FilterValue = {
 export declare function resolveFilter<T>(col: DataTableColumn<T>): ColumnFilter<T> | null;
 /** Whether a filter value is actually narrowing anything (vs its empty default). */
 export declare function isFilterActive(v: FilterValue | undefined): boolean;
+/**
+ * A number filter's bound as a number, or `null` for none: blank, or not a finite
+ * number (BUG-10, refactor audit 2026-10). `Number("abc")` is NaN, and every comparison
+ * with NaN is false, so a broken bound — `f.amount=abc..` in a shared link — used to
+ * match every row while the column showed its filter as active; `Number(" ")` is 0, and
+ * a blank bound kept every negative row out. The popover hands in the dot-decimal text
+ * its locale's marks read (`readTyped`); anything else is no bound.
+ *
+ * Exported for a server-side table (`serverPagination`), which sends the bounds to its
+ * server instead of comparing here: send what this reads, and leave out a `null`. The box
+ * holds a half-typed "-" or "5e" while the user types, and kastlan's server tables sent
+ * that text on to `col >= :bound` until they wrote this rule again for themselves (kastlan
+ * reuse audit 2026-11-02, proposal 7). And send `abs` only beside a bound: on its own it
+ * narrows nothing.
+ */
+export declare function numberBound(raw: string): number | null;
 /**
  * Whether `row` passes column `col`'s filter given the user's `state`.
  *
@@ -58,7 +79,9 @@ export declare function encodeFilterValue(v: FilterValue): string | null;
 /** Inverse of {@link encodeFilterValue} given just the filter type — for
  *  callers that know a column's type without holding its full config. */
 export declare function decodeFilterValueOfType(type: FilterValue["type"], raw: string): FilterValue;
-/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. */
+/** Inverse of {@link encodeFilterValue}, typed by the column's filter config. A number
+ *  filter without the "Absolute value" box (`abs: false`) drops a link's `!`: kept, a
+ *  server-side table would send `abs` that nobody can see or untick. */
 export declare function decodeFilterValue<T>(filter: ColumnFilter<T>, raw: string): FilterValue;
 /** A free-text filter over `getValue`. */
 export declare function textFilter<T>(getValue: (row: T) => string): ColumnFilter<T>;
@@ -73,8 +96,15 @@ export declare function selectFilter<T>(getValue: (row: T) => string, options?:
 }[] | Record<string, string>): ColumnFilter<T>;
 /** A from/to date filter over an ISO date (or date-time) string. */
 export declare function dateFilter<T>(getValue: (row: T) => string | null | undefined): ColumnFilter<T>;
-/** A min/max (and absolute-value) filter over a number. */
-export declare function numberFilter<T>(getValue: (row: T) => number | null | undefined): ColumnFilter<T>;
+/**
+ * A min/max (and absolute-value) filter over a number. `{ abs: false }` leaves out the
+ * "Absolute value" box, for a figure that is never negative — a year, a count, a size —
+ * where it only offers a choice that changes nothing (kastlan reuse audit 2026-11-02,
+ * proposal 7: its server tables drew it under construction years and file sizes).
+ */
+export declare function numberFilter<T>(getValue: (row: T) => number | null | undefined, options?: {
+    abs?: boolean;
+}): ColumnFilter<T>;
 /**
  * A link to a list page with one column filter already applied — in the table's own URL
  * scheme (`f.<column>=<encoded>`), which a table with `urlSync` (or

package/dist/components/data-table-filters.js

@@ -56,7 +56,7 @@ function rowMatches(col, row, state, locale) {
       const min = numberBound(state.min);
       const max = numberBound(state.max);
       if (raw == null || Number.isNaN(raw)) return min === null && max === null;
-      const x = state.abs ? Math.abs(raw) : raw;
+      const x = state.abs && filter.abs !== false ? Math.abs(raw) : raw;
       if (min !== null && x < min) return false;
       if (max !== null && x > max) return false;
       return true;
@@ -120,7 +120,8 @@ function decodeFilterValueOfType(type, raw) {
   }
 }
 function decodeFilterValue(filter, raw) {
-  return decodeFilterValueOfType(filter.type, raw);
+  const value = decodeFilterValueOfType(filter.type, raw);
+  return value.type === "number" && filter.type === "number" && filter.abs === false ? { ...value, abs: false } : value;
 }
 function textFilter(getValue) {
   return { type: "text", getValue };
@@ -132,8 +133,8 @@ function selectFilter(getValue, options) {
 function dateFilter(getValue) {
   return { type: "date", getValue };
 }
-function numberFilter(getValue) {
-  return { type: "number", getValue };
+function numberFilter(getValue, options) {
+  return options?.abs === false ? { type: "number", getValue, abs: false } : { type: "number", getValue };
 }
 function filterHref(path, column, value, options) {
   const state = typeof value === "string" ? { type: "text", q: value } : Array.isArray(value) ? { type: "select", values: value } : value;
@@ -155,6 +156,7 @@ export {
   encodeFilterValue,
   filterHref,
   isFilterActive,
+  numberBound,
   numberFilter,
   resolveFilter,
   rowMatches,