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

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

@@ -0,0 +1,18 @@
+import type { Point } from "../../types.js";
+import { type MountedAxes } from "../mutable-state/axes.js";
+import type { HitRegion, Layout, RegisteredResizeAxis } from "../types.js";
+export declare function updateActiveHitRegions({ commit, document, event, hitRegions, initialLayoutMap, mountedAxes, pointerDownAtPoint, prevCursorFlags, }: {
+    commit: boolean;
+    document: Document;
+    event: {
+        clientX: number;
+        clientY: number;
+        movementX: number;
+        movementY: number;
+    };
+    hitRegions: HitRegion[];
+    initialLayoutMap: Map<RegisteredResizeAxis, Layout>;
+    mountedAxes: MountedAxes;
+    pointerDownAtPoint?: Point;
+    prevCursorFlags: number;
+}): void;

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

@@ -0,0 +1,119 @@
+// Ported from react-resizable-panels (lib/global/utils/updateActiveHitRegion.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, CURSOR_FLAGS_HORIZONTAL, CURSOR_FLAGS_VERTICAL, } from "../../constants.js";
+import { updateCursorStyle } from "../cursor/updateCursorStyle.js";
+import { updateMountedAxis } from "../mutable-state/axes.js";
+import { getInteractionState, updateCursorFlags } from "../mutable-state/interactions.js";
+import { adjustLayoutByDelta } from "./adjustLayoutByDelta.js";
+import { layoutsEqual } from "./layoutsEqual.js";
+export function updateActiveHitRegions({ commit, document, event, hitRegions, initialLayoutMap, mountedAxes, pointerDownAtPoint, prevCursorFlags, }) {
+    let nextCursorFlags = 0;
+    const interaction = getInteractionState();
+    let previews = interaction.state === "active" ? interaction.previews : [];
+    const previewLayoutMap = new Map(interaction.state === "active" ? interaction.previewLayoutMap : undefined);
+    // Note that HitRegions are frozen once a drag has started
+    // Modify the Group layouts for all matching HitRegions though
+    hitRegions.forEach((current) => {
+        const { axis, axisSize } = current;
+        const { orientation, items } = axis;
+        if (commit && axis.resizePreviewMode !== "separator") {
+            return;
+        }
+        const { disableCursor } = axis.mutableState;
+        let deltaAsPercentage = 0;
+        if (pointerDownAtPoint) {
+            if (orientation === "horizontal") {
+                deltaAsPercentage = ((event.clientX - pointerDownAtPoint.x) / axisSize) * 100;
+            }
+            else {
+                deltaAsPercentage = ((event.clientY - pointerDownAtPoint.y) / axisSize) * 100;
+            }
+        }
+        else {
+            if (orientation === "horizontal") {
+                deltaAsPercentage = event.clientX < 0 ? -100 : 100;
+            }
+            else {
+                deltaAsPercentage = event.clientY < 0 ? -100 : 100;
+            }
+        }
+        const initialLayout = initialLayoutMap.get(axis);
+        const axisState = mountedAxes.get(axis);
+        if (!initialLayout || !axisState) {
+            return;
+        }
+        const { defaultLayoutDeferred, derivedItemConstraints, axisSize: mountedAxisSize, layout: mountedLayout, separatorToItems } = axisState;
+        if (derivedItemConstraints && mountedLayout && separatorToItems) {
+            const prevLayout = axis.resizePreviewMode === "separator" ? (previewLayoutMap.get(axis) ?? mountedLayout) : mountedLayout;
+            const nextLayout = adjustLayoutByDelta({
+                delta: deltaAsPercentage,
+                initialLayout,
+                itemConstraints: derivedItemConstraints,
+                pivotIndices: current.items.map((item) => items.indexOf(item)),
+                prevLayout,
+                trigger: "mouse-or-touch",
+            });
+            // Preview every moved boundary, deferring the layout update until release.
+            if (axis.resizePreviewMode === "separator" && !commit && !layoutsEqual(nextLayout, prevLayout)) {
+                previewLayoutMap.set(axis, nextLayout);
+                let total = 0;
+                const offsets = items.map((item) => {
+                    total += nextLayout[item.id] - initialLayout[item.id];
+                    return total * (axisSize / 100);
+                });
+                previews = previews.map((preview) => {
+                    if (preview.axis !== axis) {
+                        return preview;
+                    }
+                    const offset = offsets[preview.itemIndex];
+                    return offset === preview.offset ? preview : { ...preview, offset };
+                });
+            }
+            if (layoutsEqual(nextLayout, prevLayout)) {
+                if (deltaAsPercentage !== 0 && !disableCursor) {
+                    // An unchanged layout means the cursor has exceeded the allowed bounds
+                    switch (orientation) {
+                        case "horizontal": {
+                            nextCursorFlags |= deltaAsPercentage < 0 ? CURSOR_FLAG_HORIZONTAL_MIN : CURSOR_FLAG_HORIZONTAL_MAX;
+                            break;
+                        }
+                        case "vertical": {
+                            nextCursorFlags |= deltaAsPercentage < 0 ? CURSOR_FLAG_VERTICAL_MIN : CURSOR_FLAG_VERTICAL_MAX;
+                            break;
+                        }
+                    }
+                }
+            }
+            if ((axis.resizePreviewMode !== "separator" || commit) && !layoutsEqual(nextLayout, mountedLayout)) {
+                updateMountedAxis(current.axis, {
+                    defaultLayoutDeferred,
+                    derivedItemConstraints,
+                    axisSize: mountedAxisSize,
+                    layout: nextLayout,
+                    requestedAxisSize: mountedAxisSize,
+                    requestedLayout: nextLayout,
+                    separatorToItems,
+                });
+            }
+        }
+    });
+    // Edge case
+    // Re-use previous horizontal/vertical cursor flags if there's been no movement since the last event
+    // This accounts for edge cases in browsers like Firefox that sometimes round clientX/clientY values
+    let cursorFlags = 0;
+    if (event.movementX === 0) {
+        cursorFlags |= prevCursorFlags & CURSOR_FLAGS_HORIZONTAL;
+    }
+    else {
+        cursorFlags |= nextCursorFlags & CURSOR_FLAGS_HORIZONTAL;
+    }
+    if (event.movementY === 0) {
+        cursorFlags |= prevCursorFlags & CURSOR_FLAGS_VERTICAL;
+    }
+    else {
+        cursorFlags |= nextCursorFlags & CURSOR_FLAGS_VERTICAL;
+    }
+    const didPointerMove = interaction.state === "active" && (event.clientX !== interaction.pointerDownAtPoint.x || event.clientY !== interaction.pointerDownAtPoint.y);
+    updateCursorFlags(cursorFlags, previews, previewLayoutMap, didPointerMove);
+    updateCursorStyle(document);
+}

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

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

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

@@ -0,0 +1,70 @@
+// Ported from react-resizable-panels (lib/global/utils/validateAxisLayout.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 { layoutNumbersEqual } from "./layoutNumbersEqual.js";
+import { validateItemSize } from "./validateItemSize.js";
+// All units must be in percentages; pixel values should be pre-converted
+export function validateAxisLayout({ layout, itemConstraints }) {
+    const prevLayout = itemConstraints.map(({ itemId }) => layout[itemId]);
+    const nextLayout = [...prevLayout];
+    const nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+    // Validate layout expectations
+    if (Object.keys(layout).length !== itemConstraints.length) {
+        throw Error(`Invalid ${itemConstraints.length} panel layout: ${Object.values(layout)
+            .map((size) => `${size}%`)
+            .join(", ")}`);
+    }
+    else if (!layoutNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
+        for (let index = 0; index < itemConstraints.length; index++) {
+            const unsafeSize = nextLayout[index];
+            assert(unsafeSize != null, `No layout data found for index ${index}`);
+            const safeSize = (100 / nextLayoutTotalSize) * unsafeSize;
+            nextLayout[index] = safeSize;
+        }
+    }
+    let remainingSize = 0;
+    // First pass: Validate the proposed layout given each panel's constraints
+    for (let index = 0; index < itemConstraints.length; index++) {
+        const prevSize = prevLayout[index];
+        assert(prevSize != null, `No layout data found for index ${index}`);
+        const unsafeSize = nextLayout[index];
+        assert(unsafeSize != null, `No layout data found for index ${index}`);
+        const safeSize = validateItemSize({
+            overrideDisabledItems: true,
+            itemConstraints: itemConstraints[index],
+            prevSize,
+            size: unsafeSize,
+        });
+        if (unsafeSize != safeSize) {
+            remainingSize += unsafeSize - safeSize;
+            nextLayout[index] = safeSize;
+        }
+    }
+    // If there is additional, left over space, assign it to any panel(s) that permits it
+    // (It's not worth taking multiple additional passes to evenly distribute)
+    if (!layoutNumbersEqual(remainingSize, 0)) {
+        for (let index = 0; index < itemConstraints.length; index++) {
+            const prevSize = nextLayout[index];
+            assert(prevSize != null, `No layout data found for index ${index}`);
+            const unsafeSize = prevSize + remainingSize;
+            const safeSize = validateItemSize({
+                overrideDisabledItems: true,
+                itemConstraints: itemConstraints[index],
+                prevSize,
+                size: unsafeSize,
+            });
+            if (prevSize !== safeSize) {
+                remainingSize -= safeSize - prevSize;
+                nextLayout[index] = safeSize;
+                // Once we've used up the remainder, bail
+                if (layoutNumbersEqual(remainingSize, 0)) {
+                    break;
+                }
+            }
+        }
+    }
+    return nextLayout.reduce((accumulated, current, index) => {
+        accumulated[itemConstraints[index].itemId] = current;
+        return accumulated;
+    }, {});
+}

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

@@ -0,0 +1,7 @@
+import type { ResizeItemConstraints } from "../types.js";
+export declare function validateItemSize({ overrideDisabledItems, itemConstraints, prevSize, size, }: {
+    overrideDisabledItems?: boolean;
+    itemConstraints: ResizeItemConstraints;
+    prevSize: number;
+    size: number;
+}): number;

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

@@ -0,0 +1,31 @@
+// Ported from react-resizable-panels (lib/global/utils/validateItemSize.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { compareLayoutNumbers } from "./compareLayoutNumbers.js";
+import { formatLayoutNumber } from "./formatLayoutNumber.js";
+// Panel size must be in percentages; pixel values should be pre-converted
+export function validateItemSize({ overrideDisabledItems, itemConstraints, prevSize, size, }) {
+    const { collapsedSize = 0, collapsedThreshold, collapsible, disabled, maxSize = 100, minSize = 0 } = itemConstraints;
+    if (disabled && !overrideDisabledItems) {
+        return prevSize;
+    }
+    if (compareLayoutNumbers(size, minSize) < 0) {
+        if (collapsible) {
+            const threshold = collapsedThreshold ?? (minSize - collapsedSize) / 2;
+            const wasCollapsed = compareLayoutNumbers(prevSize, collapsedSize) <= 0;
+            const boundary = wasCollapsed ? collapsedSize + threshold : minSize - threshold;
+            const comparison = compareLayoutNumbers(size, boundary);
+            if (compareLayoutNumbers(size, collapsedSize) <= 0 || comparison < 0 || (collapsedThreshold !== undefined && wasCollapsed && comparison === 0)) {
+                size = collapsedSize;
+            }
+            else {
+                size = minSize;
+            }
+        }
+        else {
+            size = minSize;
+        }
+    }
+    size = Math.min(maxSize, size);
+    size = formatLayoutNumber(size);
+    return size;
+}

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

@@ -0,0 +1,2 @@
+import type { Layout, RegisteredResizeItem } from "../types.js";
+export declare function validateLayoutKeys(items: RegisteredResizeItem[], layout: Layout): boolean;

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

@@ -0,0 +1,13 @@
+export function validateLayoutKeys(items, layout) {
+    const itemIds = items.map((item) => item.id);
+    const layoutKeys = Object.keys(layout);
+    if (itemIds.length !== layoutKeys.length) {
+        return false;
+    }
+    for (const itemId of itemIds) {
+        if (!layoutKeys.includes(itemId)) {
+            return false;
+        }
+    }
+    return true;
+}

package/resizable/engine/types.d.ts

@@ -0,0 +1,13 @@
+export type Dimensions = {
+    height: number;
+    width: number;
+};
+export type Point = {
+    x: number;
+    y: number;
+};
+export type PointerPrecision = {
+    coarse: number;
+    precise: number;
+};
+export type Rect = Dimensions & Point;

package/resizable/engine/types.js

@@ -0,0 +1 @@
+export {};

package/resizable/engine/utils/EventEmitter.d.ts

@@ -0,0 +1,11 @@
+export type EventMap = {
+    [key: string]: unknown;
+};
+export type EventListener<Data> = (data: Data) => void;
+export declare class EventEmitter<Events extends EventMap> {
+    #private;
+    addListener<Type extends keyof Events>(type: Type, listener: EventListener<Events[Type]>): () => void;
+    emit<Type extends keyof Events>(type: Type, data: Events[Type]): void;
+    removeAllListeners(): void;
+    removeListener<Type extends keyof Events>(type: Type, listener: EventListener<Events[Type]>): void;
+}

package/resizable/engine/utils/EventEmitter.js

@@ -0,0 +1,60 @@
+export class EventEmitter {
+    #listenerMap = {};
+    addListener(type, listener) {
+        const listeners = this.#listenerMap[type];
+        if (listeners === undefined) {
+            this.#listenerMap[type] = [listener];
+        }
+        else {
+            if (!listeners.includes(listener)) {
+                listeners.push(listener);
+            }
+        }
+        return () => {
+            this.removeListener(type, listener);
+        };
+    }
+    emit(type, data) {
+        const listeners = this.#listenerMap[type];
+        if (listeners !== undefined) {
+            if (listeners.length === 1) {
+                const listener = listeners[0];
+                listener.call(null, data);
+            }
+            else {
+                let didThrow = false;
+                let caughtError = null;
+                // Clone the current listeners before calling
+                // in case calling triggers listeners to be added or removed
+                const clonedListeners = Array.from(listeners);
+                for (let i = 0; i < clonedListeners.length; i++) {
+                    const listener = clonedListeners[i];
+                    try {
+                        listener.call(null, data);
+                    }
+                    catch (error) {
+                        if (caughtError === null) {
+                            didThrow = true;
+                            caughtError = error;
+                        }
+                    }
+                }
+                if (didThrow) {
+                    throw caughtError;
+                }
+            }
+        }
+    }
+    removeAllListeners() {
+        this.#listenerMap = {};
+    }
+    removeListener(type, listener) {
+        const listeners = this.#listenerMap[type];
+        if (listeners !== undefined) {
+            const index = listeners.indexOf(listener);
+            if (index >= 0) {
+                listeners.splice(index, 1);
+            }
+        }
+    }
+}

package/resizable/engine/utils/assert.d.ts

@@ -0,0 +1 @@
+export declare function assert(expectedCondition: unknown, message?: string): asserts expectedCondition;

package/resizable/engine/utils/assert.js

@@ -0,0 +1,7 @@
+// Ported from react-resizable-panels (lib/utils/assert.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function assert(expectedCondition, message = "Assertion error") {
+    if (!expectedCondition) {
+        throw Error(message);
+    }
+}

package/resizable/engine/utils/isArrayEqual.d.ts

@@ -0,0 +1 @@
+export declare function isArrayEqual(a: number[], b: number[]): boolean;

package/resizable/engine/utils/isArrayEqual.js

@@ -0,0 +1,15 @@
+// Ported from react-resizable-panels (lib/utils/isArrayEqual.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function isArrayEqual(a, b) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    else {
+        for (let index = 0; index < a.length; index++) {
+            if (a[index] != b[index]) {
+                return false;
+            }
+        }
+    }
+    return true;
+}

package/resizable/engine/utils/isHTMLElement.d.ts

@@ -0,0 +1 @@
+export declare function isHTMLElement(value: unknown): value is HTMLElement;

package/resizable/engine/utils/isHTMLElement.js

@@ -0,0 +1,6 @@
+// Ported from react-resizable-panels (lib/utils/isHTMLElement.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+// Detects HTMLElement without requiring instanceof and browser globals
+export function isHTMLElement(value) {
+    return value !== null && typeof value === "object" && "nodeType" in value && value.nodeType === Node.ELEMENT_NODE;
+}

package/resizable/engine/utils/isShadowRoot.d.ts

@@ -0,0 +1 @@
+export declare function isShadowRoot(value: unknown): value is ShadowRoot;

package/resizable/engine/utils/isShadowRoot.js

@@ -0,0 +1,6 @@
+// Ported from react-resizable-panels (lib/utils/isShadowRoot.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+// Detects ShadowRoot without requiring instanceof and browser globals
+export function isShadowRoot(value) {
+    return value !== null && typeof value === "object" && "nodeType" in value && value.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+}

package/resizable/engine/vendor/stacking-order.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param {HTMLElement | SVGElement} a
+ * @param {HTMLElement | SVGElement} b
+ */
+export declare function compare(a: HTMLElement | SVGElement, b: HTMLElement | SVGElement): number;

package/resizable/engine/vendor/stacking-order.js

@@ -0,0 +1,122 @@
+// Ported from react-resizable-panels (lib/vendor/stacking-order.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+// Forked from NPM stacking-order@2.0.0
+// - github.com/Rich-Harris/stacking-order/issues/3
+// - github.com/Rich-Harris/stacking-order/issues/6
+import { assert } from "../utils/assert.js";
+import { isShadowRoot } from "../utils/isShadowRoot.js";
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param {HTMLElement | SVGElement} a
+ * @param {HTMLElement | SVGElement} b
+ */
+export function compare(a, b) {
+    if (a === b)
+        throw new Error("Cannot compare node with itself");
+    const ancestors = {
+        a: get_ancestors(a),
+        b: get_ancestors(b),
+    };
+    let common_ancestor;
+    // remove shared ancestors
+    while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+        common_ancestor = ancestors.a.pop();
+        ancestors.b.pop();
+    }
+    assert(common_ancestor, "Stacking order can only be calculated for elements with a common ancestor");
+    const z_indexes = {
+        a: get_z_index(find_stacking_context(ancestors.a)),
+        b: get_z_index(find_stacking_context(ancestors.b)),
+    };
+    if (z_indexes.a === z_indexes.b) {
+        const children = common_ancestor.childNodes;
+        const furthest_ancestors = {
+            a: ancestors.a.at(-1),
+            b: ancestors.b.at(-1),
+        };
+        let i = children.length;
+        while (i--) {
+            const child = children[i];
+            if (child === furthest_ancestors.a)
+                return 1;
+            if (child === furthest_ancestors.b)
+                return -1;
+        }
+    }
+    return Math.sign(z_indexes.a - z_indexes.b);
+}
+const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+/** @param {HTMLElement | SVGElement} node */
+function is_flex_item(node) {
+    // @ts-expect-error ParentNode vs Element
+    const display = getComputedStyle(get_parent(node) ?? node).display;
+    return display === "flex" || display === "inline-flex";
+}
+/** @param {HTMLElement | SVGElement} node */
+function creates_stacking_context(node) {
+    const style = getComputedStyle(node);
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+    if (style.position === "fixed")
+        return true;
+    // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
+    // if (
+    //   (style.zIndex !== "auto" && style.position !== "static") ||
+    //   is_flex_item(node)
+    // )
+    if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node)))
+        return true;
+    if (+style.opacity < 1)
+        return true;
+    if ("transform" in style && style.transform !== "none")
+        return true;
+    if ("webkitTransform" in style && style.webkitTransform !== "none")
+        return true;
+    if ("mixBlendMode" in style && style.mixBlendMode !== "normal")
+        return true;
+    if ("filter" in style && style.filter !== "none")
+        return true;
+    if ("webkitFilter" in style && style.webkitFilter !== "none")
+        return true;
+    if ("isolation" in style && style.isolation === "isolate")
+        return true;
+    if (props.test(style.willChange))
+        return true;
+    // @ts-expect-error Unrecognized prop
+    if (style.webkitOverflowScrolling === "touch")
+        return true;
+    return false;
+}
+/** @param {(HTMLElement| SVGElement)[]} nodes */
+function find_stacking_context(nodes) {
+    let i = nodes.length;
+    while (i--) {
+        const node = nodes[i];
+        assert(node, "Missing node");
+        if (creates_stacking_context(node))
+            return node;
+    }
+    return null;
+}
+/** @param {HTMLElement | SVGElement} node */
+function get_z_index(node) {
+    return (node && Number(getComputedStyle(node).zIndex)) || 0;
+}
+/** @param {HTMLElement} node */
+function get_ancestors(node) {
+    const ancestors = [];
+    while (node) {
+        ancestors.push(node);
+        // @ts-expect-error ParentNode vs Element
+        node = get_parent(node);
+    }
+    return ancestors; // [ node, ... <body>, <html>, document ]
+}
+/** @param {HTMLElement} node */
+function get_parent(node) {
+    const { parentNode } = node;
+    if (isShadowRoot(parentNode)) {
+        return parentNode.host;
+    }
+    return parentNode;
+}