@remit/web-client 0.0.1

package/src/auth/provider.tsx

@@ -0,0 +1,63 @@
+import { createContext, type FC, type ReactNode, useContext } from "react";
+
+/**
+ * The auth-integration seam. A deployment composes the web client against
+ * exactly one provider — the identity system it runs — and never ships the
+ * others. `mountApp` receives the chosen provider and publishes it here; the
+ * app shell and every screen read it through `useAuthProvider`, so no surface
+ * imports a specific identity system directly.
+ */
+export interface AuthAccount {
+	email: string | null;
+	signOut: () => void | Promise<void>;
+}
+
+export interface AuthAccountProps {
+	children: (account: AuthAccount) => ReactNode;
+	/** Rendered when no session is active. Defaults to nothing. */
+	fallback?: ReactNode;
+}
+
+export interface AuthProvider {
+	/** Called once at boot, before render, to initialize the identity SDK. */
+	configure(): void;
+	/**
+	 * The current session's bearer token, or `null` when signed out. The API
+	 * interceptor and the raw content fetch read it through here, so the identity
+	 * SDK stays inside the provider.
+	 */
+	getToken(): Promise<string | null>;
+	/** Drop any cached token so the next `getToken` re-mints. */
+	resetToken(): void;
+	/** The sign-in gate: renders children only once a session is established. */
+	Shell: FC<{ children: ReactNode }>;
+	/**
+	 * Render-prop over the active session's identity and sign-out action.
+	 * Renders `fallback` when no session is active.
+	 */
+	Account: FC<AuthAccountProps>;
+}
+
+const Passthrough: FC<{ children?: ReactNode }> = ({ children }) => (
+	<>{children}</>
+);
+
+/**
+ * The zero-identity provider. It has no session and no identity SDK, so a
+ * surface that renders without a mounted provider (an isolated component
+ * render, a harness) degrades to "signed out" instead of crashing.
+ */
+export const noneAuthProvider: AuthProvider = {
+	configure: () => {},
+	getToken: async () => null,
+	resetToken: () => {},
+	Shell: Passthrough,
+	Account: ({ fallback = null }) => <>{fallback}</>,
+};
+
+const AuthProviderContext = createContext<AuthProvider>(noneAuthProvider);
+
+export const AuthProviderProvider = AuthProviderContext.Provider;
+
+export const useAuthProvider = (): AuthProvider =>
+	useContext(AuthProviderContext);

package/src/auth/sign-out-visibility.test.ts

@@ -0,0 +1,40 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import { isSignOutVisible } from "./sign-out-visibility";
+
+describe("isSignOutVisible", () => {
+	test("returns true when configured and authenticated", () => {
+		assert.equal(
+			isSignOutVisible({ configured: true, authStatus: "authenticated" }),
+			true,
+		);
+	});
+
+	test("returns false when cognito is not configured", () => {
+		assert.equal(
+			isSignOutVisible({ configured: false, authStatus: "authenticated" }),
+			false,
+		);
+	});
+
+	test("returns false when unauthenticated", () => {
+		assert.equal(
+			isSignOutVisible({ configured: true, authStatus: "unauthenticated" }),
+			false,
+		);
+	});
+
+	test("returns false while auth status is configuring", () => {
+		assert.equal(
+			isSignOutVisible({ configured: true, authStatus: "configuring" }),
+			false,
+		);
+	});
+
+	test("returns false when auth status is undefined", () => {
+		assert.equal(
+			isSignOutVisible({ configured: true, authStatus: undefined }),
+			false,
+		);
+	});
+});

package/src/auth/sign-out-visibility.ts

@@ -0,0 +1,10 @@
+export interface SignOutMenuVisibilityInput {
+	configured: boolean;
+	authStatus: string | undefined;
+}
+
+export const isSignOutVisible = ({
+	configured,
+	authStatus,
+}: SignOutMenuVisibilityInput): boolean =>
+	configured && authStatus === "authenticated";

package/src/auth/sign-up-disabled.test.ts

@@ -0,0 +1,23 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	isSignUpDisabledError,
+	SIGN_UP_DISABLED_CODE,
+} from "./better-auth-config";
+
+describe("isSignUpDisabledError", () => {
+	it("recognises better-auth's closed-signup rejection by code", () => {
+		assert.equal(
+			isSignUpDisabledError({ code: SIGN_UP_DISABLED_CODE, status: 400 }),
+			true,
+		);
+	});
+
+	it("ignores any other error or non-object", () => {
+		assert.equal(isSignUpDisabledError({ code: "INVALID_EMAIL" }), false);
+		assert.equal(isSignUpDisabledError(new Error("network down")), false);
+		assert.equal(isSignUpDisabledError(null), false);
+		assert.equal(isSignUpDisabledError(undefined), false);
+		assert.equal(isSignUpDisabledError("nope"), false);
+	});
+});

package/src/components/compose/AddressField.tsx

@@ -0,0 +1,237 @@
+import { addressOperationsSearchAddressesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapAddressResponse } from "@remit/api-http-client/types.gen.ts";
+import { AddressTag } from "@remit/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useDebouncedValue } from "@/hooks/useDebouncedValue";
+import { cn } from "@/lib/utils";
+
+export interface AddressEntry {
+	email: string;
+	displayName?: string;
+}
+
+interface AddressFieldProps {
+	label: string;
+	addresses: AddressEntry[];
+	onChange: (addresses: AddressEntry[]) => void;
+	placeholder?: string;
+}
+
+const formatSuggestion = (addr: RemitImapAddressResponse): string => {
+	if (addr.displayName) {
+		return `${addr.displayName} <${addr.normalizedEmail}>`;
+	}
+	return addr.normalizedEmail;
+};
+
+const isValidEmail = (value: string): boolean =>
+	/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
+
+const parseEmailInput = (value: string): AddressEntry | undefined => {
+	const trimmed = value.trim();
+	if (!trimmed) return undefined;
+
+	const angleMatch = trimmed.match(/^(.+?)\s*<([^>]+)>$/);
+	if (angleMatch) {
+		const displayName = angleMatch[1].trim();
+		const email = angleMatch[2].trim();
+		if (isValidEmail(email)) return { email, displayName };
+	}
+
+	if (isValidEmail(trimmed)) return { email: trimmed };
+	return undefined;
+};
+
+export const AddressField = ({
+	label,
+	addresses,
+	onChange,
+	placeholder,
+}: AddressFieldProps) => {
+	const [inputValue, setInputValue] = useState("");
+	const [highlightedIndex, setHighlightedIndex] = useState(-1);
+	const [isOpen, setIsOpen] = useState(false);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const listRef = useRef<HTMLUListElement>(null);
+
+	const debouncedQuery = useDebouncedValue(inputValue, 200);
+
+	const { data: suggestionsData } = useQuery({
+		...addressOperationsSearchAddressesOptions({
+			query: { q: debouncedQuery, limit: 8 },
+		}),
+		enabled: debouncedQuery.length >= 2,
+	});
+
+	const suggestions = suggestionsData?.items ?? [];
+	const existingEmails = new Set(addresses.map((a) => a.email.toLowerCase()));
+	const filteredSuggestions = suggestions.filter(
+		(s) => !existingEmails.has(s.normalizedEmail.toLowerCase()),
+	);
+
+	useEffect(() => {
+		setHighlightedIndex(-1);
+		setIsOpen(filteredSuggestions.length > 0 && inputValue.length >= 2);
+	}, [filteredSuggestions.length, inputValue.length]);
+
+	const addAddress = useCallback(
+		(entry: AddressEntry) => {
+			if (existingEmails.has(entry.email.toLowerCase())) return;
+			onChange([...addresses, entry]);
+			setInputValue("");
+			setIsOpen(false);
+		},
+		[addresses, existingEmails, onChange],
+	);
+
+	const removeAddress = useCallback(
+		(index: number) => {
+			onChange(addresses.filter((_, i) => i !== index));
+		},
+		[addresses, onChange],
+	);
+
+	const selectSuggestion = useCallback(
+		(suggestion: RemitImapAddressResponse) => {
+			addAddress({
+				email: suggestion.normalizedEmail,
+				displayName: suggestion.displayName,
+			});
+			inputRef.current?.focus();
+		},
+		[addAddress],
+	);
+
+	const commitInput = useCallback(() => {
+		const entry = parseEmailInput(inputValue);
+		if (entry) {
+			addAddress(entry);
+		}
+	}, [inputValue, addAddress]);
+
+	const handleKeyDown = useCallback(
+		(e: React.KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Backspace" && inputValue === "" && addresses.length > 0) {
+				removeAddress(addresses.length - 1);
+				return;
+			}
+
+			if (e.key === "Enter" || e.key === "Tab" || e.key === ",") {
+				if (highlightedIndex >= 0 && filteredSuggestions[highlightedIndex]) {
+					e.preventDefault();
+					selectSuggestion(filteredSuggestions[highlightedIndex]);
+					return;
+				}
+				if (inputValue.trim()) {
+					e.preventDefault();
+					commitInput();
+				}
+				return;
+			}
+
+			if (e.key === "ArrowDown" && isOpen) {
+				e.preventDefault();
+				setHighlightedIndex((prev) =>
+					prev < filteredSuggestions.length - 1 ? prev + 1 : 0,
+				);
+				return;
+			}
+
+			if (e.key === "ArrowUp" && isOpen) {
+				e.preventDefault();
+				setHighlightedIndex((prev) =>
+					prev > 0 ? prev - 1 : filteredSuggestions.length - 1,
+				);
+				return;
+			}
+
+			if (e.key === "Escape") {
+				setIsOpen(false);
+				setHighlightedIndex(-1);
+			}
+		},
+		[
+			inputValue,
+			addresses.length,
+			highlightedIndex,
+			filteredSuggestions,
+			isOpen,
+			removeAddress,
+			selectSuggestion,
+			commitInput,
+		],
+	);
+
+	const handleBlur = useCallback(() => {
+		setTimeout(() => {
+			commitInput();
+			setIsOpen(false);
+		}, 150);
+	}, [commitInput]);
+
+	return (
+		<div className="relative">
+			<div className="flex items-start gap-2">
+				<label
+					htmlFor={`address-field-${label}`}
+					className="text-sm text-fg-muted shrink-0 w-12 pt-1.5"
+				>
+					{label}:
+				</label>
+				{/* biome-ignore lint/a11y/noStaticElementInteractions: click-to-focus wrapper for the address input; keyboard is forwarded to the inner input */}
+				<div
+					className="flex-1 flex flex-wrap items-center gap-1 min-h-[36px] px-2 py-1 border rounded-md bg-canvas cursor-text"
+					onClick={() => inputRef.current?.focus()}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") inputRef.current?.focus();
+					}}
+				>
+					{addresses.map((addr, i) => (
+						<AddressTag
+							key={addr.email}
+							email={addr.email}
+							displayName={addr.displayName}
+							onRemove={() => removeAddress(i)}
+						/>
+					))}
+					<input
+						ref={inputRef}
+						id={`address-field-${label}`}
+						type="text"
+						value={inputValue}
+						onChange={(e) => setInputValue(e.target.value)}
+						onKeyDown={handleKeyDown}
+						onBlur={handleBlur}
+						placeholder={addresses.length === 0 ? placeholder : ""}
+						className="flex-1 min-w-[120px] bg-transparent outline-none text-sm py-0.5"
+					/>
+				</div>
+			</div>
+
+			{isOpen && filteredSuggestions.length > 0 && (
+				<ul
+					ref={listRef}
+					className="absolute left-12 right-0 mt-1 bg-surface border border-line rounded-md shadow-lg z-50 max-h-[200px] overflow-auto"
+				>
+					{filteredSuggestions.map((suggestion, index) => (
+						<li
+							key={suggestion.addressId}
+							className={cn(
+								"px-3 py-2 text-sm cursor-pointer transition-colors",
+								index === highlightedIndex && "bg-accent-2-soft",
+							)}
+							onMouseDown={(e) => {
+								e.preventDefault();
+								selectSuggestion(suggestion);
+							}}
+							onMouseEnter={() => setHighlightedIndex(index)}
+						>
+							{formatSuggestion(suggestion)}
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+};

package/src/components/compose/ComposeBody.tsx

@@ -0,0 +1,36 @@
+import type { Value } from "platejs";
+import { Plate } from "platejs/react";
+import { PlateEditorContent, usePlateComposeEditor } from "./PlateEditor.js";
+import { PlateToolbar } from "./PlateToolbar.js";
+
+interface ComposeBodyProps {
+	value: Value;
+	onChange: (value: Value) => void;
+	onSubmit?: () => void;
+	autoFocus?: boolean;
+}
+
+export const ComposeBody = ({
+	value,
+	onChange,
+	onSubmit,
+	autoFocus,
+}: ComposeBodyProps) => {
+	const editor = usePlateComposeEditor(value);
+
+	return (
+		<Plate
+			editor={editor}
+			onValueChange={({ value: v }) => {
+				onChange(v);
+			}}
+		>
+			<PlateToolbar />
+			<PlateEditorContent
+				editor={editor}
+				onSubmit={onSubmit}
+				autoFocus={autoFocus}
+			/>
+		</Plate>
+	);
+};