@eifi1/ui-kit 0.51.4 → 0.51.5

package/src/rhf/use-rhf-wizard-step.ts

@@ -45,10 +45,7 @@ import { useCallback, useEffect, useRef } from "react";
 import type { FieldPath, FieldValues, UseFormReturn } from "react-hook-form";
 import { useOptionalWizardContext } from "../wizard/wizard-context";
 
-export type RhfWizardStepOptions<
-  TFieldValues extends FieldValues,
-  TTransformed = TFieldValues,
-> =
+export type RhfWizardStepOptions<TFieldValues extends FieldValues, TTransformed = TFieldValues> =
   | {
       /** Validate only these fields — the step's share of a form that spans steps. */
       fields: readonly FieldPath<TFieldValues>[];
@@ -68,15 +65,9 @@ export type RhfWizardStepOptions<
  * Connects `form` to the wizard's step validation and returns the step's validator.
  * See the module note for the two modes.
  */
-export function useRhfWizardStep<
-  TFieldValues extends FieldValues,
-  TContext = unknown,
-  TTransformed = TFieldValues,
->(
+export function useRhfWizardStep<TFieldValues extends FieldValues, TContext = unknown, TTransformed = TFieldValues>(
   form: UseFormReturn<TFieldValues, TContext, TTransformed>,
-  options?:
-    | RhfWizardStepOptions<TFieldValues, TTransformed>
-    | ((values: TTransformed) => void),
+  options?: RhfWizardStepOptions<TFieldValues, TTransformed> | ((values: TTransformed) => void),
 ): () => Promise<boolean> {
   const opts = typeof options === "function" ? { onValid: options } : (options ?? {});
   const optsRef = useRef(opts);

package/src/search/command-palette.tsx

@@ -227,8 +227,7 @@ export function CommandPalette({
   // go from a German name to an English "Search" on update — so a translated
   // placeholder keeps doing the job until a `dialog` is supplied.
   const dialogName =
-    l.dialog ??
-    (l.placeholder !== DEFAULT_COMMAND_PALETTE_LABELS.placeholder ? l.placeholder : DEFAULT_DIALOG_NAME);
+    l.dialog ?? (l.placeholder !== DEFAULT_COMMAND_PALETTE_LABELS.placeholder ? l.placeholder : DEFAULT_DIALOG_NAME);
   const [ownQuery, setOwnQuery] = useState("");
   const controlled = queryProp !== undefined;
   const query = controlled ? queryProp : ownQuery;
@@ -426,9 +425,7 @@ export function CommandPalette({
         data-fullscreen={isPhone || undefined}
         className={cn(
           "flex w-full flex-col overflow-hidden bg-surface outline-none",
-          isPhone
-            ? "h-full"
-            : "max-h-[70vh] max-w-xl rounded-xl border border-subtle shadow-2xl",
+          isPhone ? "h-full" : "max-h-[70vh] max-w-xl rounded-xl border border-subtle shadow-2xl",
         )}
         // Full screen means edge to edge, so the notch, the home indicator and the
         // rounded corners are the panel's to keep clear of.
@@ -518,7 +515,13 @@ export function CommandPalette({
             the list markup in between is presentational so the listbox's children are
             groups and options only — as a plain <li>/<ul> tree a reader announced
             "list, 2 items" between options and never tied the heading to its rows. */}
-        <ul id={listId} ref={listRef} role="listbox" aria-label={dialogName} className="min-h-0 flex-1 overflow-y-auto py-1">
+        <ul
+          id={listId}
+          ref={listRef}
+          role="listbox"
+          aria-label={dialogName}
+          className="min-h-0 flex-1 overflow-y-auto py-1"
+        >
           {groups.map(({ group, items }, groupIndex) => (
             <li key={group} role="presentation">
               <div
@@ -540,7 +543,9 @@ export function CommandPalette({
                           comfortable ? "min-h-11 py-2.5" : "py-2",
                         )}
                       >
-                        {item.icon && <span className="flex size-4 shrink-0 items-center justify-center">{item.icon}</span>}
+                        {item.icon && (
+                          <span className="flex size-4 shrink-0 items-center justify-center">{item.icon}</span>
+                        )}
                         <span className="min-w-0 flex-1 truncate">{item.label}</span>
                       </li>
                     );
@@ -561,9 +566,7 @@ export function CommandPalette({
                     className: cn(
                       "flex w-full items-center gap-2.5 px-3 text-start",
                       comfortable ? "min-h-11 py-2.5 text-base" : "py-2 text-sm",
-                      isActive
-                        ? "bg-active text-primary"
-                        : "text-secondary",
+                      isActive ? "bg-active text-primary" : "text-secondary",
                     ),
                   };
                   const inner = (
@@ -595,14 +598,7 @@ export function CommandPalette({
                             // #451) — and the palette deliberately stays OPEN for
                             // it: ⌘-clicking three results in a row is the reason to
                             // want this, and closing after the first would undo it.
-                            if (
-                              e.button !== 0 ||
-                              e.metaKey ||
-                              e.ctrlKey ||
-                              e.shiftKey ||
-                              e.altKey
-                            )
-                              return;
+                            if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
                             e.preventDefault();
                             choose(item);
                           }}
@@ -622,11 +618,7 @@ export function CommandPalette({
           ))}
         </ul>
 
-        {l.hint && (
-          <div className="border-t border-subtle px-3 py-1.5 text-caption text-placeholder">
-            {l.hint}
-          </div>
-        )}
+        {l.hint && <div className="border-t border-subtle px-3 py-1.5 text-caption text-placeholder">{l.hint}</div>}
       </div>
     </div>,
     document.body,

package/src/search/global-search.tsx

@@ -206,9 +206,17 @@ const identity = (href: string) => href;
 function signature(entries: readonly SearchEntry[]): string {
   return entries
     .map((e) =>
-      [e.id, e.title, (e.keywords ?? []).join("\u0003"), e.description, e.group, e.hint, e.href, e.weight, e.redact].join(
-        "\u0001",
-      ),
+      [
+        e.id,
+        e.title,
+        (e.keywords ?? []).join("\u0003"),
+        e.description,
+        e.group,
+        e.hint,
+        e.href,
+        e.weight,
+        e.redact,
+      ].join("\u0001"),
     )
     .join("\u0002");
 }
@@ -217,7 +225,9 @@ function signature(entries: readonly SearchEntry[]): string {
  *  row that was clicked (and held focus) is gone. */
 function refocusField() {
   requestAnimationFrame(() => {
-    const fields = document.querySelectorAll<HTMLInputElement>('[role="dialog"][aria-modal="true"] input[role="combobox"]');
+    const fields = document.querySelectorAll<HTMLInputElement>(
+      '[role="dialog"][aria-modal="true"] input[role="combobox"]',
+    );
     fields[fields.length - 1]?.focus();
   });
 }
@@ -458,8 +468,7 @@ function GlobalSearchImpl({
 
     if (!q) {
       const out: CommandItem[] = [];
-      const groupOf = (entry: SearchEntry) =>
-        suggestionsKeepGroups ? (entry.group ?? l.suggestions) : l.suggestions;
+      const groupOf = (entry: SearchEntry) => (suggestionsKeepGroups ? (entry.group ?? l.suggestions) : l.suggestions);
       suggestionList.forEach((s, i) => {
         if (typeof s === "string") {
           const entry = byId.get(s);
@@ -532,7 +541,26 @@ function GlobalSearchImpl({
     }
 
     return ordered(out);
-  }, [q, suggestionList, suggestionsKeepGroups, byId, index, sourceList, sourceResults, order, groupLimit, toItem, l.suggestions, l.results, pl.loading, pl.error, setOpen, setQuery, noop, redactLabels]);
+  }, [
+    q,
+    suggestionList,
+    suggestionsKeepGroups,
+    byId,
+    index,
+    sourceList,
+    sourceResults,
+    order,
+    groupLimit,
+    toItem,
+    l.suggestions,
+    l.results,
+    pl.loading,
+    pl.error,
+    setOpen,
+    setQuery,
+    noop,
+    redactLabels,
+  ]);
   /* eslint-enable react-hooks/refs */
 
   // The palette re-runs its provider on a `revision` change, never on the provider's
@@ -577,7 +605,9 @@ function GlobalSearchImpl({
               >
                 <Search
                   className={triggerIconSize === undefined ? "size-4" : undefined}
-                  style={triggerIconSize === undefined ? undefined : { width: triggerIconSize, height: triggerIconSize }}
+                  style={
+                    triggerIconSize === undefined ? undefined : { width: triggerIconSize, height: triggerIconSize }
+                  }
                 />
               </button>
             </Tooltip>

package/src/search/search-index.ts

@@ -158,7 +158,11 @@ function withinDistance(a: string, b: string, max: number): boolean {
 
 type WordKind = keyof typeof WORD_SCORE;
 
-function matchWord(q: string, word: string, opts: Required<Pick<SearchIndexOptions, "typoMinLength" | "infixMinLength">>): WordKind | null {
+function matchWord(
+  q: string,
+  word: string,
+  opts: Required<Pick<SearchIndexOptions, "typoMinLength" | "infixMinLength">>,
+): WordKind | null {
   if (word === q) return "exact";
   if (word.startsWith(q)) return "prefix";
   if (q.length >= opts.infixMinLength && word.includes(q)) return "infix";

package/src/settings/device-reset-setting.tsx

@@ -41,8 +41,10 @@ export { DEFAULT_DEVICE_RESET_LABELS };
 export const DEVICE_RESET_ANCHOR = "settings-device-reset";
 
 // `onReset` is the card's own: the DOM's form-reset handler never fires on a div.
-export interface DeviceResetSettingProps
-  extends Omit<SettingsSectionProps, "anchor" | "title" | "description" | "children" | "onReset"> {
+export interface DeviceResetSettingProps extends Omit<
+  SettingsSectionProps,
+  "anchor" | "title" | "description" | "children" | "onReset"
+> {
   /** The app's sentence after the kit's description: what of its own goes back, and what
    *  stays (keksdose: the date format, the feature set and the gestures go; presentation
    *  mode and the home position stay). */
@@ -72,12 +74,7 @@ export interface DeviceResetSettingProps
  * `deviceReset`; `title` and `keywords` from these labels), last in its appearance group:
  * inside a `SettingsLayout`, `SettingsSection` throws in development without it.
  */
-export function DeviceResetSetting({
-  description,
-  labels: labelsProp,
-  onReset,
-  ...rest
-}: DeviceResetSettingProps) {
+export function DeviceResetSetting({ description, labels: labelsProp, onReset, ...rest }: DeviceResetSettingProps) {
   const labels = useKitLabels("deviceReset", DEFAULT_DEVICE_RESET_LABELS, labelsProp);
   const confirm = useConfirm();
 

package/src/settings/settings-heading.tsx

@@ -50,7 +50,9 @@ export function useSettingsHeadingLevel(): SettingsHeadingTag | null {
 export function SettingsCardTitle({ className, ...props }: ComponentPropsWithoutRef<"div">) {
   const level = useSettingsHeadingLevel();
   if (!level) return <div {...props} className={cn(CARD_TITLE_CLASS, className)} />;
-  return <SettingsHeading as={level} tabIndex={-1} {...props} className={cn(CARD_TITLE_CLASS, "outline-none", className)} />;
+  return (
+    <SettingsHeading as={level} tabIndex={-1} {...props} className={cn(CARD_TITLE_CLASS, "outline-none", className)} />
+  );
 }
 
 /**

package/src/settings/settings-layout.tsx

@@ -16,12 +16,7 @@ import { cn } from "../lib/cn";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { createSearchIndex } from "../search/search-index";
 import type { SearchEntry } from "../search/search-index";
-import {
-  normalizeSettingsBase,
-  settingsHref,
-  settingsKeywords,
-  visibleSettingsEntries,
-} from "./settings-catalogue";
+import { normalizeSettingsBase, settingsHref, settingsKeywords, visibleSettingsEntries } from "./settings-catalogue";
 import type { SettingsEntry, SettingsGroup } from "./settings-catalogue";
 import { SettingsLayoutContext } from "./settings-context";
 import type { SettingsLayoutContextValue } from "./settings-context";
@@ -337,7 +332,10 @@ export function SettingsLayout<G extends string>({
                 e.preventDefault();
                 route.back();
               }}
-              className={cn("-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-muted hover:text-primary", FOCUS_RING)}
+              className={cn(
+                "-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-muted hover:text-primary",
+                FOCUS_RING,
+              )}
             >
               <ChevronLeft aria-hidden className="size-4 rtl:-scale-x-100" />
               {pageTitle}
@@ -458,12 +456,7 @@ export function SettingsLayout<G extends string>({
             {searching ? (
               results
             ) : open ? (
-              <div
-                id={panelId}
-                role="tabpanel"
-                aria-labelledby={`${panelId}-tab`}
-                className="space-y-4"
-              >
+              <div id={panelId} role="tabpanel" aria-labelledby={`${panelId}-tab`} className="space-y-4">
                 <PageHeader as="h2" size="sm" title={open.title} description={open.help} />
                 {cards(open.id)}
               </div>

package/src/settings/use-settings-route.ts

@@ -70,7 +70,9 @@ export function settingsFromListState(): Record<string, true> {
 }
 
 function isFromList(state: unknown): boolean {
-  return typeof state === "object" && state !== null && (state as Record<string, unknown>)[SETTINGS_FROM_LIST_STATE] === true;
+  return (
+    typeof state === "object" && state !== null && (state as Record<string, unknown>)[SETTINGS_FROM_LIST_STATE] === true
+  );
 }
 
 export interface SettingsLocation {
@@ -197,8 +199,7 @@ export function useSettingsRoute<G extends string>(options: UseSettingsRouteOpti
     return map;
   }, [entries]);
   const ids = visible.map((g) => g.id);
-  const fallback =
-    defaultGroup !== undefined && ids.includes(defaultGroup) ? defaultGroup : (ids[0] ?? null);
+  const fallback = defaultGroup !== undefined && ids.includes(defaultGroup) ? defaultGroup : (ids[0] ?? null);
 
   const { group, sub, redirect } = resolveSettingsLocation(location, {
     basePath: base,

package/src/shell/app-shell.tsx

@@ -1,4 +1,14 @@
-import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { createPortal } from "react-dom";
 import { Link, NavLink, matchPath, useHref, useLocation } from "react-router";
@@ -401,9 +411,7 @@ function useNavHeightVar(
     // the OUTERMOST shell, for what it portals to <body> (a sheet docking on the bar).
     // The DOM check backs up the context for a shell mounted in a separate React root.
     const global = !embedded && !shell?.parentElement?.closest("[data-app-shell]");
-    const targets = [shell, global ? document.documentElement : null].filter(
-      (el): el is HTMLElement => el !== null,
-    );
+    const targets = [shell, global ? document.documentElement : null].filter((el): el is HTMLElement => el !== null);
     // `getBoundingClientRect().height`, rounded DOWN — not `offsetHeight`, and not
     // ceil. Measured on the running app at 406x816: the bar is **55.5px** tall, and
     // both `offsetHeight` and `Math.ceil` answer 56. That is why live #314 round four
@@ -484,8 +492,7 @@ export function AppShell({
   useNavDevWarnings(nav);
   // An embedded shell sharing the default key would overwrite the outer app's sidebar
   // preference with its own — so it persists only when given a key of its own.
-  const collapseStorageKey =
-    collapseStorageKeyProp ?? (embedded ? null : "appLayout.sidebarCollapsed");
+  const collapseStorageKey = collapseStorageKeyProp ?? (embedded ? null : "appLayout.sidebarCollapsed");
   // The three props are per-shell overrides of the provider's `appShell`; one left
   // undefined falls through to the provider rather than to English.
   const labels = useKitLabels("appShell", DEFAULT_APP_SHELL_LABELS, {
@@ -692,10 +699,7 @@ export function AppShell({
             group's `items` were simply unreachable below `md`. ONE measured box, so
             `--app-nav-h` covers both rows and whatever docks on the bar sits on the
             whole of it. */}
-        <div
-          ref={navRef}
-          className="md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-subtle bg-surface"
-        >
+        <div ref={navRef} className="md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-subtle bg-surface">
           {mobileSubNav && <MobileSubNav nav={nav} layout={mobileSubNavLayout} />}
           <nav
             data-tour="nav"
@@ -854,9 +858,7 @@ const mobileCellClass = (active: boolean) =>
     // label on two lines never leaves its neighbours a different shape.
     "relative flex h-full w-full flex-col items-center justify-start py-2 text-caption gap-0.5 transition-colors",
     "before:absolute before:content-[''] before:inset-x-4 before:top-0 before:h-0.5 before:rounded-full before:transition-colors",
-    active
-      ? "font-semibold text-brand before:bg-brand"
-      : "text-muted before:bg-transparent",
+    active ? "font-semibold text-brand before:bg-brand" : "text-muted before:bg-transparent",
   );
 
 /**
@@ -939,7 +941,11 @@ function SheetLink({
           level === "entry"
             ? "flex min-h-11 items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors"
             : "flex min-h-11 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
-          isActive ? "bg-inverse text-inverse" : level === "entry" ? "text-primary hover:bg-hover" : "text-secondary hover:bg-hover",
+          isActive
+            ? "bg-inverse text-inverse"
+            : level === "entry"
+              ? "text-primary hover:bg-hover"
+              : "text-secondary hover:bg-hover",
         )
       }
     >
@@ -1001,7 +1007,14 @@ function MobileGroupCell({
         <ul className="space-y-1">
           {!ownPageListed && (
             <li>
-              <SheetLink to={item.to} end={item.end} icon={item.icon} label={labels.overview} onClick={close} level="entry" />
+              <SheetLink
+                to={item.to}
+                end={item.end}
+                icon={item.icon}
+                label={labels.overview}
+                onClick={close}
+                level="entry"
+              />
             </li>
           )}
           {pages.map((sub) => (
@@ -1090,12 +1103,26 @@ function MobileMoreCell({
         <ul className="space-y-1">
           {hidden.map((item) => (
             <li key={item.to}>
-              <SheetLink to={item.to} end={item.end} icon={item.icon} label={item.label} onClick={close} level="entry" />
+              <SheetLink
+                to={item.to}
+                end={item.end}
+                icon={item.icon}
+                label={item.label}
+                onClick={close}
+                level="entry"
+              />
               {!!item.items?.length && (
                 <ul aria-label={item.label} className="ms-[1.3rem] mt-0.5 space-y-0.5 border-s border-subtle ps-2">
                   {item.items.map((sub) => (
                     <li key={sub.to}>
-                      <SheetLink to={sub.to} end={sub.end} icon={sub.icon} label={sub.label} onClick={close} level="page" />
+                      <SheetLink
+                        to={sub.to}
+                        end={sub.end}
+                        icon={sub.icon}
+                        label={sub.label}
+                        onClick={close}
+                        level="page"
+                      />
                     </li>
                   ))}
                 </ul>
@@ -1182,7 +1209,8 @@ function MobileSubNav({ nav, layout }: { nav: AppShellNavItem[]; layout: "wrap"
 
 /** `strong` is the current page; `trail` is the group that CONTAINS the current page
  *  while the page itself is shown elsewhere (the inline list below it). */
-const navLinkClass = (collapsed: boolean, forceActive: boolean, trail = false) =>
+const navLinkClass =
+  (collapsed: boolean, forceActive: boolean, trail = false) =>
   ({ isActive }: { isActive: boolean }) =>
     `flex items-center gap-3 min-h-9 ${collapsed ? "justify-center px-2" : "px-3"} py-2 rounded-md text-sm transition-colors duration-150 ${
       isActive || (forceActive && !trail)
@@ -1390,9 +1418,7 @@ function SidebarGroup({
                   className={({ isActive }) =>
                     cn(
                       "flex min-h-8 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
-                      isActive
-                        ? "bg-inverse text-inverse"
-                        : "text-secondary hover:bg-hover",
+                      isActive ? "bg-inverse text-inverse" : "text-secondary hover:bg-hover",
                     )
                   }
                 >
@@ -1528,9 +1554,7 @@ function SidebarFlyout({ item, children }: { item: AppShellNavItem; children: Re
                       className={({ isActive }) =>
                         cn(
                           "flex items-center gap-2.5 px-3 py-2 text-sm",
-                          isActive
-                            ? "bg-active font-medium text-primary"
-                            : "text-secondary hover:bg-hover",
+                          isActive ? "bg-active font-medium text-primary" : "text-secondary hover:bg-hover",
                         )
                       }
                     >

package/src/shell/auth-layout.tsx

@@ -125,12 +125,7 @@ export function AuthLayout({
           <div className="mb-2">{logo}</div>
         ))}
       {title != null && (
-        <Heading
-          className={cn(
-            "font-semibold leading-tight text-primary",
-            wide ? "text-2xl md:text-3xl" : "text-2xl",
-          )}
-        >
+        <Heading className={cn("font-semibold leading-tight text-primary", wide ? "text-2xl md:text-3xl" : "text-2xl")}>
           {title}
         </Heading>
       )}

package/src/shell/dev-menu.tsx

@@ -182,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
             ? ([
@@ -225,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),
+          })),
         ]
       : [];
 

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

@@ -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
@@ -167,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
@@ -402,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 })}
             </>,
           );
@@ -500,15 +501,15 @@ export function TopBarActionMenu({
           // 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, laidOut && COLUMNS_PANEL, panelClassName)}
-            style={laidOut ? ({ "--menu-columns-width": `${laidOut.columns.length * 14}rem` } as CSSProperties) : undefined}
+            style={
+              laidOut ? ({ "--menu-columns-width": `${laidOut.columns.length * 14}rem` } as CSSProperties) : undefined
+            }
             onKeyDown={keepTabInsidePanel}
           >
             {header && (
               <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>
             )}