@industry-theme/xterm-terminal-panel 0.5.5 → 0.5.6

package/dist/index.js

@@ -1782,18 +1782,2720 @@ var TerminalPanel = ({
 };
 // src/panels/TabbedTerminalPanel.tsx
 import { useTheme as useTheme6 } from "@principal-ade/industry-theme";
+
+// node_modules/@principal-ade/panels/dist/index.esm.js
+import { jsx as e, jsxs as t, Fragment as n } from "react/jsx-runtime";
+import r, { useState as o, useRef as i, useCallback as a, useEffect as l, createContext as s, useContext as c, forwardRef as d, useImperativeHandle as u, useMemo as p, useLayoutEffect as h, memo as m, useReducer as f } from "react";
+
+// node_modules/react-resizable-panels/dist/react-resizable-panels.browser.js
+import * as React2 from "react";
+import { createContext, useLayoutEffect, useRef as useRef3, forwardRef as forwardRef3, createElement, useContext, useImperativeHandle as useImperativeHandle2, useState as useState4, useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo2 } from "react";
+var PanelGroupContext = createContext(null);
+PanelGroupContext.displayName = "PanelGroupContext";
+var DATA_ATTRIBUTES = {
+  group: "data-panel-group",
+  groupDirection: "data-panel-group-direction",
+  groupId: "data-panel-group-id",
+  panel: "data-panel",
+  panelCollapsible: "data-panel-collapsible",
+  panelId: "data-panel-id",
+  panelSize: "data-panel-size",
+  resizeHandle: "data-resize-handle",
+  resizeHandleActive: "data-resize-handle-active",
+  resizeHandleEnabled: "data-panel-resize-handle-enabled",
+  resizeHandleId: "data-panel-resize-handle-id",
+  resizeHandleState: "data-resize-handle-state"
+};
+var PRECISION = 10;
+var useIsomorphicLayoutEffect = useLayoutEffect;
+var useId = React2["useId".toString()];
+var wrappedUseId = typeof useId === "function" ? useId : () => null;
+var counter = 0;
+function useUniqueId(idFromParams = null) {
+  const idFromUseId = wrappedUseId();
+  const idRef = useRef3(idFromParams || idFromUseId || null);
+  if (idRef.current === null) {
+    idRef.current = "" + counter++;
+  }
+  return idFromParams !== null && idFromParams !== undefined ? idFromParams : idRef.current;
+}
+function PanelWithForwardedRef({
+  children,
+  className: classNameFromProps = "",
+  collapsedSize,
+  collapsible,
+  defaultSize,
+  forwardedRef,
+  id: idFromProps,
+  maxSize,
+  minSize,
+  onCollapse,
+  onExpand,
+  onResize,
+  order,
+  style: styleFromProps,
+  tagName: Type = "div",
+  ...rest
+}) {
+  const context2 = useContext(PanelGroupContext);
+  if (context2 === null) {
+    throw Error(`Panel components must be rendered within a PanelGroup container`);
+  }
+  const {
+    collapsePanel,
+    expandPanel,
+    getPanelSize,
+    getPanelStyle,
+    groupId,
+    isPanelCollapsed,
+    reevaluatePanelConstraints,
+    registerPanel,
+    resizePanel,
+    unregisterPanel
+  } = context2;
+  const panelId = useUniqueId(idFromProps);
+  const panelDataRef = useRef3({
+    callbacks: {
+      onCollapse,
+      onExpand,
+      onResize
+    },
+    constraints: {
+      collapsedSize,
+      collapsible,
+      defaultSize,
+      maxSize,
+      minSize
+    },
+    id: panelId,
+    idIsFromProps: idFromProps !== undefined,
+    order
+  });
+  useRef3({
+    didLogMissingDefaultSizeWarning: false
+  });
+  useIsomorphicLayoutEffect(() => {
+    const {
+      callbacks,
+      constraints
+    } = panelDataRef.current;
+    const prevConstraints = {
+      ...constraints
+    };
+    panelDataRef.current.id = panelId;
+    panelDataRef.current.idIsFromProps = idFromProps !== undefined;
+    panelDataRef.current.order = order;
+    callbacks.onCollapse = onCollapse;
+    callbacks.onExpand = onExpand;
+    callbacks.onResize = onResize;
+    constraints.collapsedSize = collapsedSize;
+    constraints.collapsible = collapsible;
+    constraints.defaultSize = defaultSize;
+    constraints.maxSize = maxSize;
+    constraints.minSize = minSize;
+    if (prevConstraints.collapsedSize !== constraints.collapsedSize || prevConstraints.collapsible !== constraints.collapsible || prevConstraints.maxSize !== constraints.maxSize || prevConstraints.minSize !== constraints.minSize) {
+      reevaluatePanelConstraints(panelDataRef.current, prevConstraints);
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    const panelData = panelDataRef.current;
+    registerPanel(panelData);
+    return () => {
+      unregisterPanel(panelData);
+    };
+  }, [order, panelId, registerPanel, unregisterPanel]);
+  useImperativeHandle2(forwardedRef, () => ({
+    collapse: () => {
+      collapsePanel(panelDataRef.current);
+    },
+    expand: (minSize2) => {
+      expandPanel(panelDataRef.current, minSize2);
+    },
+    getId() {
+      return panelId;
+    },
+    getSize() {
+      return getPanelSize(panelDataRef.current);
+    },
+    isCollapsed() {
+      return isPanelCollapsed(panelDataRef.current);
+    },
+    isExpanded() {
+      return !isPanelCollapsed(panelDataRef.current);
+    },
+    resize: (size) => {
+      resizePanel(panelDataRef.current, size);
+    }
+  }), [collapsePanel, expandPanel, getPanelSize, isPanelCollapsed, panelId, resizePanel]);
+  const style = getPanelStyle(panelDataRef.current, defaultSize);
+  return createElement(Type, {
+    ...rest,
+    children,
+    className: classNameFromProps,
+    id: panelId,
+    style: {
+      ...style,
+      ...styleFromProps
+    },
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.panel]: "",
+    [DATA_ATTRIBUTES.panelCollapsible]: collapsible || undefined,
+    [DATA_ATTRIBUTES.panelId]: panelId,
+    [DATA_ATTRIBUTES.panelSize]: parseFloat("" + style.flexGrow).toFixed(1)
+  });
+}
+var Panel = forwardRef3((props, ref) => createElement(PanelWithForwardedRef, {
+  ...props,
+  forwardedRef: ref
+}));
+PanelWithForwardedRef.displayName = "Panel";
+Panel.displayName = "forwardRef(Panel)";
+var nonce;
+function getNonce() {
+  return nonce;
+}
+var currentCursorStyle = null;
+var enabled = true;
+var getCustomCursorStyleFunction = null;
+var prevRuleIndex = -1;
+var styleElement = null;
+function getCursorStyle(state, constraintFlags, isPointerDown) {
+  const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0;
+  const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0;
+  const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0;
+  const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0;
+  if (getCustomCursorStyleFunction) {
+    return getCustomCursorStyleFunction({
+      exceedsHorizontalMaximum: horizontalMax,
+      exceedsHorizontalMinimum: horizontalMin,
+      exceedsVerticalMaximum: verticalMax,
+      exceedsVerticalMinimum: verticalMin,
+      intersectsHorizontalDragHandle: state === "horizontal" || state === "intersection",
+      intersectsVerticalDragHandle: state === "vertical" || state === "intersection",
+      isPointerDown
+    });
+  }
+  if (constraintFlags) {
+    if (horizontalMin) {
+      if (verticalMin) {
+        return "se-resize";
+      } else if (verticalMax) {
+        return "ne-resize";
+      } else {
+        return "e-resize";
+      }
+    } else if (horizontalMax) {
+      if (verticalMin) {
+        return "sw-resize";
+      } else if (verticalMax) {
+        return "nw-resize";
+      } else {
+        return "w-resize";
+      }
+    } else if (verticalMin) {
+      return "s-resize";
+    } else if (verticalMax) {
+      return "n-resize";
+    }
+  }
+  switch (state) {
+    case "horizontal":
+      return "ew-resize";
+    case "intersection":
+      return "move";
+    case "vertical":
+      return "ns-resize";
+  }
+}
+function resetGlobalCursorStyle() {
+  if (styleElement !== null) {
+    document.head.removeChild(styleElement);
+    currentCursorStyle = null;
+    styleElement = null;
+    prevRuleIndex = -1;
+  }
+}
+function setGlobalCursorStyle(state, constraintFlags, isPointerDown) {
+  var _styleElement$sheet$i, _styleElement$sheet2;
+  if (!enabled) {
+    return;
+  }
+  const style = getCursorStyle(state, constraintFlags, isPointerDown);
+  if (currentCursorStyle === style) {
+    return;
+  }
+  currentCursorStyle = style;
+  if (styleElement === null) {
+    styleElement = document.createElement("style");
+    const nonce2 = getNonce();
+    if (nonce2) {
+      styleElement.setAttribute("nonce", nonce2);
+    }
+    document.head.appendChild(styleElement);
+  }
+  if (prevRuleIndex >= 0) {
+    var _styleElement$sheet;
+    (_styleElement$sheet = styleElement.sheet) === null || _styleElement$sheet === undefined || _styleElement$sheet.removeRule(prevRuleIndex);
+  }
+  prevRuleIndex = (_styleElement$sheet$i = (_styleElement$sheet2 = styleElement.sheet) === null || _styleElement$sheet2 === undefined ? undefined : _styleElement$sheet2.insertRule(`*{cursor: ${style} !important;}`)) !== null && _styleElement$sheet$i !== undefined ? _styleElement$sheet$i : -1;
+}
+function isKeyDown(event) {
+  return event.type === "keydown";
+}
+function isPointerEvent(event) {
+  return event.type.startsWith("pointer");
+}
+function isMouseEvent(event) {
+  return event.type.startsWith("mouse");
+}
+function getResizeEventCoordinates(event) {
+  if (isPointerEvent(event)) {
+    if (event.isPrimary) {
+      return {
+        x: event.clientX,
+        y: event.clientY
+      };
+    }
+  } else if (isMouseEvent(event)) {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
+  return {
+    x: Infinity,
+    y: Infinity
+  };
+}
+function getInputType() {
+  if (typeof matchMedia === "function") {
+    return matchMedia("(pointer:coarse)").matches ? "coarse" : "fine";
+  }
+}
+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: get_ancestors(a),
+    b: get_ancestors(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, "Stacking order can only be calculated for elements with a common ancestor");
+  const z_indexes = {
+    a: get_z_index(find_stacking_context(ancestors.a)),
+    b: get_z_index(find_stacking_context(ancestors.b))
+  };
+  if (z_indexes.a === z_indexes.b) {
+    const children = common_ancestor.childNodes;
+    const furthest_ancestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1)
+    };
+    let i = children.length;
+    while (i--) {
+      const child = children[i];
+      if (child === furthest_ancestors.a)
+        return 1;
+      if (child === furthest_ancestors.b)
+        return -1;
+    }
+  }
+  return Math.sign(z_indexes.a - z_indexes.b);
+}
+var props = /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+function is_flex_item(node) {
+  var _get_parent;
+  const display = getComputedStyle((_get_parent = get_parent(node)) !== null && _get_parent !== undefined ? _get_parent : node).display;
+  return display === "flex" || display === "inline-flex";
+}
+function creates_stacking_context(node) {
+  const style = getComputedStyle(node);
+  if (style.position === "fixed")
+    return true;
+  if (style.zIndex !== "auto" && (style.position !== "static" || is_flex_item(node)))
+    return true;
+  if (+style.opacity < 1)
+    return true;
+  if ("transform" in style && style.transform !== "none")
+    return true;
+  if ("webkitTransform" in style && style.webkitTransform !== "none")
+    return true;
+  if ("mixBlendMode" in style && style.mixBlendMode !== "normal")
+    return true;
+  if ("filter" in style && style.filter !== "none")
+    return true;
+  if ("webkitFilter" in style && style.webkitFilter !== "none")
+    return true;
+  if ("isolation" in style && style.isolation === "isolate")
+    return true;
+  if (props.test(style.willChange))
+    return true;
+  if (style.webkitOverflowScrolling === "touch")
+    return true;
+  return false;
+}
+function find_stacking_context(nodes) {
+  let i = nodes.length;
+  while (i--) {
+    const node = nodes[i];
+    assert(node, "Missing node");
+    if (creates_stacking_context(node))
+      return node;
+  }
+  return null;
+}
+function get_z_index(node) {
+  return node && Number(getComputedStyle(node).zIndex) || 0;
+}
+function get_ancestors(node) {
+  const ancestors = [];
+  while (node) {
+    ancestors.push(node);
+    node = get_parent(node);
+  }
+  return ancestors;
+}
+function get_parent(node) {
+  const {
+    parentNode
+  } = node;
+  if (parentNode && parentNode instanceof ShadowRoot) {
+    return parentNode.host;
+  }
+  return parentNode;
+}
+var EXCEEDED_HORIZONTAL_MIN = 1;
+var EXCEEDED_HORIZONTAL_MAX = 2;
+var EXCEEDED_VERTICAL_MIN = 4;
+var EXCEEDED_VERTICAL_MAX = 8;
+var isCoarsePointer = getInputType() === "coarse";
+var intersectingHandles = [];
+var isPointerDown = false;
+var ownerDocumentCounts = new Map;
+var panelConstraintFlags = new Map;
+var registeredResizeHandlers = new Set;
+function registerResizeHandle(resizeHandleId, element, direction, hitAreaMargins, setResizeHandlerState) {
+  var _ownerDocumentCounts$;
+  const {
+    ownerDocument
+  } = element;
+  const data = {
+    direction,
+    element,
+    hitAreaMargins,
+    setResizeHandlerState
+  };
+  const count = (_ownerDocumentCounts$ = ownerDocumentCounts.get(ownerDocument)) !== null && _ownerDocumentCounts$ !== undefined ? _ownerDocumentCounts$ : 0;
+  ownerDocumentCounts.set(ownerDocument, count + 1);
+  registeredResizeHandlers.add(data);
+  updateListeners();
+  return function unregisterResizeHandle() {
+    var _ownerDocumentCounts$2;
+    panelConstraintFlags.delete(resizeHandleId);
+    registeredResizeHandlers.delete(data);
+    const count2 = (_ownerDocumentCounts$2 = ownerDocumentCounts.get(ownerDocument)) !== null && _ownerDocumentCounts$2 !== undefined ? _ownerDocumentCounts$2 : 1;
+    ownerDocumentCounts.set(ownerDocument, count2 - 1);
+    updateListeners();
+    if (count2 === 1) {
+      ownerDocumentCounts.delete(ownerDocument);
+    }
+    if (intersectingHandles.includes(data)) {
+      const index = intersectingHandles.indexOf(data);
+      if (index >= 0) {
+        intersectingHandles.splice(index, 1);
+      }
+      updateCursor();
+      setResizeHandlerState("up", true, null);
+    }
+  };
+}
+function handlePointerDown(event) {
+  const {
+    target
+  } = event;
+  const {
+    x,
+    y
+  } = getResizeEventCoordinates(event);
+  isPointerDown = true;
+  recalculateIntersectingHandles({
+    target,
+    x,
+    y
+  });
+  updateListeners();
+  if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates("down", event);
+    updateCursor();
+    event.preventDefault();
+    if (!isWithinResizeHandle(target)) {
+      event.stopImmediatePropagation();
+    }
+  }
+}
+function handlePointerMove(event) {
+  const {
+    x,
+    y
+  } = getResizeEventCoordinates(event);
+  if (isPointerDown && event.type !== "pointerleave" && event.buttons === 0) {
+    isPointerDown = false;
+    updateResizeHandlerStates("up", 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();
+    if (!isWithinResizeHandle(target)) {
+      event.stopImmediatePropagation();
+    }
+  }
+  updateResizeHandlerStates("up", event);
+  recalculateIntersectingHandles({
+    target,
+    x,
+    y
+  });
+  updateCursor();
+  updateListeners();
+}
+function isWithinResizeHandle(element) {
+  let currentElement = element;
+  while (currentElement) {
+    if (currentElement.hasAttribute(DATA_ATTRIBUTES.resizeHandle)) {
+      return true;
+    }
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
+function recalculateIntersectingHandles({
+  target,
+  x,
+  y
+}) {
+  intersectingHandles.splice(0);
+  let targetElement = null;
+  if (target instanceof HTMLElement || target instanceof SVGElement) {
+    targetElement = target;
+  }
+  registeredResizeHandlers.forEach((data) => {
+    const {
+      element: dragHandleElement,
+      hitAreaMargins
+    } = data;
+    const dragHandleRect = dragHandleElement.getBoundingClientRect();
+    const {
+      bottom,
+      left,
+      right,
+      top
+    } = dragHandleRect;
+    const margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine;
+    const eventIntersects = x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin;
+    if (eventIntersects) {
+      if (targetElement !== null && document.contains(targetElement) && 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, isPointerDown);
+  } else if (intersectsHorizontal) {
+    setGlobalCursorStyle("horizontal", constraintFlags, isPointerDown);
+  } else if (intersectsVertical) {
+    setGlobalCursorStyle("vertical", constraintFlags, isPointerDown);
+  } else {
+    resetGlobalCursorStyle();
+  }
+}
+var listenersAbortController;
+function updateListeners() {
+  var _listenersAbortContro;
+  (_listenersAbortContro = listenersAbortController) === null || _listenersAbortContro === undefined || _listenersAbortContro.abort();
+  listenersAbortController = new AbortController;
+  const options = {
+    capture: true,
+    signal: listenersAbortController.signal
+  };
+  if (!registeredResizeHandlers.size) {
+    return;
+  }
+  if (isPointerDown) {
+    if (intersectingHandles.length > 0) {
+      ownerDocumentCounts.forEach((count, ownerDocument) => {
+        const {
+          body
+        } = ownerDocument;
+        if (count > 0) {
+          body.addEventListener("contextmenu", handlePointerUp, options);
+          body.addEventListener("pointerleave", handlePointerMove, options);
+          body.addEventListener("pointermove", handlePointerMove, options);
+        }
+      });
+    }
+    ownerDocumentCounts.forEach((_, ownerDocument) => {
+      const {
+        body
+      } = ownerDocument;
+      body.addEventListener("pointerup", handlePointerUp, options);
+      body.addEventListener("pointercancel", handlePointerUp, options);
+    });
+  } else {
+    ownerDocumentCounts.forEach((count, ownerDocument) => {
+      const {
+        body
+      } = ownerDocument;
+      if (count > 0) {
+        body.addEventListener("pointerdown", handlePointerDown, options);
+        body.addEventListener("pointermove", handlePointerMove, options);
+      }
+    });
+  }
+}
+function updateResizeHandlerStates(action, event) {
+  registeredResizeHandlers.forEach((data) => {
+    const {
+      setResizeHandlerState
+    } = data;
+    const isActive = intersectingHandles.includes(data);
+    setResizeHandlerState(action, isActive, event);
+  });
+}
+function useForceUpdate() {
+  const [_, setCount] = useState4(0);
+  return useCallback3(() => setCount((prevCount) => prevCount + 1), []);
+}
+function assert(expectedCondition, message) {
+  if (!expectedCondition) {
+    console.error(message);
+    throw Error(message);
+  }
+}
+function fuzzyCompareNumbers(actual, expected, fractionDigits = PRECISION) {
+  if (actual.toFixed(fractionDigits) === expected.toFixed(fractionDigits)) {
+    return 0;
+  } else {
+    return actual > expected ? 1 : -1;
+  }
+}
+function fuzzyNumbersEqual$1(actual, expected, fractionDigits = PRECISION) {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}
+function fuzzyNumbersEqual(actual, expected, fractionDigits) {
+  return fuzzyCompareNumbers(actual, expected, fractionDigits) === 0;
+}
+function fuzzyLayoutsEqual(actual, expected, fractionDigits) {
+  if (actual.length !== expected.length) {
+    return false;
+  }
+  for (let index = 0;index < actual.length; index++) {
+    const actualSize = actual[index];
+    const expectedSize = expected[index];
+    if (!fuzzyNumbersEqual(actualSize, expectedSize, fractionDigits)) {
+      return false;
+    }
+  }
+  return true;
+}
+function resizePanel({
+  panelConstraints: panelConstraintsArray,
+  panelIndex,
+  size
+}) {
+  const panelConstraints = panelConstraintsArray[panelIndex];
+  assert(panelConstraints != null, `Panel constraints not found for index ${panelIndex}`);
+  let {
+    collapsedSize = 0,
+    collapsible,
+    maxSize = 100,
+    minSize = 0
+  } = panelConstraints;
+  if (fuzzyCompareNumbers(size, minSize) < 0) {
+    if (collapsible) {
+      const halfwayPoint = (collapsedSize + minSize) / 2;
+      if (fuzzyCompareNumbers(size, halfwayPoint) < 0) {
+        size = collapsedSize;
+      } else {
+        size = minSize;
+      }
+    } else {
+      size = minSize;
+    }
+  }
+  size = Math.min(maxSize, size);
+  size = parseFloat(size.toFixed(PRECISION));
+  return size;
+}
+function adjustLayoutByDelta({
+  delta,
+  initialLayout,
+  panelConstraints: panelConstraintsArray,
+  pivotIndices,
+  prevLayout,
+  trigger
+}) {
+  if (fuzzyNumbersEqual(delta, 0)) {
+    return initialLayout;
+  }
+  const nextLayout = [...initialLayout];
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+  assert(firstPivotIndex != null, "Invalid first pivot index");
+  assert(secondPivotIndex != null, "Invalid second pivot index");
+  let deltaApplied = 0;
+  {
+    if (trigger === "keyboard") {
+      {
+        const index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+        const panelConstraints = panelConstraintsArray[index];
+        assert(panelConstraints, `Panel constraints not found for index ${index}`);
+        const {
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
+        } = panelConstraints;
+        if (collapsible) {
+          const prevSize = initialLayout[index];
+          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
+          if (fuzzyNumbersEqual(prevSize, collapsedSize)) {
+            const localDelta = minSize - prevSize;
+            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, `No panel constraints found for index ${index}`);
+        const {
+          collapsedSize = 0,
+          collapsible,
+          minSize = 0
+        } = panelConstraints;
+        if (collapsible) {
+          const prevSize = initialLayout[index];
+          assert(prevSize != null, `Previous layout not found for panel index ${index}`);
+          if (fuzzyNumbersEqual(prevSize, minSize)) {
+            const localDelta = prevSize - collapsedSize;
+            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 = initialLayout[index];
+      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
+      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 = initialLayout[index];
+      assert(prevSize != null, `Previous layout not found for panel index ${index}`);
+      const unsafeSize = prevSize - deltaRemaining;
+      const safeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: unsafeSize
+      });
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize;
+        nextLayout[index] = safeSize;
+        if (deltaApplied.toFixed(3).localeCompare(Math.abs(delta).toFixed(3), undefined, {
+          numeric: true
+        }) >= 0) {
+          break;
+        }
+      }
+      if (delta < 0) {
+        index--;
+      } else {
+        index++;
+      }
+    }
+  }
+  if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
+    return prevLayout;
+  }
+  {
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    const prevSize = initialLayout[pivotIndex];
+    assert(prevSize != null, `Previous layout not found for panel index ${pivotIndex}`);
+    const unsafeSize = prevSize + deltaApplied;
+    const safeSize = resizePanel({
+      panelConstraints: panelConstraintsArray,
+      panelIndex: pivotIndex,
+      size: unsafeSize
+    });
+    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, `Previous layout not found for panel index ${index}`);
+        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 calculateAriaValues({
+  layout,
+  panelsArray,
+  pivotIndices
+}) {
+  let currentMinSize = 0;
+  let currentMaxSize = 100;
+  let totalMinSize = 0;
+  let totalMaxSize = 0;
+  const firstIndex = pivotIndices[0];
+  assert(firstIndex != null, "No pivot index found");
+  panelsArray.forEach((panelData, index) => {
+    const {
+      constraints
+    } = panelData;
+    const {
+      maxSize = 100,
+      minSize = 0
+    } = constraints;
+    if (index === firstIndex) {
+      currentMinSize = minSize;
+      currentMaxSize = maxSize;
+    } else {
+      totalMinSize += minSize;
+      totalMaxSize += maxSize;
+    }
+  });
+  const valueMax = Math.min(currentMaxSize, 100 - totalMinSize);
+  const valueMin = Math.max(currentMinSize, 100 - totalMaxSize);
+  const valueNow = layout[firstIndex];
+  return {
+    valueMax,
+    valueMin,
+    valueNow
+  };
+}
+function getResizeHandleElementsForGroup(groupId, scope = document) {
+  return Array.from(scope.querySelectorAll(`[${DATA_ATTRIBUTES.resizeHandleId}][data-panel-group-id="${groupId}"]`));
+}
+function getResizeHandleElementIndex(groupId, id, scope = document) {
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
+  const index = handles.findIndex((handle) => handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId) === id);
+  return index !== null && index !== undefined ? index : null;
+}
+function determinePivotIndices(groupId, dragHandleId, panelGroupElement) {
+  const index = getResizeHandleElementIndex(groupId, dragHandleId, panelGroupElement);
+  return index != null ? [index, index + 1] : [-1, -1];
+}
+function isHTMLElement(target) {
+  if (target instanceof HTMLElement) {
+    return true;
+  }
+  return typeof target === "object" && target !== null && "tagName" in target && "getAttribute" in target;
+}
+function getPanelGroupElement(id, rootElement = document) {
+  if (isHTMLElement(rootElement) && 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) {
+  const element = scope.querySelector(`[${DATA_ATTRIBUTES.resizeHandleId}="${id}"]`);
+  if (element) {
+    return element;
+  }
+  return null;
+}
+function getResizeHandlePanelIds(groupId, handleId, panelsArray, scope = document) {
+  var _panelsArray$index$id, _panelsArray$index, _panelsArray$id, _panelsArray;
+  const handle = getResizeHandleElement(handleId, scope);
+  const handles = getResizeHandleElementsForGroup(groupId, scope);
+  const index = handle ? handles.indexOf(handle) : -1;
+  const idBefore = (_panelsArray$index$id = (_panelsArray$index = panelsArray[index]) === null || _panelsArray$index === undefined ? undefined : _panelsArray$index.id) !== null && _panelsArray$index$id !== undefined ? _panelsArray$index$id : null;
+  const idAfter = (_panelsArray$id = (_panelsArray = panelsArray[index + 1]) === null || _panelsArray === undefined ? undefined : _panelsArray.id) !== null && _panelsArray$id !== undefined ? _panelsArray$id : null;
+  return [idBefore, idAfter];
+}
+function useWindowSplitterPanelGroupBehavior({
+  committedValuesRef,
+  eagerValuesRef,
+  groupId,
+  layout,
+  panelDataArray,
+  panelGroupElement,
+  setLayout
+}) {
+  useRef3({
+    didWarnAboutMissingResizeHandle: false
+  });
+  useIsomorphicLayoutEffect(() => {
+    if (!panelGroupElement) {
+      return;
+    }
+    const resizeHandleElements = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+    for (let index = 0;index < panelDataArray.length - 1; index++) {
+      const {
+        valueMax,
+        valueMin,
+        valueNow
+      } = calculateAriaValues({
+        layout,
+        panelsArray: panelDataArray,
+        pivotIndices: [index, index + 1]
+      });
+      const resizeHandleElement = resizeHandleElements[index];
+      if (resizeHandleElement == null)
+        ;
+      else {
+        const panelData = panelDataArray[index];
+        assert(panelData, `No panel data found for index "${index}"`);
+        resizeHandleElement.setAttribute("aria-controls", panelData.id);
+        resizeHandleElement.setAttribute("aria-valuemax", "" + Math.round(valueMax));
+        resizeHandleElement.setAttribute("aria-valuemin", "" + Math.round(valueMin));
+        resizeHandleElement.setAttribute("aria-valuenow", valueNow != null ? "" + Math.round(valueNow) : "");
+      }
+    }
+    return () => {
+      resizeHandleElements.forEach((resizeHandleElement, index) => {
+        resizeHandleElement.removeAttribute("aria-controls");
+        resizeHandleElement.removeAttribute("aria-valuemax");
+        resizeHandleElement.removeAttribute("aria-valuemin");
+        resizeHandleElement.removeAttribute("aria-valuenow");
+      });
+    };
+  }, [groupId, layout, panelDataArray, panelGroupElement]);
+  useEffect4(() => {
+    if (!panelGroupElement) {
+      return;
+    }
+    const eagerValues = eagerValuesRef.current;
+    assert(eagerValues, `Eager values not found`);
+    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, `No resize handles found for group id "${groupId}"`);
+    const cleanupFunctions = handles.map((handle) => {
+      const handleId = handle.getAttribute(DATA_ATTRIBUTES.resizeHandleId);
+      assert(handleId, `Resize handle element has no handle id attribute`);
+      const [idBefore, idAfter] = getResizeHandlePanelIds(groupId, handleId, 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, `No panel data found for index ${index}`);
+              const size = layout[index];
+              const {
+                collapsedSize = 0,
+                collapsible,
+                minSize = 0
+              } = panelData.constraints;
+              if (size != null && collapsible) {
+                const nextLayout = adjustLayoutByDelta({
+                  delta: fuzzyNumbersEqual(size, collapsedSize) ? minSize - collapsedSize : collapsedSize - size,
+                  initialLayout: layout,
+                  panelConstraints: panelDataArray2.map((panelData2) => panelData2.constraints),
+                  pivotIndices: determinePivotIndices(groupId, handleId, panelGroupElement),
+                  prevLayout: layout,
+                  trigger: "keyboard"
+                });
+                if (layout !== nextLayout) {
+                  setLayout(nextLayout);
+                }
+              }
+            }
+            break;
+          }
+        }
+      };
+      handle.addEventListener("keydown", onKeyDown);
+      return () => {
+        handle.removeEventListener("keydown", onKeyDown);
+      };
+    });
+    return () => {
+      cleanupFunctions.forEach((cleanupFunction) => cleanupFunction());
+    };
+  }, [panelGroupElement, committedValuesRef, eagerValuesRef, groupId, layout, panelDataArray, setLayout]);
+}
+function areEqual(arrayA, arrayB) {
+  if (arrayA.length !== arrayB.length) {
+    return false;
+  }
+  for (let index = 0;index < arrayA.length; index++) {
+    if (arrayA[index] !== arrayB[index]) {
+      return false;
+    }
+  }
+  return true;
+}
+function getResizeEventCursorPosition(direction, event) {
+  const isHorizontal = direction === "horizontal";
+  const {
+    x,
+    y
+  } = getResizeEventCoordinates(event);
+  return isHorizontal ? x : y;
+}
+function calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement) {
+  const isHorizontal = direction === "horizontal";
+  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
+  assert(handleElement, `No resize handle element found for id "${dragHandleId}"`);
+  const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
+  assert(groupId, `Resize handle element has no group id attribute`);
+  let {
+    initialCursorPosition
+  } = initialDragState;
+  const cursorPosition = getResizeEventCursorPosition(direction, event);
+  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
+  assert(groupElement, `No group element found for id "${groupId}"`);
+  const groupRect = groupElement.getBoundingClientRect();
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
+  const offsetPixels = cursorPosition - initialCursorPosition;
+  const offsetPercentage = offsetPixels / groupSizeInPixels * 100;
+  return offsetPercentage;
+}
+function calculateDeltaPercentage(event, dragHandleId, direction, initialDragState, keyboardResizeBy, panelGroupElement) {
+  if (isKeyDown(event)) {
+    const isHorizontal = direction === "horizontal";
+    let delta = 0;
+    if (event.shiftKey) {
+      delta = 100;
+    } else if (keyboardResizeBy != null) {
+      delta = keyboardResizeBy;
+    } else {
+      delta = 10;
+    }
+    let movement = 0;
+    switch (event.key) {
+      case "ArrowDown":
+        movement = isHorizontal ? 0 : delta;
+        break;
+      case "ArrowLeft":
+        movement = isHorizontal ? -delta : 0;
+        break;
+      case "ArrowRight":
+        movement = isHorizontal ? delta : 0;
+        break;
+      case "ArrowUp":
+        movement = isHorizontal ? 0 : -delta;
+        break;
+      case "End":
+        movement = 100;
+        break;
+      case "Home":
+        movement = -100;
+        break;
+    }
+    return movement;
+  } else {
+    if (initialDragState == null) {
+      return 0;
+    }
+    return calculateDragOffsetPercentage(event, dragHandleId, direction, initialDragState, panelGroupElement);
+  }
+}
+function calculateUnsafeDefaultLayout({
+  panelDataArray
+}) {
+  const layout = Array(panelDataArray.length);
+  const panelConstraintsArray = panelDataArray.map((panelData) => panelData.constraints);
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+  for (let index = 0;index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints, `Panel constraints not found for index ${index}`);
+    const {
+      defaultSize
+    } = panelConstraints;
+    if (defaultSize != null) {
+      numPanelsWithSizes++;
+      layout[index] = defaultSize;
+      remainingSize -= defaultSize;
+    }
+  }
+  for (let index = 0;index < panelDataArray.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    assert(panelConstraints, `Panel constraints not found for index ${index}`);
+    const {
+      defaultSize
+    } = panelConstraints;
+    if (defaultSize != null) {
+      continue;
+    }
+    const numRemainingPanels = panelDataArray.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+    numPanelsWithSizes++;
+    layout[index] = size;
+    remainingSize -= size;
+  }
+  return layout;
+}
+function callPanelCallbacks(panelsArray, layout, panelIdToLastNotifiedSizeMap) {
+  layout.forEach((size, index) => {
+    const panelData = panelsArray[index];
+    assert(panelData, `Panel data not found for index ${index}`);
+    const {
+      callbacks,
+      constraints,
+      id: panelId
+    } = panelData;
+    const {
+      collapsedSize = 0,
+      collapsible
+    } = constraints;
+    const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId];
+    if (lastNotifiedSize == null || size !== lastNotifiedSize) {
+      panelIdToLastNotifiedSizeMap[panelId] = size;
+      const {
+        onCollapse,
+        onExpand,
+        onResize
+      } = callbacks;
+      if (onResize) {
+        onResize(size, lastNotifiedSize);
+      }
+      if (collapsible && (onCollapse || onExpand)) {
+        if (onExpand && (lastNotifiedSize == null || fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && !fuzzyNumbersEqual$1(size, collapsedSize)) {
+          onExpand();
+        }
+        if (onCollapse && (lastNotifiedSize == null || !fuzzyNumbersEqual$1(lastNotifiedSize, collapsedSize)) && fuzzyNumbersEqual$1(size, collapsedSize)) {
+          onCollapse();
+        }
+      }
+    }
+  });
+}
+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 computePanelFlexBoxStyle({
+  defaultSize,
+  dragState,
+  layout,
+  panelData,
+  panelIndex,
+  precision = 3
+}) {
+  const size = layout[panelIndex];
+  let flexGrow;
+  if (size == null) {
+    flexGrow = defaultSize != null ? defaultSize.toFixed(precision) : "1";
+  } else if (panelData.length === 1) {
+    flexGrow = "1";
+  } else {
+    flexGrow = size.toFixed(precision);
+  }
+  return {
+    flexBasis: 0,
+    flexGrow,
+    flexShrink: 1,
+    overflow: "hidden",
+    pointerEvents: dragState !== null ? "none" : undefined
+  };
+}
+function debounce(callback, durationMs = 10) {
+  let timeoutId = null;
+  let callable = (...args) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      callback(...args);
+    }, durationMs);
+  };
+  return callable;
+}
+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 Error("localStorage not supported in this environment");
+    }
+  } catch (error) {
+    console.error(error);
+    storageObject.getItem = () => null;
+    storageObject.setItem = () => {};
+  }
+}
+function getPanelGroupKey(autoSaveId) {
+  return `react-resizable-panels:${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) {
+  var _loadSerializedPanelG, _state$panelKey;
+  const state = (_loadSerializedPanelG = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG !== undefined ? _loadSerializedPanelG : {};
+  const panelKey = getPanelKey(panels);
+  return (_state$panelKey = state[panelKey]) !== null && _state$panelKey !== undefined ? _state$panelKey : null;
+}
+function savePanelGroupState(autoSaveId, panels, panelSizesBeforeCollapse, sizes, storage) {
+  var _loadSerializedPanelG2;
+  const panelGroupKey = getPanelGroupKey(autoSaveId);
+  const panelKey = getPanelKey(panels);
+  const state = (_loadSerializedPanelG2 = loadSerializedPanelGroupState(autoSaveId, storage)) !== null && _loadSerializedPanelG2 !== undefined ? _loadSerializedPanelG2 : {};
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes
+  };
+  try {
+    storage.setItem(panelGroupKey, JSON.stringify(state));
+  } catch (error) {
+    console.error(error);
+  }
+}
+function validatePanelGroupLayout({
+  layout: prevLayout,
+  panelConstraints
+}) {
+  const nextLayout = [...prevLayout];
+  const nextLayoutTotalSize = nextLayout.reduce((accumulated, current) => accumulated + current, 0);
+  if (nextLayout.length !== panelConstraints.length) {
+    throw Error(`Invalid ${panelConstraints.length} panel layout: ${nextLayout.map((size) => `${size}%`).join(", ")}`);
+  } else if (!fuzzyNumbersEqual(nextLayoutTotalSize, 100) && nextLayout.length > 0) {
+    for (let index = 0;index < panelConstraints.length; index++) {
+      const unsafeSize = nextLayout[index];
+      assert(unsafeSize != null, `No layout data found for index ${index}`);
+      const safeSize = 100 / nextLayoutTotalSize * unsafeSize;
+      nextLayout[index] = safeSize;
+    }
+  }
+  let remainingSize = 0;
+  for (let index = 0;index < panelConstraints.length; index++) {
+    const unsafeSize = nextLayout[index];
+    assert(unsafeSize != null, `No layout data found for index ${index}`);
+    const safeSize = 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, `No layout data found for index ${index}`);
+      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;
+}
+var LOCAL_STORAGE_DEBOUNCE_INTERVAL = 100;
+var defaultStorage = {
+  getItem: (name) => {
+    initializeDefaultStorage(defaultStorage);
+    return defaultStorage.getItem(name);
+  },
+  setItem: (name, value) => {
+    initializeDefaultStorage(defaultStorage);
+    defaultStorage.setItem(name, value);
+  }
+};
+var debounceMap = {};
+function PanelGroupWithForwardedRef({
+  autoSaveId = null,
+  children,
+  className: classNameFromProps = "",
+  direction,
+  forwardedRef,
+  id: idFromProps = null,
+  onLayout = null,
+  keyboardResizeBy = null,
+  storage = defaultStorage,
+  style: styleFromProps,
+  tagName: Type = "div",
+  ...rest
+}) {
+  const groupId = useUniqueId(idFromProps);
+  const panelGroupElementRef = useRef3(null);
+  const [dragState, setDragState] = useState4(null);
+  const [layout, setLayout] = useState4([]);
+  const forceUpdate = useForceUpdate();
+  const panelIdToLastNotifiedSizeMapRef = useRef3({});
+  const panelSizeBeforeCollapseRef = useRef3(new Map);
+  const prevDeltaRef = useRef3(0);
+  const committedValuesRef = useRef3({
+    autoSaveId,
+    direction,
+    dragState,
+    id: groupId,
+    keyboardResizeBy,
+    onLayout,
+    storage
+  });
+  const eagerValuesRef = useRef3({
+    layout,
+    panelDataArray: [],
+    panelDataArrayChanged: false
+  });
+  useRef3({
+    didLogIdAndOrderWarning: false,
+    didLogPanelConstraintsWarning: false,
+    prevPanelIds: []
+  });
+  useImperativeHandle2(forwardedRef, () => ({
+    getId: () => committedValuesRef.current.id,
+    getLayout: () => {
+      const {
+        layout: layout2
+      } = eagerValuesRef.current;
+      return layout2;
+    },
+    setLayout: (unsafeLayout) => {
+      const {
+        onLayout: onLayout2
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      const safeLayout = validatePanelGroupLayout({
+        layout: unsafeLayout,
+        panelConstraints: panelDataArray.map((panelData) => panelData.constraints)
+      });
+      if (!areEqual(prevLayout, safeLayout)) {
+        setLayout(safeLayout);
+        eagerValuesRef.current.layout = safeLayout;
+        if (onLayout2) {
+          onLayout2(safeLayout);
+        }
+        callPanelCallbacks(panelDataArray, safeLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    }
+  }), []);
+  useIsomorphicLayoutEffect(() => {
+    committedValuesRef.current.autoSaveId = autoSaveId;
+    committedValuesRef.current.direction = direction;
+    committedValuesRef.current.dragState = dragState;
+    committedValuesRef.current.id = groupId;
+    committedValuesRef.current.onLayout = onLayout;
+    committedValuesRef.current.storage = storage;
+  });
+  useWindowSplitterPanelGroupBehavior({
+    committedValuesRef,
+    eagerValuesRef,
+    groupId,
+    layout,
+    panelDataArray: eagerValuesRef.current.panelDataArray,
+    setLayout,
+    panelGroupElement: panelGroupElementRef.current
+  });
+  useEffect4(() => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    if (autoSaveId) {
+      if (layout.length === 0 || layout.length !== panelDataArray.length) {
+        return;
+      }
+      let debouncedSave = debounceMap[autoSaveId];
+      if (debouncedSave == null) {
+        debouncedSave = debounce(savePanelGroupState, LOCAL_STORAGE_DEBOUNCE_INTERVAL);
+        debounceMap[autoSaveId] = debouncedSave;
+      }
+      const clonedPanelDataArray = [...panelDataArray];
+      const clonedPanelSizesBeforeCollapse = new Map(panelSizeBeforeCollapseRef.current);
+      debouncedSave(autoSaveId, clonedPanelDataArray, clonedPanelSizesBeforeCollapse, layout, storage);
+    }
+  }, [autoSaveId, layout, storage]);
+  useEffect4(() => {});
+  const collapsePanel = useCallback3((panelData) => {
+    const {
+      onLayout: onLayout2
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    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 (!fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
+        panelSizeBeforeCollapseRef.current.set(panelData.id, panelSize);
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSize - collapsedSize : collapsedSize - panelSize;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          initialLayout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          prevLayout,
+          trigger: "imperative-api"
+        });
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
+          if (onLayout2) {
+            onLayout2(nextLayout);
+          }
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+        }
+      }
+    }
+  }, []);
+  const expandPanel = useCallback3((panelData, minSizeOverride) => {
+    const {
+      onLayout: onLayout2
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    if (panelData.constraints.collapsible) {
+      const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
+      const {
+        collapsedSize = 0,
+        panelSize = 0,
+        minSize: minSizeFromProps = 0,
+        pivotIndices
+      } = panelDataHelper(panelDataArray, panelData, prevLayout);
+      const minSize = minSizeOverride !== null && minSizeOverride !== undefined ? minSizeOverride : minSizeFromProps;
+      if (fuzzyNumbersEqual$1(panelSize, collapsedSize)) {
+        const prevPanelSize = panelSizeBeforeCollapseRef.current.get(panelData.id);
+        const baseSize = prevPanelSize != null && prevPanelSize >= minSize ? prevPanelSize : minSize;
+        const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+        const delta = isLastPanel ? panelSize - baseSize : baseSize - panelSize;
+        const nextLayout = adjustLayoutByDelta({
+          delta,
+          initialLayout: prevLayout,
+          panelConstraints: panelConstraintsArray,
+          pivotIndices,
+          prevLayout,
+          trigger: "imperative-api"
+        });
+        if (!compareLayouts(prevLayout, nextLayout)) {
+          setLayout(nextLayout);
+          eagerValuesRef.current.layout = nextLayout;
+          if (onLayout2) {
+            onLayout2(nextLayout);
+          }
+          callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+        }
+      }
+    }
+  }, []);
+  const getPanelSize = useCallback3((panelData) => {
+    const {
+      layout: layout2,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout2);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    return panelSize;
+  }, []);
+  const getPanelStyle = useCallback3((panelData, defaultSize) => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+    return computePanelFlexBoxStyle({
+      defaultSize,
+      dragState,
+      layout,
+      panelData: panelDataArray,
+      panelIndex
+    });
+  }, [dragState, layout]);
+  const isPanelCollapsed = useCallback3((panelData) => {
+    const {
+      layout: layout2,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout2);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    return collapsible === true && fuzzyNumbersEqual$1(panelSize, collapsedSize);
+  }, []);
+  const isPanelExpanded = useCallback3((panelData) => {
+    const {
+      layout: layout2,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize = 0,
+      collapsible,
+      panelSize
+    } = panelDataHelper(panelDataArray, panelData, layout2);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    return !collapsible || fuzzyCompareNumbers(panelSize, collapsedSize) > 0;
+  }, []);
+  const registerPanel = useCallback3((panelData) => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    panelDataArray.push(panelData);
+    panelDataArray.sort((panelA, panelB) => {
+      const orderA = panelA.order;
+      const orderB = panelB.order;
+      if (orderA == null && orderB == null) {
+        return 0;
+      } else if (orderA == null) {
+        return -1;
+      } else if (orderB == null) {
+        return 1;
+      } else {
+        return orderA - orderB;
+      }
+    });
+    eagerValuesRef.current.panelDataArrayChanged = true;
+    forceUpdate();
+  }, [forceUpdate]);
+  useIsomorphicLayoutEffect(() => {
+    if (eagerValuesRef.current.panelDataArrayChanged) {
+      eagerValuesRef.current.panelDataArrayChanged = false;
+      const {
+        autoSaveId: autoSaveId2,
+        onLayout: onLayout2,
+        storage: storage2
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      let unsafeLayout = null;
+      if (autoSaveId2) {
+        const state = loadPanelGroupState(autoSaveId2, panelDataArray, storage2);
+        if (state) {
+          panelSizeBeforeCollapseRef.current = 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.current.layout = nextLayout;
+        if (onLayout2) {
+          onLayout2(nextLayout);
+        }
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    }
+  });
+  useIsomorphicLayoutEffect(() => {
+    const eagerValues = eagerValuesRef.current;
+    return () => {
+      eagerValues.layout = [];
+    };
+  }, []);
+  const registerResizeHandle2 = useCallback3((dragHandleId) => {
+    let isRTL = false;
+    const panelGroupElement = panelGroupElementRef.current;
+    if (panelGroupElement) {
+      const style2 = window.getComputedStyle(panelGroupElement, null);
+      if (style2.getPropertyValue("direction") === "rtl") {
+        isRTL = true;
+      }
+    }
+    return function resizeHandler(event) {
+      event.preventDefault();
+      const panelGroupElement2 = panelGroupElementRef.current;
+      if (!panelGroupElement2) {
+        return () => null;
+      }
+      const {
+        direction: direction2,
+        dragState: dragState2,
+        id: groupId2,
+        keyboardResizeBy: keyboardResizeBy2,
+        onLayout: onLayout2
+      } = committedValuesRef.current;
+      const {
+        layout: prevLayout,
+        panelDataArray
+      } = eagerValuesRef.current;
+      const {
+        initialLayout
+      } = dragState2 !== null && dragState2 !== undefined ? dragState2 : {};
+      const pivotIndices = determinePivotIndices(groupId2, dragHandleId, panelGroupElement2);
+      let delta = calculateDeltaPercentage(event, dragHandleId, direction2, dragState2, keyboardResizeBy2, panelGroupElement2);
+      const isHorizontal = direction2 === "horizontal";
+      if (isHorizontal && isRTL) {
+        delta = -delta;
+      }
+      const panelConstraints = panelDataArray.map((panelData) => panelData.constraints);
+      const nextLayout = adjustLayoutByDelta({
+        delta,
+        initialLayout: initialLayout !== null && initialLayout !== undefined ? initialLayout : prevLayout,
+        panelConstraints,
+        pivotIndices,
+        prevLayout,
+        trigger: isKeyDown(event) ? "keyboard" : "mouse-or-touch"
+      });
+      const layoutChanged = !compareLayouts(prevLayout, nextLayout);
+      if (isPointerEvent(event) || isMouseEvent(event)) {
+        if (prevDeltaRef.current != delta) {
+          prevDeltaRef.current = delta;
+          if (!layoutChanged && delta !== 0) {
+            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.current.layout = nextLayout;
+        if (onLayout2) {
+          onLayout2(nextLayout);
+        }
+        callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+      }
+    };
+  }, []);
+  const resizePanel2 = useCallback3((panelData, unsafePanelSize) => {
+    const {
+      onLayout: onLayout2
+    } = committedValuesRef.current;
+    const {
+      layout: prevLayout,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const panelConstraintsArray = panelDataArray.map((panelData2) => panelData2.constraints);
+    const {
+      panelSize,
+      pivotIndices
+    } = panelDataHelper(panelDataArray, panelData, prevLayout);
+    assert(panelSize != null, `Panel size not found for panel "${panelData.id}"`);
+    const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1;
+    const delta = isLastPanel ? panelSize - unsafePanelSize : unsafePanelSize - panelSize;
+    const nextLayout = adjustLayoutByDelta({
+      delta,
+      initialLayout: prevLayout,
+      panelConstraints: panelConstraintsArray,
+      pivotIndices,
+      prevLayout,
+      trigger: "imperative-api"
+    });
+    if (!compareLayouts(prevLayout, nextLayout)) {
+      setLayout(nextLayout);
+      eagerValuesRef.current.layout = nextLayout;
+      if (onLayout2) {
+        onLayout2(nextLayout);
+      }
+      callPanelCallbacks(panelDataArray, nextLayout, panelIdToLastNotifiedSizeMapRef.current);
+    }
+  }, []);
+  const reevaluatePanelConstraints = useCallback3((panelData, prevConstraints) => {
+    const {
+      layout: layout2,
+      panelDataArray
+    } = eagerValuesRef.current;
+    const {
+      collapsedSize: prevCollapsedSize = 0,
+      collapsible: prevCollapsible
+    } = prevConstraints;
+    const {
+      collapsedSize: nextCollapsedSize = 0,
+      collapsible: nextCollapsible,
+      maxSize: nextMaxSize = 100,
+      minSize: nextMinSize = 0
+    } = panelData.constraints;
+    const {
+      panelSize: prevPanelSize
+    } = panelDataHelper(panelDataArray, panelData, layout2);
+    if (prevPanelSize == null) {
+      return;
+    }
+    if (prevCollapsible && nextCollapsible && fuzzyNumbersEqual$1(prevPanelSize, prevCollapsedSize)) {
+      if (!fuzzyNumbersEqual$1(prevCollapsedSize, nextCollapsedSize)) {
+        resizePanel2(panelData, nextCollapsedSize);
+      }
+    } else if (prevPanelSize < nextMinSize) {
+      resizePanel2(panelData, nextMinSize);
+    } else if (prevPanelSize > nextMaxSize) {
+      resizePanel2(panelData, nextMaxSize);
+    }
+  }, [resizePanel2]);
+  const startDragging = useCallback3((dragHandleId, event) => {
+    const {
+      direction: direction2
+    } = committedValuesRef.current;
+    const {
+      layout: layout2
+    } = eagerValuesRef.current;
+    if (!panelGroupElementRef.current) {
+      return;
+    }
+    const handleElement = getResizeHandleElement(dragHandleId, panelGroupElementRef.current);
+    assert(handleElement, `Drag handle element not found for id "${dragHandleId}"`);
+    const initialCursorPosition = getResizeEventCursorPosition(direction2, event);
+    setDragState({
+      dragHandleId,
+      dragHandleRect: handleElement.getBoundingClientRect(),
+      initialCursorPosition,
+      initialLayout: layout2
+    });
+  }, []);
+  const stopDragging = useCallback3(() => {
+    setDragState(null);
+  }, []);
+  const unregisterPanel = useCallback3((panelData) => {
+    const {
+      panelDataArray
+    } = eagerValuesRef.current;
+    const index = findPanelDataIndex(panelDataArray, panelData);
+    if (index >= 0) {
+      panelDataArray.splice(index, 1);
+      delete panelIdToLastNotifiedSizeMapRef.current[panelData.id];
+      eagerValuesRef.current.panelDataArrayChanged = true;
+      forceUpdate();
+    }
+  }, [forceUpdate]);
+  const context2 = useMemo2(() => ({
+    collapsePanel,
+    direction,
+    dragState,
+    expandPanel,
+    getPanelSize,
+    getPanelStyle,
+    groupId,
+    isPanelCollapsed,
+    isPanelExpanded,
+    reevaluatePanelConstraints,
+    registerPanel,
+    registerResizeHandle: registerResizeHandle2,
+    resizePanel: resizePanel2,
+    startDragging,
+    stopDragging,
+    unregisterPanel,
+    panelGroupElement: panelGroupElementRef.current
+  }), [collapsePanel, dragState, direction, expandPanel, getPanelSize, getPanelStyle, groupId, isPanelCollapsed, isPanelExpanded, reevaluatePanelConstraints, registerPanel, registerResizeHandle2, resizePanel2, startDragging, stopDragging, unregisterPanel]);
+  const style = {
+    display: "flex",
+    flexDirection: direction === "horizontal" ? "row" : "column",
+    height: "100%",
+    overflow: "hidden",
+    width: "100%"
+  };
+  return createElement(PanelGroupContext.Provider, {
+    value: context2
+  }, createElement(Type, {
+    ...rest,
+    children,
+    className: classNameFromProps,
+    id: idFromProps,
+    ref: panelGroupElementRef,
+    style: {
+      ...style,
+      ...styleFromProps
+    },
+    [DATA_ATTRIBUTES.group]: "",
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId
+  }));
+}
+var PanelGroup = forwardRef3((props2, ref) => createElement(PanelGroupWithForwardedRef, {
+  ...props2,
+  forwardedRef: ref
+}));
+PanelGroupWithForwardedRef.displayName = "PanelGroup";
+PanelGroup.displayName = "forwardRef(PanelGroup)";
+function findPanelDataIndex(panelDataArray, panelData) {
+  return panelDataArray.findIndex((prevPanelData) => prevPanelData === panelData || prevPanelData.id === panelData.id);
+}
+function panelDataHelper(panelDataArray, panelData, layout) {
+  const panelIndex = findPanelDataIndex(panelDataArray, panelData);
+  const isLastPanel = panelIndex === panelDataArray.length - 1;
+  const pivotIndices = isLastPanel ? [panelIndex - 1, panelIndex] : [panelIndex, panelIndex + 1];
+  const panelSize = layout[panelIndex];
+  return {
+    ...panelData.constraints,
+    panelSize,
+    pivotIndices
+  };
+}
+function useWindowSplitterResizeHandlerBehavior({
+  disabled,
+  handleId,
+  resizeHandler,
+  panelGroupElement
+}) {
+  useEffect4(() => {
+    if (disabled || resizeHandler == null || panelGroupElement == null) {
+      return;
+    }
+    const handleElement = getResizeHandleElement(handleId, panelGroupElement);
+    if (handleElement == null) {
+      return;
+    }
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowLeft":
+        case "ArrowRight":
+        case "ArrowUp":
+        case "End":
+        case "Home": {
+          event.preventDefault();
+          resizeHandler(event);
+          break;
+        }
+        case "F6": {
+          event.preventDefault();
+          const groupId = handleElement.getAttribute(DATA_ATTRIBUTES.groupId);
+          assert(groupId, `No group element found for id "${groupId}"`);
+          const handles = getResizeHandleElementsForGroup(groupId, panelGroupElement);
+          const index = getResizeHandleElementIndex(groupId, handleId, panelGroupElement);
+          assert(index !== null, `No resize element found for id "${handleId}"`);
+          const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
+          const nextHandle = handles[nextIndex];
+          nextHandle.focus();
+          break;
+        }
+      }
+    };
+    handleElement.addEventListener("keydown", onKeyDown);
+    return () => {
+      handleElement.removeEventListener("keydown", onKeyDown);
+    };
+  }, [panelGroupElement, disabled, handleId, resizeHandler]);
+}
+function PanelResizeHandle({
+  children = null,
+  className: classNameFromProps = "",
+  disabled = false,
+  hitAreaMargins,
+  id: idFromProps,
+  onBlur,
+  onClick,
+  onDragging,
+  onFocus,
+  onPointerDown,
+  onPointerUp,
+  style: styleFromProps = {},
+  tabIndex = 0,
+  tagName: Type = "div",
+  ...rest
+}) {
+  var _hitAreaMargins$coars, _hitAreaMargins$fine;
+  const elementRef = useRef3(null);
+  const callbacksRef = useRef3({
+    onClick,
+    onDragging,
+    onPointerDown,
+    onPointerUp
+  });
+  useEffect4(() => {
+    callbacksRef.current.onClick = onClick;
+    callbacksRef.current.onDragging = onDragging;
+    callbacksRef.current.onPointerDown = onPointerDown;
+    callbacksRef.current.onPointerUp = onPointerUp;
+  });
+  const panelGroupContext = useContext(PanelGroupContext);
+  if (panelGroupContext === null) {
+    throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
+  }
+  const {
+    direction,
+    groupId,
+    registerResizeHandle: registerResizeHandleWithParentGroup,
+    startDragging,
+    stopDragging,
+    panelGroupElement
+  } = panelGroupContext;
+  const resizeHandleId = useUniqueId(idFromProps);
+  const [state, setState] = useState4("inactive");
+  const [isFocused, setIsFocused] = useState4(false);
+  const [resizeHandler, setResizeHandler] = useState4(null);
+  const committedValuesRef = useRef3({
+    state
+  });
+  useIsomorphicLayoutEffect(() => {
+    committedValuesRef.current.state = state;
+  });
+  useEffect4(() => {
+    if (disabled) {
+      setResizeHandler(null);
+    } else {
+      const resizeHandler2 = registerResizeHandleWithParentGroup(resizeHandleId);
+      setResizeHandler(() => resizeHandler2);
+    }
+  }, [disabled, resizeHandleId, registerResizeHandleWithParentGroup]);
+  const coarseHitAreaMargins = (_hitAreaMargins$coars = hitAreaMargins === null || hitAreaMargins === undefined ? undefined : hitAreaMargins.coarse) !== null && _hitAreaMargins$coars !== undefined ? _hitAreaMargins$coars : 15;
+  const fineHitAreaMargins = (_hitAreaMargins$fine = hitAreaMargins === null || hitAreaMargins === undefined ? undefined : hitAreaMargins.fine) !== null && _hitAreaMargins$fine !== undefined ? _hitAreaMargins$fine : 5;
+  useEffect4(() => {
+    if (disabled || resizeHandler == null) {
+      return;
+    }
+    const element = elementRef.current;
+    assert(element, "Element ref not attached");
+    let didMove = false;
+    const setResizeHandlerState = (action, isActive, event) => {
+      if (!isActive) {
+        setState("inactive");
+        return;
+      }
+      switch (action) {
+        case "down": {
+          setState("drag");
+          didMove = false;
+          assert(event, 'Expected event to be defined for "down" action');
+          startDragging(resizeHandleId, event);
+          const {
+            onDragging: onDragging2,
+            onPointerDown: onPointerDown2
+          } = callbacksRef.current;
+          onDragging2 === null || onDragging2 === undefined || onDragging2(true);
+          onPointerDown2 === null || onPointerDown2 === undefined || onPointerDown2();
+          break;
+        }
+        case "move": {
+          const {
+            state: state2
+          } = committedValuesRef.current;
+          didMove = true;
+          if (state2 !== "drag") {
+            setState("hover");
+          }
+          assert(event, 'Expected event to be defined for "move" action');
+          resizeHandler(event);
+          break;
+        }
+        case "up": {
+          setState("hover");
+          stopDragging();
+          const {
+            onClick: onClick2,
+            onDragging: onDragging2,
+            onPointerUp: onPointerUp2
+          } = callbacksRef.current;
+          onDragging2 === null || onDragging2 === undefined || onDragging2(false);
+          onPointerUp2 === null || onPointerUp2 === undefined || onPointerUp2();
+          if (!didMove) {
+            onClick2 === null || onClick2 === undefined || onClick2();
+          }
+          break;
+        }
+      }
+    };
+    return registerResizeHandle(resizeHandleId, element, direction, {
+      coarse: coarseHitAreaMargins,
+      fine: fineHitAreaMargins
+    }, setResizeHandlerState);
+  }, [coarseHitAreaMargins, direction, disabled, fineHitAreaMargins, registerResizeHandleWithParentGroup, resizeHandleId, resizeHandler, startDragging, stopDragging]);
+  useWindowSplitterResizeHandlerBehavior({
+    disabled,
+    handleId: resizeHandleId,
+    resizeHandler,
+    panelGroupElement
+  });
+  const style = {
+    touchAction: "none",
+    userSelect: "none"
+  };
+  return createElement(Type, {
+    ...rest,
+    children,
+    className: classNameFromProps,
+    id: idFromProps,
+    onBlur: () => {
+      setIsFocused(false);
+      onBlur === null || onBlur === undefined || onBlur();
+    },
+    onFocus: () => {
+      setIsFocused(true);
+      onFocus === null || onFocus === undefined || onFocus();
+    },
+    ref: elementRef,
+    role: "separator",
+    style: {
+      ...style,
+      ...styleFromProps
+    },
+    tabIndex,
+    [DATA_ATTRIBUTES.groupDirection]: direction,
+    [DATA_ATTRIBUTES.groupId]: groupId,
+    [DATA_ATTRIBUTES.resizeHandle]: "",
+    [DATA_ATTRIBUTES.resizeHandleActive]: state === "drag" ? "pointer" : isFocused ? "keyboard" : undefined,
+    [DATA_ATTRIBUTES.resizeHandleEnabled]: !disabled,
+    [DATA_ATTRIBUTES.resizeHandleId]: resizeHandleId,
+    [DATA_ATTRIBUTES.resizeHandleState]: state
+  });
+}
+PanelResizeHandle.displayName = "PanelResizeHandle";
+
+// node_modules/@principal-ade/panels/dist/index.esm.js
+import { flushSync as y, unstable_batchedUpdates as w, createPortal as x } from "react-dom";
+import { useTheme as C } from "@principal-ade/industry-theme";
+function S(e2) {
+  return { "--panel-background": e2.colors.background, "--panel-border": e2.colors.border, "--panel-handle": e2.colors.backgroundSecondary, "--panel-handle-hover": e2.colors.backgroundHover, "--panel-handle-active": e2.colors.primary, "--panel-button-bg": e2.colors.surface, "--panel-button-hover": e2.colors.backgroundHover, "--panel-button-border": e2.colors.border, "--panel-button-icon": e2.colors.textSecondary, "--panel-accent-bg": e2.colors.primary + "15" };
+}
+var D = ({ primaryContent: t2, secondaryContent: n2, collapsedHeader: r2, collapsed: o2 = true, onCollapsedChange: i2, ratio: a2 = 0.3, onRatioChange: l2, minRatio: s2 = 0.1, maxRatio: c2 = 0.8, collapsedHeight: d2 = 28, theme: u2, className: p2 = "", style: h2, animationDuration: m2 = 200, onCollapseStart: f2, onCollapseComplete: g, onExpandStart: v, onExpandComplete: b }) => {
+  const y2 = S(u2);
+  return n2 ? /* @__PURE__ */ e(z, { primaryContent: t2, secondaryContent: n2, collapsedHeader: r2 ?? { title: "Content" }, collapsed: o2, onCollapsedChange: i2 ?? (() => {}), ratio: a2, onRatioChange: l2 ?? (() => {}), minRatio: s2, maxRatio: c2, collapsedHeight: d2, theme: u2, className: p2, style: h2, animationDuration: m2, onCollapseStart: f2, onCollapseComplete: g, onExpandStart: v, onExpandComplete: b }) : /* @__PURE__ */ e("div", { className: `collapsible-split-pane ${p2}`, style: { ...y2, ...h2 }, children: /* @__PURE__ */ e("div", { className: "csp-primary-content-full", children: t2 }) });
+};
+var z = ({ primaryContent: r2, secondaryContent: s2, collapsedHeader: c2, collapsed: d2, onCollapsedChange: u2, ratio: p2, onRatioChange: h2, minRatio: m2 = 0.1, maxRatio: f2 = 0.8, collapsedHeight: y2 = 28, theme: w2, className: x2 = "", style: C2, animationDuration: R = 200, onCollapseStart: N, onCollapseComplete: E, onExpandStart: D2, onExpandComplete: z2 }) => {
+  const [M, T] = o(false), [A, k] = o(false), L = i(null), P = i(undefined), F = i(undefined), $ = i(p2), B = (e2) => 100 * e2;
+  l(() => {
+    !d2 && p2 > 0 && ($.current = p2);
+  }, [d2, p2]);
+  const O = a((e2, t2, n2) => {
+    if (!L.current)
+      return;
+    P.current && cancelAnimationFrame(P.current), F.current = performance.now();
+    const r3 = (o2) => {
+      if (!F.current || !L.current)
+        return;
+      const i2 = o2 - F.current, a2 = Math.min(i2 / R, 1), l2 = a2 < 0.5 ? 4 * a2 * a2 * a2 : 1 - Math.pow(-2 * a2 + 2, 3) / 2, s3 = e2 + (t2 - e2) * l2;
+      L.current.resize(s3), a2 < 1 ? P.current = requestAnimationFrame(r3) : (t2 === 0 ? L.current.collapse() : L.current.resize(t2), T(false), n2 && n2());
+    };
+    P.current = requestAnimationFrame(r3);
+  }, [R]), I = a(() => {
+    if (M || A)
+      return;
+    T(true), N?.();
+    const e2 = B(p2);
+    O(e2, 0, () => {
+      u2(true), E?.();
+    });
+  }, [M, A, p2, O, u2, N, E]), q = a(() => {
+    if (M || A)
+      return;
+    T(true), D2?.();
+    const e2 = $.current || p2 || 0.3, t2 = B(e2);
+    O(0, t2, () => {
+      u2(false), h2(e2), z2?.();
+    });
+  }, [M, A, p2, O, u2, h2, D2, z2]), H = a(() => {
+    d2 ? q() : I();
+  }, [d2, I, q]), W = a((e2) => {
+    if (!M && !d2) {
+      const t2 = e2 / 100;
+      h2(t2);
+    }
+  }, [M, d2, h2]), j = a(() => {
+    k(true);
+  }, []), K = a(() => {
+    k(false);
+  }, []);
+  l(() => {
+    if (d2 && !M && L.current) {
+      L.current.getSize() > 0 && I();
+    } else if (!d2 && !M && L.current) {
+      L.current.getSize() === 0 && q();
+    }
+  }, [d2]), l(() => () => {
+    P.current && cancelAnimationFrame(P.current);
+  }, []);
+  const U = S(w2), X2 = ["csp-secondary-panel", M && !A ? "csp-animating" : "", d2 ? "csp-collapsed" : ""].filter(Boolean).join(" ");
+  return e("div", { className: `collapsible-split-pane ${x2}`, style: { ...U, ...C2 }, children: d2 ? /* @__PURE__ */ t(n, { children: [
+    /* @__PURE__ */ t("div", { className: "csp-collapsed-header", style: { height: y2 }, onClick: H, role: "button", tabIndex: 0, onKeyDown: (e2) => {
+      e2.key !== "Enter" && e2.key !== " " || (e2.preventDefault(), H());
+    }, "aria-expanded": false, "aria-label": `Expand ${c2.title}`, children: [
+      c2.icon && /* @__PURE__ */ e("span", { className: "csp-collapsed-header-icon", children: c2.icon }),
+      /* @__PURE__ */ e("span", { className: "csp-collapsed-header-title", children: c2.title }),
+      /* @__PURE__ */ e("button", { className: "csp-collapsed-header-expand", onClick: (e2) => {
+        e2.stopPropagation(), H();
+      }, "aria-label": `Expand ${c2.title}`, children: /* @__PURE__ */ e("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M3 5L6 8L9 5" }) }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "csp-primary-content-full", children: r2 })
+  ] }) : /* @__PURE__ */ t(PanelGroup, { direction: "vertical", onLayout: K, children: [
+    /* @__PURE__ */ e(Panel, { ref: L, collapsible: true, defaultSize: B(p2), minSize: B(m2), maxSize: B(f2), collapsedSize: 0, onResize: W, onCollapse: () => u2(true), className: X2, children: /* @__PURE__ */ t("div", { className: "csp-panel-content", children: [
+      /* @__PURE__ */ t("div", { className: "csp-secondary-header", children: [
+        c2.icon && /* @__PURE__ */ e("span", { className: "csp-secondary-header-icon", children: c2.icon }),
+        /* @__PURE__ */ e("span", { className: "csp-secondary-header-title", children: c2.title }),
+        /* @__PURE__ */ e("button", { className: "csp-secondary-header-collapse", onClick: I, "aria-label": `Collapse ${c2.title}`, children: /* @__PURE__ */ e("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: /* @__PURE__ */ e("path", { d: "M3 7L6 4L9 7" }) }) })
+      ] }),
+      /* @__PURE__ */ e("div", { className: "csp-secondary-body", children: s2 })
+    ] }) }),
+    /* @__PURE__ */ e(PanelResizeHandle, { className: "csp-resize-handle", onDragging: j, children: /* @__PURE__ */ e("div", { className: "csp-resize-handle-bar" }) }),
+    /* @__PURE__ */ e(Panel, { className: "csp-primary-panel", minSize: 20, children: /* @__PURE__ */ e("div", { className: "csp-panel-content", children: r2 }) })
+  ] }) });
+};
+var A = s(null);
+var $ = d(({ panels: o2, className: a2 = "", style: s2, theme: c2, minPanelWidth: d2 = 350, idealPanelWidth: p2 = 0.333, showSeparator: h2 = false, onPanelChange: m2, preventKeyboardScroll: f2 = true, disableSwipe: g = false }, v) => {
+  const b = i(null), y2 = i(false), w2 = i(null), x2 = S(c2);
+  u(v, () => ({ scrollToPanel: (e2) => {
+    if (!b.current)
+      return;
+    const t2 = b.current, n2 = t2.children[e2];
+    if (n2) {
+      y2.current = true, w2.current && clearTimeout(w2.current);
+      const e3 = n2.offsetLeft;
+      t2.scrollTo({ left: e3, behavior: "smooth" }), w2.current = setTimeout(() => {
+        y2.current = false;
+      }, 500);
+    }
+  }, getCurrentPanel: () => {
+    if (!b.current || b.current.children.length === 0)
+      return 0;
+    const e2 = b.current, t2 = e2.getBoundingClientRect().left;
+    let n2 = 0, r2 = 1 / 0;
+    for (let o3 = 0;o3 < e2.children.length; o3++) {
+      const i2 = e2.children[o3].getBoundingClientRect(), a3 = Math.abs(i2.left - t2);
+      a3 < r2 && (r2 = a3, n2 = o3);
+    }
+    return n2;
+  } }));
+  l(() => {
+    if (!f2 || !b.current)
+      return;
+    const e2 = b.current, t2 = (e3) => {
+      const t3 = e3.target;
+      if (t3.tagName === "INPUT" || t3.tagName === "TEXTAREA" || t3.tagName === "SELECT" || t3.isContentEditable || t3.closest(".xterm") !== null || t3.closest('[contenteditable="true"]') !== null)
+        return;
+      [" ", "Space", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "PageUp", "PageDown"].includes(e3.key) && e3.preventDefault();
+    };
+    return e2.addEventListener("keydown", t2), () => {
+      e2.removeEventListener("keydown", t2);
+    };
+  }, [f2]), l(() => () => {
+    w2.current && clearTimeout(w2.current);
+  }, []);
+  const C2 = o2.length, R = 2 * d2;
+  let N;
+  N = C2 === 1 || C2 === 2 ? "100%" : `max(${d2}px, ${100 * p2}%)`;
+  const E = r.useId().replace(/:/g, "_");
+  return t(n, { children: [
+    C2 === 2 && /* @__PURE__ */ e("style", { children: `
+            .snap-carousel-container[data-carousel-id="${E}"][data-panel-count="2"] .snap-carousel-panel {
+              width: 100%;
+            }
+            @container (min-width: ${R}px) {
+              .snap-carousel-container[data-carousel-id="${E}"][data-panel-count="2"] .snap-carousel-panel {
+                width: 50%;
+              }
+            }
+          ` }),
+    /* @__PURE__ */ e("div", { ref: b, className: `snap-carousel-container ${g ? "swipe-disabled" : ""} ${a2}`, style: { ...x2, ...s2, "--snap-carousel-min-width": `${d2}px`, "--snap-carousel-ideal-width": 100 * p2 + "%", "--snap-carousel-gap": h2 ? "1px" : "0px", "--snap-carousel-panel-width": N, "--snap-carousel-panel-count": C2, "--snap-carousel-two-panel-threshold": `${R}px` }, onScroll: (e2) => {
+      if (!m2 || !b.current || b.current.children.length === 0)
+        return;
+      if (y2.current)
+        return;
+      const t2 = b.current, n2 = t2.getBoundingClientRect().left;
+      let r2 = 0, o3 = 1 / 0;
+      for (let i2 = 0;i2 < t2.children.length; i2++) {
+        const e3 = t2.children[i2].getBoundingClientRect(), a3 = Math.abs(e3.left - n2);
+        a3 < o3 && (o3 = a3, r2 = i2);
+      }
+      m2(r2);
+    }, "data-panel-count": C2, "data-carousel-id": E, children: o2.map((t2, n2) => /* @__PURE__ */ e("div", { className: "snap-carousel-panel", children: t2 }, n2)) })
+  ] });
+});
+$.displayName = "SnapCarousel";
+var I = typeof window != "undefined" && window.document !== undefined && window.document.createElement !== undefined;
+function q(e2) {
+  const t2 = Object.prototype.toString.call(e2);
+  return t2 === "[object Window]" || t2 === "[object global]";
+}
+function H(e2) {
+  return "nodeType" in e2;
+}
+function W(e2) {
+  var t2, n2;
+  return e2 ? q(e2) ? e2 : H(e2) && (t2 = (n2 = e2.ownerDocument) == null ? undefined : n2.defaultView) != null ? t2 : window : window;
+}
+function j(e2) {
+  const { Document: t2 } = W(e2);
+  return e2 instanceof t2;
+}
+function K(e2) {
+  return !q(e2) && e2 instanceof W(e2).HTMLElement;
+}
+function U(e2) {
+  return e2 instanceof W(e2).SVGElement;
+}
+function X2(e2) {
+  return e2 ? q(e2) ? e2.document : H(e2) ? j(e2) ? e2 : K(e2) || U(e2) ? e2.ownerDocument : document : document : document;
+}
+function te(e2) {
+  return function(t2) {
+    for (var n2 = arguments.length, r2 = new Array(n2 > 1 ? n2 - 1 : 0), o2 = 1;o2 < n2; o2++)
+      r2[o2 - 1] = arguments[o2];
+    return r2.reduce((t3, n3) => {
+      const r3 = Object.entries(n3);
+      for (const [o3, i2] of r3) {
+        const n4 = t3[o3];
+        n4 != null && (t3[o3] = n4 + e2 * i2);
+      }
+      return t3;
+    }, { ...t2 });
+  };
+}
+var ne = /* @__PURE__ */ te(1);
+var re = /* @__PURE__ */ te(-1);
+function oe(e2) {
+  if (!e2)
+    return false;
+  const { KeyboardEvent: t2 } = W(e2.target);
+  return t2 && e2 instanceof t2;
+}
+function ie(e2) {
+  if (function(e3) {
+    if (!e3)
+      return false;
+    const { TouchEvent: t2 } = W(e3.target);
+    return t2 && e3 instanceof t2;
+  }(e2)) {
+    if (e2.touches && e2.touches.length) {
+      const { clientX: t2, clientY: n2 } = e2.touches[0];
+      return { x: t2, y: n2 };
+    }
+    if (e2.changedTouches && e2.changedTouches.length) {
+      const { clientX: t2, clientY: n2 } = e2.changedTouches[0];
+      return { x: t2, y: n2 };
+    }
+  }
+  return function(e3) {
+    return "clientX" in e3 && "clientY" in e3;
+  }(e2) ? { x: e2.clientX, y: e2.clientY } : null;
+}
+var fe;
+var ge;
+(ge = fe || (fe = {})).DragStart = "dragStart", ge.DragMove = "dragMove", ge.DragEnd = "dragEnd", ge.DragCancel = "dragCancel", ge.DragOver = "dragOver", ge.RegisterDroppable = "registerDroppable", ge.SetDroppableDisabled = "setDroppableDisabled", ge.UnregisterDroppable = "unregisterDroppable";
+var be = /* @__PURE__ */ Object.freeze({ x: 0, y: 0 });
+var Me = { ignoreTransform: false };
+function Te(e2, t2) {
+  t2 === undefined && (t2 = Me);
+  let n2 = e2.getBoundingClientRect();
+  if (t2.ignoreTransform) {
+    const { transform: t3, transformOrigin: r3 } = W(e2).getComputedStyle(e2);
+    t3 && (n2 = function(e3, t4, n3) {
+      const r4 = function(e4) {
+        if (e4.startsWith("matrix3d(")) {
+          const t5 = e4.slice(9, -1).split(/, /);
+          return { x: +t5[12], y: +t5[13], scaleX: +t5[0], scaleY: +t5[5] };
+        }
+        if (e4.startsWith("matrix(")) {
+          const t5 = e4.slice(7, -1).split(/, /);
+          return { x: +t5[4], y: +t5[5], scaleX: +t5[0], scaleY: +t5[3] };
+        }
+        return null;
+      }(t4);
+      if (!r4)
+        return e3;
+      const { scaleX: o3, scaleY: i3, x: a3, y: l3 } = r4, s3 = e3.left - a3 - (1 - o3) * parseFloat(n3), c2 = e3.top - l3 - (1 - i3) * parseFloat(n3.slice(n3.indexOf(" ") + 1)), d2 = o3 ? e3.width / o3 : e3.width, u2 = i3 ? e3.height / i3 : e3.height;
+      return { width: d2, height: u2, top: c2, right: s3 + d2, bottom: c2 + u2, left: s3 };
+    }(n2, t3, r3));
+  }
+  const { top: r2, left: o2, width: i2, height: a2, bottom: l2, right: s2 } = n2;
+  return { top: r2, left: o2, width: i2, height: a2, bottom: l2, right: s2 };
+}
+function Ae(e2) {
+  return Te(e2, { ignoreTransform: true });
+}
+function ke(e2, t2) {
+  const n2 = [];
+  return e2 ? function r(o2) {
+    if (t2 != null && n2.length >= t2)
+      return n2;
+    if (!o2)
+      return n2;
+    if (j(o2) && o2.scrollingElement != null && !n2.includes(o2.scrollingElement))
+      return n2.push(o2.scrollingElement), n2;
+    if (!K(o2) || U(o2))
+      return n2;
+    if (n2.includes(o2))
+      return n2;
+    const i2 = W(e2).getComputedStyle(o2);
+    return o2 !== e2 && function(e3, t3) {
+      t3 === undefined && (t3 = W(e3).getComputedStyle(e3));
+      const n3 = /(auto|scroll|overlay)/;
+      return ["overflow", "overflowX", "overflowY"].some((e4) => {
+        const r2 = t3[e4];
+        return typeof r2 == "string" && n3.test(r2);
+      });
+    }(o2, i2) && n2.push(o2), function(e3, t3) {
+      return t3 === undefined && (t3 = W(e3).getComputedStyle(e3)), t3.position === "fixed";
+    }(o2, i2) ? n2 : r(o2.parentNode);
+  }(e2) : n2;
+}
+function Le(e2) {
+  const [t2] = ke(e2, 1);
+  return t2 != null ? t2 : null;
+}
+var Oe;
+var Ie;
+function qe(e2) {
+  return !(!I || !e2) && e2 === document.scrollingElement;
+}
+function He(e2) {
+  const t2 = { x: 0, y: 0 }, n2 = qe(e2) ? { height: window.innerHeight, width: window.innerWidth } : { height: e2.clientHeight, width: e2.clientWidth }, r2 = { x: e2.scrollWidth - n2.width, y: e2.scrollHeight - n2.height };
+  return { isTop: e2.scrollTop <= t2.y, isLeft: e2.scrollLeft <= t2.x, isBottom: e2.scrollTop >= r2.y, isRight: e2.scrollLeft >= r2.x, maxScroll: r2, minScroll: t2 };
+}
+(Ie = Oe || (Oe = {}))[Ie.Forward = 1] = "Forward", Ie[Ie.Backward = -1] = "Backward";
+function Ke(e2) {
+  if (e2 === document.scrollingElement) {
+    const { innerWidth: e3, innerHeight: t3 } = window;
+    return { top: 0, left: 0, right: e3, bottom: t3, width: e3, height: t3 };
+  }
+  const { top: t2, left: n2, right: r2, bottom: o2 } = e2.getBoundingClientRect();
+  return { top: t2, left: n2, right: r2, bottom: o2, width: e2.clientWidth, height: e2.clientHeight };
+}
+class Ve {
+  constructor(e2) {
+    this.target = undefined, this.listeners = [], this.removeAll = () => {
+      this.listeners.forEach((e3) => {
+        var t2;
+        return (t2 = this.target) == null ? undefined : t2.removeEventListener(...e3);
+      });
+    }, this.target = e2;
+  }
+  add(e2, t2, n2) {
+    var r2;
+    (r2 = this.target) == null || r2.addEventListener(e2, t2, n2), this.listeners.push([e2, t2, n2]);
+  }
+}
+function Je(e2, t2) {
+  const n2 = Math.abs(e2.x), r2 = Math.abs(e2.y);
+  return typeof t2 == "number" ? Math.sqrt(n2 ** 2 + r2 ** 2) > t2 : ("x" in t2) && ("y" in t2) ? n2 > t2.x && r2 > t2.y : ("x" in t2) ? n2 > t2.x : ("y" in t2) && r2 > t2.y;
+}
+var Ge;
+var _e;
+var Qe;
+var Ze;
+function et(e2) {
+  e2.preventDefault();
+}
+function tt(e2) {
+  e2.stopPropagation();
+}
+(_e = Ge || (Ge = {})).Click = "click", _e.DragStart = "dragstart", _e.Keydown = "keydown", _e.ContextMenu = "contextmenu", _e.Resize = "resize", _e.SelectionChange = "selectionchange", _e.VisibilityChange = "visibilitychange", (Ze = Qe || (Qe = {})).Space = "Space", Ze.Down = "ArrowDown", Ze.Right = "ArrowRight", Ze.Left = "ArrowLeft", Ze.Up = "ArrowUp", Ze.Esc = "Escape", Ze.Enter = "Enter", Ze.Tab = "Tab";
+var nt = { start: [Qe.Space, Qe.Enter], cancel: [Qe.Esc], end: [Qe.Space, Qe.Enter, Qe.Tab] };
+var rt = (e2, t2) => {
+  let { currentCoordinates: n2 } = t2;
+  switch (e2.code) {
+    case Qe.Right:
+      return { ...n2, x: n2.x + 25 };
+    case Qe.Left:
+      return { ...n2, x: n2.x - 25 };
+    case Qe.Down:
+      return { ...n2, y: n2.y + 25 };
+    case Qe.Up:
+      return { ...n2, y: n2.y - 25 };
+  }
+};
+
+class ot {
+  constructor(e2) {
+    this.props = undefined, this.autoScrollEnabled = false, this.referenceCoordinates = undefined, this.listeners = undefined, this.windowListeners = undefined, this.props = e2;
+    const { event: { target: t2 } } = e2;
+    this.props = e2, this.listeners = new Ve(X2(t2)), this.windowListeners = new Ve(W(t2)), this.handleKeyDown = this.handleKeyDown.bind(this), this.handleCancel = this.handleCancel.bind(this), this.attach();
+  }
+  attach() {
+    this.handleStart(), this.windowListeners.add(Ge.Resize, this.handleCancel), this.windowListeners.add(Ge.VisibilityChange, this.handleCancel), setTimeout(() => this.listeners.add(Ge.Keydown, this.handleKeyDown));
+  }
+  handleStart() {
+    const { activeNode: e2, onStart: t2 } = this.props, n2 = e2.node.current;
+    n2 && function(e3, t3) {
+      if (t3 === undefined && (t3 = Te), !e3)
+        return;
+      const { top: n3, left: r2, bottom: o2, right: i2 } = t3(e3);
+      Le(e3) && (o2 <= 0 || i2 <= 0 || n3 >= window.innerHeight || r2 >= window.innerWidth) && e3.scrollIntoView({ block: "center", inline: "center" });
+    }(n2), t2(be);
+  }
+  handleKeyDown(e2) {
+    if (oe(e2)) {
+      const { active: t2, context: n2, options: r2 } = this.props, { keyboardCodes: o2 = nt, coordinateGetter: i2 = rt, scrollBehavior: a2 = "smooth" } = r2, { code: l2 } = e2;
+      if (o2.end.includes(l2))
+        return void this.handleEnd(e2);
+      if (o2.cancel.includes(l2))
+        return void this.handleCancel(e2);
+      const { collisionRect: s2 } = n2.current, c2 = s2 ? { x: s2.left, y: s2.top } : be;
+      this.referenceCoordinates || (this.referenceCoordinates = c2);
+      const d2 = i2(e2, { active: t2, context: n2.current, currentCoordinates: c2 });
+      if (d2) {
+        const t3 = re(d2, c2), r3 = { x: 0, y: 0 }, { scrollableAncestors: o3 } = n2.current;
+        for (const n3 of o3) {
+          const o4 = e2.code, { isTop: i3, isRight: l3, isLeft: s3, isBottom: c3, maxScroll: u2, minScroll: p2 } = He(n3), h2 = Ke(n3), m2 = { x: Math.min(o4 === Qe.Right ? h2.right - h2.width / 2 : h2.right, Math.max(o4 === Qe.Right ? h2.left : h2.left + h2.width / 2, d2.x)), y: Math.min(o4 === Qe.Down ? h2.bottom - h2.height / 2 : h2.bottom, Math.max(o4 === Qe.Down ? h2.top : h2.top + h2.height / 2, d2.y)) }, f2 = o4 === Qe.Right && !l3 || o4 === Qe.Left && !s3, g = o4 === Qe.Down && !c3 || o4 === Qe.Up && !i3;
+          if (f2 && m2.x !== d2.x) {
+            const e3 = n3.scrollLeft + t3.x, i4 = o4 === Qe.Right && e3 <= u2.x || o4 === Qe.Left && e3 >= p2.x;
+            if (i4 && !t3.y)
+              return void n3.scrollTo({ left: e3, behavior: a2 });
+            r3.x = i4 ? n3.scrollLeft - e3 : o4 === Qe.Right ? n3.scrollLeft - u2.x : n3.scrollLeft - p2.x, r3.x && n3.scrollBy({ left: -r3.x, behavior: a2 });
+            break;
+          }
+          if (g && m2.y !== d2.y) {
+            const e3 = n3.scrollTop + t3.y, i4 = o4 === Qe.Down && e3 <= u2.y || o4 === Qe.Up && e3 >= p2.y;
+            if (i4 && !t3.x)
+              return void n3.scrollTo({ top: e3, behavior: a2 });
+            r3.y = i4 ? n3.scrollTop - e3 : o4 === Qe.Down ? n3.scrollTop - u2.y : n3.scrollTop - p2.y, r3.y && n3.scrollBy({ top: -r3.y, behavior: a2 });
+            break;
+          }
+        }
+        this.handleMove(e2, ne(re(d2, this.referenceCoordinates), r3));
+      }
+    }
+  }
+  handleMove(e2, t2) {
+    const { onMove: n2 } = this.props;
+    e2.preventDefault(), n2(t2);
+  }
+  handleEnd(e2) {
+    const { onEnd: t2 } = this.props;
+    e2.preventDefault(), this.detach(), t2();
+  }
+  handleCancel(e2) {
+    const { onCancel: t2 } = this.props;
+    e2.preventDefault(), this.detach(), t2();
+  }
+  detach() {
+    this.listeners.removeAll(), this.windowListeners.removeAll();
+  }
+}
+function it(e2) {
+  return Boolean(e2 && "distance" in e2);
+}
+function at(e2) {
+  return Boolean(e2 && "delay" in e2);
+}
+ot.activators = [{ eventName: "onKeyDown", handler: (e2, t2, n2) => {
+  let { keyboardCodes: r2 = nt, onActivation: o2 } = t2, { active: i2 } = n2;
+  const { code: a2 } = e2.nativeEvent;
+  if (r2.start.includes(a2)) {
+    const t3 = i2.activatorNode.current;
+    return (!t3 || e2.target === t3) && (e2.preventDefault(), o2 == null || o2({ event: e2.nativeEvent }), true);
+  }
+  return false;
+} }];
+
+class lt {
+  constructor(e2, t2, n2) {
+    var r2;
+    n2 === undefined && (n2 = function(e3) {
+      const { EventTarget: t3 } = W(e3);
+      return e3 instanceof t3 ? e3 : X2(e3);
+    }(e2.event.target)), this.props = undefined, this.events = undefined, this.autoScrollEnabled = true, this.document = undefined, this.activated = false, this.initialCoordinates = undefined, this.timeoutId = null, this.listeners = undefined, this.documentListeners = undefined, this.windowListeners = undefined, this.props = e2, this.events = t2;
+    const { event: o2 } = e2, { target: i2 } = o2;
+    this.props = e2, this.events = t2, this.document = X2(i2), this.documentListeners = new Ve(this.document), this.listeners = new Ve(n2), this.windowListeners = new Ve(W(i2)), this.initialCoordinates = (r2 = ie(o2)) != null ? r2 : be, this.handleStart = this.handleStart.bind(this), this.handleMove = this.handleMove.bind(this), this.handleEnd = this.handleEnd.bind(this), this.handleCancel = this.handleCancel.bind(this), this.handleKeydown = this.handleKeydown.bind(this), this.removeTextSelection = this.removeTextSelection.bind(this), this.attach();
+  }
+  attach() {
+    const { events: e2, props: { options: { activationConstraint: t2, bypassActivationConstraint: n2 } } } = this;
+    if (this.listeners.add(e2.move.name, this.handleMove, { passive: false }), this.listeners.add(e2.end.name, this.handleEnd), e2.cancel && this.listeners.add(e2.cancel.name, this.handleCancel), this.windowListeners.add(Ge.Resize, this.handleCancel), this.windowListeners.add(Ge.DragStart, et), this.windowListeners.add(Ge.VisibilityChange, this.handleCancel), this.windowListeners.add(Ge.ContextMenu, et), this.documentListeners.add(Ge.Keydown, this.handleKeydown), t2) {
+      if (n2 != null && n2({ event: this.props.event, activeNode: this.props.activeNode, options: this.props.options }))
+        return this.handleStart();
+      if (at(t2))
+        return this.timeoutId = setTimeout(this.handleStart, t2.delay), void this.handlePending(t2);
+      if (it(t2))
+        return void this.handlePending(t2);
+    }
+    this.handleStart();
+  }
+  detach() {
+    this.listeners.removeAll(), this.windowListeners.removeAll(), setTimeout(this.documentListeners.removeAll, 50), this.timeoutId !== null && (clearTimeout(this.timeoutId), this.timeoutId = null);
+  }
+  handlePending(e2, t2) {
+    const { active: n2, onPending: r2 } = this.props;
+    r2(n2, e2, this.initialCoordinates, t2);
+  }
+  handleStart() {
+    const { initialCoordinates: e2 } = this, { onStart: t2 } = this.props;
+    e2 && (this.activated = true, this.documentListeners.add(Ge.Click, tt, { capture: true }), this.removeTextSelection(), this.documentListeners.add(Ge.SelectionChange, this.removeTextSelection), t2(e2));
+  }
+  handleMove(e2) {
+    var t2;
+    const { activated: n2, initialCoordinates: r2, props: o2 } = this, { onMove: i2, options: { activationConstraint: a2 } } = o2;
+    if (!r2)
+      return;
+    const l2 = (t2 = ie(e2)) != null ? t2 : be, s2 = re(r2, l2);
+    if (!n2 && a2) {
+      if (it(a2)) {
+        if (a2.tolerance != null && Je(s2, a2.tolerance))
+          return this.handleCancel();
+        if (Je(s2, a2.distance))
+          return this.handleStart();
+      }
+      return at(a2) && Je(s2, a2.tolerance) ? this.handleCancel() : void this.handlePending(a2, s2);
+    }
+    e2.cancelable && e2.preventDefault(), i2(l2);
+  }
+  handleEnd() {
+    const { onAbort: e2, onEnd: t2 } = this.props;
+    this.detach(), this.activated || e2(this.props.active), t2();
+  }
+  handleCancel() {
+    const { onAbort: e2, onCancel: t2 } = this.props;
+    this.detach(), this.activated || e2(this.props.active), t2();
+  }
+  handleKeydown(e2) {
+    e2.code === Qe.Esc && this.handleCancel();
+  }
+  removeTextSelection() {
+    var e2;
+    (e2 = this.document.getSelection()) == null || e2.removeAllRanges();
+  }
+}
+var st = { cancel: { name: "pointercancel" }, move: { name: "pointermove" }, end: { name: "pointerup" } };
+
+class ct extends lt {
+  constructor(e2) {
+    const { event: t2 } = e2, n2 = X2(t2.target);
+    super(e2, st, n2);
+  }
+}
+ct.activators = [{ eventName: "onPointerDown", handler: (e2, t2) => {
+  let { nativeEvent: n2 } = e2, { onActivation: r2 } = t2;
+  return !(!n2.isPrimary || n2.button !== 0) && (r2 == null || r2({ event: n2 }), true);
+} }];
+var dt = { move: { name: "mousemove" }, end: { name: "mouseup" } };
+var ut;
+var pt;
+(pt = ut || (ut = {}))[pt.RightClick = 2] = "RightClick";
+(class extends lt {
+  constructor(e2) {
+    super(e2, dt, X2(e2.event.target));
+  }
+}).activators = [{ eventName: "onMouseDown", handler: (e2, t2) => {
+  let { nativeEvent: n2 } = e2, { onActivation: r2 } = t2;
+  return n2.button !== ut.RightClick && (r2 == null || r2({ event: n2 }), true);
+} }];
+var ht = { cancel: { name: "touchcancel" }, move: { name: "touchmove" }, end: { name: "touchend" } };
+var mt;
+var ft;
+var gt;
+var vt;
+(class extends lt {
+  constructor(e2) {
+    super(e2, ht);
+  }
+  static setup() {
+    return window.addEventListener(ht.move.name, e2, { capture: false, passive: false }), function() {
+      window.removeEventListener(ht.move.name, e2);
+    };
+    function e2() {}
+  }
+}).activators = [{ eventName: "onTouchStart", handler: (e2, t2) => {
+  let { nativeEvent: n2 } = e2, { onActivation: r2 } = t2;
+  const { touches: o2 } = n2;
+  return !(o2.length > 1) && (r2 == null || r2({ event: n2 }), true);
+} }], (ft = mt || (mt = {}))[ft.Pointer = 0] = "Pointer", ft[ft.DraggableRect = 1] = "DraggableRect", (vt = gt || (gt = {}))[vt.TreeOrder = 0] = "TreeOrder", vt[vt.ReversedTreeOrder = 1] = "ReversedTreeOrder";
+var yt = { x: { [Oe.Backward]: false, [Oe.Forward]: false }, y: { [Oe.Backward]: false, [Oe.Forward]: false } };
+var wt;
+var xt;
+var Ct;
+(xt = wt || (wt = {}))[xt.Always = 0] = "Always", xt[xt.BeforeDragging = 1] = "BeforeDragging", xt[xt.WhileDragging = 2] = "WhileDragging", (Ct || (Ct = {})).Optimized = "optimized";
+var Ft = { draggable: { measure: Ae }, droppable: { measure: Ae, strategy: wt.WhileDragging, frequency: Ct.Optimized }, dragOverlay: { measure: Te } };
+var jt = /* @__PURE__ */ s({ ...be, scaleX: 1, scaleY: 1 });
+var Kt;
+var Ut;
+(Ut = Kt || (Kt = {}))[Ut.Uninitialized = 0] = "Uninitialized", Ut[Ut.Initializing = 1] = "Initializing", Ut[Ut.Initialized = 2] = "Initialized";
+
+// src/panels/TabbedTerminalPanel.tsx
 import { Terminal as TerminalIcon2, Lock as Lock2, Unlock as Unlock2, Box, Boxes } from "lucide-react";
-import React2, {
-  useState as useState4,
-  useCallback as useCallback3,
-  useEffect as useEffect4,
-  useRef as useRef3
+import React3, {
+  useState as useState5,
+  useCallback as useCallback4,
+  useEffect as useEffect5,
+  useRef as useRef4
 } from "react";
 import { jsx as jsx7, jsxs as jsxs6, Fragment as Fragment2 } from "react/jsx-runtime";
 var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs6("div", {
   style: { display: "flex", gap: 1, alignItems: "center", height: 12 },
   children: [
-    [0, 1, 2, 3, 4].map((i) => /* @__PURE__ */ jsx7("div", {
+    [0, 1, 2, 3, 4].map((i2) => /* @__PURE__ */ jsx7("div", {
       style: {
         width: 2,
         height: 10,
@@ -1801,9 +4503,9 @@ var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs6("div",
         borderRadius: 1,
         transformOrigin: "center",
         transform: isAnimating ? undefined : "scaleY(0.4)",
-        animation: isAnimating ? `waveSine 1.2s ease-in-out ${i * 0.1}s infinite` : "none"
+        animation: isAnimating ? `waveSine 1.2s ease-in-out ${i2 * 0.1}s infinite` : "none"
       }
-    }, i)),
+    }, i2)),
     /* @__PURE__ */ jsx7("style", {
       children: `
         @keyframes waveSine {
@@ -1814,23 +4516,23 @@ var ActivityIndicator = ({ color, isAnimating }) => /* @__PURE__ */ jsxs6("div",
     })
   ]
 });
-function TerminalTabContentInner(props, ref) {
-  const { tab, sessionId, isActive, isVisible, actions, events, terminalContext, onSessionCreated, onScrollPositionChange, isForeign = false, defaultScrollLocked, activityDetection = true, activityTimeout = 500, autoShowBlinds = false, onActivityStateChange } = props;
+function TerminalTabContentInner(props2, ref) {
+  const { tab, sessionId, isActive, isVisible, actions, events, terminalContext, onSessionCreated, onScrollPositionChange, isForeign = false, defaultScrollLocked, activityDetection = true, activityTimeout = 500, autoShowBlinds = false, onActivityStateChange } = props2;
   const { theme } = useTheme6();
   console.log("[TerminalTabContent] RENDER", { tabId: tab.id, isActive, sessionId });
-  const terminalRef = useRef3(null);
-  const [localSessionId, setLocalSessionId] = useState4(sessionId);
-  const [isInitialized, setIsInitialized] = useState4(false);
-  const hasInitializedRef = useRef3(false);
-  const [scrollPosition, setScrollPosition] = useState4({
+  const terminalRef = useRef4(null);
+  const [localSessionId, setLocalSessionId] = useState5(sessionId);
+  const [isInitialized, setIsInitialized] = useState5(false);
+  const hasInitializedRef = useRef4(false);
+  const [scrollPosition, setScrollPosition] = useState5({
     isAtTop: false,
     isAtBottom: true,
     isScrollLocked: false
   });
-  const [shouldRenderTerminal, setShouldRenderTerminal] = useState4(true);
-  const [ownerWindowId, setOwnerWindowId] = useState4(null);
-  const needsRefreshOnResizeRef = useRef3(false);
-  const claimAndConnect = useCallback3(async (targetSessionId, force = false) => {
+  const [shouldRenderTerminal, setShouldRenderTerminal] = useState5(true);
+  const [ownerWindowId, setOwnerWindowId] = useState5(null);
+  const needsRefreshOnResizeRef = useRef4(false);
+  const claimAndConnect = useCallback4(async (targetSessionId, force = false) => {
     try {
       if (actions.claimTerminalOwnership) {
         await actions.claimTerminalOwnership(targetSessionId, force);
@@ -1848,7 +4550,7 @@ function TerminalTabContentInner(props, ref) {
       throw error;
     }
   }, [actions]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (hasInitializedRef.current) {
       return;
     }
@@ -1920,7 +4622,7 @@ function TerminalTabContentInner(props, ref) {
       mounted = false;
     };
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!localSessionId || !isInitialized || !shouldRenderTerminal) {
       return;
     }
@@ -1938,17 +4640,17 @@ function TerminalTabContentInner(props, ref) {
       unsubscribe();
     };
   }, [localSessionId, isInitialized, actions, shouldRenderTerminal, tab.id]);
-  const handleData = useCallback3((data) => {
+  const handleData = useCallback4((data) => {
     if (localSessionId && actions.writeToTerminal) {
       actions.writeToTerminal(localSessionId, data);
     }
   }, [localSessionId, actions]);
-  const handleResize = useCallback3((cols, rows) => {
+  const handleResize = useCallback4((cols, rows) => {
     if (localSessionId && actions.resizeTerminal) {
       actions.resizeTerminal(localSessionId, cols, rows);
     }
   }, [localSessionId, actions]);
-  const handleReady = useCallback3((cols, rows) => {
+  const handleReady = useCallback4((cols, rows) => {
     if (localSessionId && actions.resizeTerminal) {
       const shouldForce = needsRefreshOnResizeRef.current;
       if (shouldForce) {
@@ -1957,7 +4659,7 @@ function TerminalTabContentInner(props, ref) {
       actions.resizeTerminal(localSessionId, cols, rows, shouldForce);
     }
   }, [localSessionId, actions]);
-  const handleLinkClick = useCallback3((url, modifiers) => {
+  const handleLinkClick = useCallback4((url, modifiers) => {
     if (localSessionId) {
       events.emit({
         type: "terminal:link-click",
@@ -1974,7 +4676,7 @@ function TerminalTabContentInner(props, ref) {
       });
     }
   }, [localSessionId, events]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!localSessionId || !actions.onOwnershipLost) {
       return;
     }
@@ -1988,17 +4690,17 @@ function TerminalTabContentInner(props, ref) {
       unsubscribe();
     };
   }, [localSessionId, actions]);
-  const handleTakeControl = useCallback3(async () => {
+  const handleTakeControl = useCallback4(async () => {
     if (!localSessionId) {
       return;
     }
     await claimAndConnect(localSessionId, true);
   }, [localSessionId, claimAndConnect]);
-  const handleScrollPositionChange = useCallback3((position) => {
+  const handleScrollPositionChange = useCallback4((position) => {
     setScrollPosition(position);
     onScrollPositionChange?.(tab.id, position);
   }, [tab.id, onScrollPositionChange]);
-  const handleShortcut = useCallback3((shortcutEvent) => {
+  const handleShortcut = useCallback4((shortcutEvent) => {
     if (localSessionId) {
       events.emit({
         type: "terminal:shortcut",
@@ -2011,7 +4713,7 @@ function TerminalTabContentInner(props, ref) {
       });
     }
   }, [localSessionId, events]);
-  const handleActivityChange = useCallback3((state) => {
+  const handleActivityChange = useCallback4((state) => {
     if (localSessionId) {
       onActivityStateChange?.(localSessionId, state.isActive);
       events.emit({
@@ -2026,10 +4728,10 @@ function TerminalTabContentInner(props, ref) {
       });
     }
   }, [localSessionId, events, onActivityStateChange]);
-  const handleScrollToBottom = useCallback3(() => {
+  const handleScrollToBottom = useCallback4(() => {
     terminalRef.current?.scrollToBottom();
   }, []);
-  const handleToggleScrollLock = useCallback3(() => {
+  const handleToggleScrollLock = useCallback4(() => {
     if (scrollPosition.isScrollLocked) {
       const terminal = terminalRef.current?.getTerminal();
       if (terminal) {
@@ -2039,7 +4741,7 @@ function TerminalTabContentInner(props, ref) {
       terminalRef.current?.scrollToBottom();
     }
   }, [scrollPosition.isScrollLocked]);
-  React2.useImperativeHandle(ref, () => ({
+  React3.useImperativeHandle(ref, () => ({
     scrollToBottom: handleScrollToBottom,
     toggleScrollLock: handleToggleScrollLock
   }), [handleScrollToBottom, handleToggleScrollLock]);
@@ -2142,8 +4844,8 @@ var areTerminalTabContentPropsEqual = (prevProps, nextProps) => {
   }
   return changes.length === 0;
 };
-var TerminalTabContentForwarded = React2.forwardRef(TerminalTabContentInner);
-var TerminalTabContent = React2.memo(TerminalTabContentForwarded, areTerminalTabContentPropsEqual);
+var TerminalTabContentForwarded = React3.forwardRef(TerminalTabContentInner);
+var TerminalTabContent = React3.memo(TerminalTabContentForwarded, areTerminalTabContentPropsEqual);
 TerminalTabContent.displayName = "TerminalTabContent";
 var TabbedTerminalPanelInner = ({
   context: _context,
@@ -2170,16 +4872,21 @@ var TabbedTerminalPanelInner = ({
   workingStates,
   activityDetection = true,
   activityTimeout = 500,
-  autoShowBlinds = false
+  autoShowBlinds = false,
+  associations,
+  onAssociationCollapsedChange,
+  onAssociationRatioChange,
+  renderAssociatedContent,
+  getAssociatedHeader
 }) => {
   console.log("[TabbedTerminalPanel] RENDER", { terminalContext, directory, width });
   const { theme } = useTheme6();
-  const [ownedTabs, setOwnedTabs] = useState4(initialTabs);
-  const [foreignTabs, setForeignTabs] = useState4([]);
-  const [internalActiveTabId, setInternalActiveTabId] = useState4(null);
+  const [ownedTabs, setOwnedTabs] = useState5(initialTabs);
+  const [foreignTabs, setForeignTabs] = useState5([]);
+  const [internalActiveTabId, setInternalActiveTabId] = useState5(null);
   const isControlled = activeTabIdProp !== undefined;
   const activeTabId = isControlled ? activeTabIdProp : internalActiveTabId;
-  const setActiveTabId = React2.useCallback((tabId) => {
+  const setActiveTabId = React3.useCallback((tabId) => {
     if (isControlled) {
       onActiveTabChange?.(tabId);
     } else {
@@ -2187,18 +4894,18 @@ var TabbedTerminalPanelInner = ({
       onActiveTabChange?.(tabId);
     }
   }, [isControlled, onActiveTabChange]);
-  const [sessionIds, setSessionIds] = useState4(new Map);
-  const [scrollPositions, setScrollPositions] = useState4(new Map);
-  const [activityStates, setActivityStates] = useState4(new Map);
-  const customTabsKey = React2.useMemo(() => {
+  const [sessionIds, setSessionIds] = useState5(new Map);
+  const [scrollPositions, setScrollPositions] = useState5(new Map);
+  const [activityStates, setActivityStates] = useState5(new Map);
+  const customTabsKey = React3.useMemo(() => {
     const customTabs = initialTabs.filter((tab) => tab.contentType !== "terminal");
     return JSON.stringify(customTabs);
   }, [initialTabs]);
-  useEffect4(() => {
+  useEffect5(() => {
     const customTabsFromProp = initialTabs.filter((tab) => tab.contentType !== "terminal");
     setOwnedTabs((prevTabs) => {
       const existingTerminalTabs = prevTabs.filter((tab) => tab.contentType === "terminal");
-      const customTabIds = new Set(customTabsFromProp.map((t) => t.id));
+      const customTabIds = new Set(customTabsFromProp.map((t2) => t2.id));
       const existingCustomTabs = prevTabs.filter((tab) => tab.contentType !== "terminal" && !customTabIds.has(tab.id));
       const mergedTabs = [
         ...existingTerminalTabs,
@@ -2207,7 +4914,7 @@ var TabbedTerminalPanelInner = ({
       ];
       const prevCustomTabs = prevTabs.filter((tab) => tab.contentType !== "terminal");
       const customTabsChanged = prevCustomTabs.length !== customTabsFromProp.length || !customTabsFromProp.every((tab) => {
-        const prev = prevCustomTabs.find((p) => p.id === tab.id);
+        const prev = prevCustomTabs.find((p2) => p2.id === tab.id);
         if (!prev)
           return false;
         return JSON.stringify(tab) === JSON.stringify(prev);
@@ -2218,7 +4925,7 @@ var TabbedTerminalPanelInner = ({
       return mergedTabs;
     });
   }, [customTabsKey]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!requestFocusTabId) {
       return;
     }
@@ -2233,21 +4940,21 @@ var TabbedTerminalPanelInner = ({
       onFocusTabHandled?.();
     }
   }, [requestFocusTabId, ownedTabs, foreignTabs, setActiveTabId, onFocusTabHandled, activeTabId]);
-  const getOwnedTabLabel = useCallback3((index, _directory) => {
+  const getOwnedTabLabel = useCallback4((index, _directory) => {
     if (tabLabelPrefix) {
       return `${tabLabelPrefix} ${index + 1}`;
     }
     return `⌘ ${index + 1}`;
   }, [tabLabelPrefix]);
-  const tabs = React2.useMemo(() => {
+  const tabs = React3.useMemo(() => {
     const labeledOwnedTabs = ownedTabs.map((tab, index) => ({
       ...tab,
       label: tab.contentType === "terminal" ? getOwnedTabLabel(index, tab.directory) : tab.label
     }));
-    const sortedForeignTabs = [...foreignTabs].sort((a, b) => a.label.localeCompare(b.label));
+    const sortedForeignTabs = [...foreignTabs].sort((a2, b) => a2.label.localeCompare(b.label));
     return [...labeledOwnedTabs, ...sortedForeignTabs];
   }, [ownedTabs, foreignTabs, getOwnedTabLabel]);
-  const genericTabs = React2.useMemo(() => {
+  const genericTabs = React3.useMemo(() => {
     return tabs.map((tab) => ({
       id: tab.id,
       label: tab.label,
@@ -2259,9 +4966,9 @@ var TabbedTerminalPanelInner = ({
       }
     }));
   }, [tabs]);
-  const tabRefsMap = useRef3(new Map);
-  const refCallbacksMap = useRef3(new Map);
-  const getRefCallback = useCallback3((tabId) => {
+  const tabRefsMap = useRef4(new Map);
+  const refCallbacksMap = useRef4(new Map);
+  const getRefCallback = useCallback4((tabId) => {
     let callback = refCallbacksMap.current.get(tabId);
     if (!callback) {
       callback = (ref) => {
@@ -2275,10 +4982,10 @@ var TabbedTerminalPanelInner = ({
     }
     return callback;
   }, []);
-  const hasInitializedRef = useRef3(false);
-  const isCreatingTabRef = useRef3(false);
-  const headerRef = useRef3(null);
-  const handleTabScrollPositionChange = useCallback3((tabId, position) => {
+  const hasInitializedRef = useRef4(false);
+  const isCreatingTabRef = useRef4(false);
+  const headerRef = useRef4(null);
+  const handleTabScrollPositionChange = useCallback4((tabId, position) => {
     setScrollPositions((prev) => new Map(prev).set(tabId, position));
   }, []);
   const defaultScrollPosition = {
@@ -2286,12 +4993,12 @@ var TabbedTerminalPanelInner = ({
     isAtBottom: true,
     isScrollLocked: false
   };
-  const handleToggleScrollLock = useCallback3(() => {
+  const handleToggleScrollLock = useCallback4(() => {
     if (activeTabId) {
       tabRefsMap.current.get(activeTabId)?.toggleScrollLock();
     }
   }, [activeTabId]);
-  const restoreOwnedSessions = useCallback3(async () => {
+  const restoreOwnedSessions = useCallback4(async () => {
     try {
       let sessions = [];
       if (actions.listTerminalSessions) {
@@ -2326,7 +5033,7 @@ var TabbedTerminalPanelInner = ({
       console.error("[TabbedTerminalPanel] Failed to restore owned sessions:", err);
     }
   }, [terminalContext, initialTabs, onTabsChange, actions, directory]);
-  const fetchForeignSessions = useCallback3(async () => {
+  const fetchForeignSessions = useCallback4(async () => {
     try {
       if (!actions.listTerminalSessions) {
         return;
@@ -2358,9 +5065,9 @@ var TabbedTerminalPanelInner = ({
       console.error("[TabbedTerminalPanel] Failed to fetch foreign sessions:", err);
     }
   }, [terminalContext, actions]);
-  const clearForeignTabs = useCallback3(() => {
+  const clearForeignTabs = useCallback4(() => {
     setForeignTabs((prevForeign) => {
-      const foreignTabIds = new Set(prevForeign.map((t) => t.id));
+      const foreignTabIds = new Set(prevForeign.map((t2) => t2.id));
       setSessionIds((prev) => {
         const updated = new Map(prev);
         foreignTabIds.forEach((id) => updated.delete(id));
@@ -2369,13 +5076,13 @@ var TabbedTerminalPanelInner = ({
       return [];
     });
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (hasInitializedRef.current)
       return;
     hasInitializedRef.current = true;
     restoreOwnedSessions();
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     const handleSessionCreated2 = (event) => {
       const customEvent = event;
       const { context: context2 } = customEvent.detail || {};
@@ -2389,17 +5096,17 @@ var TabbedTerminalPanelInner = ({
       window.removeEventListener("terminal-session-created", handleSessionCreated2);
     };
   }, [terminalContext, restoreOwnedSessions]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (showAllTerminals) {
       fetchForeignSessions();
     } else {
       clearForeignTabs();
     }
   }, [showAllTerminals, fetchForeignSessions, clearForeignTabs]);
-  const switchTab = useCallback3((tabId) => {
+  const switchTab = useCallback4((tabId) => {
     setActiveTabId(tabId);
   }, [setActiveTabId]);
-  const addNewTab = useCallback3((label, command, targetDirectory) => {
+  const addNewTab = useCallback4((label, command, targetDirectory) => {
     const targetDir = targetDirectory || directory;
     const directoryName = targetDir.split("/").pop() || targetDir;
     const newTab = {
@@ -2417,10 +5124,10 @@ var TabbedTerminalPanelInner = ({
     });
     setActiveTabId(newTab.id);
   }, [directory, onTabsChange]);
-  const isForeignTab = useCallback3((tabId) => {
+  const isForeignTab = useCallback4((tabId) => {
     return tabId.startsWith("tab-foreign-");
   }, []);
-  const closeTab = useCallback3(async (tabId) => {
+  const closeTab = useCallback4(async (tabId) => {
     const sessionId = sessionIds.get(tabId);
     const isForeign = isForeignTab(tabId);
     if (!isForeign && sessionId && actions.destroyTerminalSession) {
@@ -2462,7 +5169,7 @@ var TabbedTerminalPanelInner = ({
       return newMap;
     });
     const findNextActiveTab = (allTabs) => {
-      const remaining = allTabs.filter((t) => t.id !== tabId);
+      const remaining = allTabs.filter((t2) => t2.id !== tabId);
       if (activeTabId === tabId && remaining.length > 0) {
         const newActive = remaining[remaining.length - 1];
         return newActive.id;
@@ -2471,7 +5178,7 @@ var TabbedTerminalPanelInner = ({
     };
     if (isForeign) {
       setForeignTabs((prevTabs) => {
-        const newTabs = prevTabs.filter((t) => t.id !== tabId);
+        const newTabs = prevTabs.filter((t2) => t2.id !== tabId);
         const nextActiveId = findNextActiveTab([...ownedTabs, ...newTabs]);
         if (nextActiveId !== activeTabId) {
           setActiveTabId(nextActiveId);
@@ -2480,7 +5187,7 @@ var TabbedTerminalPanelInner = ({
       });
     } else {
       setOwnedTabs((prevTabs) => {
-        const newTabs = prevTabs.filter((t) => t.id !== tabId);
+        const newTabs = prevTabs.filter((t2) => t2.id !== tabId);
         const nextActiveId = findNextActiveTab([...newTabs, ...foreignTabs]);
         if (nextActiveId !== activeTabId) {
           setActiveTabId(nextActiveId);
@@ -2490,10 +5197,10 @@ var TabbedTerminalPanelInner = ({
       });
     }
   }, [activeTabId, sessionIds, actions, onTabsChange, isForeignTab, ownedTabs, foreignTabs]);
-  const handleSessionCreated = useCallback3((tabId, sessionId) => {
+  const handleSessionCreated = useCallback4((tabId, sessionId) => {
     setSessionIds((prev) => new Map(prev).set(tabId, sessionId));
   }, []);
-  const handleActivityStateChange = useCallback3((sessionId, isActive) => {
+  const handleActivityStateChange = useCallback4((sessionId, isActive) => {
     setActivityStates((prev) => {
       const next = new Map(prev);
       if (isActive) {
@@ -2524,7 +5231,7 @@ var TabbedTerminalPanelInner = ({
       }
     }
   });
-  const renderTabAccessory = useCallback3((tab) => {
+  const renderTabAccessory = useCallback4((tab) => {
     const tabSessionId = sessionIds.get(tab.id);
     const hasExternalWorkingState = tabSessionId ? workingStates?.[tabSessionId]?.isWorking : false;
     const hasInternalActivity = tabSessionId ? activityStates.get(tabSessionId) : false;
@@ -2536,8 +5243,8 @@ var TabbedTerminalPanelInner = ({
     return /* @__PURE__ */ jsxs6(Fragment2, {
       children: [
         /* @__PURE__ */ jsx7("button", {
-          onClick: (e) => {
-            e.stopPropagation();
+          onClick: (e2) => {
+            e2.stopPropagation();
             handleToggleScrollLock();
           },
           style: {
@@ -2553,11 +5260,11 @@ var TabbedTerminalPanelInner = ({
             color: scrollPosition.isScrollLocked ? theme.colors.success : theme.colors.warning,
             padding: 0
           },
-          onMouseEnter: (e) => {
-            e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
+          onMouseEnter: (e2) => {
+            e2.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
           },
-          onMouseLeave: (e) => {
-            e.currentTarget.style.backgroundColor = "transparent";
+          onMouseLeave: (e2) => {
+            e2.currentTarget.style.backgroundColor = "transparent";
           },
           title: scrollPosition.isScrollLocked ? "Scroll locked" : "Scroll unlocked",
           children: scrollPosition.isScrollLocked ? /* @__PURE__ */ jsx7(Lock2, {
@@ -2585,6 +5292,56 @@ var TabbedTerminalPanelInner = ({
       ]
     });
   }, [activeTabId, scrollPositions, defaultScrollPosition, handleToggleScrollLock, theme, sessionIds, workingStates, activityStates]);
+  const renderTerminalWithAssociation = useCallback4((tab, isActive, sessionId, association) => {
+    const terminalContent = /* @__PURE__ */ jsx7(TerminalTabContent, {
+      ref: getRefCallback(tab.id),
+      tab,
+      sessionId,
+      isActive,
+      isVisible,
+      actions,
+      events,
+      terminalContext,
+      onSessionCreated: handleSessionCreated,
+      onScrollPositionChange: handleTabScrollPositionChange,
+      isForeign: tab.id.startsWith("tab-foreign-"),
+      defaultScrollLocked,
+      activityDetection,
+      activityTimeout,
+      autoShowBlinds,
+      onActivityStateChange: handleActivityStateChange
+    }, `terminal-${tab.id}`);
+    const secondaryContent = association && renderAssociatedContent ? renderAssociatedContent(association.associatedTabId, isActive) : undefined;
+    const headerConfig = association && getAssociatedHeader ? getAssociatedHeader(association.associatedTabId) : undefined;
+    return /* @__PURE__ */ jsx7(D, {
+      primaryContent: terminalContent,
+      secondaryContent,
+      collapsedHeader: headerConfig,
+      collapsed: association?.collapsed,
+      onCollapsedChange: association ? (collapsed) => onAssociationCollapsedChange?.(tab.id, collapsed) : undefined,
+      ratio: association?.ratio,
+      onRatioChange: association ? (ratio) => onAssociationRatioChange?.(tab.id, ratio) : undefined,
+      theme
+    });
+  }, [
+    getRefCallback,
+    isVisible,
+    actions,
+    events,
+    terminalContext,
+    handleSessionCreated,
+    handleTabScrollPositionChange,
+    defaultScrollLocked,
+    activityDetection,
+    activityTimeout,
+    autoShowBlinds,
+    handleActivityStateChange,
+    renderAssociatedContent,
+    getAssociatedHeader,
+    onAssociationCollapsedChange,
+    onAssociationRatioChange,
+    theme
+  ]);
   return /* @__PURE__ */ jsxs6("div", {
     style: {
       display: "flex",
@@ -2615,14 +5372,14 @@ var TabbedTerminalPanelInner = ({
               cursor: "pointer",
               color: showAllTerminals ? theme.colors.primary : theme.colors.textSecondary
             },
-            onMouseEnter: (e) => {
+            onMouseEnter: (e2) => {
               if (!showAllTerminals) {
-                e.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
+                e2.currentTarget.style.backgroundColor = theme.colors.backgroundTertiary;
               }
             },
-            onMouseLeave: (e) => {
+            onMouseLeave: (e2) => {
               if (!showAllTerminals) {
-                e.currentTarget.style.backgroundColor = "transparent";
+                e2.currentTarget.style.backgroundColor = "transparent";
               }
             },
             title: showAllTerminals ? "Showing all terminals (click to filter by context)" : "Show all terminals",
@@ -2654,23 +5411,15 @@ var TabbedTerminalPanelInner = ({
             if (renderTabContent) {
               const customContent = renderTabContent(tab, isActive, sessionId, width);
               if (customContent === null && tab.contentType === "terminal") {
-                return /* @__PURE__ */ jsx7(TerminalTabContent, {
-                  ref: getRefCallback(tab.id),
-                  tab,
-                  sessionId,
-                  isActive,
-                  isVisible,
-                  actions,
-                  events,
-                  terminalContext,
-                  onSessionCreated: handleSessionCreated,
-                  onScrollPositionChange: handleTabScrollPositionChange,
-                  isForeign: tab.id.startsWith("tab-foreign-"),
-                  defaultScrollLocked,
-                  activityDetection,
-                  activityTimeout,
-                  autoShowBlinds,
-                  onActivityStateChange: handleActivityStateChange
+                const association = associations?.[tab.id];
+                return /* @__PURE__ */ jsx7("div", {
+                  style: {
+                    display: isActive ? "flex" : "none",
+                    flexDirection: "column",
+                    height: "100%",
+                    width: "100%"
+                  },
+                  children: renderTerminalWithAssociation(tab, isActive, sessionId, association)
                 }, tab.id);
               }
               return /* @__PURE__ */ jsx7("div", {
@@ -2684,23 +5433,15 @@ var TabbedTerminalPanelInner = ({
               }, tab.id);
             }
             if (tab.contentType === "terminal") {
-              return /* @__PURE__ */ jsx7(TerminalTabContent, {
-                ref: getRefCallback(tab.id),
-                tab,
-                sessionId,
-                isActive,
-                isVisible,
-                actions,
-                events,
-                terminalContext,
-                onSessionCreated: handleSessionCreated,
-                onScrollPositionChange: handleTabScrollPositionChange,
-                isForeign: tab.id.startsWith("tab-foreign-"),
-                defaultScrollLocked,
-                activityDetection,
-                activityTimeout,
-                autoShowBlinds,
-                onActivityStateChange: handleActivityStateChange
+              const association = associations?.[tab.id];
+              return /* @__PURE__ */ jsx7("div", {
+                style: {
+                  display: isActive ? "flex" : "none",
+                  flexDirection: "column",
+                  height: "100%",
+                  width: "100%"
+                },
+                children: renderTerminalWithAssociation(tab, isActive, sessionId, association)
               }, tab.id);
             }
             return /* @__PURE__ */ jsxs6("div", {
@@ -2739,10 +5480,6 @@ var TabbedTerminalPanelInner = ({
                 size: 32,
                 style: { opacity: 0.5, marginBottom: "16px" }
               }),
-              /* @__PURE__ */ jsx7("p", {
-                style: { fontFamily: theme.fonts.body, fontSize: theme.fontSizes[1] },
-                children: "No terminal sessions"
-              }),
               /* @__PURE__ */ jsx7("button", {
                 onClick: () => addNewTab(),
                 style: {
@@ -2766,7 +5503,7 @@ var TabbedTerminalPanelInner = ({
   });
 };
 TabbedTerminalPanelInner.displayName = "TabbedTerminalPanelInner";
-var TabbedTerminalPanelMemoized = React2.memo(TabbedTerminalPanelInner, (prevProps, nextProps) => {
+var TabbedTerminalPanelMemoized = React3.memo(TabbedTerminalPanelInner, (prevProps, nextProps) => {
   const changes = [];
   if (prevProps.terminalContext !== nextProps.terminalContext)
     changes.push("terminalContext");
@@ -2808,6 +5545,12 @@ var TabbedTerminalPanelMemoized = React2.memo(TabbedTerminalPanelInner, (prevPro
     changes.push("activityTimeout");
   if (prevProps.autoShowBlinds !== nextProps.autoShowBlinds)
     changes.push("autoShowBlinds");
+  if (prevProps.associations !== nextProps.associations)
+    changes.push("associations");
+  if (prevProps.renderAssociatedContent !== nextProps.renderAssociatedContent)
+    changes.push("renderAssociatedContent");
+  if (prevProps.getAssociatedHeader !== nextProps.getAssociatedHeader)
+    changes.push("getAssociatedHeader");
   const ignoredChanges = [];
   if (prevProps.context !== nextProps.context)
     ignoredChanges.push("context");