@remit/ui 0.0.29 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "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-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/message-body-view.tsx

@@ -107,7 +107,15 @@ export const MessageBodyView = ({
 
 	return (
 		<div className={cn("message-body", className)}>
-			{blockedImageCount > 0 && renderBlockedNotice?.(blockedImageCount)}
+			{/* `message-body-notice` is a styling hook, not a style: a container
+			    that drops the body's horizontal inset (the mobile reading pane)
+			    uses it to give the gutter back to this notice, which is app
+			    chrome rather than part of the email. */}
+			{blockedImageCount > 0 && (
+				<div className="message-body-notice">
+					{renderBlockedNotice?.(blockedImageCount)}
+				</div>
+			)}
 
 			{sanitizedHtml ? (
 				// Email HTML renders inside a sandboxed iframe so its own CSS and any

package/src/components/reading-pane.tsx

@@ -232,14 +232,21 @@ export function ExpandedMessage({
 			    exactly what the app renders, not a divergent inline-HTML mock
 			    (#940). `framed` fixtures map to the newsletter treatment (author
 			    colors preserved); the rest render plain. */}
-			{body ?? (
-				<MessageBodyView
-					className="mt-3"
-					html={message.bodyHtml}
-					category={message.framed ? "newsletter" : "personal"}
-					allowImages
-				/>
-			)}
+			{/* On a phone the email runs edge to edge: the negative margin cancels
+			    this block's `px-2` so no app canvas shows beside the body and the
+			    email doesn't read as sitting in a tinted frame (#763). The header
+			    keeps its inset. The blocked-images notice is app chrome, not part
+			    of the email, so it takes the gutter back. Desktop is unchanged. */}
+			<div className="-mx-2 [&_.message-body-notice]:px-2 lg:mx-0 lg:[&_.message-body-notice]:px-0">
+				{body ?? (
+					<MessageBodyView
+						className="mt-3"
+						html={message.bodyHtml}
+						category={message.framed ? "newsletter" : "personal"}
+						allowImages
+					/>
+				)}
+			</div>
 		</div>
 	);
 }