@rightkit/workspace-ui 0.0.0-stage → 0.2.0

package/dist/views/CalendarEventPopover.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog } from "@rightkit/react-shell/react";
+import { eventDay, hhmm } from "../lib/calendarUtils.js";
+import { useWorkspaceClient } from "../host.js";
+export function CalendarEventPopover({ openEvent, setOpenEvent, openEventForm, deleteEv, rsvp, }) {
+    const { openExternal } = useWorkspaceClient();
+    return (_jsxs(Dialog, { title: openEvent.summary || "(no title)", width: 420, onClose: () => setOpenEvent(null), children: [_jsxs("p", { className: "event-when", children: [openEvent.all_day
+                        ? new Date(eventDay(openEvent)).toLocaleDateString([], { weekday: "long", month: "long", day: "numeric" }) + " · all day"
+                        : `${new Date(openEvent.start).toLocaleDateString([], { weekday: "long", month: "long", day: "numeric" })} · ${hhmm(openEvent.start)}${openEvent.end ? `–${hhmm(openEvent.end)}` : ""}`, openEvent.is_recurring ? " · repeats" : ""] }), openEvent.location && _jsx("p", { className: "hint", children: openEvent.location }), openEvent.description && _jsx("p", { className: "event-desc", children: openEvent.description }), openEvent.attendees.length > 0 && (_jsxs("p", { className: "hint", children: [openEvent.attendees.length, " guest", openEvent.attendees.length > 1 ? "s" : ""] })), _jsxs("div", { className: "ws-detail-actions", children: [openEvent.meet_link && (_jsx(Button, { variant: "primary", size: "sm", onClick: () => openExternal(openEvent.meet_link), children: "Join Meet" })), openEvent.my_response && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => rsvp(openEvent, "accepted"), children: "Yes" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => rsvp(openEvent, "tentative"), children: "Maybe" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => rsvp(openEvent, "declined"), children: "No" })] })), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => openEventForm(openEvent), children: "Edit" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => deleteEv(openEvent), children: "Delete" })] })] }));
+}

package/dist/views/CalendarGrids.d.ts

@@ -0,0 +1,16 @@
+import type { CalEvent } from "../client.js";
+export declare function MonthGrid({ cursor, events, today, onDay, onEvent }: {
+    cursor: number;
+    events: CalEvent[];
+    today: number;
+    onDay: (ms: number) => void;
+    onEvent: (e: CalEvent) => void;
+}): import("react").JSX.Element;
+export declare function TimeGrid({ days, events, today, nowMin, onSlot, onEvent }: {
+    days: number[];
+    events: CalEvent[];
+    today: number;
+    nowMin: number;
+    onSlot: (ms: number) => void;
+    onEvent: (e: CalEvent) => void;
+}): import("react").JSX.Element;

package/dist/views/CalendarGrids.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@rightkit/react-shell/react";
+import { useEffect, useMemo, useRef } from "react";
+import { DAY, WEEKDAY_LABELS, eventDay, hhmm, sameDay, startOfWeek } from "../lib/calendarUtils.js";
+export function MonthGrid({ cursor, events, today, onDay, onEvent }) {
+    const d = new Date(cursor);
+    const first = new Date(d.getFullYear(), d.getMonth(), 1).getTime();
+    const gridStart = startOfWeek(first);
+    const month = d.getMonth();
+    const byDay = useMemo(() => {
+        const m = new Map();
+        for (const e of events) {
+            const k = eventDay(e);
+            (m.get(k) ?? m.set(k, []).get(k)).push(e);
+        }
+        return m;
+    }, [events]);
+    return (_jsxs("div", { className: "month-grid", children: [_jsx("div", { className: "month-dow", children: WEEKDAY_LABELS.map((w) => _jsx("div", { className: "dow-cell", children: w }, w)) }), _jsx("div", { className: "month-cells", children: Array.from({ length: 42 }, (_, i) => {
+                    const ms = gridStart + i * DAY;
+                    const day = new Date(ms);
+                    const inMonth = day.getMonth() === month;
+                    const isToday = ms === today;
+                    const dayEvents = byDay.get(ms) ?? [];
+                    return (_jsxs("div", { className: `month-cell ${inMonth ? "" : "out"} ${isToday ? "today" : ""}`, onClick: () => onDay(ms), children: [_jsx(Button, { variant: "ghost", className: "hit-overlay", "aria-label": day.toDateString() }), _jsx("div", { className: "month-daynum", children: _jsx("span", { className: isToday ? "today-pill" : "", children: day.getDate() }) }), _jsxs("div", { className: "month-events", children: [dayEvents.slice(0, 4).map((e) => (_jsxs(Button, { variant: "ghost", className: `cal-chip ${e.all_day ? "allday" : ""}`, title: e.summary, onClick: (ev) => { ev.stopPropagation(); onEvent(e); }, children: [!e.all_day && _jsx("span", { className: "chip-dot" }), !e.all_day && _jsx("span", { className: "chip-time", children: hhmm(e.start) }), _jsx("span", { className: "chip-name", children: e.summary || "(no title)" })] }, e.id))), dayEvents.length > 4 && _jsxs("span", { className: "chip-more", children: ["+", dayEvents.length - 4, " more"] })] })] }, i));
+                }) })] }));
+}
+const HOUR_PX = 48;
+const HOURS = Array.from({ length: 24 }, (_, h) => h);
+const formatHour = (h) => `${(h % 12) || 12} ${h < 12 ? "AM" : "PM"}`;
+const minOf = (iso) => {
+    const d = new Date(iso);
+    return d.getHours() * 60 + d.getMinutes();
+};
+function packLanes(evs) {
+    const res = new Map();
+    const items = evs
+        .map((e) => {
+        const s = new Date(e.start).getTime();
+        const en = e.end ? new Date(e.end).getTime() : s + 3600000;
+        return { id: e.id, s, en: Math.max(en, s + 15 * 60000) };
+    })
+        .sort((a, b) => a.s - b.s);
+    let i = 0;
+    while (i < items.length) {
+        let clusterEnd = items[i].en;
+        const cluster = [items[i]];
+        let j = i;
+        while (j + 1 < items.length && items[j + 1].s < clusterEnd) {
+            j++;
+            cluster.push(items[j]);
+            clusterEnd = Math.max(clusterEnd, items[j].en);
+        }
+        const laneEnds = [];
+        for (const it of cluster) {
+            let lane = laneEnds.findIndex((end) => end <= it.s);
+            if (lane === -1) {
+                lane = laneEnds.length;
+                laneEnds.push(it.en);
+            }
+            else
+                laneEnds[lane] = it.en;
+            res.set(it.id, { lane, lanes: 0 });
+        }
+        for (const it of cluster)
+            res.get(it.id).lanes = laneEnds.length;
+        i = j + 1;
+    }
+    return res;
+}
+export function TimeGrid({ days, events, today, nowMin, onSlot, onEvent }) {
+    const bodyRef = useRef(null);
+    useEffect(() => {
+        if (bodyRef.current)
+            bodyRef.current.scrollTop = 7 * HOUR_PX;
+    }, []);
+    const cols = `64px repeat(${days.length}, 1fr)`;
+    return (_jsxs("div", { className: "time-grid", children: [_jsxs("div", { className: "tg-head", style: { gridTemplateColumns: cols }, children: [_jsx("div", { className: "tg-corner" }), days.map((ms) => {
+                        const d = new Date(ms);
+                        return (_jsxs("div", { className: `tg-day-head ${ms === today ? "today" : ""}`, children: [_jsx("span", { className: "tg-dow", children: WEEKDAY_LABELS[d.getDay()] }), _jsx("span", { className: `tg-daynum ${ms === today ? "today-pill" : ""}`, children: d.getDate() })] }, ms));
+                    })] }), _jsxs("div", { className: "tg-allday", style: { gridTemplateColumns: cols }, children: [_jsx("div", { className: "tg-corner tg-allday-label", children: "all-day" }), days.map((ms) => {
+                        const ad = events.filter((e) => e.all_day && sameDay(eventDay(e), ms));
+                        return (_jsx("div", { className: "tg-allday-col", children: ad.map((e) => (_jsx(Button, { variant: "ghost", className: "cal-chip allday", title: e.summary, onClick: () => onEvent(e), children: _jsx("span", { className: "chip-name", children: e.summary || "(no title)" }) }, e.id))) }, ms));
+                    })] }), _jsxs("div", { className: "tg-body", ref: bodyRef, style: { gridTemplateColumns: cols }, children: [_jsx("div", { className: "tg-gutter", children: HOURS.map((h) => (_jsx("div", { className: "tg-hour-label", style: { height: HOUR_PX }, children: h === 0 ? "" : formatHour(h) }, h))) }), days.map((ms) => {
+                        const dayEvents = events
+                            .filter((e) => !e.all_day && sameDay(eventDay(e), ms))
+                            .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime());
+                        const lanes = packLanes(dayEvents);
+                        return (_jsxs("div", { className: `tg-col ${ms === today ? "today" : ""}`, style: { height: 24 * HOUR_PX }, onClick: (ev) => {
+                                const rect = ev.currentTarget.getBoundingClientRect();
+                                const hour = Math.max(0, Math.min(23, Math.floor((ev.clientY - rect.top) / HOUR_PX)));
+                                onSlot(ms + hour * 3600000);
+                            }, children: [HOURS.map((h) => (_jsx("div", { className: "tg-hline", style: { top: h * HOUR_PX } }, h))), ms === today && _jsx("div", { className: "tg-now", style: { top: (nowMin / 60) * HOUR_PX } }), dayEvents.map((e) => {
+                                    const startMin = minOf(e.start);
+                                    const rawEnd = e.end ? minOf(e.end) + (new Date(e.end).getDate() !== new Date(e.start).getDate() ? 1440 : 0) : startMin + 60;
+                                    const endMin = Math.max(startMin + 20, rawEnd);
+                                    const li = lanes.get(e.id) ?? { lane: 0, lanes: 1 };
+                                    const w = 100 / li.lanes;
+                                    return (_jsxs(Button, { variant: "ghost", className: "tg-event", style: {
+                                            top: (startMin / 60) * HOUR_PX,
+                                            height: ((endMin - startMin) / 60) * HOUR_PX,
+                                            left: `calc(${li.lane * w}% + 2px)`,
+                                            width: `calc(${w}% - 4px)`,
+                                        }, title: e.summary, onClick: (ev) => { ev.stopPropagation(); onEvent(e); }, children: [_jsx("span", { className: "tg-event-name", children: e.summary || "(no title)" }), _jsxs("span", { className: "tg-event-time", children: [hhmm(e.start), e.meet_link ? " · Meet" : ""] })] }, e.id));
+                                })] }, ms));
+                    })] })] }));
+}

package/dist/views/CalendarView.d.ts

@@ -0,0 +1,3 @@
+declare function CalendarViewInner(): import("react").JSX.Element;
+export declare const CalendarView: import("react").MemoExoticComponent<typeof CalendarViewInner>;
+export {};

package/dist/views/CalendarView.js

@@ -0,0 +1,332 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, IconButton, Dialog, SegmentedControl } from "@rightkit/react-shell/react";
+import { memo, useEffect, useRef, useState } from "react";
+import { Icon } from "../icons.js";
+import { MonthGrid, TimeGrid } from "./CalendarGrids.js";
+import { DAY, rangeFor, startOfDay, startOfWeek } from "../lib/calendarUtils.js";
+import { CalendarEventFormModal } from "./CalendarEventFormModal.js";
+import { CalendarEventPopover } from "./CalendarEventPopover.js";
+import { HostAccountSwitcher, useWorkspaceClient, useWorkspaceHost, useWorkspaceState } from "../host.js";
+const CALENDAR_VIEWS = ["month", "week", "day"];
+function CalendarViewInner() {
+    const [recurScope, setRecurScope] = useState(null);
+    const { listCalendars, listEvents, createEvent, updateEvent, deleteEvent, truncateEventSeries, rsvpEvent, freeBusy } = useWorkspaceClient();
+    const showDialog = useWorkspaceHost().dialog;
+    const setPref = useWorkspaceHost().savePreference;
+    const activeAccount = useWorkspaceState((s) => s.activeAccount);
+    const setErr = useWorkspaceHost().reportError;
+    const showUndo = useWorkspaceHost().notify;
+    const setCalendars = useWorkspaceState((s) => s.setCalendars);
+    const selectedCal = useWorkspaceState((s) => s.selectedCal);
+    const setSelectedCal = useWorkspaceState((s) => s.setSelectedCal);
+    const shownCals = useWorkspaceState((s) => s.shownCals);
+    const setShownCals = useWorkspaceState((s) => s.setShownCals);
+    const calView = useWorkspaceState((s) => s.calView);
+    const setCalView = useWorkspaceState((s) => s.setCalView);
+    const calCursor = useWorkspaceState((s) => s.calCursor);
+    const setCalCursor = useWorkspaceState((s) => s.setCalCursor);
+    const events = useWorkspaceState((s) => s.events);
+    const setEvents = useWorkspaceState((s) => s.setEvents);
+    const openEvent = useWorkspaceState((s) => s.openEvent);
+    const setOpenEvent = useWorkspaceState((s) => s.setOpenEvent);
+    const eventForm = useWorkspaceState((s) => s.eventForm);
+    const setEventForm = useWorkspaceState((s) => s.setEventForm);
+    const freeBusyMsg = useWorkspaceState((s) => s.freeBusyMsg);
+    const setFreeBusyMsg = useWorkspaceState((s) => s.setFreeBusyMsg);
+    const setCalendarBusy = useWorkspaceState((s) => s.setCalendarBusy);
+    const eventSeed = useWorkspaceState((s) => s.eventSeed);
+    const setEventSeed = useWorkspaceState((s) => s.setEventSeed);
+    const [calendarNow] = useState(() => {
+        const now = new Date();
+        return {
+            today: startOfDay(now.getTime()),
+            minute: now.getHours() * 60 + now.getMinutes(),
+        };
+    });
+    async function reloadEvents() {
+        if (!activeAccount)
+            return;
+        const [minMs, maxMs] = rangeFor(calCursor, calView);
+        const min = new Date(minMs).toISOString();
+        const max = new Date(maxMs).toISOString();
+        const cals = Array.from(new Set(shownCals.length ? shownCals : [selectedCal]));
+        setCalendarBusy(true);
+        try {
+            const lists = await Promise.all(cals.map((c) => listEvents(activeAccount, c, min, max).catch(() => [])));
+            setEvents(lists.flat().sort((a, b) => {
+                const ax = a.start ? new Date(a.start).getTime() : 0;
+                const bx = b.start ? new Date(b.start).getTime() : 0;
+                return ax - bx;
+            }));
+        }
+        catch (e) {
+            setErr(String(e));
+        }
+        finally {
+            setCalendarBusy(false);
+        }
+    }
+    function toLocalInput(s) {
+        try {
+            const d = new Date(s);
+            return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 16);
+        }
+        catch {
+            return "";
+        }
+    }
+    function buildRrule(f) {
+        if (!f.recurrence)
+            return null;
+        const parts = [`FREQ=${f.recurrence}`];
+        if (f.recurrence === "WEEKLY" && f.recurByday.length > 0)
+            parts.push(`BYDAY=${f.recurByday.join(",")}`);
+        if (f.recurEnd === "until" && f.recurUntil) {
+            const ymd = f.recurUntil.replace(/-/g, "");
+            parts.push(f.allDay ? `UNTIL=${ymd}` : `UNTIL=${ymd}T235959Z`);
+        }
+        else if (f.recurEnd === "count") {
+            const n = Math.max(1, parseInt(f.recurCount, 10) || 0);
+            if (n > 0)
+                parts.push(`COUNT=${n}`);
+        }
+        return `RRULE:${parts.join(";")}`;
+    }
+    function fillEditForm(ev, targetId) {
+        setRecurScope(null);
+        setEventForm({
+            id: targetId,
+            summary: ev.summary,
+            start: ev.all_day ? `${ev.start.slice(0, 10)}T09:00` : toLocalInput(ev.start),
+            end: ev.all_day ? `${ev.end.slice(0, 10)}T10:00` : toLocalInput(ev.end),
+            allDay: ev.all_day,
+            attendees: ev.attendees.map((a) => a.email).join(", "),
+            reminderMinutes: "",
+            addMeet: !!ev.meet_link,
+            recurrence: "",
+            recurEnd: "never",
+            recurUntil: "",
+            recurCount: "",
+            recurByday: [],
+        });
+        setFreeBusyMsg("");
+    }
+    /** Open the new/edit form. `seedDay` (ms) pre-dates a new event from a grid click. */
+    function openEventForm(ev, prefillSummary, withMeet = false, seedDay) {
+        setOpenEvent(null);
+        if (ev) {
+            if (ev.is_recurring && ev.recurring_event_id) {
+                setRecurScope({ ev, mode: "edit" });
+                return;
+            }
+            fillEditForm(ev, ev.id);
+            return;
+        }
+        // seedDay is the exact start time for a grid-click (month cells pass 9am,
+        // the time grid passes the clicked hour); otherwise round to the next hour.
+        const base = seedDay !== undefined ? new Date(seedDay) : new Date();
+        if (seedDay === undefined)
+            base.setMinutes(0, 0, 0);
+        const start = new Date(base.getTime() - base.getTimezoneOffset() * 60000);
+        const end = new Date(start.getTime() + 3600000);
+        setEventForm({
+            summary: prefillSummary ?? "",
+            start: start.toISOString().slice(0, 16),
+            end: end.toISOString().slice(0, 16),
+            allDay: false,
+            attendees: "",
+            reminderMinutes: "10",
+            addMeet: withMeet,
+            recurrence: "",
+            recurEnd: "never",
+            recurUntil: "",
+            recurCount: "",
+            recurByday: [],
+        });
+        setFreeBusyMsg("");
+    }
+    async function checkAvailability() {
+        if (!activeAccount || !eventForm)
+            return;
+        const guests = eventForm.attendees.split(",").map((s) => s.trim()).filter(Boolean);
+        if (guests.length === 0) {
+            setFreeBusyMsg("Add guests first.");
+            return;
+        }
+        const startIso = eventForm.allDay ? `${eventForm.start.slice(0, 10)}T00:00:00Z` : new Date(eventForm.start).toISOString();
+        const endIso = eventForm.allDay ? `${eventForm.end.slice(0, 10)}T23:59:59Z` : new Date(eventForm.end || eventForm.start).toISOString();
+        setFreeBusyMsg("Checking…");
+        try {
+            const res = await freeBusy(activeAccount, guests, startIso, endIso);
+            const busy = res.filter((r) => r.busy.length > 0).map((r) => r.calendar_id);
+            setFreeBusyMsg(busy.length === 0 ? "All guests are free." : `Busy: ${busy.join(", ")}`);
+        }
+        catch (e) {
+            setFreeBusyMsg(String(e));
+        }
+    }
+    async function submitEvent() {
+        if (!activeAccount || !eventForm)
+            return;
+        if (!eventForm.summary.trim() || !eventForm.start) {
+            setErr("Event needs a title and start time.");
+            return;
+        }
+        const f = eventForm;
+        const ev = {
+            summary: f.summary,
+            startRfc3339: f.allDay ? f.start.slice(0, 10) : new Date(f.start).toISOString(),
+            endRfc3339: f.allDay ? f.end.slice(0, 10) : new Date(f.end || f.start).toISOString(),
+            allDay: f.allDay,
+            timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC",
+            attendees: f.attendees.split(/[,;\s]+/).map((s) => s.trim()).filter(Boolean),
+            reminderMinutes: f.reminderMinutes ? Number(f.reminderMinutes) : null,
+            addMeet: f.addMeet,
+            recurrence: buildRrule(f),
+        };
+        try {
+            if (f.id)
+                await updateEvent(activeAccount, selectedCal, f.id, ev);
+            else
+                await createEvent(activeAccount, selectedCal, ev);
+            setEventForm(null);
+            await reloadEvents();
+            showUndo(f.id ? "Event updated" : "Event created");
+        }
+        catch (e) {
+            setErr(String(e));
+        }
+    }
+    function performDelete(ev, targetId) {
+        if (!activeAccount)
+            return;
+        setRecurScope(null);
+        deleteEvent(activeAccount, ev.calendar_id || selectedCal, targetId)
+            .then(() => {
+            setOpenEvent(null);
+            return reloadEvents();
+        })
+            .then(() => showUndo("Event deleted"))
+            .catch((e) => setErr(String(e)));
+    }
+    function performTruncate(ev) {
+        if (!activeAccount)
+            return;
+        setRecurScope(null);
+        truncateEventSeries(activeAccount, ev.calendar_id || selectedCal, ev.recurring_event_id, ev.start)
+            .then(() => {
+            setOpenEvent(null);
+            return reloadEvents();
+        })
+            .then(() => showUndo("This and following events removed"))
+            .catch((e) => setErr(String(e)));
+    }
+    async function deleteEv(ev) {
+        if (!activeAccount)
+            return;
+        if (ev.is_recurring && ev.recurring_event_id) {
+            setRecurScope({ ev, mode: "delete" });
+            return;
+        }
+        if ((await showDialog({ kind: "confirm", message: `Delete "${ev.summary}"? Guests will be notified.` })) !== "ok")
+            return;
+        performDelete(ev, ev.id);
+    }
+    function rsvp(ev, response) {
+        if (!activeAccount)
+            return;
+        rsvpEvent(activeAccount, ev.calendar_id || selectedCal, ev.id, activeAccount, response)
+            .then(() => reloadEvents())
+            .then(() => {
+            setOpenEvent(null);
+            showUndo(`RSVP: ${response}`);
+        })
+            .catch((e) => setErr(String(e)));
+    }
+    // Load calendars once per account; pick the primary as the create target.
+    useEffect(() => {
+        setEventForm(null);
+        setOpenEvent(null);
+        if (!activeAccount)
+            return;
+        setCalendarBusy(true);
+        listCalendars(activeAccount)
+            .then((cals) => {
+            setCalendars(cals);
+            const cal = cals.find((c) => c.primary)?.id || cals[0]?.id || "primary";
+            setSelectedCal(cal);
+            // Like Google web, show ALL calendars by default the first time (so the
+            // grid isn't blank when events live on secondary calendars). Only seed
+            // when the user hasn't already chosen a subset.
+            if (shownCals.length === 0 && cals.length > 0) {
+                const all = cals.map((c) => c.id);
+                setShownCals(all);
+                setPref("shownCals", all);
+            }
+        })
+            .catch((e) => setErr(String(e)))
+            .finally(() => setCalendarBusy(false));
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- setEventForm/setOpenEvent/setErr/shownCals.length/setShownCals are store setters or a derived read; tracking them would refetch calendars on every render instead of only on account change.
+    }, [activeAccount]);
+    // Re-fetch whenever the focused period, view, account, or visible calendars change.
+    useEffect(() => {
+        if (!activeAccount)
+            return;
+        reloadEvents();
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- reloadEvents is a plain function redefined every render (closes over selectedCal/setErr); tracking it would refetch events on every render instead of only on the five real scope inputs.
+    }, [activeAccount, calCursor, calView, shownCals, selectedCal]);
+    // "Create event from email" / "Schedule meeting" → open the prefilled form.
+    useEffect(() => {
+        if (!eventSeed)
+            return;
+        const id = window.setTimeout(() => {
+            openEventForm(undefined, eventSeed.summary, eventSeed.withMeet);
+            setEventSeed(null);
+        }, 0);
+        return () => window.clearTimeout(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- openEventForm/setEventSeed are recreated every render; tracking them would clear+rearm the timeout on every render instead of only when a new eventSeed arrives.
+    }, [eventSeed]);
+    function step(dir) {
+        const d = new Date(calCursor);
+        if (calView === "day")
+            setCalCursor(calCursor + dir * DAY);
+        else if (calView === "week")
+            setCalCursor(calCursor + dir * 7 * DAY);
+        else
+            setCalCursor(new Date(d.getFullYear(), d.getMonth() + dir, Math.min(d.getDate(), 28)).getTime());
+    }
+    // Wheel over the grid pages the period (Google-style), throttled so one
+    // gesture = one step rather than flying through months.
+    const wheelLock = useRef(0);
+    function onWheel(e) {
+        if (Math.abs(e.deltaY) < 4)
+            return;
+        const now = Date.now();
+        if (now - wheelLock.current < 320)
+            return;
+        wheelLock.current = now;
+        step(e.deltaY > 0 ? 1 : -1);
+    }
+    function pickView(v) {
+        setCalView(v);
+        setPref("calView", v);
+    }
+    const headerLabel = (() => {
+        const d = new Date(calCursor);
+        if (calView === "day")
+            return d.toLocaleDateString([], { weekday: "long", month: "long", day: "numeric", year: "numeric" });
+        if (calView === "week") {
+            const s = new Date(startOfWeek(calCursor));
+            const e = new Date(startOfWeek(calCursor) + 6 * DAY);
+            const sameMonth = s.getMonth() === e.getMonth();
+            return sameMonth
+                ? `${s.toLocaleDateString([], { month: "long" })} ${s.getDate()}–${e.getDate()}, ${e.getFullYear()}`
+                : `${s.toLocaleDateString([], { month: "short", day: "numeric" })} – ${e.toLocaleDateString([], { month: "short", day: "numeric", year: "numeric" })}`;
+        }
+        return d.toLocaleDateString([], { month: "long", year: "numeric" });
+    })();
+    return (_jsxs("div", { className: "calview", children: [_jsxs("div", { className: "cal-bar", children: [_jsx(Button, { variant: "ghost", className: "cal-today", onClick: () => setCalCursor(Date.now()), children: "Today" }), _jsx(IconButton, { label: "Previous", className: "cal-step", title: "Previous", onClick: () => step(-1), children: _jsx(Icon, { name: "chevron-left", size: 18 }) }), _jsx(IconButton, { label: "Next", className: "cal-step", title: "Next", onClick: () => step(1), children: _jsx(Icon, { name: "chevron-right", size: 18 }) }), _jsx("h2", { className: "cal-label", children: headerLabel }), _jsx("div", { className: "cal-bar-spacer" }), _jsx("div", { className: "cal-viewtoggle", children: _jsx(SegmentedControl, { label: "Calendar view", value: calView, options: CALENDAR_VIEWS.map((v) => ({ value: v, label: v[0].toUpperCase() + v.slice(1) })), onChange: (v) => pickView(v) }) }), _jsx(HostAccountSwitcher, {})] }), _jsx("div", { className: "cal-grid", onWheel: onWheel, children: calView === "month" ? (_jsx(MonthGrid, { cursor: calCursor, events: events, today: calendarNow.today, onDay: (ms) => openEventForm(undefined, undefined, false, ms + 9 * 3600000), onEvent: setOpenEvent })) : (_jsx(TimeGrid, { days: calView === "week"
+                        ? Array.from({ length: 7 }, (_, i) => startOfWeek(calCursor) + i * DAY)
+                        : [startOfDay(calCursor)], events: events, today: calendarNow.today, nowMin: calendarNow.minute, onSlot: (ms) => openEventForm(undefined, undefined, false, ms), onEvent: setOpenEvent })) }), openEvent && (_jsx(CalendarEventPopover, { openEvent: openEvent, setOpenEvent: setOpenEvent, openEventForm: openEventForm, deleteEv: deleteEv, rsvp: rsvp })), eventForm && (_jsx(CalendarEventFormModal, { eventForm: eventForm, setEventForm: setEventForm, freeBusyMsg: freeBusyMsg, checkAvailability: checkAvailability, submitEvent: submitEvent })), recurScope && (_jsxs(Dialog, { title: recurScope.mode === "edit" ? "Edit recurring event" : "Delete recurring event", width: 420, onClose: () => setRecurScope(null), children: [_jsxs("p", { className: "hint", children: ["\u201C", recurScope.ev.summary, "\u201D repeats. Apply to:"] }), _jsxs("div", { className: "recur-choices", children: [_jsx(Button, { variant: "primary", onClick: () => recurScope.mode === "edit" ? fillEditForm(recurScope.ev, recurScope.ev.id) : performDelete(recurScope.ev, recurScope.ev.id), children: "This event" }), recurScope.mode === "delete" && (_jsx(Button, { variant: "primary", onClick: () => performTruncate(recurScope.ev), children: "This and following events" })), _jsx(Button, { variant: "primary", onClick: () => recurScope.mode === "edit" ? fillEditForm(recurScope.ev, recurScope.ev.recurring_event_id) : performDelete(recurScope.ev, recurScope.ev.recurring_event_id), children: "All events" })] })] }))] }));
+}
+export const CalendarView = memo(CalendarViewInner);

package/dist/views/ContactsView.d.ts

@@ -0,0 +1,3 @@
+declare function ContactsViewInner(): import("react").JSX.Element;
+export declare const ContactsView: import("react").MemoExoticComponent<typeof ContactsViewInner>;
+export {};