@remit/web-client 0.0.116 → 0.0.117

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.116",
+  "version": "0.0.117",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/layout/MailTopBar.tsx

@@ -7,13 +7,12 @@
  * what wording is not decided here.
  */
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { ShellTopBar } from "@remit/ui";
+import { ShellTopBar, shortcutHintForAction } from "@remit/ui";
 import { useNavigate } from "@tanstack/react-router";
 import { AccountMenu } from "@/auth/AccountMenu";
 import { useGlobalCompose } from "@/hooks/useComposeTarget";
 import { useSearchScope } from "@/hooks/useSearchScope";
 import { openBugReport } from "@/lib/bug-report";
-import { shortcutHintForAction } from "@/lib/keymap";
 import { useMailContext } from "@/lib/mail-context";
 
 interface MailTopBarProps {

package/src/components/mail/MessageToolbar.tsx

@@ -2,9 +2,9 @@ import {
 	IntelligenceToggle,
 	type MailAction,
 	MailActionToolbar,
+	tooltipForAction,
 } from "@remit/ui";
 import { useState } from "react";
-import { tooltipForAction } from "@/lib/keymap";
 import { MoveToTrigger } from "./MoveToTrigger";
 
 /**

package/src/components/mail/ThreadListInteraction.tsx

@@ -16,7 +16,7 @@
  * are not rendered: focus stops moving, the highlight disappears, and the next
  * verb acts on a message the user cannot see.
  */
-import { SelectionTopBar, type Verb } from "@remit/ui";
+import { SelectionTopBar, useListCursor, type Verb } from "@remit/ui";
 import {
 	createContext,
 	type ReactNode,
@@ -30,7 +30,6 @@ import {
 } from "react";
 import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { useFollowFocusOpen } from "@/hooks/useFollowFocusOpen";
-import { useListCursor } from "@/hooks/useListCursor";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";
 import { formatDeleteToTrashTitle } from "@/lib/format";

package/src/components/ui/KeyboardShortcutsModal.tsx

@@ -1,7 +1,6 @@
-import { Kbd } from "@remit/ui";
+import { Kbd, KEY_HINT_GROUPS } from "@remit/ui";
 import { X } from "lucide-react";
 import { Fragment, useCallback, useEffect } from "react";
-import { KEY_HINT_GROUPS } from "@/lib/keymap";
 import { cn } from "@/lib/utils";
 
 interface KeyboardShortcutsModalProps {
@@ -11,7 +10,7 @@ interface KeyboardShortcutsModalProps {
 
 /**
  * The `?` help overlay (#429). Renders the full triage key map from the single
- * source of truth (`@/lib/keymap`) using the remit-ui `Kbd` component, so the
+ * source of truth (`@remit/ui`'s keymap) using the `Kbd` component, so the
  * displayed bindings can never drift from what the dispatcher actually routes.
  */
 export const KeyboardShortcutsModal = ({

package/src/hooks/useTriageLayer.ts

@@ -14,12 +14,9 @@
  * context comes first, the pane builds its handlers from it, and the keyboard
  * registration comes last.
  */
+import { type TriageHandlers, useTriageKeyboard } from "@remit/ui";
 import { type RefObject, useCallback, useRef, useState } from "react";
 import type { MessageListCommands } from "@/components/mail/MessageList";
-import {
-	type TriageHandlers,
-	useTriageKeyboard,
-} from "@/hooks/useTriageKeyboard";
 import { adjacentMessageId } from "@/lib/adjacent-message";
 
 export interface TriageContextUpdate {

package/src/hooks/useListCursor.test.ts

@@ -1,273 +0,0 @@
-/**
- * The shared list cursor (#149) — the roving keyboard cursor and multi-selection
- * every thread list drives. Mounted against jsdom rather than `renderToString`,
- * since the state only moves in response to real calls across renders.
- */
-import assert from "node:assert/strict";
-import { after, afterEach, before, beforeEach, describe, it } from "node:test";
-import type { JSDOM } from "jsdom";
-import { act, createElement } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { type ListCursor, useListCursor } from "./useListCursor";
-
-const IDS = ["m1", "m2", "m3", "m4"];
-
-let dom: JSDOM;
-let container: HTMLElement;
-let root: Root;
-
-before(async () => {
-	const { JSDOM: JSDOMCtor } = await import("jsdom");
-	dom = new JSDOMCtor(
-		"<!doctype html><html><body><div id=root></div></body></html>",
-		{ url: "http://localhost/", pretendToBeVisual: true },
-	);
-	globalThis.window = dom.window as unknown as typeof globalThis.window;
-	globalThis.document = dom.window.document;
-	globalThis.HTMLElement = dom.window.HTMLElement;
-	globalThis.Element = dom.window.Element;
-	Object.defineProperty(globalThis, "navigator", {
-		value: dom.window.navigator,
-		configurable: true,
-	});
-	(
-		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
-	).IS_REACT_ACT_ENVIRONMENT = true;
-});
-
-after(() => dom.window.close());
-
-beforeEach(() => {
-	container = dom.window.document.getElementById(
-		"root",
-	) as unknown as HTMLElement;
-	container.innerHTML = "";
-	root = createRoot(container);
-});
-
-afterEach(() => {
-	act(() => root.unmount());
-});
-
-/**
- * Mount the hook and hand back a live handle. Every read goes through
- * `current()` so a test never asserts against a stale render.
- */
-function mountCursor(options: {
-	orderedIds?: string[];
-	isDesktop?: boolean;
-	initialFocusedId?: string;
-}): () => ListCursor {
-	let latest: ListCursor | undefined;
-	const Probe = () => {
-		latest = useListCursor({
-			orderedIds: options.orderedIds ?? IDS,
-			isDesktop: options.isDesktop ?? true,
-			initialFocusedId: options.initialFocusedId,
-		});
-		return null;
-	};
-	act(() => root.render(createElement(Probe)));
-	return () => {
-		if (!latest) throw new Error("cursor not mounted");
-		return latest;
-	};
-}
-
-describe("useListCursor — the roving cursor", () => {
-	it("starts on the open thread and walks the list with next/previous", () => {
-		const cursor = mountCursor({ initialFocusedId: "m2" });
-		assert.equal(cursor().focusedMessageId, "m2");
-
-		act(() => cursor().focusNext());
-		assert.equal(cursor().focusedMessageId, "m3");
-
-		act(() => cursor().focusPrevious());
-		assert.equal(cursor().focusedMessageId, "m2");
-	});
-
-	it("starts at the top when nothing is focused yet", () => {
-		const cursor = mountCursor({});
-		assert.equal(cursor().focusedMessageId, undefined);
-
-		act(() => cursor().focusNext());
-		assert.equal(cursor().focusedMessageId, "m1");
-	});
-
-	it("clamps at both ends rather than wrapping", () => {
-		const cursor = mountCursor({ initialFocusedId: "m1" });
-		act(() => cursor().focusPrevious());
-		assert.equal(cursor().focusedMessageId, "m1");
-
-		act(() => cursor().focusLast());
-		assert.equal(cursor().focusedMessageId, "m4");
-		act(() => cursor().focusNext());
-		assert.equal(cursor().focusedMessageId, "m4");
-
-		act(() => cursor().focusFirst());
-		assert.equal(cursor().focusedMessageId, "m1");
-	});
-
-	it("moves nothing when the list is empty", () => {
-		const cursor = mountCursor({ orderedIds: [] });
-		act(() => cursor().focusNext());
-		act(() => cursor().focusLast());
-		assert.equal(cursor().focusedMessageId, undefined);
-	});
-
-	it("asks for DOM focus on its own moves, not on a pointer move", () => {
-		const cursor = mountCursor({ initialFocusedId: "m1" });
-		act(() => cursor().focusNext());
-		assert.equal(cursor().pendingDomFocusRef.current, "m2");
-		assert.equal(cursor().cursorMovedByPointerRef.current, false);
-	});
-});
-
-describe("useListCursor — selection", () => {
-	it("x toggles the row under the cursor", () => {
-		const cursor = mountCursor({ initialFocusedId: "m2" });
-		act(() => cursor().toggleFocusedSelection());
-		assert.deepEqual([...cursor().selection.selectedIds], ["m2"]);
-
-		act(() => cursor().toggleFocusedSelection());
-		assert.equal(cursor().selection.selectedCount, 0);
-	});
-
-	it("shift-extend moves the cursor and grows the range from the anchor", () => {
-		const cursor = mountCursor({ initialFocusedId: "m2" });
-
-		// The first press has no anchor yet, so the row it lands on becomes both
-		// the anchor and the whole range.
-		act(() => cursor().extendRangeDown());
-		assert.deepEqual([...cursor().selection.selectedIds], ["m3"]);
-		assert.equal(cursor().focusedMessageId, "m3");
-		assert.equal(cursor().selection.anchorId, "m3");
-
-		// Consecutive presses extend from that anchor.
-		act(() => cursor().extendRangeDown());
-		assert.deepEqual([...cursor().selection.selectedIds].sort(), ["m3", "m4"]);
-		assert.equal(cursor().focusedMessageId, "m4");
-		assert.equal(cursor().selection.anchorId, "m3");
-	});
-
-	it("shift-extend upward ranges back through the anchor", () => {
-		const cursor = mountCursor({ initialFocusedId: "m4" });
-
-		act(() => cursor().extendRangeUp());
-		assert.deepEqual([...cursor().selection.selectedIds], ["m3"]);
-
-		act(() => cursor().extendRangeUp());
-		assert.deepEqual([...cursor().selection.selectedIds].sort(), ["m2", "m3"]);
-		assert.equal(cursor().focusedMessageId, "m2");
-	});
-
-	it("at the last row, extending takes that row and the cursor stays", () => {
-		const cursor = mountCursor({ initialFocusedId: "m4" });
-		act(() => cursor().extendRangeDown());
-		assert.deepEqual([...cursor().selection.selectedIds], ["m4"]);
-		assert.equal(cursor().focusedMessageId, "m4");
-	});
-
-	it("select-all takes every row, and exiting clears it", () => {
-		const cursor = mountCursor({});
-		act(() => cursor().selectAllLoaded());
-		assert.equal(cursor().selection.selectedCount, IDS.length);
-
-		act(() => cursor().exitSelection());
-		assert.equal(cursor().selection.selectedCount, 0);
-	});
-
-	it("runs the caller's teardown before clearing", () => {
-		const order: string[] = [];
-		let latest: ListCursor | undefined;
-		const Probe = () => {
-			latest = useListCursor({
-				orderedIds: IDS,
-				isDesktop: true,
-				onExitSelection: () => order.push("teardown"),
-			});
-			return null;
-		};
-		act(() => root.render(createElement(Probe)));
-		act(() => latest?.selectAllLoaded());
-		act(() => latest?.exitSelection());
-		assert.deepEqual(order, ["teardown"]);
-		assert.equal(latest?.selection.selectedCount, 0);
-	});
-});
-
-describe("useListCursor — mouse selection semantics", () => {
-	it("shift-click ranges, cmd-click toggles, and both consume the click", () => {
-		const cursor = mountCursor({ initialFocusedId: "m1" });
-
-		let handled = false;
-		act(() => {
-			handled = cursor().handleRowSelect("m3", {
-				shiftKey: true,
-				metaKey: false,
-				ctrlKey: false,
-			});
-		});
-		assert.equal(handled, true);
-		assert.deepEqual([...cursor().selection.selectedIds].sort(), [
-			"m1",
-			"m2",
-			"m3",
-		]);
-
-		act(() => {
-			handled = cursor().handleRowSelect("m4", {
-				shiftKey: false,
-				metaKey: true,
-				ctrlKey: false,
-			});
-		});
-		assert.equal(handled, true);
-		assert.ok(cursor().selection.selectedIds.has("m4"));
-	});
-
-	it("a plain click collapses the selection and lets the row open", () => {
-		const cursor = mountCursor({ initialFocusedId: "m1" });
-		act(() => cursor().selectAllLoaded());
-
-		let handled = true;
-		act(() => {
-			handled = cursor().handleRowSelect("m2", {
-				shiftKey: false,
-				metaKey: false,
-				ctrlKey: false,
-			});
-		});
-		assert.equal(handled, false, "navigation must proceed on a plain click");
-		assert.equal(cursor().selection.selectedCount, 0);
-	});
-});
-
-describe("useListCursor — the device branch", () => {
-	it("is not in multi-select mode on desktop, whatever is selected", () => {
-		const cursor = mountCursor({ isDesktop: true });
-		act(() => cursor().selectAllLoaded());
-		assert.equal(cursor().isMultiSelectMode, false);
-	});
-
-	it("enters multi-select mode on touch as soon as something is selected", () => {
-		const cursor = mountCursor({ isDesktop: false });
-		assert.equal(cursor().isMultiSelectMode, false);
-
-		act(() => cursor().selection.select("m2"));
-		assert.equal(cursor().isMultiSelectMode, true);
-	});
-
-	it("on touch, in multi-select mode, next/previous toggle instead of moving", () => {
-		const cursor = mountCursor({ isDesktop: false, initialFocusedId: "m1" });
-		act(() => cursor().selection.select("m1"));
-
-		act(() => cursor().focusNext());
-		assert.equal(
-			cursor().focusedMessageId,
-			"m1",
-			"the cursor stays put in multi-select mode",
-		);
-		assert.deepEqual([...cursor().selection.selectedIds].sort(), ["m1", "m2"]);
-	});
-});

package/src/hooks/useListCursor.ts

@@ -1,259 +0,0 @@
-/**
- * useListCursor — the roving keyboard cursor and multi-selection of a thread
- * list, independent of how the list renders.
- *
- * The mailbox list, the daily brief and Flagged all need it. It used to exist
- * only inside `MessageList`, so the brief and Flagged had no cursor and no
- * selection at all (#149). Everything here is list-shape agnostic: it works off
- * the ordered message ids, so a virtualized flat list and a sectioned brief
- * drive the same state.
- *
- * DOM concerns stay with the caller. `pendingDomFocusRef` names the row that
- * should take real browser focus once it is rendered, and
- * `cursorMovedByPointerRef` records whether the last move came from a click, so
- * a list that scrolls its cursor into view can skip doing so for pointer moves.
- */
-import {
-	deriveIsMultiSelectMode,
-	nextFocusId,
-	rowSelectIntent,
-	type SelectionModifiers,
-	useSelection,
-} from "@remit/ui";
-import { useCallback, useMemo, useRef, useState } from "react";
-
-interface UseListCursorOptions {
-	/** Message ids in display order. */
-	orderedIds: string[];
-	isDesktop: boolean;
-	/** Seeds the cursor — normally the open thread. */
-	initialFocusedId?: string;
-	/** Extra teardown run before the selection is cleared. */
-	onExitSelection?: () => void;
-}
-
-export interface ListCursor {
-	focusedMessageId: string | undefined;
-	setFocusedMessageId: (id: string | undefined) => void;
-	/**
-	 * The row a keyboard command last moved the cursor onto, and `undefined`
-	 * whenever the cursor last moved some other way. Drives the reading pane
-	 * following the cursor (`useFollowFocusOpen`) — a click and Enter open on
-	 * their own, so only a bare cursor move is left to follow.
-	 */
-	keyboardFocusedMessageId: string | undefined;
-	focusIndex: number;
-	pendingDomFocusRef: React.RefObject<string | null>;
-	cursorMovedByPointerRef: React.RefObject<boolean>;
-	selection: ReturnType<typeof useSelection>;
-	isMultiSelectMode: boolean;
-	exitSelection: () => void;
-	moveFocusToIndex: (index: number) => void;
-	focusNext: () => void;
-	focusPrevious: () => void;
-	focusFirst: () => void;
-	focusLast: () => void;
-	toggleFocusedSelection: () => void;
-	extendRangeUp: () => void;
-	extendRangeDown: () => void;
-	selectAllLoaded: () => void;
-	/**
-	 * Desktop mouse selection semantics (Apple Mail / Gmail model). Returns true
-	 * when selection handled the click — the caller must then suppress the
-	 * row's navigation; false for a plain click.
-	 */
-	handleRowSelect: (
-		messageId: string,
-		modifiers: SelectionModifiers,
-	) => boolean;
-}
-
-export const useListCursor = ({
-	orderedIds,
-	isDesktop,
-	initialFocusedId,
-	onExitSelection,
-}: UseListCursorOptions): ListCursor => {
-	// The keyboard "where am I" pointer, distinct from the open thread
-	// (`selectedMessageId` in the URL). j/k move this cursor; Enter opens the
-	// focused row, and on desktop the reading pane follows the cursor of its own
-	// accord (`useFollowFocusOpen`). It seeds from the open thread so opening a
-	// message also focuses its row.
-	const [focusedMessageId, setFocusedId] = useState<string | undefined>(
-		initialFocusedId,
-	);
-
-	// Which of those moves came from a keyboard command, so the reading pane can
-	// follow the cursor without following a click that already opened its own row.
-	const [keyboardFocusedMessageId, setKeyboardFocusedMessageId] = useState<
-		string | undefined
-	>();
-
-	// Every non-keyboard move — a click, Tab, a thread opening, a refetch snapping
-	// the cursor to a survivor — drops the keyboard mark, so nothing follows it.
-	// A row taking DOM focus as the *consequence* of a keyboard move arrives here
-	// with the id that move just set; keeping the mark in that case is what stops
-	// the browser's own focus event from cancelling the load the move started.
-	const setFocusedMessageId = useCallback((id: string | undefined) => {
-		setKeyboardFocusedMessageId((current) =>
-			current === id ? current : undefined,
-		);
-		setFocusedId(id);
-	}, []);
-
-	const selection = useSelection();
-	const {
-		selectedCount,
-		toggle: toggleCheck,
-		clearSelection,
-		selectRange,
-		setAnchor,
-		selectAll,
-	} = selection;
-
-	// The selection count is the only source of truth for whether the list is in
-	// multi-select mode (#115). A separate flag needs an effect to reconcile it
-	// back to the count, and across that render the two disagree.
-	const isMultiSelectMode = deriveIsMultiSelectMode(selectedCount, isDesktop);
-
-	// Set when a keyboard command moves the cursor. Real DOM focus then follows
-	// it onto the row once rendered, so the browser's own focus — and therefore
-	// Tab, Shift+Tab and the focus ring — agree with what the list highlights
-	// (#43).
-	const pendingDomFocusRef = useRef<string | null>(null);
-	// Whether the cursor's last move came from a row taking DOM focus (a click)
-	// rather than a command. Scrolling for a click moves the row out from under
-	// the pointer between mousedown and click, so the click lands on empty space
-	// and nothing opens (#85).
-	const cursorMovedByPointerRef = useRef(false);
-
-	const exitSelection = useCallback(() => {
-		onExitSelection?.();
-		clearSelection();
-	}, [clearSelection, onExitSelection]);
-
-	const focusIndex = useMemo(
-		() => (focusedMessageId ? orderedIds.indexOf(focusedMessageId) : -1),
-		[orderedIds, focusedMessageId],
-	);
-
-	// Move the cursor by index. In multi-select mode (mobile) j/k toggle
-	// selection rather than moving a cursor.
-	const moveFocusToIndex = useCallback(
-		(index: number) => {
-			if (index < 0 || index >= orderedIds.length) return;
-			const messageId = orderedIds[index];
-			if (isMultiSelectMode) {
-				toggleCheck(messageId);
-				return;
-			}
-			pendingDomFocusRef.current = messageId;
-			cursorMovedByPointerRef.current = false;
-			setKeyboardFocusedMessageId(messageId);
-			setFocusedId(messageId);
-		},
-		[orderedIds, isMultiSelectMode, toggleCheck],
-	);
-
-	const focusNext = useCallback(() => {
-		if (orderedIds.length === 0) return;
-		moveFocusToIndex(
-			focusIndex < 0 ? 0 : Math.min(focusIndex + 1, orderedIds.length - 1),
-		);
-	}, [orderedIds.length, focusIndex, moveFocusToIndex]);
-
-	const focusPrevious = useCallback(() => {
-		if (orderedIds.length === 0) return;
-		moveFocusToIndex(focusIndex <= 0 ? 0 : focusIndex - 1);
-	}, [orderedIds.length, focusIndex, moveFocusToIndex]);
-
-	const focusFirst = useCallback(() => moveFocusToIndex(0), [moveFocusToIndex]);
-	const focusLast = useCallback(
-		() => moveFocusToIndex(orderedIds.length - 1),
-		[moveFocusToIndex, orderedIds.length],
-	);
-
-	const toggleFocusedSelection = useCallback(() => {
-		if (focusedMessageId) toggleCheck(focusedMessageId);
-	}, [focusedMessageId, toggleCheck]);
-
-	const handleRowSelect = useCallback(
-		(messageId: string, modifiers: SelectionModifiers): boolean => {
-			const intent = rowSelectIntent(modifiers);
-			if (intent === "range") {
-				// The open/focused row is the fallback origin when the stored anchor
-				// has been filtered or searched out of the visible list, so the first
-				// shift-click still ranges from where the user is (#142, #144).
-				selectRange(orderedIds, messageId, focusedMessageId);
-				return true;
-			}
-			if (intent === "toggle") {
-				toggleCheck(messageId);
-				return true;
-			}
-			// Plain click: collapse any multi-selection and let navigation proceed.
-			// The clicked row becomes the next anchor for a subsequent shift-click,
-			// but is NOT added to the checkbox set (no toolbar on a plain open).
-			exitSelection();
-			setAnchor(messageId);
-			return false;
-		},
-		[
-			orderedIds,
-			focusedMessageId,
-			selectRange,
-			toggleCheck,
-			exitSelection,
-			setAnchor,
-		],
-	);
-
-	// Shift+arrow moves the cursor one row and adds the row it lands on to the
-	// range — the keyboard equivalent of shift-click. The first press seeds the
-	// anchor on that row; consecutive presses extend from it. The range only
-	// grows, so reversing direction ranges back through the anchor rather than
-	// giving rows up.
-	const extendRange = useCallback(
-		(direction: -1 | 1) => {
-			const target = nextFocusId(orderedIds, focusedMessageId, direction);
-			if (target === undefined) return;
-			selectRange(orderedIds, target);
-			pendingDomFocusRef.current = target;
-			cursorMovedByPointerRef.current = false;
-			// Shift+arrow is building a range, not reading. The reading pane stays on
-			// whatever is open rather than chasing the growing edge of the selection.
-			setKeyboardFocusedMessageId(undefined);
-			setFocusedId(target);
-		},
-		[orderedIds, focusedMessageId, selectRange],
-	);
-
-	const extendRangeUp = useCallback(() => extendRange(-1), [extendRange]);
-	const extendRangeDown = useCallback(() => extendRange(1), [extendRange]);
-
-	const selectAllLoaded = useCallback(() => {
-		if (orderedIds.length > 0) selectAll(orderedIds);
-	}, [orderedIds, selectAll]);
-
-	return {
-		focusedMessageId,
-		setFocusedMessageId,
-		keyboardFocusedMessageId,
-		focusIndex,
-		pendingDomFocusRef,
-		cursorMovedByPointerRef,
-		selection,
-		isMultiSelectMode,
-		exitSelection,
-		moveFocusToIndex,
-		focusNext,
-		focusPrevious,
-		focusFirst,
-		focusLast,
-		toggleFocusedSelection,
-		extendRangeUp,
-		extendRangeDown,
-		selectAllLoaded,
-		handleRowSelect,
-	};
-};