@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/shell/dev-menu.tsx

@@ -126,6 +126,11 @@ const isRow = (entry: TopBarMenuEntry) => entry.kind !== "heading" && entry.kind
  *
  * Nothing renders unless `enabled`, and nothing with no row to show. The panel scrolls
  * (`TopBarActionMenu`'s `scrollable`): some 25 rows ran off a 390×844 phone.
+ *
+ * From `md` up the groups stand side by side, one column each, in that order (0.51.4,
+ * `TopBarActionMenu`'s `columns`; keksdose dev #640, Marcel: "Each group gets a column").
+ * "Back to {role}" stays under the roles. A desktop too narrow for all of them wraps
+ * the columns onto a second row; a phone keeps the one scrolling column.
  */
 export function DevMenu<R extends string, P extends string>({
   enabled,
@@ -177,9 +182,12 @@ export function DevMenu<R extends string, P extends string>({
     roles && roles.length > 0 && role !== undefined && onRole
       ? [
           { kind: "heading", key: "head-role", label: words.roleHeading },
-          ...roles.map(
-            (r): TopBarMenuEntry => ({ key: `role-${r}`, label: roleLabel(r), checked: r === role, onSelect: () => pickRole(r) }),
-          ),
+          ...roles.map((r): TopBarMenuEntry => ({
+            key: `role-${r}`,
+            label: roleLabel(r),
+            checked: r === role,
+            onSelect: () => pickRole(r),
+          })),
           // Behind a rule, which ends the role group: "Back to" is a way out, not a role.
           ...(original !== undefined && original !== role
             ? ([
@@ -220,9 +228,12 @@ export function DevMenu<R extends string, P extends string>({
               words.planHeading
             ),
           },
-          ...plans.map(
-            (p): TopBarMenuEntry => ({ key: `plan-${p}`, label: planLabel(p), checked: p === plan, onSelect: () => onPlan(p) }),
-          ),
+          ...plans.map((p): TopBarMenuEntry => ({
+            key: `plan-${p}`,
+            label: planLabel(p),
+            checked: p === plan,
+            onSelect: () => onPlan(p),
+          })),
         ]
       : [];
 
@@ -254,6 +265,7 @@ export function DevMenu<R extends string, P extends string>({
       aria-label={name}
       entries={entries}
       scrollable
+      columns
     />
   );
 }

package/src/shell/option-switcher-menu.tsx

@@ -60,9 +60,7 @@ export function OptionSwitcherMenu<T extends string>({
       {(close) => (
         <ul className="py-1">
           {heading && (
-            <li className="px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder">
-              {heading}
-            </li>
+            <li className="px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder">{heading}</li>
           )}
           {options.map((opt) => (
             <li key={opt.value}>

package/src/shell/sync-status-indicator.tsx

@@ -160,10 +160,7 @@ export function SyncStatusIndicator({
 
   const onlineOnly = storage === "none";
   // Online-only: nothing waits on the device, so only offline, error, saving and settled.
-  const state = syncState(
-    onlineOnly ? { ...status, pending: 0, blocked: 0, waitingForPlan: 0 } : status,
-    refreshing,
-  );
+  const state = syncState(onlineOnly ? { ...status, pending: 0, blocked: 0, waitingForPlan: 0 } : status, refreshing);
   const data = dataAttributes(rest);
   if (hideWhenIdle && state === "synced") return null;
 
@@ -190,12 +187,13 @@ export function SyncStatusIndicator({
       text = words.pending(status.pending);
       break;
     default:
-      text = !onlineOnly && status.lastSyncedAt
-        ? words.syncedAt(
-            // A clock time in the UI's language, never the browser's (keksdose live #246).
-            new Date(status.lastSyncedAt).toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }),
-          )
-        : words.idle;
+      text =
+        !onlineOnly && status.lastSyncedAt
+          ? words.syncedAt(
+              // A clock time in the UI's language, never the browser's (keksdose live #246).
+              new Date(status.lastSyncedAt).toLocaleTimeString(locale, { hour: "2-digit", minute: "2-digit" }),
+            )
+          : words.idle;
   }
   if (scope) {
     text = state === "offline" && scope.offline ? scope.offline : words.scoped(scope.name, text);
@@ -272,7 +270,10 @@ export function SyncStatusIndicator({
         {...data}
         role="status"
         data-sync-state={state}
-        className={cn("relative inline-flex size-9 shrink-0 items-center justify-center [&>svg]:size-5", TEXT_TONE[tone])}
+        className={cn(
+          "relative inline-flex size-9 shrink-0 items-center justify-center [&>svg]:size-5",
+          TEXT_TONE[tone],
+        )}
       >
         {glyph}
         <span className="sr-only">{name}</span>
@@ -288,7 +289,8 @@ export function SyncStatusIndicator({
     </Tooltip>
   );
 
-  if (!showLabel || !short) return className ? <span className={cn("inline-flex", className)}>{control}</span> : control;
+  if (!showLabel || !short)
+    return className ? <span className={cn("inline-flex", className)}>{control}</span> : control;
   return (
     <span className={cn("inline-flex items-center gap-1", className)}>
       {control}

package/src/shell/top-bar-parts-labels.ts

@@ -115,9 +115,7 @@ export const DEFAULT_TOP_BAR_PARTS_LABELS: TopBarPartsLabels = {
   },
   sync: {
     blocked: (count) =>
-      count === 1
-        ? "1 change cannot be sent from this device"
-        : `${count} changes cannot be sent from this device`,
+      count === 1 ? "1 change cannot be sent from this device" : `${count} changes cannot be sent from this device`,
     offline: "Offline — changes are saved on this device and will sync when you reconnect",
     refused: "The server refused the last sync",
     syncing: "Syncing…",

package/src/shell/topbar-action-menu.tsx

@@ -1,5 +1,5 @@
 import { useId, useLayoutEffect, useRef } from "react";
-import type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";
+import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from "react";
 import { Link } from "react-router";
 import { cn } from "../lib/cn";
 import { HoverMenu, type HoverMenuProps } from "../components/hover-menu";
@@ -83,7 +83,8 @@ type DividerEntry = Extract<TopBarMenuEntry, { kind: "divider" }>;
 type RowEntry = Exclude<TopBarMenuEntry, HeadingEntry | DividerEntry>;
 
 /** What the panel draws from `entries`: loose rows and rules, and headed groups. */
-type Block = { kind: "loose"; entry: RowEntry | DividerEntry } | { kind: "group"; heading: HeadingEntry; rows: RowEntry[] };
+type Block =
+  { kind: "loose"; entry: RowEntry | DividerEntry } | { kind: "group"; heading: HeadingEntry; rows: RowEntry[] };
 
 /**
  * Cut `entries` into blocks: a heading opens a group that takes the rows after it until
@@ -109,6 +110,40 @@ function toBlocks(entries: readonly TopBarMenuEntry[]): Block[] {
   return blocks.filter((block) => block.kind === "loose" || block.rows.length > 0);
 }
 
+/** One column of `columns` (0.51.4): a group and the loose entries after it, up to the
+ *  next group — so a group's own way out behind a rule (DevMenu's "Back to {role}") stays
+ *  under it instead of running across the panel. */
+type LooseBlock = Extract<Block, { kind: "loose" }>;
+type Column = { group: Extract<Block, { kind: "group" }>; after: Array<RowEntry | DividerEntry>; index: number };
+
+/** `blocks` as the columns layout draws them: what comes before the first group, then a
+ *  column per group. A rule that would end a column is dropped: the column's edge is the
+ *  separation there. */
+function toColumns(blocks: readonly Block[]): { lead: LooseBlock[]; columns: Column[] } {
+  const lead: LooseBlock[] = [];
+  const columns: Column[] = [];
+  blocks.forEach((block, index) => {
+    if (block.kind === "group") columns.push({ group: block, after: [], index });
+    else if (columns.length === 0) lead.push(block);
+    else columns[columns.length - 1]!.after.push(block.entry);
+  });
+  for (const column of columns) {
+    while (column.after.at(-1)?.kind === "divider") column.after.pop();
+  }
+  return { lead, columns };
+}
+
+/**
+ * `columns`' panel: each column 14rem, the panel as wide as its columns (a CSS variable
+ * the list sets) but never wider than the glass, and from `md` up only. The grid places
+ * as many 14rem columns as that width holds, so a narrow desktop wraps the groups onto a
+ * second row instead of scrolling sideways. The header, the title and the footer span
+ * the row.
+ */
+const COLUMNS_PANEL =
+  "md:grid md:grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] md:items-start md:gap-y-2 md:w-[min(calc(100vw-2rem),var(--menu-columns-width))]";
+const SPAN_ALL = "md:col-span-full";
+
 /**
  * The non-interactive identity block at the top of an account menu — kastlan's name +
  * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the
@@ -133,7 +168,8 @@ export interface TopBarMenuHeader {
 /** What a control is, as far as `HoverMenu` is concerned, when it lives in the header
  *  or the footer: not a menu row. */
 const SECTION_CONTROLS = "a[href]:not([role]),button:not([role])";
-const TABBABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]';
+const TABBABLE =
+  "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]";
 
 /**
  * `scrollable`'s cap (0.51, DevMenu): the glass under the bar. Under `TopBar` the panel
@@ -225,6 +261,7 @@ export function TopBarActionMenu({
   align,
   panelClassName,
   scrollable = false,
+  columns = false,
   triggerAttributes,
 }: {
   /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */
@@ -308,6 +345,19 @@ export function TopBarActionMenu({
    * header and the footer are inside the list and scroll with the rows.
    */
   scrollable?: boolean;
+  /**
+   * From `md` up, lay the heading groups side by side, one column per group (0.51.4,
+   * `DevMenu`; keksdose dev #640, Marcel: "Each group gets a column. That way it would be
+   * much better visible for desktop users"). Below `md`, the one column as before.
+   *
+   * A column is a group and the loose rows after it up to the next heading, so a row
+   * behind a rule at the end of a group (DevMenu's "Back to {role}") stays in that
+   * group's column. Loose rows before the first heading, the header, the menu-wide
+   * `heading` and the footer span the panel. The DOM order is unchanged, so ↓/↑ walk the
+   * rows down one column and on into the next, as a reader reads them. `leading` and
+   * `children` rows take a cell each; add `md:col-span-full` to one that should span.
+   */
+  columns?: boolean;
   /** `data-*` attributes for the trigger itself — a tour's anchor (`data-tour`), a test
    *  hook. The parts built on this menu (`TourMenu`) pass theirs through here. */
   triggerAttributes?: { [key: `data-${string}`]: string | number | boolean | undefined };
@@ -316,6 +366,10 @@ export function TopBarActionMenu({
   // entry's `key`, which is the caller's text and may hold a space — and a space in
   // `aria-labelledby` is a list separator.
   const uid = useId();
+  const blocks = toBlocks(entries);
+  const grouped = columns ? toColumns(blocks) : null;
+  // A menu with no group has nothing to put side by side: the list as always.
+  const laidOut = grouped && grouped.columns.length > 0 ? grouped : null;
   return (
     <HoverMenu
       aria-label={ariaLabel}
@@ -350,8 +404,7 @@ export function TopBarActionMenu({
             <>
               <span className="sr-only">{ariaLabel}</span>
               {/* The space keeps the name from running into the face's text ("Account
-                  menu3 unread"); as a flex item it takes no room. */}
-              {" "}
+                  menu3 unread"); as a flex item it takes no room. */}{" "}
               {trigger({ open })}
             </>,
           );
@@ -380,8 +433,8 @@ export function TopBarActionMenu({
         const footerClass =
           "flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted [&_a:hover]:text-primary [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-focus [&_a:focus-visible]:ring-brand";
         /** One action or link row — loose, or inside a heading's group. */
-        const row = (entry: RowEntry) => (
-          <li key={entry.key}>
+        const row = (entry: RowEntry, className?: string) => (
+          <li key={entry.key} className={className}>
             {entry.kind === "link" ? (
               <MenuItem
                 href={entry.to}
@@ -413,58 +466,90 @@ export function TopBarActionMenu({
             )}
           </li>
         );
+        /** A rule or a row outside any group; `span` stretches it across the columns. */
+        const loose = (block: LooseBlock, span: boolean) => {
+          const entry = block.entry;
+          if (entry.kind === "divider") {
+            return <li key={entry.key} className={cn("my-1 border-t border-subtle", span && SPAN_ALL)} />;
+          }
+          return row(entry, span ? SPAN_ALL : undefined);
+        };
+        /** A heading's group: its name, then its rows in a named `role="group"`. */
+        const group = (block: Extract<Block, { kind: "group" }>, i: number, tight: boolean, inColumn = false) => {
+          const headingId = `${uid}-group-${i}`;
+          return (
+            <li key={block.heading.key} role="none">
+              <div
+                id={headingId}
+                role="presentation"
+                className={cn(
+                  "px-3 pb-0.5 text-caption font-semibold uppercase tracking-wide text-muted [overflow-wrap:anywhere]",
+                  // A column's heading lines up with its neighbours' at the top of the
+                  // grid row; under `md` the columns stack, and it spaces like the list's.
+                  tight ? "pt-1" : cn("pt-2.5", inColumn && "md:pt-1"),
+                )}
+              >
+                {block.heading.label}
+              </div>
+              <ul role="group" aria-labelledby={headingId}>
+                {block.rows.map((entry) => row(entry))}
+              </ul>
+            </li>
+          );
+        };
         return (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel
-          <ul className={cn("py-1", scrollable && SCROLLABLE_PANEL, panelClassName)} onKeyDown={keepTabInsidePanel}>
+          <ul
+            className={cn("py-1", scrollable && SCROLLABLE_PANEL, laidOut && COLUMNS_PANEL, panelClassName)}
+            style={
+              laidOut ? ({ "--menu-columns-width": `${laidOut.columns.length * 14}rem` } as CSSProperties) : undefined
+            }
+            onKeyDown={keepTabInsidePanel}
+          >
             {header && (
-              <MenuSection className="mb-1 border-b border-subtle px-3 py-2">
+              <MenuSection className={cn("mb-1 border-b border-subtle px-3 py-2", laidOut && SPAN_ALL)}>
                 <div className="truncate text-sm font-medium text-primary">{header.title}</div>
-                {header.subtitle != null && (
-                  <div className="truncate text-xs text-muted">{header.subtitle}</div>
-                )}
+                {header.subtitle != null && <div className="truncate text-xs text-muted">{header.subtitle}</div>}
                 {headerExtra != null && headerExtra !== false && <div className="mt-1">{headerExtra}</div>}
               </MenuSection>
             )}
             {heading && (
-              <li className="px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder">
+              <li
+                className={cn(
+                  "px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder",
+                  laidOut && SPAN_ALL,
+                )}
+              >
                 {heading}
               </li>
             )}
             {leading?.(close)}
-            {toBlocks(entries).map((block, i, blocks) => {
-              if (block.kind === "loose") {
-                const entry = block.entry;
-                if (entry.kind === "divider") {
-                  return <li key={entry.key} className="my-1 border-t border-subtle" />;
-                }
-                return row(entry);
-              }
-              const headingId = `${uid}-group-${i}`;
-              const before = blocks[i - 1];
-              // Under a rule (or at the top of the rows) the rule's margin is the gap;
-              // straight under another group's last row the heading makes its own.
-              const tight = !before || (before.kind === "loose" && before.entry.kind === "divider");
-              return (
-                <li key={block.heading.key} role="none">
-                  <div
-                    id={headingId}
-                    role="presentation"
-                    className={cn(
-                      "px-3 pb-0.5 text-caption font-semibold uppercase tracking-wide text-muted [overflow-wrap:anywhere]",
-                      tight ? "pt-1" : "pt-2.5",
-                    )}
-                  >
-                    {block.heading.label}
-                  </div>
-                  <ul role="group" aria-labelledby={headingId}>
-                    {block.rows.map(row)}
-                  </ul>
-                </li>
-              );
-            })}
+            {laidOut ? (
+              <>
+                {laidOut.lead.map((block) => loose(block, true))}
+                {laidOut.columns.map((column, c) => (
+                  // A column of the grid; under `md` a group as in the list, its rows
+                  // following.
+                  <li key={column.group.heading.key} role="none" data-menu-column="" className="min-w-0">
+                    <ul role="none">
+                      {group(column.group, column.index, c === 0 && laidOut.lead.length === 0, true)}
+                      {column.after.map((entry) => loose({ kind: "loose", entry }, false))}
+                    </ul>
+                  </li>
+                ))}
+              </>
+            ) : (
+              blocks.map((block, i) => {
+                if (block.kind === "loose") return loose(block, false);
+                const before = blocks[i - 1];
+                // Under a rule (or at the top of the rows) the rule's margin is the gap;
+                // straight under another group's last row the heading makes its own.
+                return group(block, i, !before || (before.kind === "loose" && before.entry.kind === "divider"));
+              })
+            )}
             {children?.(close)}
             {footerBody != null && footerBody !== false && (
-              <MenuSection className="mt-1 border-t border-subtle px-3 py-2">
+              <MenuSection className={cn("mt-1 border-t border-subtle px-3 py-2", laidOut && SPAN_ALL)}>
                 {footerLabel ? (
                   <nav aria-label={footerLabel} className={footerClass}>
                     {footerBody}

package/src/shell/topbar-controls.tsx

@@ -19,11 +19,7 @@ export const TOPBAR_MENU_ITEM_CLASS =
 
 /** The small uppercase heading row the top-bar menus share (`heading`). */
 function MenuHeading({ children }: { children: string }) {
-  return (
-    <li className="px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder">
-      {children}
-    </li>
-  );
+  return <li className="px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder">{children}</li>;
 }
 
 /**
@@ -108,12 +104,7 @@ export function PaletteMenu({
       aria-label={labels.palette}
       trigger={({ toggle }) => (
         <Tooltip label={activeName} portal>
-          <button
-            type="button"
-            onClick={toggle}
-            aria-label={labels.palette}
-            className={TOPBAR_TRIGGER_CLASS}
-          >
+          <button type="button" onClick={toggle} aria-label={labels.palette} className={TOPBAR_TRIGGER_CLASS}>
             {/* A DATA colour, not a semantic one: the palette mark is the
                 "colour" control, so it carries a colour, and which hue is
                 arbitrary. `--chart-1` is the violet end of the CVD-safe
@@ -155,14 +146,10 @@ export function PaletteMenu({
                     </span>
                     <span className="flex min-w-0 flex-col text-start">
                       <span className="truncate">{p.name}</span>
-                      <span className="truncate text-caption text-placeholder">
-                        {p.blurb}
-                      </span>
+                      <span className="truncate text-caption text-placeholder">{p.blurb}</span>
                     </span>
                   </span>
-                  {activeId === p.id && (
-                    <Check className="size-4 shrink-0 text-secondary" />
-                  )}
+                  {activeId === p.id && <Check className="size-4 shrink-0 text-secondary" />}
                 </button>
               </li>
             );
@@ -186,8 +173,7 @@ export type LanguageMenuTrigger = "flag+code" | "code" | "flag";
 /** The trigger with a code: as tall as the others, as wide as flag and code need. */
 const LANGUAGE_TRIGGER_WIDE_CLASS = TOPBAR_TRIGGER_CLASS.replace("size-9", "h-9 min-w-9 gap-1.5 px-2");
 
-const FLAG_CLASS =
-  "inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]";
+const FLAG_CLASS = "inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]";
 
 /** Language switcher: a hover menu of options with flags and a check on the
  *  active one. Controlled — the app owns the current code and change handler.

package/src/shell/tour-menu.tsx

@@ -148,7 +148,15 @@ export function TourMenu({
   const tail: TopBarMenuEntry[] = [
     ...rest.map(entryFor),
     ...(href
-      ? [{ kind: "link" as const, key: "all-tours", icon: <Compass className="size-4" />, label: words.allTours, to: href }]
+      ? [
+          {
+            kind: "link" as const,
+            key: "all-tours",
+            icon: <Compass className="size-4" />,
+            label: words.allTours,
+            to: href,
+          },
+        ]
       : []),
   ];
 

package/src/shell.ts

@@ -41,7 +41,7 @@ export type {
   SettingsLocationRules,
   SettingsLocationResult,
 } from "./settings/use-settings-route";
-export { useSettingsFocus, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from "./settings/use-settings-focus";
+export { useSettingsFocus, useFocusParam, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from "./settings/use-settings-focus";
 export { SettingsSection } from "./settings/settings-section";
 export type { SettingsSectionProps } from "./settings/settings-section";
 export { useSettingsLayout } from "./settings/settings-context";

package/src/sync/db.ts

@@ -98,7 +98,11 @@ export const SYNC_DB_PK_INDEX = {
  */
 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();
+  return db.rows
+    .where("entity")
+    .equals(entity)
+    .filter((row) => row.pk === pk)
+    .first();
 }
 
 /**

package/src/sync/engine.ts

@@ -103,7 +103,13 @@ export interface SyncEngine {
   /** Into the copy at once and into the queue, in the scope the caller names (D11). An edit
    *  merges into the row's last `pending` upsert; deleting a row that never reached the
    *  server forgets its queue; stamped with `stampAfter`. */
-  write(scope: string, entity: string, id: string, op: "upsert" | "delete", data?: Record<string, unknown>): Promise<void>;
+  write(
+    scope: string,
+    entity: string,
+    id: string,
+    op: "upsert" | "delete",
+    data?: Record<string, unknown>,
+  ): Promise<void>;
   start(): void;
   /** Stops the poll and the timers, aborts the round in flight and drops its answer (the
    *  queue is laid back). A new engine's round on the same database waits for it. */
@@ -164,9 +170,9 @@ function defaultPlanCode(err: unknown): string | null {
  *  `{detail: {code, detail}}`. */
 function refusalOf(err: unknown): { code?: string; detail?: string } {
   const body = (err as { response?: { data?: unknown } }).response?.data as
-    | { code?: unknown; detail?: unknown }
-    | undefined;
-  const inner = body?.detail && typeof body.detail === "object" ? (body.detail as { code?: unknown; detail?: unknown }) : body;
+    { code?: unknown; detail?: unknown } | undefined;
+  const inner =
+    body?.detail && typeof body.detail === "object" ? (body.detail as { code?: unknown; detail?: unknown }) : body;
   const text = (v: unknown) => (typeof v === "string" && v ? v : undefined);
   return { code: text(inner?.code), detail: text(inner?.detail) };
 }
@@ -200,7 +206,13 @@ export function createSyncEngine<D extends SyncDb = SyncDb>(options: SyncEngineO
   const sharedComputer = options.sharedComputer ?? isSharedComputer;
 
   let generation = 0;
-  let state: SyncEngineState = { phase: "idle", online: browserOnline(), counts: ZERO, lastSyncedAt: null, nextRetryAt: null };
+  let state: SyncEngineState = {
+    phase: "idle",
+    online: browserOnline(),
+    counts: ZERO,
+    lastSyncedAt: null,
+    nextRetryAt: null,
+  };
   const listeners = new Set<() => void>();
   let started = false;
   let poll: ReturnType<typeof setInterval> | null = null;
@@ -281,7 +293,8 @@ export function createSyncEngine<D extends SyncDb = SyncDb>(options: SyncEngineO
       const rejected = sent.filter((c) => !refusedIds.has(c.id) && rejections.has(c.id));
       await db.outbox.bulkDelete(sent.filter((c) => !refusedIds.has(c.id) && !rejections.has(c.id)).map((c) => c.seq!));
       const hold = refused != null && holdCodes.has(refused.code);
-      if (refused) await mark(kept, { status: hold ? "waiting" : "blocked", code: refused.code, reason: refused.detail });
+      if (refused)
+        await mark(kept, { status: hold ? "waiting" : "blocked", code: refused.code, reason: refused.detail });
       for (const change of rejected) {
         const why = rejections.get(change.id)!;
         await db.outbox.update(change.seq!, { status: "rejected", code: why.code, reason: why.detail });
@@ -313,7 +326,13 @@ export function createSyncEngine<D extends SyncDb = SyncDb>(options: SyncEngineO
           continue;
         }
         const row = (await db.rows.get([change.entity, change.id])) as CopyRow | undefined;
-        await db.rows.put({ ...row, entity: change.entity, id: change.id, pk: row?.pk ?? null, data: { ...row?.data, ...change.data } });
+        await db.rows.put({
+          ...row,
+          entity: change.entity,
+          id: change.id,
+          pk: row?.pk ?? null,
+          data: { ...row?.data, ...change.data },
+        });
       }
       if (lastPage) {
         await db.meta.put({ key: lastKnowledgeKey(scope), value: answer.server_knowledge });
@@ -345,7 +364,12 @@ export function createSyncEngine<D extends SyncDb = SyncDb>(options: SyncEngineO
 
   type ScopeResult = { offline: true } | { offline: false; waiting: number; blocked: number; rejected: number };
 
-  async function syncScope(scope: string, gen: number, signal: AbortSignal, withBlocked: boolean): Promise<ScopeResult> {
+  async function syncScope(
+    scope: string,
+    gen: number,
+    signal: AbortSignal,
+    withBlocked: boolean,
+  ): Promise<ScopeResult> {
     const sent = await takeQueue(scope, withBlocked);
     const last = Number((await db.meta.get(lastKnowledgeKey(scope)))?.value ?? 0) || 0;
     const body = (changes: SyncWireChange[], page_cursor: SyncRequestBody["page_cursor"]): SyncRequestBody => ({
@@ -369,7 +393,8 @@ export function createSyncEngine<D extends SyncDb = SyncDb>(options: SyncEngineO
         await mark(sent, { status: "waiting", code: plan, reason: plan });
         return { offline: false, waiting: sent.length, blocked: 0, rejected: 0 };
       }
-      if (httpStatusOf(err) === 403) return { offline: false, waiting: 0, blocked: 0, rejected: await loseScope(scope, err) };
+      if (httpStatusOf(err) === 403)
+        return { offline: false, waiting: 0, blocked: 0, rejected: await loseScope(scope, err) };
       throw err;
     }
     let cursor = options.paged ? (answer.page_cursor ?? null) : null;
@@ -545,7 +570,9 @@ export function createSyncEngine<D extends SyncDb = SyncDb>(options: SyncEngineO
         const row = (await db.rows.get([entity, id])) as CopyRow | undefined;
         const ofRow = await db.outbox.where("[entity+id]").equals([entity, id]).toArray();
         ofRow.sort((a, b) => a.seq! - b.seq!);
-        const updated_at = stampAfter(latest([row?.updated_at, row?.data.updated_at, ...ofRow.map((c) => c.updated_at)]));
+        const updated_at = stampAfter(
+          latest([row?.updated_at, row?.data.updated_at, ...ofRow.map((c) => c.updated_at)]),
+        );
         // A new edit to the row moves a rejected change out of the way (D13).
         const rejected = ofRow.filter((c) => c.scope === scope && c.status === "rejected");
         if (op === "delete") {
@@ -564,7 +591,10 @@ export function createSyncEngine<D extends SyncDb = SyncDb>(options: SyncEngineO
         const next: CopyRow = { ...row, entity, id, pk: row?.pk ?? null, data: { ...row?.data, ...data } };
         if (!row) next.local = true;
         await db.rows.put(next);
-        const carried = Object.assign({}, ...rejected.filter((c) => c.op === "upsert").map((c) => c.data)) as Record<string, unknown>;
+        const carried = Object.assign({}, ...rejected.filter((c) => c.op === "upsert").map((c) => c.data)) as Record<
+          string,
+          unknown
+        >;
         await db.outbox.bulkDelete(rejected.map((c) => c.seq!));
         const last = ofRow.filter((c) => c.scope === scope && c.status === "pending").at(-1);
         if (last && last.op === "upsert") {
@@ -628,7 +658,9 @@ export function createSyncEngine<D extends SyncDb = SyncDb>(options: SyncEngineO
     },
 
     async discardRejected(scope) {
-      const gone = (await db.outbox.where("status").equals("rejected").toArray()).filter((c) => !scope || c.scope === scope);
+      const gone = (await db.outbox.where("status").equals("rejected").toArray()).filter(
+        (c) => !scope || c.scope === scope,
+      );
       if (gone.length === 0) return;
       await db.transaction("rw", db.rows, db.outbox, db.meta, async () => {
         await db.outbox.bulkDelete(gone.map((c) => c.seq!));

package/src/sync.ts

@@ -5,8 +5,22 @@
 // `/offline`'s TanStack and idb-keyval peers: the leaf utilities both entries export live in
 // one module of their own (src/offline/local-first.ts). NOT re-exported from the main barrel.
 export { createSyncDb, rowByPk, SYNC_DB_PK_INDEX, SYNC_DB_STORES } from "./sync/db";
-export type { CreateSyncDbOptions, OutboxChange, OutboxStatus, SyncDb, SyncDbUpgrade, SyncedRow, SyncMetaEntry } from "./sync/db";
-export { createSyncEngine, DEFAULT_HOLD_CODES, DEFAULT_SYNC_BACKOFF_MS, releaseSyncEngine, syncEngineFor } from "./sync/engine";
+export type {
+  CreateSyncDbOptions,
+  OutboxChange,
+  OutboxStatus,
+  SyncDb,
+  SyncDbUpgrade,
+  SyncedRow,
+  SyncMetaEntry,
+} from "./sync/db";
+export {
+  createSyncEngine,
+  DEFAULT_HOLD_CODES,
+  DEFAULT_SYNC_BACKOFF_MS,
+  releaseSyncEngine,
+  syncEngineFor,
+} from "./sync/engine";
 export type {
   SyncCounts,
   SyncEngine,

package/src/testing/css-variables.ts

@@ -158,8 +158,7 @@ export function undeclaredCssVariables(
     if (isCssPath(path)) for (const name of declaredCustomProperties(text)) declared.add(name);
     for (const name of runtimeWrites(text)) declared.add(name);
   }
-  const listed = (name: string) =>
-    runtime.some((r) => (typeof r === "string" ? r === name : r.test(name)));
+  const listed = (name: string) => runtime.some((r) => (typeof r === "string" ? r === name : r.test(name)));
 
   const out: string[] = [];
   for (const [path, text] of code) {

package/src/testing/index.ts

@@ -26,9 +26,4 @@ export {
 } from "./viewport";
 // 0.50.1 (keksdose N4): a valid `TourStepContext` for a test that calls a step's
 // `beforeStep` or `when` itself — `beforeStep!(tourStepContext())`.
-export {
-  tourStepContext,
-  type TestTourStepContext,
-  type TourStepContextOptions,
-  type TourStepVia,
-} from "./tour";
+export { tourStepContext, type TestTourStepContext, type TourStepContextOptions, type TourStepVia } from "./tour";