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

package/dist/components/FileItem/file-item.d.ts

@@ -14,7 +14,8 @@ export interface FileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      *   card border 多餘 = 雙層容器）；avatar 作每筆 item 視覺邊界。compact 的進度條/灰底不受 surface 影響
      *   （由 status 決定）。
      * surface-driven（非 status-driven）：避免 form 內 rich 上傳中變無邊框、存好變 card 的邊框閃爍。
-     * 列間 gap 由 List wrapper canonical 決定（form rich 8px / upload-manager rich 12px tight / compact 4px，見 spec）。
+     * 列間 gap 由 List wrapper canonical 決定(form rich 8px / form compact 4px / upload-manager 0 —— 列自帶上下 tight/2,
+     * 列間 ink 距仍 12,2026-09-25 待辦總帳 B12;見 spec)。
      */
     surface?: 'form' | 'upload-manager';
     status?: 'uploading' | 'completed' | 'error';
@@ -39,6 +40,29 @@ export interface FileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     onDownload?: () => void;
     onRetry?: () => void;
 }
+/**
+ * @internal
+ * 焦點框的「框圖層」:與列同形同大的 `::before`(file-item.spec.md「焦點框 × 貼著列底的進度條」)。
+ * 只在**列底貼著進度條**時用 —— form 的 compact 列有 status 時。upload-manager 的進度條離列底 tight/2、
+ * rich 的進度條在內容區,都碰不到框,照舊把框畫在列上。
+ * 為什麼要另一層:進度條住在列裡。框若畫在列上,列是進度條的祖先,遮罩會連進度條一起挖掉;
+ * 畫在 `::before` 上,遮罩只挖框。層疊不變:`::before` 是第一個定位子層,進度條(absolute)仍畫在它上面;
+ * 而且洞裡根本沒有框,進度條與框誰畫在上面都不影響結果(CSS UI 4 把 outline 的疊放順序留給瀏覽器自己決定,
+ * 「The stacking of the rendering of these outlines is explicitly left up to implementations」)。
+ * 這裡只有位置與遮罩,**不含觸發條件**:FileItem 自己的列由整列隱形鈕觸發、FileUpload 的清單列由列自己的
+ * `:focus-visible` 觸發,各自在使用端寫。線寬、顏色、往內 2px、圓角全部照舊來自 `focus-ring-inset`
+ * (`ds-canonical/references/focus-canonical.md`「框怎麼畫」),不是第四種幾何。
+ */
+export declare const FILE_ITEM_RING_LAYER_CLASS = "before:absolute before:inset-0 before:rounded-[inherit] before:pointer-events-none before:[mask:var(--file-item-ring-cutout)]";
+/**
+ * @internal
+ * 框圖層的遮罩(`--file-item-ring-cutout`)。列底沒有貼著進度條時回 `undefined` —— 呼叫端據此照舊把框畫在列上。
+ * 遮罩 = 三塊保留區的聯集:上半部整條 + 左段 + 右段。挖掉的是「進度條那一段(兩端各多 BAR_RING_GAP_PX)的下半部」,
+ * 框在那個範圍裡只有底邊,所以挖掉的只有底邊那一段。露出來的是**真正在後面的東西**(列自己的滑過色、卡片、面板、頁面),
+ * 不需要知道底色是什麼(與 `avatar.tsx` 頭像堆疊「挖空,不是外圈」同一個理由:深色的 `--surface` 本身半透明,
+ * 墊任何固定底色都會在某種容器上錯色)。
+ */
+export declare function fileItemRingCutoutStyle({ mode, surface, status, }: Pick<FileItemProps, 'mode' | 'surface' | 'status'>): React.CSSProperties | undefined;
 declare const FileItem: React.ForwardRefExoticComponent<FileItemProps & React.RefAttributes<HTMLDivElement>>;
 export declare const fileItemMeta: {
     readonly component: "FileItem";
@@ -49,7 +73,7 @@ export declare const fileItemMeta: {
     readonly tokens: {
         readonly bg: readonly ["bg-secondary", "bg-surface"];
         readonly fg: readonly ["text-fg-muted", "text-fg-secondary"];
-        readonly ring: readonly [];
+        readonly ring: readonly ["focus-ring-inset"];
     };
 };
 export { FileItem };

package/dist/components/FileItem/file-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-item.d.ts","sourceRoot":"","sources":["../../../src/components/FileItem/file-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA6C9B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAA;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAGD,QAAA,MAAM,QAAQ,sFA2Qb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"file-item.d.ts","sourceRoot":"","sources":["../../../src/components/FileItem/file-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA+C9B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAA;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAkBD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,0BAA0B,kIAC0F,CAAA;AAEjI;;;;;;;GAOG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAgB,EAChB,OAAgB,EAChB,MAAM,GACP,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,aAAa,GAAG,SAAS,CAUtF;AAGD,QAAA,MAAM,QAAQ,sFAsVb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/FileItem/file-item.js

@@ -6,6 +6,7 @@ import { Avatar } from "../Avatar/avatar.js";
 import { Button } from "../Button/button.js";
 import { ProgressBar } from "../ProgressBar/progress-bar.js";
 import { ItemSuffix, ItemPrefix, ItemContent } from "../../patterns/element-anatomy/item-anatomy.js";
+import { STACK_GAP_PX } from "../../tokens/uiSize/stack-gap.js";
 const STATUS_ICON = {
   completed: { icon: CircleCheck, color: "text-success" },
   error: { icon: XCircle, color: "text-error" }
@@ -17,6 +18,24 @@ const PROGRESS_STATUS_MAP = {
 };
 const AVATAR_SIZE = 48;
 const ICON_PX = 16;
+function compactBarInset(surface) {
+  const padX = surface === "upload-manager" ? "var(--layout-space-loose)" : "12px";
+  return { padX, left: `calc(${padX} + ${ICON_PX}px + 0.5rem)`, right: padX };
+}
+const BAR_RING_GAP_PX = STACK_GAP_PX;
+const FILE_ITEM_RING_LAYER_CLASS = "before:absolute before:inset-0 before:rounded-[inherit] before:pointer-events-none before:[mask:var(--file-item-ring-cutout)]";
+function fileItemRingCutoutStyle({
+  mode = "compact",
+  surface = "form",
+  status
+}) {
+  if (mode !== "compact" || surface === "upload-manager" || !status) return void 0;
+  const { left, right } = compactBarInset(surface);
+  const keep = "linear-gradient(#000 0 0)";
+  return {
+    ["--file-item-ring-cutout"]: `${keep} top / 100% 50% no-repeat, ${keep} left / calc(${left} - ${BAR_RING_GAP_PX}px) 100% no-repeat, ${keep} right / calc(${right} - ${BAR_RING_GAP_PX}px) 100% no-repeat`
+  };
+}
 const FileItem = React.forwardRef(
   ({
     name,
@@ -39,7 +58,7 @@ const FileItem = React.forwardRef(
     const statusConfig = status && status !== "uploading" ? STATUS_ICON[status] : null;
     const progressWidth = status === "completed" ? 100 : progress;
     const showDesc = isRich ? !!description : status === "error" && !!description;
-    const hoverClass = onClick ? "cursor-pointer" : "";
+    const isUploadManager = surface === "upload-manager";
     const progressBar = hasStatus ? /* @__PURE__ */ jsx(
       ProgressBar,
       {
@@ -63,7 +82,7 @@ const FileItem = React.forwardRef(
             {
               size: ICON_PX,
               className: cn(
-                "shrink-0 transition-opacity motion-reduce:duration-0",
+                "shrink-0",
                 statusConfig.color,
                 // 2026-07-05 D4:鍵盤 focus 同步觸發 swap(:has(:focus-visible),對齊 item-anatomy SUFFIX_HOVER_REVEAL_BY_GROUP SSOT)
                 hoverAction && "group-hover/row:opacity-0 group-has-[:focus-visible]/row:opacity-0"
@@ -83,7 +102,7 @@ const FileItem = React.forwardRef(
                 e.stopPropagation();
                 hoverAction.onClick();
               },
-              className: "absolute inset-0 opacity-0 group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100 transition-opacity motion-reduce:duration-0"
+              className: "absolute inset-0 opacity-0 group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100"
             }
           )
         ]
@@ -108,7 +127,15 @@ const FileItem = React.forwardRef(
             "%"
           ] }),
           statusSlot,
-          actions
+          actions && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-unbounded": "true",
+              className: "inline-flex items-center gap-2",
+              onClick: (e) => e.stopPropagation(),
+              children: actions
+            }
+          )
         ]
       }
     );
@@ -125,7 +152,6 @@ const FileItem = React.forwardRef(
       suffix
     ] });
     const rowA11y = {};
-    const compactStaticBg = !progressBar ? "bg-secondary" : "";
     const keyboardPrimaryAction = onClick ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -148,16 +174,30 @@ const FileItem = React.forwardRef(
             // hover 底色瞬間切換,不做過渡(user 2026-09-10 拍板「第三題改成全部瞬間」;SSOT = tokens/motion/motion.spec.md「hover 回饋不做過渡」)
             "group/row relative flex items-start gap-2 w-full text-body leading-compact",
             // 2026-09-07 H1g:限定只接下面那顆隱形整列鈕(keyboardPrimaryAction)。
-            // 原本裸寫 `has-[:focus-visible]` 不分對象,trailing action 的 <Button> 自帶
-            // ring(button.tsx:66)被聚焦時整列也跟著畫 → 一次互動兩個焦點框,
-            // 違反 focus-canonical「一個項目只有一個指示器」。
-            "has-[[data-row-focus-target]:focus-visible]:ring-2 has-[[data-row-focus-target]:focus-visible]:ring-ring",
+            // 原本裸寫 `has-[:focus-visible]` 不分對象,trailing action 的 <Button> 被聚焦時整列也跟著畫 →
+            // 一次互動兩個焦點框,違反 focus-canonical「一個項目只有一個指示器」。當時 <Button> 自帶
+            // ring;2026-09-16 a7b2be94 起它不再自帶焦點 class、改吃全域外描邊,但限定的理由不變。
+            // 幾何(2026-09-24 user 拍板「可以照你建議內描邊」):**內描邊**。原本寫的 `ring-2 ring-ring`
+            // 是 2026-09-07 就退役的第二套機制,只因閘的舊 regex 只認裸寫的 `focus-visible:ring-2`、
+            // 不認這裡的 `has-[…:focus-visible]:` 括號變體才活到今天(該洞同日已補,見
+            // scripts/focus-geometry-invariant.mjs R2)。
+            // **理由是結構性的**:拿到焦點的是下面那顆 `opacity-0` 的隱形整列鈕,它自己畫不出框,
+            // 指示器改畫在列上 —— 這是 focus-canonical「刻意不畫的唯一合法理由是指示器畫在別的元素上,
+            // 而且必須指得出承擔者」認可的形狀,承擔者就是本行所在的這個列 div。全域外描邊只作用在
+            // 「被聚焦的那個元素」身上,套不到非焦點的列;能掛在列上的只有 focus-ring-inset 與填色專用的
+            // focus-ring-inset-emphasis,列不是主色填色 → focus-ring-inset。
+            // **不是**靠四周淨空不足,也**不是**引用 item-anatomy「選中 × 互動疊加」表那句「列撐滿容器寬度,
+            // 左右沒有 2px 可以往外長」(那格的消費者清單沒有 FileItem):表單的列有圓角、列間 4–12px;
+            // 上傳管理器的列 2026-09-25 起鋪滿面板寬、列間 0(B12)—— 兩種幾何都用內描邊,理由只有上面那條結構性的
+            // (2026-09-24 審查抓到舊句把「淨空」當理由,勿寫回)。
+            // 也**不是**因為捲動容器會裁切 —— 捲動與否明文不進判準。
+            "has-[[data-row-focus-target]:focus-visible]:focus-ring-inset",
             // surface=form → border card(自立輪廓);surface=upload-manager → 無邊框(box 自身是容器,
-            // avatar 作 item 邊界)。2026-06-03 codify rich-borderless(原僅 spec 旁註,consumer 自己移除)。
-            // 2026-06-03 圖五:upload-manager rich 拿掉 px+py(卡片移除後 py 多餘,列高靠 avatar 48 的 content minHeight;
-            // 容器 + gap 控制間距)。form 保留 px-3 py-3 卡片內距。
-            surface === "upload-manager" ? "rounded-md" : "px-3 py-3 border border-divider rounded-md bg-surface",
-            hoverClass,
+            // avatar 作 item 邊界)。2026-06-03 codify rich-borderless(原僅 spec 旁註,consumer 自己移除)。form 保留 px-3 py-3 卡片內距。
+            surface === "upload-manager" ? "px-[var(--layout-space-loose)] py-[calc(var(--layout-space-tight)/2)]" : "px-3 py-3 border border-divider rounded-md bg-surface",
+            onClick && "cursor-pointer",
+            // 滑過(B12,見上方「滑過底色」段):上傳列平常透明 → 換成 neutral-hover;表單卡片平常是「底」bg-surface → 疊一層
+            onClick && (surface === "upload-manager" ? "hover:bg-neutral-hover" : "hover:bg-interaction-hover"),
             className
           ),
           onClick,
@@ -184,21 +224,36 @@ const FileItem = React.forwardRef(
         }
       );
     }
-    const compactPadX = surface === "upload-manager" ? 0 : 12;
+    const { padX: compactPadX, left: compactBarLeft, right: compactBarRight } = compactBarInset(surface);
+    const compactBarBottom = isUploadManager ? "calc(var(--layout-space-tight) / 2)" : "0px";
+    const compactPadBlock = isUploadManager ? { paddingTop: "calc(var(--layout-space-tight) / 2)", paddingBottom: "calc(var(--layout-space-tight) / 2 + 0.5rem)" } : void 0;
+    const ringCutout = fileItemRingCutoutStyle({ mode, surface, status });
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         className: cn(
           // hover 底色瞬間切換,不做過渡(user 2026-09-10 拍板「第三題改成全部瞬間」;SSOT = tokens/motion/motion.spec.md「hover 回饋不做過渡」)
-          "group/row relative flex items-start gap-2 py-2 w-full text-body leading-compact rounded-md",
-          compactStaticBg,
-          // 2026-09-07 H1g:同 rich —— 只接隱形整列鈕,不接自帶 ring 的 trailing <Button>
-          "has-[[data-row-focus-target]:focus-visible]:ring-2 has-[[data-row-focus-target]:focus-visible]:ring-ring",
-          hoverClass,
+          "group/row relative flex items-start gap-2 w-full text-body leading-compact",
+          // form 的列是圓角膠囊 / 圓角列;upload-manager 的列鋪滿面板寬 → 不加圓角(同 rich,AI 推導),上下內距見上方 compactPadBlock
+          !isUploadManager && "py-2 rounded-md",
+          !hasStatus && "bg-secondary",
+          // 2026-09-07 H1g:同 rich —— 只接隱形整列鈕,不接同樣會畫框的 trailing <Button>;
+          // 幾何同 rich 的內描邊(結構性理由見上方那段)。
+          // **列底貼著進度條時,框畫在框圖層 ::before**(2026-09-26,file-item.spec.md「焦點框 × 貼著列底的進度條」)。
+          // 進度條是 absolute,本來就畫在框的**上面**,正好落在內描邊底邊那 2px 上 —— 但它沒有「蓋住」框:
+          // 軌道 --secondary 是半透明,框的藍從軌道透出來;填色 --info 又與框 --ring 同為 blue-6,與框黏成一條
+          // (實測聚焦時填色對軌道 1.10:1,平常 4.55:1;深色 1.17 / 4.04)。框圖層在進度條那一段(兩端各多 2px 縫)
+          // 挖空,露出真正的底:聚焦時進度條與平常逐像素相同,進度條的頭尾與框之間各隔一道底色的縫。
+          // upload-manager 的 bar 離列底 tight/2、碰不到框 → ringCutout 為 undefined,框照舊畫在列上。
+          ringCutout ? [FILE_ITEM_RING_LAYER_CLASS, "has-[[data-row-focus-target]:focus-visible]:before:focus-ring-inset"] : "has-[[data-row-focus-target]:focus-visible]:focus-ring-inset",
+          onClick && "cursor-pointer",
+          // 滑過(B12,見上方「滑過底色」段):有進度條的列平常透明 → 換成 neutral-hover;
+          // 靜態小膠囊平常是 bg-secondary → 換成它自己的下一階 secondary-hover(不借透明底的配對)
+          onClick && (hasStatus ? "hover:bg-neutral-hover" : "hover:bg-secondary-hover"),
           className
         ),
-        style: { paddingInline: compactPadX },
+        style: { paddingInline: compactPadX, ...compactPadBlock, ...ringCutout },
         onClick,
         ...rowA11y,
         ...props,
@@ -209,8 +264,8 @@ const FileItem = React.forwardRef(
           progressBar && /* @__PURE__ */ jsx(
             "div",
             {
-              className: "absolute bottom-0",
-              style: { left: `calc(${compactPadX}px + ${ICON_PX}px + 0.5rem)`, right: compactPadX },
+              className: "absolute",
+              style: { left: compactBarLeft, right: compactBarRight, bottom: compactBarBottom },
               children: progressBar
             }
           )
@@ -229,11 +284,13 @@ const fileItemMeta = {
   tokens: {
     bg: ["bg-secondary", "bg-surface"],
     fg: ["text-fg-muted", "text-fg-secondary"],
-    ring: []
+    ring: ["focus-ring-inset"]
   }
 };
 export {
+  FILE_ITEM_RING_LAYER_CLASS,
   FileItem,
-  fileItemMeta
+  fileItemMeta,
+  fileItemRingCutoutStyle
 };
 //# sourceMappingURL=file-item.js.map

package/dist/components/FileItem/file-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-item.js","sources":["../../../src/components/FileItem/file-item.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.\nimport * as React from 'react'\nimport { Paperclip, CircleCheck, XCircle, Download, RotateCw } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ProgressBar } from '@/design-system/components/ProgressBar/progress-bar'\nimport { ItemContent, ItemPrefix, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * FileItem — 檔案顯示 / 上傳進度\n *\n * Typography: 兩 mode 統一 scanning — text-body (14px) + leading-compact (1.3)(詳 spec「Typography」段,2026-04-23)\n *\n * 兩種 mode（精簡 vs 完整內容呈現）:\n *\n * compact（★ default）: Paperclip 16px 在左。右側 content + bar。\n *   padding 詳 spec「Padding」表(form: px-3 py-2;surface=upload-manager: px-0 保留 py-2)。\n *   description 只有 error 才顯示。\n *   bar 跟文字左邊對齊（在 icon 右邊的 column 內）。\n *\n * rich: Avatar 48px square 在左（顯示檔案內容縮圖）。右側 content + bar。\n *   多行 description（size / status message）。\n *   有 bar → justify-between（bar 底部對齊 avatar）\n *   無 bar → justify-center（文字垂直置中對齊 avatar）\n *\n * status 可選。不傳 = 已上傳檔案（無 bar，可點擊下載）。\n * onClick → 只加 cursor-pointer(**永不顯示 hover-bg**;FileItem 三型態皆 permanent-anchored,詳 spec「Hover 行為 canonical」)。\n */\n\nconst STATUS_ICON = {\n  completed: { icon: CircleCheck, color: 'text-success' },\n  error: { icon: XCircle, color: 'text-error' },\n} as const\n\n// ProgressBar status 映射:uploading=inProgress(藍) / completed=success(綠) / error=error(紅)\n// 與 ProgressBar 元件的 status prop 對齊,不需再維護 PROGRESS_COLOR 本地 map。\nconst PROGRESS_STATUS_MAP = {\n  uploading: 'inProgress',\n  completed: 'success',\n  error: 'error',\n} as const\n\nconst AVATAR_SIZE = 48\nconst ICON_PX = 16\n\nexport interface FileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  name: string\n  /**\n   * 兩種呈現 mode（精簡 vs 完整）：\n   * - `compact`（預設）：paperclip + filename 單行 inline\n   * - `rich`：縮圖 + 檔名 + size + status + progress 的完整 card 呈現\n   */\n  mode?: 'compact' | 'rich'\n  /**\n   * 清單所在的 surface context（2026-06-03 codify rich-borderless）：\n   * - `form`（預設）：rich = border card（自立輪廓，Slack/Notion/Linear attachment 慣例）\n   * - `upload-manager`：rich = **無邊框**（Google Drive/Dropbox 上傳管理面板 —— 面板自身已是容器，\n   *   card border 多餘 = 雙層容器）；avatar 作每筆 item 視覺邊界。compact 的進度條/灰底不受 surface 影響\n   *   （由 status 決定）。\n   * surface-driven（非 status-driven）：避免 form 內 rich 上傳中變無邊框、存好變 card 的邊框閃爍。\n   * 列間 gap 由 List wrapper canonical 決定（form rich 8px / upload-manager rich 12px tight / compact 4px，見 spec）。\n   */\n  surface?: 'form' | 'upload-manager'\n  status?: 'uploading' | 'completed' | 'error'\n  progress?: number\n  /** rich mode: 檔案大小、狀態訊息。compact: 只有 error 才顯示。 ReactNode 支援 inline clickable link(如「View log」)。 */\n  description?: React.ReactNode\n  thumbnailSrc?: string\n  actions?: React.ReactNode\n  onClick?: () => void\n  /** 整列 primary action 的 accessible name；預設 `開啟 {name}`。 */\n  actionAriaLabel?: string\n  /**\n   * Hover 動作(passive 狀態 icon 變互動 button 的 UX):\n   * - `onDownload`:有值時,`status=\"completed\"` 的綠 ✓ icon 在 row hover 時\n   *   換成 Download ↓ button;click 觸發 onDownload。無值保持 passive 綠 ✓。\n   * - `onRetry`:有值時,`status=\"error\"` 的紅 ✗ icon 在 row hover 時換成 RotateCw ⟲\n   *   button;click 觸發 onRetry。無值保持 passive 紅 ✗。\n   *\n   * 世界級對照:Gmail / Slack / Dropbox 附件的 passive 狀態 → hover 變 action\n   * 的 UX,使用者知道檔案狀態且能立即行動。\n   */\n  onDownload?: () => void\n  onRetry?: () => void\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FileItem = React.forwardRef<HTMLDivElement, FileItemProps>(\n  (\n    {\n      name,\n      mode = 'compact',\n      surface = 'form',\n      status,\n      progress = 0,\n      description,\n      thumbnailSrc,\n      actions,\n      onClick,\n      actionAriaLabel = `開啟 ${name}`,\n      onDownload,\n      onRetry,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isRich = mode === 'rich'\n    const hasStatus = !!status\n    const statusConfig = status && status !== 'uploading' ? STATUS_ICON[status] : null\n    const progressWidth = status === 'completed' ? 100 : progress\n\n    // compact 只有 error 才顯示 description\n    const showDesc = isRich ? !!description : (status === 'error' && !!description)\n\n    // Hover 行為 canonical(2026-04-23 user 校準):**FileItem 永不顯示 hover-bg**。\n    // 各型態都有永久 visual anchor:rich surface=form = border card / rich surface=upload-manager\n    // = avatar 48 thumbnail 作 item 邊界(無邊框)/ compact 無 status = bg-secondary /\n    // compact 有 status = 底部 progress bar(分隔線型 affordance)——再加 hover-bg 是\n    // double-emphasis,視覺雜。世界級共識(Slack / Notion / Figma / Gmail 皆無 hover-bg):\n    // permanent-anchored 元件 hover 只靠 cursor + action icon fade / border highlight,\n    // 不靠 row bg。onClick 存在時只給 `cursor-pointer`,affordance 靠 cursor + 點擊行為本身。\n    const hoverClass = onClick ? 'cursor-pointer' : ''\n\n    // 消費 ProgressBar 元件(SSOT);不再自 roll bar。\n    // compact mode 用 2px(極密集 row layout),rich mode 用預設 4px。這是 FileItem\n    // 私有 composition 細節；ProgressBar 公開 API 維持單一 4px、沒有 height/size 軸。\n    // a11y(2026-04-25 axe aria-progressbar-name):aria-label 用 file name 作 context。\n    const progressBar = hasStatus ? (\n      <ProgressBar\n        value={progressWidth}\n        status={PROGRESS_STATUS_MAP[status!]}\n        className={isRich ? undefined : '!h-0.5'}\n        aria-label={`${name} 上傳進度`}\n      />\n    ) : null\n\n    // suffix 對齊 label 第一行(item-anatomy「24px 閾值對齊規則」小 suffix canonical):\n    // icons 16 ≤ 24 屬小 suffix,統一 h-[1lh] inline(由 ItemSuffix primitive 提供),\n    // 不因 desc wrap 改公式。兩 mode 同公式,跟 item-anatomy 一致。\n\n    // Status slot 幾何(2026-04-23 user 統一):rich + compact 都用 `var(--field-height-xs)`(24)\n    // 容器,裡面 Button xs iconOnly variant=\"text\"(auto data-unbounded)。\n    // Compact 不影響 row 高度 = suffix wrapper 的 data-unbounded CSS 讓 Button layout\n    // 收斂到 1lh(同 compact row 內容高),視覺/touch target 仍 24。\n    const slotHw = 'var(--field-height-xs)'\n\n    const hoverAction =\n      status === 'completed' && onDownload ? { icon: Download, onClick: onDownload, label: `下載 ${name}` } :\n      status === 'error' && onRetry        ? { icon: RotateCw, onClick: onRetry,    label: `重試 ${name}` } :\n      null\n\n    const statusSlot = statusConfig ? (\n      <span\n        data-unbounded=\"true\"\n        className=\"relative inline-flex items-center justify-center shrink-0\"\n        style={{ width: slotHw, height: slotHw }}\n      >\n        {/* Passive 狀態 icon:預設可見;若有 hover-swap,row-hover 時淡出 */}\n        <statusConfig.icon\n          size={ICON_PX}\n          className={cn(\n            'shrink-0 transition-opacity motion-reduce:duration-0',\n            statusConfig.color,\n            // 2026-07-05 D4:鍵盤 focus 同步觸發 swap(:has(:focus-visible),對齊 item-anatomy SUFFIX_HOVER_REVEAL_BY_GROUP SSOT)\n            hoverAction && 'group-hover/row:opacity-0 group-has-[:focus-visible]/row:opacity-0',\n          )}\n          aria-hidden\n        />\n        {/* Active action:row-hover 時淡入(rich + compact 同 Button xs 統一) */}\n        {hoverAction && (\n          <Button\n            variant=\"text\"\n            size=\"xs\"\n            iconOnly\n            startIcon={hoverAction.icon}\n            aria-label={hoverAction.label}\n            onClick={(e) => { e.stopPropagation(); hoverAction.onClick() }}\n            className=\"absolute inset-0 opacity-0 group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100 transition-opacity motion-reduce:duration-0\"\n          />\n        )}\n      </span>\n    ) : null\n\n    // 2026-07-16 dim 39/DA3:消費 ItemSuffix primitive(照 Notice 2026-06-15 已遷模式)。\n    // ItemSuffix base geometry(h-[1lh] shrink-0 ml-auto flex items-center gap-2)= 原手刻\n    // div 的 flex items-center gap-2 shrink-0 h-[1lh];多出的 ml-auto 為 no-op(左鄰\n    // ItemContent 是 flex-1,已把 suffix 推到右緣)→ 像素相等。hoverReveal 預設 false,\n    // 不干擾本檔自有的 statusSlot hover-swap 機制(group-hover/row 系)。\n    const suffix = (\n      <ItemSuffix\n        className={cn(\n          // data-unbounded chrome-canonical trick:let Button xs (24) live inside h-[1lh]\n          // wrapper(compact ~18.2 / rich ~18.2 scanning)without pushing row height。\n          // 視覺/hit area 仍 24,layout footprint 收斂到 1lh。同 overlay-surface\n          // 的 SurfaceHeader dismiss canonical(2026-04-22 v5)。\n          // **child selector `[&>[data-unbounded]]`(非 descendant)**:只針對 suffix\n          // wrapper **直接子元素**(statusSlot span、actions Button)套 margin,\n          // 避免 status slot 內部 hover-swap Button(nested)也套造成 layout 跳動。\n          '[&>[data-unbounded]]:my-[calc((1lh-var(--field-height-xs))/2)]',\n        )}\n      >\n        {status === 'uploading' && isRich && (\n          <span className=\"text-fg-secondary tabular-nums\">{progress}%</span>\n        )}\n        {statusSlot}\n        {actions}\n      </ItemSuffix>\n    )\n\n    // content row — 消費 ItemContent primitive(封裝 label + desc + mt-gap token SSOT)。\n    // 兩 mode 共用:primitive 改 → 兩 mode 同步,不需 grep。\n    // typography:scanning mode(2026-04-23 user 指示)—— label body(14/1.3) + desc caption(12/1.3);\n    // row 本身加 `leading-compact` 配合 scanning idiom(同 MenuItem row)。\n    const contentRow = (\n      <div className=\"flex items-start gap-2\">\n        <ItemContent\n          label={name}\n          description={showDesc ? description : undefined}\n          mode=\"scanning\"\n          descriptionTone={status === 'error' ? 'error' : 'secondary'}\n        />\n        {suffix}\n      </div>\n    )\n\n    // a11y nested-interactive contract:row 含 hover-swap / trailing action buttons，故 row\n    // 本身不可設 role=button + tabIndex。Primary keyboard path 由下方 sibling native button\n    // 承接；mouse 仍由 row onClick 承接，兩者皆呼叫同一 callback。\n    const rowA11y = {}\n\n    // Compact 靜態背景(AR20):無進度條 → 顯示 `bg-secondary`(= neutral-3)作「檔案已上傳 /\n    // 靜態列表」視覺區隔,跟「上傳中(有 progress bar)」對照。hover 不改 bg(見上方\n    // hoverClass canonical:FileItem 永不顯示 hover-bg)。\n    // **為什麼 bg-secondary 不 bg-neutral-3**:`bg-neutral-3` 不是合法 Tailwind utility\n    // (primitive token `--color-neutral-3` 沒經 `@theme inline` 橋接);`bg-secondary`\n    // 是 semantic token 橋接的 utility(見 `tokens/color/semantic.css`@theme inline),\n    // 底色同樣指向 `--color-neutral-3`。對齊 Badge low / ProgressBar track SSOT。\n    const compactStaticBg = !progressBar ? 'bg-secondary' : ''\n    // Primary row action 與 trailing actions 是 sibling controls，不把整列設成 role=button，\n    // 因此不會形成 nested-interactive。透明 full-row button 只接 keyboard/focus；pointer\n    // 仍由既有 row onClick 接手，保持 hit area 與 consumer callback contract 不變。\n    const keyboardPrimaryAction = onClick ? (\n      <button\n        type=\"button\"\n        aria-label={actionAriaLabel}\n        // 整列焦點框的唯一觸發者(見上方兩處 has-[[data-row-focus-target]:focus-visible])。\n        // 它自己不畫框(opacity-0),指示器畫在列上 —— focus-canonical 認可的「指示器畫在別的元素上」。\n        data-row-focus-target=\"\"\n        className=\"absolute inset-0 opacity-0 pointer-events-none\"\n        onClick={(event) => {\n          event.stopPropagation()\n          onClick()\n        }}\n      />\n    ) : null\n\n    // ── rich(含縮圖完整呈現)——AR17 canonical:surface=form 加邊框 card / surface=upload-manager 無邊框 ──\n    // Rich surface=form 是「檔案 card」風格,外框讓每個 row 視覺上是獨立 card(Slack / Notion /\n    // Linear attachment 慣例);surface=upload-manager 無邊框,avatar 作 item 邊界(面板自身是容器,\n    // 見 file-item.spec.md「邊框 / 背景」表)\n    if (isRich) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            // hover 底色瞬間切換,不做過渡(user 2026-09-10 拍板「第三題改成全部瞬間」;SSOT = tokens/motion/motion.spec.md「hover 回饋不做過渡」)\n            'group/row relative flex items-start gap-2 w-full text-body leading-compact',\n            // 2026-09-07 H1g:限定只接下面那顆隱形整列鈕(keyboardPrimaryAction)。\n            // 原本裸寫 `has-[:focus-visible]` 不分對象,trailing action 的 <Button> 自帶\n            // ring(button.tsx:66)被聚焦時整列也跟著畫 → 一次互動兩個焦點框,\n            // 違反 focus-canonical「一個項目只有一個指示器」。\n            'has-[[data-row-focus-target]:focus-visible]:ring-2 has-[[data-row-focus-target]:focus-visible]:ring-ring',\n            // surface=form → border card(自立輪廓);surface=upload-manager → 無邊框(box 自身是容器,\n            // avatar 作 item 邊界)。2026-06-03 codify rich-borderless(原僅 spec 旁註,consumer 自己移除)。\n            // 2026-06-03 圖五:upload-manager rich 拿掉 px+py(卡片移除後 py 多餘,列高靠 avatar 48 的 content minHeight;\n            // 容器 + gap 控制間距)。form 保留 px-3 py-3 卡片內距。\n            surface === 'upload-manager' ? 'rounded-md' : 'px-3 py-3 border border-divider rounded-md bg-surface',\n            hoverClass,\n            className,\n          )}\n          onClick={onClick}\n          {...rowA11y}\n          {...props}\n        >\n          {keyboardPrimaryAction}\n          <Avatar src={thumbnailSrc} alt={name} size={AVATAR_SIZE} shape=\"square\" className=\"shrink-0\" />\n          {/* Rich layout invariant(2026-04-23 user 校準):\n              - content col minHeight = AVATAR_SIZE(48),確保 1-line desc 時內容 ≥ avatar 高\n              - `justify-between`(有 bar)/`justify-center`(無 bar):\n                * 1-line desc:label 頂 + progress bar 底 **自動對齊 avatar 頂/底**\n                * 無 bar:content 垂直 center 對齊 avatar 中\n              - `gap-2`:desc ↔ progress bar **至少 8px gap**(multi-line desc 時 bar 溢出仍保 8px)\n              - row `items-start`:avatar top-align 作視覺引導(tight-stack box 內 item 邊界) */}\n          <div\n            className={cn(\n              'flex flex-col flex-1 min-w-0 gap-2',\n              progressBar ? 'justify-between' : 'justify-center',\n            )}\n            style={{ minHeight: AVATAR_SIZE }}\n          >\n            {contentRow}\n            {progressBar}\n          </div>\n        </div>\n      )\n    }\n\n    // ── compact: py-2, bar absolute 底部 ──\n    // 左右 padding 單一來源(SSOT):form=12px(= px-3);upload-manager=0(由面板提供 L/R)。\n    // progress bar 是 absolute 定位,其 left/right 必須跟此值「同源」—— 否則 surface 一拿掉 padding,\n    // bar 的 offset 沒同步就會對齊跑掉(2026-06-03 圖五 bug:原本 left/right 寫死 0.75rem 假設 px-3)。\n    const compactPadX = surface === 'upload-manager' ? 0 : 12\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          // hover 底色瞬間切換,不做過渡(user 2026-09-10 拍板「第三題改成全部瞬間」;SSOT = tokens/motion/motion.spec.md「hover 回饋不做過渡」)\n          'group/row relative flex items-start gap-2 py-2 w-full text-body leading-compact rounded-md',\n          compactStaticBg,\n          // 2026-09-07 H1g:同 rich —— 只接隱形整列鈕,不接自帶 ring 的 trailing <Button>\n          'has-[[data-row-focus-target]:focus-visible]:ring-2 has-[[data-row-focus-target]:focus-visible]:ring-ring',\n          hoverClass,\n          className,\n        )}\n        style={{ paddingInline: compactPadX }}\n        onClick={onClick}\n        {...rowA11y}\n        {...props}\n      >\n        {keyboardPrimaryAction}\n        <ItemPrefix>\n          <Paperclip size={ICON_PX} className=\"shrink-0 text-fg-muted\" aria-hidden />\n        </ItemPrefix>\n        {/* Compact 共用 contentRow(via ItemContent primitive SSOT)—— 先前 inline\n            hand-craft 導致 compact label↔desc gap 跟 rich 不同步。shared contentRow\n            保證兩 mode 修 primitive 一處全同步。 */}\n        <div className=\"flex flex-col flex-1 min-w-0\">\n          {contentRow}\n        </div>\n\n        {/* ProgressBar: absolute 底部。left/right 與 compactPadX 同源:\n            left = padX + icon + gap-2(0.5rem)對齊 label 首字;right = padX 收在 row 內緣。 */}\n        {progressBar && (\n          <div\n            className=\"absolute bottom-0\"\n            style={{ left: `calc(${compactPadX}px + ${ICON_PX}px + 0.5rem)`, right: compactPadX }}\n          >\n            {progressBar}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nFileItem.displayName = 'FileItem'\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 fileItemMeta = {\n  component: 'FileItem',\n  family: 2,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: ['bg-secondary', 'bg-surface'],\n    fg: ['text-fg-muted', 'text-fg-secondary'],\n    ring: [],\n  },\n} as const\n\nexport { FileItem }\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"file-item.js","sources":["../../../src/components/FileItem/file-item.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.\nimport * as React from 'react'\nimport { Paperclip, CircleCheck, XCircle, Download, RotateCw } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ProgressBar } from '@/design-system/components/ProgressBar/progress-bar'\nimport { ItemContent, ItemPrefix, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { STACK_GAP_PX } from '@/design-system/tokens/uiSize/stack-gap'\n\n/**\n * FileItem — 檔案顯示 / 上傳進度\n *\n * Typography: 兩 mode 統一 scanning — text-body (14px) + leading-compact (1.3)(詳 spec「Typography」段,2026-04-23)\n *\n * 兩種 mode（精簡 vs 完整內容呈現）:\n *\n * compact（★ default）: Paperclip 16px 在左。右側 content + bar。\n *   padding 詳 spec「Padding」表(form: px-3 py-2;surface=upload-manager: 列自帶左右 loose、上下 tight/2,\n *   面板 body 左右 0 —— 2026-09-25 待辦總帳 B12,可點的列滑過底色鋪到面板邊)。\n *   description 只有 error 才顯示。\n *   bar 跟文字左邊對齊（在 icon 右邊的 column 內）。\n *\n * rich: Avatar 48px square 在左（顯示檔案內容縮圖）。右側 content + bar。\n *   多行 description（size / status message）。\n *   有 bar → justify-between（bar 底部對齊 avatar）\n *   無 bar → justify-center（文字垂直置中對齊 avatar）\n *\n * status 可選。不傳 = 已上傳檔案（無 bar，可點擊下載）。\n * onClick → cursor-pointer + 滑過底色(只有點了會有反應的才加,依平常底色配對;詳 spec「滑過」段,待辦總帳 B12)。\n */\n\nconst STATUS_ICON = {\n  completed: { icon: CircleCheck, color: 'text-success' },\n  error: { icon: XCircle, color: 'text-error' },\n} as const\n\n// ProgressBar status 映射:uploading=inProgress(藍) / completed=success(綠) / error=error(紅)\n// 與 ProgressBar 元件的 status prop 對齊,不需再維護 PROGRESS_COLOR 本地 map。\nconst PROGRESS_STATUS_MAP = {\n  uploading: 'inProgress',\n  completed: 'success',\n  error: 'error',\n} as const\n\nconst AVATAR_SIZE = 48\nconst ICON_PX = 16\n\nexport interface FileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  name: string\n  /**\n   * 兩種呈現 mode（精簡 vs 完整）：\n   * - `compact`（預設）：paperclip + filename 單行 inline\n   * - `rich`：縮圖 + 檔名 + size + status + progress 的完整 card 呈現\n   */\n  mode?: 'compact' | 'rich'\n  /**\n   * 清單所在的 surface context（2026-06-03 codify rich-borderless）：\n   * - `form`（預設）：rich = border card（自立輪廓，Slack/Notion/Linear attachment 慣例）\n   * - `upload-manager`：rich = **無邊框**（Google Drive/Dropbox 上傳管理面板 —— 面板自身已是容器，\n   *   card border 多餘 = 雙層容器）；avatar 作每筆 item 視覺邊界。compact 的進度條/灰底不受 surface 影響\n   *   （由 status 決定）。\n   * surface-driven（非 status-driven）：避免 form 內 rich 上傳中變無邊框、存好變 card 的邊框閃爍。\n   * 列間 gap 由 List wrapper canonical 決定(form rich 8px / form compact 4px / upload-manager 0 —— 列自帶上下 tight/2,\n   * 列間 ink 距仍 12,2026-09-25 待辦總帳 B12;見 spec)。\n   */\n  surface?: 'form' | 'upload-manager'\n  status?: 'uploading' | 'completed' | 'error'\n  progress?: number\n  /** rich mode: 檔案大小、狀態訊息。compact: 只有 error 才顯示。 ReactNode 支援 inline clickable link(如「View log」)。 */\n  description?: React.ReactNode\n  thumbnailSrc?: string\n  actions?: React.ReactNode\n  onClick?: () => void\n  /** 整列 primary action 的 accessible name；預設 `開啟 {name}`。 */\n  actionAriaLabel?: string\n  /**\n   * Hover 動作(passive 狀態 icon 變互動 button 的 UX):\n   * - `onDownload`:有值時,`status=\"completed\"` 的綠 ✓ icon 在 row hover 時\n   *   換成 Download ↓ button;click 觸發 onDownload。無值保持 passive 綠 ✓。\n   * - `onRetry`:有值時,`status=\"error\"` 的紅 ✗ icon 在 row hover 時換成 RotateCw ⟲\n   *   button;click 觸發 onRetry。無值保持 passive 紅 ✗。\n   *\n   * 世界級對照:Gmail / Slack / Dropbox 附件的 passive 狀態 → hover 變 action\n   * 的 UX,使用者知道檔案狀態且能立即行動。\n   */\n  onDownload?: () => void\n  onRetry?: () => void\n}\n\n// ── compact 進度條的左右位置(單一來源)──\n// 進度條本身(下方 compact 分支)與焦點框的挖空(fileItemRingCutoutStyle)都從這裡取,內距一改兩者一起動\n// (2026-06-03 圖五 bug:bar 的 left / right 寫死、內距一改就對不齊)。\n//   form:左右 12px(= px-3)。upload-manager(2026-09-25 待辦總帳 B12):左右 loose(= 原本面板給的值,文字 x 不變)。\n//   left = 內距 + icon + gap-2(0.5rem)→ 對齊 label 首字;right = 內距 → 收在列內緣。\nfunction compactBarInset(surface: FileItemProps['surface']) {\n  const padX = surface === 'upload-manager' ? 'var(--layout-space-loose)' : '12px'\n  return { padX, left: `calc(${padX} + ${ICON_PX}px + 0.5rem)`, right: padX }\n}\n\n/**\n * 焦點框在進度條兩端留的縫(px)= DS 通用的「疊在一起的兩樣東西」之間的縫(`tokens/uiSize/stack-gap.ts`,\n * 全域外描邊的 outline-offset、頭像堆疊的縫、步驟條外圈的縫都是同一個 token)。\n */\nconst BAR_RING_GAP_PX = STACK_GAP_PX\n\n/**\n * @internal\n * 焦點框的「框圖層」:與列同形同大的 `::before`(file-item.spec.md「焦點框 × 貼著列底的進度條」)。\n * 只在**列底貼著進度條**時用 —— form 的 compact 列有 status 時。upload-manager 的進度條離列底 tight/2、\n * rich 的進度條在內容區,都碰不到框,照舊把框畫在列上。\n * 為什麼要另一層:進度條住在列裡。框若畫在列上,列是進度條的祖先,遮罩會連進度條一起挖掉;\n * 畫在 `::before` 上,遮罩只挖框。層疊不變:`::before` 是第一個定位子層,進度條(absolute)仍畫在它上面;\n * 而且洞裡根本沒有框,進度條與框誰畫在上面都不影響結果(CSS UI 4 把 outline 的疊放順序留給瀏覽器自己決定,\n * 「The stacking of the rendering of these outlines is explicitly left up to implementations」)。\n * 這裡只有位置與遮罩,**不含觸發條件**:FileItem 自己的列由整列隱形鈕觸發、FileUpload 的清單列由列自己的\n * `:focus-visible` 觸發,各自在使用端寫。線寬、顏色、往內 2px、圓角全部照舊來自 `focus-ring-inset`\n * (`ds-canonical/references/focus-canonical.md`「框怎麼畫」),不是第四種幾何。\n */\nexport const FILE_ITEM_RING_LAYER_CLASS =\n  'before:absolute before:inset-0 before:rounded-[inherit] before:pointer-events-none before:[mask:var(--file-item-ring-cutout)]'\n\n/**\n * @internal\n * 框圖層的遮罩(`--file-item-ring-cutout`)。列底沒有貼著進度條時回 `undefined` —— 呼叫端據此照舊把框畫在列上。\n * 遮罩 = 三塊保留區的聯集:上半部整條 + 左段 + 右段。挖掉的是「進度條那一段(兩端各多 BAR_RING_GAP_PX)的下半部」,\n * 框在那個範圍裡只有底邊,所以挖掉的只有底邊那一段。露出來的是**真正在後面的東西**(列自己的滑過色、卡片、面板、頁面),\n * 不需要知道底色是什麼(與 `avatar.tsx` 頭像堆疊「挖空,不是外圈」同一個理由:深色的 `--surface` 本身半透明,\n * 墊任何固定底色都會在某種容器上錯色)。\n */\nexport function fileItemRingCutoutStyle({\n  mode = 'compact',\n  surface = 'form',\n  status,\n}: Pick<FileItemProps, 'mode' | 'surface' | 'status'>): React.CSSProperties | undefined {\n  if (mode !== 'compact' || surface === 'upload-manager' || !status) return undefined\n  const { left, right } = compactBarInset(surface)\n  const keep = 'linear-gradient(#000 0 0)' // 遮罩只看不透明度;顏色無意義\n  return {\n    ['--file-item-ring-cutout' as string]:\n      `${keep} top / 100% 50% no-repeat, ` +\n      `${keep} left / calc(${left} - ${BAR_RING_GAP_PX}px) 100% no-repeat, ` +\n      `${keep} right / calc(${right} - ${BAR_RING_GAP_PX}px) 100% no-repeat`,\n  }\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FileItem = React.forwardRef<HTMLDivElement, FileItemProps>(\n  (\n    {\n      name,\n      mode = 'compact',\n      surface = 'form',\n      status,\n      progress = 0,\n      description,\n      thumbnailSrc,\n      actions,\n      onClick,\n      actionAriaLabel = `開啟 ${name}`,\n      onDownload,\n      onRetry,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const isRich = mode === 'rich'\n    const hasStatus = !!status\n    const statusConfig = status && status !== 'uploading' ? STATUS_ICON[status] : null\n    const progressWidth = status === 'completed' ? 100 : progress\n\n    // compact 只有 error 才顯示 description\n    const showDesc = isRich ? !!description : (status === 'error' && !!description)\n\n    // 滑過底色(2026-09-25 待辦總帳 B12;取代 2026-04-23「FileItem 永不顯示 hover-bg」)。\n    // user 原話:「要點了會有反應的才加，並確保加上去之後不會有任何視覺奇怪的地方，且按鈕的互動樣式也是自然疊加上去吧？用再亮一層這樣的措辭是否不夠精準？」\n    // → 只有傳了 onClick 的列 / 卡才有滑過底色;沒傳就沒有(✓→下載鈕的換位照舊,那顆鈕有自己的滑過色)。\n    // 換上什麼色依「平常底色」配對(tokens/color/color.spec.md「Hover 換色配對總則」),直接寫在下方各 mode 的 cn() 裡、\n    // 跟靜止底同一次呼叫 —— scripts/hover-own-pair-invariant.mjs 才看得到這一對:\n    //   rich + form 卡片 bg-surface(「底」)→ 底不換,疊一層 bg-interaction-hover\n    //   compact 小膠囊 bg-secondary → 換成自己的下一階 bg-secondary-hover\n    //   透明的列(compact 有進度條、upload-manager 的列)→ 換成 bg-neutral-hover\n    // 不加按住(active:)那一階:FileItem「列按下深一階」是待辦總帳 N4 / F 模型 D3(2),尚未提問(AI 推導:不先替 user 決定)。\n    // 列內按鈕(刪除、✓→下載)滑過時換上自己的 neutral-hover(半透明),自然疊在列的滑過色上,不寫特例\n    // (color.spec.md「巢狀滑過」段)。\n    const isUploadManager = surface === 'upload-manager'\n\n    // 消費 ProgressBar 元件(SSOT);不再自 roll bar。\n    // compact mode 用 2px(極密集 row layout),rich mode 用預設 4px。這是 FileItem\n    // 私有 composition 細節；ProgressBar 公開 API 維持單一 4px、沒有 height/size 軸。\n    // a11y(2026-04-25 axe aria-progressbar-name):aria-label 用 file name 作 context。\n    const progressBar = hasStatus ? (\n      <ProgressBar\n        value={progressWidth}\n        status={PROGRESS_STATUS_MAP[status!]}\n        className={isRich ? undefined : '!h-0.5'}\n        aria-label={`${name} 上傳進度`}\n      />\n    ) : null\n\n    // suffix 對齊 label 第一行(item-anatomy「24px 閾值對齊規則」小 suffix canonical):\n    // icons 16 ≤ 24 屬小 suffix,統一 h-[1lh] inline(由 ItemSuffix primitive 提供),\n    // 不因 desc wrap 改公式。兩 mode 同公式,跟 item-anatomy 一致。\n\n    // Status slot 幾何(2026-04-23 user 統一):rich + compact 都用 `var(--field-height-xs)`(24)\n    // 容器,裡面 Button xs iconOnly variant=\"text\"(auto data-unbounded)。\n    // Compact 不影響 row 高度 = suffix wrapper 的 data-unbounded CSS 讓 Button layout\n    // 收斂到 1lh(同 compact row 內容高),視覺與命中區仍 24(命中 ≡ 可視,見\n    // ds-canonical/references/hit-area-canonical.md;2026-09-24 把原文的「touch target」正名為命中區)。\n    const slotHw = 'var(--field-height-xs)'\n\n    const hoverAction =\n      status === 'completed' && onDownload ? { icon: Download, onClick: onDownload, label: `下載 ${name}` } :\n      status === 'error' && onRetry        ? { icon: RotateCw, onClick: onRetry,    label: `重試 ${name}` } :\n      null\n\n    const statusSlot = statusConfig ? (\n      <span\n        data-unbounded=\"true\"\n        className=\"relative inline-flex items-center justify-center shrink-0\"\n        style={{ width: slotHw, height: slotHw }}\n      >\n        {/* Passive 狀態 icon:預設可見;若有 hover-swap,row-hover 時瞬間隱藏、換上操作鈕(不淡出;\n            tokens/motion/motion.spec.md「hover 回饋不做過渡」,2026-09-26 延伸到滑過才出現的按鈕,待辦總帳 L9 / N4(3)) */}\n        <statusConfig.icon\n          size={ICON_PX}\n          className={cn(\n            'shrink-0',\n            statusConfig.color,\n            // 2026-07-05 D4:鍵盤 focus 同步觸發 swap(:has(:focus-visible),對齊 item-anatomy SUFFIX_HOVER_REVEAL_BY_GROUP SSOT)\n            hoverAction && 'group-hover/row:opacity-0 group-has-[:focus-visible]/row:opacity-0',\n          )}\n          aria-hidden\n        />\n        {/* Active action:row-hover 時瞬間出現(不淡入,同上;rich + compact 同 Button xs 統一) */}\n        {hoverAction && (\n          <Button\n            variant=\"text\"\n            size=\"xs\"\n            iconOnly\n            startIcon={hoverAction.icon}\n            aria-label={hoverAction.label}\n            onClick={(e) => { e.stopPropagation(); hoverAction.onClick() }}\n            className=\"absolute inset-0 opacity-0 group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100\"\n          />\n        )}\n      </span>\n    ) : null\n\n    // 2026-07-16 dim 39/DA3:消費 ItemSuffix primitive(照 Notice 2026-06-15 已遷模式)。\n    // ItemSuffix base geometry(h-[1lh] shrink-0 ml-auto flex items-center gap-2)= 原手刻\n    // div 的 flex items-center gap-2 shrink-0 h-[1lh];多出的 ml-auto 為 no-op(左鄰\n    // ItemContent 是 flex-1,已把 suffix 推到右緣)→ 像素相等。hoverReveal 預設 false,\n    // 不干擾本檔自有的 statusSlot hover-swap 機制(group-hover/row 系)。\n    const suffix = (\n      <ItemSuffix\n        className={cn(\n          // data-unbounded chrome-canonical trick:let Button xs (24) live inside h-[1lh]\n          // wrapper(compact ~18.2 / rich ~18.2 scanning)without pushing row height。\n          // 視覺/hit area 仍 24,layout footprint 收斂到 1lh。同 overlay-surface\n          // 的 SurfaceHeader dismiss canonical(2026-04-22 v5)。\n          // **child selector `[&>[data-unbounded]]`(非 descendant)**:只針對 suffix\n          // wrapper **直接子元素**(statusSlot span、actions Button)套 margin,\n          // 避免 status slot 內部 hover-swap Button(nested)也套造成 layout 跳動。\n          '[&>[data-unbounded]]:my-[calc((1lh-var(--field-height-xs))/2)]',\n        )}\n      >\n        {status === 'uploading' && isRich && (\n          <span className=\"text-fg-secondary tabular-nums\">{progress}%</span>\n        )}\n        {statusSlot}\n        {/* **動作鈕不搶整列 click,由元件自己吃掉,不要求 consumer 每次記得**(2026-09-24)。\n            Canonical 早就寫了:`patterns/element-anatomy/item-anatomy.spec.md`「suffix 可以塞什麼」表的 Inline Action 列\n            「明確點擊靶子 ≤ 24px,`stopPropagation` 避免搶 row click」。\n            但先前只有 FileItem **自家**的 hover-swap 鈕做到(本檔 statusSlot 裡 `hoverAction` 那顆 Button 的 `stopPropagation`),consumer 從 `actions`\n            傳進來的鈕沒有任何人做 —— 於是「點刪除 → 整列 onClick 也跟著跑 → 檔案被開起來」\n            在我們自己的示範裡活到今天(實測:`已上傳` 這則點刪除鈕,FileViewer 就開)。\n            同一列同時有整列 onClick 和 trailing action 時,這是**必然**會犯的錯,所以答案不是\n            在文件裡要 consumer 記得,而是元件內部把邊界劃好(同 `agent-panel.tsx` 選項卡裡「其他(自由輸入)」輸入框的\n            `stopPropagation` / `data-table.tsx` 選取欄 `cellEl` 裡 Checkbox 與 RadioGroupItem 的 `stopPropagation`)。\n            **只包 `actions`、不包整個 suffix**:suffix 裡的 `{progress}%` 與被動狀態圖示是唯讀\n            metadata,item-anatomy「suffix 可以塞什麼」表明寫唯讀 metadata「不搶 row click target」\n            = 點它仍該開整列,所以那兩個不進這層。\n            `data-unbounded` 掛在**這一層**:上面那條 `[&>[data-unbounded]]` 只認 ItemSuffix 的\n            **直接**子元素;包一層之後負 margin 的承接者換成本層,否則 24 高的鈕會把 compact 列撐高。\n            實測 compact / rich / upload-manager 三則的列高、suffix 高、鈕的座標與尺寸改前改後逐項相同。 */}\n        {actions && (\n          <span\n            data-unbounded=\"true\"\n            className=\"inline-flex items-center gap-2\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {actions}\n          </span>\n        )}\n      </ItemSuffix>\n    )\n\n    // content row — 消費 ItemContent primitive(封裝 label + desc + mt-gap token SSOT)。\n    // 兩 mode 共用:primitive 改 → 兩 mode 同步,不需 grep。\n    // typography:scanning mode(2026-04-23 user 指示)—— label body(14/1.3) + desc caption(12/1.3);\n    // row 本身加 `leading-compact` 配合 scanning idiom(同 MenuItem row)。\n    const contentRow = (\n      <div className=\"flex items-start gap-2\">\n        <ItemContent\n          label={name}\n          description={showDesc ? description : undefined}\n          mode=\"scanning\"\n          descriptionTone={status === 'error' ? 'error' : 'secondary'}\n        />\n        {suffix}\n      </div>\n    )\n\n    // a11y nested-interactive contract:row 含 hover-swap / trailing action buttons，故 row\n    // 本身不可設 role=button + tabIndex。Primary keyboard path 由下方 sibling native button\n    // 承接；mouse 仍由 row onClick 承接，兩者皆呼叫同一 callback。\n    const rowA11y = {}\n\n    // Compact 靜態背景(AR20):無 status(= 無進度條)→ `bg-secondary`(= neutral-3)作「檔案已上傳 /\n    // 靜態列表」視覺區隔,跟「上傳中(有 progress bar)」對照;寫在下方 compact 的 cn() 裡(`!hasStatus &&`),\n    // 跟它的滑過配對同一次呼叫(見上方「滑過底色」段)。\n    // **為什麼用 semantic 的 bg-secondary、不直接寫 neutral 第 3 階的 primitive 名**:primitive token\n    // `--color-neutral-3` 沒經 `@theme inline` 橋接,拿它當 utility 會 silent 失效;`bg-secondary` 是 semantic\n    // token 橋接的 utility(見 `tokens/color/semantic.css`@theme inline),底色同樣指向 `--color-neutral-3`。\n    // 對齊 Badge low / ProgressBar track SSOT。\n    // Primary row action 與 trailing actions 是 sibling controls，不把整列設成 role=button，\n    // 因此不會形成 nested-interactive。透明 full-row button 只接 keyboard/focus；pointer\n    // 仍由既有 row onClick 接手，保持 hit area 與 consumer callback contract 不變。\n    const keyboardPrimaryAction = onClick ? (\n      <button\n        type=\"button\"\n        aria-label={actionAriaLabel}\n        // 整列焦點框的唯一觸發者(見上方兩處 has-[[data-row-focus-target]:focus-visible])。\n        // 它自己不畫框(opacity-0),指示器畫在列上 —— focus-canonical 認可的「指示器畫在別的元素上」。\n        data-row-focus-target=\"\"\n        className=\"absolute inset-0 opacity-0 pointer-events-none\"\n        onClick={(event) => {\n          event.stopPropagation()\n          onClick()\n        }}\n      />\n    ) : null\n\n    // ── rich(含縮圖完整呈現)——AR17 canonical:surface=form 加邊框 card / surface=upload-manager 無邊框 ──\n    // Rich surface=form 是「檔案 card」風格,外框讓每個 row 視覺上是獨立 card(Slack / Notion /\n    // Linear attachment 慣例);surface=upload-manager 無邊框,avatar 作 item 邊界(面板自身是容器,\n    // 見 file-item.spec.md「邊框 / 背景」表)\n    if (isRich) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            // hover 底色瞬間切換,不做過渡(user 2026-09-10 拍板「第三題改成全部瞬間」;SSOT = tokens/motion/motion.spec.md「hover 回饋不做過渡」)\n            'group/row relative flex items-start gap-2 w-full text-body leading-compact',\n            // 2026-09-07 H1g:限定只接下面那顆隱形整列鈕(keyboardPrimaryAction)。\n            // 原本裸寫 `has-[:focus-visible]` 不分對象,trailing action 的 <Button> 被聚焦時整列也跟著畫 →\n            // 一次互動兩個焦點框,違反 focus-canonical「一個項目只有一個指示器」。當時 <Button> 自帶\n            // ring;2026-09-16 a7b2be94 起它不再自帶焦點 class、改吃全域外描邊,但限定的理由不變。\n            // 幾何(2026-09-24 user 拍板「可以照你建議內描邊」):**內描邊**。原本寫的 `ring-2 ring-ring`\n            // 是 2026-09-07 就退役的第二套機制,只因閘的舊 regex 只認裸寫的 `focus-visible:ring-2`、\n            // 不認這裡的 `has-[…:focus-visible]:` 括號變體才活到今天(該洞同日已補,見\n            // scripts/focus-geometry-invariant.mjs R2)。\n            // **理由是結構性的**:拿到焦點的是下面那顆 `opacity-0` 的隱形整列鈕,它自己畫不出框,\n            // 指示器改畫在列上 —— 這是 focus-canonical「刻意不畫的唯一合法理由是指示器畫在別的元素上,\n            // 而且必須指得出承擔者」認可的形狀,承擔者就是本行所在的這個列 div。全域外描邊只作用在\n            // 「被聚焦的那個元素」身上,套不到非焦點的列;能掛在列上的只有 focus-ring-inset 與填色專用的\n            // focus-ring-inset-emphasis,列不是主色填色 → focus-ring-inset。\n            // **不是**靠四周淨空不足,也**不是**引用 item-anatomy「選中 × 互動疊加」表那句「列撐滿容器寬度,\n            // 左右沒有 2px 可以往外長」(那格的消費者清單沒有 FileItem):表單的列有圓角、列間 4–12px;\n            // 上傳管理器的列 2026-09-25 起鋪滿面板寬、列間 0(B12)—— 兩種幾何都用內描邊,理由只有上面那條結構性的\n            // (2026-09-24 審查抓到舊句把「淨空」當理由,勿寫回)。\n            // 也**不是**因為捲動容器會裁切 —— 捲動與否明文不進判準。\n            'has-[[data-row-focus-target]:focus-visible]:focus-ring-inset',\n            // surface=form → border card(自立輪廓);surface=upload-manager → 無邊框(box 自身是容器,\n            // avatar 作 item 邊界)。2026-06-03 codify rich-borderless(原僅 spec 旁註,consumer 自己移除)。form 保留 px-3 py-3 卡片內距。\n            surface === 'upload-manager'\n              // 上傳管理器的列(2026-09-25 待辦總帳 B12,推翻 2026-06-03「左右拿掉交給容器」):可點的列滑過底色要鋪到\n              // 面板左右邊,所以左右 gutter 改由列自己帶、面板 body 給 0(判準 = overlay-surface.spec.md「誰負責左右 gutter」);\n              // 值 = 原本面板給的 loose → 縮圖與文字的 x 不變。上下各 tight/2、面板 body 上下也給 tight/2、列間 0 ——\n              // 邊緣→縮圖、縮圖→縮圖仍是 tight,滑過底色上下各留 tight/2、不貼縮圖。\n              // 不加圓角:列鋪滿面板寬,圓角碰到面板的直邊會缺角(同 MenuItem 滿版列;AI 推導)。\n              ? 'px-[var(--layout-space-loose)] py-[calc(var(--layout-space-tight)/2)]'\n              : 'px-3 py-3 border border-divider rounded-md bg-surface',\n            onClick && 'cursor-pointer',\n            // 滑過(B12,見上方「滑過底色」段):上傳列平常透明 → 換成 neutral-hover;表單卡片平常是「底」bg-surface → 疊一層\n            onClick && (surface === 'upload-manager' ? 'hover:bg-neutral-hover' : 'hover:bg-interaction-hover'),\n            className,\n          )}\n          onClick={onClick}\n          {...rowA11y}\n          {...props}\n        >\n          {keyboardPrimaryAction}\n          <Avatar src={thumbnailSrc} alt={name} size={AVATAR_SIZE} shape=\"square\" className=\"shrink-0\" />\n          {/* Rich layout invariant(2026-04-23 user 校準):\n              - content col minHeight = AVATAR_SIZE(48),確保 1-line desc 時內容 ≥ avatar 高\n              - `justify-between`(有 bar)/`justify-center`(無 bar):\n                * 1-line desc:label 頂 + progress bar 底 **自動對齊 avatar 頂/底**\n                * 無 bar:content 垂直 center 對齊 avatar 中\n              - `gap-2`:desc ↔ progress bar **至少 8px gap**(multi-line desc 時 bar 溢出仍保 8px)\n              - row `items-start`:avatar top-align 作視覺引導(tight-stack box 內 item 邊界) */}\n          <div\n            className={cn(\n              'flex flex-col flex-1 min-w-0 gap-2',\n              progressBar ? 'justify-between' : 'justify-center',\n            )}\n            style={{ minHeight: AVATAR_SIZE }}\n          >\n            {contentRow}\n            {progressBar}\n          </div>\n        </div>\n      )\n    }\n\n    // ── compact: bar absolute 底部 ──\n    // 內距單一來源(SSOT):progress bar 是 absolute 定位,其 left / right / bottom 必須跟列的內距「同源」——\n    // 左右取自 compactBarInset(與焦點框的挖空共用,見檔案上方),上下見下:\n    //   form:上下 py-2,bar 貼列底。\n    //   upload-manager(2026-09-25 待辦總帳 B12,推翻 2026-06-03 的「左右 0、交給面板」):可點的列滑過底色要鋪到面板\n    //     左右邊,所以左右改由列自己帶 loose(= 原本面板給的值,文字 x 不變)、面板 body 給 0。\n    //     上 tight/2、下 tight/2 + 0.5rem(0.5rem = 原 py-2 下緣那 8:文字↔bar 6 + bar 2),bar 離列底 tight/2;\n    //     面板 body 上下也給 tight/2、列間 0 → 邊緣→文字、bar→下一列文字、bar→邊緣仍全是 tight(與 06-03 同值),\n    //     滑過底色則上下各留 tight/2,bar 不貼底色邊。\n    const { padX: compactPadX, left: compactBarLeft, right: compactBarRight } = compactBarInset(surface)\n    const compactBarBottom = isUploadManager ? 'calc(var(--layout-space-tight) / 2)' : '0px'\n    const compactPadBlock = isUploadManager\n      ? { paddingTop: 'calc(var(--layout-space-tight) / 2)', paddingBottom: 'calc(var(--layout-space-tight) / 2 + 0.5rem)' }\n      : undefined\n    // 列底貼著進度條(form + 有 status)→ 框改畫在框圖層、進度條那段挖空;否則 undefined,框照舊畫在列上(見下方 className)\n    const ringCutout = fileItemRingCutoutStyle({ mode, surface, status })\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          // hover 底色瞬間切換,不做過渡(user 2026-09-10 拍板「第三題改成全部瞬間」;SSOT = tokens/motion/motion.spec.md「hover 回饋不做過渡」)\n          'group/row relative flex items-start gap-2 w-full text-body leading-compact',\n          // form 的列是圓角膠囊 / 圓角列;upload-manager 的列鋪滿面板寬 → 不加圓角(同 rich,AI 推導),上下內距見上方 compactPadBlock\n          !isUploadManager && 'py-2 rounded-md',\n          !hasStatus && 'bg-secondary',\n          // 2026-09-07 H1g:同 rich —— 只接隱形整列鈕,不接同樣會畫框的 trailing <Button>;\n          // 幾何同 rich 的內描邊(結構性理由見上方那段)。\n          // **列底貼著進度條時,框畫在框圖層 ::before**(2026-09-26,file-item.spec.md「焦點框 × 貼著列底的進度條」)。\n          // 進度條是 absolute,本來就畫在框的**上面**,正好落在內描邊底邊那 2px 上 —— 但它沒有「蓋住」框:\n          // 軌道 --secondary 是半透明,框的藍從軌道透出來;填色 --info 又與框 --ring 同為 blue-6,與框黏成一條\n          // (實測聚焦時填色對軌道 1.10:1,平常 4.55:1;深色 1.17 / 4.04)。框圖層在進度條那一段(兩端各多 2px 縫)\n          // 挖空,露出真正的底:聚焦時進度條與平常逐像素相同,進度條的頭尾與框之間各隔一道底色的縫。\n          // upload-manager 的 bar 離列底 tight/2、碰不到框 → ringCutout 為 undefined,框照舊畫在列上。\n          ringCutout\n            ? [FILE_ITEM_RING_LAYER_CLASS, 'has-[[data-row-focus-target]:focus-visible]:before:focus-ring-inset']\n            : 'has-[[data-row-focus-target]:focus-visible]:focus-ring-inset',\n          onClick && 'cursor-pointer',\n          // 滑過(B12,見上方「滑過底色」段):有進度條的列平常透明 → 換成 neutral-hover;\n          // 靜態小膠囊平常是 bg-secondary → 換成它自己的下一階 secondary-hover(不借透明底的配對)\n          onClick && (hasStatus ? 'hover:bg-neutral-hover' : 'hover:bg-secondary-hover'),\n          className,\n        )}\n        style={{ paddingInline: compactPadX, ...compactPadBlock, ...ringCutout }}\n        onClick={onClick}\n        {...rowA11y}\n        {...props}\n      >\n        {keyboardPrimaryAction}\n        <ItemPrefix>\n          <Paperclip size={ICON_PX} className=\"shrink-0 text-fg-muted\" aria-hidden />\n        </ItemPrefix>\n        {/* Compact 共用 contentRow(via ItemContent primitive SSOT)—— 先前 inline\n            hand-craft 導致 compact label↔desc gap 跟 rich 不同步。shared contentRow\n            保證兩 mode 修 primitive 一處全同步。 */}\n        <div className=\"flex flex-col flex-1 min-w-0\">\n          {contentRow}\n        </div>\n\n        {/* ProgressBar: absolute 底部。left / right 取自 compactBarInset(與焦點框的挖空同源),bottom 與列內距同源:\n            left = padX + icon + gap-2(0.5rem)對齊 label 首字;right = padX 收在 row 內緣;\n            bottom = form 0(貼列底,聚焦時框在這一段挖空,見上方 className)/ upload-manager tight/2(B12,見上方內距段)。 */}\n        {progressBar && (\n          <div\n            className=\"absolute\"\n            style={{ left: compactBarLeft, right: compactBarRight, bottom: compactBarBottom }}\n          >\n            {progressBar}\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nFileItem.displayName = 'FileItem'\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 fileItemMeta = {\n  component: 'FileItem',\n  family: 2,\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default'],\n  tokens: {\n    bg: ['bg-secondary', 'bg-surface'],\n    fg: ['text-fg-muted', 'text-fg-secondary'],\n    ring: ['focus-ring-inset'],\n  },\n} as const\n\nexport { FileItem }\n"],"names":[],"mappings":"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"}

package/dist/components/FileItem/index.js

@@ -1,6 +1,8 @@
-import { FileItem, fileItemMeta } from "./file-item.js";
+import { FILE_ITEM_RING_LAYER_CLASS, FileItem, fileItemMeta, fileItemRingCutoutStyle } from "./file-item.js";
 export {
+  FILE_ITEM_RING_LAYER_CLASS,
   FileItem,
-  fileItemMeta
+  fileItemMeta,
+  fileItemRingCutoutStyle
 };
 //# sourceMappingURL=index.js.map

package/dist/components/FileUpload/file-upload.d.ts

@@ -110,7 +110,7 @@ export declare const fileUploadMeta: {
     readonly tokens: {
         readonly bg: readonly ["bg-surface", "bg-disabled"];
         readonly fg: readonly [];
-        readonly ring: readonly ["ring-ring"];
+        readonly ring: readonly ["--ring"];
     };
 };
 export { FileUpload };

package/dist/components/FileUpload/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/file-upload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,oCAAoC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC3F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAA;IAC/B,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC1B,yFAAyF;IACzF,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACjC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CAC3C;AAYD,QAAA,MAAM,UAAU,wFAoQf,CAAA;AA0BD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAiBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/file-upload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAkB9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,oCAAoC;IACpC,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,QAAQ,CAAC;IAC3F,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAA;IAC/B,iDAAiD;IACjD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC1B,yFAAyF;IACzF,YAAY,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACjC,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,CAAA;CAC3C;AA6BD,QAAA,MAAM,UAAU,wFA2Wf,CAAA;AA0BD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAiBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}