@remit/ui 0.0.155 → 0.0.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.155",
+  "version": "0.0.156",
   "type": "module",
   "files": [
     "src"
@@ -40,6 +40,7 @@
     "react-resizable-panels": "^2.1.9",
     "react-simple-pull-to-refresh": "^1.3.4",
     "tailwind-merge": "^2",
+    "temporal-polyfill": "^1.0.1",
     "tldts": "^7.4.9"
   },
   "peerDependencies": {

package/src/components/agenda-composer.render.test.ts

@@ -0,0 +1,196 @@
+/**
+ * Typing is the create path, so the field is never off screen and the reading
+ * of the sentence is shown back with the words each part came from. Where the
+ * sentence has two honest readings the reader is asked, and that question is a
+ * control rather than a note — both are asserted here.
+ */
+import "@remit/test-dom";
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import {
+	AgendaComposer,
+	type AgendaComposerProps,
+	AgendaPhraseField,
+	PhraseReading,
+} from "./agenda-composer.js";
+import type {
+	AgendaParse,
+	CalendarDescriptor,
+	EventDraft,
+} from "./calendar-types.js";
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "c1",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+];
+
+const draft: EventDraft = {
+	title: "Lunch with Jane",
+	date: "2026-06-12",
+	startTime: "13:00",
+	endTime: "14:00",
+	allDay: false,
+	calendarId: "c1",
+	location: "",
+	guests: "Jane",
+	notes: "",
+	repeat: "",
+};
+
+const parse: AgendaParse = {
+	title: "Lunch with Jane",
+	date: "2026-06-12",
+	dateText: "friday",
+	startTime: "13:00",
+	startTimeText: "1pm",
+	endTime: "14:00",
+	durationMinutes: 60,
+	durationText: "",
+	attendees: ["Jane"],
+	attendeesText: "with Jane",
+	location: "",
+	locationText: "",
+	repeat: "",
+	repeatText: "",
+	assumptions: ["An hour, because the sentence never said."],
+	unresolved: [],
+	choices: [],
+};
+
+const ambiguous: AgendaParse = {
+	...parse,
+	unresolved: ["No place given."],
+	choices: [
+		{
+			id: "which_friday",
+			question: "Which Friday?",
+			source: "friday",
+			options: [
+				{ id: "this", label: "12 June", date: "2026-06-12", startTime: "" },
+				{ id: "next", label: "19 June", date: "2026-06-19", startTime: "" },
+			],
+			chosenId: "this",
+		},
+	],
+};
+
+const base: AgendaComposerProps = {
+	phrase: "lunch with Jane friday 1pm",
+	onPhraseChange: () => {},
+	parse,
+	picks: {},
+	onPick: () => {},
+	draft,
+	onDraftChange: () => {},
+	calendars,
+	expanded: false,
+	onToggleExpanded: () => {},
+	onSave: () => {},
+	onCancel: () => {},
+	open: true,
+	onOpen: () => {},
+};
+
+const render = (props: Partial<AgendaComposerProps> = {}) =>
+	renderToString(createElement(AgendaComposer, { ...base, ...props }));
+
+describe("AgendaPhraseField", () => {
+	it("names the field rather than leaving the placeholder to do it", () => {
+		const html = renderToString(
+			createElement(AgendaPhraseField, {
+				phrase: "",
+				onPhraseChange: () => {},
+				onOpen: () => {},
+				onCommit: () => {},
+			}),
+		);
+		assert.match(html, /aria-label="Describe the event"/);
+		assert.match(html, /placeholder="lunch with Jane friday 1pm"/);
+	});
+
+	it("grows the field where a finger has to hit it", () => {
+		const html = renderToString(
+			createElement(AgendaPhraseField, {
+				phrase: "",
+				onPhraseChange: () => {},
+				onOpen: () => {},
+				onCommit: () => {},
+				touch: true,
+			}),
+		);
+		assert.match(html, /min-h-11/);
+	});
+});
+
+describe("AgendaComposer", () => {
+	it("folds the form away until the reader opens it", () => {
+		assert.doesNotMatch(render({ open: false }), /Northwind/);
+		assert.match(render(), /Northwind/);
+	});
+
+	it("shows the reading back with the words each part came from", () => {
+		const html = render();
+		assert.match(html, /When/);
+		assert.match(html, /friday 1pm/);
+		assert.match(html, /Fri 12 Jun 13:00 – 14:00/);
+	});
+
+	it("keeps the reading off screen while there is nothing to read", () => {
+		const html = render({ phrase: "  " });
+		assert.doesNotMatch(html, /An hour, because the sentence never said./);
+		assert.doesNotMatch(html, /bg-accent-2-soft/);
+	});
+
+	it("says a date on its own when the sentence gave no clock", () => {
+		const html = renderToString(
+			createElement(PhraseReading, {
+				parse: { ...parse, startTime: "", startTimeText: "" },
+				picks: {},
+				onPick: () => {},
+			}),
+		);
+		assert.match(html, /Fri 12 Jun/);
+		assert.doesNotMatch(html, /13:00/);
+	});
+
+	it("asks about a reading it could not settle instead of choosing", () => {
+		const html = render({ parse: ambiguous });
+		assert.match(html, /Which Friday\?/);
+		assert.match(html, /12 June/);
+		assert.match(html, /19 June/);
+	});
+
+	it("says which reading is currently applied", () => {
+		const html = render({ parse: ambiguous });
+		assert.match(html, /aria-pressed="true"/);
+		assert.match(html, /aria-pressed="false"/);
+	});
+
+	it("lets an answer override the reading the parser chose", () => {
+		const html = renderToString(
+			createElement(PhraseReading, {
+				parse: ambiguous,
+				picks: { which_friday: "next" },
+				onPick: () => {},
+			}),
+		);
+		const chosen = html.indexOf('aria-pressed="true"');
+		assert.ok(chosen > html.indexOf("12 June"), "the second option is pressed");
+	});
+
+	it("separates what it assumed from what the sentence never said", () => {
+		assert.match(render(), /An hour, because the sentence never said\./);
+		assert.match(render({ parse: ambiguous }), /No place given\./);
+	});
+
+	it("names the guests the sentence carried", () => {
+		assert.match(render(), /with Jane/);
+	});
+});

package/src/components/agenda-composer.stories.tsx

@@ -0,0 +1,225 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { AgendaComposer, AgendaPhraseField } from "./agenda-composer.js";
+import type {
+	AgendaParse,
+	CalendarDescriptor,
+	ChoicePicks,
+	EventDraft,
+} from "./calendar-types.js";
+
+/**
+ * Correcting the machine happens before the event exists. The sentence is read
+ * back with the words each part came from, and where it has two honest
+ * readings the composer asks rather than choosing.
+ */
+const meta: Meta<typeof AgendaComposer> = {
+	title: "Calendar/Agenda composer",
+	component: AgendaComposer,
+	parameters: { layout: "padded" },
+	decorators: [
+		(Story) => (
+			<div className="max-w-96">
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof AgendaComposer>;
+
+const calendars: CalendarDescriptor[] = [
+	{
+		id: "work",
+		accountId: "a1",
+		accountLabel: "Work",
+		name: "Northwind",
+		color: "cal-1",
+	},
+	{
+		id: "personal",
+		accountId: "a2",
+		accountLabel: "Personal",
+		name: "Family",
+		color: "cal-3",
+	},
+];
+
+const draft: EventDraft = {
+	title: "Lunch with Jane",
+	date: "2026-06-12",
+	startTime: "13:00",
+	endTime: "14:00",
+	allDay: false,
+	calendarId: "work",
+	location: "",
+	guests: "Jane",
+	notes: "",
+	repeat: "",
+};
+
+const parse: AgendaParse = {
+	title: "Lunch with Jane",
+	date: "2026-06-12",
+	dateText: "friday",
+	startTime: "13:00",
+	startTimeText: "1pm",
+	endTime: "14:00",
+	durationMinutes: 60,
+	durationText: "",
+	attendees: ["Jane"],
+	attendeesText: "with Jane",
+	location: "",
+	locationText: "",
+	repeat: "",
+	repeatText: "",
+	assumptions: ["An hour long, because the sentence never said."],
+	unresolved: [],
+	choices: [],
+};
+
+const repeating: AgendaParse = {
+	...parse,
+	title: "Standup",
+	startTime: "09:30",
+	endTime: "09:45",
+	startTimeText: "9:30",
+	dateText: "every weekday",
+	repeat: "Every weekday",
+	repeatText: "every weekday",
+	attendees: [],
+	attendeesText: "",
+	assumptions: ["Fifteen minutes, because the sentence never said."],
+};
+
+const ambiguous: AgendaParse = {
+	...parse,
+	title: "Coffee with Marcus",
+	startTime: "08:00",
+	startTimeText: "at 8",
+	endTime: "09:00",
+	attendees: ["Marcus"],
+	attendeesText: "with Marcus",
+	unresolved: ["No place given."],
+	choices: [
+		{
+			id: "which_eight",
+			question: "Eight in the morning or eight at night?",
+			source: "at 8",
+			options: [
+				{ id: "am", label: "08:00", date: "", startTime: "08:00" },
+				{ id: "pm", label: "20:00", date: "", startTime: "20:00" },
+			],
+			chosenId: "am",
+		},
+	],
+};
+
+const base = {
+	onPhraseChange: () => {},
+	picks: {} as ChoicePicks,
+	onPick: () => {},
+	draft,
+	onDraftChange: () => {},
+	calendars,
+	expanded: false,
+	onToggleExpanded: () => {},
+	onSave: () => {},
+	onCancel: () => {},
+	onOpen: () => {},
+};
+
+/** The field on its own — where the composer starts every time. */
+export const FieldOnly: Story = {
+	render: () => (
+		<AgendaPhraseField
+			phrase=""
+			onPhraseChange={() => {}}
+			onOpen={() => {}}
+			onCommit={() => {}}
+		/>
+	),
+};
+
+/** A sentence that read cleanly, with the reading shown back above the form. */
+export const Read: Story = {
+	args: {
+		...base,
+		phrase: "lunch with Jane friday 1pm",
+		parse,
+		open: true,
+	},
+};
+
+/** A rule the sentence carried, named as a rule rather than as one morning. */
+export const Repeating: Story = {
+	args: {
+		...base,
+		phrase: "standup every weekday 9:30",
+		parse: repeating,
+		draft: { ...draft, title: "Standup", repeat: "Every weekday" },
+		open: true,
+	},
+};
+
+/** Two honest readings: the question is a control, and the answer is one tap. */
+export const Ambiguous: Story = {
+	args: {
+		...base,
+		phrase: "coffee with Marcus at 8",
+		parse: ambiguous,
+		draft: { ...draft, title: "Coffee with Marcus", startTime: "08:00" },
+		open: true,
+	},
+};
+
+/** Folded away until there is something to correct. */
+export const Folded: Story = {
+	args: {
+		...base,
+		phrase: "lunch with Jane friday 1pm",
+		parse,
+		open: false,
+	},
+};
+
+/** Grown for a phone, where the form is the whole screen. */
+export const Touch: Story = {
+	args: {
+		...base,
+		phrase: "coffee with Marcus at 8",
+		parse: ambiguous,
+		open: true,
+		touch: true,
+	},
+};
+
+/** Answering the question moves the reading; nothing is settled behind you. */
+export const Interactive: Story = {
+	render: () => {
+		const [picks, setPicks] = useState<ChoicePicks>({});
+		const [phrase, setPhrase] = useState("coffee with Marcus at 8");
+		const [open, setOpen] = useState(true);
+		const [expanded, setExpanded] = useState(false);
+		const [current, setCurrent] = useState(draft);
+		return (
+			<AgendaComposer
+				{...base}
+				phrase={phrase}
+				onPhraseChange={setPhrase}
+				parse={ambiguous}
+				picks={picks}
+				onPick={(choiceId, optionId) =>
+					setPicks((previous) => ({ ...previous, [choiceId]: optionId }))
+				}
+				draft={current}
+				onDraftChange={setCurrent}
+				expanded={expanded}
+				onToggleExpanded={() => setExpanded((value) => !value)}
+				open={open}
+				onOpen={() => setOpen(true)}
+			/>
+		);
+	},
+};

package/src/components/agenda-composer.tsx

@@ -0,0 +1,283 @@
+/**
+ * Typing is the create path here, so the field is on screen at all times and
+ * the form is downstream of it.
+ *
+ * Every keystroke re-reads the sentence and writes the reading straight into
+ * the fields underneath, attributed to the words it came from. Where the
+ * sentence has two honest readings — which Friday, eight in the morning or
+ * eight at night — the reader asks instead of choosing, and the answer is one
+ * tap. Correcting the machine happens before the event exists.
+ */
+import { AlertTriangle, Info, Wand2 } from "lucide-react";
+import { formatShortDay } from "../lib/agenda-time.js";
+import { cn } from "../lib/cn.js";
+import type {
+	AgendaParse,
+	CalendarDescriptor,
+	ChoicePicks,
+	EventDraft,
+} from "./calendar-types.js";
+import { EventEditor } from "./event-editor.js";
+
+export interface AgendaComposerProps {
+	phrase: string;
+	onPhraseChange: (phrase: string) => void;
+	parse: AgendaParse;
+	picks: ChoicePicks;
+	onPick: (choiceId: string, optionId: string) => void;
+	draft: EventDraft;
+	onDraftChange: (draft: EventDraft) => void;
+	calendars: CalendarDescriptor[];
+	expanded: boolean;
+	onToggleExpanded: () => void;
+	onSave: () => void;
+	onCancel: () => void;
+	saveLabel?: string;
+	/** The rule belongs to the series; an edit scoped to one instance reads it back. */
+	repeatEditable?: boolean;
+	/** Opens the custom-rule editor from the repeat picker. */
+	onCustomRepeat?: () => void;
+	/** The form is folded away until there is something to correct. */
+	open: boolean;
+	onOpen: () => void;
+	placeholder?: string;
+	touch?: boolean;
+	className?: string;
+}
+
+export interface AgendaPhraseFieldProps {
+	phrase: string;
+	onPhraseChange: (phrase: string) => void;
+	/** Focus or a keystroke unfolds the form under the field. */
+	onOpen: () => void;
+	onCommit: () => void;
+	placeholder?: string;
+	touch?: boolean;
+	className?: string;
+}
+
+export function AgendaPhraseField({
+	phrase,
+	onPhraseChange,
+	onOpen,
+	onCommit,
+	placeholder = "lunch with Jane friday 1pm",
+	touch,
+	className,
+}: AgendaPhraseFieldProps) {
+	return (
+		<div
+			className={cn(
+				"flex items-center gap-2 rounded-md border border-line bg-surface-sunken px-3 focus-within:border-line-strong focus-within:ring-2 focus-within:ring-ring/30",
+				touch ? "min-h-11" : "h-9",
+				className,
+			)}
+		>
+			<Wand2 className="size-4 shrink-0 text-fg-subtle" aria-hidden />
+			<input
+				value={phrase}
+				aria-label="Describe the event"
+				placeholder={placeholder}
+				onFocus={onOpen}
+				onChange={(event) => {
+					onOpen();
+					onPhraseChange(event.target.value);
+				}}
+				onKeyDown={(event) => {
+					if (event.key === "Enter") onCommit();
+				}}
+				className="min-w-0 flex-1 bg-transparent text-sm text-fg outline-none placeholder:text-fg-subtle"
+			/>
+		</div>
+	);
+}
+
+export function AgendaComposer({
+	phrase,
+	onPhraseChange,
+	parse,
+	picks,
+	onPick,
+	draft,
+	onDraftChange,
+	calendars,
+	expanded,
+	onToggleExpanded,
+	onSave,
+	onCancel,
+	saveLabel = "Add",
+	repeatEditable,
+	onCustomRepeat,
+	open,
+	onOpen,
+	placeholder = "lunch with Jane friday 1pm",
+	touch,
+	className,
+}: AgendaComposerProps) {
+	return (
+		<div className={cn("flex flex-col gap-2", className)}>
+			<AgendaPhraseField
+				phrase={phrase}
+				onPhraseChange={onPhraseChange}
+				onOpen={onOpen}
+				onCommit={onSave}
+				placeholder={placeholder}
+				touch={touch}
+			/>
+
+			{open && (
+				<EventEditor
+					draft={draft}
+					onChange={onDraftChange}
+					calendars={calendars}
+					expanded={expanded}
+					onToggleExpanded={onToggleExpanded}
+					onSave={onSave}
+					onCancel={onCancel}
+					saveLabel={saveLabel}
+					repeatEditable={repeatEditable}
+					onCustomRepeat={onCustomRepeat}
+					touch={touch}
+					header={
+						phrase.trim() === "" ? undefined : (
+							<PhraseReading
+								parse={parse}
+								picks={picks}
+								onPick={onPick}
+								touch={touch}
+							/>
+						)
+					}
+				/>
+			)}
+		</div>
+	);
+}
+
+export function PhraseReading({
+	parse,
+	picks,
+	onPick,
+	touch,
+}: {
+	parse: AgendaParse;
+	picks: ChoicePicks;
+	onPick: (choiceId: string, optionId: string) => void;
+	touch?: boolean;
+}) {
+	const when =
+		parse.startTime === ""
+			? formatShortDay(parse.date)
+			: `${formatShortDay(parse.date)} ${parse.startTime} – ${parse.endTime}`;
+
+	return (
+		<div className="flex flex-col gap-1 rounded-md border border-line bg-surface px-2.5 py-2">
+			<Reading
+				label="What"
+				value={parse.title === "" ? "—" : parse.title}
+				source=""
+			/>
+			<Reading
+				label="When"
+				value={when}
+				source={[parse.dateText, parse.startTimeText]
+					.filter((part) => part !== "")
+					.join(" ")}
+			/>
+			{parse.repeat !== "" && (
+				<Reading
+					label="Repeat"
+					value={parse.repeat}
+					source={parse.repeatText}
+				/>
+			)}
+			{parse.attendees.length > 0 && (
+				<Reading
+					label="Who"
+					value={parse.attendees.join(", ")}
+					source={parse.attendeesText}
+				/>
+			)}
+			{parse.location !== "" && (
+				<Reading
+					label="Where"
+					value={parse.location}
+					source={parse.locationText}
+				/>
+			)}
+
+			{parse.choices.map((choice) => (
+				<div
+					key={choice.id}
+					className="mt-1 flex flex-wrap items-center gap-1.5 rounded-md border border-warning/50 bg-warning-soft/30 px-2 py-1.5"
+				>
+					<AlertTriangle className="size-3 shrink-0 text-warning" aria-hidden />
+					<span className="text-2xs text-warning">{choice.question}</span>
+					{choice.options.map((option) => {
+						const chosen = (picks[choice.id] ?? choice.chosenId) === option.id;
+						return (
+							<button
+								key={option.id}
+								type="button"
+								aria-pressed={chosen}
+								onClick={() => onPick(choice.id, option.id)}
+								className={cn(
+									"rounded-full border px-2 text-2xs outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring",
+									touch ? "min-h-9" : "h-6",
+									chosen
+										? "border-warning bg-warning-soft font-medium text-warning"
+										: "border-line text-fg-muted hover:border-line-strong hover:text-fg",
+								)}
+							>
+								{option.label}
+							</button>
+						);
+					})}
+				</div>
+			))}
+
+			{parse.assumptions.map((note) => (
+				<p
+					key={note}
+					className="flex items-center gap-1.5 text-2xs text-fg-subtle"
+				>
+					<Info className="size-3 shrink-0" aria-hidden />
+					{note}
+				</p>
+			))}
+			{parse.unresolved.map((note) => (
+				<p
+					key={note}
+					className="flex items-center gap-1.5 text-2xs text-warning"
+				>
+					<AlertTriangle className="size-3 shrink-0" aria-hidden />
+					{note}
+				</p>
+			))}
+		</div>
+	);
+}
+
+function Reading({
+	label,
+	value,
+	source,
+}: {
+	label: string;
+	value: string;
+	source: string;
+}) {
+	return (
+		<div className="flex min-w-0 items-baseline gap-1.5">
+			<span className="w-12 shrink-0 text-2xs uppercase tracking-wider text-fg-subtle">
+				{label}
+			</span>
+			<span className="truncate text-xs font-medium text-fg">{value}</span>
+			{source !== "" && (
+				<span className="shrink-0 rounded-xs bg-accent-2-soft px-1 text-2xs text-accent-2">
+					{source}
+				</span>
+			)}
+		</div>
+	);
+}