@remit/web-client 0.0.163 → 0.0.165

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.163",
+  "version": "0.0.165",
   "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/auth/amplify-config.test.ts

@@ -29,9 +29,7 @@ type AmplifyCall = {
 };
 
 declare global {
-	// eslint-disable-next-line no-var
 	var __AMPLIFY_MOCKS__: { configureCalls: AmplifyCall[] } | undefined;
-	// eslint-disable-next-line no-var
 	var __CACHE_BUST__: number | undefined;
 }
 

package/src/auth/auth-interceptor.test.ts

@@ -6,7 +6,6 @@ import { type AuthProvider, noneAuthProvider } from "./provider";
 type RequestFn = (req: Request) => Promise<Request>;
 
 declare global {
-	// eslint-disable-next-line no-var
 	var __REMIT_CLIENT_MOCKS__: { requestFns: RequestFn[] } | undefined;
 }
 

package/src/auth/cognito/cognito-token.test.ts

@@ -8,9 +8,7 @@ type AmplifyAuthMocks = {
 };
 
 declare global {
-	// eslint-disable-next-line no-var
 	var __AMPLIFY_AUTH_MOCKS__: AmplifyAuthMocks | undefined;
-	// eslint-disable-next-line no-var
 	var __AMPLIFY_CONFIG_MOCKS__:
 		| { configured: boolean; configureCalls: number }
 		| undefined;

package/src/components/layout/Drawer.tsx

@@ -1,6 +1,6 @@
+import { cn } from "@remit/ui";
 import { X } from "lucide-react";
 import { type ReactNode, useEffect, useRef } from "react";
-import { cn } from "@/lib/utils";
 
 interface DrawerProps {
 	isOpen: boolean;

package/src/components/mail/DailyBrief.scope.test.ts

@@ -0,0 +1,76 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import type { ThreadRowData } from "@remit/ui";
+import { wizardScopeFor } from "@remit/ui";
+import { resolveBriefSelectionScope } from "./DailyBrief";
+
+/**
+ * The brief spans accounts and folders, so it resolves both from the selection
+ * itself. Which of the two a selection spans decides what the wizard's folder
+ * and rule steps can say: told to pick a single account, a selection already
+ * inside one account has nothing to act on and the flow dead-ends (#525).
+ */
+
+const row = (
+	id: string,
+	accountId: string,
+	mailboxId: string,
+): ThreadRowData => ({
+	id,
+	accountId,
+	mailboxId,
+	fromName: "Booking.com",
+	fromEmail: "noreply@booking.com",
+	subject: "Booking confirmation",
+	snippet: "Your stay is confirmed",
+	timeLabel: "Jul 2",
+});
+
+const rows: ThreadRowData[] = [
+	row("m1", "acc-personal", "mbx-inbox"),
+	row("m2", "acc-personal", "mbx-archive"),
+	row("m3", "acc-work", "mbx-inbox"),
+];
+
+const scopeOf = (...ids: string[]) =>
+	resolveBriefSelectionScope(rows, new Set(ids));
+
+describe("the scope a brief selection resolves to", () => {
+	it("carries the folder restriction when one account holds every row", () => {
+		const scope = scopeOf("m1", "m2");
+		assert.equal(scope.restriction, "spansFolders");
+		assert.equal(scope.accountId, "acc-personal");
+		assert.equal(scope.mailboxId, undefined);
+		assert.match(scope.moveDisabledHint ?? "", /spans 2 folders/);
+	});
+
+	it("reaches the folder step told about folders, not accounts", () => {
+		const scope = scopeOf("m1", "m2");
+		const wizard = wizardScopeFor(scope.accountId, scope.restriction);
+		assert.match(wizard.destination ?? "", /within one folder/);
+		assert.doesNotMatch(wizard.destination ?? "", /account/);
+		// The account is settled, so the preview behind a widened door has one to
+		// count against and the match step keeps it.
+		assert.equal(wizard.accountId, "acc-personal");
+	});
+
+	it("carries the account restriction when the rows span accounts", () => {
+		const scope = scopeOf("m1", "m3");
+		assert.equal(scope.restriction, "spansAccounts");
+		assert.equal(scope.accountId, undefined);
+		assert.match(
+			wizardScopeFor(scope.accountId, scope.restriction).destination ?? "",
+			/single account/,
+		);
+	});
+
+	it("carries no restriction from one account and one folder", () => {
+		const scope = scopeOf("m1");
+		assert.equal(scope.restriction, undefined);
+		assert.equal(scope.mailboxId, "mbx-inbox");
+		assert.equal(
+			wizardScopeFor(scope.accountId, scope.restriction).destination,
+			undefined,
+		);
+	});
+});

package/src/components/mail/DailyBrief.tsx

@@ -54,6 +54,7 @@ import {
 	partitionSpamResults,
 	RefreshButton,
 	type SearchResult,
+	type SelectionRestriction,
 	SelectionTopBar,
 	SpamResultsOffer,
 	setBriefCategoryInQuery,
@@ -185,6 +186,8 @@ export interface BriefSelectionScope {
 	accountId?: string;
 	/** Source folder, when every selected row shares one. */
 	mailboxId?: string;
+	/** Which scope the selection spans more of than those verbs can take. */
+	restriction?: SelectionRestriction;
 	/** Why folder-scoped verbs are withheld, in the toolbar's own words. */
 	moveDisabledHint?: string;
 }
@@ -214,6 +217,7 @@ export const resolveBriefSelectionScope = (
 	}
 	if (accountIds.size > 1) {
 		return {
+			restriction: "spansAccounts",
 			moveDisabledHint:
 				"Move only works within one account — clear selection or pick messages from a single account",
 		};
@@ -222,6 +226,7 @@ export const resolveBriefSelectionScope = (
 	if (mailboxIds.size > 1) {
 		return {
 			accountId,
+			restriction: "spansFolders",
 			moveDisabledHint: `Move only works within one folder — this selection spans ${mailboxIds.size} folders`,
 		};
 	}
@@ -362,7 +367,7 @@ function BriefSelectionChrome({
 					accountId={scope.accountId}
 					mailboxId={scope.mailboxId}
 					selection={wizardSelection}
-					crossAccount={scope.moveDisabledHint !== undefined}
+					selectionRestriction={scope.restriction}
 					onFinished={exitSelection}
 				/>
 			}

package/src/components/mail/FlaggedList.tsx

@@ -95,7 +95,7 @@ function StarredWizardHost({
 		<SelectionWizardHost
 			verb={verb}
 			selection={selection}
-			crossAccount
+			selectionRestriction="spansAccounts"
 			onFinished={exitSelection}
 		/>
 	);

package/src/components/mail/MessageBody.tsx

@@ -1,6 +1,7 @@
 import {
 	buildCidResolver,
 	type CidResolver,
+	cn,
 	type EmailRenderCategory,
 	MessageBodyView,
 } from "@remit/ui";
@@ -8,7 +9,6 @@ import { useMemo, useState } from "react";
 import { useIsDark } from "@/hooks/useIsDark";
 import { useMessageBodyContent } from "@/hooks/useMessageBodyContent";
 import { useToggleTrusted } from "@/hooks/useToggleTrusted";
-import { cn } from "@/lib/utils";
 import { BlockedImagesNotice } from "./BlockedImagesNotice";
 import { MessageBodyErrorBanner } from "./MessageBodyErrorBanner";
 

package/src/components/mail/MessageCard.tsx

@@ -4,7 +4,7 @@ import type {
 	RemitImapThreadMessageResponse,
 } from "@remit/api-http-client/types.gen.ts";
 import type { ThreadMessageData } from "@remit/ui";
-import { AddressList, CollapsedMessage, ExpandedMessage } from "@remit/ui";
+import { AddressList, CollapsedMessage, cn, ExpandedMessage } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { BadgeCheck, Paperclip, Star } from "lucide-react";
 import { useState } from "react";
@@ -13,7 +13,6 @@ import { ErrorState } from "@/components/ui/ErrorState";
 import { isMessageNotFoundError } from "@/components/ui/error-banners";
 import { toDisplayCategory } from "@/lib/display-category";
 import { formatDatePreset } from "@/lib/format";
-import { cn } from "@/lib/utils";
 import { AutoMovedIndicator } from "./AutoMovedIndicator";
 import { MessageActionMenu } from "./MessageActionMenu";
 import { MessageAttachments } from "./MessageAttachments";

package/src/components/mail/MessageList.tsx

@@ -2,6 +2,7 @@ import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/type
 import {
 	Banner,
 	ConfirmDialog,
+	cn,
 	type Density,
 	deriveIsMultiSelectMode,
 	type MessageListFilter,
@@ -51,7 +52,6 @@ import { tabStopId } from "@/lib/list-focus";
 import { useListHeaderChrome } from "@/lib/list-header-chrome";
 import { listVerbRequest } from "@/lib/list-verb-request";
 import { shouldExitSelectionOnNavigate } from "@/lib/selection-mode";
-import { cn } from "@/lib/utils";
 import { useSelectionWizard, useWizardStepValue } from "@/lib/wizard-history";
 import { retainOpenPanels } from "@/routing";
 import { LabelApplyTrigger } from "./LabelApplyTrigger";
@@ -1351,7 +1351,7 @@ export const MessageList = ({
 				accountId={accountId}
 				mailboxId={mailboxId}
 				selection={wizardSelection}
-				crossAccount={moveDisabledHint !== undefined}
+				selectionRestriction={moveDisabledHint ? "spansAccounts" : undefined}
 				escalated={escalatedSelection}
 				escalatedProgress={escalation.progress}
 				onFinished={exitSelection}

package/src/components/mail/MessageRow.tsx

@@ -14,6 +14,7 @@ import { messageOperationsDescribeMessageOptions } from "@remit/api-http-client/
 import {
 	ComfortableRowBody,
 	CompactRowBody,
+	cn,
 	comfortableRowClass,
 	compactRowClass,
 	type Density,
@@ -26,7 +27,6 @@ import {
 } from "@remit/ui";
 import { useQueryClient } from "@tanstack/react-query";
 import { type MouseEvent, memo, type ReactNode, useCallback } from "react";
-import { cn } from "@/lib/utils";
 import { NavLink } from "@/routing";
 import { useThreadRowInteraction } from "./ThreadListInteraction";
 import { useModifierSelect } from "./useModifierSelect";

package/src/components/mail/MoveToTrigger.tsx

@@ -1,5 +1,5 @@
 import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { Button, type FolderTreeNode, FolderTreePicker } from "@remit/ui";
+import { Button, cn, type FolderTreeNode, FolderTreePicker } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { FolderInput } from "lucide-react";
 import {
@@ -18,7 +18,6 @@ import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import { buildMoveOptions, folderDelimiter } from "@/lib/move-options";
-import { cn } from "@/lib/utils";
 
 interface MoveToTriggerProps {
 	accountId: string;

package/src/components/mail/OutboxPane.tsx

@@ -23,6 +23,7 @@ import type {
 	RemitImapOutboxMessageStatus,
 } from "@remit/api-http-client/types.gen.ts";
 import {
+	cn,
 	LIST_ROW_SELECTOR,
 	OutboxRow,
 	ReadingPaneEmpty,
@@ -62,7 +63,6 @@ import {
 import { isOutboxListRow, isUnsendableStatus } from "@/lib/outbox-status";
 import { normalizeSearchQuery } from "@/lib/search-query";
 import { parseSearchTokens } from "@/lib/search-tokens";
-import { cn } from "@/lib/utils";
 import { retainOpenPanels } from "@/routing";
 
 /* ------------------------------------------------------------------ */

package/src/components/mail/SelectionWizardHost.tsx

@@ -2,8 +2,6 @@ import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@t
 import {
 	type ClauseDraft,
 	type ClauseEditState,
-	crossAccountDestinationReason,
-	crossAccountRuleReason,
 	derivePropertyClauses,
 	deriveSenderClauses,
 	dominantSender,
@@ -14,6 +12,7 @@ import {
 	type RuleClause,
 	type RunState,
 	type SearchConversion,
+	type SelectionRestriction,
 	SelectionWizard,
 	type StepId,
 	searchConversionNotice,
@@ -25,6 +24,7 @@ import {
 	type Verb,
 	type WizardDraft,
 	type WizardMessage,
+	wizardScopeFor,
 } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { useBlocker } from "@tanstack/react-router";
@@ -125,8 +125,12 @@ export interface SelectionWizardHostProps {
 	/** Where the selection was made, so a run invalidates the listing it changed. */
 	mailboxId?: string;
 	selection: readonly WizardSelectionMessage[];
-	/** The ticked rows span more than one account, so no rule can be created. */
-	crossAccount?: boolean;
+	/**
+	 * Which scope the ticked rows span more of than the folder and rule steps can
+	 * take. The surface that resolved the selection knows which of the two it is,
+	 * and the wizard states that one (#525).
+	 */
+	selectionRestriction?: SelectionRestriction;
 	/** Present when the selection is a predicate rather than the ticked rows. */
 	escalated?: EscalatedSelection;
 	/**
@@ -257,7 +261,7 @@ function SelectionWizardSession({
 	accountId,
 	mailboxId,
 	selection,
-	crossAccount = false,
+	selectionRestriction,
 	escalated: escalatedSelection,
 	escalatedProgress,
 	searchConversion,
@@ -451,18 +455,16 @@ function SelectionWizardSession({
 
 	// A filter, a folder, and the preview that counts a widened door all belong to
 	// one account, so a selection spanning accounts reaches none of them and is
-	// told so on the step that asks (#477 5.5, #523). The one-off scope and the
-	// ticked rows act on the messages themselves and are unaffected.
-	const accountScoped = !crossAccount && !!accountId;
-	const ruleRestriction = accountScoped ? undefined : crossAccountRuleReason;
-	const folderRestriction = accountScoped
-		? undefined
-		: crossAccountDestinationReason;
+	// told so on the step that asks (#477 5.5, #523). A selection spanning folders
+	// of one account is told about folders instead, and keeps its account: the
+	// preview behind a widened door has something to count against. The one-off
+	// scope and the ticked rows act on the messages themselves and are unaffected.
+	const wizardScope = wizardScopeFor(accountId, selectionRestriction);
 	const restrictionFor = (step: StepId): string | undefined => {
-		if (step === "folder") return folderRestriction;
+		if (step === "folder") return wizardScope.destination;
 		if (step !== "rule") return undefined;
 		return named.scope === "standing" || named.scope === "until"
-			? ruleRestriction
+			? wizardScope.rule
 			: undefined;
 	};
 	const blockedReason =
@@ -940,7 +942,7 @@ function SelectionWizardSession({
 			match={{
 				selectedCount: selection.length,
 				mode,
-				accountId: accountScoped ? accountId : undefined,
+				accountId: wizardScope.accountId,
 				onModeChange: changeMode,
 				semanticUnavailable,
 				semanticErrorDetail:
@@ -977,13 +979,13 @@ function SelectionWizardSession({
 				onSelect: (moveMailboxId) =>
 					setDraft((held) => ({ ...held, moveMailboxId })),
 				onCreateFolder: accountId ? createFolderIn : undefined,
-				restriction: folderRestriction,
+				restriction: wizardScope.destination,
 			}}
 			rule={{
 				draft: named,
 				onScopeChange: (scope) => setDraft((held) => ({ ...held, scope })),
 				onUntilChange: (until) => setDraft((held) => ({ ...held, until })),
-				restriction: ruleRestriction,
+				restriction: wizardScope.rule,
 			}}
 			name={{
 				name: named.name ?? "",
@@ -1056,7 +1058,7 @@ export function SelectionWizardHost(props: SelectionWizardHostProps) {
 							accounts,
 						),
 						selection: EMPTY_SELECTION,
-						crossAccount: false,
+						selectionRestriction: undefined,
 						escalated: undefined,
 						searchConversion: conversion,
 					}

package/src/components/onboarding/OnboardingWizard.tsx

@@ -1212,7 +1212,6 @@ function StepSync({
 				smtpStartTls: effectiveSmtp?.smtpStartTls ?? false,
 			},
 		});
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
 	// Poll sync status every 2s once account is created. Stop polling once the

package/src/components/settings/AccountFormPanel.tsx

@@ -9,6 +9,7 @@ import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.
 import {
 	Button,
 	ComposeLanguageSetting,
+	cn,
 	Input,
 	PasswordInput,
 	Select,
@@ -27,7 +28,6 @@ import {
 	PROVIDER_PRESETS,
 	type ProviderPreset,
 } from "../../lib/provider-presets.js";
-import { cn } from "../../lib/utils";
 import {
 	appendAppPasswordHint,
 	computeSmtpAutoFill,

package/src/components/ui/DropdownMenu.tsx

@@ -1,5 +1,5 @@
+import { cn } from "@remit/ui";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { cn } from "@/lib/utils";
 
 interface DropdownMenuProps {
 	trigger: React.ReactNode;

package/src/components/ui/ErrorBanner.tsx

@@ -1,5 +1,5 @@
+import { cn } from "@remit/ui";
 import { AlertCircle, AlertTriangle, Info, X } from "lucide-react";
-import { cn } from "../../lib/utils";
 import type {
 	ErrorBannerAction,
 	ErrorBannerSeverity,

package/src/components/ui/KeyboardShortcutsModal.tsx

@@ -1,7 +1,6 @@
-import { DialogBackdrop, Kbd, KEY_HINT_GROUPS } from "@remit/ui";
+import { cn, DialogBackdrop, Kbd, KEY_HINT_GROUPS } from "@remit/ui";
 import { X } from "lucide-react";
 import { Fragment, useCallback, useEffect } from "react";
-import { cn } from "@/lib/utils";
 
 interface KeyboardShortcutsModalProps {
 	isOpen: boolean;

package/src/runtime-config.ts

@@ -54,7 +54,6 @@ interface RawRuntimeConfig {
 }
 
 declare global {
-	// eslint-disable-next-line no-var
 	var __REMIT_CONFIG__: RawRuntimeConfig | undefined;
 }
 

package/src/components/compose/index.ts

@@ -1,6 +0,0 @@
-export { ComposeForm } from "./ComposeForm.js";
-export type { ComposeMode, ComposeState } from "./ComposeProvider.js";
-export { ComposeProvider, useCompose } from "./ComposeProvider.js";
-export { FullCompose } from "./FullCompose.js";
-export { InlineCompose } from "./InlineCompose.js";
-export { MobileComposeSheet } from "./MobileComposeSheet.js";

package/src/lib/utils.ts

@@ -1,4 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

package/src/types/index.ts

@@ -1,67 +0,0 @@
-export interface Thread {
-	threadId: string;
-	mailboxId: string;
-	subject: string;
-	snippet: string;
-	participants: string[];
-	participantCount: number;
-	messageCount: number;
-	hasUnread: boolean;
-	unreadCount: number;
-	hasAttachments: boolean;
-	isStarred: boolean;
-	lastMessageAt: string;
-	createdAt: string;
-	updatedAt: string;
-}
-
-export interface Message {
-	messageId: string;
-	threadId: string;
-	mailboxId: string;
-	subject: string;
-	from: EmailAddress;
-	to: EmailAddress[];
-	cc: EmailAddress[];
-	bcc: EmailAddress[];
-	snippet: string;
-	isRead: boolean;
-	isStarred: boolean;
-	hasAttachments: boolean;
-	attachments: Attachment[];
-	receivedAt: string;
-	createdAt: string;
-	updatedAt: string;
-}
-
-export interface EmailAddress {
-	name?: string;
-	address: string;
-}
-
-export interface Attachment {
-	attachmentId: string;
-	messageId: string;
-	filename: string;
-	mimeType: string;
-	size: number;
-}
-
-export interface Mailbox {
-	mailboxId: string;
-	accountId: string;
-	name: string;
-	fullPath: string;
-	messageCount: number;
-	unreadCount: number;
-	createdAt: string;
-	updatedAt: string;
-}
-
-export interface Account {
-	accountId: string;
-	email: string;
-	name?: string;
-	createdAt: string;
-	updatedAt: string;
-}