@tldiagram/core-ui 1.87.0

package/src/components/ViewExplorer/TagManager/index.tsx

@@ -0,0 +1,418 @@
+import React, { useState } from 'react'
+import {
+  Box,
+  VStack,
+  HStack,
+  Text,
+  Wrap,
+  WrapItem,
+  IconButton,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverBody,
+  Input,
+  Button,
+  Divider,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { AddIcon } from '@chakra-ui/icons'
+import ScrollIndicatorWrapper from '../../ScrollIndicatorWrapper'
+import { ViewLayer, LibraryElement, PlacedElement } from '../../../types'
+import { TagItem } from './TagItem'
+import { LayerItem } from './LayerItem'
+import { ColorPicker } from './ColorPicker'
+import { pickUnusedColor } from '../utils'
+import { ChevronDownIcon } from '../../Icons'
+
+interface Props {
+  availableTags: string[]
+  tagColors: Record<string, import('../../../types').Tag>
+  layers: ViewLayer[]
+  viewElements: PlacedElement[]
+  selectedElement: LibraryElement | null
+  hiddenLayerTags: string[]
+  setHiddenLayerTags: (tags: string[]) => void
+  onToggleTagOnElement: (tag: string) => void
+  onHoverLayer: (tags: string[] | null, color?: string | null) => void
+  onCreateLayer: (name: string, tags: string[], color: string) => Promise<void>
+  onUpdateLayer: (layer: ViewLayer) => Promise<void>
+  onDeleteLayer: (id: number) => Promise<void>
+  onCreateTag: (tag: string, color?: string, description?: string) => Promise<void>
+  tagCounts: Record<string, number>
+  layerCounts: Record<number, number>
+}
+
+export const TagManager: React.FC<Props> = ({
+  availableTags,
+  tagColors,
+  layers,
+  selectedElement,
+  hiddenLayerTags,
+  setHiddenLayerTags,
+  onToggleTagOnElement,
+  onHoverLayer,
+  onCreateLayer,
+  onCreateTag,
+  onUpdateLayer,
+  onDeleteLayer,
+  tagCounts,
+  layerCounts,
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [expandedLayerIds, setExpandedLayerIds] = useState<Set<number>>(new Set())
+  const [namingPopover, setNamingPopover] = useState<{
+    isOpen: boolean;
+    tags: string[];
+    defaultName: string;
+    targetTag?: string | null;
+    targetLayerId?: number | null;
+  }>({
+    isOpen: false,
+    tags: [],
+    defaultName: '',
+  })
+
+  const toggleLayerActive = (layer: ViewLayer) => {
+    const isActive = layer.tags.length === 0 || !layer.tags.some((t) => hiddenLayerTags.includes(t))
+    if (isActive) {
+      setHiddenLayerTags(Array.from(new Set([...hiddenLayerTags, ...layer.tags])))
+    } else {
+      setHiddenLayerTags(hiddenLayerTags.filter((t) => !layer.tags.includes(t)))
+    }
+  }
+
+  const toggleTagVisibility = (tag: string) => {
+    if (hiddenLayerTags.includes(tag)) {
+      setHiddenLayerTags(hiddenLayerTags.filter((t) => t !== tag))
+    } else {
+      setHiddenLayerTags([...hiddenLayerTags, tag])
+    }
+  }
+
+  const toggleLayerExpanded = (id: number) => {
+    setExpandedLayerIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const handleCreateGroup = (tagA: string, tagB: string, targetTag: string) => {
+    setNamingPopover({
+      isOpen: true,
+      tags: [tagA, tagB],
+      defaultName: `${tagA} & ${tagB}`,
+      targetTag,
+    })
+  }
+
+  const handleCreateGroupFromLayer = (targetTag: string, sourceLayerId: number) => {
+    const layer = layers.find(l => l.id === sourceLayerId)
+    if (!layer) return
+    setNamingPopover({
+      isOpen: true,
+      tags: Array.from(new Set([...layer.tags, targetTag])),
+      defaultName: `Group ${layer.name} & ${targetTag}`,
+      targetTag,
+    })
+  }
+
+  const handleConfirmNaming = async (name: string) => {
+    const { tags } = namingPopover
+    if (!tags || tags.length === 0) return
+    
+    const color = pickUnusedColor(Object.values(tagColors).map(t => t.color))
+    await onCreateLayer(name, tags, color)
+    setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null, targetLayerId: null }))
+  }
+
+  const { isOpen: isTagOpen, onOpen: onTagOpen, onClose: onTagClose } = useDisclosure()
+  const { isOpen: isNewTagColorOpen, onOpen: onNewTagColorOpen, onClose: onNewTagColorClose } = useDisclosure()
+  const [newTagName, setNewTagName] = useState('')
+  const [newTagColor, setNewTagColor] = useState('#A0AEC0')
+  const [newTagDescription, setNewTagDescription] = useState('')
+
+  const handleOpenAddTag = () => {
+    setNewTagColor(pickUnusedColor(Object.values(tagColors).map(t => t.color)))
+    onTagOpen()
+  }
+
+  const handleAddTag = async () => {
+    const name = newTagName.trim()
+    if (!name) return
+
+    try {
+      await onCreateTag(name, newTagColor, newTagDescription)
+      if (selectedElement && !(selectedElement.tags || []).includes(name)) {
+        onToggleTagOnElement(name)
+      }
+      setNewTagName('')
+      setNewTagDescription('')
+      onTagClose()
+    } catch {
+      // Keep the popover open so the user can retry.
+    }
+  }
+
+  const usedTags = availableTags.filter(tag => (tagCounts[tag] || 0) > 0)
+  const unusedTags = availableTags.filter(tag => (tagCounts[tag] || 0) === 0)
+
+  return (
+    <Box
+      display="flex"
+      flexDirection="column"
+      overflow="hidden"
+      flex="1"
+      borderTop="1px solid"
+      borderColor="whiteAlpha.100"
+    >
+      <HStack px={4} py={2} spacing={1.5} flexShrink={0}>
+        <Text
+          fontSize="xs"
+          fontWeight="700"
+          color="white"
+          textTransform="uppercase"
+          letterSpacing="0.02em"
+          flex={1}
+        >
+          Tags
+        </Text>
+
+        <Popover isOpen={isTagOpen} onClose={onTagClose} placement="bottom-end">
+          <PopoverTrigger>
+            <IconButton
+              aria-label="Add Tag"
+              icon={<AddIcon boxSize="8px" />}
+              size="xs"
+              variant="ghost"
+              color="gray.600"
+              _hover={{ color: 'white', bg: 'whiteAlpha.100' }}
+              onClick={handleOpenAddTag}
+            />
+          </PopoverTrigger>
+          <PopoverContent bg="gray.800" borderColor="whiteAlpha.200" w="240px" shadow="xl">
+            <PopoverBody p={2}>
+              <VStack spacing={2} align="stretch">
+                <HStack spacing={2}>
+                  <Popover
+                    isOpen={isNewTagColorOpen}
+                    onClose={onNewTagColorClose}
+                    placement="left"
+                    closeOnBlur
+                  >
+                    <PopoverTrigger>
+                      <Box
+                        w="20px"
+                        h="20px"
+                        rounded="full"
+                        bg={newTagColor}
+                        cursor="pointer"
+                        flexShrink={0}
+                        onClick={onNewTagColorOpen}
+                      />
+                    </PopoverTrigger>
+                    <ColorPicker onSelect={setNewTagColor} onClose={onNewTagColorClose} />
+                  </Popover>
+                  <VStack spacing={2} flex={1}>
+                    <Input
+                      size="xs"
+                      placeholder="Tag name..."
+                      value={newTagName}
+                      onChange={(e) => setNewTagName(e.target.value)}
+                      onKeyDown={(e) => { if (e.key === 'Enter') { void handleAddTag() } }}
+                      autoFocus
+                      bg="whiteAlpha.50"
+                      borderColor="whiteAlpha.100"
+                      _focus={{ borderColor: 'var(--accent)' }}
+                    />
+                    <Input
+                      size="xs"
+                      placeholder="Optional description..."
+                      value={newTagDescription}
+                      onChange={(e) => setNewTagDescription(e.target.value)}
+                      onKeyDown={(e) => { if (e.key === 'Enter') { void handleAddTag() } }}
+                      bg="whiteAlpha.50"
+                      borderColor="whiteAlpha.100"
+                      _focus={{ borderColor: 'var(--accent)' }}
+                    />
+                  </VStack>
+                  <Button size="xs" colorScheme="blue" h="auto" py={4} onClick={() => { void handleAddTag() }}>Add</Button>
+                </HStack>
+              </VStack>
+            </PopoverBody>
+          </PopoverContent>
+        </Popover>
+
+        <IconButton
+          aria-label="Toggle Section"
+          icon={<ChevronDownIcon size={12} />}
+          size="xs"
+          variant="ghost"
+          color="whiteAlpha.500"
+          _hover={{ color: 'white', bg: 'whiteAlpha.200' }}
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          transform={isCollapsed ? 'rotate(-90deg)' : 'none'}
+        />
+      </HStack>
+
+      {!isCollapsed && (
+        <ScrollIndicatorWrapper flex={1} minH={0}>
+          <VStack align="stretch" spacing={0} pb={3}>
+            {/* Active Element Section */}
+            {selectedElement && (
+              <Box px={3} py={2.5} bg="whiteAlpha.50" borderBottom="1px solid" borderColor="whiteAlpha.100">
+                <HStack mb={2} spacing={1.5}>
+                  <Box w="5px" h="5px" rounded="full" bg="var(--accent)" flexShrink={0} />
+                  <Text fontSize="9px" fontWeight="700" color="whiteAlpha.400" textTransform="uppercase" letterSpacing="0.08em" isTruncated>
+                    {selectedElement.name}
+                  </Text>
+                </HStack>
+                <VStack align="stretch" spacing={2.5}>
+                  {usedTags.length > 0 && (
+                    <Wrap spacing={1}>
+                      {usedTags.map((tag) => (
+                        <WrapItem key={tag}>
+                          <TagItem
+                            tag={tag}
+                            color={tagColors[tag]?.color || '#A0AEC0'}
+                            description={tagColors[tag]?.description || null}
+                            isAssigned={(selectedElement.tags || []).includes(tag)}
+                            tagCount={tagCounts[tag]}
+                            onToggle={() => onToggleTagOnElement(tag)}
+                            onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
+                            onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
+                            onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
+                            namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
+                            onConfirmNaming={handleConfirmNaming}
+                            onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
+                            isVisible={!hiddenLayerTags.includes(tag)}
+                            onToggleVisibility={() => toggleTagVisibility(tag)}
+                            onSetColor={(color) => onCreateTag(tag, color)}
+                            onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
+                          />
+                        </WrapItem>
+                      ))}
+                    </Wrap>
+                  )}
+                  {usedTags.length > 0 && unusedTags.length > 0 && (
+                    <Divider borderColor="whiteAlpha.100" />
+                  )}
+                  {unusedTags.length > 0 && (
+                    <Wrap spacing={1} opacity={0.6}>
+                      {unusedTags.map((tag) => (
+                        <WrapItem key={tag}>
+                          <TagItem
+                            tag={tag}
+                            color={tagColors[tag]?.color || '#A0AEC0'}
+                            description={tagColors[tag]?.description || null}
+                            isAssigned={(selectedElement.tags || []).includes(tag)}
+                            tagCount={tagCounts[tag]}
+                            onToggle={() => onToggleTagOnElement(tag)}
+                            onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
+                            onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
+                            onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
+                            namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
+                            onConfirmNaming={handleConfirmNaming}
+                            onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
+                            onSetColor={(color) => onCreateTag(tag, color)}
+                            onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
+                          />
+                        </WrapItem>
+                      ))}
+                    </Wrap>
+                  )}
+                </VStack>
+              </Box>
+            )}
+
+            {/* Layers (Groups) List */}
+            {layers.map((layer) => (
+              <LayerItem
+                key={layer.id}
+                layer={layer}
+                isActive={layer.tags.length === 0 || !layer.tags.some((t) => hiddenLayerTags.includes(t))}
+                isExpanded={expandedLayerIds.has(layer.id)}
+                tagCount={layerCounts[layer.id] || 0}
+                tagColors={tagColors}
+                onToggleActive={() => toggleLayerActive(layer)}
+                onToggleExpanded={() => toggleLayerExpanded(layer.id)}
+                onDelete={() => onDeleteLayer(layer.id)}
+                onSetColor={(color) => onUpdateLayer({ ...layer, color })}
+                onSetTagColor={onCreateTag}
+                onAddTag={(tag) => onUpdateLayer({ ...layer, tags: Array.from(new Set([...layer.tags, tag])) })}
+                onRemoveTag={(tag) => onUpdateLayer({ ...layer, tags: layer.tags.filter((existingTag) => existingTag !== tag) })}
+                onHover={(active) => onHoverLayer(active ? layer.tags : null, layer.color)}
+                selectedElementTags={selectedElement?.tags}
+                onToggleTagOnElement={onToggleTagOnElement}
+                namingPopover={namingPopover.targetLayerId === layer.id ? namingPopover : undefined}
+                onConfirmNaming={handleConfirmNaming}
+                onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetLayerId: null }))}
+              />
+            ))}
+
+            {/* All Tags (if no element selected or just as library) */}
+            {!selectedElement && (
+              <Box px={4} py={3}>
+                <Text fontSize="10px" fontWeight="bold" color="gray.600" mb={2} textTransform="uppercase">Drag & Drop to tag elements</Text>
+                <VStack align="stretch" spacing={3}>
+                  {usedTags.length > 0 && (
+                    <Wrap spacing={2}>
+                      {usedTags.map((tag) => (
+                        <WrapItem key={tag}>
+                          <TagItem
+                            tag={tag}
+                            color={tagColors[tag]?.color || '#A0AEC0'}
+                            description={tagColors[tag]?.description || null}
+                            tagCount={tagCounts[tag]}
+                            onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
+                            onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
+                            onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
+                            namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
+                            onConfirmNaming={handleConfirmNaming}
+                            onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
+                            isVisible={!hiddenLayerTags.includes(tag)}
+                            onToggleVisibility={() => toggleTagVisibility(tag)}
+                            onSetColor={(color) => onCreateTag(tag, color)}
+                            onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
+                          />
+                        </WrapItem>
+                      ))}
+                    </Wrap>
+                  )}
+                  {usedTags.length > 0 && unusedTags.length > 0 && (
+                    <Divider borderColor="whiteAlpha.100" />
+                  )}
+                  {unusedTags.length > 0 && (
+                    <Wrap spacing={2} opacity={0.6}>
+                      {unusedTags.map((tag) => (
+                        <WrapItem key={tag}>
+                          <TagItem
+                            tag={tag}
+                            color={tagColors[tag]?.color || '#A0AEC0'}
+                            description={tagColors[tag]?.description || null}
+                            tagCount={tagCounts[tag]}
+                            onHover={(active) => onHoverLayer(active ? [tag] : null, tagColors[tag]?.color)}
+                            onDropTag={(dragged: string) => handleCreateGroup(tag, dragged, tag)}
+                            onDropLayer={(draggedId: number) => handleCreateGroupFromLayer(tag, draggedId)}
+                            namingPopover={namingPopover.targetTag === tag ? namingPopover : undefined}
+                            onConfirmNaming={handleConfirmNaming}
+                            onCloseNaming={() => setNamingPopover(prev => ({ ...prev, isOpen: false, targetTag: null }))}
+                            onSetColor={(color) => onCreateTag(tag, color)}
+                            onSetDescription={(desc) => onCreateTag(tag, tagColors[tag]?.color, desc)}
+                          />
+                        </WrapItem>
+                      ))}
+                    </Wrap>
+                  )}
+                </VStack>
+              </Box>
+            )}
+          </VStack>
+        </ScrollIndicatorWrapper>
+      )}
+
+    </Box>
+  )
+}

package/src/components/ViewExplorer/ViewNavigator.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import { Box, Tooltip, VStack, Text, Divider } from '@chakra-ui/react'
+import { ZoomInIcon, ZoomOutIcon, ChevronDownIcon } from '../Icons'
+import { KbdHint } from '../PanelUI'
+import { NavItem } from './types'
+import { PARENT_VIEW_COLOR, CHILD_VIEW_COLOR } from '../../constants/colors'
+
+interface Props {
+  parents: NavItem[]
+  children: NavItem[]
+  activeFilter: 'out' | 'in' | null
+  onFilterToggle: (type: 'out' | 'in', items: NavItem[]) => void
+  onHoverZoom?: (elementId: number | null, type: 'in' | 'out' | null) => void
+}
+
+export const ViewNavigator: React.FC<Props> = ({
+  parents,
+  children,
+  activeFilter,
+  onFilterToggle,
+  onHoverZoom,
+}) => {
+  const renderNavButton = (type: 'out' | 'in', items: NavItem[]) => {
+    const isOut = type === 'out'
+    const label = isOut ? 'Zoom Out' : 'Zoom In'
+    const IconCmp = isOut ? ZoomOutIcon : ZoomInIcon
+    const shortcut = isOut ? 'W' : 'S'
+    const disabled = items.length === 0
+    const isActive = activeFilter === type
+    const accentColor = isOut ? PARENT_VIEW_COLOR : CHILD_VIEW_COLOR
+
+    const subtitle = disabled
+      ? isOut
+        ? 'No parent views'
+        : 'No child views'
+      : items.length === 1
+        ? items[0].name
+        : `Select from ${items.length} options`
+
+    return (
+      <Tooltip
+        label={
+          disabled
+            ? isOut
+              ? 'No parent views'
+              : 'No child views'
+            : `Navigate to ${isOut ? 'Parent' : 'Child'} View [${shortcut}]`
+        }
+        placement="left"
+        openDelay={400}
+      >
+        <Box
+          as="button"
+          role="group"
+          className={`panel-action-button ${isActive ? 'is-active' : ''}`}
+          disabled={disabled}
+          onClick={() => onFilterToggle(type, items)}
+          onMouseEnter={() => {
+            if (disabled || items.length !== 1) return
+            onHoverZoom?.(items[0].elementId ?? null, type)
+          }}
+          onMouseLeave={() => {
+            if (disabled || items.length !== 1) return
+            onHoverZoom?.(null, null)
+          }}
+          opacity={disabled ? 0.4 : 1}
+        >
+          <Box className="panel-action-icon-container" color={disabled ? 'gray.600' : accentColor}>
+            <IconCmp />
+          </Box>
+          <VStack align="start" spacing={0} flex={1} minW={0}>
+            <Text
+              fontSize="sm"
+              color={disabled ? 'gray.500' : 'white'}
+              fontWeight="medium"
+              isTruncated
+              w="full"
+              textAlign="left"
+            >
+              {label}
+            </Text>
+            <Text
+              fontSize="xs"
+              color={disabled ? 'gray.600' : isActive ? accentColor : 'gray.400'}
+              isTruncated
+              w="full"
+              transition="color 0.15s"
+              textAlign="left"
+            >
+              {subtitle}
+            </Text>
+          </VStack>
+          {items.length > 1 && (
+            <Box
+              color="whiteAlpha.400"
+              _groupHover={{ color: 'white' }}
+              flexShrink={0}
+              transform={isActive ? 'rotate(180deg)' : 'none'}
+              transition="all 0.25s cubic-bezier(0.25, 1, 0.5, 1)"
+              mx={1}
+            >
+              <ChevronDownIcon size={12} strokeWidth={3.5} />
+            </Box>
+          )}
+          {isActive && items.length <= 1 && (
+            <Box w="5px" h="5px" rounded="full" bg={accentColor} flexShrink={0} mx={1} />
+          )}
+          <KbdHint>{shortcut}</KbdHint>
+        </Box>
+      </Tooltip>
+    )
+  }
+
+  return (
+    <VStack spacing={0} align="stretch" flexShrink={0} py={1}>
+      <Box>{renderNavButton('out', parents)}</Box>
+      <Divider borderColor="whiteAlpha.100" />
+      <Box>{renderNavButton('in', children)}</Box>
+    </VStack>
+  )
+}

package/src/components/ViewExplorer/ViewSearch.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { Box, Input, InputGroup, InputLeftElement } from '@chakra-ui/react'
+import { SearchIcon } from '@chakra-ui/icons'
+
+interface Props {
+  query: string
+  setQuery: (q: string) => void
+  activeFilter: 'out' | 'in' | null
+}
+
+export const ViewSearch: React.FC<Props> = ({ query, setQuery, activeFilter }) => {
+  return (
+    <Box className="panel-search-container">
+      <InputGroup size="sm">
+        <InputLeftElement pointerEvents="none">
+          <SearchIcon color="gray.500" />
+        </InputLeftElement>
+        <Input
+          className="panel-search-input"
+          placeholder={
+            activeFilter === 'out'
+              ? 'Search parents…'
+              : activeFilter === 'in'
+                ? 'Search children…'
+                : 'Search views…'
+          }
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+      </InputGroup>
+    </Box>
+  )
+}

package/src/components/ViewExplorer/ViewTree.tsx

@@ -0,0 +1,98 @@
+import React from 'react'
+import { VStack, HStack, Box, Text } from '@chakra-ui/react'
+import ScrollIndicatorWrapper from '../ScrollIndicatorWrapper'
+import { TreeNode } from './types'
+
+interface Props {
+  filtered: TreeNode[]
+  viewId: number | null
+  focusedIdx: number
+  itemRefs: React.MutableRefObject<(HTMLDivElement | null)[]>
+  handleNavigate: (id: number) => void
+  onHoverZoom?: (elementId: number | null, type: 'in' | 'out' | null) => void
+  viewHoverMap: Map<number, { elementId: number | undefined; type: 'in' | 'out' }>
+  handleKeyDown: (e: React.KeyboardEvent) => void
+  listRef: React.RefObject<HTMLDivElement>
+}
+
+export const ViewTree: React.FC<Props> = ({
+  filtered,
+  viewId,
+  focusedIdx,
+  itemRefs,
+  handleNavigate,
+  onHoverZoom,
+  viewHoverMap,
+  handleKeyDown,
+  listRef,
+}) => {
+  return (
+    <ScrollIndicatorWrapper
+      ref={listRef}
+      flex={1}
+      minH={0}
+      px={3}
+      pb={4}
+      tabIndex={-1}
+      outline="none"
+      onKeyDown={handleKeyDown}
+    >
+      <VStack spacing={0.5} mr={-1} align="stretch">
+        {filtered.map((node, idx) => {
+          const isCurrent = node.id === viewId
+          const isFocused = idx === focusedIdx
+          return (
+            <HStack
+              key={node.id}
+              ref={(el) => {
+                itemRefs.current[idx] = el as HTMLDivElement | null
+              }}
+              px={3}
+              py={2}
+              pl={3 + (node.depth * 3)}
+              rounded="lg"
+              cursor="pointer"
+              bg={
+                isCurrent
+                  ? 'rgba(var(--accent-rgb), 0.12)'
+                  : isFocused
+                    ? 'whiteAlpha.150'
+                    : 'transparent'
+              }
+              color={isCurrent ? 'var(--accent)' : 'gray.400'}
+              _hover={{
+                bg: isCurrent ? 'rgba(var(--accent-rgb), 0.18)' : 'whiteAlpha.100',
+                color: 'gray.100',
+              }}
+              onClick={() => handleNavigate(node.id)}
+              onMouseEnter={() => {
+                const item = viewHoverMap.get(node.id)
+                if (item) onHoverZoom?.(item.elementId ?? null, item.type)
+              }}
+              onMouseLeave={() => onHoverZoom?.(null, null)}
+              transition="all 0.15s"
+              spacing={1}
+            >
+              {node.depth > 0 && (
+                <HStack spacing="4px" mr={1}>
+                  {Array.from({ length: node.depth }).map((_, i) => (
+                    <Box
+                      key={i}
+                      w="3px"
+                      h="3px"
+                      rounded="full"
+                      bg={isCurrent ? 'var(--accent)' : 'whiteAlpha.900'}
+                    />
+                  ))}
+                </HStack>
+              )}
+              <Text fontSize="xs" fontWeight={isCurrent ? 'bold' : 'medium'} noOfLines={1} isTruncated>
+                {node.name}
+              </Text>
+            </HStack>
+          )
+        })}
+      </VStack>
+    </ScrollIndicatorWrapper>
+  )
+}