@eifi1/ui-kit 0.44.0 → 0.46.0

package/src/offline/service-worker-updates.ts

@@ -0,0 +1,81 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * vite-plugin-pwa's `registerSW` from `virtual:pwa-register` (`registerType: "prompt"`) —
+ * the app passes it in, since a virtual module is the app's build's, not the kit's. It
+ * answers the `updateSW(reloadPage)` function.
+ */
+export type RegisterServiceWorker = (options: {
+  onNeedRefresh?: () => void;
+  onOfflineReady?: () => void;
+}) => (reloadPage?: boolean) => Promise<void>;
+
+/** What {@link createServiceWorkerUpdates} answers: one store per app, a module constant. */
+export interface ServiceWorkerUpdates {
+  /** Registers the service worker — once, however often it is called. Call it at start,
+   *  before the router renders, so the sign-in pages get the offline shell too. */
+  start: () => void;
+  /** Whether a new version waits. */
+  needRefresh: () => boolean;
+  /** For `useSyncExternalStore`. */
+  subscribe: (listener: () => void) => () => void;
+  /** Activates the waiting version and reloads (`updateSW(true)`). Before `start`, nothing. */
+  reload: () => void;
+  /** The person closed the prompt: the version keeps waiting, the prompt stays down. */
+  dismiss: () => void;
+}
+
+/**
+ * 0.46 (kastlan K3, docs/local-first-harmonization.md §1.5 D8): the service worker
+ * registered ONCE AT START, and its "a new version waits" state as a small store the
+ * prompt reads wherever it lives. vite-plugin-pwa's `useRegisterSW` registers when the
+ * component that calls it mounts: an app whose {@link PwaUpdatePrompt} sits in its
+ * signed-in shell (it reads the tour state, the route) would register only after sign-in,
+ * and the sign-in pages would lose the offline shell on a first visit.
+ *
+ * ```ts
+ * // shared/pwa/sw-updates.ts
+ * import { registerSW } from "virtual:pwa-register";
+ * export const swUpdates = createServiceWorkerUpdates(registerSW);
+ * // main.tsx, before render:   swUpdates.start();
+ * // the shell:                 <PwaUpdatePrompt {...useServiceWorkerUpdate(swUpdates)} hold={tourRunning} />
+ * ```
+ */
+export function createServiceWorkerUpdates(register: RegisterServiceWorker): ServiceWorkerUpdates {
+  let waiting = false;
+  let update: ((reloadPage?: boolean) => Promise<void>) | null = null;
+  const listeners = new Set<() => void>();
+  const emit = () => listeners.forEach((listener) => listener());
+  const set = (value: boolean) => {
+    if (waiting === value) return;
+    waiting = value;
+    emit();
+  };
+  return {
+    start: () => {
+      if (update) return;
+      update = register({ onNeedRefresh: () => set(true) });
+    },
+    needRefresh: () => waiting,
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    reload: () => {
+      void update?.(true);
+    },
+    dismiss: () => set(false),
+  };
+}
+
+/** {@link PwaUpdatePrompt}'s props from the store: `needRefresh`, `onReload`, `onDismiss`. */
+export function useServiceWorkerUpdate(updates: ServiceWorkerUpdates): {
+  needRefresh: boolean;
+  onReload: () => void;
+  onDismiss: () => void;
+} {
+  const needRefresh = useSyncExternalStore(updates.subscribe, updates.needRefresh, () => false);
+  return { needRefresh, onReload: updates.reload, onDismiss: updates.dismiss };
+}

package/src/offline/shared-computer-labels.ts

@@ -0,0 +1,8 @@
+// The English words of ./shared-computer, in a module with no component code (0.34, KS U8).
+
+import type { SharedComputerLabels } from "./shared-computer";
+
+export const DEFAULT_SHARED_COMPUTER_LABELS: SharedComputerLabels = {
+  label: "This is a shared computer",
+  hint: "No copy of your data stays on this device. Pages then open only with a connection.",
+};

package/src/offline/shared-computer.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { Checkbox } from "../components/checkbox";
+import { readSessionStored, readStored, removeStored, writeSessionStored, writeStored } from "../lib/safe-storage";
+import { DEFAULT_SHARED_COMPUTER_LABELS } from "./shared-computer-labels";
+
+/**
+ * "This is a shared computer" — a choice on the sign-in form that persists nothing
+ * (docs/local-first-harmonization.md §1.5 D6, D7). When it is on, the app does not mount
+ * the query persistence (`createQueryPersistence`): the cache lives in memory only.
+ *
+ * The choice must live exactly as long as the session it governs. By default it is held in
+ * `sessionStorage`, which fits a session that ends with the tab. An app whose session
+ * outlives the tab (a refresh token in `localStorage`: kastlan) passes `storage: "local"`
+ * and calls `setSharedComputer(false)` at every end of that session (logout, a failed
+ * refresh), beside removing the token. `isSharedComputer()` reads both places, so a choice
+ * made in either keeps the cache in memory. Where storage is blocked, `isSharedComputer()`
+ * is `false` and `setSharedComputer` does nothing.
+ */
+export interface SharedComputerLabels {
+  label: string;
+  /** The one line under it: what the choice does. */
+  hint: string;
+}
+
+// Defined in ./shared-computer-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SHARED_COMPUTER_LABELS };
+
+const KEY = "eifi1-shared-computer";
+
+/** Where the choice is held: `"session"` (this tab, the default) or `"local"` (as long as
+ *  a session kept in `localStorage`, until `setSharedComputer(false)`). */
+export type SharedComputerStorage = "session" | "local";
+
+/** Whether this session was signed in as on a shared computer, the choice held in either
+ *  place. `false` when storage is unavailable. */
+export function isSharedComputer(): boolean {
+  return readSessionStored(KEY) === "1" || readStored(KEY) === "1";
+}
+
+/** Records the choice in `options.storage` (default `"session"`), and only there; `false`
+ *  forgets it in both places. */
+export function setSharedComputer(on: boolean, options: { storage?: SharedComputerStorage } = {}): void {
+  const local = options.storage === "local";
+  writeSessionStored(KEY, on && !local ? "1" : null);
+  if (on && local) writeStored(KEY, "1");
+  else removeStored(KEY);
+}
+
+export interface SharedComputerChoiceProps {
+  /** Controlled. Left out, the box starts from {@link isSharedComputer}. */
+  checked?: boolean;
+  /** Told after the choice is stored. */
+  onCheckedChange?: (on: boolean) => void;
+  /** Where the choice is stored: see {@link setSharedComputer}. Default `"session"`. */
+  storage?: SharedComputerStorage;
+  disabled?: boolean;
+  className?: string;
+  labels?: LabelOverride<SharedComputerLabels>;
+}
+
+export function SharedComputerChoice({
+  checked,
+  onCheckedChange,
+  storage,
+  disabled,
+  className,
+  labels: labelsProp,
+}: SharedComputerChoiceProps) {
+  const labels = useKitLabels("sharedComputer", DEFAULT_SHARED_COMPUTER_LABELS, labelsProp);
+  const [own, setOwn] = useState(isSharedComputer);
+  const on = checked ?? own;
+  return (
+    <Checkbox
+      className={className}
+      label={labels.label}
+      description={labels.hint}
+      checked={on}
+      disabled={disabled}
+      onCheckedChange={(next) => {
+        setSharedComputer(next, { storage });
+        setOwn(next);
+        onCheckedChange?.(next);
+      }}
+    />
+  );
+}

package/src/offline/sign-out-pending-dialog-labels.ts

@@ -0,0 +1,21 @@
+// The English words of ./sign-out-pending-dialog, in a module with no component code: the
+// English catalogue (src/i18n/defaults.ts) imports them without the component (0.34, KS U8).
+// keksdose's reviewed words (nav.logout_queued_*, account-menu.tsx:247-317) are the canon.
+
+import type { SignOutPendingDialogLabels } from "./sign-out-pending-dialog";
+
+export const DEFAULT_SIGN_OUT_PENDING_DIALOG_LABELS: SignOutPendingDialogLabels = {
+  title: "Some changes have not been saved to the server yet",
+  lost: (count) =>
+    count === 1
+      ? "1 change is still waiting to sync. Logging out clears this device’s copy, and it is the only copy."
+      : `${count} changes are still waiting to sync. Logging out clears this device’s copy, and it is the only copy.`,
+  kept: (count) =>
+    count === 1
+      ? "1 change is still waiting to sync. It stays on this device for you and syncs the next time you log in here."
+      : `${count} changes are still waiting to sync. They stay on this device for you and sync the next time you log in here.`,
+  syncNow: "Sync now",
+  signOutAnyway: "Log out anyway",
+  discardWaiting: "Discard waiting changes",
+  cancel: "Cancel",
+};

package/src/offline/sign-out-pending-dialog.tsx

@@ -0,0 +1,135 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { Button } from "../components/button";
+import { DialogFrame } from "../components/dialog-frame";
+import { DEFAULT_SIGN_OUT_PENDING_DIALOG_LABELS } from "./sign-out-pending-dialog-labels";
+
+/**
+ * The question before an explicit sign-out while changes still wait to sync — keksdose's
+ * confirm (account-menu.tsx:247-317) as a kit dialog (docs/local-first-harmonization.md
+ * §1.5 D6, §1.6). Show it only when `queued > 0` and only on a sign-out someone asked for:
+ * never from a session-ended hook, which cannot ask anyone.
+ *
+ * "Sync now" is the primary action: the queued writes are the person's own data. It runs
+ * `onSyncNow`, is busy while that runs, then calls `onClose` without signing out — the
+ * count has moved and the caller re-evaluates (signs out at once when nothing is left, or
+ * opens this again with the new number). "Log out anyway" stays as the escape hatch, usable
+ * while a sync runs (a hanging one would trap the person otherwise): a device that cannot
+ * reach the server must still be able to sign out. Only a running discard holds it.
+ *
+ * The words depend on what the app does with the queue at sign-out (`keepsChanges`):
+ * kastlan keeps the outbox for its owner, keksdose wipes it — and keksdose's copy must not
+ * say the changes stay.
+ */
+export interface SignOutPendingDialogLabels {
+  title: string;
+  /** `keepsChanges={false}`: signing out destroys the device's copy. */
+  lost: (count: number) => string;
+  /** `keepsChanges`: the queue stays on the device for its owner. */
+  kept: (count: number) => string;
+  syncNow: string;
+  signOutAnyway: string;
+  /** Only with `onDiscardWaiting` and `waitingForPlan > 0` (the billing kit's words). */
+  discardWaiting: string;
+  cancel: string;
+}
+
+// Defined in ./sign-out-pending-dialog-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SIGN_OUT_PENDING_DIALOG_LABELS };
+
+export interface SignOutPendingDialogProps {
+  open: boolean;
+  /** Changes not yet on the server: pending + blocked. The tour `:pending` record is not
+   *  one of them (D6). */
+  queued: number;
+  /** Of those, the ones waiting for a plan (billing's read-only refusal). */
+  waitingForPlan: number;
+  /** Runs one sync round. The dialog closes when it settles, whatever it managed. */
+  onSyncNow: () => Promise<unknown> | void;
+  /** Signs out now, queue or not. */
+  onSignOutAnyway: () => void;
+  /** Lets the plan-waiting changes go; the dialog then signs out as asked. Without it
+   *  (or with `waitingForPlan` 0) the button is not shown. */
+  onDiscardWaiting?: () => Promise<unknown> | void;
+  /** `true` (kastlan): the changes stay on this device for their owner. `false`
+   *  (keksdose): they are lost. Picks the words. */
+  keepsChanges: boolean;
+  /** Room under the sentence — the billing kit's `waitingChanges` line. Shown only while
+   *  `waitingForPlan > 0`, so a 0-count line never shows. */
+  extra?: ReactNode;
+  /** Cancel, Escape, the X — and after "Sync now". */
+  onClose: () => void;
+  labels?: LabelOverride<SignOutPendingDialogLabels>;
+}
+
+export function SignOutPendingDialog({
+  open,
+  queued,
+  waitingForPlan,
+  onSyncNow,
+  onSignOutAnyway,
+  onDiscardWaiting,
+  keepsChanges,
+  extra,
+  onClose,
+  labels: labelsProp,
+}: SignOutPendingDialogProps) {
+  const labels = useKitLabels("signOutPending", DEFAULT_SIGN_OUT_PENDING_DIALOG_LABELS, labelsProp);
+  const [syncing, setSyncing] = useState(false);
+  const [discarding, setDiscarding] = useState(false);
+
+  const syncNow = async () => {
+    setSyncing(true);
+    try {
+      await onSyncNow();
+    } catch {
+      /* whatever the sync managed, the decision is the person's again */
+    } finally {
+      setSyncing(false);
+    }
+    onClose();
+  };
+
+  const discard = async () => {
+    if (!onDiscardWaiting) return;
+    setDiscarding(true);
+    try {
+      await onDiscardWaiting();
+    } finally {
+      setDiscarding(false);
+    }
+    onSignOutAnyway();
+  };
+
+  return (
+    <DialogFrame
+      open={open}
+      role="alertdialog"
+      onClose={onClose}
+      title={labels.title}
+      description={keepsChanges ? labels.kept(queued) : labels.lost(queued)}
+      closeButton
+      actions={
+        <>
+          <Button variant="secondary" onClick={onClose}>
+            {labels.cancel}
+          </Button>
+          {onDiscardWaiting && waitingForPlan > 0 && (
+            <Button variant="secondary" pending={discarding} disabled={syncing} onClick={() => void discard()}>
+              {labels.discardWaiting}
+            </Button>
+          )}
+          <Button pending={syncing} disabled={discarding} onClick={() => void syncNow()}>
+            {labels.syncNow}
+          </Button>
+          <Button variant="secondary" disabled={discarding} onClick={onSignOutAnyway}>
+            {labels.signOutAnyway}
+          </Button>
+        </>
+      }
+    >
+      {waitingForPlan > 0 && (typeof extra === "string" ? <p className="text-sm text-muted">{extra}</p> : extra)}
+    </DialogFrame>
+  );
+}

package/src/offline.ts

@@ -0,0 +1,32 @@
+// `@eifi1/ui-kit/offline` — local-first phase 1 (docs/local-first-harmonization.md §1.6,
+// 0.45): the persisted query cache with its scrub list, the sign-out question while changes
+// wait, the service-worker update prompt, and the shared-computer choice.
+//
+// The only entry point that requires `@tanstack/react-query`,
+// `@tanstack/react-query-persist-client`, `@tanstack/query-async-storage-persister` and
+// `idb-keyval` — optional peers for that reason. NOT re-exported from the main barrel, which
+// would make them everyone's install; the packaging contract test holds that line.
+export { createQueryPersistence, DEFAULT_SCRUB_FIELDS, isCacheSafe, removeStaleQueryCopies } from "./offline/query-persistence";
+export type {
+  QueryPersistence,
+  QueryPersistenceOptions,
+  QueryPersistenceStorage,
+  RemoveStaleQueryCopiesOptions,
+  ScrubField,
+} from "./offline/query-persistence";
+export { SignOutPendingDialog, DEFAULT_SIGN_OUT_PENDING_DIALOG_LABELS } from "./offline/sign-out-pending-dialog";
+export type { SignOutPendingDialogProps, SignOutPendingDialogLabels } from "./offline/sign-out-pending-dialog";
+export { PwaUpdatePrompt, DEFAULT_PWA_UPDATE_PROMPT_LABELS } from "./offline/pwa-update-prompt";
+export type { PwaUpdatePromptProps, PwaUpdatePromptLabels } from "./offline/pwa-update-prompt";
+// 0.46 (kastlan K3): the service worker registered once at start, its update state as a store.
+export { createServiceWorkerUpdates, useServiceWorkerUpdate } from "./offline/service-worker-updates";
+export type { RegisterServiceWorker, ServiceWorkerUpdates } from "./offline/service-worker-updates";
+export {
+  SharedComputerChoice,
+  DEFAULT_SHARED_COMPUTER_LABELS,
+  isSharedComputer,
+  setSharedComputer,
+} from "./offline/shared-computer";
+export type { SharedComputerChoiceProps, SharedComputerLabels, SharedComputerStorage } from "./offline/shared-computer";
+// 0.46 (§2.3): the leaf utilities, shared with `@eifi1/ui-kit/sync` from one module that imports no peer.
+export { isOfflineError, readLocalFirst, stampAfter, writeLocalFirst } from "./offline/local-first";

package/src/push-worker.ts

@@ -0,0 +1,25 @@
+// `@eifi1/ui-kit/push-worker` — the service worker's half of Web Push (0.46,
+// docs/notifications-harmonization.md §10.6 rule 5): re-registering a subscription the browser
+// rotated. A worker bundle imports from here, never from the main barrel, which reaches React
+// and the DOM components:
+//
+//     // sw.ts
+//     import { handlePushSubscriptionChange } from "@eifi1/ui-kit/push-worker";
+//
+// Worker-safe: this entry reaches no package and no module but src/notifications/push-worker.ts
+// (packaging-contract.test.ts, scripts/check-module-graph.mjs, scripts/verify-package.mjs).
+// The main barrel keeps re-exporting the same names, so an existing import keeps working.
+export {
+  PUSH_SUBSCRIPTION_CHANGED,
+  handlePushSubscriptionChange,
+  pushSubscriptionInput,
+  resubscribeAfterChange,
+} from "./notifications/push-worker";
+export type {
+  PushReplaceInput,
+  PushResubscribeOutcome,
+  PushSubscriptionChangeEventLike,
+  PushSubscriptionChangeOptions,
+  PushSubscriptionInput,
+  PushWorkerScope,
+} from "./notifications/push-worker";

package/src/shell/account-menu-text-size.tsx

@@ -0,0 +1,77 @@
+import { AArrowDown, AArrowUp, ALargeSmall } from "lucide-react";
+import { IconButton } from "../components/icon-button";
+import { useAppearanceLabels, type AppearanceLabels } from "../components/appearance-labels";
+import type { LabelOverride } from "../i18n/kit-labels";
+import { TEXT_SIZES, useTextSize, type TextSize } from "../theme/text-size";
+
+export interface AccountMenuTextSizeProps {
+  /** The size in force. Default: the one on `<html>` ({@link useTextSize}), which is the
+   *  size whoever applied it put there. */
+  value?: TextSize;
+  /**
+   * A step: the next size down or up. The app applies it and keeps it as its Settings ▸
+   * Appearance does — `useAccountAppearance`'s `pickTextSize` (this device, and the
+   * account when signed in), with `appearance.saveFailed` as the toast when the account
+   * refused. The kit does not apply it itself, so the two places can never disagree.
+   */
+  onPick: (size: TextSize) => void;
+  /** The row's name. Default: `appearance.textSize` ("Text size"). */
+  label?: string;
+  /** The `appearance` words (`textSize`, `textSizes`, `textSmaller`, `textLarger`). */
+  labels?: LabelOverride<AppearanceLabels>;
+}
+
+/**
+ * The text size one tap away, INSIDE the account menu (0.46, keksdose live #426, its
+ * `TextSizeRow`): the row's icon and name, the size in force, and A− / A+, which step
+ * through {@link TEXT_SIZES} (Normal → Large → Extra large). A− is disabled at the
+ * smallest, A+ at the largest. The browser's pinch zoom stays as it is — this is the
+ * quick path to the setting, not a replacement for zoom.
+ *
+ * It renders its own `<li>`: drop it into `TopBarActionMenu`'s `children` beside
+ * `AccountMenuLanguage`. The menu promotes the two buttons to `menuitem`s, so ↑/↓ reach
+ * them like every other row, and it stays open on a step: the person sees the page grow
+ * behind it and can step again. The size's name is a polite live region, so a step is
+ * announced.
+ */
+export function AccountMenuTextSize({ value, onPick, label, labels: labelsProp }: AccountMenuTextSizeProps) {
+  const labels = useAppearanceLabels(labelsProp);
+  const onHtml = useTextSize().size;
+  const size = value ?? onHtml;
+  const index = TEXT_SIZES.indexOf(size);
+  const step = (by: -1 | 1) => {
+    const next = TEXT_SIZES[index + by];
+    if (next) onPick(next);
+  };
+  return (
+    <li data-account-menu-text-size="" className="flex items-center gap-2 px-3 py-1.5 text-sm">
+      <ALargeSmall aria-hidden className="size-4 shrink-0 text-muted" />
+      <span className="min-w-0 flex-1 truncate">
+        {label ?? labels.textSize}
+        <span className="ms-2 text-xs text-muted" aria-live="polite">
+          {labels.textSizes[size]}
+        </span>
+      </span>
+      <IconButton
+        size="sm"
+        label={labels.textSmaller}
+        labelVisible={false}
+        tooltip={false}
+        disabled={index <= 0}
+        onClick={() => step(-1)}
+      >
+        <AArrowDown />
+      </IconButton>
+      <IconButton
+        size="sm"
+        label={labels.textLarger}
+        labelVisible={false}
+        tooltip={false}
+        disabled={index >= TEXT_SIZES.length - 1}
+        onClick={() => step(1)}
+      >
+        <AArrowUp />
+      </IconButton>
+    </li>
+  );
+}

package/src/shell/admin-menu.tsx

@@ -25,11 +25,19 @@ function badgeText(badge: number | null | undefined): string | null {
  * pending count's tone, with the number for the eye and `adminArea.waiting` for a reader
  * ("Administration, 3 waiting"). `null` for no count.
  */
-function WaitingBadge({ badge, labels }: { badge: number | null | undefined; labels: AdminAreaLabels }) {
+function WaitingBadge({
+  badge,
+  labels,
+  className,
+}: {
+  badge: number | null | undefined;
+  labels: AdminAreaLabels;
+  className?: string;
+}) {
   const text = badgeText(badge);
   if (text === null) return null;
   return (
-    <Chip size="sm" variant="solid" tone="warning" data-slot="admin-badge">
+    <Chip size="sm" variant="solid" tone="warning" data-slot="admin-badge" className={className}>
       <span aria-hidden>{text}</span>
       {/* The comma parts it from the row's label in the name: "Administration, 3 waiting". */}
       <span className="sr-only-fixed">, {labels.waiting(badge as number)}</span>
@@ -37,6 +45,35 @@ function WaitingBadge({ badge, labels }: { badge: number | null | undefined; lab
   );
 }
 
+export interface AdminWaitingBadgeProps {
+  /** The waiting count: only work that waits on this admin. `0`, `null` or none draws
+   *  nothing; past 99 it reads "99+". */
+  count: number | null | undefined;
+  /** Prop > `<UiKitProvider labels={{ adminArea }}>` > English. */
+  labels?: LabelOverride<AdminAreaLabels>;
+  className?: string;
+}
+
+/**
+ * The waiting pill of {@link AdminMenuRow} on its own (0.45, docs/admin-harmonization.md
+ * §9.3.4): the `solid` warning count, "99+" past 99, nothing for 0. Fit for `IconButton`'s
+ * `badge` — kastlan's top-bar platform button. There the badge is DECORATIVE (`aria-hidden`
+ * by IconButton), so the button's name carries the count: `adminArea.waitingLabel`.
+ *
+ *     const area = useAdminAreaLabels();
+ *     <IconButton
+ *       label={waiting > 0 ? area.waitingLabel("Platform", waiting) : "Platform"}
+ *       badge={<AdminWaitingBadge count={waiting} />}
+ *       …
+ *     />
+ *
+ * Read on its own (outside an IconButton), the pill still says ", 3 waiting" to a reader.
+ */
+export function AdminWaitingBadge({ count, labels: labelsProp, className }: AdminWaitingBadgeProps) {
+  const labels = useAdminAreaLabels(labelsProp);
+  return <WaitingBadge badge={count} labels={labels} className={className} />;
+}
+
 export interface AdminMenuEntryOptions {
   /** The admin area. Default `/admin`. */
   href?: string;
@@ -136,7 +173,7 @@ export function AdminMenuRow({ href = "/admin", badge, onNavigate, current, labe
         renderLink={({ href: to, ...p }) => <Link to={to} {...p} />}
         onClick={onNavigate ? () => onNavigate() : undefined}
         leading={<ShieldCheck className="size-4" aria-hidden />}
-        trailing={badgeText(badge) === null ? undefined : <WaitingBadge badge={badge} labels={labels} />}
+        trailing={badgeText(badge) === null ? undefined : <AdminWaitingBadge count={badge} labels={labels} />}
         current={current}
       >
         {labels.title}

package/src/shell/top-bar-actions.tsx

@@ -24,6 +24,10 @@ export interface TopBarActionsProps {
   dev?: ReactNode;
   /** kastlan's platform button. */
   platform?: ReactNode;
+  /** 0.46 (docs/notifications-harmonization.md §10.1): `NotificationBell`, right before the
+   *  account menu. Optional per app: an app shows the bell or an unread dot on the avatar,
+   *  never both (keksdose keeps its dot and leaves this empty). */
+  notifications?: ReactNode;
   /** The account menu. When it is set the signed-out slots are not drawn. */
   account?: ReactNode;
   /** Signed out (§6.6): the bar's `LanguageMenu`, since there is no account menu to hold
@@ -45,6 +49,7 @@ export const TOP_BAR_ACTION_ORDER = [
   "sync",
   "dev",
   "platform",
+  "notifications",
   "account",
   "language",
   "signIn",
@@ -55,7 +60,7 @@ const present = (node: ReactNode) => node !== undefined && node !== null && node
 /**
  * The top bar's actions in the one order every app shares (§2.1): company switcher ·
  * Search · Theme · Feedback · Tours (· Assistant) · Sync · dev role · dev plan · platform ·
- * account menu — and, signed out, Language · Sign in where the account menu goes (§6.6).
+ * notifications (the bell, 0.46) · account menu — and, signed out, Language · Sign in where the account menu goes (§6.6).
  * The app fills the slots it has; an empty slot is skipped, so it leaves no gap.
  *
  * It draws a fragment, no box of its own: hand it to `TopBar`'s `actions`, whose row

package/src/shell.ts

@@ -20,6 +20,10 @@ export type { AdminMenuEntryOptions, AdminMenuRowProps } from "./shell/admin-men
 // 0.43.0 (kastlan): the entry with the provider's words.
 export { useAdminMenuEntry } from "./shell/admin-menu";
 export type { UseAdminMenuEntryOptions } from "./shell/admin-menu";
+// 0.45.0 (docs/admin-harmonization.md §9.3.4): the row's waiting pill on its own, for
+// IconButton's `badge` (kastlan's platform button); its name is `adminArea.waitingLabel`.
+export { AdminWaitingBadge } from "./shell/admin-menu";
+export type { AdminWaitingBadgeProps } from "./shell/admin-menu";
 // 0.31.0: the settings and admin pages' shell (docs/settings-harmonization.md §3, §5).
 export { SettingsLayout, SETTINGS_SEARCH_THRESHOLD } from "./settings/settings-layout";
 export type { SettingsLayoutProps, SettingsLayoutWidth, SettingsDocumentTitleParts } from "./settings/settings-layout";
@@ -78,6 +82,9 @@ export { TopBarActions, TOP_BAR_ACTION_ORDER } from "./shell/top-bar-actions";
 export type { TopBarActionsProps } from "./shell/top-bar-actions";
 export { AccountMenuLanguage } from "./shell/account-menu-language";
 export type { AccountMenuLanguageProps, AccountMenuLanguageOption } from "./shell/account-menu-language";
+// 0.46.0 (keksdose live #426): A− / A+ for the text size, beside the language.
+export { AccountMenuTextSize } from "./shell/account-menu-text-size";
+export type { AccountMenuTextSizeProps } from "./shell/account-menu-text-size";
 export { TourMenu } from "./shell/tour-menu";
 export type { TourMenuProps, TourMenuTour } from "./shell/tour-menu";
 export { SyncStatusIndicator, syncState } from "./shell/sync-status-indicator";