@open-webapp/calendar 0.7.0 → 0.8.1

package/README.md

@@ -2,7 +2,7 @@
 
 Multi-account Google Calendar read-only sync (controller) plus React UI (`CalendarPane`, `CalendarSelector`). Storage and encryption are host-supplied adapters.
 
-> **0.2.0 is BREAKING.** See [Breaking changes in 0.2.0](#breaking-changes-in-020).
+> **0.8.0 is BREAKING.** See [0.8.0](#080-breaking-pre-10-minor) for independent Unaccepted toggling.
 
 ## Install
 
@@ -148,7 +148,7 @@ Call at top level of a vitest file; it registers a `describe('StorageAdapter con
 | `sources` | `Source[]` | shown accounts; 2+ enables multi-source UI (per-source color and email) |
 | `controller` | `CalendarController` | |
 | `theme?` | `'system' \| 'light' \| 'dark'` | defaults to `'system'`, including when `undefined`; applies to every pane state and all internal selectors |
-| `selectedRsvpStatuses` | `Set<RsvpStatus>` | filter; `DEFAULT_RSVP_STATUSES` = accepted, tentative, needsAction |
+| `selectedRsvpStatuses` | `Set<RsvpStatus>` | host-controlled filter; `DEFAULT_RSVP_STATUSES` = accepted, tentative, needsAction (O pressed) |
 | `onRsvpStatusesChange` | `(next) => void` | |
 | `renderEventAction?` | `(event) => ReactNode` | per-event slot |
 | `connected?` | `boolean` | defaults to `sources.length > 0` (back-compat). `false` shows the not-connected block |
@@ -162,9 +162,9 @@ Call at top level of a vitest file; it registers a `describe('StorageAdapter con
 
 #### RSVP chips
 
-The chips appear in order: Accepted, Maybe, Declined, Unaccepted. Accepted, Maybe, and Declined toggle individual statuses; an empty selection falls back to `DEFAULT_RSVP_STATUSES` (accepted, tentative, needsAction).
+The chips appear in order: Accepted, Maybe, Declined, Unaccepted (O). All four independently toggle current supplied membership. Defaults remain accepted, tentative, needsAction, so O is pressed by default.
 
-Unaccepted is an exclusive shortcut: clicking it selects only `needsAction`, saving the previous selection locally in the pane. Clicking it again restores that selection, or the defaults when no saved selection is available. Toggling another chip while exclusive mode is active applies that toggle to the saved selection (or defaults). An external nonexclusive selection clears the saved selection. Unaccepted is pressed only when the selection is exactly `needsAction`; a mixed selection containing `needsAction` does not press it.
+O is pressed iff `needsAction` belongs to the selection, including mixed sets. Unanswered events follow that membership within existing calendar/window filters. Clicking O preserves other statuses; no previous RSVP selection is saved/restored. Removing the last status returns `DEFAULT_RSVP_STATUSES`: O-only -> O returns defaults with O still pressed. Explicit empty host selections remain empty; host rerenders do not normalize membership or emit callbacks.
 
 The Unaccepted badge is always visible, including at zero. It counts `needsAction` events from the controller's selected-calendar, rolling ±30-day snapshot before RSVP filtering. Visible counts cap at `99+`; the chip's `aria-label` and `title` expose the full count.
 
@@ -201,7 +201,7 @@ import '@open-webapp/calendar/styles.css';
 
 ### Theme behavior
 
-Both components follow the OS/browser `prefers-color-scheme` preference live in `'system'` mode; omitting `theme` preserves this default. Explicit `'light'` and `'dark'` ignore OS changes. Hosts can change the prop on a mounted component (including back to `'system'` or `undefined`) without remounting, closing an open dropdown, losing its search query, focus or keyboard-active option, changing selected calendars, or resetting the pane's saved RSVP selection. Theme changes do not trigger selection callbacks or controller refreshes.
+Both components follow the OS/browser `prefers-color-scheme` preference live in `'system'` mode; omitting `theme` preserves this default. Explicit `'light'` and `'dark'` ignore OS changes. Hosts can change the prop on a mounted component (including back to `'system'` or `undefined`) without remounting, closing an open dropdown, losing its search query, focus or keyboard-active option, changing selected calendars, or resetting the pane's current RSVP selection. Theme changes do not trigger selection callbacks or controller refreshes.
 
 Each pane forwards its requested mode to its unified grouped footer selector, including both account groups, account-local actions and the shared search. The single-trigger structure and cross-account keyboard navigation are preserved; the approved trigger geometry exception is described above. Standalone selectors choose their own mode: an omitted/system selector follows the OS even inside an explicitly dark or light pane. Adjacent and nested instances can use opposite modes independently; no document/body theme switch is applied.
 
@@ -211,7 +211,7 @@ The exported standalone selector keeps its single-list props and behavior; Selec
 
 ### Host CSS
 
-Day ribbon styling: each day's ribbon alternates between two tones by day parity (`data-parity="even|odd"`), set with `--calendar-day-ribbon-a` and `--calendar-day-ribbon-b`. Parity is stable across scroll, filtering and month boundaries, and the ribbon does not mark today. `--calendar-day-header-height` tunes the sticky label offset.
+Day ribbon styling: each day's ribbon alternates between two tones by day parity (`data-parity="even|odd"`), set with `--calendar-day-ribbon-a` and `--calendar-day-ribbon-b`. Parity is stable across scroll, filtering and month boundaries, and the ribbon does not mark today. Labels center in the actual ribbon/viewport intersection below the measured chips and that day's header, including empty Today before an event day. Short ribbons center within their bounds. Scroll, resize, rendered-content and mounted theme changes update measurements; `--calendar-day-header-height` no longer positions the label.
 
 `styles.css` is self-contained, using component-scoped semantic palette tokens and native-control `color-scheme`. Each pane/selector root resets the full palette; explicit dark overrides and system-only `prefers-color-scheme` rules keep instances isolated. It requires no host CSS variables. Layout/status variables:
 
@@ -223,6 +223,12 @@ The Unaccepted count badge uses `.calendar-rsvp-chip-badge`, with light and dark
 
 The shared `.calendar-selector-trigger` uses border-box inline-flex, centered alignment, an 8px gap, 36px minimum height, 8px 12px padding, 6px radius, a 1px solid control border, inherited font and pointer cursor. `.calendar-selector-trigger-label` bounds long labels with ellipsis; `.calendar-selector-chevron` stays 12px and does not shrink or add a tab stop. Existing scoped surface/text/control-border tokens style the resting trigger, the hover token supplies its hover background, and the focus token supplies a 2px `:focus-visible` outline with 2px offset. This approved visual-only exception changes trigger geometry and its derived dropdown position, preserving surrounding layout and theme isolation. Import the shipped stylesheet for both footer and standalone use.
 
+## 0.8.0 (BREAKING pre-1.0 minor)
+
+- Unaccepted independently toggles `needsAction`, replacing the exclusive shortcut and local restoration introduced in 0.3.0. Hosts relying on pending-only callbacks or restoration must adapt to callbacks reflecting current membership.
+- Defaults and last-deselection fallback remain accepted/tentative/needsAction; O is pressed for defaults and mixed selections containing needsAction.
+- Ribbon labels center in the measured visible intersection, including empty Today, scrolling, resizing and mounted theme changes.
+
 ## 0.7.0 (minor, breaking-visual)
 
 - Day ribbons alternate between two tones by day parity (`data-parity="even|odd"`, days since 1970 of the date key mod 2) instead of highlighting today. Parity is stable across scroll, filter and month boundaries.
@@ -251,7 +257,7 @@ The shared `.calendar-selector-trigger` uses border-box inline-flex, centered al
 
 ## 0.3.0 (minor, additive)
 
-- Adds the Unaccepted exclusive shortcut after Accepted, Maybe, and Declined, with local selection restoration and default fallback as described above.
+- Added the Unaccepted exclusive shortcut after Accepted, Maybe, and Declined, with local selection restoration and default fallback. This historical behavior is superseded by the independent toggle in 0.8.0.
 - Adds an always-visible Unaccepted count badge, including zero, computed before RSVP filtering from the controller's selected-calendar ±30-day snapshot. Counts above 99 display `99+`, with the full count in the chip's `aria-label` and `title`.
 - Adds the `.calendar-rsvp-chip-badge` host styling hook. Public props and default RSVP statuses remain compatible.
 

package/dist/react/CalendarPane.d.ts

@@ -1,4 +1,4 @@
-import { type JSX, type ReactNode } from 'react';
+import { 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>;
@@ -21,4 +21,4 @@ export interface CalendarPaneProps {
     /** Window name used for the event popup. */
     popupName?: string;
 }
-export declare function CalendarPane(props: CalendarPaneProps): JSX.Element;
+export declare function CalendarPane(props: CalendarPaneProps): import("react").JSX.Element;

package/dist/react/CalendarPane.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { filterByRsvp, groupByDay, getOrganizerLabel, formatDayHeader, formatRibbonLabel, isEventCurrent, findNextUpcomingEvent, getCalendarEventKey, DEFAULT_RSVP_STATUSES, } from '../core/events.js';
 import { GroupedCalendarSelector } from './CalendarSelector.js';
@@ -26,24 +26,31 @@ 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" }) })),
+        path: 'M5 13l4 4L19 7',
     },
     {
         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" })] })),
+        path: 'M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
     },
     {
         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" }) })),
+        path: 'M6 18L18 6M6 6l12 12',
     },
     {
         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" }) })),
+        path: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
     },
 ];
+function RsvpGlyph({ path, size = 16, strokeWidth = 2.2 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: path, stroke: "currentColor", strokeWidth: strokeWidth, strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}
+function RsvpStatusIcon({ status }) {
+    const glyph = RSVP_CHIPS.find((chip) => chip.status === status) ?? RSVP_CHIPS[3];
+    return (_jsx("span", { className: `calendar-event-rsvp calendar-event-rsvp--${glyph.status}`, role: "img", "aria-label": glyph.status, title: glyph.status, children: _jsx(RsvpGlyph, { path: glyph.path, size: 14, strokeWidth: 2.4 }) }));
+}
 const DEFAULT_POPUP_NAME = 'notesdiary-cal-event';
 const POPUP_W = 560;
 const POPUP_H = 760;
@@ -138,12 +145,6 @@ export function CalendarPane(props) {
     const scrollRef = useRef(null);
     const popupRef = useRef(null);
     const [now, setNow] = useState(() => new Date());
-    const [savedSelection, setSavedSelection] = useState(null);
-    const isExclusive = selectedRsvpStatuses.size === 1 && selectedRsvpStatuses.has('needsAction');
-    useEffect(() => {
-        if (!isExclusive && savedSelection !== null)
-            setSavedSelection(null);
-    }, [isExclusive, savedSelection]);
     const unacceptedCount = useMemo(() => events.filter((event) => event.selfResponseStatus === 'needsAction').length, [events]);
     const filteredEvents = useMemo(() => filterByRsvp(events, selectedRsvpStatuses), [events, selectedRsvpStatuses]);
     const calendarsByKey = useMemo(() => {
@@ -166,21 +167,8 @@ export function CalendarPane(props) {
     const nextUpcomingEvent = findNextUpcomingEvent(filteredEvents, now);
     const selectedEventKey = currentEventKeys.values().next().value ??
         (nextUpcomingEvent ? getCalendarEventKey(nextUpcomingEvent) : undefined);
-    function handleUnaccepted() {
-        if (isExclusive) {
-            props.onRsvpStatusesChange(savedSelection ?? new Set(DEFAULT_RSVP_STATUSES));
-            setSavedSelection(null);
-        }
-        else {
-            setSavedSelection(new Set(selectedRsvpStatuses));
-            props.onRsvpStatusesChange(new Set(['needsAction']));
-        }
-    }
     function handleToggle(status) {
-        const base = isExclusive ? savedSelection ?? DEFAULT_RSVP_STATUSES : selectedRsvpStatuses;
-        if (isExclusive)
-            setSavedSelection(null);
-        props.onRsvpStatusesChange(toggleRsvpStatus(base, status));
+        props.onRsvpStatusesChange(toggleRsvpStatus(selectedRsvpStatuses, status));
     }
     const dayGroups = groupByDay(filteredEvents, todayIso);
     function scrollToToday(behavior = 'auto') {
@@ -277,26 +265,51 @@ export function CalendarPane(props) {
     useEffect(() => {
         const chipsEl = chipsRef.current;
         const paneEl = paneRef.current;
-        if (!chipsEl || !paneEl)
+        const scrollEl = scrollRef.current;
+        if (!chipsEl || !paneEl || !scrollEl)
             return;
+        const ribbons = Array.from(scrollEl.querySelectorAll('.calendar-day-ribbon'));
+        function updateRibbonWindows() {
+            const viewport = scrollEl.getBoundingClientRect();
+            const chipsBottom = chipsEl.getBoundingClientRect().bottom;
+            for (const ribbon of ribbons) {
+                const bounds = ribbon.getBoundingClientRect();
+                const header = ribbon.parentElement?.previousElementSibling;
+                const headerBottom = header?.getBoundingClientRect().bottom ?? chipsBottom;
+                const top = Math.max(bounds.top, viewport.top, chipsBottom, headerBottom);
+                const bottom = Math.min(bounds.bottom, viewport.bottom);
+                ribbon.style.setProperty('--calendar-ribbon-window-top', `${Math.min(bounds.height, Math.max(0, top - bounds.top))}px`);
+                ribbon.style.setProperty('--calendar-ribbon-window-height', `${Math.max(0, bottom - top)}px`);
+            }
+        }
+        // Observe layout inputs only: the absolutely positioned window cannot resize them.
         const observer = new ResizeObserver((entries) => {
             for (const entry of entries) {
-                if (entry.target === scrollRef.current) {
-                    // The day ribbon centers its label in the visible scroll area, so it needs that height.
+                if (entry.target === scrollEl) {
                     paneEl.style.setProperty('--calendar-scroll-height', `${entry.target.getBoundingClientRect().height}px`);
-                    continue;
                 }
-                // 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`);
+                else if (entry.target === chipsEl) {
+                    // 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`);
+                }
             }
+            updateRibbonWindows();
         });
+        observer.observe(scrollEl);
         observer.observe(chipsEl);
-        if (scrollRef.current)
-            observer.observe(scrollRef.current);
-        return () => observer.disconnect();
-    }, [connected, needsReauth]);
+        for (const header of dayHeaderRefs.current.values())
+            observer.observe(header);
+        for (const ribbon of ribbons)
+            observer.observe(ribbon);
+        scrollEl.addEventListener('scroll', updateRibbonWindows, { passive: true });
+        updateRibbonWindows();
+        return () => {
+            observer.disconnect();
+            scrollEl.removeEventListener('scroll', updateRibbonWindows);
+        };
+    }, [connected, needsReauth, filteredEvents, todayIso, theme]);
     if (!connected) {
         return (_jsx("div", { className: "calendar-pane", "data-calendar-theme": theme, children: _jsx("div", { className: "calendar-pane-prompt", children: props.emptyState ?? (_jsxs(_Fragment, { children: [_jsx("p", { children: "Not connected to Google Calendar." }), _jsx("button", { className: "calendar-connect-button", onClick: props.onConnect, children: "Connect Google Calendar" })] })) }) }));
     }
@@ -310,7 +323,7 @@ export function CalendarPane(props) {
     const loading = ctrlState.loading && filteredEvents.length === 0;
     const emptyStateText = 'No matching events in the next 30 days';
     const showCalendarSelector = calendarSources.length > 0;
-    return (_jsxs("div", { className: "calendar-pane", "data-calendar-theme": theme, ref: paneRef, children: [_jsxs("div", { className: "calendar-pane-scroll", ref: scrollRef, 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) => (_jsxs("button", { type: "button", className: `calendar-rsvp-chip${(chip.status === 'needsAction' ? isExclusive : selectedRsvpStatuses.has(chip.status)) ? ' selected' : ''}`, "aria-pressed": chip.status === 'needsAction' ? isExclusive : selectedRsvpStatuses.has(chip.status), "aria-label": chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, title: chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, onClick: () => chip.status === 'needsAction' ? handleUnaccepted() : handleToggle(chip.status), children: [chip.icon, chip.status === 'needsAction' && (_jsx("span", { className: "calendar-rsvp-chip-badge", "aria-hidden": "true", children: unacceptedCount > 99 ? '99+' : unacceptedCount }))] }, chip.status)))] }), needsScopeSources.map((s) => (_jsx("div", { children: props.sourceNotice?.(s) }, s.id))), 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) => {
+    return (_jsxs("div", { className: "calendar-pane", "data-calendar-theme": theme, ref: paneRef, children: [_jsxs("div", { className: "calendar-pane-scroll", ref: scrollRef, children: [_jsxs("div", { className: "calendar-rsvp-chips", ref: chipsRef, children: [_jsx("div", { className: "calendar-rsvp-chip-group", role: "group", "aria-label": "RSVP Status Filters", children: RSVP_CHIPS.map((chip) => (_jsxs("button", { type: "button", className: `calendar-rsvp-chip${selectedRsvpStatuses.has(chip.status) ? ' selected' : ''}`, "aria-pressed": selectedRsvpStatuses.has(chip.status), "aria-label": chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, title: chip.status === 'needsAction' ? `${chip.label} (${unacceptedCount})` : chip.label, onClick: () => handleToggle(chip.status), children: [_jsx(RsvpGlyph, { path: chip.path }), chip.status === 'needsAction' && unacceptedCount > 0 && (_jsx("span", { className: "calendar-rsvp-chip-badge", "aria-hidden": "true", children: unacceptedCount > 99 ? '99+' : unacceptedCount }))] }, chip.status))) }), _jsx("button", { type: "button", className: "calendar-today-btn", "aria-label": "Scroll to today", title: "Scroll to today", onClick: () => recenter('smooth'), children: "Today" })] }), needsScopeSources.map((s) => (_jsx("div", { children: props.sourceNotice?.(s) }, s.id))), 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);
                                             }
@@ -334,7 +347,7 @@ export function CalendarPane(props) {
                                                         ? 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));
+                                                        return (_jsxs("div", { className: `calendar-event-allday calendar-event-row--rsvp-${rsvpStatus}`, children: [_jsxs("div", { className: "calendar-event-header", children: [_jsx("span", { className: "calendar-event-time", children: "All day" }), _jsx(RsvpStatusIcon, { status: event.selfResponseStatus })] }), _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) => {
@@ -344,7 +357,7 @@ export function CalendarPane(props) {
                                                             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) => {
+                                                        }, 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" })), _jsx(RsvpStatusIcon, { status: event.selfResponseStatus })] }), _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 &&

package/dist/styles.css

@@ -44,6 +44,39 @@
   --calendar-empty: #999;
   --calendar-chip-hover: #00a9ce;
   --calendar-checkbox: #22a6c0;
+  --calendar-chip-group-background: #f1f5f9;
+  --calendar-chip-group-border: rgb(226 232 240 / 80%);
+  --calendar-chip-active-background: #ffffff;
+  --calendar-chip-selected-ring: rgb(99 102 241 / 40%);
+  --calendar-chip-icon-accepted: #10b981;
+  --calendar-chip-icon-tentative: #f59e0b;
+  --calendar-chip-icon-declined: #f43f5e;
+  --calendar-chip-icon-needsAction: #0ea5e9;
+  --calendar-chip-badge-background: #0ea5e9;
+  --calendar-chip-badge-text: #ffffff;
+  --calendar-chip-badge-border: #ffffff;
+  --calendar-today-background: #f1f5f9;
+  --calendar-today-hover: #e2e8f0;
+  --calendar-today-text: #334155;
+  --calendar-card-background: #f8fafc;
+  --calendar-card-border: #e2e8f0;
+  --calendar-card-title: #0f172a;
+  --calendar-card-time: #64748b;
+  --calendar-card-active-background: #eef2ff;
+  --calendar-card-active-border: #a5b4fc;
+  --calendar-card-active-ring: rgb(99 102 241 / 20%);
+  --calendar-status-accepted-text: #059669;
+  --calendar-status-accepted-background: #ecfdf5;
+  --calendar-status-accepted-border: #a7f3d0;
+  --calendar-status-tentative-text: #f59e0b;
+  --calendar-status-tentative-background: #fffbeb;
+  --calendar-status-tentative-border: #fde68a;
+  --calendar-status-declined-text: #f43f5e;
+  --calendar-status-declined-background: #fff1f2;
+  --calendar-status-declined-border: #fecdd3;
+  --calendar-status-needsAction-text: #0ea5e9;
+  --calendar-status-needsAction-background: #f0f9ff;
+  --calendar-status-needsAction-border: #bae6fd;
   color-scheme: var(--calendar-scheme);
   color: var(--calendar-text);
 }
@@ -112,6 +145,9 @@
 
 .calendar-rsvp-chips {
   display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 64px;
   gap: 8px;
   padding: 12px 16px;
   flex-wrap: wrap;
@@ -121,51 +157,101 @@
   z-index: 2;
 }
 
+.calendar-rsvp-chip-group {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--calendar-chip-group-border);
+  border-radius: 12px;
+  background: var(--calendar-chip-group-background);
+}
+
 .calendar-rsvp-chip {
-  width: auto;
-  min-width: 32px;
-  height: 32px;
+  position: relative;
   box-sizing: border-box;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
-  padding: 0 8px;
+  padding: 6px;
   background: transparent;
-  color: var(--calendar-chip-text);
-  border: 1px solid var(--calendar-chip-border);
-  border-radius: 999px;
+  border: 0;
+  border-radius: 8px;
   cursor: pointer;
 }
 
-.calendar-scroll-today-btn {
-  margin-right: 4px;
-  padding-right: 4px;
-  border-right: 1px solid var(--calendar-chip-border);
+.calendar-rsvp-chip svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2.2;
+}
+
+.calendar-rsvp-chip[aria-label='Accepted'] {
+  color: var(--calendar-chip-icon-accepted);
+}
+
+.calendar-rsvp-chip[aria-label='Maybe'] {
+  color: var(--calendar-chip-icon-tentative);
+}
+
+.calendar-rsvp-chip[aria-label='Declined'] {
+  color: var(--calendar-chip-icon-declined);
+}
+
+.calendar-rsvp-chip[aria-label^='Unaccepted'] {
+  color: var(--calendar-chip-icon-needsAction);
 }
 
 .calendar-rsvp-chip:hover {
-  border-color: var(--calendar-chip-hover);
+  background: var(--calendar-chip-active-background);
 }
 
-.calendar-rsvp-chip.selected {
-  background: var(--calendar-chip-selected);
-  color: var(--calendar-chip-selected-text);
-  border-color: var(--calendar-chip-selected);
+.calendar-rsvp-chip-group .calendar-rsvp-chip.selected {
+  background: var(--calendar-chip-active-background);
+  box-shadow: 0 0 0 1px var(--calendar-chip-selected-ring);
 }
 
 .calendar-rsvp-chip-badge {
-  min-width: 16px;
-  padding: 1px 4px;
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 15px;
+  height: 15px;
+  padding: 0 2px;
   border-radius: 999px;
-  background: var(--calendar-badge);
-  color: var(--calendar-badge-text);
+  border: 1px solid var(--calendar-chip-badge-border);
+  background: var(--calendar-chip-badge-background);
+  color: var(--calendar-chip-badge-text);
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.calendar-today-btn {
+  margin-left: auto;
+  flex-shrink: 0;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: var(--calendar-today-background);
+  color: var(--calendar-today-text);
+  font-family: inherit;
   font-size: 11px;
   font-weight: 600;
   line-height: 16px;
-  text-align: center;
-  white-space: nowrap;
+  cursor: pointer;
+}
+
+.calendar-today-btn:hover {
+  background: var(--calendar-today-hover);
 }
 
 .calendar-empty-state {
@@ -202,9 +288,14 @@
 .calendar-day-events {
   flex: 1;
   min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
 }
 
 .calendar-day-ribbon {
+  position: relative;
   flex: 0 0 16px;
   width: 16px;
   min-height: 48px;
@@ -227,10 +318,9 @@
 }
 
 .calendar-day-ribbon-window {
-  position: sticky;
-  top: calc(var(--chip-row-height, 44px) + var(--calendar-day-header-height, 33px));
-  /* Visible part of the ribbon: as tall as the scroll area below the sticky headers, capped at the ribbon. */
-  height: min(100%, calc(var(--calendar-scroll-height, 100vh) - var(--chip-row-height, 44px) - var(--calendar-day-header-height, 33px)));
+  position: absolute;
+  top: var(--calendar-ribbon-window-top, 0px);
+  height: var(--calendar-ribbon-window-height, 100%);
   display: flex;
   align-items: center;
 }
@@ -242,43 +332,50 @@
   padding: 6px 0;
 }
 
-.calendar-event-allday {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 16px;
-  border-right: 3px solid var(--rsvp-bar, transparent);
-  border-bottom: 1px solid var(--calendar-border);
-}
-
+.calendar-event-allday,
 .calendar-event-row {
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  padding: 10px 16px;
-  border-right: 3px solid var(--rsvp-bar, transparent);
-  border-bottom: 1px solid var(--calendar-border);
+  gap: 6px;
+  padding: 10px;
+  border: 1px solid var(--calendar-card-border);
+  border-radius: 12px;
+  background: var(--calendar-card-background);
 }
 
-.calendar-event-allday {
-  background: var(--calendar-allday);
-  font-style: italic;
+.calendar-event-rsvp {
+  display: inline-flex;
+  flex: none;
+  margin-left: auto;
+  padding: 4px;
+  border: 1px solid var(--status-border);
+  border-radius: 4px;
+  background: var(--status-background);
+  color: var(--status-text);
 }
 
-.calendar-event-row--rsvp-accepted {
-  --rsvp-bar: var(--calendar-rsvp-accepted);
+.calendar-event-rsvp--accepted {
+  --status-text: var(--calendar-status-accepted-text);
+  --status-background: var(--calendar-status-accepted-background);
+  --status-border: var(--calendar-status-accepted-border);
 }
 
-.calendar-event-row--rsvp-tentative {
-  --rsvp-bar: var(--calendar-rsvp-tentative);
+.calendar-event-rsvp--tentative {
+  --status-text: var(--calendar-status-tentative-text);
+  --status-background: var(--calendar-status-tentative-background);
+  --status-border: var(--calendar-status-tentative-border);
 }
 
-.calendar-event-row--rsvp-needsAction {
-  --rsvp-bar: var(--calendar-rsvp-needsAction);
+.calendar-event-rsvp--needsAction {
+  --status-text: var(--calendar-status-needsAction-text);
+  --status-background: var(--calendar-status-needsAction-background);
+  --status-border: var(--calendar-status-needsAction-border);
 }
 
-.calendar-event-row--rsvp-declined {
-  --rsvp-bar: var(--calendar-rsvp-declined);
+.calendar-event-rsvp--declined {
+  --status-text: var(--calendar-status-declined-text);
+  --status-background: var(--calendar-status-declined-background);
+  --status-border: var(--calendar-status-declined-border);
 }
 
 .calendar-event-header {
@@ -334,15 +431,18 @@
 }
 
 .calendar-event-time {
-  font-size: 12px;
-  color: var(--calendar-time);
-  min-width: 110px;
-  flex-shrink: 0;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--calendar-card-time);
+  min-width: 0;
 }
 
 .calendar-event-title {
-  font-size: 14px;
-  color: var(--calendar-text);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--calendar-card-title);
 }
 
 .calendar-event-organizer {
@@ -382,7 +482,9 @@
 
 .calendar-event-row--current,
 .calendar-event-row--selected {
-  background: var(--calendar-highlight);
+  border-color: var(--calendar-card-active-border);
+  box-shadow: 0 0 0 1px var(--calendar-card-active-ring);
+  background: var(--calendar-card-active-background);
 }
 
 /* Explicit dark and system-dark use exactly the same palette. The media query
@@ -427,6 +529,32 @@
   --calendar-input-border-style: solid;
   --calendar-option-hover: #2a2a2a;
   --calendar-option-active: #10262b;
+  --calendar-chip-group-background: rgb(30 41 59 / 90%);
+  --calendar-chip-group-border: rgb(51 65 85 / 60%);
+  --calendar-chip-active-background: #334155;
+  --calendar-chip-badge-border: #1e293b;
+  --calendar-today-background: #1e293b;
+  --calendar-today-hover: #334155;
+  --calendar-today-text: #e2e8f0;
+  --calendar-card-background: rgb(30 41 59 / 80%);
+  --calendar-card-border: #334155;
+  --calendar-card-title: #ffffff;
+  --calendar-card-time: #94a3b8;
+  --calendar-card-active-background: rgb(30 27 75 / 80%);
+  --calendar-card-active-border: #3730a3;
+  --calendar-card-active-ring: rgb(129 140 248 / 30%);
+  --calendar-status-accepted-text: #34d399;
+  --calendar-status-accepted-background: rgb(2 44 34 / 80%);
+  --calendar-status-accepted-border: #065f46;
+  --calendar-status-tentative-text: #fbbf24;
+  --calendar-status-tentative-background: rgb(69 26 3 / 80%);
+  --calendar-status-tentative-border: #92400e;
+  --calendar-status-declined-text: #fb7185;
+  --calendar-status-declined-background: rgb(76 5 25 / 80%);
+  --calendar-status-declined-border: #9f1239;
+  --calendar-status-needsAction-text: #38bdf8;
+  --calendar-status-needsAction-background: rgb(8 47 73 / 80%);
+  --calendar-status-needsAction-border: #075985;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -470,6 +598,32 @@
     --calendar-input-border-style: solid;
     --calendar-option-hover: #2a2a2a;
     --calendar-option-active: #10262b;
+    --calendar-chip-group-background: rgb(30 41 59 / 90%);
+    --calendar-chip-group-border: rgb(51 65 85 / 60%);
+    --calendar-chip-active-background: #334155;
+    --calendar-chip-badge-border: #1e293b;
+    --calendar-today-background: #1e293b;
+    --calendar-today-hover: #334155;
+    --calendar-today-text: #e2e8f0;
+    --calendar-card-background: rgb(30 41 59 / 80%);
+    --calendar-card-border: #334155;
+    --calendar-card-title: #ffffff;
+    --calendar-card-time: #94a3b8;
+    --calendar-card-active-background: rgb(30 27 75 / 80%);
+    --calendar-card-active-border: #3730a3;
+    --calendar-card-active-ring: rgb(129 140 248 / 30%);
+    --calendar-status-accepted-text: #34d399;
+    --calendar-status-accepted-background: rgb(2 44 34 / 80%);
+    --calendar-status-accepted-border: #065f46;
+    --calendar-status-tentative-text: #fbbf24;
+    --calendar-status-tentative-background: rgb(69 26 3 / 80%);
+    --calendar-status-tentative-border: #92400e;
+    --calendar-status-declined-text: #fb7185;
+    --calendar-status-declined-background: rgb(76 5 25 / 80%);
+    --calendar-status-declined-border: #9f1239;
+    --calendar-status-needsAction-text: #38bdf8;
+    --calendar-status-needsAction-background: rgb(8 47 73 / 80%);
+    --calendar-status-needsAction-border: #075985;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-webapp/calendar",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "type": "module",
   "repository": {
     "type": "git",