@zag-js/splitter 0.2.6 → 0.2.8

package/dist/index.js

@@ -28,14 +28,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/splitter.anatomy.ts
 var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts(
-  "root",
-  "secondaryPane",
-  "primaryPane",
-  "toggleButton",
-  "label",
-  "splitter"
-);
+var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger");
 var parts = anatomy.build();
 
 // ../../utilities/dom/src/attrs.ts
@@ -108,25 +101,7 @@ function defineDomHelpers(helpers) {
       return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
     },
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
-    createEmitter: (ctx, target) => {
-      const win = dom2.getWin(ctx);
-      return function emit(evt, detail, options) {
-        const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
-        const eventName = `zag:${evt}`;
-        const init = { bubbles, cancelable, composed, detail };
-        const event = new win.CustomEvent(eventName, init);
-        target.dispatchEvent(event);
-      };
-    },
-    createListener: (target) => {
-      return function listen(evt, handler) {
-        const eventName = `zag:${evt}`;
-        const listener = (e) => handler(e);
-        target.addEventListener(eventName, listener);
-        return () => target.removeEventListener(eventName, listener);
-      };
-    }
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
   return {
     ...dom2,
@@ -173,6 +148,22 @@ function getPointRelativeToNode(point, element) {
   const y = point.y - offset.top;
   return { x, y };
 }
+var clampPercent = (value) => Math.max(0, Math.min(100, value));
+function getPointPercentRelativeToNode(point, element) {
+  const relativePoint = getPointRelativeToNode(point, element);
+  const x = relativePoint.x / element.offsetWidth * 100;
+  const y = relativePoint.y / element.offsetHeight * 100;
+  return { x: clampPercent(x), y: clampPercent(y) };
+}
+function normalizePointValue(point, options) {
+  const { dir = "ltr", orientation = "horizontal" } = options;
+  const { x, y } = point;
+  let result = { x, y };
+  if (orientation === "horizontal" && dir === "rtl") {
+    result = { x: 100 - x, y };
+  }
+  return orientation === "horizontal" ? result.x : result.y;
+}
 
 // ../../utilities/dom/src/keyboard-event.ts
 var rtlKeyMap = {
@@ -298,6 +289,12 @@ function raf(fn) {
   };
 }
 
+// ../../utilities/dom/src/nodelist.ts
+function queryAll(root, selector) {
+  var _a;
+  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+}
+
 // ../../utilities/dom/src/text-selection.ts
 var state = "default";
 var savedUserSelect = "";
@@ -373,261 +370,342 @@ function trackPointerMove(doc, opts) {
 
 // src/splitter.dom.ts
 var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `splitter:${ctx.id}`;
-  },
-  getSplitterId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.splitter) != null ? _b : `splitter:${ctx.id}:splitter`;
-  },
-  getToggleButtonId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.toggleBtn) != null ? _b : `splitter:${ctx.id}:toggle-btn`;
-  },
-  getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `splitter:${ctx.id}:label`;
-  },
-  getPrimaryPaneId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.primaryPane) != null ? _b : `splitter:${ctx.id}:primary`;
-  },
-  getSecondaryPaneId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.secondaryPane) != null ? _b : `splitter:${ctx.id}:secondary`;
-  },
-  getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
-  getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
+  getRootId: (ctx) => `splitter:${ctx.id}`,
+  getResizeTriggerId: (ctx, id) => `splitter:${ctx.id}:splitter:${id}`,
+  getToggleTriggerId: (ctx) => `splitter:${ctx.id}:toggle-btn`,
+  getLabelId: (ctx) => `splitter:${ctx.id}:label`,
+  getPanelId: (ctx, id) => `splitter:${ctx.id}:panel:${id}`,
+  globalCursorId: (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) {
-    if (ctx.disabled || ctx.fixed)
-      return "default";
     const x = ctx.isHorizontal;
     let cursor = x ? "col-resize" : "row-resize";
-    if (ctx.isAtMin)
+    if (ctx.activeResizeState.isAtMin)
       cursor = x ? "e-resize" : "s-resize";
-    if (ctx.isAtMax)
+    if (ctx.activeResizeState.isAtMax)
       cursor = x ? "w-resize" : "n-resize";
     return cursor;
+  },
+  getPanelStyle(ctx, id) {
+    var _a, _b;
+    const flexGrow = (_b = (_a = ctx.panels.find((panel) => panel.id === id)) == null ? void 0 : _a.size) != null ? _b : "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.globalCursorId(ctx));
+    const textContent = `* { cursor: ${dom.getCursor(ctx)} !important; }`;
+    if (styleEl) {
+      styleEl.textContent = textContent;
+    } else {
+      const style = dom.getDoc(ctx).createElement("style");
+      style.id = dom.globalCursorId(ctx);
+      style.textContent = textContent;
+      dom.getDoc(ctx).head.appendChild(style);
+    }
+  },
+  removeGlobalCursor(ctx) {
+    var _a;
+    (_a = dom.getById(ctx, dom.globalCursorId(ctx))) == null ? void 0 : _a.remove();
   }
 });
 
+// src/splitter.utils.ts
+function validateSize(key, size) {
+  if (Math.floor(size) > 100) {
+    throw new Error(`Total ${key} of panels cannot be greater than 100`);
+  }
+}
+function getNormalizedPanels(ctx) {
+  let numOfPanelsWithoutSize = 0;
+  let totalSize = 0;
+  let totalMinSize = 0;
+  const panels = ctx.size.map((panel) => {
+    var _a, _b;
+    const minSize = (_a = panel.minSize) != null ? _a : 10;
+    const maxSize = (_b = panel.maxSize) != null ? _b : 100;
+    totalMinSize += minSize;
+    if (panel.size == null) {
+      numOfPanelsWithoutSize++;
+    } else {
+      totalSize += panel.size;
+    }
+    return {
+      ...panel,
+      minSize,
+      maxSize
+    };
+  });
+  validateSize("minSize", totalMinSize);
+  validateSize("size", totalSize);
+  let end = 0;
+  let remainingSize = 0;
+  const result = panels.map((panel) => {
+    let start = end;
+    if (panel.size != null) {
+      end += panel.size;
+      remainingSize = panel.size - panel.minSize;
+      return {
+        ...panel,
+        start,
+        end,
+        remainingSize
+      };
+    }
+    const size = (100 - totalSize) / numOfPanelsWithoutSize;
+    end += size;
+    remainingSize = size - panel.minSize;
+    return { ...panel, size, start, end, remainingSize };
+  });
+  return result;
+}
+function getHandlePanels(ctx, id = ctx.activeResizeId) {
+  var _a;
+  const [beforeId, afterId] = (_a = id == null ? void 0 : id.split(":")) != null ? _a : [];
+  if (!beforeId || !afterId)
+    return;
+  const beforeIndex = ctx.previousPanels.findIndex((panel) => panel.id === beforeId);
+  const afterIndex = ctx.previousPanels.findIndex((panel) => panel.id === afterId);
+  if (beforeIndex === -1 || afterIndex === -1)
+    return;
+  const before = ctx.previousPanels[beforeIndex];
+  const after = ctx.previousPanels[afterIndex];
+  return {
+    before: {
+      ...before,
+      index: beforeIndex
+    },
+    after: {
+      ...after,
+      index: afterIndex
+    }
+  };
+}
+function getHandleBounds(ctx, id = ctx.activeResizeId) {
+  const panels = getHandlePanels(ctx, id);
+  if (!panels)
+    return;
+  const { before, after } = panels;
+  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;
+  const beforeMin = Math.abs(before.start - bounds.min);
+  const afterMin = after.size + (before.size - beforeMin);
+  const beforeMax = Math.abs(before.start - bounds.max);
+  const afterMax = after.size - (beforeMax - before.size);
+  return {
+    before: {
+      index: before.index,
+      min: beforeMin,
+      max: beforeMax,
+      isAtMin: beforeMin === before.size,
+      isAtMax: beforeMax === before.size,
+      up(step) {
+        return Math.min(before.size + step, beforeMax);
+      },
+      down(step) {
+        return Math.max(before.size - step, beforeMin);
+      }
+    },
+    after: {
+      index: after.index,
+      min: afterMin,
+      max: afterMax,
+      isAtMin: afterMin === after.size,
+      isAtMax: afterMax === after.size,
+      up(step) {
+        return Math.min(after.size + step, afterMin);
+      },
+      down(step) {
+        return Math.max(after.size - step, afterMax);
+      }
+    }
+  };
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
 // src/splitter.connect.ts
 function connect(state2, send, normalize) {
   const isHorizontal = state2.context.isHorizontal;
-  const isDisabled = state2.context.disabled;
   const isFocused = state2.hasTag("focus");
   const isDragging = state2.matches("dragging");
-  const isAtMin = state2.context.isAtMin;
-  const isAtMax = state2.context.isAtMax;
-  const min = state2.context.min;
-  const max = state2.context.max;
-  const value = state2.context.value;
-  return {
-    isCollapsed: isAtMin,
-    isExpanded: isAtMax,
+  const api = {
     isFocused,
     isDragging,
-    value,
-    collapse() {
-      send("COLLAPSE");
+    bounds: getHandleBounds(state2.context),
+    collapse(id) {
+      send({ type: "COLLAPSE", id });
     },
-    expand() {
-      send("EXPAND");
+    expand(id) {
+      send({ type: "EXPAND", id });
     },
-    toggle() {
-      send("TOGGLE");
+    toggle(id) {
+      send({ type: "TOGGLE", id });
     },
-    setSize(size) {
-      send({ type: "SET_SIZE", size });
+    setSize(id, size) {
+      send({ type: "SET_SIZE", id, size });
     },
     rootProps: normalize.element({
       ...parts.root.attrs,
       "data-orientation": state2.context.orientation,
-      "data-disabled": dataAttr(isDisabled),
       id: dom.getRootId(state2.context),
+      dir: state2.context.dir,
       style: {
         display: "flex",
-        flex: "1 1 0%",
-        flexDirection: isHorizontal ? "row" : "column"
-      }
-    }),
-    secondaryPaneProps: normalize.element({
-      ...parts.secondaryPane.attrs,
-      "data-disabled": dataAttr(isDisabled),
-      id: dom.getSecondaryPaneId(state2.context),
-      style: {
-        height: isHorizontal ? "100%" : "auto",
-        width: isHorizontal ? "auto" : "100%",
-        flex: "1 1 auto",
-        position: "relative"
-      }
-    }),
-    primaryPaneProps: normalize.element({
-      ...parts.primaryPane.attrs,
-      id: dom.getPrimaryPaneId(state2.context),
-      "data-disabled": dataAttr(isDisabled),
-      "data-state": isAtMax ? "at-max" : isAtMin ? "at-min" : "between",
-      style: {
-        visibility: "visible",
-        flex: `0 0 ${value}px`,
-        position: "relative",
-        userSelect: isDragging ? "none" : "auto",
-        ...isHorizontal ? { minWidth: `${min}px`, maxWidth: `${max}px` } : { minHeight: `${min}px`, maxHeight: `${max}px` }
+        flexDirection: isHorizontal ? "row" : "column",
+        height: "100%",
+        width: "100%",
+        overflow: "hidden"
       }
     }),
-    toggleButtonProps: normalize.element({
-      ...parts.toggleButton.attrs,
-      id: dom.getToggleButtonId(state2.context),
-      "aria-label": state2.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
-      onClick() {
-        send("TOGGLE");
-      }
-    }),
-    labelProps: normalize.element({
-      ...parts.label.attrs,
-      id: dom.getLabelId(state2.context)
-    }),
-    splitterProps: normalize.element({
-      ...parts.splitter.attrs,
-      id: dom.getSplitterId(state2.context),
-      role: "separator",
-      tabIndex: isDisabled ? void 0 : 0,
-      "aria-valuenow": value,
-      "aria-valuemin": min,
-      "aria-valuemax": max,
-      "aria-orientation": state2.context.orientation,
-      "aria-labelledby": dom.getLabelId(state2.context),
-      "aria-controls": dom.getPrimaryPaneId(state2.context),
-      "data-orientation": state2.context.orientation,
-      "data-focus": dataAttr(isFocused),
-      "data-disabled": dataAttr(isDisabled),
-      style: {
-        touchAction: "none",
-        userSelect: "none",
-        WebkitUserSelect: "none",
-        msUserSelect: "none",
-        flex: "0 0 auto",
-        cursor: dom.getCursor(state2.context),
-        minHeight: isHorizontal ? "0px" : void 0,
-        minWidth: isHorizontal ? void 0 : "0px"
-      },
-      onPointerDown(event) {
-        if (isDisabled) {
-          event.preventDefault();
-          return;
-        }
-        send("POINTER_DOWN");
-        event.preventDefault();
-        event.stopPropagation();
-      },
-      onPointerOver() {
-        if (isDisabled)
-          return;
-        send("POINTER_OVER");
-      },
-      onPointerLeave() {
-        if (isDisabled)
-          return;
-        send("POINTER_LEAVE");
-      },
-      onBlur() {
-        send("BLUR");
-      },
-      onFocus() {
-        send("FOCUS");
-      },
-      onDoubleClick() {
-        if (isDisabled)
-          return;
-        send("DOUBLE_CLICK");
-      },
-      onKeyDown(event) {
-        if (isDisabled)
-          return;
-        const step = getEventStep(event) * state2.context.step;
-        const keyMap = {
-          ArrowUp() {
-            send({ type: "ARROW_UP", step });
-          },
-          ArrowDown() {
-            send({ type: "ARROW_DOWN", step });
-          },
-          ArrowLeft() {
-            send({ type: "ARROW_LEFT", step });
-          },
-          ArrowRight() {
-            send({ type: "ARROW_RIGHT", step });
-          },
-          Home() {
-            send("HOME");
-          },
-          End() {
-            send("END");
+    getPanelProps(props) {
+      const { id } = props;
+      return normalize.element({
+        ...parts.panel.attrs,
+        dir: state2.context.dir,
+        id: dom.getPanelId(state2.context, id),
+        "data-ownedby": dom.getRootId(state2.context),
+        style: dom.getPanelStyle(state2.context, id)
+      });
+    },
+    getResizeTriggerState(props) {
+      const { id, disabled } = props;
+      const ids = id.split(":");
+      const panelIds = ids.map((id2) => dom.getPanelId(state2.context, id2));
+      const panels = getHandleBounds(state2.context, id);
+      return {
+        isDisabled: !!disabled,
+        isFocused: state2.context.activeResizeId === id && isFocused,
+        panelIds,
+        min: panels == null ? void 0 : panels.min,
+        max: panels == null ? void 0 : panels.max,
+        value: 0
+      };
+    },
+    getResizeTriggerProps(props) {
+      const { id, disabled, step = 1 } = props;
+      const triggerState = api.getResizeTriggerState(props);
+      return normalize.element({
+        ...parts.resizeTrigger.attrs,
+        dir: state2.context.dir,
+        id: dom.getResizeTriggerId(state2.context, id),
+        role: "separator",
+        "data-ownedby": dom.getRootId(state2.context),
+        tabIndex: disabled ? void 0 : 0,
+        "aria-valuenow": triggerState.value,
+        "aria-valuemin": triggerState.min,
+        "aria-valuemax": triggerState.max,
+        "data-orientation": state2.context.orientation,
+        "aria-orientation": state2.context.orientation,
+        "aria-controls": triggerState.panelIds.join(" "),
+        "data-focus": dataAttr(triggerState.isFocused),
+        "data-disabled": dataAttr(disabled),
+        style: {
+          touchAction: "none",
+          userSelect: "none",
+          flex: "0 0 auto",
+          pointerEvents: isDragging && !triggerState.isFocused ? "none" : void 0,
+          cursor: isHorizontal ? "col-resize" : "row-resize",
+          [isHorizontal ? "minHeight" : "minWidth"]: "0"
+        },
+        onPointerDown(event) {
+          if (disabled) {
+            event.preventDefault();
+            return;
           }
-        };
-        const key = getEventKey(event, state2.context);
-        const exec = keyMap[key];
-        if (exec) {
-          exec(event);
+          send({ type: "POINTER_DOWN", id });
           event.preventDefault();
+          event.stopPropagation();
+        },
+        onPointerOver() {
+          if (disabled)
+            return;
+          send({ type: "POINTER_OVER", id });
+        },
+        onPointerLeave() {
+          if (disabled)
+            return;
+          send({ type: "POINTER_LEAVE", id });
+        },
+        onBlur() {
+          send("BLUR");
+        },
+        onFocus() {
+          send({ type: "FOCUS", id });
+        },
+        onDoubleClick() {
+          if (disabled)
+            return;
+          send({ type: "DOUBLE_CLICK", id });
+        },
+        onKeyDown(event) {
+          if (disabled)
+            return;
+          const moveStep = getEventStep(event) * step;
+          const keyMap = {
+            Enter() {
+              send("ENTER");
+            },
+            ArrowUp() {
+              send({ type: "ARROW_UP", step: moveStep });
+            },
+            ArrowDown() {
+              send({ type: "ARROW_DOWN", step: moveStep });
+            },
+            ArrowLeft() {
+              send({ type: "ARROW_LEFT", step: moveStep });
+            },
+            ArrowRight() {
+              send({ type: "ARROW_RIGHT", step: moveStep });
+            },
+            Home() {
+              send("HOME");
+            },
+            End() {
+              send("END");
+            }
+          };
+          const key = getEventKey(event, state2.context);
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
         }
-      }
-    })
+      });
+    }
   };
+  return api;
 }
 
 // src/splitter.machine.ts
 var import_core = require("@zag-js/core");
-
-// ../../utilities/number/src/number.ts
-function round(v, t) {
-  let num = valueOf(v);
-  const p = 10 ** (t != null ? t : 10);
-  num = Math.round(num * p) / p;
-  return t ? num.toFixed(t) : v.toString();
-}
-function clamp(v, o) {
-  return Math.min(Math.max(valueOf(v), o.min), o.max);
-}
-function countDecimals(value) {
-  if (!Number.isFinite(value))
-    return 0;
-  let e = 1, p = 0;
-  while (Math.round(value * e) / e !== value) {
-    e *= 10;
-    p += 1;
-  }
-  return p;
-}
-var increment = (v, s) => decimalOperation(valueOf(v), "+", s);
-var decrement = (v, s) => decimalOperation(valueOf(v), "-", s);
-function snapToStep(value, step) {
-  const num = valueOf(value);
-  const p = countDecimals(step);
-  const v = Math.round(num / step) * step;
-  return round(v, p);
-}
-function valueOf(v) {
-  if (typeof v === "number")
-    return v;
-  const num = parseFloat(v.toString().replace(/[^\w.-]+/g, ""));
-  return !Number.isNaN(num) ? num : 0;
-}
-function decimalOperation(a, op, b) {
-  let result = op === "+" ? a + b : a - b;
-  if (a % 1 !== 0 || b % 1 !== 0) {
-    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
-    a = Math.round(a * multiplier);
-    b = Math.round(b * multiplier);
-    result = op === "+" ? a + b : a - b;
-    result /= multiplier;
-  }
-  return result;
-}
-
-// src/splitter.machine.ts
-var { not } = import_core.guards;
 function machine(userContext) {
   const ctx = compact(userContext);
   return (0, import_core.createMachine)(
@@ -636,32 +714,38 @@ function machine(userContext) {
       initial: "unknown",
       context: {
         orientation: "horizontal",
-        min: 224,
-        max: 340,
-        step: 1,
-        value: 256,
-        snapOffset: 0,
+        activeResizeId: null,
+        previousPanels: [],
+        size: [],
+        initialSize: [],
+        activeResizeState: {
+          isAtMin: false,
+          isAtMax: false
+        },
         ...ctx
       },
+      created: ["setPreviousPanels", "setInitialSize"],
+      watch: {
+        size: ["setActiveResizeState"]
+      },
       computed: {
         isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-        isAtMin: (ctx2) => ctx2.value === ctx2.min,
-        isAtMax: (ctx2) => ctx2.value === ctx2.max
+        panels: (ctx2) => getNormalizedPanels(ctx2)
       },
       on: {
         COLLAPSE: {
-          actions: "setToMin"
+          actions: "setStartPanelToMin"
         },
         EXPAND: {
-          actions: "setToMax"
+          actions: "setStartPanelToMax"
         },
         TOGGLE: [
           {
-            guard: "isCollapsed",
-            actions: "setToMax"
+            guard: "isStartPanelAtMin",
+            actions: "setStartPanelToMax"
           },
           {
-            actions: "setToMin"
+            actions: "setStartPanelToMin"
           }
         ]
       },
@@ -672,13 +756,19 @@ function machine(userContext) {
           }
         },
         idle: {
+          entry: ["clearActiveHandleId"],
           on: {
             POINTER_OVER: {
-              guard: not("isFixed"),
-              target: "hover:temp"
+              target: "hover:temp",
+              actions: ["setActiveHandleId"]
             },
-            POINTER_LEAVE: "idle",
-            FOCUS: "focused"
+            FOCUS: {
+              target: "focused",
+              actions: ["setActiveHandleId"]
+            },
+            DOUBLE_CLICK: {
+              actions: ["resetStartPanel", "setPreviousPanels"]
+            }
           }
         },
         "hover:temp": {
@@ -688,7 +778,7 @@ function machine(userContext) {
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart"]
+              actions: ["setActiveHandleId", "invokeOnResizeStart"]
             },
             POINTER_LEAVE: "idle"
           }
@@ -698,7 +788,7 @@ function machine(userContext) {
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart"]
+              actions: ["invokeOnResizeStart"]
             },
             POINTER_LEAVE: "idle"
           }
@@ -709,57 +799,50 @@ function machine(userContext) {
             BLUR: "idle",
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart"]
+              actions: ["setActiveHandleId", "invokeOnResizeStart"]
             },
             ARROW_LEFT: {
               guard: "isHorizontal",
-              actions: "decrement"
+              actions: ["shrinkStartPanel", "setPreviousPanels"]
             },
             ARROW_RIGHT: {
               guard: "isHorizontal",
-              actions: "increment"
+              actions: ["expandStartPanel", "setPreviousPanels"]
             },
             ARROW_UP: {
               guard: "isVertical",
-              actions: "increment"
+              actions: ["shrinkStartPanel", "setPreviousPanels"]
             },
             ARROW_DOWN: {
               guard: "isVertical",
-              actions: "decrement"
+              actions: ["expandStartPanel", "setPreviousPanels"]
             },
             ENTER: [
               {
-                guard: "isCollapsed",
-                actions: "setToMin"
+                guard: "isStartPanelAtMax",
+                actions: ["setStartPanelToMin", "setPreviousPanels"]
               },
-              { actions: "setToMin" }
+              { actions: ["setStartPanelToMax", "setPreviousPanels"] }
             ],
             HOME: {
-              actions: "setToMin"
+              actions: ["setStartPanelToMin", "setPreviousPanels"]
             },
             END: {
-              actions: "setToMax"
-            },
-            DOUBLE_CLICK: [
-              {
-                guard: "isCollapsed",
-                actions: "setToMax"
-              },
-              { actions: "setToMin" }
-            ]
+              actions: ["setStartPanelToMax", "setPreviousPanels"]
+            }
           }
         },
         dragging: {
           tags: ["focus"],
-          entry: "focusSplitter",
-          activities: "trackPointerMove",
+          entry: "focusResizeHandle",
+          activities: ["trackPointerMove"],
           on: {
+            POINTER_MOVE: {
+              actions: ["setPointerValue", "setGlobalCursor"]
+            },
             POINTER_UP: {
               target: "focused",
-              actions: ["invokeOnChangeEnd"]
-            },
-            POINTER_MOVE: {
-              actions: "setPointerValue"
+              actions: ["invokeOnResizeEnd", "setPreviousPanels", "clearGlobalCursor", "blurResizeHandle"]
             }
           }
         }
@@ -772,70 +855,135 @@ function machine(userContext) {
           return trackPointerMove(doc, {
             onPointerMove(info) {
               send({ type: "POINTER_MOVE", point: info.point });
-              doc.documentElement.style.cursor = dom.getCursor(ctx2);
             },
             onPointerUp() {
               send("POINTER_UP");
-              doc.documentElement.style.cursor = "";
             }
           });
         }
       },
       guards: {
-        isCollapsed: (ctx2) => ctx2.isAtMin,
+        isStartPanelAtMin: (ctx2) => ctx2.activeResizeState.isAtMin,
+        isStartPanelAtMax: (ctx2) => ctx2.activeResizeState.isAtMax,
         isHorizontal: (ctx2) => ctx2.isHorizontal,
-        isVertical: (ctx2) => !ctx2.isHorizontal,
-        isFixed: (ctx2) => !!ctx2.fixed
+        isVertical: (ctx2) => !ctx2.isHorizontal
       },
       delays: {
         HOVER_DELAY: 250
       },
       actions: {
-        invokeOnChange(ctx2, evt) {
+        setGlobalCursor(ctx2) {
+          dom.setupGlobalCursor(ctx2);
+        },
+        clearGlobalCursor(ctx2) {
+          dom.removeGlobalCursor(ctx2);
+        },
+        invokeOnResize(ctx2) {
           var _a;
-          if (evt.type !== "SETUP") {
-            (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-          }
+          (_a = ctx2.onResize) == null ? void 0 : _a.call(ctx2, { size: ctx2.size, activeHandleId: ctx2.activeResizeId });
         },
-        invokeOnChangeStart(ctx2) {
+        invokeOnResizeStart(ctx2) {
           var _a;
-          (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          (_a = ctx2.onResizeStart) == null ? void 0 : _a.call(ctx2, { size: ctx2.size, activeHandleId: ctx2.activeResizeId });
         },
-        invokeOnChangeEnd(ctx2) {
+        invokeOnResizeEnd(ctx2) {
           var _a;
-          (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          (_a = ctx2.onResizeEnd) == null ? void 0 : _a.call(ctx2, { size: ctx2.size, activeHandleId: ctx2.activeResizeId });
+        },
+        setActiveHandleId(ctx2, evt) {
+          ctx2.activeResizeId = evt.id;
+        },
+        clearActiveHandleId(ctx2) {
+          ctx2.activeResizeId = null;
+        },
+        setInitialSize(ctx2) {
+          ctx2.initialSize = ctx2.panels.slice().map((panel) => ({
+            id: panel.id,
+            size: panel.size
+          }));
         },
-        setToMin(ctx2) {
-          ctx2.value = ctx2.min;
+        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;
         },
-        setToMax(ctx2) {
-          ctx2.value = ctx2.max;
+        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;
         },
-        increment(ctx2, evt) {
-          ctx2.value = clamp(increment(ctx2.value, evt.step), ctx2);
+        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);
         },
-        decrement(ctx2, evt) {
-          ctx2.value = clamp(decrement(ctx2.value, evt.step), ctx2);
+        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);
         },
-        focusSplitter(ctx2) {
+        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;
+        },
+        focusResizeHandle(ctx2) {
+          raf(() => {
+            var _a;
+            (_a = dom.getActiveHandleEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        blurResizeHandle(ctx2) {
           raf(() => {
             var _a;
-            return (_a = dom.getSplitterEl(ctx2)) == null ? void 0 : _a.focus();
+            (_a = dom.getActiveHandleEl(ctx2)) == null ? void 0 : _a.blur();
           });
         },
+        setPreviousPanels(ctx2) {
+          ctx2.previousPanels = ctx2.panels.slice();
+        },
+        setActiveResizeState(ctx2) {
+          const panels = getPanelBounds(ctx2);
+          if (!panels)
+            return;
+          const { before } = panels;
+          ctx2.activeResizeState = {
+            isAtMin: before.isAtMin,
+            isAtMax: before.isAtMax
+          };
+        },
         setPointerValue(ctx2, evt) {
-          const el = dom.getPrimaryPaneEl(ctx2);
-          if (!el)
+          const panels = getHandlePanels(ctx2);
+          const bounds = getHandleBounds(ctx2);
+          const rootEl = dom.getRootEl(ctx2);
+          if (!panels || !rootEl || !bounds)
             return;
-          const relativePoint = getPointRelativeToNode(evt.point, el);
-          let currentPoint = ctx2.isHorizontal ? relativePoint.x : relativePoint.y;
-          let value = parseFloat(snapToStep(clamp(currentPoint, ctx2), ctx2.step));
-          if (Math.abs(value - ctx2.min) <= ctx2.snapOffset) {
-            value = ctx2.min;
-          } else if (Math.abs(value - ctx2.max) <= ctx2.snapOffset) {
-            value = ctx2.max;
-          }
-          ctx2.value = value;
+          const percent = getPointPercentRelativeToNode(evt.point, rootEl);
+          let pointValue = normalizePointValue(percent, ctx2);
+          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;
         }
       }
     }