@corvu-next/resizable 0.1.0

package/dist/index.jsx

@@ -0,0 +1,1706 @@
+// src/context.ts
+import { createContext, useContext } from "solid-js";
+import {
+  createKeyedContext,
+  useKeyedContext
+} from "@corvu-next/utils/create/keyedContext";
+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/Handle.tsx
+import {
+  callEventHandler,
+  combineStyle
+} from "@corvu-next/utils/dom";
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  merge,
+  omit,
+  Show
+} from "solid-js";
+import { Dynamic } from "@corvu-next/utils/dynamic";
+
+// 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 &= ~2;
+      } else if (constraints === 2) {
+        globalResizeConstraints |= 2;
+        globalResizeConstraints &= ~1;
+      } else if (constraints === 3) {
+        globalResizeConstraints |= 3;
+      } else {
+        globalResizeConstraints &= ~3;
+      }
+      break;
+    case "vertical":
+      if (constraints === 1) {
+        globalResizeConstraints |= 4;
+        globalResizeConstraints &= ~8;
+      } else if (constraints === 2) {
+        globalResizeConstraints |= 8;
+        globalResizeConstraints &= ~4;
+      } else if (constraints === 3) {
+        globalResizeConstraints |= 12;
+      } else {
+        globalResizeConstraints &= ~12;
+      }
+      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);
+  }
+};
+
+// src/lib/handleManager.ts
+import { some } from "@corvu-next/utils/reactivity";
+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);
+};
+
+// src/Handle.tsx
+import { dataIf } from "@corvu-next/utils";
+import { mergeRefs } from "@corvu-next/utils/reactivity";
+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 <Dynamic
+    as="button"
+    ref={mergeRefs(setRef, localProps.ref)}
+    style={combineStyle(
+      {
+        position: "relative",
+        cursor: context().handleCursorStyle() ? "inherit" : void 0,
+        "touch-action": "none",
+        "flex-shrink": 0
+      },
+      localProps.style
+    )}
+    disabled={localProps.disabled}
+    onBlur={onBlur}
+    onFocus={onFocus}
+    onKeyDown={onKeyDown}
+    onKeyUp={onKeyUp}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}
+    onPointerDown={onPointerDown}
+    role="separator"
+    aria-controls={ariaInformation()?.ariaControls}
+    aria-orientation={context().orientation()}
+    aria-valuemax={ariaInformation()?.ariaValueMax}
+    aria-valuemin={ariaInformation()?.ariaValueMin}
+    aria-valuenow={ariaInformation()?.ariaValueNow}
+    data-active={dataIf(active())}
+    data-dragging={dataIf(dragging())}
+    data-orientation={context().orientation()}
+    data-corvu-resizable-handle=""
+    {...otherProps}
+  >
+      <Show when={startIntersectionHandle()}>
+        <div
+    data-corvu-resizable-handle-start-intersection
+    onMouseEnter={() => setHovered("startIntersection")}
+    onMouseLeave={(e) => {
+      if (ref()?.contains(e.relatedTarget) === true) {
+        setHovered("handle");
+      } else {
+        setHovered(null);
+      }
+    }}
+    style={{
+      position: "absolute",
+      "aspect-ratio": "1 / 1",
+      top: 0,
+      left: 0,
+      height: context().orientation() === "horizontal" ? void 0 : "100%",
+      width: context().orientation() === "horizontal" ? "100%" : void 0,
+      transform: context().orientation() === "horizontal" ? "translate3d(0, -100%, 0)" : "translate3d(-100%, 0, 0)",
+      "z-index": 1
+    }}
+  />
+      </Show>
+      {localProps.children}
+      <Show when={endIntersectionHandle()}>
+        <div
+    data-corvu-resizable-handle-end-intersection
+    onMouseEnter={() => setHovered("endIntersection")}
+    onMouseLeave={(e) => {
+      if (ref()?.contains(e.relatedTarget) === true) {
+        setHovered("handle");
+      } else {
+        setHovered(null);
+      }
+    }}
+    style={{
+      position: "absolute",
+      "aspect-ratio": "1 / 1",
+      bottom: 0,
+      right: 0,
+      height: context().orientation() === "horizontal" ? void 0 : "100%",
+      width: context().orientation() === "horizontal" ? "100%" : void 0,
+      transform: context().orientation() === "horizontal" ? "translate3d(0, 100%, 0)" : "translate3d(100%, 0, 0)",
+      "z-index": 1
+    }}
+  />
+      </Show>
+    </Dynamic>;
+};
+var Handle_default = ResizableHandle;
+
+// src/Panel.tsx
+import { combineStyle as combineStyle2 } from "@corvu-next/utils/dom";
+import {
+  createEffect as createEffect2,
+  createMemo as createMemo2,
+  createSignal as createSignal2,
+  createUniqueId,
+  merge as merge2,
+  omit as omit2,
+  untrack
+} from "solid-js";
+import { dataIf as dataIf2, isFunction } from "@corvu-next/utils";
+import { Dynamic as Dynamic2 } from "@corvu-next/utils/dynamic";
+import createOnce from "@corvu-next/utils/create/once";
+
+// src/panelContext.ts
+import { createContext as createContext2, useContext as useContext2 } from "solid-js";
+import {
+  createKeyedContext as createKeyedContext2,
+  useKeyedContext as useKeyedContext2
+} from "@corvu-next/utils/create/keyedContext";
+var ResizablePanelContext = createContext2(null);
+var createResizablePanelContext = (contextId) => {
+  if (contextId === void 0) return ResizablePanelContext;
+  const context = createKeyedContext2(
+    `resizable-panel-${contextId}`
+  );
+  return context;
+};
+var useResizablePanelContext = (contextId) => {
+  if (contextId === void 0) {
+    const context2 = useContext2(ResizablePanelContext);
+    if (!context2) {
+      throw new Error(
+        "[corvu]: Resizable panel context not found. Make sure to call usePanelContext under <Resizable.Panel>"
+      );
+    }
+    return context2;
+  }
+  const context = useKeyedContext2(
+    `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;
+};
+
+// src/Panel.tsx
+import { mergeRefs as mergeRefs2 } from "@corvu-next/utils/reactivity";
+var ResizablePanel = (props) => {
+  const defaultedProps = merge2(
+    {
+      initialSize: null,
+      minSize: 0,
+      maxSize: 1,
+      collapsible: false,
+      collapsedSize: 0,
+      collapseThreshold: 0.05,
+      panelId: createUniqueId()
+    },
+    props
+  );
+  const localProps = defaultedProps;
+  const otherProps = omit2(
+    defaultedProps,
+    "initialSize",
+    "minSize",
+    "maxSize",
+    "collapsible",
+    "collapsedSize",
+    "collapseThreshold",
+    "onResize",
+    "onCollapse",
+    "onExpand",
+    "contextId",
+    "panelId",
+    "ref",
+    "style",
+    "children"
+  );
+  const [ref, setRef] = createSignal2(null);
+  const context = createMemo2(
+    () => useInternalResizableContext(localProps.contextId)
+  );
+  const [panelInstance, setPanelInstance] = createSignal2(
+    null
+  );
+  createEffect2((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 = createMemo2((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 = createMemo2(() => {
+    const ResizablePanelContext2 = createResizablePanelContext(
+      localProps.contextId
+    );
+    return <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
+      }}
+    >
+        <Dynamic2
+      as="div"
+      ref={mergeRefs2(setRef, localProps.ref)}
+      style={combineStyle2(
+        {
+          "flex-basis": panelSize() * 100 + "%"
+        },
+        localProps.style
+      )}
+      id={localProps.panelId}
+      data-collapsed={dataIf2(collapsed())}
+      data-expanded={dataIf2(
+        localProps.collapsible === true && !collapsed()
+      )}
+      data-orientation={context().orientation()}
+      data-corvu-resizable-panel=""
+      {...otherProps}
+    >
+          {untrack(() => resolveChildren())}
+        </Dynamic2>
+      </ResizablePanelContext2>;
+  });
+  return memoizedResizablePanel;
+};
+var Panel_default = ResizablePanel;
+
+// src/Root.tsx
+import {
+  combineStyle as combineStyle3,
+  sortByDocumentPosition
+} from "@corvu-next/utils/dom";
+import {
+  createEffect as createEffect3,
+  createMemo as createMemo3,
+  createSignal as createSignal3,
+  merge as merge3,
+  omit as omit3,
+  untrack as untrack2
+} from "solid-js";
+
+// src/lib/resize.ts
+import "solid-js";
+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
+      });
+    }
+  }
+};
+
+// src/Root.tsx
+import { Dynamic as Dynamic3 } from "@corvu-next/utils/dynamic";
+import { isFunction as isFunction2 } from "@corvu-next/utils";
+import createControllableSignal from "@corvu-next/utils/create/controllableSignal";
+import createOnce2 from "@corvu-next/utils/create/once";
+import createSize from "@corvu-next/utils/create/size";
+import { mergeRefs as mergeRefs3 } from "@corvu-next/utils/reactivity";
+var ResizableRoot = (props) => {
+  const defaultedProps = merge3(
+    {
+      orientation: "horizontal",
+      initialSizes: [],
+      keyboardDelta: 0.1,
+      handleCursorStyle: true
+    },
+    props
+  );
+  const localProps = defaultedProps;
+  const otherProps = omit3(
+    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] = createSignal3(null);
+  const rootSize = createSize({
+    element: ref,
+    dimension: () => localProps.orientation === "horizontal" ? "width" : "height"
+  });
+  const [panels, setPanels] = createSignal3([]);
+  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 = createMemo3(() => {
+      const index = sizesToIds.indexOf(panelData.id);
+      return sizes()[index];
+    });
+    createEffect3(() => 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;
+    });
+  };
+  createEffect3(() => {
+    if (localProps.onSizesChange !== void 0) {
+      localProps.onSizesChange(sizes());
+    }
+  });
+  const resize2 = (panelIndex, size, strategy) => {
+    untrack2(() => {
+      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) => {
+    untrack2(() => {
+      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) => {
+    untrack2(() => {
+      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 = createOnce2(() => localProps.children);
+  const resolveChildren = () => {
+    const children = memoizedChildren()();
+    if (isFunction2(children)) {
+      return children(childrenProps);
+    }
+    return children;
+  };
+  const memoizedResizableRoot = createMemo3(() => {
+    const ResizableContext2 = createResizableContext(localProps.contextId);
+    const InternalResizableContext2 = createInternalResizableContext(
+      localProps.contextId
+    );
+    return <ResizableContext2
+      value={{
+        sizes,
+        setSizes,
+        orientation: () => localProps.orientation,
+        keyboardDelta: () => localProps.keyboardDelta,
+        handleCursorStyle: () => localProps.handleCursorStyle,
+        resize: resize2,
+        collapse,
+        expand
+      }}
+    >
+        <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
+      }}
+    >
+          <Dynamic3
+      as="div"
+      ref={mergeRefs3(setRef, localProps.ref)}
+      style={combineStyle3(
+        {
+          display: "flex",
+          "flex-direction": localProps.orientation === "horizontal" ? "row" : "column"
+        },
+        localProps.style
+      )}
+      data-orientation={localProps.orientation}
+      data-corvu-resizable-root=""
+      {...otherProps}
+    >
+            {untrack2(() => resolveChildren())}
+          </Dynamic3>
+        </InternalResizableContext2>
+      </ResizableContext2>;
+  });
+  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
+};