@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

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

@@ -1,872 +1,872 @@
-import {
-  useState,
-  useRef,
-  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, DividerIcon } from '../bs-icons';
-import {
-  buildEntryTreeFromAliasMap,
-  getEntryIconClass,
-  filterTreeBySearch,
-  buildFlowCenterTree,
-} from './build-tree';
-import { SearchInput } from './search-input';
-import { TreeItemNode } from './tree-item-node';
-import type { IAppDetail } from '@baishuyun/types';
-import type {
-  EntryTreeItem,
-  BsEntrySelectChangeResult,
-  BsEntrySelectSliderVariant,
-} from './types';
-import classNames from 'classnames';
-import { useSelectPopoverPosition } from '../../hooks/use-select-popover-position';
-
-const ChevronRightIcon = ({ size }: { size?: number }) => (
-  <SolidArrowDownIcon className="-rotate-90" size={size} />
-);
-
-export interface FlatNode {
-  node: EntryTreeItem;
-  appId: string;
-  section: 'current' | 'other';
-}
-
-export function ScrollSlider({
-  appDetails,
-  currentAppId,
-  selectedEntryId,
-  onSelect,
-  onOverflowChange,
-  showCurrentAppEntriesOnly = false,
-  variant = 'default',
-}: {
-  appDetails: Record<string, IAppDetail>;
-  currentAppId?: string;
-  selectedEntryId?: string;
-  onSelect: (result: BsEntrySelectChangeResult) => void;
-  onOverflowChange?: (hasOverflow: boolean) => void;
-  showCurrentAppEntriesOnly?: boolean;
-  variant?: BsEntrySelectSliderVariant;
-}) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [canScrollLeft, setCanScrollLeft] = useState(false);
-  const [canScrollRight, setCanScrollRight] = useState(false);
-
-  // Group popover state
-  const [activeGroup, setActiveGroup] = useState<FlatNode | null>(null);
-  const [groupSearchQuery, setGroupSearchQuery] = useState('');
-  const popoverRef = useRef<HTMLDivElement>(null);
-  const groupPillRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
-  const [groupPortalContainer, setGroupPortalContainer] = useState<HTMLElement | null>(null);
-  const activeGroupIdRef = useRef<string | null>(null);
-
-  const { popoverStyle, updatePopoverPosition } = useSelectPopoverPosition(
-    () => {
-      if (!activeGroupIdRef.current) return null;
-      return groupPillRefs.current.get(activeGroupIdRef.current) ?? null;
-    },
-    { 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[] = [];
-
-    for (const appId of appIds) {
-      const detail = appDetails[appId];
-      const tree = buildEntryTreeFromAliasMap(detail, '');
-      const section = appId === currentAppId ? 'current' as const : 'other' as const;
-      const mapped = tree.map((node) => ({ node, appId, section }));
-      if (section === 'current') {
-        currentFirst.push(...mapped);
-      } else {
-        otherNodes.push(...mapped);
-      }
-    }
-
-    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(','),
-  ]);
-
-  // Filtered tree for the active group popover
-  const filteredGroupTree = useMemo(() => {
-    if (!activeGroup) return [];
-    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;
-    const canLeft = el.scrollLeft > 0;
-    const canRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
-    setCanScrollLeft(canLeft);
-    setCanScrollRight(canRight);
-  }, []);
-
-  const hasOverflow = canScrollLeft || canScrollRight;
-
-  useEffect(() => {
-    onOverflowChange?.(hasOverflow);
-  }, [hasOverflow, onOverflowChange]);
-
-  // Map from descendant entry ID to the group pill node ID
-  const descendantToGroupId = useMemo(() => {
-    const map = new Map<string, string>();
-    function collectDescendants(node: EntryTreeItem, groupId: string) {
-      if (node.isSelectable) {
-        map.set(node.id, groupId);
-      }
-      for (const child of node.children) {
-        collectDescendants(child, groupId);
-      }
-    }
-    for (const { node } of flatNodes) {
-      if (!node.isSelectable) {
-        for (const child of node.children) {
-          collectDescendants(child, node.id);
-        }
-      }
-    }
-    return map;
-  }, [flatNodes]);
-
-  // Auto-scroll selected pill into view
-  useEffect(() => {
-    if (!selectedEntryId || !scrollRef.current) return;
-    // Try direct match first (leaf pill)
-    let targetId = selectedEntryId;
-    let pill = scrollRef.current.querySelector(
-      `[data-entry-id="${targetId}"]`,
-    ) as HTMLElement | null;
-    // Fall back to ancestor group pill
-    if (!pill) {
-      targetId = descendantToGroupId.get(selectedEntryId) || '';
-      if (targetId) {
-        pill = scrollRef.current.querySelector(
-          `[data-entry-id="${targetId}"]`,
-        ) as HTMLElement | null;
-      }
-    }
-    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(() => {
-    checkScroll();
-    const el = scrollRef.current;
-    if (!el) return;
-
-    const observer = new ResizeObserver(checkScroll);
-    observer.observe(el);
-    el.addEventListener('scroll', checkScroll, { passive: true });
-    return () => {
-      observer.disconnect();
-      el.removeEventListener('scroll', checkScroll);
-    };
-  }, [flatNodes, checkScroll]);
-
-  const scroll = useCallback((direction: 'left' | 'right') => {
-    const el = scrollRef.current;
-    if (!el) return;
-    el.scrollBy({
-      left: direction === 'left' ? -150 : 150,
-      behavior: 'smooth',
-    });
-  }, []);
-
-  const closeGroupPopover = useCallback(() => {
-    activeGroupIdRef.current = null;
-    setActiveGroup(null);
-    setGroupSearchQuery('');
-    if (hoverCloseTimerRef.current) {
-      clearTimeout(hoverCloseTimerRef.current);
-      hoverCloseTimerRef.current = null;
-    }
-  }, []);
-
-  const cancelCloseTimer = useCallback(() => {
-    if (hoverCloseTimerRef.current) {
-      clearTimeout(hoverCloseTimerRef.current);
-      hoverCloseTimerRef.current = null;
-    }
-  }, []);
-
-  // 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 {
-          setGroupPortalContainer(null);
-        }
-      }
-
-      // 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, 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) => {
-      onSelect(result);
-      closeGroupPopover();
-    },
-    [onSelect, closeGroupPopover],
-  );
-
-  // Click outside for group popover
-  useEffect(() => {
-    if (!activeGroup) return;
-
-    const handleClickOutside = (e: MouseEvent) => {
-      const path = e.composedPath();
-      if (popoverRef.current && path.includes(popoverRef.current)) return;
-      const triggerEl = groupPillRefs.current.get(activeGroup.node.id);
-      if (triggerEl && path.includes(triggerEl)) return;
-      closeGroupPopover();
-    };
-
-    const handleScroll = () => updatePopoverPosition();
-
-    document.addEventListener('mousedown', handleClickOutside);
-    window.addEventListener('scroll', handleScroll, true);
-    window.addEventListener('resize', handleScroll);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      window.removeEventListener('scroll', handleScroll, true);
-      window.removeEventListener('resize', handleScroll);
-    };
-  }, [activeGroup, closeGroupPopover, updatePopoverPosition]);
-
-  // Keyboard escape
-  useEffect(() => {
-    if (!activeGroup) return;
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') closeGroupPopover();
-    };
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [activeGroup, closeGroupPopover]);
-
-  if (flatNodes.length === 0) return null;
-
-  const hasGroupSearch = groupSearchQuery.trim().length > 0;
-
-  const sliderBody = (
-    <>
-      {/* Left arrow: always in DOM, width transition */}
-      <span
-        className={cn(
-          transCls,
-          'inline-flex overflow-hidden items-center',
-          canScrollLeft ? 'w-[26px] opacity-100 mr-2.5' : 'w-0 opacity-0 mr-0',
-        )}
-      >
-        <IconBtn
-          rounded
-          icon={<LeftArrowIcon />}
-          onClick={() => scroll('left')}
-        />
-      </span>
-
-      <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
-            // 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-[-20vw] before:right-0 before:h-[1px] before:w-[300vw] before:bg-[#e0e0e0] h-full'
-            : 'items-center gap-2.5',
-        )}
-      >
-        {flatNodes.map((flatNode, index) => {
-          const { node, appId, section } = flatNode;
-          const isLeaf = node.isSelectable;
-          const isSelected = isLeaf && selectedEntryId === node.id;
-          // 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) {
-              groupPillRefs.current.set(node.id, el);
-            } else {
-              groupPillRefs.current.delete(node.id);
-            }
-          };
-
-          if (isLeaf) {
-            return (
-              <Fragment key={node.id}>
-                {divider}
-                <button
-                data-entry-id={node.id}
-                type="button"
-                onClick={() => {
-                  if (node.entry) {
-                    onSelect({ entry: node.entry, appId, section });
-                  }
-                }}
-                className={cn(
-                  'flex items-center shrink-0 max-w-[240px]',
-                  transCls,
-                  isTabs
-                    ? [
-                        // 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] gap-[6px]',
-                        isSelected
-                          ? 'border border-[#F0F6FF] bg-[#F0F6FF] text-[#0265FF]'
-                          : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
-                      ],
-                )}
-              >
-                {/* 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
-              data-entry-id={node.id}
-              ref={setPillRef}
-              type="button"
-              {...(!isTabs
-                ? {
-                    onClick: (e: React.MouseEvent) => openGroupPopover(flatNode, e),
-                  }
-                : {})}
-              className={cn(
-                'flex items-center shrink-0 max-w-[240px]',
-                transCls,
-                isTabs
-                  ? [
-                      // 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]',
-                    ]
-                  : [
-                      'gap-[10px] px-[10px] py-[7px] rounded-[4px]',
-                      isGroupActive
-                        ? 'border border-[#0265FF] text-[#030303]'
-                        : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
-                    ],
-              )}
-            >
-              {/* 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 }}
-                />
-                <span className="text-[14px] leading-[normal] truncate">
-                  {node.name}
-                </span>
-              </span>
-              <span
-                className={cn(
-                  'relative shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
-                  transCls,
-                  isGroupPopoverOpen && 'rotate-90',
-                )}
-              >
-                <ChevronRightIcon size={16} />
-              </span>
-            </button>
-            </Fragment>
-          );
-        })}
-      </div>
-
-      {/* Right arrow: always in DOM, width transition */}
-      <span
-        className={cn(
-          transCls,
-          'inline-flex overflow-hidden items-center',
-          canScrollRight ? 'w-[26px] opacity-100 ml-2.5' : 'w-0 opacity-0 ml-0',
-        )}
-      >
-        <IconBtn
-          rounded
-          icon={
-            <span className="rotate-180 inline-flex">
-              <LeftArrowIcon />
-            </span>
-          }
-          onClick={() => scroll('right')}
-        />
-      </span>
-    </>
-  );
-
-  const tabCls = isTabs ? 'h-full px-[10px] items-end' : "items-center"
-
-  return (
-    <div className={classNames("flex flex-1 min-w-0", tabCls)}>
-      {isTabs ? (
-        <div className="relative flex items-stretch flex-1 min-w-0 h-full">
-          {sliderBody}
-        </div>
-      ) : (
-        sliderBody
-      )}
-
-      {/* Group subtree popover */}
-      {activeGroup &&
-        (() => {
-          const content = (
-            <div
-              ref={popoverRef}
-              style={popoverStyle}
-              className={cn(
-                'bg-white rounded-[10px] shadow-[0px_0px_10px_0px_rgba(0,0,0,0.04)] p-[4px]',
-                'flex flex-col gap-[4px]',
-                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}
-                onChange={setGroupSearchQuery}
-              />
-              <div className="flex flex-col gap-[4px] max-h-[300px] overflow-y-auto">
-                {filteredGroupTree.length > 0 ? (
-                  filteredGroupTree.map((child) => (
-                    <TreeItemNode
-                      key={child.id}
-                      item={child}
-                      selectedEntryId={selectedEntryId}
-                      appId={activeGroup.appId}
-                      section={activeGroup.section}
-                      onSelect={handleGroupPopoverSelect}
-                    />
-                  ))
-                ) : hasGroupSearch ? (
-                  <div className="text-[12px] text-[#999999] py-[8px] text-center">
-                    无匹配结果
-                  </div>
-                ) : (
-                  <div className="text-[12px] text-[#999999] py-[8px] text-center">
-                    暂无表单
-                  </div>
-                )}
-              </div>
-            </div>
-          );
-
-          return createPortal(content, groupPortalContainer || document.body);
-        })()}
-    </div>
-  );
-}
+import {
+  useState,
+  useRef,
+  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, DividerIcon } from '../bs-icons';
+import {
+  buildEntryTreeFromAliasMap,
+  getEntryIconClass,
+  filterTreeBySearch,
+  buildFlowCenterTree,
+} from './build-tree';
+import { SearchInput } from './search-input';
+import { TreeItemNode } from './tree-item-node';
+import type { IAppDetail } from '@baishuyun/types';
+import type {
+  EntryTreeItem,
+  BsEntrySelectChangeResult,
+  BsEntrySelectSliderVariant,
+} from './types';
+import classNames from 'classnames';
+import { useSelectPopoverPosition } from '../../hooks/use-select-popover-position';
+
+const ChevronRightIcon = ({ size }: { size?: number }) => (
+  <SolidArrowDownIcon className="-rotate-90" size={size} />
+);
+
+export interface FlatNode {
+  node: EntryTreeItem;
+  appId: string;
+  section: 'current' | 'other';
+}
+
+export function ScrollSlider({
+  appDetails,
+  currentAppId,
+  selectedEntryId,
+  onSelect,
+  onOverflowChange,
+  showCurrentAppEntriesOnly = false,
+  variant = 'default',
+}: {
+  appDetails: Record<string, IAppDetail>;
+  currentAppId?: string;
+  selectedEntryId?: string;
+  onSelect: (result: BsEntrySelectChangeResult) => void;
+  onOverflowChange?: (hasOverflow: boolean) => void;
+  showCurrentAppEntriesOnly?: boolean;
+  variant?: BsEntrySelectSliderVariant;
+}) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  // Group popover state
+  const [activeGroup, setActiveGroup] = useState<FlatNode | null>(null);
+  const [groupSearchQuery, setGroupSearchQuery] = useState('');
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const groupPillRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const [groupPortalContainer, setGroupPortalContainer] = useState<HTMLElement | null>(null);
+  const activeGroupIdRef = useRef<string | null>(null);
+
+  const { popoverStyle, updatePopoverPosition } = useSelectPopoverPosition(
+    () => {
+      if (!activeGroupIdRef.current) return null;
+      return groupPillRefs.current.get(activeGroupIdRef.current) ?? null;
+    },
+    { 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[] = [];
+
+    for (const appId of appIds) {
+      const detail = appDetails[appId];
+      const tree = buildEntryTreeFromAliasMap(detail, '');
+      const section = appId === currentAppId ? 'current' as const : 'other' as const;
+      const mapped = tree.map((node) => ({ node, appId, section }));
+      if (section === 'current') {
+        currentFirst.push(...mapped);
+      } else {
+        otherNodes.push(...mapped);
+      }
+    }
+
+    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(','),
+  ]);
+
+  // Filtered tree for the active group popover
+  const filteredGroupTree = useMemo(() => {
+    if (!activeGroup) return [];
+    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;
+    const canLeft = el.scrollLeft > 0;
+    const canRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 1;
+    setCanScrollLeft(canLeft);
+    setCanScrollRight(canRight);
+  }, []);
+
+  const hasOverflow = canScrollLeft || canScrollRight;
+
+  useEffect(() => {
+    onOverflowChange?.(hasOverflow);
+  }, [hasOverflow, onOverflowChange]);
+
+  // Map from descendant entry ID to the group pill node ID
+  const descendantToGroupId = useMemo(() => {
+    const map = new Map<string, string>();
+    function collectDescendants(node: EntryTreeItem, groupId: string) {
+      if (node.isSelectable) {
+        map.set(node.id, groupId);
+      }
+      for (const child of node.children) {
+        collectDescendants(child, groupId);
+      }
+    }
+    for (const { node } of flatNodes) {
+      if (!node.isSelectable) {
+        for (const child of node.children) {
+          collectDescendants(child, node.id);
+        }
+      }
+    }
+    return map;
+  }, [flatNodes]);
+
+  // Auto-scroll selected pill into view
+  useEffect(() => {
+    if (!selectedEntryId || !scrollRef.current) return;
+    // Try direct match first (leaf pill)
+    let targetId = selectedEntryId;
+    let pill = scrollRef.current.querySelector(
+      `[data-entry-id="${targetId}"]`,
+    ) as HTMLElement | null;
+    // Fall back to ancestor group pill
+    if (!pill) {
+      targetId = descendantToGroupId.get(selectedEntryId) || '';
+      if (targetId) {
+        pill = scrollRef.current.querySelector(
+          `[data-entry-id="${targetId}"]`,
+        ) as HTMLElement | null;
+      }
+    }
+    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(() => {
+    checkScroll();
+    const el = scrollRef.current;
+    if (!el) return;
+
+    const observer = new ResizeObserver(checkScroll);
+    observer.observe(el);
+    el.addEventListener('scroll', checkScroll, { passive: true });
+    return () => {
+      observer.disconnect();
+      el.removeEventListener('scroll', checkScroll);
+    };
+  }, [flatNodes, checkScroll]);
+
+  const scroll = useCallback((direction: 'left' | 'right') => {
+    const el = scrollRef.current;
+    if (!el) return;
+    el.scrollBy({
+      left: direction === 'left' ? -150 : 150,
+      behavior: 'smooth',
+    });
+  }, []);
+
+  const closeGroupPopover = useCallback(() => {
+    activeGroupIdRef.current = null;
+    setActiveGroup(null);
+    setGroupSearchQuery('');
+    if (hoverCloseTimerRef.current) {
+      clearTimeout(hoverCloseTimerRef.current);
+      hoverCloseTimerRef.current = null;
+    }
+  }, []);
+
+  const cancelCloseTimer = useCallback(() => {
+    if (hoverCloseTimerRef.current) {
+      clearTimeout(hoverCloseTimerRef.current);
+      hoverCloseTimerRef.current = null;
+    }
+  }, []);
+
+  // 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 {
+          setGroupPortalContainer(null);
+        }
+      }
+
+      // 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, 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) => {
+      onSelect(result);
+      closeGroupPopover();
+    },
+    [onSelect, closeGroupPopover],
+  );
+
+  // Click outside for group popover
+  useEffect(() => {
+    if (!activeGroup) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const path = e.composedPath();
+      if (popoverRef.current && path.includes(popoverRef.current)) return;
+      const triggerEl = groupPillRefs.current.get(activeGroup.node.id);
+      if (triggerEl && path.includes(triggerEl)) return;
+      closeGroupPopover();
+    };
+
+    const handleScroll = () => updatePopoverPosition();
+
+    document.addEventListener('mousedown', handleClickOutside);
+    window.addEventListener('scroll', handleScroll, true);
+    window.addEventListener('resize', handleScroll);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      window.removeEventListener('scroll', handleScroll, true);
+      window.removeEventListener('resize', handleScroll);
+    };
+  }, [activeGroup, closeGroupPopover, updatePopoverPosition]);
+
+  // Keyboard escape
+  useEffect(() => {
+    if (!activeGroup) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') closeGroupPopover();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [activeGroup, closeGroupPopover]);
+
+  if (flatNodes.length === 0) return null;
+
+  const hasGroupSearch = groupSearchQuery.trim().length > 0;
+
+  const sliderBody = (
+    <>
+      {/* Left arrow: always in DOM, width transition */}
+      <span
+        className={cn(
+          transCls,
+          'inline-flex overflow-hidden items-center',
+          canScrollLeft ? 'w-[26px] opacity-100 mr-2.5' : 'w-0 opacity-0 mr-0',
+        )}
+      >
+        <IconBtn
+          rounded
+          icon={<LeftArrowIcon />}
+          onClick={() => scroll('left')}
+        />
+      </span>
+
+      <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
+            // 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-[-20vw] before:right-0 before:h-[1px] before:w-[300vw] before:bg-[#e0e0e0] h-full'
+            : 'items-center gap-2.5',
+        )}
+      >
+        {flatNodes.map((flatNode, index) => {
+          const { node, appId, section } = flatNode;
+          const isLeaf = node.isSelectable;
+          const isSelected = isLeaf && selectedEntryId === node.id;
+          // 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) {
+              groupPillRefs.current.set(node.id, el);
+            } else {
+              groupPillRefs.current.delete(node.id);
+            }
+          };
+
+          if (isLeaf) {
+            return (
+              <Fragment key={node.id}>
+                {divider}
+                <button
+                data-entry-id={node.id}
+                type="button"
+                onClick={() => {
+                  if (node.entry) {
+                    onSelect({ entry: node.entry, appId, section });
+                  }
+                }}
+                className={cn(
+                  'flex items-center shrink-0 max-w-[240px]',
+                  transCls,
+                  isTabs
+                    ? [
+                        // 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] gap-[6px]',
+                        isSelected
+                          ? 'border border-[#F0F6FF] bg-[#F0F6FF] text-[#0265FF]'
+                          : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
+                      ],
+                )}
+              >
+                {/* 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
+              data-entry-id={node.id}
+              ref={setPillRef}
+              type="button"
+              {...(!isTabs
+                ? {
+                    onClick: (e: React.MouseEvent) => openGroupPopover(flatNode, e),
+                  }
+                : {})}
+              className={cn(
+                'flex items-center shrink-0 max-w-[240px]',
+                transCls,
+                isTabs
+                  ? [
+                      // 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]',
+                    ]
+                  : [
+                      'gap-[10px] px-[10px] py-[7px] rounded-[4px]',
+                      isGroupActive
+                        ? 'border border-[#0265FF] text-[#030303]'
+                        : 'border border-[#E0E0E0] text-[#030303] hover:bg-[#F0F6FF]',
+                    ],
+              )}
+            >
+              {/* 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 }}
+                />
+                <span className="text-[14px] leading-[normal] truncate">
+                  {node.name}
+                </span>
+              </span>
+              <span
+                className={cn(
+                  'relative shrink-0 flex items-center justify-center w-[16px] h-[16px] text-[#666666]',
+                  transCls,
+                  isGroupPopoverOpen && 'rotate-90',
+                )}
+              >
+                <ChevronRightIcon size={16} />
+              </span>
+            </button>
+            </Fragment>
+          );
+        })}
+      </div>
+
+      {/* Right arrow: always in DOM, width transition */}
+      <span
+        className={cn(
+          transCls,
+          'inline-flex overflow-hidden items-center',
+          canScrollRight ? 'w-[26px] opacity-100 ml-2.5' : 'w-0 opacity-0 ml-0',
+        )}
+      >
+        <IconBtn
+          rounded
+          icon={
+            <span className="rotate-180 inline-flex">
+              <LeftArrowIcon />
+            </span>
+          }
+          onClick={() => scroll('right')}
+        />
+      </span>
+    </>
+  );
+
+  const tabCls = isTabs ? 'h-full px-[10px] items-end' : "items-center"
+
+  return (
+    <div className={classNames("flex flex-1 min-w-0", tabCls)}>
+      {isTabs ? (
+        <div className="relative flex items-stretch flex-1 min-w-0 h-full">
+          {sliderBody}
+        </div>
+      ) : (
+        sliderBody
+      )}
+
+      {/* Group subtree popover */}
+      {activeGroup &&
+        (() => {
+          const content = (
+            <div
+              ref={popoverRef}
+              style={popoverStyle}
+              className={cn(
+                'bg-white rounded-[10px] shadow-[0px_0px_10px_0px_rgba(0,0,0,0.04)] p-[4px]',
+                'flex flex-col gap-[4px]',
+                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}
+                onChange={setGroupSearchQuery}
+              />
+              <div className="flex flex-col gap-[4px] max-h-[300px] overflow-y-auto">
+                {filteredGroupTree.length > 0 ? (
+                  filteredGroupTree.map((child) => (
+                    <TreeItemNode
+                      key={child.id}
+                      item={child}
+                      selectedEntryId={selectedEntryId}
+                      appId={activeGroup.appId}
+                      section={activeGroup.section}
+                      onSelect={handleGroupPopoverSelect}
+                    />
+                  ))
+                ) : hasGroupSearch ? (
+                  <div className="text-[12px] text-[#999999] py-[8px] text-center">
+                    无匹配结果
+                  </div>
+                ) : (
+                  <div className="text-[12px] text-[#999999] py-[8px] text-center">
+                    暂无表单
+                  </div>
+                )}
+              </div>
+            </div>
+          );
+
+          return createPortal(content, groupPortalContainer || document.body);
+        })()}
+    </div>
+  );
+}