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

package/morph/item.jsx

@@ -0,0 +1,546 @@
+// Rivet-authored (no upstream): item morph — a collection item (ListBox option, GridList row, Menu item, any element)
+// lifts out of its list into a panel (preview, settings, actions) on the shared div overlay layer, iOS context-menu
+// style: press and hold shrinks the row slightly, at the threshold the surface morphs from the row's box to the panel's
+// box over a dimmed backdrop, closing morphs it back into the row. Motion = `morphRectTo` (`./index.tsx`, house motion
+// `Motion1D`: interruptible, reduced motion jumps).
+//
+// - One `ItemMorph` per list (`createItemMorph`): every item spreads `itemMorphProps(morph)`, one `<ItemMorphPanel>`
+//   renders the panel for the item that opened it (render-function children get the item's key). Plain data + signals:
+//   it serializes, so the handlers resume; nothing runs at load.
+// - Triggers (`trigger`, one or a list): "longPress" (default; mouse + touch, `threshold` 500 ms = React Aria
+//   useLongPress, movement > 10 px / scroll / leaving cancels), "contextMenu" (right click, touch long press),
+//   "press" (the item's action: ListBox / GridList / Menu `onAction`), "doubleClick", "none" (programmatic / controlled
+//   only). Keyboard for every trigger but "none": the ContextMenu key and Shift+F10 (the platform "open context menu"
+//   keys; WAI-ARIA APG).
+// - A long press cancels the item's own press like useLongPress (a bubbling `pointercancel` at the threshold, the next
+//   `click` prevented) and marks the item `data-rv-long-press`, which makes a cdk ListBox select it on press up (mouse
+//   presses select on press down otherwise, before a hold can be told apart from a click): a long press never selects or
+//   acts.
+// - Resumable chunk timing: the panel content renders hidden (`phase` 1, primed) 120 ms into a hold, so its code is in
+//   by the threshold; a tap renders nothing.
+// - A11y: the surface is `role="dialog"` `aria-modal="true"`, named by the item (`aria-labelledby` = the item id) unless
+//   `aria-label` is given; focus moves in (`[data-morph-autofocus]`, else the first tabbable, else the surface); the
+//   rest of the page is `inert` (`ariaHideOutside`) and scroll is locked (`preventScroll`) while open; Escape, a press
+//   on the backdrop and `closeItemMorph` close it and return focus to the item (list keyboard navigation continues from
+//   there).
+import { signal, untrack } from "@rivetjs/reactivity";
+import { Show, clientEffect, ref as createRef } from "@rivetjs/runtime/dom";
+import { tabbables } from "../a11y/index.js";
+import { controllable, controlledValue, setControlledValue } from "../interactions/controllable.js";
+import { ariaHideOutside } from "../overlay/aria-hide-outside.js";
+import { preventScroll } from "../overlay/prevent-scroll.js";
+import { Portal } from "../portal/index.jsx";
+import { getOwnerDocument, getOwnerWindow } from "../utils/dom.js";
+import { createId } from "../utils/id.js";
+import { morphRectTo, morphReducesMotion } from "./index.jsx";
+/** Long press threshold (React Aria useLongPress default). */
+export const ITEM_MORPH_THRESHOLD = 500;
+/** A hold renders the panel (hidden) after this long, so its code is loaded by the threshold. */
+const PRIME_DELAY = 120;
+/** Pointer movement that cancels a hold (px). */
+const MOVE_TOLERANCE = 10;
+/** Viewport margin of the panel (px). */
+const MARGIN = 16;
+/** Creates the morph shared by a list's items. */
+export function createItemMorph(options = {}) {
+    const trigger = options.trigger ?? "longPress";
+    return {
+        id: createId(),
+        triggers: (Array.isArray(trigger) ? trigger : [trigger]).join(" "),
+        threshold: options.threshold ?? ITEM_MORPH_THRESHOLD,
+        isDisabled: options.isDisabled === true,
+        duration: options.duration,
+        friction: options.friction,
+        open: controllable(options.openKey, null, options.onOpenChange),
+        key: signal(null),
+        phase: signal(0),
+    };
+}
+const has = (m, trigger) => (" " + m.triggers + " ").includes(" " + trigger + " ");
+/**
+ * Props for each item element (spread on `ListBoxItem` / `GridListItem` / `MenuItem` or a custom element): the trigger
+ * handlers for `morph.triggers`, `data-rv-morph` (finds the item) and `data-rv-long-press` (a cdk ListBox selects it on
+ * press up). ListBox items get `onKeyDown` through the item's own prop (React Aria useKeyboard: unhandled keys continue).
+ */
+export function itemMorphProps(m) {
+    const bag = {
+        "data-rv-morph": m.id,
+        onPointerDown: (e) => itemMorphPointerDown(m, e),
+        onKeyDown: (e) => itemMorphKeyDown(m, e),
+        // Touch long presses open the native context menu (and contextMenu triggers it on purpose).
+        onContextMenu: (e) => itemMorphContextMenu(m, e),
+    };
+    if (has(m, "longPress") || has(m, "contextMenu"))
+        Object.assign(bag, { "data-rv-long-press": "" });
+    if (has(m, "doubleClick"))
+        Object.assign(bag, { onDblClick: (e) => itemMorphDoubleClick(m, e) });
+    if (has(m, "press"))
+        Object.assign(bag, { onAction: () => itemMorphAction(m) });
+    return bag;
+}
+const lives = new Map();
+const liveOf = (m) => {
+    let l = lives.get(m.id);
+    if (!l)
+        lives.set(m.id, (l = { item: null, pressed: null, surface: null, backdrop: null, host: null, hold: null, release: [], synthetic: false }));
+    return l;
+};
+const sourceOf = (m, e) => {
+    const t = e.target;
+    return t instanceof Element ? t.closest(`[data-rv-morph="${m.id}"]`) : null;
+};
+/** The item's collection key (`data-key`, numeric with `data-key-type="number"`), else its id. */
+function keyOf(item) {
+    const key = item.getAttribute("data-key");
+    if (key == null)
+        return item.id;
+    return item.getAttribute("data-key-type") === "number" ? Number(key) : key;
+}
+const isDisabledItem = (item) => item.getAttribute("aria-disabled") === "true" || item.hasAttribute("data-disabled");
+const raf = (f) => (typeof requestAnimationFrame === "function" ? requestAnimationFrame(f) : setTimeout(f, 16));
+const caf = (id) => (typeof cancelAnimationFrame === "function" ? cancelAnimationFrame(id) : clearTimeout(id));
+// ---------------------------------------------------------------------------------------------
+// Triggers
+// ---------------------------------------------------------------------------------------------
+/** @internal pointerdown on an item: long press hold (longPress; contextMenu on touch). */
+export function itemMorphPointerDown(m, e) {
+    const item = sourceOf(m, e);
+    if (!item)
+        return;
+    const l = liveOf(m);
+    l.pressed = item;
+    if (m.isDisabled || isDisabledItem(item) || untrack(m.phase) === 2)
+        return;
+    const touch = e.pointerType === "touch" || e.pointerType === "pen";
+    if (!(has(m, "longPress") || (touch && has(m, "contextMenu"))))
+        return;
+    if (e.pointerType === "mouse" && e.button !== 0)
+        return;
+    startHold(m, l, item, e);
+}
+function startHold(m, l, item, e) {
+    endHold(m, l, false);
+    const win = getOwnerWindow(item);
+    const hold = {
+        item,
+        pointerId: e.pointerId,
+        pointerType: e.pointerType,
+        x: e.clientX,
+        y: e.clientY,
+        t0: performance.now(),
+        fired: false,
+        timer: undefined,
+        prime: undefined,
+        raf: 0,
+        remove: [],
+    };
+    l.hold = hold;
+    const listen = (target, type, fn, opts) => {
+        target.addEventListener(type, fn, opts);
+        hold.remove.push(() => target.removeEventListener(type, fn, opts));
+    };
+    const cancel = () => {
+        if (!hold.fired)
+            endHold(m, l, true);
+    };
+    listen(win, "pointerup", (ev) => ev.pointerId === hold.pointerId && cancel(), true);
+    listen(win, "pointercancel", (ev) => !l.synthetic && ev.pointerId === hold.pointerId && cancel(), true);
+    listen(win, "scroll", cancel, true);
+    listen(win, "pointermove", (ev) => {
+        const p = ev;
+        if (p.pointerId === hold.pointerId && Math.hypot(p.clientX - hold.x, p.clientY - hold.y) > MOVE_TOLERANCE)
+            cancel();
+    });
+    // The page's text selection / iOS callout must not start under the finger.
+    const s = item.style;
+    const callout = s.webkitTouchCallout ?? "";
+    const select = s.userSelect;
+    s.webkitTouchCallout = "none";
+    s.userSelect = "none";
+    hold.remove.push(() => {
+        s.webkitTouchCallout = callout;
+        s.userSelect = select;
+    });
+    hold.prime = setTimeout(() => prime(m, item), PRIME_DELAY);
+    // Press-and-hold feedback: `--morph-hold` 0 → 1 (ease out) on the item while held (the stylesheet scales it).
+    if (!morphReducesMotion(item)) {
+        item.setAttribute("data-morph-holding", "");
+        const frame = () => {
+            const t = Math.min(1, Math.max(0, (performance.now() - hold.t0 - 80) / Math.max(1, m.threshold - 80)));
+            item.style.setProperty("--morph-hold", String(Math.round((1 - (1 - t) ** 3) * 1e3) / 1e3));
+            if (t < 1 && l.hold === hold)
+                hold.raf = raf(frame);
+        };
+        hold.raf = raf(frame);
+    }
+    hold.timer = setTimeout(() => {
+        hold.fired = true;
+        // useLongPress: stop the item's other press handlers (selection / action) from handling this press.
+        l.synthetic = true;
+        try {
+            item.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true, pointerId: hold.pointerId, pointerType: hold.pointerType }));
+        }
+        finally {
+            l.synthetic = false;
+        }
+        // No click action after a long press (dropped after the pointer is up, as useLongPress).
+        const noClick = (ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+        };
+        item.addEventListener("click", noClick, { capture: true, once: true });
+        win.addEventListener("pointerup", () => setTimeout(() => item.removeEventListener("click", noClick, { capture: true }), 100), {
+            once: true,
+            capture: true,
+        });
+        if (hold.pointerType === "touch")
+            item.addEventListener("contextmenu", (ev) => ev.preventDefault(), { once: true });
+        endHold(m, l, false);
+        openItemMorph(m, item);
+    }, m.threshold);
+}
+function endHold(m, l, unprime) {
+    const hold = l.hold;
+    if (!hold)
+        return;
+    l.hold = null;
+    clearTimeout(hold.timer);
+    clearTimeout(hold.prime);
+    caf(hold.raf);
+    for (const remove of hold.remove.splice(0))
+        remove();
+    hold.item.removeAttribute("data-morph-holding");
+    hold.item.style.removeProperty("--morph-hold");
+    if (unprime && untrack(m.phase) === 1)
+        m.phase.set(0);
+}
+/** Renders the panel hidden for `item` (its code loads while the hold runs). */
+function prime(m, item) {
+    if (untrack(m.phase) !== 0)
+        return;
+    m.key.set(keyOf(item));
+    m.phase.set(1);
+}
+/** @internal contextmenu on an item. */
+export function itemMorphContextMenu(m, e) {
+    const item = sourceOf(m, e);
+    if (!item)
+        return;
+    const l = liveOf(m);
+    const holdingTouch = l.hold?.item === item && l.hold.pointerType !== "mouse";
+    if (holdingTouch)
+        e.preventDefault();
+    if (!has(m, "contextMenu") || m.isDisabled || isDisabledItem(item))
+        return;
+    e.preventDefault();
+    if (untrack(m.phase) === 2)
+        return;
+    endHold(m, l, false);
+    openItemMorph(m, item);
+}
+/** @internal keydown on an item: ContextMenu key / Shift+F10 open it; other keys continue (useKeyboard). */
+export function itemMorphKeyDown(m, e) {
+    const item = sourceOf(m, e);
+    const opens = e.key === "ContextMenu" || (e.key === "F10" && e.shiftKey);
+    if (!item || !opens || has(m, "none") || m.isDisabled || isDisabledItem(item)) {
+        if (item)
+            liveOf(m).pressed = item;
+        e.continuePropagation?.();
+        return;
+    }
+    e.preventDefault();
+    openItemMorph(m, item);
+}
+/** @internal dblclick on an item. */
+export function itemMorphDoubleClick(m, e) {
+    const item = sourceOf(m, e);
+    if (item && !m.isDisabled && !isDisabledItem(item))
+        openItemMorph(m, item);
+}
+/** @internal the item's action ("press" trigger): the item pressed last (pointer / key) or the focused one. */
+export function itemMorphAction(m) {
+    if (m.isDisabled || typeof document === "undefined")
+        return;
+    const l = liveOf(m);
+    const active = getOwnerDocument().activeElement?.closest(`[data-rv-morph="${m.id}"]`);
+    const item = l.pressed?.isConnected ? l.pressed : active;
+    if (item)
+        openItemMorph(m, item);
+}
+// ---------------------------------------------------------------------------------------------
+// Open / close
+// ---------------------------------------------------------------------------------------------
+/** Opens the panel for `item` (an element carrying the morph's item props). */
+export function openItemMorph(m, item) {
+    const key = keyOf(item);
+    setControlledValue(m.open, key);
+    // A read-only controlled value changes only when the caller says so (the panel's follower effect syncs).
+    if (!m.open.isControlled || m.open.isSignal)
+        syncItemMorph(m, key, item);
+}
+/** Closes the panel (focus back to the item unless `restoreFocus` is false). */
+export function closeItemMorph(m, restoreFocus = true) {
+    if (controlledValue(m.open) === null && untrack(m.phase) !== 2)
+        return;
+    setControlledValue(m.open, null);
+    if (!m.open.isControlled || m.open.isSignal)
+        syncItemMorph(m, null, null, restoreFocus);
+}
+/** Whether the panel is open for some item (tracked). */
+export const isItemMorphOpen = (m) => m.open.value() !== null;
+/** DOM + motion follow `key` (`null` = closed). `item` defaults to the element carrying the key. */
+export function syncItemMorph(m, key, item, restoreFocus = true) {
+    if (typeof document === "undefined")
+        return;
+    const l = liveOf(m);
+    const phase = untrack(m.phase);
+    if (key === null) {
+        if (phase === 2)
+            beginClose(m, l, restoreFocus);
+        else if (phase === 1)
+            m.phase.set(0);
+        return;
+    }
+    const source = item ??
+        Array.from(getOwnerDocument().querySelectorAll(`[data-rv-morph="${m.id}"]`)).find((el) => String(keyOf(el)) === String(key)) ??
+        null;
+    if (!source)
+        return;
+    if (phase === 2 && l.item === source)
+        return;
+    if (phase === 3 && l.item !== source && l.surface) {
+        // Another item while one closes: finish that close at once.
+        morphRectTo(l.surface, false, { from: () => itemRect(l.item), to: () => surfaceRect(l.surface), jump: true });
+    }
+    if (phase === 2 && l.item !== source) {
+        releaseOpen(l);
+        l.item?.removeAttribute("data-morph-open");
+    }
+    l.item = source;
+    if (untrack(m.key) !== key)
+        m.key.set(key);
+    m.phase.set(2);
+    // Mounted already (primed, or closing): open now; else `itemMorphPlaced` opens once the panel is in the layer.
+    if (l.surface)
+        beginOpen(m, l);
+}
+/** @internal the panel is in the overlay layer (Portal `onPlaced`). */
+export function itemMorphPlaced(m, host, surface, backdrop) {
+    if (!surface)
+        return;
+    const l = liveOf(m);
+    l.host = host ?? surface.parentElement;
+    l.surface = surface;
+    l.backdrop = backdrop ?? null;
+    if (untrack(m.phase) === 2)
+        beginOpen(m, l);
+}
+/** @internal the panel left the overlay layer. */
+export function itemMorphRemoved(m, surface) {
+    const l = lives.get(m.id);
+    if (!l || l.surface !== surface)
+        return;
+    releaseOpen(l);
+    l.surface = l.backdrop = l.host = null;
+}
+function cssPx(value, fallback) {
+    const n = parseFloat(value);
+    return Number.isFinite(n) ? n : fallback;
+}
+/** The item's viewport box (transforms included: the held, slightly shrunk row) + its corner radius. */
+function itemRect(item) {
+    if (!item || !item.isConnected)
+        return { x: innerWidth / 2 - 40, y: innerHeight / 2 - 20, w: 80, h: 40, r: 20 };
+    const box = item.getBoundingClientRect();
+    return { x: box.left, y: box.top, w: box.width, h: box.height, r: Math.min(cssPx(getComputedStyle(item).borderTopLeftRadius, 0), box.height / 2) };
+}
+function surfaceRect(surface) {
+    const box = surface.getBoundingClientRect();
+    return { x: box.left, y: box.top, w: box.width, h: box.height, r: cssPx(getComputedStyle(surface).borderTopLeftRadius, 0) };
+}
+/** Where the open panel rests: centred on the row horizontally, top at the row's top, kept inside the viewport. */
+function panelRect(surface, panel, row) {
+    const vw = surface.ownerDocument.documentElement.clientWidth || innerWidth;
+    const vh = innerHeight;
+    const w = Math.min(panel.offsetWidth, vw - 2 * MARGIN);
+    const h = Math.min(panel.offsetHeight, vh - 2 * MARGIN);
+    const x = Math.min(Math.max(MARGIN, row.x + row.w / 2 - w / 2), vw - MARGIN - w);
+    const y = Math.max(MARGIN, Math.min(row.y, vh - MARGIN - h));
+    const r = Math.min(cssPx(getComputedStyle(surface).getPropertyValue("--morph-expanded-radius"), cssPx(getComputedStyle(surface).borderTopLeftRadius, 24)), w / 2, h / 2);
+    return { x, y, w, h, r };
+}
+const panelOf = (surface) => surface.querySelector("[data-morph-expanded]") ?? surface;
+/** The panel content keeps its open width while the surface morphs (no reflow), centred and clipped. */
+function pinPanel(panel, width) {
+    const s = panel.style;
+    s.position = "absolute";
+    s.top = "0";
+    s.left = "50%";
+    s.translate = "-50% 0";
+    s.width = `${width}px`;
+}
+function unpinPanel(panel) {
+    const s = panel.style;
+    for (const p of ["position", "top", "left", "translate", "width"])
+        s.removeProperty(p);
+}
+function releaseOpen(l) {
+    for (const release of l.release.splice(0))
+        release();
+}
+function focusPanel(surface) {
+    const first = surface.querySelector("[data-morph-autofocus]") ?? tabbables(surface)[0] ?? surface;
+    first.focus({ preventScroll: true });
+}
+function beginOpen(m, l) {
+    const surface = l.surface;
+    const item = l.item;
+    const panel = panelOf(surface);
+    const reopening = untrack(m.phase) === 2 && surface.hasAttribute("data-open");
+    let rest = null;
+    let row = null;
+    if (!surface.hasAttribute("data-morphing")) {
+        // From rest (primed / closed): measure the row, then the panel at its natural size.
+        row = itemRect(item);
+        unpinPanel(panel);
+        rest = panelRect(surface, panel, row);
+    }
+    surface.setAttribute("data-open", "");
+    surface.style.visibility = "";
+    surface.style.overflow = "hidden";
+    if (l.backdrop) {
+        l.backdrop.setAttribute("data-open", "");
+        l.backdrop.style.visibility = "";
+    }
+    if (rest)
+        pinPanel(panel, rest.w);
+    if (item) {
+        item.setAttribute("data-morph-open", "");
+        if (!surface.hasAttribute("aria-label") && item.id)
+            surface.setAttribute("aria-labelledby", item.id);
+    }
+    if (!reopening || l.release.length === 0) {
+        releaseOpen(l);
+        const doc = surface.ownerDocument;
+        const host = l.host ?? surface;
+        l.release.push(ariaHideOutside([host], { shouldUseInert: true }));
+        l.release.push(preventScroll());
+        const onKey = (e) => {
+            if (e.key !== "Escape" || e.defaultPrevented)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            closeItemMorph(m);
+        };
+        const onDown = (e) => {
+            const t = e.target;
+            if (t && surface.contains(t))
+                return;
+            e.preventDefault();
+            closeItemMorph(m);
+        };
+        doc.addEventListener("keydown", onKey, true);
+        doc.addEventListener("pointerdown", onDown, true);
+        l.release.push(() => {
+            doc.removeEventListener("keydown", onKey, true);
+            doc.removeEventListener("pointerdown", onDown, true);
+        });
+    }
+    const motion = { duration: m.duration, friction: m.friction };
+    morphRectTo(surface, true, {
+        ...motion,
+        from: () => row ?? itemRect(item),
+        to: () => rest ?? panelRect(surface, panel, row ?? itemRect(item)),
+        backdrop: l.backdrop,
+        onSettle: () => {
+            unpinPanel(panel);
+            surface.style.overflow = "auto";
+            surface.style.maxHeight = `${innerHeight - 2 * MARGIN}px`;
+        },
+    });
+    raf(() => {
+        if (untrack(m.phase) === 2 && l.surface === surface && !surface.contains(surface.ownerDocument.activeElement))
+            focusPanel(surface);
+    });
+}
+function beginClose(m, l, restoreFocus) {
+    const surface = l.surface;
+    const item = l.item;
+    m.phase.set(3);
+    releaseOpen(l);
+    item?.removeAttribute("data-morph-open");
+    if (restoreFocus && item?.isConnected)
+        item.focus({ preventScroll: true });
+    if (!surface) {
+        m.phase.set(0);
+        return;
+    }
+    const panel = panelOf(surface);
+    // Measure the resting open box before pinning the panel (pinned content leaves the flow: the surface would collapse).
+    const rest = surface.hasAttribute("data-morphing") ? undefined : surfaceRect(surface);
+    surface.removeAttribute("data-open");
+    l.backdrop?.removeAttribute("data-open");
+    if (rest)
+        pinPanel(panel, panel.offsetWidth);
+    surface.style.overflow = "hidden";
+    morphRectTo(surface, false, {
+        duration: m.duration,
+        friction: m.friction,
+        from: () => itemRect(item),
+        to: () => rest ?? surfaceRect(surface),
+        backdrop: l.backdrop,
+        onSettle: () => {
+            if (untrack(m.phase) !== 3)
+                return;
+            m.phase.set(0);
+        },
+    });
+}
+/**
+ * The panel of an item morph: rendered on the overlay layer only while a hold primes it or it is open. Place it once
+ * per list (anywhere: it portals). Surface `[data-morph-surface]` (`data-open`, `data-morphing`), content
+ * `[data-morph-expanded]`, backdrop `[data-morph-backdrop]`; behaviour styles are inline.
+ */
+export function ItemMorphPanel(props) {
+    const m = props.morph;
+    const label = props["aria-label"];
+    const surfaceClass = props.class ?? "rv-ItemMorph";
+    const panelClass = props.panelClass ?? "rv-ItemMorph-panel";
+    const backdropClass = props.backdropClass ?? "rv-ItemMorph-backdrop";
+    const hideBackdrop = props.hideBackdrop === true;
+    const children = props.children;
+    const key = () => m.key();
+    const anchor = createRef();
+    // A controlled open key may change outside the item handlers: follow it (only then is there an effect).
+    if (m.open.isControlled)
+        clientEffect(() => {
+            const value = m.open.value();
+            if (anchor())
+                untrack(() => syncItemMorph(m, value));
+        });
+    return (
+    // Own region site: only the Show re-creates when the phase changes (component-root Show rule).
+    <span data-rv-item-morph-anchor="" style={{ display: "contents" }} ref={anchor}>
+      <Show when={() => m.phase() > 0}>
+        {() => {
+            const host = createRef();
+            const surface = createRef();
+            const backdrop = createRef();
+            clientEffect(() => {
+                const el = surface();
+                return () => itemMorphRemoved(m, el);
+            });
+            return (<Portal onPlaced={() => itemMorphPlaced(m, host(), surface(), backdrop())}>
+              <div data-rv-item-morph-layer="" ref={host}>
+                {hideBackdrop ? null : (<div ref={backdrop} class={backdropClass} data-morph-backdrop="" aria-hidden="true" style={{ position: "fixed", inset: "0", "z-index": "100", opacity: "0", visibility: "hidden" }}/>)}
+                <div ref={surface} class={surfaceClass} data-morph-surface="" role="dialog" aria-modal="true" aria-label={label} tabIndex={-1} style={{ position: "fixed", left: "0", top: "0", "z-index": "100", visibility: "hidden", overflow: "hidden", "box-sizing": "border-box" }}>
+                  <div class={panelClass} data-morph-expanded="">
+                    {children(key)}
+                  </div>
+                </div>
+              </div>
+            </Portal>);
+        }}
+      </Show>
+    </span>);
+}

package/motion/Animations.d.ts

@@ -0,0 +1,17 @@
+export type FrameSchedulerType = {
+    requestAnimationFrame: (callback: (timeStamp: number) => void) => number;
+    cancelAnimationFrame: (handle: number) => void;
+};
+export type AnimationLoopType = {
+    start: () => void;
+    stop: () => void;
+    reset: () => void;
+    update: () => void;
+    render: (alpha: number) => void;
+};
+/**
+ * Fixed-timestep animation loop: `update()` advances the simulation by one 1000/60 ms step as many times as the
+ * elapsed frame time allows; `render(alpha)` then draws, `alpha` (0–1) being the fraction of a step left over
+ * (interpolate `location * alpha + previousLocation * (1 - alpha)`). `stop()` from inside `render` ends the loop.
+ */
+export declare function AnimationLoop(update: () => void, render: (alpha: number) => void, scheduler?: FrameSchedulerType): AnimationLoopType;

package/motion/Animations.js

@@ -0,0 +1,56 @@
+/**
+ * Fixed-timestep animation loop: `update()` advances the simulation by one 1000/60 ms step as many times as the
+ * elapsed frame time allows; `render(alpha)` then draws, `alpha` (0–1) being the fraction of a step left over
+ * (interpolate `location * alpha + previousLocation * (1 - alpha)`). `stop()` from inside `render` ends the loop.
+ */
+export function AnimationLoop(update, render, scheduler) {
+    const frames = scheduler || globalThis;
+    const fixedTimeStep = 1000 / 60;
+    let lastTimeStamp = null;
+    let accumulatedTime = 0;
+    let animationId = 0;
+    function animate(timeStamp) {
+        if (!animationId)
+            return;
+        if (!lastTimeStamp) {
+            lastTimeStamp = timeStamp;
+            update();
+            update();
+        }
+        const timeElapsed = timeStamp - lastTimeStamp;
+        lastTimeStamp = timeStamp;
+        accumulatedTime += timeElapsed;
+        while (accumulatedTime >= fixedTimeStep) {
+            update();
+            accumulatedTime -= fixedTimeStep;
+        }
+        const alpha = accumulatedTime / fixedTimeStep;
+        render(alpha);
+        if (animationId) {
+            animationId = frames.requestAnimationFrame(animate);
+        }
+    }
+    function start() {
+        if (animationId)
+            return;
+        animationId = frames.requestAnimationFrame(animate);
+    }
+    function stop() {
+        frames.cancelAnimationFrame(animationId);
+        lastTimeStamp = null;
+        accumulatedTime = 0;
+        animationId = 0;
+    }
+    function reset() {
+        lastTimeStamp = null;
+        accumulatedTime = 0;
+    }
+    const self = {
+        start,
+        stop,
+        reset,
+        update,
+        render,
+    };
+    return self;
+}

package/motion/DragRelease.d.ts

@@ -0,0 +1,22 @@
+export type DragReleaseType = {
+    /** Multiplier for the tracker's px/ms flick force (`VelocityTracker.pointerUp`) → px of throw. */
+    forceBoost: (isMouse: boolean) => number;
+    /**
+     * Scroll body settings after a release: `rawForce` = boosted flick force, `force` = the distance actually
+     * allowed (snapped / clamped by the caller). The further the allowed distance falls short of the raw throw, the
+     * shorter the duration and the higher the friction.
+     */
+    settle: (rawForce: number, force: number) => {
+        duration: number;
+        friction: number;
+    };
+};
+export declare const snapForceBoost: {
+    mouse: number;
+    touch: number;
+};
+export declare const freeForceBoost: {
+    mouse: number;
+    touch: number;
+};
+export declare function DragRelease(dragFree: boolean, baseFriction: number): DragReleaseType;

package/motion/DragRelease.js

@@ -0,0 +1,26 @@
+// Ported from embla-carousel (packages/embla-carousel/src/components/DragHandler.ts, v8.6.0), MIT, © David Jerleke.
+// Rivet: the release physics of upstream `DragHandler` (`snapForceBoost` / `freeForceBoost`, `forceBoost()`, the
+// `up()` speed + friction formula) extracted for `@rivetjs/cdk/motion`, numbers only; the carousel engine's
+// `DragHandler.ts` uses it, so the carousel keeps upstream behaviour exactly.
+import { factorAbs } from "./utils.js";
+export const snapForceBoost = { mouse: 300, touch: 400 };
+export const freeForceBoost = { mouse: 500, touch: 600 };
+export function DragRelease(dragFree, baseFriction) {
+    const baseSpeed = dragFree ? 43 : 25;
+    function forceBoost(isMouse) {
+        const boost = dragFree ? freeForceBoost : snapForceBoost;
+        const type = isMouse ? "mouse" : "touch";
+        return boost[type];
+    }
+    function settle(rawForce, force) {
+        const forceFactor = factorAbs(rawForce, force);
+        const speed = baseSpeed - 10 * forceFactor;
+        const friction = baseFriction + forceFactor / 50;
+        return { duration: speed, friction };
+    }
+    const self = {
+        forceBoost,
+        settle,
+    };
+    return self;
+}

package/motion/DragTracker.d.ts

@@ -0,0 +1,7 @@
+export type VelocityTrackerType = {
+    pointerDown: (point: number, time: number) => number;
+    pointerMove: (point: number, time: number) => number;
+    pointerUp: (time: number) => number;
+};
+/** Drag velocity tracker (embla DragTracker): numbers in (pointer position, time stamp), diff / flick force out. */
+export declare function VelocityTracker(): VelocityTrackerType;