@zag-js/splitter 0.1.13 → 0.1.14

package/dist/index.js

@@ -1,31 +1,4 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  connect: () => connect,
-  machine: () => machine
-});
-module.exports = __toCommonJS(src_exports);
-
-// ../../utilities/dom/dist/index.mjs
+// ../../utilities/dom/dist/index.js
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
@@ -506,9 +479,9 @@ function connect(state2, send, normalize) {
 }
 
 // src/splitter.machine.ts
-var import_core = require("@zag-js/core");
+import { createMachine, guards } from "@zag-js/core";
 
-// ../../utilities/number/dist/index.mjs
+// ../../utilities/number/dist/index.js
 function round(v, t) {
   let num = valueOf(v);
   const p = 10 ** (t ?? 10);
@@ -556,9 +529,9 @@ function decimalOperation(a, op, b) {
 var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
 
 // src/splitter.machine.ts
-var { not } = import_core.guards;
+var { not } = guards;
 function machine(ctx) {
-  return (0, import_core.createMachine)(
+  return createMachine(
     {
       id: "splitter",
       initial: "unknown",
@@ -769,8 +742,7 @@ function machine(ctx) {
     }
   );
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   connect,
   machine
-});
+};

package/package.json

@@ -1,6 +1,7 @@
 {
+  "type": "module",
   "name": "@zag-js/splitter",
-  "version": "0.1.13",
+  "version": "0.1.14",
   "description": "Core logic for the splitter widget implemented as a state machine",
   "keywords": [
     "js",
@@ -17,7 +18,6 @@
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "module": "dist/index.mjs",
   "repository": "https://github.com/chakra-ui/zag/tree/main/packages/splitter",
   "sideEffects": false,
   "files": [
@@ -30,17 +30,17 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.10",
-    "@zag-js/types": "0.2.5"
+    "@zag-js/core": "0.1.11",
+    "@zag-js/types": "0.2.6"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.11",
-    "@zag-js/number-utils": "0.1.4"
+    "@zag-js/dom-utils": "0.1.12",
+    "@zag-js/number-utils": "0.1.5"
   },
   "scripts": {
-    "build-fast": "tsup src/index.ts --format=esm,cjs",
+    "build-fast": "tsup src/index.ts --format=esm",
     "start": "pnpm build --watch",
-    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "build": "tsup src/index.ts --format=esm --dts",
     "test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
     "lint": "eslint src --ext .ts,.tsx",
     "test-ci": "pnpm test --ci --runInBand",

package/dist/index.mjs

@@ -1,748 +0,0 @@
-// ../../utilities/dom/dist/index.mjs
-var dataAttr = (guard) => {
-  return guard ? "" : void 0;
-};
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn == null ? void 0 : fn(...a);
-  });
-};
-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);
-var isDom = () => typeof window !== "undefined";
-function getPlatform() {
-  const agent = navigator.userAgentData;
-  return (agent == null ? void 0 : agent.platform) ?? 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();
-function isDocument(el) {
-  return el.nodeType === Node.DOCUMENT_NODE;
-}
-function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
-}
-function getDocument(el) {
-  if (isWindow(el))
-    return el.document;
-  if (isDocument(el))
-    return el;
-  return (el == null ? void 0 : el.ownerDocument) ?? document;
-}
-function defineDomHelpers(helpers) {
-  const dom2 = {
-    getRootNode: (ctx) => {
-      var _a;
-      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
-    },
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
-    getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
-    getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
-  };
-  return {
-    ...dom2,
-    ...helpers
-  };
-}
-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;
-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
-  };
-}
-function getPointRelativeToNode(point, element) {
-  const offset = getElementOffset(element);
-  const x = point.x - offset.left;
-  const y = point.y - offset.top;
-  return { x, y };
-}
-var rtlKeyMap = {
-  ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft"
-};
-var sameKeyMap = {
-  Up: "ArrowUp",
-  Down: "ArrowDown",
-  Esc: "Escape",
-  " ": "Space",
-  ",": "Comma",
-  Left: "ArrowLeft",
-  Right: "ArrowRight"
-};
-function getEventKey(event, options = {}) {
-  const { dir = "ltr", orientation = "horizontal" } = options;
-  let { key } = event;
-  key = sameKeyMap[key] ?? key;
-  const isRtl = dir === "rtl" && orientation === "horizontal";
-  if (isRtl && key in rtlKeyMap) {
-    key = rtlKeyMap[key];
-  }
-  return key;
-}
-var PAGE_KEYS = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
-var ARROW_KEYS = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
-function getEventStep(event) {
-  if (event.ctrlKey || event.metaKey) {
-    return 0.1;
-  } else {
-    const isPageKey = PAGE_KEYS.has(event.key);
-    const isSkipKey = isPageKey || event.shiftKey && ARROW_KEYS.has(event.key);
-    return isSkipKey ? 10 : 1;
-  }
-}
-var isRef = (v) => hasProp(v, "current");
-var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function extractInfo(event, type = "page") {
-  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : 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) {
-  const type = getEventName(event) ?? 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) => {
-    const win = event.view ?? 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;
-}
-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);
-  };
-}
-var state = "default";
-var savedUserSelect = "";
-var modifiedElementMap = /* @__PURE__ */ new WeakMap();
-function disableTextSelection({ target, doc } = {}) {
-  const _document = 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 ?? 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 ?? "";
-      }
-      if (target.getAttribute("style") === "") {
-        target.removeAttribute("style");
-      }
-      modifiedElementMap.delete(target);
-    }
-  }
-}
-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.dom.ts
-var dom = defineDomHelpers({
-  getRootId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `splitter:${ctx.id}`;
-  },
-  getSplitterId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.splitter) ?? `splitter:${ctx.id}:splitter`;
-  },
-  getToggleButtonId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.toggleBtn) ?? `splitter:${ctx.id}:toggle-btn`;
-  },
-  getLabelId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `splitter:${ctx.id}:label`;
-  },
-  getPrimaryPaneId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.primaryPane) ?? `splitter:${ctx.id}:primary`;
-  },
-  getSecondaryPaneId: (ctx) => {
-    var _a;
-    return ((_a = ctx.ids) == null ? void 0 : _a.secondaryPane) ?? `splitter:${ctx.id}:secondary`;
-  },
-  getSplitterEl: (ctx) => dom.getById(ctx, dom.getSplitterId(ctx)),
-  getPrimaryPaneEl: (ctx) => dom.getById(ctx, dom.getPrimaryPaneId(ctx)),
-  getCursor(ctx) {
-    if (ctx.disabled || ctx.fixed)
-      return "default";
-    const x = ctx.isHorizontal;
-    let cursor = x ? "col-resize" : "row-resize";
-    if (ctx.isAtMin)
-      cursor = x ? "e-resize" : "s-resize";
-    if (ctx.isAtMax)
-      cursor = x ? "w-resize" : "n-resize";
-    return cursor;
-  }
-});
-
-// 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,
-    isFocused,
-    isDragging,
-    value,
-    collapse() {
-      send("COLLAPSE");
-    },
-    expand() {
-      send("EXPAND");
-    },
-    toggle() {
-      send("TOGGLE");
-    },
-    setSize(size) {
-      send({ type: "SET_SIZE", size });
-    },
-    rootProps: normalize.element({
-      "data-part": "root",
-      "data-orientation": state2.context.orientation,
-      "data-disabled": dataAttr(isDisabled),
-      id: dom.getRootId(state2.context),
-      style: {
-        display: "flex",
-        flex: "1 1 0%",
-        flexDirection: isHorizontal ? "row" : "column"
-      }
-    }),
-    secondaryPaneProps: normalize.element({
-      "data-part": "secondary-pane",
-      "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({
-      "data-part": "primary-pane",
-      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` }
-      }
-    }),
-    toggleButtonProps: normalize.element({
-      "data-part": "toggle-button",
-      id: dom.getToggleButtonId(state2.context),
-      "aria-label": state2.context.isAtMin ? "Expand Primary Pane" : "Collapse Primary Pane",
-      onClick() {
-        send("TOGGLE");
-      }
-    }),
-    labelProps: normalize.element({
-      "data-part": "label",
-      id: dom.getLabelId(state2.context)
-    }),
-    splitterProps: normalize.element({
-      "data-part": "splitter",
-      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");
-          }
-        };
-        const key = getEventKey(event, state2.context);
-        const exec = keyMap[key];
-        if (exec) {
-          exec(event);
-          event.preventDefault();
-        }
-      }
-    })
-  };
-}
-
-// src/splitter.machine.ts
-import { createMachine, guards } from "@zag-js/core";
-
-// ../../utilities/number/dist/index.mjs
-function round(v, t) {
-  let num = valueOf(v);
-  const p = 10 ** (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;
-}
-var nf = new Intl.NumberFormat("en-US", { style: "decimal", maximumFractionDigits: 20 });
-
-// src/splitter.machine.ts
-var { not } = guards;
-function machine(ctx) {
-  return createMachine(
-    {
-      id: "splitter",
-      initial: "unknown",
-      context: {
-        orientation: "horizontal",
-        min: 224,
-        max: 340,
-        step: 1,
-        value: 256,
-        snapOffset: 0,
-        ...ctx
-      },
-      computed: {
-        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-        isAtMin: (ctx2) => ctx2.value === ctx2.min,
-        isAtMax: (ctx2) => ctx2.value === ctx2.max
-      },
-      on: {
-        COLLAPSE: {
-          actions: "setToMin"
-        },
-        EXPAND: {
-          actions: "setToMax"
-        },
-        TOGGLE: [
-          {
-            guard: "isCollapsed",
-            actions: "setToMax"
-          },
-          {
-            actions: "setToMin"
-          }
-        ]
-      },
-      states: {
-        unknown: {
-          on: {
-            SETUP: "idle"
-          }
-        },
-        idle: {
-          on: {
-            POINTER_OVER: {
-              guard: not("isFixed"),
-              target: "hover:temp"
-            },
-            POINTER_LEAVE: "idle",
-            FOCUS: "focused"
-          }
-        },
-        "hover:temp": {
-          after: {
-            HOVER_DELAY: "hover"
-          },
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["invokeOnChangeStart"]
-            },
-            POINTER_LEAVE: "idle"
-          }
-        },
-        hover: {
-          tags: ["focus"],
-          on: {
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["invokeOnChangeStart"]
-            },
-            POINTER_LEAVE: "idle"
-          }
-        },
-        focused: {
-          tags: ["focus"],
-          on: {
-            BLUR: "idle",
-            POINTER_DOWN: {
-              target: "dragging",
-              actions: ["invokeOnChangeStart"]
-            },
-            ARROW_LEFT: {
-              guard: "isHorizontal",
-              actions: "decrement"
-            },
-            ARROW_RIGHT: {
-              guard: "isHorizontal",
-              actions: "increment"
-            },
-            ARROW_UP: {
-              guard: "isVertical",
-              actions: "increment"
-            },
-            ARROW_DOWN: {
-              guard: "isVertical",
-              actions: "decrement"
-            },
-            ENTER: [
-              {
-                guard: "isCollapsed",
-                actions: "setToMin"
-              },
-              { actions: "setToMin" }
-            ],
-            HOME: {
-              actions: "setToMin"
-            },
-            END: {
-              actions: "setToMax"
-            },
-            DOUBLE_CLICK: [
-              {
-                guard: "isCollapsed",
-                actions: "setToMax"
-              },
-              { actions: "setToMin" }
-            ]
-          }
-        },
-        dragging: {
-          tags: ["focus"],
-          entry: "focusSplitter",
-          activities: "trackPointerMove",
-          on: {
-            POINTER_UP: {
-              target: "focused",
-              actions: ["invokeOnChangeEnd"]
-            },
-            POINTER_MOVE: {
-              actions: "setPointerValue"
-            }
-          }
-        }
-      }
-    },
-    {
-      activities: {
-        trackPointerMove: (ctx2, _evt, { send }) => {
-          const doc = dom.getDoc(ctx2);
-          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,
-        isHorizontal: (ctx2) => ctx2.isHorizontal,
-        isVertical: (ctx2) => !ctx2.isHorizontal,
-        isFixed: (ctx2) => !!ctx2.fixed
-      },
-      delays: {
-        HOVER_DELAY: 250
-      },
-      actions: {
-        invokeOnChange(ctx2, evt) {
-          var _a;
-          if (evt.type !== "SETUP") {
-            (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-          }
-        },
-        invokeOnChangeStart(ctx2) {
-          var _a;
-          (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-        },
-        invokeOnChangeEnd(ctx2) {
-          var _a;
-          (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-        },
-        setToMin(ctx2) {
-          ctx2.value = ctx2.min;
-        },
-        setToMax(ctx2) {
-          ctx2.value = ctx2.max;
-        },
-        increment(ctx2, evt) {
-          ctx2.value = clamp(increment(ctx2.value, evt.step), ctx2);
-        },
-        decrement(ctx2, evt) {
-          ctx2.value = clamp(decrement(ctx2.value, evt.step), ctx2);
-        },
-        focusSplitter(ctx2) {
-          raf(() => {
-            var _a;
-            return (_a = dom.getSplitterEl(ctx2)) == null ? void 0 : _a.focus();
-          });
-        },
-        setPointerValue(ctx2, evt) {
-          const el = dom.getPrimaryPaneEl(ctx2);
-          if (!el)
-            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;
-        }
-      }
-    }
-  );
-}
-export {
-  connect,
-  machine
-};