@eifi1/ui-kit 0.51.7 → 0.53.0

package/src/lib/text-match.ts

@@ -107,8 +107,63 @@ export function rankMatch(
 ): MatchRank {
   const q = foldForSearch(query.trim(), locale);
   if (!q) return 0;
-  const text = foldForSearch(label, locale);
-  if (text === q || (code !== undefined && foldForSearch(code, locale) === q)) return 0;
+  return rankFolded(foldForSearch(label, locale), q, code === undefined ? undefined : foldForSearch(code, locale));
+}
+
+/** {@link rankMatch} on a text, a non-empty query and a code all folded already. */
+function rankFolded(text: string, q: string, code: string | undefined): MatchRank {
+  if (text === q || code === q) return 0;
   if (text.startsWith(q)) return 1;
   return text.includes(q) ? 2 : -1;
 }
+
+/** A row {@link searchRanked} kept, and how well it answers the WHOLE query:
+ *  {@link rankMatch}'s rank, or `3` for a row that holds the query's words apart
+ *  ("Zürich Migros" for "migros zürich"). */
+export interface RankedHit<T> {
+  row: T;
+  rank: Exclude<MatchRank, -1> | 3;
+}
+
+/**
+ * The rows that hold every word of `query`, each ranked for the WHOLE query — for the
+ * lists that FILTER by words ({@link matchesSearch}) and RANK by the whole query
+ * ({@link rankMatch}): Combobox, CountrySelect and InlineEntityCombobox (refactor audit
+ * 2026-10-30, DUP-4). In the order given; sort by `rank` with a stable sort, and the rows
+ * of one rank keep it. No words keep every row, at `0`.
+ *
+ * Each row's texts are folded ONCE, and the query once. The lists asked `matchesSearch`
+ * and then `rankMatch` of each row they kept, which folded the row three times and the
+ * query once per row, per keystroke — InlineEntityCombobox asked `rankMatch` twice of
+ * most rows (0.52 code review, combobox.tsx).
+ *
+ * `texts(row)`: where a word may stand; the FIRST is the label the rank is for.
+ * `code(row)`: a key that answers only WHOLE — a word that IS the code matches the row,
+ * and the code as the whole query ranks `0` ("ch" is Switzerland before it is Chad) —
+ * never a letter of it ("w" is not Aruba, AW: 0.52 code review, country-select.tsx).
+ * Internal: not in the barrel.
+ */
+export function searchRanked<T>(
+  rows: readonly T[],
+  query: string,
+  texts: (row: T) => readonly (string | undefined)[],
+  { code, locale }: { code?: (row: T) => string; locale?: string } = {},
+): RankedHit<T>[] {
+  const q = foldForSearch(query.trim(), locale);
+  const words = q.split(/\s+/).filter((word) => word !== "");
+  if (words.length === 0) return rows.map((row) => ({ row, rank: 0 }));
+  const hits: RankedHit<T>[] = [];
+  for (const row of rows) {
+    const folded = texts(row)
+      .filter((t): t is string => t !== undefined)
+      .map((t) => foldForSearch(t, locale));
+    const key = code === undefined ? undefined : foldForSearch(code(row), locale);
+    // One haystack, as `matchesSearch` has it: a word holds no whitespace, so it cannot
+    // match across the newline between two texts.
+    const hay = folded.join("\n");
+    if (!words.every((word) => word === key || hay.includes(word))) continue;
+    const rank = rankFolded(folded[0] ?? "", q, key);
+    hits.push({ row, rank: rank === -1 ? 3 : rank });
+  }
+  return hits;
+}

package/src/lib/thenable.ts

@@ -0,0 +1,19 @@
+/**
+ * Whether a callback's answer is a promise to wait for — an object or a function with a
+ * `then` (Promises/A+ "thenable"). A callback that answers nothing is done when it
+ * returns.
+ *
+ * The auth forms (`auth/status-parts`), the admin confirm and the feedback mutation each
+ * wrote their own, three spellings of one check — and the admin's turned a thenable
+ * FUNCTION away (0.52 code review, feedback/feedback-mutation.ts; the refactor audit's
+ * DUP findings).
+ *
+ * @internal Package-private — not re-exported from the barrel.
+ */
+export function isThenable(value: unknown): value is PromiseLike<unknown> {
+  return (
+    (typeof value === "object" || typeof value === "function") &&
+    value !== null &&
+    typeof (value as { then?: unknown }).then === "function"
+  );
+}

package/src/lib/translation-review.ts

@@ -22,7 +22,7 @@
  * the same contract, so the mapping is written once, here.
  */
 
-import { foldForSearch } from "./text-match";
+import { matchesSearch, searchWords } from "./text-match";
 
 // ── Shapes ──────────────────────────────────────────────────────────────────────
 
@@ -407,7 +407,8 @@ export interface TranslationReviewFilter {
   source: string;
   namespace: string;
   /** Searched in the key, the text and the reference, folded as every kit list's search
-   *  is (`foldForSearch`): no case, no accents — "uberweisung" finds "Überweisung". */
+   *  is (`foldForSearch`): no case, no accents — "uberweisung" finds "Überweisung". Every
+   *  word on its own (0.52): "budget assign" finds `budget.rta`, "Ready to Assign". */
   query: string;
   placeholdersOnly: boolean;
 }
@@ -420,20 +421,27 @@ export const DEFAULT_TRANSLATION_REVIEW_FILTER: TranslationReviewFilter = {
   placeholdersOnly: false,
 };
 
+/**
+ * The rows the filters leave. `locale` (0.52) folds the query and the texts as the kit's
+ * other lists do — the panel passes the provider's; left out, the runtime's default.
+ */
 export function filterTranslationRows(
   rows: readonly TranslationRow[],
   filter: Partial<TranslationReviewFilter>,
+  locale?: string,
 ): TranslationRow[] {
   const f = { ...DEFAULT_TRANSLATION_REVIEW_FILTER, ...filter };
-  // Folded as every kit list's search is (DUP-5, refactor audit 2026-10).
-  const q = foldForSearch(f.query.trim());
+  // Folded as every kit list's search is (DUP-5, refactor audit 2026-10), and since 0.52
+  // word by word, each anywhere in the key, the text or the reference (0.51.4's rule;
+  // refactor audit 2026-10-30, DUP-4: the whole query had to be one substring of one).
+  const words = searchWords(f.query, locale);
   return rows.filter(
     (row) =>
       (f.status === "all" || row.status === f.status) &&
       (f.source === "all" || row.source === f.source) &&
       (f.namespace === "all" || row.namespace === f.namespace) &&
       (!f.placeholdersOnly || row.placeholderMismatch) &&
-      (!q || [row.key, row.text, row.reference].some((s) => foldForSearch(s).includes(q))),
+      matchesSearch(words, [row.key, row.text, row.reference], locale),
   );
 }
 

package/src/notifications/device-zone-report.ts

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-import { settle } from "../account/account-parts";
+import { settle } from "../hooks/use-mounted";
 
 export interface DeviceZoneReportOptions {
   /** The account's `device_timezone` from `/auth/me`; `undefined` while it loads (no

package/src/notifications/notification-bell.tsx

@@ -2,7 +2,7 @@ import { Bell } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { useKitFormat } from "../lib/format";
+import { useDayFormatter } from "../lib/day-format";
 import { DEFAULT_LIST_LABELS } from "../components/list-labels";
 import { StatusDot } from "../components/status-dot";
 import { TopBarActionMenu } from "../shell/topbar-action-menu";
@@ -26,7 +26,8 @@ export interface NotificationBellProps<Id extends string | number = string | num
   href: string;
   /** The row's glyph for a type, as {@link NotificationInbox}'s; `Bell` by default. */
   icon?: (type: string) => LucideIcon | undefined;
-  /** A row's time. Default: the provider's locale and `timeZone`, date and time. */
+  /** A row's time. Default: the provider's `formatDate` (the app's date preference) with
+   *  the language's clock, else date and time in the provider's locale and `timeZone`. */
   formatDate?: (iso: string) => string;
   labels?: LabelOverride<NotificationsLabels>;
 }
@@ -57,8 +58,10 @@ export function NotificationBell<Id extends string | number = string | number>({
 }: NotificationBellProps<Id>) {
   const labels = useNotificationsLabels(labelsProp);
   const list = useKitLabels("list", DEFAULT_LIST_LABELS);
-  const { formatDate } = useKitFormat();
-  const timeOf = (iso: string) => (formatDateProp ? formatDateProp(iso) : formatDate(iso, "dateTime"));
+  // As the inbox's rows: the prop, else the provider's `formatDate` with the language's
+  // clock, else the kit's in the provider's locale and `timeZone` (refactor audit 2026-10-30, DUP-2).
+  const day = useDayFormatter(formatDateProp);
+  const timeOf = (iso: string) => day(iso, { time: true });
   const unread = unreadCount > 0;
   const shown = (items ?? []).slice(0, BELL_ROWS);
 

package/src/notifications/notification-inbox.tsx

@@ -1,21 +1,23 @@
-import { useEffect, useId, useRef, useState } from "react";
-import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react";
+import { useId, useRef, useState } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { Bell, CheckCheck, Trash2 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels";
 import { cn } from "../lib/cn";
-import { useKitFormat } from "../lib/format";
+import { useDayFormatter } from "../lib/day-format";
 import { Button } from "../components/button";
 import { Card } from "../components/card";
 import { EmptyState } from "../components/empty-state";
 import { IconButton } from "../components/icon-button";
+import { InlineConfirm } from "../components/inline-confirm";
 import { List, ListItem } from "../components/list";
 import { Skeleton } from "../components/skeleton";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
 import { SettingsCardTitle } from "../settings/settings-heading";
-import { settle, useMounted } from "../account/account-parts";
+import { safeNextPath } from "../landing/routing";
+import { settle, useMounted } from "../hooks/use-mounted";
 import { describeFailure, FailureLine, useNotificationsLabels } from "./notification-parts";
 import type { NotificationsLabels } from "./notifications-labels";
 
@@ -29,7 +31,8 @@ export interface NotificationInboxItem<Id extends string | number = string | num
   notification_type: string;
   title: string;
   body: string;
-  /** A path in the app, an absolute URL, or `null` (nothing to open). */
+  /** A path in the app, or `null` (nothing to open). Never `//` or a scheme (§3.7): a url
+   *  that does not resolve to this origin is drawn as a row with nothing to open. */
   url: string | null;
   /** ISO date-time. */
   created_at: string;
@@ -62,10 +65,12 @@ export interface NotificationInboxProps<Id extends string | number = string | nu
   onClear: () => Promise<unknown> | void;
   /**
    * Open a row: the kit marks it read first, then calls this, and the app routes to
-   * `item.url` (kastlan switches the acting company, `item.company_id`, first). Every row is a button then.
-   * Left out, a row with a `url` is a real link — an in-app path through the provider's
-   * router link, an absolute URL in a new tab — that marks itself read on a click or a
-   * middle click (keksdose #451), and a row without one marks itself read.
+   * `item.url` (kastlan switches the acting company, `item.company_id`, first) — through
+   * `safeNextPath`, as the kit does. Every row is a button then.
+   * Left out, a row with a `url` is a real link through the provider's router link — the
+   * url as a same-origin path (`safeNextPath`) — that marks itself read on a click or a
+   * middle click (keksdose #451). A row without one, or with one that leaves the origin
+   * (`//host`, a scheme), marks itself read and opens nothing.
    */
   onOpen?: (item: NotificationInboxItem<Id>) => void;
   /** The row's glyph for a type — the app's map (keksdose's `TYPE_ICONS`). `undefined`,
@@ -77,7 +82,8 @@ export interface NotificationInboxProps<Id extends string | number = string | nu
   onLoadMore?: () => void;
   /** The next page is loading. */
   loadingMore?: boolean;
-  /** A row's time. Default: the provider's locale and `timeZone`, date and time. */
+  /** A row's time. Default: the provider's `formatDate` (the app's date preference) with
+   *  the language's clock, else date and time in the provider's locale and `timeZone`. */
   formatDate?: (iso: string) => string;
   /** The heading. Default `labels.inboxTitle` ("Inbox"). */
   title?: ReactNode;
@@ -124,21 +130,18 @@ export function NotificationInbox<Id extends string | number = string | number>(
 }: NotificationInboxProps<Id>) {
   const labels = useNotificationsLabels(labelsProp);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const { formatDate } = useKitFormat();
+  // The prop, else the provider's `formatDate` with the language's clock, else the kit's
+  // date and time in the provider's locale and `timeZone` (refactor audit 2026-10-30, DUP-2).
+  const day = useDayFormatter(formatDateProp);
   const [asking, setAsking] = useState(false);
   const [busy, setBusy] = useState<"read" | "clear" | null>(null);
   const [failure, setFailure] = useState<ReactNode>(null);
   const mounted = useMounted();
   const headingId = useId();
-  const cancelRef = useRef<HTMLButtonElement>(null);
+  // Back to "Clear all" when the confirm leaves, so focus does not fall to <body>.
   const clearRef = useRef<HTMLButtonElement>(null);
-  const [returning, setReturning] = useState(false);
-  useEffect(() => {
-    if (asking) cancelRef.current?.focus();
-    else if (returning) clearRef.current?.focus();
-  }, [asking, returning]);
 
-  const timeOf = (iso: string) => (formatDateProp ? formatDateProp(iso) : formatDate(iso, "dateTime"));
+  const timeOf = (iso: string) => day(iso, { time: true });
   const iconOf = (type: string): LucideIcon => icon?.(type) ?? Bell;
 
   const run = (which: "read" | "clear", call: () => unknown, after?: () => void) => {
@@ -166,42 +169,21 @@ export function NotificationInbox<Id extends string | number = string | number>(
     });
   };
 
-  const leave = () => {
-    setReturning(true);
-    setAsking(false);
-  };
-  const escapeLeaves = (event: KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      leave();
-    }
-  };
-
   const count = items?.length ?? 0;
 
   const header = asking ? (
-    <div className="space-y-2 border-b border-subtle px-3 py-2" data-inbox-confirm="">
-      <p role="alert" className="text-sm">
-        {labels.clearPrompt}
-      </p>
-      <div className="flex flex-wrap gap-2">
-        <Button
-          type="button"
-          size="sm"
-          variant="danger"
-          commit={COMMIT_EXCEPT_BILLING}
-          pending={busy === "clear"}
-          onClick={() => run("clear", onClear, () => setAsking(false))}
-          onKeyDown={escapeLeaves}
-        >
-          {labels.clearAll}
-        </Button>
-        <Button ref={cancelRef} type="button" size="sm" variant="ghost" onClick={leave} onKeyDown={escapeLeaves}>
-          {common.cancel}
-        </Button>
-      </div>
-    </div>
+    <InlineConfirm
+      className="border-b border-subtle px-3 py-2"
+      data-inbox-confirm=""
+      prompt={labels.clearPrompt}
+      confirmLabel={labels.clearAll}
+      cancelLabel={common.cancel}
+      onConfirm={() => run("clear", onClear, () => setAsking(false))}
+      onLeave={() => setAsking(false)}
+      busy={busy === "clear"}
+      commit={COMMIT_EXCEPT_BILLING}
+      returnFocusRef={clearRef}
+    />
   ) : (
     <div className="flex items-center justify-between gap-2 border-b border-subtle px-3 py-2">
       <SettingsCardTitle id={headingId}>{title ?? labels.inboxTitle}</SettingsCardTitle>
@@ -223,10 +205,7 @@ export function NotificationInbox<Id extends string | number = string | number>(
           size="xs"
           tone="danger"
           commit={COMMIT_EXCEPT_BILLING}
-          onClick={() => {
-            setReturning(false);
-            setAsking(true);
-          }}
+          onClick={() => setAsking(true)}
           disabled={count === 0 || busy !== null}
           label={labels.clearAll}
         >
@@ -273,7 +252,11 @@ export function NotificationInbox<Id extends string | number = string | number>(
               />
             );
           }
-          if (!item.url) {
+          // A same-origin path or nothing (refactor audit 2026-10-30, FLW-8): `//host` starts
+          // with "/" and went through the router link off the origin, and any scheme opened
+          // as an external link. The urls are server-written; this is defence in depth.
+          const path = safeNextPath(item.url);
+          if (!path) {
             return <ListItem key={item.id} {...row} data-inbox-item={String(item.id)} onClick={() => markOne(item)} />;
           }
           // A real link, so a middle click opens a background tab; a middle click fires no
@@ -283,8 +266,7 @@ export function NotificationInbox<Id extends string | number = string | number>(
               key={item.id}
               {...row}
               data-inbox-item={String(item.id)}
-              href={item.url}
-              external={!item.url.startsWith("/")}
+              href={path}
               onClick={() => markOne(item)}
               onAuxClick={(event) => {
                 if (event.button === 1) markOne(item);

package/src/notifications/notification-parts.tsx

@@ -19,10 +19,9 @@ export function useNotificationsLabels(prop?: LabelOverride<NotificationsLabels>
   return useKitLabels("notifications", DEFAULT_NOTIFICATIONS_LABELS, prop);
 }
 
-/** The app's words for a failure, else `fallback`. */
-export function describeFailure(own: ReactNode | undefined, fallback: ReactNode): ReactNode {
-  return hasContent(own) ? own : fallback;
-}
+/** The app's words for a failure, else `fallback` — in lib/ since 0.52, for the auth forms
+ *  too (refactor audit 2026-10-30, DUP-14). */
+export { describeFailure } from "../lib/describe-failure";
 
 /** A failure, said under the card's controls — nothing toasts (§4.2). */
 export function FailureLine({ children }: { children: ReactNode }) {

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

@@ -13,7 +13,7 @@ import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
 import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes";
 import { SettingsCardTitle } from "../settings/settings-heading";
-import { settle, useMounted } from "../account/account-parts";
+import { settle, useMounted } from "../hooks/use-mounted";
 import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts";
 import type { WriteOverlay } from "./notification-parts";
 import type { NotificationsLabels } from "./notifications-labels";

package/src/notifications/notifications-labels.ts

@@ -162,6 +162,12 @@ export interface NotificationsLabels {
   /** Account mail is not a notification, and keeps coming. */
   accountMail: string;
   turnBackOn: string;
+  /**
+   * 0.52: the line under the outcome, {@link accountMail} and {@link turnBackOn} as one
+   * text — joined by the catalogue, not by the panel: the panel glued them with an ASCII
+   * space, which Chinese does not put between sentences (refactor audit 2026-10-30, DOC-11).
+   */
+  stoppedHint: (accountMail: string, turnBackOn: string) => string;
   openSettings: string;
   /** A token the server refused, or one that does not parse. */
   invalidLink: string;
@@ -273,6 +279,7 @@ export const DEFAULT_NOTIFICATIONS_LABELS: NotificationsLabels = {
   stoppedAll: (app) => `Done. You won’t get notification e-mails from ${app} any more.`,
   accountMail: "E-mails about your account still come.",
   turnBackOn: "You can turn them back on at any time in Settings.",
+  stoppedHint: (accountMail, turnBackOn) => `${accountMail} ${turnBackOn}`,
   openSettings: "Open Settings",
   invalidLink: "This link doesn’t work any more. You can turn e-mails off in Settings instead.",
 

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

@@ -11,7 +11,7 @@ import { DialogFrame } from "../components/dialog-frame";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
 import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes";
 import { SettingsCardTitle } from "../settings/settings-heading";
-import { useMounted } from "../account/account-parts";
+import { useMounted } from "../hooks/use-mounted";
 import { describeFailure, FailureLine, useNotificationsLabels } from "./notification-parts";
 import type { NotificationsLabels } from "./notifications-labels";
 import { PushDeviceError } from "./use-push-device";

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

@@ -1,21 +1,23 @@
-import { useEffect, useRef, useState } from "react";
-import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react";
+import { useRef, useState } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { MonitorSmartphone } from "lucide-react";
 
-import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels";
 import { cn } from "../lib/cn";
-import { formatDate } from "../lib/format";
+import { useDayFormatter } from "../lib/day-format";
+import { toDate } from "../lib/format";
 import { Button } from "../components/button";
 import { Card } from "../components/card";
 import { Chip } from "../components/chip";
 import { Disclosure } from "../components/disclosure";
+import { InlineConfirm } from "../components/inline-confirm";
 import { Skeleton } from "../components/skeleton";
 import { Switch } from "../components/switch";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
 import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes";
 import { SettingsCardTitle } from "../settings/settings-heading";
-import { settle, useMounted } from "../account/account-parts";
+import { settle, useMounted } from "../hooks/use-mounted";
 import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts";
 import type { NotificationsLabels } from "./notifications-labels";
 import type { NotificationTypeEntry, NotificationTypesValue, PushDeviceItem } from "./notification-types";
@@ -68,7 +70,8 @@ export interface PushDevicesSettingProps<Id extends string | number = string> ex
   /** `DELETE /notifications/devices/{id}`. Asked first; refresh `devices` once it
    *  resolves. */
   onRemove: (id: Id) => Promise<unknown> | void;
-  /** The dates' text. Default: the provider's locale, medium date. */
+  /** The dates' text. Default: the provider's `formatDate` (the app's date preference),
+   *  else a medium date in the provider's locale and `timeZone`. */
   formatDate?: (date: Date) => string;
   /** Overrides the provider's locale for the default format. */
   locale?: string;
@@ -140,16 +143,17 @@ export function PushDevicesSetting<Id extends string | number = string>({
   const labels = useNotificationsLabels(labelsProp);
   const mutedOverlay = useWriteOverlay<string[]>(devices);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  const locale = useKitLocale(localeProp);
+  // The prop, else the provider's `formatDate` (the app's date preference), else the kit's
+  // in the provider's locale and `timeZone` (refactor audit 2026-10-30, DUP-2).
+  const day = useDayFormatter(formatDateProp, localeProp);
   const [asking, setAsking] = useState<Id | null>(null);
   const [busyId, setBusyId] = useState<Id | null>(null);
   const [failure, setFailure] = useState<ReactNode>(null);
   const mounted = useMounted();
 
   const dateText = (iso: string): string => {
-    const date = new Date(iso);
-    if (Number.isNaN(date.getTime())) return iso;
-    return formatDateProp ? formatDateProp(date) : formatDate(date, "medium", { locale });
+    const date = toDate(iso);
+    return date ? day(date) : iso;
   };
 
   const remove = (device: PushDeviceItem<Id>) => {
@@ -305,53 +309,27 @@ function DeviceRow<Id extends string | number>({
   /** "Types on this device", under the row (0.46). */
   types: ReactNode;
 }) {
-  const cancelRef = useRef<HTMLButtonElement>(null);
+  // Back to Remove when the confirm leaves, so focus does not fall to <body>.
   const removeRef = useRef<HTMLButtonElement>(null);
-  // Which way the confirm closed: back to Remove, so focus does not fall to <body>.
-  const [returning, setReturning] = useState(false);
-  useEffect(() => {
-    if (asking) cancelRef.current?.focus();
-    else if (returning) removeRef.current?.focus();
-  }, [asking, returning]);
-
-  const leave = () => {
-    setReturning(true);
-    onCancel();
-  };
-  const escapeLeaves = (event: KeyboardEvent<HTMLButtonElement>) => {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      event.stopPropagation();
-      leave();
-    }
-  };
 
   const row = { "data-push-device-id": String(device.id), "data-current": current || undefined };
 
   if (asking) {
     return (
-      <li {...row} className="space-y-2 py-2">
-        <p role="alert" className="text-sm">
-          {labels.removePrompt}
-        </p>
-        <div className="flex flex-wrap gap-2">
-          <Button
-            type="button"
-            size="sm"
-            variant="danger"
-            commit={COMMIT_EXCEPT_BILLING}
-            pending={busy}
-            aria-label={labels.removeItem(name)}
-            onClick={onConfirm}
-            onKeyDown={escapeLeaves}
-          >
-            {labels.remove}
-          </Button>
-          <Button ref={cancelRef} type="button" size="sm" variant="ghost" onClick={leave} onKeyDown={escapeLeaves}>
-            {cancelLabel}
-          </Button>
-        </div>
-      </li>
+      <InlineConfirm
+        as="li"
+        {...row}
+        className="py-2"
+        prompt={labels.removePrompt}
+        confirmLabel={labels.remove}
+        confirmName={labels.removeItem(name)}
+        cancelLabel={cancelLabel}
+        onConfirm={onConfirm}
+        onLeave={onCancel}
+        busy={busy}
+        commit={COMMIT_EXCEPT_BILLING}
+        returnFocusRef={removeRef}
+      />
     );
   }
 
@@ -385,10 +363,7 @@ function DeviceRow<Id extends string | number>({
           commit={COMMIT_EXCEPT_BILLING}
           disabled={blocked}
           aria-label={labels.removeItem(name)}
-          onClick={() => {
-            setReturning(false);
-            onAsk();
-          }}
+          onClick={onAsk}
         >
           {labels.remove}
         </Button>