@qijenchen/design-system 0.1.0-beta.10

package/dist/components/Breadcrumb/breadcrumb.js

@@ -0,0 +1,300 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { MoreHorizontal, ChevronRight } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { ItemInlineActionButton } from "../../patterns/element-anatomy/item-anatomy.js";
+import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/tooltip.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../DropdownMenu/dropdown-menu.js";
+let sharedRO = null;
+const sharedROCallbacks = /* @__PURE__ */ new WeakMap();
+function getSharedRO() {
+  if (sharedRO) return sharedRO;
+  sharedRO = new ResizeObserver((entries) => {
+    entries.forEach((e) => {
+      const cb = sharedROCallbacks.get(e.target);
+      if (cb) cb(e);
+    });
+  });
+  return sharedRO;
+}
+function observeShared(el, cb) {
+  const obs = getSharedRO();
+  sharedROCallbacks.set(el, cb);
+  obs.observe(el);
+  return () => {
+    sharedROCallbacks.delete(el);
+    obs.unobserve(el);
+  };
+}
+function TruncatedLabel({ children, fullText }) {
+  const ref = React.useRef(null);
+  const [isTruncated, setIsTruncated] = React.useState(false);
+  React.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const check = () => setIsTruncated(el.scrollWidth > el.clientWidth);
+    check();
+    const raf = requestAnimationFrame(check);
+    const t = setTimeout(check, 100);
+    const cleanup = observeShared(el, check);
+    return () => {
+      cancelAnimationFrame(raf);
+      clearTimeout(t);
+      cleanup();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Tooltip, { open: isTruncated ? void 0 : false, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { ref, className: "truncate min-w-0 block", children }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: fullText ?? children })
+  ] });
+}
+const BreadcrumbContext = React.createContext({ size: "md" });
+const BREADCRUMB_TEXT_CLASS = {
+  sm: "text-body",
+  md: "text-body",
+  lg: "text-body-lg"
+};
+const BREADCRUMB_ICON_SIZE = {
+  sm: 16,
+  md: 16,
+  lg: 20
+};
+const Breadcrumb = React.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", ...props }));
+Breadcrumb.displayName = "Breadcrumb";
+const BreadcrumbList = React.forwardRef(
+  ({ className, size = "md", items, maxItems = 4, itemsBeforeCollapse = 1, itemsAfterCollapse = 1, children, ...props }, ref) => {
+    const ctxValue = React.useMemo(() => ({ size }), [size]);
+    const declarativeContent = React.useMemo(() => {
+      if (!items) return null;
+      const renderItem = (spec, role) => /* @__PURE__ */ jsx(BreadcrumbItem, { role, children: role === "current" ? /* @__PURE__ */ jsx(BreadcrumbPage, { startIcon: spec.startIcon, children: /* @__PURE__ */ jsx(TruncatedLabel, { fullText: typeof spec.label === "string" ? spec.label : void 0, children: spec.label }) }) : /* @__PURE__ */ jsx(BreadcrumbLink, { href: spec.href, asChild: spec.asChild, startIcon: spec.startIcon, children: /* @__PURE__ */ jsx(TruncatedLabel, { fullText: typeof spec.label === "string" ? spec.label : void 0, children: spec.label }) }) }, `${role}-${typeof spec.label === "string" ? spec.label : Math.random()}`);
+      const shouldCollapse = items.length > maxItems;
+      const beforeN = Math.max(0, itemsBeforeCollapse);
+      const afterN = Math.max(1, itemsAfterCollapse);
+      let visible;
+      if (!shouldCollapse) {
+        visible = items.map((spec, i) => ({
+          spec,
+          role: i === 0 ? "root" : i === items.length - 1 ? "current" : "middle"
+        }));
+      } else {
+        const before = items.slice(0, beforeN).map((spec, i) => ({
+          spec,
+          role: i === 0 ? "root" : "middle"
+        }));
+        const collapsed = items.slice(beforeN, items.length - afterN);
+        const after = items.slice(items.length - afterN).map((spec, i, arr) => ({
+          spec,
+          role: i === arr.length - 1 ? "current" : "middle"
+        }));
+        visible = [...before, { ellipsisOf: collapsed }, ...after];
+      }
+      const rendered = [];
+      visible.forEach((entry, i) => {
+        if (i > 0) rendered.push(/* @__PURE__ */ jsx(BreadcrumbSeparator, {}, `sep-${i}`));
+        if ("ellipsisOf" in entry) {
+          rendered.push(
+            /* @__PURE__ */ jsx(BreadcrumbItem, { role: "ellipsis", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) }),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: entry.ellipsisOf.map((s, j) => /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: !!s.href, children: s.href ? /* @__PURE__ */ jsx("a", { href: s.href, children: s.label }) : /* @__PURE__ */ jsx("span", { children: s.label }) }, j)) })
+            ] }) }, "ellipsis")
+          );
+        } else {
+          rendered.push(renderItem(entry.spec, entry.role));
+        }
+      });
+      return rendered;
+    }, [items, maxItems, itemsBeforeCollapse, itemsAfterCollapse]);
+    const compositionalContent = React.useMemo(() => {
+      if (items) return null;
+      const childArr = React.Children.toArray(children);
+      const itemChildren = childArr.filter(
+        (c) => {
+          var _a;
+          return React.isValidElement(c) && (c.type === BreadcrumbItem || ((_a = c.type) == null ? void 0 : _a.displayName) === "BreadcrumbItem");
+        }
+      );
+      if (itemChildren.length === 0) return children;
+      const total = itemChildren.length;
+      const cloneWithRole = (item, idx, role) => React.cloneElement(item, { role: item.props.role ?? role, key: `bc-${role}-${idx}` });
+      const shouldCollapse = total > maxItems;
+      const beforeN = Math.max(0, itemsBeforeCollapse);
+      const afterN = Math.max(1, itemsAfterCollapse);
+      const rendered = [];
+      if (!shouldCollapse) {
+        itemChildren.forEach((item, i) => {
+          if (i > 0) rendered.push(/* @__PURE__ */ jsx(BreadcrumbSeparator, {}, `sep-${i}`));
+          const role = i === 0 ? "root" : i === total - 1 ? "current" : "middle";
+          rendered.push(cloneWithRole(item, i, role));
+        });
+      } else {
+        const beforeItems = itemChildren.slice(0, beforeN);
+        const collapsedItems = itemChildren.slice(beforeN, total - afterN);
+        const afterItems = itemChildren.slice(total - afterN);
+        beforeItems.forEach((item, i) => {
+          if (i > 0) rendered.push(/* @__PURE__ */ jsx(BreadcrumbSeparator, {}, `sep-bef-${i}`));
+          const role = i === 0 ? "root" : "middle";
+          rendered.push(cloneWithRole(item, i, role));
+        });
+        if (rendered.length > 0) rendered.push(/* @__PURE__ */ jsx(BreadcrumbSeparator, {}, "sep-ellipsis-before"));
+        rendered.push(
+          /* @__PURE__ */ jsx(BreadcrumbItem, { role: "ellipsis", children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, {}) }),
+            /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: collapsedItems.map((item, j) => {
+              const innerChildren = item.props.children;
+              let href;
+              let label = innerChildren;
+              React.Children.forEach(innerChildren, (c) => {
+                if (React.isValidElement(c)) {
+                  if (c.props.href) href = c.props.href;
+                  if (c.props.children != null) label = c.props.children;
+                }
+              });
+              return href ? /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx("a", { href, children: label }) }, `collapsed-${j}`) : /* @__PURE__ */ jsx(DropdownMenuItem, { children: label }, `collapsed-${j}`);
+            }) })
+          ] }) }, "bc-ellipsis")
+        );
+        rendered.push(/* @__PURE__ */ jsx(BreadcrumbSeparator, {}, "sep-ellipsis-after"));
+        afterItems.forEach((item, i) => {
+          if (i > 0) rendered.push(/* @__PURE__ */ jsx(BreadcrumbSeparator, {}, `sep-aft-${i}`));
+          const role = i === afterItems.length - 1 ? "current" : "middle";
+          rendered.push(cloneWithRole(item, i, role));
+        });
+      }
+      return rendered;
+    }, [items, children, maxItems, itemsBeforeCollapse, itemsAfterCollapse]);
+    return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsx(
+      "ol",
+      {
+        ref,
+        className: cn(
+          "flex flex-nowrap items-center gap-1 text-fg-secondary leading-compact min-w-0",
+          BREADCRUMB_TEXT_CLASS[size],
+          className
+        ),
+        ...props,
+        children: items ? declarativeContent : compositionalContent
+      }
+    ) });
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+const BreadcrumbItem = React.forwardRef(
+  ({ className, role, style, ...props }, ref) => {
+    const shrinkStyle = role === "root" ? { flexShrink: 3, minWidth: "1.5rem" } : role === "middle" ? { flexShrink: 2, minWidth: "1.5rem" } : role === "current" ? { flexShrink: 1, minWidth: "1.5rem" } : role === "ellipsis" ? { flexShrink: 0 } : {};
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        "data-bc-role": role,
+        className: cn("inline-flex items-center min-w-0", className),
+        style: { ...shrinkStyle, ...style },
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+const BreadcrumbLink = React.forwardRef(
+  ({ asChild, className, children, startIcon: StartIcon, ...props }, ref) => {
+    const { size } = React.useContext(BreadcrumbContext);
+    const wrappedChildren = typeof children === "string" ? /* @__PURE__ */ jsx(TruncatedLabel, { fullText: children, children }) : children;
+    const sharedClassName = cn(
+      "inline-flex items-center gap-2",
+      "min-w-0 max-w-full",
+      "text-fg-secondary",
+      "hover:text-primary-hover",
+      "transition-colors duration-150",
+      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+      "rounded-md",
+      className
+    );
+    if (asChild) {
+      return /* @__PURE__ */ jsx(Slot, { ref, className: sharedClassName, ...props, children: wrappedChildren });
+    }
+    return /* @__PURE__ */ jsxs("a", { ref, className: sharedClassName, ...props, children: [
+      StartIcon && /* @__PURE__ */ jsx(StartIcon, { size: BREADCRUMB_ICON_SIZE[size], "aria-hidden": true, className: "shrink-0" }),
+      wrappedChildren
+    ] });
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+const BreadcrumbPage = React.forwardRef(
+  ({ className, children, startIcon: StartIcon, ...props }, ref) => {
+    const { size } = React.useContext(BreadcrumbContext);
+    const wrappedChildren = typeof children === "string" ? /* @__PURE__ */ jsx(TruncatedLabel, { fullText: children, children }) : children;
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        role: "link",
+        "aria-disabled": "true",
+        "aria-current": "page",
+        className: cn("inline-flex items-center gap-2 min-w-0 max-w-full text-foreground", className),
+        ...props,
+        children: [
+          StartIcon && /* @__PURE__ */ jsx(StartIcon, { size: BREADCRUMB_ICON_SIZE[size], "aria-hidden": true, className: "shrink-0" }),
+          wrappedChildren
+        ]
+      }
+    );
+  }
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+const BreadcrumbSeparator = React.forwardRef(
+  ({ children, className, ...props }, ref) => {
+    const { size } = React.useContext(BreadcrumbContext);
+    return /* @__PURE__ */ jsx(
+      "li",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn("inline-flex items-center text-fg-muted shrink-0", className),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsx(ChevronRight, { size: BREADCRUMB_ICON_SIZE[size], "aria-hidden": true })
+      }
+    );
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+const BreadcrumbEllipsis = React.forwardRef(
+  ({ "aria-label": ariaLabel = "顯示折疊路徑", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      ItemInlineActionButton,
+      {
+        ref,
+        icon: MoreHorizontal,
+        size: "md",
+        "aria-label": ariaLabel,
+        overlayTrigger: true,
+        ...props
+      }
+    );
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+const breadcrumbMeta = {
+  component: "Breadcrumb",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: [],
+    fg: ["text-fg-muted", "text-fg-secondary", "text-foreground"],
+    ring: ["ring-ring"]
+  }
+};
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  breadcrumbMeta
+};
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +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 { Tooltip, TooltipTrigger, TooltipContent } from '@/design-system/components/Tooltip/tooltip'\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\n\n// ── TruncatedLabel ────────────────────────────────────────────────────────────\n// 同 `data-table.tsx:339 TruncateCell` + `tag.tsx:138 isTruncated` SSOT pattern\n// (shared ResizeObserver + scrollWidth > clientWidth → wrap Tooltip)。\n// **TODO** future:Rule-of-3 達 → 抽 `patterns/element-anatomy/truncated-text.tsx` 共用\n// (本 component / DataTable TruncateCell / Tag inner 三處同 idiom,符合 M30 SSOT 抽取門檻)。\n\ntype RoCallback = (entry: ResizeObserverEntry) => void\nlet sharedRO: ResizeObserver | null = null\nconst sharedROCallbacks = new WeakMap<Element, RoCallback>()\nfunction getSharedRO(): ResizeObserver {\n  if (sharedRO) return sharedRO\n  sharedRO = new ResizeObserver((entries) => {\n    entries.forEach((e) => {\n      const cb = sharedROCallbacks.get(e.target)\n      if (cb) cb(e)\n    })\n  })\n  return sharedRO\n}\nfunction observeShared(el: Element, cb: RoCallback): () => void {\n  const obs = getSharedRO()\n  sharedROCallbacks.set(el, cb)\n  obs.observe(el)\n  return () => { sharedROCallbacks.delete(el); obs.unobserve(el) }\n}\n\nfunction TruncatedLabel({ children, fullText }: { children: React.ReactNode; fullText?: string }) {\n  const ref = React.useRef<HTMLSpanElement>(null)\n  const [isTruncated, setIsTruncated] = React.useState(false)\n  React.useEffect(() => {\n    const el = ref.current\n    if (!el) return\n    const check = () => setIsTruncated(el.scrollWidth > el.clientWidth)\n    check()\n    // 2026-05-11 fix:首幀 layout 未完成 / 字型 async load → scrollWidth=clientWidth 假陰性。\n    // RAF + 短延遲再驗一次,捕獲字型 / 容器尺寸後變(對齊 TruncateCell / Tag SSOT pattern)。\n    const raf = requestAnimationFrame(check)\n    const t = setTimeout(check, 100)\n    const cleanup = observeShared(el, check)\n    return () => {\n      cancelAnimationFrame(raf)\n      clearTimeout(t)\n      cleanup()\n    }\n  }, [])\n  // Tooltip canonical:per `tooltip.principles.stories.tsx:190`「Tooltip 是資訊補救 — 文字被\n  // truncate 時才顯示完整內容。沒被截斷就不該顯示 tooltip」\n  //\n  // 2026-05-11 fix(playwright tooltip-on-truncate 卡 hover 沒 tooltip):\n  // 原本 isTruncated=false 直接 return 裸 span / true 才 wrap Tooltip → JSX 樹結構改變\n  // → React 把 span unmount + remount(因為 wrapper component 變),ref 換到新 span,\n  // useEffect [] 不重跑(同 component instance)→ 觀察的 DOM 跟實際 DOM 對不上。\n  // Fix:**永遠 wrap Tooltip**(同 DOM 節點生命週期);`open` 由 isTruncated 控制 —\n  // 沒被 truncate 就 force `open={false}`,有 truncate 就 `undefined`(uncontrolled,\n  // hover 走 Radix default behavior)。對齊 canonical「沒被截斷就不該 tooltip」。\n  return (\n    <Tooltip open={isTruncated ? undefined : false}>\n      <TooltipTrigger asChild>\n        <span ref={ref} className=\"truncate min-w-0 block\">{children}</span>\n      </TooltipTrigger>\n      <TooltipContent>{fullText ?? children}</TooltipContent>\n    </Tooltip>\n  )\n}\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 + font-medium\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 / ellipsis icon 尺寸 — 對齊 uiSize.spec.md「Icon Size Tier」(field-height-sm/md→16,lg→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      const renderItem = (spec: BreadcrumbItemSpec, role: 'root' | 'middle' | 'current') => (\n        <BreadcrumbItem key={`${role}-${typeof spec.label === 'string' ? spec.label : Math.random()}`} role={role}>\n          {role === 'current'\n            ? <BreadcrumbPage startIcon={spec.startIcon}>\n                <TruncatedLabel fullText={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedLabel>\n              </BreadcrumbPage>\n            : <BreadcrumbLink href={spec.href} asChild={spec.asChild} startIcon={spec.startIcon}>\n                <TruncatedLabel fullText={typeof spec.label === 'string' ? spec.label : undefined}>{spec.label}</TruncatedLabel>\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))\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:extract href + label,\n                  // 用 `asChild` 把 anchor 接到 menuitem 對齊 declarative path line 245 canonical pattern。\n                  const innerChildren = (item.props as { children?: React.ReactNode }).children\n                  let href: string | undefined\n                  let label: React.ReactNode = innerChildren\n                  React.Children.forEach(innerChildren, (c) => {\n                    if (React.isValidElement<{ href?: string; children?: React.ReactNode }>(c)) {\n                      if (c.props.href) href = c.props.href\n                      if (c.props.children != null) label = c.props.children\n                    }\n                  })\n                  return href\n                    ? <DropdownMenuItem key={`collapsed-${j}`} asChild><a href={href}>{label}</a></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 *       窄時按優先級縮 + TruncatedLabel 內部 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 TruncatedLabel(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      ? <TruncatedLabel fullText={children}>{children}</TruncatedLabel>\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:text-primary-hover',\n      'transition-colors duration-150',\n      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',\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 TruncatedLabel。\n    const wrappedChildren = typeof children === 'string'\n      ? <TruncatedLabel fullText={children}>{children}</TruncatedLabel>\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\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-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":";;;;;;;;AAsBA,IAAI,WAAkC;AACtC,MAAM,wCAAwB,QAAA;AAC9B,SAAS,cAA8B;AACrC,MAAI,SAAU,QAAO;AACrB,aAAW,IAAI,eAAe,CAAC,YAAY;AACzC,YAAQ,QAAQ,CAAC,MAAM;AACrB,YAAM,KAAK,kBAAkB,IAAI,EAAE,MAAM;AACzC,UAAI,OAAO,CAAC;AAAA,IACd,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;AACA,SAAS,cAAc,IAAa,IAA4B;AAC9D,QAAM,MAAM,YAAA;AACZ,oBAAkB,IAAI,IAAI,EAAE;AAC5B,MAAI,QAAQ,EAAE;AACd,SAAO,MAAM;AAAE,sBAAkB,OAAO,EAAE;AAAG,QAAI,UAAU,EAAE;AAAA,EAAE;AACjE;AAEA,SAAS,eAAe,EAAE,UAAU,YAA8D;AAChG,QAAM,MAAM,MAAM,OAAwB,IAAI;AAC9C,QAAM,CAAC,aAAa,cAAc,IAAI,MAAM,SAAS,KAAK;AAC1D,QAAM,UAAU,MAAM;AACpB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,QAAQ,MAAM,eAAe,GAAG,cAAc,GAAG,WAAW;AAClE,UAAA;AAGA,UAAM,MAAM,sBAAsB,KAAK;AACvC,UAAM,IAAI,WAAW,OAAO,GAAG;AAC/B,UAAM,UAAU,cAAc,IAAI,KAAK;AACvC,WAAO,MAAM;AACX,2BAAqB,GAAG;AACxB,mBAAa,CAAC;AACd,cAAA;AAAA,IACF;AAAA,EACF,GAAG,CAAA,CAAE;AAWL,SACE,qBAAC,SAAA,EAAQ,MAAM,cAAc,SAAY,OACvC,UAAA;AAAA,IAAA,oBAAC,gBAAA,EAAe,SAAO,MACrB,UAAA,oBAAC,UAAK,KAAU,WAAU,0BAA0B,SAAA,CAAS,EAAA,CAC/D;AAAA,IACA,oBAAC,gBAAA,EAAgB,UAAA,YAAY,SAAA,CAAS;AAAA,EAAA,GACxC;AAEJ;AA2CA,MAAM,oBAAoB,MAAM,cAAsC,EAAE,MAAM,MAAM;AAEpF,MAAM,wBAAwD;AAAA,EAC5D,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMA,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;AACnB,YAAM,aAAa,CAAC,MAA0B,SAC5C,oBAAC,gBAAA,EAA8F,MAC5F,UAAA,SAAS,YACN,oBAAC,gBAAA,EAAe,WAAW,KAAK,WAC9B,UAAA,oBAAC,gBAAA,EAAe,UAAU,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,QAAY,UAAA,KAAK,MAAA,CAAM,EAAA,CACjG,IACA,oBAAC,kBAAe,MAAM,KAAK,MAAM,SAAS,KAAK,SAAS,WAAW,KAAK,WACtE,UAAA,oBAAC,gBAAA,EAAe,UAAU,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,QAAY,UAAA,KAAK,OAAM,EAAA,CACjG,EAAA,GAPe,GAAG,IAAI,IAAI,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK,OAAA,CAAQ,EAS3F;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,IAAI,CAAC;AAAA,QAClD;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;AAK/B,oBAAM,gBAAiB,KAAK,MAAyC;AACrE,kBAAI;AACJ,kBAAI,QAAyB;AAC7B,oBAAM,SAAS,QAAQ,eAAe,CAAC,MAAM;AAC3C,oBAAI,MAAM,eAA8D,CAAC,GAAG;AAC1E,sBAAI,EAAE,MAAM,KAAM,QAAO,EAAE,MAAM;AACjC,sBAAI,EAAE,MAAM,YAAY,KAAM,SAAQ,EAAE,MAAM;AAAA,gBAChD;AAAA,cACF,CAAC;AACD,qBAAO,OACH,oBAAC,kBAAA,EAAwC,SAAO,MAAC,UAAA,oBAAC,OAAE,MAAa,UAAA,MAAA,CAAM,KAAhD,aAAa,CAAC,EAAsC,IAC3E,oBAAC,oBAAyC,UAAA,MAAA,GAAnB,aAAa,CAAC,EAAW;AAAA,YACtD,CAAC,EAAA,CACH;AAAA,UAAA,EAAA,CACF,KAzBkB,aA0BpB;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,+BACvC,gBAAA,EAAe,UAAU,UAAW,SAAA,CAAS,IAC9C;AACJ,UAAM,kBAAkB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;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,+BACvC,gBAAA,EAAe,UAAU,UAAW,SAAA,CAAS,IAC9C;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,CAAA;AAAA,EAGP,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,WAAW;AAAA,EAAA;AAEtB;"}

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export interface BulkActionBarLabels {
+    count: (n: number) => string;
+    clear: string;
+    hiddenSuffix: (hidden: number) => string;
+    toolbarAriaLabel: string;
+}
+export declare const BULK_ACTION_BAR_DEFAULT_LABELS: BulkActionBarLabels;
+export interface BulkActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 已選 ID,length === 0 時自動隱藏(回傳 null) */
+    selection: readonly string[];
+    /** Clear 觸發,user 點 X icon 或 Esc(consumer 在 page-level 監聽) */
+    onClear?: () => void;
+    /** 批次 actions(consumer 提供 sm Button,variant=tertiary 或 tertiary+danger;不用 primary) */
+    actions?: React.ReactNode;
+    /** Filter 模式:hidden 數量,顯示在 count 區 inline「{N} 已選 · {M} 個被 filter 隱藏」 */
+    hiddenByFilter?: number;
+    /**
+     * 「擴選整個 dataset」狀態(2026-05-13 ship,per user 抓 Alert「已選 5370」但 BulkActionBar
+     * 仍顯「已選 50 項」regression):
+     * - undefined / null(default):count 走 `selection.length`(page-level 視覺選取)
+     * - number:count 走此數值(整個 dataset 擴選後 user 已選的真總數)
+     *
+     * Canonical pattern:consumer 把 BulkActionBar 跟「Alert info banner(提示擴選 dataset)」
+     * 一起 mount,Alert 點「點此選取全部 N 個」→ setTotalSelected(N) → BulkActionBar count 同步。
+     * 對齊 Gmail / Linear / Notion 全選 dataset hint pattern。
+     * 詳 `bulk-action-bar.spec.md`「Extend dataset pattern」段。
+     */
+    totalSelected?: number | null;
+    /** i18n labels(Partial,merge with default) */
+    labels?: Partial<BulkActionBarLabels>;
+}
+declare const BulkActionBar: React.ForwardRefExoticComponent<BulkActionBarProps & React.RefAttributes<HTMLDivElement>>;
+export declare const bulkActionBarMeta: {
+    readonly component: "BulkActionBar";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default"];
+    readonly tokens: {
+        readonly fg: readonly ["text-fg-secondary", "text-fg-muted"];
+        readonly border: readonly ["border-divider"];
+    };
+};
+export { BulkActionBar };
+//# sourceMappingURL=bulk-action-bar.d.ts.map

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

@@ -0,0 +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,gBAAgB,EAAE,MAAM,CAAA;CACzB;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,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,sFAAsF;IACtF,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wEAAwE;IACxE,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,2FAiElB,CAAA;AAID,eAAO,MAAM,iBAAiB;;;;;;;;;;CAUpB,CAAA;AAEV,OAAO,EAAE,aAAa,EAAE,CAAA"}

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

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/button.js";
+import { ButtonDivider } from "../Button/button-group.js";
+const BULK_ACTION_BAR_DEFAULT_LABELS = {
+  count: (n) => `已選 ${n} 項`,
+  clear: "清除選取",
+  hiddenSuffix: (hidden) => `· ${hidden} 個被 filter 隱藏`,
+  toolbarAriaLabel: "批次操作"
+};
+const BulkActionBar = React.forwardRef(
+  function BulkActionBar2({ selection, onClear, actions, hiddenByFilter, totalSelected, labels: labelsOverride, className, ...props }, ref) {
+    const labels = React.useMemo(
+      () => ({ ...BULK_ACTION_BAR_DEFAULT_LABELS, ...labelsOverride }),
+      [labelsOverride]
+    );
+    if (selection.length === 0) return null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "toolbar",
+        "aria-label": labels.toolbarAriaLabel,
+        className: cn(
+          "flex items-center gap-2",
+          "px-[var(--layout-space-loose)] py-[var(--layout-space-tight)]",
+          // 上分隔線:bottom toolbar canonical(Linear / Apple Mail / Notion 共識)— 視覺從上方內容收尾
+          "border-t border-divider",
+          className
+        ),
+        ...props,
+        children: [
+          onClear && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "text",
+              size: "md",
+              iconOnly: true,
+              dismiss: true,
+              startIcon: X,
+              "aria-label": labels.clear,
+              onClick: onClear
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-body text-foreground tabular-nums", children: [
+            labels.count(typeof totalSelected === "number" ? totalSelected : selection.length),
+            hiddenByFilter !== void 0 && hiddenByFilter > 0 && /* @__PURE__ */ jsxs("span", { className: "text-fg-muted font-normal", children: [
+              " ",
+              labels.hiddenSuffix(hiddenByFilter)
+            ] })
+          ] }),
+          actions && /* @__PURE__ */ jsx(ButtonDivider, {}),
+          actions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: actions })
+        ]
+      }
+    );
+  }
+);
+BulkActionBar.displayName = "BulkActionBar";
+const bulkActionBarMeta = {
+  component: "BulkActionBar",
+  family: null,
+  variants: {},
+  sizes: {},
+  states: ["default"],
+  tokens: {
+    fg: ["text-fg-secondary", "text-fg-muted"],
+    border: ["border-divider"]
+  }
+};
+export {
+  BULK_ACTION_BAR_DEFAULT_LABELS,
+  BulkActionBar,
+  bulkActionBarMeta
+};
+//# sourceMappingURL=bulk-action-bar.js.map

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

@@ -0,0 +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=sm,\n//   gap-2 + ButtonDivider 自帶 mx-1 = 12px 視覺距離)\n// - inline-action.spec.md「same-row consistency rule」(close X 同尺寸 sm)\n// - tokens/layoutSpace/layoutSpace.spec.md(footer 用 px-loose py-tight)\n// - patterns/overlay-surface/overlay-surface.spec.md SurfaceFooter canonical\n// - Alert(banner)用 description 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  toolbarAriaLabel: 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  onClear?: () => void\n  /** 批次 actions(consumer 提供 sm Button,variant=tertiary 或 tertiary+danger;不用 primary) */\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//   全 sm 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// description={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, onClear, 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    if (selection.length === 0) return null\n\n    return (\n      <div\n        ref={ref}\n        role=\"toolbar\"\n        aria-label={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        {onClear && (\n          <Button\n            variant=\"text\"\n            size=\"md\"\n            iconOnly\n            dismiss\n            startIcon={X}\n            aria-label={labels.clear}\n            onClick={onClear}\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        <span className=\"text-body text-foreground tabular-nums\">\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 提供 sm 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-fg-secondary', 'text-fg-muted'],\n    border: ['border-divider'],\n  },\n} as const\n\nexport { BulkActionBar }\n"],"names":["BulkActionBar"],"mappings":";;;;;;AA2BO,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,SAAS,SAAS,gBAAgB,eAAe,QAAQ,gBAAgB,WAAW,GAAG,MAAA,GACpG,KACA;AACA,UAAM,SAA8B,MAAM;AAAA,MACxC,OAAO,EAAE,GAAG,gCAAgC,GAAG;MAC/C,CAAC,cAAc;AAAA,IAAA;AAIjB,QAAI,UAAU,WAAW,EAAG,QAAO;AAEnC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAY,OAAO;AAAA,QACnB,WAAW;AAAA,UACT;AAAA,UACA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAKH,UAAA;AAAA,UAAA,WACC;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,UASb,qBAAC,QAAA,EAAK,WAAU,0CAEb,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,qBAAqB,eAAe;AAAA,IACzC,QAAQ,CAAC,gBAAgB;AAAA,EAAA;AAE7B;"}

package/dist/components/Button/button-group.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+/**
+ * ButtonGroup — 按鈕群組容器
+ *
+ * 負責群組內的間距（gap 8px）與對齊方式。
+ * 垂直排列時透過 ButtonGroupContext 讓所有直接子 Button 自動套用 fullWidth，
+ * 無需 cloneElement — 符合 shadcn 的 Context 慣例。
+ *
+ * @example
+ * // 水平排列（預設）
+ * <ButtonGroup>
+ *   <Button variant="primary">確認</Button>
+ *   <Button variant="tertiary">取消</Button>
+ * </ButtonGroup>
+ *
+ * // 靠右對齊（primary 放右側）
+ * <ButtonGroup align="end">
+ *   <Button variant="tertiary">取消</Button>
+ *   <Button variant="primary">確認</Button>
+ * </ButtonGroup>
+ *
+ * // 垂直排列（fullWidth 自動套用）
+ * <ButtonGroup direction="vertical">
+ *   <Button variant="primary">確認</Button>
+ *   <Button variant="tertiary">取消</Button>
+ * </ButtonGroup>
+ */
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** 排列方向，預設 horizontal */
+    direction?: 'horizontal' | 'vertical';
+    /** 水平對齊，預設 start */
+    align?: 'start' | 'center' | 'end';
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * ButtonDivider — 按鈕群組內的分隔線
+ *
+ * 自身左右各 4px，與相鄰按鈕形成 8px（gap）+ 4px（自身）= 12px 的視覺距離。
+ *
+ * @example
+ * <ButtonGroup>
+ *   <Button variant="text" size="sm" iconOnly startIcon={Settings} aria-label="設定" />
+ *   <ButtonDivider />
+ *   <Button variant="primary" danger size="sm" iconOnly startIcon={Trash2} aria-label="刪除" />
+ * </ButtonGroup>
+ */
+declare const ButtonDivider: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { ButtonGroup, ButtonDivider };
+//# sourceMappingURL=button-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../src/components/Button/button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,UAAU,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,yBAAyB;IACzB,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACrC,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;CACnC;AAMD,QAAA,MAAM,WAAW,yFAsBhB,CAAA;AAGD;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,aAAa,6GAcjB,CAAA;AAGF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,CAAA"}

package/dist/components/Button/button-group.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { ButtonGroupContext } from "./button.js";
+const BUTTON_GROUP_CTX_VERTICAL = { fullWidth: true };
+const BUTTON_GROUP_CTX_HORIZONTAL = { fullWidth: false };
+const ButtonGroup = React.forwardRef(
+  ({ direction = "horizontal", align = "start", className, children, ...props }, ref) => {
+    const isVertical = direction === "vertical";
+    return /* @__PURE__ */ jsx(ButtonGroupContext.Provider, { value: isVertical ? BUTTON_GROUP_CTX_VERTICAL : BUTTON_GROUP_CTX_HORIZONTAL, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex gap-2",
+          isVertical ? "flex-col items-stretch" : "flex-row items-center flex-wrap",
+          !isVertical && align === "center" && "justify-center",
+          !isVertical && align === "end" && "justify-end",
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+const ButtonDivider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    role: "separator",
+    className: cn(
+      "self-stretch w-px mx-1 my-1",
+      "bg-divider",
+      className
+    ),
+    ...props
+  }
+));
+ButtonDivider.displayName = "ButtonDivider";
+export {
+  ButtonDivider,
+  ButtonGroup
+};
+//# sourceMappingURL=button-group.js.map