@eifi1/ui-kit 0.31.1 → 0.32.0

package/dist/theme/text-size.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/text-size.ts"],"sourcesContent":["import { useEffect, useMemo, useSyncExternalStore } from \"react\";\nimport { create } from \"zustand\";\nimport { persist } from \"zustand/middleware\";\nimport { logger } from \"../lib/logger\";\nimport { readStored } from \"../lib/safe-storage\";\n\n/**\n * The text size (docs/text-size-harmonization.md §2.1, §3.1, §10.3, §10.6).\n *\n * ONE scale on `<html>`: `data-text-size=\"normal|large|xlarge\"`, and `tokens.css` turns\n * it into `font-size: 100% / 125% / 150%` — percent, never px, so \"Normal\" keeps\n * whatever size the person set in the browser. Tailwind's spacing and type are rem, so\n * about 90 % of every screen grows with that one declaration; the breakpoints follow too\n * (tokens.css redefines `sm:` … `3xl:` per size, {@link useBreakpoint} answers the same\n * in JS).\n *\n * The names below are the mechanism's public vocabulary and are FROZEN: an app's\n * storage, its `/auth/me` column (server-kit's `TEXT_SIZES`) and the inline boot snippet\n * all spell them this way.\n */\n\n/** The three steps, in order (§2.1, §10.6): server-kit's `TEXT_SIZES`, value for value. */\nexport const TEXT_SIZES = [\"normal\", \"large\", \"xlarge\"] as const;\n\nexport type TextSize = (typeof TEXT_SIZES)[number];\n\n/** The root font size each step sets, as a factor of the browser's own (tokens.css). For\n *  what CSS cannot reach: a canvas or SVG chart's px constants, a windowed list's row\n *  estimate, a popover width in px (§3.2). */\nexport const TEXT_SCALE: Readonly<Record<TextSize, number>> = { normal: 1, large: 1.25, xlarge: 1.5 };\n\n/** The attribute on `<html>` that carries the size. */\nconst TEXT_SIZE_ATTRIBUTE = \"data-text-size\";\n\nexport function isTextSize(value: unknown): value is TextSize {\n  return value === \"normal\" || value === \"large\" || value === \"xlarge\";\n}\n\n/**\n * The size in force: **this device's own choice → the account's → Normal** (§2.2, §2.6).\n * Each is taken only when it is one of {@link TEXT_SIZES}; anything else (a stale value,\n * `null` = never chosen) falls through to the next. The one order the pre-paint call, the\n * apply hook and `useAccountAppearance` all use, so the three can never disagree.\n */\nexport function resolveTextSize(device: unknown, account?: unknown): TextSize {\n  if (isTextSize(device)) return device;\n  if (isTextSize(account)) return account;\n  return \"normal\";\n}\n\n/* ── <html data-text-size> and the subscribers that read it ─────────────── */\n\nconst listeners = new Set<() => void>();\nlet observer: MutationObserver | null = null;\n\nfunction notify(): void {\n  for (const listener of listeners) listener();\n}\n\nfunction subscribe(listener: () => void): () => void {\n  listeners.add(listener);\n  // Also catches writers that are not this module — the inline boot snippet, an app\n  // setting the attribute by hand, a test.\n  if (!observer && typeof MutationObserver !== \"undefined\" && typeof document !== \"undefined\") {\n    observer = new MutationObserver(notify);\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: [TEXT_SIZE_ATTRIBUTE] });\n  }\n  return () => {\n    listeners.delete(listener);\n    if (listeners.size === 0) {\n      observer?.disconnect();\n      observer = null;\n    }\n  };\n}\n\n/** The size `<html>` carries now; Normal without one (or outside a browser). */\nexport function readTextSize(): TextSize {\n  if (typeof document === \"undefined\") return \"normal\";\n  const value = document.documentElement.getAttribute(TEXT_SIZE_ATTRIBUTE);\n  return isTextSize(value) ? value : \"normal\";\n}\n\n/** Put `size` on `<html>`. Every {@link useTextSize} re-renders with it. */\nexport function applyTextSize(size: TextSize): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  if (root.getAttribute(TEXT_SIZE_ATTRIBUTE) === size) return;\n  root.setAttribute(TEXT_SIZE_ATTRIBUTE, size);\n  notify();\n}\n\nexport interface TextSizeInfo {\n  size: TextSize;\n  /** {@link TEXT_SCALE} for `size`: 1, 1.25 or 1.5. */\n  scale: number;\n}\n\n/**\n * The size in force on this page, and its scale (§3.1) — read from `<html>`, so it needs\n * no store and works in every kit component: whoever applied the size (the app's store,\n * the pre-paint call, the inline snippet), this follows it.\n *\n * Only for what CSS cannot do. A class that should differ at Large is a `large:`\n * variant; a layout switch is a breakpoint, which already scales.\n */\nexport function useTextSize(): TextSizeInfo {\n  const size = useSyncExternalStore(subscribe, readTextSize, () => \"normal\" as const);\n  return useMemo(() => ({ size, scale: TEXT_SCALE[size] }), [size]);\n}\n\n/* ── Storage: the frozen format, the pre-paint call ─────────────────────── */\n\n/**\n * What a text-size store persists under its key — zustand's persist envelope, and FROZEN\n * (§10.3) because an app's inline `<head>` snippet reads it before any module loads:\n *\n *     {\"state\":{\"size\":\"large\"},\"version\":1}\n *\n * `size` is one of {@link TEXT_SIZES}, or `null` / absent when this device never chose.\n * A future change adds a key; it never renames `state.size` or changes its values.\n */\nexport interface PersistedTextSize {\n  state?: { size?: TextSize | null };\n  version?: number;\n}\n\n/** This device's own choice under `storageKey`, or `null` when it never chose (or the\n *  storage is blocked, malformed, or holds a value that is not a size). */\nexport function readPersistedTextSize(storageKey: string): TextSize | null {\n  try {\n    const blob = JSON.parse(readStored(storageKey) ?? \"null\") as PersistedTextSize | null;\n    const size = blob?.state?.size;\n    return isTextSize(size) ? size : null;\n  } catch {\n    return null;\n  }\n}\n\nexport interface PersistedAppearanceOptions {\n  /**\n   * The account's last known value, for a device without a choice of its own (§10.3):\n   * what the app persisted with its user (keksdose keeps `/auth/me` in localStorage), so\n   * a cold boot paints the account's size instead of Normal and then jumping — offline\n   * too. Called once, guarded: a throw counts as \"no account value\".\n   */\n  account?: () => string | null | undefined;\n}\n\nfunction readAccount(account: PersistedAppearanceOptions[\"account\"]): unknown {\n  if (!account) return undefined;\n  try {\n    return account();\n  } catch {\n    return undefined;\n  }\n}\n\n/**\n * Pre-paint (§3.1, §10.3): read this device's choice under `storageKey` — else the\n * account's last known value — and put it on `<html>` BEFORE `createRoot`, next to\n * `applyPersistedTheme`, so the first paint already has the right size. Returns the size\n * applied.\n *\n * ```ts\n * applyPersistedTextSize(\"keksdose-text-size\", {\n *   account: () => readPersistedUser()?.text_size,\n * });\n * ```\n */\nexport function applyPersistedTextSize(storageKey: string, options: PersistedAppearanceOptions = {}): TextSize {\n  const size = resolveTextSize(readPersistedTextSize(storageKey), readAccount(options.account));\n  applyTextSize(size);\n  return size;\n}\n\n/**\n * The same pre-paint as {@link applyPersistedTextSize}, as an inline `<head>` script for\n * a boot splash painted from `index.html` before any module runs (§10.3). A function\n * EXPRESSION: call it with the storage key and, optionally, a function returning the\n * account's last known value.\n *\n * ```html\n * <script>\n *   (function(k,a){…})(\"keksdose-text-size\", function () {\n *     return JSON.parse(localStorage.getItem(\"keksdose-auth\")).state.user.text_size;\n *   });\n * </script>\n * ```\n *\n * Paste the constant's value in place of `(function(k,a){…})`. It reads the frozen\n * {@link PersistedTextSize} format, never throws, and sets only `data-text-size`; the\n * splash itself sizes in rem so the attribute reaches it (tokens.css, or the splash's own\n * `html[data-text-size=large]{font-size:125%}` if it paints before the stylesheet).\n */\nexport const TEXT_SIZE_INLINE_SCRIPT =\n  \"(function(k,a){function ok(v){return v==='normal'||v==='large'||v==='xlarge'}\" +\n  \"var v=null;try{var s=JSON.parse(localStorage.getItem(k)||'null');v=s&&s.state&&s.state.size}catch(e){}\" +\n  \"if(!ok(v)){v=null;try{v=a?a():null}catch(e){}}\" +\n  \"try{document.documentElement.setAttribute('data-text-size',ok(v)?v:'normal')}catch(e){}})\";\n\n/* ── The store ──────────────────────────────────────────────────────────── */\n\nexport interface TextSizeState {\n  /** This device's own choice (persisted), or `null` when it never chose — then the\n   *  account's value applies (§2.2). */\n  size: TextSize | null;\n  /** Store this device's choice; `null` forgets it, so the account's applies again. */\n  setSize: (size: TextSize | null) => void;\n}\n\nexport interface ApplyTextSizeOptions {\n  /** The account's value (`/auth/me`'s `text_size`): it applies while this device has no\n   *  choice of its own. Leave it out where there is no account. */\n  account?: string | null;\n}\n\n/**\n * Build a text-size store bound to a consumer-supplied localStorage key, shaped like\n * `createThemeStore` (§6). It holds the DEVICE's choice only; the account's value comes\n * in through `useApplyTextSize({ account })` and `useAccountAppearance`, and the size in\n * force is always {@link resolveTextSize} of the two.\n *\n * - `useTextSizeStore` — the zustand hook: `size` (device choice or null) and `setSize`.\n * - `useApplyTextSize({ account })` — the effect that puts the size in force on `<html>`.\n *   Mount it once near the root, beside `useApplyTheme`.\n *\n * The persisted format is {@link PersistedTextSize}, and frozen.\n */\nexport function createTextSizeStore(storageKey: string) {\n  const useTextSizeStore = create<TextSizeState>()(\n    logger(\n      persist(\n        (set) => ({\n          size: null,\n          setSize: (size) => set({ size: isTextSize(size) ? size : null }),\n        }),\n        {\n          name: storageKey,\n          version: 1,\n          partialize: (s) => ({ size: s.size }),\n          // A hand-edited or future value must not reach <html> as an unknown size.\n          merge: (persisted, current) => ({\n            ...current,\n            size: isTextSize((persisted as { size?: unknown } | null)?.size)\n              ? ((persisted as { size: TextSize }).size)\n              : null,\n          }),\n        },\n      ),\n      \"text-size\",\n    ),\n  );\n\n  function useApplyTextSize({ account }: ApplyTextSizeOptions = {}): TextSize {\n    const device = useTextSizeStore((s) => s.size);\n    const size = resolveTextSize(device, account);\n    useEffect(() => {\n      applyTextSize(size);\n    }, [size]);\n    return size;\n  }\n\n  return { useTextSizeStore, useApplyTextSize };\n}\n\nexport type TextSizeStore = ReturnType<typeof createTextSizeStore>;\n"],"mappings":"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","names":[]}

package/dist/wizard/stepper-nav.d.ts

@@ -1,18 +1,20 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { bH as ButtonVariant } from '../delete-account-setting-CpIhzxxZ.js';
+import { bO as ButtonVariant } from '../delete-account-setting-BvdQdbv3.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-DUELeXpa.js';
+import '../data-table-labels-kpAAVi6g.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
 import '../components/mini-calendar.js';
 import '../components/calendar-heatmap.js';
 import '../components/popover.js';
+import '../hooks/use-breakpoint.js';
 import '../components/chip.js';
 import 'lucide-react';
+import '../components/field-parts.js';
 import '../components/field-sync.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -80,6 +82,9 @@ import '../admin/admin-parts.js';
 import '../admin/admin-action-log.js';
 import '../settings/settings-labels.js';
 import '../demo/demo-labels.js';
+import '../components/appearance-labels.js';
+import '../theme/contrast.js';
+import '../theme/text-size.js';
 import '../components/reauth-dialog.js';
 import '../components/server-wake.js';
 import '../lib/server-wake.js';
@@ -93,7 +98,7 @@ import '../components/sign-chip.js';
 import '../components/column-mapper.js';
 import '../lib/column-mapping.js';
 import '../lib/table-text.js';
-import '../components/field-parts.js';
+import '../components/focus-ring.js';
 
 /**
  * The chrome around a wizard: the step indicator, the step content, and the

package/dist/wizard.d.ts

@@ -6,18 +6,20 @@ export { WizardStep, WizardStepProps } from './wizard/wizard-step.js';
 export { WizardSummary } from './wizard/wizard-summary.js';
 export { StepperNav } from './wizard/stepper-nav.js';
 import 'react';
-import './delete-account-setting-CpIhzxxZ.js';
+import './delete-account-setting-BvdQdbv3.js';
 import './components/tooltip.js';
 import './hooks/use-anchored-rect.js';
 import './lib/clipping.js';
-import './data-table-labels-DUELeXpa.js';
+import './data-table-labels-kpAAVi6g.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
 import './components/mini-calendar.js';
 import './components/calendar-heatmap.js';
 import './components/popover.js';
+import './hooks/use-breakpoint.js';
 import './components/chip.js';
 import 'lucide-react';
+import './components/field-parts.js';
 import './components/field-sync.js';
 import './tour/tour.js';
 import './search/command-palette.js';
@@ -85,6 +87,9 @@ import './admin/admin-parts.js';
 import './admin/admin-action-log.js';
 import './settings/settings-labels.js';
 import './demo/demo-labels.js';
+import './components/appearance-labels.js';
+import './theme/contrast.js';
+import './theme/text-size.js';
 import './components/reauth-dialog.js';
 import './components/server-wake.js';
 import './lib/server-wake.js';
@@ -98,4 +103,4 @@ import './components/sign-chip.js';
 import './components/column-mapper.js';
 import './lib/column-mapping.js';
 import './lib/table-text.js';
-import './components/field-parts.js';
+import './components/focus-ring.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/admin/invitations-panel.tsx

@@ -14,7 +14,8 @@ import type { ChipTone } from "../components/chip";
 import { CopyButton } from "../components/copy-button";
 import { LanguageSelect } from "../components/language-select";
 import { SectionLabel, Caption } from "../components/text";
-import { Button, IconButton, Input, Select, Spinner } from "../components/ui";
+import { RowActions } from "../components/row-actions";
+import { Button, Input, Select, Spinner } from "../components/ui";
 import { useWriteLock } from "../components/write-lock";
 import { hasMessage, settle, useDayText, usePersonLabel } from "./admin-parts";
 import type { AdminPerson, MaybePromise } from "./admin-parts";
@@ -480,35 +481,41 @@ export function InvitationsPanel<R extends string = string>({
                     </div>
                     {(link || resendable || revocable) && (
                       <div className="ms-auto flex shrink-0 items-center gap-1">
+                        {/* The copy stays its own icon: it says "Copied" where it was
+                            pressed, which a menu entry that closes cannot. */}
                         {link && open && <CopyButton size="xs" tone="muted" text={link} label={labels.copyLink} />}
-                        {resendable && (
-                          <IconButton
-                            size="xs"
-                            commit
-                            label={labels.resend(invitation.email)}
-                            pending={busy === `resend:${key}`}
-                            disabled={busy !== null}
-                            onClick={async () => {
-                              const answer = await run(`resend:${key}`, () => onResend(invitation));
-                              if (answer !== FAILED) took(answer, invitation.email, invitation.id);
-                            }}
-                          >
-                            <RefreshCw />
-                          </IconButton>
-                        )}
-                        {revocable && (
-                          <IconButton
-                            size="xs"
-                            tone="danger"
-                            commit
-                            label={labels.revoke(invitation.email)}
-                            pending={busy === `revoke:${key}`}
-                            disabled={busy !== null}
-                            onClick={() => void run(`revoke:${key}`, () => onRevoke(invitation))}
-                          >
-                            <Trash2 />
-                          </IconButton>
-                        )}
+                        {/* Resend and revoke are the row's actions (docs/text-size-
+                            harmonization.md §10.8): two icons at Normal, one "⋯" menu at
+                            Large, where both names as text ("Send … a new link") would
+                            not fit a phone's row beside the copy icon. */}
+                        <RowActions
+                          name={invitation.email}
+                          actions={[
+                            resendable && {
+                              key: "resend",
+                              label: labels.resend(invitation.email),
+                              icon: RefreshCw,
+                              commit: true,
+                              pending: busy === `resend:${key}`,
+                              disabled: busy !== null,
+                              onSelect: () =>
+                                void (async () => {
+                                  const answer = await run(`resend:${key}`, () => onResend(invitation));
+                                  if (answer !== FAILED) took(answer, invitation.email, invitation.id);
+                                })(),
+                            },
+                            revocable && {
+                              key: "revoke",
+                              label: labels.revoke(invitation.email),
+                              icon: Trash2,
+                              tone: "danger",
+                              commit: true,
+                              pending: busy === `revoke:${key}`,
+                              disabled: busy !== null,
+                              onSelect: () => void run(`revoke:${key}`, () => onRevoke(invitation)),
+                            },
+                          ]}
+                        />
                       </div>
                     )}
                   </div>

package/src/admin/user-roster.tsx

@@ -1,7 +1,5 @@
 import { useMemo } from "react";
 import type { ReactNode } from "react";
-import { MoreHorizontal } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
 import type { DateInput } from "../lib/format";
 import type { PersonName } from "../lib/person-name";
@@ -12,8 +10,8 @@ import type { ChipTone } from "../components/chip";
 import type { DataTableColumn } from "../components/data-table";
 import { encodeSorts } from "../components/data-table-sort";
 import type { SortState } from "../components/data-table-sort";
-import { Popover } from "../components/popover";
-import { Button, IconButton } from "../components/ui";
+import { RowActions } from "../components/row-actions";
+import type { RowAction, RowActionList } from "../components/row-actions";
 import { UserAvatar } from "../components/user-avatar";
 import { personLabel } from "./admin-parts";
 import { RoleSelect } from "./role-select";
@@ -213,27 +211,13 @@ export function UserIdentityCell({
 
 /* ── The row's actions ──────────────────────────────────────────────────────── */
 
-/** One entry of a row's action menu (§4). */
-export interface UserRowAction {
-  /** React key. Default: the label. */
-  key?: string;
-  label: string;
-  /** Runs it — usually opens `AdminActionConfirm` with the level the server states. */
-  onSelect: () => void;
-  icon?: LucideIcon;
-  /** `danger` for deactivate, transfer, erase. */
-  tone?: "default" | "danger";
-  /** Why it is not available for this row ("You can’t deactivate yourself"). The entry
-   *  stays in the menu, focusable, and says so — an action that silently vanished
-   *  would leave the admin looking for it. */
-  disabledReason?: ReactNode;
-  /** Leave it out for this row. */
-  hidden?: boolean;
-}
+/** One entry of a row's action menu (§4) — the kit's {@link RowAction} since 0.32,
+ *  which generalised it for every dense row (docs/text-size-harmonization.md §10.8). */
+export type UserRowAction = RowAction;
 
 /** What `actions(row)` may return: entries, and `false` / `null` for the ones a
  *  condition left out (`row.is_active && {…}`). */
-export type UserRowActionList = readonly (UserRowAction | false | null | undefined)[];
+export type UserRowActionList = RowActionList;
 
 export interface UserRowActionsProps {
   actions: UserRowActionList;
@@ -248,59 +232,19 @@ export interface UserRowActionsProps {
  * a phone card, and both grow with every action §2.4 adds. The menu is portalled, so a
  * table's scroller cannot clip it; Escape and an outside press close it, and focus goes
  * back to the button, which is where a confirmation dialog then returns it.
+ *
+ * Since 0.32 this is {@link RowActions} with `collapse="menu"` — the menu at every size —
+ * named by the roster's own `actionsFor`.
  */
 export function UserRowActions({ actions, name, labels: labelsProp }: UserRowActionsProps) {
   const labels = useKitLabels("userRoster", DEFAULT_USER_ROSTER_LABELS, labelsProp);
-  const entries = actions.filter((a): a is UserRowAction => Boolean(a) && !(a as UserRowAction).hidden);
-  if (entries.length === 0) return null;
-  const title = labels.actionsFor(name);
   return (
-    <Popover
-      width={240}
-      aria-label={title}
-      className="p-1"
-      trigger={({ open, toggle, ref }) => (
-        <IconButton
-          ref={ref}
-          size="xs"
-          label={title}
-          aria-haspopup="dialog"
-          aria-expanded={open}
-          stopPropagation
-          onClick={toggle}
-        >
-          <MoreHorizontal />
-        </IconButton>
-      )}
-    >
-      {(close) => (
-        <ul className="space-y-0.5">
-          {entries.map((action) => {
-            const Icon = action.icon;
-            return (
-              <li key={action.key ?? action.label}>
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  stretch
-                  tone={action.tone === "danger" ? "danger" : undefined}
-                  disabledReason={action.disabledReason}
-                  className="justify-start"
-                  onClick={() => {
-                    close();
-                    action.onSelect();
-                  }}
-                >
-                  {Icon && <Icon className="size-4 shrink-0" aria-hidden />}
-                  {action.label}
-                </Button>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-    </Popover>
+    <RowActions
+      actions={actions}
+      name={name}
+      collapse="menu"
+      labels={{ actionsFor: labels.actionsFor }}
+    />
   );
 }
 
@@ -507,7 +451,8 @@ export function userRosterColumns<T extends UserRosterRow, R extends string = st
       column: { mobileHidden: true },
     }),
     // How long ago rather than a date — the question is "recently?" — with the exact
-    // time in a tooltip (keksdose's last-seen column, Kurvenschmiede's).
+    // time beside it (keksdose's last-seen column, Kurvenschmiede's; 0.32 §4: never only
+    // in a tooltip).
     dateColumn<T>({
       key: "last_login",
       header: labels.lastLogin,

package/src/auth/auth-errors.ts

@@ -86,9 +86,35 @@ export type DemoErrorCode =
   | "demo_read_only"
   | "demo_refused";
 
-/** Every code the kit reads: the sign-in refusals, the account ones (0.30.0) and the
- *  demo's (0.31.0). */
-export type KitErrorCode = AuthErrorCode | AccountErrorCode | DemoErrorCode;
+/**
+ * 0.32.0: billing's coded refusals (docs/billing-harmonization.md §3.3, §3.4, §4, §12.3) —
+ * server-kit 0.6's `BillingError` and `PlanLimitError`, value for value, answered as
+ * `{detail, code}` like the others and read by the same {@link authErrorCode}.
+ *
+ * - `billing_disabled` — `404`: the billing switch is off (§2.9), so every billing route
+ *   but `GET /billing/status` is "not there", as a switched-off demo is.
+ * - `billing_read_only` — `402`: a write by (or into the data of) a payer out of good
+ *   standing (§3.3, §12.1). Inside a sync reply it marks the changes that were refused
+ *   and not applied (§12.5). The app's write lock and banner already say why, so — like
+ *   `demo_read_only` — it needs no toast of its own.
+ * - `plan_limit` — `402`: a create past the plan's limit (§3.4), with the extra fields
+ *   `dimension`, `plan`, `limit` and `used` — read them with `isPlanLimit`. A lapsed payer
+ *   creating gets `billing_read_only` instead, never this (§12.3).
+ * - `billing_not_configured` — billing is switched on but the provider's settings are
+ *   missing (the secrets, a price id): the operator's mistake, not the payer's.
+ */
+export type BillingErrorCode = "billing_disabled" | "billing_read_only" | "plan_limit" | "billing_not_configured";
+
+/** Every code the kit reads: the sign-in refusals, the account ones (0.30.0), the demo's
+ *  (0.31.0) and billing's (0.32.0). */
+export type KitErrorCode = AuthErrorCode | AccountErrorCode | DemoErrorCode | BillingErrorCode;
+
+const BILLING_CODES: ReadonlySet<BillingErrorCode> = new Set<BillingErrorCode>([
+  "billing_disabled",
+  "billing_read_only",
+  "plan_limit",
+  "billing_not_configured",
+]);
 
 const CODES: ReadonlySet<string> = new Set<KitErrorCode>([
   "invalid_credentials",
@@ -112,6 +138,7 @@ const CODES: ReadonlySet<string> = new Set<KitErrorCode>([
   "demo_not_ready",
   "demo_read_only",
   "demo_refused",
+  ...BILLING_CODES,
 ]);
 
 type Bag = Record<string, unknown>;
@@ -132,8 +159,8 @@ function codeOfBody(body: unknown): KitErrorCode | undefined {
 
 /**
  * The code an error carries — an {@link AuthErrorCode}, since 0.30.0 an
- * {@link AccountErrorCode}, since 0.31.0 a {@link DemoErrorCode} — or `undefined` when it
- * carries none.
+ * {@link AccountErrorCode}, since 0.31.0 a {@link DemoErrorCode}, since 0.32.0 a
+ * {@link BillingErrorCode} — or `undefined` when it carries none.
  *
  * Reads the parsed response body wherever the apps' HTTP clients put it, without
  * depending on any of them:
@@ -148,7 +175,7 @@ function codeOfBody(body: unknown): KitErrorCode | undefined {
  * it is one of the codes above: axios writes its OWN codes there (`ERR_NETWORK`,
  * `ECONNABORTED`, `ERR_BAD_REQUEST`), and so does Node, so an unknown value is never
  * read as a refusal. The HTTP status is not checked: the code is the contract, and the
- * status differs per refusal (401, 403, 409, 410).
+ * status differs per refusal (401, 402, 403, 404, 409, 410).
  */
 export function authErrorCode(err: unknown): KitErrorCode | undefined {
   if (!isBag(err)) return undefined;
@@ -173,13 +200,47 @@ export function authErrorCode(err: unknown): KitErrorCode | undefined {
  * with, so an app's `onSubmit` can simply let its client's error through. See
  * {@link authErrorCode} for the shapes it reads. Since 0.30.0 it knows the account codes
  * too: `isAuthError(err, "last_admin")`; since 0.31.0 the demo's:
- * `isAuthError(err, "demo_read_only")`.
+ * `isAuthError(err, "demo_read_only")`; since 0.32.0 billing's:
+ * `isAuthError(err, "billing_read_only")` (or {@link isBillingError}).
  */
 export function isAuthError(err: unknown, code?: KitErrorCode): boolean {
   const found = authErrorCode(err);
   return found !== undefined && (code === undefined || found === code);
 }
 
+/**
+ * Whether `err` is one of billing's coded refusals (0.32.0, docs/billing-harmonization.md
+ * §10) — any of the four, or the one named. {@link isAuthError} answers the same for a
+ * named code; this one also answers "is it billing's at all", which an app's error
+ * handler asks before it decides between the write lock, a `PlanLimitNotice` and a toast.
+ */
+export function isBillingError(err: unknown, code?: BillingErrorCode): boolean {
+  const found = authErrorCode(err);
+  return found !== undefined && BILLING_CODES.has(found as BillingErrorCode) && (code === undefined || found === code);
+}
+
+/**
+ * The parsed body that carries a code, wherever {@link authErrorCode} would find it (in
+ * the same order) — the object with the `code`, so FastAPI's nested `detail` when the code
+ * is there. For a reader of a refusal's EXTRA fields (`isPlanLimit`: `dimension`, `limit`,
+ * `used` sit beside the code). `accept` decides which codes count; default, the known ones.
+ *
+ * @internal Not part of the barrel.
+ */
+export function errorBodyWithCode(
+  err: unknown,
+  accept: (code: unknown) => boolean = (code) => known(code) !== undefined,
+): Record<string, unknown> | undefined {
+  if (!isBag(err)) return undefined;
+  const response = err.response;
+  for (const body of [isBag(response) ? response.data : undefined, err.data, err.body, err]) {
+    if (!isBag(body)) continue;
+    if (accept(body.code)) return body;
+    if (isBag(body.detail) && accept(body.detail.code)) return body.detail;
+  }
+  return undefined;
+}
+
 /** An HTTP status as a number, or undefined. */
 function statusOf(value: unknown): number | undefined {
   return typeof value === "number" && Number.isInteger(value) ? value : undefined;

package/src/billing/billing-banner.tsx

@@ -0,0 +1,205 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import { CreditCard, Hourglass, PencilOff } from "lucide-react";
+
+import type { LabelOverride } from "../i18n/kit-labels";
+import { AlertBanner } from "../components/alert-banner";
+import type { AlertSize, AlertTone } from "../components/alert-banner";
+import { Button, Spinner } from "../components/ui";
+import { useBillingLabels } from "./billing-labels";
+import type { BillingLabels } from "./billing-labels";
+
+/**
+ * The billing banners (docs/billing-harmonization.md §3.3, §7, §12.6, §12.21):
+ *
+ * - `trial-ending` — from 7 days before `trial_ends_at` (§3.3);
+ * - `grant-ending` — from 7 days before `comped_until`: a beta user's 12 months, an
+ *   operator's grant;
+ * - `payment-failed` — from the first failed payment (`past_due`), while the provider
+ *   retries;
+ * - `plan-ended` — out of good standing: read-only, never locked (§2.3);
+ * - `guest` — a guest in someone else's read-only item (§12.6);
+ * - `processing` — back from checkout before the webhook landed (§12.21).
+ */
+export type BillingBannerKind =
+  | "trial-ending"
+  | "grant-ending"
+  | "payment-failed"
+  | "plan-ended"
+  | "guest"
+  | "processing";
+
+interface BillingBannerBaseProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onClick"> {
+  /**
+   * Over the kind's tone: `trial-ending` and `grant-ending` are `info` until the last
+   * three days and `warning` in them; `payment-failed` is `danger` (money did not
+   * arrive — kastlan's past-due strip was red); `plan-ended` is `warning`, a state with
+   * everything still there rather than an error; `guest` and `processing` are `info`.
+   */
+  tone?: AlertTone;
+  /** `strip` (default): the band under the top bar, on every page. `box`: the same
+   *  message on the subscription page itself. */
+  variant?: "strip" | "box";
+  /** Default `sm` for a strip (the demo's banner), `md` for a box. */
+  size?: AlertSize;
+  /**
+   * Where the action goes — the subscription page, say. The app's action, as an `href`
+   * or as {@link onAction}; without either there is no button. Never a write-locked
+   * commit: billing itself always works (§3.3).
+   */
+  actionHref?: string;
+  /** What the action does — the app's portal call (`POST /billing/portal`, then off to
+   *  its `url`). The kit sends no request. */
+  onAction?: () => void;
+  /**
+   * Over the kind's action words: "Choose a plan" (trial, grant, plan ended), "Update
+   * payment method" (payment failed), "Check again" (processing). The guest banner has
+   * none of its own: an action there needs this.
+   */
+  actionLabel?: string;
+  /** The action is under way: the button's spinner, no second press. */
+  actionPending?: boolean;
+  /** An × that calls this; the app removes the banner and remembers that it did. */
+  onDismiss?: () => void;
+  dismissLabel?: string;
+  /** Prop > `<UiKitProvider labels={{ billing }}>` > English. */
+  labels?: LabelOverride<BillingLabels>;
+}
+
+export type BillingBannerProps = BillingBannerBaseProps &
+  (
+    | {
+        kind: "trial-ending" | "grant-ending";
+        /** Calendar days left — `billingDaysLeft(trial_ends_at)`. 0 is today. */
+        daysLeft: number;
+        item?: never;
+      }
+    | {
+        kind: "guest";
+        /** The item's own name ("Household 2026"), or nothing. NEVER the owner's status:
+         *  the banner says "for now" and nothing more (§12.6). */
+        item?: string;
+        daysLeft?: never;
+      }
+    | {
+        kind: "payment-failed" | "plan-ended" | "processing";
+        daysLeft?: never;
+        item?: never;
+      }
+  );
+
+/** The last days, in which an ending trial or grant turns from news into a warning. */
+const LAST_DAYS = 3;
+
+function defaultTone(kind: BillingBannerKind, daysLeft: number | undefined): AlertTone {
+  switch (kind) {
+    case "trial-ending":
+    case "grant-ending":
+      return (daysLeft ?? 0) > LAST_DAYS ? "info" : "warning";
+    case "payment-failed":
+      return "danger";
+    case "plan-ended":
+      return "warning";
+    default:
+      return "info";
+  }
+}
+
+/**
+ * One of the billing banners, as a kit `AlertBanner` strip (§7): the kind's sentence, its
+ * glyph and tone, and the app's action. Carries `data-billing-banner` with the kind.
+ *
+ * The app decides WHICH banner shows, from `GET /billing/overview` (and hides all of them
+ * while billing is off, §4); the kit only says it. A guest's banner takes no status at
+ * all — the type does not let one in — so the owner's payment state cannot leak into it
+ * by a wrong prop (§12.6).
+ *
+ * `processing` is a live region (`role="status"`): it appears when the person comes back
+ * from checkout and goes when the overview catches up (§12.21), and a screen reader
+ * should hear both. The others are page furniture, role-less as the strip is.
+ */
+export function BillingBanner(props: BillingBannerProps) {
+  const {
+    kind,
+    daysLeft,
+    item,
+    tone,
+    variant = "strip",
+    size,
+    actionHref,
+    onAction,
+    actionLabel,
+    actionPending,
+    onDismiss,
+    dismissLabel,
+    labels: labelsProp,
+    role,
+    ...rest
+  } = props;
+  const labels = useBillingLabels(labelsProp);
+  const days = Math.max(0, Math.floor(daysLeft ?? 0));
+
+  let text: string;
+  let icon: ReactNode;
+  let ownAction: string | undefined;
+  switch (kind) {
+    case "trial-ending":
+      text = labels.trialEnding(days);
+      icon = <Hourglass />;
+      ownAction = labels.choosePlan;
+      break;
+    case "grant-ending":
+      text = labels.grantEnding(days);
+      icon = <Hourglass />;
+      ownAction = labels.choosePlan;
+      break;
+    case "payment-failed":
+      text = labels.paymentFailed;
+      icon = <CreditCard />;
+      ownAction = labels.updatePayment;
+      break;
+    case "plan-ended":
+      text = labels.planEnded;
+      icon = <PencilOff />;
+      ownAction = labels.choosePlan;
+      break;
+    case "guest":
+      text = labels.guestReadOnly(item);
+      icon = <PencilOff />;
+      ownAction = undefined;
+      break;
+    case "processing":
+      text = labels.processing;
+      icon = <Spinner label={null} />;
+      ownAction = labels.checkAgain;
+      break;
+  }
+
+  const words = actionLabel ?? ownAction;
+  const action =
+    words === undefined || (actionHref === undefined && onAction === undefined) ? undefined : actionHref !== undefined ? (
+      <Button href={actionHref} variant="secondary" size="sm">
+        {words}
+      </Button>
+    ) : (
+      <Button type="button" variant="secondary" size="sm" onClick={onAction} pending={actionPending}>
+        {words}
+      </Button>
+    );
+
+  return (
+    <AlertBanner
+      {...rest}
+      role={role ?? (kind === "processing" ? "status" : undefined)}
+      variant={variant}
+      size={size ?? (variant === "strip" ? "sm" : "md")}
+      tone={tone ?? defaultTone(kind, days)}
+      icon={icon}
+      action={action}
+      onDismiss={onDismiss}
+      dismissLabel={dismissLabel}
+      data-billing-banner={kind}
+    >
+      {text}
+    </AlertBanner>
+  );
+}