@eifi1/ui-kit 0.21.0 → 0.22.0

package/dist/chart.d.ts

@@ -13,8 +13,10 @@ export { TimeTickUnit } from './components/series-chart-ticks.js';
 import 'recharts';
 import 'react';
 import './lib/direction.js';
-import './kit-labels-D1J2_jyD.js';
-import './components/data-table-labels.js';
+import './kit-labels-R8mIAc9N.js';
+import './data-table-labels-B7OdnM0S.js';
+import './components/data-table-sort.js';
+import './components/swipeable-row.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
 import './components/popover.js';
@@ -35,7 +37,6 @@ import './components/sparkline.js';
 import './components/stat-tile.js';
 import './components/signature-pad.js';
 import './components/password-strength.js';
-import './components/danger-confirm.js';
 import './components/swatch-picker.js';
 import './components/tile-radio.js';
 import './components/icon-picker.js';
@@ -43,11 +44,10 @@ import './components/dialog-frame.js';
 import './components/modal.js';
 import './hooks/use-search-param-state.js';
 import './components/measured-grid.js';
-import './feedback-attachment-WFiXJ8We.js';
+import './feedback-attachment-NhUm7Zga.js';
 import './feedback/feedback-thread.js';
 import './feedback/feedback-inbox.js';
 import './components/account-settings-labels.js';
-import './components/confirm-dialog.js';
 import './components/floating-panel.js';
 import './components/bulk-action-bar.js';
 import './components/list.js';
@@ -66,11 +66,13 @@ import './components/write-lock.js';
 import './components/legal.js';
 import './components/account-chips.js';
 import './lib/format.js';
-import './data-table-3mi2R3so.js';
-import './components/data-table-sort.js';
-import './components/swipeable-row.js';
 import './components/reauth-dialog.js';
 import './components/server-wake.js';
 import './lib/server-wake.js';
 import './components/translation-review-labels.js';
 import './lib/translation-review.js';
+import './components/country-select.js';
+import './components/inline-edit-field.js';
+import './lib/iban.js';
+import './lib/phone.js';
+import './components/sign-chip.js';

package/dist/components/account-chips.d.ts

@@ -3,10 +3,9 @@ import { ReactNode, ReactElement } from 'react';
 import { LucideIcon } from 'lucide-react';
 import { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from '../lib/format.js';
 import { ChipTone, ChipSize, ChipVariant, ChipShape } from './chip.js';
-import { b as DataTableColumn } from '../data-table-3mi2R3so.js';
+import { d as DataTableColumn } from '../data-table-labels-B7OdnM0S.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
-import './data-table-labels.js';
 
 /**
  * The parts an admin roster repeats (0.18.0) — and only those.
@@ -112,7 +111,8 @@ interface DateMarkProps {
      */
     display?: "date" | "relative";
     /** Default `medium`. Under `"relative"`, the style of the tooltip's date (default
-     *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. */
+     *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. Given, it wins
+     *  over the provider's `formatDate`. */
     dateStyle?: FormatDateStyle | Intl.DateTimeFormatOptions;
     /** `formatRelativeTime` options: `numeric`, `style`, `absoluteAfterDays`, `now`. */
     relative?: Omit<FormatRelativeTimeOptions, "locale" | "empty" | "absoluteStyle">;
@@ -126,6 +126,13 @@ interface DateMarkProps {
 /**
  * A date in a table cell: a `<time>` with a machine-readable `dateTime`, nowrap and
  * tabular figures, in the provider's locale — or `empty` when there is none.
+ *
+ * `display="date"` without a `dateStyle` is written by `<UiKitProvider formatDate>` when
+ * the app set one (keksdose K12: its `DateCell` exists to put every column's date in the
+ * app's date-format preference, weekday and all — dev#546), called with the LOCAL
+ * calendar day of the value as `"YYYY-MM-DD"` and `weekday: true`. Without one, or for
+ * an empty answer, it is `Intl`'s `medium` date as before. The relative display is not
+ * a calendar day and keeps `formatRelativeTime`.
  */
 declare function DateMark({ value, display, dateStyle, relative, empty, locale: localeProp, className, }: DateMarkProps): react.JSX.Element;
 interface DateColumnOptions<T> extends Omit<DateMarkProps, "value" | "className"> {

package/dist/components/account-chips.js

@@ -2,7 +2,8 @@
 import { jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from "../lib/format.js";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { useKitDateFormatter, useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
+import { toLocalIso } from "../lib/dates.js";
 import { Chip } from "./chip.js";
 import { Tooltip } from "./tooltip.js";
 function RoleChip({
@@ -87,11 +88,13 @@ function DateMark({
   className
 }) {
   const locale = useKitLocale(localeProp);
+  const fromProvider = useKitDateFormatter();
   const date = toDate(value);
   const cls = cn("whitespace-nowrap tabular-nums", className);
   if (!date) return /* @__PURE__ */ jsx("span", { className: cn(cls, "text-[var(--text-muted)]"), children: empty });
   if (display === "date") {
-    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: cls, children: formatDate(date, dateStyle ?? "medium", { locale }) });
+    const own = dateStyle === void 0 && fromProvider ? fromProvider(toLocalIso(date), { unit: "day", source: "dateMark", locale, weekday: true }) : "";
+    return /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: cls, children: own || formatDate(date, dateStyle ?? "medium", { locale }) });
   }
   const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? "medium" });
   return /* @__PURE__ */ jsx(Tooltip, { label: formatDate(date, dateStyle ?? "dateTime", { locale }), lazy: true, children: /* @__PURE__ */ jsx("time", { dateTime: date.toISOString(), className: cls, children: text }) });

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 { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { Chip } from \"./chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableColumn } from \"./data-table\";\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  /** A lucide component or an element — Kurvenschmiede marks its admins with a shield. */\n  icon?: LucideIcon | ReactElement;\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/* ── 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 *\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 = \"active\" | \"inactive\" | \"invited\" | \"registered\" | \"unverified\" | \"passwordChange\";\n\nexport type AccountStateLabels = Record<AccountState, string>;\n\nexport const DEFAULT_ACCOUNT_STATE_LABELS: AccountStateLabels = {\n  active: \"Active\",\n  inactive: \"Inactive\",\n  invited: \"Invited\",\n  registered: \"Registered\",\n  unverified: \"Unverified\",\n  passwordChange: \"Must change password\",\n};\n\n/** The default tone of each state: green for the normal case, red for switched off,\n *  amber for something the user still has to do, blue for 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};\n\nexport interface AccountStateChipProps extends AccountChipLook {\n  state: AccountState;\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?: Partial<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  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  return (\n    <Chip\n      {...rest}\n      data-state={state}\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 ?? labels[state]}\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 in a tooltip (keksdose's last-seen column).\n   */\n  display?: \"date\" | \"relative\";\n  /** Default `medium`. Under `\"relative\"`, the style of the tooltip's date (default\n   *  `dateTime`) and of the date `relative.absoluteAfterDays` switches to. */\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 */\nexport function DateMark({\n  value,\n  display = \"date\",\n  dateStyle,\n  relative,\n  empty = EMPTY_FORMATTED_VALUE,\n  locale: localeProp,\n  className,\n}: DateMarkProps) {\n  const locale = useKitLocale(localeProp);\n  const date = toDate(value);\n  const cls = cn(\"whitespace-nowrap tabular-nums\", className);\n  if (!date) return <span className={cn(cls, \"text-[var(--text-muted)]\")}>{empty}</span>;\n  if (display === \"date\") {\n    return (\n      <time dateTime={date.toISOString()} className={cls}>\n        {formatDate(date, dateStyle ?? \"medium\", { locale })}\n      </time>\n    );\n  }\n  const text = formatRelativeTime(date, { ...relative, locale, absoluteStyle: dateStyle ?? \"medium\" });\n  return (\n    <Tooltip label={formatDate(date, dateStyle ?? \"dateTime\", { locale })} lazy>\n      {/* Not a tab stop: a roster of fifty rows would be fifty more of them, and the\n          relative words already answer the column's question; the exact time is extra. */}\n      <time dateTime={date.toISOString()} className={cls}>\n        {text}\n      </time>\n    </Tooltip>\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          // The filter compares the first ten characters, so hand it an ISO string.\n          getValue: (row) => {\n            const raw = value(row);\n            if (typeof raw === \"string\") return raw;\n            return toDate(raw)?.toISOString() ?? 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 { formatDate, formatRelativeTime, toDate, EMPTY_FORMATTED_VALUE } from \"../lib/format\";\nimport type { DateInput, FormatDateStyle, FormatRelativeTimeOptions } from \"../lib/format\";\nimport { useKitDateFormatter, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { toLocalIso } from \"../lib/dates\";\nimport { Chip } from \"./chip\";\nimport type { ChipShape, ChipSize, ChipTone, ChipVariant } from \"./chip\";\nimport { Tooltip } from \"./tooltip\";\nimport type { DataTableColumn } from \"./data-table\";\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  /** A lucide component or an element — Kurvenschmiede marks its admins with a shield. */\n  icon?: LucideIcon | ReactElement;\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/* ── 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 *\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 = \"active\" | \"inactive\" | \"invited\" | \"registered\" | \"unverified\" | \"passwordChange\";\n\nexport type AccountStateLabels = Record<AccountState, string>;\n\nexport const DEFAULT_ACCOUNT_STATE_LABELS: AccountStateLabels = {\n  active: \"Active\",\n  inactive: \"Inactive\",\n  invited: \"Invited\",\n  registered: \"Registered\",\n  unverified: \"Unverified\",\n  passwordChange: \"Must change password\",\n};\n\n/** The default tone of each state: green for the normal case, red for switched off,\n *  amber for something the user still has to do, blue for 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};\n\nexport interface AccountStateChipProps extends AccountChipLook {\n  state: AccountState;\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?: Partial<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  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  return (\n    <Chip\n      {...rest}\n      data-state={state}\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 ?? labels[state]}\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 in a tooltip (keksdose's last-seen column).\n   */\n  display?: \"date\" | \"relative\";\n  /** Default `medium`. Under `\"relative\"`, the style of the tooltip's date (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  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-[var(--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  return (\n    <Tooltip label={formatDate(date, dateStyle ?? \"dateTime\", { locale })} lazy>\n      {/* Not a tab stop: a roster of fifty rows would be fifty more of them, and the\n          relative words already answer the column's question; the exact time is extra. */}\n      <time dateTime={date.toISOString()} className={cls}>\n        {text}\n      </time>\n    </Tooltip>\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          // The filter compares the first ten characters, so hand it an ISO string.\n          getValue: (row) => {\n            const raw = value(row);\n            if (typeof raw === \"string\") return raw;\n            return toDate(raw)?.toISOString() ?? null;\n          },\n        }\n      : undefined,\n    ...column,\n  };\n}\n"],"mappings":";AA6FI;AA3FJ,SAAS,UAAU;AACnB,SAAS,YAAY,oBAAoB,QAAQ,6BAA6B;AAE9E,SAAS,qBAAqB,cAAc,oBAAoB;AAChE,SAAS,kBAAkB;AAC3B,SAAS,YAAY;AAErB,SAAS,eAAe;AAuEjB,SAAS,SAAoC;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,MAAI,SAAS,QAAQ,SAAS,UAAa,SAAS,GAAI,QAAO;AAC/D,QAAM,MAAM,MAAM,IAAI;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,aAAW;AAAA,MACX,MAAM,KAAK,QAAQ;AAAA,MACnB,MAAM,KAAK;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,eAAK,SAAS;AAAA;AAAA,EACjB;AAEJ;AAqBO,MAAM,+BAAmD;AAAA,EAC9D,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,gBAAgB;AAClB;AAIO,MAAM,sBAAgE;AAAA,EAC3E,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,gBAAgB;AAClB;AAgBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAA0B;AAGxB,QAAM,SAAS,aAAa,gBAAgB,8BAA8B,UAAU;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,MAAM,QAAQ,oBAAoB,KAAK;AAAA,MACvC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEC,sBAAY,OAAO,KAAK;AAAA;AAAA,EAC3B;AAEJ;AAqCO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AACF,GAAkB;AAChB,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,eAAe,oBAAoB;AACzC,QAAM,OAAO,OAAO,KAAK;AACzB,QAAM,MAAM,GAAG,kCAAkC,SAAS;AAC1D,MAAI,CAAC,KAAM,QAAO,oBAAC,UAAK,WAAW,GAAG,KAAK,0BAA0B,GAAI,iBAAM;AAC/E,MAAI,YAAY,QAAQ;AACtB,UAAM,MACJ,cAAc,UAAa,eACvB,aAAa,WAAW,IAAI,GAAG,EAAE,MAAM,OAAO,QAAQ,YAAY,QAAQ,SAAS,KAAK,CAAC,IACzF;AACN,WACE,oBAAC,UAAK,UAAU,KAAK,YAAY,GAAG,WAAW,KAC5C,iBAAO,WAAW,MAAM,aAAa,UAAU,EAAE,OAAO,CAAC,GAC5D;AAAA,EAEJ;AACA,QAAM,OAAO,mBAAmB,MAAM,EAAE,GAAG,UAAU,QAAQ,eAAe,aAAa,SAAS,CAAC;AACnG,SACE,oBAAC,WAAQ,OAAO,WAAW,MAAM,aAAa,YAAY,EAAE,OAAO,CAAC,GAAG,MAAI,MAGzE,8BAAC,UAAK,UAAU,KAAK,YAAY,GAAG,WAAW,KAC5C,gBACH,GACF;AAEJ;AAuBO,SAAS,WAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA,GAAG;AACL,GAA6C;AAC3C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,MAAM,CAAC,QAAQ,oBAAC,YAAS,OAAO,MAAM,GAAG,GAAI,GAAG,MAAM;AAAA,IACtD,QAAQ,WAAW,CAAC,QAAQ,OAAO,MAAM,GAAG,CAAC,GAAG,QAAQ,KAAK,OAAO;AAAA,IACpE,WAAW,WAAW,YAAY;AAAA,IAClC,QAAQ,SACJ;AAAA,MACE,MAAM;AAAA;AAAA,MAEN,UAAU,CAAC,QAAQ;AACjB,cAAM,MAAM,MAAM,GAAG;AACrB,YAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,eAAO,OAAO,GAAG,GAAG,YAAY,KAAK;AAAA,MACvC;AAAA,IACF,IACA;AAAA,IACJ,GAAG;AAAA,EACL;AACF;","names":[]}

package/dist/components/account-settings.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { PasswordStrengthMeterProps } from './password-strength.js';
 import { PasswordSettingLabels, ProfileSettingLabels, TwoFactorSettingLabels } from './account-settings-labels.js';
 export { AccountSettingsLabels, DEFAULT_ACCOUNT_SETTINGS_LABELS, PasskeysSettingLabels } from './account-settings-labels.js';
 
@@ -24,11 +25,41 @@ declare function ProfileSetting({ name, email, role, memberSince, value, onChang
     /** Prop > `<UiKitProvider labels={{ accountSettings: { profile } }}>` > English. */
     labels?: Partial<ProfileSettingLabels>;
 }): react.JSX.Element;
-declare function PasswordSetting({ onSubmit, pending, minLength, labels: labelsProp, }: {
+/**
+ * What {@link PasswordSetting}'s `strength` takes besides `true`: the meter's own options,
+ * minus the ones the card owns — `value` (the new password), `minLength` (the card's, so
+ * the checklist's length rule and the submit's check are one number) and `maxBytes`
+ * (the card's own prop, which the submit enforces as well).
+ */
+type PasswordSettingStrength = Pick<PasswordStrengthMeterProps, "score" | "showRequirements" | "labels">;
+declare function PasswordSetting({ onSubmit, pending, minLength, strength, maxBytes, labels: labelsProp, }: {
     /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */
     onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;
     pending?: boolean;
+    /** The shortest new password the card submits, in characters as a person counts them
+     *  (an emoji is one). Keep it in step with the server's own minimum. Default 8. */
     minLength?: number;
+    /**
+     * Show the {@link PasswordStrengthMeter} under the new-password field (0.22.0,
+     * kastlan's input audit): the bar, the level in words and the checklist, with the
+     * length rule drawn from `minLength`. `true` for the meter as it comes; an object for
+     * its `score` (zxcvbn's, say), `showRequirements` or `labels`.
+     *
+     * Off by default, so a card that never asked for it does not grow one. The meter is
+     * advisory, as everywhere in the kit: it blocks nothing — the card's own checks do
+     * (`minLength`, the confirmation, `maxBytes`).
+     */
+    strength?: boolean | PasswordSettingStrength;
+    /**
+     * A byte ceiling on the new password — bcrypt reads at most 72 BYTES and ignores the
+     * rest, which is kastlan's case: `maxBytes={72}`. A new password over it is refused
+     * on submit with the meter's own "too long" sentence (the `passwordStrength`
+     * namespace's `tooLong`), and the meter, when shown, warns while it is typed.
+     *
+     * Unset by default, and leave it unset for a secret with no ceiling: an invented one
+     * talks people out of the long passphrase they chose.
+     */
+    maxBytes?: number;
     /** Prop > `<UiKitProvider labels={{ accountSettings: { password } }}>` > English. */
     labels?: Partial<PasswordSettingLabels>;
 }): react.JSX.Element;
@@ -63,4 +94,4 @@ declare function TwoFactorSetting({ enabled, setup, onStartSetup, onEnable, onDi
     labels?: Partial<TwoFactorSettingLabels>;
 }): react.JSX.Element;
 
-export { PasswordSetting, PasswordSettingLabels, ProfileSetting, ProfileSettingLabels, TwoFactorSetting, TwoFactorSettingLabels, type TwoFactorSetupData };
+export { PasswordSetting, PasswordSettingLabels, type PasswordSettingStrength, ProfileSetting, ProfileSettingLabels, TwoFactorSetting, TwoFactorSettingLabels, type TwoFactorSetupData };

package/dist/components/account-settings.js

@@ -1,10 +1,16 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
-import { Button, Card, FIELD_WRITABLE_LOOK, Input } from "./ui.js";
+import { Button, Card, Input } from "./ui.js";
 import { UserAvatar } from "./user-avatar.js";
 import { CopyButton } from "./copy-button.js";
 import { QrCode } from "./qr-code.js";
+import { OneTimeCodeInput } from "./one-time-code-input.js";
+import {
+  DEFAULT_PASSWORD_STRENGTH_LABELS,
+  passwordByteLength,
+  PasswordStrengthMeter
+} from "./password-strength.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 import { useAccountSettingsLabels } from "./account-settings-labels.js";
 import { DEFAULT_ACCOUNT_SETTINGS_LABELS } from "./account-settings-labels.js";
@@ -59,18 +65,26 @@ function PasswordSetting({
   onSubmit,
   pending,
   minLength = 8,
+  strength,
+  maxBytes,
   labels: labelsProp
 }) {
   const labels = useAccountSettingsLabels("password", labelsProp);
+  const strengthOptions = typeof strength === "object" ? strength : void 0;
+  const strengthLabels = useKitLabels("passwordStrength", DEFAULT_PASSWORD_STRENGTH_LABELS, strengthOptions?.labels);
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [confirm, setConfirm] = useState("");
   const [error, setError] = useState(null);
   const submit = async () => {
-    if (next.length < minLength) {
+    if ([...next].length < minLength) {
       setError(labels.tooShort);
       return;
     }
+    if (maxBytes !== void 0 && passwordByteLength(next) > maxBytes) {
+      setError(strengthLabels.tooLong(maxBytes));
+      return;
+    }
     if (next !== confirm) {
       setError(labels.mismatch);
       return;
@@ -84,10 +98,28 @@ function PasswordSetting({
     } catch {
     }
   };
+  const nextField = /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "new-password", label: labels.next, value: next, onChange: (e) => setNext(e.target.value) });
   return /* @__PURE__ */ jsxs(Card, { className: "p-4 space-y-3", children: [
     /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.title }),
     /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "current-password", label: labels.current, value: current, onChange: (e) => setCurrent(e.target.value) }),
-    /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "new-password", label: labels.next, value: next, onChange: (e) => setNext(e.target.value) }),
+    strength ? (
+      // One box for the field and its meter, so the card's `space-y-3` spaces the pair
+      // from its neighbours and the meter keeps its own small gap under the field.
+      /* @__PURE__ */ jsxs("div", { children: [
+        nextField,
+        /* @__PURE__ */ jsx(
+          PasswordStrengthMeter,
+          {
+            value: next,
+            minLength,
+            maxBytes,
+            score: strengthOptions?.score,
+            showRequirements: strengthOptions?.showRequirements,
+            labels: strengthOptions?.labels
+          }
+        )
+      ] })
+    ) : nextField,
     /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "new-password", label: labels.confirm, value: confirm, onChange: (e) => setConfirm(e.target.value) }),
     error && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--danger)]", children: error }),
     /* @__PURE__ */ jsx(Button, { onClick: () => void submit(), disabled: !current || !next || !confirm || pending, children: labels.submit })
@@ -118,8 +150,6 @@ function TwoFactorSetting({
   const labels = useAccountSettingsLabels("twoFactor", labelsProp);
   const [code, setCode] = useState("");
   const [password, setPassword] = useState("");
-  const [otpReadonly, setOtpReadonly] = useState(true);
-  const onOtpFocus = () => setOtpReadonly(false);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const secret = setup ? setup.secret ?? ("otpauthUri" in setup ? otpauthSecret(setup.otpauthUri) : null) : null;
   return /* @__PURE__ */ jsxs(Card, { className: "p-4 space-y-3", children: [
@@ -146,17 +176,13 @@ function TwoFactorSetting({
         ] })
       ] }),
       /* @__PURE__ */ jsx(
-        Input,
+        OneTimeCodeInput,
         {
-          inputMode: "numeric",
-          autoComplete: "one-time-code",
-          readOnly: otpReadonly,
-          inputClassName: FIELD_WRITABLE_LOOK,
-          onFocus: onOtpFocus,
-          maxLength: 8,
+          readOnlyUntilFocus: true,
+          length: 8,
           label: labels.codeLabel,
           value: code,
-          onChange: (e) => setCode(e.target.value),
+          onChange: setCode,
           onKeyDown: (e) => {
             if (e.key === "Enter" && code && !busy) {
               e.preventDefault();
@@ -171,17 +197,13 @@ function TwoFactorSetting({
       /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.disableSection }),
       /* @__PURE__ */ jsx(Input, { type: "password", autoComplete: "current-password", label: labels.password, value: password, onChange: (e) => setPassword(e.target.value) }),
       /* @__PURE__ */ jsx(
-        Input,
+        OneTimeCodeInput,
         {
-          inputMode: "numeric",
-          autoComplete: "one-time-code",
-          readOnly: otpReadonly,
-          inputClassName: FIELD_WRITABLE_LOOK,
-          onFocus: onOtpFocus,
-          maxLength: 8,
+          readOnlyUntilFocus: true,
+          length: 8,
           label: labels.codeLabel,
           value: code,
-          onChange: (e) => setCode(e.target.value),
+          onChange: setCode,
           onKeyDown: (e) => {
             if (e.key === "Enter" && password && code && !busy) {
               e.preventDefault();

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/account-settings.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Button, Card, FIELD_WRITABLE_LOOK, Input } from \"./ui\";\nimport { UserAvatar } from \"./user-avatar\";\nimport { CopyButton } from \"./copy-button\";\nimport { QrCode } from \"./qr-code\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { useAccountSettingsLabels } from \"./account-settings-labels\";\nimport type {\n  PasswordSettingLabels,\n  ProfileSettingLabels,\n  TwoFactorSettingLabels,\n} from \"./account-settings-labels\";\n\n// The label types moved beside the namespace's defaults (0.12.0); re-exported here so\n// every existing `import type { ProfileSettingLabels }` keeps resolving.\nexport type {\n  AccountSettingsLabels,\n  PasskeysSettingLabels,\n  PasswordSettingLabels,\n  ProfileSettingLabels,\n  TwoFactorSettingLabels,\n} from \"./account-settings-labels\";\nexport { DEFAULT_ACCOUNT_SETTINGS_LABELS } from \"./account-settings-labels\";\n\n/**\n * App-agnostic account-settings SECTIONS (feedback #333). The presentation lives\n * in @hb/ui; each app injects its own auth-API handlers + translated labels and\n * arranges these next to its own app-specific cards (appearance, budgets, …).\n * Every section is a self-contained <Card> owning its transient form state.\n *\n * Every `labels` prop is optional since 0.12.0: the strings come from the provider's\n * `accountSettings` namespace, then English (see account-settings-labels.ts).\n */\n\nexport function ProfileSetting({\n  name,\n  email,\n  role,\n  memberSince,\n  value,\n  onChange,\n  onSave,\n  saving,\n  labels: labelsProp,\n}: {\n  name?: string | null;\n  email?: string | null;\n  role?: ReactNode;\n  memberSince?: ReactNode;\n  value: string;\n  onChange: (value: string) => void;\n  onSave: () => void;\n  saving?: boolean;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { profile } }}>` > English. */\n  labels?: Partial<ProfileSettingLabels>;\n}) {\n  const labels = useAccountSettingsLabels(\"profile\", labelsProp);\n  const dirty = value.trim().length > 0 && value.trim() !== (name ?? \"\");\n  // Generated, not the literal \"display-name\" it was: two of these on one page (an\n  // admin editing someone else's profile beside their own) shared an id, and the\n  // second label pointed at the first field.\n  const inputId = useId();\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"flex items-center gap-3\">\n        <UserAvatar name={name} email={email} size=\"lg\" />\n        <div className=\"min-w-0\">\n          <div className=\"text-sm font-medium\">{labels.title}</div>\n          <div className=\"truncate font-mono text-xs text-[var(--text-muted)]\">\n            {/* `email` was a required key that nothing rendered; it names the address\n                for a screen reader, which otherwise hears a bare string under a title. */}\n            <span className=\"sr-only\">{labels.email}: </span>\n            {email ?? \"—\"}\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm\">\n        <span className=\"text-[var(--text-muted)]\">{labels.role}</span>\n        <span>{role ?? \"—\"}</span>\n        <span className=\"text-[var(--text-muted)]\">{labels.memberSince}</span>\n        <span>{memberSince ?? \"—\"}</span>\n      </div>\n      <Input\n        id={inputId}\n        label={labels.displayName}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        maxLength={120}\n      />\n      <Button onClick={onSave} disabled={!dirty || saving}>\n        {labels.save}\n      </Button>\n    </Card>\n  );\n}\n\nexport function PasswordSetting({\n  onSubmit,\n  pending,\n  minLength = 8,\n  labels: labelsProp,\n}: {\n  /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */\n  onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;\n  pending?: boolean;\n  minLength?: number;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { password } }}>` > English. */\n  labels?: Partial<PasswordSettingLabels>;\n}) {\n  const labels = useAccountSettingsLabels(\"password\", labelsProp);\n  const [current, setCurrent] = useState(\"\");\n  const [next, setNext] = useState(\"\");\n  const [confirm, setConfirm] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n\n  const submit = async () => {\n    if (next.length < minLength) {\n      setError(labels.tooShort);\n      return;\n    }\n    if (next !== confirm) {\n      setError(labels.mismatch);\n      return;\n    }\n    setError(null);\n    try {\n      await onSubmit(current, next);\n      setCurrent(\"\");\n      setNext(\"\");\n      setConfirm(\"\");\n    } catch {\n      // The app surfaces the failure (e.g. a toast); keep the fields for a retry.\n    }\n  };\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm font-medium\">{labels.title}</div>\n      <Input type=\"password\" autoComplete=\"current-password\" label={labels.current} value={current} onChange={(e) => setCurrent(e.target.value)} />\n      <Input type=\"password\" autoComplete=\"new-password\" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />\n      <Input type=\"password\" autoComplete=\"new-password\" label={labels.confirm} value={confirm} onChange={(e) => setConfirm(e.target.value)} />\n      {error && <p className=\"text-xs text-[var(--danger)]\">{error}</p>}\n      <Button onClick={() => void submit()} disabled={!current || !next || !confirm || pending}>\n        {labels.submit}\n      </Button>\n    </Card>\n  );\n}\n\n/**\n * What the app's setup call returned.\n *\n * `otpauthUri` (0.12.0) is what an authenticator backend actually hands out; the kit\n * draws the QR code itself ({@link QrCode}) and reads the manual-entry key out of the\n * URI's `secret` parameter when `secret` is not given. The `qrSvg` shape — a\n * base64-encoded SVG image — is what the section took before, which made every app\n * render a QR library to a static string and base64 it only for the kit to draw it back.\n */\nexport type TwoFactorSetupData =\n  | { qrSvg: string; secret: string }\n  | { otpauthUri: string; secret?: string };\n\n/** The `secret` parameter of an `otpauth://` URI, or null. */\nfunction otpauthSecret(uri: string): string | null {\n  const match = /[?&]secret=([^&#]*)/i.exec(uri);\n  if (!match) return null;\n  try {\n    return decodeURIComponent(match[1]) || null;\n  } catch {\n    return match[1] || null;\n  }\n}\n\n/** \"JBSW Y3DP EHPK 3PXP\": the key in groups of four, which is how an authenticator's\n *  manual-entry screen shows it and how a person copies it by eye. */\nfunction groupSecret(secret: string): string {\n  return secret.replace(/\\s+/g, \"\").replace(/(.{4})(?=.)/g, \"$1 \");\n}\n\nexport function TwoFactorSetting({\n  enabled,\n  setup,\n  onStartSetup,\n  onEnable,\n  onDisable,\n  busy,\n  renderQr,\n  labels: labelsProp,\n}: {\n  enabled: boolean;\n  /** What the app's setup call returned; null before setup starts. */\n  setup: TwoFactorSetupData | null;\n  onStartSetup: () => void;\n  onEnable: (code: string) => void;\n  onDisable: (password: string, code: string) => void;\n  busy?: boolean;\n  /** Draw the code yourself (a branded QR, a library you already ship). Given the\n   *  `otpauthUri`; the kit's own {@link QrCode} otherwise. Unused with `qrSvg`. */\n  renderQr?: (otpauthUri: string) => ReactNode;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { twoFactor } }}>` > English. */\n  labels?: Partial<TwoFactorSettingLabels>;\n}) {\n  const labels = useAccountSettingsLabels(\"twoFactor\", labelsProp);\n  const [code, setCode] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  // Browsers autofill one-time-code fields with the saved username; keep the\n  // field readOnly until focus to block that. It therefore has to keep the LOOK of\n  // an editable field (FIELD_WRITABLE_LOOK): this is the one place where readOnly\n  // does not mean \"you may not type here\", and without the opt-out the field would\n  // sit there greyed until the moment it is focused.\n  const [otpReadonly, setOtpReadonly] = useState(true);\n  const onOtpFocus = () => setOtpReadonly(false);\n  // Only for the \"Status: Enabled\" composition — the punctuation between a field's\n  // name and its value is the language's (see `CommonLabels.fieldValue`).\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const secret = setup\n    ? (setup.secret ?? (\"otpauthUri\" in setup ? otpauthSecret(setup.otpauthUri) : null))\n    : null;\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm\">\n        {common.fieldValue(labels.status, enabled ? labels.enabledText : labels.disabledText)}\n      </div>\n\n      {!enabled && !setup && (\n        <Button onClick={onStartSetup} disabled={busy}>\n          {labels.enable}\n        </Button>\n      )}\n\n      {setup && (\n        <div className=\"space-y-2\">\n          <div className=\"text-xs text-[var(--text-secondary)]\">{labels.scanHint}</div>\n          {/* `bg-white`, NOT `--bg-surface`, and it must stay that way: a QR code is\n              read by a camera looking for maximum contrast between the modules and\n              their quiet zone. On the dark theme a surface-coloured backing makes it\n              slow to acquire, and on a warm light preset it lowers the contrast ratio\n              the spec is written against. This is the one place in the kit where a\n              literal colour is the correct answer. `data-private`: the code IS the\n              second factor, and demo mode blurs it like any other secret. */}\n          {\"otpauthUri\" in setup ? (\n            // No backing of its own: QrCode draws its quiet zone white inside the SVG.\n            <div data-private className=\"inline-block overflow-hidden rounded-md\">\n              {renderQr ? (\n                renderQr(setup.otpauthUri)\n              ) : (\n                <QrCode value={setup.otpauthUri} label={labels.qrAlt} className=\"size-48\" />\n              )}\n            </div>\n          ) : (\n            <div data-private className=\"inline-block rounded-md bg-white p-2\">\n              <img\n                alt={labels.qrAlt}\n                src={`data:image/svg+xml;base64,${setup.qrSvg}`}\n                className=\"h-48 w-48\"\n              />\n            </div>\n          )}\n          {secret && (\n            <div className=\"space-y-1\">\n              <div className=\"text-xs text-[var(--text-secondary)]\">{labels.secretHint}</div>\n              <div className=\"flex items-center gap-1\">\n                {/* `dir=\"ltr\"`: a base32 key is Latin letters and digits in a fixed\n                    order, and in an RTL page the groups would otherwise be laid out\n                    right to left. */}\n                <code data-private dir=\"ltr\" className=\"break-all font-mono text-xs select-all\">\n                  {groupSecret(secret)}\n                </code>\n                <CopyButton text={secret} label={labels.copySecret} size=\"xs\" tone=\"muted\" />\n              </div>\n            </div>\n          )}\n          <Input\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            readOnly={otpReadonly}\n            inputClassName={FIELD_WRITABLE_LOOK}\n            onFocus={onOtpFocus}\n            maxLength={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={(e) => setCode(e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && code && !busy) {\n                e.preventDefault();\n                onEnable(code);\n              }\n            }}\n          />\n          <Button onClick={() => onEnable(code)} disabled={!code || busy}>\n            {labels.verify}\n          </Button>\n        </div>\n      )}\n\n      {enabled && (\n        <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n          <div className=\"text-sm font-medium\">{labels.disableSection}</div>\n          <Input type=\"password\" autoComplete=\"current-password\" label={labels.password} value={password} onChange={(e) => setPassword(e.target.value)} />\n          <Input\n            inputMode=\"numeric\"\n            autoComplete=\"one-time-code\"\n            readOnly={otpReadonly}\n            inputClassName={FIELD_WRITABLE_LOOK}\n            onFocus={onOtpFocus}\n            maxLength={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={(e) => setCode(e.target.value)}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && password && code && !busy) {\n                e.preventDefault();\n                onDisable(password, code);\n              }\n            }}\n          />\n          <Button variant=\"danger\" onClick={() => onDisable(password, code)} disabled={!password || !code || busy}>\n            {labels.disable}\n          </Button>\n        </div>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/account-settings.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { Button, Card, Input } from \"./ui\";\nimport { UserAvatar } from \"./user-avatar\";\nimport { CopyButton } from \"./copy-button\";\nimport { QrCode } from \"./qr-code\";\nimport { OneTimeCodeInput } from \"./one-time-code-input\";\nimport {\n  DEFAULT_PASSWORD_STRENGTH_LABELS,\n  passwordByteLength,\n  PasswordStrengthMeter,\n} from \"./password-strength\";\nimport type { PasswordStrengthMeterProps } from \"./password-strength\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { useAccountSettingsLabels } from \"./account-settings-labels\";\nimport type {\n  PasswordSettingLabels,\n  ProfileSettingLabels,\n  TwoFactorSettingLabels,\n} from \"./account-settings-labels\";\n\n// The label types moved beside the namespace's defaults (0.12.0); re-exported here so\n// every existing `import type { ProfileSettingLabels }` keeps resolving.\nexport type {\n  AccountSettingsLabels,\n  PasskeysSettingLabels,\n  PasswordSettingLabels,\n  ProfileSettingLabels,\n  TwoFactorSettingLabels,\n} from \"./account-settings-labels\";\nexport { DEFAULT_ACCOUNT_SETTINGS_LABELS } from \"./account-settings-labels\";\n\n/**\n * App-agnostic account-settings SECTIONS (feedback #333). The presentation lives\n * in @hb/ui; each app injects its own auth-API handlers + translated labels and\n * arranges these next to its own app-specific cards (appearance, budgets, …).\n * Every section is a self-contained <Card> owning its transient form state.\n *\n * Every `labels` prop is optional since 0.12.0: the strings come from the provider's\n * `accountSettings` namespace, then English (see account-settings-labels.ts).\n */\n\nexport function ProfileSetting({\n  name,\n  email,\n  role,\n  memberSince,\n  value,\n  onChange,\n  onSave,\n  saving,\n  labels: labelsProp,\n}: {\n  name?: string | null;\n  email?: string | null;\n  role?: ReactNode;\n  memberSince?: ReactNode;\n  value: string;\n  onChange: (value: string) => void;\n  onSave: () => void;\n  saving?: boolean;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { profile } }}>` > English. */\n  labels?: Partial<ProfileSettingLabels>;\n}) {\n  const labels = useAccountSettingsLabels(\"profile\", labelsProp);\n  const dirty = value.trim().length > 0 && value.trim() !== (name ?? \"\");\n  // Generated, not the literal \"display-name\" it was: two of these on one page (an\n  // admin editing someone else's profile beside their own) shared an id, and the\n  // second label pointed at the first field.\n  const inputId = useId();\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"flex items-center gap-3\">\n        <UserAvatar name={name} email={email} size=\"lg\" />\n        <div className=\"min-w-0\">\n          <div className=\"text-sm font-medium\">{labels.title}</div>\n          <div className=\"truncate font-mono text-xs text-[var(--text-muted)]\">\n            {/* `email` was a required key that nothing rendered; it names the address\n                for a screen reader, which otherwise hears a bare string under a title. */}\n            <span className=\"sr-only\">{labels.email}: </span>\n            {email ?? \"—\"}\n          </div>\n        </div>\n      </div>\n      <div className=\"grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm\">\n        <span className=\"text-[var(--text-muted)]\">{labels.role}</span>\n        <span>{role ?? \"—\"}</span>\n        <span className=\"text-[var(--text-muted)]\">{labels.memberSince}</span>\n        <span>{memberSince ?? \"—\"}</span>\n      </div>\n      <Input\n        id={inputId}\n        label={labels.displayName}\n        value={value}\n        onChange={(e) => onChange(e.target.value)}\n        maxLength={120}\n      />\n      <Button onClick={onSave} disabled={!dirty || saving}>\n        {labels.save}\n      </Button>\n    </Card>\n  );\n}\n\n/**\n * What {@link PasswordSetting}'s `strength` takes besides `true`: the meter's own options,\n * minus the ones the card owns — `value` (the new password), `minLength` (the card's, so\n * the checklist's length rule and the submit's check are one number) and `maxBytes`\n * (the card's own prop, which the submit enforces as well).\n */\nexport type PasswordSettingStrength = Pick<PasswordStrengthMeterProps, \"score\" | \"showRequirements\" | \"labels\">;\n\nexport function PasswordSetting({\n  onSubmit,\n  pending,\n  minLength = 8,\n  strength,\n  maxBytes,\n  labels: labelsProp,\n}: {\n  /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */\n  onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;\n  pending?: boolean;\n  /** The shortest new password the card submits, in characters as a person counts them\n   *  (an emoji is one). Keep it in step with the server's own minimum. Default 8. */\n  minLength?: number;\n  /**\n   * Show the {@link PasswordStrengthMeter} under the new-password field (0.22.0,\n   * kastlan's input audit): the bar, the level in words and the checklist, with the\n   * length rule drawn from `minLength`. `true` for the meter as it comes; an object for\n   * its `score` (zxcvbn's, say), `showRequirements` or `labels`.\n   *\n   * Off by default, so a card that never asked for it does not grow one. The meter is\n   * advisory, as everywhere in the kit: it blocks nothing — the card's own checks do\n   * (`minLength`, the confirmation, `maxBytes`).\n   */\n  strength?: boolean | PasswordSettingStrength;\n  /**\n   * A byte ceiling on the new password — bcrypt reads at most 72 BYTES and ignores the\n   * rest, which is kastlan's case: `maxBytes={72}`. A new password over it is refused\n   * on submit with the meter's own \"too long\" sentence (the `passwordStrength`\n   * namespace's `tooLong`), and the meter, when shown, warns while it is typed.\n   *\n   * Unset by default, and leave it unset for a secret with no ceiling: an invented one\n   * talks people out of the long passphrase they chose.\n   */\n  maxBytes?: number;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { password } }}>` > English. */\n  labels?: Partial<PasswordSettingLabels>;\n}) {\n  const labels = useAccountSettingsLabels(\"password\", labelsProp);\n  const strengthOptions = typeof strength === \"object\" ? strength : undefined;\n  // Only for `tooLong`: the sentence the meter shows is the one the refusal says.\n  const strengthLabels = useKitLabels(\"passwordStrength\", DEFAULT_PASSWORD_STRENGTH_LABELS, strengthOptions?.labels);\n  const [current, setCurrent] = useState(\"\");\n  const [next, setNext] = useState(\"\");\n  const [confirm, setConfirm] = useState(\"\");\n  const [error, setError] = useState<string | null>(null);\n\n  const submit = async () => {\n    // Code points, not UTF-16 units — the count the meter's checklist and a server's\n    // `len()` use. `next.length` counted an emoji as two, so four of them passed a\n    // minimum of eight that the meter beside the field said they missed.\n    if ([...next].length < minLength) {\n      setError(labels.tooShort);\n      return;\n    }\n    if (maxBytes !== undefined && passwordByteLength(next) > maxBytes) {\n      setError(strengthLabels.tooLong(maxBytes));\n      return;\n    }\n    if (next !== confirm) {\n      setError(labels.mismatch);\n      return;\n    }\n    setError(null);\n    try {\n      await onSubmit(current, next);\n      setCurrent(\"\");\n      setNext(\"\");\n      setConfirm(\"\");\n    } catch {\n      // The app surfaces the failure (e.g. a toast); keep the fields for a retry.\n    }\n  };\n\n  const nextField = (\n    <Input type=\"password\" autoComplete=\"new-password\" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />\n  );\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm font-medium\">{labels.title}</div>\n      <Input type=\"password\" autoComplete=\"current-password\" label={labels.current} value={current} onChange={(e) => setCurrent(e.target.value)} />\n      {strength ? (\n        // One box for the field and its meter, so the card's `space-y-3` spaces the pair\n        // from its neighbours and the meter keeps its own small gap under the field.\n        <div>\n          {nextField}\n          <PasswordStrengthMeter\n            value={next}\n            minLength={minLength}\n            maxBytes={maxBytes}\n            score={strengthOptions?.score}\n            showRequirements={strengthOptions?.showRequirements}\n            labels={strengthOptions?.labels}\n          />\n        </div>\n      ) : (\n        nextField\n      )}\n      <Input type=\"password\" autoComplete=\"new-password\" label={labels.confirm} value={confirm} onChange={(e) => setConfirm(e.target.value)} />\n      {error && <p className=\"text-xs text-[var(--danger)]\">{error}</p>}\n      <Button onClick={() => void submit()} disabled={!current || !next || !confirm || pending}>\n        {labels.submit}\n      </Button>\n    </Card>\n  );\n}\n\n/**\n * What the app's setup call returned.\n *\n * `otpauthUri` (0.12.0) is what an authenticator backend actually hands out; the kit\n * draws the QR code itself ({@link QrCode}) and reads the manual-entry key out of the\n * URI's `secret` parameter when `secret` is not given. The `qrSvg` shape — a\n * base64-encoded SVG image — is what the section took before, which made every app\n * render a QR library to a static string and base64 it only for the kit to draw it back.\n */\nexport type TwoFactorSetupData =\n  | { qrSvg: string; secret: string }\n  | { otpauthUri: string; secret?: string };\n\n/** The `secret` parameter of an `otpauth://` URI, or null. */\nfunction otpauthSecret(uri: string): string | null {\n  const match = /[?&]secret=([^&#]*)/i.exec(uri);\n  if (!match) return null;\n  try {\n    return decodeURIComponent(match[1]) || null;\n  } catch {\n    return match[1] || null;\n  }\n}\n\n/** \"JBSW Y3DP EHPK 3PXP\": the key in groups of four, which is how an authenticator's\n *  manual-entry screen shows it and how a person copies it by eye. */\nfunction groupSecret(secret: string): string {\n  return secret.replace(/\\s+/g, \"\").replace(/(.{4})(?=.)/g, \"$1 \");\n}\n\nexport function TwoFactorSetting({\n  enabled,\n  setup,\n  onStartSetup,\n  onEnable,\n  onDisable,\n  busy,\n  renderQr,\n  labels: labelsProp,\n}: {\n  enabled: boolean;\n  /** What the app's setup call returned; null before setup starts. */\n  setup: TwoFactorSetupData | null;\n  onStartSetup: () => void;\n  onEnable: (code: string) => void;\n  onDisable: (password: string, code: string) => void;\n  busy?: boolean;\n  /** Draw the code yourself (a branded QR, a library you already ship). Given the\n   *  `otpauthUri`; the kit's own {@link QrCode} otherwise. Unused with `qrSvg`. */\n  renderQr?: (otpauthUri: string) => ReactNode;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { twoFactor } }}>` > English. */\n  labels?: Partial<TwoFactorSettingLabels>;\n}) {\n  const labels = useAccountSettingsLabels(\"twoFactor\", labelsProp);\n  const [code, setCode] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  // Both code fields are a OneTimeCodeInput (0.22.0) — the field this card wrote by hand\n  // twice — and keep what they did:\n  //  - `readOnlyUntilFocus`: browsers autofill a one-time-code field with the saved\n  //    username (the disable form has a current-password field right above it), and a\n  //    read-only field is never autofilled. The guard drops on focus, and the field\n  //    keeps the look of an editable one meanwhile (FIELD_WRITABLE_LOOK) — see the prop.\n  //  - `length={8}`: the `maxLength={8}` they had, so an authenticator issuing eight\n  //    digits still fits. What changed is that they now take digits only: \"123 456\"\n  //    pasted from an authenticator that groups its digits used to reach `onEnable`\n  //    with the space in it.\n  //  - one `code` state for both, as before.\n  // Only for the \"Status: Enabled\" composition — the punctuation between a field's\n  // name and its value is the language's (see `CommonLabels.fieldValue`).\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const secret = setup\n    ? (setup.secret ?? (\"otpauthUri\" in setup ? otpauthSecret(setup.otpauthUri) : null))\n    : null;\n\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"text-sm\">\n        {common.fieldValue(labels.status, enabled ? labels.enabledText : labels.disabledText)}\n      </div>\n\n      {!enabled && !setup && (\n        <Button onClick={onStartSetup} disabled={busy}>\n          {labels.enable}\n        </Button>\n      )}\n\n      {setup && (\n        <div className=\"space-y-2\">\n          <div className=\"text-xs text-[var(--text-secondary)]\">{labels.scanHint}</div>\n          {/* `bg-white`, NOT `--bg-surface`, and it must stay that way: a QR code is\n              read by a camera looking for maximum contrast between the modules and\n              their quiet zone. On the dark theme a surface-coloured backing makes it\n              slow to acquire, and on a warm light preset it lowers the contrast ratio\n              the spec is written against. This is the one place in the kit where a\n              literal colour is the correct answer. `data-private`: the code IS the\n              second factor, and demo mode blurs it like any other secret. */}\n          {\"otpauthUri\" in setup ? (\n            // No backing of its own: QrCode draws its quiet zone white inside the SVG.\n            <div data-private className=\"inline-block overflow-hidden rounded-md\">\n              {renderQr ? (\n                renderQr(setup.otpauthUri)\n              ) : (\n                <QrCode value={setup.otpauthUri} label={labels.qrAlt} className=\"size-48\" />\n              )}\n            </div>\n          ) : (\n            <div data-private className=\"inline-block rounded-md bg-white p-2\">\n              <img\n                alt={labels.qrAlt}\n                src={`data:image/svg+xml;base64,${setup.qrSvg}`}\n                className=\"h-48 w-48\"\n              />\n            </div>\n          )}\n          {secret && (\n            <div className=\"space-y-1\">\n              <div className=\"text-xs text-[var(--text-secondary)]\">{labels.secretHint}</div>\n              <div className=\"flex items-center gap-1\">\n                {/* `dir=\"ltr\"`: a base32 key is Latin letters and digits in a fixed\n                    order, and in an RTL page the groups would otherwise be laid out\n                    right to left. */}\n                <code data-private dir=\"ltr\" className=\"break-all font-mono text-xs select-all\">\n                  {groupSecret(secret)}\n                </code>\n                <CopyButton text={secret} label={labels.copySecret} size=\"xs\" tone=\"muted\" />\n              </div>\n            </div>\n          )}\n          <OneTimeCodeInput\n            readOnlyUntilFocus\n            length={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={setCode}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && code && !busy) {\n                e.preventDefault();\n                onEnable(code);\n              }\n            }}\n          />\n          <Button onClick={() => onEnable(code)} disabled={!code || busy}>\n            {labels.verify}\n          </Button>\n        </div>\n      )}\n\n      {enabled && (\n        <div className=\"space-y-3 border-t border-[var(--border)] pt-3\">\n          <div className=\"text-sm font-medium\">{labels.disableSection}</div>\n          <Input type=\"password\" autoComplete=\"current-password\" label={labels.password} value={password} onChange={(e) => setPassword(e.target.value)} />\n          <OneTimeCodeInput\n            readOnlyUntilFocus\n            length={8}\n            label={labels.codeLabel}\n            value={code}\n            onChange={setCode}\n            onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n              if (e.key === \"Enter\" && password && code && !busy) {\n                e.preventDefault();\n                onDisable(password, code);\n              }\n            }}\n          />\n          <Button variant=\"danger\" onClick={() => onDisable(password, code)} disabled={!password || !code || busy}>\n            {labels.disable}\n          </Button>\n        </div>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -2,8 +2,10 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
-import '../kit-labels-D1J2_jyD.js';
-import './data-table-labels.js';
+import '../kit-labels-R8mIAc9N.js';
+import '../data-table-labels-B7OdnM0S.js';
+import './data-table-sort.js';
+import './swipeable-row.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
@@ -26,7 +28,6 @@ import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
-import './danger-confirm.js';
 import './swatch-picker.js';
 import './tile-radio.js';
 import './icon-picker.js';
@@ -34,11 +35,10 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback-attachment-WFiXJ8We.js';
+import '../feedback-attachment-NhUm7Zga.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
-import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
@@ -57,14 +57,16 @@ import './write-lock.js';
 import './legal.js';
 import './account-chips.js';
 import '../lib/format.js';
-import '../data-table-3mi2R3so.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';
 import './translation-review-labels.js';
 import '../lib/translation-review.js';
+import './country-select.js';
+import './inline-edit-field.js';
+import '../lib/iban.js';
+import '../lib/phone.js';
+import './sign-chip.js';
 
 interface AmountInputProps {
     value: string;
@@ -76,6 +78,23 @@ interface AmountInputProps {
     disabled?: boolean;
     /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */
     invalid?: boolean;
+    /**
+     * What is wrong with the amount, in the caller's own words — {@link Input}'s `error`
+     * (keksdose K4: "exceeds the outstanding balance" was a loose `<p>` beside the field
+     * that nothing pointed at). Rendered under the field, after a text `hint`; merged into
+     * `aria-describedby` after the caller's ids and the hint's; implies `invalid`, so the
+     * field paints as well as announces. `null`, `false` and `""` are no message.
+     * {@link MoneyField} takes it too.
+     */
+    error?: ReactNode;
+    /**
+     * Show the desktop calculator trigger (default `true`). `false` for an amount in an
+     * ephemeral close-on-blur editor — a budget's assigned cell, a VAT cell (keksdose K6)
+     * — where a click on the icon blurs the field and tears the editor down before the
+     * popover can open. Typing a calculation ("200+50", then Enter) still evaluates, and
+     * a phone keeps its numpad, exactly as {@link NumberInput}'s `calculator={false}`.
+     */
+    calculator?: boolean;
     className?: string;
     id?: string;
     ariaLabel?: string;