@window-splitter/state 0.5.8 → 0.6.0

package/src/index.ts

@@ -1,12 +1,5 @@
 import * as Cookies from "tiny-cookie";
 import { raf } from "@react-spring/rafz";
-import {
-  createMachine,
-  assign,
-  enqueueActions,
-  fromPromise,
-  Snapshot,
-} from "xstate";
 import invariant from "tiny-invariant";
 import Big from "big.js";
 
@@ -328,10 +321,13 @@ export interface GroupMachineContextValue {
   autosaveStrategy?: "localStorage" | "cookie";
 }
 
-export type GroupMachineSnapshot = Snapshot<unknown> & {
-  context: GroupMachineContextValue;
-  value: string;
-};
+interface LockGroupEvent {
+  type: "lockGroup";
+}
+
+interface UnlockGroupEvent {
+  type: "unlockGroup";
+}
 
 export type GroupMachineEvent =
   | RegisterPanelEvent
@@ -350,7 +346,9 @@ export type GroupMachineEvent =
   | ApplyDeltaEvent
   | SetActualItemsSizeEvent
   | RebindPanelCallbacksEvent
-  | UpdateConstraintsEvent;
+  | UpdateConstraintsEvent
+  | LockGroupEvent
+  | UnlockGroupEvent;
 
 type EventForType<T extends GroupMachineEvent["type"]> = Extract<
   GroupMachineEvent,
@@ -383,12 +381,14 @@ export function getCursor(
   }
 }
 
-export function prepareSnapshot(snapshot: GroupMachineSnapshot) {
-  const snapshotContext = snapshot.context;
+export function prepareSnapshot(snapshot: GroupMachineContextValue) {
+  if (!("items" in snapshot)) {
+    return;
+  }
 
-  snapshotContext.dragOvershoot = new Big(snapshotContext.dragOvershoot);
+  snapshot.dragOvershoot = new Big(snapshot.dragOvershoot || 0);
 
-  for (const item of snapshotContext.items) {
+  for (const item of snapshot.items) {
     if (isPanelData(item)) {
       item.currentValue.value = new Big(item.currentValue.value);
       item.collapsedSize.value = new Big(item.collapsedSize.value);
@@ -1558,12 +1558,6 @@ function clearLastKnownSize(items: Item[]) {
 
 // #region Machine
 
-interface AnimationActorInput {
-  context: GroupMachineContextValue;
-  event: CollapsePanelEvent | ExpandPanelEvent;
-  send: (event: GroupMachineEvent) => void;
-}
-
 interface AnimationActorOutput {
   panelId: string;
   action: "expand" | "collapse";
@@ -1585,593 +1579,601 @@ function getDeltaForEvent(
   return panel.currentValue.value.minus(collapsedSize);
 }
 
-const animationActor = fromPromise<
-  AnimationActorOutput | undefined,
-  AnimationActorInput
->(
-  ({ input: { send, context, event } }) =>
-    new Promise<AnimationActorOutput | undefined>((resolve) => {
-      const panel = getPanelWithId(context, event.panelId);
-      const handle = getHandleForPanelId(context, event.panelId);
+function animationActor(
+  context: GroupMachineContextValue,
+  event: CollapsePanelEvent | ExpandPanelEvent,
+  send: (e: GroupMachineEvent) => void,
+  abortController: AbortController
+) {
+  const panel = getPanelWithId(context, event.panelId);
+  const handle = getHandleForPanelId(context, event.panelId);
 
-      let direction = new Big(handle.direction);
-      const fullDelta = getDeltaForEvent(context, event);
+  let direction = new Big(handle.direction);
+  const fullDelta = getDeltaForEvent(context, event);
 
-      if (event.type === "collapsePanel") {
-        panel.sizeBeforeCollapse = panel.currentValue.value.toNumber();
-        direction = direction.mul(new Big(-1));
-      }
+  return new Promise<AnimationActorOutput | undefined>((resolve, reject) => {
+    abortController.signal.addEventListener("abort", () => {
+      reject(new Error("Operation was canceled"));
+    });
+
+    if (event.type === "collapsePanel") {
+      panel.sizeBeforeCollapse = panel.currentValue.value.toNumber();
+      direction = direction.mul(new Big(-1));
+    }
 
-      const fps = 60;
-      const { duration, ease } = getCollapseAnimation(panel);
-      const totalFrames = Math.ceil(
-        panel.collapseAnimation ? duration / (1000 / fps) : 1
+    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
+          )
       );
-      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);
+      if (e.eq(1)) {
+        const action = event.type === "expandPanel" ? "expand" : "collapse";
+        resolve({ panelId: panel.id, action });
+        return false;
+      }
 
-        send({
-          type: "applyDelta",
-          handleId: handle.item.id,
-          delta: delta.toNumber(),
-        });
+      return true;
+    }
 
-        appliedDelta = appliedDelta.add(
-          delta
-            .abs()
-            .mul(
-              (delta.gt(0) && direction.lt(0)) ||
-                (delta.lt(0) && direction.gt(0))
-                ? -1
-                : 1
-            )
-        );
+    raf(renderFrame);
+  });
+}
 
-        if (e.eq(1)) {
-          const action = event.type === "expandPanel" ? "expand" : "collapse";
-          resolve({ panelId: panel.id, action });
-          return false;
-        }
+function assign<T>(target: T, source: Partial<T>) {
+  for (const key in source) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (target as any)[key] = source[key];
+  }
+}
+
+export interface GroupMachineInput {
+  orientation?: Orientation;
+  groupId: string;
+  items?: Item[];
+  autosaveStrategy?: "localStorage" | "cookie";
+}
 
-        return true;
+export type State = "idle" | "dragging" | "togglingCollapse";
+
+let groupId = 0;
+
+export function groupMachine(
+  input: Partial<GroupMachineContextValue>,
+  onUpdate?: (context: GroupMachineContextValue) => void
+) {
+  const abortController = new AbortController();
+  const state = {
+    current: "idle" as State,
+  };
+  let locked = false;
+
+  const context: GroupMachineContextValue = {
+    size: { width: 0, height: 0 },
+    items: input.items || [],
+    orientation: input.orientation || "horizontal",
+    dragOvershoot: new Big(0),
+    groupId: input.groupId || `group-${groupId++}`,
+    autosaveStrategy: input.autosaveStrategy,
+  };
+
+  const actions = {
+    prepare: () => {
+      context.items = prepareItems(context);
+    },
+    clearLastKnownSize: () => {
+      context.items = clearLastKnownSize(context.items);
+    },
+    commit: () => {
+      context.dragOvershoot = new Big(0);
+      context.items = commitLayout(context);
+    },
+    onResize: () => {
+      for (const item of context.items) {
+        if (isPanelData(item)) {
+          const pixel = item.lastKnownSize
+            ? new Big(
+                context.orientation === "horizontal"
+                  ? item.lastKnownSize.width
+                  : item.lastKnownSize.height
+              )
+            : clampUnit(
+                context,
+                item,
+                getUnitPixelValue(context, item.currentValue)
+              );
+          const groupSize = getGroupSize(context);
+
+          item.onResize?.current?.({
+            pixel: pixel.toNumber(),
+            percentage:
+              groupSize > 0 ? pixel.div(getGroupSize(context)).toNumber() : -1,
+          });
+        }
+      }
+    },
+    onAutosave: () => {
+      if (!context.autosaveStrategy || typeof window === "undefined") {
+        return;
       }
 
-      raf(renderFrame);
-    })
-);
-
-export const groupMachine = createMachine(
-  {
-    initial: "idle",
-    types: {
-      context: {} as GroupMachineContextValue,
-      events: {} as GroupMachineEvent,
-      input: {} as {
-        orientation?: Orientation;
-        groupId: string;
-        initialItems?: Item[];
-        autosaveStrategy?: "localStorage" | "cookie";
-      },
+      const snapshot = { ...context };
+      snapshot.items = clearLastKnownSize(context.items);
+      snapshot.activeDragHandleId = context.activeDragHandleId;
+      const data = JSON.stringify(snapshot);
+
+      if (context.autosaveStrategy === "localStorage") {
+        localStorage.setItem(context.groupId, data);
+      } else {
+        Cookies.set(context.groupId, data, {
+          path: "/",
+          "max-age": 31536000,
+        });
+      }
     },
-    context: ({ input }) => ({
-      size: { width: 0, height: 0 },
-      items: input.initialItems || [],
-      orientation: input.orientation || "horizontal",
-      dragOvershoot: new Big(0),
-      groupId: input.groupId,
-      autosaveStrategy: input.autosaveStrategy,
-    }),
-    states: {
-      idle: {
-        entry: ["onAutosave"],
-        on: {
-          dragHandleStart: {
-            target: "dragging",
-            actions: ["onDragHandleStart"],
-          },
-          setPanelPixelSize: {
-            actions: [
-              "prepare",
-              "onClearLastKnownSize",
-              "onSetPanelSize",
-              "commit",
-              "onResize",
-              "onAutosave",
-            ],
-          },
-          collapsePanel: [
-            {
-              actions: "notifyCollapseToggle",
-              guard: "shouldNotifyCollapseToggle",
-            },
-            { target: "togglingCollapse" },
-          ],
-          expandPanel: [
-            // This will match if we can't expand and the expansion won't happen
-            { guard: "cannotExpandPanel" },
-            {
-              actions: "notifyCollapseToggle",
-              guard: "shouldNotifyCollapseToggle",
-            },
-            { target: "togglingCollapse" },
-          ],
-        },
-      },
-      dragging: {
-        entry: ["prepare"],
-        on: {
-          dragHandle: {
-            actions: ["onClearLastKnownSize", "onDragHandle", "onResize"],
-          },
-          dragHandleEnd: { target: "idle" },
-          collapsePanel: {
-            guard: "shouldCollapseToggle",
-            actions: "runCollapseToggle",
-          },
-          expandPanel: {
-            guard: "shouldCollapseToggle",
-            actions: "runCollapseToggle",
-          },
-        },
-        exit: ["commit", "clearDragHandle"],
-      },
-      togglingCollapse: {
-        entry: ["prepare", "onClearLastKnownSize"],
-        invoke: {
-          src: "animation",
-          input: (i) => ({ ...i, send: i.self.send }),
-          onDone: {
-            target: "idle",
-            actions: ["onToggleCollapseComplete", "commit"],
-          },
-        },
-        on: {
-          applyDelta: { actions: ["onApplyDelta", "onResize"] },
-        },
-      },
+    removeItem: (id: string) => {
+      const itemIndex = context.items.findIndex((item) => item.id === id);
+      const item = context.items[itemIndex];
+
+      if (!item) {
+        return;
+      }
+
+      const newItems = context.items.filter((i) => i.id !== id);
+      const removedSize = isPanelData(item)
+        ? item.currentValue.value
+        : item.size.value;
+
+      applyDeltaInBothDirections(context, newItems, itemIndex, removedSize);
+
+      context.items = newItems;
     },
-    on: {
-      setActualItemsSize: { actions: ["recordActualItemSize", "onResize"] },
-      registerPanel: { actions: ["assignPanelData"] },
-      rebindPanelCallbacks: {
-        actions: ["rebindPanelCallbacks"],
-      },
-      updateConstraints: {
-        actions: [
-          "prepare",
-          "updateConstraints",
-          "onClearLastKnownSize",
-          "commit",
-          "onResize",
-          "onAutosave",
-        ],
-      },
-      registerDynamicPanel: {
-        actions: [
-          "prepare",
-          "onRegisterDynamicPanel",
-          "onClearLastKnownSize",
-          "commit",
-          "onResize",
-          "onAutosave",
-        ],
-      },
-      unregisterPanel: {
-        actions: [
-          "prepare",
-          "removeItem",
-          "onClearLastKnownSize",
-          "commit",
-          "onResize",
-          "onAutosave",
-        ],
-      },
-      registerPanelHandle: { actions: ["assignPanelHandleData"] },
-      unregisterPanelHandle: {
-        actions: [
-          "prepare",
-          "removeItem",
-          "onClearLastKnownSize",
-          "commit",
-          "onResize",
-          "onAutosave",
-        ],
-      },
-      setSize: { actions: ["updateSize", "onResize"] },
-      setOrientation: {
-        actions: ["updateOrientation", "onClearLastKnownSize", "onResize"],
-      },
+    notifyCollapseToggle: (event: GroupMachineEvent) => {
+      isEvent(event, ["collapsePanel", "expandPanel"]);
+      const panel = getPanelWithId(context, event.panelId);
+      panel.onCollapseChange?.current?.(!panel.collapsed);
     },
-  },
-  {
-    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;
-      },
-      cannotExpandPanel: ({ context, event }) => {
-        isEvent(event, ["expandPanel"]);
-        const delta = getDeltaForEvent(context, event);
-        const handle = getHandleForPanelId(context, event.panelId);
-        const pixelItems = prepareItems(context);
-
-        let interimContext = { ...context, items: pixelItems };
-        interimContext = {
-          ...interimContext,
-          ...iterativelyUpdateLayout({
-            context: interimContext,
-            handleId: handle.item.id,
-            controlled: event.controlled,
-            delta: delta,
-            direction: handle.direction,
-          }),
-        };
-        const updatedPanel = interimContext.items.find(
-          (i) => i.id === event.panelId
-        );
-        const totalSize = interimContext.items.reduce(
-          (acc, i) =>
-            acc.add(isPanelData(i) ? i.currentValue.value : i.size.value),
-          new Big(0)
-        );
-        const didExpand =
-          updatedPanel &&
-          isPanelData(updatedPanel) &&
-          !updatedPanel.currentValue.value.eq(updatedPanel.collapsedSize.value);
+    runCollapseToggle: (event: GroupMachineEvent) => {
+      isEvent(event, ["collapsePanel", "expandPanel"]);
 
-        return totalSize.gt(getGroupSize(context)) || !didExpand;
-      },
+      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 }),
+      });
+
+      assign(context, newContext);
     },
-    actors: {
-      animation: animationActor,
+    onAnimationEnd: (output: AnimationActorOutput | undefined) => {
+      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;
+      }
+
+      actions.commit();
     },
-    actions: {
-      onDragHandleStart: assign({
-        activeDragHandleId: ({ event }) => {
-          isEvent(event, ["dragHandleStart"]);
-          return event.handleId;
-        },
-      }),
-      clearDragHandle: assign({
-        activeDragHandleId: undefined,
-      }),
-      onAutosave: ({ context, self }) => {
-        if (!context.autosaveStrategy || typeof window === "undefined") {
-          return;
-        }
+  };
 
-        const snapshot = self.getPersistedSnapshot() as GroupMachineSnapshot;
-        snapshot.context.items = clearLastKnownSize(context.items);
-        snapshot.context.activeDragHandleId = context.activeDragHandleId;
-        snapshot.value = "idle";
-        const data = JSON.stringify(snapshot);
+  actions.onAutosave();
 
-        if (context.autosaveStrategy === "localStorage") {
-          localStorage.setItem(context.groupId, data);
-        } else {
-          Cookies.set(context.groupId, data, {
-            path: "/",
-            "max-age": 31536000,
-          });
-        }
-      },
-      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, {
+  const guards = {
+    shouldNotifyCollapseToggle: (event: GroupMachineEvent) => {
+      isEvent(event, ["collapsePanel", "expandPanel"]);
+      const panel = getPanelWithId(context, event.panelId);
+      return !event.controlled && panel.collapseIsControlled === true;
+    },
+    shouldCollapseToggle: (event: GroupMachineEvent) => {
+      isEvent(event, ["collapsePanel", "expandPanel"]);
+      const panel = getPanelWithId(context, event.panelId);
+      return panel.collapseIsControlled === true;
+    },
+    cannotExpandPanel: (event: GroupMachineEvent) => {
+      isEvent(event, ["expandPanel"]);
+      const delta = getDeltaForEvent(context, event);
+      const handle = getHandleForPanelId(context, event.panelId);
+      const pixelItems = prepareItems(context);
+
+      let interimContext = { ...context, items: pixelItems };
+      interimContext = {
+        ...interimContext,
+        ...iterativelyUpdateLayout({
+          context: interimContext,
           handleId: handle.item.id,
-          type: "dragHandle",
           controlled: event.controlled,
-          value: dragHandlePayload({ delta, orientation: context.orientation }),
-        });
+          delta: delta,
+          direction: handle.direction,
+        }),
+      };
+      const updatedPanel = interimContext.items.find(
+        (i) => i.id === event.panelId
+      );
+      const totalSize = interimContext.items.reduce(
+        (acc, i) =>
+          acc.add(isPanelData(i) ? i.currentValue.value : i.size.value),
+        new Big(0)
+      );
+      const didExpand =
+        updatedPanel &&
+        isPanelData(updatedPanel) &&
+        !updatedPanel.currentValue.value.eq(updatedPanel.collapsedSize.value);
 
-        enqueue.assign(newContext);
-      }),
-      onToggleCollapseComplete: assign({
-        items: ({ context, event: e }) => {
-          const { output } = e as unknown as { output: AnimationActorOutput };
-          invariant(output, "Expected output from animation actor");
+      return totalSize.gt(getGroupSize(context)) || !didExpand;
+    },
+  };
 
-          const panel = getPanelWithId(context, output.panelId);
-          panel.collapsed = output.action === "collapse";
+  function transition(to: State) {
+    // exit
+    switch (state.current) {
+      case "dragging":
+        actions.commit();
+        context.activeDragHandleId = undefined;
+        break;
+    }
 
-          if (panel.collapsed) {
-            panel.currentValue = panel.collapsedSize;
-          }
+    // enter
+    switch (to) {
+      case "idle":
+        actions.onAutosave();
+        break;
+      case "dragging":
+        actions.prepare();
+        break;
+      case "togglingCollapse":
+        actions.prepare();
+        actions.clearLastKnownSize();
+        break;
+    }
 
-          return context.items;
-        },
-      }),
-      updateSize: assign({
-        size: ({ event }) => {
-          isEvent(event, ["setSize"]);
-          return event.size;
-        },
-      }),
-      recordActualItemSize: assign({
-        items: ({ context, event }) => {
-          isEvent(event, ["setActualItemsSize"]);
-
-          const withLastKnownSize = context.items.map((i) => {
-            if (!isPanelData(i)) return i;
-            const lastKnownSize = event.childrenSizes[i.id] || i.lastKnownSize;
-            return { ...i, lastKnownSize };
-          });
+    state.current = to;
+  }
 
-          let totalSize = 0;
+  function send(event: GroupMachineEvent) {
+    switch (event.type) {
+      case "lockGroup":
+        locked = true;
+        break;
+      case "unlockGroup":
+        locked = false;
+        break;
+    }
 
-          for (const item of withLastKnownSize) {
-            if (isPanelData(item)) {
-              const size =
-                item.lastKnownSize?.[
-                  context.orientation === "horizontal" ? "width" : "height"
-                ];
+    if (locked) {
+      return;
+    }
 
-              // If any size is 0 don't handle overflow
-              if (!size) {
-                return withLastKnownSize;
-              }
+    switch (event.type) {
+      case "registerPanel":
+        context.items = addDeDuplicatedItems(context.items, {
+          type: "panel",
+          currentValue: makePixelUnit(-1),
+          ...event.data,
+        });
+        break;
+      case "unregisterPanel":
+        actions.prepare();
+        actions.removeItem(event.id);
+        actions.clearLastKnownSize();
+        actions.commit();
+        actions.onResize();
+        actions.onAutosave();
+        break;
+      case "registerPanelHandle": {
+        const unit =
+          typeof event.data.size === "string"
+            ? parseUnit(event.data.size)
+            : event.data.size;
+
+        context.items = addDeDuplicatedItems(context.items, {
+          type: "handle",
+          ...event.data,
+          size: {
+            type: "pixel",
+            value: new Big(unit.value),
+          },
+        });
+        break;
+      }
+      case "unregisterPanelHandle":
+        actions.prepare();
+        actions.removeItem(event.id);
+        actions.clearLastKnownSize();
+        actions.commit();
+        actions.onResize();
+        actions.onAutosave();
+        break;
+      case "registerDynamicPanel": {
+        actions.prepare();
 
-              totalSize += size;
-            } else {
-              totalSize += item.size.value.toNumber();
-            }
-          }
+        let currentValue: ParsedUnit = makePixelUnit(0);
 
-          if (totalSize > getGroupSize(context)) {
-            return handleOverflow({
-              ...context,
-              items: prepareItems({ ...context, items: withLastKnownSize }),
-            }).items;
-          }
+        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;
+        }
 
-          return withLastKnownSize;
-        },
-      }),
-      updateOrientation: assign({
-        orientation: ({ event }) => {
-          isEvent(event, ["setOrientation"]);
-          return event.orientation;
-        },
-      }),
-      onClearLastKnownSize: assign({
-        items: ({ context }) => clearLastKnownSize(context.items),
-      }),
-      assignPanelData: assign({
-        items: ({ context, event }) => {
-          isEvent(event, ["registerPanel"]);
-
-          return addDeDuplicatedItems(context.items, {
-            type: "panel",
-            currentValue: makePixelUnit(-1),
-            ...event.data,
-          });
-        },
-      }),
-      rebindPanelCallbacks: assign({
-        items: ({ context, event }) => {
-          isEvent(event, ["rebindPanelCallbacks"]);
-
-          for (const item of context.items) {
-            if (isPanelData(item) && item.id === event.data.id) {
-              item.onCollapseChange = event.data.onCollapseChange;
-              item.onResize = event.data.onResize;
+        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()
+        );
+
+        context.items = newItems;
+
+        actions.clearLastKnownSize();
+        actions.commit();
+        actions.onResize();
+        actions.onAutosave();
+        break;
+      }
+      case "rebindPanelCallbacks":
+        for (const item of context.items) {
+          if (isPanelData(item) && item.id === event.data.id) {
+            item.onCollapseChange = event.data.onCollapseChange;
+            item.onResize = event.data.onResize;
           }
+        }
+        break;
+      case "updateConstraints":
+        actions.prepare();
 
-          return context.items;
-        },
-      }),
-      updateConstraints: assign({
-        items: ({ context, event }) => {
-          isEvent(event, ["updateConstraints"]);
-
-          for (const item of context.items) {
-            if (isPanelData(item) && item.id === event.data.id) {
-              const panel = event.data as PanelData;
-              item.min = panel.min;
-              item.max = panel.max;
-              item.default = panel.default;
-              item.collapsedSize = panel.collapsedSize;
-              item.isStaticAtRest = panel.isStaticAtRest;
-              item.collapseAnimation = panel.collapseAnimation;
-              item.collapsible = panel.collapsible;
-            } else if (isPanelHandle(item) && item.id === event.data.id) {
-              const handle = event.data as PanelHandleData;
-              item.size = handle.size;
-            }
+        for (const item of context.items) {
+          if (isPanelData(item) && item.id === event.data.id) {
+            const panel = event.data as PanelData;
+            item.min = panel.min;
+            item.max = panel.max;
+            item.default = panel.default;
+            item.collapsedSize = panel.collapsedSize;
+            item.isStaticAtRest = panel.isStaticAtRest;
+            item.collapseAnimation = panel.collapseAnimation;
+            item.collapsible = panel.collapsible;
+          } else if (isPanelHandle(item) && item.id === event.data.id) {
+            const handle = event.data as PanelHandleData;
+            item.size = handle.size;
           }
+        }
 
-          return context.items;
-        },
-      }),
-      onRegisterDynamicPanel: assign({
-        items: ({ context, event }) => {
-          isEvent(event, ["registerDynamicPanel"]);
+        actions.clearLastKnownSize();
+        actions.commit();
+        actions.onResize();
+        actions.onAutosave();
+        break;
+      case "setActualItemsSize": {
+        const withLastKnownSize = context.items.map((i) => {
+          if (!isPanelData(i)) return i;
+          const lastKnownSize = event.childrenSizes[i.id] || i.lastKnownSize;
+          return { ...i, lastKnownSize };
+        });
 
-          let currentValue: ParsedUnit = makePixelUnit(0);
+        let totalSize = 0;
+        let useLastKnownSize = false;
 
-          if (
-            event.data.collapsible &&
-            event.data.collapsed &&
-            event.data.collapsedSize
-          ) {
-            currentValue = event.data.collapsedSize;
-          } else if (event.data.default) {
-            currentValue = event.data.default;
+        for (const item of withLastKnownSize) {
+          if (isPanelData(item)) {
+            const size =
+              item.lastKnownSize?.[
+                context.orientation === "horizontal" ? "width" : "height"
+              ];
+
+            // If any size is 0 don't handle overflow
+            if (!size) {
+              context.items = withLastKnownSize;
+              useLastKnownSize = true;
+              break;
+            }
+
+            totalSize += size;
           } else {
-            currentValue = event.data.min;
+            totalSize += item.size.value.toNumber();
           }
+        }
 
-          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));
-              }
+        if (useLastKnownSize) {
+          context.items = withLastKnownSize;
+        } else if (totalSize > getGroupSize(context)) {
+          context.items = handleOverflow({
+            ...context,
+            items: prepareItems({ ...context, items: withLastKnownSize }),
+          }).items;
+        } else {
+          context.items = withLastKnownSize;
+        }
 
-              return acc.add(i.currentValue.value);
-            }, new Big(0))
-            .minus(getGroupSize(context));
+        actions.onResize();
+        break;
+      }
+      case "setSize": {
+        context.size = event.size;
+        actions.onResize();
+        break;
+      }
+      case "setOrientation":
+        context.orientation = event.orientation;
+        actions.clearLastKnownSize();
+        actions.onResize();
+        break;
+      default:
+        break;
+    }
 
-          applyDeltaInBothDirections(
-            newContext,
-            newItems,
-            itemIndex,
-            currentValue.value.add(overflowDueToHandles).neg()
+    if (state.current === "idle") {
+      switch (event.type) {
+        case "dragHandleStart":
+          transition("dragging");
+          context.activeDragHandleId = event.handleId;
+          break;
+        case "setPanelPixelSize": {
+          actions.prepare();
+          actions.clearLastKnownSize();
+
+          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);
 
-          return newItems;
-        },
-      }),
-      assignPanelHandleData: assign({
-        items: ({ context, event }) => {
-          isEvent(event, ["registerPanelHandle"]);
-
-          const unit =
-            typeof event.data.size === "string"
-              ? parseUnit(event.data.size)
-              : 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
+          Object.assign(
+            context,
+            iterativelyUpdateLayout({
+              context,
+              direction: (handle.direction * (isBigger ? 1 : -1)) as -1 | 1,
+              handleId: handle.item.id,
+              delta,
+            })
           );
-          const item = context.items[itemIndex];
 
-          if (!item) {
-            return context.items;
+          actions.commit();
+          actions.onResize();
+          actions.onAutosave();
+          break;
+        }
+        case "collapsePanel":
+          if (guards.shouldNotifyCollapseToggle(event)) {
+            actions.notifyCollapseToggle(event);
+          } else {
+            transition("togglingCollapse");
+            abortController.abort();
+            animationActor(context, event, send, abortController).then(
+              (output) => {
+                actions.onAnimationEnd(output);
+                transition("idle");
+              }
+            );
+          }
+          break;
+        case "expandPanel":
+          if (guards.cannotExpandPanel(event)) {
+            break;
+          } else {
+            if (guards.shouldNotifyCollapseToggle(event)) {
+              actions.notifyCollapseToggle(event);
+            } else {
+              transition("togglingCollapse");
+              abortController.abort();
+              animationActor(context, event, send, abortController).then(
+                (output) => {
+                  actions.onAnimationEnd(output);
+                  transition("idle");
+                }
+              );
+            }
           }
 
-          const newItems = context.items.filter((i) => i.id !== event.id);
-          const removedSize = isPanelData(item)
-            ? item.currentValue.value
-            : item.size.value;
+          break;
+        default:
+          break;
+      }
+    } else if (state.current === "dragging") {
+      switch (event.type) {
+        case "dragHandle":
+          actions.clearLastKnownSize();
+          assign(context, updateLayout(context, event));
+          actions.onResize();
+          break;
+        case "dragHandleEnd":
+          transition("idle");
+          break;
+        case "expandPanel":
+        case "collapsePanel":
+          if (guards.shouldCollapseToggle(event)) {
+            actions.runCollapseToggle(event);
+          }
+          break;
+      }
+    } else if (state.current === "togglingCollapse") {
+      switch (event.type) {
+        case "applyDelta":
+          assign(
+            context,
+            updateLayout(context, {
+              handleId: event.handleId,
+              type: "collapsePanel",
+              disregardCollapseBuffer: true,
+              value: dragHandlePayload({
+                delta: event.delta,
+                orientation: context.orientation,
+              }),
+            })
+          );
+          actions.onResize();
+          break;
+      }
+    }
 
-          applyDeltaInBothDirections(context, newItems, itemIndex, removedSize);
+    onUpdate?.(context);
+  }
 
-          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);
+  return [context, send, state] as const;
+}
 
-        enqueue.assign(
-          iterativelyUpdateLayout({
-            context,
-            direction: (handle.direction * (isBigger ? 1 : -1)) as -1 | 1,
-            handleId: handle.item.id,
-            delta,
-          })
-        );
-      }),
-      onResize: ({ context }) => {
-        for (const item of context.items) {
-          if (isPanelData(item)) {
-            const pixel = item.lastKnownSize
-              ? new Big(
-                  context.orientation === "horizontal"
-                    ? item.lastKnownSize.width
-                    : item.lastKnownSize.height
-                )
-              : clampUnit(
-                  context,
-                  item,
-                  getUnitPixelValue(context, item.currentValue)
-                );
-            const groupSize = getGroupSize(context);
-
-            item.onResize?.current?.({
-              pixel: pixel.toNumber(),
-              percentage:
-                groupSize > 0
-                  ? pixel.div(getGroupSize(context)).toNumber()
-                  : -1,
-            });
-          }
-        }
-      },
-    },
-  }
-);
+export type SendFn = ReturnType<typeof groupMachine>[1];
 
 // #endregion