@window-splitter/state 0.2.3--canary.823a479.0 → 0.2.3

package/.tshy-build/esm/index.js

@@ -1,964 +0,0 @@
-import { raf } from "@react-spring/rafz";
-import { createMachine, assign, enqueueActions, fromPromise, } from "xstate";
-import invariant from "invariant";
-import Big from "big.js";
-// #region Constants
-/** The default amount a user can `dragOvershoot` before the panel collapses */
-const COLLAPSE_THRESHOLD = 50;
-export function makePercentUnit(value) {
-    return { type: "percent", value: new Big(value) };
-}
-export function makePixelUnit(value) {
-    return { type: "pixel", value: new Big(value) };
-}
-function getCollapseAnimation(panel) {
-    let easeFn = collapseAnimations.linear;
-    let duration = 300;
-    if (panel.collapseAnimation) {
-        if (typeof panel.collapseAnimation === "string") {
-            easeFn = collapseAnimations[panel.collapseAnimation];
-        }
-        else if ("duration" in panel.collapseAnimation) {
-            duration = panel.collapseAnimation.duration ?? duration;
-            easeFn =
-                typeof panel.collapseAnimation.easing === "function"
-                    ? panel.collapseAnimation.easing
-                    : collapseAnimations[panel.collapseAnimation.easing];
-        }
-    }
-    return { ease: easeFn, duration };
-}
-/** Copied from https://github.com/d3/d3-ease */
-const collapseAnimations = {
-    "ease-in-out": function quadInOut(t) {
-        return ((t *= 2) <= 1 ? t * t : --t * (2 - t) + 1) / 2;
-    },
-    bounce: function backInOut(t) {
-        const s = 1.70158;
-        return (((t *= 2) < 1
-            ? t * t * ((s + 1) * t - s)
-            : (t -= 2) * t * ((s + 1) * t + s) + 2) / 2);
-    },
-    linear: function linear(t) {
-        return +t;
-    },
-};
-// #endregion
-// #region Helpers
-export function prepareSnapshot(snapshot) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const snapshotContext = snapshot
-        .context;
-    snapshotContext.dragOvershoot = new Big(snapshotContext.dragOvershoot);
-    for (const item of snapshotContext.items) {
-        if (isPanelData(item)) {
-            item.currentValue.value = new Big(item.currentValue.value);
-            if (item.collapsedSize) {
-                item.collapsedSize.value = new Big(item.collapsedSize.value);
-            }
-            if (item.min) {
-                item.min.value = new Big(item.min.value);
-            }
-            if (item.max && item.max !== "1fr") {
-                item.max.value = new Big(item.max.value);
-            }
-        }
-        else {
-            item.size.value = new Big(item.size.value);
-        }
-    }
-    return snapshot;
-}
-/** Assert that the provided event is one of the accepted types */
-function isEvent(event, eventType) {
-    invariant(eventType.includes(event.type), `Invalid event type: ${eventType}. Expected: ${eventType.join(" | ")}`);
-}
-/** Determine if an item is a panel */
-export function isPanelData(value) {
-    return Boolean(value &&
-        typeof value === "object" &&
-        "type" in value &&
-        value.type === "panel");
-}
-/** Determine if an item is a panel handle */
-export function isPanelHandle(value) {
-    return Boolean(value &&
-        typeof value === "object" &&
-        "type" in value &&
-        value.type === "handle");
-}
-export function initializePanel(item) {
-    const data = {
-        type: "panel",
-        min: parseUnit(item.min || "0px"),
-        max: item.max ? parseUnit(item.max) : "1fr",
-        collapsed: item.collapsible
-            ? (item.collapsed ?? item.defaultCollapsed ?? false)
-            : undefined,
-        collapsible: item.collapsible,
-        collapsedSize: parseUnit(item.collapsedSize ?? "0px"),
-        onCollapseChange: item.onCollapseChange,
-        collapseIsControlled: typeof item.collapsed !== "undefined",
-        sizeBeforeCollapse: undefined,
-        id: item.id,
-        collapseAnimation: item.collapseAnimation,
-        default: item.default ? parseUnit(item.default) : undefined,
-    };
-    return { ...data, currentValue: makePixelUnit(-1) };
-}
-export function initializePanelHandleData(item) {
-    return {
-        type: "handle",
-        ...item,
-        size: parseUnit(item.size),
-    };
-}
-/** Parse a `Unit` string or `clamp` value */
-export function parseUnit(unit) {
-    if (unit === "1fr") {
-        unit = "100%";
-    }
-    if (unit.endsWith("px")) {
-        return makePixelUnit(parseFloat(unit));
-    }
-    if (unit.endsWith("%")) {
-        return makePercentUnit(parseFloat(unit));
-    }
-    throw new Error(`Invalid unit: ${unit}`);
-}
-/** Convert a `Unit` to a percentage of the group size */
-export function getUnitPercentageValue(groupsSize, unit) {
-    if (unit.type === "pixel") {
-        return groupsSize === 0 ? 0 : unit.value.div(groupsSize).toNumber();
-    }
-    return unit.value.toNumber();
-}
-export function getGroupSize(context) {
-    return context.orientation === "horizontal"
-        ? context.size.width
-        : context.size.height;
-}
-/** Get the size of a panel in pixels */
-export function getUnitPixelValue(context, unit) {
-    const parsed = unit === "1fr" ? parseUnit(unit) : unit;
-    return parsed.type === "pixel"
-        ? parsed.value
-        : new Big(parsed.value).div(100).mul(getGroupSize(context));
-}
-/** Clamp a new `currentValue` given the panel's constraints. */
-function clampUnit(context, item, value) {
-    const min = getUnitPixelValue(context, item.min);
-    const max = getUnitPixelValue(context, item.max);
-    if (value.gte(min) && value.lte(max)) {
-        return value;
-    }
-    return value.lt(min) ? min : max;
-}
-/** Get a panel with a particular ID. */
-export function getPanelWithId(context, panelId) {
-    const item = context.items.find((i) => i.id === panelId);
-    if (item && isPanelData(item)) {
-        return item;
-    }
-    throw new Error(`Expected panel with id: ${panelId}`);
-}
-/** Get a panel with a particular ID. */
-function getPanelHandleIndex(context, handleId) {
-    const item = context.items.findIndex((i) => i.id === handleId);
-    if (item !== -1 && isPanelHandle(context.items[item])) {
-        return item;
-    }
-    throw new Error(`Expected panel handle with id: ${handleId}`);
-}
-/**
- * Get the panel that's collapsible next to a resize handle.
- * Will first check the left panel then the right.
- */
-export function getCollapsiblePanelForHandleId(context, handleId) {
-    if (!context.items.length) {
-        throw new Error("No items in group");
-    }
-    const handleIndex = getPanelHandleIndex(context, handleId);
-    const panelBefore = context.items[handleIndex - 1];
-    const panelAfter = context.items[handleIndex + 1];
-    if (panelBefore && isPanelData(panelBefore) && panelBefore.collapsible) {
-        return panelBefore;
-    }
-    if (panelAfter && isPanelData(panelAfter) && panelAfter.collapsible) {
-        return panelAfter;
-    }
-    throw new Error(`No collapsible panel found for handle: ${handleId}`);
-}
-/**
- * Get the handle closest to the target panel.
- * This is used to simulate collapse/expand
- */
-function getHandleForPanelId(context, panelId) {
-    const panelIndex = context.items.findIndex((item) => item.id === panelId);
-    invariant(panelIndex !== -1, `Expected panel before: ${panelId}`);
-    let item = context.items[panelIndex + 1];
-    if (item && isPanelHandle(item)) {
-        return { item, direction: 1 };
-    }
-    item = context.items[panelIndex - 1];
-    if (item && isPanelHandle(item)) {
-        return { item, direction: -1 };
-    }
-    throw new Error(`Cant find handle for panel: ${panelId}`);
-}
-/** Given the specified order props and default order of the items, order the items */
-function sortWithOrder(items) {
-    const defaultPlacement = {};
-    const takenPlacements = items
-        .map((i) => i.order)
-        .filter((i) => i !== undefined);
-    let defaultOrder = 0;
-    // Generate default orders for items that don't have it
-    for (const item of items) {
-        if (item.order === undefined) {
-            while (takenPlacements.includes(defaultOrder) ||
-                Object.values(defaultPlacement).includes(defaultOrder)) {
-                defaultOrder++;
-            }
-            defaultPlacement[item.id] = defaultOrder;
-        }
-    }
-    const withoutOrder = items.filter((i) => i.order === undefined);
-    const sortedWithOrder = items
-        .filter((i) => i.order !== undefined)
-        .sort((a, b) => a.order - b.order);
-    for (const item of sortedWithOrder) {
-        // insert item at order index
-        withoutOrder.splice(item.order, 0, item);
-    }
-    return withoutOrder;
-}
-/** Check if the panel has space available to add to */
-function panelHasSpace(context, item, adjustment) {
-    invariant(item.currentValue.type === "pixel", `panelHasSpace only works with number values: ${item.id} ${item.currentValue}`);
-    if (item.collapsible && !item.collapsed) {
-        return true;
-    }
-    if (adjustment === "add") {
-        return (item.currentValue.value.gte(getUnitPixelValue(context, item.min)) &&
-            item.currentValue.value.lt(getUnitPixelValue(context, item.max)));
-    }
-    return (item.currentValue.value.gt(getUnitPixelValue(context, item.min)) &&
-        item.currentValue.value.lte(getUnitPixelValue(context, item.max)));
-}
-/** Search in a `direction` for a panel that still has space to expand. */
-function findPanelWithSpace(context, items, start, direction, adjustment, disregardCollapseBuffer) {
-    const slice = direction === -1 ? items.slice(0, start + 1).reverse() : items.slice(start);
-    for (const panel of slice) {
-        if (!isPanelData(panel)) {
-            continue;
-        }
-        const targetPanel = disregardCollapseBuffer
-            ? createUnrestrainedPanel(context, panel)
-            : panel;
-        if (panelHasSpace(context, targetPanel, adjustment)) {
-            return panel;
-        }
-    }
-}
-/** Add up all the static values in the layout */
-function getStaticWidth(context) {
-    let width = new Big(0);
-    for (const item of context.items) {
-        if (isPanelHandle(item)) {
-            width = width.add(item.size.value);
-        }
-        else if (isPanelData(item) &&
-            item.collapsed &&
-            item.currentValue.type === "pixel") {
-            width = width.add(item.currentValue.value);
-        }
-        else if (isPanelData(item) &&
-            item.default &&
-            item.default.type === "pixel") {
-            width = width.add(item.default.value);
-        }
-    }
-    return width;
-}
-function formatUnit(unit) {
-    if (unit.type === "pixel") {
-        return `${unit.value.toNumber()}px`;
-    }
-    return `${unit.value.toNumber()}%`;
-}
-/** Build the grid template from the item values. */
-export function buildTemplate(context) {
-    const staticWidth = getStaticWidth(context);
-    return context.items
-        .map((item) => {
-        if (item.type === "panel") {
-            const min = formatUnit(item.min);
-            if (item.currentValue.type === "pixel" &&
-                item.currentValue.value.toNumber() !== -1) {
-                if (item.currentValue.value.toNumber() < 0) {
-                    return "0px";
-                }
-                return formatUnit(item.currentValue);
-            }
-            else if (item.currentValue.type === "percent") {
-                const max = item.max === "1fr" ? "100%" : formatUnit(item.max);
-                return `minmax(${min}, min(calc(${item.currentValue.value} * (100% - ${staticWidth}px)), ${max}))`;
-            }
-            else if (item.collapsible && item.collapsed) {
-                return formatUnit(item.collapsedSize);
-            }
-            else if (item.default) {
-                return formatUnit(item.default);
-            }
-            const max = item.max === "1fr" ? "1fr" : formatUnit(item.max);
-            return `minmax(${min}, ${max})`;
-        }
-        return formatUnit(item.size);
-    })
-        .join(" ");
-}
-function addDeDuplicatedItems(items, newItem) {
-    const currentItemIndex = items.findIndex((item) => item.id === newItem.id ||
-        (typeof item.order === "number" && item.order === newItem.order));
-    let restItems = items;
-    if (currentItemIndex !== -1) {
-        restItems = items.filter((_, index) => index !== currentItemIndex);
-    }
-    return sortWithOrder([...restItems, newItem]);
-}
-function createUnrestrainedPanel(_, data) {
-    return {
-        ...data,
-        min: makePixelUnit(-100000),
-        max: makePixelUnit(100000),
-    };
-}
-// #endregion
-// #region Update Logic
-/**
- * This is the main meat of the layout logic.
- * It's responsible for figuring out how to distribute the space
- * amongst the panels.
- *
- * It's built around applying small deltas to panels relative to their
- * the resize handles.
- *
- * As much as possible we try to rely on the browser to do the layout.
- * During the initial layout we rely on CSS grid and a group might be
- * defined like this:
- *
- * ```css
- * grid-template-columns: minmax(100px, 1fr) 1px minmax(100px, 300px);
- * ```
- *
- * Without any resizing this is nice and simple and the components don't do much.
- *
- * Once the user starts resizing the layout will be more complex.
- *
- * It's broken down into 3 phases:
- *
- * 1. `prepareItems` - The size of the group has been measure and we
- *    can convert all the panel sizes into pixels. Converting into pixels
- *    makes doing the math for the updates easier.
- *
- * ```css
- * grid-template-columns: 500px 1px 300px;
- * ```
- *
- * 2. `updateLayout` - This is where the actual updates are applied.
- *    This is where the user's drag interactions are applied. We also
- *    use this to collapse/expand panels by simulating a drag interaction.
- *
- * ```css
- * grid-template-columns: 490px 1px 310px;
- * ```
- *
- * 3. `commitLayout` - Once the updates have been applied we convert the
- *    updated sizes back into a format that allows for easy resizing without
- *    lots of updates.
- *
- * ```css
- * grid-template-columns: minmax(100px, min(calc(0.06117 * (100% - 1px)), 100%)) 1px minmax(100px, min(calc(0.0387 * (100% - 1px)), 300px));
- * ```
- *
- * When another update loop is triggered the above template will be converted back to pixels.
- */
-/** Converts the items to pixels */
-export function prepareItems(context) {
-    const newItems = [...context.items];
-    const staticWidth = getStaticWidth(context);
-    for (const item of newItems) {
-        if (!item || !isPanelData(item)) {
-            continue;
-        }
-        if (item.currentValue.type === "pixel") {
-            continue;
-        }
-        const pixel = new Big(getGroupSize(context))
-            .minus(staticWidth)
-            .mul(item.currentValue.value);
-        item.currentValue = makePixelUnit(pixel.toNumber());
-    }
-    return newItems;
-}
-/** On every mouse move we distribute the space added */
-function updateLayout(context, dragEvent) {
-    const handleIndex = getPanelHandleIndex(context, dragEvent.handleId);
-    const handle = context.items[handleIndex];
-    const newItems = [...context.items];
-    let moveAmount = context.orientation === "horizontal"
-        ? dragEvent.value.deltaX
-        : dragEvent.value.deltaY;
-    if (dragEvent.value.shiftKey) {
-        moveAmount *= 15;
-    }
-    if (moveAmount === 0) {
-        return {};
-    }
-    const moveDirection = moveAmount / Math.abs(moveAmount);
-    // Go forward into the shrinking panels to find a panel that still has space.
-    const panelBefore = findPanelWithSpace(context, newItems, handleIndex + moveDirection, moveDirection, "subtract", dragEvent.disregardCollapseBuffer);
-    // No panel with space, just record the drag overshoot
-    if (!panelBefore) {
-        return {
-            dragOvershoot: context.dragOvershoot.add(moveAmount),
-        };
-    }
-    invariant(isPanelData(panelBefore), `Expected panel before: ${handle.id}`);
-    const panelAfter = newItems[handleIndex - moveDirection];
-    invariant(panelAfter && isPanelData(panelAfter), `Expected panel after: ${handle.id}`);
-    if (panelAfter.currentValue.value.eq(getUnitPixelValue(context, panelAfter.max))) {
-        return {
-            dragOvershoot: context.dragOvershoot.add(moveAmount),
-        };
-    }
-    const newDragOvershoot = context.dragOvershoot.add(moveAmount);
-    // Don't let the panel expand until the threshold is reached
-    if (!dragEvent.disregardCollapseBuffer) {
-        const isInLeftBuffer = newDragOvershoot.lt(0) && moveDirection > 0;
-        const isInLeftOvershoot = newDragOvershoot.gt(0) && moveDirection > 0;
-        const isInRightBuffer = newDragOvershoot.gt(0) && moveDirection < 0;
-        const isInRightOvershoot = newDragOvershoot.lt(0) && moveDirection < 0;
-        const potentialNewValue = panelAfter.currentValue.value.add(new Big(newDragOvershoot).mul(isInRightBuffer ? moveDirection : 1));
-        const min = getUnitPixelValue(context, panelAfter.min);
-        const isInDragBugger = newDragOvershoot.abs().lt(COLLAPSE_THRESHOLD) &&
-            panelAfter.collapsible &&
-            panelAfter.collapsed &&
-            (isInLeftOvershoot || isInRightOvershoot);
-        if (potentialNewValue.lte(min) &&
-            (newDragOvershoot.eq(0) ||
-                isInRightBuffer ||
-                isInLeftBuffer ||
-                isInDragBugger)) {
-            return { dragOvershoot: newDragOvershoot };
-        }
-    }
-    // Don't let the panel collapse until the threshold is reached
-    if (panelBefore.collapsible &&
-        panelBefore.currentValue.value ===
-            getUnitPixelValue(context, panelBefore.min)) {
-        const potentialNewValue = panelBefore.currentValue.value.sub(newDragOvershoot.abs());
-        if (newDragOvershoot.abs().lt(COLLAPSE_THRESHOLD) &&
-            potentialNewValue.gt(getUnitPixelValue(context, panelBefore.collapsedSize))) {
-            return { dragOvershoot: newDragOvershoot };
-        }
-    }
-    // Apply the move amount to the panel before the slider
-    const unrestrainedPanelBefore = createUnrestrainedPanel(context, panelBefore);
-    const panelBeforePreviousValue = panelBefore.currentValue.value;
-    const panelBeforeNewValueRaw = panelBefore.currentValue.value.minus(new Big(moveAmount).mul(moveDirection));
-    let panelBeforeNewValue = dragEvent.disregardCollapseBuffer
-        ? clampUnit(context, unrestrainedPanelBefore, panelBeforeNewValueRaw)
-        : clampUnit(context, panelBefore, panelBeforeNewValueRaw);
-    // Also apply the move amount the panel after the slider
-    const unrestrainedPanelAfter = createUnrestrainedPanel(context, panelAfter);
-    const panelAfterPreviousValue = panelAfter.currentValue.value;
-    const applied = panelBeforePreviousValue.minus(panelBeforeNewValue);
-    const panelAfterNewValueRaw = panelAfter.currentValue.value.add(applied);
-    let panelAfterNewValue = dragEvent.disregardCollapseBuffer
-        ? clampUnit(context, unrestrainedPanelAfter, panelAfterNewValueRaw)
-        : clampUnit(context, panelAfter, panelAfterNewValueRaw);
-    if (dragEvent.disregardCollapseBuffer) {
-        if (panelAfter.collapsible && panelAfter.collapsed) {
-            panelAfter.collapsed = false;
-        }
-    }
-    // If the panel was collapsed, expand it
-    // We need to re-apply the move amount since the the expansion of the
-    // collapsed panel disregards that.
-    else if (panelAfter.collapsible && panelAfter.collapsed) {
-        if (panelAfter.onCollapseChange?.current &&
-            panelAfter.collapseIsControlled &&
-            !dragEvent.controlled) {
-            panelAfter.onCollapseChange.current(false);
-            return { dragOvershoot: newDragOvershoot };
-        }
-        // Calculate the amount "extra" after the minSize the panel should grow
-        const extra = 
-        // Take the size it was at
-        getUnitPixelValue(context, panelAfter.collapsedSize)
-            // Add in the full overshoot so the cursor is near the slider
-            .add(context.dragOvershoot.abs())
-            // Subtract the min size of the panel
-            .sub(panelAfterNewValue
-            // Then re-add the move amount
-            .add(Math.abs(moveAmount)));
-        panelAfter.collapsed = false;
-        if (extra.gt(0)) {
-            panelAfterNewValue = panelAfterNewValue.add(extra);
-        }
-        panelBeforeNewValue = panelBeforeNewValue
-            // Subtract the delta of the after panel's size
-            .minus(panelAfterNewValue
-            .minus(panelAfterPreviousValue)
-            // And then re-apply the movement value
-            .minus(Math.abs(moveAmount)));
-        if (panelAfter.onCollapseChange?.current &&
-            !panelAfter.collapseIsControlled &&
-            !dragEvent.controlled) {
-            panelAfter.onCollapseChange.current(false);
-        }
-    }
-    const panelBeforeIsAboutToCollapse = panelBefore.currentValue.value ===
-        getUnitPixelValue(context, panelBefore.min);
-    // If the panel was expanded and now is at it's min size, collapse it
-    if (!dragEvent.disregardCollapseBuffer &&
-        panelBefore.collapsible &&
-        panelBeforeIsAboutToCollapse) {
-        if (panelBefore.onCollapseChange?.current &&
-            panelBefore.collapseIsControlled &&
-            !dragEvent.controlled) {
-            panelBefore.onCollapseChange.current(true);
-            return { dragOvershoot: newDragOvershoot };
-        }
-        // Make it collapsed
-        panelBefore.collapsed = true;
-        panelBeforeNewValue = getUnitPixelValue(context, panelBefore.collapsedSize);
-        // Add the extra space created to the before panel
-        panelAfterNewValue = panelAfterNewValue.add(panelBeforePreviousValue.minus(panelBeforeNewValue));
-        if (panelBefore.onCollapseChange?.current &&
-            !panelBefore.collapseIsControlled &&
-            !dragEvent.controlled) {
-            panelBefore.onCollapseChange.current(true);
-        }
-    }
-    panelBefore.currentValue = { type: "pixel", value: panelBeforeNewValue };
-    panelAfter.currentValue = { type: "pixel", value: panelAfterNewValue };
-    const leftoverSpace = new Big(getGroupSize(context)).minus(newItems.reduce((acc, b) => acc.add(isPanelData(b) ? b.currentValue.value : b.size.value), new Big(0)));
-    if (leftoverSpace.gt(0)) {
-        panelBefore.currentValue.value =
-            panelBefore.currentValue.value.add(leftoverSpace);
-    }
-    return { items: newItems };
-}
-/** Converts the items to percentages */
-export function commitLayout(context) {
-    const newItems = [...context.items];
-    // First set all the static width
-    newItems.forEach((item, index) => {
-        if (item.type !== "panel") {
-            return;
-        }
-        if (item.collapsed) {
-            newItems[index] = {
-                ...item,
-                currentValue: item.collapsedSize,
-            };
-        }
-    });
-    const staticWidth = getStaticWidth({ ...context, items: newItems });
-    newItems.forEach((item, index) => {
-        if (item.type !== "panel" || item.collapsed) {
-            return;
-        }
-        newItems[index] = {
-            ...item,
-            currentValue: {
-                type: "percent",
-                value: item.currentValue.value.div(new Big(getGroupSize(context)).sub(staticWidth)),
-            },
-        };
-    });
-    return newItems;
-}
-export function dragHandlePayload({ delta, orientation, shiftKey = false, }) {
-    return {
-        type: "move",
-        pointerType: "keyboard",
-        shiftKey,
-        ctrlKey: false,
-        altKey: false,
-        metaKey: false,
-        deltaX: orientation === "horizontal" ? delta : 0,
-        deltaY: orientation === "horizontal" ? 0 : delta,
-    };
-}
-/** Iteratively applies a large delta value simulating a user's drag */
-function iterativelyUpdateLayout({ context, handleId, delta, direction, controlled, disregardCollapseBuffer, }) {
-    let newContext = context;
-    for (let i = 0; i < delta.abs().toNumber(); i++) {
-        newContext = updateLayout({
-            ...context,
-            ...newContext,
-        }, {
-            handleId,
-            type: "collapsePanel",
-            controlled,
-            disregardCollapseBuffer,
-            value: dragHandlePayload({
-                delta: direction,
-                orientation: context.orientation,
-            }),
-        });
-    }
-    return newContext;
-}
-function applyDeltaInBothDirections(context, newItems, itemIndex, delta) {
-    let hasTriedBothDirections = false;
-    let direction = 1;
-    let deltaLeft = new Big(delta);
-    // Starting from where the items was removed add space to the panels around it.
-    // This is only needed for conditional rendering.
-    while (deltaLeft.toNumber() !== 0) {
-        const targetPanel = findPanelWithSpace(context, newItems, itemIndex + direction, direction, delta.gt(0) ? "add" : "subtract");
-        if (!targetPanel) {
-            if (hasTriedBothDirections) {
-                break;
-            }
-            else {
-                direction = direction === 1 ? -1 : 1;
-                hasTriedBothDirections = true;
-                continue;
-            }
-        }
-        const oldValue = targetPanel.currentValue.value;
-        const newValue = clampUnit(context, targetPanel, oldValue.add(deltaLeft));
-        targetPanel.currentValue.value = newValue;
-        deltaLeft = deltaLeft.sub(newValue.sub(oldValue));
-        direction = direction === 1 ? -1 : 1;
-    }
-}
-const animationActor = fromPromise(({ input: { send, context, event } }) => new Promise((resolve) => {
-    const panel = getPanelWithId(context, event.panelId);
-    const handle = getHandleForPanelId(context, event.panelId);
-    let direction = new Big(handle.direction);
-    let fullDelta = new Big(0);
-    if (event.type === "expandPanel") {
-        fullDelta = new Big(panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)).minus(panel.currentValue.value);
-    }
-    else {
-        const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
-        panel.sizeBeforeCollapse = panel.currentValue.value.toNumber();
-        direction = direction.mul(new Big(-1));
-        fullDelta = panel.currentValue.value.minus(collapsedSize);
-    }
-    const fps = 60;
-    const { duration, ease } = getCollapseAnimation(panel);
-    const totalFrames = Math.ceil(panel.collapseAnimation ? duration / (1000 / fps) : 1);
-    let frame = 0;
-    let appliedDelta = new Big(0);
-    function renderFrame() {
-        const progress = ++frame / totalFrames;
-        const e = new Big(panel.collapseAnimation ? ease(progress) : 1);
-        const delta = e.mul(fullDelta).sub(appliedDelta).mul(direction);
-        send({
-            type: "applyDelta",
-            handleId: handle.item.id,
-            delta: delta.toNumber(),
-        });
-        appliedDelta = appliedDelta.add(delta
-            .abs()
-            .mul((delta.gt(0) && direction.lt(0)) ||
-            (delta.lt(0) && direction.gt(0))
-            ? -1
-            : 1));
-        if (e.eq(1)) {
-            const action = event.type === "expandPanel" ? "expand" : "collapse";
-            resolve({ panelId: panel.id, action });
-            return false;
-        }
-        return true;
-    }
-    raf(renderFrame);
-}));
-export const groupMachine = createMachine({
-    initial: "idle",
-    types: {
-        context: {},
-        events: {},
-        input: {},
-    },
-    context: ({ input }) => ({
-        size: { width: 0, height: 0 },
-        items: input.initialItems || [],
-        orientation: input.orientation || "horizontal",
-        dragOvershoot: new Big(0),
-        autosaveId: input.autosaveId,
-        groupId: input.groupId,
-    }),
-    states: {
-        idle: {
-            on: {
-                setActualItemsSize: { actions: ["recordActualItemSize"] },
-                dragHandleStart: { target: "dragging" },
-                setPanelPixelSize: {
-                    actions: ["prepare", "onSetPanelSize", "commit"],
-                },
-                collapsePanel: [
-                    {
-                        actions: "notifyCollapseToggle",
-                        guard: "shouldNotifyCollapseToggle",
-                    },
-                    { target: "togglingCollapse" },
-                ],
-                expandPanel: [
-                    {
-                        actions: "notifyCollapseToggle",
-                        guard: "shouldNotifyCollapseToggle",
-                    },
-                    { target: "togglingCollapse" },
-                ],
-            },
-        },
-        dragging: {
-            entry: ["prepare"],
-            on: {
-                dragHandle: { actions: ["onDragHandle"] },
-                dragHandleEnd: { target: "idle" },
-                collapsePanel: {
-                    guard: "shouldCollapseToggle",
-                    actions: "runCollapseToggle",
-                },
-                expandPanel: {
-                    guard: "shouldCollapseToggle",
-                    actions: "runCollapseToggle",
-                },
-            },
-            exit: ["commit", "onAutosave"],
-        },
-        togglingCollapse: {
-            entry: ["prepare"],
-            invoke: {
-                src: "animation",
-                input: (i) => ({ ...i, send: i.self.send }),
-                onDone: {
-                    target: "idle",
-                    actions: ["onToggleCollapseComplete", "commit", "onAutosave"],
-                },
-            },
-            on: {
-                applyDelta: { actions: ["onApplyDelta"] },
-            },
-        },
-    },
-    on: {
-        registerPanel: { actions: ["assignPanelData"] },
-        registerDynamicPanel: {
-            actions: ["prepare", "onRegisterDynamicPanel", "commit", "onAutosave"],
-        },
-        unregisterPanel: {
-            actions: ["prepare", "removeItem", "commit", "onAutosave"],
-        },
-        registerPanelHandle: { actions: ["assignPanelHandleData"] },
-        unregisterPanelHandle: {
-            actions: ["prepare", "removeItem", "commit", "onAutosave"],
-        },
-        setSize: { actions: ["updateSize"] },
-        setOrientation: { actions: ["updateOrientation"] },
-    },
-}, {
-    guards: {
-        shouldNotifyCollapseToggle: ({ context, event }) => {
-            isEvent(event, ["collapsePanel", "expandPanel"]);
-            const panel = getPanelWithId(context, event.panelId);
-            return !event.controlled && panel.collapseIsControlled === true;
-        },
-        shouldCollapseToggle: ({ context, event }) => {
-            isEvent(event, ["collapsePanel", "expandPanel"]);
-            const panel = getPanelWithId(context, event.panelId);
-            return panel.collapseIsControlled === true;
-        },
-    },
-    actors: {
-        animation: animationActor,
-    },
-    actions: {
-        notifyCollapseToggle: ({ context, event }) => {
-            isEvent(event, ["collapsePanel", "expandPanel"]);
-            const panel = getPanelWithId(context, event.panelId);
-            panel.onCollapseChange?.current?.(!panel.collapsed);
-        },
-        runCollapseToggle: enqueueActions(({ context, event, enqueue }) => {
-            isEvent(event, ["collapsePanel", "expandPanel"]);
-            const handle = getHandleForPanelId(context, event.panelId);
-            // When collapsing a panel it will be in the opposite direction
-            // that handle assumes
-            const delta = event.type === "collapsePanel"
-                ? handle.direction * -1
-                : handle.direction;
-            const newContext = updateLayout(context, {
-                handleId: handle.item.id,
-                type: "dragHandle",
-                controlled: event.controlled,
-                value: dragHandlePayload({ delta, orientation: context.orientation }),
-            });
-            enqueue.assign(newContext);
-        }),
-        onToggleCollapseComplete: assign({
-            items: ({ context, event: e }) => {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                const output = e.output;
-                invariant(output, "Expected output from animation actor");
-                const panel = getPanelWithId(context, output.panelId);
-                panel.collapsed = output.action === "collapse";
-                if (panel.collapsed) {
-                    panel.currentValue = panel.collapsedSize;
-                }
-                return context.items;
-            },
-        }),
-        updateSize: assign({
-            size: ({ event }) => {
-                isEvent(event, ["setSize"]);
-                return event.size;
-            },
-        }),
-        recordActualItemSize: assign({
-            items: ({ context, event }) => {
-                isEvent(event, ["setActualItemsSize"]);
-                const orientation = context.orientation;
-                for (const [id, size] of Object.entries(event.childrenSizes)) {
-                    const item = context.items.find((i) => i.id === id);
-                    if (!isPanelData(item)) {
-                        continue;
-                    }
-                    item.currentValue = makePixelUnit(orientation === "horizontal" ? size.width : size.height);
-                }
-                return commitLayout(context);
-            },
-        }),
-        updateOrientation: assign({
-            orientation: ({ event }) => {
-                isEvent(event, ["setOrientation"]);
-                return event.orientation;
-            },
-        }),
-        assignPanelData: assign({
-            items: ({ context, event }) => {
-                isEvent(event, ["registerPanel"]);
-                return addDeDuplicatedItems(context.items, {
-                    type: "panel",
-                    currentValue: makePixelUnit(-1),
-                    ...event.data,
-                });
-            },
-        }),
-        onRegisterDynamicPanel: assign({
-            items: ({ context, event }) => {
-                isEvent(event, ["registerDynamicPanel"]);
-                let currentValue = makePixelUnit(0);
-                if (event.data.collapsible &&
-                    event.data.collapsed &&
-                    event.data.collapsedSize) {
-                    currentValue = event.data.collapsedSize;
-                }
-                else if (event.data.default) {
-                    currentValue = event.data.default;
-                }
-                else {
-                    currentValue = event.data.min;
-                }
-                const newItems = addDeDuplicatedItems(context.items, {
-                    type: "panel",
-                    ...event.data,
-                    currentValue,
-                });
-                const itemIndex = newItems.findIndex((item) => item.id === event.data.id);
-                const newContext = { ...context, items: newItems };
-                const overflowDueToHandles = context.items
-                    .reduce((acc, i) => {
-                    if (isPanelHandle(i)) {
-                        return acc.add(getUnitPixelValue(context, i.size));
-                    }
-                    return acc.add(i.currentValue.value);
-                }, new Big(0))
-                    .minus(getGroupSize(context));
-                applyDeltaInBothDirections(newContext, newItems, itemIndex, currentValue.value.add(overflowDueToHandles).neg());
-                return newItems;
-            },
-        }),
-        assignPanelHandleData: assign({
-            items: ({ context, event }) => {
-                isEvent(event, ["registerPanelHandle"]);
-                const unit = parseUnit(event.data.size);
-                return addDeDuplicatedItems(context.items, {
-                    type: "handle",
-                    ...event.data,
-                    size: {
-                        type: "pixel",
-                        value: new Big(unit.value),
-                    },
-                });
-            },
-        }),
-        removeItem: assign({
-            items: ({ context, event }) => {
-                isEvent(event, ["unregisterPanel", "unregisterPanelHandle"]);
-                const itemIndex = context.items.findIndex((item) => item.id === event.id);
-                const item = context.items[itemIndex];
-                if (!item) {
-                    return context.items;
-                }
-                const newItems = context.items.filter((i) => i.id !== event.id);
-                const removedSize = isPanelData(item)
-                    ? item.currentValue.value
-                    : item.size.value;
-                applyDeltaInBothDirections(context, newItems, itemIndex, removedSize);
-                return newItems;
-            },
-        }),
-        prepare: assign({
-            items: ({ context }) => prepareItems(context),
-        }),
-        onDragHandle: enqueueActions(({ context, event, enqueue }) => {
-            isEvent(event, ["dragHandle"]);
-            enqueue.assign(updateLayout(context, event));
-        }),
-        commit: assign({
-            dragOvershoot: new Big(0),
-            items: ({ context }) => commitLayout(context),
-        }),
-        onApplyDelta: assign(({ context, event }) => {
-            isEvent(event, ["applyDelta"]);
-            return updateLayout(context, {
-                handleId: event.handleId,
-                type: "collapsePanel",
-                disregardCollapseBuffer: true,
-                value: dragHandlePayload({
-                    delta: event.delta,
-                    orientation: context.orientation,
-                }),
-            });
-        }),
-        onSetPanelSize: enqueueActions(({ context, event, enqueue }) => {
-            isEvent(event, ["setPanelPixelSize"]);
-            const panel = getPanelWithId(context, event.panelId);
-            const handle = getHandleForPanelId(context, event.panelId);
-            const current = panel.currentValue.value;
-            const newSize = clampUnit(context, panel, getUnitPixelValue(context, parseUnit(event.size)));
-            const isBigger = newSize > current;
-            const delta = isBigger
-                ? newSize.minus(current)
-                : current.minus(newSize);
-            enqueue.assign(iterativelyUpdateLayout({
-                context,
-                direction: (handle.direction * (isBigger ? 1 : -1)),
-                handleId: handle.item.id,
-                delta,
-            }));
-        }),
-    },
-});
-// #endregion
-//# sourceMappingURL=index.js.map