@qijenchen/design-system 0.1.0-beta.51 → 0.1.0-beta.53

package/dist/components/Empty/empty.d.ts

@@ -22,6 +22,12 @@ export interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {
     description?: string;
     /** 行動按鈕(可選) */
     action?: React.ReactNode;
+    /**
+     * Disabled context(2026-06-03 加 — FileUpload disabled 等情境消費):title / description 轉
+     * `text-fg-disabled`(語意 disabled token,非 opacity)。icon glyph 也 → fg-disabled(icon 是文字一環);icon-circle bg 維持 muted。
+     * 預設 false,不影響既有 consumer。
+     */
+    disabled?: boolean;
 }
 declare const Empty: React.ForwardRefExoticComponent<EmptyProps & React.RefAttributes<HTMLDivElement>>;
 export declare const emptyMeta: {

package/dist/components/Empty/empty.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/Empty/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,+DAA+D;IAC/D,IAAI,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CAAA;IACtC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,QAAA,MAAM,KAAK,mFAsDV,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"empty.d.ts","sourceRoot":"","sources":["../../../src/components/Empty/empty.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAK9C;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE,+DAA+D;IAC/D,IAAI,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC,YAAY,CAAA;IACtC,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,eAAe;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,KAAK,mFAuDV,CAAA;AAKD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/Empty/empty.js

@@ -4,7 +4,7 @@ import { cn } from "../../lib/utils.js";
 import { Avatar } from "../Avatar/avatar.js";
 import { useRowSize } from "../../patterns/element-anatomy/item-anatomy.js";
 const Empty = React.forwardRef(
-  ({ icon, title, description, action, className, ...props }, ref) => {
+  ({ icon, title, description, action, disabled = false, className, ...props }, ref) => {
     const rowSize = useRowSize("md");
     const descFont = rowSize === "lg" ? "text-body-lg" : "text-body";
     let iconElement = null;
@@ -13,7 +13,7 @@ const Empty = React.forwardRef(
         iconElement = icon;
       } else {
         const Icon = icon;
-        iconElement = /* @__PURE__ */ jsx(Avatar, { icon: Icon, size: 48, color: "neutral" });
+        iconElement = /* @__PURE__ */ jsx(Avatar, { icon: Icon, size: 48, color: "neutral", className: disabled ? "[&_svg]:!text-fg-disabled" : void 0 });
       }
     }
     return /* @__PURE__ */ jsxs(
@@ -24,7 +24,7 @@ const Empty = React.forwardRef(
         ...props,
         children: [
           iconElement && /* @__PURE__ */ jsx("div", { className: "mb-4", children: iconElement }),
-          title && /* @__PURE__ */ jsx("span", { className: "text-body-lg font-medium text-foreground", children: title }),
+          title && /* @__PURE__ */ jsx("span", { className: cn("text-body-lg font-medium", disabled ? "text-fg-disabled" : "text-foreground"), children: title }),
           description && /* @__PURE__ */ jsx(
             "span",
             {
@@ -32,7 +32,7 @@ const Empty = React.forwardRef(
                 // 字體跟 RowSizeContext 對齊:sm/md = text-body (14px),lg = text-body-lg (16px)
                 // 在 menu 內自動對齊 menu items;standalone 時 fallback text-body
                 descFont,
-                title || action ? "text-fg-secondary" : "text-fg-muted",
+                disabled ? "text-fg-disabled" : title || action ? "text-fg-secondary" : "text-fg-muted",
                 // Empty title 永遠 body-lg(16)→ 用 reading-lg token(label tier 決定)
                 title && "mt-[var(--item-gap-label-desc-reading-lg)]"
               ),

package/dist/components/Empty/empty.js.map

@@ -1 +1 @@
-{"version":3,"file":"empty.js","sources":["../../../src/components/Empty/empty.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { useRowSize } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * Empty — 空狀態視覺元件\n *\n * 居中垂直堆疊:icon(Avatar) → title → description → action。\n * 所有 slot 皆可選,預設只需 description。\n *\n * 間距固定,不隨 density 變（Empty 是展示性元件,不是工作區域元件）:\n *   icon → text = mb-4（16px）\n *   desc → action = mt-6（24px）\n *   title → desc = `var(--item-gap-label-desc)`（token,預設 2px,item-anatomy SSOT）\n *\n * Outer padding 由 consumer 容器決定(py-12 / py-6 / py-16 等）。\n */\n\nexport interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** LucideIcon → 自動包 Avatar 48px neutral;ReactElement → 原樣渲染 */\n  icon?: LucideIcon | React.ReactElement\n  /** 標題(可選,font-medium,適用於首次引導) */\n  title?: string\n  /** 說明文字 */\n  description?: string\n  /** 行動按鈕(可選) */\n  action?: React.ReactNode\n}\n\nconst Empty = React.forwardRef<HTMLDivElement, EmptyProps>(\n  ({ icon, title, description, action, className, ...props }, ref) => {\n    // 字體 tier:讀 RowSizeContext(menu 內自動對齊 menu items 的字體）\n    // 沒有 context(standalone）→ fallback 'md' → text-body (14px)\n    const rowSize = useRowSize('md')\n    const descFont = rowSize === 'lg' ? 'text-body-lg' : 'text-body'\n\n    // Icon rendering: ReactElement → as-is;LucideIcon(component,包括 forwardRef 物件)→ 包 Avatar\n    // 注意:Lucide v0.577+ icons 是 forwardRef 物件(`typeof === 'object'`),不是 function。\n    // 必用 React.isValidElement 判斷 element vs component(typeof 會把 forwardRef 物件誤歸 object)。\n    let iconElement: React.ReactNode = null\n    if (icon) {\n      if (React.isValidElement(icon)) {\n        iconElement = icon\n      } else {\n        const Icon = icon as LucideIcon\n        iconElement = <Avatar icon={Icon} size={48} color=\"neutral\" />\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col items-center text-center', className)}\n        {...props}\n      >\n        {iconElement && (\n          <div className=\"mb-4\">{iconElement}</div>\n        )}\n        {title && (\n          <span className=\"text-body-lg font-medium text-foreground\">\n            {title}\n          </span>\n        )}\n        {description && (\n          <span\n            className={cn(\n              // 字體跟 RowSizeContext 對齊:sm/md = text-body (14px),lg = text-body-lg (16px)\n              // 在 menu 內自動對齊 menu items;standalone 時 fallback text-body\n              descFont,\n              (title || action) ? 'text-fg-secondary' : 'text-fg-muted',\n              // Empty title 永遠 body-lg(16)→ 用 reading-lg token(label tier 決定)\n              title && 'mt-[var(--item-gap-label-desc-reading-lg)]',\n            )}\n          >\n            {description}\n          </span>\n        )}\n        {action && (\n          <div className=\"mt-6\">{action}</div>\n        )}\n      </div>\n    )\n  },\n)\nEmpty.displayName = 'Empty'\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 emptyMeta = {\n  component: 'Empty',\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: [],\n  },\n} as const\n\nexport { Empty }\n"],"names":[],"mappings":";;;;;AA+BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,MAAM,OAAO,aAAa,QAAQ,WAAW,GAAG,MAAA,GAAS,QAAQ;AAGlE,UAAM,UAAU,WAAW,IAAI;AAC/B,UAAM,WAAW,YAAY,OAAO,iBAAiB;AAKrD,QAAI,cAA+B;AACnC,QAAI,MAAM;AACR,UAAI,MAAM,eAAe,IAAI,GAAG;AAC9B,sBAAc;AAAA,MAChB,OAAO;AACL,cAAM,OAAO;AACb,0CAAe,QAAA,EAAO,MAAM,MAAM,MAAM,IAAI,OAAM,WAAU;AAAA,MAC9D;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,QAChE,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,eACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,aAAY;AAAA,UAEpC,SACC,oBAAC,QAAA,EAAK,WAAU,4CACb,UAAA,OACH;AAAA,UAED,eACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA;AAAA;AAAA,gBAGT;AAAA,gBACC,SAAS,SAAU,sBAAsB;AAAA;AAAA,gBAE1C,SAAS;AAAA,cAAA;AAAA,cAGV,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,UACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAItC;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,iBAAiB,qBAAqB,iBAAiB;AAAA,IAC5D,MAAM,CAAA;AAAA,EAAC;AAEX;"}
+{"version":3,"file":"empty.js","sources":["../../../src/components/Empty/empty.tsx"],"sourcesContent":["import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { useRowSize } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * Empty — 空狀態視覺元件\n *\n * 居中垂直堆疊:icon(Avatar) → title → description → action。\n * 所有 slot 皆可選,預設只需 description。\n *\n * 間距固定,不隨 density 變（Empty 是展示性元件,不是工作區域元件）:\n *   icon → text = mb-4（16px）\n *   desc → action = mt-6（24px）\n *   title → desc = `var(--item-gap-label-desc)`（token,預設 2px,item-anatomy SSOT）\n *\n * Outer padding 由 consumer 容器決定(py-12 / py-6 / py-16 等）。\n */\n\nexport interface EmptyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** LucideIcon → 自動包 Avatar 48px neutral;ReactElement → 原樣渲染 */\n  icon?: LucideIcon | React.ReactElement\n  /** 標題(可選,font-medium,適用於首次引導) */\n  title?: string\n  /** 說明文字 */\n  description?: string\n  /** 行動按鈕(可選) */\n  action?: React.ReactNode\n  /**\n   * Disabled context(2026-06-03 加 — FileUpload disabled 等情境消費):title / description 轉\n   * `text-fg-disabled`(語意 disabled token,非 opacity)。icon glyph 也 → fg-disabled(icon 是文字一環);icon-circle bg 維持 muted。\n   * 預設 false,不影響既有 consumer。\n   */\n  disabled?: boolean\n}\n\nconst Empty = React.forwardRef<HTMLDivElement, EmptyProps>(\n  ({ icon, title, description, action, disabled = false, className, ...props }, ref) => {\n    // 字體 tier:讀 RowSizeContext(menu 內自動對齊 menu items 的字體）\n    // 沒有 context(standalone）→ fallback 'md' → text-body (14px)\n    const rowSize = useRowSize('md')\n    const descFont = rowSize === 'lg' ? 'text-body-lg' : 'text-body'\n\n    // Icon rendering: ReactElement → as-is;LucideIcon(component,包括 forwardRef 物件)→ 包 Avatar\n    // 注意:Lucide v0.577+ icons 是 forwardRef 物件(`typeof === 'object'`),不是 function。\n    // 必用 React.isValidElement 判斷 element vs component(typeof 會把 forwardRef 物件誤歸 object)。\n    let iconElement: React.ReactNode = null\n    if (icon) {\n      if (React.isValidElement(icon)) {\n        iconElement = icon\n      } else {\n        const Icon = icon as LucideIcon\n        // disabled:glyph → fg-disabled([&_svg]:!… 蓋過 Avatar 內聯 color;circle bg 維持 muted)。icon 是文字一環,隨 disabled 變淡。\n        iconElement = <Avatar icon={Icon} size={48} color=\"neutral\" className={disabled ? '[&_svg]:!text-fg-disabled' : undefined} />\n      }\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn('flex flex-col items-center text-center', className)}\n        {...props}\n      >\n        {iconElement && (\n          <div className=\"mb-4\">{iconElement}</div>\n        )}\n        {title && (\n          <span className={cn('text-body-lg font-medium', disabled ? 'text-fg-disabled' : 'text-foreground')}>\n            {title}\n          </span>\n        )}\n        {description && (\n          <span\n            className={cn(\n              // 字體跟 RowSizeContext 對齊:sm/md = text-body (14px),lg = text-body-lg (16px)\n              // 在 menu 內自動對齊 menu items;standalone 時 fallback text-body\n              descFont,\n              disabled ? 'text-fg-disabled' : (title || action) ? 'text-fg-secondary' : 'text-fg-muted',\n              // Empty title 永遠 body-lg(16)→ 用 reading-lg token(label tier 決定)\n              title && 'mt-[var(--item-gap-label-desc-reading-lg)]',\n            )}\n          >\n            {description}\n          </span>\n        )}\n        {action && (\n          <div className=\"mt-6\">{action}</div>\n        )}\n      </div>\n    )\n  },\n)\nEmpty.displayName = 'Empty'\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 emptyMeta = {\n  component: 'Empty',\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: [],\n  },\n} as const\n\nexport { Empty }\n"],"names":[],"mappings":";;;;;AAqCA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,MAAM,OAAO,aAAa,QAAQ,WAAW,OAAO,WAAW,GAAG,MAAA,GAAS,QAAQ;AAGpF,UAAM,UAAU,WAAW,IAAI;AAC/B,UAAM,WAAW,YAAY,OAAO,iBAAiB;AAKrD,QAAI,cAA+B;AACnC,QAAI,MAAM;AACR,UAAI,MAAM,eAAe,IAAI,GAAG;AAC9B,sBAAc;AAAA,MAChB,OAAO;AACL,cAAM,OAAO;AAEb,sBAAc,oBAAC,QAAA,EAAO,MAAM,MAAM,MAAM,IAAI,OAAM,WAAU,WAAW,WAAW,8BAA8B,OAAA,CAAW;AAAA,MAC7H;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,QAChE,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,eACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,aAAY;AAAA,UAEpC,SACC,oBAAC,QAAA,EAAK,WAAW,GAAG,4BAA4B,WAAW,qBAAqB,iBAAiB,GAC9F,UAAA,MAAA,CACH;AAAA,UAED,eACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW;AAAA;AAAA;AAAA,gBAGT;AAAA,gBACA,WAAW,qBAAsB,SAAS,SAAU,sBAAsB;AAAA;AAAA,gBAE1E,SAAS;AAAA,cAAA;AAAA,cAGV,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGJ,UACC,oBAAC,OAAA,EAAI,WAAU,QAAQ,UAAA,OAAA,CAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAItC;AACF;AACA,MAAM,cAAc;AAIb,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAC,iBAAiB,qBAAqB,iBAAiB;AAAA,IAC5D,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

@@ -7,6 +7,16 @@ export interface FileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>
      * - `rich`：縮圖 + 檔名 + size + status + progress 的完整 card 呈現
      */
     mode?: 'compact' | 'rich';
+    /**
+     * 清單所在的 surface context（2026-06-03 codify rich-borderless）：
+     * - `form`（預設）：rich = border card（自立輪廓，Slack/Notion/Linear attachment 慣例）
+     * - `upload-manager`：rich = **無邊框**（Google Drive/Dropbox 上傳管理面板 —— 面板自身已是容器，
+     *   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）。
+     */
+    surface?: 'form' | 'upload-manager';
     status?: 'uploading' | 'completed' | 'error';
     progress?: number;
     /** rich mode: 檔案大小、狀態訊息。compact: 只有 error 才顯示。 ReactNode 支援 inline clickable link(如「View log」)。 */

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,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;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAGD,QAAA,MAAM,QAAQ,sFA+Nb,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;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;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAGD,QAAA,MAAM,QAAQ,sFA6Ob,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

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

@@ -21,6 +21,7 @@ const FileItem = React.forwardRef(
   ({
     name,
     mode = "compact",
+    surface = "form",
     status,
     progress = 0,
     description,
@@ -132,8 +133,12 @@ const FileItem = React.forwardRef(
         {
           ref,
           className: cn(
-            "group/row flex items-start gap-2 px-3 py-3 w-full text-body leading-compact transition-colors",
-            "border border-divider rounded-md bg-surface",
+            "group/row flex items-start gap-2 w-full text-body leading-compact transition-colors",
+            // 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,
             className
           ),
@@ -160,23 +165,32 @@ const FileItem = React.forwardRef(
         }
       );
     }
+    const compactPadX = surface === "upload-manager" ? 0 : 12;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         className: cn(
-          "group/row relative flex items-start gap-2 px-3 py-2 w-full text-body leading-compact transition-colors rounded-md",
+          "group/row relative flex items-start gap-2 py-2 w-full text-body leading-compact transition-colors rounded-md",
           compactStaticBg,
           hoverClass,
           className
         ),
+        style: { paddingInline: compactPadX },
         onClick,
         ...rowA11y,
         ...props,
         children: [
           /* @__PURE__ */ jsx(ItemPrefix, { children: /* @__PURE__ */ jsx(Paperclip, { size: ICON_PX, className: "shrink-0 text-fg-muted", "aria-hidden": true }) }),
           /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-w-0", children: contentRow }),
-          progressBar && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 right-3", style: { left: `calc(0.75rem + ${ICON_PX}px + 0.5rem)` }, children: progressBar })
+          progressBar && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute bottom-0",
+              style: { left: `calc(${compactPadX}px + ${ICON_PX}px + 0.5rem)`, right: compactPadX },
+              children: progressBar
+            }
+          )
         ]
       }
     );

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 } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * FileItem — 檔案顯示 / 上傳進度\n *\n * Typography: 閱讀模式 — text-body (14px) 預設行高 (1.5)\n *\n * 兩種 mode（精簡 vs 完整內容呈現）:\n *\n * compact（★ default）: Paperclip 16px 在左。右側 content + bar。\n *   py = gap = 4px (gap-1)，對稱。\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 → hover:bg-neutral-hover + cursor-pointer。\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  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  /**\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      status,\n      progress = 0,\n      description,\n      thumbnailSrc,\n      actions,\n      onClick,\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 = border card / compact Type B = bg-secondary /\n    // compact Type A = 底部 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    // height override:compact mode 用 2px(極密集 row layout),rich mode 用預設 4px。\n    // 這是 ProgressBar `height` prop 的唯一合法 consumer(見 progress-bar.tsx docblock)。\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        height={isRich ? undefined : 2}\n        aria-label={`${name} 上傳進度`}\n      />\n    ) : null\n\n    // suffix 對齊 label 第一行(item-anatomy「24px 閾值對齊規則」小 suffix canonical):\n    // icons 16 ≤ 24 屬小 suffix,統一 `h-[1lh]` inline,不因 desc wrap 改公式。\n    // 兩 mode 同公式,跟 item-anatomy 一致。\n    const suffixAlign = 'h-[1lh]'\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: '下載' } :\n      status === 'error' && onRetry        ? { icon: RotateCw, onClick: onRetry,    label: '重試' } :\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',\n            statusConfig.color,\n            hoverAction && 'group-hover/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 transition-opacity\"\n          />\n        )}\n      </span>\n    ) : null\n\n    const suffix = (\n      <div\n        className={cn(\n          'flex items-center gap-2 shrink-0',\n          suffixAlign,\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      </div>\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(2026-04-25 nested-interactive fix):FileItem row 含 inner interactive\n    // (hover-swap action button / ProgressBar / Avatar hoverCard trigger)。原本\n    // role='button' + tabIndex=0 整列可鍵盤點,與 inner buttons 構成 nested-interactive\n    // (axe serious)。移除 row 層 button semantic → mouse 仍可點(onClick 保留),\n    // 鍵盤 user 直接 tab 到 inner primary action。Trade-off:失去「整列 Enter 開啟」\n    // 但滿足 WCAG;世界級對照:Slack message row / Notion page row 同模式 — row 只\n    // mouse 點,inner 有 explicit 按鈕負責鍵盤。\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\n    // ── rich(含縮圖完整呈現)——AR17 canonical:加邊框 + gap-2 ──\n    // Rich mode 是「檔案 card」風格,外框讓每個 row 視覺上是獨立 card\n    // (Slack / Notion / Linear attachment 慣例)\n    if (isRich) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'group/row flex items-start gap-2 px-3 py-3 w-full text-body leading-compact transition-colors',\n            'border border-divider rounded-md bg-surface',\n            hoverClass,\n            className,\n          )}\n          onClick={onClick}\n          {...rowA11y}\n          {...props}\n        >\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    return (\n      <div\n        ref={ref}\n        className={cn(\n          'group/row relative flex items-start gap-2 px-3 py-2 w-full text-body leading-compact transition-colors rounded-md',\n          compactStaticBg,\n          hoverClass,\n          className,\n        )}\n        onClick={onClick}\n        {...rowA11y}\n        {...props}\n      >\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 對齊 label(跳過 icon + gap) */}\n        {progressBar && (\n          <div className=\"absolute bottom-0 right-3\" style={{ left: `calc(0.75rem + ${ICON_PX}px + 0.5rem)` }}>\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', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', '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 } 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  /**\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      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 = border card / 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    // height override:compact mode 用 2px(極密集 row layout),rich mode 用預設 4px。\n    // 這是 ProgressBar `height` prop 的唯一合法 consumer(見 progress-bar.tsx docblock)。\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        height={isRich ? undefined : 2}\n        aria-label={`${name} 上傳進度`}\n      />\n    ) : null\n\n    // suffix 對齊 label 第一行(item-anatomy「24px 閾值對齊規則」小 suffix canonical):\n    // icons 16 ≤ 24 屬小 suffix,統一 `h-[1lh]` inline,不因 desc wrap 改公式。\n    // 兩 mode 同公式,跟 item-anatomy 一致。\n    const suffixAlign = 'h-[1lh]'\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: '下載' } :\n      status === 'error' && onRetry        ? { icon: RotateCw, onClick: onRetry,    label: '重試' } :\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',\n            statusConfig.color,\n            hoverAction && 'group-hover/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 transition-opacity\"\n          />\n        )}\n      </span>\n    ) : null\n\n    const suffix = (\n      <div\n        className={cn(\n          'flex items-center gap-2 shrink-0',\n          suffixAlign,\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      </div>\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(2026-04-25 nested-interactive fix):FileItem row 含 inner interactive\n    // (hover-swap action button / ProgressBar / Avatar hoverCard trigger)。原本\n    // role='button' + tabIndex=0 整列可鍵盤點,與 inner buttons 構成 nested-interactive\n    // (axe serious)。移除 row 層 button semantic → mouse 仍可點(onClick 保留),\n    // 鍵盤 user 直接 tab 到 inner primary action。Trade-off:失去「整列 Enter 開啟」\n    // 但滿足 WCAG;世界級對照:Slack message row / Notion page row 同模式 — row 只\n    // mouse 點,inner 有 explicit 按鈕負責鍵盤。\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\n    // ── rich(含縮圖完整呈現)——AR17 canonical:加邊框 + gap-2 ──\n    // Rich mode 是「檔案 card」風格,外框讓每個 row 視覺上是獨立 card\n    // (Slack / Notion / Linear attachment 慣例)\n    if (isRich) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'group/row flex items-start gap-2 w-full text-body leading-compact transition-colors',\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          <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          'group/row relative flex items-start gap-2 py-2 w-full text-body leading-compact transition-colors rounded-md',\n          compactStaticBg,\n          hoverClass,\n          className,\n        )}\n        style={{ paddingInline: compactPadX }}\n        onClick={onClick}\n        {...rowA11y}\n        {...props}\n      >\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', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', '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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"}

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

@@ -6,11 +6,14 @@ import * as React from 'react';
  * 與本 DS 既有 FileItem(顯示已上傳檔案)配對 — 這裡 own「上傳觸發 + 拖放偵測」,
  * 上傳後的檔案清單顯示交給 consumer 用 FileItem 渲染。
  *
- * ── 4 狀態 ──
- * idle     (default) — border-dashed border-divider  bg-surface
- * drag-over         — border-dashed border-primary  bg-primary-subtle
- * loading           — 上傳中(async)顯示 CircularProgress,阻擋新互動
- * disabled          — opacity-disabled pointer-events-none
+ * ── 4 狀態(2026-06-03 修正)──
+ * idle     (default) — border-dashed border-border  bg-surface
+ * hover = drag-over  — border-primary(統一,純 border-driven,底維持 surface)
+ * loading            — CircularProgress;cursor-progress(無 pointer-events-none)
+ * disabled           — bg-disabled + 文字 fg-disabled(語意 token,非 opacity)+ cursor-not-allowed
+ *
+ * ── variant ──
+ * dropzone(預設)大拖放區 + drag;button 緊湊 Button 觸發(form-friendly,click-only)
  *
  * ── children 插槽 ──
  * 預設渲染 `<Empty icon={Upload} title description />` — 重用 Empty 元件 own
@@ -48,12 +51,21 @@ export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     accept?: string;
     maxSize?: number;
     disabled?: boolean;
+    /**
+     * 觸發外觀(2026-06-03 加,M21 prop-variant + Ant `Upload`(button)/`Upload.Dragger`(dropzone)先例):
+     * - `dropzone`(預設):大拖放區 + 點擊,支援 drag-and-drop。
+     * - `button`:緊湊 Button 觸發(form-friendly,省空間),click-only(無拖放區)。
+     * 兩者共用 onUpload / onReject / files 清單渲染;都可放進 Field control slot。
+     */
+    variant?: 'dropzone' | 'button';
+    /** `variant="button"` 的按鈕文字(預設「Choose file」)。 */
+    buttonLabel?: string;
     /**
      * Loading 狀態(async 上傳 / 伺服器處理中)。
-     * - 顯示 CircularProgress 取代預設 Empty 內容
-     * - 阻擋新點擊 / drag 事件(避免 double-submit)
+     * - 2026-06-03 **deferred**:其唯一用途(無清單單檔 / 頭像替換)場景尚未定義,故已從 3-state showcase
+     *   移除、不作為當前 feature 呈現;prop 保留供未來該場景。有清單的上傳進度走 FileItem 自身 progress bar(status=uploading）。
+     * - 顯示 CircularProgress 取代預設 Empty 內容;`cursor-progress`;互動由 handleClick/handlers 的 isBlocked guard 擋
      * - 宣告 `aria-busy="true"` 讓 screen reader 感知處理中
-     * - Consumer 負責在上傳完成後自己切回 `loading={false}`
      */
     loading?: boolean;
     /** Loading 狀態的文字標題(預設「上傳中…」) */
@@ -88,7 +100,7 @@ export declare const fileUploadMeta: {
     readonly sizes: {};
     readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
     readonly tokens: {
-        readonly bg: readonly ["bg-neutral-hover", "bg-primary-subtle", "bg-surface"];
+        readonly bg: readonly ["bg-surface", "bg-disabled"];
         readonly fg: readonly [];
         readonly ring: readonly ["ring-ring"];
     };

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;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;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;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gCAAgC;IAChC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,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;AAGD,QAAA,MAAM,UAAU,wFA4Lf,CAAA;AA0BD,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,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;AAQ9B;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;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,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,iCAAiC;IACjC,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;AAGD,QAAA,MAAM,UAAU,wFAiOf,CAAA;AA0BD,eAAO,MAAM,cAAc;;;;;;;;;;;CAejB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/FileUpload/file-upload.js

@@ -14,6 +14,9 @@ const FileUpload = React.forwardRef(
     accept,
     maxSize,
     disabled = false,
+    variant = "dropzone",
+    buttonLabel = "Choose file",
+    // i18n-allow: DS default; consumer override via buttonLabel prop
     loading = false,
     loadingTitle = "上傳中…",
     // i18n-allow: DS default; consumer override via loadingTitle prop
@@ -55,7 +58,7 @@ const FileUpload = React.forwardRef(
     };
     const handleClick = (e) => {
       var _a;
-      if (!disabled) (_a = inputRef.current) == null ? void 0 : _a.click();
+      if (!disabled && !loading) (_a = inputRef.current) == null ? void 0 : _a.click();
       onClick == null ? void 0 : onClick(e);
     };
     const state = disabled ? "disabled" : loading ? "loading" : isDragOver ? "drag-over" : "idle";
@@ -65,9 +68,11 @@ const FileUpload = React.forwardRef(
       "ul",
       {
         className: cn(
-          // stack vertically with consistent gap;bg-surface 在容器外的 chrome / consumer bg 之上
-          "flex flex-col gap-2 w-full",
-          "mt-3"
+          "flex flex-col w-full",
+          // 2026-06-03 gap SSOT:列間 gap + control→list gap(mt)由「item 有無邊框」單一規則決定,
+          // 同值貫穿整個垂直堆疊 — rich(form surface = border card)→ 8px;compact(borderless/bg-pill)→ 4px。
+          // 消費 FileItem「List wrapper canonical」(file-item.spec.md),取代原硬寫 gap-2 / mt-3(不分 mode)。
+          fileListMode === "rich" ? "gap-2 mt-2" : "gap-1 mt-1"
         ),
         "aria-label": "Uploaded files",
         children: files.map((f) => /* @__PURE__ */ jsx("li", { className: "list-none", children: /* @__PURE__ */ jsx(
@@ -104,7 +109,38 @@ const FileUpload = React.forwardRef(
       }
     ) : null;
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", hasFiles && "flex flex-col"), children: [
-      /* @__PURE__ */ jsxs(
+      variant === "button" ? (
+        // ── button variant:緊湊觸發(form-friendly,省空間),click-only(無拖放區)──
+        /* @__PURE__ */ jsxs("div", { className, ...props, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "hidden",
+              multiple,
+              accept,
+              disabled,
+              onChange: (e) => filterAndDispatch(e.target.files)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary",
+              startIcon: Upload,
+              loading,
+              disabled,
+              "aria-busy": loading || void 0,
+              onClick: () => {
+                var _a;
+                if (!disabled && !loading) (_a = inputRef.current) == null ? void 0 : _a.click();
+              },
+              children: buttonLabel
+            }
+          )
+        ] })
+      ) : /* @__PURE__ */ jsxs(
         "div",
         {
           role: "button",
@@ -149,14 +185,17 @@ const FileUpload = React.forwardRef(
             "rounded-md border-2 border-dashed p-[var(--layout-space-loose)]",
             "cursor-pointer transition-colors",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            // idle
-            "border-divider bg-surface hover:bg-neutral-hover",
-            // drag-over
-            "data-[state=drag-over]:border-primary data-[state=drag-over]:bg-primary-subtle data-[state=drag-over]:hover:bg-primary-subtle",
-            // loading(阻擋新互動但不 opacity-disabled — 避免跟 disabled 視覺撞,保持「處理中」語意)
-            "data-[state=loading]:cursor-progress data-[state=loading]:pointer-events-none",
-            // disabled
-            "data-[state=disabled]:opacity-disabled data-[state=disabled]:pointer-events-none data-[state=disabled]:cursor-not-allowed",
+            // idle:--border(元件邊框,非 --divider 分隔線 — 2026-06-03 Q2 token 修正)+ surface 底
+            "border-border bg-surface",
+            // hover = drag-over 統一(2026-06-03 Q2-A 純 border-driven,對齊 Ant Dragger colorPrimaryHover):
+            // 兩者都 → primary 邊框,底色維持 surface(不變 bg)。state 信號靠邊框,非底色。
+            "hover:border-primary data-[state=drag-over]:border-primary",
+            // loading(2026-06-03 Q4:移除 pointer-events-none — 它會讓 cursor-progress 失效;
+            // 互動已由 handleClick + drag/key handlers 的 isBlocked guard 擋,不需 pointer-events-none)
+            "data-[state=loading]:cursor-progress",
+            // disabled(2026-06-03 Q3:語意 token 非 opacity — dashed outline surface 走 DS outline-disabled 慣例;
+            // bg→disabled,border 不變色,文字/icon 由 Empty disabled 控;cursor-not-allowed 現在生效)
+            "data-[state=disabled]:bg-disabled data-[state=disabled]:cursor-not-allowed",
             className
           ),
           ...props,
@@ -184,7 +223,8 @@ const FileUpload = React.forwardRef(
               {
                 icon: Upload,
                 title,
-                description
+                description,
+                disabled
               }
             )
           ]
@@ -219,7 +259,7 @@ const fileUploadMeta = {
   sizes: {},
   states: ["default", "hover", "active", "focus-visible", "disabled"],
   tokens: {
-    bg: ["bg-neutral-hover", "bg-primary-subtle", "bg-surface"],
+    bg: ["bg-surface", "bg-disabled"],
     fg: [],
     ring: ["ring-ring"]
   }

package/dist/components/FileUpload/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sources":["../../../src/components/FileUpload/file-upload.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 { Upload as UploadIcon, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Empty } from '@/design-system/components/Empty/empty'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport { FileItem } from '@/design-system/components/FileItem/file-item'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * FileUpload — 拖放 / 點擊上傳區塊\n *\n * 世界級對照:Ant Design `Upload.Dragger`、Polaris `DropZone`、Material community MUI-File-Input。\n * 與本 DS 既有 FileItem(顯示已上傳檔案)配對 — 這裡 own「上傳觸發 + 拖放偵測」,\n * 上傳後的檔案清單顯示交給 consumer 用 FileItem 渲染。\n *\n * ── 4 狀態 ──\n * idle     (default) — border-dashed border-divider  bg-surface\n * drag-over         — border-dashed border-primary  bg-primary-subtle\n * loading           — 上傳中(async)顯示 CircularProgress,阻擋新互動\n * disabled          — opacity-disabled pointer-events-none\n *\n * ── children 插槽 ──\n * 預設渲染 `<Empty icon={Upload} title description />` — 重用 Empty 元件 own\n * 的「icon + title + description 垂直居中」SSOT 避免視覺漂移。Empty 改字體 /\n * gap / icon 尺寸時 FileUpload 自動跟進。若 consumer 傳 children 則整個覆寫。\n *\n * ── API ──\n * onUpload: 使用者選取或拖放檔案時觸發,回傳 File[](至少 1 個)。\n * multiple: 允許多檔。預設 false(單檔)。\n * accept:   MIME filter(例 \"image/*,.pdf\"),傳給 <input type=file>。\n * maxSize:  單檔最大 bytes;超過靜默忽略(consumer 若需要錯誤提示,走 onReject)。\n * onReject: 被 maxSize / accept 擋下的檔案(提供錯誤訊息顯示機會)。\n */\n\n/**\n * Uploaded / uploading file status item(for `files` prop)。\n * Consumer 持 state(progress / status),FileUpload 只負責渲染。\n */\nexport interface FileUploadStatus {\n  id: string\n  name: string\n  /** bytes */\n  size?: number\n  /** Upload 進度(0-100)— uploading 時顯示 progress bar */\n  progress?: number\n  status?: 'uploading' | 'completed' | 'error'\n  /** Error 訊息 / size 等 description */\n  description?: React.ReactNode\n  /** Thumbnail URL for rich mode */\n  thumbnailSrc?: string\n}\n\nexport interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrop'> {\n  onUpload?: (files: File[]) => void\n  onReject?: (files: File[], reason: 'size' | 'type') => void\n  multiple?: boolean\n  accept?: string\n  maxSize?: number\n  disabled?: boolean\n  /**\n   * Loading 狀態(async 上傳 / 伺服器處理中)。\n   * - 顯示 CircularProgress 取代預設 Empty 內容\n   * - 阻擋新點擊 / drag 事件(避免 double-submit)\n   * - 宣告 `aria-busy=\"true\"` 讓 screen reader 感知處理中\n   * - Consumer 負責在上傳完成後自己切回 `loading={false}`\n   */\n  loading?: boolean\n  /** Loading 狀態的文字標題(預設「上傳中…」) */\n  loadingTitle?: string\n  /** 標題文字(預設「Click or drag file here to upload」) */\n  title?: string\n  /** 說明文字(預設「Support for a single or bulk upload」) */\n  description?: string\n  /** 若傳入 children,覆寫預設 Empty 結構 */\n  children?: React.ReactNode\n  /**\n   * Uploaded / uploading 檔案清單。傳入 → FileUpload 在 drop zone 下方渲染列表。\n   * 不傳 → 不顯示(consumer 可自行用 FileItem 組成,pre-2026-04-24 行為)。\n   * 每項由 FileItem 渲染,status 狀態對應視覺:\n   *   - `uploading`:linear ProgressBar(via FileItem;rich mode 另顯示 {progress}%)\n   *   - `completed`:綠色 ✓(success 狀態視覺確認)\n   *   - `error`:紅色 ✗(+ description 顯示錯誤訊息)\n   */\n  files?: FileUploadStatus[]\n  /** File list 每項顯示模式。Default: 'compact'(單行);'rich' = 含 thumbnail / size / progress bar */\n  fileListMode?: 'compact' | 'rich'\n  /** File list 移除 callback。有值 → 每項右側顯示 X dismiss button;無 → 不可移除(view-only) */\n  onRemove?: (id: string) => void\n  /** File list dismiss button ARIA label template。預設 `移除 {name}`。For i18n. */\n  removeAriaLabel?: (name: string) => string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      onUpload,\n      onReject,\n      multiple = false,\n      accept,\n      maxSize,\n      disabled = false,\n      loading = false,\n      loadingTitle = '上傳中…', // i18n-allow: DS default; consumer override via loadingTitle prop\n      title = 'Click or drag file here to upload', // i18n-allow: DS default; consumer override via title prop\n      description = multiple ? 'Support for a single or bulk upload' : 'Support for a single file upload', // i18n-allow: DS default; consumer override via description prop\n      children,\n      files,\n      fileListMode = 'compact',\n      onRemove,\n      removeAriaLabel = (name: string) => `移除 ${name}`, // i18n-allow: DS default; consumer override via removeAriaLabel prop\n      className,\n      onClick,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragOver, setDragOver] = React.useState(false)\n\n    const filterAndDispatch = (files: FileList | null) => {\n      if (!files || files.length === 0) return\n      const accepted: File[] = []\n      const rejectedBySize: File[] = []\n      const rejectedByType: File[] = []\n\n      Array.from(files).forEach((f) => {\n        if (maxSize != null && f.size > maxSize) {\n          rejectedBySize.push(f)\n          return\n        }\n        if (accept && !matchAccept(f, accept)) {\n          rejectedByType.push(f)\n          return\n        }\n        accepted.push(f)\n      })\n\n      if (rejectedBySize.length) onReject?.(rejectedBySize, 'size')\n      if (rejectedByType.length) onReject?.(rejectedByType, 'type')\n      if (accepted.length) onUpload?.(multiple ? accepted : accepted.slice(0, 1))\n    }\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!disabled) inputRef.current?.click()\n      onClick?.(e)\n    }\n\n    // State 優先序:disabled > loading > drag-over > idle(disabled 最硬,loading 次之)\n    const state = disabled ? 'disabled' : loading ? 'loading' : isDragOver ? 'drag-over' : 'idle'\n    const isBlocked = disabled || loading\n\n    const hasFiles = Array.isArray(files) && files.length > 0\n\n    const fileListNode = hasFiles ? (\n      <ul\n        className={cn(\n          // stack vertically with consistent gap;bg-surface 在容器外的 chrome / consumer bg 之上\n          'flex flex-col gap-2 w-full',\n          'mt-3',\n        )}\n        aria-label=\"Uploaded files\"\n      >\n        {files!.map((f) => (\n          <li key={f.id} className=\"list-none\">\n            <FileItem\n              mode={fileListMode}\n              name={f.name}\n              status={f.status}\n              progress={f.progress}\n              description={f.description ?? (f.size != null ? formatBytes(f.size) : undefined)}\n              thumbnailSrc={f.thumbnailSrc}\n              actions={\n                onRemove ? (\n                  // Collection remove(per-file)— 不是 dismiss surface,故不套 `dismiss` prop。\n                  // 視覺與 dismiss 一致(text variant + fg-muted dim)— 對齊 inline-action.spec.md\n                  // 「Dismiss canonical — X close only」(section L204);L229 明文:onRemove callback 不觸發 dismiss prop。\n                  <Button\n                    iconOnly\n                    variant=\"text\"\n                    size=\"xs\"\n                    startIcon={X}\n                    aria-label={removeAriaLabel(f.name)}\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      onRemove(f.id)\n                    }}\n                    className=\"text-fg-muted hover:text-foreground\"\n                  />\n                ) : undefined\n              }\n            />\n          </li>\n        ))}\n      </ul>\n    ) : null\n\n    return (\n      <div ref={ref} className={cn('w-full', hasFiles && 'flex flex-col')}>\n      <div\n        role=\"button\"\n        tabIndex={isBlocked ? -1 : 0}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        data-state={state}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (isBlocked) return\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            inputRef.current?.click()\n          }\n        }}\n        onDragEnter={(e) => {\n          if (isBlocked) return\n          e.preventDefault()\n          setDragOver(true)\n        }}\n        onDragLeave={(e) => {\n          if (isBlocked) return\n          e.preventDefault()\n          setDragOver(false)\n        }}\n        onDragOver={(e) => {\n          if (isBlocked) return\n          e.preventDefault()\n        }}\n        onDrop={(e) => {\n          if (isBlocked) return\n          e.preventDefault()\n          setDragOver(false)\n          filterAndDispatch(e.dataTransfer.files)\n        }}\n        className={cn(\n          // 寬度 w-full 填滿 consumer 容器(user 明示「寬度填滿」);高度由 padding + 內容物決定(不固定 h)\n          'flex flex-col items-center justify-center gap-2 text-center w-full',\n          // 對稱 padding p-[var(--layout-space-loose)]:四邊等距,density-aware(md=16px / lg=24px),對齊 DS chrome padding canonical。\n          // 不再硬寫 px-6 py-10(不對稱+非 token)。內容物(icon + title + description)垂直堆疊由 gap-2 控制\n          'rounded-md border-2 border-dashed p-[var(--layout-space-loose)]',\n          'cursor-pointer transition-colors',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n          // idle\n          'border-divider bg-surface hover:bg-neutral-hover',\n          // drag-over\n          'data-[state=drag-over]:border-primary data-[state=drag-over]:bg-primary-subtle data-[state=drag-over]:hover:bg-primary-subtle',\n          // loading(阻擋新互動但不 opacity-disabled — 避免跟 disabled 視覺撞,保持「處理中」語意)\n          'data-[state=loading]:cursor-progress data-[state=loading]:pointer-events-none',\n          // disabled\n          'data-[state=disabled]:opacity-disabled data-[state=disabled]:pointer-events-none data-[state=disabled]:cursor-not-allowed',\n          className,\n        )}\n        {...props}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          className=\"hidden\"\n          multiple={multiple}\n          accept={accept}\n          disabled={disabled}\n          onChange={(e) => filterAndDispatch(e.target.files)}\n        />\n        {loading ? (\n          <Empty\n            icon={<CircularProgress size={48} />}\n            title={loadingTitle}\n          />\n        ) : (\n          children ?? (\n            <Empty\n              icon={UploadIcon}\n              title={title}\n              description={description}\n            />\n          )\n        )}\n      </div>\n      {fileListNode}\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\n// ── helper: bytes formatter ───────────────────────────────────────────────\nfunction formatBytes(n: number): string {\n  if (n < 1024) return `${n} B`\n  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`\n  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`\n  return `${(n / (1024 * 1024 * 1024)).toFixed(1)} GB`\n}\n\n// ── helpers ─────────────────────────────────────────────────────────────────\n\nfunction matchAccept(file: File, accept: string): boolean {\n  const patterns = accept.split(',').map((s) => s.trim().toLowerCase())\n  const fileName = file.name.toLowerCase()\n  const fileType = file.type.toLowerCase()\n  return patterns.some((p) => {\n    if (p.startsWith('.')) return fileName.endsWith(p) // 副檔名 e.g. \".pdf\"\n    if (p.endsWith('/*')) return fileType.startsWith(p.slice(0, -1)) // e.g. \"image/*\"\n    return fileType === p // 完整 MIME\n  })\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const fileUploadMeta = {\n  component: 'FileUpload',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-neutral-hover', 'bg-primary-subtle', 'bg-surface'],\n    fg: [],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { FileUpload }\n"],"names":["files","UploadIcon"],"mappings":"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"}
+{"version":3,"file":"file-upload.js","sources":["../../../src/components/FileUpload/file-upload.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 { Upload as UploadIcon, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Empty } from '@/design-system/components/Empty/empty'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport { FileItem } from '@/design-system/components/FileItem/file-item'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * FileUpload — 拖放 / 點擊上傳區塊\n *\n * 世界級對照:Ant Design `Upload.Dragger`、Polaris `DropZone`、Material community MUI-File-Input。\n * 與本 DS 既有 FileItem(顯示已上傳檔案)配對 — 這裡 own「上傳觸發 + 拖放偵測」,\n * 上傳後的檔案清單顯示交給 consumer 用 FileItem 渲染。\n *\n * ── 4 狀態(2026-06-03 修正)──\n * idle     (default) — border-dashed border-border  bg-surface\n * hover = drag-over  — border-primary(統一,純 border-driven,底維持 surface)\n * loading            — CircularProgress;cursor-progress(無 pointer-events-none)\n * disabled           — bg-disabled + 文字 fg-disabled(語意 token,非 opacity)+ cursor-not-allowed\n *\n * ── variant ──\n * dropzone(預設)大拖放區 + drag;button 緊湊 Button 觸發(form-friendly,click-only)\n *\n * ── children 插槽 ──\n * 預設渲染 `<Empty icon={Upload} title description />` — 重用 Empty 元件 own\n * 的「icon + title + description 垂直居中」SSOT 避免視覺漂移。Empty 改字體 /\n * gap / icon 尺寸時 FileUpload 自動跟進。若 consumer 傳 children 則整個覆寫。\n *\n * ── API ──\n * onUpload: 使用者選取或拖放檔案時觸發,回傳 File[](至少 1 個)。\n * multiple: 允許多檔。預設 false(單檔)。\n * accept:   MIME filter(例 \"image/*,.pdf\"),傳給 <input type=file>。\n * maxSize:  單檔最大 bytes;超過靜默忽略(consumer 若需要錯誤提示,走 onReject)。\n * onReject: 被 maxSize / accept 擋下的檔案(提供錯誤訊息顯示機會)。\n */\n\n/**\n * Uploaded / uploading file status item(for `files` prop)。\n * Consumer 持 state(progress / status),FileUpload 只負責渲染。\n */\nexport interface FileUploadStatus {\n  id: string\n  name: string\n  /** bytes */\n  size?: number\n  /** Upload 進度(0-100)— uploading 時顯示 progress bar */\n  progress?: number\n  status?: 'uploading' | 'completed' | 'error'\n  /** Error 訊息 / size 等 description */\n  description?: React.ReactNode\n  /** Thumbnail URL for rich mode */\n  thumbnailSrc?: string\n}\n\nexport interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onDrop'> {\n  onUpload?: (files: File[]) => void\n  onReject?: (files: File[], reason: 'size' | 'type') => void\n  multiple?: boolean\n  accept?: string\n  maxSize?: number\n  disabled?: boolean\n  /**\n   * 觸發外觀(2026-06-03 加,M21 prop-variant + Ant `Upload`(button)/`Upload.Dragger`(dropzone)先例):\n   * - `dropzone`(預設):大拖放區 + 點擊,支援 drag-and-drop。\n   * - `button`:緊湊 Button 觸發(form-friendly,省空間),click-only(無拖放區)。\n   * 兩者共用 onUpload / onReject / files 清單渲染;都可放進 Field control slot。\n   */\n  variant?: 'dropzone' | 'button'\n  /** `variant=\"button\"` 的按鈕文字(預設「Choose file」)。 */\n  buttonLabel?: string\n  /**\n   * Loading 狀態(async 上傳 / 伺服器處理中)。\n   * - 2026-06-03 **deferred**:其唯一用途(無清單單檔 / 頭像替換)場景尚未定義,故已從 3-state showcase\n   *   移除、不作為當前 feature 呈現;prop 保留供未來該場景。有清單的上傳進度走 FileItem 自身 progress bar(status=uploading）。\n   * - 顯示 CircularProgress 取代預設 Empty 內容;`cursor-progress`;互動由 handleClick/handlers 的 isBlocked guard 擋\n   * - 宣告 `aria-busy=\"true\"` 讓 screen reader 感知處理中\n   */\n  loading?: boolean\n  /** Loading 狀態的文字標題(預設「上傳中…」) */\n  loadingTitle?: string\n  /** 標題文字(預設「Click or drag file here to upload」) */\n  title?: string\n  /** 說明文字(預設「Support for a single or bulk upload」) */\n  description?: string\n  /** 若傳入 children,覆寫預設 Empty 結構 */\n  children?: React.ReactNode\n  /**\n   * Uploaded / uploading 檔案清單。傳入 → FileUpload 在 drop zone 下方渲染列表。\n   * 不傳 → 不顯示(consumer 可自行用 FileItem 組成,pre-2026-04-24 行為)。\n   * 每項由 FileItem 渲染,status 狀態對應視覺:\n   *   - `uploading`:linear ProgressBar(via FileItem;rich mode 另顯示 {progress}%)\n   *   - `completed`:綠色 ✓(success 狀態視覺確認)\n   *   - `error`:紅色 ✗(+ description 顯示錯誤訊息)\n   */\n  files?: FileUploadStatus[]\n  /** File list 每項顯示模式。Default: 'compact'(單行);'rich' = 含 thumbnail / size / progress bar */\n  fileListMode?: 'compact' | 'rich'\n  /** File list 移除 callback。有值 → 每項右側顯示 X dismiss button;無 → 不可移除(view-only) */\n  onRemove?: (id: string) => void\n  /** File list dismiss button ARIA label template。預設 `移除 {name}`。For i18n. */\n  removeAriaLabel?: (name: string) => string\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      onUpload,\n      onReject,\n      multiple = false,\n      accept,\n      maxSize,\n      disabled = false,\n      variant = 'dropzone',\n      buttonLabel = 'Choose file', // i18n-allow: DS default; consumer override via buttonLabel prop\n      loading = false,\n      loadingTitle = '上傳中…', // i18n-allow: DS default; consumer override via loadingTitle prop\n      title = 'Click or drag file here to upload', // i18n-allow: DS default; consumer override via title prop\n      description = multiple ? 'Support for a single or bulk upload' : 'Support for a single file upload', // i18n-allow: DS default; consumer override via description prop\n      children,\n      files,\n      fileListMode = 'compact',\n      onRemove,\n      removeAriaLabel = (name: string) => `移除 ${name}`, // i18n-allow: DS default; consumer override via removeAriaLabel prop\n      className,\n      onClick,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragOver, setDragOver] = React.useState(false)\n\n    const filterAndDispatch = (files: FileList | null) => {\n      if (!files || files.length === 0) return\n      const accepted: File[] = []\n      const rejectedBySize: File[] = []\n      const rejectedByType: File[] = []\n\n      Array.from(files).forEach((f) => {\n        if (maxSize != null && f.size > maxSize) {\n          rejectedBySize.push(f)\n          return\n        }\n        if (accept && !matchAccept(f, accept)) {\n          rejectedByType.push(f)\n          return\n        }\n        accepted.push(f)\n      })\n\n      if (rejectedBySize.length) onReject?.(rejectedBySize, 'size')\n      if (rejectedByType.length) onReject?.(rejectedByType, 'type')\n      if (accepted.length) onUpload?.(multiple ? accepted : accepted.slice(0, 1))\n    }\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      // 2026-06-03 Q4:guard `!disabled && !loading`(= !isBlocked)。loading 時也擋點擊防 double-submit\n      // (原只 guard !disabled,靠 pointer-events-none 擋 loading;移除 pointer-events-none 後改這裡 guard)。\n      if (!disabled && !loading) inputRef.current?.click()\n      onClick?.(e)\n    }\n\n    // State 優先序:disabled > loading > drag-over > idle(disabled 最硬,loading 次之)\n    const state = disabled ? 'disabled' : loading ? 'loading' : isDragOver ? 'drag-over' : 'idle'\n    const isBlocked = disabled || loading\n\n    const hasFiles = Array.isArray(files) && files.length > 0\n\n    const fileListNode = hasFiles ? (\n      <ul\n        className={cn(\n          'flex flex-col w-full',\n          // 2026-06-03 gap SSOT:列間 gap + control→list gap(mt)由「item 有無邊框」單一規則決定,\n          // 同值貫穿整個垂直堆疊 — rich(form surface = border card)→ 8px;compact(borderless/bg-pill)→ 4px。\n          // 消費 FileItem「List wrapper canonical」(file-item.spec.md),取代原硬寫 gap-2 / mt-3(不分 mode)。\n          fileListMode === 'rich' ? 'gap-2 mt-2' : 'gap-1 mt-1',\n        )}\n        aria-label=\"Uploaded files\"\n      >\n        {files!.map((f) => (\n          <li key={f.id} className=\"list-none\">\n            <FileItem\n              mode={fileListMode}\n              name={f.name}\n              status={f.status}\n              progress={f.progress}\n              description={f.description ?? (f.size != null ? formatBytes(f.size) : undefined)}\n              thumbnailSrc={f.thumbnailSrc}\n              actions={\n                onRemove ? (\n                  // Collection remove(per-file)— 不是 dismiss surface,故不套 `dismiss` prop。\n                  // 視覺與 dismiss 一致(text variant + fg-muted dim)— 對齊 inline-action.spec.md\n                  // 「Dismiss canonical — X close only」(section L204);L229 明文:onRemove callback 不觸發 dismiss prop。\n                  <Button\n                    iconOnly\n                    variant=\"text\"\n                    size=\"xs\"\n                    startIcon={X}\n                    aria-label={removeAriaLabel(f.name)}\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      onRemove(f.id)\n                    }}\n                    className=\"text-fg-muted hover:text-foreground\"\n                  />\n                ) : undefined\n              }\n            />\n          </li>\n        ))}\n      </ul>\n    ) : null\n\n    return (\n      <div ref={ref} className={cn('w-full', hasFiles && 'flex flex-col')}>\n      {variant === 'button' ? (\n        // ── button variant:緊湊觸發(form-friendly,省空間),click-only(無拖放區)──\n        <div className={className} {...props}>\n          <input\n            ref={inputRef}\n            type=\"file\"\n            className=\"hidden\"\n            multiple={multiple}\n            accept={accept}\n            disabled={disabled}\n            onChange={(e) => filterAndDispatch(e.target.files)}\n          />\n          <Button\n            variant=\"tertiary\"\n            startIcon={UploadIcon}\n            loading={loading}\n            disabled={disabled}\n            aria-busy={loading || undefined}\n            onClick={() => {\n              if (!disabled && !loading) inputRef.current?.click()\n            }}\n          >\n            {buttonLabel}\n          </Button>\n        </div>\n      ) : (\n      <div\n        role=\"button\"\n        tabIndex={isBlocked ? -1 : 0}\n        aria-disabled={disabled || undefined}\n        aria-busy={loading || undefined}\n        data-state={state}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (isBlocked) return\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            inputRef.current?.click()\n          }\n        }}\n        onDragEnter={(e) => {\n          if (isBlocked) return\n          e.preventDefault()\n          setDragOver(true)\n        }}\n        onDragLeave={(e) => {\n          if (isBlocked) return\n          e.preventDefault()\n          setDragOver(false)\n        }}\n        onDragOver={(e) => {\n          if (isBlocked) return\n          e.preventDefault()\n        }}\n        onDrop={(e) => {\n          if (isBlocked) return\n          e.preventDefault()\n          setDragOver(false)\n          filterAndDispatch(e.dataTransfer.files)\n        }}\n        className={cn(\n          // 寬度 w-full 填滿 consumer 容器(user 明示「寬度填滿」);高度由 padding + 內容物決定(不固定 h)\n          'flex flex-col items-center justify-center gap-2 text-center w-full',\n          // 對稱 padding p-[var(--layout-space-loose)]:四邊等距,density-aware(md=16px / lg=24px),對齊 DS chrome padding canonical。\n          // 不再硬寫 px-6 py-10(不對稱+非 token)。內容物(icon + title + description)垂直堆疊由 gap-2 控制\n          'rounded-md border-2 border-dashed p-[var(--layout-space-loose)]',\n          'cursor-pointer transition-colors',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n          // idle:--border(元件邊框,非 --divider 分隔線 — 2026-06-03 Q2 token 修正)+ surface 底\n          'border-border bg-surface',\n          // hover = drag-over 統一(2026-06-03 Q2-A 純 border-driven,對齊 Ant Dragger colorPrimaryHover):\n          // 兩者都 → primary 邊框,底色維持 surface(不變 bg)。state 信號靠邊框,非底色。\n          'hover:border-primary data-[state=drag-over]:border-primary',\n          // loading(2026-06-03 Q4:移除 pointer-events-none — 它會讓 cursor-progress 失效;\n          // 互動已由 handleClick + drag/key handlers 的 isBlocked guard 擋,不需 pointer-events-none)\n          'data-[state=loading]:cursor-progress',\n          // disabled(2026-06-03 Q3:語意 token 非 opacity — dashed outline surface 走 DS outline-disabled 慣例;\n          // bg→disabled,border 不變色,文字/icon 由 Empty disabled 控;cursor-not-allowed 現在生效)\n          'data-[state=disabled]:bg-disabled data-[state=disabled]:cursor-not-allowed',\n          className,\n        )}\n        {...props}\n      >\n        <input\n          ref={inputRef}\n          type=\"file\"\n          className=\"hidden\"\n          multiple={multiple}\n          accept={accept}\n          disabled={disabled}\n          onChange={(e) => filterAndDispatch(e.target.files)}\n        />\n        {loading ? (\n          <Empty\n            icon={<CircularProgress size={48} />}\n            title={loadingTitle}\n          />\n        ) : (\n          children ?? (\n            <Empty\n              icon={UploadIcon}\n              title={title}\n              description={description}\n              disabled={disabled}\n            />\n          )\n        )}\n      </div>\n      )}\n      {fileListNode}\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\n// ── helper: bytes formatter ───────────────────────────────────────────────\nfunction formatBytes(n: number): string {\n  if (n < 1024) return `${n} B`\n  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`\n  if (n < 1024 * 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(1)} MB`\n  return `${(n / (1024 * 1024 * 1024)).toFixed(1)} GB`\n}\n\n// ── helpers ─────────────────────────────────────────────────────────────────\n\nfunction matchAccept(file: File, accept: string): boolean {\n  const patterns = accept.split(',').map((s) => s.trim().toLowerCase())\n  const fileName = file.name.toLowerCase()\n  const fileType = file.type.toLowerCase()\n  return patterns.some((p) => {\n    if (p.startsWith('.')) return fileName.endsWith(p) // 副檔名 e.g. \".pdf\"\n    if (p.endsWith('/*')) return fileType.startsWith(p.slice(0, -1)) // e.g. \"image/*\"\n    return fileType === p // 完整 MIME\n  })\n}\n\n// Story auto-compile metadata — Phase 1 mechanical migration(2026-04-24)\n// Phase 2 fill needed: purpose descriptions + when rationale + world-class refs\nexport const fileUploadMeta = {\n  component: 'FileUpload',\n  family: null, // non-family composite / overlay / layout\n  variants: {\n\n  },\n  sizes: {\n\n  },\n  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface', 'bg-disabled'],\n    fg: [],\n    ring: ['ring-ring'],\n  },\n} as const\n\nexport { FileUpload }\n"],"names":["files","UploadIcon"],"mappings":"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"}

package/ds-canonical/hooks/check_consumer_ds_primitive_misuse.sh

@@ -39,6 +39,11 @@ if echo "$FILE" | grep -qE 'packages/design-system/src/|node_modules/'; then exi
 CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // ""' 2>/dev/null)
 [ -z "$CONTENT" ] && exit 0
 
+# 2026-06-03 修(同 R8 bug class):換行→空格 flatten。真實 JSX 屬性跨行(<DS.X\n  size={N}\n/>),
+# grep 逐行 + 各 pattern 用 [^>]+ 跨屬性匹配 → 不 flatten 的話多行 component 靜默繞過全部 anti-pattern 檢查
+# (= BLOCKER false-negative,consumer DS misuse 沒被擋)。[^>]+ 自帶 tag 邊界(遇 > 停),flatten 後不會跨 component。
+CONTENT=$(echo "$CONTENT" | tr '\n' ' ')
+
 # Global escape — file-wide allowlist
 if echo "$CONTENT" | grep -q '@ds-misuse-allow:'; then exit 0; fi
 
@@ -51,7 +56,7 @@ fi
 
 # Pattern 2: <RadioGroupItem> NOT wrapped in <SelectionItem control={...}>
 # Approximation: file uses RadioGroupItem but doesn't reference SelectionItem
-if echo "$CONTENT" | grep -qE '<DS\.RadioGroupItem\b' && ! echo "$CONTENT" | grep -qE 'SelectionItem|RadioGroupItem.*label='; then
+if echo "$CONTENT" | grep -qE '<DS\.RadioGroupItem\b' && ! echo "$CONTENT" | grep -qE 'SelectionItem|<DS\.RadioGroupItem[^>]+label='; then
   VIOLATIONS="${VIOLATIONS}  - <RadioGroupItem> 沒 wrap <SelectionItem control={<RadioGroupItem>}> (per selection-item.spec.md:23 SSOT spacing/padding)\n"
 fi
 

package/ds-canonical/hooks/check_consumer_no_ds_catalog.sh

@@ -40,8 +40,11 @@ if echo "$FILE" | grep -qE 'packages/design-system/src/'; then exit 0; fi
 CONTENT=$(echo "$INPUT" | jq -r '.tool_input.new_string // .tool_input.content // ""' 2>/dev/null)
 [ -z "$CONTENT" ] && exit 0
 
-# Escape clause
+# Escape clause — 2026-06-03 修(同 R8 fragment-vs-file bug class):Edit 只送 new_string 片段,
+# 但 @consumer-catalog-allow marker 在檔頭(不在每次 edit 的片段裡)→ 編輯有 marker 的 portal 檔
+# 任一非 marker 行就被誤擋。本 hook 是 PostToolUse(檔已落 disk)→ 補查整檔 marker。
 if echo "$CONTENT" | grep -q '@consumer-catalog-allow:'; then exit 0; fi
+if [ -f "$FILE" ] && grep -q '@consumer-catalog-allow:' "$FILE" 2>/dev/null; then exit 0; fi
 
 VIOLATIONS=""
 

package/ds-canonical/hooks/check_field_family_invariants.sh

@@ -68,7 +68,7 @@ case "$FILE_PATH" in
       *)
         if ! echo "$MERGED_CONTENT" | grep -q '@naked-row-mode-allow' \
            && echo "$MERGED_CONTENT" | grep -E "variant:\s*['\"]naked['\"]|variant=\{?['\"]naked['\"]" >/dev/null \
-           && echo "$MERGED_CONTENT" | grep -E "(inline-flex|flex)[^\"'\`]*items-center" >/dev/null \
+           && echo "$MERGED_CONTENT" | tr '\n' ' ' | grep -E "(inline-flex|flex)[^\"'\`]*items-center" >/dev/null \
            && ! echo "$MERGED_CONTENT" | grep -q "nakedCellRowModeAlign"; then
           cat >&2 <<EOF
 
@@ -184,7 +184,7 @@ if ! echo "$NEW_CONTENT" | grep -q '@disabled-color-allow'; then
      && ! echo "$NEW_CONTENT" | grep -E "(disabled:placeholder:text-fg-disabled|group-data-\[field-mode=disabled\].*placeholder:text-fg-disabled|resolvedMode\s*===\s*'disabled'.*text-fg-disabled)" >/dev/null; then
     SUSPECT_DP="$SUSPECT_DP [placeholder:text-fg-muted 無 disabled override]"
   fi
-  if echo "$NEW_CONTENT" | grep -E '<span[^>]*"text-fg-muted"[^>]*>\s*\{[^}]*placeholder' >/dev/null 2>&1 \
+  if echo "$NEW_CONTENT" | tr '\n' ' ' | grep -E '<span[^>]*"text-fg-muted"[^>]*>[[:space:]]*\{[^}]*placeholder' >/dev/null 2>&1 \
      && ! echo "$NEW_CONTENT" | grep -E "resolvedMode\s*===\s*'disabled'" >/dev/null; then
     SUSPECT_DP="$SUSPECT_DP [<span text-fg-muted>{placeholder} 不分 mode]"
   fi