@milktop/react-ui 0.1.2 → 0.2.0

package/dist/event-calendar/EventCalendar.d.ts

@@ -56,7 +56,8 @@
  * - `onEventChange(event, { start, end, resourceId }, { kind })`: makes
  *   events movable and resizable: drag one to another time, day or resource,
  *   or its bottom edge to change its length; or focus it and use ↑↓ (a slot),
- *   ←→ (a column), Shift+↑↓ (its length). The change spreads straight into
+ *   ←→ (a column), Shift+↑↓ (its length). Dragging (or selecting) near an
+ *   edge scrolls the grid, or the page. The change spreads straight into
  *   the event (`{ ...event, ...change }`); `kind` is 'move' or 'resize', and
  *   comparing `resourceId` with the event's shows a change of resource.
  *   Update your events in response (or don't, and it stays where it was)
@@ -80,7 +81,9 @@
  *
  * Drawing and words
  * - `renderEvent(event, { start, end, resource, compact })`, `renderResource(resource)`,
- *   `renderDayHeader(date)`: draw those yourself
+ *   `renderDayHeader(date, { events, resources })`: draw those yourself. A day
+ *   header gets that day's events and the resources (e.g. who's in, in a view
+ *   without their columns)
  * - `eventLabel(event)`: what screen readers call an event (its title, if text)
  * - `translations`: its words (Today, All day, the views, the announcements…),
  *   over the LocaleProvider's (English and French are built in);
@@ -88,7 +91,7 @@
  * - `actions`: in the toolbar; `toolbar`: false hides it
  */
 import { type HTMLAttributes, type ReactNode } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import type { CalendarMessages } from '../format/messages.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
@@ -160,6 +163,7 @@ export type CalendarTranslations = CalendarMessages;
 export type EventCalendarProps<E extends CalendarEvent = CalendarEvent, R extends CalendarResource = CalendarResource> = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> & {
     events?: E[];
     resources?: R[] | null;
+    resourceViews?: CalendarView[] | null;
     view?: CalendarView;
     defaultView?: CalendarView;
     onViewChange?: (view: CalendarView) => void;
@@ -201,7 +205,10 @@ export type EventCalendarProps<E extends CalendarEvent = CalendarEvent, R extend
         compact: boolean;
     }) => ReactNode;
     renderResource?: (resource: R) => ReactNode;
-    renderDayHeader?: (date: Date) => ReactNode;
+    renderDayHeader?: (date: Date, day: {
+        events: E[];
+        resources: R[] | null;
+    }) => ReactNode;
     eventLabel?: (event: E) => string;
     translations?: Partial<CalendarTranslations>;
     actions?: ReactNode;
@@ -209,5 +216,5 @@ export type EventCalendarProps<E extends CalendarEvent = CalendarEvent, R extend
     locale?: string;
     classes?: Classes<'root' | 'toolbar' | 'nav' | 'title' | 'actions' | 'pinned' | 'grid' | 'corner' | 'dayHeader' | 'resourceHeader' | 'rowLabel' | 'rowCell' | 'allDayLabel' | 'allDay' | 'allDayEvent' | 'more' | 'gutter' | 'hour' | 'day' | 'unavailable' | 'event' | 'eventTitle' | 'headerButton' | 'hover' | 'eventTime' | 'resize' | 'ghost' | 'selection' | 'now' | 'status'>;
 };
-export declare function EventCalendar<E extends CalendarEvent = CalendarEvent, R extends CalendarResource = CalendarResource>({ events, resources, view: viewProp, defaultView, onViewChange, views, date: dateProp, defaultDate, onDateChange, weekStartsOn, startHour, endHour, slotMinutes, hourHeight, height, scrollToTime, rows, allDayMax, onSelect, onEventClick, onDayClick, onResourceClick, onRangeChange, onEventChange, isAvailable, onUnavailable, pinned, onPinnedChange, eventMenu, slotMenu, renderEvent, renderResource, renderDayHeader, eventLabel, translations, actions, toolbar, locale: localeProp, className, classes, style, ...rest }: EventCalendarProps<E, R>): import("react").JSX.Element;
+export declare function EventCalendar<E extends CalendarEvent = CalendarEvent, R extends CalendarResource = CalendarResource>({ events, resources, resourceViews, view: viewProp, defaultView, onViewChange, views, date: dateProp, defaultDate, onDateChange, weekStartsOn, startHour, endHour, slotMinutes, hourHeight, height, scrollToTime, rows, allDayMax, onSelect, onEventClick, onDayClick, onResourceClick, onRangeChange, onEventChange, isAvailable, onUnavailable, pinned, onPinnedChange, eventMenu, slotMenu, renderEvent, renderResource, renderDayHeader, eventLabel, translations, actions, toolbar, locale: localeProp, className, classes, style, ...rest }: EventCalendarProps<E, R>): import("react").JSX.Element;
 export {};

package/dist/event-calendar/EventCalendar.js

@@ -57,7 +57,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - `onEventChange(event, { start, end, resourceId }, { kind })`: makes
  *   events movable and resizable: drag one to another time, day or resource,
  *   or its bottom edge to change its length; or focus it and use ↑↓ (a slot),
- *   ←→ (a column), Shift+↑↓ (its length). The change spreads straight into
+ *   ←→ (a column), Shift+↑↓ (its length). Dragging (or selecting) near an
+ *   edge scrolls the grid, or the page. The change spreads straight into
  *   the event (`{ ...event, ...change }`); `kind` is 'move' or 'resize', and
  *   comparing `resourceId` with the event's shows a change of resource.
  *   Update your events in response (or don't, and it stays where it was)
@@ -81,7 +82,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * Drawing and words
  * - `renderEvent(event, { start, end, resource, compact })`, `renderResource(resource)`,
- *   `renderDayHeader(date)`: draw those yourself
+ *   `renderDayHeader(date, { events, resources })`: draw those yourself. A day
+ *   header gets that day's events and the resources (e.g. who's in, in a view
+ *   without their columns)
  * - `eventLabel(event)`: what screen readers call an event (its title, if text)
  * - `translations`: its words (Today, All day, the views, the announcements…),
  *   over the LocaleProvider's (English and French are built in);
@@ -89,7 +92,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * - `actions`: in the toolbar; `toolbar`: false hides it
  */
 import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import 'iconify-icon';
+import '../icons.js';
 import { Button } from '../button/Button.js';
 import { Popover } from '../popover/Popover.js';
 import { DatePicker } from '../date-picker/DatePicker.js';
@@ -137,7 +140,18 @@ function place(events) {
     close();
     return placed;
 }
-export function EventCalendar({ events = [], resources = null, view: viewProp, defaultView = 'week', onViewChange, views = ['day', 'week'], date: dateProp, defaultDate, onDateChange, weekStartsOn = 1, startHour = 7, endHour = 21, slotMinutes = 30, hourHeight = '3rem', height = null, scrollToTime = null, rows = [], allDayMax = 3, onSelect, onEventClick, onDayClick, onResourceClick, onRangeChange, onEventChange, isAvailable, onUnavailable, pinned = null, onPinnedChange, eventMenu, slotMenu, renderEvent, renderResource, renderDayHeader, eventLabel, translations, actions = null, toolbar = true, locale: localeProp, className, classes, style, ...rest }) {
+// The nearest ancestor that scrolls up and down, or the document.
+function scrollParent(from) {
+    let el = from.parentElement;
+    while (el && el !== document.body) {
+        const overflow = getComputedStyle(el).overflowY;
+        if ((overflow === 'auto' || overflow === 'scroll') && el.scrollHeight > el.clientHeight + 1)
+            return el;
+        el = el.parentElement;
+    }
+    return document.scrollingElement;
+}
+export function EventCalendar({ events = [], resources = null, resourceViews = null, view: viewProp, defaultView = 'week', onViewChange, views = ['day', 'week'], date: dateProp, defaultDate, onDateChange, weekStartsOn = 1, startHour = 7, endHour = 21, slotMinutes = 30, hourHeight = '3rem', height = null, scrollToTime = null, rows = [], allDayMax = 3, onSelect, onEventClick, onDayClick, onResourceClick, onRangeChange, onEventChange, isAvailable, onUnavailable, pinned = null, onPinnedChange, eventMenu, slotMenu, renderEvent, renderResource, renderDayHeader, eventLabel, translations, actions = null, toolbar = true, locale: localeProp, className, classes, style, ...rest }) {
     const app = useLocale();
     const locale = localeProp ?? app;
     const part = partsOf('event-calendar', classes);
@@ -165,7 +179,9 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
     const count = view === 'day' ? 1 : view === 'week' ? 7 : view === 'workweek' ? 5 : Math.max(1, view);
     const step = view === 'week' || view === 'workweek' ? 7 : count;
     const dates = Array.from({ length: count }, (_, i) => addDays(first, i));
-    const lanes = resources?.length ? resources : [null];
+    // A column per resource in this view, or everyone's events together.
+    const split = !!resources?.length && (!resourceViews || resourceViews.includes(view));
+    const lanes = split ? resources : [null];
     const columns = dates.flatMap((d) => lanes.map((resource) => ({ date: d, iso: toISODate(d), resource })));
     const hours = Array.from({ length: endHour - startHour }, (_, i) => startHour + i);
     const span = (endHour - startHour) * 60;
@@ -193,7 +209,7 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
     const snap = (minutes) => Math.floor(minutes / slotMinutes) * slotMinutes;
     const nameOf = (event) => eventLabel ? eventLabel(event) : typeof event.title === 'string' ? event.title : 'Event';
     const resourceName = (column) => column?.resource && typeof column.resource.title === 'string' ? `, ${column.resource.title}` : '';
-    const columnOf = (event, iso) => columns.findIndex((c) => c.iso === iso && (!resources?.length || c.resource?.id === event.resourceId));
+    const columnOf = (event, iso) => columns.findIndex((c) => c.iso === iso && (!split || c.resource?.id === event.resourceId));
     const [picking, setPicking] = useState(false);
     const [status, setStatus] = useState('');
     const [allDayOpen, setAllDayOpen] = useState(false);
@@ -284,6 +300,24 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
     };
     const refocus = useRef(null);
     const suppressClick = useRef(false);
+    // `byMinutes` kept to the day's hours: an event moves or grows no further than
+    // the grid shows (one already past an edge doesn't go further past it).
+    function withinHours(event, kind, byMinutes) {
+        const start = parse(event.start);
+        const from = minutesOfDay(start);
+        const to = from + minutesBetween(start, parse(event.end));
+        const latest = Math.max(0, endHour * 60 - to);
+        const earliest = kind === 'move' ? Math.min(0, startHour * 60 - from) : -Infinity;
+        return Math.max(earliest, Math.min(latest, byMinutes));
+    }
+    // Where a pinned event placed at `minute` starts: on a slot, ending by the day's last hour.
+    function placeAt(minute) {
+        if (!pinned)
+            return minute;
+        const length = minutesBetween(parse(pinned.start), parse(pinned.end)) || slotMinutes;
+        const latest = startHour * 60 + Math.floor((span - length) / slotMinutes) * slotMinutes;
+        return Math.max(startHour * 60, Math.min(latest, minute));
+    }
     // Where an event would go if moved by `byColumns` and `byMinutes` (or resized by `byMinutes`).
     function target(event, kind, byColumns, byMinutes) {
         const start = parse(event.start);
@@ -291,6 +325,9 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
         const from = columnOf(event, event.start.slice(0, 10));
         if (from < 0)
             return null;
+        byMinutes = withinHours(event, kind, byMinutes);
+        if (!byColumns && !byMinutes)
+            return null;
         if (kind === 'resize') {
             const newEnd = addMinutes(end, byMinutes);
             if (minutesBetween(start, newEnd) < slotMinutes)
@@ -301,10 +338,11 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
         const days = Math.round((column.date.getTime() - columns[from].date.getTime()) / 86400000);
         return { start: addMinutes(addDays(start, days), byMinutes), end: addMinutes(addDays(end, days), byMinutes), column };
     }
-    const queryFor = (event, next) => ({
-        start: toISODateTime(next.start), end: toISODateTime(next.end), allDay: false, event,
-        ...(next.column.resource && { resourceId: next.column.resource.id }),
-    });
+    // Its new column's resource, or (in a view without their columns) its own.
+    const queryFor = (event, next) => {
+        const resourceId = next.column.resource ? next.column.resource.id : event.resourceId;
+        return { start: toISODateTime(next.start), end: toISODateTime(next.end), allDay: false, event, ...(resourceId != null && { resourceId }) };
+    };
     // Applies a change (after checking it's allowed).
     function commit(event, kind, next) {
         const query = queryFor(event, next);
@@ -316,7 +354,7 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
             ? t.resized(nameOf(event), timeFormat.format(next.end))
             : t.moved(nameOf(event), `${longDay.format(next.start)}, ${timeFormat.format(next.start)}${resourceName(next.column)}`));
         onEventChange?.(event, {
-            start: query.start, end: query.end, ...(next.column.resource && { resourceId: next.column.resource.id }),
+            start: query.start, end: query.end, ...(query.resourceId != null && { resourceId: query.resourceId }),
         }, { kind });
     }
     function change(event, kind, byColumns, byMinutes) {
@@ -334,23 +372,30 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
             e.currentTarget.setPointerCapture(e.pointerId);
         }
         catch { /* not a live pointer */ }
+        // Where things are scrolled at the start: a drag near an edge scrolls the
+        // grid (or the page), and positions are measured again as it does.
+        const scroll = { left: grid.current?.scrollLeft ?? 0, x: scrollX };
+        const point = { x: e.clientX, y: e.clientY, lastX: e.clientX, lastY: e.clientY, moved: false, keys: keysOf(e), scroll };
         if (kind === 'all-day') {
             // The strip spans every column: which one is under the pointer.
             const box = e.currentTarget.getBoundingClientRect();
             const width = box.width / columns.length;
             const at = Math.max(0, Math.min(columns.length - 1, Math.floor((e.clientX - box.left) / width)));
-            gesture.current = { kind, column: at, x: e.clientX, y: e.clientY, top: box.top, height: box.height, width, left: box.left, from: at, moved: false, keys: keysOf(e) };
+            gesture.current = { kind, column: at, ...point, target: e.currentTarget, width, from: at, exact: 0 };
             setPreview({ kind: 'all-day', columns: [at] });
             return;
         }
-        const box = e.currentTarget.closest('[data-part=day]').getBoundingClientRect();
+        const day = e.currentTarget.closest('[data-part=day][role=gridcell]');
+        const box = day.getBoundingClientRect();
         const from = minuteAt(e.clientY, box);
-        gesture.current = { kind, column, x: e.clientX, y: e.clientY, top: box.top, height: box.height, width: box.width, left: box.left, from, moved: false, keys: keysOf(e), event };
+        gesture.current = { kind, column, ...point, target: day, width: box.width, from, exact: exactMinute(e.clientY, box), event };
         if (kind === 'select')
             setPreview({ kind: 'select', column, from, to: from + slotMinutes });
         if (kind === 'place')
-            setPreview({ kind: 'place', column, from });
+            setPreview({ kind: 'place', column, from: placeAt(from) });
     }
+    // The minute of the day at a height in a day column (not snapped).
+    const exactMinute = (y, box) => startHour * 60 + Math.max(0, Math.min(span - 1, ((y - box.top) / box.height) * span));
     // The columns from one to another (with resources, only the first one's resource).
     const columnRange = (a, b) => {
         const lo = Math.min(a, b);
@@ -361,35 +406,100 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
         const g = gesture.current;
         if (!g)
             return;
-        const dx = e.clientX - g.x;
-        const dy = e.clientY - g.y;
-        if (!g.moved && Math.hypot(dx, dy) < 4)
+        g.lastX = e.clientX;
+        g.lastY = e.clientY;
+        if (!g.moved && Math.hypot(e.clientX - g.x, e.clientY - g.y) < 4)
             return;
         g.moved = true;
-        const perMinute = g.height / span;
+        updatePreview();
+        autoScroll();
+    }
+    // The preview from the pointer's last position, measured afresh, so it
+    // stays right while the grid or the page scrolls under it.
+    function updatePreview() {
+        const g = gesture.current;
+        if (!g)
+            return;
+        const box = g.target.getBoundingClientRect();
         if (g.kind === 'all-day') {
-            const at = Math.max(0, Math.min(columns.length - 1, Math.floor((e.clientX - g.left) / g.width)));
-            setPreview({ kind: 'all-day', columns: columnRange(g.from, at) });
+            const at = Math.max(0, Math.min(columns.length - 1, Math.floor((g.lastX - box.left) / g.width)));
+            return setPreview({ kind: 'all-day', columns: columnRange(g.from, at) });
         }
-        else if (g.kind === 'select') {
-            const at = minuteAt(e.clientY, g);
+        const perMinute = box.height / span;
+        if (g.kind === 'select') {
+            const at = minuteAt(g.lastY, box);
             setPreview({ kind: 'select', column: g.column, from: Math.min(g.from, at), to: Math.max(g.from, at) + slotMinutes });
         }
         else if (g.kind === 'place') {
-            setPreview({ kind: 'place', column: g.column, from: minuteAt(e.clientY, g) });
-        }
-        else if (g.kind === 'move') {
-            const byColumns = Math.round(dx / g.width);
-            const byMinutes = Math.round(dy / perMinute / slotMinutes) * slotMinutes;
-            setPreview({ kind: 'move', id: g.event.id, columns: byColumns, minutes: byMinutes, x: byColumns * g.width, y: byMinutes * perMinute });
+            setPreview({ kind: 'place', column: g.column, from: placeAt(minuteAt(g.lastY, box)) });
         }
         else {
-            setPreview({ kind: 'resize', id: g.event.id, minutes: Math.round(dy / perMinute / slotMinutes) * slotMinutes });
+            let byMinutes = Math.round((exactMinute(g.lastY, box) - g.exact) / slotMinutes) * slotMinutes;
+            if (g.kind === 'move') {
+                const scrolledX = (grid.current?.scrollLeft ?? 0) - g.scroll.left + scrollX - g.scroll.x;
+                const byColumns = Math.round((g.lastX - g.x + scrolledX) / g.width);
+                byMinutes = withinHours(g.event, 'move', byMinutes);
+                setPreview({ kind: 'move', id: g.event.id, columns: byColumns, minutes: byMinutes, x: byColumns * g.width, y: byMinutes * perMinute });
+            }
+            else {
+                setPreview({ kind: 'resize', id: g.event.id, minutes: withinHours(g.event, 'resize', byMinutes) });
+            }
         }
     }
+    // Near an edge while dragging: scroll that way, faster the closer it is,
+    // each frame until the pointer moves away or lets go. Up and down scrolls
+    // the grid when it has a `height` (below its sticky headers), or else the
+    // page; sideways, the grid when it's wider than its box.
+    const scrolling = useRef(false);
+    function autoScroll() {
+        if (scrolling.current)
+            return;
+        scrolling.current = true;
+        // Each loop belongs to one gesture: one left over from the last drag stops.
+        const owner = gesture.current;
+        const step = () => {
+            const g = gesture.current;
+            const el = grid.current;
+            if (!g || g !== owner || !g.moved || !el)
+                return void (scrolling.current = false);
+            const box = el.getBoundingClientRect();
+            const edge = 48;
+            const speed = (near) => Math.ceil(Math.min(1, Math.max(0, (edge - near) / edge)) * 18);
+            let vy = 0;
+            let vx = 0;
+            if (g.kind !== 'all-day') {
+                const scroller = el.scrollHeight > el.clientHeight + 1 ? el : scrollParent(el);
+                // The grid below its sticky headers; the page (whose top can sit under
+                // a fixed top bar); or an app shell's scrolling page.
+                const area = scroller === el ? { top: box.top + (parseFloat(el.style.getPropertyValue('--sticky-total')) || 0), bottom: box.bottom }
+                    : scroller === document.scrollingElement ? { top: 64, bottom: innerHeight }
+                        : scroller.getBoundingClientRect();
+                vy = g.lastY < area.top + edge ? -speed(g.lastY - area.top) : g.lastY > area.bottom - edge ? speed(area.bottom - g.lastY) : 0;
+                const before = scroller.scrollTop;
+                scroller.scrollTop += vy;
+                // Already at the end: nothing more to scroll.
+                if (scroller.scrollTop === before)
+                    vy = 0;
+            }
+            if (el.scrollWidth > el.clientWidth + 1) {
+                const left = box.left + (el.querySelector('[data-part=gutter]')?.offsetWidth ?? 0);
+                vx = g.lastX < left + edge ? -speed(g.lastX - left) : g.lastX > box.right - edge ? speed(box.right - g.lastX) : 0;
+                const before = el.scrollLeft;
+                el.scrollLeft += vx;
+                if (el.scrollLeft === before)
+                    vx = 0;
+            }
+            if (!vx && !vy)
+                return void (scrolling.current = false);
+            updatePreview();
+            requestAnimationFrame(step);
+        };
+        requestAnimationFrame(step);
+    }
     function end() {
         const g = gesture.current;
         gesture.current = null;
+        scrolling.current = false;
         const p = latestPreview.current;
         setPreview(null);
         if (!g)
@@ -432,6 +542,7 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
     }
     function cancel() {
         gesture.current = null;
+        scrolling.current = false;
         setPreview(null);
     }
     function keyDown(e, event) {
@@ -457,10 +568,10 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
     function hover(e, column) {
         if (gesture.current)
             return setHoverSlot(null);
-        const box = e.currentTarget.closest('[data-part=day]').getBoundingClientRect();
+        const box = e.currentTarget.closest('[data-part=day][role=gridcell]').getBoundingClientRect();
         const from = minuteAt(e.clientY, box);
         if (pinned)
-            return setPreview({ kind: 'place', column, from });
+            return setPreview({ kind: 'place', column, from: placeAt(from) });
         // Over the empty column (or its shading), not an event.
         const over = e.target;
         setHoverSlot(onSelect && (over === e.currentTarget || over.dataset.part === 'unavailable') ? { column, from } : null);
@@ -504,7 +615,7 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
         if (!el || !height || !scrollToTime || scrolled.current)
             return;
         scrolled.current = true;
-        const day = el.querySelector('[data-part=day]');
+        const day = el.querySelector('[data-part=day][role=gridcell]');
         if (!day)
             return;
         const [h, m] = scrollToTime === 'now' ? [now.getHours() - 1, 0] : scrollToTime.split(':').map(Number);
@@ -516,7 +627,7 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
     const allDay = events.filter(isAllDay).flatMap((event) => {
         const from = event.start.slice(0, 10);
         const to = event.end.slice(0, 10);
-        const covered = columns.map((c, i) => (c.iso >= from && c.iso <= to && (!resources?.length || c.resource?.id === event.resourceId) ? i : -1))
+        const covered = columns.map((c, i) => (c.iso >= from && c.iso <= to && (!split || c.resource?.id === event.resourceId) ? i : -1))
             .filter((i) => i >= 0);
         // Runs of neighbouring columns (with resources, a day's column for the event's resource).
         const runs = [];
@@ -565,13 +676,15 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
     }
     const hiddenIn = (i) => hiddenCount[i];
     const barColor = (event) => event.color ?? resourceOf(event.resourceId)?.color ?? 'accent';
-    const twoRows = !!resources?.length && count > 1;
+    // The events on a day, for its header.
+    const eventsOn = (d) => events.filter((event) => event.start.slice(0, 10) <= toISODate(d) && event.end.slice(0, 10) >= toISODate(d));
+    const twoRows = split && count > 1;
     const editable = (event) => !!onEventChange && event.editable !== false && !event.pending;
     const pinnedMinutes = pinned ? minutesBetween(parse(pinned.start), parse(pinned.end)) || slotMinutes : 0;
     // The header rows, numbered for sticking: days, resources, extra rows, the all-day strip.
     let rowNumber = 0;
-    const dayRow = !resources?.length || count > 1 ? rowNumber++ : -1;
-    const resourceRow = resources?.length ? rowNumber++ : -1;
+    const dayRow = !split || count > 1 ? rowNumber++ : -1;
+    const resourceRow = split ? rowNumber++ : -1;
     const extraRows = rows.map(() => rowNumber++);
     const allDayRow = rowNumber;
     // The preview's problem, if any, shown as it's dragged.
@@ -595,7 +708,7 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
                                 setDate(value);
                                 setPicking(false);
                             } } }) }), _jsxs("div", { ...part('actions'), children: [!narrow && views.length > 1 && (_jsx(Segmented, { size: "sm", "aria-label": t.view, items: views.map((v) => ({ value: String(v), label: viewLabel(v) })), value: String(chosenView), onValueChange: (v) => v && setView(/^\d+$/.test(v) ? Number(v) : v) })), actions] })] })), pinned && (_jsxs("div", { ...part('pinned'), role: "status", children: [_jsx("iconify-icon", { icon: "lucide:move", "aria-hidden": "true" }), _jsx("span", { children: t.placing(nameOf(pinned)) }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => onPinnedChange?.(null), children: t.cancel })] })), _jsxs("div", { ...part('grid'), ref: grid, role: "grid", "aria-label": title, "data-two-rows": twoRows || undefined, "data-scroll": height ? '' : undefined, style: height ? { maxHeight: height } : undefined, children: [_jsx("div", { ...part('corner'), "data-sticky-row": dayRow >= 0 ? dayRow : resourceRow, style: { gridRow: twoRows ? 'span 2' : undefined, top: `var(--sticky-${dayRow >= 0 ? dayRow : resourceRow})` } }), dayRow >= 0 && dates.map((d) => (_jsx("div", { ...part('day-header'), role: "columnheader", "data-today": sameDay(d, now) || undefined, "data-sticky-row": dayRow, style: { gridColumn: `span ${lanes.length}`, top: `var(--sticky-${dayRow})` }, children: (() => {
-                            const content = renderDayHeader ? renderDayHeader(d) : _jsxs(_Fragment, { children: [_jsx("span", { children: dayFormat.format(d) }), _jsx("strong", { children: d.getDate() })] });
+                            const content = renderDayHeader ? renderDayHeader(d, { events: eventsOn(d), resources }) : _jsxs(_Fragment, { children: [_jsx("span", { children: dayFormat.format(d) }), _jsx("strong", { children: d.getDate() })] });
                             return onDayClick
                                 ? _jsx("button", { type: "button", ...part('header-button'), onClick: () => onDayClick(toISODate(d)), "aria-label": longDay.format(d), children: content })
                                 : content;
@@ -629,7 +742,7 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
                                         }, onClick: () => onEventClick?.(event), onContextMenu: (e) => { if (openMenu(e.clientX, e.clientY, eventMenu?.(event)))
                                             e.preventDefault(); }, children: renderEvent ? renderEvent(event, { start: parse(event.start), end: parse(event.end), resource: null, compact: true }) : event.title }, `${event.id}-${first}`))), folding && columns.map((_, i) => hiddenIn(i) > 0 && (_jsx("button", { type: "button", ...part('more'), onClick: () => setAllDayOpen(true), style: { left: `${(i / columns.length) * 100}%`, width: `${100 / columns.length}%`, top: `calc(${shownLanes} * 1.625rem + 0.25rem)` }, children: t.more(hiddenIn(i)) }, `more-${i}`)))] })] }), _jsx("div", { ...part('gutter'), "aria-hidden": "true", style: { '--hours': hours.length }, children: hours.map((hour) => _jsx("span", { ...part('hour'), style: { top: top(hour * 60) }, children: hourFormat.format(new Date(2000, 0, 1, hour)) }, hour)) }), columns.map((column, index) => {
                         const own = events.filter((event) => !isAllDay(event) && event.start.startsWith(column.iso)
-                            && (!resources?.length || event.resourceId === column.resource?.id));
+                            && (!column.resource || event.resourceId === column.resource.id));
                         const selecting = preview?.kind === 'select' && preview.column === index ? preview : null;
                         const placing = preview?.kind === 'place' && preview.column === index ? preview : null;
                         const isToday = sameDay(column.date, now);
@@ -640,7 +753,7 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
                             else if (onSelect)
                                 begin(e, 'select', index);
                         };
-                        return (_jsxs("div", { ...part('day'), role: "gridcell", "aria-label": `${longDay.format(column.date)}${resourceName(column)}`, "data-today": isToday || undefined, "data-selectable": onSelect || pinned ? '' : undefined, "data-first": (!!resources?.length && column.resource === lanes[0]) || undefined, style: { '--hours': hours.length, ...(column.resource?.color && { '--resource-color': cssColor(column.resource.color) }) }, onPointerDown: (e) => { if (e.target === e.currentTarget)
+                        return (_jsxs("div", { ...part('day'), role: "gridcell", "aria-label": `${longDay.format(column.date)}${resourceName(column)}`, "data-today": isToday || undefined, "data-selectable": onSelect || pinned ? '' : undefined, "data-first": (split && column.resource === lanes[0]) || undefined, style: { '--hours': hours.length, ...(column.resource?.color && { '--resource-color': cssColor(column.resource.color) }) }, onPointerDown: (e) => { if (e.target === e.currentTarget)
                                 press(e); }, onPointerMove: (e) => { track(e); hover(e, index); }, onPointerUp: end, onPointerCancel: cancel, onPointerLeave: () => { setHoverSlot(null); if (pinned && !gesture.current)
                                 setPreview(null); }, onContextMenu: (e) => {
                                 // An empty time (or its unavailable shading), not an event.
@@ -655,7 +768,7 @@ export function EventCalendar({ events = [], resources = null, view: viewProp, d
                                     const resizing = preview?.kind === 'resize' && preview.id === event.id ? preview : null;
                                     const shownEnd = resizing ? addMinutes(finish, resizing.minutes) : finish;
                                     const minutes = minutesBetween(start, shownEnd);
-                                    const color = event.color ?? column.resource?.color ?? 'accent';
+                                    const color = event.color ?? (column.resource ?? resourceOf(event.resourceId))?.color ?? 'accent';
                                     const time = `${timeFormat.format(start)} – ${timeFormat.format(shownEnd)}`;
                                     const box = { top: top(minutesOfDay(start)), left: `${(sub / subs) * 100}%`, width: `${100 / subs}%` };
                                     return (_jsxs(Fragment, { children: [(moving || resizing) && _jsx("div", { ...part('ghost'), style: { ...box, height: length(minutesBetween(start, finish)) } }), _jsxs("button", { type: "button", ...part('event'), "data-event-id": event.id, "data-dragging": moving || resizing ? '' : undefined, "data-invalid": (moving || resizing) && previewReason ? '' : undefined, "data-editable": editable(event) || undefined, "data-compact": minutes <= 30 || undefined, "data-blocked": event.blocked || undefined, "data-pending": event.pending || undefined, "data-pinned": pinned?.id === event.id || undefined, "data-color": named.includes(color) ? color : 'custom', "aria-label": `${nameOf(event)}, ${time}`, "aria-busy": event.pending || undefined, title: (moving || resizing) && previewReason ? previewReason : undefined, style: {

package/dist/event-calendar/event-calendar.css

@@ -10,8 +10,9 @@
     &:focus-visible { outline: 2px solid var(--ui-ring-soft); } }
   [data-scope=event-calendar][data-part=actions] { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
 
-  /* A time gutter, then a column per day (or per resource within each day); it scrolls sideways when narrow. */
-  [data-scope=event-calendar][data-part=grid] { display: grid; grid-template-columns: minmax(3.5rem, max-content) repeat(var(--columns), minmax(6.5rem, 1fr));
+  /* A time gutter, then a column per day (or per resource within each day); it scrolls sideways when narrow.
+     The gutter is as wide as its widest label, however many columns there are. */
+  [data-scope=event-calendar][data-part=grid] { display: grid; grid-template-columns: max-content repeat(var(--columns), minmax(6.5rem, 1fr));
     overflow-x: auto; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: calc(var(--ui-radius) + 2px);
     box-shadow: var(--ui-card-shadow); }
   [data-scope=event-calendar]:is([data-part=corner], [data-part=day-header], [data-part=resource-header]) {
@@ -57,7 +58,7 @@
     &:focus-visible { outline: 2px solid var(--ui-ring); outline-offset: 1px; }
     &[data-continued] { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: none; } }
 
-  [data-scope=event-calendar][data-part=gutter] { position: relative; height: calc(var(--hour-height) * var(--hours)); }
+  [data-scope=event-calendar][data-part=gutter] { position: relative; min-width: 3.5rem; height: calc(var(--hour-height) * var(--hours)); }
   [data-scope=event-calendar][data-part=hour] { position: absolute; right: 0.5rem; translate: 0 -50%; color: var(--ui-muted); font-size: 11px;
     &:first-child { translate: 0 2px; } }
   /* Hour lines, with a fainter one at the half hour. */
@@ -70,6 +71,8 @@
     /* With resources over several days, a stronger line where each day starts. */
     [data-two-rows] > &[data-first] { border-left-color: var(--ui-muted); } }
   [data-two-rows] > [data-scope=event-calendar][data-part=day-header] { border-left-color: var(--ui-muted); }
+  /* Pressing and dragging selects times, not the text on them. */
+  [data-scope=event-calendar]:is([data-part=day], [data-part=all-day], [data-part=event]) { user-select: none; -webkit-user-select: none; }
 
   [data-scope=event-calendar][data-part=event], [data-scope=event-calendar][data-part=all-day-event] {
     &[data-color=success] { --event-color: var(--ui-success); }
@@ -78,7 +81,7 @@
     &[data-color=neutral] { --event-color: var(--ui-muted); } }
   [data-scope=event-calendar][data-part=event] { --event-color: var(--ui-accent);
     position: absolute; z-index: 1; display: flex; flex-direction: column; gap: 0.125rem; box-sizing: border-box; overflow: hidden;
-    padding: 0.25rem 0.375rem; border: 2px solid var(--ui-surface); border-radius: calc(var(--ui-radius) + 2px);
+    padding: 0.25rem 0.375rem; border: 2px solid var(--ui-surface); border-radius: 0 calc(var(--ui-radius) + 2px) calc(var(--ui-radius) + 2px) 0;
     border-left: 3px solid var(--event-color); background: color-mix(in srgb, var(--event-color) 16%, var(--ui-surface));
     color: var(--ui-text); font: inherit; font-size: 12px; text-align: left; cursor: pointer;
     &:hover { background: color-mix(in srgb, var(--event-color) 24%, var(--ui-surface)); }
@@ -111,7 +114,9 @@
   [data-scope=event-calendar][data-part=grid][data-scroll] { position: relative; overflow: auto;
     & > [data-sticky-row] { position: sticky; z-index: 5; background-color: var(--ui-surface); }
     & > :is([data-part=corner], [data-part=all-day-label], [data-part=row-label]) { left: 0; z-index: 6; }
-    & > [data-part=gutter] { position: sticky; left: 0; z-index: 4; background: var(--ui-surface); } }
+    & > [data-part=gutter] { position: sticky; left: 0; z-index: 4; background: var(--ui-surface); }
+    /* A header with its menu open (focus is in it) sits above the rows below. */
+    & > [data-sticky-row]:focus-within { z-index: 7; } }
 
   /* Time that can't be used (isAvailable): hatched, with its reason on hover. */
   [data-scope=event-calendar][data-part=unavailable] { position: absolute; left: 0; right: 0; cursor: not-allowed;

package/dist/file-upload/FileUpload.d.ts

@@ -28,7 +28,7 @@
  */
 import { type ReactNode } from 'react';
 import { FileUpload as Ark } from '@ark-ui/react/file-upload';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './file-upload.css';

package/dist/file-upload/FileUpload.js

@@ -31,7 +31,7 @@ import { useEffect, useMemo, useRef } from 'react';
 import { FileUpload as Ark } from '@ark-ui/react/file-upload';
 import { createFileTypeValidator, getAcceptAttrString, getFileKey, isValidFileSize } from '@zag-js/file-utils';
 import { useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partsOf, useControllable, withParts } from '../utils.js';
 import { useLocale, useMessages } from '../format/LocaleProvider.js';
 import { formatBytes } from '../format/format.js';

package/dist/format/messages.d.ts

@@ -146,6 +146,18 @@ export type Messages = {
         dark: string;
         system: string;
     };
+    appearance: {
+        label: string;
+        mode: string;
+        accent: string;
+        sidebar: string;
+        lightOnly: string;
+        custom: string;
+        dev: string;
+        reset: string;
+        accents: Record<string, string>;
+        sidebars: Record<string, string>;
+    };
     sortableList: {
         handle: string;
         instructions: string;

package/dist/format/messages.js

@@ -36,6 +36,12 @@ export const en = {
     chart: { label: 'Chart', total: 'Total' },
     stat: { up: 'Up', down: 'Down', same: 'No change' },
     themeToggle: { label: 'Colour scheme', light: 'Light', dark: 'Dark', system: 'System' },
+    appearance: {
+        label: 'Appearance', mode: 'Mode', accent: 'Colour', sidebar: 'Sidebar', lightOnly: 'in light mode',
+        custom: 'Any colour', dev: 'Dev mode', reset: 'Reset',
+        accents: { slate: 'Slate', blue: 'Blue', indigo: 'Indigo', violet: 'Violet', teal: 'Teal', emerald: 'Emerald', rose: 'Rose' },
+        sidebars: { default: 'Default', neutral: 'Neutral', soft: 'Soft', tint: 'Tint', accent: 'Accent', dark: 'Dark', deep: 'Deep' },
+    },
     sortableList: {
         handle: 'Drag to reorder',
         instructions: 'Press Space to pick this up. While dragging, use the arrow keys to move it, Space to drop it, or Escape to cancel.',
@@ -115,6 +121,12 @@ export const fr = {
     chart: { label: 'Graphique', total: 'Total' },
     stat: { up: 'Hausse', down: 'Baisse', same: 'Stable' },
     themeToggle: { label: 'Thème', light: 'Clair', dark: 'Sombre', system: 'Système' },
+    appearance: {
+        label: 'Apparence', mode: 'Mode', accent: 'Couleur', sidebar: 'Barre latérale', lightOnly: 'en mode clair',
+        custom: 'Couleur libre', dev: 'Mode dev', reset: 'Réinitialiser',
+        accents: { slate: 'Ardoise', blue: 'Bleu', indigo: 'Indigo', violet: 'Violet', teal: 'Teal', emerald: 'Émeraude', rose: 'Rose' },
+        sidebars: { default: 'Par défaut', neutral: 'Neutre', soft: 'Doux', tint: 'Teinte', accent: 'Accent', dark: 'Foncé', deep: 'Très foncé' },
+    },
     sortableList: {
         handle: 'Glisser pour réordonner',
         instructions: 'Appuyez sur Espace pour saisir cet élément. Déplacez-le ensuite avec les flèches, déposez-le avec Espace, ou appuyez sur Échap pour annuler.',

package/dist/hover-card/hover-card.css

@@ -1,5 +1,7 @@
 @layer ui {
-  /* Zag copies the content's z-index onto its positioner. */
+  /* The positioner carries the z-index itself. Zag sets it inline as
+     var(--z-index) but doesn't always fill in the variable, so set both. */
+  [data-scope=hover-card][data-part=positioner] { z-index: 50; --z-index: 50; }
   [data-scope=hover-card][data-part=content] {
     z-index: 50; font-weight: 400; width: 18rem; max-width: calc(100vw - 32px); padding: 1rem; box-sizing: border-box; outline: none;
     background: var(--ui-surface); color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;

package/dist/icons.d.ts

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

package/dist/icons.js

@@ -0,0 +1,7 @@
+// Loads iconify-icon (the <iconify-icon> element) for the components that
+// draw icons. Icons draw inside its shadow root, out of reach of page CSS,
+// but custom properties inherit into it: this rule there gives Lucide-style
+// icons (a stroke width of 2 in their markup) the --ui-icon-stroke weight.
+// Icons with any other stroke, or none, are left alone.
+import { appendCustomStyle } from 'iconify-icon';
+appendCustomStyle('[stroke-width="2"] { stroke-width: var(--ui-icon-stroke, 2); }');

package/dist/index.d.ts

@@ -26,6 +26,8 @@ export { RadioGroup } from './radio-group/RadioGroup.js';
 export { Segmented } from './segment-group/Segmented.js';
 export { ThemeToggle } from './theme-toggle/ThemeToggle.js';
 export { colorScheme, useColorScheme, type Scheme } from './color-scheme.js';
+export { Appearance } from './appearance-panel/Appearance.js';
+export { appearance, useAppearance, accents, accentScale, accentSteps, sidebarStyles, type AccentName, type AppearanceValue, type SidebarStyle, } from './appearance.js';
 export { Tooltip } from './tooltip/Tooltip.js';
 export { Menu, ContextMenu, MenuItem, MenuSeparator, MenuGroup, MenuCheckbox, MenuRadioGroup, MenuRadio, Submenu, type MenuEntry, type MenuOptionChange, } from './menu/Menu.js';
 export { Tabs, Tab } from './tabs/Tabs.js';

package/dist/index.js

@@ -27,6 +27,8 @@ export { RadioGroup } from './radio-group/RadioGroup.js';
 export { Segmented } from './segment-group/Segmented.js';
 export { ThemeToggle } from './theme-toggle/ThemeToggle.js';
 export { colorScheme, useColorScheme } from './color-scheme.js';
+export { Appearance } from './appearance-panel/Appearance.js';
+export { appearance, useAppearance, accents, accentScale, accentSteps, sidebarStyles, } from './appearance.js';
 export { Tooltip } from './tooltip/Tooltip.js';
 export { Menu, ContextMenu, MenuItem, MenuSeparator, MenuGroup, MenuCheckbox, MenuRadioGroup, MenuRadio, Submenu, } from './menu/Menu.js';
 export { Tabs, Tab } from './tabs/Tabs.js';

package/dist/input/Input.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentProps, HTMLInputTypeAttribute, ReactNode } from 'react';
 import { Field } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { type Classes } from '../utils.js';
 import '../theme.css';
 import './input.css';

package/dist/input/Input.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useId } from 'react';
 import { Field, useFieldContext } from '@ark-ui/react/field';
-import 'iconify-icon';
+import '../icons.js';
 import { cx, partOf, partsOf, withParts } from '../utils.js';
 import '../theme.css';
 import './input.css';