@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/lib/direction.ts

@@ -16,9 +16,7 @@ export type Direction = "ltr" | "rtl";
 /** The effective direction at `el`: its nearest `[dir]` ancestor (or itself), else the
  *  document's, else LTR. Attribute-based on purpose — jsdom computes no `direction`. */
 export function dirOf(el: Element | null | undefined): Direction {
-  const source =
-    el?.closest("[dir]") ??
-    (typeof document !== "undefined" ? document.documentElement : null);
+  const source = el?.closest("[dir]") ?? (typeof document !== "undefined" ? document.documentElement : null);
   return source?.getAttribute("dir") === "rtl" ? "rtl" : "ltr";
 }
 

package/src/lib/iban.ts

@@ -30,15 +30,95 @@
  * under FR) are covered by that code, as the registry lists them.
  */
 export const IBAN_LENGTHS: Readonly<Record<string, number>> = Object.freeze({
-  AD: 24, AE: 23, AL: 28, AT: 20, AZ: 28, BA: 20, BE: 16, BG: 22, BH: 22, BI: 27,
-  BR: 29, BY: 28, CH: 21, CR: 22, CY: 28, CZ: 24, DE: 22, DJ: 27, DK: 18, DO: 28,
-  EE: 20, EG: 29, ES: 24, FI: 18, FK: 18, FO: 18, FR: 27, GB: 22, GE: 22, GI: 23,
-  GL: 18, GR: 27, GT: 28, HN: 28, HR: 21, HU: 28, IE: 22, IL: 23, IQ: 23, IS: 26,
-  IT: 27, JO: 30, KW: 30, KZ: 20, LB: 28, LC: 32, LI: 21, LT: 20, LU: 20, LV: 21,
-  LY: 25, MC: 27, MD: 24, ME: 22, MK: 19, MN: 20, MR: 27, MT: 31, MU: 30, NI: 28,
-  NL: 18, NO: 15, OM: 23, PK: 24, PL: 28, PS: 29, PT: 25, QA: 29, RO: 24, RS: 22,
-  RU: 33, SA: 24, SC: 31, SD: 18, SE: 24, SI: 19, SK: 24, SM: 27, SO: 23, ST: 25,
-  SV: 28, TL: 23, TN: 24, TR: 26, UA: 29, VA: 22, VG: 24, XK: 20, YE: 30,
+  AD: 24,
+  AE: 23,
+  AL: 28,
+  AT: 20,
+  AZ: 28,
+  BA: 20,
+  BE: 16,
+  BG: 22,
+  BH: 22,
+  BI: 27,
+  BR: 29,
+  BY: 28,
+  CH: 21,
+  CR: 22,
+  CY: 28,
+  CZ: 24,
+  DE: 22,
+  DJ: 27,
+  DK: 18,
+  DO: 28,
+  EE: 20,
+  EG: 29,
+  ES: 24,
+  FI: 18,
+  FK: 18,
+  FO: 18,
+  FR: 27,
+  GB: 22,
+  GE: 22,
+  GI: 23,
+  GL: 18,
+  GR: 27,
+  GT: 28,
+  HN: 28,
+  HR: 21,
+  HU: 28,
+  IE: 22,
+  IL: 23,
+  IQ: 23,
+  IS: 26,
+  IT: 27,
+  JO: 30,
+  KW: 30,
+  KZ: 20,
+  LB: 28,
+  LC: 32,
+  LI: 21,
+  LT: 20,
+  LU: 20,
+  LV: 21,
+  LY: 25,
+  MC: 27,
+  MD: 24,
+  ME: 22,
+  MK: 19,
+  MN: 20,
+  MR: 27,
+  MT: 31,
+  MU: 30,
+  NI: 28,
+  NL: 18,
+  NO: 15,
+  OM: 23,
+  PK: 24,
+  PL: 28,
+  PS: 29,
+  PT: 25,
+  QA: 29,
+  RO: 24,
+  RS: 22,
+  RU: 33,
+  SA: 24,
+  SC: 31,
+  SD: 18,
+  SE: 24,
+  SI: 19,
+  SK: 24,
+  SM: 27,
+  SO: 23,
+  ST: 25,
+  SV: 28,
+  TL: 23,
+  TN: 24,
+  TR: 26,
+  UA: 29,
+  VA: 22,
+  VG: 24,
+  XK: 20,
+  YE: 30,
 });
 
 /**

package/src/lib/logger.ts

@@ -60,11 +60,7 @@ const loggerImpl: LoggerImpl = (f, name) => (set, get, store) => {
     const prev = get();
     (set as (...a: unknown[]) => void)(...args);
     if (storeLog) {
-      console.debug(
-        `%c[store${name ? `:${name}` : ""}]`,
-        "color:#0d9488",
-        { prev, next: get() },
-      );
+      console.debug(`%c[store${name ? `:${name}` : ""}]`, "color:#0d9488", { prev, next: get() });
     }
   }) as typeof set;
   return f(loggedSet, get, store);

package/src/lib/person-name.ts

@@ -147,9 +147,7 @@ export function personInitials(name: PersonName, locale?: string): string {
   if (!first || !last) {
     const words = (first || last).split(/\s+/);
     const initials =
-      words.length >= 2
-        ? firstGrapheme(words[0]!) + firstGrapheme(words[1]!)
-        : [...words[0]!].slice(0, 2).join("");
+      words.length >= 2 ? firstGrapheme(words[0]!) + firstGrapheme(words[1]!) : [...words[0]!].slice(0, 2).join("");
     return upper(initials, locale);
   }
   const pair = order === "family-first" ? [last, first] : [first, last];

package/src/lib/phone.ts

@@ -82,13 +82,7 @@ const RULES: Record<PhoneCountryCode, CountryRule> = {
     min: 6,
     max: 13,
     group: (n) =>
-      /^15/.test(n)
-        ? cut(n, [4])
-        : /^1[67]/.test(n)
-          ? cut(n, [3])
-          : /^(30|40|69|89)/.test(n)
-            ? cut(n, [2])
-            : [n],
+      /^15/.test(n) ? cut(n, [4]) : /^1[67]/.test(n) ? cut(n, [3]) : /^(30|40|69|89)/.test(n) ? cut(n, [2]) : [n],
   },
   // Vienna is "1"; mobile numbers start 6xx; other area codes vary, so one block.
   AT: {
@@ -169,7 +163,10 @@ export function parsePhone(input: string, country: PhoneCountry = "CH"): ParsedP
   }
   if (international) {
     // "+41 (0)21 …": the bracketed trunk prefix written for callers inside the country.
-    digits = text.replace(/\(\s*0\s*\)/g, "").replace(/\D/g, "").replace(/^00/, "");
+    digits = text
+      .replace(/\(\s*0\s*\)/g, "")
+      .replace(/\D/g, "")
+      .replace(/^00/, "");
     if (digits.startsWith("0")) return null;
     const known = BY_DIAL.find((c) => digits.startsWith(RULES[c].dial));
     if (known) {

package/src/lib/qr-encode.ts

@@ -48,16 +48,40 @@ const FORMAT_BITS: Record<QrErrorCorrection, number> = { L: 1, M: 0, Q: 3, H: 2
 
 // Index 0 is padding; rows are L, M, Q, H.
 const ECC_CODEWORDS_PER_BLOCK: readonly (readonly number[])[] = [
-  [-1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
-  [-1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28],
-  [-1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
-  [-1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30],
+  [
+    -1, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18, 20, 24, 26, 30, 22, 24, 28, 30, 28, 28, 28, 28, 30, 30, 26, 28, 30, 30,
+    30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
+  ],
+  [
+    -1, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26, 30, 22, 22, 24, 24, 28, 28, 26, 26, 26, 26, 28, 28, 28, 28, 28, 28, 28,
+    28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28, 28,
+  ],
+  [
+    -1, 13, 22, 18, 26, 18, 24, 18, 22, 20, 24, 28, 26, 24, 20, 30, 24, 28, 28, 26, 30, 28, 30, 30, 30, 30, 28, 30, 30,
+    30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
+  ],
+  [
+    -1, 17, 28, 22, 16, 22, 28, 26, 26, 24, 28, 24, 28, 22, 24, 24, 30, 28, 28, 26, 28, 30, 24, 30, 30, 30, 30, 30, 30,
+    30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30,
+  ],
 ];
 const NUM_ERROR_CORRECTION_BLOCKS: readonly (readonly number[])[] = [
-  [-1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19, 19, 20, 21, 22, 24, 25],
-  [-1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31, 33, 35, 37, 38, 40, 43, 45, 47, 49],
-  [-1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43, 45, 48, 51, 53, 56, 59, 62, 65, 68],
-  [-1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48, 51, 54, 57, 60, 63, 66, 70, 74, 77, 81],
+  [
+    -1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4, 4, 4, 4, 4, 6, 6, 6, 6, 7, 8, 8, 9, 9, 10, 12, 12, 12, 13, 14, 15, 16, 17, 18, 19,
+    19, 20, 21, 22, 24, 25,
+  ],
+  [
+    -1, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5, 5, 8, 9, 9, 10, 10, 11, 13, 14, 16, 17, 17, 18, 20, 21, 23, 25, 26, 28, 29, 31,
+    33, 35, 37, 38, 40, 43, 45, 47, 49,
+  ],
+  [
+    -1, 1, 1, 2, 2, 4, 4, 6, 6, 8, 8, 8, 10, 12, 16, 12, 17, 16, 18, 21, 20, 23, 23, 25, 27, 29, 34, 34, 35, 38, 40, 43,
+    45, 48, 51, 53, 56, 59, 62, 65, 68,
+  ],
+  [
+    -1, 1, 1, 2, 4, 4, 4, 5, 6, 8, 8, 11, 11, 16, 16, 18, 16, 19, 21, 25, 25, 25, 34, 30, 32, 35, 37, 40, 42, 45, 48,
+    51, 54, 57, 60, 63, 66, 70, 74, 77, 81,
+  ],
 ];
 
 /** Encode `text` (as UTF-8 bytes). Throws a `RangeError` past version 40's capacity. */

package/src/lib/session-refresh.ts

@@ -110,10 +110,7 @@ export interface SessionRefreshOptions<R extends SessionRenewal> {
  * | `"changed"` | the session changed while it ran | nothing; read the app's own state |
  */
 export type SessionRefreshOutcome<R extends SessionRenewal = SessionRenewal> =
-  | { result: "renewed"; renewal: R }
-  | { result: "ended" }
-  | { result: "transient" }
-  | { result: "changed" };
+  { result: "renewed"; renewal: R } | { result: "ended" } | { result: "transient" } | { result: "changed" };
 
 /** The flight {@link createSessionRefresh} makes; {@link attachSessionRefresh} hooks it
  *  to an axios instance. */
@@ -339,8 +336,10 @@ interface SessionRefreshAxiosConfig extends ServerWakeAxiosConfig {
  *  the replay. `axios.create()`'s result fits it as is. `NoInfer`, because axios's
  *  `request` takes the WIDER `AxiosRequestConfig`: inferred from there, the config type
  *  no longer fits the interceptors, which hand out `InternalAxiosRequestConfig`. */
-interface SessionRefreshInstance<C extends SessionRefreshAxiosConfig, R extends { config: C }>
-  extends AxiosLikeInstance<C, R> {
+interface SessionRefreshInstance<
+  C extends SessionRefreshAxiosConfig,
+  R extends { config: C },
+> extends AxiosLikeInstance<C, R> {
   request(config: NoInfer<C>): Promise<unknown>;
 }
 

package/src/lib/table-text.ts

@@ -198,8 +198,7 @@ export const cellNumber = (cell: string) => Number(cell.replace(",", "."));
 
 /** Whether one cell holds a number yet. An empty cell is not one — it is a hole
  *  in the measurement, which is a different thing from a zero. */
-export const isCellNumber = (cell: string) =>
-  cell.trim() !== "" && !Number.isNaN(cellNumber(cell));
+export const isCellNumber = (cell: string) => cell.trim() !== "" && !Number.isNaN(cellNumber(cell));
 
 /**
  * The one separator and the one decimal mark a whole file is read with.
@@ -368,7 +367,15 @@ export interface TextTable {
 export function parseTextTable(text: string, options: ParseTextTableOptions = {}): TextTable {
   const content = textLines(text);
   if (!content.length) {
-    return { header: null, rows: [], lines: [], width: 0, separator: options.separator ?? ",", decimalComma: false, unread: [] };
+    return {
+      header: null,
+      rows: [],
+      lines: [],
+      width: 0,
+      separator: options.separator ?? ",",
+      decimalComma: false,
+      unread: [],
+    };
   }
   const separator = options.separator ?? votedSeparator(content);
   const decimalComma =
@@ -389,7 +396,12 @@ export function parseTextTable(text: string, options: ParseTextTableOptions = {}
   const unread: TableLine[] = split.slice(0, first).map(({ entry }) => entry);
   const body = split.slice(first);
   const fitting = body.filter(({ cells }) => cells.length === width);
-  const header = options.header ?? looksLikeHeader(fitting[0].cells, fitting.slice(1, 21).map(({ cells }) => cells));
+  const header =
+    options.header ??
+    looksLikeHeader(
+      fitting[0].cells,
+      fitting.slice(1, 21).map(({ cells }) => cells),
+    );
 
   const rows: string[][] = [];
   const lines: TableLine[] = [];
@@ -464,7 +476,11 @@ const withoutQuoted = (line: string) => line.replace(/"(?:[^"]|"")*"/g, '""');
  * A run of whitespace is one separator and makes no empty cells.
  */
 function cellsOf(line: string, separator: TableSeparator): string[] {
-  if (separator === " ") return line.split(/\s+/).filter((field) => field !== "").map(unquote);
+  if (separator === " ")
+    return line
+      .split(/\s+/)
+      .filter((field) => field !== "")
+      .map(unquote);
   const cells: string[] = [];
   let cell = "";
   let quoted = false;
@@ -499,7 +515,9 @@ function cellsOf(line: string, separator: TableSeparator): string[] {
 
 /** A whitespace-separated field with its quotes off. */
 function unquote(field: string): string {
-  return field.length >= 2 && field.startsWith('"') && field.endsWith('"') ? field.slice(1, -1).replace(/""/g, '"') : field;
+  return field.length >= 2 && field.startsWith('"') && field.endsWith('"')
+    ? field.slice(1, -1).replace(/""/g, '"')
+    : field;
 }
 
 /** The column count most lines share; a tie goes to the wider table. */

package/src/lib/text-match.ts

@@ -26,7 +26,49 @@ export function foldForSearch(text: string, locale?: string): string {
   } catch {
     lower = text.toLocaleLowerCase();
   }
-  return lower.normalize("NFD").replace(/\p{M}+/gu, "").replace(/ß/g, "ss");
+  return lower
+    .normalize("NFD")
+    .replace(/\p{M}+/gu, "")
+    .replace(/ß/g, "ss");
+}
+
+/**
+ * A picker's query as its words, each folded (0.51.4, keksdose's /prices shop picker):
+ * "Migros  Zürich" → `["migros", "zurich"]`. An empty or blank query has no words.
+ */
+export function searchWords(query: string, locale?: string): string[] {
+  return foldForSearch(query, locale)
+    .split(/\s+/)
+    .filter((word) => word !== "");
+}
+
+/**
+ * Whether a row matches a picker's query: EVERY word appears in at least one of the row's
+ * texts — "migros 8004" finds a row named "Migros · 8004 Zürich", and a row whose chain is
+ * its group and whose place is its label (pass both). Until 0.51.4 the whole query had to
+ * be ONE substring of one text, so two words found nothing unless they stood side by side
+ * in that order. One word matches exactly as before, and so does the old query when it
+ * was a substring. No words match everything.
+ *
+ * `words` from {@link searchWords}; `texts` as they are (folded here), `undefined` skipped.
+ *
+ * Exported since 0.51.5 for an app's own async source: a picker shows `loadOptions`'
+ * rows as they come, so a source that narrows on the client filters with this, the same
+ * rule the kit applies to `options` (keksdose's shop picker past its first hundred shops).
+ */
+export function matchesSearch(
+  words: readonly string[],
+  texts: readonly (string | undefined)[],
+  locale?: string,
+): boolean {
+  if (words.length === 0) return true;
+  // One haystack per row; a word holds no whitespace, so it cannot match across the
+  // newline between two texts.
+  const hay = texts
+    .filter((t): t is string => t !== undefined)
+    .map((t) => foldForSearch(t, locale))
+    .join("\n");
+  return words.every((word) => hay.includes(word));
 }
 
 /** {@link rankMatch}'s answer: lower is better, `-1` is no match. */

package/src/lib/translation-review.ts

@@ -275,9 +275,7 @@ export function reviewStatus(
  * copies of it apply the same rule.
  */
 export function keyInArea(key: string, area: string): boolean {
-  return (
-    key === area || key.startsWith(`${area}.`) || key.startsWith(`${area}:`) || key.startsWith(`kit.${area}.`)
-  );
+  return key === area || key.startsWith(`${area}.`) || key.startsWith(`${area}:`) || key.startsWith(`kit.${area}.`);
 }
 
 /**

package/src/notifications/notification-inbox.tsx

@@ -47,8 +47,10 @@ export interface NotificationInboxItem<Id extends string | number = string | num
  *  "Mark all as read", or "Clear all". */
 export type NotificationInboxAction = "read" | "readAll" | "clear";
 
-export interface NotificationInboxProps<Id extends string | number = string | number>
-  extends Omit<ComponentPropsWithRef<"div">, "children" | "title"> {
+export interface NotificationInboxProps<Id extends string | number = string | number> extends Omit<
+  ComponentPropsWithRef<"div">,
+  "children" | "title"
+> {
   /** The rows, newest first; `undefined` while the first page loads. */
   items: readonly NotificationInboxItem<Id>[] | undefined;
   /** Every unread row of the account (`unread_count`), not only this page's. */
@@ -242,7 +244,11 @@ export function NotificationInbox<Id extends string | number = string | number>(
   } else {
     body = (
       // Named by the heading — except while "Clear all" asks, when the heading is away.
-      <List className="p-1" aria-labelledby={asking ? undefined : headingId} aria-label={asking ? labels.inboxTitle : undefined}>
+      <List
+        className="p-1"
+        aria-labelledby={asking ? undefined : headingId}
+        aria-label={asking ? labels.inboxTitle : undefined}
+      >
         {items.map((item) => {
           const row = {
             title: item.title,
@@ -288,7 +294,14 @@ export function NotificationInbox<Id extends string | number = string | number>(
         })}
         {hasMore && onLoadMore && (
           <li className="px-2 py-1">
-            <Button type="button" size="sm" variant="ghost" pending={loadingMore} onClick={onLoadMore} className="w-full">
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              pending={loadingMore}
+              onClick={onLoadMore}
+              className="w-full"
+            >
               {labels.showMore}
             </Button>
           </li>

package/src/notifications/notification-parts.tsx

@@ -68,8 +68,7 @@ export function useWriteOverlay<V>(source: unknown): WriteOverlay<V> {
     has: (key: string) => entries.has(key),
     get: (key: string) => entries.get(key)?.value,
     pending: (key: string) => entries.get(key)?.running === true,
-    set: (key: string, value: V) =>
-      setEntries((current) => new Map(current).set(key, { value, running: true })),
+    set: (key: string, value: V) => setEntries((current) => new Map(current).set(key, { value, running: true })),
     settle: (key: string, ok: boolean) =>
       setEntries((current) => {
         const entry = current.get(key);

package/src/notifications/notification-types-setting.tsx

@@ -34,8 +34,10 @@ function devChecks(): boolean {
   return Boolean(import.meta.env?.DEV);
 }
 
-export interface NotificationTypesSettingProps<Id extends string = string>
-  extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
+export interface NotificationTypesSettingProps<Id extends string = string> extends Omit<
+  ComponentPropsWithRef<"div">,
+  "children" | "onChange"
+> {
   /** The app's words for its types, in its order. Where an app types its ids. */
   types: readonly NotificationTypeEntry<Id>[];
   /** The `GET`'s `types` (§3.2); `undefined` while the first load runs. */
@@ -217,7 +219,8 @@ export function NotificationTypesSetting<Id extends string = string>({
     email: labels.channelEmail,
   };
   /** The columns on a wide screen: every channel some several-channel row offers. */
-  const drawnRows = value && !loading ? rowsOf(groups ? groups.flatMap((group) => group.types) : types.map((entry) => entry.id)) : [];
+  const drawnRows =
+    value && !loading ? rowsOf(groups ? groups.flatMap((group) => group.types) : types.map((entry) => entry.id)) : [];
   const multi = drawnRows.filter((row) => channelsOf(row.switches).length > 1);
   const columns = CHANNELS.filter((channel) => multi.some((row) => channelsOf(row.switches).includes(channel)));
   const columnHeadings =
@@ -357,26 +360,24 @@ export function NotificationTypesSetting<Id extends string = string>({
   if (loading || value === undefined) {
     body = <Skeleton lines={3} label={labels.typesLoading} />;
   } else if (groups) {
-    const drawn = groups
-      .map((group) => ({ group, rows: rowsOf(group.types) }))
-      .filter(({ rows }) => rows.length > 0);
+    const drawn = groups.map((group) => ({ group, rows: rowsOf(group.types) })).filter(({ rows }) => rows.length > 0);
     body =
       drawn.length === 0 ? (
         <p className={CARD_DESCRIPTION_CLASS}>{labels.typesEmpty}</p>
       ) : (
         <>
-        {columnHeadings}
-        {drawn.map(({ group, rows }) => {
-          const headingId = `${groupId}-${group.id}`;
-          return (
-            <div key={group.id} role="group" aria-labelledby={headingId} className="space-y-3">
-              <SectionLabel as="div" size="xs" id={headingId}>
-                {group.label}
-              </SectionLabel>
-              {rows.map(renderRow)}
-            </div>
-          );
-        })}
+          {columnHeadings}
+          {drawn.map(({ group, rows }) => {
+            const headingId = `${groupId}-${group.id}`;
+            return (
+              <div key={group.id} role="group" aria-labelledby={headingId} className="space-y-3">
+                <SectionLabel as="div" size="xs" id={headingId}>
+                  {group.label}
+                </SectionLabel>
+                {rows.map(renderRow)}
+              </div>
+            );
+          })}
         </>
       );
   } else {

package/src/notifications/notifications-labels.ts

@@ -245,8 +245,7 @@ export const DEFAULT_NOTIFICATIONS_LABELS: NotificationsLabels = {
   added: (date) => `Added ${date}`,
   lastDelivery: (date) => `Last delivery ${date}`,
   noDelivery: "No delivery yet",
-  failures: (count) =>
-    count === 1 ? "1 failed delivery in a row" : `${count} failed deliveries in a row`,
+  failures: (count) => (count === 1 ? "1 failed delivery in a row" : `${count} failed deliveries in a row`),
   remove: "Remove",
   removeItem: (device) => `Remove ${device}`,
   removePrompt: "Stop sending notifications to this device?",

package/src/notifications/push-device-setting.tsx

@@ -101,7 +101,13 @@ export function PushDeviceSetting({
       (ok): Outcome => (ok ? null : { tone: "danger", text: labels.enableFailed }),
       labels.enableFailed,
     );
-  const disable = () => run("disable", () => push.disable(), () => null, labels.failed);
+  const disable = () =>
+    run(
+      "disable",
+      () => push.disable(),
+      () => null,
+      labels.failed,
+    );
   const test = () =>
     run(
       "test",

package/src/notifications/push-devices-setting.tsx

@@ -55,8 +55,10 @@ export function describeUserAgent(ua: string | null): string | null {
   return [browser, os].filter(Boolean).join(" · ");
 }
 
-export interface PushDevicesSettingProps<Id extends string | number = string>
-  extends Omit<ComponentPropsWithRef<"div">, "children"> {
+export interface PushDevicesSettingProps<Id extends string | number = string> extends Omit<
+  ComponentPropsWithRef<"div">,
+  "children"
+> {
   /** `GET /notifications/devices`, oldest first; `undefined` while the first load runs. */
   devices: readonly PushDeviceItem<Id>[] | undefined;
   loading?: boolean;
@@ -371,7 +373,9 @@ function DeviceRow<Id extends string | number>({
             {" · "}
             {lastDelivery ? labels.lastDelivery(lastDelivery) : labels.noDelivery}
           </div>
-          {device.failure_count > 0 && <div className="text-xs text-warning">{labels.failures(device.failure_count)}</div>}
+          {device.failure_count > 0 && (
+            <div className="text-xs text-warning">{labels.failures(device.failure_count)}</div>
+          )}
         </div>
         <Button
           ref={removeRef}

package/src/notifications/push-worker.ts

@@ -133,9 +133,17 @@ export async function resubscribeAfterChange(
 
 /** The parts of a `ServiceWorkerGlobalScope` this needs. */
 export interface PushWorkerScope {
-  addEventListener: (type: "pushsubscriptionchange", listener: (event: PushSubscriptionChangeEventLike) => void) => void;
+  addEventListener: (
+    type: "pushsubscriptionchange",
+    listener: (event: PushSubscriptionChangeEventLike) => void,
+  ) => void;
   registration: { pushManager: PushManager };
-  clients?: { matchAll: (options?: { type?: "window"; includeUncontrolled?: boolean }) => Promise<readonly { postMessage: (message: unknown) => void }[]> };
+  clients?: {
+    matchAll: (options?: {
+      type?: "window";
+      includeUncontrolled?: boolean;
+    }) => Promise<readonly { postMessage: (message: unknown) => void }[]>;
+  };
 }
 
 /**

package/src/notifications/quiet-hours-setting.tsx

@@ -25,7 +25,10 @@ function zoneName(zone: string, regions: NotificationRegionLabels): string {
   const named = Object.prototype.hasOwnProperty.call(regions, region)
     ? regions[region as keyof NotificationRegionLabels]
     : region;
-  return `${named} / ${zone.slice(slash + 1).replace(/_/g, " ").replace(/\//g, " / ")}`;
+  return `${named} / ${zone
+    .slice(slash + 1)
+    .replace(/_/g, " ")
+    .replace(/\//g, " / ")}`;
 }
 
 export interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {

package/src/notifications/use-push-device.ts

@@ -307,7 +307,10 @@ export function usePushDevice(options: UsePushDeviceOptions): PushDevice {
         within(
           (async () =>
             (reuse ? await registration.pushManager.getSubscription() : null) ??
-            (await registration.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: keyBytes(key) })))(),
+            (await registration.pushManager.subscribe({
+              userVisibleOnly: true,
+              applicationServerKey: keyBytes(key),
+            })))(),
           PUSH_TIMEOUT_MS,
           "push_timeout",
         );

package/src/offline/pwa-update-prompt.tsx

@@ -39,7 +39,13 @@ export interface PwaUpdatePromptProps {
 /** The toast's id: one prompt at a time, replaced in place. */
 const PWA_UPDATE_TOAST_ID = "pwa-update";
 
-export function PwaUpdatePrompt({ needRefresh, onReload, onDismiss, hold = false, labels: labelsProp }: PwaUpdatePromptProps) {
+export function PwaUpdatePrompt({
+  needRefresh,
+  onReload,
+  onDismiss,
+  hold = false,
+  labels: labelsProp,
+}: PwaUpdatePromptProps) {
   const labels = useKitLabels("pwaUpdate", DEFAULT_PWA_UPDATE_PROMPT_LABELS, labelsProp);
   // The callbacks are read at click time, so a new function each render does not
   // re-raise the toast.

package/src/offline/query-persistence.ts

@@ -292,12 +292,15 @@ export function createQueryPersistence({
         timestamp,
         buster: stored,
         clientState: {
-          mutations: persistMutations && Array.isArray(clientState.mutations)
-            ? clientState.mutations.filter(
-                (m) => !carriesScrubbed((m as { state?: { variables?: unknown } } | null)?.state?.variables),
-              )
-            : [],
-          queries: clientState.queries.map(restorable).filter((q) => q !== null) as PersistedClient["clientState"]["queries"],
+          mutations:
+            persistMutations && Array.isArray(clientState.mutations)
+              ? clientState.mutations.filter(
+                  (m) => !carriesScrubbed((m as { state?: { variables?: unknown } } | null)?.state?.variables),
+                )
+              : [],
+          queries: clientState.queries
+            .map(restorable)
+            .filter((q) => q !== null) as PersistedClient["clientState"]["queries"],
         },
       };
     } catch {

package/src/offline.ts

@@ -6,7 +6,12 @@
 // `@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 {
+  createQueryPersistence,
+  DEFAULT_SCRUB_FIELDS,
+  isCacheSafe,
+  removeStaleQueryCopies,
+} from "./offline/query-persistence";
 export type {
   QueryPersistence,
   QueryPersistenceOptions,