@eifi1/ui-kit 0.48.2 → 0.50.0

package/dist/auth/verify-email.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/auth/verify-email.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { CheckCircle2, MailWarning, TimerOff, XCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { AlertBanner } from \"../components/alert-banner\";\nimport { LoadingState } from \"../components/loading-state\";\nimport { Button } from \"../components/button\";\nimport { EmptyState } from \"../components/empty-state\";\nimport { OUTCOME_CLASS, STATUS_HEADING_CLASS, isThenable, useOncePerKey } from \"./status-parts\";\nimport { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from \"./auth-errors\";\nimport type { AuthHeadingLevel } from \"./status-parts\";\nimport { DEFAULT_VERIFY_EMAIL_LABELS } from \"./verify-email-labels\";\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the verification page and banner render — the `verifyEmail` namespace.\n *  keksdose's words (`verify_email.*`, and its server's \"has expired\"). */\nexport interface VerifyEmailLabels {\n  /** The page's heading. */\n  title: string;\n  /** While the link is redeemed. */\n  verifying: string;\n  verified: string;\n  /** The way on from the page — into the app, or to sign-in. */\n  continue: string;\n  invalid: string;\n  expired: string;\n  /** The page was opened without a `token`. */\n  noToken: string;\n  /** Under `invalid`: why a link stops working. */\n  invalidHint: string;\n  /** Under a dead link, signed out: where a new one comes from. */\n  requestInApp: string;\n  /** Under a dead link, signed in, beside \"Send again\". */\n  requestHere: string;\n  /** The resend button, on the page and in the banner. */\n  resend: string;\n  /** The resend button while a just-sent mail cools down, given the seconds left. */\n  resendIn: (seconds: number) => string;\n  /** Said (and shown) after a resend went out. */\n  resent: string;\n  /** Said (and shown) after a resend failed. */\n  resendError: string;\n  /** 0.31.1: a resend refused as throttled — HTTP 429 (`isRateLimited`) — given the\n   *  `Retry-After` seconds, when the app's `describeError` has no words of its own\n   *  (keksdose borrowed the sign-in namespace's). */\n  rateLimited?: (seconds?: number) => string;\n  /** The banner's message. */\n  banner: string;\n  /** The banner's ×: it defers, it does not close anything. */\n  dismiss: string;\n}\n\n// Defined in ./verify-email-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_VERIFY_EMAIL_LABELS };\n\n/** A minute: long enough that an impatient second click does not mail twice, short\n *  enough that a mail lost to a spam filter can be re-sent without leaving the page. The\n *  server's own limit is the real one (kastlan: 3 an hour per address). */\nconst DEFAULT_COOLDOWN = 60;\n\n/* ── Resend ──────────────────────────────────────────────────────────────── */\n\ntype ResendPhase = \"idle\" | \"sending\" | \"sent\" | \"failed\";\n\n/**\n * \"Send again\" with its own memory: busy while the request runs, then — after a mail\n * went out — held for `cooldown` seconds with the countdown on the button, so a second\n * click cannot mail twice and a throttled server is not asked to refuse. A failure frees\n * it at once. The outcome is a polite live region that is always rendered (a region that\n * mounts with its message is often not read), and visible.\n */\nfunction useResend(onResend: (() => Promise<unknown> | void) | undefined, cooldown: number) {\n  const [phase, setPhase] = useState<ResendPhase>(\"idle\");\n  // The refusal itself, for `describeError` (0.30.0): the server's own sentence — keksdose's\n  // per-address throttle, \"try again in N minutes\" — beats a fixed \"could not send\".\n  const [error, setError] = useState<unknown>(undefined);\n  const [remaining, setRemaining] = useState(0);\n  const counting = remaining > 0;\n  useEffect(() => {\n    if (!counting) return;\n    const id = setInterval(() => setRemaining((r) => Math.max(0, r - 1)), 1000);\n    return () => clearInterval(id);\n  }, [counting]);\n\n  const sent = () => {\n    setPhase(\"sent\");\n    setRemaining(Math.max(0, Math.round(cooldown)));\n  };\n  const send = () => {\n    if (!onResend || phase === \"sending\" || counting) return;\n    let result: unknown;\n    try {\n      result = onResend();\n    } catch (e) {\n      setError(e);\n      setPhase(\"failed\");\n      return;\n    }\n    if (!isThenable(result)) {\n      sent();\n      return;\n    }\n    setPhase(\"sending\");\n    result.then(sent, (e: unknown) => {\n      setError(e);\n      setPhase(\"failed\");\n    });\n  };\n  return { phase, remaining, send, error };\n}\n\nfunction ResendButton({\n  state,\n  labels,\n  variant,\n}: {\n  state: ReturnType<typeof useResend>;\n  labels: VerifyEmailLabels;\n  variant: \"secondary\" | \"brand\";\n}) {\n  return (\n    <Button\n      type=\"button\"\n      variant={variant}\n      size={variant === \"secondary\" ? \"sm\" : undefined}\n      onClick={state.send}\n      pending={state.phase === \"sending\"}\n      // `disabledReason`, not `disabled`: the button just pressed has the focus, and a\n      // native `disabled` would drop it to <body>. The reason is what just happened.\n      disabledReason={state.remaining > 0 ? labels.resent : undefined}\n    >\n      {state.remaining > 0 ? labels.resendIn(state.remaining) : labels.resend}\n    </Button>\n  );\n}\n\nfunction ResendStatus({\n  phase,\n  error,\n  describeError,\n  labels,\n  className,\n}: {\n  phase: ResendPhase;\n  error?: unknown;\n  describeError?: (error: unknown) => string | undefined;\n  labels: VerifyEmailLabels;\n  className?: string;\n}) {\n  // The app's words first, then the throttle's, then the kit's catch-all.\n  const failed =\n    phase === \"failed\"\n      ? (describeError?.(error) ??\n        (isRateLimited(error)\n          ? (labels.rateLimited ?? englishRateLimited)(retryAfterSeconds(error))\n          : labels.resendError))\n      : \"\";\n  return (\n    <span\n      role=\"status\"\n      className={cn(phase === \"failed\" ? \"text-danger\" : \"text-success\", className)}\n    >\n      {phase === \"sent\" ? labels.resent : failed}\n    </span>\n  );\n}\n\n/* ── The page ────────────────────────────────────────────────────────────── */\n\n/** What became of a confirmation link that did not verify. */\nexport type VerifyEmailFailure = \"invalid\" | \"expired\";\n\n/** The default when the app gives no `classifyError`: the coded refusal decides. */\nfunction defaultVerifyFailure(error: unknown): VerifyEmailFailure {\n  return authErrorCode(error) === \"token_expired\" ? \"expired\" : \"invalid\";\n}\n\nexport interface VerifyEmailStatusProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"title\"> {\n  /** The link's token — the app's `?token=`. Empty: the link was cut short, and the\n   *  page says so without asking anyone. */\n  token: string;\n  /**\n   * Redeem it — `POST /auth/verify-email {token}`, once per token, on mount. A POST and\n   * not the link's own GET (§10.10): a mail scanner that opens every link must not\n   * confirm an address nobody read. Resolve when it verified (an address that already\n   * was counts: keksdose's redeem is idempotent); reject with the client's error.\n   */\n  onVerify: (token: string) => Promise<unknown>;\n  /** Which dead end a rejection is. Default: `invalid` for everything — §5.2's servers\n   *  answer one `token_invalid`; an app whose server tells expiry apart maps it here. */\n  classifyError?: (error: unknown) => VerifyEmailFailure;\n  /** 0.30.0: the words for a refused resend — the server's own sentence (a throttle's\n   *  \"try again in N minutes\"), else the kit's `resendError`. */\n  describeError?: (error: unknown) => string | undefined;\n  /** Someone is signed in on this device: \"Continue\" goes into the app, and a dead link\n   *  offers \"Send again\" (with `onResend`). */\n  signedIn?: boolean;\n  /** Send a new confirmation mail (`POST /auth/verify-email/resend`) — offered on a dead\n   *  link while signed in. */\n  onResend?: () => Promise<unknown> | void;\n  /** Seconds \"Send again\" waits after a mail went out. Default 60; `0` never waits. */\n  cooldown?: number;\n  /** Where \"Continue\" goes. Default `/` signed in, `/login` signed out. */\n  continueHref?: string;\n  /** App content under \"confirmed\" — keksdose's \"Others can now share a budget with you\n   *  directly.\" */\n  verifiedContent?: ReactNode;\n  /** The heading. Default `labels.title`; `null` draws none, for a page that puts it in\n   *  `AuthLayout`'s `title` instead. */\n  title?: ReactNode;\n  /** The heading's level. Default `h2`, under the page's `h1`. */\n  headingAs?: AuthHeadingLevel;\n  labels?: LabelOverride<VerifyEmailLabels>;\n}\n\ntype VerifyOutcome = \"verified\" | VerifyEmailFailure;\n\n/**\n * Redeem an email-confirmation link (`/verify-email?token=…`, docs/auth-harmonization.md\n * §7) — keksdose's `VerifyEmailPage` (features/auth/verify-email-page.tsx), with\n * kastlan's outcome blocks and its separate \"expired\".\n *\n * Opened from an inbox, often in a browser with no session, so the token is the only\n * credential and the page renders signed-out. It redeems once per token on mount\n * (StrictMode's double effect included — the token is single-use) and shows one of:\n * confirmed; not valid; expired; or the link had no token at all. Verification gates\n * nothing (§2.8), so every outcome ends on \"Continue\". Signed in, a dead link also\n * offers \"Send again\", which waits `cooldown` seconds after a mail went out.\n *\n * The outcome replaces the spinner, which says nothing to a screen reader on its own,\n * so it is also announced.\n */\nexport function VerifyEmailStatus({\n  token,\n  onVerify,\n  classifyError,\n  describeError,\n  signedIn = false,\n  onResend,\n  cooldown = DEFAULT_COOLDOWN,\n  continueHref,\n  verifiedContent,\n  title,\n  headingAs: Heading = \"h2\",\n  labels: labelsProp,\n  className,\n  ...rest\n}: VerifyEmailStatusProps) {\n  const labels = useKitLabels(\"verifyEmail\", DEFAULT_VERIFY_EMAIL_LABELS, labelsProp);\n  const [settled, setSettled] = useState<{ token: string; outcome: VerifyOutcome } | null>(null);\n  const outcome: VerifyOutcome | \"verifying\" =\n    token === \"\" ? \"invalid\" : settled?.token === token ? settled.outcome : \"verifying\";\n  const { announce, regionProps } = useAnnounce();\n  const resend = useResend(onResend, cooldown);\n\n  useOncePerKey(token === \"\" ? null : token, onVerify, (key, result) => {\n    // Without a classifier, the coded refusal decides (0.30.0): `token_expired` is\n    // \"expired\", anything else \"invalid\".\n    const next: VerifyOutcome = result.ok\n      ? \"verified\"\n      : (classifyError ?? defaultVerifyFailure)(result.error);\n    setSettled({ token: key, outcome: next });\n    announce(labels[next]);\n  });\n\n  const href = continueHref ?? (signedIn ? \"/\" : \"/login\");\n  // `replace`: the token is spent, so Back must not land on this page again (keksdose F1).\n  const continueButton = (\n    <Button href={href} replace variant={outcome === \"verified\" ? \"brand\" : \"secondary\"}>\n      {labels.continue}\n    </Button>\n  );\n  const canResend = signedIn && onResend !== undefined;\n\n  let body: ReactNode;\n  if (outcome === \"verifying\") {\n    body = <LoadingState size=\"sm\" label={labels.verifying} />;\n  } else if (outcome === \"verified\") {\n    body = (\n      <EmptyState\n        tone=\"success\"\n        icon={<CheckCircle2 />}\n        title={labels.verified}\n        hint={verifiedContent}\n        action={continueButton}\n        className={OUTCOME_CLASS}\n      />\n    );\n  } else {\n    const hint = (\n      <>\n        {outcome === \"invalid\" && token !== \"\" ? `${labels.invalidHint} ` : \"\"}\n        {canResend ? labels.requestHere : labels.requestInApp}\n      </>\n    );\n    body = (\n      <EmptyState\n        tone=\"danger\"\n        icon={outcome === \"expired\" ? <TimerOff /> : <XCircle />}\n        title={token === \"\" ? labels.noToken : labels[outcome]}\n        hint={hint}\n        action={\n          <>\n            {canResend && <ResendButton state={resend} labels={labels} variant=\"brand\" />}\n            {continueButton}\n          </>\n        }\n        className={OUTCOME_CLASS}\n      />\n    );\n  }\n\n  return (\n    <div\n      {...rest}\n      data-state={outcome}\n      aria-busy={outcome === \"verifying\" || undefined}\n      className={cn(\"space-y-3\", className)}\n    >\n      {title === null ? null : <Heading className={STATUS_HEADING_CLASS}>{title ?? labels.title}</Heading>}\n      {body}\n      {canResend && (\n        <ResendStatus\n          phase={resend.phase}\n          error={resend.error}\n          describeError={describeError}\n          labels={labels}\n          className=\"block text-center text-xs\"\n        />\n      )}\n      {/* Rendered from the start, so the outcome is read when it arrives. */}\n      <div {...regionProps} />\n    </div>\n  );\n}\n\n/* ── The banner ──────────────────────────────────────────────────────────── */\n\nexport interface EmailVerificationBannerProps {\n  /** Send a new confirmation mail (`POST /auth/verify-email/resend`). Resolve when it\n   *  went out; reject and the banner says it could not. */\n  onResend: () => Promise<unknown> | void;\n  /** 0.30.0: the words for a refused resend — the server's own sentence, else the kit's. */\n  describeError?: (error: unknown) => string | undefined;\n  /** Seconds \"Send again\" waits after a mail went out. Default 60; `0` never waits. */\n  cooldown?: number;\n  /** The ×, \"Not now\". The banner does not hide itself: the app stops rendering it —\n   *  keksdose for the rest of the session. Left out, no ×. */\n  onDismiss?: () => void;\n  /** `strip` (default): keksdose's band across the top of the shell. `box`: kastlan's\n   *  callout inside the page. */\n  variant?: \"strip\" | \"box\";\n  /** The app's sentence after the kit's — keksdose's \"Until you do, nobody can share a\n   *  budget with you directly.\" */\n  children?: ReactNode;\n  className?: string;\n  labels?: LabelOverride<VerifyEmailLabels>;\n  /**\n   * 0.48: on a phone hold the message to one line with a More / Less toggle —\n   * {@link AlertBanner}'s `clampMobile`, passed through (kastlan S2: its banner took ~110px\n   * of a 390px phone). The resend's outcome (\"Sent\", the error) then moves out of the\n   * message to sit after \"Send again\", at every width, so the line that answers the press\n   * is never hidden behind \"More\". Default `false`: the outcome stays in the message.\n   */\n  clampMobile?: boolean;\n}\n\n/**\n * The nudge for a signed-in account whose address is not confirmed — keksdose's\n * `VerifyEmailBanner` (features/auth/verify-email-banner.tsx), kastlan's copy of it.\n *\n * A prompt, not a wall: verification gates nothing (§2.8). The app renders it while\n * `/auth/me` says `email_verified: false`, and stops when the user dismisses it or the\n * page above confirms the address. \"Send again\" waits `cooldown` seconds after a mail\n * went out (the button says how long), and its outcome is written into the banner and\n * read out — no toast needed.\n */\nexport function EmailVerificationBanner({\n  onResend,\n  describeError,\n  cooldown = DEFAULT_COOLDOWN,\n  onDismiss,\n  variant = \"strip\",\n  children,\n  className,\n  labels: labelsProp,\n  clampMobile = false,\n}: EmailVerificationBannerProps) {\n  const labels = useKitLabels(\"verifyEmail\", DEFAULT_VERIFY_EMAIL_LABELS, labelsProp);\n  const resend = useResend(onResend, cooldown);\n  // One live region either way, mounted from the start (a region added later is often not\n  // read out): in the message, or — clamped — after the button, outside the clamp.\n  const status = (\n    <ResendStatus\n      phase={resend.phase}\n      error={resend.error}\n      describeError={describeError}\n      labels={labels}\n      className=\"font-medium\"\n    />\n  );\n  const button = <ResendButton state={resend} labels={labels} variant=\"secondary\" />;\n  return (\n    <AlertBanner\n      tone=\"warning\"\n      variant={variant}\n      icon={<MailWarning />}\n      action={\n        clampMobile ? (\n          <>\n            {button}\n            {status}\n          </>\n        ) : (\n          button\n        )\n      }\n      onDismiss={onDismiss}\n      dismissLabel={onDismiss ? labels.dismiss : undefined}\n      clampMobile={clampMobile}\n      className={className}\n    >\n      {labels.banner}\n      {children != null && children !== false && <> {children}</>}\n      {!clampMobile && <> {status}</>}\n    </AlertBanner>\n  );\n}\n"],"mappings":";AA4HI,SAyKE,UAzKF,KAyKE,YAzKF;AA5HJ,SAAS,WAAW,gBAAgB;AAEpC,SAAS,cAAc,aAAa,UAAU,eAAe;AAC7D,SAAS,UAAU;AACnB,SAAS,oBAAwC;AACjD,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,eAAe,sBAAsB,YAAY,qBAAqB;AAC/E,SAAS,eAAe,oBAAoB,eAAe,yBAAyB;AAEpF,SAAS,mCAAmC;AAgD5C,MAAM,mBAAmB;AAazB,SAAS,UAAU,UAAuD,UAAkB;AAC1F,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAsB,MAAM;AAGtD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAkB,MAAS;AACrD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,CAAC;AAC5C,QAAM,WAAW,YAAY;AAC7B,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,UAAM,KAAK,YAAY,MAAM,aAAa,CAAC,MAAM,KAAK,IAAI,GAAG,IAAI,CAAC,CAAC,GAAG,GAAI;AAC1E,WAAO,MAAM,cAAc,EAAE;AAAA,EAC/B,GAAG,CAAC,QAAQ,CAAC;AAEb,QAAM,OAAO,MAAM;AACjB,aAAS,MAAM;AACf,iBAAa,KAAK,IAAI,GAAG,KAAK,MAAM,QAAQ,CAAC,CAAC;AAAA,EAChD;AACA,QAAM,OAAO,MAAM;AACjB,QAAI,CAAC,YAAY,UAAU,aAAa,SAAU;AAClD,QAAI;AACJ,QAAI;AACF,eAAS,SAAS;AAAA,IACpB,SAAS,GAAG;AACV,eAAS,CAAC;AACV,eAAS,QAAQ;AACjB;AAAA,IACF;AACA,QAAI,CAAC,WAAW,MAAM,GAAG;AACvB,WAAK;AACL;AAAA,IACF;AACA,aAAS,SAAS;AAClB,WAAO,KAAK,MAAM,CAAC,MAAe;AAChC,eAAS,CAAC;AACV,eAAS,QAAQ;AAAA,IACnB,CAAC;AAAA,EACH;AACA,SAAO,EAAE,OAAO,WAAW,MAAM,MAAM;AACzC;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,MAAM,YAAY,cAAc,OAAO;AAAA,MACvC,SAAS,MAAM;AAAA,MACf,SAAS,MAAM,UAAU;AAAA,MAGzB,gBAAgB,MAAM,YAAY,IAAI,OAAO,SAAS;AAAA,MAErD,gBAAM,YAAY,IAAI,OAAO,SAAS,MAAM,SAAS,IAAI,OAAO;AAAA;AAAA,EACnE;AAEJ;AAEA,SAAS,aAAa;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AAED,QAAM,SACJ,UAAU,WACL,gBAAgB,KAAK,MACrB,cAAc,KAAK,KACf,OAAO,eAAe,oBAAoB,kBAAkB,KAAK,CAAC,IACnE,OAAO,eACX;AACN,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAW,GAAG,UAAU,WAAW,gBAAgB,gBAAgB,SAAS;AAAA,MAE3E,oBAAU,SAAS,OAAO,SAAS;AAAA;AAAA,EACtC;AAEJ;AAQA,SAAS,qBAAqB,OAAoC;AAChE,SAAO,cAAc,KAAK,MAAM,kBAAkB,YAAY;AAChE;AAyDO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,UAAU;AAAA,EACrB,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,SAAS,aAAa,eAAe,6BAA6B,UAAU;AAClF,QAAM,CAAC,SAAS,UAAU,IAAI,SAA2D,IAAI;AAC7F,QAAM,UACJ,UAAU,KAAK,YAAY,SAAS,UAAU,QAAQ,QAAQ,UAAU;AAC1E,QAAM,EAAE,UAAU,YAAY,IAAI,YAAY;AAC9C,QAAM,SAAS,UAAU,UAAU,QAAQ;AAE3C,gBAAc,UAAU,KAAK,OAAO,OAAO,UAAU,CAAC,KAAK,WAAW;AAGpE,UAAM,OAAsB,OAAO,KAC/B,cACC,iBAAiB,sBAAsB,OAAO,KAAK;AACxD,eAAW,EAAE,OAAO,KAAK,SAAS,KAAK,CAAC;AACxC,aAAS,OAAO,IAAI,CAAC;AAAA,EACvB,CAAC;AAED,QAAM,OAAO,iBAAiB,WAAW,MAAM;AAE/C,QAAM,iBACJ,oBAAC,UAAO,MAAY,SAAO,MAAC,SAAS,YAAY,aAAa,UAAU,aACrE,iBAAO,UACV;AAEF,QAAM,YAAY,YAAY,aAAa;AAE3C,MAAI;AACJ,MAAI,YAAY,aAAa;AAC3B,WAAO,oBAAC,gBAAa,MAAK,MAAK,OAAO,OAAO,WAAW;AAAA,EAC1D,WAAW,YAAY,YAAY;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAM,oBAAC,gBAAa;AAAA,QACpB,OAAO,OAAO;AAAA,QACd,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,WAAW;AAAA;AAAA,IACb;AAAA,EAEJ,OAAO;AACL,UAAM,OACJ,iCACG;AAAA,kBAAY,aAAa,UAAU,KAAK,GAAG,OAAO,WAAW,MAAM;AAAA,MACnE,YAAY,OAAO,cAAc,OAAO;AAAA,OAC3C;AAEF,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAM,YAAY,YAAY,oBAAC,YAAS,IAAK,oBAAC,WAAQ;AAAA,QACtD,OAAO,UAAU,KAAK,OAAO,UAAU,OAAO,OAAO;AAAA,QACrD;AAAA,QACA,QACE,iCACG;AAAA,uBAAa,oBAAC,gBAAa,OAAO,QAAQ,QAAgB,SAAQ,SAAQ;AAAA,UAC1E;AAAA,WACH;AAAA,QAEF,WAAW;AAAA;AAAA,IACb;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,aAAW,YAAY,eAAe;AAAA,MACtC,WAAW,GAAG,aAAa,SAAS;AAAA,MAEnC;AAAA,kBAAU,OAAO,OAAO,oBAAC,WAAQ,WAAW,sBAAuB,mBAAS,OAAO,OAAM;AAAA,QACzF;AAAA,QACA,aACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO,OAAO;AAAA,YACd,OAAO,OAAO;AAAA,YACd;AAAA,YACA;AAAA,YACA,WAAU;AAAA;AAAA,QACZ;AAAA,QAGF,oBAAC,SAAK,GAAG,aAAa;AAAA;AAAA;AAAA,EACxB;AAEJ;AA2CO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAChB,GAAiC;AAC/B,QAAM,SAAS,aAAa,eAAe,6BAA6B,UAAU;AAClF,QAAM,SAAS,UAAU,UAAU,QAAQ;AAG3C,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,OAAO;AAAA,MACd,OAAO,OAAO;AAAA,MACd;AAAA,MACA;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEF,QAAM,SAAS,oBAAC,gBAAa,OAAO,QAAQ,QAAgB,SAAQ,aAAY;AAChF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,MAAM,oBAAC,eAAY;AAAA,MACnB,QACE,cACE,iCACG;AAAA;AAAA,QACA;AAAA,SACH,IAEA;AAAA,MAGJ;AAAA,MACA,cAAc,YAAY,OAAO,UAAU;AAAA,MAC3C;AAAA,MACA;AAAA,MAEC;AAAA,eAAO;AAAA,QACP,YAAY,QAAQ,aAAa,SAAS,iCAAE;AAAA;AAAA,UAAE;AAAA,WAAS;AAAA,QACvD,CAAC,eAAe,iCAAE;AAAA;AAAA,UAAE;AAAA,WAAO;AAAA;AAAA;AAAA,EAC9B;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/auth/verify-email.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { CheckCircle2, MailWarning, TimerOff, XCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { AlertBanner } from \"../components/alert-banner\";\nimport { LoadingState } from \"../components/loading-state\";\nimport { Button } from \"../components/button\";\nimport { EmptyState } from \"../components/empty-state\";\nimport { OUTCOME_CLASS, STATUS_HEADING_CLASS, isThenable, useOncePerKey } from \"./status-parts\";\nimport { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from \"./auth-errors\";\nimport type { AuthHeadingLevel } from \"./status-parts\";\nimport { DEFAULT_VERIFY_EMAIL_LABELS } from \"./verify-email-labels\";\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the verification page and banner render — the `verifyEmail` namespace.\n *  keksdose's words (`verify_email.*`, and its server's \"has expired\"). */\nexport interface VerifyEmailLabels {\n  /** The page's heading. */\n  title: string;\n  /** While the link is redeemed. */\n  verifying: string;\n  verified: string;\n  /** The way on from the page — into the app, or to sign-in. */\n  continue: string;\n  invalid: string;\n  expired: string;\n  /** The page was opened without a `token`. */\n  noToken: string;\n  /** Under `invalid`: why a link stops working. */\n  invalidHint: string;\n  /** Under a dead link, signed out: where a new one comes from. */\n  requestInApp: string;\n  /** Under a dead link, signed in, beside \"Send again\". */\n  requestHere: string;\n  /** The resend button, on the page and in the banner. */\n  resend: string;\n  /** The resend button while a just-sent mail cools down, given the seconds left. */\n  resendIn: (seconds: number) => string;\n  /** Said (and shown) after a resend went out. */\n  resent: string;\n  /** Said (and shown) after a resend failed. */\n  resendError: string;\n  /** 0.31.1: a resend refused as throttled — HTTP 429 (`isRateLimited`) — given the\n   *  `Retry-After` seconds, when the app's `describeError` has no words of its own\n   *  (keksdose borrowed the sign-in namespace's). */\n  rateLimited?: (seconds?: number) => string;\n  /** The banner's message. */\n  banner: string;\n  /** The banner's ×: it defers, it does not close anything. */\n  dismiss: string;\n}\n\n// Defined in ./verify-email-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_VERIFY_EMAIL_LABELS };\n\n/** A minute: long enough that an impatient second click does not mail twice, short\n *  enough that a mail lost to a spam filter can be re-sent without leaving the page. The\n *  server's own limit is the real one (kastlan: 3 an hour per address). */\nconst DEFAULT_COOLDOWN = 60;\n\n/* ── Resend ──────────────────────────────────────────────────────────────── */\n\ntype ResendPhase = \"idle\" | \"sending\" | \"sent\" | \"failed\";\n\n/**\n * \"Send again\" with its own memory: busy while the request runs, then — after a mail\n * went out — held for `cooldown` seconds with the countdown on the button, so a second\n * click cannot mail twice and a throttled server is not asked to refuse. A failure frees\n * it at once. The outcome is a polite live region that is always rendered (a region that\n * mounts with its message is often not read), and visible.\n */\nfunction useResend(onResend: (() => Promise<unknown> | void) | undefined, cooldown: number) {\n  const [phase, setPhase] = useState<ResendPhase>(\"idle\");\n  // The refusal itself, for `describeError` (0.30.0): the server's own sentence — keksdose's\n  // per-address throttle, \"try again in N minutes\" — beats a fixed \"could not send\".\n  const [error, setError] = useState<unknown>(undefined);\n  const [remaining, setRemaining] = useState(0);\n  const counting = remaining > 0;\n  useEffect(() => {\n    if (!counting) return;\n    const id = setInterval(() => setRemaining((r) => Math.max(0, r - 1)), 1000);\n    return () => clearInterval(id);\n  }, [counting]);\n\n  const sent = () => {\n    setPhase(\"sent\");\n    setRemaining(Math.max(0, Math.round(cooldown)));\n  };\n  const send = () => {\n    if (!onResend || phase === \"sending\" || counting) return;\n    let result: unknown;\n    try {\n      result = onResend();\n    } catch (e) {\n      setError(e);\n      setPhase(\"failed\");\n      return;\n    }\n    if (!isThenable(result)) {\n      sent();\n      return;\n    }\n    setPhase(\"sending\");\n    result.then(sent, (e: unknown) => {\n      setError(e);\n      setPhase(\"failed\");\n    });\n  };\n  return { phase, remaining, send, error };\n}\n\nfunction ResendButton({\n  state,\n  labels,\n  variant,\n}: {\n  state: ReturnType<typeof useResend>;\n  labels: VerifyEmailLabels;\n  variant: \"secondary\" | \"accent\";\n}) {\n  return (\n    <Button\n      type=\"button\"\n      variant={variant}\n      size={variant === \"secondary\" ? \"sm\" : undefined}\n      onClick={state.send}\n      pending={state.phase === \"sending\"}\n      // `disabledReason`, not `disabled`: the button just pressed has the focus, and a\n      // native `disabled` would drop it to <body>. The reason is what just happened.\n      disabledReason={state.remaining > 0 ? labels.resent : undefined}\n    >\n      {state.remaining > 0 ? labels.resendIn(state.remaining) : labels.resend}\n    </Button>\n  );\n}\n\nfunction ResendStatus({\n  phase,\n  error,\n  describeError,\n  labels,\n  className,\n}: {\n  phase: ResendPhase;\n  error?: unknown;\n  describeError?: (error: unknown) => string | undefined;\n  labels: VerifyEmailLabels;\n  className?: string;\n}) {\n  // The app's words first, then the throttle's, then the kit's catch-all.\n  const failed =\n    phase === \"failed\"\n      ? (describeError?.(error) ??\n        (isRateLimited(error)\n          ? (labels.rateLimited ?? englishRateLimited)(retryAfterSeconds(error))\n          : labels.resendError))\n      : \"\";\n  return (\n    <span\n      role=\"status\"\n      className={cn(phase === \"failed\" ? \"text-danger\" : \"text-success\", className)}\n    >\n      {phase === \"sent\" ? labels.resent : failed}\n    </span>\n  );\n}\n\n/* ── The page ────────────────────────────────────────────────────────────── */\n\n/** What became of a confirmation link that did not verify. */\nexport type VerifyEmailFailure = \"invalid\" | \"expired\";\n\n/** The default when the app gives no `classifyError`: the coded refusal decides. */\nfunction defaultVerifyFailure(error: unknown): VerifyEmailFailure {\n  return authErrorCode(error) === \"token_expired\" ? \"expired\" : \"invalid\";\n}\n\nexport interface VerifyEmailStatusProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"title\"> {\n  /** The link's token — the app's `?token=`. Empty: the link was cut short, and the\n   *  page says so without asking anyone. */\n  token: string;\n  /**\n   * Redeem it — `POST /auth/verify-email {token}`, once per token, on mount. A POST and\n   * not the link's own GET (§10.10): a mail scanner that opens every link must not\n   * confirm an address nobody read. Resolve when it verified (an address that already\n   * was counts: keksdose's redeem is idempotent); reject with the client's error.\n   */\n  onVerify: (token: string) => Promise<unknown>;\n  /** Which dead end a rejection is. Default: `invalid` for everything — §5.2's servers\n   *  answer one `token_invalid`; an app whose server tells expiry apart maps it here. */\n  classifyError?: (error: unknown) => VerifyEmailFailure;\n  /** 0.30.0: the words for a refused resend — the server's own sentence (a throttle's\n   *  \"try again in N minutes\"), else the kit's `resendError`. */\n  describeError?: (error: unknown) => string | undefined;\n  /** Someone is signed in on this device: \"Continue\" goes into the app, and a dead link\n   *  offers \"Send again\" (with `onResend`). */\n  signedIn?: boolean;\n  /** Send a new confirmation mail (`POST /auth/verify-email/resend`) — offered on a dead\n   *  link while signed in. */\n  onResend?: () => Promise<unknown> | void;\n  /** Seconds \"Send again\" waits after a mail went out. Default 60; `0` never waits. */\n  cooldown?: number;\n  /** Where \"Continue\" goes. Default `/` signed in, `/login` signed out. */\n  continueHref?: string;\n  /** App content under \"confirmed\" — keksdose's \"Others can now share a budget with you\n   *  directly.\" */\n  verifiedContent?: ReactNode;\n  /** The heading. Default `labels.title`; `null` draws none, for a page that puts it in\n   *  `AuthLayout`'s `title` instead. */\n  title?: ReactNode;\n  /** The heading's level. Default `h2`, under the page's `h1`. */\n  headingAs?: AuthHeadingLevel;\n  labels?: LabelOverride<VerifyEmailLabels>;\n}\n\ntype VerifyOutcome = \"verified\" | VerifyEmailFailure;\n\n/**\n * Redeem an email-confirmation link (`/verify-email?token=…`, docs/auth-harmonization.md\n * §7) — keksdose's `VerifyEmailPage` (features/auth/verify-email-page.tsx), with\n * kastlan's outcome blocks and its separate \"expired\".\n *\n * Opened from an inbox, often in a browser with no session, so the token is the only\n * credential and the page renders signed-out. It redeems once per token on mount\n * (StrictMode's double effect included — the token is single-use) and shows one of:\n * confirmed; not valid; expired; or the link had no token at all. Verification gates\n * nothing (§2.8), so every outcome ends on \"Continue\". Signed in, a dead link also\n * offers \"Send again\", which waits `cooldown` seconds after a mail went out.\n *\n * The outcome replaces the spinner, which says nothing to a screen reader on its own,\n * so it is also announced.\n */\nexport function VerifyEmailStatus({\n  token,\n  onVerify,\n  classifyError,\n  describeError,\n  signedIn = false,\n  onResend,\n  cooldown = DEFAULT_COOLDOWN,\n  continueHref,\n  verifiedContent,\n  title,\n  headingAs: Heading = \"h2\",\n  labels: labelsProp,\n  className,\n  ...rest\n}: VerifyEmailStatusProps) {\n  const labels = useKitLabels(\"verifyEmail\", DEFAULT_VERIFY_EMAIL_LABELS, labelsProp);\n  const [settled, setSettled] = useState<{ token: string; outcome: VerifyOutcome } | null>(null);\n  const outcome: VerifyOutcome | \"verifying\" =\n    token === \"\" ? \"invalid\" : settled?.token === token ? settled.outcome : \"verifying\";\n  const { announce, regionProps } = useAnnounce();\n  const resend = useResend(onResend, cooldown);\n\n  useOncePerKey(token === \"\" ? null : token, onVerify, (key, result) => {\n    // Without a classifier, the coded refusal decides (0.30.0): `token_expired` is\n    // \"expired\", anything else \"invalid\".\n    const next: VerifyOutcome = result.ok\n      ? \"verified\"\n      : (classifyError ?? defaultVerifyFailure)(result.error);\n    setSettled({ token: key, outcome: next });\n    announce(labels[next]);\n  });\n\n  const href = continueHref ?? (signedIn ? \"/\" : \"/login\");\n  // `replace`: the token is spent, so Back must not land on this page again (keksdose F1).\n  const continueButton = (\n    <Button href={href} replace variant={outcome === \"verified\" ? \"accent\" : \"secondary\"}>\n      {labels.continue}\n    </Button>\n  );\n  const canResend = signedIn && onResend !== undefined;\n\n  let body: ReactNode;\n  if (outcome === \"verifying\") {\n    body = <LoadingState size=\"sm\" label={labels.verifying} />;\n  } else if (outcome === \"verified\") {\n    body = (\n      <EmptyState\n        tone=\"success\"\n        icon={<CheckCircle2 />}\n        title={labels.verified}\n        hint={verifiedContent}\n        action={continueButton}\n        className={OUTCOME_CLASS}\n      />\n    );\n  } else {\n    const hint = (\n      <>\n        {outcome === \"invalid\" && token !== \"\" ? `${labels.invalidHint} ` : \"\"}\n        {canResend ? labels.requestHere : labels.requestInApp}\n      </>\n    );\n    body = (\n      <EmptyState\n        tone=\"danger\"\n        icon={outcome === \"expired\" ? <TimerOff /> : <XCircle />}\n        title={token === \"\" ? labels.noToken : labels[outcome]}\n        hint={hint}\n        action={\n          <>\n            {canResend && <ResendButton state={resend} labels={labels} variant=\"accent\" />}\n            {continueButton}\n          </>\n        }\n        className={OUTCOME_CLASS}\n      />\n    );\n  }\n\n  return (\n    <div\n      {...rest}\n      data-state={outcome}\n      aria-busy={outcome === \"verifying\" || undefined}\n      className={cn(\"space-y-3\", className)}\n    >\n      {title === null ? null : <Heading className={STATUS_HEADING_CLASS}>{title ?? labels.title}</Heading>}\n      {body}\n      {canResend && (\n        <ResendStatus\n          phase={resend.phase}\n          error={resend.error}\n          describeError={describeError}\n          labels={labels}\n          className=\"block text-center text-xs\"\n        />\n      )}\n      {/* Rendered from the start, so the outcome is read when it arrives. */}\n      <div {...regionProps} />\n    </div>\n  );\n}\n\n/* ── The banner ──────────────────────────────────────────────────────────── */\n\nexport interface EmailVerificationBannerProps {\n  /** Send a new confirmation mail (`POST /auth/verify-email/resend`). Resolve when it\n   *  went out; reject and the banner says it could not. */\n  onResend: () => Promise<unknown> | void;\n  /** 0.30.0: the words for a refused resend — the server's own sentence, else the kit's. */\n  describeError?: (error: unknown) => string | undefined;\n  /** Seconds \"Send again\" waits after a mail went out. Default 60; `0` never waits. */\n  cooldown?: number;\n  /** The ×, \"Not now\". The banner does not hide itself: the app stops rendering it —\n   *  keksdose for the rest of the session. Left out, no ×. */\n  onDismiss?: () => void;\n  /** `strip` (default): keksdose's band across the top of the shell. `box`: kastlan's\n   *  callout inside the page. */\n  variant?: \"strip\" | \"box\";\n  /** The app's sentence after the kit's — keksdose's \"Until you do, nobody can share a\n   *  budget with you directly.\" */\n  children?: ReactNode;\n  className?: string;\n  labels?: LabelOverride<VerifyEmailLabels>;\n  /**\n   * 0.48: on a phone hold the message to one line with a More / Less toggle —\n   * {@link AlertBanner}'s `clampMobile`, passed through (kastlan S2: its banner took ~110px\n   * of a 390px phone). The resend's outcome (\"Sent\", the error) then moves out of the\n   * message to sit after \"Send again\", at every width, so the line that answers the press\n   * is never hidden behind \"More\". Default `false`: the outcome stays in the message.\n   */\n  clampMobile?: boolean;\n  /**\n   * 0.50 (kastlan K1): where \"Send again\" goes on a phone in the `box` variant —\n   * {@link AlertBanner}'s `actionPlacement`, passed through. `\"flow\"` keeps it on the\n   * message's line while the message keeps 10rem, else at the end of the next line,\n   * instead of a line of its own (kastlan's ≤ 56px banner on a 390px phone, KX-5).\n   * Default `\"own-line\"`, as before. The `strip` variant flows like that already.\n   */\n  actionPlacement?: \"own-line\" | \"flow\";\n}\n\n/**\n * The nudge for a signed-in account whose address is not confirmed — keksdose's\n * `VerifyEmailBanner` (features/auth/verify-email-banner.tsx), kastlan's copy of it.\n *\n * A prompt, not a wall: verification gates nothing (§2.8). The app renders it while\n * `/auth/me` says `email_verified: false`, and stops when the user dismisses it or the\n * page above confirms the address. \"Send again\" waits `cooldown` seconds after a mail\n * went out (the button says how long), and its outcome is written into the banner and\n * read out — no toast needed.\n */\nexport function EmailVerificationBanner({\n  onResend,\n  describeError,\n  cooldown = DEFAULT_COOLDOWN,\n  onDismiss,\n  variant = \"strip\",\n  children,\n  className,\n  labels: labelsProp,\n  clampMobile = false,\n  actionPlacement,\n}: EmailVerificationBannerProps) {\n  const labels = useKitLabels(\"verifyEmail\", DEFAULT_VERIFY_EMAIL_LABELS, labelsProp);\n  const resend = useResend(onResend, cooldown);\n  // One live region either way, mounted from the start (a region added later is often not\n  // read out): in the message, or — clamped — after the button, outside the clamp.\n  const status = (\n    <ResendStatus\n      phase={resend.phase}\n      error={resend.error}\n      describeError={describeError}\n      labels={labels}\n      className=\"font-medium\"\n    />\n  );\n  const button = <ResendButton state={resend} labels={labels} variant=\"secondary\" />;\n  return (\n    <AlertBanner\n      tone=\"warning\"\n      variant={variant}\n      icon={<MailWarning />}\n      action={\n        clampMobile ? (\n          <>\n            {button}\n            {status}\n          </>\n        ) : (\n          button\n        )\n      }\n      onDismiss={onDismiss}\n      dismissLabel={onDismiss ? labels.dismiss : undefined}\n      clampMobile={clampMobile}\n      actionPlacement={actionPlacement}\n      className={className}\n    >\n      {labels.banner}\n      {children != null && children !== false && <> {children}</>}\n      {!clampMobile && <> {status}</>}\n    </AlertBanner>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/billing/plan-card.js

@@ -236,7 +236,7 @@ function PlanPicker({
       Button,
       {
         type: "button",
-        variant: "primary",
+        variant: "default",
         className: "max-sm:w-full",
         disabledReason: blocked,
         pending,
@@ -280,7 +280,7 @@ function GrantWarningConfirm({ open, onOpenChange, onConfirm, labels: labelsProp
         /* @__PURE__ */ jsx(
           Button,
           {
-            variant: "primary",
+            variant: "default",
             onClick: () => {
               onConfirm();
               onOpenChange(false);

package/dist/billing/plan-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/billing/plan-card.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check, Gauge } from \"lucide-react\";\n\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { formatNumber } from \"../lib/format\";\nimport { cn } from \"../lib/cn\";\nimport { ChoiceCard } from \"../components/choice-card\";\nimport type { ChoiceCardProps } from \"../components/choice-card\";\nimport { Chip } from \"../components/chip\";\nimport { ToggleGroup } from \"../components/toggle-group\";\nimport { Button } from \"../components/button\";\nimport { DialogFrame } from \"../components/dialog-frame\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\nimport { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from \"./plan-price\";\nimport type { BillingCurrency, BillingInterval, PlanPrices } from \"./plan-price\";\n\n/**\n * One plan of the app's catalogue (docs/billing-harmonization.md §3.1) as a page shows it:\n * server-kit's `PlanSpec` from `GET /billing/plans`, plus the words, which are the app's\n * (display names and feature lines come from its i18n, never from the provider).\n */\nexport interface BillingPlan {\n  /** The plan code, lowercase on the wire (§12.16); compared without case here. */\n  code: string;\n  /** The app's display name, in the reader's language: \"Pro\". */\n  name: string;\n  /** A line under the price. */\n  description?: ReactNode;\n  /** Gross prices in minor units, per currency and period (§3.1, §12.17). None at all —\n   *  or 0 — is a free plan. */\n  prices?: PlanPrices | null;\n  /** Dimension → limit; `null` is unlimited (§3.1). Shown in the object's order. */\n  limits?: Readonly<Record<string, number | null>>;\n  /** The app's feature lines. */\n  features?: readonly ReactNode[];\n  /** Not choosable — a plan being retired, say. */\n  disabled?: boolean;\n}\n\n/**\n * How a plan stands to the one the payer pays for now: `current` is it, `upgrade` comes\n * after it in the catalogue's order (`PlanSpec.sort`), `downgrade` before it.\n */\nexport type PlanRelation = \"current\" | \"upgrade\" | \"downgrade\";\n\n/** The plan's place against `current`, by the order of `plans`; `undefined` without a\n *  current plan (a trial, an ended plan) or for a code that is not in the list. */\nexport function planRelation(\n  plans: readonly Pick<BillingPlan, \"code\">[],\n  code: string,\n  current: string | null | undefined,\n): PlanRelation | undefined {\n  if (!current) return undefined;\n  const index = (c: string) => plans.findIndex((p) => p.code.toLowerCase() === c.toLowerCase());\n  const at = index(code);\n  const now = index(current);\n  if (at < 0 || now < 0) return undefined;\n  return at === now ? \"current\" : at > now ? \"upgrade\" : \"downgrade\";\n}\n\n/** What both parts need to draw a plan. */\ninterface PlanDisplayProps {\n  /** The currency the prices are shown in (§2.6). */\n  currency: BillingCurrency;\n  /** The period the prices are shown for. */\n  interval: BillingInterval;\n  /** The app's name of each limit's dimension (\"Budgets\"). A dimension without one is\n   *  shown by its key. */\n  dimensionLabels?: Readonly<Record<string, string>>;\n  /** How a limit's figure is written — kastlan's storage is bytes (`formatFileSize`).\n   *  Default: a number in the kit's locale. */\n  formatLimit?: (dimension: string, value: number) => string;\n  /** Over the provider's locale. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\nexport interface PlanCardProps\n  extends Omit<ChoiceCardProps, \"type\" | \"title\" | \"description\" | \"icon\" | \"indeterminate\" | \"value\" | \"labels\">,\n    PlanDisplayProps {\n  plan: BillingPlan;\n  /** See {@link PlanRelation}. `current` draws the \"Current plan\" chip — a word in the\n   *  card's name, never a colour alone. */\n  relation?: PlanRelation;\n  /**\n   * The provider's own localised price in place of the catalogue's figure (§12.17) — a\n   * Merchant of Record's price preview for the buyer's country, tax included. The period\n   * and \"VAT included\" stay: the law asks for a gross price, and the card says so.\n   */\n  pricePreview?: ReactNode;\n}\n\n/** A list from spans (`role=\"list\"`): the card is a `<label>`, which may hold phrasing\n *  content only, so a `<ul>` there would be invalid HTML. */\nfunction SpanList({ name, items, icon }: { name: string; items: ReactNode[]; icon: ReactNode }) {\n  if (items.length === 0) return null;\n  return (\n    <span role=\"list\" aria-label={name} className=\"block space-y-1\">\n      {items.map((item, i) => (\n        <span role=\"listitem\" key={i} className=\"flex items-start gap-1.5 text-secondary\">\n          <span aria-hidden className=\"mt-[0.0625rem] flex shrink-0 text-muted [&_svg]:size-3.5\">\n            {icon}\n          </span>\n          <span className=\"min-w-0\">\n            {item}\n            {/* A space between the items' texts in the flattened description. */}{\" \"}\n          </span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\n/**\n * One plan as a {@link ChoiceCard} radio (§7): the name (and \"Current plan\"), the GROSS\n * price in the chosen currency and period through `formatMoney` (\"CHF 49 per year, VAT\n * included\", §12.17), the limits (\"Budgets: 3\", \"Seats: Unlimited\") and the app's feature\n * lines. A plan with prices but none for this currency and period is shown, \"Not offered\n * for this billing period\", and cannot be picked.\n *\n * A radio of a set: give the cards one `name`, or use {@link PlanPicker}, which does that\n * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,\n * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.\n */\nexport function PlanCard({\n  // The radio `<input>` (ChoiceCard's): a React 19 ref prop since 0.34 (MOD-4, refactor\n  // audit 2026-10), where this was `forwardRef`.\n  ref,\n  plan,\n  relation,\n  pricePreview,\n  currency,\n  interval,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n  disabled,\n  ...rest\n}: PlanCardProps) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale(localeProp);\n  const price = planPrice(plan.prices, currency, interval);\n\n  const priced = price.kind === \"price\";\n  const figure = priced\n    ? pricePreview !== undefined && pricePreview !== null\n      ? pricePreview\n      : formatPlanPrice(price.minor, currency, { locale })\n    : price.kind === \"free\"\n      ? labels.free\n      : labels.notOffered;\n\n  const limitLines = Object.entries(plan.limits ?? {}).map(([dimension, value]) => {\n    const name = dimensionLabels?.[dimension] ?? dimension;\n    const shown =\n      value === null ? labels.unlimited : formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });\n    return common.fieldValue(name, shown);\n  });\n\n  const body = (\n    <span className=\"mt-1 block space-y-2\">\n      <span className=\"block\">\n        <span\n          data-part=\"price\"\n          className={cn(\n            \"tabular-nums\",\n            price.kind === \"not-offered\"\n              ? \"text-xs text-muted\"\n              : \"text-lg font-semibold leading-tight text-primary\",\n          )}\n        >\n          {figure}\n        </span>\n        {priced && (\n          <>\n            {\" \"}\n            <span className=\"text-xs text-secondary\">\n              {interval === \"year\" ? labels.perYear : labels.perMonth}\n            </span>{\" \"}\n            <span className=\"block text-xs text-muted\">{labels.vatIncluded}</span>\n          </>\n        )}{\" \"}\n      </span>\n      {plan.description !== undefined && plan.description !== null && (\n        <span className=\"block text-secondary\">{plan.description} </span>\n      )}\n      <SpanList name={labels.limits} items={limitLines} icon={<Gauge />} />\n      <SpanList name={labels.features} items={[...(plan.features ?? [])]} icon={<Check />} />\n    </span>\n  );\n\n  return (\n    <ChoiceCard\n      ref={ref}\n      {...rest}\n      type=\"radio\"\n      value={plan.code}\n      disabled={disabled || plan.disabled || price.kind === \"not-offered\"}\n      data-plan={plan.code}\n      data-relation={relation}\n      title={\n        <>\n          {plan.name}\n          {relation === \"current\" && (\n            <>\n              {\" \"}\n              <Chip size=\"xs\" tone=\"brand\" shape=\"square\" caps className=\"ms-1 align-[0.0625rem]\">\n                {labels.current}\n              </Chip>\n            </>\n          )}\n        </>\n      }\n      description={body}\n    />\n  );\n}\n\n/** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`\n *  takes (§4). */\nexport interface PlanChoice {\n  plan: string;\n  interval: BillingInterval;\n  currency: BillingCurrency;\n}\n\nexport interface PlanPickerProps extends Omit<PlanDisplayProps, \"currency\" | \"interval\"> {\n  /** The catalogue, in its order (`PlanSpec.sort`): cheapest first. The order decides\n   *  upgrade and downgrade. */\n  plans: readonly BillingPlan[];\n  /**\n   * The plan the payer pays for now (`plan` of the overview while `active` or\n   * `past_due`). Leave it out during a trial and after a plan ended: then every plan is\n   * \"Choose …\", the trial's plan included, since none is paid for yet.\n   */\n  current?: string | null;\n  /** The picked plan, controlled. `null` while none is. */\n  value?: string | null;\n  /** The picked plan, uncontrolled. Default: `current`, else nothing. */\n  defaultValue?: string | null;\n  onValueChange?: (plan: string) => void;\n  /** The period, controlled. */\n  interval?: BillingInterval;\n  /** The period, uncontrolled. Default `year` — lead with yearly (§12.17). */\n  defaultInterval?: BillingInterval;\n  onIntervalChange?: (interval: BillingInterval) => void;\n  /** The currency, controlled. */\n  currency?: BillingCurrency;\n  /** The currency, uncontrolled. Default: the account's stored currency is the app's to\n   *  pass here (§12.18); without it, {@link billingCurrencyFor} the kit's locale. */\n  defaultCurrency?: BillingCurrency;\n  onCurrencyChange?: (currency: BillingCurrency) => void;\n  /** The currencies the payer may switch between. Default: every currency a plan has a\n   *  price in. The switch shows only for more than one. */\n  currencies?: readonly BillingCurrency[];\n  /** The button: the app starts its checkout (`POST /billing/checkout`, then off to the\n   *  provider's page). The kit sends no request. */\n  onChoose: (choice: PlanChoice) => void;\n  /** The checkout is being opened: the button's spinner, no second press. */\n  pending?: boolean;\n  /**\n   * 0.42 (§16.2 decision 5, §16.8 B): the payer's free grant runs without an end —\n   * `isPermanentGrant(overview)`. A purchase under it changes nothing the payer gets\n   * while the grant runs (§12.11), so the button first opens a confirm —\n   * `grantWarningTitle`, `grantWarningBody`, \"Buy anyway\" (`grantWarningAction`) and\n   * \"Back\" — and {@link onChoose} runs only on \"Buy anyway\". Warned, not refused.\n   *\n   * Not while {@link switching}: then the pick opens `PlanSwitchConfirm`, which takes\n   * the same `permanentGrant` and shows the warning above its figures — one warning,\n   * in the dialog where the payer agrees, rather than a confirm before a confirm.\n   */\n  permanentGrant?: boolean;\n  /**\n   * 0.42: the overview's `switching` — the app sends this pick to `PlanSwitchConfirm`\n   * (§15.2.10), not the checkout. Only decides where {@link permanentGrant}'s warning\n   * shows; the button and {@link onChoose} are the same either way.\n   */\n  switching?: boolean;\n  /** The provider's localised price for a plan, or `undefined` for the catalogue's —\n   *  see {@link PlanCardProps.pricePreview}. */\n  pricePreview?: (plan: BillingPlan, choice: Omit<PlanChoice, \"plan\">) => ReactNode | undefined;\n  /** A visible question over the cards. Without one the set is named \"Plans\". */\n  legend?: ReactNode;\n  /** Shared by the radios. Generated if omitted. */\n  name?: string;\n  /** Classes for the whole picker. */\n  className?: string;\n  /** Classes for the card grid. Default: one column, two from `sm`, three from `lg`. */\n  gridClassName?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n}\n\n/** Every currency some plan has a price in, CHF first. */\nfunction pricedCurrencies(plans: readonly BillingPlan[]): BillingCurrency[] {\n  const found = new Set<BillingCurrency>();\n  for (const p of plans) for (const c of Object.keys(p.prices ?? {})) found.add(c as BillingCurrency);\n  return ([\"CHF\", \"EUR\"] as const).filter((c) => found.has(c));\n}\n\n/** Every period some plan has a price for, yearly first. */\nfunction pricedIntervals(plans: readonly BillingPlan[]): BillingInterval[] {\n  const found = new Set<BillingInterval>();\n  for (const p of plans)\n    for (const byInterval of Object.values(p.prices ?? {}))\n      for (const [k, v] of Object.entries(byInterval ?? {})) if (typeof v === \"number\") found.add(k as BillingInterval);\n  return BILLING_INTERVALS.filter((i) => found.has(i));\n}\n\n/**\n * The plans to choose from (§7): the period switch — yearly first (§12.17) — and, where\n * the payer may pay in either, the currency switch (§2.6); a {@link PlanCard} per plan in\n * a radio set; and one button that says what pressing it does: \"Upgrade to Pro\", \"Switch\n * to Free\", or \"Choose Pro\" with no plan paid for yet.\n *\n * One button under the set rather than one per card: each card IS a radio — a `<label>`\n * round an `<input>` — and a button inside a label is interactive content inside\n * interactive content. Picking and committing are two steps anyway: the price under the\n * picked card is what checkout will charge.\n *\n * The button never takes the write lock: billing itself always works, a read-only payer\n * must be able to pay (§3.3). It is off, with the reason on hover and focus, while\n * nothing is picked or the current plan is.\n *\n * 0.42 (§16.8 B): under a grant without an end (`permanentGrant`) the payer is warned\n * before paying for a plan that won't apply — here, in a confirm before `onChoose`, on\n * the way to the checkout; on the way to a switch (`switching`) in `PlanSwitchConfirm`\n * instead, so the warning shows once on either path.\n */\nexport function PlanPicker({\n  plans,\n  current,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  interval: intervalProp,\n  defaultInterval = \"year\",\n  onIntervalChange,\n  currency: currencyProp,\n  defaultCurrency,\n  onCurrencyChange,\n  currencies: currenciesProp,\n  onChoose,\n  pending,\n  permanentGrant = false,\n  switching = false,\n  pricePreview,\n  legend,\n  name,\n  className,\n  gridClassName,\n  cardClassName,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n}: PlanPickerProps) {\n  const labels = useBillingLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const generated = useId();\n  /** The choice the grant warning holds back until \"Buy anyway\". */\n  const [warned, setWarned] = useState<PlanChoice | null>(null);\n  const groupName = name ?? generated;\n  const legendId = `${generated}-legend`;\n\n  const [ownValue, setOwnValue] = useState<string | null>(() => defaultValue ?? current ?? null);\n  const [ownInterval, setOwnInterval] = useState<BillingInterval>(defaultInterval);\n  const [ownCurrency, setOwnCurrency] = useState<BillingCurrency>(\n    () => defaultCurrency ?? billingCurrencyFor(locale),\n  );\n  const value = valueProp !== undefined ? valueProp : ownValue;\n  const interval = intervalProp ?? ownInterval;\n  const currency = currencyProp ?? ownCurrency;\n\n  const pick = (code: string) => {\n    if (valueProp === undefined) setOwnValue(code);\n    onValueChange?.(code);\n  };\n  const setInterval = (next: BillingInterval) => {\n    if (intervalProp === undefined) setOwnInterval(next);\n    onIntervalChange?.(next);\n  };\n  const setCurrency = (next: BillingCurrency) => {\n    if (currencyProp === undefined) setOwnCurrency(next);\n    onCurrencyChange?.(next);\n  };\n\n  const currencies = currenciesProp ?? pricedCurrencies(plans);\n  const intervals = pricedIntervals(plans);\n  const picked = value ? plans.find((p) => p.code.toLowerCase() === value.toLowerCase()) : undefined;\n  const relation = picked ? planRelation(plans, picked.code, current) : undefined;\n  const pickedPrice = picked ? planPrice(picked.prices, currency, interval) : undefined;\n\n  const buttonText = !picked\n    ? labels.choosePlan\n    : relation === \"upgrade\"\n      ? labels.upgrade(picked.name)\n      : relation === \"downgrade\"\n        ? labels.downgrade(picked.name)\n        : labels.choose(picked.name);\n  const blocked = !picked\n    ? labels.pickFirst\n    : relation === \"current\"\n      ? labels.isCurrent\n      : pickedPrice?.kind === \"not-offered\"\n        ? labels.notOffered\n        : undefined;\n\n  return (\n    <div className={cn(\"min-w-0 space-y-3\", className)} data-billing-interval={interval} data-billing-currency={currency}>\n      {(intervals.length > 1 || currencies.length > 1) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {intervals.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.interval}\n              // Content-wide, so the two switches share a row and wrap only when narrow.\n              className=\"w-auto\"\n              options={intervals.map((i) => ({ value: i, label: i === \"year\" ? labels.yearly : labels.monthly }))}\n              value={interval}\n              onChange={setInterval}\n            />\n          )}\n          {currencies.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.currency}\n              className=\"w-auto\"\n              options={currencies.map((c) => ({ value: c, label: c }))}\n              value={currency}\n              onChange={setCurrency}\n            />\n          )}\n        </div>\n      )}\n      <fieldset\n        className=\"min-w-0\"\n        aria-labelledby={legend !== undefined ? legendId : undefined}\n        aria-label={legend === undefined ? labels.plans : undefined}\n      >\n        {legend !== undefined && (\n          <legend id={legendId} className=\"mb-2 text-sm font-medium text-primary\">\n            {legend}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3\", gridClassName)}>\n          {plans.map((plan) => (\n            <PlanCard\n              key={plan.code}\n              plan={plan}\n              name={groupName}\n              currency={currency}\n              interval={interval}\n              relation={planRelation(plans, plan.code, current)}\n              pricePreview={pricePreview?.(plan, { interval, currency })}\n              checked={picked?.code === plan.code}\n              onCheckedChange={(on) => on && pick(plan.code)}\n              dimensionLabels={dimensionLabels}\n              formatLimit={formatLimit}\n              locale={locale}\n              labels={labelsProp}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n      </fieldset>\n      <div className=\"flex justify-end\">\n        <Button\n          type=\"button\"\n          variant=\"primary\"\n          className=\"max-sm:w-full\"\n          disabledReason={blocked}\n          pending={pending}\n          onClick={() => {\n            if (!picked) return;\n            const choice = { plan: picked.code, interval, currency };\n            if (permanentGrant && !switching) setWarned(choice);\n            else onChoose(choice);\n          }}\n        >\n          {buttonText}\n        </Button>\n      </div>\n      {permanentGrant && !switching && (\n        <GrantWarningConfirm\n          open={warned !== null}\n          onOpenChange={(open) => {\n            if (!open) setWarned(null);\n          }}\n          onConfirm={() => {\n            if (warned) onChoose(warned);\n          }}\n          labels={labelsProp}\n        />\n      )}\n    </div>\n  );\n}\n\nexport interface GrantWarningConfirmProps {\n  /** Shown, controlled. */\n  open: boolean;\n  /** `false` on \"Back\", Escape, the backdrop — and after \"Buy anyway\". */\n  onOpenChange: (open: boolean) => void;\n  /** \"Buy anyway\": the app opens its checkout. The dialog closes itself after it. */\n  onConfirm: () => void;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English: `grantWarningTitle`,\n   *  `grantWarningBody`, `grantWarningAction`. \"Back\" is `common.back`. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\n/**\n * 0.42 (§16.8 B): the permanent-grant warning before a checkout — `grantWarningTitle`,\n * `grantWarningBody`, \"Back\" and \"Buy anyway\" (`grantWarningAction`). {@link PlanPicker}\n * shows it itself under `permanentGrant` when not `switching`. Exported for the path the\n * picker cannot see: an app that meant to switch, learned there is no subscription to\n * switch (keksdose: `/billing/plan/preview` → 409 `billing_not_subscribed`) and falls back\n * to a checkout — show this before that checkout, so a permanent-grant holder is still\n * warned. Carries `data-grant-warning`.\n */\nexport function GrantWarningConfirm({ open, onOpenChange, onConfirm, labels: labelsProp }: GrantWarningConfirmProps) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  return (\n    <DialogFrame\n      open={open}\n      title={labels.grantWarningTitle}\n      description={labels.grantWarningBody}\n      onClose={() => onOpenChange(false)}\n      data-grant-warning=\"\"\n      actions={(close) => (\n        <>\n          <Button variant=\"secondary\" onClick={close}>\n            {common.back}\n          </Button>\n          <Button\n            variant=\"primary\"\n            onClick={() => {\n              onConfirm();\n              onOpenChange(false);\n            }}\n          >\n            {labels.grantWarningAction}\n          </Button>\n        </>\n      )}\n    />\n  );\n}\n"],"mappings":";AAwGU,SA4EA,UA5EA,KAGA,YAHA;AAxGV,SAAS,OAAO,gBAAgB;AAEhC,SAAS,OAAO,aAAa;AAE7B,SAAS,uBAAuB,cAAc,oBAAoB;AAElE,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAE3B,SAAS,YAAY;AACrB,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAEjC,SAAS,mBAAmB,oBAAoB,iBAAiB,iBAAiB;AAkC3E,SAAS,aACd,OACA,MACA,SAC0B;AAC1B,MAAI,CAAC,QAAS,QAAO;AACrB,QAAM,QAAQ,CAAC,MAAc,MAAM,UAAU,CAAC,MAAM,EAAE,KAAK,YAAY,MAAM,EAAE,YAAY,CAAC;AAC5F,QAAM,KAAK,MAAM,IAAI;AACrB,QAAM,MAAM,MAAM,OAAO;AACzB,MAAI,KAAK,KAAK,MAAM,EAAG,QAAO;AAC9B,SAAO,OAAO,MAAM,YAAY,KAAK,MAAM,YAAY;AACzD;AAqCA,SAAS,SAAS,EAAE,MAAM,OAAO,KAAK,GAA0D;AAC9F,MAAI,MAAM,WAAW,EAAG,QAAO;AAC/B,SACE,oBAAC,UAAK,MAAK,QAAO,cAAY,MAAM,WAAU,mBAC3C,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,UAAK,MAAK,YAAmB,WAAU,2CACtC;AAAA,wBAAC,UAAK,eAAW,MAAC,WAAU,4DACzB,gBACH;AAAA,IACA,qBAAC,UAAK,WAAU,WACb;AAAA;AAAA,MACsE;AAAA,OACzE;AAAA,OAPyB,CAQ3B,CACD,GACH;AAEJ;AAaO,SAAS,SAAS;AAAA;AAAA;AAAA,EAGvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,QAAQ,UAAU,KAAK,QAAQ,UAAU,QAAQ;AAEvD,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,SAAS,SACX,iBAAiB,UAAa,iBAAiB,OAC7C,eACA,gBAAgB,MAAM,OAAO,UAAU,EAAE,OAAO,CAAC,IACnD,MAAM,SAAS,SACb,OAAO,OACP,OAAO;AAEb,QAAM,aAAa,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,WAAW,KAAK,MAAM;AAC/E,UAAM,OAAO,kBAAkB,SAAS,KAAK;AAC7C,UAAM,QACJ,UAAU,OAAO,OAAO,YAAY,cAAc,YAAY,WAAW,KAAK,IAAI,aAAa,OAAO,EAAE,OAAO,CAAC;AAClH,WAAO,OAAO,WAAW,MAAM,KAAK;AAAA,EACtC,CAAC;AAED,QAAM,OACJ,qBAAC,UAAK,WAAU,wBACd;AAAA,yBAAC,UAAK,WAAU,SACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,aAAU;AAAA,UACV,WAAW;AAAA,YACT;AAAA,YACA,MAAM,SAAS,gBACX,uBACA;AAAA,UACN;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACC,UACC,iCACG;AAAA;AAAA,QACD,oBAAC,UAAK,WAAU,0BACb,uBAAa,SAAS,OAAO,UAAU,OAAO,UACjD;AAAA,QAAQ;AAAA,QACR,oBAAC,UAAK,WAAU,4BAA4B,iBAAO,aAAY;AAAA,SACjE;AAAA,MACC;AAAA,OACL;AAAA,IACC,KAAK,gBAAgB,UAAa,KAAK,gBAAgB,QACtD,qBAAC,UAAK,WAAU,wBAAwB;AAAA,WAAK;AAAA,MAAY;AAAA,OAAC;AAAA,IAE5D,oBAAC,YAAS,MAAM,OAAO,QAAQ,OAAO,YAAY,MAAM,oBAAC,SAAM,GAAI;AAAA,IACnE,oBAAC,YAAS,MAAM,OAAO,UAAU,OAAO,CAAC,GAAI,KAAK,YAAY,CAAC,CAAE,GAAG,MAAM,oBAAC,SAAM,GAAI;AAAA,KACvF;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,OAAO,KAAK;AAAA,MACZ,UAAU,YAAY,KAAK,YAAY,MAAM,SAAS;AAAA,MACtD,aAAW,KAAK;AAAA,MAChB,iBAAe;AAAA,MACf,OACE,iCACG;AAAA,aAAK;AAAA,QACL,aAAa,aACZ,iCACG;AAAA;AAAA,UACD,oBAAC,QAAK,MAAK,MAAK,MAAK,SAAQ,OAAM,UAAS,MAAI,MAAC,WAAU,0BACxD,iBAAO,SACV;AAAA,WACF;AAAA,SAEJ;AAAA,MAEF,aAAa;AAAA;AAAA,EACf;AAEJ;AA8EA,SAAS,iBAAiB,OAAkD;AAC1E,QAAM,QAAQ,oBAAI,IAAqB;AACvC,aAAW,KAAK,MAAO,YAAW,KAAK,OAAO,KAAK,EAAE,UAAU,CAAC,CAAC,EAAG,OAAM,IAAI,CAAoB;AAClG,SAAQ,CAAC,OAAO,KAAK,EAAY,OAAO,CAAC,MAAM,MAAM,IAAI,CAAC,CAAC;AAC7D;AAGA,SAAS,gBAAgB,OAAkD;AACzE,QAAM,QAAQ,oBAAI,IAAqB;AACvC,aAAW,KAAK;AACd,eAAW,cAAc,OAAO,OAAO,EAAE,UAAU,CAAC,CAAC;AACnD,iBAAW,CAAC,GAAG,CAAC,KAAK,OAAO,QAAQ,cAAc,CAAC,CAAC,EAAG,KAAI,OAAO,MAAM,SAAU,OAAM,IAAI,CAAoB;AACpH,SAAO,kBAAkB,OAAO,CAAC,MAAM,MAAM,IAAI,CAAC,CAAC;AACrD;AAsBO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AACV,GAAoB;AAClB,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU;AACtC,QAAM,YAAY,MAAM;AAExB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA4B,IAAI;AAC5D,QAAM,YAAY,QAAQ;AAC1B,QAAM,WAAW,GAAG,SAAS;AAE7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,MAAM,gBAAgB,WAAW,IAAI;AAC7F,QAAM,CAAC,aAAa,cAAc,IAAI,SAA0B,eAAe;AAC/E,QAAM,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,MAAM,mBAAmB,mBAAmB,MAAM;AAAA,EACpD;AACA,QAAM,QAAQ,cAAc,SAAY,YAAY;AACpD,QAAM,WAAW,gBAAgB;AACjC,QAAM,WAAW,gBAAgB;AAEjC,QAAM,OAAO,CAAC,SAAiB;AAC7B,QAAI,cAAc,OAAW,aAAY,IAAI;AAC7C,oBAAgB,IAAI;AAAA,EACtB;AACA,QAAM,cAAc,CAAC,SAA0B;AAC7C,QAAI,iBAAiB,OAAW,gBAAe,IAAI;AACnD,uBAAmB,IAAI;AAAA,EACzB;AACA,QAAM,cAAc,CAAC,SAA0B;AAC7C,QAAI,iBAAiB,OAAW,gBAAe,IAAI;AACnD,uBAAmB,IAAI;AAAA,EACzB;AAEA,QAAM,aAAa,kBAAkB,iBAAiB,KAAK;AAC3D,QAAM,YAAY,gBAAgB,KAAK;AACvC,QAAM,SAAS,QAAQ,MAAM,KAAK,CAAC,MAAM,EAAE,KAAK,YAAY,MAAM,MAAM,YAAY,CAAC,IAAI;AACzF,QAAM,WAAW,SAAS,aAAa,OAAO,OAAO,MAAM,OAAO,IAAI;AACtE,QAAM,cAAc,SAAS,UAAU,OAAO,QAAQ,UAAU,QAAQ,IAAI;AAE5E,QAAM,aAAa,CAAC,SAChB,OAAO,aACP,aAAa,YACX,OAAO,QAAQ,OAAO,IAAI,IAC1B,aAAa,cACX,OAAO,UAAU,OAAO,IAAI,IAC5B,OAAO,OAAO,OAAO,IAAI;AACjC,QAAM,UAAU,CAAC,SACb,OAAO,YACP,aAAa,YACX,OAAO,YACP,aAAa,SAAS,gBACpB,OAAO,aACP;AAER,SACE,qBAAC,SAAI,WAAW,GAAG,qBAAqB,SAAS,GAAG,yBAAuB,UAAU,yBAAuB,UACxG;AAAA,eAAU,SAAS,KAAK,WAAW,SAAS,MAC5C,qBAAC,SAAI,WAAU,qCACZ;AAAA,gBAAU,SAAS,KAClB;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,OAAO;AAAA,UAEnB,WAAU;AAAA,UACV,SAAS,UAAU,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,MAAM,SAAS,OAAO,SAAS,OAAO,QAAQ,EAAE;AAAA,UAClG,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ;AAAA,MAED,WAAW,SAAS,KACnB;AAAA,QAAC;AAAA;AAAA,UACC,cAAY,OAAO;AAAA,UACnB,WAAU;AAAA,UACV,SAAS,WAAW,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAE,EAAE;AAAA,UACvD,OAAO;AAAA,UACP,UAAU;AAAA;AAAA,MACZ;AAAA,OAEJ;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,mBAAiB,WAAW,SAAY,WAAW;AAAA,QACnD,cAAY,WAAW,SAAY,OAAO,QAAQ;AAAA,QAEjD;AAAA,qBAAW,UACV,oBAAC,YAAO,IAAI,UAAU,WAAU,yCAC7B,kBACH;AAAA,UAEF,oBAAC,SAAI,WAAW,GAAG,wDAAwD,aAAa,GACrF,gBAAM,IAAI,CAAC,SACV;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,MAAM;AAAA,cACN;AAAA,cACA;AAAA,cACA,UAAU,aAAa,OAAO,KAAK,MAAM,OAAO;AAAA,cAChD,cAAc,eAAe,MAAM,EAAE,UAAU,SAAS,CAAC;AAAA,cACzD,SAAS,QAAQ,SAAS,KAAK;AAAA,cAC/B,iBAAiB,CAAC,OAAO,MAAM,KAAK,KAAK,IAAI;AAAA,cAC7C;AAAA,cACA;AAAA,cACA;AAAA,cACA,QAAQ;AAAA,cACR,WAAW;AAAA;AAAA,YAbN,KAAK;AAAA,UAcZ,CACD,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,SAAI,WAAU,oBACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,WAAU;AAAA,QACV,gBAAgB;AAAA,QAChB;AAAA,QACA,SAAS,MAAM;AACb,cAAI,CAAC,OAAQ;AACb,gBAAM,SAAS,EAAE,MAAM,OAAO,MAAM,UAAU,SAAS;AACvD,cAAI,kBAAkB,CAAC,UAAW,WAAU,MAAM;AAAA,cAC7C,UAAS,MAAM;AAAA,QACtB;AAAA,QAEC;AAAA;AAAA,IACH,GACF;AAAA,IACC,kBAAkB,CAAC,aAClB;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,WAAW;AAAA,QACjB,cAAc,CAAC,SAAS;AACtB,cAAI,CAAC,KAAM,WAAU,IAAI;AAAA,QAC3B;AAAA,QACA,WAAW,MAAM;AACf,cAAI,OAAQ,UAAS,MAAM;AAAA,QAC7B;AAAA,QACA,QAAQ;AAAA;AAAA,IACV;AAAA,KAEJ;AAEJ;AAuBO,SAAS,oBAAoB,EAAE,MAAM,cAAc,WAAW,QAAQ,WAAW,GAA6B;AACnH,QAAM,SAAS,iBAAiB,UAAU;AAC1C,QAAM,SAAS,aAAa,UAAU,qBAAqB;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO,OAAO;AAAA,MACd,aAAa,OAAO;AAAA,MACpB,SAAS,MAAM,aAAa,KAAK;AAAA,MACjC,sBAAmB;AAAA,MACnB,SAAS,CAAC,UACR,iCACE;AAAA,4BAAC,UAAO,SAAQ,aAAY,SAAS,OAClC,iBAAO,MACV;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,SAAS,MAAM;AACb,wBAAU;AACV,2BAAa,KAAK;AAAA,YACpB;AAAA,YAEC,iBAAO;AAAA;AAAA,QACV;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/billing/plan-card.tsx"],"sourcesContent":["import { useId, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Check, Gauge } from \"lucide-react\";\n\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { formatNumber } from \"../lib/format\";\nimport { cn } from \"../lib/cn\";\nimport { ChoiceCard } from \"../components/choice-card\";\nimport type { ChoiceCardProps } from \"../components/choice-card\";\nimport { Chip } from \"../components/chip\";\nimport { ToggleGroup } from \"../components/toggle-group\";\nimport { Button } from \"../components/button\";\nimport { DialogFrame } from \"../components/dialog-frame\";\nimport { useBillingLabels } from \"./billing-labels\";\nimport type { BillingLabels } from \"./billing-labels\";\nimport { BILLING_INTERVALS, billingCurrencyFor, formatPlanPrice, planPrice } from \"./plan-price\";\nimport type { BillingCurrency, BillingInterval, PlanPrices } from \"./plan-price\";\n\n/**\n * One plan of the app's catalogue (docs/billing-harmonization.md §3.1) as a page shows it:\n * server-kit's `PlanSpec` from `GET /billing/plans`, plus the words, which are the app's\n * (display names and feature lines come from its i18n, never from the provider).\n */\nexport interface BillingPlan {\n  /** The plan code, lowercase on the wire (§12.16); compared without case here. */\n  code: string;\n  /** The app's display name, in the reader's language: \"Pro\". */\n  name: string;\n  /** A line under the price. */\n  description?: ReactNode;\n  /** Gross prices in minor units, per currency and period (§3.1, §12.17). None at all —\n   *  or 0 — is a free plan. */\n  prices?: PlanPrices | null;\n  /** Dimension → limit; `null` is unlimited (§3.1). Shown in the object's order. */\n  limits?: Readonly<Record<string, number | null>>;\n  /** The app's feature lines. */\n  features?: readonly ReactNode[];\n  /** Not choosable — a plan being retired, say. */\n  disabled?: boolean;\n}\n\n/**\n * How a plan stands to the one the payer pays for now: `current` is it, `upgrade` comes\n * after it in the catalogue's order (`PlanSpec.sort`), `downgrade` before it.\n */\nexport type PlanRelation = \"current\" | \"upgrade\" | \"downgrade\";\n\n/** The plan's place against `current`, by the order of `plans`; `undefined` without a\n *  current plan (a trial, an ended plan) or for a code that is not in the list. */\nexport function planRelation(\n  plans: readonly Pick<BillingPlan, \"code\">[],\n  code: string,\n  current: string | null | undefined,\n): PlanRelation | undefined {\n  if (!current) return undefined;\n  const index = (c: string) => plans.findIndex((p) => p.code.toLowerCase() === c.toLowerCase());\n  const at = index(code);\n  const now = index(current);\n  if (at < 0 || now < 0) return undefined;\n  return at === now ? \"current\" : at > now ? \"upgrade\" : \"downgrade\";\n}\n\n/** What both parts need to draw a plan. */\ninterface PlanDisplayProps {\n  /** The currency the prices are shown in (§2.6). */\n  currency: BillingCurrency;\n  /** The period the prices are shown for. */\n  interval: BillingInterval;\n  /** The app's name of each limit's dimension (\"Budgets\"). A dimension without one is\n   *  shown by its key. */\n  dimensionLabels?: Readonly<Record<string, string>>;\n  /** How a limit's figure is written — kastlan's storage is bytes (`formatFileSize`).\n   *  Default: a number in the kit's locale. */\n  formatLimit?: (dimension: string, value: number) => string;\n  /** Over the provider's locale. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\nexport interface PlanCardProps\n  extends Omit<ChoiceCardProps, \"type\" | \"title\" | \"description\" | \"icon\" | \"indeterminate\" | \"value\" | \"labels\">,\n    PlanDisplayProps {\n  plan: BillingPlan;\n  /** See {@link PlanRelation}. `current` draws the \"Current plan\" chip — a word in the\n   *  card's name, never a colour alone. */\n  relation?: PlanRelation;\n  /**\n   * The provider's own localised price in place of the catalogue's figure (§12.17) — a\n   * Merchant of Record's price preview for the buyer's country, tax included. The period\n   * and \"VAT included\" stay: the law asks for a gross price, and the card says so.\n   */\n  pricePreview?: ReactNode;\n}\n\n/** A list from spans (`role=\"list\"`): the card is a `<label>`, which may hold phrasing\n *  content only, so a `<ul>` there would be invalid HTML. */\nfunction SpanList({ name, items, icon }: { name: string; items: ReactNode[]; icon: ReactNode }) {\n  if (items.length === 0) return null;\n  return (\n    <span role=\"list\" aria-label={name} className=\"block space-y-1\">\n      {items.map((item, i) => (\n        <span role=\"listitem\" key={i} className=\"flex items-start gap-1.5 text-secondary\">\n          <span aria-hidden className=\"mt-[0.0625rem] flex shrink-0 text-muted [&_svg]:size-3.5\">\n            {icon}\n          </span>\n          <span className=\"min-w-0\">\n            {item}\n            {/* A space between the items' texts in the flattened description. */}{\" \"}\n          </span>\n        </span>\n      ))}\n    </span>\n  );\n}\n\n/**\n * One plan as a {@link ChoiceCard} radio (§7): the name (and \"Current plan\"), the GROSS\n * price in the chosen currency and period through `formatMoney` (\"CHF 49 per year, VAT\n * included\", §12.17), the limits (\"Budgets: 3\", \"Seats: Unlimited\") and the app's feature\n * lines. A plan with prices but none for this currency and period is shown, \"Not offered\n * for this billing period\", and cannot be picked.\n *\n * A radio of a set: give the cards one `name`, or use {@link PlanPicker}, which does that\n * and owns the choice. Everything else a `ChoiceCard` takes goes to it — `checked`,\n * `onCheckedChange`, `name`, `className`. Carries `data-plan` and `data-relation`.\n */\nexport function PlanCard({\n  // The radio `<input>` (ChoiceCard's): a React 19 ref prop since 0.34 (MOD-4, refactor\n  // audit 2026-10), where this was `forwardRef`.\n  ref,\n  plan,\n  relation,\n  pricePreview,\n  currency,\n  interval,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n  disabled,\n  ...rest\n}: PlanCardProps) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const locale = useKitLocale(localeProp);\n  const price = planPrice(plan.prices, currency, interval);\n\n  const priced = price.kind === \"price\";\n  const figure = priced\n    ? pricePreview !== undefined && pricePreview !== null\n      ? pricePreview\n      : formatPlanPrice(price.minor, currency, { locale })\n    : price.kind === \"free\"\n      ? labels.free\n      : labels.notOffered;\n\n  const limitLines = Object.entries(plan.limits ?? {}).map(([dimension, value]) => {\n    const name = dimensionLabels?.[dimension] ?? dimension;\n    const shown =\n      value === null ? labels.unlimited : formatLimit ? formatLimit(dimension, value) : formatNumber(value, { locale });\n    return common.fieldValue(name, shown);\n  });\n\n  const body = (\n    <span className=\"mt-1 block space-y-2\">\n      <span className=\"block\">\n        <span\n          data-part=\"price\"\n          className={cn(\n            \"tabular-nums\",\n            price.kind === \"not-offered\"\n              ? \"text-xs text-muted\"\n              : \"text-lg font-semibold leading-tight text-primary\",\n          )}\n        >\n          {figure}\n        </span>\n        {priced && (\n          <>\n            {\" \"}\n            <span className=\"text-xs text-secondary\">\n              {interval === \"year\" ? labels.perYear : labels.perMonth}\n            </span>{\" \"}\n            <span className=\"block text-xs text-muted\">{labels.vatIncluded}</span>\n          </>\n        )}{\" \"}\n      </span>\n      {plan.description !== undefined && plan.description !== null && (\n        <span className=\"block text-secondary\">{plan.description} </span>\n      )}\n      <SpanList name={labels.limits} items={limitLines} icon={<Gauge />} />\n      <SpanList name={labels.features} items={[...(plan.features ?? [])]} icon={<Check />} />\n    </span>\n  );\n\n  return (\n    <ChoiceCard\n      ref={ref}\n      {...rest}\n      type=\"radio\"\n      value={plan.code}\n      disabled={disabled || plan.disabled || price.kind === \"not-offered\"}\n      data-plan={plan.code}\n      data-relation={relation}\n      title={\n        <>\n          {plan.name}\n          {relation === \"current\" && (\n            <>\n              {\" \"}\n              <Chip size=\"xs\" tone=\"brand\" shape=\"square\" caps className=\"ms-1 align-[0.0625rem]\">\n                {labels.current}\n              </Chip>\n            </>\n          )}\n        </>\n      }\n      description={body}\n    />\n  );\n}\n\n/** What {@link PlanPickerProps.onChoose} is handed: everything `POST /billing/checkout`\n *  takes (§4). */\nexport interface PlanChoice {\n  plan: string;\n  interval: BillingInterval;\n  currency: BillingCurrency;\n}\n\nexport interface PlanPickerProps extends Omit<PlanDisplayProps, \"currency\" | \"interval\"> {\n  /** The catalogue, in its order (`PlanSpec.sort`): cheapest first. The order decides\n   *  upgrade and downgrade. */\n  plans: readonly BillingPlan[];\n  /**\n   * The plan the payer pays for now (`plan` of the overview while `active` or\n   * `past_due`). Leave it out during a trial and after a plan ended: then every plan is\n   * \"Choose …\", the trial's plan included, since none is paid for yet.\n   */\n  current?: string | null;\n  /** The picked plan, controlled. `null` while none is. */\n  value?: string | null;\n  /** The picked plan, uncontrolled. Default: `current`, else nothing. */\n  defaultValue?: string | null;\n  onValueChange?: (plan: string) => void;\n  /** The period, controlled. */\n  interval?: BillingInterval;\n  /** The period, uncontrolled. Default `year` — lead with yearly (§12.17). */\n  defaultInterval?: BillingInterval;\n  onIntervalChange?: (interval: BillingInterval) => void;\n  /** The currency, controlled. */\n  currency?: BillingCurrency;\n  /** The currency, uncontrolled. Default: the account's stored currency is the app's to\n   *  pass here (§12.18); without it, {@link billingCurrencyFor} the kit's locale. */\n  defaultCurrency?: BillingCurrency;\n  onCurrencyChange?: (currency: BillingCurrency) => void;\n  /** The currencies the payer may switch between. Default: every currency a plan has a\n   *  price in. The switch shows only for more than one. */\n  currencies?: readonly BillingCurrency[];\n  /** The button: the app starts its checkout (`POST /billing/checkout`, then off to the\n   *  provider's page). The kit sends no request. */\n  onChoose: (choice: PlanChoice) => void;\n  /** The checkout is being opened: the button's spinner, no second press. */\n  pending?: boolean;\n  /**\n   * 0.42 (§16.2 decision 5, §16.8 B): the payer's free grant runs without an end —\n   * `isPermanentGrant(overview)`. A purchase under it changes nothing the payer gets\n   * while the grant runs (§12.11), so the button first opens a confirm —\n   * `grantWarningTitle`, `grantWarningBody`, \"Buy anyway\" (`grantWarningAction`) and\n   * \"Back\" — and {@link onChoose} runs only on \"Buy anyway\". Warned, not refused.\n   *\n   * Not while {@link switching}: then the pick opens `PlanSwitchConfirm`, which takes\n   * the same `permanentGrant` and shows the warning above its figures — one warning,\n   * in the dialog where the payer agrees, rather than a confirm before a confirm.\n   */\n  permanentGrant?: boolean;\n  /**\n   * 0.42: the overview's `switching` — the app sends this pick to `PlanSwitchConfirm`\n   * (§15.2.10), not the checkout. Only decides where {@link permanentGrant}'s warning\n   * shows; the button and {@link onChoose} are the same either way.\n   */\n  switching?: boolean;\n  /** The provider's localised price for a plan, or `undefined` for the catalogue's —\n   *  see {@link PlanCardProps.pricePreview}. */\n  pricePreview?: (plan: BillingPlan, choice: Omit<PlanChoice, \"plan\">) => ReactNode | undefined;\n  /** A visible question over the cards. Without one the set is named \"Plans\". */\n  legend?: ReactNode;\n  /** Shared by the radios. Generated if omitted. */\n  name?: string;\n  /** Classes for the whole picker. */\n  className?: string;\n  /** Classes for the card grid. Default: one column, two from `sm`, three from `lg`. */\n  gridClassName?: string;\n  /** Classes for every card. */\n  cardClassName?: string;\n}\n\n/** Every currency some plan has a price in, CHF first. */\nfunction pricedCurrencies(plans: readonly BillingPlan[]): BillingCurrency[] {\n  const found = new Set<BillingCurrency>();\n  for (const p of plans) for (const c of Object.keys(p.prices ?? {})) found.add(c as BillingCurrency);\n  return ([\"CHF\", \"EUR\"] as const).filter((c) => found.has(c));\n}\n\n/** Every period some plan has a price for, yearly first. */\nfunction pricedIntervals(plans: readonly BillingPlan[]): BillingInterval[] {\n  const found = new Set<BillingInterval>();\n  for (const p of plans)\n    for (const byInterval of Object.values(p.prices ?? {}))\n      for (const [k, v] of Object.entries(byInterval ?? {})) if (typeof v === \"number\") found.add(k as BillingInterval);\n  return BILLING_INTERVALS.filter((i) => found.has(i));\n}\n\n/**\n * The plans to choose from (§7): the period switch — yearly first (§12.17) — and, where\n * the payer may pay in either, the currency switch (§2.6); a {@link PlanCard} per plan in\n * a radio set; and one button that says what pressing it does: \"Upgrade to Pro\", \"Switch\n * to Free\", or \"Choose Pro\" with no plan paid for yet.\n *\n * One button under the set rather than one per card: each card IS a radio — a `<label>`\n * round an `<input>` — and a button inside a label is interactive content inside\n * interactive content. Picking and committing are two steps anyway: the price under the\n * picked card is what checkout will charge.\n *\n * The button never takes the write lock: billing itself always works, a read-only payer\n * must be able to pay (§3.3). It is off, with the reason on hover and focus, while\n * nothing is picked or the current plan is.\n *\n * 0.42 (§16.8 B): under a grant without an end (`permanentGrant`) the payer is warned\n * before paying for a plan that won't apply — here, in a confirm before `onChoose`, on\n * the way to the checkout; on the way to a switch (`switching`) in `PlanSwitchConfirm`\n * instead, so the warning shows once on either path.\n */\nexport function PlanPicker({\n  plans,\n  current,\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  interval: intervalProp,\n  defaultInterval = \"year\",\n  onIntervalChange,\n  currency: currencyProp,\n  defaultCurrency,\n  onCurrencyChange,\n  currencies: currenciesProp,\n  onChoose,\n  pending,\n  permanentGrant = false,\n  switching = false,\n  pricePreview,\n  legend,\n  name,\n  className,\n  gridClassName,\n  cardClassName,\n  dimensionLabels,\n  formatLimit,\n  locale: localeProp,\n  labels: labelsProp,\n}: PlanPickerProps) {\n  const labels = useBillingLabels(labelsProp);\n  const locale = useKitLocale(localeProp);\n  const generated = useId();\n  /** The choice the grant warning holds back until \"Buy anyway\". */\n  const [warned, setWarned] = useState<PlanChoice | null>(null);\n  const groupName = name ?? generated;\n  const legendId = `${generated}-legend`;\n\n  const [ownValue, setOwnValue] = useState<string | null>(() => defaultValue ?? current ?? null);\n  const [ownInterval, setOwnInterval] = useState<BillingInterval>(defaultInterval);\n  const [ownCurrency, setOwnCurrency] = useState<BillingCurrency>(\n    () => defaultCurrency ?? billingCurrencyFor(locale),\n  );\n  const value = valueProp !== undefined ? valueProp : ownValue;\n  const interval = intervalProp ?? ownInterval;\n  const currency = currencyProp ?? ownCurrency;\n\n  const pick = (code: string) => {\n    if (valueProp === undefined) setOwnValue(code);\n    onValueChange?.(code);\n  };\n  const setInterval = (next: BillingInterval) => {\n    if (intervalProp === undefined) setOwnInterval(next);\n    onIntervalChange?.(next);\n  };\n  const setCurrency = (next: BillingCurrency) => {\n    if (currencyProp === undefined) setOwnCurrency(next);\n    onCurrencyChange?.(next);\n  };\n\n  const currencies = currenciesProp ?? pricedCurrencies(plans);\n  const intervals = pricedIntervals(plans);\n  const picked = value ? plans.find((p) => p.code.toLowerCase() === value.toLowerCase()) : undefined;\n  const relation = picked ? planRelation(plans, picked.code, current) : undefined;\n  const pickedPrice = picked ? planPrice(picked.prices, currency, interval) : undefined;\n\n  const buttonText = !picked\n    ? labels.choosePlan\n    : relation === \"upgrade\"\n      ? labels.upgrade(picked.name)\n      : relation === \"downgrade\"\n        ? labels.downgrade(picked.name)\n        : labels.choose(picked.name);\n  const blocked = !picked\n    ? labels.pickFirst\n    : relation === \"current\"\n      ? labels.isCurrent\n      : pickedPrice?.kind === \"not-offered\"\n        ? labels.notOffered\n        : undefined;\n\n  return (\n    <div className={cn(\"min-w-0 space-y-3\", className)} data-billing-interval={interval} data-billing-currency={currency}>\n      {(intervals.length > 1 || currencies.length > 1) && (\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {intervals.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.interval}\n              // Content-wide, so the two switches share a row and wrap only when narrow.\n              className=\"w-auto\"\n              options={intervals.map((i) => ({ value: i, label: i === \"year\" ? labels.yearly : labels.monthly }))}\n              value={interval}\n              onChange={setInterval}\n            />\n          )}\n          {currencies.length > 1 && (\n            <ToggleGroup\n              aria-label={labels.currency}\n              className=\"w-auto\"\n              options={currencies.map((c) => ({ value: c, label: c }))}\n              value={currency}\n              onChange={setCurrency}\n            />\n          )}\n        </div>\n      )}\n      <fieldset\n        className=\"min-w-0\"\n        aria-labelledby={legend !== undefined ? legendId : undefined}\n        aria-label={legend === undefined ? labels.plans : undefined}\n      >\n        {legend !== undefined && (\n          <legend id={legendId} className=\"mb-2 text-sm font-medium text-primary\">\n            {legend}\n          </legend>\n        )}\n        <div className={cn(\"grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3\", gridClassName)}>\n          {plans.map((plan) => (\n            <PlanCard\n              key={plan.code}\n              plan={plan}\n              name={groupName}\n              currency={currency}\n              interval={interval}\n              relation={planRelation(plans, plan.code, current)}\n              pricePreview={pricePreview?.(plan, { interval, currency })}\n              checked={picked?.code === plan.code}\n              onCheckedChange={(on) => on && pick(plan.code)}\n              dimensionLabels={dimensionLabels}\n              formatLimit={formatLimit}\n              locale={locale}\n              labels={labelsProp}\n              className={cardClassName}\n            />\n          ))}\n        </div>\n      </fieldset>\n      <div className=\"flex justify-end\">\n        <Button\n          type=\"button\"\n          variant=\"default\"\n          className=\"max-sm:w-full\"\n          disabledReason={blocked}\n          pending={pending}\n          onClick={() => {\n            if (!picked) return;\n            const choice = { plan: picked.code, interval, currency };\n            if (permanentGrant && !switching) setWarned(choice);\n            else onChoose(choice);\n          }}\n        >\n          {buttonText}\n        </Button>\n      </div>\n      {permanentGrant && !switching && (\n        <GrantWarningConfirm\n          open={warned !== null}\n          onOpenChange={(open) => {\n            if (!open) setWarned(null);\n          }}\n          onConfirm={() => {\n            if (warned) onChoose(warned);\n          }}\n          labels={labelsProp}\n        />\n      )}\n    </div>\n  );\n}\n\nexport interface GrantWarningConfirmProps {\n  /** Shown, controlled. */\n  open: boolean;\n  /** `false` on \"Back\", Escape, the backdrop — and after \"Buy anyway\". */\n  onOpenChange: (open: boolean) => void;\n  /** \"Buy anyway\": the app opens its checkout. The dialog closes itself after it. */\n  onConfirm: () => void;\n  /** Prop > `<UiKitProvider labels={{ billing }}>` > English: `grantWarningTitle`,\n   *  `grantWarningBody`, `grantWarningAction`. \"Back\" is `common.back`. */\n  labels?: LabelOverride<BillingLabels>;\n}\n\n/**\n * 0.42 (§16.8 B): the permanent-grant warning before a checkout — `grantWarningTitle`,\n * `grantWarningBody`, \"Back\" and \"Buy anyway\" (`grantWarningAction`). {@link PlanPicker}\n * shows it itself under `permanentGrant` when not `switching`. Exported for the path the\n * picker cannot see: an app that meant to switch, learned there is no subscription to\n * switch (keksdose: `/billing/plan/preview` → 409 `billing_not_subscribed`) and falls back\n * to a checkout — show this before that checkout, so a permanent-grant holder is still\n * warned. Carries `data-grant-warning`.\n */\nexport function GrantWarningConfirm({ open, onOpenChange, onConfirm, labels: labelsProp }: GrantWarningConfirmProps) {\n  const labels = useBillingLabels(labelsProp);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  return (\n    <DialogFrame\n      open={open}\n      title={labels.grantWarningTitle}\n      description={labels.grantWarningBody}\n      onClose={() => onOpenChange(false)}\n      data-grant-warning=\"\"\n      actions={(close) => (\n        <>\n          <Button variant=\"secondary\" onClick={close}>\n            {common.back}\n          </Button>\n          <Button\n            variant=\"default\"\n            onClick={() => {\n              onConfirm();\n              onOpenChange(false);\n            }}\n          >\n            {labels.grantWarningAction}\n          </Button>\n        </>\n      )}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

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

@@ -3,9 +3,10 @@ import { type CalculatorButtonLabels } from "./calculator.js";
 import { type NumberPadSheetLabels } from "./numpad-sheet.js";
 import { type DisabledReasonDisplay, type FieldHelpProps } from "./field-parts.js";
 import type { CommitScope } from "./write-lock.js";
+import { type DataAttributes } from "../lib/data-attributes.js";
 /** {@link AmountInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a
  *  wrapper typed itself off `ComponentProps<typeof AmountInput>` until then. */
-export interface AmountInputProps extends FieldHelpProps {
+export interface AmountInputProps extends FieldHelpProps, DataAttributes {
     value: string;
     onChange: (value: string) => void;
     currency?: string;

package/dist/components/amount-input.js

@@ -37,6 +37,7 @@ import {
   mergeRefs
 } from "./field-parts.js";
 import { useEndWidth, useNumericField } from "./numeric-field.js";
+import { dataAttributes } from "../lib/data-attributes.js";
 function settleAmount(text, digits, min, max) {
   const t = text.trim();
   if (!/^-?\d*\.?\d*$/.test(t) || !/\d/.test(t)) return text;
@@ -76,7 +77,7 @@ function AmountInput(props) {
   });
   const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, draft, setDraft, derived } = numeric;
   const invalid = numeric.isInvalid;
-  const editable = !!onCurrencyChange && !locked;
+  const editable = !!onCurrencyChange && !locked && !off;
   const hasEnd = showCalc || Boolean(currency);
   const [endRef, endWidth] = useEndWidth(hasEnd);
   const trailingRoom = asDisplay ? currency ? editable ? "pe-16" : "pe-12" : void 0 : showCalc ? currency ? editable ? "pe-24" : "pe-16" : "pe-10" : currency ? editable ? "pe-20" : "pe-14" : void 0;
@@ -120,7 +121,7 @@ function AmountInput(props) {
   const currencyText = useKitLabels("currency", DEFAULT_CURRENCY_LABELS, currencyOverrides);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const selected = getCurrency(currency);
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ...dataAttributes(props), className: cn("w-full", className), children: [
     /* @__PURE__ */ jsx(LockedOrNot, { lock, display: disabledReasonDisplay, children: /* @__PURE__ */ jsxs(
       FloatingField,
       {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { useId, useMemo, useRef } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { CurrencyOptionList, getCurrency } from \"./currency-option-list\";\nimport { useComboboxCore } from \"./combobox-core\";\nimport {\n  FIELD_BASE,\n  FIELD_DISPLAY,\n  FIELD_INVALID,\n  FLOATING_INPUT_CLASS,\n  FloatingField,\n} from \"./field-base\";\nimport { cn } from \"../lib/cn\";\nimport { currencyMinorDigits } from \"../lib/format\";\nimport { roundHalfAway } from \"../lib/round\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\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\";\nimport {\n  FieldCaption,\n  LockedReason,\n  mergeRefs,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n  type LockReason,\n} from \"./field-parts\";\nimport { useEndWidth, useNumericField } from \"./numeric-field\";\nimport type { CommitScope } from \"./write-lock\";\n\n/** {@link AmountInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a\n *  wrapper typed itself off `ComponentProps<typeof AmountInput>` until then. */\nexport interface AmountInputProps extends FieldHelpProps {\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  /**\n   * What is wrong with the amount, in the caller's own words — {@link Input}'s `error`\n   * (keksdose K4: \"exceeds the outstanding balance\" was a loose `<p>` beside the field\n   * that nothing pointed at). Rendered under the field, after a text `hint`; merged into\n   * `aria-describedby` after the caller's ids and the hint's; implies `invalid`, so the\n   * field paints as well as announces. `null`, `false` and `\"\"` are no message.\n   * {@link MoneyField} takes it too.\n   */\n  error?: ReactNode;\n  /**\n   * Show the desktop calculator trigger (default `true`). `false` for an amount in an\n   * ephemeral close-on-blur editor — a budget's assigned cell, a VAT cell (keksdose K6)\n   * — where a click on the icon blurs the field and tears the editor down before the\n   * popover can open. Typing a calculation (\"200+50\", then Enter) still evaluates, and\n   * a phone keeps its numpad, exactly as {@link NumberInput}'s `calculator={false}`.\n   */\n  calculator?: boolean;\n  /** The field's WRAPPER — width, a margin, a flex share. The `<input>` is\n   *  `inputClassName`'s. */\n  className?: string;\n  /**\n   * Classes for the `<input>` itself — {@link NumberInput}'s and {@link Input}'s prop of\n   * the same name, merged the same way: after everything the field sets for LOOKS — the\n   * base classes, the plain end padding, the display shape's centring and the `tone`\n   * colour — so it can restyle the figure (`text-end` for a money column whose decimal\n   * points line up, `font-medium`, a tighter `py-1` or a symmetric `px-2` in a table\n   * cell, `text-transparent` while a figure is being re-fetched), and before what the\n   * field needs to WORK: the end padding the calculator and the currency chip reserve,\n   * and the invalid border. Neither of those can be taken away by accident — a caller's\n   * `px-2` keeps its start edge and the digits still stop short of the chip, and a\n   * borderless cell's `border-transparent` still turns red when the value is wrong.\n   *\n   * keksdose G7: the invoice's VAT cell right-aligns its figure, and with only\n   * `className` (the wrapper) it reached the element through `[&_input]:text-end` — a\n   * descendant selector that depends on the field's inner markup, which the kit is free\n   * to change, and that a reader of the call site has to decode. {@link MoneyField}\n   * passes it through, and `RhfMoneyField` takes it too.\n   *\n   * keksdose 0.24: until then it sat BEFORE the plain end padding (`pe-3`) and the tone,\n   * so the budget's assigned cell could not make its padding symmetric (`px-2` came out\n   * `px-2 pe-3`) and the holdings price could not hide an outflow-toned figure while\n   * re-fetching — both were back on `[&_input]:` selectors on the wrapper.\n   */\n  inputClassName?: string;\n  id?: string;\n  /** Names the field when it has no visible `label` (a table cell, the display shape). */\n  \"aria-label\"?: 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  /**\n   * BCP 47 tag for this field — {@link NumberInput}'s `locale` (0.34, DUP-10): the decimal\n   * mark the field SHOWS and reads typing in (\"1,5\" for fr-CH, \"1.5\" for de-CH, as `Intl`\n   * decides), and the language of the currency picker's search. Default the\n   * `<UiKitProvider locale>`, else the runtime's. `value` and `onChange` stay\n   * dot-decimal.\n   */\n  locale?: string;\n  /** {@link NumberInput}'s `hint`, the same rule: a {@link FieldHint} \"?\" rides the\n   *  label's own line, beside the label (not at the far end, where the calculator and\n   *  the currency chip live); plain TEXT (a string or a number) is a caption UNDER\n   *  the field, attached through `aria-describedby` after the caller's own. A phone's\n   *  `variant=\"display\"` has no visible label, so a FieldHint is dropped there; a\n   *  caption still shows.\n   *\n   *  Since 0.34 a FieldHint is that caption at Large and on a touch screen, as on\n   *  NumberInput since 0.32 (`useInlineHint`, docs/text-size-harmonization.md §4: a fact\n   *  a finger cannot hover open is printed). A `HelpPopover` — help, not a fact (§10.23)\n   *  — stays on the label line at every size. */\n  hint?: ReactNode;\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  /** Offer only these ISO codes in the chip's list, in this order — `CurrencySelect`'s\n   *  `options`, since the chip renders CurrencySelect's list (round 0.34 Wave 2, DUP-4).\n   *  Default every currency the kit knows. */\n  currencyOptions?: 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   * Since 0.15.5 it is drawn on its own too, for a read-only or disabled signed figure\n   * (an \"Items total\" of −5.18): no `onNegativeChange` needed just to show the minus.\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   * Decimals the committed amount is rounded to (kastlan 0.12: \"12.345\" and a\n   * calculator's \"100/3\" reached a `Numeric(10,2)` column unrounded and failed with a\n   * 422). Default: the currency's minor unit, from `Intl` (CHF and EUR 2, JPY 0). With\n   * no `currency`, nothing is rounded unless this is set. Rounding is half away from\n   * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on\n   * blur, on Enter, and on every result the calculator writes back. Keystrokes are left\n   * alone, so \"12.3\" can still become \"12.34\".\n   *\n   * ⚠️ **A unit price or a rate needs `digits`.** The default is right for an amount of\n   * money and silently wrong for a price per unit: a fund's NAV of 123.4567 or fuel at\n   * 1.789 €/l is stored as 123.46 / 1.79, and no test fails (keksdose G2, a\n   * `Numeric(18,6)` holding price and a `Numeric(18,4)` unit price). Pass the column's\n   * scale: `digits={4}`, `digits={6}`.\n   *\n   * **Set `digits` for any sub-currency scale** — not only a price: any field whose\n   * column holds more decimals than the currency's minor unit. A split line stored at\n   * the ledger's 4dp (`Numeric(18,4)`) and loaded as 12.3456 is SHOWN as 12.35, and\n   * committed as 12.35 as soon as the user tabs through it (blur settles) — so the form\n   * no longer equals what the server holds: the lines stop summing to the 4dp total,\n   * and Save is held (keksdose live #240). With a `currency`, every commit rounds to that currency's\n   * minor unit unless `digits` says otherwise: pass the column's scale (`digits={4}`).\n   */\n  digits?: number;\n  /** The smallest amount the field settles on. A lower figure is raised to it when it\n   *  settles, like `digits`. Compared with the signed figure. */\n  min?: number;\n  /** The largest amount the field settles on (a deposit release capped at the\n   *  balance). A higher figure is lowered to it when it settles. */\n  max?: number;\n  /**\n   * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the\n   * numpad's \"=\" and on every result the calculator writes back, never on a keystroke\n   * (\"1200+\" is not a figure yet). `onChange` still reports every keystroke; this is\n   * for a host that stores a number and must not see drafts (kastlan 52; see\n   * {@link MoneyField}, which is built on it).\n   */\n  onCommit?: (value: string) => void;\n  /**\n   * Why the amount cannot be changed — {@link NumberInput}'s `disabledReason` (0.34,\n   * round 0.34 C2), for an amount that SAVES itself: a budget row's assigned cell, a\n   * price committed on blur. `disabled` takes the field out of the tab order, so the\n   * reason never reached a keyboard.\n   *\n   * With a reason the field stays in the tab order and shows its figure, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`. Nothing\n   * changes the amount: the calculator and the phone's numpad are not offered, the\n   * currency chip is a read-out rather than a picker, and neither blur nor Enter\n   * settles — so `onChange`, `onCommit`, `onNegativeChange` and `onCurrencyChange` are\n   * never called. Enter is swallowed, so the field does not submit the form around it.\n   * The reason is a line under the field at Large and on a touch screen, else in the kit\n   * {@link Tooltip} (`disabledReasonDisplay`), and on the input's `aria-describedby`,\n   * between the caption and the error. Wins over `disabled`. {@link MoneyField} and\n   * `RhfMoneyField` take it too.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This amount COMMITS — {@link Button}'s `commit`, NumberInput's: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). An amount that only reaches the server through its form's\n   * Save leaves this off and stays editable under the lock; the Save takes `commit`. No\n   * provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n\n/**\n * A settled figure, rounded to `digits` (half away from zero) and clamped to\n * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression\n * comes back as it was. Rounding is `lib/round.ts`'s, shared with `roundToCurrency`\n * (BUG-11: this copy blanked \"0.0000001\" and a 22-digit figure on blur).\n */\nfunction settleAmount(text: string, digits: number | undefined, min?: number, max?: number): string {\n  const t = text.trim();\n  if (!/^-?\\d*\\.?\\d*$/.test(t) || !/\\d/.test(t)) return text;\n  let n = Number(t);\n  if (!Number.isFinite(n)) return text;\n  if (digits !== undefined) n = roundHalfAway(n, digits);\n  if (min !== undefined && n < min) n = min;\n  if (max !== undefined && n > max) n = max;\n  const out = formatResult(n);\n  // Unchanged figures keep their own spelling (\"12.50\" stays \"12.50\").\n  return Number(out) === Number(t) ? text : out;\n}\n\n// The locale's decimal mark and the grouping parse (kastlan 40, keksdose G1) live in\n// `lib/decimal-marks.ts`, read through the engine NumberInput and this field share\n// (`numeric-field.ts`, DUP-10).\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, settle: (text: string) => string): boolean {\n  const n = evaluateExpression(previous);\n  // Compared settled, since the field rounds what the calculator hands it.\n  return n !== null && settle(formatResult(n)) === text.trim();\n}\n\nexport function AmountInput(props: AmountInputProps) {\n  const { ref, value, onChange, currency, onCurrencyChange, placeholder, label, className, inputClassName, id, \"aria-label\": ariaLabel, \"aria-required\": ariaRequired, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, align = \"start\", labels, currencyNames, currencyOptions, digits: digitsProp, min, max, onCommit, disabledReasonDisplay } = props;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\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  // The sign is DRAWN whenever `negative` says so, handler or not (keksdose live #366):\n  // a read-only or disabled total (\"−5.18\") used to need a dummy `onNegativeChange`\n  // just to show its minus. Without the handler there is nothing to toggle — a typed\n  // minus simply stays in the text, as in any field without a direction control.\n  const shown = negative && isBareAmount(value) ? `-${value}` : value;\n  // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a\n  // fr-CH user typed \"1,5\" and watched it turn into \"1.5\" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all\n  // stay dot-decimal, because that string is the contract: RhfMoneyField's\n  // `parseAmount`, every app's `Number(value)` and the calculator's evaluator read\n  // it. The way back is free: {@link sanitizeLive} already folds a typed \",\" into\n  // \".\", so a comma typed, pasted or tapped on the numpad lands as a dot.\n  //\n  // One character for one character, and no digit grouping: the caret stays where\n  // the typist put it, and \"1.000\" cannot be read back as a thousand in one locale\n  // and as one in the other. de-CH and it-CH are \".\" — CLDR says so, and this\n  // follows `Intl` rather than a guess about a country. The field's own `locale`,\n  // else the provider's (0.34, DUP-10).\n  const locale = useKitLocale(props.locale);\n  // Decimals the figure settles to: `digits`, else the currency's minor unit.\n  const digits = digitsProp ?? currencyMinorDigits(currency);\n  const settle = (text: string) => settleAmount(text, digits, min, max);\n  // The engine NumberInput shares (DUP-10): the lock (focusable, `readOnly`, nothing\n  // changes or settles — see `disabledReason`), the hint — a FieldHint is its words at\n  // Large and on touch, §4 — the error, the description's order, the typist's draft\n  // in the locale's mark, the calculator and the numpad. On a phone the OS keyboard\n  // is suppressed for the numpad sheet (feedback #334), and the display shape keys off\n  // the SAME phone layout, so the two can never drift apart on the breakpoint.\n  //\n  // A value the HOST set (not one typed here) is shown at the currency's minor unit\n  // while the field is not being edited: an FX estimate of 93.4213 showed four\n  // decimals (keksdose live #356). Display only — `value` is the host's, untouched.\n  const numeric = useNumericField(props, {\n    settle,\n    display: (focused) => (focused ? shown : settleAmount(shown, digits)),\n  });\n  const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, draft, setDraft, derived } =\n    numeric;\n  const invalid = numeric.isInvalid;\n  // A locked chip is a read-out: picking a currency is a change too.\n  const editable = !!onCurrencyChange && !locked;\n  // Room for the trailing controls — the calculator and the currency chip — once\n  // measured, as NumberInput reserves its own (keksdose live #367, DUP-10): their\n  // width, the track's `end-1` inset in the boxed shape, and NumberInput's 4px gap.\n  // Before that (the first paint, and wherever there is no layout) the classes below\n  // stand in. showCalc is always false on a phone, so the display shape only has to\n  // clear the chip, by its own width rather than the boxed shape's room (feedback #430\n  // rework: on a 375px screen 16px decide between a readable figure and a clipped one).\n  const hasEnd = showCalc || Boolean(currency);\n  const [endRef, endWidth] = useEndWidth(hasEnd);\n  const trailingRoom = asDisplay\n    ? currency ? (editable ? \"pe-16\" : \"pe-12\") : undefined\n    : showCalc\n      ? currency ? (editable ? \"pe-24\" : \"pe-16\") : \"pe-10\"\n      : currency ? (editable ? \"pe-20\" : \"pe-14\") : undefined;\n  const innerRef = useRef<HTMLInputElement>(null);\n  const setRefs = useMemo(() => mergeRefs(innerRef, ref), [ref]);\n  // While the typist is typing, the field shows THEIR text (\"1.234,5\" stays exactly\n  // that), not the value re-spelt: re-spelling turned a grouping \".\" into a \",\" under\n  // their fingers, after which no rule could tell the two apart (keksdose G1). The\n  // draft only while it says what the field holds AND holds nothing the live\n  // sanitising would drop — a letter, a second decimal point (see `showsTyped`); a\n  // value set from outside, a calculator result or a commit shows the derived spelling.\n  const display =\n    draft === null\n      ? derived\n      : (numeric.typedFor(shown) ??\n        // The caller owns the sign: the typed \"12\" is shown as the \"-12\" it is.\n        (signOwned && negative && shown.startsWith(\"-\") && numeric.typedFor(shown.slice(1)) !== null\n          ? `-${draft}`\n          : derived));\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, settle)) {\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 = () => {\n    setDraft(null);\n    const settled = settle(commitExpression(shown));\n    handleText(settled);\n    onCommit?.(settled);\n  };\n  const typed = (raw: string) => handleText(numeric.read(raw));\n  // The currency list is CurrencySelect's (round 0.34 Wave 2, DUP-4) on the picker\n  // family's core: the chip was a hand copy of it and had drifted (no wrap at Large, no\n  // `options` subset, no check mark, no listbox id, no #308 width), and both were plain\n  // buttons under a listbox promise. `filter: false`: the list filters its own rows.\n  const core = useComboboxCore<string>({ filter: false, backCloses: true });\n  // `chipRef`: the chip the currency list hangs off (Keksdose dev#548: portalled, so the\n  // panel needs a real trigger rect rather than a relative parent). It is also where\n  // Escape and a pick hand focus back (round 0.34 BUG-1): Safari does not focus a\n  // clicked button, so \"whatever held focus\" is not the chip.\n  const { open, setOpen, closeToTrigger, triggerRef: chipRef } = core;\n  const listboxId = `${generatedId}-currencies`;\n  // A lock arriving while the list is up closes it, as on CountrySelect — adjusted\n  // while rendering, so no frame shows a list that can no longer be used.\n  if (!editable && open) setOpen(false);\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  // The two strings read out first, so the memo depends on them and not on the\n  // caller's `labels` object (a new one every render) — what the React Compiler infers.\n  const currencyLabel = labels?.currency;\n  const currencySearchLabel = labels?.currencySearch;\n  const currencyOverrides = useMemo(() => {\n    const out: Partial<CurrencyLabels> = {};\n    if (currencyLabel !== undefined) out.currency = currencyLabel;\n    if (currencySearchLabel !== undefined) out.search = currencySearchLabel;\n    return out;\n  }, [currencyLabel, currencySearchLabel]);\n  const currencyText = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, currencyOverrides);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n  const selected = getCurrency(currency);\n\n  return (\n    <div 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). It is\n          the kit's FloatingField, which draws the label — floating, or sr-only in\n          the display shape — and puts a FieldHint on the label's line, as it does\n          for NumberInput. */}\n      {/* Locked, the field sits in the reason's frame (LockedReason: the line, or the\n          Tooltip), as NumberInput does; the root above keeps `className`, so nothing\n          reflows. */}\n      <LockedOrNot lock={lock} display={disabledReasonDisplay}>\n      <FloatingField\n        className=\"w-full\"\n        htmlFor={fieldId}\n        label={label}\n        srOnlyLabel={asDisplay}\n        hint={numeric.hint.labelHint}\n      >\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={off}\n        // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n        readOnly={locked || undefined}\n        aria-disabled={locked || undefined}\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={display}\n        onChange={(e) => {\n          if (!locked) typed(e.target.value);\n        }}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          // Nothing settles under the lock — not even a draft typed before it arrived,\n          // which stays in the field for when it lifts.\n          if (!locked) commit();\n          setFocused(false);\n        }}\n        onKeyDown={(e) => {\n          if (e.key !== \"Enter\") return;\n          // Locked: Enter submits no form and settles nothing.\n          if (locked) e.preventDefault();\n          else 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          // The plain end padding, with nothing trailing: cosmetic, so the caller's\n          // to change (keksdose 0.24 — a symmetric `px-2` in a budget cell).\n          !trailingRoom && (asDisplay ? \"pe-0\" : \"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 below 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          // Over the base class's own text colour.\n          TONE_CLASS[tone],\n          // The caller's, over all of the above — base, plain padding, alignment and\n          // tone — and under only what the field needs to work (see `inputClassName`).\n          inputClassName,\n          // Room for the trailing controls, after the caller's so a `px-2` cannot run\n          // the digits under the chip (NumberInput's order, which reserves its unit\n          // and calculator the same way).\n          trailingRoom,\n          invalid && FIELD_INVALID,\n          locked && \"cursor-not-allowed\",\n        )}\n        // The classes above are the fallback; once measured the field reserves exactly\n        // its trailing controls' width, inline so it wins over every class (see\n        // `trailingRoom`).\n        style={hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + (asDisplay ? 4 : 8) } : undefined}\n        aria-invalid={invalid || undefined}\n        aria-describedby={numeric.describedBy}\n        aria-required={ariaRequired}\n      />\n      {/* The label is FloatingField's, after these children (the floating trick\n          reads the input through `peer-*`). The display shape drops it VISUALLY,\n          not from the accessibility tree: a 36px tinted figure at the top of a\n          transaction form is legibly the amount, but a screen reader still needs\n          the name, and callers that pass `label` without `aria-label` would\n          otherwise be left with none. */}\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        // Measured for the input's end padding (see `trailingRoom`).\n        ref={endRef}\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            // The mark the field shows but not the typist's grouping: the evaluator\n            // reads either mark, and \"1.234,5\" is two of them. The result comes back\n            // dot-decimal.\n            value={derived}\n            onChange={(result, expression) => {\n              setDraft(null);\n              const settled = settle(result);\n              handleText(settled, expression);\n              onCommit?.(settled);\n            }}\n            className=\"px-1.5\"\n            aria-label={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-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            // A button that opens a listbox, and says so: the chip is a control inside\n            // a text field, not a field of its own, so not a combobox.\n            aria-haspopup=\"listbox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\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-secondary hover:bg-hover\",\n              asDisplay ? \"text-sm\" : \"text-xs\",\n            )}\n          >\n            {currency}\n            <ChevronDown className=\"size-3\" />\n          </button>\n        )}\n      </div>\n      {editable && (\n        <CurrencyOptionList\n          core={core}\n          listboxId={listboxId}\n          value={currency}\n          codes={currencyOptions}\n          currencyNames={currencyNames}\n          locale={locale}\n          searchPlaceholder={currencyText.search}\n          // The phone sheet's title: what the chip is for.\n          sheetTitle={currencyText.currency}\n          onChoose={(code) => {\n            onCurrencyChange?.(code);\n            closeToTrigger();\n          }}\n        />\n      )}\n      </FloatingField>\n      </LockedOrNot>\n      {/* Outside the relative box, as NumberInput's caption is: the trailing\n          controls are `inset-y-1` in it and would stretch down over a second line. */}\n      <FieldCaption parts={numeric.hint} />\n      {/* The news after the standing advice, as Select orders them. The root is\n          already a steady box, so the message coming and going remounts nothing. */}\n      {numeric.errorEl}\n      {showNumpad && (\n        <NumberPadSheet\n          // Localised like the field it mirrors. Keys are typing, read by the\n          // locale's marks like the keyboard's; \"=\" is a result, dot-decimal.\n          value={display}\n          onChange={typed}\n          onResult={(result) => {\n            setDraft(null);\n            const settled = settle(result);\n            handleText(settled);\n            onCommit?.(settled);\n          }}\n          onDone={() => innerRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n          decimalMark={mark}\n        />\n      )}\n    </div>\n  );\n}\n\n/** The field in its lock's {@link LockedReason} while locked, as it is otherwise. A\n *  component rather than a ternary so the field's JSX is written once. `block w-full`:\n *  the frame's box stands where the field's own did. */\nfunction LockedOrNot({\n  lock,\n  display,\n  children,\n}: {\n  lock: LockReason;\n  display: DisabledReasonDisplay | undefined;\n  children: ReactNode;\n}) {\n  if (!lock.locked) return <>{children}</>;\n  return (\n    <LockedReason lock={lock} display={display} className=\"block w-full\">\n      {children}\n    </LockedReason>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/amount-input.tsx"],"sourcesContent":["import { useId, useMemo, useRef } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport type { ReactNode, Ref } from \"react\";\nimport { CurrencyOptionList, getCurrency } from \"./currency-option-list\";\nimport { useComboboxCore } from \"./combobox-core\";\nimport {\n  FIELD_BASE,\n  FIELD_DISPLAY,\n  FIELD_INVALID,\n  FLOATING_INPUT_CLASS,\n  FloatingField,\n} from \"./field-base\";\nimport { cn } from \"../lib/cn\";\nimport { currencyMinorDigits } from \"../lib/format\";\nimport { roundHalfAway } from \"../lib/round\";\nimport { CalculatorButton, type CalculatorButtonLabels } from \"./calculator\";\nimport { NumberPadSheet, type NumberPadSheetLabels } from \"./numpad-sheet\";\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\";\nimport {\n  FieldCaption,\n  LockedReason,\n  mergeRefs,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n  type LockReason,\n} from \"./field-parts\";\nimport { useEndWidth, useNumericField } from \"./numeric-field\";\nimport type { CommitScope } from \"./write-lock\";\nimport { dataAttributes, type DataAttributes } from \"../lib/data-attributes\";\n\n/** {@link AmountInput}'s props — exported since 0.34 (refactor audit 2026-10, API-9): a\n *  wrapper typed itself off `ComponentProps<typeof AmountInput>` until then. */\nexport interface AmountInputProps extends FieldHelpProps, DataAttributes {\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  /**\n   * What is wrong with the amount, in the caller's own words — {@link Input}'s `error`\n   * (keksdose K4: \"exceeds the outstanding balance\" was a loose `<p>` beside the field\n   * that nothing pointed at). Rendered under the field, after a text `hint`; merged into\n   * `aria-describedby` after the caller's ids and the hint's; implies `invalid`, so the\n   * field paints as well as announces. `null`, `false` and `\"\"` are no message.\n   * {@link MoneyField} takes it too.\n   */\n  error?: ReactNode;\n  /**\n   * Show the desktop calculator trigger (default `true`). `false` for an amount in an\n   * ephemeral close-on-blur editor — a budget's assigned cell, a VAT cell (keksdose K6)\n   * — where a click on the icon blurs the field and tears the editor down before the\n   * popover can open. Typing a calculation (\"200+50\", then Enter) still evaluates, and\n   * a phone keeps its numpad, exactly as {@link NumberInput}'s `calculator={false}`.\n   */\n  calculator?: boolean;\n  /** The field's WRAPPER — width, a margin, a flex share. The `<input>` is\n   *  `inputClassName`'s. */\n  className?: string;\n  /**\n   * Classes for the `<input>` itself — {@link NumberInput}'s and {@link Input}'s prop of\n   * the same name, merged the same way: after everything the field sets for LOOKS — the\n   * base classes, the plain end padding, the display shape's centring and the `tone`\n   * colour — so it can restyle the figure (`text-end` for a money column whose decimal\n   * points line up, `font-medium`, a tighter `py-1` or a symmetric `px-2` in a table\n   * cell, `text-transparent` while a figure is being re-fetched), and before what the\n   * field needs to WORK: the end padding the calculator and the currency chip reserve,\n   * and the invalid border. Neither of those can be taken away by accident — a caller's\n   * `px-2` keeps its start edge and the digits still stop short of the chip, and a\n   * borderless cell's `border-transparent` still turns red when the value is wrong.\n   *\n   * keksdose G7: the invoice's VAT cell right-aligns its figure, and with only\n   * `className` (the wrapper) it reached the element through `[&_input]:text-end` — a\n   * descendant selector that depends on the field's inner markup, which the kit is free\n   * to change, and that a reader of the call site has to decode. {@link MoneyField}\n   * passes it through, and `RhfMoneyField` takes it too.\n   *\n   * keksdose 0.24: until then it sat BEFORE the plain end padding (`pe-3`) and the tone,\n   * so the budget's assigned cell could not make its padding symmetric (`px-2` came out\n   * `px-2 pe-3`) and the holdings price could not hide an outflow-toned figure while\n   * re-fetching — both were back on `[&_input]:` selectors on the wrapper.\n   */\n  inputClassName?: string;\n  id?: string;\n  /** Names the field when it has no visible `label` (a table cell, the display shape). */\n  \"aria-label\"?: 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  /**\n   * BCP 47 tag for this field — {@link NumberInput}'s `locale` (0.34, DUP-10): the decimal\n   * mark the field SHOWS and reads typing in (\"1,5\" for fr-CH, \"1.5\" for de-CH, as `Intl`\n   * decides), and the language of the currency picker's search. Default the\n   * `<UiKitProvider locale>`, else the runtime's. `value` and `onChange` stay\n   * dot-decimal.\n   */\n  locale?: string;\n  /** {@link NumberInput}'s `hint`, the same rule: a {@link FieldHint} \"?\" rides the\n   *  label's own line, beside the label (not at the far end, where the calculator and\n   *  the currency chip live); plain TEXT (a string or a number) is a caption UNDER\n   *  the field, attached through `aria-describedby` after the caller's own. A phone's\n   *  `variant=\"display\"` has no visible label, so a FieldHint is dropped there; a\n   *  caption still shows.\n   *\n   *  Since 0.34 a FieldHint is that caption at Large and on a touch screen, as on\n   *  NumberInput since 0.32 (`useInlineHint`, docs/text-size-harmonization.md §4: a fact\n   *  a finger cannot hover open is printed). A `HelpPopover` — help, not a fact (§10.23)\n   *  — stays on the label line at every size. */\n  hint?: ReactNode;\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  /** Offer only these ISO codes in the chip's list, in this order — `CurrencySelect`'s\n   *  `options`, since the chip renders CurrencySelect's list (round 0.34 Wave 2, DUP-4).\n   *  Default every currency the kit knows. */\n  currencyOptions?: 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   * Since 0.15.5 it is drawn on its own too, for a read-only or disabled signed figure\n   * (an \"Items total\" of −5.18): no `onNegativeChange` needed just to show the minus.\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   * Decimals the committed amount is rounded to (kastlan 0.12: \"12.345\" and a\n   * calculator's \"100/3\" reached a `Numeric(10,2)` column unrounded and failed with a\n   * 422). Default: the currency's minor unit, from `Intl` (CHF and EUR 2, JPY 0). With\n   * no `currency`, nothing is rounded unless this is set. Rounding is half away from\n   * zero (12.345 → 12.35, -12.345 → -12.35) and happens when the figure settles: on\n   * blur, on Enter, and on every result the calculator writes back. Keystrokes are left\n   * alone, so \"12.3\" can still become \"12.34\".\n   *\n   * ⚠️ **A unit price or a rate needs `digits`.** The default is right for an amount of\n   * money and silently wrong for a price per unit: a fund's NAV of 123.4567 or fuel at\n   * 1.789 €/l is stored as 123.46 / 1.79, and no test fails (keksdose G2, a\n   * `Numeric(18,6)` holding price and a `Numeric(18,4)` unit price). Pass the column's\n   * scale: `digits={4}`, `digits={6}`.\n   *\n   * **Set `digits` for any sub-currency scale** — not only a price: any field whose\n   * column holds more decimals than the currency's minor unit. A split line stored at\n   * the ledger's 4dp (`Numeric(18,4)`) and loaded as 12.3456 is SHOWN as 12.35, and\n   * committed as 12.35 as soon as the user tabs through it (blur settles) — so the form\n   * no longer equals what the server holds: the lines stop summing to the 4dp total,\n   * and Save is held (keksdose live #240). With a `currency`, every commit rounds to that currency's\n   * minor unit unless `digits` says otherwise: pass the column's scale (`digits={4}`).\n   */\n  digits?: number;\n  /** The smallest amount the field settles on. A lower figure is raised to it when it\n   *  settles, like `digits`. Compared with the signed figure. */\n  min?: number;\n  /** The largest amount the field settles on (a deposit release capped at the\n   *  balance). A higher figure is lowered to it when it settles. */\n  max?: number;\n  /**\n   * The SETTLED figure, dot-decimal, sign included — fired on blur, on Enter, on the\n   * numpad's \"=\" and on every result the calculator writes back, never on a keystroke\n   * (\"1200+\" is not a figure yet). `onChange` still reports every keystroke; this is\n   * for a host that stores a number and must not see drafts (kastlan 52; see\n   * {@link MoneyField}, which is built on it).\n   */\n  onCommit?: (value: string) => void;\n  /**\n   * Why the amount cannot be changed — {@link NumberInput}'s `disabledReason` (0.34,\n   * round 0.34 C2), for an amount that SAVES itself: a budget row's assigned cell, a\n   * price committed on blur. `disabled` takes the field out of the tab order, so the\n   * reason never reached a keyboard.\n   *\n   * With a reason the field stays in the tab order and shows its figure, `readOnly` (the\n   * settled grey FIELD_BASE gives a `[readonly]` field) and `aria-disabled`. Nothing\n   * changes the amount: the calculator and the phone's numpad are not offered, the\n   * currency chip is a read-out rather than a picker, and neither blur nor Enter\n   * settles — so `onChange`, `onCommit`, `onNegativeChange` and `onCurrencyChange` are\n   * never called. Enter is swallowed, so the field does not submit the form around it.\n   * The reason is a line under the field at Large and on a touch screen, else in the kit\n   * {@link Tooltip} (`disabledReasonDisplay`), and on the input's `aria-describedby`,\n   * between the caption and the error. Wins over `disabled`. {@link MoneyField} and\n   * `RhfMoneyField` take it too.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This amount COMMITS — {@link Button}'s `commit`, NumberInput's: under a locked\n   * {@link WriteLockProvider} it is locked the `disabledReason` way with the lock's reason\n   * (which wins over its own). An amount that only reaches the server through its form's\n   * Save leaves this off and stays editable under the lock; the Save takes `commit`. No\n   * provider, or an unlocked one: no effect.\n   */\n  commit?: CommitScope;\n  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it\n   *  was `forwardRef`. */\n  ref?: Ref<HTMLInputElement>;\n}\n\n\n/**\n * A settled figure, rounded to `digits` (half away from zero) and clamped to\n * `min`/`max`. Only a plain number is touched. A half-typed draft or an expression\n * comes back as it was. Rounding is `lib/round.ts`'s, shared with `roundToCurrency`\n * (BUG-11: this copy blanked \"0.0000001\" and a 22-digit figure on blur).\n */\nfunction settleAmount(text: string, digits: number | undefined, min?: number, max?: number): string {\n  const t = text.trim();\n  if (!/^-?\\d*\\.?\\d*$/.test(t) || !/\\d/.test(t)) return text;\n  let n = Number(t);\n  if (!Number.isFinite(n)) return text;\n  if (digits !== undefined) n = roundHalfAway(n, digits);\n  if (min !== undefined && n < min) n = min;\n  if (max !== undefined && n > max) n = max;\n  const out = formatResult(n);\n  // Unchanged figures keep their own spelling (\"12.50\" stays \"12.50\").\n  return Number(out) === Number(t) ? text : out;\n}\n\n// The locale's decimal mark and the grouping parse (kastlan 40, keksdose G1) live in\n// `lib/decimal-marks.ts`, read through the engine NumberInput and this field share\n// (`numeric-field.ts`, DUP-10).\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, settle: (text: string) => string): boolean {\n  const n = evaluateExpression(previous);\n  // Compared settled, since the field rounds what the calculator hands it.\n  return n !== null && settle(formatResult(n)) === text.trim();\n}\n\nexport function AmountInput(props: AmountInputProps) {\n  const { ref, value, onChange, currency, onCurrencyChange, placeholder, label, className, inputClassName, id, \"aria-label\": ariaLabel, \"aria-required\": ariaRequired, autoFocus, tone = \"neutral\", negative = false, onNegativeChange, align = \"start\", labels, currencyNames, currencyOptions, digits: digitsProp, min, max, onCommit, disabledReasonDisplay } = props;\n  const generatedId = useId();\n  const fieldId = id ?? generatedId;\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  // The sign is DRAWN whenever `negative` says so, handler or not (keksdose live #366):\n  // a read-only or disabled total (\"−5.18\") used to need a dummy `onNegativeChange`\n  // just to show its minus. Without the handler there is nothing to toggle — a typed\n  // minus simply stays in the text, as in any field without a direction control.\n  const shown = negative && isBareAmount(value) ? `-${value}` : value;\n  // What the user SEES is `shown` with the locale's decimal mark (kastlan 40: a\n  // fr-CH user typed \"1,5\" and watched it turn into \"1.5\" under their fingers). Display only — `value`, `onChange`, the sign split and the settle all\n  // stay dot-decimal, because that string is the contract: RhfMoneyField's\n  // `parseAmount`, every app's `Number(value)` and the calculator's evaluator read\n  // it. The way back is free: {@link sanitizeLive} already folds a typed \",\" into\n  // \".\", so a comma typed, pasted or tapped on the numpad lands as a dot.\n  //\n  // One character for one character, and no digit grouping: the caret stays where\n  // the typist put it, and \"1.000\" cannot be read back as a thousand in one locale\n  // and as one in the other. de-CH and it-CH are \".\" — CLDR says so, and this\n  // follows `Intl` rather than a guess about a country. The field's own `locale`,\n  // else the provider's (0.34, DUP-10).\n  const locale = useKitLocale(props.locale);\n  // Decimals the figure settles to: `digits`, else the currency's minor unit.\n  const digits = digitsProp ?? currencyMinorDigits(currency);\n  const settle = (text: string) => settleAmount(text, digits, min, max);\n  // The engine NumberInput shares (DUP-10): the lock (focusable, `readOnly`, nothing\n  // changes or settles — see `disabledReason`), the hint — a FieldHint is its words at\n  // Large and on touch, §4 — the error, the description's order, the typist's draft\n  // in the locale's mark, the calculator and the numpad. On a phone the OS keyboard\n  // is suppressed for the numpad sheet (feedback #334), and the display shape keys off\n  // the SAME phone layout, so the two can never drift apart on the breakpoint.\n  //\n  // A value the HOST set (not one typed here) is shown at the currency's minor unit\n  // while the field is not being edited: an FX estimate of 93.4213 showed four\n  // decimals (keksdose live #356). Display only — `value` is the host's, untouched.\n  const numeric = useNumericField(props, {\n    settle,\n    display: (focused) => (focused ? shown : settleAmount(shown, digits)),\n  });\n  const { lock, locked, off, isMobile, asDisplay, showCalc, showNumpad, setFocused, mark, draft, setDraft, derived } =\n    numeric;\n  const invalid = numeric.isInvalid;\n  // A locked or disabled chip is a read-out: picking a currency is a change too.\n  const editable = !!onCurrencyChange && !locked && !off;\n  // Room for the trailing controls — the calculator and the currency chip — once\n  // measured, as NumberInput reserves its own (keksdose live #367, DUP-10): their\n  // width, the track's `end-1` inset in the boxed shape, and NumberInput's 4px gap.\n  // Before that (the first paint, and wherever there is no layout) the classes below\n  // stand in. showCalc is always false on a phone, so the display shape only has to\n  // clear the chip, by its own width rather than the boxed shape's room (feedback #430\n  // rework: on a 375px screen 16px decide between a readable figure and a clipped one).\n  const hasEnd = showCalc || Boolean(currency);\n  const [endRef, endWidth] = useEndWidth(hasEnd);\n  const trailingRoom = asDisplay\n    ? currency ? (editable ? \"pe-16\" : \"pe-12\") : undefined\n    : showCalc\n      ? currency ? (editable ? \"pe-24\" : \"pe-16\") : \"pe-10\"\n      : currency ? (editable ? \"pe-20\" : \"pe-14\") : undefined;\n  const innerRef = useRef<HTMLInputElement>(null);\n  const setRefs = useMemo(() => mergeRefs(innerRef, ref), [ref]);\n  // While the typist is typing, the field shows THEIR text (\"1.234,5\" stays exactly\n  // that), not the value re-spelt: re-spelling turned a grouping \".\" into a \",\" under\n  // their fingers, after which no rule could tell the two apart (keksdose G1). The\n  // draft only while it says what the field holds AND holds nothing the live\n  // sanitising would drop — a letter, a second decimal point (see `showsTyped`); a\n  // value set from outside, a calculator result or a commit shows the derived spelling.\n  const display =\n    draft === null\n      ? derived\n      : (numeric.typedFor(shown) ??\n        // The caller owns the sign: the typed \"12\" is shown as the \"-12\" it is.\n        (signOwned && negative && shown.startsWith(\"-\") && numeric.typedFor(shown.slice(1)) !== null\n          ? `-${draft}`\n          : derived));\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, settle)) {\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 = () => {\n    setDraft(null);\n    const settled = settle(commitExpression(shown));\n    handleText(settled);\n    onCommit?.(settled);\n  };\n  const typed = (raw: string) => handleText(numeric.read(raw));\n  // The currency list is CurrencySelect's (round 0.34 Wave 2, DUP-4) on the picker\n  // family's core: the chip was a hand copy of it and had drifted (no wrap at Large, no\n  // `options` subset, no check mark, no listbox id, no #308 width), and both were plain\n  // buttons under a listbox promise. `filter: false`: the list filters its own rows.\n  const core = useComboboxCore<string>({ filter: false, backCloses: true });\n  // `chipRef`: the chip the currency list hangs off (Keksdose dev#548: portalled, so the\n  // panel needs a real trigger rect rather than a relative parent). It is also where\n  // Escape and a pick hand focus back (round 0.34 BUG-1): Safari does not focus a\n  // clicked button, so \"whatever held focus\" is not the chip.\n  const { open, setOpen, closeToTrigger, triggerRef: chipRef } = core;\n  const listboxId = `${generatedId}-currencies`;\n  // A lock arriving while the list is up closes it, as on CountrySelect — adjusted\n  // while rendering, so no frame shows a list that can no longer be used.\n  if (!editable && open) setOpen(false);\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  // The two strings read out first, so the memo depends on them and not on the\n  // caller's `labels` object (a new one every render) — what the React Compiler infers.\n  const currencyLabel = labels?.currency;\n  const currencySearchLabel = labels?.currencySearch;\n  const currencyOverrides = useMemo(() => {\n    const out: Partial<CurrencyLabels> = {};\n    if (currencyLabel !== undefined) out.currency = currencyLabel;\n    if (currencySearchLabel !== undefined) out.search = currencySearchLabel;\n    return out;\n  }, [currencyLabel, currencySearchLabel]);\n  const currencyText = useKitLabels(\"currency\", DEFAULT_CURRENCY_LABELS, currencyOverrides);\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n\n  const selected = getCurrency(currency);\n\n  return (\n    <div {...dataAttributes(props)} 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). It is\n          the kit's FloatingField, which draws the label — floating, or sr-only in\n          the display shape — and puts a FieldHint on the label's line, as it does\n          for NumberInput. */}\n      {/* Locked, the field sits in the reason's frame (LockedReason: the line, or the\n          Tooltip), as NumberInput does; the root above keeps `className`, so nothing\n          reflows. */}\n      <LockedOrNot lock={lock} display={disabledReasonDisplay}>\n      <FloatingField\n        className=\"w-full\"\n        htmlFor={fieldId}\n        label={label}\n        srOnlyLabel={asDisplay}\n        hint={numeric.hint.labelHint}\n      >\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={off}\n        // Locked: focusable, `readOnly`, `aria-disabled` — see `disabledReason`.\n        readOnly={locked || undefined}\n        aria-disabled={locked || undefined}\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={display}\n        onChange={(e) => {\n          if (!locked) typed(e.target.value);\n        }}\n        onFocus={() => setFocused(true)}\n        onBlur={() => {\n          // Nothing settles under the lock — not even a draft typed before it arrived,\n          // which stays in the field for when it lifts.\n          if (!locked) commit();\n          setFocused(false);\n        }}\n        onKeyDown={(e) => {\n          if (e.key !== \"Enter\") return;\n          // Locked: Enter submits no form and settles nothing.\n          if (locked) e.preventDefault();\n          else 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          // The plain end padding, with nothing trailing: cosmetic, so the caller's\n          // to change (keksdose 0.24 — a symmetric `px-2` in a budget cell).\n          !trailingRoom && (asDisplay ? \"pe-0\" : \"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 below 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          // Over the base class's own text colour.\n          TONE_CLASS[tone],\n          // The caller's, over all of the above — base, plain padding, alignment and\n          // tone — and under only what the field needs to work (see `inputClassName`).\n          inputClassName,\n          // Room for the trailing controls, after the caller's so a `px-2` cannot run\n          // the digits under the chip (NumberInput's order, which reserves its unit\n          // and calculator the same way).\n          trailingRoom,\n          invalid && FIELD_INVALID,\n          locked && \"cursor-not-allowed\",\n        )}\n        // The classes above are the fallback; once measured the field reserves exactly\n        // its trailing controls' width, inline so it wins over every class (see\n        // `trailingRoom`).\n        style={hasEnd && endWidth != null ? { paddingInlineEnd: endWidth + (asDisplay ? 4 : 8) } : undefined}\n        aria-invalid={invalid || undefined}\n        aria-describedby={numeric.describedBy}\n        aria-required={ariaRequired}\n      />\n      {/* The label is FloatingField's, after these children (the floating trick\n          reads the input through `peer-*`). The display shape drops it VISUALLY,\n          not from the accessibility tree: a 36px tinted figure at the top of a\n          transaction form is legibly the amount, but a screen reader still needs\n          the name, and callers that pass `label` without `aria-label` would\n          otherwise be left with none. */}\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        // Measured for the input's end padding (see `trailingRoom`).\n        ref={endRef}\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            // The mark the field shows but not the typist's grouping: the evaluator\n            // reads either mark, and \"1.234,5\" is two of them. The result comes back\n            // dot-decimal.\n            value={derived}\n            onChange={(result, expression) => {\n              setDraft(null);\n              const settled = settle(result);\n              handleText(settled, expression);\n              onCommit?.(settled);\n            }}\n            className=\"px-1.5\"\n            aria-label={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-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            // A button that opens a listbox, and says so: the chip is a control inside\n            // a text field, not a field of its own, so not a combobox.\n            aria-haspopup=\"listbox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\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-secondary hover:bg-hover\",\n              asDisplay ? \"text-sm\" : \"text-xs\",\n            )}\n          >\n            {currency}\n            <ChevronDown className=\"size-3\" />\n          </button>\n        )}\n      </div>\n      {editable && (\n        <CurrencyOptionList\n          core={core}\n          listboxId={listboxId}\n          value={currency}\n          codes={currencyOptions}\n          currencyNames={currencyNames}\n          locale={locale}\n          searchPlaceholder={currencyText.search}\n          // The phone sheet's title: what the chip is for.\n          sheetTitle={currencyText.currency}\n          onChoose={(code) => {\n            onCurrencyChange?.(code);\n            closeToTrigger();\n          }}\n        />\n      )}\n      </FloatingField>\n      </LockedOrNot>\n      {/* Outside the relative box, as NumberInput's caption is: the trailing\n          controls are `inset-y-1` in it and would stretch down over a second line. */}\n      <FieldCaption parts={numeric.hint} />\n      {/* The news after the standing advice, as Select orders them. The root is\n          already a steady box, so the message coming and going remounts nothing. */}\n      {numeric.errorEl}\n      {showNumpad && (\n        <NumberPadSheet\n          // Localised like the field it mirrors. Keys are typing, read by the\n          // locale's marks like the keyboard's; \"=\" is a result, dot-decimal.\n          value={display}\n          onChange={typed}\n          onResult={(result) => {\n            setDraft(null);\n            const settled = settle(result);\n            handleText(settled);\n            onCommit?.(settled);\n          }}\n          onDone={() => innerRef.current?.blur()}\n          label={label}\n          labels={labels?.pad}\n          decimalMark={mark}\n        />\n      )}\n    </div>\n  );\n}\n\n/** The field in its lock's {@link LockedReason} while locked, as it is otherwise. A\n *  component rather than a ternary so the field's JSX is written once. `block w-full`:\n *  the frame's box stands where the field's own did. */\nfunction LockedOrNot({\n  lock,\n  display,\n  children,\n}: {\n  lock: LockReason;\n  display: DisabledReasonDisplay | undefined;\n  children: ReactNode;\n}) {\n  if (!lock.locked) return <>{children}</>;\n  return (\n    <LockedReason lock={lock} display={display} className=\"block w-full\">\n      {children}\n    </LockedReason>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/autocomplete.js

@@ -253,6 +253,7 @@ function Autocomplete(props) {
           "div",
           {
             role: "presentation",
+            "data-kit-layer": "",
             dir,
             onMouseDown: (e) => e.preventDefault(),
             className: cn(SUGGESTION_LIST_CLASS, "fixed z-50 flex flex-col overflow-hidden py-0"),