@zag-js/splitter 0.82.2 → 1.0.0

package/dist/index.mjs

@@ -1,62 +1,44 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { createScope, queryAll, dataAttr, getEventStep, getEventKey, trackPointerMove, raf, getRelativePoint } from '@zag-js/dom-query';
+import { trackPointerMove, raf, getRelativePoint, dataAttr, getEventStep, getEventKey } from '@zag-js/dom-query';
 import { createMachine } from '@zag-js/core';
-import { createSplitProps, compact } from '@zag-js/utils';
+import { compact, createSplitProps } from '@zag-js/utils';
 import { createProps } from '@zag-js/types';
 
 // src/splitter.anatomy.ts
 var anatomy = createAnatomy("splitter").parts("root", "panel", "resizeTrigger");
 var parts = anatomy.build();
-var dom = createScope({
-  getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
-  getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
-  getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
-  getGlobalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
-  getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
-  getResizeTriggerEl: (ctx, id) => dom.getById(ctx, dom.getResizeTriggerId(ctx, id)),
-  getPanelEl: (ctx, id) => dom.getById(ctx, dom.getPanelId(ctx, id)),
-  getCursor(ctx) {
-    const x = ctx.isHorizontal;
-    let cursor = x ? "col-resize" : "row-resize";
-    if (ctx.activeResizeState.isAtMin) cursor = x ? "e-resize" : "s-resize";
-    if (ctx.activeResizeState.isAtMax) cursor = x ? "w-resize" : "n-resize";
-    return cursor;
-  },
-  getPanelStyle(ctx, id) {
-    const flexGrow = ctx.panels.find((panel) => panel.id === id)?.size ?? "0";
-    return {
-      flexBasis: 0,
-      flexGrow,
-      flexShrink: 1,
-      overflow: "hidden"
-    };
-  },
-  getActiveHandleEl(ctx) {
-    const activeId = ctx.activeResizeId;
-    if (activeId == null) return;
-    return dom.getById(ctx, dom.getResizeTriggerId(ctx, activeId));
-  },
-  getResizeTriggerEls(ctx) {
-    const ownerId = CSS.escape(dom.getRootId(ctx));
-    return queryAll(dom.getRootEl(ctx), `[role=separator][data-ownedby='${ownerId}']`);
-  },
-  setupGlobalCursor(ctx) {
-    const styleEl = dom.getById(ctx, dom.getGlobalCursorId(ctx));
-    const textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`;
-    if (styleEl) {
-      styleEl.textContent = textContent;
-    } else {
-      const style = dom.getDoc(ctx).createElement("style");
-      style.id = dom.getGlobalCursorId(ctx);
-      style.textContent = textContent;
-      dom.getDoc(ctx).head.appendChild(style);
-    }
-  },
-  removeGlobalCursor(ctx) {
-    dom.getById(ctx, dom.getGlobalCursorId(ctx))?.remove();
+var getRootId = (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`;
+var getResizeTriggerId = (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`;
+var getPanelId = (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`;
+var getGlobalCursorId = (ctx) => `splitter:${ctx.id}:global-cursor`;
+var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
+var getResizeTriggerEl = (ctx, id) => ctx.getById(getResizeTriggerId(ctx, id));
+var getCursor = (state, x) => {
+  let cursor = x ? "col-resize" : "row-resize";
+  if (state.isAtMin) cursor = x ? "e-resize" : "s-resize";
+  if (state.isAtMax) cursor = x ? "w-resize" : "n-resize";
+  return cursor;
+};
+var getPanelStyle = (panels, id) => {
+  const flexGrow = panels.find((panel) => panel.id === id)?.size ?? "0";
+  return { flexBasis: 0, flexGrow, flexShrink: 1, overflow: "hidden" };
+};
+var setupGlobalCursor = (ctx, state, x) => {
+  const styleEl = ctx.getById(getGlobalCursorId(ctx));
+  const textContent = `* { cursor: ${getCursor(state, x)} !important; }`;
+  if (styleEl) {
+    styleEl.textContent = textContent;
+  } else {
+    const style = ctx.getDoc().createElement("style");
+    style.id = getGlobalCursorId(ctx);
+    style.textContent = textContent;
+    ctx.getDoc().head.appendChild(style);
   }
-});
+};
+var removeGlobalCursor = (ctx) => {
+  const styleEl = ctx.getById(getGlobalCursorId(ctx));
+  styleEl?.remove();
+};
 
 // src/splitter.utils.ts
 function validateSize(key, size) {
@@ -64,11 +46,11 @@ function validateSize(key, size) {
     throw new Error(`Total ${key} of panels cannot be greater than 100`);
   }
 }
-function getNormalizedPanels(ctx) {
+function getNormalizedPanels(sizes) {
   let numOfPanelsWithoutSize = 0;
   let totalSize = 0;
   let totalMinSize = 0;
-  const panels = ctx.size.map((panel) => {
+  const panels = sizes.map((panel) => {
     const minSize = panel.minSize ?? 0;
     const maxSize = panel.maxSize ?? 100;
     totalMinSize += minSize;
@@ -106,14 +88,14 @@ function getNormalizedPanels(ctx) {
   });
   return result;
 }
-function getHandlePanels(ctx, id = ctx.activeResizeId) {
+function getHandlePanels(panels, id) {
   const [beforeId, afterId] = id?.split(":") ?? [];
   if (!beforeId || !afterId) return;
-  const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId);
-  const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId);
+  const beforeIndex = panels.findIndex((panel) => panel.id === beforeId);
+  const afterIndex = panels.findIndex((panel) => panel.id === afterId);
   if (beforeIndex === -1 || afterIndex === -1) return;
-  const before = ctx.previousPanels[beforeIndex];
-  const after = ctx.previousPanels[afterIndex];
+  const before = panels[beforeIndex];
+  const after = panels[afterIndex];
   return {
     before: {
       ...before,
@@ -125,20 +107,20 @@ function getHandlePanels(ctx, id = ctx.activeResizeId) {
     }
   };
 }
-function getHandleBounds(ctx, id = ctx.activeResizeId) {
-  const panels = getHandlePanels(ctx, id);
-  if (!panels) return;
-  const { before, after } = panels;
+function getHandleBounds(panels, id) {
+  const handlePanels = getHandlePanels(panels, id);
+  if (!handlePanels) return;
+  const { before, after } = handlePanels;
   return {
     min: Math.max(before.start + before.minSize, after.end - after.maxSize),
     max: Math.min(after.end - after.minSize, before.maxSize + before.start)
   };
 }
-function getPanelBounds(ctx, id) {
-  const bounds = getHandleBounds(ctx, id);
-  const panels = getHandlePanels(ctx, id);
-  if (!bounds || !panels) return;
-  const { before, after } = panels;
+function getPanelBounds(panels, id) {
+  const bounds = getHandleBounds(panels, id);
+  const handlePanels = getHandlePanels(panels, id);
+  if (!bounds || !handlePanels) return;
+  const { before, after } = handlePanels;
   const beforeMin = Math.abs(before.start - bounds.min);
   const afterMin = after.size + (before.size - beforeMin);
   const beforeMax = Math.abs(before.start - bounds.max);
@@ -177,19 +159,21 @@ function clamp(value, min, max) {
 }
 
 // src/splitter.connect.ts
-function connect(state, send, normalize) {
-  const horizontal = state.context.isHorizontal;
+function connect(service, normalize) {
+  const { state, send, prop, computed, context, scope } = service;
+  const horizontal = computed("isHorizontal");
   const focused = state.hasTag("focus");
   const dragging = state.matches("dragging");
-  const panels = state.context.panels;
+  const panels = computed("panels");
+  const activeResizeId = context.get("activeResizeId");
   function getResizeTriggerState(props2) {
     const { id, disabled } = props2;
     const ids = id.split(":");
-    const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
-    const panels2 = getHandleBounds(state.context, id);
+    const panelIds = ids.map((id2) => getPanelId(scope, id2));
+    const panels2 = getHandleBounds(computed("panels"), id);
     return {
       disabled: !!disabled,
-      focused: state.context.activeResizeId === id && focused,
+      focused: activeResizeId === id && focused,
       panelIds,
       min: panels2?.min,
       max: panels2?.max,
@@ -200,7 +184,7 @@ function connect(state, send, normalize) {
     focused,
     dragging,
     getResizeTriggerState,
-    bounds: getHandleBounds(state.context),
+    bounds: getHandleBounds(computed("panels"), activeResizeId),
     setToMinSize(id) {
       const panel = panels.find((panel2) => panel2.id === id);
       send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" });
@@ -215,9 +199,9 @@ function connect(state, send, normalize) {
     getRootProps() {
       return normalize.element({
         ...parts.root.attrs,
-        "data-orientation": state.context.orientation,
-        id: dom.getRootId(state.context),
-        dir: state.context.dir,
+        "data-orientation": prop("orientation"),
+        id: getRootId(scope),
+        dir: prop("dir"),
         style: {
           display: "flex",
           flexDirection: horizontal ? "row" : "column",
@@ -231,11 +215,11 @@ function connect(state, send, normalize) {
       const { id } = props2;
       return normalize.element({
         ...parts.panel.attrs,
-        "data-orientation": state.context.orientation,
-        dir: state.context.dir,
-        id: dom.getPanelId(state.context, id),
-        "data-ownedby": dom.getRootId(state.context),
-        style: dom.getPanelStyle(state.context, id)
+        "data-orientation": prop("orientation"),
+        dir: prop("dir"),
+        id: getPanelId(scope, id),
+        "data-ownedby": getRootId(scope),
+        style: getPanelStyle(panels, id)
       });
     },
     getResizeTriggerProps(props2) {
@@ -243,16 +227,16 @@ function connect(state, send, normalize) {
       const triggerState = getResizeTriggerState(props2);
       return normalize.element({
         ...parts.resizeTrigger.attrs,
-        dir: state.context.dir,
-        id: dom.getResizeTriggerId(state.context, id),
+        dir: prop("dir"),
+        id: getResizeTriggerId(scope, id),
         role: "separator",
-        "data-ownedby": dom.getRootId(state.context),
+        "data-ownedby": getRootId(scope),
         tabIndex: disabled ? void 0 : 0,
         "aria-valuenow": triggerState.value,
         "aria-valuemin": triggerState.min,
         "aria-valuemax": triggerState.max,
-        "data-orientation": state.context.orientation,
-        "aria-orientation": state.context.orientation,
+        "data-orientation": prop("orientation"),
+        "aria-orientation": prop("orientation"),
         "aria-controls": triggerState.panelIds.join(" "),
         "data-focus": dataAttr(triggerState.focused),
         "data-disabled": dataAttr(disabled),
@@ -290,7 +274,7 @@ function connect(state, send, normalize) {
           send({ type: "POINTER_LEAVE", id });
         },
         onBlur() {
-          send("BLUR");
+          send({ type: "BLUR" });
         },
         onFocus() {
           send({ type: "FOCUS", id });
@@ -305,7 +289,7 @@ function connect(state, send, normalize) {
           const moveStep = getEventStep(event) * step;
           const keyMap = {
             Enter() {
-              send("ENTER");
+              send({ type: "ENTER" });
             },
             ArrowUp() {
               send({ type: "ARROW_UP", step: moveStep });
@@ -320,13 +304,16 @@ function connect(state, send, normalize) {
               send({ type: "ARROW_RIGHT", step: moveStep });
             },
             Home() {
-              send("HOME");
+              send({ type: "HOME" });
             },
             End() {
-              send("END");
+              send({ type: "END" });
             }
           };
-          const key = getEventKey(event, state.context);
+          const key = getEventKey(event, {
+            dir: prop("dir"),
+            orientation: prop("orientation")
+          });
           const exec = keyMap[key];
           if (exec) {
             exec(event);
@@ -337,266 +324,333 @@ function connect(state, send, normalize) {
     }
   };
 }
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "splitter",
-      initial: "idle",
-      context: {
-        orientation: "horizontal",
-        activeResizeId: null,
-        previousPanels: [],
-        size: [],
-        initialSize: [],
-        activeResizeState: {
-          isAtMin: false,
-          isAtMax: false
+var machine = createMachine({
+  props({ props: props2 }) {
+    return {
+      orientation: "horizontal",
+      defaultSize: [],
+      ...compact(props2)
+    };
+  },
+  initialState() {
+    return "idle";
+  },
+  context({ prop, bindable, getContext }) {
+    return {
+      activeResizeId: bindable(() => ({
+        defaultValue: null
+      })),
+      size: bindable(() => ({
+        defaultValue: prop("defaultSize"),
+        value: prop("size"),
+        hash(a) {
+          return a.map((panel) => `${panel.id}:${panel.size}`).join(",");
         },
-        ...ctx
-      },
-      created: ["setPreviousPanels", "setInitialSize"],
-      watch: {
-        size: ["setActiveResizeState"]
-      },
-      computed: {
-        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-        panels: (ctx2) => getNormalizedPanels(ctx2)
-      },
-      on: {
-        SET_PANEL_SIZE: {
-          actions: "setPanelSize"
+        onChange(value) {
+          const context = getContext();
+          prop("onSizeChange")?.({
+            size: value,
+            activeHandleId: context.get("activeResizeId")
+          });
         }
-      },
-      states: {
-        idle: {
-          entry: ["clearActiveHandleId"],
-          on: {
-            POINTER_OVER: {
-              target: "hover:temp",
-              actions: ["setActiveHandleId"]
-            },
-            FOCUS: {
-              target: "focused",
-              actions: ["setActiveHandleId"]
-            },
-            DOUBLE_CLICK: {
-              actions: ["resetStartPanel", "setPreviousPanels"]
-            }
-          }
-        },
-        "hover:temp": {
-          after: {
-            HOVER_DELAY: "hover"
-          },
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setActiveHandleId"]
-            },
-            POINTER_LEAVE: "idle"
-          }
+      })),
+      activeResizeState: bindable(() => ({
+        defaultValue: { isAtMin: false, isAtMax: false }
+      }))
+    };
+  },
+  refs({ context }) {
+    return {
+      previousPanels: getNormalizedPanels(context.get("size"))
+    };
+  },
+  watch({ track, action, context }) {
+    track([() => context.hash("size")], () => {
+      action(["setActiveResizeState"]);
+    });
+  },
+  computed: {
+    isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
+    panels: ({ context }) => getNormalizedPanels(context.get("size"))
+  },
+  on: {
+    SET_PANEL_SIZE: {
+      actions: ["setPanelSize"]
+    }
+  },
+  states: {
+    idle: {
+      entry: ["clearActiveHandleId"],
+      on: {
+        POINTER_OVER: {
+          target: "hover:temp",
+          actions: ["setActiveHandleId"]
         },
-        hover: {
-          tags: ["focus"],
-          on: {
-            POINTER_DOWN: "dragging",
-            POINTER_LEAVE: "idle"
-          }
+        FOCUS: {
+          target: "focused",
+          actions: ["setActiveHandleId"]
         },
-        focused: {
-          tags: ["focus"],
-          on: {
-            BLUR: "idle",
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["setActiveHandleId"]
-            },
-            ARROW_LEFT: {
-              guard: "isHorizontal",
-              actions: ["shrinkStartPanel", "setPreviousPanels"]
-            },
-            ARROW_RIGHT: {
-              guard: "isHorizontal",
-              actions: ["expandStartPanel", "setPreviousPanels"]
-            },
-            ARROW_UP: {
-              guard: "isVertical",
-              actions: ["shrinkStartPanel", "setPreviousPanels"]
-            },
-            ARROW_DOWN: {
-              guard: "isVertical",
-              actions: ["expandStartPanel", "setPreviousPanels"]
-            },
-            ENTER: [
-              {
-                guard: "isStartPanelAtMax",
-                actions: ["setStartPanelToMin", "setPreviousPanels"]
-              },
-              { actions: ["setStartPanelToMax", "setPreviousPanels"] }
-            ],
-            HOME: {
-              actions: ["setStartPanelToMin", "setPreviousPanels"]
-            },
-            END: {
-              actions: ["setStartPanelToMax", "setPreviousPanels"]
-            }
-          }
-        },
-        dragging: {
-          tags: ["focus"],
-          entry: "focusResizeHandle",
-          activities: ["trackPointerMove"],
-          on: {
-            POINTER_MOVE: {
-              actions: ["setPointerValue", "setGlobalCursor", "invokeOnResize"]
-            },
-            POINTER_UP: {
-              target: "focused",
-              actions: ["setPreviousPanels", "clearGlobalCursor", "blurResizeHandle", "invokeOnResizeEnd"]
-            }
-          }
+        DOUBLE_CLICK: {
+          actions: ["resetStartPanel", "setPreviousPanels"]
         }
       }
     },
-    {
-      activities: {
-        trackPointerMove: (ctx2, _evt, { send }) => {
-          const doc = dom.getDoc(ctx2);
-          return trackPointerMove(doc, {
-            onPointerMove(info) {
-              send({ type: "POINTER_MOVE", point: info.point });
-            },
-            onPointerUp() {
-              send("POINTER_UP");
-            }
-          });
-        }
-      },
-      guards: {
-        isStartPanelAtMin: (ctx2) => ctx2.activeResizeState.isAtMin,
-        isStartPanelAtMax: (ctx2) => ctx2.activeResizeState.isAtMax,
-        isHorizontal: (ctx2) => ctx2.isHorizontal,
-        isVertical: (ctx2) => !ctx2.isHorizontal
-      },
-      delays: {
-        HOVER_DELAY: 250
-      },
-      actions: {
-        setGlobalCursor(ctx2) {
-          dom.setupGlobalCursor(ctx2);
-        },
-        clearGlobalCursor(ctx2) {
-          dom.removeGlobalCursor(ctx2);
-        },
-        invokeOnResize(ctx2) {
-          ctx2.onSizeChange?.({ size: Array.from(ctx2.size), activeHandleId: ctx2.activeResizeId });
-        },
-        invokeOnResizeEnd(ctx2) {
-          ctx2.onSizeChangeEnd?.({ size: Array.from(ctx2.size), activeHandleId: ctx2.activeResizeId });
-        },
-        setActiveHandleId(ctx2, evt) {
-          ctx2.activeResizeId = evt.id;
-        },
-        clearActiveHandleId(ctx2) {
-          ctx2.activeResizeId = null;
+    "hover:temp": {
+      effects: ["waitForHoverDelay"],
+      on: {
+        HOVER_DELAY: {
+          target: "hover"
         },
-        setInitialSize(ctx2) {
-          ctx2.initialSize = ctx2.panels.slice().map((panel) => ({
-            id: panel.id,
-            size: panel.size
-          }));
+        POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setActiveHandleId"]
         },
-        setPanelSize(ctx2, evt) {
-          const { id, size } = evt;
-          ctx2.size = ctx2.size.map((panel) => {
-            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
-            return panel.id === id ? { ...panel, size: panelSize } : panel;
-          });
-        },
-        setStartPanelToMin(ctx2) {
-          const bounds = getPanelBounds(ctx2);
-          if (!bounds) return;
-          const { before, after } = bounds;
-          ctx2.size[before.index].size = before.min;
-          ctx2.size[after.index].size = after.min;
+        POINTER_LEAVE: {
+          target: "idle"
+        }
+      }
+    },
+    hover: {
+      tags: ["focus"],
+      on: {
+        POINTER_DOWN: {
+          target: "dragging"
         },
-        setStartPanelToMax(ctx2) {
-          const bounds = getPanelBounds(ctx2);
-          if (!bounds) return;
-          const { before, after } = bounds;
-          ctx2.size[before.index].size = before.max;
-          ctx2.size[after.index].size = after.max;
+        POINTER_LEAVE: {
+          target: "idle"
+        }
+      }
+    },
+    focused: {
+      tags: ["focus"],
+      on: {
+        BLUR: {
+          target: "idle"
         },
-        expandStartPanel(ctx2, evt) {
-          const bounds = getPanelBounds(ctx2);
-          if (!bounds) return;
-          const { before, after } = bounds;
-          ctx2.size[before.index].size = before.up(evt.step);
-          ctx2.size[after.index].size = after.down(evt.step);
+        POINTER_DOWN: {
+          target: "dragging",
+          actions: ["setActiveHandleId"]
         },
-        shrinkStartPanel(ctx2, evt) {
-          const bounds = getPanelBounds(ctx2);
-          if (!bounds) return;
-          const { before, after } = bounds;
-          ctx2.size[before.index].size = before.down(evt.step);
-          ctx2.size[after.index].size = after.up(evt.step);
+        ARROW_LEFT: {
+          guard: "isHorizontal",
+          actions: ["shrinkStartPanel", "setPreviousPanels"]
         },
-        resetStartPanel(ctx2, evt) {
-          const bounds = getPanelBounds(ctx2, evt.id);
-          if (!bounds) return;
-          const { before, after } = bounds;
-          ctx2.size[before.index].size = ctx2.initialSize[before.index].size;
-          ctx2.size[after.index].size = ctx2.initialSize[after.index].size;
+        ARROW_RIGHT: {
+          guard: "isHorizontal",
+          actions: ["expandStartPanel", "setPreviousPanels"]
         },
-        focusResizeHandle(ctx2) {
-          raf(() => {
-            dom.getActiveHandleEl(ctx2)?.focus({ preventScroll: true });
-          });
+        ARROW_UP: {
+          guard: "isVertical",
+          actions: ["shrinkStartPanel", "setPreviousPanels"]
         },
-        blurResizeHandle(ctx2) {
-          raf(() => {
-            dom.getActiveHandleEl(ctx2)?.blur();
-          });
+        ARROW_DOWN: {
+          guard: "isVertical",
+          actions: ["expandStartPanel", "setPreviousPanels"]
         },
-        setPreviousPanels(ctx2) {
-          ctx2.previousPanels = ctx2.panels.slice();
+        ENTER: [
+          {
+            guard: "isStartPanelAtMax",
+            actions: ["setStartPanelToMin", "setPreviousPanels"]
+          },
+          { actions: ["setStartPanelToMax", "setPreviousPanels"] }
+        ],
+        HOME: {
+          actions: ["setStartPanelToMin", "setPreviousPanels"]
         },
-        setActiveResizeState(ctx2) {
-          const panels = getPanelBounds(ctx2);
-          if (!panels) return;
-          const { before } = panels;
-          ctx2.activeResizeState = {
-            isAtMin: before.isAtMin,
-            isAtMax: before.isAtMax
-          };
+        END: {
+          actions: ["setStartPanelToMax", "setPreviousPanels"]
+        }
+      }
+    },
+    dragging: {
+      tags: ["focus"],
+      entry: ["focusResizeHandle"],
+      effects: ["trackPointerMove"],
+      on: {
+        POINTER_MOVE: {
+          actions: ["setPointerValue", "setGlobalCursor", "invokeOnResize"]
         },
-        setPointerValue(ctx2, evt) {
-          const panels = getHandlePanels(ctx2);
-          const bounds = getHandleBounds(ctx2);
-          if (!panels || !bounds) return;
-          const rootEl = dom.getRootEl(ctx2);
-          if (!rootEl) return;
-          const relativePoint = getRelativePoint(evt.point, rootEl);
-          const percentValue = relativePoint.getPercentValue({
-            dir: ctx2.dir,
-            orientation: ctx2.orientation
-          });
-          let pointValue = percentValue * 100;
-          ctx2.activeResizeState = {
-            isAtMin: pointValue < bounds.min,
-            isAtMax: pointValue > bounds.max
-          };
-          pointValue = clamp(pointValue, bounds.min, bounds.max);
-          const { before, after } = panels;
-          const offset = pointValue - before.end;
-          ctx2.size[before.index].size = before.size + offset;
-          ctx2.size[after.index].size = after.size - offset;
+        POINTER_UP: {
+          target: "focused",
+          actions: ["setPreviousPanels", "clearGlobalCursor", "blurResizeHandle", "invokeOnResizeEnd"]
         }
       }
     }
-  );
-}
+  },
+  implementations: {
+    effects: {
+      waitForHoverDelay: ({ send }) => {
+        const id = setTimeout(() => {
+          send({ type: "HOVER_DELAY" });
+        }, 250);
+        return () => clearTimeout(id);
+      },
+      trackPointerMove: ({ scope, send }) => {
+        const doc = scope.getDoc();
+        return trackPointerMove(doc, {
+          onPointerMove(info) {
+            send({ type: "POINTER_MOVE", point: info.point });
+          },
+          onPointerUp() {
+            send({ type: "POINTER_UP" });
+          }
+        });
+      }
+    },
+    guards: {
+      isStartPanelAtMin: ({ context }) => context.get("activeResizeState").isAtMin,
+      isStartPanelAtMax: ({ context }) => context.get("activeResizeState").isAtMax,
+      isHorizontal: ({ prop }) => prop("orientation") === "horizontal",
+      isVertical: ({ prop }) => prop("orientation") !== "horizontal"
+    },
+    actions: {
+      setGlobalCursor({ context, scope, computed }) {
+        const activeState = context.get("activeResizeState");
+        const isHorizontal = computed("isHorizontal");
+        setupGlobalCursor(scope, activeState, isHorizontal);
+      },
+      clearGlobalCursor({ scope }) {
+        removeGlobalCursor(scope);
+      },
+      invokeOnResize({ context, prop }) {
+        prop("onSizeChange")?.({
+          size: Array.from(context.get("size")),
+          activeHandleId: context.get("activeResizeId")
+        });
+      },
+      invokeOnResizeEnd({ context, prop }) {
+        prop("onSizeChangeEnd")?.({
+          size: Array.from(context.get("size")),
+          activeHandleId: context.get("activeResizeId")
+        });
+      },
+      setActiveHandleId({ context, event }) {
+        context.set("activeResizeId", event.id);
+      },
+      clearActiveHandleId({ context }) {
+        context.set("activeResizeId", null);
+      },
+      setPanelSize({ context, event }) {
+        const { id, size } = event;
+        context.set(
+          "size",
+          (prev) => prev.map((panel) => {
+            const panelSize = clamp(size, panel.minSize ?? 0, panel.maxSize ?? 100);
+            return panel.id === id ? { ...panel, size: panelSize } : panel;
+          })
+        );
+      },
+      setStartPanelToMin({ context, computed }) {
+        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
+        if (!bounds) return;
+        const { before, after } = bounds;
+        context.set("size", (prev) => {
+          const next = prev.slice();
+          next[before.index].size = before.min;
+          next[after.index].size = after.min;
+          return next;
+        });
+      },
+      setStartPanelToMax({ context, computed }) {
+        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
+        if (!bounds) return;
+        const { before, after } = bounds;
+        context.set("size", (prev) => {
+          const next = prev.slice();
+          next[before.index].size = before.max;
+          next[after.index].size = after.max;
+          return next;
+        });
+      },
+      expandStartPanel({ context, event, computed }) {
+        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
+        if (!bounds) return;
+        const { before, after } = bounds;
+        context.set("size", (prev) => {
+          const next = prev.slice();
+          next[before.index].size = before.up(event.step);
+          next[after.index].size = after.down(event.step);
+          return next;
+        });
+      },
+      shrinkStartPanel({ context, event, computed }) {
+        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
+        if (!bounds) return;
+        const { before, after } = bounds;
+        context.set("size", (prev) => {
+          const next = prev.slice();
+          next[before.index].size = before.down(event.step);
+          next[after.index].size = after.up(event.step);
+          return next;
+        });
+      },
+      resetStartPanel({ context, computed }) {
+        const bounds = getPanelBounds(computed("panels"), context.get("activeResizeId"));
+        if (!bounds) return;
+        const { before, after } = bounds;
+        const initialSize = context.initial("size");
+        context.set("size", (prev) => {
+          const next = prev.slice();
+          next[before.index].size = initialSize[before.index].size;
+          next[after.index].size = initialSize[after.index].size;
+          return next;
+        });
+      },
+      focusResizeHandle({ scope, context }) {
+        raf(() => {
+          const activeId = context.get("activeResizeId");
+          if (!activeId) return;
+          getResizeTriggerEl(scope, activeId)?.focus({ preventScroll: true });
+        });
+      },
+      blurResizeHandle({ scope, context }) {
+        raf(() => {
+          const activeId = context.get("activeResizeId");
+          if (!activeId) return;
+          getResizeTriggerEl(scope, activeId)?.blur();
+        });
+      },
+      setPreviousPanels({ refs, computed }) {
+        refs.set("previousPanels", computed("panels").slice());
+      },
+      setActiveResizeState({ context, computed }) {
+        const panels = getPanelBounds(computed("panels"), context.get("activeResizeId"));
+        if (!panels) return;
+        const { before } = panels;
+        context.set("activeResizeState", {
+          isAtMin: before.isAtMin,
+          isAtMax: before.isAtMax
+        });
+      },
+      setPointerValue({ context, event, prop, scope, computed }) {
+        const panels = getHandlePanels(computed("panels"), context.get("activeResizeId"));
+        const bounds = getHandleBounds(computed("panels"), context.get("activeResizeId"));
+        if (!panels || !bounds) return;
+        const rootEl = getRootEl(scope);
+        if (!rootEl) return;
+        const relativePoint = getRelativePoint(event.point, rootEl);
+        const percentValue = relativePoint.getPercentValue({
+          dir: prop("dir"),
+          orientation: prop("orientation")
+        });
+        let pointValue = percentValue * 100;
+        context.set("activeResizeState", {
+          isAtMin: pointValue < bounds.min,
+          isAtMax: pointValue > bounds.max
+        });
+        pointValue = clamp(pointValue, bounds.min, bounds.max);
+        const { before, after } = panels;
+        const offset = pointValue - before.end;
+        context.set("size", (prev) => {
+          const next = prev.slice();
+          next[before.index].size = before.size + offset;
+          next[after.index].size = after.size - offset;
+          return next;
+        });
+      }
+    }
+  }
+});
 var props = createProps()([
   "dir",
   "getRootNode",
@@ -605,7 +659,8 @@ var props = createProps()([
   "onSizeChange",
   "onSizeChangeEnd",
   "orientation",
-  "size"
+  "size",
+  "defaultSize"
 ]);
 var splitProps = createSplitProps(props);
 var panelProps = createProps()(["id", "snapSize"]);