@sqlrooms/ui 0.29.0-rc.1 → 0.29.0-rc.11

package/dist/components/tab-strip.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DndContext, PointerSensor, closestCenter, useSensor, useSensors, } from '@dnd-kit/core';
+import { DndContext, DragOverlay, PointerSensor, closestCenter, useDndMonitor, useSensor, useSensors, } from '@dnd-kit/core';
 import { restrictToHorizontalAxis, restrictToParentElement, } from '@dnd-kit/modifiers';
 import { SortableContext, arrayMove, horizontalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
 import { EllipsisVerticalIcon, ListCollapseIcon, PlusIcon, SearchIcon, XIcon, } from 'lucide-react';
-import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import React, { createContext, useContext, useEffect, useLayoutEffect, useId, useMemo, useRef, useState, } from 'react';
 const DRAG_MODIFIERS = [restrictToHorizontalAxis, restrictToParentElement];
 import { cn } from '../lib/utils';
 import { Button } from './button';
@@ -21,11 +21,43 @@ function useTabStripContext() {
     }
     return context;
 }
+function useOptionalTabStripContext() {
+    return useContext(TabStripContext);
+}
+function getFontSizeStyle(fontSize) {
+    return fontSize === undefined
+        ? undefined
+        : { fontSize };
+}
+function mergeFontSizeStyle(fontSize, style) {
+    if (fontSize === undefined)
+        return style;
+    if (style === undefined)
+        return { fontSize };
+    return { ...style, fontSize: style?.fontSize ?? fontSize };
+}
+const DEFAULT_TAB_DRAG_KIND = 'sqlrooms.tab';
+const TAB_STRIP_BUTTON_CLASSNAMES = [
+    'flex h-full min-w-0 min-h-7 items-center',
+    'hover:bg-primary/10 overflow-hidden px-6 py-1 font-normal',
+    'focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-inset',
+];
 /**
  * A single sortable tab item.
  */
-function SortableTab({ tab, tabClassName, editingTabId, hideCloseButton, onClose, onStartEditing, onStopEditing, onInlineRename, renderTabTitle, renderTabMenu, renderTabLabel, }) {
-    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: tab.id });
+function SortableTab({ tab, sortableId, tabClassName, editingTabId, closeable = true, onClose, onActivate, onStartEditing, onStopEditing, onInlineRename, renderTabMenu, renderTabLabel, dndScopeId, getTabDragData, fontSize, }) {
+    const tabDragData = getTabDragData?.(tab);
+    const isEditing = editingTabId === tab.id;
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+        id: sortableId,
+        disabled: isEditing,
+        data: {
+            kind: DEFAULT_TAB_DRAG_KIND,
+            ...tabDragData,
+            tabId: tab.id,
+            tabStripId: dndScopeId,
+        },
+    });
     const style = {
         // Use Translate instead of Transform to avoid scale changes that squeeze the tab
         transform: transform
@@ -35,16 +67,17 @@ function SortableTab({ tab, tabClassName, editingTabId, hideCloseButton, onClose
         opacity: isDragging ? 0.5 : 1,
     };
     const menuContent = renderTabMenu?.(tab);
-    return (_jsx("div", { ref: setNodeRef, className: "h-full shrink-0", style: style, "data-tab-id": tab.id, ...attributes, ...listeners, tabIndex: -1, children: _jsx("div", { "data-state": editingTabId === tab.id ? 'editing' : undefined, className: cn('data-[state=inactive]:hover:bg-primary/5', 'group flex h-full max-w-[200px] min-w-[100px] shrink-0 cursor-grab', 'items-center justify-between gap-1 overflow-hidden rounded-b-none', 'py-0 pr-1 pl-4 font-normal data-[state=active]:shadow-none', tabClassName, editingTabId === tab.id && 'focus-visible:ring-0'), children: _jsxs("div", { className: "relative flex h-full min-w-0 flex-1 items-center", children: [_jsx(TabsTrigger, { value: tab.id, tabIndex: editingTabId === tab.id ? -1 : undefined, "data-editing": editingTabId === tab.id ? '' : undefined, className: cn('flex h-full min-w-0 flex-1 items-center justify-start gap-1', 'hover:bg-primary/10 overflow-hidden px-6 py-1 font-normal', 'min-h-7', 'data-[state=active]:bg-primary/10 data-[state=active]:text-foreground data-[state=active]:shadow-none', 'focus-visible:ring-primary focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:ring-inset', editingTabId === tab.id && 'focus-visible:ring-0'), onDoubleClick: () => onStartEditing(tab.id), children: editingTabId !== tab.id ? (_jsx("div", { className: "truncate text-sm", children: renderTabLabel ? renderTabLabel(tab) : tab.name })) : (_jsx(EditableText, { value: tab.name, onChange: (newName) => onInlineRename(tab.id, newName), className: "h-6 min-w-0 flex-1 truncate text-sm shadow-none", isEditing: true, autoFocus: true, selectOnFocus: true, allowTabFocusWhenNotEditing: false, onEditingChange: (isEditing) => {
+    const fontSizeStyle = getFontSizeStyle(fontSize);
+    return (_jsx("div", { ref: setNodeRef, className: "h-full shrink-0", style: style, "data-tab-id": tab.id, ...(isEditing ? {} : attributes), ...(isEditing ? {} : listeners), tabIndex: -1, children: _jsx("div", { "data-state": isEditing ? 'editing' : undefined, className: cn('data-[state=inactive]:hover:bg-primary/5', 'group/tab flex h-full max-w-[200px] min-w-[100px] shrink-0 cursor-grab', 'items-center justify-between gap-1 overflow-hidden rounded-b-none', 'py-0 pr-1 font-normal data-[state=active]:shadow-none', tabClassName, isEditing && 'focus-visible:ring-0'), children: _jsxs("div", { className: "relative flex h-full min-w-0 flex-1 items-center", children: [_jsx(TabsTrigger, { value: tab.id, tabIndex: isEditing ? -1 : undefined, "data-editing": isEditing ? '' : undefined, className: cn(...TAB_STRIP_BUTTON_CLASSNAMES, 'flex-1 gap-1', isEditing ? 'justify-start' : 'justify-center text-center', 'data-[state=active]:bg-primary/10 data-[state=active]:text-foreground data-[state=active]:shadow-none', isEditing && 'focus-visible:ring-0'), style: fontSizeStyle, onClick: () => onActivate(tab.id), onDoubleClick: () => onStartEditing(tab.id), children: !isEditing ? (_jsx("div", { className: "min-w-0 flex-1 truncate text-center", children: renderTabLabel ? renderTabLabel(tab) : tab.name })) : (_jsx(EditableText, { value: tab.name, onChange: (newName) => onInlineRename(tab.id, newName), className: "h-6 min-w-0 flex-1 truncate shadow-none", style: fontSizeStyle, isEditing: true, autoFocus: true, selectOnFocus: true, allowTabFocusWhenNotEditing: false, onEditingChange: (isEditing) => {
                                 if (!isEditing) {
                                     onStopEditing();
                                 }
-                            } })) }), _jsxs("div", { className: "flex shrink-0 items-center", children: [menuContent && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Tab options", className: "hover:bg-primary/10 focus-visible:bg-primary/10 focus-visible:ring-primary absolute top-1/2 left-1 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded p-1 opacity-0 outline-hidden group-hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-0 data-[state=open]:opacity-100", onMouseDown: (event) => {
+                            } })) }), _jsxs("div", { className: "flex shrink-0 items-center", children: [menuContent && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": "Tab options", className: "hover:bg-primary/10 focus-visible:bg-primary/10 focus-visible:ring-ring absolute top-1/2 left-1 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded p-1 opacity-0 outline-hidden group-hover/tab:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-0 data-[state=open]:opacity-100", onMouseDown: (event) => {
                                                 event.stopPropagation();
                                                 event.preventDefault();
                                             }, onClick: (event) => {
                                                 event.stopPropagation();
-                                            }, children: _jsx(EllipsisVerticalIcon, { className: "h-3 w-3" }) }) }), _jsx(DropdownMenuContent, { align: "start", children: menuContent })] })), !hideCloseButton && (_jsx("button", { type: "button", "aria-label": "Close tab", className: "hover:bg-primary/10 focus-visible:bg-primary/10 focus-visible:ring-primary absolute top-1/2 right-1 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded p-1 opacity-0 outline-hidden group-hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-0", onMouseDown: (event) => {
+                                            }, children: _jsx(EllipsisVerticalIcon, { className: "h-3 w-3" }) }) }), _jsx(DropdownMenuContent, { align: "start", style: fontSizeStyle, children: menuContent })] })), closeable && (_jsx("button", { type: "button", "aria-label": "Close tab", className: "hover:bg-primary/10 focus-visible:bg-primary/10 focus-visible:ring-ring absolute top-1/2 right-1 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded p-1 opacity-0 outline-hidden group-hover/tab:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-offset-0", onMouseDown: (event) => {
                                     event.stopPropagation();
                                     event.preventDefault();
                                 }, onClick: (event) => {
@@ -57,10 +90,11 @@ function SortableTab({ tab, tabClassName, editingTabId, hideCloseButton, onClose
  * A menu item for the tab's dropdown menu.
  */
 function TabStripMenuItem({ children, onClick, variant = 'default', className, disabled, }) {
+    const { fontSize } = useTabStripContext();
     return (_jsx(DropdownMenuItem, { disabled: disabled, onClick: (event) => {
             event.stopPropagation();
             onClick?.();
-        }, className: cn(variant === 'destructive' && 'text-destructive focus:text-destructive', className), children: children }));
+        }, className: cn(variant === 'destructive' && 'text-destructive focus:text-destructive', className), style: getFontSizeStyle(fontSize), children: children }));
 }
 /**
  * A separator for the tab's dropdown menu.
@@ -81,32 +115,115 @@ function TabStripSearchItemAction({ icon, onClick, 'aria-label': ariaLabel, clas
  * Renders the scrollable row of open tabs with drag-to-reorder support.
  */
 function TabStripTabs({ className, tabClassName }) {
-    const { openTabItems, editingTabId, scrollContainerRef, onOpenTabsChange, renderTabTitle, renderTabMenu, renderTabLabel, preventCloseLastTab, handleStartEditing, handleStopEditing, handleInlineRename, handleClose, } = useTabStripContext();
+    const { openTabItems, editingTabId, scrollContainerRef, onOpenTabsChange, dndMode, dndScopeId, getTabDragData, renderTabMenu, renderTabLabel, preventCloseLastTab, closeable, fontSize, handleStartEditing, handleStopEditing, handleInlineRename, handleClose, onActivate, } = useTabStripContext();
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
             distance: 5, // 5px movement before drag starts (allows clicks)
         },
     }));
+    const [activeDraggedTabId, setActiveDraggedTabId] = useState(null);
+    const [hideSharedDragOverlay, setHideSharedDragOverlay] = useState(false);
+    const isDragInsideTabStrip = (event) => {
+        const rect = event.active.rect.current.translated ?? event.active.rect.current.initial;
+        const tabStripRect = scrollContainerRef.current?.getBoundingClientRect();
+        if (!rect || !tabStripRect)
+            return false;
+        const centerX = rect.left + rect.width / 2;
+        const centerY = rect.top + rect.height / 2;
+        return (centerX >= tabStripRect.left &&
+            centerX <= tabStripRect.right &&
+            centerY >= tabStripRect.top &&
+            centerY <= tabStripRect.bottom);
+    };
+    const shouldHideSharedDragOverlay = (event) => {
+        if (isDragInsideTabStrip(event)) {
+            return true;
+        }
+        if ('over' in event) {
+            return event.over?.data.current?.tabStripId === dndScopeId;
+        }
+        return false;
+    };
     const handleDragEnd = (event) => {
         const { active, over } = event;
         if (!over || active.id === over.id || !onOpenTabsChange)
             return;
-        const oldIndex = openTabItems.findIndex((tab) => tab.id === active.id);
-        const newIndex = openTabItems.findIndex((tab) => tab.id === over.id);
+        const activeData = active.data.current;
+        const overData = over.data.current;
+        const activeTabId = typeof activeData?.tabId === 'string'
+            ? activeData.tabId
+            : String(active.id);
+        const overTabId = typeof overData?.tabId === 'string' ? overData.tabId : String(over.id);
+        if (dndMode === 'shared' &&
+            (activeData?.tabStripId !== dndScopeId ||
+                overData?.tabStripId !== dndScopeId)) {
+            return;
+        }
+        const oldIndex = openTabItems.findIndex((tab) => tab.id === activeTabId);
+        const newIndex = openTabItems.findIndex((tab) => tab.id === overTabId);
         if (oldIndex !== -1 && newIndex !== -1) {
             const newOrder = arrayMove(openTabItems.map((t) => t.id), oldIndex, newIndex);
             onOpenTabsChange(newOrder);
         }
     };
-    const tabIds = useMemo(() => openTabItems.map((t) => t.id), [openTabItems]);
-    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: DRAG_MODIFIERS, autoScroll: true, onDragEnd: handleDragEnd, children: _jsx(SortableContext, { items: tabIds, strategy: horizontalListSortingStrategy, children: _jsx(ScrollableRow, { className: "h-full min-w-0 flex-1", scrollRef: scrollContainerRef, scrollClassName: cn('flex h-full min-w-0 items-center gap-1 overflow-x-auto overflow-y-visible', 'py-1 pl-1 pr-1 scroll-pl-7 scroll-pr-7 [&::-webkit-scrollbar]:hidden', className), arrowVisibility: "always", arrowClassName: "w-7", arrowIconClassName: "h-4 w-4 opacity-60", children: openTabItems.map((tab) => (_jsx(SortableTab, { tab: tab, tabClassName: tabClassName, editingTabId: editingTabId, hideCloseButton: preventCloseLastTab && openTabItems.length === 1, onClose: handleClose, onStartEditing: handleStartEditing, onStopEditing: handleStopEditing, onInlineRename: handleInlineRename, renderTabTitle: renderTabTitle, renderTabMenu: renderTabMenu, renderTabLabel: renderTabLabel }, tab.id))) }) }) }));
+    const getSortableId = (tabId) => dndMode === 'shared' ? `${dndScopeId}:${tabId}` : tabId;
+    const tabIds = useMemo(() => openTabItems.map((t) => getSortableId(t.id)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [openTabItems, dndMode, dndScopeId]);
+    const content = (_jsx(SortableContext, { items: tabIds, strategy: horizontalListSortingStrategy, children: _jsx(ScrollableRow, { className: "h-full min-w-0 shrink overflow-hidden", scrollRef: scrollContainerRef, scrollClassName: cn('flex h-full min-w-0 items-center gap-1 overflow-x-auto overflow-y-visible', 'pl-1 pr-1 scroll-pl-7 scroll-pr-7 [&::-webkit-scrollbar]:hidden', className), arrowVisibility: "always", arrowClassName: "w-7", arrowIconClassName: "h-4 w-4 opacity-60", children: openTabItems.map((tab) => (_jsx(SortableTab, { tab: tab, sortableId: getSortableId(tab.id), tabClassName: tabClassName, editingTabId: editingTabId, closeable: closeable && !(preventCloseLastTab && openTabItems.length === 1), onClose: handleClose, onActivate: onActivate ?? (() => undefined), onStartEditing: handleStartEditing, onStopEditing: handleStopEditing, onInlineRename: handleInlineRename, renderTabMenu: renderTabMenu, renderTabLabel: renderTabLabel, dndScopeId: dndScopeId, getTabDragData: getTabDragData, fontSize: fontSize }, tab.id))) }) }));
+    if (dndMode === 'shared') {
+        const activeDraggedTab = activeDraggedTabId
+            ? openTabItems.find((tab) => tab.id === activeDraggedTabId)
+            : undefined;
+        return (_jsxs(_Fragment, { children: [_jsx(SharedTabStripDndMonitor, { dndScopeId: dndScopeId, handleDragEnd: handleDragEnd, setActiveDraggedTabId: setActiveDraggedTabId, setHideSharedDragOverlay: setHideSharedDragOverlay, shouldHideSharedDragOverlay: shouldHideSharedDragOverlay }), content, _jsx(DragOverlay, { dropAnimation: null, children: activeDraggedTab && !hideSharedDragOverlay ? (_jsx(TabDragOverlay, { tab: activeDraggedTab, renderTabLabel: renderTabLabel, fontSize: fontSize })) : null })] }));
+    }
+    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, modifiers: DRAG_MODIFIERS, autoScroll: true, onDragEnd: handleDragEnd, children: content }));
+}
+function SharedTabStripDndMonitor({ dndScopeId, handleDragEnd, setActiveDraggedTabId, setHideSharedDragOverlay, shouldHideSharedDragOverlay, }) {
+    const isOwnTabDrag = (event) => event.active.data.current?.tabStripId === dndScopeId;
+    useDndMonitor({
+        onDragStart: (event) => {
+            const activeData = event.active.data.current;
+            if (!isOwnTabDrag(event)) {
+                return;
+            }
+            setActiveDraggedTabId(typeof activeData?.tabId === 'string' ? activeData.tabId : null);
+            setHideSharedDragOverlay(true);
+        },
+        onDragMove: (event) => {
+            if (!isOwnTabDrag(event))
+                return;
+            setHideSharedDragOverlay(shouldHideSharedDragOverlay(event));
+        },
+        onDragOver: (event) => {
+            if (!isOwnTabDrag(event))
+                return;
+            setHideSharedDragOverlay(shouldHideSharedDragOverlay(event));
+        },
+        onDragEnd: (event) => {
+            if (!isOwnTabDrag(event))
+                return;
+            handleDragEnd(event);
+            setActiveDraggedTabId(null);
+            setHideSharedDragOverlay(false);
+        },
+        onDragCancel: () => {
+            setActiveDraggedTabId(null);
+            setHideSharedDragOverlay(false);
+        },
+    });
+    return null;
+}
+function TabDragOverlay({ tab, renderTabLabel, fontSize, }) {
+    return (_jsx("div", { className: cn('bg-primary/15 text-foreground border-primary/50 flex h-7 max-w-[200px] min-w-[100px]', 'cursor-grabbing items-center justify-center gap-1 overflow-hidden rounded-md border px-6 py-1', 'text-sm shadow-lg'), style: getFontSizeStyle(fontSize), children: _jsx("div", { className: "truncate text-center", children: renderTabLabel ? renderTabLabel(tab) : tab.name }) }));
 }
 /**
  * Renders the dropdown with search for browsing tabs.
  * Shows open tabs first and closed tabs second (dimmed). When searching, shows all matching tabs.
  */
 function TabStripSearchDropdown({ className, triggerClassName, autoFocus = true, tooltip, triggerIcon, emptyMessage = 'No tabs', searchEmptyMessage = 'No matching tabs', closedTabsLabel = 'Recently closed', sortSearchItems = 'recent', getTabLastOpenedAt, }) {
-    const { openTabItems, search, setSearch, closedTabs, filteredTabs, closedTabIds, openTabs, preventCloseLastTab, onOpenTabsChange, onSelect, renderSearchItemActions, getLastOpenedAt, handleClose, } = useTabStripContext();
+    const { openTabItems, search, setSearch, closedTabs, filteredTabs, closedTabIds, openTabs, preventCloseLastTab, onOpenTabsChange, onSelect, renderSearchItemActions, renderSearchItemLabel, getLastOpenedAt, handleClose, fontSize, } = useTabStripContext();
+    const fontSizeStyle = getFontSizeStyle(fontSize);
     const [isOpen, setIsOpen] = useState(false);
     const isSearching = search.trim().length > 0;
     const handleOpenChange = (open) => {
@@ -157,8 +274,8 @@ function TabStripSearchDropdown({ className, triggerClassName, autoFocus = true,
         const disableClose = preventCloseLastTab && (openTabsList.length ?? 0) <= 1;
         return (_jsxs(_Fragment, { children: [renderSearchItemActions?.(tab), _jsx(TabStripSearchItemAction, { icon: _jsx(XIcon, { className: "h-3 w-3" }), "aria-label": `Close ${tab.name}`, onClick: disableClose ? undefined : () => handleClose(tab.id), className: cn(disableClose && 'pointer-events-none opacity-40') })] }));
     };
-    const triggerButton = (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", "aria-label": "Browse tabs", className: cn('hover:bg-primary/10 h-full shrink-0', triggerClassName), children: triggerIcon ?? _jsx(ListCollapseIcon, { className: "h-4 w-4" }) }) }));
-    return (_jsxs(DropdownMenu, { open: isOpen, onOpenChange: handleOpenChange, children: [tooltip ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: triggerButton }), _jsx(TooltipContent, { children: tooltip })] }) })) : (triggerButton), _jsxs(DropdownMenuContent, { align: "start", onCloseAutoFocus: (event) => event.preventDefault(), className: cn('flex max-h-[400px] max-w-[240px] flex-col overflow-x-hidden', className), children: [_jsxs("div", { className: "flex shrink-0 items-center gap-1 px-2", children: [_jsx(SearchIcon, { className: "text-muted-foreground", size: 14 }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), onKeyDown: (event) => {
+    const triggerButton = (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", "aria-label": "Browse tabs", size: "icon", className: cn(...TAB_STRIP_BUTTON_CLASSNAMES, triggerClassName), style: fontSizeStyle, children: triggerIcon ?? _jsx(ListCollapseIcon, { className: "h-4 w-4" }) }) }));
+    return (_jsxs(DropdownMenu, { open: isOpen, onOpenChange: handleOpenChange, children: [tooltip ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: triggerButton }), _jsx(TooltipContent, { children: tooltip })] }) })) : (triggerButton), _jsxs(DropdownMenuContent, { align: "start", onCloseAutoFocus: (event) => event.preventDefault(), className: cn('flex max-h-[400px] max-w-[240px] flex-col overflow-x-hidden', className), style: fontSizeStyle, children: [_jsxs("div", { className: "flex shrink-0 items-center gap-1 px-2", children: [_jsx(SearchIcon, { className: "text-muted-foreground", size: 14 }), _jsx(Input, { value: search, onChange: (event) => setSearch(event.target.value), onKeyDown: (event) => {
                                     if (event.key === 'ArrowDown' || event.key === 'Tab') {
                                         event.preventDefault();
                                         const firstItem = event.currentTarget
@@ -169,25 +286,38 @@ function TabStripSearchDropdown({ className, triggerClassName, autoFocus = true,
                                     else {
                                         event.stopPropagation();
                                     }
-                                }, onKeyUp: (event) => event.stopPropagation(), className: "border-none text-xs shadow-none focus-visible:ring-0", placeholder: "Search...", "aria-label": "Search", autoFocus: autoFocus })] }), _jsx(DropdownMenuSeparator, { className: "shrink-0" }), _jsx("div", { className: "overflow-x-hidden overflow-y-auto", children: isSearching ? (filteredTabs.length === 0 ? (_jsx(DropdownTabItems, { tabs: filteredTabs, emptyMessage: searchEmptyMessage, onTabClick: handleTabClick, renderActions: renderSearchItemActions })) : (_jsxs(_Fragment, { children: [_jsx(DropdownTabItems, { tabs: filteredOpenTabs, onTabClick: handleTabClick, renderActions: renderOpenTabActions }), filteredClosedTabs.length > 0 && (_jsxs(_Fragment, { children: [filteredOpenTabs.length > 0 && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-muted-foreground py-1 text-xs font-medium", children: closedTabsLabel }), _jsx(DropdownTabItems, { tabs: filteredClosedTabs, onTabClick: handleTabClick, renderActions: renderSearchItemActions, getItemClassName: () => 'text-muted-foreground' })] }))] }))) : (_jsx(_Fragment, { children: hasAnyTabs ? (_jsxs(_Fragment, { children: [_jsx(DropdownTabItems, { tabs: openTabsList, onTabClick: handleTabClick, renderActions: renderOpenTabActions }), closedTabsList.length > 0 && (_jsxs(_Fragment, { children: [openTabsList.length > 0 && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-muted-foreground py-1 text-xs font-medium", children: closedTabsLabel }), _jsx(DropdownTabItems, { tabs: closedTabsList, onTabClick: handleTabClick, renderActions: renderSearchItemActions, getItemClassName: () => 'text-muted-foreground' })] }))] })) : (_jsx(DropdownTabItems, { tabs: [], emptyMessage: emptyMessage, onTabClick: handleTabClick, renderActions: renderSearchItemActions })) })) })] })] }));
+                                }, onKeyUp: (event) => event.stopPropagation(), className: "border-none text-xs shadow-none focus-visible:ring-0", style: fontSizeStyle, placeholder: "Search...", "aria-label": "Search", autoFocus: autoFocus })] }), _jsx(DropdownMenuSeparator, { className: "shrink-0" }), _jsx("div", { className: "overflow-x-hidden overflow-y-auto", children: isSearching ? (filteredTabs.length === 0 ? (_jsx(DropdownTabItems, { tabs: filteredTabs, emptyMessage: searchEmptyMessage, onTabClick: handleTabClick, renderLabel: renderSearchItemLabel, renderActions: renderSearchItemActions })) : (_jsxs(_Fragment, { children: [_jsx(DropdownTabItems, { tabs: filteredOpenTabs, onTabClick: handleTabClick, renderLabel: renderSearchItemLabel, renderActions: renderOpenTabActions }), filteredClosedTabs.length > 0 && (_jsxs(_Fragment, { children: [filteredOpenTabs.length > 0 && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-muted-foreground py-1 text-xs font-medium", style: fontSizeStyle, children: closedTabsLabel }), _jsx(DropdownTabItems, { tabs: filteredClosedTabs, onTabClick: handleTabClick, renderLabel: renderSearchItemLabel, renderActions: renderSearchItemActions, getItemClassName: () => 'text-muted-foreground' })] }))] }))) : (_jsx(_Fragment, { children: hasAnyTabs ? (_jsxs(_Fragment, { children: [_jsx(DropdownTabItems, { tabs: openTabsList, onTabClick: handleTabClick, renderLabel: renderSearchItemLabel, renderActions: renderOpenTabActions }), closedTabsList.length > 0 && (_jsxs(_Fragment, { children: [openTabsList.length > 0 && _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { className: "text-muted-foreground py-1 text-xs font-medium", style: fontSizeStyle, children: closedTabsLabel }), _jsx(DropdownTabItems, { tabs: closedTabsList, onTabClick: handleTabClick, renderLabel: renderSearchItemLabel, renderActions: renderSearchItemActions, getItemClassName: () => 'text-muted-foreground' })] }))] })) : (_jsx(DropdownTabItems, { tabs: [], emptyMessage: emptyMessage, onTabClick: handleTabClick, renderLabel: renderSearchItemLabel, renderActions: renderSearchItemActions })) })) })] })] }));
 }
-function DropdownTabItems({ tabs, emptyMessage, onTabClick, renderActions, getItemClassName, }) {
+function DropdownTabItems({ tabs, emptyMessage, onTabClick, renderLabel, renderActions, getItemClassName, }) {
+    const { fontSize } = useTabStripContext();
+    const fontSizeStyle = getFontSizeStyle(fontSize);
     if (tabs.length === 0) {
         if (!emptyMessage)
             return null;
-        return (_jsx(DropdownMenuLabel, { className: "items-center justify-center text-xs", children: emptyMessage }));
+        return (_jsx(DropdownMenuLabel, { className: "items-center justify-center text-xs", style: fontSizeStyle, children: emptyMessage }));
     }
-    return (_jsx(_Fragment, { children: tabs.map((tab) => (_jsxs(DropdownMenuItem, { onClick: () => onTabClick?.(tab.id), className: cn('flex h-7 cursor-pointer items-center justify-between truncate', getItemClassName?.(tab)), children: [_jsx("span", { className: "xs truncate pl-1", children: tab.name }), renderActions && (_jsx("div", { className: "flex items-center gap-2", children: renderActions(tab) }))] }, tab.id))) }));
+    return (_jsx(_Fragment, { children: tabs.map((tab) => (_jsxs(DropdownMenuItem, { onClick: () => onTabClick?.(tab.id), className: cn('flex h-7 cursor-pointer items-center justify-between truncate', getItemClassName?.(tab)), style: fontSizeStyle, children: [_jsx("div", { className: "min-w-0 truncate pl-1 text-xs", style: fontSizeStyle, children: renderLabel ? renderLabel(tab) : tab.name }), renderActions && (_jsx("div", { className: "flex items-center gap-2", children: renderActions(tab) }))] }, tab.id))) }));
 }
+/**
+ * A general-purpose button for the tab strip.
+ */
+const TabStripButton = React.forwardRef(function TabStripButtonComponent({ className, style, ...props }, ref) {
+    const context = useOptionalTabStripContext();
+    return (_jsx(Button, { ref: ref, size: "icon", variant: "ghost", style: mergeFontSizeStyle(context?.fontSize, style), className: cn(...TAB_STRIP_BUTTON_CLASSNAMES, 'h-full shrink-0', className), ...props }));
+});
+TabStripButton.displayName = 'TabStripButton';
 /**
  * Renders a button to create a new tab.
  */
-function TabStripNewButton({ className, tooltip }) {
-    const { onCreate } = useTabStripContext();
+function TabStripNewButton({ tooltip, ...props }) {
+    const { onCreate, fontSize } = useTabStripContext();
     if (!onCreate) {
         return null;
     }
-    const button = (_jsx(Button, { size: "icon", variant: "ghost", "aria-label": "Create new tab", onClick: () => onCreate(), className: cn('hover:bg-primary/10 h-full shrink-0', className), children: _jsx(PlusIcon, { className: "h-4 w-4" }) }));
+    const button = (_jsx(TabStripButton, { ...props, style: mergeFontSizeStyle(fontSize, props.style), "aria-label": props['aria-label'] || 'Create new tab', onClick: (e) => {
+            onCreate();
+            props.onClick?.(e);
+        }, children: _jsx(PlusIcon, { className: "h-4 w-4" }) }));
     if (tooltip) {
         return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { children: tooltip })] }) }));
     }
@@ -214,7 +344,9 @@ function TabStripNewButton({ className, tooltip }) {
  *   <TabStrip.NewButton />
  * </TabStrip>
  */
-function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs, selectedTabId, preventCloseLastTab = false, onClose, onOpenTabsChange, onSelect, onCreate, onRename, renderTabTitle, renderTabMenu, renderSearchItemActions, renderTabLabel, }) {
+function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs, selectedTabId, preventCloseLastTab = false, closeable = true, onClose, onOpenTabsChange, onSelect, onActivate, onCreate, onRename, renderTabMenu, renderSearchItemActions, renderSearchItemLabel, renderTabLabel, fontSize, dndMode = 'internal', dndScopeId, getTabDragData, }) {
+    const generatedDndScopeId = useId();
+    const actualDndScopeId = dndScopeId ?? generatedDndScopeId;
     const [search, setSearch] = useState('');
     const [editingTabId, setEditingTabId] = useState(null);
     const scrollContainerRef = useRef(null);
@@ -355,14 +487,20 @@ function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs,
         selectedTabId,
         openTabs,
         preventCloseLastTab,
+        closeable,
         getLastOpenedAt: (tabId) => lastOpenedAtRef.current.get(tabId),
+        dndMode,
+        dndScopeId: actualDndScopeId,
+        getTabDragData,
+        fontSize,
         onOpenTabsChange,
         onSelect,
+        onActivate,
         onCreate,
         onRename,
-        renderTabTitle,
         renderTabMenu,
         renderSearchItemActions,
+        renderSearchItemLabel,
         renderTabLabel,
         setSearch,
         handleStartEditing,
@@ -373,12 +511,13 @@ function TabStripRoot({ className, tabsListClassName, children, tabs, openTabs,
     const handleValueChange = (value) => {
         onSelect?.(value);
     };
-    return (_jsx(Tabs, { value: selectedTabId ?? undefined, onValueChange: handleValueChange, activationMode: "manual", className: cn('bg-muted w-full min-w-0', className), children: _jsx(TabStripContext.Provider, { value: contextValue, children: _jsx(TabsList, { className: cn('flex h-9 w-full min-w-0 items-center justify-start gap-2 overflow-visible bg-transparent p-0', tabsListClassName), children: children ?? (_jsxs(_Fragment, { children: [_jsx(TabStripSearchDropdown, {}), _jsx(TabStripTabs, {}), _jsx(TabStripNewButton, {})] })) }) }) }));
+    return (_jsx(Tabs, { value: selectedTabId ?? undefined, onValueChange: handleValueChange, activationMode: "manual", className: cn('bg-muted w-full min-w-0', className), style: getFontSizeStyle(fontSize), children: _jsx(TabStripContext.Provider, { value: contextValue, children: _jsx(TabsList, { className: cn('flex h-9 w-full min-w-0 items-center justify-start gap-2 overflow-visible bg-transparent p-1', tabsListClassName), children: children ?? (_jsxs(_Fragment, { children: [_jsx(TabStripSearchDropdown, {}), _jsx(TabStripTabs, {}), _jsx(TabStripNewButton, {})] })) }) }) }));
 }
 // Attach subcomponents
 export const TabStrip = Object.assign(TabStripRoot, {
     Tabs: TabStripTabs,
     SearchDropdown: TabStripSearchDropdown,
+    Button: TabStripButton,
     NewButton: TabStripNewButton,
     MenuItem: TabStripMenuItem,
     MenuSeparator: TabStripMenuSeparator,