@qijenchen/design-system 0.1.0-beta.85 → 0.1.0-beta.86

package/dist/components/Field/use-form-validation.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-form-validation.js","sources":["../../../src/components/Field/use-form-validation.ts"],"sourcesContent":["/**\n * useFormValidation — form-validation.spec.md 方法論的可執行層(SSOT executable arm)\n *\n * ── 定位 ──\n * 把 `form-validation.spec.md` 的 9 條驗證方法論編成**不可配置的預設**——consumer 拿到就是\n * canonical 行為,沒有 API 可以違反(M17「SSOT 必可傳播」:方法論從 prose 變 executable)。\n *\n * ── 實作基礎 ──\n * 基於 react-hook-form(direct dependency,完全 wrapped 不外露——對齊 DS「基於 X」引擎慣例:\n * DataTable 基於 TanStack / DatePicker 基於 react-day-picker / Toast 基於 sonner)。\n * Consumer 不 install、不 import、看不到 RHF API。RHF 提供 values state / dirty 深比對 /\n * errors store / resetField;驗證「時機」由本 hook own(RHF 的 mode/reValidateMode 不外露)。\n *\n * ── 與 Field 家族的關係(engine-agnostic 分層,field.spec.md「定位」段)──\n * Field 保持純 layout + context(MUI FormControl 派,可用於 cell / display / 無引擎場景);\n * 本 hook 住 form 層,錯誤經 consumer 一行 `<Field invalid={!!form.errors.x}>` 接入——\n * Field 層零耦合。這是「A 派的自由 + B 派的 DX」混合位置。\n *\n * ── 方法論對應(form-validation.spec.md 規則 1-9)──\n * 1 Focus 中不顯示錯誤     → 驗證只在 blur / submit 跑(無 onChange 驗證路徑)\n * 2 Blur 時驗證            → getInputProps().onBlur 跑 validate[name]\n * 3 Enter 等同 blur        → form 內 Enter 觸發 submit(全驗,超集);單行控件原生行為\n * 4 Escape 取消回復原值    → getInputProps().onKeyDown Escape → resetField + 清 error\n * 5 開始編輯立即清除 error → onChange 先清 errors[name](不論新值合法與否)\n * 6 Blur 重新驗證          → 同 2(離開時重判)\n * 7 Submit 驗證全部        → handleSubmit 對所有 validate keys 全跑(不依賴 blur 狀態)\n * 8 Anchor 到第一個錯誤    → focus + scrollIntoView({block:'center'});每次 submit 重算\n * 9 Async / 跨欄位 defer 到 submit → onSubmit 回傳 field-keyed errors → 同 8 anchor\n * + Submit button:Create 永遠 enabled / Update disabled-until-dirty → `submitDisabled`\n * + Double-submit 防護(2026-07-05 D4):await onSubmit 期間重入直接忽略;`isSubmitting`\n *   暴露餵 Button loading / disabled;onSubmit reject 先復位再原樣上拋(不吞錯)\n *\n * ── v1 邊界(spec「可執行層」段 documented)──\n * - getInputProps 支援 value/onChange 型控件(Input / Textarea / NumberInput / Select /\n *   Combobox / DatePicker / TimePicker;onChange 收 event 或裸值皆可)。Checkbox / Switch\n *   (onCheckedChange)consumer 自接 setFieldValue。\n * - focus-first-error 以 DOM `name` 屬性定位(native input 生效;非 native 控件 fallback\n *   scroll 略過,errors 視覺仍由 Field 紅框 + FieldError 呈現)。\n */\nimport * as React from 'react'\nimport { useForm } from 'react-hook-form'\nimport type { FieldValues, Path, PathValue, DefaultValues } from 'react-hook-form'\n\nexport interface UseFormValidationOptions<T extends FieldValues> {\n  /** 表單初始值(Update 場景 = 現有資料;dirty 比對基準) */\n  initialValues: T\n  /**\n   * 表單意圖,驅動 submit button 狀態(form-validation.spec.md「Submit Button 狀態」):\n   * - 'create'(default):submitDisabled 永遠 false(不讓使用者猜「為什麼按不了」)\n   * - 'update':submitDisabled = !isDirty(沒改就不用存;變更還原回 pristine 即再 disabled)\n   */\n  intent?: 'create' | 'update'\n  /**\n   * 格式驗證(blur 層,規則 2):single-field 純 syntax(email 格式 / 必填 / URL)。\n   * 回傳 error 訊息字串 = 不合法;undefined = 合法。\n   * 業務 / async / 跨欄位驗證**不要**放這裡——放 onSubmit 回傳(規則 9)。\n   */\n  validate?: Partial<Record<keyof T, (value: T[keyof T], values: T) => string | undefined>>\n  /**\n   * Submit handler(格式驗證全過後呼叫)。業務驗證(名稱重複 API / 跨欄位)在此判斷,\n   * 回傳 field-keyed error object(如 `{ name: '名稱已存在' }`)→ hook 自動 setError +\n   * anchor 到第一個錯誤(規則 9);回傳 undefined = 成功。\n   */\n  onSubmit: (values: T) => void | Partial<Record<keyof T, string>> | Promise<void | Partial<Record<keyof T, string>>>\n}\n\nexport interface FormFieldInputProps<V = unknown> {\n  name: string\n  value: V\n  onChange: (eventOrValue: unknown) => void\n  onBlur: () => void\n  onKeyDown: (e: React.KeyboardEvent) => void\n}\n\nexport interface UseFormValidationReturn<T extends FieldValues> {\n  /** 當前表單值(即時) */\n  values: T\n  /** field-keyed 錯誤訊息(餵 `<Field invalid>` + `<FieldError>`) */\n  errors: Partial<Record<keyof T, string>>\n  /** 任一欄位偏離 initialValues(深比對,還原回原值 = false) */\n  isDirty: boolean\n  /** Submit button disabled 狀態(intent 驅動,見 options.intent;submit 進行中一併 disabled) */\n  submitDisabled: boolean\n  /** Submit 進行中(await onSubmit 期間 true)— 餵 Button loading;double-submit 防護的 state 面 */\n  isSubmitting: boolean\n  /** Spread 到 value/onChange 型控件:`<Input {...form.getInputProps('name')} />` */\n  getInputProps: <K extends keyof T & string>(name: K) => FormFieldInputProps<T[K]>\n  /** 接 `<form onSubmit={form.handleSubmit}>`(規則 7/8/9) */\n  handleSubmit: (e?: React.FormEvent) => Promise<void>\n  /** 整表重置回 initialValues(清 errors + dirty) */\n  reset: () => void\n  /** Escape hatch:非 value/onChange 控件(Checkbox/Switch)手動寫值 */\n  setFieldValue: (name: keyof T & string, value: unknown) => void\n}\n\n/** onChange 收 event 或裸值皆可(對齊 Mantine getInputProps idiom):\n *  native input event → e.target.value;自訂控件裸值(string / number / Date / array)→ 原樣。 */\nfunction extractValue(eventOrValue: unknown): unknown {\n  if (\n    eventOrValue &&\n    typeof eventOrValue === 'object' &&\n    'target' in eventOrValue &&\n    eventOrValue.target &&\n    typeof eventOrValue.target === 'object' &&\n    'value' in (eventOrValue.target as object)\n  ) {\n    return (eventOrValue.target as HTMLInputElement).value\n  }\n  return eventOrValue\n}\n\n/** 規則 8:focus + scroll 到第一個錯誤欄位。以 DOM name 屬性定位(native input);\n *  找不到(非 native 控件)→ 靜默略過,error 視覺仍由 Field 紅框呈現。 */\nfunction focusFirstError(errorNames: string[]) {\n  // 2026-07-07 修(deep-audit A.1b 殘項):「第一個錯誤」以 DOM 順序為準(= 使用者看到的視覺第一),\n  // 非 validate key 宣告順序 — spec 規則 8 自然語意;對齊瀏覽器原生 reportValidity(DOM 序 focus\n  // 首個 invalid)+ react-hook-form shouldFocusError。\n  const els = errorNames\n    .map((name) => document.getElementsByName(name)[0] as HTMLElement | undefined)\n    .filter((el): el is HTMLElement => Boolean(el))\n    .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1))\n  const el = els[0]\n  if (el) {\n    el.focus()\n    el.scrollIntoView({ block: 'center', behavior: 'smooth' })\n  }\n}\n\n// code-quality-allow: long-function — 單一 validation 生命週期 state machine(blur 驗證/edit 清 error/Escape 回復/submit 聚焦首錯)拆散會把耦合狀態跨函式傳遞,降低可讀性;對齊 react-hook-form useForm 本體同級長度\nexport function useFormValidation<T extends FieldValues>(\n  options: UseFormValidationOptions<T>,\n): UseFormValidationReturn<T> {\n  const { initialValues, intent = 'create', validate, onSubmit } = options\n\n  // RHF 引擎(wrapped):驗證時機由本 hook own,故 RHF 自身 mode 鎖 onSubmit 且不掛 resolver\n  // (所有 setError/clearErrors 走手動,RHF 只當 state + dirty + errors store)。\n  const form = useForm<T>({\n    defaultValues: initialValues as DefaultValues<T>,\n    mode: 'onSubmit',\n    shouldFocusError: false, // 規則 8 自己 focus(RHF 依賴 register ref,本 hook 不走 register)\n  })\n\n  // 訂閱全表(表單尺度 re-render 可接受;formState.isDirty 深比對 vs defaultValues)\n  const values = form.watch()\n  const { errors: rhfErrors, isDirty } = form.formState\n\n  const errors = React.useMemo(() => {\n    const out: Partial<Record<keyof T, string>> = {}\n    for (const key of Object.keys(rhfErrors)) {\n      const msg = (rhfErrors as Record<string, { message?: string } | undefined>)[key]?.message\n      if (msg) out[key as keyof T] = msg\n    }\n    return out\n  }, [rhfErrors])\n\n  /** 規則 2/6:blur 驗證單一欄位 */\n  const validateField = React.useCallback(\n    (name: keyof T & string) => {\n      const fn = validate?.[name]\n      if (!fn) return\n      const current = form.getValues()\n      const message = fn(current[name], current)\n      if (message) form.setError(name as Path<T>, { type: 'format', message })\n      else form.clearErrors(name as Path<T>)\n    },\n    [form, validate],\n  )\n\n  const getInputProps = React.useCallback(\n    <K extends keyof T & string>(name: K): FormFieldInputProps<T[K]> => {\n      // 泛型 K 窄化到 Path<T> 需經 unknown(RHF Path 是 template-literal type,K 不直接 overlap)\n      const path = name as unknown as Path<T>\n      return {\n        name,\n        value: form.watch(path) as T[K],\n        onChange: (eventOrValue: unknown) => {\n          // 規則 5:開始編輯立即清除 error(不論新值合法與否,給修正空間)\n          if (form.getFieldState(path).error) form.clearErrors(path)\n          form.setValue(path, extractValue(eventOrValue) as PathValue<T, Path<T>>, {\n            shouldDirty: true,\n          })\n        },\n        // 規則 2:blur 驗證(focus 中永不驗 = 規則 1 自然成立)\n        onBlur: () => validateField(name),\n        // 規則 4:Escape 回復原值,不觸發驗證\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (e.key === 'Escape') {\n            form.resetField(path)\n            form.clearErrors(path)\n          }\n        },\n      }\n    },\n    [form, validateField],\n  )\n\n  // 2026-07-05 D4 double-submit 防護:連點 submit / 連按 Enter 在 await onSubmit(規則 9\n  // async 業務驗證)期間會並發呼叫 onSubmit(重複建立資源的經典事故)。ref 同步擋重入\n  // (state 有 render 延遲,擋不住同 tick 連點);state 暴露 isSubmitting 餵 Button\n  // loading / disabled。對齊 RHF formState.isSubmitting / Polaris / Mantine form submitting。\n  const isSubmittingRef = React.useRef(false)\n  const [isSubmitting, setIsSubmitting] = React.useState(false)\n\n  /** 規則 7/8/9:submit 全驗 + anchor 第一個錯誤 + 業務錯誤同軌 */\n  const handleSubmit = React.useCallback(\n    async (e?: React.FormEvent) => {\n      e?.preventDefault()\n      if (isSubmittingRef.current) return // double-submit guard(見上方 comment)\n      const current = form.getValues()\n      // 規則 7:對所有 validate keys 全跑(不依賴個別 blur 狀態);每次 submit 重算(規則 8)\n      const formatErrors: string[] = []\n      if (validate) {\n        for (const name of Object.keys(validate)) {\n          const fn = validate[name as keyof T]\n          if (!fn) continue\n          const message = fn(current[name as keyof T], current)\n          if (message) {\n            form.setError(name as Path<T>, { type: 'format', message })\n            formatErrors.push(name)\n          } else {\n            form.clearErrors(name as Path<T>)\n          }\n        }\n      }\n      if (formatErrors.length > 0) {\n        focusFirstError(formatErrors)\n        return\n      }\n      // 規則 9:業務 / async / 跨欄位驗證 defer 到 submit(onSubmit 回傳 field-keyed errors)\n      // try/finally(2026-07-05 D4):onSubmit reject 先復位 isSubmitting 再讓 rejection 原樣\n      // 上拋(不吞錯,對齊 RHF handleSubmit re-throw canonical)— 表單回到可重送狀態而非卡死。\n      isSubmittingRef.current = true\n      setIsSubmitting(true)\n      try {\n        const businessErrors = await onSubmit(current)\n        if (businessErrors && typeof businessErrors === 'object') {\n          const names = Object.keys(businessErrors).filter(\n            (k) => businessErrors[k as keyof T] != null,\n          )\n          for (const name of names) {\n            form.setError(name as Path<T>, {\n              type: 'business',\n              message: businessErrors[name as keyof T] as string,\n            })\n          }\n          if (names.length > 0) focusFirstError(names)\n        }\n      } finally {\n        isSubmittingRef.current = false\n        setIsSubmitting(false)\n      }\n    },\n    [form, validate, onSubmit],\n  )\n\n  return {\n    values,\n    errors,\n    isDirty,\n    // Submit Button 狀態 canonical:Create 永遠 enabled / Update disabled-until-dirty;\n    // submit 進行中一律 disabled(double-submit 防護的 UI 面,2026-07-05 D4)\n    submitDisabled: (intent === 'update' ? !isDirty : false) || isSubmitting,\n    isSubmitting,\n    getInputProps,\n    handleSubmit,\n    reset: () => form.reset(),\n    setFieldValue: (name, value) =>\n      form.setValue(name as Path<T>, value as PathValue<T, Path<T>>, { shouldDirty: true }),\n  }\n}\n"],"names":["el"],"mappings":"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"}
+{"version":3,"file":"use-form-validation.js","sources":["../../../src/components/Field/use-form-validation.ts"],"sourcesContent":["/**\n * useFormValidation — form-validation.spec.md 方法論的可執行層(SSOT executable arm)\n *\n * ── 定位 ──\n * 把 `form-validation.spec.md` 的 9 條驗證方法論編成**不可配置的預設**——consumer 拿到就是\n * canonical 行為,沒有 API 可以違反(M17「SSOT 必可傳播」:方法論從 prose 變 executable)。\n *\n * ── 實作基礎 ──\n * 基於 react-hook-form(direct dependency,完全 wrapped 不外露——對齊 DS「基於 X」引擎慣例:\n * DataTable 基於 TanStack / DatePicker 基於 react-day-picker / Toast 基於 sonner)。\n * Consumer 不 install、不 import、看不到 RHF API。RHF 提供 values state / dirty 深比對 /\n * errors store / resetField;驗證「時機」由本 hook own(RHF 的 mode/reValidateMode 不外露)。\n *\n * ── 與 Field 家族的關係(engine-agnostic 分層,field.spec.md「定位」段)──\n * Field 保持純 layout + context(MUI FormControl 派,可用於 cell / view / 無引擎場景);\n * 本 hook 住 form 層,錯誤經 consumer 一行 `<Field invalid={!!form.errors.x}>` 接入——\n * Field 層零耦合。這是「A 派的自由 + B 派的 DX」混合位置。\n *\n * ── 方法論對應(form-validation.spec.md 規則 1-9)──\n * 1 Focus 中不顯示錯誤     → 驗證只在 blur / submit 跑(無 onChange 驗證路徑)\n * 2 Blur 時驗證            → getInputProps().onBlur 跑 validate[name]\n * 3 Enter 等同 blur        → form 內 Enter 觸發 submit(全驗,超集);單行控件原生行為\n * 4 Escape 取消回復原值    → getInputProps().onKeyDown Escape → resetField + 清 error\n * 5 開始編輯立即清除 error → onChange 先清 errors[name](不論新值合法與否)\n * 6 Blur 重新驗證          → 同 2(離開時重判)\n * 7 Submit 驗證全部        → handleSubmit 對所有 validate keys 全跑(不依賴 blur 狀態)\n * 8 Anchor 到第一個錯誤    → focus + scrollIntoView({block:'center'});每次 submit 重算\n * 9 Async / 跨欄位 defer 到 submit → onSubmit 回傳 field-keyed errors → 同 8 anchor\n * + Submit button:Create 永遠 enabled / Update disabled-until-dirty → `submitDisabled`\n * + Double-submit 防護(2026-07-05 D4):await onSubmit 期間重入直接忽略;`isSubmitting`\n *   暴露餵 Button loading / disabled;onSubmit reject 先復位再原樣上拋(不吞錯)\n *\n * ── v1 邊界(spec「可執行層」段 documented)──\n * - getInputProps 支援 value/onChange 型控件(Input / Textarea / NumberInput / Select /\n *   Combobox / DatePicker / TimePicker;onChange 收 event 或裸值皆可)。Checkbox / Switch\n *   (onCheckedChange)consumer 自接 setFieldValue。\n * - focus-first-error 以 DOM `name` 屬性定位(native input 生效;非 native 控件 fallback\n *   scroll 略過,errors 視覺仍由 Field 紅框 + FieldError 呈現)。\n */\nimport * as React from 'react'\nimport { useForm } from 'react-hook-form'\nimport type { FieldValues, Path, PathValue, DefaultValues } from 'react-hook-form'\n\nexport interface UseFormValidationOptions<T extends FieldValues> {\n  /** 表單初始值(Update 場景 = 現有資料;dirty 比對基準) */\n  initialValues: T\n  /**\n   * 表單意圖,驅動 submit button 狀態(form-validation.spec.md「Submit Button 狀態」):\n   * - 'create'(default):submitDisabled 永遠 false(不讓使用者猜「為什麼按不了」)\n   * - 'update':submitDisabled = !isDirty(沒改就不用存;變更還原回 pristine 即再 disabled)\n   */\n  intent?: 'create' | 'update'\n  /**\n   * 格式驗證(blur 層,規則 2):single-field 純 syntax(email 格式 / 必填 / URL)。\n   * 回傳 error 訊息字串 = 不合法;undefined = 合法。\n   * 業務 / async / 跨欄位驗證**不要**放這裡——放 onSubmit 回傳(規則 9)。\n   */\n  validate?: Partial<Record<keyof T, (value: T[keyof T], values: T) => string | undefined>>\n  /**\n   * Submit handler(格式驗證全過後呼叫)。業務驗證(名稱重複 API / 跨欄位)在此判斷,\n   * 回傳 field-keyed error object(如 `{ name: '名稱已存在' }`)→ hook 自動 setError +\n   * anchor 到第一個錯誤(規則 9);回傳 undefined = 成功。\n   */\n  onSubmit: (values: T) => void | Partial<Record<keyof T, string>> | Promise<void | Partial<Record<keyof T, string>>>\n}\n\nexport interface FormFieldInputProps<V = unknown> {\n  name: string\n  value: V\n  onChange: (eventOrValue: unknown) => void\n  onBlur: () => void\n  onKeyDown: (e: React.KeyboardEvent) => void\n}\n\nexport interface UseFormValidationReturn<T extends FieldValues> {\n  /** 當前表單值(即時) */\n  values: T\n  /** field-keyed 錯誤訊息(餵 `<Field invalid>` + `<FieldError>`) */\n  errors: Partial<Record<keyof T, string>>\n  /** 任一欄位偏離 initialValues(深比對,還原回原值 = false) */\n  isDirty: boolean\n  /** Submit button disabled 狀態(intent 驅動,見 options.intent;submit 進行中一併 disabled) */\n  submitDisabled: boolean\n  /** Submit 進行中(await onSubmit 期間 true)— 餵 Button loading;double-submit 防護的 state 面 */\n  isSubmitting: boolean\n  /** Spread 到 value/onChange 型控件:`<Input {...form.getInputProps('name')} />` */\n  getInputProps: <K extends keyof T & string>(name: K) => FormFieldInputProps<T[K]>\n  /** 接 `<form onSubmit={form.handleSubmit}>`(規則 7/8/9) */\n  handleSubmit: (e?: React.FormEvent) => Promise<void>\n  /** 整表重置回 initialValues(清 errors + dirty) */\n  reset: () => void\n  /** Escape hatch:非 value/onChange 控件(Checkbox/Switch)手動寫值 */\n  setFieldValue: (name: keyof T & string, value: unknown) => void\n}\n\n/** onChange 收 event 或裸值皆可(對齊 Mantine getInputProps idiom):\n *  native input event → e.target.value;自訂控件裸值(string / number / Date / array)→ 原樣。 */\nfunction extractValue(eventOrValue: unknown): unknown {\n  if (\n    eventOrValue &&\n    typeof eventOrValue === 'object' &&\n    'target' in eventOrValue &&\n    eventOrValue.target &&\n    typeof eventOrValue.target === 'object' &&\n    'value' in (eventOrValue.target as object)\n  ) {\n    return (eventOrValue.target as HTMLInputElement).value\n  }\n  return eventOrValue\n}\n\n/** 規則 8:focus + scroll 到第一個錯誤欄位。以 DOM name 屬性定位(native input);\n *  找不到(非 native 控件)→ 靜默略過,error 視覺仍由 Field 紅框呈現。 */\nfunction focusFirstError(errorNames: string[]) {\n  // 2026-07-07 修(deep-audit A.1b 殘項):「第一個錯誤」以 DOM 順序為準(= 使用者看到的視覺第一),\n  // 非 validate key 宣告順序 — spec 規則 8 自然語意;對齊瀏覽器原生 reportValidity(DOM 序 focus\n  // 首個 invalid)+ react-hook-form shouldFocusError。\n  const els = errorNames\n    .map((name) => document.getElementsByName(name)[0] as HTMLElement | undefined)\n    .filter((el): el is HTMLElement => Boolean(el))\n    .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1))\n  const el = els[0]\n  if (el) {\n    el.focus()\n    el.scrollIntoView({ block: 'center', behavior: 'smooth' })\n  }\n}\n\n// code-quality-allow: long-function — 單一 validation 生命週期 state machine(blur 驗證/edit 清 error/Escape 回復/submit 聚焦首錯)拆散會把耦合狀態跨函式傳遞,降低可讀性;對齊 react-hook-form useForm 本體同級長度\nexport function useFormValidation<T extends FieldValues>(\n  options: UseFormValidationOptions<T>,\n): UseFormValidationReturn<T> {\n  const { initialValues, intent = 'create', validate, onSubmit } = options\n\n  // RHF 引擎(wrapped):驗證時機由本 hook own,故 RHF 自身 mode 鎖 onSubmit 且不掛 resolver\n  // (所有 setError/clearErrors 走手動,RHF 只當 state + dirty + errors store)。\n  const form = useForm<T>({\n    defaultValues: initialValues as DefaultValues<T>,\n    mode: 'onSubmit',\n    shouldFocusError: false, // 規則 8 自己 focus(RHF 依賴 register ref,本 hook 不走 register)\n  })\n\n  // 訂閱全表(表單尺度 re-render 可接受;formState.isDirty 深比對 vs defaultValues)\n  const values = form.watch()\n  const { errors: rhfErrors, isDirty } = form.formState\n\n  const errors = React.useMemo(() => {\n    const out: Partial<Record<keyof T, string>> = {}\n    for (const key of Object.keys(rhfErrors)) {\n      const msg = (rhfErrors as Record<string, { message?: string } | undefined>)[key]?.message\n      if (msg) out[key as keyof T] = msg\n    }\n    return out\n  }, [rhfErrors])\n\n  /** 規則 2/6:blur 驗證單一欄位 */\n  const validateField = React.useCallback(\n    (name: keyof T & string) => {\n      const fn = validate?.[name]\n      if (!fn) return\n      const current = form.getValues()\n      const message = fn(current[name], current)\n      if (message) form.setError(name as Path<T>, { type: 'format', message })\n      else form.clearErrors(name as Path<T>)\n    },\n    [form, validate],\n  )\n\n  const getInputProps = React.useCallback(\n    <K extends keyof T & string>(name: K): FormFieldInputProps<T[K]> => {\n      // 泛型 K 窄化到 Path<T> 需經 unknown(RHF Path 是 template-literal type,K 不直接 overlap)\n      const path = name as unknown as Path<T>\n      return {\n        name,\n        value: form.watch(path) as T[K],\n        onChange: (eventOrValue: unknown) => {\n          // 規則 5:開始編輯立即清除 error(不論新值合法與否,給修正空間)\n          if (form.getFieldState(path).error) form.clearErrors(path)\n          form.setValue(path, extractValue(eventOrValue) as PathValue<T, Path<T>>, {\n            shouldDirty: true,\n          })\n        },\n        // 規則 2:blur 驗證(focus 中永不驗 = 規則 1 自然成立)\n        onBlur: () => validateField(name),\n        // 規則 4:Escape 回復原值,不觸發驗證\n        onKeyDown: (e: React.KeyboardEvent) => {\n          if (e.key === 'Escape') {\n            form.resetField(path)\n            form.clearErrors(path)\n          }\n        },\n      }\n    },\n    [form, validateField],\n  )\n\n  // 2026-07-05 D4 double-submit 防護:連點 submit / 連按 Enter 在 await onSubmit(規則 9\n  // async 業務驗證)期間會並發呼叫 onSubmit(重複建立資源的經典事故)。ref 同步擋重入\n  // (state 有 render 延遲,擋不住同 tick 連點);state 暴露 isSubmitting 餵 Button\n  // loading / disabled。對齊 RHF formState.isSubmitting / Polaris / Mantine form submitting。\n  const isSubmittingRef = React.useRef(false)\n  const [isSubmitting, setIsSubmitting] = React.useState(false)\n\n  /** 規則 7/8/9:submit 全驗 + anchor 第一個錯誤 + 業務錯誤同軌 */\n  const handleSubmit = React.useCallback(\n    async (e?: React.FormEvent) => {\n      e?.preventDefault()\n      if (isSubmittingRef.current) return // double-submit guard(見上方 comment)\n      const current = form.getValues()\n      // 規則 7:對所有 validate keys 全跑(不依賴個別 blur 狀態);每次 submit 重算(規則 8)\n      const formatErrors: string[] = []\n      if (validate) {\n        for (const name of Object.keys(validate)) {\n          const fn = validate[name as keyof T]\n          if (!fn) continue\n          const message = fn(current[name as keyof T], current)\n          if (message) {\n            form.setError(name as Path<T>, { type: 'format', message })\n            formatErrors.push(name)\n          } else {\n            form.clearErrors(name as Path<T>)\n          }\n        }\n      }\n      if (formatErrors.length > 0) {\n        focusFirstError(formatErrors)\n        return\n      }\n      // 規則 9:業務 / async / 跨欄位驗證 defer 到 submit(onSubmit 回傳 field-keyed errors)\n      // try/finally(2026-07-05 D4):onSubmit reject 先復位 isSubmitting 再讓 rejection 原樣\n      // 上拋(不吞錯,對齊 RHF handleSubmit re-throw canonical)— 表單回到可重送狀態而非卡死。\n      isSubmittingRef.current = true\n      setIsSubmitting(true)\n      try {\n        const businessErrors = await onSubmit(current)\n        if (businessErrors && typeof businessErrors === 'object') {\n          const names = Object.keys(businessErrors).filter(\n            (k) => businessErrors[k as keyof T] != null,\n          )\n          for (const name of names) {\n            form.setError(name as Path<T>, {\n              type: 'business',\n              message: businessErrors[name as keyof T] as string,\n            })\n          }\n          if (names.length > 0) focusFirstError(names)\n        }\n      } finally {\n        isSubmittingRef.current = false\n        setIsSubmitting(false)\n      }\n    },\n    [form, validate, onSubmit],\n  )\n\n  return {\n    values,\n    errors,\n    isDirty,\n    // Submit Button 狀態 canonical:Create 永遠 enabled / Update disabled-until-dirty;\n    // submit 進行中一律 disabled(double-submit 防護的 UI 面,2026-07-05 D4)\n    submitDisabled: (intent === 'update' ? !isDirty : false) || isSubmitting,\n    isSubmitting,\n    getInputProps,\n    handleSubmit,\n    reset: () => form.reset(),\n    setFieldValue: (name, value) =>\n      form.setValue(name as Path<T>, value as PathValue<T, Path<T>>, { shouldDirty: true }),\n  }\n}\n"],"names":["el"],"mappings":";;AAiGA,SAAS,aAAa,cAAgC;AACpD,MACE,gBACA,OAAO,iBAAiB,YACxB,YAAY,gBACZ,aAAa,UACb,OAAO,aAAa,WAAW,YAC/B,WAAY,aAAa,QACzB;AACA,WAAQ,aAAa,OAA4B;AAAA,EACnD;AACA,SAAO;AACT;AAIA,SAAS,gBAAgB,YAAsB;AAI7C,QAAM,MAAM,WACT,IAAI,CAAC,SAAS,SAAS,kBAAkB,IAAI,EAAE,CAAC,CAA4B,EAC5E,OAAO,CAACA,QAA0B,QAAQA,GAAE,CAAC,EAC7C,KAAK,CAAC,GAAG,MAAO,EAAE,wBAAwB,CAAC,IAAI,KAAK,8BAA8B,KAAK,CAAE;AAC5F,QAAM,KAAK,IAAI,CAAC;AAChB,MAAI,IAAI;AACN,OAAG,MAAA;AACH,OAAG,eAAe,EAAE,OAAO,UAAU,UAAU,UAAU;AAAA,EAC3D;AACF;AAGO,SAAS,kBACd,SAC4B;AAC5B,QAAM,EAAE,eAAe,SAAS,UAAU,UAAU,aAAa;AAIjE,QAAM,OAAO,QAAW;AAAA,IACtB,eAAe;AAAA,IACf,MAAM;AAAA,IACN,kBAAkB;AAAA;AAAA,EAAA,CACnB;AAGD,QAAM,SAAS,KAAK,MAAA;AACpB,QAAM,EAAE,QAAQ,WAAW,QAAA,IAAY,KAAK;AAE5C,QAAM,SAAS,MAAM,QAAQ,MAAM;;AACjC,UAAM,MAAwC,CAAA;AAC9C,eAAW,OAAO,OAAO,KAAK,SAAS,GAAG;AACxC,YAAM,OAAO,eAA+D,GAAG,MAAlE,mBAAqE;AAClF,UAAI,IAAK,KAAI,GAAc,IAAI;AAAA,IACjC;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,CAAC;AAGd,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAAC,SAA2B;AAC1B,YAAM,KAAK,qCAAW;AACtB,UAAI,CAAC,GAAI;AACT,YAAM,UAAU,KAAK,UAAA;AACrB,YAAM,UAAU,GAAG,QAAQ,IAAI,GAAG,OAAO;AACzC,UAAI,cAAc,SAAS,MAAiB,EAAE,MAAM,UAAU,SAAS;AAAA,UAClE,MAAK,YAAY,IAAe;AAAA,IACvC;AAAA,IACA,CAAC,MAAM,QAAQ;AAAA,EAAA;AAGjB,QAAM,gBAAgB,MAAM;AAAA,IAC1B,CAA6B,SAAuC;AAElE,YAAM,OAAO;AACb,aAAO;AAAA,QACL;AAAA,QACA,OAAO,KAAK,MAAM,IAAI;AAAA,QACtB,UAAU,CAAC,iBAA0B;AAEnC,cAAI,KAAK,cAAc,IAAI,EAAE,MAAO,MAAK,YAAY,IAAI;AACzD,eAAK,SAAS,MAAM,aAAa,YAAY,GAA4B;AAAA,YACvE,aAAa;AAAA,UAAA,CACd;AAAA,QACH;AAAA;AAAA,QAEA,QAAQ,MAAM,cAAc,IAAI;AAAA;AAAA,QAEhC,WAAW,CAAC,MAA2B;AACrC,cAAI,EAAE,QAAQ,UAAU;AACtB,iBAAK,WAAW,IAAI;AACpB,iBAAK,YAAY,IAAI;AAAA,UACvB;AAAA,QACF;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,CAAC,MAAM,aAAa;AAAA,EAAA;AAOtB,QAAM,kBAAkB,MAAM,OAAO,KAAK;AAC1C,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAG5D,QAAM,eAAe,MAAM;AAAA,IACzB,OAAO,MAAwB;AAC7B,6BAAG;AACH,UAAI,gBAAgB,QAAS;AAC7B,YAAM,UAAU,KAAK,UAAA;AAErB,YAAM,eAAyB,CAAA;AAC/B,UAAI,UAAU;AACZ,mBAAW,QAAQ,OAAO,KAAK,QAAQ,GAAG;AACxC,gBAAM,KAAK,SAAS,IAAe;AACnC,cAAI,CAAC,GAAI;AACT,gBAAM,UAAU,GAAG,QAAQ,IAAe,GAAG,OAAO;AACpD,cAAI,SAAS;AACX,iBAAK,SAAS,MAAiB,EAAE,MAAM,UAAU,SAAS;AAC1D,yBAAa,KAAK,IAAI;AAAA,UACxB,OAAO;AACL,iBAAK,YAAY,IAAe;AAAA,UAClC;AAAA,QACF;AAAA,MACF;AACA,UAAI,aAAa,SAAS,GAAG;AAC3B,wBAAgB,YAAY;AAC5B;AAAA,MACF;AAIA,sBAAgB,UAAU;AAC1B,sBAAgB,IAAI;AACpB,UAAI;AACF,cAAM,iBAAiB,MAAM,SAAS,OAAO;AAC7C,YAAI,kBAAkB,OAAO,mBAAmB,UAAU;AACxD,gBAAM,QAAQ,OAAO,KAAK,cAAc,EAAE;AAAA,YACxC,CAAC,MAAM,eAAe,CAAY,KAAK;AAAA,UAAA;AAEzC,qBAAW,QAAQ,OAAO;AACxB,iBAAK,SAAS,MAAiB;AAAA,cAC7B,MAAM;AAAA,cACN,SAAS,eAAe,IAAe;AAAA,YAAA,CACxC;AAAA,UACH;AACA,cAAI,MAAM,SAAS,EAAG,iBAAgB,KAAK;AAAA,QAC7C;AAAA,MACF,UAAA;AACE,wBAAgB,UAAU;AAC1B,wBAAgB,KAAK;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,MAAM,UAAU,QAAQ;AAAA,EAAA;AAG3B,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA,iBAAiB,WAAW,WAAW,CAAC,UAAU,UAAU;AAAA,IAC5D;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO,MAAM,KAAK,MAAA;AAAA,IAClB,eAAe,CAAC,MAAM,UACpB,KAAK,SAAS,MAAiB,OAAgC,EAAE,aAAa,KAAA,CAAM;AAAA,EAAA;AAE1F;"}

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

@@ -1 +1 @@
-{"version":3,"file":"file-item.d.ts","sourceRoot":"","sources":["../../../src/components/FileItem/file-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA6C9B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAA;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAGD,QAAA,MAAM,QAAQ,sFAgPb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"file-item.d.ts","sourceRoot":"","sources":["../../../src/components/FileItem/file-item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AA6C9B,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACxF,IAAI,EAAE,MAAM,CAAA;IACZ;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,gBAAgB,CAAA;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,WAAW,GAAG,OAAO,CAAA;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mGAAmG;IACnG,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAGD,QAAA,MAAM,QAAQ,sFAkPb,CAAA;AAKD,eAAO,MAAM,YAAY;;;;;;;;;;;CAef,CAAA;AAEV,OAAO,EAAE,QAAQ,EAAE,CAAA"}

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

@@ -5,7 +5,7 @@ import { cn } from "../../lib/utils.js";
 import { Avatar } from "../Avatar/avatar.js";
 import { Button } from "../Button/button.js";
 import { ProgressBar } from "../ProgressBar/progress-bar.js";
-import { ItemPrefix, ItemContent } from "../../patterns/element-anatomy/item-anatomy.js";
+import { ItemSuffix, ItemPrefix, ItemContent } from "../../patterns/element-anatomy/item-anatomy.js";
 const STATUS_ICON = {
   completed: { icon: CircleCheck, color: "text-success" },
   error: { icon: XCircle, color: "text-error" }
@@ -48,7 +48,6 @@ const FileItem = React.forwardRef(
         "aria-label": `${name} 上傳進度`
       }
     ) : null;
-    const suffixAlign = "h-[1lh]";
     const slotHw = "var(--field-height-xs)";
     const hoverAction = status === "completed" && onDownload ? { icon: Download, onClick: onDownload, label: `下載 ${name}` } : status === "error" && onRetry ? { icon: RotateCw, onClick: onRetry, label: `重試 ${name}` } : null;
     const statusSlot = statusConfig ? /* @__PURE__ */ jsxs(
@@ -90,11 +89,9 @@ const FileItem = React.forwardRef(
       }
     ) : null;
     const suffix = /* @__PURE__ */ jsxs(
-      "div",
+      ItemSuffix,
       {
         className: cn(
-          "flex items-center gap-2 shrink-0",
-          suffixAlign,
           // data-unbounded chrome-canonical trick:let Button xs (24) live inside h-[1lh]
           // wrapper(compact ~18.2 / rich ~18.2 scanning)without pushing row height。
           // 視覺/hit area 仍 24,layout footprint 收斂到 1lh。同 overlay-surface

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

@@ -1 +1 @@
-{"version":3,"file":"file-item.js","sources":["../../../src/components/FileItem/file-item.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { Paperclip, CircleCheck, XCircle, Download, RotateCw } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ProgressBar } from '@/design-system/components/ProgressBar/progress-bar'\nimport { ItemContent, ItemPrefix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * FileItem — 檔案顯示 / 上傳進度\n *\n * Typography: 兩 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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"}
+{"version":3,"file":"file-item.js","sources":["../../../src/components/FileItem/file-item.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { Paperclip, CircleCheck, XCircle, Download, RotateCw } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar } from '@/design-system/components/Avatar/avatar'\nimport { Button } from '@/design-system/components/Button/button'\nimport { ProgressBar } from '@/design-system/components/ProgressBar/progress-bar'\nimport { ItemContent, ItemPrefix, ItemSuffix } from '@/design-system/patterns/element-anatomy/item-anatomy'\n\n/**\n * FileItem — 檔案顯示 / 上傳進度\n *\n * Typography: 兩 mode 統一 scanning — text-body (14px) + leading-compact (1.3)(詳 spec「Typography」段,2026-04-23)\n *\n * 兩種 mode（精簡 vs 完整內容呈現）:\n *\n * compact（★ default）: Paperclip 16px 在左。右側 content + bar。\n *   padding 詳 spec「Padding」表(form: px-3 py-2;surface=upload-manager: px-0 保留 py-2)。\n *   description 只有 error 才顯示。\n *   bar 跟文字左邊對齊（在 icon 右邊的 column 內）。\n *\n * rich: Avatar 48px square 在左（顯示檔案內容縮圖）。右側 content + bar。\n *   多行 description（size / status message）。\n *   有 bar → justify-between（bar 底部對齊 avatar）\n *   無 bar → justify-center（文字垂直置中對齊 avatar）\n *\n * status 可選。不傳 = 已上傳檔案（無 bar，可點擊下載）。\n * onClick → 只加 cursor-pointer(**永不顯示 hover-bg**;FileItem 三型態皆 permanent-anchored,詳 spec「Hover 行為 canonical」)。\n */\n\nconst STATUS_ICON = {\n  completed: { icon: CircleCheck, color: 'text-success' },\n  error: { icon: XCircle, color: 'text-error' },\n} as const\n\n// ProgressBar status 映射:uploading=inProgress(藍) / completed=success(綠) / error=error(紅)\n// 與 ProgressBar 元件的 status prop 對齊,不需再維護 PROGRESS_COLOR 本地 map。\nconst PROGRESS_STATUS_MAP = {\n  uploading: 'inProgress',\n  completed: 'success',\n  error: 'error',\n} as const\n\nconst AVATAR_SIZE = 48\nconst ICON_PX = 16\n\nexport interface FileItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n  name: string\n  /**\n   * 兩種呈現 mode（精簡 vs 完整）：\n   * - `compact`（預設）：paperclip + filename 單行 inline\n   * - `rich`：縮圖 + 檔名 + size + status + progress 的完整 card 呈現\n   */\n  mode?: 'compact' | 'rich'\n  /**\n   * 清單所在的 surface context（2026-06-03 codify rich-borderless）：\n   * - `form`（預設）：rich = border card（自立輪廓，Slack/Notion/Linear attachment 慣例）\n   * - `upload-manager`：rich = **無邊框**（Google Drive/Dropbox 上傳管理面板 —— 面板自身已是容器，\n   *   card border 多餘 = 雙層容器）；avatar 作每筆 item 視覺邊界。compact 的進度條/灰底不受 surface 影響\n   *   （由 status 決定）。\n   * surface-driven（非 status-driven）：避免 form 內 rich 上傳中變無邊框、存好變 card 的邊框閃爍。\n   * 列間 gap 由 List wrapper canonical 決定（form rich 8px / upload-manager rich 12px tight / compact 4px，見 spec）。\n   */\n  surface?: 'form' | 'upload-manager'\n  status?: 'uploading' | 'completed' | 'error'\n  progress?: number\n  /** rich mode: 檔案大小、狀態訊息。compact: 只有 error 才顯示。 ReactNode 支援 inline clickable link(如「View log」)。 */\n  description?: React.ReactNode\n  thumbnailSrc?: string\n  actions?: React.ReactNode\n  onClick?: () => void\n  /**\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(由 ItemSuffix primitive 提供),\n    // 不因 desc wrap 改公式。兩 mode 同公式,跟 item-anatomy 一致。\n\n    // Status slot 幾何(2026-04-23 user 統一):rich + compact 都用 `var(--field-height-xs)`(24)\n    // 容器,裡面 Button xs iconOnly variant=\"text\"(auto data-unbounded)。\n    // Compact 不影響 row 高度 = suffix wrapper 的 data-unbounded CSS 讓 Button layout\n    // 收斂到 1lh(同 compact row 內容高),視覺/touch target 仍 24。\n    const slotHw = 'var(--field-height-xs)'\n\n    const hoverAction =\n      status === 'completed' && onDownload ? { icon: Download, onClick: onDownload, label: `下載 ${name}` } :\n      status === 'error' && onRetry        ? { icon: RotateCw, onClick: onRetry,    label: `重試 ${name}` } :\n      null\n\n    const statusSlot = statusConfig ? (\n      <span\n        data-unbounded=\"true\"\n        className=\"relative inline-flex items-center justify-center shrink-0\"\n        style={{ width: slotHw, height: slotHw }}\n      >\n        {/* Passive 狀態 icon:預設可見;若有 hover-swap,row-hover 時淡出 */}\n        <statusConfig.icon\n          size={ICON_PX}\n          className={cn(\n            'shrink-0 transition-opacity',\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    // 2026-07-16 dim 39/DA3:消費 ItemSuffix primitive(照 Notice 2026-06-15 已遷模式)。\n    // ItemSuffix base geometry(h-[1lh] shrink-0 ml-auto flex items-center gap-2)= 原手刻\n    // div 的 flex items-center gap-2 shrink-0 h-[1lh];多出的 ml-auto 為 no-op(左鄰\n    // ItemContent 是 flex-1,已把 suffix 推到右緣)→ 像素相等。hoverReveal 預設 false,\n    // 不干擾本檔自有的 statusSlot hover-swap 機制(group-hover/row 系)。\n    const suffix = (\n      <ItemSuffix\n        className={cn(\n          // data-unbounded chrome-canonical trick:let Button xs (24) live inside h-[1lh]\n          // wrapper(compact ~18.2 / rich ~18.2 scanning)without pushing row height。\n          // 視覺/hit area 仍 24,layout footprint 收斂到 1lh。同 overlay-surface\n          // 的 SurfaceHeader dismiss canonical(2026-04-22 v5)。\n          // **child selector `[&>[data-unbounded]]`(非 descendant)**:只針對 suffix\n          // wrapper **直接子元素**(statusSlot span、actions Button)套 margin,\n          // 避免 status slot 內部 hover-swap Button(nested)也套造成 layout 跳動。\n          '[&>[data-unbounded]]:my-[calc((1lh-var(--field-height-xs))/2)]',\n        )}\n      >\n        {status === 'uploading' && isRich && (\n          <span className=\"text-fg-secondary tabular-nums\">{progress}%</span>\n        )}\n        {statusSlot}\n        {actions}\n      </ItemSuffix>\n    )\n\n    // content row — 消費 ItemContent primitive(封裝 label + desc + mt-gap token SSOT)。\n    // 兩 mode 共用:primitive 改 → 兩 mode 同步,不需 grep。\n    // typography:scanning mode(2026-04-23 user 指示)—— label body(14/1.3) + desc caption(12/1.3);\n    // row 本身加 `leading-compact` 配合 scanning idiom(同 MenuItem row)。\n    const contentRow = (\n      <div className=\"flex items-start gap-2\">\n        <ItemContent\n          label={name}\n          description={showDesc ? description : undefined}\n          mode=\"scanning\"\n          descriptionTone={status === 'error' ? 'error' : 'secondary'}\n        />\n        {suffix}\n      </div>\n    )\n\n    // a11y(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.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/file-upload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B;;;;;;;;;;;;;;;;;;;;;;;;;;;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;AAGD,QAAA,MAAM,UAAU,wFA2Pf,CAAA;AA0BD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAiBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/FileUpload/file-upload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;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;AAGD,QAAA,MAAM,UAAU,wFA+Pf,CAAA;AA0BD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;CAiBjB,CAAA;AAEV,OAAO,EAAE,UAAU,EAAE,CAAA"}

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

@@ -112,7 +112,11 @@ const FileUpload = React.forwardRef(
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", hasFiles && "flex flex-col"), children: [
       variant === "button" ? (
         // ── button variant:緊湊觸發(form-friendly,省空間),click-only(無拖放區)──
-        /* @__PURE__ */ jsxs("div", { className, ...props, children: [
+        // consumer onClick 在此 wrapper div 承載(type = MouseEvent<HTMLDivElement>,對齊 FileUploadProps
+        // extends HTMLAttributes<HTMLDivElement>)。Button 觸發開檔會冒泡至此 → 同時觸發 consumer handler。
+        // 2026-07-17 修:onClick 於 L128 destructure 後未再 compose,button variant 靜默丟失公開 DOM prop
+        // (dropzone variant 經 handleClick 的 onClick?.(e) 正確 compose,button variant 漏接)。
+        /* @__PURE__ */ jsxs("div", { className, onClick, ...props, children: [
           /* @__PURE__ */ jsx(
             "input",
             {

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","sources":["../../../src/components/FileUpload/file-upload.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport { Upload as UploadIcon, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Empty } from '@/design-system/components/Empty/empty'\nimport { CircularProgress } from '@/design-system/components/CircularProgress/circular-progress'\nimport { FileItem } from '@/design-system/components/FileItem/file-item'\nimport { Button } from '@/design-system/components/Button/button'\n\n/**\n * FileUpload — 拖放 / 點擊上傳區塊\n *\n * 世界級對照:Ant Design `Upload.Dragger`、Polaris `DropZone`、Material community MUI-File-Input。\n * 與本 DS 既有 FileItem(顯示已上傳檔案)配對 — 這裡 own「上傳觸發 + 拖放偵測」,\n * 上傳後的檔案清單顯示交給 consumer 用 FileItem 渲染。\n *\n * ── 4 狀態(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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"}
+{"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        // 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            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;AAAA;AAAA;AAAA;AAAA,QAMX,qBAAC,OAAA,EAAI,WAAsB,SAAmB,GAAG,OAC/C,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,WAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU,CAAC,MAAM;AAGf,kCAAkB,EAAE,OAAO,KAAK;AAChC,kBAAE,OAAO,QAAQ;AAAA,cACnB;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,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;"}

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

@@ -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,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"}
+{"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,wFAqVd,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

@@ -350,7 +350,7 @@ const InfoPanel = React.memo(function InfoPanel2({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--layout-space-tight)]", children: [
             /* @__PURE__ */ jsx("span", { className: "text-body font-normal text-foreground", children: labels.fileInfoHeading }),
-            /* @__PURE__ */ jsxs(DescriptionList, { direction: "horizontal", divided: true, children: [
+            /* @__PURE__ */ jsxs(DescriptionList, { orientation: "horizontal", divided: true, children: [
               /* @__PURE__ */ jsx(DescriptionItem, { label: "檔名", children: file.name }),
               /* @__PURE__ */ jsx(DescriptionItem, { label: "類型", children: file.mimeType || "-" }),
               sizeText && /* @__PURE__ */ jsx(DescriptionItem, { label: "大小", children: /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: sizeText }) }),
@@ -481,6 +481,7 @@ const FileViewer = React.forwardRef(function FileViewer2({
   allowDownload = true,
   onDownload,
   labels: labelsOverride,
+  className,
   ...props
 }, ref) {
   const labels = React.useMemo(