@remit/ui 0.0.30 → 0.0.32

package/package.json

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

package/src/components/app-shell-slotted.render.test.ts

@@ -122,6 +122,18 @@ describe("AppShellSlotted slot rendering", () => {
 		}
 	});
 
+	it("keeps the nav column beside the top bar, not under it", () => {
+		const html = render({
+			initialWidth: 1400,
+			topBar: createElement("div", { "data-testid": "topbar" }, "Bar"),
+			reading: createElement("div", { "data-testid": "reading" }, "Reading"),
+		});
+		assert.ok(
+			html.indexOf('data-testid="nav"') < html.indexOf('data-testid="topbar"'),
+			"nav opens the layout so the bar starts on the list's edge",
+		);
+	});
+
 	it("omits the top bar when the caller passes none", () => {
 		const html = render({ initialWidth: 1100 });
 		assert.doesNotMatch(html, /data-testid="topbar"/);

package/src/components/app-shell-slotted.tsx

@@ -60,10 +60,10 @@ export interface AppShellSlottedProps {
 	 */
 	header?: ReactNode;
 	/**
-	 * Full-width row above every pane, including the nav. Unlike `header` it is
-	 * rendered at whatever width the caller mounts it, and it spans the whole
-	 * shell rather than sitting inside a pane — that width is what makes the
-	 * search field in it read as the app's search rather than the list's.
+	 * Row above the list, reading and intelligence panes, spanning all three.
+	 * The nav column runs the full height beside it and is never covered, so the
+	 * bar starts on the list's left edge — its span is what makes the search
+	 * field in it read as the app's search rather than the list's.
 	 */
 	topBar?: ReactNode;
 	/**
@@ -176,6 +176,65 @@ export function AppShellSlotted({
 		showIntelligencePane: isWide,
 	};
 
+	/* Sizes are percentages of the group they sit in. This group excludes the nav
+	   column, so they are shares of the remaining ~83%, not of the whole shell. */
+	const contentPanes = (
+		<ResizablePanelGroup direction="horizontal" className="min-h-0 flex-1">
+			<ResizablePanel
+				id="list"
+				order={1}
+				defaultSize={showReadingPane ? (density === "compact" ? 43 : 33) : 100}
+				minSize={22}
+				maxSize={showReadingPane ? 58 : 100}
+				className="min-w-0"
+			>
+				{list}
+			</ResizablePanel>
+
+			{showReadingPane && (
+				<>
+					<ResizableHandle />
+					<ResizablePanel
+						id="reading"
+						order={2}
+						minSize={29}
+						className="min-w-0"
+					>
+						{reading}
+					</ResizablePanel>
+				</>
+			)}
+
+			{showIntelligencePanel && (
+				<>
+					<ResizableHandle />
+					<ResizablePanel
+						id="intelligence"
+						order={3}
+						defaultSize={25}
+						minSize={18}
+						maxSize={39}
+						className="min-w-0"
+					>
+						{intelligence}
+					</ResizablePanel>
+				</>
+			)}
+		</ResizablePanelGroup>
+	);
+
+	const content = (
+		<div className="flex min-h-0 min-w-0 flex-1 flex-col">
+			{topBar}
+
+			{/* Narrow top bar: rendered only when the nav is a slide-over
+			    (< 1024px). Desktop has no slim bar. */}
+			{!showNavPane && header && <div className="shrink-0">{header}</div>}
+
+			{contentPanes}
+		</div>
+	);
+
 	return (
 		<AppShellLayoutCtx.Provider value={layoutCtx}>
 			<div
@@ -186,75 +245,33 @@ export function AppShellSlotted({
 					skeleton
 				) : (
 					<>
-						{topBar}
-
-						{/* Narrow top bar: rendered only when the nav is a slide-over
-						    (< 1024px). Desktop has no slim bar. */}
-						{!showNavPane && header && <div className="shrink-0">{header}</div>}
-
-						<ResizablePanelGroup
-							direction="horizontal"
-							className="min-h-0 flex-1"
-						>
-							{showNavPane && (
-								<>
-									<ResizablePanel
-										id="nav"
-										order={1}
-										defaultSize={17}
-										minSize={12}
-										maxSize={24}
-										className="min-w-0"
-									>
-										{nav}
-									</ResizablePanel>
-									<ResizableHandle />
-								</>
-							)}
-
-							<ResizablePanel
-								id="list"
-								order={2}
-								defaultSize={
-									showReadingPane ? (density === "compact" ? 36 : 27) : 83
-								}
-								minSize={18}
-								maxSize={showReadingPane ? 48 : 88}
-								className="min-w-0"
+						{showNavPane ? (
+							<ResizablePanelGroup
+								direction="horizontal"
+								className="min-h-0 flex-1"
 							>
-								{list}
-							</ResizablePanel>
-
-							{showReadingPane && (
-								<>
-									<ResizableHandle />
-									<ResizablePanel
-										id="reading"
-										order={3}
-										minSize={24}
-										className="min-w-0"
-									>
-										{reading}
-									</ResizablePanel>
-								</>
-							)}
-
-							{showIntelligencePanel && (
-								<>
-									<ResizableHandle />
-									<ResizablePanel
-										id="intelligence"
-										order={4}
-										defaultSize={21}
-										minSize={15}
-										maxSize={32}
-										className="min-w-0"
-									>
-										{intelligence}
-									</ResizablePanel>
-								</>
-							)}
-						</ResizablePanelGroup>
+								<ResizablePanel
+									id="nav"
+									order={1}
+									defaultSize={17}
+									minSize={12}
+									maxSize={24}
+									className="min-w-0"
+								>
+									{nav}
+								</ResizablePanel>
+								<ResizableHandle />
+								<ResizablePanel
+									id="content"
+									order={2}
+									className="flex min-w-0 flex-col"
+								>
+									{content}
+								</ResizablePanel>
+							</ResizablePanelGroup>
+						) : (
+							content
+						)}
 
 						{/* Narrow nav: dismissible slide-over (#784). */}
 						{!showNavPane && (

package/src/components/app-shell.render.test.ts

@@ -109,8 +109,9 @@ describe("AppShell render honors the pane layout (#784)", () => {
 		thread,
 		intelligence,
 	};
-	// The reading pane's toolbar is the only place "Search mail" renders.
-	const readingPaneMarker = /Search mail/;
+	// The desktop reading-pane toolbar keeps the kit's default shortcut hints;
+	// the mobile pane passes its own labels without them.
+	const readingPaneMarker = /title="Reply \(r\)"/;
 	// "Known sender" is the wellknown trust label, rendered only by the rail.
 	const intelligenceMarker = /Known sender/;
 
@@ -175,7 +176,7 @@ describe("AppShell narrow message view: width-gated in-place swap", () => {
 	// narrow single pane is showing the message view.
 	const messageViewMarker = /aria-label="Back to messages"/;
 	// The desktop reading-pane toolbar — present only at/above 1024.
-	const readingPaneMarker = /Search mail/;
+	const readingPaneMarker = /title="Reply \(r\)"/;
 
 	it("below 1024 defaults to the list, not the message view", () => {
 		const html = render({ ...withThread, initialWidth: 800 });

package/src/components/app-top-bar.render.test.ts

@@ -20,33 +20,27 @@ describe("AppTopBar", () => {
 		assert.match(render(), /data-testid="search"/);
 	});
 
-	it("renders the leading and action slots when supplied", () => {
-		const html = render({
-			leading: slot("leading"),
-			actions: slot("actions"),
-		});
-		assert.match(html, /data-testid="leading"/);
+	it("renders the action slot when supplied", () => {
+		const html = render({ actions: slot("actions") });
 		assert.match(html, /data-testid="actions"/);
 	});
 
-	it("omits the optional slots entirely rather than leaving empty boxes", () => {
-		const html = render();
-		assert.doesNotMatch(html, /data-testid="leading"/);
-		assert.doesNotMatch(html, /data-testid="actions"/);
+	it("omits the actions entirely rather than leaving an empty box", () => {
+		assert.doesNotMatch(render(), /data-testid="actions"/);
 	});
 
-	it("lays the bar out leading · search · actions", () => {
-		const html = render({
-			leading: slot("leading"),
-			actions: slot("actions"),
-		});
+	it("lays the bar out search · actions", () => {
+		const html = render({ actions: slot("actions") });
 		assert.ok(
-			html.indexOf("leading") < html.indexOf("search") &&
-				html.indexOf("search") < html.indexOf("actions"),
+			html.indexOf("search") < html.indexOf("actions"),
 			"slots render in reading order",
 		);
 	});
 
+	it("carries no brand mark — the bar is search, not a masthead", () => {
+		assert.doesNotMatch(render(), /remit/i);
+	});
+
 	it("is a banner landmark spanning the app, not a pane header", () => {
 		assert.match(render(), /<header/);
 		assert.match(render(), /w-full/);

package/src/components/app-top-bar.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Bug, Menu, SquarePen } from "lucide-react";
+import { Bug, SquarePen } from "lucide-react";
 import { useState } from "react";
 import { AppTopBar } from "./app-top-bar.js";
 import { Avatar } from "./avatar.js";
@@ -15,20 +15,6 @@ export default meta;
 
 type Story = StoryObj<typeof AppTopBar>;
 
-const Brand = () => (
-	<>
-		<Button
-			variant="ghost"
-			icon={<Menu className="size-5" />}
-			aria-label="Menu"
-			className="px-0 lg:hidden"
-		/>
-		<span className="px-1 text-sm font-semibold tracking-tight text-fg">
-			remit
-		</span>
-	</>
-);
-
 const Actions = () => (
 	<>
 		<Button
@@ -74,7 +60,6 @@ const Bar = ({
 	const [value, setValue] = useState("");
 	return (
 		<AppTopBar
-			leading={<Brand />}
 			actions={<Actions />}
 			search={
 				<SearchChipInput
@@ -98,17 +83,19 @@ const Bar = ({
 
 /** Over the panes it spans, so the arrangement reads the way it will in the app. */
 const WithPanes = ({ children }: { children: React.ReactNode }) => (
-	<div className="flex h-96 flex-col bg-canvas">
-		{children}
-		<div className="flex min-h-0 flex-1">
-			<div className="w-56 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
-				Nav
-			</div>
-			<div className="w-72 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
-				Message list
-			</div>
-			<div className="min-w-0 flex-1 p-3 text-xs text-fg-muted">
-				Message pane — its own toolbar lives here, under the bar
+	<div className="flex h-96 bg-canvas">
+		<div className="w-56 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
+			Nav — full height, beside the bar
+		</div>
+		<div className="flex min-w-0 flex-1 flex-col">
+			{children}
+			<div className="flex min-h-0 flex-1">
+				<div className="w-72 shrink-0 border-r border-line bg-surface p-3 text-xs text-fg-muted">
+					Message list
+				</div>
+				<div className="min-w-0 flex-1 p-3 text-xs text-fg-muted">
+					Message pane — its own toolbar lives here, under the bar
+				</div>
 			</div>
 		</div>
 	</div>
@@ -170,7 +157,8 @@ export const ScopedToOutbox: Story = {
 	),
 };
 
-/** The arrangement: one bar over the nav, the list, and the message pane. */
+/** The arrangement: one bar over the list and the message pane, lined up with
+ *  the list's left edge, with the nav column running the full height beside it. */
 export const OverTheLayout: Story = {
 	render: () => (
 		<WithPanes>

package/src/components/app-top-bar.tsx

@@ -2,11 +2,6 @@ import type { ReactNode } from "react";
 import { cn } from "../lib/cn.js";
 
 export interface AppTopBarProps {
-	/**
-	 * Leading slot — the brand mark, and on narrow widths the nav trigger.
-	 * Sits over the nav column, so keep it to the nav pane's width budget.
-	 */
-	leading?: ReactNode;
 	/**
 	 * The search field. Spans the bar's middle and is the only thing that
 	 * grows, so the bar reads as one search surface for the whole app.
@@ -22,23 +17,20 @@ export interface AppTopBarProps {
 }
 
 /**
- * The application top bar: one full-width row above every pane, carrying
- * search and the global actions.
+ * The application top bar: one row over the list, reading and intelligence
+ * panes, carrying search and the global actions.
  *
  * Search sits here rather than over the message list because it is not the
- * list's search — it reads across the whole app, and the bar's width is what
- * says so. Leading brand and nav trigger, then the search field taking the
- * room it needs, then the global actions.
+ * list's search — it reads across the whole app, and the bar's span is what
+ * says so. It starts on the list's left edge: the nav column runs the full
+ * height beside the bar rather than under it, so the field lines up with the
+ * columns it searches. The search field takes the room it needs, then the
+ * global actions.
  *
  * Presentational and slot-driven; the host supplies the wired field and
  * action controls.
  */
-export function AppTopBar({
-	leading,
-	search,
-	actions,
-	className,
-}: AppTopBarProps) {
+export function AppTopBar({ search, actions, className }: AppTopBarProps) {
 	return (
 		<header
 			className={cn(
@@ -48,9 +40,6 @@ export function AppTopBar({
 				className,
 			)}
 		>
-			{leading && (
-				<div className="flex shrink-0 items-center gap-2">{leading}</div>
-			)}
 			<div className="flex min-w-0 flex-1 justify-start">
 				<div className="w-full max-w-2xl">{search}</div>
 			</div>

package/src/components/reading-pane.render.test.ts

@@ -53,9 +53,10 @@ describe("ReadingPane", () => {
 		assert.match(html, /Select a thread to read/);
 	});
 
-	it("renders the toolbar with the search input", () => {
+	it("renders the message verbs and no search field — search is the app top bar's", () => {
 		const html = renderToString(createElement(ReadingPane, { thread }));
-		assert.match(html, /Search mail/);
+		assert.match(html, /title="Reply \(r\)"/);
+		assert.doesNotMatch(html, /Search mail/);
 	});
 });
 

package/src/components/reading-pane.tsx

@@ -1,17 +1,9 @@
-import {
-	ChevronDown,
-	ChevronRight,
-	Search,
-	ShieldAlert,
-	SquarePen,
-} from "lucide-react";
+import { ChevronDown, ChevronRight, ShieldAlert } from "lucide-react";
 import { type ReactNode, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { isSelfRowActivation } from "../lib/row-keyboard.js";
 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";
@@ -252,13 +244,14 @@ 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 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).
+ * Message action toolbar on the pane-header datum: the reading pane's verbs
+ * (reply/reply-all/forward, delete/move/flag) and the intelligence toggle.
+ * Everything here acts on the open message; search, compose and the account
+ * menu belong to the app and live in the `AppTopBar` above every pane. Built on
+ * the shared `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,
@@ -278,21 +271,6 @@ function MessageToolbar({
 			onUnavailable={() => setHint("Open a message first")}
 			unavailableHint={hint}
 		>
-			{/* Apple Mail geometry: search sits top-right over the message
-			    area but still filters the current list / brief */}
-			<Input
-				icon={<Search className="size-4" />}
-				placeholder="Search mail"
-				className="h-8 w-64 min-w-40 shrink"
-			/>
-			<span className="mx-1 h-4 w-px bg-line" aria-hidden />
-			<Button
-				variant="ghost"
-				size="sm"
-				icon={<SquarePen className="size-4" />}
-				title="Compose (⌘N)"
-				aria-label="Compose"
-			/>
 			<IntelligenceToggle
 				open={intelligenceOpen}
 				enabled={canToggleIntelligence}