@baishuyun/ai-design 2.0.25 → 2.0.27

package/src/components/bs-entry-select/scroll-slider.tsx

@@ -4,16 +4,18 @@ import {
   useEffect,
   useCallback,
   useMemo,
+  Fragment,
 } from 'react';
 import { createPortal } from 'react-dom';
 import { cn } from '../../lib/utils';
 import { transCls } from '../../const/ui';
 import { IconBtn } from '../icon-btn';
-import { LeftArrowIcon, SolidArrowDownIcon } from '../bs-icons';
+import { LeftArrowIcon, SolidArrowDownIcon, DividerIcon } from '../bs-icons';
 import {
   buildEntryTreeFromAliasMap,
   getEntryIconClass,
   filterTreeBySearch,
+  buildFlowCenterTree,
 } from './build-tree';
 import { SearchInput } from './search-input';
 import { TreeItemNode } from './tree-item-node';
@@ -73,10 +75,27 @@ export function ScrollSlider({
     { estimatedHeight: 340 },
   );
 
+  const hoverCloseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const isTabs = variant === 'tabs';
+  const showFlowCenter = isTabs && (appDetails[currentAppId ?? '']?.isFlow ?? false);
 
   // Build first-level nodes from all apps (no search filter)
   const flatNodes = useMemo<FlatNode[]>(() => {
+    const flowCenterNodes: FlatNode[] = [];
+
+    // Flow center — first tab in tabs mode for flow-type apps
+    if (showFlowCenter) {
+      const flowTree = buildFlowCenterTree();
+      flowCenterNodes.push(
+        ...flowTree.map((node) => ({
+          node,
+          appId: currentAppId ?? '',
+          section: 'current' as const,
+        })),
+      );
+    }
+
     const appIds = Object.keys(appDetails);
     const currentFirst: FlatNode[] = [];
     const otherNodes: FlatNode[] = [];
@@ -93,12 +112,13 @@ export function ScrollSlider({
       }
     }
 
-    const merged = [...currentFirst, ...otherNodes];
-    return showCurrentAppEntriesOnly ? currentFirst : merged;
+    const merged = [...flowCenterNodes, ...currentFirst, ...otherNodes];
+    return showCurrentAppEntriesOnly ? [...flowCenterNodes, ...currentFirst] : merged;
   }, [
     appDetails,
     currentAppId,
     showCurrentAppEntriesOnly,
+    showFlowCenter,
     Object.keys(appDetails)
       .map((id) => (appDetails[id]?.entryList?.length ?? 0))
       .join(','),
@@ -110,6 +130,17 @@ export function ScrollSlider({
     return filterTreeBySearch(activeGroup.node.children, groupSearchQuery);
   }, [activeGroup, groupSearchQuery]);
 
+  // Map from group pill node ID → FlatNode, for native hover delegation
+  const groupFlatNodeById = useMemo(() => {
+    const map = new Map<string, FlatNode>();
+    for (const fn of flatNodes) {
+      if (!fn.node.isSelectable) {
+        map.set(fn.node.id, fn);
+      }
+    }
+    return map;
+  }, [flatNodes]);
+
   const checkScroll = useCallback(() => {
     const el = scrollRef.current;
     if (!el) return;
@@ -163,9 +194,52 @@ export function ScrollSlider({
         ) as HTMLElement | null;
       }
     }
-    if (pill) {
-      pill.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
-    }
+    if (!pill) return;
+
+    const container = scrollRef.current;
+    const PAD = 12; // matches scrollPaddingInline, covers corner flares
+    const start = performance.now();
+    let rafId = 0;
+
+    // Ease toward the pill with the target recomputed EVERY frame. A one-shot
+    // scrollIntoView({behavior: 'smooth'}) computes its destination upfront —
+    // the selection triggers a host navigation whose follow-up layout changes
+    // (content reload, arrow show/hide) shift the container mid-animation and
+    // the pill lands clipped. Live recomputation keeps this one continuous
+    // ease-out motion that always converges, with no visible second jump.
+    const step = () => {
+      const containerRect = container.getBoundingClientRect();
+      const pillRect = pill.getBoundingClientRect();
+      let delta = 0;
+      if (pillRect.left < containerRect.left + PAD) {
+        delta = pillRect.left - containerRect.left - PAD;
+      } else if (pillRect.right > containerRect.right - PAD) {
+        delta = pillRect.right - containerRect.right + PAD;
+      }
+      if (Math.abs(delta) < 1) return; // arrived
+      container.scrollLeft += delta * 0.3;
+      if (performance.now() - start < 600) {
+        rafId = requestAnimationFrame(step);
+      }
+    };
+    rafId = requestAnimationFrame(step);
+
+    // Stop animating if the user takes over scrolling
+    const cancelOnUserScroll = () => cancelAnimationFrame(rafId);
+    container.addEventListener('wheel', cancelOnUserScroll, {
+      once: true,
+      passive: true,
+    });
+    container.addEventListener('touchstart', cancelOnUserScroll, {
+      once: true,
+      passive: true,
+    });
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      container.removeEventListener('wheel', cancelOnUserScroll);
+      container.removeEventListener('touchstart', cancelOnUserScroll);
+    };
   }, [selectedEntryId, descendantToGroupId]);
 
   useEffect(() => {
@@ -195,46 +269,168 @@ export function ScrollSlider({
     activeGroupIdRef.current = null;
     setActiveGroup(null);
     setGroupSearchQuery('');
+    if (hoverCloseTimerRef.current) {
+      clearTimeout(hoverCloseTimerRef.current);
+      hoverCloseTimerRef.current = null;
+    }
   }, []);
 
-  const openGroupPopover = useCallback((flatNode: FlatNode, event: React.MouseEvent) => {
-    event.stopPropagation();
-    if (activeGroup?.node.id === flatNode.node.id) {
-      activeGroupIdRef.current = null;
-      setActiveGroup(null);
-      setGroupSearchQuery('');
-      return;
+  const cancelCloseTimer = useCallback(() => {
+    if (hoverCloseTimerRef.current) {
+      clearTimeout(hoverCloseTimerRef.current);
+      hoverCloseTimerRef.current = null;
     }
-    setGroupSearchQuery('');
-    activeGroupIdRef.current = flatNode.node.id;
-    setActiveGroup(flatNode);
-
-    // Check Shadow DOM portal
-    const triggerEl = groupPillRefs.current.get(flatNode.node.id);
-    if (triggerEl) {
-      const rootNode = triggerEl.getRootNode();
-      if (rootNode instanceof ShadowRoot) {
-        const existing = rootNode.querySelector<HTMLElement>(
-          '[data-bs-entry-select-group-portal]',
-        );
-        if (existing) {
-          setGroupPortalContainer(existing);
+  }, []);
+
+  // Delayed close — cancelled when the mouse re-enters the pill or popover.
+  // The :hover guard prevents closing when a transient leave fired but the
+  // cursor is still over the pill or popover (e.g. layout-shift artifacts).
+  const scheduleClosePopover = useCallback(() => {
+    cancelCloseTimer();
+    hoverCloseTimerRef.current = setTimeout(() => {
+      const pillEl = activeGroupIdRef.current
+        ? groupPillRefs.current.get(activeGroupIdRef.current)
+        : null;
+      if (pillEl?.matches(':hover') || popoverRef.current?.matches(':hover')) {
+        return;
+      }
+      closeGroupPopover();
+    }, 200);
+  }, [cancelCloseTimer, closeGroupPopover]);
+
+  // Core open logic shared by click and hover paths
+  const openGroupPopoverCore = useCallback(
+    (flatNode: FlatNode) => {
+      // Clear any pending close timer
+      cancelCloseTimer();
+
+      // Skip if already open for this group (hover keeps it open)
+      if (activeGroup?.node.id === flatNode.node.id) return;
+
+      setGroupSearchQuery('');
+      activeGroupIdRef.current = flatNode.node.id;
+      setActiveGroup(flatNode);
+
+      // Check Shadow DOM portal
+      const triggerEl = groupPillRefs.current.get(flatNode.node.id);
+      if (triggerEl) {
+        const rootNode = triggerEl.getRootNode();
+        if (rootNode instanceof ShadowRoot) {
+          const existing = rootNode.querySelector<HTMLElement>(
+            '[data-bs-entry-select-group-portal]',
+          );
+          if (existing) {
+            setGroupPortalContainer(existing);
+          } else {
+            const container = document.createElement('div');
+            container.setAttribute('data-bs-entry-select-group-portal', 'true');
+            rootNode.appendChild(container);
+            setGroupPortalContainer(container);
+          }
         } else {
-          const container = document.createElement('div');
-          container.setAttribute('data-bs-entry-select-group-portal', 'true');
-          rootNode.appendChild(container);
-          setGroupPortalContainer(container);
+          setGroupPortalContainer(null);
         }
-      } else {
-        setGroupPortalContainer(null);
       }
-    }
 
-    // Position the popover after the next frame
-    requestAnimationFrame(() => {
+      // Position synchronously — the pill is already mounted, so its rect is
+      // available immediately. Batching this with setActiveGroup ensures the
+      // popover mounts at the correct position in the same commit; a deferred
+      // (rAF) position would render one frame in-flow at the end of the body,
+      // shifting layout and firing a spurious mouseleave on the pill.
       updatePopoverPosition();
-    });
-  }, [activeGroup, updatePopoverPosition]);
+    },
+    [activeGroup, cancelCloseTimer, updatePopoverPosition],
+  );
+
+  const openGroupPopover = useCallback(
+    (flatNode: FlatNode, event: React.MouseEvent) => {
+      event.stopPropagation();
+      if (activeGroup?.node.id === flatNode.node.id) {
+        activeGroupIdRef.current = null;
+        setActiveGroup(null);
+        setGroupSearchQuery('');
+        return;
+      }
+      openGroupPopoverCore(flatNode);
+    },
+    [activeGroup, openGroupPopoverCore],
+  );
+
+  // Hover handlers for tabs mode.
+  //
+  // NOTE: these are driven by NATIVE mouseover/mouseout listeners (attached in
+  // the effects below), not React's onMouseEnter/onMouseLeave. React's
+  // synthetic enter/leave events do not fire when the pointer crosses from
+  // light DOM into a shadow root — which is exactly what happens when the
+  // mouse enters a tab from the host content area below the tab bar.
+  const handleNativeOver = useCallback(
+    (e: MouseEvent) => {
+      const t = e.target as HTMLElement | null;
+      if (!t) return;
+      if (popoverRef.current?.contains(t)) {
+        cancelCloseTimer();
+        return;
+      }
+      const pillEl = t.closest?.('[data-entry-id]') as HTMLElement | null;
+      const flatNode = pillEl
+        ? groupFlatNodeById.get(pillEl.getAttribute('data-entry-id') ?? '')
+        : undefined;
+      if (flatNode) {
+        cancelCloseTimer();
+        openGroupPopoverCore(flatNode);
+      } else {
+        // Hovering a leaf pill or empty slider area — close any open group popover
+        scheduleClosePopover();
+      }
+    },
+    [cancelCloseTimer, groupFlatNodeById, openGroupPopoverCore, scheduleClosePopover],
+  );
+
+  const handleNativeOut = useCallback(
+    (e: MouseEvent) => {
+      const to = e.relatedTarget as HTMLElement | null;
+      if (to && scrollRef.current?.contains(to)) return;
+      if (to && popoverRef.current?.contains(to)) return;
+      scheduleClosePopover();
+    },
+    [scheduleClosePopover],
+  );
+
+  // Keep latest handlers in refs so listeners stay attached across re-renders
+  const handleNativeOverRef = useRef(handleNativeOver);
+  const handleNativeOutRef = useRef(handleNativeOut);
+  useEffect(() => {
+    handleNativeOverRef.current = handleNativeOver;
+    handleNativeOutRef.current = handleNativeOut;
+  });
+
+  // Native hover listeners on the scroll container (delegated to group pills)
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !isTabs) return;
+    const over = (e: MouseEvent) => handleNativeOverRef.current(e);
+    const out = (e: MouseEvent) => handleNativeOutRef.current(e);
+    el.addEventListener('mouseover', over);
+    el.addEventListener('mouseout', out);
+    return () => {
+      el.removeEventListener('mouseover', over);
+      el.removeEventListener('mouseout', out);
+    };
+  }, [isTabs]);
+
+  // Native hover listeners on the group popover (rendered in a portal subtree)
+  useEffect(() => {
+    const pop = popoverRef.current;
+    if (!isTabs || !activeGroup || !pop) return;
+    const over = (e: MouseEvent) => handleNativeOverRef.current(e);
+    const out = (e: MouseEvent) => handleNativeOutRef.current(e);
+    pop.addEventListener('mouseover', over);
+    pop.addEventListener('mouseout', out);
+    return () => {
+      pop.removeEventListener('mouseover', over);
+      pop.removeEventListener('mouseout', out);
+    };
+  }, [isTabs, activeGroup]);
 
   const handleGroupPopoverSelect = useCallback(
     (result: BsEntrySelectChangeResult) => {
@@ -302,19 +498,53 @@ export function ScrollSlider({
 
       <div
         ref={scrollRef}
+        // scroll-padding: scrollIntoView aligns pills this far from the
+        // container edge, keeping the selected tab's outward corner flares
+        // (protruding 9px) fully visible instead of clipped
+        style={isTabs ? { scrollPaddingInline: 12 } : undefined}
         className={cn(
           'flex-1 overflow-x-auto scrollbar-hide flex min-w-0',
           isTabs
-            ? 'items-end gap-0 overflow-y-hidden border-b-[#e0e0e0] before:content-[""] before:absolute before:bottom-[0px] before:left-[-200px] before:right-0 before:h-[1px] before:w-[100vw] before:bg-[#e0e0e0] h-full'
+            // px compensates -mx: keeps pills at the same visual position
+            // while letting bottom corner flares paint without being clipped
+            ? 'items-end gap-0 overflow-y-hidden px-[10px] -mx-[10px] border-b-[#e0e0e0] before:content-[""] before:absolute before:bottom-[0px] before:left-[-200px] before:right-0 before:h-[1px] before:w-[200vw] before:bg-[#e0e0e0] h-full'
             : 'items-center gap-2.5',
         )}
       >
-        {flatNodes.map((flatNode) => {
+        {flatNodes.map((flatNode, index) => {
           const { node, appId, section } = flatNode;
           const isLeaf = node.isSelectable;
           const isSelected = isLeaf && selectedEntryId === node.id;
-          const isGroupActive = activeGroup?.node.id === node.id
-            || node?.children.findIndex(c => c.id === selectedEntryId) >= 0;
+          // Active tab styling applies only when a descendant entry is
+          // selected — hovering/clicking to open the popover must NOT make
+          // the group look active (that would show two active tabs at once)
+          const isGroupActive = node?.children.findIndex(c => c.id === selectedEntryId) >= 0;
+          // Popover-open is a separate, transient state — drives the chevron
+          const isGroupPopoverOpen = activeGroup?.node.id === node.id;
+
+          // Divider between inactive tabs: always rendered in tabs mode so
+          // the strip width never shifts on selection change — only its
+          // visibility toggles (hidden next to the active tab, which has
+          // its own borders)
+          const isNodeActive = (fn: FlatNode | null): boolean => {
+            if (!fn) return false;
+            return fn.node.isSelectable
+              ? selectedEntryId === fn.node.id
+              : fn.node.children.findIndex((c) => c.id === selectedEntryId) >= 0;
+          };
+          const dividerVisible =
+            !isNodeActive(flatNode) && !isNodeActive(flatNodes[index - 1]);
+          const divider = isTabs && index > 0 ? (
+            <span
+              aria-hidden
+              className={cn(
+                'self-center shrink-0 flex items-center justify-center w-[1px]',
+                !dividerVisible && 'invisible',
+              )}
+            >
+              <DividerIcon />
+            </span>
+          ) : null;
 
           const setPillRef = (el: HTMLButtonElement | null) => {
             if (el) {
@@ -326,8 +556,9 @@ export function ScrollSlider({
 
           if (isLeaf) {
             return (
-              <button
-                key={node.id}
+              <Fragment key={node.id}>
+                {divider}
+                <button
                 data-entry-id={node.id}
                 type="button"
                 onClick={() => {
@@ -336,65 +567,197 @@ export function ScrollSlider({
                   }
                 }}
                 className={cn(
-                  'flex items-center gap-[6px] shrink-0 max-w-[240px]',
+                  'flex items-center shrink-0 max-w-[240px]',
                   transCls,
                   isTabs
                     ? [
-                        'px-[16px] py-[8px] relative z-10 border-b-none h-full',
-                        isSelected
-                          ? 'border-r border-t border-l border-[#e0e0e0] bg-[#f6f7fa] text-[#0265FF] rounded-t-[10px] rounded-b-none '
-                          : 'text-[#030303] hover:bg-[#F0F6FF] rounded-t-[8px]',
+                        // Button stays h-full so text keeps its Y position;
+                        // the visual tab box is the decorative span below
+                        'group px-[10px] py-[8px] relative z-10 h-full',
+                        isSelected ? 'text-[#0265FF]' : 'text-[#030303]',
                       ]
                     : [
-                        'px-[10px] py-[7px] rounded-[4px]',
+                        'px-[10px] py-[7px] rounded-[4px] gap-[6px]',
                         isSelected
                           ? 'border border-[#F0F6FF] bg-[#F0F6FF] text-[#0265FF]'
                           : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
                       ],
                 )}
               >
-                <i
-                  className={
-                    node.entry
-                      ? getEntryIconClass(node.entry)
-                      : 'node-icon icon-bsy-form icon-new-bsy-form-25'
-                  }
-                  style={{ fontSize: 16, lineHeight: 1 }}
-                />
-                <span className="text-[14px] leading-[normal] truncate">
-                  {node.name}
+                {/* Visual tab box — side borders stop 10px above the bar so
+                    the concave corner arcs can continue them; transparent
+                    borders when unselected (decorative only, no layout shift).
+                    No transCls here: the fill strip and corner flares below
+                    appear/disappear instantly on selection change, so this
+                    box must switch instantly too — otherwise its fading
+                    background leaves a ghost image on the deselected tab */}
+                {isTabs && (
+                  <span
+                    aria-hidden
+                    className={cn(
+                      'pointer-events-none absolute inset-x-0 top-[6px] bottom-[10px] border-r border-t border-l border-b-none rounded-t-[10px] rounded-b-none',
+                      isSelected
+                        ? 'border-[#e0e0e0] bg-[#f6f7fa]'
+                        : 'border-transparent',
+                    )}
+                  />
+                )}
+                {isTabs && isSelected && (
+                  <>
+                    {/* Fill below the tab body — covers the bar line under the tab */}
+                    <span
+                      aria-hidden
+                      className="pointer-events-none absolute inset-x-0 bottom-0 h-[10px] bg-[#f6f7fa]"
+                    />
+                    {/* Concave corner flares. The square is shifted 1px
+                        inward (left/right-[-9px]) so the full border ring —
+                        including its tangent junctions with the side border
+                        (vertical tangent) and the bar line (horizontal
+                        tangent) — fits inside the element and paints above
+                        the bottom fill strip */}
+                    <span
+                      aria-hidden
+                      className="pointer-events-none absolute left-[-9px] bottom-0 w-[10px] h-[10px]"
+                      style={{
+                        background:
+                          'radial-gradient(circle at 0% 0%, transparent 9px, #e0e0e0 9px, #e0e0e0 10px, #f6f7fa 10px)',
+                      }}
+                    />
+                    <span
+                      aria-hidden
+                      className="pointer-events-none absolute right-[-9px] bottom-0 w-[10px] h-[10px]"
+                      style={{
+                        background:
+                          'radial-gradient(circle at 100% 0%, transparent 9px, #e0e0e0 9px, #e0e0e0 10px, #f6f7fa 10px)',
+                      }}
+                    />
+                  </>
+                )}
+                {/* In tabs mode, hover highlights only this icon+text chip —
+                    the tab background itself stays unchanged. No transCls:
+                    on selection the hover bg must clear instantly, otherwise
+                    it fades out slowly and leaves a chip-shaped ghost on the
+                    newly selected tab */}
+                <span
+                  className={cn(
+                    'flex items-center gap-[6px] min-w-0',
+                    isTabs &&
+                      cn(
+                        'relative rounded-[6px] px-[20px] py-[6px]',
+                        !isSelected && 'group-hover:bg-[#F0F6FF]',
+                      ),
+                  )}
+                >
+                  <i
+                    className={
+                      node.iconClass
+                        ? node.iconClass
+                        : node.entry
+                          ? getEntryIconClass(node.entry)
+                          : 'node-icon icon-bsy-form icon-new-bsy-form-25'
+                    }
+                    style={{ fontSize: 16, lineHeight: 1 }}
+                  />
+                  <span className="text-[14px] leading-[normal] truncate">
+                    {node.name}
+                  </span>
                 </span>
               </button>
+              </Fragment>
             );
           }
 
           // Group pill (has descendants)
           return (
+            <Fragment key={node.id}>
+              {divider}
             <button
-              key={node.id}
               data-entry-id={node.id}
               ref={setPillRef}
               type="button"
-              onClick={(e) => openGroupPopover(flatNode, e)}
+              {...(!isTabs
+                ? {
+                    onClick: (e: React.MouseEvent) => openGroupPopover(flatNode, e),
+                  }
+                : {})}
               className={cn(
-                'flex items-center gap-[10px] shrink-0 max-w-[240px]',
+                'flex items-center shrink-0 max-w-[240px]',
                 transCls,
                 isTabs
                   ? [
-                      'px-[16px] py-[8px] relative z-10 h-full',
-                      isGroupActive
-                          ? 'border-r border-t border-l border-[#e0e0e0] bg-[#f6f7fa] text-[#0265FF] rounded-t-[10px] rounded-b-none '
-                          : 'text-[#030303] hover:bg-[#F0F6FF] rounded-t-[8px]',
+                      // Button stays h-full so text keeps its Y position;
+                      // the visual tab box is the decorative span below
+                      'group gap-[4px] px-[10px] py-[8px] relative z-10 h-full',
+                      isGroupActive ? 'text-[#0265FF]' : 'text-[#030303]',
                     ]
                   : [
-                      'px-[10px] py-[7px] rounded-[4px]',
+                      'gap-[10px] px-[10px] py-[7px] rounded-[4px]',
                       isGroupActive
                         ? 'border border-[#0265FF] text-[#030303]'
                         : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
                     ],
               )}
             >
-              <span className="flex items-center gap-[6px] min-w-0 flex-1">
+              {/* Visual tab box — side borders stop 10px above the bar so
+                  the concave corner arcs can continue them; transparent
+                  borders when inactive (decorative only, no layout shift) */}
+              {isTabs && (
+                <span
+                  aria-hidden
+                  className={cn(
+                    'pointer-events-none absolute inset-x-0 top-[6px] bottom-[10px] border-r border-t border-l border-b-none rounded-t-[10px] rounded-b-none',
+                    isGroupActive
+                      ? 'border-[#e0e0e0] bg-[#f6f7fa]'
+                      : 'border-transparent',
+                  )}
+                />
+              )}
+              {isTabs && isGroupActive && (
+                <>
+                  {/* Fill below the tab body — covers the bar line under the tab */}
+                  <span
+                    aria-hidden
+                    className="pointer-events-none absolute inset-x-0 bottom-0 h-[10px] bg-[#f6f7fa]"
+                  />
+                  {/* Concave corner flares. The square is shifted 1px
+                      inward (left/right-[-9px]) so the full border ring —
+                      including its tangent junctions with the side border
+                      (vertical tangent) and the bar line (horizontal
+                      tangent) — fits inside the element and paints above
+                      the bottom fill strip */}
+                  <span
+                    aria-hidden
+                    className="pointer-events-none absolute left-[-9px] bottom-0 w-[10px] h-[10px]"
+                    style={{
+                      background:
+                        'radial-gradient(circle at 0% 0%, transparent 9px, #e0e0e0 9px, #e0e0e0 10px, #f6f7fa 10px)',
+                    }}
+                  />
+                  <span
+                    aria-hidden
+                    className="pointer-events-none absolute right-[-9px] bottom-0 w-[10px] h-[10px]"
+                    style={{
+                      background:
+                        'radial-gradient(circle at 100% 0%, transparent 9px, #e0e0e0 9px, #e0e0e0 10px, #f6f7fa 10px)',
+                    }}
+                  />
+                </>
+              )}
+              {/* In tabs mode, hover highlights only this icon+text chip —
+                  the tab background itself stays unchanged. No transCls:
+                  on activation the hover bg must clear instantly, otherwise
+                  it fades out slowly and leaves a chip-shaped ghost on the
+                  newly activated tab */}
+              <span
+                className={cn(
+                  'flex items-center gap-[6px] min-w-0 flex-1',
+                  isTabs &&
+                    cn(
+                      'relative rounded-[6px] px-[20px] py-[6px]',
+                      !isGroupActive && 'group-hover:bg-[#F0F6FF]',
+                    ),
+                )}
+              >
                 <i
                   className="icon-bsy-folder-close"
                   style={{ fontSize: 16, lineHeight: 1 }}
@@ -405,14 +768,15 @@ export function ScrollSlider({
               </span>
               <span
                 className={cn(
-                  'shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+                  'relative shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
                   transCls,
-                  isGroupActive && 'rotate-90',
+                  isGroupPopoverOpen && 'rotate-90',
                 )}
               >
                 <ChevronRightIcon size={16} />
               </span>
             </button>
+            </Fragment>
           );
         })}
       </div>
@@ -463,6 +827,14 @@ export function ScrollSlider({
                 transCls,
               )}
             >
+              {/* Transparent hover bridges: keep the mouse "inside" the popover
+                  while crossing the gap between pill and popover */}
+              {isTabs && (
+                <>
+                  <div className="absolute left-0 right-0 -top-[6px] h-[6px]" />
+                  <div className="absolute left-0 right-0 -bottom-[6px] h-[6px]" />
+                </>
+              )}
               <SearchInput
                 placeholder='搜索表单名称'
                 value={groupSearchQuery}