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

package/sidebar/pages.d.ts

@@ -0,0 +1,71 @@
+import { type Signal } from "@rivetjs/reactivity";
+import type { Content } from "@rivetjs/runtime/jsx-runtime";
+import { type ControlledState } from "../interactions/controllable.js";
+import { type ClassNameOrFunction, type RefValue, type StyleObject } from "../slots/index.jsx";
+/** `SidebarPages` state (serializable). */
+export interface SidebarPagesState {
+    /** @internal controlled value (`value` / `defaultValue` / `onValueChange`). */
+    readonly control: ControlledState<string | undefined>;
+    /** @internal the first page rendered (active when neither `value` nor `defaultValue` is given). */
+    readonly first: Signal<string | undefined>;
+    /** `reduceMotion` resolved at render (pages → options → provider). */
+    readonly reduceMotion: boolean;
+    /** @internal the pages container element. */
+    readonly container: () => HTMLElement | null | undefined;
+}
+/** The `SidebarPages` in scope (`rv-sidebar-pages`). */
+export declare const SidebarPagesContext: import("@rivetjs/reactivity").Context<SidebarPagesState | null>;
+/** The active page value. */
+export declare const sidebarPagesValue: (state: SidebarPagesState) => string | undefined;
+/** Shows the page `value` (calls `onValueChange`; a plain controlled `value` only calls it). */
+export declare function setSidebarPage(state: SidebarPagesState, value: string): void;
+/** `useSidebarPages()`: the nearest `SidebarPages` (throws outside one). */
+export interface SidebarPagesContextValue {
+    /** The active page value. */
+    activeValue: () => string | undefined;
+    /** Shows a page (drill in / back). */
+    setActiveValue: (value: string) => void;
+    /** Index of the active page in DOM order (`-1` before the pages render in the browser / on the server). */
+    activeIndex: () => number;
+    /** Page values in DOM order (empty on the server). */
+    order: () => string[];
+}
+/** The page switcher of the nearest `SidebarPages`: accessors + setter (handlers resume). */
+export declare function useSidebarPages(): SidebarPagesContextValue;
+export interface SidebarPagesProps {
+    /** The active page (controlled): a value, a two-way Signal or an accessor. */
+    value?: string | Signal<string> | (() => string);
+    /** The page shown first (uncontrolled). @default the first page */
+    defaultValue?: string;
+    /** Called with the new page value on every switch. */
+    onValueChange?: (value: string) => void;
+    /** No slide animation (instant switch). @default inherited from the menu / group / provider */
+    reduceMotion?: boolean;
+    /** @default "rv-SidebarPages" */
+    class?: ClassNameOrFunction<{}>;
+    style?: StyleObject;
+    id?: string;
+    "aria-label"?: string;
+    children?: Content;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** Rivet: an animated page switcher inside the sidebar (drill-in / back); pages are `SidebarPage value`. */
+export declare function SidebarPages(props: SidebarPagesProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+export interface SidebarPageProps {
+    /** The page's value (`SidebarPages` `value`). */
+    value: string;
+    /** @default "rv-SidebarPage" */
+    class?: ClassNameOrFunction<{}>;
+    style?: StyleObject;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    children?: Content;
+}
+/** One page of `SidebarPages`; inactive pages are `hidden`, `inert` and `aria-hidden`. */
+export declare function SidebarPage(props: SidebarPageProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/**
+ * The page's `hidden` value (binding): static on the server / first read; on a change in the browser the leaving page
+ * stays visible while it slides out (the transition hides it), and the transition is scheduled.
+ */
+export declare function sidebarPageHidden(state: SidebarPagesState, value: string, pageRef: () => HTMLElement | null | undefined): true | undefined;

package/sidebar/pages.jsx

@@ -0,0 +1,177 @@
+// Rivet (no shadcn upstream; feature set inspired by HeroUI Pro's public Sidebar docs, independent implementation):
+// an animated page switcher inside the sidebar — `SidebarPages` (value / defaultValue / onValueChange) holds the active
+// page, `SidebarPage value` is one page. Drill-in / back navigation: a menu button sets the value
+// (`useSidebarPages().setActiveValue("settings")`).
+// - State = `controllable(value, defaultValue, onValueChange)` in `_regionState`; without `defaultValue` the first
+//   page rendered is active (`first`, set while the pages render, serialized with the region).
+// - Markup: `div[data-slot=sidebar-pages]` (inline `display: grid; overflow: hidden` — behaviour-critical: pages stack in
+//   one cell, the slide is clipped) > `div[data-slot=sidebar-page][data-value]` (inline `grid-area: 1 / 1`). Inactive
+//   pages: `hidden`, `inert`, `aria-hidden="true"`; the active one `data-active="true"`.
+// - Nothing runs at load: the page's `hidden` binding (re-run on a change) starts the transition in a microtask (once
+//   per container): the entering page slides in from the side of its order (DOM order of the pages; RTL flips), the
+//   leaving page slides out and gets `hidden` when the motion settles. Motion = `@rivetjs/cdk/motion` `Motion1D`
+//   (embla physics, the house motion); `reduceMotion` (pages → menu / group options → provider) or
+//   `prefers-reduced-motion` → instant switch. Focus inside the leaving page moves to the entering page's first
+//   focusable element.
+import { createContext, provide, signal, untrack, useContext, _regionState } from "@rivetjs/reactivity";
+import { ref as createRef } from "@rivetjs/runtime/dom";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+import { controllable, controlledValue, setControlledValue } from "../interactions/controllable.js";
+import { Motion1D } from "../motion/index.js";
+import { dataBool } from "../utils/data-attrs.jsx";
+import { mergeRefValues, renderProps } from "../slots/index.jsx";
+import { SidebarContext, SidebarMenuOptionsContext, sidebarReducedMotion } from "./state.js";
+const NONE = {};
+/** The `SidebarPages` in scope (`rv-sidebar-pages`). */
+export const SidebarPagesContext = resumableContext(createContext(null, { id: "rv-sidebar-pages" }));
+/** The active page value. */
+export const sidebarPagesValue = (state) => state.control.value() ?? state.first();
+/** Shows the page `value` (calls `onValueChange`; a plain controlled `value` only calls it). */
+export function setSidebarPage(state, value) {
+    untrack(() => {
+        if ((controlledValue(state.control) ?? state.first()) === value)
+            return;
+        setControlledValue(state.control, value);
+    });
+}
+/** The page switcher of the nearest `SidebarPages`: accessors + setter (handlers resume). */
+export function useSidebarPages() {
+    const state = useContext(SidebarPagesContext);
+    if (!state)
+        throw new Error("useSidebarPages must be used within SidebarPages.");
+    return {
+        activeValue: () => sidebarPagesValue(state),
+        setActiveValue: (value) => setSidebarPage(state, value),
+        activeIndex: () => sidebarPageOrder(state).indexOf(sidebarPagesValue(state) ?? ""),
+        order: () => sidebarPageOrder(state),
+    };
+}
+const pageElements = (container) => Array.from(container.children).filter((c) => c.getAttribute("data-slot") === "sidebar-page");
+function sidebarPageOrder(state) {
+    const container = untrack(state.container);
+    return container ? pageElements(container).map((p) => p.getAttribute("data-value") ?? "") : [];
+}
+/** Rivet: an animated page switcher inside the sidebar (drill-in / back); pages are `SidebarPage value`. */
+export function SidebarPages(props) {
+    const { value, defaultValue, onValueChange, reduceMotion, class: cls, style, id, children, ref } = props;
+    const sidebar = useContext(SidebarContext);
+    const inheritedReduce = useContext(SidebarMenuOptionsContext)?.reduceMotion;
+    const ariaLabel = props["aria-label"];
+    const reduce = reduceMotion ?? inheritedReduce ?? sidebar?.reduceMotion ?? false;
+    const state = _regionState(() => ({
+        control: controllable(value, defaultValue, onValueChange),
+        first: signal(undefined),
+        reduceMotion: reduce,
+        container: createRef(),
+    }));
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarPages" });
+    const refs = mergeRefValues(state.container, ref);
+    return (<div ref={refs} id={id} aria-label={ariaLabel} data-slot="sidebar-pages" data-sidebar="pages" data-reduce-motion={dataBool(reduce)} class={rp.class()} style={{ display: "grid", overflow: "hidden", ...style }}>
+      {provide(SidebarPagesContext, state, () => rp.children())}
+    </div>);
+}
+/** One page of `SidebarPages`; inactive pages are `hidden`, `inert` and `aria-hidden`. */
+export function SidebarPage(props) {
+    const state = useContext(SidebarPagesContext);
+    if (!state)
+        throw new Error("SidebarPage must be rendered inside SidebarPages.");
+    const { value, class: cls, style, id, children } = props;
+    const ariaLabel = props["aria-label"], ariaLabelledby = props["aria-labelledby"];
+    // No `value` / `defaultValue`: the first page rendered is the active one.
+    if (untrack(state.control.value) === undefined && untrack(state.first) === undefined)
+        state.first.set(value);
+    const pageRef = createRef();
+    const rp = renderProps({ class: cls, children, values: NONE, defaultClassName: "rv-SidebarPage" });
+    return (<div ref={pageRef} id={id} role="group" aria-label={ariaLabel} aria-labelledby={ariaLabelledby} data-slot="sidebar-page" data-sidebar="page" data-value={value} data-active={dataBool(sidebarPagesValue(state) === value)} class={rp.class()} style={{ "grid-area": "1 / 1", "min-inline-size": "0", ...style }} hidden={sidebarPageHidden(state, value, pageRef)} inert={sidebarPagesValue(state) === value ? undefined : true} aria-hidden={sidebarPagesValue(state) === value ? undefined : "true"}>
+      {rp.children()}
+    </div>);
+}
+// =================================================================================================
+// Transition
+// =================================================================================================
+// Last shown page per container (initialised from the DOM on the first change), scheduled containers, running motions.
+const shown = new WeakMap();
+const scheduled = new WeakSet();
+const running = new WeakMap();
+/**
+ * The page's `hidden` value (binding): static on the server / first read; on a change in the browser the leaving page
+ * stays visible while it slides out (the transition hides it), and the transition is scheduled.
+ */
+export function sidebarPageHidden(state, value, pageRef) {
+    const active = sidebarPagesValue(state) === value;
+    const page = untrack(pageRef);
+    const container = page?.parentElement;
+    if (!page || !container)
+        return active ? undefined : true;
+    if (!shown.has(container))
+        shown.set(container, pageElements(container)
+            .find((p) => !p.hasAttribute("hidden"))
+            ?.getAttribute("data-value") ?? undefined);
+    if (!scheduled.has(container)) {
+        scheduled.add(container);
+        queueMicrotask(() => {
+            scheduled.delete(container);
+            sidebarPagesTransition(container, state);
+        });
+    }
+    if (active)
+        return undefined;
+    // The page shown so far slides out first (the transition sets `hidden` when it settles).
+    return value === shown.get(container) && !page.hasAttribute("hidden") ? undefined : true;
+}
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/** Runs the page switch of `container`: slide (Motion1D) or an instant switch. */
+function sidebarPagesTransition(container, state) {
+    const now = untrack(() => sidebarPagesValue(state));
+    const previous = shown.get(container);
+    shown.set(container, now);
+    running.get(container)?.();
+    const pages = pageElements(container);
+    const enter = pages.find((p) => p.getAttribute("data-value") === now);
+    const leave = previous !== now ? pages.find((p) => p.getAttribute("data-value") === previous) : undefined;
+    for (const page of pages)
+        if (page !== enter && page !== leave && !page.hasAttribute("hidden"))
+            page.setAttribute("hidden", "");
+    if (!enter)
+        return leave?.setAttribute("hidden", "");
+    const doc = container.ownerDocument;
+    const hadFocus = !!leave && leave.contains(doc.activeElement);
+    enter.removeAttribute("hidden");
+    const moveFocus = () => hadFocus && (enter.querySelector(FOCUSABLE) ?? enter).focus({ preventScroll: true });
+    if (!leave)
+        return;
+    const width = container.getBoundingClientRect().width || enter.offsetWidth;
+    if (state.reduceMotion || sidebarReducedMotion(false) || width <= 0) {
+        leave.setAttribute("hidden", "");
+        moveFocus();
+        return;
+    }
+    const rtl = doc.defaultView?.getComputedStyle(container).direction === "rtl";
+    const dir = (pages.indexOf(enter) > pages.indexOf(leave) ? 1 : -1) * (rtl ? -1 : 1);
+    leave.style.pointerEvents = "none";
+    const render = (v) => {
+        // The sub-pixel tail of the settle is invisible: done within half a pixel.
+        if (width - v < 0.5)
+            return finish();
+        enter.style.transform = `translateX(${dir * (width - v)}px)`;
+        leave.style.transform = `translateX(${-dir * v}px)`;
+    };
+    let done = false;
+    const finish = () => {
+        if (done)
+            return;
+        done = true;
+        motion.stop();
+        running.delete(container);
+        enter.style.transform = "";
+        leave.style.transform = "";
+        leave.style.pointerEvents = "";
+        if (untrack(() => sidebarPagesValue(state)) !== leave.getAttribute("data-value"))
+            leave.setAttribute("hidden", "");
+    };
+    const motion = Motion1D({ value: 0, render, onSettle: finish });
+    running.set(container, finish);
+    render(0);
+    motion.to(width);
+    moveFocus();
+}

package/sidebar/resize.d.ts

@@ -0,0 +1,69 @@
+import { type Signal } from "@rivetjs/reactivity";
+import { type ControlledState } from "../interactions/controllable.js";
+import { type SidebarState } from "./state.js";
+/** A sidebar width: a number = px, a string = a CSS length (`"18rem"`, `"280px"`, `"20vw"`). */
+export type SidebarWidth = number | string;
+/** Default `minWidth` / `maxWidth` of a resizable Sidebar. */
+export declare const SIDEBAR_MIN_WIDTH = "12rem";
+export declare const SIDEBAR_MAX_WIDTH = "28rem";
+/** Default keyboard step (px; Shift: × 5). */
+export declare const SIDEBAR_RESIZE_STEP = 16;
+export interface SidebarResizeProps {
+    /**
+     * Width (controlled): a value, a two-way Signal or an accessor. `undefined` = the provider's `--sidebar-width`.
+     * A Signal follows every drag move; a plain value / accessor only calls `onWidthChange`.
+     */
+    width?: SidebarWidth | Signal<SidebarWidth | undefined> | (() => SidebarWidth | undefined);
+    /** Initial width (uncontrolled). @default the provider's `--sidebar-width` (16rem) */
+    defaultWidth?: SidebarWidth;
+    /** Called on every width change (each drag move, key, reset) with the width in px. */
+    onWidthChange?: (width: number) => void;
+    /** Called once a resize ends (pointer up, a key, double-click reset) with the width in px: persist here. */
+    onWidthChangeEnd?: (width: number) => void;
+    /** @default "12rem" */
+    minWidth?: SidebarWidth;
+    /** @default "28rem" */
+    maxWidth?: SidebarWidth;
+    /** Dragging below half of `minWidth` collapses the sidebar (`collapsible` mode); dragging back out re-opens it. @default true */
+    collapseBelowMin?: boolean;
+    /** Arrow key step in px (Shift: × 5). @default 16 */
+    resizeStep?: number;
+}
+/** Resize state of one Sidebar (serializable). */
+export interface SidebarResizeState {
+    /** The width; `undefined` = the provider's `--sidebar-width`. */
+    readonly control: ControlledState<SidebarWidth | undefined, number>;
+    readonly defaultWidth: SidebarWidth | undefined;
+    readonly min: SidebarWidth;
+    readonly max: SidebarWidth;
+    readonly collapseBelowMin: boolean;
+    readonly step: number;
+    readonly onWidthChangeEnd: ((width: number) => void) | undefined;
+}
+export declare function createSidebarResizeState(props: SidebarResizeProps): SidebarResizeState;
+/** The width as CSS (`undefined`: no override). */
+export declare const sidebarWidthCss: (width: SidebarWidth | undefined) => string | undefined;
+/**
+ * A length in px: numbers, `px`, `rem` (root font size; 16 on the server), `em` (font size of `el`), `vw` / `%` (of the
+ * viewport); `NaN` when unparsable.
+ */
+export declare function sidebarLengthPx(size: SidebarWidth, el?: Element | null): number;
+/** `aria-valuenow` (px, rounded): the set width, `undefined` while it is the provider's variable (filled in on focus / drag). */
+export declare function sidebarWidthNow(rs: SidebarResizeState): number | undefined;
+/** `aria-valuemin` / `aria-valuemax` (px, rounded; `undefined` when not computable on the server). */
+export declare function sidebarBoundPx(size: SidebarWidth): number | undefined;
+/** Handle `focus` / `pointerover`: fills in `aria-valuenow`. */
+export declare function sidebarResizeSync(event: Event, rs: SidebarResizeState): void;
+/** Handle `pointerdown`: starts a drag (primary button / touch / pen), pointer captured. */
+export declare function sidebarResizePointerDown(event: PointerEvent, s: SidebarState, rs: SidebarResizeState): void;
+/** Handle `pointermove`: resizes (clamped), collapses below half the minimum, re-opens above it. */
+export declare function sidebarResizePointerMove(event: PointerEvent, s: SidebarState, rs: SidebarResizeState): void;
+/** Handle `pointerup` / `pointercancel` / `lostpointercapture`: ends the drag (`onWidthChangeEnd` when it moved). */
+export declare function sidebarResizePointerUp(event: PointerEvent, rs: SidebarResizeState): void;
+/** Handle `dblclick`: back to `defaultWidth` (else the provider's `--sidebar-width`), opening a collapsed sidebar. */
+export declare function sidebarResizeReset(event: MouseEvent, s: SidebarState, rs: SidebarResizeState): void;
+/**
+ * Handle `keydown` (window splitter): Arrow Left / Right ± `resizeStep` px (Shift × 5; mirrored for a right sidebar and
+ * RTL), Home / End = min / max, Enter toggles collapse. A growing key on a collapsed sidebar opens it.
+ */
+export declare function sidebarResizeKeyDown(event: KeyboardEvent, s: SidebarState, rs: SidebarResizeState): void;

package/sidebar/resize.js

@@ -0,0 +1,237 @@
+// Rivet extension (no shadcn/ui counterpart: shadcn's SidebarRail only toggles): a drag-resizable Sidebar.
+// Behaviour of the WAI-ARIA window splitter (https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/) as in
+// `@rivetjs/cdk/resizable` (react-resizable-panels 4.14.3: pointer capture drag, arrows / Home / End / Enter, double-click
+// reset, collapse below the minimum), on the fixed shadcn panel: the width is the `--sidebar-width` CSS variable on the
+// Sidebar root (gap + container read it), not a flex panel of a Group (`libs/ui/CLAUDE.md` AppLayout ruling 2026-10-08).
+// - state = plain data in the region state (`controllable` width, bounds, the caller's handlers): handlers resume;
+//   per-drag data lives in a module WeakMap keyed by the handle (browser only, never serialized).
+// - dragging below half the minimum collapses the sidebar (`setSidebarOpen(false)`: `onOpenChange` + cookie; the
+//   `collapsible` mode picks offcanvas / icon) and dragging back out re-opens it; the open / close snap is the
+//   sidebar's own CSS collapse transition (200 ms ease-out-quad), off for the plain width changes of a drag
+//   (`data-resizing` on the root).
+import { untrack, _regionState } from "@rivetjs/reactivity";
+import { controllable, setControlledValue } from "../interactions/controllable.js";
+import { setSidebarOpen } from "./state.js";
+/** Default `minWidth` / `maxWidth` of a resizable Sidebar. */
+export const SIDEBAR_MIN_WIDTH = "12rem";
+export const SIDEBAR_MAX_WIDTH = "28rem";
+/** Default keyboard step (px; Shift: × 5). */
+export const SIDEBAR_RESIZE_STEP = 16;
+export function createSidebarResizeState(props) {
+    return _regionState(() => ({
+        control: controllable(props.width, props.defaultWidth, props.onWidthChange),
+        defaultWidth: props.defaultWidth,
+        min: props.minWidth ?? SIDEBAR_MIN_WIDTH,
+        max: props.maxWidth ?? SIDEBAR_MAX_WIDTH,
+        collapseBelowMin: props.collapseBelowMin ?? true,
+        step: props.resizeStep ?? SIDEBAR_RESIZE_STEP,
+        onWidthChangeEnd: props.onWidthChangeEnd,
+    }));
+}
+/** The width as CSS (`undefined`: no override). */
+export const sidebarWidthCss = (width) => width == null ? undefined : typeof width === "number" ? `${width}px` : width;
+/**
+ * A length in px: numbers, `px`, `rem` (root font size; 16 on the server), `em` (font size of `el`), `vw` / `%` (of the
+ * viewport); `NaN` when unparsable.
+ */
+export function sidebarLengthPx(size, el) {
+    if (typeof size === "number")
+        return size;
+    const m = /^\s*(-?[\d.]+)\s*(px|rem|em|vw|%)?\s*$/.exec(size);
+    if (!m)
+        return NaN;
+    const n = parseFloat(m[1]);
+    const unit = m[2] ?? "px";
+    if (unit === "px")
+        return n;
+    if (typeof window === "undefined")
+        return unit === "rem" || unit === "em" ? n * 16 : NaN;
+    if (unit === "vw" || unit === "%")
+        return (n / 100) * window.innerWidth;
+    const of = unit === "em" && el ? el : document.documentElement;
+    return n * (parseFloat(getComputedStyle(of).fontSize) || 16);
+}
+/** `aria-valuenow` (px, rounded): the set width, `undefined` while it is the provider's variable (filled in on focus / drag). */
+export function sidebarWidthNow(rs) {
+    const width = rs.control.value();
+    if (width == null)
+        return undefined;
+    const px = sidebarLengthPx(width);
+    return Number.isFinite(px) ? Math.round(px) : undefined;
+}
+/** `aria-valuemin` / `aria-valuemax` (px, rounded; `undefined` when not computable on the server). */
+export function sidebarBoundPx(size) {
+    const px = sidebarLengthPx(size);
+    return Number.isFinite(px) ? Math.round(px) : undefined;
+}
+const drags = new WeakMap();
+const SNAP_MS = 220;
+const rootOf = (handle) => handle.closest('[data-slot="sidebar"]');
+const containerOf = (handle) => handle.closest('[data-slot="sidebar-container"]');
+/** +1 when moving the pointer right grows the panel (left side LTR, right side RTL), else -1. */
+function growDirection(root) {
+    const rtl = getComputedStyle(root).direction === "rtl";
+    return (root.getAttribute("data-side") !== "right") !== rtl ? 1 : -1;
+}
+/** The expanded width in px right now (set width, else the inherited `--sidebar-width`, else the container box). */
+function currentWidth(rs, handle) {
+    const root = rootOf(handle);
+    const set = untrack(rs.control.value);
+    let px = set == null ? NaN : sidebarLengthPx(set, root);
+    if (!Number.isFinite(px) && root)
+        px = sidebarLengthPx(getComputedStyle(root).getPropertyValue("--sidebar-width").trim(), root);
+    if (!Number.isFinite(px))
+        px = containerOf(handle)?.getBoundingClientRect().width ?? 0;
+    return px;
+}
+function bounds(rs, handle) {
+    const root = rootOf(handle);
+    const lo = sidebarLengthPx(rs.min, root);
+    const hi = sidebarLengthPx(rs.max, root);
+    const min = Number.isFinite(lo) ? lo : 0;
+    return [min, Number.isFinite(hi) ? Math.max(min, hi) : Infinity];
+}
+function setWidth(rs, px) {
+    setControlledValue(rs.control, Math.round(px));
+}
+function commit(rs, handle) {
+    rs.onWidthChangeEnd?.(Math.round(currentWidth(rs, handle)));
+}
+/** Writes `aria-valuenow` while the width is still the provider's variable (the binding owns it once a width is set). */
+function syncValueNow(rs, handle) {
+    if (untrack(rs.control.value) == null)
+        handle.setAttribute("aria-valuenow", String(Math.round(currentWidth(rs, handle))));
+}
+/** Handle `focus` / `pointerover`: fills in `aria-valuenow`. */
+export function sidebarResizeSync(event, rs) {
+    syncValueNow(rs, event.currentTarget);
+}
+/** Handle `pointerdown`: starts a drag (primary button / touch / pen), pointer captured. */
+export function sidebarResizePointerDown(event, s, rs) {
+    if (event.button !== 0)
+        return;
+    const handle = event.currentTarget;
+    const root = rootOf(handle);
+    if (!root)
+        return;
+    event.preventDefault();
+    const open = untrack(s.open);
+    syncValueNow(rs, handle);
+    drags.set(handle, {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        // Collapsed (icon rail): the drag starts from the rail's width.
+        startWidth: open ? currentWidth(rs, handle) : (containerOf(handle)?.getBoundingClientRect().width ?? 0),
+        dir: growDirection(root),
+        snapUntil: 0,
+        moved: false,
+    });
+    try {
+        handle.setPointerCapture(event.pointerId);
+    }
+    catch {
+        // not an active pointer (synthetic event): the drag still follows events on the handle
+    }
+    handle.setAttribute("data-dragging", "true");
+}
+/** Handle `pointermove`: resizes (clamped), collapses below half the minimum, re-opens above it. */
+export function sidebarResizePointerMove(event, s, rs) {
+    const handle = event.currentTarget;
+    const drag = drags.get(handle);
+    if (!drag || drag.pointerId !== event.pointerId)
+        return;
+    const root = rootOf(handle);
+    if (!root)
+        return;
+    const raw = drag.startWidth + (event.clientX - drag.startX) * drag.dir;
+    if (!drag.moved && Math.abs(event.clientX - drag.startX) < 1)
+        return;
+    drag.moved = true;
+    const [min, max] = bounds(rs, handle);
+    const open = untrack(s.open);
+    const now = performance.now();
+    if (rs.collapseBelowMin && raw < min / 2) {
+        if (open) {
+            root.removeAttribute("data-resizing");
+            drag.snapUntil = now + SNAP_MS;
+            setSidebarOpen(s, false);
+        }
+        return;
+    }
+    if (!open) {
+        root.removeAttribute("data-resizing");
+        drag.snapUntil = now + SNAP_MS;
+        setSidebarOpen(s, true);
+    }
+    if (now >= drag.snapUntil)
+        root.setAttribute("data-resizing", "true");
+    setWidth(rs, Math.min(max, Math.max(min, raw)));
+}
+/** Handle `pointerup` / `pointercancel` / `lostpointercapture`: ends the drag (`onWidthChangeEnd` when it moved). */
+export function sidebarResizePointerUp(event, rs) {
+    const handle = event.currentTarget;
+    const drag = drags.get(handle);
+    if (!drag || drag.pointerId !== event.pointerId)
+        return;
+    drags.delete(handle);
+    if (handle.hasPointerCapture(event.pointerId))
+        handle.releasePointerCapture(event.pointerId);
+    handle.removeAttribute("data-dragging");
+    rootOf(handle)?.removeAttribute("data-resizing");
+    if (drag.moved)
+        commit(rs, handle);
+}
+/** The provider's `--sidebar-width` in px (`NaN` when not a plain length). */
+function providerWidth(handle) {
+    const wrapper = handle.closest('[data-slot="sidebar-wrapper"]');
+    return wrapper ? sidebarLengthPx(getComputedStyle(wrapper).getPropertyValue("--sidebar-width").trim(), wrapper) : NaN;
+}
+/** Handle `dblclick`: back to `defaultWidth` (else the provider's `--sidebar-width`), opening a collapsed sidebar. */
+export function sidebarResizeReset(event, s, rs) {
+    const handle = event.currentTarget;
+    const fallback = providerWidth(handle);
+    setControlledValue(rs.control, rs.defaultWidth ?? (Number.isFinite(fallback) ? Math.round(fallback) : undefined));
+    if (!untrack(s.open))
+        setSidebarOpen(s, true);
+    commit(rs, handle);
+}
+/**
+ * Handle `keydown` (window splitter): Arrow Left / Right ± `resizeStep` px (Shift × 5; mirrored for a right sidebar and
+ * RTL), Home / End = min / max, Enter toggles collapse. A growing key on a collapsed sidebar opens it.
+ */
+export function sidebarResizeKeyDown(event, s, rs) {
+    const handle = event.currentTarget;
+    const root = rootOf(handle);
+    if (!root || event.altKey || event.ctrlKey || event.metaKey)
+        return;
+    const key = event.key;
+    if (key === "Enter") {
+        event.preventDefault();
+        setSidebarOpen(s, (open) => !open);
+        return;
+    }
+    const [min, max] = bounds(rs, handle);
+    const width = currentWidth(rs, handle);
+    let next;
+    if (key === "ArrowLeft" || key === "ArrowRight") {
+        const grow = (key === "ArrowRight" ? 1 : -1) * growDirection(root);
+        next = width + grow * rs.step * (event.shiftKey ? 5 : 1);
+        if (!untrack(s.open)) {
+            event.preventDefault();
+            if (grow > 0)
+                setSidebarOpen(s, true);
+            return;
+        }
+    }
+    else if (key === "Home")
+        next = min;
+    else if (key === "End")
+        next = max;
+    else
+        return;
+    event.preventDefault();
+    if (!untrack(s.open))
+        setSidebarOpen(s, true);
+    setWidth(rs, Math.min(max, Math.max(min, next)));
+    commit(rs, handle);
+}

package/sidebar/sheet-motion.d.ts

@@ -0,0 +1,15 @@
+export interface SidebarSheetMotionOptions {
+    /** The edge the sheet is attached to. */
+    side: "left" | "right";
+    /** Closes the mobile sheet (`setSidebarOpenMobile(state, false)`). */
+    close: () => void;
+    /** Rivet: the provider's `reduceMotion` (read on release; `prefers-reduced-motion` applies too). */
+    reduceMotion?: () => boolean;
+}
+/** Pixels a pointer moves before a drag is decided (sideways → drag, vertical → scroll). */
+export declare const SHEET_DRAG_THRESHOLD = 6;
+/**
+ * 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 declare function sidebarSheetMotion(sheet: HTMLElement, options: SidebarSheetMotionOptions): () => void;