@open-webapp/calendar 0.5.1 → 0.6.1

package/README.md

@@ -211,6 +211,8 @@ The exported standalone selector keeps its single-list props and behavior; Selec
 
 ### Host CSS
 
+Day ribbon styling: override `--calendar-today-accent` to recolour today's ribbon; `--calendar-day-header-height` tunes the sticky label offset.
+
 `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:
 
 - `--calendar-footer-height` (default `64px`, set on `.calendar-pane`; override to match host footer)
@@ -221,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.6.0 (minor, additive-visual)
+
+- Each day has a thin vertical ribbon left of its events with a rotated `Mmm D` label; today's ribbon uses the new `--calendar-today-accent` token (defaults to the selected-chip colour in light and dark). The sticky day header is unchanged.
+- The RSVP status bar moved from the left edge to the right edge of event rows.
+- New helper `formatRibbonLabel`.
+
 ## 0.5.1 (patch)
 
 - Corrects footer and standalone selector affordance with a padded, rounded 36px-minimum trigger, decorative chevron, themed hover and keyboard-focus treatment, and long-label containment.

package/dist/core/events.d.ts

@@ -52,6 +52,8 @@ export interface DayGroup {
  * to), inserted in correct sorted position.
  */
 export declare function groupByDay(events: CalendarEvent[], todayIso?: string): DayGroup[];
+/** Short "Mmm D" label for the day ribbon: no year, no Today/Tomorrow. */
+export declare function formatRibbonLabel(dateKey: string): string;
 /**
  * "Today · Sept 26" / "Tomorrow · Sept 27" / else "Sept 28"-style.
  * Includes year only when the event's year differs from today's year.

package/dist/core/events.js

@@ -168,6 +168,10 @@ function formatMonthDay(dateKey, includeYear) {
     const base = `${monthName} ${day}`;
     return includeYear ? `${base}, ${year}` : base;
 }
+/** Short "Mmm D" label for the day ribbon: no year, no Today/Tomorrow. */
+export function formatRibbonLabel(dateKey) {
+    return formatMonthDay(dateKey, false);
+}
 function addDaysToIso(dateKey, days) {
     const { year, month, day } = parseIsoDateParts(dateKey);
     const d = new Date(Date.UTC(year, month - 1, day));

package/dist/react/CalendarPane.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { filterByRsvp, groupByDay, getOrganizerLabel, formatDayHeader, formatRibbonLabel, isEventCurrent, findNextUpcomingEvent, getCalendarEventKey, DEFAULT_RSVP_STATUSES, } from '../core/events.js';
 import { GroupedCalendarSelector } from './CalendarSelector.js';
 function toggleRsvpStatus(selection, status) {
     const next = new Set(selection);
@@ -130,6 +130,7 @@ export function CalendarPane(props) {
     const hasScrolledForEventsRef = useRef(false);
     const paneRef = useRef(null);
     const chipsRef = useRef(null);
+    const scrollRef = useRef(null);
     const popupRef = useRef(null);
     const [now, setNow] = useState(() => new Date());
     const [savedSelection, setSavedSelection] = useState(null);
@@ -274,15 +275,21 @@ export function CalendarPane(props) {
         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`);
+            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.
+                    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`);
+            }
         });
         observer.observe(chipsEl);
+        if (scrollRef.current)
+            observer.observe(scrollRef.current);
         return () => observer.disconnect();
     }, [connected, needsReauth]);
     if (!connected) {
@@ -298,52 +305,52 @@ 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", 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("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) => {
                                             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))), loading && _jsx("p", { className: "calendar-empty-state-text", children: "Loading calendar\u2026" }), filteredEvents.length === 0 && !loading && !error && needsScopeSources.length === 0 && _jsx("p", { className: "calendar-empty-state-text", children: emptyStateText })] }))] }), showCalendarSelector && (_jsx("footer", { className: "calendar-pane-footer", children: _jsx(GroupedCalendarSelector, { theme: theme, groups: calendarSources.map((s) => ({
+                                        }, children: formatDayHeader(group.dateKey, todayIso) }), group.events.length > 0 && (_jsxs("div", { className: "calendar-day-body", children: [_jsx("div", { className: "calendar-day-ribbon", "aria-hidden": "true", "data-today": group.dateKey === todayIso ? 'true' : undefined, children: _jsx("div", { className: "calendar-day-ribbon-window", children: _jsx("span", { className: "calendar-day-ribbon-label", children: formatRibbonLabel(group.dateKey) }) }) }), _jsx("div", { className: "calendar-day-events", children: 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))), loading && _jsx("p", { className: "calendar-empty-state-text", children: "Loading calendar\u2026" }), filteredEvents.length === 0 && !loading && !error && needsScopeSources.length === 0 && _jsx("p", { className: "calendar-empty-state-text", children: emptyStateText })] }))] }), showCalendarSelector && (_jsx("footer", { className: "calendar-pane-footer", children: _jsx(GroupedCalendarSelector, { theme: theme, groups: calendarSources.map((s) => ({
                         id: s.id,
                         calendars: controller.getCalendars(s.id),
                         selectedIds: controller.getSelectedIds(s.id),

package/dist/styles.css

@@ -11,6 +11,7 @@
   --calendar-chip-text: #333;
   --calendar-chip-border: #ccc;
   --calendar-chip-selected: #081a59;
+  --calendar-today-accent: #081a59;
   --calendar-chip-selected-text: #ffffff;
   --calendar-badge: #e8eefb;
   --calendar-badge-text: #081a59;
@@ -193,12 +194,56 @@
   z-index: 1;
 }
 
+.calendar-day-body {
+  display: flex;
+}
+
+.calendar-day-events {
+  flex: 1;
+  min-width: 0;
+}
+
+.calendar-day-ribbon {
+  flex: 0 0 16px;
+  width: 16px;
+  min-height: 48px;
+  background: var(--calendar-header);
+  color: var(--calendar-chip-text);
+  user-select: none;
+  font-size: 11px;
+  font-weight: 600;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.calendar-day-ribbon[data-today='true'] {
+  background: var(--calendar-today-accent);
+  color: var(--calendar-chip-selected-text);
+}
+
+.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)));
+  display: flex;
+  align-items: center;
+}
+
+.calendar-day-ribbon-label {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  white-space: nowrap;
+  padding: 6px 0;
+}
+
 .calendar-event-allday {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 16px;
-  border-left: 3px solid var(--rsvp-bar, transparent);
+  border-right: 3px solid var(--rsvp-bar, transparent);
   border-bottom: 1px solid var(--calendar-border);
 }
 
@@ -207,7 +252,7 @@
   flex-direction: column;
   gap: 8px;
   padding: 10px 16px;
-  border-left: 3px solid var(--rsvp-bar, transparent);
+  border-right: 3px solid var(--rsvp-bar, transparent);
   border-bottom: 1px solid var(--calendar-border);
 }
 
@@ -350,6 +395,7 @@
   --calendar-chip-text: #eee;
   --calendar-chip-border: #444;
   --calendar-chip-selected: #22d0ef;
+  --calendar-today-accent: #22d0ef;
   --calendar-chip-selected-text: #081a59;
   --calendar-badge: #081a59;
   --calendar-badge-text: #e8eefb;
@@ -391,6 +437,7 @@
     --calendar-chip-text: #eee;
     --calendar-chip-border: #444;
     --calendar-chip-selected: #22d0ef;
+  --calendar-today-accent: #22d0ef;
     --calendar-chip-selected-text: #081a59;
     --calendar-badge: #081a59;
     --calendar-badge-text: #e8eefb;

package/package.json

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