@eifi1/ui-kit 0.31.0 → 0.32.0

package/dist/theme/text-size.js

@@ -0,0 +1,121 @@
+"use client";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { logger } from "../lib/logger.js";
+import { readStored } from "../lib/safe-storage.js";
+const TEXT_SIZES = ["normal", "large", "xlarge"];
+const TEXT_SCALE = { normal: 1, large: 1.25, xlarge: 1.5 };
+const TEXT_SIZE_ATTRIBUTE = "data-text-size";
+function isTextSize(value) {
+  return value === "normal" || value === "large" || value === "xlarge";
+}
+function resolveTextSize(device, account) {
+  if (isTextSize(device)) return device;
+  if (isTextSize(account)) return account;
+  return "normal";
+}
+const listeners = /* @__PURE__ */ new Set();
+let observer = null;
+function notify() {
+  for (const listener of listeners) listener();
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  if (!observer && typeof MutationObserver !== "undefined" && typeof document !== "undefined") {
+    observer = new MutationObserver(notify);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: [TEXT_SIZE_ATTRIBUTE] });
+  }
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      observer?.disconnect();
+      observer = null;
+    }
+  };
+}
+function readTextSize() {
+  if (typeof document === "undefined") return "normal";
+  const value = document.documentElement.getAttribute(TEXT_SIZE_ATTRIBUTE);
+  return isTextSize(value) ? value : "normal";
+}
+function applyTextSize(size) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (root.getAttribute(TEXT_SIZE_ATTRIBUTE) === size) return;
+  root.setAttribute(TEXT_SIZE_ATTRIBUTE, size);
+  notify();
+}
+function useTextSize() {
+  const size = useSyncExternalStore(subscribe, readTextSize, () => "normal");
+  return useMemo(() => ({ size, scale: TEXT_SCALE[size] }), [size]);
+}
+function readPersistedTextSize(storageKey) {
+  try {
+    const blob = JSON.parse(readStored(storageKey) ?? "null");
+    const size = blob?.state?.size;
+    return isTextSize(size) ? size : null;
+  } catch {
+    return null;
+  }
+}
+function readAccount(account) {
+  if (!account) return void 0;
+  try {
+    return account();
+  } catch {
+    return void 0;
+  }
+}
+function applyPersistedTextSize(storageKey, options = {}) {
+  const size = resolveTextSize(readPersistedTextSize(storageKey), readAccount(options.account));
+  applyTextSize(size);
+  return size;
+}
+const TEXT_SIZE_INLINE_SCRIPT = "(function(k,a){function ok(v){return v==='normal'||v==='large'||v==='xlarge'}var v=null;try{var s=JSON.parse(localStorage.getItem(k)||'null');v=s&&s.state&&s.state.size}catch(e){}if(!ok(v)){v=null;try{v=a?a():null}catch(e){}}try{document.documentElement.setAttribute('data-text-size',ok(v)?v:'normal')}catch(e){}})";
+function createTextSizeStore(storageKey) {
+  const useTextSizeStore = create()(
+    logger(
+      persist(
+        (set) => ({
+          size: null,
+          setSize: (size) => set({ size: isTextSize(size) ? size : null })
+        }),
+        {
+          name: storageKey,
+          version: 1,
+          partialize: (s) => ({ size: s.size }),
+          // A hand-edited or future value must not reach <html> as an unknown size.
+          merge: (persisted, current) => ({
+            ...current,
+            size: isTextSize(persisted?.size) ? persisted.size : null
+          })
+        }
+      ),
+      "text-size"
+    )
+  );
+  function useApplyTextSize({ account } = {}) {
+    const device = useTextSizeStore((s) => s.size);
+    const size = resolveTextSize(device, account);
+    useEffect(() => {
+      applyTextSize(size);
+    }, [size]);
+    return size;
+  }
+  return { useTextSizeStore, useApplyTextSize };
+}
+export {
+  TEXT_SCALE,
+  TEXT_SIZES,
+  TEXT_SIZE_INLINE_SCRIPT,
+  applyPersistedTextSize,
+  applyTextSize,
+  createTextSizeStore,
+  isTextSize,
+  readPersistedTextSize,
+  readTextSize,
+  resolveTextSize,
+  useTextSize
+};
+//# sourceMappingURL=text-size.js.map

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-DCFS5Vof.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-DCFS5Vof.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.0",
+  "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/admin-parts.ts

@@ -16,11 +16,18 @@ import { formatPersonName } from "../lib/person-name";
 export type MaybePromise<T = unknown> = void | Promise<T>;
 
 /** A person as the admin parts show one: the two name parts of the auth contract
- *  (§3.2), an older whole `name` as the fallback, and the address. */
+ *  (§3.2), an older whole `name` as the fallback, and the address. The name parts are
+ *  read in either spelling — the kit's `first` / `last`, or server-kit's `PersonRef`
+ *  as it serialises (`first_name` / `last_name`), so an app hands the server's object
+ *  over as it came (keksdose's and kastlan's 0.30 adoptions mapped one to the other). */
 export interface AdminPerson {
   id?: string | number | null;
   first?: string | null;
   last?: string | null;
+  /** server-kit `PersonRef.first_name`; `first` wins when both are given. */
+  first_name?: string | null;
+  /** server-kit `PersonRef.last_name`; `last` wins when both are given. */
+  last_name?: string | null;
   /** A whole name, for an API that still sends `display_name` only. */
   name?: string | null;
   email?: string | null;
@@ -39,7 +46,7 @@ export function hasMessage(node: ReactNode): boolean {
 export function personLabel(person: AdminPerson | null | undefined, locale: string | undefined): string {
   if (!person) return "";
   return (
-    formatPersonName({ first: person.first, last: person.last }, locale) ||
+    formatPersonName({ first: person.first ?? person.first_name, last: person.last ?? person.last_name }, locale) ||
     (person.name ?? "").trim() ||
     (person.email ?? "").trim()
   );

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/auth/reset-password-form.tsx

@@ -144,7 +144,7 @@ export interface ResetPasswordFormProps
   forgotHref?: string;
   /** The app's words for a failed save (the device offline), or `undefined` for the
    *  kit's: `rateLimited` for a bare `429` (0.30.0), else `failed`. Not asked for
-   *  `token_invalid`, which is a state. */
+   *  `token_invalid` or `token_expired`, which are a state. */
   describeError?: (error: unknown) => ReactNode | undefined;
   /** The heading. Default `labels.title`; `null` draws none, for a page that puts it
    *  in `AuthLayout`'s `title` instead. */
@@ -299,7 +299,11 @@ export function ResetPasswordForm({
         },
         (error: unknown) => {
           setPending(false);
-          if (authErrorCode(error) === "token_invalid") {
+          // A link that died between the check and the save — used, or run out — is the
+          // dead-link state, under either code (0.31.1: keksdose mapped `token_expired`
+          // to it itself, `asDeadLink`).
+          const code = authErrorCode(error);
+          if (code === "token_invalid" || code === "token_expired") {
             setPassword("");
             setConfirm("");
             setPhase({ token, phase: { kind: "invalid" } });