@rapidmx/web-client 0.20.0 → 0.22.0

package/apps/shared/keyboard/keymap.ts

@@ -1,114 +1,114 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-
-/**
- * Where a shortcut applies. `global` works in every view; a view scope (`mail`, `calendar`, `contacts`, `tasks`) exists only while that
- * view is mounted; `compose` applies while focus is inside a compose window; `dialog` is for what a modal dialog binds itself - a
- * dialog on screen silences every other scope.
- */
-export type ShortcutScope = "global" | "mail" | "compose" | "calendar" | "contacts" | "tasks" | "dialog";
-
-/** The scopes the help dialog lists, in the order it lists them. */
-export const HELP_SCOPES: readonly ShortcutScope[] = ["global", "mail", "compose", "calendar", "contacts", "tasks"];
-
-export const SCOPE_LABELS: Record<ShortcutScope, string> = {
-    global: "Global",
-    mail: "Mail",
-    compose: "Compose",
-    calendar: "Calendar",
-    contacts: "Contacts",
-    tasks: "Tasks",
-    dialog: "Dialog",
-};
-
-/** One action the keyboard can trigger, and the keys that trigger it. Views register handlers for these; nothing else defines a key. */
-export interface ShortcutDef {
-    /** Stable name, unique across the map - what the help dialog de-duplicates on. */
-    id: string;
-    /** Specs (see `parseSpec()`) that trigger it, the first being the one shown first. `mod` is Ctrl, or Cmd on macOS. */
-    keys: readonly string[];
-    /** Extra specs that apply only in the desktop client, where the browser's own reserved keys (Ctrl+N, Ctrl+T) are the app's. */
-    electronKeys?: readonly string[];
-    /** What the help dialog and a button's tooltip call it. */
-    label: string;
-    scope: ShortcutScope;
-    /** Fires from a focused button or link too (Enter on a message row); by default Enter/Space are left to what has the focus. */
-    allowOnActivatable?: boolean;
-    /** Keeps firing while the key is held (arrows); by default a held key runs a one-shot action once. */
-    repeat?: boolean;
-}
-
-function def<T extends ShortcutDef>(shortcut: T): T {
-    return shortcut;
-}
-
-/**
- * The whole key map, in the order the help dialog lists it. The navigation set is literally Ctrl+Shift+<letter> on every platform (Cmd+Shift
- * on macOS collides with the browsers' own - Cmd+Shift+A/B/C/L/M/S are tab search, the bookmarks bar, Inspect, the sidebar, the profile
- * switcher and Save As - so it is not offered); the mail actions use `mod`, so Reply is Ctrl+R on Windows and Linux and Cmd+R on a Mac.
- * Ctrl+Q (mark read) stays Ctrl on a Mac because Cmd+Q is the system's Quit.
- */
-export const SHORTCUTS = {
-    global: {
-        account: def({ id: "go.account", keys: ["ctrl+shift+a"], label: "Go to Account", scope: "global" }),
-        settings: def({ id: "go.settings", keys: ["ctrl+shift+s"], label: "Go to Settings", scope: "global" }),
-        contacts: def({ id: "go.contacts", keys: ["ctrl+shift+b"], label: "Go to Contacts", scope: "global" }),
-        mail: def({ id: "go.mail", keys: ["ctrl+shift+m"], label: "Go to Mail", scope: "global" }),
-        calendar: def({ id: "go.calendar", keys: ["ctrl+shift+c"], label: "Go to Calendar", scope: "global" }),
-        tasks: def({ id: "go.tasks", keys: ["ctrl+shift+l"], electronKeys: ["ctrl+shift+t"], label: "Go to Tasks", scope: "global" }),
-        help: def({ id: "help", keys: ["?", "ctrl+/"], label: "Keyboard shortcuts", scope: "global" }),
-    },
-    mail: {
-        create: def({ id: "mail.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New message", scope: "mail" }),
-        reply: def({ id: "mail.reply", keys: ["mod+r"], label: "Reply", scope: "mail" }),
-        replyAll: def({ id: "mail.replyAll", keys: ["mod+shift+r"], label: "Reply all", scope: "mail" }),
-        forward: def({ id: "mail.forward", keys: ["mod+shift+f"], label: "Forward", scope: "mail" }),
-        delete: def({ id: "mail.delete", keys: ["mod+d", "delete"], label: "Delete", scope: "mail" }),
-        archive: def({ id: "mail.archive", keys: ["e", "backspace"], label: "Archive", scope: "mail" }),
-        move: def({ id: "mail.move", keys: ["mod+shift+v"], label: "Move to folder", scope: "mail" }),
-        markRead: def({ id: "mail.markRead", keys: ["ctrl+q"], label: "Mark as read", scope: "mail" }),
-        markUnread: def({ id: "mail.markUnread", keys: ["mod+u"], label: "Mark as unread", scope: "mail" }),
-        flag: def({ id: "mail.flag", keys: ["insert"], label: "Flag or unflag", scope: "mail" }),
-        next: def({ id: "mail.next", keys: ["arrowdown", "j"], label: "Next message", scope: "mail", repeat: true }),
-        previous: def({ id: "mail.previous", keys: ["arrowup", "k"], label: "Previous message", scope: "mail", repeat: true }),
-        nextUnread: def({ id: "mail.nextUnread", keys: ["ctrl+."], label: "Next unread message", scope: "mail" }),
-        previousUnread: def({ id: "mail.previousUnread", keys: ["ctrl+,"], label: "Previous unread message", scope: "mail" }),
-        open: def({ id: "mail.open", keys: ["enter"], label: "Open the message on its own page", scope: "mail", allowOnActivatable: true }),
-        close: def({ id: "mail.close", keys: ["escape"], label: "Clear the selection", scope: "mail" }),
-        search: def({ id: "mail.search", keys: ["/", "mod+e"], label: "Search mail", scope: "mail" }),
-    },
-    compose: {
-        create: def({ id: "compose.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New message", scope: "compose" }),
-        send: def({ id: "compose.send", keys: ["mod+enter"], label: "Send", scope: "compose" }),
-        saveDraft: def({ id: "compose.saveDraft", keys: ["mod+s"], label: "Save draft", scope: "compose" }),
-        close: def({ id: "compose.close", keys: ["escape"], label: "Close (keeps the draft)", scope: "compose" }),
-    },
-    calendar: {
-        create: def({ id: "calendar.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New event", scope: "calendar" }),
-        today: def({ id: "calendar.today", keys: ["t"], label: "Go to today", scope: "calendar" }),
-        previous: def({ id: "calendar.previous", keys: ["arrowleft", "mod+arrowleft"], label: "Previous period", scope: "calendar", repeat: true }),
-        next: def({ id: "calendar.next", keys: ["arrowright", "mod+arrowright"], label: "Next period", scope: "calendar", repeat: true }),
-        day: def({ id: "calendar.day", keys: ["ctrl+alt+1"], label: "Day view", scope: "calendar" }),
-        workWeek: def({ id: "calendar.workWeek", keys: ["ctrl+alt+2"], label: "Work week view", scope: "calendar" }),
-        week: def({ id: "calendar.week", keys: ["ctrl+alt+3"], label: "Week view", scope: "calendar" }),
-        month: def({ id: "calendar.month", keys: ["ctrl+alt+4"], label: "Month view", scope: "calendar" }),
-    },
-    contacts: {
-        create: def({ id: "contacts.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New contact", scope: "contacts" }),
-        search: def({ id: "contacts.search", keys: ["/", "mod+e"], label: "Search contacts", scope: "contacts" }),
-    },
-    tasks: {
-        create: def({ id: "tasks.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New task", scope: "tasks" }),
-    },
-} as const;
-
-/** Every shortcut of the map flattened, in listing order. */
-export const ALL_SHORTCUTS: readonly ShortcutDef[] = Object.values(SHORTCUTS).flatMap((group) => Object.values(group) as ShortcutDef[]);
-
-/** Where a shortcut sits in the listing, for ordering registrations that arrive in whatever order components mount. */
-export function shortcutRank(shortcut: ShortcutDef): number {
-    const index = ALL_SHORTCUTS.findIndex((candidate) => candidate.id === shortcut.id);
-    return index === -1 ? ALL_SHORTCUTS.length : index;
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Where a shortcut applies. `global` works in every view; a view scope (`mail`, `calendar`, `contacts`, `tasks`) exists only while that
+ * view is mounted; `compose` applies while focus is inside a compose window; `dialog` is for what a modal dialog binds itself - a
+ * dialog on screen silences every other scope.
+ */
+export type ShortcutScope = "global" | "mail" | "compose" | "calendar" | "contacts" | "tasks" | "dialog";
+
+/** The scopes the help dialog lists, in the order it lists them. */
+export const HELP_SCOPES: readonly ShortcutScope[] = ["global", "mail", "compose", "calendar", "contacts", "tasks"];
+
+export const SCOPE_LABELS: Record<ShortcutScope, string> = {
+    global: "Global",
+    mail: "Mail",
+    compose: "Compose",
+    calendar: "Calendar",
+    contacts: "Contacts",
+    tasks: "Tasks",
+    dialog: "Dialog",
+};
+
+/** One action the keyboard can trigger, and the keys that trigger it. Views register handlers for these; nothing else defines a key. */
+export interface ShortcutDef {
+    /** Stable name, unique across the map - what the help dialog de-duplicates on. */
+    id: string;
+    /** Specs (see `parseSpec()`) that trigger it, the first being the one shown first. `mod` is Ctrl, or Cmd on macOS. */
+    keys: readonly string[];
+    /** Extra specs that apply only in the desktop client, where the browser's own reserved keys (Ctrl+N, Ctrl+T) are the app's. */
+    electronKeys?: readonly string[];
+    /** What the help dialog and a button's tooltip call it. */
+    label: string;
+    scope: ShortcutScope;
+    /** Fires from a focused button or link too (Enter on a message row); by default Enter/Space are left to what has the focus. */
+    allowOnActivatable?: boolean;
+    /** Keeps firing while the key is held (arrows); by default a held key runs a one-shot action once. */
+    repeat?: boolean;
+}
+
+function def<T extends ShortcutDef>(shortcut: T): T {
+    return shortcut;
+}
+
+/**
+ * The whole key map, in the order the help dialog lists it. The navigation set is literally Ctrl+Shift+<letter> on every platform (Cmd+Shift
+ * on macOS collides with the browsers' own - Cmd+Shift+A/B/C/L/M/S are tab search, the bookmarks bar, Inspect, the sidebar, the profile
+ * switcher and Save As - so it is not offered); the mail actions use `mod`, so Reply is Ctrl+R on Windows and Linux and Cmd+R on a Mac.
+ * Ctrl+Q (mark read) stays Ctrl on a Mac because Cmd+Q is the system's Quit.
+ */
+export const SHORTCUTS = {
+    global: {
+        account: def({ id: "go.account", keys: ["ctrl+shift+a"], label: "Go to Account", scope: "global" }),
+        settings: def({ id: "go.settings", keys: ["ctrl+shift+s"], label: "Go to Settings", scope: "global" }),
+        contacts: def({ id: "go.contacts", keys: ["ctrl+shift+b"], label: "Go to Contacts", scope: "global" }),
+        mail: def({ id: "go.mail", keys: ["ctrl+shift+m"], label: "Go to Mail", scope: "global" }),
+        calendar: def({ id: "go.calendar", keys: ["ctrl+shift+c"], label: "Go to Calendar", scope: "global" }),
+        tasks: def({ id: "go.tasks", keys: ["ctrl+shift+l"], electronKeys: ["ctrl+shift+t"], label: "Go to Tasks", scope: "global" }),
+        help: def({ id: "help", keys: ["?", "ctrl+/"], label: "Keyboard shortcuts", scope: "global" }),
+    },
+    mail: {
+        create: def({ id: "mail.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New message", scope: "mail" }),
+        reply: def({ id: "mail.reply", keys: ["mod+r"], label: "Reply", scope: "mail" }),
+        replyAll: def({ id: "mail.replyAll", keys: ["mod+shift+r"], label: "Reply all", scope: "mail" }),
+        forward: def({ id: "mail.forward", keys: ["mod+shift+f"], label: "Forward", scope: "mail" }),
+        delete: def({ id: "mail.delete", keys: ["mod+d", "delete"], label: "Delete", scope: "mail" }),
+        archive: def({ id: "mail.archive", keys: ["e", "backspace"], label: "Archive", scope: "mail" }),
+        move: def({ id: "mail.move", keys: ["mod+shift+v"], label: "Move to folder", scope: "mail" }),
+        markRead: def({ id: "mail.markRead", keys: ["ctrl+q"], label: "Mark as read", scope: "mail" }),
+        markUnread: def({ id: "mail.markUnread", keys: ["mod+u"], label: "Mark as unread", scope: "mail" }),
+        flag: def({ id: "mail.flag", keys: ["insert"], label: "Flag or unflag", scope: "mail" }),
+        next: def({ id: "mail.next", keys: ["arrowdown", "j"], label: "Next message", scope: "mail", repeat: true }),
+        previous: def({ id: "mail.previous", keys: ["arrowup", "k"], label: "Previous message", scope: "mail", repeat: true }),
+        nextUnread: def({ id: "mail.nextUnread", keys: ["ctrl+."], label: "Next unread message", scope: "mail" }),
+        previousUnread: def({ id: "mail.previousUnread", keys: ["ctrl+,"], label: "Previous unread message", scope: "mail" }),
+        open: def({ id: "mail.open", keys: ["enter"], label: "Open the message on its own page", scope: "mail", allowOnActivatable: true }),
+        close: def({ id: "mail.close", keys: ["escape"], label: "Clear the selection", scope: "mail" }),
+        search: def({ id: "mail.search", keys: ["/", "mod+e"], label: "Search mail", scope: "mail" }),
+    },
+    compose: {
+        create: def({ id: "compose.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New message", scope: "compose" }),
+        send: def({ id: "compose.send", keys: ["mod+enter"], label: "Send", scope: "compose" }),
+        saveDraft: def({ id: "compose.saveDraft", keys: ["mod+s"], label: "Save draft", scope: "compose" }),
+        close: def({ id: "compose.close", keys: ["escape"], label: "Close (keeps the draft)", scope: "compose" }),
+    },
+    calendar: {
+        create: def({ id: "calendar.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New event", scope: "calendar" }),
+        today: def({ id: "calendar.today", keys: ["t"], label: "Go to today", scope: "calendar" }),
+        previous: def({ id: "calendar.previous", keys: ["arrowleft", "mod+arrowleft"], label: "Previous period", scope: "calendar", repeat: true }),
+        next: def({ id: "calendar.next", keys: ["arrowright", "mod+arrowright"], label: "Next period", scope: "calendar", repeat: true }),
+        day: def({ id: "calendar.day", keys: ["ctrl+alt+1"], label: "Day view", scope: "calendar" }),
+        workWeek: def({ id: "calendar.workWeek", keys: ["ctrl+alt+2"], label: "Work week view", scope: "calendar" }),
+        week: def({ id: "calendar.week", keys: ["ctrl+alt+3"], label: "Week view", scope: "calendar" }),
+        month: def({ id: "calendar.month", keys: ["ctrl+alt+4"], label: "Month view", scope: "calendar" }),
+    },
+    contacts: {
+        create: def({ id: "contacts.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New contact", scope: "contacts" }),
+        search: def({ id: "contacts.search", keys: ["/", "mod+e"], label: "Search contacts", scope: "contacts" }),
+    },
+    tasks: {
+        create: def({ id: "tasks.new", keys: ["alt+n"], electronKeys: ["mod+n"], label: "New task", scope: "tasks" }),
+    },
+} as const;
+
+/** Every shortcut of the map flattened, in listing order. */
+export const ALL_SHORTCUTS: readonly ShortcutDef[] = Object.values(SHORTCUTS).flatMap((group) => Object.values(group) as ShortcutDef[]);
+
+/** Where a shortcut sits in the listing, for ordering registrations that arrive in whatever order components mount. */
+export function shortcutRank(shortcut: ShortcutDef): number {
+    const index = ALL_SHORTCUTS.findIndex((candidate) => candidate.id === shortcut.id);
+    return index === -1 ? ALL_SHORTCUTS.length : index;
+}

package/apps/shared/keyboard/registry.ts

@@ -1,65 +1,65 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-import type { RefObject } from "react";
-import type { ShortcutDef, ShortcutScope } from "./keymap.js";
-import { ParsedSpec } from "./parse.js";
-
-/**
- * What a handler does with its key. Returning `false` says it did not handle it (nothing selected, a button that is disabled right now)
- * - the key is then left alone, and a handler of a lower scope may take it. Anything else means it did, and the key is consumed.
- */
-export type ShortcutHandler = (event: KeyboardEvent) => boolean | void;
-
-/** One mounted view's claim on a shortcut. */
-export interface Registration {
-    /** Unique per registration. */
-    id: number;
-    shortcut: ShortcutDef;
-    scope: ShortcutScope;
-    /** Called at event time; reads whatever the component holds now. */
-    run: ShortcutHandler;
-    /** Applies only to events whose target is inside this element (a compose window). */
-    container?: RefObject<Element | null>;
-    keys: ParsedSpec[];
-    electronKeys: ParsedSpec[];
-    /** Later registrations win over earlier ones in the same scope. */
-    order: number;
-}
-
-/**
- * The shortcuts that are mounted right now. Components add and remove their claims as they mount and unmount, so a page switch changes
- * what a key does with nothing to re-wire; the dispatcher (`dispatchKeyEvent()`) looks handlers up here at the time of the key press,
- * and the help dialog lists what is here.
- */
-export class ShortcutRegistry {
-    private registrations: readonly Registration[] = [];
-    private counter = 0;
-    private listeners = new Set<() => void>();
-
-    /** Adds a claim; returns what removes it. */
-    add(claim: Omit<Registration, "id" | "order">): () => void {
-        const registration: Registration = { ...claim, id: ++this.counter, order: this.counter };
-        this.registrations = [...this.registrations, registration];
-        this.publish();
-        return () => {
-            this.registrations = this.registrations.filter((existing) => existing.id !== registration.id);
-            this.publish();
-        };
-    }
-
-    /** The current claims, oldest first. A new array whenever they change (so it can be a `useSyncExternalStore()` snapshot). */
-    getSnapshot = (): readonly Registration[] => this.registrations;
-
-    subscribe = (listener: () => void): (() => void) => {
-        this.listeners.add(listener);
-        return () => {
-            this.listeners.delete(listener);
-        };
-    };
-
-    private publish(): void {
-        this.listeners.forEach((listener) => listener());
-    }
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import type { RefObject } from "react";
+import type { ShortcutDef, ShortcutScope } from "./keymap.js";
+import { ParsedSpec } from "./parse.js";
+
+/**
+ * What a handler does with its key. Returning `false` says it did not handle it (nothing selected, a button that is disabled right now)
+ * - the key is then left alone, and a handler of a lower scope may take it. Anything else means it did, and the key is consumed.
+ */
+export type ShortcutHandler = (event: KeyboardEvent) => boolean | void;
+
+/** One mounted view's claim on a shortcut. */
+export interface Registration {
+    /** Unique per registration. */
+    id: number;
+    shortcut: ShortcutDef;
+    scope: ShortcutScope;
+    /** Called at event time; reads whatever the component holds now. */
+    run: ShortcutHandler;
+    /** Applies only to events whose target is inside this element (a compose window). */
+    container?: RefObject<Element | null>;
+    keys: ParsedSpec[];
+    electronKeys: ParsedSpec[];
+    /** Later registrations win over earlier ones in the same scope. */
+    order: number;
+}
+
+/**
+ * The shortcuts that are mounted right now. Components add and remove their claims as they mount and unmount, so a page switch changes
+ * what a key does with nothing to re-wire; the dispatcher (`dispatchKeyEvent()`) looks handlers up here at the time of the key press,
+ * and the help dialog lists what is here.
+ */
+export class ShortcutRegistry {
+    private registrations: readonly Registration[] = [];
+    private counter = 0;
+    private listeners = new Set<() => void>();
+
+    /** Adds a claim; returns what removes it. */
+    add(claim: Omit<Registration, "id" | "order">): () => void {
+        const registration: Registration = { ...claim, id: ++this.counter, order: this.counter };
+        this.registrations = [...this.registrations, registration];
+        this.publish();
+        return () => {
+            this.registrations = this.registrations.filter((existing) => existing.id !== registration.id);
+            this.publish();
+        };
+    }
+
+    /** The current claims, oldest first. A new array whenever they change (so it can be a `useSyncExternalStore()` snapshot). */
+    getSnapshot = (): readonly Registration[] => this.registrations;
+
+    subscribe = (listener: () => void): (() => void) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+
+    private publish(): void {
+        this.listeners.forEach((listener) => listener());
+    }
+}

package/apps/shared/keyboard/targets.ts

@@ -1,79 +1,79 @@
-///////////////////////////////////////////////////////////////////////////////
-// Copyright (C) 2026 Jean-Philippe Steinmetz
-// SPDX-License-Identifier: MPL-2.0
-///////////////////////////////////////////////////////////////////////////////
-
-/** `<input>` types that take no typed text, so a letter pressed on one is a shortcut, not input. (Radios and ranges use the arrows.) */
-const NON_TEXT_INPUT_TYPES = new Set(["button", "checkbox", "submit", "reset", "image", "file", "color"]);
-
-/** Roles whose members have keys of their own (arrows, Enter, Escape, type-ahead): a bare key pressed inside one belongs to the widget. */
-const WIDGET_SELECTOR = [
-    "menu",
-    "menubar",
-    "listbox",
-    "tablist",
-    "tree",
-    "grid",
-    "radiogroup",
-    "slider",
-    "spinbutton",
-    "combobox",
-]
-    .map((role) => `[role="${role}"]`)
-    .join(",");
-
-/** Elements Enter (and Space) already does something on. */
-const ACTIVATABLE_SELECTOR = 'a[href], button, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="option"]';
-
-/** An open popup's trigger: Escape closes the popup, so it is not a shortcut then. */
-const OPEN_POPUP_TRIGGER = '[aria-haspopup][aria-expanded="true"], [role="combobox"][aria-expanded="true"]';
-
-function elementOf(target: EventTarget | null): Element | null {
-    return target instanceof Element ? target : null;
-}
-
-/** Whether the event target takes typed text: a text field, a select, a textarea, or anything contenteditable (the rich-text editor). */
-export function isTextEntry(target: EventTarget | null): boolean {
-    const element = elementOf(target);
-    if (!element) {
-        return false;
-    }
-    const tag = element.tagName;
-    if (tag === "TEXTAREA" || tag === "SELECT") {
-        return true;
-    }
-    if (tag === "INPUT") {
-        return !NON_TEXT_INPUT_TYPES.has((element as HTMLInputElement).type);
-    }
-    return !!element.closest('[contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="searchbox"]');
-}
-
-/** Whether the target is inside a widget that reads bare keys itself (an open menu, a listbox, a tab list, ...). */
-export function isInWidget(target: EventTarget | null): boolean {
-    return !!elementOf(target)?.closest(WIDGET_SELECTOR);
-}
-
-/** Whether Enter/Space on the target already activates it (a button, a link, a menu item). */
-export function isActivatable(target: EventTarget | null): boolean {
-    return !!elementOf(target)?.closest(ACTIVATABLE_SELECTOR);
-}
-
-/** Whether the target is the trigger of a popup that is open right now (or the combobox that owns an open list). */
-export function isPopupOpenAt(target: EventTarget | null): boolean {
-    return !!elementOf(target)?.closest(OPEN_POPUP_TRIGGER);
-}
-
-/** Whether a modal dialog (`aria-modal="true"`: react-shared's `Modal` and `Drawer`, the unlock prompts, ...) is on screen. */
-export function isModalOpen(doc: Document): boolean {
-    return doc.querySelector('[aria-modal="true"]') !== null;
-}
-
-/** Whether the target is inside a popover that is a dialog of its own (the emoji and GIF pickers, the send-later picker): Escape is theirs, not a view's. A region that declares a shortcut scope (a compose window) is not one. */
-export function isInPopoverDialog(target: EventTarget | null): boolean {
-    return !!elementOf(target)?.closest('[role="dialog"]:not([data-shortcut-scope])');
-}
-
-/** The `data-shortcut-scope` of the region the target is in (a compose window), if any. */
-export function regionScopeOf(target: EventTarget | null): string | undefined {
-    return elementOf(target)?.closest("[data-shortcut-scope]")?.getAttribute("data-shortcut-scope") ?? undefined;
-}
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+
+/** `<input>` types that take no typed text, so a letter pressed on one is a shortcut, not input. (Radios and ranges use the arrows.) */
+const NON_TEXT_INPUT_TYPES = new Set(["button", "checkbox", "submit", "reset", "image", "file", "color"]);
+
+/** Roles whose members have keys of their own (arrows, Enter, Escape, type-ahead): a bare key pressed inside one belongs to the widget. */
+const WIDGET_SELECTOR = [
+    "menu",
+    "menubar",
+    "listbox",
+    "tablist",
+    "tree",
+    "grid",
+    "radiogroup",
+    "slider",
+    "spinbutton",
+    "combobox",
+]
+    .map((role) => `[role="${role}"]`)
+    .join(",");
+
+/** Elements Enter (and Space) already does something on. */
+const ACTIVATABLE_SELECTOR = 'a[href], button, summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="option"]';
+
+/** An open popup's trigger: Escape closes the popup, so it is not a shortcut then. */
+const OPEN_POPUP_TRIGGER = '[aria-haspopup][aria-expanded="true"], [role="combobox"][aria-expanded="true"]';
+
+function elementOf(target: EventTarget | null): Element | null {
+    return target instanceof Element ? target : null;
+}
+
+/** Whether the event target takes typed text: a text field, a select, a textarea, or anything contenteditable (the rich-text editor). */
+export function isTextEntry(target: EventTarget | null): boolean {
+    const element = elementOf(target);
+    if (!element) {
+        return false;
+    }
+    const tag = element.tagName;
+    if (tag === "TEXTAREA" || tag === "SELECT") {
+        return true;
+    }
+    if (tag === "INPUT") {
+        return !NON_TEXT_INPUT_TYPES.has((element as HTMLInputElement).type);
+    }
+    return !!element.closest('[contenteditable]:not([contenteditable="false"]), [role="textbox"], [role="searchbox"]');
+}
+
+/** Whether the target is inside a widget that reads bare keys itself (an open menu, a listbox, a tab list, ...). */
+export function isInWidget(target: EventTarget | null): boolean {
+    return !!elementOf(target)?.closest(WIDGET_SELECTOR);
+}
+
+/** Whether Enter/Space on the target already activates it (a button, a link, a menu item). */
+export function isActivatable(target: EventTarget | null): boolean {
+    return !!elementOf(target)?.closest(ACTIVATABLE_SELECTOR);
+}
+
+/** Whether the target is the trigger of a popup that is open right now (or the combobox that owns an open list). */
+export function isPopupOpenAt(target: EventTarget | null): boolean {
+    return !!elementOf(target)?.closest(OPEN_POPUP_TRIGGER);
+}
+
+/** Whether a modal dialog (`aria-modal="true"`: react-shared's `Modal` and `Drawer`, the unlock prompts, ...) is on screen. */
+export function isModalOpen(doc: Document): boolean {
+    return doc.querySelector('[aria-modal="true"]') !== null;
+}
+
+/** Whether the target is inside a popover that is a dialog of its own (the emoji and GIF pickers, the send-later picker): Escape is theirs, not a view's. A region that declares a shortcut scope (a compose window) is not one. */
+export function isInPopoverDialog(target: EventTarget | null): boolean {
+    return !!elementOf(target)?.closest('[role="dialog"]:not([data-shortcut-scope])');
+}
+
+/** The `data-shortcut-scope` of the region the target is in (a compose window), if any. */
+export function regionScopeOf(target: EventTarget | null): string | undefined {
+    return elementOf(target)?.closest("[data-shortcut-scope]")?.getAttribute("data-shortcut-scope") ?? undefined;
+}

package/apps/shared/mail/findWellKnownFolderUid.ts

@@ -2,12 +2,14 @@
 // Copyright (C) 2026 Jean-Philippe Steinmetz
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
-import { FolderType, listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
+import { FolderType, listFolders } from "../../../lib/mail/mailApi.js";
+import { ApiClient } from "../../../lib/util/api.js";
 
 /** The uid of a mailbox's well-known folder of `type` (e.g. its Contacts or Tasks folder), for creating an
  * item in a mailbox other than the one an app currently has loaded. Resolves `undefined` if the mailbox has
- * no such folder; rejects if the folder list can't be fetched. */
-export async function findWellKnownFolderUid(mailboxUid: string, type: FolderType): Promise<string | undefined> {
-    const folders = await listFolders(mailboxUid);
+ * no such folder; rejects if the folder list can't be fetched. `client`, when given, is threaded through to
+ * `listFolders()` (see `useApiClient()`'s own doc comment) - omitted, this behaves exactly as before. */
+export async function findWellKnownFolderUid(mailboxUid: string, type: FolderType, client?: ApiClient): Promise<string | undefined> {
+    const folders = await listFolders(mailboxUid, client);
     return folders.find((folder) => folder.type === type)?.uid;
 }

package/apps/shared/mail/folderCounts.ts

@@ -3,7 +3,8 @@
 // SPDX-License-Identifier: MPL-2.0
 ///////////////////////////////////////////////////////////////////////////////
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Folder, FolderType, Mailbox, Message, listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
+import { Folder, FolderType, Mailbox, Message, listFolders } from "../../../lib/mail/mailApi.js";
+import { useApiClient } from "../../../lib/util/apiClientContext.js";
 
 /**
  * The folder badges' numbers, kept right without a reload.
@@ -150,9 +151,10 @@ export interface FolderCounts {
  * each was loaded with); `mailboxes` is whose folders to read back. The overlay starts again whenever `mailboxes` does.
  */
 export function useFolderCounts(mailboxes: Mailbox[], folders: Folder[], onFoldersListed?: (folders: Folder[]) => void): FolderCounts {
+    const client = useApiClient();
     const [counts, setCounts] = useState<Record<string, FolderCount>>({});
-    const latestRef = useRef({ mailboxes, folders, onFoldersListed });
-    latestRef.current = { mailboxes, folders, onFoldersListed };
+    const latestRef = useRef({ mailboxes, folders, onFoldersListed, client });
+    latestRef.current = { mailboxes, folders, onFoldersListed, client };
     // Bumped by every change of the overlay this page makes, so a read that started before one can tell it is out of date.
     const changesRef = useRef(0);
     const inFlightRef = useRef(0);
@@ -202,7 +204,9 @@ export function useFolderCounts(mailboxes: Mailbox[], folders: Folder[], onFolde
         timerRef.current = undefined;
         const run = ++runRef.current;
         const startedAt = changesRef.current;
-        const results = await Promise.all(latestRef.current.mailboxes.map((mailbox) => listFolders(mailbox.uid).catch(() => undefined)));
+        const results = await Promise.all(
+            latestRef.current.mailboxes.map((mailbox) => listFolders(mailbox.uid, latestRef.current.client).catch(() => undefined)),
+        );
         if (stoppedRef.current || run !== runRef.current) {
             return;
         }