@remit/ui 0.0.156 → 0.0.158

package/src/components/nav-sidebar.tsx

@@ -560,9 +560,9 @@ export interface NavSidebarProps
 	 */
 	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.
+	 * Whether the calendar destination sits under the daily brief. Hidden by
+	 * default so a host with no calendar route behind it does not offer an entry
+	 * that leads nowhere.
 	 */
 	calendarNav?: "hidden" | "shown";
 	/** Every saved query, most recently saved first. See `SavedSearchesGroup`. */

package/src/index.ts

@@ -147,6 +147,14 @@ export {
 	CalendarEventChip,
 	type CalendarEventChipProps,
 } from "./components/calendar-event-chip.js";
+export {
+	CalendarEventChipContent,
+	type CalendarEventChipContentProps,
+} from "./components/calendar-event-chip-content.js";
+export {
+	CalendarGrid,
+	type CalendarGridProps,
+} from "./components/calendar-grid.js";
 export {
 	CalendarList,
 	type CalendarListProps,
@@ -881,6 +889,16 @@ export {
 	type CalendarColorClasses,
 	calendarColorClasses,
 } from "./lib/calendar-color.js";
+export {
+	type CalendarEventShell,
+	calendarEventBodyClasses,
+} from "./lib/calendar-event-shell.js";
+export {
+	DRAFT_MINUTES,
+	isDraggedSelection,
+	pointPick,
+	rangePick,
+} from "./lib/calendar-slot-pick.js";
 export {
 	buildCidResolver,
 	type CidResolvableBodyPart,

package/src/lib/calendar-event-shell.ts

@@ -0,0 +1,55 @@
+import type { Density } from "../components/app-shell-types.js";
+import type {
+	CalendarColorId,
+	RsvpState,
+} from "../components/calendar-types.js";
+import { calendarColorClasses } from "./calendar-color.js";
+import { cn } from "./cn.js";
+
+export interface CalendarEventShell {
+	color: CalendarColorId;
+	/**
+	 * `row` is the horizontal pill of the all-day band and the month grid.
+	 * `column` is the block that fills its slot in a time grid.
+	 */
+	layout: "row" | "column";
+	density: Density;
+	/** The reader's own reply. A declined event dims; it never recolours. */
+	rsvp: RsvpState;
+	status: "confirmed" | "tentative";
+	selected: boolean;
+	/** Two lines rather than one: a title with something under it. */
+	stacked: boolean;
+}
+
+/**
+ * The coloured body of one event: the hue, the RSVP, the selection, and the box
+ * they sit in.
+ *
+ * `CalendarEventChip` draws this body inside a button of its own.
+ * `CalendarGrid` cannot — its engine builds the event's element and takes a
+ * class string for it — so there the engine's element *is* the body, styled
+ * from here. Neither surface restates the other.
+ *
+ * How the body is sized is left to the surface: the chip stretches it beside a
+ * leading slot, and the grid's engine has already positioned it.
+ */
+export function calendarEventBodyClasses(shell: CalendarEventShell): string {
+	const hue = calendarColorClasses(shell.color);
+	const provisional =
+		shell.rsvp === "tentative" || shell.status === "tentative";
+	return cn(
+		"flex min-w-0 overflow-hidden rounded-sm border-l-2 px-1.5 py-0.5",
+		hue.soft,
+		hue.text,
+		hue.rail,
+		shell.layout === "column" || shell.stacked
+			? "flex-col"
+			: "items-center gap-1.5",
+		provisional && "border-y border-r border-dashed",
+		provisional && hue.border,
+		shell.rsvp === "declined" && "opacity-60",
+		shell.selected && "ring-2 ring-ring",
+		shell.density === "compact" ? "text-2xs" : "text-xs",
+	);
+}

package/src/lib/calendar-slot-pick.test.ts

@@ -0,0 +1,140 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	isDraggedSelection,
+	pointPick,
+	rangePick,
+} from "./calendar-slot-pick.js";
+
+describe("pointPick", () => {
+	it("drafts an hour from the point that was clicked", () => {
+		assert.deepEqual(pointPick("2026-06-10T14:30:00+02:00", false), {
+			date: "2026-06-10",
+			startTime: "14:30",
+			endTime: "15:30",
+			allDay: false,
+		});
+	});
+
+	it("reads the clock off the string, not off the host's zone", () => {
+		/* The same instant, written in two zones. A pick reads the wall clock the
+		   grid drew, so each keeps its own — a Date would collapse both to the
+		   runner's zone. */
+		assert.equal(
+			pointPick("2026-06-10T09:00:00+02:00", false).startTime,
+			"09:00",
+		);
+		assert.equal(pointPick("2026-06-10T07:00:00Z", false).startTime, "07:00");
+	});
+
+	it("carries an all-day point with no clock at all", () => {
+		assert.deepEqual(pointPick("2026-06-10", true), {
+			date: "2026-06-10",
+			startTime: "",
+			endTime: "",
+			allDay: true,
+		});
+	});
+
+	it("rolls a draft that runs past midnight round the clock", () => {
+		assert.equal(
+			pointPick("2026-06-10T23:30:00+02:00", false).endTime,
+			"00:30",
+		);
+	});
+});
+
+describe("rangePick", () => {
+	it("keeps both ends of a dragged range", () => {
+		assert.deepEqual(
+			rangePick(
+				"2026-06-10T09:00:00+02:00",
+				"2026-06-10T11:30:00+02:00",
+				false,
+			),
+			{
+				date: "2026-06-10",
+				startTime: "09:00",
+				endTime: "11:30",
+				allDay: false,
+			},
+		);
+	});
+
+	it("drops the clock off an all-day range", () => {
+		assert.deepEqual(rangePick("2026-06-10", "2026-06-13", true), {
+			date: "2026-06-10",
+			startTime: "",
+			endTime: "",
+			allDay: true,
+		});
+	});
+});
+
+describe("isDraggedSelection", () => {
+	const slot = 30;
+
+	it("calls one slot a click, not a drag", () => {
+		assert.equal(
+			isDraggedSelection(
+				"2026-06-10T09:00:00+02:00",
+				"2026-06-10T09:30:00+02:00",
+				false,
+				slot,
+			),
+			false,
+		);
+	});
+
+	it("calls anything wider than a slot a drag", () => {
+		assert.equal(
+			isDraggedSelection(
+				"2026-06-10T09:00:00+02:00",
+				"2026-06-10T10:00:00+02:00",
+				false,
+				slot,
+			),
+			true,
+		);
+	});
+
+	it("measures against the slot in force, so a coarser grid clicks wider", () => {
+		assert.equal(
+			isDraggedSelection(
+				"2026-06-10T09:00:00+02:00",
+				"2026-06-10T10:00:00+02:00",
+				false,
+				60,
+			),
+			false,
+		);
+	});
+
+	it("calls a single all-day cell a click", () => {
+		assert.equal(
+			isDraggedSelection("2026-06-10", "2026-06-11", true, slot),
+			false,
+		);
+	});
+
+	it("calls two all-day cells a drag", () => {
+		assert.equal(
+			isDraggedSelection("2026-06-10", "2026-06-12", true, slot),
+			true,
+		);
+	});
+
+	it("survives a day that changed length under it", () => {
+		/* The Amsterdam DST spring forward: 25 to 26 October is 25 hours long, and
+		   rounding is what keeps that one cell a click. */
+		assert.equal(
+			isDraggedSelection(
+				"2026-10-25T00:00:00+02:00",
+				"2026-10-26T00:00:00+01:00",
+				true,
+				slot,
+			),
+			false,
+		);
+	});
+});

package/src/lib/calendar-slot-pick.ts

@@ -0,0 +1,65 @@
+import type { CalendarSlotPick } from "../components/calendar-types.js";
+import { addMinutesToClock } from "./event-phrase.js";
+
+/** How long a new event is when nobody said — the hour every other path starts from. */
+export const DRAFT_MINUTES = 60;
+
+const MS_PER_MINUTE = 60_000;
+const MS_PER_DAY = 86_400_000;
+
+/**
+ * A pick is read off the ISO strings the calendar hands the callback, never off
+ * its `Date`. The grid runs in the calendar's own zone; a `Date` read through
+ * `getHours()` is that instant in the host's zone, so a UTC runner would draft
+ * 09:00 for a click on 11:00.
+ */
+export function rangePick(
+	startStr: string,
+	endStr: string,
+	allDay: boolean,
+): CalendarSlotPick {
+	if (allDay) return allDayPick(startStr);
+	return {
+		date: startStr.slice(0, 10),
+		startTime: startStr.slice(11, 16),
+		endTime: endStr.slice(11, 16),
+		allDay: false,
+	};
+}
+
+/** A single point on the grid, an hour long because nothing said otherwise. */
+export function pointPick(dateStr: string, allDay: boolean): CalendarSlotPick {
+	if (allDay) return allDayPick(dateStr);
+	const startTime = dateStr.slice(11, 16);
+	return {
+		date: dateStr.slice(0, 10),
+		startTime,
+		endTime: addMinutesToClock(startTime, DRAFT_MINUTES),
+		allDay: false,
+	};
+}
+
+function allDayPick(dateStr: string): CalendarSlotPick {
+	return {
+		date: dateStr.slice(0, 10),
+		startTime: "",
+		endTime: "",
+		allDay: true,
+	};
+}
+
+/**
+ * Whether a selection was dragged across the grid rather than landing on it.
+ * One slot, or one day, is as small as a selection gets, which is exactly what
+ * a click leaves behind — and a click is already a pick of its own.
+ */
+export function isDraggedSelection(
+	startStr: string,
+	endStr: string,
+	allDay: boolean,
+	slotMinutes: number,
+): boolean {
+	const span = Date.parse(endStr) - Date.parse(startStr);
+	if (allDay) return Math.round(span / MS_PER_DAY) > 1;
+	return span / MS_PER_MINUTE > slotMinutes;
+}