@spatika/react 1.1.0 → 1.3.0

package/dist/composites/EventCalendar.js

@@ -0,0 +1,371 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState, } from "react";
+import { cn } from "../lib/cn";
+import { expandVisibleEvents } from "../lib/rrule";
+import { useControllableState } from "../lib/use-controllable-state";
+import { addDays, addMonths, agendaDays, DEFAULT_SCHEDULER_PREFERENCES, eventCanDrag, eventCanResize, eventColorStyle, filterWeekendDays, formatDateSpan, formatDayHeading, formatHour, formatMonthYear, formatTime, formatWeekRange, getMonthGrid, getWeekDays, hoursInView, isMonthBar, isSameDay, isSameMonth, isoDay, layoutTimedEvents, normalizeEvents, occupiesDay, occurrenceKey, resizeEvent, shiftByDays, startOfDay, timedEventsOnDay, toDate, visibleEvents, weekNumber, weekSpanLanesForDays, } from "../lib/scheduler";
+import { EventEditor } from "./EventEditor";
+import { CALENDAR_VIEW_LABEL, EventResizeHandle, ResourceLegend, SchedulerPreferencesMenu, SchedulerShell, SchedulerToolbar, } from "./scheduler-ui";
+import { DropdownMenuItem } from "../primitives/DropdownMenu";
+const MAX_TIMED_IN_CELL = 3;
+const AGENDA_LENGTH = 14;
+function chunkWeeks(items) {
+    const weeks = [];
+    for (let i = 0; i < items.length; i += 7)
+        weeks.push(items.slice(i, i + 7));
+    return weeks;
+}
+function sourceEvent(events, id) {
+    return events.find((event) => event.id === id);
+}
+function startOfToday() {
+    const now = new Date();
+    return new Date(now.getFullYear(), now.getMonth(), now.getDate());
+}
+function visibleRange(view, date, weekStartsOn) {
+    if (view === "month") {
+        const grid = getMonthGrid(date, weekStartsOn);
+        return { start: grid[0], end: addDays(grid[grid.length - 1], 1) };
+    }
+    if (view === "week") {
+        const days = getWeekDays(date, weekStartsOn);
+        return { start: days[0], end: addDays(days[6], 1) };
+    }
+    if (view === "agenda") {
+        const days = agendaDays(date, AGENDA_LENGTH);
+        return { start: days[0], end: addDays(days[days.length - 1], 1) };
+    }
+    const start = startOfDay(date);
+    return { start, end: addDays(start, 1) };
+}
+function draftFromSource(source) {
+    return {
+        id: source.id,
+        title: source.title,
+        start: toDate(source.start),
+        end: toDate(source.end),
+        allDay: source.allDay,
+        resourceId: source.resourceId,
+        color: source.color,
+        description: source.description,
+        rrule: source.rrule,
+    };
+}
+/** Month / week / day / agenda calendar with editor, resize, recurrence, and preferences. */
+export function EventCalendar({ events = [], resources = [], view: viewProp, defaultView = "month", onViewChange, date: dateProp, defaultDate, onDateChange, views = ["month", "week", "day", "agenda"], weekStartsOn = 0, hourStart = 7, hourEnd = 21, locale, readOnly = false, areEventsDraggable, areEventsResizable, preferences, defaultPreferences, onPreferencesChange, onEventClick, onEventChange, onEventCreate, onEventDelete, onSlotClick, showEventEditor = true, showPreferences = true, toolbarTrailing, renderEvent, renderToolbar, className, }) {
+    const [view, setView] = useControllableState({
+        prop: viewProp,
+        defaultProp: defaultView,
+        onChange: onViewChange,
+    });
+    const [date, setDate] = useControllableState({
+        prop: dateProp,
+        defaultProp: defaultDate ?? new Date(),
+        onChange: onDateChange,
+    });
+    const [prefs, setPrefs] = useControllableState({
+        prop: preferences
+            ? { ...DEFAULT_SCHEDULER_PREFERENCES, weekStartsOn, ...defaultPreferences, ...preferences }
+            : undefined,
+        defaultProp: { ...DEFAULT_SCHEDULER_PREFERENCES, weekStartsOn, ...defaultPreferences },
+        onChange: onPreferencesChange,
+    });
+    const [hiddenIds, setHiddenIds] = useState(new Set());
+    const [draft, setDraft] = useState(null);
+    const dragRef = useRef(null);
+    const resolvedView = view ?? "month";
+    const resolvedDate = date ?? new Date();
+    const resolvedPrefs = prefs ?? { ...DEFAULT_SCHEDULER_PREFERENCES, weekStartsOn };
+    const startOn = resolvedPrefs.weekStartsOn;
+    const today = startOfToday();
+    const hour12 = resolvedPrefs.ampm;
+    const canDrag = !readOnly && (areEventsDraggable ?? Boolean(onEventChange));
+    const canResize = !readOnly && (areEventsResizable ?? Boolean(onEventChange));
+    const editorLocked = readOnly || Boolean(draft?.id && sourceEvent(events, draft.id)?.readOnly);
+    const range = useMemo(() => visibleRange(resolvedView, resolvedDate, startOn), [resolvedView, resolvedDate, startOn]);
+    const normalized = useMemo(() => {
+        const visible = visibleEvents(normalizeEvents(events, resources), hiddenIds);
+        return expandVisibleEvents(visible, range.start, range.end, events);
+    }, [events, resources, hiddenIds, range.start, range.end]);
+    const title = resolvedView === "month"
+        ? formatMonthYear(resolvedDate, locale)
+        : resolvedView === "week"
+            ? formatWeekRange(resolvedDate, startOn, locale)
+            : resolvedView === "agenda"
+                ? formatDateSpan(range.start, addDays(range.end, -1), locale)
+                : formatDayHeading(resolvedDate, locale);
+    function go(direction) {
+        if (resolvedView === "month")
+            setDate(addMonths(resolvedDate, direction));
+        else if (resolvedView === "week")
+            setDate(addDays(resolvedDate, direction * 7));
+        else if (resolvedView === "agenda")
+            setDate(addDays(resolvedDate, direction * 7));
+        else
+            setDate(addDays(resolvedDate, direction));
+    }
+    function toggleResource(id) {
+        setHiddenIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    }
+    function openEvent(event) {
+        const source = sourceEvent(events, event.id);
+        if (source)
+            onEventClick?.(source);
+        if (!showEventEditor)
+            return;
+        setDraft(source ? draftFromSource(source) : {
+            id: event.id,
+            title: event.title,
+            start: event.start,
+            end: event.end,
+            allDay: event.allDay,
+            resourceId: event.resourceId,
+            color: event.color,
+            description: event.description,
+            rrule: event.rrule,
+        });
+    }
+    function openSlot(slot) {
+        onSlotClick?.(slot);
+        if (readOnly || !showEventEditor)
+            return;
+        setDraft({ start: slot.start, end: slot.end, allDay: slot.allDay });
+    }
+    function handleEventPointerDown(event, pointer) {
+        if (!onEventChange || !eventCanDrag(event, { readOnly, enabled: canDrag }))
+            return;
+        pointer.currentTarget.setPointerCapture?.(pointer.pointerId);
+        dragRef.current = { id: event.id, x: pointer.clientX, y: pointer.clientY, active: false };
+    }
+    function handleEventPointerMove(pointer) {
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        if (Math.hypot(pointer.clientX - drag.x, pointer.clientY - drag.y) > 6) {
+            drag.active = true;
+        }
+    }
+    function handleEventPointerUp(event, pointer) {
+        const drag = dragRef.current;
+        dragRef.current = null;
+        if (!drag?.active || !onEventChange)
+            return;
+        const target = document
+            .elementFromPoint(pointer.clientX, pointer.clientY)
+            ?.closest("[data-scheduler-day]");
+        const iso = target?.dataset.schedulerDay;
+        if (!iso)
+            return;
+        const [year, month, day] = iso.split("-").map(Number);
+        const targetDay = new Date(year, month - 1, day);
+        const currentDay = startOfDay(event.start);
+        const delta = Math.round((targetDay.getTime() - currentDay.getTime()) / 86_400_000);
+        if (delta === 0)
+            return;
+        const source = sourceEvent(events, event.id);
+        if (!source)
+            return;
+        const master = normalizeEvents([source], resources)[0];
+        onEventChange(source, shiftByDays(master, delta));
+    }
+    function commitResize(event, edge, instant) {
+        if (!onEventChange)
+            return;
+        const next = resizeEvent(event, edge, instant);
+        const source = sourceEvent(events, event.id);
+        if (!source)
+            return;
+        const master = normalizeEvents([source], resources)[0];
+        onEventChange(source, {
+            start: new Date(master.start.getTime() + (next.start.getTime() - event.start.getTime())),
+            end: new Date(master.end.getTime() + (next.end.getTime() - event.end.getTime())),
+        });
+    }
+    function handleKeyDown(keyboard) {
+        if (draft)
+            return;
+        const target = keyboard.target;
+        if (target.closest("input, textarea, select, [contenteditable='true']"))
+            return;
+        if (keyboard.key === "ArrowLeft") {
+            keyboard.preventDefault();
+            go(-1);
+        }
+        else if (keyboard.key === "ArrowRight") {
+            keyboard.preventDefault();
+            go(1);
+        }
+        else if (keyboard.key === "t" || keyboard.key === "T") {
+            keyboard.preventDefault();
+            setDate(new Date());
+        }
+    }
+    function renderEventTrigger(event, className, defaultChildren, options) {
+        const source = sourceEvent(events, event.id);
+        const variant = options?.variant ?? "month-timed";
+        const children = renderEvent
+            ? renderEvent(event, {
+                view: resolvedView,
+                variant,
+                locale,
+                hour12,
+                source,
+                defaultChildren,
+            })
+            : defaultChildren;
+        if (renderEvent && children == null)
+            return null;
+        const resizable = options?.resize === "ns" &&
+            eventCanResize(event, { readOnly, enabled: canResize }) &&
+            Boolean(onEventChange);
+        const painted = variant === "month-bar" || variant === "all-day" || variant === "time-grid";
+        const button = (_jsx("button", { type: "button", draggable: false, className: className, style: variant === "agenda"
+                ? eventColorStyle(event.color, "wash")
+                : painted
+                    ? eventColorStyle(event.color, resolvedView === "month" ? "bar" : "block")
+                    : undefined, onClick: () => {
+                if (dragRef.current?.active)
+                    return;
+                openEvent(event);
+            }, onPointerDown: (pointer) => handleEventPointerDown(event, pointer), onPointerMove: handleEventPointerMove, onPointerUp: (pointer) => handleEventPointerUp(event, pointer), children: children }));
+        if (!resizable)
+            return button;
+        return (_jsxs("div", { className: "relative h-full min-h-0", children: [button, _jsx(EventResizeHandle, { edge: "start", axis: "ns", event: event, hourStart: hourStart, hourEnd: hourEnd, onCommit: commitResize }), _jsx(EventResizeHandle, { edge: "end", axis: "ns", event: event, hourStart: hourStart, hourEnd: hourEnd, onCommit: commitResize })] }));
+    }
+    return (_jsxs(SchedulerShell, { slot: "event-calendar", className: className, tabIndex: 0, "aria-label": "Event calendar", onKeyDown: handleKeyDown, children: [renderToolbar ? (renderToolbar({
+                view: resolvedView,
+                date: resolvedDate,
+                title,
+                views,
+                locale,
+                preferences: resolvedPrefs,
+                onViewChange: (next) => setView(next),
+                onPrev: () => go(-1),
+                onNext: () => go(1),
+                onToday: () => setDate(new Date()),
+                onDateChange: (next) => setDate(next),
+                onPreferencesChange: (next) => setPrefs(next),
+            })) : (_jsx(SchedulerToolbar, { title: title, onPrev: () => go(-1), onNext: () => go(1), onToday: () => setDate(new Date()), menuLabel: CALENDAR_VIEW_LABEL[resolvedView], menu: views.map((item) => (_jsx(DropdownMenuItem, { onClick: () => setView(item), children: CALENDAR_VIEW_LABEL[item] }, item))), trailing: _jsxs(_Fragment, { children: [toolbarTrailing, showPreferences ? (_jsx(SchedulerPreferencesMenu, { value: resolvedPrefs, onChange: (next) => setPrefs(next) })) : null] }) })), resolvedView === "month" ? (_jsx(MonthGrid, { date: resolvedDate, today: today, events: normalized, weekStartsOn: startOn, showWeekends: resolvedPrefs.showWeekends, showWeekNumber: resolvedPrefs.showWeekNumber, locale: locale, hour12: hour12, onSlotClick: openSlot, renderEventTrigger: renderEventTrigger })) : resolvedView === "agenda" ? (_jsx(AgendaList, { date: resolvedDate, events: normalized, showWeekends: resolvedPrefs.showWeekends, locale: locale, hour12: hour12, onSlotClick: openSlot, renderEventTrigger: renderEventTrigger })) : (_jsx(TimeGrid, { date: resolvedDate, today: today, events: normalized, view: resolvedView === "day" ? "day" : "week", weekStartsOn: startOn, showWeekends: resolvedPrefs.showWeekends, hourStart: hourStart, hourEnd: hourEnd, locale: locale, hour12: hour12, onSlotClick: openSlot, renderEventTrigger: renderEventTrigger })), _jsx(ResourceLegend, { resources: resources, hiddenIds: hiddenIds, onToggle: toggleResource }), showEventEditor ? (_jsx(EventEditor, { open: draft != null, onOpenChange: (open) => {
+                    if (!open)
+                        setDraft(null);
+                }, draft: draft, resources: resources, readOnly: editorLocked, onSave: (event) => {
+                    if (event.id && sourceEvent(events, event.id)) {
+                        const source = sourceEvent(events, event.id);
+                        onEventChange?.(source, event);
+                    }
+                    else {
+                        onEventCreate?.(event);
+                    }
+                }, onDelete: onEventDelete
+                    ? (id) => {
+                        const source = sourceEvent(events, id);
+                        if (source)
+                            onEventDelete(source);
+                    }
+                    : undefined })) : null] }));
+}
+function MonthGrid({ date, today, events, weekStartsOn, showWeekends, showWeekNumber, locale, hour12, onSlotClick, renderEventTrigger, }) {
+    const weeks = chunkWeeks(getMonthGrid(date, weekStartsOn));
+    const headerDays = filterWeekendDays(getWeekDays(date, weekStartsOn), showWeekends);
+    const columns = headerDays.length;
+    const gridStyle = { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+    return (_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex border-b border-border/50", children: [showWeekNumber ? _jsx("div", { className: "w-8 shrink-0" }) : null, _jsx("div", { className: "grid min-w-0 flex-1", style: gridStyle, children: headerDays.map((day) => (_jsx("div", { className: "px-2 py-2 text-center text-[11px] font-bold uppercase tracking-wider text-muted-foreground", children: new Intl.DateTimeFormat(locale, { weekday: "short" }).format(day) }, day.getDay()))) })] }), _jsx("div", { children: weeks.map((week) => {
+                    const days = filterWeekendDays(week, showWeekends);
+                    const lanes = weekSpanLanesForDays(days, events);
+                    return (_jsxs("div", { className: "flex border-b border-border/40 last:border-b-0", children: [showWeekNumber ? (_jsx("div", { className: "flex w-8 shrink-0 items-start justify-center pt-2 text-[10px] font-bold text-muted-foreground", children: weekNumber(week[0]) })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "grid", style: gridStyle, children: days.map((day) => {
+                                            const inMonth = isSameMonth(day, date);
+                                            const isToday = isSameDay(day, today);
+                                            return (_jsx("div", { "data-scheduler-day": isoDay(day), className: cn("flex items-start justify-end px-1.5 pt-1.5", !inMonth && "bg-muted/15"), children: _jsx("button", { type: "button", onClick: () => onSlotClick?.({
+                                                        start: day,
+                                                        end: addDays(day, 1),
+                                                        allDay: true,
+                                                    }), className: cn("flex size-7 items-center justify-center rounded-full text-xs font-bold", isToday && "bg-primary text-primary-foreground", !isToday && inMonth && "text-foreground hover:bg-muted/50", !isToday && !inMonth && "text-muted-foreground/70"), children: day.getDate() }) }, day.toISOString()));
+                                        }) }), lanes.map((lane, laneIndex) => (_jsx("div", { className: "grid gap-px px-0.5 pb-0.5", style: gridStyle, children: laneSlots(lane, columns).map((slot, slotIndex) => slot.kind === "empty" ? (_jsx("div", {}, slotIndex)) : (_jsx("div", { className: "min-w-0", style: { gridColumn: `span ${slot.span}` }, children: renderEventTrigger(slot.event, "flex h-5 w-full items-center truncate rounded-md px-1.5 text-[11px] font-semibold leading-none", slot.event.title, { variant: "month-bar" }) }, occurrenceKey(slot.event)))) }, laneIndex))), _jsx("div", { className: "grid min-h-[4.25rem]", style: gridStyle, children: days.map((day) => {
+                                            const timed = timedEventsOnDay(events, day);
+                                            const visibleTimed = timed.slice(0, MAX_TIMED_IN_CELL);
+                                            const extra = timed.length - visibleTimed.length;
+                                            return (_jsxs("div", { "data-scheduler-day": isoDay(day), className: cn("min-w-0 space-y-0.5 px-1 pb-2", !isSameMonth(day, date) && "bg-muted/15"), onClick: (click) => {
+                                                    if (click.target.closest("button"))
+                                                        return;
+                                                    onSlotClick?.({
+                                                        start: new Date(day.getFullYear(), day.getMonth(), day.getDate(), 9),
+                                                        end: new Date(day.getFullYear(), day.getMonth(), day.getDate(), 10),
+                                                        allDay: false,
+                                                    });
+                                                }, children: [visibleTimed.map((event) => (_jsx("div", { className: "min-w-0", children: renderEventTrigger(event, "flex w-full min-w-0 items-center gap-1 rounded-sm px-0.5 py-0.5 text-left text-[11px] leading-tight text-foreground hover:bg-muted/40", _jsxs(_Fragment, { children: [_jsx("span", { className: "size-1.5 shrink-0 rounded-full", style: eventColorStyle(event.color, "dot") }), _jsx("span", { className: "shrink-0 text-muted-foreground", children: formatTime(event.start, locale, hour12) }), _jsx("span", { className: "min-w-0 truncate font-medium", children: event.title })] }), { variant: "month-timed" }) }, occurrenceKey(event)))), extra > 0 ? (_jsxs("p", { className: "px-0.5 text-[10px] font-bold text-muted-foreground", children: ["+", extra, " more"] })) : null] }, day.toISOString()));
+                                        }) })] })] }, week[0].toISOString()));
+                }) })] }));
+}
+function laneSlots(lane, columns) {
+    const slots = [];
+    let cursor = 0;
+    const ordered = [...lane].sort((a, b) => a.startCol - b.startCol);
+    for (const segment of ordered) {
+        while (cursor < segment.startCol) {
+            slots.push({ kind: "empty", span: 1 });
+            cursor += 1;
+        }
+        slots.push({ kind: "event", event: segment.event, span: segment.span });
+        cursor += segment.span;
+    }
+    while (cursor < columns) {
+        slots.push({ kind: "empty", span: 1 });
+        cursor += 1;
+    }
+    return slots;
+}
+function TimeGrid({ date, today, events, view, weekStartsOn, showWeekends, hourStart, hourEnd, locale, hour12, onSlotClick, renderEventTrigger, }) {
+    const days = view === "day"
+        ? [date]
+        : filterWeekendDays(getWeekDays(date, weekStartsOn), showWeekends);
+    const hours = hoursInView(hourStart, hourEnd);
+    const hourHeight = 48;
+    const now = new Date();
+    const showNow = days.some((day) => isSameDay(day, now));
+    const nowTop = ((now.getHours() + now.getMinutes() / 60 - hourStart) / (hourEnd - hourStart)) * (hours.length * hourHeight);
+    return (_jsxs("div", { className: "overflow-x-auto", children: [_jsxs("div", { className: "grid min-w-[640px]", style: { gridTemplateColumns: `3.5rem repeat(${days.length}, minmax(0, 1fr))` }, children: [_jsx("div", { className: "border-b border-border/50" }), days.map((day) => (_jsxs("div", { className: cn("border-b border-l border-border/50 px-2 py-2 text-center", isSameDay(day, today) && "bg-primary/5"), children: [_jsx("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: new Intl.DateTimeFormat(locale, { weekday: "short" }).format(day) }), _jsx("p", { className: cn("mx-auto mt-0.5 flex size-7 items-center justify-center rounded-full text-sm font-black", isSameDay(day, today) && "bg-primary text-primary-foreground"), children: day.getDate() })] }, day.toISOString()))), _jsx("div", { className: "border-b border-border/50" }), days.map((day) => {
+                        const allDay = events.filter((event) => isMonthBar(event) && occupiesDay(event, day));
+                        return (_jsx("div", { "data-scheduler-day": isoDay(day), className: "min-h-10 space-y-0.5 border-b border-l border-border/50 p-1", children: allDay.map((event) => (_jsx("div", { children: renderEventTrigger(event, "flex h-5 w-full items-center truncate rounded-md px-1.5 text-[11px] font-semibold", event.title, { variant: "all-day" }) }, occurrenceKey(event)))) }, `allday-${day.toISOString()}`));
+                    })] }), _jsxs("div", { className: "relative min-w-[640px]", style: { height: hours.length * hourHeight }, children: [_jsxs("div", { className: "grid h-full", style: { gridTemplateColumns: `3.5rem repeat(${days.length}, minmax(0, 1fr))` }, children: [_jsx("div", { className: "relative", children: hours.map((hour) => (_jsx("div", { className: "relative border-b border-border/30 pr-2 text-right text-[10px] font-bold text-muted-foreground", style: { height: hourHeight }, children: _jsx("span", { className: "-translate-y-2 absolute right-2", children: formatHour(hour, locale, hour12) }) }, hour))) }), days.map((day) => {
+                                const layout = layoutTimedEvents(events, day, hourStart, hourEnd);
+                                return (_jsxs("div", { "data-scheduler-day": isoDay(day), className: "relative border-l border-border/40", onClick: (click) => {
+                                        if (click.target.closest("button"))
+                                            return;
+                                        const rect = click.currentTarget.getBoundingClientRect();
+                                        const ratio = (click.clientY - rect.top) / rect.height;
+                                        const hour = hourStart + ratio * (hourEnd - hourStart);
+                                        const startHour = Math.floor(hour);
+                                        const start = new Date(day.getFullYear(), day.getMonth(), day.getDate(), startHour);
+                                        onSlotClick?.({
+                                            start,
+                                            end: new Date(start.getTime() + 3_600_000),
+                                            allDay: false,
+                                        });
+                                    }, children: [hours.map((hour) => (_jsx("div", { className: "border-b border-border/30", style: { height: hourHeight } }, hour))), layout.map((item) => (_jsx("div", { className: "absolute px-0.5", style: {
+                                                top: `${item.top}%`,
+                                                height: `${item.height}%`,
+                                                left: `${(item.col / item.cols) * 100}%`,
+                                                width: `${100 / item.cols}%`,
+                                            }, children: renderEventTrigger(item.event, "flex h-full w-full flex-col overflow-hidden rounded-md px-1.5 py-1 text-left text-[11px] font-semibold leading-tight", _jsxs(_Fragment, { children: [_jsx("span", { className: "truncate", children: item.event.title }), _jsx("span", { className: "truncate text-[10px] font-medium opacity-80", children: formatTime(item.event.start, locale, hour12) })] }), { resize: "ns", variant: "time-grid" }) }, occurrenceKey(item.event))))] }, day.toISOString()));
+                            })] }), showNow && nowTop > 0 && nowTop < hours.length * hourHeight ? (_jsx("div", { className: "pointer-events-none absolute right-0 left-14 z-10 h-px bg-destructive", style: { top: nowTop }, children: _jsx("span", { className: "absolute -top-1 -left-1 size-2 rounded-full bg-destructive" }) })) : null] })] }));
+}
+function AgendaList({ date, events, showWeekends, locale, hour12, onSlotClick, renderEventTrigger, }) {
+    const days = filterWeekendDays(agendaDays(date, AGENDA_LENGTH), showWeekends);
+    return (_jsx("div", { className: "divide-y divide-border/50", children: days.map((day) => {
+            const items = events.filter((event) => occupiesDay(event, day));
+            return (_jsxs("div", { className: "grid grid-cols-[7.5rem_minmax(0,1fr)] gap-3 px-3 py-3 sm:px-4", children: [_jsxs("button", { type: "button", "data-scheduler-day": isoDay(day), className: "text-left", onClick: () => onSlotClick?.({
+                            start: new Date(day.getFullYear(), day.getMonth(), day.getDate(), 9),
+                            end: new Date(day.getFullYear(), day.getMonth(), day.getDate(), 10),
+                            allDay: false,
+                        }), children: [_jsx("p", { className: "text-[10px] font-bold uppercase tracking-widest text-muted-foreground", children: new Intl.DateTimeFormat(locale, { weekday: "short" }).format(day) }), _jsx("p", { className: cn("text-lg font-black", isSameDay(day, startOfToday()) && "text-primary"), children: new Intl.DateTimeFormat(locale, { month: "short", day: "numeric" }).format(day) })] }), _jsx("div", { className: "min-w-0 space-y-1.5", children: items.length === 0 ? (_jsx("p", { className: "pt-2 text-xs text-muted-foreground", children: "No events" })) : (items.map((event) => (_jsx("div", { "data-scheduler-day": isoDay(day), children: renderEventTrigger(event, "flex w-full min-w-0 items-start gap-2 rounded-md px-2 py-1.5 text-left hover:bg-muted/40", _jsxs(_Fragment, { children: [_jsx("span", { className: "mt-1.5 size-2 shrink-0 rounded-full", style: eventColorStyle(event.color, "dot") }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate text-sm font-semibold text-foreground", children: event.title }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: event.allDay || isMonthBar(event)
+                                                    ? "All day"
+                                                    : `${formatTime(event.start, locale, hour12)} – ${formatTime(event.end, locale, hour12)}` })] })] }), { variant: "agenda" }) }, occurrenceKey(event))))) })] }, day.toISOString()));
+        }) }));
+}

package/dist/composites/EventEditor.d.ts

@@ -0,0 +1,22 @@
+import { type SchedulerColorTone, type SchedulerEvent, type SchedulerResource } from "../lib/scheduler";
+export type EventEditorDraft = {
+    id?: string;
+    title?: string;
+    start: Date;
+    end: Date;
+    allDay?: boolean;
+    resourceId?: string;
+    color?: SchedulerColorTone;
+    description?: string;
+    rrule?: string;
+};
+export declare function EventEditor({ open, onOpenChange, draft, resources, readOnly, onSave, onDelete, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    draft: EventEditorDraft | null;
+    resources?: SchedulerResource[];
+    readOnly?: boolean;
+    onSave: (event: SchedulerEvent) => void;
+    onDelete?: (id: string) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=EventEditor.d.ts.map

package/dist/composites/EventEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventEditor.d.ts","sourceRoot":"","sources":["../../src/composites/EventEditor.tsx"],"names":[],"mappings":"AACA,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACvB,MAAM,kBAAkB,CAAC;AAgB1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,CAAC;IACZ,GAAG,EAAE,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,kBAAkB,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAWF,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,SAAc,EACd,QAAgB,EAChB,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC,+BA4MA"}

package/dist/composites/EventEditor.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { createEventId, fromDatetimeLocalValue, SCHEDULER_COLOR_TONES, toDatetimeLocalValue, toDate, } from "../lib/scheduler";
+import { Button } from "../primitives/Button";
+import { Checkbox } from "../primitives/Checkbox";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from "../primitives/Dialog";
+import { Input } from "../primitives/Input";
+import { NativeSelect } from "../primitives/NativeSelect";
+import { Textarea } from "../primitives/Textarea";
+import { FormField } from "./FormField";
+const RRULE_PRESETS = [
+    { value: "", label: "Does not repeat" },
+    { value: "FREQ=DAILY", label: "Daily" },
+    { value: "FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR", label: "Every weekday" },
+    { value: "FREQ=WEEKLY", label: "Weekly" },
+    { value: "FREQ=MONTHLY", label: "Monthly" },
+    { value: "FREQ=YEARLY", label: "Yearly" },
+];
+export function EventEditor({ open, onOpenChange, draft, resources = [], readOnly = false, onSave, onDelete, }) {
+    const [title, setTitle] = useState("");
+    const [start, setStart] = useState("");
+    const [end, setEnd] = useState("");
+    const [allDay, setAllDay] = useState(false);
+    const [resourceId, setResourceId] = useState("");
+    const [color, setColor] = useState("");
+    const [description, setDescription] = useState("");
+    const [rrule, setRrule] = useState("");
+    useEffect(() => {
+        if (!draft || !open)
+            return;
+        setTitle(draft.title ?? "");
+        setStart(draft.allDay
+            ? toDatetimeLocalValue(toDate(draft.start)).slice(0, 10)
+            : toDatetimeLocalValue(toDate(draft.start)));
+        setEnd(draft.allDay
+            ? toDatetimeLocalValue(toDate(draft.end)).slice(0, 10)
+            : toDatetimeLocalValue(toDate(draft.end)));
+        setAllDay(Boolean(draft.allDay));
+        setResourceId(draft.resourceId ?? "");
+        setColor(draft.color ?? "");
+        setDescription(draft.description ?? "");
+        setRrule(draft.rrule ?? "");
+    }, [draft, open]);
+    const locked = readOnly;
+    const isEdit = Boolean(draft?.id);
+    function submit() {
+        if (!draft || locked)
+            return;
+        const nextStart = allDay ? fromDatetimeLocalValue(`${start}T00:00`) : fromDatetimeLocalValue(start);
+        const nextEnd = allDay
+            ? fromDatetimeLocalValue(`${end || start}T00:00`)
+            : fromDatetimeLocalValue(end || start);
+        onSave({
+            id: draft.id ?? createEventId(),
+            title: title.trim() || "Untitled",
+            start: nextStart,
+            end: nextEnd.getTime() <= nextStart.getTime()
+                ? new Date(nextStart.getTime() + (allDay ? 86_400_000 : 3_600_000))
+                : nextEnd,
+            allDay,
+            resourceId: resourceId || undefined,
+            color: color || undefined,
+            description: description.trim() || undefined,
+            rrule: rrule || undefined,
+        });
+        onOpenChange(false);
+    }
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: locked ? "Event" : isEdit ? "Edit event" : "New event" }), _jsx(DialogDescription, { children: locked ? "This calendar is read-only." : "Title, time, resource, and recurrence." })] }), draft ? (_jsxs("form", { className: "grid gap-3", onSubmit: (event) => {
+                        event.preventDefault();
+                        submit();
+                    }, children: [_jsx(FormField, { id: "spk-event-title", label: "Title", required: true, children: _jsx(Input, { id: "spk-event-title", value: title, onChange: (event) => setTitle(event.target.value), disabled: locked, autoFocus: !locked }) }), _jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [_jsx(Checkbox, { checked: allDay, onCheckedChange: (value) => {
+                                        const next = value === true;
+                                        setAllDay(next);
+                                        if (next) {
+                                            setStart(start.slice(0, 10));
+                                            setEnd((end || start).slice(0, 10));
+                                        }
+                                        else {
+                                            setStart(start.length <= 10 ? `${start}T09:00` : start);
+                                            setEnd((end || start).length <= 10 ? `${end || start}T10:00` : end);
+                                        }
+                                    }, disabled: locked }), "All day"] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [_jsx(FormField, { id: "spk-event-start", label: "Start", children: _jsx(Input, { id: "spk-event-start", type: allDay ? "date" : "datetime-local", value: start, onChange: (event) => setStart(event.target.value), disabled: locked }) }), _jsx(FormField, { id: "spk-event-end", label: "End", children: _jsx(Input, { id: "spk-event-end", type: allDay ? "date" : "datetime-local", value: end, onChange: (event) => setEnd(event.target.value), disabled: locked }) })] }), resources.length > 0 ? (_jsx(FormField, { id: "spk-event-resource", label: "Resource", children: _jsxs(NativeSelect, { id: "spk-event-resource", value: resourceId, onChange: (event) => setResourceId(event.target.value), disabled: locked, className: "h-9 min-h-9", children: [_jsx("option", { value: "", children: "None" }), resources.map((resource) => (_jsx("option", { value: resource.id, children: resource.title }, resource.id)))] }) })) : null, _jsx(FormField, { id: "spk-event-color", label: "Color", children: _jsxs(NativeSelect, { id: "spk-event-color", value: color, onChange: (event) => setColor(event.target.value), disabled: locked, className: "h-9 min-h-9", children: [_jsx("option", { value: "", children: "From resource" }), SCHEDULER_COLOR_TONES.map((tone) => (_jsx("option", { value: tone, children: tone }, tone)))] }) }), _jsx(FormField, { id: "spk-event-repeat", label: "Repeat", children: _jsxs(NativeSelect, { id: "spk-event-repeat", value: rrule, onChange: (event) => setRrule(event.target.value), disabled: locked, className: "h-9 min-h-9", children: [RRULE_PRESETS.map((preset) => (_jsx("option", { value: preset.value, children: preset.label }, preset.value || "none"))), rrule && !RRULE_PRESETS.some((preset) => preset.value === rrule) ? (_jsx("option", { value: rrule, children: "Custom" })) : null] }) }), _jsx(FormField, { id: "spk-event-notes", label: "Description", children: _jsx(Textarea, { id: "spk-event-notes", value: description, onChange: (event) => setDescription(event.target.value), disabled: locked, rows: 3 }) }), _jsxs(DialogFooter, { children: [isEdit && onDelete && !locked ? (_jsx(Button, { type: "button", variant: "destructive", className: "sm:mr-auto", onClick: () => {
+                                        onDelete(draft.id);
+                                        onOpenChange(false);
+                                    }, children: "Delete" })) : null, _jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), children: locked ? "Close" : "Cancel" }), !locked ? _jsx(Button, { type: "submit", children: "Save" }) : null] })] })) : null] }) }));
+}

package/dist/composites/EventTimeline.d.ts

@@ -0,0 +1,29 @@
+import { type SchedulerEvent, type SchedulerResource, type TimelineScale } from "../lib/scheduler";
+export type EventTimelineProps = {
+    events?: SchedulerEvent[];
+    resources?: SchedulerResource[];
+    scale?: TimelineScale;
+    defaultScale?: TimelineScale;
+    onScaleChange?: (scale: TimelineScale) => void;
+    date?: Date;
+    defaultDate?: Date;
+    onDateChange?: (date: Date) => void;
+    scales?: TimelineScale[];
+    locale?: string;
+    readOnly?: boolean;
+    areEventsDraggable?: boolean;
+    areEventsResizable?: boolean;
+    onEventClick?: (event: SchedulerEvent) => void;
+    onEventChange?: (event: SchedulerEvent, next: Partial<SchedulerEvent>) => void;
+    onEventCreate?: (event: SchedulerEvent) => void;
+    onEventDelete?: (event: SchedulerEvent) => void;
+    /**
+     * Built-in create/edit dialog. Defaults to true.
+     * Set false when the host owns create/edit.
+     */
+    showEventEditor?: boolean;
+    className?: string;
+};
+/** Horizontal resource timeline — rows are resources, bars are allocations across time. */
+export declare function EventTimeline({ events, resources, scale: scaleProp, defaultScale, onScaleChange, date: dateProp, defaultDate, onDateChange, scales, locale, readOnly, areEventsDraggable, areEventsResizable, onEventClick, onEventChange, onEventCreate, onEventDelete, showEventEditor, className, }: EventTimelineProps): import("react").JSX.Element;
+//# sourceMappingURL=EventTimeline.d.ts.map

package/dist/composites/EventTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EventTimeline.d.ts","sourceRoot":"","sources":["../../src/composites/EventTimeline.tsx"],"names":[],"mappings":"AAGA,OAAO,EAeL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,aAAa,EACnB,MAAM,kBAAkB,CAAC;AAW1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,CAAC,EAAE,cAAc,EAAE,CAAC;IAC1B,SAAS,CAAC,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,aAAa,EAAE,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAC/E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAmCF,2FAA2F;AAC3F,wBAAgB,aAAa,CAAC,EAC5B,MAAW,EACX,SAAc,EACd,KAAK,EAAE,SAAS,EAChB,YAAuB,EACvB,aAAa,EACb,IAAI,EAAE,QAAQ,EACd,WAAW,EACX,YAAY,EACZ,MAAsD,EACtD,MAAM,EACN,QAAgB,EAChB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,EACZ,aAAa,EACb,aAAa,EACb,aAAa,EACb,eAAsB,EACtB,SAAS,GACV,EAAE,kBAAkB,+BA6PpB"}