@adecore/ui 0.31.12 → 0.32.0

package/dist/workspace/TabStrip.js

@@ -1,211 +1,830 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useRender } from '@base-ui/react/use-render';
 import { Pin, X } from 'lucide-react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { Icon } from '../Icon.js';
-import { IconButton } from '../IconButton.js';
-import { Tooltip } from '../Tooltip.js';
+import { Icon } from "../Icon.js";
+import { IconButton } from "../IconButton.js";
+import { Tooltip } from "../Tooltip.js";
 import { tabGapAt, tabRevealScrollLeft } from './geometry.js';
 /* Where an arrow, Home or End moves the selection from `index`, wrapping at either end; null for any other key. */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 function tabIndexForKey(key, index, count) {
-    switch (key) {
-        case 'ArrowRight':
-            return (index + 1) % count;
-        case 'ArrowLeft':
-            return (index + count - 1) % count;
-        case 'Home':
-            return 0;
-        case 'End':
-            return count - 1;
-        default:
-            return null;
-    }
+  switch (key) {
+    case 'ArrowRight':
+      return (index + 1) % count;
+    case 'ArrowLeft':
+      return (index + count - 1) % count;
+    case 'Home':
+      return 0;
+    case 'End':
+      return count - 1;
+    default:
+      return null;
+  }
 }
-export function TabStrip({ items, value, onValueChange, renderTab, focused = true, insertAt, onClose, onDoubleClick, onContextMenu, onDragStart, onDragEnd, onTabDragOver, onTabDrop, render, className, ref, ...props }) {
-    const { t } = useTranslation('ui');
-    const strip = useRef(null);
-    const closingFocus = useRef(null);
-    useLayoutEffect(() => {
-        if (closingFocus.current && !items.some((item) => item.id === closingFocus.current)) {
-            closingFocus.current = null;
-            const target = strip.current?.querySelector('[aria-selected="true"]') ?? strip.current?.querySelector('[role="tab"]');
-            target?.focus({ preventScroll: true });
-        }
-    });
-    const close = (id, action) => {
-        if (strip.current?.contains(strip.current.ownerDocument.activeElement)) {
-            closingFocus.current = id;
-        }
-        if (action) {
-            action();
-        }
-        else {
-            onClose?.(id);
-        }
+export function TabStrip(t0) {
+  const $ = _c(93);
+  let className;
+  let insertAt;
+  let items;
+  let onClose;
+  let onContextMenu;
+  let onDoubleClick;
+  let onDragEnd;
+  let onDragStart;
+  let onTabDragOver;
+  let onTabDrop;
+  let onValueChange;
+  let props;
+  let ref;
+  let render;
+  let renderTab;
+  let t1;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      items,
+      value,
+      onValueChange,
+      renderTab,
+      focused: t1,
+      insertAt,
+      onClose,
+      onDoubleClick,
+      onContextMenu,
+      onDragStart,
+      onDragEnd,
+      onTabDragOver,
+      onTabDrop,
+      render,
+      className,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = insertAt;
+    $[3] = items;
+    $[4] = onClose;
+    $[5] = onContextMenu;
+    $[6] = onDoubleClick;
+    $[7] = onDragEnd;
+    $[8] = onDragStart;
+    $[9] = onTabDragOver;
+    $[10] = onTabDrop;
+    $[11] = onValueChange;
+    $[12] = props;
+    $[13] = ref;
+    $[14] = render;
+    $[15] = renderTab;
+    $[16] = t1;
+    $[17] = value;
+  } else {
+    className = $[1];
+    insertAt = $[2];
+    items = $[3];
+    onClose = $[4];
+    onContextMenu = $[5];
+    onDoubleClick = $[6];
+    onDragEnd = $[7];
+    onDragStart = $[8];
+    onTabDragOver = $[9];
+    onTabDrop = $[10];
+    onValueChange = $[11];
+    props = $[12];
+    ref = $[13];
+    render = $[14];
+    renderTab = $[15];
+    t1 = $[16];
+    value = $[17];
+  }
+  const focused = t1 === undefined ? true : t1;
+  const {
+    t
+  } = useTranslation("ui");
+  const strip = useRef(null);
+  const closingFocus = useRef(null);
+  let t2;
+  if ($[18] !== items) {
+    t2 = () => {
+      if (closingFocus.current && !items.some(item => item.id === closingFocus.current)) {
+        closingFocus.current = null;
+        const target = strip.current?.querySelector("[aria-selected=\"true\"]") ?? strip.current?.querySelector("[role=\"tab\"]");
+        target?.focus({
+          preventScroll: true
+        });
+      }
     };
-    const [edges, setEdges] = useState({ start: false, end: false });
-    const [insertion, setInsertion] = useState(0);
-    const measure = useCallback(() => {
-        const element = strip.current;
-        if (!element) {
-            return;
-        }
-        const start = element.scrollLeft > 0;
-        const end = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
-        setEdges((current) => (current.start === start && current.end === end ? current : { start, end }));
-        if (insertAt !== undefined && insertAt !== null) {
-            const tabs = Array.from(element.querySelectorAll('[data-document-tab]'));
-            const after = tabs[insertAt];
-            const last = tabs.at(-1);
-            setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
-        }
-    }, [insertAt]);
-    // Stays set after the active tab changes, as its width can settle frames later; a person's own scroll ends it.
-    const revealing = useRef(false);
-    const reveal = () => {
-        const element = strip.current;
-        const selected = element?.querySelector('[aria-selected="true"]');
-        if (!revealing.current || !element || !selected) {
-            return;
-        }
-        const container = selected.closest('[data-document-tab]');
-        const tab = container && element.contains(container) ? container : selected;
-        const fade = parseFloat(getComputedStyle(element).getPropertyValue('--fade-size')) || 0;
-        const bounds = element.getBoundingClientRect();
-        const rect = tab.getBoundingClientRect();
-        const left = tabRevealScrollLeft(element, rect.left - bounds.left - element.clientLeft + element.scrollLeft, rect.width, fade);
-        if (left !== element.scrollLeft) {
-            element.scrollLeft = left;
-        }
+    $[18] = items;
+    $[19] = t2;
+  } else {
+    t2 = $[19];
+  }
+  useLayoutEffect(t2);
+  let t3;
+  if ($[20] !== onClose) {
+    t3 = (id, action) => {
+      if (strip.current?.contains(strip.current.ownerDocument.activeElement)) {
+        closingFocus.current = id;
+      }
+      if (action) {
+        action();
+      } else {
+        onClose?.(id);
+      }
     };
-    useLayoutEffect(() => {
-        revealing.current = true;
-    }, [value]);
-    useLayoutEffect(() => {
+    $[20] = onClose;
+    $[21] = t3;
+  } else {
+    t3 = $[21];
+  }
+  const close = t3;
+  let t4;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      start: false,
+      end: false
+    };
+    $[22] = t4;
+  } else {
+    t4 = $[22];
+  }
+  const [edges, setEdges] = useState(t4);
+  const [insertion, setInsertion] = useState(0);
+  let t5;
+  if ($[23] !== insertAt) {
+    t5 = () => {
+      const element = strip.current;
+      if (!element) {
+        return;
+      }
+      const start = element.scrollLeft > 0;
+      const end = element.scrollLeft + element.clientWidth < element.scrollWidth - 1;
+      setEdges(current => current.start === start && current.end === end ? current : {
+        start,
+        end
+      });
+      if (insertAt !== undefined && insertAt !== null) {
+        const tabs = Array.from(element.querySelectorAll("[data-document-tab]"));
+        const after = tabs[insertAt];
+        const last = tabs.at(-1);
+        setInsertion(after?.offsetLeft ?? (last ? last.offsetLeft + last.offsetWidth : 0));
+      }
+    };
+    $[23] = insertAt;
+    $[24] = t5;
+  } else {
+    t5 = $[24];
+  }
+  const measure = t5;
+  const revealing = useRef(false);
+  let t6;
+  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = () => {
+      const element_0 = strip.current;
+      const selected = element_0?.querySelector("[aria-selected=\"true\"]");
+      if (!revealing.current || !element_0 || !selected) {
+        return;
+      }
+      const container = selected.closest("[data-document-tab]");
+      const tab = container && element_0.contains(container) ? container : selected;
+      const fade = parseFloat(getComputedStyle(element_0).getPropertyValue("--fade-size")) || 0;
+      const bounds = element_0.getBoundingClientRect();
+      const rect = tab.getBoundingClientRect();
+      const left = tabRevealScrollLeft(element_0, rect.left - bounds.left - element_0.clientLeft + element_0.scrollLeft, rect.width, fade);
+      if (left !== element_0.scrollLeft) {
+        element_0.scrollLeft = left;
+      }
+    };
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  const reveal = t6;
+  let t7;
+  if ($[26] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = () => {
+      revealing.current = true;
+    };
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  let t8;
+  if ($[27] !== value) {
+    t8 = [value];
+    $[27] = value;
+    $[28] = t8;
+  } else {
+    t8 = $[28];
+  }
+  useLayoutEffect(t7, t8);
+  let t9;
+  if ($[29] !== measure) {
+    t9 = () => {
+      reveal();
+      measure();
+    };
+    $[29] = measure;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  useLayoutEffect(t9);
+  let t10;
+  if ($[31] !== measure) {
+    t10 = () => {
+      const element_1 = strip.current;
+      if (!element_1 || typeof ResizeObserver === "undefined") {
+        return;
+      }
+      const observer = new ResizeObserver(() => {
         reveal();
         measure();
+      });
+      observer.observe(element_1);
+      element_1.querySelectorAll("[data-document-tab]").forEach(tab_0 => observer.observe(tab_0));
+      return () => observer.disconnect();
+    };
+    $[31] = measure;
+    $[32] = t10;
+  } else {
+    t10 = $[32];
+  }
+  useEffect(t10);
+  const gap = _temp2;
+  let t11;
+  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = index => strip.current?.querySelectorAll("[role=\"tab\"]")[index]?.focus();
+    $[33] = t11;
+  } else {
+    t11 = $[33];
+  }
+  let t12;
+  if ($[34] !== close || $[35] !== items || $[36] !== onClose || $[37] !== onContextMenu || $[38] !== onDoubleClick || $[39] !== onDragEnd || $[40] !== onDragStart || $[41] !== onValueChange || $[42] !== value) {
+    t12 = {
+      items,
+      value,
+      onValueChange,
+      onClose,
+      onDoubleClick,
+      onContextMenu,
+      onDragStart,
+      onDragEnd,
+      close,
+      focus: t11
+    };
+    $[34] = close;
+    $[35] = items;
+    $[36] = onClose;
+    $[37] = onContextMenu;
+    $[38] = onDoubleClick;
+    $[39] = onDragEnd;
+    $[40] = onDragStart;
+    $[41] = onValueChange;
+    $[42] = value;
+    $[43] = t12;
+  } else {
+    t12 = $[43];
+  }
+  const context = t12;
+  const t13 = ref ?? null;
+  let t14;
+  if ($[44] !== t13) {
+    t14 = [strip, t13];
+    $[44] = t13;
+    $[45] = t14;
+  } else {
+    t14 = $[45];
+  }
+  let t15;
+  if ($[46] !== props || $[47] !== t) {
+    t15 = props["aria-label"] ?? t("workspace.tabs");
+    $[46] = props;
+    $[47] = t;
+    $[48] = t15;
+  } else {
+    t15 = $[48];
+  }
+  let t16;
+  if ($[49] !== className) {
+    t16 = clsx("ade-tab-strip scroll-fade-x", className);
+    $[49] = className;
+    $[50] = t16;
+  } else {
+    t16 = $[50];
+  }
+  const t17 = focused || undefined;
+  const t18 = edges.start || undefined;
+  const t19 = edges.end || undefined;
+  let t20;
+  if ($[51] !== measure || $[52] !== props) {
+    t20 = event_0 => {
+      props.onScroll?.(event_0);
+      measure();
+    };
+    $[51] = measure;
+    $[52] = props;
+    $[53] = t20;
+  } else {
+    t20 = $[53];
+  }
+  let t21;
+  let t22;
+  if ($[54] !== props) {
+    t21 = event_1 => {
+      props.onWheel?.(event_1);
+      if (event_1.defaultPrevented) {
+        return;
+      }
+      revealing.current = false;
+      if (!event_1.deltaX && event_1.deltaY) {
+        event_1.currentTarget.scrollLeft = event_1.currentTarget.scrollLeft + event_1.deltaY;
+      }
+    };
+    t22 = event_2 => {
+      props.onPointerDown?.(event_2);
+      if (event_2.target === event_2.currentTarget || event_2.pointerType === "touch") {
+        revealing.current = false;
+      }
+    };
+    $[54] = props;
+    $[55] = t21;
+    $[56] = t22;
+  } else {
+    t21 = $[55];
+    t22 = $[56];
+  }
+  let t23;
+  if ($[57] !== onTabDragOver || $[58] !== props) {
+    t23 = event_3 => {
+      props.onDragOver?.(event_3);
+      if (!event_3.defaultPrevented) {
+        onTabDragOver?.(gap(event_3), event_3);
+      }
+    };
+    $[57] = onTabDragOver;
+    $[58] = props;
+    $[59] = t23;
+  } else {
+    t23 = $[59];
+  }
+  let t24;
+  if ($[60] !== onTabDrop || $[61] !== props) {
+    t24 = event_4 => {
+      props.onDrop?.(event_4);
+      if (!event_4.defaultPrevented) {
+        onTabDrop?.(gap(event_4), event_4);
+      }
+    };
+    $[60] = onTabDrop;
+    $[61] = props;
+    $[62] = t24;
+  } else {
+    t24 = $[62];
+  }
+  let t25;
+  if ($[63] !== context || $[64] !== items || $[65] !== renderTab) {
+    let t26;
+    if ($[67] !== context || $[68] !== renderTab) {
+      t26 = item_0 => /*#__PURE__*/_jsx(TabContext.Provider, {
+        value: context,
+        children: renderTab ? renderTab(item_0) : /*#__PURE__*/_jsx(DocumentTab, {
+          item: item_0
+        })
+      }, item_0.id);
+      $[67] = context;
+      $[68] = renderTab;
+      $[69] = t26;
+    } else {
+      t26 = $[69];
+    }
+    t25 = items.map(t26);
+    $[63] = context;
+    $[64] = items;
+    $[65] = renderTab;
+    $[66] = t25;
+  } else {
+    t25 = $[66];
+  }
+  let t26;
+  if ($[70] !== insertAt || $[71] !== insertion) {
+    t26 = insertAt !== undefined && insertAt !== null && /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      className: "ade-tab-insertion",
+      style: {
+        left: insertion
+      }
     });
-    useEffect(() => {
-        const element = strip.current;
-        if (!element || typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        const observer = new ResizeObserver(() => {
-            reveal();
-            measure();
-        });
-        observer.observe(element);
-        element.querySelectorAll('[data-document-tab]').forEach((tab) => observer.observe(tab));
-        return () => observer.disconnect();
-    });
-    const gap = (event) => {
-        const rects = Array.from(event.currentTarget.querySelectorAll('[data-document-tab]'), (tab) => tab.getBoundingClientRect());
-        return tabGapAt(rects, event.clientX);
-    };
-    const context = {
-        items,
-        value,
-        onValueChange,
-        onClose,
-        onDoubleClick,
-        onContextMenu,
-        onDragStart,
-        onDragEnd,
-        close,
-        focus: (index) => strip.current?.querySelectorAll('[role="tab"]')[index]?.focus()
-    };
-    return useRender({
-        render,
-        ref: [strip, ref ?? null],
-        defaultTagName: 'div',
-        props: {
-            ...props,
-            role: 'tablist',
-            'aria-label': props['aria-label'] ?? t('workspace.tabs'),
-            className: clsx('ade-tab-strip scroll-fade-x', className),
-            'data-focused': focused || undefined,
-            'data-fade-start': edges.start || undefined,
-            'data-fade-end': edges.end || undefined,
-            onScroll: (event) => {
-                props.onScroll?.(event);
-                measure();
-            },
-            onWheel: (event) => {
-                props.onWheel?.(event);
-                if (event.defaultPrevented) {
-                    return;
-                }
-                revealing.current = false;
-                if (!event.deltaX && event.deltaY) {
-                    event.currentTarget.scrollLeft += event.deltaY;
-                }
-            },
-            onPointerDown: (event) => {
-                props.onPointerDown?.(event);
-                // A press on the strip itself grabs its scrollbar, and a touch may pan it.
-                if (event.target === event.currentTarget || event.pointerType === 'touch') {
-                    revealing.current = false;
-                }
-            },
-            onDragOver: (event) => {
-                props.onDragOver?.(event);
-                if (!event.defaultPrevented) {
-                    onTabDragOver?.(gap(event), event);
-                }
-            },
-            onDrop: (event) => {
-                props.onDrop?.(event);
-                if (!event.defaultPrevented) {
-                    onTabDrop?.(gap(event), event);
-                }
-            },
-            children: (_jsxs(_Fragment, { children: [items.map((item) => (_jsx(TabContext.Provider, { value: context, children: renderTab ? renderTab(item) : _jsx(DocumentTab, { item: item }) }, item.id))), insertAt !== undefined && insertAt !== null && _jsx("span", { "aria-hidden": "true", className: "ade-tab-insertion", style: { left: insertion } })] }))
-        }
+    $[70] = insertAt;
+    $[71] = insertion;
+    $[72] = t26;
+  } else {
+    t26 = $[72];
+  }
+  let t27;
+  if ($[73] !== t25 || $[74] !== t26) {
+    t27 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t25, t26]
     });
+    $[73] = t25;
+    $[74] = t26;
+    $[75] = t27;
+  } else {
+    t27 = $[75];
+  }
+  let t28;
+  if ($[76] !== props || $[77] !== t15 || $[78] !== t16 || $[79] !== t17 || $[80] !== t18 || $[81] !== t19 || $[82] !== t20 || $[83] !== t21 || $[84] !== t22 || $[85] !== t23 || $[86] !== t24 || $[87] !== t27) {
+    t28 = {
+      ...props,
+      role: "tablist",
+      "aria-label": t15,
+      className: t16,
+      "data-focused": t17,
+      "data-fade-start": t18,
+      "data-fade-end": t19,
+      onScroll: t20,
+      onWheel: t21,
+      onPointerDown: t22,
+      onDragOver: t23,
+      onDrop: t24,
+      children: t27
+    };
+    $[76] = props;
+    $[77] = t15;
+    $[78] = t16;
+    $[79] = t17;
+    $[80] = t18;
+    $[81] = t19;
+    $[82] = t20;
+    $[83] = t21;
+    $[84] = t22;
+    $[85] = t23;
+    $[86] = t24;
+    $[87] = t27;
+    $[88] = t28;
+  } else {
+    t28 = $[88];
+  }
+  let t29;
+  if ($[89] !== render || $[90] !== t14 || $[91] !== t28) {
+    t29 = {
+      render,
+      ref: t14,
+      defaultTagName: "div",
+      props: t28
+    };
+    $[89] = render;
+    $[90] = t14;
+    $[91] = t28;
+    $[92] = t29;
+  } else {
+    t29 = $[92];
+  }
+  return useRender(t29);
+}
+function _temp2(event) {
+  const rects = Array.from(event.currentTarget.querySelectorAll("[data-document-tab]"), _temp);
+  return tabGapAt(rects, event.clientX);
+}
+function _temp(tab_1) {
+  return tab_1.getBoundingClientRect();
 }
 const TabContext = createContext(null);
 /** A tab with application-owned metadata and menus, rendered inside TabStrip's renderTab slot. */
-export function DocumentTab({ item, onClose, closeShortcut, onDoubleClick, onDragStart, onDragEnd, className, render, ref, ...props }) {
-    const context = useContext(TabContext);
-    if (!context) {
-        throw new Error('DocumentTab must be rendered inside TabStrip.');
+export function DocumentTab(t0) {
+  const $ = _c(92);
+  let className;
+  let closeShortcut;
+  let item;
+  let onClose;
+  let onDoubleClick;
+  let onDragEnd;
+  let onDragStart;
+  let props;
+  let ref;
+  let render;
+  if ($[0] !== t0) {
+    ({
+      item,
+      onClose,
+      closeShortcut,
+      onDoubleClick,
+      onDragStart,
+      onDragEnd,
+      className,
+      render,
+      ref,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = closeShortcut;
+    $[3] = item;
+    $[4] = onClose;
+    $[5] = onDoubleClick;
+    $[6] = onDragEnd;
+    $[7] = onDragStart;
+    $[8] = props;
+    $[9] = ref;
+    $[10] = render;
+  } else {
+    className = $[1];
+    closeShortcut = $[2];
+    item = $[3];
+    onClose = $[4];
+    onDoubleClick = $[5];
+    onDragEnd = $[6];
+    onDragStart = $[7];
+    props = $[8];
+    ref = $[9];
+    render = $[10];
+  }
+  const context = useContext(TabContext);
+  if (!context) {
+    throw new Error("DocumentTab must be rendered inside TabStrip.");
+  }
+  const {
+    t
+  } = useTranslation("ui");
+  const {
+    items,
+    value,
+    onValueChange
+  } = context;
+  let t1;
+  if ($[11] !== item.id || $[12] !== items) {
+    let t2;
+    if ($[14] !== item.id) {
+      t2 = candidate => candidate.id === item.id;
+      $[14] = item.id;
+      $[15] = t2;
+    } else {
+      t2 = $[15];
     }
-    const { t } = useTranslation('ui');
-    const { items, value, onValueChange } = context;
-    const index = items.findIndex((candidate) => candidate.id === item.id);
-    const close = () => context.close(item.id, onClose);
-    const closable = item.closable !== false && (onClose ?? context.onClose) !== undefined;
-    return useRender({
-        render,
-        ref,
-        defaultTagName: 'span',
-        props: {
-            ...props,
-            className: clsx('ade-document-tab', className),
-            'data-document-tab': item.id,
-            'data-active': item.id === value || undefined,
-            'data-detail': !!item.detail || undefined,
-            onContextMenu: (event) => {
-                props.onContextMenu?.(event);
-                context.onContextMenu?.(item.id, event);
-            },
-            children: (_jsxs(_Fragment, { children: [_jsx(Tooltip, { label: item.hint ?? item.label, children: _jsxs("button", { type: "button", role: "tab", id: item.tabId, "aria-controls": item.panelId, "aria-selected": item.id === value, tabIndex: item.id === value || (value === null && index === 0) ? 0 : -1, className: "ade-document-tab-open", draggable: !!(onDragStart ?? context.onDragStart), onClick: () => onValueChange(item.id), onDoubleClick: (event) => (onDoubleClick ?? context.onDoubleClick)?.(item.id, event), onDragStart: (event) => {
-                                event.stopPropagation();
-                                (onDragStart ?? context.onDragStart)?.(item.id, event);
-                            }, onDragEnd: onDragEnd ?? context.onDragEnd, onKeyDown: (event) => {
-                                const next = tabIndexForKey(event.key, index, items.length);
-                                if (next !== null) {
-                                    event.preventDefault();
-                                    onValueChange(items[next].id);
-                                    context.focus(next);
-                                }
-                                else if (event.key === 'Delete' && closable) {
-                                    event.preventDefault();
-                                    close();
-                                }
-                            }, children: [item.icon, _jsx("span", { className: "truncate", children: item.label }), item.detail, item.attention, item.unsaved && (_jsx("span", { className: "ade-tab-unsaved", children: _jsx("span", { className: "sr-only", children: typeof item.unsaved === 'string' ? item.unsaved : t('workspace.unsaved') }) }))] }) }), item.pinned && _jsx(Icon, { icon: Pin, size: 12, className: "shrink-0 text-text-muted" }), closable && (_jsx(IconButton, { icon: X, size: "2xs", label: t('workspace.closeTab', { name: item.label }), kbd: closeShortcut, className: "ade-document-tab-close", onClick: close }))] }))
+    t1 = items.findIndex(t2);
+    $[11] = item.id;
+    $[12] = items;
+    $[13] = t1;
+  } else {
+    t1 = $[13];
+  }
+  const index = t1;
+  let t2;
+  if ($[16] !== context || $[17] !== item.id || $[18] !== onClose) {
+    t2 = () => context.close(item.id, onClose);
+    $[16] = context;
+    $[17] = item.id;
+    $[18] = onClose;
+    $[19] = t2;
+  } else {
+    t2 = $[19];
+  }
+  const close = t2;
+  const closable = item.closable !== false && (onClose ?? context.onClose) !== undefined;
+  let t3;
+  if ($[20] !== className) {
+    t3 = clsx("ade-document-tab", className);
+    $[20] = className;
+    $[21] = t3;
+  } else {
+    t3 = $[21];
+  }
+  const t4 = item.id === value || undefined;
+  const t5 = !!item.detail || undefined;
+  let t6;
+  if ($[22] !== context || $[23] !== item.id || $[24] !== props) {
+    t6 = event => {
+      props.onContextMenu?.(event);
+      context.onContextMenu?.(item.id, event);
+    };
+    $[22] = context;
+    $[23] = item.id;
+    $[24] = props;
+    $[25] = t6;
+  } else {
+    t6 = $[25];
+  }
+  const t7 = item.hint ?? item.label;
+  const t8 = item.id === value;
+  const t9 = item.id === value || value === null && index === 0 ? 0 : -1;
+  const t10 = !!(onDragStart ?? context.onDragStart);
+  let t11;
+  if ($[26] !== item.id || $[27] !== onValueChange) {
+    t11 = () => onValueChange(item.id);
+    $[26] = item.id;
+    $[27] = onValueChange;
+    $[28] = t11;
+  } else {
+    t11 = $[28];
+  }
+  let t12;
+  if ($[29] !== context.onDoubleClick || $[30] !== item.id || $[31] !== onDoubleClick) {
+    t12 = event_0 => (onDoubleClick ?? context.onDoubleClick)?.(item.id, event_0);
+    $[29] = context.onDoubleClick;
+    $[30] = item.id;
+    $[31] = onDoubleClick;
+    $[32] = t12;
+  } else {
+    t12 = $[32];
+  }
+  let t13;
+  if ($[33] !== context.onDragStart || $[34] !== item.id || $[35] !== onDragStart) {
+    t13 = event_1 => {
+      event_1.stopPropagation();
+      (onDragStart ?? context.onDragStart)?.(item.id, event_1);
+    };
+    $[33] = context.onDragStart;
+    $[34] = item.id;
+    $[35] = onDragStart;
+    $[36] = t13;
+  } else {
+    t13 = $[36];
+  }
+  const t14 = onDragEnd ?? context.onDragEnd;
+  let t15;
+  if ($[37] !== closable || $[38] !== close || $[39] !== context || $[40] !== index || $[41] !== items || $[42] !== onValueChange) {
+    t15 = event_2 => {
+      const next = tabIndexForKey(event_2.key, index, items.length);
+      if (next !== null) {
+        event_2.preventDefault();
+        onValueChange(items[next].id);
+        context.focus(next);
+      } else {
+        if (event_2.key === "Delete" && closable) {
+          event_2.preventDefault();
+          close();
         }
+      }
+    };
+    $[37] = closable;
+    $[38] = close;
+    $[39] = context;
+    $[40] = index;
+    $[41] = items;
+    $[42] = onValueChange;
+    $[43] = t15;
+  } else {
+    t15 = $[43];
+  }
+  let t16;
+  if ($[44] !== item.label) {
+    t16 = /*#__PURE__*/_jsx("span", {
+      className: "truncate",
+      children: item.label
     });
-}
+    $[44] = item.label;
+    $[45] = t16;
+  } else {
+    t16 = $[45];
+  }
+  let t17;
+  if ($[46] !== item.unsaved || $[47] !== t) {
+    t17 = item.unsaved && /*#__PURE__*/_jsx("span", {
+      className: "ade-tab-unsaved",
+      children: /*#__PURE__*/_jsx("span", {
+        className: "sr-only",
+        children: typeof item.unsaved === "string" ? item.unsaved : t("workspace.unsaved")
+      })
+    });
+    $[46] = item.unsaved;
+    $[47] = t;
+    $[48] = t17;
+  } else {
+    t17 = $[48];
+  }
+  let t18;
+  if ($[49] !== item.attention || $[50] !== item.detail || $[51] !== item.icon || $[52] !== item.panelId || $[53] !== item.tabId || $[54] !== t10 || $[55] !== t11 || $[56] !== t12 || $[57] !== t13 || $[58] !== t14 || $[59] !== t15 || $[60] !== t16 || $[61] !== t17 || $[62] !== t8 || $[63] !== t9) {
+    t18 = /*#__PURE__*/_jsxs("button", {
+      type: "button",
+      role: "tab",
+      id: item.tabId,
+      "aria-controls": item.panelId,
+      "aria-selected": t8,
+      tabIndex: t9,
+      className: "ade-document-tab-open",
+      draggable: t10,
+      onClick: t11,
+      onDoubleClick: t12,
+      onDragStart: t13,
+      onDragEnd: t14,
+      onKeyDown: t15,
+      children: [item.icon, t16, item.detail, item.attention, t17]
+    });
+    $[49] = item.attention;
+    $[50] = item.detail;
+    $[51] = item.icon;
+    $[52] = item.panelId;
+    $[53] = item.tabId;
+    $[54] = t10;
+    $[55] = t11;
+    $[56] = t12;
+    $[57] = t13;
+    $[58] = t14;
+    $[59] = t15;
+    $[60] = t16;
+    $[61] = t17;
+    $[62] = t8;
+    $[63] = t9;
+    $[64] = t18;
+  } else {
+    t18 = $[64];
+  }
+  let t19;
+  if ($[65] !== t18 || $[66] !== t7) {
+    t19 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t7,
+      children: t18
+    });
+    $[65] = t18;
+    $[66] = t7;
+    $[67] = t19;
+  } else {
+    t19 = $[67];
+  }
+  let t20;
+  if ($[68] !== item.pinned) {
+    t20 = item.pinned && /*#__PURE__*/_jsx(Icon, {
+      icon: Pin,
+      size: 12,
+      className: "shrink-0 text-text-muted"
+    });
+    $[68] = item.pinned;
+    $[69] = t20;
+  } else {
+    t20 = $[69];
+  }
+  let t21;
+  if ($[70] !== closable || $[71] !== close || $[72] !== closeShortcut || $[73] !== item.label || $[74] !== t) {
+    t21 = closable && /*#__PURE__*/_jsx(IconButton, {
+      icon: X,
+      size: "2xs",
+      label: t("workspace.closeTab", {
+        name: item.label
+      }),
+      kbd: closeShortcut,
+      className: "ade-document-tab-close",
+      onClick: close
+    });
+    $[70] = closable;
+    $[71] = close;
+    $[72] = closeShortcut;
+    $[73] = item.label;
+    $[74] = t;
+    $[75] = t21;
+  } else {
+    t21 = $[75];
+  }
+  let t22;
+  if ($[76] !== t19 || $[77] !== t20 || $[78] !== t21) {
+    t22 = /*#__PURE__*/_jsxs(_Fragment, {
+      children: [t19, t20, t21]
+    });
+    $[76] = t19;
+    $[77] = t20;
+    $[78] = t21;
+    $[79] = t22;
+  } else {
+    t22 = $[79];
+  }
+  let t23;
+  if ($[80] !== item.id || $[81] !== props || $[82] !== t22 || $[83] !== t3 || $[84] !== t4 || $[85] !== t5 || $[86] !== t6) {
+    t23 = {
+      ...props,
+      className: t3,
+      "data-document-tab": item.id,
+      "data-active": t4,
+      "data-detail": t5,
+      onContextMenu: t6,
+      children: t22
+    };
+    $[80] = item.id;
+    $[81] = props;
+    $[82] = t22;
+    $[83] = t3;
+    $[84] = t4;
+    $[85] = t5;
+    $[86] = t6;
+    $[87] = t23;
+  } else {
+    t23 = $[87];
+  }
+  let t24;
+  if ($[88] !== ref || $[89] !== render || $[90] !== t23) {
+    t24 = {
+      render,
+      ref,
+      defaultTagName: "span",
+      props: t23
+    };
+    $[88] = ref;
+    $[89] = render;
+    $[90] = t23;
+    $[91] = t24;
+  } else {
+    t24 = $[91];
+  }
+  return useRender(t24);
+}