@qijenchen/design-system 0.1.0-beta.146 → 0.1.0-beta.147

package/dist/components/Breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/Breadcrumb/breadcrumb.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// code-quality-allow: file-size — Breadcrumb 含 BreadcrumbList(主)+ BreadcrumbItem + BreadcrumbEllipsis + items-collapse logic,split 會破壞 collapse/overflow Tooltip subtree\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronRight, MoreHorizontal, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { TruncatedText } from '@/design-system/patterns/element-anatomy/truncated-text'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\n\n// ── TruncatedText ── 2026-07-19:truncate+tooltip 引擎 + presentation 已抽成 SSOT primitive\n// `patterns/element-anatomy/truncated-text`(`<TruncatedText>` 消費 `useTruncated` hook)。本檔改為\n// 消費 `<TruncatedText display=\"block\" tooltip={fullText}>`,原 file-local shared RO + TruncatedLabel 已移除。\n\n/**\n * Breadcrumb — 顯示當前頁面在階層中的位置\n *\n * 基於 shadcn/ui Breadcrumb 結構(純 HTML nav + ol + li + a/span),\n * 橋接設計系統 token。\n *\n * ── 結構 ──\n *   <Breadcrumb>\n *     <BreadcrumbList size=\"md\">\n *       <BreadcrumbItem>\n *         <BreadcrumbLink href=\"/projects\">專案</BreadcrumbLink>\n *       </BreadcrumbItem>\n *       <BreadcrumbSeparator />\n *       <BreadcrumbItem>\n *         <BreadcrumbPage>目前頁面</BreadcrumbPage>\n *       </BreadcrumbItem>\n *     </BreadcrumbList>\n *   </Breadcrumb>\n *\n * ── Size(跟 page title 配對) ──\n *   sm  text-body(14)     → 建議配 text-h4(20) title —— Dialog / panel / drawer\n *   md  text-body(14)     → 建議配 text-h3(24) title —— 一般頁面 header (預設)\n *   lg  text-body-lg(16)  → 建議配 text-h2(32) title —— Detail page hero / landing\n *\n * ── 視覺 ──\n *   Link (預設): text-fg-secondary\n *   Link hover:  text-primary-hover (canonical「互動高亮」, 跟 Tabs / Chip 用法一致)\n *   Page (當前): text-foreground(不加粗 — 加粗會讓 breadcrumb 最右端視覺過重,見 spec)\n *   Separator:  ChevronRight (size 跟 list 一致), text-fg-muted\n *\n * ── 詳見 breadcrumb.spec.md ──\n */\n\n// ── Size context ─────────────────────────────────────────────────────────────\n\ntype BreadcrumbSize = 'sm' | 'md' | 'lg'\n\ninterface BreadcrumbContextValue {\n  size: BreadcrumbSize\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({ size: 'md' })\n\nconst BREADCRUMB_TEXT_CLASS: Record<BreadcrumbSize, string> = {\n  sm: 'text-body',\n  md: 'text-body',\n  lg: 'text-body-lg',\n}\n\n// Separator chevron + BreadcrumbLink/Item start icon 尺寸 — 對齊 uiSize.spec.md「Icon Size Tier」(field-height-sm/md→16,lg→20)。\n// 注意:BreadcrumbEllipsis 不消費此常數,固定 md(16px icon,見 BreadcrumbEllipsis 定義),size='lg' 時不隨 chevron 放大到 20\n// 2026-05-18 改 per user 拍板「A 先改 16/16/20」+「做完」approval:\n// 撤回 text-flow 例外設計,Breadcrumb chevron 跟其他 chrome icon 同 tier。\n// World-class 對齊:Atlassian Breadcrumb chevron 16 default / Material 3 / Ant Design 同。\nconst BREADCRUMB_ICON_SIZE: Record<BreadcrumbSize, number> = {\n  sm: 16,\n  md: 16,\n  lg: 20,\n}\n\n// ── Breadcrumb (nav root) ────────────────────────────────────────────────────\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'>\n>(({ ...props }, ref) => (\n  <nav ref={ref} aria-label=\"Breadcrumb\" {...props} />\n))\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ── BreadcrumbList (ol) ──────────────────────────────────────────────────────\n\n/**\n * Phase B(2026-05-10):declarative items mode 啟用 auto-collapse + auto-separator + auto-page-end。\n * 對齊 Material UI source `Breadcrumbs.js renderItemsBeforeAndAfter` mechanism(`maxItems`\n * default 8;本 DS 採 user-tuned 4 — 更積極 collapse 適合 single-line 緊湊 layout)。\n */\n// code-quality-allow: dead-export — public consumer-facing item spec type;對齊 BreadcrumbProps API contract,允許 consumer 構造 items array 外部\nexport interface BreadcrumbItemSpec {\n  label: React.ReactNode\n  href?: string\n  asChild?: boolean\n  /**\n   * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。\n   * 業界慣例:Breadcrumb 首項用 Home icon 強化視覺錨點(Material / Atlassian)。\n   * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT(sm/md=16, lg=20,對齊 uiSize.spec.md Icon Size Tier)。\n   * Consumer **不傳** size,DS 統一管。\n   */\n  startIcon?: LucideIcon\n}\n\ninterface BreadcrumbListProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'children'> {\n  /**\n   * 字體尺寸 — 依據與之配對的 page title 選擇:\n   *   sm  → 配 text-h4(20) title (Dialog / panel / drawer)\n   *   md  → 配 text-h3(24) title (一般頁面 header,預設)\n   *   lg  → 配 text-h2(32) title (Detail page hero / landing)\n   */\n  size?: BreadcrumbSize\n  /**\n   * Declarative items mode(opt-in)。當 provided 時 `children` 被忽略,List 內部自動:\n   *  - 插 separator\n   *  - 末位 spec(無 `href`)自動 BreadcrumbPage(per Title-breadcrumb-end SSOT)\n   *  - 超 `maxItems` auto-collapse 中段成 BreadcrumbEllipsis + DropdownMenu(對齊 Material UI\n   *    source `renderItemsBeforeAndAfter`)\n   */\n  items?: BreadcrumbItemSpec[]\n  /**\n   * Auto-collapse 閾值。Default 4(user-tuned;Material UI source 預設 8)。`items.length > maxItems`\n   * 才 collapse。\n   */\n  maxItems?: number\n  /** Collapse 後保留首 N 個(default 1)。對齊 Material UI source default。 */\n  itemsBeforeCollapse?: number\n  /** Collapse 後保留末 N 個(default 1)。對齊 Material UI source default。 */\n  itemsAfterCollapse?: number\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — items props × children narrowing × collapse-with-overflow × tooltip 4 軸組合在 BreadcrumbList,拆 sub-fn 會跨 fn 傳 itemsBeforeCollapse/After collapsed-tooltip refs\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(\n  ({ className, size = 'md', items, maxItems = 4, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, children, ...props }, ref) => {\n    // Memoize provider value(2026-04-22 D3 perf audit):單 field wrapper memoize\n    const ctxValue = React.useMemo(() => ({ size }), [size])\n\n    // Declarative mode(items prop provided):自動 render + auto-collapse\n    const declarativeContent = React.useMemo(() => {\n      if (!items) return null\n      // 2026-07-04 修:非字串 label 的 key 原用 Math.random() → 每次 render 新 key 造成\n      // BreadcrumbItem unmount/remount(重置 TruncatedText ResizeObserver 與 state)→ 改 stable idx key\n      const renderItem = (spec: BreadcrumbItemSpec, role: 'root' | 'middle' | 'current', idx: number) => (\n        <BreadcrumbItem key={`${role}-${typeof spec.label === 'string' ? spec.label : idx}`} role={role}>\n          {role === 'current'\n            ? <BreadcrumbPage startIcon={spec.startIcon}>\n                <TruncatedText display=\"block\" tooltip={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedText>\n              </BreadcrumbPage>\n            : <BreadcrumbLink href={spec.href} asChild={spec.asChild} startIcon={spec.startIcon}>\n                <TruncatedText display=\"block\" tooltip={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedText>\n              </BreadcrumbLink>\n          }\n        </BreadcrumbItem>\n      )\n\n      const shouldCollapse = items.length > maxItems\n      const beforeN = Math.max(0, itemsBeforeCollapse)\n      const afterN = Math.max(1, itemsAfterCollapse)  // 末位永遠 ≥ 1(current page)\n\n      type VisibleItem = { spec: BreadcrumbItemSpec; role: 'root' | 'middle' | 'current' }\n      let visible: Array<VisibleItem | { ellipsisOf: BreadcrumbItemSpec[] }>\n      if (!shouldCollapse) {\n        visible = items.map((spec, i) => ({\n          spec,\n          role: i === 0 ? 'root' : (i === items.length - 1 ? 'current' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n      } else {\n        const before = items.slice(0, beforeN).map((spec, i) => ({\n          spec,\n          role: (i === 0 ? 'root' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n        const collapsed = items.slice(beforeN, items.length - afterN)\n        const after = items.slice(items.length - afterN).map((spec, i, arr) => ({\n          spec,\n          role: (i === arr.length - 1 ? 'current' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n        visible = [...before, { ellipsisOf: collapsed }, ...after]\n      }\n\n      // Interleave with separators\n      const rendered: React.ReactNode[] = []\n      visible.forEach((entry, i) => {\n        if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-${i}`} />)\n        if ('ellipsisOf' in entry) {\n          rendered.push(\n            <BreadcrumbItem key=\"ellipsis\" role=\"ellipsis\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <BreadcrumbEllipsis />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"start\">\n                  {entry.ellipsisOf.map((s, j) => (\n                    <DropdownMenuItem key={j} asChild={!!s.href}>\n                      {s.href ? <a href={s.href}>{s.label}</a> : <span>{s.label}</span>}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </BreadcrumbItem>\n          )\n        } else {\n          rendered.push(renderItem(entry.spec, entry.role, i))\n        }\n      })\n      return rendered\n    }, [items, maxItems, itemsBeforeCollapse, itemsAfterCollapse])\n\n    // 2026-05-12 fix(user 抓 image 2 Deep story 違反 single-line + max-levels canonical):\n    // Compositional path 也走 auto-collapse + flex-shrink hierarchy。Walk children, 找\n    // BreadcrumbItem 並按 index 分派 role (first=root / last=current / middle=middle)。\n    // > maxItems 自動 collapse 中段成 ellipsis(對齊 declarative path canonical SSOT)。\n    const compositionalContent = React.useMemo(() => {\n      if (items) return null\n      const childArr = React.Children.toArray(children)\n      // 抓 BreadcrumbItem children(skip BreadcrumbSeparator — auto re-interleave)\n      // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):type-identity primary path + displayName fallback。\n      // 純 `displayName` check 在 HOC / React.memo / consumer alias 場景脆弱(production build / wrap\n      // 可能改寫 displayName)。`c.type === BreadcrumbItem` 是 React fiber reference-identity 最穩\n      // primary(對齊 Radix children-walk pattern);displayName fallback 給 HOC 場景。\n      const itemChildren = childArr.filter((c): c is React.ReactElement<BreadcrumbItemProps> =>\n        React.isValidElement(c) && (c.type === BreadcrumbItem ||\n          (c.type as React.ComponentType)?.displayName === 'BreadcrumbItem')\n      )\n      // 無 item 或全是 separator → pass-through(consumer raw children,e.g. spinners)\n      if (itemChildren.length === 0) return children\n      // Assign role by position; clone with role prop\n      const total = itemChildren.length\n      const cloneWithRole = (item: React.ReactElement<BreadcrumbItemProps>, idx: number, role: 'root' | 'middle' | 'current') =>\n        React.cloneElement(item, { role: item.props.role ?? role, key: `bc-${role}-${idx}` })\n      const shouldCollapse = total > maxItems\n      const beforeN = Math.max(0, itemsBeforeCollapse)\n      const afterN = Math.max(1, itemsAfterCollapse)\n      const rendered: React.ReactNode[] = []\n      if (!shouldCollapse) {\n        itemChildren.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-${i}`} />)\n          const role: 'root' | 'middle' | 'current' = i === 0 ? 'root' : (i === total - 1 ? 'current' : 'middle')\n          rendered.push(cloneWithRole(item, i, role))\n        })\n      } else {\n        // before(first N) + ellipsis + after(last M)\n        const beforeItems = itemChildren.slice(0, beforeN)\n        const collapsedItems = itemChildren.slice(beforeN, total - afterN)\n        const afterItems = itemChildren.slice(total - afterN)\n        beforeItems.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-bef-${i}`} />)\n          const role: 'root' | 'middle' = i === 0 ? 'root' : 'middle'\n          rendered.push(cloneWithRole(item, i, role))\n        })\n        if (rendered.length > 0) rendered.push(<BreadcrumbSeparator key=\"sep-ellipsis-before\" />)\n        rendered.push(\n          <BreadcrumbItem key=\"bc-ellipsis\" role=\"ellipsis\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <BreadcrumbEllipsis />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\">\n                {collapsedItems.map((item, j) => {\n                  // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):consumer BreadcrumbItem children 常包\n                  // `<BreadcrumbLink href>` = anchor button-like。直接放進 `<DropdownMenuItem>` 會 nested\n                  // interactive(menuitem within button violates HTML / a11y)。Fix:把實際 link 元素接到\n                  // menuitem `asChild`,對齊 declarative path canonical pattern。\n                  // 2026-07-19 fix(DA3 對抗稽核抓):原只讀 `c.props.href` → `<BreadcrumbLink asChild>\n                  //   <RouterLink to=…>` 這種(BreadcrumbLink 無 href、RouterLink child 帶 `to`)摺疊後\n                  //   dropdown 失去導航目標。修:asChild 時**保留整個 link 子元素**(RouterLink/<Link to>/<a>,\n                  //   含 to/href/onClick/state 全 forward,前端路由不退化成整頁重載);純 href 才重建 <a>。\n                  const innerChildren = (item.props as { children?: React.ReactNode }).children\n                  let menuChild: React.ReactNode | undefined  // 接進 menuitem(asChild)的實際 link 元素\n                  let label: React.ReactNode = innerChildren   // fallback:無 link 時的純內容\n                  React.Children.forEach(innerChildren, (c) => {\n                    if (!React.isValidElement<{ href?: string; asChild?: boolean; children?: React.ReactNode }>(c)) return\n                    if (c.props.asChild && React.isValidElement(c.props.children)) {\n                      // BreadcrumbLink asChild → 實際 link = 其 child(RouterLink / <Link to> / <a>),整個保留\n                      menuChild = c.props.children\n                      const grand = (c.props.children.props as { children?: React.ReactNode }).children\n                      if (grand != null) label = grand\n                    } else if (c.props.href != null) {\n                      // BreadcrumbLink href → 重建 <a href>(對齊原 canonical，避免 nested interactive)\n                      menuChild = <a href={c.props.href}>{c.props.children}</a>\n                      if (c.props.children != null) label = c.props.children\n                    }\n                  })\n                  return menuChild\n                    ? <DropdownMenuItem key={`collapsed-${j}`} asChild>{menuChild}</DropdownMenuItem>\n                    : <DropdownMenuItem key={`collapsed-${j}`}>{label}</DropdownMenuItem>\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </BreadcrumbItem>\n        )\n        rendered.push(<BreadcrumbSeparator key=\"sep-ellipsis-after\" />)\n        afterItems.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-aft-${i}`} />)\n          const role: 'middle' | 'current' = i === afterItems.length - 1 ? 'current' : 'middle'\n          rendered.push(cloneWithRole(item, i, role))\n        })\n      }\n      return rendered\n    }, [items, children, maxItems, itemsBeforeCollapse, itemsAfterCollapse])\n\n    return (\n    <BreadcrumbContext.Provider value={ctxValue}>\n      <ol\n        ref={ref}\n        // gap-1 (4px) — separator 與兩邊 items 間距;緊湊節奏,符合 breadcrumb 密集流動感。\n        // 2026-05-10 Phase A single-line canonical(per user + Material UI source verified):\n        //   `flex-nowrap` 不 wrap。長路徑走中段折疊。\n        // 2026-05-12 fix:compositional 也走 auto-collapse + role-assignment(`compositionalContent`)\n        //   → declarative / compositional 兩 path 都符合 single-line + max-levels + width 分配 canonical SSOT。\n        className={cn(\n          'flex flex-nowrap items-center gap-1 text-fg-secondary leading-compact min-w-0',\n          BREADCRUMB_TEXT_CLASS[size],\n          className\n        )}\n        {...props}\n      >\n        {items ? declarativeContent : compositionalContent}\n      </ol>\n    </BreadcrumbContext.Provider>\n    )\n  },\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ── BreadcrumbItem (li) ──────────────────────────────────────────────────────\n\n/**\n * Phase B(2026-05-10):`role` prop emit `data-bc-role` attr → CSS flex-shrink hierarchy。\n * Per BreadcrumbItem 在 row 中的角色決定 shrink 優先級:\n *   - `root`(首位)→ shrink:3(縮最積極;root context 可弱化)\n *   - `middle`(中段)→ shrink:2\n *   - `current`(末位 / page)→ shrink:1(最後縮;a11y current page anchor)\n *   - `ellipsis`(BreadcrumbEllipsis 包裝)→ shrink:0(永遠完整 ⋯)\n *\n * 設計回應 user 兩 challenges:\n *   (a) Root 也 truncate(shrink:3,不是 shrink-0)\n *   (b) 不用 fixed max-width — flex-shrink hierarchy 容器寬時自然展開不浪費空間,\n *       窄時按優先級縮 + TruncatedText 內部 CSS truncate + tooltip。\n */\ninterface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<'li'> {\n  role?: 'root' | 'middle' | 'current' | 'ellipsis'\n}\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  ({ className, role, style, ...props }, ref) => {\n    // 2026-05-20 fix v3(user 抓「專案 後方多 4px 間距 / 我的新專案 沒有」chevron 不對稱):\n    //   v2 `minWidth: '2rem'`(32px)在寬容器強制 li ≥ 32px → 短 label「專案」(natural ~28px)\n    //   被撐 4px,長 label「我的新專案」(natural ~70px)hug content → chevron 兩側不對稱。\n    //\n    // v3 解法:minWidth `2rem` → `1.5rem`(24px)\n    //   數學:中文「X…」最小寬度 = 1 char(~14-16px)+ ellipsis(~6-8px)≈ 22-24px → 24px 剛 cover\n    //   結果:\n    //     - 寬容器:所有自然 label ≥ 24px → li hug content,chevron 緊貼,對稱(本 fix 主目的)\n    //     - 窄容器 truncate:shrink 不過 24px → 「X…」仍可見 ellipsis 保險\n    //     - 短英文「OK / ID」(natural ~20px)→ 多 ~4px(原 12px → 縮到 4px,顯著改善)\n    //   對齊 user verbatim「minWidth 再調小一點」+ ellipsis 數學最小值。\n    const shrinkStyle: React.CSSProperties = role === 'root' ? { flexShrink: 3, minWidth: '1.5rem' }\n      : role === 'middle' ? { flexShrink: 2, minWidth: '1.5rem' }\n      : role === 'current' ? { flexShrink: 1, minWidth: '1.5rem' }\n      : role === 'ellipsis' ? { flexShrink: 0 }\n      : {}\n    return (\n      <li\n        ref={ref}\n        data-bc-role={role}\n        className={cn('inline-flex items-center min-w-0', className)}\n        style={{ ...shrinkStyle, ...style }}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ── BreadcrumbLink (a) ───────────────────────────────────────────────────────\n\ninterface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  /** 將樣式套用至子元件(e.g. React Router Link) */\n  asChild?: boolean\n  /**\n   * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。\n   * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT,DS 統一尺寸不允許 consumer override。\n   * 對齊 uiSize.spec.md Icon Size Tier(2026-05-18 撤回 14 例外,統一 16/16/20)。\n   */\n  startIcon?: LucideIcon\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild, className, children, startIcon: StartIcon, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    // 2026-05-12 fix(user 抓 image 2 Deep story 麵包屑沒符合 single-line + truncate canonical):\n    // 純文字 children → auto-wrap TruncatedText(canonical「single-line + ellipsis + tooltip\n    // on truncate」per spec.md / Polaris breadcrumb)。Non-string children(consumer 自訂 icon+text\n    // 結構)→ pass-through 不 force-wrap(consumer own truncate)。\n    const wrappedChildren = typeof children === 'string'\n      ? <TruncatedText display=\"block\" tooltip={children}>{children}</TruncatedText>\n      : children\n    const sharedClassName = cn(\n      'inline-flex items-center gap-2',\n      'min-w-0 max-w-full',\n      'text-fg-secondary',\n      // hover 字色瞬間切換,不寫 transition-colors(tokens/motion/motion.spec.md「hover 回饋不做過渡」;2026-09-26 由底色延伸到字色,待辦總帳 L9 / N4(3))\n      'hover:text-primary-hover',\n      'rounded-md',\n      className\n    )\n    // 2026-05-25 fix(user 抓 Breadcrumb asChild story React.Children.only runtime fail):\n    // Radix Slot 規範 children 必為單 element;原 unified Comp render 在 asChild path 內\n    // 仍輸出「{StartIcon && ...} + {wrappedChildren}」雙 JSX expression → Slot 收到 array\n    // → React.Children.only(array) throws「expected to receive a single React element child」。\n    // 分支 render 解 — asChild path 只傳 consumer-supplied child(icon 由 consumer 自管,\n    // 對齊 Radix Slot canonical「single child contract」);非 asChild path 維持原 native\n    // <a> + DS-controlled icon + wrapped label。\n    if (asChild) {\n      return (\n        <Slot ref={ref} className={sharedClassName} {...props}>\n          {wrappedChildren}\n        </Slot>\n      )\n    }\n    return (\n      <a ref={ref} className={sharedClassName} {...props}>\n        {StartIcon && <StartIcon size={BREADCRUMB_ICON_SIZE[size]} aria-hidden className=\"shrink-0\" />}\n        {wrappedChildren}\n      </a>\n    )\n  }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ── BreadcrumbPage (current, non-clickable) ──────────────────────────────────\n\ninterface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<'span'> {\n  /** 起始 icon。內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT。對齊 BreadcrumbLink. */\n  startIcon?: LucideIcon\n}\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(\n  ({ className, children, startIcon: StartIcon, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    // 2026-05-12 fix(同 BreadcrumbLink):純文字 children → auto-wrap TruncatedText。\n    const wrappedChildren = typeof children === 'string'\n      ? <TruncatedText display=\"block\" tooltip={children}>{children}</TruncatedText>\n      : children\n    return (\n      <span\n        ref={ref}\n        role=\"link\"\n        aria-disabled=\"true\"\n        aria-current=\"page\"\n        className={cn('inline-flex items-center gap-2 min-w-0 max-w-full text-foreground', className)}\n        {...props}\n      >\n        {StartIcon && <StartIcon size={BREADCRUMB_ICON_SIZE[size]} aria-hidden className=\"shrink-0\" />}\n        {wrappedChildren}\n      </span>\n    )\n  }\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ── BreadcrumbSeparator ──────────────────────────────────────────────────────\n\ninterface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<'li'> {\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  ({ children, className, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        // Phase B(2026-05-10):separator 永遠 shrink-0(必完整顯示,否則 path 視覺斷裂)\n        className={cn('inline-flex items-center text-fg-muted shrink-0', className)}\n        {...props}\n      >\n        {children ?? <ChevronRight size={BREADCRUMB_ICON_SIZE[size]} aria-hidden />}\n      </li>\n    )\n  }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ── BreadcrumbEllipsis ───────────────────────────────────────────────────────\n\n/**\n * BreadcrumbEllipsis — 折疊路徑的 \"⋯\" 按鈕\n *\n * 2026-05-10 重寫:消費 `ItemInlineActionButton`(primitive SSOT)取代自刻 `<button>`。\n * Per inline-action.spec.md L106-131 predicate Q1+Q2+Q3 全指向 Inline Action:\n *   - Q1 點了要做事嗎?是(展開折疊路徑 dropdown)\n *   - Q2 位置?BreadcrumbList row inline flow(host 內)\n *   - Q3 row 多大?14-16px text row(compact tier)→ Inline Action\n * + 對齊 M1「視覺決策前必消費 SSOT」+ Mindset #2「優先消費既有」。\n *\n * 配合 DropdownMenuTrigger asChild 使用:\n *\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <BreadcrumbEllipsis />\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem asChild><a href=\"/org\">組織</a></DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n *\n * `overlayTrigger=true` 視覺鎖:DropdownMenu open 期間 button 維持 hover bg(對齊\n * shadcn / Radix Themes / Material 的 overlay trigger canonical,inline-action.spec.md\n * 「Overlay trigger canonical」段)。\n */\ntype BreadcrumbEllipsisProps = Omit<React.ComponentPropsWithoutRef<typeof ItemInlineActionButton>, 'icon' | 'size'>\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLButtonElement, BreadcrumbEllipsisProps>(\n  ({ 'aria-label': ariaLabel = '顯示折疊路徑' /* i18n-allow: DS default; consumer override via aria-label prop */, ...props }, ref) => {\n    return (\n      <ItemInlineActionButton\n        ref={ref}\n        icon={MoreHorizontal}\n        size=\"md\"  // Breadcrumb 不在 RowSizeProvider 樹內,固定 md(16px icon + 18px hover bg,對齊 inline-action.spec.md 尺寸表)\n        aria-label={ariaLabel}\n        overlayTrigger\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\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 breadcrumbMeta = {\n  component: 'Breadcrumb',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n    // 值源 = code SSOT:BREADCRUMB_TEXT_CLASS(sm/md=text-body, lg=text-body-lg)+ BREADCRUMB_ICON_SIZE(sm/md=16, lg=20)。\n    // Breadcrumb 是文字列無固定高度 token,故不列 height(對照 Tag meta 有自身 h-* 才列)。\n    sm: { iconSize: 16, typography: 'body' },\n    md: { iconSize: 16, typography: 'body' },\n    lg: { iconSize: 20, typography: 'body-lg' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['--ring'],\n  },\n} as const\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\nexport type { BreadcrumbSize, BreadcrumbListProps, BreadcrumbEllipsisProps }\n// BreadcrumbItemSpec 已在上方 `export interface BreadcrumbItemSpec` 直接 export\n"],"names":[],"mappings":";;;;;;;;AA4DA,MAAM,oBAAoB,MAAM,cAAsC,EAAE,MAAM,MAAM;AAEpF,MAAM,wBAAwD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAOA,MAAM,uBAAuD;AAAA,EAC3D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAIA,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,GAAG,MAAA,GAAS,QACf,oBAAC,SAAI,KAAU,cAAW,cAAc,GAAG,OAAO,CACnD;AACD,WAAW,cAAc;AAoDzB,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,OAAO,MAAM,OAAO,WAAW,GAAG,sBAAsB,GAAG,qBAAqB,GAAG,UAAU,GAAG,MAAA,GAAS,QAAQ;AAE7H,UAAM,WAAW,MAAM,QAAQ,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC;AAGvD,UAAM,qBAAqB,MAAM,QAAQ,MAAM;AAC7C,UAAI,CAAC,MAAO,QAAO;AAGnB,YAAM,aAAa,CAAC,MAA0B,MAAqC,QACjF,oBAAC,gBAAA,EAAoF,MAClF,UAAA,SAAS,YACN,oBAAC,gBAAA,EAAe,WAAW,KAAK,WAC9B,UAAA,oBAAC,eAAA,EAAc,SAAQ,SAAQ,SAAS,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,QAAY,UAAA,KAAK,MAAA,CAAM,GAC/G,wBACC,gBAAA,EAAe,MAAM,KAAK,MAAM,SAAS,KAAK,SAAS,WAAW,KAAK,WACtE,UAAA,oBAAC,eAAA,EAAc,SAAQ,SAAQ,SAAS,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,QAAY,UAAA,KAAK,OAAM,EAAA,CAC/G,EAAA,GAPe,GAAG,IAAI,IAAI,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,GAAG,EASjF;AAGF,YAAM,iBAAiB,MAAM,SAAS;AACtC,YAAM,UAAU,KAAK,IAAI,GAAG,mBAAmB;AAC/C,YAAM,SAAS,KAAK,IAAI,GAAG,kBAAkB;AAG7C,UAAI;AACJ,UAAI,CAAC,gBAAgB;AACnB,kBAAU,MAAM,IAAI,CAAC,MAAM,OAAO;AAAA,UAChC;AAAA,UACA,MAAM,MAAM,IAAI,SAAU,MAAM,MAAM,SAAS,IAAI,YAAY;AAAA,QAAA,EAC/D;AAAA,MACJ,OAAO;AACL,cAAM,SAAS,MAAM,MAAM,GAAG,OAAO,EAAE,IAAI,CAAC,MAAM,OAAO;AAAA,UACvD;AAAA,UACA,MAAO,MAAM,IAAI,SAAS;AAAA,QAAA,EAC1B;AACF,cAAM,YAAY,MAAM,MAAM,SAAS,MAAM,SAAS,MAAM;AAC5D,cAAM,QAAQ,MAAM,MAAM,MAAM,SAAS,MAAM,EAAE,IAAI,CAAC,MAAM,GAAG,SAAS;AAAA,UACtE;AAAA,UACA,MAAO,MAAM,IAAI,SAAS,IAAI,YAAY;AAAA,QAAA,EAC1C;AACF,kBAAU,CAAC,GAAG,QAAQ,EAAE,YAAY,UAAA,GAAa,GAAG,KAAK;AAAA,MAC3D;AAGA,YAAM,WAA8B,CAAA;AACpC,cAAQ,QAAQ,CAAC,OAAO,MAAM;AAC5B,YAAI,IAAI,EAAG,UAAS,yBAAM,qBAAA,CAAA,GAAyB,OAAO,CAAC,EAAI,CAAE;AACjE,YAAI,gBAAgB,OAAO;AACzB,mBAAS;AAAA,YACP,oBAAC,gBAAA,EAA8B,MAAK,YAClC,+BAAC,cAAA,EACC,UAAA;AAAA,cAAA,oBAAC,qBAAA,EAAoB,SAAO,MAC1B,UAAA,oBAAC,sBAAmB,GACtB;AAAA,cACA,oBAAC,qBAAA,EAAoB,OAAM,SACxB,gBAAM,WAAW,IAAI,CAAC,GAAG,MACxB,oBAAC,kBAAA,EAAyB,SAAS,CAAC,CAAC,EAAE,MACpC,UAAA,EAAE,OAAO,oBAAC,KAAA,EAAE,MAAM,EAAE,MAAO,UAAA,EAAE,MAAA,CAAM,IAAO,oBAAC,UAAM,UAAA,EAAE,OAAM,EAAA,GADrC,CAEvB,CACD,EAAA,CACH;AAAA,YAAA,EAAA,CACF,KAZkB,UAapB;AAAA,UAAA;AAAA,QAEJ,OAAO;AACL,mBAAS,KAAK,WAAW,MAAM,MAAM,MAAM,MAAM,CAAC,CAAC;AAAA,QACrD;AAAA,MACF,CAAC;AACD,aAAO;AAAA,IACT,GAAG,CAAC,OAAO,UAAU,qBAAqB,kBAAkB,CAAC;AAM7D,UAAM,uBAAuB,MAAM,QAAQ,MAAM;AAC/C,UAAI,MAAO,QAAO;AAClB,YAAM,WAAW,MAAM,SAAS,QAAQ,QAAQ;AAMhD,YAAM,eAAe,SAAS;AAAA,QAAO,CAAC,MAAA;;AACpC,uBAAM,eAAe,CAAC,MAAM,EAAE,SAAS,oBACpC,OAAE,SAAF,mBAAgC,iBAAgB;AAAA;AAAA,MAAA;AAGrD,UAAI,aAAa,WAAW,EAAG,QAAO;AAEtC,YAAM,QAAQ,aAAa;AAC3B,YAAM,gBAAgB,CAAC,MAA+C,KAAa,SACjF,MAAM,aAAa,MAAM,EAAE,MAAM,KAAK,MAAM,QAAQ,MAAM,KAAK,MAAM,IAAI,IAAI,GAAG,IAAI;AACtF,YAAM,iBAAiB,QAAQ;AAC/B,YAAM,UAAU,KAAK,IAAI,GAAG,mBAAmB;AAC/C,YAAM,SAAS,KAAK,IAAI,GAAG,kBAAkB;AAC7C,YAAM,WAA8B,CAAA;AACpC,UAAI,CAAC,gBAAgB;AACnB,qBAAa,QAAQ,CAAC,MAAM,MAAM;AAChC,cAAI,IAAI,EAAG,UAAS,yBAAM,qBAAA,CAAA,GAAyB,OAAO,CAAC,EAAI,CAAE;AACjE,gBAAM,OAAsC,MAAM,IAAI,SAAU,MAAM,QAAQ,IAAI,YAAY;AAC9F,mBAAS,KAAK,cAAc,MAAM,GAAG,IAAI,CAAC;AAAA,QAC5C,CAAC;AAAA,MACH,OAAO;AAEL,cAAM,cAAc,aAAa,MAAM,GAAG,OAAO;AACjD,cAAM,iBAAiB,aAAa,MAAM,SAAS,QAAQ,MAAM;AACjE,cAAM,aAAa,aAAa,MAAM,QAAQ,MAAM;AACpD,oBAAY,QAAQ,CAAC,MAAM,MAAM;AAC/B,cAAI,IAAI,EAAG,UAAS,yBAAM,qBAAA,CAAA,GAAyB,WAAW,CAAC,EAAI,CAAE;AACrE,gBAAM,OAA0B,MAAM,IAAI,SAAS;AACnD,mBAAS,KAAK,cAAc,MAAM,GAAG,IAAI,CAAC;AAAA,QAC5C,CAAC;AACD,YAAI,SAAS,SAAS,EAAG,UAAS,KAAK,oBAAC,qBAAA,IAAwB,qBAAsB,CAAE;AACxF,iBAAS;AAAA,UACP,oBAAC,gBAAA,EAAiC,MAAK,YACrC,+BAAC,cAAA,EACC,UAAA;AAAA,YAAA,oBAAC,qBAAA,EAAoB,SAAO,MAC1B,UAAA,oBAAC,sBAAmB,GACtB;AAAA,YACA,oBAAC,uBAAoB,OAAM,SACxB,yBAAe,IAAI,CAAC,MAAM,MAAM;AAS/B,oBAAM,gBAAiB,KAAK,MAAyC;AACrE,kBAAI;AACJ,kBAAI,QAAyB;AAC7B,oBAAM,SAAS,QAAQ,eAAe,CAAC,MAAM;AAC3C,oBAAI,CAAC,MAAM,eAAiF,CAAC,EAAG;AAChG,oBAAI,EAAE,MAAM,WAAW,MAAM,eAAe,EAAE,MAAM,QAAQ,GAAG;AAE7D,8BAAY,EAAE,MAAM;AACpB,wBAAM,QAAS,EAAE,MAAM,SAAS,MAAyC;AACzE,sBAAI,SAAS,KAAM,SAAQ;AAAA,gBAC7B,WAAW,EAAE,MAAM,QAAQ,MAAM;AAE/B,8BAAY,oBAAC,OAAE,MAAM,EAAE,MAAM,MAAO,UAAA,EAAE,MAAM,SAAA,CAAS;AACrD,sBAAI,EAAE,MAAM,YAAY,KAAM,SAAQ,EAAE,MAAM;AAAA,gBAChD;AAAA,cACF,CAAC;AACD,qBAAO,YACH,oBAAC,kBAAA,EAAwC,SAAO,MAAE,UAAA,UAAA,GAA3B,aAAa,CAAC,EAAuB,IAC5D,oBAAC,kBAAA,EAAyC,UAAA,MAAA,GAAnB,aAAa,CAAC,EAAW;AAAA,YACtD,CAAC,EAAA,CACH;AAAA,UAAA,EAAA,CACF,KApCkB,aAqCpB;AAAA,QAAA;AAEF,iBAAS,KAAK,oBAAC,qBAAA,CAAA,GAAwB,oBAAqB,CAAE;AAC9D,mBAAW,QAAQ,CAAC,MAAM,MAAM;AAC9B,cAAI,IAAI,EAAG,UAAS,yBAAM,qBAAA,CAAA,GAAyB,WAAW,CAAC,EAAI,CAAE;AACrE,gBAAM,OAA6B,MAAM,WAAW,SAAS,IAAI,YAAY;AAC7E,mBAAS,KAAK,cAAc,MAAM,GAAG,IAAI,CAAC;AAAA,QAC5C,CAAC;AAAA,MACH;AACA,aAAO;AAAA,IACT,GAAG,CAAC,OAAO,UAAU,UAAU,qBAAqB,kBAAkB,CAAC;AAEvE,WACA,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,UACjC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QAMA,WAAW;AAAA,UACT;AAAA,UACA,sBAAsB,IAAI;AAAA,UAC1B;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH,kBAAQ,qBAAqB;AAAA,MAAA;AAAA,IAAA,GAElC;AAAA,EAEF;AACF;AACA,eAAe,cAAc;AAqB7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,OAAO,GAAG,MAAA,GAAS,QAAQ;AAY7C,UAAM,cAAmC,SAAS,SAAS,EAAE,YAAY,GAAG,UAAU,SAAA,IAClF,SAAS,WAAW,EAAE,YAAY,GAAG,UAAU,SAAA,IAC/C,SAAS,YAAY,EAAE,YAAY,GAAG,UAAU,SAAA,IAChD,SAAS,aAAa,EAAE,YAAY,EAAA,IACpC,CAAA;AACJ,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,gBAAc;AAAA,QACd,WAAW,GAAG,oCAAoC,SAAS;AAAA,QAC3D,OAAO,EAAE,GAAG,aAAa,GAAG,MAAA;AAAA,QAC3B,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,eAAe,cAAc;AAe7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,SAAS,WAAW,UAAU,WAAW,WAAW,GAAG,MAAA,GAAS,QAAQ;AACzE,UAAM,EAAE,KAAA,IAAS,MAAM,WAAW,iBAAiB;AAKnD,UAAM,kBAAkB,OAAO,aAAa,WACxC,oBAAC,eAAA,EAAc,SAAQ,SAAQ,SAAS,UAAW,SAAA,CAAS,IAC5D;AACJ,UAAM,kBAAkB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AASF,QAAI,SAAS;AACX,iCACG,MAAA,EAAK,KAAU,WAAW,iBAAkB,GAAG,OAC7C,UAAA,iBACH;AAAA,IAEJ;AACA,gCACG,KAAA,EAAE,KAAU,WAAW,iBAAkB,GAAG,OAC1C,UAAA;AAAA,MAAA,aAAa,oBAAC,aAAU,MAAM,qBAAqB,IAAI,GAAG,eAAW,MAAC,WAAU,WAAA,CAAW;AAAA,MAC3F;AAAA,IAAA,GACH;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAS7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,UAAU,WAAW,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChE,UAAM,EAAE,KAAA,IAAS,MAAM,WAAW,iBAAiB;AAEnD,UAAM,kBAAkB,OAAO,aAAa,WACxC,oBAAC,eAAA,EAAc,SAAQ,SAAQ,SAAS,UAAW,SAAA,CAAS,IAC5D;AACJ,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,iBAAc;AAAA,QACd,gBAAa;AAAA,QACb,WAAW,GAAG,qEAAqE,SAAS;AAAA,QAC3F,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,aAAa,oBAAC,aAAU,MAAM,qBAAqB,IAAI,GAAG,eAAW,MAAC,WAAU,WAAA,CAAW;AAAA,UAC3F;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AACA,eAAe,cAAc;AAS7B,MAAM,sBAAsB,MAAM;AAAA,EAChC,CAAC,EAAE,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,EAAE,KAAA,IAAS,MAAM,WAAW,iBAAiB;AACnD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,eAAY;AAAA,QAEZ,WAAW,GAAG,mDAAmD,SAAS;AAAA,QACzE,GAAG;AAAA,QAEH,UAAA,gCAAa,cAAA,EAAa,MAAM,qBAAqB,IAAI,GAAG,eAAW,KAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAG/E;AACF;AACA,oBAAoB,cAAc;AAiClC,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,cAAc,YAAY,UAA8E,GAAG,MAAA,GAAS,QAAQ;AAC7H,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,gBAAc;AAAA,QACb,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,mBAAmB,cAAc;AAI1B,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO;AAAA;AAAA;AAAA,IAGL,IAAI,EAAE,UAAU,IAAI,YAAY,OAAA;AAAA,IAChC,IAAI,EAAE,UAAU,IAAI,YAAY,OAAA;AAAA,IAChC,IAAI,EAAE,UAAU,IAAI,YAAY,UAAA;AAAA,EAAU;AAAA,EAE5C,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,iBAAiB,qBAAqB,iBAAiB;AAAA,IAC5D,MAAM,CAAC,QAAQ;AAAA,EAAA;AAEnB;"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/components/Breadcrumb/breadcrumb.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\n// code-quality-allow: file-size — Breadcrumb 含 BreadcrumbList(主)+ BreadcrumbItem + BreadcrumbEllipsis + items-collapse logic,split 會破壞 collapse/overflow Tooltip subtree\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { ChevronRight, MoreHorizontal, type LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { TruncatedText } from '@/design-system/patterns/element-anatomy/truncated-text'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\n\n// ── TruncatedText ── 2026-07-19:truncate+tooltip 引擎 + presentation 已抽成 SSOT primitive\n// `patterns/element-anatomy/truncated-text`(`<TruncatedText>` 消費 `useTruncated` hook)。本檔改為\n// 消費 `<TruncatedText display=\"block\" tooltip={fullText}>`,原 file-local shared RO + TruncatedLabel 已移除。\n\n/**\n * Breadcrumb — 顯示當前頁面在階層中的位置\n *\n * 基於 shadcn/ui Breadcrumb 結構(純 HTML nav + ol + li + a/span),\n * 橋接設計系統 token。\n *\n * ── 結構 ──\n *   <Breadcrumb>\n *     <BreadcrumbList size=\"md\">\n *       <BreadcrumbItem>\n *         <BreadcrumbLink href=\"/projects\">專案</BreadcrumbLink>\n *       </BreadcrumbItem>\n *       <BreadcrumbSeparator />\n *       <BreadcrumbItem>\n *         <BreadcrumbPage>目前頁面</BreadcrumbPage>\n *       </BreadcrumbItem>\n *     </BreadcrumbList>\n *   </Breadcrumb>\n *\n * ── Size(跟 page title 配對) ──\n *   sm  text-body(14)     → 建議配 text-h4(20) title —— Dialog / panel / drawer\n *   md  text-body(14)     → 建議配 text-h3(24) title —— 一般頁面 header (預設)\n *   lg  text-body-lg(16)  → 建議配 text-h2(32) title —— Detail page hero / landing\n *\n * ── 視覺 ──\n *   Link (預設): text-fg-secondary\n *   Link hover:  text-primary-hover(連結滑過換色 canonical,owner color.spec.md「連結 hover = 換色」;\n *                跟 Tabs / Chip 不是同一條 —— Tabs 滑過是字轉 foreground、Chip 只有選中態滑過才轉 primary-hover;\n *                2026-09-27 更正舊句「跟 Tabs / Chip 用法一致」)\n *   Page (當前): text-foreground(不加粗 — 加粗會讓 breadcrumb 最右端視覺過重,見 spec)\n *   Separator:  ChevronRight (size 跟 list 一致), text-fg-muted\n *\n * ── 詳見 breadcrumb.spec.md ──\n */\n\n// ── Size context ─────────────────────────────────────────────────────────────\n\ntype BreadcrumbSize = 'sm' | 'md' | 'lg'\n\ninterface BreadcrumbContextValue {\n  size: BreadcrumbSize\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({ size: 'md' })\n\nconst BREADCRUMB_TEXT_CLASS: Record<BreadcrumbSize, string> = {\n  sm: 'text-body',\n  md: 'text-body',\n  lg: 'text-body-lg',\n}\n\n// Separator chevron + BreadcrumbLink/Item start icon 尺寸 — 對齊 uiSize.spec.md「Icon Size Tier」(field-height-sm/md→16,lg→20)。\n// 注意:BreadcrumbEllipsis 不消費此常數,固定 md(16px icon,見 BreadcrumbEllipsis 定義),size='lg' 時不隨 chevron 放大到 20\n// 2026-05-18 改 per user 拍板「A 先改 16/16/20」+「做完」approval:\n// 撤回 text-flow 例外設計,Breadcrumb chevron 跟其他 chrome icon 同 tier。\n// World-class 對齊:Atlassian Breadcrumb chevron 16 default / Material 3 / Ant Design 同。\nconst BREADCRUMB_ICON_SIZE: Record<BreadcrumbSize, number> = {\n  sm: 16,\n  md: 16,\n  lg: 20,\n}\n\n// ── Breadcrumb (nav root) ────────────────────────────────────────────────────\n\nconst Breadcrumb = React.forwardRef<\n  HTMLElement,\n  React.ComponentPropsWithoutRef<'nav'>\n>(({ ...props }, ref) => (\n  <nav ref={ref} aria-label=\"Breadcrumb\" {...props} />\n))\nBreadcrumb.displayName = 'Breadcrumb'\n\n// ── BreadcrumbList (ol) ──────────────────────────────────────────────────────\n\n/**\n * Phase B(2026-05-10):declarative items mode 啟用 auto-collapse + auto-separator + auto-page-end。\n * 對齊 Material UI source `Breadcrumbs.js renderItemsBeforeAndAfter` mechanism(`maxItems`\n * default 8;本 DS 採 user-tuned 4 — 更積極 collapse 適合 single-line 緊湊 layout)。\n */\n// code-quality-allow: dead-export — public consumer-facing item spec type;對齊 BreadcrumbProps API contract,允許 consumer 構造 items array 外部\nexport interface BreadcrumbItemSpec {\n  label: React.ReactNode\n  href?: string\n  asChild?: boolean\n  /**\n   * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。\n   * 業界慣例:Breadcrumb 首項用 Home icon 強化視覺錨點(Material / Atlassian)。\n   * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT(sm/md=16, lg=20,對齊 uiSize.spec.md Icon Size Tier)。\n   * Consumer **不傳** size,DS 統一管。\n   */\n  startIcon?: LucideIcon\n}\n\ninterface BreadcrumbListProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'children'> {\n  /**\n   * 字體尺寸 — 依據與之配對的 page title 選擇:\n   *   sm  → 配 text-h4(20) title (Dialog / panel / drawer)\n   *   md  → 配 text-h3(24) title (一般頁面 header,預設)\n   *   lg  → 配 text-h2(32) title (Detail page hero / landing)\n   */\n  size?: BreadcrumbSize\n  /**\n   * Declarative items mode(opt-in)。當 provided 時 `children` 被忽略,List 內部自動:\n   *  - 插 separator\n   *  - 末位 spec(無 `href`)自動 BreadcrumbPage(per Title-breadcrumb-end SSOT)\n   *  - 超 `maxItems` auto-collapse 中段成 BreadcrumbEllipsis + DropdownMenu(對齊 Material UI\n   *    source `renderItemsBeforeAndAfter`)\n   */\n  items?: BreadcrumbItemSpec[]\n  /**\n   * Auto-collapse 閾值。Default 4(user-tuned;Material UI source 預設 8)。`items.length > maxItems`\n   * 才 collapse。\n   */\n  maxItems?: number\n  /** Collapse 後保留首 N 個(default 1)。對齊 Material UI source default。 */\n  itemsBeforeCollapse?: number\n  /** Collapse 後保留末 N 個(default 1)。對齊 Material UI source default。 */\n  itemsAfterCollapse?: number\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — items props × children narrowing × collapse-with-overflow × tooltip 4 軸組合在 BreadcrumbList,拆 sub-fn 會跨 fn 傳 itemsBeforeCollapse/After collapsed-tooltip refs\nconst BreadcrumbList = React.forwardRef<HTMLOListElement, BreadcrumbListProps>(\n  ({ className, size = 'md', items, maxItems = 4, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, children, ...props }, ref) => {\n    // Memoize provider value(2026-04-22 D3 perf audit):單 field wrapper memoize\n    const ctxValue = React.useMemo(() => ({ size }), [size])\n\n    // Declarative mode(items prop provided):自動 render + auto-collapse\n    const declarativeContent = React.useMemo(() => {\n      if (!items) return null\n      // 2026-07-04 修:非字串 label 的 key 原用 Math.random() → 每次 render 新 key 造成\n      // BreadcrumbItem unmount/remount(重置 TruncatedText ResizeObserver 與 state)→ 改 stable idx key\n      const renderItem = (spec: BreadcrumbItemSpec, role: 'root' | 'middle' | 'current', idx: number) => (\n        <BreadcrumbItem key={`${role}-${typeof spec.label === 'string' ? spec.label : idx}`} role={role}>\n          {role === 'current'\n            ? <BreadcrumbPage startIcon={spec.startIcon}>\n                <TruncatedText display=\"block\" tooltip={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedText>\n              </BreadcrumbPage>\n            : <BreadcrumbLink href={spec.href} asChild={spec.asChild} startIcon={spec.startIcon}>\n                <TruncatedText display=\"block\" tooltip={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedText>\n              </BreadcrumbLink>\n          }\n        </BreadcrumbItem>\n      )\n\n      const shouldCollapse = items.length > maxItems\n      const beforeN = Math.max(0, itemsBeforeCollapse)\n      const afterN = Math.max(1, itemsAfterCollapse)  // 末位永遠 ≥ 1(current page)\n\n      type VisibleItem = { spec: BreadcrumbItemSpec; role: 'root' | 'middle' | 'current' }\n      let visible: Array<VisibleItem | { ellipsisOf: BreadcrumbItemSpec[] }>\n      if (!shouldCollapse) {\n        visible = items.map((spec, i) => ({\n          spec,\n          role: i === 0 ? 'root' : (i === items.length - 1 ? 'current' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n      } else {\n        const before = items.slice(0, beforeN).map((spec, i) => ({\n          spec,\n          role: (i === 0 ? 'root' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n        const collapsed = items.slice(beforeN, items.length - afterN)\n        const after = items.slice(items.length - afterN).map((spec, i, arr) => ({\n          spec,\n          role: (i === arr.length - 1 ? 'current' : 'middle') as 'root' | 'middle' | 'current',\n        }))\n        visible = [...before, { ellipsisOf: collapsed }, ...after]\n      }\n\n      // Interleave with separators\n      const rendered: React.ReactNode[] = []\n      visible.forEach((entry, i) => {\n        if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-${i}`} />)\n        if ('ellipsisOf' in entry) {\n          rendered.push(\n            <BreadcrumbItem key=\"ellipsis\" role=\"ellipsis\">\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <BreadcrumbEllipsis />\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"start\">\n                  {entry.ellipsisOf.map((s, j) => (\n                    <DropdownMenuItem key={j} asChild={!!s.href}>\n                      {s.href ? <a href={s.href}>{s.label}</a> : <span>{s.label}</span>}\n                    </DropdownMenuItem>\n                  ))}\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </BreadcrumbItem>\n          )\n        } else {\n          rendered.push(renderItem(entry.spec, entry.role, i))\n        }\n      })\n      return rendered\n    }, [items, maxItems, itemsBeforeCollapse, itemsAfterCollapse])\n\n    // 2026-05-12 fix(user 抓 image 2 Deep story 違反 single-line + max-levels canonical):\n    // Compositional path 也走 auto-collapse + flex-shrink hierarchy。Walk children, 找\n    // BreadcrumbItem 並按 index 分派 role (first=root / last=current / middle=middle)。\n    // > maxItems 自動 collapse 中段成 ellipsis(對齊 declarative path canonical SSOT)。\n    const compositionalContent = React.useMemo(() => {\n      if (items) return null\n      const childArr = React.Children.toArray(children)\n      // 抓 BreadcrumbItem children(skip BreadcrumbSeparator — auto re-interleave)\n      // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):type-identity primary path + displayName fallback。\n      // 純 `displayName` check 在 HOC / React.memo / consumer alias 場景脆弱(production build / wrap\n      // 可能改寫 displayName)。`c.type === BreadcrumbItem` 是 React fiber reference-identity 最穩\n      // primary(對齊 Radix children-walk pattern);displayName fallback 給 HOC 場景。\n      const itemChildren = childArr.filter((c): c is React.ReactElement<BreadcrumbItemProps> =>\n        React.isValidElement(c) && (c.type === BreadcrumbItem ||\n          (c.type as React.ComponentType)?.displayName === 'BreadcrumbItem')\n      )\n      // 無 item 或全是 separator → pass-through(consumer raw children,e.g. spinners)\n      if (itemChildren.length === 0) return children\n      // Assign role by position; clone with role prop\n      const total = itemChildren.length\n      const cloneWithRole = (item: React.ReactElement<BreadcrumbItemProps>, idx: number, role: 'root' | 'middle' | 'current') =>\n        React.cloneElement(item, { role: item.props.role ?? role, key: `bc-${role}-${idx}` })\n      const shouldCollapse = total > maxItems\n      const beforeN = Math.max(0, itemsBeforeCollapse)\n      const afterN = Math.max(1, itemsAfterCollapse)\n      const rendered: React.ReactNode[] = []\n      if (!shouldCollapse) {\n        itemChildren.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-${i}`} />)\n          const role: 'root' | 'middle' | 'current' = i === 0 ? 'root' : (i === total - 1 ? 'current' : 'middle')\n          rendered.push(cloneWithRole(item, i, role))\n        })\n      } else {\n        // before(first N) + ellipsis + after(last M)\n        const beforeItems = itemChildren.slice(0, beforeN)\n        const collapsedItems = itemChildren.slice(beforeN, total - afterN)\n        const afterItems = itemChildren.slice(total - afterN)\n        beforeItems.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-bef-${i}`} />)\n          const role: 'root' | 'middle' = i === 0 ? 'root' : 'middle'\n          rendered.push(cloneWithRole(item, i, role))\n        })\n        if (rendered.length > 0) rendered.push(<BreadcrumbSeparator key=\"sep-ellipsis-before\" />)\n        rendered.push(\n          <BreadcrumbItem key=\"bc-ellipsis\" role=\"ellipsis\">\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <BreadcrumbEllipsis />\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"start\">\n                {collapsedItems.map((item, j) => {\n                  // 2026-05-12 Round 4.5 fix(codex M31 Layer C 抓):consumer BreadcrumbItem children 常包\n                  // `<BreadcrumbLink href>` = anchor button-like。直接放進 `<DropdownMenuItem>` 會 nested\n                  // interactive(menuitem within button violates HTML / a11y)。Fix:把實際 link 元素接到\n                  // menuitem `asChild`,對齊 declarative path canonical pattern。\n                  // 2026-07-19 fix(DA3 對抗稽核抓):原只讀 `c.props.href` → `<BreadcrumbLink asChild>\n                  //   <RouterLink to=…>` 這種(BreadcrumbLink 無 href、RouterLink child 帶 `to`)摺疊後\n                  //   dropdown 失去導航目標。修:asChild 時**保留整個 link 子元素**(RouterLink/<Link to>/<a>,\n                  //   含 to/href/onClick/state 全 forward,前端路由不退化成整頁重載);純 href 才重建 <a>。\n                  const innerChildren = (item.props as { children?: React.ReactNode }).children\n                  let menuChild: React.ReactNode | undefined  // 接進 menuitem(asChild)的實際 link 元素\n                  let label: React.ReactNode = innerChildren   // fallback:無 link 時的純內容\n                  React.Children.forEach(innerChildren, (c) => {\n                    if (!React.isValidElement<{ href?: string; asChild?: boolean; children?: React.ReactNode }>(c)) return\n                    if (c.props.asChild && React.isValidElement(c.props.children)) {\n                      // BreadcrumbLink asChild → 實際 link = 其 child(RouterLink / <Link to> / <a>),整個保留\n                      menuChild = c.props.children\n                      const grand = (c.props.children.props as { children?: React.ReactNode }).children\n                      if (grand != null) label = grand\n                    } else if (c.props.href != null) {\n                      // BreadcrumbLink href → 重建 <a href>(對齊原 canonical，避免 nested interactive)\n                      menuChild = <a href={c.props.href}>{c.props.children}</a>\n                      if (c.props.children != null) label = c.props.children\n                    }\n                  })\n                  return menuChild\n                    ? <DropdownMenuItem key={`collapsed-${j}`} asChild>{menuChild}</DropdownMenuItem>\n                    : <DropdownMenuItem key={`collapsed-${j}`}>{label}</DropdownMenuItem>\n                })}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </BreadcrumbItem>\n        )\n        rendered.push(<BreadcrumbSeparator key=\"sep-ellipsis-after\" />)\n        afterItems.forEach((item, i) => {\n          if (i > 0) rendered.push(<BreadcrumbSeparator key={`sep-aft-${i}`} />)\n          const role: 'middle' | 'current' = i === afterItems.length - 1 ? 'current' : 'middle'\n          rendered.push(cloneWithRole(item, i, role))\n        })\n      }\n      return rendered\n    }, [items, children, maxItems, itemsBeforeCollapse, itemsAfterCollapse])\n\n    return (\n    <BreadcrumbContext.Provider value={ctxValue}>\n      <ol\n        ref={ref}\n        // gap-1 (4px) — separator 與兩邊 items 間距;緊湊節奏,符合 breadcrumb 密集流動感。\n        // 2026-05-10 Phase A single-line canonical(per user + Material UI source verified):\n        //   `flex-nowrap` 不 wrap。長路徑走中段折疊。\n        // 2026-05-12 fix:compositional 也走 auto-collapse + role-assignment(`compositionalContent`)\n        //   → declarative / compositional 兩 path 都符合 single-line + max-levels + width 分配 canonical SSOT。\n        className={cn(\n          'flex flex-nowrap items-center gap-1 text-fg-secondary leading-compact min-w-0',\n          BREADCRUMB_TEXT_CLASS[size],\n          className\n        )}\n        {...props}\n      >\n        {items ? declarativeContent : compositionalContent}\n      </ol>\n    </BreadcrumbContext.Provider>\n    )\n  },\n)\nBreadcrumbList.displayName = 'BreadcrumbList'\n\n// ── BreadcrumbItem (li) ──────────────────────────────────────────────────────\n\n/**\n * Phase B(2026-05-10):`role` prop emit `data-bc-role` attr → CSS flex-shrink hierarchy。\n * Per BreadcrumbItem 在 row 中的角色決定 shrink 優先級:\n *   - `root`(首位)→ shrink:3(縮最積極;root context 可弱化)\n *   - `middle`(中段)→ shrink:2\n *   - `current`(末位 / page)→ shrink:1(最後縮;a11y current page anchor)\n *   - `ellipsis`(BreadcrumbEllipsis 包裝)→ shrink:0(永遠完整 ⋯)\n *\n * 設計回應 user 兩 challenges:\n *   (a) Root 也 truncate(shrink:3,不是 shrink-0)\n *   (b) 不用 fixed max-width — flex-shrink hierarchy 容器寬時自然展開不浪費空間,\n *       窄時按優先級縮 + TruncatedText 內部 CSS truncate + tooltip。\n */\ninterface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<'li'> {\n  role?: 'root' | 'middle' | 'current' | 'ellipsis'\n}\n\nconst BreadcrumbItem = React.forwardRef<HTMLLIElement, BreadcrumbItemProps>(\n  ({ className, role, style, ...props }, ref) => {\n    // 2026-05-20 fix v3(user 抓「專案 後方多 4px 間距 / 我的新專案 沒有」chevron 不對稱):\n    //   v2 `minWidth: '2rem'`(32px)在寬容器強制 li ≥ 32px → 短 label「專案」(natural ~28px)\n    //   被撐 4px,長 label「我的新專案」(natural ~70px)hug content → chevron 兩側不對稱。\n    //\n    // v3 解法:minWidth `2rem` → `1.5rem`(24px)\n    //   數學:中文「X…」最小寬度 = 1 char(~14-16px)+ ellipsis(~6-8px)≈ 22-24px → 24px 剛 cover\n    //   結果:\n    //     - 寬容器:所有自然 label ≥ 24px → li hug content,chevron 緊貼,對稱(本 fix 主目的)\n    //     - 窄容器 truncate:shrink 不過 24px → 「X…」仍可見 ellipsis 保險\n    //     - 短英文「OK / ID」(natural ~20px)→ 多 ~4px(原 12px → 縮到 4px,顯著改善)\n    //   對齊 user verbatim「minWidth 再調小一點」+ ellipsis 數學最小值。\n    const shrinkStyle: React.CSSProperties = role === 'root' ? { flexShrink: 3, minWidth: '1.5rem' }\n      : role === 'middle' ? { flexShrink: 2, minWidth: '1.5rem' }\n      : role === 'current' ? { flexShrink: 1, minWidth: '1.5rem' }\n      : role === 'ellipsis' ? { flexShrink: 0 }\n      : {}\n    return (\n      <li\n        ref={ref}\n        data-bc-role={role}\n        className={cn('inline-flex items-center min-w-0', className)}\n        style={{ ...shrinkStyle, ...style }}\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\n// ── BreadcrumbLink (a) ───────────────────────────────────────────────────────\n\ninterface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {\n  /** 將樣式套用至子元件(e.g. React Router Link) */\n  asChild?: boolean\n  /**\n   * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。\n   * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT,DS 統一尺寸不允許 consumer override。\n   * 對齊 uiSize.spec.md Icon Size Tier(2026-05-18 撤回 14 例外,統一 16/16/20)。\n   */\n  startIcon?: LucideIcon\n}\n\nconst BreadcrumbLink = React.forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(\n  ({ asChild, className, children, startIcon: StartIcon, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    // 2026-05-12 fix(user 抓 image 2 Deep story 麵包屑沒符合 single-line + truncate canonical):\n    // 純文字 children → auto-wrap TruncatedText(canonical「single-line + ellipsis + tooltip\n    // on truncate」per spec.md / Polaris breadcrumb)。Non-string children(consumer 自訂 icon+text\n    // 結構)→ pass-through 不 force-wrap(consumer own truncate)。\n    const wrappedChildren = typeof children === 'string'\n      ? <TruncatedText display=\"block\" tooltip={children}>{children}</TruncatedText>\n      : children\n    const sharedClassName = cn(\n      'inline-flex items-center gap-2',\n      'min-w-0 max-w-full',\n      'text-fg-secondary',\n      // hover 字色瞬間切換,不寫 transition-colors(tokens/motion/motion.spec.md「hover 回饋不做過渡」;2026-09-26 由底色延伸到字色,待辦總帳 L9 / N4(3))\n      'hover:text-primary-hover',\n      'rounded-md',\n      className\n    )\n    // 2026-05-25 fix(user 抓 Breadcrumb asChild story React.Children.only runtime fail):\n    // Radix Slot 規範 children 必為單 element;原 unified Comp render 在 asChild path 內\n    // 仍輸出「{StartIcon && ...} + {wrappedChildren}」雙 JSX expression → Slot 收到 array\n    // → React.Children.only(array) throws「expected to receive a single React element child」。\n    // 分支 render 解 — asChild path 只傳 consumer-supplied child(icon 由 consumer 自管,\n    // 對齊 Radix Slot canonical「single child contract」);非 asChild path 維持原 native\n    // <a> + DS-controlled icon + wrapped label。\n    if (asChild) {\n      return (\n        <Slot ref={ref} className={sharedClassName} {...props}>\n          {wrappedChildren}\n        </Slot>\n      )\n    }\n    return (\n      <a ref={ref} className={sharedClassName} {...props}>\n        {StartIcon && <StartIcon size={BREADCRUMB_ICON_SIZE[size]} aria-hidden className=\"shrink-0\" />}\n        {wrappedChildren}\n      </a>\n    )\n  }\n)\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\n// ── BreadcrumbPage (current, non-clickable) ──────────────────────────────────\n\ninterface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<'span'> {\n  /** 起始 icon。內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT。對齊 BreadcrumbLink. */\n  startIcon?: LucideIcon\n}\n\nconst BreadcrumbPage = React.forwardRef<HTMLSpanElement, BreadcrumbPageProps>(\n  ({ className, children, startIcon: StartIcon, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    // 2026-05-12 fix(同 BreadcrumbLink):純文字 children → auto-wrap TruncatedText。\n    const wrappedChildren = typeof children === 'string'\n      ? <TruncatedText display=\"block\" tooltip={children}>{children}</TruncatedText>\n      : children\n    return (\n      <span\n        ref={ref}\n        role=\"link\"\n        aria-disabled=\"true\"\n        aria-current=\"page\"\n        className={cn('inline-flex items-center gap-2 min-w-0 max-w-full text-foreground', className)}\n        {...props}\n      >\n        {StartIcon && <StartIcon size={BREADCRUMB_ICON_SIZE[size]} aria-hidden className=\"shrink-0\" />}\n        {wrappedChildren}\n      </span>\n    )\n  }\n)\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\n// ── BreadcrumbSeparator ──────────────────────────────────────────────────────\n\ninterface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<'li'> {\n  children?: React.ReactNode\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst BreadcrumbSeparator = React.forwardRef<HTMLLIElement, BreadcrumbSeparatorProps>(\n  ({ children, className, ...props }, ref) => {\n    const { size } = React.useContext(BreadcrumbContext)\n    return (\n      <li\n        ref={ref}\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        // Phase B(2026-05-10):separator 永遠 shrink-0(必完整顯示,否則 path 視覺斷裂)\n        className={cn('inline-flex items-center text-fg-muted shrink-0', className)}\n        {...props}\n      >\n        {children ?? <ChevronRight size={BREADCRUMB_ICON_SIZE[size]} aria-hidden />}\n      </li>\n    )\n  }\n)\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n// ── BreadcrumbEllipsis ───────────────────────────────────────────────────────\n\n/**\n * BreadcrumbEllipsis — 折疊路徑的 \"⋯\" 按鈕\n *\n * 2026-05-10 重寫:消費 `ItemInlineActionButton`(primitive SSOT)取代自刻 `<button>`。\n * Per inline-action.spec.md L106-131 predicate Q1+Q2+Q3 全指向 Inline Action:\n *   - Q1 點了要做事嗎?是(展開折疊路徑 dropdown)\n *   - Q2 位置?BreadcrumbList row inline flow(host 內)\n *   - Q3 row 多大?14-16px text row(compact tier)→ Inline Action\n * + 對齊 M1「視覺決策前必消費 SSOT」+ Mindset #2「優先消費既有」。\n *\n * 配合 DropdownMenuTrigger asChild 使用:\n *\n * ```tsx\n * <DropdownMenu>\n *   <DropdownMenuTrigger asChild>\n *     <BreadcrumbEllipsis />\n *   </DropdownMenuTrigger>\n *   <DropdownMenuContent>\n *     <DropdownMenuItem asChild><a href=\"/org\">組織</a></DropdownMenuItem>\n *   </DropdownMenuContent>\n * </DropdownMenu>\n * ```\n *\n * `overlayTrigger=true` 視覺鎖:DropdownMenu open 期間 button 維持 hover bg(對齊\n * shadcn / Radix Themes / Material 的 overlay trigger canonical,inline-action.spec.md\n * 「Overlay trigger canonical」段)。\n */\ntype BreadcrumbEllipsisProps = Omit<React.ComponentPropsWithoutRef<typeof ItemInlineActionButton>, 'icon' | 'size'>\n\nconst BreadcrumbEllipsis = React.forwardRef<HTMLButtonElement, BreadcrumbEllipsisProps>(\n  ({ 'aria-label': ariaLabel = '顯示折疊路徑' /* i18n-allow: DS default; consumer override via aria-label prop */, ...props }, ref) => {\n    return (\n      <ItemInlineActionButton\n        ref={ref}\n        icon={MoreHorizontal}\n        size=\"md\"  // Breadcrumb 不在 RowSizeProvider 樹內,固定 md(16px icon + 18px hover bg,對齊 inline-action.spec.md 尺寸表)\n        aria-label={ariaLabel}\n        overlayTrigger\n        {...props}\n      />\n    )\n  }\n)\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\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 breadcrumbMeta = {\n  component: 'Breadcrumb',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n    // 值源 = code SSOT:BREADCRUMB_TEXT_CLASS(sm/md=text-body, lg=text-body-lg)+ BREADCRUMB_ICON_SIZE(sm/md=16, lg=20)。\n    // Breadcrumb 是文字列無固定高度 token,故不列 height(對照 Tag meta 有自身 h-* 才列)。\n    sm: { iconSize: 16, typography: 'body' },\n    md: { iconSize: 16, typography: 'body' },\n    lg: { iconSize: 20, typography: 'body-lg' },\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: [],\n    fg: ['text-fg-muted', 'text-fg-secondary', 'text-foreground'],\n    ring: ['--ring'],\n  },\n} as const\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\nexport type { BreadcrumbSize, BreadcrumbListProps, BreadcrumbEllipsisProps }\n// BreadcrumbItemSpec 已在上方 `export interface BreadcrumbItemSpec` 直接 export\n"],"names":[],"mappings":"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"}

package/dist/components/BulkActionBar/bulk-action-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,8GAA8G;IAC9G,gBAAgB,EAAE,MAAM,CAAA;IACxB,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,eAAO,MAAM,8BAA8B,EAAE,mBAK5C,CAAA;AAID,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,wCAAwC;IACxC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACtC;AAeD,QAAA,MAAM,aAAa,2FAsElB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;CAUpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACxC,8GAA8G;IAC9G,gBAAgB,EAAE,MAAM,CAAA;IACxB,oFAAoF;IACpF,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAGD,eAAO,MAAM,8BAA8B,EAAE,mBAK5C,CAAA;AAID,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,wCAAwC;IACxC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAA;IAC5B,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACtC;AAeD,QAAA,MAAM,aAAa,2FAoGlB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;CAUpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/BulkActionBar/bulk-action-bar.js

@@ -12,15 +12,40 @@ const BULK_ACTION_BAR_DEFAULT_LABELS = {
 };
 const BulkActionBar = React.forwardRef(
   function BulkActionBar2({ selection, onClearSelection, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props }, ref) {
+    const { onFocus: _onFocus, onBlur: _onBlur, ...propsWithoutFocusHandlers } = props;
     const labels = React.useMemo(
       () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),
       [labelsOverride]
     );
-    if (selection.length === 0 && (totalSelected ?? 0) === 0) return null;
+    const visible = !(selection.length === 0 && (totalSelected ?? 0) === 0);
+    const focusWithinRef = React.useRef(false);
+    const returnFocusToRef = React.useRef(null);
+    React.useLayoutEffect(() => {
+      if (visible || !focusWithinRef.current) return;
+      focusWithinRef.current = false;
+      const target = returnFocusToRef.current;
+      returnFocusToRef.current = null;
+      if (target && target.isConnected && (document.activeElement === document.body || document.activeElement === null)) {
+        target.focus({ preventScroll: true });
+      }
+    }, [visible]);
+    if (!visible) return null;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
+        onFocus: (e) => {
+          var _a;
+          (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+          focusWithinRef.current = true;
+          const from = e.relatedTarget;
+          if (from && !e.currentTarget.contains(from)) returnFocusToRef.current = from;
+        },
+        onBlur: (e) => {
+          var _a;
+          (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+          if (!e.currentTarget.contains(e.relatedTarget)) focusWithinRef.current = false;
+        },
         role: "group",
         "aria-label": labels.ariaLabel ?? labels.toolbarAriaLabel,
         className: cn(
@@ -30,7 +55,7 @@ const BulkActionBar = React.forwardRef(
           "border-t border-divider",
           className
         ),
-        ...props,
+        ...propsWithoutFocusHandlers,
         children: [
           onClearSelection && /* @__PURE__ */ jsx(
             Button,

package/dist/components/BulkActionBar/bulk-action-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-action-bar.js","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\n\n// ── 消費的 SSOT ───────────────────────────────────────────────────────────────\n// - bulk-action-bar.spec.md(本元件 SSOT)\n// - DataTable/data-table.spec.md「L2 選取」(整合方式)\n// - button.spec.md + button-group.tsx(action variant=tertiary,size=md,\n//   gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 md)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 title ReactNode 帶 inline link CTA\n\n// ── i18n labels ─────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — public API per spec.md(consumer i18n override hook)\nexport interface BulkActionBarLabels {\n  count: (n: number) => string\n  clear: string\n  hiddenSuffix: (hidden: number) => string\n  /** @deprecated 2026-07-06 role 已降級 \"group\"(user 拍板),改用 `ariaLabel`;此 key 保留 backward-compat(值仍作 fallback)。 */\n  toolbarAriaLabel: string\n  /** root `role=\"group\"` 的 aria-label(2026-07-06 新名;未傳 fallback toolbarAriaLabel)。 */\n  ariaLabel?: string\n}\n\n// code-quality-allow: dead-export — public API per spec.md(consumer spread + override)\nexport const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels = {\n  count: (n) => `已選 ${n} 項`,\n  clear: '清除選取',\n  hiddenSuffix: (hidden) => `· ${hidden} 個被 filter 隱藏`,\n  toolbarAriaLabel: '批次操作',\n}\n\n// ── Props ───────────────────────────────────────────────────────────────────\n\nexport interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 已選 ID,length === 0 時自動隱藏(回傳 null) */\n  selection: readonly string[]\n  /** Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) */\n  onClearSelection?: () => void\n  /** 批次 actions(consumer 提供 md Button,一律 variant=tertiary；不用 primary/danger) */\n  actions?: React.ReactNode\n  /** Filter 模式:hidden 數量,顯示在 count 區 inline「已選 {N} 項 · {M} 個被 filter 隱藏」 */\n  hiddenByFilter?: number\n  /**\n   * 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar\n   * 仍顯「已選 50 項」regression):\n   * - undefined / null(default):count 走 `selection.length`(page-level 視覺選取)\n   * - number:count 走此數值(整個 dataset 擴選後 user 已選的真總數)\n   *\n   * Canonical pattern:consumer 把 BulkActionBar 跟「Alert info banner(提示擴選 dataset)」\n   * 一起 mount,Alert 點「點此選取全部 N 個」→ setTotalSelected(N) → BulkActionBar count 同步。\n   * 對齊 Gmail / Linear / Notion 全選 dataset hint pattern。\n   * 詳 `bulk-action-bar.spec.md`「Extend dataset pattern」段。\n   */\n  totalSelected?: number | null\n  /** i18n labels(Partial,merge with default) */\n  labels?: Partial<BulkActionBarLabels>\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n// 視覺結構(同 SurfaceFooter / DataTable toolbar canonical):\n//   px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]\n//   gap-2 between elements\n//   全 md Buttons(same-row consistency)\n//   <ButtonDivider /> 自帶 mx-1 = 12px 視覺距離\n//\n// Hint banner(擴 dataset 提示)完全外包給 Alert 元件 — consumer 視 ref 圖\n// 黏在 BulkActionBar 上方/下方,用 Alert variant=\"info\" placement=\"fixed\"\n// title={inline link JSX}。BulkActionBar 自己不再有 hint banner slot。\n//\n// 浮起 / fixed positioning 由 consumer wrap 決定(BulkActionBar 不限定 placement)。\n\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n  function BulkActionBar(\n    { selection, onClearSelection, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props },\n    ref\n  ) {\n    const labels: BulkActionBarLabels = React.useMemo(\n      () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),\n      [labelsOverride]\n    )\n\n    // selection.length === 0 自動藏(對齊 spec 禁止事項 #3)。\n    // 反向選取(DataTable all 模式)例外:visible 全被 excluded 但 totalSelected>0 仍有選取 → 顯示(2026-06-22)\n    if (selection.length === 0 && (totalSelected ?? 0) === 0) return null\n\n    return (\n      <div\n        ref={ref}\n        // 2026-07-06 user 拍板:role \"toolbar\" → \"group\" — 原宣告 toolbar 但未實作 APG toolbar\n        // 方向鍵 roving 契約(AT 告知「工具列」但方向鍵無反應 = 空承諾);group 語意誠實,\n        // Tab 序照 DOM(spec 本有 canonical),Gmail / Linear bulk bar 實務同款。\n        role=\"group\"\n        aria-label={labels.ariaLabel ?? labels.toolbarAriaLabel}\n        className={cn(\n          'flex items-center gap-2',\n          'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n          // 上分隔線:bottom toolbar canonical(Linear / Apple Mail / Notion 共識)— 視覺從上方內容收尾\n          'border-t border-divider',\n          className\n        )}\n        {...props}\n      >\n        {/* X close — md dismiss(2026-05-04 spec update:default placement = footer variant,\n            visual weight 對齊 Dialog footer commitment buttons md;same-row consistency 維持)\n            未來若有 top-toolbar variant(覆蓋 sm-density toolbar)→ 該 variant override sm */}\n        {onClearSelection && (\n          <Button\n            variant=\"text\"\n            size=\"md\"\n            iconOnly\n            dismiss\n            startIcon={X}\n            aria-label={labels.clear}\n            onClick={onClearSelection}\n          />\n        )}\n\n        {/* count + filter hidden inline\n            color canonical(2026-05-04):count = primary foreground + medium weight\n            理由:count 是 state-bearing 主資訊(「你在 selection mode + N items」),非裝飾\n            World-class 共識:Linear/Notion/Carbon/Polaris 均用 primary foreground;muted 化弱化 state signal\n            hiddenByFilter suffix 維持 muted(這是次資訊,視覺層次正確) */}\n        {/* 2026-05-31 #3:aria-live 通知 SR 選取數變更;#20:補 font-medium 對齊 spec「Count text color canonical」表 + 上方 comment(state-bearing 主資訊) */}\n        <span className=\"text-body text-foreground font-medium tabular-nums\" aria-live=\"polite\" aria-atomic=\"true\">\n          {/* 2026-05-13:totalSelected override 走 dataset 擴選後真總數,否則 fallback page-level selection.length */}\n          {labels.count(typeof totalSelected === 'number' ? totalSelected : selection.length)}\n          {hiddenByFilter !== undefined && hiddenByFilter > 0 && (\n            <span className=\"text-fg-muted font-normal\"> {labels.hiddenSuffix(hiddenByFilter)}</span>\n          )}\n        </span>\n\n        {/* divider */}\n        {actions && <ButtonDivider />}\n\n        {/* batch actions slot(consumer 提供 md Buttons) */}\n        {actions && (\n          <div className=\"flex items-center gap-2 flex-1 min-w-0\">{actions}</div>\n        )}\n      </div>\n    )\n  }\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\n// Story auto-compile metadata\nexport const bulkActionBarMeta = {\n  component: 'BulkActionBar',\n  family: null,\n  variants: {},\n  sizes: {},\n  states: ['default'],\n  tokens: {\n    fg: ['text-foreground', 'text-fg-muted'],\n    border: ['border-divider'],\n  },\n} as const\n\nexport { BulkActionBar }\n"],"names":["BulkActionBar"],"mappings":";;;;;;AA8BO,MAAM,iCAAsD;AAAA,EACjE,OAAO,CAAC,MAAM,MAAM,CAAC;AAAA,EACrB,OAAO;AAAA,EACP,cAAc,CAAC,WAAW,KAAK,MAAM;AAAA,EACrC,kBAAkB;AACpB;AA0CA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eACP,EAAE,WAAW,kBAAkB,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GAC7G,KACA;AACA,UAAM,SAA8B,MAAM;AAAA,MACxC,OAAO,EAAE,GAAG,gCAAgC,GAAG;MAC/C,CAAC,cAAc;AAAA,IAAA;AAKjB,QAAI,UAAU,WAAW,MAAM,iBAAiB,OAAO,EAAG,QAAO;AAEjE,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QAIA,MAAK;AAAA,QACL,cAAY,OAAO,aAAa,OAAO;AAAA,QACvC,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAKH,UAAA;AAAA,UAAA,oBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,SAAO;AAAA,cACP,WAAW;AAAA,cACX,cAAY,OAAO;AAAA,cACnB,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,+BAUZ,QAAA,EAAK,WAAU,sDAAqD,aAAU,UAAS,eAAY,QAEjG,UAAA;AAAA,YAAA,OAAO,MAAM,OAAO,kBAAkB,WAAW,gBAAgB,UAAU,MAAM;AAAA,YACjF,mBAAmB,UAAa,iBAAiB,KAChD,qBAAC,QAAA,EAAK,WAAU,6BAA4B,UAAA;AAAA,cAAA;AAAA,cAAE,OAAO,aAAa,cAAc;AAAA,YAAA,EAAA,CAAE;AAAA,UAAA,GAEtF;AAAA,UAGC,+BAAY,eAAA,EAAc;AAAA,UAG1B,WACC,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIzE;AACF;AACA,cAAc,cAAc;AAGrB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB,eAAe;AAAA,IACvC,QAAQ,CAAC,gBAAgB;AAAA,EAAA;AAE7B;"}
+{"version":3,"file":"bulk-action-bar.js","sources":["../../../src/components/BulkActionBar/bulk-action-bar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ButtonDivider } from '@/design-system/components/Button/button-group'\n\n// ── 消費的 SSOT ───────────────────────────────────────────────────────────────\n// - bulk-action-bar.spec.md(本元件 SSOT)\n// - DataTable/data-table.spec.md「L2 選取」(整合方式)\n// - button.spec.md + button-group.tsx(action variant=tertiary,size=md,\n//   gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 md)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 title ReactNode 帶 inline link CTA\n\n// ── i18n labels ─────────────────────────────────────────────────────────────\n\n// code-quality-allow: dead-export — public API per spec.md(consumer i18n override hook)\nexport interface BulkActionBarLabels {\n  count: (n: number) => string\n  clear: string\n  hiddenSuffix: (hidden: number) => string\n  /** @deprecated 2026-07-06 role 已降級 \"group\"(user 拍板),改用 `ariaLabel`;此 key 保留 backward-compat(值仍作 fallback)。 */\n  toolbarAriaLabel: string\n  /** root `role=\"group\"` 的 aria-label(2026-07-06 新名;未傳 fallback toolbarAriaLabel)。 */\n  ariaLabel?: string\n}\n\n// code-quality-allow: dead-export — public API per spec.md(consumer spread + override)\nexport const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels = {\n  count: (n) => `已選 ${n} 項`,\n  clear: '清除選取',\n  hiddenSuffix: (hidden) => `· ${hidden} 個被 filter 隱藏`,\n  toolbarAriaLabel: '批次操作',\n}\n\n// ── Props ───────────────────────────────────────────────────────────────────\n\nexport interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** 已選 ID,length === 0 時自動隱藏(回傳 null) */\n  selection: readonly string[]\n  /** Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) */\n  onClearSelection?: () => void\n  /** 批次 actions(consumer 提供 md Button,一律 variant=tertiary；不用 primary/danger) */\n  actions?: React.ReactNode\n  /** Filter 模式:hidden 數量,顯示在 count 區 inline「已選 {N} 項 · {M} 個被 filter 隱藏」 */\n  hiddenByFilter?: number\n  /**\n   * 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar\n   * 仍顯「已選 50 項」regression):\n   * - undefined / null(default):count 走 `selection.length`(page-level 視覺選取)\n   * - number:count 走此數值(整個 dataset 擴選後 user 已選的真總數)\n   *\n   * Canonical pattern:consumer 把 BulkActionBar 跟「Alert info banner(提示擴選 dataset)」\n   * 一起 mount,Alert 點「點此選取全部 N 個」→ setTotalSelected(N) → BulkActionBar count 同步。\n   * 對齊 Gmail / Linear / Notion 全選 dataset hint pattern。\n   * 詳 `bulk-action-bar.spec.md`「Extend dataset pattern」段。\n   */\n  totalSelected?: number | null\n  /** i18n labels(Partial,merge with default) */\n  labels?: Partial<BulkActionBarLabels>\n}\n\n// ── Component ───────────────────────────────────────────────────────────────\n// 視覺結構(同 SurfaceFooter / DataTable toolbar canonical):\n//   px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]\n//   gap-2 between elements\n//   全 md Buttons(same-row consistency)\n//   <ButtonDivider /> 自帶 mx-1 = 12px 視覺距離\n//\n// Hint banner(擴 dataset 提示)完全外包給 Alert 元件 — consumer 視 ref 圖\n// 黏在 BulkActionBar 上方/下方,用 Alert variant=\"info\" placement=\"fixed\"\n// title={inline link JSX}。BulkActionBar 自己不再有 hint banner slot。\n//\n// 浮起 / fixed positioning 由 consumer wrap 決定(BulkActionBar 不限定 placement)。\n\nconst BulkActionBar = React.forwardRef<HTMLDivElement, BulkActionBarProps>(\n  function BulkActionBar(\n    { selection, onClearSelection, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props },\n    ref\n  ) {\n    const { onFocus: _onFocus, onBlur: _onBlur, ...propsWithoutFocusHandlers } = props\n    void _onFocus; void _onBlur\n    const labels: BulkActionBarLabels = React.useMemo(\n      () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),\n      [labelsOverride]\n    )\n\n    // selection.length === 0 自動藏(對齊 spec 禁止事項 #3)。\n    // 反向選取(DataTable all 模式)例外:visible 全被 excluded 但 totalSelected>0 仍有選取 → 顯示(2026-06-22)\n    const visible = !(selection.length === 0 && (totalSelected ?? 0) === 0)\n\n    // ── 焦點接力(2026-09-29,待辦總帳 N46 子項「批次動作列消失後焦點回表格」;spec「a11y 預設」)──\n    // 選取清空 / 批次動作把選取消掉時本列整個卸載;鍵盤使用者若正停在列內(清除 × 或某個動作鈕),焦點會掉到 body、\n    // 下一次 Tab 從文件開頭重來。卸載時把焦點還給「進入本列之前」的元素(通常是列的勾選框或表格),同 Dialog 的\n    // return-focus 契約;它已不在文件裡就不動。沒有新 prop:進入前的元素由 focus 事件的 relatedTarget 記下(內建 fallback,M23(f))。\n    const focusWithinRef = React.useRef(false)\n    const returnFocusToRef = React.useRef<HTMLElement | null>(null)\n    React.useLayoutEffect(() => {\n      if (visible || !focusWithinRef.current) return\n      focusWithinRef.current = false\n      const target = returnFocusToRef.current\n      returnFocusToRef.current = null\n      if (target && target.isConnected && (document.activeElement === document.body || document.activeElement === null)) {\n        target.focus({ preventScroll: true })\n      }\n    }, [visible])\n\n    if (!visible) return null\n\n    return (\n      <div\n        ref={ref}\n        onFocus={(e) => {\n          props.onFocus?.(e)\n          focusWithinRef.current = true\n          const from = e.relatedTarget as HTMLElement | null\n          if (from && !e.currentTarget.contains(from)) returnFocusToRef.current = from\n        }}\n        onBlur={(e) => {\n          props.onBlur?.(e)\n          if (!e.currentTarget.contains(e.relatedTarget as Node | null)) focusWithinRef.current = false\n        }}\n        // 2026-07-06 user 拍板:role \"toolbar\" → \"group\" — 原宣告 toolbar 但未實作 APG toolbar\n        // 方向鍵 roving 契約(AT 告知「工具列」但方向鍵無反應 = 空承諾);group 語意誠實,\n        // Tab 序照 DOM(spec 本有 canonical),Gmail / Linear bulk bar 實務同款。\n        role=\"group\"\n        aria-label={labels.ariaLabel ?? labels.toolbarAriaLabel}\n        className={cn(\n          'flex items-center gap-2',\n          'px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]',\n          // 上分隔線:bottom toolbar canonical(Linear / Apple Mail / Notion 共識)— 視覺從上方內容收尾\n          'border-t border-divider',\n          className\n        )}\n        {...propsWithoutFocusHandlers}\n      >\n        {/* X close — md dismiss(2026-05-04 spec update:default placement = footer variant,\n            visual weight 對齊 Dialog footer commitment buttons md;same-row consistency 維持)\n            未來若有 top-toolbar variant(覆蓋 sm-density toolbar)→ 該 variant override sm */}\n        {onClearSelection && (\n          <Button\n            variant=\"text\"\n            size=\"md\"\n            iconOnly\n            dismiss\n            startIcon={X}\n            aria-label={labels.clear}\n            onClick={onClearSelection}\n          />\n        )}\n\n        {/* count + filter hidden inline\n            color canonical(2026-05-04):count = primary foreground + medium weight\n            理由:count 是 state-bearing 主資訊(「你在 selection mode + N items」),非裝飾\n            World-class 共識:Linear/Notion/Carbon/Polaris 均用 primary foreground;muted 化弱化 state signal\n            hiddenByFilter suffix 維持 muted(這是次資訊,視覺層次正確) */}\n        {/* 2026-05-31 #3:aria-live 通知 SR 選取數變更;#20:補 font-medium 對齊 spec「Count text color canonical」表 + 上方 comment(state-bearing 主資訊) */}\n        <span className=\"text-body text-foreground font-medium tabular-nums\" aria-live=\"polite\" aria-atomic=\"true\">\n          {/* 2026-05-13:totalSelected override 走 dataset 擴選後真總數,否則 fallback page-level selection.length */}\n          {labels.count(typeof totalSelected === 'number' ? totalSelected : selection.length)}\n          {hiddenByFilter !== undefined && hiddenByFilter > 0 && (\n            <span className=\"text-fg-muted font-normal\"> {labels.hiddenSuffix(hiddenByFilter)}</span>\n          )}\n        </span>\n\n        {/* divider */}\n        {actions && <ButtonDivider />}\n\n        {/* batch actions slot(consumer 提供 md Buttons) */}\n        {actions && (\n          <div className=\"flex items-center gap-2 flex-1 min-w-0\">{actions}</div>\n        )}\n      </div>\n    )\n  }\n)\nBulkActionBar.displayName = 'BulkActionBar'\n\n// Story auto-compile metadata\nexport const bulkActionBarMeta = {\n  component: 'BulkActionBar',\n  family: null,\n  variants: {},\n  sizes: {},\n  states: ['default'],\n  tokens: {\n    fg: ['text-foreground', 'text-fg-muted'],\n    border: ['border-divider'],\n  },\n} as const\n\nexport { BulkActionBar }\n"],"names":["BulkActionBar"],"mappings":";;;;;;AA8BO,MAAM,iCAAsD;AAAA,EACjE,OAAO,CAAC,MAAM,MAAM,CAAC;AAAA,EACrB,OAAO;AAAA,EACP,cAAc,CAAC,WAAW,KAAK,MAAM;AAAA,EACrC,kBAAkB;AACpB;AA0CA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,SAASA,eACP,EAAE,WAAW,kBAAkB,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GAC7G,KACA;AACA,UAAM,EAAE,SAAS,UAAU,QAAQ,SAAS,GAAG,8BAA8B;AAE7E,UAAM,SAA8B,MAAM;AAAA,MACxC,OAAO,EAAE,GAAG,gCAAgC,GAAG;MAC/C,CAAC,cAAc;AAAA,IAAA;AAKjB,UAAM,UAAU,EAAE,UAAU,WAAW,MAAM,iBAAiB,OAAO;AAMrE,UAAM,iBAAiB,MAAM,OAAO,KAAK;AACzC,UAAM,mBAAmB,MAAM,OAA2B,IAAI;AAC9D,UAAM,gBAAgB,MAAM;AAC1B,UAAI,WAAW,CAAC,eAAe,QAAS;AACxC,qBAAe,UAAU;AACzB,YAAM,SAAS,iBAAiB;AAChC,uBAAiB,UAAU;AAC3B,UAAI,UAAU,OAAO,gBAAgB,SAAS,kBAAkB,SAAS,QAAQ,SAAS,kBAAkB,OAAO;AACjH,eAAO,MAAM,EAAE,eAAe,KAAA,CAAM;AAAA,MACtC;AAAA,IACF,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS,CAAC,MAAM;;AACd,sBAAM,YAAN,+BAAgB;AAChB,yBAAe,UAAU;AACzB,gBAAM,OAAO,EAAE;AACf,cAAI,QAAQ,CAAC,EAAE,cAAc,SAAS,IAAI,oBAAoB,UAAU;AAAA,QAC1E;AAAA,QACA,QAAQ,CAAC,MAAM;;AACb,sBAAM,WAAN,+BAAe;AACf,cAAI,CAAC,EAAE,cAAc,SAAS,EAAE,aAA4B,kBAAkB,UAAU;AAAA,QAC1F;AAAA,QAIA,MAAK;AAAA,QACL,cAAY,OAAO,aAAa,OAAO;AAAA,QACvC,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAKH,UAAA;AAAA,UAAA,oBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,SAAO;AAAA,cACP,WAAW;AAAA,cACX,cAAY,OAAO;AAAA,cACnB,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,+BAUZ,QAAA,EAAK,WAAU,sDAAqD,aAAU,UAAS,eAAY,QAEjG,UAAA;AAAA,YAAA,OAAO,MAAM,OAAO,kBAAkB,WAAW,gBAAgB,UAAU,MAAM;AAAA,YACjF,mBAAmB,UAAa,iBAAiB,KAChD,qBAAC,QAAA,EAAK,WAAU,6BAA4B,UAAA;AAAA,cAAA;AAAA,cAAE,OAAO,aAAa,cAAc;AAAA,YAAA,EAAA,CAAE;AAAA,UAAA,GAEtF;AAAA,UAGC,+BAAY,eAAA,EAAc;AAAA,UAG1B,WACC,oBAAC,OAAA,EAAI,WAAU,0CAA0C,UAAA,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIzE;AACF;AACA,cAAc,cAAc;AAGrB,MAAM,oBAAoB;AAAA,EAC/B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA,EACP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB,eAAe;AAAA,IACvC,QAAQ,CAAC,gBAAgB;AAAA,EAAA;AAE7B;"}

package/dist/components/Button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,cAAc;;;;;8EAkNnB,CAAA;AAKD,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AACD,yIAAyI;AACzI,QAAA,MAAM,kBAAkB,wCAAmD,CAAA;AAI3E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;IAChE,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IACpC,sDAAsD;IACtD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAcD,QAAA,MAAM,MAAM,uFA6NX,CAAA;AAGD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,QAAA,MAAM,cAAc;;;;;8EAiQnB,CAAA;AAKD,UAAU,uBAAuB;IAC/B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AACD,yIAAyI;AACzI,QAAA,MAAM,kBAAkB,wCAAmD,CAAA;AAI3E,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,IAAI,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACjE;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;IAChE,kFAAkF;IAClF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,SAAS,CAAA;IACpC,sDAAsD;IACtD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,oCAAoC;IACpC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,6DAA6D;IAC7D,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;OAmBG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAcD,QAAA,MAAM,MAAM,uFA0NX,CAAA;AAGD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Bb,CAAA;AAEV,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/Button/button.js

@@ -17,8 +17,12 @@ const buttonVariants = cva(
     // aria-disabled 給語意 + visual,但不 suppress functionality;functionality 由 consumer 阻 e.g.
     // RowDragHandle listeners 只在 canDrag spread)。**故意不加** `aria-disabled:pointer-events-none`
     // — Round 4 RowDragHandle Tooltip flicker fix root cause:aria-disabled buttons 必保 pointer events
-    // 讓 Radix Tooltip pointerenter 通過。HTML `disabled` 保 PE:none(完全 inactive)。
-    "disabled:pointer-events-none",
+    // 讓 Radix Tooltip pointerenter 通過。
+    // 2026-09-29(待辦總帳 N46 停用游標全站掃):原生 `disabled` 原本也掛 `pointer-events-none`(「完全 inactive」),
+    // 結果上面那句 `disabled:cursor-not-allowed` 從來沒生效 —— 沒有指標事件就沒有游標,全站 35 顆停用的 Button 家族
+    //(分頁箭頭 / 輪播箭頭 / AI 面板送出鈕)都是箭頭游標,違反 hit-area-canonical.md「停用的用禁止符號」。
+    // 現在停用不再切掉指標事件;滑過 / 按住的回饋改由各 variant 的 `disabled:hover:` / `disabled:active:` 顯式釘在停用靜止值
+    //(同 aria-disabled 的寫法;原生 disabled 的按鈕本來就不派發 click)。
     // 2026-05-12 fix v2(playwright pixel-quantified verify 抓 opacity=1 不生效):
     // `opacity-disabled` 是 custom Tailwind v4 `@utility`(opacity.css:21),variant prefix
     // `aria-disabled:` 跟 custom @utility 不 compose(`aria-disabled:cursor-not-allowed` 標準
@@ -37,10 +41,15 @@ const buttonVariants = cva(
           "bg-primary text-on-emphasis",
           "hover:bg-primary-hover",
           "active:bg-primary-active",
+          // 開啟中 = 自己的 hover(inline-action.spec.md:26「overlay 開啟 → 同 host hover」)。2026-09-29 待辦總帳 C13:
+          // 七家一手裡沒有任何一家「給部分 variant、獨獨豁免 primary」(Atlassian / Fluent 每個 appearance 含 primary 都給;
+          // Radix / shadcn / MUI / Ant / Carbon 全都不給);DS 早選了「給」,primary / link 缺的只是同一條規則的落地。
+          "data-[state=open]:bg-primary-hover",
           // aria-disabled 的 hover / active 釘在靜止(button.spec.md「狀態疊加」表 aria-disabled 列:與 disabled 同樣不給互動回饋;
-          // 原生 disabled 靠 pointer-events-none,aria-disabled 為了 Tooltip 保留指標事件,只能顯式釘住;先例 switch.tsx 的 `disabled:…:hover:` 守衛)
+          // 原生 disabled 與 aria-disabled 都顯式釘住(2026-09-29 前原生 disabled 靠 pointer-events-none,見檔頭);先例 switch.tsx 的 `disabled:…:hover:` 守衛)
           "aria-disabled:hover:bg-primary aria-disabled:active:bg-primary",
-          "disabled:bg-disabled disabled:text-fg-disabled disabled:border-transparent"
+          "disabled:bg-disabled disabled:text-fg-disabled disabled:border-transparent",
+          "disabled:hover:bg-disabled disabled:active:bg-disabled"
         ],
         secondary: [
           "bg-surface text-primary border-primary",
@@ -52,7 +61,8 @@ const buttonVariants = cva(
           // aria-disabled 釘住(同 primary 註解);`not-aria-pressed` = 只釘「未按下」的靜止,按下的由 pressed compound 自己釘(避免兩組 (0,3,0) 靠產出順序決勝)
           "aria-disabled:not-aria-pressed:hover:text-primary aria-disabled:not-aria-pressed:hover:border-primary",
           "aria-disabled:not-aria-pressed:active:text-primary aria-disabled:not-aria-pressed:active:border-primary",
-          "disabled:bg-transparent disabled:text-fg-disabled disabled:border-border"
+          "disabled:bg-transparent disabled:text-fg-disabled disabled:border-border",
+          "disabled:hover:text-fg-disabled disabled:hover:border-border disabled:active:text-fg-disabled disabled:active:border-border"
           // 2026-05-21 v12:Toggle pressed 視覺移到 compoundVariants(variant × pressedTone),
           // 同時支援 emphasis(藍底)/ neutral(灰底)兩 tone。詳 cva.compoundVariants 段。
         ],
@@ -65,7 +75,8 @@ const buttonVariants = cva(
           // aria-disabled 釘住(同 secondary 註解)
           "aria-disabled:not-aria-pressed:hover:text-foreground aria-disabled:not-aria-pressed:hover:border-border",
           "aria-disabled:not-aria-pressed:active:text-foreground aria-disabled:not-aria-pressed:active:border-border",
-          "disabled:bg-transparent disabled:text-fg-disabled disabled:border-border"
+          "disabled:bg-transparent disabled:text-fg-disabled disabled:border-border",
+          "disabled:hover:text-fg-disabled disabled:hover:border-border disabled:active:text-fg-disabled disabled:active:border-border"
         ],
         text: [
           "bg-transparent text-foreground border-transparent",
@@ -76,15 +87,19 @@ const buttonVariants = cva(
           "data-[state=open]:bg-neutral-hover",
           // aria-disabled 釘住(同 secondary 註解)
           "aria-disabled:not-aria-pressed:hover:bg-transparent aria-disabled:not-aria-pressed:active:bg-transparent",
-          "disabled:bg-transparent disabled:text-fg-disabled"
+          "disabled:bg-transparent disabled:text-fg-disabled",
+          "disabled:hover:bg-transparent disabled:hover:text-fg-disabled disabled:active:bg-transparent disabled:active:text-fg-disabled"
         ],
         link: [
           "bg-transparent text-primary border-transparent",
           "hover:text-primary-hover",
           "active:text-primary-active",
+          // 開啟中 = 自己的 hover(link 的 hover 只換字色;同 primary 分支註解,2026-09-29 C13)
+          "data-[state=open]:text-primary-hover",
           // aria-disabled 釘住(同 primary 註解;link 無 pressed 視覺,不需 not-aria-pressed)
           "aria-disabled:hover:text-primary aria-disabled:active:text-primary",
-          "disabled:text-fg-disabled"
+          "disabled:text-fg-disabled",
+          "disabled:hover:text-fg-disabled disabled:active:text-fg-disabled"
         ]
       },
       danger: {
@@ -120,6 +135,8 @@ const buttonVariants = cva(
           "bg-error text-on-emphasis border-transparent",
           "hover:bg-error-hover",
           "active:bg-error-active",
+          // 開啟中 = 自己的 hover(同 primary 分支,2026-09-29 C13)
+          "data-[state=open]:bg-error-hover",
           // aria-disabled 釘在自己的靜止紅(button.spec.md「狀態疊加」表 aria-disabled 列)
           "aria-disabled:hover:bg-error aria-disabled:active:bg-error"
         ]
@@ -167,6 +184,7 @@ const buttonVariants = cva(
           "data-[state=on]:hover:bg-primary-subtle data-[state=on]:hover:border-transparent data-[state=on]:hover:text-primary-hover",
           "data-[state=on]:active:bg-primary-subtle data-[state=on]:active:border-transparent data-[state=on]:active:text-primary-active",
           "data-[state=on]:disabled:bg-disabled data-[state=on]:disabled:text-fg-disabled data-[state=on]:disabled:border-transparent",
+          "data-[state=on]:disabled:hover:bg-disabled data-[state=on]:disabled:hover:text-fg-disabled data-[state=on]:disabled:hover:border-transparent data-[state=on]:disabled:active:bg-disabled data-[state=on]:disabled:active:text-fg-disabled data-[state=on]:disabled:active:border-transparent",
           // aria-pressed fallback(Radix overlay trigger override data-state 時仍生效)—— 逐條鏡像上方 data-[state=on] 分支
           "aria-pressed:bg-primary-subtle aria-pressed:text-primary aria-pressed:border-transparent",
           "aria-pressed:hover:bg-primary-subtle aria-pressed:hover:border-transparent aria-pressed:hover:text-primary-hover",
@@ -174,6 +192,7 @@ const buttonVariants = cva(
           "aria-pressed:active:bg-primary-subtle aria-pressed:active:border-transparent aria-pressed:active:text-primary-active",
           // pressed + disabled:disabled 視覺優先(button.spec.md「狀態 → disabled」pressed + disabled 條);fallback 分支原本缺這條,鏡像 data-[state=on]:disabled
           "aria-pressed:disabled:bg-disabled aria-pressed:disabled:text-fg-disabled aria-pressed:disabled:border-transparent",
+          "aria-pressed:disabled:hover:bg-disabled aria-pressed:disabled:hover:text-fg-disabled aria-pressed:disabled:hover:border-transparent aria-pressed:disabled:active:bg-disabled aria-pressed:disabled:active:text-fg-disabled aria-pressed:disabled:active:border-transparent",
           // 按下的觸發鈕開啟中 = 按下自己的 hover(底色與邊框不動、字 primary-hover),不是 variant 的開啟樣式
           //(inline-action.spec.md「overlay 開啟 → 同 host hover」;button.spec.md「狀態疊加」表開啟中列)。
           // Radix 會把 data-state 改寫成 open,所以只走 aria-pressed;(0,3,0) > variant 的 data-[state=open] (0,2,0)
@@ -186,8 +205,10 @@ const buttonVariants = cva(
       // neutral tone:灰底(neutral-selected family)— 可取消的切換鈕;導覽 / 目前頁不用它(選中列規則,item-anatomy.spec.md「選中 × 互動疊加」)
       // 階梯值 selected → -selected-hover → -selected-active(2→3→4):user 2026-09-25 選「甲：保留，維持 2→3→4 (Recommended)」
       // (選項由 AI 提供;待辦總帳 B5)。下方開啟中 / aria-disabled 各條都是「跟著本分支的 hover / 靜止 token 走」,改階梯時同一 compound 內一起改。
+      // 2026-09-29(待辦總帳 N7):secondary 從這一組拆出去(下一組)—— 它的靜止底是 `--surface`(「底」),已按下要**疊層**不換底:
+      // 深色 --surface 與 --neutral-selected 都是白 8%,換底後已按下 = 未按下(#1E1E1E = #1E1E1E);tertiary / text 是透明底,換底沒問題。
       {
-        variant: ["secondary", "tertiary", "text"],
+        variant: ["tertiary", "text"],
         pressedTone: "neutral",
         class: [
           "data-[state=on]:bg-neutral-selected data-[state=on]:text-foreground data-[state=on]:border-transparent",
@@ -195,18 +216,44 @@ const buttonVariants = cva(
           "data-[state=on]:hover:bg-neutral-selected-hover data-[state=on]:hover:text-foreground data-[state=on]:hover:border-transparent",
           "data-[state=on]:active:bg-neutral-selected-active data-[state=on]:active:text-foreground data-[state=on]:active:border-transparent",
           "data-[state=on]:disabled:bg-transparent data-[state=on]:disabled:text-fg-disabled",
+          "data-[state=on]:disabled:hover:bg-transparent data-[state=on]:disabled:hover:text-fg-disabled data-[state=on]:disabled:active:bg-transparent data-[state=on]:disabled:active:text-fg-disabled",
           // aria-pressed fallback —— 逐條鏡像上方 data-[state=on] 分支
           "aria-pressed:bg-neutral-selected aria-pressed:text-foreground aria-pressed:border-transparent",
           "aria-pressed:hover:bg-neutral-selected-hover aria-pressed:hover:text-foreground aria-pressed:hover:border-transparent",
           // 補齊第三階(按壓):fallback 原本缺,data-[state=on] 分支與 emphasis 分支都有(同 emphasis 2026-07-07 註解)
           "aria-pressed:active:bg-neutral-selected-active aria-pressed:active:text-foreground aria-pressed:active:border-transparent",
           "aria-pressed:disabled:bg-transparent aria-pressed:disabled:text-fg-disabled",
+          "aria-pressed:disabled:hover:bg-transparent aria-pressed:disabled:hover:text-fg-disabled aria-pressed:disabled:active:bg-transparent aria-pressed:disabled:active:text-fg-disabled",
           // 按下的觸發鈕開啟中 = 按下自己的 hover(neutral-selected-hover),不是 variant 的 neutral-hover / primary-hover(同 emphasis 分支註解)
           "aria-pressed:data-[state=open]:bg-neutral-selected-hover aria-pressed:data-[state=open]:text-foreground aria-pressed:data-[state=open]:border-transparent",
           // 按下 + aria-disabled:hover / active 釘在按下的靜止底色
           "data-[state=on]:aria-disabled:hover:bg-neutral-selected data-[state=on]:aria-disabled:active:bg-neutral-selected",
           "aria-pressed:aria-disabled:hover:bg-neutral-selected aria-pressed:aria-disabled:active:bg-neutral-selected"
         ]
+      },
+      // secondary(白底)× neutral:底留 `bg-surface`,已按下三階用疊層 utility(semantic.css `bg-interaction-selected` 家族 =
+      // 把 --neutral-selected / -hover / -active 畫成 background-image,在底色之上、內容之下;配對總則第 2 列「底不換,疊一層」)。
+      // 淺色疊層結果與換底相同(#F5F5F5 / #F0F0F0 / #E8E8E8),深色才分得出來(#303030 / #37 / #3D)。逐條鏡像上一組;
+      // 停用態拿掉疊層(`bg-none`)而不是把底換成透明 —— 白底鈕停用仍是白底。
+      {
+        variant: "secondary",
+        pressedTone: "neutral",
+        class: [
+          // 底寫明 `bg-surface`(與 variant 相同,不換底):疊層是疊在「底」上,hover-own-pair 閘據此判定,不必去別的 compound 找靜止底
+          "data-[state=on]:bg-surface data-[state=on]:bg-interaction-selected data-[state=on]:text-foreground data-[state=on]:border-transparent",
+          "data-[state=on]:hover:bg-interaction-selected-hover data-[state=on]:hover:text-foreground data-[state=on]:hover:border-transparent",
+          "data-[state=on]:active:bg-interaction-selected-active data-[state=on]:active:text-foreground data-[state=on]:active:border-transparent",
+          "data-[state=on]:disabled:bg-none data-[state=on]:disabled:text-fg-disabled",
+          "data-[state=on]:disabled:hover:bg-none data-[state=on]:disabled:hover:text-fg-disabled data-[state=on]:disabled:active:bg-none data-[state=on]:disabled:active:text-fg-disabled",
+          "aria-pressed:bg-surface aria-pressed:bg-interaction-selected aria-pressed:text-foreground aria-pressed:border-transparent",
+          "aria-pressed:hover:bg-interaction-selected-hover aria-pressed:hover:text-foreground aria-pressed:hover:border-transparent",
+          "aria-pressed:active:bg-interaction-selected-active aria-pressed:active:text-foreground aria-pressed:active:border-transparent",
+          "aria-pressed:disabled:bg-none aria-pressed:disabled:text-fg-disabled",
+          "aria-pressed:disabled:hover:bg-none aria-pressed:disabled:hover:text-fg-disabled aria-pressed:disabled:active:bg-none aria-pressed:disabled:active:text-fg-disabled",
+          "aria-pressed:data-[state=open]:bg-interaction-selected-hover aria-pressed:data-[state=open]:text-foreground aria-pressed:data-[state=open]:border-transparent",
+          "data-[state=on]:aria-disabled:hover:bg-interaction-selected data-[state=on]:aria-disabled:active:bg-interaction-selected",
+          "aria-pressed:aria-disabled:hover:bg-interaction-selected aria-pressed:aria-disabled:active:bg-interaction-selected"
+        ]
       }
     ],
     defaultVariants: {