@remit/web-client 0.0.287 → 0.0.289

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.287",
+  "version": "0.0.289",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/auth/SessionRateLimited.stories.tsx

@@ -7,7 +7,7 @@ import { SessionRateLimited } from "./SessionRateLimited";
  * told everyone behind the address that they had been logged out.
  */
 const meta: Meta<typeof SessionRateLimited> = {
-	title: "Screens/SessionRateLimited",
+	title: "Playground/Shipped/Sign in/Session rate limited",
 	component: SessionRateLimited,
 	parameters: { layout: "fullscreen" },
 	args: {

package/src/components/calendar/AgendaStrip.stories.tsx

@@ -199,7 +199,7 @@ function Strip({
 }
 
 const meta: Meta<typeof Strip> = {
-	title: "App/Calendar/Agenda",
+	title: "Playground/Shipped/Calendar/Agenda",
 	component: Strip,
 	parameters: { layout: "fullscreen" },
 	args: {

package/src/components/calendar/AgendaView.stories.tsx

@@ -56,7 +56,7 @@ function Agenda({
 }
 
 const meta: Meta<typeof Agenda> = {
-	title: "App/Calendar/Agenda view",
+	title: "Playground/Shipped/Calendar/Agenda view",
 	component: Agenda,
 	parameters: { layout: "fullscreen" },
 	args: {

package/src/components/calendar/CalendarComposePane.stories.tsx

@@ -45,7 +45,7 @@ const draft: EventDraft = {
 };
 
 const meta: Meta<typeof CalendarComposePane> = {
-	title: "App/Calendar/Compose pane",
+	title: "Playground/Shipped/Calendar/Compose pane",
 	component: CalendarComposePane,
 	parameters: { layout: "fullscreen" },
 	args: {

package/src/components/calendar/CalendarEventPane.stories.tsx

@@ -44,7 +44,7 @@ const event: CalendarEventData = {
 };
 
 const meta: Meta<typeof CalendarEventPane> = {
-	title: "App/Calendar/Event pane",
+	title: "Playground/Shipped/Calendar/Event pane",
 	component: CalendarEventPane,
 	parameters: { layout: "fullscreen" },
 	args: {

package/src/components/calendar/CalendarShell.stories.tsx

@@ -127,7 +127,7 @@ function Shell({
 }
 
 const meta: Meta<typeof Shell> = {
-	title: "App/Calendar/Shell",
+	title: "Playground/Shipped/Calendar/Shell",
 	component: Shell,
 	parameters: { layout: "fullscreen" },
 };

package/src/components/calendar/CalendarViewPlaceholder.stories.tsx

@@ -11,7 +11,7 @@ import { CalendarViewPlaceholder } from "./CalendarViewPlaceholder";
  * and the reader would plan around an empty screen.
  */
 const meta: Meta<typeof CalendarViewPlaceholder> = {
-	title: "App/Calendar/Not built yet",
+	title: "Playground/Shipped/Calendar/Not built yet",
 	component: CalendarViewPlaceholder,
 	parameters: { layout: "fullscreen" },
 	render: (args) => (

package/src/components/calendar/CalendarWorkspace.stories.tsx

@@ -111,11 +111,13 @@ function Workspace({
 	events,
 	isLoading,
 	error,
+	touch,
 }: {
 	initialView: CalendarViewId;
 	events: CalendarEventData[];
 	isLoading?: boolean;
 	error?: unknown;
+	touch?: boolean;
 }) {
 	const [view, setView] = useState<CalendarViewId>(initialView);
 	const [density, setDensity] = useState<Density>("comfortable");
@@ -146,12 +148,13 @@ function Workspace({
 			onChangeDensity={setDensity}
 			onSelectEvent={setSelected}
 			onPickSlot={() => undefined}
+			touch={touch}
 		/>
 	);
 }
 
 const meta: Meta<typeof Workspace> = {
-	title: "App/Calendar/Workspace",
+	title: "Playground/Shipped/Calendar/Workspace",
 	component: Workspace,
 	parameters: { layout: "fullscreen" },
 	args: { initialView: "week", events: week },
@@ -169,6 +172,12 @@ export const Week: Story = {};
 
 export const Day: Story = { args: { initialView: "day" } };
 
+/** A phone: two rows of thumb-sized controls, and no year on the ladder. */
+export const Phone: Story = {
+	args: { touch: true },
+	globals: { viewport: { value: "mobile" } },
+};
+
 /** Nothing scheduled is still a grid, never a "nothing here" surface. */
 export const EmptyWeek: Story = { args: { events: [] } };
 

package/src/components/calendar/CalendarWorkspace.tsx

@@ -7,10 +7,11 @@ import {
 	type CalendarViewId,
 	CalendarViewSwitch,
 	type Density,
-	segmentClassName,
+	Segmented,
+	type SegmentOption,
 } from "@remit/ui";
 import { Loader2 } from "lucide-react";
-import { type ReactNode, useId, useState } from "react";
+import { type ReactNode, useState } from "react";
 import { CalendarViewPlaceholder } from "@/components/calendar/CalendarViewPlaceholder";
 import { NavMenuButton } from "@/components/mail/NavMenuButton";
 import { ErrorState } from "@/components/ui/ErrorState";
@@ -30,9 +31,11 @@ import {
  * rather than of this component's state.
  */
 
-const DENSITY_OPTIONS: { value: Density; label: string }[] = [
-	{ value: "comfortable", label: "Detail" },
-	{ value: "compact", label: "Glance" },
+const PHONE_VIEWS: CalendarViewId[] = ["month", "week", "day", "agenda"];
+
+const DENSITY_OPTIONS: SegmentOption<Density>[] = [
+	{ value: "comfortable", label: "Detail", shortLabel: "Detail" },
+	{ value: "compact", label: "Glance", shortLabel: "Glance" },
 ];
 
 export interface CalendarWorkspaceProps {
@@ -68,11 +71,16 @@ export interface CalendarWorkspaceProps {
 	onSelectEvent: (eventId: string) => void;
 	onPickSlot: (pick: CalendarSlotPick) => void;
 	onStep: (direction: -1 | 1) => void;
+	/**
+	 * A phone: the toolbar splits into two rows of thumb-sized controls, because
+	 * one row of them is wider than the screen and pushes the grid off it.
+	 */
+	touch?: boolean;
 }
 
 /**
  * The range the toolbar names before the grid has measured one, and the whole
- * answer at a zoom that draws no grid.
+ * answer for a week and at a zoom that draws no grid.
  */
 function fallbackRangeTitle(view: CalendarViewId, date: string): string {
 	const instant = new Date(`${date}T00:00:00`);
@@ -80,6 +88,17 @@ function fallbackRangeTitle(view: CalendarViewId, date: string): string {
 		return new Intl.DateTimeFormat(undefined, { year: "numeric" }).format(
 			instant,
 		);
+	if (view === "week") {
+		const monday = new Date(instant);
+		monday.setDate(instant.getDate() - ((instant.getDay() + 6) % 7));
+		const sunday = new Date(monday);
+		sunday.setDate(monday.getDate() + 6);
+		return new Intl.DateTimeFormat(undefined, {
+			day: "numeric",
+			month: "short",
+			year: "numeric",
+		}).formatRange(monday, sunday);
+	}
 	if (view === "day")
 		return new Intl.DateTimeFormat(undefined, {
 			weekday: "short",
@@ -112,53 +131,67 @@ export function CalendarWorkspace({
 	onSelectEvent,
 	onPickSlot,
 	onStep,
+	touch = false,
 }: CalendarWorkspaceProps) {
-	const densityGroup = useId();
-	// The grid computes the range it drew, which is the only honest title for a
-	// week — it knows where the week starts. Held against the address it was
-	// measured for, so leaving a view does not carry its title into the next one.
+	// Held against the address it was measured for, so leaving a view does not
+	// carry its title into the next one.
 	const [measured, setMeasured] = useState({ key: "", title: "" });
 	const addressKey = `${view}/${date}`;
 	const title =
-		measured.key === addressKey
+		view !== "week" && measured.key === addressKey
 			? measured.title
 			: fallbackRangeTitle(view, date);
 
+	const dateNav = (
+		<CalendarDateNav
+			title={title}
+			onPrev={() => onStep(-1)}
+			onNext={() => onStep(1)}
+			onToday={onToday}
+			touch={touch}
+		/>
+	);
+	const densitySwitch = (
+		<Segmented
+			ariaLabel="Calendar density"
+			options={DENSITY_OPTIONS}
+			value={density}
+			onChange={onChangeDensity}
+			touch={touch}
+			className="shrink-0"
+		/>
+	);
+
 	return (
 		<div className="flex h-full min-h-0 flex-col bg-surface">
-			<div className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-2">
-				{/* Below the nav pane the sidebar is a slide-over with nothing to open
-				    it: the calendar is a whole surface of its own, so without this
-				    the reader has no way back to their mail. */}
-				<NavMenuButton />
-				<CalendarDateNav
-					title={title}
-					onPrev={() => onStep(-1)}
-					onNext={() => onStep(1)}
-					onToday={onToday}
-				>
-					<fieldset className="inline-flex items-center gap-0.5">
-						<legend className="sr-only">Calendar density</legend>
-						{DENSITY_OPTIONS.map((option) => (
-							<label
-								key={option.value}
-								className={`${segmentClassName(density === option.value)} h-7 text-xs`}
-							>
-								<input
-									type="radio"
-									name={densityGroup}
-									value={option.value}
-									checked={density === option.value}
-									onChange={() => onChangeDensity(option.value)}
-									className="sr-only"
-								/>
-								{option.label}
-							</label>
-						))}
-					</fieldset>
+			{touch ? (
+				<div className="flex shrink-0 flex-col gap-1 border-b border-line px-2 pb-1">
+					<div className="flex min-w-0 items-center gap-1">
+						<NavMenuButton />
+						<div className="min-w-0 flex-1">{dateNav}</div>
+					</div>
+					<div className="flex items-center gap-2">
+						<CalendarViewSwitch
+							value={view}
+							onChange={onChangeView}
+							views={PHONE_VIEWS}
+							touch
+							className="flex-1"
+						/>
+						{densitySwitch}
+					</div>
+				</div>
+			) : (
+				<div className="flex h-pane-header shrink-0 items-center gap-2 border-b border-line px-2">
+					{/* Below the nav pane the sidebar is a slide-over with nothing to open
+					    it: the calendar is a whole surface of its own, so without this
+					    the reader has no way back to their mail. */}
+					<NavMenuButton />
+					<div className="min-w-0 flex-1">{dateNav}</div>
+					{densitySwitch}
 					<CalendarViewSwitch value={view} onChange={onChangeView} />
-				</CalendarDateNav>
-			</div>
+				</div>
+			)}
 
 			{/* The strip rolls its own range, so it answers for its own days: the
 			    week this pane read is not what it is drawing, and gating it on that

package/src/components/calendar/OpenCalendarEvent.stories.tsx

@@ -74,7 +74,7 @@ function Opened({
 }
 
 const meta: Meta<typeof Opened> = {
-	title: "App/Calendar/Open event",
+	title: "Playground/Shipped/Calendar/Open event",
 	component: Opened,
 	parameters: { layout: "fullscreen" },
 	args: { calendarObjectId: ROADMAP_OBJECT, server: answering() },

package/src/components/calendar/WriteCalendarEvent.stories.tsx

@@ -48,7 +48,7 @@ function Composer({ pick }: { pick?: CalendarSlotPick }) {
 }
 
 const meta: Meta<typeof Composer> = {
-	title: "App/Calendar/Write event",
+	title: "Playground/Shipped/Calendar/Write event",
 	component: Composer,
 	parameters: { layout: "fullscreen" },
 };

package/src/components/calendar/calendar-workspace.render.test.ts

@@ -156,6 +156,30 @@ describe("the toolbar", () => {
 		assert.ok(render("year").includes("2026"));
 	});
 
+	it("names a week that runs over a year end by both of its years", () => {
+		const html = renderQuietly(
+			createElement(CalendarWorkspace, {
+				...workspaceProps("week", []),
+				date: "2025-12-31",
+			}),
+		);
+		const title = /<h2[^>]*>([^<]*)<\/h2>/.exec(html)?.[1] ?? "";
+		assert.match(title, /2025/, `"${title}" lost the year the week starts in`);
+		assert.match(title, /2026/, `"${title}" lost the year the week ends in`);
+	});
+
+	it("leaves the year off the ladder on a phone", () => {
+		const html = renderQuietly(
+			createElement(CalendarWorkspace, {
+				...workspaceProps("week"),
+				touch: true,
+			}),
+		);
+		assert.equal(html.includes(">Year<"), false);
+		assert.equal(html.includes(">Y<"), false);
+		assert.ok(html.includes(">W<"), "the phone ladder did not render");
+	});
+
 	it("carries the density control, which the address never names", () => {
 		const html = render("week");
 		assert.ok(html.includes("Calendar density"));

package/src/components/compose/FromSelector.stories.tsx

@@ -28,7 +28,7 @@ function seededClient(): QueryClient {
 }
 
 const meta: Meta<typeof FromSelector> = {
-	title: "Components/FromSelector",
+	title: "Playground/Shipped/Mail/Compose/FromSelector",
 	component: FromSelector,
 	parameters: { layout: "padded" },
 	decorators: [

package/src/components/config-import/config-import.stories.tsx

@@ -37,7 +37,7 @@ import {
 } from "./steps";
 
 const meta: Meta = {
-	title: "Flows/Config import",
+	title: "Playground/Shipped/Import/Config import",
 	parameters: { layout: "fullscreen" },
 };
 export default meta;

package/src/components/mail/authenticity-warning.stories.tsx

@@ -15,7 +15,7 @@ import { AuthenticityBanner } from "@/components/mail/AuthenticityBanner";
  * body's own size rather than floating off to the right as chrome.
  */
 const meta: Meta<typeof AuthenticityBanner> = {
-	title: "Flows/Reading/Authenticity Warning",
+	title: "Playground/Shipped/Mail/Reading/Authenticity warning",
 	component: AuthenticityBanner,
 	parameters: { layout: "centered" },
 };

package/src/components/mail/blocked-images-notice.stories.tsx

@@ -12,7 +12,7 @@ import { BlockedImagesNotice } from "@/components/mail/BlockedImagesNotice";
  * message that explains nothing is indistinguishable from a broken one.
  */
 const meta: Meta<typeof BlockedImagesNotice> = {
-	title: "Flows/Mail/Blocked Images Notice",
+	title: "Playground/Shipped/Mail/Reading/Blocked images notice",
 	component: BlockedImagesNotice,
 	parameters: { layout: "padded" },
 };

package/src/components/mail/empty-trash-bar.stories.tsx

@@ -13,7 +13,7 @@ import { EmptyTrashBar } from "@/components/mail/EmptyTrashBar";
  * lands under the button and stays there until the user repairs it.
  */
 const meta: Meta<typeof EmptyTrashBar> = {
-	title: "Flows/Mail/Empty Trash",
+	title: "Playground/Shipped/Mail/Empty trash",
 	component: EmptyTrashBar,
 	parameters: { layout: "fullscreen" },
 };

package/src/components/mail/intelligence-drawer.stories.tsx

@@ -27,7 +27,7 @@ import { useIntelligenceDrawer } from "@/hooks/useIntelligenceDrawer";
  * mid-width panes both run on.
  */
 const meta: Meta = {
-	title: "Flows/Reading/Intelligence Drawer",
+	title: "Playground/Shipped/Mail/Reading/Intelligence drawer",
 	parameters: { layout: "centered" },
 };
 export default meta;

package/src/components/settings/CalendarFeedCard.stories.tsx

@@ -7,7 +7,7 @@ import { CalendarFeedCard } from "./CalendarFeedCard";
  * is legible and the two confirmations that take it away.
  */
 const meta: Meta<typeof CalendarFeedCard> = {
-	title: "Flows/Settings Calendars/Subscription address",
+	title: "Playground/Shipped/Settings/Calendars/Subscription address",
 	component: CalendarFeedCard,
 	parameters: { layout: "padded" },
 	args: {

package/src/components/settings/LabelsList.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { LabelsList } from "./LabelsList";
 
 const meta: Meta<typeof LabelsList> = {
-	title: "Flows/Settings Labels/LabelsList",
+	title: "Playground/Shipped/Settings/Labels/LabelsList",
 	component: LabelsList,
 	parameters: { layout: "padded" },
 	decorators: [

package/src/components/settings/label-delete-confirm.stories.tsx

@@ -10,7 +10,7 @@ import { deleteLabelConfirmCopy } from "@/lib/organize/label-delete-copy";
  * approved surface, not a placeholder for one.
  */
 const meta: Meta<typeof ConfirmDialog> = {
-	title: "Flows/Settings Labels/Delete Confirmation",
+	title: "Playground/Shipped/Settings/Labels/Delete confirmation",
 	component: ConfirmDialog,
 	parameters: { layout: "centered" },
 };

package/src/components/settings/settings-filter.stories.tsx

@@ -103,7 +103,7 @@ function SheetStage({ children }: { children: ReactNode }) {
 }
 
 const meta: Meta = {
-	title: "Flows/Settings Filters",
+	title: "Playground/Shipped/Settings/Filters",
 	parameters: { layout: "fullscreen" },
 };
 export default meta;

package/src/components/ui/ErrorBanner.stories.tsx

@@ -12,7 +12,7 @@ import { ErrorBanner } from "./ErrorBanner";
  * builds from build-time constants Storybook has no `define` for.
  */
 const meta: Meta<typeof ErrorBanner> = {
-	title: "Components/ErrorBanner",
+	title: "Playground/Shipped/Mail/ErrorBanner",
 	component: ErrorBanner,
 	parameters: { layout: "padded" },
 	args: {

package/src/routes/calendar/$view.$date.tsx

@@ -14,7 +14,12 @@
  * week instead of on an error.
  */
 import type { CalendarSlotPick } from "@remit/ui";
-import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+import {
+	createFileRoute,
+	Navigate,
+	Outlet,
+	redirect,
+} from "@tanstack/react-router";
 import { useCallback, useState } from "react";
 import { AgendaView } from "@/components/calendar/AgendaView";
 import { CalendarComposeSeedProvider } from "@/components/calendar/CalendarComposeSeed";
@@ -22,6 +27,7 @@ import { CalendarShell } from "@/components/calendar/CalendarShell";
 import { CalendarWorkspace } from "@/components/calendar/CalendarWorkspace";
 import { calendarInstanceId, deviceTimeZone } from "@/hooks/calendar";
 import { useCalendarData } from "@/hooks/useCalendarData";
+import { useLayoutTier } from "@/hooks/useLayoutTier";
 import {
 	readCalendarDensity,
 	writeCalendarDensity,
@@ -56,6 +62,21 @@ export const Route = createFileRoute("/calendar/$view/$date")({
 });
 
 function CalendarViewLayout() {
+	const { view, date } = useCalendarAddress();
+	const isPhone = useLayoutTier() === "phone";
+	if (isPhone && view === "year")
+		return (
+			<Navigate
+				to="/calendar/$view/$date"
+				params={{ view: "month", date }}
+				search={true}
+				replace
+			/>
+		);
+	return <CalendarView isPhone={isPhone} />;
+}
+
+function CalendarView({ isPhone }: { isPhone: boolean }) {
 	const { view, date, calendarIds } = useCalendarAddress();
 	// The strip fetches the days it holds a week at a time and draws none of
 	// this, so at that zoom the layout asks for nothing: the address rewrites on
@@ -121,6 +142,7 @@ function CalendarViewLayout() {
 			onChangeDensity={changeDensity}
 			onSelectEvent={selectEvent}
 			onPickSlot={pickSlot}
+			touch={isPhone}
 		/>
 	);