@remit/ui 0.0.88 → 0.0.90

package/package.json

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

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

@@ -259,7 +259,7 @@ export function AppShellSlotted({
 		<AppShellLayoutCtx.Provider value={layoutCtx}>
 			<div
 				ref={containerRef}
-				className="@container flex h-dvh w-full flex-col overflow-hidden bg-canvas font-sans text-fg"
+				className="safe-area-frame @container flex h-dvh w-full flex-col overflow-hidden bg-canvas font-sans text-fg"
 			>
 				{isLoading && skeleton ? (
 					skeleton

package/src/components/app-shell-types.ts

@@ -124,7 +124,15 @@ export function useContainerWidth(
 			if (entry) setWidth(entry.contentRect.width);
 		});
 		observer.observe(el);
-		setWidth(el.getBoundingClientRect().width);
+		// The content box, matching what the observer reports above: the shell
+		// root carries the device safe-area insets as padding and the panes are
+		// laid out in what is left, so the first synchronous measure and every
+		// later one have to be the same box.
+		const style = getComputedStyle(el);
+		const horizontalPadding =
+			Number.parseFloat(style.paddingLeft) +
+			Number.parseFloat(style.paddingRight);
+		setWidth(el.clientWidth - horizontalPadding);
 		return () => observer.disconnect();
 	}, []);
 	return [ref, width];

package/src/components/auth-card.tsx

@@ -18,7 +18,7 @@ export function AuthCard({ children, className }: AuthCardProps) {
 		<div
 			data-auth-page
 			className={cn(
-				"flex min-h-dvh w-full flex-col items-center justify-center overflow-y-auto bg-surface-sunken px-4 py-8 text-fg",
+				"flex min-h-dvh w-full flex-col items-center justify-center overflow-y-auto bg-surface-sunken pb-[max(2rem,env(safe-area-inset-bottom,0px))] pl-[max(1rem,env(safe-area-inset-left,0px))] pr-[max(1rem,env(safe-area-inset-right,0px))] pt-[max(2rem,env(safe-area-inset-top,0px))] text-fg",
 				className,
 			)}
 			style={{

package/src/components/bottom-sheet.tsx

@@ -119,7 +119,7 @@ export function BottomSheet({
 			/>
 			<div
 				ref={sheetRef}
-				className="absolute inset-x-0 bottom-0 flex max-h-[92%] flex-col rounded-t-3xl border-t border-line bg-surface shadow-2xl shadow-black/30"
+				className="absolute inset-x-0 bottom-0 flex max-h-[92%] flex-col rounded-t-3xl border-t border-line bg-surface pb-[env(safe-area-inset-bottom,0px)] shadow-2xl shadow-black/30"
 				style={{ transform: `translateY(${offset}px)`, transition }}
 			>
 				<div

package/src/components/dialog.tsx

@@ -85,10 +85,12 @@ export function Dialog({
 				aria-labelledby="dialog-title"
 				className={cn(
 					"relative z-10 overflow-hidden border-line bg-surface shadow-xl",
+					// The edge-anchored panels reach the device edges; the centered
+					// card floats clear of them.
 					isLeft
-						? "h-full w-72 max-w-[85vw] border-r"
+						? "safe-area-frame h-full w-72 max-w-[85vw] border-r"
 						: isRight
-							? "h-full w-[80vw] max-w-[320px] border-l"
+							? "safe-area-frame h-full w-[80vw] max-w-[320px] border-l"
 							: "w-full max-w-lg rounded-md border",
 					className,
 				)}

package/src/components/mobile-message-action-bar.render.test.ts

@@ -4,7 +4,16 @@ import { createElement } from "react";
 import { renderToString } from "react-dom/server";
 import { MobileMessageActionBar } from "./mobile-message-action-bar.js";
 
-const base = { hasThread: true } as const;
+// A wired host, as both real callers are: the bar offers only the verbs it was
+// given an answer for.
+const base = {
+	hasThread: true,
+	onReply: () => undefined,
+	onReplyAll: () => undefined,
+	onForward: () => undefined,
+	onToggleStar: () => undefined,
+	onDelete: () => undefined,
+} as const;
 
 const countMatches = (html: string, needle: string) =>
 	html.split(needle).length - 1;
@@ -64,17 +73,57 @@ describe("MobileMessageActionBar", () => {
 
 	it("renders the per-message reply verbs and no intelligence toggle", () => {
 		const html = renderToString(createElement(MobileMessageActionBar, base));
-		assert.match(html, /aria-label="Reply"/);
-		assert.match(html, /aria-label="Reply all"/);
-		assert.match(html, /aria-label="Forward"/);
+		assert.equal(countMatches(html, 'aria-label="Reply"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Reply all"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Forward"'), 1);
 		assert.doesNotMatch(html, /intelligence panel/);
 	});
 
-	it("keeps verbs pressable rather than disabling them", () => {
+	it("drops a verb the host supplies no handler for", () => {
+		const html = renderToString(
+			createElement(MobileMessageActionBar, {
+				hasThread: true,
+				onReply: () => undefined,
+			}),
+		);
+		assert.equal(countMatches(html, 'aria-label="Reply"'), 1);
+		assert.doesNotMatch(html, /aria-label="Reply all"/);
+		assert.doesNotMatch(html, /aria-label="Forward"/);
+	});
+
+	it("never disables a verb it offers", () => {
 		const html = renderToString(createElement(MobileMessageActionBar, base));
+		assert.equal(countMatches(html, 'aria-label="Reply"'), 1);
 		assert.doesNotMatch(html, /disabled=""/);
 	});
 
+	it("keeps the host's verbs pressable with no message open", () => {
+		const html = renderToString(
+			createElement(MobileMessageActionBar, {
+				hasThread: false,
+				onReply: () => undefined,
+				onReplyAll: () => undefined,
+				onForward: () => undefined,
+			}),
+		);
+		assert.equal(countMatches(html, 'aria-label="Reply"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Reply all"'), 1);
+		assert.equal(countMatches(html, 'aria-label="Forward"'), 1);
+		assert.doesNotMatch(html, /disabled=""/);
+	});
+
+	it("drops an unhandled verb with no message open too", () => {
+		const html = renderToString(
+			createElement(MobileMessageActionBar, {
+				hasThread: false,
+				onReply: () => undefined,
+			}),
+		);
+		assert.equal(countMatches(html, 'aria-label="Reply"'), 1);
+		assert.doesNotMatch(html, /aria-label="Reply all"/);
+		assert.doesNotMatch(html, /aria-label="Forward"/);
+	});
+
 	it("surfaces the unavailable hint when no message is open", () => {
 		const html = renderToString(
 			createElement(MobileMessageActionBar, {

package/src/components/mobile-message-action-bar.stories.tsx

@@ -37,6 +37,7 @@ const meta: Meta<typeof MobileMessageActionBar> = {
 		onToggleStar: () => undefined,
 		onDelete: () => undefined,
 		onToggleRead: () => undefined,
+		onUnavailable: () => undefined,
 	},
 };
 export default meta;
@@ -47,6 +48,12 @@ export const Default: Story = {};
 
 export const Starred: Story = { args: { isStarred: true } };
 
+/** A host that cannot answer a verb omits its handler and the bar drops the
+ *  button, rather than offering one that reacts to nothing. */
+export const WithoutForward: Story = {
+	args: { onForward: undefined },
+};
+
 /** No message open: the verbs no-op and the bar surfaces a one-line reason
  *  instead of disabling. */
 export const NoMessageOpen: Story = {
@@ -55,3 +62,14 @@ export const NoMessageOpen: Story = {
 		unavailableHint: "Open a message first",
 	},
 };
+
+/** The two rules together: the host owns reply but not forward, and no message
+ *  is open. Reply stays up and explains itself on press; forward is not there
+ *  to press. Whether a message is open never decides which verbs exist. */
+export const NoMessageOpenWithoutForward: Story = {
+	args: {
+		hasThread: false,
+		unavailableHint: "Open a message first",
+		onForward: undefined,
+	},
+};

package/src/components/mobile-message-action-bar.tsx

@@ -24,8 +24,7 @@ export interface MobileMessageActionBarProps {
 	/** Whether a message is open. Gates the verbs (never disables). */
 	hasThread: boolean;
 	/* ---- Reply verbs ----
-	 * Per-message: replying targets the message this bar belongs to. Omit a
-	 * handler to drop that verb. */
+	 * Per-message: replying targets the message this bar belongs to. */
 	onReply?: () => void;
 	onReplyAll?: () => void;
 	onForward?: () => void;
@@ -59,8 +58,13 @@ const TOUCH = "min-h-11 min-w-11 px-0";
  * repeats it. Intelligence is not here: it lives once in the top app bar and
  * reflects the active message. No archive either — Remit is IMAP-backed and
  * IMAP has no archive concept. Built from the kit `Button`, `PopoverMenu` and a
- * caller-supplied `moveSlot`; buttons stay pressable with no message open and
- * call `onUnavailable` rather than greying out.
+ * caller-supplied `moveSlot`.
+ *
+ * One rule for what the bar shows, both halves of it: a verb the host has left
+ * unhandled is not part of this surface and is not offered, and a verb the host
+ * owns stays pressable with no message open and explains itself through
+ * `onUnavailable` rather than greying out. What the bar never does is render a
+ * control that answers nothing.
  */
 export function MobileMessageActionBar({
 	hasThread,
@@ -104,58 +108,71 @@ export function MobileMessageActionBar({
 	return (
 		<div className={cn("relative", className)}>
 			<div className="flex h-12 shrink-0 items-center gap-0.5 bg-canvas px-1">
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={<Reply className="size-5" />}
-					onClick={act("reply", onReply)}
-					aria-label="Reply"
-					title="Reply"
-					className={TOUCH}
-				/>
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={<ReplyAll className="size-5" />}
-					onClick={act("replyAll", onReplyAll)}
-					aria-label="Reply all"
-					title="Reply all"
-					className={TOUCH}
-				/>
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={<Forward className="size-5" />}
-					onClick={act("forward", onForward)}
-					aria-label="Forward"
-					title="Forward"
-					className={TOUCH}
-				/>
+				{onReply && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Reply className="size-5" />}
+						onClick={act("reply", onReply)}
+						aria-label="Reply"
+						title="Reply"
+						className={TOUCH}
+					/>
+				)}
+				{onReplyAll && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<ReplyAll className="size-5" />}
+						onClick={act("replyAll", onReplyAll)}
+						aria-label="Reply all"
+						title="Reply all"
+						className={TOUCH}
+					/>
+				)}
+				{onForward && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Forward className="size-5" />}
+						onClick={act("forward", onForward)}
+						aria-label="Forward"
+						title="Forward"
+						className={TOUCH}
+					/>
+				)}
 				<div className="flex-1" />
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={
-						<Star
-							className={cn("size-5", isStarred && "fill-warning text-warning")}
-						/>
-					}
-					onClick={act("star", onToggleStar)}
-					aria-label={isStarred ? "Unstar" : "Star"}
-					aria-pressed={isStarred}
-					title={isStarred ? "Unstar" : "Star"}
-					className={TOUCH}
-				/>
+				{onToggleStar && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={
+							<Star
+								className={cn(
+									"size-5",
+									isStarred && "fill-warning text-warning",
+								)}
+							/>
+						}
+						onClick={act("star", onToggleStar)}
+						aria-label={isStarred ? "Unstar" : "Star"}
+						aria-pressed={isStarred}
+						title={isStarred ? "Unstar" : "Star"}
+						className={TOUCH}
+					/>
+				)}
 				{moveSlot}
-				<Button
-					variant="ghost"
-					size="sm"
-					icon={<Trash2 className="size-5" />}
-					onClick={act("delete", onDelete)}
-					aria-label="Move to Trash"
-					title="Move to Trash"
-					className={TOUCH}
-				/>
+				{onDelete && (
+					<Button
+						variant="ghost"
+						size="sm"
+						icon={<Trash2 className="size-5" />}
+						onClick={act("delete", onDelete)}
+						aria-label="Move to Trash"
+						title="Move to Trash"
+						className={TOUCH}
+					/>
+				)}
 				<PopoverMenu
 					triggerLabel="More actions"
 					items={[...readItem, ...overflowItems]}

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

@@ -82,7 +82,16 @@ describe("MobileReadingPane", () => {
 
 	it("shows exactly one per-message action bar — the expanded message's", () => {
 		const html = renderToString(
-			createElement(MobileReadingPane, { thread, onBack: () => undefined }),
+			createElement(MobileReadingPane, {
+				thread,
+				onBack: () => undefined,
+				// A wired host, as the app is: an unhandled verb is not offered.
+				actions: {
+					onReply: () => undefined,
+					onToggleStar: () => undefined,
+					onDelete: () => undefined,
+				},
+			}),
 		);
 		// One expanded message ⇒ one Reply / Flag / Trash cluster; the two
 		// collapsed rows carry no bar.
@@ -95,8 +104,13 @@ describe("MobileReadingPane", () => {
 		// The desktop/legacy footer carries a "Reply (r)" title; the per-message
 		// bar titles are plain "Reply". Assert the footer affordance is absent.
 		const html = renderToString(
-			createElement(MobileReadingPane, { thread, onBack: () => undefined }),
+			createElement(MobileReadingPane, {
+				thread,
+				onBack: () => undefined,
+				actions: { onReply: () => undefined },
+			}),
 		);
+		assert.match(html, /title="Reply"/);
 		assert.doesNotMatch(html, /title="Reply \(r\)"/);
 	});
 });

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

@@ -11,6 +11,10 @@ import {
 import { MobileMessageActionBar } from "./mobile-message-action-bar.js";
 import { CollapsedMessage, ExpandedMessage } from "./reading-pane.js";
 
+/**
+ * What the host answers for a message. A verb left out is not offered on the
+ * message's action bar rather than rendered against nothing.
+ */
 export interface MobileReadingMessageActions {
 	/** Expand / collapse a message row. */
 	onToggleExpand?: (id: string) => void;

package/src/components/pull-to-refresh.tsx

@@ -1,6 +1,7 @@
 import type { ReactElement } from "react";
 import { useEffect, useState } from "react";
 import ReactPullToRefresh from "react-simple-pull-to-refresh";
+import { DESKTOP_MEDIA_QUERY } from "../lib/layout-breakpoints.js";
 
 export interface PullToRefreshProps {
 	children: ReactElement;
@@ -28,9 +29,9 @@ const useMatchMedia = (query: string): boolean => {
 
 /**
  * Wraps a scrollable list with a pull-to-refresh gesture on mobile. Below the
- * desktop breakpoint (Tailwind `lg`, 1024px) a downward pull at the top of the
- * list fires `onRefresh`; at desktop widths the gesture is inert and children
- * render directly, since there is no touch list to pull.
+ * desktop breakpoint (Tailwind `lg`) a downward pull at the top of the list
+ * fires `onRefresh`; at desktop the gesture is inert and children render
+ * directly, since there is no touch list to pull.
  *
  * Presentational: the caller owns what refreshing means via `onRefresh` and
  * surfaces in-flight state through `isRefreshing`.
@@ -40,7 +41,7 @@ export const PullToRefresh = ({
 	onRefresh,
 	isRefreshing,
 }: PullToRefreshProps): ReactElement => {
-	const isDesktop = useMatchMedia("(min-width: 1024px)");
+	const isDesktop = useMatchMedia(DESKTOP_MEDIA_QUERY);
 
 	if (isDesktop) {
 		return children;

package/src/components/selection-wizard.tsx

@@ -148,7 +148,7 @@ export function WizardScreen({
 			className="fixed inset-0 z-50 flex flex-col font-sans text-fg md:items-center md:justify-center md:bg-black/40 md:p-6"
 		>
 			<div className="flex min-h-0 w-full flex-1 flex-col bg-canvas md:h-[45rem] md:max-h-[calc(100dvh-3rem)] md:w-[35rem] md:max-w-[calc(100vw-3rem)] md:flex-none md:overflow-hidden md:rounded-xl md:border md:border-line md:shadow-lg">
-				<header className="shrink-0 border-b border-line px-3 pb-2 pt-3">
+				<header className="shrink-0 border-b border-line px-3 pb-2 pt-[calc(0.75rem+env(safe-area-inset-top,0px))] md:pt-3">
 					<div className="flex items-center gap-1">
 						<button
 							type="button"

package/src/components/settings-screen.tsx

@@ -102,7 +102,7 @@ export function SettingsShell({
 	);
 
 	return (
-		<div className="flex h-dvh w-full overflow-hidden bg-canvas font-sans text-fg">
+		<div className="safe-area-frame flex h-dvh w-full overflow-hidden bg-canvas font-sans text-fg">
 			{/* Desktop nav rail */}
 			<aside className="hidden w-60 shrink-0 flex-col border-r border-line bg-surface-sunken lg:flex">
 				<div className="flex h-pane-header shrink-0 items-center border-b border-line px-2">
@@ -127,7 +127,7 @@ export function SettingsShell({
 						className="absolute inset-0 bg-canvas/60"
 						onClick={() => setNavOpen(false)}
 					/>
-					<aside className="relative flex w-72 max-w-[85%] flex-col border-r border-line bg-surface-sunken">
+					<aside className="safe-area-frame relative flex w-72 max-w-[85%] flex-col border-r border-line bg-surface-sunken">
 						<div className="flex h-pane-header shrink-0 items-center justify-between border-b border-line px-2">
 							<button
 								type="button"
@@ -156,6 +156,19 @@ export function SettingsShell({
 			<main className="flex min-w-0 flex-1 flex-col">
 				{/* pane-header datum: title row, hairline at the shared y */}
 				<header className="flex h-pane-header shrink-0 items-center gap-3 border-b border-line px-3 lg:px-5">
+					{/* Below desktop this is the only way out of settings that is on
+					    screen: the rail carrying "Back to mail" is a drawer here, and an
+					    app launched from a home screen has no browser back button. */}
+					{onBackToMail && (
+						<Button
+							variant="ghost"
+							size="sm"
+							icon={<ChevronLeft className="size-4" />}
+							className="-ml-1 lg:hidden"
+							onClick={onBackToMail}
+							aria-label="Back to mail"
+						/>
+					)}
 					<Button
 						variant="ghost"
 						size="sm"

package/src/components/slide-panel.tsx

@@ -54,7 +54,7 @@ export function SlidePanel({
 
 			<div
 				className={cn(
-					"fixed top-0 right-0 z-50 h-full w-full border-l border-line bg-canvas shadow-xl sm:w-[400px] sm:max-w-[90vw]",
+					"safe-area-frame fixed top-0 right-0 z-50 h-full w-full border-l border-line bg-canvas shadow-xl sm:w-[400px] sm:max-w-[90vw]",
 					"transform transition-transform duration-200 ease-out",
 					isOpen ? "translate-x-0" : "pointer-events-none translate-x-full",
 				)}

package/src/components/wizard.tsx

@@ -81,7 +81,7 @@ export function WizardShell({
 		// (optical center) on larger screens. On phone the top padding is
 		// minimal so taller steps (connector picker, servers) don't push the
 		// CTA bar below the fold — the shell scrolls if content overflows.
-		<div className="flex min-h-dvh w-full flex-col items-center overflow-y-auto bg-canvas px-8 pb-8 pt-8 font-sans text-fg sm:pt-[30vh]">
+		<div className="flex min-h-dvh w-full flex-col items-center overflow-y-auto bg-canvas pb-[max(2rem,env(safe-area-inset-bottom,0px))] pl-[max(2rem,env(safe-area-inset-left,0px))] pr-[max(2rem,env(safe-area-inset-right,0px))] pt-[max(2rem,env(safe-area-inset-top,0px))] font-sans text-fg sm:pt-[30vh]">
 			{!hideSteps && (
 				<div className="mb-5 w-full max-w-xl">
 					<StepRail steps={steps} activeStep={activeStep} />

package/src/index.ts

@@ -699,6 +699,10 @@ export {
 	labelColorOptions,
 	labelDotClass,
 } from "./lib/label-color.js";
+export {
+	DESKTOP_MEDIA_QUERY,
+	DESKTOP_MIN_WIDTH,
+} from "./lib/layout-breakpoints.js";
 export {
 	derivePropertyClauses,
 	normalizeSubject,

package/src/lib/layout-breakpoints.ts

@@ -0,0 +1,12 @@
+export const DESKTOP_MIN_WIDTH = 1024;
+
+/**
+ * The desktop gate. Width alone is not enough: a large tablet in portrait is
+ * exactly 1024px wide, and the multi-pane shell does not fit a surface held
+ * upright. A coarse pointer in portrait therefore never counts as desktop,
+ * while a tall monitor (fine pointer) still does.
+ *
+ * `tokens.css` redefines Tailwind's `lg` variant with this exact condition,
+ * so the CSS-gated chrome and anything reading the query in JS flip together.
+ */
+export const DESKTOP_MEDIA_QUERY = `(min-width: ${DESKTOP_MIN_WIDTH}px) and (not ((orientation: portrait) and (pointer: coarse)))`;

package/src/tokens.css

@@ -11,6 +11,19 @@
    .dark on a wrapper; an app would toggle it on <html>. */
 @custom-variant dark (&:is(.dark *));
 
+/* Tailwind's built-in lg variant, redefined: desktop chrome is a device
+   posture, not a width. A large tablet is exactly 1024px wide in portrait
+   and belongs in the single-pane layout, so a coarse pointer held upright
+   never reaches lg regardless of width. A tall desktop monitor has a fine
+   pointer and keeps it. Every lg: class in the app and the workbench rides
+   this rule; it must stay identical to DESKTOP_MEDIA_QUERY in
+   src/lib/layout-breakpoints.ts. */
+@custom-variant lg {
+	@media (min-width: 1024px) and (not ((orientation: portrait) and (pointer: coarse))) {
+		@slot;
+	}
+}
+
 /* @theme inline aliases Tailwind utilities (bg-surface, text-fg, etc.)
    to the semantic CSS variables declared on :root / .dark below. The
    :root / .dark blocks MUST come after this @theme block — otherwise
@@ -193,6 +206,19 @@ html.dark,
 	color-scheme: dark;
 }
 
+/* Installed to a home screen the app runs without browser chrome, so its own
+   surfaces reach the status bar, the home indicator and, in landscape, the
+   notch. A screen-owning root carries the device insets; `viewport-fit=cover`
+   in the page head is what makes them anything but zero, and in a browser tab
+   they stay zero. Sized in the border box, so a root pinned to the viewport
+   keeps its height and gives the room out of its content. */
+@utility safe-area-frame {
+	padding-top: env(safe-area-inset-top, 0px);
+	padding-right: env(safe-area-inset-right, 0px);
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+	padding-left: env(safe-area-inset-left, 0px);
+}
+
 body {
 	margin: 0;
 	background-color: var(--color-canvas);