@destyler/splitter 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -1,1825 +1,5 @@
-import { watchEffect, defineComponent, ref, computed, watch, h, toRefs, withDirectives, onMounted, onUnmounted } from 'vue';
-import { DestylerPrimitive } from '@destyler/primitive';
-import { isBrowser, createContext, areEqual } from '@destyler/shared';
-import { useDirection, useForwardExpose } from '@destyler/composition';
-import { BindOnceDirective } from '@destyler/directives';
-import { nanoid } from 'nanoid/non-secure';
-
-function useUniqueId(idFromParams = null) {
-  if (!isBrowser && !idFromParams)
-    console.warn("DestylerSplitter component required `id` for SSR. Or you can wrap the component with `<ClientOnly>`.");
-  return idFromParams ?? nanoid(6);
-}
-
-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,
-    // Without this, Panel sizes may be unintentionally overridden by their content
-    overflow: "hidden",
-    // Disable pointer events inside of a panel during resize
-    // This avoid edge cases like nested iframes
-    pointerEvents: dragState !== null ? "none" : 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 destylerSplitterGroupProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  autoSaveId: {
-    type: String,
-    required: false,
-    default: null
-  },
-  direction: {
-    type: String,
-    required: true
-  },
-  keyboardResizeBy: {
-    type: Number,
-    required: false,
-    default: 10
-  },
-  storage: {
-    type: Object,
-    required: false,
-    default: () => defaultStorage
-  }
-};
-const [injectPanelGroupContext, providePanelGroupContext] = createContext("PanelGroup");
-const DestylerSplitterGroup = defineComponent({
-  name: "DestylerSplitterGroup",
-  props: destylerSplitterGroupProps,
-  emits: ["layout"],
-  setup(props, { emit }) {
-    const LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
-    const debounceMap = {};
-    const groupId = useUniqueId(props.id);
-    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;
-      }
-    }
-    providePanelGroupContext({
-      direction: props.direction,
-      dragState: dragState.value,
-      getPanelStyle,
-      groupId,
-      reevaluatePanelConstraints,
-      registerPanel,
-      registerResizeHandle,
-      resizePanel,
-      startDragging,
-      stopDragging,
-      unregisterPanel,
-      panelGroupElement: panelGroupElementRef
-    });
-    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
-    };
-  },
-  render() {
-    return h(DestylerPrimitive, {
-      "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
-    }, {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
-
-const destylerSplitterResizeHandleProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  hitAreaMargins: {
-    type: Object,
-    required: false
-  },
-  tabindex: {
-    type: Number,
-    required: false,
-    default: 0
-  },
-  disabled: {
-    type: Boolean,
-    required: false
-  }
-};
-const DestylerSplitterResizeHandle = defineComponent({
-  name: "DestylerSplitterResizeHandle",
-  props: destylerSplitterResizeHandleProps,
-  emits: ["dragging"],
-  setup(props, { emit }) {
-    const { forwardRef, currentElement } = useForwardExpose();
-    const { disabled } = toRefs(props);
-    const panelGroupContext = injectPanelGroupContext();
-    if (panelGroupContext === null) {
-      throw new Error(
-        "DestylerPanelResizeHandle components must be rendered within a PanelGroup container"
-      );
-    }
-    const {
-      direction,
-      groupId,
-      registerResizeHandle: registerResizeHandleWithParentGroup,
-      startDragging,
-      stopDragging,
-      panelGroupElement
-    } = panelGroupContext;
-    const resizeHandleId = useUniqueId(props.id);
-    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 inputs (e.g. finger/touch)
-          coarse: props.hitAreaMargins?.coarse ?? 15,
-          // Fine inputs (e.g. mouse)
-          fine: props.hitAreaMargins?.fine ?? 5
-        },
-        setResizeHandlerState
-      ));
-    });
-    useWindowSplitterResizeHandlerBehavior({
-      disabled,
-      resizeHandler,
-      handleId: resizeHandleId,
-      panelGroupElement
-    });
-    return {
-      resizeHandleId,
-      disabled,
-      state,
-      direction,
-      groupId,
-      isFocused,
-      forwardRef
-    };
-  },
-  render() {
-    return withDirectives(h(DestylerPrimitive, {
-      "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;
-      }
-    }, {
-      default: () => this.$slots.default?.()
-    }), [
-      [BindOnceDirective, { id: this.resizeHandleId }]
-    ]);
-  }
-});
-
-const destylerSplitterPanelProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  },
-  collapsedSize: {
-    type: Number,
-    required: false
-  },
-  collapsible: {
-    type: Boolean,
-    required: false
-  },
-  defaultSize: {
-    type: Number,
-    required: false
-  },
-  id: {
-    type: String,
-    required: false
-  },
-  maxSize: {
-    type: Number,
-    required: false
-  },
-  minSize: {
-    type: Number,
-    required: false
-  },
-  order: {
-    type: Number,
-    required: false
-  }
-};
-const DestylerSplitterPanel = defineComponent({
-  name: "DestylerSplitterPanel",
-  props: destylerSplitterPanelProps,
-  emits: ["collapse", "expand", "resize"],
-  setup(props, { emit }) {
-    const panelGroupContext = injectPanelGroupContext();
-    if (panelGroupContext === null)
-      throw new Error("DestylerSplitterPanel components must be rendered within a SplitterGroup container");
-    const { getPanelStyle, groupId, reevaluatePanelConstraints, registerPanel, unregisterPanel } = panelGroupContext;
-    const panelId = useUniqueId(props.id);
-    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));
-    return {
-      groupId,
-      panelId,
-      style
-    };
-  },
-  render() {
-    return withDirectives(h(DestylerPrimitive, {
-      "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)
-    }, {
-      default: () => this.$slots.default?.()
-    }), [
-      [BindOnceDirective, { id: this.panelId }]
-    ]);
-  }
-});
-
-const destylerSplitterRootProps = {
-  as: {
-    type: [String, Object],
-    required: false,
-    default: "div"
-  },
-  asChild: {
-    type: Boolean,
-    required: false,
-    default: false
-  }
-};
-const DestylerSplitterRoot = defineComponent({
-  name: "DestylerSplitterRoot",
-  props: destylerSplitterRootProps,
-  setup(_) {
-    useForwardExpose();
-  },
-  render() {
-    return h(DestylerPrimitive, {
-      as: this.$props.as,
-      asChild: this.$props.asChild
-    }, {
-      default: () => this.$slots.default?.()
-    });
-  }
-});
-
-export { DestylerSplitterGroup, DestylerSplitterPanel, DestylerSplitterResizeHandle, DestylerSplitterRoot };
+export { SplitterGroup, SplitterPanel, SplitterResizeHandle, SplitterRoot, splitterGroupProps, splitterPanelProps, splitterResizeHandleProps, splitterRootProps } from './component.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';
+import '@destyler/composition';