react-resizable-panels 3.0.6 → 4.2.0

package/dist/react-resizable-panels.js

@@ -1,2488 +1,1803 @@
-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++;
-  }
-  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
+"use client";
+import { jsx as X } from "react/jsx-runtime";
+import { useId as Ke, useLayoutEffect as Xe, useEffect as Ce, useRef as I, useCallback as qe, createContext as Ye, useImperativeHandle as Ee, useState as D, useMemo as se, useSyncExternalStore as Ze, useContext as Je } from "react";
+function z(e, t = "Assertion error") {
+  if (!e)
+    throw Error(t);
+}
+function U({
+  group: e
 }) {
-  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);
-    }
-  });
-  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);
-    }
-  }), [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";
-    }
-  }
-  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;
-  }
+  const { orientation: t, panels: n } = e;
+  return n.reduce((o, r) => (o += t === "horizontal" ? r.element.offsetWidth : r.element.offsetHeight, o), 0);
 }
-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);
-    }
-    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;
+function ae(e, t) {
+  return t.sort(
+    e === "horizontal" ? Qe : et
+  );
 }
-
-function isKeyDown(event) {
-  return event.type === "keydown";
+function Qe(e, t) {
+  const n = e.element.offsetLeft - t.element.offsetLeft;
+  return n !== 0 ? n : e.element.offsetWidth - t.element.offsetWidth;
 }
-function isPointerEvent(event) {
-  return event.type.startsWith("pointer");
+function et(e, t) {
+  const n = e.element.offsetTop - t.element.offsetTop;
+  return n !== 0 ? n : e.element.offsetHeight - t.element.offsetHeight;
 }
-function isMouseEvent(event) {
-  return event.type.startsWith("mouse");
+function Me(e) {
+  return e !== null && typeof e == "object" && "nodeType" in e && e.nodeType === Node.ELEMENT_NODE;
 }
-
-function getResizeEventCoordinates(event) {
-  if (isPointerEvent(event)) {
-    if (event.isPrimary) {
-      return {
-        x: event.clientX,
-        y: event.clientY
-      };
-    }
-  } else if (isMouseEvent(event)) {
-    return {
-      x: event.clientX,
-      y: event.clientY
-    };
-  }
+function Ie(e, t) {
   return {
-    x: Infinity,
-    y: Infinity
+    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)
+    )
   };
 }
-
-function getInputType() {
-  if (typeof matchMedia === "function") {
-    return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
-  }
-}
-
-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;
-  }
-}
-
-// 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)
+function tt({
+  orientation: e,
+  rects: t,
+  targetRect: n
+}) {
+  const o = {
+    x: n.x + n.width / 2,
+    y: n.y + n.height / 2
   };
-  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;
+  let r, s = Number.MAX_VALUE;
+  for (const l of t) {
+    const { x: i, y: a } = Ie(o, l), u = e === "horizontal" ? i : a;
+    u < s && (s = u, r = l);
   }
-  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;
+  return z(r, "No rect found"), r;
+}
+function ke(e) {
+  const { element: t, orientation: n, panels: o, separators: r } = e, s = ae(
+    n,
+    Array.from(t.children).filter(Me).map((f) => ({ element: f }))
+  ).map(({ element: f }) => f), l = [];
+  let i = !1, a, u = [];
+  for (const f of s)
+    if (f.hasAttribute("data-panel")) {
+      const p = o.find(
+        (m) => m.element === f
+      );
+      if (p) {
+        if (a) {
+          const m = a.element.getBoundingClientRect(), h = f.getBoundingClientRect();
+          let c;
+          if (i) {
+            const d = n === "horizontal" ? new DOMRect(m.right, m.top, 0, m.height) : new DOMRect(
+              m.left,
+              m.bottom,
+              m.width,
+              0
+            ), y = n === "horizontal" ? new DOMRect(h.left, h.top, 0, h.height) : new DOMRect(h.left, h.top, h.width, 0);
+            switch (u.length) {
+              case 0: {
+                c = [
+                  d,
+                  y
+                ];
+                break;
+              }
+              case 1: {
+                const v = u[0], S = tt({
+                  orientation: n,
+                  rects: [m, h],
+                  targetRect: v.element.getBoundingClientRect()
+                });
+                c = [
+                  v,
+                  S === m ? y : d
+                ];
+                break;
+              }
+              default: {
+                c = u;
+                break;
+              }
+            }
+          } else
+            u.length ? c = u : c = [
+              n === "horizontal" ? new DOMRect(
+                m.right,
+                h.top,
+                h.left - m.right,
+                h.height
+              ) : new DOMRect(
+                h.left,
+                m.bottom,
+                h.width,
+                h.top - m.bottom
+              )
+            ];
+          for (const d of c)
+            l.push({
+              group: e,
+              groupSize: U({ group: e }),
+              panels: [a, p],
+              separator: "width" in d ? void 0 : d,
+              rect: "width" in d ? d : d.element.getBoundingClientRect()
+            });
+        }
+        i = !1, a = p, u = [];
+      }
+    } else if (f.hasAttribute("data-separator")) {
+      const p = r.find(
+        (m) => m.element === f
+      );
+      p ? u.push(p) : (a = void 0, u = []);
+    } else
+      i = !0;
+  return l;
+}
+function nt(e, t) {
+  const n = getComputedStyle(e), o = parseFloat(n.fontSize);
+  return t * o;
+}
+function ot(e, t) {
+  const n = getComputedStyle(e.ownerDocument.body), o = parseFloat(n.fontSize);
+  return t * o;
+}
+function it(e) {
+  return e / 100 * window.innerHeight;
+}
+function rt(e) {
+  return e / 100 * window.innerWidth;
+}
+function st(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 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);
-  }
-  return ancestors; // [ node, ... <body>, <html>, document ]
-}
-
-/** @param {HTMLElement} node */
-function get_parent(node) {
-  const {
-    parentNode
-  } = node;
-  if (parentNode && parentNode instanceof ShadowRoot) {
-    return parentNode.host;
-  }
-  return parentNode;
-}
-
-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
-  };
-  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);
+function ee({
+  groupSize: e,
+  panelElement: t,
+  styleProp: n
+}) {
+  let o;
+  const [r, s] = st(n);
+  switch (s) {
+    case "%": {
+      o = r / 100 * e;
+      break;
     }
-
-    // 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);
-      }
-      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);
+    case "px": {
+      o = r;
+      break;
     }
-  };
-}
-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();
+    case "rem": {
+      o = ot(t, r);
+      break;
     }
-  }
-}
-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
-    });
-  }
-  updateResizeHandlerStates("move", event);
-
-  // Update cursor based on return value(s) from active handles
-  updateCursor();
-  if (intersectingHandles.length > 0) {
-    event.preventDefault();
-  }
-}
-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();
+    case "em": {
+      o = nt(t, r);
+      break;
     }
-  }
-  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;
+    case "vh": {
+      o = it(r);
+      break;
+    }
+    case "vw": {
+      o = rt(r);
+      break;
     }
-    currentElement = currentElement.parentElement;
-  }
-  return false;
-}
-function recalculateIntersectingHandles({
-  target,
-  x,
-  y
-}) {
-  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;
-          }
-          currentElement = currentElement.parentElement;
-        }
-        if (didIntersect) {
-          return;
-        }
-      }
-      intersectingHandles.push(data);
+  return o;
+}
+function k(e) {
+  return parseFloat(e.toFixed(3));
+}
+function he(e) {
+  const { panels: t } = e, n = U({ group: e });
+  return n === 0 ? t.map((o) => ({
+    collapsedSize: 0,
+    collapsible: o.panelConstraints.collapsible === !0,
+    defaultSize: void 0,
+    minSize: 0,
+    maxSize: 100,
+    panelId: o.id
+  })) : t.map((o) => {
+    const { element: r, panelConstraints: s } = o;
+    let l = 0;
+    if (s.collapsedSize) {
+      const f = ee({
+        groupSize: n,
+        panelElement: r,
+        styleProp: s.collapsedSize
+      });
+      l = k(f / n * 100);
     }
-  });
-}
-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 i;
+    if (s.defaultSize) {
+      const f = ee({
+        groupSize: n,
+        panelElement: r,
+        styleProp: s.defaultSize
+      });
+      i = k(f / n * 100);
     }
+    let a = 0;
+    if (s.minSize) {
+      const f = ee({
+        groupSize: n,
+        panelElement: r,
+        styleProp: s.minSize
+      });
+      a = k(f / n * 100);
+    }
+    let u = 100;
+    if (s.maxSize) {
+      const f = ee({
+        groupSize: n,
+        panelElement: r,
+        styleProp: s.maxSize
+      });
+      u = k(f / n * 100);
+    }
+    return {
+      collapsedSize: l,
+      collapsible: s.collapsible === !0,
+      defaultSize: i,
+      minSize: a,
+      maxSize: u,
+      panelId: o.id
+    };
   });
-  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;
+class at {
+  #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);
+    };
   }
-  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);
+  emit(t, n) {
+    const o = this.#e[t];
+    if (o !== void 0)
+      if (o.length === 1)
+        o[0].call(null, n);
+      else {
+        let r = !1, s = null;
+        const l = Array.from(o);
+        for (let i = 0; i < l.length; i++) {
+          const a = l[i];
+          try {
+            a.call(null, n);
+          } catch (u) {
+            s === null && (r = !0, s = u);
+          }
         }
-      });
-    }
-    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);
+        if (r)
+          throw s;
       }
-    });
   }
-}
-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);
+  removeAllListeners() {
+    this.#e = {};
   }
-}
-
-function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
-  if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
-    return 0;
-  } else {
-    return actual > expected ? 1 : -1;
+  removeListener(t, n) {
+    const o = this.#e[t];
+    if (o !== void 0) {
+      const r = o.indexOf(n);
+      r >= 0 && o.splice(r, 1);
+    }
   }
 }
-function fuzzyNumbersEqual$1(actual, expected, fractionDigits = PRECISION) {
-  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
-}
-
-function fuzzyNumbersEqual(actual, expected, fractionDigits) {
-  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+function R(e, t, n = 0) {
+  return Math.abs(k(e) - k(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;
-}
-
-// Panel size must be in percentages; pixel values should be pre-converted
-function resizePanel({
-  panelConstraints: panelConstraintsArray,
-  panelIndex,
-  size
-}) {
-  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;
+let E = {
+  cursorFlags: 0,
+  interactionState: {
+    state: "inactive"
+  },
+  mountedGroups: /* @__PURE__ */ new Map()
+};
+const _ = new at();
+function G() {
+  return E;
+}
+function M(e) {
+  const t = typeof e == "function" ? e(E) : e;
+  if (E === t)
+    return E;
+  const n = E;
+  return E = {
+    ...E,
+    ...t
+  }, t.cursorFlags !== void 0 && _.emit("cursorFlagsChange", E.cursorFlags), t.interactionState !== void 0 && _.emit("interactionStateChange", E.interactionState), t.mountedGroups !== void 0 && (E.mountedGroups.forEach((o, r) => {
+    o.derivedPanelConstraints.forEach((s) => {
+      if (s.collapsible) {
+        const { layout: l } = n.mountedGroups.get(r) ?? {};
+        if (l) {
+          const i = R(
+            s.collapsedSize,
+            o.layout[s.panelId]
+          ), a = R(
+            s.collapsedSize,
+            l[s.panelId]
+          );
+          i && !a && (r.inMemoryLastExpandedPanelSizes[s.panelId] = l[s.panelId]);
+        }
       }
-    } 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
+    });
+  }), _.emit("mountedGroupsChange", E.mountedGroups)), E;
+}
+function lt(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 q(e, t) {
+  return R(e, t) ? 0 : e > t ? 1 : -1;
+}
+function W({
+  panelConstraints: e,
+  size: t
 }) {
-  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}`);
-            }
-          }
+  const {
+    collapsedSize: n = 0,
+    collapsible: o,
+    maxSize: r = 100,
+    minSize: s = 0
+  } = e;
+  if (q(t, s) < 0)
+    if (o) {
+      const l = (n + s) / 2;
+      q(t, l) < 0 ? t = n : t = s;
+    } else
+      t = s;
+  return t = Math.min(r, t), t = k(t), t;
+}
+function Y({
+  delta: e,
+  initialLayout: t,
+  panelConstraints: n,
+  pivotIndices: o,
+  prevLayout: r,
+  trigger: s
+}) {
+  if (R(e, 0))
+    return t;
+  const l = Object.values(t), i = Object.values(r), a = [...l], [u, f] = o;
+  z(u != null, "Invalid first pivot index"), z(f != null, "Invalid second pivot index");
+  let p = 0;
+  if (s === "keyboard") {
+    {
+      const c = e < 0 ? f : u, d = n[c];
+      z(
+        d,
+        `Panel constraints not found for index ${c}`
+      );
+      const {
+        collapsedSize: y = 0,
+        collapsible: v,
+        minSize: S = 0
+      } = d;
+      if (v) {
+        const x = l[c];
+        if (z(
+          x != null,
+          `Previous layout not found for panel index ${c}`
+        ), R(x, y)) {
+          const g = S - x;
+          q(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
-
-      {
-        // 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}`);
-            }
-          }
+    }
+    {
+      const c = e < 0 ? u : f, d = n[c];
+      z(
+        d,
+        `No panel constraints found for index ${c}`
+      );
+      const {
+        collapsedSize: y = 0,
+        collapsible: v,
+        minSize: S = 0
+      } = d;
+      if (v) {
+        const x = l[c];
+        if (z(
+          x != null,
+          `Previous layout not found for panel index ${c}`
+        ), R(x, S)) {
+          const g = x - y;
+          q(g, Math.abs(e)) > 0 && (e = e < 0 ? 0 - g : g);
         }
       }
     }
-    // DEBUG.push("");
   }
-
   {
-    // 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 c = e < 0 ? 1 : -1;
+    let d = e < 0 ? f : u, y = 0;
+    for (; ; ) {
+      const S = l[d];
+      z(
+        S != null,
+        `Previous layout not found for panel index ${d}`
+      );
+      const g = W({
+        panelConstraints: n[d],
         size: 100
-      });
-      const delta = maxSafeSize - prevSize;
-      // DEBUG.push(`  ${index}: ${prevSize} -> ${maxSafeSize}`);
-
-      maxAvailableDelta += delta;
-      index += increment;
-      if (index < 0 || index >= panelConstraintsArray.length) {
+      }) - S;
+      if (y += g, d += c, 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 v = Math.min(Math.abs(e), Math.abs(y));
+    e = e < 0 ? 0 - v : v;
   }
-
   {
-    // 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 ? u : f;
+    for (; d >= 0 && d < n.length; ) {
+      const y = Math.abs(e) - Math.abs(p), v = l[d];
+      z(
+        v != null,
+        `Previous layout not found for panel index ${d}`
+      );
+      const S = v - y, x = W({
+        panelConstraints: n[d],
+        size: S
       });
-      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 (!R(v, x) && (p += v - x, a[d] = x, p.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 (lt(i, a))
+    return r;
   {
-    // 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 c = e < 0 ? f : u, d = l[c];
+    z(
+      d != null,
+      `Previous layout not found for panel index ${c}`
+    );
+    const y = d + p, v = W({
+      panelConstraints: n[c],
+      size: y
     });
-
-    // 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 (a[c] = v, !R(v, y)) {
+      let S = y - v, g = e < 0 ? f : u;
+      for (; g >= 0 && g < n.length; ) {
+        const b = a[g];
+        z(
+          b != null,
+          `Previous layout not found for panel index ${g}`
+        );
+        const w = b + S, C = W({
+          panelConstraints: n[g],
+          size: w
         });
-        if (!fuzzyNumbersEqual(prevSize, safeSize)) {
-          deltaRemaining -= safeSize - prevSize;
-          nextLayout[index] = safeSize;
-        }
-        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
+        if (R(b, C) || (S -= C - b, a[g] = C), R(S, 0))
           break;
-        }
-        if (delta > 0) {
-          index--;
-        } else {
-          index++;
-        }
+        e > 0 ? g-- : g++;
       }
     }
   }
-  // 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
+  const m = Object.values(a).reduce(
+    (c, d) => d + c,
+    0
+  );
+  if (!R(m, 100, 0.1))
+    return r;
+  const h = Object.keys(r);
+  return a.reduce((c, d, y) => (c[h[y]] = d, c), {});
+}
+function ne(e) {
+  const t = e.parentElement;
+  z(t, "Parent group element not found");
+  const { mountedGroups: n } = G();
+  for (const [o] of n)
+    if (o.element === t)
+      return o;
+  throw Error("Could not find parent Group for separator element");
+}
+function K(e, t) {
+  if (Object.keys(e).length !== Object.keys(t).length)
+    return !1;
+  for (const n in e)
+    if (t[n] === void 0 || q(e[n], t[n]) !== 0)
+      return !1;
+  return !0;
+}
+function N({
+  layout: e,
+  panelConstraints: t
 }) {
-  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 o = [...Object.values(e)], r = o.reduce(
+    (i, a) => i + a,
+    0
+  );
+  if (o.length !== t.length)
+    throw Error(
+      `Invalid ${t.length} panel layout: ${o.map((i) => `${i}%`).join(", ")}`
+    );
+  if (!R(r, 100) && o.length > 0)
+    for (let i = 0; i < t.length; i++) {
+      const a = o[i];
+      z(a != null, `No layout data found for index ${i}`);
+      const u = 100 / r * a;
+      o[i] = u;
     }
-  });
-  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;
-  }
-  return null;
-}
-
-function getResizeHandleElement(id, scope = document) {
-  const element = scope.querySelector(`[${DATA_ATTRIBUTES.resizeHandleId}="${id}"]`);
-  if (element) {
-    return element;
+  let s = 0;
+  for (let i = 0; i < t.length; i++) {
+    const a = o[i];
+    z(a != null, `No layout data found for index ${i}`);
+    const u = W({
+      panelConstraints: t[i],
+      size: a
+    });
+    a != u && (s += a - u, o[i] = u);
   }
-  return null;
+  if (!R(s, 0))
+    for (let i = 0; i < t.length; i++) {
+      const a = o[i];
+      z(a != null, `No layout data found for index ${i}`);
+      const u = a + s, f = W({
+        panelConstraints: t[i],
+        size: u
+      });
+      if (a !== f && (s -= f - a, o[i] = f, R(s, 0)))
+        break;
+    }
+  const l = Object.keys(e);
+  return o.reduce((i, a, u) => (i[l[u]] = a, i), {});
 }
-
-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];
-}
-
-// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
-
-function useWindowSplitterPanelGroupBehavior({
-  committedValuesRef,
-  eagerValuesRef,
-  groupId,
-  layout,
-  panelDataArray,
-  panelGroupElement,
-  setLayout
+function Ge({
+  groupId: e
 }) {
-  useRef({
-    didWarnAboutMissingResizeHandle: false
-  });
-  useIsomorphicLayoutEffect(() => {
-    if (!panelGroupElement) {
-      return;
-    }
-    const resizeHandleElements = getResizeHandleElementsForGroup(groupId, panelGroupElement);
-    for (let index = 0; index < panelDataArray.length - 1; index++) {
+  const t = () => {
+    const { mountedGroups: n } = G();
+    for (const [o, r] of n)
+      if (o.id === e)
+        return { group: o, ...r };
+    throw Error(`Could not find Group with id "${e}"`);
+  };
+  return {
+    getLayout() {
+      const { defaultLayoutDeferred: n, layout: o } = t();
+      return n ? {} : o;
+    },
+    setLayout(n) {
       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) : "");
-      }
-    }
-    return () => {
-      resizeHandleElements.forEach((resizeHandleElement, index) => {
-        resizeHandleElement.removeAttribute("aria-controls");
-        resizeHandleElement.removeAttribute("aria-valuemax");
-        resizeHandleElement.removeAttribute("aria-valuemin");
-        resizeHandleElement.removeAttribute("aria-valuenow");
+        defaultLayoutDeferred: o,
+        derivedPanelConstraints: r,
+        group: s,
+        layout: l,
+        separatorToPanels: i
+      } = t(), a = N({
+        layout: n,
+        panelConstraints: r
       });
-    };
-  }, [groupId, layout, panelDataArray, panelGroupElement]);
-  useEffect(() => {
-    if (!panelGroupElement) {
-      return;
+      return o ? l : (K(l, a) || M((u) => ({
+        mountedGroups: new Map(u.mountedGroups).set(s, {
+          defaultLayoutDeferred: o,
+          derivedPanelConstraints: r,
+          layout: a,
+          separatorToPanels: i
+        })
+      })), a);
     }
-    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);
-      };
-    });
-    return () => {
-      cleanupFunctions.forEach(cleanupFunction => cleanupFunction());
-    };
-  }, [panelGroupElement, committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
+  };
 }
-
-function areEqual(arrayA, arrayB) {
-  if (arrayA.length !== arrayB.length) {
-    return false;
-  }
-  for (let index = 0; index < arrayA.length; index++) {
-    if (arrayA[index] !== arrayB[index]) {
-      return false;
-    }
-  }
-  return true;
+function De(e) {
+  const { mountedGroups: t } = G(), n = t.get(e);
+  return z(n, `Mounted Group ${e.id} not found`), n;
+}
+function T(e, t) {
+  const n = ne(e), o = De(n), r = n.separators.find(
+    (p) => p.element === e
+  );
+  z(r, "Matching separator not found");
+  const s = o.separatorToPanels.get(r);
+  z(s, "Matching panels not found");
+  const l = s.map((p) => n.panels.indexOf(p)), a = Ge({ groupId: n.id }).getLayout(), u = Y({
+    delta: t,
+    initialLayout: a,
+    panelConstraints: o.derivedPanelConstraints,
+    pivotIndices: l,
+    prevLayout: a,
+    trigger: "keyboard"
+  }), f = N({
+    layout: u,
+    panelConstraints: o.derivedPanelConstraints
+  });
+  K(a, f) || M((p) => ({
+    mountedGroups: new Map(p.mountedGroups).set(n, {
+      defaultLayoutDeferred: o.defaultLayoutDeferred,
+      derivedPanelConstraints: o.derivedPanelConstraints,
+      layout: f,
+      separatorToPanels: o.separatorToPanels
+    })
+  }));
 }
-
-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;
+function ye(e) {
+  if (e.defaultPrevented)
+    return;
+  const t = e.currentTarget, n = ne(t);
+  if (!n.disabled)
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault(), n.orientation === "vertical" && T(t, 5);
         break;
-      case "ArrowRight":
-        movement = isHorizontal ? delta : 0;
+      }
+      case "ArrowLeft": {
+        e.preventDefault(), n.orientation === "horizontal" && T(t, -5);
         break;
-      case "ArrowUp":
-        movement = isHorizontal ? 0 : -delta;
+      }
+      case "ArrowRight": {
+        e.preventDefault(), n.orientation === "horizontal" && T(t, 5);
         break;
-      case "End":
-        movement = 100;
+      }
+      case "ArrowUp": {
+        e.preventDefault(), n.orientation === "vertical" && T(t, -5);
         break;
-      case "Home":
-        movement = -100;
+      }
+      case "End": {
+        e.preventDefault(), T(t, 100);
         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 numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
-    const size = remainingSize / numRemainingPanels;
-    numPanelsWithSizes++;
-    layout[index] = size;
-    remainingSize -= size;
-  }
-  return layout;
-}
-
-// 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();
+      case "Enter": {
+        e.preventDefault();
+        const o = ne(t), { derivedPanelConstraints: r, layout: s, separatorToPanels: l } = De(o), i = o.separators.find(
+          (p) => p.element === t
+        );
+        z(i, "Matching separator not found");
+        const a = l.get(i);
+        z(a, "Matching panels not found");
+        const u = a[0], f = r.find(
+          (p) => p.panelId === u.id
+        );
+        if (z(f, "Panel metadata not found"), f.collapsible) {
+          const p = s[u.id], m = f.collapsedSize === p ? o.inMemoryLastExpandedPanelSizes[u.id] ?? f.minSize : f.collapsedSize;
+          T(t, m - p);
         }
+        break;
+      }
+      case "F6": {
+        e.preventDefault();
+        const r = ne(t).separators.map(
+          (a) => a.element
+        ), s = Array.from(r).findIndex(
+          (a) => a === e.currentTarget
+        );
+        z(s !== null, "Index not found");
+        const l = e.shiftKey ? s > 0 ? s - 1 : r.length - 1 : s + 1 < r.length ? s + 1 : 0;
+        r[l].focus();
+        break;
+      }
+      case "Home": {
+        e.preventDefault(), T(t, -100);
+        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;
+const ut = (e) => e, ie = () => {
+}, Oe = 1, Te = 2, _e = 4, Ne = 8, ge = {
+  coarse: 10,
+  precise: 5
+};
+function ct(e, t, n) {
+  let o, r = {
+    x: 1 / 0,
+    y: 1 / 0
+  };
+  for (const s of t) {
+    const l = Ie(n, s.rect);
+    switch (e) {
+      case "horizontal": {
+        l.x <= r.x && (o = s, r = l);
+        break;
+      }
+      case "vertical": {
+        l.y <= r.y && (o = s, r = l);
+        break;
       }
     }
   }
-  return true;
-}
-
-// 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
-}) {
-  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
+  return o ? {
+    distance: r,
+    hitRegion: o
+  } : void 0;
+}
+let te;
+function ft() {
+  return te === void 0 && (typeof matchMedia == "function" ? te = !!matchMedia("(pointer:coarse)").matches : te = !1), te;
+}
+function dt(e) {
+  return e !== null && typeof e == "object" && "nodeType" in e && e.nodeType === Node.DOCUMENT_FRAGMENT_NODE;
+}
+function pt(e, t) {
+  if (e === t) throw new Error("Cannot compare node with itself");
+  const n = {
+    a: xe(e),
+    b: xe(t)
   };
-}
-
-function debounce(callback, durationMs = 10) {
-  let timeoutId = null;
-  let callable = (...args) => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-    }
-    timeoutId = setTimeout(() => {
-      callback(...args);
-    }, durationMs);
+  let o;
+  for (; n.a.at(-1) === n.b.at(-1); )
+    e = n.a.pop(), t = n.b.pop(), o = e;
+  z(
+    o,
+    "Stacking order can only be calculated for elements with a common ancestor"
+  );
+  const r = {
+    a: Se(ve(n.a)),
+    b: Se(ve(n.b))
   };
-  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);
-      };
-    } else {
-      throw new Error("localStorage not supported in this environment");
+  if (r.a === r.b) {
+    const s = o.childNodes, l = {
+      a: n.a.at(-1),
+      b: n.b.at(-1)
+    };
+    let i = s.length;
+    for (; i--; ) {
+      const a = s[i];
+      if (a === l.a) return 1;
+      if (a === l.b) return -1;
     }
-  } catch (error) {
-    console.error(error);
-    storageObject.getItem = () => null;
-    storageObject.setItem = () => {};
   }
-}
-
-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);
-    }
-  }).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 Math.sign(r.a - r.b);
+}
+const mt = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+function ht(e) {
+  const t = getComputedStyle(Ae(e) ?? e).display;
+  return t === "flex" || t === "inline-flex";
+}
+function yt(e) {
+  const t = getComputedStyle(e);
+  return !!(t.position === "fixed" || t.zIndex !== "auto" && (t.position !== "static" || ht(e)) || +t.opacity < 1 || "transform" in t && t.transform !== "none" || "webkitTransform" in t && t.webkitTransform !== "none" || "mixBlendMode" in t && t.mixBlendMode !== "normal" || "filter" in t && t.filter !== "none" || "webkitFilter" in t && t.webkitFilter !== "none" || "isolation" in t && t.isolation === "isolate" || mt.test(t.willChange) || t.webkitOverflowScrolling === "touch");
+}
+function ve(e) {
+  let t = e.length;
+  for (; t--; ) {
+    const n = e[t];
+    if (z(n, "Missing node"), yt(n)) return n;
+  }
   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 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
-  };
-  try {
-    storage.setItem(panelGroupKey, JSON.stringify(state));
-  } catch (error) {
-    console.error(error);
-  }
+function Se(e) {
+  return e && Number(getComputedStyle(e).zIndex) || 0;
+}
+function xe(e) {
+  const t = [];
+  for (; e; )
+    t.push(e), e = Ae(e);
+  return t;
+}
+function Ae(e) {
+  const { parentNode: t } = e;
+  return dt(t) ? t.host : t;
+}
+function gt(e, t) {
+  return e.x < t.x + t.width && e.x + e.width > t.x && e.y < t.y + t.height && e.y + e.height > t.y;
 }
-
-// All units must be in percentages; pixel values should be pre-converted
-function validatePanelGroupLayout({
-  layout: prevLayout,
-  panelConstraints
+function vt({
+  groupElement: e,
+  hitRegion: t,
+  pointerEventTarget: 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;
+  if (!Me(n) || n.contains(e) || e.contains(n))
+    return !0;
+  if (pt(n, e) > 0) {
+    let o = n;
+    for (; o; ) {
+      if (o.contains(e))
+        return !0;
+      if (gt(o.getBoundingClientRect(), t))
+        return !1;
+      o = o.parentElement;
     }
   }
-  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
+  return !0;
+}
+function $e(e, t) {
+  const n = [];
+  return t.forEach((o, r) => {
+    if (r.disabled)
+      return;
+    const s = ft() ? ge.coarse : ge.precise, l = ke(r), i = ct(r.orientation, l, {
+      x: e.clientX,
+      y: e.clientY
     });
-    if (unsafeSize != safeSize) {
-      remainingSize += unsafeSize - safeSize;
-      nextLayout[index] = safeSize;
+    i && i.distance.x <= s && i.distance.y <= s && vt({
+      groupElement: r.element,
+      hitRegion: i.hitRegion.rect,
+      pointerEventTarget: e.target
+    }) && n.push(i.hitRegion);
+  }), n;
+}
+function ze(e) {
+  if (e.defaultPrevented)
+    return;
+  const { mountedGroups: t } = G(), n = $e(e, t), o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set(), l = /* @__PURE__ */ new Map();
+  let i = !1;
+  n.forEach((a) => {
+    o.add(a.group), a.panels.forEach((f) => {
+      r.add(f);
+    }), a.separator && (s.add(a.separator), i || (i = !0, a.separator.element.focus()));
+    const u = t.get(a.group);
+    u && l.set(a.group, u.layout);
+  }), M({
+    interactionState: {
+      hitRegions: n,
+      initialLayoutMap: l,
+      pointerDownAtPoint: { x: e.clientX, y: e.clientY },
+      state: "active"
     }
-  }
-
-  // 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
+  }), n.length && e.preventDefault();
+}
+function St({
+  cursorFlags: e,
+  groups: t,
+  state: n
+}) {
+  let o = 0, r = 0;
+  switch (n) {
+    case "active":
+    case "hover":
+      t.forEach((s) => {
+        if (!s.disableCursor)
+          switch (s.orientation) {
+            case "horizontal": {
+              o++;
+              break;
+            }
+            case "vertical": {
+              r++;
+              break;
+            }
+          }
       });
-      if (prevSize !== safeSize) {
-        remainingSize -= safeSize - prevSize;
-        nextLayout[index] = safeSize;
-
-        // Once we've used up the remainder, bail
-        if (fuzzyNumbersEqual(remainingSize, 0)) {
-          break;
-        }
+  }
+  if (o === 0 && r === 0)
+    return null;
+  switch (n) {
+    case "active": {
+      const s = (e & Oe) !== 0, l = (e & Te) !== 0, i = (e & _e) !== 0, a = (e & Ne) !== 0;
+      if (e) {
+        if (s)
+          return i ? "se-resize" : a ? "ne-resize" : "e-resize";
+        if (l)
+          return i ? "sw-resize" : a ? "nw-resize" : "w-resize";
+        if (i)
+          return "s-resize";
+        if (a)
+          return "n-resize";
       }
+      break;
     }
   }
-  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);
+  return o > 0 && r > 0 ? "move" : o > 0 ? "ew-resize" : "ns-resize";
+}
+const be = /* @__PURE__ */ new WeakMap();
+function le(e) {
+  if (e.defaultView === null || e.defaultView === void 0)
+    return;
+  let { prevStyle: t, styleSheet: n } = be.get(e) ?? {};
+  n === void 0 && (n = new e.defaultView.CSSStyleSheet(), e.adoptedStyleSheets = [n]);
+  const { cursorFlags: o, interactionState: r } = G();
+  switch (r.state) {
+    case "active":
+    case "hover": {
+      const s = St({
+        cursorFlags: o,
+        groups: r.hitRegions.map((i) => i.group),
+        state: r.state
+      }), l = `*{cursor: ${s} !important; ${r.state === "active" ? "touch-action: none;" : ""} }`;
+      if (t === l)
+        return;
+      t = l, s ? n.cssRules.length === 0 ? n.insertRule(l) : n.replaceSync(l) : n.cssRules.length === 1 && n.deleteRule(0);
+      break;
+    }
+    case "inactive": {
+      t = void 0, n.cssRules.length === 1 && n.deleteRule(0);
+      break;
+    }
   }
-};
-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
-}) {
-  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: []
+  be.set(e, {
+    prevStyle: t,
+    styleSheet: n
   });
-  useImperativeHandle(forwardedRef, () => ({
-    getId: () => committedValuesRef.current.id,
-    getLayout: () => {
-      const {
-        layout
-      } = eagerValuesRef.current;
-      return layout;
-    },
-    setLayout: unsafeLayout => {
-      const {
-        onLayout
-      } = committedValuesRef.current;
-      const {
-        layout: prevLayout,
-        panelDataArray
-      } = eagerValuesRef.current;
-      const safeLayout = validatePanelGroupLayout({
-        layout: unsafeLayout,
-        panelConstraints: panelDataArray.map(panelData => panelData.constraints)
+}
+function Fe({
+  document: e,
+  event: t,
+  hitRegions: n,
+  initialLayoutMap: o,
+  mountedGroups: r,
+  pointerDownAtPoint: s
+}) {
+  let l = 0;
+  const i = new Map(r);
+  n.forEach((a) => {
+    const { group: u, groupSize: f } = a, { disableCursor: p, orientation: m, panels: h } = u;
+    let c = 0;
+    s ? m === "horizontal" ? c = (t.clientX - s.x) / f * 100 : c = (t.clientY - s.y) / f * 100 : m === "horizontal" ? c = t.clientX < 0 ? -100 : 100 : c = t.clientY < 0 ? -100 : 100;
+    const d = o.get(u), {
+      defaultLayoutDeferred: y,
+      derivedPanelConstraints: v,
+      layout: S,
+      separatorToPanels: x
+    } = r.get(u) ?? { defaultLayoutDeferred: !1 };
+    if (v && d && S && x) {
+      const g = Y({
+        delta: c,
+        initialLayout: d,
+        panelConstraints: v,
+        pivotIndices: a.panels.map((b) => h.indexOf(b)),
+        prevLayout: S,
+        trigger: "mouse-or-touch"
       });
-      if (!areEqual(prevLayout, safeLayout)) {
-        setLayout(safeLayout);
-        eagerValuesRef.current.layout = safeLayout;
-        if (onLayout) {
-          onLayout(safeLayout);
-        }
-        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;
-  });
-  useWindowSplitterPanelGroupBehavior({
-    committedValuesRef,
-    eagerValuesRef,
-    groupId,
-    layout,
-    panelDataArray: eagerValuesRef.current.panelDataArray,
-    setLayout,
-    panelGroupElement: panelGroupElementRef.current
-  });
-  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;
+      if (K(g, S)) {
+        if (c !== 0 && !p)
+          switch (m) {
+            case "horizontal": {
+              l |= c < 0 ? Oe : Te;
+              break;
+            }
+            case "vertical": {
+              l |= c < 0 ? _e : Ne;
+              break;
+            }
+          }
+      } else {
+        i.set(a.group, {
+          defaultLayoutDeferred: y,
+          derivedPanelConstraints: v,
+          layout: g,
+          separatorToPanels: x
+        });
+        const b = a.group.panels.map(({ id: w }) => w).join(",");
+        a.group.inMemoryLayouts[b] = g;
       }
-
-      // 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(() => {
-  });
-
-  // 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);
+  }), M({
+    cursorFlags: l,
+    mountedGroups: i
+  }), le(e);
+}
+function we(e) {
+  const { interactionState: t, mountedGroups: n } = G();
+  switch (t.state) {
+    case "active":
+      Fe({
+        document: e.currentTarget,
+        event: e,
+        hitRegions: t.hitRegions,
+        initialLayoutMap: t.initialLayoutMap,
+        mountedGroups: n
+      });
+  }
+}
+function Le(e) {
+  if (e.defaultPrevented)
+    return;
+  const { interactionState: t, mountedGroups: n } = G();
+  switch (t.state) {
+    case "active": {
+      if (
+        // Skip this check for "pointerleave" events, else Firefox triggers a false positive (see #514)
+        e.buttons === 0
+      ) {
+        M(
+          (o) => o.interactionState.state === "inactive" ? o : {
+            cursorFlags: 0,
+            interactionState: {
+              state: "inactive"
+            }
           }
-          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-        }
+        );
+        return;
       }
+      Fe({
+        document: e.currentTarget,
+        event: e,
+        hitRegions: t.hitRegions,
+        initialLayoutMap: t.initialLayoutMap,
+        mountedGroups: n,
+        pointerDownAtPoint: t.pointerDownAtPoint
+      });
+      break;
     }
-  }, []);
-
-  // 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);
+    default: {
+      const o = $e(e, n);
+      o.length === 0 ? t.state !== "inactive" && M({
+        interactionState: { state: "inactive" }
+      }) : M({
+        interactionState: {
+          hitRegions: o,
+          state: "hover"
         }
-      }
+      }), le(e.currentTarget);
+      break;
     }
-  }, []);
-
-  // 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;
+  }
+}
+function Pe(e) {
+  if (e.defaultPrevented)
+    return;
+  e.preventDefault();
+  const { interactionState: t } = G();
+  switch (t.state) {
+    case "active":
+      M({
+        cursorFlags: 0,
+        interactionState: {
+          state: "inactive"
         }
-      }
-      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);
+      }), le(e.currentTarget);
+  }
+}
+function Re(e) {
+  let t = 0, n = 0;
+  const o = {};
+  for (const s of e)
+    if (s.defaultSize !== void 0) {
+      t++;
+      const l = k(s.defaultSize);
+      n += l, o[s.panelId] = l;
+    } else
+      o[s.panelId] = void 0;
+  const r = e.length - t;
+  if (r !== 0) {
+    const s = k((100 - n) / r);
+    for (const l of e)
+      l.defaultSize === void 0 && (o[l.panelId] = s);
+  }
+  return o;
+}
+function xt(e, t, n) {
+  const o = n[0];
+  if (!o)
+    return;
+  const r = e.panels.find((a) => a.element === t);
+  if (!r || !r.onResize)
+    return;
+  const s = U({ group: e }), l = r.mutableValues.prevSize, i = {
+    asPercentage: k(
+      o.inlineSize / s * 100
+    ),
+    inPixels: o.inlineSize
+  };
+  r.mutableValues.prevSize = i, r.onResize(i, r.id, l);
+}
+function zt(e, t) {
+  if (Object.keys(e).length !== Object.keys(t).length)
+    return !1;
+  for (const o in e)
+    if (e[o] !== t[o])
+      return !1;
+  return !0;
+}
+function bt(e, t) {
+  const n = e.map((r) => r.id), o = Object.keys(t);
+  if (n.length !== o.length)
+    return !1;
+  for (const r of n)
+    if (!o.includes(r))
+      return !1;
+  return !0;
+}
+const B = /* @__PURE__ */ new Map();
+function wt(e) {
+  let t = !0;
+  z(
+    e.element.ownerDocument.defaultView,
+    "Cannot register an unmounted Group"
+  );
+  const n = e.element.ownerDocument.defaultView.ResizeObserver, o = /* @__PURE__ */ new Set(), r = /* @__PURE__ */ new Set(), s = new n((c) => {
+    for (const d of c) {
+      const { borderBoxSize: y, target: v } = d;
+      if (v === e.element) {
+        if (t) {
+          if (U({ group: e }) === 0)
+            return;
+          M((x) => {
+            const g = x.mountedGroups.get(e);
+            if (g) {
+              const b = he(e), w = g.defaultLayoutDeferred ? Re(b) : g.layout, C = N({
+                layout: w,
+                panelConstraints: b
+              });
+              return !g.defaultLayoutDeferred && K(w, C) && zt(
+                g.derivedPanelConstraints,
+                b
+              ) ? x : {
+                mountedGroups: new Map(x.mountedGroups).set(e, {
+                  defaultLayoutDeferred: !1,
+                  derivedPanelConstraints: b,
+                  layout: C,
+                  separatorToPanels: g.separatorToPanels
+                })
+              };
+            }
+            return x;
+          });
         }
-        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
-      }
+      } else
+        xt(e, v, y);
     }
   });
-
-  // Reset the cached layout if hidden by the Activity/Offscreen API
-  useIsomorphicLayoutEffect(() => {
-    const eagerValues = eagerValuesRef.current;
-    return () => {
-      eagerValues.layout = [];
+  s.observe(e.element), e.panels.forEach((c) => {
+    z(
+      !o.has(c.id),
+      `Panel ids must be unique; id "${c.id}" was used more than once`
+    ), o.add(c.id), c.onResize && s.observe(c.element);
+  });
+  const l = U({ group: e }), i = he(e), a = e.panels.map(({ id: c }) => c).join(",");
+  let u = e.defaultLayout;
+  u && (bt(e.panels, u) || (u = void 0));
+  const f = e.inMemoryLayouts[a] ?? u ?? Re(i), p = N({
+    layout: f,
+    panelConstraints: i
+  }), m = ke(e), h = e.element.ownerDocument;
+  return M((c) => {
+    const d = /* @__PURE__ */ new Map();
+    return B.set(
+      h,
+      (B.get(h) ?? 0) + 1
+    ), m.forEach((y) => {
+      y.separator && d.set(y.separator, y.panels);
+    }), {
+      mountedGroups: new Map(c.mountedGroups).set(e, {
+        defaultLayoutDeferred: l === 0,
+        derivedPanelConstraints: i,
+        layout: p,
+        separatorToPanels: d
+      })
     };
-  }, []);
-  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);
+  }), e.separators.forEach((c) => {
+    z(
+      !r.has(c.id),
+      `Separator ids must be unique; id "${c.id}" was used more than once`
+    ), r.add(c.id), c.element.addEventListener("keydown", ye);
+  }), B.get(h) === 1 && (h.addEventListener("pointerdown", ze), h.addEventListener("pointerleave", we), h.addEventListener("pointermove", Le), h.addEventListener("pointerup", Pe)), function() {
+    t = !1, B.set(
+      h,
+      Math.max(0, (B.get(h) ?? 0) - 1)
+    ), M((d) => {
+      const y = new Map(d.mountedGroups);
+      return y.delete(e), { mountedGroups: y };
+    }), e.separators.forEach((d) => {
+      d.element.removeEventListener("keydown", ye);
+    }), B.get(h) || (h.removeEventListener("pointerdown", ze), h.removeEventListener("pointerleave", we), h.removeEventListener("pointermove", Le), h.removeEventListener("pointerup", Pe)), s.disconnect();
+  };
+}
+function ue(e) {
+  const t = Ke();
+  return `${e ?? t}`;
+}
+const A = typeof window < "u" ? Xe : Ce;
+function ce(e) {
+  const t = I(e);
+  return A(() => {
+    t.current = e;
+  }, [e]), qe(
+    (...n) => t.current?.(...n),
+    [t]
+  );
+}
+function fe(...e) {
+  return ce((t) => {
+    e.forEach((n) => {
+      if (n)
+        switch (typeof n) {
+          case "function": {
+            n(t);
+            break;
+          }
+          case "object": {
+            n.current = t;
+            break;
           }
         }
-      }
-      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 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(e) {
+  const t = I({ ...e });
+  return A(() => {
+    for (const n in e)
+      t.current[n] = e[n];
+  }, [e]), t.current;
+}
+const je = "--react-resizable-panels--panel--pointer-events";
+function He(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 Ve = Ye(null);
+function Pt(e, t) {
+  const n = I({
+    getLayout: () => ({}),
+    setLayout: ut
+  });
+  Ee(t, () => n.current, []), A(() => {
+    Object.assign(
+      n.current,
+      Ge({ groupId: e })
+    );
+  });
 }
-
-// https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
-
-function useWindowSplitterResizeHandlerBehavior({
-  disabled,
-  handleId,
-  resizeHandler,
-  panelGroupElement
+function Tt({
+  children: e,
+  className: t,
+  defaultLayout: n,
+  disableCursor: o,
+  disabled: r,
+  elementRef: s,
+  groupRef: l,
+  id: i,
+  onLayoutChange: a,
+  orientation: u = "horizontal",
+  style: f,
+  ...p
 }) {
-  useEffect(() => {
-    if (disabled || resizeHandler == null || panelGroupElement == null) {
-      return;
-    }
-    const handleElement = getResizeHandleElement(handleId, panelGroupElement);
-    if (handleElement == null) {
+  const m = I({}), h = ce((L) => {
+    K(m.current, L) || (m.current = L, a?.(L));
+  }), c = ue(i), [d, y] = D(!1), v = I(null), [S, x] = D(n ?? {}), [g, b] = D([]), [w, C] = D([]), $ = I({
+    lastExpandedPanelSizes: {},
+    layouts: {}
+  }), oe = fe(v, s);
+  Pt(c, l);
+  const Z = se(
+    () => ({
+      id: c,
+      orientation: u,
+      registerPanel: (L) => (b((P) => ae(u, [...P, L])), () => {
+        b((P) => P.filter((O) => O !== L));
+      }),
+      registerSeparator: (L) => (C(
+        (P) => ae(u, [...P, L])
+      ), () => {
+        C(
+          (P) => P.filter((O) => O !== L)
+        );
+      })
+    }),
+    [c, u]
+  ), F = Lt({
+    defaultLayout: n,
+    disableCursor: o
+  }), j = I(null);
+  A(() => {
+    const L = v.current;
+    if (L === null)
       return;
+    const P = {
+      defaultLayout: F.defaultLayout,
+      disableCursor: !!F.disableCursor,
+      disabled: !!r,
+      element: L,
+      id: c,
+      inMemoryLastExpandedPanelSizes: $.current.lastExpandedPanelSizes,
+      inMemoryLayouts: $.current.layouts,
+      orientation: u,
+      panels: g,
+      separators: w
+    };
+    j.current = P;
+    const O = wt(P), pe = G().mountedGroups.get(P);
+    if (pe) {
+      const { defaultLayoutDeferred: H, derivedPanelConstraints: V, layout: Q } = pe;
+      !H && V.length > 0 && (x(Q), h?.(Q));
     }
-    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);
+    const Be = _.addListener(
+      "interactionStateChange",
+      (H) => {
+        switch (H.state) {
+          case "active": {
+            y(
+              H.hitRegions.some(
+                (V) => V.group === P
+              )
+            );
             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();
+          default: {
+            y(!1);
             break;
           }
+        }
       }
-    };
-    handleElement.addEventListener("keydown", onKeyDown);
+    ), We = _.addListener(
+      "mountedGroupsChange",
+      (H) => {
+        const V = H.get(P);
+        if (V) {
+          const { defaultLayoutDeferred: Q, derivedPanelConstraints: Ue, layout: me } = V;
+          if (Q || Ue.length === 0)
+            return;
+          x(me), h?.(me);
+        }
+      }
+    );
     return () => {
-      handleElement.removeEventListener("keydown", onKeyDown);
+      j.current = null, O(), Be(), We();
     };
-  }, [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
+  }, [
+    r,
+    c,
+    h,
+    u,
+    g,
+    w,
+    F
+  ]), Ce(() => {
+    const L = j.current;
+    L && (L.defaultLayout = n, L.disableCursor = !!o);
   });
-  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 J = {
+    [je]: d ? "none" : void 0
+  };
+  for (const L in S) {
+    const P = He(c, L), O = S[L];
+    J[P] = O;
   }
-  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);
+  return /* @__PURE__ */ X(Ve.Provider, { value: Z, children: /* @__PURE__ */ X(
+    "div",
+    {
+      ...p,
+      "aria-orientation": u,
+      className: t,
+      "data-group": !0,
+      "data-testid": c,
+      id: c,
+      ref: oe,
+      style: {
+        ...f,
+        ...J,
+        display: "flex",
+        flexDirection: u === "horizontal" ? "row" : "column",
+        flexWrap: "nowrap"
+      },
+      children: e
     }
-  }, [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) {
+  ) });
+}
+function Rt(e, t = 10) {
+  let n = null;
+  return (o) => {
+    n !== null && clearTimeout(n), n = setTimeout(() => {
+      e(o);
+    }, t);
+  };
+}
+function re(e, t) {
+  return `react-resizable-panels:${[e, ...t].join(":")}`;
+}
+function _t({
+  debounceSaveMs: e = 100,
+  panelIds: t,
+  storage: n,
+  ...o
+}) {
+  const r = t !== void 0, s = "id" in o ? o.id : o.groupId, l = re(s, t ?? []), i = Ze(
+    Ct,
+    () => n.getItem(l),
+    () => n.getItem(l)
+  ), a = se(
+    () => i ? JSON.parse(i) : void 0,
+    [i]
+  ), u = se(() => {
+    const f = (p) => {
+      let m;
+      r ? m = re(s, Object.keys(p)) : m = re(s, []);
+      try {
+        n.setItem(m, JSON.stringify(p));
+      } catch (h) {
+        console.error(h);
+      }
+    };
+    return e > 0 ? Rt(f, e) : f;
+  }, [e, r, s, n]);
+  return {
+    defaultLayout: a,
+    onLayoutChange: u
+  };
+}
+function Ct() {
+  return function() {
+  };
+}
+function Nt() {
+  return D(null);
+}
+function At() {
+  return I(null);
+}
+function de() {
+  const e = Je(Ve);
+  return z(
+    e,
+    "Group Context not found; did you render a Panel or Separator outside of a Group?"
+  ), e;
+}
+function Et({
+  groupId: e,
+  panelId: t
+}) {
+  const n = () => {
+    const { mountedGroups: i } = G();
+    for (const [
+      a,
+      {
+        defaultLayoutDeferred: u,
+        derivedPanelConstraints: f,
+        layout: p,
+        separatorToPanels: m
+      }
+    ] of i)
+      if (a.id === e)
+        return {
+          defaultLayoutDeferred: u,
+          derivedPanelConstraints: f,
+          group: a,
+          layout: p,
+          separatorToPanels: m
+        };
+    throw Error(`Group ${e} not found`);
+  }, o = () => {
+    const i = n().derivedPanelConstraints.find(
+      (a) => a.panelId === t
+    );
+    if (i !== void 0)
+      return i;
+    throw Error(`Panel constraints not found for Panel ${t}`);
+  }, r = () => {
+    const i = n().group.panels.find((a) => a.id === t);
+    if (i !== void 0)
+      return i;
+    throw Error(`Layout not found for Panel ${t}`);
+  }, s = () => {
+    const i = n().layout[t];
+    if (i !== void 0)
+      return i;
+    throw Error(`Layout not found for Panel ${t}`);
+  }, l = (i) => {
+    const a = s();
+    if (i === a)
       return;
-    }
-    const element = elementRef.current;
-    assert(element, "Element ref not attached");
-    let didMove = false;
-    const setResizeHandlerState = (action, isActive, event) => {
-      if (!isActive) {
-        setState("inactive");
-        return;
+    const {
+      defaultLayoutDeferred: u,
+      derivedPanelConstraints: f,
+      group: p,
+      layout: m,
+      separatorToPanels: h
+    } = n(), c = p.panels.findIndex((S) => S.id === t), d = c === p.panels.length - 1, y = Y({
+      delta: d ? a - i : i - a,
+      initialLayout: m,
+      panelConstraints: f,
+      pivotIndices: d ? [c - 1, c] : [c, c + 1],
+      prevLayout: m,
+      trigger: "imperative-api"
+    }), v = N({
+      layout: y,
+      panelConstraints: f
+    });
+    K(m, v) || M((S) => ({
+      mountedGroups: new Map(S.mountedGroups).set(p, {
+        defaultLayoutDeferred: u,
+        derivedPanelConstraints: f,
+        layout: v,
+        separatorToPanels: h
+      })
+    }));
+  };
+  return {
+    collapse: () => {
+      const { collapsible: i, collapsedSize: a } = o(), { mutableValues: u } = r(), f = s();
+      i && f !== a && (u.expandToSize = f, l(a));
+    },
+    expand: () => {
+      const { collapsible: i, collapsedSize: a, minSize: u } = o(), { mutableValues: f } = r(), p = s();
+      if (i && p === a) {
+        let m = f.expandToSize ?? u;
+        m === 0 && (m = 1), l(m);
       }
-      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);
+    },
+    getSize: () => {
+      const { group: i } = n(), a = s(), { element: u } = r(), f = i.orientation === "horizontal" ? u.offsetWidth : u.offsetHeight;
+      return {
+        asPercentage: a,
+        inPixels: f
+      };
+    },
+    isCollapsed: () => {
+      const { collapsible: i, collapsedSize: a } = o(), u = s();
+      return i && R(a, u);
+    },
+    resize: (i) => {
+      if (s() !== i) {
+        let u;
+        switch (typeof i) {
+          case "number": {
+            const { group: f } = n(), p = U({ group: f });
+            u = k(i / p * 100);
             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();
-            }
+          case "string": {
+            u = parseFloat(i);
             break;
           }
+        }
+        l(u);
       }
-    };
-    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 Mt(e, t) {
+  const { id: n } = de(), o = I({
+    collapse: ie,
+    expand: ie,
+    getSize: () => ({
+      asPercentage: 0,
+      inPixels: 0
+    }),
+    isCollapsed: () => !1,
+    resize: ie
+  });
+  Ee(t, () => o.current, []), A(() => {
+    Object.assign(
+      o.current,
+      Et({ groupId: n, panelId: e })
+    );
+  });
 }
-
-function getPanelElement(id, scope = document) {
-  const element = scope.querySelector(`[data-panel-id="${id}"]`);
-  if (element) {
-    return element;
-  }
-  return null;
+function $t({
+  children: e,
+  className: t,
+  collapsedSize: n = "0%",
+  collapsible: o = !1,
+  defaultSize: r,
+  elementRef: s,
+  id: l,
+  maxSize: i = "100%",
+  minSize: a = "0%",
+  onResize: u,
+  panelRef: f,
+  style: p,
+  ...m
+}) {
+  const h = !!l, c = ue(l), d = I(null), y = fe(d, s), { id: v, registerPanel: S } = de(), x = u !== null, g = ce(
+    (w, C, $) => {
+      u?.(w, l, $);
+    }
+  );
+  A(() => {
+    const w = d.current;
+    if (w !== null)
+      return S({
+        element: w,
+        id: c,
+        idIsStable: h,
+        mutableValues: {
+          expandToSize: void 0,
+          prevSize: void 0
+        },
+        onResize: x ? g : void 0,
+        panelConstraints: {
+          collapsedSize: n,
+          collapsible: o,
+          defaultSize: r,
+          maxSize: i,
+          minSize: a
+        }
+      });
+  }, [
+    n,
+    o,
+    r,
+    x,
+    c,
+    h,
+    i,
+    a,
+    g,
+    S
+  ]), Mt(c, f);
+  const b = He(v, c);
+  return /* @__PURE__ */ X(
+    "div",
+    {
+      ...m,
+      "data-panel": !0,
+      "data-testid": c,
+      id: c,
+      ref: y,
+      style: {
+        ...It,
+        flexBasis: 0,
+        flexGrow: `var(${b}, 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(${je})`
+      },
+      children: /* @__PURE__ */ X(
+        "div",
+        {
+          className: t,
+          style: {
+            width: "100%",
+            height: "100%",
+            ...p
+          },
+          children: e
+        }
+      )
+    }
+  );
+}
+const It = {
+  minHeight: "unset",
+  maxHeight: "unset",
+  height: "unset",
+  minWidth: "unset",
+  maxWidth: "unset",
+  width: "unset",
+  flex: "unset",
+  flexBasis: "unset",
+  flexShrink: "unset",
+  flexGrow: "unset",
+  border: "unset",
+  borderWidth: "unset",
+  padding: "unset",
+  margin: "unset"
+};
+function Ft() {
+  return D(null);
 }
-
-function getPanelElementsForGroup(groupId, scope = document) {
-  return Array.from(scope.querySelectorAll(`[data-panel][data-panel-group-id="${groupId}"]`));
+function jt() {
+  return I(null);
 }
-
-function getIntersectingRectangle(rectOne, rectTwo, strict) {
-  if (!intersects(rectOne, rectTwo, strict)) {
-    return {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0
-    };
+function kt({
+  layout: e,
+  panelConstraints: t,
+  panelId: n,
+  panelIndex: o
+}) {
+  let r, s;
+  const l = e[n], i = t.find(
+    (a) => a.panelId === n
+  );
+  if (i) {
+    const a = i.maxSize, u = s = i.collapsible ? i.collapsedSize : i.minSize, f = [o, o + 1];
+    s = N({
+      layout: Y({
+        delta: u - l,
+        initialLayout: e,
+        panelConstraints: t,
+        pivotIndices: f,
+        prevLayout: e,
+        trigger: "keyboard"
+      }),
+      panelConstraints: t
+    })[n], r = N({
+      layout: Y({
+        delta: a - l,
+        initialLayout: e,
+        panelConstraints: t,
+        pivotIndices: f,
+        prevLayout: e,
+        trigger: "keyboard"
+      }),
+      panelConstraints: t
+    })[n];
   }
   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)
+    valueControls: n,
+    valueMax: r,
+    valueMin: s,
+    valueNow: l
   };
 }
-
-export { DATA_ATTRIBUTES, Panel, PanelGroup, PanelResizeHandle, assert, customizeGlobalCursorStyles, disableGlobalCursorStyles, enableGlobalCursorStyles, getIntersectingRectangle, getPanelElement, getPanelElementsForGroup, getPanelGroupElement, getResizeHandleElement, getResizeHandleElementIndex, getResizeHandleElementsForGroup, getResizeHandlePanelIds, intersects, setNonce, usePanelGroupContext };
+function Ht({
+  children: e,
+  className: t,
+  elementRef: n,
+  id: o,
+  style: r,
+  ...s
+}) {
+  const l = ue(o), [i, a] = D({}), [u, f] = D("inactive"), [p, m] = D(null), h = fe(m, n), {
+    id: c,
+    orientation: d,
+    registerSeparator: y
+  } = de(), v = d === "horizontal" ? "vertical" : "horizontal";
+  return A(() => {
+    if (p !== null) {
+      const S = {
+        element: p,
+        id: l
+      }, x = y(S), g = _.addListener(
+        "interactionStateChange",
+        (w) => {
+          f(
+            w.state !== "inactive" && w.hitRegions.some(
+              (C) => C.separator === S
+            ) ? w.state : "inactive"
+          );
+        }
+      ), b = _.addListener(
+        "mountedGroupsChange",
+        (w) => {
+          w.forEach(
+            ({ derivedPanelConstraints: C, layout: $, separatorToPanels: oe }, Z) => {
+              if (Z.id === c) {
+                const F = oe.get(S);
+                if (F) {
+                  const j = F[0], J = Z.panels.indexOf(j);
+                  a(
+                    kt({
+                      layout: $,
+                      panelConstraints: C,
+                      panelId: j.id,
+                      panelIndex: J
+                    })
+                  );
+                }
+              }
+            }
+          );
+        }
+      );
+      return () => {
+        g(), b(), x();
+      };
+    }
+  }, [p, c, l, y]), /* @__PURE__ */ X(
+    "div",
+    {
+      ...s,
+      "aria-controls": i.valueControls,
+      "aria-orientation": v,
+      "aria-valuemax": i.valueMax,
+      "aria-valuemin": i.valueMin,
+      "aria-valuenow": i.valueNow,
+      children: e,
+      className: t,
+      "data-separator": u,
+      "data-testid": l,
+      id: l,
+      ref: h,
+      role: "separator",
+      style: {
+        flexBasis: "auto",
+        ...r,
+        flexGrow: 0,
+        flexShrink: 0
+      },
+      tabIndex: 0
+    }
+  );
+}
+export {
+  Tt as Group,
+  $t as Panel,
+  Ht as Separator,
+  _t as useDefaultLayout,
+  Nt as useGroupCallbackRef,
+  At as useGroupRef,
+  Ft as usePanelCallbackRef,
+  jt as usePanelRef
+};
+//# sourceMappingURL=react-resizable-panels.js.map