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

package/dist/esm/index.js

@@ -1,15 +1,15 @@
 import { raf } from "@react-spring/rafz";
-import { createMachine, assign, enqueueActions, fromPromise } from "xstate";
+import { createMachine, assign, enqueueActions, fromPromise, } from "xstate";
 import invariant from "invariant";
-import * as easings from "d3-ease";
+import Big from "big.js";
 // #region Constants
 /** The default amount a user can `dragOvershoot` before the panel collapses */
 const COLLAPSE_THRESHOLD = 50;
-function makePercentUnit(value) {
-    return { type: "percent", value };
+export function makePercentUnit(value) {
+    return { type: "percent", value: new Big(value) };
 }
-function makePixelUnit(value) {
-    return { type: "pixel", value };
+export function makePixelUnit(value) {
+    return { type: "pixel", value: new Big(value) };
 }
 function getCollapseAnimation(panel) {
     let easeFn = collapseAnimations.linear;
@@ -28,13 +28,47 @@ function getCollapseAnimation(panel) {
     }
     return { ease: easeFn, duration };
 }
+/** Copied from https://github.com/d3/d3-ease */
 const collapseAnimations = {
-    "ease-in-out": easings.easeQuadInOut,
-    bounce: easings.easeBackInOut,
-    linear: easings.easeLinear,
+    "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(" | ")}`);
@@ -72,6 +106,13 @@ export function initializePanel(item) {
     };
     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") {
@@ -88,9 +129,9 @@ export function parseUnit(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 groupsSize === 0 ? 0 : unit.value.div(groupsSize).toNumber();
     }
-    return unit.value;
+    return unit.value.toNumber();
 }
 export function getGroupSize(context) {
     return context.orientation === "horizontal"
@@ -102,11 +143,16 @@ export function getUnitPixelValue(context, unit) {
     const parsed = unit === "1fr" ? parseUnit(unit) : unit;
     return parsed.type === "pixel"
         ? parsed.value
-        : (parsed.value / 100) * getGroupSize(context);
+        : new Big(parsed.value).div(100).mul(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));
+    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) {
@@ -188,15 +234,20 @@ function sortWithOrder(items) {
     return withoutOrder;
 }
 /** Check if the panel has space available to add to */
-function panelHasSpace(context, item) {
+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;
     }
-    return item.currentValue.value > getUnitPixelValue(context, item.min);
+    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, disregardCollapseBuffer) {
+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)) {
@@ -205,36 +256,36 @@ function findPanelWithSpace(context, items, start, direction, disregardCollapseB
         const targetPanel = disregardCollapseBuffer
             ? createUnrestrainedPanel(context, panel)
             : panel;
-        if (panelHasSpace(context, targetPanel)) {
+        if (panelHasSpace(context, targetPanel, adjustment)) {
             return panel;
         }
     }
 }
 /** Add up all the static values in the layout */
 function getStaticWidth(context) {
-    let width = 0;
+    let width = new Big(0);
     for (const item of context.items) {
         if (isPanelHandle(item)) {
-            width += item.size.value;
+            width = width.add(item.size.value);
         }
         else if (isPanelData(item) &&
             item.collapsed &&
             item.currentValue.type === "pixel") {
-            width += item.currentValue.value;
+            width = width.add(item.currentValue.value);
         }
         else if (isPanelData(item) &&
             item.default &&
             item.default.type === "pixel") {
-            width += item.default.value;
+            width = width.add(item.default.value);
         }
     }
     return width;
 }
 function formatUnit(unit) {
     if (unit.type === "pixel") {
-        return `${unit.value}px`;
+        return `${unit.value.toNumber()}px`;
     }
-    return `${unit.value}%`;
+    return `${unit.value.toNumber()}%`;
 }
 /** Build the grid template from the item values. */
 export function buildTemplate(context) {
@@ -244,7 +295,10 @@ export function buildTemplate(context) {
         if (item.type === "panel") {
             const min = formatUnit(item.min);
             if (item.currentValue.type === "pixel" &&
-                item.currentValue.value !== -1) {
+                item.currentValue.value.toNumber() !== -1) {
+                if (item.currentValue.value.toNumber() < 0) {
+                    return "0px";
+                }
                 return formatUnit(item.currentValue);
             }
             else if (item.currentValue.type === "percent") {
@@ -273,11 +327,11 @@ function addDeDuplicatedItems(items, newItem) {
     }
     return sortWithOrder([...restItems, newItem]);
 }
-function createUnrestrainedPanel(context, data) {
+function createUnrestrainedPanel(_, data) {
     return {
         ...data,
-        min: makePixelUnit(0),
-        max: makePixelUnit(getGroupSize(context)),
+        min: makePixelUnit(-100000),
+        max: makePixelUnit(100000),
     };
 }
 // #endregion
@@ -341,8 +395,10 @@ export function prepareItems(context) {
         if (item.currentValue.type === "pixel") {
             continue;
         }
-        // TODO: Decimal proposal
-        item.currentValue = makePixelUnit(Math.round((getGroupSize(context) - staticWidth) * item.currentValue.value));
+        const pixel = new Big(getGroupSize(context))
+            .minus(staticWidth)
+            .mul(item.currentValue.value);
+        item.currentValue = makePixelUnit(pixel.toNumber());
     }
     return newItems;
 }
@@ -362,60 +418,64 @@ function updateLayout(context, dragEvent) {
     }
     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);
+    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 + moveAmount,
+            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}`);
-    const newDragOvershoot = context.dragOvershoot + moveAmount;
+    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) {
-        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 ||
+        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 ||
-                ((isInLeftOvershoot || isInRightOvershoot) &&
-                    Math.abs(newDragOvershoot) < COLLAPSE_THRESHOLD)) &&
-                potentialNewValue < min) {
-                return { dragOvershoot: newDragOvershoot };
-            }
+                isInDragBugger)) {
+            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 };
-            }
+    }
+    // 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 - moveAmount * moveDirection;
+    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 - panelBeforeNewValue;
-    const panelAfterNewValueRaw = panelAfter.currentValue.value + applied;
+    const applied = panelBeforePreviousValue.minus(panelBeforeNewValue);
+    const panelAfterNewValueRaw = panelAfter.currentValue.value.add(applied);
     let panelAfterNewValue = dragEvent.disregardCollapseBuffer
         ? clampUnit(context, unrestrainedPanelAfter, panelAfterNewValueRaw)
         : clampUnit(context, panelAfter, panelAfterNewValueRaw);
@@ -437,23 +497,23 @@ function updateLayout(context, dragEvent) {
         // Calculate the amount "extra" after the minSize the panel should grow
         const extra = 
         // Take the size it was at
-        getUnitPixelValue(context, panelAfter.collapsedSize) +
+        getUnitPixelValue(context, panelAfter.collapsedSize)
             // Add in the full overshoot so the cursor is near the slider
-            Math.abs(context.dragOvershoot) -
+            .add(context.dragOvershoot.abs())
             // Subtract the min size of the panel
-            panelAfterNewValue +
+            .sub(panelAfterNewValue
             // Then re-add the move amount
-            Math.abs(moveAmount);
+            .add(Math.abs(moveAmount)));
         panelAfter.collapsed = false;
-        if (extra > 0) {
-            panelAfterNewValue += extra;
+        if (extra.gt(0)) {
+            panelAfterNewValue = panelAfterNewValue.add(extra);
         }
-        panelBeforeNewValue -=
+        panelBeforeNewValue = panelBeforeNewValue
             // Subtract the delta of the after panel's size
-            panelAfterNewValue -
-                panelAfterPreviousValue -
-                // And then re-apply the movement value
-                Math.abs(moveAmount);
+            .minus(panelAfterNewValue
+            .minus(panelAfterPreviousValue)
+            // And then re-apply the movement value
+            .minus(Math.abs(moveAmount)));
         if (panelAfter.onCollapseChange?.current &&
             !panelAfter.collapseIsControlled &&
             !dragEvent.controlled) {
@@ -476,22 +536,21 @@ function updateLayout(context, dragEvent) {
         panelBefore.collapsed = true;
         panelBeforeNewValue = getUnitPixelValue(context, panelBefore.collapsedSize);
         // Add the extra space created to the before panel
-        panelAfterNewValue += panelBeforePreviousValue - panelBeforeNewValue;
+        panelAfterNewValue = panelAfterNewValue.add(panelBeforePreviousValue.minus(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 };
+    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) {
@@ -515,7 +574,10 @@ export function commitLayout(context) {
         }
         newItems[index] = {
             ...item,
-            currentValue: makePercentUnit(item.currentValue.value / (getGroupSize(context) - staticWidth)),
+            currentValue: {
+                type: "percent",
+                value: item.currentValue.value.div(new Big(getGroupSize(context)).sub(staticWidth)),
+            },
         };
     });
     return newItems;
@@ -535,7 +597,7 @@ export function dragHandlePayload({ delta, orientation, shiftKey = false, }) {
 /** 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++) {
+    for (let i = 0; i < delta.abs().toNumber(); i++) {
         newContext = updateLayout({
             ...context,
             ...newContext,
@@ -555,10 +617,11 @@ function iterativelyUpdateLayout({ context, handleId, delta, direction, controll
 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 (delta !== 0) {
-        const targetPanel = findPanelWithSpace(context, newItems, itemIndex + direction, direction);
+    while (deltaLeft.toNumber() !== 0) {
+        const targetPanel = findPanelWithSpace(context, newItems, itemIndex + direction, direction, delta.gt(0) ? "add" : "subtract");
         if (!targetPanel) {
             if (hasTriedBothDirections) {
                 break;
@@ -570,44 +633,47 @@ function applyDeltaInBothDirections(context, newItems, itemIndex, delta) {
             }
         }
         const oldValue = targetPanel.currentValue.value;
-        const newValue = clampUnit(context, targetPanel, oldValue + delta);
+        const newValue = clampUnit(context, targetPanel, oldValue.add(deltaLeft));
         targetPanel.currentValue.value = newValue;
-        delta -= newValue - oldValue;
+        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 = handle.direction;
-    let fullDelta = 0;
+    let direction = new Big(handle.direction);
+    let fullDelta = new Big(0);
     if (event.type === "expandPanel") {
-        fullDelta =
-            (panel.sizeBeforeCollapse ?? getUnitPixelValue(context, panel.min)) -
-                panel.currentValue.value;
+        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;
-        direction *= -1;
-        fullDelta = panel.currentValue.value - 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 = 0;
+    let appliedDelta = new Big(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 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;
@@ -627,7 +693,7 @@ export const groupMachine = createMachine({
         size: { width: 0, height: 0 },
         items: input.initialItems || [],
         orientation: input.orientation || "horizontal",
-        dragOvershoot: 0,
+        dragOvershoot: new Big(0),
         autosaveId: input.autosaveId,
         groupId: input.groupId,
     }),
@@ -810,23 +876,29 @@ export const groupMachine = createMachine({
                 });
                 const itemIndex = newItems.findIndex((item) => item.id === event.data.id);
                 const newContext = { ...context, items: newItems };
-                const overflowDueToHandles = context.items.reduce((acc, i) => {
+                const overflowDueToHandles = context.items
+                    .reduce((acc, i) => {
                     if (isPanelHandle(i)) {
-                        return acc + getUnitPixelValue(context, i.size);
+                        return acc.add(getUnitPixelValue(context, i.size));
                     }
-                    return acc + i.currentValue.value;
-                }, 0) - getGroupSize(context);
-                applyDeltaInBothDirections(newContext, newItems, itemIndex, -1 * (currentValue.value + overflowDueToHandles));
+                    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: event.data.size,
+                    size: {
+                        type: "pixel",
+                        value: new Big(unit.value),
+                    },
                 });
             },
         }),
@@ -854,7 +926,7 @@ export const groupMachine = createMachine({
             enqueue.assign(updateLayout(context, event));
         }),
         commit: assign({
-            dragOvershoot: 0,
+            dragOvershoot: new Big(0),
             items: ({ context }) => commitLayout(context),
         }),
         onApplyDelta: assign(({ context, event }) => {
@@ -876,7 +948,9 @@ export const groupMachine = createMachine({
             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;
+            const delta = isBigger
+                ? newSize.minus(current)
+                : current.minus(newSize);
             enqueue.assign(iterativelyUpdateLayout({
                 context,
                 direction: (handle.direction * (isBigger ? 1 : -1)),