@zag-js/splitter 1.34.1 → 1.35.0

package/dist/splitter.anatomy.d.mts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator">;
+declare const parts: Record<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/splitter.anatomy.d.ts

@@ -0,0 +1,6 @@
+import * as _zag_js_anatomy from '@zag-js/anatomy';
+
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator">;
+declare const parts: Record<"root" | "panel" | "resizeTrigger" | "resizeTriggerIndicator", _zag_js_anatomy.AnatomyPart>;
+
+export { anatomy, parts };

package/dist/splitter.anatomy.js

@@ -0,0 +1,34 @@
+"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/splitter.anatomy.ts
+var splitter_anatomy_exports = {};
+__export(splitter_anatomy_exports, {
+  anatomy: () => anatomy,
+  parts: () => parts
+});
+module.exports = __toCommonJS(splitter_anatomy_exports);
+var import_anatomy = require("@zag-js/anatomy");
+var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts("root", "panel", "resizeTrigger", "resizeTriggerIndicator");
+var parts = anatomy.build();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  anatomy,
+  parts
+});

package/dist/splitter.anatomy.mjs

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

package/dist/splitter.connect.d.mts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { SplitterService, SplitterApi } from './splitter.types.mjs';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: SplitterService, normalize: NormalizeProps<T>): SplitterApi<T>;
+
+export { connect };

package/dist/splitter.connect.d.ts

@@ -0,0 +1,7 @@
+import { PropTypes, NormalizeProps } from '@zag-js/types';
+import { SplitterService, SplitterApi } from './splitter.types.js';
+import '@zag-js/core';
+
+declare function connect<T extends PropTypes>(service: SplitterService, normalize: NormalizeProps<T>): SplitterApi<T>;
+
+export { connect };

package/dist/splitter.connect.js

@@ -0,0 +1,298 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/splitter.connect.ts
+var splitter_connect_exports = {};
+__export(splitter_connect_exports, {
+  connect: () => connect
+});
+module.exports = __toCommonJS(splitter_connect_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var import_splitter = require("./splitter.anatomy.cjs");
+var dom = __toESM(require("./splitter.dom.cjs"));
+var import_aria = require("./utils/aria.cjs");
+var import_fuzzy = require("./utils/fuzzy.cjs");
+var import_panel = require("./utils/panel.cjs");
+function connect(service, normalize) {
+  const { state, send, prop, computed, context, scope } = service;
+  const horizontal = computed("horizontal");
+  const dragging = state.matches("dragging");
+  const orientation = prop("orientation");
+  const getPanelStyle = (id) => {
+    const panels = prop("panels");
+    const panelIndex = panels.findIndex((panel) => panel.id === id);
+    const defaultSize = context.initial("size")[panelIndex];
+    const dragState = context.get("dragState");
+    return (0, import_panel.getPanelFlexBoxStyle)({
+      defaultSize,
+      dragState,
+      sizes: context.get("size"),
+      panels,
+      panelIndex
+    });
+  };
+  const getResizeTriggerState = (props) => {
+    const { id, disabled } = props;
+    const dragging2 = context.get("dragState")?.resizeTriggerId === id;
+    const focused = dragging2 || context.get("keyboardState")?.resizeTriggerId === id;
+    return {
+      dragging: dragging2,
+      focused,
+      disabled: !!disabled
+    };
+  };
+  return {
+    dragging,
+    orientation,
+    getPanels() {
+      return prop("panels");
+    },
+    getPanelById(id) {
+      return (0, import_panel.getPanelById)(prop("panels"), id);
+    },
+    getItems() {
+      return prop("panels").flatMap((panel, index, arr) => {
+        const nextPanel = arr[index + 1];
+        if (panel && nextPanel) {
+          return [
+            { type: "panel", id: panel.id },
+            { type: "handle", id: `${panel.id}:${nextPanel.id}` }
+          ];
+        }
+        return [{ type: "panel", id: panel.id }];
+      });
+    },
+    getSizes() {
+      return context.get("size");
+    },
+    setSizes(size) {
+      send({ type: "SIZE.SET", size });
+    },
+    resetSizes() {
+      send({ type: "SIZE.SET", size: context.initial("size") });
+    },
+    collapsePanel(id) {
+      send({ type: "PANEL.COLLAPSE", id });
+    },
+    expandPanel(id, minSize) {
+      send({ type: "PANEL.EXPAND", id, minSize });
+    },
+    resizePanel(id, unsafePanelSize) {
+      send({ type: "PANEL.RESIZE", id, size: unsafePanelSize });
+    },
+    getPanelSize(id) {
+      const panels = prop("panels");
+      const size = context.get("size");
+      const panelData = (0, import_panel.getPanelById)(panels, id);
+      const { panelSize } = (0, import_panel.panelDataHelper)(panels, panelData, size);
+      (0, import_utils.ensure)(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      return panelSize;
+    },
+    isPanelCollapsed(id) {
+      const panels = prop("panels");
+      const size = context.get("size");
+      const panelData = (0, import_panel.getPanelById)(panels, id);
+      const { collapsedSize = 0, collapsible, panelSize } = (0, import_panel.panelDataHelper)(panels, panelData, size);
+      (0, import_utils.ensure)(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      return collapsible === true && (0, import_fuzzy.fuzzyNumbersEqual)(panelSize, collapsedSize);
+    },
+    isPanelExpanded(id) {
+      const panels = prop("panels");
+      const size = context.get("size");
+      const panelData = (0, import_panel.getPanelById)(panels, id);
+      const { collapsedSize = 0, collapsible, panelSize } = (0, import_panel.panelDataHelper)(panels, panelData, size);
+      (0, import_utils.ensure)(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      return !collapsible || (0, import_fuzzy.fuzzyCompareNumbers)(panelSize, collapsedSize) > 0;
+    },
+    getLayout() {
+      return (0, import_panel.getPanelLayout)(prop("panels"));
+    },
+    getRootProps() {
+      return normalize.element({
+        ...import_splitter.parts.root.attrs,
+        "data-orientation": orientation,
+        "data-dragging": (0, import_dom_query.dataAttr)(dragging),
+        id: dom.getRootId(scope),
+        dir: prop("dir"),
+        style: {
+          display: "flex",
+          flexDirection: horizontal ? "row" : "column",
+          height: "100%",
+          width: "100%",
+          overflow: "hidden"
+        }
+      });
+    },
+    getPanelProps(props) {
+      const { id } = props;
+      return normalize.element({
+        ...import_splitter.parts.panel.attrs,
+        "data-orientation": orientation,
+        "data-dragging": (0, import_dom_query.dataAttr)(dragging),
+        dir: prop("dir"),
+        "data-id": id,
+        "data-index": (0, import_panel.findPanelIndex)(prop("panels"), id),
+        id: dom.getPanelId(scope, id),
+        "data-ownedby": dom.getRootId(scope),
+        style: getPanelStyle(id)
+      });
+    },
+    getResizeTriggerState,
+    getResizeTriggerIndicator(props) {
+      const triggerState = getResizeTriggerState(props);
+      return normalize.element({
+        ...import_splitter.parts.resizeTriggerIndicator.attrs,
+        "data-orientation": orientation,
+        "data-focus": (0, import_dom_query.dataAttr)(triggerState.focused),
+        "data-dragging": (0, import_dom_query.dataAttr)(triggerState.dragging),
+        "data-disabled": (0, import_dom_query.dataAttr)(triggerState.disabled),
+        "data-ownedby": dom.getRootId(scope)
+      });
+    },
+    getResizeTriggerProps(props) {
+      const { id } = props;
+      const triggerState = getResizeTriggerState(props);
+      const aria = (0, import_aria.getAriaValue)(context.get("size"), prop("panels"), id);
+      return normalize.element({
+        ...import_splitter.parts.resizeTrigger.attrs,
+        dir: prop("dir"),
+        id: dom.getResizeTriggerId(scope, id),
+        role: "separator",
+        "data-id": id,
+        "data-ownedby": dom.getRootId(scope),
+        tabIndex: triggerState.disabled ? void 0 : 0,
+        "aria-valuenow": aria.valueNow,
+        "aria-valuemin": aria.valueMin,
+        "aria-valuemax": aria.valueMax,
+        "data-orientation": orientation,
+        "aria-orientation": orientation,
+        "aria-controls": `${dom.getPanelId(scope, aria.beforeId)} ${dom.getPanelId(scope, aria.afterId)}`,
+        "data-focus": (0, import_dom_query.dataAttr)(triggerState.focused),
+        "data-dragging": (0, import_dom_query.dataAttr)(triggerState.dragging),
+        "data-disabled": (0, import_dom_query.dataAttr)(triggerState.disabled),
+        style: {
+          touchAction: "none",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          flex: "0 0 auto",
+          pointerEvents: triggerState.disabled ? "none" : triggerState.dragging && !triggerState.focused ? "none" : void 0,
+          cursor: triggerState.disabled ? void 0 : horizontal ? "col-resize" : "row-resize",
+          [horizontal ? "minHeight" : "minWidth"]: "0"
+        },
+        onPointerDown(event) {
+          if (!(0, import_dom_query.isLeftClick)(event)) return;
+          if (triggerState.disabled) {
+            event.preventDefault();
+            return;
+          }
+          const point = (0, import_dom_query.getEventPoint)(event);
+          send({ type: "POINTER_DOWN", id, point });
+          event.currentTarget.setPointerCapture(event.pointerId);
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onPointerUp(event) {
+          if (triggerState.disabled) return;
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+          }
+        },
+        onPointerOver() {
+          if (triggerState.disabled) return;
+          send({ type: "POINTER_OVER", id });
+        },
+        onPointerLeave() {
+          if (triggerState.disabled) return;
+          send({ type: "POINTER_LEAVE", id });
+        },
+        onBlur() {
+          if (triggerState.disabled) return;
+          send({ type: "BLUR" });
+        },
+        onFocus() {
+          if (triggerState.disabled) return;
+          send({ type: "FOCUS", id });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (triggerState.disabled) return;
+          const keyboardResizeBy = prop("keyboardResizeBy");
+          let delta = 0;
+          if (event.shiftKey) {
+            delta = 10;
+          } else if (keyboardResizeBy != null) {
+            delta = keyboardResizeBy;
+          } else {
+            delta = 1;
+          }
+          const keyMap = {
+            Enter() {
+              send({ type: "ENTER", id });
+            },
+            ArrowUp() {
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? 0 : -delta });
+            },
+            ArrowDown() {
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? 0 : delta });
+            },
+            ArrowLeft() {
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? -delta : 0 });
+            },
+            ArrowRight() {
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? delta : 0 });
+            },
+            Home() {
+              send({ type: "KEYBOARD_MOVE", id, delta: -100 });
+            },
+            End() {
+              send({ type: "KEYBOARD_MOVE", id, delta: 100 });
+            },
+            F6() {
+              send({ type: "FOCUS.CYCLE", id, shiftKey: event.shiftKey });
+            }
+          };
+          const key = (0, import_dom_query.getEventKey)(event, {
+            dir: prop("dir"),
+            orientation
+          });
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        }
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  connect
+});

package/dist/splitter.connect.mjs

@@ -0,0 +1,263 @@
+// src/splitter.connect.ts
+import { dataAttr, getEventKey, getEventPoint, isLeftClick } from "@zag-js/dom-query";
+import { ensure } from "@zag-js/utils";
+import { parts } from "./splitter.anatomy.mjs";
+import * as dom from "./splitter.dom.mjs";
+import { getAriaValue } from "./utils/aria.mjs";
+import { fuzzyCompareNumbers, fuzzyNumbersEqual } from "./utils/fuzzy.mjs";
+import { findPanelIndex, getPanelById, getPanelFlexBoxStyle, getPanelLayout, panelDataHelper } from "./utils/panel.mjs";
+function connect(service, normalize) {
+  const { state, send, prop, computed, context, scope } = service;
+  const horizontal = computed("horizontal");
+  const dragging = state.matches("dragging");
+  const orientation = prop("orientation");
+  const getPanelStyle = (id) => {
+    const panels = prop("panels");
+    const panelIndex = panels.findIndex((panel) => panel.id === id);
+    const defaultSize = context.initial("size")[panelIndex];
+    const dragState = context.get("dragState");
+    return getPanelFlexBoxStyle({
+      defaultSize,
+      dragState,
+      sizes: context.get("size"),
+      panels,
+      panelIndex
+    });
+  };
+  const getResizeTriggerState = (props) => {
+    const { id, disabled } = props;
+    const dragging2 = context.get("dragState")?.resizeTriggerId === id;
+    const focused = dragging2 || context.get("keyboardState")?.resizeTriggerId === id;
+    return {
+      dragging: dragging2,
+      focused,
+      disabled: !!disabled
+    };
+  };
+  return {
+    dragging,
+    orientation,
+    getPanels() {
+      return prop("panels");
+    },
+    getPanelById(id) {
+      return getPanelById(prop("panels"), id);
+    },
+    getItems() {
+      return prop("panels").flatMap((panel, index, arr) => {
+        const nextPanel = arr[index + 1];
+        if (panel && nextPanel) {
+          return [
+            { type: "panel", id: panel.id },
+            { type: "handle", id: `${panel.id}:${nextPanel.id}` }
+          ];
+        }
+        return [{ type: "panel", id: panel.id }];
+      });
+    },
+    getSizes() {
+      return context.get("size");
+    },
+    setSizes(size) {
+      send({ type: "SIZE.SET", size });
+    },
+    resetSizes() {
+      send({ type: "SIZE.SET", size: context.initial("size") });
+    },
+    collapsePanel(id) {
+      send({ type: "PANEL.COLLAPSE", id });
+    },
+    expandPanel(id, minSize) {
+      send({ type: "PANEL.EXPAND", id, minSize });
+    },
+    resizePanel(id, unsafePanelSize) {
+      send({ type: "PANEL.RESIZE", id, size: unsafePanelSize });
+    },
+    getPanelSize(id) {
+      const panels = prop("panels");
+      const size = context.get("size");
+      const panelData = getPanelById(panels, id);
+      const { panelSize } = panelDataHelper(panels, panelData, size);
+      ensure(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      return panelSize;
+    },
+    isPanelCollapsed(id) {
+      const panels = prop("panels");
+      const size = context.get("size");
+      const panelData = getPanelById(panels, id);
+      const { collapsedSize = 0, collapsible, panelSize } = panelDataHelper(panels, panelData, size);
+      ensure(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      return collapsible === true && fuzzyNumbersEqual(panelSize, collapsedSize);
+    },
+    isPanelExpanded(id) {
+      const panels = prop("panels");
+      const size = context.get("size");
+      const panelData = getPanelById(panels, id);
+      const { collapsedSize = 0, collapsible, panelSize } = panelDataHelper(panels, panelData, size);
+      ensure(panelSize, () => `Panel size not found for panel "${panelData.id}"`);
+      return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
+    },
+    getLayout() {
+      return getPanelLayout(prop("panels"));
+    },
+    getRootProps() {
+      return normalize.element({
+        ...parts.root.attrs,
+        "data-orientation": orientation,
+        "data-dragging": dataAttr(dragging),
+        id: dom.getRootId(scope),
+        dir: prop("dir"),
+        style: {
+          display: "flex",
+          flexDirection: horizontal ? "row" : "column",
+          height: "100%",
+          width: "100%",
+          overflow: "hidden"
+        }
+      });
+    },
+    getPanelProps(props) {
+      const { id } = props;
+      return normalize.element({
+        ...parts.panel.attrs,
+        "data-orientation": orientation,
+        "data-dragging": dataAttr(dragging),
+        dir: prop("dir"),
+        "data-id": id,
+        "data-index": findPanelIndex(prop("panels"), id),
+        id: dom.getPanelId(scope, id),
+        "data-ownedby": dom.getRootId(scope),
+        style: getPanelStyle(id)
+      });
+    },
+    getResizeTriggerState,
+    getResizeTriggerIndicator(props) {
+      const triggerState = getResizeTriggerState(props);
+      return normalize.element({
+        ...parts.resizeTriggerIndicator.attrs,
+        "data-orientation": orientation,
+        "data-focus": dataAttr(triggerState.focused),
+        "data-dragging": dataAttr(triggerState.dragging),
+        "data-disabled": dataAttr(triggerState.disabled),
+        "data-ownedby": dom.getRootId(scope)
+      });
+    },
+    getResizeTriggerProps(props) {
+      const { id } = props;
+      const triggerState = getResizeTriggerState(props);
+      const aria = getAriaValue(context.get("size"), prop("panels"), id);
+      return normalize.element({
+        ...parts.resizeTrigger.attrs,
+        dir: prop("dir"),
+        id: dom.getResizeTriggerId(scope, id),
+        role: "separator",
+        "data-id": id,
+        "data-ownedby": dom.getRootId(scope),
+        tabIndex: triggerState.disabled ? void 0 : 0,
+        "aria-valuenow": aria.valueNow,
+        "aria-valuemin": aria.valueMin,
+        "aria-valuemax": aria.valueMax,
+        "data-orientation": orientation,
+        "aria-orientation": orientation,
+        "aria-controls": `${dom.getPanelId(scope, aria.beforeId)} ${dom.getPanelId(scope, aria.afterId)}`,
+        "data-focus": dataAttr(triggerState.focused),
+        "data-dragging": dataAttr(triggerState.dragging),
+        "data-disabled": dataAttr(triggerState.disabled),
+        style: {
+          touchAction: "none",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          flex: "0 0 auto",
+          pointerEvents: triggerState.disabled ? "none" : triggerState.dragging && !triggerState.focused ? "none" : void 0,
+          cursor: triggerState.disabled ? void 0 : horizontal ? "col-resize" : "row-resize",
+          [horizontal ? "minHeight" : "minWidth"]: "0"
+        },
+        onPointerDown(event) {
+          if (!isLeftClick(event)) return;
+          if (triggerState.disabled) {
+            event.preventDefault();
+            return;
+          }
+          const point = getEventPoint(event);
+          send({ type: "POINTER_DOWN", id, point });
+          event.currentTarget.setPointerCapture(event.pointerId);
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onPointerUp(event) {
+          if (triggerState.disabled) return;
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+          }
+        },
+        onPointerOver() {
+          if (triggerState.disabled) return;
+          send({ type: "POINTER_OVER", id });
+        },
+        onPointerLeave() {
+          if (triggerState.disabled) return;
+          send({ type: "POINTER_LEAVE", id });
+        },
+        onBlur() {
+          if (triggerState.disabled) return;
+          send({ type: "BLUR" });
+        },
+        onFocus() {
+          if (triggerState.disabled) return;
+          send({ type: "FOCUS", id });
+        },
+        onKeyDown(event) {
+          if (event.defaultPrevented) return;
+          if (triggerState.disabled) return;
+          const keyboardResizeBy = prop("keyboardResizeBy");
+          let delta = 0;
+          if (event.shiftKey) {
+            delta = 10;
+          } else if (keyboardResizeBy != null) {
+            delta = keyboardResizeBy;
+          } else {
+            delta = 1;
+          }
+          const keyMap = {
+            Enter() {
+              send({ type: "ENTER", id });
+            },
+            ArrowUp() {
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? 0 : -delta });
+            },
+            ArrowDown() {
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? 0 : delta });
+            },
+            ArrowLeft() {
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? -delta : 0 });
+            },
+            ArrowRight() {
+              send({ type: "KEYBOARD_MOVE", id, delta: horizontal ? delta : 0 });
+            },
+            Home() {
+              send({ type: "KEYBOARD_MOVE", id, delta: -100 });
+            },
+            End() {
+              send({ type: "KEYBOARD_MOVE", id, delta: 100 });
+            },
+            F6() {
+              send({ type: "FOCUS.CYCLE", id, shiftKey: event.shiftKey });
+            }
+          };
+          const key = getEventKey(event, {
+            dir: prop("dir"),
+            orientation
+          });
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        }
+      });
+    }
+  };
+}
+export {
+  connect
+};

package/dist/splitter.dom.d.mts

@@ -0,0 +1,19 @@
+import { Scope } from '@zag-js/core';
+import { CursorState } from './splitter.types.mjs';
+import '@zag-js/types';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getResizeTriggerId: (ctx: Scope, id: string) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getPanelId: (ctx: Scope, id: string | number) => any;
+declare const getPanelEls: (ctx: Scope) => HTMLElement[];
+declare const getGlobalCursorId: (ctx: Scope) => string;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getResizeTriggerEl: (ctx: Scope, id: string) => HTMLElement | null;
+declare const getPanelEl: (ctx: Scope, id: string | number) => HTMLElement | null;
+declare const getCursor: (state: CursorState, x: boolean) => (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
+declare const getResizeTriggerEls: (ctx: Scope) => HTMLElement[];
+declare const setupGlobalCursor: (ctx: Scope, state: CursorState, x: boolean, nonce?: string) => void;
+declare const removeGlobalCursor: (ctx: Scope) => void;
+
+export { getCursor, getGlobalCursorId, getLabelId, getPanelEl, getPanelEls, getPanelId, getResizeTriggerEl, getResizeTriggerEls, getResizeTriggerId, getRootEl, getRootId, removeGlobalCursor, setupGlobalCursor };

package/dist/splitter.dom.d.ts

@@ -0,0 +1,19 @@
+import { Scope } from '@zag-js/core';
+import { CursorState } from './splitter.types.js';
+import '@zag-js/types';
+
+declare const getRootId: (ctx: Scope) => any;
+declare const getResizeTriggerId: (ctx: Scope, id: string) => any;
+declare const getLabelId: (ctx: Scope) => any;
+declare const getPanelId: (ctx: Scope, id: string | number) => any;
+declare const getPanelEls: (ctx: Scope) => HTMLElement[];
+declare const getGlobalCursorId: (ctx: Scope) => string;
+declare const getRootEl: (ctx: Scope) => HTMLElement | null;
+declare const getResizeTriggerEl: (ctx: Scope, id: string) => HTMLElement | null;
+declare const getPanelEl: (ctx: Scope, id: string | number) => HTMLElement | null;
+declare const getCursor: (state: CursorState, x: boolean) => (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
+declare const getResizeTriggerEls: (ctx: Scope) => HTMLElement[];
+declare const setupGlobalCursor: (ctx: Scope, state: CursorState, x: boolean, nonce?: string) => void;
+declare const removeGlobalCursor: (ctx: Scope) => void;
+
+export { getCursor, getGlobalCursorId, getLabelId, getPanelEl, getPanelEls, getPanelId, getResizeTriggerEl, getResizeTriggerEls, getResizeTriggerId, getRootEl, getRootId, removeGlobalCursor, setupGlobalCursor };