npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.107 → 0.1.0-beta.109 - Mend

@qijenchen/design-system 0.1.0-beta.107 → 0.1.0-beta.109

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 (123) hide show

package/dist/components/AccountMenu/account-menu.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"account-menu.d.ts","sourceRoot":"","sources":["../../../src/components/AccountMenu/account-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAYlF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAClE;AAED,MAAM,WAAW,gBAAgB;IAC/B,cAAc;IACd,IAAI,EAAE,eAAe,CAAA;IACrB,oFAAoF;IACpF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+FAA+F;IAC/F,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,CACjB,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,CAC9D,CAAA;CACF;AAID,eAAO,MAAM,WAAW,~~4FA6EvB~~,CAAA;AAKD,eAAO,MAAM,eAAe;;;;;;;;;;;CAWlB,CAAA"}
1	+ {"version":3,"file":"account-menu.d.ts","sourceRoot":"","sources":["../../../src/components/AccountMenu/account-menu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,0CAA0C,CAAA;AAYlF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,MAAM,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAClE;AAED,MAAM,WAAW,gBAAgB;IAC/B,cAAc;IACd,IAAI,EAAE,eAAe,CAAA;IACrB,oFAAoF;IACpF,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAC3B,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,qFAAqF;IACrF,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gCAAgC;IAChC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+FAA+F;IAC/F,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,yCAAyC;IACzC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,CACjB,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EACxC,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,WAAW,GAAG,UAAU,CAC9D,CAAA;CACF;AAID,eAAO,MAAM,WAAW,4FAiFvB,CAAA;AAKD,eAAO,MAAM,eAAe;;;;;;;;;;;CAWlB,CAAA"}

package/dist/components/AccountMenu/account-menu.js CHANGED Viewed

@@ -12,6 +12,7 @@ const AccountMenu = React.forwardRef(
     children,
     align = "end",
     triggerAriaLabel = "帳號與設定",
+    // i18n-allow: spec 預設 aria-label(account-menu.spec.md),consumer 以同名 prop 覆蓋
     open,
     defaultOpen,
     onOpenChange,
@@ -31,7 +32,7 @@ const AccountMenu = React.forwardRef(
           ref,
           type: "button",
           "aria-label": triggerAriaLabel,
-          className: "flex items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+          className: "flex size-6 shrink-0 items-center justify-center self-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
           children: /* @__PURE__ */ jsx(Avatar, { size: 24, ...avatar, alt: avatar.alt ?? user.name })
         }
       ) }),

package/dist/components/AccountMenu/account-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"account-menu.js","sources":["../../../src/components/AccountMenu/account-menu.tsx"],"sourcesContent":["/*\n AccountMenu — 全域 chrome「自己的帳號入口」(24px avatar 觸發 + 帳號選單)\n \n ── 定位 ──\n * Primary-header 派 globalHeader 右側(desktop)/ mobile Sheet SidebarHeader 右側的\n * 帳號入口成品元件:點 avatar 開「個人資料 / 設定 / 登出」navigation 選單。\n * 是「自己」的入口,不是看「別人」的 ProfileCard(後者預設動作 Chat/通話,語義是聯絡某人)。\n * Placement-agnostic:哪個 mode 放哪裡是 consumer 職責,放置 canonical owner =\n * `../AppShell/app-shell.spec.md`「帳號入口(Account entry)放置 SSOT」(本元件不收 mode prop,\n * 不複製該 SSOT;consumer 讀 `useAppShell().layout` + `useSidebar().isMobile` 決定放置)。\n \n ── 實作基礎 ──\n * 消費:Avatar(raw size=24 trigger)+ DropdownMenu(Trigger asChild / Content / Group / Label / Item)\n * 對應 pattern:patterns/header-canonical(4.5 chrome header avatar SSOT)\n \n ── 消費的 SSOT ──\n * - components: [Avatar, DropdownMenu(DropdownMenuTrigger/Content/Group/Label/Item)]\n * - patterns: [header-canonical 4.5(chrome header avatar = raw `<Avatar size={24}>`,非 ItemAvatar)]\n * - tokens: [--chrome-header-avatar-size(JS 端 24 literal sync), --ring(focus-visible ring canonical)]\n * - spec refs: app-shell.spec.md「帳號入口(Account entry)放置 SSOT」/ header-canonical.spec.md 4.5\n * / dropdown-menu.spec.md / profile-card.spec.md(近親分界:看別人 vs 自己)\n \n 升級歷程:2026-06-17 `AppShell/_demo-helpers.tsx` demo helper 誕生(user directive)→\n * 2026-07-30 F9 升 public:app-shell.spec.md + sidebar.spec.md 兩處 canonical 都 mandate\n * 消費本元件,「文件教得到、import 拿不到」= DT-EXPORT 斷鏈同款缺口(gen-component-indexes.mjs\n * 檔頭 anchor),npm consumer 被迫整包重造。世界級對照:Atlassian `@atlaskit/atlassian-navigation`\n * 出貨專門 `Profile` 元件作 top bar 帳號 trigger(ProfileProps = IconButtonProps,選單內容\n * composition;https://unpkg.com/@atlaskit/atlassian-navigation/dist/types/index.d.ts +\n * dist/types/components/Profile/types.d.ts);shadcn / Primer 走 DropdownMenu / ActionMenu\n * composition recipe(https://ui.shadcn.com/docs/components/dropdown-menu「An account switcher\n * dropdown triggered by an avatar」/ https://primer.style/components/action-menu)。本元件 =\n * Atlassian 專門元件 + shadcn canonical 內容組(Label(user)+ Groups)的收斂。\n /\nimport as React from 'react'\nimport { User, Settings, LogOut } from 'lucide-react'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\nimport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuGroup,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface AccountMenuUser {\n /** 顯示名(選單 Label 區;alt 未傳時同時作 avatar alt fallback) /\n name: string\n /\n Avatar 資料(消費既有 `AvatarData` type)。`hoverCard` 刻意排除:帳號入口是「自己」,\n * 不掛 ProfileCard(per app-shell.spec.md 帳號入口 SSOT「不用 ProfileCard」);\n * `alt` 可省,fallback `name`。\n /\n avatar?: Omit<AvatarData, 'hoverCard' \| 'alt'> & { alt?: string }\n}\n\nexport interface AccountMenuProps {\n /* 當前登入使用者 /\n user: AccountMenuUser\n /* 「個人資料」item handler(default 選單消費;命名對齊 `PersonData.onViewProfile` 既有 canonical) /\n onViewProfile?: () => void\n /* 「設定」item handler(default 選單消費) /\n onOpenSettings?: () => void\n /* 「登出」item handler(default 選單消費) /\n onSignOut?: () => void\n /\n 取代 default 選單內容(自組 `DropdownMenuGroup` / `DropdownMenuItem`;i18n / 產品自訂項走這)。\n * Identity Label(user.name)恆由本元件渲染於選單頂(對齊 shadcn account 例 Label(user)慣例);\n * 傳入 children 時三個 default callback 不再消費。\n /\n children?: React.ReactNode\n /* 選單對齊(轉傳 DropdownMenuContent `align`)。預設 `'end'`:右上入口靠右展開(demo baseline) /\n align?: 'start' \| 'center' \| 'end'\n /* Trigger aria-label(i18n override,對齊 Avatar `badgeAriaLabel` pattern)。預設「帳號與設定」 /\n triggerAriaLabel?: string\n /* 受控展開狀態(Radix passthrough) /\n open?: boolean\n /* 預設展開(uncontrolled,Radix passthrough)。Storybook OpenSnapshot(M15 visual-audit coverable)用 /\n defaultOpen?: boolean\n /* 展開狀態變更 callback(Radix passthrough) /\n onOpenChange?: (open: boolean) => void\n /\n Trigger button 的非視覺 DOM attributes / event handlers。\n * `children`、`type`、`aria-label`、`className`、`disabled` 由 AccountMenu canonical contract\n * 擁有；分析與測試所需的 `data-`、`aria-`、事件可由此傳入。\n /\n triggerProps?: Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'children' \| 'type' \| 'aria-label' \| 'className' \| 'disabled'\n >\n}\n\n// ── AccountMenu ─────────────────────────────────────────────────────────────\n\nexport const AccountMenu = React.forwardRef<HTMLButtonElement, AccountMenuProps>(\n ({\n user,\n onViewProfile,\n onOpenSettings,\n onSignOut,\n children,\n align = 'end',\n triggerAriaLabel = '帳號與設定',\n open,\n defaultOpen,\n onOpenChange,\n triggerProps,\n }, ref) => {\n // Dev-mode warning(對齊 ProfileCardDefaultActions dev-warn 先例):default 選單項沒接任何\n // handler = item 點了永遠沒反應;production 必接 callback 或自組 children。\n if (\n process.env.NODE_ENV !== 'production' &&\n !children &&\n !onViewProfile &&\n !onOpenSettings &&\n !onSignOut\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n '[DS AccountMenu] default 選單項未接 onViewProfile/onOpenSettings/onSignOut——item 點擊無反應。請傳入 callback 或自組 children。'\n )\n }\n const avatar = user.avatar ?? {}\n return (\n <DropdownMenu open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n <DropdownMenuTrigger asChild>\n {/ 互動感由 focus-visible ring 提供(無 hover bg,chrome 輕量 entry),不放大到 field height\n — per app-shell.spec.md「Avatar 尺寸 + 邊距」+ header-canonical.spec.md 4.5 /}\n <button\n {...triggerProps}\n ref={ref}\n type=\"button\"\n aria-label={triggerAriaLabel}\n className=\"flex items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\"\n >\n {/ 24 per header-canonical.spec.md 4.5 chrome header avatar canonical(brand + account 同尺寸); sync with --chrome-header-avatar-size /}\n <Avatar size={24} {...avatar} alt={avatar.alt ?? user.name} />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align={align}>\n {children ? (\n <>\n <DropdownMenuGroup>\n <DropdownMenuLabel>{user.name}</DropdownMenuLabel>\n </DropdownMenuGroup>\n {children}\n </>\n ) : (\n <>\n {/ Default 選單集合 = app-shell.spec.md「入口開什麼」canonical(個人資料 / 設定 / 登出,\n 登出獨立 group — 破壞性動作分區,對齊 GitHub / Gmail / Slack 帳號選單慣例) */}\n <DropdownMenuGroup>\n <DropdownMenuLabel>{user.name}</DropdownMenuLabel>\n <DropdownMenuItem startIcon={User} onSelect={onViewProfile}>\n 個人資料\n </DropdownMenuItem>\n <DropdownMenuItem startIcon={Settings} onSelect={onOpenSettings}>\n 設定\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuGroup>\n <DropdownMenuItem startIcon={LogOut} onSelect={onSignOut}>\n 登出\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </>\n )}\n </DropdownMenuContent>\n </DropdownMenu>\n )\n },\n)\nAccountMenu.displayName = 'AccountMenu'\n\n// Story auto-compile metadata — F9 public 升級(2026-07-30)\n// Phase 2 fill needed: purpose descriptions + when rationale\nexport const accountMenuMeta = {\n component: 'AccountMenu',\n family: null, // composite(trigger = chrome header 24px avatar;浮層 = DropdownMenu Family 1 消費者)\n variants: {},\n sizes: {}, // trigger avatar 24px density-fixed(header-canonical.spec.md 4.5),無 size 軸 → 兩欄留空為 intentional\n states: ['default', 'focus-visible'],\n tokens: {\n bg: [],\n fg: [],\n ring: ['--ring'], // trigger focus-visible ring canonical\n },\n} as const\n"],"names":[],"mappings":";;;;;AAgGO,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GACC,QAAQ;AAGT,QACE,QAAQ,IAAI,aAAa,gBACzB,CAAC,YACD,CAAC,iBACD,CAAC,kBACD,CAAC,WACD;AAEA,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AACA,UAAM,SAAS,KAAK,UAAU,CAAA;AAC9B,WACE,qBAAC,cAAA,EAAa,MAAY,aAA0B,cAClD,UAAA;AAAA,MAAA,oBAAC,qBAAA,EAAoB,SAAO,~~MAG1B~~,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,WAAU;AAAA,UAGV,UAAA,oBAAC,QAAA,EAAO,MAAM,IAAK,GAAG,QAAQ,KAAK,OAAO,OAAO,KAAK,KAAA,CAAM;AAAA,QAAA;AAAA,MAAA,GAEhE;AAAA,MACA,oBAAC,qBAAA,EAAoB,OAClB,UAAA,WACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,mBAAA,EACC,UAAA,oBAAC,mBAAA,EAAmB,UAAA,KAAK,MAAK,GAChC;AAAA,QACC;AAAA,MAAA,EAAA,CACH,IAEA,qBAAA,UAAA,EAGE,UAAA;AAAA,QAAA,qBAAC,mBAAA,EACC,UAAA;AAAA,UAAA,oBAAC,mBAAA,EAAmB,eAAK,KAAA,CAAK;AAAA,8BAC7B,kBAAA,EAAiB,WAAW,MAAM,UAAU,eAAe,UAAA,QAE5D;AAAA,8BACC,kBAAA,EAAiB,WAAW,UAAU,UAAU,gBAAgB,UAAA,KAAA,CAEjE;AAAA,QAAA,GACF;AAAA,QACA,oBAAC,qBACC,UAAA,oBAAC,kBAAA,EAAiB,WAAW,QAAQ,UAAU,WAAW,UAAA,KAAA,CAE1D,EAAA,CACF;AAAA,MAAA,EAAA,CACF,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA;AAAA,EACP,QAAQ,CAAC,WAAW,eAAe;AAAA,EACnC,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAC,QAAQ;AAAA;AAAA,EAAA;AAEnB;"}
1	+ {"version":3,"file":"account-menu.js","sources":["../../../src/components/AccountMenu/account-menu.tsx"],"sourcesContent":["/*\n AccountMenu — 全域 chrome「自己的帳號入口」(24px avatar 觸發 + 帳號選單)\n \n ── 定位 ──\n * Primary-header 派 globalHeader 右側(desktop)/ mobile Sheet SidebarHeader 右側的\n * 帳號入口成品元件:點 avatar 開「個人資料 / 設定 / 登出」navigation 選單。\n * 是「自己」的入口,不是看「別人」的 ProfileCard(後者預設動作 Chat/通話,語義是聯絡某人)。\n * Placement-agnostic:哪個 mode 放哪裡是 consumer 職責,放置 canonical owner =\n * `../AppShell/app-shell.spec.md`「帳號入口(Account entry)放置 SSOT」(本元件不收 mode prop,\n * 不複製該 SSOT;consumer 讀 `useAppShell().layout` + `useSidebar().isMobile` 決定放置)。\n \n ── 實作基礎 ──\n * 消費:Avatar(raw size=24 trigger)+ DropdownMenu(Trigger asChild / Content / Group / Label / Item)\n * 對應 pattern:patterns/header-canonical(4.5 chrome header avatar SSOT)\n \n ── 消費的 SSOT ──\n * - components: [Avatar, DropdownMenu(DropdownMenuTrigger/Content/Group/Label/Item)]\n * - patterns: [header-canonical 4.5(chrome header avatar = raw `<Avatar size={24}>`,非 ItemAvatar)]\n * - tokens: [--chrome-header-avatar-size(JS 端 24 literal sync), --ring(focus-visible ring canonical)]\n * - spec refs: app-shell.spec.md「帳號入口(Account entry)放置 SSOT」/ header-canonical.spec.md 4.5\n * / dropdown-menu.spec.md / profile-card.spec.md(近親分界:看別人 vs 自己)\n \n 升級歷程:2026-06-17 `AppShell/_demo-helpers.tsx` demo helper 誕生(user directive)→\n * 2026-07-30 F9 升 public:app-shell.spec.md + sidebar.spec.md 兩處 canonical 都 mandate\n * 消費本元件,「文件教得到、import 拿不到」= DT-EXPORT 斷鏈同款缺口(gen-component-indexes.mjs\n * 檔頭 anchor),npm consumer 被迫整包重造。世界級對照:Atlassian `@atlaskit/atlassian-navigation`\n * 出貨專門 `Profile` 元件作 top bar 帳號 trigger(ProfileProps = IconButtonProps,選單內容\n * composition;https://unpkg.com/@atlaskit/atlassian-navigation/dist/types/index.d.ts +\n * dist/types/components/Profile/types.d.ts);shadcn / Primer 走 DropdownMenu / ActionMenu\n * composition recipe(https://ui.shadcn.com/docs/components/dropdown-menu「An account switcher\n * dropdown triggered by an avatar」/ https://primer.style/components/action-menu)。本元件 =\n * Atlassian 專門元件 + shadcn canonical 內容組(Label(user)+ Groups)的收斂。\n /\nimport as React from 'react'\nimport { User, Settings, LogOut } from 'lucide-react'\nimport { Avatar, type AvatarData } from '@/design-system/components/Avatar/avatar'\nimport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuGroup,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\n\n// ── Types ───────────────────────────────────────────────────────────────────\n\nexport interface AccountMenuUser {\n /** 顯示名(選單 Label 區;alt 未傳時同時作 avatar alt fallback) /\n name: string\n /\n Avatar 資料(消費既有 `AvatarData` type)。`hoverCard` 刻意排除:帳號入口是「自己」,\n * 不掛 ProfileCard(per app-shell.spec.md 帳號入口 SSOT「不用 ProfileCard」);\n * `alt` 可省,fallback `name`。\n /\n avatar?: Omit<AvatarData, 'hoverCard' \| 'alt'> & { alt?: string }\n}\n\nexport interface AccountMenuProps {\n /* 當前登入使用者 /\n user: AccountMenuUser\n /* 「個人資料」item handler(default 選單消費;命名對齊 `PersonData.onViewProfile` 既有 canonical) /\n onViewProfile?: () => void\n /* 「設定」item handler(default 選單消費) /\n onOpenSettings?: () => void\n /* 「登出」item handler(default 選單消費) /\n onSignOut?: () => void\n /\n 取代 default 選單內容(自組 `DropdownMenuGroup` / `DropdownMenuItem`;i18n / 產品自訂項走這)。\n * Identity Label(user.name)恆由本元件渲染於選單頂(對齊 shadcn account 例 Label(user)慣例);\n * 傳入 children 時三個 default callback 不再消費。\n /\n children?: React.ReactNode\n /* 選單對齊(轉傳 DropdownMenuContent `align`)。預設 `'end'`:右上入口靠右展開(demo baseline) /\n align?: 'start' \| 'center' \| 'end'\n /* Trigger aria-label(i18n override,對齊 Avatar `badgeAriaLabel` pattern)。預設「帳號與設定」 /\n triggerAriaLabel?: string\n /* 受控展開狀態(Radix passthrough) /\n open?: boolean\n /* 預設展開(uncontrolled,Radix passthrough)。Storybook OpenSnapshot(M15 visual-audit coverable)用 /\n defaultOpen?: boolean\n /* 展開狀態變更 callback(Radix passthrough) /\n onOpenChange?: (open: boolean) => void\n /\n Trigger button 的非視覺 DOM attributes / event handlers。\n * `children`、`type`、`aria-label`、`className`、`disabled` 由 AccountMenu canonical contract\n * 擁有；分析與測試所需的 `data-`、`aria-`、事件可由此傳入。\n /\n triggerProps?: Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'children' \| 'type' \| 'aria-label' \| 'className' \| 'disabled'\n >\n}\n\n// ── AccountMenu ─────────────────────────────────────────────────────────────\n\nexport const AccountMenu = React.forwardRef<HTMLButtonElement, AccountMenuProps>(\n ({\n user,\n onViewProfile,\n onOpenSettings,\n onSignOut,\n children,\n align = 'end',\n triggerAriaLabel = '帳號與設定', // i18n-allow: spec 預設 aria-label(account-menu.spec.md),consumer 以同名 prop 覆蓋\n open,\n defaultOpen,\n onOpenChange,\n triggerProps,\n }, ref) => {\n // Dev-mode warning(對齊 ProfileCardDefaultActions dev-warn 先例):default 選單項沒接任何\n // handler = item 點了永遠沒反應;production 必接 callback 或自組 children。\n if (\n process.env.NODE_ENV !== 'production' &&\n !children &&\n !onViewProfile &&\n !onOpenSettings &&\n !onSignOut\n ) {\n // eslint-disable-next-line no-console\n console.warn(\n '[DS AccountMenu] default 選單項未接 onViewProfile/onOpenSettings/onSignOut——item 點擊無反應。請傳入 callback 或自組 children。'\n )\n }\n const avatar = user.avatar ?? {}\n return (\n <DropdownMenu open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\n <DropdownMenuTrigger asChild>\n {/ 互動感由 focus-visible ring 提供(無 hover bg,chrome 輕量 entry),不放大到 field height\n — per app-shell.spec.md「Avatar 尺寸 + 邊距」+ header-canonical.spec.md 4.5 /}\n {/ size-6 = Avatar 24 的幾何鎖:trigger 是 Radix 的 anchor box,沒鎖尺寸時 flex 預設\n align-items: stretch 會把按鈕撐高(實測 min-h-32 容器 → 96px anchor → 選單視覺間距\n 44px,遠離 elevation.spec.md 的 8px canonical)。鎖死後 anchor ≡ avatar,任何容器\n 都維持 sideOffset=8 的視覺意圖;shrink-0 防壓縮對偶。user 2026-08-04 拍板。 /}\n <button\n {...triggerProps}\n ref={ref}\n type=\"button\"\n aria-label={triggerAriaLabel}\n className=\"flex size-6 shrink-0 items-center justify-center self-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1\"\n >\n {/ 24 per header-canonical.spec.md 4.5 chrome header avatar canonical(brand + account 同尺寸); sync with --chrome-header-avatar-size /}\n <Avatar size={24} {...avatar} alt={avatar.alt ?? user.name} />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align={align}>\n {children ? (\n <>\n <DropdownMenuGroup>\n <DropdownMenuLabel>{user.name}</DropdownMenuLabel>\n </DropdownMenuGroup>\n {children}\n </>\n ) : (\n <>\n {/ Default 選單集合 = app-shell.spec.md「入口開什麼」canonical(個人資料 / 設定 / 登出,\n 登出獨立 group — 破壞性動作分區,對齊 GitHub / Gmail / Slack 帳號選單慣例) */}\n <DropdownMenuGroup>\n <DropdownMenuLabel>{user.name}</DropdownMenuLabel>\n <DropdownMenuItem startIcon={User} onSelect={onViewProfile}>\n 個人資料\n </DropdownMenuItem>\n <DropdownMenuItem startIcon={Settings} onSelect={onOpenSettings}>\n 設定\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuGroup>\n <DropdownMenuItem startIcon={LogOut} onSelect={onSignOut}>\n 登出\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </>\n )}\n </DropdownMenuContent>\n </DropdownMenu>\n )\n },\n)\nAccountMenu.displayName = 'AccountMenu'\n\n// Story auto-compile metadata — F9 public 升級(2026-07-30)\n// Phase 2 fill needed: purpose descriptions + when rationale\nexport const accountMenuMeta = {\n component: 'AccountMenu',\n family: null, // composite(trigger = chrome header 24px avatar;浮層 = DropdownMenu Family 1 消費者)\n variants: {},\n sizes: {}, // trigger avatar 24px density-fixed(header-canonical.spec.md 4.5),無 size 軸 → 兩欄留空為 intentional\n states: ['default', 'focus-visible'],\n tokens: {\n bg: [],\n fg: [],\n ring: ['--ring'], // trigger focus-visible ring canonical\n },\n} as const\n"],"names":[],"mappings":";;;;;AAgGO,MAAM,cAAc,MAAM;AAAA,EAC/B,CAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,mBAAmB;AAAA;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GACC,QAAQ;AAGT,QACE,QAAQ,IAAI,aAAa,gBACzB,CAAC,YACD,CAAC,iBACD,CAAC,kBACD,CAAC,WACD;AAEA,cAAQ;AAAA,QACN;AAAA,MAAA;AAAA,IAEJ;AACA,UAAM,SAAS,KAAK,UAAU,CAAA;AAC9B,WACE,qBAAC,cAAA,EAAa,MAAY,aAA0B,cAClD,UAAA;AAAA,MAAA,oBAAC,qBAAA,EAAoB,SAAO,MAO1B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,WAAU;AAAA,UAGV,UAAA,oBAAC,QAAA,EAAO,MAAM,IAAK,GAAG,QAAQ,KAAK,OAAO,OAAO,KAAK,KAAA,CAAM;AAAA,QAAA;AAAA,MAAA,GAEhE;AAAA,MACA,oBAAC,qBAAA,EAAoB,OAClB,UAAA,WACC,qBAAA,UAAA,EACE,UAAA;AAAA,QAAA,oBAAC,mBAAA,EACC,UAAA,oBAAC,mBAAA,EAAmB,UAAA,KAAK,MAAK,GAChC;AAAA,QACC;AAAA,MAAA,EAAA,CACH,IAEA,qBAAA,UAAA,EAGE,UAAA;AAAA,QAAA,qBAAC,mBAAA,EACC,UAAA;AAAA,UAAA,oBAAC,mBAAA,EAAmB,eAAK,KAAA,CAAK;AAAA,8BAC7B,kBAAA,EAAiB,WAAW,MAAM,UAAU,eAAe,UAAA,QAE5D;AAAA,8BACC,kBAAA,EAAiB,WAAW,UAAU,UAAU,gBAAgB,UAAA,KAAA,CAEjE;AAAA,QAAA,GACF;AAAA,QACA,oBAAC,qBACC,UAAA,oBAAC,kBAAA,EAAiB,WAAW,QAAQ,UAAU,WAAW,UAAA,KAAA,CAE1D,EAAA,CACF;AAAA,MAAA,EAAA,CACF,EAAA,CAEJ;AAAA,IAAA,GACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;AAInB,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EACV,OAAO,CAAA;AAAA;AAAA,EACP,QAAQ,CAAC,WAAW,eAAe;AAAA,EACnC,QAAQ;AAAA,IACN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAC,QAAQ;AAAA;AAAA,EAAA;AAEnB;"}

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

@@ -3,8 +3,8 @@ 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 狀態(2026-06-03 修正)──
  * idle     (default) — border-dashed border-border  bg-surface
@@ -15,10 +15,11 @@ import * as React from 'react';
  * ── variant ──
  * dropzone(預設)大拖放區 + drag;button 緊湊 Button 觸發(form-friendly,click-only)
  *
- * ── children 插槽 ──
+ * ── 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 個)。
@@ -70,11 +71,11 @@ export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     loading?: boolean;
     /** Loading 狀態的文字標題(預設「上傳中…」) */
     loadingTitle?: string;
-    /** 標題文字(預設「Click or drag file here to upload」) */
+    /** dropzone 標題文字(預設「Click or drag file here to upload」；button variant 忽略) */
     title?: string;
-    /** 說明文字(預設依 multiple:單檔「Support for a single file upload」、multiple 多檔「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 下方渲染列表。

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

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

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-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\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":"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"}
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 * 上傳後可由 `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":"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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;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,GAAG,UAAU,CAC5B;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,~~wFAuWd~~,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,GAAG,UAAU,CAC5B;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,wFAwWd,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

@@ -630,7 +630,8 @@ const FileViewer = React.forwardRef(function FileViewer2({
           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]:zoom-out-95 data-[state=open]:zoom-in-95"
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          className
         ),
         onOpenAutoFocus: (event) => {
           var _a;