@eifi1/ui-kit 0.11.0 → 0.12.0

package/dist/components/account-settings.js

@@ -3,7 +3,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
 import { Button, Card, FIELD_WRITABLE_LOOK, Input } from "./ui.js";
 import { UserAvatar } from "./user-avatar.js";
+import { CopyButton } from "./copy-button.js";
+import { QrCode } from "./qr-code.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";
 function ProfileSetting({
   name,
   email,
@@ -13,8 +17,9 @@ function ProfileSetting({
   onChange,
   onSave,
   saving,
-  labels
+  labels: labelsProp
 }) {
+  const labels = useAccountSettingsLabels("profile", labelsProp);
   const dirty = value.trim().length > 0 && value.trim() !== (name ?? "");
   const inputId = useId();
   return /* @__PURE__ */ jsxs(Card, { className: "p-4 space-y-3", children: [
@@ -22,7 +27,13 @@ function ProfileSetting({
       /* @__PURE__ */ jsx(UserAvatar, { name, email, size: "lg" }),
       /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
         /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.title }),
-        /* @__PURE__ */ jsx("div", { className: "truncate font-mono text-xs text-[var(--text-muted)]", children: email ?? "\u2014" })
+        /* @__PURE__ */ jsxs("div", { className: "truncate font-mono text-xs text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+            labels.email,
+            ": "
+          ] }),
+          email ?? "\u2014"
+        ] })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm", children: [
@@ -48,8 +59,9 @@ function PasswordSetting({
   onSubmit,
   pending,
   minLength = 8,
-  labels
+  labels: labelsProp
 }) {
+  const labels = useAccountSettingsLabels("password", labelsProp);
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [confirm, setConfirm] = useState("");
@@ -81,7 +93,18 @@ function PasswordSetting({
     /* @__PURE__ */ jsx(Button, { onClick: () => void submit(), disabled: !current || !next || !confirm || pending, children: labels.submit })
   ] });
 }
-const DEFAULT_QR_ALT = "QR code";
+function otpauthSecret(uri) {
+  const match = /[?&]secret=([^&#]*)/i.exec(uri);
+  if (!match) return null;
+  try {
+    return decodeURIComponent(match[1]) || null;
+  } catch {
+    return match[1] || null;
+  }
+}
+function groupSecret(secret) {
+  return secret.replace(/\s+/g, "").replace(/(.{4})(?=.)/g, "$1 ");
+}
 function TwoFactorSetting({
   enabled,
   setup,
@@ -89,27 +112,39 @@ function TwoFactorSetting({
   onEnable,
   onDisable,
   busy,
-  labels
+  renderQr,
+  labels: labelsProp
 }) {
+  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: [
     /* @__PURE__ */ jsx("div", { className: "text-sm", children: common.fieldValue(labels.status, enabled ? labels.enabledText : labels.disabledText) }),
     !enabled && !setup && /* @__PURE__ */ jsx(Button, { onClick: onStartSetup, disabled: busy, children: labels.enable }),
     setup && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-secondary)]", children: labels.scanHint }),
-      /* @__PURE__ */ jsx("div", { className: "inline-block rounded-md bg-white p-2", children: /* @__PURE__ */ jsx(
+      "otpauthUri" in setup ? (
+        // No backing of its own: QrCode draws its quiet zone white inside the SVG.
+        /* @__PURE__ */ jsx("div", { "data-private": true, className: "inline-block overflow-hidden rounded-md", children: renderQr ? renderQr(setup.otpauthUri) : /* @__PURE__ */ jsx(QrCode, { value: setup.otpauthUri, label: labels.qrAlt, className: "size-48" }) })
+      ) : /* @__PURE__ */ jsx("div", { "data-private": true, className: "inline-block rounded-md bg-white p-2", children: /* @__PURE__ */ jsx(
         "img",
         {
-          alt: labels.qrAlt ?? DEFAULT_QR_ALT,
+          alt: labels.qrAlt,
           src: `data:image/svg+xml;base64,${setup.qrSvg}`,
           className: "h-48 w-48"
         }
       ) }),
-      /* @__PURE__ */ jsx("div", { className: "break-all font-mono text-xs", children: setup.secret }),
+      secret && /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-secondary)]", children: labels.secretHint }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("code", { "data-private": true, dir: "ltr", className: "break-all font-mono text-xs select-all", children: groupSecret(secret) }),
+          /* @__PURE__ */ jsx(CopyButton, { text: secret, label: labels.copySecret, size: "xs", tone: "muted" })
+        ] })
+      ] }),
       /* @__PURE__ */ jsx(
         Input,
         {
@@ -160,6 +195,7 @@ function TwoFactorSetting({
   ] });
 }
 export {
+  DEFAULT_ACCOUNT_SETTINGS_LABELS,
   PasswordSetting,
   ProfileSetting,
   TwoFactorSetting

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 { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-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\nexport interface ProfileSettingLabels {\n  title: string;\n  email: string;\n  role: string;\n  memberSince: string;\n  displayName: string;\n  save: string;\n}\n\nexport function ProfileSetting({\n  name,\n  email,\n  role,\n  memberSince,\n  value,\n  onChange,\n  onSave,\n  saving,\n  labels,\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  labels: 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    <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)]\">{email ?? \"—\"}</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 interface PasswordSettingLabels {\n  title: string;\n  current: string;\n  next: string;\n  confirm: string;\n  submit: string;\n  tooShort: string;\n  mismatch: string;\n}\n\nexport function PasswordSetting({\n  onSubmit,\n  pending,\n  minLength = 8,\n  labels,\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  labels: PasswordSettingLabels;\n}) {\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\nexport interface TwoFactorSettingLabels {\n  status: string;\n  enabledText: string;\n  disabledText: string;\n  enable: string;\n  scanHint: string;\n  codeLabel: string;\n  verify: string;\n  disableSection: string;\n  password: string;\n  disable: string;\n  /**\n   * Alt text for the setup QR image, which shipped as a hardcoded `alt=\"QR\"`.\n   *\n   * OPTIONAL, alone among these keys, and not because it matters less: this\n   * interface is annotated at consumer call sites (`const LABELS:\n   * TwoFactorSettingLabels = {…}`), so a new REQUIRED key is a compile error in\n   * every app on the next `npm update` — the additive-API rule in the README. It\n   * falls back to English here the way `AmountInput`'s label keys do. Make it\n   * required in the next major, when the three apps can be updated with it.\n   */\n  qrAlt?: string;\n}\n\n/** `qrAlt`'s English fallback, kept beside the interface rather than inline so the\n *  one English word in this section is findable by the same `DEFAULT_*` grep as\n *  every other one. Module-private: the key goes required in the next major. */\nconst DEFAULT_QR_ALT = \"QR code\";\n\nexport function TwoFactorSetting({\n  enabled,\n  setup,\n  onStartSetup,\n  onEnable,\n  onDisable,\n  busy,\n  labels,\n}: {\n  enabled: boolean;\n  /** QR + secret returned by the app's setup call; null before setup starts. */\n  setup: { qrSvg: string; secret: string } | null;\n  onStartSetup: () => void;\n  onEnable: (code: string) => void;\n  onDisable: (password: string, code: string) => void;\n  busy?: boolean;\n  labels: TwoFactorSettingLabels;\n}) {\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\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. */}\n          <div className=\"inline-block rounded-md bg-white p-2\">\n            <img\n              alt={labels.qrAlt ?? DEFAULT_QR_ALT}\n              src={`data:image/svg+xml;base64,${setup.qrSvg}`}\n              className=\"h-48 w-48\"\n            />\n          </div>\n          <div className=\"break-all font-mono text-xs\">{setup.secret}</div>\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, 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":[]}

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 '../i18n/kit-labels.js';
+import '../kit-labels-v3biUF1L.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
@@ -10,7 +10,6 @@ import './popover.js';
 import './chip.js';
 import 'lucide-react';
 import './field-sync.js';
-import './ui.js';
 import './tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
@@ -22,6 +21,7 @@ import '../search/search-index.js';
 import './month-picker.js';
 import './page-contents.js';
 import './series-chart-labels.js';
+import './pie-chart-labels.js';
 import './sparkline.js';
 import './stat-tile.js';
 import './signature-pad.js';
@@ -32,17 +32,28 @@ import './tile-radio.js';
 import './icon-picker.js';
 import './dialog-frame.js';
 import './modal.js';
-import './file-button.js';
+import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import '../feedback/feedback-attachment.js';
 import '../feedback/feedback-dialog.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 './copy-button.js';
 import './bulk-action-bar.js';
 import './list.js';
 import './breadcrumbs.js';
 import './toast.js';
+import './description-list.js';
+import './line-items.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './error-boundary.js';
+import './authed-image.js';
+import '../hooks/use-authed-src.js';
+import './image-grid.js';
+import './lightbox.js';
 
 interface AmountInputProps {
     value: string;
@@ -57,6 +68,15 @@ interface AmountInputProps {
     className?: string;
     id?: string;
     ariaLabel?: string;
+    /**
+     * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —
+     * `{(ids) => <AmountInput {...ids} … />}` — is typed and reaches the input: the
+     * hint and error are described, a required amount is announced as required, and
+     * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.
+     */
+    "aria-describedby"?: string;
+    "aria-invalid"?: boolean | "true" | "false";
+    "aria-required"?: boolean | "true" | "false";
     /** Every user-facing string this component and the two it composes own, so a
      *  translating host can supply its own. Each key optional, and each a per-field
      *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`

package/dist/components/amount-input.js

@@ -38,9 +38,10 @@ function isResultOf(previous, text) {
   return n !== null && formatResult(n) === text.trim();
 }
 const AmountInput = forwardRef(
-  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid, className, id, ariaLabel, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames }, ref) => {
+  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, autoFocus, tone = "neutral", negative = false, onNegativeChange, variant = "field", align = "start", labels, currencyNames }, ref) => {
     const generatedId = useId();
     const fieldId = id ?? generatedId;
+    const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === "true";
     const editable = !!onCurrencyChange;
     const isMobile = useMediaQuery(PHONE_QUERY, false);
     const showCalc = !disabled && !isMobile;
@@ -142,7 +143,9 @@ const AmountInput = forwardRef(
               TONE_CLASS[tone],
               invalid && FIELD_INVALID
             ),
-            "aria-invalid": invalid || void 0
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": ariaDescribedBy,
+            "aria-required": ariaRequired
           }
         ),
         label !== void 0 && // The display shape drops the label VISUALLY, not from the accessibility

package/dist/components/amount-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from \"./currency-select\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type CurrencyLabels,\n} from \"../i18n/kit-labels\";\nimport {\n  commitExpression,\n  evaluateExpression,\n  formatResult,\n  isBareAmount,\n  looksLikeExpression,\n  sanitizeLive,\n  splitLeadingSign,\n} from \"../lib/calc\";\n\ninterface AmountInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  currency?: string;\n  onCurrencyChange?: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  /** Every user-facing string this component and the two it composes own, so a\n   *  translating host can supply its own. Each key optional, and each a per-field\n   *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`\n   *  and `currencySearch` of its `currency` namespace, the rest of `calculator`.\n   *  `currency` names the picker chip, composed with the selected code through\n   *  `common.fieldValue`; the rest are pass-through. */\n  labels?: {\n    currency?: string;\n    currencySearch?: string;\n    /** Names the calculator TRIGGER this component renders. `calculator` below\n     *  names the controls inside the popover it opens. */\n    calculatorTrigger?: string;\n    pad?: NumberPadSheetLabels;\n    calculator?: CalculatorButtonLabels;\n  };\n  /** Translated currency names for the chip's picker, keyed by ISO code. The same\n   *  sparse override `CurrencySelect` takes, and for the same reason: the names in\n   *  `CURRENCIES` are shipped data, so without this they are the one English word\n   *  left in a translated row. Not part of `labels` because it is keyed by DATA\n   *  rather than by a fixed set of slots, and an app passes the same map to both\n   *  pickers. */\n  currencyNames?: Record<string, string>;\n  /** Focus the field on mount — on mobile this also opens the numpad sheet, so a\n   *  new-transaction form can jump straight to amount entry (feedback #70). */\n  autoFocus?: boolean;\n  /**\n   * Tint the typed figure by what it will DO (Keksdose feedback #167).\n   *\n   * The direction is chosen with a toggle beside the field rather than typed, so\n   * the digits alone say nothing about which way the money goes — on the one screen\n   * where getting that backwards is the expensive mistake. Colour says it\n   * continuously, and it costs no layout. It stays the MAIN indication (live #201\n   * rework: *\"The main indication shall still be the color\"*); {@link negative}\n   * renders the sign as a second, quieter signal in front of the figure.\n   *\n   * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this\n   * is reinforcement rather than the sole carrier of the meaning.\n   */\n  tone?: \"neutral\" | \"outflow\" | \"inflow\";\n  /**\n   * The SIGN of the figure, owned by the caller's direction control (Keksdose live\n   * #201 rework: *\"Outflow should be negative and inflow positive … the sign shall\n   * be displayed but not necessarily be typed in\"*).\n   *\n   * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped\n   * off again before anything is reported back, so the caller never sees its own\n   * prefix echoed and no code path can end up applying it twice. That is the whole\n   * cure: there is exactly ONE place the sign lives, and it is not the text.\n   *\n   * Because it is rendered rather than stored it cannot be deleted (the next render\n   * puts it back), a select-all-and-retype keeps the direction, and the caret needs\n   * no minding.\n   */\n  negative?: boolean;\n  /**\n   * A sign the user TYPED, or a calculation that resolved to a signed number.\n   *\n   * SET, never flip. A \"-\" means *\"this is an outflow\"*, so typing it twice says the\n   * same thing twice — which is exactly what the rework asks for (*\"Subtracting\n   * values twice resulting in inflow -> outflow and back to inflow seems not\n   * reasonable\"*). \"+\" says the other direction.\n   *\n   * Its presence is what ARMS the whole sign behaviour. A field with no direction\n   * control — an account's starting balance, a loan payment, a holding's cost —\n   * passes neither prop and keeps a text that is the whole truth, minus included.\n   */\n  onNegativeChange?: (negative: boolean) => void;\n  /**\n   * How the field presents itself ON A PHONE (Keksdose feedback #176).\n   *\n   * `\"field\"` (default) is the labelled, bordered input used everywhere else.\n   *\n   * `\"display\"` keeps every mechanic — the same `<input>`, the same numpad sheet,\n   * the same currency picker, the same commit/blur contract — and only drops the\n   * chrome: no border, no fill, no floating label, the figure set at display size.\n   * On a form whose whole point is one number, a bordered `text-sm` box draws the\n   * amount at the same weight as the memo beside it; this makes it the headline\n   * instead. It stays fully editable — the underline and the caret are what say so.\n   *\n   * Phone-only by construction: it keys off the same breakpoint as the numpad, so\n   * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps\n   * its column rhythm.\n   */\n  variant?: \"field\" | \"display\";\n  /**\n   * Where the figure sits in its row, for `variant=\"display\"` only (Keksdose\n   * feedback #176 rework).\n   *\n   * `\"start\"` (default) keeps it flush left, in the reading column the fields\n   * below it share — and it is what the entry forms use, because a figure that\n   * starts at a known edge is legible at any width: when the value outgrows the\n   * field, the digits that scroll out of sight are the trailing ones, not the\n   * magnitude (Keksdose feedback #430 rework).\n   *\n   * `\"center\"` makes it a centred headline. It centres in the width that REMAINS\n   * after the trailing currency control, not in the whole box: the control is\n   * pinned to the right edge, so a plain `text-center` would centre the figure\n   * under it and the last digits would sit behind the chip. This used to mirror\n   * the control's reservation onto the left instead, which centred correctly but\n   * spent twice the control's width on padding — fatal on a 375px screen, where\n   * it left a 36px figure 16px to live in.\n   */\n  align?: \"start\" | \"center\";\n}\n\n// The consuming app's ONE money palette (`--money-expense` / `--money-income`),\n// not a bespoke rose/emerald pairing: a figure being typed has to wear the same\n// colour the same figure will wear once it is a row in the table behind the form\n// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`\n// variant is needed and they win over the field's own text colour regardless of\n// where `cn` puts them.\nconst TONE_CLASS: Record<\"neutral\" | \"outflow\" | \"inflow\", string> = {\n  neutral: \"\",\n  outflow: \"text-money-neg\",\n  inflow: \"text-money-pos\",\n};\n\n// The shared chrome-less treatment at money size. `tabular-nums` so digits don't\n// reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder\n// colour is what keeps an EMPTY form from painting its zero in the direction tint\n// (`tone` is computed from 0, which reads as an inflow).\nconst DISPLAY_INPUT_CLASS = cn(\n  FIELD_DISPLAY,\n  \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\",\n);\n\n/**\n * Is `text` the ANSWER to `previous`, or something typed OVER it?\n *\n * \"The old text was a sum and the new one is bare\" cannot tell those apart, and both\n * gestures are ordinary: select-all-and-retype after a typo, or backspacing \"-20+\"\n * back down to a fresh figure. Read as an answer, they move the direction chip — so\n * an outflow of 7 quietly booked +7.00 (live #201 rework).\n *\n * The question that does separate them is arithmetic, not shape: evaluate what the\n * text replaced and see whether this IS that number. \"-12+30\" → \"18\" still is, so a\n * sum that comes out positive still takes the chip with it; \"-20+50\" → \"7\" is not,\n * and \"-20+\" evaluates to nothing at all.\n */\nfunction isResultOf(previous: string, text: string): boolean {\n  const n = evaluateExpression(previous);\n  return n !== null && formatResult(n) === text.trim();\n}\n\nexport const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(\n  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid, className, id, ariaLabel, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, variant = \"field\", align = \"start\", labels, currencyNames }, ref) => {\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const editable = !!onCurrencyChange;\n    // On phones we suppress the OS keyboard (inputMode=\"none\" below) and show our\n    // own calculator numpad, so the desktop popover trigger is hidden. The\n    // end padding keys off showCalc, so it tightens up automatically.\n    const isMobile = useMediaQuery(PHONE_QUERY, false);\n    const showCalc = !disabled && !isMobile;\n    const [focused, setFocused] = useState(false);\n    // On mobile, focusing the field opens the numpad bottom sheet in place of the\n    // native keyboard (feedback #334) — a full calculator keypad, not just the old\n    // operator bar. An internal ref lets the sheet's \"Done\" blur the input, which\n    // commits + closes via the existing onBlur handler.\n    const showNumpad = isMobile && !disabled && focused;\n    // Gate the display treatment on the SAME `isMobile` the numpad uses rather than\n    // on `max-md:` classes, so the two can never drift apart on the breakpoint —\n    // and so the two shapes are separate class strings instead of one string\n    // fighting itself through responsive overrides. `useMediaQuery` reads\n    // synchronously on mount, so there is no field→figure flash.\n    const asDisplay = variant === \"display\" && isMobile;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const setRefs = useCallback(\n      (el: HTMLInputElement | null) => {\n        innerRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) ref.current = el;\n      },\n      [ref],\n    );\n    // The sign is DISPLAYED, not stored (live #201 rework). `value` is the\n    // magnitude; the minus is glued on here and taken off again in handleText, so\n    // the two can never disagree and the caller can never double-apply it. Only in\n    // front of a bare amount: an expression being typed (\"12-30\") owns its own\n    // minus and has to survive keystroke-for-keystroke.\n    const signOwned = onNegativeChange !== undefined;\n    const shown = signOwned && negative && isBareAmount(value) ? `-${value}` : value;\n    // Every route into the field — typing, the numpad sheet, the desktop\n    // calculator, the blur/Enter commit — funnels through here, so the split is\n    // written once and the four entry paths cannot drift.\n    //\n    // `previous` is the text this one REPLACES, and it is what says whether a bare\n    // figure arriving here is an answer or a magnitude. For the three paths that\n    // edit the field's own text that is simply what the field was showing; the\n    // desktop calculator keeps its expression in a popover the field never sees,\n    // so it passes it in (see `CalculatorButton`'s `onChange`).\n    const handleText = (raw: string, previous: string = shown) => {\n      const text = sanitizeLive(raw);\n      if (!signOwned) {\n        onChange(text);\n        return;\n      }\n      const { sign, rest } = splitLeadingSign(text);\n      if (sign) {\n        // SET, not flip: re-reporting the same sign on every keystroke is a no-op.\n        onNegativeChange(sign === \"-\");\n      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text)) {\n        // A calculation that just RESOLVED states its sign in both directions. The\n        // figure it ran on is the SIGNED one the user could see — \"-12+30\" is +18 —\n        // so a positive result has to move the chip too, or the field would answer\n        // that sum with \"-18\" and contradict the arithmetic it just showed.\n        //\n        // Only when it really resolved, though: see {@link isResultOf}. A bare figure\n        // arriving on top of an expression is far more often a replacement than an\n        // answer, and reading it as an answer flips the direction of money.\n        onNegativeChange(false);\n      }\n      onChange(sign ? rest : text);\n    };\n    const commit = () => handleText(commitExpression(shown));\n    const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();\n    // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so\n    // the panel needs a real trigger rect rather than a relative parent — see\n    // `DropdownPanel`'s note for what an `overflow` ancestor did to it before.\n    const chipRef = useRef<HTMLButtonElement>(null);\n\n    // The currency chip's strings are the `currency` namespace — the same two\n    // `CurrencySelect` resolves, under this component's older key names. The\n    // calculator and the numpad resolve `calculator` themselves; `labels.calculator`\n    // and `labels.pad` are handed straight through to them as overrides.\n    const currencyOverrides = useMemo(() => {\n      const out: Partial<CurrencyLabels> = {};\n      if (labels?.currency !== undefined) out.currency = labels.currency;\n      if (labels?.currencySearch !== undefined) out.search = labels.currencySearch;\n      return out;\n    }, [labels?.currency, labels?.currencySearch]);\n    const currencyText = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, currencyOverrides);\n    const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n    const locale = useKitLocale();\n\n    const selected = getCurrency(currency);\n    const filtered = useMemo(() => {\n      const q = query.trim().toLocaleLowerCase(locale);\n      if (!q) return CURRENCIES;\n      return CURRENCIES.filter(\n        (c) =>\n          c.code.toLowerCase().includes(q) ||\n          // The name the row SHOWS, so a translated list is searchable in the\n          // language it is written in.\n          currencyName(c, currencyNames, locale).toLocaleLowerCase(locale).includes(q) ||\n          c.symbol.toLowerCase().includes(q),\n      );\n    }, [query, currencyNames, locale]);\n\n    return (\n      <div ref={wrapperRef} className={cn(\"w-full\", className)}>\n        {/* Inner relative box holds the input + its absolutely-positioned\n            trailing controls (calculator / currency), so those stay anchored to\n            the INPUT even when the mobile math bar is rendered below (#334). */}\n        <div className=\"relative w-full\">\n        <input\n          ref={setRefs}\n          id={fieldId}\n          aria-label={ariaLabel}\n          type=\"text\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)\n          autoFocus={autoFocus}\n          // On mobile suppress the OS keyboard so our numpad sheet owns entry; the\n          // field keeps focus/caret. Desktop keeps the native decimal keypad.\n          inputMode={isMobile ? \"none\" : \"decimal\"}\n          autoComplete=\"off\"\n          disabled={disabled}\n          // The floating-label pattern needs a blank placeholder for its\n          // peer-placeholder-shown trick. The display shape has no floating label,\n          // so it spends the placeholder on what an empty borderless form actually\n          // needs: a zero to aim at, at full size. The caller supplies it because\n          // only the app knows the locale's decimal separator.\n          placeholder={asDisplay ? (placeholder ?? \"0\") : label !== undefined ? \" \" : placeholder}\n          value={shown}\n          onChange={(e) => handleText(e.target.value)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => {\n            commit();\n            setFocused(false);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") commit();\n          }}\n          className={cn(\n            // With a label, use the floating-input padding (pt-4 pb-1) like every\n            // other labelled field so the value sits BELOW the floated label rather\n            // than vertically centred where it overlaps the resting label\n            // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +\n            // transparent-placeholder bits.\n            asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,\n            // Room for the trailing controls. showCalc is always false on a phone,\n            // so the display shape only ever has to clear the currency chip — and\n            // it clears it by the chip's actual width (a text-sm code plus a\n            // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a\n            // 375px screen those 16px are the difference between a readable figure\n            // and a clipped one (feedback #430 rework).\n            asDisplay\n              ? currency ? (editable ? \"pe-16\" : \"pe-12\") : \"pe-0\"\n              : showCalc\n                ? currency ? (editable ? \"pe-24\" : \"pe-16\") : \"pe-10\"\n                : currency ? (editable ? \"pe-20\" : \"pe-14\") : \"pe-3\",\n            // Centred display shape: centre in what is LEFT of the currency chip.\n            // `text-center` alone would centre the figure in the whole box, i.e.\n            // partly underneath the chip; the padding above is what takes the chip\n            // out of the centring, and nothing is added at the start because a\n            // mirrored reservation would spend the width twice (see `align`).\n            asDisplay && align === \"center\" && \"text-center\",\n            // Last, so it wins over the base class's own text colour.\n            TONE_CLASS[tone],\n            invalid && FIELD_INVALID,\n          )}\n          aria-invalid={invalid || undefined}\n        />\n        {label !== undefined && (\n          // The display shape drops the label VISUALLY, not from the accessibility\n          // tree: a 36px tinted figure at the top of a transaction form is legibly\n          // the amount, but a screen reader still needs the name, and callers that\n          // pass `label` without `ariaLabel` would otherwise be left with none.\n          <label htmlFor={fieldId} className={asDisplay ? \"sr-only\" : FLOATING_LABEL_CLASS}>\n            {label}\n          </label>\n        )}\n        {/* Trailing controls share one flex track so the calculator icon and the\n            currency suffix/picker sit side by side without overlapping. */}\n        {/* The display shape has no box to inset from, so the controls align to the\n            figure's own end edge and its baseline strip (`bottom-1`, matching the\n            input's pb-1) instead of floating inside a field. */}\n        <div\n          className={cn(\n            \"absolute flex items-center gap-0.5\",\n            // Logical `end-*`: the chip and the calculator are the figure's trailing\n            // controls, so a right-to-left form carries them on the left.\n            asDisplay ? \"bottom-1 end-0\" : \"inset-y-1 end-1\",\n          )}\n        >\n          {showCalc && (\n            <CalculatorButton\n              value={shown}\n              onChange={handleText}\n              className=\"px-1.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {currency && !editable && (\n            <span\n              aria-hidden\n              className={cn(\n                \"pointer-events-none px-1 font-medium text-[var(--text-muted)]\",\n                // A text-xs chip next to a 36px figure reads as a stray footnote.\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n            </span>\n          )}\n          {currency && editable && (\n            <button\n              ref={chipRef}\n              type=\"button\"\n              onClick={() => setOpen((v) => !v)}\n              aria-label={\n                // \"Currency: EUR\" through `common.fieldValue`, not a template literal:\n                // the colon-and-space is punctuation a translation has to own.\n                selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency\n              }\n              className={cn(\n                \"flex items-center gap-1 rounded px-2 py-1 font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n              <ChevronDown className=\"size-3\" />\n            </button>\n          )}\n        </div>\n        {editable && open && (\n          <DropdownPanel\n            anchorRef={chipRef}\n            panelRef={panelRef}\n            empty={filtered.length === 0}\n            header={\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={setQuery}\n                inputRef={inputRef}\n                placeholder={currencyText.search}\n              />\n            }\n          >\n            {filtered.map((c) => {\n                const active = c.code === selected?.code;\n                return (\n                  <li key={c.code}>\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        onCurrencyChange?.(c.code);\n                        setOpen(false);\n                      }}\n                      className={cn(\n                        \"flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]\",\n                        active && \"bg-[var(--bg-active)]\",\n                      )}\n                    >\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-[var(--text-muted)] w-8 shrink-0 text-xs\">\n                        {c.symbol}\n                      </span>\n                      <span className=\"font-medium text-[var(--text-primary)]\">{c.code}</span>\n                      <span className=\"text-[var(--text-muted)] truncate text-xs\">{currencyName(c, currencyNames, locale)}</span>\n                    </button>\n                  </li>\n                );\n              })}\n          </DropdownPanel>\n        )}\n        </div>\n        {showNumpad && (\n          <NumberPadSheet\n            value={shown}\n            onChange={handleText}\n            onDone={() => innerRef.current?.blur()}\n            label={label}\n            labels={labels?.pad}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAmountInput.displayName = \"AmountInput\";\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { forwardRef, useCallback, useId, useMemo, useRef, useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { CURRENCIES, CurrencyFlag, currencyName, getCurrency } from \"./currency-select\";\nimport { FIELD_BASE, FIELD_DISPLAY, FIELD_INVALID, FLOATING_INPUT_CLASS, FLOATING_LABEL_CLASS, PHONE_QUERY } from \"./ui\";\nimport { cn } from \"../lib/cn\";\nimport { useMediaQuery } from \"../hooks/use-media-query\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\nimport { DropdownPanel, DropdownSearchHeader, useDropdownSearch } from \"./dropdown\";\nimport {\n  DEFAULT_COMMON_LABELS,\n  DEFAULT_CURRENCY_LABELS,\n  useKitLabels,\n  useKitLocale,\n  type CurrencyLabels,\n} from \"../i18n/kit-labels\";\nimport {\n  commitExpression,\n  evaluateExpression,\n  formatResult,\n  isBareAmount,\n  looksLikeExpression,\n  sanitizeLive,\n  splitLeadingSign,\n} from \"../lib/calc\";\n\ninterface AmountInputProps {\n  value: string;\n  onChange: (value: string) => void;\n  currency?: string;\n  onCurrencyChange?: (code: string) => void;\n  placeholder?: string;\n  label?: ReactNode;\n  disabled?: boolean;\n  /** Required and unanswered — {@link FIELD_INVALID}. See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  className?: string;\n  id?: string;\n  ariaLabel?: string;\n  /**\n   * Set on the `<input>`, with `id` above. Declared so `Field`'s render-prop spread —\n   * `{(ids) => <AmountInput {...ids} … />}` — is typed and reaches the input: the\n   * hint and error are described, a required amount is announced as required, and\n   * `aria-invalid` paints {@link FIELD_INVALID} the way `invalid` does.\n   */\n  \"aria-describedby\"?: string;\n  \"aria-invalid\"?: boolean | \"true\" | \"false\";\n  \"aria-required\"?: boolean | \"true\" | \"false\";\n  /** Every user-facing string this component and the two it composes own, so a\n   *  translating host can supply its own. Each key optional, and each a per-field\n   *  override of the kit-wide translation in `<UiKitProvider labels>`: `currency`\n   *  and `currencySearch` of its `currency` namespace, the rest of `calculator`.\n   *  `currency` names the picker chip, composed with the selected code through\n   *  `common.fieldValue`; the rest are pass-through. */\n  labels?: {\n    currency?: string;\n    currencySearch?: string;\n    /** Names the calculator TRIGGER this component renders. `calculator` below\n     *  names the controls inside the popover it opens. */\n    calculatorTrigger?: string;\n    pad?: NumberPadSheetLabels;\n    calculator?: CalculatorButtonLabels;\n  };\n  /** Translated currency names for the chip's picker, keyed by ISO code. The same\n   *  sparse override `CurrencySelect` takes, and for the same reason: the names in\n   *  `CURRENCIES` are shipped data, so without this they are the one English word\n   *  left in a translated row. Not part of `labels` because it is keyed by DATA\n   *  rather than by a fixed set of slots, and an app passes the same map to both\n   *  pickers. */\n  currencyNames?: Record<string, string>;\n  /** Focus the field on mount — on mobile this also opens the numpad sheet, so a\n   *  new-transaction form can jump straight to amount entry (feedback #70). */\n  autoFocus?: boolean;\n  /**\n   * Tint the typed figure by what it will DO (Keksdose feedback #167).\n   *\n   * The direction is chosen with a toggle beside the field rather than typed, so\n   * the digits alone say nothing about which way the money goes — on the one screen\n   * where getting that backwards is the expensive mistake. Colour says it\n   * continuously, and it costs no layout. It stays the MAIN indication (live #201\n   * rework: *\"The main indication shall still be the color\"*); {@link negative}\n   * renders the sign as a second, quieter signal in front of the figure.\n   *\n   * Never the ONLY signal: the toggle it mirrors is right there, labelled, so this\n   * is reinforcement rather than the sole carrier of the meaning.\n   */\n  tone?: \"neutral\" | \"outflow\" | \"inflow\";\n  /**\n   * The SIGN of the figure, owned by the caller's direction control (Keksdose live\n   * #201 rework: *\"Outflow should be negative and inflow positive … the sign shall\n   * be displayed but not necessarily be typed in\"*).\n   *\n   * `value` stays the MAGNITUDE. The minus is glued on at render time and stripped\n   * off again before anything is reported back, so the caller never sees its own\n   * prefix echoed and no code path can end up applying it twice. That is the whole\n   * cure: there is exactly ONE place the sign lives, and it is not the text.\n   *\n   * Because it is rendered rather than stored it cannot be deleted (the next render\n   * puts it back), a select-all-and-retype keeps the direction, and the caret needs\n   * no minding.\n   */\n  negative?: boolean;\n  /**\n   * A sign the user TYPED, or a calculation that resolved to a signed number.\n   *\n   * SET, never flip. A \"-\" means *\"this is an outflow\"*, so typing it twice says the\n   * same thing twice — which is exactly what the rework asks for (*\"Subtracting\n   * values twice resulting in inflow -> outflow and back to inflow seems not\n   * reasonable\"*). \"+\" says the other direction.\n   *\n   * Its presence is what ARMS the whole sign behaviour. A field with no direction\n   * control — an account's starting balance, a loan payment, a holding's cost —\n   * passes neither prop and keeps a text that is the whole truth, minus included.\n   */\n  onNegativeChange?: (negative: boolean) => void;\n  /**\n   * How the field presents itself ON A PHONE (Keksdose feedback #176).\n   *\n   * `\"field\"` (default) is the labelled, bordered input used everywhere else.\n   *\n   * `\"display\"` keeps every mechanic — the same `<input>`, the same numpad sheet,\n   * the same currency picker, the same commit/blur contract — and only drops the\n   * chrome: no border, no fill, no floating label, the figure set at display size.\n   * On a form whose whole point is one number, a bordered `text-sm` box draws the\n   * amount at the same weight as the memo beside it; this makes it the headline\n   * instead. It stays fully editable — the underline and the caret are what say so.\n   *\n   * Phone-only by construction: it keys off the same breakpoint as the numpad, so\n   * from `md` up the field is byte-for-byte the normal one and a desktop grid keeps\n   * its column rhythm.\n   */\n  variant?: \"field\" | \"display\";\n  /**\n   * Where the figure sits in its row, for `variant=\"display\"` only (Keksdose\n   * feedback #176 rework).\n   *\n   * `\"start\"` (default) keeps it flush left, in the reading column the fields\n   * below it share — and it is what the entry forms use, because a figure that\n   * starts at a known edge is legible at any width: when the value outgrows the\n   * field, the digits that scroll out of sight are the trailing ones, not the\n   * magnitude (Keksdose feedback #430 rework).\n   *\n   * `\"center\"` makes it a centred headline. It centres in the width that REMAINS\n   * after the trailing currency control, not in the whole box: the control is\n   * pinned to the right edge, so a plain `text-center` would centre the figure\n   * under it and the last digits would sit behind the chip. This used to mirror\n   * the control's reservation onto the left instead, which centred correctly but\n   * spent twice the control's width on padding — fatal on a 375px screen, where\n   * it left a 36px figure 16px to live in.\n   */\n  align?: \"start\" | \"center\";\n}\n\n// The consuming app's ONE money palette (`--money-expense` / `--money-income`),\n// not a bespoke rose/emerald pairing: a figure being typed has to wear the same\n// colour the same figure will wear once it is a row in the table behind the form\n// (Keksdose dev#434). The utilities are unlayered and theme-aware, so no `dark:`\n// variant is needed and they win over the field's own text colour regardless of\n// where `cn` puts them.\nconst TONE_CLASS: Record<\"neutral\" | \"outflow\" | \"inflow\", string> = {\n  neutral: \"\",\n  outflow: \"text-money-neg\",\n  inflow: \"text-money-pos\",\n};\n\n// The shared chrome-less treatment at money size. `tabular-nums` so digits don't\n// reflow the figure as they are typed; FIELD_DISPLAY's own muted placeholder\n// colour is what keeps an EMPTY form from painting its zero in the direction tint\n// (`tone` is computed from 0, which reads as an inflow).\nconst DISPLAY_INPUT_CLASS = cn(\n  FIELD_DISPLAY,\n  \"text-4xl font-semibold leading-tight tracking-tight tabular-nums\",\n);\n\n/**\n * Is `text` the ANSWER to `previous`, or something typed OVER it?\n *\n * \"The old text was a sum and the new one is bare\" cannot tell those apart, and both\n * gestures are ordinary: select-all-and-retype after a typo, or backspacing \"-20+\"\n * back down to a fresh figure. Read as an answer, they move the direction chip — so\n * an outflow of 7 quietly booked +7.00 (live #201 rework).\n *\n * The question that does separate them is arithmetic, not shape: evaluate what the\n * text replaced and see whether this IS that number. \"-12+30\" → \"18\" still is, so a\n * sum that comes out positive still takes the chip with it; \"-20+50\" → \"7\" is not,\n * and \"-20+\" evaluates to nothing at all.\n */\nfunction isResultOf(previous: string, text: string): boolean {\n  const n = evaluateExpression(previous);\n  return n !== null && formatResult(n) === text.trim();\n}\n\nexport const AmountInput = forwardRef<HTMLInputElement, AmountInputProps>(\n  ({ value, onChange, currency, onCurrencyChange, placeholder, label, disabled, invalid: invalidProp, className, id, ariaLabel, \"aria-describedby\": ariaDescribedBy, \"aria-invalid\": ariaInvalid, \"aria-required\": ariaRequired, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, variant = \"field\", align = \"start\", labels, currencyNames }, ref) => {\n    const generatedId = useId();\n    const fieldId = id ?? generatedId;\n    const invalid = Boolean(invalidProp) || ariaInvalid === true || ariaInvalid === \"true\";\n    const editable = !!onCurrencyChange;\n    // On phones we suppress the OS keyboard (inputMode=\"none\" below) and show our\n    // own calculator numpad, so the desktop popover trigger is hidden. The\n    // end padding keys off showCalc, so it tightens up automatically.\n    const isMobile = useMediaQuery(PHONE_QUERY, false);\n    const showCalc = !disabled && !isMobile;\n    const [focused, setFocused] = useState(false);\n    // On mobile, focusing the field opens the numpad bottom sheet in place of the\n    // native keyboard (feedback #334) — a full calculator keypad, not just the old\n    // operator bar. An internal ref lets the sheet's \"Done\" blur the input, which\n    // commits + closes via the existing onBlur handler.\n    const showNumpad = isMobile && !disabled && focused;\n    // Gate the display treatment on the SAME `isMobile` the numpad uses rather than\n    // on `max-md:` classes, so the two can never drift apart on the breakpoint —\n    // and so the two shapes are separate class strings instead of one string\n    // fighting itself through responsive overrides. `useMediaQuery` reads\n    // synchronously on mount, so there is no field→figure flash.\n    const asDisplay = variant === \"display\" && isMobile;\n    const innerRef = useRef<HTMLInputElement>(null);\n    const setRefs = useCallback(\n      (el: HTMLInputElement | null) => {\n        innerRef.current = el;\n        if (typeof ref === \"function\") ref(el);\n        else if (ref) ref.current = el;\n      },\n      [ref],\n    );\n    // The sign is DISPLAYED, not stored (live #201 rework). `value` is the\n    // magnitude; the minus is glued on here and taken off again in handleText, so\n    // the two can never disagree and the caller can never double-apply it. Only in\n    // front of a bare amount: an expression being typed (\"12-30\") owns its own\n    // minus and has to survive keystroke-for-keystroke.\n    const signOwned = onNegativeChange !== undefined;\n    const shown = signOwned && negative && isBareAmount(value) ? `-${value}` : value;\n    // Every route into the field — typing, the numpad sheet, the desktop\n    // calculator, the blur/Enter commit — funnels through here, so the split is\n    // written once and the four entry paths cannot drift.\n    //\n    // `previous` is the text this one REPLACES, and it is what says whether a bare\n    // figure arriving here is an answer or a magnitude. For the three paths that\n    // edit the field's own text that is simply what the field was showing; the\n    // desktop calculator keeps its expression in a popover the field never sees,\n    // so it passes it in (see `CalculatorButton`'s `onChange`).\n    const handleText = (raw: string, previous: string = shown) => {\n      const text = sanitizeLive(raw);\n      if (!signOwned) {\n        onChange(text);\n        return;\n      }\n      const { sign, rest } = splitLeadingSign(text);\n      if (sign) {\n        // SET, not flip: re-reporting the same sign on every keystroke is a no-op.\n        onNegativeChange(sign === \"-\");\n      } else if (looksLikeExpression(previous) && isBareAmount(text) && isResultOf(previous, text)) {\n        // A calculation that just RESOLVED states its sign in both directions. The\n        // figure it ran on is the SIGNED one the user could see — \"-12+30\" is +18 —\n        // so a positive result has to move the chip too, or the field would answer\n        // that sum with \"-18\" and contradict the arithmetic it just showed.\n        //\n        // Only when it really resolved, though: see {@link isResultOf}. A bare figure\n        // arriving on top of an expression is far more often a replacement than an\n        // answer, and reading it as an answer flips the direction of money.\n        onNegativeChange(false);\n      }\n      onChange(sign ? rest : text);\n    };\n    const commit = () => handleText(commitExpression(shown));\n    const { open, setOpen, wrapperRef, panelRef, query, setQuery, inputRef } = useDropdownSearch();\n    // The chip the currency list hangs off (Keksdose dev#548). It is portalled now, so\n    // the panel needs a real trigger rect rather than a relative parent — see\n    // `DropdownPanel`'s note for what an `overflow` ancestor did to it before.\n    const chipRef = useRef<HTMLButtonElement>(null);\n\n    // The currency chip's strings are the `currency` namespace — the same two\n    // `CurrencySelect` resolves, under this component's older key names. The\n    // calculator and the numpad resolve `calculator` themselves; `labels.calculator`\n    // and `labels.pad` are handed straight through to them as overrides.\n    const currencyOverrides = useMemo(() => {\n      const out: Partial<CurrencyLabels> = {};\n      if (labels?.currency !== undefined) out.currency = labels.currency;\n      if (labels?.currencySearch !== undefined) out.search = labels.currencySearch;\n      return out;\n    }, [labels?.currency, labels?.currencySearch]);\n    const currencyText = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, currencyOverrides);\n    const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n    const locale = useKitLocale();\n\n    const selected = getCurrency(currency);\n    const filtered = useMemo(() => {\n      const q = query.trim().toLocaleLowerCase(locale);\n      if (!q) return CURRENCIES;\n      return CURRENCIES.filter(\n        (c) =>\n          c.code.toLowerCase().includes(q) ||\n          // The name the row SHOWS, so a translated list is searchable in the\n          // language it is written in.\n          currencyName(c, currencyNames, locale).toLocaleLowerCase(locale).includes(q) ||\n          c.symbol.toLowerCase().includes(q),\n      );\n    }, [query, currencyNames, locale]);\n\n    return (\n      <div ref={wrapperRef} className={cn(\"w-full\", className)}>\n        {/* Inner relative box holds the input + its absolutely-positioned\n            trailing controls (calculator / currency), so those stay anchored to\n            the INPUT even when the mobile math bar is rendered below (#334). */}\n        <div className=\"relative w-full\">\n        <input\n          ref={setRefs}\n          id={fieldId}\n          aria-label={ariaLabel}\n          type=\"text\"\n          // eslint-disable-next-line jsx-a11y/no-autofocus -- opt-in per call site (feedback #70)\n          autoFocus={autoFocus}\n          // On mobile suppress the OS keyboard so our numpad sheet owns entry; the\n          // field keeps focus/caret. Desktop keeps the native decimal keypad.\n          inputMode={isMobile ? \"none\" : \"decimal\"}\n          autoComplete=\"off\"\n          disabled={disabled}\n          // The floating-label pattern needs a blank placeholder for its\n          // peer-placeholder-shown trick. The display shape has no floating label,\n          // so it spends the placeholder on what an empty borderless form actually\n          // needs: a zero to aim at, at full size. The caller supplies it because\n          // only the app knows the locale's decimal separator.\n          placeholder={asDisplay ? (placeholder ?? \"0\") : label !== undefined ? \" \" : placeholder}\n          value={shown}\n          onChange={(e) => handleText(e.target.value)}\n          onFocus={() => setFocused(true)}\n          onBlur={() => {\n            commit();\n            setFocused(false);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") commit();\n          }}\n          className={cn(\n            // With a label, use the floating-input padding (pt-4 pb-1) like every\n            // other labelled field so the value sits BELOW the floated label rather\n            // than vertically centred where it overlaps the resting label\n            // (feedback #314). FLOATING_INPUT_CLASS already bundles the peer +\n            // transparent-placeholder bits.\n            asDisplay ? DISPLAY_INPUT_CLASS : label !== undefined ? FLOATING_INPUT_CLASS : FIELD_BASE,\n            // Room for the trailing controls. showCalc is always false on a phone,\n            // so the display shape only ever has to clear the currency chip — and\n            // it clears it by the chip's actual width (a text-sm code plus a\n            // chevron, ~58px) rather than the 5rem the boxed shape reserves. On a\n            // 375px screen those 16px are the difference between a readable figure\n            // and a clipped one (feedback #430 rework).\n            asDisplay\n              ? currency ? (editable ? \"pe-16\" : \"pe-12\") : \"pe-0\"\n              : showCalc\n                ? currency ? (editable ? \"pe-24\" : \"pe-16\") : \"pe-10\"\n                : currency ? (editable ? \"pe-20\" : \"pe-14\") : \"pe-3\",\n            // Centred display shape: centre in what is LEFT of the currency chip.\n            // `text-center` alone would centre the figure in the whole box, i.e.\n            // partly underneath the chip; the padding above is what takes the chip\n            // out of the centring, and nothing is added at the start because a\n            // mirrored reservation would spend the width twice (see `align`).\n            asDisplay && align === \"center\" && \"text-center\",\n            // Last, so it wins over the base class's own text colour.\n            TONE_CLASS[tone],\n            invalid && FIELD_INVALID,\n          )}\n          aria-invalid={invalid || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired}\n        />\n        {label !== undefined && (\n          // The display shape drops the label VISUALLY, not from the accessibility\n          // tree: a 36px tinted figure at the top of a transaction form is legibly\n          // the amount, but a screen reader still needs the name, and callers that\n          // pass `label` without `ariaLabel` would otherwise be left with none.\n          <label htmlFor={fieldId} className={asDisplay ? \"sr-only\" : FLOATING_LABEL_CLASS}>\n            {label}\n          </label>\n        )}\n        {/* Trailing controls share one flex track so the calculator icon and the\n            currency suffix/picker sit side by side without overlapping. */}\n        {/* The display shape has no box to inset from, so the controls align to the\n            figure's own end edge and its baseline strip (`bottom-1`, matching the\n            input's pb-1) instead of floating inside a field. */}\n        <div\n          className={cn(\n            \"absolute flex items-center gap-0.5\",\n            // Logical `end-*`: the chip and the calculator are the figure's trailing\n            // controls, so a right-to-left form carries them on the left.\n            asDisplay ? \"bottom-1 end-0\" : \"inset-y-1 end-1\",\n          )}\n        >\n          {showCalc && (\n            <CalculatorButton\n              value={shown}\n              onChange={handleText}\n              className=\"px-1.5\"\n              ariaLabel={labels?.calculatorTrigger}\n              labels={labels?.calculator}\n            />\n          )}\n          {currency && !editable && (\n            <span\n              aria-hidden\n              className={cn(\n                \"pointer-events-none px-1 font-medium text-[var(--text-muted)]\",\n                // A text-xs chip next to a 36px figure reads as a stray footnote.\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n            </span>\n          )}\n          {currency && editable && (\n            <button\n              ref={chipRef}\n              type=\"button\"\n              onClick={() => setOpen((v) => !v)}\n              aria-label={\n                // \"Currency: EUR\" through `common.fieldValue`, not a template literal:\n                // the colon-and-space is punctuation a translation has to own.\n                selected ? common.fieldValue(currencyText.currency, selected.code) : currencyText.currency\n              }\n              className={cn(\n                \"flex items-center gap-1 rounded px-2 py-1 font-medium text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\",\n                asDisplay ? \"text-sm\" : \"text-xs\",\n              )}\n            >\n              {currency}\n              <ChevronDown className=\"size-3\" />\n            </button>\n          )}\n        </div>\n        {editable && open && (\n          <DropdownPanel\n            anchorRef={chipRef}\n            panelRef={panelRef}\n            empty={filtered.length === 0}\n            header={\n              <DropdownSearchHeader\n                query={query}\n                onQueryChange={setQuery}\n                inputRef={inputRef}\n                placeholder={currencyText.search}\n              />\n            }\n          >\n            {filtered.map((c) => {\n                const active = c.code === selected?.code;\n                return (\n                  <li key={c.code}>\n                    <button\n                      type=\"button\"\n                      onClick={() => {\n                        onCurrencyChange?.(c.code);\n                        setOpen(false);\n                      }}\n                      className={cn(\n                        \"flex w-full items-center gap-2 px-3 py-1.5 text-sm text-start hover:bg-[var(--bg-hover)]\",\n                        active && \"bg-[var(--bg-active)]\",\n                      )}\n                    >\n                      <CurrencyFlag country={c.country} />\n                      <span className=\"font-mono text-[var(--text-muted)] w-8 shrink-0 text-xs\">\n                        {c.symbol}\n                      </span>\n                      <span className=\"font-medium text-[var(--text-primary)]\">{c.code}</span>\n                      <span className=\"text-[var(--text-muted)] truncate text-xs\">{currencyName(c, currencyNames, locale)}</span>\n                    </button>\n                  </li>\n                );\n              })}\n          </DropdownPanel>\n        )}\n        </div>\n        {showNumpad && (\n          <NumberPadSheet\n            value={shown}\n            onChange={handleText}\n            onDone={() => innerRef.current?.blur()}\n            label={label}\n            labels={labels?.pad}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAmountInput.displayName = \"AmountInput\";\n"],"mappings":"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","names":[]}

package/dist/components/authed-image.d.ts

@@ -0,0 +1,68 @@
+import * as react from 'react';
+import { ImgHTMLAttributes, ReactNode } from 'react';
+import { AuthedFetcher, UseAuthedSrcResult } from '../hooks/use-authed-src.js';
+
+/** The two states an image can be in besides "there". */
+interface AuthedImageLabels {
+    /** Read out while the bytes are on their way (the skeleton itself is silent). */
+    loading: string;
+    /** Shown, small, in place of an image that could not be fetched or decoded. */
+    loadError: string;
+    /** The failed tile's accessible name, given the image's alt. */
+    failedImage: (alt: string) => string;
+}
+declare const DEFAULT_AUTHED_IMAGE_LABELS: AuthedImageLabels;
+interface AuthedImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children"> {
+    /** The image's URL — an API path when a {@link fetcher} is given. */
+    src: string | null | undefined;
+    /** Required: an image without a text alternative is a gap a reader falls into.
+     *  `""` for a purely decorative one. */
+    alt: string;
+    /** The app's authenticated GET (see {@link useAuthedSrc}). Left out, `src` is loaded
+     *  by the browser as usual and this is an `<img>` with loading and error states. */
+    fetcher?: AuthedFetcher | null;
+    /** Classes for the box around the image (the placeholders fill it). */
+    wrapperClassName?: string;
+    /**
+     * Wrap the image in a link to itself, opening in a new tab — kastlan's
+     * `AuthedImage` did, because an object URL is the only address of a protected image
+     * a browser tab can open. The link's href is the `blob:` URL, never the API path.
+     */
+    link?: boolean;
+    /** Replaces the default skeleton while loading. */
+    loadingFallback?: ReactNode;
+    /** Replaces the default "couldn't load" tile. */
+    errorFallback?: ReactNode;
+    labels?: Partial<AuthedImageLabels>;
+}
+/**
+ * An image with a loading state, an error state and — given a `fetcher` — the app's
+ * authentication. Replaces kastlan's `shared/components/authed-image.tsx`, which
+ * rendered NOTHING until the blob arrived and nothing at all if it never did: a card
+ * with a photo slot either had the photo or was silently shorter.
+ *
+ * Two failures are one state here: the fetch failing (401, 404, offline) and the
+ * browser failing to decode what arrived (`onError` on the `<img>`, e.g. a PDF served
+ * where an image was expected).
+ */
+declare function AuthedImage({ src, alt, fetcher, wrapperClassName, className, link, loadingFallback, errorFallback, labels: labelsProp, onLoad, onError, ...rest }: AuthedImageProps): react.JSX.Element;
+/**
+ * The rendering half of {@link AuthedImage}, for a caller that already holds a
+ * {@link useAuthedSrc} result (the lightbox needs the object URL for its download link
+ * as well). Internal to the package.
+ */
+declare function ImageStates({ fetched, alt, labels, className, wrapperClassName, link, loadingFallback, errorFallback, imgProps, onLoad, onError, }: {
+    fetched: UseAuthedSrcResult;
+    alt: string;
+    labels: AuthedImageLabels;
+    className?: string;
+    wrapperClassName?: string;
+    link?: boolean;
+    loadingFallback?: ReactNode;
+    errorFallback?: ReactNode;
+    imgProps?: Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "children" | "onLoad" | "onError">;
+    onLoad?: ImgHTMLAttributes<HTMLImageElement>["onLoad"];
+    onError?: ImgHTMLAttributes<HTMLImageElement>["onError"];
+}): react.JSX.Element;
+
+export { AuthedImage, type AuthedImageLabels, type AuthedImageProps, DEFAULT_AUTHED_IMAGE_LABELS, ImageStates };

package/dist/components/authed-image.js

@@ -0,0 +1,117 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ImageOff } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { SKELETON_CLASS } from "./skeleton.js";
+import { useAuthedSrc } from "../hooks/use-authed-src.js";
+const DEFAULT_AUTHED_IMAGE_LABELS = {
+  loading: "Loading image\u2026",
+  loadError: "Image couldn\u2019t be loaded",
+  failedImage: (alt) => `${alt}: image couldn\u2019t be loaded`
+};
+function AuthedImage({
+  src,
+  alt,
+  fetcher,
+  wrapperClassName,
+  className,
+  link,
+  loadingFallback,
+  errorFallback,
+  labels: labelsProp,
+  onLoad,
+  onError,
+  ...rest
+}) {
+  const labels = useKitLabels("authedImage", DEFAULT_AUTHED_IMAGE_LABELS, labelsProp);
+  const fetched = useAuthedSrc(src, { fetcher });
+  return /* @__PURE__ */ jsx(
+    ImageStates,
+    {
+      fetched,
+      alt,
+      labels,
+      className,
+      wrapperClassName,
+      link,
+      loadingFallback,
+      errorFallback,
+      imgProps: rest,
+      onLoad,
+      onError
+    }
+  );
+}
+function ImageStates({
+  fetched,
+  alt,
+  labels,
+  className,
+  wrapperClassName,
+  link,
+  loadingFallback,
+  errorFallback,
+  imgProps,
+  onLoad,
+  onError
+}) {
+  const [decode, setDecode] = useState(null);
+  const decoded = decode && decode.src === fetched.src ? decode.state : "pending";
+  const failed = fetched.status === "error" || decoded === "error";
+  const waiting = !failed && (fetched.status === "loading" || fetched.src !== null && decoded === "pending");
+  const img = fetched.src !== null && !failed && // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- load/error are resource events, not interactions
+  /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...imgProps,
+      src: fetched.src,
+      alt,
+      onLoad: (e) => {
+        setDecode({ src: fetched.src, state: "loaded" });
+        onLoad?.(e);
+      },
+      onError: (e) => {
+        setDecode({ src: fetched.src, state: "error" });
+        onError?.(e);
+      },
+      className: cn(
+        // Kept in the tree while it decodes (the browser needs it there to load at
+        // all), but invisible, so the skeleton is what shows.
+        decoded === "pending" && "opacity-0",
+        className
+      )
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "data-image-state": failed ? "error" : waiting ? "loading" : fetched.status === "idle" ? "idle" : "ready",
+      className: cn("relative block overflow-hidden", wrapperClassName),
+      "aria-busy": waiting || void 0,
+      children: [
+        link && img && fetched.src ? /* @__PURE__ */ jsx("a", { href: fetched.src, target: "_blank", rel: "noreferrer noopener", className: "block h-full w-full", children: img }) : img,
+        waiting && (loadingFallback ?? /* @__PURE__ */ jsx("span", { className: cn(SKELETON_CLASS, "absolute inset-0 block rounded-none"), children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.loading }) })),
+        failed && (errorFallback ?? /* @__PURE__ */ jsxs(
+          "span",
+          {
+            role: "img",
+            "aria-label": alt ? labels.failedImage(alt) : labels.loadError,
+            className: "flex h-full min-h-16 w-full flex-col items-center justify-center gap-1 bg-[var(--bg-hover)] p-2 text-center text-xs text-[var(--text-muted)]",
+            children: [
+              /* @__PURE__ */ jsx(ImageOff, { "aria-hidden": true, className: "size-5 shrink-0" }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "line-clamp-2", children: labels.loadError })
+            ]
+          }
+        ))
+      ]
+    }
+  );
+}
+export {
+  AuthedImage,
+  DEFAULT_AUTHED_IMAGE_LABELS,
+  ImageStates
+};
+//# sourceMappingURL=authed-image.js.map