@milktop/react-ui 0.0.0-stage → 0.1.2

package/dist/event-calendar/EventCalendar.js

@@ -0,0 +1,686 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * A calendar of events by the hour: a day, a few days or a week across,
+ * hours down, and optionally a column per resource (a vet, a tutor, a room)
+ * within each day. Events sit by their times, side by side where they
+ * overlap; all-day and multi-day events sit in a strip along the top.
+ *
+ *   <EventCalendar events={lessons} onSelect={book} onEventClick={open} onEventChange={update} />
+ *   <EventCalendar view="day" resources={vets} slotMinutes={15} events={appointments} … />
+ *
+ * Times are local ISO strings ('2025-10-09T16:00'), as DatePicker's dates are;
+ * an all-day event has dates only ('2025-10-09', its `end` the last day).
+ *
+ * Events and resources
+ * - `events`: `{ id, title, start, end, allDay, resourceId, description,
+ *   color, editable, blocked, pending }`; `color` is 'accent' (default),
+ *   'success', 'warning', 'danger', 'neutral' or any CSS colour;
+ *   `editable: false` fixes one; `blocked` draws it hatched (time taken out,
+ *   not an appointment); `pending` faded and fixed (saving)
+ * - `resources`: `{ id, title, color, hours, offLabel }` (and anything for
+ *   `renderResource`): a column each, per day; events go in their
+ *   `resourceId`'s column. Change the list to add or remove one (a vet
+ *   present that day). `color` ('accent', 'success', 'warning', 'danger',
+ *   'neutral' or any CSS colour) tints its header, its hover, selections and
+ *   drops, and is its events' colour unless they set their own. `hours`:
+ *   when it's available on each day shown, as `[{ start: '08:00', end: '13:00' }]`
+ *   (a morning; two for a lunch break; `[]` for not at all): the rest is
+ *   shaded and refused, with `offLabel` as the reason
+ *
+ * What's shown
+ * - `view`, `defaultView`: 'day', 'week' (default), 'workweek', or a number
+ *   of days from `date`; `onViewChange`. `views`: the toolbar's choices
+ *   (['day', 'week']; [] for none). On a narrow screen it shows a day
+ * - `date`, `defaultDate`: a day in the range shown (today's by default);
+ *   `onDateChange`, from the toolbar (its title opens a calendar)
+ * - `weekStartsOn`: 1 (Monday, default) or 0; `startHour`, `endHour` (7, 21);
+ *   `slotMinutes`: what selecting, moving and resizing snap to (30);
+ *   `hourHeight`: a CSS length ('3rem')
+ * - `height`: a CSS length: the hours scroll inside it under the headers;
+ *   `scrollToTime`: where it opens scrolled to ('08:00', or 'now'), once
+ * - `rows`: extra rows above the all-day strip, a cell per day (or per
+ *   column with `perColumn`), e.g. the day's messages:
+ *   `[{ key, label, render: (date, resource) => …, onClick: (date, resource) => … }]`
+ * - `allDayMax`: all-day lanes shown before a "+2 more" (3)
+ *
+ * Changing things
+ * - `onSelect({ start, end, resourceId, allDay }, keys)`: an empty slot was
+ *   clicked or a time dragged out, or (`allDay`) days in the all-day strip,
+ *   e.g. to book it. `keys` says which of Shift, Alt, Ctrl and ⌘ were held
+ *   (say, Shift to block time instead of booking it)
+ * - `onEventClick(event)`: an event was clicked (not dragged), e.g. to open it
+ * - `onDayClick(date)`: a day's header was clicked (an ISO date), e.g. to show
+ *   that day; `onResourceClick(resource, date)`: a resource's header
+ * - `onRangeChange({ start, end, view })`: the days shown, as ISO dates (the
+ *   last one included), when it first shows and whenever they change: load
+ *   that range's events from your server
+ * - `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
+ *   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)
+ * - `isAvailable({ start, end, resourceId, allDay, event })`: true, or false
+ *   or the reason it isn't ('Dr Patel is away'): unavailable time is shaded
+ *   (the reason on hover) and selecting, moving or resizing into it is
+ *   refused, calling `onUnavailable(reason, attempt)` (to show a toast).
+ *   `event` is the one being moved, so it doesn't clash with itself;
+ *   `shading` is true when it's only asking what to shade (so clashes with
+ *   other events, which show anyway, can be left to bookings and drops)
+ * - `pinned`: an event being placed (it can be from another week): while
+ *   set, a click on a time moves it there (through `onEventChange`, keeping
+ *   its length); Escape or the bar's Cancel call `onPinnedChange(null)`.
+ *   Clear it once you've moved it
+ *
+ * - `eventMenu(event)`, `slotMenu(slot)`: items for a menu on right-click
+ *   (or the Menu key, or Shift+F10, on a focused event): of an event, or of
+ *   an empty time or all-day day (`slot` is `{ start, end, resourceId, allDay }`).
+ *   Items are `{ label, icon, shortcut, danger, disabled, onSelect }`, or
+ *   `{ separator: true }`, or `{ group: 'Heading' }`; return nothing for no menu
+ *
+ * Drawing and words
+ * - `renderEvent(event, { start, end, resource, compact })`, `renderResource(resource)`,
+ *   `renderDayHeader(date)`: draw those yourself
+ * - `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);
+ *   `locale`: for the dates and times (the LocaleProvider's by default)
+ * - `actions`: in the toolbar; `toolbar`: false hides it
+ */
+import { Fragment, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import 'iconify-icon';
+import { Button } from '../button/Button.js';
+import { Popover } from '../popover/Popover.js';
+import { DatePicker } from '../date-picker/DatePicker.js';
+import { Segmented } from '../segment-group/Segmented.js';
+import { Menu } from '../menu/Menu.js';
+import { useLocale, useMessages } from '../format/LocaleProvider.js';
+import { cx, partsOf, useControllable } from '../utils.js';
+import { addDays, addMinutes, minutesOfDay, parse, sameDay, startOfWeek, toISODate, toISODateTime } from './dates.js';
+import '../theme.css';
+import './event-calendar.css';
+const named = ['accent', 'success', 'warning', 'danger', 'neutral'];
+// A named colour as its token, or a CSS colour as it is.
+const cssColor = (color) => color === 'accent' ? 'var(--ui-accent)' : color === 'success' ? 'var(--ui-success)'
+    : color === 'warning' ? '#d97706' : color === 'danger' ? 'var(--ui-danger)' : color === 'neutral' ? 'var(--ui-muted)' : color;
+// The menu's hidden trigger (Zag marks it as its context trigger, so no part of ours).
+const menuAnchorStyle = { position: 'fixed', top: 0, left: 0, width: 0, height: 0, overflow: 'hidden', pointerEvents: 'none' };
+const isAllDay = (event) => event.allDay || !event.start.includes('T')
+    || event.start.slice(0, 10) !== event.end.slice(0, 10);
+const minutesBetween = (a, b) => Math.round((b.getTime() - a.getTime()) / 60000);
+// A day's events, side by side where they overlap: each takes the first
+// free column in its cluster of overlapping events.
+function place(events) {
+    const sorted = events.map((event) => ({ event, start: parse(event.start), end: parse(event.end) }))
+        .sort((a, b) => a.start.getTime() - b.start.getTime() || b.end.getTime() - a.end.getTime());
+    const placed = [];
+    let cluster = [];
+    let clusterEnd = 0;
+    const close = () => {
+        const columns = Math.max(1, ...cluster.map((p) => p.column + 1));
+        cluster.forEach((p) => { p.columns = columns; });
+        cluster = [];
+    };
+    for (const item of sorted) {
+        if (cluster.length && item.start.getTime() >= clusterEnd)
+            close();
+        const taken = cluster.filter((p) => p.end > item.start).map((p) => p.column);
+        let column = 0;
+        while (taken.includes(column))
+            column++;
+        const entry = { ...item, column, columns: 1 };
+        cluster.push(entry);
+        placed.push(entry);
+        clusterEnd = Math.max(clusterEnd, item.end.getTime());
+    }
+    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 }) {
+    const app = useLocale();
+    const locale = localeProp ?? app;
+    const part = partsOf('event-calendar', classes);
+    const messages = useMessages();
+    const t = { ...messages.calendar, ...translations };
+    const [today] = useState(() => toISODate(new Date()));
+    const [date, setDate] = useControllable(dateProp, defaultDate ?? today, onDateChange);
+    const [chosenView, setView] = useControllable(viewProp, defaultView, onViewChange);
+    // Narrow (a phone): a day at a time.
+    const root = useRef(null);
+    const [narrow, setNarrow] = useState(false);
+    useEffect(() => {
+        const el = root.current;
+        if (!el)
+            return;
+        const observer = new ResizeObserver(() => setNarrow(el.clientWidth < 640));
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, []);
+    const view = narrow ? 'day' : chosenView;
+    const viewLabel = (v) => v === 'day' ? t.day : v === 'week' ? t.week : v === 'workweek' ? t.workweek : t.days(v);
+    // The days shown, and how far the arrows go.
+    const current = parse(date);
+    const first = view === 'week' ? startOfWeek(current, weekStartsOn) : view === 'workweek' ? startOfWeek(current, 1) : current;
+    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];
+    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;
+    // The days shown, reported when they change (to load their events).
+    const rangeStart = toISODate(dates[0]);
+    const rangeEnd = toISODate(dates[dates.length - 1]);
+    const reportRange = useRef(onRangeChange);
+    useEffect(() => { reportRange.current = onRangeChange; });
+    useEffect(() => { reportRange.current?.({ start: rangeStart, end: rangeEnd, view }); }, [rangeStart, rangeEnd, view]);
+    // The time now, for the line across today; moved on each minute.
+    const [now, setNow] = useState(() => new Date());
+    useEffect(() => {
+        const timer = setInterval(() => setNow(new Date()), 60000);
+        return () => clearInterval(timer);
+    }, []);
+    const dayFormat = new Intl.DateTimeFormat(locale, { weekday: 'short' });
+    const longDay = new Intl.DateTimeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long' });
+    const hourFormat = new Intl.DateTimeFormat(locale, { hour: 'numeric' });
+    const timeFormat = new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' });
+    const title = count === 1
+        ? new Intl.DateTimeFormat(locale, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }).format(first)
+        : new Intl.DateTimeFormat(locale, { day: 'numeric', month: 'long', year: 'numeric' }).formatRange(first, dates[count - 1]);
+    const top = (minutes) => `${((minutes - startHour * 60) / span) * 100}%`;
+    const length = (minutes) => `${(minutes / span) * 100}%`;
+    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 [picking, setPicking] = useState(false);
+    const [status, setStatus] = useState('');
+    const [allDayOpen, setAllDayOpen] = useState(false);
+    // ---- One menu, opened where it's wanted (right-click, or the keyboard).
+    // It opens through a hidden context-menu trigger: a contextmenu event sent to
+    // it at the point is how Zag places a menu there.
+    const [menu, setMenu] = useState({ entries: [], actions: [] });
+    const menuAnchor = useRef(null);
+    const menuPoint = useRef(null);
+    function openMenu(x, y, items) {
+        if (!items?.length)
+            return false;
+        const actions = [];
+        const entries = items.map((item) => item.separator ? { separator: true } : item.group ? { group: item.group } : {
+            label: item.label, icon: item.icon, shortcut: item.shortcut, danger: item.danger, disabled: item.disabled,
+            value: actions.push(item.onSelect ?? (() => { })) - 1,
+        });
+        setMenu({ entries, actions });
+        menuPoint.current = { x, y };
+        return true;
+    }
+    // Once the items have rendered, open it at the point.
+    useEffect(() => {
+        const point = menuPoint.current;
+        if (!point || !menuAnchor.current)
+            return;
+        menuPoint.current = null;
+        menuAnchor.current.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true, clientX: point.x, clientY: point.y }));
+    });
+    // ---- Availability: true, or the reason it isn't (false gives the default).
+    const resourceOf = (id) => (id === undefined ? undefined : resources?.find((r) => r.id === id));
+    const clock = (time) => Number(time.slice(0, 2)) * 60 + Number(time.slice(3, 5));
+    // Outside a resource's `hours` (timed only): its offLabel.
+    const hoursReason = (query) => {
+        const hours = resourceOf(query.resourceId)?.hours;
+        if (!hours || query.allDay)
+            return null;
+        const from = clock(query.start.slice(11));
+        const to = query.end.slice(0, 10) === query.start.slice(0, 10) ? clock(query.end.slice(11)) : 24 * 60;
+        const fits = hours.some((h) => from >= clock(h.start) && to <= clock(h.end));
+        return fits ? null : resourceOf(query.resourceId)?.offLabel ?? t.unavailable;
+    };
+    const reasonFor = (query) => {
+        const off = hoursReason(query);
+        if (off)
+            return off;
+        const answer = isAvailable?.(query) ?? true;
+        return answer === true ? null : answer === false ? t.unavailable : answer;
+    };
+    const timed = (column, from, to, event) => ({
+        start: toISODateTime(addMinutes(column.date, from)), end: toISODateTime(addMinutes(column.date, to)), allDay: false,
+        ...(column.resource && { resourceId: column.resource.id }), ...(event && { event }),
+    });
+    // A column's unavailable time, slot by slot, merged into runs with one reason.
+    const unavailableRuns = (column) => {
+        if (!isAvailable && !column.resource?.hours)
+            return [];
+        const runs = [];
+        for (let from = startHour * 60; from < endHour * 60; from += slotMinutes) {
+            const reason = reasonFor({ ...timed(column, from, from + slotMinutes), shading: true });
+            const last = runs[runs.length - 1];
+            if (!reason)
+                continue;
+            if (last && last.to === from && last.reason === reason)
+                last.to = from + slotMinutes;
+            else
+                runs.push({ from, to: from + slotMinutes, reason });
+        }
+        return runs;
+    };
+    // Worked out again only when what it depends on changes, not on every
+    // pointer move while dragging (keep `isAvailable` stable: useCallback).
+    const shadingKey = columns.map((c) => `${c.iso}:${c.resource?.id ?? ''}:${JSON.stringify(c.resource?.hours ?? null)}:${c.resource?.offLabel ?? ''}`).join('|');
+    const shading = useMemo(() => columns.map(unavailableRuns), [shadingKey, isAvailable, startHour, endHour, slotMinutes, t.unavailable]); // eslint-disable-line react-hooks/exhaustive-deps
+    const refuse = (reason, attempt) => {
+        setStatus(reason);
+        onUnavailable?.(reason, attempt);
+    };
+    // ---- Changing events: by pointer (previewed until it's dropped) or by keyboard.
+    const grid = useRef(null);
+    const gesture = useRef(null);
+    const [preview, setPreviewState] = useState(null);
+    // Also kept in a ref: a quick click ends before React renders the preview it set.
+    const latestPreview = useRef(null);
+    const setPreview = (next) => {
+        latestPreview.current = next;
+        setPreviewState(next);
+    };
+    const refocus = useRef(null);
+    const suppressClick = useRef(false);
+    // 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);
+        const end = parse(event.end);
+        const from = columnOf(event, event.start.slice(0, 10));
+        if (from < 0)
+            return null;
+        if (kind === 'resize') {
+            const newEnd = addMinutes(end, byMinutes);
+            if (minutesBetween(start, newEnd) < slotMinutes)
+                return null;
+            return { start, end: newEnd, column: columns[from] };
+        }
+        const column = columns[Math.max(0, Math.min(columns.length - 1, from + byColumns))];
+        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 }),
+    });
+    // Applies a change (after checking it's allowed).
+    function commit(event, kind, next) {
+        const query = queryFor(event, next);
+        const reason = reasonFor(query);
+        if (reason)
+            return refuse(reason, query);
+        refocus.current = event.id;
+        setStatus(kind === 'resize'
+            ? 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 }),
+        }, { kind });
+    }
+    function change(event, kind, byColumns, byMinutes) {
+        const next = target(event, kind, byColumns, byMinutes);
+        if (next)
+            commit(event, kind, next);
+    }
+    const keysOf = (e) => ({ shiftKey: e.shiftKey, altKey: e.altKey, ctrlKey: e.ctrlKey, metaKey: e.metaKey });
+    const minuteAt = (y, box) => startHour * 60 + snap(Math.max(0, Math.min(span - 1, ((y - box.top) / box.height) * span)));
+    function begin(e, kind, column, event) {
+        if (e.button !== 0)
+            return;
+        e.stopPropagation();
+        try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+        }
+        catch { /* not a live pointer */ }
+        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) };
+            setPreview({ kind: 'all-day', columns: [at] });
+            return;
+        }
+        const box = e.currentTarget.closest('[data-part=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 };
+        if (kind === 'select')
+            setPreview({ kind: 'select', column, from, to: from + slotMinutes });
+        if (kind === 'place')
+            setPreview({ kind: 'place', column, from });
+    }
+    // The columns from one to another (with resources, only the first one's resource).
+    const columnRange = (a, b) => {
+        const lo = Math.min(a, b);
+        const hi = Math.max(a, b);
+        return columns.map((_, i) => i).filter((i) => i >= lo && i <= hi && columns[i].resource === columns[a].resource);
+    };
+    function track(e) {
+        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)
+            return;
+        g.moved = true;
+        const perMinute = g.height / span;
+        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) });
+        }
+        else if (g.kind === 'select') {
+            const at = minuteAt(e.clientY, g);
+            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 });
+        }
+        else {
+            setPreview({ kind: 'resize', id: g.event.id, minutes: Math.round(dy / perMinute / slotMinutes) * slotMinutes });
+        }
+    }
+    function end() {
+        const g = gesture.current;
+        gesture.current = null;
+        const p = latestPreview.current;
+        setPreview(null);
+        if (!g)
+            return;
+        if (g.kind === 'select' && p?.kind === 'select') {
+            const column = columns[g.column];
+            const query = timed(column, p.from, p.to);
+            const reason = reasonFor(query);
+            if (reason)
+                return refuse(reason, query);
+            setStatus(t.selected(`${longDay.format(addMinutes(column.date, p.from))}, ${timeFormat.format(addMinutes(column.date, p.from))} – ${timeFormat.format(addMinutes(column.date, p.to))}${resourceName(column)}`));
+            onSelect?.({ start: query.start, end: query.end, allDay: false, ...(column.resource && { resourceId: column.resource.id }) }, g.keys);
+            return;
+        }
+        if (g.kind === 'all-day' && p?.kind === 'all-day') {
+            const firstColumn = columns[p.columns[0]];
+            const lastColumn = columns[p.columns[p.columns.length - 1]];
+            const query = { start: firstColumn.iso, end: lastColumn.iso, allDay: true, ...(firstColumn.resource && { resourceId: firstColumn.resource.id }) };
+            const reason = reasonFor(query);
+            if (reason)
+                return refuse(reason, query);
+            setStatus(t.selected(`${longDay.format(firstColumn.date)}${p.columns.length > 1 ? ` – ${longDay.format(lastColumn.date)}` : ''}, ${t.allDay.toLowerCase()}${resourceName(firstColumn)}`));
+            onSelect?.({ start: query.start, end: query.end, allDay: true, ...(firstColumn.resource && { resourceId: firstColumn.resource.id }) }, g.keys);
+            return;
+        }
+        if (g.kind === 'place' && p?.kind === 'place' && pinned) {
+            const duration = minutesBetween(parse(pinned.start), parse(pinned.end)) || slotMinutes;
+            const column = columns[p.column];
+            commit(pinned, 'move', { start: addMinutes(column.date, p.from), end: addMinutes(column.date, p.from + duration), column });
+            return;
+        }
+        if (!g.moved || !g.event)
+            return;
+        // The click that follows a drag isn't a click on the event.
+        suppressClick.current = true;
+        if (p?.kind === 'move' && (p.columns || p.minutes))
+            change(g.event, 'move', p.columns, p.minutes);
+        if (p?.kind === 'resize' && p.minutes)
+            change(g.event, 'resize', 0, p.minutes);
+    }
+    function cancel() {
+        gesture.current = null;
+        setPreview(null);
+    }
+    function keyDown(e, event) {
+        if (!editable(event))
+            return;
+        const keys = { ArrowUp: [0, -slotMinutes], ArrowDown: [0, slotMinutes], ArrowLeft: [-1, 0], ArrowRight: [1, 0] };
+        const move = keys[e.key];
+        if (!move)
+            return;
+        e.preventDefault();
+        if (e.shiftKey && move[0] === 0)
+            change(event, 'resize', 0, move[1]);
+        else
+            change(event, 'move', move[0], move[1]);
+    }
+    // The slot under the pointer: tinted (in its resource's colour) when it can
+    // be selected; when placing a pinned event, its preview. Escape stops placing.
+    const [hoverSlot, setHoverSlotState] = useState(null);
+    const setHoverSlot = (next) => {
+        if (next?.column !== hoverSlot?.column || next?.from !== hoverSlot?.from)
+            setHoverSlotState(next);
+    };
+    function hover(e, column) {
+        if (gesture.current)
+            return setHoverSlot(null);
+        const box = e.currentTarget.closest('[data-part=day]').getBoundingClientRect();
+        const from = minuteAt(e.clientY, box);
+        if (pinned)
+            return setPreview({ kind: 'place', column, 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);
+    }
+    useEffect(() => {
+        if (!pinned)
+            return;
+        const escape = (e) => { if (e.key === 'Escape')
+            onPinnedChange?.(null); };
+        addEventListener('keydown', escape);
+        return () => removeEventListener('keydown', escape);
+    }, [pinned, onPinnedChange]);
+    // A moved event lands in another column (a new element): focus it again.
+    useEffect(() => {
+        if (refocus.current == null)
+            return;
+        grid.current?.querySelector(`[data-event-id="${CSS.escape(String(refocus.current))}"]`)?.focus();
+        refocus.current = null;
+    });
+    // ---- Scrolling inside `height`: the header rows stick, each below the last.
+    useLayoutEffect(() => {
+        const el = grid.current;
+        if (!el || !height)
+            return;
+        let offset = 0;
+        const rowsSeen = new Set();
+        for (const cell of el.querySelectorAll('[data-sticky-row]')) {
+            const row = cell.dataset.stickyRow;
+            if (!rowsSeen.has(row)) {
+                rowsSeen.add(row);
+                el.style.setProperty(`--sticky-${row}`, `${offset}px`);
+                offset += cell.getBoundingClientRect().height;
+            }
+        }
+        el.style.setProperty('--sticky-total', `${offset}px`);
+    });
+    // Opens scrolled to `scrollToTime` ('now' when today's shown), once.
+    const scrolled = useRef(false);
+    useLayoutEffect(() => {
+        const el = grid.current;
+        if (!el || !height || !scrollToTime || scrolled.current)
+            return;
+        scrolled.current = true;
+        const day = el.querySelector('[data-part=day]');
+        if (!day)
+            return;
+        const [h, m] = scrollToTime === 'now' ? [now.getHours() - 1, 0] : scrollToTime.split(':').map(Number);
+        const minutes = Math.max(startHour * 60, Math.min(endHour * 60, h * 60 + (m || 0)));
+        const sticky = parseFloat(el.style.getPropertyValue('--sticky-total')) || 0;
+        el.scrollTop = day.offsetTop + ((minutes - startHour * 60) / span) * day.offsetHeight - sticky;
+    });
+    // ---- All-day and multi-day events: bars across the columns they cover, in lanes.
+    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))
+            .filter((i) => i >= 0);
+        // Runs of neighbouring columns (with resources, a day's column for the event's resource).
+        const runs = [];
+        for (const i of covered) {
+            const run = runs[runs.length - 1];
+            if (run && run[run.length - 1] === i - 1)
+                run.push(i);
+            else
+                runs.push([i]);
+        }
+        return runs.map((run) => ({ event, first: run[0], length: run.length, lane: 0, continued: false }));
+    });
+    allDay.sort((a, b) => a.first - b.first || b.length - a.length);
+    const laneEnds = [];
+    for (const bar of allDay) {
+        let lane = laneEnds.findIndex((endAt) => endAt < bar.first);
+        if (lane < 0)
+            lane = laneEnds.length;
+        laneEnds[lane] = bar.first + bar.length - 1;
+        bar.lane = lane;
+    }
+    // Past `allDayMax` lanes, the rest fold into a "+2 more" per column (until opened).
+    const folding = laneEnds.length > allDayMax && !allDayOpen;
+    const shownLanes = folding ? allDayMax - 1 : laneEnds.length;
+    const shownBars = allDay.filter((bar) => bar.lane < shownLanes);
+    const hiddenCount = columns.map(() => 0);
+    if (folding) {
+        const taken = columns.map((_, i) => new Set(shownBars.filter((bar) => i >= bar.first && i < bar.first + bar.length).map((bar) => bar.lane)));
+        for (const bar of allDay.filter((b) => b.lane >= shownLanes)) {
+            let piece = null;
+            for (let i = bar.first; i < bar.first + bar.length; i++) {
+                const lane = Array.from({ length: shownLanes }, (_, l) => l).find((l) => !taken[i].has(l));
+                if (lane === undefined) {
+                    hiddenCount[i]++;
+                    piece = null;
+                    continue;
+                }
+                if (piece && piece.lane === lane && piece.first + piece.length === i)
+                    piece.length++;
+                // A piece after the bar's start continues it (drawn with a square left end).
+                else
+                    shownBars.push(piece = { ...bar, first: i, length: 1, lane, continued: i > bar.first });
+                taken[i].add(lane);
+            }
+        }
+    }
+    const hiddenIn = (i) => hiddenCount[i];
+    const barColor = (event) => event.color ?? resourceOf(event.resourceId)?.color ?? 'accent';
+    const twoRows = !!resources?.length && 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 extraRows = rows.map(() => rowNumber++);
+    const allDayRow = rowNumber;
+    // The preview's problem, if any, shown as it's dragged.
+    const previewReason = (() => {
+        if (!preview || !isAvailable)
+            return null;
+        if (preview.kind === 'select')
+            return reasonFor(timed(columns[preview.column], preview.from, preview.to));
+        if (preview.kind === 'place')
+            return pinned ? reasonFor(timed(columns[preview.column], preview.from, preview.from + pinnedMinutes, pinned)) : null;
+        if (preview.kind === 'all-day') {
+            const a = columns[preview.columns[0]];
+            const b = columns[preview.columns[preview.columns.length - 1]];
+            return reasonFor({ start: a.iso, end: b.iso, allDay: true, ...(a.resource && { resourceId: a.resource.id }) });
+        }
+        const event = events.find((e) => e.id === preview.id);
+        const next = event && (preview.kind === 'move' ? target(event, 'move', preview.columns, preview.minutes) : target(event, 'resize', 0, preview.minutes));
+        return next && event ? reasonFor(queryFor(event, next)) : null;
+    })();
+    return (_jsxs("div", { ...rest, ...part('root'), ref: root, className: cx(className, classes?.root), "data-placing": pinned ? '' : undefined, style: { ...style, '--columns': columns.length, '--hour-height': hourHeight }, children: [toolbar && (_jsxs("div", { ...part('toolbar'), children: [_jsxs("div", { ...part('nav'), children: [_jsx(Button, { size: "sm", onClick: () => setDate(today), children: t.today }), _jsx(Button, { size: "sm", variant: "ghost", icon: "lucide:chevron-left", "aria-label": t.previous, onClick: () => setDate(toISODate(addDays(current, -step))) }), _jsx(Button, { size: "sm", variant: "ghost", icon: "lucide:chevron-right", "aria-label": t.next, onClick: () => setDate(toISODate(addDays(current, step))) })] }), _jsx(Popover, { placement: "bottom-start", open: picking, onOpenChange: setPicking, trigger: _jsxs("button", { type: "button", ...part('title'), "aria-label": `${title}: ${t.pickDate}`, children: [title, _jsx("iconify-icon", { icon: "lucide:chevron-down", "aria-hidden": "true" })] }), children: _jsx(DatePicker, { inline: true, value: date, locale: locale, onValueChange: (value) => { if (value) {
+                                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() })] });
+                            return onDayClick
+                                ? _jsx("button", { type: "button", ...part('header-button'), onClick: () => onDayClick(toISODate(d)), "aria-label": longDay.format(d), children: content })
+                                : content;
+                        })() }, toISODate(d)))), resourceRow >= 0 && columns.map((c) => (_jsx("div", { ...part('resource-header'), role: "columnheader", "data-colored": c.resource.color ? '' : undefined, "data-sticky-row": resourceRow, style: { top: `var(--sticky-${resourceRow})`, ...(c.resource.color && { '--resource-color': cssColor(c.resource.color) }) }, children: onResourceClick
+                            ? _jsx("button", { type: "button", ...part('header-button'), onClick: () => onResourceClick(c.resource, c.iso), children: renderResource ? renderResource(c.resource) : c.resource.title })
+                            : renderResource ? renderResource(c.resource) : c.resource.title }, `${c.iso}-${c.resource.id}`))), rows.map((row, r) => _jsxs(Fragment, { children: [_jsx("div", { ...part('row-label'), "data-sticky-row": extraRows[r], style: { top: `var(--sticky-${extraRows[r]})` }, children: row.label }), (row.perColumn ? columns : dates.map((d) => ({ date: d, iso: toISODate(d), resource: null }))).map((cell) => {
+                                const content = row.render?.(cell.date, cell.resource);
+                                const key = `${cell.iso}-${cell.resource?.id ?? ''}`;
+                                const cellStyle = { gridColumn: row.perColumn ? undefined : `span ${lanes.length}`, top: `var(--sticky-${extraRows[r]})` };
+                                return row.onClick
+                                    // The whole cell adds (say, a message); what's in it opens its own (stopPropagation in your render).
+                                    ? _jsx("div", { ...part('row-cell'), style: cellStyle, "data-sticky-row": extraRows[r], "data-clickable": "", role: "button", tabIndex: 0, "aria-label": `${typeof row.label === 'string' ? row.label : ''} ${longDay.format(cell.date)}`, onClick: () => row.onClick(cell.date, cell.resource), onKeyDown: (e) => { if (e.key === 'Enter' || e.key === ' ') {
+                                            e.preventDefault();
+                                            row.onClick(cell.date, cell.resource);
+                                        } }, children: content }, key)
+                                    : _jsx("div", { ...part('row-cell'), style: cellStyle, "data-sticky-row": extraRows[r], children: content }, key);
+                            })] }, row.key)), (allDay.length > 0 || onSelect) && _jsxs(_Fragment, { children: [_jsx("div", { ...part('all-day-label'), "data-sticky-row": allDayRow, style: { top: `var(--sticky-${allDayRow})` }, children: laneEnds.length > allDayMax
+                                    ? _jsxs("button", { type: "button", onClick: () => setAllDayOpen(!allDayOpen), "aria-expanded": allDayOpen, children: [t.allDay, _jsx("iconify-icon", { icon: allDayOpen ? 'lucide:chevron-up' : 'lucide:chevron-down', "aria-hidden": "true" })] })
+                                    : t.allDay }), _jsxs("div", { ...part('all-day'), "data-sticky-row": allDayRow, style: { '--lanes': Math.max(1, shownLanes + (folding ? 1 : 0)), top: `var(--sticky-${allDayRow})` }, "data-selectable": onSelect ? '' : undefined, onPointerDown: (e) => { if (onSelect && e.target === e.currentTarget)
+                                    begin(e, 'all-day', 0); }, onPointerMove: track, onPointerUp: end, onPointerCancel: cancel, onContextMenu: (e) => {
+                                    if (e.target !== e.currentTarget)
+                                        return;
+                                    const box = e.currentTarget.getBoundingClientRect();
+                                    const column = columns[Math.max(0, Math.min(columns.length - 1, Math.floor((e.clientX - box.left) / (box.width / columns.length))))];
+                                    const slot = { start: column.iso, end: column.iso, allDay: true, ...(column.resource && { resourceId: column.resource.id }) };
+                                    if (openMenu(e.clientX, e.clientY, slotMenu?.(slot)))
+                                        e.preventDefault();
+                                }, children: [preview?.kind === 'all-day' && preview.columns.map((i) => (_jsx("div", { ...part('selection'), "data-all-day": "", "data-invalid": previewReason ? '' : undefined, style: { left: `${(i / columns.length) * 100}%`, width: `${100 / columns.length}%` } }, i))), shownBars.map(({ event, first, length: covers, lane, continued }) => (_jsx("button", { type: "button", ...part('all-day-event'), "data-continued": continued || undefined, "data-color": named.includes(barColor(event)) ? barColor(event) : 'custom', "data-blocked": event.blocked || undefined, style: {
+                                            left: `${(first / columns.length) * 100}%`, width: `${(covers / columns.length) * 100}%`, top: `calc(${lane} * 1.625rem + 0.25rem)`,
+                                            ...(!named.includes(barColor(event)) && { '--event-color': barColor(event) }),
+                                        }, 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));
+                        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);
+                        // A press on the column (or its unavailable shading): select, or place the pinned event.
+                        const press = (e) => {
+                            if (pinned)
+                                begin(e, 'place', index);
+                            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)
+                                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.
+                                if (e.target !== e.currentTarget && e.target.dataset.part !== 'unavailable')
+                                    return;
+                                const from = minuteAt(e.clientY, e.currentTarget.getBoundingClientRect());
+                                const { event: _none, ...slot } = timed(column, from, from + slotMinutes);
+                                if (openMenu(e.clientX, e.clientY, slotMenu?.(slot)))
+                                    e.preventDefault();
+                            }, children: [shading[index].map((run) => (_jsx("div", { ...part('unavailable'), title: run.reason, style: { top: top(run.from), height: length(run.to - run.from) }, onPointerDown: press }, run.from))), place(own).map(({ event, start, end: finish, column: sub, columns: subs }) => {
+                                    const moving = preview?.kind === 'move' && preview.id === event.id ? preview : null;
+                                    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 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: {
+                                                    ...box, height: length(Math.max(slotMinutes, minutes)),
+                                                    ...(!named.includes(color) && { '--event-color': color }),
+                                                    ...(moving && { transform: `translate(${moving.x}px, ${moving.y}px)` }),
+                                                }, onPointerDown: (e) => { if (editable(event) && !pinned)
+                                                    begin(e, 'move', index, event);
+                                                else
+                                                    e.stopPropagation(); }, onPointerMove: track, onPointerUp: end, onPointerCancel: cancel, onKeyDown: (e) => {
+                                                    if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) {
+                                                        const box = e.currentTarget.getBoundingClientRect();
+                                                        if (openMenu(box.left + 8, box.bottom, eventMenu?.(event)))
+                                                            e.preventDefault();
+                                                    }
+                                                    else
+                                                        keyDown(e, event);
+                                                }, onContextMenu: (e) => { if (openMenu(e.clientX, e.clientY, eventMenu?.(event)))
+                                                    e.preventDefault(); }, onClick: () => { if (suppressClick.current)
+                                                    suppressClick.current = false;
+                                                else
+                                                    onEventClick?.(event); }, children: [renderEvent ? renderEvent(event, { start, end: shownEnd, resource: column.resource, compact: minutes <= 30 }) : _jsxs(_Fragment, { children: [_jsx("span", { ...part('event-title'), children: event.title }), _jsx("span", { ...part('event-time'), children: time })] }), editable(event) && !pinned && (_jsx("span", { ...part('resize'), "aria-hidden": "true", onPointerDown: (e) => begin(e, 'resize', index, event), onPointerMove: track, onPointerUp: end, onPointerCancel: cancel }))] })] }, event.id));
+                                }), hoverSlot?.column === index && !preview && (() => {
+                                    const off = shading[index].find((run) => hoverSlot.from >= run.from && hoverSlot.from < run.to);
+                                    return _jsx("div", { ...part('hover'), "data-invalid": off ? '' : undefined, "aria-hidden": "true", style: { top: top(hoverSlot.from), height: length(slotMinutes) } });
+                                })(), selecting && (_jsx("div", { ...part('selection'), "data-invalid": previewReason ? '' : undefined, style: { top: top(selecting.from), height: length(selecting.to - selecting.from) }, children: previewReason ?? `${timeFormat.format(addMinutes(column.date, selecting.from))} – ${timeFormat.format(addMinutes(column.date, selecting.to))}` })), placing && pinned && (_jsx("div", { ...part('selection'), "data-placing": "", "data-invalid": previewReason ? '' : undefined, style: { top: top(placing.from), height: length(pinnedMinutes) }, children: previewReason ?? `${nameOf(pinned)}, ${timeFormat.format(addMinutes(column.date, placing.from))}` })), isToday && minutesOfDay(now) >= startHour * 60 && minutesOfDay(now) < endHour * 60 && (_jsx("div", { ...part('now'), style: { top: top(minutesOfDay(now)) }, "aria-hidden": "true" }))] }, `${column.iso}-${column.resource?.id ?? ''}`));
+                    })] }), _jsx(Menu, { context: true, trigger: _jsx("span", { ref: menuAnchor, "aria-hidden": "true", style: menuAnchorStyle }), items: menu.entries, onSelect: (value) => menu.actions[value]?.() }), _jsx("div", { ...part('status'), "aria-live": "polite", role: "status", children: status })] }));
+}