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

package/resizable/engine/global/event-handlers/onDocumentKeyDown.js

@@ -0,0 +1,97 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentKeyDown.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { assert } from "../../utils/assert.js";
+import { getMountedAxisState } from "../mutable-state/axes.js";
+import { adjustLayoutForSeparator } from "../utils/adjustLayoutForSeparator.js";
+import { findSeparatorAxis } from "../utils/findSeparatorAxis.js";
+export function onDocumentKeyDown(event) {
+    if (event.defaultPrevented) {
+        return;
+    }
+    const separatorElement = event.currentTarget;
+    const axis = findSeparatorAxis(separatorElement);
+    if (axis.disabled) {
+        return;
+    }
+    const separator = axis.separators.find((current) => current.element === separatorElement);
+    if (separator?.disabled) {
+        return;
+    }
+    switch (event.key) {
+        case "ArrowDown": {
+            event.preventDefault();
+            if (axis.orientation === "vertical") {
+                adjustLayoutForSeparator(separatorElement, 5);
+            }
+            break;
+        }
+        case "ArrowLeft": {
+            event.preventDefault();
+            if (axis.orientation === "horizontal") {
+                adjustLayoutForSeparator(separatorElement, -5);
+            }
+            break;
+        }
+        case "ArrowRight": {
+            event.preventDefault();
+            if (axis.orientation === "horizontal") {
+                adjustLayoutForSeparator(separatorElement, 5);
+            }
+            break;
+        }
+        case "ArrowUp": {
+            event.preventDefault();
+            if (axis.orientation === "vertical") {
+                adjustLayoutForSeparator(separatorElement, -5);
+            }
+            break;
+        }
+        case "End": {
+            event.preventDefault();
+            // Moves splitter to the position that gives the primary pane its largest allowed size.
+            // This may completely collapse the secondary pane.
+            adjustLayoutForSeparator(separatorElement, 100);
+            break;
+        }
+        case "Enter": {
+            event.preventDefault();
+            // If the primary pane is not collapsed, collapses the pane.
+            // If the pane is collapsed, restores the splitter to its previous position.
+            const axisState = getMountedAxisState(axis.id, true);
+            const { derivedItemConstraints, layout, separatorToItems } = axisState;
+            const separator = axis.separators.find((current) => current.element === separatorElement);
+            assert(separator, "Matching separator not found");
+            const items = separatorToItems.get(separator);
+            assert(items, "Matching panels not found");
+            const primaryItem = items[0];
+            const constraints = derivedItemConstraints.find((current) => current.itemId === primaryItem.id);
+            assert(constraints, "Panel metadata not found");
+            if (constraints.collapsible) {
+                const prevSize = layout[primaryItem.id];
+                const nextSize = constraints.collapsedSize === prevSize ? (axis.mutableState.expandedItemSizes[primaryItem.id] ?? constraints.minSize) : constraints.collapsedSize;
+                adjustLayoutForSeparator(separatorElement, nextSize - prevSize);
+            }
+            break;
+        }
+        case "F6": {
+            event.preventDefault();
+            // Cycle through window panes.
+            const separatorElements = axis.separators.map((separator) => separator.element);
+            const index = Array.from(separatorElements).findIndex((current) => current === event.currentTarget);
+            assert(index !== null, "Index not found");
+            const nextIndex = event.shiftKey ? (index > 0 ? index - 1 : separatorElements.length - 1) : index + 1 < separatorElements.length ? index + 1 : 0;
+            const nextSeparatorElement = separatorElements[nextIndex];
+            nextSeparatorElement.focus({
+                preventScroll: true,
+            });
+            break;
+        }
+        case "Home": {
+            event.preventDefault();
+            // Moves splitter to the position that gives the primary pane its smallest allowed size.
+            // This may completely collapse the primary pane.
+            adjustLayoutForSeparator(separatorElement, -100);
+            break;
+        }
+    }
+}

package/resizable/engine/global/event-handlers/onDocumentLostPointerCapture.d.ts

@@ -0,0 +1 @@
+export declare function onDocumentLostPointerCapture(event: PointerEvent): void;

package/resizable/engine/global/event-handlers/onDocumentLostPointerCapture.js

@@ -0,0 +1,18 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentLostPointerCapture.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { getInteractionState } from "../mutable-state/interactions.js";
+import { abortActivePointerResize } from "../utils/abortActivePointerResize.js";
+export function onDocumentLostPointerCapture(event) {
+    const interactionState = getInteractionState();
+    if (interactionState.state !== "active") {
+        return;
+    }
+    // Only one element can capture a pointer at a time,
+    // so capturing it for one separator releases it from another when several separators are being dragged at once
+    // The drag has only been interrupted if none of the active separators still holds capture
+    const separatorElements = interactionState.hitRegions.flatMap(({ separator }) => (separator ? [separator.element] : []));
+    if (!separatorElements.some((element) => element === event.target) || separatorElements.some((element) => element.hasPointerCapture?.(event.pointerId))) {
+        return;
+    }
+    abortActivePointerResize(event.currentTarget);
+}

package/resizable/engine/global/event-handlers/onDocumentPointerCancel.d.ts

@@ -0,0 +1 @@
+export declare function onDocumentPointerCancel(event: PointerEvent): void;

package/resizable/engine/global/event-handlers/onDocumentPointerCancel.js

@@ -0,0 +1,8 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentPointerCancel.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { abortActivePointerResize } from "../utils/abortActivePointerResize.js";
+export function onDocumentPointerCancel(event) {
+    // The browser has taken over the pointer (e.g. a system gesture) so no "pointerup" will follow
+    // "pointercancel" coordinates are unreliable, so commit the most recent layout instead
+    abortActivePointerResize(event.currentTarget);
+}

package/resizable/engine/global/event-handlers/onDocumentPointerDown.d.ts

@@ -0,0 +1 @@
+export declare function onDocumentPointerDown(event: PointerEvent): void;

package/resizable/engine/global/event-handlers/onDocumentPointerDown.js

@@ -0,0 +1,54 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentPointerDown.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { calculateResizePreviews } from "../utils/calculateResizePreviews.js";
+import { getMountedAxes } from "../mutable-state/axes.js";
+import { updateInteractionState } from "../mutable-state/interactions.js";
+import { findMatchingHitRegions } from "../utils/findMatchingHitRegions.js";
+export function onDocumentPointerDown(event) {
+    if (event.defaultPrevented) {
+        return;
+    }
+    else if (event.pointerType === "mouse" && event.button > 0) {
+        return;
+    }
+    const mountedAxes = getMountedAxes();
+    const hitRegions = findMatchingHitRegions(event, mountedAxes);
+    if (hitRegions.length === 0) {
+        return;
+    }
+    const initialLayoutMap = new Map();
+    let didChangeFocus = false;
+    hitRegions.forEach((current) => {
+        if (current.separator) {
+            if (!didChangeFocus) {
+                didChangeFocus = true;
+                // `focusVisible` is in TS 7's lib.dom but not 5.9's: assert instead of @ts-expect-error (unused under TS 7).
+                // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#browser_compatibility
+                current.separator.element.focus({
+                    focusVisible: false,
+                    preventScroll: true,
+                });
+                // TRICKY
+                // Calling setPointerCapture() here would help with detecting pointer "pointermove"/"pointerup" events that happen over iframes
+                // but it would also prevent "click" events from firing if the use releases without actually dragging
+                // Because of this, it's safer to wait until the first "pointermove" event to set capture
+            }
+        }
+        const match = mountedAxes.get(current.axis);
+        if (match) {
+            initialLayoutMap.set(current.axis, match.layout);
+        }
+    });
+    const previews = Array.from(initialLayoutMap.keys()).flatMap((axis) => axis.resizePreviewMode === "separator" ? calculateResizePreviews(axis, hitRegions) : []);
+    updateInteractionState({
+        cursorFlags: 0,
+        didPointerMove: false,
+        hitRegions,
+        initialLayoutMap,
+        pointerDownAtPoint: { x: event.clientX, y: event.clientY },
+        previewLayoutMap: new Map(initialLayoutMap),
+        previews,
+        state: "active",
+    });
+    event.preventDefault();
+}

package/resizable/engine/global/event-handlers/onDocumentPointerLeave.d.ts

@@ -0,0 +1 @@
+export declare function onDocumentPointerLeave(event: PointerEvent): void;

package/resizable/engine/global/event-handlers/onDocumentPointerLeave.js

@@ -0,0 +1,22 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentPointerLeave.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { getMountedAxes } from "../mutable-state/axes.js";
+import { getInteractionState } from "../mutable-state/interactions.js";
+import { updateActiveHitRegions } from "../utils/updateActiveHitRegion.js";
+export function onDocumentPointerLeave(event) {
+    const mountedAxes = getMountedAxes();
+    const interactionState = getInteractionState();
+    switch (interactionState.state) {
+        case "active": {
+            updateActiveHitRegions({
+                commit: false,
+                document: event.currentTarget,
+                event,
+                hitRegions: interactionState.hitRegions,
+                initialLayoutMap: interactionState.initialLayoutMap,
+                mountedAxes,
+                prevCursorFlags: interactionState.cursorFlags,
+            });
+        }
+    }
+}

package/resizable/engine/global/event-handlers/onDocumentPointerMove.d.ts

@@ -0,0 +1 @@
+export declare function onDocumentPointerMove(event: PointerEvent): void;

package/resizable/engine/global/event-handlers/onDocumentPointerMove.js

@@ -0,0 +1,69 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentPointerMove.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { updateCursorStyle } from "../cursor/updateCursorStyle.js";
+import { getMountedAxes } from "../mutable-state/axes.js";
+import { getInteractionState, updateInteractionState } from "../mutable-state/interactions.js";
+import { abortActivePointerResize } from "../utils/abortActivePointerResize.js";
+import { findMatchingHitRegions } from "../utils/findMatchingHitRegions.js";
+import { updateActiveHitRegions } from "../utils/updateActiveHitRegion.js";
+export function onDocumentPointerMove(event) {
+    if (event.defaultPrevented) {
+        return;
+    }
+    const interactionState = getInteractionState();
+    const mountedAxes = getMountedAxes();
+    switch (interactionState.state) {
+        case "active": {
+            // Edge case (see #340)
+            // Detect when the pointer has been released outside an iframe on a different domain
+            if (
+            // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+            event.buttons === 0) {
+                // This event is a later hover, not the release position.
+                // Commit the last preview without incorporating movement after the button was released.
+                abortActivePointerResize(event.currentTarget);
+                return;
+            }
+            for (const hitRegion of interactionState.hitRegions) {
+                if (hitRegion.separator) {
+                    const { element } = hitRegion.separator;
+                    if (element.isConnected && !element.hasPointerCapture?.(event.pointerId)) {
+                        element.setPointerCapture?.(event.pointerId);
+                    }
+                }
+            }
+            updateActiveHitRegions({
+                commit: false,
+                document: event.currentTarget,
+                event,
+                hitRegions: interactionState.hitRegions,
+                initialLayoutMap: interactionState.initialLayoutMap,
+                mountedAxes,
+                pointerDownAtPoint: interactionState.pointerDownAtPoint,
+                prevCursorFlags: interactionState.cursorFlags,
+            });
+            break;
+        }
+        default: {
+            // Update HitRegions if a drag has not been started
+            const hitRegions = findMatchingHitRegions(event, mountedAxes);
+            if (hitRegions.length === 0) {
+                if (interactionState.state !== "inactive") {
+                    updateInteractionState({
+                        cursorFlags: 0,
+                        state: "inactive",
+                    });
+                }
+            }
+            else {
+                updateInteractionState({
+                    cursorFlags: 0,
+                    hitRegions,
+                    state: "hover",
+                });
+            }
+            updateCursorStyle(event.currentTarget);
+            break;
+        }
+    }
+}

package/resizable/engine/global/event-handlers/onDocumentPointerOut.d.ts

@@ -0,0 +1 @@
+export declare function onDocumentPointerOut(event: PointerEvent): void;

package/resizable/engine/global/event-handlers/onDocumentPointerOut.js

@@ -0,0 +1,20 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentPointerOut.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { getInteractionState, updateInteractionState } from "../mutable-state/interactions.js";
+export function onDocumentPointerOut(event) {
+    // For some reason, "pointerout" events don't fire if the `relatedTarget` is an iframe
+    // This can leave the `data-separator` attribute in an invalid state ("hover") which in turn might break styles
+    // The easiest fix for this case is to reset the interaction state in this specific circumstance
+    // See issues/645
+    if (event.relatedTarget instanceof HTMLIFrameElement) {
+        const interactionState = getInteractionState();
+        switch (interactionState.state) {
+            case "hover": {
+                updateInteractionState({
+                    cursorFlags: 0,
+                    state: "inactive",
+                });
+            }
+        }
+    }
+}

package/resizable/engine/global/event-handlers/onDocumentPointerUp.d.ts

@@ -0,0 +1 @@
+export declare function onDocumentPointerUp(event: PointerEvent): void;

package/resizable/engine/global/event-handlers/onDocumentPointerUp.js

@@ -0,0 +1,15 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentPointerUp.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { completeActivePointerResize } from "../utils/completeActivePointerResize.js";
+export function onDocumentPointerUp(event) {
+    if (event.defaultPrevented) {
+        return;
+    }
+    else if (event.pointerType === "mouse" && event.button > 0) {
+        return;
+    }
+    const matched = completeActivePointerResize(event.currentTarget, event);
+    if (matched) {
+        event.preventDefault();
+    }
+}

package/resizable/engine/global/event-handlers/onWindowBlur.d.ts

@@ -0,0 +1 @@
+export declare function onWindowBlur(event: FocusEvent): void;

package/resizable/engine/global/event-handlers/onWindowBlur.js

@@ -0,0 +1,11 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onWindowBlur.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { abortActivePointerResize } from "../utils/abortActivePointerResize.js";
+export function onWindowBlur(event) {
+    // Element "blur" events don't bubble, but ignore them anyway in case they are dispatched to the window
+    if (event.target !== event.currentTarget) {
+        return;
+    }
+    // Focus moved to another window or a native dialog so a "pointerup" event may never reach this document
+    abortActivePointerResize(event.currentTarget.document);
+}

package/resizable/engine/global/mountAxis.d.ts

@@ -0,0 +1,2 @@
+import type { RegisteredResizeAxis } from "./types.js";
+export declare function mountAxis(axis: RegisteredResizeAxis): () => void;

package/resizable/engine/global/mountAxis.js

@@ -0,0 +1,187 @@
+// Ported from react-resizable-panels (lib/global/mountAxis.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { updateCursorStyle } from "./cursor/updateCursorStyle.js";
+import { removeAxisFromInteraction } from "./mutable-state/interactions.js";
+import { assert } from "../utils/assert.js";
+import { calculateAvailableAxisSize } from "./dom/calculateAvailableAxisSize.js";
+import { calculateHitRegions } from "./dom/calculateHitRegions.js";
+import { calculateItemConstraints } from "./dom/calculateItemConstraints.js";
+import { onDocumentContextMenu } from "./event-handlers/onDocumentContextMenu.js";
+import { onDocumentDoubleClick } from "./event-handlers/onDocumentDoubleClick.js";
+import { onDocumentKeyDown } from "./event-handlers/onDocumentKeyDown.js";
+import { onDocumentLostPointerCapture } from "./event-handlers/onDocumentLostPointerCapture.js";
+import { onDocumentPointerCancel } from "./event-handlers/onDocumentPointerCancel.js";
+import { onDocumentPointerDown } from "./event-handlers/onDocumentPointerDown.js";
+import { onDocumentPointerLeave } from "./event-handlers/onDocumentPointerLeave.js";
+import { onDocumentPointerMove } from "./event-handlers/onDocumentPointerMove.js";
+import { onDocumentPointerOut } from "./event-handlers/onDocumentPointerOut.js";
+import { onDocumentPointerUp } from "./event-handlers/onDocumentPointerUp.js";
+import { onWindowBlur } from "./event-handlers/onWindowBlur.js";
+import { deleteMutableAxis, getMountedAxisState, updateMountedAxis } from "./mutable-state/axes.js";
+import { getDefaultLayout } from "./utils/getDefaultLayout.js";
+import { layoutsEqual } from "./utils/layoutsEqual.js";
+import { normalizeLayout } from "./utils/normalizeLayout.js";
+import { notifyItemOnResize } from "./utils/notifyItemOnResize.js";
+import { itemConstraintsEqual } from "./utils/itemConstraintsEqual.js";
+import { preserveFixedItemSizes } from "./utils/preserveFixedItemSizes.js";
+import { validateAxisLayout } from "./utils/validateAxisLayout.js";
+const ownerDocumentReferenceCounts = new Map();
+export function mountAxis(axis) {
+    let isMounted = true;
+    assert(axis.element.ownerDocument.defaultView, "Cannot register an unmounted Group");
+    const ResizeObserver = axis.element.ownerDocument.defaultView.ResizeObserver;
+    const itemIds = new Set();
+    const separatorIds = new Set();
+    // Add Panels with onResize callbacks to ResizeObserver
+    // Add Group to ResizeObserver also in order to sync % based constraints
+    const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+            const { borderBoxSize, target } = entry;
+            if (target === axis.element) {
+                if (isMounted) {
+                    const axisSize = calculateAvailableAxisSize({ axis });
+                    if (axisSize === 0) {
+                        // Can't calculate anything meaningful if the group has a width/height of 0
+                        // (This could indicate that it's within a hidden subtree)
+                        return;
+                    }
+                    const axisState = getMountedAxisState(axis.id);
+                    if (!axisState) {
+                        // Not mounted yet
+                        return;
+                    }
+                    // Update non-percentage based constraints
+                    const nextDerivedItemConstraints = calculateItemConstraints(axis);
+                    // Revalidate layout in case constraints have changed or group size changed
+                    // Start from the requested layout so that constraints only temporarily clamp item sizes (see #720)
+                    let requestedAxisSize = axisState.requestedAxisSize;
+                    let requestedLayout = axisState.requestedLayout;
+                    if (axisState.defaultLayoutDeferred) {
+                        requestedAxisSize = axisSize;
+                        requestedLayout = normalizeLayout({
+                            itemIds: axis.items.map(({ id }) => id),
+                            layout: getDefaultLayout({
+                                axis,
+                                itemConstraints: nextDerivedItemConstraints,
+                            }),
+                        });
+                    }
+                    const unsafeLayout = preserveFixedItemSizes({
+                        axis,
+                        nextAxisSize: axisSize,
+                        prevAxisSize: requestedAxisSize,
+                        prevLayout: requestedLayout,
+                    });
+                    const nextLayout = validateAxisLayout({
+                        layout: unsafeLayout,
+                        itemConstraints: nextDerivedItemConstraints,
+                    });
+                    if (!axisState.defaultLayoutDeferred &&
+                        layoutsEqual(axisState.layout, nextLayout) &&
+                        itemConstraintsEqual(axisState.derivedItemConstraints, nextDerivedItemConstraints) &&
+                        axisState.axisSize === axisSize) {
+                        continue;
+                    }
+                    updateMountedAxis(axis, {
+                        defaultLayoutDeferred: false,
+                        derivedItemConstraints: nextDerivedItemConstraints,
+                        axisSize,
+                        layout: nextLayout,
+                        requestedAxisSize,
+                        requestedLayout,
+                        separatorToItems: axisState.separatorToItems,
+                    });
+                }
+            }
+            else {
+                notifyItemOnResize(axis, target, borderBoxSize);
+            }
+        }
+    });
+    resizeObserver.observe(axis.element);
+    axis.items.forEach((item) => {
+        assert(!itemIds.has(item.id), `Panel ids must be unique; id "${item.id}" was used more than once`);
+        itemIds.add(item.id);
+        if (item.onResize) {
+            resizeObserver.observe(item.element);
+        }
+    });
+    const axisSize = calculateAvailableAxisSize({ axis });
+    // Calculate initial layout for the new Panel configuration
+    const derivedItemConstraints = calculateItemConstraints(axis);
+    const defaultLayoutUnsafe = getDefaultLayout({
+        axis,
+        itemConstraints: derivedItemConstraints,
+    });
+    const defaultLayoutSafe = validateAxisLayout({
+        layout: defaultLayoutUnsafe,
+        itemConstraints: derivedItemConstraints,
+    });
+    const ownerDocument = axis.element.ownerDocument;
+    const ownerWindow = ownerDocument.defaultView;
+    ownerDocumentReferenceCounts.set(ownerDocument, (ownerDocumentReferenceCounts.get(ownerDocument) ?? 0) + 1);
+    const separatorToItems = new Map();
+    // Include disabled separators because enabling them later does not rebuild this map.
+    // The keyboard handler checks disabled state before resizing.
+    const hitRegions = calculateHitRegions({ axis, includeDisabled: true });
+    hitRegions.forEach((hitRegion) => {
+        if (hitRegion.separator) {
+            separatorToItems.set(hitRegion.separator, hitRegion.items);
+        }
+    });
+    updateMountedAxis(axis, {
+        defaultLayoutDeferred: axisSize === 0,
+        derivedItemConstraints,
+        axisSize,
+        layout: defaultLayoutSafe,
+        requestedAxisSize: axisSize,
+        requestedLayout: normalizeLayout({
+            itemIds: axis.items.map(({ id }) => id),
+            layout: defaultLayoutUnsafe,
+        }),
+        separatorToItems,
+    });
+    axis.separators.forEach((separator) => {
+        assert(!separatorIds.has(separator.id), `Separator ids must be unique; id "${separator.id}" was used more than once`);
+        separatorIds.add(separator.id);
+        separator.element.addEventListener("keydown", onDocumentKeyDown);
+    });
+    // If this is the first group to be mounted, initialize event handlers
+    if (ownerDocumentReferenceCounts.get(ownerDocument) === 1) {
+        ownerDocument.addEventListener("contextmenu", onDocumentContextMenu, true);
+        ownerDocument.addEventListener("dblclick", onDocumentDoubleClick, true);
+        ownerDocument.addEventListener("lostpointercapture", onDocumentLostPointerCapture, true);
+        ownerDocument.addEventListener("pointercancel", onDocumentPointerCancel, true);
+        ownerDocument.addEventListener("pointerdown", onDocumentPointerDown, true);
+        ownerDocument.addEventListener("pointerleave", onDocumentPointerLeave);
+        ownerDocument.addEventListener("pointermove", onDocumentPointerMove);
+        ownerDocument.addEventListener("pointerout", onDocumentPointerOut);
+        ownerDocument.addEventListener("pointerup", onDocumentPointerUp, true);
+        ownerWindow?.addEventListener("blur", onWindowBlur);
+    }
+    return function unmountAxis() {
+        isMounted = false;
+        ownerDocumentReferenceCounts.set(ownerDocument, Math.max(0, (ownerDocumentReferenceCounts.get(ownerDocument) ?? 0) - 1));
+        deleteMutableAxis(axis);
+        if (removeAxisFromInteraction(axis)) {
+            updateCursorStyle(ownerDocument);
+        }
+        axis.separators.forEach((separator) => {
+            separator.element.removeEventListener("keydown", onDocumentKeyDown);
+        });
+        // If this was the last group to be mounted, tear down event handlers
+        if (!ownerDocumentReferenceCounts.get(ownerDocument)) {
+            ownerDocument.removeEventListener("contextmenu", onDocumentContextMenu, true);
+            ownerDocument.removeEventListener("dblclick", onDocumentDoubleClick, true);
+            ownerDocument.removeEventListener("lostpointercapture", onDocumentLostPointerCapture, true);
+            ownerDocument.removeEventListener("pointercancel", onDocumentPointerCancel, true);
+            ownerDocument.removeEventListener("pointerdown", onDocumentPointerDown, true);
+            ownerDocument.removeEventListener("pointerleave", onDocumentPointerLeave);
+            ownerDocument.removeEventListener("pointermove", onDocumentPointerMove);
+            ownerDocument.removeEventListener("pointerout", onDocumentPointerOut);
+            ownerDocument.removeEventListener("pointerup", onDocumentPointerUp, true);
+            ownerWindow?.removeEventListener("blur", onWindowBlur);
+        }
+        resizeObserver.disconnect();
+    };
+}

package/resizable/engine/global/mutable-state/axes.d.ts

@@ -0,0 +1,37 @@
+import type { Layout, RegisteredResizeAxis, ResizeItemConstraints } from "../types.js";
+import type { SeparatorToItemsMap } from "./types.js";
+type State = {
+    defaultLayoutDeferred: boolean;
+    derivedItemConstraints: ResizeItemConstraints[];
+    axisSize: number;
+    layout: Layout;
+    /**
+     * Layout most recently requested by the user or application (e.g. default layout, pointer or keyboard resize, imperative API).
+     * When the axis is resized, `layout` is re-derived from this value so that constraints don't permanently alter it.
+     * See #720.
+     */
+    requestedLayout: Layout;
+    /**
+     * Axis size (in pixels) when the requested layout was recorded; used for `preserve-pixel-size` items.
+     */
+    requestedAxisSize: number;
+    separatorToItems: SeparatorToItemsMap;
+};
+export type MountedAxes = Map<RegisteredResizeAxis, State>;
+type AxisChangeEvent = {
+    axis: RegisteredResizeAxis;
+    isUserInteraction: boolean;
+    next: State;
+    prev: State | undefined;
+};
+export declare function deleteMutableAxis(axis: RegisteredResizeAxis): void;
+export declare function getRegisteredAxis(axisId: string): RegisteredResizeAxis | undefined;
+export declare function getRegisteredAxis(axisId: string, assert: true): RegisteredResizeAxis;
+export declare function getMountedAxisState(axisId: string): State | undefined;
+export declare function getMountedAxisState(axisId: string, assert: true): State;
+export declare function getMountedAxes(): MountedAxes;
+export declare function subscribeToMountedAxis(axisId: string, callback: (event: AxisChangeEvent) => void): () => void;
+export declare function updateMountedAxis(axis: RegisteredResizeAxis, next: State, meta?: {
+    isUserInteraction?: boolean;
+}): void;
+export {};

package/resizable/engine/global/mutable-state/axes.js

@@ -0,0 +1,52 @@
+// Ported from react-resizable-panels (lib/global/mutable-state/axes.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { EventEmitter } from "../../utils/EventEmitter.js";
+let map = new Map();
+const eventEmitter = new EventEmitter();
+export function deleteMutableAxis(axis) {
+    map = new Map(map);
+    map.delete(axis);
+}
+export function getRegisteredAxis(axisId, assert) {
+    for (const [axis] of map) {
+        if (axis.id === axisId) {
+            return axis;
+        }
+    }
+    if (assert) {
+        throw Error(`Could not find data for Group with id ${axisId}`);
+    }
+    return undefined;
+}
+export function getMountedAxisState(axisId, assert) {
+    for (const [axis, mountedAxis] of map) {
+        if (axis.id === axisId) {
+            return mountedAxis;
+        }
+    }
+    if (assert) {
+        throw Error(`Could not find data for Group with id ${axisId}`);
+    }
+    return undefined;
+}
+export function getMountedAxes() {
+    return map;
+}
+export function subscribeToMountedAxis(axisId, callback) {
+    return eventEmitter.addListener("axisChange", (event) => {
+        if (event.axis.id === axisId) {
+            callback(event);
+        }
+    });
+}
+export function updateMountedAxis(axis, next, meta) {
+    const prev = map.get(axis);
+    map = new Map(map);
+    map.set(axis, next);
+    eventEmitter.emit("axisChange", {
+        axis,
+        isUserInteraction: meta?.isUserInteraction === true,
+        prev,
+        next,
+    });
+}

package/resizable/engine/global/mutable-state/interactions.d.ts

@@ -0,0 +1,17 @@
+import type { RegisteredResizeAxis, RegisteredSeparator } from "../types.js";
+import type { InteractionActive, InteractionState, ResizePreview } from "./types.js";
+type ChangeEvent = {
+    next: InteractionState;
+    prev: InteractionState;
+};
+export declare function getInteractionState(): InteractionState;
+export declare function subscribeToInteractionState(callback: (event: ChangeEvent) => void): () => void;
+export declare function updateCursorFlags(cursorFlags: number, previews?: ResizePreview[], previewLayoutMap?: InteractionActive["previewLayoutMap"], didPointerMove?: boolean): void;
+export declare function updateInteractionState(next: InteractionState): void;
+/**
+ * The preview prop is read through a registered separator getter.
+ * Notify after its layout effect has updated that getter, without re-registering the group.
+ */
+export declare function notifySeparatorPreviewChanged(separator: RegisteredSeparator): void;
+export declare function removeAxisFromInteraction(axis: RegisteredResizeAxis): boolean;
+export {};