@adecore/ui 0.31.11 → 0.32.0

package/dist/workspace/SplitView.js

@@ -1,468 +1,1052 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { GripVertical, Maximize2, Minimize2 } from 'lucide-react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { IconButton } from '../IconButton.js';
+import { IconButton } from "../IconButton.js";
 import { WorkspaceContext } from './context.js';
 import { paneRadius, resizeSplit, splitGeometry, splitSideAt, tabGapAt } from './geometry.js';
 import { splitPanes, updateSplitLayout } from './model.js';
-import { TabStrip } from './TabStrip.js';
-import { DropPreview } from './DropPreview.js';
+import { TabStrip } from "./TabStrip.js";
+import { DropPreview } from "./DropPreview.js";
 import { rectDropPreview, sameDropPreview, tabDropPreview } from './preview.js';
-const ZERO = { width: 0, height: 0, left: 0, top: 0, scaleX: 1, scaleY: 1 };
-const MINIMUM = { width: 120, height: 80 };
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ZERO = {
+  width: 0,
+  height: 0,
+  left: 0,
+  top: 0,
+  scaleX: 1,
+  scaleY: 1
+};
+const MINIMUM = {
+  width: 120,
+  height: 80
+};
 /* The pane's section or header under `container`, found by its data attribute rather than a selector, so no id needs escaping. */
 function paneElement(container, attribute, paneId) {
-    const selector = attribute === 'splitPane' ? '[data-split-pane]' : '[data-split-header]';
-    return Array.from(container?.querySelectorAll(selector) ?? []).find((element) => element.dataset[attribute] === paneId);
+  const selector = attribute === 'splitPane' ? '[data-split-pane]' : '[data-split-header]';
+  return Array.from(container?.querySelectorAll(selector) ?? []).find(element => element.dataset[attribute] === paneId);
 }
-function Divider({ divider, minimumResizeShare, onResize, onEqualize }) {
-    const { t } = useTranslation('ui');
-    const cleanup = useRef(null);
-    useEffect(() => () => cleanup.current?.(), []);
-    const horizontal = divider.axis === 'horizontal';
-    const before = divider.lengths.slice(0, divider.index + 1).reduce((sum, value) => sum + value, 0);
-    const total = divider.lengths.reduce((sum, value) => sum + value, 0);
-    const position = total ? Math.round((before / total) * 100) : 0;
-    const limit = (delta) => resizeSplit(divider, delta, false, 0, minimumResizeShare)
-        .slice(0, divider.index + 1)
-        .reduce((sum, size) => sum + size, 0) * 100;
-    return (_jsx("div", { role: "separator", tabIndex: 0, "aria-label": t('workspace.resize'), "aria-orientation": horizontal ? 'vertical' : 'horizontal', "aria-valuenow": position, "aria-valuemin": total ? Math.floor(limit(-total)) : 0, "aria-valuemax": total ? Math.ceil(limit(total)) : 100, className: "ade-split-divider", style: { left: divider.x, top: divider.y, width: divider.width, height: divider.height }, onDoubleClick: (event) => onEqualize(event.altKey), onKeyDown: (event) => {
-            const negative = horizontal ? 'ArrowLeft' : 'ArrowUp';
-            const positive = horizontal ? 'ArrowRight' : 'ArrowDown';
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                onEqualize(event.altKey);
-            }
-            else if ([negative, positive, 'Home', 'End'].includes(event.key)) {
-                event.preventDefault();
-                const delta = event.key === 'Home' ? -total : event.key === 'End' ? total : (event.key === negative ? -1 : 1) * (event.shiftKey ? 50 : 10);
-                onResize(resizeSplit(divider, delta, event.altKey, 0, minimumResizeShare));
-            }
-        }, onPointerDown: (event) => {
-            if (event.button !== 0) {
-                return;
-            }
-            event.preventDefault();
-            cleanup.current?.();
-            const element = event.currentTarget;
-            const view = element.ownerDocument.defaultView;
-            const pointerId = event.pointerId;
-            const start = horizontal ? event.clientX : event.clientY;
-            const parent = element.parentElement;
-            const rect = parent?.getBoundingClientRect();
-            const scale = horizontal ? (rect?.width ?? 1) / (parent?.clientWidth || 1) : (rect?.height ?? 1) / (parent?.clientHeight || 1);
-            element.dataset.resizing = '';
-            element.focus();
-            // A pointer reports more often than the screen draws; one resize per frame is all that shows.
-            let frame = 0;
-            let pending = null;
-            const apply = () => {
-                frame = 0;
-                const next = pending;
-                pending = null;
-                if (next) {
-                    const delta = ((horizontal ? next.clientX : next.clientY) - start) / (scale || 1);
-                    onResize(resizeSplit(divider, delta, next.altKey, 8 / (scale || 1), minimumResizeShare));
-                }
-            };
-            const move = (next) => {
-                if (next.pointerId !== pointerId) {
-                    return;
-                }
-                pending = next;
-                if (frame !== 0) {
-                    return;
-                }
-                if (view) {
-                    frame = view.requestAnimationFrame(apply);
-                }
-                else {
-                    apply();
-                }
-            };
-            const release = () => {
-                if (frame !== 0) {
-                    view?.cancelAnimationFrame(frame);
-                    apply();
-                }
-                end();
-            };
-            const end = () => {
-                if (frame !== 0) {
-                    view?.cancelAnimationFrame(frame);
-                    frame = 0;
-                }
-                element.removeEventListener('pointermove', move);
-                element.removeEventListener('pointerup', release);
-                element.removeEventListener('pointercancel', end);
-                element.removeEventListener('lostpointercapture', end);
-                element.ownerDocument.defaultView?.removeEventListener('blur', end);
-                delete element.dataset.resizing;
-                if (element.hasPointerCapture(pointerId)) {
-                    element.releasePointerCapture(pointerId);
-                }
-                cleanup.current = null;
-            };
-            cleanup.current = end;
-            element.setPointerCapture(pointerId);
-            element.addEventListener('pointermove', move);
-            element.addEventListener('pointerup', release);
-            element.addEventListener('pointercancel', end);
-            element.addEventListener('lostpointercapture', end);
-            element.ownerDocument.defaultView?.addEventListener('blur', end);
-        }, children: _jsx("span", {}) }));
-}
-export function SplitView({ value, onValueChange, renderView, getTab, renderPaneHeader, onClose, onTabDoubleClick, onTabContextMenu, onViewDragStart, canDrop, canDropExternal, onExternalDrop, onViewBoundsChange, minimumSize = MINIMUM, minimumResizeShare = 0, layout: ownLayout, flushEdges, showTabs = true, headerHeight = 36, render, ref, className, style, ...props }) {
-    const { t } = useTranslation('ui');
-    const inherited = useContext(WorkspaceContext);
-    const layout = ownLayout ?? inherited.layout;
-    const edges = flushEdges ?? inherited.edges;
-    const root = useRef(null);
-    const prefix = useId();
-    const serial = useRef(0);
-    const lastFocus = useRef(null);
-    useEffect(() => {
-        const previous = lastFocus.current;
-        const element = root.current;
-        const active = element?.ownerDocument.activeElement;
-        if (previous &&
-            element &&
-            (!previous.isConnected || previous.closest('[hidden]')) &&
-            (!active || active === element.ownerDocument.body || active === previous)) {
-            const pane = paneElement(element, 'splitPane', value.focused);
-            const target = pane?.querySelector('[role="tab"][aria-selected="true"]') ?? pane;
-            target?.focus({ preventScroll: true });
+function Divider(t0) {
+  const $ = _c(55);
+  const {
+    divider,
+    minimumResizeShare,
+    onResize,
+    onEqualize
+  } = t0;
+  const {
+    t
+  } = useTranslation("ui");
+  const cleanup = useRef(null);
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => () => cleanup.current?.();
+    t2 = [];
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t1 = $[0];
+    t2 = $[1];
+  }
+  useEffect(t1, t2);
+  const horizontal = divider.axis === "horizontal";
+  let t3;
+  if ($[2] !== divider.index || $[3] !== divider.lengths) {
+    t3 = divider.lengths.slice(0, divider.index + 1).reduce(_temp, 0);
+    $[2] = divider.index;
+    $[3] = divider.lengths;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const before = t3;
+  let t10;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  let total;
+  if ($[5] !== before || $[6] !== divider || $[7] !== horizontal || $[8] !== minimumResizeShare || $[9] !== t) {
+    total = divider.lengths.reduce(_temp2, 0);
+    const position = total ? Math.round(before / total * 100) : 0;
+    let t11;
+    if ($[18] !== divider || $[19] !== minimumResizeShare) {
+      t11 = delta => resizeSplit(divider, delta, false, 0, minimumResizeShare).slice(0, divider.index + 1).reduce(_temp3, 0) * 100;
+      $[18] = divider;
+      $[19] = minimumResizeShare;
+      $[20] = t11;
+    } else {
+      t11 = $[20];
+    }
+    const limit = t11;
+    t4 = "separator";
+    t5 = 0;
+    if ($[21] !== t) {
+      t6 = t("workspace.resize");
+      $[21] = t;
+      $[22] = t6;
+    } else {
+      t6 = $[22];
+    }
+    t7 = horizontal ? "vertical" : "horizontal";
+    t8 = position;
+    t9 = total ? Math.floor(limit(-total)) : 0;
+    t10 = total ? Math.ceil(limit(total)) : 100;
+    $[5] = before;
+    $[6] = divider;
+    $[7] = horizontal;
+    $[8] = minimumResizeShare;
+    $[9] = t;
+    $[10] = t10;
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+    $[16] = t9;
+    $[17] = total;
+  } else {
+    t10 = $[10];
+    t4 = $[11];
+    t5 = $[12];
+    t6 = $[13];
+    t7 = $[14];
+    t8 = $[15];
+    t9 = $[16];
+    total = $[17];
+  }
+  let t11;
+  if ($[23] !== divider.height || $[24] !== divider.width || $[25] !== divider.x || $[26] !== divider.y) {
+    t11 = {
+      left: divider.x,
+      top: divider.y,
+      width: divider.width,
+      height: divider.height
+    };
+    $[23] = divider.height;
+    $[24] = divider.width;
+    $[25] = divider.x;
+    $[26] = divider.y;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  let t12;
+  if ($[28] !== onEqualize) {
+    t12 = event => onEqualize(event.altKey);
+    $[28] = onEqualize;
+    $[29] = t12;
+  } else {
+    t12 = $[29];
+  }
+  let t13;
+  if ($[30] !== divider || $[31] !== horizontal || $[32] !== minimumResizeShare || $[33] !== onEqualize || $[34] !== onResize || $[35] !== total) {
+    t13 = event_0 => {
+      const negative = horizontal ? "ArrowLeft" : "ArrowUp";
+      const positive = horizontal ? "ArrowRight" : "ArrowDown";
+      if (event_0.key === "Enter") {
+        event_0.preventDefault();
+        onEqualize(event_0.altKey);
+      } else {
+        if ([negative, positive, "Home", "End"].includes(event_0.key)) {
+          event_0.preventDefault();
+          const delta_0 = event_0.key === "Home" ? -total : event_0.key === "End" ? total : (event_0.key === negative ? -1 : 1) * (event_0.shiftKey ? 50 : 10);
+          onResize(resizeSplit(divider, delta_0, event_0.altKey, 0, minimumResizeShare));
         }
-    });
-    const [measurement, setMeasurement] = useState(ZERO);
-    const [dragging, setDragging] = useState(false);
-    const drag = useRef(null);
-    const [preview, setPreview] = useState(null);
-    // A dragover fires many times a second; only a different shape is worth a render.
-    const shownPreview = useRef(null);
-    const showPreview = useCallback((shape) => {
-        if (!sameDropPreview(shownPreview.current, shape)) {
-            shownPreview.current = shape;
-            setPreview(shape);
+      }
+    };
+    $[30] = divider;
+    $[31] = horizontal;
+    $[32] = minimumResizeShare;
+    $[33] = onEqualize;
+    $[34] = onResize;
+    $[35] = total;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
+  let t14;
+  if ($[37] !== divider || $[38] !== horizontal || $[39] !== minimumResizeShare || $[40] !== onResize) {
+    t14 = event_1 => {
+      if (event_1.button !== 0) {
+        return;
+      }
+      event_1.preventDefault();
+      cleanup.current?.();
+      const element = event_1.currentTarget;
+      const view = element.ownerDocument.defaultView;
+      const pointerId = event_1.pointerId;
+      const start = horizontal ? event_1.clientX : event_1.clientY;
+      const parent = element.parentElement;
+      const rect = parent?.getBoundingClientRect();
+      const scale = horizontal ? (rect?.width ?? 1) / (parent?.clientWidth || 1) : (rect?.height ?? 1) / (parent?.clientHeight || 1);
+      element.dataset.resizing = "";
+      element.focus();
+      let frame = 0;
+      let pending = null;
+      const apply = () => {
+        frame = 0;
+        const next = pending;
+        pending = null;
+        if (next) {
+          const delta_1 = ((horizontal ? next.clientX : next.clientY) - start) / (scale || 1);
+          onResize(resizeSplit(divider, delta_1, next.altKey, 8 / (scale || 1), minimumResizeShare));
         }
-    }, []);
-    const latest = useRef({ value, onValueChange });
-    useLayoutEffect(() => {
-        latest.current = { value, onValueChange };
-    });
-    const dispatch = useCallback((command) => {
-        const state = latest.current;
-        const next = updateSplitLayout(state.value, command);
-        if (next !== state.value) {
-            state.onValueChange(next, command);
+      };
+      const move = next_0 => {
+        if (next_0.pointerId !== pointerId) {
+          return;
         }
-    }, []);
-    const measure = useCallback(() => {
-        const element = root.current;
-        if (!element) {
-            return;
+        pending = next_0;
+        if (frame !== 0) {
+          return;
         }
-        const rect = element.getBoundingClientRect();
-        const next = {
-            width: element.clientWidth,
-            height: element.clientHeight,
-            left: rect.left,
-            top: rect.top,
-            scaleX: rect.width / (element.clientWidth || 1),
-            scaleY: rect.height / (element.clientHeight || 1)
-        };
-        setMeasurement((current) => (Object.keys(next).every((key) => current[key] === next[key]) ? current : next));
-    }, []);
-    useLayoutEffect(measure);
-    useEffect(() => {
-        const element = root.current;
-        if (!element) {
-            return;
+        if (view) {
+          frame = view.requestAnimationFrame(apply);
+        } else {
+          apply();
         }
-        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
-        observer?.observe(element);
-        const view = element.ownerDocument.defaultView;
-        view?.addEventListener('resize', measure);
-        view?.addEventListener('scroll', measure, true);
-        return () => {
-            observer?.disconnect();
-            view?.removeEventListener('resize', measure);
-            view?.removeEventListener('scroll', measure, true);
-        };
-    }, [measure]);
-    const stopDrag = useCallback(() => {
-        drag.current = null;
-        setDragging(false);
-        showPreview(null);
-    }, [showPreview]);
-    useEffect(() => {
-        if (!dragging) {
-            return;
+      };
+      const release = () => {
+        if (frame !== 0) {
+          view?.cancelAnimationFrame(frame);
+          apply();
         }
-        const document = root.current?.ownerDocument;
-        const view = document?.defaultView;
-        document?.addEventListener('dragend', stopDrag);
-        document?.addEventListener('drop', stopDrag);
-        view?.addEventListener('blur', stopDrag);
-        return () => {
-            document?.removeEventListener('dragend', stopDrag);
-            document?.removeEventListener('drop', stopDrag);
-            view?.removeEventListener('blur', stopDrag);
-        };
-    }, [dragging, stopDrag]);
-    const gap = layout === 'roomy' ? 8 : 1;
-    const barHeight = showTabs || renderPaneHeader ? Math.max(0, headerHeight) : 0;
-    const geometry = splitGeometry(value, measurement.width, measurement.height, gap, (pane) => typeof minimumSize === 'function' ? minimumSize(pane) : minimumSize);
-    const panes = splitPanes(value.root);
-    // A stable sibling order also avoids DOM moves, which reload embedded browsing contexts.
-    const views = panes
-        .flatMap((pane) => pane.views.map((viewId) => ({ pane, viewId })))
-        .sort((left, right) => (left.viewId < right.viewId ? -1 : left.viewId > right.viewId ? 1 : 0));
-    const visible = new Map(geometry.panes.map((pane) => [pane.pane.id, pane]));
-    const radius = (rect) => paneRadius(rect, measurement.width, measurement.height, edges, layout === 'roomy' ? 8 : 0);
-    // A header squares off the top corners of the body under it.
-    const bodyRadius = (rect, header) => {
-        const corners = radius(rect).split(' ');
-        if (header > 0) {
-            corners[0] = corners[1] = '0px';
+        end();
+      };
+      const end = () => {
+        if (frame !== 0) {
+          view?.cancelAnimationFrame(frame);
+          frame = 0;
         }
-        return corners.join(' ');
-    };
-    const bounds = panes.flatMap((pane) => {
-        const rect = visible.get(pane.id);
-        const header = Math.min(barHeight, rect?.height ?? 0);
-        const body = rect
-            ? {
-                x: measurement.left + rect.x * measurement.scaleX,
-                y: measurement.top + (rect.y + header) * measurement.scaleY,
-                width: rect.width * measurement.scaleX,
-                height: Math.max(0, rect.height - header) * measurement.scaleY
-            }
-            : { x: 0, y: 0, width: 0, height: 0 };
-        const borderRadius = rect ? bodyRadius(rect, header) : '0px 0px 0px 0px';
-        return pane.views.map((viewId) => ({ viewId, paneId: pane.id, active: !!rect && pane.active === viewId, rect: body, borderRadius }));
-    });
-    const boundsKey = JSON.stringify(bounds);
-    const reportedBounds = useRef('');
-    const boundsCallback = useRef(onViewBoundsChange);
-    useLayoutEffect(() => {
-        boundsCallback.current = onViewBoundsChange;
-    });
-    useEffect(() => () => boundsCallback.current?.([]), []);
-    useLayoutEffect(() => {
-        if (onViewBoundsChange && reportedBounds.current !== boundsKey) {
-            reportedBounds.current = boundsKey;
-            onViewBoundsChange(bounds);
+        element.removeEventListener("pointermove", move);
+        element.removeEventListener("pointerup", release);
+        element.removeEventListener("pointercancel", end);
+        element.removeEventListener("lostpointercapture", end);
+        element.ownerDocument.defaultView?.removeEventListener("blur", end);
+        delete element.dataset.resizing;
+        if (element.hasPointerCapture(pointerId)) {
+          element.releasePointerCapture(pointerId);
         }
+        cleanup.current = null;
+      };
+      cleanup.current = end;
+      element.setPointerCapture(pointerId);
+      element.addEventListener("pointermove", move);
+      element.addEventListener("pointerup", release);
+      element.addEventListener("pointercancel", end);
+      element.addEventListener("lostpointercapture", end);
+      element.ownerDocument.defaultView?.addEventListener("blur", end);
+    };
+    $[37] = divider;
+    $[38] = horizontal;
+    $[39] = minimumResizeShare;
+    $[40] = onResize;
+    $[41] = t14;
+  } else {
+    t14 = $[41];
+  }
+  let t15;
+  if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = /*#__PURE__*/_jsx("span", {});
+    $[42] = t15;
+  } else {
+    t15 = $[42];
+  }
+  let t16;
+  if ($[43] !== t10 || $[44] !== t11 || $[45] !== t12 || $[46] !== t13 || $[47] !== t14 || $[48] !== t4 || $[49] !== t5 || $[50] !== t6 || $[51] !== t7 || $[52] !== t8 || $[53] !== t9) {
+    t16 = /*#__PURE__*/_jsx("div", {
+      role: t4,
+      tabIndex: t5,
+      "aria-label": t6,
+      "aria-orientation": t7,
+      "aria-valuenow": t8,
+      "aria-valuemin": t9,
+      "aria-valuemax": t10,
+      className: "ade-split-divider",
+      style: t11,
+      onDoubleClick: t12,
+      onKeyDown: t13,
+      onPointerDown: t14,
+      children: t15
     });
-    const id = (kind, viewId) => `${prefix}-${kind}-${encodeURIComponent(viewId)}`;
-    const startDrag = (pane, event, viewId) => {
-        drag.current = { sourceId: pane.id, viewId, width: event.currentTarget.closest('[data-document-tab]')?.getBoundingClientRect().width ?? 128 };
-        event.dataTransfer.setData('application/x-adecore-view', JSON.stringify({ workspace: prefix, paneId: pane.id, viewId }));
-        event.dataTransfer.effectAllowed = 'move';
-        if (viewId) {
-            onViewDragStart?.(viewId, event);
-        }
-        setDragging(true);
+    $[43] = t10;
+    $[44] = t11;
+    $[45] = t12;
+    $[46] = t13;
+    $[47] = t14;
+    $[48] = t4;
+    $[49] = t5;
+    $[50] = t6;
+    $[51] = t7;
+    $[52] = t8;
+    $[53] = t9;
+    $[54] = t16;
+  } else {
+    t16 = $[54];
+  }
+  return t16;
+}
+function _temp3(sum_1, size) {
+  return sum_1 + size;
+}
+function _temp2(sum_0, value_0) {
+  return sum_0 + value_0;
+}
+function _temp(sum, value) {
+  return sum + value;
+}
+export function SplitView(t0) {
+  const $ = _c(58);
+  const {
+    value,
+    onValueChange,
+    renderView,
+    getTab,
+    renderPaneHeader,
+    onClose,
+    onTabDoubleClick,
+    onTabContextMenu,
+    onViewDragStart,
+    canDrop,
+    canDropExternal,
+    onExternalDrop,
+    onViewBoundsChange,
+    minimumSize: t1,
+    minimumResizeShare: t2,
+    layout: ownLayout,
+    flushEdges,
+    showTabs: t3,
+    headerHeight: t4,
+    render,
+    ref,
+    className,
+    style,
+    ...props
+  } = t0;
+  const minimumSize = t1 === undefined ? MINIMUM : t1;
+  const minimumResizeShare = t2 === undefined ? 0 : t2;
+  const showTabs = t3 === undefined ? true : t3;
+  const headerHeight = t4 === undefined ? 36 : t4;
+  const {
+    t
+  } = useTranslation("ui");
+  const inherited = useContext(WorkspaceContext);
+  const layout = ownLayout ?? inherited.layout;
+  const edges = flushEdges ?? inherited.edges;
+  const root = useRef(null);
+  const prefix = useId();
+  const serial = useRef(0);
+  const lastFocus = useRef(null);
+  let t5;
+  if ($[0] !== value.focused) {
+    t5 = () => {
+      const previous = lastFocus.current;
+      const element = root.current;
+      const active = element?.ownerDocument.activeElement;
+      if (previous && element && (!previous.isConnected || previous.closest("[hidden]")) && (!active || active === element.ownerDocument.body || active === previous)) {
+        const pane = paneElement(element, "splitPane", value.focused);
+        const target = pane?.querySelector("[role=\"tab\"][aria-selected=\"true\"]") ?? pane;
+        target?.focus({
+          preventScroll: true
+        });
+      }
     };
-    const commandFor = (target) => {
-        if (!drag.current) {
-            return null;
-        }
-        const { sourceId, viewId } = drag.current;
-        if (target.side === 'center') {
-            return { type: 'swap', sourceId, targetId: target.paneId, viewId };
-        }
-        return {
-            type: 'move',
-            sourceId,
-            viewId,
-            targetId: target.paneId,
-            side: target.side,
-            index: target.index,
-            newPaneId: `${prefix}-pane-${serial.current}`,
-            splitId: `${prefix}-split-${serial.current}`
-        };
+    $[0] = value.focused;
+    $[1] = t5;
+  } else {
+    t5 = $[1];
+  }
+  useEffect(t5);
+  const [measurement, setMeasurement] = useState(ZERO);
+  const [dragging, setDragging] = useState(false);
+  const drag = useRef(null);
+  const [preview, setPreview] = useState(null);
+  const shownPreview = useRef(null);
+  let t6;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = shape => {
+      if (!sameDropPreview(shownPreview.current, shape)) {
+        shownPreview.current = shape;
+        setPreview(shape);
+      }
     };
-    const locateDrop = (event) => {
-        const x = (event.clientX - measurement.left) / (measurement.scaleX || 1);
-        const y = (event.clientY - measurement.top) / (measurement.scaleY || 1);
-        const rect = geometry.panes.find((item) => x >= item.x && x <= item.x + item.width && y >= item.y && y <= item.y + item.height);
-        if (!rect) {
-            return null;
-        }
-        const header = Math.min(barHeight, rect.height);
-        const inHeader = y < rect.y + header;
-        const strip = inHeader ? paneElement(root.current, 'splitHeader', rect.pane.id) : undefined;
-        const tabRects = Array.from(strip?.querySelectorAll('[data-document-tab]') ?? [], (element) => element.getBoundingClientRect());
-        const side = inHeader ? undefined : (splitSideAt(rect, x, y) ?? 'center');
-        const index = inHeader ? tabGapAt(tabRects, event.clientX) : undefined;
-        const target = { paneId: rect.pane.id, side, index };
-        const command = commandFor(target);
-        if (drag.current) {
-            if (canDrop?.(drag.current, target) === false || !command || updateSplitLayout(value, command) === value) {
-                return null;
-            }
-        }
-        else if (!onExternalDrop || !canDropExternal?.(event, target)) {
-            return null;
-        }
-        if (side === 'center') {
-            return { target, shape: rectDropPreview(rect) };
-        }
-        if (side) {
-            const horizontal = side === 'left' || side === 'right';
-            const width = horizontal ? Math.max(0, (rect.width - gap) / 2) : rect.width;
-            const height = horizontal ? rect.height : Math.max(0, (rect.height - gap) / 2);
-            return {
-                target,
-                shape: rectDropPreview({
-                    x: side === 'right' ? rect.x + rect.width - width : rect.x,
-                    y: side === 'bottom' ? rect.y + rect.height - height : rect.y,
-                    width,
-                    height
-                })
-            };
-        }
-        if (header === 0) {
-            return { target, shape: rectDropPreview(rect) };
-        }
-        const tabWidth = Math.min(rect.width, (drag.current?.width ?? 128) / (measurement.scaleX || 1));
-        const next = tabRects[index ?? tabRects.length];
-        const left = next?.left ?? tabRects.at(-1)?.right ?? measurement.left + rect.x * measurement.scaleX;
-        const relative = Math.max(0, Math.min(rect.width - tabWidth, (left - measurement.left) / (measurement.scaleX || 1) - rect.x));
-        return {
-            target,
-            shape: tabDropPreview({ gap: index ?? rect.pane.views.length, left: relative, tabWidth, width: rect.width, height: rect.height, barHeight: header }, { x: rect.x, y: rect.y })
-        };
+    $[2] = t6;
+  } else {
+    t6 = $[2];
+  }
+  const showPreview = t6;
+  let t7;
+  if ($[3] !== onValueChange || $[4] !== value) {
+    t7 = {
+      value,
+      onValueChange
     };
-    const focusDirection = (key) => {
-        const source = visible.get(value.focused);
-        if (!source) {
-            return;
-        }
-        const horizontal = key === 'ArrowLeft' || key === 'ArrowRight';
-        const positive = key === 'ArrowRight' || key === 'ArrowDown';
-        const center = (rect) => (horizontal ? rect.x + rect.width / 2 : rect.y + rect.height / 2);
-        const cross = (rect) => (horizontal ? rect.y + rect.height / 2 : rect.x + rect.width / 2);
-        const options = geometry.panes.filter((rect) => rect !== source && (positive ? center(rect) > center(source) : center(rect) < center(source)));
-        options.sort((left, right) => Math.abs(center(left) - center(source)) +
-            2 * Math.abs(cross(left) - cross(source)) -
-            (Math.abs(center(right) - center(source)) + 2 * Math.abs(cross(right) - cross(source))));
-        const next = options[0];
-        if (next) {
-            dispatch({ type: 'focus', paneId: next.pane.id });
-            const element = paneElement(root.current, 'splitPane', next.pane.id);
-            element?.querySelector('[role="tab"][aria-selected="true"]')?.focus();
-            if (!showTabs) {
-                element?.focus();
-            }
-        }
+    $[3] = onValueChange;
+    $[4] = value;
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  const latest = useRef(t7);
+  let t8;
+  if ($[6] !== onValueChange || $[7] !== value) {
+    t8 = () => {
+      latest.current = {
+        value,
+        onValueChange
+      };
     };
-    return useRender({
-        render,
-        ref: [root, ref ?? null],
-        defaultTagName: 'div',
-        props: {
-            ...props,
-            className: clsx('ade-split-view', className),
-            style,
-            'data-layout': layout,
-            'data-dragging': dragging || undefined,
-            onFocusCapture: (event) => {
-                props.onFocusCapture?.(event);
-                lastFocus.current = event.target;
-            },
-            onKeyDown: (event) => {
-                props.onKeyDown?.(event);
-                const target = event.target;
-                const navigation = target === event.currentTarget || target.matches('.ade-split-pane, .ade-split-content') || !!target.closest('.ade-split-header');
-                if (!event.defaultPrevented && navigation && event.altKey && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
-                    event.preventDefault();
-                    focusDirection(event.key);
-                }
-                if (event.key === 'Escape') {
-                    stopDrag();
-                }
-            },
-            onDragOver: (event) => {
-                props.onDragOver?.(event);
-                if (event.defaultPrevented) {
-                    showPreview(null);
-                    return;
-                }
-                const drop = locateDrop(event);
-                showPreview(drop?.shape ?? null);
-                if (drop) {
-                    event.preventDefault();
-                    event.dataTransfer.dropEffect = drag.current ? 'move' : 'copy';
-                }
-            },
-            onDragLeave: (event) => {
-                props.onDragLeave?.(event);
-                if (!(event.relatedTarget instanceof Node) || !event.currentTarget.contains(event.relatedTarget)) {
-                    showPreview(null);
-                }
-            },
-            onDrop: (event) => {
-                props.onDrop?.(event);
-                if (event.defaultPrevented) {
-                    stopDrag();
-                    return;
-                }
-                const drop = locateDrop(event);
-                if (drop) {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    const command = commandFor(drop.target);
-                    if (command) {
-                        serial.current++;
-                        dispatch(command);
-                    }
-                    else {
-                        onExternalDrop?.(drop.target, event);
-                    }
-                }
-                stopDrag();
-            },
-            children: (_jsxs(_Fragment, { children: [panes.map((pane) => {
-                        const rect = visible.get(pane.id);
-                        const header = Math.min(barHeight, rect?.height ?? 0);
-                        return (_jsx("section", { "data-split-pane": pane.id, "data-focused": value.focused === pane.id || undefined, className: "ade-split-pane", "aria-label": t('workspace.pane'), tabIndex: -1, hidden: !rect, inert: !rect, style: rect ? { left: rect.x, top: rect.y, width: rect.width, height: rect.height, borderRadius: radius(rect) } : undefined, onFocusCapture: () => dispatch({ type: 'focus', paneId: pane.id }), onPointerDown: () => dispatch({ type: 'focus', paneId: pane.id }), children: header > 0 && (_jsx("div", { className: "ade-split-header", "data-split-header": pane.id, style: { height: header }, children: renderPaneHeader ? (renderPaneHeader(pane)) : (_jsxs(_Fragment, { children: [_jsx(TabStrip, { items: pane.views.map((viewId) => {
-                                                const metadata = getTab?.(viewId);
-                                                return {
-                                                    ...metadata,
-                                                    id: viewId,
-                                                    label: metadata?.label ?? viewId,
-                                                    tabId: id('tab', viewId),
-                                                    panelId: id('view', viewId)
-                                                };
-                                            }), value: pane.active, focused: value.focused === pane.id, onValueChange: (viewId) => dispatch({ type: 'activate', paneId: pane.id, viewId }), onClose: onClose ?? ((viewId) => dispatch({ type: 'close', viewId })), onDoubleClick: onTabDoubleClick, onContextMenu: onTabContextMenu, onDragStart: (viewId, event) => startDrag(pane, event, viewId), onDragEnd: stopDrag }), _jsx(IconButton, { icon: GripVertical, size: "sm", label: t('workspace.movePane'), draggable: true, onDragStart: (event) => startDrag(pane, event), onDragEnd: stopDrag }), _jsx(IconButton, { icon: value.maximized === pane.id ? Minimize2 : Maximize2, size: "sm", label: t(value.maximized === pane.id ? 'workspace.restore' : 'workspace.maximize'), onClick: () => dispatch({ type: 'maximize', paneId: value.maximized === pane.id ? null : pane.id }) })] })) })) }, pane.id));
-                    }), views.map(({ pane, viewId }) => {
-                        const rect = visible.get(pane.id);
-                        const active = !!rect && pane.active === viewId;
-                        const header = Math.min(barHeight, rect?.height ?? 0);
-                        const position = rect
-                            ? {
-                                left: rect.x,
-                                top: rect.y + header,
-                                width: rect.width,
-                                height: Math.max(0, rect.height - header),
-                                borderRadius: bodyRadius(rect, header)
-                            }
-                            : {};
-                        return (_jsx("div", { id: id('view', viewId), role: "tabpanel", "aria-labelledby": showTabs && !renderPaneHeader ? id('tab', viewId) : undefined, "aria-label": !showTabs || renderPaneHeader ? (getTab?.(viewId).label ?? viewId) : undefined, className: "ade-split-content", "data-split-view-id": viewId, hidden: !active, inert: !active, tabIndex: 0, style: position, onFocusCapture: () => dispatch({ type: 'focus', paneId: pane.id }), onPointerDown: () => dispatch({ type: 'focus', paneId: pane.id }), children: renderView(viewId, { paneId: pane.id, active }) }, viewId));
-                    }), geometry.dividers.map((divider) => (_jsx(Divider, { divider: divider, minimumResizeShare: minimumResizeShare, onResize: (sizes) => dispatch({ type: 'resize', splitId: divider.splitId, sizes }), onEqualize: (all) => dispatch(all
-                            ? {
-                                type: 'equalizeAxis',
-                                axis: divider.axis,
-                                length: divider.axis === 'horizontal' ? measurement.width : measurement.height,
-                                gap
-                            }
-                            : { type: 'equalize', splitId: divider.splitId, index: divider.index }) }, `${divider.splitId}:${divider.index}`))), _jsx(DropPreview, { shape: preview })] }))
-        }
+    $[6] = onValueChange;
+    $[7] = value;
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+  useLayoutEffect(t8);
+  const dispatch = command => {
+    const state = latest.current;
+    const next = updateSplitLayout(state.value, command);
+    if (next !== state.value) {
+      state.onValueChange(next, command);
+    }
+  };
+  let t9;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => {
+      const element_0 = root.current;
+      if (!element_0) {
+        return;
+      }
+      const rect = element_0.getBoundingClientRect();
+      const next_0 = {
+        width: element_0.clientWidth,
+        height: element_0.clientHeight,
+        left: rect.left,
+        top: rect.top,
+        scaleX: rect.width / (element_0.clientWidth || 1),
+        scaleY: rect.height / (element_0.clientHeight || 1)
+      };
+      setMeasurement(current => Object.keys(next_0).every(key => current[key] === next_0[key]) ? current : next_0);
+    };
+    $[9] = t9;
+  } else {
+    t9 = $[9];
+  }
+  const measure = t9;
+  useLayoutEffect(measure);
+  let t10;
+  let t11;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = () => {
+      const element_1 = root.current;
+      if (!element_1) {
+        return;
+      }
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+      observer?.observe(element_1);
+      const view = element_1.ownerDocument.defaultView;
+      view?.addEventListener("resize", measure);
+      view?.addEventListener("scroll", measure, true);
+      return () => {
+        observer?.disconnect();
+        view?.removeEventListener("resize", measure);
+        view?.removeEventListener("scroll", measure, true);
+      };
+    };
+    t11 = [measure];
+    $[10] = t10;
+    $[11] = t11;
+  } else {
+    t10 = $[10];
+    t11 = $[11];
+  }
+  useEffect(t10, t11);
+  let t12;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = () => {
+      drag.current = null;
+      setDragging(false);
+      showPreview(null);
+    };
+    $[12] = t12;
+  } else {
+    t12 = $[12];
+  }
+  const stopDrag = t12;
+  let t13;
+  let t14;
+  if ($[13] !== dragging) {
+    t13 = () => {
+      if (!dragging) {
+        return;
+      }
+      const document = root.current?.ownerDocument;
+      const view_0 = document?.defaultView;
+      document?.addEventListener("dragend", stopDrag);
+      document?.addEventListener("drop", stopDrag);
+      view_0?.addEventListener("blur", stopDrag);
+      return () => {
+        document?.removeEventListener("dragend", stopDrag);
+        document?.removeEventListener("drop", stopDrag);
+        view_0?.removeEventListener("blur", stopDrag);
+      };
+    };
+    t14 = [dragging, stopDrag];
+    $[13] = dragging;
+    $[14] = t13;
+    $[15] = t14;
+  } else {
+    t13 = $[14];
+    t14 = $[15];
+  }
+  useEffect(t13, t14);
+  const gap = layout === "roomy" ? 8 : 1;
+  const barHeight = showTabs || renderPaneHeader ? Math.max(0, headerHeight) : 0;
+  let t15;
+  if ($[16] !== minimumSize) {
+    t15 = pane_0 => typeof minimumSize === "function" ? minimumSize(pane_0) : minimumSize;
+    $[16] = minimumSize;
+    $[17] = t15;
+  } else {
+    t15 = $[17];
+  }
+  const geometry = splitGeometry(value, measurement.width, measurement.height, gap, t15);
+  const panes = splitPanes(value.root);
+  const views = panes.flatMap(_temp4).sort(_temp5);
+  const visible = new Map(geometry.panes.map(_temp6));
+  let t16;
+  if ($[18] !== edges || $[19] !== layout || $[20] !== measurement.height || $[21] !== measurement.width) {
+    t16 = rect_0 => paneRadius(rect_0, measurement.width, measurement.height, edges, layout === "roomy" ? 8 : 0);
+    $[18] = edges;
+    $[19] = layout;
+    $[20] = measurement.height;
+    $[21] = measurement.width;
+    $[22] = t16;
+  } else {
+    t16 = $[22];
+  }
+  const radius = t16;
+  let t17;
+  if ($[23] !== radius) {
+    t17 = (rect_1, header) => {
+      const corners = radius(rect_1).split(" ");
+      if (header > 0) {
+        corners[0] = corners[1] = "0px";
+      }
+      return corners.join(" ");
+    };
+    $[23] = radius;
+    $[24] = t17;
+  } else {
+    t17 = $[24];
+  }
+  const bodyRadius = t17;
+  const bounds = panes.flatMap(pane_3 => {
+    const rect_2 = visible.get(pane_3.id);
+    const header_0 = Math.min(barHeight, rect_2?.height ?? 0);
+    const body = rect_2 ? {
+      x: measurement.left + rect_2.x * measurement.scaleX,
+      y: measurement.top + (rect_2.y + header_0) * measurement.scaleY,
+      width: rect_2.width * measurement.scaleX,
+      height: Math.max(0, rect_2.height - header_0) * measurement.scaleY
+    } : {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    };
+    const borderRadius = rect_2 ? bodyRadius(rect_2, header_0) : "0px 0px 0px 0px";
+    return pane_3.views.map(viewId_0 => ({
+      viewId: viewId_0,
+      paneId: pane_3.id,
+      active: !!rect_2 && pane_3.active === viewId_0,
+      rect: body,
+      borderRadius
+    }));
+  });
+  const boundsKey = JSON.stringify(bounds);
+  const reportedBounds = useRef("");
+  const boundsCallback = useRef(onViewBoundsChange);
+  let t18;
+  if ($[25] !== onViewBoundsChange) {
+    t18 = () => {
+      boundsCallback.current = onViewBoundsChange;
+    };
+    $[25] = onViewBoundsChange;
+    $[26] = t18;
+  } else {
+    t18 = $[26];
+  }
+  useLayoutEffect(t18);
+  let t19;
+  let t20;
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = () => () => boundsCallback.current?.([]);
+    t20 = [];
+    $[27] = t19;
+    $[28] = t20;
+  } else {
+    t19 = $[27];
+    t20 = $[28];
+  }
+  useEffect(t19, t20);
+  useLayoutEffect(() => {
+    if (onViewBoundsChange && reportedBounds.current !== boundsKey) {
+      reportedBounds.current = boundsKey;
+      onViewBoundsChange(bounds);
+    }
+  });
+  let t21;
+  if ($[29] !== prefix) {
+    t21 = (kind, viewId_1) => `${prefix}-${kind}-${encodeURIComponent(viewId_1)}`;
+    $[29] = prefix;
+    $[30] = t21;
+  } else {
+    t21 = $[30];
+  }
+  const id = t21;
+  const startDrag = (pane_4, event, viewId_2) => {
+    drag.current = {
+      sourceId: pane_4.id,
+      viewId: viewId_2,
+      width: event.currentTarget.closest("[data-document-tab]")?.getBoundingClientRect().width ?? 128
+    };
+    event.dataTransfer.setData("application/x-adecore-view", JSON.stringify({
+      workspace: prefix,
+      paneId: pane_4.id,
+      viewId: viewId_2
+    }));
+    event.dataTransfer.effectAllowed = "move";
+    if (viewId_2) {
+      onViewDragStart?.(viewId_2, event);
+    }
+    setDragging(true);
+  };
+  const commandFor = target_0 => {
+    if (!drag.current) {
+      return null;
+    }
+    const {
+      sourceId,
+      viewId: viewId_3
+    } = drag.current;
+    if (target_0.side === "center") {
+      return {
+        type: "swap",
+        sourceId,
+        targetId: target_0.paneId,
+        viewId: viewId_3
+      };
+    }
+    return {
+      type: "move",
+      sourceId,
+      viewId: viewId_3,
+      targetId: target_0.paneId,
+      side: target_0.side,
+      index: target_0.index,
+      newPaneId: `${prefix}-pane-${serial.current}`,
+      splitId: `${prefix}-split-${serial.current}`
+    };
+  };
+  const locateDrop = event_0 => {
+    const x = (event_0.clientX - measurement.left) / (measurement.scaleX || 1);
+    const y = (event_0.clientY - measurement.top) / (measurement.scaleY || 1);
+    const rect_3 = geometry.panes.find(item => x >= item.x && x <= item.x + item.width && y >= item.y && y <= item.y + item.height);
+    if (!rect_3) {
+      return null;
+    }
+    const header_1 = Math.min(barHeight, rect_3.height);
+    const inHeader = y < rect_3.y + header_1;
+    const strip = inHeader ? paneElement(root.current, "splitHeader", rect_3.pane.id) : undefined;
+    const tabRects = Array.from(strip?.querySelectorAll("[data-document-tab]") ?? [], _temp7);
+    const side = inHeader ? undefined : splitSideAt(rect_3, x, y) ?? "center";
+    const index = inHeader ? tabGapAt(tabRects, event_0.clientX) : undefined;
+    const target_1 = {
+      paneId: rect_3.pane.id,
+      side,
+      index
+    };
+    const command_0 = commandFor(target_1);
+    if (drag.current) {
+      if (canDrop?.(drag.current, target_1) === false || !command_0 || updateSplitLayout(value, command_0) === value) {
+        return null;
+      }
+    } else {
+      if (!onExternalDrop || !canDropExternal?.(event_0, target_1)) {
+        return null;
+      }
+    }
+    if (side === "center") {
+      return {
+        target: target_1,
+        shape: rectDropPreview(rect_3)
+      };
+    }
+    if (side) {
+      const horizontal = side === "left" || side === "right";
+      const width = horizontal ? Math.max(0, (rect_3.width - gap) / 2) : rect_3.width;
+      const height = horizontal ? rect_3.height : Math.max(0, (rect_3.height - gap) / 2);
+      return {
+        target: target_1,
+        shape: rectDropPreview({
+          x: side === "right" ? rect_3.x + rect_3.width - width : rect_3.x,
+          y: side === "bottom" ? rect_3.y + rect_3.height - height : rect_3.y,
+          width,
+          height
+        })
+      };
+    }
+    if (header_1 === 0) {
+      return {
+        target: target_1,
+        shape: rectDropPreview(rect_3)
+      };
+    }
+    const tabWidth = Math.min(rect_3.width, (drag.current?.width ?? 128) / (measurement.scaleX || 1));
+    const next_1 = tabRects[index ?? tabRects.length];
+    const left_0 = next_1?.left ?? tabRects.at(-1)?.right ?? measurement.left + rect_3.x * measurement.scaleX;
+    const relative = Math.max(0, Math.min(rect_3.width - tabWidth, (left_0 - measurement.left) / (measurement.scaleX || 1) - rect_3.x));
+    return {
+      target: target_1,
+      shape: tabDropPreview({
+        gap: index ?? rect_3.pane.views.length,
+        left: relative,
+        tabWidth,
+        width: rect_3.width,
+        height: rect_3.height,
+        barHeight: header_1
+      }, {
+        x: rect_3.x,
+        y: rect_3.y
+      })
+    };
+  };
+  const focusDirection = key_0 => {
+    const source = visible.get(value.focused);
+    if (!source) {
+      return;
+    }
+    const horizontal_0 = key_0 === "ArrowLeft" || key_0 === "ArrowRight";
+    const positive = key_0 === "ArrowRight" || key_0 === "ArrowDown";
+    const center = rect_4 => horizontal_0 ? rect_4.x + rect_4.width / 2 : rect_4.y + rect_4.height / 2;
+    const cross = rect_5 => horizontal_0 ? rect_5.y + rect_5.height / 2 : rect_5.x + rect_5.width / 2;
+    const options = geometry.panes.filter(rect_6 => rect_6 !== source && (positive ? center(rect_6) > center(source) : center(rect_6) < center(source)));
+    options.sort((left_1, right_0) => Math.abs(center(left_1) - center(source)) + 2 * Math.abs(cross(left_1) - cross(source)) - (Math.abs(center(right_0) - center(source)) + 2 * Math.abs(cross(right_0) - cross(source))));
+    const next_2 = options[0];
+    if (next_2) {
+      dispatch({
+        type: "focus",
+        paneId: next_2.pane.id
+      });
+      const element_3 = paneElement(root.current, "splitPane", next_2.pane.id);
+      element_3?.querySelector("[role=\"tab\"][aria-selected=\"true\"]")?.focus();
+      if (!showTabs) {
+        element_3?.focus();
+      }
+    }
+  };
+  const t22 = ref ?? null;
+  let t23;
+  if ($[31] !== t22) {
+    t23 = [root, t22];
+    $[31] = t22;
+    $[32] = t23;
+  } else {
+    t23 = $[32];
+  }
+  const t24 = "div";
+  let t25;
+  if ($[33] !== className) {
+    t25 = clsx("ade-split-view", className);
+    $[33] = className;
+    $[34] = t25;
+  } else {
+    t25 = $[34];
+  }
+  const t26 = dragging || undefined;
+  const t27 = event_1 => {
+    props.onFocusCapture?.(event_1);
+    lastFocus.current = event_1.target;
+  };
+  const t28 = event_2 => {
+    props.onKeyDown?.(event_2);
+    const target_2 = event_2.target;
+    const navigation = target_2 === event_2.currentTarget || target_2.matches(".ade-split-pane, .ade-split-content") || !!target_2.closest(".ade-split-header");
+    if (!event_2.defaultPrevented && navigation && event_2.altKey && ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event_2.key)) {
+      event_2.preventDefault();
+      focusDirection(event_2.key);
+    }
+    if (event_2.key === "Escape") {
+      stopDrag();
+    }
+  };
+  const t29 = event_3 => {
+    props.onDragOver?.(event_3);
+    if (event_3.defaultPrevented) {
+      showPreview(null);
+      return;
+    }
+    const drop = locateDrop(event_3);
+    showPreview(drop?.shape ?? null);
+    if (drop) {
+      event_3.preventDefault();
+      event_3.dataTransfer.dropEffect = drag.current ? "move" : "copy";
+    }
+  };
+  const t30 = event_4 => {
+    props.onDragLeave?.(event_4);
+    if (!(event_4.relatedTarget instanceof Node) || !event_4.currentTarget.contains(event_4.relatedTarget)) {
+      showPreview(null);
+    }
+  };
+  const t31 = event_5 => {
+    props.onDrop?.(event_5);
+    if (event_5.defaultPrevented) {
+      stopDrag();
+      return;
+    }
+    const drop_0 = locateDrop(event_5);
+    if (drop_0) {
+      event_5.preventDefault();
+      event_5.stopPropagation();
+      const command_1 = commandFor(drop_0.target);
+      if (command_1) {
+        serial.current = serial.current + 1;
+        dispatch(command_1);
+      } else {
+        onExternalDrop?.(drop_0.target, event_5);
+      }
+    }
+    stopDrag();
+  };
+  const t32 = panes.map(pane_5 => {
+    const rect_7 = visible.get(pane_5.id);
+    const header_2 = Math.min(barHeight, rect_7?.height ?? 0);
+    return /*#__PURE__*/_jsx("section", {
+      "data-split-pane": pane_5.id,
+      "data-focused": value.focused === pane_5.id || undefined,
+      className: "ade-split-pane",
+      "aria-label": t("workspace.pane"),
+      tabIndex: -1,
+      hidden: !rect_7,
+      inert: !rect_7,
+      style: rect_7 ? {
+        left: rect_7.x,
+        top: rect_7.y,
+        width: rect_7.width,
+        height: rect_7.height,
+        borderRadius: radius(rect_7)
+      } : undefined,
+      onFocusCapture: () => dispatch({
+        type: "focus",
+        paneId: pane_5.id
+      }),
+      onPointerDown: () => dispatch({
+        type: "focus",
+        paneId: pane_5.id
+      }),
+      children: header_2 > 0 && /*#__PURE__*/_jsx("div", {
+        className: "ade-split-header",
+        "data-split-header": pane_5.id,
+        style: {
+          height: header_2
+        },
+        children: renderPaneHeader ? renderPaneHeader(pane_5) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(TabStrip, {
+            items: pane_5.views.map(viewId_4 => {
+              const metadata = getTab?.(viewId_4);
+              return {
+                ...metadata,
+                id: viewId_4,
+                label: metadata?.label ?? viewId_4,
+                tabId: id("tab", viewId_4),
+                panelId: id("view", viewId_4)
+              };
+            }),
+            value: pane_5.active,
+            focused: value.focused === pane_5.id,
+            onValueChange: viewId_5 => dispatch({
+              type: "activate",
+              paneId: pane_5.id,
+              viewId: viewId_5
+            }),
+            onClose: onClose ?? (viewId_6 => dispatch({
+              type: "close",
+              viewId: viewId_6
+            })),
+            onDoubleClick: onTabDoubleClick,
+            onContextMenu: onTabContextMenu,
+            onDragStart: (viewId_7, event_6) => startDrag(pane_5, event_6, viewId_7),
+            onDragEnd: stopDrag
+          }), /*#__PURE__*/_jsx(IconButton, {
+            icon: GripVertical,
+            size: "sm",
+            label: t("workspace.movePane"),
+            draggable: true,
+            onDragStart: event_7 => startDrag(pane_5, event_7),
+            onDragEnd: stopDrag
+          }), /*#__PURE__*/_jsx(IconButton, {
+            icon: value.maximized === pane_5.id ? Minimize2 : Maximize2,
+            size: "sm",
+            label: t(value.maximized === pane_5.id ? "workspace.restore" : "workspace.maximize"),
+            onClick: () => dispatch({
+              type: "maximize",
+              paneId: value.maximized === pane_5.id ? null : pane_5.id
+            })
+          })]
+        })
+      })
+    }, pane_5.id);
+  });
+  const t34 = views.map(t33 => {
+    const {
+      pane: pane_6,
+      viewId: viewId_8
+    } = t33;
+    const rect_8 = visible.get(pane_6.id);
+    const active_0 = !!rect_8 && pane_6.active === viewId_8;
+    const header_3 = Math.min(barHeight, rect_8?.height ?? 0);
+    const position = rect_8 ? {
+      left: rect_8.x,
+      top: rect_8.y + header_3,
+      width: rect_8.width,
+      height: Math.max(0, rect_8.height - header_3),
+      borderRadius: bodyRadius(rect_8, header_3)
+    } : {};
+    return /*#__PURE__*/_jsx("div", {
+      id: id("view", viewId_8),
+      role: "tabpanel",
+      "aria-labelledby": showTabs && !renderPaneHeader ? id("tab", viewId_8) : undefined,
+      "aria-label": !showTabs || renderPaneHeader ? getTab?.(viewId_8).label ?? viewId_8 : undefined,
+      className: "ade-split-content",
+      "data-split-view-id": viewId_8,
+      hidden: !active_0,
+      inert: !active_0,
+      tabIndex: 0,
+      style: position,
+      onFocusCapture: () => dispatch({
+        type: "focus",
+        paneId: pane_6.id
+      }),
+      onPointerDown: () => dispatch({
+        type: "focus",
+        paneId: pane_6.id
+      }),
+      children: renderView(viewId_8, {
+        paneId: pane_6.id,
+        active: active_0
+      })
+    }, viewId_8);
+  });
+  const t35 = geometry.dividers.map(divider => /*#__PURE__*/_jsx(Divider, {
+    divider: divider,
+    minimumResizeShare: minimumResizeShare,
+    onResize: sizes => dispatch({
+      type: "resize",
+      splitId: divider.splitId,
+      sizes
+    }),
+    onEqualize: all => dispatch(all ? {
+      type: "equalizeAxis",
+      axis: divider.axis,
+      length: divider.axis === "horizontal" ? measurement.width : measurement.height,
+      gap
+    } : {
+      type: "equalize",
+      splitId: divider.splitId,
+      index: divider.index
+    })
+  }, `${divider.splitId}:${divider.index}`));
+  let t36;
+  if ($[35] !== preview) {
+    t36 = /*#__PURE__*/_jsx(DropPreview, {
+      shape: preview
+    });
+    $[35] = preview;
+    $[36] = t36;
+  } else {
+    t36 = $[36];
+  }
+  let t37;
+  if ($[37] !== t32 || $[38] !== t34 || $[39] !== t35 || $[40] !== t36) {
+    t37 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t32, t34, t35, t36]
     });
+    $[37] = t32;
+    $[38] = t34;
+    $[39] = t35;
+    $[40] = t36;
+    $[41] = t37;
+  } else {
+    t37 = $[41];
+  }
+  let t38;
+  if ($[42] !== layout || $[43] !== props || $[44] !== style || $[45] !== t25 || $[46] !== t26 || $[47] !== t27 || $[48] !== t28 || $[49] !== t29 || $[50] !== t30 || $[51] !== t31 || $[52] !== t37) {
+    t38 = {
+      ...props,
+      className: t25,
+      style,
+      "data-layout": layout,
+      "data-dragging": t26,
+      onFocusCapture: t27,
+      onKeyDown: t28,
+      onDragOver: t29,
+      onDragLeave: t30,
+      onDrop: t31,
+      children: t37
+    };
+    $[42] = layout;
+    $[43] = props;
+    $[44] = style;
+    $[45] = t25;
+    $[46] = t26;
+    $[47] = t27;
+    $[48] = t28;
+    $[49] = t29;
+    $[50] = t30;
+    $[51] = t31;
+    $[52] = t37;
+    $[53] = t38;
+  } else {
+    t38 = $[53];
+  }
+  let t39;
+  if ($[54] !== render || $[55] !== t23 || $[56] !== t38) {
+    t39 = {
+      render,
+      ref: t23,
+      defaultTagName: t24,
+      props: t38
+    };
+    $[54] = render;
+    $[55] = t23;
+    $[56] = t38;
+    $[57] = t39;
+  } else {
+    t39 = $[57];
+  }
+  return useRender(t39);
+}
+function _temp7(element_2) {
+  return element_2.getBoundingClientRect();
+}
+function _temp6(pane_2) {
+  return [pane_2.pane.id, pane_2];
+}
+function _temp5(left, right) {
+  return left.viewId < right.viewId ? -1 : left.viewId > right.viewId ? 1 : 0;
 }
+function _temp4(pane_1) {
+  return pane_1.views.map(viewId => ({
+    pane: pane_1,
+    viewId
+  }));
+}