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

package/overflow/index.d.ts

@@ -0,0 +1,93 @@
+import { type Ref } from "@rivetjs/runtime/dom";
+import { type MaybeAccessor } from "../interactions/utils.js";
+/** Where items collapse: `"start"` (Breadcrumbs: leading items) or `"end"` (ActionGroup: trailing items). */
+export type OverflowCollapse = "start" | "end";
+/** Marker for the overflow element's place in `Overflow.items()` (a string, so `<For by>` keys it). */
+export declare const OVERFLOW = "\0rv-overflow";
+export type OverflowMarker = typeof OVERFLOW;
+export interface OverflowMeasureOptions {
+    /** `"start"`: keep the last items (Breadcrumbs). `"end"`: keep the first items (ActionGroup). @default 'end' */
+    collapse?: OverflowCollapse | undefined;
+    /** `"start"`: always keep the root (first) item while it fits (Spectrum Breadcrumbs `showRoot`). */
+    showRoot?: boolean | undefined;
+    /** `"start"`: the last item sits on its own line, it never collapses (Spectrum Breadcrumbs `isMultiline`). */
+    isMultiline?: boolean | undefined;
+    /** At most this many items stay visible (`"auto"` = no limit). @default 4 for "start", 'auto' for "end" */
+    maxVisibleItems?: number | "auto" | undefined;
+    /** `"end"`: measure widths (`horizontal`) or heights (`vertical`). @default 'horizontal' */
+    orientation?: "horizontal" | "vertical" | undefined;
+}
+export interface OverflowOptions<T> extends OverflowMeasureOptions {
+    /** The container (`ref()`): its element children are the items (and the overflow element), in order. */
+    ref: Ref<HTMLElement> | (() => HTMLElement | undefined);
+    /** The items, in order (accessor: a change re-measures). */
+    items: () => readonly T[];
+    /** Visible items before the browser measures (server render, first client render). @default every item */
+    defaultVisibleItems?: number | undefined;
+    /** No measuring, every item visible (Spectrum `overflowMode="wrap"`). May be an accessor. */
+    isDisabled?: MaybeAccessor<boolean | undefined>;
+    /** Called with the item elements while every item is shown, before each measurement (e.g. to read their text). */
+    onMeasureAll?: ((elements: HTMLElement[]) => void) | undefined;
+}
+export interface Overflow<T> {
+    /** How many items are visible (the rest are collapsed). */
+    visibleCount: () => number;
+    /** Whether some items are collapsed (the overflow element is shown). */
+    isCollapsed: () => boolean;
+    /** Whether a measurement is running (ActionGroup `isMeasuring`: let the container take all the space meanwhile). */
+    isMeasuring: () => boolean;
+    /** What to render, in order: the visible items with `OVERFLOW` where the overflow element goes (only while collapsed). */
+    items: () => readonly (T | OverflowMarker)[];
+    /** The visible items before the overflow element. */
+    before: () => readonly T[];
+    /** The collapsed items, in order (what the overflow element lists). */
+    hidden: () => readonly T[];
+    /** The visible items after the overflow element. */
+    after: () => readonly T[];
+}
+interface Slices<T> {
+    before: readonly T[];
+    hidden: readonly T[];
+    after: readonly T[];
+}
+/**
+ * Splits `items` into visible-before / hidden / visible-after for `visible` visible items (Spectrum Breadcrumbs `contents`:
+ * `[root?, menu, ...last]`; ActionGroup: `[...first, menu]`).
+ */
+export declare function overflowSlices<T>(items: readonly T[], visible: number, options?: Pick<OverflowMeasureOptions, "collapse" | "showRoot">): Slices<T>;
+/**
+ * The measured item elements: the container's element children, minus boxless ones (`display: none` / `contents`, e.g. the
+ * overlay anchor a Popover leaves next to its trigger). Spectrum measures `children` as is (its items are the only children).
+ */
+export declare function overflowChildren(container: HTMLElement): HTMLElement[];
+/**
+ * Spectrum Breadcrumbs `computeVisibleItems`: how many items fit in `container` (its `offsetWidth`) given the item
+ * elements as rendered with `visible` visible items of `total` (`[root?, menu?, ...visible]`).
+ */
+export declare function computeVisibleItemsStart(container: HTMLElement, total: number, visible: number, options?: OverflowMeasureOptions): number;
+/**
+ * Spectrum ActionGroup `computeVisibleItems`: how many leading items fit in `container` (its bounding size) given the
+ * item elements as rendered with `visible` visible items of `total` (`[...visible, menu?]`).
+ */
+export declare function computeVisibleItemsEnd(container: HTMLElement, total: number, visible: number, options?: OverflowMeasureOptions): number;
+interface OverflowRun {
+    container: HTMLElement;
+    total: number;
+    options: OverflowMeasureOptions;
+    visible: {
+        set(value: number): unknown;
+    };
+    measuring: {
+        set(value: boolean): unknown;
+    };
+    onMeasureAll: ((elements: HTMLElement[]) => void) | undefined;
+}
+/** Spectrum `updateOverflow`: show every item, measure, show what fits, measure again with the overflow element shown. */
+export declare function updateOverflow(run: OverflowRun): void;
+/**
+ * Measures a container's items and collapses the ones that do not fit (React Spectrum Breadcrumbs / ActionGroup
+ * overflow). Render `overflow.items()` into the container (the `OVERFLOW` marker = your overflow element, e.g. a
+ * "…" button opening a Menu of `overflow.hidden()`), or use `before` / `hidden` / `after`.
+ */
+export declare function createOverflow<T>(options: OverflowOptions<T>): Overflow<T>;
+export {};

package/overflow/index.jsx

@@ -0,0 +1,267 @@
+// Ported from React Spectrum v3 (Apache-2.0, © Adobe): the overflow measuring of `@react-spectrum/breadcrumbs`
+// (packages/@adobe/react-spectrum/src/breadcrumbs/Breadcrumbs.tsx: `updateOverflow` / `computeVisibleItems`) and
+// `@react-spectrum/actiongroup` `overflowMode="collapse"` (packages/@adobe/react-spectrum/src/actiongroup/ActionGroup.tsx:
+// `updateOverflow` / `computeVisibleItems`, `outerWidth` / `outerHeight`), generalised into one headless module.
+// - `collapse: "start"` = Breadcrumbs: keep the last items (and the root with `showRoot`), collapse the leading ones into
+//   one overflow element placed after the root; `collapse: "end"` = ActionGroup: keep the leading items, collapse the tail
+//   into an overflow element placed last.
+// - Measurement sequence = Spectrum's `useValueEffect` generator: show every item, measure, show the items that fit (with
+//   the overflow element), measure again so the overflow element fits too. Each step is a signal write outside any batch:
+//   Rivet flushes it into the DOM synchronously, so the measurement reads the new layout (one frame, no paint between).
+// - Triggers: a ResizeObserver on the container (RA `useResizeObserver`), a change of the items / `isDisabled`
+//   (RA `useLayoutEffect` on children), `document.fonts.ready` (S2 Breadcrumbs). All in one `clientEffect`: it never runs
+//   on the server; on a resumed page it starts when the container becomes visible.
+// - SSR: the server renders `defaultVisibleItems` (default: every item, as Spectrum's initial state); the browser
+//   then measures. See `apps/cdk-docs/content/foundations/overflow.md` (layout-shift policy).
+// Rivet:
+// - The container's own element children are the measured items (Spectrum: the `<ul>` children / the ActionGroup items).
+// - A flex `column-gap` / `row-gap` on the container is counted between items (Spectrum's CSS has no gap; S2 Breadcrumbs
+//   subtracts the container gap the same way). `maxVisibleItems` (default 4 for "start" = Spectrum's
+//   `MAX_VISIBLE_ITEMS`, unlimited for "end") and `defaultVisibleItems` are options.
+// - Not ported: ActionGroup's `buttonLabelBehavior="collapse"` pass and "collapse everything when selectable" rule
+//   (ActionGroup specifics, not overflow logic).
+import { computed, signal, untrack } from "@rivetjs/reactivity";
+import { clientEffect } from "@rivetjs/runtime/dom";
+import { read } from "../interactions/utils.js";
+/** Marker for the overflow element's place in `Overflow.items()` (a string, so `<For by>` keys it). */
+export const OVERFLOW = "\u0000rv-overflow";
+/** Spectrum Breadcrumbs `MIN_VISIBLE_ITEMS`. */
+const MIN_VISIBLE_ITEMS = 1;
+/** Spectrum Breadcrumbs `MAX_VISIBLE_ITEMS`. */
+const MAX_VISIBLE_ITEMS = 4;
+/**
+ * Splits `items` into visible-before / hidden / visible-after for `visible` visible items (Spectrum Breadcrumbs `contents`:
+ * `[root?, menu, ...last]`; ActionGroup: `[...first, menu]`).
+ */
+export function overflowSlices(items, visible, options = {}) {
+    const total = items.length;
+    if (visible >= total)
+        return { before: items, hidden: [], after: [] };
+    if (options.collapse !== "start")
+        return { before: items.slice(0, Math.max(0, visible)), hidden: items.slice(Math.max(0, visible)), after: [] };
+    const n = Math.max(MIN_VISIBLE_ITEMS, visible);
+    const root = !!options.showRoot && n > 1;
+    const endItems = root ? n - 1 : n;
+    return { before: root ? items.slice(0, 1) : [], hidden: items.slice(root ? 1 : 0, total - endItems), after: items.slice(total - endItems) };
+}
+/**
+ * The measured item elements: the container's element children, minus boxless ones (`display: none` / `contents`, e.g. the
+ * overlay anchor a Popover leaves next to its trigger). Spectrum measures `children` as is (its items are the only children).
+ */
+export function overflowChildren(container) {
+    const out = [];
+    for (const child of Array.from(container.children)) {
+        const display = getComputedStyle(child).display;
+        if (display !== "none" && display !== "contents")
+            out.push(child);
+    }
+    return out;
+}
+const toNumber = (value) => {
+    const parsed = parseInt(value, 10);
+    return isNaN(parsed) ? 0 : parsed;
+};
+/** The container's flex gap along the main axis (0 when none / not flex). */
+function gapOf(container, vertical) {
+    const style = getComputedStyle(container);
+    return toNumber(vertical ? style.rowGap : style.columnGap);
+}
+const maxOf = (options) => {
+    const max = options.maxVisibleItems;
+    if (max === "auto")
+        return Infinity;
+    return max ?? (options.collapse === "start" ? MAX_VISIBLE_ITEMS : Infinity);
+};
+/**
+ * Spectrum Breadcrumbs `computeVisibleItems`: how many items fit in `container` (its `offsetWidth`) given the item
+ * elements as rendered with `visible` visible items of `total` (`[root?, menu?, ...visible]`).
+ */
+export function computeVisibleItemsStart(container, total, visible, options = {}) {
+    const listItems = overflowChildren(container);
+    if (listItems.length <= 0)
+        return visible;
+    const containerWidth = container.offsetWidth;
+    const gap = gapOf(container, false);
+    const isShowingMenu = total > visible;
+    let calculatedWidth = 0;
+    let newVisibleItems = 0;
+    let maxVisibleItems = maxOf({ ...options, collapse: "start" });
+    if (options.showRoot) {
+        calculatedWidth += listItems.shift().offsetWidth + gap;
+        newVisibleItems++;
+    }
+    if (isShowingMenu) {
+        calculatedWidth += (listItems.shift()?.offsetWidth ?? 0) + gap;
+        maxVisibleItems--;
+    }
+    if (options.showRoot && calculatedWidth >= containerWidth)
+        newVisibleItems--;
+    if (options.isMultiline) {
+        listItems.pop();
+        newVisibleItems++;
+    }
+    else if (listItems.length > 0) {
+        // Ensure the last breadcrumb isn't truncated when we measure it.
+        const last = listItems.pop();
+        const overflow = last.style.overflow;
+        last.style.overflow = "visible";
+        calculatedWidth += last.offsetWidth;
+        if (calculatedWidth < containerWidth)
+            newVisibleItems++;
+        last.style.overflow = overflow;
+    }
+    for (const breadcrumb of listItems.reverse()) {
+        calculatedWidth += breadcrumb.offsetWidth + gap;
+        if (calculatedWidth < containerWidth)
+            newVisibleItems++;
+    }
+    return Math.max(MIN_VISIBLE_ITEMS, Math.min(maxVisibleItems, newVisibleItems));
+}
+/** ActionGroup `outerWidth` / `outerHeight` (logical margins: the first item's start and the last item's end are ignored). */
+function outerSize(element, vertical, ignoreStart, ignoreEnd) {
+    const style = getComputedStyle(element);
+    const rect = element.getBoundingClientRect();
+    if (vertical)
+        return rect.height + (ignoreStart ? 0 : toNumber(style.marginTop)) + (ignoreEnd ? 0 : toNumber(style.marginBottom));
+    const rtl = style.direction === "rtl";
+    const start = rtl ? style.marginRight : style.marginLeft;
+    const end = rtl ? style.marginLeft : style.marginRight;
+    return rect.width + (ignoreStart ? 0 : toNumber(start)) + (ignoreEnd ? 0 : toNumber(end));
+}
+/**
+ * Spectrum ActionGroup `computeVisibleItems`: how many leading items fit in `container` (its bounding size) given the
+ * item elements as rendered with `visible` visible items of `total` (`[...visible, menu?]`).
+ */
+export function computeVisibleItemsEnd(container, total, visible, options = {}) {
+    const vertical = options.orientation === "vertical";
+    const listItems = overflowChildren(container);
+    const rect = container.getBoundingClientRect();
+    const containerSize = vertical ? rect.height : rect.width;
+    const gap = gapOf(container, vertical);
+    const isShowingMenu = visible < total;
+    let calculatedSize = 0;
+    let newVisibleItems = 0;
+    if (isShowingMenu) {
+        const item = listItems.pop();
+        if (item)
+            calculatedSize += outerSize(item, vertical, false, true) + gap;
+    }
+    for (const [i, item] of listItems.entries()) {
+        calculatedSize += outerSize(item, vertical, i === 0, i === listItems.length - 1) + (i > 0 ? gap : 0);
+        if (Math.round(calculatedSize) <= Math.round(containerSize))
+            newVisibleItems++;
+        else
+            break;
+    }
+    return Math.min(maxOf(options), newVisibleItems);
+}
+/** Spectrum `updateOverflow`: show every item, measure, show what fits, measure again with the overflow element shown. */
+export function updateOverflow(run) {
+    const { container, total, options, visible, measuring } = run;
+    const start = options.collapse === "start";
+    const compute = start ? computeVisibleItemsStart : computeVisibleItemsEnd;
+    // Update to show all items.
+    measuring.set(true);
+    visible.set(total);
+    run.onMeasureAll?.(overflowChildren(container));
+    // Measure, and update to show the items that fit.
+    let next = compute(container, total, total, options);
+    const again = next < total && next > (start ? 1 : 0);
+    visible.set(next);
+    // If the number of items is less than the number of children, then update again to ensure that the menu fits.
+    if (again)
+        visible.set((next = compute(container, total, next, options)));
+    measuring.set(false);
+}
+/**
+ * Measures a container's items and collapses the ones that do not fit (React Spectrum Breadcrumbs / ActionGroup
+ * overflow). Render `overflow.items()` into the container (the `OVERFLOW` marker = your overflow element, e.g. a
+ * "…" button opening a Menu of `overflow.hidden()`), or use `before` / `hidden` / `after`.
+ */
+export function createOverflow(options) {
+    const { ref, items, isDisabled, onMeasureAll } = options;
+    const measure = {
+        collapse: options.collapse ?? "end",
+        showRoot: options.showRoot,
+        isMultiline: options.isMultiline,
+        maxVisibleItems: options.maxVisibleItems,
+        orientation: options.orientation,
+    };
+    const initial = options.defaultVisibleItems;
+    // A JSON-safe "every item" (the signal resumes; `Infinity` does not serialize).
+    const visible = signal(initial == null ? Number.MAX_SAFE_INTEGER : Math.max(0, initial));
+    const measuring = signal(false);
+    const count = computed(() => Math.min(visible(), items().length));
+    const isCollapsed = computed(() => !read(isDisabled) && count() < items().length);
+    const slices = computed(() => {
+        const list = items();
+        return isCollapsed() ? overflowSlices(list, count(), measure) : { before: list, hidden: [], after: [] };
+    });
+    const before = computed(() => slices().before);
+    const hidden = computed(() => slices().hidden);
+    const after = computed(() => slices().after);
+    const rendered = computed(() => {
+        const s = slices();
+        return isCollapsed() ? [...s.before, OVERFLOW, ...s.after] : s.before;
+    });
+    clientEffect(() => {
+        const container = ref();
+        const total = items().length;
+        if (!container)
+            return;
+        if (read(isDisabled))
+            return void visible.set(total);
+        let alive = true;
+        const run = { container, total, options: measure, visible, measuring, onMeasureAll };
+        // The measured-axis size (container width; height for a vertical `"end"` group) at the last completed measurement.
+        const vertical = measure.collapse === "end" && measure.orientation === "vertical";
+        let measured = -1;
+        const update = () => alive && untrack(() => updateOverflow(run));
+        // Watch the container (Spectrum: the nav / the ActionGroup's parent). The first callback measures synchronously (no
+        // paint before the first collapse). Our own show-all / collapse writes change the container's content, so a container
+        // whose height follows its content fires the observer again:
+        // - same size on the measured axis = the re-fire of our own write: skipped;
+        // - changed size (a real resize): measured in the next animation frame, not inside the callback. A measurement that
+        //   leaves the observed element a different size than the callback saw cannot be delivered in the same frame
+        //   ("ResizeObserver loop completed with undelivered notifications"). The measurement is still one synchronous
+        //   sequence (show all, collapse) inside that frame callback, so it never paints a half state.
+        let frame = 0;
+        const onResize = (entries) => {
+            const rect = entries[entries.length - 1]?.contentRect;
+            const size = rect ? (vertical ? rect.height : rect.width) : -1;
+            if (size >= 0 && size === measured)
+                return;
+            const first = measured === -1;
+            measured = size;
+            if (first)
+                return update();
+            if (!frame)
+                frame = requestAnimationFrame(() => {
+                    frame = 0;
+                    update();
+                });
+        };
+        const observer = typeof ResizeObserver === "function" ? new ResizeObserver(onResize) : null;
+        if (observer)
+            observer.observe(container);
+        else
+            queueMicrotask(update);
+        // Recalculate when fonts are loaded (S2 Breadcrumbs).
+        void document.fonts?.ready.then(update);
+        return () => {
+            alive = false;
+            if (frame)
+                cancelAnimationFrame(frame);
+            observer?.disconnect();
+        };
+    });
+    return {
+        visibleCount: count,
+        isCollapsed,
+        isMeasuring: measuring,
+        items: rendered,
+        before,
+        hidden,
+        after,
+    };
+}

package/overlay/aria-hide-outside.d.ts

@@ -0,0 +1,12 @@
+export interface AriaHideOutsideOptions {
+    /** Nothing above this element is hidden. @default document.body */
+    root?: Element;
+    /** Use `inert` instead of `aria-hidden` (also blocks pointer and focus). */
+    shouldUseInert?: boolean;
+}
+/** Hide everything outside `targets`; returns the function that restores it. */
+export declare function ariaHideOutside(targets: Element[], options?: AriaHideOutsideOptions | Element): () => void;
+/** Keep `element` visible in the active `ariaHideOutside` (e.g. a nested overlay while it enters); returns the undo function. */
+export declare function keepVisible(element: Element): (() => void) | undefined;
+/** Test hook: forget all reference counts. */
+export declare function _resetAriaHideOutside(): void;

package/overlay/aria-hide-outside.js

@@ -0,0 +1,141 @@
+// Hide everything outside the given elements from assistive technology (React Aria
+// `ariaHideOutside`): `aria-hidden="true"` (or `inert` with `shouldUseInert`) on the outermost
+// elements that contain none of the targets, reference counted per element, with a
+// MutationObserver hiding elements added later. Live announcers and top-layer content (toasts:
+// `[data-rv-top-layer]`) stay visible. Nested calls stack: the newest observer is active.
+// The overlay layer uses it for every modal surface (modals, modal popovers, menus).
+//
+// Ported from @react-aria/overlays (ariaHideOutside.ts), Apache-2.0, © Adobe.
+const ALWAYS_VISIBLE = "[data-rv-announcer], [data-rv-announcers], [data-live-announcer], [data-rv-top-layer], [data-react-aria-top-layer]";
+const isAlwaysVisibleNode = (node) => node.matches(ALWAYS_VISIBLE);
+// Hidden elements → how many calls hide them; aria-hidden is removed when it returns to 0.
+let refCountMap = new WeakMap();
+const observerStack = [];
+/** Hide everything outside `targets`; returns the function that restores it. */
+export function ariaHideOutside(targets, options) {
+    const windowObj = (targets?.[0]?.ownerDocument.defaultView ?? window);
+    const opts = options instanceof windowObj.Element ? { root: options } : options;
+    const root = opts?.root ?? document.body;
+    const supportsInert = "inert" in windowObj.HTMLElement.prototype;
+    const shouldUseInert = opts?.shouldUseInert && supportsInert;
+    const visibleNodes = new Set(targets);
+    const hiddenNodes = new Set();
+    const getHidden = (element) => shouldUseInert && element instanceof windowObj.HTMLElement ? element.inert : element.getAttribute("aria-hidden") === "true";
+    const setHidden = (element, hidden) => {
+        if (shouldUseInert && element instanceof windowObj.HTMLElement)
+            element.inert = hidden;
+        else if (hidden)
+            element.setAttribute("aria-hidden", "true");
+        else {
+            element.removeAttribute("aria-hidden");
+            // Only called with false when the count reaches 0: visible again, so not inert either.
+            if (element instanceof windowObj.HTMLElement)
+                element.inert = false;
+        }
+    };
+    const walk = (walkRoot) => {
+        // Live announcers and top-layer content stay visible.
+        for (const element of walkRoot.querySelectorAll(ALWAYS_VISIBLE))
+            visibleNodes.add(element);
+        const acceptNode = (node) => {
+            // Skip targets, announcers, and children of hidden nodes (aria-hidden is recursive) — except
+            // children of role="row": VoiceOver on iOS does not hide rows (https://bugs.webkit.org/show_bug.cgi?id=222623).
+            if (hiddenNodes.has(node) ||
+                visibleNodes.has(node) ||
+                (node.parentElement && hiddenNodes.has(node.parentElement) && node.parentElement.getAttribute("role") !== "row"))
+                return NodeFilter.FILTER_REJECT;
+            // Descend into nodes containing a target.
+            for (const target of visibleNodes)
+                if (node.contains(target))
+                    return NodeFilter.FILTER_SKIP;
+            return NodeFilter.FILTER_ACCEPT;
+        };
+        const walker = walkRoot.ownerDocument.createTreeWalker(walkRoot, NodeFilter.SHOW_ELEMENT, { acceptNode: (node) => acceptNode(node) });
+        // The walker skips its root.
+        const acceptRoot = acceptNode(walkRoot);
+        if (acceptRoot === NodeFilter.FILTER_ACCEPT)
+            hide(walkRoot);
+        if (acceptRoot !== NodeFilter.FILTER_REJECT) {
+            let node = walker.nextNode();
+            while (node != null) {
+                hide(node);
+                node = walker.nextNode();
+            }
+        }
+    };
+    const hide = (node) => {
+        const refCount = refCountMap.get(node) ?? 0;
+        // Hidden already, not by us: leave it.
+        if (getHidden(node) && refCount === 0)
+            return;
+        if (refCount === 0)
+            setHidden(node, true);
+        hiddenNodes.add(node);
+        refCountMap.set(node, refCount + 1);
+    };
+    // A previous call's observer pauses; this one takes over.
+    if (observerStack.length)
+        observerStack[observerStack.length - 1].disconnect();
+    walk(root);
+    const observer = new MutationObserver((changes) => {
+        for (const change of changes) {
+            if (change.type !== "childList")
+                continue;
+            // Added outside every target and every hidden node: hide the new children.
+            if (change.target.isConnected && ![...visibleNodes, ...hiddenNodes].some((node) => node.contains(change.target))) {
+                for (const node of change.addedNodes) {
+                    if ((node instanceof HTMLElement || node instanceof SVGElement) && isAlwaysVisibleNode(node))
+                        visibleNodes.add(node);
+                    else if (node instanceof Element)
+                        walk(node);
+                }
+            }
+        }
+    });
+    observer.observe(root, { childList: true, subtree: true });
+    const observerWrapper = {
+        visibleNodes,
+        hiddenNodes,
+        observe: () => observer.observe(root, { childList: true, subtree: true }),
+        disconnect: () => observer.disconnect(),
+    };
+    observerStack.push(observerWrapper);
+    return () => {
+        observer.disconnect();
+        for (const node of hiddenNodes) {
+            const count = refCountMap.get(node);
+            if (count == null)
+                continue;
+            if (count === 1) {
+                setHidden(node, false);
+                refCountMap.delete(node);
+            }
+            else
+                refCountMap.set(node, count - 1);
+        }
+        // Pop this observer and resume the previous one.
+        if (observerWrapper === observerStack[observerStack.length - 1]) {
+            observerStack.pop();
+            if (observerStack.length)
+                observerStack[observerStack.length - 1].observe();
+        }
+        else
+            observerStack.splice(observerStack.indexOf(observerWrapper), 1);
+    };
+}
+/** Keep `element` visible in the active `ariaHideOutside` (e.g. a nested overlay while it enters); returns the undo function. */
+export function keepVisible(element) {
+    const observer = observerStack[observerStack.length - 1];
+    if (observer && !observer.visibleNodes.has(element)) {
+        observer.visibleNodes.add(element);
+        return () => {
+            observer.visibleNodes.delete(element);
+        };
+    }
+    return undefined;
+}
+/** Test hook: forget all reference counts. */
+export function _resetAriaHideOutside() {
+    refCountMap = new WeakMap();
+    observerStack.length = 0;
+}

package/overlay/close-on-scroll.d.ts

@@ -0,0 +1 @@
+export declare const onCloseMap: WeakMap<Element, () => void>;

package/overlay/close-on-scroll.js

@@ -0,0 +1,6 @@
+// The close function an overlay trigger shares with `overlayPosition`, keyed by the trigger
+// element (React Aria's `onCloseMap`): scrolling a scroll parent of the trigger closes the overlay
+// without passing `onClose` to the positioning. Tiny on purpose (imported by both sides).
+//
+// Ported from @react-aria/overlays (useCloseOnScroll.ts), Apache-2.0, © Adobe.
+export const onCloseMap = new WeakMap();

package/overlay/contexts.d.ts

@@ -0,0 +1,34 @@
+import { type Context, type Signal } from "@rivetjs/reactivity";
+import type { Ref } from "@rivetjs/runtime/jsx-runtime";
+import type { ContextValue } from "../slots/index.jsx";
+import type { PlacementAxis } from "./position.js";
+import type { OverlayTriggerState } from "../state/overlays.js";
+import type { PopoverProps } from "../popover/index.jsx";
+/** The overlay trigger state of the nearest DialogTrigger / MenuTrigger / Select / … (RAC `OverlayTriggerStateContext`). */
+export declare const OverlayTriggerStateContext: Context<OverlayTriggerState | null>;
+/** What a trigger component passes to its `<Popover>` (RAC `PopoverContextValue`). */
+export interface PopoverContextValue extends Omit<PopoverProps, "children" | "ref"> {
+    id?: string;
+    /** Contexts to clear (provided as `null`) for the popover's children (RAC: ComboBox clears its field contexts). */
+    clearContexts?: readonly Context<any>[];
+    /** The trigger's id signal: a user `id` on the Popover replaces the generated one (RA mergeIds; Rivet). */
+    idRef?: Signal<string>;
+}
+/** Props from the nearest trigger component for its Popover (RAC `PopoverContext`). Popover clears it for its children. */
+export declare const PopoverContext: Context<ContextValue<PopoverContextValue, HTMLElement>>;
+/** What Popover / Tooltip pass to an `<OverlayArrow>` inside them (RAC `OverlayArrowContext`). */
+export interface OverlayArrowContextValue {
+    /** The placement of the overlay relative to the trigger (after flipping); null until positioned. */
+    placement: Signal<PlacementAxis | null> | PlacementAxis | null;
+    /** The arrow element ref the overlay positions (RAC: the context `ref`). */
+    ref?: Ref<HTMLDivElement>;
+    /** RA `arrowProps.style` (`left` / `top` in px) as a signal; the arrow's own `style` wins. */
+    offset?: Signal<ArrowOffset | null>;
+}
+/** The arrow's cross-axis offset within the overlay (RA `arrowProps.style`). */
+export interface ArrowOffset {
+    left?: number;
+    top?: number;
+}
+/** RAC `OverlayArrowContext` (default placement "bottom"). */
+export declare const OverlayArrowContext: Context<ContextValue<OverlayArrowContextValue, HTMLDivElement>>;

package/overlay/contexts.js

@@ -0,0 +1,21 @@
+// Ported from React Aria Components (Dialog.tsx `OverlayTriggerStateContext`, Popover.tsx
+// `PopoverContext`, OverlayArrow.tsx `OverlayArrowContext`), Apache-2.0, © Adobe.
+// The overlay contexts that trigger components (DialogTrigger, MenuTrigger, Select, ComboBox,
+// DatePicker, PreviewTrigger, SubmenuTrigger) provide and Popover / OverlayArrow consume.
+// Rivet:
+// - one tiny module (no component code): a trigger that provides `PopoverContext` does not pull the
+//   Popover component in (importing popover/index.tsx would register its own module state).
+// - every token is a `resumableContext` (ids `rv-overlay-trigger-state`, `rv-popover`,
+//   `rv-overlay-arrow`): a region re-created on a resumed page is re-provided with the value, so values
+//   must serialize — state objects (signals + JSON), `ref()` element refs, strings, numbers, booleans,
+//   inline-arrow closures.
+// - `OverlayArrowContext` carries the placement and RA's `arrowProps.style` offset as signals (they
+//   change after positioning); the arrow's own `style` wins over them, as in RAC.
+import { createContext } from "@rivetjs/reactivity";
+import { resumableContext } from "@rivetjs/runtime/resume-format";
+/** The overlay trigger state of the nearest DialogTrigger / MenuTrigger / Select / … (RAC `OverlayTriggerStateContext`). */
+export const OverlayTriggerStateContext = resumableContext(createContext(null, { id: "rv-overlay-trigger-state" }));
+/** Props from the nearest trigger component for its Popover (RAC `PopoverContext`). Popover clears it for its children. */
+export const PopoverContext = resumableContext(createContext(null, { id: "rv-popover" }));
+/** RAC `OverlayArrowContext` (default placement "bottom"). */
+export const OverlayArrowContext = resumableContext(createContext({ placement: "bottom" }, { id: "rv-overlay-arrow" }));

package/overlay/dismiss-button.d.ts

@@ -0,0 +1,10 @@
+export interface DismissButtonProps {
+    /** Called when the button is activated. */
+    onDismiss?: () => void;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    id?: string;
+    /** Locale of the default label. @default "en-US" on the server */
+    locale?: string;
+}
+export declare function DismissButton(props: DismissButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;

package/overlay/dismiss-button.jsx

@@ -0,0 +1,18 @@
+// A visually hidden button that lets screen reader users dismiss a popup without a visible close
+// affordance (React Aria `DismissButton`): place one at the start and end of a popover. Label:
+// localized "Dismiss" (`locale`, default the document language / en-US) unless `aria-label` /
+// `aria-labelledby` is given. Hidden by inline styles (no stylesheet needed).
+//
+// Ported from @react-aria/overlays (DismissButton.tsx), Apache-2.0, © Adobe.
+import { dismissLabel } from "./overlay-strings.js";
+import { visuallyHidden } from "../a11y/index.js";
+export function DismissButton(props) {
+    const onDismiss = props.onDismiss;
+    // useLabels: aria-labelledby alone keeps no default label; with both, the button labels itself too.
+    const labelledBy = props["aria-labelledby"];
+    const label = props["aria-label"] ?? (labelledBy ? undefined : dismissLabel(props.locale));
+    const id = props.id;
+    return (<div style={visuallyHidden}>
+      <button type="button" id={id} aria-label={label} aria-labelledby={labelledBy && props["aria-label"] && id ? `${id} ${labelledBy}` : labelledBy} tabIndex={-1} onClick={() => onDismiss?.()}></button>
+    </div>);
+}