@remit/web-client 0.0.232 → 0.0.233

package/src/hooks/calendar/agenda-window.ts

@@ -0,0 +1,183 @@
+/**
+ * The days the strip currently holds, and the arithmetic that grows them.
+ *
+ * The agenda never paginates. It holds one contiguous run of days around the
+ * day the address names and grows it at whichever end the reader reaches, so
+ * there are no page boundaries to lose a place at and no request that throws
+ * away what is already on screen. The range is the only thing a window is: what
+ * to ask `/calendar-events` and `/calendar-free-busy` for falls out of it.
+ *
+ * Nothing here reads a clock or a router. Every function takes the day it works
+ * from, which is what lets the rules be asserted without either.
+ */
+import {
+	type BusySpan,
+	type CalendarDay,
+	datesBetween,
+	type FreeStretch,
+	freeStretchesFromSpans,
+} from "@remit/ui";
+import { isoDate } from "@/lib/calendar-route";
+import { addDays, type CalendarWindow, calendarWindow } from "./window";
+
+/**
+ * Days held behind and ahead of the day the address opened on. More ahead than
+ * behind: a reader lands on a calendar to look forward, and the days behind are
+ * there so scrolling back a little does not immediately fetch.
+ */
+export const LEAD_IN = 10;
+export const LEAD_OUT = 24;
+
+/** What reaching an end adds to it. */
+export const PAGE = 14;
+
+export interface AgendaRange {
+	/** `YYYY-MM-DD`, inclusive. */
+	from: string;
+	/** `YYYY-MM-DD`, inclusive. */
+	to: string;
+}
+
+export const rangeAround = (date: string): AgendaRange => ({
+	from: addDays(date, -LEAD_IN),
+	to: addDays(date, LEAD_OUT),
+});
+
+export const extendRangeStart = (range: AgendaRange): AgendaRange => ({
+	...range,
+	from: addDays(range.from, -PAGE),
+});
+
+export const extendRangeEnd = (range: AgendaRange): AgendaRange => ({
+	...range,
+	to: addDays(range.to, PAGE),
+});
+
+/**
+ * The range that has a day in it. A day already held keeps the range it is in —
+ * identically, so a scroll that moved the address does not throw away the days
+ * either side of it and refetch them. A day outside it is a jump, and a jump
+ * opens a window around where it landed rather than stretching one across the
+ * months in between.
+ */
+export function rangeCovering(range: AgendaRange, date: string): AgendaRange {
+	if (date >= range.from && date <= range.to) return range;
+	return rangeAround(date);
+}
+
+/**
+ * The week each day of the range is served by, deduplicated and in order.
+ *
+ * The strip holds more days than one read may ask for — the server refuses a
+ * window over a year — so the range says which weeks to fetch rather than being
+ * a window itself. Reaching an end then adds a week to this list instead of
+ * widening a single request, which is what keeps the days already on screen
+ * where they are.
+ *
+ * The weeks are `calendarWindow("week", …)` exactly, so they are the grid's own
+ * cache entries: a reader who drops into the week grid and comes back out draws
+ * from what the strip fetched, and a week the grid has already read costs the
+ * strip nothing.
+ */
+export function weekWindowsOver(dates: readonly string[]): CalendarWindow[] {
+	const byStart = new Map<string, CalendarWindow>();
+	for (const date of dates) {
+		const week = calendarWindow("week", date);
+		if (!byStart.has(week.from)) byStart.set(week.from, week);
+	}
+	return [...byStart.values()];
+}
+
+/** The week window a day belongs to, named by its `from`. */
+export const weekKeyOf = (date: string): string =>
+	calendarWindow("week", date).from;
+
+const MINUTES_IN_DAY = 24 * 60;
+
+const minuteOfInstant = (instant: Date): number =>
+	instant.getHours() * 60 + instant.getMinutes();
+
+/**
+ * Busy spans as minutes of the days they cross, on the clock this device is
+ * reading. The API answers in UTC instants because a busy stretch is an
+ * interval rather than a civil date, so the split into days happens here, where
+ * the zone the strip is drawn in is known.
+ *
+ * A span crossing midnight becomes one entry per day it touches. Each day's
+ * entries come back sorted and merged, which is the shape the free-time rule
+ * takes.
+ */
+export function busySpansByDate(
+	dates: readonly string[],
+	spans: readonly { start: string; end: string }[],
+): Map<string, BusySpan[]> {
+	const held = new Set(dates);
+	const byDate = new Map<string, BusySpan[]>();
+
+	for (const span of spans) {
+		const start = new Date(span.start);
+		const end = new Date(span.end);
+		if (Number.isNaN(start.getTime()) || Number.isNaN(end.getTime())) continue;
+		if (end.getTime() <= start.getTime()) continue;
+
+		const firstDate = isoDate(start);
+		// The instant before the end, so a span ending at midnight belongs to the
+		// day it ran through rather than opening an empty entry on the next one.
+		const lastDate = isoDate(new Date(end.getTime() - 1));
+		for (let date = firstDate; date <= lastDate; date = addDays(date, 1)) {
+			if (!held.has(date)) continue;
+			const from = date === firstDate ? minuteOfInstant(start) : 0;
+			// Read off the end's own day rather than off the loop: a span ending at
+			// midnight belongs to the day it ran through, where its end is the end
+			// of that day and not minute zero of the next one.
+			const to = isoDate(end) === date ? minuteOfInstant(end) : MINUTES_IN_DAY;
+			if (to <= from) continue;
+			const day = byDate.get(date);
+			if (day) day.push({ from, to });
+			else byDate.set(date, [{ from, to }]);
+		}
+	}
+
+	for (const [date, day] of byDate) byDate.set(date, mergeSpans(day));
+	return byDate;
+}
+
+function mergeSpans(spans: BusySpan[]): BusySpan[] {
+	const sorted = [...spans].sort((a, b) => a.from - b.from);
+	const merged: BusySpan[] = [];
+	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);
+			continue;
+		}
+		merged.push({ ...span });
+	}
+	return merged;
+}
+
+/**
+ * The free time on every day the strip holds, out of the busy spans the server
+ * merged across every calendar. It is `freeStretchesFromSpans` and nothing
+ * else: the rule lives in `@remit/ui` beside the strip that draws it, so this
+ * only decides which spans a day gets.
+ */
+export function freeStretchesByDate(
+	dates: readonly string[],
+	spans: readonly { start: string; end: string }[],
+): Map<string, FreeStretch[]> {
+	const busy = busySpansByDate(dates, spans);
+	return new Map(
+		dates.map((date) => [
+			date,
+			freeStretchesFromSpans(date, busy.get(date) ?? []),
+		]),
+	);
+}
+
+/** The days a range names, in order. */
+export const datesInRange = (range: AgendaRange): string[] =>
+	datesBetween(range.from, range.to);
+
+/** How the strip asks a day what is still open on it. */
+export type FreeLookup = (day: CalendarDay) => FreeStretch[];

package/src/hooks/calendar/index.ts

@@ -5,6 +5,22 @@
  * they ask them through the same hooks: one window is fetched once however many
  * of them are on screen, and a write invalidates what all of them are showing.
  */
+export {
+	type AgendaRange,
+	busySpansByDate,
+	datesInRange,
+	extendRangeEnd,
+	extendRangeStart,
+	type FreeLookup,
+	freeStretchesByDate,
+	LEAD_IN,
+	LEAD_OUT,
+	PAGE,
+	rangeAround,
+	rangeCovering,
+	weekKeyOf,
+	weekWindowsOver,
+} from "./agenda-window";
 export {
 	type CreateInput,
 	createInputFromDraft,
@@ -30,16 +46,29 @@ export {
 	rruleFromIcalData,
 	textFromIcalData,
 } from "./resource";
+export {
+	type CalendarSelection,
+	selectCalendarIds,
+	useCalendarSelection,
+	useDrawnEvents,
+} from "./selection";
 export {
 	type CalendarEventResource,
 	useCalendarEvent,
 } from "./useCalendarEvent";
 export {
+	CALENDAR_WINDOW_STALE_TIME,
+	type CalendarEventWeeksResult,
 	type CalendarEventWindowRequest,
 	type CalendarEventWindowResult,
+	useCalendarEventWeeks,
 	useCalendarEventWindow,
 	usePrefetchAdjacentWindows,
 } from "./useCalendarEvents";
+export {
+	type CalendarFreeBusyResult,
+	useCalendarFreeBusyWeeks,
+} from "./useCalendarFreeBusy";
 export { type CalendarsResult, useCalendars } from "./useCalendars";
 export {
 	type CalendarWriteOutcome,

package/src/hooks/calendar/selection.ts

@@ -0,0 +1,107 @@
+/**
+ * Which calendars a surface is drawing, and how their occurrences become rows.
+ *
+ * Both readings of the calendar ask this and neither may answer it its own way:
+ * the grid reads one window and the strip reads many, but "which calendars did
+ * the address tick, and what does an occurrence look like once drawn" has one
+ * answer, and a second copy of it drifts into the two surfaces disagreeing
+ * about the same day.
+ */
+import type { RemitImapCalendarEventInstance } from "@remit/api-http-client/types.gen.ts";
+import type {
+	CalendarColorId,
+	CalendarDescriptor,
+	CalendarEventData,
+} from "@remit/ui";
+import { useMemo } from "react";
+import {
+	isDrawnInstance,
+	toCalendarEventData,
+	UNZONED_CALENDAR,
+} from "./instance";
+import { useCalendars } from "./useCalendars";
+
+/**
+ * The calendars a request is asking about. An empty tick list is every
+ * calendar rather than none: a reader who has ticked nothing off is looking at
+ * all of them, and a URL naming a calendar that no longer exists shows the
+ * rest instead of an empty week.
+ */
+export function selectCalendarIds(
+	calendars: readonly CalendarDescriptor[],
+	ticked: readonly string[],
+): string[] {
+	const known = calendars.map((calendar) => calendar.id);
+	if (ticked.length === 0) return known;
+	const wanted = new Set(ticked);
+	const shown = known.filter((id) => wanted.has(id));
+	return shown.length === 0 ? known : shown;
+}
+
+export interface CalendarSelection {
+	calendars: CalendarDescriptor[];
+	colorByCalendarId: Record<string, CalendarColorId>;
+	timeZoneByCalendarId: Record<string, string>;
+	/** Every calendar this address draws, resolved against the real ones. */
+	shown: string[];
+	/** What to ask the server for: empty where that is every calendar. */
+	narrowed: string[];
+	/** False while the tick list still has no real calendars to resolve against. */
+	resolved: boolean;
+	isLoading: boolean;
+}
+
+export function useCalendarSelection(
+	calendarIds: readonly string[],
+): CalendarSelection {
+	const { calendars, colorByCalendarId, timeZoneByCalendarId, isLoading } =
+		useCalendars();
+
+	const shown = selectCalendarIds(calendars, calendarIds);
+	// Asking for every calendar by name and asking for all of them are the same
+	// question, so they are the same cache entry: the address ticking each one
+	// off must not refetch the week the address ticking none already holds.
+	const narrowed = shown.length === calendars.length ? [] : shown;
+	// A tick list can only be resolved against calendars that have loaded, so a
+	// narrowed address waits for them rather than asking about ids it cannot
+	// know are real.
+	const resolved = calendarIds.length === 0 || calendars.length > 0;
+
+	return {
+		calendars,
+		colorByCalendarId,
+		timeZoneByCalendarId,
+		shown,
+		narrowed,
+		resolved,
+		isLoading,
+	};
+}
+
+/**
+ * Occurrences as rows: the ones on a calendar being drawn, on the clock their
+ * collection keeps. A collection with no zone of its own is sent as unzoned
+ * rather than as the reader's — answering with the device's clock would rewrite
+ * every time they saved by the difference between the two.
+ */
+export function useDrawnEvents(
+	instances: readonly RemitImapCalendarEventInstance[],
+	timeZoneByCalendarId: Record<string, string>,
+	shown: readonly string[],
+): CalendarEventData[] {
+	const shownKey = shown.join(",");
+	return useMemo(() => {
+		const drawn = new Set(shownKey === "" ? [] : shownKey.split(","));
+		return instances
+			.filter(
+				(instance) =>
+					isDrawnInstance(instance) && drawn.has(instance.calendarId),
+			)
+			.map((instance) =>
+				toCalendarEventData(
+					instance,
+					timeZoneByCalendarId[instance.calendarId] ?? UNZONED_CALENDAR,
+				),
+			);
+	}, [instances, timeZoneByCalendarId, shownKey]);
+}

package/src/hooks/calendar/useCalendarEvents.ts

@@ -17,8 +17,8 @@ import type {
 	RemitImapCalendarEventInstance,
 } from "@remit/api-http-client/types.gen.ts";
 import type { CalendarViewId } from "@remit/ui";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect } from "react";
+import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useEffect, useMemo } from "react";
 import { stepCalendarDate } from "@/lib/calendar-route";
 import { softErrorStatuses } from "@/lib/error-classifier";
 import { type CalendarWindow, calendarWindow } from "./window";
@@ -39,7 +39,7 @@ const CALENDAR_READ_META = softErrorStatuses(400, 404);
  * timer — every write invalidates the windows it touched — so this only needs
  * to outlast the reader moving back and forth across a few weeks.
  */
-const CALENDAR_WINDOW_STALE_TIME = 5 * 60_000;
+export const CALENDAR_WINDOW_STALE_TIME = 5 * 60_000;
 
 export interface CalendarEventWindowRequest extends CalendarWindow {
 	/** Empty asks about every calendar the account holds. */
@@ -90,6 +90,77 @@ export function useCalendarEventWindow(
 	};
 }
 
+export interface CalendarEventWeeksResult {
+	instances: RemitImapCalendarEventInstance[];
+	/** Windows whose answer has not arrived, by their `from`. */
+	pendingWindows: Set<string>;
+	/** The first refusal any of them met. Null when they all succeeded. */
+	error: unknown;
+	refetch: () => void;
+}
+
+/**
+ * Several windows at once, each fetched and cached on its own.
+ *
+ * This is what lets a surface hold a range wider than a single read may ask
+ * for: the server refuses a window over a year, and one request that grows
+ * every time the reader reaches an end eventually becomes that window and
+ * replaces what is on screen with a refusal. A week per request has no such
+ * ceiling — reaching an end adds a key rather than widening one — and because
+ * the keys are the grid's own, dropping into the week grid and coming back out
+ * draws from what the strip already fetched, and vice versa.
+ *
+ * Windows already held keep their entries while a new one is in flight, so
+ * nothing on screen is given up to fetch what is beside it.
+ */
+export function useCalendarEventWeeks(
+	windows: readonly CalendarWindow[],
+	calendarIds: readonly string[],
+	enabled: boolean,
+): CalendarEventWeeksResult {
+	const results = useQueries({
+		queries: windows.map((window) => ({
+			...calendarEventOperationsListCalendarEventsOptions(
+				requestOptions({ ...window, calendarIds }),
+			),
+			meta: CALENDAR_READ_META,
+			staleTime: CALENDAR_WINDOW_STALE_TIME,
+			enabled,
+		})),
+	});
+
+	const froms = windows.map((window) => window.from).join("|");
+	const settled = results.map((result) => result.data);
+	const pendingKey = results.map((result) => result.isPending).join("|");
+	const firstError = results.find((result) => result.error)?.error ?? null;
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: the joined keys stand for the per-window results, which are a new array every render
+	const instances = useMemo(
+		() => settled.flatMap((data) => data?.items ?? []),
+		[froms, pendingKey],
+	);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: as above
+	const pendingWindows = useMemo(() => {
+		const pending = new Set<string>();
+		windows.forEach((window, index) => {
+			if (results[index]?.isPending) pending.add(window.from);
+		});
+		return pending;
+	}, [froms, pendingKey]);
+
+	return {
+		instances,
+		pendingWindows,
+		error: firstError,
+		refetch: () => {
+			for (const result of results) {
+				if (result.error) result.refetch();
+			}
+		},
+	};
+}
+
 /**
  * The windows either side of the one on screen, warmed while the reader is
  * looking at this one. A step is a navigation, and a navigation that has to

package/src/hooks/calendar/useCalendarFreeBusy.ts

@@ -0,0 +1,80 @@
+/**
+ * Busy time over a window, merged across every calendar the account holds.
+ *
+ * Not the same question as "what is on the strip". A calendar the reader has
+ * unticked still takes their Thursday afternoon, so "am I free" is answered off
+ * this and never off the rows on screen. The server does the merging, so two
+ * overlapping meetings in two calendars are one span here, and an event marked
+ * transparent or cancelled is not one at all.
+ *
+ * The endpoint takes no calendar filter, on purpose: narrowing it would answer
+ * a question nobody asked. It carries the same refusals as the window read — a
+ * window the server will not accept is stated in place, and a lapsed session
+ * escalates rather than being drawn as a clear diary.
+ */
+import { calendarFreeBusyOperationsListCalendarFreeBusyOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import type { RemitImapCalendarFreeBusySpan } from "@remit/api-http-client/types.gen.ts";
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { softErrorStatuses } from "@/lib/error-classifier";
+import { CALENDAR_WINDOW_STALE_TIME } from "./useCalendarEvents";
+import type { CalendarWindow } from "./window";
+
+const CALENDAR_READ_META = softErrorStatuses(400, 404);
+
+export interface CalendarFreeBusyResult {
+	spans: RemitImapCalendarFreeBusySpan[];
+	/** Windows whose answer has not arrived, by their `from`. */
+	pendingWindows: Set<string>;
+	error: unknown;
+	refetch: () => void;
+}
+
+/**
+ * Busy time a window at a time, for the same reason the events are read that
+ * way: this endpoint refuses a window over a year too, so a range that grows
+ * as the reader scrolls cannot be one request.
+ */
+export function useCalendarFreeBusyWeeks(
+	windows: readonly CalendarWindow[],
+): CalendarFreeBusyResult {
+	const results = useQueries({
+		queries: windows.map((window) => ({
+			...calendarFreeBusyOperationsListCalendarFreeBusyOptions({
+				query: { from: window.from, to: window.to },
+			}),
+			meta: CALENDAR_READ_META,
+			staleTime: CALENDAR_WINDOW_STALE_TIME,
+		})),
+	});
+
+	const froms = windows.map((window) => window.from).join("|");
+	const settled = results.map((result) => result.data);
+	const pendingKey = results.map((result) => result.isPending).join("|");
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: the joined keys stand for the per-window results, which are a new array every render
+	const spans = useMemo(
+		() => settled.flatMap((data) => data?.items ?? []),
+		[froms, pendingKey],
+	);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: as above
+	const pendingWindows = useMemo(() => {
+		const pending = new Set<string>();
+		windows.forEach((window, index) => {
+			if (results[index]?.isPending) pending.add(window.from);
+		});
+		return pending;
+	}, [froms, pendingKey]);
+
+	return {
+		spans,
+		pendingWindows,
+		error: results.find((result) => result.error)?.error ?? null,
+		refetch: () => {
+			for (const result of results) {
+				if (result.error) result.refetch();
+			}
+		},
+	};
+}

package/src/hooks/calendar/window.ts

@@ -142,9 +142,14 @@ function bounds(view: CalendarViewId, date: string): [string, string] {
 }
 
 /**
- * The window a view over a day covers. Agenda takes the week it loads, which is
- * also the unit it steps by, so the grid and the strip share a cache entry
- * wherever they are looking at the same days.
+ * The window a view over a day covers.
+ *
+ * The week is the unit every surface reads in. A grid asks for the one week it
+ * draws; the strip holds many days and asks for each of their weeks
+ * (`weekWindowsOver`), because a single read may not cover more than a year and
+ * a range that grows as the reader scrolls would eventually become one. Both
+ * therefore key on the same entries, so dropping into the grid and coming back
+ * out to the strip fetches nothing either of them already holds.
  */
 export function calendarWindow(
 	view: CalendarViewId,

package/src/hooks/useCalendarData.ts

@@ -11,16 +11,13 @@ import type {
 	CalendarEventData,
 	CalendarViewId,
 } from "@remit/ui";
-import { useMemo } from "react";
 import {
 	type CalendarInstanceRef,
 	calendarWindow,
-	isDrawnInstance,
 	readCalendarInstanceId,
-	toCalendarEventData,
-	UNZONED_CALENDAR,
 	useCalendarEventWindow,
-	useCalendars,
+	useCalendarSelection,
+	useDrawnEvents,
 	usePrefetchAdjacentWindows,
 } from "@/hooks/calendar";
 
@@ -30,6 +27,13 @@ export interface CalendarDataRequest {
 	date: string;
 	/** The calendars the address has ticked; empty means every one of them. */
 	calendarIds: readonly string[];
+	/**
+	 * False where the zoom on screen draws nothing from this window. The agenda
+	 * rolls its own range a week at a time, so asking for this view's week as
+	 * well would fetch a window nothing renders — and the address rewriting on
+	 * every scroll would ask again, with its neighbours, all the way down.
+	 */
+	enabled?: boolean;
 }
 
 export interface CalendarData {
@@ -46,66 +50,36 @@ export interface CalendarData {
 	instanceOf: (eventId: string) => CalendarInstanceRef;
 }
 
-/**
- * The calendars a request is asking about. An empty tick list is every
- * calendar rather than none: a reader who has ticked nothing off is looking at
- * all of them, and a URL naming a calendar that no longer exists shows the
- * rest instead of an empty week.
- */
-export function selectCalendarIds(
-	calendars: readonly CalendarDescriptor[],
-	ticked: readonly string[],
-): string[] {
-	const known = calendars.map((calendar) => calendar.id);
-	if (ticked.length === 0) return known;
-	const wanted = new Set(ticked);
-	const shown = known.filter((id) => wanted.has(id));
-	return shown.length === 0 ? known : shown;
-}
-
 export function useCalendarData({
 	view,
 	date,
 	calendarIds,
+	enabled = true,
 }: CalendarDataRequest): CalendarData {
-	const { calendars, colorByCalendarId, timeZoneByCalendarId, isLoading } =
-		useCalendars();
-
-	const shown = selectCalendarIds(calendars, calendarIds);
-	// Asking for every calendar by name and asking for all of them are the same
-	// question, so they are the same cache entry: the address ticking each one
-	// off must not refetch the week the address ticking none already holds.
-	const narrowed = shown.length === calendars.length ? [] : shown;
-	// A tick list can only be resolved against calendars that have loaded, so a
-	// narrowed address waits for them rather than asking about ids it cannot
-	// know are real.
-	const resolved = calendarIds.length === 0 || calendars.length > 0;
+	const {
+		calendars,
+		colorByCalendarId,
+		timeZoneByCalendarId,
+		shown,
+		narrowed,
+		resolved,
+		isLoading,
+	} = useCalendarSelection(calendarIds);
 
 	const window = calendarWindow(view, date);
+	const active = enabled && resolved;
 	const events = useCalendarEventWindow({
 		...window,
 		calendarIds: narrowed,
-		enabled: resolved,
+		enabled: active,
 	});
-	usePrefetchAdjacentWindows(view, date, narrowed, resolved);
+	usePrefetchAdjacentWindows(view, date, narrowed, active);
 
-	const shownKey = shown.join(",");
-	const instances = events.instances;
-
-	const eventData = useMemo(() => {
-		const drawn = new Set(shownKey === "" ? [] : shownKey.split(","));
-		return instances
-			.filter(
-				(instance) =>
-					isDrawnInstance(instance) && drawn.has(instance.calendarId),
-			)
-			.map((instance) =>
-				toCalendarEventData(
-					instance,
-					timeZoneByCalendarId[instance.calendarId] ?? UNZONED_CALENDAR,
-				),
-			);
-	}, [instances, timeZoneByCalendarId, shownKey]);
+	const eventData = useDrawnEvents(
+		events.instances,
+		timeZoneByCalendarId,
+		shown,
+	);
 
 	return {
 		calendars,

package/src/lib/calendar-density.ts

@@ -8,7 +8,7 @@
  * way the intelligence rail's preference is (`lib/intelligence-pref.ts`), and
  * a storage failure falls back to the default rather than crashing.
  */
-import type { Density } from "@remit/ui";
+import type { AgendaDensity, Density } from "@remit/ui";
 
 export const CALENDAR_DENSITY_KEY = "remit:calendar-density";
 
@@ -32,3 +32,15 @@ export function writeCalendarDensity(density: Density): void {
 		// Storage unavailable — the in-memory default stands.
 	}
 }
+
+/**
+ * The same preference, as the strip reads it.
+ *
+ * The strip has three readings and the preference has two, so the third — a
+ * month of coloured dots with no titles on it — is not reachable from Glance.
+ * That is deliberate: the preference says how much of a day this screen shows,
+ * not whether to say what is on it, and one calendar-wide answer beats a second
+ * control that means something different at every zoom.
+ */
+export const agendaDensityOf = (density: Density): AgendaDensity =>
+	density === "compact" ? "pills" : "detail";