@remit/ui 0.0.8 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "type": "module",
   "files": [
     "src"

package/src/components/app-shell.tsx

@@ -269,9 +269,7 @@ function AppShellReading({
 			thread={thread}
 			intelligenceOpen={showIntelligence}
 			onToggleIntelligence={onToggleIntelligence}
-			showIntelligenceToggle={
-				isWide && Boolean(intelligence) && Boolean(thread)
-			}
+			canToggleIntelligence={isWide && Boolean(intelligence) && Boolean(thread)}
 		/>
 	);
 }

package/src/components/intelligence-toggle.render.test.ts

@@ -0,0 +1,37 @@
+/**
+ * Render invariants for the (i) intelligence toggle (#52): the control holds
+ * its slot in the toolbar on every view and in every selection state, and
+ * reports "cannot act" by being disabled rather than by disappearing.
+ */
+
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { IntelligenceToggle } from "./intelligence-toggle.js";
+
+const render = (props: Parameters<typeof IntelligenceToggle>[0]): string =>
+	renderToString(createElement(IntelligenceToggle, props));
+
+describe("IntelligenceToggle", () => {
+	it("renders the button when it cannot act", () => {
+		const html = render({ enabled: false });
+		assert.match(html, /aria-label="Show intelligence sidebar"/);
+	});
+
+	it("disables rather than hides the button when it cannot act", () => {
+		const html = render({ enabled: false });
+		assert.match(html, /\sdisabled(=""|\s|>)/);
+	});
+
+	it("is pressable when a thread is open and a rail exists", () => {
+		const html = render({ enabled: true });
+		assert.equal(/\sdisabled(=""|\s|>)/.test(html), false);
+	});
+
+	it("stays rendered while the rail is open so it can close it again", () => {
+		const html = render({ enabled: true, open: true });
+		assert.match(html, /aria-label="Hide intelligence sidebar"/);
+		assert.match(html, /aria-pressed="true"/);
+	});
+});

package/src/components/intelligence-toggle.tsx

@@ -0,0 +1,53 @@
+import { Info } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+
+export interface IntelligenceToggleProps {
+	/** Whether the intelligence rail is currently open. */
+	open?: boolean;
+	/**
+	 * Whether the toggle can act right now — a rail exists for this view, the
+	 * width allows it, and a thread is open. When false the button still renders,
+	 * greyed out (#52).
+	 */
+	enabled?: boolean;
+	onToggle?: () => void;
+	className?: string;
+}
+
+/**
+ * The (i) intelligence-rail toggle in the reading-pane toolbar.
+ *
+ * The toolbar's control set is fixed: the toggle occupies the same slot on
+ * every view and in every selection state, and reports that it cannot act by
+ * being disabled rather than by vanishing (#52). A control that appears and
+ * disappears moves its neighbours and leaves the user with nothing to learn
+ * from; a greyed-out one stays where they last saw it.
+ *
+ * The title names the control rather than the reason it is off. There are three
+ * reasons (nothing selected, a window too narrow for the rail, a view with no
+ * rail), a disabled `Button` is `pointer-events-none` so no tooltip surfaces
+ * anyway, and a reason string that covers one case is wrong in the other two.
+ */
+export function IntelligenceToggle({
+	open = false,
+	enabled = true,
+	onToggle,
+	className,
+}: IntelligenceToggleProps) {
+	return (
+		<Button
+			variant="ghost"
+			size="sm"
+			icon={<Info className="size-4" />}
+			title="Intelligence"
+			aria-label={
+				open ? "Hide intelligence sidebar" : "Show intelligence sidebar"
+			}
+			aria-pressed={open}
+			disabled={!enabled}
+			onClick={onToggle}
+			className={cn(open && "bg-accent-2-soft text-accent-2", className)}
+		/>
+	);
+}

package/src/components/isolated-email-frame.keys.test.ts

@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { isForwardableKey } from "./isolated-email-frame.js";
+
+describe("isForwardableKey", () => {
+	it("forwards the keys that move around the app", () => {
+		for (const key of [
+			"j",
+			"k",
+			"g",
+			"x",
+			"r",
+			"#",
+			"Enter",
+			"Escape",
+			"ArrowUp",
+			"ArrowDown",
+			"Home",
+			"End",
+		]) {
+			assert.equal(isForwardableKey(key), true, key);
+		}
+	});
+
+	it("keeps destructive keys inside the message body", () => {
+		// The replayed event carries no focused control, so the app routes what it
+		// recognises straight at the message list. Backspace while reading must not
+		// become a delete of the row behind the reader.
+		assert.equal(isForwardableKey("Backspace"), false);
+		assert.equal(isForwardableKey("Delete"), false);
+	});
+
+	it("keeps Space inside the message body", () => {
+		// Space belongs to reading the email, not to selecting rows behind it.
+		assert.equal(isForwardableKey(" "), false);
+	});
+
+	it("does not forward unknown named keys", () => {
+		assert.equal(isForwardableKey("F5"), false);
+		assert.equal(isForwardableKey("Tab"), false);
+		assert.equal(isForwardableKey("PageDown"), false);
+	});
+});

package/src/components/isolated-email-frame.tsx

@@ -104,6 +104,61 @@ const useMatchMedia = (query: string): boolean => {
 	return matches;
 };
 
+/** Named (non-character) keys worth replaying: moving around and closing. */
+const FORWARDED_NAMED_KEYS = new Set([
+	"Enter",
+	"Escape",
+	"ArrowUp",
+	"ArrowDown",
+	"ArrowLeft",
+	"ArrowRight",
+	"Home",
+	"End",
+]);
+
+/**
+ * Which keystrokes leave the frame. An allowlist rather than a denylist: the
+ * replayed event's target is the host window, so the app's keyboard layer sees
+ * no focused control and routes everything it recognises to the message list.
+ * Forwarding indiscriminately would therefore let Backspace pressed while
+ * reading delete the message under the cursor, and Space select it.
+ *
+ * Single characters (letters, digits, punctuation) carry the app's navigation
+ * and verb bindings and are safe to replay. Space is excluded: it belongs to
+ * reading the email, not to selecting rows behind it.
+ */
+export const isForwardableKey = (key: string): boolean => {
+	if (key === " ") return false;
+	if (key.length === 1) return true;
+	return FORWARDED_NAMED_KEYS.has(key);
+};
+
+/**
+ * Keydown events raised inside an iframe never reach the embedding window, so
+ * once the reader clicks into the message body every app shortcut goes dead —
+ * j/k, arrows, Esc, the lot (#43). Replay the allowlisted keystrokes on the host
+ * window so the app's one keyboard layer keeps hearing them. The replay is a
+ * copy: the original event is untouched, so selecting and scrolling inside the
+ * email still behave normally. Modifier combos stay with the frame and the
+ * browser.
+ */
+const forwardKeyDown = (event: KeyboardEvent) => {
+	if (event.metaKey || event.ctrlKey || event.altKey) return;
+	if (!isForwardableKey(event.key)) return;
+	const doc = (event.currentTarget ?? event.target) as Document | null;
+	const host = doc?.defaultView?.parent;
+	if (!host || host === doc?.defaultView) return;
+	host.dispatchEvent(
+		new KeyboardEvent("keydown", {
+			key: event.key,
+			code: event.code,
+			shiftKey: event.shiftKey,
+			bubbles: true,
+			cancelable: true,
+		}),
+	);
+};
+
 /**
  * Render untrusted (sanitized) email HTML in a sandboxed iframe that fits the
  * viewport width on mobile and isolates the email's CSS from the app chrome.
@@ -175,6 +230,7 @@ export const IsolatedEmailFrame = ({
 		};
 
 		let observer: ResizeObserver | undefined;
+		let keyDoc: Document | undefined;
 		const handleLoad = () => {
 			measure();
 			const doc = iframe.contentDocument;
@@ -182,11 +238,14 @@ export const IsolatedEmailFrame = ({
 			observer = new ResizeObserver(measure);
 			observer.observe(doc.body);
 			if (doc.documentElement) observer.observe(doc.documentElement);
+			doc.addEventListener("keydown", forwardKeyDown);
+			keyDoc = doc;
 		};
 
 		iframe.addEventListener("load", handleLoad);
 		return () => {
 			iframe.removeEventListener("load", handleLoad);
+			keyDoc?.removeEventListener("keydown", forwardKeyDown);
 			observer?.disconnect();
 		};
 	}, []);

package/src/components/reading-pane.stories.tsx

@@ -88,7 +88,7 @@ export const Newsletter: Story = { args: { thread: newsletterThread } };
 export const Empty: Story = { args: { thread: undefined } };
 
 export const WithIntelligenceToggle: Story = {
-	args: { thread, showIntelligenceToggle: true, intelligenceOpen: false },
+	args: { thread, canToggleIntelligence: true, intelligenceOpen: false },
 };
 
 /* ------------------------------------------------------------------ */

package/src/components/reading-pane.tsx

@@ -1,7 +1,6 @@
 import {
 	ChevronDown,
 	ChevronRight,
-	Info,
 	Search,
 	ShieldAlert,
 	SquarePen,
@@ -13,6 +12,7 @@ import type { ThreadData, ThreadMessageData } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
+import { IntelligenceToggle } from "./intelligence-toggle.js";
 import { MailActionToolbar } from "./mail-action-toolbar.js";
 import { MessageBodyView } from "./message-body-view.js";
 import { ReadingPaneEmpty } from "./reading-pane-empty.js";
@@ -248,19 +248,21 @@ export function ExpandedMessage({
  * Message action toolbar on the pane-header datum: the reading pane's
  * verbs (reply/reply-all/forward, delete/move/flag) plus search and
  * compose, Apple Mail-style above the message area. Built on the shared
- * `MailActionToolbar` so the buttons stay pressable with no thread open and
- * explain inline rather than greying out (the never-disable tenet).
+ * `MailActionToolbar` so the mail verbs stay pressable with no
+ * thread open and explain inline rather than greying out (the never-disable
+ * tenet). The intelligence toggle is the exception: it holds its slot and greys
+ * out when there is no rail to open (#52).
  */
 function MessageToolbar({
 	hasThread,
 	intelligenceOpen,
 	onToggleIntelligence,
-	showIntelligenceToggle,
+	canToggleIntelligence = false,
 }: {
 	hasThread: boolean;
 	intelligenceOpen?: boolean;
 	onToggleIntelligence?: () => void;
-	showIntelligenceToggle?: boolean;
+	canToggleIntelligence?: boolean;
 }) {
 	const [hint, setHint] = useState<string | null>(null);
 	return (
@@ -284,15 +286,11 @@ function MessageToolbar({
 				title="Compose (⌘N)"
 				aria-label="Compose"
 			/>
-			{showIntelligenceToggle && !intelligenceOpen && (
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={<Info className="size-4" />}
-					onClick={onToggleIntelligence}
-					aria-label="Show intelligence sidebar"
-				/>
-			)}
+			<IntelligenceToggle
+				open={intelligenceOpen}
+				enabled={canToggleIntelligence}
+				onToggle={onToggleIntelligence}
+			/>
 		</MailActionToolbar>
 	);
 }
@@ -301,12 +299,12 @@ export function ReadingPane({
 	thread,
 	intelligenceOpen,
 	onToggleIntelligence,
-	showIntelligenceToggle,
+	canToggleIntelligence,
 }: {
 	thread?: ThreadData;
 	intelligenceOpen?: boolean;
 	onToggleIntelligence?: () => void;
-	showIntelligenceToggle?: boolean;
+	canToggleIntelligence?: boolean;
 }) {
 	return (
 		<article className="flex h-full w-full min-w-0 flex-col bg-canvas">
@@ -314,7 +312,7 @@ export function ReadingPane({
 				hasThread={Boolean(thread)}
 				intelligenceOpen={intelligenceOpen}
 				onToggleIntelligence={onToggleIntelligence}
-				showIntelligenceToggle={showIntelligenceToggle}
+				canToggleIntelligence={canToggleIntelligence}
 			/>
 
 			{!thread ? (

package/src/index.ts

@@ -144,6 +144,10 @@ export {
 	type SimilarMessageLinkProps,
 	type SimilarState,
 } from "./components/intelligence-panel.js";
+export {
+	IntelligenceToggle,
+	type IntelligenceToggleProps,
+} from "./components/intelligence-toggle.js";
 export {
 	IsolatedEmailFrame,
 	type IsolatedEmailFrameProps,