@remit/ui 0.0.73 → 0.0.75

package/package.json

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

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

@@ -122,15 +122,15 @@ describe("AppShellSlotted slot rendering", () => {
 		}
 	});
 
-	it("keeps the nav column beside the top bar, not under it", () => {
+	it("spans the top bar over the nav column too", () => {
 		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",
+			html.indexOf('data-testid="topbar"') < html.indexOf('data-testid="nav"'),
+			"the bar opens the layout, so it runs the full width",
 		);
 	});
 

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

@@ -60,10 +60,9 @@ export interface AppShellSlottedProps {
 	 */
 	header?: ReactNode;
 	/**
-	 * 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.
+	 * Row across the top of the shell, spanning the nav, list, reading and
+	 * intelligence panes. Its full width is what makes the search field in it
+	 * read as the app's search rather than the list's.
 	 */
 	topBar?: ReactNode;
 	/**
@@ -108,6 +107,14 @@ export interface AppShellLayoutContext {
 	showNavPane: boolean;
 	/** Open the nav slide-over. Call from list-header "folders" buttons. */
 	openNav: () => void;
+	/** True when the nav pane is collapsed away at a width that would show it. */
+	navCollapsed: boolean;
+	/**
+	 * Show or hide the nav at whichever tier is current — it collapses the pane
+	 * where the nav is a column and opens the slide-over where it is not, so one
+	 * control in the top bar covers both.
+	 */
+	toggleNav: () => void;
 	/** True when the reading pane is active (width ≥ 1024px). */
 	showReadingPane: boolean;
 	/** True when the intelligence rail can show (width ≥ 1280px). */
@@ -148,7 +155,11 @@ export function AppShellSlotted({
 }: AppShellSlottedProps) {
 	const [containerRef, containerWidth] = useContainerWidth(initialWidth);
 	const panes = resolvePaneLayout(containerWidth ?? 0);
+	const [navCollapsed, setNavCollapsed] = useState(false);
+	// The tier, not the current visibility: consumers read it to decide whether
+	// nav access is theirs to offer, and it stays the top bar's while collapsed.
 	const showNavPane = panes.nav;
+	const navPaneVisible = showNavPane && !navCollapsed;
 	const showReadingPane = panes.reading && Boolean(reading);
 	const isWide = panes.intelligence;
 
@@ -167,11 +178,22 @@ export function AppShellSlotted({
 	const showIntelligencePanel =
 		isWide && intelligenceOpen && hasThread && Boolean(intelligence);
 
+	const toggleNav = () => {
+		if (!showNavPane) {
+			if (navOpen) closeNav();
+			else openNav();
+			return;
+		}
+		setNavCollapsed((collapsed) => !collapsed);
+	};
+
 	const layoutCtx: AppShellLayoutContext = {
 		panes,
 		containerWidth,
 		showNavPane,
 		openNav,
+		navCollapsed,
+		toggleNav,
 		showReadingPane,
 		showIntelligencePane: isWide,
 	};
@@ -225,8 +247,6 @@ export function AppShellSlotted({
 
 	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>}
@@ -245,7 +265,9 @@ export function AppShellSlotted({
 					skeleton
 				) : (
 					<>
-						{showNavPane ? (
+						{topBar}
+
+						{navPaneVisible ? (
 							<ResizablePanelGroup
 								direction="horizontal"
 								className="min-h-0 flex-1"

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

@@ -156,7 +156,6 @@ describe("AppShell nav: pane vs slide-over by width (#784)", () => {
 	it("≥1024px: nav is a persistent pane, no trigger", () => {
 		const html = render({ flatList: true, initialWidth: 1100 });
 		assert.match(html, navMarker, "nav renders as a pane");
-		assert.match(html, /Settings/, "the desktop nav pins a Settings footer");
 		assert.doesNotMatch(
 			html,
 			navTriggerMarker,

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

@@ -29,14 +29,25 @@ describe("AppTopBar", () => {
 		assert.doesNotMatch(render(), /data-testid="actions"/);
 	});
 
-	it("lays the bar out search · actions", () => {
-		const html = render({ actions: slot("actions") });
+	it("lays the bar out leading · search · actions", () => {
+		const html = render({ leading: slot("leading"), actions: slot("actions") });
 		assert.ok(
-			html.indexOf("search") < html.indexOf("actions"),
+			html.indexOf("leading") < html.indexOf("search") &&
+				html.indexOf("search") < html.indexOf("actions"),
 			"slots render in reading order",
 		);
 	});
 
+	it("omits the leading box when no control is supplied", () => {
+		assert.doesNotMatch(render(), /data-testid="leading"/);
+	});
+
+	it("widens the field on focus rather than resting wide", () => {
+		const html = render();
+		assert.match(html, /max-w-xs/, "resting width is modest");
+		assert.match(html, /focus-within:max-w-lg/, "focus widens it");
+	});
+
 	it("carries no brand mark — the bar is search, not a masthead", () => {
 		assert.doesNotMatch(render(), /remit/i);
 	});

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

@@ -83,19 +83,17 @@ 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 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 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 — under the bar, like every other pane
+			</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>
 		</div>
 	</div>
@@ -157,8 +155,8 @@ export const ScopedToOutbox: Story = {
 	),
 };
 
-/** 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. */
+/** The arrangement: one bar across the top of the shell, over the nav, the list
+ *  and the message pane alike. */
 export const OverTheLayout: Story = {
 	render: () => (
 		<WithPanes>

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

@@ -2,6 +2,11 @@ import type { ReactNode } from "react";
 import { cn } from "../lib/cn.js";
 
 export interface AppTopBarProps {
+	/**
+	 * Controls at the bar's left edge, over the nav column — the nav toggle.
+	 * Anything that acts on the shell itself rather than on the mail in it.
+	 */
+	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.
@@ -17,31 +22,41 @@ export interface AppTopBarProps {
 }
 
 /**
- * The application top bar: one row over the list, reading and intelligence
- * panes, carrying search and the global actions.
+ * The application top bar: one row across the top of the shell, over the nav,
+ * 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 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.
+ * says so. 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({ search, actions, className }: AppTopBarProps) {
+export function AppTopBar({
+	leading,
+	search,
+	actions,
+	className,
+}: AppTopBarProps) {
 	return (
 		<header
 			className={cn(
 				// min-h, not a fixed height: the search field grows when its chips
 				// wrap onto a second line.
-				"flex min-h-16 w-full shrink-0 items-center gap-3 border-b border-line bg-canvas px-3 py-2",
+				"flex min-h-pane-header w-full shrink-0 items-center gap-2 border-b border-line bg-canvas px-row-inset py-1",
 				className,
 			)}
 		>
+			{leading && (
+				<div className="flex shrink-0 items-center gap-1">{leading}</div>
+			)}
 			<div className="flex min-w-0 flex-1 justify-start">
-				<div className="w-full max-w-2xl">{search}</div>
+				{/* Resting width is enough to read a query back, not enough to make an
+				    empty field the loudest thing in the bar; focus widens it to where
+				    a long query and its chips still fit on one line. */}
+				<div className="w-full max-w-xs transition-[max-width] duration-150 ease-out focus-within:max-w-lg">
+					{search}
+				</div>
 			</div>
 			{actions && (
 				<div className="flex shrink-0 items-center gap-1">{actions}</div>

package/src/components/brief-sections.tsx

@@ -16,7 +16,7 @@ import {
 import type { BriefRowComponent } from "./message-row.js";
 
 /* Composable brief filters — each is an additive predicate over a thread row. */
-type BriefFilterId = "unread" | "attachment" | "contacts" | "today";
+export type BriefFilterId = "unread" | "attachment" | "contacts" | "today";
 
 /* "Today" prefers the real `sentDate` timestamp; it falls back to the fixture
    convention that same-day rows render a HH:MM timeLabel (fixtures carry no
@@ -56,7 +56,40 @@ export const briefFilterChips: FilterSheetFilter[] = briefFilterDefs.map(
 	({ id, label }) => ({ id, label }),
 );
 
-export interface BriefSectionsProps {
+/**
+ * Whether a thread survives a set of attribute chips, as the brief's own list
+ * applies them. Exported so a consumer narrowing the same rows on another
+ * surface — the phone search takeover — reads one definition of what "Unread" or
+ * "Today" means.
+ */
+export function matchesBriefFilters(
+	thread: ThreadRowData,
+	activeFilters: ReadonlySet<BriefFilterId>,
+): boolean {
+	return briefFilterDefs.every(
+		(f) => !activeFilters.has(f.id) || f.match(thread),
+	);
+}
+
+/**
+ * The attribute chips are either this component's own or entirely the
+ * consumer's. A consumer narrowing the same rows on a second surface (the phone
+ * search takeover) holds the set so both surfaces answer to one selection, and
+ * takes every control over it with the set.
+ */
+type BriefFilterControl =
+	| {
+			activeFilters: ReadonlySet<BriefFilterId>;
+			onToggleFilter: (id: BriefFilterId) => void;
+			onClearFilters: () => void;
+	  }
+	| {
+			activeFilters?: never;
+			onToggleFilter?: never;
+			onClearFilters?: never;
+	  };
+
+interface BriefSectionsBaseProps {
 	sections: ThreadSection[];
 	briefCategory?: BriefCategoryFilter;
 	selectedThreadId?: string;
@@ -73,10 +106,17 @@ export interface BriefSectionsProps {
 	sourcesNote?: string;
 	/** Called when the user selects a source/account pill. */
 	onSelectSource?: (id: string) => void;
+	/**
+	 * Drop the filter row and its panel, keeping the rows where they are. See
+	 * `FilterSheetProps`.
+	 */
+	hideChrome?: boolean;
 	/** Seeds the filter panel open on first render (stories / deep links). */
 	defaultExpanded?: boolean;
 }
 
+export type BriefSectionsProps = BriefSectionsBaseProps & BriefFilterControl;
+
 /**
  * The daily-brief list body: category pills (single-select) + attribute chips
  * (additive) + one capped section per category (see {@link BriefSection}). Owns
@@ -95,9 +135,15 @@ export function BriefSections({
 	sources,
 	sourcesNote,
 	onSelectSource,
+	activeFilters,
+	onToggleFilter,
+	onClearFilters,
+	hideChrome,
 	defaultExpanded = false,
 }: BriefSectionsProps) {
-	const [active, setActive] = useState<ReadonlySet<BriefFilterId>>(new Set());
+	const [ownFilters, setOwnFilters] = useState<ReadonlySet<BriefFilterId>>(
+		new Set(),
+	);
 	const [sheetExpanded, setSheetExpanded] = useState(defaultExpanded);
 	const listRef = useRef<HTMLDivElement>(null);
 	useRovingFocus({
@@ -105,8 +151,14 @@ export function BriefSections({
 		itemSelector: LIST_ROW_SELECTOR,
 	});
 
+	const active = activeFilters ?? ownFilters;
+
 	const toggleFilter = (id: BriefFilterId) => {
-		setActive((prev) => {
+		if (onToggleFilter) {
+			onToggleFilter(id);
+			return;
+		}
+		setOwnFilters((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
 			else next.add(id);
@@ -114,10 +166,9 @@ export function BriefSections({
 		});
 	};
 
-	const predicates = briefFilterDefs.filter((f) => active.has(f.id));
 	const matches = (t: ThreadRowData) =>
 		(briefCategory === "all" || t.category === briefCategory) &&
-		predicates.every((f) => f.match(t));
+		matchesBriefFilters(t, active);
 
 	// One section per category only earns its keep at the "all" scope. Narrow to
 	// a single category and the headers are redundant: render a plain flat list.
@@ -142,7 +193,11 @@ export function BriefSections({
 
 	const clearFilters = () => {
 		onSelectBriefCategory?.("all");
-		setActive(new Set());
+		if (onClearFilters) {
+			onClearFilters();
+			return;
+		}
+		setOwnFilters(new Set());
 	};
 
 	const empty = showSections ? filtered.length === 0 : flatRows.length === 0;
@@ -200,6 +255,7 @@ export function BriefSections({
 			onSelectSource={onSelectSource}
 			onToggleFilter={(id) => toggleFilter(id as BriefFilterId)}
 			onClear={clearFilters}
+			hideChrome={hideChrome}
 		>
 			{listBody}
 		</FilterSheet>

package/src/components/dialog.render.test.ts

@@ -24,23 +24,19 @@ describe("Dialog backdrop", () => {
 		assert.doesNotMatch(left, /backdrop-blur/, "left drawer has no blur");
 	});
 
-	it("dims with a plain scrim; left slide-over has no background wash", () => {
-		assert.match(render({}), /bg-canvas\/80/, "center modal keeps a dim scrim");
-		assert.doesNotMatch(
-			render({ anchor: "left" }),
-			/bg-canvas/,
-			"left drawer backdrop is transparent (no wash)",
-		);
+	it("dims what it covers, at every anchor", () => {
+		for (const anchor of ["center", "left", "right"] as const) {
+			assert.match(
+				render(anchor === "center" ? {} : { anchor }),
+				/bg-canvas\/80/,
+				`${anchor} dialog dims the content behind it`,
+			);
+		}
 	});
 
-	it("right slide-over mirrors left: transparent backdrop, pinned right edge", () => {
+	it("right slide-over mirrors left, pinned to the other edge", () => {
 		const right = render({ anchor: "right" });
 		assert.doesNotMatch(right, /backdrop-blur/, "right drawer has no blur");
-		assert.doesNotMatch(
-			right,
-			/bg-canvas\/80/,
-			"right drawer backdrop is transparent (no wash)",
-		);
 		assert.match(right, /justify-end/, "panel is pinned to the right edge");
 		assert.match(right, /border-l/, "right drawer has a left hairline");
 	});

package/src/components/dialog.tsx

@@ -62,7 +62,6 @@ export function Dialog({
 
 	const isLeft = anchor === "left";
 	const isRight = anchor === "right";
-	const isSlideOver = isLeft || isRight;
 
 	return (
 		// biome-ignore lint/a11y/noStaticElementInteractions: outer overlay closes dialog on click; role=presentation lets inner role=dialog own the AT semantics
@@ -78,7 +77,7 @@ export function Dialog({
 			role="presentation"
 			onClick={onClose}
 		>
-			<div className={cn("absolute inset-0", !isSlideOver && "bg-canvas/80")} />
+			<div className="absolute inset-0 bg-canvas/80" />
 			<div
 				ref={dialogRef}
 				role="dialog"

package/src/components/filter-sheet.render.test.ts

@@ -2,7 +2,12 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
-import { FilterSheet, type FilterSheetProps } from "./filter-sheet.js";
+import {
+	FilterPanelProvider,
+	FilterSheet,
+	type FilterSheetProps,
+	FilterToggle,
+} from "./filter-sheet.js";
 
 const categories = [
 	{ id: "all", label: "All", tone: "neutral" as const },
@@ -74,3 +79,45 @@ describe("FilterSheet", () => {
 		assert.doesNotMatch(html, /role="slider"/);
 	});
 });
+
+describe("FilterSheet under a FilterPanelProvider", () => {
+	const underProvider = (overrides: Partial<FilterSheetProps> = {}) =>
+		renderToString(
+			createElement(
+				FilterPanelProvider,
+				null,
+				createElement(FilterToggle),
+				createElement(FilterSheet, {
+					categories,
+					filters,
+					sources,
+					selectedCategory: "all",
+					activeFilters: new Set<string>(),
+					onSelectCategory: () => undefined,
+					onSelectSource: () => undefined,
+					onToggleFilter: () => undefined,
+					onClear: () => undefined,
+					...overrides,
+				}),
+			),
+		);
+
+	it("spends no row of its own on a trigger — the header carries the caret", () => {
+		const html = underProvider();
+		assert.equal(
+			html.match(/aria-label="Expand filters"/g)?.length,
+			1,
+			"exactly one filter control on the page",
+		);
+		assert.doesNotMatch(html, /h-section-row/, "no trigger row");
+	});
+
+	it("starts collapsed even where a nearer component asks to be expanded", () => {
+		const html = underProvider({ expanded: true });
+		assert.doesNotMatch(html, /work@acme\.com/, "panel is closed");
+	});
+
+	it("renders nothing for a toggle with no panel above it", () => {
+		assert.equal(renderToString(createElement(FilterToggle)), "");
+	});
+});

package/src/components/filter-sheet.tsx

@@ -1,4 +1,12 @@
-import { useCallback, useState } from "react";
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
 import { cn } from "../lib/cn.js";
 import { isSelfRowActivation } from "../lib/row-keyboard.js";
 import { Badge } from "./badge.js";
@@ -107,6 +115,92 @@ function Close({ className }: { className?: string }) {
 	);
 }
 
+interface FilterPanelState {
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	/** Whether the sheet under this provider is narrowing the list right now. */
+	active: boolean;
+	setActive: (active: boolean) => void;
+	/** Whether a sheet is mounted for the caret to open. */
+	hasSheet: boolean;
+}
+
+const FilterPanelCtx = createContext<FilterPanelState | null>(null);
+
+/**
+ * Shares one filter panel's open state between a list header and the sheet
+ * under it, which are siblings in the tree. Wrap both: the header renders a
+ * `FilterToggle`, the sheet drops its own trigger row, and the sheet keeps its
+ * filter state exactly where it already lives.
+ *
+ * A view whose body is sometimes something other than the filtered list — a
+ * skeleton, an empty state, an error — says so with `hasSheet`, and the caret
+ * stands down for as long as there is no panel behind it.
+ */
+export function FilterPanelProvider({
+	children,
+	hasSheet = true,
+}: {
+	children: ReactNode;
+	hasSheet?: boolean;
+}) {
+	const [open, setOpen] = useState(false);
+	const [active, setActive] = useState(false);
+	const value = useMemo(
+		() => ({ open, setOpen, active, setActive, hasSheet }),
+		[open, active, hasSheet],
+	);
+	return (
+		<FilterPanelCtx.Provider value={value}>{children}</FilterPanelCtx.Provider>
+	);
+}
+
+/**
+ * Detaches whatever it wraps from an enclosing `FilterPanelProvider`. A
+ * full-screen surface that covers the list — the phone search takeover — carries
+ * its own filter chrome, and the caret it would otherwise borrow belongs to a
+ * header that is not on screen.
+ */
+export function FilterPanelBoundary({ children }: { children: ReactNode }) {
+	return (
+		<FilterPanelCtx.Provider value={null}>{children}</FilterPanelCtx.Provider>
+	);
+}
+
+/**
+ * The filter caret, for a list header to render beside its unread count. It is
+ * the view's whole filter affordance; the panel it opens still belongs to the
+ * sheet, inline above the rows.
+ *
+ * Renders nothing outside a `FilterPanelProvider`, and nothing while that
+ * provider reports no sheet — there is no panel to open.
+ */
+export function FilterToggle() {
+	const panel = useContext(FilterPanelCtx);
+	if (!panel?.hasSheet) return null;
+	const { open, active, setOpen } = panel;
+	return (
+		<button
+			type="button"
+			onClick={() => setOpen(!open)}
+			aria-expanded={open}
+			aria-label={open ? "Collapse filters" : "Expand filters"}
+			title="Filters"
+			className={cn(
+				"flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-surface-sunken",
+				active ? "text-accent-2" : "text-fg-subtle hover:text-fg-muted",
+			)}
+		>
+			<ChevronDown
+				className={cn(
+					"size-3 transition-transform duration-200",
+					open ? "rotate-180" : "rotate-0",
+				)}
+			/>
+		</button>
+	);
+}
+
 export function FilterSheet({
 	categories,
 	filters,
@@ -123,17 +217,21 @@ export function FilterSheet({
 	hideChrome = false,
 	children,
 }: FilterSheetProps) {
+	const panel = useContext(FilterPanelCtx);
 	const isControlled = expandedProp !== undefined;
 	const [internalOpen, setInternalOpen] = useState(false);
 
-	const open = isControlled ? expandedProp : internalOpen;
+	// A provider is the composition owner opting the caret into a header above
+	// this sheet, so it outranks a nearer component's own expanded state.
+	const open = panel?.open ?? (isControlled ? expandedProp : internalOpen);
 
 	const setOpen = useCallback(
 		(next: boolean) => {
 			if (!isControlled) setInternalOpen(next);
+			panel?.setOpen(next);
 			onExpandedChange?.(next);
 		},
-		[isControlled, onExpandedChange],
+		[isControlled, onExpandedChange, panel],
 	);
 
 	const defaultCategory = categories[0];
@@ -150,6 +248,13 @@ export function FilterSheet({
 		activeFilters.size > 0 ||
 		(!isDefaultSource && !!activeSource);
 
+	const setPanelActive = panel?.setActive;
+	useEffect(() => {
+		if (!setPanelActive) return;
+		setPanelActive(hasActive);
+		return () => setPanelActive(false);
+	}, [hasActive, setPanelActive]);
+
 	const clearSource = useCallback(() => {
 		if (defaultSource) onSelectSource?.(defaultSource.id);
 	}, [defaultSource, onSelectSource]);
@@ -277,7 +382,9 @@ export function FilterSheet({
 			{/* The toggle is a div-button (not a real <button>) so the Clear
 			    control can be a real nested <button> without invalid
 			    button-in-button nesting. */}
-			{!hideChrome && (
+			{/* A `FilterPanelProvider` means the list header carries the caret, so
+			    the sheet spends no row of its own on one. */}
+			{!hideChrome && !panel && (
 				// biome-ignore lint/a11y/useSemanticElements: nested <button> inside would be invalid button-in-button
 				<div
 					role="button"

package/src/components/mail-header.render.test.ts

@@ -28,9 +28,20 @@ describe("MailHeader", () => {
 		assert.match(html, /15,338 unread/);
 	});
 
-	it("renders the menu (hamburger) control", () => {
-		assert.match(render(), /aria-label="Menu"/);
-		assert.match(render({ isDesktop: true }), /aria-label="Menu"/);
+	it("renders the menu (hamburger) control when it has somewhere to go", () => {
+		const onMenuClick = () => undefined;
+		assert.match(render({ onMenuClick }), /aria-label="Menu"/);
+		assert.match(render({ onMenuClick, isDesktop: true }), /aria-label="Menu"/);
+	});
+
+	it("drops the hamburger where the nav is a pane, rather than leaving a dead control", () => {
+		assert.doesNotMatch(render(), /aria-label="Menu"/);
+		assert.doesNotMatch(render({ isDesktop: true }), /aria-label="Menu"/);
+	});
+
+	it("sits on the pane-header datum once the top bar carries search", () => {
+		assert.match(render({ showSearch: false }), /h-pane-header/);
+		assert.match(render(), /h-section-row/);
 	});
 
 	it("does not render an account chip row (accounts live in the filter / nav)", () => {

package/src/components/mail-header.tsx

@@ -1,4 +1,6 @@
 import { Menu, Search, X } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
 import { SearchBar } from "./search-bar.js";
 import type { SearchFieldSuggest } from "./search-chip-input.js";
@@ -29,6 +31,12 @@ export interface MailHeaderProps {
 	 * the page never mounts two search inputs competing for the same focus.
 	 */
 	showSearch?: boolean;
+	/**
+	 * The view's filter control, rendered beside the unread count — a
+	 * `FilterToggle` over a `FilterSheet` under the same `FilterPanelProvider`.
+	 * The header row already exists, so the filter costs the list no second row.
+	 */
+	filterToggle?: ReactNode;
 	/**
 	 * Completions for what is being typed; see `SearchChipInput`. The list is
 	 * not rendered here — the header is a fixed-height row, so the consumer
@@ -59,6 +67,7 @@ export function MailHeader({
 	searchOpen,
 	onSearchOpenChange,
 	showSearch = true,
+	filterToggle,
 	searchSuggest,
 }: MailHeaderProps) {
 	const unreadLabel = `${unreadCount.toLocaleString()} unread`;
@@ -79,38 +88,46 @@ export function MailHeader({
 		/>
 	);
 
-	const menuButton = (
+	// Without its own field the row is a plain title bar and sits on the
+	// pane-header datum, so the control shrinks with it. Carrying the field means
+	// carrying touch targets too, which need the taller row.
+	const menuButton = onMenuClick && (
 		<Button
 			variant="ghost"
-			icon={<Menu className="size-5" />}
+			size={showSearch ? undefined : "sm"}
+			icon={<Menu className={showSearch ? "size-5" : "size-4"} />}
 			onClick={onMenuClick}
 			aria-label="Menu"
-			className="min-h-11 min-w-11 shrink-0 px-0"
+			className={
+				showSearch ? "min-h-11 min-w-11 shrink-0 px-0" : "-ml-1 shrink-0"
+			}
 		/>
 	);
 
+	const titleRow = (
+		<>
+			{menuButton}
+			<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
+				{title}
+			</h1>
+			<span className="shrink-0 text-2xs text-fg-subtle">{unreadLabel}</span>
+			{filterToggle}
+		</>
+	);
+
 	return (
 		<header className="flex shrink-0 flex-col bg-canvas">
-			<div className="flex h-12 items-center gap-2 px-row-inset">
+			<div
+				className={cn(
+					"flex items-center gap-2 border-b border-line px-row-inset",
+					showSearch ? "h-section-row" : "h-pane-header",
+				)}
+			>
 				{!showSearch ? (
-					<>
-						{menuButton}
-						<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
-							{title}
-						</h1>
-						<span className="shrink-0 text-2xs text-fg-subtle">
-							{unreadLabel}
-						</span>
-					</>
+					titleRow
 				) : isDesktop ? (
 					<>
-						{menuButton}
-						<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
-							{title}
-						</h1>
-						<span className="shrink-0 text-2xs text-fg-subtle">
-							{unreadLabel}
-						</span>
+						{titleRow}
 						<div className="w-64 max-w-[40%] shrink-0">
 							{renderSearchBar(true)}
 						</div>
@@ -128,13 +145,7 @@ export function MailHeader({
 					</div>
 				) : (
 					<>
-						{menuButton}
-						<h1 className="min-w-0 flex-1 truncate text-sm font-semibold text-fg">
-							{title}
-						</h1>
-						<span className="shrink-0 text-2xs text-fg-subtle">
-							{unreadLabel}
-						</span>
+						{titleRow}
 						<Button
 							variant="ghost"
 							icon={<Search className="size-5" />}

package/src/components/message-list-pane.tsx

@@ -1,6 +1,6 @@
 import { Menu } from "lucide-react";
 import type { ReactNode } from "react";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { LIST_ROW_SELECTOR, useRovingFocus } from "../lib/roving-focus.js";
 import type { AppShellProps, TouchSeed } from "./app-shell-types.js";
 import { BriefSections } from "./brief-sections.js";
@@ -12,7 +12,12 @@ import {
 	type MessageListFilter,
 	MessageListLoading,
 } from "./message-list-state.js";
-import { ComfortableRow, CompactRow } from "./message-row.js";
+import {
+	type BriefRowComponent,
+	ComfortableRow,
+	CompactRow,
+	type RowToggleEvent,
+} from "./message-row.js";
 import { SelectionTopBar } from "./selection-top-bar.js";
 import type { SwipePeek } from "./swipeable-row.js";
 import { TouchListBody } from "./touch-list.js";
@@ -120,8 +125,10 @@ export function MessageListPane({
 	const [selectionMode, setSelectionMode] = useState(
 		initialTouchState === "selection",
 	);
+	// The seed is a touch-triage state; desktop starts unselected and gets there
+	// through the row checkboxes.
 	const [checkedIds, setCheckedIds] = useState<ReadonlySet<string>>(() =>
-		initialTouchState === "selection"
+		initialTouchState === "selection" && !isDesktop
 			? new Set(seededRows.slice(0, 2).map((t) => t.id))
 			: new Set(),
 	);
@@ -153,7 +160,7 @@ export function MessageListPane({
 				? "leading"
 				: undefined;
 
-	const toggleCheck = (id: string) => {
+	const toggleCheck = useCallback((id: string) => {
 		setCheckedIds((prev) => {
 			const next = new Set(prev);
 			if (next.has(id)) next.delete(id);
@@ -161,7 +168,7 @@ export function MessageListPane({
 			if (next.size === 0) setSelectionMode(false);
 			return next;
 		});
-	};
+	}, []);
 	const enterSelection = (id: string) => {
 		setSelectionMode(true);
 		setCheckedIds(new Set([id]));
@@ -183,10 +190,48 @@ export function MessageListPane({
 		setTimeout(() => setRefreshing(false), 1400);
 	};
 
+	// Desktop rows carry the checkbox the app's own rows have: it takes the
+	// avatar's place on hover, and checking one puts the pane in selection.
+	const desktopSelectable = isDesktop && !selectionBar && listState === "ready";
+	const rowSelection = useCallback(
+		(id: string) =>
+			desktopSelectable
+				? {
+						checked: checkedIds.has(id),
+						onToggle: (event: RowToggleEvent) => {
+							event.preventDefault();
+							event.stopPropagation();
+							toggleCheck(id);
+						},
+					}
+				: undefined,
+		[desktopSelectable, checkedIds, toggleCheck],
+	);
+
+	// The brief drives rows through a `BriefRowComponent`, whose props carry no
+	// selection — a consumer's own row (the web client's) wires its checkbox
+	// itself. Binding it here keeps the kit's rows selectable there too.
+	const BriefRow: BriefRowComponent = useCallback(
+		(props) => <Row {...props} selection={rowSelection(props.thread.id)} />,
+		[Row, rowSelection],
+	);
+
+	const selectableIds = seededRows.map((thread) => thread.id);
+	const allChecked =
+		selectableIds.length > 0 && selectableIds.every((id) => checkedIds.has(id));
+	const selectAll = {
+		checked: allChecked,
+		indeterminate: checkedIds.size > 0 && !allChecked,
+		onChange: () =>
+			setCheckedIds(allChecked ? new Set() : new Set(selectableIds)),
+	};
+
 	// When the caller supplies a selectionBar slot, it owns selection state.
-	// Fall back to the built-in touch-triage bar only when no external bar is given.
+	// Fall back to the built-in bar only when no external bar is given.
 	const inBuiltinSelection =
-		!selectionBar && touchTriage && selectionMode && checkedIds.size > 0;
+		!selectionBar &&
+		checkedIds.size > 0 &&
+		(desktopSelectable || (touchTriage && selectionMode));
 
 	return (
 		<section className="relative flex h-full w-full flex-col bg-surface">
@@ -195,6 +240,7 @@ export function MessageListPane({
 					<SelectionTopBar
 						title={listTitle}
 						count={checkedIds.size}
+						selectAll={desktopSelectable ? selectAll : undefined}
 						onCancel={cancelSelection}
 						onMarkRead={markCheckedRead}
 						onDelete={trashChecked}
@@ -246,7 +292,7 @@ export function MessageListPane({
 					sections={sections}
 					briefCategory={briefCategory}
 					selectedThreadId={selectedThreadId}
-					Row={Row}
+					Row={BriefRow}
 					onSelectThread={onSelectThread}
 					onSelectBriefCategory={onSelectBriefCategory}
 				/>
@@ -291,6 +337,7 @@ export function MessageListPane({
 										key={thread.id}
 										thread={thread}
 										active={thread.id === selectedThreadId}
+										selection={rowSelection(thread.id)}
 										onClick={() => onSelectThread?.(thread.id)}
 									/>
 								))}

package/src/components/mobile-search-view.render.test.ts

@@ -2,6 +2,7 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
+import { FilterPanelProvider } from "./filter-sheet.js";
 import { MobileSearchView } from "./mobile-search-view.js";
 import type { SearchResult } from "./search-result-row.js";
 
@@ -66,6 +67,26 @@ describe("MobileSearchView filter chrome", () => {
 		);
 		assert.match(html, /Expand filters/);
 	});
+
+	// The takeover covers the list whose header carries the caret, so it cannot
+	// borrow that caret: it renders over the header, not under it. Without the
+	// boundary the sheet reads the list's panel and drops its own trigger row,
+	// leaving the takeover with no way to open its filters at all.
+	it("keeps its own filter row over a list that has a filter panel", () => {
+		const html = renderToString(
+			createElement(
+				FilterPanelProvider,
+				null,
+				createElement(MobileSearchView, {
+					...base,
+					value: "",
+					sections: [],
+					filter,
+				}),
+			),
+		);
+		assert.match(html, /Expand filters/);
+	});
 });
 
 describe("MobileSearchView search scope", () => {

package/src/components/mobile-search-view.tsx

@@ -1,7 +1,11 @@
 import { X } from "lucide-react";
 import type { ReactNode } from "react";
 import { Button } from "./button.js";
-import { FilterSheet, type FilterSheetProps } from "./filter-sheet.js";
+import {
+	FilterPanelBoundary,
+	FilterSheet,
+	type FilterSheetProps,
+} from "./filter-sheet.js";
 import { SearchBar } from "./search-bar.js";
 import type { SearchChip, SearchFieldSuggest } from "./search-chip-input.js";
 import type { SearchResult } from "./search-result-row.js";
@@ -146,7 +150,9 @@ export function MobileSearchView({
 			{suggestList}
 
 			{filter && value.trim().length === 0 ? (
-				<FilterSheet {...filter}>{body}</FilterSheet>
+				<FilterPanelBoundary>
+					<FilterSheet {...filter}>{body}</FilterSheet>
+				</FilterPanelBoundary>
 			) : (
 				<div className="flex-1 overflow-y-auto">{body}</div>
 			)}

package/src/components/nav-sidebar.keyboard.test.ts

@@ -112,14 +112,13 @@ describe("NavSidebar arrow-key traversal", () => {
 		assert.equal(dom.window.document.activeElement, items[1]);
 	});
 
-	it("End reaches the Settings footer and Home returns to the top", () => {
+	it("End reaches the last mailbox and Home returns to the top", () => {
 		mount();
 		const items = navItems();
 		act(() => items[0]?.focus());
 		act(() => pressKey(items[0] as Element, "End"));
 		const last = items[items.length - 1];
 		assert.equal(dom.window.document.activeElement, last);
-		assert.match(last?.textContent ?? "", /Settings/);
 
 		act(() => pressKey(last as Element, "Home"));
 		assert.equal(dom.window.document.activeElement, items[0]);

package/src/components/nav-sidebar.render.test.ts

@@ -107,41 +107,19 @@ describe("NavSidebar", () => {
 		assert.match(html, /text-accent-2/);
 	});
 
-	it("pins a Settings footer on the desktop variant", () => {
-		const html = renderToString(
-			createElement(NavSidebar, {
-				accounts,
-				selectedNavId: "personal-inbox",
-				onSelectNav: () => undefined,
-			}),
-		);
-		assert.match(html, /Settings/);
-		assert.match(html, /lucide-settings/);
-	});
-
-	it("renders the Settings footer as an anchor via linkComponent", () => {
-		const html = renderToString(
-			createElement(NavSidebar, {
-				accounts,
-				selectedNavId: "personal-inbox",
-				onSelectNav: () => undefined,
-				linkComponent: hrefLink,
-			}),
-		);
-		assert.match(html, /<a href="\/mail\/settings"/);
-	});
-
-	it("omits the Settings footer on the drawer variant", () => {
-		const html = renderToString(
-			createElement(NavSidebar, {
-				accounts,
-				selectedNavId: "personal-inbox",
-				onSelectNav: () => undefined,
-				variant: "drawer",
-			}),
-		);
-		assert.doesNotMatch(html, /Settings/);
-		assert.doesNotMatch(html, /lucide-settings/);
+	it("carries no Settings entry — it lives in the top bar, by the avatar", () => {
+		for (const variant of [undefined, "drawer" as const]) {
+			const html = renderToString(
+				createElement(NavSidebar, {
+					accounts,
+					selectedNavId: "personal-inbox",
+					onSelectNav: () => undefined,
+					variant,
+				}),
+			);
+			assert.doesNotMatch(html, /Settings/);
+			assert.doesNotMatch(html, /lucide-settings/);
+		}
 	});
 
 	it("renders navigation entries as anchors via linkComponent", () => {

package/src/components/nav-sidebar.tsx

@@ -12,7 +12,6 @@ import {
 	Mails,
 	Search,
 	Send,
-	Settings,
 	Sparkles,
 	Star,
 	Trash2,
@@ -648,21 +647,7 @@ export function NavSidebar({
 			ref={containerRef}
 			className="flex h-full w-full flex-col bg-surface-sunken"
 		>
-			{/* no toolbar over the sidebar (Apple Mail-style): nav content
-			    starts at the top; the datum bar exists only over the
-			    list/reading/intelligence panes */}
 			{navBody}
-			<div className="border-t border-line px-2 py-2">
-				<NavItem
-					navId="settings"
-					linkComponent={linkComponent}
-					icon={<Settings className="size-4" />}
-					label="Settings"
-					ariaLabel="Settings"
-					active={selectedNavId === "settings"}
-					onClick={() => onSelectNav?.("settings")}
-				/>
-			</div>
 		</aside>
 	);
 }

package/src/components/nav-toggle-button.tsx

@@ -0,0 +1,31 @@
+/**
+ * NavToggleButton — the top bar's control over the nav column.
+ *
+ * One button for both tiers: it collapses and restores the nav pane where the
+ * nav is a column, and opens the slide-over where it is not. It sits in the top
+ * bar's leading slot, over the column it acts on, which is why no pane header
+ * carries a hamburger of its own at desktop widths.
+ *
+ * Renders nothing outside an `AppShellSlotted` — there is no nav to act on.
+ */
+import { Menu } from "lucide-react";
+import { useAppShellLayout } from "./app-shell-slotted.js";
+import { Button } from "./button.js";
+
+export function NavToggleButton() {
+	const layout = useAppShellLayout();
+	if (!layout) return null;
+	const shown = layout.showNavPane ? !layout.navCollapsed : false;
+	return (
+		<Button
+			variant="ghost"
+			size="sm"
+			icon={<Menu className="size-4" />}
+			onClick={layout.toggleNav}
+			aria-label={shown ? "Hide folders" : "Show folders"}
+			aria-expanded={shown}
+			title="Folders"
+			className="shrink-0"
+		/>
+	);
+}

package/src/index.ts

@@ -86,8 +86,10 @@ export {
 	SECTION_ROW_CAP,
 } from "./components/brief-section.js";
 export {
+	type BriefFilterId,
 	BriefSections,
 	type BriefSectionsProps,
+	matchesBriefFilters,
 } from "./components/brief-sections.js";
 export {
 	Button,
@@ -188,11 +190,13 @@ export {
 	type FilterRuleEditorProps,
 } from "./components/filter-rule-editor.js";
 export {
+	FilterPanelProvider,
 	FilterSheet,
 	type FilterSheetCategory,
 	type FilterSheetFilter,
 	type FilterSheetProps,
 	type FilterSheetSource,
+	FilterToggle,
 } from "./components/filter-sheet.js";
 export {
 	FolderManageActions,
@@ -325,6 +329,7 @@ export {
 	NavSidebar,
 	type NavSidebarProps,
 } from "./components/nav-sidebar.js";
+export { NavToggleButton } from "./components/nav-toggle-button.js";
 export {
 	NewFolderAction,
 	type NewFolderActionProps,