@qijenchen/design-system 0.1.0-beta.13 → 0.1.0-beta.131

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, 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        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            'group/row relative flex items-start gap-2 w-full text-body leading-compact transition-colors',\n            'has-[:focus-visible]:ring-2 has-[: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          'group/row relative flex items-start gap-2 py-2 w-full text-body leading-compact transition-colors rounded-md',\n          compactStaticBg,\n          'has-[:focus-visible]:ring-2 has-[: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":";;;;;;;;AA8BA,MAAM,cAAc;AAAA,EAClB,WAAW,EAAE,MAAM,aAAa,OAAO,eAAA;AAAA,EACvC,OAAO,EAAE,MAAM,SAAS,OAAO,aAAA;AACjC;AAIA,MAAM,sBAAsB;AAAA,EAC1B,WAAW;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AACT;AAEA,MAAM,cAAc;AACpB,MAAM,UAAU;AA4ChB,MAAM,WAAW,MAAM;AAAA,EACrB,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,kBAAkB,MAAM,IAAI;AAAA,IAC5B;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,SAAS,SAAS;AACxB,UAAM,YAAY,CAAC,CAAC;AACpB,UAAM,eAAe,UAAU,WAAW,cAAc,YAAY,MAAM,IAAI;AAC9E,UAAM,gBAAgB,WAAW,cAAc,MAAM;AAGrD,UAAM,WAAW,SAAS,CAAC,CAAC,cAAe,WAAW,WAAW,CAAC,CAAC;AASnE,UAAM,aAAa,UAAU,mBAAmB;AAMhD,UAAM,cAAc,YAClB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP,QAAQ,oBAAoB,MAAO;AAAA,QACnC,WAAW,SAAS,SAAY;AAAA,QAChC,cAAY,GAAG,IAAI;AAAA,MAAA;AAAA,IAAA,IAEnB;AAUJ,UAAM,SAAS;AAEf,UAAM,cACJ,WAAW,eAAe,aAAa,EAAE,MAAM,UAAU,SAAS,YAAY,OAAO,MAAM,IAAI,OAC/F,WAAW,WAAW,UAAiB,EAAE,MAAM,UAAU,SAAS,SAAY,OAAO,MAAM,IAAI,GAAA,IAC/F;AAEF,UAAM,aAAa,eACjB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,kBAAe;AAAA,QACf,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAA;AAAA,QAGhC,UAAA;AAAA,UAAA;AAAA,YAAC,aAAa;AAAA,YAAb;AAAA,cACC,MAAM;AAAA,cACN,WAAW;AAAA,gBACT;AAAA,gBACA,aAAa;AAAA;AAAA,gBAEb,eAAe;AAAA,cAAA;AAAA,cAEjB,eAAW;AAAA,YAAA;AAAA,UAAA;AAAA,UAGZ,eACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAQ;AAAA,cACR,WAAW,YAAY;AAAA,cACvB,cAAY,YAAY;AAAA,cACxB,SAAS,CAAC,MAAM;AAAE,kBAAE,gBAAA;AAAmB,4BAAY,QAAA;AAAA,cAAU;AAAA,cAC7D,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,IAAA,IAGF;AAOJ,UAAM,SACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQT;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,WAAW,eAAe,UACzB,qBAAC,QAAA,EAAK,WAAU,kCAAkC,UAAA;AAAA,YAAA;AAAA,YAAS;AAAA,UAAA,GAAC;AAAA,UAE7D;AAAA,UACA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAQL,UAAM,aACJ,qBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,aAAa,WAAW,cAAc;AAAA,UACtC,MAAK;AAAA,UACL,iBAAiB,WAAW,UAAU,UAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAEjD;AAAA,IAAA,GACH;AAMF,UAAM,UAAU,CAAA;AAShB,UAAM,kBAAkB,CAAC,cAAc,iBAAiB;AAIxD,UAAM,wBAAwB,UAC5B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,WAAU;AAAA,QACV,SAAS,CAAC,UAAU;AAClB,gBAAM,gBAAA;AACN,kBAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,IAEA;AAMJ,QAAI,QAAQ;AACV,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAW;AAAA,YACT;AAAA,YACA;AAAA;AAAA;AAAA;AAAA;AAAA,YAKA,YAAY,mBAAmB,eAAe;AAAA,YAC9C;AAAA,YACA;AAAA,UAAA;AAAA,UAEF;AAAA,UACC,GAAG;AAAA,UACH,GAAG;AAAA,UAEH,UAAA;AAAA,YAAA;AAAA,YACD,oBAAC,QAAA,EAAO,KAAK,cAAc,KAAK,MAAM,MAAM,aAAa,OAAM,UAAS,WAAU,WAAA,CAAW;AAAA,YAQ7F;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAW;AAAA,kBACT;AAAA,kBACA,cAAc,oBAAoB;AAAA,gBAAA;AAAA,gBAEpC,OAAO,EAAE,WAAW,YAAA;AAAA,gBAEnB,UAAA;AAAA,kBAAA;AAAA,kBACA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAGN;AAMA,UAAM,cAAc,YAAY,mBAAmB,IAAI;AACvD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,QAEF,OAAO,EAAE,eAAe,YAAA;AAAA,QACxB;AAAA,QACC,GAAG;AAAA,QACH,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA;AAAA,UACD,oBAAC,YAAA,EACC,UAAA,oBAAC,WAAA,EAAU,MAAM,SAAS,WAAU,0BAAyB,eAAW,KAAA,CAAC,EAAA,CAC3E;AAAA,UAIA,oBAAC,OAAA,EAAI,WAAU,gCACZ,UAAA,YACH;AAAA,UAIC,eACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,OAAO,EAAE,MAAM,QAAQ,WAAW,QAAQ,OAAO,gBAAgB,OAAO,YAAA;AAAA,cAEvE,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACA,SAAS,cAAc;AAIhB,MAAM,eAAe;AAAA,EAC1B,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,IACN,IAAI,CAAC,gBAAgB,YAAY;AAAA,IACjC,IAAI,CAAC,iBAAiB,mBAAmB;AAAA,IACzC,MAAM,CAAA;AAAA,EAAC;AAEX;"}

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

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

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

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

package/dist/components/FileItem/index.js

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

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

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

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

@@ -3,19 +3,23 @@ import * as React from 'react';
  * FileUpload — 拖放 / 點擊上傳區塊
  *
  * 世界級對照:Ant Design `Upload.Dragger`、Polaris `DropZone`、Material community MUI-File-Input。
- * 與本 DS 既有 FileItem(顯示已上傳檔案)配對 — 這裡 own「上傳觸發 + 拖放偵測」,
- * 上傳後的檔案清單顯示交給 consumer 用 FileItem 渲染。
+ * 與本 DS 既有 FileItem(顯示已上傳檔案)配對 — 這裡 own「上傳觸發 + 拖放偵測」；
+ * 上傳後可由 `files` 走內建 FileItem 清單，也可由 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-hover(統一,純 border-driven,底維持 surface;2026-07-06 對齊 Ant colorPrimaryHover)
+ * loading            — CircularProgress;cursor-progress(無 pointer-events-none)
+ * disabled           — bg-disabled + 文字 fg-disabled(語意 token,非 opacity)+ cursor-not-allowed
  *
- * ── children 插槽 ──
+ * ── variant ──
+ * dropzone(預設)大拖放區 + drag;button 緊湊 Button 觸發(form-friendly,click-only)
+ *
+ * ── dropzone children 插槽 ──
  * 預設渲染 `<Empty icon={Upload} title description />` — 重用 Empty 元件 own
  * 的「icon + title + description 垂直居中」SSOT 避免視覺漂移。Empty 改字體 /
  * gap / icon 尺寸時 FileUpload 自動跟進。若 consumer 傳 children 則整個覆寫。
+ * button variant 只顯示以 `buttonLabel` 命名的原生 DS Button，忽略此展示插槽。
  *
  * ── API ──
  * onUpload: 使用者選取或拖放檔案時觸發,回傳 File[](至少 1 個)。
@@ -48,27 +52,36 @@ 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 狀態的文字標題(預設「上傳中…」) */
     loadingTitle?: string;
-    /** 標題文字(預設「Click or drag file here to upload」) */
+    /** dropzone 標題文字(預設「Click or drag file here to upload」；button variant 忽略) */
     title?: string;
-    /** 說明文字(預設「Support for a single or bulk upload」) */
+    /** dropzone 說明文字(預設依 multiple 切換；button variant 忽略) */
     description?: string;
-    /** 若傳入 children,覆寫預設 Empty 結構 */
+    /** dropzone:若傳入 children,覆寫預設 Empty 結構；button variant 忽略 */
     children?: React.ReactNode;
     /**
      * Uploaded / uploading 檔案清單。傳入 → FileUpload 在 drop zone 下方渲染列表。
      * 不傳 → 不顯示(consumer 可自行用 FileItem 組成,pre-2026-04-24 行為)。
-     * 每項有 status 狀態會對應 icon:
-     *   - `uploading`:CircularProgress(+ progress bar 若 progress 給)
+     * 每項由 FileItem 渲染,status 狀態對應視覺:
+     *   - `uploading`:linear ProgressBar(via FileItem;rich mode 另顯示 {progress}%)
      *   - `completed`:綠色 ✓(success 狀態視覺確認)
      *   - `error`:紅色 ✗(+ description 顯示錯誤訊息)
      */
@@ -84,11 +97,18 @@ declare const FileUpload: React.ForwardRefExoticComponent<FileUploadProps & Reac
 export declare const fileUploadMeta: {
     readonly component: "FileUpload";
     readonly family: null;
-    readonly variants: {};
+    readonly variants: {
+        readonly dropzone: {
+            readonly purpose: "大型 dashed 拖放區(預設)— 拖放有價值 + 主要上傳區(drag + click)";
+        };
+        readonly button: {
+            readonly purpose: "緊湊 Button 觸發 — form 內單欄 / 空間省(click-only)";
+        };
+    };
     readonly sizes: {};
-    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly states: readonly ["default", "hover", "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;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,wFAmQf,CAAA;AA0BD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAiBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}

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

@@ -6,6 +6,15 @@ import { Empty } from "../Empty/empty.js";
 import { CircularProgress } from "../CircularProgress/circular-progress.js";
 import { FileItem } from "../FileItem/file-item.js";
 import { Button } from "../Button/button.js";
+function focusAfterFileRemoval(current) {
+  var _a, _b;
+  const list = current.closest("ul");
+  const buttons = list ? Array.from(list.querySelectorAll("[data-collection-remove]")) : [];
+  const index = buttons.indexOf(current);
+  const next = buttons[index + 1] ?? buttons[index - 1];
+  const owner = (_a = list == null ? void 0 : list.parentElement) == null ? void 0 : _a.querySelector("[data-file-upload-owner]");
+  (_b = next ?? owner) == null ? void 0 : _b.focus();
+}
 const FileUpload = React.forwardRef(
   ({
     onUpload,
@@ -14,6 +23,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
@@ -33,6 +45,7 @@ const FileUpload = React.forwardRef(
   }, ref) => {
     const inputRef = React.useRef(null);
     const [isDragOver, setDragOver] = React.useState(false);
+    const dragDepth = React.useRef(0);
     const filterAndDispatch = (files2) => {
       if (!files2 || files2.length === 0) return;
       const accepted = [];
@@ -55,7 +68,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,11 +78,13 @@ 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",
+        "aria-label": "已上傳的檔案",
         children: files.map((f) => /* @__PURE__ */ jsx("li", { className: "list-none", children: /* @__PURE__ */ jsx(
           FileItem,
           {
@@ -82,7 +97,7 @@ const FileUpload = React.forwardRef(
             actions: onRemove ? (
               // Collection remove(per-file)— 不是 dismiss surface,故不套 `dismiss` prop。
               // 視覺與 dismiss 一致(text variant + fg-muted dim)— 對齊 inline-action.spec.md
-              // 「Dismiss canonical — X close only」L249-251:onRemove callback 不觸發 dismiss prop。
+              // 「Dismiss canonical — X close only」+「dismiss prop 觸發條件」段:onRemove callback 不觸發 dismiss prop。
               /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -91,11 +106,13 @@ const FileUpload = React.forwardRef(
                   size: "xs",
                   startIcon: X,
                   "aria-label": removeAriaLabel(f.name),
+                  "data-collection-remove": true,
                   onClick: (e) => {
                     e.stopPropagation();
+                    focusAfterFileRemoval(e.currentTarget);
                     onRemove(f.id);
                   },
-                  className: "text-fg-muted hover:text-foreground"
+                  className: "text-fg-muted hover:text-fg-secondary"
                 }
               )
             ) : void 0
@@ -104,9 +121,49 @@ 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(無拖放區)──
+        // consumer onClick 在此 wrapper div 承載(type = MouseEvent<HTMLDivElement>,對齊 FileUploadProps
+        // extends HTMLAttributes<HTMLDivElement>)。Button 觸發開檔會冒泡至此 → 同時觸發 consumer handler。
+        // 2026-07-17 修:onClick 於 L128 destructure 後未再 compose,button variant 靜默丟失公開 DOM prop
+        // (dropzone variant 經 handleClick 的 onClick?.(e) 正確 compose,button variant 漏接)。
+        /* @__PURE__ */ jsxs("div", { className, onClick, ...props, children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "hidden",
+              multiple,
+              accept,
+              disabled,
+              onChange: (e) => {
+                filterAndDispatch(e.target.files);
+                e.target.value = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "data-file-upload-owner": true,
+              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",
         {
+          "data-file-upload-owner": true,
           role: "button",
           tabIndex: isBlocked ? -1 : 0,
           "aria-disabled": disabled || void 0,
@@ -124,39 +181,47 @@ const FileUpload = React.forwardRef(
           onDragEnter: (e) => {
             if (isBlocked) return;
             e.preventDefault();
+            dragDepth.current += 1;
             setDragOver(true);
           },
           onDragLeave: (e) => {
             if (isBlocked) return;
             e.preventDefault();
-            setDragOver(false);
+            dragDepth.current = Math.max(0, dragDepth.current - 1);
+            if (dragDepth.current === 0) setDragOver(false);
           },
           onDragOver: (e) => {
-            if (isBlocked) return;
             e.preventDefault();
           },
           onDrop: (e) => {
-            if (isBlocked) return;
             e.preventDefault();
+            if (isBlocked) return;
+            dragDepth.current = 0;
             setDragOver(false);
             filterAndDispatch(e.dataTransfer.files);
           },
           className: cn(
             // 寬度 w-full 填滿 consumer 容器(user 明示「寬度填滿」);高度由 padding + 內容物決定(不固定 h)
             "flex flex-col items-center justify-center gap-2 text-center w-full",
-            // 對稱 padding p-[var(--layout-space-loose)]:四邊等距,density-aware(md=24px / lg=32px),對齊 DS chrome padding canonical。
+            // 對稱 padding p-[var(--layout-space-loose)]:四邊等距,density-aware(md=16px / lg=24px),對齊 DS chrome padding canonical。
             // 不再硬寫 px-6 py-10(不對稱+非 token)。內容物(icon + title + description)垂直堆疊由 gap-2 控制
             "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-hover 邊框(2026-07-06 修:註解與 spec 一直宣稱 colorPrimaryHover、
+            // code 卻寫 base = claim-vs-code 反向 drift;瞬時態歸 hover 階,雙向全掃唯一 B 類違規),
+            // 底色維持 surface(不變 bg)。state 信號靠邊框,非底色。
+            // 2026-06-11 R2(M5 狀態疊加):hover 變 primary 僅限 idle —— disabled/loading 維持原邊框(spec「disabled 邊框不變色」;dropzone 狀態機無 error 態,error 屬 files 清單 FileItem status)
+            "data-[state=idle]:hover:border-primary-hover data-[state=drag-over]:border-primary-hover",
+            // 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,
@@ -170,21 +235,22 @@ const FileUpload = React.forwardRef(
                 multiple,
                 accept,
                 disabled,
-                onChange: (e) => filterAndDispatch(e.target.files)
+                onChange: (e) => {
+                  filterAndDispatch(e.target.files);
+                  e.target.value = "";
+                }
               }
             ),
-            loading ? /* @__PURE__ */ jsx(
-              Empty,
-              {
-                icon: /* @__PURE__ */ jsx(CircularProgress, { size: 48 }),
-                title: loadingTitle
-              }
-            ) : children ?? /* @__PURE__ */ jsx(
+            loading ? /* @__PURE__ */ jsxs("div", { role: "status", "aria-label": loadingTitle, className: "flex flex-col items-center text-center", children: [
+              /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(CircularProgress, { size: 48 }) }),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-body-lg font-medium text-foreground", children: loadingTitle })
+            ] }) : children ?? /* @__PURE__ */ jsx(
               Empty,
               {
                 icon: Upload,
                 title,
-                description
+                description,
+                disabled
               }
             )
           ]
@@ -215,11 +281,15 @@ const fileUploadMeta = {
   component: "FileUpload",
   family: null,
   // non-family composite / overlay / layout
-  variants: {},
+  variants: {
+    dropzone: { purpose: "大型 dashed 拖放區(預設)— 拖放有價值 + 主要上傳區(drag + click)" },
+    button: { purpose: "緊湊 Button 觸發 — form 內單欄 / 空間省(click-only)" }
+  },
   sizes: {},
-  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  // 'active' 移除 — dropzone 僅 hover / drag-over 態,無按壓視覺(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 *-active token)。
+  states: ["default", "hover", "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   * 每項有 status 狀態會對應 icon:\n   *   - `uploading`:CircularProgress(+ progress bar 若 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」L249-251: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=24px / lg=32px),對齊 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 * 上傳後可由 `files` 走內建 FileItem 清單，也可由 consumer 自行組合 FileItem。\n *\n * ── 4 狀態(2026-06-03 修正)──\n * idle     (default) — border-dashed border-border  bg-surface\n * hover = drag-over  — border-primary-hover(統一,純 border-driven,底維持 surface;2026-07-06 對齊 Ant colorPrimaryHover)\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 * ── dropzone children 插槽 ──\n * 預設渲染 `<Empty icon={Upload} title description />` — 重用 Empty 元件 own\n * 的「icon + title + description 垂直居中」SSOT 避免視覺漂移。Empty 改字體 /\n * gap / icon 尺寸時 FileUpload 自動跟進。若 consumer 傳 children 則整個覆寫。\n * button variant 只顯示以 `buttonLabel` 命名的原生 DS Button，忽略此展示插槽。\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  /** dropzone 標題文字(預設「Click or drag file here to upload」；button variant 忽略) */\n  title?: string\n  /** dropzone 說明文字(預設依 multiple 切換；button variant 忽略) */\n  description?: string\n  /** dropzone:若傳入 children,覆寫預設 Empty 結構；button variant 忽略 */\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\nfunction focusAfterFileRemoval(current: HTMLButtonElement) {\n  const list = current.closest('ul')\n  const buttons = list ? Array.from(list.querySelectorAll<HTMLButtonElement>('[data-collection-remove]')) : []\n  const index = buttons.indexOf(current)\n  const next = buttons[index + 1] ?? buttons[index - 1]\n  const owner = list?.parentElement?.querySelector<HTMLElement>('[data-file-upload-owner]')\n  ;(next ?? owner)?.focus()\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    // drag enter/leave 深度計數(react-dropzone / Mantine Dropzone 同款):跨進內部子元素時\n    // 瀏覽器發「子 dragenter → 外層 dragleave」成對事件,+1/−1 抵銷後計數仍 > 0 = 沒離開。\n    // 不依賴 e.relatedTarget —— Safari/WebKit 的 dragleave relatedTarget 恆 null,guard 法必失效。\n    const dragDepth = React.useRef(0)\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=\"已上傳的檔案\"\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」+「dismiss prop 觸發條件」段:onRemove callback 不觸發 dismiss prop。\n                  <Button\n                    iconOnly\n                    variant=\"text\"\n                    size=\"xs\"\n                    startIcon={X}\n                    aria-label={removeAriaLabel(f.name)}\n                    data-collection-remove\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      focusAfterFileRemoval(e.currentTarget)\n                      onRemove(f.id)\n                    }}\n                    className=\"text-fg-muted hover:text-fg-secondary\"\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        // consumer onClick 在此 wrapper div 承載(type = MouseEvent<HTMLDivElement>,對齊 FileUploadProps\n        // extends HTMLAttributes<HTMLDivElement>)。Button 觸發開檔會冒泡至此 → 同時觸發 consumer handler。\n        // 2026-07-17 修:onClick 於 L128 destructure 後未再 compose,button variant 靜默丟失公開 DOM prop\n        // (dropzone variant 經 handleClick 的 onClick?.(e) 正確 compose,button variant 漏接)。\n        <div className={className} onClick={onClick} {...props}>\n          <input\n            ref={inputRef}\n            type=\"file\"\n            className=\"hidden\"\n            multiple={multiple}\n            accept={accept}\n            disabled={disabled}\n            onChange={(e) => {\n              // 2026-07-05 D4:dispatch 後清空 value — 瀏覽器對同路徑檔案不重發 change,\n              // 不清空則「失敗修正後重選同檔 / 刪除後重傳同檔」靜默無反應\n              filterAndDispatch(e.target.files)\n              e.target.value = ''\n            }}\n          />\n          <Button\n            data-file-upload-owner\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        data-file-upload-owner\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          // 2026-07-06 深度計數升級(user 實測抓到「拖入約一秒高亮熄滅」):游標從邊緣飄到中央\n          // 跨進 Empty icon/標題那刻,瀏覽器發「子 dragenter → 外層 dragleave」→ 舊版無 guard 直接\n          // 熄滅;2026-07-05 的 relatedTarget guard 只救 Chrome(Safari/WebKit dragleave 的\n          // relatedTarget 恆 null → guard 失效)。深度計數不依賴 relatedTarget,跨瀏覽器穩定。\n          dragDepth.current += 1\n          setDragOver(true)\n        }}\n        onDragLeave={(e) => {\n          if (isBlocked) return\n          e.preventDefault()\n          dragDepth.current = Math.max(0, dragDepth.current - 1)\n          if (dragDepth.current === 0) setDragOver(false)\n        }}\n        onDragOver={(e) => {\n          // 2026-07-05 D4:blocked 時仍先 preventDefault — dragover 未取消 = 非合法 drop target,\n          // 瀏覽器 default 會在當前 tab 直接開啟被丟檔案(整頁導航,app 狀態全失);吞掉操作而非讓瀏覽器接管\n          e.preventDefault()\n        }}\n        onDrop={(e) => {\n          // 2026-07-05 D4:preventDefault 先於 isBlocked guard — 同 dragover,擋瀏覽器開檔導航\n          e.preventDefault()\n          if (isBlocked) return\n          dragDepth.current = 0 // drop 結束整輪拖曳,計數歸零(下一輪從乾淨狀態起算)\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-hover 邊框(2026-07-06 修:註解與 spec 一直宣稱 colorPrimaryHover、\n          // code 卻寫 base = claim-vs-code 反向 drift;瞬時態歸 hover 階,雙向全掃唯一 B 類違規),\n          // 底色維持 surface(不變 bg)。state 信號靠邊框,非底色。\n          // 2026-06-11 R2(M5 狀態疊加):hover 變 primary 僅限 idle —— disabled/loading 維持原邊框(spec「disabled 邊框不變色」;dropzone 狀態機無 error 態,error 屬 files 清單 FileItem status)\n          'data-[state=idle]:hover:border-primary-hover data-[state=drag-over]:border-primary-hover',\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) => {\n            // 2026-07-05 D4:dispatch 後清空 value — 瀏覽器對同路徑檔案不重發 change,\n            // 不清空則「失敗修正後重選同檔 / 刪除後重傳同檔」靜默無反應\n            filterAndDispatch(e.target.files)\n            e.target.value = ''\n          }}\n        />\n        {loading ? (\n          <div role=\"status\" aria-label={loadingTitle} className=\"flex flex-col items-center text-center\">\n            <div className=\"mb-4\"><CircularProgress size={48} /></div>\n            <span aria-hidden className=\"text-body-lg font-medium text-foreground\">{loadingTitle}</span>\n          </div>\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    dropzone: { purpose: '大型 dashed 拖放區(預設)— 拖放有價值 + 主要上傳區(drag + click)' },\n    button: { purpose: '緊湊 Button 觸發 — form 內單欄 / 空間省(click-only)' },\n  },\n  sizes: {\n\n  },\n  // 'active' 移除 — dropzone 僅 hover / drag-over 態,無按壓視覺(2026-07-07 詞彙統一 DS-wide 按壓訊號盤點:檔內 0 active: utility / 0 *-active token)。\n  states: ['default', 'hover', '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":";;;;;;;;AA0GA,SAAS,sBAAsB,SAA4B;;AACzD,QAAM,OAAO,QAAQ,QAAQ,IAAI;AACjC,QAAM,UAAU,OAAO,MAAM,KAAK,KAAK,iBAAoC,0BAA0B,CAAC,IAAI,CAAA;AAC1G,QAAM,QAAQ,QAAQ,QAAQ,OAAO;AACrC,QAAM,OAAO,QAAQ,QAAQ,CAAC,KAAK,QAAQ,QAAQ,CAAC;AACpD,QAAM,SAAQ,kCAAM,kBAAN,mBAAqB,cAA2B;AAC7D,GAAC,aAAQ,UAAR,mBAAgB;AACpB;AAGA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA;AAAA,IACd,UAAU;AAAA,IACV,eAAe;AAAA;AAAA,IACf,QAAQ;AAAA;AAAA,IACR,cAAc,WAAW,wCAAwC;AAAA;AAAA,IACjE;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,kBAAkB,CAAC,SAAiB,MAAM,IAAI;AAAA;AAAA,IAC9C;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,WAAW,MAAM,OAAyB,IAAI;AACpD,UAAM,CAAC,YAAY,WAAW,IAAI,MAAM,SAAS,KAAK;AAItD,UAAM,YAAY,MAAM,OAAO,CAAC;AAEhC,UAAM,oBAAoB,CAACA,WAA2B;AACpD,UAAI,CAACA,UAASA,OAAM,WAAW,EAAG;AAClC,YAAM,WAAmB,CAAA;AACzB,YAAM,iBAAyB,CAAA;AAC/B,YAAM,iBAAyB,CAAA;AAE/B,YAAM,KAAKA,MAAK,EAAE,QAAQ,CAAC,MAAM;AAC/B,YAAI,WAAW,QAAQ,EAAE,OAAO,SAAS;AACvC,yBAAe,KAAK,CAAC;AACrB;AAAA,QACF;AACA,YAAI,UAAU,CAAC,YAAY,GAAG,MAAM,GAAG;AACrC,yBAAe,KAAK,CAAC;AACrB;AAAA,QACF;AACA,iBAAS,KAAK,CAAC;AAAA,MACjB,CAAC;AAED,UAAI,eAAe,OAAQ,sCAAW,gBAAgB;AACtD,UAAI,eAAe,OAAQ,sCAAW,gBAAgB;AACtD,UAAI,SAAS,OAAQ,sCAAW,WAAW,WAAW,SAAS,MAAM,GAAG,CAAC;AAAA,IAC3E;AAEA,UAAM,cAAc,CAAC,MAAwC;;AAG3D,UAAI,CAAC,YAAY,CAAC,QAAS,gBAAS,YAAT,mBAAkB;AAC7C,yCAAU;AAAA,IACZ;AAGA,UAAM,QAAQ,WAAW,aAAa,UAAU,YAAY,aAAa,cAAc;AACvF,UAAM,YAAY,YAAY;AAE9B,UAAM,WAAW,MAAM,QAAQ,KAAK,KAAK,MAAM,SAAS;AAExD,UAAM,eAAe,WACnB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT;AAAA;AAAA;AAAA;AAAA,UAIA,iBAAiB,SAAS,eAAe;AAAA,QAAA;AAAA,QAE3C,cAAW;AAAA,QAEV,gBAAO,IAAI,CAAC,MACX,oBAAC,MAAA,EAAc,WAAU,aACvB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,MAAM,EAAE;AAAA,YACR,QAAQ,EAAE;AAAA,YACV,UAAU,EAAE;AAAA,YACZ,aAAa,EAAE,gBAAgB,EAAE,QAAQ,OAAO,YAAY,EAAE,IAAI,IAAI;AAAA,YACtE,cAAc,EAAE;AAAA,YAChB,SACE;AAAA;AAAA;AAAA;AAAA,cAIE;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,UAAQ;AAAA,kBACR,SAAQ;AAAA,kBACR,MAAK;AAAA,kBACL,WAAW;AAAA,kBACX,cAAY,gBAAgB,EAAE,IAAI;AAAA,kBAClC,0BAAsB;AAAA,kBACtB,SAAS,CAAC,MAAM;AACd,sBAAE,gBAAA;AACF,0CAAsB,EAAE,aAAa;AACrC,6BAAS,EAAE,EAAE;AAAA,kBACf;AAAA,kBACA,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,gBAEV;AAAA,UAAA;AAAA,QAAA,EAER,GA7BO,EAAE,EA8BX,CACD;AAAA,MAAA;AAAA,IAAA,IAED;AAEJ,WACE,qBAAC,SAAI,KAAU,WAAW,GAAG,UAAU,YAAY,eAAe,GACjE,UAAA;AAAA,MAAA,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMX,qBAAC,OAAA,EAAI,WAAsB,SAAmB,GAAG,OAC/C,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,WAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU,CAAC,MAAM;AAGf,kCAAkB,EAAE,OAAO,KAAK;AAChC,kBAAE,OAAO,QAAQ;AAAA,cACnB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,0BAAsB;AAAA,cACtB,SAAQ;AAAA,cACR,WAAWC;AAAAA,cACX;AAAA,cACA;AAAA,cACA,aAAW,WAAW;AAAA,cACtB,SAAS,MAAM;;AACb,oBAAI,CAAC,YAAY,CAAC,QAAS,gBAAS,YAAT,mBAAkB;AAAA,cAC/C;AAAA,cAEC,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EAAA,CACF;AAAA,UAEF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,0BAAsB;AAAA,UACtB,MAAK;AAAA,UACL,UAAU,YAAY,KAAK;AAAA,UAC3B,iBAAe,YAAY;AAAA,UAC3B,aAAW,WAAW;AAAA,UACtB,cAAY;AAAA,UACZ,SAAS;AAAA,UACT,WAAW,CAAC,MAAM;;AAChB,gBAAI,UAAW;AACf,gBAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,gBAAE,eAAA;AACF,6BAAS,YAAT,mBAAkB;AAAA,YACpB;AAAA,UACF;AAAA,UACA,aAAa,CAAC,MAAM;AAClB,gBAAI,UAAW;AACf,cAAE,eAAA;AAKF,sBAAU,WAAW;AACrB,wBAAY,IAAI;AAAA,UAClB;AAAA,UACA,aAAa,CAAC,MAAM;AAClB,gBAAI,UAAW;AACf,cAAE,eAAA;AACF,sBAAU,UAAU,KAAK,IAAI,GAAG,UAAU,UAAU,CAAC;AACrD,gBAAI,UAAU,YAAY,EAAG,aAAY,KAAK;AAAA,UAChD;AAAA,UACA,YAAY,CAAC,MAAM;AAGjB,cAAE,eAAA;AAAA,UACJ;AAAA,UACA,QAAQ,CAAC,MAAM;AAEb,cAAE,eAAA;AACF,gBAAI,UAAW;AACf,sBAAU,UAAU;AACpB,wBAAY,KAAK;AACjB,8BAAkB,EAAE,aAAa,KAAK;AAAA,UACxC;AAAA,UACA,WAAW;AAAA;AAAA,YAET;AAAA;AAAA;AAAA,YAGA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,YAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMA;AAAA;AAAA;AAAA,YAGA;AAAA;AAAA;AAAA,YAGA;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,UAAU,CAAC,MAAM;AAGf,oCAAkB,EAAE,OAAO,KAAK;AAChC,oBAAE,OAAO,QAAQ;AAAA,gBACnB;AAAA,cAAA;AAAA,YAAA;AAAA,YAED,+BACE,OAAA,EAAI,MAAK,UAAS,cAAY,cAAc,WAAU,0CACrD,UAAA;AAAA,cAAA,oBAAC,SAAI,WAAU,QAAO,8BAAC,kBAAA,EAAiB,MAAM,IAAI,EAAA,CAAE;AAAA,kCACnD,QAAA,EAAK,eAAW,MAAC,WAAU,4CAA4C,UAAA,aAAA,CAAa;AAAA,YAAA,EAAA,CACvF,IAEA,YACE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAMA;AAAAA,gBACN;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAAA;AAAA,MAKL;AAAA,IAAA,GACD;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGzB,SAAS,YAAY,GAAmB;AACtC,MAAI,IAAI,KAAM,QAAO,GAAG,CAAC;AACzB,MAAI,IAAI,OAAO,KAAM,QAAO,IAAI,IAAI,MAAM,QAAQ,CAAC,CAAC;AACpD,MAAI,IAAI,OAAO,OAAO,KAAM,QAAO,IAAI,KAAK,OAAO,OAAO,QAAQ,CAAC,CAAC;AACpE,SAAO,IAAI,KAAK,OAAO,OAAO,OAAO,QAAQ,CAAC,CAAC;AACjD;AAIA,SAAS,YAAY,MAAY,QAAyB;AACxD,QAAM,WAAW,OAAO,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAA,EAAO,YAAA,CAAa;AACpE,QAAM,WAAW,KAAK,KAAK,YAAA;AAC3B,QAAM,WAAW,KAAK,KAAK,YAAA;AAC3B,SAAO,SAAS,KAAK,CAAC,MAAM;AAC1B,QAAI,EAAE,WAAW,GAAG,EAAG,QAAO,SAAS,SAAS,CAAC;AACjD,QAAI,EAAE,SAAS,IAAI,EAAG,QAAO,SAAS,WAAW,EAAE,MAAM,GAAG,EAAE,CAAC;AAC/D,WAAO,aAAa;AAAA,EACtB,CAAC;AACH;AAIO,MAAM,iBAAiB;AAAA,EAC5B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU;AAAA,IACR,UAAU,EAAE,SAAS,iDAAA;AAAA,IACrB,QAAQ,EAAE,SAAS,4CAAA;AAAA,EAA4C;AAAA,EAEjE,OAAO,CAAA;AAAA;AAAA,EAIP,QAAQ,CAAC,WAAW,SAAS,iBAAiB,UAAU;AAAA,EACxD,QAAQ;AAAA,IACN,IAAI,CAAC,cAAc,aAAa;AAAA,IAChC,IAAI,CAAA;AAAA,IACJ,MAAM,CAAC,WAAW;AAAA,EAAA;AAEtB;"}

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

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

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

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

package/dist/components/FileUpload/index.js

@@ -0,0 +1,6 @@
+import { FileUpload, fileUploadMeta } from "./file-upload.js";
+export {
+  FileUpload,
+  fileUploadMeta
+};
+//# sourceMappingURL=index.js.map

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

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

package/dist/components/FileViewer/can-render-image.d.ts

@@ -0,0 +1,6 @@
+/** 判斷檔案是否可用 ImageRenderer 渲染。 */
+export declare function canRenderImage(file: {
+    mimeType: string;
+    name: string;
+}): boolean;
+//# sourceMappingURL=can-render-image.d.ts.map

package/dist/components/FileViewer/can-render-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-render-image.d.ts","sourceRoot":"","sources":["../../../src/components/FileViewer/can-render-image.ts"],"names":[],"mappings":"AASA,iCAAiC;AACjC,wBAAgB,cAAc,CAAC,IAAI,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAIhF"}