@zag-js/splitter 0.2.5 → 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-IOEWCDUH.mjs

@@ -0,0 +1,556 @@
+import {
+  dom
+} from "./chunk-T56NFB6E.mjs";
+import {
+  clamp,
+  getHandleBounds,
+  getHandlePanels,
+  getNormalizedPanels,
+  getPanelBounds
+} from "./chunk-SQ3UMXCZ.mjs";
+
+// src/splitter.machine.ts
+import { createMachine } from "@zag-js/core";
+
+// ../../utilities/core/src/functions.ts
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
+};
+
+// ../../utilities/core/src/guard.ts
+var isArray = (v) => Array.isArray(v);
+var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+
+// ../../utilities/core/src/object.ts
+function compact(obj) {
+  if (obj === void 0)
+    return obj;
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
+  );
+}
+
+// ../../utilities/dom/src/platform.ts
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
+  var _a;
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+var isIos = () => isApple() && !isMac();
+
+// ../../utilities/dom/src/event.ts
+var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
+var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
+var supportsMouseEvent = () => isDom() && window.onmousedown === null;
+var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
+var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
+var isLeftClick = (v) => v.button === 0;
+
+// ../../utilities/dom/src/get-element-offset.ts
+function getElementOffset(element) {
+  let left = 0;
+  let top = 0;
+  let el = element;
+  if (el.parentNode) {
+    do {
+      left += el.offsetLeft;
+      top += el.offsetTop;
+    } while ((el = el.offsetParent) && el.nodeType < 9);
+    el = element;
+    do {
+      left -= el.scrollLeft;
+      top -= el.scrollTop;
+    } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
+  }
+  return {
+    top,
+    right: innerWidth - left - element.offsetWidth,
+    bottom: innerHeight - top - element.offsetHeight,
+    left
+  };
+}
+
+// ../../utilities/dom/src/get-point-relative-to-element.ts
+function getPointRelativeToNode(point, element) {
+  const offset = getElementOffset(element);
+  const x = point.x - offset.left;
+  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");
+var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
+function extractInfo(event, type = "page") {
+  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
+  return {
+    point: {
+      x: point[`${type}X`],
+      y: point[`${type}Y`]
+    }
+  };
+}
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
+}
+function addPointerEvent(target, event, listener, options) {
+  var _a;
+  const type = (_a = getEventName(event)) != null ? _a : event;
+  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
+}
+function wrapHandler(fn, filter = false) {
+  const listener = (event) => {
+    fn(event, extractInfo(event));
+  };
+  return filter ? filterPrimaryPointer(listener) : listener;
+}
+function filterPrimaryPointer(fn) {
+  return (event) => {
+    var _a;
+    const win = (_a = event.view) != null ? _a : window;
+    const isMouseEvent2 = event instanceof win.MouseEvent;
+    const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
+    if (isPrimary)
+      fn(event);
+  };
+}
+var mouseEventNames = {
+  pointerdown: "mousedown",
+  pointermove: "mousemove",
+  pointerup: "mouseup",
+  pointercancel: "mousecancel",
+  pointerover: "mouseover",
+  pointerout: "mouseout",
+  pointerenter: "mouseenter",
+  pointerleave: "mouseleave"
+};
+var touchEventNames = {
+  pointerdown: "touchstart",
+  pointermove: "touchmove",
+  pointerup: "touchend",
+  pointercancel: "touchcancel"
+};
+function getEventName(evt) {
+  if (supportsPointerEvent())
+    return evt;
+  if (supportsTouchEvent())
+    return touchEventNames[evt];
+  if (supportsMouseEvent())
+    return mouseEventNames[evt];
+  return evt;
+}
+
+// ../../utilities/dom/src/next-tick.ts
+function nextTick(fn) {
+  const set = /* @__PURE__ */ new Set();
+  function raf2(fn2) {
+    const id = globalThis.requestAnimationFrame(fn2);
+    set.add(() => globalThis.cancelAnimationFrame(id));
+  }
+  raf2(() => raf2(fn));
+  return function cleanup() {
+    set.forEach(function(fn2) {
+      fn2();
+    });
+  };
+}
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
+}
+
+// ../../utilities/dom/src/text-selection.ts
+var state = "default";
+var savedUserSelect = "";
+var modifiedElementMap = /* @__PURE__ */ new WeakMap();
+function disableTextSelection({ target, doc } = {}) {
+  const _document = doc != null ? doc : document;
+  if (isIos()) {
+    if (state === "default") {
+      savedUserSelect = _document.documentElement.style.webkitUserSelect;
+      _document.documentElement.style.webkitUserSelect = "none";
+    }
+    state = "disabled";
+  } else if (target) {
+    modifiedElementMap.set(target, target.style.userSelect);
+    target.style.userSelect = "none";
+  }
+  return () => restoreTextSelection({ target, doc: _document });
+}
+function restoreTextSelection({ target, doc } = {}) {
+  const _document = doc != null ? doc : document;
+  if (isIos()) {
+    if (state !== "disabled")
+      return;
+    state = "restoring";
+    setTimeout(() => {
+      nextTick(() => {
+        if (state === "restoring") {
+          if (_document.documentElement.style.webkitUserSelect === "none") {
+            _document.documentElement.style.webkitUserSelect = savedUserSelect || "";
+          }
+          savedUserSelect = "";
+          state = "default";
+        }
+      });
+    }, 300);
+  } else {
+    if (target && modifiedElementMap.has(target)) {
+      let targetOldUserSelect = modifiedElementMap.get(target);
+      if (target.style.userSelect === "none") {
+        target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
+      }
+      if (target.getAttribute("style") === "") {
+        target.removeAttribute("style");
+      }
+      modifiedElementMap.delete(target);
+    }
+  }
+}
+
+// ../../utilities/dom/src/pointer-event.ts
+var THRESHOLD = 5;
+function trackPointerMove(doc, opts) {
+  const { onPointerMove, onPointerUp } = opts;
+  const handlePointerMove = (event, info) => {
+    const { point: p } = info;
+    const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
+    if (distance < THRESHOLD)
+      return;
+    if (isMouseEvent(event) && isLeftClick(event)) {
+      onPointerUp();
+      return;
+    }
+    onPointerMove(info, event);
+  };
+  return callAll(
+    addPointerEvent(doc, "pointermove", handlePointerMove, false),
+    addPointerEvent(doc, "pointerup", onPointerUp, false),
+    addPointerEvent(doc, "pointercancel", onPointerUp, false),
+    addPointerEvent(doc, "contextmenu", onPointerUp, false),
+    disableTextSelection({ doc })
+  );
+}
+
+// src/splitter.machine.ts
+function machine(userContext) {
+  const ctx = compact(userContext);
+  return createMachine(
+    {
+      id: "splitter",
+      initial: "unknown",
+      context: {
+        orientation: "horizontal",
+        activeResizeId: null,
+        previousPanels: [],
+        size: [],
+        initialSize: [],
+        activeResizeState: {
+          isAtMin: false,
+          isAtMax: false
+        },
+        ...ctx
+      },
+      created: ["setPreviousPanels", "setInitialSize"],
+      watch: {
+        size: ["setActiveResizeState"]
+      },
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        panels: (ctx2) => getNormalizedPanels(ctx2)
+      },
+      on: {
+        COLLAPSE: {
+          actions: "setStartPanelToMin"
+        },
+        EXPAND: {
+          actions: "setStartPanelToMax"
+        },
+        TOGGLE: [
+          {
+            guard: "isStartPanelAtMin",
+            actions: "setStartPanelToMax"
+          },
+          {
+            actions: "setStartPanelToMin"
+          }
+        ]
+      },
+      states: {
+        unknown: {
+          on: {
+            SETUP: "idle"
+          }
+        },
+        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", "invokeOnResizeStart"]
+            },
+            POINTER_LEAVE: "idle"
+          }
+        },
+        hover: {
+          tags: ["focus"],
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["invokeOnResizeStart"]
+            },
+            POINTER_LEAVE: "idle"
+          }
+        },
+        focused: {
+          tags: ["focus"],
+          on: {
+            BLUR: "idle",
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setActiveHandleId", "invokeOnResizeStart"]
+            },
+            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"]
+            },
+            POINTER_UP: {
+              target: "focused",
+              actions: ["invokeOnResizeEnd", "setPreviousPanels", "clearGlobalCursor", "blurResizeHandle"]
+            }
+          }
+        }
+      }
+    },
+    {
+      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) {
+          var _a;
+          (_a = ctx2.onResize) == null ? void 0 : _a.call(ctx2, { size: ctx2.size, activeHandleId: ctx2.activeResizeId });
+        },
+        invokeOnResizeStart(ctx2) {
+          var _a;
+          (_a = ctx2.onResizeStart) == null ? void 0 : _a.call(ctx2, { size: ctx2.size, activeHandleId: ctx2.activeResizeId });
+        },
+        invokeOnResizeEnd(ctx2) {
+          var _a;
+          (_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
+          }));
+        },
+        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;
+        },
+        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;
+            (_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 panels = getHandlePanels(ctx2);
+          const bounds = getHandleBounds(ctx2);
+          const rootEl = dom.getRootEl(ctx2);
+          if (!panels || !rootEl || !bounds)
+            return;
+          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;
+        }
+      }
+    }
+  );
+}
+
+export {
+  machine
+};

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
+};