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

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

@@ -0,0 +1,92 @@
+// Ported from react-resizable-panels (lib/global/mutable-state/interactions.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 state = {
+    cursorFlags: 0,
+    state: "inactive",
+};
+const eventEmitter = new EventEmitter();
+export function getInteractionState() {
+    return state;
+}
+export function subscribeToInteractionState(callback) {
+    return eventEmitter.addListener("change", callback);
+}
+export function updateCursorFlags(cursorFlags, previews = [], previewLayoutMap, didPointerMove = false) {
+    const prev = state;
+    const next = { ...state };
+    next.cursorFlags = cursorFlags;
+    if (next.state === "active") {
+        next.didPointerMove ||= didPointerMove;
+        next.previews = previews;
+        if (previewLayoutMap) {
+            next.previewLayoutMap = previewLayoutMap;
+        }
+    }
+    state = next;
+    eventEmitter.emit("change", {
+        prev,
+        next,
+    });
+}
+export function updateInteractionState(next) {
+    const prev = state;
+    state = next;
+    // Keep click-to-focus behavior, but release keyboard focus after a drag.
+    // This also handles interactions completed by the missed-pointerup fallback.
+    if (prev.state === "active" && next.state !== "active" && prev.didPointerMove) {
+        prev.hitRegions.forEach(({ separator }) => {
+            if (separator && separator.element.ownerDocument.activeElement === separator.element) {
+                separator.element.blur();
+            }
+        });
+    }
+    eventEmitter.emit("change", {
+        prev,
+        next,
+    });
+}
+/**
+ * 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 function notifySeparatorPreviewChanged(separator) {
+    if (state.state !== "active" || !state.previews.some((preview) => preview.separator === separator)) {
+        return;
+    }
+    updateInteractionState({
+        ...state,
+        previews: state.previews.map((preview) => (preview.separator === separator ? { ...preview } : preview)),
+    });
+}
+export function removeAxisFromInteraction(axis) {
+    if (state.state === "inactive") {
+        return false;
+    }
+    const hitRegions = state.hitRegions.filter((region) => region.axis !== axis);
+    const hasPreviews = state.state === "active" && state.previews.some((preview) => preview.axis === axis);
+    if (hitRegions.length === state.hitRegions.length && !hasPreviews) {
+        return false;
+    }
+    if (hitRegions.length === 0) {
+        updateInteractionState({ cursorFlags: 0, state: "inactive" });
+    }
+    else if (state.state === "active") {
+        const initialLayoutMap = new Map(state.initialLayoutMap);
+        const previewLayoutMap = new Map(state.previewLayoutMap);
+        initialLayoutMap.delete(axis);
+        previewLayoutMap.delete(axis);
+        updateInteractionState({
+            ...state,
+            cursorFlags: 0,
+            hitRegions,
+            initialLayoutMap,
+            previewLayoutMap,
+            previews: state.previews.filter((preview) => preview.axis !== axis),
+        });
+    }
+    else {
+        updateInteractionState({ ...state, hitRegions });
+    }
+    return true;
+}

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

@@ -0,0 +1,32 @@
+import type { Point } from "../../types.js";
+import type { HitRegion, Layout, RegisteredResizeAxis, RegisteredResizeItem, RegisteredSeparator } from "../types.js";
+export type InteractionInactive = {
+    cursorFlags: 0;
+    state: "inactive";
+};
+export type InteractionHover = {
+    cursorFlags: 0;
+    hitRegions: HitRegion[];
+    state: "hover";
+};
+export type ResizePreview = {
+    active: boolean;
+    axis: RegisteredResizeAxis;
+    key: string;
+    offset: number;
+    itemIndex: number;
+    rect: DOMRect;
+    separator?: RegisteredSeparator | undefined;
+};
+export type InteractionActive = {
+    cursorFlags: number;
+    didPointerMove: boolean;
+    hitRegions: HitRegion[];
+    initialLayoutMap: Map<RegisteredResizeAxis, Layout>;
+    pointerDownAtPoint: Point;
+    previewLayoutMap: Map<RegisteredResizeAxis, Layout>;
+    previews: ResizePreview[];
+    state: "active";
+};
+export type InteractionState = InteractionInactive | InteractionHover | InteractionActive;
+export type SeparatorToItemsMap = Map<RegisteredSeparator, [primaryItem: RegisteredResizeItem, secondaryItem: RegisteredResizeItem]>;

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

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

package/resizable/engine/global/styles/convertEmToPixels.d.ts

@@ -0,0 +1 @@
+export declare function convertEmToPixels(element: Element, value: number): number;

package/resizable/engine/global/styles/convertEmToPixels.js

@@ -0,0 +1,7 @@
+// Ported from react-resizable-panels (lib/global/styles/convertEmToPixels.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function convertEmToPixels(element, value) {
+    const style = getComputedStyle(element);
+    const fontSize = parseFloat(style.fontSize);
+    return value * fontSize;
+}

package/resizable/engine/global/styles/convertRemToPixels.d.ts

@@ -0,0 +1 @@
+export declare function convertRemToPixels(element: Element, value: number): number;

package/resizable/engine/global/styles/convertRemToPixels.js

@@ -0,0 +1,7 @@
+// Ported from react-resizable-panels (lib/global/styles/convertRemToPixels.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function convertRemToPixels(element, value) {
+    const style = getComputedStyle(element.ownerDocument.documentElement);
+    const fontSize = parseFloat(style.fontSize);
+    return value * fontSize;
+}

package/resizable/engine/global/styles/convertVhToPixels.d.ts

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

package/resizable/engine/global/styles/convertVhToPixels.js

@@ -0,0 +1,5 @@
+// Ported from react-resizable-panels (lib/global/styles/convertVhToPixels.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function convertVhToPixels(value) {
+    return (value / 100) * window.innerHeight;
+}

package/resizable/engine/global/styles/convertVwToPixels.d.ts

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

package/resizable/engine/global/styles/convertVwToPixels.js

@@ -0,0 +1,5 @@
+// Ported from react-resizable-panels (lib/global/styles/convertVwToPixels.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+export function convertVwToPixels(value) {
+    return (value / 100) * window.innerWidth;
+}

package/resizable/engine/global/styles/parseSizeAndUnit.d.ts

@@ -0,0 +1,2 @@
+import type { SizeUnit } from "../../components/panel/types.js";
+export declare function parseSizeAndUnit(size: number | string): [numeric: number, size: SizeUnit];

package/resizable/engine/global/styles/parseSizeAndUnit.js

@@ -0,0 +1,29 @@
+export function parseSizeAndUnit(size) {
+    switch (typeof size) {
+        case "number": {
+            return [size, "px"];
+        }
+        case "string": {
+            const numeric = parseFloat(size);
+            if (size.endsWith("%")) {
+                return [numeric, "%"];
+            }
+            else if (size.endsWith("px")) {
+                return [numeric, "px"];
+            }
+            else if (size.endsWith("rem")) {
+                return [numeric, "rem"];
+            }
+            else if (size.endsWith("em")) {
+                return [numeric, "em"];
+            }
+            else if (size.endsWith("vh")) {
+                return [numeric, "vh"];
+            }
+            else if (size.endsWith("vw")) {
+                return [numeric, "vw"];
+            }
+            return [numeric, "%"];
+        }
+    }
+}

package/resizable/engine/global/styles/sizeStyleToPixels.d.ts

@@ -0,0 +1,5 @@
+export declare function sizeStyleToPixels({ axisSize, itemElement, styleProp }: {
+    axisSize: number;
+    itemElement: HTMLElement;
+    styleProp: number | string;
+}): number;

package/resizable/engine/global/styles/sizeStyleToPixels.js

@@ -0,0 +1,38 @@
+// Ported from react-resizable-panels (lib/global/styles/sizeStyleToPixels.ts, v4.14.3), MIT, © Brian Vaughn.
+// Rivet: engine file kept as upstream (framework-free); `.ts` import specifiers.
+import { convertEmToPixels } from "./convertEmToPixels.js";
+import { convertRemToPixels } from "./convertRemToPixels.js";
+import { convertVhToPixels } from "./convertVhToPixels.js";
+import { convertVwToPixels } from "./convertVwToPixels.js";
+import { parseSizeAndUnit } from "./parseSizeAndUnit.js";
+export function sizeStyleToPixels({ axisSize, itemElement, styleProp }) {
+    let pixels = undefined;
+    const [size, unit] = parseSizeAndUnit(styleProp);
+    switch (unit) {
+        case "%": {
+            pixels = (size / 100) * axisSize;
+            break;
+        }
+        case "px": {
+            pixels = size;
+            break;
+        }
+        case "rem": {
+            pixels = convertRemToPixels(itemElement, size);
+            break;
+        }
+        case "em": {
+            pixels = convertEmToPixels(itemElement, size);
+            break;
+        }
+        case "vh": {
+            pixels = convertVhToPixels(size);
+            break;
+        }
+        case "vw": {
+            pixels = convertVwToPixels(size);
+            break;
+        }
+    }
+    return pixels;
+}

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

@@ -0,0 +1,120 @@
+import type { GroupResizeBehavior, OnPanelResize, PanelConstraintProps, PanelSize } from "../components/panel/types.js";
+/**
+ * Types shared by the resize machinery (layout math, pointer and keyboard interactions, cursors, etc.)
+ * which is used by both the Group and Grid components.
+ *
+ * - A "resize axis" is a set of items that can be resized along one orientation;
+ *   e.g. a Group (whose items are Panels) or one axis of a Grid (whose items are columns or rows).
+ * - A "resize item" is one of those items (e.g. a Panel or a Grid track).
+ * - A separator (e.g. a Separator or a Gridline) resizes the items on either side of it.
+ */
+/**
+ * Orientation loosely relates to the `aria-orientation` attribute.
+ * It determines how items are laid out and the direction they can be resized in.
+ */
+export type Orientation = "horizontal" | "vertical";
+/**
+ * Map of item (e.g. Panel) id to size (a percentage between 0..100)
+ */
+export type Layout = {
+    [id: string]: number;
+};
+export type ResizePreviewMode = "panel" | "separator";
+export type ResizeTargetMinimumSize = {
+    coarse: number;
+    fine: number;
+};
+/**
+ * Numeric item constraints are represented as numeric percentages (0..100)
+ * Values specified using other CSS units must be pre-converted.
+ */
+export type ResizeItemConstraints = {
+    collapsedSize: number;
+    collapsedThreshold?: number | undefined;
+    collapsible: boolean;
+    defaultSize: number | undefined;
+    disabled: boolean | undefined;
+    groupResizeBehavior?: GroupResizeBehavior | undefined;
+    maxSize: number;
+    minSize: number;
+    itemId: string;
+};
+export type RegisteredResizeItem = {
+    id: string;
+    idIsStable: boolean;
+    element: HTMLElement;
+    mutableValues: {
+        expandToSize: number | undefined;
+        prevSize: PanelSize | undefined;
+    };
+    onResize: OnPanelResize | undefined;
+    constraintProps: PanelConstraintProps;
+};
+export type RegisteredSeparator = {
+    children?: unknown;
+    className?: string | undefined;
+    disabled?: boolean | undefined;
+    disableDoubleClick?: boolean | undefined;
+    element: HTMLDivElement;
+    id: string;
+    preview?: unknown;
+    style?: unknown;
+};
+export type HitRegion = {
+    axis: RegisteredResizeAxis;
+    axisSize: number;
+    items: [item: RegisteredResizeItem, item: RegisteredResizeItem];
+    rect: DOMRect;
+    separator?: RegisteredSeparator | undefined;
+};
+/**
+ * By default a resize axis is a flex container whose (direct) children are item and separator elements (e.g. a Group);
+ * its size and resize targets are measured from those elements.
+ *
+ * Components with a different DOM structure (e.g. each axis of a Grid) can supply a layout strategy
+ * to override how the axis is measured.
+ * The rest of the resize machinery (layout math, pointer and keyboard interactions, cursors) is shared.
+ */
+export type ResizeAxisLayoutStrategy = {
+    /**
+     * Total size (in pixels) available to the axis's resizable items along its orientation.
+     */
+    calculateAvailableSize: () => number;
+    /**
+     * Resize targets for the axis; see `calculateHitRegions` for the default implementation.
+     */
+    calculateHitRegions: (options: {
+        expandHitTargets: boolean;
+        axis: RegisteredResizeAxis;
+        includeDisabled: boolean;
+    }) => HitRegion[];
+    /**
+     * Current size (in pixels) of the item with the specified id.
+     */
+    getItemSizeInPixels: (id: string) => number;
+    /**
+     * DOM ids controlled by a separator's primary item, when items have no DOM element of their own.
+     */
+    getItemAriaControls?: (id: string) => string | undefined;
+};
+export type RegisteredResizeAxis = Readonly<{
+    disabled: boolean;
+    element: HTMLElement;
+    id: string;
+    layoutStrategy?: ResizeAxisLayoutStrategy | undefined;
+    mutableState: {
+        defaultLayout: Readonly<Layout> | undefined;
+        disableCursor: boolean;
+        expandedItemSizes: {
+            [itemId: string]: number;
+        };
+        layouts: {
+            [itemIds: string]: Layout;
+        };
+    };
+    orientation: Orientation;
+    items: RegisteredResizeItem[];
+    resizePreviewMode: ResizePreviewMode;
+    resizeTargetMinimumSize: ResizeTargetMinimumSize;
+    separators: RegisteredSeparator[];
+}>;

package/resizable/engine/global/types.js

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

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

@@ -0,0 +1,9 @@
+/**
+ * Ends an active pointer resize when the pointer-up event was missed or the browser cancelled the gesture
+ * (e.g. "pointercancel", "lostpointercapture", window "blur", or a release outside of a cross-origin iframe).
+ *
+ * Unlike completeActivePointerResize, this does not incorporate the triggering event's position;
+ * those events either have no coordinates or report a position unrelated to the drag.
+ * The last previewed (or live) layout is committed instead.
+ */
+export declare function abortActivePointerResize(document: Document): boolean;

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

@@ -0,0 +1,52 @@
+// Ported from react-resizable-panels (lib/global/utils/abortActivePointerResize.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, getMountedAxisState, updateMountedAxis } from "../mutable-state/axes.js";
+import { getInteractionState, updateInteractionState } from "../mutable-state/interactions.js";
+import { layoutsEqual } from "./layoutsEqual.js";
+/**
+ * Ends an active pointer resize when the pointer-up event was missed or the browser cancelled the gesture
+ * (e.g. "pointercancel", "lostpointercapture", window "blur", or a release outside of a cross-origin iframe).
+ *
+ * Unlike completeActivePointerResize, this does not incorporate the triggering event's position;
+ * those events either have no coordinates or report a position unrelated to the drag.
+ * The last previewed (or live) layout is committed instead.
+ */
+export function abortActivePointerResize(document) {
+    const interactionState = getInteractionState();
+    if (interactionState.state !== "active") {
+        return false;
+    }
+    const mountedAxes = getMountedAxes();
+    interactionState.previewLayoutMap.forEach((layout, axis) => {
+        const axisState = mountedAxes.get(axis);
+        if (axis.resizePreviewMode === "separator" && axisState && !layoutsEqual(layout, axisState.layout)) {
+            updateMountedAxis(axis, {
+                ...axisState,
+                layout,
+                requestedAxisSize: axisState.axisSize,
+                requestedLayout: layout,
+            });
+        }
+    });
+    updateInteractionState({
+        cursorFlags: 0,
+        state: "inactive",
+    });
+    // Dispatch one more "change" event after the interaction state has been reset.
+    // Groups use this as a signal to call onLayoutChanged.
+    // The gesture was started by the user, so this is still a user interaction.
+    interactionState.hitRegions.forEach((hitRegion) => {
+        // Skip if the group was re-registered mid-gesture, so the old hit region
+        // doesn't resurrect a stale entry in the mounted-groups map. See #729.
+        if (!mountedAxes.has(hitRegion.axis)) {
+            return;
+        }
+        const axisState = getMountedAxisState(hitRegion.axis.id, true);
+        updateMountedAxis(hitRegion.axis, axisState, {
+            isUserInteraction: true,
+        });
+    });
+    updateCursorStyle(document);
+    return true;
+}

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

@@ -0,0 +1,9 @@
+import type { Layout, ResizeItemConstraints } from "../types.js";
+export declare function adjustLayoutByDelta({ delta, initialLayout: initialLayoutProp, itemConstraints: itemConstraintsArray, pivotIndices, prevLayout: prevLayoutProp, trigger, }: {
+    delta: number;
+    initialLayout: Layout;
+    itemConstraints: ResizeItemConstraints[];
+    pivotIndices: number[];
+    prevLayout: Layout;
+    trigger?: "imperative-api" | "keyboard" | "mouse-or-touch";
+}): Layout;