@eifi1/ui-kit 0.51.6 → 0.52.0

package/dist/components/account-chips.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/account-chips.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from \"../lib/format\";\nimport type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from \"../lib/format\";\nimport { useKitDateFormatter, useKitLabels, useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { toLocalIso } from \"../lib/dates\";\nimport { Chip } from \"./chip\";\nimport type { ChipLinkProps, ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport type { DataTableColumn } from \"./data-table\";\nimport { DEFAULT_ACCOUNT_STATE_LABELS } from \"./account-chips-labels\";\n\n/**\n * The parts an admin roster repeats (0.18.0) — and only those.\n *\n * Kurvenschmiede (features/admin/users-panel.tsx, allowlist-panel.tsx) and keksdose\n * (features/admin/users-panel.tsx, the allowlist card in admin-page.tsx) each built the\n * same table: name over email, a role, whether the account is active, created, last\n * login, a row of actions, and an allowlist with a note. What they share is not the\n * table — the columns around it (keksdose's plan and privacy mode, Kurvenschmiede's\n * owned-work counts and its role SELECT), the actions and every rule about who may do\n * what are each app's own. What they share is the vocabulary: both spelled the same\n * square, uppercase status chip by hand (keksdose's `Badge` with its own tone map,\n * Kurvenschmiede's inline `<Chip size=\"xs\" shape=\"square\" caps>`), and both formatted\n * their two date columns by hand (`toLocaleDateString` in one, a \"3 days ago\" helper\n * in the other). So: {@link RoleChip}, {@link AccountStateChip} and\n * {@link dateColumn}, and the roster stays the app's `DataTable`.\n */\n\n/** The chip look both rosters use: a square, uppercase status tag. Each can be changed. */\ninterface AccountChipLook {\n  /** Default `sm` — keksdose's roster; Kurvenschmiede's denser lists pass `xs`. */\n  size?: ChipSize;\n  /** Default `soft`. `dot` for a column of them that should not outshout the names. */\n  variant?: ChipVariant;\n  /** Default `square`: a chip in a table cell, beside square controls. */\n  shape?: ChipShape;\n  /** Default true — the status-badge type. */\n  caps?: boolean;\n  className?: string;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/* ── RoleChip ──────────────────────────────────────────────────────────────── */\n\n/** How one role is drawn. `label` is the app's, translated. */\nexport interface RoleDefinition {\n  label: string;\n  tone?: ChipTone;\n  /**\n   * A lucide component or an element — Kurvenschmiede marks its admins with a shield.\n   * Unlike {@link href} and {@link variant}, it shows EVERYWHERE the role is drawn: in\n   * {@link AccountRoleChip} and in {@link RoleChip} (the roster's column) alike. That is\n   * intended (0.43, keksdose's question): the glyph is part of how the role reads, so the\n   * shield on the header's chip is the shield in the users list. An app that wants the\n   * glyph in one place only hands the other a second vocabulary without `icon`.\n   */\n  icon?: LucideIcon | ReactElement;\n  /**\n   * 0.42.0 (docs/admin-harmonization.md §2.1, settings §12.3): the role's tool — an\n   * admin's `/admin`, a reviewer's `/translations`. {@link AccountRoleChip} is a link to\n   * it; a role without one gets a plain chip. {@link RoleChip} ignores it: a roster's\n   * chips name a role, they are not a way in.\n   */\n  href?: string;\n  /**\n   * 0.42.0 (keksdose build review): this role's look in {@link AccountRoleChip} — keksdose\n   * draws only ADMIN `solid` and its REVIEWER and MEMBER `soft`. Default `solid`, the\n   * header's look; the chip's own `variant` prop wins over it. {@link RoleChip} ignores\n   * it: a roster's column keeps one look, set on the column.\n   */\n  variant?: ChipVariant;\n}\n\n/**\n * Every role an app has, keyed by the value its API sends. Annotate the app's table\n * with it (`const ROLES: RoleVocabulary<UserRole> = {…}`) and TypeScript asks for a\n * label when a role is added.\n */\nexport type RoleVocabulary<R extends string = string> = Readonly<Record<R, RoleDefinition>>;\n\nexport interface RoleChipProps<R extends string = string> extends AccountChipLook {\n  /**\n   * The role key as the API sends it. `null` / `undefined` renders nothing. Named\n   * `value`, not `role`, because `role` on a JSX element is the ARIA role — the lint\n   * rule and every reader would take it for one.\n   */\n  value: R | null | undefined;\n  /** What each key is called and how it is toned. A key missing here is shown as the\n   *  key itself, in `neutral`: an unknown role is still a fact the admin should see. */\n  roles: Readonly<Partial<Record<R, RoleDefinition>>>;\n}\n\n/**\n * A role as a chip: the API's key looked up in the app's {@link RoleVocabulary}.\n *\n * The vocabulary is a prop and not kit English, because the roles are the app's —\n * Kurvenschmiede has admin, member and customer, keksdose admin and user, kastlan its\n * own — and so are their names. Carries `data-role` with the key, for a test or a\n * style hook.\n */\nexport function RoleChip<R extends string = string>({\n  value: role,\n  roles,\n  size = \"sm\",\n  variant,\n  shape = \"square\",\n  caps = true,\n  className,\n  ...rest\n}: RoleChipProps<R>) {\n  if (role === null || role === undefined || role === \"\") return null;\n  const def = roles[role];\n  return (\n    <Chip\n      {...rest}\n      data-role={role}\n      tone={def?.tone ?? \"neutral\"}\n      icon={def?.icon}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {def?.label ?? role}\n    </Chip>\n  );\n}\n\n/* ── AccountRoleChip ───────────────────────────────────────────────────────── */\n\nexport interface AccountRoleChipProps<R extends string = string> extends RoleChipProps<R> {\n  /**\n   * Runs on the way to the role's tool — the account menu's `close`, so the panel does\n   * not stay open over the page it just navigated to (keksdose F7). Only called on a\n   * link chip.\n   */\n  onNavigate?: () => void;\n  /** Your router's link for the role's `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then `<a>` — {@link Chip}'s `renderLink`. */\n  renderLink?: (props: ChipLinkProps) => ReactElement;\n}\n\n/**\n * The role in the account menu's header (0.42.0, docs/admin-harmonization.md §2.1, §7):\n * {@link RoleChip} in keksdose's look — `solid`, `sm`, `square`, `caps`, the role's icon\n * and tone — made for `TopBarActionMenu`'s `header.extra`:\n *\n *     extra: (close) => <AccountRoleChip value={me.role} roles={ROLES} onNavigate={close} />\n *\n * A role whose {@link RoleDefinition.href} is set is a shortcut to its tool: the chip is a\n * link (through `renderLink`, else the provider's link, as {@link Chip} draws links) and\n * calls `onNavigate` on the click. Any other role is a plain chip — every account shows\n * its role (§7, \"Always a badge\"). The words and tones are the app's vocabulary; the kit\n * adds none. `solid` stays the default, so a role the app gives no look still reads as\n * the header's tag; a role that should sit quieter (keksdose's MEMBER and REVIEWER) sets\n * {@link RoleDefinition.variant} `soft` in the vocabulary. Carries `data-role` with the key.\n */\nexport function AccountRoleChip<R extends string = string>({\n  value: role,\n  roles,\n  onNavigate,\n  renderLink,\n  size = \"sm\",\n  variant,\n  shape = \"square\",\n  caps = true,\n  className,\n  ...rest\n}: AccountRoleChipProps<R>) {\n  if (role === null || role === undefined || role === \"\") return null;\n  const def = roles[role];\n  const look = {\n    ...rest,\n    \"data-role\": role,\n    tone: def?.tone ?? \"neutral\",\n    icon: def?.icon,\n    size,\n    // The prop, then the role's own look, then the header's `solid`.\n    variant: variant ?? def?.variant ?? \"solid\",\n    shape,\n    caps,\n    className,\n  } as const;\n  const label = def?.label ?? role;\n  if (def?.href) {\n    return (\n      <Chip {...look} href={def.href} renderLink={renderLink} onClick={onNavigate ? () => onNavigate() : undefined}>\n        {label}\n      </Chip>\n    );\n  }\n  return <Chip {...look}>{label}</Chip>;\n}\n\n/* ── AccountStateChip ──────────────────────────────────────────────────────── */\n\n/**\n * The states both rosters show, each as the app's own flag maps onto it:\n *\n * - `active` / `inactive` — the account may sign in, or an admin switched it off\n *   (both apps' `is_active`).\n * - `invited` — on the allowlist and mailed, not registered yet (an allowlist row).\n * - `registered` — an allowlist row whose address has an account now (Kurvenschmiede).\n * - `unverified` — the email address is not confirmed (keksdose).\n * - `passwordChange` — must set a new password at the next sign-in (keksdose).\n * - `deletion` — 0.30.0: the user asked for the account to be deleted\n *   (docs/user-admin-harmonization.md §2.1, §6.4). It is deactivated at once and erased\n *   on a date (`after_days`: keksdose, Kurvenschmiede) or by an operator (kastlan). The\n *   chip says the date when there is one ({@link AccountStateChipProps.date}), and\n *   \"Deletion requested\" when there is none. It stands IN PLACE of `inactive`: an\n *   account marked for deletion is always deactivated, and two chips would say it twice.\n *\n * An account can be several at once (inactive AND unverified): render one chip per\n * state, as keksdose's state column does.\n */\nexport type AccountState =\n  \"active\" | \"inactive\" | \"invited\" | \"registered\" | \"unverified\" | \"passwordChange\" | \"deletion\";\n\n/**\n * The `accountState` namespace. One word per state, plus the two forms of `deletion`.\n *\n * The 0.30 keys are OPTIONAL, like every key added to a namespace an app annotates\n * (`const L: AccountStateLabels = {…}`): a new required key would be a compile error in\n * each app on its next update. Left out, they fall back to the provider's, then English.\n */\nexport interface AccountStateLabels extends Record<Exclude<AccountState, \"deletion\">, string> {\n  /** 0.30.0: an account marked for deletion with no date — kastlan's `operator` mode,\n   *  where an operator erases it (§6.4). \"Deletion requested\". */\n  deletion?: string;\n  /** 0.30.0: an account that will be erased on `date`, already formatted in the\n   *  reader's locale — the `after_days` mode. \"Deletion on 6 Nov 2026\". */\n  deletionOn?: (date: string) => string;\n}\n\n// Defined in ./account-chips-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ACCOUNT_STATE_LABELS };\n\n/** The default tone of each state: green for the normal case, red for switched off\n *  (and for going, `deletion`), amber for something the user still has to do, blue for\n *  an open invitation. */\nexport const ACCOUNT_STATE_TONES: Readonly<Record<AccountState, ChipTone>> = {\n  active: \"success\",\n  inactive: \"danger\",\n  invited: \"info\",\n  registered: \"neutral\",\n  unverified: \"warning\",\n  passwordChange: \"warning\",\n  // Red like `inactive`, which it replaces: the account cannot sign in, and it is going.\n  deletion: \"danger\",\n};\n\nexport interface AccountStateChipProps extends AccountChipLook {\n  state: AccountState;\n  /**\n   * 0.30.0, `state=\"deletion\"` only: the day the account will be erased — the row's\n   * `deletion_scheduled_at` (§3.2, §6.4). Formatted as a date in the reader's locale\n   * (\"Deletion on 6 Nov 2026\"), through the provider's `formatDate` when the app set\n   * one, as {@link DateMark} does. Missing or `null` — an operator erases it, so there\n   * is no date — the chip says \"Deletion requested\". Ignored for every other state.\n   */\n  date?: DateInput;\n  /** Over the provider's locale, for the `deletion` date. */\n  locale?: string;\n  /** Over {@link ACCOUNT_STATE_TONES} — Kurvenschmiede draws `inactive` neutral. */\n  tone?: ChipTone;\n  /** Over the label, for an app whose word for the state is its own (\"Deactivated\"). */\n  children?: ReactNode;\n  /** Prop > `<UiKitProvider labels={{ accountState }}>` > English. */\n  labels?: LabelOverride<AccountStateLabels>;\n}\n\n/**\n * An account's state as a chip, in the kit's words and tones. Carries `data-state`\n * with the key.\n */\nexport function AccountStateChip({\n  state,\n  date,\n  locale: localeProp,\n  tone,\n  children,\n  labels: labelsProp,\n  size = \"sm\",\n  variant,\n  shape = \"square\",\n  caps = true,\n  className,\n  ...rest\n}: AccountStateChipProps) {\n  // An `undefined` in the prop is skipped (the provider's merge does that), so an\n  // optional value cannot blank a default.\n  const labels = useKitLabels(\"accountState\", DEFAULT_ACCOUNT_STATE_LABELS, labelsProp);\n  const locale = useKitLocale(localeProp);\n  const fromProvider = useKitDateFormatter();\n  const when = state === \"deletion\" ? toDate(date ?? null) : null;\n  let text: ReactNode;\n  if (state !== \"deletion\") text = labels[state];\n  else if (when) {\n    // A date in a SENTENCE, so no weekday (keksdose's rule, KitDateFormatContext).\n    const day =\n      (fromProvider && fromProvider(toLocalIso(when), { unit: \"day\", source: \"dateMark\", locale, weekday: false })) ||\n      formatDate(when, \"medium\", { locale });\n    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day);\n  } else text = labels.deletion ?? DEFAULT_ACCOUNT_STATE_LABELS.deletion;\n  return (\n    <Chip\n      {...rest}\n      data-state={state}\n      data-date={when ? toLocalIso(when) : undefined}\n      tone={tone ?? ACCOUNT_STATE_TONES[state]}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {children ?? text}\n    </Chip>\n  );\n}\n\n/* ── Date columns ──────────────────────────────────────────────────────────── */\n\nexport interface DateMarkProps {\n  value: DateInput;\n  /**\n   * `\"date\"` (default): the date in `dateStyle` — \"Created\". `\"relative\"`: how long\n   * ago — \"Last login\", where the question is \"recently?\" — with the full date and\n   * time beside it (keksdose's last-seen column; see `absolute`).\n   */\n  display?: \"date\" | \"relative\";\n  /**\n   * Where a `\"relative\"` mark puts the exact date and time (0.32,\n   * docs/text-size-harmonization.md §4: \"relative dates show the absolute one beside\n   * them\", at every size — a touch screen never opens the tooltip it used to live in):\n   * `\"below\"` (default), a muted second line under the words, so a table column keeps\n   * its width; `\"inline\"`, after them on the same line, for a sentence or a wide cell.\n   */\n  absolute?: \"below\" | \"inline\";\n  /** Default `medium`. Under `\"relative\"`, the style of the exact date beside it (default\n   *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. Given, it wins\n   *  over the provider's `formatDate`. */\n  dateStyle?: FormatDateStyle | Intl.DateTimeFormatOptions;\n  /** `formatRelativeTime` options: `numeric`, `style`, `absoluteAfterDays`, `now`. */\n  relative?: Omit<FormatRelativeTimeOptions, \"locale\" | \"empty\" | \"absoluteStyle\">;\n  /** What a missing value reads as. Default \"—\"; a last-login column passes its\n   *  translated \"Never\". */\n  empty?: ReactNode;\n  /** Over the provider's locale. */\n  locale?: string;\n  className?: string;\n}\n\n/**\n * A date in a table cell: a `<time>` with a machine-readable `dateTime`, nowrap and\n * tabular figures, in the provider's locale — or `empty` when there is none.\n *\n * `display=\"date\"` without a `dateStyle` is written by `<UiKitProvider formatDate>` when\n * the app set one (keksdose K12: its `DateCell` exists to put every column's date in the\n * app's date-format preference, weekday and all — dev#546), called with the LOCAL\n * calendar day of the value as `\"YYYY-MM-DD\"` and `weekday: true`. Without one, or for\n * an empty answer, it is `Intl`'s `medium` date as before. The relative display is not\n * a calendar day and keeps `formatRelativeTime`.\n */\nexport function DateMark({\n  value,\n  display = \"date\",\n  dateStyle,\n  relative,\n  absolute = \"below\",\n  empty = EMPTY_FORMATTED_VALUE,\n  locale: localeProp,\n  className,\n}: DateMarkProps) {\n  const locale = useKitLocale(localeProp);\n  const fromProvider = useKitDateFormatter();\n  const date = toDate(value);\n  const cls = cn(\"whitespace-nowrap tabular-nums\", className);\n  if (!date) return <span className={cn(cls, \"text-muted\")}>{empty}</span>;\n  if (display === \"date\") {\n    const own =\n      dateStyle === undefined && fromProvider\n        ? fromProvider(toLocalIso(date), { unit: \"day\", source: \"dateMark\", locale, weekday: true })\n        : \"\";\n    return (\n      <time dateTime={date.toISOString()} className={cls}>\n        {own || formatDate(date, dateStyle ?? \"medium\", { locale })}\n      </time>\n    );\n  }\n  const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? \"medium\" });\n  const exact = formatDate(date, dateStyle ?? \"dateTime\", { locale });\n  // Past `absoluteAfterDays` the relative words already ARE the date; then the exact\n  // line alone, rather than the same day twice.\n  const sameDay = text === formatDate(date, dateStyle ?? \"medium\", { locale });\n  const iso = date.toISOString();\n  if (sameDay) {\n    return (\n      <time dateTime={iso} className={cls}>\n        {exact}\n      </time>\n    );\n  }\n  // The exact date and time in the layout, never only in a tooltip (§4). Still no tab\n  // stop: a roster of fifty rows would be fifty more of them.\n  return (\n    <time\n      dateTime={iso}\n      data-slot=\"date-mark\"\n      className={cn(absolute === \"below\" ? \"inline-flex flex-col leading-tight\" : \"inline\", className)}\n    >\n      <span className=\"whitespace-nowrap tabular-nums\">{text}</span>\n      {absolute === \"inline\" && \" · \"}\n      <span className={cn(\"whitespace-nowrap tabular-nums text-muted\", absolute === \"below\" && \"text-xs\")}>\n        {exact}\n      </span>\n    </time>\n  );\n}\n\nexport interface DateColumnOptions<T> extends Omit<DateMarkProps, \"value\" | \"className\"> {\n  key: string;\n  header: ReactNode;\n  /** The value of this row: an ISO string, epoch ms, a Date, or null for none. */\n  value: (row: T) => DateInput;\n  /** Sortable by the instant; rows with no date sort last either way. Default true. */\n  sortable?: boolean;\n  /** Default `desc` — a date column is sorted to find the newest. */\n  firstSort?: \"asc\" | \"desc\";\n  /** Add the table's from–to date filter over the column. Default false. */\n  filter?: boolean;\n  /** Further column settings (`mobileHidden`, `headClassName`, …), merged over. */\n  column?: Partial<DataTableColumn<T>>;\n}\n\n/**\n * A {@link DataTableColumn} for a date: {@link DateMark} cells, sorted by the instant\n * (newest first on the first click), optionally the date filter. The roster's\n * \"Created\" is `dateColumn({ key, header, value })`; its \"Last login\" adds\n * `display: \"relative\", empty: t(\"never\")`.\n */\nexport function dateColumn<T>({\n  key,\n  header,\n  value,\n  sortable = true,\n  firstSort = \"desc\",\n  filter = false,\n  column,\n  ...mark\n}: DateColumnOptions<T>): DataTableColumn<T> {\n  return {\n    key,\n    header,\n    cell: (row) => <DateMark value={value(row)} {...mark} />,\n    sortBy: sortable ? (row) => toDate(value(row))?.getTime() ?? null : undefined,\n    firstSort: sortable ? firstSort : undefined,\n    filter: filter\n      ? {\n          type: \"date\",\n          // A string goes as it is: the filter reads a timestamp's local day itself.\n          // A Date or epoch value goes as its LOCAL day, the one the cell shows —\n          // `toISOString()` handed over the UTC day, and in Berlin a 00:30 row was\n          // filtered under the day before (round 0.34 BUG-2).\n          getValue: (row) => {\n            const raw = value(row);\n            if (typeof raw === \"string\") return raw;\n            const date = toDate(raw);\n            return date ? toLocalIso(date) : null;\n          },\n        }\n      : undefined,\n    ...column,\n  };\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/account-chips.tsx"],"sourcesContent":["import type { ReactElement, ReactNode } from \"react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { toDate, useKitFormat, EMPTY_FORMATTED_VALUE } from \"../lib/format\";\nimport type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from \"../lib/format\";\nimport { useDayFormatter } from \"../lib/day-format\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { toLocalIso } from \"../lib/dates\";\nimport { Chip } from \"./chip\";\nimport type { ChipLinkProps, ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport type { DataTableColumn } from \"./data-table\";\nimport { DEFAULT_ACCOUNT_STATE_LABELS } from \"./account-chips-labels\";\n\n/**\n * The parts an admin roster repeats (0.18.0) — and only those.\n *\n * Kurvenschmiede (features/admin/users-panel.tsx, allowlist-panel.tsx) and keksdose\n * (features/admin/users-panel.tsx, the allowlist card in admin-page.tsx) each built the\n * same table: name over email, a role, whether the account is active, created, last\n * login, a row of actions, and an allowlist with a note. What they share is not the\n * table — the columns around it (keksdose's plan and privacy mode, Kurvenschmiede's\n * owned-work counts and its role SELECT), the actions and every rule about who may do\n * what are each app's own. What they share is the vocabulary: both spelled the same\n * square, uppercase status chip by hand (keksdose's `Badge` with its own tone map,\n * Kurvenschmiede's inline `<Chip size=\"xs\" shape=\"square\" caps>`), and both formatted\n * their two date columns by hand (`toLocaleDateString` in one, a \"3 days ago\" helper\n * in the other). So: {@link RoleChip}, {@link AccountStateChip} and\n * {@link dateColumn}, and the roster stays the app's `DataTable`.\n */\n\n/** The chip look both rosters use: a square, uppercase status tag. Each can be changed. */\ninterface AccountChipLook {\n  /** Default `sm` — keksdose's roster; Kurvenschmiede's denser lists pass `xs`. */\n  size?: ChipSize;\n  /** Default `soft`. `dot` for a column of them that should not outshout the names. */\n  variant?: ChipVariant;\n  /** Default `square`: a chip in a table cell, beside square controls. */\n  shape?: ChipShape;\n  /** Default true — the status-badge type. */\n  caps?: boolean;\n  className?: string;\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/* ── RoleChip ──────────────────────────────────────────────────────────────── */\n\n/** How one role is drawn. `label` is the app's, translated. */\nexport interface RoleDefinition {\n  label: string;\n  tone?: ChipTone;\n  /**\n   * A lucide component or an element — Kurvenschmiede marks its admins with a shield.\n   * Unlike {@link href} and {@link variant}, it shows EVERYWHERE the role is drawn: in\n   * {@link AccountRoleChip} and in {@link RoleChip} (the roster's column) alike. That is\n   * intended (0.43, keksdose's question): the glyph is part of how the role reads, so the\n   * shield on the header's chip is the shield in the users list. An app that wants the\n   * glyph in one place only hands the other a second vocabulary without `icon`.\n   */\n  icon?: LucideIcon | ReactElement;\n  /**\n   * 0.42.0 (docs/admin-harmonization.md §2.1, settings §12.3): the role's tool — an\n   * admin's `/admin`, a reviewer's `/translations`. {@link AccountRoleChip} is a link to\n   * it; a role without one gets a plain chip. {@link RoleChip} ignores it: a roster's\n   * chips name a role, they are not a way in.\n   */\n  href?: string;\n  /**\n   * 0.42.0 (keksdose build review): this role's look in {@link AccountRoleChip} — keksdose\n   * draws only ADMIN `solid` and its REVIEWER and MEMBER `soft`. Default `solid`, the\n   * header's look; the chip's own `variant` prop wins over it. {@link RoleChip} ignores\n   * it: a roster's column keeps one look, set on the column.\n   */\n  variant?: ChipVariant;\n}\n\n/**\n * Every role an app has, keyed by the value its API sends. Annotate the app's table\n * with it (`const ROLES: RoleVocabulary<UserRole> = {…}`) and TypeScript asks for a\n * label when a role is added.\n */\nexport type RoleVocabulary<R extends string = string> = Readonly<Record<R, RoleDefinition>>;\n\nexport interface RoleChipProps<R extends string = string> extends AccountChipLook {\n  /**\n   * The role key as the API sends it. `null` / `undefined` renders nothing. Named\n   * `value`, not `role`, because `role` on a JSX element is the ARIA role — the lint\n   * rule and every reader would take it for one.\n   */\n  value: R | null | undefined;\n  /** What each key is called and how it is toned. A key missing here is shown as the\n   *  key itself, in `neutral`: an unknown role is still a fact the admin should see. */\n  roles: Readonly<Partial<Record<R, RoleDefinition>>>;\n}\n\n/**\n * A role as a chip: the API's key looked up in the app's {@link RoleVocabulary}.\n *\n * The vocabulary is a prop and not kit English, because the roles are the app's —\n * Kurvenschmiede has admin, member and customer, keksdose admin and user, kastlan its\n * own — and so are their names. Carries `data-role` with the key, for a test or a\n * style hook.\n */\nexport function RoleChip<R extends string = string>({\n  value: role,\n  roles,\n  size = \"sm\",\n  variant,\n  shape = \"square\",\n  caps = true,\n  className,\n  ...rest\n}: RoleChipProps<R>) {\n  if (role === null || role === undefined || role === \"\") return null;\n  const def = roles[role];\n  return (\n    <Chip\n      {...rest}\n      data-role={role}\n      tone={def?.tone ?? \"neutral\"}\n      icon={def?.icon}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {def?.label ?? role}\n    </Chip>\n  );\n}\n\n/* ── AccountRoleChip ───────────────────────────────────────────────────────── */\n\nexport interface AccountRoleChipProps<R extends string = string> extends RoleChipProps<R> {\n  /**\n   * Runs on the way to the role's tool — the account menu's `close`, so the panel does\n   * not stay open over the page it just navigated to (keksdose F7). Only called on a\n   * link chip.\n   */\n  onNavigate?: () => void;\n  /** Your router's link for the role's `href`. Default: the `<UiKitProvider\n   *  linkComponent>`, then `<a>` — {@link Chip}'s `renderLink`. */\n  renderLink?: (props: ChipLinkProps) => ReactElement;\n}\n\n/**\n * The role in the account menu's header (0.42.0, docs/admin-harmonization.md §2.1, §7):\n * {@link RoleChip} in keksdose's look — `solid`, `sm`, `square`, `caps`, the role's icon\n * and tone — made for `TopBarActionMenu`'s `header.extra`:\n *\n *     extra: (close) => <AccountRoleChip value={me.role} roles={ROLES} onNavigate={close} />\n *\n * A role whose {@link RoleDefinition.href} is set is a shortcut to its tool: the chip is a\n * link (through `renderLink`, else the provider's link, as {@link Chip} draws links) and\n * calls `onNavigate` on the click. Any other role is a plain chip — every account shows\n * its role (§7, \"Always a badge\"). The words and tones are the app's vocabulary; the kit\n * adds none. `solid` stays the default, so a role the app gives no look still reads as\n * the header's tag; a role that should sit quieter (keksdose's MEMBER and REVIEWER) sets\n * {@link RoleDefinition.variant} `soft` in the vocabulary. Carries `data-role` with the key.\n */\nexport function AccountRoleChip<R extends string = string>({\n  value: role,\n  roles,\n  onNavigate,\n  renderLink,\n  size = \"sm\",\n  variant,\n  shape = \"square\",\n  caps = true,\n  className,\n  ...rest\n}: AccountRoleChipProps<R>) {\n  if (role === null || role === undefined || role === \"\") return null;\n  const def = roles[role];\n  const look = {\n    ...rest,\n    \"data-role\": role,\n    tone: def?.tone ?? \"neutral\",\n    icon: def?.icon,\n    size,\n    // The prop, then the role's own look, then the header's `solid`.\n    variant: variant ?? def?.variant ?? \"solid\",\n    shape,\n    caps,\n    className,\n  } as const;\n  const label = def?.label ?? role;\n  if (def?.href) {\n    return (\n      <Chip {...look} href={def.href} renderLink={renderLink} onClick={onNavigate ? () => onNavigate() : undefined}>\n        {label}\n      </Chip>\n    );\n  }\n  return <Chip {...look}>{label}</Chip>;\n}\n\n/* ── AccountStateChip ──────────────────────────────────────────────────────── */\n\n/**\n * The states both rosters show, each as the app's own flag maps onto it:\n *\n * - `active` / `inactive` — the account may sign in, or an admin switched it off\n *   (both apps' `is_active`).\n * - `invited` — on the allowlist and mailed, not registered yet (an allowlist row).\n * - `registered` — an allowlist row whose address has an account now (Kurvenschmiede).\n * - `unverified` — the email address is not confirmed (keksdose).\n * - `passwordChange` — must set a new password at the next sign-in (keksdose).\n * - `deletion` — 0.30.0: the user asked for the account to be deleted\n *   (docs/user-admin-harmonization.md §2.1, §6.4). It is deactivated at once and erased\n *   on a date (`after_days`: keksdose, Kurvenschmiede) or by an operator (kastlan). The\n *   chip says the date when there is one ({@link AccountStateChipProps.date}), and\n *   \"Deletion requested\" when there is none. It stands IN PLACE of `inactive`: an\n *   account marked for deletion is always deactivated, and two chips would say it twice.\n *\n * An account can be several at once (inactive AND unverified): render one chip per\n * state, as keksdose's state column does.\n */\nexport type AccountState =\n  \"active\" | \"inactive\" | \"invited\" | \"registered\" | \"unverified\" | \"passwordChange\" | \"deletion\";\n\n/**\n * The `accountState` namespace. One word per state, plus the two forms of `deletion`.\n *\n * The 0.30 keys are OPTIONAL, like every key added to a namespace an app annotates\n * (`const L: AccountStateLabels = {…}`): a new required key would be a compile error in\n * each app on its next update. Left out, they fall back to the provider's, then English.\n */\nexport interface AccountStateLabels extends Record<Exclude<AccountState, \"deletion\">, string> {\n  /** 0.30.0: an account marked for deletion with no date — kastlan's `operator` mode,\n   *  where an operator erases it (§6.4). \"Deletion requested\". */\n  deletion?: string;\n  /** 0.30.0: an account that will be erased on `date`, already formatted in the\n   *  reader's locale — the `after_days` mode. \"Deletion on 6 Nov 2026\". */\n  deletionOn?: (date: string) => string;\n}\n\n// Defined in ./account-chips-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_ACCOUNT_STATE_LABELS };\n\n/** The default tone of each state: green for the normal case, red for switched off\n *  (and for going, `deletion`), amber for something the user still has to do, blue for\n *  an open invitation. */\nexport const ACCOUNT_STATE_TONES: Readonly<Record<AccountState, ChipTone>> = {\n  active: \"success\",\n  inactive: \"danger\",\n  invited: \"info\",\n  registered: \"neutral\",\n  unverified: \"warning\",\n  passwordChange: \"warning\",\n  // Red like `inactive`, which it replaces: the account cannot sign in, and it is going.\n  deletion: \"danger\",\n};\n\nexport interface AccountStateChipProps extends AccountChipLook {\n  state: AccountState;\n  /**\n   * 0.30.0, `state=\"deletion\"` only: the day the account will be erased — the row's\n   * `deletion_scheduled_at` (§3.2, §6.4). Formatted as a date in the reader's locale\n   * (\"Deletion on 6 Nov 2026\"), through the provider's `formatDate` when the app set\n   * one, as {@link DateMark} does. Missing or `null` — an operator erases it, so there\n   * is no date — the chip says \"Deletion requested\". Ignored for every other state.\n   */\n  date?: DateInput;\n  /** Over the provider's locale, for the `deletion` date. */\n  locale?: string;\n  /** Over {@link ACCOUNT_STATE_TONES} — Kurvenschmiede draws `inactive` neutral. */\n  tone?: ChipTone;\n  /** Over the label, for an app whose word for the state is its own (\"Deactivated\"). */\n  children?: ReactNode;\n  /** Prop > `<UiKitProvider labels={{ accountState }}>` > English. */\n  labels?: LabelOverride<AccountStateLabels>;\n}\n\n/**\n * An account's state as a chip, in the kit's words and tones. Carries `data-state`\n * with the key.\n */\nexport function AccountStateChip({\n  state,\n  date,\n  locale: localeProp,\n  tone,\n  children,\n  labels: labelsProp,\n  size = \"sm\",\n  variant,\n  shape = \"square\",\n  caps = true,\n  className,\n  ...rest\n}: AccountStateChipProps) {\n  // An `undefined` in the prop is skipped (the provider's merge does that), so an\n  // optional value cannot blank a default.\n  const labels = useKitLabels(\"accountState\", DEFAULT_ACCOUNT_STATE_LABELS, labelsProp);\n  // The kit's one day ladder: the provider's `formatDate`, else `Intl` in the provider's\n  // locale and `timeZone` (refactor audit 2026-10-30, DUP-2).\n  const day = useDayFormatter(null, localeProp);\n  const when = state === \"deletion\" ? toDate(date ?? null) : null;\n  let text: ReactNode;\n  if (state !== \"deletion\") text = labels[state];\n  else if (when) {\n    // A date in a SENTENCE, so no weekday (keksdose's rule, KitDateFormatContext).\n    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day(date));\n  } else text = labels.deletion ?? DEFAULT_ACCOUNT_STATE_LABELS.deletion;\n  return (\n    <Chip\n      {...rest}\n      data-state={state}\n      data-date={when ? toLocalIso(when) : undefined}\n      tone={tone ?? ACCOUNT_STATE_TONES[state]}\n      size={size}\n      variant={variant}\n      shape={shape}\n      caps={caps}\n      className={className}\n    >\n      {children ?? text}\n    </Chip>\n  );\n}\n\n/* ── Date columns ──────────────────────────────────────────────────────────── */\n\nexport interface DateMarkProps {\n  value: DateInput;\n  /**\n   * `\"date\"` (default): the date in `dateStyle` — \"Created\". `\"relative\"`: how long\n   * ago — \"Last login\", where the question is \"recently?\" — with the full date and\n   * time beside it (keksdose's last-seen column; see `absolute`).\n   */\n  display?: \"date\" | \"relative\";\n  /**\n   * Where a `\"relative\"` mark puts the exact date and time (0.32,\n   * docs/text-size-harmonization.md §4: \"relative dates show the absolute one beside\n   * them\", at every size — a touch screen never opens the tooltip it used to live in):\n   * `\"below\"` (default), a muted second line under the words, so a table column keeps\n   * its width; `\"inline\"`, after them on the same line, for a sentence or a wide cell.\n   */\n  absolute?: \"below\" | \"inline\";\n  /** Default `medium`. Under `\"relative\"`, the style of the exact date beside it (default\n   *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. Given, it wins\n   *  over the provider's `formatDate`. */\n  dateStyle?: FormatDateStyle | Intl.DateTimeFormatOptions;\n  /** `formatRelativeTime` options: `numeric`, `style`, `absoluteAfterDays`, `now`. */\n  relative?: Omit<FormatRelativeTimeOptions, \"locale\" | \"empty\" | \"absoluteStyle\">;\n  /** What a missing value reads as. Default \"—\"; a last-login column passes its\n   *  translated \"Never\". */\n  empty?: ReactNode;\n  /** Over the provider's locale. */\n  locale?: string;\n  className?: string;\n}\n\n/**\n * A date in a table cell: a `<time>` with a machine-readable `dateTime`, nowrap and\n * tabular figures, in the provider's locale and `timeZone` — or `empty` when there is none.\n *\n * `display=\"date\"` without a `dateStyle` is written by `<UiKitProvider formatDate>` when\n * the app set one (keksdose K12: its `DateCell` exists to put every column's date in the\n * app's date-format preference, weekday and all — dev#546), called with the calendar day\n * of the value as `\"YYYY-MM-DD\"` (in the provider's `timeZone`, else the device's) and\n * `weekday: true`. Without one, or for an empty answer, it is `Intl`'s `medium` date as\n * before. The relative display is not a calendar day and keeps `formatRelativeTime`.\n */\nexport function DateMark({\n  value,\n  display = \"date\",\n  dateStyle,\n  relative,\n  absolute = \"below\",\n  empty = EMPTY_FORMATTED_VALUE,\n  locale: localeProp,\n  className,\n}: DateMarkProps) {\n  // The provider's `timeZone` (0.46) as well as its locale, also for the relative words\n  // and the exact line (refactor audit 2026-10-30, DUP-2: the raw formatters ignored it).\n  const { formatDate, formatRelativeTime } = useKitFormat(localeProp);\n  const day = useDayFormatter(null, localeProp);\n  const date = toDate(value);\n  const cls = cn(\"whitespace-nowrap tabular-nums\", className);\n  if (!date) return <span className={cn(cls, \"text-muted\")}>{empty}</span>;\n  if (display === \"date\") {\n    return (\n      <time dateTime={date.toISOString()} className={cls}>\n        {day(value, { weekday: true, style: dateStyle ?? \"medium\", preference: dateStyle === undefined })}\n      </time>\n    );\n  }\n  const text = formatRelativeTime(date, { ...relative, absoluteStyle: dateStyle ?? \"medium\" });\n  const exact = formatDate(date, dateStyle ?? \"dateTime\");\n  // Past `absoluteAfterDays` the relative words already ARE the date; then the exact\n  // line alone, rather than the same day twice.\n  const sameDay = text === formatDate(date, dateStyle ?? \"medium\");\n  const iso = date.toISOString();\n  if (sameDay) {\n    return (\n      <time dateTime={iso} className={cls}>\n        {exact}\n      </time>\n    );\n  }\n  // The exact date and time in the layout, never only in a tooltip (§4). Still no tab\n  // stop: a roster of fifty rows would be fifty more of them.\n  return (\n    <time\n      dateTime={iso}\n      data-slot=\"date-mark\"\n      className={cn(absolute === \"below\" ? \"inline-flex flex-col leading-tight\" : \"inline\", className)}\n    >\n      <span className=\"whitespace-nowrap tabular-nums\">{text}</span>\n      {absolute === \"inline\" && \" · \"}\n      <span className={cn(\"whitespace-nowrap tabular-nums text-muted\", absolute === \"below\" && \"text-xs\")}>\n        {exact}\n      </span>\n    </time>\n  );\n}\n\nexport interface DateColumnOptions<T> extends Omit<DateMarkProps, \"value\" | \"className\"> {\n  key: string;\n  header: ReactNode;\n  /** The value of this row: an ISO string, epoch ms, a Date, or null for none. */\n  value: (row: T) => DateInput;\n  /** Sortable by the instant; rows with no date sort last either way. Default true. */\n  sortable?: boolean;\n  /** Default `desc` — a date column is sorted to find the newest. */\n  firstSort?: \"asc\" | \"desc\";\n  /** Add the table's from–to date filter over the column. Default false. */\n  filter?: boolean;\n  /** Further column settings (`mobileHidden`, `headClassName`, …), merged over. */\n  column?: Partial<DataTableColumn<T>>;\n}\n\n/**\n * A {@link DataTableColumn} for a date: {@link DateMark} cells, sorted by the instant\n * (newest first on the first click), optionally the date filter. The roster's\n * \"Created\" is `dateColumn({ key, header, value })`; its \"Last login\" adds\n * `display: \"relative\", empty: t(\"never\")`.\n */\nexport function dateColumn<T>({\n  key,\n  header,\n  value,\n  sortable = true,\n  firstSort = \"desc\",\n  filter = false,\n  column,\n  ...mark\n}: DateColumnOptions<T>): DataTableColumn<T> {\n  return {\n    key,\n    header,\n    cell: (row) => <DateMark value={value(row)} {...mark} />,\n    sortBy: sortable ? (row) => toDate(value(row))?.getTime() ?? null : undefined,\n    firstSort: sortable ? firstSort : undefined,\n    filter: filter\n      ? {\n          type: \"date\",\n          // A string goes as it is: the filter reads a timestamp's local day itself.\n          // A Date or epoch value goes as its LOCAL day, the one the cell shows —\n          // `toISOString()` handed over the UTC day, and in Berlin a 00:30 row was\n          // filtered under the day before (round 0.34 BUG-2).\n          getValue: (row) => {\n            const raw = value(row);\n            if (typeof raw === \"string\") return raw;\n            const date = toDate(raw);\n            return date ? toLocalIso(date) : null;\n          },\n        }\n      : undefined,\n    ...column,\n  };\n}\n"],"mappings":"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","names":[]}

package/dist/components/alert-banner.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from "react";
+import type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref, RefObject } from "react";
 /** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's
  *  preview and beta-performance banners, which borrowed `warning` for want of it and
  *  so told every user of the preview build that something was wrong. */
@@ -90,10 +90,21 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
     /** Replaces the tone's glyph — a `<Spinner label={null} />` for "Solving…", say.
      *  `null` draws none. Always decorative; the text carries the message. */
     icon?: ReactNode;
-    /** Renders an × at the end that calls this. The banner does not hide itself — the
-     *  caller removes it (and remembers that it did), as with every other kit control
-     *  whose state is app state. */
+    /**
+     * Renders an × at the end that calls this. The banner does not hide itself — the
+     * caller removes it (and remembers that it did), as with every other kit control
+     * whose state is app state.
+     *
+     * The focus (0.52, refactor audit 2026-10-30, DSP-15): the × that held it goes with the
+     * banner, and it fell to `<body>`. When the banner unmounts after its × was pressed and
+     * the focus has nowhere else, it moves on to the next control after the banner — where
+     * Tab from the × would have gone — or, at the end of the page, the one before it; to
+     * {@link dismissFocusRef} when given. A banner the caller keeps keeps its ×'s focus.
+     */
     onDismiss?: () => void;
+    /** Where the focus goes once the × has removed the banner (DSP-15) — a heading, the
+     *  control the banner was about. Default: the next control after the banner. */
+    dismissFocusRef?: RefObject<HTMLElement | null>;
     /** Accessible name of the ×. Default: `common.dismiss` from the
      *  {@link UiKitProvider}, else "Dismiss". */
     dismissLabel?: string;
@@ -167,5 +178,5 @@ export type AlertBannerProps = AlertBannerBaseProps & ({
 });
 /** Warning/danger/info callout box with the shared frame and an icon — or, with
  *  `variant="inline"`, the same message as a frameless line of toned text. */
-export declare function AlertBanner({ tone, variant, size, block, live, elevated, action, icon, onDismiss, dismissLabel, clampMobile, actionPlacement, href, onClick, className, children, role, ref, ...rest }: AlertBannerProps): import("react").JSX.Element;
+export declare function AlertBanner({ tone, variant, size, block, live, elevated, action, icon, onDismiss, dismissFocusRef, dismissLabel, clampMobile, actionPlacement, href, onClick, className, children, role, ref, ...rest }: AlertBannerProps): import("react").JSX.Element;
 export {};

package/dist/components/alert-banner.js

@@ -1,10 +1,11 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useId, useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+import { focusFirst, focusIsLost, tabStopsAround, whenFocusLeftForNothing } from "../lib/focus-left.js";
 const TONE_FRAME = {
   danger: "border-2 border-danger-strong bg-danger-soft",
   warning: "border-2 border-warning bg-warning-soft",
@@ -61,6 +62,7 @@ function AlertBanner({
   action,
   icon,
   onDismiss,
+  dismissFocusRef,
   dismissLabel,
   clampMobile = false,
   actionPlacement = "own-line",
@@ -93,6 +95,21 @@ function AlertBanner({
     ro?.observe(el);
     return () => ro?.disconnect();
   }, [clamp, expanded, children]);
+  const dismissedFrom = useRef(null);
+  const dismissTarget = useRef(dismissFocusRef);
+  useLayoutEffect(() => {
+    dismissTarget.current = dismissFocusRef;
+  });
+  const unwatchFocus = useRef(null);
+  useEffect(
+    () => () => {
+      unwatchFocus.current?.();
+      const around = dismissedFrom.current;
+      if (!around || !focusIsLost()) return;
+      focusFirst([dismissTarget.current?.current, ...around]);
+    },
+    []
+  );
   const Glyph = TONE_GLYPH[tone];
   const nudge = inlineRow || strip ? void 0 : sm ? "mt-px" : "mt-0.5";
   const glyph = icon === null ? null : icon !== void 0 ? /* @__PURE__ */ jsx(
@@ -181,6 +198,34 @@ function AlertBanner({
       onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
+        const frame2 = e.currentTarget.parentElement;
+        if (frame2 && e.currentTarget.ownerDocument.activeElement === e.currentTarget) {
+          const { after, before } = tabStopsAround(frame2);
+          dismissedFrom.current = [...after, ...before];
+          unwatchFocus.current?.();
+          const doc = frame2.ownerDocument;
+          const forget = () => {
+            dismissedFrom.current = null;
+            unwatch();
+          };
+          const onFocusIn = (event) => {
+            if (event.target instanceof Node && frame2.contains(event.target)) return;
+            forget();
+          };
+          const onFocusOut = (event) => {
+            whenFocusLeftForNothing(event, () => {
+              if (unwatchFocus.current === unwatch) forget();
+            });
+          };
+          const unwatch = () => {
+            doc.removeEventListener("focusin", onFocusIn, true);
+            frame2.removeEventListener("focusout", onFocusOut);
+            unwatchFocus.current = null;
+          };
+          doc.addEventListener("focusin", onFocusIn, true);
+          frame2.addEventListener("focusout", onFocusOut);
+          unwatchFocus.current = unwatch;
+        }
         onDismiss();
       },
       className: cn(

package/dist/components/alert-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-danger-strong bg-danger-soft\",\n  warning: \"border-2 border-warning bg-warning-soft\",\n  info: \"border-2 border-info bg-info-soft\",\n  success: \"border-2 border-success bg-success-soft\",\n  neutral: \"border border-subtle\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-surface shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout.\n *\n * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure\n * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,\n * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`\n * at 125 %, and toggling the tone shifted the layout again. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[calc(0.75rem-1px)]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(TONE_FRAME[tone], \"rounded-none border-0 border-b\", size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\");\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-secondary\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-muted\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  /**\n   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,\n   * with a \"More\" / \"Less\" toggle after it (`aria-expanded`, `aria-controls` the message;\n   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only\n   * shows while the line actually cuts the message off.\n   *\n   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above\n   * every phone screen, and the app built the clamp and the button around the banner's\n   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot\n   * sit inside the row's own link or button.\n   *\n   * 0.51 (kastlan K1): on a `strip` the clamped message claims 7rem instead of 12rem below\n   * `md`, so the {@link action} stays on its line rather than taking one of its own.\n   *\n   * For a one-line MESSAGE (a sentence or two). Not for a body with a list or a control in\n   * it: the clamp cuts the box to its first line, so a Disclosure's or a link's trigger\n   * past it is clipped out of sight and still takes the keyboard's focus, and \"More\" gives\n   * back the whole body at once. Shorten such a banner instead — one sentence, its action,\n   * and the rest behind a Disclosure of its own (keksdose's agree-again notice, 0.51).\n   */\n  clampMobile?: boolean;\n  /**\n   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.\n   *\n   * `own-line` (default): a line of its own under the message, lined up with it\n   * (kastlan 53 — a long message beside a long button squeezed into a column).\n   *\n   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the\n   * next line — for a short message and a short action, which a line of their own each\n   * would stack for nothing. keksdose dev #623: the budget card's \"5 underfunded\n   * categories\" + \"Assign\" built this with descendant overrides on the kit's classes.\n   * The basis is in rem, so it grows with the text size: at Large the action drops a\n   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works\n   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this\n   * already) and `inline`.\n   */\n  actionPlacement?: \"own-line\" | \"flow\";\n  children: ReactNode;\n  /**\n   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit\n   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or\n   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside\n   * that row, the `<div>` holding the two. Hence `HTMLElement`.\n   */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  clampMobile = false,\n  actionPlacement = \"own-line\",\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ref,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds\n  // it all (then there is nothing to show \"More\" of). Measured while collapsed — the\n  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box\n  // changes size, which a rotation or crossing `md` does. With no layout (a test, the\n  // server) the box is 0 tall, which reads as \"may not fit\": the toggle stays.\n  const clamp = clampMobile && !interactive;\n  const bodyId = useId();\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  const [fits, setFits] = useState(false);\n  useLayoutEffect(() => {\n    const el = bodyRef.current;\n    if (!clamp || expanded || !el) return;\n    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);\n    check();\n    const ro = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(check);\n    ro?.observe(el);\n    return () => ro?.disconnect();\n  }, [clamp, expanded, children]);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box\n  // squeezed \"Please confirm your email address…\" into a ~100px column beside a\n  // \"Resend verification email\" button. There the action takes a line of its own under\n  // the message, and the × stays at the top end; from sm up the box is one row as before.\n  const boxAction = !inline && !strip && action !== undefined && action !== null;\n  // `flow` (0.48): glyph + message and the action in a row of their own that wraps\n  // below sm; the × stays outside it, at the top end.\n  const flow = boxAction && actionPlacement === \"flow\";\n  const boxWraps = boxAction && !flow;\n  const flowRow = cn(\"flex min-w-0 flex-1 items-center max-sm:flex-wrap\", sm ? \"gap-1.5\" : \"gap-2\");\n  // The 10rem the message keeps beside the action before the action wraps.\n  const flowBasis = flow ? \"max-sm:basis-40\" : undefined;\n  const row = cn(\n    inlineRow\n      ? \"inline-flex items-center\"\n      : strip\n        ? \"flex flex-wrap items-center gap-y-1\"\n        : cn(\"flex items-start\", boxWraps && \"max-sm:flex-wrap max-sm:gap-y-2\"),\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,\n  // which never makes a wrapping row wrap — the action and the × squeezed the message\n  // into a three-word column on a phone instead. With a real basis the action drops to\n  // a second line once message + action no longer fit, and the message keeps the width.\n  const grow = strip ? \"flex-[1_1_12rem]\" : \"flex-1\";\n  // …except a CLAMPED strip on a phone (0.51, kastlan K1 / prod #22, KX-5). There the\n  // message is one line whatever its width (the rest is behind \"More\"), so the 12rem only\n  // pushed the action under it: \"Erneut senden\" took a line of its own on a 390px phone,\n  // and kastlan's banner stood 71px where one line is 43. The clamp needs its \"More\" and\n  // the first words beside it, so below `md` the basis is 7rem (~4rem of text). Measured\n  // in Chromium at 390 × 844, kastlan's `mx-4` strip (326px inside): one line, 43px, in\n  // all seven catalogues, with Roboto and with the wider DejaVu Sans; French, the longest\n  // \"Send again\", keeps 8px. At 360px French (and Spanish in DejaVu) still drop a line.\n  // A rem basis like the 12rem, so at Large the action drops a line sooner, by itself.\n  // From `md` up the clamp is off and the 12rem holds; without `clampMobile` nothing moves.\n  const clampBasis = strip && clamp ? \"max-md:basis-28\" : undefined;\n  // Inside a whole-row banner's button or link, which then carries `grow` itself.\n  const nested = interactive && (onDismiss !== undefined || (action !== undefined && action !== null));\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing = cn(FOCUS_RING, \"focus-visible:ring-offset-1 focus-visible:ring-offset-surface\");\n\n  // The message's box: a `<div>` (0.51), so a banner may hold block content — keksdose's\n  // agree-again notice has a list and a Disclosure in it, which inside the `<span>` this was\n  // were block elements in phrasing content. A `<span>` still in a whole-row banner, whose\n  // `<a>` / `<button>` takes phrasing content only.\n  const Body = interactive ? \"span\" : \"div\";\n  const contentBody = clamp ? (\n    // Below `md` a row: the message, clamped, then the toggle on its baseline. From\n    // `md` up a plain box with the message in it, as without the prop. (Never a whole-row\n    // banner, so always a `<div>`.)\n    <div\n      className={cn(\n        !inlineRow && grow,\n        clampBasis,\n        \"min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2\",\n      )}\n    >\n      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's\n          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}\n      <div\n        id={bodyId}\n        ref={bodyRef}\n        data-truncate-ok=\"\"\n        className={cn(\"max-md:min-w-0\", !expanded && \"max-md:line-clamp-1\")}\n      >\n        {children}\n      </div>\n      {(expanded || !fits) && (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-controls={bodyId}\n          onClick={() => setExpanded((v) => !v)}\n          className={cn(\n            \"relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden\",\n            focusRing,\n          )}\n        >\n          {expanded ? common.showLess : common.showMore}\n        </button>\n      )}\n    </div>\n  ) : (\n    <Body className={cn(!inlineRow && (nested ? \"flex-1\" : grow), \"min-w-0 text-start\")}>{children}</Body>\n  );\n  const content = (\n    <>\n      {glyph}\n      {contentBody}\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px\n  // past a 360 px phone at Extra large (the demo strip's \"Request access\" and \"Sign in\",\n  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,\n  // nothing changes.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div\n        className={cn(\n          \"relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2\",\n          !strip && !inlineRow && \"self-center\",\n          (strip || flow) && \"ms-auto\",\n          // Last, on a line of its own, lined up with the message (past the glyph).\n          boxWraps && cn(\"max-sm:order-last max-sm:basis-full\", glyph && (sm ? \"max-sm:ps-5\" : \"max-sm:ps-6\")),\n        )}\n      >\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a\n        // test or a caller's selector, where the frame classes are the kit's to change.\n        data-tone={tone}\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {flow ? (\n          <>\n            <div className={flowRow} data-action-flow=\"\">\n              {/* The glyph rides with the message, on its first line; the two are\n                  centred against the action as one, as the whole-row button is. */}\n              <div className={cn(\"flex min-w-0 flex-1 items-start\", flowBasis, sm ? \"gap-1.5\" : \"gap-2\")}>\n                {glyph}\n                {contentBody}\n              </div>\n              {trailing}\n            </div>\n          </>\n        ) : (\n          <>\n            {content}\n            {trailing}\n          </>\n        )}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 text-start\",\n        grow,\n        flowBasis,\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-focus focus-visible:after:ring-brand\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n  // The `ref` goes with the rest: to the row element when it is the frame.\n  const rowRef = split ? undefined : ref;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        ref={rowRef as Ref<HTMLAnchorElement> | undefined}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        ref={rowRef as Ref<HTMLButtonElement> | undefined}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      data-tone={tone}\n      {...rest}\n      ref={ref as Ref<HTMLDivElement>}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {flow ? (\n        // Not positioned: the row's stretched `after:` target must still cover the frame.\n        <div className={flowRow} data-action-flow=\"\">\n          {rowAction}\n          {trailing}\n        </div>\n      ) : (\n        <>\n          {rowAction}\n          {trailing}\n        </>\n      )}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import { useEffect, useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref, RefObject } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { focusFirst, focusIsLost, tabStopsAround, whenFocusLeftForNothing } from \"../lib/focus-left\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-danger-strong bg-danger-soft\",\n  warning: \"border-2 border-warning bg-warning-soft\",\n  info: \"border-2 border-info bg-info-soft\",\n  success: \"border-2 border-success bg-success-soft\",\n  neutral: \"border border-subtle\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-surface shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout.\n *\n * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure\n * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,\n * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`\n * at 125 %, and toggling the tone shifted the layout again. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[calc(0.75rem-1px)]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(TONE_FRAME[tone], \"rounded-none border-0 border-b\", size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\");\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-secondary\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-muted\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /**\n   * Renders an × at the end that calls this. The banner does not hide itself — the\n   * caller removes it (and remembers that it did), as with every other kit control\n   * whose state is app state.\n   *\n   * The focus (0.52, refactor audit 2026-10-30, DSP-15): the × that held it goes with the\n   * banner, and it fell to `<body>`. When the banner unmounts after its × was pressed and\n   * the focus has nowhere else, it moves on to the next control after the banner — where\n   * Tab from the × would have gone — or, at the end of the page, the one before it; to\n   * {@link dismissFocusRef} when given. A banner the caller keeps keeps its ×'s focus.\n   */\n  onDismiss?: () => void;\n  /** Where the focus goes once the × has removed the banner (DSP-15) — a heading, the\n   *  control the banner was about. Default: the next control after the banner. */\n  dismissFocusRef?: RefObject<HTMLElement | null>;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  /**\n   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,\n   * with a \"More\" / \"Less\" toggle after it (`aria-expanded`, `aria-controls` the message;\n   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only\n   * shows while the line actually cuts the message off.\n   *\n   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above\n   * every phone screen, and the app built the clamp and the button around the banner's\n   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot\n   * sit inside the row's own link or button.\n   *\n   * 0.51 (kastlan K1): on a `strip` the clamped message claims 7rem instead of 12rem below\n   * `md`, so the {@link action} stays on its line rather than taking one of its own.\n   *\n   * For a one-line MESSAGE (a sentence or two). Not for a body with a list or a control in\n   * it: the clamp cuts the box to its first line, so a Disclosure's or a link's trigger\n   * past it is clipped out of sight and still takes the keyboard's focus, and \"More\" gives\n   * back the whole body at once. Shorten such a banner instead — one sentence, its action,\n   * and the rest behind a Disclosure of its own (keksdose's agree-again notice, 0.51).\n   */\n  clampMobile?: boolean;\n  /**\n   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.\n   *\n   * `own-line` (default): a line of its own under the message, lined up with it\n   * (kastlan 53 — a long message beside a long button squeezed into a column).\n   *\n   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the\n   * next line — for a short message and a short action, which a line of their own each\n   * would stack for nothing. keksdose dev #623: the budget card's \"5 underfunded\n   * categories\" + \"Assign\" built this with descendant overrides on the kit's classes.\n   * The basis is in rem, so it grows with the text size: at Large the action drops a\n   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works\n   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this\n   * already) and `inline`.\n   */\n  actionPlacement?: \"own-line\" | \"flow\";\n  children: ReactNode;\n  /**\n   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit\n   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or\n   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside\n   * that row, the `<div>` holding the two. Hence `HTMLElement`.\n   */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissFocusRef,\n  dismissLabel,\n  clampMobile = false,\n  actionPlacement = \"own-line\",\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ref,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds\n  // it all (then there is nothing to show \"More\" of). Measured while collapsed — the\n  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box\n  // changes size, which a rotation or crossing `md` does. With no layout (a test, the\n  // server) the box is 0 tall, which reads as \"may not fit\": the toggle stays.\n  const clamp = clampMobile && !interactive;\n  const bodyId = useId();\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  const [fits, setFits] = useState(false);\n  useLayoutEffect(() => {\n    const el = bodyRef.current;\n    if (!clamp || expanded || !el) return;\n    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);\n    check();\n    const ro = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(check);\n    ro?.observe(el);\n    return () => ro?.disconnect();\n  }, [clamp, expanded, children]);\n\n  // The ×'s focus, once the caller has removed the banner (DSP-15). Where it can go is read\n  // at the press, while the banner still has a place in the page to measure from; whether\n  // it must is decided at the unmount, in the cleanup of a passive effect — after React has\n  // taken the banner's DOM away, when a focus that fell with it is on <body>.\n  const dismissedFrom = useRef<HTMLElement[] | null>(null);\n  const dismissTarget = useRef(dismissFocusRef);\n  useLayoutEffect(() => {\n    dismissTarget.current = dismissFocusRef;\n  });\n  // The note lives until the focus lands outside the banner (0.52 code review,\n  // alert-banner.tsx). A caller that keeps the banner — an async dismiss that failed, a\n  // snooze — left it standing, and the banner's unmount long after, a route change with\n  // the focus on <body>, sent the focus to a stop noted at the press, over the app's own\n  // handling of a new page. A `focusin` on the document, not a `focusout` on the banner:\n  // a browser that blurs a removed node would drop the note at the very removal it is for.\n  // The one `focusout` heard is a move to nothing — a click on the page — and only once a\n  // microtask has shown the × still in place (`whenFocusLeftForNothing`). A focus that\n  // stays on the × keeps the note, however late the removal: that is DSP-15's own case,\n  // an async dismiss whose request resolves.\n  const unwatchFocus = useRef<(() => void) | null>(null);\n  useEffect(\n    () => () => {\n      unwatchFocus.current?.();\n      const around = dismissedFrom.current;\n      if (!around || !focusIsLost()) return;\n      focusFirst([dismissTarget.current?.current, ...around]);\n    },\n    [],\n  );\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box\n  // squeezed \"Please confirm your email address…\" into a ~100px column beside a\n  // \"Resend verification email\" button. There the action takes a line of its own under\n  // the message, and the × stays at the top end; from sm up the box is one row as before.\n  const boxAction = !inline && !strip && action !== undefined && action !== null;\n  // `flow` (0.48): glyph + message and the action in a row of their own that wraps\n  // below sm; the × stays outside it, at the top end.\n  const flow = boxAction && actionPlacement === \"flow\";\n  const boxWraps = boxAction && !flow;\n  const flowRow = cn(\"flex min-w-0 flex-1 items-center max-sm:flex-wrap\", sm ? \"gap-1.5\" : \"gap-2\");\n  // The 10rem the message keeps beside the action before the action wraps.\n  const flowBasis = flow ? \"max-sm:basis-40\" : undefined;\n  const row = cn(\n    inlineRow\n      ? \"inline-flex items-center\"\n      : strip\n        ? \"flex flex-wrap items-center gap-y-1\"\n        : cn(\"flex items-start\", boxWraps && \"max-sm:flex-wrap max-sm:gap-y-2\"),\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,\n  // which never makes a wrapping row wrap — the action and the × squeezed the message\n  // into a three-word column on a phone instead. With a real basis the action drops to\n  // a second line once message + action no longer fit, and the message keeps the width.\n  const grow = strip ? \"flex-[1_1_12rem]\" : \"flex-1\";\n  // …except a CLAMPED strip on a phone (0.51, kastlan K1 / prod #22, KX-5). There the\n  // message is one line whatever its width (the rest is behind \"More\"), so the 12rem only\n  // pushed the action under it: \"Erneut senden\" took a line of its own on a 390px phone,\n  // and kastlan's banner stood 71px where one line is 43. The clamp needs its \"More\" and\n  // the first words beside it, so below `md` the basis is 7rem (~4rem of text). Measured\n  // in Chromium at 390 × 844, kastlan's `mx-4` strip (326px inside): one line, 43px, in\n  // all seven catalogues, with Roboto and with the wider DejaVu Sans; French, the longest\n  // \"Send again\", keeps 8px. At 360px French (and Spanish in DejaVu) still drop a line.\n  // A rem basis like the 12rem, so at Large the action drops a line sooner, by itself.\n  // From `md` up the clamp is off and the 12rem holds; without `clampMobile` nothing moves.\n  const clampBasis = strip && clamp ? \"max-md:basis-28\" : undefined;\n  // Inside a whole-row banner's button or link, which then carries `grow` itself.\n  const nested = interactive && (onDismiss !== undefined || (action !== undefined && action !== null));\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing = cn(FOCUS_RING, \"focus-visible:ring-offset-1 focus-visible:ring-offset-surface\");\n\n  // The message's box: a `<div>` (0.51), so a banner may hold block content — keksdose's\n  // agree-again notice has a list and a Disclosure in it, which inside the `<span>` this was\n  // were block elements in phrasing content. A `<span>` still in a whole-row banner, whose\n  // `<a>` / `<button>` takes phrasing content only.\n  const Body = interactive ? \"span\" : \"div\";\n  const contentBody = clamp ? (\n    // Below `md` a row: the message, clamped, then the toggle on its baseline. From\n    // `md` up a plain box with the message in it, as without the prop. (Never a whole-row\n    // banner, so always a `<div>`.)\n    <div\n      className={cn(\n        !inlineRow && grow,\n        clampBasis,\n        \"min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2\",\n      )}\n    >\n      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's\n          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}\n      <div\n        id={bodyId}\n        ref={bodyRef}\n        data-truncate-ok=\"\"\n        className={cn(\"max-md:min-w-0\", !expanded && \"max-md:line-clamp-1\")}\n      >\n        {children}\n      </div>\n      {(expanded || !fits) && (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-controls={bodyId}\n          onClick={() => setExpanded((v) => !v)}\n          className={cn(\n            \"relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden\",\n            focusRing,\n          )}\n        >\n          {expanded ? common.showLess : common.showMore}\n        </button>\n      )}\n    </div>\n  ) : (\n    <Body className={cn(!inlineRow && (nested ? \"flex-1\" : grow), \"min-w-0 text-start\")}>{children}</Body>\n  );\n  const content = (\n    <>\n      {glyph}\n      {contentBody}\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        const frame = e.currentTarget.parentElement;\n        // Only a × that holds the focus has one to lose (0.52 code review, alert-banner.tsx):\n        // Safari focuses no button on a click, nor on an iOS tap, and with the focus on\n        // <body> already the removal sent it on — a ring, on a form field the on-screen\n        // keyboard, on a page the user was reading with the pointer.\n        if (frame && e.currentTarget.ownerDocument.activeElement === e.currentTarget) {\n          const { after, before } = tabStopsAround(frame);\n          dismissedFrom.current = [...after, ...before];\n          unwatchFocus.current?.();\n          const doc = frame.ownerDocument;\n          const forget = () => {\n            dismissedFrom.current = null;\n            unwatch();\n          };\n          const onFocusIn = (event: FocusEvent) => {\n            if (event.target instanceof Node && frame.contains(event.target)) return;\n            forget();\n          };\n          // Focus that left for nothing — a click on the page — took no `focusin` with it\n          // (0.52 code review): the user moved on all the same.\n          const onFocusOut = (event: FocusEvent) => {\n            whenFocusLeftForNothing(event, () => {\n              if (unwatchFocus.current === unwatch) forget();\n            });\n          };\n          const unwatch = () => {\n            doc.removeEventListener(\"focusin\", onFocusIn, true);\n            frame.removeEventListener(\"focusout\", onFocusOut);\n            unwatchFocus.current = null;\n          };\n          doc.addEventListener(\"focusin\", onFocusIn, true);\n          frame.addEventListener(\"focusout\", onFocusOut);\n          unwatchFocus.current = unwatch;\n        }\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px\n  // past a 360 px phone at Extra large (the demo strip's \"Request access\" and \"Sign in\",\n  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,\n  // nothing changes.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div\n        className={cn(\n          \"relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2\",\n          !strip && !inlineRow && \"self-center\",\n          (strip || flow) && \"ms-auto\",\n          // Last, on a line of its own, lined up with the message (past the glyph).\n          boxWraps && cn(\"max-sm:order-last max-sm:basis-full\", glyph && (sm ? \"max-sm:ps-5\" : \"max-sm:ps-6\")),\n        )}\n      >\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a\n        // test or a caller's selector, where the frame classes are the kit's to change.\n        data-tone={tone}\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {flow ? (\n          <>\n            <div className={flowRow} data-action-flow=\"\">\n              {/* The glyph rides with the message, on its first line; the two are\n                  centred against the action as one, as the whole-row button is. */}\n              <div className={cn(\"flex min-w-0 flex-1 items-start\", flowBasis, sm ? \"gap-1.5\" : \"gap-2\")}>\n                {glyph}\n                {contentBody}\n              </div>\n              {trailing}\n            </div>\n          </>\n        ) : (\n          <>\n            {content}\n            {trailing}\n          </>\n        )}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 text-start\",\n        grow,\n        flowBasis,\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-focus focus-visible:after:ring-brand\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n  // The `ref` goes with the rest: to the row element when it is the frame.\n  const rowRef = split ? undefined : ref;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        ref={rowRef as Ref<HTMLAnchorElement> | undefined}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        ref={rowRef as Ref<HTMLButtonElement> | undefined}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      data-tone={tone}\n      {...rest}\n      ref={ref as Ref<HTMLDivElement>}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {flow ? (\n        // Not positioned: the row's stretched `after:` target must still cover the frame.\n        <div className={flowRow} data-action-flow=\"\">\n          {rowAction}\n          {trailing}\n        </div>\n      ) : (\n        <>\n          {rowAction}\n          {trailing}\n        </>\n      )}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":["frame"]}

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

@@ -234,10 +234,15 @@ export interface AmountInputProps extends FieldHelpProps, DataAttributes {
     max?: number;
     /**
      * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the
-     * numpad's "=" and on every result the calculator writes back, never on a keystroke
-     * ("1200+" is not a figure yet). `onChange` still reports every keystroke; this is
-     * for a host that stores a number and must not see drafts (kastlan 52; see
-     * {@link MoneyField}, which is built on it).
+     * numpad's "=" and once per calculator session (its "=" or Enter in its display, or
+     * the pad closing on a result not committed yet), never on a keystroke ("1200+" is
+     * not a figure yet). `onChange` still reports every keystroke and every result the
+     * calculator writes back; this is for a host that stores a number and must not see
+     * drafts (kastlan 52; see {@link MoneyField}, which is built on it).
+     *
+     * Refactor audit 2026-10-30, INP-1: every calculator keystroke that resolved used to
+     * commit, so "100+50" committed 105 on its way to 150 — keksdose saved both, and its
+     * threshold field, `disabled` while it saves, lost the calculator to the first.
      */
     onCommit?: (value: string) => void;
     /**
@@ -276,4 +281,17 @@ export interface AmountInputProps extends FieldHelpProps, DataAttributes {
      *  was `forwardRef`. */
     ref?: Ref<HTMLInputElement>;
 }
+/**
+ * The figure's colour per {@link AmountInputProps.tone} — public as `AMOUNT_TONE_CLASS`,
+ * for a table cell or a test that must paint the same figure the same way (keksdose's
+ * receipt lines, dev#556).
+ *
+ * The consuming app's ONE money palette (`--money-expense` / `--money-income`), not a
+ * bespoke rose/emerald pairing: a figure being typed has to wear the same colour the same
+ * figure will wear once it is a row in the table behind the form (Keksdose dev#434). The
+ * utilities are unlayered and theme-aware, so no `dark:` variant is needed and they win
+ * over the field's own text colour regardless of where `cn` puts them.
+ */
+declare const TONE_CLASS: Readonly<Record<NonNullable<AmountInputProps["tone"]>, string>>;
+export { TONE_CLASS as AMOUNT_TONE_CLASS };
 export declare function AmountInput(props: AmountInputProps): import("react").JSX.Element;

package/dist/components/amount-input.js

@@ -227,10 +227,9 @@ function AmountInput(props) {
                     value: derived,
                     onChange: (result, expression) => {
                       setDraft(null);
-                      const settled = settle(result);
-                      handleText(settled, expression);
-                      onCommit?.(settled);
+                      handleText(settle(result), expression);
                     },
+                    onCommit: (result) => onCommit?.(settle(result)),
                     className: "px-1.5",
                     "aria-label": labels?.calculatorTrigger,
                     labels: labels?.calculator
@@ -325,6 +324,7 @@ function LockedOrNot({
   return /* @__PURE__ */ jsx(LockedReason, { lock, display, className: "block w-full", children });
 }
 export {
+  TONE_CLASS as AMOUNT_TONE_CLASS,
   AmountInput
 };
 //# sourceMappingURL=amount-input.js.map