@zag-js/splitter 0.10.1 → 0.10.3

package/dist/index.mjs

@@ -1,16 +1,3 @@
-import {
-  connect
-} from "./chunk-53T2VZ2R.mjs";
-import {
-  anatomy
-} from "./chunk-HPRMFGOY.mjs";
-import {
-  machine
-} from "./chunk-X2E2LAC5.mjs";
-import "./chunk-3GDOPT5W.mjs";
-import "./chunk-MV44GBQY.mjs";
-export {
-  anatomy,
-  connect,
-  machine
-};
+export { anatomy } from './splitter.anatomy.mjs';
+export { connect } from './splitter.connect.mjs';
+export { machine } from './splitter.machine.mjs';

package/dist/splitter.anatomy.d.ts

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

package/dist/splitter.anatomy.js

@@ -1,34 +1,11 @@
-"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);
+'use strict';
 
-// 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", "toggleTrigger", "resizeTrigger");
-var parts = anatomy.build();
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  anatomy,
-  parts
-});
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const anatomy$1 = require('@zag-js/anatomy');
+
+const anatomy = anatomy$1.createAnatomy("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger");
+const parts = anatomy.build();
+
+exports.anatomy = anatomy;
+exports.parts = parts;

package/dist/splitter.anatomy.mjs

@@ -1,8 +1,6 @@
-import {
-  anatomy,
-  parts
-} from "./chunk-HPRMFGOY.mjs";
-export {
-  anatomy,
-  parts
-};
+import { createAnatomy } from '@zag-js/anatomy';
+
+const anatomy = createAnatomy("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger");
+const parts = anatomy.build();
+
+export { anatomy, parts };

package/dist/splitter.connect.d.ts

@@ -1,8 +1,6 @@
-import { PropTypes, NormalizeProps } from '@zag-js/types';
-import { State, Send, PanelId, ResizeTriggerProps, PanelProps } from './splitter.types.js';
-import '@zag-js/core';
-
-declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
+import type { NormalizeProps, PropTypes } from "@zag-js/types";
+import type { PanelId, PanelProps, ResizeTriggerProps, Send, State } from "./splitter.types";
+export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
     /**
      * Whether the splitter is focused.
      */
@@ -45,5 +43,3 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     getPanelProps(props: PanelProps): T["element"];
     getResizeTriggerProps(props: ResizeTriggerProps): T["element"];
 };
-
-export { connect };

package/dist/splitter.connect.js

@@ -1,127 +1,13 @@
-"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);
+'use strict';
 
-// src/splitter.connect.ts
-var splitter_connect_exports = {};
-__export(splitter_connect_exports, {
-  connect: () => connect
-});
-module.exports = __toCommonJS(splitter_connect_exports);
-var import_dom_event = require("@zag-js/dom-event");
-var import_dom_query2 = require("@zag-js/dom-query");
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-// src/splitter.anatomy.ts
-var import_anatomy = require("@zag-js/anatomy");
-var anatomy = (0, import_anatomy.createAnatomy)("splitter").parts("root", "panel", "toggleTrigger", "resizeTrigger");
-var parts = anatomy.build();
+const domEvent = require('@zag-js/dom-event');
+const domQuery = require('@zag-js/dom-query');
+const splitter_anatomy = require('./splitter.anatomy.js');
+const splitter_dom = require('./splitter.dom.js');
+const splitter_utils = require('./splitter.utils.js');
 
-// src/splitter.dom.ts
-var import_dom_query = require("@zag-js/dom-query");
-var dom = (0, import_dom_query.createScope)({
-  getRootId: (ctx) => ctx.ids?.root ?? `splitter:${ctx.id}`,
-  getResizeTriggerId: (ctx, id) => ctx.ids?.resizeTrigger?.(id) ?? `splitter:${ctx.id}:splitter:${id}`,
-  getToggleTriggerId: (ctx) => ctx.ids?.toggleTrigger?.(ctx.id) ?? `splitter:${ctx.id}:toggle-btn`,
-  getLabelId: (ctx) => ctx.ids?.label ?? `splitter:${ctx.id}:label`,
-  getPanelId: (ctx, id) => ctx.ids?.panel?.(id) ?? `splitter:${ctx.id}:panel:${id}`,
-  globalCursorId: (ctx) => `splitter:${ctx.id}:global-cursor`,
-  getRootEl: (ctx) => dom.queryById(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) {
-    const flexGrow = ctx.panels.find((panel) => panel.id === id)?.size ?? "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 (0, import_dom_query.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) {
-    dom.getById(ctx, dom.globalCursorId(ctx))?.remove();
-  }
-});
-
-// src/splitter.utils.ts
-function getHandlePanels(ctx, id = ctx.activeResizeId) {
-  const [beforeId, afterId] = id?.split(":") ?? [];
-  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)
-  };
-}
-
-// src/splitter.connect.ts
 function connect(state, send, normalize) {
   const isHorizontal = state.context.isHorizontal;
   const isFocused = state.hasTag("focus");
@@ -139,26 +25,26 @@ function connect(state, send, normalize) {
     /**
      *  The bounds of the currently dragged splitter handle.
      */
-    bounds: getHandleBounds(state.context),
+    bounds: splitter_utils.getHandleBounds(state.context),
     /**
      * Function to set a panel to its minimum size.
      */
     setToMinSize(id) {
       const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SET_SIZE", id, size: panel?.minSize, src: "collapse" });
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" });
     },
     /**
      * Function to set a panel to its maximum size.
      */
     setToMaxSize(id) {
       const panel = panels.find((panel2) => panel2.id === id);
-      send({ type: "SET_SIZE", id, size: panel?.maxSize, src: "expand" });
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" });
     },
     /**
      * Function to set the size of a panel.
      */
     setSize(id, size) {
-      send({ type: "SET_SIZE", id, size });
+      send({ type: "SET_PANEL_SIZE", id, size });
     },
     /**
      * Returns the state details for a resize trigger.
@@ -166,8 +52,8 @@ function connect(state, send, normalize) {
     getResizeTriggerState(props) {
       const { id, disabled } = props;
       const ids = id.split(":");
-      const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
-      const panels2 = getHandleBounds(state.context, id);
+      const panelIds = ids.map((id2) => splitter_dom.dom.getPanelId(state.context, id2));
+      const panels2 = splitter_utils.getHandleBounds(state.context, id);
       return {
         isDisabled: !!disabled,
         isFocused: state.context.activeResizeId === id && isFocused,
@@ -178,9 +64,9 @@ function connect(state, send, normalize) {
       };
     },
     rootProps: normalize.element({
-      ...parts.root.attrs,
+      ...splitter_anatomy.parts.root.attrs,
       "data-orientation": state.context.orientation,
-      id: dom.getRootId(state.context),
+      id: splitter_dom.dom.getRootId(state.context),
       dir: state.context.dir,
       style: {
         display: "flex",
@@ -193,22 +79,22 @@ function connect(state, send, normalize) {
     getPanelProps(props) {
       const { id } = props;
       return normalize.element({
-        ...parts.panel.attrs,
+        ...splitter_anatomy.parts.panel.attrs,
         dir: state.context.dir,
-        id: dom.getPanelId(state.context, id),
-        "data-ownedby": dom.getRootId(state.context),
-        style: dom.getPanelStyle(state.context, id)
+        id: splitter_dom.dom.getPanelId(state.context, id),
+        "data-ownedby": splitter_dom.dom.getRootId(state.context),
+        style: splitter_dom.dom.getPanelStyle(state.context, id)
       });
     },
     getResizeTriggerProps(props) {
       const { id, disabled, step = 1 } = props;
       const triggerState = api.getResizeTriggerState(props);
       return normalize.element({
-        ...parts.resizeTrigger.attrs,
+        ...splitter_anatomy.parts.resizeTrigger.attrs,
         dir: state.context.dir,
-        id: dom.getResizeTriggerId(state.context, id),
+        id: splitter_dom.dom.getResizeTriggerId(state.context, id),
         role: "separator",
-        "data-ownedby": dom.getRootId(state.context),
+        "data-ownedby": splitter_dom.dom.getRootId(state.context),
         tabIndex: disabled ? void 0 : 0,
         "aria-valuenow": triggerState.value,
         "aria-valuemin": triggerState.min,
@@ -216,8 +102,8 @@ function connect(state, send, normalize) {
         "data-orientation": state.context.orientation,
         "aria-orientation": state.context.orientation,
         "aria-controls": triggerState.panelIds.join(" "),
-        "data-focus": (0, import_dom_query2.dataAttr)(triggerState.isFocused),
-        "data-disabled": (0, import_dom_query2.dataAttr)(disabled),
+        "data-focus": domQuery.dataAttr(triggerState.isFocused),
+        "data-disabled": domQuery.dataAttr(disabled),
         style: {
           touchAction: "none",
           userSelect: "none",
@@ -259,7 +145,7 @@ function connect(state, send, normalize) {
         onKeyDown(event) {
           if (disabled)
             return;
-          const moveStep = (0, import_dom_event.getEventStep)(event) * step;
+          const moveStep = domEvent.getEventStep(event) * step;
           const keyMap = {
             Enter() {
               send("ENTER");
@@ -283,7 +169,7 @@ function connect(state, send, normalize) {
               send("END");
             }
           };
-          const key = (0, import_dom_event.getEventKey)(event, state.context);
+          const key = domEvent.getEventKey(event, state.context);
           const exec = keyMap[key];
           if (exec) {
             exec(event);
@@ -295,7 +181,5 @@ function connect(state, send, normalize) {
   };
   return api;
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  connect
-});
+
+exports.connect = connect;

package/dist/splitter.connect.mjs

@@ -1,9 +1,181 @@
-import {
-  connect
-} from "./chunk-53T2VZ2R.mjs";
-import "./chunk-HPRMFGOY.mjs";
-import "./chunk-3GDOPT5W.mjs";
-import "./chunk-MV44GBQY.mjs";
-export {
-  connect
-};
+import { getEventStep, getEventKey } from '@zag-js/dom-event';
+import { dataAttr } from '@zag-js/dom-query';
+import { parts } from './splitter.anatomy.mjs';
+import { dom } from './splitter.dom.mjs';
+import { getHandleBounds } from './splitter.utils.mjs';
+
+function connect(state, send, normalize) {
+  const isHorizontal = state.context.isHorizontal;
+  const isFocused = state.hasTag("focus");
+  const isDragging = state.matches("dragging");
+  const panels = state.context.panels;
+  const api = {
+    /**
+     * Whether the splitter is focused.
+     */
+    isFocused,
+    /**
+     * Whether the splitter is being dragged.
+     */
+    isDragging,
+    /**
+     *  The bounds of the currently dragged splitter handle.
+     */
+    bounds: getHandleBounds(state.context),
+    /**
+     * Function to set a panel to its minimum size.
+     */
+    setToMinSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.minSize, src: "setToMinSize" });
+    },
+    /**
+     * Function to set a panel to its maximum size.
+     */
+    setToMaxSize(id) {
+      const panel = panels.find((panel2) => panel2.id === id);
+      send({ type: "SET_PANEL_SIZE", id, size: panel?.maxSize, src: "setToMaxSize" });
+    },
+    /**
+     * Function to set the size of a panel.
+     */
+    setSize(id, size) {
+      send({ type: "SET_PANEL_SIZE", id, size });
+    },
+    /**
+     * Returns the state details for a resize trigger.
+     */
+    getResizeTriggerState(props) {
+      const { id, disabled } = props;
+      const ids = id.split(":");
+      const panelIds = ids.map((id2) => dom.getPanelId(state.context, id2));
+      const panels2 = getHandleBounds(state.context, id);
+      return {
+        isDisabled: !!disabled,
+        isFocused: state.context.activeResizeId === id && isFocused,
+        panelIds,
+        min: panels2?.min,
+        max: panels2?.max,
+        value: 0
+      };
+    },
+    rootProps: normalize.element({
+      ...parts.root.attrs,
+      "data-orientation": state.context.orientation,
+      id: dom.getRootId(state.context),
+      dir: state.context.dir,
+      style: {
+        display: "flex",
+        flexDirection: isHorizontal ? "row" : "column",
+        height: "100%",
+        width: "100%",
+        overflow: "hidden"
+      }
+    }),
+    getPanelProps(props) {
+      const { id } = props;
+      return normalize.element({
+        ...parts.panel.attrs,
+        dir: state.context.dir,
+        id: dom.getPanelId(state.context, id),
+        "data-ownedby": dom.getRootId(state.context),
+        style: dom.getPanelStyle(state.context, id)
+      });
+    },
+    getResizeTriggerProps(props) {
+      const { id, disabled, step = 1 } = props;
+      const triggerState = api.getResizeTriggerState(props);
+      return normalize.element({
+        ...parts.resizeTrigger.attrs,
+        dir: state.context.dir,
+        id: dom.getResizeTriggerId(state.context, id),
+        role: "separator",
+        "data-ownedby": dom.getRootId(state.context),
+        tabIndex: disabled ? void 0 : 0,
+        "aria-valuenow": triggerState.value,
+        "aria-valuemin": triggerState.min,
+        "aria-valuemax": triggerState.max,
+        "data-orientation": state.context.orientation,
+        "aria-orientation": state.context.orientation,
+        "aria-controls": triggerState.panelIds.join(" "),
+        "data-focus": dataAttr(triggerState.isFocused),
+        "data-disabled": dataAttr(disabled),
+        style: {
+          touchAction: "none",
+          userSelect: "none",
+          flex: "0 0 auto",
+          pointerEvents: isDragging && !triggerState.isFocused ? "none" : void 0,
+          cursor: isHorizontal ? "col-resize" : "row-resize",
+          [isHorizontal ? "minHeight" : "minWidth"]: "0"
+        },
+        onPointerDown(event) {
+          if (disabled) {
+            event.preventDefault();
+            return;
+          }
+          send({ type: "POINTER_DOWN", id });
+          event.preventDefault();
+          event.stopPropagation();
+        },
+        onPointerOver() {
+          if (disabled)
+            return;
+          send({ type: "POINTER_OVER", id });
+        },
+        onPointerLeave() {
+          if (disabled)
+            return;
+          send({ type: "POINTER_LEAVE", id });
+        },
+        onBlur() {
+          send("BLUR");
+        },
+        onFocus() {
+          send({ type: "FOCUS", id });
+        },
+        onDoubleClick() {
+          if (disabled)
+            return;
+          send({ type: "DOUBLE_CLICK", id });
+        },
+        onKeyDown(event) {
+          if (disabled)
+            return;
+          const moveStep = getEventStep(event) * step;
+          const keyMap = {
+            Enter() {
+              send("ENTER");
+            },
+            ArrowUp() {
+              send({ type: "ARROW_UP", step: moveStep });
+            },
+            ArrowDown() {
+              send({ type: "ARROW_DOWN", step: moveStep });
+            },
+            ArrowLeft() {
+              send({ type: "ARROW_LEFT", step: moveStep });
+            },
+            ArrowRight() {
+              send({ type: "ARROW_RIGHT", step: moveStep });
+            },
+            Home() {
+              send("HOME");
+            },
+            End() {
+              send("END");
+            }
+          };
+          const key = getEventKey(event, state.context);
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
+          }
+        }
+      });
+    }
+  };
+  return api;
+}
+
+export { connect };

package/dist/splitter.dom.d.ts

@@ -1,42 +1,38 @@
-import { JSX } from '@zag-js/types';
-import { MachineContext, PanelId } from './splitter.types.js';
-import '@zag-js/core';
-
-declare const dom: {
+import type { JSX } from "@zag-js/types";
+import type { MachineContext as Ctx, PanelId } from "./splitter.types";
+export declare const dom: {
     getRootNode: (ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
-    }) => Document | ShadowRoot;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
+    }) => ShadowRoot | Document;
     getDoc: (ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }) => Document;
     getWin: (ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }) => Window & typeof globalThis;
     getActiveElement: (ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }) => HTMLElement | null;
     getById: <T extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }, id: string) => T | null;
     queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
-        getRootNode?: (() => Document | Node | ShadowRoot) | undefined;
+        getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
     }, id: string) => T_1;
 } & {
-    getRootId: (ctx: MachineContext) => string;
-    getResizeTriggerId: (ctx: MachineContext, id: string) => string;
-    getToggleTriggerId: (ctx: MachineContext) => string;
-    getLabelId: (ctx: MachineContext) => string | ((id: string) => string);
-    getPanelId: (ctx: MachineContext, id: string | number) => string;
-    globalCursorId: (ctx: MachineContext) => string;
-    getRootEl: (ctx: MachineContext) => HTMLElement;
-    getResizeTriggerEl: (ctx: MachineContext, id: string) => HTMLElement | null;
-    getPanelEl: (ctx: MachineContext, id: string | number) => HTMLElement | null;
-    getCursor(ctx: MachineContext): (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
-    getPanelStyle(ctx: MachineContext, id: PanelId): JSX.CSSProperties;
-    getActiveHandleEl(ctx: MachineContext): HTMLElement | null | undefined;
-    getResizeTriggerEls(ctx: MachineContext): HTMLElement[];
-    setupGlobalCursor(ctx: MachineContext): void;
-    removeGlobalCursor(ctx: MachineContext): void;
+    getRootId: (ctx: Ctx) => string;
+    getResizeTriggerId: (ctx: Ctx, id: string) => string;
+    getToggleTriggerId: (ctx: Ctx) => string;
+    getLabelId: (ctx: Ctx) => string | ((id: string) => string);
+    getPanelId: (ctx: Ctx, id: string | number) => string;
+    globalCursorId: (ctx: Ctx) => string;
+    getRootEl: (ctx: Ctx) => HTMLElement;
+    getResizeTriggerEl: (ctx: Ctx, id: string) => HTMLElement | null;
+    getPanelEl: (ctx: Ctx, id: string | number) => HTMLElement | null;
+    getCursor(ctx: Ctx): (string & {}) | "col-resize" | "e-resize" | "n-resize" | "row-resize" | "s-resize" | "w-resize";
+    getPanelStyle(ctx: Ctx, id: PanelId): JSX.CSSProperties;
+    getActiveHandleEl(ctx: Ctx): HTMLElement | null | undefined;
+    getResizeTriggerEls(ctx: Ctx): HTMLElement[];
+    setupGlobalCursor(ctx: Ctx): void;
+    removeGlobalCursor(ctx: Ctx): void;
 };
-
-export { dom };