@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/scheduler/index.jsx

@@ -0,0 +1,303 @@
+// Ported from @malva-ui/scheduler (src/lib/scheduler/scheduler.ts + .html: root host, view switch, drag hint, two
+// polite live regions), MIT, © 2026 Malva UI.
+// Rivet:
+// - `<mlv-scheduler>` inputs / models / outputs → props (live unless listed as read once in `CLAUDE.md`): the root
+//   turns live props into accessors (`liveOptions`), builds the region state (`createSchedulerState`) and memoizes the
+//   derived values in its own `computed`s (resumable), handed to the views through `SchedulerContext` (`rv-scheduler`).
+// - Server output is final (range, days, layout, labels); the month view boots nothing.
+// - External drop (T7, malva `externalDrop` over SortableJS groups): with `onExternalDrop` the body is a cdk
+//   `DropList` (`id = dropGroup`, `sortingDisabled`, `enterPredicate` = editable) — a hit area: connected external
+//   items drop on it, `drag.ts` resolves the cell under the drop point; without it the body is a plain div (0 cost).
+// - Toolbar (T9): the default headless `SchedulerToolbar` (`toolbar.tsx`) unless `toolbar={false}`; `renderHeader(api)`
+//   replaces it. Context menus (`menus.tsx`): one panel, rendered only with `renderSlotMenu` / `renderEventMenu`.
+// - Week and day share one `SchedulerTimeGrid` (the `Show` fallback): a week ↔ day switch keeps the grid and re-applies
+//   its initial scroll (malva rule).
+import { computed, provide, signal, untrack } from "@rivetjs/reactivity";
+import { Show } from "@rivetjs/runtime/dom";
+import { splitProps } from "@rivetjs/runtime/props";
+import { visuallyHidden } from "../a11y/index.js";
+import { useLocale } from "../i18n/index.js";
+import { createId } from "../utils/id.js";
+import { liveOptions } from "../utils/live.jsx";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { SchedulerContext } from "./context.jsx";
+import { SchedulerToolbar } from "./toolbar.jsx";
+import { SchedulerMenu, openSchedulerMenu, slotMenuRange, } from "./menus.jsx";
+import { SchedulerMonth } from "./month.jsx";
+import { SchedulerTimeGrid } from "./time-grid.jsx";
+import { DropList } from "../drag-drop/drop-list.jsx";
+import { schedulerExternalDrop } from "./behaviour.js";
+import { addCalendarMonths, dayOf, dayOfWeek, fromLayout, todayDay } from "./dates.js";
+import { schedulerString } from "./intl.js";
+import { hiddenWeekdays, nextVisibleDate } from "./layout.js";
+import { slotCount } from "./time.js";
+import { commitChange, commitSelection, createSchedulerState, dateLabel, dateTimeLabel, schedulerAnnounce, schedulerDateOf, schedulerGoTo, schedulerHiddenDays, schedulerSelectionBounds, schedulerSelectionRange, schedulerNext, schedulerPrevious, schedulerSetView, schedulerTitle, schedulerToday, schedulerVisibleRange, schedulerSlotDuration, schedulerSnap, schedulerTimeWindow, schedulerAnchorDay, schedulerDays, schedulerEditable, schedulerLocale, schedulerNormalizedEvents, schedulerRowLength, schedulerSelectable, schedulerShowsCurrentTime, schedulerStringTable, schedulerTimeZone, schedulerVisibleLanes, schedulerWeekendDays, schedulerWithPreview, } from "./state.js";
+export * from "./layout-index.js";
+export * from "./state.js";
+export * from "./intl.js";
+export { SchedulerContext, } from "./context.jsx";
+export { SchedulerToolbar } from "./toolbar.jsx";
+export { SchedulerMenu, } from "./menus.jsx";
+export { SchedulerMonth } from "./month.jsx";
+export { SchedulerTimeGrid } from "./time-grid.jsx";
+export { scrollOffsetFor } from "./time-grid-client.jsx";
+export { SchedulerEventChip } from "./event.jsx";
+/** Keys turned into accessors when live (options + `aria-label` / `class` / `style` read in bindings). */
+const OPTION_KEYS = [
+    "timeZone",
+    "locale",
+    "firstDayOfWeek",
+    "hiddenDays",
+    "weekendDays",
+    "minTime",
+    "maxTime",
+    "slotDuration",
+    "snapDuration",
+    "defaultEventDuration",
+    "businessHours",
+    "visibleLanes",
+    "isReadOnly",
+    "allowsRangeSelection",
+    "showCurrentTime",
+    "scrollToCurrentTime",
+    "showWeekNumbers",
+    "strings",
+];
+const CONTROLLED_KEYS = ["events", "view", "date"];
+/**
+ * Everything `createSchedulerState` keeps (region state): options, controlled values and state handlers — never the
+ * whole props bag (`renderEvent`, `stateRef`, DOM props would serialize with the state; one non-serializable value
+ * there would break the scheduler's resume).
+ */
+const STATE_KEYS = [
+    ...OPTION_KEYS,
+    ...CONTROLLED_KEYS,
+    "defaultEvents",
+    "onEventsChange",
+    "defaultView",
+    "onViewChange",
+    "defaultDate",
+    "onDateChange",
+    "canMove",
+    "canResize",
+    "onEventMove",
+    "onEventResize",
+    "onVisibleRangeChange",
+    "onRangeSelect",
+    "onExternalDrop",
+    "onEventAction",
+    "onEventDoubleClick",
+    "onEventContextMenu",
+    "onEventDelete",
+    "onSlotAction",
+    "onSlotDoubleClick",
+    "onSlotContextMenu",
+];
+const OWNED = [
+    ...STATE_KEYS,
+    "dropGroup",
+    "renderEvent",
+    "renderHeader",
+    "renderSlotMenu",
+    "renderEventMenu",
+    "toolbar",
+    "onMoreAction",
+    "stateRef",
+    "id",
+    "aria-label",
+    "class",
+    "style",
+];
+/**
+ * Month / week / day scheduler (agenda): lane-packed month grid with `+N more` panels, time grid with clustered
+ * columns, pointer + keyboard move / resize / range selection (T6–T8). Headless: `rv-Scheduler*` classes,
+ * `data-*` state, geometry as inline custom properties.
+ */
+export function Scheduler(props) {
+    const dom = globalDOMProps(props, OWNED);
+    const [view] = splitProps(props, ["aria-label", "class", "style", "toolbar"]);
+    const env = useLocale();
+    const options = liveOptions(props, OPTION_KEYS, CONTROLLED_KEYS);
+    const input = untrack(() => {
+        const picked = {};
+        for (const key of STATE_KEYS)
+            if (options[key] !== undefined)
+                picked[key] = options[key];
+        return picked;
+    });
+    const localeOption = input.locale;
+    const state = createSchedulerState({
+        ...input,
+        // The ambient locale (I18nProvider) when no `locale` is given.
+        locale: () => readValue(localeOption) ?? env.locale,
+    });
+    const stateRef = props.stateRef;
+    if (stateRef)
+        untrack(() => typeof stateRef.set === "function"
+            ? stateRef.set(state)
+            : stateRef(state));
+    const renderEvent = props.renderEvent;
+    const renderHeader = props.renderHeader;
+    const renderSlotMenu = props.renderSlotMenu;
+    const renderEventMenu = props.renderEventMenu;
+    // The open context menu (browser only: element / event values; `null` on the server).
+    const menu = signal(null);
+    const onMoreAction = props.onMoreAction;
+    const id = props.id;
+    const external = !!props.onExternalDrop;
+    const dropGroup = props.dropGroup ?? "rv-scheduler";
+    const timeZone = computed(() => schedulerTimeZone(state));
+    const locale = computed(() => schedulerLocale(state));
+    const strings = computed(() => schedulerStringTable(state));
+    const days = computed(() => schedulerDays(state));
+    const rowLength = computed(() => schedulerRowLength(state));
+    const anchorDay = computed(() => schedulerAnchorDay(state));
+    const today = computed(() => (schedulerShowsCurrentTime(state) ? todayDay(timeZone()) : null));
+    const weekend = computed(() => schedulerWeekendDays(state));
+    const normalized = computed(() => schedulerNormalizedEvents(state));
+    const events = computed(() => schedulerWithPreview(state, normalized()));
+    const visibleLanes = computed(() => schedulerVisibleLanes(state));
+    const t = (key, vars) => schedulerString(strings(), key, vars, locale());
+    const timeAxis = () => {
+        const { min, max } = schedulerTimeWindow(state);
+        const slot = schedulerSlotDuration(state);
+        return { min, max, slot, snap: schedulerSnap(state), last: min + (slotCount(min, max, slot) - 1) * slot };
+    };
+    const ctx = {
+        state,
+        view: () => state.view.value(),
+        locale: () => locale(),
+        timeZone: () => timeZone(),
+        days: () => days(),
+        rowLength: () => rowLength(),
+        anchorDay: () => anchorDay(),
+        today: () => today(),
+        weekend: () => weekend(),
+        events: () => events(),
+        visibleLanes: () => visibleLanes(),
+        editable: () => schedulerEditable(state),
+        selectable: () => schedulerSelectable(state),
+        showWeekNumbers: () => !!readValue(state.options.showWeekNumbers),
+        dateOf: (day) => fromLayout(day, 0, state.date.value(), timeZone(), true),
+        t: (key, vars) => t(key, vars),
+        dragHintId: createId(),
+        popoverId: createId(),
+        renderEvent,
+        // Keyboard / click actions (T8): the delegated handlers (`keys*.ts`, leaf chunks) call these, so the state / intl /
+        // layout code loads only when a key actually changes something.
+        normalized: (id) => normalized().find((candidate) => candidate.event.id === id) ?? null,
+        commit: (kind, event, next) => commitChange(state, { kind, normalized: event, next, source: "keyboard" }),
+        goTo: (day) => schedulerGoTo(state, fromLayout(day, 0, untrack(state.date.value), timeZone(), true)),
+        stepDay: (day, direction) => nextVisibleDate(day, direction, schedulerHiddenDays(state)),
+        pageMonth: (day, direction) => {
+            // `addCalendarMonths` keeps the day of month, not the weekday: a landing day on a hidden column skips on to the
+            // nearest rendered day in the same direction (through `hiddenWeekdays`: an all-seven `hiddenDays` hides nothing).
+            const hidden = schedulerHiddenDays(state);
+            const target = addCalendarMonths(day, direction);
+            return hiddenWeekdays(hidden).has(dayOfWeek(target)) ? nextVisibleDate(target, direction, hidden) : target;
+        },
+        slotDate: (day, minutes) => schedulerDateOf(state, day * 1440 + (minutes ?? 0), minutes === null),
+        axis: () => timeAxis(),
+        announceSelection: () => untrack(() => {
+            const bounds = schedulerSelectionBounds(state.selection(), days());
+            if (!bounds)
+                return;
+            const range = schedulerSelectionRange(state, bounds);
+            const at = locale();
+            // All-day names the INCLUSIVE last day ("Mar 3 to Mar 5"); timed names the exclusive end a following `Enter` emits.
+            const start = range.allDay ? dateLabel(dayOf(range.start), at) : dateTimeLabel(range.start, at);
+            const end = range.allDay ? dateLabel(dayOf(range.end) - 1, at) : dateTimeLabel(range.end, at);
+            schedulerAnnounce(state, t("selectionHint", { start, end }));
+        }),
+        commitSelection: () => commitSelection(state, "keyboard"),
+        eventInteraction: (kind, interaction) => {
+            // The menu opens first, so `onEventContextMenu` sees the event already prevented (malva order).
+            if (kind === "contextmenu" && renderEventMenu)
+                untrack(() => openSchedulerMenu(menu, {
+                    kind: "event",
+                    event: interaction.event,
+                    range: null,
+                    selection: false,
+                    label: t("eventMenu", { title: interaction.event.title }),
+                    view: state.view.value(),
+                    anchor: interaction.element,
+                }, interaction.nativeEvent));
+            (kind === "click" ? state.onEventAction : kind === "dblclick" ? state.onEventDoubleClick : state.onEventContextMenu)?.(interaction);
+        },
+        eventDelete: (interaction) => state.onEventDelete?.(interaction),
+        slotInteraction: (kind, slot, at) => {
+            if (kind === "contextmenu" && renderSlotMenu)
+                untrack(() => {
+                    const bounds = at.inSelection ? schedulerSelectionBounds(state.selection(), days()) : null;
+                    const wall = bounds ? schedulerSelectionRange(state, bounds) : slotMenuRange(at.day, at.minutes, timeAxis());
+                    const lang = locale();
+                    openSchedulerMenu(menu, {
+                        kind: "slot",
+                        event: null,
+                        range: { start: schedulerDateOf(state, wall.start, wall.allDay), end: schedulerDateOf(state, wall.end, wall.allDay), allDay: wall.allDay },
+                        selection: !!bounds,
+                        label: t("slotMenu", { start: wall.allDay ? dateLabel(dayOf(wall.start), lang) : dateTimeLabel(wall.start, lang) }),
+                        view: state.view.value(),
+                        anchor: slot.element,
+                    }, slot.nativeEvent);
+                });
+            (kind === "click" ? state.onSlotAction : kind === "dblclick" ? state.onSlotDoubleClick : state.onSlotContextMenu)?.(slot);
+        },
+        hasEventMenu: !!renderEventMenu,
+        hasSlotMenu: !!renderSlotMenu,
+        onMoreAction,
+    };
+    const dragHintId = ctx.dragHintId;
+    const api = {
+        title: () => schedulerTitle(state),
+        view: () => state.view.value(),
+        range: () => schedulerVisibleRange(state),
+        next: () => schedulerNext(state),
+        previous: () => schedulerPrevious(state),
+        today: () => schedulerToday(state),
+        setView: (next) => schedulerSetView(state, next),
+        goTo: (date) => schedulerGoTo(state, date),
+    };
+    const hasMenus = !!(renderSlotMenu || renderEventMenu);
+    return (<div {...dom} id={id} role="group" class={view.class ?? "rv-Scheduler"} style={view.style} aria-label={view["aria-label"] ?? t("scheduler")} data-rv-scheduler="" data-view={state.view.value()} data-dragging={state.dragging() ? "true" : undefined}>
+      {renderHeader ? (renderHeader(api)) : (<Show when={() => view.toolbar !== false}>
+          {() => (<SchedulerToolbar api={api} labels={{
+                    previous: () => t(`previous.${state.view.value()}`),
+                    next: () => t(`next.${state.view.value()}`),
+                    today: () => t("today"),
+                    viewSwitch: () => t("viewSwitch"),
+                    month: () => t("month"),
+                    week: () => t("week"),
+                    day: () => t("day"),
+                }}/>)}
+        </Show>)}
+      {external ? (<DropList id={dropGroup} class="rv-Scheduler-body" sortingDisabled enterPredicate={() => schedulerEditable(state)} onDropped={(drop) => schedulerExternalDrop(drop, state)}>
+          <Show when={() => state.view.value() === "month"} fallback={() => provide(SchedulerContext, ctx, () => <SchedulerTimeGrid />)}>
+            {() => provide(SchedulerContext, ctx, () => <SchedulerMonth />)}
+          </Show>
+        </DropList>) : (<div class="rv-Scheduler-body">
+          <Show when={() => state.view.value() === "month"} fallback={() => provide(SchedulerContext, ctx, () => <SchedulerTimeGrid />)}>
+            {() => provide(SchedulerContext, ctx, () => <SchedulerMonth />)}
+          </Show>
+        </div>)}
+      <span id={dragHintId} style={visuallyHidden}>
+        {t("dragHint")}
+      </span>
+      <span class="rv-Scheduler-status" role="status" aria-live="polite" aria-atomic="true" style={visuallyHidden}>
+        {state.announcement()[0]}
+      </span>
+      <span class="rv-Scheduler-status" role="status" aria-live="polite" aria-atomic="true" style={visuallyHidden}>
+        {state.announcement()[1]}
+      </span>
+      {hasMenus ? (<SchedulerMenu menu={menu} close={() => untrack(() => {
+                const open = menu();
+                if (!open)
+                    return;
+                menu.set(null);
+                // The pending selection this panel took is released with it (malva `selectionRelease`).
+                if (open.holds)
+                    state.selection.set(null);
+            })} renderSlotMenu={renderSlotMenu} renderEventMenu={renderEventMenu}/>) : null}
+    </div>);
+}
+const readValue = (value) => (typeof value === "function" ? value() : value);

package/scheduler/intl.d.ts

@@ -0,0 +1,16 @@
+/** Message keys (malva keys; ICU select / plural split: `previous.month`, `moreEvents.one` …; Rivet `weekNumber`). */
+export type SchedulerMessageKey = "allDay" | "day" | "dayLabelToday" | "dragHint" | "eventLabel" | "eventLabelAllDay" | "eventMenu" | "eventMoved" | "eventResized" | "gridLabel.day" | "gridLabel.month" | "gridLabel.week" | "month" | "moreEvents.other" | "moreEventsLabel.other" | "moveRejected" | "next.day" | "next.month" | "next.week" | "previous.day" | "previous.month" | "previous.week" | "rangeChanged" | "scheduler" | "selectionHint" | "slotLabel" | "slotMenu" | "today" | "viewSwitch" | "week" | "weekNumber";
+/** Plural variants a locale may add (`Intl.PluralRules` categories; `.other` is always present). */
+export type SchedulerPluralKey = "moreEvents.zero" | "moreEvents.one" | "moreEvents.two" | "moreEvents.few" | "moreEvents.many" | "moreEventsLabel.zero" | "moreEventsLabel.one" | "moreEventsLabel.two" | "moreEventsLabel.few" | "moreEventsLabel.many";
+/** One locale's strings (`strings` prop: any subset overrides the locale table). */
+export type SchedulerStrings = Record<SchedulerMessageKey, string> & Partial<Record<SchedulerPluralKey, string>>;
+/** Locale tables (14 locales of the malva packs). */
+export declare const schedulerMessages: Record<string, SchedulerStrings>;
+/** The strings of `locale` (cdk lookup: exact, language-script, language, any region, else en-US), `overrides` on top. */
+export declare function schedulerStrings(locale: string, overrides?: Partial<SchedulerStrings>): SchedulerStrings;
+/**
+ * One message: `key` names a flat key (`"previous.week"`) or a plural base (`"moreEvents"`, variables need `count`):
+ * the plural variant comes from `Intl.PluralRules(locale)` (cached), falling back to `.other`. `{name}` placeholders
+ * are filled from `vars`.
+ */
+export declare function schedulerString(strings: SchedulerStrings, key: SchedulerMessageKey | "moreEvents" | "moreEventsLabel", vars: Record<string, string | number | boolean> | undefined, locale: string): string;