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

package/dist/react-resizable-panels.js

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