@zag-js/splitter 1.38.2 → 1.39.1

package/dist/utils/registry.d.mts

@@ -0,0 +1,64 @@
+import { Orientation, Point } from '@zag-js/types';
+
+interface ResizeHandleData {
+    id: string;
+    element: HTMLElement;
+    orientation: Orientation;
+    onActivate: (point: Point) => void;
+    onDeactivate: VoidFunction;
+}
+interface HitAreaMargins {
+    /**
+     * The margin for coarse pointers (touch, pen)
+     * @default 15
+     */
+    coarse?: number;
+    /**
+     * The margin for fine pointers (mouse)
+     * @default 5
+     */
+    fine?: number;
+}
+interface SplitterRegistryOptions {
+    /**
+     * The nonce for the injected cursor stylesheet (for CSP compliance).
+     */
+    nonce?: string;
+    /**
+     * The hit area margins for resize handles.
+     * Larger margins make it easier to grab handles, especially on touch devices.
+     */
+    hitAreaMargins?: HitAreaMargins;
+}
+declare class SplitterRegistry {
+    private handles;
+    private state;
+    private listenerAttached;
+    private options;
+    constructor(options?: SplitterRegistryOptions);
+    register(data: ResizeHandleData): VoidFunction;
+    private attachGlobalListeners;
+    private detachGlobalListeners;
+    private getPointerType;
+    private get doc();
+    /**
+     * Fast hit-test: only checks pointer proximity to handles (no stacking order).
+     * Used for pointermove cursor feedback.
+     */
+    private findHitHandles;
+    /**
+     * Full intersection check: hit-test + stacking order verification.
+     * Used for pointerdown activation where correctness matters.
+     */
+    private findIntersectingHandles;
+    private handlePointerMove;
+    private handlePointerDown;
+    private handlePointerUp;
+    private updateCursor;
+    private globalCursorId;
+    private setGlobalCursor;
+    private clearGlobalCursor;
+}
+declare const registry: (opts?: SplitterRegistryOptions) => SplitterRegistry;
+
+export { type HitAreaMargins, type ResizeHandleData, SplitterRegistry, type SplitterRegistryOptions, registry };

package/dist/utils/registry.d.ts

@@ -0,0 +1,64 @@
+import { Orientation, Point } from '@zag-js/types';
+
+interface ResizeHandleData {
+    id: string;
+    element: HTMLElement;
+    orientation: Orientation;
+    onActivate: (point: Point) => void;
+    onDeactivate: VoidFunction;
+}
+interface HitAreaMargins {
+    /**
+     * The margin for coarse pointers (touch, pen)
+     * @default 15
+     */
+    coarse?: number;
+    /**
+     * The margin for fine pointers (mouse)
+     * @default 5
+     */
+    fine?: number;
+}
+interface SplitterRegistryOptions {
+    /**
+     * The nonce for the injected cursor stylesheet (for CSP compliance).
+     */
+    nonce?: string;
+    /**
+     * The hit area margins for resize handles.
+     * Larger margins make it easier to grab handles, especially on touch devices.
+     */
+    hitAreaMargins?: HitAreaMargins;
+}
+declare class SplitterRegistry {
+    private handles;
+    private state;
+    private listenerAttached;
+    private options;
+    constructor(options?: SplitterRegistryOptions);
+    register(data: ResizeHandleData): VoidFunction;
+    private attachGlobalListeners;
+    private detachGlobalListeners;
+    private getPointerType;
+    private get doc();
+    /**
+     * Fast hit-test: only checks pointer proximity to handles (no stacking order).
+     * Used for pointermove cursor feedback.
+     */
+    private findHitHandles;
+    /**
+     * Full intersection check: hit-test + stacking order verification.
+     * Used for pointerdown activation where correctness matters.
+     */
+    private findIntersectingHandles;
+    private handlePointerMove;
+    private handlePointerDown;
+    private handlePointerUp;
+    private updateCursor;
+    private globalCursorId;
+    private setGlobalCursor;
+    private clearGlobalCursor;
+}
+declare const registry: (opts?: SplitterRegistryOptions) => SplitterRegistry;
+
+export { type HitAreaMargins, type ResizeHandleData, SplitterRegistry, type SplitterRegistryOptions, registry };

package/dist/utils/registry.js

@@ -0,0 +1,206 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+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);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/utils/registry.ts
+var registry_exports = {};
+__export(registry_exports, {
+  SplitterRegistry: () => SplitterRegistry,
+  registry: () => registry
+});
+module.exports = __toCommonJS(registry_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_intersects = require("./intersects.js");
+var import_stacking_order = require("./stacking-order.js");
+var SplitterRegistry = class {
+  constructor(options = {}) {
+    __publicField(this, "handles", /* @__PURE__ */ new Map());
+    __publicField(this, "state", {
+      activeHandleIds: /* @__PURE__ */ new Set(),
+      isPointerDown: false
+    });
+    __publicField(this, "listenerAttached", false);
+    __publicField(this, "options");
+    __publicField(this, "handlePointerMove", (event) => {
+      if (this.state.isPointerDown) return;
+      const pointerType = this.getPointerType(event);
+      const intersecting = this.findHitHandles(event.clientX, event.clientY, pointerType);
+      const newActiveIds = new Set(intersecting.map((h) => h.id));
+      const changed = newActiveIds.size !== this.state.activeHandleIds.size || [...newActiveIds].some((id) => !this.state.activeHandleIds.has(id));
+      if (changed) {
+        this.state.activeHandleIds = newActiveIds;
+        this.updateCursor(intersecting);
+      }
+    });
+    __publicField(this, "handlePointerDown", (event) => {
+      const pointerType = this.getPointerType(event);
+      const intersecting = this.findIntersectingHandles(event.clientX, event.clientY, pointerType, event.target);
+      if (intersecting.length > 0) {
+        this.state.isPointerDown = true;
+        this.state.activeHandleIds = new Set(intersecting.map((h) => h.id));
+        const point = { x: event.clientX, y: event.clientY };
+        intersecting.forEach((handle) => {
+          handle.onActivate(point);
+        });
+        this.updateCursor(intersecting);
+      }
+    });
+    __publicField(this, "handlePointerUp", (_event) => {
+      if (this.state.isPointerDown) {
+        this.state.isPointerDown = false;
+        this.handles.forEach((handle) => {
+          if (this.state.activeHandleIds.has(handle.id)) {
+            handle.onDeactivate();
+          }
+        });
+        this.state.activeHandleIds.clear();
+        this.clearGlobalCursor();
+      }
+    });
+    __publicField(this, "globalCursorId", "splitter-registry-cursor");
+    this.options = {
+      nonce: options.nonce ?? "",
+      hitAreaMargins: {
+        coarse: options.hitAreaMargins?.coarse ?? 15,
+        fine: options.hitAreaMargins?.fine ?? 5
+      }
+    };
+  }
+  register(data) {
+    this.handles.set(data.id, data);
+    this.attachGlobalListeners();
+    return () => {
+      this.handles.delete(data.id);
+      this.state.activeHandleIds.delete(data.id);
+      if (this.handles.size === 0) {
+        this.detachGlobalListeners();
+      }
+    };
+  }
+  attachGlobalListeners() {
+    if (this.listenerAttached) return;
+    this.doc.addEventListener("pointermove", this.handlePointerMove, true);
+    this.doc.addEventListener("pointerdown", this.handlePointerDown, true);
+    this.doc.addEventListener("pointerup", this.handlePointerUp, true);
+    this.listenerAttached = true;
+  }
+  detachGlobalListeners() {
+    if (!this.listenerAttached) return;
+    this.doc.removeEventListener("pointermove", this.handlePointerMove, true);
+    this.doc.removeEventListener("pointerdown", this.handlePointerDown, true);
+    this.doc.removeEventListener("pointerup", this.handlePointerUp, true);
+    this.listenerAttached = false;
+  }
+  getPointerType(event) {
+    return event.pointerType === "touch" || event.pointerType === "pen" ? "coarse" : "fine";
+  }
+  get doc() {
+    const firstHandle = this.handles.values().next().value;
+    return (0, import_dom_query.getDocument)(firstHandle?.element);
+  }
+  /**
+   * Fast hit-test: only checks pointer proximity to handles (no stacking order).
+   * Used for pointermove cursor feedback.
+   */
+  findHitHandles(x, y, pointerType) {
+    const intersecting = [];
+    const margin = this.options.hitAreaMargins[pointerType];
+    this.handles.forEach((handle) => {
+      const rect = handle.element.getBoundingClientRect();
+      const hit = x >= rect.left - margin && x <= rect.right + margin && y >= rect.top - margin && y <= rect.bottom + margin;
+      if (hit) intersecting.push(handle);
+    });
+    return intersecting;
+  }
+  /**
+   * Full intersection check: hit-test + stacking order verification.
+   * Used for pointerdown activation where correctness matters.
+   */
+  findIntersectingHandles(x, y, pointerType, eventTarget) {
+    const hits = this.findHitHandles(x, y, pointerType);
+    const targetElement = eventTarget instanceof HTMLElement || eventTarget instanceof SVGElement ? eventTarget : null;
+    if (!targetElement || !(0, import_dom_query.contains)(this.doc, targetElement)) return hits;
+    return hits.filter((handle) => {
+      const dragHandleElement = handle.element;
+      if (targetElement === dragHandleElement || (0, import_dom_query.contains)(dragHandleElement, targetElement) || (0, import_dom_query.contains)(targetElement, dragHandleElement)) {
+        return true;
+      }
+      try {
+        if ((0, import_stacking_order.compareStackingOrder)(targetElement, dragHandleElement) > 0) {
+          const dragHandleRect = dragHandleElement.getBoundingClientRect();
+          let currentElement = targetElement;
+          while (currentElement) {
+            if (currentElement.contains(dragHandleElement)) break;
+            const currentRect = currentElement.getBoundingClientRect();
+            if ((0, import_intersects.intersects)((0, import_intersects.toRect)(currentRect), (0, import_intersects.toRect)(dragHandleRect), true)) {
+              return false;
+            }
+            currentElement = (0, import_dom_query.getParentElement)(currentElement);
+          }
+        }
+      } catch {
+      }
+      return true;
+    });
+  }
+  updateCursor(intersecting) {
+    if (intersecting.length === 0) {
+      this.clearGlobalCursor();
+      return;
+    }
+    const hasHorizontal = intersecting.some((h) => h.orientation === "horizontal");
+    const hasVertical = intersecting.some((h) => h.orientation === "vertical");
+    let cursor = "default";
+    if (hasHorizontal && hasVertical) {
+      cursor = "move";
+    } else if (hasHorizontal) {
+      cursor = "ew-resize";
+    } else if (hasVertical) {
+      cursor = "ns-resize";
+    }
+    this.setGlobalCursor(cursor);
+  }
+  setGlobalCursor(cursor) {
+    const doc = this.doc;
+    let styleEl = doc.getElementById(this.globalCursorId);
+    const textContent = `* { cursor: ${cursor} !important; }`;
+    if (styleEl) {
+      styleEl.textContent = textContent;
+    } else {
+      styleEl = doc.createElement("style");
+      styleEl.id = this.globalCursorId;
+      styleEl.textContent = textContent;
+      if (this.options.nonce) {
+        styleEl.nonce = this.options.nonce;
+      }
+      doc.head.appendChild(styleEl);
+    }
+  }
+  clearGlobalCursor() {
+    const styleEl = this.doc.getElementById(this.globalCursorId);
+    styleEl?.remove();
+  }
+};
+var registry = (opts = {}) => new SplitterRegistry(opts);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SplitterRegistry,
+  registry
+});

package/dist/utils/registry.mjs

@@ -0,0 +1,182 @@
+import {
+  __publicField
+} from "../chunk-QZ7TP4HQ.mjs";
+
+// src/utils/registry.ts
+import { contains, getDocument, getParentElement } from "@zag-js/dom-query";
+import { intersects, toRect } from "./intersects.mjs";
+import { compareStackingOrder } from "./stacking-order.mjs";
+var SplitterRegistry = class {
+  constructor(options = {}) {
+    __publicField(this, "handles", /* @__PURE__ */ new Map());
+    __publicField(this, "state", {
+      activeHandleIds: /* @__PURE__ */ new Set(),
+      isPointerDown: false
+    });
+    __publicField(this, "listenerAttached", false);
+    __publicField(this, "options");
+    __publicField(this, "handlePointerMove", (event) => {
+      if (this.state.isPointerDown) return;
+      const pointerType = this.getPointerType(event);
+      const intersecting = this.findHitHandles(event.clientX, event.clientY, pointerType);
+      const newActiveIds = new Set(intersecting.map((h) => h.id));
+      const changed = newActiveIds.size !== this.state.activeHandleIds.size || [...newActiveIds].some((id) => !this.state.activeHandleIds.has(id));
+      if (changed) {
+        this.state.activeHandleIds = newActiveIds;
+        this.updateCursor(intersecting);
+      }
+    });
+    __publicField(this, "handlePointerDown", (event) => {
+      const pointerType = this.getPointerType(event);
+      const intersecting = this.findIntersectingHandles(event.clientX, event.clientY, pointerType, event.target);
+      if (intersecting.length > 0) {
+        this.state.isPointerDown = true;
+        this.state.activeHandleIds = new Set(intersecting.map((h) => h.id));
+        const point = { x: event.clientX, y: event.clientY };
+        intersecting.forEach((handle) => {
+          handle.onActivate(point);
+        });
+        this.updateCursor(intersecting);
+      }
+    });
+    __publicField(this, "handlePointerUp", (_event) => {
+      if (this.state.isPointerDown) {
+        this.state.isPointerDown = false;
+        this.handles.forEach((handle) => {
+          if (this.state.activeHandleIds.has(handle.id)) {
+            handle.onDeactivate();
+          }
+        });
+        this.state.activeHandleIds.clear();
+        this.clearGlobalCursor();
+      }
+    });
+    __publicField(this, "globalCursorId", "splitter-registry-cursor");
+    this.options = {
+      nonce: options.nonce ?? "",
+      hitAreaMargins: {
+        coarse: options.hitAreaMargins?.coarse ?? 15,
+        fine: options.hitAreaMargins?.fine ?? 5
+      }
+    };
+  }
+  register(data) {
+    this.handles.set(data.id, data);
+    this.attachGlobalListeners();
+    return () => {
+      this.handles.delete(data.id);
+      this.state.activeHandleIds.delete(data.id);
+      if (this.handles.size === 0) {
+        this.detachGlobalListeners();
+      }
+    };
+  }
+  attachGlobalListeners() {
+    if (this.listenerAttached) return;
+    this.doc.addEventListener("pointermove", this.handlePointerMove, true);
+    this.doc.addEventListener("pointerdown", this.handlePointerDown, true);
+    this.doc.addEventListener("pointerup", this.handlePointerUp, true);
+    this.listenerAttached = true;
+  }
+  detachGlobalListeners() {
+    if (!this.listenerAttached) return;
+    this.doc.removeEventListener("pointermove", this.handlePointerMove, true);
+    this.doc.removeEventListener("pointerdown", this.handlePointerDown, true);
+    this.doc.removeEventListener("pointerup", this.handlePointerUp, true);
+    this.listenerAttached = false;
+  }
+  getPointerType(event) {
+    return event.pointerType === "touch" || event.pointerType === "pen" ? "coarse" : "fine";
+  }
+  get doc() {
+    const firstHandle = this.handles.values().next().value;
+    return getDocument(firstHandle?.element);
+  }
+  /**
+   * Fast hit-test: only checks pointer proximity to handles (no stacking order).
+   * Used for pointermove cursor feedback.
+   */
+  findHitHandles(x, y, pointerType) {
+    const intersecting = [];
+    const margin = this.options.hitAreaMargins[pointerType];
+    this.handles.forEach((handle) => {
+      const rect = handle.element.getBoundingClientRect();
+      const hit = x >= rect.left - margin && x <= rect.right + margin && y >= rect.top - margin && y <= rect.bottom + margin;
+      if (hit) intersecting.push(handle);
+    });
+    return intersecting;
+  }
+  /**
+   * Full intersection check: hit-test + stacking order verification.
+   * Used for pointerdown activation where correctness matters.
+   */
+  findIntersectingHandles(x, y, pointerType, eventTarget) {
+    const hits = this.findHitHandles(x, y, pointerType);
+    const targetElement = eventTarget instanceof HTMLElement || eventTarget instanceof SVGElement ? eventTarget : null;
+    if (!targetElement || !contains(this.doc, targetElement)) return hits;
+    return hits.filter((handle) => {
+      const dragHandleElement = handle.element;
+      if (targetElement === dragHandleElement || contains(dragHandleElement, targetElement) || contains(targetElement, dragHandleElement)) {
+        return true;
+      }
+      try {
+        if (compareStackingOrder(targetElement, dragHandleElement) > 0) {
+          const dragHandleRect = dragHandleElement.getBoundingClientRect();
+          let currentElement = targetElement;
+          while (currentElement) {
+            if (currentElement.contains(dragHandleElement)) break;
+            const currentRect = currentElement.getBoundingClientRect();
+            if (intersects(toRect(currentRect), toRect(dragHandleRect), true)) {
+              return false;
+            }
+            currentElement = getParentElement(currentElement);
+          }
+        }
+      } catch {
+      }
+      return true;
+    });
+  }
+  updateCursor(intersecting) {
+    if (intersecting.length === 0) {
+      this.clearGlobalCursor();
+      return;
+    }
+    const hasHorizontal = intersecting.some((h) => h.orientation === "horizontal");
+    const hasVertical = intersecting.some((h) => h.orientation === "vertical");
+    let cursor = "default";
+    if (hasHorizontal && hasVertical) {
+      cursor = "move";
+    } else if (hasHorizontal) {
+      cursor = "ew-resize";
+    } else if (hasVertical) {
+      cursor = "ns-resize";
+    }
+    this.setGlobalCursor(cursor);
+  }
+  setGlobalCursor(cursor) {
+    const doc = this.doc;
+    let styleEl = doc.getElementById(this.globalCursorId);
+    const textContent = `* { cursor: ${cursor} !important; }`;
+    if (styleEl) {
+      styleEl.textContent = textContent;
+    } else {
+      styleEl = doc.createElement("style");
+      styleEl.id = this.globalCursorId;
+      styleEl.textContent = textContent;
+      if (this.options.nonce) {
+        styleEl.nonce = this.options.nonce;
+      }
+      doc.head.appendChild(styleEl);
+    }
+  }
+  clearGlobalCursor() {
+    const styleEl = this.doc.getElementById(this.globalCursorId);
+    styleEl?.remove();
+  }
+};
+var registry = (opts = {}) => new SplitterRegistry(opts);
+export {
+  SplitterRegistry,
+  registry
+};

package/dist/utils/resize-by-delta.d.mts

@@ -1,6 +1,7 @@
 import { PanelData } from '../splitter.types.mjs';
 import '@zag-js/core';
 import '@zag-js/types';
+import './registry.mjs';
 
 /**
  * This code was modified from react-resizable-panels by Brian Vaughn

package/dist/utils/resize-by-delta.d.ts

@@ -1,6 +1,7 @@
 import { PanelData } from '../splitter.types.js';
 import '@zag-js/core';
 import '@zag-js/types';
+import './registry.js';
 
 /**
  * This code was modified from react-resizable-panels by Brian Vaughn

package/dist/utils/resize-by-delta.mjs

@@ -1,3 +1,5 @@
+import "../chunk-QZ7TP4HQ.mjs";
+
 // src/utils/resize-by-delta.ts
 import { ensure } from "@zag-js/utils";
 import { fuzzyCompareNumbers, fuzzySizeEqual, fuzzyNumbersEqual } from "./fuzzy.mjs";

package/dist/utils/resize-panel.d.mts

@@ -1,6 +1,7 @@
 import { PanelData } from '../splitter.types.mjs';
 import '@zag-js/core';
 import '@zag-js/types';
+import './registry.mjs';
 
 /**
  * This code was modified from react-resizable-panels by Brian Vaughn

package/dist/utils/resize-panel.d.ts

@@ -1,6 +1,7 @@
 import { PanelData } from '../splitter.types.js';
 import '@zag-js/core';
 import '@zag-js/types';
+import './registry.js';
 
 /**
  * This code was modified from react-resizable-panels by Brian Vaughn

package/dist/utils/resize-panel.mjs

@@ -1,3 +1,5 @@
+import "../chunk-QZ7TP4HQ.mjs";
+
 // src/utils/resize-panel.ts
 import { ensure } from "@zag-js/utils";
 import { fuzzyCompareNumbers, PRECISION } from "./fuzzy.mjs";

package/dist/utils/stacking-order.d.mts

@@ -0,0 +1,9 @@
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param a First element
+ * @param b Second element
+ */
+declare function compareStackingOrder(a: Element, b: Element): number;
+
+export { compareStackingOrder };

package/dist/utils/stacking-order.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param a First element
+ * @param b Second element
+ */
+declare function compareStackingOrder(a: Element, b: Element): number;
+
+export { compareStackingOrder };

package/dist/utils/stacking-order.js

@@ -0,0 +1,99 @@
+"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/utils/stacking-order.ts
+var stacking_order_exports = {};
+__export(stacking_order_exports, {
+  compareStackingOrder: () => compareStackingOrder
+});
+module.exports = __toCommonJS(stacking_order_exports);
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+function compareStackingOrder(a, b) {
+  if (a === b) throw new Error("Cannot compare node with itself");
+  const ancestors = {
+    a: (0, import_dom_query.getAncestorElements)(a),
+    b: (0, import_dom_query.getAncestorElements)(b)
+  };
+  let commonAncestor = null;
+  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+    const currentA = ancestors.a.pop();
+    ancestors.b.pop();
+    commonAncestor = currentA;
+  }
+  (0, import_utils.ensure)(
+    commonAncestor,
+    () => "[stacking-order] Stacking order can only be calculated for elements with a common ancestor"
+  );
+  const zIndexes = {
+    a: getZIndex(findStackingContext(ancestors.a)),
+    b: getZIndex(findStackingContext(ancestors.b))
+  };
+  if (zIndexes.a === zIndexes.b) {
+    const children = commonAncestor.childNodes;
+    const furthestAncestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1)
+    };
+    let i = children.length;
+    while (i--) {
+      const child = children[i];
+      if (child === furthestAncestors.a) return 1;
+      if (child === furthestAncestors.b) return -1;
+    }
+  }
+  return Math.sign(zIndexes.a - zIndexes.b);
+}
+var STACKING_PROPS_REGEX = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+function isFlexItem(node) {
+  const parent = (0, import_dom_query.getParentElement)(node);
+  const display = (0, import_dom_query.getComputedStyle)(parent ?? node).display;
+  return display === "flex" || display === "inline-flex";
+}
+function createsStackingContext(node) {
+  const style = (0, import_dom_query.getComputedStyle)(node);
+  if (style.position === "fixed") return true;
+  if (style.zIndex !== "auto" && (style.position !== "static" || isFlexItem(node))) return true;
+  if (+style.opacity < 1) return true;
+  if ((0, import_utils.hasProp)(style, "transform") && style.transform !== "none") return true;
+  if ((0, import_utils.hasProp)(style, "webkitTransform") && style.webkitTransform !== "none") return true;
+  if ((0, import_utils.hasProp)(style, "mixBlendMode") && style.mixBlendMode !== "normal") return true;
+  if ((0, import_utils.hasProp)(style, "filter") && style.filter !== "none") return true;
+  if ((0, import_utils.hasProp)(style, "webkitFilter") && style.webkitFilter !== "none") return true;
+  if ((0, import_utils.hasProp)(style, "isolation") && style.isolation === "isolate") return true;
+  if (STACKING_PROPS_REGEX.test(style.willChange)) return true;
+  if (style.webkitOverflowScrolling === "touch") return true;
+  return false;
+}
+function findStackingContext(nodes) {
+  let i = nodes.length;
+  while (i--) {
+    const node = nodes[i];
+    (0, import_utils.ensure)(node, () => "[stacking-order] missing node in findStackingContext");
+    if (createsStackingContext(node)) return node;
+  }
+  return null;
+}
+var getZIndex = (node) => {
+  return node && Number((0, import_dom_query.getComputedStyle)(node).zIndex) || 0;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  compareStackingOrder
+});