@eifi1/ui-kit 0.45.0 → 0.46.1

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/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

@@ -82,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";

package/src/sync/db.ts

@@ -0,0 +1,125 @@
+import Dexie, { type Table, type Transaction } from "dexie";
+
+/*
+ * The device's copy for the sync engine (docs/local-first-harmonization.md §2.3, D10): ONE
+ * Dexie database with the engine's three tables — the rows as `/sync` carries them, the
+ * outbox of changes made here, and a key/value `meta` — plus the app's own (kastlan's
+ * `photos`). A generic store, not keksdose's per-entity tables.
+ */
+
+/** A row as `/sync` carries it: the entity (a table name), its sync id, the server's id
+ *  once it has one, and its fields. */
+export interface SyncedRow {
+  entity: string;
+  id: string;
+  pk: number | null;
+  data: Record<string, unknown>;
+  /** The server's stamp of the row, as the pull carried it BESIDE `data` (kastlan's wire);
+   *  the next edit here is stamped after it (`stampAfter`, D2). */
+  updated_at?: string | null;
+}
+
+/**
+ * Where a change made here stands. `pending`: queued. `sending`: in the request now out (a
+ * new edit starts a change of its own). `waiting`: refused with a hold code (a lapsed plan,
+ * `holdCodes`), sent again every round. `blocked`: refused with any other code, kept, sent
+ * again only on `retryBlocked()`. `rejected`: the server's rules refused it (`reason` says
+ * why); never sent again.
+ */
+export type OutboxStatus = "pending" | "sending" | "waiting" | "blocked" | "rejected";
+
+/** A change made on this device, for `/sync`, in the scope its caller named (D11). */
+export interface OutboxChange {
+  seq?: number;
+  scope: string;
+  entity: string;
+  id: string;
+  op: "upsert" | "delete";
+  data: Record<string, unknown>;
+  /** The edit's time on this device (D2), stamped with `stampAfter`. */
+  updated_at: string;
+  status: OutboxStatus;
+  /** The server's words: a rejection's `detail`, a refusal's `detail`. */
+  reason?: string;
+  /** The server's code: a rejection's or a refusal's `code`. */
+  code?: string;
+}
+
+export interface SyncMetaEntry {
+  key: string;
+  value: unknown;
+}
+
+/** The engine's database: its three tables, and the app's own under the names it gave. */
+export type SyncDb = Dexie & {
+  rows: Table<SyncedRow, [string, string]>;
+  outbox: Table<OutboxChange, number>;
+  meta: Table<SyncMetaEntry, string>;
+};
+
+/** A schema step of an existing database (kastlan's v2: `scope` on the outbox). */
+export interface SyncDbUpgrade {
+  version: number;
+  /** Stores this version adds or changes, beside the engine's and `extraStores`. */
+  stores?: Record<string, string | null>;
+  upgrade?(tx: Transaction): Promise<void> | void;
+}
+
+export interface CreateSyncDbOptions {
+  /** The app's own tables, Dexie schema strings: kastlan `{ photos: "id, roomId, status" }`. */
+  extraStores?: Record<string, string>;
+  /** Later versions of a database that exists on devices already, oldest first. */
+  upgrades?: readonly SyncDbUpgrade[];
+}
+
+/** The engine's own tables. `scope` is indexed: a round takes one scope's queue (D11). */
+export const SYNC_DB_STORES = {
+  rows: "[entity+id], entity",
+  outbox: "++seq, [entity+id], status, scope",
+  meta: "key",
+} as const;
+
+/**
+ * The `rows` schema with an `[entity+pk]` index (0.46.1), opt-in: the D16 pages start from a
+ * server id (`/meters/7`) and {@link rowByPk} finds its copy row by this index. Not in
+ * {@link SYNC_DB_STORES}, so no database on a device changes until its app names it in a
+ * version of its own — kastlan, whose devices are on v2: `upgrades: [..., { version: 3,
+ * stores: SYNC_DB_PK_INDEX }]`. A database new to the devices may take it at once:
+ * `extraStores: { ...SYNC_DB_PK_INDEX }`.
+ */
+export const SYNC_DB_PK_INDEX = {
+  rows: "[entity+id], entity, [entity+pk]",
+} as const;
+
+/**
+ * The copy row of the server's id `pk` in `entity` (0.46.1): by the `[entity+pk]` index when
+ * the database has it ({@link SYNC_DB_PK_INDEX}), else by a scan of the entity's rows.
+ * `undefined` when the copy holds no such row.
+ */
+export async function rowByPk(db: SyncDb, entity: string, pk: number): Promise<SyncedRow | undefined> {
+  if (db.rows.schema.idxByName["[entity+pk]"]) return db.rows.where("[entity+pk]").equals([entity, pk]).first();
+  return db.rows.where("entity").equals(entity).filter((row) => row.pk === pk).first();
+}
+
+/**
+ * Open (lazily, on first use) the sync database `name`: the engine's tables plus the app's
+ * `extraStores`, at version 1 or the last of `upgrades`. One database per account (kastlan:
+ * per account and company, `kastlan-handover-<user>-<company>`), and one engine on it (D15).
+ *
+ * An app whose database predates the engine names its next version in `upgrades` and moves
+ * its data there — kastlan: `{ version: 2, upgrade: (tx) => tx.table("outbox").toCollection()
+ * .modify({ scope: "handover" }) }`. Dexie diffs the schema against the one on the device.
+ * Name the app's own type for its tables: `createSyncDb<HandoverDb>(name, { extraStores })`.
+ */
+export function createSyncDb<D extends SyncDb = SyncDb>(name: string, options: CreateSyncDbOptions = {}): D {
+  const db = new Dexie(name) as D;
+  let stores: Record<string, string | null> = { ...SYNC_DB_STORES, ...options.extraStores };
+  db.version(1).stores(stores);
+  const upgrades = [...(options.upgrades ?? [])].sort((a, b) => a.version - b.version);
+  for (const step of upgrades) {
+    stores = { ...stores, ...step.stores };
+    const version = db.version(step.version).stores(stores);
+    if (step.upgrade) version.upgrade(step.upgrade);
+  }
+  return db;
+}