npm - @qijenchen/design-system - Versions diffs - 0.1.0-beta.85 → 0.1.0-beta.86 - Mend

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

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

Files changed (477) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"file-viewer.js","sources":["../../../src/components/FileViewer/file-viewer.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.\n// code-quality-allow: file-size — composite 拼裝(Toolbar / ZoomInput / InfoPanel / Filmstrip + Dialog shell + renderer registry);拆檔會把 useState/useEffect/key handler 跨檔同步過於複雜\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport {\n X as XIcon,\n Download,\n Info,\n ChevronLeft,\n ChevronRight,\n ChevronDown,\n Plus,\n Minus,\n File as FileIcon,\n FileText,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { OVERLAY_SIDE_OFFSET } from '@/design-system/tokens/elevation/overlay-geometry'\nimport { Button } from '@/design-system/components/Button/button'\nimport { Separator } from '@/design-system/components/Separator/separator'\nimport { Input } from '@/design-system/components/Input/input'\nimport { Empty } from '@/design-system/components/Empty/empty'\nimport { AspectRatio } from '@/design-system/components/AspectRatio/aspect-ratio'\nimport { Textarea } from '@/design-system/components/Textarea/textarea'\nimport { Field, FieldLabel } from '@/design-system/components/Field/field'\nimport { DescriptionList, DescriptionItem } from '@/design-system/components/DescriptionList/description-list'\nimport { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { ChromeHeader } from '@/design-system/patterns/header-canonical/chrome-header'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\nimport { ARROW_BUTTON_WIDTH,\n useScrollEdges,\n useScrollByPage,\n buildFadeMask,\n OverflowScrollArrow,\n} from '@/design-system/patterns/horizontal-overflow/horizontal-overflow'\nimport { useControllable } from '@/design-system/hooks/use-controllable'\nimport { canRenderImage } from './can-render-image'\nimport type {\n FileInfo,\n FileRenderer,\n FileRendererCapabilities,\n FileRendererProps,\n} from './file-viewer-types'\nimport { surfaceMotion } from \"@/design-system/tokens/motion/overlay-motion\"\n\n/*\n FileViewer — 可延伸的網頁檔案 preview shell(modal fullscreen)\n \n ── 定位 ──\n * 公開、composite 元件。consumer 傳 `files`,FileViewer 處理 overlay / toolbar /\n * keyboard / filmstrip / info panel 一切 chrome;檔案本體由 renderer registry\n * 按 file MIME 決定誰渲染(MVP 內建 ImageRenderer + FallbackRenderer)。\n \n ── 實作基礎 ──\n * 自建 composite,消費 DS primitives:\n * - Radix DialogPrimitive(焦點 trap / Esc / modal 隔離靠 hideOthers aria-hidden — react-dialog@1.1.x 不輸出 aria-modal,保有 shadcn 結構優勢)\n * - `<Empty>` / `<Button>` / `<Input size=\"sm\" autoWidth>`(ZoomInput,default variant)/ `<AspectRatio>` / `<Textarea>` / `<DropdownMenu>`\n * - `patterns/horizontal-overflow`(filmstrip 溢出捲動)\n * 不用 DS 的 `<Dialog>` wrapper:因為 FileViewer 需要 edge-to-edge fullscreen\n * (無 viewport inset / 無 rounded-lg / 無 maxWidth),Dialog 的這些預設都要覆寫。\n * 直接消費 Radix primitive 讓 shell 擁有完整 layout 控制權。\n \n ── Layout Family ──\n * 非 Family 1/2/3/4 — composite / multi-region(Toolbar / Viewport / Filmstrip +\n * 可選 InfoPanel)。見 `file-viewer.spec.md`「Layout Family」段。\n \n ── Extensibility ──\n * `registerFileRenderer(renderer)` 註冊新 renderer;shell 按註冊順序 iterate,\n * 第一個 `canRender(file)` 回 true 的渲染。FallbackRenderer 永遠兜底(未知檔案\n * 類型顯示 icon + 檔名 + download)。\n /\n\n// ─── Renderer Registry ────────────────────────────────────────────────────────\n\n/\n Fallback renderer — 無 renderer 能處理時兜底。\n * 顯示 Empty 佈局:icon + 檔名 + 「請下載檢視」提示。\n /\nconst FallbackRenderer: React.FC<FileRendererProps> = ({ file, onCapabilitiesChange }) => {\n // Contract(file-viewer-types.ts `onCapabilitiesChange` doc):「第一個 renderer mount\n // 時必須 emit」。fallback 不支援 zoom → emit { zoom: false };不 emit 的話 shell 會沿用\n // 上一個 renderer 的 capability(image → 未知檔切換時 toolbar 殘留 zoom controls,\n // `+`/`-`/`0`/`F` 快捷鍵也會對不支援 zoom 的檔案生效)。同 image-renderer.tsx mount emit pattern。\n React.useEffect(() => {\n onCapabilitiesChange({ zoom: false })\n }, [onCapabilitiesChange])\n\n return (\n <div className=\"w-full h-full flex items-center justify-center p-8\">\n <Empty\n icon={FileText}\n title={file.name}\n description={`無法在瀏覽器中預覽此檔案類型（${file.mimeType \|\| 'unknown'}）。請下載後檢視。`}\n />\n </div>\n )\n}\n\nconst fallbackRenderer: FileRenderer = {\n id: 'fallback',\n canRender: () => true,\n component: FallbackRenderer,\n}\n\n// 2026-07-06 D3 bundle fix:ImageRenderer 改 React.lazy 動態 import——FileViewer 是\n// rare-use modal overlay,react-zoom-pan-pinch(~12KB gz)不該在 viewer 從未打開時就進\n// consumer 首屏 bundle。canRenderImage(registry 判斷 + Filmstrip 分流需同步呼叫)已拆至\n// ./can-render-image 保持靜態 import。\nconst LazyImageRenderer = React.lazy(() =>\n import('./image-renderer').then((m) => ({ default: m.ImageRenderer })),\n)\n\nconst imageRenderer: FileRenderer = {\n id: 'image',\n canRender: canRenderImage,\n component: LazyImageRenderer,\n}\n\n// Registry 是 module-singleton:新 renderer 透過 registerFileRenderer 加入。\n// Fallback 永遠最後(兜底),因此用陣列第二段存放。\nconst userRegistered: FileRenderer[] = []\n\nexport function registerFileRenderer(renderer: FileRenderer): void {\n // 去重:同 id 則覆寫\n const existingIdx = userRegistered.findIndex((r) => r.id === renderer.id)\n if (existingIdx >= 0) {\n userRegistered[existingIdx] = renderer\n } else {\n userRegistered.push(renderer)\n }\n}\n\nfunction resolveRenderer(file: FileInfo): FileRenderer {\n // 先查 user registered,再 built-in,最後 fallback\n for (const r of userRegistered) {\n if (r.canRender(file)) return r\n }\n if (imageRenderer.canRender(file)) return imageRenderer\n return fallbackRenderer\n}\n\n// ─── Zoom presets ─────────────────────────────────────────────────────────────\n\ntype ZoomFit = 'fit-width' \| 'fit-page'\n\nconst ZOOM_PRESETS: number[] = [10, 25, 50, 75, 100, 125, 150, 200, 400]\n// i18n-allow-block: DS defaults for zoom fit menu;consumer override via `labels.zoomFitOptions` (future) or fork\nconst ZOOM_FIT_OPTIONS: { value: ZoomFit; label: string }[] = [\n { value: 'fit-width', label: 'Fit to width' },\n { value: 'fit-page', label: 'Fit to page' },\n]\n\nfunction nextZoomIn(current: number): number {\n for (const p of ZOOM_PRESETS) {\n if (p > current) return p\n }\n return ZOOM_PRESETS[ZOOM_PRESETS.length - 1]\n}\nfunction nextZoomOut(current: number): number {\n for (let i = ZOOM_PRESETS.length - 1; i >= 0; i--) {\n if (ZOOM_PRESETS[i] < current) return ZOOM_PRESETS[i]\n }\n return ZOOM_PRESETS[0]\n}\n\n// ─── ZoomInput ────────────────────────────────────────────────────────────────\n\ninterface ZoomInputProps {\n value: number\n onChange: (next: number) => void\n onFit: (fit: ZoomFit) => void\n labels: Pick<Required<FileViewerLabels>, 'zoomInput' \| 'zoomMenu'>\n}\n\n/\n ZoomInput — [−] [% input(default variant + autoWidth)with ⌄ menu trigger] [+]\n \n 世界級對照:Figma zoom control / Adobe Acrobat / Google Slides zoom。\n \n ── 消費 DS primitive ──\n * - `<Button>` iconOnly size=\"sm\" 作 ±按鈕\n * - `<Input size=\"sm\" autoWidth>` 作 %輸入(Toolbar inline editing canonical;autoWidth 隨文字寬)\n * - Input `endSlot` escape hatch 包 `<DropdownMenuTrigger asChild>` + chevron 觸發 DropdownMenu\n * - `<DropdownMenu>` 作 preset + fit 選單(取代原先 Popover + 手刻 button list)\n \n ── 為什麼 inline(不抽獨立 primitive)──\n * 目前只 FileViewer 消費;MVP 階段遵循 YAGNI。當 PDF / Video viewer 也需要相同\n * primitive 時,再依「建立前必查既有 pattern」原則從 FileViewer 抽出升級。\n /\nconst ZoomInput: React.FC<ZoomInputProps> = ({ value, onChange, onFit, labels }) => {\n const [draft, setDraft] = React.useState<string>(`${value}%`)\n const [menuOpen, setMenuOpen] = React.useState(false)\n\n React.useEffect(() => {\n setDraft(`${value}%`)\n }, [value])\n\n const commitDraft = () => {\n const parsed = parseInt(draft.replace(/[^0-9]/g, ''), 10)\n if (Number.isFinite(parsed) && parsed > 0) {\n // 限 10–400 範圍,對齊 ImageRenderer MIN_SCALE/MAX_SCALE\n const clamped = Math.min(400, Math.max(10, parsed))\n onChange(clamped)\n setDraft(`${clamped}%`)\n } else {\n setDraft(`${value}%`)\n }\n }\n\n return (\n // zoom group = toolbar 按鈕群組,`gap-2`(8px)對齊本 DS 按鈕 gap canonical。\n <div className=\"inline-flex items-center gap-2\">\n {/ 縮小 /}\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={Minus}\n aria-label=\"縮小\"\n disabled={value <= 10}\n onClick={() => onChange(nextZoomOut(value))}\n />\n\n {/ % Input + chevron 內嵌為 endSlot(ItemInlineActionButton 作 DropdownMenuTrigger):\n — Input body 可自由打字(chevron 是 Input 內部 element,body 區域 click 不觸發 menu)\n — Chevron 是 inline action,同時是 DropdownMenuTrigger → menu 精確 anchor 在 chevron 下方\n — 靠 Radix asChild + ItemInlineActionButton:視覺是 Input + endAction,行為是 chevron-as-trigger\n — 完全對齊 user AR:「只有 inline action 能觸發選單,menu 對齊 inline action」 /}\n <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>\n {/ maxLength 限縮(2026-07-09 user 要求「找合理最大值避免無限輸入」):autoWidth 下輸入框寬度隨字數長,\n 無上限則可無限打字撐爆 toolbar。max 合法值「400%」= 4 字(對齊 ZOOM_PRESETS / ImageRenderer MAX_SCALE 400;\n commitDraft 另 clamp 10–400),留 1 字編輯緩衝 → maxLength={5}。 /}\n <Input\n size=\"sm\"\n autoWidth\n maxLength={5}\n aria-label={labels.zoomInput}\n value={draft}\n onChange={(e) => setDraft(e.target.value)}\n onBlur={commitDraft}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault()\n commitDraft()\n ;(e.target as HTMLInputElement).blur()\n }\n }}\n className=\"text-center tabular-nums\"\n endSlot={\n <DropdownMenuTrigger asChild>\n <ItemInlineActionButton\n icon={ChevronDown}\n aria-label={labels.zoomMenu}\n size=\"sm\"\n overlayTrigger\n />\n </DropdownMenuTrigger>\n }\n />\n {/ data-theme=\"dark\":DropdownMenuContent 走 Portal 到 document body 外,\n 不繼承 FileViewer 外層 data-theme=\"dark\",需顯式打 dark 讓選單跟 chrome 一致。\n 加 bg-surface-raised 強制用 dark token(純 data-theme attr 在 Portal 不夠,\n Tailwind 條件 class + CSS variable 都要一起帶) /}\n <DropdownMenuContent\n align=\"end\"\n sideOffset={OVERLAY_SIDE_OFFSET} // 2026-07-04:M17 — elevation.spec「primitive default 必 import 該 const」\n // minWidth 對齊 trigger(Input autoWidth),menu 寬度 fit-content 更貼近觸發點視覺中心\n className=\"min-w-[9rem] w-auto bg-surface-raised text-foreground border-divider\"\n data-theme=\"dark\"\n >\n {/ 內層 data-theme 再覆蓋一次 — 確保 DropdownMenuItem children 都 resolve dark token /}\n <div data-theme=\"dark\" className=\"contents\">\n {ZOOM_FIT_OPTIONS.map((opt) => (\n <DropdownMenuItem\n key={opt.value}\n onSelect={() => onFit(opt.value)}\n >\n {opt.label}\n </DropdownMenuItem>\n ))}\n <DropdownMenuSeparator />\n {ZOOM_PRESETS.map((p) => {\n const selected = p === value\n return (\n <DropdownMenuItem\n key={p}\n onSelect={() => onChange(p)}\n data-state={selected ? 'checked' : undefined}\n className={cn(\n 'tabular-nums',\n selected && 'bg-neutral-selected',\n )}\n >\n {p}%\n </DropdownMenuItem>\n )\n })}\n </div>\n </DropdownMenuContent>\n </DropdownMenu>\n\n {/ 放大 /}\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={Plus}\n aria-label=\"放大\"\n disabled={value >= 400}\n onClick={() => onChange(nextZoomIn(value))}\n />\n </div>\n )\n}\nZoomInput.displayName = 'ZoomInput'\n\n// ─── Toolbar ──────────────────────────────────────────────────────────────────\n\ninterface ToolbarProps {\n file: FileInfo\n capabilities: FileRendererCapabilities\n zoom: number\n onZoomChange: (z: number) => void\n onFit: (fit: ZoomFit) => void\n infoOpen: boolean\n onInfoToggle: () => void\n onDownload?: () => void\n allowDownload: boolean\n onClose: () => void\n labels: Required<FileViewerLabels>\n}\n\nconst Toolbar: React.FC<ToolbarProps> = ({\n file,\n capabilities,\n zoom,\n onZoomChange,\n onFit,\n infoOpen,\n onInfoToggle,\n onDownload,\n allowDownload,\n onClose,\n labels,\n}) => {\n return (\n <ChromeHeader\n // Density:繼承 page(2026-06-15 canonical)。原 lockDensity=\"lg\" 只鎖在 header、沒鎖 body →\n // InfoPanel header(px-loose@lg=24)與其 body(px-loose@page=16)左緣不對齊(圖二 bug)。移除 lock\n // → header + body 全繼承 page density,左緣對齊;FileViewer 全 surface 同一密度(non-special)。\n className={cn(\n // Chrome layer — `bg-surface-raised` 對齊 token semantic「遮蓋型浮層必須不透明」。\n // FileViewer 整體是 overlay,chrome 屬其 raised surface(同 DropdownMenuContent line 244)。\n // 不用 bg-surface(dark = white α8 半透明,outer 透明時失去 backdrop 洗白)。\n // 不用 bg-canvas(那是「頁面最底層」semantic,chrome 不是 page)。\n // ChromeHeader 自帶 flex/items-center/gap-2/shrink-0/h-chrome-header-height/border-b/px-loose\n 'bg-surface-raised',\n )}\n >\n {/ 檔名(左,佔據可用寬度,ellipsis)—— file-type icon 代表檔名的意象(這是什麼檔),\n 對齊 CLAUDE.md「icon 代表 label 意象時與 label 同色」原則:icon 走 text-foreground\n 不走 text-fg-muted(後者是裝飾性 / 輔助 icon 的色階) /}\n <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n <FileIcon size={16} className=\"text-foreground shrink-0\" aria-hidden />\n <span\n className=\"text-body-lg text-foreground truncate\"\n title={file.name}\n >\n {file.name}\n </span>\n </div>\n\n {/ 按鈕順序 canonical:zoom → info → download → close(影響力遞增)\n action-bar 三分區:zoom(data op)/ info+download(action group)/ close(dismiss)\n dismiss 前分隔線 = action-bar「dismiss 跟動作分群」canonical\n\n ── gap-2 canonical(2026-04-21 follow-up)──\n 按鈕間距 8px(gap-2),對齊 Dialog footer `gap-2` / CLAUDE 按鈕間距 SSOT。\n zoom group(ZoomInput)內部同樣是 gap-2(見 `ZoomInput` L197),\n 與這裡 action-group-to-action-group 的 gap-2 一致。 /}\n <div className=\"flex items-center gap-2 shrink-0\">\n {capabilities.zoom && (\n <>\n {/ Zoom group:-/%/+/▼ 屬同類「縮放」操作,群組並在右側加分隔線跟其他動作分群 /}\n <ZoomInput value={zoom} onChange={onZoomChange} onFit={onFit} labels={labels} />\n {/ zoom group → next action group divider(action-bar canonical;v11 升級成 Separator\n 元件,對齊 separator.spec.md「consumer 手動放置 toolbar 群組分隔線 = 用 Separator」)/}\n <Separator orientation=\"vertical\" className=\"h-6 mx-1\" />\n </>\n )}\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={Info}\n aria-label={infoOpen ? labels.infoToggleCollapse : labels.infoToggleExpand}\n pressed={infoOpen}\n onClick={onInfoToggle}\n />\n {allowDownload && (\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={Download}\n aria-label={labels.download}\n onClick={onDownload}\n />\n )}\n {/ action-bar canonical:dismiss 前加分隔線跟其他動作分群(info/download = action group,\n close = dismiss group;v11 升級成 Separator,對齊 separator.spec.md canonical)/}\n <Separator orientation=\"vertical\" className=\"h-6 mx-1\" />\n {/ Close X 走 dismiss canonical(`<Button iconOnly dismiss />`)——對齊 CLAUDE.md\n `button.spec.md`「Dismiss 視覺類」+ `patterns/element-anatomy/item-anatomy.spec.md`\n 「Dismiss canonical」:chrome corner close X = Button dismiss,不是 Inline Action。 /}\n <Button\n iconOnly\n dismiss\n size=\"sm\"\n data-dismiss\n startIcon={XIcon}\n aria-label={labels.close}\n onClick={onClose}\n />\n </div>\n </ChromeHeader>\n )\n}\n\n// ─── InfoPanel ────────────────────────────────────────────────────────────────\n\ninterface InfoPanelProps {\n file: FileInfo\n readOnly: boolean\n onDescriptionChange?: (fileId: string, description: string) => void\n onClose: () => void\n labels: Required<FileViewerLabels>\n}\n\nfunction formatBytes(bytes: number \| undefined): string \| undefined {\n if (bytes == null) return undefined\n if (bytes < 1024) return `${bytes} B`\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`\n if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`\n}\n\n// React.memo(2026-07-06 D3):同 Filmstrip——wheel-zoom 每 tick 全 chrome re-render,InfoPanel\n// 開啟時(Field/Textarea/DescriptionList subtree)白付。onClose 走 shell handleInfoClose\n// useCallback;file(files[activeIndex] identity 穩定)/readOnly/onDescriptionChange/labels 本已穩定。\nconst InfoPanel = React.memo(function InfoPanel({\n file,\n readOnly,\n onDescriptionChange,\n onClose,\n labels,\n}: InfoPanelProps) {\n const [draft, setDraft] = React.useState(file.description ?? '')\n\n React.useEffect(() => {\n setDraft(file.description ?? '')\n }, [file.id, file.description])\n\n const commit = () => {\n if (readOnly) return\n if (draft !== (file.description ?? '')) {\n onDescriptionChange?.(file.id, draft)\n }\n }\n\n const sizeText = formatBytes(file.size)\n\n return (\n <aside\n className={cn(\n // Chrome — bg-surface-raised 同 Toolbar / Filmstrip(token semantic「遮蓋型浮層」)\n 'w-80 shrink-0 flex flex-col bg-surface-raised border-l border-divider',\n 'h-full',\n )}\n aria-label={labels.detailPanel}\n >\n {/* Panel header — 與 Toolbar 同 ChromeHeader,繼承 page density(2026-06-15:移除 lockDensity,\n 修 header(原 px-loose@lg=24)與 body(px-loose@page=16)左緣不對齊 = 圖二 bug;全 surface 同密度)。 /}\n <ChromeHeader className=\"justify-between\">\n <h3 className=\"text-body-lg font-medium text-foreground\">{labels.detailsHeading}</h3>\n {/ InfoPanel close 走 dismiss canonical `<Button iconOnly dismiss />`,對齊 button.spec.md\n 「Dismiss 視覺類」+ inline-action.spec.md「Dismiss canonical — X close only」。 /}\n <Button\n iconOnly\n dismiss\n size=\"sm\"\n data-dismiss\n startIcon={XIcon}\n aria-label={labels.detailPanelClose}\n onClick={onClose}\n />\n </ChromeHeader>\n\n {/ Panel body — header(shrink-0)上常駐 + body 走 ScrollArea(高度小時內容可捲動)。\n padding 對齊 layoutSpace v6 規則 4「bounded region → 容器底(無 action buttons)= loose」。\n gap 對齊 v6 規則 3「跨範疇 parallel = loose」(說明 vs 檔案資訊兩個獨立 functional sections,\n 屬「跨範疇 + 不相關」)— 從 gap-4 寫死改為 token-aware loose。 /}\n <ScrollArea className=\"flex-1 min-h-0\">\n <div className={cn(\n 'flex flex-col gap-[var(--layout-space-loose)]',\n 'px-[var(--layout-space-loose)]',\n 'pt-[var(--layout-space-tight)] pb-[var(--layout-space-loose)]',\n )}>\n {/ 說明 — 用 DS Field + FieldLabel + Textarea(2026-04-20 B12 決策:\n FileViewer 一律消費 DS Field 家族,不手刻 `<span>label` + raw control) /}\n <Field>\n <FieldLabel>說明</FieldLabel>\n <Textarea\n value={draft}\n onChange={(e) => setDraft(e.target.value)}\n onBlur={commit}\n readOnly={readOnly}\n placeholder={readOnly ? labels.descriptionPlaceholderReadOnly : labels.descriptionPlaceholderEdit}\n rows={5}\n />\n </Field>\n\n {/ 檔案資訊 — 用 DS DescriptionList horizontal + divided(Google Drive /\n Notion file info panel 模式):\n - section header 用 FieldLabel 同款 typography 保視覺一致\n - DescriptionList direction=\"horizontal\" divided 提供 row 下底線\n 對齊格線,key 長度不一也易讀\n - 不再手刻 dl/dt/dd — canonical 由 DS primitive own /}\n {/ heading → first-item gap = item → item gap(Gestalt proximity,見 description-list.spec.md) /}\n <div className=\"flex flex-col gap-[var(--layout-space-tight)]\">\n <span className=\"text-body font-normal text-foreground\">{labels.fileInfoHeading}</span>\n <DescriptionList direction=\"horizontal\" divided>\n <DescriptionItem label=\"檔名\">{file.name}</DescriptionItem>\n <DescriptionItem label=\"類型\">{file.mimeType \|\| '-'}</DescriptionItem>\n {sizeText && (\n <DescriptionItem label=\"大小\">\n <span className=\"tabular-nums\">{sizeText}</span>\n </DescriptionItem>\n )}\n {file.metadata &&\n Object.entries(file.metadata).map(([k, v]) => (\n <DescriptionItem key={k} label={k}>{String(v)}</DescriptionItem>\n ))}\n </DescriptionList>\n </div>\n </div>\n </ScrollArea>\n </aside>\n )\n})\n\n// ─── Filmstrip ────────────────────────────────────────────────────────────────\n\ninterface FilmstripProps {\n files: FileInfo[]\n activeIndex: number\n onSelect: (index: number) => void\n labels: Pick<Required<FileViewerLabels>, 'filmstripLabel'>\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst THUMB_SIZE = 64 // px, 固定\n\n// React.memo(2026-07-06 D3):wheel-zoom 每 tick(trackpad 60Hz+)setZoom → shell 全 chrome\n// re-render,Filmstrip(N thumbs × cn + buildFadeMask)是最貴的無關 subtree。props 已全穩定\n// (files=prop / activeIndex=primitive / onSelect=setIndex useCallback / labels=useMemo)→ memo 真命中。\nconst Filmstrip = React.memo(function Filmstrip({ files, activeIndex, onSelect, labels }: FilmstripProps) {\n const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges<HTMLDivElement>()\n const scrollByPage = useScrollByPage(scrollRef)\n const maskImage = buildFadeMask({ canScroll, atStart, atEnd, reserveArrowWidth: ARROW_BUTTON_WIDTH }) // 2026-07-04:消 SSOT 硬寫(spec 禁止重新定義 ARROW_BUTTON_WIDTH)\n\n // 切換當前檔案時,自動 scroll 讓 active thumb 可見\n React.useEffect(() => {\n const el = scrollRef.current\n if (!el) return\n const active = el.querySelector<HTMLButtonElement>(`[data-thumb-index=\"${activeIndex}\"]`)\n active?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })\n }, [activeIndex, scrollRef])\n\n return (\n <div\n className={cn(\n // Chrome — bg-surface-raised 同 Toolbar / InfoPanel(token semantic「遮蓋型浮層」)\n 'relative shrink-0 h-24 bg-surface-raised border-t border-divider',\n 'flex items-center',\n 'px-[var(--layout-space-loose)]',\n )}\n >\n {canScroll && !atStart && (\n <OverflowScrollArrow direction=\"left\" onClick={() => scrollByPage('left')} />\n )}\n <div\n ref={scrollRef}\n className={cn(\n 'flex items-center',\n // 刻意隱藏 native scrollbar + 用 fade-mask(horizontal-overflow pattern)\n 'scrollbar-none overflow-x-auto overflow-y-hidden h-full py-2',\n 'w-full',\n )}\n style={{\n maskImage,\n WebkitMaskImage: maskImage,\n }}\n >\n {/ 內層 wrapper:mx-auto 讓 thumbs 在少量時水平置中,多量溢出時 mx-auto = 0 自然轉 scroll。\n gap-[var(--layout-space-tight)] 走 DS density-aware token(不用 raw gap-1)——\n 世界級 idiom:Google Drive / Dropbox / Notion file preview 的 filmstrip 都是\n 少量置中 / 多量靠 start scroll。\n ARIA role=\"group\"(非 tablist):filmstrip 是「選圖導航」不是「切換 N 個 tabpanel」——\n lightbox 縮圖膠卷只有單一 viewport,不符 W3C tabs pattern(tab MUST 對應自己的 tabpanel + roving tabindex)。\n 對齊 APG grouped-carousel + PhotoSwipe / codeaccessible.com lightbox 共識:group + button + aria-current。 /}\n <div\n role=\"group\"\n aria-label={labels.filmstripLabel}\n className=\"flex items-center gap-[var(--layout-space-tight)] mx-auto shrink-0\"\n >\n {files.map((file, i) => {\n const active = i === activeIndex\n const isImage = canRenderImage(file)\n const ext = file.name.split('.').pop()?.toUpperCase() ?? '檔'\n return (\n <button\n key={file.id}\n type=\"button\"\n aria-current={active ? 'true' : undefined}\n aria-label={`${i + 1} / ${files.length}:${file.name}`}\n data-thumb-index={i}\n onClick={() => onSelect(i)}\n className={cn(\n 'shrink-0 rounded-md bg-muted overflow-hidden',\n 'outline-none focus-visible:ring-2 focus-visible:ring-ring',\n 'transition-shadow duration-150',\n active\n ? 'ring-2 ring-primary'\n : 'ring-1 ring-border hover:ring-border-hover',\n )}\n style={{ width: THUMB_SIZE, height: THUMB_SIZE }}\n >\n <AspectRatio ratio={1} className=\"w-full h-full\">\n {isImage ? (\n <img\n src={file.url}\n alt=\"\"\n aria-hidden\n className=\"w-full h-full object-cover\"\n draggable={false}\n />\n ) : (\n <div className=\"w-full h-full flex flex-col items-center justify-center gap-0.5\">\n <FileText size={20} className=\"text-fg-muted\" aria-hidden />\n <span className=\"text-footnote text-fg-muted font-medium\">{ext}</span>\n </div>\n )}\n </AspectRatio>\n </button>\n )\n })}\n </div>\n </div>\n {canScroll && !atEnd && (\n <OverflowScrollArrow direction=\"right\" onClick={() => scrollByPage('right')} />\n )}\n </div>\n )\n})\n\n// ─── FileViewer (shell) ───────────────────────────────────────────────────────\n\n/\n i18n-able labels for FileViewer chrome / controls.\n * All keys are optional — defaults are CJK (see `DEFAULT_LABELS`).\n * Consumer typically spreads partial override:\n * `<FileViewer labels={{ close: 'Close', download: 'Download' }} />`\n /\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport interface FileViewerLabels {\n /* Zoom input ARIA label /\n zoomInput?: string\n /* Zoom menu trigger ARIA label /\n zoomMenu?: string\n /* Info panel toggle button — shown when panel is OPEN /\n infoToggleCollapse?: string\n /* Info panel toggle button — shown when panel is CLOSED /\n infoToggleExpand?: string\n /* Download button ARIA label /\n download?: string\n /* Close viewer button ARIA label /\n close?: string\n /* InfoPanel outer aside ARIA label /\n detailPanel?: string\n /* InfoPanel heading text /\n detailsHeading?: string\n /* InfoPanel close button ARIA label /\n detailPanelClose?: string\n /* Description textarea placeholder (readOnly) /\n descriptionPlaceholderReadOnly?: string\n /* Description textarea placeholder (editable) /\n descriptionPlaceholderEdit?: string\n /* Detail section — file info section heading /\n fileInfoHeading?: string\n /* Filmstrip group ARIA label（role=\"group\" + thumb button + aria-current,非 tablist）/\n filmstripLabel?: string\n /* Previous-file nav button ARIA label /\n previousFile?: string\n /* Next-file nav button ARIA label /\n nextFile?: string\n}\n\n// i18n-allow: DS defaults;consumer override via `labels` prop\nconst DEFAULT_LABELS: Required<FileViewerLabels> = {\n zoomInput: '縮放比例',\n zoomMenu: '開啟縮放選單',\n infoToggleCollapse: '收合詳細資訊面板',\n infoToggleExpand: '展開詳細資訊面板',\n download: '下載檔案',\n close: '關閉檢視器',\n detailPanel: '檔案詳細資訊',\n detailsHeading: '詳細資訊',\n detailPanelClose: '關閉詳細資訊',\n descriptionPlaceholderReadOnly: '尚無說明',\n descriptionPlaceholderEdit: '為這個檔案加上說明…',\n fileInfoHeading: '檔案資訊',\n filmstripLabel: '檔案佇列',\n previousFile: '上一個檔案',\n nextFile: '下一個檔案',\n}\n\nexport interface FileViewerProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n 'onOpenChange'\n > {\n files: FileInfo[]\n initialIndex?: number\n /* Controlled open state。與 `defaultOpen` 二擇一。 /\n open?: boolean\n /* Uncontrolled open 預設(2026-04-25 加,對齊 Dialog/Sheet/Popover dual-mode canonical)。 /\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n /* 當前索引(controlled);consumer 想自己控制 active file 時傳。不傳則 shell 管理。 /\n index?: number\n onIndexChange?: (index: number) => void\n /* 當前檔案 description 變化。consumer 負責持久化。readOnly 為 true 時不觸發。 /\n onDescriptionChange?: (fileId: string, description: string) => void\n /* true → InfoPanel 的 description textarea 為 readOnly。預設 false。 /\n readOnly?: boolean\n /* 顯示底部 filmstrip。預設 false;files.length < 2 時自動隱藏。 /\n showFilmstrip?: boolean\n /* 是否提供 download 按鈕。預設 true。 /\n allowDownload?: boolean\n /* 自訂 download 行為;未傳則用 anchor download attribute。 /\n onDownload?: (file: FileInfo) => void\n /* i18n labels override. Partial — merged with DS defaults. /\n labels?: FileViewerLabels\n}\n\nconst FileViewer = React.forwardRef<HTMLDivElement, FileViewerProps>(function FileViewer({\n files,\n initialIndex = 0,\n open: openProp,\n defaultOpen,\n onOpenChange,\n index: indexProp,\n onIndexChange,\n onDescriptionChange,\n readOnly = false,\n showFilmstrip = false,\n allowDownload = true,\n onDownload,\n labels: labelsOverride,\n ...props\n}, ref) {\n const labels = React.useMemo(\n () => ({ ...DEFAULT_LABELS, ...labelsOverride }) satisfies Required<FileViewerLabels>,\n [labelsOverride],\n )\n // Open:受控/非受控雙模式鏡像(消費 DS useControllable;select-menu.tsx 2026-06-11 同修先例)。\n // 原本 keyboard shortcuts effect 與 index-reset effect 直接讀 `open` prop ——\n // uncontrolled(defaultOpen)場景 open === undefined,兩 effect 永遠不啟動(快捷鍵全失效\n // + 重開不重置 index),Toolbar X / backdrop click 的 onOpenChange?.(false) 也是 no-op。\n // 鏡像後 effect / close 都走 mirror:controlled 時純 passthrough,\n // uncontrolled 時 internal state 為準 + onOpenChange 僅通知。\n const [open, setOpen] = useControllable<boolean>({\n value: openProp,\n defaultValue: defaultOpen ?? false,\n onChange: onOpenChange,\n })\n\n // Index:uncontrolled fallback\n const [internalIndex, setInternalIndex] = React.useState(initialIndex)\n const activeIndex = indexProp ?? internalIndex\n\n const setIndex = React.useCallback(\n (next: number) => {\n const clamped = Math.max(0, Math.min(files.length - 1, next))\n if (indexProp === undefined) setInternalIndex(clamped)\n onIndexChange?.(clamped)\n },\n [files.length, indexProp, onIndexChange],\n )\n\n // 開啟時若 uncontrolled,重置為 initialIndex\n React.useEffect(() => {\n if (open && indexProp === undefined) {\n setInternalIndex(Math.max(0, Math.min(files.length - 1, initialIndex)))\n }\n }, [open, initialIndex, files.length, indexProp])\n\n // Info panel open state(shell own)\n const [infoOpen, setInfoOpen] = React.useState(false)\n // 2026-07-06 D3 perf:抽 useCallback 穩定 identity——InfoPanel 上了 React.memo(見上),\n // inline arrow 每 render 新 identity 會打穿 memo shallow-compare。\n const handleInfoToggle = React.useCallback(() => setInfoOpen((o) => !o), [])\n const handleInfoClose = React.useCallback(() => setInfoOpen(false), [])\n\n // Zoom state(shell own,renderer 消費 + 回報)\n const [zoom, setZoom] = React.useState(100)\n // 切換檔案時不再 setZoom(100)— 把「下一張該怎麼初始化 zoom」的決定權交給 renderer:\n // image-renderer 自己 watch file.url change → reset loaded → onLoad → 重 fit-page。\n // 原本 setZoom(100) 在 cache 命中(onLoad 沒 fire)時會卡 100% 不 fit(user 抓的 bug)。\n\n // Fit request(shell → renderer 指令;nonce 遞增讓重複同 fit 也觸發 renderer)\n const [fitRequest, setFitRequest] = React.useState<{ fit: ZoomFit; nonce: number } \| null>(null)\n\n // Renderer capabilities(mount 時 renderer emit)\n const [capabilities, setCapabilities] = React.useState<FileRendererCapabilities>({\n zoom: false,\n })\n\n const file = files[activeIndex]\n const Renderer = file ? resolveRenderer(file) : null\n\n // Fit-to- 下指令給 renderer,renderer 算 container/image 比例後透過 onZoomChange 回報\n const handleFit = React.useCallback((fit: ZoomFit) => {\n setFitRequest((prev) => ({ fit, nonce: (prev?.nonce ?? 0) + 1 }))\n }, [])\n\n // Download handler\n const handleDownload = React.useCallback(() => {\n if (!file) return\n if (onDownload) {\n onDownload(file)\n return\n }\n // 預設:anchor download(同源檔案有效;跨域由 consumer 提供 onDownload)\n const a = document.createElement('a')\n a.href = file.url\n a.download = file.name\n a.target = '_blank'\n a.rel = 'noopener'\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n }, [file, onDownload])\n\n // Keyboard shortcuts(focus 在 input / textarea 時不觸發)\n React.useEffect(() => {\n if (!open) return\n const handler = (e: KeyboardEvent) => {\n const target = e.target as HTMLElement \| null\n const tag = target?.tagName\n if (tag === 'INPUT' \|\| tag === 'TEXTAREA' \|\| target?.isContentEditable) return\n\n if (e.key === 'ArrowLeft' && files.length > 1) {\n e.preventDefault()\n setIndex(activeIndex - 1)\n } else if (e.key === 'ArrowRight' && files.length > 1) {\n e.preventDefault()\n setIndex(activeIndex + 1)\n } else if (e.key === '+' \|\| e.key === '=') {\n if (capabilities.zoom) {\n e.preventDefault()\n setZoom((z) => nextZoomIn(z))\n }\n } else if (e.key === '-') {\n if (capabilities.zoom) {\n e.preventDefault()\n setZoom((z) => nextZoomOut(z))\n }\n } else if (e.key === '0') {\n if (capabilities.zoom) {\n e.preventDefault()\n setZoom(100)\n }\n } else if (e.key === 'f' \|\| e.key === 'F') {\n if (capabilities.zoom) {\n e.preventDefault()\n handleFit('fit-page')\n }\n } else if (e.key === 'i' \|\| e.key === 'I') {\n e.preventDefault()\n setInfoOpen((o) => !o)\n }\n }\n window.addEventListener('keydown', handler)\n return () => window.removeEventListener('keydown', handler)\n }, [open, activeIndex, files.length, setIndex, capabilities.zoom, handleFit])\n\n // Arrows idle auto-hide(世界級 lightbox canonical:Google Photos / Dropbox / PhotoSwipe)\n // 滑鼠移入 viewport → 顯示箭頭;持續 2.5 秒無 mouse move → 自動淡出(對齊世界級行為)\n const [armVisible, setArmVisible] = React.useState(false)\n const idleTimerRef = React.useRef<ReturnType<typeof setTimeout> \| null>(null)\n const handleViewportMouseMove = React.useCallback(() => {\n setArmVisible(true)\n if (idleTimerRef.current) clearTimeout(idleTimerRef.current)\n idleTimerRef.current = setTimeout(() => setArmVisible(false), 2500)\n }, [])\n const handleViewportMouseLeave = React.useCallback(() => {\n setArmVisible(false)\n if (idleTimerRef.current) clearTimeout(idleTimerRef.current)\n }, [])\n React.useEffect(() => () => {\n if (idleTimerRef.current) clearTimeout(idleTimerRef.current)\n }, [])\n\n if (!file \|\| !Renderer) {\n // files 為空或 index 超界 — 不渲染\n return null\n }\n\n const showFilmstripResolved = showFilmstrip && files.length > 1\n const showArrows = files.length > 1\n\n // Root 永遠餵 mirror(Radix 視角 controlled);uncontrolled 的 defaultOpen 由\n // useControllable internal state 承載,Radix Esc / dismiss 經 setOpen 同步回 mirror。\n return (\n <DialogPrimitive.Root open={open} onOpenChange={setOpen}>\n <DialogPrimitive.Portal>\n {/* Overlay — FileViewer 固定深色氛圍,與 Dialog 共用 bg-overlay。\n data-theme=\"dark\"(2026-04-30):Overlay 在 Portal 內、是 Content 的 sibling,\n 不繼承 Content 內層的 dark 主題 → `--overlay` 默認 resolve 成 light theme α45 黑。\n FileViewer 永遠 dark(line 899 outer),mask 也須 dark token = α65 黑(更深)\n 才語意一致。同 DropdownMenuContent Portal 處理(line 245)。 /}\n <DialogPrimitive.Overlay\n data-theme=\"dark\"\n className={cn(\n 'fixed inset-0 z-50 bg-overlay',\n surfaceMotion,\n 'data-[state=open]:animate-in data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n )}\n />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n // Edge-to-edge fullscreen,無 inset / 無 radius(與一般 Dialog 差別的所在)\n 'fixed inset-0 z-50 outline-none',\n surfaceMotion,\n 'data-[state=open]:animate-in data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n )}\n // 避免 Radix 自動把焦點送進 Content 的第一個 tabbable —— 我們要留給 viewport\n onOpenAutoFocus={(e) => e.preventDefault()}\n {...props}\n >\n {/ 鎖 dark subtree。Density 繼承 page(不另設 data-density)。\n header 高度透過 `--chrome-header-height` 自動 density-aware(md=48 / lg=56)。\n ── Q1 mask 透明度(2026-04-30)──\n outer 不設 bg → Overlay(`bg-overlay` α45/α65)透出 image 周圍區域,\n 對齊 Notion / Dropbox / Slack lightbox idiom 跟 Dialog mask 同 token 一致。\n chrome(Toolbar / Filmstrip / InfoPanel)各自 `bg-surface-raised` opaque dark\n (對齊 Apple Photos / Drive lightbox 派 — chrome opaque vs mask 半透明,\n 清楚區分 backdrop click 區 vs 互動區)。\n 不用 bg-surface — dark mode `--surface = white α8` 半透明,outer 透明時\n 無 dark backdrop 撐 → 視覺洗白。 /}\n <div\n data-theme=\"dark\"\n className=\"w-full h-full flex flex-col text-foreground\"\n >\n {/ Accessible title — 視覺隱藏但 screen reader 讀得到 /}\n <DialogPrimitive.Title className=\"sr-only\">\n 檔案檢視器:{file.name}\n </DialogPrimitive.Title>\n\n <Toolbar\n file={file}\n capabilities={capabilities}\n zoom={zoom}\n onZoomChange={setZoom}\n onFit={handleFit}\n infoOpen={infoOpen}\n onInfoToggle={handleInfoToggle}\n onDownload={handleDownload}\n allowDownload={allowDownload}\n onClose={() => setOpen(false)}\n labels={labels}\n />\n\n {/ 主區:Viewport + 可選 InfoPanel(右側)\n Arrows visibility = armVisible(state)控制:mouse move 顯示 / 2.5s idle 隱藏 / mouse leave 立即隱藏\n 對齊 Google Photos / Dropbox lightbox / PhotoSwipe world-class canonical /}\n <div className=\"flex-1 min-h-0 flex\">\n <div\n className=\"relative flex-1 min-w-0\"\n onMouseMove={handleViewportMouseMove}\n onMouseLeave={handleViewportMouseLeave}\n // Backdrop click-to-close(對齊 Google Drive / Dropbox lightbox / Apple Photos canonical):\n // 點擊 image 周圍的暗色 backdrop 區關閉,跟 modal mask 同 idiom。\n //\n // 為何 geometric check 而非 closest('img')?\n // react-zoom-pan-pinch 的 TransformComponent 是 wrapper div 蓋在 image 之上(absorb\n // pan/zoom events),click target 是該 wrapper div 不是 <img>。closest('img') 檢查\n // ancestor 永遠 false。改 geometric check:看 click 座標是否落在 <img> 視覺 rect 內。\n onClick={(e) => {\n const t = e.target as HTMLElement\n // 互動元素(side arrows / chrome buttons 透過冒泡)→ 不關\n if (t.closest('button, [role=\"button\"]')) return\n // 點到 image 視覺範圍 → 不關(image 本體 click ≠ close)\n const img = e.currentTarget.querySelector('img')\n if (img) {\n const r = img.getBoundingClientRect()\n if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) return\n }\n // 否則 = 點到 backdrop(outer 不設 bg,半透明 bg-overlay 透出 — 見 Q1 註解)→ close\n setOpen(false)\n }}\n >\n {showArrows && activeIndex > 0 && (\n <div\n className={cn(\n 'absolute left-[var(--layout-space-loose)] top-1/2 -translate-y-1/2 z-10',\n 'transition-opacity duration-150',\n // armVisible state 控制,或 focus-within 時 a11y 強制顯示\n armVisible ? 'opacity-100' : 'opacity-0 pointer-events-none',\n 'focus-within:opacity-100 focus-within:pointer-events-auto',\n )}\n >\n <Button\n variant=\"text\"\n size=\"md\"\n iconOnly\n startIcon={ChevronLeft}\n aria-label={labels.previousFile}\n onClick={() => setIndex(activeIndex - 1)}\n />\n </div>\n )}\n <div className=\"w-full h-full\">\n {/ Suspense 兜 React.lazy renderer(ImageRenderer)chunk 載入。fallback=null\n = 既有 loading 行為——spec「Loading」段:shell 不提供全頁 loading state,\n loading 由 renderer 自理;chunk 載入期間的空 viewport 與 <img> 載入期間視覺一致。 */}\n <React.Suspense fallback={null}>\n <Renderer.component\n file={file}\n zoom={zoom}\n onZoomChange={setZoom}\n fitRequest={fitRequest}\n onCapabilitiesChange={setCapabilities}\n />\n </React.Suspense>\n </div>\n {showArrows && activeIndex < files.length - 1 && (\n <div\n className={cn(\n 'absolute right-[var(--layout-space-loose)] top-1/2 -translate-y-1/2 z-10',\n 'transition-opacity duration-150',\n armVisible ? 'opacity-100' : 'opacity-0 pointer-events-none',\n 'focus-within:opacity-100 focus-within:pointer-events-auto',\n )}\n >\n <Button\n variant=\"text\"\n size=\"md\"\n iconOnly\n startIcon={ChevronRight}\n aria-label={labels.nextFile}\n onClick={() => setIndex(activeIndex + 1)}\n />\n </div>\n )}\n </div>\n {infoOpen && (\n <InfoPanel\n file={file}\n readOnly={readOnly}\n onDescriptionChange={onDescriptionChange}\n onClose={handleInfoClose}\n labels={labels}\n />\n )}\n </div>\n\n {showFilmstripResolved && (\n <Filmstrip\n files={files}\n activeIndex={activeIndex}\n onSelect={setIndex}\n labels={labels}\n />\n )}\n </div>\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n )\n})\nFileViewer.displayName = 'FileViewer'\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 fileViewerMeta = {\n component: 'FileViewer',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n // 'selected' = 縮圖列當前頁持續選中(bg-neutral-selected);'active' 移除 — 全檔無按壓視覺\n // (工具列按壓屬內嵌 Button meta;2026-07-07 詞彙統一 DS-wide 交叉掃補修)。\n states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-muted', 'bg-neutral-selected', 'bg-overlay', 'bg-surface-raised'],\n fg: ['text-fg-muted', 'text-foreground'],\n ring: ['ring-primary', 'ring-ring'],\n },\n} as const\n\nexport { FileViewer }\nexport type { FileInfo, FileRenderer, FileRendererCapabilities, FileRendererProps } from './file-viewer-types'\n"],"names":["FileIcon","XIcon","InfoPanel","Filmstrip","FileViewer"],"mappings":"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"}
1	+ {"version":3,"file":"file-viewer.js","sources":["../../../src/components/FileViewer/file-viewer.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.\n// code-quality-allow: file-size — composite 拼裝(Toolbar / ZoomInput / InfoPanel / Filmstrip + Dialog shell + renderer registry);拆檔會把 useState/useEffect/key handler 跨檔同步過於複雜\nimport * as React from 'react'\nimport * as DialogPrimitive from '@radix-ui/react-dialog'\nimport {\n X as XIcon,\n Download,\n Info,\n ChevronLeft,\n ChevronRight,\n ChevronDown,\n Plus,\n Minus,\n File as FileIcon,\n FileText,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { OVERLAY_SIDE_OFFSET } from '@/design-system/tokens/elevation/overlay-geometry'\nimport { Button } from '@/design-system/components/Button/button'\nimport { Separator } from '@/design-system/components/Separator/separator'\nimport { Input } from '@/design-system/components/Input/input'\nimport { Empty } from '@/design-system/components/Empty/empty'\nimport { AspectRatio } from '@/design-system/components/AspectRatio/aspect-ratio'\nimport { Textarea } from '@/design-system/components/Textarea/textarea'\nimport { Field, FieldLabel } from '@/design-system/components/Field/field'\nimport { DescriptionList, DescriptionItem } from '@/design-system/components/DescriptionList/description-list'\nimport { ItemInlineActionButton } from '@/design-system/patterns/element-anatomy/item-anatomy'\nimport { ChromeHeader } from '@/design-system/patterns/header-canonical/chrome-header'\nimport { ScrollArea } from '@/design-system/components/ScrollArea/scroll-area'\nimport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n} from '@/design-system/components/DropdownMenu/dropdown-menu'\nimport { ARROW_BUTTON_WIDTH,\n useScrollEdges,\n useScrollByPage,\n buildFadeMask,\n OverflowScrollArrow,\n} from '@/design-system/patterns/horizontal-overflow/horizontal-overflow'\nimport { useControllable } from '@/design-system/hooks/use-controllable'\nimport { canRenderImage } from './can-render-image'\nimport type {\n FileInfo,\n FileRenderer,\n FileRendererCapabilities,\n FileRendererProps,\n} from './file-viewer-types'\nimport { surfaceMotion } from \"@/design-system/tokens/motion/overlay-motion\"\n\n/*\n FileViewer — 可延伸的網頁檔案 preview shell(modal fullscreen)\n \n ── 定位 ──\n * 公開、composite 元件。consumer 傳 `files`,FileViewer 處理 overlay / toolbar /\n * keyboard / filmstrip / info panel 一切 chrome;檔案本體由 renderer registry\n * 按 file MIME 決定誰渲染(MVP 內建 ImageRenderer + FallbackRenderer)。\n \n ── 實作基礎 ──\n * 自建 composite,消費 DS primitives:\n * - Radix DialogPrimitive(焦點 trap / Esc / modal 隔離靠 hideOthers aria-hidden — react-dialog@1.1.x 不輸出 aria-modal,保有 shadcn 結構優勢)\n * - `<Empty>` / `<Button>` / `<Input size=\"sm\" autoWidth>`(ZoomInput,default variant)/ `<AspectRatio>` / `<Textarea>` / `<DropdownMenu>`\n * - `patterns/horizontal-overflow`(filmstrip 溢出捲動)\n * 不用 DS 的 `<Dialog>` wrapper:因為 FileViewer 需要 edge-to-edge fullscreen\n * (無 viewport inset / 無 rounded-lg / 無 maxWidth),Dialog 的這些預設都要覆寫。\n * 直接消費 Radix primitive 讓 shell 擁有完整 layout 控制權。\n \n ── Layout Family ──\n * 非 Family 1/2/3/4 — composite / multi-region(Toolbar / Viewport / Filmstrip +\n * 可選 InfoPanel)。見 `file-viewer.spec.md`「Layout Family」段。\n \n ── Extensibility ──\n * `registerFileRenderer(renderer)` 註冊新 renderer;shell 按註冊順序 iterate,\n * 第一個 `canRender(file)` 回 true 的渲染。FallbackRenderer 永遠兜底(未知檔案\n * 類型顯示 icon + 檔名 + download)。\n /\n\n// ─── Renderer Registry ────────────────────────────────────────────────────────\n\n/\n Fallback renderer — 無 renderer 能處理時兜底。\n * 顯示 Empty 佈局:icon + 檔名 + 「請下載檢視」提示。\n /\nconst FallbackRenderer: React.FC<FileRendererProps> = ({ file, onCapabilitiesChange }) => {\n // Contract(file-viewer-types.ts `onCapabilitiesChange` doc):「第一個 renderer mount\n // 時必須 emit」。fallback 不支援 zoom → emit { zoom: false };不 emit 的話 shell 會沿用\n // 上一個 renderer 的 capability(image → 未知檔切換時 toolbar 殘留 zoom controls,\n // `+`/`-`/`0`/`F` 快捷鍵也會對不支援 zoom 的檔案生效)。同 image-renderer.tsx mount emit pattern。\n React.useEffect(() => {\n onCapabilitiesChange({ zoom: false })\n }, [onCapabilitiesChange])\n\n return (\n <div className=\"w-full h-full flex items-center justify-center p-8\">\n <Empty\n icon={FileText}\n title={file.name}\n description={`無法在瀏覽器中預覽此檔案類型（${file.mimeType \|\| 'unknown'}）。請下載後檢視。`}\n />\n </div>\n )\n}\n\nconst fallbackRenderer: FileRenderer = {\n id: 'fallback',\n canRender: () => true,\n component: FallbackRenderer,\n}\n\n// 2026-07-06 D3 bundle fix:ImageRenderer 改 React.lazy 動態 import——FileViewer 是\n// rare-use modal overlay,react-zoom-pan-pinch(~12KB gz)不該在 viewer 從未打開時就進\n// consumer 首屏 bundle。canRenderImage(registry 判斷 + Filmstrip 分流需同步呼叫)已拆至\n// ./can-render-image 保持靜態 import。\nconst LazyImageRenderer = React.lazy(() =>\n import('./image-renderer').then((m) => ({ default: m.ImageRenderer })),\n)\n\nconst imageRenderer: FileRenderer = {\n id: 'image',\n canRender: canRenderImage,\n component: LazyImageRenderer,\n}\n\n// Registry 是 module-singleton:新 renderer 透過 registerFileRenderer 加入。\n// Fallback 永遠最後(兜底),因此用陣列第二段存放。\nconst userRegistered: FileRenderer[] = []\n\nexport function registerFileRenderer(renderer: FileRenderer): void {\n // 去重:同 id 則覆寫\n const existingIdx = userRegistered.findIndex((r) => r.id === renderer.id)\n if (existingIdx >= 0) {\n userRegistered[existingIdx] = renderer\n } else {\n userRegistered.push(renderer)\n }\n}\n\nfunction resolveRenderer(file: FileInfo): FileRenderer {\n // 先查 user registered,再 built-in,最後 fallback\n for (const r of userRegistered) {\n if (r.canRender(file)) return r\n }\n if (imageRenderer.canRender(file)) return imageRenderer\n return fallbackRenderer\n}\n\n// ─── Zoom presets ─────────────────────────────────────────────────────────────\n\ntype ZoomFit = 'fit-width' \| 'fit-page'\n\nconst ZOOM_PRESETS: number[] = [10, 25, 50, 75, 100, 125, 150, 200, 400]\n// i18n-allow-block: DS defaults for zoom fit menu;consumer override via `labels.zoomFitOptions` (future) or fork\nconst ZOOM_FIT_OPTIONS: { value: ZoomFit; label: string }[] = [\n { value: 'fit-width', label: 'Fit to width' },\n { value: 'fit-page', label: 'Fit to page' },\n]\n\nfunction nextZoomIn(current: number): number {\n for (const p of ZOOM_PRESETS) {\n if (p > current) return p\n }\n return ZOOM_PRESETS[ZOOM_PRESETS.length - 1]\n}\nfunction nextZoomOut(current: number): number {\n for (let i = ZOOM_PRESETS.length - 1; i >= 0; i--) {\n if (ZOOM_PRESETS[i] < current) return ZOOM_PRESETS[i]\n }\n return ZOOM_PRESETS[0]\n}\n\n// ─── ZoomInput ────────────────────────────────────────────────────────────────\n\ninterface ZoomInputProps {\n value: number\n onChange: (next: number) => void\n onFit: (fit: ZoomFit) => void\n labels: Pick<Required<FileViewerLabels>, 'zoomInput' \| 'zoomMenu'>\n}\n\n/\n ZoomInput — [−] [% input(default variant + autoWidth)with ⌄ menu trigger] [+]\n \n 世界級對照:Figma zoom control / Adobe Acrobat / Google Slides zoom。\n \n ── 消費 DS primitive ──\n * - `<Button>` iconOnly size=\"sm\" 作 ±按鈕\n * - `<Input size=\"sm\" autoWidth>` 作 %輸入(Toolbar inline editing canonical;autoWidth 隨文字寬)\n * - Input `endSlot` escape hatch 包 `<DropdownMenuTrigger asChild>` + chevron 觸發 DropdownMenu\n * - `<DropdownMenu>` 作 preset + fit 選單(取代原先 Popover + 手刻 button list)\n \n ── 為什麼 inline(不抽獨立 primitive)──\n * 目前只 FileViewer 消費;MVP 階段遵循 YAGNI。當 PDF / Video viewer 也需要相同\n * primitive 時,再依「建立前必查既有 pattern」原則從 FileViewer 抽出升級。\n /\nconst ZoomInput: React.FC<ZoomInputProps> = ({ value, onChange, onFit, labels }) => {\n const [draft, setDraft] = React.useState<string>(`${value}%`)\n const [menuOpen, setMenuOpen] = React.useState(false)\n\n React.useEffect(() => {\n setDraft(`${value}%`)\n }, [value])\n\n const commitDraft = () => {\n const parsed = parseInt(draft.replace(/[^0-9]/g, ''), 10)\n if (Number.isFinite(parsed) && parsed > 0) {\n // 限 10–400 範圍,對齊 ImageRenderer MIN_SCALE/MAX_SCALE\n const clamped = Math.min(400, Math.max(10, parsed))\n onChange(clamped)\n setDraft(`${clamped}%`)\n } else {\n setDraft(`${value}%`)\n }\n }\n\n return (\n // zoom group = toolbar 按鈕群組,`gap-2`(8px)對齊本 DS 按鈕 gap canonical。\n <div className=\"inline-flex items-center gap-2\">\n {/ 縮小 /}\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={Minus}\n aria-label=\"縮小\"\n disabled={value <= 10}\n onClick={() => onChange(nextZoomOut(value))}\n />\n\n {/ % Input + chevron 內嵌為 endSlot(ItemInlineActionButton 作 DropdownMenuTrigger):\n — Input body 可自由打字(chevron 是 Input 內部 element,body 區域 click 不觸發 menu)\n — Chevron 是 inline action,同時是 DropdownMenuTrigger → menu 精確 anchor 在 chevron 下方\n — 靠 Radix asChild + ItemInlineActionButton:視覺是 Input + endAction,行為是 chevron-as-trigger\n — 完全對齊 user AR:「只有 inline action 能觸發選單,menu 對齊 inline action」 /}\n <DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>\n {/ maxLength 限縮(2026-07-09 user 要求「找合理最大值避免無限輸入」):autoWidth 下輸入框寬度隨字數長,\n 無上限則可無限打字撐爆 toolbar。max 合法值「400%」= 4 字(對齊 ZOOM_PRESETS / ImageRenderer MAX_SCALE 400;\n commitDraft 另 clamp 10–400),留 1 字編輯緩衝 → maxLength={5}。 /}\n <Input\n size=\"sm\"\n autoWidth\n maxLength={5}\n aria-label={labels.zoomInput}\n value={draft}\n onChange={(e) => setDraft(e.target.value)}\n onBlur={commitDraft}\n onKeyDown={(e) => {\n if (e.key === 'Enter') {\n e.preventDefault()\n commitDraft()\n ;(e.target as HTMLInputElement).blur()\n }\n }}\n className=\"text-center tabular-nums\"\n endSlot={\n <DropdownMenuTrigger asChild>\n <ItemInlineActionButton\n icon={ChevronDown}\n aria-label={labels.zoomMenu}\n size=\"sm\"\n overlayTrigger\n />\n </DropdownMenuTrigger>\n }\n />\n {/ data-theme=\"dark\":DropdownMenuContent 走 Portal 到 document body 外,\n 不繼承 FileViewer 外層 data-theme=\"dark\",需顯式打 dark 讓選單跟 chrome 一致。\n 加 bg-surface-raised 強制用 dark token(純 data-theme attr 在 Portal 不夠,\n Tailwind 條件 class + CSS variable 都要一起帶) /}\n <DropdownMenuContent\n align=\"end\"\n sideOffset={OVERLAY_SIDE_OFFSET} // 2026-07-04:M17 — elevation.spec「primitive default 必 import 該 const」\n // minWidth 對齊 trigger(Input autoWidth),menu 寬度 fit-content 更貼近觸發點視覺中心\n className=\"min-w-[9rem] w-auto bg-surface-raised text-foreground border-divider\"\n data-theme=\"dark\"\n >\n {/ 內層 data-theme 再覆蓋一次 — 確保 DropdownMenuItem children 都 resolve dark token /}\n <div data-theme=\"dark\" className=\"contents\">\n {ZOOM_FIT_OPTIONS.map((opt) => (\n <DropdownMenuItem\n key={opt.value}\n onSelect={() => onFit(opt.value)}\n >\n {opt.label}\n </DropdownMenuItem>\n ))}\n <DropdownMenuSeparator />\n {ZOOM_PRESETS.map((p) => {\n const selected = p === value\n return (\n <DropdownMenuItem\n key={p}\n onSelect={() => onChange(p)}\n data-state={selected ? 'checked' : undefined}\n className={cn(\n 'tabular-nums',\n selected && 'bg-neutral-selected',\n )}\n >\n {p}%\n </DropdownMenuItem>\n )\n })}\n </div>\n </DropdownMenuContent>\n </DropdownMenu>\n\n {/ 放大 /}\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={Plus}\n aria-label=\"放大\"\n disabled={value >= 400}\n onClick={() => onChange(nextZoomIn(value))}\n />\n </div>\n )\n}\nZoomInput.displayName = 'ZoomInput'\n\n// ─── Toolbar ──────────────────────────────────────────────────────────────────\n\ninterface ToolbarProps {\n file: FileInfo\n capabilities: FileRendererCapabilities\n zoom: number\n onZoomChange: (z: number) => void\n onFit: (fit: ZoomFit) => void\n infoOpen: boolean\n onInfoToggle: () => void\n onDownload?: () => void\n allowDownload: boolean\n onClose: () => void\n labels: Required<FileViewerLabels>\n}\n\nconst Toolbar: React.FC<ToolbarProps> = ({\n file,\n capabilities,\n zoom,\n onZoomChange,\n onFit,\n infoOpen,\n onInfoToggle,\n onDownload,\n allowDownload,\n onClose,\n labels,\n}) => {\n return (\n <ChromeHeader\n // Density:繼承 page(2026-06-15 canonical)。原 lockDensity=\"lg\" 只鎖在 header、沒鎖 body →\n // InfoPanel header(px-loose@lg=24)與其 body(px-loose@page=16)左緣不對齊(圖二 bug)。移除 lock\n // → header + body 全繼承 page density,左緣對齊;FileViewer 全 surface 同一密度(non-special)。\n className={cn(\n // Chrome layer — `bg-surface-raised` 對齊 token semantic「遮蓋型浮層必須不透明」。\n // FileViewer 整體是 overlay,chrome 屬其 raised surface(同 DropdownMenuContent line 244)。\n // 不用 bg-surface(dark = white α8 半透明,outer 透明時失去 backdrop 洗白)。\n // 不用 bg-canvas(那是「頁面最底層」semantic,chrome 不是 page)。\n // ChromeHeader 自帶 flex/items-center/gap-2/shrink-0/h-chrome-header-height/border-b/px-loose\n 'bg-surface-raised',\n )}\n >\n {/ 檔名(左,佔據可用寬度,ellipsis)—— file-type icon 代表檔名的意象(這是什麼檔),\n 對齊 CLAUDE.md「icon 代表 label 意象時與 label 同色」原則:icon 走 text-foreground\n 不走 text-fg-muted(後者是裝飾性 / 輔助 icon 的色階) /}\n <div className=\"flex items-center gap-2 min-w-0 flex-1\">\n <FileIcon size={16} className=\"text-foreground shrink-0\" aria-hidden />\n <span\n className=\"text-body-lg text-foreground truncate\"\n title={file.name}\n >\n {file.name}\n </span>\n </div>\n\n {/ 按鈕順序 canonical:zoom → info → download → close(影響力遞增)\n action-bar 三分區:zoom(data op)/ info+download(action group)/ close(dismiss)\n dismiss 前分隔線 = action-bar「dismiss 跟動作分群」canonical\n\n ── gap-2 canonical(2026-04-21 follow-up)──\n 按鈕間距 8px(gap-2),對齊 Dialog footer `gap-2` / CLAUDE 按鈕間距 SSOT。\n zoom group(ZoomInput)內部同樣是 gap-2(見 `ZoomInput` L197),\n 與這裡 action-group-to-action-group 的 gap-2 一致。 /}\n <div className=\"flex items-center gap-2 shrink-0\">\n {capabilities.zoom && (\n <>\n {/ Zoom group:-/%/+/▼ 屬同類「縮放」操作,群組並在右側加分隔線跟其他動作分群 /}\n <ZoomInput value={zoom} onChange={onZoomChange} onFit={onFit} labels={labels} />\n {/ zoom group → next action group divider(action-bar canonical;v11 升級成 Separator\n 元件,對齊 separator.spec.md「consumer 手動放置 toolbar 群組分隔線 = 用 Separator」)/}\n <Separator orientation=\"vertical\" className=\"h-6 mx-1\" />\n </>\n )}\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={Info}\n aria-label={infoOpen ? labels.infoToggleCollapse : labels.infoToggleExpand}\n pressed={infoOpen}\n onClick={onInfoToggle}\n />\n {allowDownload && (\n <Button\n variant=\"text\"\n size=\"sm\"\n iconOnly\n startIcon={Download}\n aria-label={labels.download}\n onClick={onDownload}\n />\n )}\n {/ action-bar canonical:dismiss 前加分隔線跟其他動作分群(info/download = action group,\n close = dismiss group;v11 升級成 Separator,對齊 separator.spec.md canonical)/}\n <Separator orientation=\"vertical\" className=\"h-6 mx-1\" />\n {/ Close X 走 dismiss canonical(`<Button iconOnly dismiss />`)——對齊 CLAUDE.md\n `button.spec.md`「Dismiss 視覺類」+ `patterns/element-anatomy/item-anatomy.spec.md`\n 「Dismiss canonical」:chrome corner close X = Button dismiss,不是 Inline Action。 /}\n <Button\n iconOnly\n dismiss\n size=\"sm\"\n data-dismiss\n startIcon={XIcon}\n aria-label={labels.close}\n onClick={onClose}\n />\n </div>\n </ChromeHeader>\n )\n}\n\n// ─── InfoPanel ────────────────────────────────────────────────────────────────\n\ninterface InfoPanelProps {\n file: FileInfo\n readOnly: boolean\n onDescriptionChange?: (fileId: string, description: string) => void\n onClose: () => void\n labels: Required<FileViewerLabels>\n}\n\nfunction formatBytes(bytes: number \| undefined): string \| undefined {\n if (bytes == null) return undefined\n if (bytes < 1024) return `${bytes} B`\n if (bytes < 1024 1024) return `${(bytes / 1024).toFixed(1)} KB`\n if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`\n}\n\n// React.memo(2026-07-06 D3):同 Filmstrip——wheel-zoom 每 tick 全 chrome re-render,InfoPanel\n// 開啟時(Field/Textarea/DescriptionList subtree)白付。onClose 走 shell handleInfoClose\n// useCallback;file(files[activeIndex] identity 穩定)/readOnly/onDescriptionChange/labels 本已穩定。\nconst InfoPanel = React.memo(function InfoPanel({\n file,\n readOnly,\n onDescriptionChange,\n onClose,\n labels,\n}: InfoPanelProps) {\n const [draft, setDraft] = React.useState(file.description ?? '')\n\n React.useEffect(() => {\n setDraft(file.description ?? '')\n }, [file.id, file.description])\n\n const commit = () => {\n if (readOnly) return\n if (draft !== (file.description ?? '')) {\n onDescriptionChange?.(file.id, draft)\n }\n }\n\n const sizeText = formatBytes(file.size)\n\n return (\n <aside\n className={cn(\n // Chrome — bg-surface-raised 同 Toolbar / Filmstrip(token semantic「遮蓋型浮層」)\n 'w-80 shrink-0 flex flex-col bg-surface-raised border-l border-divider',\n 'h-full',\n )}\n aria-label={labels.detailPanel}\n >\n {/* Panel header — 與 Toolbar 同 ChromeHeader,繼承 page density(2026-06-15:移除 lockDensity,\n 修 header(原 px-loose@lg=24)與 body(px-loose@page=16)左緣不對齊 = 圖二 bug;全 surface 同密度)。 /}\n <ChromeHeader className=\"justify-between\">\n <h3 className=\"text-body-lg font-medium text-foreground\">{labels.detailsHeading}</h3>\n {/ InfoPanel close 走 dismiss canonical `<Button iconOnly dismiss />`,對齊 button.spec.md\n 「Dismiss 視覺類」+ inline-action.spec.md「Dismiss canonical — X close only」。 /}\n <Button\n iconOnly\n dismiss\n size=\"sm\"\n data-dismiss\n startIcon={XIcon}\n aria-label={labels.detailPanelClose}\n onClick={onClose}\n />\n </ChromeHeader>\n\n {/ Panel body — header(shrink-0)上常駐 + body 走 ScrollArea(高度小時內容可捲動)。\n padding 對齊 layoutSpace v6 規則 4「bounded region → 容器底(無 action buttons)= loose」。\n gap 對齊 v6 規則 3「跨範疇 parallel = loose」(說明 vs 檔案資訊兩個獨立 functional sections,\n 屬「跨範疇 + 不相關」)— 從 gap-4 寫死改為 token-aware loose。 /}\n <ScrollArea className=\"flex-1 min-h-0\">\n <div className={cn(\n 'flex flex-col gap-[var(--layout-space-loose)]',\n 'px-[var(--layout-space-loose)]',\n 'pt-[var(--layout-space-tight)] pb-[var(--layout-space-loose)]',\n )}>\n {/ 說明 — 用 DS Field + FieldLabel + Textarea(2026-04-20 B12 決策:\n FileViewer 一律消費 DS Field 家族,不手刻 `<span>label` + raw control) /}\n <Field>\n <FieldLabel>說明</FieldLabel>\n <Textarea\n value={draft}\n onChange={(e) => setDraft(e.target.value)}\n onBlur={commit}\n readOnly={readOnly}\n placeholder={readOnly ? labels.descriptionPlaceholderReadOnly : labels.descriptionPlaceholderEdit}\n rows={5}\n />\n </Field>\n\n {/ 檔案資訊 — 用 DS DescriptionList horizontal + divided(Google Drive /\n Notion file info panel 模式):\n - section header 用 FieldLabel 同款 typography 保視覺一致\n - DescriptionList orientation=\"horizontal\" divided 提供 row 下底線\n 對齊格線,key 長度不一也易讀\n - 不再手刻 dl/dt/dd — canonical 由 DS primitive own /}\n {/ heading → first-item gap = item → item gap(Gestalt proximity,見 description-list.spec.md) /}\n <div className=\"flex flex-col gap-[var(--layout-space-tight)]\">\n <span className=\"text-body font-normal text-foreground\">{labels.fileInfoHeading}</span>\n <DescriptionList orientation=\"horizontal\" divided>\n <DescriptionItem label=\"檔名\">{file.name}</DescriptionItem>\n <DescriptionItem label=\"類型\">{file.mimeType \|\| '-'}</DescriptionItem>\n {sizeText && (\n <DescriptionItem label=\"大小\">\n <span className=\"tabular-nums\">{sizeText}</span>\n </DescriptionItem>\n )}\n {file.metadata &&\n Object.entries(file.metadata).map(([k, v]) => (\n <DescriptionItem key={k} label={k}>{String(v)}</DescriptionItem>\n ))}\n </DescriptionList>\n </div>\n </div>\n </ScrollArea>\n </aside>\n )\n})\n\n// ─── Filmstrip ────────────────────────────────────────────────────────────────\n\ninterface FilmstripProps {\n files: FileInfo[]\n activeIndex: number\n onSelect: (index: number) => void\n labels: Pick<Required<FileViewerLabels>, 'filmstripLabel'>\n}\n\n// code-quality-allow: long-function — foundational composite main body — 拆 sub-fn 會複雜化 local state / ref / context binding\nconst THUMB_SIZE = 64 // px, 固定\n\n// React.memo(2026-07-06 D3):wheel-zoom 每 tick(trackpad 60Hz+)setZoom → shell 全 chrome\n// re-render,Filmstrip(N thumbs × cn + buildFadeMask)是最貴的無關 subtree。props 已全穩定\n// (files=prop / activeIndex=primitive / onSelect=setIndex useCallback / labels=useMemo)→ memo 真命中。\nconst Filmstrip = React.memo(function Filmstrip({ files, activeIndex, onSelect, labels }: FilmstripProps) {\n const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges<HTMLDivElement>()\n const scrollByPage = useScrollByPage(scrollRef)\n const maskImage = buildFadeMask({ canScroll, atStart, atEnd, reserveArrowWidth: ARROW_BUTTON_WIDTH }) // 2026-07-04:消 SSOT 硬寫(spec 禁止重新定義 ARROW_BUTTON_WIDTH)\n\n // 切換當前檔案時,自動 scroll 讓 active thumb 可見\n React.useEffect(() => {\n const el = scrollRef.current\n if (!el) return\n const active = el.querySelector<HTMLButtonElement>(`[data-thumb-index=\"${activeIndex}\"]`)\n active?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })\n }, [activeIndex, scrollRef])\n\n return (\n <div\n className={cn(\n // Chrome — bg-surface-raised 同 Toolbar / InfoPanel(token semantic「遮蓋型浮層」)\n 'relative shrink-0 h-24 bg-surface-raised border-t border-divider',\n 'flex items-center',\n 'px-[var(--layout-space-loose)]',\n )}\n >\n {canScroll && !atStart && (\n <OverflowScrollArrow direction=\"left\" onClick={() => scrollByPage('left')} />\n )}\n <div\n ref={scrollRef}\n className={cn(\n 'flex items-center',\n // 刻意隱藏 native scrollbar + 用 fade-mask(horizontal-overflow pattern)\n 'scrollbar-none overflow-x-auto overflow-y-hidden h-full py-2',\n 'w-full',\n )}\n style={{\n maskImage,\n WebkitMaskImage: maskImage,\n }}\n >\n {/ 內層 wrapper:mx-auto 讓 thumbs 在少量時水平置中,多量溢出時 mx-auto = 0 自然轉 scroll。\n gap-[var(--layout-space-tight)] 走 DS density-aware token(不用 raw gap-1)——\n 世界級 idiom:Google Drive / Dropbox / Notion file preview 的 filmstrip 都是\n 少量置中 / 多量靠 start scroll。\n ARIA role=\"group\"(非 tablist):filmstrip 是「選圖導航」不是「切換 N 個 tabpanel」——\n lightbox 縮圖膠卷只有單一 viewport,不符 W3C tabs pattern(tab MUST 對應自己的 tabpanel + roving tabindex)。\n 對齊 APG grouped-carousel + PhotoSwipe / codeaccessible.com lightbox 共識:group + button + aria-current。 /}\n <div\n role=\"group\"\n aria-label={labels.filmstripLabel}\n className=\"flex items-center gap-[var(--layout-space-tight)] mx-auto shrink-0\"\n >\n {files.map((file, i) => {\n const active = i === activeIndex\n const isImage = canRenderImage(file)\n const ext = file.name.split('.').pop()?.toUpperCase() ?? '檔'\n return (\n <button\n key={file.id}\n type=\"button\"\n aria-current={active ? 'true' : undefined}\n aria-label={`${i + 1} / ${files.length}:${file.name}`}\n data-thumb-index={i}\n onClick={() => onSelect(i)}\n className={cn(\n 'shrink-0 rounded-md bg-muted overflow-hidden',\n 'outline-none focus-visible:ring-2 focus-visible:ring-ring',\n 'transition-shadow duration-150',\n active\n ? 'ring-2 ring-primary'\n : 'ring-1 ring-border hover:ring-border-hover',\n )}\n style={{ width: THUMB_SIZE, height: THUMB_SIZE }}\n >\n <AspectRatio ratio={1} className=\"w-full h-full\">\n {isImage ? (\n <img\n src={file.url}\n alt=\"\"\n aria-hidden\n className=\"w-full h-full object-cover\"\n draggable={false}\n />\n ) : (\n <div className=\"w-full h-full flex flex-col items-center justify-center gap-0.5\">\n <FileText size={20} className=\"text-fg-muted\" aria-hidden />\n <span className=\"text-footnote text-fg-muted font-medium\">{ext}</span>\n </div>\n )}\n </AspectRatio>\n </button>\n )\n })}\n </div>\n </div>\n {canScroll && !atEnd && (\n <OverflowScrollArrow direction=\"right\" onClick={() => scrollByPage('right')} />\n )}\n </div>\n )\n})\n\n// ─── FileViewer (shell) ───────────────────────────────────────────────────────\n\n/\n i18n-able labels for FileViewer chrome / controls.\n * All keys are optional — defaults are CJK (see `DEFAULT_LABELS`).\n * Consumer typically spreads partial override:\n * `<FileViewer labels={{ close: 'Close', download: 'Download' }} />`\n /\n// code-quality-allow: dead-export — public API surface — consumer-exposed for future use\nexport interface FileViewerLabels {\n /* Zoom input ARIA label /\n zoomInput?: string\n /* Zoom menu trigger ARIA label /\n zoomMenu?: string\n /* Info panel toggle button — shown when panel is OPEN /\n infoToggleCollapse?: string\n /* Info panel toggle button — shown when panel is CLOSED /\n infoToggleExpand?: string\n /* Download button ARIA label /\n download?: string\n /* Close viewer button ARIA label /\n close?: string\n /* InfoPanel outer aside ARIA label /\n detailPanel?: string\n /* InfoPanel heading text /\n detailsHeading?: string\n /* InfoPanel close button ARIA label /\n detailPanelClose?: string\n /* Description textarea placeholder (readOnly) /\n descriptionPlaceholderReadOnly?: string\n /* Description textarea placeholder (editable) /\n descriptionPlaceholderEdit?: string\n /* Detail section — file info section heading /\n fileInfoHeading?: string\n /* Filmstrip group ARIA label（role=\"group\" + thumb button + aria-current,非 tablist）/\n filmstripLabel?: string\n /* Previous-file nav button ARIA label /\n previousFile?: string\n /* Next-file nav button ARIA label /\n nextFile?: string\n}\n\n// i18n-allow: DS defaults;consumer override via `labels` prop\nconst DEFAULT_LABELS: Required<FileViewerLabels> = {\n zoomInput: '縮放比例',\n zoomMenu: '開啟縮放選單',\n infoToggleCollapse: '收合詳細資訊面板',\n infoToggleExpand: '展開詳細資訊面板',\n download: '下載檔案',\n close: '關閉檢視器',\n detailPanel: '檔案詳細資訊',\n detailsHeading: '詳細資訊',\n detailPanelClose: '關閉詳細資訊',\n descriptionPlaceholderReadOnly: '尚無說明',\n descriptionPlaceholderEdit: '為這個檔案加上說明…',\n fileInfoHeading: '檔案資訊',\n filmstripLabel: '檔案佇列',\n previousFile: '上一個檔案',\n nextFile: '下一個檔案',\n}\n\nexport interface FileViewerProps\n extends Omit<\n React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,\n 'onOpenChange'\n > {\n files: FileInfo[]\n initialIndex?: number\n /* Controlled open state。與 `defaultOpen` 二擇一。 /\n open?: boolean\n /* Uncontrolled open 預設(2026-04-25 加,對齊 Dialog/Sheet/Popover dual-mode canonical)。 /\n defaultOpen?: boolean\n onOpenChange?: (open: boolean) => void\n /* 當前索引(controlled);consumer 想自己控制 active file 時傳。不傳則 shell 管理。 /\n index?: number\n onIndexChange?: (index: number) => void\n /* 當前檔案 description 變化。consumer 負責持久化。readOnly 為 true 時不觸發。 /\n onDescriptionChange?: (fileId: string, description: string) => void\n /* true → InfoPanel 的 description textarea 為 readOnly。預設 false。 /\n readOnly?: boolean\n /* 顯示底部 filmstrip。預設 false;files.length < 2 時自動隱藏。 /\n showFilmstrip?: boolean\n /* 是否提供 download 按鈕。預設 true。 /\n allowDownload?: boolean\n /* 自訂 download 行為;未傳則用 anchor download attribute。 /\n onDownload?: (file: FileInfo) => void\n /* i18n labels override. Partial — merged with DS defaults. /\n labels?: FileViewerLabels\n}\n\nconst FileViewer = React.forwardRef<HTMLDivElement, FileViewerProps>(function FileViewer({\n files,\n initialIndex = 0,\n open: openProp,\n defaultOpen,\n onOpenChange,\n index: indexProp,\n onIndexChange,\n onDescriptionChange,\n readOnly = false,\n showFilmstrip = false,\n allowDownload = true,\n onDownload,\n labels: labelsOverride,\n className,\n ...props\n}, ref) {\n const labels = React.useMemo(\n () => ({ ...DEFAULT_LABELS, ...labelsOverride }) satisfies Required<FileViewerLabels>,\n [labelsOverride],\n )\n // Open:受控/非受控雙模式鏡像(消費 DS useControllable;select-menu.tsx 2026-06-11 同修先例)。\n // 原本 keyboard shortcuts effect 與 index-reset effect 直接讀 `open` prop ——\n // uncontrolled(defaultOpen)場景 open === undefined,兩 effect 永遠不啟動(快捷鍵全失效\n // + 重開不重置 index),Toolbar X / backdrop click 的 onOpenChange?.(false) 也是 no-op。\n // 鏡像後 effect / close 都走 mirror:controlled 時純 passthrough,\n // uncontrolled 時 internal state 為準 + onOpenChange 僅通知。\n const [open, setOpen] = useControllable<boolean>({\n value: openProp,\n defaultValue: defaultOpen ?? false,\n onChange: onOpenChange,\n })\n\n // Index:uncontrolled fallback\n const [internalIndex, setInternalIndex] = React.useState(initialIndex)\n const activeIndex = indexProp ?? internalIndex\n\n const setIndex = React.useCallback(\n (next: number) => {\n const clamped = Math.max(0, Math.min(files.length - 1, next))\n if (indexProp === undefined) setInternalIndex(clamped)\n onIndexChange?.(clamped)\n },\n [files.length, indexProp, onIndexChange],\n )\n\n // 開啟時若 uncontrolled,重置為 initialIndex\n React.useEffect(() => {\n if (open && indexProp === undefined) {\n setInternalIndex(Math.max(0, Math.min(files.length - 1, initialIndex)))\n }\n }, [open, initialIndex, files.length, indexProp])\n\n // Info panel open state(shell own)\n const [infoOpen, setInfoOpen] = React.useState(false)\n // 2026-07-06 D3 perf:抽 useCallback 穩定 identity——InfoPanel 上了 React.memo(見上),\n // inline arrow 每 render 新 identity 會打穿 memo shallow-compare。\n const handleInfoToggle = React.useCallback(() => setInfoOpen((o) => !o), [])\n const handleInfoClose = React.useCallback(() => setInfoOpen(false), [])\n\n // Zoom state(shell own,renderer 消費 + 回報)\n const [zoom, setZoom] = React.useState(100)\n // 切換檔案時不再 setZoom(100)— 把「下一張該怎麼初始化 zoom」的決定權交給 renderer:\n // image-renderer 自己 watch file.url change → reset loaded → onLoad → 重 fit-page。\n // 原本 setZoom(100) 在 cache 命中(onLoad 沒 fire)時會卡 100% 不 fit(user 抓的 bug)。\n\n // Fit request(shell → renderer 指令;nonce 遞增讓重複同 fit 也觸發 renderer)\n const [fitRequest, setFitRequest] = React.useState<{ fit: ZoomFit; nonce: number } \| null>(null)\n\n // Renderer capabilities(mount 時 renderer emit)\n const [capabilities, setCapabilities] = React.useState<FileRendererCapabilities>({\n zoom: false,\n })\n\n const file = files[activeIndex]\n const Renderer = file ? resolveRenderer(file) : null\n\n // Fit-to- 下指令給 renderer,renderer 算 container/image 比例後透過 onZoomChange 回報\n const handleFit = React.useCallback((fit: ZoomFit) => {\n setFitRequest((prev) => ({ fit, nonce: (prev?.nonce ?? 0) + 1 }))\n }, [])\n\n // Download handler\n const handleDownload = React.useCallback(() => {\n if (!file) return\n if (onDownload) {\n onDownload(file)\n return\n }\n // 預設:anchor download(同源檔案有效;跨域由 consumer 提供 onDownload)\n const a = document.createElement('a')\n a.href = file.url\n a.download = file.name\n a.target = '_blank'\n a.rel = 'noopener'\n document.body.appendChild(a)\n a.click()\n document.body.removeChild(a)\n }, [file, onDownload])\n\n // Keyboard shortcuts(focus 在 input / textarea 時不觸發)\n React.useEffect(() => {\n if (!open) return\n const handler = (e: KeyboardEvent) => {\n const target = e.target as HTMLElement \| null\n const tag = target?.tagName\n if (tag === 'INPUT' \|\| tag === 'TEXTAREA' \|\| target?.isContentEditable) return\n\n if (e.key === 'ArrowLeft' && files.length > 1) {\n e.preventDefault()\n setIndex(activeIndex - 1)\n } else if (e.key === 'ArrowRight' && files.length > 1) {\n e.preventDefault()\n setIndex(activeIndex + 1)\n } else if (e.key === '+' \|\| e.key === '=') {\n if (capabilities.zoom) {\n e.preventDefault()\n setZoom((z) => nextZoomIn(z))\n }\n } else if (e.key === '-') {\n if (capabilities.zoom) {\n e.preventDefault()\n setZoom((z) => nextZoomOut(z))\n }\n } else if (e.key === '0') {\n if (capabilities.zoom) {\n e.preventDefault()\n setZoom(100)\n }\n } else if (e.key === 'f' \|\| e.key === 'F') {\n if (capabilities.zoom) {\n e.preventDefault()\n handleFit('fit-page')\n }\n } else if (e.key === 'i' \|\| e.key === 'I') {\n e.preventDefault()\n setInfoOpen((o) => !o)\n }\n }\n window.addEventListener('keydown', handler)\n return () => window.removeEventListener('keydown', handler)\n }, [open, activeIndex, files.length, setIndex, capabilities.zoom, handleFit])\n\n // Arrows idle auto-hide(世界級 lightbox canonical:Google Photos / Dropbox / PhotoSwipe)\n // 滑鼠移入 viewport → 顯示箭頭;持續 2.5 秒無 mouse move → 自動淡出(對齊世界級行為)\n const [armVisible, setArmVisible] = React.useState(false)\n const idleTimerRef = React.useRef<ReturnType<typeof setTimeout> \| null>(null)\n const handleViewportMouseMove = React.useCallback(() => {\n setArmVisible(true)\n if (idleTimerRef.current) clearTimeout(idleTimerRef.current)\n idleTimerRef.current = setTimeout(() => setArmVisible(false), 2500)\n }, [])\n const handleViewportMouseLeave = React.useCallback(() => {\n setArmVisible(false)\n if (idleTimerRef.current) clearTimeout(idleTimerRef.current)\n }, [])\n React.useEffect(() => () => {\n if (idleTimerRef.current) clearTimeout(idleTimerRef.current)\n }, [])\n\n if (!file \|\| !Renderer) {\n // files 為空或 index 超界 — 不渲染\n return null\n }\n\n const showFilmstripResolved = showFilmstrip && files.length > 1\n const showArrows = files.length > 1\n\n // Root 永遠餵 mirror(Radix 視角 controlled);uncontrolled 的 defaultOpen 由\n // useControllable internal state 承載,Radix Esc / dismiss 經 setOpen 同步回 mirror。\n return (\n <DialogPrimitive.Root open={open} onOpenChange={setOpen}>\n <DialogPrimitive.Portal>\n {/* Overlay — FileViewer 固定深色氛圍,與 Dialog 共用 bg-overlay。\n data-theme=\"dark\"(2026-04-30):Overlay 在 Portal 內、是 Content 的 sibling,\n 不繼承 Content 內層的 dark 主題 → `--overlay` 默認 resolve 成 light theme α45 黑。\n FileViewer 永遠 dark(line 899 outer),mask 也須 dark token = α65 黑(更深)\n 才語意一致。同 DropdownMenuContent Portal 處理(line 245)。 /}\n <DialogPrimitive.Overlay\n data-theme=\"dark\"\n className={cn(\n 'fixed inset-0 z-50 bg-overlay',\n surfaceMotion,\n 'data-[state=open]:animate-in data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n )}\n />\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n // Edge-to-edge fullscreen,無 inset / 無 radius(與一般 Dialog 差別的所在)\n 'fixed inset-0 z-50 outline-none',\n surfaceMotion,\n 'data-[state=open]:animate-in data-[state=closed]:animate-out',\n 'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n 'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n )}\n // 避免 Radix 自動把焦點送進 Content 的第一個 tabbable —— 我們要留給 viewport\n onOpenAutoFocus={(e) => e.preventDefault()}\n {...props}\n >\n {/ 鎖 dark subtree。Density 繼承 page(不另設 data-density)。\n header 高度透過 `--chrome-header-height` 自動 density-aware(md=48 / lg=56)。\n ── Q1 mask 透明度(2026-04-30)──\n outer 不設 bg → Overlay(`bg-overlay` α45/α65)透出 image 周圍區域,\n 對齊 Notion / Dropbox / Slack lightbox idiom 跟 Dialog mask 同 token 一致。\n chrome(Toolbar / Filmstrip / InfoPanel)各自 `bg-surface-raised` opaque dark\n (對齊 Apple Photos / Drive lightbox 派 — chrome opaque vs mask 半透明,\n 清楚區分 backdrop click 區 vs 互動區)。\n 不用 bg-surface — dark mode `--surface = white α8` 半透明,outer 透明時\n 無 dark backdrop 撐 → 視覺洗白。 /}\n <div\n data-theme=\"dark\"\n className=\"w-full h-full flex flex-col text-foreground\"\n >\n {/ Accessible title — 視覺隱藏但 screen reader 讀得到 /}\n <DialogPrimitive.Title className=\"sr-only\">\n 檔案檢視器:{file.name}\n </DialogPrimitive.Title>\n\n <Toolbar\n file={file}\n capabilities={capabilities}\n zoom={zoom}\n onZoomChange={setZoom}\n onFit={handleFit}\n infoOpen={infoOpen}\n onInfoToggle={handleInfoToggle}\n onDownload={handleDownload}\n allowDownload={allowDownload}\n onClose={() => setOpen(false)}\n labels={labels}\n />\n\n {/ 主區:Viewport + 可選 InfoPanel(右側)\n Arrows visibility = armVisible(state)控制:mouse move 顯示 / 2.5s idle 隱藏 / mouse leave 立即隱藏\n 對齊 Google Photos / Dropbox lightbox / PhotoSwipe world-class canonical /}\n <div className=\"flex-1 min-h-0 flex\">\n <div\n className=\"relative flex-1 min-w-0\"\n onMouseMove={handleViewportMouseMove}\n onMouseLeave={handleViewportMouseLeave}\n // Backdrop click-to-close(對齊 Google Drive / Dropbox lightbox / Apple Photos canonical):\n // 點擊 image 周圍的暗色 backdrop 區關閉,跟 modal mask 同 idiom。\n //\n // 為何 geometric check 而非 closest('img')?\n // react-zoom-pan-pinch 的 TransformComponent 是 wrapper div 蓋在 image 之上(absorb\n // pan/zoom events),click target 是該 wrapper div 不是 <img>。closest('img') 檢查\n // ancestor 永遠 false。改 geometric check:看 click 座標是否落在 <img> 視覺 rect 內。\n onClick={(e) => {\n const t = e.target as HTMLElement\n // 互動元素(side arrows / chrome buttons 透過冒泡)→ 不關\n if (t.closest('button, [role=\"button\"]')) return\n // 點到 image 視覺範圍 → 不關(image 本體 click ≠ close)\n const img = e.currentTarget.querySelector('img')\n if (img) {\n const r = img.getBoundingClientRect()\n if (e.clientX >= r.left && e.clientX <= r.right && e.clientY >= r.top && e.clientY <= r.bottom) return\n }\n // 否則 = 點到 backdrop(outer 不設 bg,半透明 bg-overlay 透出 — 見 Q1 註解)→ close\n setOpen(false)\n }}\n >\n {showArrows && activeIndex > 0 && (\n <div\n className={cn(\n 'absolute left-[var(--layout-space-loose)] top-1/2 -translate-y-1/2 z-10',\n 'transition-opacity duration-150',\n // armVisible state 控制,或 focus-within 時 a11y 強制顯示\n armVisible ? 'opacity-100' : 'opacity-0 pointer-events-none',\n 'focus-within:opacity-100 focus-within:pointer-events-auto',\n )}\n >\n <Button\n variant=\"text\"\n size=\"md\"\n iconOnly\n startIcon={ChevronLeft}\n aria-label={labels.previousFile}\n onClick={() => setIndex(activeIndex - 1)}\n />\n </div>\n )}\n <div className=\"w-full h-full\">\n {/ Suspense 兜 React.lazy renderer(ImageRenderer)chunk 載入。fallback=null\n = 既有 loading 行為——spec「Loading」段:shell 不提供全頁 loading state,\n loading 由 renderer 自理;chunk 載入期間的空 viewport 與 <img> 載入期間視覺一致。 */}\n <React.Suspense fallback={null}>\n <Renderer.component\n file={file}\n zoom={zoom}\n onZoomChange={setZoom}\n fitRequest={fitRequest}\n onCapabilitiesChange={setCapabilities}\n />\n </React.Suspense>\n </div>\n {showArrows && activeIndex < files.length - 1 && (\n <div\n className={cn(\n 'absolute right-[var(--layout-space-loose)] top-1/2 -translate-y-1/2 z-10',\n 'transition-opacity duration-150',\n armVisible ? 'opacity-100' : 'opacity-0 pointer-events-none',\n 'focus-within:opacity-100 focus-within:pointer-events-auto',\n )}\n >\n <Button\n variant=\"text\"\n size=\"md\"\n iconOnly\n startIcon={ChevronRight}\n aria-label={labels.nextFile}\n onClick={() => setIndex(activeIndex + 1)}\n />\n </div>\n )}\n </div>\n {infoOpen && (\n <InfoPanel\n file={file}\n readOnly={readOnly}\n onDescriptionChange={onDescriptionChange}\n onClose={handleInfoClose}\n labels={labels}\n />\n )}\n </div>\n\n {showFilmstripResolved && (\n <Filmstrip\n files={files}\n activeIndex={activeIndex}\n onSelect={setIndex}\n labels={labels}\n />\n )}\n </div>\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n </DialogPrimitive.Root>\n )\n})\nFileViewer.displayName = 'FileViewer'\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 fileViewerMeta = {\n component: 'FileViewer',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n // 'selected' = 縮圖列當前頁持續選中(bg-neutral-selected);'active' 移除 — 全檔無按壓視覺\n // (工具列按壓屬內嵌 Button meta;2026-07-07 詞彙統一 DS-wide 交叉掃補修)。\n states: ['default', 'hover', 'selected', 'focus-visible', 'disabled'],\n tokens: {\n bg: ['bg-muted', 'bg-neutral-selected', 'bg-overlay', 'bg-surface-raised'],\n fg: ['text-fg-muted', 'text-foreground'],\n ring: ['ring-primary', 'ring-ring'],\n },\n} as const\n\nexport { FileViewer }\nexport type { FileInfo, FileRenderer, FileRendererCapabilities, FileRendererProps } from './file-viewer-types'\n"],"names":["FileIcon","XIcon","InfoPanel","Filmstrip","FileViewer"],"mappings":"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"}

package/dist/components/HoverCard/hover-card.d.ts CHANGED Viewed

@@ -25,8 +25,8 @@ export declare const hoverCardMeta: {
     readonly sizes: {};
     readonly states: readonly ["default"];
     readonly tokens: {
-        readonly bg: readonly ["bg-surface-raised"];
-        readonly fg: readonly ["--foreground"];
+        readonly bg: readonly [];
+        readonly fg: readonly [];
         readonly ring: readonly [];
     };
 };

package/dist/components/HoverCard/hover-card.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/HoverCard/hover-card.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAA;AAOhE;;;;;;;;;;GAUG;AAMH,QAAA,MAAM,SAAS,GAAI,qCAAoF,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,4CAE1J,CAAA;AAED,QAAA,MAAM,gBAAgB,oHAA6B,CAAA;AAEnD,QAAA,MAAM,gBAAgB,oKAqCpB,CAAA;AAKF,eAAO,MAAM,aAAa;;;;;;;;;;;~~CAehB~~,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
1	+ {"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/HoverCard/hover-card.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAA;AAOhE;;;;;;;;;;GAUG;AAMH,QAAA,MAAM,SAAS,GAAI,qCAAoF,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,4CAE1J,CAAA;AAED,QAAA,MAAM,gBAAgB,oHAA6B,CAAA;AAEnD,QAAA,MAAM,gBAAgB,oKAqCpB,CAAA;AAKF,eAAO,MAAM,aAAa;;;;;;;;;;;CAiBhB,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

package/dist/components/HoverCard/hover-card.js CHANGED Viewed

@@ -52,8 +52,10 @@ const hoverCardMeta = {
   sizes: {},
   states: ["default"],
   tokens: {
-    bg: ["bg-surface-raised"],
-    fg: ["--foreground"],
+    // 2026-07-16 deep-audit A.1b:清 Phase-1 佔位 — HoverCard 為純行為 primitive,
+    // Content 不套任何 bg/fg(spec「純行為 primitive」段);bg-surface-raised 屬 consumer(ProfileCard)。
+    bg: [],
+    fg: [],
     ring: []
   }
 };

package/dist/components/HoverCard/hover-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"hover-card.js","sources":["../../../src/components/HoverCard/hover-card.tsx"],"sourcesContent":["/*\n @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Avatar(hoverCard)/ OverflowIndicator 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。\n /\nimport as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\nimport { OVERLAY_SIDE_OFFSET } from \"@/design-system/tokens/elevation/overlay-geometry\"\nimport { MOTION_DELAY_RICH_MS, MOTION_DELAY_CLOSE_MS } from \"@/design-system/tokens/motion/motion\"\nimport { overlayMotion } from \"@/design-system/tokens/motion/overlay-motion\"\n\n/*\n HoverCard — hover 顯示可互動內容的浮層（行為 primitive）\n \n 跟 Tooltip 的差異：內容可互動（按鈕、連結、hover 子元素）。\n \n 不含視覺樣式——bg、border、shadow、padding 由 consumer 決定：\n * - OverflowIndicator：深色 Tooltip 樣式（bg-tooltip + data-theme=\"dark\"）\n * - ProfileCard：亮色 Card 樣式（bg-surface-raised + elevation-200）\n \n 只提供：z-index、動畫、sideOffset。\n */\n\n// 2026-06-11 user 拍板 A 案(「確保所有 hover 延遲都有按照設計原則」):Root 預設接 motion token SSOT\n// (rich 700ms open / close 200ms)— 對齊 tooltip.tsx 同 pattern(2026-05-18 拍板 #3A)。\n// 原裸用 Radix 預設 open 700 / close 300:open 巧合同值、close 300 ≠ canonical 200(drift)。\n// Consumer 仍可 per-instance override(Avatar 同值傳入、OverflowIndicator 傳 plain)。\nconst HoverCard = ({ openDelay = MOTION_DELAY_RICH_MS, closeDelay = MOTION_DELAY_CLOSE_MS, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) => (\n <HoverCardPrimitive.Root openDelay={openDelay} closeDelay={closeDelay} {...props} />\n)\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n React.ElementRef<typeof HoverCardPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = 12, ...props }, ref) => (\n // HoverCardPrimitive.Portal(2026-04-23):把 Content 搬到 `document.body`。\n // 不 Portal 時 Content 會 DOM-nested 在 trigger subtree,如 trigger 位於 OverflowIndicator\n // `data-theme=\"dark\"` tooltip 內部 → Avatar 自帶 HoverCard 的 Content 也卡在 dark subtree,\n // CSS var(--foreground) 繼承 dark 值 → ProfileCard 內部文字變 white 看不見(user 抓的 bug)。\n // Portal 到 body 讓 CSS 繼承 chain 從 app root data-theme 起算,不受 trigger subtree 污染。\n //\n // collisionPadding=12:Radix / browser 內部 1-2px rounding 讓 visual padding 比 prop 值少 1-2px。\n // 提高到 12 保證使用者實際看到 ≥ 8px viewport edge gap(overlay-surface「靠邊 8px」canonical)。\n <HoverCardPrimitive.Portal>\n <HoverCardPrimitive.Content\n ref={ref}\n align={align}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n className={cn(\n \"z-50 outline-none\",\n // 2026-05-04 viewport-aware max-h SSOT(對齊 Popover):header/footer 永遠 in-viewport,body 壓縮 scroll\n // 2026-05-05 audit dim 35 fix:加 `min-h-0` 完成 M25 chain invariant\n \"max-h-[var(--radix-hover-card-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0\",\n // 2026-07-05 補 motion-reduce 豁免:對齊 overlay 家族 canonical(popover.tsx / dialog.tsx /\n // dropdown-menu.tsx / tooltip.tsx 同位置寫法)— prefers-reduced-motion 下停用進出場動畫。\n overlayMotion,\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n \"origin-[var(--radix-hover-card-content-transform-origin)]\",\n className,\n )}\n {...props}\n />\n </HoverCardPrimitive.Portal>\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\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 hoverCardMeta = {\n component: 'HoverCard',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default'],\n tokens: {\n bg: ['bg-surface-raised'],\n fg: [~~'--foreground'~~],\n ring: [],\n },\n} as const\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"names":[],"mappings":";;;;;;;AA4BA,MAAM,YAAY,CAAC,EAAE,YAAY,sBAAsB,aAAa,uBAAuB,GAAG,MAAA,0BAC3F,mBAAmB,MAAnB,EAAwB,WAAsB,YAAyB,GAAG,MAAA,CAAO;AAGpF,MAAM,mBAAmB,mBAAmB;AAE5C,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,QAAQ,UAAU,aAAa,qBAAqB,mBAAmB,IAAI,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrG,oBAAC,mBAAmB,QAAnB,EACC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA,EACN,CACF;AAAA,CACD;AACD,iBAAiB,cAAc,mBAAmB,QAAQ;AAInD,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA,~~IACN~~,IAAI,~~CAAC,mBAAmB~~;AAAA,~~IACxB~~,IAAI,~~CAAC,cAAc~~;AAAA,~~IACnB~~,MAAM,CAAA;AAAA,EAAC;AAEX;"}
1	+ {"version":3,"file":"hover-card.js","sources":["../../../src/components/HoverCard/hover-card.tsx"],"sourcesContent":["/*\n @internal — DS-internal 單元(per `.claude/rules/ui-development.md` Public vs Internal canonical;spec frontmatter `isInternal`)。\n * 不進 root barrel front-door;由 Avatar(hoverCard)/ OverflowIndicator 等 DS 元件 wrap 消費,end-user app 請用 wrapper 元件。\n /\nimport as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@/lib/utils\"\nimport { OVERLAY_SIDE_OFFSET } from \"@/design-system/tokens/elevation/overlay-geometry\"\nimport { MOTION_DELAY_RICH_MS, MOTION_DELAY_CLOSE_MS } from \"@/design-system/tokens/motion/motion\"\nimport { overlayMotion } from \"@/design-system/tokens/motion/overlay-motion\"\n\n/*\n HoverCard — hover 顯示可互動內容的浮層（行為 primitive）\n \n 跟 Tooltip 的差異：內容可互動（按鈕、連結、hover 子元素）。\n \n 不含視覺樣式——bg、border、shadow、padding 由 consumer 決定：\n * - OverflowIndicator：深色 Tooltip 樣式（bg-tooltip + data-theme=\"dark\"）\n * - ProfileCard：亮色 Card 樣式（bg-surface-raised + elevation-200）\n \n 只提供：z-index、動畫、sideOffset。\n */\n\n// 2026-06-11 user 拍板 A 案(「確保所有 hover 延遲都有按照設計原則」):Root 預設接 motion token SSOT\n// (rich 700ms open / close 200ms)— 對齊 tooltip.tsx 同 pattern(2026-05-18 拍板 #3A)。\n// 原裸用 Radix 預設 open 700 / close 300:open 巧合同值、close 300 ≠ canonical 200(drift)。\n// Consumer 仍可 per-instance override(Avatar 同值傳入、OverflowIndicator 傳 plain)。\nconst HoverCard = ({ openDelay = MOTION_DELAY_RICH_MS, closeDelay = MOTION_DELAY_CLOSE_MS, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) => (\n <HoverCardPrimitive.Root openDelay={openDelay} closeDelay={closeDelay} {...props} />\n)\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n React.ElementRef<typeof HoverCardPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = 12, ...props }, ref) => (\n // HoverCardPrimitive.Portal(2026-04-23):把 Content 搬到 `document.body`。\n // 不 Portal 時 Content 會 DOM-nested 在 trigger subtree,如 trigger 位於 OverflowIndicator\n // `data-theme=\"dark\"` tooltip 內部 → Avatar 自帶 HoverCard 的 Content 也卡在 dark subtree,\n // CSS var(--foreground) 繼承 dark 值 → ProfileCard 內部文字變 white 看不見(user 抓的 bug)。\n // Portal 到 body 讓 CSS 繼承 chain 從 app root data-theme 起算,不受 trigger subtree 污染。\n //\n // collisionPadding=12:Radix / browser 內部 1-2px rounding 讓 visual padding 比 prop 值少 1-2px。\n // 提高到 12 保證使用者實際看到 ≥ 8px viewport edge gap(overlay-surface「靠邊 8px」canonical)。\n <HoverCardPrimitive.Portal>\n <HoverCardPrimitive.Content\n ref={ref}\n align={align}\n sideOffset={sideOffset}\n collisionPadding={collisionPadding}\n className={cn(\n \"z-50 outline-none\",\n // 2026-05-04 viewport-aware max-h SSOT(對齊 Popover):header/footer 永遠 in-viewport,body 壓縮 scroll\n // 2026-05-05 audit dim 35 fix:加 `min-h-0` 完成 M25 chain invariant\n \"max-h-[var(--radix-hover-card-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0\",\n // 2026-07-05 補 motion-reduce 豁免:對齊 overlay 家族 canonical(popover.tsx / dialog.tsx /\n // dropdown-menu.tsx / tooltip.tsx 同位置寫法)— prefers-reduced-motion 下停用進出場動畫。\n overlayMotion,\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2\",\n \"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n \"origin-[var(--radix-hover-card-content-transform-origin)]\",\n className,\n )}\n {...props}\n />\n </HoverCardPrimitive.Portal>\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\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 hoverCardMeta = {\n component: 'HoverCard',\n family: null, // non-family composite / overlay / layout\n variants: {\n\n },\n sizes: {\n\n },\n states: ['default'],\n tokens: {\n // 2026-07-16 deep-audit A.1b:清 Phase-1 佔位 — HoverCard 為純行為 primitive,\n // Content 不套任何 bg/fg(spec「純行為 primitive」段);bg-surface-raised 屬 consumer(ProfileCard)。\n bg: [],\n fg: [],\n ring: [],\n },\n} as const\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"names":[],"mappings":";;;;;;;AA4BA,MAAM,YAAY,CAAC,EAAE,YAAY,sBAAsB,aAAa,uBAAuB,GAAG,MAAA,0BAC3F,mBAAmB,MAAnB,EAAwB,WAAsB,YAAyB,GAAG,MAAA,CAAO;AAGpF,MAAM,mBAAmB,mBAAmB;AAE5C,MAAM,mBAAmB,MAAM,WAG7B,CAAC,EAAE,WAAW,QAAQ,UAAU,aAAa,qBAAqB,mBAAmB,IAAI,GAAG,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASrG,oBAAC,mBAAmB,QAAnB,EACC,UAAA;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA;AAAA;AAAA,QAGA;AAAA;AAAA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA,EACN,CACF;AAAA,CACD;AACD,iBAAiB,cAAc,mBAAmB,QAAQ;AAInD,MAAM,gBAAgB;AAAA,EAC3B,WAAW;AAAA,EACX,QAAQ;AAAA;AAAA,EACR,UAAU,CAAA;AAAA,EAGV,OAAO,CAAA;AAAA,EAGP,QAAQ,CAAC,SAAS;AAAA,EAClB,QAAQ;AAAA;AAAA;AAAA,IAGN,IAAI,CAAA;AAAA,IACJ,IAAI,CAAA;AAAA,IACJ,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/InlineEdit/inline-edit.d.ts CHANGED Viewed

@@ -6,46 +6,52 @@ export interface InlineEditRenderProps<T = string> {
     value: T;
     /** 草稿變更 */
     onChange: (next: T) => void;
-    /** 提交草稿 → onCommit(next) + 回 read 態 */
+    /** 提交草稿 → onCommit(next) + 回 view 態 */
     commit: () => void;
-    /** 放棄草稿 → 回 read 態不 commit */
+    /** 放棄草稿 → 回 view 態不 commit */
     cancel: () => void;
     /** 進 edit 態時自動 focus 控件 */
     autoFocus: boolean;
-    /** 尺寸(cascade 給控件,與 read 態高度對齊) */
+    /** 尺寸(cascade 給控件,與 view 態高度對齊) */
     size: FieldSize;
     /** 控件無障礙標籤(= label prop) */
     'aria-label'?: string;
 }
 type ReadTag = 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export interface InlineEditProps<T = string> {
-    /** 已提交的欄位值(read 態顯示;edit 進入時作草稿初值)。泛型:string / number / string[] / PersonValue 等 */
+    /** 已提交的欄位值(view 態顯示;edit 進入時作草稿初值)。泛型:string / number / string[] / PersonValue 等 */
     value: T;
     /** 提交回呼 —— blur / Enter 且草稿有變更時觸發 */
     onCommit: (next: T) => void;
     /**
-     * 自訂 edit 態控件(換 Textarea / Select / DatePicker 等 Field 控件)。
-     * 不傳則預設:multiline → `<Textarea>`,否則 `<Input>`(僅 T=string 時預設有效;非 string 值必傳此 prop)。
+     * 自訂 edit 態控件(換 Textarea / Select / DatePicker 等 Field 控件,必用 `mode="edit"`)。
+     * 不傳則預設:multiline → `<Textarea mode="edit">`,否則 `<Input mode="edit">`(僅 T=string 時預設有效;非 string 值必傳此 prop)。
      */
     renderEdit?: (props: InlineEditRenderProps<T>) => React.ReactNode;
     /**
-     * 自訂 read 態格式化顯示。不傳則顯示 `String(value)`(空值顯 placeholder)。
-     * **SSOT 鐵律**:要顯示 Tag / 日期格式 / option label 等,**渲染對應控件的 `mode="display"`**
-     * (如 `renderRead={(v) => <Select mode="display" display="tag" value={v} options={opts} />}`),
-     * 不可自刻 —— 格式化 SSOT 住在該控件的 display mode(見檔頭)。
+     * 自訂 view 態格式化顯示。不傳則顯示 `String(value)`(空值顯 placeholder)。
+     * **SSOT 鐵律**:要顯示 Tag / 日期格式 / option label 等,**渲染對應控件的 `mode="view"`**
+     * (如 `renderRead={(v) => <Select mode="view" display="tag" value={v} options={opts} />}`),
+     * 不可自刻 —— 格式化 + 內部間距 SSOT 住在該控件的 view mode(見檔頭 Model A)。
      */
     renderRead?: (value: T) => React.ReactNode;
-    /** 多行欄位(Jira description 類):read 態換行 + 預設 edit 態用 `<Textarea>`,Enter=換行、Cmd/Ctrl+Enter 或 blur 提交 */
+    /** 多行欄位(Jira description 類):view 態換行 + 預設 edit 態用 `<Textarea>`,Enter=換行、Cmd/Ctrl+Enter 或 blur 提交 */
     multiline?: boolean;
-    /** 欄位人類可讀名稱 —— 組 read 按鈕 aria-label(「編輯 {label}」)+ 控件 aria-label */
+    /**
+     * 是否可編輯(預設 true)。false → view 態無 hover 入口、無藍框、不可點進 edit(對齊世界級就地編輯
+     * **無 disabled 態**,鎖定 = 純 view 無入口、**不灰化**;cite 見檔頭 MUI X / AG Grid URL)。
+     * 永久唯讀資料 → 用 `<Control mode="view">` 或此 prop false;不用 disabled。
+     */
+    editable?: boolean;
+    /** 欄位人類可讀名稱 —— 組 view 按鈕 aria-label(「編輯 {label}」)+ 控件 aria-label */
     label?: string;
-    /** 空值時 read 態顯示的提示文字(fg-muted) */
+    /** 空值時 view 態顯示的提示文字(fg-muted) */
     placeholder?: string;
-    /** 尺寸 —— read 態最小高度 + 預設 Input 尺寸(與 Field 家族一致) */
+    /** 尺寸 —— view 態最小高度 + 預設 Input 尺寸(不傳則經 useResolvedFieldSize 接 Field size cascade,standalone fallback sm) */
     size?: FieldSize;
-    /** read 態語意標籤(標題場景傳 'h1'/'h2' 維持文件大綱;預設 'span') */
+    /** view 態語意標籤(標題場景傳 'h1'/'h2' 維持文件大綱;預設 'span') */
     as?: ReadTag;
-    /** read 態文字樣式(如標題 `text-h4 font-bold`) */
+    /** view 態文字樣式(如標題 `text-h4 font-bold`) */
     readClassName?: string;
     /** 外層容器 className */
     className?: string;
@@ -54,6 +60,7 @@ declare const InlineEdit: (<T = string>(props: InlineEditProps<T> & {
     ref?: React.Ref<HTMLDivElement>;
 }) => React.ReactElement) & {
     displayName?: string;
+    fieldPreferredSize?: FieldSize;
 };
 export { InlineEdit };
 //# sourceMappingURL=inline-edit.d.ts.map

package/dist/components/InlineEdit/inline-edit.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inline-edit.d.ts","sourceRoot":"","sources":["../../../src/components/InlineEdit/inline-edit.tsx"],"names":[],"mappings":"~~AAoBA~~,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAA;AAO/E,yFAAyF;AACzF,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,MAAM;IAC/C,wCAAwC;IACxC,KAAK,EAAE,CAAC,CAAA;IACR,WAAW;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC3B,uCAAuC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,2BAA2B;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,IAAI,EAAE,SAAS,CAAA;IACf,4BAA4B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,KAAK,OAAO,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE7E,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,MAAM;IACzC,oFAAoF;IACpF,KAAK,EAAE,CAAC,CAAA;IACR,qCAAqC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1C,oGAAoG;IACpG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,~~mDAAmD~~;~~IACnD~~,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,mDAAmD;IACnD,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;~~AAuMD~~,QAAA,MAAM,UAAU,EAAuC,CAAC,CAAC,CAAC,GAAG,MAAM,EACjE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA;~~AAGnD~~,OAAO,EAAE,UAAU,EAAE,CAAA"}
1	+ {"version":3,"file":"inline-edit.d.ts","sourceRoot":"","sources":["../../../src/components/InlineEdit/inline-edit.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gDAAgD,CAAA;AAO/E,yFAAyF;AACzF,MAAM,WAAW,qBAAqB,CAAC,CAAC,GAAG,MAAM;IAC/C,wCAAwC;IACxC,KAAK,EAAE,CAAC,CAAA;IACR,WAAW;IACX,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC3B,uCAAuC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,8BAA8B;IAC9B,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,2BAA2B;IAC3B,SAAS,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,IAAI,EAAE,SAAS,CAAA;IACf,4BAA4B;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,KAAK,OAAO,GAAG,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAE7E,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,MAAM;IACzC,oFAAoF;IACpF,KAAK,EAAE,CAAC,CAAA;IACR,qCAAqC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC3B;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC1C,oGAAoG;IACpG,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,4GAA4G;IAC5G,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,mDAAmD;IACnD,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,0CAA0C;IAC1C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAiRD,QAAA,MAAM,UAAU,EAAuC,CAAC,CAAC,CAAC,GAAG,MAAM,EACjE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,KAC5D,KAAK,CAAC,YAAY,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAC;IAAC,kBAAkB,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AAMnF,OAAO,EAAE,UAAU,EAAE,CAAA"}