@rapidmx/web-client 0.2.0

package/apps/shared/components/calendar/RecurrenceEditor.tsx

@@ -0,0 +1,180 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { RecurrenceFrequency, RecurrenceRule, WeekdayCode } from "@rapidmx/react-shared/calendar/calendarApi.js";
+import { WEEKDAY_CODES, WEEKDAY_LABELS, describeRecurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+
+const SELECT_CLASS =
+    "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+const INPUT_CLASS =
+    "text-sm py-2 px-2 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+const FREQ_LABEL: Record<RecurrenceFrequency, { unit: string; unitPlural: string }> = {
+    daily: { unit: "day", unitPlural: "days" },
+    weekly: { unit: "week", unitPlural: "weeks" },
+    monthly: { unit: "month", unitPlural: "months" },
+    yearly: { unit: "year", unitPlural: "years" },
+};
+
+type EndCondition = "never" | "count" | "until";
+
+function endConditionOf(rule: RecurrenceRule): EndCondition {
+    if (rule.count) return "count";
+    if (rule.until) return "until";
+    return "never";
+}
+
+export interface RecurrenceEditorProps {
+    /** `null` means "does not repeat". */
+    value: RecurrenceRule | null;
+    onChange: (value: RecurrenceRule | null) => void;
+}
+
+/**
+ * A recurring-event editor: frequency + interval, a weekday picker (weekly only), and an end
+ * condition (never / after N occurrences / on a date) — everything `RecurrenceRule` can express. The
+ * live "every ... until/for ..." summary comes from `describeRecurrence()` (built on `rrule`'s own
+ * `.toText()`), so it never drifts out of sync with what will actually be submitted.
+ */
+export default function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
+    function handleEnable(enabled: boolean) {
+        onChange(enabled ? { freq: "weekly", interval: 1, byDay: ["MO"], exceptions: [] } : null);
+    }
+
+    // `update`/`toggleDay` are only ever invoked from handlers rendered inside the `{value && (...)}`
+    // block below, so `value` is always non-null here — no defensive null check needed.
+    function update(patch: Partial<RecurrenceRule>) {
+        onChange({ ...(value as RecurrenceRule), ...patch });
+    }
+
+    function toggleDay(day: WeekdayCode) {
+        const current = (value as RecurrenceRule).byDay ?? [];
+        const next = current.includes(day) ? current.filter((d) => d !== day) : [...current, day];
+        update({ byDay: next });
+    }
+
+    function handleEndCondition(condition: EndCondition) {
+        if (condition === "never") {
+            update({ count: undefined, until: undefined });
+        } else if (condition === "count") {
+            update({ count: 10, until: undefined });
+        } else {
+            update({ until: new Date().toISOString(), count: undefined });
+        }
+    }
+
+    return (
+        <div className="flex flex-col gap-3">
+            <label className="flex items-center gap-2 text-sm font-medium">
+                <input type="checkbox" checked={value !== null} onChange={(e) => handleEnable(e.target.checked)} />
+                Repeats
+            </label>
+
+            {value && (
+                <div className="flex flex-col gap-3 pl-6 border-l-2 border-border">
+                    <div className="flex items-center gap-2 text-sm">
+                        <span>Every</span>
+                        <input
+                            type="number"
+                            min={1}
+                            className={`${INPUT_CLASS} w-16`}
+                            value={value.interval}
+                            onChange={(e) => update({ interval: Number(e.target.value) })}
+                            aria-label="Recurrence interval"
+                        />
+                        <select
+                            className={SELECT_CLASS}
+                            value={value.freq}
+                            onChange={(e) => update({ freq: e.target.value as RecurrenceFrequency })}
+                            aria-label="Recurrence frequency"
+                        >
+                            <option value="daily">{value.interval === 1 ? FREQ_LABEL.daily.unit : FREQ_LABEL.daily.unitPlural}</option>
+                            <option value="weekly">{value.interval === 1 ? FREQ_LABEL.weekly.unit : FREQ_LABEL.weekly.unitPlural}</option>
+                            <option value="monthly">{value.interval === 1 ? FREQ_LABEL.monthly.unit : FREQ_LABEL.monthly.unitPlural}</option>
+                            <option value="yearly">{value.interval === 1 ? FREQ_LABEL.yearly.unit : FREQ_LABEL.yearly.unitPlural}</option>
+                        </select>
+                    </div>
+
+                    {value.freq === "weekly" && (
+                        <div className="flex gap-1">
+                            {WEEKDAY_CODES.map((day) => (
+                                <button
+                                    key={day}
+                                    type="button"
+                                    onClick={() => toggleDay(day)}
+                                    aria-pressed={(value.byDay ?? []).includes(day)}
+                                    aria-label={WEEKDAY_LABELS[day]}
+                                    className={[
+                                        "w-9 h-9 rounded-full text-xs font-semibold border",
+                                        (value.byDay ?? []).includes(day)
+                                            ? "bg-primary text-white border-primary"
+                                            : "bg-surface text-text-muted border-border hover:border-primary",
+                                    ].join(" ")}
+                                >
+                                    <span aria-hidden="true">{WEEKDAY_LABELS[day][0]}</span>
+                                </button>
+                            ))}
+                        </div>
+                    )}
+
+                    <fieldset className="flex flex-col gap-1.5 text-sm">
+                        <legend className="text-xs font-bold uppercase tracking-wide text-text-muted mb-1">Ends</legend>
+                        <label className="flex items-center gap-2">
+                            <input
+                                type="radio"
+                                name="recurrence-end"
+                                checked={endConditionOf(value) === "never"}
+                                onChange={() => handleEndCondition("never")}
+                            />
+                            Never
+                        </label>
+                        <label className="flex items-center gap-2">
+                            <input
+                                type="radio"
+                                name="recurrence-end"
+                                aria-label="After"
+                                checked={endConditionOf(value) === "count"}
+                                onChange={() => handleEndCondition("count")}
+                            />
+                            After
+                            <input
+                                type="number"
+                                min={1}
+                                className={`${INPUT_CLASS} w-16`}
+                                value={value.count ?? 10}
+                                disabled={endConditionOf(value) !== "count"}
+                                onChange={(e) => update({ count: Number(e.target.value) })}
+                                aria-label="Number of occurrences"
+                            />
+                            occurrences
+                        </label>
+                        <label className="flex items-center gap-2">
+                            <input
+                                type="radio"
+                                name="recurrence-end"
+                                aria-label="On"
+                                checked={endConditionOf(value) === "until"}
+                                onChange={() => handleEndCondition("until")}
+                            />
+                            On
+                            <input
+                                type="date"
+                                className={INPUT_CLASS}
+                                value={value.until ? value.until.slice(0, 10) : ""}
+                                disabled={endConditionOf(value) !== "until"}
+                                onChange={(e) => update({ until: new Date(e.target.value).toISOString() })}
+                                aria-label="End date"
+                            />
+                        </label>
+                    </fieldset>
+
+                    {((value.freq !== "weekly" || (value.byDay ?? []).length > 0)) && (
+                        <p className="text-xs text-text-muted">Repeats {describeRecurrence(value)}.</p>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}

package/apps/shared/components/calendar/ResourcePicker.tsx

@@ -0,0 +1,80 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { RefObject, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { Mailbox, listResourceMailboxes } from "@rapidmx/react-shared/mail/mailApi.js";
+import PopoverPortal from "@rapidmx/react-shared/components/overlays/PopoverPortal.js";
+
+export interface ResourcePickerProps {
+    anchorRef: RefObject<HTMLElement | null>;
+    onClose: () => void;
+    onSelect: (mailbox: Mailbox) => void;
+    /** Addresses already added as attendees (lowercased by the caller) — excluded from the list so the
+     * same room/equipment mailbox can't be picked twice. */
+    excludeAddresses: string[];
+}
+
+/**
+ * A searchable dropdown of bookable resource mailboxes (rooms/equipment), for adding one as a `"resource"`
+ * attendee in `EventModal` without typing its raw address. Fetches the caller's full visible resource-mailbox
+ * list once on open and filters it client-side by name/address as the reader types — the same
+ * "fetch-flat-list, filter-client-side" contract every other list endpoint in this codebase already uses
+ * (see `calendarApi.ts`'s `listCalendarEvents` doc comment), since there is no dedicated server-side search
+ * endpoint for mailboxes and the resource-mailbox count in any one org is expected to be small.
+ */
+export default function ResourcePicker({ anchorRef, onClose, onSelect, excludeAddresses }: ResourcePickerProps) {
+    const [resources, setResources] = useState<Mailbox[] | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [query, setQuery] = useState("");
+
+    useEffect(() => {
+        listResourceMailboxes({ limit: 100 })
+            .then(setResources)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load resources."));
+    }, []);
+
+    const excluded = new Set(excludeAddresses);
+    const filtered = (resources ?? []).filter((mailbox) => {
+        if (excluded.has(mailbox.primarySmtpAddress.toLowerCase())) {
+            return false;
+        }
+        const haystack = `${mailbox.displayName} ${mailbox.primarySmtpAddress}`.toLowerCase();
+        return haystack.includes(query.trim().toLowerCase());
+    });
+
+    return (
+        <PopoverPortal anchorRef={anchorRef} onClose={onClose} width={280} height={320} aria-label="Add a room or equipment resource">
+            <input
+                type="text"
+                autoFocus
+                placeholder="Search rooms & equipment…"
+                className="text-sm py-2 px-3 border-b border-border bg-surface text-text focus:outline-none"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+            />
+            <div className="flex-1 overflow-y-auto">
+                {error && <p className="text-xs text-danger p-3">{error}</p>}
+                {!error && resources === null && <p className="text-xs text-text-muted p-3">Loading&hellip;</p>}
+                {!error && resources !== null && filtered.length === 0 && (
+                    <p className="text-xs text-text-muted p-3">No matching resources.</p>
+                )}
+                {filtered.map((mailbox) => (
+                    <button
+                        key={mailbox.uid}
+                        type="button"
+                        onClick={() => onSelect(mailbox)}
+                        className="w-full text-left px-3 py-2 text-sm hover:bg-surface-alt flex items-center justify-between gap-2"
+                    >
+                        <span className="truncate">{mailbox.displayName}</span>
+                        <span className="text-xs text-text-muted shrink-0 capitalize">
+                            {mailbox.resourceType ?? "room"}
+                            {mailbox.resourceCapacity ? ` · ${mailbox.resourceCapacity}` : ""}
+                        </span>
+                    </button>
+                ))}
+            </div>
+        </PopoverPortal>
+    );
+}

package/apps/shared/components/calendar/SplitDayView.tsx

@@ -0,0 +1,137 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { addMinutes, format, isSameDay, startOfDay } from "date-fns";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+
+const HOUR_HEIGHT_PX = 48;
+const SLOT_MINUTES = 30;
+const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+
+export interface SplitDayColumn {
+    folderUid: string;
+    name: string;
+    color: string;
+}
+
+export interface SplitDayViewProps {
+    day: Date;
+    columns: SplitDayColumn[];
+    /** Already expanded for `day` — see `recurrence.ts`'s `expandAllOccurrences`. Not pre-filtered by
+     * calendar; this component splits them into columns itself by `occurrence.folderUid`. */
+    occurrences: CalendarOccurrence[];
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** Click on an empty slot in one calendar's column — the calendar it belongs to is `folderUid`. */
+    onSelectSlot: (start: Date, end: Date, folderUid: string) => void;
+}
+
+/**
+ * Outlook's "Split" view: one column per checked calendar, all showing the same single day, so
+ * events across calendars can be compared side by side. A deliberately separate component from
+ * `TimeGridView` rather than a generalization of it — it shares that component's visual language
+ * (same hour rail, same slot height) but is genuinely simpler in one respect: no drag-to-move/resize.
+ * Dragging an event between calendar columns would mean reassigning its `folderUid`, a real feature
+ * `moveOccurrence`/`resolveDragAction` don't support today; rather than bolt that on, this view is
+ * click-only (select an event, or click a slot to create one already targeted at that column's
+ * calendar) — a practical scope cut, not an oversight.
+ */
+export default function SplitDayView({ day, columns, occurrences, onSelectEvent, onSelectSlot }: SplitDayViewProps) {
+    const dayOccurrences = occurrences.filter((occ) => isSameDay(new Date(occ.startDate), day));
+    const dayStart = startOfDay(day);
+
+    return (
+        <div role="region" aria-label="Split view" className="flex-1 flex flex-col min-h-0 overflow-y-auto">
+            <div className="flex border-b border-border shrink-0">
+                <div className="w-14 shrink-0" />
+                {columns.map((col) => (
+                    <div key={col.folderUid} className="flex-1 min-w-0 py-1 flex items-center justify-center gap-1.5 border-l border-border">
+                        <span aria-hidden="true" className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: col.color }} />
+                        <span className="text-xs font-semibold truncate">{col.name}</span>
+                    </div>
+                ))}
+            </div>
+            <div className="flex flex-1">
+                <div className="w-14 shrink-0">
+                    {HOURS.map((hour) => (
+                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
+                            {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
+                        </div>
+                    ))}
+                </div>
+                {columns.map((col) => (
+                    <SplitColumn
+                        key={col.folderUid}
+                        column={col}
+                        dayStart={dayStart}
+                        occurrences={dayOccurrences.filter((occ) => occ.folderUid === col.folderUid)}
+                        onSelectEvent={onSelectEvent}
+                        onSelectSlot={onSelectSlot}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+function SplitColumn({
+    column,
+    dayStart,
+    occurrences,
+    onSelectEvent,
+    onSelectSlot,
+}: {
+    column: SplitDayColumn;
+    dayStart: Date;
+    occurrences: CalendarOccurrence[];
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    onSelectSlot: (start: Date, end: Date, folderUid: string) => void;
+}) {
+    return (
+        <div className="flex-1 min-w-0 relative border-l border-border">
+            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
+                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
+                return (
+                    <button
+                        key={i}
+                        type="button"
+                        onClick={() => onSelectSlot(slotStart, addMinutes(slotStart, SLOT_MINUTES), column.folderUid)}
+                        style={{ height: HOUR_HEIGHT_PX / 2 }}
+                        className="block w-full border-b border-border/50 text-left"
+                        aria-label={`New event at ${format(slotStart, "h:mm a")} in ${column.name}`}
+                    />
+                );
+            })}
+            {occurrences.map((occurrence) => {
+                const start = new Date(occurrence.startDate);
+                const end = new Date(occurrence.endDate);
+                const top = ((start.getTime() - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX;
+                const height = Math.max(((end.getTime() - start.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX, 16);
+                const isFree = occurrence.busyStatus === "free";
+                return (
+                    <div
+                        key={occurrence.occurrenceKey}
+                        onClick={() => onSelectEvent(occurrence)}
+                        style={{
+                            position: "absolute",
+                            top,
+                            height,
+                            left: 2,
+                            right: 2,
+                            ...(isFree ? undefined : { backgroundColor: column.color, color: "#fff" }),
+                        }}
+                        className={[
+                            "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
+                            isFree ? "bg-surface-alt text-text-muted" : "",
+                        ].join(" ")}
+                    >
+                        <div className="font-medium truncate">{occurrence.title}</div>
+                        <div className="truncate">{format(start, "h:mma")}</div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}

package/apps/shared/components/calendar/TimeGridView.tsx

@@ -0,0 +1,198 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import { addMinutes, format, isSameDay, isToday, startOfDay } from "date-fns";
+import { dayDropId, eventDragId, resizeDragId, slotDropId } from "@rapidmx/react-shared/calendar/calendarDragIds.js";
+import { CalendarOccurrence } from "@rapidmx/react-shared/calendar/recurrence.js";
+
+const HOUR_HEIGHT_PX = 48;
+const SLOT_MINUTES = 30;
+const SLOTS_PER_DAY = (24 * 60) / SLOT_MINUTES;
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+
+export interface TimeGridViewProps {
+    /** One day for the Day view, seven for the Week view, five for the Work Week view. */
+    days: Date[];
+    /** Already expanded for the visible range — see `recurrence.ts`'s `expandAllOccurrences`. */
+    occurrences: CalendarOccurrence[];
+    /** Each occurrence's own calendar color, keyed by `folderUid` — see `calendarColors.ts`. */
+    folderColors: Record<string, string>;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    /** Click on an empty slot — start/end default to a 30-minute block there, for the "New event" flow. */
+    onSelectSlot: (start: Date, end: Date) => void;
+}
+
+/** An hourly time grid (Week, Work Week, or Day view — they share all their rendering/drag logic and
+ * differ only in how many day columns are shown), with a day-header row and all-day events in a
+ * header strip above it. */
+export default function TimeGridView({ days, occurrences, folderColors, onSelectEvent, onSelectSlot }: TimeGridViewProps) {
+    const allDayEvents = occurrences.filter((occ) => occ.allDay);
+    const timedEvents = occurrences.filter((occ) => !occ.allDay);
+
+    return (
+        <div className="flex-1 flex flex-col min-h-0 overflow-y-auto">
+            <div className="flex border-b border-border shrink-0">
+                <div className="w-14 shrink-0" />
+                {days.map((day) => (
+                    <div
+                        key={day.toISOString()}
+                        className={["flex-1 min-w-0 py-1 text-center text-xs font-semibold border-l border-border", isToday(day) ? "text-primary-dark" : ""].join(" ")}
+                    >
+                        {format(day, "EEE d")}
+                    </div>
+                ))}
+            </div>
+            {allDayEvents.length > 0 && (
+                <div className="flex border-b border-border shrink-0">
+                    <div className="w-14 shrink-0" />
+                    {days.map((day) => (
+                        <div key={day.toISOString()} className="flex-1 min-w-0 p-1 flex flex-col gap-0.5 border-l border-border">
+                            {allDayEvents
+                                .filter((occ) => isSameDay(new Date(occ.startDate), day))
+                                .map((occ) => (
+                                    <button
+                                        key={occ.occurrenceKey}
+                                        type="button"
+                                        onClick={() => onSelectEvent(occ)}
+                                        style={{ backgroundColor: folderColors[occ.folderUid], color: "#fff" }}
+                                        className="text-xs text-left truncate rounded-sm px-1.5 py-0.5"
+                                    >
+                                        {occ.title}
+                                    </button>
+                                ))}
+                        </div>
+                    ))}
+                </div>
+            )}
+            <div className="flex flex-1">
+                <div className="w-14 shrink-0">
+                    {HOURS.map((hour) => (
+                        <div key={hour} style={{ height: HOUR_HEIGHT_PX }} className="text-[10px] text-text-muted text-right pr-1.5 -mt-1.5">
+                            {hour === 0 ? "" : format(new Date(2000, 0, 1, hour), "ha")}
+                        </div>
+                    ))}
+                </div>
+                {days.map((day) => (
+                    <DayColumn
+                        key={day.toISOString()}
+                        day={day}
+                        occurrences={timedEvents.filter((occ) => isSameDay(new Date(occ.startDate), day))}
+                        folderColors={folderColors}
+                        onSelectEvent={onSelectEvent}
+                        onSelectSlot={onSelectSlot}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+interface DayColumnProps {
+    day: Date;
+    occurrences: CalendarOccurrence[];
+    folderColors: Record<string, string>;
+    onSelectEvent: (occurrence: CalendarOccurrence) => void;
+    onSelectSlot: (start: Date, end: Date) => void;
+}
+
+function DayColumn({ day, occurrences, folderColors, onSelectEvent, onSelectSlot }: DayColumnProps) {
+    const dayStart = startOfDay(day);
+
+    return (
+        <div className={["flex-1 min-w-0 relative border-l border-border", isToday(day) ? "bg-primary/5" : ""].join(" ")}>
+            {Array.from({ length: SLOTS_PER_DAY }, (_, i) => {
+                const slotStart = addMinutes(dayStart, i * SLOT_MINUTES);
+                return <TimeSlot key={i} start={slotStart} onSelectSlot={onSelectSlot} />;
+            })}
+            {occurrences.map((occurrence) => (
+                <EventBlock
+                    key={occurrence.occurrenceKey}
+                    occurrence={occurrence}
+                    color={folderColors[occurrence.folderUid]}
+                    dayStart={dayStart}
+                    onSelect={onSelectEvent}
+                />
+            ))}
+        </div>
+    );
+}
+
+function TimeSlot({ start, onSelectSlot }: { start: Date; onSelectSlot: (start: Date, end: Date) => void }) {
+    const { setNodeRef, isOver } = useDroppable({ id: slotDropId(start) });
+    return (
+        <button
+            ref={setNodeRef}
+            type="button"
+            onClick={() => onSelectSlot(start, addMinutes(start, SLOT_MINUTES))}
+            style={{ height: HOUR_HEIGHT_PX / 2 }}
+            className={["block w-full border-b border-border/50 text-left", isOver ? "bg-primary/10" : ""].join(" ")}
+            aria-label={`New event at ${format(start, "h:mm a, MMM d")}`}
+        />
+    );
+}
+
+function EventBlock({
+    occurrence,
+    color,
+    dayStart,
+    onSelect,
+}: {
+    occurrence: CalendarOccurrence;
+    /** This occurrence's calendar color — see `calendarColors.ts`. Only applied for a "busy" block; a
+     * "free" one keeps Outlook's own muted/outline treatment regardless of which calendar it's on. */
+    color: string;
+    dayStart: Date;
+    onSelect: (occurrence: CalendarOccurrence) => void;
+}) {
+    const { setNodeRef, listeners, attributes, transform, isDragging } = useDraggable({ id: eventDragId(occurrence) });
+    const { setNodeRef: setResizeRef, listeners: resizeListeners, attributes: resizeAttributes } = useDraggable({
+        id: resizeDragId(occurrence),
+    });
+    const isFree = occurrence.busyStatus === "free";
+
+    const start = new Date(occurrence.startDate);
+    const end = new Date(occurrence.endDate);
+    const top = ((start.getTime() - dayStart.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX;
+    // The resize handle's own drag position has no live pixel preview (it only applies its ns-resize
+    // affordance) — the actual new end time is computed from whichever slot it's dropped onto (see
+    // `resolveDragAction`'s "resize" case), snapped to the grid rather than following the pointer
+    // continuously. Simpler, and avoids a visual preview that could disagree with the snapped result.
+    const height = Math.max(((end.getTime() - start.getTime()) / 60_000 / 60) * HOUR_HEIGHT_PX, 16);
+
+    return (
+        <div
+            ref={setNodeRef}
+            onClick={() => onSelect(occurrence)}
+            style={{
+                position: "absolute",
+                top,
+                height,
+                left: 2,
+                right: 2,
+                transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : undefined,
+                zIndex: isDragging ? 10 : undefined,
+                ...(isFree ? undefined : { backgroundColor: color, color: "#fff" }),
+            }}
+            className={[
+                "rounded-sm px-1.5 py-0.5 text-xs text-left overflow-hidden cursor-pointer",
+                isFree ? "bg-surface-alt text-text-muted" : "",
+                isDragging ? "opacity-50" : "",
+            ].join(" ")}
+            {...listeners}
+            {...attributes}
+        >
+            <div className="font-medium truncate">{occurrence.title}</div>
+            <div className="truncate">{format(start, "h:mma")}</div>
+            <div
+                ref={setResizeRef}
+                className="absolute bottom-0 left-0 right-0 h-1.5 cursor-ns-resize"
+                aria-label={`Resize "${occurrence.title}"`}
+                {...resizeListeners}
+                {...resizeAttributes}
+            />
+        </div>
+    );
+}