@window-splitter/state 0.2.2

package/dist/esm/index.js

@@ -0,0 +1,890 @@
+import { raf } from "@react-spring/rafz";
+import { createMachine, assign, enqueueActions, fromPromise } from "xstate";
+import invariant from "invariant";
+import * as easings from "d3-ease";
+// #region Constants
+/** The default amount a user can `dragOvershoot` before the panel collapses */
+const COLLAPSE_THRESHOLD = 50;
+function makePercentUnit(value) {
+    return { type: "percent", value };
+}
+function makePixelUnit(value) {
+    return { type: "pixel", 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 };
+}
+const collapseAnimations = {
+    "ease-in-out": easings.easeQuadInOut,
+    bounce: easings.easeBackInOut,
+    linear: easings.easeLinear,
+};
+// #endregion
+// #region Helpers
+/** 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) };
+}
+/** 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 unit.value / groupsSize;
+    }
+    return unit.value;
+}
+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
+        : (parsed.value / 100) * getGroupSize(context);
+}
+/** Clamp a new `currentValue` given the panel's constraints. */
+function clampUnit(context, item, value) {
+    return Math.min(Math.max(value, getUnitPixelValue(context, item.min)), getUnitPixelValue(context, item.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) {
+    invariant(item.currentValue.type === "pixel", `panelHasSpace only works with number values: ${item.id} ${item.currentValue}`);
+    if (item.collapsible && !item.collapsed) {
+        return true;
+    }
+    return item.currentValue.value > getUnitPixelValue(context, item.min);
+}
+/** Search in a `direction` for a panel that still has space to expand. */
+function findPanelWithSpace(context, items, start, direction, 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)) {
+            return panel;
+        }
+    }
+}
+/** Add up all the static values in the layout */
+function getStaticWidth(context) {
+    let width = 0;
+    for (const item of context.items) {
+        if (isPanelHandle(item)) {
+            width += item.size.value;
+        }
+        else if (isPanelData(item) &&
+            item.collapsed &&
+            item.currentValue.type === "pixel") {
+            width += item.currentValue.value;
+        }
+        else if (isPanelData(item) &&
+            item.default &&
+            item.default.type === "pixel") {
+            width += item.default.value;
+        }
+    }
+    return width;
+}
+function formatUnit(unit) {
+    if (unit.type === "pixel") {
+        return `${unit.value}px`;
+    }
+    return `${unit.value}%`;
+}
+/** 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 !== -1) {
+                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(context, data) {
+    return {
+        ...data,
+        min: makePixelUnit(0),
+        max: makePixelUnit(getGroupSize(context)),
+    };
+}
+// #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;
+        }
+        // TODO: Decimal proposal
+        item.currentValue = makePixelUnit(Math.round((getGroupSize(context) - staticWidth) * item.currentValue.value));
+    }
+    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, dragEvent.disregardCollapseBuffer);
+    // No panel with space, just record the drag overshoot
+    if (!panelBefore) {
+        return {
+            dragOvershoot: context.dragOvershoot + moveAmount,
+        };
+    }
+    invariant(isPanelData(panelBefore), `Expected panel before: ${handle.id}`);
+    const panelAfter = newItems[handleIndex - moveDirection];
+    invariant(panelAfter && isPanelData(panelAfter), `Expected panel after: ${handle.id}`);
+    const newDragOvershoot = context.dragOvershoot + moveAmount;
+    // Don't let the panel expand until the threshold is reached
+    if (!dragEvent.disregardCollapseBuffer) {
+        if (panelAfter.collapsible && panelAfter.collapsed) {
+            const isInLeftBuffer = newDragOvershoot < 0 && moveDirection > 0;
+            const isInLeftOvershoot = newDragOvershoot > 0 && moveDirection > 0;
+            const isInRightBuffer = newDragOvershoot > 0 && moveDirection < 0;
+            const isInRightOvershoot = newDragOvershoot < 0 && moveDirection < 0;
+            const potentialNewValue = panelAfter.currentValue.value +
+                newDragOvershoot * (isInRightBuffer ? moveDirection : 1);
+            const min = getUnitPixelValue(context, panelAfter.min);
+            if ((newDragOvershoot === 0 ||
+                isInRightBuffer ||
+                isInLeftBuffer ||
+                ((isInLeftOvershoot || isInRightOvershoot) &&
+                    Math.abs(newDragOvershoot) < COLLAPSE_THRESHOLD)) &&
+                potentialNewValue < min) {
+                return { dragOvershoot: newDragOvershoot };
+            }
+        }
+        // Don't let the panel collapse until the threshold is reached
+        else if (panelBefore.collapsible &&
+            panelBefore.currentValue.value ===
+                getUnitPixelValue(context, panelBefore.min)) {
+            const potentialNewValue = panelBefore.currentValue.value - Math.abs(newDragOvershoot);
+            if (Math.abs(newDragOvershoot) < COLLAPSE_THRESHOLD &&
+                potentialNewValue >
+                    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 - moveAmount * 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 - panelBeforeNewValue;
+    const panelAfterNewValueRaw = panelAfter.currentValue.value + 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
+            Math.abs(context.dragOvershoot) -
+            // Subtract the min size of the panel
+            panelAfterNewValue +
+            // Then re-add the move amount
+            Math.abs(moveAmount);
+        panelAfter.collapsed = false;
+        if (extra > 0) {
+            panelAfterNewValue += extra;
+        }
+        panelBeforeNewValue -=
+            // Subtract the delta of the after panel's size
+            panelAfterNewValue -
+                panelAfterPreviousValue -
+                // And then re-apply the movement value
+                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 += panelBeforePreviousValue - panelBeforeNewValue;
+        if (panelBefore.onCollapseChange?.current &&
+            !panelBefore.collapseIsControlled &&
+            !dragEvent.controlled) {
+            panelBefore.onCollapseChange.current(true);
+        }
+    }
+    panelBefore.currentValue = makePixelUnit(panelBeforeNewValue);
+    panelAfter.currentValue = makePixelUnit(panelAfterNewValue);
+    const leftoverSpace = getGroupSize(context) -
+        newItems.reduce((acc, b) => acc +
+            // in updateLayout the panel units will always be numbers
+            (isPanelData(b) ? b.currentValue.value : b.size.value), 0);
+    // TODO: this is wrong?
+    panelBefore.currentValue.value += leftoverSpace;
+    return { items: newItems, dragOvershoot: 0 };
+}
+/** 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: makePercentUnit(item.currentValue.value / (getGroupSize(context) - 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 < Math.abs(delta); 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;
+    // Starting from where the items was removed add space to the panels around it.
+    // This is only needed for conditional rendering.
+    while (delta !== 0) {
+        const targetPanel = findPanelWithSpace(context, newItems, itemIndex + direction, direction);
+        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 + delta);
+        targetPanel.currentValue.value = newValue;
+        delta -= newValue - 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 = handle.direction;
+    let fullDelta = 0;
+    if (event.type === "expandPanel") {
+        fullDelta =
+            (panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)) -
+                panel.currentValue.value;
+    }
+    else {
+        const collapsedSize = getUnitPixelValue(context, panel.collapsedSize);
+        panel.sizeBeforeCollapse = panel.currentValue.value;
+        direction *= -1;
+        fullDelta = panel.currentValue.value - collapsedSize;
+    }
+    const fps = 60;
+    const { duration, ease } = getCollapseAnimation(panel);
+    const totalFrames = Math.ceil(panel.collapseAnimation ? duration / (1000 / fps) : 1);
+    let frame = 0;
+    let appliedDelta = 0;
+    function renderFrame() {
+        const progress = (frame++ + 1) / totalFrames;
+        const e = panel.collapseAnimation ? ease(progress) : 1;
+        const delta = (e * fullDelta - appliedDelta) * direction;
+        send({ type: "applyDelta", handleId: handle.item.id, delta });
+        appliedDelta +=
+            Math.abs(delta) *
+                ((delta > 0 && direction === -1) || (delta < 0 && direction === 1)
+                    ? -1
+                    : 1);
+        if (e === 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: 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 + getUnitPixelValue(context, i.size);
+                    }
+                    return acc + i.currentValue.value;
+                }, 0) - getGroupSize(context);
+                applyDeltaInBothDirections(newContext, newItems, itemIndex, -1 * (currentValue.value + overflowDueToHandles));
+                return newItems;
+            },
+        }),
+        assignPanelHandleData: assign({
+            items: ({ context, event }) => {
+                isEvent(event, ["registerPanelHandle"]);
+                return addDeDuplicatedItems(context.items, {
+                    type: "handle",
+                    ...event.data,
+                    size: event.data.size,
+                });
+            },
+        }),
+        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: 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 - current : current - newSize;
+            enqueue.assign(iterativelyUpdateLayout({
+                context,
+                direction: (handle.direction * (isBigger ? 1 : -1)),
+                handleId: handle.item.id,
+                delta,
+            }));
+        }),
+    },
+});
+// #endregion
+//# sourceMappingURL=index.js.map