@remit/ui 0.0.158 → 0.0.160

package/package.json

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

package/src/components/agenda-composer.tsx

@@ -136,6 +136,7 @@ export function AgendaComposer({
 					onCancel={onCancel}
 					saveLabel={saveLabel}
 					repeatEditable={repeatEditable}
+					guestsEditable
 					onCustomRepeat={onCustomRepeat}
 					touch={touch}
 					header={

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

@@ -9,7 +9,10 @@ import assert from "node:assert/strict";
 import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
-import { buildCalendarDay } from "../lib/agenda-time.js";
+import {
+	buildCalendarDay,
+	freeStretchesFromSpans,
+} from "../lib/agenda-time.js";
 import { AgendaFlow, type AgendaFlowProps } from "./agenda-flow.js";
 import type {
 	CalendarDescriptor,
@@ -208,6 +211,45 @@ describe("AgendaFlow", () => {
 		assert.match(render({ touch: true }), /min-h-12/);
 	});
 
+	/**
+	 * Busy time on a calendar the strip is not drawing still takes the afternoon.
+	 * Without this, a reader who unticks work reads "Free all day" for a day they
+	 * are booked solid in.
+	 */
+	it("draws the free time its owner measured rather than the gaps on screen", () => {
+		const html = words(
+			render({
+				freeOn: (day) =>
+					freeStretchesFromSpans(day.date, [{ from: 8 * 60, to: 18 * 60 }]),
+			}),
+		);
+		assert.doesNotMatch(html, /Free all day/);
+		assert.match(html, /4h free/);
+		assert.match(html, /18:00 – 22:00/);
+	});
+
+	/**
+	 * A day whose events have not arrived has no events, which is the same shape
+	 * as a day with none. Collapsed into a run it becomes "5 days with nothing
+	 * booked" — a claim about a diary nobody has read yet.
+	 */
+	it("draws a day still being fetched as a skeleton, out of every run", () => {
+		const html = words(
+			render({ loadingDates: new Set(["2026-06-13", "2026-06-14"]) }),
+		);
+		assert.match(html, /agenda-day-pending-2026-06-13/);
+		assert.match(html, /agenda-day-pending-2026-06-14/);
+		assert.match(html, /aria-busy="true"/);
+		assert.doesNotMatch(html, /5 days with nothing booked/);
+		// The days either side of them answered, and still collapse.
+		assert.match(html, /2 days with nothing booked/);
+	});
+
+	it("says nothing about what is on a day it has not heard about", () => {
+		const html = words(render({ loadingDates: new Set(["2026-06-13"]) }));
+		assert.match(html, /Loading 2026-06-13/);
+	});
+
 	it("renders whatever the owner leads today with", () => {
 		const html = render({
 			todayLead: createElement("p", null, "Next up in 30m"),

package/src/components/agenda-flow.tsx

@@ -33,7 +33,6 @@ import {
 	formatSpan,
 	freeStretchesOn,
 	groupOverlapping,
-	isClearDay,
 	minuteOfDay,
 	monthLabel,
 	weekdayLongLabel,
@@ -65,6 +64,9 @@ const LONG_FREE_MINUTES = 150;
 /** The hue every calendar the caller did not describe falls back to. */
 const FALLBACK_COLOR: CalendarColorId = "cal-1";
 
+/** Nothing outstanding, which is what a caller that never fetches has. */
+const EMPTY_DATES: ReadonlySet<string> = new Set();
+
 export interface AgendaScrollTarget {
 	date: string;
 	/** Changes on every request, so asking twice for the same day works. */
@@ -103,6 +105,20 @@ export interface AgendaFlowProps {
 	onReachEnd: () => void;
 	/** The day under the sticky header, for the position map. */
 	onVisibleDayChange: (date: string) => void;
+	/**
+	 * Days whose events have not arrived. They draw as a skeleton and are never
+	 * collapsed into a run: a day nobody has heard back about is not a day with
+	 * nothing on it, and "6 days with nothing booked" over an unanswered request
+	 * is the one sentence this strip must never print.
+	 */
+	loadingDates?: ReadonlySet<string>;
+	/**
+	 * The free time on a day, where the owner knows more about it than the rows
+	 * do. Busy time on a calendar the strip is not drawing is still not free, so
+	 * an owner holding merged busy spans answers this from those. Absent falls
+	 * back to the gaps between what is on screen.
+	 */
+	freeOn?: (day: CalendarDay) => FreeStretch[];
 	scrollTarget?: AgendaScrollTarget;
 	/**
 	 * Rendered immediately above today, and landed on with it, so what's next is
@@ -126,6 +142,8 @@ export function AgendaFlow({
 	onReachStart,
 	onReachEnd,
 	onVisibleDayChange,
+	loadingDates = EMPTY_DATES,
+	freeOn = freeStretchesOn,
 	scrollTarget,
 	todayLead,
 	touch,
@@ -141,7 +159,7 @@ export function AgendaFlow({
 	const [visibleDate, setVisibleDate] = useState(focusDate);
 
 	const lookup = useMemo(() => lookupOf(calendars), [calendars]);
-	const rows = buildAgendaRows(days, [today, focusDate]);
+	const rows = buildAgendaRows(days, [today, focusDate, ...loadingDates]);
 	const firstDate = days[0]?.date ?? "";
 	const lastDate = days[days.length - 1]?.date ?? "";
 
@@ -256,6 +274,8 @@ export function AgendaFlow({
 					lookup={lookup}
 					density={density}
 					today={today}
+					pending={row.kind === "day" && loadingDates.has(row.day.date)}
+					freeOn={freeOn}
 					selectedEventId={selectedEventId}
 					onSelectEvent={onSelectEvent}
 					onPickSlot={onPickSlot}
@@ -280,6 +300,9 @@ interface RowProps {
 	lookup: CalendarLookup;
 	density: AgendaDensity;
 	today: string;
+	/** This day's events have not arrived yet. */
+	pending: boolean;
+	freeOn: (day: CalendarDay) => FreeStretch[];
 	selectedEventId: string;
 	onSelectEvent: (eventId: string) => void;
 	onPickSlot: (pick: CalendarSlotPick) => void;
@@ -294,6 +317,8 @@ function FlowRow({
 	lookup,
 	density,
 	today,
+	pending,
+	freeOn,
 	selectedEventId,
 	onSelectEvent,
 	onPickSlot,
@@ -315,6 +340,13 @@ function FlowRow({
 			</div>
 		);
 
+	if (pending)
+		return (
+			<div ref={anchorRef}>
+				<PendingDay day={row.day} today={today} />
+			</div>
+		);
+
 	if (density === "dots")
 		return (
 			<div ref={anchorRef}>
@@ -323,6 +355,7 @@ function FlowRow({
 					day={row.day}
 					lookup={lookup}
 					today={today}
+					freeOn={freeOn}
 					onSelectEvent={onSelectEvent}
 					onZoomDay={onZoomDay}
 					selectedEventId={selectedEventId}
@@ -338,6 +371,7 @@ function FlowRow({
 				lookup={lookup}
 				density={density}
 				today={today}
+				freeOn={freeOn}
 				selectedEventId={selectedEventId}
 				onSelectEvent={onSelectEvent}
 				onPickSlot={onPickSlot}
@@ -393,11 +427,52 @@ function EmptyRun({
 	);
 }
 
+/**
+ * A day still being fetched. It keeps the date column, so the strip has the
+ * shape it will have once the answer lands and nothing jumps under the reader,
+ * and it says nothing at all about what is on the day.
+ */
+function PendingDay({ day, today }: { day: CalendarDay; today: string }) {
+	const isToday = day.date === today;
+	return (
+		<section
+			aria-busy="true"
+			data-testid={`agenda-day-pending-${day.date}`}
+			className={cn(
+				"border-b border-line",
+				isToday && "border-l-2 border-l-accent bg-accent-soft/20",
+			)}
+		>
+			<header className="flex h-section-row items-center gap-3 px-row-inset">
+				<div className="flex w-16 shrink-0 items-baseline gap-1.5">
+					<span
+						className={cn(
+							"text-lg font-semibold tabular-nums",
+							isToday ? "text-accent" : "text-fg",
+						)}
+					>
+						{day.dayNumber}
+					</span>
+					<span className="text-2xs uppercase tracking-wider text-fg-subtle">
+						{day.weekdayLabel}
+					</span>
+				</div>
+				<span className="sr-only">Loading {day.date}</span>
+				<span className="h-3 min-w-0 flex-1 animate-pulse rounded-full bg-surface-sunken" />
+			</header>
+			<div className="flex flex-col gap-1 pb-2">
+				<span className="mx-row-inset h-7 animate-pulse rounded-md bg-surface-sunken" />
+			</div>
+		</section>
+	);
+}
+
 /** The month-at-a-glance reading: one line a day, colour and shape only. */
 function DotsDay({
 	day,
 	lookup,
 	today,
+	freeOn,
 	selectedEventId,
 	onSelectEvent,
 	onZoomDay,
@@ -405,6 +480,7 @@ function DotsDay({
 	day: CalendarDay;
 	lookup: CalendarLookup;
 	today: string;
+	freeOn: (day: CalendarDay) => FreeStretch[];
 	selectedEventId: string;
 	onSelectEvent: (eventId: string) => void;
 	onZoomDay: (date: string) => void;
@@ -449,16 +525,20 @@ function DotsDay({
 			</div>
 			<BusyBar day={day} className="w-24 shrink-0" />
 			<span className="w-24 shrink-0 text-right text-2xs text-fg-subtle">
-				{glanceLabel(day)}
+				{glanceLabel(day, freeOn)}
 			</span>
 		</div>
 	);
 }
 
 /** What the day is worth saying in eleven characters. */
-function glanceLabel(day: CalendarDay): string {
-	if (day.timed.length === 0) return "clear";
-	const longest = freeStretchesOn(day).reduce(
+function glanceLabel(
+	day: CalendarDay,
+	freeOn: (day: CalendarDay) => FreeStretch[],
+): string {
+	const free = freeOn(day);
+	if (day.timed.length === 0 && isWholeDayFree(free)) return "clear";
+	const longest = free.reduce(
 		(best, stretch) => Math.max(best, stretch.minutes),
 		0,
 	);
@@ -466,11 +546,17 @@ function glanceLabel(day: CalendarDay): string {
 	return `${formatSpan(day.busyMinutes)} booked`;
 }
 
+/** Nothing takes an hour out of this day, whoever measured it. */
+function isWholeDayFree(free: readonly FreeStretch[]): boolean {
+	return free.length === 1 && free[0].wholeDay;
+}
+
 function DayBlock({
 	day,
 	lookup,
 	density,
 	today,
+	freeOn,
 	selectedEventId,
 	onSelectEvent,
 	onPickSlot,
@@ -481,6 +567,7 @@ function DayBlock({
 	lookup: CalendarLookup;
 	density: AgendaDensity;
 	today: string;
+	freeOn: (day: CalendarDay) => FreeStretch[];
 	selectedEventId: string;
 	onSelectEvent: (eventId: string) => void;
 	onPickSlot: (pick: CalendarSlotPick) => void;
@@ -489,7 +576,12 @@ function DayBlock({
 }) {
 	const isToday = day.date === today;
 	const groups = groupOverlapping(day.timed);
-	const free = freeStretchesOn(day).filter((stretch) => !stretch.wholeDay);
+	const measured = freeOn(day);
+	const free = measured.filter((stretch) => !stretch.wholeDay);
+	/* Nothing on the strip and nothing taking the day out from anywhere else.
+	   A day whose hours went to a calendar the reader has unticked is not free,
+	   so it draws its bands rather than the line that says it is clear. */
+	const clear = day.timed.length === 0 && isWholeDayFree(measured);
 
 	const items: {
 		key: string;
@@ -596,7 +688,7 @@ function DayBlock({
 						touch={touch}
 					/>
 				))}
-				{isClearDay(day) ? (
+				{clear ? (
 					<ClearDayLine day={day} onPickSlot={onPickSlot} touch={touch} />
 				) : (
 					items.map((item) => <div key={item.key}>{item.node}</div>)

package/src/components/event-editor.render.test.ts

@@ -78,11 +78,27 @@ describe("EventEditor", () => {
 	it("reveals the rest on request", () => {
 		const html = render({ expanded: true });
 		assert.match(html, /aria-label="Location"/);
-		assert.match(html, /aria-label="Guests"/);
 		assert.match(html, /aria-label="Repeat"/);
 		assert.match(html, /Fewer details/);
 	});
 
+	it("takes no guests until a surface says it can store them", () => {
+		assert.doesNotMatch(render({ expanded: true }), /aria-label="Guests"/);
+		assert.match(
+			render({ expanded: true, guestsEditable: true }),
+			/aria-label="Guests"/,
+		);
+	});
+
+	it("drops the calendar picker where the event cannot be moved", () => {
+		assert.match(render({}), /Northwind/);
+		assert.doesNotMatch(render({ calendarEditable: false }), /Northwind/);
+		assert.doesNotMatch(
+			render({ expanded: true, calendarEditable: false }),
+			/Northwind/,
+		);
+	});
+
 	it("drops the clock fields for an all-day entry", () => {
 		const html = render({ draft: { ...draft, allDay: true } });
 		assert.doesNotMatch(html, /aria-label="Start time"/);

package/src/components/event-editor.stories.tsx

@@ -64,9 +64,13 @@ const backwards: EventDraft = {
 function Live({
 	startExpanded,
 	seed: initial = seed,
+	guestsEditable,
+	calendarEditable,
 }: {
 	startExpanded: boolean;
 	seed?: EventDraft;
+	guestsEditable?: boolean;
+	calendarEditable?: boolean;
 }) {
 	const [draft, setDraft] = useState(initial);
 	const [expanded, setExpanded] = useState(startExpanded);
@@ -78,6 +82,8 @@ function Live({
 				calendars={calendars}
 				expanded={expanded}
 				onToggleExpanded={() => setExpanded((open) => !open)}
+				guestsEditable={guestsEditable}
+				calendarEditable={calendarEditable}
 				onSave={() => {}}
 				onCancel={() => {}}
 			/>
@@ -99,6 +105,24 @@ export const EndBeforeStart: Story = {
 	render: () => <Live startExpanded={false} seed={backwards} />,
 };
 
+/**
+ * Guests are opt-in. A store with nowhere to put them leaves the field out, so
+ * the default form has none: a box that takes names and drops them is worse
+ * than no box, because the reader only finds out later.
+ */
+export const WithGuests: Story = {
+	render: () => <Live startExpanded guestsEditable />,
+};
+
+/**
+ * Editing an event that already exists. The collection a resource lives in is
+ * part of its address, so the calendar is read-only here rather than a picker
+ * that changes nothing.
+ */
+export const WithoutTheCalendarPicker: Story = {
+	render: () => <Live startExpanded calendarEditable={false} />,
+};
+
 /** All day takes the clock fields away, so there is no range left to reject. */
 export const AllDay: Story = {
 	render: () => (

package/src/components/event-editor.tsx

@@ -276,6 +276,18 @@ export interface EventEditorProps {
 	 * a single instance reads the rule back instead of offering to change it.
 	 */
 	repeatEditable?: boolean;
+	/**
+	 * Whether guests can be written here. Off unless a surface says otherwise: a
+	 * box that takes names and drops them is worse than no box, because the
+	 * reader only finds out later, from an event with nobody on it.
+	 */
+	guestsEditable?: boolean;
+	/**
+	 * Whether the event can be moved to another calendar. An edit cannot: the
+	 * collection a resource lives in is part of its address, so a picker that
+	 * changes it and saves nothing is a control that lies.
+	 */
+	calendarEditable?: boolean;
 	/** Opens the custom-rule editor. Absent leaves the derived choices alone. */
 	onCustomRepeat?: () => void;
 	/** Grows the controls for a rail. */
@@ -302,6 +314,8 @@ export function EventEditor({
 	saveLabel = "Add",
 	header,
 	repeatEditable = true,
+	guestsEditable = false,
+	calendarEditable = true,
 	onCustomRepeat,
 	touch,
 	className,
@@ -363,10 +377,12 @@ export function EventEditor({
 				{header}
 				<EventField label="Title">{title}</EventField>
 				<EventField label="When">{when}</EventField>
-				<EventField label="Calendar">{calendarPicker}</EventField>
+				{calendarEditable && (
+					<EventField label="Calendar">{calendarPicker}</EventField>
+				)}
 				<EventField label="Repeat">{repeat}</EventField>
 				<EventField label="Location">{location}</EventField>
-				<EventField label="Guests">{guests}</EventField>
+				{guestsEditable && <EventField label="Guests">{guests}</EventField>}
 				<EventField label="Notes">{notes}</EventField>
 				{actions}
 			</div>
@@ -381,7 +397,7 @@ export function EventEditor({
 
 			{title}
 			{when}
-			{calendarPicker}
+			{calendarEditable && calendarPicker}
 
 			{onToggleExpanded && (
 				<button
@@ -405,7 +421,7 @@ export function EventEditor({
 			{!folded && (
 				<div className="flex flex-col gap-2 border-t border-line pt-3">
 					{location}
-					{guests}
+					{guestsEditable && guests}
 					{repeat}
 					{notes}
 				</div>

package/src/index.ts

@@ -855,6 +855,7 @@ export {
 	formatShortDay,
 	formatSpan,
 	freeAhead,
+	freeStretchesFromSpans,
 	freeStretchesOn,
 	groupOverlapping,
 	isClearDay,

package/src/lib/agenda-time.test.ts

@@ -27,6 +27,7 @@ import {
 	formatShortDay,
 	formatSpan,
 	freeAhead,
+	freeStretchesFromSpans,
 	freeStretchesOn,
 	groupOverlapping,
 	isClearDay,
@@ -247,6 +248,64 @@ describe("free time", () => {
 	});
 });
 
+/**
+ * The same rule, measured off spans nobody drew. `/calendar-free-busy` merges
+ * every calendar the reader holds, so the answer to "am I free" has to come out
+ * of that rather than out of the rows on screen — and it has to be the answer
+ * the rows would have given, or the strip and the server disagree about one
+ * afternoon.
+ */
+describe("freeStretchesFromSpans", () => {
+	const spans = (day: CalendarDay) =>
+		freeStretchesFromSpans(day.date, busySpansOn(day));
+
+	it("gives the same answer as the day it was measured off", () => {
+		for (const date of [TODAY, "2026-06-11", "2026-06-13"]) {
+			const day = dayOn(date);
+			assert.deepEqual(clocks(spans(day)), clocks(freeStretchesOn(day)));
+		}
+	});
+
+	it("takes hours out of a day nothing on the strip is booked in", () => {
+		const busy = [
+			{ from: 9 * 60, to: 12 * 60 },
+			{ from: 13 * 60, to: 16 * 60 },
+		];
+		assert.deepEqual(clocks(freeStretchesFromSpans("2026-06-11", busy)), [
+			"16:00–22:00",
+		]);
+	});
+
+	it("reads no spans at all as free all day", () => {
+		const [whole] = freeStretchesFromSpans("2026-06-11", []);
+		assert.equal(whole.wholeDay, true);
+		assert.deepEqual(clocks([whole]), ["08:00–22:00"]);
+	});
+
+	/**
+	 * The cursor only moves forward, so spans arriving out of order used to emit
+	 * a band across time that is booked. A caller cannot be asked to remember a
+	 * precondition whose only symptom is being told an afternoon is free.
+	 */
+	it("orders and joins the spans it was given, however they arrive", () => {
+		const scrambled = [
+			{ from: 13 * 60, to: 16 * 60 },
+			{ from: 9 * 60, to: 12 * 60 },
+			{ from: 11 * 60, to: 13 * 60 },
+		];
+		assert.deepEqual(clocks(freeStretchesFromSpans("2026-06-11", scrambled)), [
+			"16:00–22:00",
+		]);
+	});
+
+	it("clips a span that runs past the window the day is measured inside", () => {
+		assert.deepEqual(
+			clocks(freeStretchesFromSpans("2026-06-11", [{ from: 0, to: 9 * 60 }])),
+			["09:00–22:00"],
+		);
+	});
+});
+
 describe("buildAgendaRows", () => {
 	const rows = buildAgendaRows(days, [TODAY]);
 

package/src/lib/agenda-time.ts

@@ -221,15 +221,25 @@ export interface BusySpan {
  * option is measured off that rather than off a row count.
  */
 export function busySpansOn(day: CalendarDay): BusySpan[] {
-	const spans = day.timed
-		.map((event) => ({
+	return mergeBusySpans(
+		day.timed.map((event) => ({
 			from: minuteOfDay(event.start),
 			to: minuteOfDay(event.end),
-		}))
-		.sort((a, b) => a.from - b.from);
+		})),
+	);
+}
 
+/**
+ * Spans in start order, with anything that runs into its neighbour joined to
+ * it. Every reading of busy time goes through this, so a caller never has to
+ * know whether the spans it holds were already in order — one meeting split
+ * across two calendars and one that ran late are the same shape by the time
+ * anything measures free time against them.
+ */
+export function mergeBusySpans(spans: readonly BusySpan[]): BusySpan[] {
+	const sorted = [...spans].sort((a, b) => a.from - b.from);
 	const merged: BusySpan[] = [];
-	for (const span of spans) {
+	for (const span of sorted) {
 		const last = merged[merged.length - 1];
 		if (last && span.from <= last.to) {
 			last.to = Math.max(last.to, span.to);
@@ -245,22 +255,36 @@ function insideWindow(minute: number): number {
 }
 
 /**
- * The gaps between those spans, inside the window worth calling a day.
+ * The gaps between merged busy spans, inside the window worth calling a day.
  *
  * Both ends of every span are pulled into the window before they are measured,
  * and the cursor only ever moves forward, so an event running past the window
  * cannot stretch a band past it either and a span that ends before it starts —
  * an overnight event, which the editor writes onto one date — cannot leave the
  * cursor where the tail would emit a second band over the first.
+ *
+ * Spans rather than a day, because busy time is not always drawn: a calendar
+ * the reader has unticked, and every calendar the server merges into
+ * `/calendar-free-busy`, still take hours out of a Thursday. One rule answers
+ * "when am I free" wherever the busy time was measured, so the strip and the
+ * server cannot disagree about the same afternoon.
+ *
+ * The spans are put in order and joined here rather than being required that
+ * way. The cursor only moves forward, so spans handed over out of order would
+ * silently emit a band across time that is booked — a caller cannot be asked to
+ * remember a precondition whose only symptom is being told an afternoon is free
+ * when it is not.
  */
-export function freeStretchesOn(
-	day: CalendarDay,
+export function freeStretchesFromSpans(
+	date: string,
+	spans: readonly BusySpan[],
 	minMinutes = FREE_MINUTES,
 ): FreeStretch[] {
-	if (day.timed.length === 0)
+	const busy = mergeBusySpans(spans);
+	if (busy.length === 0)
 		return [
 			{
-				date: day.date,
+				date,
 				startMinute: DAY_START_MINUTE,
 				endMinute: DAY_END_MINUTE,
 				minutes: DAY_END_MINUTE - DAY_START_MINUTE,
@@ -268,15 +292,14 @@ export function freeStretchesOn(
 			},
 		];
 
-	const merged = busySpansOn(day);
 	const stretches: FreeStretch[] = [];
 	let cursor = DAY_START_MINUTE;
-	for (const span of merged) {
+	for (const span of busy) {
 		const from = insideWindow(span.from);
 		const to = insideWindow(span.to);
 		if (from - cursor >= minMinutes)
 			stretches.push({
-				date: day.date,
+				date,
 				startMinute: cursor,
 				endMinute: from,
 				minutes: from - cursor,
@@ -286,7 +309,7 @@ export function freeStretchesOn(
 	}
 	if (DAY_END_MINUTE - cursor >= minMinutes)
 		stretches.push({
-			date: day.date,
+			date,
 			startMinute: cursor,
 			endMinute: DAY_END_MINUTE,
 			minutes: DAY_END_MINUTE - cursor,
@@ -295,6 +318,14 @@ export function freeStretchesOn(
 	return stretches;
 }
 
+/** The free time left by the events on a day, which is the same rule. */
+export function freeStretchesOn(
+	day: CalendarDay,
+	minMinutes = FREE_MINUTES,
+): FreeStretch[] {
+	return freeStretchesFromSpans(day.date, busySpansOn(day), minMinutes);
+}
+
 export interface ClashOptions {
 	/** Spans that are not a clash: the candidate itself, or one already answered. */
 	ignoreIds?: readonly string[];