@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.131

package/dist/components/TreeView/tree-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-view.js","sources":["../../../src/components/TreeView/tree-view.tsx"],"sourcesContent":["// code-quality-allow: file-size — foundational composite(TreeView owns tree logic + TreeItem + drag-drop + keyboard;拆 sub-component 會把 register/unregister 跨檔傳 ref 複雜化超過可讀性 gain)\nimport * as React from 'react'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport {\n  DndContext,\n  DragOverlay,\n  useDraggable,\n  useDroppable,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragStartEvent,\n  type DragEndEvent,\n  type DragOverEvent,\n} from '@dnd-kit/core'\nimport { ChevronRight } from 'lucide-react'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { dragSourceClass, dropIndicatorRow, dropIndicatorInside } from '@/design-system/lib/drag-visual'\nimport { cn } from '@/lib/utils'\n// Row primitive 共用常數——單一 source of truth\nimport {\n  ICON_SIZE,\n  RowSizeProvider,\n  ItemIcon,\n  ItemPrefix,\n  ItemSuffix,\n  ItemInlineAction,\n  ROW_PADDING_BY_SIZE,\n  type InlineActionConfig,\n} from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * TreeView — 階層結構的遞迴元件\n *\n * 一個 TreeItem 就是一個 node——有 children 就可展開,沒有就是 leaf。\n * 沒有第二個概念(沒有 TreeGroup)。\n *\n * TreeView 負責:\n *   1. 遞迴渲染 + indent\n *   2. 展開/收合狀態管理\n *   3. 鍵盤導覽 + ARIA tree\n *\n * 它不管 node 裡面長什麼樣——icon、badge、status indicator 等\n * 由 consumer 透過 props / slots 決定。\n *\n * 詳見 tree-view.spec.md。\n */\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Types\n// ═══════════════════════════════════════════════════════════════════════════\n\ntype SizeKey = 'sm' | 'md' | 'lg'\ntype SelectionMode = 'single' | 'multiple' | 'none'\n/**\n * TreeView 的使用脈絡,決定 item 的水平 padding:\n * - `'sidebar'`:頁面側邊欄,用 `--layout-space-loose` token(md=16px / lg=24px,跟 density 連動)\n * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem / DropdownMenu\n */\ntype TreeContext = 'sidebar' | 'menu'\n\n// Base horizontal padding per context — 用 CSS variable 注入到 TreeView 容器,\n// TreeItem 用 calc(var(--tree-px) + indent) 算出最終 paddingLeft。\nconst CONTEXT_PX_VAR: Record<TreeContext, string> = {\n  sidebar: 'var(--layout-space-loose)',  // md=16px, lg=24px(density 連動)\n  menu: '12px',                          // px-3,對齊 MenuItem / DropdownMenu\n}\n\n/** Drag drop position — 拖放目標的三種位置 */\n// code-quality-allow: dead-export — public event/state type — consumer event handler parameter type\nexport type DropPosition = 'before' | 'after' | 'inside'\n\n/** onDragEnd callback 的參數 */\n// code-quality-allow: dead-export — public event/state type — consumer event handler parameter type\nexport interface TreeDragEndEvent {\n  /** 被拖曳的 node id */\n  sourceId: string\n  /** 目標 node id */\n  targetId: string\n  /** 放置位置:before(同層上方)/ after(同層下方)/ inside(成為子 node) */\n  position: DropPosition\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Constants\n// ═══════════════════════════════════════════════════════════════════════════\n\n// Icon / chevron 尺寸——從 item-layout pattern module 引入(在檔頂 import),\n// 這裡本地不再宣告。所有 row primitives 共用同一個常數。\n\n// indentStep = chevronSize + gap-2(8px)— 2026-05-04 升 SSOT 為 token `--tree-indent-{sm,md,lg}`\n// 在 `tokens/uiSize/uiSize.css`。DataTable nested rows 共用此 SSOT,跨元件視覺一致。\n// 結構對齊:子 chevron 對齊父 icon,子 icon 對齊父 label。\n// Numeric value 此處保留(drop indicator JS px 計算需 number),Tailwind class 走 token。\nconst INDENT_STEP: Record<SizeKey, number> = { sm: 24, md: 24, lg: 28 }\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Context\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface TreeViewContextValue {\n  size: SizeKey\n  context: TreeContext\n  selectionMode: SelectionMode\n  expandOnSelect: boolean\n  draggable: boolean\n  isKeyboardRef: React.RefObject<boolean>\n  expandedIds: Set<string>\n  selectedIds: Set<string>\n  focusedId: string | null\n  /** 目前拖曳中的 node id(null = 沒在拖) */\n  draggingId: string | null\n  /** 目前 drop indicator 的位置 + depth(用於 line indent) */\n  dropTarget: { id: string; position: DropPosition; depth: number } | null\n  toggleExpand: (id: string) => void\n  select: (id: string) => void\n  setFocusedId: (id: string | null) => void\n  registerNode: (id: string, parentId: string | null, hasChildren: boolean, label?: React.ReactNode, icon?: LucideIcon) => void\n  getNodeInfo: (id: string) => NodeInfo | undefined\n  unregisterNode: (id: string) => void\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextValue | null>(null)\n\nfunction useTreeView(): TreeViewContextValue {\n  const ctx = React.useContext(TreeViewContext)\n  if (!ctx) throw new Error('TreeItem must be used within TreeView')\n  return ctx\n}\n\n// TreeItem depth context(遞迴 depth tracking)\nconst DepthContext = React.createContext(0)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Node registry — 追蹤所有 node 的 parent/children 關係,用於鍵盤導覽\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface NodeInfo {\n  id: string\n  parentId: string | null\n  hasChildren: boolean\n  /** 用於 DragOverlay ghost 渲染 */\n  label?: React.ReactNode\n  icon?: LucideIcon\n}\n\nfunction useNodeRegistry() {\n  const nodesRef = React.useRef(new Map<string, NodeInfo>())\n\n  const registerNode = React.useCallback(\n    (id: string, parentId: string | null, hasChildren: boolean, label?: React.ReactNode, icon?: LucideIcon) => {\n      nodesRef.current.set(id, { id, parentId, hasChildren, label, icon })\n    },\n    []\n  )\n\n  const unregisterNode = React.useCallback((id: string) => {\n    nodesRef.current.delete(id)\n  }, [])\n\n  const getNodeInfo = React.useCallback((id: string) => nodesRef.current.get(id), [])\n\n  return { nodesRef, registerNode, unregisterNode, getNodeInfo }\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeView\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> {\n  /** 元件尺寸,影響 node 高度、icon 大小、indent 寬度 */\n  size?: SizeKey\n  /**\n   * 使用脈絡,決定 item 的水平 padding:\n   * - `'sidebar'`(預設):頁面側邊欄,px-2(8px)\n   * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem\n   */\n  context?: TreeContext\n  /** 選取模式。預設 'single'(sidebar nav / stepper) */\n  selectionMode?: SelectionMode\n  /** 點擊 label 時是否同時展開 children。預設 false(chevron 是展開的唯一控件) */\n  expandOnSelect?: boolean\n  /** 受控:展開的 node id 集合 */\n  expandedIds?: Set<string>\n  /** 受控:展開狀態變更 callback */\n  onExpandedChange?: (ids: Set<string>) => void\n  /** 受控:選取的 node id 集合 */\n  selectedIds?: Set<string>\n  /** 受控:選取狀態變更 callback */\n  onSelectedChange?: (ids: Set<string>) => void\n  /** 非受控:預設展開的 node id 陣列 */\n  defaultExpandedIds?: string[]\n  /** 非受控:預設選取的 node id 陣列 */\n  defaultSelectedIds?: string[]\n  /**\n   * 啟用拖曳排序。預設 false。\n   * 啟用後每個 TreeItem 左側出現 drag handle(GripVertical icon),\n   * 拖曳時顯示 drop indicator(before / after / inside 三種位置)。\n   * Consumer 透過 `onDragEnd` callback 接收 reorder 事件,自行更新 data。\n   */\n  draggable?: boolean\n  /** Drag 結束時觸發,提供 sourceId、targetId、position。Consumer 負責 reorder。 */\n  onDragEnd?: (event: TreeDragEndEvent) => void\n  /** ARIA label */\n  'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(\n  (\n    {\n      size = 'md',\n      context = 'sidebar',\n      selectionMode = 'single',\n      expandOnSelect = false,\n      draggable = false,\n      onDragEnd: onDragEndProp,\n      expandedIds: controlledExpanded,\n      onExpandedChange,\n      selectedIds: controlledSelected,\n      onSelectedChange,\n      defaultExpandedIds = [],\n      defaultSelectedIds = [],\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // ── Expand state(受控 / 非受控) ──\n    const [internalExpanded, setInternalExpanded] = React.useState(\n      () => new Set(defaultExpandedIds)\n    )\n    const expandedIds = controlledExpanded ?? internalExpanded\n    const setExpandedIds = React.useCallback(\n      (updater: (prev: Set<string>) => Set<string>) => {\n        const update = (prev: Set<string>) => {\n          const next = updater(prev)\n          onExpandedChange?.(next)\n          return next\n        }\n        if (controlledExpanded) {\n          update(controlledExpanded)\n        } else {\n          setInternalExpanded(update)\n        }\n      },\n      [controlledExpanded, onExpandedChange]\n    )\n\n    // ── Selection state(受控 / 非受控) ──\n    const [internalSelected, setInternalSelected] = React.useState(\n      () => new Set(defaultSelectedIds)\n    )\n    const selectedIds = controlledSelected ?? internalSelected\n    const setSelectedIds = React.useCallback(\n      (updater: (prev: Set<string>) => Set<string>) => {\n        const update = (prev: Set<string>) => {\n          const next = updater(prev)\n          onSelectedChange?.(next)\n          return next\n        }\n        if (controlledSelected) {\n          update(controlledSelected)\n        } else {\n          setInternalSelected(update)\n        }\n      },\n      [controlledSelected, onSelectedChange]\n    )\n\n    // ── Focus state ──\n    const [focusedId, setFocusedId] = React.useState<string | null>(null)\n\n    // ── Keyboard vs mouse detection ──\n    // focus ring 只在鍵盤操作時顯示,滑鼠點擊用 bg-neutral-selected 表達選中,不顯示 ring\n    const isKeyboardRef = React.useRef(false)\n\n    // ── Drag state ──\n    const [draggingId, setDraggingId] = React.useState<string | null>(null)\n    const [dropTarget, setDropTarget] = React.useState<{ id: string; position: DropPosition; depth: number } | null>(null)\n    const autoExpandTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n    // 2026-05-16 audit codex Round 6:unmount cleanup(原 cleanup 只在 dragEnd/dragCancel,unmount-during-drag 漏 cancel)\n    React.useEffect(() => () => { if (autoExpandTimerRef.current) clearTimeout(autoExpandTimerRef.current) }, [])\n    // Ref for toggleExpand — handleDragOver 定義在 toggleExpand 之前(hook 順序限制),\n    // 用 ref 打斷 temporal dead zone。\n    const toggleExpandRef = React.useRef<(id: string) => void>(() => {})\n\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 5 } })\n    )\n\n    const handleDragStart = React.useCallback((event: DragStartEvent) => {\n      setDraggingId(String(event.active.id))\n    }, [])\n\n    // ── Figma-style drop detection(X + Y 雙軸）──\n    //\n    // Y 軸:決定在哪個 item 附近\n    //   - item 上 25% = before\n    //   - item 中 50% = inside(只有 folder)\n    //   - item 下 25% = after\n    //\n    // X 軸:決定 nesting 深度(Figma 核心邏輯)\n    //   - 滑鼠越左 = 越淺層(放在 parent 層級)\n    //   - 滑鼠越右 = 越深層(放進 folder)\n    //   - 用 pointer X 相對於 tree 左邊界計算 indent level\n    //\n    const handleDragOver = React.useCallback((event: DragOverEvent) => {\n      const { over, active } = event\n      if (!over || over.id === active.id) {\n        if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n        setDropTarget(null)\n        return\n      }\n\n      const rowEl = document.querySelector(`[data-tree-row=\"${over.id}\"]`) as HTMLElement | null\n      const targetEl = document.querySelector(`[data-tree-id=\"${over.id}\"]`) as HTMLElement | null\n      if (!rowEl || !targetEl) { setDropTarget(null); return }\n\n      // 實際指標位置\n      const startX = (event.activatorEvent as PointerEvent)?.clientX ?? 0\n      const startY = (event.activatorEvent as PointerEvent)?.clientY ?? 0\n      const currentX = startX + (event.delta?.x ?? 0)\n      const currentY = startY + (event.delta?.y ?? 0)\n\n      const rect = rowEl.getBoundingClientRect()\n      const offsetY = currentY - rect.top\n      const height = rect.height || 32\n      const ratio = Math.max(0, Math.min(1, offsetY / height))\n\n      const hasChildren = targetEl.dataset.treeHasChildren === 'true'\n      const targetDepth = Number(targetEl.getAttribute('aria-level') ?? 1) - 1\n\n      // ── X 軸:計算指標在哪個 indent level ──\n      const treeEl = treeRef.current\n      const treeLeft = treeEl?.getBoundingClientRect().left ?? 0\n      const indentStep = INDENT_STEP[size]\n      const pointerIndentLevel = Math.max(0, Math.floor((currentX - treeLeft) / indentStep))\n\n      let position: DropPosition\n      let finalDepth = targetDepth\n\n      if (hasChildren) {\n        // Folder node\n        if (ratio < 0.25) {\n          position = 'before'\n        } else if (ratio > 0.75) {\n          // after folder: 如果指標在 folder 層級或更淺 = after(同層)\n          // 如果指標更深 = inside(放進 folder)\n          position = pointerIndentLevel > targetDepth ? 'inside' : 'after'\n        } else {\n          position = 'inside'\n        }\n      } else {\n        // Leaf node\n        if (ratio < 0.5) {\n          position = 'before'\n        } else {\n          position = 'after'\n          // X 軸:如果指標在比 target 更淺的層級,提升 drop depth\n          // 例:Contact(depth 1)的 after,如果滑鼠在 depth 0 → 變成「after Pages」\n          if (pointerIndentLevel < targetDepth) {\n            // 找 parent 來放\n            const groupEl = targetEl.closest('[role=\"group\"]')\n            const parentTreeItem = groupEl?.parentElement?.closest('[role=\"treeitem\"]')\n            const parentId = parentTreeItem?.getAttribute('data-tree-id')\n            if (parentId && parentId !== String(active.id)) {\n              const parentDepth = Number(parentTreeItem?.getAttribute('aria-level') ?? 1) - 1\n              finalDepth = parentDepth\n              setDropTarget({ id: parentId, position: 'after', depth: parentDepth })\n              return\n            }\n          }\n        }\n      }\n\n      setDropTarget({ id: String(over.id), position, depth: finalDepth })\n\n      // Auto-expand collapsed folder after 500ms hover (Figma behavior)\n      if (position === 'inside' && hasChildren && !expandedIds.has(String(over.id))) {\n        if (autoExpandTimerRef.current) clearTimeout(autoExpandTimerRef.current)\n        autoExpandTimerRef.current = setTimeout(() => {\n          toggleExpandRef.current(String(over.id))\n        }, 500)\n      } else {\n        if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      }\n    }, [expandedIds])\n\n    const dropTargetRef = React.useRef(dropTarget)\n    dropTargetRef.current = dropTarget\n\n    const handleDragEnd = React.useCallback((event: DragEndEvent) => {\n      if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      const { active, over } = event\n      const dt = dropTargetRef.current\n      if (over && active.id !== over.id && dt) {\n        onDragEndProp?.({\n          sourceId: String(active.id),\n          targetId: String(over.id),\n          position: dt.position,\n        })\n      }\n      setDraggingId(null)\n      setDropTarget(null)\n    }, [onDragEndProp])\n\n    const handleDragCancel = React.useCallback(() => {\n      if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      setDraggingId(null)\n      setDropTarget(null)\n    }, [])\n\n    // ── Node registry ──\n    const { registerNode, unregisterNode, getNodeInfo } = useNodeRegistry()\n\n    // ── Actions ──\n    const toggleExpand = React.useCallback(\n      (id: string) => {\n        setExpandedIds((prev) => {\n          const next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n          return next\n        })\n      },\n      [setExpandedIds]\n    )\n    toggleExpandRef.current = toggleExpand\n\n    const select = React.useCallback(\n      (id: string) => {\n        if (selectionMode === 'none') return\n        setSelectedIds((prev) => {\n          if (selectionMode === 'single') {\n            return new Set([id])\n          }\n          // multiple\n          const next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n          return next\n        })\n      },\n      [selectionMode, setSelectedIds]\n    )\n\n    // ── Context value ──\n    const contextValue = React.useMemo<TreeViewContextValue>(\n      () => ({\n        size,\n        context,\n        selectionMode,\n        expandOnSelect,\n        draggable,\n        isKeyboardRef,\n        draggingId,\n        dropTarget,\n        expandedIds,\n        selectedIds,\n        focusedId,\n        toggleExpand,\n        select,\n        setFocusedId,\n        registerNode,\n        unregisterNode,\n        getNodeInfo,\n      }),\n      [\n        size,\n        context,\n        selectionMode,\n        expandOnSelect,\n        draggable,\n        isKeyboardRef,\n        draggingId,\n        dropTarget,\n        expandedIds,\n        selectedIds,\n        focusedId,\n        toggleExpand,\n        select,\n        setFocusedId,\n        registerNode,\n        unregisterNode,\n        getNodeInfo,\n      ]\n    )\n\n    // ── Keyboard handler ──\n    const treeRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => treeRef.current!)\n\n    const handleMouseDown = React.useCallback(() => {\n      isKeyboardRef.current = false\n    }, [])\n\n    // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        isKeyboardRef.current = true\n        if (!treeRef.current) return\n\n        // 取得所有可見的 treeitem\n        const items = Array.from(\n          treeRef.current.querySelectorAll<HTMLElement>('[role=\"treeitem\"]:not([hidden])')\n        )\n        const currentIndex = items.findIndex(\n          (el) => el.dataset.treeId === focusedId\n        )\n        if (currentIndex < 0 && items.length > 0 && ['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {\n          // 沒有焦點時,任何方向鍵先聚焦第一個\n          setFocusedId(items[0].dataset.treeId ?? null)\n          e.preventDefault()\n          return\n        }\n\n        const currentEl = items[currentIndex]\n\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const next = items[currentIndex + 1]\n            if (next) setFocusedId(next.dataset.treeId ?? null)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prev = items[currentIndex - 1]\n            if (prev) setFocusedId(prev.dataset.treeId ?? null)\n            break\n          }\n          case 'ArrowRight': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (!id) break\n            const isExpanded = expandedIds.has(id)\n            const hasChildren = currentEl?.dataset.treeHasChildren === 'true'\n            if (hasChildren && !isExpanded) {\n              toggleExpand(id)\n            } else if (hasChildren && isExpanded) {\n              // 已展開 → 移到第一個 child\n              const next = items[currentIndex + 1]\n              if (next) setFocusedId(next.dataset.treeId ?? null)\n            }\n            break\n          }\n          case 'ArrowLeft': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (!id) break\n            const isExpanded = expandedIds.has(id)\n            const hasChildren = currentEl?.dataset.treeHasChildren === 'true'\n            if (hasChildren && isExpanded) {\n              toggleExpand(id)\n            } else {\n              // 收合狀態或 leaf → 移到 parent\n              const parentId = currentEl?.dataset.treeParentId\n              if (parentId) setFocusedId(parentId)\n            }\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            if (items[0]) setFocusedId(items[0].dataset.treeId ?? null)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            const last = items[items.length - 1]\n            if (last) setFocusedId(last.dataset.treeId ?? null)\n            break\n          }\n          case 'Enter':\n          case ' ': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (id) select(id)\n            break\n          }\n        }\n      },\n      [focusedId, expandedIds, toggleExpand, select, setFocusedId]\n    )\n\n    const treeEl = (\n      <div\n        ref={treeRef}\n        role=\"tree\"\n        aria-multiselectable={selectionMode === 'multiple' || undefined}\n        className={cn(\n          // TreeView root 不加任何 py——呼吸空間由外層容器負責:\n          //   - 在 SidebarGroup 內: SidebarGroup py-2 提供\n          //   - 在 DropdownMenuContent 內: content py-2 提供\n          //   - 獨立使用(story demo): consumer 自己加 py-2\n          // 這樣才能跟 DropdownMenu / MenuGroup 的結構一致(group 是容器,row 是內容)。\n          'flex flex-col',\n          className,\n        )}\n        style={{\n          ['--tree-px' as string]: CONTEXT_PX_VAR[context],\n          ...props.style,\n        } as React.CSSProperties}\n        onKeyDown={handleKeyDown}\n        onMouseDown={handleMouseDown}\n        tabIndex={0}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n\n    return (\n      <TreeViewContext.Provider value={contextValue}>\n        {/* RowSizeProvider:讓 TreeView 子樹內任何 <ItemIcon> / <ItemAvatar> /\n            <ItemInlineAction> 自動讀到對的 size,跟 SidebarProvider 同一條規則。\n            未來 TreeView 接 inlineActions API 後也吃這個 context。 */}\n        <RowSizeProvider value={size}>\n        {/* 永遠包 DndContext(hooks 不能 conditional call)。不 draggable 時無 sensors = 不可拖 */}\n        <DndContext\n          sensors={draggable ? sensors : undefined}\n          onDragStart={handleDragStart}\n          onDragOver={handleDragOver}\n          onDragEnd={handleDragEnd}\n          onDragCancel={handleDragCancel}\n        >\n          {treeEl}\n          {draggable && (\n            <DragOverlay dropAnimation={null}>\n              {draggingId ? (() => {\n                const info = getNodeInfo(draggingId)\n                const IconComp = info?.icon\n                return (\n                  <div className={cn(\n                    'flex items-center gap-2 rounded-lg bg-surface border border-border pointer-events-none',\n                    'shadow-[var(--elevation-200)]',\n                    size === 'lg' ? 'text-body-lg leading-compact px-4 py-2' : 'text-body leading-compact px-3 py-1.5',\n                  )}>\n                    {IconComp && <IconComp size={ICON_SIZE[size]} className=\"shrink-0\" aria-hidden />}\n                    <span className=\"text-foreground truncate max-w-[200px]\">{info?.label ?? draggingId}</span>\n                  </div>\n                )\n              })() : null}\n            </DragOverlay>\n          )}\n        </DndContext>\n        </RowSizeProvider>\n      </TreeViewContext.Provider>\n    )\n  }\n)\nTreeView.displayName = 'TreeView'\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeItem variants\n// ═══════════════════════════════════════════════════════════════════════════\n\nconst treeItemVariants = cva(\n  [\n    // items-start:多行 label 時 prefix 留在第一行(item-layout 規則)\n    'flex items-start gap-2 w-full',\n    'cursor-pointer select-none',\n    'transition-colors duration-150',\n    'outline-none',\n    // Label 字重 500(跟 SidebarMenuButton 一致)\n    'font-medium',\n  ],\n  {\n    variants: {\n      // 消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx)— drift risk 消除\n      size: ROW_PADDING_BY_SIZE,\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeItem\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> {\n  /** 唯一 id。必填,用於 expand / select / keyboard 追蹤 */\n  id: string\n  /** 主要文字 */\n  label: React.ReactNode\n  /** 左側 icon(chevron 之後)。LucideIcon 型別,尺寸由 TreeView size 決定 */\n  icon?: LucideIcon\n  /**\n   * Checkbox(多選模式,label 前方)。傳入 ReactNode(Checkbox 元件)。\n   * 位置:在 icon 之後、label 之前。\n   * 單選模式通常不需要(用 bg-neutral-selected 表達選中)。\n   */\n  checkbox?: React.ReactNode\n  /**\n   * 右側 inline actions(suffix slot,宣告式 API)。對齊 `uiSize.spec.md`「Inline Action」\n   * 與 `SidebarMenuButton.inlineActions` 的同一條規格——TreeItem / SidebarMenuButton /\n   * 未來的 row primitive 全部用同一個 declarative API。\n   *\n   * Consumer 只宣告 intent,TreeItem 用 `<ItemInlineAction>` 自動渲染:\n   * - Icon 尺寸 = `ICON_SIZE[treeViewSize]`(自動)\n   * - Hover bg、tooltip、aria-label、cursor-pointer 自動處理\n   * - **不可以**手刻 button JSX(canonical 實作在 `item-layout.tsx`)\n   *\n   * ```tsx\n   * <TreeItem\n   *   id=\"inbox\"\n   *   icon={Inbox}\n   *   label=\"Inbox\"\n   *   inlineActions={[\n   *     { icon: MoreVertical, label: '更多', onClick: handleMore },\n   *     { icon: Plus,           label: '新增', onClick: handleAdd },\n   *   ]}\n   *   actionsReveal=\"hover\"\n   * />\n   * ```\n   *\n   * 若需要永遠可見的 suffix(如 badge 計數),放在 `label` 內:\n   * ```tsx\n   * <TreeItem label={<>Inbox <Badge count={3} /></>} />\n   * ```\n   */\n  inlineActions?: InlineActionConfig[]\n  /**\n   * 右側 actions slot(ReactNode)— escape hatch 供 consumer 放自訂元素\n   * (如 DropdownMenu trigger / 自訂 popover / 多 tier 動作)。\n   *\n   * 跟 `inlineActions` 互斥(同時傳 `inlineActionsSlot` 會優先,`inlineActions` 被忽略)。\n   *\n   * 規則對齊 Input.endSlot canonical:90% case 用 `inlineActions` 宣告式 API,\n   * 10% config 表達不出時走 slot。視覺一致性由 consumer 負責(可使用 host 內部 helper\n   * — 但禁止 app-code 直接 import L3 primitive,見 `check_l3_primitive_import.sh`)。\n   */\n  inlineActionsSlot?: React.ReactNode\n  /**\n   * Inline actions 的顯示模式:\n   * - `\"hover\"`(預設):row hover 或鍵盤 focus(focus-visible)時才淡入\n   * - `false`:常駐顯示\n   *\n   * 對齊 `SidebarMenuButton.actionsReveal`,同一套規則。\n   */\n  actionsReveal?: false | \"hover\"\n  /**\n   * 取代 chevron 的位置。用於 stepper 的 status indicator(●/○/✓)。\n   * 設定後 chevron 不渲染,改渲染 indicator。\n   */\n  indicator?: React.ReactNode\n  /** 是否停用 */\n  disabled?: boolean\n  /** 子 TreeItem(有 children = expandable,沒有 = leaf) */\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(\n  ({ id, label, icon: Icon, checkbox, inlineActions, inlineActionsSlot, actionsReveal = 'hover', indicator, disabled, children, className, ...props }, ref) => {\n    const ctx = useTreeView()\n    const depth = React.useContext(DepthContext)\n    const {\n      size,\n      selectionMode,\n      expandOnSelect,\n      draggable,\n      expandedIds,\n      selectedIds,\n      focusedId,\n      draggingId,\n      dropTarget,\n      toggleExpand,\n      select,\n      setFocusedId,\n      registerNode,\n      unregisterNode,\n      isKeyboardRef,\n    } = ctx\n\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = expandedIds.has(id)\n    const isSelected = selectedIds.has(id)\n    const isFocused = focusedId === id\n    const showRing = isFocused && isKeyboardRef.current\n    const isDragging = draggingId === id\n    const isDropTarget = dropTarget?.id === id\n\n    const iconPx = ICON_SIZE[size]\n    const indentPx = depth * INDENT_STEP[size]\n\n    // ── Drag hooks ──\n    // Figma 風格:整列可拖(不用 grip handle),靠 distance:5 區分 click vs drag\n    const { attributes: dragAttrs, listeners: dragListeners, setNodeRef: setDragRef } = useDraggable({\n      id, disabled: !draggable || disabled,\n    })\n    const { setNodeRef: setDropRef } = useDroppable({\n      id, disabled: !draggable || disabled,\n    })\n\n    // ── 找 parent id(from depth context chain)──\n    const parentId = React.useContext(ParentIdContext)\n\n    // ── Register / unregister ──\n    React.useEffect(() => {\n      registerNode(id, parentId, hasChildren, label, Icon)\n      return () => unregisterNode(id)\n    }, [id, parentId, hasChildren, label, Icon, registerNode, unregisterNode])\n\n    // ── Focus scroll into view ──\n    const itemRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => itemRef.current!)\n\n    React.useEffect(() => {\n      if (isFocused && itemRef.current) {\n        itemRef.current.scrollIntoView({ block: 'nearest' })\n      }\n    }, [isFocused])\n\n    // ── Handlers ──\n    const handleRowClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        if (disabled) return\n        e.stopPropagation()\n        setFocusedId(id)\n        select(id)\n        if (expandOnSelect && hasChildren) {\n          toggleExpand(id)\n        }\n      },\n      [id, disabled, select, setFocusedId, expandOnSelect, hasChildren, toggleExpand]\n    )\n\n    const handleChevronClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        e.stopPropagation()\n        if (disabled) return\n        toggleExpand(id)\n      },\n      [id, disabled, toggleExpand]\n    )\n\n    // ── Chevron(永遠存在:expandable = 旋轉箭頭;leaf = placeholder 佔位) ──\n    // 消費 `<ItemPrefix>` SSOT — 永遠 h-[1lh] 對齊 label 第一行中線(item-anatomy 對應)。\n    // forced width 透過 style 鎖 chevron 槽寬,讓 sibling label 起點水平對齊(無 chevron leaf 佔位同寬)。\n    const chevronSlot = (\n      <ItemPrefix style={{ width: iconPx }}>\n        {hasChildren ? (\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            onClick={handleChevronClick}\n            className={cn(\n              'flex items-center justify-center rounded-md',\n              'text-fg-muted hover:text-foreground hover:bg-neutral-hover',\n              'transition-all duration-150',\n              isExpanded && 'rotate-90',\n              disabled && 'text-fg-disabled pointer-events-none',\n            )}\n            style={{ width: iconPx, height: iconPx }}\n            aria-hidden\n          >\n            <ChevronRight size={iconPx} />\n          </button>\n        ) : (\n          // Leaf placeholder\n          <span style={{ width: iconPx }} aria-hidden />\n        )}\n      </ItemPrefix>\n    )\n\n    return (\n      <ParentIdContext.Provider value={id}>\n        <div\n          ref={(node) => {\n            (itemRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n          }}\n          role=\"treeitem\"\n          aria-expanded={hasChildren ? isExpanded : undefined}\n          aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n          aria-level={depth + 1}\n          aria-disabled={disabled || undefined}\n          data-tree-id={id}\n          data-tree-parent-id={parentId ?? ''}\n          data-tree-has-children={hasChildren}\n          tabIndex={-1}\n          className={cn('w-full min-w-0 relative', isDragging && dragSourceClass)}\n        >\n          {/* Drop indicator — before:水平 2px primary line(指 SSOT drag-visual.ts);\n              indent 跟隨 depth(left 由 inline style override class 的 left-0)*/}\n          {isDropTarget && dropTarget?.position === 'before' && (\n            <div\n              className={dropIndicatorRow.before}\n              style={{ left: `calc(var(--tree-px) + ${indentPx}px)` }}\n            />\n          )}\n\n          {/* Row: draggable + droppable 都在這一行(合併 ref),確保碰撞偵測只看行高 */}\n          <div\n            ref={(node) => {\n              // 合併 drag + drop ref 到同一個 element\n              if (draggable) setDragRef(node)\n              setDropRef(node)\n            }}\n            data-tree-row={id}\n            className={cn(\n              'group/tree-item',\n              treeItemVariants({ size }),\n              // 預設文字色 neutral-8 (fg-secondary),選中後變 neutral-9 (foreground)\n              // icon 透過 currentColor 繼承,不需要另外設\n              !disabled && !isSelected && 'text-fg-secondary',\n              !disabled && isSelected && 'text-foreground',\n              // inside: 資料夾背景高亮(Figma 風格),不用 ring/border\n              isDropTarget && dropTarget?.position === 'inside' && dropIndicatorInside,\n              !disabled && 'hover:bg-neutral-hover hover:text-foreground',\n              !disabled && isSelected && selectionMode === 'single' && 'bg-neutral-selected',\n              showRing && 'ring-2 ring-ring ring-inset',\n              disabled && 'pointer-events-none text-fg-disabled cursor-default',\n              className,\n            )}\n            style={{\n              paddingLeft: indentPx > 0\n                ? `calc(var(--tree-px) + ${indentPx}px)`\n                : 'var(--tree-px)',\n              paddingRight: 'var(--tree-px)',\n            }}\n            onClick={handleRowClick}\n            {...(draggable ? { ...dragListeners, ...dragAttrs } : {})}\n            {...props}\n          >\n            {chevronSlot}\n\n            {/* Checkbox 在 icon 前——消費 `<ItemPrefix>` 對齊第一行 */}\n            {checkbox && (\n              <ItemPrefix className=\"pointer-events-none\">\n                {checkbox}\n              </ItemPrefix>\n            )}\n\n            {/* indicator 取代 icon 的位置;h-[1lh] 對齊第一行\n                indicator 是 escape hatch(stepper status dot 等客製內容),消費 `<ItemPrefix>` 鎖 chevron 槽寬;\n                Icon 走 canonical `<ItemIcon>` helper——自動標 data-prefix-type=\"icon\",\n                讓 SidebarProvider 的全域 :has() prefix-mix 偵測能命中。 */}\n            {indicator ? (\n              <ItemPrefix style={{ width: iconPx }}>\n                {indicator}\n              </ItemPrefix>\n            ) : Icon ? (\n              <ItemIcon icon={Icon} className={disabled ? 'text-fg-disabled' : undefined} />\n            ) : null}\n\n            <span className={cn('flex-1 min-w-0 truncate', disabled && 'text-fg-disabled')}>\n              {label}\n            </span>\n\n            {/* Suffix inline actions——宣告式 API,用 `<ItemInlineAction>` 渲染。\n                消費 `<ItemSuffix hoverReveal hoverGroup=\"tree-item\">` SSOT(2026-05-05 v8 group selector 參數化後)。\n                actionsReveal=\"hover\"(預設):row hover 或 keyboard focus-visible 才顯示;\n                actionsReveal=false:常駐顯示。跟 SidebarMenuButton 共用同一條規則,行為一致。\n                inlineActionsSlot escape hatch 優先(consumer 自控 JSX,reveal 一樣套外層 group)。 */}\n            {inlineActionsSlot ? (\n              <ItemSuffix hoverReveal={actionsReveal === 'hover'} hoverGroup=\"tree-item\">\n                {inlineActionsSlot}\n              </ItemSuffix>\n            ) : inlineActions && inlineActions.length > 0 ? (\n              <ItemSuffix hoverReveal={actionsReveal === 'hover'} hoverGroup=\"tree-item\">\n                {inlineActions.map((action, i) => (\n                  <ItemInlineAction key={action.label + i} action={action} />\n                ))}\n              </ItemSuffix>\n            ) : null}\n          </div>\n\n          {/* Drop indicator — after:同 before mirror 到 bottom edge(SSOT drag-visual.ts)*/}\n          {isDropTarget && dropTarget?.position === 'after' && (\n            <div\n              className={dropIndicatorRow.after}\n              style={{ left: `calc(var(--tree-px) + ${indentPx}px)` }}\n            />\n          )}\n\n          {/* Children: Collapsible 展開/收合 */}\n          {hasChildren && (\n            <CollapsiblePrimitive.Root open={isExpanded}>\n              <CollapsiblePrimitive.Content\n                className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down\"\n              >\n                <DepthContext.Provider value={depth + 1}>\n                  <div role=\"group\" className=\"flex flex-col w-full\">\n                    {children}\n                  </div>\n                </DepthContext.Provider>\n              </CollapsiblePrimitive.Content>\n            </CollapsiblePrimitive.Root>\n          )}\n        </div>\n      </ParentIdContext.Provider>\n    )\n  }\n)\nTreeItem.displayName = 'TreeItem'\n\n// Parent ID context for keyboard navigation (← to parent)\nconst ParentIdContext = React.createContext<string | null>(null)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Exports\n// ═══════════════════════════════════════════════════════════════════════════\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const treeViewMeta = {\n  component: 'TreeView',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-primary', 'bg-primary-subtle', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { TreeView, TreeItem, treeItemVariants }\n"],"names":["treeEl"],"mappings":"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"}
+{"version":3,"file":"tree-view.js","sources":["../../../src/components/TreeView/tree-view.tsx"],"sourcesContent":["// code-quality-allow: file-size — foundational composite(TreeView owns tree logic + TreeItem + drag-drop + keyboard;拆 sub-component 會把 register/unregister 跨檔傳 ref 複雜化超過可讀性 gain)\nimport * as React from 'react'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport {\n  DndContext,\n  DragOverlay,\n  useDraggable,\n  useDroppable,\n  PointerSensor,\n  useSensor,\n  useSensors,\n  type DragStartEvent,\n  type DragEndEvent,\n  type DragOverEvent,\n} from '@dnd-kit/core'\nimport { ChevronRight } from 'lucide-react'\nimport { cva } from 'class-variance-authority'\nimport type { LucideIcon } from 'lucide-react'\nimport { dragSourceClass, dropIndicatorRow, dropIndicatorInside } from '@/design-system/lib/drag-visual'\nimport { cn } from '@/lib/utils'\nimport { Checkbox } from '@/design-system/components/Checkbox/checkbox'\n// Row primitive 共用常數——單一 source of truth\nimport {\n  ICON_SIZE,\n  RowSizeProvider,\n  ItemIcon,\n  ItemPrefix,\n  ItemSuffix,\n  ItemInlineAction,\n  ROW_PADDING_BY_SIZE,\n  type InlineActionConfig,\n} from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * TreeView — 階層結構的遞迴元件\n *\n * 一個 TreeItem 就是一個 node——有 children 就可展開,沒有就是 leaf。\n * 沒有第二個概念(沒有 TreeGroup)。\n *\n * TreeView 負責:\n *   1. 遞迴渲染 + indent\n *   2. 展開/收合狀態管理\n *   3. 鍵盤導覽 + ARIA tree\n *\n * 它不管 node 裡面長什麼樣——icon、badge、status indicator 等\n * 由 consumer 透過 props / slots 決定。\n *\n * 詳見 tree-view.spec.md。\n */\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Types\n// ═══════════════════════════════════════════════════════════════════════════\n\ntype SizeKey = 'sm' | 'md' | 'lg'\ntype SelectionMode = 'single' | 'multiple' | 'none'\n/**\n * TreeView 的使用脈絡,決定 item 的水平 padding:\n * - `'sidebar'`:頁面側邊欄,用 `--layout-space-loose` token(md=16px / lg=24px,跟 density 連動)\n * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem / DropdownMenu\n */\ntype TreeContext = 'sidebar' | 'menu'\n\n// Base horizontal padding per context — 用 CSS variable 注入到 TreeView 容器,\n// TreeItem 用 calc(var(--tree-px) + indent) 算出最終 paddingLeft。\nconst CONTEXT_PX_VAR: Record<TreeContext, string> = {\n  sidebar: 'var(--layout-space-loose)',  // md=16px, lg=24px(density 連動)\n  menu: '12px',                          // px-3,對齊 MenuItem / DropdownMenu\n}\n\n/** Drag drop position — 拖放目標的三種位置 */\n// code-quality-allow: dead-export — public event/state type — consumer event handler parameter type\nexport type TreeDropPosition = 'before' | 'after' | 'inside'\n\n/** onDragEnd callback 的參數 */\n// code-quality-allow: dead-export — public event/state type — consumer event handler parameter type\nexport interface TreeDragEndEvent {\n  /** 被拖曳的 node id */\n  sourceId: string\n  /** 目標 node id */\n  targetId: string\n  /** 放置位置:before(同層上方)/ after(同層下方)/ inside(成為子 node) */\n  position: TreeDropPosition\n}\n\n/**\n * 鍵盤重排(`Cmd/Ctrl+Shift+方向鍵`,2026-07-14 v1)的 SR 播報文案 — zh-TW 預設,\n * per-key merge 覆寫(i18n 覆寫點)。詳 tree-view.spec.md「鍵盤重排」。\n * @public\n */\n// code-quality-allow: dead-export — public prop type — consumer 覆寫播報文案的參數型別\nexport interface TreeReorderAnnouncements {\n  /** 同層上/下移完成。`index` / `count` = 移動後在同層的 1-based 序數 / 同層總數 */\n  moved?: (args: { label: string; targetLabel: string; position: 'before' | 'after'; index: number; count: number }) => string\n  /** 移入 folder 完成。folder 原本收合(children 尚未 mount)時序數不可知 → `index` / `count` 為 undefined */\n  movedInside?: (args: { label: string; folderLabel: string; index?: number; count?: number }) => string\n  /** 移出到上層完成。`level` = 移動後所在層(1-based,同 aria-level 語意) */\n  movedOut?: (args: { label: string; parentLabel: string; level: number }) => string\n  /** 邊界 no-op:top(已在最上方)/ bottom(已在最下方)/ not-folder(無可移入的 folder)/ root(已在最外層) */\n  blocked?: (args: { reason: 'top' | 'bottom' | 'not-folder' | 'root'; label: string; targetLabel?: string }) => string\n  /** sr-only 操作說明(tree 容器 `aria-describedby` 指向;僅 `draggable` 時渲染) */\n  instructions?: string\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Constants\n// ═══════════════════════════════════════════════════════════════════════════\n\n// Icon / chevron 尺寸——從 item-layout pattern module 引入(在檔頂 import),\n// 這裡本地不再宣告。所有 row primitives 共用同一個常數。\n\n// indentStep = chevronSize + gap-2(8px)。值 {24,24,28} 與 CSS token `--tree-indent-{sm,md,lg}`\n// (`tokens/uiSize/uiSize.css`)**完全一致、必須同步維護**(改一處要兩處一起改;非「token 取代 literal」)。\n// 為何兩源並存:本元件 render 用此 JS literal 算 `indentPx`(TreeItem inline calc 需 number)+ drop-indicator\n// pointer 數學(handleDragOver px 命中判斷,CSS var 在 JS 計算層拿不到);DataTable nested rows\n// 則走 CSS token 的 Tailwind class(跨元件視覺一致)。結構對齊:子 chevron 對齊父 icon,子 icon 對齊父 label。\nconst INDENT_STEP: Record<SizeKey, number> = { sm: 24, md: 24, lg: 28 }\n\n// ── 鍵盤重排(keyboard reorder,2026-07-14 v1)常數 ──\n// 鍵位 = Cmd/Ctrl+Shift+方向鍵,對齊 Notion 移動 block 鍵位(https://www.notion.com/help/keyboard-shortcuts,\n// WebFetch 驗證紀錄 .claude/logs/treeview-keyboard-dnd-design.md#L25);\n// modifier 層與 APG tree 導覽鍵(無 modifier 的 ↑↓→←)完全正交,零衝突。\nconst REORDER_ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']\ntype ReorderArrowKey = 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight'\n\n// 鍵盤重排 SR 播報預設文案(zh-TW;consumer 經 `reorderAnnouncements` prop per-key 覆寫)。\n// 格式 =「結果 + 序數位置」— 非視覺使用者靠「第 n 項,共 m 項」建立位置模型\n// (世界級 cite 詳 tree-view.spec.md「鍵盤重排」段,M22)。\n// i18n-allow-block: DS default SR-only 播報文案,prop 可覆寫(同 select-menu.tsx SelectMenuLiveStatus 先例)\nconst DEFAULT_REORDER_ANNOUNCEMENTS: Required<TreeReorderAnnouncements> = {\n  moved: ({ label, targetLabel, position, index, count }) =>\n    `已將『${label}』移到『${targetLabel}』${position === 'before' ? '之前' : '之後'},第 ${index} 項,共 ${count} 項`,\n  movedInside: ({ label, folderLabel, index, count }) =>\n    index !== undefined && count !== undefined\n      ? `已將『${label}』移入『${folderLabel}』,第 ${index} 項,共 ${count} 項`\n      : `已將『${label}』移入『${folderLabel}』`,\n  movedOut: ({ label, parentLabel, level }) =>\n    `已將『${label}』移出到『${parentLabel}』之後,第 ${level} 層`,\n  blocked: ({ reason, targetLabel }) => {\n    switch (reason) {\n      case 'top': return '已在最上方'\n      case 'bottom': return '已在最下方'\n      case 'not-folder': return targetLabel ? `無法移入:『${targetLabel}』不是資料夾` : '無法移入'\n      case 'root': return '已在最外層'\n    }\n  },\n  instructions: '按 Cmd(Ctrl)+Shift+方向鍵可重新排列項目',\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Context\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface TreeViewContextValue {\n  size: SizeKey\n  context: TreeContext\n  selectionMode: SelectionMode\n  expandOnSelect: boolean\n  draggable: boolean\n  isKeyboardRef: React.RefObject<boolean>\n  /**\n   * Per-tree instance 前綴(React.useId),用來組每個 treeitem 的 DOM `id`\n   * (`${prefix}treeitem-${nodeId}`),讓容器的 `aria-activedescendant` 能指向目前 focused node。\n   * 多棵 TreeView 同頁 / node id 跨樹重複時不會撞 DOM id。\n   */\n  activeDescendantPrefix: string\n  expandedIds: Set<string>\n  selectedIds: Set<string>\n  focusedId: string | null\n  /** 目前拖曳中的 node id(null = 沒在拖) */\n  draggingId: string | null\n  /** 目前 drop indicator 的位置 + depth(用於 line indent) */\n  dropTarget: { id: string; position: TreeDropPosition; depth: number } | null\n  toggleExpand: (id: string) => void\n  select: (id: string) => void\n  setFocusedId: (id: string | null) => void\n  /** Pointer activation 後把 DOM focus 還給 virtual-focus tree root。 */\n  focusTree: () => void\n  registerNode: (id: string, parentId: string | null, hasChildren: boolean, label?: React.ReactNode, icon?: LucideIcon) => void\n  getNodeInfo: (id: string) => NodeInfo | undefined\n  unregisterNode: (id: string) => void\n}\n\nconst TreeViewContext = React.createContext<TreeViewContextValue | null>(null)\n\nfunction useTreeView(): TreeViewContextValue {\n  const ctx = React.useContext(TreeViewContext)\n  if (!ctx) throw new Error('TreeItem must be used within TreeView')\n  return ctx\n}\n\n// TreeItem depth context(遞迴 depth tracking)\nconst DepthContext = React.createContext(0)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Node registry — 追蹤所有 node 的 parent/children 關係,用於鍵盤導覽\n// ═══════════════════════════════════════════════════════════════════════════\n\ninterface NodeInfo {\n  id: string\n  parentId: string | null\n  hasChildren: boolean\n  /** 用於 DragOverlay ghost 渲染 */\n  label?: React.ReactNode\n  icon?: LucideIcon\n}\n\nfunction useNodeRegistry() {\n  const nodesRef = React.useRef(new Map<string, NodeInfo>())\n\n  const registerNode = React.useCallback(\n    (id: string, parentId: string | null, hasChildren: boolean, label?: React.ReactNode, icon?: LucideIcon) => {\n      nodesRef.current.set(id, { id, parentId, hasChildren, label, icon })\n    },\n    []\n  )\n\n  const unregisterNode = React.useCallback((id: string) => {\n    nodesRef.current.delete(id)\n  }, [])\n\n  const getNodeInfo = React.useCallback((id: string) => nodesRef.current.get(id), [])\n\n  return { nodesRef, registerNode, unregisterNode, getNodeInfo }\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeView\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface TreeViewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDragEnd'> {\n  /** 元件尺寸,影響 node 高度、icon 大小、indent 寬度 */\n  size?: SizeKey\n  /**\n   * 使用脈絡,決定 item 的水平 padding:\n   * - `'sidebar'`(預設):頁面側邊欄,`--layout-space-loose`(md=16px / lg=24px,隨 density 連動)\n   * - `'menu'`:浮層選單 / dropdown,px-3(12px),對齊 MenuItem\n   */\n  context?: TreeContext\n  /** 選取模式。預設 'single'(sidebar nav / stepper) */\n  selectionMode?: SelectionMode\n  /** 點擊 label 時是否同時展開 children。預設 false(chevron 是展開的唯一控件) */\n  expandOnSelect?: boolean\n  /** 受控:展開的 node id 集合 */\n  expandedIds?: Set<string>\n  /** 受控:展開狀態變更 callback */\n  onExpandedChange?: (ids: Set<string>) => void\n  /** 受控:選取的 node id 集合 */\n  selectedIds?: Set<string>\n  /** 受控:選取狀態變更 callback */\n  onSelectedChange?: (ids: Set<string>) => void\n  /** 非受控:預設展開的 node id 陣列 */\n  defaultExpandedIds?: string[]\n  /** 非受控:預設選取的 node id 陣列 */\n  defaultSelectedIds?: string[]\n  /**\n   * 啟用拖曳排序。預設 false。\n   * 啟用後整列可拖(Figma 風格,無 grip handle;靠 distance:5 區分 click vs drag),\n   * 拖曳時顯示 drop indicator(before / after / inside 三種位置)。\n   * Consumer 透過 `onDragEnd` callback 接收 reorder 事件,自行更新 data。\n   */\n  draggable?: boolean\n  /** Drag 結束時觸發,提供 sourceId、targetId、position。Consumer 負責 reorder。 */\n  onDragEnd?: (event: TreeDragEndEvent) => void\n  /**\n   * 鍵盤重排(`Cmd/Ctrl+Shift+方向鍵`)的 SR 播報文案覆寫(per-key merge;zh-TW 預設)。\n   * 僅在 `draggable` 時生效;含 `instructions`(sr-only 操作說明)。\n   * @public\n   */\n  reorderAnnouncements?: TreeReorderAnnouncements\n  /** ARIA label */\n  'aria-label'?: string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(\n  (\n    {\n      size = 'md',\n      context = 'sidebar',\n      selectionMode = 'single',\n      expandOnSelect = false,\n      draggable = false,\n      onDragEnd: onDragEndProp,\n      reorderAnnouncements: reorderAnnouncementsProp,\n      expandedIds: controlledExpanded,\n      onExpandedChange,\n      selectedIds: controlledSelected,\n      onSelectedChange,\n      defaultExpandedIds = [],\n      defaultSelectedIds = [],\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    // ── Accessible name dev-warn(2026-07-18:兌現 spec「Accessible name 必填契約」段承諾 —\n    //    原 spec 宣稱有此 console.warn 但 code 缺,spec-code drift;補上使兩者一致)──\n    //    role=\"tree\" 名稱無法從子節點推導,缺 aria-label / aria-labelledby → SR 只讀「tree」。\n    //    對齊 Button / Tag 的 dev-only 誤用警告 idiom;production 不觸發。\n    const ariaLabel = props['aria-label']\n    const ariaLabelledby = props['aria-labelledby']\n    React.useEffect(() => {\n      if (\n        process.env.NODE_ENV !== 'production' &&\n        ariaLabel == null &&\n        ariaLabelledby == null\n      ) {\n        console.warn(\n          '[DS] TreeView:role=\"tree\" 缺 accessible name — 請傳 aria-label(直接字串)或 aria-labelledby(指向可見標題 id)其一。' +\n            '兩者皆缺時螢幕閱讀器只讀出「tree」無法辨識用途(WAI-ARIA APG 要求 role=\"tree\" 具 accessible name)。',\n        )\n      }\n    }, [ariaLabel, ariaLabelledby])\n\n    // ── Expand state(受控 / 非受控) ──\n    const [internalExpanded, setInternalExpanded] = React.useState(\n      () => new Set(defaultExpandedIds)\n    )\n    const expandedIds = controlledExpanded ?? internalExpanded\n    const setExpandedIds = React.useCallback(\n      (updater: (prev: Set<string>) => Set<string>) => {\n        const update = (prev: Set<string>) => {\n          const next = updater(prev)\n          onExpandedChange?.(next)\n          return next\n        }\n        if (controlledExpanded) {\n          update(controlledExpanded)\n        } else {\n          setInternalExpanded(update)\n        }\n      },\n      [controlledExpanded, onExpandedChange]\n    )\n\n    // ── Selection state(受控 / 非受控) ──\n    const [internalSelected, setInternalSelected] = React.useState(\n      () => new Set(defaultSelectedIds)\n    )\n    const selectedIds = controlledSelected ?? internalSelected\n    const setSelectedIds = React.useCallback(\n      (updater: (prev: Set<string>) => Set<string>) => {\n        const update = (prev: Set<string>) => {\n          const next = updater(prev)\n          onSelectedChange?.(next)\n          return next\n        }\n        if (controlledSelected) {\n          update(controlledSelected)\n        } else {\n          setInternalSelected(update)\n        }\n      },\n      [controlledSelected, onSelectedChange]\n    )\n\n    // ── Focus state ──\n    const [focusedId, setFocusedId] = React.useState<string | null>(null)\n    const treeRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => treeRef.current!)\n    const focusTree = React.useCallback(() => {\n      treeRef.current?.focus({ preventScroll: true })\n    }, [])\n\n    // ── Virtual focus id prefix ──\n    // DOM focus 永遠停在 role=tree 容器(單一 tab stop);目前 node 透過 aria-activedescendant\n    // 告知 AT(對齊 DS 既有 cmdk virtual-focus canonical:SelectMenu / Command listbox)。\n    // useId 確保多棵 TreeView 同頁 / node id 跨樹重複時 DOM id 不撞。\n    const activeDescendantPrefix = React.useId()\n\n    // ── 鍵盤重排 SR 播報(2026-07-14 v1;詳 spec「鍵盤重排」)──\n    // 單一 polite live region 覆寫式更新(textContent 替換非 append → 快速連按天然只播最新)。\n    // 不可借 dnd-kit DndContext 內建 live region — 它只播 dnd-kit 管理的 drag session,\n    // 自建鍵盤路徑觸不到。消費 select-menu.tsx SelectMenuLiveStatus role=\"status\" 先例。\n    const [reorderAnnouncement, setReorderAnnouncement] = React.useState('')\n    const announcements = React.useMemo(\n      () => ({ ...DEFAULT_REORDER_ANNOUNCEMENTS, ...reorderAnnouncementsProp }),\n      [reorderAnnouncementsProp]\n    )\n    // sr-only 操作說明節點 id(tree 容器 aria-describedby 指向;僅 draggable 渲染)\n    const reorderInstructionsId = `${activeDescendantPrefix}tree-reorder-instructions`\n\n    // ── Keyboard vs mouse detection ──\n    // focus ring 只在鍵盤操作時顯示,滑鼠點擊用 bg-neutral-selected 表達選中,不顯示 ring\n    const isKeyboardRef = React.useRef(false)\n\n    // ── Drag state ──\n    const [draggingId, setDraggingId] = React.useState<string | null>(null)\n    const [dropTarget, setDropTarget] = React.useState<{ id: string; position: TreeDropPosition; depth: number } | null>(null)\n    const autoExpandTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null)\n    // 2026-05-16 audit codex Round 6:unmount cleanup(原 cleanup 只在 dragEnd/dragCancel,unmount-during-drag 漏 cancel)\n    React.useEffect(() => () => { if (autoExpandTimerRef.current) clearTimeout(autoExpandTimerRef.current) }, [])\n    // Ref for toggleExpand — handleDragOver 定義在 toggleExpand 之前(hook 順序限制),\n    // 用 ref 打斷 temporal dead zone。\n    const toggleExpandRef = React.useRef<(id: string) => void>(() => {})\n\n    // ── Node registry ──(2026-07-14 上移至 drag handlers 之前:isInSubtree 消費 getNodeInfo,\n    // 而 handleDragOver / handleDragEnd / 鍵盤 reorder 都消費 isInSubtree)\n    const { registerNode, unregisterNode, getNodeInfo } = useNodeRegistry()\n\n    // 子樹判定:candidate 是否位於 rootId 的子樹內(含相等)。沿 registry parentId 鏈上溯。\n    // 雙路共用 SSOT:pointer 路徑 descendant drop guard(2026-07-14 R6 修:原 handleDragOver 只擋\n    // `over.id === active.id` 未擋 descendants → 可發出 targetId ∈ source 子樹的非法事件,\n    // consumer 按 remove→insert 實作會讓整個子樹靜默消失)+ 鍵盤 reorder commit 前防禦 assert。\n    const isInSubtree = React.useCallback(\n      (candidateId: string, rootId: string): boolean => {\n        let cur: string | null = candidateId\n        while (cur != null) {\n          if (cur === rootId) return true\n          cur = getNodeInfo(cur)?.parentId ?? null\n        }\n        return false\n      },\n      [getNodeInfo]\n    )\n\n    const sensors = useSensors(\n      useSensor(PointerSensor, { activationConstraint: { distance: 5 } })\n    )\n\n    const handleDragStart = React.useCallback((event: DragStartEvent) => {\n      setDraggingId(String(event.active.id))\n    }, [])\n\n    // ── Figma-style drop detection(X + Y 雙軸）──\n    //\n    // Y 軸:決定在哪個 item 附近\n    //   - item 上 25% = before\n    //   - item 中 50% = inside(只有 folder)\n    //   - item 下 25% = after\n    //\n    // X 軸:決定 nesting 深度(Figma 核心邏輯)\n    //   - 滑鼠越左 = 越淺層(放在 parent 層級)\n    //   - 滑鼠越右 = 越深層(放進 folder)\n    //   - 用 pointer X 相對於 tree 左邊界計算 indent level\n    //\n    const handleDragOver = React.useCallback((event: DragOverEvent) => {\n      const { over, active } = event\n      // 2026-07-14 R6 descendant guard:over 是 active 自己「或其子樹內節點」→ 無效目標,\n      // 不設 dropTarget(拖 folder 進自己子樹會發出非法 TreeDragEndEvent;guard SSOT = isInSubtree,\n      // 鍵盤 reorder 路徑共用同一 helper)。\n      if (!over || isInSubtree(String(over.id), String(active.id))) {\n        if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n        setDropTarget(null)\n        return\n      }\n\n      const rowEl = document.querySelector(`[data-tree-row=\"${over.id}\"]`) as HTMLElement | null\n      const targetEl = document.querySelector(`[data-tree-id=\"${over.id}\"]`) as HTMLElement | null\n      if (!rowEl || !targetEl) { setDropTarget(null); return }\n\n      // 實際指標位置\n      const startX = (event.activatorEvent as PointerEvent)?.clientX ?? 0\n      const startY = (event.activatorEvent as PointerEvent)?.clientY ?? 0\n      const currentX = startX + (event.delta?.x ?? 0)\n      const currentY = startY + (event.delta?.y ?? 0)\n\n      const rect = rowEl.getBoundingClientRect()\n      const offsetY = currentY - rect.top\n      const height = rect.height || 32\n      const ratio = Math.max(0, Math.min(1, offsetY / height))\n\n      const hasChildren = targetEl.dataset.treeHasChildren === 'true'\n      const targetDepth = Number(targetEl.getAttribute('aria-level') ?? 1) - 1\n\n      // ── X 軸:計算指標在哪個 indent level ──\n      const treeEl = treeRef.current\n      const treeLeft = treeEl?.getBoundingClientRect().left ?? 0\n      const indentStep = INDENT_STEP[size]\n      const pointerIndentLevel = Math.max(0, Math.floor((currentX - treeLeft) / indentStep))\n\n      let position: TreeDropPosition\n      let finalDepth = targetDepth\n\n      if (hasChildren) {\n        // Folder node\n        if (ratio < 0.25) {\n          position = 'before'\n        } else if (ratio > 0.75) {\n          // after folder: 如果指標在 folder 層級或更淺 = after(同層)\n          // 如果指標更深 = inside(放進 folder)\n          position = pointerIndentLevel > targetDepth ? 'inside' : 'after'\n        } else {\n          position = 'inside'\n        }\n      } else {\n        // Leaf node\n        if (ratio < 0.5) {\n          position = 'before'\n        } else {\n          position = 'after'\n          // X 軸:如果指標在比 target 更淺的層級,提升 drop depth\n          // 例:Contact(depth 1)的 after,如果滑鼠在 depth 0 → 變成「after Pages」\n          if (pointerIndentLevel < targetDepth) {\n            // 找 parent 來放\n            const groupEl = targetEl.closest('[role=\"group\"]')\n            const parentTreeItem = groupEl?.parentElement?.closest('[role=\"treeitem\"]')\n            const parentId = parentTreeItem?.getAttribute('data-tree-id')\n            if (parentId && parentId !== String(active.id)) {\n              const parentDepth = Number(parentTreeItem?.getAttribute('aria-level') ?? 1) - 1\n              finalDepth = parentDepth\n              setDropTarget(prev => prev && prev.id === parentId && prev.position === 'after' && prev.depth === parentDepth ? prev : { id: parentId, position: 'after', depth: parentDepth })\n              return\n            }\n          }\n        }\n      }\n\n      // 2026-07-06 D3 perf:bail-out — drop target 未變(每 dragOver 跨 row 才變)時回傳 prev,\n      // React 對相同 reference bail out,避免每次 over 事件重建 contextValue → 全樹 TreeItem re-render。\n      setDropTarget(prev => {\n        const id = String(over.id)\n        return prev && prev.id === id && prev.position === position && prev.depth === finalDepth ? prev : { id, position, depth: finalDepth }\n      })\n\n      // Auto-expand collapsed folder after 500ms hover (Figma behavior)\n      if (position === 'inside' && hasChildren && !expandedIds.has(String(over.id))) {\n        if (autoExpandTimerRef.current) clearTimeout(autoExpandTimerRef.current)\n        autoExpandTimerRef.current = setTimeout(() => {\n          toggleExpandRef.current(String(over.id))\n        }, 500)\n      } else {\n        if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      }\n    }, [expandedIds, isInSubtree])\n\n    const dropTargetRef = React.useRef(dropTarget)\n    dropTargetRef.current = dropTarget\n\n    const handleDragEnd = React.useCallback((event: DragEndEvent) => {\n      if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      const { active, over } = event\n      const dt = dropTargetRef.current\n      // descendant guard 同 handleDragOver(dt 已由 dragOver guard 保證為 null,此為 belt-and-braces)\n      if (over && !isInSubtree(String(over.id), String(active.id)) && dt) {\n        onDragEndProp?.({\n          sourceId: String(active.id),\n          targetId: String(over.id),\n          position: dt.position,\n        })\n      }\n      setDraggingId(null)\n      setDropTarget(null)\n    }, [onDragEndProp, isInSubtree])\n\n    const handleDragCancel = React.useCallback(() => {\n      if (autoExpandTimerRef.current) { clearTimeout(autoExpandTimerRef.current); autoExpandTimerRef.current = null }\n      setDraggingId(null)\n      setDropTarget(null)\n    }, [])\n\n    // ── Actions ──\n    const toggleExpand = React.useCallback(\n      (id: string) => {\n        setExpandedIds((prev) => {\n          const next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n          return next\n        })\n      },\n      [setExpandedIds]\n    )\n    toggleExpandRef.current = toggleExpand\n\n    const select = React.useCallback(\n      (id: string) => {\n        if (selectionMode === 'none') return\n        setSelectedIds((prev) => {\n          if (selectionMode === 'single') {\n            return new Set([id])\n          }\n          // multiple\n          const next = new Set(prev)\n          if (next.has(id)) next.delete(id)\n          else next.add(id)\n          return next\n        })\n      },\n      [selectionMode, setSelectedIds]\n    )\n\n    // ── Keyboard reorder(Cmd/Ctrl+Shift+方向鍵,2026-07-14 v1)──\n    // 設計 SSOT:tree-view.spec.md「鍵盤重排」。與 pointer 路徑共用 TreeDragEndEvent 契約 +\n    // onDragEnd prop + registry(consumer API 零改動);每按一下立即 commit(無 grab-mode /\n    // 無預覽,對齊 Notion Cmd/Ctrl+Shift+Arrow 移動 block:https://www.notion.com/help/keyboard-shortcuts,\n    // WebFetch 驗證紀錄 .claude/logs/treeview-keyboard-dnd-design.md#L25)。\n    // 不用 dnd-kit KeyboardSensor — 其 activator 需可接收 DOM focus\n    // (https://dndkit.com/api-documentation/sensors/keyboard),與 row tabIndex={-1} +\n    // aria-activedescendant 虛擬焦點模型結構性不相容(2026-07-05 D4 拍板不翻案)。\n\n    // 播報用 label 文字:registry label 是 ReactNode — string 直接用,否則退 DOM row textContent。\n    const getNodeLabelText = React.useCallback(\n      (id: string): string => {\n        const info = getNodeInfo(id)\n        if (typeof info?.label === 'string') return info.label\n        const rowEl = treeRef.current?.querySelector<HTMLElement>(`[data-tree-row=\"${id}\"]`)\n        return rowEl?.textContent?.trim() || id\n      },\n      [getNodeInfo]\n    )\n\n    // code-quality-allow: long-function — 四鍵語意(同層上下 / 移入 / 移出)+ 邊界播報結構緊密,\n    // 拆 sub-fn 會跨 fn 傳 siblings / announce state 反而複雜(同 handleKeyDown 先例)\n    const handleKeyboardReorder = React.useCallback(\n      (key: ReorderArrowKey) => {\n        const tree = treeRef.current\n        if (!tree || !focusedId) return\n        const sourceId = focusedId\n        const sourceEl = tree.querySelector<HTMLElement>(`[data-tree-id=\"${sourceId}\"]`)\n        // disabled node 不可移(鍵盤導覽本就跳過 disabled,此為防禦 guard)\n        if (!sourceEl || sourceEl.getAttribute('aria-disabled') === 'true') return\n\n        const label = getNodeLabelText(sourceId)\n        // 同層 siblings(DOM 序)。focused node 可見 ⇒ 其 parent 已展開 ⇒ 全 siblings 已 mount。\n        const parentId = sourceEl.dataset.treeParentId || null\n        const visibleItems = Array.from(\n          tree.querySelectorAll<HTMLElement>('[role=\"treeitem\"]:not([hidden])')\n        )\n        const siblings = visibleItems.filter((el) => (el.dataset.treeParentId || null) === parentId)\n        const sourceIndex = siblings.findIndex((el) => el.dataset.treeId === sourceId)\n        if (sourceIndex < 0) return\n        const isEnabled = (el: HTMLElement) => el.getAttribute('aria-disabled') !== 'true'\n\n        // 發出與 pointer 路徑同型的 TreeDragEndEvent,並排定 re-render 後 scrollIntoView\n        // (既有 effect 只在 isFocused 變化時跑;同 id 移動不 re-fire,故此處補)。\n        const commit = (targetId: string, position: TreeDropPosition): boolean => {\n          // 結構安全 assert:四鍵語意(sibling 間 / 進 prev sibling / 出 parent)結構上\n          // 不可能移進自己子樹;防禦性仍擋(與 pointer descendant guard 共用 isInSubtree SSOT)。\n          if (targetId === sourceId || isInSubtree(targetId, sourceId)) return false\n          onDragEndProp?.({ sourceId, targetId, position })\n          requestAnimationFrame(() => {\n            treeRef.current\n              ?.querySelector<HTMLElement>(`[data-tree-id=\"${sourceId}\"]`)\n              ?.scrollIntoView({ block: 'nearest' })\n          })\n          return true\n        }\n\n        // 同層移動後的 1-based 新序數(播報用):移除 source 再插入的模擬;同層總數不變。\n        const movedIndex = (targetId: string, position: 'before' | 'after'): number => {\n          const order = siblings.map((el) => el.dataset.treeId).filter((id) => id !== sourceId)\n          const tIdx = order.indexOf(targetId)\n          return (position === 'before' ? tIdx : tIdx + 1) + 1\n        }\n\n        switch (key) {\n          case 'ArrowUp':\n          case 'ArrowDown': {\n            // disabled sibling 不可當 target 錨點(pointer useDroppable 同樣 disable)——\n            // 相鄰 sibling disabled 時錨到最近 enabled sibling 並翻轉 before/after 表達同一插槽\n            // (可達位置與 pointer 一致);整個方向皆無 enabled sibling → 視同邊界。\n            const dir = key === 'ArrowUp' ? -1 : 1\n            const boundary = dir < 0 ? ('top' as const) : ('bottom' as const)\n            const adjacent = siblings[sourceIndex + dir]\n            if (!adjacent) {\n              setReorderAnnouncement(announcements.blocked({ reason: boundary, label }))\n              return\n            }\n            let target: HTMLElement | undefined\n            let position: 'before' | 'after' = dir < 0 ? 'before' : 'after'\n            if (isEnabled(adjacent)) {\n              target = adjacent\n            } else {\n              for (let i = sourceIndex + dir; i >= 0 && i < siblings.length; i += dir) {\n                if (isEnabled(siblings[i])) { target = siblings[i]; break }\n              }\n              position = dir < 0 ? 'after' : 'before' // 錨到最近 enabled sibling 的另一側 = 相鄰插槽\n            }\n            if (!target) {\n              setReorderAnnouncement(announcements.blocked({ reason: boundary, label }))\n              return\n            }\n            const targetId = target.dataset.treeId!\n            if (commit(targetId, position)) {\n              setReorderAnnouncement(\n                announcements.moved({\n                  label,\n                  targetLabel: getNodeLabelText(targetId),\n                  position,\n                  index: movedIndex(targetId, position),\n                  count: siblings.length,\n                })\n              )\n            }\n            return\n          }\n          case 'ArrowRight': {\n            // 移入:成為最近 enabled 上一 sibling 的子項(沿用 pointer「inside 限 folder」規則)\n            let target: HTMLElement | undefined\n            for (let i = sourceIndex - 1; i >= 0; i--) {\n              if (isEnabled(siblings[i])) { target = siblings[i]; break }\n            }\n            if (!target) {\n              setReorderAnnouncement(announcements.blocked({ reason: 'not-folder', label }))\n              return\n            }\n            const targetId = target.dataset.treeId!\n            if (target.dataset.treeHasChildren !== 'true') {\n              setReorderAnnouncement(\n                announcements.blocked({ reason: 'not-folder', label, targetLabel: getNodeLabelText(targetId) })\n              )\n              return\n            }\n            const wasExpanded = expandedIds.has(targetId)\n            if (commit(targetId, 'inside')) {\n              // 移入 collapsed folder:允許 + 自動展開(pointer 500ms hover auto-expand 的鍵盤對應物)\n              if (!wasExpanded) toggleExpand(targetId)\n              // 序數:consumer 對 inside 的慣例語意 = append 到 children 尾端;\n              // folder 原收合 → children 未 mount 無從計數 → 播報省略序數(誠實不猜)。\n              const childCount = wasExpanded\n                ? visibleItems.filter((el) => el.dataset.treeParentId === targetId).length\n                : undefined\n              setReorderAnnouncement(\n                announcements.movedInside({\n                  label,\n                  folderLabel: getNodeLabelText(targetId),\n                  index: childCount !== undefined ? childCount + 1 : undefined,\n                  count: childCount !== undefined ? childCount + 1 : undefined,\n                })\n              )\n            }\n            return\n          }\n          case 'ArrowLeft': {\n            // 移出:成為 parent 的下一個 sibling(outdent)\n            if (!parentId) {\n              setReorderAnnouncement(announcements.blocked({ reason: 'root', label }))\n              return\n            }\n            const parentEl = tree.querySelector<HTMLElement>(`[data-tree-id=\"${parentId}\"]`)\n            const level = Number(parentEl?.getAttribute('aria-level') ?? '1')\n            if (commit(parentId, 'after')) {\n              setReorderAnnouncement(\n                announcements.movedOut({ label, parentLabel: getNodeLabelText(parentId), level })\n              )\n            }\n            return\n          }\n        }\n      },\n      [focusedId, expandedIds, toggleExpand, onDragEndProp, getNodeLabelText, isInSubtree, announcements]\n    )\n\n    // ── Context value ──\n    const contextValue = React.useMemo<TreeViewContextValue>(\n      () => ({\n        size,\n        context,\n        selectionMode,\n        expandOnSelect,\n        draggable,\n        isKeyboardRef,\n        activeDescendantPrefix,\n        draggingId,\n        dropTarget,\n        expandedIds,\n        selectedIds,\n        focusedId,\n        toggleExpand,\n        select,\n        setFocusedId,\n        focusTree,\n        registerNode,\n        unregisterNode,\n        getNodeInfo,\n      }),\n      [\n        size,\n        context,\n        selectionMode,\n        expandOnSelect,\n        draggable,\n        isKeyboardRef,\n        activeDescendantPrefix,\n        draggingId,\n        dropTarget,\n        expandedIds,\n        selectedIds,\n        focusedId,\n        toggleExpand,\n        select,\n        setFocusedId,\n        focusTree,\n        registerNode,\n        unregisterNode,\n        getNodeInfo,\n      ]\n    )\n\n    // ── Keyboard handler ──\n    const handleMouseDown = React.useCallback(() => {\n      isKeyboardRef.current = false\n    }, [])\n\n    // code-quality-allow: long-function — helper fn 結構緊密,拆 sub-fn 會跨 fn 傳 state 反而複雜\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        isKeyboardRef.current = true\n        if (!treeRef.current) return\n\n        // ── 互動 descendant 自理鍵盤(先於導覽 / 重排分支)──\n        // 公開 inlineActions / inlineActionsSlot 經 <ItemInlineAction> 渲染的原生 <button>\n        // (及 consumer slot 內的 link / field / role=button)是各自獨立的 tab stop(spec\n        // A11y「單一 tab stop」段)。其 Enter/Space/方向鍵應由該控件自理——若冒泡到容器\n        // handleKeyDown,下方 Enter/Space 分支的 e.preventDefault()+select() 會吃掉 button\n        // 原生啟動並誤選 tree node。虛擬焦點模型下 tree 導覽/重排只在事件來自容器本身時處理\n        // (DOM focus 停在 tree 容器;treeitem row / chevron / checkbox 皆 tabIndex=-1)。\n        const keyTarget = e.target as HTMLElement | null\n        if (keyTarget && keyTarget !== e.currentTarget) {\n          const interactive = keyTarget.closest<HTMLElement>(\n            'a[href], button, input, select, textarea, [contenteditable=\"true\"], [tabindex]:not([tabindex=\"-1\"])'\n          )\n          // interactive === e.currentTarget:唯一可聚焦祖先是 tree 容器(tabIndex=0 單一 tab\n          // stop 進出點)→ 屬非互動 descendant,照常走 tree 導覽。\n          if (interactive && interactive !== e.currentTarget) return\n        }\n\n        // ── 鍵盤重排:Cmd/Ctrl+Shift+方向鍵(2026-07-14 v1,詳 spec「鍵盤重排」)──\n        // 必排在下方「無焦點時方向鍵先聚焦第一項」分支之前(該分支不分 modifier 攔 Arrow*);\n        // 非 modifier 導覽路徑(下方 switch)完全不變。\n        if ((e.metaKey || e.ctrlKey) && e.shiftKey && REORDER_ARROW_KEYS.includes(e.key)) {\n          if (!draggable) return // 未啟用拖曳 → 整組 no-op(modifier 組合不落入導覽 switch)\n          e.preventDefault() // 阻止瀏覽器原生行為(捲動 / 文字選取)\n          if (draggingId !== null) return // pointer 拖曳進行中 → 互斥,忽略鍵盤重排\n          handleKeyboardReorder(e.key as ReorderArrowKey)\n          return\n        }\n\n        // 取得所有可見的 treeitem\n        const items = Array.from(\n          // a11y:排除 disabled 節點 → 鍵盤導覽/選取/展開全跳過(APG:disabled 不可鍵盤操作)\n          treeRef.current.querySelectorAll<HTMLElement>('[role=\"treeitem\"]:not([hidden]):not([aria-disabled=\"true\"])')\n        )\n        const currentIndex = items.findIndex(\n          (el) => el.dataset.treeId === focusedId\n        )\n        // a11y:沒焦點時任一方向鍵先聚焦第一個(含 ArrowLeft/Right,原漏 → AT 無 activedescendant 可讀)\n        if (currentIndex < 0 && items.length > 0 && ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(e.key)) {\n          // 沒有焦點時,任何方向鍵先聚焦第一個\n          setFocusedId(items[0].dataset.treeId ?? null)\n          e.preventDefault()\n          return\n        }\n\n        const currentEl = items[currentIndex]\n\n        switch (e.key) {\n          case 'ArrowDown': {\n            e.preventDefault()\n            const next = items[currentIndex + 1]\n            if (next) setFocusedId(next.dataset.treeId ?? null)\n            break\n          }\n          case 'ArrowUp': {\n            e.preventDefault()\n            const prev = items[currentIndex - 1]\n            if (prev) setFocusedId(prev.dataset.treeId ?? null)\n            break\n          }\n          case 'ArrowRight': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (!id) break\n            const isExpanded = expandedIds.has(id)\n            const hasChildren = currentEl?.dataset.treeHasChildren === 'true'\n            if (hasChildren && !isExpanded) {\n              toggleExpand(id)\n            } else if (hasChildren && isExpanded) {\n              // 已展開 → 移到第一個 child\n              const next = items[currentIndex + 1]\n              if (next) setFocusedId(next.dataset.treeId ?? null)\n            }\n            break\n          }\n          case 'ArrowLeft': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (!id) break\n            const isExpanded = expandedIds.has(id)\n            const hasChildren = currentEl?.dataset.treeHasChildren === 'true'\n            if (hasChildren && isExpanded) {\n              toggleExpand(id)\n            } else {\n              // 收合狀態或 leaf → 移到 parent\n              const parentId = currentEl?.dataset.treeParentId\n              if (parentId) setFocusedId(parentId)\n            }\n            break\n          }\n          case 'Home': {\n            e.preventDefault()\n            if (items[0]) setFocusedId(items[0].dataset.treeId ?? null)\n            break\n          }\n          case 'End': {\n            e.preventDefault()\n            const last = items[items.length - 1]\n            if (last) setFocusedId(last.dataset.treeId ?? null)\n            break\n          }\n          case 'Enter':\n          case ' ': {\n            e.preventDefault()\n            const id = currentEl?.dataset.treeId\n            if (id) select(id)\n            break\n          }\n        }\n      },\n      [focusedId, expandedIds, toggleExpand, select, setFocusedId, draggable, draggingId, handleKeyboardReorder]\n    )\n\n    const treeEl = (\n      <div\n        // {...props} 在最前:內部 role/style(--tree-px)/onKeyDown/tabIndex 必須勝過 consumer\n        // 誤傳(原 spread 在最後 → consumer style 會整組蓋掉 --tree-px、onKeyDown 蓋掉鍵盤導覽)\n        {...props}\n        ref={treeRef}\n        role=\"tree\"\n        aria-multiselectable={selectionMode === 'multiple' || undefined}\n        // Virtual focus:DOM focus 停在容器(單一 tab stop),aria-activedescendant 指向目前 node\n        // 的 DOM id,讓 AT 朗讀目前焦點 node(對齊 WAI-ARIA TreeView APG aria-activedescendant 模式)。\n        aria-activedescendant={focusedId ? `${activeDescendantPrefix}treeitem-${focusedId}` : undefined}\n        // 鍵盤重排操作說明(sr-only,僅 draggable;與 consumer 傳入的 aria-describedby 合併)\n        aria-describedby={\n          [props['aria-describedby'], draggable ? reorderInstructionsId : undefined]\n            .filter(Boolean)\n            .join(' ') || undefined\n        }\n        className={cn(\n          // TreeView root 不加任何 py——呼吸空間由外層容器負責:\n          //   - 在 SidebarGroup 內: SidebarGroup py-2 提供\n          //   - 在 DropdownMenuContent 內: content py-2 提供\n          //   - 獨立使用(story demo): consumer 自己加 py-2\n          // 這樣才能跟 DropdownMenu / MenuGroup 的結構一致(group 是容器,row 是內容)。\n          'flex flex-col',\n          className,\n        )}\n        style={{\n          ['--tree-px' as string]: CONTEXT_PX_VAR[context],\n          ...props.style,\n        } as React.CSSProperties}\n        onKeyDown={handleKeyDown}\n        onMouseDown={handleMouseDown}\n        // a11y APG:Tab 進入時初始化 virtual focus(優先 selected,其次第一個可用節點);\n        // 原本無 onFocus init → focusedId=null → aria-activedescendant undefined,AT 讀不到目前節點\n        onFocus={(e) => {\n          ;(props as React.HTMLAttributes<HTMLDivElement>).onFocus?.(e)\n          if (e.target === e.currentTarget && !focusedId && treeRef.current) {\n            const first =\n              treeRef.current.querySelector<HTMLElement>('[role=\"treeitem\"][aria-selected=\"true\"]:not([hidden]):not([aria-disabled=\"true\"])') ??\n              treeRef.current.querySelector<HTMLElement>('[role=\"treeitem\"]:not([hidden]):not([aria-disabled=\"true\"])')\n            if (first) setFocusedId(first.dataset.treeId ?? null)\n          }\n        }}\n        tabIndex={0}\n      >\n        {children}\n      </div>\n    )\n\n    return (\n      <TreeViewContext.Provider value={contextValue}>\n        {/* RowSizeProvider:讓 TreeView 子樹內任何 <ItemIcon> / <ItemAvatar> /\n            <ItemInlineAction> 自動讀到對的 size,跟 SidebarProvider 同一條規則。\n            inlineActions API 也吃這個 context。 */}\n        <RowSizeProvider value={size}>\n        {/* 永遠包 DndContext(hooks 不能 conditional call)。不 draggable 時無 sensors = 不可拖 */}\n        <DndContext\n          sensors={draggable ? sensors : undefined}\n          onDragStart={handleDragStart}\n          onDragOver={handleDragOver}\n          onDragEnd={handleDragEnd}\n          onDragCancel={handleDragCancel}\n        >\n          {treeEl}\n          {draggable && (\n            <>\n              {/* 鍵盤重排 SR 播報 — TreeView 自有 sr-only polite live region(單一節點覆寫式更新;\n                  消費 select-menu.tsx SelectMenuLiveStatus 先例)。渲染在 role=\"tree\" 之外\n                  (tree 的合法 children 只有 treeitem / group);dnd-kit DndContext 內建 live region\n                  只播 dnd-kit drag session,自建鍵盤路徑觸不到,故必須自有。 */}\n              <div role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n                {reorderAnnouncement}\n              </div>\n              {/* 鍵盤重排操作說明 — tree 容器 aria-describedby 指向(對齊 dnd-kit\n                  screenReaderInstructions 慣例:https://dndkit.com/guides/accessibility) */}\n              <div id={reorderInstructionsId} className=\"sr-only\">\n                {announcements.instructions}\n              </div>\n            </>\n          )}\n          {draggable && (\n            <DragOverlay dropAnimation={null}>\n              {draggingId ? (() => {\n                const info = getNodeInfo(draggingId)\n                const IconComp = info?.icon\n                return (\n                  <div className={cn(\n                    'flex items-center gap-2 rounded-lg bg-surface border border-border pointer-events-none',\n                    'shadow-[var(--elevation-200)]',\n                    size === 'lg' ? 'text-body-lg leading-compact px-4 py-2' : 'text-body leading-compact px-3 py-1.5',\n                  )}>\n                    {IconComp && <IconComp size={ICON_SIZE[size]} className=\"shrink-0\" aria-hidden />}\n                    <span className=\"text-foreground truncate max-w-[200px]\">{info?.label ?? draggingId}</span>\n                  </div>\n                )\n              })() : null}\n            </DragOverlay>\n          )}\n        </DndContext>\n        </RowSizeProvider>\n      </TreeViewContext.Provider>\n    )\n  }\n)\nTreeView.displayName = 'TreeView'\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeItem variants\n// ═══════════════════════════════════════════════════════════════════════════\n\nconst treeItemVariants = cva(\n  [\n    // items-start:多行 label 時 prefix 留在第一行(item-layout 規則)\n    'flex items-start gap-2 w-full',\n    'cursor-pointer select-none',\n    'transition-colors duration-150',\n    'outline-none',\n    // Label 字重 500(跟 SidebarMenuButton 一致)\n    'font-medium',\n  ],\n  {\n    variants: {\n      // 消費 ROW_PADDING_BY_SIZE SSOT(item-anatomy.tsx)— drift risk 消除\n      size: ROW_PADDING_BY_SIZE,\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  }\n)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TreeItem\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'id'> {\n  /** 唯一 id。必填,用於 expand / select / keyboard 追蹤 */\n  id: string\n  /** 主要文字 */\n  label: React.ReactNode\n  /** 左側 icon(chevron 之後)。LucideIcon 型別,尺寸由 TreeView size 決定 */\n  icon?: LucideIcon\n  /**\n   * Checkbox(多選模式,label 前方)。傳入 ReactNode(Checkbox 元件)。\n   * 位置:在 chevron 之後、indicator/icon 之前。\n   * 此 slot 僅是 treeitem selection 的視覺鏡像；有效 React element 會由 TreeItem\n   * 強制正規化為 `aria-hidden` + `tabIndex=-1`，不形成第二個 node tab stop。\n   * 單選模式通常不需要(用 bg-neutral-selected 表達選中)。\n   */\n  checkbox?: React.ReactNode\n  /**\n   * 右側 inline actions(suffix slot,宣告式 API)。對齊 `patterns/element-anatomy/inline-action.spec.md`\n   * 與 `SidebarMenuButton.inlineActions` 的同一條規格——TreeItem / SidebarMenuButton /\n   * 未來的 row primitive 全部用同一個 declarative API。\n   *\n   * Consumer 只宣告 intent,TreeItem 用 `<ItemInlineAction>` 自動渲染:\n   * - Icon 尺寸 = `ICON_SIZE[treeViewSize]`(自動)\n   * - Hover bg、tooltip、aria-label、cursor-pointer 自動處理\n   * - **不可以**手刻 button JSX(canonical 實作在 `patterns/element-anatomy/item-anatomy.tsx` `ItemInlineAction`)\n   *\n   * ```tsx\n   * <TreeItem\n   *   id=\"inbox\"\n   *   icon={Inbox}\n   *   label=\"Inbox\"\n   *   inlineActions={[\n   *     { icon: MoreVertical, label: '更多', onClick: handleMore },\n   *     { icon: Plus,           label: '新增', onClick: handleAdd },\n   *   ]}\n   *   actionsReveal=\"hover\"\n   * />\n   * ```\n   *\n   * 若需要永遠可見的 suffix(如 badge 計數),放在 `label` 內:\n   * ```tsx\n   * <TreeItem label={<>Inbox <Badge count={3} /></>} />\n   * ```\n   */\n  inlineActions?: InlineActionConfig[]\n  /**\n   * 右側 actions slot(ReactNode)— escape hatch 供 consumer 放自訂元素\n   * (如 DropdownMenu trigger / 自訂 popover / 多 tier 動作)。\n   *\n   * 跟 `inlineActions` 互斥(同時傳 `inlineActionsSlot` 會優先,`inlineActions` 被忽略)。\n   *\n   * 規則對齊 Input.endSlot canonical:90% case 用 `inlineActions` 宣告式 API,\n   * 10% config 表達不出時走 slot。視覺一致性由 consumer 負責(可使用 host 內部 helper\n   * — 但禁止 app-code 直接 import L3 primitive,見 `check_canonical_propagation.sh` E.2,原 `check_l3_primitive_import` 已 folded)。\n   */\n  inlineActionsSlot?: React.ReactNode\n  /**\n   * Inline actions 的顯示模式:\n   * - `\"hover\"`(預設):row hover 或鍵盤 focus(focus-visible)時才淡入\n   * - `false`:常駐顯示\n   *\n   * 對齊 `SidebarMenuButton.actionsReveal`,同一套規則。\n   */\n  actionsReveal?: false | \"hover\"\n  /**\n   * 取代 icon 的位置。用於 stepper 的 status indicator(●/○/✓)。\n   * 設定後 icon 不渲染、改渲染 indicator;chevron 永遠保留(expandable=旋轉箭頭 / leaf=placeholder)。\n   */\n  indicator?: React.ReactNode\n  /** 是否停用 */\n  disabled?: boolean\n  /** 子 TreeItem(有 children = expandable,沒有 = leaf) */\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(\n  ({ id, label, icon: Icon, checkbox, inlineActions, inlineActionsSlot, actionsReveal = 'hover', indicator, disabled, children, className, style, onClick, ...props }, ref) => {\n    const ctx = useTreeView()\n    const depth = React.useContext(DepthContext)\n    const {\n      size,\n      selectionMode,\n      expandOnSelect,\n      draggable,\n      expandedIds,\n      selectedIds,\n      focusedId,\n      draggingId,\n      dropTarget,\n      toggleExpand,\n      select,\n      setFocusedId,\n      focusTree,\n      registerNode,\n      unregisterNode,\n      isKeyboardRef,\n      activeDescendantPrefix,\n    } = ctx\n\n    const hasChildren = React.Children.count(children) > 0\n    const isExpanded = expandedIds.has(id)\n    const isSelected = selectedIds.has(id)\n    const isFocused = focusedId === id\n    const showRing = isFocused && isKeyboardRef.current\n    const isDragging = draggingId === id\n    const isDropTarget = dropTarget?.id === id\n    const visualCheckbox = checkbox && React.isValidElement<Record<string, unknown>>(checkbox)\n      ? React.cloneElement(checkbox, { 'aria-hidden': true, tabIndex: -1 })\n      : checkbox\n\n    const iconPx = ICON_SIZE[size]\n    const indentPx = depth * INDENT_STEP[size]\n\n    // ── Drag hooks ──\n    // Figma 風格:整列可拖(不用 grip handle),靠 distance:5 區分 click vs drag\n    const { attributes: dragAttrs, listeners: dragListeners, setNodeRef: setDragRef } = useDraggable({\n      id, disabled: !draggable || disabled,\n    })\n    const { setNodeRef: setDropRef } = useDroppable({\n      id, disabled: !draggable || disabled,\n    })\n\n    // ── 找 parent id(from depth context chain)──\n    const parentId = React.useContext(ParentIdContext)\n\n    // ── Register / unregister ──\n    React.useEffect(() => {\n      registerNode(id, parentId, hasChildren, label, Icon)\n      return () => unregisterNode(id)\n    }, [id, parentId, hasChildren, label, Icon, registerNode, unregisterNode])\n\n    // ── Focus scroll into view ──\n    const itemRef = React.useRef<HTMLDivElement>(null)\n    React.useImperativeHandle(ref, () => itemRef.current!)\n\n    React.useEffect(() => {\n      if (isFocused && itemRef.current) {\n        itemRef.current.scrollIntoView({ block: 'nearest' })\n      }\n    }, [isFocused])\n\n    // ── Handlers ──\n    const handleRowClick = React.useCallback(\n      (e: React.MouseEvent<HTMLDivElement>) => {\n        onClick?.(e)\n        if (e.defaultPrevented || disabled) return\n        e.stopPropagation()\n        // Virtual-focus contract:DOM focus 必留在 tree root。先 focus 再設定 clicked id，\n        // 避免 root onFocus 的「初次進入選第一項」初始化覆寫 pointer target。\n        focusTree()\n        setFocusedId(id)\n        select(id)\n        if (expandOnSelect && hasChildren) {\n          toggleExpand(id)\n        }\n      },\n      [id, disabled, onClick, focusTree, select, setFocusedId, expandOnSelect, hasChildren, toggleExpand]\n    )\n\n    const handleChevronClick = React.useCallback(\n      (e: React.MouseEvent) => {\n        e.stopPropagation()\n        if (disabled) return\n        focusTree()\n        setFocusedId(id)\n        toggleExpand(id)\n      },\n      [id, disabled, focusTree, setFocusedId, toggleExpand]\n    )\n\n    // dnd-kit PointerSensor listener 與 consumer DOM callback 必安全 compose：consumer 先收到\n    // event，可用 preventDefault 取消 drag；未取消才執行 internal listener。`...props` 會先\n    // spread，這份 composed map 隨後覆蓋同名 pointer listener，避免任一方被靜默吃掉。\n    const composedDragListeners = dragListeners\n      ? Object.fromEntries(\n          Object.entries(dragListeners).map(([eventName, internalHandler]) => [\n            eventName,\n            (event: React.SyntheticEvent<HTMLElement>) => {\n              const consumerHandler = (props as Record<string, unknown>)[eventName]\n              if (typeof consumerHandler === 'function') {\n                ;(consumerHandler as (event: React.SyntheticEvent<HTMLElement>) => void)(event)\n              }\n              if (!event.defaultPrevented) {\n                ;(internalHandler as (event: React.SyntheticEvent<HTMLElement>) => void)(event)\n              }\n            },\n          ])\n        ) as typeof dragListeners\n      : undefined\n\n    // ── Chevron(永遠存在:expandable = 旋轉箭頭;leaf = placeholder 佔位) ──\n    // 消費 `<ItemPrefix>` SSOT — 永遠 h-[1lh] 對齊 label 第一行中線(item-anatomy 對應)。\n    // forced width 透過 style 鎖 chevron 槽寬,讓 sibling label 起點水平對齊(無 chevron leaf 佔位同寬)。\n    const chevronSlot = (\n      <ItemPrefix style={{ width: iconPx }}>\n        {hasChildren ? (\n          <button\n            type=\"button\"\n            tabIndex={-1}\n            onClick={handleChevronClick}\n            className={cn(\n              'flex items-center justify-center rounded-md',\n              'text-fg-muted hover:text-fg-secondary hover:bg-neutral-hover',\n              'transition-all duration-150 motion-reduce:duration-0',\n              isExpanded && 'rotate-90',\n              disabled && 'text-fg-disabled pointer-events-none',\n            )}\n            style={{ width: iconPx, height: iconPx }}\n            aria-hidden\n          >\n            <ChevronRight size={iconPx} />\n          </button>\n        ) : (\n          // Leaf placeholder\n          <span style={{ width: iconPx }} aria-hidden />\n        )}\n      </ItemPrefix>\n    )\n\n    return (\n      <ParentIdContext.Provider value={id}>\n        <div\n          ref={(node) => {\n            (itemRef as React.MutableRefObject<HTMLDivElement | null>).current = node\n            if (typeof ref === 'function') ref(node)\n            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node\n          }}\n          // DOM id 供容器 aria-activedescendant 指向(virtual focus);與 data-tree-id 並存\n          // (data-tree-id 給內部 querySelector / drag,id 給 AT)。\n          id={`${activeDescendantPrefix}treeitem-${id}`}\n          role=\"treeitem\"\n          aria-expanded={hasChildren ? isExpanded : undefined}\n          aria-selected={selectionMode !== 'none' ? isSelected : undefined}\n          aria-level={depth + 1}\n          aria-disabled={disabled || undefined}\n          // 2026-07-05 D4 修:aria-roledescription 移到 treeitem(有 role 的元素才合法)—\n          // 供 AT 提示此 node 可拖曳;值消費 dnd-kit attributes SSOT(預設 'draggable')。\n          aria-roledescription={draggable && !disabled ? dragAttrs['aria-roledescription'] : undefined}\n          data-tree-id={id}\n          data-tree-parent-id={parentId ?? ''}\n          data-tree-has-children={hasChildren}\n          tabIndex={-1}\n          className={cn('w-full min-w-0 relative', isDragging && dragSourceClass)}\n        >\n          {/* Drop indicator — before:水平 2px primary line(指 SSOT drag-visual.ts);\n              indent 跟隨 depth(left 由 inline style override class 的 left-0)*/}\n          {isDropTarget && dropTarget?.position === 'before' && (\n            <div\n              className={dropIndicatorRow.before}\n              style={{ left: `calc(var(--tree-px) + ${indentPx}px)` }}\n            />\n          )}\n\n          {/* Row: draggable + droppable 都在這一行(合併 ref),確保碰撞偵測只看行高 */}\n          <div\n            {...props}\n            ref={(node) => {\n              // 合併 drag + drop ref 到同一個 element\n              if (draggable) setDragRef(node)\n              setDropRef(node)\n            }}\n            data-tree-row={id}\n            className={cn(\n              'group/tree-item',\n              treeItemVariants({ size }),\n              // 2026-05-26 SSOT lock(user explicit「multi 已有 checkbox 強信號,text 不該再變色」):\n              // ── Single mode ──\n              //   - default text 預設 fg-secondary muted(hierarchy navigation 慣例,跟 Sidebar 一致)\n              //   - selected → text-foreground emphasis + bg-neutral-selected(無 checkbox,需 text+bg 雙信號)\n              // ── Multi mode ──\n              //   - default text 維持 fg-secondary muted(跟 single 對齊 hierarchy)\n              //   - selected → 視覺信號只在 checkbox(auto-render below),text 不變、bg 不變\n              //   - 對齊 SelectMenu multi pattern(menu-item.tsx:194-195 selected → bg only;multi → checkbox only)\n              // multi-selected 也維持 fg-secondary(上方註解「text 不變」;原 !isSelected 條件讓 multi-selected 掉到繼承色)\n              !disabled && (!isSelected || selectionMode === 'multiple') && 'text-fg-secondary',\n              !disabled && isSelected && selectionMode === 'single' && 'text-foreground',\n              isDropTarget && dropTarget?.position === 'inside' && dropIndicatorInside,\n              !disabled && 'hover:bg-neutral-hover hover:text-foreground',\n              // 2026-08-11 修偏移(SSOT = item-anatomy「選中 × 互動疊加」):先前 hover:bg-neutral-hover\n              //(0,2,0)蓋掉無修飾的 bg-neutral-selected(0,1,0)→ 選中列 hover 反而變淺 = bug。\n              // 釘住 hover 不變(twMerge 同組後者勝)+ 鍵盤焦點深一階 -focus。\n              !disabled && isSelected && selectionMode === 'single' && 'bg-neutral-selected hover:bg-neutral-selected focus-visible:bg-neutral-selected-focus',\n              showRing && 'ring-2 ring-ring ring-inset',\n              disabled && 'pointer-events-none text-fg-disabled cursor-default',\n              className,\n            )}\n            style={{\n              ...style,\n              // Structural indent 由 TreeView SSOT 最終擁有，consumer style 不得抹掉。\n              paddingLeft: indentPx > 0\n                ? `calc(var(--tree-px) + ${indentPx}px)`\n                : 'var(--tree-px)',\n              paddingRight: 'var(--tree-px)',\n            }}\n            // 2026-07-05 D4 修:只 spread listeners,不 spread dnd-kit attributes —\n            // useDraggable 預設 attributes 注入 role=\"button\" + tabIndex=0 + aria-pressed +\n            // aria-describedby(鍵盤拖曳指示):role=button 污染 treeitem 語意、tabIndex=0\n            // 讓每 row 變 DOM tab stop 破壞單一 tab stop 虛擬焦點模型(DOM focus 在 row 上按\n            // Enter 會 bubble 到容器 handleKeyDown 但 handler 操作 state focusedId → 錯位);\n            // sensors 僅 PointerSensor(無 KeyboardSensor),這些 attrs 換不到鍵盤拖曳能力;\n            // 鍵盤重排(2026-07-14 v1)走容器 handleKeyDown 的 Cmd/Ctrl+Shift+Arrow 分支,非 dnd-kit sensor。\n            // aria-roledescription 保留在上方 treeitem 元素(有 role 才合法)。\n            {...(draggable ? composedDragListeners : {})}\n            onClick={handleRowClick}\n          >\n            {chevronSlot}\n\n            {/* Checkbox 在 icon 前——消費 `<ItemPrefix>` 對齊第一行\n              * 2026-05-26 SSOT lock(user explicit「多選的方式應該也是要跟 menu 一樣是出現 checkbox」):\n              *   - selectionMode='multiple' + 無 consumer checkbox prop → auto-render `<Checkbox>` reflect selectedIds\n              *     (對齊 SelectMenu multi pattern;consumer 不用手寫 checkbox)\n              *   - selectionMode='multiple' + consumer 傳 checkbox → 用 consumer 的(parent-child cascade 等 advanced)\n              *   - selectionMode='single' / 'none' → 不 render checkbox(text-foreground + bg 雙信號表 selected)\n              * 對齊 cite:menu-item.tsx:194-195(MenuItem selected bg)+ select-menu.tsx:352-354(SelectMenu multi=checkbox) */}\n            {(checkbox || selectionMode === 'multiple') && (\n              <ItemPrefix className=\"pointer-events-none\">\n                {/* 2026-07-05 D4 修:auto-render Checkbox 補 tabIndex={-1} — Radix Checkbox root\n                  * 是原生 button(預設可聚焦),aria-hidden + 可聚焦 = axe aria-hidden-focus,且\n                  * 破壞 tree 單一 tab stop 虛擬焦點模型(tree-view.spec.md「Focus」段);\n                  * ItemPrefix pointer-events-none 只擋滑鼠不擋鍵盤。選取語意由 treeitem\n                  * aria-selected 承載,checkbox 純視覺反映。 */}\n                {visualCheckbox || <Checkbox checked={isSelected} disabled={disabled} aria-hidden=\"true\" tabIndex={-1} />}\n              </ItemPrefix>\n            )}\n\n            {/* indicator 取代 icon 的位置;h-[1lh] 對齊第一行\n                indicator 是 escape hatch(stepper status dot 等客製內容),消費 `<ItemPrefix>` 鎖 chevron 槽寬;\n                Icon 走 canonical `<ItemIcon>` helper——自動標 data-prefix-type=\"icon\",\n                讓 SidebarProvider 的全域 :has() prefix-mix 偵測能命中。 */}\n            {indicator ? (\n              <ItemPrefix style={{ width: iconPx }}>\n                {indicator}\n              </ItemPrefix>\n            ) : Icon ? (\n              <ItemIcon icon={Icon} className={disabled ? 'text-fg-disabled' : undefined} />\n            ) : null}\n\n            <span className={cn('flex-1 min-w-0 truncate', disabled && 'text-fg-disabled')}>\n              {label}\n            </span>\n\n            {/* Suffix inline actions——宣告式 API,用 `<ItemInlineAction>` 渲染。\n                消費 `<ItemSuffix hoverReveal hoverGroup=\"tree-item\">` SSOT(2026-05-05 v8 group selector 參數化後)。\n                actionsReveal=\"hover\"(預設):row hover 或 keyboard focus-visible 才顯示;\n                actionsReveal=false:常駐顯示。跟 SidebarMenuButton 共用同一條規則,行為一致。\n                inlineActionsSlot escape hatch 優先(consumer 自控 JSX,reveal 一樣套外層 group)。 */}\n            {/* 2026-06-12 R2(同 sidebar.tsx 修):宿主 disabled 時 render 層擋 inline actions —\n                inline-action.spec.md「宿主 disabled | 不渲染」;row pointer-events 蓋不住\n                actionsReveal=false 常駐顯示的視覺暗示,必須 render 層 guard。 */}\n            {disabled ? null : inlineActionsSlot ? (\n              <ItemSuffix hoverReveal={actionsReveal === 'hover'} hoverGroup=\"tree-item\">\n                {inlineActionsSlot}\n              </ItemSuffix>\n            ) : inlineActions && inlineActions.length > 0 ? (\n              <ItemSuffix hoverReveal={actionsReveal === 'hover'} hoverGroup=\"tree-item\">\n                {inlineActions.map((action, i) => (\n                  <ItemInlineAction key={action.label + i} action={action} />\n                ))}\n              </ItemSuffix>\n            ) : null}\n          </div>\n\n          {/* Drop indicator — after:同 before mirror 到 bottom edge(SSOT drag-visual.ts)*/}\n          {isDropTarget && dropTarget?.position === 'after' && (\n            <div\n              className={dropIndicatorRow.after}\n              style={{ left: `calc(var(--tree-px) + ${indentPx}px)` }}\n            />\n          )}\n\n          {/* Children: Collapsible 展開/收合 */}\n          {hasChildren && (\n            <CollapsiblePrimitive.Root open={isExpanded}>\n              <CollapsiblePrimitive.Content\n                className=\"overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down motion-reduce:animate-none\"\n              >\n                <DepthContext.Provider value={depth + 1}>\n                  <div role=\"group\" className=\"flex flex-col w-full\">\n                    {children}\n                  </div>\n                </DepthContext.Provider>\n              </CollapsiblePrimitive.Content>\n            </CollapsiblePrimitive.Root>\n          )}\n        </div>\n      </ParentIdContext.Provider>\n    )\n  }\n)\nTreeItem.displayName = 'TreeItem'\n\n// Parent ID context for keyboard navigation (← to parent)\nconst ParentIdContext = React.createContext<string | null>(null)\n\n// ═══════════════════════════════════════════════════════════════════════════\n// Exports\n// ═══════════════════════════════════════════════════════════════════════════\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const treeViewMeta = {\n  component: 'TreeView',\n  family: 1, // Family 1(Menu item layout)消費者 — 對齊 tree-view.spec.md frontmatter family: 1\n  variants: {\n\n  },\n  sizes: {\n    // 對齊 tree-view.spec.md frontmatter(compile-stories --check 驗 key 一致)\n    sm: { typography: 'body', indent: 24 },\n    md: { typography: 'body', indent: 24 }, // default\n    lg: { typography: 'body-lg', indent: 28 },\n  },\n  // 'selected' = single-selection 持續選中(bg-neutral-selected + aria-selected);'active' 移除 —\n  // 全檔無 Tailwind 按壓 utility,無按壓專屬視覺態(2026-07-07 詞彙統一對抗稽核補修)。\n  states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-neutral-selected', 'bg-surface'],\n    fg: ['text-fg-disabled', 'text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['ring-ring'],\n  },\n  defaultSize: 'md',\n} as const\n\nexport { TreeView, TreeItem, treeItemVariants }\n"],"names":["treeEl"],"mappings":"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"}

package/dist/hooks/use-controllable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-controllable.d.ts","sourceRoot":"","sources":["../../src/hooks/use-controllable.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAK,EACL,YAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,CAAC,CAAA;IACT,YAAY,EAAE,CAAC,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC7B,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAmB5C"}
+{"version":3,"file":"use-controllable.d.ts","sourceRoot":"","sources":["../../src/hooks/use-controllable.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,KAAK,EACL,YAAY,EACZ,QAAQ,GACT,EAAE;IACD,KAAK,CAAC,EAAE,CAAC,CAAA;IACT,YAAY,EAAE,CAAC,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;CAC7B,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAwB5C"}

package/dist/hooks/use-controllable.js

@@ -9,14 +9,16 @@ function useControllable({
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   const current = isControlled ? value : internal;
+  const currentRef = useRef(current);
+  currentRef.current = current;
   const setValue = useCallback(
     (next) => {
       var _a;
-      const computed = typeof next === "function" ? next(current) : next;
+      const computed = typeof next === "function" ? next(currentRef.current) : next;
       if (!isControlled) setInternal(computed);
       (_a = onChangeRef.current) == null ? void 0 : _a.call(onChangeRef, computed);
     },
-    [isControlled, current]
+    [isControlled]
   );
   return [current, setValue];
 }

package/dist/hooks/use-controllable.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-controllable.js","sources":["../../src/hooks/use-controllable.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react'\n\n/**\n * Controlled / Uncontrolled dual-mode state hook。\n *\n * 對齊 Radix `useControllableState` 慣例:\n * - 提供 `value` → controlled,setter 純 callback,內部不存 state\n * - 不提供 `value`(or undefined)→ uncontrolled,內部 state + callback 同步\n *\n * 使用情境:Field / Switch / Checkbox / DataTable selection / DropdownMenu open 等\n * 雙模式 prop。\n */\nexport function useControllable<T>({\n  value,\n  defaultValue,\n  onChange,\n}: {\n  value?: T\n  defaultValue: T\n  onChange?: (next: T) => void\n}): [T, (next: T | ((prev: T) => T)) => void] {\n  const isControlled = value !== undefined\n  const [internal, setInternal] = useState<T>(defaultValue)\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n\n  const current = isControlled ? (value as T) : internal\n\n  const setValue = useCallback(\n    (next: T | ((prev: T) => T)) => {\n      const computed =\n        typeof next === 'function' ? (next as (prev: T) => T)(current) : next\n      if (!isControlled) setInternal(computed)\n      onChangeRef.current?.(computed)\n    },\n    [isControlled, current]\n  )\n\n  return [current, setValue]\n}\n"],"names":[],"mappings":";AAYO,SAAS,gBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,GAI8C;AAC5C,QAAM,eAAe,UAAU;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAY,YAAY;AACxD,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AAEtB,QAAM,UAAU,eAAgB,QAAc;AAE9C,QAAM,WAAW;AAAA,IACf,CAAC,SAA+B;;AAC9B,YAAM,WACJ,OAAO,SAAS,aAAc,KAAwB,OAAO,IAAI;AACnE,UAAI,CAAC,aAAc,aAAY,QAAQ;AACvC,wBAAY,YAAZ,qCAAsB;AAAA,IACxB;AAAA,IACA,CAAC,cAAc,OAAO;AAAA,EAAA;AAGxB,SAAO,CAAC,SAAS,QAAQ;AAC3B;"}
+{"version":3,"file":"use-controllable.js","sources":["../../src/hooks/use-controllable.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react'\n\n/**\n * Controlled / Uncontrolled dual-mode state hook。\n *\n * 對齊 Radix `useControllableState` 慣例:\n * - 提供 `value` → controlled,setter 純 callback,內部不存 state\n * - 不提供 `value`(or undefined)→ uncontrolled,內部 state + callback 同步\n *\n * 使用情境:Field / Switch / Checkbox / DataTable selection / DropdownMenu open 等\n * 雙模式 prop。\n */\nexport function useControllable<T>({\n  value,\n  defaultValue,\n  onChange,\n}: {\n  value?: T\n  defaultValue: T\n  onChange?: (next: T) => void\n}): [T, (next: T | ((prev: T) => T)) => void] {\n  const isControlled = value !== undefined\n  const [internal, setInternal] = useState<T>(defaultValue)\n  const onChangeRef = useRef(onChange)\n  onChangeRef.current = onChange\n\n  const current = isControlled ? (value as T) : internal\n  // 2026-07-07 C14:setter identity 穩定化——原 deps 含 `current`,值一變 setter 就換 identity\n  // (consumer 放 useEffect deps / useCallback 鏈會白重跑)。對齊 Radix useControllableState:\n  // current 走 ref、setter 只依 isControlled,行為 Δ=0(functional updater 讀最近 render 值,同 Radix)。\n  const currentRef = useRef(current)\n  currentRef.current = current\n\n  const setValue = useCallback(\n    (next: T | ((prev: T) => T)) => {\n      const computed =\n        typeof next === 'function' ? (next as (prev: T) => T)(currentRef.current) : next\n      if (!isControlled) setInternal(computed)\n      onChangeRef.current?.(computed)\n    },\n    [isControlled]\n  )\n\n  return [current, setValue]\n}\n"],"names":[],"mappings":";AAYO,SAAS,gBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACF,GAI8C;AAC5C,QAAM,eAAe,UAAU;AAC/B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAY,YAAY;AACxD,QAAM,cAAc,OAAO,QAAQ;AACnC,cAAY,UAAU;AAEtB,QAAM,UAAU,eAAgB,QAAc;AAI9C,QAAM,aAAa,OAAO,OAAO;AACjC,aAAW,UAAU;AAErB,QAAM,WAAW;AAAA,IACf,CAAC,SAA+B;;AAC9B,YAAM,WACJ,OAAO,SAAS,aAAc,KAAwB,WAAW,OAAO,IAAI;AAC9E,UAAI,CAAC,aAAc,aAAY,QAAQ;AACvC,wBAAY,YAAZ,qCAAsB;AAAA,IACxB;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGf,SAAO,CAAC,SAAS,QAAQ;AAC3B;"}

package/dist/hooks/use-is-touch-device.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-is-touch-device.d.ts","sourceRoot":"","sources":["../../src/hooks/use-is-touch-device.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,gBAAgB,YAY/B"}
+{"version":3,"file":"use-is-touch-device.d.ts","sourceRoot":"","sources":["../../src/hooks/use-is-touch-device.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,gBAAgB,YAmB/B"}

package/dist/hooks/use-is-touch-device.js

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 function useIsTouchDevice() {
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window !== "undefined" && window.matchMedia("(pointer: coarse)").matches
+  );
   useEffect(() => {
     const mq = window.matchMedia("(pointer: coarse)");
     setIsMobile(mq.matches);

package/dist/hooks/use-is-touch-device.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-is-touch-device.js","sources":["../../src/hooks/use-is-touch-device.ts"],"sourcesContent":["import { useState, useEffect } from 'react'\n\n/**\n * useIsMobile — 偵測觸控裝置（mobile / tablet）\n *\n * 使用 `pointer: coarse` media query，正確區分觸控 vs 精確指標裝置。\n * 用途：Select 等元件在 mobile 退回原生 picker。\n */\nexport function useIsTouchDevice() {\n  const [isMobile, setIsMobile] = useState(false)\n\n  useEffect(() => {\n    const mq = window.matchMedia('(pointer: coarse)')\n    setIsMobile(mq.matches)\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [])\n\n  return isMobile\n}\n"],"names":[],"mappings":";AAQO,SAAS,mBAAmB;AACjC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAE9C,YAAU,MAAM;AACd,UAAM,KAAK,OAAO,WAAW,mBAAmB;AAChD,gBAAY,GAAG,OAAO;AACtB,UAAM,UAAU,CAAC,MAA2B,YAAY,EAAE,OAAO;AACjE,OAAG,iBAAiB,UAAU,OAAO;AACrC,WAAO,MAAM,GAAG,oBAAoB,UAAU,OAAO;AAAA,EACvD,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}
+{"version":3,"file":"use-is-touch-device.js","sources":["../../src/hooks/use-is-touch-device.ts"],"sourcesContent":["import { useState, useEffect } from 'react'\n\n/**\n * useIsMobile — 偵測觸控裝置（mobile / tablet）\n *\n * 使用 `pointer: coarse` media query，正確區分觸控 vs 精確指標裝置。\n * 用途：Select 等元件在 mobile 退回原生 picker。\n */\nexport function useIsTouchDevice() {\n  // 2026-07-06 D3 perf 修:初值固定 false 讓觸控裝置首次 commit 先掛 desktop 分支\n  // (CustomSelect/CustomCombobox trigger subtree),effect flip true 後整棵 unmount 換 Native\n  // → 每 instance 白付一次 double-mount。改 lazy initializer 同步讀 matchMedia,\n  // 首次 render 即正確分支;effect 保留 change listener(行為不變)。\n  const [isMobile, setIsMobile] = useState(\n    () => typeof window !== 'undefined' && window.matchMedia('(pointer: coarse)').matches,\n  )\n\n  useEffect(() => {\n    const mq = window.matchMedia('(pointer: coarse)')\n    // 同步一次防 initializer 與 effect 之間 mq 變化(同值時 React Object.is bail-out,無多餘 render)\n    setIsMobile(mq.matches)\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [])\n\n  return isMobile\n}\n"],"names":[],"mappings":";AAQO,SAAS,mBAAmB;AAKjC,QAAM,CAAC,UAAU,WAAW,IAAI;AAAA,IAC9B,MAAM,OAAO,WAAW,eAAe,OAAO,WAAW,mBAAmB,EAAE;AAAA,EAAA;AAGhF,YAAU,MAAM;AACd,UAAM,KAAK,OAAO,WAAW,mBAAmB;AAEhD,gBAAY,GAAG,OAAO;AACtB,UAAM,UAAU,CAAC,MAA2B,YAAY,EAAE,OAAO;AACjE,OAAG,iBAAiB,UAAU,OAAO;AACrC,WAAO,MAAM,GAAG,oBAAoB,UAAU,OAAO;AAAA,EACvD,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}

package/dist/hooks/use-overflow-items.d.ts

@@ -10,12 +10,16 @@ import * as React from 'react';
  *      使用 `useScrollEdges()`：回傳 atStart / atEnd / canScroll，讓消費端
  *      決定 mask-image / scroll arrow 的顯示。
  *
- *   2. **Menu 模式**（Ant Design / Atlassian 作法）
- *      塞不下的 items 收進 DropdownMenu。**所有 items 都渲染在 DOM 中**
- *      （只視覺隱藏溢出的）以保留 Radix 的 roving tabindex / roving focus 等
- *      a11y 語意。使用 `useOverflowIndices()`：回傳 overflowIndices
- *      供消費端渲染對應的 menu items（通常是 click proxy，觸發同一個
- *      onValueChange）。
+ *   2. **Menu 模式**（Ant Design / Atlassian「動態 collapse-overflow」作法）
+ *      塞不下的 items 收進 DropdownMenu。`useOverflowIndices()` 回傳 overflowIndices
+ *      供消費端動態計算哪些 items 塞不下、渲染對應的 menu items。
+ *
+ *      ⚠️ **目前 0 consumer（reserved primitive）**：DS 內現有 menu 模式實作（Tabs / Chip）走的是
+ *      「**show-all navigator**」派 — dropdown 永遠列**全部** items（不需動態 overflow 計算），各自用
+ *      local registerItem，**刻意不用** `useOverflowIndices`（見 tabs.tsx:256 / chip.tsx:219 註解）。
+ *      本 hook 保留給未來真正需要「collapse-overflow：只把塞不下的收進選單」的 consumer。
+ *      **roving tabindex / a11y 語意由 consumer 的渲染方式決定**（hook 只回傳 indices，不操作
+ *      DOM / tabindex），非 hook 本身保證。
  *
  * ── 為什麼分兩個 hook，不合一 ──
  *   Scroll 的計算依據是 scroll 事件與 client/scroll width；Menu 的計算依據是

package/dist/hooks/use-overflow-items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-overflow-items.d.ts","sourceRoot":"","sources":["../../src/hooks/use-overflow-items.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAOH,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,WAAW;IACzD,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IAC7B,0BAA0B;IAC1B,OAAO,EAAE,OAAO,CAAA;IAChB,0BAA0B;IAC1B,KAAK,EAAE,OAAO,CAAA;IACd,wBAAwB;IACxB,SAAS,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,KAAK,oBAAoB,CAAC,CAAC,CAAC,CAmC7F;AAMD,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B;AAGD,MAAM,WAAW,wBAAwB,CAAC,CAAC,SAAS,WAAW;IAC7D,qBAAqB;IACrB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IAChC,sCAAsC;IACtC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACjE,4CAA4C;IAC5C,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,oBAAoB;IACpB,WAAW,EAAE,OAAO,CAAA;IACpB,wDAAwD;IACxD,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAA;CACtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACpE,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CAAC,CAAC,CAAC,CAgF7B"}
+{"version":3,"file":"use-overflow-items.d.ts","sourceRoot":"","sources":["../../src/hooks/use-overflow-items.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAOH,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,WAAW;IACzD,iCAAiC;IACjC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IAC7B,0BAA0B;IAC1B,OAAO,EAAE,OAAO,CAAA;IAChB,0BAA0B;IAC1B,KAAK,EAAE,OAAO,CAAA;IACd,wBAAwB;IACxB,SAAS,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,KAAK,oBAAoB,CAAC,CAAC,CAAC,CAmC7F;AAMD,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B;AAGD,MAAM,WAAW,wBAAwB,CAAC,CAAC,SAAS,WAAW;IAC7D,qBAAqB;IACrB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAA;IAChC,sCAAsC;IACtC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACjE,4CAA4C;IAC5C,eAAe,EAAE,MAAM,EAAE,CAAA;IACzB,oBAAoB;IACpB,WAAW,EAAE,OAAO,CAAA;IACpB,wDAAwD;IACxD,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,WAAW,GAAG,SAAS,CAAA;CACtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACpE,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CAAC,CAAC,CAAC,CAgF7B"}

package/dist/hooks/use-overflow-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-overflow-items.js","sources":["../../src/hooks/use-overflow-items.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * 水平溢出追蹤 hooks — 給 Tabs / ChipGroup 等「一排水平 items 塞不下父容器」的元件共用。\n *\n * ── 設計原則 ──\n *   Scroll 模式與 Menu 模式是兩種處理策略：\n *\n *   1. **Scroll 模式**（Material / Polaris / Primer / iOS 作法）\n *      items 用原生 overflow-x-auto 水平滾動，邊緣 fade mask 指示還有內容。\n *      使用 `useScrollEdges()`：回傳 atStart / atEnd / canScroll，讓消費端\n *      決定 mask-image / scroll arrow 的顯示。\n *\n *   2. **Menu 模式**（Ant Design / Atlassian 作法）\n *      塞不下的 items 收進 DropdownMenu。**所有 items 都渲染在 DOM 中**\n *      （只視覺隱藏溢出的）以保留 Radix 的 roving tabindex / roving focus 等\n *      a11y 語意。使用 `useOverflowIndices()`：回傳 overflowIndices\n *      供消費端渲染對應的 menu items（通常是 click proxy，觸發同一個\n *      onValueChange）。\n *\n * ── 為什麼分兩個 hook，不合一 ──\n *   Scroll 的計算依據是 scroll 事件與 client/scroll width；Menu 的計算依據是\n *   items 的 offsetLeft/offsetWidth 相對容器 clientWidth。訂閱的事件不同\n *   （scroll vs resize），回傳的資料形狀不同。合一會讓 API 有一半是 noise。\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// useScrollEdges — 給 scroll 模式\n// ─────────────────────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — hook return type — API surface for consumers who want to annotate\nexport interface UseScrollEdgesResult<T extends HTMLElement> {\n  /** 綁在 scroll container 上的 ref */\n  scrollRef: React.RefObject<T>\n  /** scroll 位置在最左側（無法再往左）*/\n  atStart: boolean\n  /** scroll 位置在最右側（無法再往右）*/\n  atEnd: boolean\n  /** 內容總寬度超過可視寬度，有滾動空間 */\n  canScroll: boolean\n}\n\n/**\n * 追蹤 scroll container 的滾動位置，用來決定左右 fade mask 是否顯示。\n *\n * 典型用法：\n * ```tsx\n * const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges<HTMLDivElement>()\n * const maskImage = canScroll\n *   ? `linear-gradient(to right,\n *       ${atStart ? 'black' : 'transparent'} 0,\n *       black 16px,\n *       black calc(100% - 16px),\n *       ${atEnd ? 'black' : 'transparent'} 100%)`\n *   : undefined\n * return <div ref={scrollRef} className=\"overflow-x-auto\" style={{ maskImage, WebkitMaskImage: maskImage }}>\n *   {items}\n * </div>\n * ```\n */\nexport function useScrollEdges<T extends HTMLElement = HTMLElement>(): UseScrollEdgesResult<T> {\n  const scrollRef = React.useRef<T | null>(null)\n  const [state, setState] = React.useState({ atStart: true, atEnd: true, canScroll: false })\n\n  React.useEffect(() => {\n    const el = scrollRef.current\n    if (!el) return\n\n    const update = () => {\n      const canScroll = el.scrollWidth > el.clientWidth + 1\n      const atStart = el.scrollLeft <= 0\n      const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1\n      setState((prev) =>\n        prev.atStart === atStart && prev.atEnd === atEnd && prev.canScroll === canScroll\n          ? prev\n          : { atStart, atEnd, canScroll }\n      )\n    }\n\n    update()\n    el.addEventListener('scroll', update, { passive: true })\n    const ro = new ResizeObserver(update)\n    ro.observe(el)\n    // 監聽 children 變化（items 增減、字體載入）\n    const mo = new MutationObserver(update)\n    mo.observe(el, { childList: true, subtree: true, characterData: true })\n\n    return () => {\n      el.removeEventListener('scroll', update)\n      ro.disconnect()\n      mo.disconnect()\n    }\n  }, [])\n\n  return { scrollRef, ...state }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// useOverflowIndices — 給 menu 模式\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface UseOverflowIndicesOptions {\n  /**\n   * 預留給 overflow trigger（如 \"More\" 按鈕）的右側寬度（px）。\n   * 計算 items 是否溢出時會從 container clientWidth 扣掉這個值。\n   */\n  reserveTriggerWidth?: number\n}\n\n// code-quality-allow: dead-export — hook return type — API surface for consumers who want to annotate\nexport interface UseOverflowIndicesResult<C extends HTMLElement> {\n  /** 綁在 items 的父容器上 */\n  containerRef: React.RefObject<C>\n  /** 為每個 item 註冊 ref（回傳 callback ref）*/\n  registerItem: (index: number) => (el: HTMLElement | null) => void\n  /** DOM 順序上溢出的 item 索引（連續區間，從某個 index 到尾端）*/\n  overflowIndices: number[]\n  /** 至少有一個 item 溢出 */\n  hasOverflow: boolean\n  /** 依 index 取得對應 item 的 DOM 元素，供 scrollIntoView 等操作使用 */\n  getItemAt: (index: number) => HTMLElement | undefined\n}\n\n/**\n * 追蹤一排水平 items 裡哪些「當前不在可視範圍內」。\n *\n * ── 演算法 ──\n *   對每個 item 檢查 `[offsetLeft, offsetLeft+offsetWidth]` 是否完全落在\n *   `[scrollLeft, scrollLeft + clientWidth - reserveTriggerWidth]` 範圍內。\n *   沒完全落在內的就算溢出。\n *\n *   **關鍵**：overflow 集合跟 scrollLeft 連動,不是靜態「原始佈局不 fit」集合。\n *   這是 Ant Design / Atlassian 世界級作法 —— menu 顯示「當下看不到的 items」,\n *   不是「原始溢出的 items」。\n *\n *   為什麼這樣對:\n *   - 使用者點 menu item → `scrollIntoView` → 原本 overflow 的 item 進入視圖,\n *     原本可見的 items 被推出去 → 下次開 menu 看到的是「剛被推出去的 items」,\n *     永遠能找到所有當前看不到的 items,不會卡住。\n *   - 靜態 overflow (只算原始佈局) 會造成 scroll 後無法回到前面的 items。\n *\n * ── 觸發重算 ──\n *   - ResizeObserver: 容器寬度變化 / item 尺寸變化\n *   - scroll event: scroll 位置變化\n *\n * ── 前提 ──\n *   items 在 DOM 裡始終存在 (不可 conditional render),並用 `registerItem(i)` 綁 ref。\n *   容器要可以 scroll (overflow-x-auto 或類似),否則 scrollLeft 永遠 0。\n *\n * 典型用法:\n * ```tsx\n * const { containerRef, registerItem, overflowIndices, hasOverflow, getItemAt } =\n *   useOverflowIndices<HTMLDivElement>({ reserveTriggerWidth: 0 })\n *\n * const handleMenuSelect = (value: string, index: number) => {\n *   onValueChange?.(value)\n *   requestAnimationFrame(() => {\n *     getItemAt(index)?.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n *   })\n * }\n *\n * return (\n *   <div className=\"flex items-center\">\n *     <div ref={containerRef} className=\"flex-1 min-w-0 overflow-x-auto\">\n *       <ItemList>\n *         {items.map((item, i) => React.cloneElement(item, { ref: registerItem(i) }))}\n *       </ItemList>\n *     </div>\n *     {hasOverflow && <OverflowMenu items={overflowIndices.map(i => items[i])} />}\n *   </div>\n * )\n * ```\n */\nexport function useOverflowIndices<C extends HTMLElement = HTMLElement>(\n  options: UseOverflowIndicesOptions = {}\n): UseOverflowIndicesResult<C> {\n  const { reserveTriggerWidth = 0 } = options\n  const containerRef = React.useRef<C | null>(null)\n  const itemRefsMap = React.useRef<Map<number, HTMLElement>>(new Map())\n  const [overflowIndices, setOverflowIndices] = React.useState<number[]>([])\n\n  const registerItem = React.useCallback((index: number) => {\n    return (el: HTMLElement | null) => {\n      if (el) {\n        itemRefsMap.current.set(index, el)\n      } else {\n        itemRefsMap.current.delete(index)\n      }\n    }\n  }, [])\n\n  React.useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const compute = () => {\n      const containerWidth = container.clientWidth\n      if (containerWidth === 0) return\n\n      const scrollLeft = container.scrollLeft\n      const visibleStart = scrollLeft\n      const visibleEnd = scrollLeft + containerWidth - reserveTriggerWidth\n\n      // 容許 1px 的像素取整誤差,避免邊界 item 被誤判為 overflow\n      const tolerance = 1\n\n      const indices = Array.from(itemRefsMap.current.keys()).sort((a, b) => a - b)\n\n      const overflow: number[] = []\n      for (const i of indices) {\n        const el = itemRefsMap.current.get(i)\n        if (!el) continue\n\n        const left = el.offsetLeft\n        const right = left + el.offsetWidth\n        // 完全可見條件: item 的左右邊都在可視窗口內\n        const fullyVisible =\n          left >= visibleStart - tolerance && right <= visibleEnd + tolerance\n        if (!fullyVisible) overflow.push(i)\n      }\n\n      setOverflowIndices((prev) => {\n        if (prev.length === overflow.length && prev.every((v, i) => v === overflow[i])) {\n          return prev\n        }\n        return overflow\n      })\n    }\n\n    compute()\n    const ro = new ResizeObserver(compute)\n    ro.observe(container)\n    // 也觀察每個 item 的尺寸變化（字體載入、label 更新等）\n    itemRefsMap.current.forEach((el) => ro.observe(el))\n    // Scroll event: overflow 集合隨 scroll 位置變化\n    container.addEventListener('scroll', compute, { passive: true })\n\n    return () => {\n      ro.disconnect()\n      container.removeEventListener('scroll', compute)\n    }\n  }, [reserveTriggerWidth])\n\n  const getItemAt = React.useCallback(\n    (index: number) => itemRefsMap.current.get(index),\n    []\n  )\n\n  return {\n    containerRef,\n    registerItem,\n    overflowIndices,\n    hasOverflow: overflowIndices.length > 0,\n    getItemAt,\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-overflow-items.js","sources":["../../src/hooks/use-overflow-items.ts"],"sourcesContent":["import * as React from 'react'\n\n/**\n * 水平溢出追蹤 hooks — 給 Tabs / ChipGroup 等「一排水平 items 塞不下父容器」的元件共用。\n *\n * ── 設計原則 ──\n *   Scroll 模式與 Menu 模式是兩種處理策略：\n *\n *   1. **Scroll 模式**（Material / Polaris / Primer / iOS 作法）\n *      items 用原生 overflow-x-auto 水平滾動，邊緣 fade mask 指示還有內容。\n *      使用 `useScrollEdges()`：回傳 atStart / atEnd / canScroll，讓消費端\n *      決定 mask-image / scroll arrow 的顯示。\n *\n *   2. **Menu 模式**（Ant Design / Atlassian「動態 collapse-overflow」作法）\n *      塞不下的 items 收進 DropdownMenu。`useOverflowIndices()` 回傳 overflowIndices\n *      供消費端動態計算哪些 items 塞不下、渲染對應的 menu items。\n *\n *      ⚠️ **目前 0 consumer（reserved primitive）**：DS 內現有 menu 模式實作（Tabs / Chip）走的是\n *      「**show-all navigator**」派 — dropdown 永遠列**全部** items（不需動態 overflow 計算），各自用\n *      local registerItem，**刻意不用** `useOverflowIndices`（見 tabs.tsx:256 / chip.tsx:219 註解）。\n *      本 hook 保留給未來真正需要「collapse-overflow：只把塞不下的收進選單」的 consumer。\n *      **roving tabindex / a11y 語意由 consumer 的渲染方式決定**（hook 只回傳 indices，不操作\n *      DOM / tabindex），非 hook 本身保證。\n *\n * ── 為什麼分兩個 hook，不合一 ──\n *   Scroll 的計算依據是 scroll 事件與 client/scroll width；Menu 的計算依據是\n *   items 的 offsetLeft/offsetWidth 相對容器 clientWidth。訂閱的事件不同\n *   （scroll vs resize），回傳的資料形狀不同。合一會讓 API 有一半是 noise。\n */\n\n// ─────────────────────────────────────────────────────────────────────────────\n// useScrollEdges — 給 scroll 模式\n// ─────────────────────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — hook return type — API surface for consumers who want to annotate\nexport interface UseScrollEdgesResult<T extends HTMLElement> {\n  /** 綁在 scroll container 上的 ref */\n  scrollRef: React.RefObject<T>\n  /** scroll 位置在最左側（無法再往左）*/\n  atStart: boolean\n  /** scroll 位置在最右側（無法再往右）*/\n  atEnd: boolean\n  /** 內容總寬度超過可視寬度，有滾動空間 */\n  canScroll: boolean\n}\n\n/**\n * 追蹤 scroll container 的滾動位置，用來決定左右 fade mask 是否顯示。\n *\n * 典型用法：\n * ```tsx\n * const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges<HTMLDivElement>()\n * const maskImage = canScroll\n *   ? `linear-gradient(to right,\n *       ${atStart ? 'black' : 'transparent'} 0,\n *       black 16px,\n *       black calc(100% - 16px),\n *       ${atEnd ? 'black' : 'transparent'} 100%)`\n *   : undefined\n * return <div ref={scrollRef} className=\"overflow-x-auto\" style={{ maskImage, WebkitMaskImage: maskImage }}>\n *   {items}\n * </div>\n * ```\n */\nexport function useScrollEdges<T extends HTMLElement = HTMLElement>(): UseScrollEdgesResult<T> {\n  const scrollRef = React.useRef<T | null>(null)\n  const [state, setState] = React.useState({ atStart: true, atEnd: true, canScroll: false })\n\n  React.useEffect(() => {\n    const el = scrollRef.current\n    if (!el) return\n\n    const update = () => {\n      const canScroll = el.scrollWidth > el.clientWidth + 1\n      const atStart = el.scrollLeft <= 0\n      const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1\n      setState((prev) =>\n        prev.atStart === atStart && prev.atEnd === atEnd && prev.canScroll === canScroll\n          ? prev\n          : { atStart, atEnd, canScroll }\n      )\n    }\n\n    update()\n    el.addEventListener('scroll', update, { passive: true })\n    const ro = new ResizeObserver(update)\n    ro.observe(el)\n    // 監聽 children 變化（items 增減、字體載入）\n    const mo = new MutationObserver(update)\n    mo.observe(el, { childList: true, subtree: true, characterData: true })\n\n    return () => {\n      el.removeEventListener('scroll', update)\n      ro.disconnect()\n      mo.disconnect()\n    }\n  }, [])\n\n  return { scrollRef, ...state }\n}\n\n// ─────────────────────────────────────────────────────────────────────────────\n// useOverflowIndices — 給 menu 模式\n// ─────────────────────────────────────────────────────────────────────────────\n\nexport interface UseOverflowIndicesOptions {\n  /**\n   * 預留給 overflow trigger（如 \"More\" 按鈕）的右側寬度（px）。\n   * 計算 items 是否溢出時會從 container clientWidth 扣掉這個值。\n   */\n  reserveTriggerWidth?: number\n}\n\n// code-quality-allow: dead-export — hook return type — API surface for consumers who want to annotate\nexport interface UseOverflowIndicesResult<C extends HTMLElement> {\n  /** 綁在 items 的父容器上 */\n  containerRef: React.RefObject<C>\n  /** 為每個 item 註冊 ref（回傳 callback ref）*/\n  registerItem: (index: number) => (el: HTMLElement | null) => void\n  /** DOM 順序上溢出的 item 索引（連續區間，從某個 index 到尾端）*/\n  overflowIndices: number[]\n  /** 至少有一個 item 溢出 */\n  hasOverflow: boolean\n  /** 依 index 取得對應 item 的 DOM 元素，供 scrollIntoView 等操作使用 */\n  getItemAt: (index: number) => HTMLElement | undefined\n}\n\n/**\n * 追蹤一排水平 items 裡哪些「當前不在可視範圍內」。\n *\n * ── 演算法 ──\n *   對每個 item 檢查 `[offsetLeft, offsetLeft+offsetWidth]` 是否完全落在\n *   `[scrollLeft, scrollLeft + clientWidth - reserveTriggerWidth]` 範圍內。\n *   沒完全落在內的就算溢出。\n *\n *   **關鍵**：overflow 集合跟 scrollLeft 連動,不是靜態「原始佈局不 fit」集合。\n *   這是 Ant Design / Atlassian 世界級作法 —— menu 顯示「當下看不到的 items」,\n *   不是「原始溢出的 items」。\n *\n *   為什麼這樣對:\n *   - 使用者點 menu item → `scrollIntoView` → 原本 overflow 的 item 進入視圖,\n *     原本可見的 items 被推出去 → 下次開 menu 看到的是「剛被推出去的 items」,\n *     永遠能找到所有當前看不到的 items,不會卡住。\n *   - 靜態 overflow (只算原始佈局) 會造成 scroll 後無法回到前面的 items。\n *\n * ── 觸發重算 ──\n *   - ResizeObserver: 容器寬度變化 / item 尺寸變化\n *   - scroll event: scroll 位置變化\n *\n * ── 前提 ──\n *   items 在 DOM 裡始終存在 (不可 conditional render),並用 `registerItem(i)` 綁 ref。\n *   容器要可以 scroll (overflow-x-auto 或類似),否則 scrollLeft 永遠 0。\n *\n * 典型用法:\n * ```tsx\n * const { containerRef, registerItem, overflowIndices, hasOverflow, getItemAt } =\n *   useOverflowIndices<HTMLDivElement>({ reserveTriggerWidth: 0 })\n *\n * const handleMenuSelect = (value: string, index: number) => {\n *   onValueChange?.(value)\n *   requestAnimationFrame(() => {\n *     getItemAt(index)?.scrollIntoView({ behavior: 'smooth', inline: 'center' })\n *   })\n * }\n *\n * return (\n *   <div className=\"flex items-center\">\n *     <div ref={containerRef} className=\"flex-1 min-w-0 overflow-x-auto\">\n *       <ItemList>\n *         {items.map((item, i) => React.cloneElement(item, { ref: registerItem(i) }))}\n *       </ItemList>\n *     </div>\n *     {hasOverflow && <OverflowMenu items={overflowIndices.map(i => items[i])} />}\n *   </div>\n * )\n * ```\n */\nexport function useOverflowIndices<C extends HTMLElement = HTMLElement>(\n  options: UseOverflowIndicesOptions = {}\n): UseOverflowIndicesResult<C> {\n  const { reserveTriggerWidth = 0 } = options\n  const containerRef = React.useRef<C | null>(null)\n  const itemRefsMap = React.useRef<Map<number, HTMLElement>>(new Map())\n  const [overflowIndices, setOverflowIndices] = React.useState<number[]>([])\n\n  const registerItem = React.useCallback((index: number) => {\n    return (el: HTMLElement | null) => {\n      if (el) {\n        itemRefsMap.current.set(index, el)\n      } else {\n        itemRefsMap.current.delete(index)\n      }\n    }\n  }, [])\n\n  React.useEffect(() => {\n    const container = containerRef.current\n    if (!container) return\n\n    const compute = () => {\n      const containerWidth = container.clientWidth\n      if (containerWidth === 0) return\n\n      const scrollLeft = container.scrollLeft\n      const visibleStart = scrollLeft\n      const visibleEnd = scrollLeft + containerWidth - reserveTriggerWidth\n\n      // 容許 1px 的像素取整誤差,避免邊界 item 被誤判為 overflow\n      const tolerance = 1\n\n      const indices = Array.from(itemRefsMap.current.keys()).sort((a, b) => a - b)\n\n      const overflow: number[] = []\n      for (const i of indices) {\n        const el = itemRefsMap.current.get(i)\n        if (!el) continue\n\n        const left = el.offsetLeft\n        const right = left + el.offsetWidth\n        // 完全可見條件: item 的左右邊都在可視窗口內\n        const fullyVisible =\n          left >= visibleStart - tolerance && right <= visibleEnd + tolerance\n        if (!fullyVisible) overflow.push(i)\n      }\n\n      setOverflowIndices((prev) => {\n        if (prev.length === overflow.length && prev.every((v, i) => v === overflow[i])) {\n          return prev\n        }\n        return overflow\n      })\n    }\n\n    compute()\n    const ro = new ResizeObserver(compute)\n    ro.observe(container)\n    // 也觀察每個 item 的尺寸變化（字體載入、label 更新等）\n    itemRefsMap.current.forEach((el) => ro.observe(el))\n    // Scroll event: overflow 集合隨 scroll 位置變化\n    container.addEventListener('scroll', compute, { passive: true })\n\n    return () => {\n      ro.disconnect()\n      container.removeEventListener('scroll', compute)\n    }\n  }, [reserveTriggerWidth])\n\n  const getItemAt = React.useCallback(\n    (index: number) => itemRefsMap.current.get(index),\n    []\n  )\n\n  return {\n    containerRef,\n    registerItem,\n    overflowIndices,\n    hasOverflow: overflowIndices.length > 0,\n    getItemAt,\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/hooks/use-truncated.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+export interface UseTruncatedOptions {
+    /**
+     * 偵測策略:回傳 `true` = 截斷、`false` = 未截斷、`undefined` = 本次無法量測(保留前一狀態)。
+     * 預設 = `el.scrollWidth > el.clientWidth`(觀察元素自身)。
+     * Tag 傳自訂 fn:observe root、內部 `querySelector('[data-tag-text]')` + Canvas measureText。
+     */
+    measure?: (observedEl: HTMLElement) => boolean | undefined;
+    /** deps 變更時 cleanup + 重新量測 / 重新訂閱(Tag 傳 `[children]`)。預設 `[]`(mount-once)。 */
+    deps?: React.DependencyList;
+    /**
+     * 是否在首次 paint 後以 `requestAnimationFrame` + `setTimeout(100)` 再量一次,捕獲首幀 layout
+     * 未完成 / 字型 async load 的假陰性(Breadcrumb 已採此 robust 版)。預設 `true`。
+     */
+    recheckAfterPaint?: boolean;
+    /** `'layoutEffect'` = `useLayoutEffect`(量測在 paint 前,避免 flash;Tag 用)/ `'effect'` = `useEffect`。預設 `'effect'`。 */
+    timing?: 'effect' | 'layoutEffect';
+}
+/**
+ * 偵測 ref 所指元素的文字是否被截斷,回傳 `{ ref, isTruncated }`。
+ * `isTruncated` 用來驅動 Tooltip「僅截斷時顯示」(對齊 `tooltip.principles.stories.tsx`「沒被截斷就不該顯示 tooltip」)。
+ */
+export declare function useTruncated<E extends HTMLElement = HTMLElement>(options?: UseTruncatedOptions): {
+    ref: React.MutableRefObject<E | null>;
+    isTruncated: boolean;
+};
+//# sourceMappingURL=use-truncated.d.ts.map

package/dist/hooks/use-truncated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-truncated.d.ts","sourceRoot":"","sources":["../../src/hooks/use-truncated.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA4C9B,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,WAAW,KAAK,OAAO,GAAG,SAAS,CAAA;IAC1D,8EAA8E;IAC9E,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAA;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,gHAAgH;IAChH,MAAM,CAAC,EAAE,QAAQ,GAAG,cAAc,CAAA;CACnC;AAID;;;GAGG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EAC9D,OAAO,GAAE,mBAAwB,GAChC;IAAE,GAAG,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;IAAC,WAAW,EAAE,OAAO,CAAA;CAAE,CAwCjE"}