@destyler/splitter 0.0.3 → 0.0.4

package/dist/component.mjs

@@ -1,7 +1,2001 @@
-export { DestylerSplitterGroup, DestylerSplitterPanel, DestylerSplitterResizeHandle, DestylerSplitterRoot } from './index.mjs';
-import 'vue';
-import '@destyler/primitive';
-import '@destyler/shared';
-import '@destyler/composition';
-import '@destyler/directives';
-import 'nanoid/non-secure';
+import { watchEffect, defineComponent, ref, computed, watch, h, toRefs, onMounted, onUnmounted } from 'vue';
+import { primitiveProps, Primitive } from '@destyler/primitive';
+import { isBrowser, createContext, areEqual } from '@destyler/shared';
+import { useId, useDirection, useForwardExpose } from '@destyler/composition';
+
+function assert(expectedCondition, message = "Assertion failed!") {
+  if (!expectedCondition) {
+    console.error(message);
+    throw new Error(message);
+  }
+}
+
+function getPanelGroupElement(id, rootElement = document) {
+  if (!isBrowser)
+    return null;
+  if (rootElement instanceof HTMLElement && rootElement?.dataset?.panelGroupId === id) {
+    return rootElement;
+  }
+  const element = rootElement.querySelector(
+    `[data-panel-group][data-panel-group-id="${id}"]`
+  );
+  if (element)
+    return element;
+  return null;
+}
+function getResizeHandleElement(id, scope = document) {
+  if (!isBrowser)
+    return null;
+  const element = scope.querySelector(`[data-panel-resize-handle-id="${id}"]`);
+  if (element)
+    return element;
+  return null;
+}
+function getResizeHandleElementIndex(groupId, id, scope = document) {
+  if (!isBrowser)
+    return null;
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
+  const index = handles.findIndex(
+    (handle) => handle.getAttribute("data-panel-resize-handle-id") === id
+  );
+  return index ?? null;
+}
+function getResizeHandleElementsForGroup(groupId, scope = document) {
+  if (!isBrowser)
+    return [];
+  return Array.from(
+    scope.querySelectorAll(
+      `[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`
+    )
+  );
+}
+function getResizeHandlePanelIds(groupId, handleId, panelsArray, scope = document) {
+  const handle = getResizeHandleElement(handleId, scope);
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
+  const index = handle ? handles.indexOf(handle) : -1;
+  const idBefore = panelsArray[index]?.id ?? null;
+  const idAfter = panelsArray[index + 1]?.id ?? null;
+  return [idBefore, idAfter];
+}
+
+function useWindowSplitterResizeHandlerBehavior({
+  disabled,
+  handleId,
+  resizeHandler,
+  panelGroupElement
+}) {
+  watchEffect((onCleanup) => {
+    const _panelGroupElement = panelGroupElement.value;
+    if (disabled.value || resizeHandler.value === null || _panelGroupElement === null)
+      return;
+    const handleElement = getResizeHandleElement(handleId, _panelGroupElement);
+    if (handleElement == null)
+      return;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented)
+        return;
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "End":
+        case "Home": {
+          event.preventDefault();
+          resizeHandler.value?.(event);
+          break;
+        }
+        case "F6": {
+          event.preventDefault();
+          const groupId = handleElement.getAttribute("data-panel-group-id");
+          assert(groupId);
+          const handles = getResizeHandleElementsForGroup(
+            groupId,
+            _panelGroupElement
+          );
+          const index = getResizeHandleElementIndex(
+            groupId,
+            handleId,
+            _panelGroupElement
+          );
+          assert(index !== null);
+          const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
+          const nextHandle = handles[nextIndex];
+          nextHandle.focus();
+          break;
+        }
+      }
+    };
+    handleElement.addEventListener("keydown", onKeyDown);
+    onCleanup(() => {
+      handleElement.removeEventListener("keydown", onKeyDown);
+    });
+  });
+}
+
+let currentCursorStyle = null;
+let styleElement = null;
+function getCursorStyle(state, constraintFlags) {
+  if (constraintFlags) {
+    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+    if (horizontalMin) {
+      if (verticalMin)
+        return "se-resize";
+      else if (verticalMax)
+        return "ne-resize";
+      else
+        return "e-resize";
+    } else if (horizontalMax) {
+      if (verticalMin)
+        return "sw-resize";
+      else if (verticalMax)
+        return "nw-resize";
+      else
+        return "w-resize";
+    } else if (verticalMin) {
+      return "s-resize";
+    } else if (verticalMax) {
+      return "n-resize";
+    }
+  }
+  switch (state) {
+    case "horizontal":
+      return "ew-resize";
+    case "intersection":
+      return "move";
+    case "vertical":
+      return "ns-resize";
+  }
+}
+function resetGlobalCursorStyle() {
+  if (styleElement !== null) {
+    document.head.removeChild(styleElement);
+    currentCursorStyle = null;
+    styleElement = null;
+  }
+}
+function setGlobalCursorStyle(state, constraintFlags) {
+  const style = getCursorStyle(state, constraintFlags);
+  if (currentCursorStyle === style)
+    return;
+  currentCursorStyle = style;
+  if (styleElement === null) {
+    styleElement = document.createElement("style");
+    document.head.appendChild(styleElement);
+  }
+  styleElement.innerHTML = `*{cursor: ${style}!important;}`;
+}
+function computePanelFlexBoxStyle({
+  defaultSize,
+  dragState,
+  layout,
+  panelData,
+  panelIndex,
+  precision = 3
+}) {
+  const size = layout[panelIndex];
+  let flexGrow;
+  if (size == null) {
+    flexGrow = defaultSize !== void 0 ? defaultSize.toPrecision(precision) : "1";
+  } else if (panelData.length === 1) {
+    flexGrow = "1";
+  } else {
+    flexGrow = size.toPrecision(precision);
+  }
+  return {
+    flexBasis: 0,
+    flexGrow,
+    flexShrink: 1,
+    overflow: "hidden",
+    pointerEvents: dragState !== null ? "none" : void 0
+  };
+}
+
+function isKeyDown(event) {
+  return event.type === "keydown";
+}
+function isMouseEvent(event) {
+  return event.type.startsWith("mouse");
+}
+function isTouchEvent(event) {
+  return event.type.startsWith("touch");
+}
+function getResizeEventCoordinates(event) {
+  if (isMouseEvent(event)) {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  } else if (isTouchEvent(event)) {
+    const touch = event.touches[0];
+    if (touch && touch.clientX && touch.clientY) {
+      return {
+        x: touch.clientX,
+        y: touch.clientY
+      };
+    }
+  }
+  return {
+    x: Number.POSITIVE_INFINITY,
+    y: Number.POSITIVE_INFINITY
+  };
+}
+function getResizeEventCursorPosition(direction, event) {
+  const isHorizontal = direction === "horizontal";
+  const { x, y } = getResizeEventCoordinates(event);
+  return isHorizontal ? x : y;
+}
+
+function intersects(rectOne, rectTwo, strict) {
+  if (strict) {
+    return rectOne.x < rectTwo.x + rectTwo.width && rectOne.x + rectOne.width > rectTwo.x && rectOne.y < rectTwo.y + rectTwo.height && rectOne.y + rectOne.height > rectTwo.y;
+  } else {
+    return rectOne.x <= rectTwo.x + rectTwo.width && rectOne.x + rectOne.width >= rectTwo.x && rectOne.y <= rectTwo.y + rectTwo.height && rectOne.y + rectOne.height >= rectTwo.y;
+  }
+}
+
+function compare(a, b) {
+  if (a === b)
+    throw new Error("Cannot compare node with itself");
+  const ancestors = {
+    a: getAncestors(a),
+    b: getAncestors(b)
+  };
+  let common_ancestor;
+  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+    a = ancestors.a.pop();
+    b = ancestors.b.pop();
+    common_ancestor = a;
+  }
+  assert(common_ancestor);
+  const z_indexes = {
+    a: getZIndex(findStackingContext(ancestors.a)),
+    b: getZIndex(findStackingContext(ancestors.b))
+  };
+  if (z_indexes.a === z_indexes.b) {
+    const children = common_ancestor.childNodes;
+    const furthest_ancestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1)
+    };
+    let i = children.length;
+    while (i--) {
+      const child = children[i];
+      if (child === furthest_ancestors.a)
+        return 1;
+      if (child === furthest_ancestors.b)
+        return -1;
+    }
+  }
+  return Math.sign(z_indexes.a - z_indexes.b);
+}
+const props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+function isFlexItem(node) {
+  const display = getComputedStyle(getParent(node)).display;
+  return display === "flex" || display === "inline-flex";
+}
+function createsStackingContext(node) {
+  const style = getComputedStyle(node);
+  if (style.position === "fixed")
+    return true;
+  if (style.zIndex !== "auto" && (style.position !== "static" || isFlexItem(node))) {
+    return true;
+  }
+  if (+style.opacity < 1)
+    return true;
+  if ("transform" in style && style.transform !== "none")
+    return true;
+  if ("webkitTransform" in style && style.webkitTransform !== "none")
+    return true;
+  if ("mixBlendMode" in style && style.mixBlendMode !== "normal")
+    return true;
+  if ("filter" in style && style.filter !== "none")
+    return true;
+  if ("webkitFilter" in style && style.webkitFilter !== "none")
+    return true;
+  if ("isolation" in style && style.isolation === "isolate")
+    return true;
+  if (props.test(style.willChange))
+    return true;
+  if (style.webkitOverflowScrolling === "touch")
+    return true;
+  return false;
+}
+function findStackingContext(nodes) {
+  let i = nodes.length;
+  while (i--) {
+    const node = nodes[i];
+    assert(node);
+    if (createsStackingContext(node))
+      return node;
+  }
+  return null;
+}
+function getZIndex(node) {
+  return node && Number(getComputedStyle(node).zIndex) || 0;
+}
+function getAncestors(node) {
+  const ancestors = [];
+  while (node) {
+    ancestors.push(node);
+    node = getParent(node);
+  }
+  return ancestors;
+}
+function getParent(node) {
+  return node.parentNode?.host || node.parentNode;
+}
+
+const EXCEEDED_HORIZONTAL_MIN = 1;
+const EXCEEDED_HORIZONTAL_MAX = 2;
+const EXCEEDED_VERTICAL_MIN = 4;
+const EXCEEDED_VERTICAL_MAX = 8;
+function getInputType() {
+  if (typeof matchMedia === "function")
+    return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
+}
+const isCoarsePointer = getInputType() === "coarse";
+const intersectingHandles = [];
+let isPointerDown = false;
+const ownerDocumentCounts = /* @__PURE__ */ new Map();
+const panelConstraintFlags = /* @__PURE__ */ new Map();
+const registeredResizeHandlers = /* @__PURE__ */ new Set();
+function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins, setResizeHandlerState) {
+  const { ownerDocument } = element;
+  const data = {
+    direction,
+    element,
+    hitAreaMargins,
+    setResizeHandlerState
+  };
+  const count = ownerDocumentCounts.get(ownerDocument) ?? 0;
+  ownerDocumentCounts.set(ownerDocument, count + 1);
+  registeredResizeHandlers.add(data);
+  updateListeners();
+  return function unregisterResizeHandle() {
+    panelConstraintFlags.delete(resizeHandleId);
+    registeredResizeHandlers.delete(data);
+    const count2 = ownerDocumentCounts.get(ownerDocument) ?? 1;
+    ownerDocumentCounts.set(ownerDocument, count2 - 1);
+    updateListeners();
+    if (count2 === 1)
+      ownerDocumentCounts.delete(ownerDocument);
+  };
+}
+function handlePointerDown(event) {
+  const { target } = event;
+  const { x, y } = getResizeEventCoordinates(event);
+  isPointerDown = true;
+  recalculateIntersectingHandles({ target, x, y });
+  updateListeners();
+  if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
+    event.preventDefault();
+  }
+}
+function handlePointerMove(event) {
+  const { x, y } = getResizeEventCoordinates(event);
+  if (!isPointerDown) {
+    const { target } = event;
+    recalculateIntersectingHandles({ target, x, y });
+  }
+  updateResizeHandlerStates("move", event);
+  updateCursor();
+  if (intersectingHandles.length > 0)
+    event.preventDefault();
+}
+function handlePointerUp(event) {
+  const { target } = event;
+  const { x, y } = getResizeEventCoordinates(event);
+  panelConstraintFlags.clear();
+  isPointerDown = false;
+  if (intersectingHandles.length > 0)
+    event.preventDefault();
+  updateResizeHandlerStates("up", event);
+  recalculateIntersectingHandles({ target, x, y });
+  updateCursor();
+  updateListeners();
+}
+function recalculateIntersectingHandles({
+  target,
+  x,
+  y
+}) {
+  intersectingHandles.splice(0);
+  let targetElement = null;
+  if (target instanceof HTMLElement)
+    targetElement = target;
+  registeredResizeHandlers.forEach((data) => {
+    const { element: dragHandleElement, hitAreaMargins } = data;
+    const dragHandleRect = dragHandleElement.getBoundingClientRect();
+    const { bottom, left, right, top } = dragHandleRect;
+    const margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine;
+    const eventIntersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
+    if (eventIntersects) {
+      if (targetElement !== null && dragHandleElement !== targetElement && !dragHandleElement.contains(targetElement) && !targetElement.contains(dragHandleElement) && compare(targetElement, dragHandleElement) > 0) {
+        let currentElement = targetElement;
+        let didIntersect = false;
+        while (currentElement) {
+          if (currentElement.contains(dragHandleElement)) {
+            break;
+          } else if (intersects(
+            currentElement.getBoundingClientRect(),
+            dragHandleRect,
+            true
+          )) {
+            didIntersect = true;
+            break;
+          }
+          currentElement = currentElement.parentElement;
+        }
+        if (didIntersect)
+          return;
+      }
+      intersectingHandles.push(data);
+    }
+  });
+}
+function reportConstraintsViolation(resizeHandleId, flag) {
+  panelConstraintFlags.set(resizeHandleId, flag);
+}
+function updateCursor() {
+  let intersectsHorizontal = false;
+  let intersectsVertical = false;
+  intersectingHandles.forEach((data) => {
+    const { direction } = data;
+    if (direction === "horizontal")
+      intersectsHorizontal = true;
+    else
+      intersectsVertical = true;
+  });
+  let constraintFlags = 0;
+  panelConstraintFlags.forEach((flag) => {
+    constraintFlags |= flag;
+  });
+  if (intersectsHorizontal && intersectsVertical)
+    setGlobalCursorStyle("intersection", constraintFlags);
+  else if (intersectsHorizontal)
+    setGlobalCursorStyle("horizontal", constraintFlags);
+  else if (intersectsVertical)
+    setGlobalCursorStyle("vertical", constraintFlags);
+  else
+    resetGlobalCursorStyle();
+}
+function updateListeners() {
+  ownerDocumentCounts.forEach((_, ownerDocument) => {
+    const { body } = ownerDocument;
+    body.removeEventListener("contextmenu", handlePointerUp);
+    body.removeEventListener("mousedown", handlePointerDown);
+    body.removeEventListener("mouseleave", handlePointerMove);
+    body.removeEventListener("mousemove", handlePointerMove);
+    body.removeEventListener("touchmove", handlePointerMove);
+    body.removeEventListener("touchstart", handlePointerDown);
+  });
+  window.removeEventListener("mouseup", handlePointerUp);
+  window.removeEventListener("touchcancel", handlePointerUp);
+  window.removeEventListener("touchend", handlePointerUp);
+  if (registeredResizeHandlers.size > 0) {
+    if (isPointerDown) {
+      if (intersectingHandles.length > 0) {
+        ownerDocumentCounts.forEach((count, ownerDocument) => {
+          const { body } = ownerDocument;
+          if (count > 0) {
+            body.addEventListener("contextmenu", handlePointerUp);
+            body.addEventListener("mouseleave", handlePointerMove);
+            body.addEventListener("mousemove", handlePointerMove);
+            body.addEventListener("touchmove", handlePointerMove, {
+              passive: false
+            });
+          }
+        });
+      }
+      window.addEventListener("mouseup", handlePointerUp);
+      window.addEventListener("touchcancel", handlePointerUp);
+      window.addEventListener("touchend", handlePointerUp);
+    } else {
+      ownerDocumentCounts.forEach((count, ownerDocument) => {
+        const { body } = ownerDocument;
+        if (count > 0) {
+          body.addEventListener("mousedown", handlePointerDown);
+          body.addEventListener("mousemove", handlePointerMove);
+          body.addEventListener("touchmove", handlePointerMove, {
+            passive: false
+          });
+          body.addEventListener("touchstart", handlePointerDown);
+        }
+      });
+    }
+  }
+}
+function updateResizeHandlerStates(action, event) {
+  registeredResizeHandlers.forEach((data) => {
+    const { setResizeHandlerState } = data;
+    const isActive = intersectingHandles.includes(data);
+    setResizeHandlerState(action, isActive, event);
+  });
+}
+
+function debounce(callback, durationMs = 10) {
+  let timeoutId = null;
+  const callable = (...args) => {
+    if (timeoutId !== null)
+      clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => {
+      callback(...args);
+    }, durationMs);
+  };
+  return callable;
+}
+
+function determinePivotIndices(groupId, dragHandleId, panelGroupElement) {
+  const index = getResizeHandleElementIndex(
+    groupId,
+    dragHandleId,
+    panelGroupElement
+  );
+  return index != null ? [index, index + 1] : [-1, -1];
+}
+
+const PRECISION = 10;
+
+function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
+  actual = Number.parseFloat(actual.toFixed(fractionDigits));
+  expected = Number.parseFloat(expected.toFixed(fractionDigits));
+  const delta = actual - expected;
+  if (delta === 0)
+    return 0;
+  else
+    return delta > 0 ? 1 : -1;
+}
+function fuzzyNumbersEqual(actual, expected, fractionDigits) {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}
+
+function resizePanel({
+  panelConstraints: panelConstraintsArray,
+  panelIndex,
+  size
+}) {
+  const panelConstraints = panelConstraintsArray[panelIndex];
+  assert(panelConstraints != null);
+  const { collapsedSize = 0, collapsible, maxSize = 100, minSize = 0 } = panelConstraints;
+  if (fuzzyCompareNumbers(size, minSize) < 0) {
+    if (collapsible) {
+      const halfwayPoint = (collapsedSize + minSize) / 2;
+      if (fuzzyCompareNumbers(size, halfwayPoint) < 0)
+        size = collapsedSize;
+      else
+        size = minSize;
+    } else {
+      size = minSize;
+    }
+  }
+  size = Math.min(maxSize, size);
+  size = Number.parseFloat(size.toFixed(PRECISION));
+  return size;
+}
+
+function validatePanelGroupLayout({
+  layout: prevLayout,
+  panelConstraints
+}) {
+  const nextLayout = [...prevLayout];
+  const nextLayoutTotalSize = nextLayout.reduce(
+    (accumulated, current) => accumulated + current,
+    0
+  );
+  if (nextLayout.length !== panelConstraints.length) {
+    throw new Error(
+      `Invalid ${panelConstraints.length} panel layout: ${nextLayout.map((size) => `${size}%`).join(", ")}`
+    );
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100)) {
+    {
+      console.warn(
+        `WARNING: Invalid layout total size: ${nextLayout.map((size) => `${size}%`).join(", ")}. Layout normalization will be applied.`
+      );
+    }
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const unsafeSize = nextLayout[index];
+      assert(unsafeSize != null);
+      const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
+      nextLayout[index] = safeSize;
+    }
+  }
+  let remainingSize = 0;
+  for (let index = 0; index < panelConstraints.length; index++) {
+    const unsafeSize = nextLayout[index];
+    assert(unsafeSize != null);
+    const safeSize = resizePanel({
+      panelConstraints,
+      panelIndex: index,
+      size: unsafeSize
+    });
+    if (unsafeSize !== safeSize) {
+      remainingSize += unsafeSize - safeSize;
+      nextLayout[index] = safeSize;
+    }
+  }
+  if (!fuzzyNumbersEqual(remainingSize, 0)) {
+    for (let index = 0; index < panelConstraints.length; index++) {
+      const prevSize = nextLayout[index];
+      assert(prevSize != null);
+      const unsafeSize = prevSize + remainingSize;
+      const safeSize = resizePanel({
+        panelConstraints,
+        panelIndex: index,
+        size: unsafeSize
+      });
+      if (prevSize !== safeSize) {
+        remainingSize -= safeSize - prevSize;
+        nextLayout[index] = safeSize;
+        if (fuzzyNumbersEqual(remainingSize, 0))
+          break;
+      }
+    }
+  }
+  return nextLayout;
+}
+
+function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
+  layout.forEach((size, index) => {
+    const panelData = panelsArray[index];
+    assert(panelData);
+    const { callbacks, constraints, id: panelId } = panelData;
+    const { collapsedSize = 0, collapsible } = constraints;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
+    if (lastNotifiedSize == null || size !== lastNotifiedSize) {
+      panelIdToLastNotifiedSizeMap[panelId] = size;
+      const { onCollapse, onExpand, onResize } = callbacks;
+      if (onResize)
+        onResize(size, lastNotifiedSize);
+      if (collapsible && (onCollapse || onExpand)) {
+        if (onExpand && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize) && size !== collapsedSize) {
+          onExpand();
+        }
+        if (onCollapse && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize) && size === collapsedSize) {
+          onCollapse();
+        }
+      }
+    }
+  });
+}
+
+function compareLayouts(a, b) {
+  if (a.length !== b.length) {
+    return false;
+  } else {
+    for (let index = 0; index < a.length; index++) {
+      if (a[index] !== b[index])
+        return false;
+    }
+  }
+  return true;
+}
+function adjustLayoutByDelta({
+  delta,
+  layout: prevLayout,
+  panelConstraints: panelConstraintsArray,
+  pivotIndices,
+  trigger
+}) {
+  if (fuzzyNumbersEqual(delta, 0))
+    return prevLayout;
+  const nextLayout = [...prevLayout];
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+  assert(firstPivotIndex != null);
+  assert(secondPivotIndex != null);
+  let deltaApplied = 0;
+  {
+    if (trigger === "keyboard") {
+      {
+        const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        const panelConstraints = panelConstraintsArray[index];
+        assert(panelConstraints);
+        if (panelConstraints.collapsible) {
+          const prevSize = prevLayout[index];
+          assert(prevSize != null);
+          const panelConstraints2 = panelConstraintsArray[index];
+          assert(panelConstraints2);
+          const { collapsedSize = 0, minSize = 0 } = panelConstraints2;
+          if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
+            const localDelta = minSize - prevSize;
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0)
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+          }
+        }
+      }
+      {
+        const index = delta < 0 ? firstPivotIndex : secondPivotIndex;
+        const panelConstraints = panelConstraintsArray[index];
+        assert(panelConstraints);
+        const { collapsible } = panelConstraints;
+        if (collapsible) {
+          const prevSize = prevLayout[index];
+          assert(prevSize != null);
+          const panelConstraints2 = panelConstraintsArray[index];
+          assert(panelConstraints2);
+          const { collapsedSize = 0, minSize = 0 } = panelConstraints2;
+          if (fuzzyNumbersEqual(prevSize, minSize)) {
+            const localDelta = prevSize - collapsedSize;
+            if (fuzzyCompareNumbers(localDelta, Math.abs(delta)) > 0)
+              delta = delta < 0 ? 0 - localDelta : localDelta;
+          }
+        }
+      }
+    }
+  }
+  {
+    const increment = delta < 0 ? 1 : -1;
+    let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    let maxAvailableDelta = 0;
+    while (true) {
+      const prevSize = prevLayout[index];
+      assert(prevSize != null);
+      const maxSafeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: 100
+      });
+      const delta2 = maxSafeSize - prevSize;
+      maxAvailableDelta += delta2;
+      index += increment;
+      if (index < 0 || index >= panelConstraintsArray.length)
+        break;
+    }
+    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+  }
+  {
+    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
+    let index = pivotIndex;
+    while (index >= 0 && index < panelConstraintsArray.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+      const prevSize = prevLayout[index];
+      assert(prevSize != null);
+      const unsafeSize = prevSize - deltaRemaining;
+      const safeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: unsafeSize
+      });
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize;
+        nextLayout[index] = safeSize;
+        if (deltaApplied.toPrecision(3).localeCompare(Math.abs(delta).toPrecision(3), void 0, {
+          numeric: true
+        }) >= 0) {
+          break;
+        }
+      }
+      if (delta < 0)
+        index--;
+      else
+        index++;
+    }
+  }
+  if (fuzzyNumbersEqual(deltaApplied, 0)) {
+    return prevLayout;
+  }
+  {
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    const prevSize = prevLayout[pivotIndex];
+    assert(prevSize != null);
+    const unsafeSize = prevSize + deltaApplied;
+    const safeSize = resizePanel({
+      panelConstraints: panelConstraintsArray,
+      panelIndex: pivotIndex,
+      size: unsafeSize
+    });
+    nextLayout[pivotIndex] = safeSize;
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize;
+      const pivotIndex2 = delta < 0 ? secondPivotIndex : firstPivotIndex;
+      let index = pivotIndex2;
+      while (index >= 0 && index < panelConstraintsArray.length) {
+        const prevSize2 = nextLayout[index];
+        assert(prevSize2 != null);
+        const unsafeSize2 = prevSize2 + deltaRemaining;
+        const safeSize2 = resizePanel({
+          panelConstraints: panelConstraintsArray,
+          panelIndex: index,
+          size: unsafeSize2
+        });
+        if (!fuzzyNumbersEqual(prevSize2, safeSize2)) {
+          deltaRemaining -= safeSize2 - prevSize2;
+          nextLayout[index] = safeSize2;
+        }
+        if (fuzzyNumbersEqual(deltaRemaining, 0))
+          break;
+        if (delta > 0)
+          index--;
+        else
+          index++;
+      }
+    }
+  }
+  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
+  if (!fuzzyNumbersEqual(totalSize, 100))
+    return prevLayout;
+  return nextLayout;
+}
+
+function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
+  const isHorizontal = direction === "horizontal";
+  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
+  assert(handleElement);
+  const groupId = handleElement.getAttribute("data-panel-group-id");
+  assert(groupId);
+  const { initialCursorPosition } = initialDragState;
+  const cursorPosition = getResizeEventCursorPosition(direction, event);
+  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
+  assert(groupElement);
+  const groupRect = groupElement.getBoundingClientRect();
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
+  const offsetPixels = cursorPosition - initialCursorPosition;
+  const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
+  return offsetPercentage;
+}
+function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy, panelGroupElement) {
+  if (isKeyDown(event)) {
+    const isHorizontal = direction === "horizontal";
+    let delta = 0;
+    if (event.shiftKey)
+      delta = 100;
+    else
+      delta = keyboardResizeBy ?? 10;
+    let movement = 0;
+    switch (event.key) {
+      case "ArrowDown":
+        movement = isHorizontal ? 0 : delta;
+        break;
+      case "ArrowLeft":
+        movement = isHorizontal ? -delta : 0;
+        break;
+      case "ArrowRight":
+        movement = isHorizontal ? delta : 0;
+        break;
+      case "ArrowUp":
+        movement = isHorizontal ? 0 : -delta;
+        break;
+      case "End":
+        movement = 100;
+        break;
+      case "Home":
+        movement = -100;
+        break;
+    }
+    return movement;
+  } else {
+    if (initialDragState == null)
+      return 0;
+    return calculateDragOffsetPercentage(
+      event,
+      dragHandleId,
+      direction,
+      initialDragState,
+      panelGroupElement
+    );
+  }
+}
+function calculateAriaValues({
+  layout,
+  panelsArray,
+  pivotIndices
+}) {
+  let currentMinSize = 0;
+  let currentMaxSize = 100;
+  let totalMinSize = 0;
+  let totalMaxSize = 0;
+  const firstIndex = pivotIndices[0];
+  assert(firstIndex != null);
+  panelsArray.forEach((panelData, index) => {
+    const { constraints } = panelData;
+    const { maxSize = 100, minSize = 0 } = constraints;
+    if (index === firstIndex) {
+      currentMinSize = minSize;
+      currentMaxSize = maxSize;
+    } else {
+      totalMinSize += minSize;
+      totalMaxSize += maxSize;
+    }
+  });
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+  const valueNow = layout[firstIndex];
+  return {
+    valueMax,
+    valueMin,
+    valueNow
+  };
+}
+function calculateUnsafeDefaultLayout({
+  panelDataArray
+}) {
+  const layout = Array(panelDataArray.length);
+  const panelConstraintsArray = panelDataArray.map(
+    (panelData) => panelData.constraints
+  );
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints);
+    const { defaultSize } = panelConstraints;
+    if (defaultSize != null) {
+      numPanelsWithSizes++;
+      layout[index] = defaultSize;
+      remainingSize -= defaultSize;
+    }
+  }
+  for (let index = 0; index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints);
+    const { defaultSize } = panelConstraints;
+    if (defaultSize != null)
+      continue;
+    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+    numPanelsWithSizes++;
+    layout[index] = size;
+    remainingSize -= size;
+  }
+  return layout;
+}
+
+function initializeDefaultStorage(storageObject) {
+  try {
+    if (typeof localStorage !== "undefined") {
+      storageObject.getItem = (name) => {
+        return localStorage.getItem(name);
+      };
+      storageObject.setItem = (name, value) => {
+        localStorage.setItem(name, value);
+      };
+    } else {
+      throw new TypeError("localStorage not supported in this environment");
+    }
+  } catch (error) {
+    console.error(error);
+    storageObject.getItem = () => null;
+    storageObject.setItem = () => {
+    };
+  }
+}
+function getPanelGroupKey(autoSaveId) {
+  return `destyler:${autoSaveId}`;
+}
+function getPanelKey(panels) {
+  return panels.map((panel) => {
+    const { constraints, id, idIsFromProps, order } = panel;
+    if (idIsFromProps) {
+      return id;
+    } else {
+      return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints);
+    }
+  }).sort((a, b) => a.localeCompare(b)).join(",");
+}
+function loadSerializedPanelGroupState(autoSaveId, storage) {
+  try {
+    const panelGroupKey = getPanelGroupKey(autoSaveId);
+    const serialized = storage.getItem(panelGroupKey);
+    if (serialized) {
+      const parsed = JSON.parse(serialized);
+      if (typeof parsed === "object" && parsed != null)
+        return parsed;
+    }
+  } catch (error) {
+  }
+  return null;
+}
+function loadPanelGroupState(autoSaveId, panels, storage) {
+  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {};
+  const panelKey = getPanelKey(panels);
+  return state[panelKey] ?? null;
+}
+function savePanelGroupState(autoSaveId, panels, panelSizesBeforeCollapse, sizes, storage) {
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels);
+  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {};
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes
+  };
+  try {
+    storage.setItem(panelGroupKey, JSON.stringify(state));
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function useWindowSplitterPanelGroupBehavior({
+  eagerValuesRef,
+  groupId,
+  layout,
+  panelDataArray,
+  panelGroupElement,
+  setLayout
+}) {
+  watchEffect((onCleanup) => {
+    const _panelGroupElement = panelGroupElement.value;
+    if (!_panelGroupElement)
+      return;
+    const resizeHandleElements = getResizeHandleElementsForGroup(
+      groupId,
+      _panelGroupElement
+    );
+    for (let index = 0; index < panelDataArray.length - 1; index++) {
+      const { valueMax, valueMin, valueNow } = calculateAriaValues({
+        layout: layout.value,
+        panelsArray: panelDataArray,
+        pivotIndices: [index, index + 1]
+      });
+      const resizeHandleElement = resizeHandleElements[index];
+      if (resizeHandleElement == null) {
+        if (import.meta.env.DEV)
+          console.warn(`WARNING: Missing resize handle for PanelGroup "${groupId}"`);
+      } else {
+        const panelData = panelDataArray[index];
+        assert(panelData);
+        resizeHandleElement.setAttribute("aria-controls", panelData.id);
+        resizeHandleElement.setAttribute(
+          "aria-valuemax",
+          `${Math.round(valueMax)}`
+        );
+        resizeHandleElement.setAttribute(
+          "aria-valuemin",
+          `${Math.round(valueMin)}`
+        );
+        resizeHandleElement.setAttribute(
+          "aria-valuenow",
+          valueNow != null ? `${Math.round(valueNow)}` : ""
+        );
+      }
+    }
+    onCleanup(() => {
+      resizeHandleElements.forEach((resizeHandleElement) => {
+        resizeHandleElement.removeAttribute("aria-controls");
+        resizeHandleElement.removeAttribute("aria-valuemax");
+        resizeHandleElement.removeAttribute("aria-valuemin");
+        resizeHandleElement.removeAttribute("aria-valuenow");
+      });
+    });
+  });
+  watchEffect((onCleanup) => {
+    const _panelGroupElement = panelGroupElement.value;
+    if (!_panelGroupElement)
+      return;
+    const eagerValues = eagerValuesRef.value;
+    assert(eagerValues);
+    const { panelDataArray: panelDataArray2 } = eagerValues;
+    const groupElement = getPanelGroupElement(groupId, _panelGroupElement);
+    assert(groupElement != null, `No group found for id "${groupId}"`);
+    const handles = getResizeHandleElementsForGroup(groupId, _panelGroupElement);
+    assert(handles);
+    const cleanupFunctions = handles.map((handle) => {
+      const handleId = handle.getAttribute("data-panel-resize-handle-id");
+      assert(handleId);
+      const [idBefore, idAfter] = getResizeHandlePanelIds(
+        groupId,
+        handleId,
+        panelDataArray2,
+        _panelGroupElement
+      );
+      if (idBefore == null || idAfter == null)
+        return () => {
+        };
+      const onKeyDown = (event) => {
+        if (event.defaultPrevented)
+          return;
+        switch (event.key) {
+          case "Enter": {
+            event.preventDefault();
+            const index = panelDataArray2.findIndex(
+              (panelData) => panelData.id === idBefore
+            );
+            if (index >= 0) {
+              const panelData = panelDataArray2[index];
+              assert(panelData);
+              const size = layout.value[index];
+              const {
+                collapsedSize = 0,
+                collapsible,
+                minSize = 0
+              } = panelData.constraints;
+              if (size != null && collapsible) {
+                const nextLayout = adjustLayoutByDelta({
+                  delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
+                  layout: layout.value,
+                  panelConstraints: panelDataArray2.map(
+                    (panelData2) => panelData2.constraints
+                  ),
+                  pivotIndices: determinePivotIndices(
+                    groupId,
+                    handleId,
+                    _panelGroupElement
+                  ),
+                  trigger: "keyboard"
+                });
+                if (layout.value !== nextLayout)
+                  setLayout(nextLayout);
+              }
+            }
+            break;
+          }
+        }
+      };
+      handle.addEventListener("keydown", onKeyDown);
+      return () => {
+        handle.removeEventListener("keydown", onKeyDown);
+      };
+    });
+    onCleanup(() => {
+      cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
+    });
+  });
+}
+
+const defaultStorage = {
+  getItem: (name) => {
+    initializeDefaultStorage(defaultStorage);
+    return defaultStorage.getItem(name);
+  },
+  setItem: (name, value) => {
+    initializeDefaultStorage(defaultStorage);
+    defaultStorage.setItem(name, value);
+  }
+};
+const splitterGroupProps = {
+  ...primitiveProps,
+  /**
+   * Group id; falls back to `useId` when not provided.
+   */
+  id: {
+    type: String,
+    required: false
+  },
+  /**
+   * Unique id used to auto-save group
+   * arrangement via `localStorage`.
+   *
+   * @default null
+   */
+  autoSaveId: {
+    type: String,
+    required: false,
+    default: null
+  },
+  /**
+   * The group orientation of splitter.
+   */
+  direction: {
+    type: String,
+    required: true
+  },
+  /**
+   * Step size when arrow key was pressed.
+   *
+   * @default 10
+   */
+  keyboardResizeBy: {
+    type: Number,
+    required: false,
+    default: 10
+  },
+  /**
+   * Custom storage API; defaults to localStorage
+   *
+   * @default () => defaultStorage
+   */
+  storage: {
+    type: Object,
+    required: false,
+    default: () => defaultStorage
+  }
+};
+const splitterGroupEmits = {
+  /**
+   * Event handler called when group layout changes
+   */
+  layout: (_layout) => true
+};
+const [injectPanelGroupContext, providePanelGroupContext] = createContext("PanelGroup");
+const SplitterGroup = defineComponent({
+  name: "DestylerSplitterGroup",
+  props: splitterGroupProps,
+  emits: splitterGroupEmits,
+  slots: Object,
+  setup(props, { emit }) {
+    const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
+    const debounceMap = {};
+    const groupId = useId(props.id, "destyler-splitter-group");
+    const dir = useDirection();
+    const { forwardRef, currentElement: panelGroupElementRef } = useForwardExpose();
+    const dragState = ref(null);
+    const layout = ref([]);
+    const panelIdToLastNotifiedSizeMapRef = ref({});
+    const panelSizeBeforeCollapseRef = ref(/* @__PURE__ */ new Map());
+    const prevDeltaRef = ref(0);
+    const committedValuesRef = computed(() => ({
+      autoSaveId: props.autoSaveId,
+      direction: props.direction,
+      dragState: dragState.value,
+      id: groupId,
+      keyboardResizeBy: props.keyboardResizeBy,
+      storage: props.storage
+    }));
+    const eagerValuesRef = ref({
+      layout: layout.value,
+      panelDataArray: [],
+      panelDataArrayChanged: false
+    });
+    const setLayout = (val) => layout.value = val;
+    useWindowSplitterPanelGroupBehavior({
+      eagerValuesRef,
+      groupId,
+      layout,
+      panelDataArray: eagerValuesRef.value.panelDataArray,
+      setLayout,
+      panelGroupElement: panelGroupElementRef
+    });
+    watchEffect(() => {
+      const { panelDataArray } = eagerValuesRef.value;
+      const { autoSaveId } = props;
+      if (autoSaveId) {
+        if (layout.value.length === 0 || layout.value.length !== panelDataArray.length)
+          return;
+        let debouncedSave = debounceMap[autoSaveId];
+        if (!debouncedSave) {
+          debouncedSave = debounce(
+            savePanelGroupState,
+            LOCAL_STORAGE_DEBOUNCE_INTERVAL
+          );
+          debounceMap[autoSaveId] = debouncedSave;
+        }
+        const clonedPanelDataArray = [...panelDataArray];
+        const clonedPanelSizesBeforeCollapse = new Map(
+          panelSizeBeforeCollapseRef.value
+        );
+        debouncedSave(
+          autoSaveId,
+          clonedPanelDataArray,
+          clonedPanelSizesBeforeCollapse,
+          layout.value,
+          props.storage
+        );
+      }
+    });
+    function getPanelStyle(panelData, defaultSize) {
+      const { panelDataArray } = eagerValuesRef.value;
+      const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+      return computePanelFlexBoxStyle({
+        defaultSize,
+        dragState: dragState.value,
+        layout: layout.value,
+        panelData: panelDataArray,
+        panelIndex
+      });
+    }
+    function registerPanel(panelData) {
+      const { panelDataArray } = eagerValuesRef.value;
+      panelDataArray.push(panelData);
+      panelDataArray.sort((panelA, panelB) => {
+        const orderA = panelA.order;
+        const orderB = panelB.order;
+        if (orderA == null && orderB == null)
+          return 0;
+        else if (orderA == null)
+          return -1;
+        else if (orderB == null)
+          return 1;
+        else
+          return orderA - orderB;
+      });
+      eagerValuesRef.value.panelDataArrayChanged = true;
+    }
+    watch(() => eagerValuesRef.value.panelDataArrayChanged, () => {
+      if (eagerValuesRef.value.panelDataArrayChanged) {
+        eagerValuesRef.value.panelDataArrayChanged = false;
+        const { autoSaveId, storage } = committedValuesRef.value;
+        const { layout: prevLayout, panelDataArray } = eagerValuesRef.value;
+        let unsafeLayout = null;
+        if (autoSaveId) {
+          const state = loadPanelGroupState(autoSaveId, panelDataArray, storage);
+          if (state) {
+            panelSizeBeforeCollapseRef.value = new Map(
+              Object.entries(state.expandToSizes)
+            );
+            unsafeLayout = state.layout;
+          }
+        }
+        if (unsafeLayout === null) {
+          unsafeLayout = calculateUnsafeDefaultLayout({
+            panelDataArray
+          });
+        }
+        const nextLayout = validatePanelGroupLayout({
+          layout: unsafeLayout,
+          panelConstraints: panelDataArray.map(
+            (panelData) => panelData.constraints
+          )
+        });
+        if (!areEqual(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          eagerValuesRef.value.layout = nextLayout;
+          emit("layout", nextLayout);
+          callPanelCallbacks(
+            panelDataArray,
+            nextLayout,
+            panelIdToLastNotifiedSizeMapRef.value
+          );
+        }
+      }
+    });
+    function registerResizeHandle(dragHandleId) {
+      return function resizeHandler(event) {
+        event.preventDefault();
+        const panelGroupElement = panelGroupElementRef.value;
+        if (!panelGroupElement)
+          return () => null;
+        const { direction, dragState: dragState2, id: groupId2, keyboardResizeBy } = committedValuesRef.value;
+        const { layout: prevLayout, panelDataArray } = eagerValuesRef.value;
+        const { initialLayout } = dragState2 ?? {};
+        const pivotIndices = determinePivotIndices(
+          groupId2,
+          dragHandleId,
+          panelGroupElement
+        );
+        let delta = calculateDeltaPercentage(
+          event,
+          dragHandleId,
+          direction,
+          dragState2,
+          keyboardResizeBy,
+          panelGroupElement
+        );
+        if (delta === 0)
+          return;
+        const isHorizontal = direction === "horizontal";
+        if (dir.value === "rtl" && isHorizontal)
+          delta = -delta;
+        const panelConstraints = panelDataArray.map((panelData) => panelData.constraints);
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          layout: initialLayout ?? prevLayout,
+          panelConstraints,
+          pivotIndices,
+          trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
+        });
+        const layoutChanged = !compareLayouts(prevLayout, nextLayout);
+        if (isMouseEvent(event) || isTouchEvent(event)) {
+          if (prevDeltaRef.value !== delta) {
+            prevDeltaRef.value = delta;
+            if (!layoutChanged) {
+              if (isHorizontal) {
+                reportConstraintsViolation(
+                  dragHandleId,
+                  delta < 0 ? EXCEEDED_HORIZONTAL_MIN : EXCEEDED_HORIZONTAL_MAX
+                );
+              } else {
+                reportConstraintsViolation(
+                  dragHandleId,
+                  delta < 0 ? EXCEEDED_VERTICAL_MIN : EXCEEDED_VERTICAL_MAX
+                );
+              }
+            } else {
+              reportConstraintsViolation(dragHandleId, 0);
+            }
+          }
+        }
+        if (layoutChanged) {
+          setLayout(nextLayout);
+          eagerValuesRef.value.layout = nextLayout;
+          emit("layout", nextLayout);
+          callPanelCallbacks(
+            panelDataArray,
+            nextLayout,
+            panelIdToLastNotifiedSizeMapRef.value
+          );
+        }
+      };
+    }
+    function resizePanel(panelData, unsafePanelSize) {
+      const { layout: prevLayout, panelDataArray } = eagerValuesRef.value;
+      const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
+      const { panelSize, pivotIndices } = panelDataHelper(
+        panelDataArray,
+        panelData,
+        prevLayout
+      );
+      assert(panelSize != null);
+      const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+      const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
+      const nextLayout = adjustLayoutByDelta({
+        delta,
+        layout: prevLayout,
+        panelConstraints: panelConstraintsArray,
+        pivotIndices,
+        trigger: "imperative-api"
+      });
+      if (!compareLayouts(prevLayout, nextLayout)) {
+        setLayout(nextLayout);
+        eagerValuesRef.value.layout = nextLayout;
+        emit("layout", nextLayout);
+        callPanelCallbacks(
+          panelDataArray,
+          nextLayout,
+          panelIdToLastNotifiedSizeMapRef.value
+        );
+      }
+    }
+    function reevaluatePanelConstraints(panelData, prevConstraints) {
+      const { layout: layout2, panelDataArray } = eagerValuesRef.value;
+      const {
+        collapsedSize: prevCollapsedSize = 0,
+        collapsible: prevCollapsible
+      } = prevConstraints;
+      const {
+        collapsedSize: nextCollapsedSize = 0,
+        collapsible: nextCollapsible,
+        maxSize: nextMaxSize = 100,
+        minSize: nextMinSize = 0
+      } = panelData.constraints;
+      const { panelSize: prevPanelSize } = panelDataHelper(
+        panelDataArray,
+        panelData,
+        layout2
+      );
+      if (prevPanelSize === null) {
+        return;
+      }
+      if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
+        if (prevCollapsedSize !== nextCollapsedSize) {
+          resizePanel(panelData, nextCollapsedSize);
+        }
+      } else if (prevPanelSize < nextMinSize) {
+        resizePanel(panelData, nextMinSize);
+      } else if (prevPanelSize > nextMaxSize) {
+        resizePanel(panelData, nextMaxSize);
+      }
+    }
+    function startDragging(dragHandleId, event) {
+      const { direction } = committedValuesRef.value;
+      const { layout: layout2 } = eagerValuesRef.value;
+      if (!panelGroupElementRef.value)
+        return;
+      const handleElement = getResizeHandleElement(
+        dragHandleId,
+        panelGroupElementRef.value
+      );
+      assert(handleElement);
+      const initialCursorPosition = getResizeEventCursorPosition(
+        direction,
+        event
+      );
+      dragState.value = {
+        dragHandleId,
+        dragHandleRect: handleElement.getBoundingClientRect(),
+        initialCursorPosition,
+        initialLayout: layout2
+      };
+    }
+    function stopDragging() {
+      dragState.value = null;
+    }
+    function unregisterPanel(panelData) {
+      const { panelDataArray } = eagerValuesRef.value;
+      const index = findPanelDataIndex(panelDataArray, panelData);
+      if (index >= 0) {
+        panelDataArray.splice(index, 1);
+        delete panelIdToLastNotifiedSizeMapRef.value[panelData.id];
+        eagerValuesRef.value.panelDataArrayChanged = true;
+      }
+    }
+    function collapsePanel(panelData) {
+      const { layout: prevLayout, panelDataArray } = eagerValuesRef.value;
+      if (panelData.constraints.collapsible) {
+        const panelConstraintsArray = panelDataArray.map(
+          (panelData2) => panelData2.constraints
+        );
+        const {
+          collapsedSize = 0,
+          panelSize,
+          pivotIndices
+        } = panelDataHelper(panelDataArray, panelData, prevLayout);
+        assert(
+          panelSize != null,
+          `Panel size not found for panel "${panelData.id}"`
+        );
+        if (panelSize !== collapsedSize) {
+          panelSizeBeforeCollapseRef.value.set(panelData.id, panelSize);
+          const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+          const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
+          const nextLayout = adjustLayoutByDelta({
+            delta,
+            layout: prevLayout,
+            panelConstraints: panelConstraintsArray,
+            pivotIndices,
+            trigger: "imperative-api"
+          });
+          if (!compareLayouts(prevLayout, nextLayout)) {
+            setLayout(nextLayout);
+            eagerValuesRef.value.layout = nextLayout;
+            emit("layout", nextLayout);
+            callPanelCallbacks(
+              panelDataArray,
+              nextLayout,
+              panelIdToLastNotifiedSizeMapRef.value
+            );
+          }
+        }
+      }
+    }
+    function expandPanel(panelData) {
+      const { layout: prevLayout, panelDataArray } = eagerValuesRef.value;
+      if (panelData.constraints.collapsible) {
+        const panelConstraintsArray = panelDataArray.map(
+          (panelData2) => panelData2.constraints
+        );
+        const {
+          collapsedSize = 0,
+          panelSize,
+          minSize = 0,
+          pivotIndices
+        } = panelDataHelper(panelDataArray, panelData, prevLayout);
+        if (panelSize === collapsedSize) {
+          const prevPanelSize = panelSizeBeforeCollapseRef.value.get(
+            panelData.id
+          );
+          const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
+          const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+          const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
+          const nextLayout = adjustLayoutByDelta({
+            delta,
+            layout: prevLayout,
+            panelConstraints: panelConstraintsArray,
+            pivotIndices,
+            trigger: "imperative-api"
+          });
+          if (!compareLayouts(prevLayout, nextLayout)) {
+            setLayout(nextLayout);
+            eagerValuesRef.value.layout = nextLayout;
+            emit("layout", nextLayout);
+            callPanelCallbacks(
+              panelDataArray,
+              nextLayout,
+              panelIdToLastNotifiedSizeMapRef.value
+            );
+          }
+        }
+      }
+    }
+    function getPanelSize(panelData) {
+      const { layout: layout2, panelDataArray } = eagerValuesRef.value;
+      const { panelSize } = panelDataHelper(panelDataArray, panelData, layout2);
+      assert(
+        panelSize != null,
+        `Panel size not found for panel "${panelData.id}"`
+      );
+      return panelSize;
+    }
+    function isPanelCollapsed(panelData) {
+      const { layout: layout2, panelDataArray } = eagerValuesRef.value;
+      const {
+        collapsedSize = 0,
+        collapsible,
+        panelSize
+      } = panelDataHelper(panelDataArray, panelData, layout2);
+      return collapsible === true && panelSize === collapsedSize;
+    }
+    function isPanelExpanded(panelData) {
+      const { layout: layout2, panelDataArray } = eagerValuesRef.value;
+      const {
+        collapsedSize = 0,
+        collapsible,
+        panelSize
+      } = panelDataHelper(panelDataArray, panelData, layout2);
+      assert(
+        panelSize != null,
+        `Panel size not found for panel "${panelData.id}"`
+      );
+      return !collapsible || panelSize > collapsedSize;
+    }
+    providePanelGroupContext({
+      direction: props.direction,
+      dragState: dragState.value,
+      groupId,
+      reevaluatePanelConstraints,
+      registerPanel,
+      registerResizeHandle,
+      resizePanel,
+      startDragging,
+      stopDragging,
+      unregisterPanel,
+      panelGroupElement: panelGroupElementRef,
+      collapsePanel,
+      expandPanel,
+      isPanelCollapsed,
+      isPanelExpanded,
+      getPanelSize,
+      getPanelStyle
+    });
+    function findPanelDataIndex(panelDataArray, panelData) {
+      return panelDataArray.findIndex(
+        (prevPanelData) => prevPanelData === panelData || prevPanelData.id === panelData.id
+      );
+    }
+    function panelDataHelper(panelDataArray, panelData, layout2) {
+      const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+      const isLastPanel = panelIndex === panelDataArray.length - 1;
+      const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
+      const panelSize = layout2[panelIndex];
+      return {
+        ...panelData.constraints,
+        panelSize,
+        pivotIndices
+      };
+    }
+    return {
+      forwardRef,
+      groupId,
+      layout
+    };
+  },
+  render() {
+    return h(Primitive, {
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "ref": (el) => this.forwardRef(el),
+      "style": {
+        display: "flex",
+        flexDirection: this.$props.direction === "horizontal" ? "row" : "column",
+        height: "100%",
+        overflow: "hidden",
+        width: "100%"
+      },
+      "data-panel-group": "",
+      "data-orientation": this.$props.direction,
+      "data-panel-group-id": this.groupId
+    }, () => this.$slots.default?.({ layout: this.layout }));
+  }
+});
+
+const splitterResizeHandleProps = {
+  ...primitiveProps,
+  /**
+   * Resize handle id (unique within group);
+   * falls back to `useId` when not provided
+   */
+  id: {
+    type: String,
+    required: false
+  },
+  /**
+   * Allow this much margin when determining resizable handle hit detection
+   */
+  hitAreaMargins: {
+    type: Object,
+    required: false
+  },
+  /**
+   * Tabindex for the handle
+   *
+   * @default 0
+   */
+  tabindex: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  /**
+   * Disable drag handle
+   */
+  disabled: {
+    type: Boolean,
+    required: false
+  }
+};
+const splitterResizeHandleEmits = {
+  /**
+   * Event handler called when dragging the handler.
+   */
+  dragging: (_isDragging) => true
+};
+const SplitterResizeHandle = defineComponent({
+  name: "DestylerSplitterResizeHandle",
+  props: splitterResizeHandleProps,
+  emits: splitterResizeHandleEmits,
+  setup(props, { emit }) {
+    const { forwardRef, currentElement } = useForwardExpose();
+    const { disabled } = toRefs(props);
+    const panelGroupContext = injectPanelGroupContext();
+    if (panelGroupContext === null) {
+      throw new Error(
+        "DestylerSplitterResizeHandle components must be rendered within a PanelGroup container"
+      );
+    }
+    const {
+      direction,
+      groupId,
+      registerResizeHandle: registerResizeHandleWithParentGroup,
+      startDragging,
+      stopDragging,
+      panelGroupElement
+    } = panelGroupContext;
+    const resizeHandleId = useId(props.id, "destyler-splitter-resize-handle");
+    const state = ref("inactive");
+    const isFocused = ref(false);
+    const resizeHandler = ref(null);
+    watch(disabled, () => {
+      if (!isBrowser)
+        return;
+      if (disabled.value)
+        resizeHandler.value = null;
+      else
+        resizeHandler.value = registerResizeHandleWithParentGroup(resizeHandleId);
+    }, { immediate: true });
+    watchEffect((onCleanup) => {
+      if (disabled.value || resizeHandler.value === null)
+        return;
+      const element = currentElement.value;
+      if (!element)
+        return;
+      assert(element);
+      const setResizeHandlerState = (action, isActive, event) => {
+        if (isActive) {
+          switch (action) {
+            case "down": {
+              state.value = "drag";
+              startDragging(resizeHandleId, event);
+              emit("dragging", true);
+              break;
+            }
+            case "move": {
+              if (state.value !== "drag")
+                state.value = "hover";
+              resizeHandler.value?.(event);
+              break;
+            }
+            case "up": {
+              state.value = "hover";
+              stopDragging();
+              emit("dragging", false);
+              break;
+            }
+          }
+        } else {
+          state.value = "inactive";
+        }
+      };
+      onCleanup(registerResizeHandle(
+        resizeHandleId,
+        element,
+        direction,
+        {
+          coarse: props.hitAreaMargins?.coarse ?? 15,
+          fine: props.hitAreaMargins?.fine ?? 5
+        },
+        setResizeHandlerState
+      ));
+    });
+    useWindowSplitterResizeHandlerBehavior({
+      disabled,
+      resizeHandler,
+      handleId: resizeHandleId,
+      panelGroupElement
+    });
+    return {
+      resizeHandleId,
+      disabled,
+      state,
+      direction,
+      groupId,
+      isFocused,
+      forwardRef
+    };
+  },
+  render() {
+    return h(Primitive, {
+      "id": this.resizeHandleId,
+      "ref": (el) => this.forwardRef(el),
+      "style": {
+        touchAction: "none",
+        userSelect: "none"
+      },
+      "role": "separator",
+      "data-resize-handle": "",
+      "tabindex": this.$props.tabindex,
+      "data-state": this.state,
+      "data-disabled": this.disabled ? "" : void 0,
+      "data-orientation": this.direction,
+      "data-panel-group-id": this.groupId,
+      "data-resize-handle-active": this.state === "drag" ? "pointer" : this.isFocused ? "keyboard" : void 0,
+      "data-resize-handle-state": this.state,
+      "data-panel-resize-handle-enabled": !this.disabled,
+      "data-panel-resize-handle-id": this.resizeHandleId,
+      "onBlur": () => {
+        this.isFocused = false;
+      },
+      "onFocus": () => {
+        this.isFocused = false;
+      }
+    }, () => this.$slots.default?.());
+  }
+});
+
+const splitterPanelProps = {
+  ...primitiveProps,
+  /**
+   * The size of panel when it is collapsed.
+   */
+  collapsedSize: {
+    type: Number,
+    required: false
+  },
+  /**
+   * Should panel collapse when resized beyond its `minSize`. When `true`, it will be collapsed to `collapsedSize`.
+   */
+  collapsible: {
+    type: Boolean,
+    required: false
+  },
+  /**
+   * Initial size of panel (numeric value between 1-100)
+   *
+   * @default false
+   */
+  defaultSize: {
+    type: Number,
+    required: false
+  },
+  /*
+   * Panel id (unique within group);
+  falls back to `useId` when not provided
+   */
+  id: {
+    type: String,
+    required: false
+  },
+  /**
+   * The maximum allowable size of panel (numeric value between 1-100); defaults to `100`
+   */
+  maxSize: {
+    type: Number,
+    required: false
+  },
+  /**
+   * The minimum allowable size of panel (numeric value between 1-100); defaults to `10`
+   */
+  minSize: {
+    type: Number,
+    required: false
+  },
+  /**
+   * The order of panel within group; required for groups with conditionally rendered panels
+   */
+  order: {
+    type: Number,
+    required: false
+  }
+};
+const splitterPanelEmits = {
+  /**
+   * Event handler called when panel is collapsed.
+   */
+  collapse: () => true,
+  /**
+   * Event handler called when panel is expanded.
+   */
+  expand: () => true,
+  /**
+   * Event handler called when panel is resized;
+   * size parameter is a numeric value
+   * between 1-100.
+   */
+  resize: (_size, _prevSize) => true
+};
+const SplitterPanel = defineComponent({
+  name: "DestylerSplitterPanel",
+  props: splitterPanelProps,
+  emits: splitterPanelEmits,
+  slots: Object,
+  setup(props, { emit, expose }) {
+    const panelGroupContext = injectPanelGroupContext();
+    if (panelGroupContext === null) {
+      throw new Error(
+        "SplitterPanel components must be rendered within a SplitterGroup container"
+      );
+    }
+    const { collapsePanel, expandPanel, getPanelSize, getPanelStyle, isPanelCollapsed, resizePanel, groupId, reevaluatePanelConstraints, registerPanel, unregisterPanel } = panelGroupContext;
+    const panelId = useId(props.id, "destyler-splitter-panel");
+    const panelDataRef = computed(() => ({
+      callbacks: {
+        onCollapse: () => emit("collapse"),
+        onExpand: () => emit("expand"),
+        onResize: (...args) => emit("resize", ...args)
+      },
+      constraints: {
+        collapsedSize: props.collapsedSize,
+        collapsible: props.collapsible,
+        defaultSize: props.defaultSize,
+        maxSize: props.maxSize,
+        minSize: props.minSize
+      },
+      id: panelId,
+      idIsFromProps: props.id !== void 0,
+      order: props.order
+    }));
+    watch(() => panelDataRef.value.constraints, (prevConstraints, constraints) => {
+      if (prevConstraints.collapsedSize !== constraints.collapsedSize || prevConstraints.collapsible !== constraints.collapsible || prevConstraints.maxSize !== constraints.maxSize || prevConstraints.minSize !== constraints.minSize) {
+        reevaluatePanelConstraints(panelDataRef.value, prevConstraints);
+      }
+    }, { deep: true });
+    onMounted(() => {
+      const panelData = panelDataRef.value;
+      registerPanel(panelData);
+      onUnmounted(() => {
+        unregisterPanel(panelData);
+      });
+    });
+    const style = computed(() => getPanelStyle(panelDataRef.value, props.defaultSize));
+    const isCollapsed = computed(() => isPanelCollapsed(panelDataRef.value));
+    const isExpanded = computed(() => !isCollapsed.value);
+    expose({
+      collapse: () => {
+        collapsePanel(panelDataRef.value);
+      },
+      expand: () => {
+        expandPanel(panelDataRef.value);
+      },
+      getSize() {
+        return getPanelSize(panelDataRef.value);
+      },
+      resize: (size) => {
+        resizePanel(panelDataRef.value, size);
+      },
+      isCollapsed,
+      isExpanded
+    });
+    return {
+      groupId,
+      panelId,
+      style,
+      isCollapsed,
+      isExpanded
+    };
+  },
+  render() {
+    return h(Primitive, {
+      "id": this.groupId,
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "style": this.style,
+      "data-panel": "",
+      "data-panel-collapsible": this.$props.collapsible || void 0,
+      "data-panel-group-id": this.groupId,
+      "data-panel-id": this.panelId,
+      "data-panel-size": Number.parseFloat(`${this.style.flexGrow}`).toFixed(1)
+    }, () => this.$slots.default?.({ isCollapsed: this.isCollapsed, isExpanded: this.isExpanded }));
+  }
+});
+
+const splitterRootProps = {
+  ...primitiveProps
+};
+const SplitterRoot = defineComponent({
+  name: "DestylerSplitterRoot",
+  props: splitterRootProps,
+  setup(_) {
+    useForwardExpose();
+  },
+  render() {
+    return h(Primitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, () => this.$slots.default?.());
+  }
+});
+
+export { SplitterGroup, SplitterPanel, SplitterResizeHandle, SplitterRoot, splitterGroupEmits, splitterGroupProps, splitterPanelEmits, splitterPanelProps, splitterResizeHandleEmits, splitterResizeHandleProps, splitterRootProps };