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

package/scheduler/time-grid.d.ts

@@ -0,0 +1,26 @@
+import { type DOMValue } from "@rivetjs/runtime/dom";
+/** One slot row of a day column. */
+export interface SchedulerTimeSlot {
+    /** Start, minutes of day. */
+    readonly minutes: number;
+    /** `"<date>, <time>"` (`slotLabel`). */
+    readonly label: string;
+    /** Outside `businessHours` (never set while `businessHours` is unset). */
+    readonly outsideBusiness: boolean;
+    /** Starts on a full hour. */
+    readonly hour: boolean;
+}
+/** One rendered day of the time grid (malva `MlvSchedulerTimeColumn`, day numbers instead of dates). */
+export interface SchedulerTimeColumn {
+    readonly dayIndex: number;
+    readonly day: number;
+    /** Accessible name: the full date, `", today"` suffixed when it is. */
+    readonly label: string;
+    readonly weekday: string;
+    readonly dayNumber: string;
+    readonly today: boolean;
+    readonly weekend: boolean;
+    readonly slots: readonly SchedulerTimeSlot[];
+}
+/** Week / day time grid (internal part of `Scheduler`). */
+export declare function SchedulerTimeGrid<T>(): DOMValue;

package/scheduler/time-grid.jsx

@@ -0,0 +1,266 @@
+// Ported from @malva-ui/scheduler (src/lib/time-grid/scheduler-time-grid.ts + .html: labelled sheet group, header +
+// all-day 2-row grid, one listbox of option slots per day, hour gutter, clustered timed chips, business-hours shading,
+// now-line, roving tab stop default), MIT, © 2026 Malva UI.
+// Rivet:
+// - geometry as inline custom properties computed on the server (`--rv-scheduler-event-top` / `-height` / `-start` /
+//   `-width`, `--rv-scheduler-offset` of hour labels): the HTML is final, nothing measures before input.
+// - client work = `SchedulerTimeGridClient` (leaf module): initial scroll + `scrollToTime` requests (boots by design,
+//   week / day only) and the minute clock (`visible`); the server renders no now-line.
+// - roving tab stop = a region signal of `{ day, minutes }` (day number, not a column index) instead of malva's
+//   `linkedSignal`; a stop whose day leaves the range or whose slot leaves the window falls back to the default
+//   (today, else the first day, at the business start / 08:00 snapped to a rendered slot).
+// - today: the root's day until the minute clock ticks, then the clock's (advances past midnight; the boot-free month
+//   keeps the day it rendered until its next recompute).
+// - all-day band: lanes never collapse (malva, `layoutRow(…, Infinity)`), the band grows (`--rv-scheduler-all-day-lanes`).
+// - Chip drag / resize: delegated `schedulerPress` on the sheet (T6, lazy `drag.ts`); the target is the slot under the
+//   floating clone's top edge. Range selection (T7): empty-slot presses go to the lazy `select.ts`; slots / all-day
+//   cells paint `state.selection` continuously (malva).
+// - Keyboard, clicks, focus hand-off (T8): delegated on the sheet (`keys-time-grid.ts` / `keys.ts`, leaf chunks);
+//   timed chips carry their owning slot (`data-rv-slot`) so `Enter` / `Escape` / the hand-off are DOM lookups.
+import { _regionState, computed, signal, untrack, useContext } from "@rivetjs/reactivity";
+import { For, Show, ref as elementRef } from "@rivetjs/runtime/dom";
+import { SchedulerContext } from "./context.jsx";
+import { SchedulerEventChip } from "./event.jsx";
+import { SchedulerTimeGridClient, initialMinutes, snapToSlot } from "./time-grid-client.jsx";
+import { schedulerPress, timeGridFocusIn } from "./behaviour.js";
+import { SCHEDULER_KEYS, chipFocusIn, chipFocusOut, schedulerInteraction } from "./keys.js";
+import { timeGridKeyDown } from "./keys-time-grid.js";
+import { formatDay, formatWall } from "./dates.js";
+import { DEFAULT_BUSINESS_DAYS, MINUTES_PER_DAY, parseTime, slotCount } from "./time.js";
+import { dateLabel, isCellSelected, schedulerSelectionBounds, schedulerSlotDuration, schedulerTimeGridLayout, schedulerTimeWindow, timeLabel, } from "./state.js";
+const read = (value) => (typeof value === "function" ? value() : value);
+const keep = (previous, next) => previous === next || next == null;
+const sameNumbers = (a, b) => a.length === b.length && a.every((v, i) => v === b[i]);
+const sameWindow = (a, b) => a.min === b.min && a.max === b.max;
+const NO_LANES = Object.freeze([]);
+const NO_COLUMNS = Object.freeze([]);
+const percent = (value) => value + "%";
+/** Week / day time grid (internal part of `Scheduler`). */
+export function SchedulerTimeGrid() {
+    const ctx = useContext(SchedulerContext);
+    const state = ctx.state;
+    const scroller = elementRef();
+    const now = _regionState(() => signal(null));
+    const focus = _regionState(() => signal(null));
+    // Today follows the minute clock once it ticks (past midnight the header, `data-today` and the default tab stop move
+    // with the now-line); before the first tick (server, resumed page) it is the root's.
+    const today = computed(() => {
+        const base = ctx.today();
+        const wall = now();
+        return base === null || wall === null ? base : Math.floor(wall / MINUTES_PER_DAY);
+    });
+    const window = computed(() => schedulerTimeWindow(state), { equals: sameWindow });
+    const slotDuration = computed(() => schedulerSlotDuration(state));
+    const slots = computed(() => slotCount(window().min, window().max, slotDuration()));
+    // Minutes covered by the RENDERED rows (`slotCount` is a ceil): every percentage divides by this (malva rule).
+    const span = computed(() => slots() * slotDuration());
+    const business = computed(() => {
+        const hours = read(state.options.businessHours);
+        return hours ? { days: hours.days ?? DEFAULT_BUSINESS_DAYS, start: parseTime(hours.start), end: parseTime(hours.end) } : null;
+    });
+    const selection = computed(() => schedulerSelectionBounds(state.selection(), ctx.days()));
+    const layout = computed(() => schedulerTimeGridLayout(ctx.events(), ctx.days(), window(), Number.POSITIVE_INFINITY));
+    const dayKeys = computed(() => ctx.days().map((_day, index) => index), { equals: sameNumbers });
+    // Static scaffolding only (headers, labels, slots): free of the events, so a drag preview never rebuilds the
+    // `days × slots` labels (malva rule).
+    const columns = computed(() => {
+        const locale = ctx.locale();
+        const { min, max } = window();
+        const step = slotDuration();
+        const hours = business();
+        const todayDay = today();
+        const weekend = ctx.weekend();
+        return ctx.days().map((day, dayIndex) => {
+            const plain = dateLabel(day, locale);
+            const weekday = (day + 4) % 7;
+            const out = [];
+            for (let minutes = min; minutes < max; minutes += step)
+                out.push({
+                    minutes,
+                    label: ctx.t("slotLabel", { date: plain, time: timeLabel(day * MINUTES_PER_DAY + minutes, locale) }),
+                    outsideBusiness: !!hours && !(hours.days.includes(weekday) && minutes >= hours.start && minutes < hours.end),
+                    hour: minutes % 60 === 0,
+                });
+            return {
+                dayIndex,
+                day,
+                label: todayDay === day ? ctx.t("dayLabelToday", { date: plain }) : plain,
+                weekday: formatDay(day, locale, { weekday: "short" }),
+                dayNumber: formatDay(day, locale, { day: "numeric" }),
+                today: todayDay === day,
+                weekend: weekend.includes(weekday),
+                slots: out,
+            };
+        });
+    });
+    const lanesByDay = computed(() => {
+        const byDay = new Map();
+        for (const segment of layout().allDay.visible) {
+            const bucket = byDay.get(segment.startIndex);
+            if (bucket)
+                bucket.push(segment);
+            else
+                byDay.set(segment.startIndex, [segment]);
+        }
+        return byDay;
+    });
+    const allDayLanes = () => Math.max(1, layout().allDay.laneCount);
+    const hours = computed(() => {
+        const { min, max } = window();
+        const locale = ctx.locale();
+        const total = span();
+        const day = ctx.days()[0];
+        const out = [];
+        if (day === undefined)
+            return out;
+        for (let minutes = Math.ceil(min / 60) * 60; minutes < max; minutes += 60)
+            out.push({ minutes, label: formatWall(day * MINUTES_PER_DAY + minutes, locale, { hour: "numeric" }), offset: percent(((minutes - min) / total) * 100) });
+        return out;
+    });
+    const gridLabel = () => {
+        const days = ctx.days();
+        const locale = ctx.locale();
+        if (!days.length)
+            return "";
+        const first = dateLabel(days[0], locale);
+        return ctx.view() === "day"
+            ? ctx.t("gridLabel.day", { period: first })
+            : ctx.t("gridLabel.week", { period: first + " – " + dateLabel(days[days.length - 1], locale) });
+    };
+    // Now-line: the column of the clock's day, offset in percent of the rendered span; hidden outside the window.
+    const nowLine = computed(() => {
+        const wall = now();
+        if (wall === null || today() === null)
+            return null;
+        const dayIndex = ctx.days().indexOf(Math.floor(wall / MINUTES_PER_DAY));
+        const minutes = wall % MINUTES_PER_DAY;
+        const { min, max } = window();
+        if (dayIndex < 0 || minutes < min || minutes > max)
+            return null;
+        return { dayIndex, offset: percent(((minutes - min) / span()) * 100) };
+    });
+    // Today (read untracked: a clock value, malva rule) else the first day, at the initial scroll time.
+    const tabStop = computed(() => {
+        const days = ctx.days();
+        const { min, max } = window();
+        const step = slotDuration();
+        const focused = focus();
+        if (focused) {
+            const dayIndex = days.indexOf(focused.day);
+            const minutes = focused.minutes;
+            if (dayIndex >= 0 && (minutes === null || (minutes >= min && minutes < max && (minutes - min) % step === 0)))
+                return { dayIndex, minutes };
+        }
+        const current = untrack(today);
+        const todayIndex = current === null ? -1 : days.indexOf(current);
+        const start = read(state.options.businessHours)?.start;
+        return { dayIndex: Math.max(0, todayIndex), minutes: snapToSlot(initialMinutes(start), min, max, step) };
+    });
+    const isStop = (dayIndex, minutes) => {
+        const stop = tabStop();
+        return stop.dayIndex === dayIndex && stop.minutes === minutes;
+    };
+    return (<div class="rv-SchedulerTimeGrid" style={{
+            "--rv-scheduler-day-count": String(dayKeys().length),
+            "--rv-scheduler-slot-count": String(slots()),
+            "--rv-scheduler-all-day-lanes": String(allDayLanes()),
+        }}>
+      <div ref={scroller} class="rv-SchedulerTimeGrid-scroller" data-rv-scroller="" style={{ overflow: "auto", "overflow-anchor": "none" }}>
+        <div class="rv-SchedulerTimeGrid-sheet" role="group" aria-label={gridLabel()} style={{ "touch-action": "pan-x pan-y pinch-zoom", "user-select": "none", "-webkit-user-select": "none" }} data-rk={SCHEDULER_KEYS} onKeyDown={(e) => timeGridKeyDown(e, ctx)} onClick={(e) => schedulerInteraction("click", e, ctx)} onDblClick={(e) => schedulerInteraction("dblclick", e, ctx)} onContextMenu={(e) => schedulerInteraction("contextmenu", e, ctx)} onFocusIn={(e) => {
+            timeGridFocusIn(e, ctx.days(), focus);
+            chipFocusIn(e, ctx);
+        }} onFocusOut={(e) => chipFocusOut(e, ctx)} onMouseDown={(e) => schedulerPress(e, state)} onTouchStart={(e) => schedulerPress(e, state)} onPointerDown={(e) => schedulerPress(e, state)}>
+          <div class="rv-SchedulerTimeGrid-top" role="grid" aria-label={ctx.t("allDay")}>
+            <div class="rv-SchedulerTimeGrid-header" role="row">
+              <div class="rv-SchedulerTimeGrid-corner" role="presentation"/>
+              <For each={dayKeys} by={(i) => i}>
+                {(indexOf) => {
+            const dayIndex = indexOf();
+            const column = computed(() => columns()[dayIndex], { equals: keep });
+            return (<div class="rv-SchedulerTimeGrid-day-header" role="columnheader" aria-label={column().label} data-today={column().today ? "true" : undefined} data-weekend={column().weekend ? "true" : undefined}>
+                      <span class="rv-SchedulerTimeGrid-weekday" aria-hidden="true">
+                        {column().weekday}
+                      </span>
+                      <span class="rv-SchedulerTimeGrid-day-number" aria-hidden="true">
+                        {column().dayNumber}
+                      </span>
+                    </div>);
+        }}
+              </For>
+            </div>
+            <div class="rv-SchedulerTimeGrid-all-day" role="row">
+              <div class="rv-SchedulerTimeGrid-all-day-label" role="presentation" aria-hidden="true">
+                {ctx.t("allDay")}
+              </div>
+              <For each={dayKeys} by={(i) => i}>
+                {(indexOf) => {
+            const dayIndex = indexOf();
+            const column = computed(() => columns()[dayIndex], { equals: keep });
+            const lanes = () => lanesByDay().get(dayIndex) ?? NO_LANES;
+            return (<div class="rv-SchedulerTimeGrid-all-day-cell" role="gridcell" aria-label={column().label} tabIndex={isStop(dayIndex, null) ? 0 : -1} data-rv-day-index={String(dayIndex)} data-rv-minutes="all-day" data-today={column().today ? "true" : undefined} data-weekend={column().weekend ? "true" : undefined} aria-selected={isCellSelected(selection(), dayIndex, null) ? "true" : undefined} data-selected={isCellSelected(selection(), dayIndex, null) ? "true" : undefined}>
+                      <div class="rv-SchedulerTimeGrid-all-day-lanes">
+                        <For each={lanes} by={(segment) => segment.key}>
+                          {(segment) => (<SchedulerEventChip segment={() => segment()} lane={true} spanning={() => segment().endIndex > segment().startIndex} geometry={() => ({
+                        "--rv-scheduler-lane": String(segment().lane + 1),
+                        "--rv-scheduler-span": String(segment().endIndex - segment().startIndex + 1),
+                    })}/>)}
+                        </For>
+                      </div>
+                    </div>);
+        }}
+              </For>
+            </div>
+          </div>
+          <div class="rv-SchedulerTimeGrid-body" role="presentation">
+            <div class="rv-SchedulerTimeGrid-gutter" aria-hidden="true">
+              <For each={hours} by={(hour) => hour.minutes}>
+                {(hour) => (<span class="rv-SchedulerTimeGrid-hour" style={{ "--rv-scheduler-offset": hour().offset }}>
+                    <bdi>{hour().label}</bdi>
+                  </span>)}
+              </For>
+            </div>
+            <For each={dayKeys} by={(i) => i}>
+              {(indexOf) => {
+            const dayIndex = indexOf();
+            const column = computed(() => columns()[dayIndex], { equals: keep });
+            const slotsOf = () => column().slots;
+            const segments = () => layout().columns[dayIndex] ?? NO_COLUMNS;
+            return (<div class="rv-SchedulerTimeGrid-column" role="presentation" data-rv-day-index={String(dayIndex)} data-today={column().today ? "true" : undefined}>
+                    <div class="rv-SchedulerTimeGrid-slots" role="listbox" aria-label={column().label} aria-multiselectable={ctx.selectable() ? "true" : undefined}>
+                      <For each={slotsOf} by={(slot) => slot.minutes}>
+                        {(slot) => (<div class="rv-SchedulerTimeGrid-slot" role="option" aria-label={slot().label} tabIndex={isStop(dayIndex, slot().minutes) ? 0 : -1} data-rv-day-index={String(dayIndex)} data-rv-minutes={String(slot().minutes)} data-outside-business={slot().outsideBusiness ? "true" : undefined} data-hour={slot().hour ? "true" : undefined} aria-selected={isCellSelected(selection(), dayIndex, slot().minutes) ? "true" : undefined} data-selected={isCellSelected(selection(), dayIndex, slot().minutes) ? "true" : undefined}/>)}
+                      </For>
+                    </div>
+                    <div class="rv-SchedulerTimeGrid-events" role="presentation">
+                      <For each={segments} by={(segment) => segment.key}>
+                        {(segment) => (<SchedulerEventChip segment={() => segment()} lane={false} slot={() => {
+                        // The slot owning the chip (malva `_owningSlotMinutes`): its start snapped down to a rendered row.
+                        const { min } = window();
+                        const step = slotDuration();
+                        const last = min + (slots() - 1) * step;
+                        return min + Math.floor((Math.min(last, segment().startMinutes) - min) / step) * step;
+                    }} geometry={() => {
+                        const s = segment();
+                        const { min } = window();
+                        const total = span();
+                        return {
+                            "--rv-scheduler-event-top": percent(((s.startMinutes - min) / total) * 100),
+                            "--rv-scheduler-event-height": percent(((s.endMinutes - s.startMinutes) / total) * 100),
+                            "--rv-scheduler-event-start": percent((s.column / s.columns) * 100),
+                            "--rv-scheduler-event-width": percent(100 / s.columns),
+                        };
+                    }}/>)}
+                      </For>
+                    </div>
+                    <Show when={() => nowLine()?.dayIndex === dayIndex}>
+                      {() => <div class="rv-SchedulerTimeGrid-now" aria-hidden="true" style={{ "--rv-scheduler-offset": nowLine()?.offset }}/>}
+                    </Show>
+                  </div>);
+        }}
+            </For>
+          </div>
+        </div>
+      </div>
+      <SchedulerTimeGridClient state={state} scroller={scroller} now={now}/>
+    </div>);
+}

package/scheduler/time.d.ts

@@ -0,0 +1,35 @@
+/** Minutes in one calendar day. */
+export declare const MINUTES_PER_DAY = 1440;
+/** Weekdays (0 = Sunday) `SchedulerBusinessHours.days` defaults to. */
+export declare const DEFAULT_BUSINESS_DAYS: readonly number[];
+/** Parses `'HH:mm'` (two-digit hours, `'24:00'` allowed) into minutes of day. */
+export declare function parseTime(value: string): number;
+/**
+ * Rounds to the nearest multiple of `snap`. A non-positive `snap` means "no snapping", which still rounds to a
+ * whole minute: layout minutes are integers (written back through `fromLayout`, which takes whole minutes).
+ */
+export declare function snapMinutes(minutes: number, snap: number): number;
+/** Clamps into `[min, max]`. */
+export declare function clampMinutes(minutes: number, min: number, max: number): number;
+/**
+ * What the caller does with the minutes `minutesFromOffset` returns.
+ *
+ * - `'end'` — an edge. `maxMinutes` is legal: an event may end at the window's close, midnight included.
+ * - `'start'` — the start of a slot or of a dropped event. `maxMinutes` is **not** legal there: no slot starts at
+ *   the window's close, and a start of `MINUTES_PER_DAY` rolls onto the next day. The ceiling drops one snap step
+ *   below `maxMinutes`.
+ */
+export type SchedulerOffsetBound = "start" | "end";
+/**
+ * Maps a block offset inside a time column to snapped minutes of day. `offsetPx` is measured from the column's
+ * block-start edge; the column spans `[minMinutes, maxMinutes)` over `heightPx`.
+ *
+ * Snapping is relative to `minMinutes`, not to midnight, so an unaligned window (`08:15`–`18:15`) still snaps onto
+ * its own slot boundaries. Aligned windows are unaffected.
+ */
+export declare function minutesFromOffset(offsetPx: number, heightPx: number, minMinutes: number, maxMinutes: number, snap: number, bound?: SchedulerOffsetBound): number;
+/**
+ * Number of slot rows needed to cover `[minMinutes, maxMinutes)`. Throws on a non-positive `slotDuration`: the
+ * caller renders one row per slot, and a zero or negative duration makes that count infinite.
+ */
+export declare function slotCount(minMinutes: number, maxMinutes: number, slotDuration: number): number;

package/scheduler/time.js

@@ -0,0 +1,56 @@
+// Ported from @malva-ui/scheduler (src/lib/layout/scheduler-time.ts), MIT, © 2026 Malva UI.
+// Rivet:
+// - `MlvSchedulerOffsetBound` → `SchedulerOffsetBound`; everything else 1:1 (names, throw texts, rounding rules).
+// - Pure and server-safe: no DOM, no date objects (minutes of day only).
+/** Minutes in one calendar day. */
+export const MINUTES_PER_DAY = 1440;
+/** Weekdays (0 = Sunday) `SchedulerBusinessHours.days` defaults to. */
+export const DEFAULT_BUSINESS_DAYS = [1, 2, 3, 4, 5];
+const TIME_PATTERN = /^([01]\d|2[0-4]):([0-5]\d)$/;
+/** Parses `'HH:mm'` (two-digit hours, `'24:00'` allowed) into minutes of day. */
+export function parseTime(value) {
+    const match = TIME_PATTERN.exec(value);
+    if (!match)
+        throw new Error(`Invalid time "${value}". Expected "HH:mm" between 00:00 and 24:00.`);
+    const minutes = Number(match[1]) * 60 + Number(match[2]);
+    if (minutes > MINUTES_PER_DAY)
+        throw new Error(`Invalid time "${value}". Expected "HH:mm" between 00:00 and 24:00.`);
+    return minutes;
+}
+/**
+ * Rounds to the nearest multiple of `snap`. A non-positive `snap` means "no snapping", which still rounds to a
+ * whole minute: layout minutes are integers (written back through `fromLayout`, which takes whole minutes).
+ */
+export function snapMinutes(minutes, snap) {
+    if (snap <= 0)
+        return Math.round(minutes);
+    return Math.round(minutes / snap) * snap;
+}
+/** Clamps into `[min, max]`. */
+export function clampMinutes(minutes, min, max) {
+    return Math.min(max, Math.max(min, minutes));
+}
+/**
+ * Maps a block offset inside a time column to snapped minutes of day. `offsetPx` is measured from the column's
+ * block-start edge; the column spans `[minMinutes, maxMinutes)` over `heightPx`.
+ *
+ * Snapping is relative to `minMinutes`, not to midnight, so an unaligned window (`08:15`–`18:15`) still snaps onto
+ * its own slot boundaries. Aligned windows are unaffected.
+ */
+export function minutesFromOffset(offsetPx, heightPx, minMinutes, maxMinutes, snap, bound = "end") {
+    if (heightPx <= 0)
+        return minMinutes;
+    const raw = (offsetPx / heightPx) * (maxMinutes - minMinutes);
+    const step = snap > 0 ? snap : 1;
+    const ceiling = bound === "start" ? Math.max(minMinutes, maxMinutes - step) : maxMinutes;
+    return clampMinutes(minMinutes + snapMinutes(raw, snap), minMinutes, ceiling);
+}
+/**
+ * Number of slot rows needed to cover `[minMinutes, maxMinutes)`. Throws on a non-positive `slotDuration`: the
+ * caller renders one row per slot, and a zero or negative duration makes that count infinite.
+ */
+export function slotCount(minMinutes, maxMinutes, slotDuration) {
+    if (!(slotDuration > 0))
+        throw new Error(`Invalid slotDuration ${slotDuration}. Expected positive minutes.`);
+    return Math.max(1, Math.ceil((maxMinutes - minMinutes) / slotDuration));
+}

package/scheduler/toolbar.d.ts

@@ -0,0 +1,43 @@
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import type { SchedulerView, SchedulerVisibleRange } from "./layout.js";
+import type { SchedulerDate } from "./dates.js";
+/** What `renderHeader` receives (malva `MlvSchedulerHeaderApi` + `goTo`): accessors and actions. */
+export interface SchedulerHeaderApi {
+    /** Localized title of the rendered period ("September 2026", "Aug 31 – Sep 6, 2026", the day label). */
+    readonly title: () => string;
+    /** The active view. */
+    readonly view: () => SchedulerView;
+    /** The rendered period (dates in the anchor's form). */
+    readonly range: () => SchedulerVisibleRange;
+    /** One period forward. */
+    readonly next: () => void;
+    /** One period back. */
+    readonly previous: () => void;
+    /** Jumps to today. */
+    readonly today: () => void;
+    /** Switches the view. */
+    readonly setView: (view: SchedulerView) => void;
+    /** Jumps to the period containing `date`. */
+    readonly goTo: (date: SchedulerDate) => void;
+}
+/** `renderHeader` (read once at mount): replaces the default toolbar. */
+export type SchedulerRenderHeader = (api: SchedulerHeaderApi) => Content;
+/** Labels of the default toolbar (translated by the root). */
+export interface SchedulerToolbarLabels {
+    readonly previous: () => string;
+    readonly next: () => string;
+    readonly today: () => string;
+    readonly viewSwitch: () => string;
+    readonly month: () => string;
+    readonly week: () => string;
+    readonly day: () => string;
+}
+/**
+ * The default toolbar (malva `.mlv-scheduler__toolbar`): `div.rv-SchedulerToolbar` > `.rv-SchedulerToolbar-nav`
+ * (previous, next, today) + `h2.rv-SchedulerToolbar-title` + `.rv-SchedulerToolbar-views` (radio group of the three
+ * views). DOM order and labels stay the same in RTL (mirroring is CSS).
+ */
+export declare function SchedulerToolbar(props: {
+    api: SchedulerHeaderApi;
+    labels: SchedulerToolbarLabels;
+}): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/scheduler/toolbar.jsx

@@ -0,0 +1,38 @@
+import { Button } from "../button/index.jsx";
+import { ToggleButton } from "../toggle-button/index.jsx";
+import { ToggleButtonGroup } from "../toggle-button-group/index.jsx";
+const VIEWS = ["month", "week", "day"];
+/**
+ * The default toolbar (malva `.mlv-scheduler__toolbar`): `div.rv-SchedulerToolbar` > `.rv-SchedulerToolbar-nav`
+ * (previous, next, today) + `h2.rv-SchedulerToolbar-title` + `.rv-SchedulerToolbar-views` (radio group of the three
+ * views). DOM order and labels stay the same in RTL (mirroring is CSS).
+ */
+export function SchedulerToolbar(props) {
+    const api = props.api;
+    const labels = props.labels;
+    return (<div class="rv-SchedulerToolbar">
+      <div class="rv-SchedulerToolbar-nav">
+        <Button class="rv-SchedulerToolbar-previous" aria-label={labels.previous()} onPress={() => api.previous()}/>
+        <Button class="rv-SchedulerToolbar-next" aria-label={labels.next()} onPress={() => api.next()}/>
+        <Button class="rv-SchedulerToolbar-today" onPress={() => api.today()}>
+          {labels.today()}
+        </Button>
+      </div>
+      <h2 class="rv-SchedulerToolbar-title">{api.title()}</h2>
+      <ToggleButtonGroup class="rv-SchedulerToolbar-views" aria-label={labels.viewSwitch()} selectionMode="single" disallowEmptySelection selectedKeys={() => [api.view()]} onSelectionChange={(keys) => {
+            const next = [...keys][0];
+            if (next && VIEWS.includes(next))
+                api.setView(next);
+        }}>
+        <ToggleButton id="month" class="rv-SchedulerToolbar-view">
+          {labels.month()}
+        </ToggleButton>
+        <ToggleButton id="week" class="rv-SchedulerToolbar-view">
+          {labels.week()}
+        </ToggleButton>
+        <ToggleButton id="day" class="rv-SchedulerToolbar-view">
+          {labels.day()}
+        </ToggleButton>
+      </ToggleButtonGroup>
+    </div>);
+}

package/scroll-area/dom.d.ts

@@ -0,0 +1,11 @@
+/** Hides the native scrollbars cross-browser and enables momentum scroll on touch devices (Radix, attribute renamed). */
+export declare const VIEWPORT_STYLE = "[data-rv-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-rv-scroll-area-viewport]::-webkit-scrollbar{display:none}";
+/** Inserts the viewport stylesheet into `document.head` once (`nonce`: CSP nonce of the `<style>`). */
+export declare function insertViewportStyle(nonce: string | undefined): void;
+/** A rAF loop calling `handler` whenever the scroll position changed (no scroll-linked effects). Returns the stop function. */
+export declare function addUnlinkedScrollListener(node: HTMLElement, handler: () => void): () => void;
+/**
+ * Radix `useResizeObserver`: `onResize` once per frame while `element` resizes (a rAF per notification avoids the
+ * benign "ResizeObserver loop completed with undelivered notifications" error). Returns the stop function.
+ */
+export declare function observeResize(element: Element | null | undefined, onResize: () => void): () => void;

package/scroll-area/dom.js

@@ -0,0 +1,55 @@
+// Ported from @radix-ui/react-scroll-area 1.3.0 (src/scroll-area.tsx `ScrollAreaViewportStyle`, `addUnlinkedScrollListener`,
+// `useResizeObserver`), MIT, © 2022 WorkOS.
+// Browser-only helpers of `index.tsx` (`.ts`: never server-rewritten; called from handlers / `clientEffect`s only).
+// - `insertViewportStyle`: the declarations are inline on the Viewport (`HIDE_NATIVE_SCROLLBAR` in `index.tsx`: SSR + CSP safe); this
+//   nonce'd stylesheet (one per document, client only — Radix renders a `<style>` next to every viewport) carries the
+//   rule inline styles cannot express: `::-webkit-scrollbar` (WebKit without `scrollbar-width`).
+/** Hides the native scrollbars cross-browser and enables momentum scroll on touch devices (Radix, attribute renamed). */
+export const VIEWPORT_STYLE = "[data-rv-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-rv-scroll-area-viewport]::-webkit-scrollbar{display:none}";
+const styledDocuments = new WeakSet();
+/** Inserts the viewport stylesheet into `document.head` once (`nonce`: CSP nonce of the `<style>`). */
+export function insertViewportStyle(nonce) {
+    if (styledDocuments.has(document))
+        return;
+    styledDocuments.add(document);
+    const style = document.createElement("style");
+    if (nonce)
+        style.setAttribute("nonce", nonce);
+    style.setAttribute("data-rv-scroll-area-style", "");
+    style.textContent = VIEWPORT_STYLE;
+    document.head.appendChild(style);
+}
+/** A rAF loop calling `handler` whenever the scroll position changed (no scroll-linked effects). Returns the stop function. */
+export function addUnlinkedScrollListener(node, handler) {
+    let prevPosition = { left: node.scrollLeft, top: node.scrollTop };
+    let rAF = 0;
+    const loop = () => {
+        const position = { left: node.scrollLeft, top: node.scrollTop };
+        const isHorizontalScroll = prevPosition.left !== position.left;
+        const isVerticalScroll = prevPosition.top !== position.top;
+        if (isHorizontalScroll || isVerticalScroll)
+            handler();
+        prevPosition = position;
+        rAF = window.requestAnimationFrame(loop);
+    };
+    loop();
+    return () => window.cancelAnimationFrame(rAF);
+}
+/**
+ * Radix `useResizeObserver`: `onResize` once per frame while `element` resizes (a rAF per notification avoids the
+ * benign "ResizeObserver loop completed with undelivered notifications" error). Returns the stop function.
+ */
+export function observeResize(element, onResize) {
+    if (!element)
+        return () => { };
+    let rAF = 0;
+    const resizeObserver = new ResizeObserver(() => {
+        cancelAnimationFrame(rAF);
+        rAF = window.requestAnimationFrame(onResize);
+    });
+    resizeObserver.observe(element);
+    return () => {
+        window.cancelAnimationFrame(rAF);
+        resizeObserver.unobserve(element);
+    };
+}

package/scroll-area/index.d.ts

@@ -0,0 +1,96 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type Ref } from "@rivetjs/runtime/dom";
+import type { Content, JSX } from "@rivetjs/runtime/jsx-runtime";
+import { type RefValue } from "../slots/index.jsx";
+import type { DOMRenderProps } from "../utils/render.js";
+import type { StyleObject } from "../utils/types.js";
+export type ScrollAreaType = "auto" | "always" | "scroll" | "hover";
+export type ScrollAreaOrientation = "vertical" | "horizontal";
+export type ScrollAreaDirection = "ltr" | "rtl";
+/** Every `<div>` attribute (Radix `Primitive.div` props) except the ones a part types itself. */
+type DivAttributes = Omit<JSX.IntrinsicElements["div"], "children" | "style" | "ref" | "class" | "dir">;
+interface PartProps extends DivAttributes, DOMRenderProps<"div", undefined> {
+    class?: string;
+    style?: StyleObject;
+    ref?: RefValue<HTMLDivElement>;
+    children?: Content;
+}
+export interface ScrollAreaContextValue {
+    type: ScrollAreaType;
+    dir: ScrollAreaDirection;
+    scrollHideDelay: number;
+    scrollArea: Ref<HTMLDivElement>;
+    viewport: Ref<HTMLDivElement>;
+    content: Ref<HTMLDivElement>;
+    scrollbarX: Ref<HTMLDivElement>;
+    scrollbarY: Ref<HTMLDivElement>;
+    scrollbarXEnabled: Signal<boolean>;
+    scrollbarYEnabled: Signal<boolean>;
+    /** Whether the scrollbar element of an axis is mounted (Radix: `scrollbarX` / `scrollbarY` state non-null). */
+    scrollbarXMounted: Signal<boolean>;
+    scrollbarYMounted: Signal<boolean>;
+    cornerWidth: Signal<number>;
+    cornerHeight: Signal<number>;
+    /**
+     * Whether the parts run their client behaviour (Rivet). `false` on the server: a resumed page stays static — native
+     * scrolling, no scrollbar code — until the first `pointerenter` / `wheel` / `focusin` on the Root or `scroll` of the
+     * Viewport (`type="auto"` / `"always"`: also when the Root becomes visible, they need measuring); `true` from the
+     * start in a client render.
+     */
+    active: Signal<boolean>;
+}
+/** The Root's state (Radix `ScrollAreaProvider`). */
+export declare const ScrollAreaContext: import("@rivetjs/reactivity").Context<ScrollAreaContextValue | null>;
+export interface ScrollAreaProps extends PartProps {
+    /**
+     * Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in macOS control
+     * visibility of native scrollbars. `auto`: visible when content is overflowing on the corresponding orientation;
+     * `always`: always visible regardless of overflow; `scroll`: visible while scrolling; `hover`: visible while
+     * scrolling and while the pointer is over the scroll area. @default "hover"
+     */
+    type?: ScrollAreaType;
+    /** The reading direction of the scroll area (inherits from a `<Dir>` ancestor). @default "ltr" */
+    dir?: ScrollAreaDirection;
+    /** With `type="scroll"` / `"hover"`: the delay in milliseconds before the scrollbars hide after the user stops interacting. @default 600 */
+    scrollHideDelay?: number;
+}
+/** Augments native scroll functionality for custom, cross-browser styling (Radix `ScrollArea.Root`). */
+export declare function ScrollArea(props: ScrollAreaProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface ScrollAreaViewportProps extends PartProps {
+    /** Nonce of the `<style>` that hides the native scrollbars (CSP). */
+    nonce?: string;
+    /**
+     * Disables implicit rendering of an additional wrapper element that measures the content size. When `true`, a
+     * child `<ScrollAreaContent>` must be rendered as a direct child of the viewport.
+     */
+    disableImplicitContentElement?: boolean;
+}
+/** The viewport area of the scroll area: scrolls natively (Radix `ScrollArea.Viewport`). */
+export declare function ScrollAreaViewport(props: ScrollAreaViewportProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface ScrollAreaContentProps extends PartProps {
+}
+/**
+ * The measured content of the viewport (Radix `ScrollArea.Content`): rendered implicitly by the Viewport unless it
+ * has `disableImplicitContentElement`. `display: table` makes it match the size of its children on both axes, so a
+ * change of the scroll size re-measures the thumbs.
+ */
+export declare function ScrollAreaContent(props: ScrollAreaContentProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface ScrollAreaScrollbarProps extends PartProps {
+    /** @default "vertical" */
+    orientation?: ScrollAreaOrientation;
+    /** Mount the scrollbar whatever its visibility (animation libraries). */
+    forceMount?: true;
+}
+/** The vertical or horizontal scrollbar (Radix `ScrollArea.Scrollbar`); its visibility follows the Root's `type`. */
+export declare function ScrollAreaScrollbar(props: ScrollAreaScrollbarProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface ScrollAreaThumbProps extends PartProps {
+    /** Mount the thumb whatever the overflow (animation libraries). */
+    forceMount?: true;
+}
+/** The thumb of a scrollbar (Radix `ScrollArea.Thumb`): rendered while the content overflows the viewport. */
+export declare function ScrollAreaThumb(props: ScrollAreaThumbProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface ScrollAreaCornerProps extends PartProps {
+}
+/** The corner where both scrollbars meet (Radix `ScrollArea.Corner`): rendered while both are, except for `type="scroll"`. */
+export declare function ScrollAreaCorner(props: ScrollAreaCornerProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export { ScrollArea as Root, ScrollAreaViewport as Viewport, ScrollAreaContent as Content, ScrollAreaScrollbar as Scrollbar, ScrollAreaThumb as Thumb, ScrollAreaCorner as Corner, };