@open-webapp/calendar 0.0.0-stage → 0.1.0

package/dist/core/fetch.js

@@ -0,0 +1,94 @@
+const BASE = 'https://www.googleapis.com/calendar/v3';
+export class CalendarFetchError extends Error {
+    kind;
+    status;
+    constructor(kind, status = 0) {
+        super(`calendar fetch failed: ${kind} ${status}`);
+        this.kind = kind;
+        this.status = status;
+    }
+}
+async function request(url, token) {
+    let res;
+    try {
+        res = await fetch(url, { headers: { Authorization: `Bearer ${token}` } });
+    }
+    catch {
+        throw new CalendarFetchError('network');
+    }
+    if (res.ok) {
+        try {
+            return await res.json();
+        }
+        catch {
+            throw new CalendarFetchError('http', res.status);
+        }
+    }
+    if (res.status === 410)
+        throw new CalendarFetchError('gone', 410);
+    if (res.status === 401)
+        throw new CalendarFetchError('auth', 401);
+    if (res.status === 403) {
+        let body = null;
+        try {
+            body = await res.json();
+        }
+        catch {
+            /* ignore */
+        }
+        const insufficient = JSON.stringify(body ?? {}).includes('insufficientPermissions');
+        throw new CalendarFetchError(insufficient ? 'scope' : 'http', 403);
+    }
+    throw new CalendarFetchError('http', res.status);
+}
+export async function fetchCalendarList(token) {
+    const out = [];
+    let pageToken;
+    do {
+        const u = new URL(`${BASE}/users/me/calendarList`);
+        if (pageToken)
+            u.searchParams.set('pageToken', pageToken);
+        const body = await request(u.toString(), token);
+        for (const c of body.items ?? []) {
+            out.push({
+                id: c.id,
+                summary: c.summaryOverride ?? c.summary ?? c.id,
+                backgroundColor: c.backgroundColor,
+                foregroundColor: c.foregroundColor,
+                primary: Boolean(c.primary),
+                accessRole: c.accessRole ?? '',
+                selected: c.selected,
+            });
+        }
+        pageToken = body.nextPageToken;
+    } while (pageToken);
+    return out;
+}
+const noMillis = (iso) => iso.replace(/\.\d{3}Z$/, 'Z');
+/** Fetches all pages of events. With syncToken, no time bounds are sent (the API forbids them). */
+export async function fetchEvents(token, calendarId, opts) {
+    const items = [];
+    let pageToken;
+    let nextSyncToken;
+    do {
+        const u = new URL(`${BASE}/calendars/${encodeURIComponent(calendarId)}/events`);
+        u.searchParams.set('maxResults', '250');
+        if (opts.syncToken) {
+            u.searchParams.set('syncToken', opts.syncToken);
+        }
+        else {
+            u.searchParams.set('singleEvents', 'true');
+            if (opts.timeMin)
+                u.searchParams.set('timeMin', noMillis(opts.timeMin));
+            if (opts.timeMax)
+                u.searchParams.set('timeMax', noMillis(opts.timeMax));
+        }
+        if (pageToken)
+            u.searchParams.set('pageToken', pageToken);
+        const body = await request(u.toString(), token);
+        items.push(...(body.items ?? []));
+        pageToken = body.nextPageToken;
+        nextSyncToken = body.nextSyncToken ?? nextSyncToken;
+    } while (pageToken);
+    return { items, nextSyncToken };
+}

package/dist/core/reconcile.d.ts

@@ -0,0 +1,8 @@
+import type { CalendarEvent, CalendarInfo } from './types.js';
+/** Stored selection filtered to existing calendars; the primary calendar is always included. */
+export declare function reconcileSelection(stored: string[] | null, calendars: CalendarInfo[]): string[];
+/** Applies an incremental page of raw items to one calendar's events (cancelled items remove). */
+export declare function applyChanges(existing: CalendarEvent[], items: any[], ctx: {
+    sourceId: string;
+    calendarId: string;
+}): CalendarEvent[];

package/dist/core/reconcile.js

@@ -0,0 +1,24 @@
+import { reconcileSelectedCalendarIds } from './events.js';
+import { parseEvent } from './events.js';
+/** Stored selection filtered to existing calendars; the primary calendar is always included. */
+export function reconcileSelection(stored, calendars) {
+    const ids = reconcileSelectedCalendarIds(stored, calendars);
+    const primary = calendars.find((c) => c.primary);
+    if (primary && !ids.includes(primary.id))
+        ids.unshift(primary.id);
+    return ids;
+}
+/** Applies an incremental page of raw items to one calendar's events (cancelled items remove). */
+export function applyChanges(existing, items, ctx) {
+    const map = new Map(existing.map((e) => [e.id, e]));
+    for (const raw of items) {
+        if (!raw || typeof raw.id !== 'string')
+            continue;
+        const parsed = parseEvent(raw, ctx);
+        if (parsed)
+            map.set(parsed.id, parsed);
+        else
+            map.delete(raw.id);
+    }
+    return [...map.values()];
+}

package/dist/core/storage.d.ts

@@ -0,0 +1,21 @@
+import type { CalendarEvent } from './types.js';
+export interface SyncState {
+    /** Per-calendar incremental sync tokens. */
+    tokens: Record<string, string>;
+}
+/** Persisted per-source row. `events` is an encrypted JSON string when written by the controller. */
+export interface StorageRow {
+    events: CalendarEvent[] | string | unknown[];
+    syncState: SyncState | string | null | unknown;
+    selectedIds: string[];
+}
+export interface StorageAdapter {
+    get(sourceId: string): Promise<StorageRow | null>;
+    put(sourceId: string, row: StorageRow): Promise<void>;
+    delete(sourceId: string): Promise<void>;
+    clear(sourceId: string): Promise<void>;
+}
+export interface CryptoAdapter {
+    encrypt(plaintext: string): Promise<string>;
+    decrypt(ciphertext: string): Promise<string>;
+}

package/dist/core/storage.js

@@ -0,0 +1 @@
+export {};

package/dist/core/sync.d.ts

@@ -0,0 +1,14 @@
+import type { CalendarEvent } from './types.js';
+export interface CalendarSyncResult {
+    events: CalendarEvent[];
+    syncToken?: string;
+}
+/** Syncs one calendar: incremental when a token exists, full (windowed) otherwise or on 410. */
+export declare function syncCalendar(args: {
+    token: string;
+    sourceId: string;
+    calendarId: string;
+    existing: CalendarEvent[];
+    syncToken?: string;
+    now: Date;
+}): Promise<CalendarSyncResult>;

package/dist/core/sync.js

@@ -0,0 +1,27 @@
+import { CalendarFetchError, fetchEvents } from './fetch.js';
+import { getRollingWindow, parseEvents } from './events.js';
+import { applyChanges } from './reconcile.js';
+/** Syncs one calendar: incremental when a token exists, full (windowed) otherwise or on 410. */
+export async function syncCalendar(args) {
+    const { token, sourceId, calendarId, existing, syncToken, now } = args;
+    const ctx = { sourceId, calendarId };
+    const full = async () => {
+        const w = getRollingWindow(now);
+        const page = await fetchEvents(token, calendarId, { timeMin: w.start, timeMax: w.end });
+        return { events: parseEvents(page.items, ctx), syncToken: page.nextSyncToken };
+    };
+    if (!syncToken)
+        return full();
+    try {
+        const page = await fetchEvents(token, calendarId, { syncToken });
+        return {
+            events: applyChanges(existing, page.items, ctx),
+            syncToken: page.nextSyncToken ?? syncToken,
+        };
+    }
+    catch (e) {
+        if (e instanceof CalendarFetchError && e.kind === 'gone')
+            return full();
+        throw e;
+    }
+}

package/dist/core/types.d.ts

@@ -0,0 +1,45 @@
+/** A connected account that calendars are read from. */
+export interface Source {
+    id: string;
+    email: string;
+    label?: string;
+}
+export type RsvpStatus = 'accepted' | 'tentative' | 'needsAction' | 'declined';
+export interface CalendarEventDateTime {
+    dateTime?: string;
+    date?: string;
+    timeZone?: string;
+}
+export interface CalendarEvent {
+    id: string;
+    /** ID of the Source (account) this event came from. */
+    sourceId: string;
+    /** ID of the calendar this event belongs to. */
+    calendarId?: string;
+    summary: string;
+    start: CalendarEventDateTime;
+    end: CalendarEventDateTime;
+    /** True iff `start.date` is present with no `start.dateTime`. */
+    isAllDay: boolean;
+    selfResponseStatus: RsvpStatus;
+    joinUrl: string | null;
+    organizer: {
+        displayName?: string;
+        email?: string;
+        self: boolean;
+    };
+    htmlLink: string;
+}
+export interface CalendarInfo {
+    id: string;
+    summary: string;
+    backgroundColor?: string;
+    foregroundColor?: string;
+    primary: boolean;
+    accessRole: string;
+    selected?: boolean;
+}
+export interface ParseContext {
+    sourceId: string;
+    calendarId: string;
+}

package/dist/core/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './core/types.js';
+export * from './core/events.js';
+export * from './core/storage.js';
+export * from './core/fetch.js';
+export * from './core/sync.js';
+export * from './core/reconcile.js';
+export * from './core/controller.js';
+export * from './react/index.js';

package/dist/index.js

@@ -0,0 +1,8 @@
+export * from './core/types.js';
+export * from './core/events.js';
+export * from './core/storage.js';
+export * from './core/fetch.js';
+export * from './core/sync.js';
+export * from './core/reconcile.js';
+export * from './core/controller.js';
+export * from './react/index.js';

package/dist/react/CalendarPane.d.ts

@@ -0,0 +1,17 @@
+import { type JSX, type ReactNode } from 'react';
+import type { CalendarEvent, RsvpStatus, Source } from '../core/types.js';
+import type { CalendarController } from '../core/controller.js';
+export type RsvpSelection = Set<RsvpStatus>;
+export interface CalendarPaneProps {
+    sources: Source[];
+    controller: CalendarController;
+    selectedRsvpStatuses: RsvpSelection;
+    onRsvpStatusesChange: (next: RsvpSelection) => void;
+    renderEventAction?: (event: CalendarEvent) => ReactNode;
+    emptyState?: ReactNode;
+    sourceNotice?: (source: Source) => ReactNode;
+    onClose?: () => void;
+    /** Window name used for the event popup. */
+    popupName?: string;
+}
+export declare function CalendarPane(props: CalendarPaneProps): JSX.Element;

package/dist/react/CalendarPane.js

@@ -0,0 +1,323 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { filterByRsvp, groupByDay, getOrganizerLabel, formatDayHeader, isEventCurrent, findNextUpcomingEvent, getCalendarEventKey, DEFAULT_RSVP_STATUSES, } from '../core/events.js';
+import { CalendarSelector } from './CalendarSelector.js';
+function useWindowWidth() {
+    const [width, setWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1024);
+    useEffect(() => {
+        const handler = () => setWidth(window.innerWidth);
+        window.addEventListener('resize', handler);
+        return () => window.removeEventListener('resize', handler);
+    }, []);
+    return width;
+}
+const SOURCE_COLORS = ['#4285f4', '#ea4335', '#34a853', '#fbbc04', '#a142f4', '#00acc1', '#ff7043', '#8d6e63'];
+const RSVP_CHIPS = [
+    {
+        status: 'accepted',
+        label: 'Accepted',
+        icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3 7.7L6 10.7L12 4.3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })),
+    },
+    {
+        status: 'tentative',
+        label: 'Maybe',
+        icon: (_jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: [_jsx("path", { d: "M5.2 5.6C5.2 4.2 6.2 3.2 7.5 3.2C8.8 3.2 9.8 4.2 9.8 5.4C9.8 6.8 7.6 6.9 7.6 8.8", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("circle", { cx: "7.6", cy: "11.2", r: "0.9", fill: "currentColor" })] })),
+    },
+    {
+        status: 'needsAction',
+        label: 'Unaccepted',
+        icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("circle", { cx: "7.5", cy: "7.5", r: "4.3", stroke: "currentColor", strokeWidth: "1.4" }) })),
+    },
+    {
+        status: 'declined',
+        label: 'Declined',
+        icon: (_jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M4 4L11 11M11 4L4 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })),
+    },
+];
+const DEFAULT_POPUP_NAME = 'notesdiary-cal-event';
+const POPUP_W = 560;
+const POPUP_H = 760;
+function openEventPopup(url, popupRef, popupName) {
+    const existingPopup = popupRef.current;
+    if (existingPopup && !existingPopup.closed) {
+        try {
+            existingPopup.location = url;
+            existingPopup.focus();
+            return;
+        }
+        catch {
+            popupRef.current = null;
+        }
+    }
+    const left = Math.max(0, Math.round((window.screenX ?? 0) + (window.outerWidth - POPUP_W) / 2));
+    const top = Math.max(0, Math.round((window.screenY ?? 0) + (window.outerHeight - POPUP_H) / 2));
+    const popup = window.open(url, popupName, `popup,width=${POPUP_W},height=${POPUP_H},left=${left},top=${top}`);
+    if (!popup) {
+        window.open(url, '_blank');
+        return;
+    }
+    popupRef.current = popup;
+    try {
+        popup.opener = null;
+    }
+    catch {
+        // ignore
+    }
+    popup.focus();
+}
+function toIsoDate(d) {
+    return d.toISOString().slice(0, 10);
+}
+function formatTimeOfDay(dateTime) {
+    const d = new Date(dateTime);
+    return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit' });
+}
+function formatTimeRange(event) {
+    const startDateTime = event.start.dateTime;
+    const endDateTime = event.end.dateTime;
+    if (!startDateTime)
+        return '';
+    const start = formatTimeOfDay(startDateTime);
+    if (!endDateTime)
+        return start;
+    return `${start} – ${formatTimeOfDay(endDateTime)}`;
+}
+function usableUrl(url) {
+    if (typeof url !== 'string')
+        return null;
+    const trimmed = url.trim();
+    return trimmed === '' ? null : trimmed;
+}
+export function CalendarPane(props) {
+    const isDesktop = useWindowWidth() >= 960;
+    const { sources, controller, selectedRsvpStatuses } = props;
+    const popupName = props.popupName ?? DEFAULT_POPUP_NAME;
+    const [version, setVersion] = useState(0);
+    useEffect(() => {
+        const unsubscribe = controller.subscribe(() => setVersion((v) => v + 1));
+        setVersion((v) => v + 1);
+        return unsubscribe;
+    }, [controller]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const events = useMemo(() => controller.getEvents(), [controller, version]);
+    const statuses = controller.getSourceStatus();
+    const connected = sources.length > 0;
+    const multi = sources.length >= 2;
+    const needsScopeSources = sources.filter((s) => statuses[s.id] === 'needs-scope');
+    const needsReauth = connected && needsScopeSources.length === sources.length;
+    const sourceColor = (id) => SOURCE_COLORS[Math.max(0, sources.findIndex((s) => s.id === id)) % SOURCE_COLORS.length];
+    const sourceEmail = (id) => sources.find((s) => s.id === id)?.email ?? '';
+    const todayIso = toIsoDate(new Date());
+    const dayHeaderRefs = useRef(new Map());
+    const timedEventRefs = useRef(new Map());
+    const hasScrolledForEventsRef = useRef(false);
+    const paneRef = useRef(null);
+    const chipsRef = useRef(null);
+    const popupRef = useRef(null);
+    const [now, setNow] = useState(() => new Date());
+    const filteredEvents = useMemo(() => filterByRsvp(events, selectedRsvpStatuses), [events, selectedRsvpStatuses]);
+    const calendarsByKey = useMemo(() => {
+        const map = new Map();
+        for (const s of sources)
+            for (const c of controller.getCalendars(s.id))
+                map.set(`${s.id}\u0000${c.id}`, c);
+        return map;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sources, controller, version]);
+    const currentEventKeys = useMemo(() => {
+        const ids = new Set();
+        for (const event of filteredEvents) {
+            if (isEventCurrent(event, now)) {
+                ids.add(getCalendarEventKey(event));
+            }
+        }
+        return ids;
+    }, [filteredEvents, now]);
+    const nextUpcomingEvent = findNextUpcomingEvent(filteredEvents, now);
+    const selectedEventKey = currentEventKeys.values().next().value ??
+        (nextUpcomingEvent ? getCalendarEventKey(nextUpcomingEvent) : undefined);
+    function handleToggle(status) {
+        const next = new Set(selectedRsvpStatuses);
+        if (next.has(status)) {
+            next.delete(status);
+            if (next.size === 0) {
+                props.onRsvpStatusesChange(new Set(DEFAULT_RSVP_STATUSES));
+                return;
+            }
+        }
+        else {
+            next.add(status);
+        }
+        props.onRsvpStatusesChange(next);
+    }
+    const dayGroups = groupByDay(filteredEvents, todayIso);
+    function scrollToToday(behavior = 'auto') {
+        const todayEl = dayHeaderRefs.current.get(todayIso);
+        if (todayEl && typeof todayEl.scrollIntoView === 'function') {
+            todayEl.scrollIntoView({ behavior, block: 'start' });
+        }
+    }
+    function recenter(behavior) {
+        const el = selectedEventKey ? timedEventRefs.current.get(selectedEventKey) : undefined;
+        if (el && typeof el.scrollIntoView === 'function') {
+            el.scrollIntoView({ behavior, block: 'center' });
+            return;
+        }
+        scrollToToday(behavior);
+    }
+    const recenterRef = useRef(recenter);
+    recenterRef.current = recenter;
+    const idleRecenteredRef = useRef(false);
+    useEffect(() => {
+        let idleTimeoutId;
+        function fireIdle() {
+            recenterRef.current('smooth');
+            idleRecenteredRef.current = true;
+        }
+        function onActivity() {
+            if (idleRecenteredRef.current) {
+                idleRecenteredRef.current = false;
+            }
+            clearTimeout(idleTimeoutId);
+            idleTimeoutId = setTimeout(fireIdle, 30000);
+        }
+        window.addEventListener('mousemove', onActivity);
+        window.addEventListener('keydown', onActivity);
+        window.addEventListener('click', onActivity);
+        window.addEventListener('scroll', onActivity, { passive: true });
+        window.addEventListener('touchstart', onActivity, { passive: true });
+        onActivity();
+        return () => {
+            window.removeEventListener('mousemove', onActivity);
+            window.removeEventListener('keydown', onActivity);
+            window.removeEventListener('click', onActivity);
+            window.removeEventListener('scroll', onActivity);
+            window.removeEventListener('touchstart', onActivity);
+            clearTimeout(idleTimeoutId);
+        };
+    }, []);
+    useEffect(() => {
+        if (events.length === 0) {
+            hasScrolledForEventsRef.current = false;
+            return;
+        }
+        if (hasScrolledForEventsRef.current)
+            return;
+        recenterRef.current('auto');
+        hasScrolledForEventsRef.current = true;
+    }, [events, todayIso]);
+    useEffect(() => {
+        let timeoutId;
+        function scheduleNext() {
+            const nowMs = Date.now();
+            let nextBoundaryMs = Infinity;
+            for (const event of filteredEvents) {
+                if (event.isAllDay)
+                    continue;
+                const startMs = event.start.dateTime ? new Date(event.start.dateTime).getTime() : NaN;
+                const endMs = event.end.dateTime ? new Date(event.end.dateTime).getTime() : NaN;
+                if (!Number.isNaN(startMs) && startMs > nowMs && startMs < nextBoundaryMs) {
+                    nextBoundaryMs = startMs;
+                }
+                if (!Number.isNaN(endMs) && endMs > nowMs && endMs < nextBoundaryMs) {
+                    nextBoundaryMs = endMs;
+                }
+            }
+            if (nextBoundaryMs !== Infinity) {
+                timeoutId = setTimeout(() => {
+                    setNow(new Date());
+                    setTimeout(() => {
+                        if (idleRecenteredRef.current) {
+                            recenterRef.current('smooth');
+                        }
+                    }, 0);
+                    scheduleNext();
+                }, nextBoundaryMs - nowMs);
+            }
+        }
+        setNow(new Date());
+        scheduleNext();
+        return () => {
+            if (timeoutId !== undefined)
+                clearTimeout(timeoutId);
+        };
+    }, [filteredEvents]);
+    useEffect(() => {
+        const chipsEl = chipsRef.current;
+        const paneEl = paneRef.current;
+        if (!chipsEl || !paneEl)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            // contentRect excludes padding; the sticky day-header offset needs the
+            // chip row's full border-box height (chips have vertical padding).
+            const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.target.getBoundingClientRect().height;
+            paneEl.style.setProperty('--chip-row-height', `${height}px`);
+        });
+        observer.observe(chipsEl);
+        return () => observer.disconnect();
+    }, [connected, needsReauth]);
+    if (!connected) {
+        return (_jsx("div", { className: "calendar-pane", children: _jsx("div", { className: "calendar-pane-prompt", children: props.emptyState }) }));
+    }
+    if (needsReauth) {
+        return (_jsx("div", { className: "calendar-pane", children: _jsx("div", { className: "calendar-pane-prompt", children: needsScopeSources.map((s) => (_jsx("div", { children: props.sourceNotice?.(s) }, s.id))) }) }));
+    }
+    const sourcesWithEvents = new Set(filteredEvents.map((e) => e.sourceId));
+    const hasErrorWithoutEvents = sources.some((s) => statuses[s.id] === 'error' && !sourcesWithEvents.has(s.id));
+    const calendarSources = sources.filter((s) => controller.getCalendars(s.id).length > 0);
+    const error = hasErrorWithoutEvents;
+    const loading = false;
+    const emptyStateText = 'No matching events in the next 30 days';
+    const showCalendarSelector = calendarSources.length > 0;
+    return (_jsxs("div", { className: "calendar-pane", ref: paneRef, children: [_jsxs("div", { className: "calendar-pane-scroll", children: [_jsxs("div", { className: "calendar-rsvp-chips", ref: chipsRef, children: [_jsx("button", { type: "button", className: "calendar-rsvp-chip calendar-scroll-today-btn", "aria-label": "Scroll to today", title: "Scroll to today", onClick: () => recenter('smooth'), children: _jsxs("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: [_jsx("rect", { x: "2", y: "3", width: "11", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M2 6H13", stroke: "currentColor", strokeWidth: "1.2" }), _jsx("path", { d: "M5 2V4M10 2V4", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("circle", { cx: "7.5", cy: "9.5", r: "1.3", fill: "currentColor" })] }) }), RSVP_CHIPS.map((chip) => (_jsx("button", { type: "button", className: `calendar-rsvp-chip${selectedRsvpStatuses.has(chip.status) ? ' selected' : ''}`, "aria-pressed": selectedRsvpStatuses.has(chip.status), "aria-label": chip.label, title: chip.label, onClick: () => handleToggle(chip.status), children: chip.icon }, chip.status)))] }), needsScopeSources.map((s) => (_jsx("div", { children: props.sourceNotice?.(s) }, s.id))), !loading && error && (_jsx("div", { className: "empty-state calendar-empty-state", role: "alert", children: _jsx("p", { children: "Couldn't load calendar events. Try again shortly." }) })), !(error && filteredEvents.length === 0) && (_jsxs("div", { className: "calendar-day-groups", children: [dayGroups.map((group) => (_jsxs("div", { className: "calendar-day-group", children: [_jsx("div", { className: "calendar-day-header", ref: (el) => {
+                                            if (el) {
+                                                dayHeaderRefs.current.set(group.dateKey, el);
+                                            }
+                                            else {
+                                                dayHeaderRefs.current.delete(group.dateKey);
+                                            }
+                                        }, children: formatDayHeader(group.dateKey, todayIso) }), group.events.map((event) => {
+                                        const eventKey = getCalendarEventKey(event);
+                                        const calendar = calendarsByKey.get(`${event.sourceId}\u0000${event.calendarId}`);
+                                        const showCalendarLabel = calendar && !calendar.primary;
+                                        const organizerLabel = getOrganizerLabel(event);
+                                        const showOrganizerLabel = multi
+                                            ? true
+                                            : organizerLabel && (!showCalendarLabel || organizerLabel !== calendar.summary);
+                                        const organizerText = multi
+                                            ? organizerLabel
+                                                ? `${organizerLabel} · ${sourceEmail(event.sourceId)}`
+                                                : sourceEmail(event.sourceId)
+                                            : organizerLabel;
+                                        const rsvpStatus = RSVP_CHIPS.some((chip) => chip.status === event.selfResponseStatus)
+                                            ? event.selfResponseStatus
+                                            : 'needsAction';
+                                        if (event.isAllDay) {
+                                            return (_jsxs("div", { className: `calendar-event-allday calendar-event-row--rsvp-${rsvpStatus}`, children: [_jsxs("span", { className: "calendar-event-title-wrap", children: [_jsx("span", { className: "calendar-event-title", children: event.summary }), props.renderEventAction?.(event)] }), showCalendarLabel && (_jsxs("span", { className: "calendar-event-calendar", children: [_jsx("span", { className: "calendar-event-calendar-dot", style: { backgroundColor: calendar.backgroundColor } }), calendar.summary] })), showOrganizerLabel && (_jsxs("span", { className: "calendar-event-organizer", children: [multi && (_jsx("span", { className: "calendar-event-source-dot", style: { backgroundColor: sourceColor(event.sourceId) } })), organizerText] }))] }, eventKey));
+                                        }
+                                        const hasLink = usableUrl(event.htmlLink) !== null;
+                                        return (_jsxs("div", { className: `calendar-event-row${currentEventKeys.has(eventKey) ? ' calendar-event-row--current' : ''}${selectedEventKey === eventKey ? ' calendar-event-row--selected' : ''} calendar-event-row--rsvp-${rsvpStatus}`, ref: (el) => {
+                                                if (el) {
+                                                    timedEventRefs.current.set(eventKey, el);
+                                                }
+                                                else {
+                                                    timedEventRefs.current.delete(eventKey);
+                                                }
+                                            }, children: [_jsxs("div", { className: "calendar-event-header", children: [_jsx("span", { className: "calendar-event-time", children: formatTimeRange(event) }), event.joinUrl && (_jsx("a", { className: "calendar-event-join", href: event.joinUrl, target: "_blank", rel: "noopener noreferrer", onClick: (e) => e.stopPropagation(), children: "Join" }))] }), _jsxs("div", { className: "calendar-event-title-wrap", children: [hasLink ? (_jsx("a", { className: "calendar-event-title-link", href: event.htmlLink, target: "_blank", rel: "noopener noreferrer", onClick: (e) => {
+                                                                if (isDesktop &&
+                                                                    e.button === 0 &&
+                                                                    !e.ctrlKey &&
+                                                                    !e.metaKey &&
+                                                                    !e.shiftKey &&
+                                                                    !e.altKey) {
+                                                                    e.preventDefault();
+                                                                    openEventPopup(event.htmlLink, popupRef, popupName);
+                                                                }
+                                                            }, children: _jsx("span", { className: "calendar-event-title", children: event.summary }) })) : (_jsx("span", { className: "calendar-event-title", children: event.summary })), props.renderEventAction?.(event)] }), showCalendarLabel && (_jsxs("span", { className: "calendar-event-calendar", children: [_jsx("span", { className: "calendar-event-calendar-dot", style: { backgroundColor: calendar.backgroundColor } }), calendar.summary] })), showOrganizerLabel && (_jsxs("span", { className: "calendar-event-organizer", children: [multi && (_jsx("span", { className: "calendar-event-source-dot", style: { backgroundColor: sourceColor(event.sourceId) } })), organizerText] }))] }, eventKey));
+                                    })] }, group.dateKey))), filteredEvents.length === 0 && !error && needsScopeSources.length === 0 && _jsx("p", { className: "calendar-empty-state-text", children: emptyStateText })] }))] }), showCalendarSelector && (_jsx("footer", { className: "calendar-pane-footer", children: calendarSources.map((s) => (_jsx(CalendarSelector, { calendars: controller.getCalendars(s.id), selectedIds: controller.getSelectedIds(s.id), onChange: (ids) => {
+                        void controller.setSelectedIds(s.id, ids);
+                    }, heading: multi ? s.email : undefined }, s.id))) }))] }));
+}

package/dist/react/CalendarSelector.d.ts

@@ -0,0 +1,10 @@
+import type { CalendarInfo } from '../core/types.js';
+interface CalendarSelectorProps {
+    calendars: CalendarInfo[];
+    selectedIds: string[];
+    onChange: (selectedIds: string[]) => void;
+    /** Optional account heading (used when several sources are shown). */
+    heading?: string;
+}
+export declare function CalendarSelector({ calendars, selectedIds, onChange, heading }: CalendarSelectorProps): import("react").JSX.Element;
+export {};