@eifi1/ui-kit 0.31.1 → 0.32.1

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 *\n * A hand-written seed (a test, a screenshot script) must carry `\"version\":1`: the store\n * drops a stored state of another version as a migration it doesn't know, silently\n * (keksdose's 0.32 report). The inline snippet reads `state.size` whatever the version,\n * so the two would disagree. In the kit's showcase, `?text-size=` needs no seed.\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`.\n *\n * The splash sizes in rem, and needs the root rules inline beside it, since the app's\n * stylesheet is a separate request and arrives after the splash paints (0.32.1,\n * keksdose's 0.32 report: that is every app, not an edge case):\n *\n * ```html\n * <style>html[data-text-size=large]{font-size:125%}html[data-text-size=xlarge]{font-size:150%}</style>\n * ```\n *\n * Under a hash-based Content Security Policy (`script-src 'sha256-…'`) this is a second\n * inline script with its own hash: add it to the policy, and recompute it whenever the\n * storage key or the account function in the call changes (keksdose added it to both\n * its Caddyfiles, and its guard test hashes every inline script).\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-FLyJf-kZ.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/wizard-summary.js

@@ -15,7 +15,7 @@ function WizardSummary({
   return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
     /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-[var(--text-primary)]", children: l.reviewTitle }),
     sections.map((section, sIdx) => /* @__PURE__ */ jsxs(Card, { children: [
-      /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { className: "pb-2", stackAction: false, children: [
         /* @__PURE__ */ jsx(CardTitle, { className: "text-base", children: section.label }),
         section.stepIndex !== void 0 && onEditStep && /* @__PURE__ */ jsx(CardAction, { children: /* @__PURE__ */ jsx(Tooltip, { label: l.edit, children: /* @__PURE__ */ jsx(
           IconButton,

package/dist/wizard/wizard-summary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from \"../components/ui\";\nimport { Tooltip } from \"../components/tooltip\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n *\n * A section with no `stepIndex` (file-level counts, a total) is a card without an\n * edit button. `disabled` greys every edit button at once — while the commit runs,\n * when jumping back would show a step whose edits can no longer reach the request.\n */\nexport function WizardSummary({\n  sections,\n  onEditStep,\n  disabled = false,\n  labels,\n}: {\n  sections: SummarySection[];\n  /** Called with the section's `stepIndex`. Optional only for a summary whose\n   *  sections name no step at all. */\n  onEditStep?: (stepIndex: number) => void;\n  /** Disable every edit button (e.g. `wizard.isSubmitting`). */\n  disabled?: boolean;\n  labels?: Partial<WizardLabels>;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">{l.reviewTitle}</h2>\n      {sections.map((section, sIdx) => (\n        <Card key={sIdx}>\n          {/* CardHeader is a grid, and CardAction is the top-right column it\n              reserves — the edit button has to go through it or it stacks under\n              the title instead of sitting beside it. */}\n          <CardHeader className=\"pb-2\">\n            <CardTitle className=\"text-base\">{section.label}</CardTitle>\n            {section.stepIndex !== undefined && onEditStep && (\n              <CardAction>\n                {/* The kit Tooltip, not a native `title`: it shows on keyboard focus too,\n                    and an app with a one-tooltip rule (keksdose dev#523) sees one. */}\n                <Tooltip label={l.edit}>\n                  <IconButton\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    aria-label={l.edit}\n                    disabled={disabled}\n                    onClick={() => onEditStep(section.stepIndex as number)}\n                  >\n                    <Pencil />\n                  </IconButton>\n                </Tooltip>\n              </CardAction>\n            )}\n          </CardHeader>\n          <CardContent>\n            <dl className=\"grid gap-2 text-sm\">\n              {section.items.map((item, iIdx) => (\n                <div key={iIdx}>\n                  {iIdx > 0 && (\n                    <div className=\"mb-2 border-t border-[var(--border)]\" role=\"presentation\" />\n                  )}\n                  <div className=\"flex items-start justify-between gap-4\">\n                    <dt className=\"text-[var(--text-muted)]\">{item.label}</dt>\n                    <dd className=\"text-end font-medium text-[var(--text-primary)]\">\n                      {item.value}\n                    </dd>\n                  </div>\n                </div>\n              ))}\n            </dl>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAqCM,cAMI,YANJ;AArCN,SAAS,cAAc;AACvB,SAAS,MAAM,YAAY,aAAa,YAAY,WAAW,kBAAkB;AACjF,SAAS,eAAe;AAExB,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AActB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAQG;AACD,QAAM,IAAI,aAAa,UAAU,uBAAuB,MAAM;AAE9D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,oDAAoD,YAAE,aAAY;AAAA,IAC/E,SAAS,IAAI,CAAC,SAAS,SACtB,qBAAC,QAIC;AAAA,2BAAC,cAAW,WAAU,QACpB;AAAA,4BAAC,aAAU,WAAU,aAAa,kBAAQ,OAAM;AAAA,QAC/C,QAAQ,cAAc,UAAa,cAClC,oBAAC,cAGC,8BAAC,WAAQ,OAAO,EAAE,MAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cAAY,EAAE;AAAA,YACd;AAAA,YACA,SAAS,MAAM,WAAW,QAAQ,SAAmB;AAAA,YAErD,8BAAC,UAAO;AAAA;AAAA,QACV,GACF,GACF;AAAA,SAEJ;AAAA,MACA,oBAAC,eACC,8BAAC,QAAG,WAAU,sBACX,kBAAQ,MAAM,IAAI,CAAC,MAAM,SACxB,qBAAC,SACE;AAAA,eAAO,KACN,oBAAC,SAAI,WAAU,wCAAuC,MAAK,gBAAe;AAAA,QAE5E,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,QAAG,WAAU,4BAA4B,eAAK,OAAM;AAAA,UACrD,oBAAC,QAAG,WAAU,mDACX,eAAK,OACR;AAAA,WACF;AAAA,WATQ,IAUV,CACD,GACH,GACF;AAAA,SAxCS,IAyCX,CACD;AAAA,KACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/wizard/wizard-summary.tsx"],"sourcesContent":["import { Pencil } from \"lucide-react\";\nimport { Card, CardAction, CardContent, CardHeader, CardTitle, IconButton } from \"../components/ui\";\nimport { Tooltip } from \"../components/tooltip\";\nimport type { SummarySection, WizardLabels } from \"./types\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\n\n/**\n * The review step: one card per section, each row a label/value pair, each card\n * carrying an edit button back to the step it came from.\n *\n * Sections are data, not children, because \"jump back to step N\" is the whole\n * point of the component and a caller assembling its own cards invariably drops\n * it. Labels and values are `ReactNode`, so a value can be a badge or a link.\n *\n * A section with no `stepIndex` (file-level counts, a total) is a card without an\n * edit button. `disabled` greys every edit button at once — while the commit runs,\n * when jumping back would show a step whose edits can no longer reach the request.\n */\nexport function WizardSummary({\n  sections,\n  onEditStep,\n  disabled = false,\n  labels,\n}: {\n  sections: SummarySection[];\n  /** Called with the section's `stepIndex`. Optional only for a summary whose\n   *  sections name no step at all. */\n  onEditStep?: (stepIndex: number) => void;\n  /** Disable every edit button (e.g. `wizard.isSubmitting`). */\n  disabled?: boolean;\n  labels?: Partial<WizardLabels>;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n\n  return (\n    <div className=\"space-y-4\">\n      <h2 className=\"text-lg font-semibold text-[var(--text-primary)]\">{l.reviewTitle}</h2>\n      {sections.map((section, sIdx) => (\n        <Card key={sIdx}>\n          {/* CardHeader is a grid, and CardAction is the top-right column it\n              reserves — the edit button has to go through it or it stacks under\n              the title instead of sitting beside it. `stackAction={false}`: the pencil\n              is named by `aria-label` and stays an icon at Large, so it keeps its\n              place beside the title there too (0.32.1). */}\n          <CardHeader className=\"pb-2\" stackAction={false}>\n            <CardTitle className=\"text-base\">{section.label}</CardTitle>\n            {section.stepIndex !== undefined && onEditStep && (\n              <CardAction>\n                {/* The kit Tooltip, not a native `title`: it shows on keyboard focus too,\n                    and an app with a one-tooltip rule (keksdose dev#523) sees one. */}\n                <Tooltip label={l.edit}>\n                  <IconButton\n                    size=\"sm\"\n                    variant=\"ghost\"\n                    aria-label={l.edit}\n                    disabled={disabled}\n                    onClick={() => onEditStep(section.stepIndex as number)}\n                  >\n                    <Pencil />\n                  </IconButton>\n                </Tooltip>\n              </CardAction>\n            )}\n          </CardHeader>\n          <CardContent>\n            <dl className=\"grid gap-2 text-sm\">\n              {section.items.map((item, iIdx) => (\n                <div key={iIdx}>\n                  {iIdx > 0 && (\n                    <div className=\"mb-2 border-t border-[var(--border)]\" role=\"presentation\" />\n                  )}\n                  <div className=\"flex items-start justify-between gap-4\">\n                    <dt className=\"text-[var(--text-muted)]\">{item.label}</dt>\n                    <dd className=\"text-end font-medium text-[var(--text-primary)]\">\n                      {item.value}\n                    </dd>\n                  </div>\n                </div>\n              ))}\n            </dl>\n          </CardContent>\n        </Card>\n      ))}\n    </div>\n  );\n}\n"],"mappings":";AAqCM,cAQI,YARJ;AArCN,SAAS,cAAc;AACvB,SAAS,MAAM,YAAY,aAAa,YAAY,WAAW,kBAAkB;AACjF,SAAS,eAAe;AAExB,SAAS,6BAA6B;AACtC,SAAS,oBAAoB;AActB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AACF,GAQG;AACD,QAAM,IAAI,aAAa,UAAU,uBAAuB,MAAM;AAE9D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,QAAG,WAAU,oDAAoD,YAAE,aAAY;AAAA,IAC/E,SAAS,IAAI,CAAC,SAAS,SACtB,qBAAC,QAMC;AAAA,2BAAC,cAAW,WAAU,QAAO,aAAa,OACxC;AAAA,4BAAC,aAAU,WAAU,aAAa,kBAAQ,OAAM;AAAA,QAC/C,QAAQ,cAAc,UAAa,cAClC,oBAAC,cAGC,8BAAC,WAAQ,OAAO,EAAE,MAChB;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,cAAY,EAAE;AAAA,YACd;AAAA,YACA,SAAS,MAAM,WAAW,QAAQ,SAAmB;AAAA,YAErD,8BAAC,UAAO;AAAA;AAAA,QACV,GACF,GACF;AAAA,SAEJ;AAAA,MACA,oBAAC,eACC,8BAAC,QAAG,WAAU,sBACX,kBAAQ,MAAM,IAAI,CAAC,MAAM,SACxB,qBAAC,SACE;AAAA,eAAO,KACN,oBAAC,SAAI,WAAU,wCAAuC,MAAK,gBAAe;AAAA,QAE5E,qBAAC,SAAI,WAAU,0CACb;AAAA,8BAAC,QAAG,WAAU,4BAA4B,eAAK,OAAM;AAAA,UACrD,oBAAC,QAAG,WAAU,mDACX,eAAK,OACR;AAAA,WACF;AAAA,WATQ,IAUV,CACD,GACH,GACF;AAAA,SA1CS,IA2CX,CACD;AAAA,KACH;AAEJ;","names":[]}

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-FLyJf-kZ.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.1",
   "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-action-log.tsx

@@ -47,7 +47,10 @@ export type AdminActionKind =
   | "transfer"
   | "deletion_request"
   | "deletion_cancel"
-  | "erase";
+  | "erase"
+  // 0.32.1 (keksdose's 0.32 report): server-kit 0.6's `AdminAction.PLAN`, an operator's
+  // plan change or grant (docs/billing-harmonization.md §6).
+  | "plan";
 
 /** Every {@link AdminActionKind}, in the contract's order. */
 export const ADMIN_ACTION_KINDS: readonly AdminActionKind[] = [
@@ -67,6 +70,7 @@ export const ADMIN_ACTION_KINDS: readonly AdminActionKind[] = [
   "deletion_request",
   "deletion_cancel",
   "erase",
+  "plan",
 ];
 
 /** One logged action — the app's `admin_actions` row with the people joined in. */
@@ -142,6 +146,7 @@ export const DEFAULT_ADMIN_ACTION_LOG_LABELS: AdminActionLogLabels = {
     deletion_request: "Deletion requested",
     deletion_cancel: "Deletion cancelled",
     erase: "Account erased",
+    plan: "Plan changed",
   },
 };
 

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;