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

package/sidebar/sheet-motion.js

@@ -0,0 +1,170 @@
+// Rivet (no upstream: shadcn's Sheet has no swipe): swipe-to-dismiss of the mobile Sidebar sheet on the house motion,
+// `@rivetjs/cdk/motion` (embla-carousel 8.6.0 physics, MIT, © David Jerleke; user decision 2026-10-08: no hand-rolled
+// easing). The drag follows the pointer (Motion1D `hold` + `drag`, embla's drag friction); on release the flick force
+// (VelocityTracker, DragRelease snap boost) projects the throw: past half the sheet width → it animates off-screen
+// and `close()` runs at once (the overlay exit slides it on from the dragged offset), otherwise it settles back open. Open / close
+// from the trigger, Escape or the underlay stay the overlay's CSS transition (`data-entering` / `data-exiting`).
+// - Axis lock: a move must go 6 px, more sideways than vertical, before the drag starts (vertical moves scroll the
+//   content); the sheet sets `touch-action: pan-y` inline (behaviour-critical) so touch drags reach it.
+// - Native drag-and-drop (links, images) is prevented while a pointer is down on the sheet (it would cancel the pointer).
+// - A started drag cancels presses under the pointer (synthetic `pointercancel`, as a browser does for a pan) and
+//   swallows the click that follows.
+// - Units: distance towards the closed edge, 0 = open … sheet width = off-screen; rendered as an inline
+//   `transform: translateX(…)` (the overlay CSS animates `translate`, the two compose); the underlay fades with it.
+// - `prefers-reduced-motion: reduce` or the provider's `reduceMotion` → the release jumps (duration 0), as the motion
+//   docs prescribe.
+import { DragRelease, Motion1D, VelocityTracker } from "../motion/index.js";
+/** Pixels a pointer moves before a drag is decided (sideways → drag, vertical → scroll). */
+export const SHEET_DRAG_THRESHOLD = 6;
+const BASE_FRICTION = 0.68;
+/**
+ * Attaches swipe-to-dismiss motion to the open mobile sheet element; returns a cleanup. Called by `Sidebar` from a
+ * client effect while the sheet is open.
+ */
+export function sidebarSheetMotion(sheet, options) {
+    const { side, close, reduceMotion } = options;
+    const view = sheet.ownerDocument.defaultView;
+    // Closing direction in screen x: left sheet closes to the left.
+    const sign = side === "left" ? -1 : 1;
+    const backdrop = sheet.parentElement && sheet.parentElement !== sheet.ownerDocument.body ? sheet.parentElement : null;
+    const tracker = VelocityTracker();
+    const release = DragRelease(false, BASE_FRICTION);
+    let width = 0;
+    let dismissing = false;
+    const render = (value) => {
+        sheet.style.transform = value ? `translateX(${sign * value}px)` : "";
+        if (backdrop && width)
+            backdrop.style.opacity = value ? String(Math.max(0, 1 - value / width)) : "";
+    };
+    const motion = Motion1D({ value: 0, friction: BASE_FRICTION, render, onSettle: () => reset() });
+    const reset = () => {
+        sheet.style.transform = "";
+        sheet.style.transition = "";
+        if (backdrop)
+            ((backdrop.style.opacity = ""), (backdrop.style.transition = ""));
+    };
+    let pointer = null;
+    let dragging = false;
+    let cancelling = false;
+    const point = (event) => sign * event.clientX;
+    const clamp = () => {
+        const target = motion.target.get();
+        if (target < 0)
+            motion.target.set(0);
+        else if (target > width)
+            motion.target.set(width);
+    };
+    const down = (event) => {
+        if (pointer || dismissing || (event.pointerType === "mouse" && event.button !== 0))
+            return;
+        pointer = { id: event.pointerId, x: event.clientX, y: event.clientY, target: event.target, mouse: event.pointerType === "mouse" };
+        dragging = false;
+    };
+    const move = (event) => {
+        if (!pointer || event.pointerId !== pointer.id)
+            return;
+        if (!dragging) {
+            const dx = event.clientX - pointer.x, dy = event.clientY - pointer.y;
+            if (Math.abs(dx) < SHEET_DRAG_THRESHOLD && Math.abs(dy) < SHEET_DRAG_THRESHOLD)
+                return;
+            if (Math.abs(dy) >= Math.abs(dx))
+                return void (pointer = null);
+            dragging = true;
+            width = sheet.getBoundingClientRect().width;
+            sheet.style.transition = "none";
+            if (backdrop)
+                backdrop.style.transition = "none";
+            try {
+                sheet.setPointerCapture(event.pointerId);
+            }
+            catch {
+                // Synthetic pointers have no capture.
+            }
+            // Cancel presses under the pointer (a browser does the same when it starts a pan); our own window
+            // `pointercancel` listener ignores this synthetic one (`cancelling`).
+            cancelling = true;
+            try {
+                pointer.target?.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true, pointerId: event.pointerId, pointerType: event.pointerType }));
+            }
+            finally {
+                cancelling = false;
+            }
+            view.addEventListener("click", swallow, { capture: true, once: true });
+            tracker.pointerDown(sign * pointer.x, event.timeStamp);
+            motion.hold(true);
+        }
+        event.preventDefault();
+        motion.drag(tracker.pointerMove(point(event), event.timeStamp));
+        clamp();
+    };
+    const up = (event) => {
+        if (cancelling || !pointer || event.pointerId !== pointer.id)
+            return;
+        const mouse = pointer.mouse;
+        pointer = null;
+        if (!dragging)
+            return;
+        dragging = false;
+        // Drop the click swallower if no click follows (pointerup outside the start element).
+        view.setTimeout(() => view.removeEventListener("click", swallow, { capture: true }), 0);
+        const rawForce = event.type === "pointercancel" ? 0 : tracker.pointerUp(event.timeStamp) * release.forceBoost(mouse);
+        const current = motion.target.get();
+        dismissing = current + rawForce > width / 2;
+        motion.hold(false);
+        if (dismissing)
+            return dismiss(current);
+        if (reduceMotion?.() || view.matchMedia?.("(prefers-reduced-motion: reduce)").matches)
+            return motion.to(0, true);
+        const { duration, friction } = release.settle(rawForce, -current);
+        motion.scrollBody.useDuration(duration).useFriction(friction);
+        motion.target.set(0);
+        motion.animation.start();
+    };
+    // Dismiss = close right away (ui Drawer's rule): the sheet keeps its inline offset and the overlay's exit
+    // (`data-exiting` animation / transition on `translate`) slides it on from there; the underlay fades from its
+    // dragged opacity (a script animation, above the theme's CSS fade). Settling the spring first left the underlay
+    // blocking the page for ~1.5 s of an invisible tail.
+    const dismiss = (current) => {
+        motion.stop();
+        render(current);
+        sheet.style.transition = "";
+        if (backdrop) {
+            backdrop.style.transition = "";
+            const from = backdrop.style.opacity || "1";
+            backdrop.style.opacity = "0";
+            if (!(reduceMotion?.() || view.matchMedia?.("(prefers-reduced-motion: reduce)").matches))
+                backdrop.animate?.([{ opacity: from }, { opacity: 0 }], { duration: 200, easing: "ease-in" });
+        }
+        close();
+    };
+    // A mouse drag that starts on a link (menu buttons with `href`) or an image would become a native drag-and-drop: the
+    // browser fires `pointercancel` and stops sending moves. No native drag inside the sheet while a pointer is down.
+    const noNativeDrag = (event) => {
+        if (pointer)
+            event.preventDefault();
+    };
+    const swallow = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    const touchAction = sheet.style.touchAction;
+    sheet.style.touchAction = "pan-y";
+    sheet.addEventListener("pointerdown", down);
+    sheet.addEventListener("dragstart", noNativeDrag);
+    view.addEventListener("pointermove", move, { passive: false });
+    view.addEventListener("pointerup", up);
+    view.addEventListener("pointercancel", up);
+    return () => {
+        motion.stop();
+        sheet.removeEventListener("pointerdown", down);
+        sheet.removeEventListener("dragstart", noNativeDrag);
+        view.removeEventListener("pointermove", move);
+        view.removeEventListener("pointerup", up);
+        view.removeEventListener("pointercancel", up);
+        view.removeEventListener("click", swallow, { capture: true });
+        sheet.style.touchAction = touchAction;
+        // A swiped-away sheet keeps its offset while the overlay exit unmounts it (no jump back on screen).
+        if (!dismissing)
+            reset();
+    };
+}

package/sidebar/state.d.ts

@@ -0,0 +1,126 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type ControlledState } from "../interactions/controllable.js";
+export declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export declare const SIDEBAR_COOKIE_MAX_AGE: number;
+export declare const SIDEBAR_WIDTH = "16rem";
+export declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+export declare const SIDEBAR_WIDTH_ICON = "3rem";
+export declare const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+/** Default `toggleShortcut`: Cmd+B / Ctrl+B (upstream's shortcut; `mod` = Cmd or Ctrl). */
+export declare const SIDEBAR_TOGGLE_SHORTCUT = "mod+b";
+/** `use-mobile.ts`: viewports narrower than this are mobile (the sidebar becomes a sheet). */
+export declare const MOBILE_BREAKPOINT = 768;
+/** The media query behind `isMobile` (`(max-width: 767px)`). */
+export declare const MOBILE_QUERY = "(max-width: 767px)";
+export interface SidebarStateProps {
+    /** Default open state of the sidebar (uncontrolled). @default true */
+    defaultOpen?: boolean;
+    /** Open state of the sidebar (controlled): a plain value, a two-way Signal, or an accessor. */
+    open?: boolean | Signal<boolean> | (() => boolean);
+    /** Called when the open state changes (resumed pages: an inline arrow or a local function). */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Rivet: the toggle shortcut — modifiers `mod` (Cmd or Ctrl), `cmd` / `meta`, `ctrl`, `shift`, `alt` and one key,
+     * joined with `+` (`"mod+b"`, `"mod+shift+s"`, `"alt+\\"`); `false` / `null` disables it. @default "mod+b"
+     */
+    toggleShortcut?: string | false | null;
+    /** Rivet: turns off the sidebar's animations (sheet swipe, sub menus, pages), on top of `prefers-reduced-motion`. @default false */
+    reduceMotion?: boolean;
+    /**
+     * Rivet: close the mobile sheet when a menu button / sub button is pressed (groups, menus and items override it).
+     * Off by default: upstream keeps the sheet open on a link press (`@rivetjs/ui` turns it on). @default false
+     */
+    closeMobileOnAction?: boolean;
+    /** Rivet: default `side` of the `Sidebar`s inside (their own prop wins). @default "left" */
+    side?: "left" | "right";
+    /** Rivet: default `variant` of the `Sidebar`s inside (their own prop wins). @default "sidebar" */
+    variant?: "sidebar" | "floating" | "inset";
+    /** Rivet: default `collapsible` of the `Sidebar`s inside (their own prop wins; shadcn default kept). @default "offcanvas" */
+    collapsible?: "offcanvas" | "icon" | "none";
+}
+/** Sidebar state (serializable). Read the signals in bindings; change them through the functions below. */
+export interface SidebarState {
+    /** The shown open state (desktop). */
+    readonly open: Signal<boolean>;
+    /** @internal controlled-state record behind `open`. */
+    readonly control: ControlledState<boolean>;
+    /** Whether the mobile sheet is open. */
+    readonly openMobile: Signal<boolean>;
+    /** Whether the viewport is mobile (`< MOBILE_BREAKPOINT`); `false` on the server and before the first client check. */
+    readonly isMobile: Signal<boolean>;
+    /** The toggle shortcut (`toggleShortcut`), `null` when disabled. */
+    readonly shortcut: string | null;
+    /** `reduceMotion`. */
+    readonly reduceMotion: boolean;
+    /** `closeMobileOnAction` of the provider. */
+    readonly closeMobileOnAction: boolean;
+    /** Provider defaults for `Sidebar` (`undefined`: the Sidebar default). */
+    readonly side: "left" | "right" | undefined;
+    readonly variant: "sidebar" | "floating" | "inset" | undefined;
+    readonly collapsible: "offcanvas" | "icon" | "none" | undefined;
+}
+/** Creates the sidebar state (region state: a re-created region of a resumed page keeps it). */
+export declare function createSidebarState(props?: SidebarStateProps): SidebarState;
+/** `"expanded"` / `"collapsed"` (upstream `state`; `data-state`). */
+export declare const sidebarStateName: (state: SidebarState) => "expanded" | "collapsed";
+/** Writes the persisted state cookie (upstream: in `setOpen`). */
+export declare function writeSidebarCookie(open: boolean): void;
+/** Upstream `setOpen`: a value or an updater; calls `onOpenChange` (controlled) or sets the state, then writes the cookie. */
+export declare function setSidebarOpen(state: SidebarState, value: boolean | ((open: boolean) => boolean)): void;
+/** Upstream `setOpenMobile`. */
+export declare function setSidebarOpenMobile(state: SidebarState, value: boolean | ((open: boolean) => boolean)): void;
+/** Upstream `toggleSidebar`: the mobile sheet on mobile, else the desktop sidebar (re-reads the viewport first). */
+export declare function toggleSidebar(state: SidebarState): void;
+/** A parsed toggle shortcut (`parseSidebarShortcut`). */
+export interface SidebarShortcut {
+    /** The key, lower case (`"b"`, `"\\"`, `"enter"`). */
+    key: string;
+    /** `mod`: Cmd or Ctrl (either one, as upstream's Cmd+B / Ctrl+B). */
+    mod: boolean;
+    meta: boolean;
+    ctrl: boolean;
+    shift: boolean;
+    alt: boolean;
+}
+/**
+ * Rivet: parses a shortcut string (`"mod+b"`, `"mod+shift+s"`, `"ctrl+alt+k"`; case-insensitive, `+` separated, the
+ * last part is the key; a lone `+` key is written `"mod++"`). `null` for an empty / modifier-only string.
+ */
+export declare function parseSidebarShortcut(shortcut: string): SidebarShortcut | null;
+/**
+ * Rivet: whether `event` is the shortcut. Shift / Alt must match exactly; `mod` takes Cmd or Ctrl, explicit `cmd` /
+ * `ctrl` require that key (and no other Cmd / Ctrl than the ones listed). The key compares case-insensitively with
+ * `event.key`, or with the physical `event.code` for letters / digits (Alt and Shift change `key` on some layouts).
+ */
+export declare function matchesSidebarShortcut(event: KeyboardEvent, spec: SidebarShortcut): boolean;
+/**
+ * Upstream window `keydown` listener: the toggle shortcut (default Cmd+B / Ctrl+B) toggles the sidebar. Called by the
+ * provider's delegated `keydown` (works on a cold resumed page) and by its window listener (attached once the runtime
+ * runs); an event is handled once. `toggleShortcut={false}` turns it off.
+ */
+export declare function sidebarShortcutKeyDown(event: KeyboardEvent, state: SidebarState): void;
+/** Rivet: whether sidebar animations should be skipped (`reduceMotion`, or the user's `prefers-reduced-motion`). */
+export declare function sidebarReducedMotion(reduceMotion: boolean | undefined): boolean;
+/** Rivet `closeMobileOnAction`: closes the mobile sheet after a menu action when it is open. */
+export declare function closeSidebarMobileOnAction(state: SidebarState, close: boolean | undefined): void;
+/** Whether the viewport is mobile right now (`< MOBILE_BREAKPOINT`); `false` on the server. */
+export declare function sidebarViewportIsMobile(): boolean;
+/** `use-mobile.ts` `onChange`: re-reads the viewport width (no write when unchanged). */
+export declare function updateSidebarIsMobile(state: SidebarState): void;
+/**
+ * Rivet: the persisted open state for SSR. Pass a cookie header (`request.headers.get("cookie")`), a cookie map
+ * (`RequestEvent.cookies` of `@rivetjs/router`) or the cookie value; `undefined` when absent / unparsable.
+ * Use: `defaultOpen={sidebarCookieOpen(cookies) ?? true}`.
+ */
+export declare function sidebarCookieOpen(source: string | {
+    get(name: string): string | undefined;
+} | null | undefined): boolean | undefined;
+/** The sidebar state of the nearest SidebarProvider (serializable). */
+export declare const SidebarContext: import("@rivetjs/reactivity").Context<SidebarState | null>;
+/** Rivet: options a SidebarGroup / SidebarMenu passes down (`closeMobileOnAction`, `reduceMotion`; plain data). */
+export interface SidebarMenuOptions {
+    closeMobileOnAction?: boolean;
+    reduceMotion?: boolean;
+}
+/** Rivet: the nearest group / menu options (`rv-sidebar-options`). */
+export declare const SidebarMenuOptionsContext: import("@rivetjs/reactivity").Context<SidebarMenuOptions | null>;

package/sidebar/state.js

@@ -0,0 +1,204 @@
+// Ported from shadcn/ui Sidebar (apps/v4/registry/new-york-v4/ui/sidebar.tsx `SidebarProvider` state +
+// apps/v4/registry/new-york-v4/hooks/use-mobile.ts; React Aria base apps/v4/registry/bases/aria/ui/sidebar.tsx),
+// shadcn/ui 4.21.4, MIT, © 2023 shadcn.
+// Rivet:
+// - React state → serializable state (signals + plain data, `controllable` for `open`): the free functions
+//   (`setSidebarOpen`, `toggleSidebar`, …) take the state first, so handlers / shortcuts resume.
+// - `open` accepts a plain value, a two-way Signal, or an accessor (cdk `controllable`); `onOpenChange` fires on
+//   every change, the cookie is written on every `setSidebarOpen` (upstream `setOpen`).
+// - `useIsMobile` → `isMobile` signal, `false` on the server; nothing runs at load (resumed pages stay cold):
+//   it is re-read on every toggle and by the media listener once the runtime runs (`MOBILE_BREAKPOINT` 768, as
+//   upstream). The mobile / desktop split before that is CSS (desktop root hidden below 768 px).
+// - `sidebarCookieOpen` (Rivet): reads the persisted `sidebar_state` cookie for SSR (`defaultOpen`), the hook
+//   point upstream documents for server components (`cookies().get("sidebar_state")`).
+// - Rivet extensions (feature set inspired by HeroUI Pro's public Sidebar docs; independent implementation):
+//   `toggleShortcut` (a `mod+b`-style string, `false` / `null` off; parsed at event time), `reduceMotion`,
+//   `closeMobileOnAction` — plain data in the region state.
+import { createContext, signal, untrack, _regionState } from "@rivetjs/reactivity";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+import { controllable, controlledValue, setControlledValue } from "../interactions/controllable.js";
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+/** Default `toggleShortcut`: Cmd+B / Ctrl+B (upstream's shortcut; `mod` = Cmd or Ctrl). */
+export const SIDEBAR_TOGGLE_SHORTCUT = "mod+b";
+/** `use-mobile.ts`: viewports narrower than this are mobile (the sidebar becomes a sheet). */
+export const MOBILE_BREAKPOINT = 768;
+/** The media query behind `isMobile` (`(max-width: 767px)`). */
+export const MOBILE_QUERY = `(max-width: ${MOBILE_BREAKPOINT - 1}px)`;
+/** Creates the sidebar state (region state: a re-created region of a resumed page keeps it). */
+export function createSidebarState(props = {}) {
+    return _regionState(() => {
+        const control = controllable(props.open, props.defaultOpen ?? true, props.onOpenChange);
+        const shortcut = props.toggleShortcut === undefined ? SIDEBAR_TOGGLE_SHORTCUT : props.toggleShortcut || null;
+        return {
+            open: control.value,
+            control,
+            openMobile: signal(false),
+            isMobile: signal(false),
+            shortcut,
+            reduceMotion: !!props.reduceMotion,
+            closeMobileOnAction: props.closeMobileOnAction ?? false,
+            side: props.side,
+            variant: props.variant,
+            collapsible: props.collapsible,
+        };
+    });
+}
+/** `"expanded"` / `"collapsed"` (upstream `state`; `data-state`). */
+export const sidebarStateName = (state) => (state.open() ? "expanded" : "collapsed");
+/** Writes the persisted state cookie (upstream: in `setOpen`). */
+export function writeSidebarCookie(open) {
+    if (typeof document === "undefined")
+        return;
+    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+}
+/** Upstream `setOpen`: a value or an updater; calls `onOpenChange` (controlled) or sets the state, then writes the cookie. */
+export function setSidebarOpen(state, value) {
+    untrack(() => {
+        const openState = typeof value === "function" ? value(controlledValue(state.control)) : value;
+        setControlledValue(state.control, openState);
+        writeSidebarCookie(openState);
+    });
+}
+/** Upstream `setOpenMobile`. */
+export function setSidebarOpenMobile(state, value) {
+    untrack(() => state.openMobile.set(typeof value === "function" ? value(state.openMobile()) : value));
+}
+/** Upstream `toggleSidebar`: the mobile sheet on mobile, else the desktop sidebar (re-reads the viewport first). */
+export function toggleSidebar(state) {
+    updateSidebarIsMobile(state);
+    if (untrack(state.isMobile))
+        setSidebarOpenMobile(state, (open) => !open);
+    else
+        setSidebarOpen(state, (open) => !open);
+}
+// Shortcut events already handled (the provider's delegated `keydown` + the window listener see the same event).
+const handledShortcuts = new WeakSet();
+const SHORTCUT_MODIFIERS = new Set(["mod", "cmd", "command", "meta", "ctrl", "control", "shift", "alt", "option"]);
+/**
+ * Rivet: parses a shortcut string (`"mod+b"`, `"mod+shift+s"`, `"ctrl+alt+k"`; case-insensitive, `+` separated, the
+ * last part is the key; a lone `+` key is written `"mod++"`). `null` for an empty / modifier-only string.
+ */
+export function parseSidebarShortcut(shortcut) {
+    const parts = shortcut.toLowerCase().trim().split("+");
+    // "mod++" → ["mod", "", ""]: the key is "+".
+    if (parts.length > 1 && parts[parts.length - 1] === "" && parts[parts.length - 2] === "")
+        parts.splice(-2, 2, "+");
+    const key = parts.pop()?.trim() ?? "";
+    if (!key || SHORTCUT_MODIFIERS.has(key))
+        return null;
+    const spec = { key, mod: false, meta: false, ctrl: false, shift: false, alt: false };
+    for (const raw of parts) {
+        const part = raw.trim();
+        if (part === "mod")
+            spec.mod = true;
+        else if (part === "cmd" || part === "command" || part === "meta")
+            spec.meta = true;
+        else if (part === "ctrl" || part === "control")
+            spec.ctrl = true;
+        else if (part === "shift")
+            spec.shift = true;
+        else if (part === "alt" || part === "option")
+            spec.alt = true;
+        else
+            return null;
+    }
+    return spec;
+}
+/**
+ * Rivet: whether `event` is the shortcut. Shift / Alt must match exactly; `mod` takes Cmd or Ctrl, explicit `cmd` /
+ * `ctrl` require that key (and no other Cmd / Ctrl than the ones listed). The key compares case-insensitively with
+ * `event.key`, or with the physical `event.code` for letters / digits (Alt and Shift change `key` on some layouts).
+ */
+export function matchesSidebarShortcut(event, spec) {
+    if (event.shiftKey !== spec.shift || event.altKey !== spec.alt)
+        return false;
+    if (spec.mod) {
+        if (!event.metaKey && !event.ctrlKey)
+            return false;
+        if (spec.meta && !event.metaKey)
+            return false;
+        if (spec.ctrl && !event.ctrlKey)
+            return false;
+    }
+    else if (event.metaKey !== spec.meta || event.ctrlKey !== spec.ctrl)
+        return false;
+    const key = (event.key ?? "").toLowerCase();
+    if (key === spec.key)
+        return true;
+    const code = event.code ?? "";
+    return spec.key.length === 1 && (code === "Key" + spec.key.toUpperCase() || code === "Digit" + spec.key);
+}
+/**
+ * Upstream window `keydown` listener: the toggle shortcut (default Cmd+B / Ctrl+B) toggles the sidebar. Called by the
+ * provider's delegated `keydown` (works on a cold resumed page) and by its window listener (attached once the runtime
+ * runs); an event is handled once. `toggleShortcut={false}` turns it off.
+ */
+export function sidebarShortcutKeyDown(event, state) {
+    if (handledShortcuts.has(event) || !state.shortcut)
+        return;
+    const spec = parseSidebarShortcut(state.shortcut);
+    if (spec && matchesSidebarShortcut(event, spec)) {
+        handledShortcuts.add(event);
+        event.preventDefault();
+        toggleSidebar(state);
+    }
+}
+/** Rivet: whether sidebar animations should be skipped (`reduceMotion`, or the user's `prefers-reduced-motion`). */
+export function sidebarReducedMotion(reduceMotion) {
+    if (reduceMotion)
+        return true;
+    return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+/** Rivet `closeMobileOnAction`: closes the mobile sheet after a menu action when it is open. */
+export function closeSidebarMobileOnAction(state, close) {
+    if ((close ?? state.closeMobileOnAction) && untrack(state.openMobile))
+        setSidebarOpenMobile(state, false);
+}
+/** Whether the viewport is mobile right now (`< MOBILE_BREAKPOINT`); `false` on the server. */
+export function sidebarViewportIsMobile() {
+    return typeof window !== "undefined" && window.innerWidth < MOBILE_BREAKPOINT;
+}
+/** `use-mobile.ts` `onChange`: re-reads the viewport width (no write when unchanged). */
+export function updateSidebarIsMobile(state) {
+    if (typeof window === "undefined")
+        return;
+    const mobile = sidebarViewportIsMobile();
+    if (untrack(state.isMobile) !== mobile)
+        state.isMobile.set(mobile);
+}
+/**
+ * Rivet: the persisted open state for SSR. Pass a cookie header (`request.headers.get("cookie")`), a cookie map
+ * (`RequestEvent.cookies` of `@rivetjs/router`) or the cookie value; `undefined` when absent / unparsable.
+ * Use: `defaultOpen={sidebarCookieOpen(cookies) ?? true}`.
+ */
+export function sidebarCookieOpen(source) {
+    if (source == null)
+        return undefined;
+    let value;
+    if (typeof source === "string") {
+        if (source === "true" || source === "false")
+            value = source;
+        else
+            for (const part of source.split(";")) {
+                const at = part.indexOf("=");
+                if (at > 0 && part.slice(0, at).trim() === SIDEBAR_COOKIE_NAME) {
+                    value = part.slice(at + 1).trim();
+                    break;
+                }
+            }
+    }
+    else
+        value = source.get(SIDEBAR_COOKIE_NAME);
+    return value === "true" ? true : value === "false" ? false : undefined;
+}
+// Contexts (here, not in index.tsx: ./pages.tsx reads them without index.tsx importing the pages code — a page without
+// SidebarPages fetches no pages chunk, and no extra chunk either).
+/** The sidebar state of the nearest SidebarProvider (serializable). */
+export const SidebarContext = resumableContext(createContext(null, { id: "rv-sidebar" }));
+/** Rivet: the nearest group / menu options (`rv-sidebar-options`). */
+export const SidebarMenuOptionsContext = resumableContext(createContext(null, { id: "rv-sidebar-options" }));

package/slider/behaviour.d.ts

@@ -0,0 +1,141 @@
+import type { MoveEndEvent, MoveMoveEvent, MoveStartEvent } from "../interactions/move.jsx";
+import { type MaybeAccessor } from "../interactions/utils.js";
+import { type Orientation, type SliderProps, type SliderState } from "./state.js";
+type Bag = Record<string, unknown>;
+export interface AriaSliderProps<T = number | number[]> extends SliderProps<T> {
+    id?: string;
+    /** The content of the visible label (RA `label`; truthy = a label renders). */
+    label?: unknown;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    /** Rivet: text direction (RA `useLocale().direction`). */
+    direction?: MaybeAccessor<"ltr" | "rtl" | undefined>;
+}
+export interface SliderAria {
+    /** Props for the label element. */
+    labelProps: Bag;
+    /** Props for the root element of the slider component; groups slider inputs. */
+    groupProps: Bag;
+    /** Props for the track element. */
+    trackProps: Bag;
+    /** Props for the output element, displaying the value of the slider thumbs. */
+    outputProps: Bag;
+}
+/** RA `sliderData` entry: the label id (thumb ids derive from it) and the slider's describedby / details. */
+export interface SliderData {
+    id: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+}
+export declare function getSliderThumbId(state: SliderState, index: number): string;
+/**
+ * Provides the behavior and accessibility implementation for a slider component representing one or
+ * more values (RA `useSlider`). The track element (handler `currentTarget`) provides the "length" of the
+ * track and accepts click and drag motions: the closest thumb follows them.
+ */
+export declare function sliderProps<T extends number | number[]>(props: AriaSliderProps<T>, state: SliderState): SliderAria;
+/** RA label `onClick`: Safari does not focus `<input type="range">` on a label click; focus the first thumb (focus ring shown). */
+export declare function sliderLabelClick(event: MouseEvent, state: SliderState): void;
+/** RA track `onMouseDown`. */
+export declare function sliderTrackMouseDown(e: MouseEvent, props: AriaSliderProps<any>, state: SliderState, track: Element): void;
+/** RA track `onPointerDown`. */
+export declare function sliderTrackPointerDown(e: PointerEvent, props: AriaSliderProps<any>, state: SliderState, track: Element): void;
+/** RA track `onTouchStart`. */
+export declare function sliderTrackTouchStart(e: TouchEvent, props: AriaSliderProps<any>, state: SliderState, track: Element): void;
+/** RA track useMove `onMoveStart`. */
+export declare function sliderTrackMoveStart(_e: MoveStartEvent, state: SliderState): void;
+/** RA track useMove `onMove`. */
+export declare function sliderTrackMove({ deltaX, deltaY }: MoveMoveEvent, props: AriaSliderProps<any>, state: SliderState, track: Element | null): void;
+/** RA track useMove `onMoveEnd`. */
+export declare function sliderTrackMoveEnd(_e: MoveEndEvent, state: SliderState): void;
+export interface AriaSliderThumbProps {
+    /**
+     * The orientation of the Slider.
+     *
+     * @deprecated - pass to the slider instead.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /** Whether the Thumb is disabled (a value, or an accessor that stays live). */
+    isDisabled?: MaybeAccessor<boolean | undefined>;
+    /**
+     * Index of the thumb within the slider.
+     *
+     * @default 0
+     */
+    index?: number;
+    /** @deprecated */
+    isRequired?: boolean;
+    /** @deprecated */
+    isInvalid?: boolean;
+    /** @deprecated */
+    validationState?: "valid" | "invalid";
+    /** The content of the thumb's visible label (truthy = a label renders). */
+    label?: unknown;
+    /** Whether the element should receive focus on render. */
+    autoFocus?: boolean;
+    name?: string;
+    form?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    "aria-errormessage"?: string;
+    onFocus?: (e: FocusEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onFocusChange?: (isFocused: boolean) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyUp?: (e: KeyboardEvent) => void;
+    /** Rivet: text direction (RA `useLocale().direction`). */
+    direction?: MaybeAccessor<"ltr" | "rtl" | undefined>;
+}
+export interface AriaSliderThumbOptions extends AriaSliderThumbProps {
+    /** The track element (RA `trackRef`). */
+    trackRef: () => Element | null | undefined;
+    /** The thumb's input element (RA `inputRef`); default: found by id. */
+    inputRef?: () => HTMLInputElement | null | undefined;
+}
+export interface SliderThumbAria {
+    /** Props for the root thumb element; handles the dragging motion. */
+    thumbProps: Bag;
+    /** Props for the visually hidden range input element. */
+    inputProps: Bag;
+    /** Props for the label element for this thumb (optional). */
+    labelProps: Bag;
+    /** Whether this thumb is currently being dragged. */
+    isDragging: () => boolean;
+    /** Whether the thumb is currently focused. */
+    isFocused: () => boolean;
+    /** Whether the thumb is disabled (at creation; `isSliderThumbDisabled(opts, state)` reads the current value). */
+    isDisabled: boolean;
+}
+/** Whether the thumb is disabled now (its own or the slider's `isDisabled`, live accessors read). */
+export declare const isSliderThumbDisabled: (opts: AriaSliderThumbOptions, state: SliderState) => boolean;
+/** Provides behavior and accessibility for a thumb of a slider component (RA `useSliderThumb`). */
+export declare function sliderThumbProps(opts: AriaSliderThumbOptions, state: SliderState): SliderThumbAria;
+/** keydown of the thumb (RA useKeyboard shortcuts PageUp / PageDown / Home / End; arrows go through useMove). */
+export declare function sliderThumbKeyDown(e: KeyboardEvent, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** RA thumb useMove `onMoveStart`. */
+export declare function sliderThumbMoveStart(_e: MoveStartEvent, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** RA thumb useMove `onMove` (pointer drag, or arrow keys with `pointerType: 'keyboard'`). */
+export declare function sliderThumbMove({ deltaX, deltaY, pointerType, shiftKey }: MoveMoveEvent, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** RA thumb useMove `onMoveEnd`. */
+export declare function sliderThumbMoveEnd(_e: MoveEndEvent, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** RA thumb `onMouseDown`. */
+export declare function sliderThumbMouseDown(e: MouseEvent, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** RA thumb `onPointerDown`. */
+export declare function sliderThumbPointerDown(e: PointerEvent, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** RA thumb `onTouchStart`. */
+export declare function sliderThumbTouchStart(e: TouchEvent, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** `change` / `input` of the range input: the browser moved the value (keyboard, assistive technology). */
+export declare function sliderThumbInputChange(e: Event, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** focus of the range input (RA useFocusable: `setFocusedThumb(index)` + user focus events). */
+export declare function sliderThumbFocus(e: FocusEvent, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** blur of the range input. */
+export declare function sliderThumbBlur(e: FocusEvent, opts: AriaSliderThumbOptions, state: SliderState): void;
+/** keydown / keyup of the range input (RA useFocusable → useKeyboard with the user's handlers). */
+export declare function sliderThumbInputKeyDown(e: KeyboardEvent, opts: AriaSliderThumbOptions, _state: SliderState): void;
+export declare function sliderThumbInputKeyUp(e: KeyboardEvent, opts: AriaSliderThumbOptions, _state: SliderState): void;
+export {};