@remit/ui 0.0.113 → 0.0.114

package/src/components/nav-sidebar.tsx

@@ -4,6 +4,7 @@ import {
 	Archive,
 	BellOff,
 	BookmarkPlus,
+	CalendarDays,
 	ChevronDown,
 	ChevronRight,
 	FileText,
@@ -558,6 +559,12 @@ export interface NavSidebarProps
 	 * fall back to programmatic buttons (static stories / AppShell preview).
 	 */
 	linkComponent?: NavLinkComponent;
+	/**
+	 * Whether the calendar destination sits under the daily brief. It is
+	 * "hidden" until the app has a route behind it — the prototype turns it on,
+	 * the shipping nav does not offer an entry that leads nowhere.
+	 */
+	calendarNav?: "hidden" | "shown";
 	/** Every saved query, most recently saved first. See `SavedSearchesGroup`. */
 	savedSearches?: string[];
 	/**
@@ -577,6 +584,7 @@ export function NavSidebar({
 	onSelectNav,
 	variant = "desktop",
 	linkComponent,
+	calendarNav = "hidden",
 	savedSearches = [],
 	saveableQuery,
 	onSelectSavedSearch,
@@ -604,6 +612,18 @@ export function NavSidebar({
 				onClick={() => onSelectNav?.("brief")}
 			/>
 
+			{calendarNav === "shown" && (
+				<NavItem
+					navId="calendar"
+					linkComponent={linkComponent}
+					icon={<CalendarDays className="size-4" />}
+					label="Calendar"
+					ariaLabel="Calendar"
+					active={selectedNavId === "calendar"}
+					onClick={() => onSelectNav?.("calendar")}
+				/>
+			)}
+
 			<NavItem
 				navId="flagged"
 				linkComponent={linkComponent}

package/src/components/recurrence-scope-prompt.render.test.ts

@@ -0,0 +1,36 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { RecurrenceScopePrompt } from "./recurrence-scope-prompt.js";
+
+const render = (touch = false) =>
+	renderToString(
+		createElement(RecurrenceScopePrompt, {
+			title: "Standup",
+			ruleText: "Every weekday, 09:15",
+			instanceText: "Wednesday 10 June",
+			onChoose: () => undefined,
+			onCancel: () => undefined,
+			touch,
+		}),
+	);
+
+describe("RecurrenceScopePrompt", () => {
+	it("offers all three scopes", () => {
+		const html = render();
+		assert.match(html, /This event/);
+		assert.match(html, /This and everything after/);
+		assert.match(html, /The whole series/);
+	});
+
+	it("states the rule and the instance that was clicked", () => {
+		const html = render();
+		assert.match(html, /Every weekday, 09:15/);
+		assert.match(html, /Wednesday 10 June/);
+	});
+
+	it("grows the choices for a thumb", () => {
+		assert.match(render(true), /min-h-11/);
+	});
+});

package/src/components/recurrence-scope-prompt.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { RecurrenceScopePrompt } from "./recurrence-scope-prompt.js";
+
+/**
+ * The scope question, asked before the form opens. Editing one instance and
+ * editing the rule are different acts, so the choice is made while the change
+ * is still an intention.
+ */
+const meta: Meta<typeof RecurrenceScopePrompt> = {
+	title: "Calendar/Recurrence scope",
+	component: RecurrenceScopePrompt,
+	parameters: { layout: "padded" },
+};
+export default meta;
+
+type Story = StoryObj<typeof RecurrenceScopePrompt>;
+
+export const Desktop: Story = {
+	render: () => (
+		<div className="max-w-sm rounded-lg border border-line bg-surface-raised p-4">
+			<RecurrenceScopePrompt
+				title="Standup"
+				ruleText="Every weekday, 09:15"
+				instanceText="Wednesday 10 June"
+				onChoose={() => {}}
+				onCancel={() => {}}
+			/>
+		</div>
+	),
+};
+
+/** The same question with thumb-sized targets. */
+export const Touch: Story = {
+	render: () => (
+		<div className="max-w-sm rounded-lg border border-line bg-surface-raised p-4">
+			<RecurrenceScopePrompt
+				title="Standup"
+				ruleText="Every weekday, 09:15"
+				instanceText="Wednesday 10 June"
+				onChoose={() => {}}
+				onCancel={() => {}}
+				touch
+			/>
+		</div>
+	),
+};

package/src/components/recurrence-scope-prompt.tsx

@@ -0,0 +1,84 @@
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import type { RecurrenceScope } from "./calendar-types.js";
+
+export interface RecurrenceScopePromptProps {
+	/** The series being edited, e.g. "Standup". */
+	title: string;
+	/** The rule in words, e.g. "Every weekday, 09:15". */
+	ruleText: string;
+	/** The instance that was clicked, already formatted. */
+	instanceText: string;
+	onChoose: (scope: RecurrenceScope) => void;
+	onCancel: () => void;
+	touch?: boolean;
+	className?: string;
+}
+
+const choices: { scope: RecurrenceScope; label: string; note: string }[] = [
+	{
+		scope: "this",
+		label: "This event",
+		note: "Leaves the rest of the series alone",
+	},
+	{
+		scope: "following",
+		label: "This and everything after",
+		note: "Splits the series here",
+	},
+	{ scope: "all", label: "The whole series", note: "Rewrites the rule itself" },
+];
+
+/**
+ * The scope question, asked first. A series is one object with one rule, and
+ * which instances an edit reaches changes what the edit means — so it is
+ * settled before the form opens, not confirmed on the way out when the change
+ * has already been typed.
+ */
+export function RecurrenceScopePrompt({
+	title,
+	ruleText,
+	instanceText,
+	onChoose,
+	onCancel,
+	touch,
+	className,
+}: RecurrenceScopePromptProps) {
+	return (
+		<div className={cn("flex flex-col gap-3", className)}>
+			<div>
+				<h2 className="text-md font-semibold text-fg">{title} repeats</h2>
+				<p className="text-xs text-fg-muted">{ruleText}</p>
+				<p className="text-xs text-fg-subtle">You clicked {instanceText}.</p>
+			</div>
+
+			<p className="text-sm text-fg">What should the change apply to?</p>
+
+			<div className="flex flex-col gap-1.5">
+				{choices.map((choice) => (
+					<button
+						key={choice.scope}
+						type="button"
+						onClick={() => onChoose(choice.scope)}
+						className={cn(
+							"flex flex-col rounded-md border border-line bg-surface px-3 py-2 text-left outline-none transition-colors hover:border-line-strong hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring",
+							touch && "min-h-11 justify-center",
+						)}
+					>
+						<span className="text-sm font-medium text-fg">{choice.label}</span>
+						<span className="text-2xs text-fg-subtle">{choice.note}</span>
+					</button>
+				))}
+			</div>
+
+			<Button
+				variant="ghost"
+				size={touch ? "md" : "sm"}
+				onClick={onCancel}
+				className={cn("self-start", touch && "min-h-11")}
+			>
+				Cancel
+			</Button>
+		</div>
+	);
+}

package/src/components/selection-wizard.tsx

@@ -69,6 +69,7 @@ import {
 	scopeLabel,
 } from "./filter-rule.js";
 import type { ClauseEditState } from "./filter-rule-editor.js";
+import { FlowScreen, FlowStepRail } from "./flow-screen.js";
 import { type FolderTreeNode, FolderTreePicker } from "./folder-tree-picker.js";
 import { Input } from "./input.js";
 import { ProgressBar } from "./progress-bar.js";
@@ -91,21 +92,8 @@ export interface StepRailProps {
 }
 
 export function StepRail({ steps, step }: StepRailProps) {
-	const active = stepIndex(steps, step);
 	return (
-		<ol className="flex items-center gap-1.5" aria-label="Progress">
-			{steps.map((id, i) => (
-				<li key={id} className="flex flex-1 items-center gap-1.5">
-					<span
-						className={cn(
-							"h-1 flex-1 rounded-full transition-colors",
-							i <= active ? "bg-accent" : "bg-surface-sunken",
-						)}
-						aria-current={i === active ? "step" : undefined}
-					/>
-				</li>
-			))}
-		</ol>
+		<FlowStepRail count={steps.length} activeStep={stepIndex(steps, step)} />
 	);
 }
 
@@ -135,61 +123,22 @@ export function WizardScreen({
 	footer,
 	children,
 }: WizardScreenProps) {
-	const active = stepIndex(steps, step);
+	// A modal at every width: full-bleed below 768px it covers the list rather
+	// than sitting beside it, so the list behind must leave the accessibility
+	// tree with it — otherwise the verbs that opened the wizard are still
+	// reachable underneath the screen that replaced them.
 	return (
-		// A modal at every width: full-bleed below 768px it covers the list rather
-		// than sitting beside it, so the list behind must leave the accessibility
-		// tree with it — otherwise the verbs that opened the wizard are still
-		// reachable underneath the screen that replaced them.
-		<div
-			role="dialog"
-			aria-modal="true"
-			aria-label={title}
-			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"
+		<FlowScreen
+			title={title}
+			subtitle={subtitle}
+			steps={steps.map(stepLabel)}
+			activeStep={stepIndex(steps, step)}
+			onBack={onBack}
+			onExit={onExit}
+			footer={footer}
 		>
-			<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-[calc(0.75rem+env(safe-area-inset-top,0px))] md:pt-3">
-					<div className="flex items-center gap-1">
-						<button
-							type="button"
-							onClick={onBack}
-							aria-label="Back"
-							className="flex size-11 items-center justify-center rounded-md text-fg-muted"
-						>
-							<ArrowLeft className="size-5" />
-						</button>
-						<div className="min-w-0 flex-1 text-center">
-							<h1 className="truncate text-sm font-semibold">{title}</h1>
-							{subtitle && (
-								<p className="truncate text-2xs text-fg-muted">{subtitle}</p>
-							)}
-						</div>
-						<button
-							type="button"
-							onClick={onExit}
-							aria-label="Cancel"
-							className="flex size-11 items-center justify-center rounded-md text-fg-muted"
-						>
-							<X className="size-5" />
-						</button>
-					</div>
-					<div className="space-y-1 px-1 pt-2">
-						<StepRail steps={steps} step={step} />
-						<p className="text-2xs text-fg-subtle">
-							Step {active + 1} of {steps.length} · {stepLabel(steps[active])}
-						</p>
-					</div>
-				</header>
-
-				<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
-					{children}
-				</div>
-
-				<footer className="shrink-0 border-t border-line px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] md:pb-3">
-					{footer}
-				</footer>
-			</div>
-		</div>
+			{children}
+		</FlowScreen>
 	);
 }
 
@@ -354,7 +303,8 @@ export interface FooterNavProps {
 	onBack: () => void;
 	nextLabel: string;
 	onNext: () => void;
-	nextVariant?: "primary" | "danger";
+	/** `commit` reads as primary without the arrow: it ends the flow. */
+	nextVariant?: "primary" | "commit" | "danger";
 	/** What the step is still missing. Dims the control; never disables it. */
 	blockedReason?: string;
 	/** Continue was pressed while blocked, so the reason is on screen. */
@@ -397,7 +347,7 @@ export function FooterNav({
 					Back
 				</Button>
 				<Button
-					variant={nextVariant}
+					variant={nextVariant === "danger" ? "danger" : "primary"}
 					size="touch"
 					onClick={onNext}
 					aria-describedby={blockedReason ? reasonId : undefined}

package/src/index.ts

@@ -58,6 +58,14 @@ export {
 	AttachmentList,
 	type AttachmentListProps,
 } from "./components/attachment-list.js";
+export {
+	AttendeeList,
+	type AttendeeListProps,
+	AttendeeRow,
+	type AttendeeRowProps,
+	RsvpBadge,
+	type RsvpBadgeProps,
+} from "./components/attendee-row.js";
 export { AuthCard, type AuthCardProps } from "./components/auth-card.js";
 export {
 	AuthFooter,
@@ -112,6 +120,35 @@ export {
 	type ButtonLinkProps,
 	type ButtonProps,
 } from "./components/button.js";
+export {
+	CalendarEventChip,
+	type CalendarEventChipProps,
+} from "./components/calendar-event-chip.js";
+export {
+	CalendarList,
+	type CalendarListProps,
+} from "./components/calendar-list.js";
+export {
+	CalendarDateNav,
+	type CalendarDateNavProps,
+	CalendarViewSwitch,
+	type CalendarViewSwitchProps,
+	type SegmentOption,
+	segmentClassName,
+} from "./components/calendar-toolbar.js";
+export {
+	type CalendarAttendee,
+	type CalendarColorId,
+	type CalendarDescriptor,
+	type CalendarEventData,
+	type CalendarViewId,
+	calendarColorIds,
+	type EventDraft,
+	type EventSuggestion,
+	type RecurrenceScope,
+	type RsvpState,
+	type ZoneCertainty,
+} from "./components/calendar-types.js";
 export {
 	Card,
 	CardBody,
@@ -166,6 +203,12 @@ export {
 	ConfirmDialog,
 	type ConfirmDialogProps,
 } from "./components/confirm-dialog.js";
+export {
+	CustomRecurrenceDialog,
+	type CustomRecurrenceDialogProps,
+	CustomRecurrenceEditor,
+	type CustomRecurrenceEditorProps,
+} from "./components/custom-recurrence.js";
 export {
 	DangerZoneSection,
 	type DangerZoneSectionProps,
@@ -176,6 +219,36 @@ export {
 	type DialogBackdropProps,
 } from "./components/dialog-backdrop.js";
 export type { EmailFrameVariant } from "./components/email-frame-css.js";
+export {
+	EventDetail,
+	type EventDetailProps,
+} from "./components/event-detail.js";
+export {
+	EventCalendarField,
+	EventEditor,
+	type EventEditorLayout,
+	type EventEditorProps,
+	EventField,
+	type EventFieldProps,
+	EventGuestsField,
+	EventLocationField,
+	EventNotesField,
+	EventRepeatField,
+	EventTitleField,
+	EventWhenField,
+} from "./components/event-editor.js";
+export {
+	EventEditorPane,
+	type EventEditorPaneProps,
+} from "./components/event-editor-pane.js";
+export {
+	EventQuickEntry,
+	type EventQuickEntryProps,
+} from "./components/event-quick-entry.js";
+export {
+	EventSuggestionCard,
+	type EventSuggestionCardProps,
+} from "./components/event-suggestion-card.js";
 export {
 	FieldLabel,
 	type FieldLabelProps,
@@ -245,6 +318,12 @@ export {
 	type FilterSheetSource,
 	FilterToggle,
 } from "./components/filter-sheet.js";
+export {
+	FlowScreen,
+	type FlowScreenProps,
+	FlowStepRail,
+	type FlowStepRailProps,
+} from "./components/flow-screen.js";
 export {
 	FolderManageActions,
 	type FolderManageActionsProps,
@@ -448,6 +527,10 @@ export {
 	ReadingPaneEmpty,
 	type ReadingPaneEmptyProps,
 } from "./components/reading-pane-empty.js";
+export {
+	RecurrenceScopePrompt,
+	type RecurrenceScopePromptProps,
+} from "./components/recurrence-scope-prompt.js";
 export {
 	RefreshButton,
 	type RefreshButtonProps,
@@ -565,6 +648,8 @@ export {
 export {
 	FolderStepBody,
 	type FolderStepProps,
+	FooterNav,
+	type FooterNavProps,
 	MatchStepBody,
 	type MatchStepProps,
 	NameStepBody,
@@ -699,6 +784,10 @@ export {
 	setBriefCategoryInQuery,
 	toggleBriefFilterInQuery,
 } from "./lib/brief-filter-query.js";
+export {
+	type CalendarColorClasses,
+	calendarColorClasses,
+} from "./lib/calendar-color.js";
 export {
 	buildCidResolver,
 	type CidResolvableBodyPart,
@@ -731,6 +820,11 @@ export {
 	sanitizeInlineStyle,
 	sanitizeStyleElementCss,
 } from "./lib/email-sanitizer.js";
+export {
+	addMinutesToClock,
+	type PhraseParse,
+	parseEventPhrase,
+} from "./lib/event-phrase.js";
 export {
 	collapseFolderTree,
 	filterFolderTree,
@@ -787,6 +881,23 @@ export {
 	normalizeSubject,
 	sharedSubjectFragment,
 } from "./lib/property-prefill.js";
+export {
+	type CustomRecurrence,
+	dayOfMonthLabel,
+	defaultCustomRecurrence,
+	defaultEndDate,
+	endDateLabel,
+	formatCustomRecurrence,
+	type MonthlyMode,
+	NO_REPEAT,
+	ordinalWeekdayLabel,
+	type RecurrenceEnd,
+	type RecurrenceUnit,
+	readCustomRecurrence,
+	repeatChoices,
+	WEEKDAY_INITIALS,
+	weekdayName,
+} from "./lib/recurrence.js";
 export {
 	LIST_ROW_ATTRIBUTE,
 	LIST_ROW_SELECTOR,

package/src/lib/calendar-color.ts

@@ -0,0 +1,71 @@
+import type { CalendarColorId } from "../components/calendar-types.js";
+
+/**
+ * A calendar's hue is data, so the utility names cannot be built by
+ * interpolation — Tailwind only sees class strings it can read in source.
+ * Every calendar colour therefore names its utilities once, here, and every
+ * calendar surface reads them from this table.
+ */
+export interface CalendarColorClasses {
+	/** Solid fill: the swatch, the dot, the left rail of a chip. */
+	solid: string;
+	/** Tinted fill for the body of a chip or a day cell. */
+	soft: string;
+	/** Text and icons that sit on `soft`, or on a plain surface. */
+	text: string;
+	/** Hairline in the calendar's own hue. */
+	border: string;
+	/** Border on the leading edge only — the rail a timed chip carries. */
+	rail: string;
+}
+
+const table: Record<CalendarColorId, CalendarColorClasses> = {
+	"cal-1": {
+		solid: "bg-cal-1",
+		soft: "bg-cal-1-soft",
+		text: "text-cal-1",
+		border: "border-cal-1",
+		rail: "border-l-cal-1",
+	},
+	"cal-2": {
+		solid: "bg-cal-2",
+		soft: "bg-cal-2-soft",
+		text: "text-cal-2",
+		border: "border-cal-2",
+		rail: "border-l-cal-2",
+	},
+	"cal-3": {
+		solid: "bg-cal-3",
+		soft: "bg-cal-3-soft",
+		text: "text-cal-3",
+		border: "border-cal-3",
+		rail: "border-l-cal-3",
+	},
+	"cal-4": {
+		solid: "bg-cal-4",
+		soft: "bg-cal-4-soft",
+		text: "text-cal-4",
+		border: "border-cal-4",
+		rail: "border-l-cal-4",
+	},
+	"cal-5": {
+		solid: "bg-cal-5",
+		soft: "bg-cal-5-soft",
+		text: "text-cal-5",
+		border: "border-cal-5",
+		rail: "border-l-cal-5",
+	},
+	"cal-6": {
+		solid: "bg-cal-6",
+		soft: "bg-cal-6-soft",
+		text: "text-cal-6",
+		border: "border-cal-6",
+		rail: "border-l-cal-6",
+	},
+};
+
+export function calendarColorClasses(
+	color: CalendarColorId,
+): CalendarColorClasses {
+	return table[color];
+}

package/src/lib/event-phrase.test.ts

@@ -0,0 +1,89 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { addMinutesToClock, parseEventPhrase } from "./event-phrase.js";
+
+/** Wednesday 10 June 2026, 09:30 local — the fixtures' fixed "now". */
+const NOW = new Date(2026, 5, 10, 9, 30);
+
+describe("parseEventPhrase", () => {
+	it("reads a title, a guest, a weekday and a time", () => {
+		const parse = parseEventPhrase("lunch with Jane friday 1pm", NOW);
+		assert.equal(parse.title, "lunch");
+		assert.deepEqual(parse.attendees, ["Jane"]);
+		assert.equal(parse.date, "2026-06-12");
+		assert.equal(parse.startTime, "13:00");
+		assert.equal(parse.dateText, "friday");
+		assert.equal(parse.startTimeText, "1pm");
+	});
+
+	it("assumes an hour when no length is given, and says so", () => {
+		const parse = parseEventPhrase("standup tomorrow 9:30", NOW);
+		assert.equal(parse.date, "2026-06-11");
+		assert.equal(parse.startTime, "09:30");
+		assert.equal(parse.durationMinutes, 60);
+		assert.deepEqual(parse.assumptions, ["No length given — using an hour"]);
+	});
+
+	it("reads an explicit length instead of assuming one", () => {
+		const parse = parseEventPhrase("dentist next tuesday 15:00 for 45m", NOW);
+		assert.equal(parse.title, "dentist");
+		assert.equal(parse.date, "2026-06-23");
+		assert.equal(parse.durationMinutes, 45);
+		assert.deepEqual(parse.assumptions, []);
+	});
+
+	it("splits several guests", () => {
+		const parse = parseEventPhrase("coffee with Marcus and Dana thu 8am", NOW);
+		assert.equal(parse.title, "coffee");
+		assert.deepEqual(parse.attendees, ["Marcus", "Dana"]);
+		assert.equal(parse.date, "2026-06-11");
+		assert.equal(parse.startTime, "08:00");
+	});
+
+	it("reports a missing time rather than inventing one", () => {
+		const parse = parseEventPhrase("design review monday", NOW);
+		assert.equal(parse.startTime, "");
+		assert.deepEqual(parse.unresolved, ["No time given"]);
+	});
+
+	it("reports the day it fell back to", () => {
+		const parse = parseEventPhrase("call the plumber 3pm", NOW);
+		assert.equal(parse.date, "2026-06-10");
+		assert.deepEqual(parse.assumptions[0], "No day given — using today");
+	});
+
+	it("reads a named hour", () => {
+		const parse = parseEventPhrase("sandwich noon", NOW);
+		assert.equal(parse.startTime, "12:00");
+		assert.equal(parse.title, "sandwich");
+	});
+
+	it("has nothing to report on an empty phrase but the gaps", () => {
+		const parse = parseEventPhrase("", NOW);
+		assert.deepEqual(parse.unresolved, ["No title yet", "No time given"]);
+	});
+
+	it("keeps the same weekday when it is today", () => {
+		const parse = parseEventPhrase("retro wednesday 4pm", NOW);
+		assert.equal(parse.date, "2026-06-10");
+	});
+
+	it("reads hours as well as minutes", () => {
+		const parse = parseEventPhrase("workshop friday 10am 2h", NOW);
+		assert.equal(parse.durationMinutes, 120);
+	});
+});
+
+describe("addMinutesToClock", () => {
+	it("advances a clock", () => {
+		assert.equal(addMinutesToClock("13:00", 90), "14:30");
+	});
+
+	it("wraps past midnight", () => {
+		assert.equal(addMinutesToClock("23:30", 60), "00:30");
+	});
+
+	it("returns nothing for no clock", () => {
+		assert.equal(addMinutesToClock("", 60), "");
+	});
+});