@eifi1/ui-kit 0.30.0 → 0.31.0

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 { FormEvent, 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 { usePromisePending } from \"./danger-confirm\";\nimport { personNameOk, PERSON_NAME_MAX_LENGTH } from \"../auth/form-rules\";\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\n/** What {@link ProfileSetting} hands `onSave` in its two-field form (0.30.0): both\n *  trimmed, 1–120 characters each — the `PATCH /auth/me` body's `first_name` /\n *  `last_name` (docs/user-admin-harmonization.md §6.1). */\nexport interface ProfileNameValues {\n  firstName: string;\n  lastName: string;\n}\n\n/** What both forms of {@link ProfileSetting} take. */\ninterface ProfileSettingCommonProps {\n  name?: string | null;\n  email?: string | null;\n  role?: ReactNode;\n  memberSince?: ReactNode;\n  saving?: boolean;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { profile } }}>` > English. */\n  labels?: Partial<ProfileSettingLabels>;\n}\n\n/**\n * The single display name, as before 0.30.0 — controlled through `value` / `onChange`,\n * saved by `onSave()`. Kept unchanged for an app that has not moved to first and last\n * name yet.\n */\nexport interface ProfileSettingDisplayNameProps extends ProfileSettingCommonProps {\n  value: string;\n  onChange: (value: string) => void;\n  onSave: () => void;\n  firstName?: undefined;\n  lastName?: undefined;\n}\n\n/**\n * First and last name (0.30.0, docs/user-admin-harmonization.md §6.1): the saved\n * values in, the edited ones out through `onSave`. The card keeps the drafts itself.\n */\nexport interface ProfileSettingNamesProps extends ProfileSettingCommonProps {\n  /** The saved given name — `first_name`. `null` reads as empty. */\n  firstName: string | null;\n  /** The saved family name — `last_name`. `null` (a migrated account, §3.3) reads as\n   *  empty, and Save then waits for one. */\n  lastName: string | null;\n  /**\n   * Save the two names (`PATCH /auth/me`, which also clears `name_incomplete`). Return\n   * a promise and Save is busy until it settles. Refresh `firstName` / `lastName` from\n   * the answer: the card compares its drafts with them, so Save turns off once the new\n   * names come back. A rejection keeps what was typed — the app says why (a toast), as\n   * for `PasswordSetting`.\n   */\n  onSave: (values: ProfileNameValues) => void | Promise<unknown>;\n  value?: undefined;\n  onChange?: undefined;\n}\n\nexport type ProfileSettingProps = ProfileSettingDisplayNameProps | ProfileSettingNamesProps;\n\n/**\n * The profile section: avatar, address, role, member since, and the name.\n *\n * **Two forms.** Given `firstName` / `lastName` (0.30.0, §6.1) it edits first and last\n * name in two fields, side by side where the card is wide enough — the order and the\n * 1–120-character rule of `RegisterForm` (auth §3.1), so the name a person signed up\n * with is edited the way it was typed. Without them it is the single `displayName`\n * field it always was, `value` / `onChange` / `onSave()` unchanged, for an app that has\n * not moved yet (kastlan split the one name at its first space on save; Kurvenschmiede\n * built its own card instead).\n *\n * The two-field form owns its drafts, starting from the saved names and following them\n * when they change; Save waits for a change, holds — saying why — while a name is\n * blank, and is a `commit` (a {@link WriteLockProvider} locks it, keksdose's demo).\n */\nexport function ProfileSetting(props: ProfileSettingProps) {\n  const { name, email, role, memberSince, labels: labelsProp } = props;\n  const labels = useAccountSettingsLabels(\"profile\", labelsProp);\n  const names = props.firstName !== undefined || props.lastName !== undefined;\n  return (\n    <Card className=\"p-4 space-y-3\">\n      <div className=\"flex items-center gap-3\">\n        <UserAvatar\n          name={name}\n          email={email}\n          person={names ? { first: props.firstName, last: props.lastName } : undefined}\n          size=\"lg\"\n        />\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      {names ? (\n        <PersonNameFields\n          firstName={props.firstName ?? \"\"}\n          lastName={props.lastName ?? \"\"}\n          onSave={(props as ProfileSettingNamesProps).onSave}\n          saving={props.saving}\n          labels={labels}\n        />\n      ) : (\n        <DisplayNameField\n          name={name}\n          value={(props as ProfileSettingDisplayNameProps).value}\n          onChange={(props as ProfileSettingDisplayNameProps).onChange}\n          onSave={(props as ProfileSettingDisplayNameProps).onSave}\n          saving={props.saving}\n          labels={labels}\n        />\n      )}\n    </Card>\n  );\n}\n\n/** The single-name form — exactly the 0.29 card's field and button. */\nfunction DisplayNameField({\n  name,\n  value,\n  onChange,\n  onSave,\n  saving,\n  labels,\n}: {\n  name?: string | null;\n  value: string;\n  onChange: (value: string) => void;\n  onSave: () => void;\n  saving?: boolean;\n  labels: Required<ProfileSettingLabels>;\n}) {\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    <>\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    </>\n  );\n}\n\n/** The first-and-last form (0.30.0, §6.1). */\nfunction PersonNameFields({\n  firstName,\n  lastName,\n  onSave,\n  saving,\n  labels,\n}: {\n  firstName: string;\n  lastName: string;\n  onSave: (values: ProfileNameValues) => void | Promise<unknown>;\n  saving?: boolean;\n  labels: Required<ProfileSettingLabels>;\n}) {\n  const [first, setFirst] = useState(firstName);\n  const [last, setLast] = useState(lastName);\n  // The saved names moved (the save came back, another tab renamed): the drafts follow\n  // them. During render, as DangerConfirm resets its fields, so no frame shows the old\n  // draft beside the new name.\n  const [saved, setSaved] = useState({ firstName, lastName });\n  if (saved.firstName !== firstName || saved.lastName !== lastName) {\n    setSaved({ firstName, lastName });\n    setFirst(firstName);\n    setLast(lastName);\n  }\n  const { pending, run } = usePromisePending();\n  const busy = Boolean(saving) || pending;\n  const valid = personNameOk(first) && personNameOk(last);\n  const dirty = first.trim() !== firstName.trim() || last.trim() !== lastName.trim();\n\n  const submit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!valid || !dirty || busy) return;\n    // A rejection keeps the drafts; the app reports it, as PasswordSetting's does.\n    run(onSave({ firstName: first.trim(), lastName: last.trim() }), () => {});\n  };\n\n  return (\n    <form className=\"@container space-y-3\" onSubmit={submit} noValidate>\n      {/* The order and the rule of RegisterForm's two fields (auth §3.1). */}\n      <div className=\"grid gap-3 @xs:grid-cols-2\">\n        <Input\n          name=\"given-name\"\n          autoComplete=\"given-name\"\n          label={labels.firstName}\n          value={first}\n          onChange={(e) => setFirst(e.target.value)}\n          maxLength={PERSON_NAME_MAX_LENGTH}\n          readOnly={busy}\n          required\n        />\n        <Input\n          name=\"family-name\"\n          autoComplete=\"family-name\"\n          label={labels.lastName}\n          value={last}\n          onChange={(e) => setLast(e.target.value)}\n          maxLength={PERSON_NAME_MAX_LENGTH}\n          readOnly={busy}\n          required\n        />\n      </div>\n      <Button\n        type=\"submit\"\n        commit\n        pending={busy}\n        // A blank name is a reason the person can act on; an unchanged one is not —\n        // there is nothing to save, and the button is simply off.\n        disabled={valid && !dirty}\n        disabledReason={valid ? undefined : labels.nameRequired}\n      >\n        {labels.save}\n      </Button>\n    </form>\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":[]}
+{"version":3,"sources":["../../src/components/account-settings.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { FormEvent, 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 { usePromisePending } from \"./danger-confirm\";\nimport { personNameOk, PERSON_NAME_MAX_LENGTH } from \"../auth/form-rules\";\nimport {\n  DEFAULT_PASSWORD_STRENGTH_LABELS,\n  passwordByteLength,\n  PasswordStrengthMeter,\n} from \"./password-strength\";\nimport type { PasswordStrengthMeterProps } from \"./password-strength\";\nimport { useKitLabelOverrides, useKitLabels } from \"../i18n/kit-labels\";\nimport { Chip } from \"./chip\";\nimport { useAccountSettingsLabels } from \"./account-settings-labels\";\nimport { SettingsCardTitle } from \"../settings/settings-heading\";\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\n/** What {@link ProfileSetting} hands `onSave` in its two-field form (0.30.0): both\n *  trimmed, 1–120 characters each — the `PATCH /auth/me` body's `first_name` /\n *  `last_name` (docs/user-admin-harmonization.md §6.1). */\nexport interface ProfileNameValues {\n  firstName: string;\n  lastName: string;\n}\n\n/** What both forms of {@link ProfileSetting} take. */\ninterface ProfileSettingCommonProps {\n  name?: string | null;\n  email?: string | null;\n  role?: ReactNode;\n  memberSince?: ReactNode;\n  saving?: boolean;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { profile } }}>` > English. */\n  labels?: Partial<ProfileSettingLabels>;\n  /** The card's DOM id — a settings catalogue `anchor`, so `?focus=` can ring it (0.31). */\n  id?: string;\n}\n\n/**\n * The single display name, as before 0.30.0 — controlled through `value` / `onChange`,\n * saved by `onSave()`. Kept unchanged for an app that has not moved to first and last\n * name yet.\n */\nexport interface ProfileSettingDisplayNameProps extends ProfileSettingCommonProps {\n  value: string;\n  onChange: (value: string) => void;\n  onSave: () => void;\n  firstName?: undefined;\n  lastName?: undefined;\n}\n\n/**\n * First and last name (0.30.0, docs/user-admin-harmonization.md §6.1): the saved\n * values in, the edited ones out through `onSave`. The card keeps the drafts itself.\n */\nexport interface ProfileSettingNamesProps extends ProfileSettingCommonProps {\n  /** The saved given name — `first_name`. `null` reads as empty. */\n  firstName: string | null;\n  /** The saved family name — `last_name`. `null` (a migrated account, §3.3) reads as\n   *  empty, and Save then waits for one. */\n  lastName: string | null;\n  /**\n   * Save the two names (`PATCH /auth/me`, which also clears `name_incomplete`). Return\n   * a promise and Save is busy until it settles. Refresh `firstName` / `lastName` from\n   * the answer: the card compares its drafts with them, so Save turns off once the new\n   * names come back. A rejection keeps what was typed — the app says why (a toast), as\n   * for `PasswordSetting`.\n   */\n  onSave: (values: ProfileNameValues) => void | Promise<unknown>;\n  value?: undefined;\n  onChange?: undefined;\n}\n\nexport type ProfileSettingProps = ProfileSettingDisplayNameProps | ProfileSettingNamesProps;\n\n/**\n * The profile section: avatar, address, role, member since, and the name.\n *\n * **Two forms.** Given `firstName` / `lastName` (0.30.0, §6.1) it edits first and last\n * name in two fields, side by side where the card is wide enough — the order and the\n * 1–120-character rule of `RegisterForm` (auth §3.1), so the name a person signed up\n * with is edited the way it was typed. Without them it is the single `displayName`\n * field it always was, `value` / `onChange` / `onSave()` unchanged, for an app that has\n * not moved yet (kastlan split the one name at its first space on save; Kurvenschmiede\n * built its own card instead).\n *\n * The two-field form owns its drafts, starting from the saved names and following them\n * when they change; Save waits for a change, holds — saying why — while a name is\n * blank, and is a `commit` (a {@link WriteLockProvider} locks it, keksdose's demo).\n */\nexport function ProfileSetting(props: ProfileSettingProps) {\n  const { name, email, role, memberSince, labels: labelsProp, id } = props;\n  const labels = useAccountSettingsLabels(\"profile\", labelsProp);\n  const names = props.firstName !== undefined || props.lastName !== undefined;\n  return (\n    <Card id={id} className=\"p-4 space-y-3\">\n      <div className=\"flex items-center gap-3\">\n        <UserAvatar\n          name={name}\n          email={email}\n          person={names ? { first: props.firstName, last: props.lastName } : undefined}\n          size=\"lg\"\n        />\n        <div className=\"min-w-0\">\n          {/* A heading inside a SettingsLayout (0.31, docs/settings-harmonization.md\n              §3.7), the plain div it always was outside one. */}\n          <SettingsCardTitle>{labels.title}</SettingsCardTitle>\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      {names ? (\n        <PersonNameFields\n          firstName={props.firstName ?? \"\"}\n          lastName={props.lastName ?? \"\"}\n          onSave={(props as ProfileSettingNamesProps).onSave}\n          saving={props.saving}\n          labels={labels}\n        />\n      ) : (\n        <DisplayNameField\n          name={name}\n          value={(props as ProfileSettingDisplayNameProps).value}\n          onChange={(props as ProfileSettingDisplayNameProps).onChange}\n          onSave={(props as ProfileSettingDisplayNameProps).onSave}\n          saving={props.saving}\n          labels={labels}\n        />\n      )}\n    </Card>\n  );\n}\n\n/** The single-name form — exactly the 0.29 card's field and button. */\nfunction DisplayNameField({\n  name,\n  value,\n  onChange,\n  onSave,\n  saving,\n  labels,\n}: {\n  name?: string | null;\n  value: string;\n  onChange: (value: string) => void;\n  onSave: () => void;\n  saving?: boolean;\n  labels: Required<ProfileSettingLabels>;\n}) {\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    <>\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    </>\n  );\n}\n\n/** The first-and-last form (0.30.0, §6.1). */\nfunction PersonNameFields({\n  firstName,\n  lastName,\n  onSave,\n  saving,\n  labels,\n}: {\n  firstName: string;\n  lastName: string;\n  onSave: (values: ProfileNameValues) => void | Promise<unknown>;\n  saving?: boolean;\n  labels: Required<ProfileSettingLabels>;\n}) {\n  const [first, setFirst] = useState(firstName);\n  const [last, setLast] = useState(lastName);\n  // The saved names moved (the save came back, another tab renamed): the drafts follow\n  // them. During render, as DangerConfirm resets its fields, so no frame shows the old\n  // draft beside the new name.\n  const [saved, setSaved] = useState({ firstName, lastName });\n  if (saved.firstName !== firstName || saved.lastName !== lastName) {\n    setSaved({ firstName, lastName });\n    setFirst(firstName);\n    setLast(lastName);\n  }\n  const { pending, run } = usePromisePending();\n  const busy = Boolean(saving) || pending;\n  const valid = personNameOk(first) && personNameOk(last);\n  const dirty = first.trim() !== firstName.trim() || last.trim() !== lastName.trim();\n\n  const submit = (e: FormEvent) => {\n    e.preventDefault();\n    if (!valid || !dirty || busy) return;\n    // A rejection keeps the drafts; the app reports it, as PasswordSetting's does.\n    run(onSave({ firstName: first.trim(), lastName: last.trim() }), () => {});\n  };\n\n  return (\n    <form className=\"@container space-y-3\" onSubmit={submit} noValidate>\n      {/* The order and the rule of RegisterForm's two fields (auth §3.1). */}\n      <div className=\"grid gap-3 @xs:grid-cols-2\">\n        <Input\n          name=\"given-name\"\n          autoComplete=\"given-name\"\n          label={labels.firstName}\n          value={first}\n          onChange={(e) => setFirst(e.target.value)}\n          maxLength={PERSON_NAME_MAX_LENGTH}\n          readOnly={busy}\n          required\n        />\n        <Input\n          name=\"family-name\"\n          autoComplete=\"family-name\"\n          label={labels.lastName}\n          value={last}\n          onChange={(e) => setLast(e.target.value)}\n          maxLength={PERSON_NAME_MAX_LENGTH}\n          readOnly={busy}\n          required\n        />\n      </div>\n      <Button\n        type=\"submit\"\n        commit\n        pending={busy}\n        // A blank name is a reason the person can act on; an unchanged one is not —\n        // there is nothing to save, and the button is simply off.\n        disabled={valid && !dirty}\n        disabledReason={valid ? undefined : labels.nameRequired}\n      >\n        {labels.save}\n      </Button>\n    </form>\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  id,\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  /** The card's DOM id — a settings catalogue `anchor`, so `?focus=` can ring it (0.31). */\n  id?: string;\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 id={id} className=\"p-4 space-y-3\">\n      <SettingsCardTitle>{labels.title}</SettingsCardTitle>\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  id,\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  /** The card's DOM id — a settings catalogue `anchor`, so `?focus=` can ring it (0.31). */\n  id?: string;\n}) {\n  const labels = useAccountSettingsLabels(\"twoFactor\", labelsProp);\n  // The title (0.31, docs/settings-harmonization.md §3.7) is new, and an app that\n  // translated this card before it named the setting in `status` — \"2FA\",\n  // \"Zwei-Faktor-Authentifizierung\". Each source's `title` first, then its `status`, so\n  // that app keeps its own word instead of meeting the English title.\n  const overrides = useKitLabelOverrides(\"accountSettings\")?.twoFactor;\n  const title = labelsProp?.title ?? overrides?.title ?? labelsProp?.status ?? overrides?.status ?? labels.title;\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  const secret = setup\n    ? (setup.secret ?? (\"otpauthUri\" in setup ? otpauthSecret(setup.otpauthUri) : null))\n    : null;\n\n  return (\n    <Card id={id} className=\"p-4 space-y-3\">\n      {/* The card had only \"Two-factor authentication: Off\". A settings page outlines its\n          cards by their titles (§3.7), so the setting's name is the title now, and the\n          state stands beside it as a chip instead of repeating the name. */}\n      <div className=\"flex flex-wrap items-center justify-between gap-2\">\n        <SettingsCardTitle>{title}</SettingsCardTitle>\n        <Chip size=\"sm\" tone={enabled ? \"success\" : \"neutral\"}>\n          {enabled ? labels.enabledText : labels.disabledText}\n        </Chip>\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,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { CalculatorButtonLabels } from './calculator.js';
 import { NumberPadSheetLabels } from './numpad-sheet.js';
-import '../delete-account-setting-CGVMckMw.js';
+import '../delete-account-setting-DCFS5Vof.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -57,6 +57,8 @@ import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
 import '../auth/sign-in-form.js';
+import '../landing/access.js';
+import '../landing/landing-labels.js';
 import '../shell/topbar-controls.js';
 import '../theme/palette-presets.js';
 import '../theme/chart-palette.js';
@@ -78,6 +80,8 @@ import '../account/data-export-setting.js';
 import './account-chips.js';
 import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';

package/dist/components/button-group.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ComponentPropsWithoutRef, ReactNode, Ref, MouseEvent, ReactElement } from 'react';
-import { bH as ButtonVariant, bF as ButtonSize } from '../delete-account-setting-CGVMckMw.js';
+import { bH as ButtonVariant, bF as ButtonSize } from '../delete-account-setting-DCFS5Vof.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -55,6 +55,8 @@ import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
 import '../auth/sign-in-form.js';
+import '../landing/access.js';
+import '../landing/landing-labels.js';
 import '../shell/topbar-controls.js';
 import '../theme/palette-presets.js';
 import '../theme/chart-palette.js';
@@ -76,6 +78,8 @@ import '../account/data-export-setting.js';
 import './account-chips.js';
 import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';

package/dist/components/calculator.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { bI as CalculatorLabels } from '../delete-account-setting-CGVMckMw.js';
+import { bI as CalculatorLabels } from '../delete-account-setting-DCFS5Vof.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -54,6 +54,8 @@ import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
 import '../auth/sign-in-form.js';
+import '../landing/access.js';
+import '../landing/landing-labels.js';
 import '../shell/topbar-controls.js';
 import '../theme/palette-presets.js';
 import '../theme/chart-palette.js';
@@ -75,6 +77,8 @@ import '../account/data-export-setting.js';
 import './account-chips.js';
 import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';

package/dist/components/confirm-dialog.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { c2 as ConfirmDialogLabels, c3 as ConfirmFn, c4 as ConfirmOptions, c5 as ConfirmProvider, c6 as ConfirmProviderProps, c7 as ConfirmTone, cl as DEFAULT_CONFIRM_DIALOG_LABELS, fC as useConfirm } from '../delete-account-setting-CGVMckMw.js';
+export { c2 as ConfirmDialogLabels, c3 as ConfirmFn, c4 as ConfirmOptions, c5 as ConfirmProvider, c6 as ConfirmProviderProps, c7 as ConfirmTone, cl as DEFAULT_CONFIRM_DIALOG_LABELS, fC as useConfirm } from '../delete-account-setting-DCFS5Vof.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -54,6 +54,8 @@ import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
 import '../auth/sign-in-form.js';
+import '../landing/access.js';
+import '../landing/landing-labels.js';
 import '../shell/topbar-controls.js';
 import '../theme/palette-presets.js';
 import '../theme/chart-palette.js';
@@ -75,6 +77,8 @@ import '../account/data-export-setting.js';
 import './account-chips.js';
 import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';

package/dist/components/copy-button.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { c8 as CopyButton, c9 as CopyButtonLabels, ca as CopyButtonProps, cm as DEFAULT_COPY_BUTTON_LABELS } from '../delete-account-setting-CGVMckMw.js';
+export { c8 as CopyButton, c9 as CopyButtonLabels, ca as CopyButtonProps, cm as DEFAULT_COPY_BUTTON_LABELS } from '../delete-account-setting-DCFS5Vof.js';
 import './tooltip.js';
 import '../data-table-labels-DUELeXpa.js';
 import './data-table-sort.js';
@@ -54,6 +54,8 @@ import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
 import '../auth/sign-in-form.js';
+import '../landing/access.js';
+import '../landing/landing-labels.js';
 import '../shell/topbar-controls.js';
 import '../theme/palette-presets.js';
 import '../theme/chart-palette.js';
@@ -75,6 +77,8 @@ import '../account/data-export-setting.js';
 import './account-chips.js';
 import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';

package/dist/components/danger-confirm.d.ts

@@ -1,5 +1,5 @@
 import 'react';
-export { cc as CurrentPasswordInput, cd as CurrentPasswordInputLabels, ce as CurrentPasswordInputProps, co as DEFAULT_DANGER_CONFIRM_LABELS, cK as DangerConfirm, cL as DangerConfirmLabels, cM as DangerConfirmProps, cN as DangerConfirmValues, cO as DangerConsequence, f4 as TypedConfirmField, f5 as TypedConfirmFieldLabels, f6 as TypedConfirmFieldProps, f7 as TypedMatch, fB as typedMatches, g3 as usePromisePending } from '../delete-account-setting-CGVMckMw.js';
+export { cc as CurrentPasswordInput, cd as CurrentPasswordInputLabels, ce as CurrentPasswordInputProps, co as DEFAULT_DANGER_CONFIRM_LABELS, cK as DangerConfirm, cL as DangerConfirmLabels, cM as DangerConfirmProps, cN as DangerConfirmValues, cO as DangerConsequence, f4 as TypedConfirmField, f5 as TypedConfirmFieldLabels, f6 as TypedConfirmFieldProps, f7 as TypedMatch, fB as typedMatches, g3 as usePromisePending } from '../delete-account-setting-DCFS5Vof.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -54,6 +54,8 @@ import './image-grid.js';
 import './lightbox.js';
 import './write-lock.js';
 import '../auth/sign-in-form.js';
+import '../landing/access.js';
+import '../landing/landing-labels.js';
 import '../shell/topbar-controls.js';
 import '../theme/palette-presets.js';
 import '../theme/chart-palette.js';
@@ -75,6 +77,8 @@ import '../account/data-export-setting.js';
 import './account-chips.js';
 import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
+import '../settings/settings-labels.js';
+import '../demo/demo-labels.js';
 import './reauth-dialog.js';
 import './server-wake.js';
 import '../lib/server-wake.js';

package/dist/components/data-table.js

@@ -665,7 +665,14 @@ function DataTable({
       // on every row of a long list, so anything larger becomes the list's personality
       // rather than feedback. `transition-transform` alone, so the existing background
       // flip stays instant.
-      interactive && "cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-[var(--bg-active)] motion-reduce:transition-none motion-reduce:active:scale-100"
+      interactive && "cursor-pointer transition-transform duration-100 active:scale-[0.995] active:bg-[var(--bg-active)] motion-reduce:transition-none motion-reduce:active:scale-100",
+      // The keyboard's frame drawn INSIDE the card, as the desktop row's is (keksdose live
+      // #394): the browser's own ring and tap highlight sit on the card's outer edge, and
+      // three ancestors clip it — SwipeableRow's `overflow-hidden`, the card list, and
+      // AppShell main's `overflow-x-clip` — so the frame went missing on one side. A press
+      // keeps the fill and the squeeze above; an outline on every tap of a long list would
+      // be louder than the acknowledgement it replaces.
+      interactive && "[-webkit-tap-highlight-color:transparent] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[var(--brand)]"
     );
     const cardInner = /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("div", { className: cn("flex min-w-0 flex-1 flex-col", compact ? "gap-1" : "gap-2"), children: mobileCard ? mobileCard(row) : /* @__PURE__ */ jsxs(Fragment, { children: [