@qijenchen/design-system 0.1.0-beta.3 → 0.1.0-beta.32

package/dist/components/Breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,163 @@
+import * as React from 'react';
+import { type LucideIcon } from 'lucide-react';
+import { ItemInlineActionButton } from '../../patterns/element-anatomy/item-anatomy';
+/**
+ * Breadcrumb — 顯示當前頁面在階層中的位置
+ *
+ * 基於 shadcn/ui Breadcrumb 結構(純 HTML nav + ol + li + a/span),
+ * 橋接設計系統 token。
+ *
+ * ── 結構 ──
+ *   <Breadcrumb>
+ *     <BreadcrumbList size="md">
+ *       <BreadcrumbItem>
+ *         <BreadcrumbLink href="/projects">專案</BreadcrumbLink>
+ *       </BreadcrumbItem>
+ *       <BreadcrumbSeparator />
+ *       <BreadcrumbItem>
+ *         <BreadcrumbPage>目前頁面</BreadcrumbPage>
+ *       </BreadcrumbItem>
+ *     </BreadcrumbList>
+ *   </Breadcrumb>
+ *
+ * ── Size(跟 page title 配對) ──
+ *   sm  text-body(14)     → 建議配 text-h4(20) title —— Dialog / panel / drawer
+ *   md  text-body(14)     → 建議配 text-h3(24) title —— 一般頁面 header (預設)
+ *   lg  text-body-lg(16)  → 建議配 text-h2(32) title —— Detail page hero / landing
+ *
+ * ── 視覺 ──
+ *   Link (預設): text-fg-secondary
+ *   Link hover:  text-primary-hover (canonical「互動高亮」, 跟 Tabs / Chip 用法一致)
+ *   Page (當前): text-foreground + font-medium
+ *   Separator:  ChevronRight (size 跟 list 一致), text-fg-muted
+ *
+ * ── 詳見 breadcrumb.spec.md ──
+ */
+type BreadcrumbSize = 'sm' | 'md' | 'lg';
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+/**
+ * Phase B(2026-05-10):declarative items mode 啟用 auto-collapse + auto-separator + auto-page-end。
+ * 對齊 Material UI source `Breadcrumbs.js renderItemsBeforeAndAfter` mechanism(`maxItems`
+ * default 8;本 DS 採 user-tuned 4 — 更積極 collapse 適合 single-line 緊湊 layout)。
+ */
+export interface BreadcrumbItemSpec {
+    label: React.ReactNode;
+    href?: string;
+    asChild?: boolean;
+    /**
+     * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。
+     * 業界慣例:Breadcrumb 首項用 Home icon 強化視覺錨點(Material / Atlassian)。
+     * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT(sm/md=16, lg=20,對齊 uiSize.spec.md Icon Size Tier)。
+     * Consumer **不傳** size,DS 統一管。
+     */
+    startIcon?: LucideIcon;
+}
+interface BreadcrumbListProps extends Omit<React.ComponentPropsWithoutRef<'ol'>, 'children'> {
+    /**
+     * 字體尺寸 — 依據與之配對的 page title 選擇:
+     *   sm  → 配 text-h4(20) title (Dialog / panel / drawer)
+     *   md  → 配 text-h3(24) title (一般頁面 header,預設)
+     *   lg  → 配 text-h2(32) title (Detail page hero / landing)
+     */
+    size?: BreadcrumbSize;
+    /**
+     * Declarative items mode(opt-in)。當 provided 時 `children` 被忽略,List 內部自動:
+     *  - 插 separator
+     *  - 末位 spec(無 `href`)自動 BreadcrumbPage(per Title-breadcrumb-end SSOT)
+     *  - 超 `maxItems` auto-collapse 中段成 BreadcrumbEllipsis + DropdownMenu(對齊 Material UI
+     *    source `renderItemsBeforeAndAfter`)
+     */
+    items?: BreadcrumbItemSpec[];
+    /**
+     * Auto-collapse 閾值。Default 4(user-tuned;Material UI source 預設 8)。`items.length > maxItems`
+     * 才 collapse。
+     */
+    maxItems?: number;
+    /** Collapse 後保留首 N 個(default 1)。對齊 Material UI source default。 */
+    itemsBeforeCollapse?: number;
+    /** Collapse 後保留末 N 個(default 1)。對齊 Material UI source default。 */
+    itemsAfterCollapse?: number;
+    children?: React.ReactNode;
+}
+declare const BreadcrumbList: React.ForwardRefExoticComponent<BreadcrumbListProps & React.RefAttributes<HTMLOListElement>>;
+/**
+ * Phase B(2026-05-10):`role` prop emit `data-bc-role` attr → CSS flex-shrink hierarchy。
+ * Per BreadcrumbItem 在 row 中的角色決定 shrink 優先級:
+ *   - `root`(首位)→ shrink:3(縮最積極;root context 可弱化)
+ *   - `middle`(中段)→ shrink:2
+ *   - `current`(末位 / page)→ shrink:1(最後縮;a11y current page anchor)
+ *   - `ellipsis`(BreadcrumbEllipsis 包裝)→ shrink:0(永遠完整 ⋯)
+ *
+ * 設計回應 user 兩 challenges:
+ *   (a) Root 也 truncate(shrink:3,不是 shrink-0)
+ *   (b) 不用 fixed max-width — flex-shrink hierarchy 容器寬時自然展開不浪費空間,
+ *       窄時按優先級縮 + TruncatedLabel 內部 CSS truncate + tooltip。
+ */
+interface BreadcrumbItemProps extends React.ComponentPropsWithoutRef<'li'> {
+    role?: 'root' | 'middle' | 'current' | 'ellipsis';
+}
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<BreadcrumbItemProps & React.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbLinkProps extends React.ComponentPropsWithoutRef<'a'> {
+    /** 將樣式套用至子元件(e.g. React Router Link) */
+    asChild?: boolean;
+    /**
+     * 起始 icon(per `ui-development.md`「icon prop 命名 4 條」:slot 只接 icon → `startIcon`)。
+     * 內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT,DS 統一尺寸不允許 consumer override。
+     * 對齊 uiSize.spec.md Icon Size Tier(2026-05-18 撤回 14 例外,統一 16/16/20)。
+     */
+    startIcon?: LucideIcon;
+}
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<BreadcrumbLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+interface BreadcrumbPageProps extends React.ComponentPropsWithoutRef<'span'> {
+    /** 起始 icon。內部消費 `BREADCRUMB_ICON_SIZE[size]` SSOT。對齊 BreadcrumbLink. */
+    startIcon?: LucideIcon;
+}
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<BreadcrumbPageProps & React.RefAttributes<HTMLSpanElement>>;
+interface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<'li'> {
+    children?: React.ReactNode;
+}
+declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<BreadcrumbSeparatorProps & React.RefAttributes<HTMLLIElement>>;
+/**
+ * BreadcrumbEllipsis — 折疊路徑的 "⋯" 按鈕
+ *
+ * 2026-05-10 重寫:消費 `ItemInlineActionButton`(primitive SSOT)取代自刻 `<button>`。
+ * Per inline-action.spec.md L106-131 predicate Q1+Q2+Q3 全指向 Inline Action:
+ *   - Q1 點了要做事嗎?是(展開折疊路徑 dropdown)
+ *   - Q2 位置?BreadcrumbList row inline flow(host 內)
+ *   - Q3 row 多大?14-16px text row(compact tier)→ Inline Action
+ * + 對齊 M1「視覺決策前必消費 SSOT」+ Mindset #2「優先消費既有」。
+ *
+ * 配合 DropdownMenuTrigger asChild 使用:
+ *
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <BreadcrumbEllipsis />
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem asChild><a href="/org">組織</a></DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * `overlayTrigger=true` 視覺鎖:DropdownMenu open 期間 button 維持 hover bg(對齊
+ * shadcn / Radix Themes / Material 的 overlay trigger canonical,inline-action.spec.md
+ * 「Overlay trigger canonical」段)。
+ */
+type BreadcrumbEllipsisProps = Omit<React.ComponentPropsWithoutRef<typeof ItemInlineActionButton>, 'icon' | 'size'>;
+declare const BreadcrumbEllipsis: React.ForwardRefExoticComponent<BreadcrumbEllipsisProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const breadcrumbMeta: {
+    readonly component: "Breadcrumb";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly [];
+        readonly fg: readonly ["text-fg-muted", "text-fg-secondary", "text-foreground"];
+        readonly ring: readonly ["ring-ring"];
+    };
+};
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+export type { BreadcrumbSize, BreadcrumbListProps, BreadcrumbEllipsisProps };
+//# sourceMappingURL=breadcrumb.d.ts.map

package/dist/components/Breadcrumb/breadcrumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAgC,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAE5E,OAAO,EAAE,sBAAsB,EAAE,MAAM,uDAAuD,CAAA;AA0E9F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAIH,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AA0BxC,QAAA,MAAM,UAAU,0JAKd,CAAA;AAKF;;;;GAIG;AAEH,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC1F;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kEAAkE;IAClE,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAGD,QAAA,MAAM,cAAc,8FAgLnB,CAAA;AAKD;;;;;;;;;;;;GAYG;AACH,UAAU,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;CAClD;AAED,QAAA,MAAM,cAAc,2FA4BnB,CAAA;AAKD,UAAU,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC;IACvE,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,+FAyCnB,CAAA;AAKD,UAAU,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IAC1E,wEAAwE;IACxE,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB;AAED,QAAA,MAAM,cAAc,6FAqBnB,CAAA;AAKD,UAAU,wBAAyB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAGD,QAAA,MAAM,mBAAmB,gGAgBxB,CAAA;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,KAAK,uBAAuB,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,sBAAsB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;AAEnH,QAAA,MAAM,kBAAkB,mGAavB,CAAA;AAKD,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,EACnB,kBAAkB,GACnB,CAAA;AACD,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,CAAA"}

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":"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"}

package/dist/components/Breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export * from './breadcrumb';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Breadcrumb/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Breadcrumb/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAA"}

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,12 @@
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbMeta } from "./breadcrumb.js";
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  breadcrumbMeta
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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"}