@eifi1/ui-kit 0.10.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":";AAmDQ,cACA,YADA;AAnDR,SAAS,OAAO,gBAAgB;AAEhC,SAAS,QAAQ,MAAM,qBAAqB,aAAa;AACzD,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB,oBAAoB;AAkB7C,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAUG;AACD,QAAM,QAAQ,MAAM,KAAK,EAAE,SAAS,KAAK,MAAM,KAAK,OAAO,QAAQ;AAInE,QAAM,UAAU,MAAM;AACtB,SACE,qBAAC,QAAK,WAAU,iBACd;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,cAAW,MAAY,OAAc,MAAK,MAAK;AAAA,MAChD,qBAAC,SAAI,WAAU,WACb;AAAA,4BAAC,SAAI,WAAU,uBAAuB,iBAAO,OAAM;AAAA,QACnD,oBAAC,SAAI,WAAU,uDAAuD,mBAAS,UAAI;AAAA,SACrF;AAAA,OACF;AAAA,IACA,qBAAC,SAAI,WAAU,4DACb;AAAA,0BAAC,UAAK,WAAU,4BAA4B,iBAAO,MAAK;AAAA,MACxD,oBAAC,UAAM,kBAAQ,UAAI;AAAA,MACnB,oBAAC,UAAK,WAAU,4BAA4B,iBAAO,aAAY;AAAA,MAC/D,oBAAC,UAAM,yBAAe,UAAI;AAAA,OAC5B;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ,OAAO,OAAO;AAAA,QACd;AAAA,QACA,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,QACxC,WAAW;AAAA;AAAA,IACb;AAAA,IACA,oBAAC,UAAO,SAAS,QAAQ,UAAU,CAAC,SAAS,QAC1C,iBAAO,MACV;AAAA,KACF;AAEJ;AAYO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAMG;AACD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,EAAE;AACzC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,QAAM,SAAS,YAAY;AACzB,QAAI,KAAK,SAAS,WAAW;AAC3B,eAAS,OAAO,QAAQ;AACxB;AAAA,IACF;AACA,QAAI,SAAS,SAAS;AACpB,eAAS,OAAO,QAAQ;AACxB;AAAA,IACF;AACA,aAAS,IAAI;AACb,QAAI;AACF,YAAM,SAAS,SAAS,IAAI;AAC5B,iBAAW,EAAE;AACb,cAAQ,EAAE;AACV,iBAAW,EAAE;AAAA,IACf,QAAQ;AAAA,IAER;AAAA,EACF;AAEA,SACE,qBAAC,QAAK,WAAU,iBACd;AAAA,wBAAC,SAAI,WAAU,uBAAuB,iBAAO,OAAM;AAAA,IACnD,oBAAC,SAAM,MAAK,YAAW,cAAa,oBAAmB,OAAO,OAAO,SAAS,OAAO,SAAS,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK,GAAG;AAAA,IAC3I,oBAAC,SAAM,MAAK,YAAW,cAAa,gBAAe,OAAO,OAAO,MAAM,OAAO,MAAM,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK,GAAG;AAAA,IAC9H,oBAAC,SAAM,MAAK,YAAW,cAAa,gBAAe,OAAO,OAAO,SAAS,OAAO,SAAS,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK,GAAG;AAAA,IACtI,SAAS,oBAAC,OAAE,WAAU,gCAAgC,iBAAM;AAAA,IAC7D,oBAAC,UAAO,SAAS,MAAM,KAAK,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,SAC9E,iBAAO,QACV;AAAA,KACF;AAEJ;AA6BA,MAAM,iBAAiB;AAEhB,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GASG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,EAAE;AACnC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAM3C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AACnD,QAAM,aAAa,MAAM,eAAe,KAAK;AAG7C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAE3D,SACE,qBAAC,QAAK,WAAU,iBACd;AAAA,wBAAC,SAAI,WAAU,WACZ,iBAAO,WAAW,OAAO,QAAQ,UAAU,OAAO,cAAc,OAAO,YAAY,GACtF;AAAA,IAEC,CAAC,WAAW,CAAC,SACZ,oBAAC,UAAO,SAAS,cAAc,UAAU,MACtC,iBAAO,QACV;AAAA,IAGD,SACC,qBAAC,SAAI,WAAU,aACb;AAAA,0BAAC,SAAI,WAAU,wCAAwC,iBAAO,UAAS;AAAA,MAOvE,oBAAC,SAAI,WAAU,wCACb;AAAA,QAAC;AAAA;AAAA,UACC,KAAK,OAAO,SAAS;AAAA,UACrB,KAAK,6BAA6B,MAAM,KAAK;AAAA,UAC7C,WAAU;AAAA;AAAA,MACZ,GACF;AAAA,MACA,oBAAC,SAAI,WAAU,+BAA+B,gBAAM,QAAO;AAAA,MAC3D;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAa;AAAA,UACb,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB,SAAS;AAAA,UACT,WAAW;AAAA,UACX,OAAO,OAAO;AAAA,UACd,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,UACvC,WAAW,CAAC,MAAuC;AACjD,gBAAI,EAAE,QAAQ,WAAW,QAAQ,CAAC,MAAM;AACtC,gBAAE,eAAe;AACjB,uBAAS,IAAI;AAAA,YACf;AAAA,UACF;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,UAAO,SAAS,MAAM,SAAS,IAAI,GAAG,UAAU,CAAC,QAAQ,MACvD,iBAAO,QACV;AAAA,OACF;AAAA,IAGD,WACC,qBAAC,SAAI,WAAU,kDACb;AAAA,0BAAC,SAAI,WAAU,uBAAuB,iBAAO,gBAAe;AAAA,MAC5D,oBAAC,SAAM,MAAK,YAAW,cAAa,oBAAmB,OAAO,OAAO,UAAU,OAAO,UAAU,UAAU,CAAC,MAAM,YAAY,EAAE,OAAO,KAAK,GAAG;AAAA,MAC9I;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,cAAa;AAAA,UACb,UAAU;AAAA,UACV,gBAAgB;AAAA,UAChB,SAAS;AAAA,UACT,WAAW;AAAA,UACX,OAAO,OAAO;AAAA,UACd,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,QAAQ,EAAE,OAAO,KAAK;AAAA,UACvC,WAAW,CAAC,MAAuC;AACjD,gBAAI,EAAE,QAAQ,WAAW,YAAY,QAAQ,CAAC,MAAM;AAClD,gBAAE,eAAe;AACjB,wBAAU,UAAU,IAAI;AAAA,YAC1B;AAAA,UACF;AAAA;AAAA,MACF;AAAA,MACA,oBAAC,UAAO,SAAQ,UAAS,SAAS,MAAM,UAAU,UAAU,IAAI,GAAG,UAAU,CAAC,YAAY,CAAC,QAAQ,MAChG,iBAAO,SACV;AAAA,OACF;AAAA,KAEJ;AAEJ;","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/alert-banner.d.ts

@@ -45,6 +45,31 @@ interface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "on
     variant?: "box" | "inline" | "strip";
     /** See {@link AlertSize}. Default `md`. */
     size?: AlertSize;
+    /**
+     * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,
+     * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,
+     * centred line it is by default. keksdose writes `className="flex"` on nearly every
+     * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,
+     * guest-key-control:84) to get a line of its own under a total or a field, and a
+     * two-line hint there then centres its glyph between the lines.
+     *
+     * An option rather than the new default, because the inline-flex is load-bearing for
+     * the callers the variant was made for: lenkbank's corner-motion toolbar
+     * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's
+     * import page and keksdose's rules page place it in a run of content — a block would
+     * take the whole row in the second kind, and top-align the first against a taller
+     * control. Ignored by `box` and `strip`, which are blocks already.
+     */
+    block?: boolean;
+    /**
+     * `false` opts an inline banner out of its live region (no `role="alert"` /
+     * `role="status"`), for a message that is static page content rather than the answer
+     * to something the user just did: keksdose's CAMT review step (camt-review-step:214)
+     * renders "unresolved rows block the import" as part of the step, and as
+     * `role="alert"` a screen reader interrupted with it on every mount. A `role` you pass
+     * still wins. Default `true`; the box and the strip are role-less either way.
+     */
+    live?: boolean;
     /**
      * An opaque, raised surface (a shadow, and no translucency in dark mode) for a
      * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`
@@ -95,6 +120,6 @@ type AlertBannerProps = AlertBannerBaseProps & ({
 });
 /** Warning/danger/info callout box with the shared frame and an icon — or, with
  *  `variant="inline"`, the same message as a frameless line of toned text. */
-declare function AlertBanner({ tone, variant, size, elevated, action, icon, onDismiss, dismissLabel, href, onClick, className, children, role, ...rest }: AlertBannerProps): react.JSX.Element;
+declare function AlertBanner({ tone, variant, size, block, live, elevated, action, icon, onDismiss, dismissLabel, href, onClick, className, children, role, ...rest }: AlertBannerProps): react.JSX.Element;
 
 export { AlertBanner, type AlertBannerProps, type AlertSize, type AlertTone, alertFrameClass, toneFrameClass };

package/dist/components/alert-banner.js

@@ -57,6 +57,8 @@ function AlertBanner({
   tone = "danger",
   variant = "box",
   size = "md",
+  block = false,
+  live = true,
   elevated = false,
   action,
   icon,
@@ -74,9 +76,10 @@ function AlertBanner({
   const strip = variant === "strip";
   const sm = size === "sm";
   const interactive = href !== void 0 || onClick !== void 0;
-  const resolvedRole = role ?? (inline ? tone === "danger" ? "alert" : "status" : void 0);
+  const inlineRow = inline && !block;
+  const resolvedRole = role ?? (inline && live ? tone === "danger" ? "alert" : "status" : void 0);
   const Glyph = TONE_GLYPH[tone];
-  const nudge = inline || strip ? void 0 : sm ? "mt-px" : "mt-0.5";
+  const nudge = inlineRow || strip ? void 0 : sm ? "mt-px" : "mt-0.5";
   const glyph = icon === null ? null : icon !== void 0 ? /* @__PURE__ */ jsx(
     "span",
     {
@@ -86,7 +89,7 @@ function AlertBanner({
     }
   ) : /* @__PURE__ */ jsx(Glyph, { "aria-hidden": true, className: cn(sm ? "size-3.5" : "size-4", "shrink-0", nudge, TONE_ICON[tone]) });
   const row = cn(
-    inline ? "inline-flex items-center" : strip ? "flex flex-wrap items-center gap-y-1" : "flex items-start",
+    inlineRow ? "inline-flex items-center" : strip ? "flex flex-wrap items-center gap-y-1" : "flex items-start",
     sm ? "gap-1.5 text-xs" : inline ? "gap-1.5 text-sm" : "gap-2 text-sm"
   );
   const frame = inline ? "" : cn(
@@ -96,7 +99,7 @@ function AlertBanner({
   const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]";
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     glyph,
-    /* @__PURE__ */ jsx("span", { className: cn(!inline && "flex-1", "min-w-0 text-start"), children }),
+    /* @__PURE__ */ jsx("span", { className: cn(!inlineRow && "flex-1", "min-w-0 text-start"), children }),
     interactive && /* @__PURE__ */ jsx(
       ChevronRight,
       {
@@ -124,7 +127,7 @@ function AlertBanner({
       children: /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-4" })
     }
   ) : null;
-  const trailing = action !== void 0 && action !== null ? /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex shrink-0 items-center gap-2", !strip && !inline && "self-center", strip && "ms-auto"), children: action }) : null;
+  const trailing = action !== void 0 && action !== null ? /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex shrink-0 items-center gap-2", !strip && !inlineRow && "self-center", strip && "ms-auto"), children: action }) : null;
   if (!interactive) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -145,11 +148,11 @@ function AlertBanner({
   const actionClass = split ? cn(
     "flex min-w-0 flex-1 text-start",
     sm ? "gap-1.5" : "gap-2",
-    inline || strip ? "items-center" : "items-start",
+    inlineRow || strip ? "items-center" : "items-start",
     "outline-none after:absolute after:inset-0 after:content-['']",
     strip ? "after:rounded-none" : "after:rounded-md",
     "focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]"
-  ) : cn(row, !inline && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
+  ) : cn(row, !inlineRow && "w-full", frame, TONE_TEXT[tone], hover, focusRing, className);
   const actionRest = split ? {} : rest;
   const rowAction = href !== void 0 ? /* @__PURE__ */ jsx(
     "a",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]\",\n  warning: \"border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]\",\n  info: \"border-2 border-[var(--info-border)] bg-[var(--info-bg)]\",\n  success: \"border-2 border-[var(--success-border)] bg-[var(--success-bg)]\",\n  neutral: \"border border-[var(--border)]\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-[var(--bg-surface)] shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[9px] py-[5px]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(\n    TONE_FRAME[tone],\n    \"rounded-none border-0 border-b\",\n    size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\",\n  );\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-secondary)]\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-muted)]\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  const resolvedRole = role ?? (inline ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inline || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  const row = cn(\n    inline ? \"inline-flex items-center\" : strip ? \"flex flex-wrap items-center gap-y-1\" : \"flex items-start\",\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\n\n  const content = (\n    <>\n      {glyph}\n      <span className={cn(!inline && \"flex-1\", \"min-w-0 text-start\")}>{children}</span>\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div className={cn(\"relative z-10 flex shrink-0 items-center gap-2\", !strip && !inline && \"self-center\", strip && \"ms-auto\")}>\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {content}\n        {trailing}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 flex-1 text-start\",\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inline || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]\",\n      )\n    : cn(row, !inline && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      {...rest}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {rowAction}\n      {trailing}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, MouseEvent, ReactNode } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-[var(--danger-border)] bg-[var(--danger-bg)]\",\n  warning: \"border-2 border-[var(--warning-border)] bg-[var(--warning-bg)]\",\n  info: \"border-2 border-[var(--info-border)] bg-[var(--info-bg)]\",\n  success: \"border-2 border-[var(--success-border)] bg-[var(--success-bg)]\",\n  neutral: \"border border-[var(--border)]\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-[var(--bg-surface)] shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[9px] py-[5px]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[11px]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(\n    TONE_FRAME[tone],\n    \"rounded-none border-0 border-b\",\n    size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\",\n  );\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-secondary)]\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-[var(--danger)]\",\n  warning: \"text-[var(--warning)]\",\n  info: \"text-[var(--info)]\",\n  success: \"text-[var(--success)]\",\n  neutral: \"text-[var(--text-muted)]\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  children: ReactNode;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  const row = cn(\n    inlineRow ? \"inline-flex items-center\" : strip ? \"flex flex-wrap items-center gap-y-1\" : \"flex items-start\",\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand)] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--bg-surface)]\";\n\n  const content = (\n    <>\n      {glyph}\n      <span className={cn(!inlineRow && \"flex-1\", \"min-w-0 text-start\")}>{children}</span>\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div className={cn(\"relative z-10 flex shrink-0 items-center gap-2\", !strip && !inlineRow && \"self-center\", strip && \"ms-auto\")}>\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {content}\n        {trailing}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 flex-1 text-start\",\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-2 focus-visible:after:ring-[var(--brand)]\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      {...rest}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {rowAction}\n      {trailing}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -2,16 +2,17 @@ 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';
 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';
 import '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -20,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';
@@ -30,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;
@@ -55,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