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

package/resizable/engine/components/panel/types.d.ts

@@ -0,0 +1,90 @@
+export type PanelSize = {
+    asPercentage: number;
+    inPixels: number;
+};
+export type GroupResizeBehavior = "preserve-relative-size" | "preserve-pixel-size";
+export type SizeUnit = "px" | "%" | "em" | "rem" | "vh" | "vw";
+/**
+ * Imperative Panel API
+ *
+ * ℹ️ The `usePanelRef` and `usePanelCallbackRef` hooks are exported for convenience use in TypeScript projects.
+ */
+export interface PanelImperativeHandle {
+    /**
+     * Collapse the Panel to it's `collapsedSize`.
+     *
+     * ⚠️ This method will do nothing if the Panel is not `collapsible` or if it is already collapsed.
+     */
+    collapse: () => void;
+    /**
+     * Expand a collapsed Panel to its most recent size.
+     *
+     * ⚠️ This method will do nothing if the Panel is not currently collapsed.
+     */
+    expand: () => void;
+    /**
+     * Get the current size of the Panel in pixels as well as a percentage of the parent group (0..100).
+     *
+     * @return Panel size (in pixels and as a percentage of the parent group)
+     */
+    getSize: () => {
+        asPercentage: number;
+        inPixels: number;
+    };
+    /**
+     * The Panel is currently collapsed.
+     */
+    isCollapsed: () => boolean;
+    /**
+     * Update the Panel's size.
+     *
+     * Size can be in the following formats:
+     * - Percentage of the parent Group (0..100)
+     * - Pixels
+     * - Relative font units (em, rem)
+     * - Viewport relative units (vh, vw)
+     *
+     * ℹ️ Numeric values are assumed to be pixels.
+     * Strings without explicit units are assumed to be percentages (0%..100%).
+     * Percentages may also be specified as strings ending with "%" (e.g. "33%")
+     * Pixels may also be specified as strings ending with the unit "px".
+     * Other units should be specified as strings ending with their CSS property units (e.g. 1rem, 50vh)
+     *
+     * @param size New panel size
+     * @return Applied size (after validation)
+     */
+    resize: (size: number | string) => void;
+}
+/**
+ * Called when panel sizes change.
+ *
+ * @param panelSize Panel size (both as a percentage of the parent Group and in pixels)
+ * @param id Panel id (if one was provided as a prop)
+ * @param prevPanelSize Previous panel size (will be undefined on mount)
+ */
+export type OnPanelResize = ((panelSize: PanelSize, id: string | number | undefined, prevPanelSize: PanelSize | undefined) => void) | undefined;
+/**
+ * Size constraints may be specified in a variety of ways:
+ * - Percentage of the parent Group (0..100)
+ * - Pixels
+ * - Relative font units (em, rem)
+ * - Viewport relative units (vh, vw)
+ *
+ * Numeric values are assumed to be pixels.
+ * Strings without explicit units are assumed to be percentages (0%..100%).
+ *
+ * Percentages may also be specified as strings ending with "%" (e.g. "33%")
+ * Pixels may also be specified as strings ending with the unit "px".
+ *
+ * Other units should be specified as strings ending with their CSS property units (e.g. 1rem, 50vh)
+ */
+export type PanelConstraintProps = {
+    collapsedSize?: number | string | undefined;
+    collapsedThreshold?: number | string | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | string | undefined;
+    disabled?: boolean | undefined;
+    groupResizeBehavior?: GroupResizeBehavior | undefined;
+    maxSize?: number | string | undefined;
+    minSize?: number | string | undefined;
+};

package/resizable/engine/components/panel/types.js

@@ -0,0 +1,4 @@
+// Ported from react-resizable-panels (lib/components/panel/types.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: the framework-free part the engine needs (sizes, constraints, imperative handle); the component props live in
+// `../../../index.tsx` (`PanelProps`).
+export {};

package/resizable/engine/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const EMPTY_ARRAY: unknown[];
+export declare const EMPTY_DOM_RECT: DOMRectReadOnly;
+export declare const EMPTY_OBJECT: {};
+export declare const EMPTY_POINT: {
+    x: number;
+    y: number;
+};
+export declare const IDENTITY_FUNCTION: (value: any) => any;
+export declare const NOOP_FUNCTION: () => void;
+export declare const CURSOR_FLAG_HORIZONTAL_MIN = 1;
+export declare const CURSOR_FLAG_HORIZONTAL_MAX = 2;
+export declare const CURSOR_FLAG_VERTICAL_MIN = 4;
+export declare const CURSOR_FLAG_VERTICAL_MAX = 8;
+export declare const CURSOR_FLAGS_HORIZONTAL = 3;
+export declare const CURSOR_FLAGS_VERTICAL = 12;

package/resizable/engine/constants.js

@@ -0,0 +1,27 @@
+// Ported from react-resizable-panels (lib/constants.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+// Constants used for memoization
+export const EMPTY_ARRAY = [];
+export const EMPTY_DOM_RECT = {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    toJSON: () => { },
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+};
+export const EMPTY_OBJECT = {};
+export const EMPTY_POINT = { x: 0, y: 0 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const IDENTITY_FUNCTION = (value) => value;
+export const NOOP_FUNCTION = () => { };
+// Cursor flags
+export const CURSOR_FLAG_HORIZONTAL_MIN = 0b0001;
+export const CURSOR_FLAG_HORIZONTAL_MAX = 0b0010;
+export const CURSOR_FLAG_VERTICAL_MIN = 0b0100;
+export const CURSOR_FLAG_VERTICAL_MAX = 0b1000;
+export const CURSOR_FLAGS_HORIZONTAL = 0b0011;
+export const CURSOR_FLAGS_VERTICAL = 0b1100;

package/resizable/engine/global/cursor/getCursorStyle.d.ts

@@ -0,0 +1,7 @@
+import type { InteractionState } from "../mutable-state/types.js";
+import type { RegisteredResizeAxis } from "../types.js";
+export declare function getCursorStyle({ cursorFlags, axes, state, }: {
+    cursorFlags: number;
+    axes: RegisteredResizeAxis[];
+    state: InteractionState["state"];
+}): string | undefined;

package/resizable/engine/global/cursor/getCursorStyle.js

@@ -0,0 +1,94 @@
+// Ported from react-resizable-panels (lib/global/cursor/getCursorStyle.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { CURSOR_FLAG_HORIZONTAL_MAX, CURSOR_FLAG_HORIZONTAL_MIN, CURSOR_FLAG_VERTICAL_MAX, CURSOR_FLAG_VERTICAL_MIN } from "../../constants.js";
+import { supportsAdvancedCursorStyles } from "./supportsAdvancedCursorStyles.js";
+export function getCursorStyle({ cursorFlags, axes, state, }) {
+    let horizontalCount = 0;
+    let verticalCount = 0;
+    switch (state) {
+        case "active":
+        case "hover": {
+            axes.forEach((axis) => {
+                if (axis.mutableState.disableCursor) {
+                    return;
+                }
+                switch (axis.orientation) {
+                    case "horizontal": {
+                        horizontalCount++;
+                        break;
+                    }
+                    case "vertical": {
+                        verticalCount++;
+                        break;
+                    }
+                }
+            });
+        }
+    }
+    if (horizontalCount === 0 && verticalCount === 0) {
+        return undefined;
+    }
+    switch (state) {
+        case "active": {
+            if (cursorFlags) {
+                if (supportsAdvancedCursorStyles()) {
+                    const horizontalMin = (cursorFlags & CURSOR_FLAG_HORIZONTAL_MIN) !== 0;
+                    const horizontalMax = (cursorFlags & CURSOR_FLAG_HORIZONTAL_MAX) !== 0;
+                    const verticalMin = (cursorFlags & CURSOR_FLAG_VERTICAL_MIN) !== 0;
+                    const verticalMax = (cursorFlags & CURSOR_FLAG_VERTICAL_MAX) !== 0;
+                    if (horizontalMin) {
+                        if (verticalMin) {
+                            return "se-resize";
+                        }
+                        else if (verticalMax) {
+                            return "ne-resize";
+                        }
+                        else {
+                            return "e-resize";
+                        }
+                    }
+                    else if (horizontalMax) {
+                        if (verticalMin) {
+                            return "sw-resize";
+                        }
+                        else if (verticalMax) {
+                            return "nw-resize";
+                        }
+                        else {
+                            return "w-resize";
+                        }
+                    }
+                    else if (verticalMin) {
+                        return "s-resize";
+                    }
+                    else if (verticalMax) {
+                        return "n-resize";
+                    }
+                }
+            }
+            break;
+        }
+    }
+    if (supportsAdvancedCursorStyles()) {
+        if (horizontalCount > 0 && verticalCount > 0) {
+            return "move";
+        }
+        else if (horizontalCount > 0) {
+            return "ew-resize";
+        }
+        else {
+            return "ns-resize";
+        }
+    }
+    else {
+        if (horizontalCount > 0 && verticalCount > 0) {
+            return "grab";
+        }
+        else if (horizontalCount > 0) {
+            return "col-resize";
+        }
+        else {
+            return "row-resize";
+        }
+    }
+}

package/resizable/engine/global/cursor/supportsAdvancedCursorStyles.d.ts

@@ -0,0 +1,5 @@
+export declare function overrideSupportsAdvancedCursorStylesForTesting(override: boolean): void;
+/**
+ * Caches and returns if advanced cursor CSS styles are supported.
+ */
+export declare function supportsAdvancedCursorStyles(): boolean;

package/resizable/engine/global/cursor/supportsAdvancedCursorStyles.js

@@ -0,0 +1,20 @@
+// Ported from react-resizable-panels (lib/global/cursor/supportsAdvancedCursorStyles.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+let cached = undefined;
+export function overrideSupportsAdvancedCursorStylesForTesting(override) {
+    cached = override;
+}
+/**
+ * Caches and returns if advanced cursor CSS styles are supported.
+ */
+export function supportsAdvancedCursorStyles() {
+    if (cached === undefined) {
+        cached = false;
+        if (typeof window !== "undefined") {
+            if (window.navigator.userAgent.includes("Chrome") || window.navigator.userAgent.includes("Firefox")) {
+                cached = true;
+            }
+        }
+    }
+    return cached;
+}

package/resizable/engine/global/cursor/updateCursorStyle.d.ts

@@ -0,0 +1 @@
+export declare function updateCursorStyle(ownerDocument: Document): void;

package/resizable/engine/global/cursor/updateCursorStyle.js

@@ -0,0 +1,64 @@
+// Ported from react-resizable-panels (lib/global/cursor/updateCursorStyle.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 { getCursorStyle } from "./getCursorStyle.js";
+const documentToStyleMap = new WeakMap();
+export function updateCursorStyle(ownerDocument) {
+    if (!ownerDocument.defaultView || !ownerDocument.adoptedStyleSheets) {
+        // Gracefully degrade for environments that don't support these DOM APIs (e.g. Safari < 16.4, jsdom)
+        // See issues#559, issues#621, issues#554, pull#730
+        return;
+    }
+    let { prevStyle, styleSheet } = documentToStyleMap.get(ownerDocument) ?? {};
+    if (styleSheet === undefined) {
+        styleSheet = new ownerDocument.defaultView.CSSStyleSheet();
+        // adoptedStyleSheets is undefined in jsdom
+        if (ownerDocument.adoptedStyleSheets) {
+            if (Object.isExtensible(ownerDocument.adoptedStyleSheets)) {
+                ownerDocument.adoptedStyleSheets.push(styleSheet);
+            }
+            else {
+                ownerDocument.adoptedStyleSheets = [...ownerDocument.adoptedStyleSheets, styleSheet];
+            }
+        }
+    }
+    const interactionState = getInteractionState();
+    switch (interactionState.state) {
+        case "active":
+        case "hover": {
+            const cursorStyle = getCursorStyle({
+                cursorFlags: interactionState.cursorFlags,
+                axes: interactionState.hitRegions.map((current) => current.axis),
+                state: interactionState.state,
+            });
+            const nextStyle = `*, *:hover {cursor: ${cursorStyle} !important; }`;
+            if (prevStyle === nextStyle) {
+                return;
+            }
+            prevStyle = nextStyle;
+            if (cursorStyle) {
+                if (styleSheet.cssRules.length === 0) {
+                    styleSheet.insertRule(nextStyle);
+                }
+                else {
+                    styleSheet.replaceSync(nextStyle);
+                }
+            }
+            else if (styleSheet.cssRules.length === 1) {
+                styleSheet.deleteRule(0);
+            }
+            break;
+        }
+        case "inactive": {
+            prevStyle = undefined;
+            if (styleSheet.cssRules.length === 1) {
+                styleSheet.deleteRule(0);
+            }
+            break;
+        }
+    }
+    documentToStyleMap.set(ownerDocument, {
+        prevStyle,
+        styleSheet,
+    });
+}

package/resizable/engine/global/dom/calculateAvailableAxisSize.d.ts

@@ -0,0 +1,4 @@
+import type { RegisteredResizeAxis } from "../types.js";
+export declare function calculateAvailableAxisSize({ axis }: {
+    axis: RegisteredResizeAxis;
+}): number;

package/resizable/engine/global/dom/calculateAvailableAxisSize.js

@@ -0,0 +1,10 @@
+export function calculateAvailableAxisSize({ axis }) {
+    const { layoutStrategy, orientation, items } = axis;
+    if (layoutStrategy) {
+        return layoutStrategy.calculateAvailableSize();
+    }
+    return items.reduce((totalSize, item) => {
+        totalSize += orientation === "horizontal" ? item.element.offsetWidth : item.element.offsetHeight;
+        return totalSize;
+    }, 0);
+}

package/resizable/engine/global/dom/calculateHitRegions.d.ts

@@ -0,0 +1,13 @@
+import type { HitRegion, RegisteredResizeAxis } from "../types.js";
+/**
+ * Determines hit regions for a Group; a hit region is either:
+ * - 1: An explicit Separator element
+ * - 2: The edge of a Panel element that has another Panel beside it
+ *
+ * This method determines bounding rects of all regions for the particular group.
+ */
+export declare function calculateHitRegions({ expandHitTargets, axis, includeDisabled, }: {
+    expandHitTargets?: boolean;
+    axis: RegisteredResizeAxis;
+    includeDisabled?: boolean;
+}): HitRegion[];

package/resizable/engine/global/dom/calculateHitRegions.js

@@ -0,0 +1,153 @@
+// Ported from react-resizable-panels (lib/global/dom/calculateHitRegions.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { sortByElementOffset } from "../../components/group/sortByElementOffset.js";
+import { isHTMLElement } from "../../utils/isHTMLElement.js";
+import { findClosestRect } from "../utils/findClosestRect.js";
+import { expandHitTarget } from "../utils/expandHitTarget.js";
+import { calculateAvailableAxisSize } from "./calculateAvailableAxisSize.js";
+/**
+ * Determines hit regions for a Group; a hit region is either:
+ * - 1: An explicit Separator element
+ * - 2: The edge of a Panel element that has another Panel beside it
+ *
+ * This method determines bounding rects of all regions for the particular group.
+ */
+export function calculateHitRegions({ expandHitTargets = true, axis, includeDisabled = false, }) {
+    if (axis.layoutStrategy) {
+        return axis.layoutStrategy.calculateHitRegions({
+            expandHitTargets,
+            axis,
+            includeDisabled,
+        });
+    }
+    const { element: axisElement, orientation, items, separators } = axis;
+    // Sort elements by offset before traversing
+    const sortedChildElements = sortByElementOffset(orientation, Array.from(axisElement.children)
+        .filter(isHTMLElement)
+        .filter((element) => !element.hasAttribute("data-resize-preview"))
+        .map((element) => ({ element: element }))).map(({ element }) => element);
+    const hitRegions = [];
+    let disabledSeparator = false;
+    let hasInterleavedStaticContent = false;
+    let firstEnabledItemIndex = -1;
+    let axisSize;
+    let lastEnabledItemIndex = -1;
+    let numEnabledItems = 0;
+    let prevItem = undefined;
+    let pendingSeparators = [];
+    {
+        let currentItemIndex = -1;
+        for (const childElement of sortedChildElements) {
+            if (childElement.hasAttribute("data-panel")) {
+                currentItemIndex++;
+                if (!childElement.hasAttribute("data-disabled")) {
+                    numEnabledItems++;
+                    if (firstEnabledItemIndex === -1) {
+                        firstEnabledItemIndex = currentItemIndex;
+                    }
+                    lastEnabledItemIndex = currentItemIndex;
+                }
+            }
+        }
+    }
+    // If all (or all but one) of the Panels are disabled, there can be no resize interactions.
+    if (includeDisabled || numEnabledItems > 1) {
+        let currentItemIndex = -1;
+        for (const childElement of sortedChildElements) {
+            if (childElement.hasAttribute("data-panel")) {
+                currentItemIndex++;
+                const itemData = items.find((current) => current.element === childElement);
+                if (itemData) {
+                    if (prevItem) {
+                        const prevRect = prevItem.element.getBoundingClientRect();
+                        const rect = childElement.getBoundingClientRect();
+                        let pendingRectsOrSeparators;
+                        // If an explicit Separator has been rendered, always watch it
+                        // Otherwise watch the entire space between the panels
+                        // The one caveat is when there are non-interactive element(s) between panels,
+                        // in which case we may need to watch individual panel edges
+                        if (hasInterleavedStaticContent) {
+                            const firstItemEdgeRect = orientation === "horizontal"
+                                ? new DOMRect(prevRect.right, prevRect.top, 0, prevRect.height)
+                                : new DOMRect(prevRect.left, prevRect.bottom, prevRect.width, 0);
+                            const secondItemEdgeRect = orientation === "horizontal" ? new DOMRect(rect.left, rect.top, 0, rect.height) : new DOMRect(rect.left, rect.top, rect.width, 0);
+                            switch (pendingSeparators.length) {
+                                case 0: {
+                                    pendingRectsOrSeparators = [firstItemEdgeRect, secondItemEdgeRect];
+                                    break;
+                                }
+                                case 1: {
+                                    const separator = pendingSeparators[0];
+                                    const closestRect = findClosestRect({
+                                        orientation,
+                                        rects: [prevRect, rect],
+                                        targetRect: separator.element.getBoundingClientRect(),
+                                    });
+                                    pendingRectsOrSeparators = [separator, closestRect === prevRect ? secondItemEdgeRect : firstItemEdgeRect];
+                                    break;
+                                }
+                                default: {
+                                    pendingRectsOrSeparators = pendingSeparators;
+                                    break;
+                                }
+                            }
+                        }
+                        else {
+                            if (pendingSeparators.length) {
+                                pendingRectsOrSeparators = pendingSeparators;
+                            }
+                            else {
+                                pendingRectsOrSeparators = [
+                                    orientation === "horizontal"
+                                        ? new DOMRect(prevRect.right, rect.top, rect.left - prevRect.right, rect.height)
+                                        : new DOMRect(rect.left, prevRect.bottom, rect.width, rect.top - prevRect.bottom),
+                                ];
+                            }
+                        }
+                        for (const rectOrSeparator of pendingRectsOrSeparators) {
+                            const rect = expandHitTarget({
+                                expandHitTargets,
+                                axis,
+                                rect: "width" in rectOrSeparator ? rectOrSeparator : rectOrSeparator.element.getBoundingClientRect(),
+                            });
+                            const skip = currentItemIndex <= firstEnabledItemIndex || currentItemIndex > lastEnabledItemIndex;
+                            if (includeDisabled || (!disabledSeparator && !skip)) {
+                                axisSize ??= calculateAvailableAxisSize({ axis });
+                                hitRegions.push({
+                                    axis,
+                                    axisSize,
+                                    items: [prevItem, itemData],
+                                    separator: "width" in rectOrSeparator ? undefined : rectOrSeparator,
+                                    rect,
+                                });
+                            }
+                            disabledSeparator = false;
+                        }
+                    }
+                    hasInterleavedStaticContent = false;
+                    prevItem = itemData;
+                    pendingSeparators = [];
+                }
+            }
+            else if (childElement.hasAttribute("data-separator")) {
+                if (childElement.ariaDisabled !== null) {
+                    disabledSeparator = true;
+                }
+                const separatorData = separators.find((current) => current.element === childElement);
+                if (separatorData) {
+                    // Separators will be included implicitly in the area between the previous and next panel
+                    // It's important to track them though, to handle the scenario of non-interactive group content
+                    pendingSeparators.push(separatorData);
+                }
+                else {
+                    prevItem = undefined;
+                    pendingSeparators = [];
+                }
+            }
+            else {
+                hasInterleavedStaticContent = true;
+            }
+        }
+    }
+    return hitRegions;
+}

package/resizable/engine/global/dom/calculateItemConstraints.d.ts

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

package/resizable/engine/global/dom/calculateItemConstraints.js

@@ -0,0 +1,82 @@
+// Ported from react-resizable-panels (lib/global/dom/calculateItemConstraints.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { sizeStyleToPixels } from "../styles/sizeStyleToPixels.js";
+import { formatLayoutNumber } from "../utils/formatLayoutNumber.js";
+import { calculateAvailableAxisSize } from "./calculateAvailableAxisSize.js";
+export function calculateItemConstraints(axis) {
+    const { items } = axis;
+    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 items.map((current) => ({
+            groupResizeBehavior: current.constraintProps.groupResizeBehavior,
+            collapsedSize: 0,
+            collapsible: current.constraintProps.collapsible === true,
+            defaultSize: undefined,
+            disabled: current.constraintProps.disabled,
+            minSize: 0,
+            maxSize: 100,
+            itemId: current.id,
+        }));
+    }
+    return items.map((item) => {
+        const { element, constraintProps: itemConstraints } = item;
+        let collapsedSize = 0;
+        if (itemConstraints.collapsedSize !== undefined) {
+            const pixels = sizeStyleToPixels({
+                axisSize,
+                itemElement: element,
+                styleProp: itemConstraints.collapsedSize,
+            });
+            collapsedSize = formatLayoutNumber((pixels / axisSize) * 100);
+        }
+        let collapsedThreshold = undefined;
+        if (itemConstraints.collapsedThreshold !== undefined) {
+            const pixels = sizeStyleToPixels({
+                axisSize,
+                itemElement: element,
+                styleProp: itemConstraints.collapsedThreshold,
+            });
+            collapsedThreshold = formatLayoutNumber((pixels / axisSize) * 100);
+        }
+        let defaultSize = undefined;
+        if (itemConstraints.defaultSize !== undefined) {
+            const pixels = sizeStyleToPixels({
+                axisSize,
+                itemElement: element,
+                styleProp: itemConstraints.defaultSize,
+            });
+            defaultSize = formatLayoutNumber((pixels / axisSize) * 100);
+        }
+        let minSize = 0;
+        if (itemConstraints.minSize !== undefined) {
+            const pixels = sizeStyleToPixels({
+                axisSize,
+                itemElement: element,
+                styleProp: itemConstraints.minSize,
+            });
+            minSize = formatLayoutNumber((pixels / axisSize) * 100);
+        }
+        let maxSize = 100;
+        if (itemConstraints.maxSize !== undefined) {
+            const pixels = sizeStyleToPixels({
+                axisSize,
+                itemElement: element,
+                styleProp: itemConstraints.maxSize,
+            });
+            maxSize = formatLayoutNumber((pixels / axisSize) * 100);
+        }
+        return {
+            groupResizeBehavior: itemConstraints.groupResizeBehavior,
+            collapsedSize,
+            collapsedThreshold,
+            collapsible: itemConstraints.collapsible === true,
+            defaultSize,
+            disabled: itemConstraints.disabled,
+            minSize,
+            maxSize,
+            itemId: item.id,
+        };
+    });
+}

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

@@ -0,0 +1 @@
+export declare function onDocumentContextMenu(event: MouseEvent): void;

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

@@ -0,0 +1,9 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentContextMenu.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 onDocumentContextMenu(event) {
+    if (event.defaultPrevented) {
+        return;
+    }
+    completeActivePointerResize(event.currentTarget, event);
+}

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

@@ -0,0 +1 @@
+export declare function onDocumentDoubleClick(event: MouseEvent): void;

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

@@ -0,0 +1,28 @@
+// Ported from react-resizable-panels (lib/global/event-handlers/onDocumentDoubleClick.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 { findMatchingHitRegions } from "../utils/findMatchingHitRegions.js";
+import { getImperativeItemMethods } from "../utils/getImperativeItemMethods.js";
+export function onDocumentDoubleClick(event) {
+    if (event.defaultPrevented) {
+        return;
+    }
+    const mountedAxes = getMountedAxes();
+    const hitRegions = findMatchingHitRegions(event, mountedAxes);
+    hitRegions.forEach((current) => {
+        if (current.separator && !current.separator.disableDoubleClick) {
+            const itemWithDefaultSize = current.items.find((item) => item.constraintProps.defaultSize !== undefined);
+            if (itemWithDefaultSize) {
+                const defaultSize = itemWithDefaultSize.constraintProps.defaultSize;
+                const api = getImperativeItemMethods({
+                    axisId: current.axis.id,
+                    itemId: itemWithDefaultSize.id,
+                });
+                if (api && defaultSize !== undefined) {
+                    api.resize(defaultSize);
+                    event.preventDefault();
+                }
+            }
+        }
+    });
+}

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

@@ -0,0 +1 @@
+export declare function onDocumentKeyDown(event: KeyboardEvent): void;