@corvu-next/resizable 0.1.0

package/dist/index.js

@@ -0,0 +1,1587 @@
+import { createContext, merge, omit, createSignal, createEffect, createMemo, untrack, useContext, Show, createUniqueId } from 'solid-js';
+import { useKeyedContext, createKeyedContext } from '@corvu-next/utils/create/keyedContext';
+import { createComponent, mergeProps, effect, setStyleProperty, memo, template } from 'solid-js/web';
+import { combineStyle, sortByDocumentPosition, callEventHandler } from '@corvu-next/utils/dom';
+import { Dynamic } from '@corvu-next/utils/dynamic';
+import { mergeRefs, some } from '@corvu-next/utils/reactivity';
+import { dataIf, isFunction } from '@corvu-next/utils';
+import createOnce from '@corvu-next/utils/create/once';
+import createControllableSignal from '@corvu-next/utils/create/controllableSignal';
+import createSize from '@corvu-next/utils/create/size';
+
+// src/context.ts
+var ResizableContext = createContext(null);
+var createResizableContext = (contextId) => {
+  if (contextId === void 0) return ResizableContext;
+  const context = createKeyedContext(
+    `resizable-${contextId}`
+  );
+  return context;
+};
+var useResizableContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext(ResizableContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: Resizable context not found. Make sure to wrap Resizable components in <Resizable.Root>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext(
+    `resizable-${contextId}`
+  );
+  if (!context) {
+    throw new Error(
+      `[corvu]: Resizable context with id "${contextId}" not found. Make sure to wrap Resizable components in <Resizable.Root contextId="${contextId}">`
+    );
+  }
+  return context;
+};
+var InternalResizableContext = createContext(null);
+var createInternalResizableContext = (contextId) => {
+  if (contextId === void 0) return InternalResizableContext;
+  const context = createKeyedContext(
+    `resizable-internal-${contextId}`
+  );
+  return context;
+};
+var useInternalResizableContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext(InternalResizableContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: Resizable context not found. Make sure to wrap Resizable components in <Resizable.Root>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext(
+    `resizable-internal-${contextId}`
+  );
+  if (!context) {
+    throw new Error(
+      `[corvu]: Resizable context with id "${contextId}" not found. Make sure to wrap Resizable components in <Resizable.Root contextId="${contextId}">`
+    );
+  }
+  return context;
+};
+
+// src/lib/utils.ts
+var resolveSize = (size, rootSize) => {
+  if (typeof size === "number") {
+    return size;
+  }
+  if (!size.endsWith("px")) {
+    throw new Error(
+      `[corvu] Sizes must be a number or a string ending with 'px'. Got ${size}`
+    );
+  }
+  return fixToPrecision(parseFloat(size) / rootSize);
+};
+var splitPanels = (props) => {
+  const precedingPanels = props.panels.filter(
+    (panel) => !!(props.focusedElement.compareDocumentPosition(panel.data.element) & Node.DOCUMENT_POSITION_PRECEDING)
+  );
+  const followingPanels = props.panels.filter(
+    (panel) => !!(props.focusedElement.compareDocumentPosition(panel.data.element) & Node.DOCUMENT_POSITION_FOLLOWING)
+  );
+  return [precedingPanels, followingPanels];
+};
+var PRECISION = 6;
+var fixToPrecision = (value) => parseFloat(value.toFixed(PRECISION));
+
+// src/lib/cursor.ts
+var globalCursorStyle = null;
+var cursorStyleElement = null;
+var globalResizeConstraints = 0;
+var constraintToCursorMap = {
+  1: "e-resize",
+  2: "w-resize",
+  3: "ew-resize",
+  4: "s-resize",
+  8: "n-resize",
+  12: "ns-resize",
+  5: "se-resize",
+  9: "ne-resize",
+  6: "sw-resize",
+  10: "nw-resize"
+};
+var cachedCursorStyle = null;
+var updateCursorStyle = () => {
+  if (!globalCursorStyle) {
+    if (cursorStyleElement) {
+      cachedCursorStyle = null;
+      cursorStyleElement.remove();
+      cursorStyleElement = null;
+    }
+    return;
+  }
+  let cursorStyle = constraintToCursorMap[globalResizeConstraints] ?? null;
+  if (cursorStyle === null) {
+    switch (globalCursorStyle) {
+      case "horizontal":
+        cursorStyle = "col-resize";
+        break;
+      case "vertical":
+        cursorStyle = "row-resize";
+        break;
+      case "both":
+        cursorStyle = "move";
+        break;
+    }
+  }
+  if (cursorStyle === cachedCursorStyle) return;
+  cachedCursorStyle = cursorStyle;
+  if (!cursorStyleElement) {
+    cursorStyleElement = document.createElement("style");
+    document.head.appendChild(cursorStyleElement);
+  }
+  cursorStyleElement.innerHTML = `*{cursor: ${cursorStyle}!important;}`;
+};
+var reportResizeConstraints = (orientation, constraints) => {
+  switch (orientation) {
+    case "horizontal":
+      if (constraints === 1) {
+        globalResizeConstraints |= 1;
+        globalResizeConstraints &= -3;
+      } else if (constraints === 2) {
+        globalResizeConstraints |= 2;
+        globalResizeConstraints &= -2;
+      } else if (constraints === 3) {
+        globalResizeConstraints |= 3;
+      } else {
+        globalResizeConstraints &= -4;
+      }
+      break;
+    case "vertical":
+      if (constraints === 1) {
+        globalResizeConstraints |= 4;
+        globalResizeConstraints &= -9;
+      } else if (constraints === 2) {
+        globalResizeConstraints |= 8;
+        globalResizeConstraints &= -5;
+      } else if (constraints === 3) {
+        globalResizeConstraints |= 12;
+      } else {
+        globalResizeConstraints &= -13;
+      }
+      break;
+  }
+  updateCursorStyle();
+};
+var resetResizeConstraints = () => {
+  globalResizeConstraints = 0;
+  updateCursorStyle();
+};
+var setGlobalCursorStyle = (cursorStyle) => {
+  globalCursorStyle = cursorStyle;
+  updateCursorStyle();
+};
+var handleResizeConstraints = (props) => {
+  if (fixToPrecision(props.distributablePercentage) !== fixToPrecision(props.desiredPercentage)) {
+    let constraints = null;
+    if (props.betweenCollapse === true) {
+      constraints = 3;
+    } else if (props.desiredPercentage < props.distributablePercentage && props.revertConstraints !== true || props.desiredPercentage > props.distributablePercentage && props.revertConstraints === true) {
+      constraints = 1;
+    } else {
+      constraints = 2;
+    }
+    reportResizeConstraints(props.orientation, constraints);
+  } else {
+    reportResizeConstraints(props.orientation, 0);
+  }
+};
+var handles = [];
+var dragStartPos = null;
+var globalHovered = null;
+var INTERSECTION_TOLERANCE = 1;
+var equalsWithTolerance = (a, b) => Math.abs(a - b) <= INTERSECTION_TOLERANCE;
+var registerHandle = (handle) => {
+  handles.push(handle);
+  for (const handle2 of handles) {
+    for (const compareHandle of handles) {
+      if (handle2.orientation === compareHandle.orientation || handle2.element === compareHandle.element) {
+        continue;
+      }
+      const handleRect = handle2.element.getBoundingClientRect();
+      const compareHandleRect = compareHandle.element.getBoundingClientRect();
+      if (handle2.orientation === "horizontal") {
+        if (handleRect.left > compareHandleRect.right || handleRect.right < compareHandleRect.left) {
+          continue;
+        }
+      }
+      if (handle2.orientation === "vertical") {
+        if (handleRect.top > compareHandleRect.bottom || handleRect.bottom < compareHandleRect.top) {
+          continue;
+        }
+      }
+      const isStartIntersection = handle2.orientation === "horizontal" ? equalsWithTolerance(handleRect.top, compareHandleRect.bottom) : equalsWithTolerance(handleRect.left, compareHandleRect.right);
+      const isEndIntersection = handle2.orientation === "horizontal" ? equalsWithTolerance(handleRect.bottom, compareHandleRect.top) : equalsWithTolerance(handleRect.right, compareHandleRect.left);
+      if (isStartIntersection) {
+        handle2.startIntersection.setHandle(compareHandle);
+      }
+      if (isEndIntersection) {
+        handle2.endIntersection.setHandle(compareHandle);
+      }
+    }
+  }
+  return {
+    onDragStart: (event, target) => onDragStart(handle, event, target),
+    onHoveredChange: (state) => {
+      globalHovered = state;
+      const dragging = !!dragStartPos;
+      let cursorStyle = null;
+      switch (state) {
+        case "handle": {
+          const startHandle = handle.startIntersection.handle();
+          const endHandle = handle.endIntersection.handle();
+          if (!dragging) {
+            handle.setActive(true);
+            startHandle?.setActive(false);
+            endHandle?.setActive(false);
+          }
+          startHandle?.setHoveredAsIntersection(false);
+          endHandle?.setHoveredAsIntersection(false);
+          cursorStyle = handle.orientation;
+          break;
+        }
+        case "startIntersection": {
+          const startHandle = handle.startIntersection.handle();
+          if (!dragging) {
+            startHandle?.setActive(true);
+          }
+          startHandle?.setHoveredAsIntersection(true);
+          cursorStyle = "both";
+          break;
+        }
+        case "endIntersection": {
+          const endHandle = handle.endIntersection.handle();
+          if (!dragging) {
+            endHandle?.setActive(true);
+          }
+          endHandle?.setHoveredAsIntersection(true);
+          cursorStyle = "both";
+          break;
+        }
+        case null: {
+          const startHandle = handle.startIntersection.handle();
+          const endHandle = handle.endIntersection.handle();
+          if (!dragging && !handle.focused()) {
+            handle.setActive(false);
+            startHandle?.setActive(false);
+            endHandle?.setActive(false);
+          }
+          startHandle?.setHoveredAsIntersection(false);
+          endHandle?.setHoveredAsIntersection(false);
+          cursorStyle = null;
+          break;
+        }
+      }
+      if (!dragging && handle.handleCursorStyle()) {
+        setGlobalCursorStyle(cursorStyle);
+      }
+    }
+  };
+};
+var unregisterHandle = (handle) => {
+  handles.splice(handles.indexOf(handle), 1);
+};
+var onDragStart = (handle, event, target) => {
+  dragStartPos = { x: event.clientX, y: event.clientY };
+  handle.setDragging(true);
+  if (target === "startIntersection") {
+    handle.startIntersection.handle()?.setDragging(true);
+  }
+  if (target === "endIntersection") {
+    handle.endIntersection.handle()?.setDragging(true);
+  }
+  window.addEventListener("pointermove", onPointerMove);
+  window.addEventListener("touchmove", onTouchMove);
+  window.addEventListener("pointerup", onDragEnd);
+  window.addEventListener("touchend", onDragEnd);
+  window.addEventListener("contextmenu", onDragEnd);
+};
+var onPointerMove = (event) => onMove(event.clientX, event.clientY, event.altKey);
+var onTouchMove = (event) => {
+  if (!event.touches[0]) return;
+  onMove(event.touches[0].clientX, event.touches[0].clientY, event.altKey);
+};
+var altKeyCache = false;
+var onMove = (x, y, altKey) => {
+  if (!dragStartPos) return;
+  if (handles.some((handle) => handle.dragging() && handle.altKey === "only")) {
+    altKey = true;
+  }
+  if (handles.some((handle) => handle.dragging() && handle.altKey === false)) {
+    altKey = false;
+  }
+  if (altKeyCache !== altKey) {
+    dragStartPos = { x, y };
+    altKeyCache = altKey;
+  }
+  for (const handle of handles) {
+    if (!handle.dragging()) continue;
+    handle.onDrag(
+      handle.orientation === "horizontal" ? x - dragStartPos.x : y - dragStartPos.y,
+      altKey
+    );
+  }
+};
+var onDragEnd = (event) => {
+  for (const handle of handles) {
+    if (!handle.dragging()) {
+      if (some(handle.hovered, handle.focused, handle.hoveredAsIntersection)) {
+        handle.setActive(true);
+        if (handle.handleCursorStyle()) {
+          setGlobalCursorStyle(handle.orientation);
+        }
+      }
+    } else {
+      handle.setDragging(false);
+      handle.onDragEnd(event);
+      if (!handle.hovered() && !handle.hoveredAsIntersection()) {
+        handle.setActive(false);
+      }
+      if (!globalHovered && handle.handleCursorStyle()) {
+        setGlobalCursorStyle(null);
+      }
+    }
+  }
+  resetResizeConstraints();
+  dragStartPos = null;
+  window.removeEventListener("pointermove", onPointerMove);
+  window.removeEventListener("touchmove", onTouchMove);
+  window.removeEventListener("pointerup", onDragEnd);
+  window.removeEventListener("touchend", onDragEnd);
+  window.removeEventListener("contextmenu", onDragEnd);
+};
+var _tmpl$ = /* @__PURE__ */ template(`<div data-corvu-resizable-handle-start-intersection style="position:absolute;aspect-ratio:1 / 1;top:0;left:0;z-index:1">`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-corvu-resizable-handle-end-intersection style="position:absolute;aspect-ratio:1 / 1;bottom:0;right:0;z-index:1">`);
+var ResizableHandle = (props) => {
+  const defaultedProps = merge({
+    startIntersection: true,
+    endIntersection: true,
+    altKey: true
+  }, props);
+  const localProps = defaultedProps;
+  const otherProps = omit(defaultedProps, "startIntersection", "endIntersection", "altKey", "onHandleDragStart", "onHandleDrag", "onHandleDragEnd", "contextId", "ref", "style", "disabled", "children", "onMouseEnter", "onMouseLeave", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "onPointerDown");
+  const [ref, setRef] = createSignal(null);
+  const [hoveredAsIntersection, setHoveredAsIntersection] = createSignal(false);
+  const [hovered, setHovered] = createSignal(null);
+  const [focused, setFocused] = createSignal(false);
+  const [active, setActive] = createSignal(false);
+  const [dragging, setDragging] = createSignal(false);
+  const [startIntersectionHandle, setStartIntersectionHandle] = createSignal(null);
+  const [endIntersectionHandle, setEndIntersectionHandle] = createSignal(null);
+  const context = createMemo(() => useInternalResizableContext(localProps.contextId));
+  const ariaInformation = createMemo(() => {
+    const handle = ref();
+    if (!handle) {
+      return void 0;
+    }
+    const panels = context().panels();
+    const [precidingPanels, followingPanels] = splitPanels({
+      panels,
+      focusedElement: handle
+    });
+    const ariaControls = precidingPanels[precidingPanels.length - 1]?.data.id;
+    const ariaValueMax = followingPanels.reduce((acc, panel) => acc - resolveSize(panel.data.minSize, context().rootSize()), 1);
+    const ariaValueMin = precidingPanels.reduce((acc, panel) => acc + resolveSize(panel.data.minSize, context().rootSize()), 0);
+    const ariaValueNow = precidingPanels.reduce((acc, panel) => acc + resolveSize(panel.size(), context().rootSize()), 0);
+    return {
+      ariaControls,
+      ariaValueMax: fixToPrecision(ariaValueMax),
+      ariaValueMin: fixToPrecision(ariaValueMin),
+      ariaValueNow: fixToPrecision(ariaValueNow)
+    };
+  });
+  let globalHandleCallbacks = null;
+  createEffect((_prev) => {
+    if (localProps.disabled === true) return void 0;
+    const element = ref();
+    if (!element) return void 0;
+    const globalHandle = {
+      element,
+      orientation: context().orientation(),
+      handleCursorStyle: context().handleCursorStyle,
+      altKey: localProps.altKey,
+      startIntersection: {
+        handle: startIntersectionHandle,
+        setHandle: (handle) => {
+          if (localProps.startIntersection !== true) return;
+          setStartIntersectionHandle(handle);
+        }
+      },
+      endIntersection: {
+        handle: endIntersectionHandle,
+        setHandle: (handle) => {
+          if (localProps.endIntersection !== true) return;
+          setEndIntersectionHandle(handle);
+        }
+      },
+      hovered,
+      focused,
+      hoveredAsIntersection,
+      setHoveredAsIntersection,
+      active,
+      setActive,
+      dragging,
+      setDragging,
+      onDrag: (delta, altKey) => {
+        if (localProps.onHandleDrag !== void 0) {
+          const dragEvent = new CustomEvent("drag", {
+            cancelable: true
+          });
+          localProps.onHandleDrag(dragEvent);
+          if (dragEvent.defaultPrevented) return;
+        }
+        context().onDrag(element, delta, altKey);
+      },
+      onDragEnd: (event) => {
+        localProps.onHandleDragEnd?.(event);
+        context().onDragEnd();
+      }
+    };
+    globalHandleCallbacks = registerHandle(globalHandle);
+    return globalHandle;
+  }, (prevHandle) => {
+    if (prevHandle) {
+      unregisterHandle(prevHandle);
+      globalHandleCallbacks = null;
+    }
+  });
+  createEffect(() => {
+    const state = hovered();
+    return state;
+  }, (state) => {
+    globalHandleCallbacks?.onHoveredChange(state);
+  });
+  const onMouseEnter = (e) => {
+    if (callEventHandler(localProps.onMouseEnter, e) || localProps.disabled === true) return;
+    setHovered("handle");
+  };
+  const onMouseLeave = (e) => {
+    if (callEventHandler(localProps.onMouseLeave, e)) return;
+    setHovered(null);
+  };
+  const onKeyDown = (e) => {
+    if (callEventHandler(localProps.onKeyDown, e) || dragging()) return;
+    const element = ref();
+    if (!element) return;
+    const altKey = localProps.altKey === "only" || localProps.altKey !== false && e.altKey;
+    context().onKeyDown(element, e, altKey);
+  };
+  const onKeyUp = (e) => {
+    if (callEventHandler(localProps.onKeyUp, e) || e.key !== "Tab") return;
+    setFocused(true);
+  };
+  const onFocus = (e) => {
+    if (callEventHandler(localProps.onFocus, e) || hovered()) return;
+    setFocused(true);
+    setActive(true);
+  };
+  const onBlur = (e) => {
+    if (callEventHandler(localProps.onBlur, e)) return;
+    setFocused(false);
+    if (hovered()) return;
+    setActive(false);
+  };
+  const onPointerDown = (e) => {
+    if (callEventHandler(localProps.onPointerDown, e)) return;
+    if (callEventHandler(localProps.onHandleDragStart, e)) return;
+    const targetElement = e.target;
+    targetElement.setPointerCapture(e.pointerId);
+    let target = "handle";
+    if (targetElement.hasAttribute("data-corvu-resizable-handle-start-intersection")) {
+      target = "startIntersection";
+    }
+    if (targetElement.hasAttribute("data-corvu-resizable-handle-end-intersection")) {
+      target = "endIntersection";
+    }
+    globalHandleCallbacks?.onDragStart(e, target);
+  };
+  return createComponent(Dynamic, mergeProps({
+    as: "button",
+    ref(r$) {
+      var _ref$ = mergeRefs(setRef, localProps.ref);
+      typeof _ref$ === "function" && _ref$(r$);
+    },
+    get style() {
+      return combineStyle({
+        position: "relative",
+        cursor: context().handleCursorStyle() ? "inherit" : void 0,
+        "touch-action": "none",
+        "flex-shrink": 0
+      }, localProps.style);
+    },
+    get disabled() {
+      return localProps.disabled;
+    },
+    onBlur,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerDown,
+    role: "separator",
+    get ["aria-controls"]() {
+      return ariaInformation()?.ariaControls;
+    },
+    get ["aria-orientation"]() {
+      return context().orientation();
+    },
+    get ["aria-valuemax"]() {
+      return ariaInformation()?.ariaValueMax;
+    },
+    get ["aria-valuemin"]() {
+      return ariaInformation()?.ariaValueMin;
+    },
+    get ["aria-valuenow"]() {
+      return ariaInformation()?.ariaValueNow;
+    },
+    get ["data-active"]() {
+      return dataIf(active());
+    },
+    get ["data-dragging"]() {
+      return dataIf(dragging());
+    },
+    get ["data-orientation"]() {
+      return context().orientation();
+    },
+    "data-corvu-resizable-handle": ""
+  }, otherProps, {
+    get children() {
+      return [createComponent(Show, {
+        get when() {
+          return startIntersectionHandle();
+        },
+        get children() {
+          var _el$ = _tmpl$();
+          _el$.addEventListener("mouseleave", (e) => {
+            if (ref()?.contains(e.relatedTarget) === true) {
+              setHovered("handle");
+            } else {
+              setHovered(null);
+            }
+          });
+          _el$.addEventListener("mouseenter", () => setHovered("startIntersection"));
+          effect((_p$) => {
+            var _v$ = context().orientation() === "horizontal" ? void 0 : "100%", _v$2 = context().orientation() === "horizontal" ? "100%" : void 0, _v$3 = context().orientation() === "horizontal" ? "translate3d(0, -100%, 0)" : "translate3d(-100%, 0, 0)";
+            _v$ !== _p$.e && setStyleProperty(_el$, "height", _p$.e = _v$);
+            _v$2 !== _p$.t && setStyleProperty(_el$, "width", _p$.t = _v$2);
+            _v$3 !== _p$.a && setStyleProperty(_el$, "transform", _p$.a = _v$3);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          });
+          return _el$;
+        }
+      }), memo(() => localProps.children), createComponent(Show, {
+        get when() {
+          return endIntersectionHandle();
+        },
+        get children() {
+          var _el$2 = _tmpl$2();
+          _el$2.addEventListener("mouseleave", (e) => {
+            if (ref()?.contains(e.relatedTarget) === true) {
+              setHovered("handle");
+            } else {
+              setHovered(null);
+            }
+          });
+          _el$2.addEventListener("mouseenter", () => setHovered("endIntersection"));
+          effect((_p$) => {
+            var _v$4 = context().orientation() === "horizontal" ? void 0 : "100%", _v$5 = context().orientation() === "horizontal" ? "100%" : void 0, _v$6 = context().orientation() === "horizontal" ? "translate3d(0, 100%, 0)" : "translate3d(100%, 0, 0)";
+            _v$4 !== _p$.e && setStyleProperty(_el$2, "height", _p$.e = _v$4);
+            _v$5 !== _p$.t && setStyleProperty(_el$2, "width", _p$.t = _v$5);
+            _v$6 !== _p$.a && setStyleProperty(_el$2, "transform", _p$.a = _v$6);
+            return _p$;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0
+          });
+          return _el$2;
+        }
+      })];
+    }
+  }));
+};
+var Handle_default = ResizableHandle;
+var ResizablePanelContext = createContext(null);
+var createResizablePanelContext = (contextId) => {
+  if (contextId === void 0) return ResizablePanelContext;
+  const context = createKeyedContext(
+    `resizable-panel-${contextId}`
+  );
+  return context;
+};
+var useResizablePanelContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext(ResizablePanelContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: Resizable panel context not found. Make sure to call usePanelContext under <Resizable.Panel>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext(
+    `resizable-panel-${contextId}`
+  );
+  if (!context) {
+    throw new Error(
+      `[corvu]: Resizable context with id "${contextId}" not found. Make sure to call usePanelContext under <Resizable.Panel contextId="${contextId}">`
+    );
+  }
+  return context;
+};
+var ResizablePanel = (props) => {
+  const defaultedProps = merge({
+    initialSize: null,
+    minSize: 0,
+    maxSize: 1,
+    collapsible: false,
+    collapsedSize: 0,
+    collapseThreshold: 0.05,
+    panelId: createUniqueId()
+  }, props);
+  const localProps = defaultedProps;
+  const otherProps = omit(defaultedProps, "initialSize", "minSize", "maxSize", "collapsible", "collapsedSize", "collapseThreshold", "onResize", "onCollapse", "onExpand", "contextId", "panelId", "ref", "style", "children");
+  const [ref, setRef] = createSignal(null);
+  const context = createMemo(() => useInternalResizableContext(localProps.contextId));
+  const [panelInstance, setPanelInstance] = createSignal(null);
+  createEffect((prev) => {
+    const element = ref();
+    if (!element) return void 0;
+    const _context = context();
+    const instance = untrack(() => {
+      return _context.registerPanel({
+        id: localProps.panelId,
+        element,
+        initialSize: localProps.initialSize,
+        minSize: localProps.minSize,
+        maxSize: localProps.maxSize,
+        collapsible: localProps.collapsible,
+        collapsedSize: localProps.collapsedSize,
+        collapseThreshold: localProps.collapseThreshold,
+        onResize: localProps.onResize
+      });
+    });
+    setPanelInstance(instance);
+    return {
+      instance,
+      contextRef: context
+    };
+  }, (_prev) => {
+    if (_prev) {
+      _prev.contextRef().unregisterPanel(_prev.instance.data.id);
+    }
+  });
+  const panelSize = () => {
+    const instance = panelInstance();
+    if (!instance) {
+      if (typeof localProps.initialSize === "number") {
+        return localProps.initialSize;
+      }
+      return 1;
+    }
+    return instance.size();
+  };
+  const collapsed = createMemo((prev) => {
+    const instance = panelInstance();
+    if (localProps.collapsible !== true) {
+      return false;
+    }
+    const collapsed2 = instance ? instance.size() === resolveSize(localProps.collapsedSize, context().rootSize()) : false;
+    if (instance && prev !== collapsed2) {
+      if (collapsed2 && localProps.onCollapse !== void 0) {
+        localProps.onCollapse(instance.size());
+      } else if (!collapsed2 && localProps.onExpand !== void 0) {
+        localProps.onExpand(instance.size());
+      }
+    }
+    return collapsed2;
+  });
+  const resize2 = (size, strategy) => {
+    const instance = panelInstance();
+    if (!instance) {
+      return;
+    }
+    instance.resize(size, strategy ?? "both");
+  };
+  const collapse = (strategy) => {
+    const instance = panelInstance();
+    if (!instance) {
+      return;
+    }
+    instance.collapse(strategy ?? "both");
+  };
+  const expand = (strategy) => {
+    const instance = panelInstance();
+    if (!instance) {
+      return;
+    }
+    instance.expand(strategy ?? "both");
+  };
+  const childrenProps = {
+    get size() {
+      return panelSize();
+    },
+    get minSize() {
+      return localProps.minSize;
+    },
+    get maxSize() {
+      return localProps.maxSize;
+    },
+    get collapsible() {
+      return localProps.collapsible;
+    },
+    get collapsedSize() {
+      return localProps.collapsedSize;
+    },
+    get collapseThreshold() {
+      return localProps.collapseThreshold;
+    },
+    get collapsed() {
+      return collapsed();
+    },
+    resize: resize2,
+    collapse,
+    expand,
+    get panelId() {
+      return localProps.panelId;
+    }
+  };
+  const memoizedChildren = createOnce(() => localProps.children);
+  const resolveChildren = () => {
+    const children = memoizedChildren()();
+    if (isFunction(children)) {
+      return children(childrenProps);
+    }
+    return children;
+  };
+  const memoizedResizablePanel = createMemo(() => {
+    const ResizablePanelContext2 = createResizablePanelContext(localProps.contextId);
+    return createComponent(ResizablePanelContext2, {
+      value: {
+        size: panelSize,
+        minSize: () => localProps.minSize,
+        maxSize: () => localProps.maxSize,
+        collapsible: () => localProps.collapsible,
+        collapsedSize: () => localProps.collapsedSize,
+        collapseThreshold: () => localProps.collapseThreshold,
+        collapsed,
+        resize: resize2,
+        collapse,
+        expand,
+        panelId: () => localProps.panelId
+      },
+      get children() {
+        return createComponent(Dynamic, mergeProps({
+          as: "div",
+          ref(r$) {
+            var _ref$ = mergeRefs(setRef, localProps.ref);
+            typeof _ref$ === "function" && _ref$(r$);
+          },
+          get style() {
+            return combineStyle({
+              "flex-basis": panelSize() * 100 + "%"
+            }, localProps.style);
+          },
+          get id() {
+            return localProps.panelId;
+          },
+          get ["data-collapsed"]() {
+            return dataIf(collapsed());
+          },
+          get ["data-expanded"]() {
+            return dataIf(localProps.collapsible === true && !collapsed());
+          },
+          get ["data-orientation"]() {
+            return context().orientation();
+          },
+          "data-corvu-resizable-panel": ""
+        }, otherProps, {
+          get children() {
+            return untrack(() => resolveChildren());
+          }
+        }));
+      }
+    });
+  });
+  return memoizedResizablePanel;
+};
+var Panel_default = ResizablePanel;
+var getDistributablePercentage = (props) => {
+  let distributablePercentage = props.desiredPercentage >= 0 ? Infinity : -Infinity;
+  let newSizes = props.initialSizes;
+  for (const resizeAction of props.resizeActions) {
+    const desiredPercentage = resizeAction.negate !== true ? props.desiredPercentage : -props.desiredPercentage;
+    let [
+      distributedPercentagePreceding,
+      // eslint-disable-next-line prefer-const
+      distributedSizesPreceding,
+      // eslint-disable-next-line prefer-const
+      collapsedPreceding
+    ] = distributePercentage({
+      desiredPercentage,
+      side: "preceding",
+      panels: resizeAction.precedingPanels,
+      initialSizes: newSizes,
+      initialSizesStartIndex: 0,
+      collapsible: props.collapsible,
+      rootSize: props.resizableData.rootSize
+    });
+    let [
+      distributedPercentageFollowing,
+      // eslint-disable-next-line prefer-const
+      distributedSizesFollowing,
+      // eslint-disable-next-line prefer-const
+      collapsedFollowing
+    ] = distributePercentage({
+      desiredPercentage,
+      side: "following",
+      panels: resizeAction.followingPanels,
+      initialSizes: newSizes,
+      initialSizesStartIndex: resizeAction.precedingPanels.length,
+      collapsible: props.collapsible,
+      rootSize: props.resizableData.rootSize
+    });
+    if (resizeAction.negate === true) {
+      distributedPercentagePreceding = -distributedPercentagePreceding;
+      distributedPercentageFollowing = -distributedPercentageFollowing;
+    }
+    if (collapsedPreceding) {
+      distributedPercentageFollowing = distributedPercentagePreceding;
+    }
+    if (collapsedFollowing) {
+      distributedPercentagePreceding = distributedPercentageFollowing;
+    }
+    if (props.desiredPercentage >= 0) {
+      distributablePercentage = Math.min(
+        distributablePercentage,
+        Math.min(
+          distributedPercentagePreceding,
+          distributedPercentageFollowing
+        )
+      );
+    } else {
+      distributablePercentage = Math.max(
+        distributablePercentage,
+        Math.max(
+          distributedPercentagePreceding,
+          distributedPercentageFollowing
+        )
+      );
+    }
+    newSizes = [...distributedSizesPreceding, ...distributedSizesFollowing];
+  }
+  return distributablePercentage;
+};
+var distributePercentage = (props) => {
+  props.desiredPercentage = fixToPrecision(props.desiredPercentage);
+  const resizeDirection = getResizeDirection({
+    side: props.side,
+    desiredPercentage: props.desiredPercentage
+  });
+  let distributedPercentage = 0;
+  const distributedSizes = props.initialSizes.slice(
+    props.initialSizesStartIndex,
+    props.initialSizesStartIndex + props.panels.length
+  );
+  for (let i = props.side === "preceding" ? props.panels.length - 1 : 0; props.side === "preceding" ? i >= 0 : i < props.panels.length; props.side === "preceding" ? i-- : i++) {
+    const panel2 = props.panels[i];
+    const panelSize2 = props.initialSizes[i + props.initialSizesStartIndex];
+    const collapsedSize2 = resolveSize(
+      panel2.data.collapsedSize ?? 0,
+      props.rootSize
+    );
+    if (panel2.data.collapsible && panelSize2 === collapsedSize2) continue;
+    const availablePercentage2 = fixToPrecision(
+      props.desiredPercentage - distributedPercentage
+    );
+    if (availablePercentage2 === 0) break;
+    switch (resizeDirection) {
+      case "precedingDecreasing": {
+        const minSize2 = resolveSize(panel2.data.minSize, props.rootSize);
+        distributedSizes[i] = Math.max(minSize2, panelSize2 + availablePercentage2);
+        distributedPercentage += distributedSizes[i] - panelSize2;
+        break;
+      }
+      case "followingDecreasing": {
+        const minSize2 = resolveSize(panel2.data.minSize, props.rootSize);
+        distributedSizes[i] = Math.max(minSize2, panelSize2 - availablePercentage2);
+        distributedPercentage -= distributedSizes[i] - panelSize2;
+        break;
+      }
+      case "precedingIncreasing": {
+        const maxSize = resolveSize(panel2.data.maxSize, props.rootSize);
+        distributedSizes[i] = Math.min(maxSize, panelSize2 + availablePercentage2);
+        distributedPercentage += distributedSizes[i] - panelSize2;
+        break;
+      }
+      case "followingIncreasing": {
+        const maxSize = resolveSize(panel2.data.maxSize, props.rootSize);
+        distributedSizes[i] = Math.min(maxSize, panelSize2 - availablePercentage2);
+        distributedPercentage -= distributedSizes[i] - panelSize2;
+        break;
+      }
+    }
+  }
+  distributedPercentage = fixToPrecision(distributedPercentage);
+  if (!props.collapsible || distributedPercentage === props.desiredPercentage) {
+    return [distributedPercentage, distributedSizes, false];
+  }
+  const panelIndex = props.side === "preceding" ? props.panels.length - 1 : 0;
+  const panel = props.panels[panelIndex];
+  if (!panel.data.collapsible) {
+    return [distributedPercentage, distributedSizes, false];
+  }
+  const availablePercentage = fixToPrecision(
+    props.desiredPercentage - distributedPercentage
+  );
+  let collapsed = false;
+  const panelSize = props.initialSizes[panelIndex + props.initialSizesStartIndex];
+  const minSize = resolveSize(panel.data.minSize, props.rootSize);
+  const collapsedSize = resolveSize(
+    panel.data.collapsedSize ?? 0,
+    props.rootSize
+  );
+  const collapseThreshold = Math.min(
+    resolveSize(panel.data.collapseThreshold ?? 0, props.rootSize),
+    minSize - collapsedSize
+  );
+  const isCollapsed = panelSize === collapsedSize;
+  if (resizeDirection === "precedingDecreasing" && !isCollapsed && Math.abs(availablePercentage) >= collapseThreshold) {
+    distributedPercentage -= distributedSizes[panelIndex] - panelSize;
+    distributedSizes[panelIndex] = collapsedSize;
+    distributedPercentage += distributedSizes[panelIndex] - panelSize;
+    collapsed = true;
+  } else if (resizeDirection === "precedingIncreasing" && isCollapsed && Math.abs(availablePercentage) >= collapseThreshold) {
+    const minSize2 = resolveSize(panel.data.minSize, props.rootSize);
+    distributedSizes[panelIndex] = minSize2;
+    if (Math.abs(availablePercentage) >= minSize2 - collapsedSize) {
+      const maxSize = resolveSize(panel.data.maxSize, props.rootSize);
+      distributedSizes[panelIndex] = Math.min(
+        maxSize,
+        panelSize + availablePercentage
+      );
+    } else {
+      collapsed = true;
+    }
+    distributedPercentage += distributedSizes[panelIndex] - panelSize;
+  } else if (resizeDirection === "followingDecreasing" && !isCollapsed && Math.abs(availablePercentage) >= collapseThreshold) {
+    distributedPercentage += distributedSizes[panelIndex] - panelSize;
+    distributedSizes[panelIndex] = collapsedSize;
+    distributedPercentage -= distributedSizes[panelIndex] - panelSize;
+    collapsed = true;
+  } else if (resizeDirection === "followingIncreasing" && isCollapsed && Math.abs(availablePercentage) >= collapseThreshold) {
+    const minSize2 = resolveSize(panel.data.minSize, props.rootSize);
+    distributedSizes[panelIndex] = minSize2;
+    if (Math.abs(availablePercentage) >= minSize2 - collapsedSize) {
+      const maxSize = resolveSize(panel.data.maxSize, props.rootSize);
+      distributedSizes[panelIndex] = Math.min(
+        maxSize,
+        panelSize - availablePercentage
+      );
+    } else {
+      collapsed = true;
+    }
+    distributedPercentage -= distributedSizes[panelIndex] - panelSize;
+  }
+  return [distributedPercentage, distributedSizes, collapsed];
+};
+var getResizeDirection = (props) => {
+  switch (props.side) {
+    case "preceding":
+      return props.desiredPercentage >= 0 ? "precedingIncreasing" : "precedingDecreasing";
+    case "following":
+      return props.desiredPercentage >= 0 ? "followingDecreasing" : "followingIncreasing";
+  }
+};
+var resize = (props) => {
+  let newSizes = props.initialSizes;
+  for (const resizeAction of props.resizeActions) {
+    const [, distributedSizesPreceding] = distributePercentage({
+      desiredPercentage: resizeAction.deltaPercentage,
+      side: "preceding",
+      panels: resizeAction.precedingPanels,
+      initialSizes: newSizes,
+      initialSizesStartIndex: 0,
+      collapsible: props.collapsible,
+      rootSize: props.resizableData.rootSize
+    });
+    const [, distributedSizesFollowing] = distributePercentage({
+      desiredPercentage: resizeAction.deltaPercentage,
+      side: "following",
+      panels: resizeAction.followingPanels,
+      initialSizes: newSizes,
+      initialSizesStartIndex: resizeAction.precedingPanels.length,
+      collapsible: props.collapsible,
+      rootSize: props.resizableData.rootSize
+    });
+    newSizes = [...distributedSizesPreceding, ...distributedSizesFollowing];
+  }
+  newSizes = newSizes.map(fixToPrecision);
+  const totalSize = newSizes.reduce((totalSize2, size) => totalSize2 + size, 0);
+  if (totalSize !== 1) {
+    const offset = totalSize - 1;
+    const offsetPerPanel = offset / newSizes.length;
+    newSizes = newSizes.map((size) => size - offsetPerPanel);
+  }
+  props.resizableData.setSizes(newSizes.map(fixToPrecision));
+};
+var resizePanel = (props) => {
+  let [precedingPanels, followingPanels] = splitPanels({
+    panels: props.panels,
+    focusedElement: props.panel.data.element
+  });
+  const panelIndex = props.panels.indexOf(props.panel);
+  if (panelIndex === 0) {
+    props.strategy = "following";
+  } else if (panelIndex === props.panels.length - 1) {
+    props.strategy = "preceding";
+  }
+  if (props.strategy === "both") {
+    const precedingPanelsIncluding = [...precedingPanels, props.panel];
+    const followingPanelsIncluding = [props.panel, ...followingPanels];
+    const distributablePercentage = getDistributablePercentage({
+      desiredPercentage: props.deltaPercentage / 2,
+      initialSizes: props.initialSizes,
+      collapsible: true,
+      resizeActions: [
+        {
+          precedingPanels: precedingPanelsIncluding,
+          followingPanels
+        },
+        {
+          precedingPanels,
+          followingPanels: followingPanelsIncluding,
+          negate: true
+        }
+      ],
+      resizableData: {
+        rootSize: props.resizableData.rootSize
+      }
+    });
+    resize({
+      initialSizes: props.initialSizes,
+      collapsible: true,
+      resizeActions: [
+        {
+          precedingPanels: precedingPanelsIncluding,
+          followingPanels,
+          deltaPercentage: distributablePercentage
+        },
+        {
+          precedingPanels,
+          followingPanels: followingPanelsIncluding,
+          deltaPercentage: -distributablePercentage
+        }
+      ],
+      resizableData: props.resizableData
+    });
+  } else {
+    precedingPanels = props.strategy === "preceding" ? precedingPanels : [...precedingPanels, props.panel];
+    followingPanels = props.strategy === "following" ? followingPanels : [props.panel, ...followingPanels];
+    if (props.strategy === "preceding") {
+      props.deltaPercentage = -props.deltaPercentage;
+    }
+    const distributablePercentage = getDistributablePercentage({
+      desiredPercentage: props.deltaPercentage,
+      initialSizes: props.initialSizes,
+      collapsible: props.collapsible,
+      resizeActions: [
+        {
+          precedingPanels,
+          followingPanels
+        }
+      ],
+      resizableData: {
+        rootSize: props.resizableData.rootSize
+      }
+    });
+    resize({
+      initialSizes: props.initialSizes,
+      collapsible: true,
+      resizeActions: [
+        {
+          precedingPanels,
+          followingPanels,
+          deltaPercentage: distributablePercentage
+        }
+      ],
+      resizableData: props.resizableData
+    });
+  }
+};
+var deltaResize = (props) => {
+  if (props.altKey && props.panels.length > 2) {
+    let panelIndex = props.panels.filter(
+      (panel2) => !!(props.handle.compareDocumentPosition(panel2.data.element) & Node.DOCUMENT_POSITION_PRECEDING)
+    ).length - 1;
+    const isPrecedingHandle = panelIndex === 0;
+    if (isPrecedingHandle) {
+      panelIndex++;
+      props.deltaPercentage = -props.deltaPercentage;
+    }
+    const panel = props.panels[panelIndex];
+    const panelSize = props.initialSizes[panelIndex];
+    const minDelta = resolveSize(panel.data.minSize, props.resizableData.rootSize) - panelSize;
+    const maxDelta = resolveSize(panel.data.maxSize, props.resizableData.rootSize) - panelSize;
+    const cappedDeltaPercentage = Math.max(minDelta, Math.min(props.deltaPercentage * 2, maxDelta)) / 2;
+    const [precedingPanels, followingPanels] = splitPanels({
+      panels: props.panels,
+      focusedElement: panel.data.element
+    });
+    const precedingPanelsIncluding = [...precedingPanels, panel];
+    const followingPanelsIncluding = [panel, ...followingPanels];
+    const distributablePercentage = getDistributablePercentage({
+      desiredPercentage: cappedDeltaPercentage,
+      initialSizes: props.initialSizes,
+      collapsible: false,
+      resizeActions: [
+        {
+          precedingPanels: precedingPanelsIncluding,
+          followingPanels
+        },
+        {
+          precedingPanels,
+          followingPanels: followingPanelsIncluding,
+          negate: true
+        }
+      ],
+      resizableData: {
+        rootSize: props.resizableData.rootSize
+      }
+    });
+    if (props.resizableData.handleCursorStyle === true) {
+      handleResizeConstraints({
+        orientation: props.resizableData.orientation,
+        desiredPercentage: props.deltaPercentage,
+        distributablePercentage,
+        revertConstraints: isPrecedingHandle
+      });
+    }
+    resize({
+      initialSizes: props.initialSizes,
+      collapsible: false,
+      resizeActions: [
+        {
+          precedingPanels: precedingPanelsIncluding,
+          followingPanels,
+          deltaPercentage: distributablePercentage
+        },
+        {
+          precedingPanels,
+          followingPanels: followingPanelsIncluding,
+          deltaPercentage: -distributablePercentage
+        }
+      ],
+      resizableData: props.resizableData
+    });
+  } else {
+    const [precedingPanels, followingPanels] = splitPanels({
+      panels: props.panels,
+      focusedElement: props.handle
+    });
+    const distributablePercentage = getDistributablePercentage({
+      desiredPercentage: props.deltaPercentage,
+      initialSizes: props.initialSizes,
+      collapsible: true,
+      resizeActions: [
+        {
+          precedingPanels,
+          followingPanels
+        }
+      ],
+      resizableData: {
+        rootSize: props.resizableData.rootSize
+      }
+    });
+    resize({
+      initialSizes: props.initialSizes,
+      collapsible: true,
+      resizeActions: [
+        {
+          precedingPanels,
+          followingPanels,
+          deltaPercentage: distributablePercentage
+        }
+      ],
+      resizableData: props.resizableData
+    });
+    if (props.resizableData.handleCursorStyle) {
+      const fixedDesiredPercentage = fixToPrecision(props.deltaPercentage);
+      const fixedDistributablePercentage = fixToPrecision(
+        distributablePercentage
+      );
+      let betweenCollapse = false;
+      const precedingPanel = precedingPanels[precedingPanels.length - 1];
+      if (precedingPanel.data.collapsible) {
+        const precedingCollapsedSize = resolveSize(
+          precedingPanel.data.collapsedSize ?? 0,
+          props.resizableData.rootSize
+        );
+        if (precedingPanel.size() === precedingCollapsedSize && fixedDesiredPercentage > fixedDistributablePercentage || precedingPanel.size() !== precedingCollapsedSize && fixedDesiredPercentage < fixedDistributablePercentage) {
+          betweenCollapse = true;
+        }
+      }
+      const followingPanel = followingPanels[0];
+      if (followingPanel.data.collapsible) {
+        const followingCollapsedSize = resolveSize(
+          followingPanel.data.collapsedSize ?? 0,
+          props.resizableData.rootSize
+        );
+        if (followingPanel.size() === followingCollapsedSize && fixedDesiredPercentage < fixedDistributablePercentage || followingPanel.size() !== followingCollapsedSize && fixedDesiredPercentage > fixedDistributablePercentage) {
+          betweenCollapse = true;
+        }
+      }
+      handleResizeConstraints({
+        orientation: props.resizableData.orientation,
+        desiredPercentage: props.deltaPercentage,
+        distributablePercentage,
+        betweenCollapse
+      });
+    }
+  }
+};
+var ResizableRoot = (props) => {
+  const defaultedProps = merge({
+    orientation: "horizontal",
+    initialSizes: [],
+    keyboardDelta: 0.1,
+    handleCursorStyle: true
+  }, props);
+  const localProps = defaultedProps;
+  const otherProps = omit(defaultedProps, "orientation", "sizes", "onSizesChange", "initialSizes", "keyboardDelta", "handleCursorStyle", "contextId", "ref", "style", "children");
+  const [sizes, setSizes] = createControllableSignal({
+    value: () => localProps.sizes,
+    initialValue: [],
+    onChange: localProps.onSizesChange
+  });
+  const [ref, setRef] = createSignal(null);
+  const rootSize = createSize({
+    element: ref,
+    dimension: () => localProps.orientation === "horizontal" ? "width" : "height"
+  });
+  const [panels, setPanels] = createSignal([]);
+  const sizesToIds = [];
+  const registerPanel = (panelData) => {
+    const _panels = panels();
+    const panelIndex = _panels.filter((panel2) => !!(panelData.element.compareDocumentPosition(panel2.data.element) & Node.DOCUMENT_POSITION_PRECEDING)).length;
+    const idExists = sizesToIds[panelIndex] === void 0 || sizesToIds[panelIndex] === panelData.id;
+    const sizeExists = sizes()[panelIndex] !== void 0;
+    let panelSize = null;
+    if (panelData.initialSize !== null) {
+      panelSize = resolveSize(panelData.initialSize, rootSize());
+    } else if (localProps.initialSizes[panelIndex] !== void 0 && idExists) {
+      panelSize = resolveSize(localProps.initialSizes[panelIndex], rootSize());
+    }
+    panelSize = panelSize ?? 0.5;
+    setSizes((sizes2) => {
+      let newSizes = [...sizes2];
+      const previousTotalSize = newSizes.reduce((totalSize, size) => totalSize + size, 0);
+      if ((idExists && !sizeExists || !idExists) && previousTotalSize === 1) {
+        const offsetPerPanel = panelSize / newSizes.length;
+        newSizes = newSizes.map((size) => size - offsetPerPanel);
+      }
+      if (idExists) {
+        if (!sizeExists) {
+          newSizes[panelIndex] = panelSize;
+        }
+        sizesToIds[panelIndex] = panelData.id;
+      } else {
+        newSizes.splice(panelIndex, 0, panelSize);
+        sizesToIds.splice(panelIndex, 0, panelData.id);
+      }
+      return newSizes;
+    });
+    const panelSizeMemo = createMemo(() => {
+      const index = sizesToIds.indexOf(panelData.id);
+      return sizes()[index];
+    });
+    createEffect(() => panelData.onResize?.(panelSizeMemo()));
+    const panel = {
+      data: panelData,
+      size: panelSizeMemo,
+      resize: (size, strategy) => resize2(sizesToIds.indexOf(panelData.id), size, strategy),
+      collapse: (strategy) => collapse(sizesToIds.indexOf(panelData.id), strategy),
+      expand: (strategy) => expand(sizesToIds.indexOf(panelData.id), strategy)
+    };
+    setPanels((panels2) => {
+      const newPanels = [...panels2];
+      newPanels.push(panel);
+      newPanels.sort((a, b) => sortByDocumentPosition(a.data.element, b.data.element));
+      return newPanels;
+    });
+    return panel;
+  };
+  const unregisterPanel = (id) => {
+    setPanels((panels2) => panels2.filter((panel) => panel.data.id !== id));
+    const panelSizeIndex = sizesToIds.indexOf(id);
+    sizesToIds.splice(panelSizeIndex, 1);
+    setSizes((sizes2) => {
+      let newSizes = [...sizes2];
+      newSizes.splice(panelSizeIndex, 1);
+      const totalSize = newSizes.reduce((totalSize2, size) => totalSize2 + size, 0);
+      const offset = totalSize - 1;
+      const offsetPerPanel = offset / newSizes.length;
+      newSizes = newSizes.map((size) => size + offsetPerPanel);
+      return newSizes;
+    });
+  };
+  createEffect(() => {
+    if (localProps.onSizesChange !== void 0) {
+      localProps.onSizesChange(sizes());
+    }
+  });
+  const resize2 = (panelIndex, size, strategy) => {
+    untrack(() => {
+      const panel = panels()[panelIndex];
+      if (!panel) return;
+      const minSize = resolveSize(panel.data.minSize, rootSize());
+      const maxSize = resolveSize(panel.data.maxSize, rootSize());
+      const newSize = resolveSize(size, rootSize());
+      const allowedSize = Math.max(minSize, Math.min(newSize, maxSize));
+      const deltaPercentage = allowedSize - sizes()[panelIndex];
+      resizePanel({
+        deltaPercentage,
+        strategy: strategy ?? "both",
+        panel,
+        panels: panels(),
+        initialSizes: panels().map((panel2) => panel2.size()),
+        collapsible: false,
+        resizableData: {
+          rootSize: rootSize(),
+          orientation: localProps.orientation,
+          setSizes
+        }
+      });
+    });
+  };
+  const collapse = (panelIndex, strategy) => {
+    untrack(() => {
+      const panel = panels()[panelIndex];
+      if (!panel) return;
+      const panelSize = sizes()[panelIndex];
+      const collapsedSize = resolveSize(panel.data.collapsedSize ?? 0, rootSize());
+      if (!panel.data.collapsible || panelSize === collapsedSize) return;
+      const deltaPercentage = collapsedSize - panelSize;
+      resizePanel({
+        deltaPercentage,
+        strategy: strategy ?? "both",
+        panel,
+        panels: panels(),
+        initialSizes: panels().map((panel2) => panel2.size()),
+        collapsible: true,
+        resizableData: {
+          rootSize: rootSize(),
+          orientation: localProps.orientation,
+          setSizes
+        }
+      });
+    });
+  };
+  const expand = (panelIndex, strategy) => {
+    untrack(() => {
+      const panel = panels()[panelIndex];
+      if (!panel) return;
+      const panelSize = sizes()[panelIndex];
+      const collapsedSize = resolveSize(panel.data.collapsedSize ?? 0, rootSize());
+      if (!panel.data.collapsible || panelSize !== collapsedSize) return;
+      const minSize = resolveSize(panel.data.minSize, rootSize());
+      const deltaPercentage = minSize - panelSize;
+      resizePanel({
+        deltaPercentage,
+        strategy: strategy ?? "both",
+        panel,
+        panels: panels(),
+        initialSizes: panels().map((panel2) => panel2.size()),
+        collapsible: true,
+        resizableData: {
+          rootSize: rootSize(),
+          orientation: localProps.orientation,
+          setSizes
+        }
+      });
+    });
+  };
+  let initialSizes = null;
+  let altKeyCache2 = false;
+  const onDrag = (handle, delta, altKey) => {
+    if (initialSizes === null || altKeyCache2 !== altKey) {
+      initialSizes = panels().map((panel) => panel.size());
+      altKeyCache2 = altKey;
+    }
+    deltaResize({
+      deltaPercentage: delta / rootSize(),
+      altKey,
+      handle,
+      panels: panels(),
+      initialSizes,
+      resizableData: {
+        rootSize: rootSize(),
+        handleCursorStyle: localProps.handleCursorStyle,
+        orientation: localProps.orientation,
+        setSizes
+      }
+    });
+  };
+  const onKeyDown = (handle, event, altKey) => {
+    if (event.key === "Enter") {
+      const [precedingPanels, followingPanels] = splitPanels({
+        panels: panels(),
+        focusedElement: handle
+      });
+      let collapsiblePanel = precedingPanels[precedingPanels.length - 1];
+      if (!collapsiblePanel || !collapsiblePanel.data.collapsible) {
+        collapsiblePanel = followingPanels[0];
+        if (!collapsiblePanel || !collapsiblePanel.data.collapsible) return;
+      }
+      const size = collapsiblePanel.size();
+      const collapsedSize = resolveSize(collapsiblePanel.data.collapsedSize ?? 0, rootSize());
+      if (size === collapsedSize) {
+        collapsiblePanel.expand("following");
+      } else {
+        collapsiblePanel.collapse("following");
+      }
+      return;
+    }
+    let deltaPercentage = null;
+    if (localProps.orientation === "horizontal" && event.key === "ArrowLeft" || localProps.orientation === "vertical" && event.key === "ArrowUp" || event.key === "Home") {
+      if (event.shiftKey || event.key === "Home") {
+        deltaPercentage = -1;
+      } else {
+        deltaPercentage = -resolveSize(localProps.keyboardDelta, rootSize());
+      }
+    } else if (localProps.orientation === "horizontal" && event.key === "ArrowRight" || localProps.orientation === "vertical" && event.key === "ArrowDown" || event.key === "End") {
+      if (event.shiftKey || event.key === "End") {
+        deltaPercentage = 1;
+      } else {
+        deltaPercentage = resolveSize(localProps.keyboardDelta, rootSize());
+      }
+    }
+    if (deltaPercentage === null) return;
+    event.preventDefault();
+    const initialSizes2 = panels().map((panel) => panel.size());
+    deltaResize({
+      deltaPercentage,
+      altKey,
+      handle,
+      panels: panels(),
+      initialSizes: initialSizes2,
+      resizableData: {
+        rootSize: rootSize(),
+        handleCursorStyle: false,
+        orientation: localProps.orientation,
+        setSizes
+      }
+    });
+  };
+  const childrenProps = {
+    get sizes() {
+      return sizes();
+    },
+    setSizes,
+    get orientation() {
+      return localProps.orientation;
+    },
+    get keyboardDelta() {
+      return localProps.keyboardDelta;
+    },
+    get handleCursorStyle() {
+      return localProps.handleCursorStyle;
+    },
+    resize: resize2,
+    collapse,
+    expand
+  };
+  const memoizedChildren = createOnce(() => localProps.children);
+  const resolveChildren = () => {
+    const children = memoizedChildren()();
+    if (isFunction(children)) {
+      return children(childrenProps);
+    }
+    return children;
+  };
+  const memoizedResizableRoot = createMemo(() => {
+    const ResizableContext2 = createResizableContext(localProps.contextId);
+    const InternalResizableContext2 = createInternalResizableContext(localProps.contextId);
+    return createComponent(ResizableContext2, {
+      value: {
+        sizes,
+        setSizes,
+        orientation: () => localProps.orientation,
+        keyboardDelta: () => localProps.keyboardDelta,
+        handleCursorStyle: () => localProps.handleCursorStyle,
+        resize: resize2,
+        collapse,
+        expand
+      },
+      get children() {
+        return createComponent(InternalResizableContext2, {
+          value: {
+            sizes,
+            setSizes,
+            orientation: () => localProps.orientation,
+            keyboardDelta: () => localProps.keyboardDelta,
+            handleCursorStyle: () => localProps.handleCursorStyle,
+            rootSize,
+            panels,
+            registerPanel,
+            unregisterPanel,
+            onDrag,
+            onDragEnd: () => initialSizes = null,
+            onKeyDown,
+            resize: resize2,
+            collapse,
+            expand
+          },
+          get children() {
+            return createComponent(Dynamic, mergeProps({
+              as: "div",
+              ref(r$) {
+                var _ref$ = mergeRefs(setRef, localProps.ref);
+                typeof _ref$ === "function" && _ref$(r$);
+              },
+              get style() {
+                return combineStyle({
+                  display: "flex",
+                  "flex-direction": localProps.orientation === "horizontal" ? "row" : "column"
+                }, localProps.style);
+              },
+              get ["data-orientation"]() {
+                return localProps.orientation;
+              },
+              "data-corvu-resizable-root": ""
+            }, otherProps, {
+              get children() {
+                return untrack(() => resolveChildren());
+              }
+            }));
+          }
+        });
+      }
+    });
+  });
+  return memoizedResizableRoot;
+};
+var Root_default = ResizableRoot;
+
+// src/index.ts
+var Resizable = Object.assign(Root_default, {
+  Panel: Panel_default,
+  Handle: Handle_default,
+  useContext: useResizableContext,
+  usePanelContext: useResizablePanelContext
+});
+var index_default = Resizable;
+
+export { Handle_default as Handle, Panel_default as Panel, Root_default as Root, index_default as default, useResizableContext as useContext, useResizablePanelContext as usePanelContext };