npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.82 → 0.1.0-beta.84 - Mend

@qijenchen/design-system 0.1.0-beta.82 → 0.1.0-beta.84

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (612) hide show

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

	@@ -1 +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: 兩 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 // 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\"\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'],\n tokens: {\n bg: ['bg-secondary', 'bg-surface'],\n fg: ['text-fg-muted', 'text-fg-secondary'],\n ring: [],\n },\n} as const\n\nexport { FileItem }\n"],"names":[],"mappings":"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"}
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: 兩 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 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 // 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: `下載 ${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',\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\"\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: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 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'],\n tokens: {\n bg: ['bg-secondary', 'bg-surface'],\n fg: ['text-fg-muted', 'text-fg-secondary'],\n ring: [],\n },\n} as const\n\nexport { FileItem }\n"],"names":[],"mappings":"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"}

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

@@ -8,7 +8,7 @@ import * as React from 'react';
  *
  * ── 4 狀態(2026-06-03 修正)──
  * idle     (default) — border-dashed border-border  bg-surface
- * hover = drag-over  — border-primary(統一,純 border-driven,底維持 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
  *

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

	@@ -1 +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 狀態(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 /* 說明文字(預設依 multiple:單檔「Support for a single file upload」、multiple 多檔「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 // 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 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) => {\n // 2026-07-05 D4:dispatch 後清空 value — 瀏覽器對同路徑檔案不重發 change,\n // 不清空則「失敗修正後重選同檔 / 刪除後重傳同檔」靜默無反應\n filterAndDispatch(e.target.files)\n e.target.value = ''\n }}\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 // 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 <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 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,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,SAAS,CAAC,MAAM;AACd,sBAAE,gBAAA;AACF,6BAAS,EAAE,EAAE;AAAA,kBACf;AAAA,kBACA,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,gBAEV;AAAA,UAAA;AAAA,QAAA,EAER,GA3BO,EAAE,EA4BX,CACD;AAAA,MAAA;AAAA,IAAA,IAED;AAEJ,WACE,qBAAC,SAAI,KAAU,WAAW,GAAG,UAAU,YAAY,eAAe,GACjE,UAAA;AAAA,MAAA,YAAY;AAAA;AAAA,QAEX,qBAAC,OAAA,EAAI,WAAuB,GAAG,OAC7B,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,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,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,UACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM,oBAAC,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,gBAClC,OAAO;AAAA,cAAA;AAAA,YAAA,IAGT,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;"}
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 狀態(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 ── 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 /* 說明文字(預設依 multiple:單檔「Support for a single file upload」、multiple 多檔「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 // 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 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) => {\n // 2026-07-05 D4:dispatch 後清空 value — 瀏覽器對同路徑檔案不重發 change,\n // 不清空則「失敗修正後重選同檔 / 刪除後重傳同檔」靜默無反應\n filterAndDispatch(e.target.files)\n e.target.value = ''\n }}\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 // 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 <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 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":"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"}

package/dist/components/FileViewer/file-viewer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/FileViewer/file-viewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAyCzD,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EAGb,MAAM,qBAAqB,CAAA;~~AA+E5B~~,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAQjE;~~AAshBD~~;;;;;GAKG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kDAAkD;IAClD,8BAA8B,CAAC,EAAE,MAAM,CAAA;IACvC,kDAAkD;IAClD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqBD,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,cAAc,CACf;IACD,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACnE,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACrC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,~~wFAiVd~~,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAiBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}
1	+ {"version":3,"file":"file-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/FileViewer/file-viewer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAA;AAyCzD,OAAO,KAAK,EACV,QAAQ,EACR,YAAY,EAGb,MAAM,qBAAqB,CAAA;AAgF5B,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAQjE;AA0hBD;;;;;GAKG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,4DAA4D;IAC5D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,wCAAwC;IACxC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,kDAAkD;IAClD,8BAA8B,CAAC,EAAE,MAAM,CAAA;IACvC,kDAAkD;IAClD,0BAA0B,CAAC,EAAE,MAAM,CAAA;IACnC,iDAAiD;IACjD,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,sFAAsF;IACtF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAqBD,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,EAC9D,cAAc,CACf;IACD,KAAK,EAAE,QAAQ,EAAE,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iDAAiD;IACjD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sFAAsF;IACtF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,+DAA+D;IAC/D,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IACnE,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sDAAsD;IACtD,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,qDAAqD;IACrD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IACrC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,gBAAgB,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,wFAoVd,CAAA;AAKF,eAAO,MAAM,cAAc;;;;;;;;;;;CAiBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA;AACrB,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/components/FileViewer/file-viewer.js CHANGED Viewed

@@ -19,6 +19,7 @@ import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuIte
 import { useScrollByPage, buildFadeMask, ARROW_BUTTON_WIDTH, OverflowScrollArrow } from "../../patterns/horizontal-overflow/horizontal-overflow.js";
 import { useControllable } from "../../hooks/use-controllable.js";
 import { canRenderImage } from "./can-render-image.js";
+import { surfaceMotion } from "../../tokens/motion/overlay-motion.js";
 import { useScrollEdges } from "../../hooks/use-overflow-items.js";
 const FallbackRenderer = ({ file, onCapabilitiesChange }) => {
   React.useEffect(() => {
@@ -116,6 +117,7 @@ const ZoomInput = ({ value, onChange, onFit, labels }) => {
           {
             size: "sm",
             autoWidth: true,
+            maxLength: 5,
             "aria-label": labels.zoomInput,
             value: draft,
             onChange: (e) => setDraft(e.target.value),
@@ -350,7 +352,7 @@ const InfoPanel = React.memo(function InfoPanel2({
             /* @__PURE__ */ jsx("span", { className: "text-body font-normal text-foreground", children: labels.fileInfoHeading }),
             /* @__PURE__ */ jsxs(DescriptionList, { direction: "horizontal", divided: true, children: [
               /* @__PURE__ */ jsx(DescriptionItem, { label: "檔名", children: file.name }),
-              /* @__PURE__ */ jsx(DescriptionItem, { label: "類型", children: file.mimeType || "—" }),
+              /* @__PURE__ */ jsx(DescriptionItem, { label: "類型", children: file.mimeType || "-" }),
               sizeText && /* @__PURE__ */ jsx(DescriptionItem, { label: "大小", children: /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: sizeText }) }),
               file.metadata && Object.entries(file.metadata).map(([k, v]) => /* @__PURE__ */ jsx(DescriptionItem, { label: k, children: String(v) }, k))
             ] })
@@ -599,6 +601,7 @@ const FileViewer = React.forwardRef(function FileViewer2({
         "data-theme": "dark",
         className: cn(
           "fixed inset-0 z-50 bg-overlay",
+          surfaceMotion,
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
         )
@@ -611,8 +614,10 @@ const FileViewer = React.forwardRef(function FileViewer2({
         className: cn(
           // Edge-to-edge fullscreen,無 inset / 無 radius(與一般 Dialog 差別的所在)
           "fixed inset-0 z-50 outline-none",
+          surfaceMotion,
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
         ),
         onOpenAutoFocus: (e) => e.preventDefault(),
         ...props,