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

package/resizable/engine/global/utils/findSeparatorAxis.d.ts

@@ -0,0 +1,21 @@
+export declare function findSeparatorAxis(separatorElement: HTMLElement): Readonly<{
+    disabled: boolean;
+    element: HTMLElement;
+    id: string;
+    layoutStrategy?: import("../types.js").ResizeAxisLayoutStrategy | undefined;
+    mutableState: {
+        defaultLayout: Readonly<import("../types.js").Layout> | undefined;
+        disableCursor: boolean;
+        expandedItemSizes: {
+            [itemId: string]: number;
+        };
+        layouts: {
+            [itemIds: string]: import("../types.js").Layout;
+        };
+    };
+    orientation: import("../types.js").Orientation;
+    items: import("../types.js").RegisteredResizeItem[];
+    resizePreviewMode: import("../types.js").ResizePreviewMode;
+    resizeTargetMinimumSize: import("../types.js").ResizeTargetMinimumSize;
+    separators: import("../types.js").RegisteredSeparator[];
+}>;

package/resizable/engine/global/utils/findSeparatorAxis.js

@@ -0,0 +1,12 @@
+// Ported from react-resizable-panels (lib/global/utils/findSeparatorAxis.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";
+export function findSeparatorAxis(separatorElement) {
+    const mountedAxes = getMountedAxes();
+    for (const [axis] of mountedAxes) {
+        if (axis.separators.some((separator) => separator.element === separatorElement)) {
+            return axis;
+        }
+    }
+    throw Error("Could not find parent Group for separator element");
+}

package/resizable/engine/global/utils/formatLayoutNumber.d.ts

@@ -0,0 +1 @@
+export declare function formatLayoutNumber(number: number): number;

package/resizable/engine/global/utils/formatLayoutNumber.js

@@ -0,0 +1,5 @@
+// Ported from react-resizable-panels (lib/global/utils/formatLayoutNumber.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function formatLayoutNumber(number) {
+    return parseFloat(number.toFixed(3));
+}

package/resizable/engine/global/utils/getDefaultLayout.d.ts

@@ -0,0 +1,5 @@
+import type { Layout, RegisteredResizeAxis, ResizeItemConstraints } from "../types.js";
+export declare function getDefaultLayout({ axis, itemConstraints }: {
+    axis: RegisteredResizeAxis;
+    itemConstraints: ResizeItemConstraints[];
+}): Layout;

package/resizable/engine/global/utils/getDefaultLayout.js

@@ -0,0 +1,11 @@
+// Ported from react-resizable-panels (lib/global/utils/getDefaultLayout.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { calculateDefaultLayout } from "./calculateDefaultLayout.js";
+import { validateLayoutKeys } from "./validateLayoutKeys.js";
+export function getDefaultLayout({ axis, itemConstraints }) {
+    const itemIdsKey = axis.items.map(({ id }) => id).join(",");
+    const defaultLayout = axis.mutableState.defaultLayout;
+    // Dynamic panel configurations can invalidate a supplied default layout.
+    return (axis.mutableState.layouts[itemIdsKey] ??
+        (defaultLayout && validateLayoutKeys(axis.items, defaultLayout) ? defaultLayout : calculateDefaultLayout(itemConstraints)));
+}

package/resizable/engine/global/utils/getDistanceBetweenPointAndRect.d.ts

@@ -0,0 +1,5 @@
+import type { Point } from "../../types.js";
+export declare function getDistanceBetweenPointAndRect(point: Point, rect: DOMRectReadOnly): {
+    x: number;
+    y: number;
+};

package/resizable/engine/global/utils/getDistanceBetweenPointAndRect.js

@@ -0,0 +1,6 @@
+export function getDistanceBetweenPointAndRect(point, rect) {
+    return {
+        x: point.x >= rect.left && point.x <= rect.right ? 0 : Math.min(Math.abs(point.x - rect.left), Math.abs(point.x - rect.right)),
+        y: point.y >= rect.top && point.y <= rect.bottom ? 0 : Math.min(Math.abs(point.y - rect.top), Math.abs(point.y - rect.bottom)),
+    };
+}

package/resizable/engine/global/utils/getImperativeAxisMethods.d.ts

@@ -0,0 +1,4 @@
+import type { GroupImperativeHandle } from "../../components/group/types.js";
+export declare function getImperativeAxisMethods({ axisId }: {
+    axisId: string;
+}): GroupImperativeHandle;

package/resizable/engine/global/utils/getImperativeAxisMethods.js

@@ -0,0 +1,53 @@
+import { getMountedAxes, updateMountedAxis } from "../mutable-state/axes.js";
+import { layoutsEqual } from "./layoutsEqual.js";
+import { validateAxisLayout } from "./validateAxisLayout.js";
+export function getImperativeAxisMethods({ axisId }) {
+    const find = () => {
+        const mountedAxes = getMountedAxes();
+        for (const [axis, value] of mountedAxes) {
+            if (axis.id === axisId) {
+                return { axis, ...value };
+            }
+        }
+        throw Error(`Could not find Group with id "${axisId}"`);
+    };
+    return {
+        getLayout() {
+            const { defaultLayoutDeferred, layout } = find();
+            if (defaultLayoutDeferred) {
+                // This indicates that the Group has not finished mounting yet
+                // Likely because it has been rendered inside of a hidden DOM subtree
+                // Any layout value will not have been validated and so it should not be returned
+                return {};
+            }
+            return layout;
+        },
+        setLayout(unsafeLayout) {
+            const { defaultLayoutDeferred, derivedItemConstraints, axis, axisSize, layout: prevLayout, separatorToItems } = find();
+            const nextLayout = validateAxisLayout({
+                layout: unsafeLayout,
+                itemConstraints: derivedItemConstraints,
+            });
+            if (defaultLayoutDeferred) {
+                // This indicates that the Group has not finished mounting yet
+                // Likely because it has been rendered inside of a hidden DOM subtree
+                // In this case we cannot fully validate the layout, so we shouldn't apply it
+                // It's okay to run the validate function above though,
+                // it will still warn about certain types of errors (e.g. wrong number of panels)
+                return prevLayout;
+            }
+            if (!layoutsEqual(prevLayout, nextLayout)) {
+                updateMountedAxis(axis, {
+                    defaultLayoutDeferred,
+                    derivedItemConstraints,
+                    axisSize,
+                    layout: nextLayout,
+                    requestedAxisSize: axisSize,
+                    requestedLayout: nextLayout,
+                    separatorToItems,
+                });
+            }
+            return nextLayout;
+        },
+    };
+}

package/resizable/engine/global/utils/getImperativeItemMethods.d.ts

@@ -0,0 +1,5 @@
+import type { PanelImperativeHandle } from "../../components/panel/types.js";
+export declare function getImperativeItemMethods({ axisId, itemId }: {
+    axisId: string;
+    itemId: string;
+}): PanelImperativeHandle;

package/resizable/engine/global/utils/getImperativeItemMethods.js

@@ -0,0 +1,169 @@
+import { calculateAvailableAxisSize } from "../dom/calculateAvailableAxisSize.js";
+import { getMountedAxes, updateMountedAxis } from "../mutable-state/axes.js";
+import { sizeStyleToPixels } from "../styles/sizeStyleToPixels.js";
+import { adjustLayoutByDelta } from "./adjustLayoutByDelta.js";
+import { formatLayoutNumber } from "./formatLayoutNumber.js";
+import { layoutNumbersEqual } from "./layoutNumbersEqual.js";
+import { layoutsEqual } from "./layoutsEqual.js";
+import { validateAxisLayout } from "./validateAxisLayout.js";
+export function getImperativeItemMethods({ axisId, itemId }) {
+    const find = () => {
+        const mountedAxes = getMountedAxes();
+        for (const [axis, { defaultLayoutDeferred, derivedItemConstraints, layout, axisSize, separatorToItems }] of mountedAxes) {
+            if (axis.id === axisId) {
+                return {
+                    defaultLayoutDeferred,
+                    derivedItemConstraints,
+                    axis,
+                    axisSize,
+                    layout,
+                    separatorToItems,
+                };
+            }
+        }
+        throw Error(`Group ${axisId} not found`);
+    };
+    const getItemConstraints = () => {
+        const match = find().derivedItemConstraints.find((current) => current.itemId === itemId);
+        if (match !== undefined) {
+            return match;
+        }
+        throw Error(`Panel constraints not found for Panel ${itemId}`);
+    };
+    const getItem = () => {
+        const match = find().axis.items.find((current) => current.id === itemId);
+        if (match !== undefined) {
+            return match;
+        }
+        throw Error(`Layout not found for Panel ${itemId}`);
+    };
+    const getItemSize = () => {
+        const match = find().layout[itemId];
+        if (match !== undefined) {
+            return match;
+        }
+        throw Error(`Layout not found for Panel ${itemId}`);
+    };
+    /**
+     * Compute the next (unvalidated) layout when resizing a panel imperatively.
+     *
+     * Handles two edge cases for the last panel:
+     * 1. Single panel in the axis — no sibling exists to form valid pivot indices.
+     * 2. All preceding panels are already collapsed — the normal reversed-delta
+     *    logic would cascade the freed space to the first panel. Instead the last
+     *    panel keeps the remainder so it stays the largest.
+     */
+    const computeLayout = ({ nextSize, items, prevLayout, derivedItemConstraints, }) => {
+        const prevSize = getItemSize();
+        const index = items.findIndex((current) => current.id === itemId);
+        const isFirstItem = index === 0;
+        const isLastItem = index === items.length - 1;
+        const allPreviousCollapsed = isLastItem &&
+            nextSize < prevSize &&
+            (isFirstItem ||
+                items.slice(0, index).every((_item, itemIndex) => {
+                    const pc = derivedItemConstraints[itemIndex];
+                    return pc?.collapsible && layoutNumbersEqual(pc.collapsedSize, prevLayout[pc.itemId]);
+                }));
+        if (allPreviousCollapsed) {
+            const occupiedByPrevious = items.slice(0, index).reduce((total, item) => total + prevLayout[item.id], 0);
+            return {
+                ...prevLayout,
+                [itemId]: formatLayoutNumber(100 - occupiedByPrevious),
+            };
+        }
+        return adjustLayoutByDelta({
+            delta: isLastItem ? prevSize - nextSize : nextSize - prevSize,
+            initialLayout: prevLayout,
+            itemConstraints: derivedItemConstraints,
+            pivotIndices: isLastItem ? [index - 1, index] : [index, index + 1],
+            prevLayout,
+            trigger: "imperative-api",
+        });
+    };
+    const setItemSize = (nextSize) => {
+        const prevSize = getItemSize();
+        if (nextSize === prevSize) {
+            return;
+        }
+        const { defaultLayoutDeferred, derivedItemConstraints, axis, axisSize, layout: prevLayout, separatorToItems } = find();
+        const unsafeLayout = computeLayout({
+            nextSize,
+            items: axis.items,
+            prevLayout,
+            derivedItemConstraints,
+        });
+        const nextLayout = validateAxisLayout({
+            layout: unsafeLayout,
+            itemConstraints: derivedItemConstraints,
+        });
+        if (!layoutsEqual(prevLayout, nextLayout)) {
+            updateMountedAxis(axis, {
+                defaultLayoutDeferred,
+                derivedItemConstraints,
+                axisSize,
+                layout: nextLayout,
+                requestedAxisSize: axisSize,
+                requestedLayout: nextLayout,
+                separatorToItems,
+            });
+        }
+    };
+    return {
+        collapse: () => {
+            const { collapsible, collapsedSize } = getItemConstraints();
+            const { mutableValues } = getItem();
+            const size = getItemSize();
+            if (collapsible && size !== collapsedSize) {
+                // Store previous size in to restore if expand() is called
+                mutableValues.expandToSize = size;
+                setItemSize(collapsedSize);
+            }
+        },
+        expand: () => {
+            const { collapsible, collapsedSize, minSize } = getItemConstraints();
+            const { mutableValues } = getItem();
+            const size = getItemSize();
+            if (collapsible && size === collapsedSize) {
+                // Restore pre-collapse size, fallback to minSize
+                let nextSize = mutableValues.expandToSize ?? minSize;
+                // Edge case: if minSize is 0, pick something meaningful to expand the panel to
+                if (nextSize === 0) {
+                    nextSize = 1;
+                }
+                setItemSize(nextSize);
+            }
+        },
+        getSize: () => {
+            const { axis } = find();
+            const asPercentage = getItemSize();
+            const { element } = getItem();
+            const inPixels = axis.layoutStrategy
+                ? axis.layoutStrategy.getItemSizeInPixels(itemId)
+                : axis.orientation === "horizontal"
+                    ? element.offsetWidth
+                    : element.offsetHeight;
+            return {
+                asPercentage,
+                inPixels,
+            };
+        },
+        isCollapsed: () => {
+            const { collapsible, collapsedSize } = getItemConstraints();
+            const size = getItemSize();
+            return collapsible && layoutNumbersEqual(collapsedSize, size);
+        },
+        resize: (size) => {
+            const { axis } = find();
+            const { element } = getItem();
+            const axisSize = calculateAvailableAxisSize({ axis });
+            const asPixels = sizeStyleToPixels({
+                axisSize,
+                itemElement: element,
+                styleProp: size,
+            });
+            const asPercentage = formatLayoutNumber((asPixels / axisSize) * 100);
+            setItemSize(asPercentage);
+        },
+    };
+}

package/resizable/engine/global/utils/isCoarsePointer.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Caches and returns matchMedia()'s computed value for "pointer:coarse"
+ */
+export declare function isCoarsePointer(): boolean;

package/resizable/engine/global/utils/isCoarsePointer.js

@@ -0,0 +1,17 @@
+// Ported from react-resizable-panels (lib/global/utils/isCoarsePointer.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+let cached = undefined;
+/**
+ * Caches and returns matchMedia()'s computed value for "pointer:coarse"
+ */
+export function isCoarsePointer() {
+    if (cached === undefined) {
+        if (typeof matchMedia === "function") {
+            cached = !!matchMedia("(pointer:coarse)").matches;
+        }
+        else {
+            cached = false;
+        }
+    }
+    return cached;
+}

package/resizable/engine/global/utils/isModal.d.ts

@@ -0,0 +1 @@
+export declare function isModal(element: Element): boolean;

package/resizable/engine/global/utils/isModal.js

@@ -0,0 +1,11 @@
+// Ported from react-resizable-panels (lib/global/utils/isModal.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function isModal(element) {
+    try {
+        return element.matches(":modal");
+    }
+    catch {
+        // The ":modal" pseudo-class is not supported by all environments (e.g. older browsers, JSDom)
+        return false;
+    }
+}

package/resizable/engine/global/utils/isViableHitTarget.d.ts

@@ -0,0 +1,5 @@
+export declare function isViableHitTarget({ axisElement, hitRegion, pointerEventTarget, }: {
+    axisElement: HTMLElement;
+    hitRegion: DOMRect;
+    pointerEventTarget: EventTarget | null;
+}): boolean;

package/resizable/engine/global/utils/isViableHitTarget.js

@@ -0,0 +1,50 @@
+// Ported from react-resizable-panels (lib/global/utils/isViableHitTarget.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { isHTMLElement } from "../../utils/isHTMLElement.js";
+import { compare } from "../../vendor/stacking-order.js";
+import { doRectsIntersect } from "./doRectsIntersect.js";
+import { isModal } from "./isModal.js";
+// This library adds pointer event handlers to the Window for two reasons:
+// 1. It allows detecting when the pointer is "near" to a panel border or separator element,
+//    (which can be particularly helpful on touch devices)
+// 2. It allows detecting pointer interactions that apply to multiple, nearby panels/separators
+//    (in the event of e.g. nested groups)
+//
+// Because events are handled at the Window, it's important to detect when another element is "above" a separator (e.g. a modal)
+// as this should prevent the separator element from being clicked.
+// This function does that determination.
+export function isViableHitTarget({ axisElement, hitRegion, pointerEventTarget, }) {
+    if (isHTMLElement(pointerEventTarget)) {
+        // A modal dialog is rendered in the top layer and makes everything outside of it inert,
+        // regardless of where the dialog is in the DOM (e.g. even if it's a descendant of the group).
+        // Stacking order comparison can't detect this, so check for it explicitly.
+        const dialog = pointerEventTarget.closest("dialog");
+        if (dialog && !dialog.contains(axisElement) && isModal(dialog)) {
+            return false;
+        }
+    }
+    if (!isHTMLElement(pointerEventTarget) || pointerEventTarget.contains(axisElement) || axisElement.contains(pointerEventTarget)) {
+        // Calculating stacking order has a cost;
+        // If either group or element contain the other, the click is safe and we can skip calculating the indices
+        return true;
+    }
+    if (compare(pointerEventTarget, axisElement) > 0) {
+        // If the pointer target is above the separator, check for overlap
+        // If they are near each other, but not overlapping, then the separator is still a viable target
+        //
+        // Note that it's not sufficient to compare only the target
+        // The target might be a small element inside of a larger container
+        // (For example, a SPAN or a DIV inside of a larger modal dialog)
+        let currentElement = pointerEventTarget;
+        while (currentElement) {
+            if (currentElement.contains(axisElement)) {
+                return true;
+            }
+            else if (doRectsIntersect(currentElement.getBoundingClientRect(), hitRegion)) {
+                return false;
+            }
+            currentElement = currentElement.parentElement;
+        }
+    }
+    return true;
+}

package/resizable/engine/global/utils/itemConstraintsEqual.d.ts

@@ -0,0 +1,2 @@
+import type { ResizeItemConstraints } from "../types.js";
+export declare function itemConstraintsEqual(a: ResizeItemConstraints[], b: ResizeItemConstraints[]): boolean;

package/resizable/engine/global/utils/itemConstraintsEqual.js

@@ -0,0 +1,9 @@
+// Ported from react-resizable-panels (lib/global/utils/itemConstraintsEqual.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { objectsEqual } from "./objectsEqual.js";
+export function itemConstraintsEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    return a.every((current, index) => objectsEqual(current, b[index]));
+}

package/resizable/engine/global/utils/layoutNumbersEqual.d.ts

@@ -0,0 +1 @@
+export declare function layoutNumbersEqual(actual: number, expected: number, minimumDelta?: number): boolean;

package/resizable/engine/global/utils/layoutNumbersEqual.js

@@ -0,0 +1,6 @@
+// Ported from react-resizable-panels (lib/global/utils/layoutNumbersEqual.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { formatLayoutNumber } from "./formatLayoutNumber.js";
+export function layoutNumbersEqual(actual, expected, minimumDelta = 0) {
+    return Math.abs(formatLayoutNumber(actual) - formatLayoutNumber(expected)) <= minimumDelta;
+}

package/resizable/engine/global/utils/layoutsEqual.d.ts

@@ -0,0 +1,2 @@
+import type { Layout } from "../types.js";
+export declare function layoutsEqual(a: Layout, b: Layout): boolean;

package/resizable/engine/global/utils/layoutsEqual.js

@@ -0,0 +1,15 @@
+// Ported from react-resizable-panels (lib/global/utils/layoutsEqual.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { compareLayoutNumbers } from "./compareLayoutNumbers.js";
+export function layoutsEqual(a, b) {
+    if (Object.keys(a).length !== Object.keys(b).length) {
+        return false;
+    }
+    for (const id in a) {
+        // Edge case: Panel id has been changed
+        if (b[id] === undefined || compareLayoutNumbers(a[id], b[id]) !== 0) {
+            return false;
+        }
+    }
+    return true;
+}

package/resizable/engine/global/utils/normalizeLayout.d.ts

@@ -0,0 +1,11 @@
+import type { Layout } from "../types.js";
+/**
+ * Scales a layout so that its sizes total 100% (rounded the same way as validateAxisLayout),
+ * without applying item constraints.
+ *
+ * @param itemIds Ids in render order; determines which item absorbs rounding errors
+ */
+export declare function normalizeLayout({ itemIds, layout }: {
+    itemIds: string[];
+    layout: Layout;
+}): Layout;

package/resizable/engine/global/utils/normalizeLayout.js

@@ -0,0 +1,21 @@
+import { validateAxisLayout } from "./validateAxisLayout.js";
+/**
+ * Scales a layout so that its sizes total 100% (rounded the same way as validateAxisLayout),
+ * without applying item constraints.
+ *
+ * @param itemIds Ids in render order; determines which item absorbs rounding errors
+ */
+export function normalizeLayout({ itemIds, layout }) {
+    return validateAxisLayout({
+        layout,
+        itemConstraints: itemIds.map((itemId) => ({
+            collapsedSize: 0,
+            collapsible: false,
+            defaultSize: undefined,
+            disabled: undefined,
+            itemId,
+            maxSize: 100,
+            minSize: 0,
+        })),
+    });
+}

package/resizable/engine/global/utils/notifyItemOnResize.d.ts

@@ -0,0 +1,2 @@
+import type { RegisteredResizeAxis } from "../types.js";
+export declare function notifyItemOnResize(axis: RegisteredResizeAxis, element: HTMLElement, borderBoxSize: readonly ResizeObserverSize[]): void;

package/resizable/engine/global/utils/notifyItemOnResize.js

@@ -0,0 +1,23 @@
+// Ported from react-resizable-panels (lib/global/utils/notifyItemOnResize.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { calculateAvailableAxisSize } from "../dom/calculateAvailableAxisSize.js";
+import { formatLayoutNumber } from "./formatLayoutNumber.js";
+export function notifyItemOnResize(axis, element, borderBoxSize) {
+    const resizeObserverSize = borderBoxSize[0];
+    if (!resizeObserverSize) {
+        return;
+    }
+    const item = axis.items.find((current) => current.element === element);
+    if (!item || !item.onResize) {
+        return;
+    }
+    const axisSize = calculateAvailableAxisSize({ axis });
+    const itemSize = axis.orientation === "horizontal" ? item.element.offsetWidth : item.element.offsetHeight;
+    const prevSize = item.mutableValues.prevSize;
+    const nextSize = {
+        asPercentage: formatLayoutNumber((itemSize / axisSize) * 100),
+        inPixels: itemSize,
+    };
+    item.mutableValues.prevSize = nextSize;
+    item.onResize(nextSize, item.id, prevSize);
+}

package/resizable/engine/global/utils/objectsEqual.d.ts

@@ -0,0 +1 @@
+export declare function objectsEqual(a: object, b: object): boolean;

package/resizable/engine/global/utils/objectsEqual.js

@@ -0,0 +1,14 @@
+// Ported from react-resizable-panels (lib/global/utils/objectsEqual.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function objectsEqual(a, b) {
+    const keys = Object.keys(a);
+    if (keys.length !== Object.keys(b).length) {
+        return false;
+    }
+    for (const key in a) {
+        if (a[key] !== b[key]) {
+            return false;
+        }
+    }
+    return true;
+}

package/resizable/engine/global/utils/preserveFixedItemSizes.d.ts

@@ -0,0 +1,7 @@
+import type { Layout, RegisteredResizeAxis } from "../types.js";
+export declare function preserveFixedItemSizes({ axis, nextAxisSize, prevAxisSize, prevLayout, }: {
+    axis: RegisteredResizeAxis;
+    nextAxisSize: number;
+    prevAxisSize: number;
+    prevLayout: Layout;
+}): Layout;

package/resizable/engine/global/utils/preserveFixedItemSizes.js

@@ -0,0 +1,53 @@
+// Ported from react-resizable-panels (lib/global/utils/preserveFixedItemSizes.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { formatLayoutNumber } from "./formatLayoutNumber.js";
+export function preserveFixedItemSizes({ axis, nextAxisSize, prevAxisSize, prevLayout, }) {
+    if (prevAxisSize <= 0 || nextAxisSize <= 0 || prevAxisSize === nextAxisSize) {
+        return prevLayout;
+    }
+    let fixedItemsTotalSize = 0;
+    let flexibleItemsTotalPrevSize = 0;
+    let hasPreservePixelSizeItems = false;
+    const fixedItems = new Map();
+    const flexibleItemIds = [];
+    for (const item of axis.items) {
+        const prevItemSize = prevLayout[item.id] ?? 0;
+        switch (item.constraintProps.groupResizeBehavior) {
+            case "preserve-pixel-size": {
+                hasPreservePixelSizeItems = true;
+                const prevItemSizeInPixels = (prevItemSize / 100) * prevAxisSize;
+                const nextItemSize = formatLayoutNumber((prevItemSizeInPixels / nextAxisSize) * 100);
+                fixedItems.set(item.id, nextItemSize);
+                fixedItemsTotalSize += nextItemSize;
+                break;
+            }
+            case "preserve-relative-size":
+            default: {
+                flexibleItemIds.push(item.id);
+                flexibleItemsTotalPrevSize += prevItemSize;
+                break;
+            }
+        }
+    }
+    if (!hasPreservePixelSizeItems || flexibleItemIds.length === 0) {
+        return prevLayout;
+    }
+    const remainingSize = 100 - fixedItemsTotalSize;
+    const nextLayout = { ...prevLayout };
+    fixedItems.forEach((size, itemId) => {
+        nextLayout[itemId] = size;
+    });
+    if (flexibleItemsTotalPrevSize > 0) {
+        for (const itemId of flexibleItemIds) {
+            const prevSize = prevLayout[itemId] ?? 0;
+            nextLayout[itemId] = formatLayoutNumber((prevSize / flexibleItemsTotalPrevSize) * remainingSize);
+        }
+    }
+    else {
+        const evenSize = formatLayoutNumber(remainingSize / flexibleItemIds.length);
+        for (const itemId of flexibleItemIds) {
+            nextLayout[itemId] = evenSize;
+        }
+    }
+    return nextLayout;
+}

package/resizable/engine/global/utils/recordAxisLayoutChange.d.ts

@@ -0,0 +1,15 @@
+import type { Layout, RegisteredResizeAxis, ResizeItemConstraints } from "../types.js";
+/**
+ * Updates the in-memory bookkeeping a Group needs to restore previous layouts:
+ * - Cache the requested layout (keyed by panel ids) so it persists when the panel configuration changes.
+ *   This improves UX for conditionally rendered panels without requiring defaultLayout.
+ * - Record the pre-collapse size of any collapsible panel that was just collapsed,
+ *   so that it can be restored when the panel is expanded (e.g. via the keyboard)
+ */
+export declare function recordAxisLayoutChange({ derivedItemConstraints, axis, layout, prevLayout, requestedLayout, }: {
+    derivedItemConstraints: ResizeItemConstraints[];
+    axis: RegisteredResizeAxis;
+    layout: Layout;
+    prevLayout: Layout | undefined;
+    requestedLayout: Layout;
+}): void;

package/resizable/engine/global/utils/recordAxisLayoutChange.js

@@ -0,0 +1,25 @@
+// Ported from react-resizable-panels (lib/global/utils/recordAxisLayoutChange.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { layoutNumbersEqual } from "./layoutNumbersEqual.js";
+/**
+ * Updates the in-memory bookkeeping a Group needs to restore previous layouts:
+ * - Cache the requested layout (keyed by panel ids) so it persists when the panel configuration changes.
+ *   This improves UX for conditionally rendered panels without requiring defaultLayout.
+ * - Record the pre-collapse size of any collapsible panel that was just collapsed,
+ *   so that it can be restored when the panel is expanded (e.g. via the keyboard)
+ */
+export function recordAxisLayoutChange({ derivedItemConstraints, axis, layout, prevLayout, requestedLayout, }) {
+    const itemIdsKey = axis.items.map(({ id }) => id).join(",");
+    axis.mutableState.layouts[itemIdsKey] = requestedLayout;
+    if (prevLayout) {
+        derivedItemConstraints.forEach((constraints) => {
+            if (constraints.collapsible) {
+                const isCollapsed = layoutNumbersEqual(constraints.collapsedSize, layout[constraints.itemId]);
+                const wasCollapsed = layoutNumbersEqual(constraints.collapsedSize, prevLayout[constraints.itemId]);
+                if (isCollapsed && !wasCollapsed) {
+                    axis.mutableState.expandedItemSizes[constraints.itemId] = prevLayout[constraints.itemId];
+                }
+            }
+        });
+    }
+}