react-resizable-panels 3.0.6-alpha.0 → 4.0.0-alpha.0

package/dist/react-resizable-panels.js

@@ -1,2488 +1,1167 @@
-import * as React from 'react';
-import { createContext, useLayoutEffect, useRef, forwardRef, createElement, useContext, useImperativeHandle, useState, useCallback, useEffect, useMemo } from 'react';
-
-const isBrowser = typeof window !== "undefined";
-
-// The "contextmenu" event is not supported as a PointerEvent in all browsers yet, so MouseEvent still need to be handled
-
-const PanelGroupContext = createContext(null);
-PanelGroupContext.displayName = "PanelGroupContext";
-
-const DATA_ATTRIBUTES = {
-  group: "data-panel-group",
-  groupDirection: "data-panel-group-direction",
-  groupId: "data-panel-group-id",
-  panel: "data-panel",
-  panelCollapsible: "data-panel-collapsible",
-  panelId: "data-panel-id",
-  panelSize: "data-panel-size",
-  resizeHandle: "data-resize-handle",
-  resizeHandleActive: "data-resize-handle-active",
-  resizeHandleEnabled: "data-panel-resize-handle-enabled",
-  resizeHandleId: "data-panel-resize-handle-id",
-  resizeHandleState: "data-resize-handle-state"
-};
-const PRECISION = 10;
-
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : () => {};
-
-const useId = React["useId".toString()];
-const wrappedUseId = typeof useId === "function" ? useId : () => null;
-let counter = 0;
-function useUniqueId(idFromParams = null) {
-  const idFromUseId = wrappedUseId();
-  const idRef = useRef(idFromParams || idFromUseId || null);
-  if (idRef.current === null) {
-    idRef.current = "" + counter++;
+"use client";
+import { jsx as F } from "react/jsx-runtime";
+import { useId as Re, useLayoutEffect as Pe, useEffect as Ce, useRef as I, useCallback as ce, createContext as Ee, useImperativeHandle as ue, useState as M, useMemo as Me, useContext as Ge } from "react";
+function Ie(e, t) {
+  const n = getComputedStyle(e), o = parseFloat(n.fontSize);
+  return t * o;
+}
+function Oe(e, t) {
+  const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
+  return t * o;
+}
+function ke(e) {
+  return e / 100 * window.innerHeight;
+}
+function Ae(e) {
+  return e / 100 * window.innerWidth;
+}
+function Ne(e) {
+  switch (typeof e) {
+    case "number":
+      return [e, "px"];
+    case "string": {
+      const t = parseFloat(e);
+      return e.endsWith("%") ? [t, "%"] : e.endsWith("px") ? [t, "px"] : e.endsWith("rem") ? [t, "rem"] : e.endsWith("em") ? [t, "em"] : e.endsWith("vh") ? [t, "vh"] : e.endsWith("vw") ? [t, "vw"] : [t, "%"];
+    }
   }
-  return idFromParams !== null && idFromParams !== void 0 ? idFromParams : idRef.current;
 }
-
-function PanelWithForwardedRef({
-  children,
-  className: classNameFromProps = "",
-  collapsedSize,
-  collapsible,
-  defaultSize,
-  forwardedRef,
-  id: idFromProps,
-  maxSize,
-  minSize,
-  onCollapse,
-  onExpand,
-  onResize,
-  order,
-  style: styleFromProps,
-  tagName: Type = "div",
-  ...rest
+function H({
+  groupSize: e,
+  panelElement: t,
+  styleProp: n
 }) {
-  const context = useContext(PanelGroupContext);
-  if (context === null) {
-    throw Error(`Panel components must be rendered within a PanelGroup container`);
-  }
-  const {
-    collapsePanel,
-    expandPanel,
-    getPanelSize,
-    getPanelStyle,
-    groupId,
-    isPanelCollapsed,
-    reevaluatePanelConstraints,
-    registerPanel,
-    resizePanel,
-    unregisterPanel
-  } = context;
-  const panelId = useUniqueId(idFromProps);
-  const panelDataRef = useRef({
-    callbacks: {
-      onCollapse,
-      onExpand,
-      onResize
-    },
-    constraints: {
-      collapsedSize,
-      collapsible,
-      defaultSize,
-      maxSize,
-      minSize
-    },
-    id: panelId,
-    idIsFromProps: idFromProps !== undefined,
-    order
-  });
-  useRef({
-    didLogMissingDefaultSizeWarning: false
-  });
-  useIsomorphicLayoutEffect(() => {
-    const {
-      callbacks,
-      constraints
-    } = panelDataRef.current;
-    const prevConstraints = {
-      ...constraints
-    };
-    panelDataRef.current.id = panelId;
-    panelDataRef.current.idIsFromProps = idFromProps !== undefined;
-    panelDataRef.current.order = order;
-    callbacks.onCollapse = onCollapse;
-    callbacks.onExpand = onExpand;
-    callbacks.onResize = onResize;
-    constraints.collapsedSize = collapsedSize;
-    constraints.collapsible = collapsible;
-    constraints.defaultSize = defaultSize;
-    constraints.maxSize = maxSize;
-    constraints.minSize = minSize;
-
-    // If constraints have changed, we should revisit panel sizes.
-    // This is uncommon but may happen if people are trying to implement pixel based constraints.
-    if (prevConstraints.collapsedSize !== constraints.collapsedSize || prevConstraints.collapsible !== constraints.collapsible || prevConstraints.maxSize !== constraints.maxSize || prevConstraints.minSize !== constraints.minSize) {
-      reevaluatePanelConstraints(panelDataRef.current, prevConstraints);
+  let o;
+  const [s, i] = Ne(n);
+  switch (i) {
+    case "%": {
+      o = s / 100 * e;
+      break;
     }
-  });
-  useIsomorphicLayoutEffect(() => {
-    const panelData = panelDataRef.current;
-    registerPanel(panelData);
-    return () => {
-      unregisterPanel(panelData);
-    };
-  }, [order, panelId, registerPanel, unregisterPanel]);
-  useImperativeHandle(forwardedRef, () => ({
-    collapse: () => {
-      collapsePanel(panelDataRef.current);
-    },
-    expand: minSize => {
-      expandPanel(panelDataRef.current, minSize);
-    },
-    getId() {
-      return panelId;
-    },
-    getSize() {
-      return getPanelSize(panelDataRef.current);
-    },
-    isCollapsed() {
-      return isPanelCollapsed(panelDataRef.current);
-    },
-    isExpanded() {
-      return !isPanelCollapsed(panelDataRef.current);
-    },
-    resize: size => {
-      resizePanel(panelDataRef.current, size);
+    case "px": {
+      o = s;
+      break;
     }
-  }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
-  const style = getPanelStyle(panelDataRef.current, defaultSize);
-  return createElement(Type, {
-    ...rest,
-    children,
-    className: classNameFromProps,
-    id: panelId,
-    style: {
-      ...style,
-      ...styleFromProps
-    },
-    // CSS selectors
-    [DATA_ATTRIBUTES.groupId]: groupId,
-    [DATA_ATTRIBUTES.panel]: "",
-    [DATA_ATTRIBUTES.panelCollapsible]: collapsible || undefined,
-    [DATA_ATTRIBUTES.panelId]: panelId,
-    [DATA_ATTRIBUTES.panelSize]: parseFloat("" + style.flexGrow).toFixed(1)
-  });
-}
-const Panel = forwardRef((props, ref) => createElement(PanelWithForwardedRef, {
-  ...props,
-  forwardedRef: ref
-}));
-PanelWithForwardedRef.displayName = "Panel";
-Panel.displayName = "forwardRef(Panel)";
-
-let nonce;
-function getNonce() {
-  return nonce;
-}
-function setNonce(value) {
-  nonce = value;
-}
-
-let currentCursorStyle = null;
-let enabled = true;
-let getCustomCursorStyleFunction = null;
-let prevRuleIndex = -1;
-let styleElement = null;
-function customizeGlobalCursorStyles(callback) {
-  getCustomCursorStyleFunction = callback;
-}
-function disableGlobalCursorStyles() {
-  enabled = false;
-}
-function enableGlobalCursorStyles() {
-  enabled = true;
-}
-function getCursorStyle(state, constraintFlags, isPointerDown) {
-  const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
-  const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
-  const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
-  const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
-  if (getCustomCursorStyleFunction) {
-    return getCustomCursorStyleFunction({
-      exceedsHorizontalMaximum: horizontalMax,
-      exceedsHorizontalMinimum: horizontalMin,
-      exceedsVerticalMaximum: verticalMax,
-      exceedsVerticalMinimum: verticalMin,
-      intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
-      intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
-      isPointerDown
-    });
-  }
-  if (constraintFlags) {
-    if (horizontalMin) {
-      if (verticalMin) {
-        return "se-resize";
-      } else if (verticalMax) {
-        return "ne-resize";
-      } else {
-        return "e-resize";
-      }
-    } else if (horizontalMax) {
-      if (verticalMin) {
-        return "sw-resize";
-      } else if (verticalMax) {
-        return "nw-resize";
-      } else {
-        return "w-resize";
-      }
-    } else if (verticalMin) {
-      return "s-resize";
-    } else if (verticalMax) {
-      return "n-resize";
+    case "rem": {
+      o = Oe(t, s);
+      break;
     }
-  }
-  switch (state) {
-    case "horizontal":
-      return "ew-resize";
-    case "intersection":
-      return "move";
-    case "vertical":
-      return "ns-resize";
-  }
-}
-function resetGlobalCursorStyle() {
-  if (styleElement !== null) {
-    document.head.removeChild(styleElement);
-    currentCursorStyle = null;
-    styleElement = null;
-    prevRuleIndex = -1;
-  }
-}
-function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
-  var _styleElement$sheet$i, _styleElement$sheet2;
-  if (!enabled) {
-    return;
-  }
-  const style = getCursorStyle(state, constraintFlags, isPointerDown);
-  if (currentCursorStyle === style) {
-    return;
-  }
-  currentCursorStyle = style;
-  if (styleElement === null) {
-    styleElement = document.createElement("style");
-    const nonce = getNonce();
-    if (nonce) {
-      styleElement.setAttribute("nonce", nonce);
+    case "em": {
+      o = Ie(t, s);
+      break;
+    }
+    case "vh": {
+      o = ke(s);
+      break;
+    }
+    case "vw": {
+      o = Ae(s);
+      break;
     }
-    document.head.appendChild(styleElement);
-  }
-  if (prevRuleIndex >= 0) {
-    var _styleElement$sheet;
-    (_styleElement$sheet = styleElement.sheet) === null || _styleElement$sheet === void 0 ? void 0 : _styleElement$sheet.removeRule(prevRuleIndex);
   }
-  prevRuleIndex = (_styleElement$sheet$i = (_styleElement$sheet2 = styleElement.sheet) === null || _styleElement$sheet2 === void 0 ? void 0 : _styleElement$sheet2.insertRule(`*{cursor: ${style} !important;}`)) !== null && _styleElement$sheet$i !== void 0 ? _styleElement$sheet$i : -1;
+  return o;
 }
-
-function isKeyDown(event) {
-  return event.type === "keydown";
+function L(e) {
+  return parseFloat(e.toFixed(3));
 }
-function isPointerEvent(event) {
-  return event.type.startsWith("pointer");
-}
-function isMouseEvent(event) {
-  return event.type.startsWith("mouse");
-}
-
-function getResizeEventCoordinates(event) {
-  if (isPointerEvent(event)) {
-    if (event.isPrimary) {
-      return {
-        x: event.clientX,
-        y: event.clientY
-      };
+function Z({
+  group: e
+}) {
+  const { direction: t, panels: n } = e;
+  return n.reduce((o, s) => (o += t === "horizontal" ? s.element.offsetWidth : s.element.offsetHeight, o), 0);
+}
+function ie(e) {
+  const { panels: t } = e, n = Z({ group: e });
+  return t.map((o) => {
+    const { element: s, panelConstraints: i } = o;
+    let a = 0;
+    if (i.collapsedSize) {
+      const u = H({
+        groupSize: n,
+        panelElement: s,
+        styleProp: i.collapsedSize
+      });
+      a = L(u / n * 100);
+    }
+    let r;
+    if (i.defaultSize) {
+      const u = H({
+        groupSize: n,
+        panelElement: s,
+        styleProp: i.defaultSize
+      });
+      r = L(u / n * 100);
+    }
+    let l = 0;
+    if (i.minSize) {
+      const u = H({
+        groupSize: n,
+        panelElement: s,
+        styleProp: i.minSize
+      });
+      l = L(u / n * 100);
+    }
+    let c = 100;
+    if (i.maxSize) {
+      const u = H({
+        groupSize: n,
+        panelElement: s,
+        styleProp: i.maxSize
+      });
+      c = L(u / n * 100);
     }
-  } else if (isMouseEvent(event)) {
     return {
-      x: event.clientX,
-      y: event.clientY
+      collapsedSize: a,
+      collapsible: i.collapsible === !0,
+      defaultSize: r,
+      minSize: l,
+      maxSize: c,
+      panelId: o.id
     };
-  }
-  return {
-    x: Infinity,
-    y: Infinity
-  };
+  });
 }
-
-function getInputType() {
-  if (typeof matchMedia === "function") {
-    return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
+class $e {
+  #e = {};
+  addListener(t, n) {
+    const o = this.#e[t];
+    return o === void 0 ? this.#e[t] = [n] : o.includes(n) || o.push(n), () => {
+      this.removeListener(t, n);
+    };
   }
-}
-
-function intersects(rectOne, rectTwo, strict) {
-  if (strict) {
-    return rectOne.x < rectTwo.x + rectTwo.width && rectOne.x + rectOne.width > rectTwo.x && rectOne.y < rectTwo.y + rectTwo.height && rectOne.y + rectOne.height > rectTwo.y;
-  } else {
-    return rectOne.x <= rectTwo.x + rectTwo.width && rectOne.x + rectOne.width >= rectTwo.x && rectOne.y <= rectTwo.y + rectTwo.height && rectOne.y + rectOne.height >= rectTwo.y;
+  emit(t, n) {
+    const o = this.#e[t];
+    if (o !== void 0)
+      if (o.length === 1)
+        o[0].call(null, n);
+      else {
+        let s = !1, i = null;
+        const a = Array.from(o);
+        for (let r = 0; r < a.length; r++) {
+          const l = a[r];
+          try {
+            l.call(null, n);
+          } catch (c) {
+            i === null && (s = !0, i = c);
+          }
+        }
+        if (s)
+          throw i;
+      }
   }
-}
-
-// Forked from NPM stacking-order@2.0.0
-
-/**
- * Determine which of two nodes appears in front of the other —
- * if `a` is in front, returns 1, otherwise returns -1
- * @param {HTMLElement | SVGElement} a
- * @param {HTMLElement | SVGElement} b
- */
-function compare(a, b) {
-  if (a === b) throw new Error("Cannot compare node with itself");
-  const ancestors = {
-    a: get_ancestors(a),
-    b: get_ancestors(b)
-  };
-  let common_ancestor;
-
-  // remove shared ancestors
-  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
-    a = ancestors.a.pop();
-    b = ancestors.b.pop();
-    common_ancestor = a;
+  removeAllListeners() {
+    this.#e = {};
   }
-  assert(common_ancestor, "Stacking order can only be calculated for elements with a common ancestor");
-  const z_indexes = {
-    a: get_z_index(find_stacking_context(ancestors.a)),
-    b: get_z_index(find_stacking_context(ancestors.b))
-  };
-  if (z_indexes.a === z_indexes.b) {
-    const children = common_ancestor.childNodes;
-    const furthest_ancestors = {
-      a: ancestors.a.at(-1),
-      b: ancestors.b.at(-1)
-    };
-    let i = children.length;
-    while (i--) {
-      const child = children[i];
-      if (child === furthest_ancestors.a) return 1;
-      if (child === furthest_ancestors.b) return -1;
+  removeListener(t, n) {
+    const o = this.#e[t];
+    if (o !== void 0) {
+      const s = o.indexOf(n);
+      s >= 0 && o.splice(s, 1);
     }
   }
-  return Math.sign(z_indexes.a - z_indexes.b);
-}
-const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
-
-/** @param {HTMLElement | SVGElement} node */
-function is_flex_item(node) {
-  var _get_parent;
-  // @ts-ignore
-  const display = getComputedStyle((_get_parent = get_parent(node)) !== null && _get_parent !== void 0 ? _get_parent : node).display;
-  return display === "flex" || display === "inline-flex";
-}
-
-/** @param {HTMLElement | SVGElement} node */
-function creates_stacking_context(node) {
-  const style = getComputedStyle(node);
-
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
-  if (style.position === "fixed") return true;
-  // Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
-  // if (
-  //   (style.zIndex !== "auto" && style.position !== "static") ||
-  //   is_flex_item(node)
-  // )
-  if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node))) return true;
-  if (+style.opacity < 1) return true;
-  if ("transform" in style && style.transform !== "none") return true;
-  if ("webkitTransform" in style && style.webkitTransform !== "none") return true;
-  if ("mixBlendMode" in style && style.mixBlendMode !== "normal") return true;
-  if ("filter" in style && style.filter !== "none") return true;
-  if ("webkitFilter" in style && style.webkitFilter !== "none") return true;
-  if ("isolation" in style && style.isolation === "isolate") return true;
-  if (props.test(style.willChange)) return true;
-  // @ts-expect-error
-  if (style.webkitOverflowScrolling === "touch") return true;
-  return false;
-}
-
-/** @param {(HTMLElement| SVGElement)[]} nodes */
-function find_stacking_context(nodes) {
-  let i = nodes.length;
-  while (i--) {
-    const node = nodes[i];
-    assert(node, "Missing node");
-    if (creates_stacking_context(node)) return node;
-  }
-  return null;
-}
-
-/** @param {HTMLElement | SVGElement} node */
-function get_z_index(node) {
-  return node && Number(getComputedStyle(node).zIndex) || 0;
 }
-
-/** @param {HTMLElement} node */
-function get_ancestors(node) {
-  const ancestors = [];
-  while (node) {
-    ancestors.push(node);
-    // @ts-ignore
-    node = get_parent(node);
+let C = {
+  cursorFlags: 0,
+  interactionState: {
+    state: "inactive"
+  },
+  mountedGroups: /* @__PURE__ */ new Map()
+};
+const _ = new $e();
+function O() {
+  return C;
+}
+function G(e) {
+  const t = typeof e == "function" ? e(C) : e;
+  return C === t || (C = {
+    ...C,
+    ...t
+  }, t.cursorFlags !== void 0 && _.emit("cursorFlagsChange", C.cursorFlags), t.interactionState !== void 0 && _.emit("interactionStateChange", C.interactionState), t.mountedGroups !== void 0 && _.emit("mountedGroupsChange", C.mountedGroups)), C;
+}
+const Te = (e) => e, K = () => {
+}, fe = 1, de = 2, pe = 4, he = 8, re = {
+  coarse: 10,
+  precise: 5
+};
+function _e(e) {
+  const { direction: t, element: n, panels: o, separators: s } = e, i = Array.from(n.children).filter((c) => c instanceof HTMLElement).sort((c, u) => {
+    const f = c.getBoundingClientRect(), p = u.getBoundingClientRect();
+    return t === "horizontal" ? f.left - p.left : f.top - p.top;
+  }), a = [];
+  let r, l;
+  for (const c of i) {
+    const u = o.find(
+      (f) => f.element === c
+    );
+    if (u) {
+      if (r) {
+        const f = r.element.getBoundingClientRect(), p = c.getBoundingClientRect();
+        a.push({
+          group: e,
+          panels: [r, u],
+          separator: l,
+          rect: t === "horizontal" ? new DOMRect(
+            f.right,
+            p.top,
+            p.left - f.right,
+            p.height
+          ) : new DOMRect(
+            p.left,
+            f.bottom,
+            p.width,
+            p.top - f.bottom
+          )
+        });
+      }
+      r = u;
+    } else {
+      const f = s.find(
+        (p) => p.element === c
+      );
+      f ? l = f : (r = void 0, l = void 0);
+    }
   }
-  return ancestors; // [ node, ... <body>, <html>, document ]
+  return a;
 }
-
-/** @param {HTMLElement} node */
-function get_parent(node) {
-  const {
-    parentNode
-  } = node;
-  if (parentNode && parentNode instanceof ShadowRoot) {
-    return parentNode.host;
-  }
-  return parentNode;
+function De(e, t) {
+  return {
+    x: e.x >= t.left && e.x <= t.right ? 0 : Math.min(
+      Math.abs(e.x - t.left),
+      Math.abs(e.x - t.right)
+    ),
+    y: e.y >= t.top && e.y <= t.bottom ? 0 : Math.min(
+      Math.abs(e.y - t.top),
+      Math.abs(e.y - t.bottom)
+    )
+  };
 }
-
-const EXCEEDED_HORIZONTAL_MIN = 0b0001;
-const EXCEEDED_HORIZONTAL_MAX = 0b0010;
-const EXCEEDED_VERTICAL_MIN = 0b0100;
-const EXCEEDED_VERTICAL_MAX = 0b1000;
-const isCoarsePointer = getInputType() === "coarse";
-let intersectingHandles = [];
-let isPointerDown = false;
-let ownerDocumentCounts = new Map();
-let panelConstraintFlags = new Map();
-const registeredResizeHandlers = new Set();
-function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins, setResizeHandlerState) {
-  var _ownerDocumentCounts$;
-  const {
-    ownerDocument
-  } = element;
-  const data = {
-    direction,
-    element,
-    hitAreaMargins,
-    setResizeHandlerState
+function Fe(e, t, n) {
+  let o, s = {
+    x: 1 / 0,
+    y: 1 / 0
   };
-  const count = (_ownerDocumentCounts$ = ownerDocumentCounts.get(ownerDocument)) !== null && _ownerDocumentCounts$ !== void 0 ? _ownerDocumentCounts$ : 0;
-  ownerDocumentCounts.set(ownerDocument, count + 1);
-  registeredResizeHandlers.add(data);
-  updateListeners();
-  return function unregisterResizeHandle() {
-    var _ownerDocumentCounts$2;
-    panelConstraintFlags.delete(resizeHandleId);
-    registeredResizeHandlers.delete(data);
-    const count = (_ownerDocumentCounts$2 = ownerDocumentCounts.get(ownerDocument)) !== null && _ownerDocumentCounts$2 !== void 0 ? _ownerDocumentCounts$2 : 1;
-    ownerDocumentCounts.set(ownerDocument, count - 1);
-    updateListeners();
-    if (count === 1) {
-      ownerDocumentCounts.delete(ownerDocument);
-    }
-
-    // If the resize handle that is currently unmounting is intersecting with the pointer,
-    // update the global pointer to account for the change
-    if (intersectingHandles.includes(data)) {
-      const index = intersectingHandles.indexOf(data);
-      if (index >= 0) {
-        intersectingHandles.splice(index, 1);
+  for (const i of t) {
+    const a = De(n, i.rect);
+    switch (e) {
+      case "horizontal": {
+        a.x <= s.x && (o = i, s = a);
+        break;
+      }
+      case "vertical": {
+        a.y <= s.y && (o = i, s = a);
+        break;
       }
-      updateCursor();
-
-      // Also instruct the handle to stop dragging; this prevents the parent group from being left in an inconsistent state
-      // See github.com/bvaughn/react-resizable-panels/issues/402
-      setResizeHandlerState("up", true, null);
-    }
-  };
-}
-function handlePointerDown(event) {
-  const {
-    target
-  } = event;
-  const {
-    x,
-    y
-  } = getResizeEventCoordinates(event);
-  isPointerDown = true;
-  recalculateIntersectingHandles({
-    target,
-    x,
-    y
-  });
-  updateListeners();
-  if (intersectingHandles.length > 0) {
-    updateResizeHandlerStates("down", event);
-
-    // Update cursor based on return value(s) from active handles
-    updateCursor();
-    event.preventDefault();
-    if (!isWithinResizeHandle(target)) {
-      event.stopImmediatePropagation();
     }
   }
-}
-function handlePointerMove(event) {
-  const {
-    x,
-    y
-  } = getResizeEventCoordinates(event);
-
-  // Edge case (see #340)
-  // Detect when the pointer has been released outside an iframe on a different domain
-  if (isPointerDown &&
-  // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
-  event.type !== "pointerleave" && event.buttons === 0) {
-    isPointerDown = false;
-    updateResizeHandlerStates("up", event);
-  }
-  if (!isPointerDown) {
-    const {
-      target
-    } = event;
-
-    // Recalculate intersecting handles whenever the pointer moves, except if it has already been pressed
-    // at that point, the handles may not move with the pointer (depending on constraints)
-    // but the same set of active handles should be locked until the pointer is released
-    recalculateIntersectingHandles({
-      target,
-      x,
-      y
+  return o ? {
+    distance: s,
+    hitRegion: o
+  } : void 0;
+}
+let B;
+function je() {
+  return B === void 0 && (typeof matchMedia == "function" ? B = !!matchMedia("(pointer:coarse)").matches : B = !1), B;
+}
+function me(e, t) {
+  const n = [];
+  return t.forEach((o, s) => {
+    if (s.disabled)
+      return;
+    const i = je() ? re.coarse : re.precise, a = _e(s), r = Fe(s.direction, a, {
+      x: e.clientX,
+      y: e.clientY
     });
-  }
-  updateResizeHandlerStates("move", event);
-
-  // Update cursor based on return value(s) from active handles
-  updateCursor();
-  if (intersectingHandles.length > 0) {
-    event.preventDefault();
-  }
+    r && r.distance.x <= i && r.distance.y <= i && n.push(r.hitRegion);
+  }), n;
 }
-function handlePointerUp(event) {
-  const {
-    target
-  } = event;
-  const {
-    x,
-    y
-  } = getResizeEventCoordinates(event);
-  panelConstraintFlags.clear();
-  isPointerDown = false;
-  if (intersectingHandles.length > 0) {
-    event.preventDefault();
-    if (!isWithinResizeHandle(target)) {
-      event.stopImmediatePropagation();
-    }
-  }
-  updateResizeHandlerStates("up", event);
-  recalculateIntersectingHandles({
-    target,
-    x,
-    y
-  });
-  updateCursor();
-  updateListeners();
-}
-function isWithinResizeHandle(element) {
-  let currentElement = element;
-  while (currentElement) {
-    if (currentElement.hasAttribute(DATA_ATTRIBUTES.resizeHandle)) {
-      return true;
+function se(e) {
+  if (e.defaultPrevented)
+    return;
+  const { mountedGroups: t } = O(), n = me(e, t), o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map();
+  n.forEach((r) => {
+    o.add(r.group), r.panels.forEach((c) => {
+      s.add(c);
+    }), r.separator && i.add(r.separator);
+    const l = t.get(r.group);
+    l && a.set(r.group, l.layout);
+  }), G({
+    interactionState: {
+      hitRegions: n,
+      initialLayoutMap: a,
+      pointerDownAtPoint: { x: e.clientX, y: e.clientY },
+      state: "active"
     }
-    currentElement = currentElement.parentElement;
-  }
-  return false;
+  }), n.length && e.preventDefault();
 }
-function recalculateIntersectingHandles({
-  target,
-  x,
-  y
+function He({
+  cursorFlags: e,
+  groups: t,
+  state: n
 }) {
-  intersectingHandles.splice(0);
-  let targetElement = null;
-  if (target instanceof HTMLElement || target instanceof SVGElement) {
-    targetElement = target;
-  }
-  registeredResizeHandlers.forEach(data => {
-    const {
-      element: dragHandleElement,
-      hitAreaMargins
-    } = data;
-    const dragHandleRect = dragHandleElement.getBoundingClientRect();
-    const {
-      bottom,
-      left,
-      right,
-      top
-    } = dragHandleRect;
-    const margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine;
-    const eventIntersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
-    if (eventIntersects) {
-      // TRICKY
-      // We listen for pointers events at the root in order to support hit area margins
-      // (determining when the pointer is close enough to an element to be considered a "hit")
-      // Clicking on an element "above" a handle (e.g. a modal) should prevent a hit though
-      // so at this point we need to compare stacking order of a potentially intersecting drag handle,
-      // and the element that was actually clicked/touched
-      if (targetElement !== null && document.contains(targetElement) && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) &&
-      // Calculating stacking order has a cost, so we should avoid it if possible
-      // That is why we only check potentially intersecting handles,
-      // and why we skip if the event target is within the handle's DOM
-      compare(targetElement, dragHandleElement) > 0) {
-        // If the target is above the drag handle, then we also need to confirm they overlap
-        // If they are beside each other (e.g. a panel and its drag handle) then the handle is still interactive
-        //
-        // It's not enough to compare only the target
-        // The target might be a small element inside of a larger container
-        // (For example, a SPAN or a DIV inside of a larger modal dialog)
-        let currentElement = targetElement;
-        let didIntersect = false;
-        while (currentElement) {
-          if (currentElement.contains(dragHandleElement)) {
-            break;
-          } else if (intersects(currentElement.getBoundingClientRect(), dragHandleRect, true)) {
-            didIntersect = true;
-            break;
+  let o = 0, s = 0;
+  switch (n) {
+    case "active":
+    case "hover":
+      t.forEach((i) => {
+        if (!i.disableCursor)
+          switch (i.direction) {
+            case "horizontal": {
+              o++;
+              break;
+            }
+            case "vertical": {
+              s++;
+              break;
+            }
           }
-          currentElement = currentElement.parentElement;
-        }
-        if (didIntersect) {
-          return;
-        }
+      });
+  }
+  if (o === 0 && s === 0)
+    return null;
+  switch (n) {
+    case "active": {
+      const i = (e & fe) !== 0, a = (e & de) !== 0, r = (e & pe) !== 0, l = (e & he) !== 0;
+      if (e) {
+        if (i)
+          return r ? "se-resize" : l ? "ne-resize" : "e-resize";
+        if (a)
+          return r ? "sw-resize" : l ? "nw-resize" : "w-resize";
+        if (r)
+          return "s-resize";
+        if (l)
+          return "n-resize";
       }
-      intersectingHandles.push(data);
+      break;
     }
-  });
-}
-function reportConstraintsViolation(resizeHandleId, flag) {
-  panelConstraintFlags.set(resizeHandleId, flag);
-}
-function updateCursor() {
-  let intersectsHorizontal = false;
-  let intersectsVertical = false;
-  intersectingHandles.forEach(data => {
-    const {
-      direction
-    } = data;
-    if (direction === "horizontal") {
-      intersectsHorizontal = true;
-    } else {
-      intersectsVertical = true;
-    }
-  });
-  let constraintFlags = 0;
-  panelConstraintFlags.forEach(flag => {
-    constraintFlags |= flag;
-  });
-  if (intersectsHorizontal && intersectsVertical) {
-    setGlobalCursorStyle("intersection", constraintFlags, isPointerDown);
-  } else if (intersectsHorizontal) {
-    setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
-  } else if (intersectsVertical) {
-    setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
-  } else {
-    resetGlobalCursorStyle();
   }
-}
-let listenersAbortController;
-function updateListeners() {
-  var _listenersAbortContro;
-  (_listenersAbortContro = listenersAbortController) === null || _listenersAbortContro === void 0 ? void 0 : _listenersAbortContro.abort();
-  listenersAbortController = new AbortController();
-  const options = {
-    capture: true,
-    signal: listenersAbortController.signal
-  };
-  if (!registeredResizeHandlers.size) {
-    return;
-  }
-  if (isPointerDown) {
-    if (intersectingHandles.length > 0) {
-      ownerDocumentCounts.forEach((count, ownerDocument) => {
-        const {
-          body
-        } = ownerDocument;
-        if (count > 0) {
-          body.addEventListener("contextmenu", handlePointerUp, options);
-          body.addEventListener("pointerleave", handlePointerMove, options);
-          body.addEventListener("pointermove", handlePointerMove, options);
-        }
+  return o > 0 && s > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
+}
+let V = null, P;
+function X() {
+  P === void 0 && (P = new CSSStyleSheet(), document.adoptedStyleSheets = [P]);
+  const { cursorFlags: e, interactionState: t } = O();
+  switch (t.state) {
+    case "active":
+    case "hover": {
+      const n = He({
+        cursorFlags: e,
+        groups: t.hitRegions.map((o) => o.group),
+        state: t.state
       });
+      if (V === n)
+        return;
+      V = n, n ? P.cssRules.length === 0 ? P.insertRule(`*{cursor: ${n} !important;}`) : P.replaceSync(`*{cursor: ${n} !important;}`) : P.cssRules.length === 1 && P.deleteRule(0);
+      break;
+    }
+    case "inactive": {
+      V = null, P.cssRules.length === 1 && P.deleteRule(0);
+      break;
     }
-    ownerDocumentCounts.forEach((_, ownerDocument) => {
-      const {
-        body
-      } = ownerDocument;
-      body.addEventListener("pointerup", handlePointerUp, options);
-      body.addEventListener("pointercancel", handlePointerUp, options);
-    });
-  } else {
-    ownerDocumentCounts.forEach((count, ownerDocument) => {
-      const {
-        body
-      } = ownerDocument;
-      if (count > 0) {
-        body.addEventListener("pointerdown", handlePointerDown, options);
-        body.addEventListener("pointermove", handlePointerMove, options);
-      }
-    });
-  }
-}
-function updateResizeHandlerStates(action, event) {
-  registeredResizeHandlers.forEach(data => {
-    const {
-      setResizeHandlerState
-    } = data;
-    const isActive = intersectingHandles.includes(data);
-    setResizeHandlerState(action, isActive, event);
-  });
-}
-
-function useForceUpdate() {
-  const [_, setCount] = useState(0);
-  return useCallback(() => setCount(prevCount => prevCount + 1), []);
-}
-
-function assert(expectedCondition, message) {
-  if (!expectedCondition) {
-    console.error(message);
-    throw Error(message);
   }
 }
-
-function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
-  if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
-    return 0;
-  } else {
-    return actual > expected ? 1 : -1;
-  }
+function E(e, t = "Assertion error") {
+  if (!e)
+    throw console.error(t), Error(t);
 }
-function fuzzyNumbersEqual$1(actual, expected, fractionDigits = PRECISION) {
-  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+function Be(e, t) {
+  if (e.length !== t.length)
+    return !1;
+  for (let n = 0; n < e.length; n++)
+    if (e[n] != t[n])
+      return !1;
+  return !0;
 }
-
-function fuzzyNumbersEqual(actual, expected, fractionDigits) {
-  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+function b(e, t, n = 0) {
+  return Math.abs(L(e) - L(t)) <= n;
 }
-
-function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
-  if (actual.length !== expected.length) {
-    return false;
-  }
-  for (let index = 0; index < actual.length; index++) {
-    const actualSize = actual[index];
-    const expectedSize = expected[index];
-    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
-      return false;
-    }
-  }
-  return true;
+function Y(e, t) {
+  return b(e, t) ? 0 : e > t ? 1 : -1;
 }
-
-// Panel size must be in percentages; pixel values should be pre-converted
-function resizePanel({
-  panelConstraints: panelConstraintsArray,
-  panelIndex,
-  size
+function T({
+  panelConstraints: e,
+  size: t
 }) {
-  const panelConstraints = panelConstraintsArray[panelIndex];
-  assert(panelConstraints != null, `Panel constraints not found for index ${panelIndex}`);
-  let {
-    collapsedSize = 0,
-    collapsible,
-    maxSize = 100,
-    minSize = 0
-  } = panelConstraints;
-  if (fuzzyCompareNumbers(size, minSize) < 0) {
-    if (collapsible) {
-      // Collapsible panels should snap closed or open only once they cross the halfway point between collapsed and min size.
-      const halfwayPoint = (collapsedSize + minSize) / 2;
-      if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
-        size = collapsedSize;
-      } else {
-        size = minSize;
-      }
-    } else {
-      size = minSize;
-    }
-  }
-  size = Math.min(maxSize, size);
-  size = parseFloat(size.toFixed(PRECISION));
-  return size;
-}
-
-// All units must be in percentages; pixel values should be pre-converted
-function adjustLayoutByDelta({
-  delta,
-  initialLayout,
-  panelConstraints: panelConstraintsArray,
-  pivotIndices,
-  prevLayout,
-  trigger
+  const {
+    collapsedSize: n = 0,
+    collapsible: o,
+    maxSize: s = 100,
+    minSize: i = 0
+  } = e;
+  if (Y(t, i) < 0)
+    if (o) {
+      const a = (n + i) / 2;
+      Y(t, a) < 0 ? t = n : t = i;
+    } else
+      t = i;
+  return t = Math.min(s, t), t = L(t), t;
+}
+function We({
+  delta: e,
+  initialLayout: t,
+  panelConstraints: n,
+  pivotIndices: o,
+  prevLayout: s,
+  trigger: i
 }) {
-  if (fuzzyNumbersEqual(delta, 0)) {
-    return initialLayout;
-  }
-  const nextLayout = [...initialLayout];
-  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
-  assert(firstPivotIndex != null, "Invalid first pivot index");
-  assert(secondPivotIndex != null, "Invalid second pivot index");
-  let deltaApplied = 0;
-
-  // const DEBUG = [];
-  // DEBUG.push(`adjustLayoutByDelta()`);
-  // DEBUG.push(`  initialLayout: ${initialLayout.join(", ")}`);
-  // DEBUG.push(`  prevLayout: ${prevLayout.join(", ")}`);
-  // DEBUG.push(`  delta: ${delta}`);
-  // DEBUG.push(`  pivotIndices: ${pivotIndices.join(", ")}`);
-  // DEBUG.push(`  trigger: ${trigger}`);
-  // DEBUG.push("");
-
-  // A resizing panel affects the panels before or after it.
-  //
-  // A negative delta means the panel(s) immediately after the resize handle should grow/expand by decreasing its offset.
-  // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
-  //
-  // A positive delta means the panel(s) immediately before the resize handle should "expand".
-  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resize handle.
-
-  {
-    // If this is a resize triggered by a keyboard event, our logic for expanding/collapsing is different.
-    // We no longer check the halfway threshold because this may prevent the panel from expanding at all.
-    if (trigger === "keyboard") {
-      {
-        // Check if we should expand a collapsed panel
-        const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
-        const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints, `Panel constraints not found for index ${index}`);
-        const {
-          collapsedSize = 0,
-          collapsible,
-          minSize = 0
-        } = panelConstraints;
-
-        // DEBUG.push(`edge case check 1: ${index}`);
-        // DEBUG.push(`  -> collapsible? ${collapsible}`);
-        if (collapsible) {
-          const prevSize = initialLayout[index];
-          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
-          if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
-            const localDelta = minSize - prevSize;
-            // DEBUG.push(`  -> expand delta: ${localDelta}`);
-
-            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
-              delta = delta < 0 ? 0 - localDelta : localDelta;
-              // DEBUG.push(`  -> delta: ${delta}`);
-            }
-          }
-        }
-      }
-
-      {
-        // Check if we should collapse a panel at its minimum size
-        const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
-        const panelConstraints = panelConstraintsArray[index];
-        assert(panelConstraints, `No panel constraints found for index ${index}`);
-        const {
-          collapsedSize = 0,
-          collapsible,
-          minSize = 0
-        } = panelConstraints;
-
-        // DEBUG.push(`edge case check 2: ${index}`);
-        // DEBUG.push(`  -> collapsible? ${collapsible}`);
-        if (collapsible) {
-          const prevSize = initialLayout[index];
-          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
-          if (fuzzyNumbersEqual(prevSize, minSize)) {
-            const localDelta = prevSize - collapsedSize;
-            // DEBUG.push(`  -> expand delta: ${localDelta}`);
-
-            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0) {
-              delta = delta < 0 ? 0 - localDelta : localDelta;
-              // DEBUG.push(`  -> delta: ${delta}`);
-            }
-          }
-        }
-      }
-    }
-    // DEBUG.push("");
-  }
-
+  if (b(e, 0))
+    return t;
+  const a = Object.values(t), r = Object.values(s), l = [...a], [c, u] = o;
+  E(c != null, "Invalid first pivot index"), E(u != null, "Invalid second pivot index");
+  let f = 0;
   {
-    // Pre-calculate max available delta in the opposite direction of our pivot.
-    // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
-    // If this amount is less than the requested delta, adjust the requested delta.
-    // If this amount is greater than the requested delta, that's useful information too–
-    // as an expanding panel might change from collapsed to min size.
-
-    const increment = delta < 0 ? 1 : -1;
-    let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
-    let maxAvailableDelta = 0;
-
-    // DEBUG.push("pre calc...");
-    while (true) {
-      const prevSize = initialLayout[index];
-      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
-      const maxSafeSize = resizePanel({
-        panelConstraints: panelConstraintsArray,
-        panelIndex: index,
+    const m = e < 0 ? 1 : -1;
+    let d = e < 0 ? u : c, v = 0;
+    for (; ; ) {
+      const x = a[d];
+      E(
+        x != null,
+        `Previous layout not found for panel index ${d}`
+      );
+      const y = T({
+        panelConstraints: n[d],
         size: 100
-      });
-      const delta = maxSafeSize - prevSize;
-      // DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
-
-      maxAvailableDelta += delta;
-      index += increment;
-      if (index < 0 || index >= panelConstraintsArray.length) {
+      }) - x;
+      if (v += y, d += m, d < 0 || d >= n.length)
         break;
-      }
     }
-
-    // DEBUG.push(`  -> max available delta: ${maxAvailableDelta}`);
-    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
-    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
-    // DEBUG.push(`  -> adjusted delta: ${delta}`);
-    // DEBUG.push("");
+    const S = Math.min(Math.abs(e), Math.abs(v));
+    e = e < 0 ? 0 - S : S;
   }
-
   {
-    // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
-
-    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
-    let index = pivotIndex;
-    while (index >= 0 && index < panelConstraintsArray.length) {
-      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
-      const prevSize = initialLayout[index];
-      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
-      const unsafeSize = prevSize - deltaRemaining;
-      const safeSize = resizePanel({
-        panelConstraints: panelConstraintsArray,
-        panelIndex: index,
-        size: unsafeSize
+    let d = e < 0 ? c : u;
+    for (; d >= 0 && d < n.length; ) {
+      const v = Math.abs(e) - Math.abs(f), S = a[d];
+      E(
+        S != null,
+        `Previous layout not found for panel index ${d}`
+      );
+      const x = S - v, z = T({
+        panelConstraints: n[d],
+        size: x
       });
-      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
-        deltaApplied += prevSize - safeSize;
-        nextLayout[index] = safeSize;
-        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
-          numeric: true
-        }) >= 0) {
-          break;
-        }
-      }
-      if (delta < 0) {
-        index--;
-      } else {
-        index++;
-      }
+      if (!b(S, z) && (f += S - z, l[d] = z, f.toFixed(3).localeCompare(Math.abs(e).toFixed(3), void 0, {
+        numeric: !0
+      }) >= 0))
+        break;
+      e < 0 ? d-- : d++;
     }
   }
-  // DEBUG.push(`after 1: ${nextLayout.join(", ")}`);
-  // DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  // DEBUG.push("");
-
-  // If we were unable to resize any of the panels panels, return the previous state.
-  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
-  if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
-    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
-    // console.log(DEBUG.join("\n"));
-
-    return prevLayout;
-  }
+  if (Be(r, l))
+    return s;
   {
-    // Now distribute the applied delta to the panels in the other direction
-    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
-    const prevSize = initialLayout[pivotIndex];
-    assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
-    const unsafeSize = prevSize + deltaApplied;
-    const safeSize = resizePanel({
-      panelConstraints: panelConstraintsArray,
-      panelIndex: pivotIndex,
-      size: unsafeSize
+    const m = e < 0 ? u : c, d = a[m];
+    E(
+      d != null,
+      `Previous layout not found for panel index ${m}`
+    );
+    const v = d + f, S = T({
+      panelConstraints: n[m],
+      size: v
     });
-
-    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
-    nextLayout[pivotIndex] = safeSize;
-
-    // Edge case where expanding or contracting one panel caused another one to change collapsed state
-    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
-      let deltaRemaining = unsafeSize - safeSize;
-      const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
-      let index = pivotIndex;
-      while (index >= 0 && index < panelConstraintsArray.length) {
-        const prevSize = nextLayout[index];
-        assert(prevSize != null, `Previous layout not found for panel index ${index}`);
-        const unsafeSize = prevSize + deltaRemaining;
-        const safeSize = resizePanel({
-          panelConstraints: panelConstraintsArray,
-          panelIndex: index,
-          size: unsafeSize
+    if (l[m] = S, !b(S, v)) {
+      let x = v - S, y = e < 0 ? u : c;
+      for (; y >= 0 && y < n.length; ) {
+        const R = l[y];
+        E(
+          R != null,
+          `Previous layout not found for panel index ${y}`
+        );
+        const k = R + x, A = T({
+          panelConstraints: n[y],
+          size: k
         });
-        if (!fuzzyNumbersEqual(prevSize, safeSize)) {
-          deltaRemaining -= safeSize - prevSize;
-          nextLayout[index] = safeSize;
-        }
-        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
+        if (b(R, A) || (x -= A - R, l[y] = A), b(x, 0))
           break;
-        }
-        if (delta > 0) {
-          index--;
-        } else {
-          index++;
-        }
+        e > 0 ? y-- : y++;
       }
     }
   }
-  // DEBUG.push(`after 2: ${nextLayout.join(", ")}`);
-  // DEBUG.push(`  deltaApplied: ${deltaApplied}`);
-  // DEBUG.push("");
-
-  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
-  // DEBUG.push(`total size: ${totalSize}`);
-
-  // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
-  // In that case, fall back to our most recent valid layout
-  if (!fuzzyNumbersEqual(totalSize, 100)) {
-    // DEBUG.push(`bailout to previous layout: ${prevLayout.join(", ")}`);
-    // console.log(DEBUG.join("\n"));
-
-    return prevLayout;
-  }
-
-  // console.log(DEBUG.join("\n"));
-  return nextLayout;
-}
-
-function calculateAriaValues({
-  layout,
-  panelsArray,
-  pivotIndices
-}) {
-  let currentMinSize = 0;
-  let currentMaxSize = 100;
-  let totalMinSize = 0;
-  let totalMaxSize = 0;
-  const firstIndex = pivotIndices[0];
-  assert(firstIndex != null, "No pivot index found");
-
-  // A panel's effective min/max sizes also need to account for other panel's sizes.
-  panelsArray.forEach((panelData, index) => {
-    const {
-      constraints
-    } = panelData;
-    const {
-      maxSize = 100,
-      minSize = 0
-    } = constraints;
-    if (index === firstIndex) {
-      currentMinSize = minSize;
-      currentMaxSize = maxSize;
-    } else {
-      totalMinSize += minSize;
-      totalMaxSize += maxSize;
+  const p = Object.values(l).reduce(
+    (m, d) => d + m,
+    0
+  );
+  if (!b(p, 100, 0.1))
+    return s;
+  const h = Object.keys(s);
+  return l.reduce((m, d, v) => (m[h[v]] = d, m), {});
+}
+function q(e, t) {
+  if (Object.keys(e).length !== Object.keys(t).length)
+    return !1;
+  for (const n in e)
+    if (Y(e[n], t[n]) !== 0)
+      return !1;
+  return !0;
+}
+function W(e) {
+  if (e.defaultPrevented)
+    return;
+  const { interactionState: t, mountedGroups: n } = O();
+  switch (t.state) {
+    case "active": {
+      if (
+        // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+        e.type !== "pointerleave" && e.buttons === 0
+      ) {
+        G(
+          (i) => i.interactionState.state === "inactive" ? i : {
+            cursorFlags: 0,
+            interactionState: {
+              state: "inactive"
+            }
+          }
+        );
+        return;
+      }
+      let o = 0;
+      const s = new Map(n);
+      t.hitRegions.forEach((i) => {
+        const { direction: a, disableCursor: r, element: l, panels: c } = i.group;
+        let u = 0;
+        t.state === "active" && (a === "horizontal" ? u = (e.clientX - t.pointerDownAtPoint.x) / l.offsetWidth * 100 : u = (e.clientY - t.pointerDownAtPoint.y) / l.offsetHeight * 100);
+        const f = t.initialLayoutMap.get(
+          i.group
+        ), { derivedPanelConstraints: p, layout: h } = n.get(i.group) ?? {};
+        if (p && f && h) {
+          const m = We({
+            delta: u,
+            initialLayout: f,
+            panelConstraints: p,
+            pivotIndices: i.panels.map((d) => c.indexOf(d)),
+            prevLayout: h,
+            trigger: "mouse-or-touch"
+          });
+          if (q(m, h)) {
+            if (u !== 0 && !r)
+              switch (a) {
+                case "horizontal": {
+                  o |= u < 0 ? fe : de;
+                  break;
+                }
+                case "vertical": {
+                  o |= u < 0 ? pe : he;
+                  break;
+                }
+              }
+          } else {
+            s.set(i.group, {
+              derivedPanelConstraints: p,
+              layout: m
+            });
+            const d = i.group.panels.map(({ id: v }) => v).join(",");
+            i.group.inMemoryLayouts[d] = m;
+          }
+        }
+      }), G({
+        cursorFlags: o,
+        mountedGroups: s
+      }), X();
+      break;
+    }
+    default: {
+      const o = me(e, n);
+      o.length === 0 ? t.state !== "inactive" && G({
+        interactionState: { state: "inactive" }
+      }) : G({
+        interactionState: {
+          hitRegions: o,
+          state: "hover"
+        }
+      }), X();
+      break;
     }
-  });
-  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
-  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
-  const valueNow = layout[firstIndex];
-  return {
-    valueMax,
-    valueMin,
-    valueNow
-  };
-}
-
-function getResizeHandleElementsForGroup(groupId, scope = document) {
-  return Array.from(scope.querySelectorAll(`[${DATA_ATTRIBUTES.resizeHandleId}][data-panel-group-id="${groupId}"]`));
-}
-
-function getResizeHandleElementIndex(groupId, id, scope = document) {
-  const handles = getResizeHandleElementsForGroup(groupId, scope);
-  const index = handles.findIndex(handle => handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId) === id);
-  return index !== null && index !== void 0 ? index : null;
-}
-
-function determinePivotIndices(groupId, dragHandleId, panelGroupElement) {
-  const index = getResizeHandleElementIndex(groupId, dragHandleId, panelGroupElement);
-  return index != null ? [index, index + 1] : [-1, -1];
-}
-
-function isHTMLElement(target) {
-  if (target instanceof HTMLElement) {
-    return true;
   }
-
-  // Fallback to duck typing to handle edge case of portals within a popup window
-  return typeof target === "object" && target !== null && "tagName" in target && "getAttribute" in target;
 }
-
-function getPanelGroupElement(id, rootElement = document) {
-  // If the root element is the PanelGroup
-  if (isHTMLElement(rootElement) && rootElement.dataset.panelGroupId == id) {
-    return rootElement;
-  }
-
-  // Else query children
-  const element = rootElement.querySelector(`[data-panel-group][data-panel-group-id="${id}"]`);
-  if (element) {
-    return element;
+function ae(e) {
+  if (e.defaultPrevented)
+    return;
+  e.preventDefault();
+  const { interactionState: t } = O();
+  switch (t.state) {
+    case "active":
+      G({
+        cursorFlags: 0,
+        interactionState: {
+          state: "inactive"
+        }
+      }), X();
   }
-  return null;
 }
-
-function getResizeHandleElement(id, scope = document) {
-  const element = scope.querySelector(`[${DATA_ATTRIBUTES.resizeHandleId}="${id}"]`);
-  if (element) {
-    return element;
+function Ue(e) {
+  let t = 0, n = 0;
+  const o = {};
+  for (const i of e)
+    if (i.defaultSize !== void 0) {
+      t++;
+      const a = L(i.defaultSize);
+      n += a, o[i.panelId] = a;
+    } else
+      o[i.panelId] = void 0;
+  const s = e.length - t;
+  if (s !== 0) {
+    const i = L((100 - n) / s);
+    for (const a of e)
+      a.defaultSize === void 0 && (o[a.panelId] = i);
   }
-  return null;
+  return o;
 }
-
-function getResizeHandlePanelIds(groupId, handleId, panelsArray, scope = document) {
-  var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
-  const handle = getResizeHandleElement(handleId, scope);
-  const handles = getResizeHandleElementsForGroup(groupId, scope);
-  const index = handle ? handles.indexOf(handle) : -1;
-  const idBefore = (_panelsArray$index$id = (_panelsArray$index = panelsArray[index]) === null || _panelsArray$index === void 0 ? void 0 : _panelsArray$index.id) !== null && _panelsArray$index$id !== void 0 ? _panelsArray$index$id : null;
-  const idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index + 1]) === null || _panelsArray === void 0 ? void 0 : _panelsArray.id) !== null && _panelsArray$id !== void 0 ? _panelsArray$id : null;
-  return [idBefore, idAfter];
+function Ke(e, t, n) {
+  const o = n[0];
+  if (!o)
+    return;
+  const s = e.panels.find((a) => a.element === t);
+  if (!s || !s.onResize)
+    return;
+  const i = Z({ group: e });
+  s.onResize({
+    asPercentage: L(
+      o.inlineSize / i * 100
+    ),
+    inPixels: o.inlineSize
+  });
 }
-
-// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
-
-function useWindowSplitterPanelGroupBehavior({
-  committedValuesRef,
-  eagerValuesRef,
-  groupId,
-  layout,
-  panelDataArray,
-  panelGroupElement,
-  setLayout
+function ve({
+  layout: e,
+  panelConstraints: t
 }) {
-  useRef({
-    didWarnAboutMissingResizeHandle: false
-  });
-  useIsomorphicLayoutEffect(() => {
-    if (!panelGroupElement) {
-      return;
-    }
-    const resizeHandleElements = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-    for (let index = 0; index < panelDataArray.length - 1; index++) {
-      const {
-        valueMax,
-        valueMin,
-        valueNow
-      } = calculateAriaValues({
-        layout,
-        panelsArray: panelDataArray,
-        pivotIndices: [index, index + 1]
-      });
-      const resizeHandleElement = resizeHandleElements[index];
-      if (resizeHandleElement == null) ; else {
-        const panelData = panelDataArray[index];
-        assert(panelData, `No panel data found for index "${index}"`);
-        resizeHandleElement.setAttribute("aria-controls", panelData.id);
-        resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
-        resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
-        resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
-      }
+  const o = [...Object.values(e)], s = o.reduce(
+    (r, l) => r + l,
+    0
+  );
+  if (o.length !== t.length)
+    throw Error(
+      `Invalid ${t.length} panel layout: ${o.map((r) => `${r}%`).join(", ")}`
+    );
+  if (!b(s, 100) && o.length > 0)
+    for (let r = 0; r < t.length; r++) {
+      const l = o[r];
+      E(l != null, `No layout data found for index ${r}`);
+      const c = 100 / s * l;
+      o[r] = c;
     }
-    return () => {
-      resizeHandleElements.forEach((resizeHandleElement, index) => {
-        resizeHandleElement.removeAttribute("aria-controls");
-        resizeHandleElement.removeAttribute("aria-valuemax");
-        resizeHandleElement.removeAttribute("aria-valuemin");
-        resizeHandleElement.removeAttribute("aria-valuenow");
-      });
-    };
-  }, [groupId, layout, panelDataArray, panelGroupElement]);
-  useEffect(() => {
-    if (!panelGroupElement) {
-      return;
-    }
-    const eagerValues = eagerValuesRef.current;
-    assert(eagerValues, `Eager values not found`);
-    const {
-      panelDataArray
-    } = eagerValues;
-    const groupElement = getPanelGroupElement(groupId, panelGroupElement);
-    assert(groupElement != null, `No group found for id "${groupId}"`);
-    const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-    assert(handles, `No resize handles found for group id "${groupId}"`);
-    const cleanupFunctions = handles.map(handle => {
-      const handleId = handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId);
-      assert(handleId, `Resize handle element has no handle id attribute`);
-      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, panelDataArray, panelGroupElement);
-      if (idBefore == null || idAfter == null) {
-        return () => {};
-      }
-      const onKeyDown = event => {
-        if (event.defaultPrevented) {
-          return;
-        }
-        switch (event.key) {
-          case "Enter":
-            {
-              event.preventDefault();
-              const index = panelDataArray.findIndex(panelData => panelData.id === idBefore);
-              if (index >= 0) {
-                const panelData = panelDataArray[index];
-                assert(panelData, `No panel data found for index ${index}`);
-                const size = layout[index];
-                const {
-                  collapsedSize = 0,
-                  collapsible,
-                  minSize = 0
-                } = panelData.constraints;
-                if (size != null && collapsible) {
-                  const nextLayout = adjustLayoutByDelta({
-                    delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
-                    initialLayout: layout,
-                    panelConstraints: panelDataArray.map(panelData => panelData.constraints),
-                    pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
-                    prevLayout: layout,
-                    trigger: "keyboard"
-                  });
-                  if (layout !== nextLayout) {
-                    setLayout(nextLayout);
-                  }
-                }
-              }
-              break;
-            }
-        }
-      };
-      handle.addEventListener("keydown", onKeyDown);
-      return () => {
-        handle.removeEventListener("keydown", onKeyDown);
-      };
+  let i = 0;
+  for (let r = 0; r < t.length; r++) {
+    const l = o[r];
+    E(l != null, `No layout data found for index ${r}`);
+    const c = T({
+      panelConstraints: t[r],
+      size: l
     });
-    return () => {
-      cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
-    };
-  }, [panelGroupElement, committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
-}
-
-function areEqual(arrayA, arrayB) {
-  if (arrayA.length !== arrayB.length) {
-    return false;
+    l != c && (i += l - c, o[r] = c);
   }
-  for (let index = 0; index < arrayA.length; index++) {
-    if (arrayA[index] !== arrayB[index]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function getResizeEventCursorPosition(direction, event) {
-  const isHorizontal = direction === "horizontal";
-  const {
-    x,
-    y
-  } = getResizeEventCoordinates(event);
-  return isHorizontal ? x : y;
-}
-
-function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
-  const isHorizontal = direction === "horizontal";
-  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
-  assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
-  const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
-  assert(groupId, `Resize handle element has no group id attribute`);
-  let {
-    initialCursorPosition
-  } = initialDragState;
-  const cursorPosition = getResizeEventCursorPosition(direction, event);
-  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
-  assert(groupElement, `No group element found for id "${groupId}"`);
-  const groupRect = groupElement.getBoundingClientRect();
-  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
-  const offsetPixels = cursorPosition - initialCursorPosition;
-  const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
-  return offsetPercentage;
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/movementX
-function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy, panelGroupElement) {
-  if (isKeyDown(event)) {
-    const isHorizontal = direction === "horizontal";
-    let delta = 0;
-    if (event.shiftKey) {
-      delta = 100;
-    } else if (keyboardResizeBy != null) {
-      delta = keyboardResizeBy;
-    } else {
-      delta = 10;
-    }
-    let movement = 0;
-    switch (event.key) {
-      case "ArrowDown":
-        movement = isHorizontal ? 0 : delta;
-        break;
-      case "ArrowLeft":
-        movement = isHorizontal ? -delta : 0;
-        break;
-      case "ArrowRight":
-        movement = isHorizontal ? delta : 0;
-        break;
-      case "ArrowUp":
-        movement = isHorizontal ? 0 : -delta;
-        break;
-      case "End":
-        movement = 100;
-        break;
-      case "Home":
-        movement = -100;
+  if (!b(i, 0))
+    for (let r = 0; r < t.length; r++) {
+      const l = o[r];
+      E(l != null, `No layout data found for index ${r}`);
+      const c = l + i, u = T({
+        panelConstraints: t[r],
+        size: c
+      });
+      if (l !== u && (i -= u - l, o[r] = u, b(i, 0)))
         break;
     }
-    return movement;
-  } else {
-    if (initialDragState == null) {
-      return 0;
-    }
-    return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement);
-  }
-}
-
-function calculateUnsafeDefaultLayout({
-  panelDataArray
-}) {
-  const layout = Array(panelDataArray.length);
-  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-  let numPanelsWithSizes = 0;
-  let remainingSize = 100;
-
-  // Distribute default sizes first
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints, `Panel constraints not found for index ${index}`);
-    const {
-      defaultSize
-    } = panelConstraints;
-    if (defaultSize != null) {
-      numPanelsWithSizes++;
-      layout[index] = defaultSize;
-      remainingSize -= defaultSize;
-    }
-  }
-
-  // Remaining size should be distributed evenly between panels without default sizes
-  for (let index = 0; index < panelDataArray.length; index++) {
-    const panelConstraints = panelConstraintsArray[index];
-    assert(panelConstraints, `Panel constraints not found for index ${index}`);
-    const {
-      defaultSize
-    } = panelConstraints;
-    if (defaultSize != null) {
-      continue;
+  const a = Object.keys(e);
+  return o.reduce((r, l, c) => (r[a[c]] = l, r), {});
+}
+function Ve(e) {
+  let t = !1;
+  const n = new ResizeObserver((l) => {
+    for (const c of l) {
+      const { borderBoxSize: u, target: f } = c;
+      f === e.element ? t && G((p) => {
+        const h = p.mountedGroups.get(e);
+        return h ? {
+          mountedGroups: new Map(p.mountedGroups).set(e, {
+            derivedPanelConstraints: ie(e),
+            layout: h.layout
+          })
+        } : p;
+      }) : Ke(e, f, u);
     }
-    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
-    const size = remainingSize / numRemainingPanels;
-    numPanelsWithSizes++;
-    layout[index] = size;
-    remainingSize -= size;
-  }
-  return layout;
+  });
+  n.observe(e.element), e.panels.forEach((l) => {
+    l.onResize && n.observe(l.element);
+  });
+  const o = ie(e), s = e.panels.map(({ id: l }) => l).join(","), i = e.inMemoryLayouts[s] ?? e.defaultLayout ?? Ue(o), a = ve({
+    layout: i,
+    panelConstraints: o
+  }), r = G((l) => ({
+    mountedGroups: new Map(l.mountedGroups).set(e, {
+      derivedPanelConstraints: o,
+      layout: a
+    })
+  }));
+  return t = !0, r.mountedGroups.size === 1 && (window.addEventListener("pointerdown", se), window.addEventListener("pointerleave", W), window.addEventListener("pointermove", W), window.addEventListener("pointerup", ae)), function() {
+    const c = G((u) => {
+      const f = new Map(u.mountedGroups);
+      return f.delete(e), { mountedGroups: f };
+    });
+    t = !1, c.mountedGroups.size === 0 && (window.removeEventListener("pointerdown", se), window.removeEventListener("pointerleave", W), window.removeEventListener("pointermove", W), window.removeEventListener("pointerup", ae)), n.disconnect();
+  };
 }
-
-// Layout should be pre-converted into percentages
-function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
-  layout.forEach((size, index) => {
-    const panelData = panelsArray[index];
-    assert(panelData, `Panel data not found for index ${index}`);
-    const {
-      callbacks,
-      constraints,
-      id: panelId
-    } = panelData;
-    const {
-      collapsedSize = 0,
-      collapsible
-    } = constraints;
-    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
-    if (lastNotifiedSize == null || size !== lastNotifiedSize) {
-      panelIdToLastNotifiedSizeMap[panelId] = size;
-      const {
-        onCollapse,
-        onExpand,
-        onResize
-      } = callbacks;
-      if (onResize) {
-        onResize(size, lastNotifiedSize);
-      }
-      if (collapsible && (onCollapse || onExpand)) {
-        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
-          onExpand();
-        }
-        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
-          onCollapse();
+function J(e) {
+  const t = Re();
+  return `${e ?? t}`;
+}
+const D = typeof window < "u" ? Pe : Ce;
+function Q(e) {
+  const t = I(e);
+  return D(() => {
+    t.current = e;
+  }, [e]), ce((n) => t.current?.(n), [t]);
+}
+function ee(...e) {
+  return Q((t) => {
+    e.forEach((n) => {
+      if (n)
+        switch (typeof n) {
+          case "function": {
+            n(t);
+            break;
+          }
+          case "object": {
+            n.current = t;
+            break;
+          }
         }
-      }
-    }
+    });
   });
 }
-
-function compareLayouts(a, b) {
-  if (a.length !== b.length) {
-    return false;
-  } else {
-    for (let index = 0; index < a.length; index++) {
-      if (a[index] != b[index]) {
-        return false;
-      }
-    }
-  }
-  return true;
+const ge = "--react-resizable-panels--panel--pointer-events";
+function ye(e, t) {
+  const n = e.replace(/[^a-zA-Z0-9\-_]/g, ""), o = t.replace(/[^a-zA-Z0-9\-_]/g, "");
+  return `--react-resizable-panels--${n}--${o}`;
+}
+const Se = Ee(null);
+function le(e, t) {
+  return t.sort(
+    e === "horizontal" ? (n, o) => n.element.offsetLeft - o.element.offsetLeft : (n, o) => n.element.offsetTop - o.element.offsetTop
+  );
 }
-
-// This method returns a number between 1 and 100 representing
-
-// the % of the group's overall space this panel should occupy.
-function computePanelFlexBoxStyle({
-  defaultSize,
-  dragState,
-  layout,
-  panelData,
-  panelIndex,
-  precision = 3
+function Xe({
+  groupId: e
 }) {
-  const size = layout[panelIndex];
-  let flexGrow;
-  if (size == null) {
-    // Initial render (before panels have registered themselves)
-    // In order to support server rendering, fall back to default size if provided
-    flexGrow = defaultSize != undefined ? defaultSize.toFixed(precision) : "1";
-  } else if (panelData.length === 1) {
-    // Special case: Single panel group should always fill full width/height
-    flexGrow = "1";
-  } else {
-    flexGrow = size.toFixed(precision);
-  }
-  return {
-    flexBasis: 0,
-    flexGrow,
-    flexShrink: 1,
-    // Without this, Panel sizes may be unintentionally overridden by their content
-    overflow: "hidden",
-    // Disable pointer events inside of a panel during resize
-    // This avoid edge cases like nested iframes
-    pointerEvents: dragState !== null ? "none" : undefined
+  const t = () => {
+    const { mountedGroups: n } = O();
+    for (const [o, { derivedPanelConstraints: s, layout: i }] of n)
+      if (o.id === e)
+        return { derivedPanelConstraints: s, group: o, layout: i };
+    throw Error(`Group ${e} not found`);
   };
-}
-
-function debounce(callback, durationMs = 10) {
-  let timeoutId = null;
-  let callable = (...args) => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
+  return {
+    getLayout() {
+      const { layout: n } = t();
+      return n;
+    },
+    setLayout(n) {
+      const { derivedPanelConstraints: o, group: s, layout: i } = t(), a = ve({
+        layout: n,
+        panelConstraints: o
+      });
+      return q(i, a) || G((r) => ({
+        mountedGroups: new Map(r.mountedGroups).set(s, {
+          derivedPanelConstraints: o,
+          layout: a
+        })
+      })), a;
     }
-    timeoutId = setTimeout(() => {
-      callback(...args);
-    }, durationMs);
   };
-  return callable;
 }
-
-// PanelGroup might be rendering in a server-side environment where localStorage is not available
-// or on a browser with cookies/storage disabled.
-// In either case, this function avoids accessing localStorage until needed,
-// and avoids throwing user-visible errors.
-function initializeDefaultStorage(storageObject) {
-  try {
-    if (typeof localStorage !== "undefined") {
-      // Bypass this check for future calls
-      storageObject.getItem = name => {
-        return localStorage.getItem(name);
-      };
-      storageObject.setItem = (name, value) => {
-        localStorage.setItem(name, value);
+function Ye(e, t) {
+  const n = I({
+    getLayout: () => ({}),
+    setLayout: Te
+  });
+  ue(t, () => n.current, []), D(() => {
+    Object.assign(
+      n.current,
+      Xe({ groupId: e })
+    );
+  });
+}
+function nt({
+  children: e,
+  className: t,
+  defaultLayout: n,
+  direction: o = "horizontal",
+  disableCursor: s,
+  disabled: i,
+  elementRef: a,
+  groupRef: r,
+  id: l,
+  onLayoutChange: c,
+  style: u
+}) {
+  const f = I({}), p = Q((g) => {
+    q(f.current, g) || (f.current = g, c?.(g));
+  }), h = J(l), [m, d] = M(!1), [v, S] = M(null), x = I({}), [z, y] = M(n ?? {}), [R, k] = M([]), [A, ne] = M([]), ze = ee(S, a);
+  Ye(h, r);
+  const we = Me(
+    () => ({
+      direction: o,
+      id: h,
+      registerPanel: (g) => (k((w) => le(o, [...w, g])), () => {
+        k((w) => w.filter((N) => N !== g));
+      }),
+      registerSeparator: (g) => (ne(
+        (w) => le(o, [...w, g])
+      ), () => {
+        ne(
+          (w) => w.filter((N) => N !== g)
+        );
+      })
+    }),
+    [o, h]
+  );
+  D(() => {
+    if (v !== null && R.length > 0) {
+      const g = {
+        defaultLayout: n,
+        direction: o,
+        disableCursor: !!s,
+        disabled: !!i,
+        element: v,
+        id: h,
+        inMemoryLayouts: x.current,
+        panels: R,
+        separators: A
+      }, w = Ve(g), U = O().mountedGroups.get(g);
+      U && (y(U.layout), p?.(U.layout));
+      const be = _.addListener(
+        "interactionStateChange",
+        (j) => {
+          switch (j.state) {
+            case "active":
+            case "hover": {
+              d(
+                j.hitRegions.some(
+                  ($) => $.group === g
+                )
+              );
+              break;
+            }
+          }
+        }
+      ), Le = _.addListener(
+        "mountedGroupsChange",
+        (j) => {
+          const $ = j.get(g);
+          $ && $.derivedPanelConstraints.length > 0 && (y($.layout), p?.($.layout));
+        }
+      );
+      return () => {
+        w(), be(), Le();
       };
-    } else {
-      throw new Error("localStorage not supported in this environment");
     }
-  } catch (error) {
-    console.error(error);
-    storageObject.getItem = () => null;
-    storageObject.setItem = () => {};
+  }, [
+    n,
+    o,
+    s,
+    i,
+    v,
+    h,
+    p,
+    R,
+    A
+  ]);
+  const oe = {
+    [ge]: m ? "none" : void 0
+  };
+  for (const g in z) {
+    const w = ye(h, g), N = z[g];
+    oe[w] = N;
   }
-}
-
-function getPanelGroupKey(autoSaveId) {
-  return `react-resizable-panels:${autoSaveId}`;
-}
-
-// Note that Panel ids might be user-provided (stable) or useId generated (non-deterministic)
-// so they should not be used as part of the serialization key.
-// Using the min/max size attributes should work well enough as a backup.
-// Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
-function getPanelKey(panels) {
-  return panels.map(panel => {
-    const {
-      constraints,
-      id,
-      idIsFromProps,
-      order
-    } = panel;
-    if (idIsFromProps) {
-      return id;
-    } else {
-      return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
+  return /* @__PURE__ */ F(Se.Provider, { value: we, children: /* @__PURE__ */ F(
+    "div",
+    {
+      className: t,
+      "data-group": !0,
+      "data-group-id": h,
+      "data-group-direction": o,
+      ref: ze,
+      style: {
+        ...u,
+        ...oe,
+        display: "flex",
+        flexDirection: o === "horizontal" ? "row" : "column",
+        flexWrap: "nowrap",
+        overflow: "hidden"
+      },
+      children: e
     }
-  }).sort((a, b) => a.localeCompare(b)).join(",");
+  ) });
 }
-function loadSerializedPanelGroupState(autoSaveId, storage) {
-  try {
-    const panelGroupKey = getPanelGroupKey(autoSaveId);
-    const serialized = storage.getItem(panelGroupKey);
-    if (serialized) {
-      const parsed = JSON.parse(serialized);
-      if (typeof parsed === "object" && parsed != null) {
-        return parsed;
-      }
-    }
-  } catch (error) {}
-  return null;
-}
-function loadPanelGroupState(autoSaveId, panels, storage) {
-  var _loadSerializedPanelG, _state$panelKey;
-  const state = (_loadSerializedPanelG = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG !== void 0 ? _loadSerializedPanelG : {};
-  const panelKey = getPanelKey(panels);
-  return (_state$panelKey = state[panelKey]) !== null && _state$panelKey !== void 0 ? _state$panelKey : null;
+function xe(e) {
+  return `react-resizable-panels:${e}`;
 }
-function savePanelGroupState(autoSaveId, panels, panelSizesBeforeCollapse, sizes, storage) {
-  var _loadSerializedPanelG2;
-  const panelGroupKey = getPanelGroupKey(autoSaveId);
-  const panelKey = getPanelKey(panels);
-  const state = (_loadSerializedPanelG2 = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG2 !== void 0 ? _loadSerializedPanelG2 : {};
-  state[panelKey] = {
-    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
-    layout: sizes
-  };
+function Ze({
+  id: e,
+  storage: t
+}) {
   try {
-    storage.setItem(panelGroupKey, JSON.stringify(state));
-  } catch (error) {
-    console.error(error);
+    const n = xe(e), o = t.getItem(n);
+    if (o)
+      return JSON.parse(o);
+  } catch (n) {
+    console.error(n);
   }
 }
-
-// All units must be in percentages; pixel values should be pre-converted
-function validatePanelGroupLayout({
-  layout: prevLayout,
-  panelConstraints
+function qe({
+  id: e,
+  layout: t,
+  storage: n
 }) {
-  const nextLayout = [...prevLayout];
-  const nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
-
-  // Validate layout expectations
-  if (nextLayout.length !== panelConstraints.length) {
-    throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map(size => `${size}%`).join(", ")}`);
-  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
-    for (let index = 0; index < panelConstraints.length; index++) {
-      const unsafeSize = nextLayout[index];
-      assert(unsafeSize != null, `No layout data found for index ${index}`);
-      const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
-      nextLayout[index] = safeSize;
-    }
-  }
-  let remainingSize = 0;
-
-  // First pass: Validate the proposed layout given each panel's constraints
-  for (let index = 0; index < panelConstraints.length; index++) {
-    const unsafeSize = nextLayout[index];
-    assert(unsafeSize != null, `No layout data found for index ${index}`);
-    const safeSize = resizePanel({
-      panelConstraints,
-      panelIndex: index,
-      size: unsafeSize
-    });
-    if (unsafeSize != safeSize) {
-      remainingSize += unsafeSize - safeSize;
-      nextLayout[index] = safeSize;
-    }
-  }
-
-  // If there is additional, left over space, assign it to any panel(s) that permits it
-  // (It's not worth taking multiple additional passes to evenly distribute)
-  if (!fuzzyNumbersEqual(remainingSize, 0)) {
-    for (let index = 0; index < panelConstraints.length; index++) {
-      const prevSize = nextLayout[index];
-      assert(prevSize != null, `No layout data found for index ${index}`);
-      const unsafeSize = prevSize + remainingSize;
-      const safeSize = resizePanel({
-        panelConstraints,
-        panelIndex: index,
-        size: unsafeSize
-      });
-      if (prevSize !== safeSize) {
-        remainingSize -= safeSize - prevSize;
-        nextLayout[index] = safeSize;
-
-        // Once we've used up the remainder, bail
-        if (fuzzyNumbersEqual(remainingSize, 0)) {
-          break;
-        }
-      }
-    }
+  try {
+    const o = xe(e);
+    n.setItem(o, JSON.stringify(t));
+  } catch (o) {
+    console.error(o);
   }
-  return nextLayout;
 }
-
-const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
-const defaultStorage = {
-  getItem: name => {
-    initializeDefaultStorage(defaultStorage);
-    return defaultStorage.getItem(name);
-  },
-  setItem: (name, value) => {
-    initializeDefaultStorage(defaultStorage);
-    defaultStorage.setItem(name, value);
-  }
-};
-const debounceMap = {};
-function PanelGroupWithForwardedRef({
-  autoSaveId = null,
-  children,
-  className: classNameFromProps = "",
-  direction,
-  forwardedRef,
-  id: idFromProps = null,
-  onLayout = null,
-  keyboardResizeBy = null,
-  storage = defaultStorage,
-  style: styleFromProps,
-  tagName: Type = "div",
-  ...rest
+function ot({
+  groupId: e,
+  storage: t = localStorage
 }) {
-  const groupId = useUniqueId(idFromProps);
-  const panelGroupElementRef = useRef(null);
-  const [dragState, setDragState] = useState(null);
-  const [layout, setLayout] = useState([]);
-  const forceUpdate = useForceUpdate();
-  const panelIdToLastNotifiedSizeMapRef = useRef({});
-  const panelSizeBeforeCollapseRef = useRef(new Map());
-  const prevDeltaRef = useRef(0);
-  const committedValuesRef = useRef({
-    autoSaveId,
-    direction,
-    dragState,
-    id: groupId,
-    keyboardResizeBy,
-    onLayout,
-    storage
-  });
-  const eagerValuesRef = useRef({
-    layout,
-    panelDataArray: [],
-    panelDataArrayChanged: false
-  });
-  useRef({
-    didLogIdAndOrderWarning: false,
-    didLogPanelConstraintsWarning: false,
-    prevPanelIds: []
-  });
-  useImperativeHandle(forwardedRef, () => ({
-    getId: () => committedValuesRef.current.id,
-    getLayout: () => {
-      const {
-        layout
-      } = eagerValuesRef.current;
-      return layout;
+  const n = I(null);
+  n.current === null && (n.current = Ze({
+    id: e,
+    storage: t
+  }));
+  const o = ce(
+    (s) => qe({
+      id: e,
+      layout: s,
+      storage: t
+    }),
+    [e, t]
+  );
+  return {
+    defaultLayout: n.current,
+    onLayoutChange: o
+  };
+}
+function it() {
+  return M(null);
+}
+function rt() {
+  return I(null);
+}
+function te() {
+  const e = Ge(Se);
+  return E(e, "Unexpected"), e;
+}
+function Je({
+  groupId: e,
+  panelId: t
+}) {
+  const n = () => {
+    const { mountedGroups: a } = O();
+    for (const [r, { derivedPanelConstraints: l, layout: c }] of a)
+      if (r.id === e)
+        return { derivedPanelConstraints: l, group: r, layout: c };
+    throw Error(`Group ${e} not found`);
+  }, o = () => {
+    const a = n().derivedPanelConstraints.find(
+      (r) => r.panelId === t
+    );
+    if (a !== void 0)
+      return a;
+    throw Error(`Panel constraints not found for Panel ${t}`);
+  }, s = () => {
+    const a = n().group.panels.find((r) => r.id === t);
+    if (a !== void 0)
+      return a;
+    throw Error(`Layout not found for Panel ${t}`);
+  }, i = () => {
+    const a = n().layout[t];
+    if (a !== void 0)
+      return a;
+    throw Error(`Layout not found for Panel ${t}`);
+  };
+  return {
+    collapse: () => {
+      const { collapsible: a, collapsedSize: r } = o();
+      i();
     },
-    setLayout: unsafeLayout => {
-      const {
-        onLayout
-      } = committedValuesRef.current;
-      const {
-        layout: prevLayout,
-        panelDataArray
-      } = eagerValuesRef.current;
-      const safeLayout = validatePanelGroupLayout({
-        layout: unsafeLayout,
-        panelConstraints: panelDataArray.map(panelData => panelData.constraints)
-      });
-      if (!areEqual(prevLayout, safeLayout)) {
-        setLayout(safeLayout);
-        eagerValuesRef.current.layout = safeLayout;
-        if (onLayout) {
-          onLayout(safeLayout);
+    expand: () => {
+      const { collapsible: a, collapsedSize: r, minSize: l } = o();
+      i();
+    },
+    getSize: () => {
+      const { group: a } = n(), r = i(), { element: l } = s(), c = a.direction === "horizontal" ? l.offsetWidth : l.offsetHeight;
+      return {
+        asPercentage: r,
+        inPixels: c
+      };
+    },
+    isCollapsed: () => {
+      const { collapsible: a, collapsedSize: r } = o(), l = i();
+      return a && b(r, l);
+    },
+    resize: (a) => {
+      if (i() !== a)
+        switch (typeof a) {
+          case "number": {
+            const { group: l } = n(), c = Z({ group: l });
+            L(a / c * 100);
+            break;
+          }
         }
-        callPanelCallbacks(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
-      }
     }
-  }), []);
-  useIsomorphicLayoutEffect(() => {
-    committedValuesRef.current.autoSaveId = autoSaveId;
-    committedValuesRef.current.direction = direction;
-    committedValuesRef.current.dragState = dragState;
-    committedValuesRef.current.id = groupId;
-    committedValuesRef.current.onLayout = onLayout;
-    committedValuesRef.current.storage = storage;
+  };
+}
+function Qe(e, t) {
+  const { id: n } = te(), o = I({
+    collapse: K,
+    expand: K,
+    getSize: () => ({
+      asPercentage: 0,
+      inPixels: 0
+    }),
+    isCollapsed: () => !1,
+    resize: K
   });
-  useWindowSplitterPanelGroupBehavior({
-    committedValuesRef,
-    eagerValuesRef,
-    groupId,
-    layout,
-    panelDataArray: eagerValuesRef.current.panelDataArray,
-    setLayout,
-    panelGroupElement: panelGroupElementRef.current
+  ue(t, () => o.current, []), D(() => {
+    Object.assign(
+      o.current,
+      Je({ groupId: n, panelId: e })
+    );
   });
-  useEffect(() => {
-    const {
-      panelDataArray
-    } = eagerValuesRef.current;
-
-    // If this panel has been configured to persist sizing information, save sizes to local storage.
-    if (autoSaveId) {
-      if (layout.length === 0 || layout.length !== panelDataArray.length) {
-        return;
-      }
-      let debouncedSave = debounceMap[autoSaveId];
-
-      // Limit the frequency of localStorage updates.
-      if (debouncedSave == null) {
-        debouncedSave = debounce(savePanelGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
-        debounceMap[autoSaveId] = debouncedSave;
-      }
-
-      // Clone mutable data before passing to the debounced function,
-      // else we run the risk of saving an incorrect combination of mutable and immutable values to state.
-      const clonedPanelDataArray = [...panelDataArray];
-      const clonedPanelSizesBeforeCollapse = new Map(panelSizeBeforeCollapseRef.current);
-      debouncedSave(autoSaveId, clonedPanelDataArray, clonedPanelSizesBeforeCollapse, layout, storage);
-    }
-  }, [autoSaveId, layout, storage]);
-
-  // DEV warnings
-  useEffect(() => {
+}
+function st({
+  children: e,
+  className: t,
+  collapsedSize: n = 0,
+  collapsible: o = !1,
+  defaultSize: s,
+  elementRef: i,
+  id: a,
+  maxSize: r = "100",
+  minSize: l = "0",
+  onResize: c,
+  panelRef: u,
+  style: f
+}) {
+  const p = !!a, h = J(a), [m, d] = M(null), v = ee(d, i), { id: S, registerPanel: x } = te(), z = c !== null, y = Q((k) => {
+    c?.(k);
   });
-
-  // External APIs are safe to memoize via committed values ref
-  const collapsePanel = useCallback(panelData => {
-    const {
-      onLayout
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    if (panelData.constraints.collapsible) {
-      const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-      const {
-        collapsedSize = 0,
-        panelSize,
-        pivotIndices
-      } = panelDataHelper(panelDataArray, panelData, prevLayout);
-      assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
-      if (!fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
-        // Store size before collapse;
-        // This is the size that gets restored if the expand() API is used.
-        panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
-        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
-        const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
-        const nextLayout = adjustLayoutByDelta({
-          delta,
-          initialLayout: prevLayout,
-          panelConstraints: panelConstraintsArray,
-          pivotIndices,
-          prevLayout,
-          trigger: "imperative-api"
-        });
-        if (!compareLayouts(prevLayout, nextLayout)) {
-          setLayout(nextLayout);
-          eagerValuesRef.current.layout = nextLayout;
-          if (onLayout) {
-            onLayout(nextLayout);
-          }
-          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-        }
-      }
-    }
-  }, []);
-
-  // External APIs are safe to memoize via committed values ref
-  const expandPanel = useCallback((panelData, minSizeOverride) => {
-    const {
-      onLayout
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    if (panelData.constraints.collapsible) {
-      const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-      const {
-        collapsedSize = 0,
-        panelSize = 0,
-        minSize: minSizeFromProps = 0,
-        pivotIndices
-      } = panelDataHelper(panelDataArray, panelData, prevLayout);
-      const minSize = minSizeOverride !== null && minSizeOverride !== void 0 ? minSizeOverride : minSizeFromProps;
-      if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
-        // Restore this panel to the size it was before it was collapsed, if possible.
-        const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
-        const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
-        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
-        const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
-        const nextLayout = adjustLayoutByDelta({
-          delta,
-          initialLayout: prevLayout,
-          panelConstraints: panelConstraintsArray,
-          pivotIndices,
-          prevLayout,
-          trigger: "imperative-api"
-        });
-        if (!compareLayouts(prevLayout, nextLayout)) {
-          setLayout(nextLayout);
-          eagerValuesRef.current.layout = nextLayout;
-          if (onLayout) {
-            onLayout(nextLayout);
-          }
-          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-        }
-      }
-    }
-  }, []);
-
-  // External APIs are safe to memoize via committed values ref
-  const getPanelSize = useCallback(panelData => {
-    const {
-      layout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const {
-      panelSize
-    } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
-    return panelSize;
-  }, []);
-
-  // This API should never read from committedValuesRef
-  const getPanelStyle = useCallback((panelData, defaultSize) => {
-    const {
-      panelDataArray
-    } = eagerValuesRef.current;
-    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
-    return computePanelFlexBoxStyle({
-      defaultSize,
-      dragState,
-      layout,
-      panelData: panelDataArray,
-      panelIndex
-    });
-  }, [dragState, layout]);
-
-  // External APIs are safe to memoize via committed values ref
-  const isPanelCollapsed = useCallback(panelData => {
-    const {
-      layout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const {
-      collapsedSize = 0,
-      collapsible,
-      panelSize
-    } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
-    return collapsible === true && fuzzyNumbersEqual$1(panelSize, collapsedSize);
-  }, []);
-
-  // External APIs are safe to memoize via committed values ref
-  const isPanelExpanded = useCallback(panelData => {
-    const {
-      layout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const {
-      collapsedSize = 0,
-      collapsible,
-      panelSize
-    } = panelDataHelper(panelDataArray, panelData, layout);
-    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
-    return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
-  }, []);
-  const registerPanel = useCallback(panelData => {
-    const {
-      panelDataArray
-    } = eagerValuesRef.current;
-    panelDataArray.push(panelData);
-    panelDataArray.sort((panelA, panelB) => {
-      const orderA = panelA.order;
-      const orderB = panelB.order;
-      if (orderA == null && orderB == null) {
-        return 0;
-      } else if (orderA == null) {
-        return -1;
-      } else if (orderB == null) {
-        return 1;
-      } else {
-        return orderA - orderB;
-      }
-    });
-    eagerValuesRef.current.panelDataArrayChanged = true;
-    forceUpdate();
-  }, [forceUpdate]);
-
-  // (Re)calculate group layout whenever panels are registered or unregistered.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useIsomorphicLayoutEffect(() => {
-    if (eagerValuesRef.current.panelDataArrayChanged) {
-      eagerValuesRef.current.panelDataArrayChanged = false;
-      const {
-        autoSaveId,
-        onLayout,
-        storage
-      } = committedValuesRef.current;
-      const {
-        layout: prevLayout,
-        panelDataArray
-      } = eagerValuesRef.current;
-
-      // If this panel has been configured to persist sizing information,
-      // default size should be restored from local storage if possible.
-      let unsafeLayout = null;
-      if (autoSaveId) {
-        const state = loadPanelGroupState(autoSaveId, panelDataArray, storage);
-        if (state) {
-          panelSizeBeforeCollapseRef.current = new Map(Object.entries(state.expandToSizes));
-          unsafeLayout = state.layout;
+  D(() => {
+    if (m !== null)
+      return x({
+        element: m,
+        id: h,
+        idIsStable: p,
+        onResize: z ? y : void 0,
+        panelConstraints: {
+          collapsedSize: n,
+          collapsible: o,
+          defaultSize: s,
+          maxSize: r,
+          minSize: l
         }
-      }
-      if (unsafeLayout == null) {
-        unsafeLayout = calculateUnsafeDefaultLayout({
-          panelDataArray
-        });
-      }
-
-      // Validate even saved layouts in case something has changed since last render
-      // e.g. for pixel groups, this could be the size of the window
-      const nextLayout = validatePanelGroupLayout({
-        layout: unsafeLayout,
-        panelConstraints: panelDataArray.map(panelData => panelData.constraints)
       });
-      if (!areEqual(prevLayout, nextLayout)) {
-        setLayout(nextLayout);
-        eagerValuesRef.current.layout = nextLayout;
-        if (onLayout) {
-          onLayout(nextLayout);
+  }, [
+    n,
+    o,
+    s,
+    m,
+    z,
+    h,
+    p,
+    r,
+    l,
+    y,
+    x
+  ]), Qe(h, u);
+  const R = ye(S, h);
+  return /* @__PURE__ */ F(
+    "div",
+    {
+      "data-panel": !0,
+      "data-panel-id": h,
+      ref: v,
+      style: {
+        flexBasis: 0,
+        flexGrow: `var(${R}, 1)`,
+        flexShrink: 1,
+        // Prevent Panel content from interfering with panel size
+        overflow: "hidden",
+        // Disable pointer events inside of a panel during resize
+        // This avoid edge cases like nested iframes
+        pointerEvents: `var(${ge})`
+      },
+      children: /* @__PURE__ */ F(
+        "div",
+        {
+          className: t,
+          style: {
+            width: "100%",
+            height: "100%",
+            ...f
+          },
+          children: e
         }
-        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-      }
+      )
     }
-  });
-
-  // Reset the cached layout if hidden by the Activity/Offscreen API
-  useIsomorphicLayoutEffect(() => {
-    const eagerValues = eagerValuesRef.current;
-    return () => {
-      eagerValues.layout = [];
-    };
-  }, []);
-  const registerResizeHandle = useCallback(dragHandleId => {
-    let isRTL = false;
-    const panelGroupElement = panelGroupElementRef.current;
-    if (panelGroupElement) {
-      const style = window.getComputedStyle(panelGroupElement, null);
-      if (style.getPropertyValue("direction") === "rtl") {
-        isRTL = true;
-      }
-    }
-    return function resizeHandler(event) {
-      event.preventDefault();
-      const panelGroupElement = panelGroupElementRef.current;
-      if (!panelGroupElement) {
-        return () => null;
-      }
-      const {
-        direction,
-        dragState,
-        id: groupId,
-        keyboardResizeBy,
-        onLayout
-      } = committedValuesRef.current;
-      const {
-        layout: prevLayout,
-        panelDataArray
-      } = eagerValuesRef.current;
-      const {
-        initialLayout
-      } = dragState !== null && dragState !== void 0 ? dragState : {};
-      const pivotIndices = determinePivotIndices(groupId, dragHandleId, panelGroupElement);
-      let delta = calculateDeltaPercentage(event, dragHandleId, direction, dragState, keyboardResizeBy, panelGroupElement);
-      const isHorizontal = direction === "horizontal";
-      if (isHorizontal && isRTL) {
-        delta = -delta;
-      }
-      const panelConstraints = panelDataArray.map(panelData => panelData.constraints);
-      const nextLayout = adjustLayoutByDelta({
-        delta,
-        initialLayout: initialLayout !== null && initialLayout !== void 0 ? initialLayout : prevLayout,
-        panelConstraints,
-        pivotIndices,
-        prevLayout,
-        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
-      });
-      const layoutChanged = !compareLayouts(prevLayout, nextLayout);
-
-      // Only update the cursor for layout changes triggered by touch/mouse events (not keyboard)
-      // Update the cursor even if the layout hasn't changed (we may need to show an invalid cursor state)
-      if (isPointerEvent(event) || isMouseEvent(event)) {
-        // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
-        // In this case, Panel sizes might not change–
-        // but updating cursor in this scenario would cause a flicker.
-        if (prevDeltaRef.current != delta) {
-          prevDeltaRef.current = delta;
-          if (!layoutChanged && delta !== 0) {
-            // If the pointer has moved too far to resize the panel any further, note this so we can update the cursor.
-            // This mimics VS Code behavior.
-            if (isHorizontal) {
-              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX);
-            } else {
-              reportConstraintsViolation(dragHandleId, delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX);
-            }
-          } else {
-            reportConstraintsViolation(dragHandleId, 0);
-          }
-        }
-      }
-      if (layoutChanged) {
-        setLayout(nextLayout);
-        eagerValuesRef.current.layout = nextLayout;
-        if (onLayout) {
-          onLayout(nextLayout);
-        }
-        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-      }
-    };
-  }, []);
-
-  // External APIs are safe to memoize via committed values ref
-  const resizePanel = useCallback((panelData, unsafePanelSize) => {
-    const {
-      onLayout
-    } = committedValuesRef.current;
-    const {
-      layout: prevLayout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints);
-    const {
-      panelSize,
-      pivotIndices
-    } = panelDataHelper(panelDataArray, panelData, prevLayout);
-    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
-    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
-    const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
-    const nextLayout = adjustLayoutByDelta({
-      delta,
-      initialLayout: prevLayout,
-      panelConstraints: panelConstraintsArray,
-      pivotIndices,
-      prevLayout,
-      trigger: "imperative-api"
-    });
-    if (!compareLayouts(prevLayout, nextLayout)) {
-      setLayout(nextLayout);
-      eagerValuesRef.current.layout = nextLayout;
-      if (onLayout) {
-        onLayout(nextLayout);
-      }
-      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-    }
-  }, []);
-  const reevaluatePanelConstraints = useCallback((panelData, prevConstraints) => {
-    const {
-      layout,
-      panelDataArray
-    } = eagerValuesRef.current;
-    const {
-      collapsedSize: prevCollapsedSize = 0,
-      collapsible: prevCollapsible
-    } = prevConstraints;
-    const {
-      collapsedSize: nextCollapsedSize = 0,
-      collapsible: nextCollapsible,
-      maxSize: nextMaxSize = 100,
-      minSize: nextMinSize = 0
-    } = panelData.constraints;
-    const {
-      panelSize: prevPanelSize
-    } = panelDataHelper(panelDataArray, panelData, layout);
-    if (prevPanelSize == null) {
-      // It's possible that the panels in this group have changed since the last render
-      return;
-    }
-    if (prevCollapsible && nextCollapsible && fuzzyNumbersEqual$1(prevPanelSize, prevCollapsedSize)) {
-      if (!fuzzyNumbersEqual$1(prevCollapsedSize, nextCollapsedSize)) {
-        resizePanel(panelData, nextCollapsedSize);
-      }
-    } else if (prevPanelSize < nextMinSize) {
-      resizePanel(panelData, nextMinSize);
-    } else if (prevPanelSize > nextMaxSize) {
-      resizePanel(panelData, nextMaxSize);
-    }
-  }, [resizePanel]);
-
-  // TODO Multiple drag handles can be active at the same time so this API is a bit awkward now
-  const startDragging = useCallback((dragHandleId, event) => {
-    const {
-      direction
-    } = committedValuesRef.current;
-    const {
-      layout
-    } = eagerValuesRef.current;
-    if (!panelGroupElementRef.current) {
-      return;
-    }
-    const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
-    assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
-    const initialCursorPosition = getResizeEventCursorPosition(direction, event);
-    setDragState({
-      dragHandleId,
-      dragHandleRect: handleElement.getBoundingClientRect(),
-      initialCursorPosition,
-      initialLayout: layout
-    });
-  }, []);
-  const stopDragging = useCallback(() => {
-    setDragState(null);
-  }, []);
-  const unregisterPanel = useCallback(panelData => {
-    const {
-      panelDataArray
-    } = eagerValuesRef.current;
-    const index = findPanelDataIndex(panelDataArray, panelData);
-    if (index >= 0) {
-      panelDataArray.splice(index, 1);
-
-      // TRICKY
-      // When a panel is removed from the group, we should delete the most recent prev-size entry for it.
-      // If we don't do this, then a conditionally rendered panel might not call onResize when it's re-mounted.
-      // Strict effects mode makes this tricky though because all panels will be registered, unregistered, then re-registered on mount.
-      delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
-      eagerValuesRef.current.panelDataArrayChanged = true;
-      forceUpdate();
-    }
-  }, [forceUpdate]);
-  const context = useMemo(() => ({
-    collapsePanel,
-    direction,
-    dragState,
-    expandPanel,
-    getPanelSize,
-    getPanelStyle,
-    groupId,
-    isPanelCollapsed,
-    isPanelExpanded,
-    reevaluatePanelConstraints,
-    registerPanel,
-    registerResizeHandle,
-    resizePanel,
-    startDragging,
-    stopDragging,
-    unregisterPanel,
-    panelGroupElement: panelGroupElementRef.current
-  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, reevaluatePanelConstraints, registerPanel, registerResizeHandle, resizePanel, startDragging, stopDragging, unregisterPanel]);
-  const style = {
-    display: "flex",
-    flexDirection: direction === "horizontal" ? "row" : "column",
-    height: "100%",
-    overflow: "hidden",
-    width: "100%"
-  };
-  return createElement(PanelGroupContext.Provider, {
-    value: context
-  }, createElement(Type, {
-    ...rest,
-    children,
-    className: classNameFromProps,
-    id: idFromProps,
-    ref: panelGroupElementRef,
-    style: {
-      ...style,
-      ...styleFromProps
-    },
-    // CSS selectors
-    [DATA_ATTRIBUTES.group]: "",
-    [DATA_ATTRIBUTES.groupDirection]: direction,
-    [DATA_ATTRIBUTES.groupId]: groupId
-  }));
+  );
 }
-const PanelGroup = forwardRef((props, ref) => createElement(PanelGroupWithForwardedRef, {
-  ...props,
-  forwardedRef: ref
-}));
-PanelGroupWithForwardedRef.displayName = "PanelGroup";
-PanelGroup.displayName = "forwardRef(PanelGroup)";
-function findPanelDataIndex(panelDataArray, panelData) {
-  return panelDataArray.findIndex(prevPanelData => prevPanelData === panelData || prevPanelData.id === panelData.id);
+function at() {
+  return M(null);
 }
-function panelDataHelper(panelDataArray, panelData, layout) {
-  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
-  const isLastPanel = panelIndex === panelDataArray.length - 1;
-  const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
-  const panelSize = layout[panelIndex];
-  return {
-    ...panelData.constraints,
-    panelSize,
-    pivotIndices
-  };
+function lt() {
+  return I(null);
 }
-
-// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
-
-function useWindowSplitterResizeHandlerBehavior({
-  disabled,
-  handleId,
-  resizeHandler,
-  panelGroupElement
+function ct({
+  children: e,
+  className: t,
+  elementRef: n,
+  id: o,
+  style: s
 }) {
-  useEffect(() => {
-    if (disabled || resizeHandler == null || panelGroupElement == null) {
-      return;
-    }
-    const handleElement = getResizeHandleElement(handleId, panelGroupElement);
-    if (handleElement == null) {
-      return;
+  const i = J(o), [a, r] = M(null), [l, c] = M("inactive"), u = ee(r, n), { registerSeparator: f } = te();
+  return D(() => {
+    if (a !== null) {
+      const p = {
+        element: a,
+        id: i
+      }, h = f(p), m = _.addListener(
+        "interactionStateChange",
+        (d) => {
+          c(
+            d.state !== "inactive" && d.hitRegions.some(
+              (v) => v.separator === p
+            ) ? d.state : "inactive"
+          );
+        }
+      );
+      return () => {
+        h(), m();
+      };
     }
-    const onKeyDown = event => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      switch (event.key) {
-        case "ArrowDown":
-        case "ArrowLeft":
-        case "ArrowRight":
-        case "ArrowUp":
-        case "End":
-        case "Home":
-          {
-            event.preventDefault();
-            resizeHandler(event);
-            break;
-          }
-        case "F6":
-          {
-            event.preventDefault();
-            const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
-            assert(groupId, `No group element found for id "${groupId}"`);
-            const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-            const index = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
-            assert(index !== null, `No resize element found for id "${handleId}"`);
-            const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
-            const nextHandle = handles[nextIndex];
-            nextHandle.focus();
-            break;
-          }
+  }, [a, i, f]), /* @__PURE__ */ F(
+    "div",
+    {
+      children: e,
+      className: t,
+      "data-separator": !0,
+      "data-separator-id": i,
+      "data-separator-state": l,
+      ref: u,
+      style: {
+        flexBasis: "auto",
+        ...s,
+        flexGrow: 0,
+        flexShrink: 0
       }
-    };
-    handleElement.addEventListener("keydown", onKeyDown);
-    return () => {
-      handleElement.removeEventListener("keydown", onKeyDown);
-    };
-  }, [panelGroupElement, disabled, handleId, resizeHandler]);
-}
-
-function PanelResizeHandle({
-  children = null,
-  className: classNameFromProps = "",
-  disabled = false,
-  hitAreaMargins,
-  id: idFromProps,
-  onBlur,
-  onClick,
-  onDragging,
-  onFocus,
-  onPointerDown,
-  onPointerUp,
-  style: styleFromProps = {},
-  tabIndex = 0,
-  tagName: Type = "div",
-  ...rest
-}) {
-  var _hitAreaMargins$coars, _hitAreaMargins$fine;
-  const elementRef = useRef(null);
-
-  // Use a ref to guard against users passing inline props
-  const callbacksRef = useRef({
-    onClick,
-    onDragging,
-    onPointerDown,
-    onPointerUp
-  });
-  useEffect(() => {
-    callbacksRef.current.onClick = onClick;
-    callbacksRef.current.onDragging = onDragging;
-    callbacksRef.current.onPointerDown = onPointerDown;
-    callbacksRef.current.onPointerUp = onPointerUp;
-  });
-  const panelGroupContext = useContext(PanelGroupContext);
-  if (panelGroupContext === null) {
-    throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
-  }
-  const {
-    direction,
-    groupId,
-    registerResizeHandle: registerResizeHandleWithParentGroup,
-    startDragging,
-    stopDragging,
-    panelGroupElement
-  } = panelGroupContext;
-  const resizeHandleId = useUniqueId(idFromProps);
-  const [state, setState] = useState("inactive");
-  const [isFocused, setIsFocused] = useState(false);
-  const [resizeHandler, setResizeHandler] = useState(null);
-  const committedValuesRef = useRef({
-    state
-  });
-  useIsomorphicLayoutEffect(() => {
-    committedValuesRef.current.state = state;
-  });
-  useEffect(() => {
-    if (disabled) {
-      setResizeHandler(null);
-    } else {
-      const resizeHandler = registerResizeHandleWithParentGroup(resizeHandleId);
-      setResizeHandler(() => resizeHandler);
     }
-  }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
-
-  // Extract hit area margins before passing them to the effect's dependency array
-  // so that inline object values won't trigger re-renders
-  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== void 0 ? _hitAreaMargins$coars : 15;
-  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === void 0 ? void 0 : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== void 0 ? _hitAreaMargins$fine : 5;
-  useEffect(() => {
-    if (disabled || resizeHandler == null) {
-      return;
-    }
-    const element = elementRef.current;
-    assert(element, "Element ref not attached");
-    let didMove = false;
-    const setResizeHandlerState = (action, isActive, event) => {
-      if (!isActive) {
-        setState("inactive");
-        return;
-      }
-      switch (action) {
-        case "down":
-          {
-            setState("drag");
-            didMove = false;
-            assert(event, 'Expected event to be defined for "down" action');
-            startDragging(resizeHandleId, event);
-            const {
-              onDragging,
-              onPointerDown
-            } = callbacksRef.current;
-            onDragging === null || onDragging === void 0 ? void 0 : onDragging(true);
-            onPointerDown === null || onPointerDown === void 0 ? void 0 : onPointerDown();
-            break;
-          }
-        case "move":
-          {
-            const {
-              state
-            } = committedValuesRef.current;
-            didMove = true;
-            if (state !== "drag") {
-              setState("hover");
-            }
-            assert(event, 'Expected event to be defined for "move" action');
-            resizeHandler(event);
-            break;
-          }
-        case "up":
-          {
-            setState("hover");
-            stopDragging();
-            const {
-              onClick,
-              onDragging,
-              onPointerUp
-            } = callbacksRef.current;
-            onDragging === null || onDragging === void 0 ? void 0 : onDragging(false);
-            onPointerUp === null || onPointerUp === void 0 ? void 0 : onPointerUp();
-            if (!didMove) {
-              onClick === null || onClick === void 0 ? void 0 : onClick();
-            }
-            break;
-          }
-      }
-    };
-    return registerResizeHandle(resizeHandleId, element, direction, {
-      coarse: coarseHitAreaMargins,
-      fine: fineHitAreaMargins
-    }, setResizeHandlerState);
-  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
-  useWindowSplitterResizeHandlerBehavior({
-    disabled,
-    handleId: resizeHandleId,
-    resizeHandler,
-    panelGroupElement
-  });
-  const style = {
-    touchAction: "none",
-    userSelect: "none"
-  };
-  return createElement(Type, {
-    ...rest,
-    children,
-    className: classNameFromProps,
-    id: idFromProps,
-    onBlur: () => {
-      setIsFocused(false);
-      onBlur === null || onBlur === void 0 ? void 0 : onBlur();
-    },
-    onFocus: () => {
-      setIsFocused(true);
-      onFocus === null || onFocus === void 0 ? void 0 : onFocus();
-    },
-    ref: elementRef,
-    role: "separator",
-    style: {
-      ...style,
-      ...styleFromProps
-    },
-    tabIndex,
-    // CSS selectors
-    [DATA_ATTRIBUTES.groupDirection]: direction,
-    [DATA_ATTRIBUTES.groupId]: groupId,
-    [DATA_ATTRIBUTES.resizeHandle]: "",
-    [DATA_ATTRIBUTES.resizeHandleActive]: state === "drag" ? "pointer" : isFocused ? "keyboard" : undefined,
-    [DATA_ATTRIBUTES.resizeHandleEnabled]: !disabled,
-    [DATA_ATTRIBUTES.resizeHandleId]: resizeHandleId,
-    [DATA_ATTRIBUTES.resizeHandleState]: state
-  });
-}
-PanelResizeHandle.displayName = "PanelResizeHandle";
-
-function usePanelGroupContext() {
-  const context = useContext(PanelGroupContext);
-  return {
-    direction: context === null || context === void 0 ? void 0 : context.direction,
-    groupId: context === null || context === void 0 ? void 0 : context.groupId
-  };
-}
-
-function getPanelElement(id, scope = document) {
-  const element = scope.querySelector(`[data-panel-id="${id}"]`);
-  if (element) {
-    return element;
-  }
-  return null;
-}
-
-function getPanelElementsForGroup(groupId, scope = document) {
-  return Array.from(scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
-}
-
-function getIntersectingRectangle(rectOne, rectTwo, strict) {
-  if (!intersects(rectOne, rectTwo, strict)) {
-    return {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    };
-  }
-  return {
-    x: Math.max(rectOne.x, rectTwo.x),
-    y: Math.max(rectOne.y, rectTwo.y),
-    width: Math.min(rectOne.x + rectOne.width, rectTwo.x + rectTwo.width) - Math.max(rectOne.x, rectTwo.x),
-    height: Math.min(rectOne.y + rectOne.height, rectTwo.y + rectTwo.height) - Math.max(rectOne.y, rectTwo.y)
-  };
-}
-
-export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
+  );
+}
+export {
+  nt as Group,
+  st as Panel,
+  ct as Separator,
+  ot as useDefaultLayout,
+  it as useGroupCallbackRef,
+  rt as useGroupRef,
+  at as usePanelCallbackRef,
+  lt as usePanelRef
+};
+//# sourceMappingURL=react-resizable-panels.js.map