@zag-js/splitter 0.2.6 → 0.2.7

package/dist/chunk-HPRMFGOY.mjs

@@ -0,0 +1,9 @@
+// src/splitter.anatomy.ts
+import { createAnatomy } from "@zag-js/anatomy";
+var anatomy = createAnatomy("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger");
+var parts = anatomy.build();
+
+export {
+  anatomy,
+  parts
+};

package/dist/{chunk-F2ZDEPE3.mjs → chunk-IOEWCDUH.mjs}

@@ -1,9 +1,16 @@
 import {
   dom
-} from "./chunk-A3GF7W2N.mjs";
+} from "./chunk-T56NFB6E.mjs";
+import {
+  clamp,
+  getHandleBounds,
+  getHandlePanels,
+  getNormalizedPanels,
+  getPanelBounds
+} from "./chunk-SQ3UMXCZ.mjs";
 
 // src/splitter.machine.ts
-import { createMachine, guards } from "@zag-js/core";
+import { createMachine } from "@zag-js/core";
 
 // ../../utilities/core/src/functions.ts
 var runIfFn = (v, ...a) => {
@@ -82,6 +89,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/listener.ts
 var isRef = (v) => hasProp(v, "current");
@@ -243,54 +266,7 @@ function trackPointerMove(doc, opts) {
   );
 }
 
-// ../../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 } = guards;
 function machine(userContext) {
   const ctx = compact(userContext);
   return createMachine(
@@ -299,32 +275,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"
           }
         ]
       },
@@ -335,13 +317,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": {
@@ -351,7 +339,7 @@ function machine(userContext) {
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart"]
+              actions: ["setActiveHandleId", "invokeOnResizeStart"]
             },
             POINTER_LEAVE: "idle"
           }
@@ -361,7 +349,7 @@ function machine(userContext) {
           on: {
             POINTER_DOWN: {
               target: "dragging",
-              actions: ["invokeOnChangeStart"]
+              actions: ["invokeOnResizeStart"]
             },
             POINTER_LEAVE: "idle"
           }
@@ -372,57 +360,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"]
             }
           }
         }
@@ -435,70 +416,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 });
         },
-        setToMin(ctx2) {
-          ctx2.value = ctx2.min;
+        setActiveHandleId(ctx2, evt) {
+          ctx2.activeResizeId = evt.id;
         },
-        setToMax(ctx2) {
-          ctx2.value = ctx2.max;
+        clearActiveHandleId(ctx2) {
+          ctx2.activeResizeId = null;
         },
-        increment(ctx2, evt) {
-          ctx2.value = clamp(increment(ctx2.value, evt.step), ctx2);
+        setInitialSize(ctx2) {
+          ctx2.initialSize = ctx2.panels.slice().map((panel) => ({
+            id: panel.id,
+            size: panel.size
+          }));
         },
-        decrement(ctx2, evt) {
-          ctx2.value = clamp(decrement(ctx2.value, evt.step), ctx2);
+        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;
+        },
+        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;
         },
-        focusSplitter(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);
+        },
+        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);
+        },
+        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;
-            return (_a = dom.getSplitterEl(ctx2)) == null ? void 0 : _a.focus();
+            (_a = dom.getActiveHandleEl(ctx2)) == null ? void 0 : _a.focus();
           });
         },
+        blurResizeHandle(ctx2) {
+          raf(() => {
+            var _a;
+            (_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;
         }
       }
     }

package/dist/chunk-SQ3UMXCZ.mjs

@@ -0,0 +1,131 @@
+// 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);
+}
+
+export {
+  getNormalizedPanels,
+  getHandlePanels,
+  getHandleBounds,
+  getPanelBounds,
+  clamp
+};

package/dist/chunk-T56NFB6E.mjs

@@ -0,0 +1,102 @@
+// ../../utilities/dom/src/query.ts
+function isDocument(el) {
+  return el.nodeType === Node.DOCUMENT_NODE;
+}
+function isWindow(value) {
+  return (value == null ? void 0 : value.toString()) === "[object Window]";
+}
+function getDocument(el) {
+  var _a;
+  if (isWindow(el))
+    return el.document;
+  if (isDocument(el))
+    return el;
+  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
+}
+function defineDomHelpers(helpers) {
+  const dom2 = {
+    getRootNode: (ctx) => {
+      var _a, _b;
+      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
+    },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => {
+      var _a;
+      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+    },
+    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
+    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
+  };
+  return {
+    ...dom2,
+    ...helpers
+  };
+}
+
+// ../../utilities/dom/src/nodelist.ts
+function queryAll(root, selector) {
+  var _a;
+  return Array.from((_a = root == null ? void 0 : root.querySelectorAll(selector)) != null ? _a : []);
+}
+
+// src/splitter.dom.ts
+var dom = defineDomHelpers({
+  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) {
+    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) {
+    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();
+  }
+});
+
+export {
+  dom
+};