@qijenchen/design-system 0.1.0-beta.10

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

@@ -0,0 +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 { 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 {\n  useScrollEdges,\n  useScrollByPage,\n  buildFadeMask,\n  OverflowScrollArrow,\n} from '@/design-system/patterns/horizontal-overflow/horizontal-overflow'\nimport { ImageRenderer, canRenderImage } from './image-renderer'\nimport type {\n  FileInfo,\n  FileRenderer,\n  FileRendererCapabilities,\n} from './file-viewer-types'\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 / aria-modal,保有 shadcn 結構優勢)\n *   - `<Empty>` / `<Button>` / `<Input variant=\"bare\">` / `<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<{ file: FileInfo }> = ({ file }) => (\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\nconst fallbackRenderer: FileRenderer = {\n  id: 'fallback',\n  canRender: () => true,\n  component: ({ file }) => <FallbackRenderer file={file} />,\n}\n\nconst imageRenderer: FileRenderer = {\n  id: 'image',\n  canRender: canRenderImage,\n  component: ImageRenderer,\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(bare)with ⌄ menu trigger] [+]\n *\n * 世界級對照:Figma zoom control / Adobe Acrobat / Google Slides zoom。\n *\n * ── 消費 DS primitive ──\n *   - `<Button>` iconOnly size=\"sm\" 作 ±按鈕\n *   - `<Input variant=\"bare\" size=\"sm\">` 作 %輸入(Toolbar inline editing canonical)\n *   - Input `endAction` slot 提供 ⌄ 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        <Input\n          size=\"sm\"\n          autoWidth\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={8}\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      lockDensity=\"lg\"\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 內部例外 gap-0.5(見 ZoomInput) — 那是「連緊 segmented pill」語意,\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\nconst InfoPanel: React.FC<InfoPanelProps> = ({\n  file,\n  readOnly,\n  onDescriptionChange,\n  onClose,\n  labels,\n}) => {\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 等高(consume ChromeHeader lockDensity=\"lg\"),視覺一致 */}\n      <ChromeHeader lockDensity=\"lg\" 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\nconst Filmstrip: React.FC<FilmstripProps> = ({ files, activeIndex, onSelect, labels }) => {\n  const { scrollRef, atStart, atEnd, canScroll } = useScrollEdges<HTMLDivElement>()\n  const scrollByPage = useScrollByPage(scrollRef)\n  const maskImage = buildFadeMask({ canScroll, atStart, atEnd, reserveArrowWidth: 32 })\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            role=\"tablist\" 擺在 tabs 的直接父元件,符合 ARIA tab pattern 語意。 */}\n        <div\n          role=\"tablist\"\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              role=\"tab\"\n              aria-selected={active}\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 tablist ARIA label */\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,\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  // 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\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  return (\n    <DialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>\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            '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            '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          // 避免 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={() => setInfoOpen((o) => !o)}\n              onDownload={handleDownload}\n              allowDownload={allowDownload}\n              onClose={() => onOpenChange?.(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(image-renderer TransformComponent 透出的 bg-canvas)→ close\n                  onOpenChange?.(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                  <Renderer.component\n                    file={file}\n                    zoom={zoom}\n                    onZoomChange={setZoom}\n                    fitRequest={fitRequest}\n                    onCapabilitiesChange={setCapabilities}\n                  />\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={() => setInfoOpen(false)}\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  states: ['default', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-muted', 'bg-surface', '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","FileViewer"],"mappings":"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"}

package/dist/components/FileViewer/image-renderer.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { FileRendererProps } from './file-viewer-types';
+export declare const ImageRenderer: React.FC<FileRendererProps>;
+/** 判斷檔案是否可用 ImageRenderer 渲染。 */
+export declare function canRenderImage(file: {
+    mimeType: string;
+    name: string;
+}): boolean;
+//# sourceMappingURL=image-renderer.d.ts.map

package/dist/components/FileViewer/image-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-renderer.d.ts","sourceRoot":"","sources":["../../../src/components/FileViewer/image-renderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AA6B5D,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiNrD,CAAA;AAKD,iCAAiC;AACjC,wBAAgB,cAAc,CAAC,IAAI,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAIhF"}

package/dist/components/FileViewer/image-renderer.js

@@ -0,0 +1,165 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
+const MIN_SCALE = 0.1;
+const MAX_SCALE = 4;
+const ImageRenderer = ({
+  file,
+  zoom,
+  onZoomChange,
+  fitRequest,
+  onCapabilitiesChange
+}) => {
+  const apiRef = React.useRef(null);
+  const imgRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const [loaded, setLoaded] = React.useState(false);
+  const handleImageLoadRafIdRef = React.useRef(0);
+  React.useEffect(() => () => {
+    if (handleImageLoadRafIdRef.current) cancelAnimationFrame(handleImageLoadRafIdRef.current);
+  }, []);
+  const lastFitModeRef = React.useRef("fit-page");
+  const programmaticZoomRef = React.useRef(false);
+  React.useEffect(() => {
+    onCapabilitiesChange({ zoom: true });
+  }, [onCapabilitiesChange]);
+  React.useEffect(() => {
+    setLoaded(false);
+    lastFitModeRef.current = "fit-page";
+    const img = imgRef.current;
+    if (img && img.complete && img.naturalWidth > 0) {
+      Promise.resolve().then(() => handleImageLoad());
+    }
+  }, [file.url]);
+  const computeFitScale = React.useCallback((fit) => {
+    const img = imgRef.current;
+    const container = containerRef.current;
+    if (!img || !container) return null;
+    if (!img.naturalWidth || !img.naturalHeight) return null;
+    const cw = container.clientWidth;
+    const ch = container.clientHeight;
+    if (cw <= 0 || ch <= 0) return null;
+    const widthRatio = cw / img.naturalWidth;
+    const heightRatio = ch / img.naturalHeight;
+    return fit === "fit-width" ? widthRatio : Math.min(widthRatio, heightRatio);
+  }, []);
+  const clampToPct = React.useCallback((scale) => {
+    const clamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale));
+    return Math.floor(clamped * 100);
+  }, []);
+  const handleImageLoad = React.useCallback(() => {
+    setLoaded(true);
+    const scale = computeFitScale("fit-page");
+    if (scale == null) return;
+    const pct = clampToPct(scale);
+    lastFitModeRef.current = "fit-page";
+    if (handleImageLoadRafIdRef.current) cancelAnimationFrame(handleImageLoadRafIdRef.current);
+    handleImageLoadRafIdRef.current = requestAnimationFrame(() => {
+      handleImageLoadRafIdRef.current = 0;
+      onZoomChange(pct);
+    });
+  }, [computeFitScale, clampToPct, onZoomChange]);
+  React.useEffect(() => {
+    if (!loaded) return;
+    const container = containerRef.current;
+    if (!container) return;
+    let rafId = 0;
+    const obs = new ResizeObserver(() => {
+      if (rafId) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        const mode = lastFitModeRef.current;
+        if (mode === "manual") return;
+        const scale = computeFitScale(mode);
+        if (scale == null) return;
+        onZoomChange(clampToPct(scale));
+      });
+    });
+    obs.observe(container);
+    return () => {
+      obs.disconnect();
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [loaded, computeFitScale, clampToPct, onZoomChange]);
+  const handleDoubleClick = React.useCallback(() => {
+    if (!loaded) return;
+    const fitScale = computeFitScale("fit-page");
+    if (fitScale == null) return;
+    const fitPct = clampToPct(fitScale);
+    const atFit = Math.abs(zoom - fitPct) < 5;
+    const targetPct = atFit ? 100 : fitPct;
+    lastFitModeRef.current = atFit ? "manual" : "fit-page";
+    onZoomChange(targetPct);
+  }, [loaded, zoom, computeFitScale, clampToPct, onZoomChange]);
+  React.useEffect(() => {
+    const api = apiRef.current;
+    if (!api || !loaded) return;
+    const currentScale = api.state.scale;
+    const targetScale = zoom / 100;
+    if (Math.abs(currentScale - targetScale) < 5e-3) return;
+    programmaticZoomRef.current = true;
+    api.centerView(targetScale, 200);
+    const t = setTimeout(() => {
+      programmaticZoomRef.current = false;
+    }, 280);
+    return () => clearTimeout(t);
+  }, [zoom, loaded]);
+  React.useEffect(() => {
+    if (!fitRequest || !loaded) return;
+    const scale = computeFitScale(fitRequest.fit);
+    if (scale == null) return;
+    lastFitModeRef.current = fitRequest.fit;
+    onZoomChange(clampToPct(scale));
+  }, [fitRequest, loaded, computeFitScale, clampToPct, onZoomChange]);
+  const handleTransformed = React.useCallback(
+    (_ref, state) => {
+      if (programmaticZoomRef.current) return;
+      const nextZoom = Math.round(state.scale * 100);
+      if (nextZoom !== zoom) {
+        lastFitModeRef.current = "manual";
+        onZoomChange(nextZoom);
+      }
+    },
+    [zoom, onZoomChange]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: "w-full h-full overflow-hidden", onDoubleClick: handleDoubleClick, children: /* @__PURE__ */ jsx(
+    TransformWrapper,
+    {
+      ref: apiRef,
+      initialScale: 1,
+      minScale: MIN_SCALE,
+      maxScale: MAX_SCALE,
+      centerOnInit: true,
+      centerZoomedOut: true,
+      limitToBounds: true,
+      wheel: { step: 0.03 },
+      doubleClick: { disabled: true },
+      onTransform: handleTransformed,
+      children: /* @__PURE__ */ jsx(TransformComponent, { wrapperClass: "!w-full !h-full", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          ref: imgRef,
+          src: file.url,
+          alt: file.name,
+          onLoad: handleImageLoad,
+          draggable: false,
+          className: "max-w-none max-h-none select-none",
+          style: { pointerEvents: "none" }
+        }
+      ) })
+    }
+  ) });
+};
+ImageRenderer.displayName = "ImageRenderer";
+const IMAGE_EXTS = /* @__PURE__ */ new Set(["jpg", "jpeg", "png", "gif", "webp", "svg", "avif", "bmp", "ico"]);
+function canRenderImage(file) {
+  var _a;
+  if (file.mimeType.startsWith("image/")) return true;
+  const ext = (_a = file.name.split(".").pop()) == null ? void 0 : _a.toLowerCase();
+  return ext ? IMAGE_EXTS.has(ext) : false;
+}
+export {
+  ImageRenderer,
+  canRenderImage
+};
+//# sourceMappingURL=image-renderer.js.map

package/dist/components/FileViewer/image-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-renderer.js","sources":["../../../src/components/FileViewer/image-renderer.tsx"],"sourcesContent":["// @benchmark-unverified-blanket: file-level retraction per M22 (d) — claims herein not individually URL-cited; treat as unverified visual/usage rumor unless retrofit per-claim. Hook escape preserved.\nimport * as React from 'react'\nimport {\n  TransformWrapper,\n  TransformComponent,\n  type ReactZoomPanPinchRef,\n} from 'react-zoom-pan-pinch'\nimport type { FileRendererProps } from './file-viewer-types'\n\n/**\n * ImageRenderer — FileViewer 的圖片 renderer。\n *\n * ── 世界級 zoom semantic canonical(2026-04-21 重寫)──\n * Figma / Preview.app / Adobe Acrobat / Google Drive 共通:\n *   - `100%` = image natural pixel size(**非** CSS contain-scaled)\n *   - 開圖預設 fit-to-page(image 自動 fit,zoom input 顯示 fit % 如 40%)\n *   - `fit-to-width` = image width 填滿 container width(portrait 會 overflow 垂直)\n *   - `fit-to-page` = image 完整可見(contain semantic)\n *   - `+/-` preset 改 zoom 對應 natural 倍率,精準\n *\n * ── 實作細節 ──\n * image 不走 CSS `object-contain`(那會 pre-scale,導致 transform.scale 解讀錯誤);\n * 改走 **natural size + transform scale 管實際顯示**。onLoad 時算 fit-page scale\n * 再 `onZoomChange(fitPct)` 將 UI zoom 同步到真實倍率。\n *\n * ── 為什麼消費 react-zoom-pan-pinch ──\n * Zoom + pan 是行為 primitive;自寫 pinch / wheel 踩大量 edge case\n * (trackpad vs mouse / momentum / bounds),library 是 canonical 解法\n * (世界級 Figma Community / Miro embed / PhotoSwipe 同類流派)。\n */\n\nconst MIN_SCALE = 0.1 // 10%\nconst MAX_SCALE = 4.0 // 400%\n\ntype FitMode = 'fit-width' | 'fit-page'\n\nexport const ImageRenderer: React.FC<FileRendererProps> = ({\n  file,\n  zoom,\n  onZoomChange,\n  fitRequest,\n  onCapabilitiesChange,\n}) => {\n  const apiRef = React.useRef<ReactZoomPanPinchRef | null>(null)\n  const imgRef = React.useRef<HTMLImageElement | null>(null)\n  const containerRef = React.useRef<HTMLDivElement | null>(null)\n  const [loaded, setLoaded] = React.useState(false)\n  // 2026-05-16 Round 5 codex audit fix:capture image-load rAF ID + cancel on unmount\n  // (原 uncancelled rAF 可能 unmount 後 fire onZoomChange → setState 後 component 已 gone)\n  const handleImageLoadRafIdRef = React.useRef<number>(0)\n  React.useEffect(() => () => { if (handleImageLoadRafIdRef.current) cancelAnimationFrame(handleImageLoadRafIdRef.current) }, [])\n  // Q2 RWD:track「user 最後一次的 zoom 意圖」— fit-page / fit-width 自動 reflow,manual 不動。\n  // 對齊 Apple Photos / Drive canonical:resize 時若 user 在 fit mode → recompute,manual zoom → 維持。\n  const lastFitModeRef = React.useRef<FitMode | 'manual'>('fit-page')\n  // 區分「user wheel/pinch」vs「programmatic centerView」— lib onTransform 兩者都觸發,\n  // 用 flag 防 programmatic 的 onTransform 誤標 mode = manual。\n  const programmaticZoomRef = React.useRef(false)\n\n  // 宣告 capability — shell 用此決定 toolbar 內容。\n  React.useEffect(() => {\n    onCapabilitiesChange({ zoom: true })\n  }, [onCapabilitiesChange])\n\n  // file.url 切換 → reset state,等 onLoad 重 fit。\n  // 原本 bug:cache 命中時 onLoad 不 fire → handleImageLoad 不跑 → zoom 卡上一張的值\n  // (或 shell 設的 100%)→ user 看到「同一張圖每次切過來尺寸不一致」。\n  React.useEffect(() => {\n    setLoaded(false)\n    lastFitModeRef.current = 'fit-page'\n    // cache 命中(<img complete>)→ onLoad 可能不 fire,直接觸發 handleImageLoad 邏輯\n    const img = imgRef.current\n    if (img && img.complete && img.naturalWidth > 0) {\n      // 等下一個 microtask,確保 ref / state 都到位\n      Promise.resolve().then(() => handleImageLoad())\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [file.url])\n\n  // 算 fit scale(container 寬高 / image natural 寬高)\n  const computeFitScale = React.useCallback((fit: FitMode): number | null => {\n    const img = imgRef.current\n    const container = containerRef.current\n    if (!img || !container) return null\n    if (!img.naturalWidth || !img.naturalHeight) return null\n    const cw = container.clientWidth\n    const ch = container.clientHeight\n    if (cw <= 0 || ch <= 0) return null\n    const widthRatio = cw / img.naturalWidth\n    const heightRatio = ch / img.naturalHeight\n    // fit-width = 寬填滿;fit-page = 完整可見(取較小 scale)\n    return fit === 'fit-width' ? widthRatio : Math.min(widthRatio, heightRatio)\n  }, [])\n\n  const clampToPct = React.useCallback((scale: number): number => {\n    const clamped = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale))\n    // Floor 而非 round:fit-to-page / fit-to-width 時 scale 是 float(e.g. 0.8356)。\n    // round(0.8356 * 100) = 84 → 實際 scale 0.84 → image 比 canvas 大 4px,垂直溢出破壞\n    // 對稱置中(user 抓:「上下邊距不對稱」)。Floor → 0.83 → image 比 canvas 小,永遠\n    // 完整可見 + 視覺 symmetric padding。代價是最多 ~1% 的空間餘量,視覺幾乎看不出。\n    return Math.floor(clamped * 100)\n  }, [])\n\n  // Image onLoad → 自動 fit-to-page(世界級開圖預設)\n  const handleImageLoad = React.useCallback(() => {\n    setLoaded(true)\n    const scale = computeFitScale('fit-page')\n    if (scale == null) return\n    const pct = clampToPct(scale)\n    lastFitModeRef.current = 'fit-page'\n    // 等 transform 就緒再更新(避免 initialScale=1 → fit 過程跳兩段)\n    if (handleImageLoadRafIdRef.current) cancelAnimationFrame(handleImageLoadRafIdRef.current)\n    handleImageLoadRafIdRef.current = requestAnimationFrame(() => {\n      handleImageLoadRafIdRef.current = 0\n      onZoomChange(pct)\n    })\n  }, [computeFitScale, clampToPct, onZoomChange])\n\n  // Q2 RWD:container resize 時若在 fit mode 重算 — 對齊 Apple Photos / Drive canonical\n  // rAF debounce:drag window edge 期間 ResizeObserver 連續 fire 數十次,\n  // 合併到下一 frame 只觸發一次 → 避免 race / 過多 centerView animation 互相打斷。\n  React.useEffect(() => {\n    if (!loaded) return\n    const container = containerRef.current\n    if (!container) return\n    let rafId = 0\n    const obs = new ResizeObserver(() => {\n      if (rafId) cancelAnimationFrame(rafId)\n      rafId = requestAnimationFrame(() => {\n        rafId = 0\n        const mode = lastFitModeRef.current\n        if (mode === 'manual') return\n        const scale = computeFitScale(mode)\n        if (scale == null) return\n        onZoomChange(clampToPct(scale))\n      })\n    })\n    obs.observe(container)\n    return () => {\n      obs.disconnect()\n      if (rafId) cancelAnimationFrame(rafId)\n    }\n  }, [loaded, computeFitScale, clampToPct, onZoomChange])\n\n  // Q3 雙擊 toggle fit ↔ 100%(對齊 Apple Photos / Preview.app / Imgur / PhotoSwipe canonical)\n  const handleDoubleClick = React.useCallback(() => {\n    if (!loaded) return\n    const fitScale = computeFitScale('fit-page')\n    if (fitScale == null) return\n    const fitPct = clampToPct(fitScale)\n    // 在 fit-page 附近(±5pt)→ 跳 100% natural;否則 → 回 fit-page\n    const atFit = Math.abs(zoom - fitPct) < 5\n    const targetPct = atFit ? 100 : fitPct\n    lastFitModeRef.current = atFit ? 'manual' : 'fit-page'  // 跳 100% = manual,回 fit = fit mode\n    onZoomChange(targetPct)\n  }, [loaded, zoom, computeFitScale, clampToPct, onZoomChange])\n\n  // 外部 zoom 變動(preset / ± / 打字 / fit request)→ centerView 重定位\n  // library canonical `centerView` 同時處理 scale + 置中 + animation + bounds。\n  React.useEffect(() => {\n    const api = apiRef.current\n    if (!api || !loaded) return\n    const currentScale = api.state.scale\n    const targetScale = zoom / 100\n    if (Math.abs(currentScale - targetScale) < 0.005) return\n    // 標記 programmatic — onTransform 期間不要被誤標 manual mode\n    programmaticZoomRef.current = true\n    api.centerView(targetScale, 200)\n    // 動畫 ~200ms + buffer 後解 flag\n    const t = setTimeout(() => { programmaticZoomRef.current = false }, 280)\n    return () => clearTimeout(t)\n  }, [zoom, loaded])\n\n  // Fit request(toolbar 菜單點 fit-width / fit-page)→ 算 scale emit 回 shell\n  React.useEffect(() => {\n    if (!fitRequest || !loaded) return\n    const scale = computeFitScale(fitRequest.fit)\n    if (scale == null) return\n    lastFitModeRef.current = fitRequest.fit  // 記 fit mode 給 ResizeObserver 用\n    onZoomChange(clampToPct(scale))\n  }, [fitRequest, loaded, computeFitScale, clampToPct, onZoomChange])\n\n  // 內部 wheel / pinch zoom → 同步回 shell + 標記為 manual mode(打破 fit auto-reflow)\n  // programmatic centerView 期間 lib 也會 fire onTransform → 用 flag 跳過,避免誤標 manual。\n  const handleTransformed = React.useCallback(\n    (_ref: ReactZoomPanPinchRef, state: { scale: number }) => {\n      if (programmaticZoomRef.current) return  // programmatic update,不標 manual\n      const nextZoom = Math.round(state.scale * 100)\n      if (nextZoom !== zoom) {\n        lastFitModeRef.current = 'manual'\n        onZoomChange(nextZoom)\n      }\n    },\n    [zoom, onZoomChange],\n  )\n\n  return (\n    <div ref={containerRef} className=\"w-full h-full overflow-hidden\" onDoubleClick={handleDoubleClick}>\n      <TransformWrapper\n        // any-allow: react-zoom-pan-pinch TransformWrapper ref type not exported; API surface stable per lib docs\n        ref={apiRef as any}\n        initialScale={1}\n        minScale={MIN_SCALE}\n        maxScale={MAX_SCALE}\n        centerOnInit\n        centerZoomedOut\n        // Teams 對標(2026-04-23):image viewer 走 chat-app lightbox 慣例 —\n        // drag 時 image 保持在 canvas bounds 內(zoom-fit 時 drag 無意義,zoom-in 時 drag pan 有限制)。\n        // `limitToBounds=true` 跟 Microsoft Teams / Slack / iOS Photos 等 chat-lightbox 互動一致,\n        // 避免 Figma-canvas 式「可 drag 到任意位置」的無界體驗混淆 viewer 語境。\n        limitToBounds={true}\n        // Wheel zoom canonical:\n        // - `step: 0.03` = 每 tick ~3% scale,對齊 Figma / Preview.app 細緻度\n        //   (原 0.1 = 10% 太粗,接近 Google Slides 離散慣例)\n        // - multiplicative 等距:library 內部 scale factor 乘算,log 視覺等距\n        // 註:原本用 `smoothStep: 0.005` 但當前 lib type 不含該 key;若需 trackpad 細緻,\n        // 升級 react-zoom-pan-pinch 到有此 prop 的版本或切到 `smoothScroll` API\n        wheel={{ step: 0.03 }}\n        // Q3 雙擊改自定 handler:lib `mode: 'reset'` 永遠 reset 到 initialScale=1 → 100%,\n        // 失去 fit ↔ 100% toggle UX(Apple Photos / Drive canonical)。disabled lib 預設 + 自定 onDoubleClick。\n        doubleClick={{ disabled: true }}\n        onTransform={handleTransformed}\n      >\n        {/* 2026-04-23 debug fix:contentClass 不設 `!w-full !h-full`。\n            設 `!w-full !h-full` 會讓 `.react-transform-component` 強制 1280×752 容器尺寸,\n            但 image 是 natural 1440×900(自然溢出 container)。Library `centerView(scale)`\n            基於 component 尺寸計算 translate → 計算偏 61px(視 image 被 WRAPPER 框住而非\n            自然 size)。\n            移除 content fixed size 後:component 自然 size = image natural → library 以\n            image 實際尺寸計算置中,translate 正確(42.4, 2.5)得到 symmetric padding。\n            wrapper 保留 `!w-full !h-full` 作 interaction capture bounds。 */}\n        <TransformComponent wrapperClass=\"!w-full !h-full\">\n          <img\n            ref={imgRef}\n            src={file.url}\n            alt={file.name}\n            onLoad={handleImageLoad}\n            draggable={false}\n            // natural size(**不走 object-contain**)— transform scale 管實際顯示大小\n            className=\"max-w-none max-h-none select-none\"\n            style={{ pointerEvents: 'none' }}\n          />\n        </TransformComponent>\n      </TransformWrapper>\n    </div>\n  )\n}\nImageRenderer.displayName = 'ImageRenderer'\n\nconst IMAGE_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif', 'bmp', 'ico'])\n\n/** 判斷檔案是否可用 ImageRenderer 渲染。 */\nexport function canRenderImage(file: { mimeType: string; name: string }): boolean {\n  if (file.mimeType.startsWith('image/')) return true\n  const ext = file.name.split('.').pop()?.toLowerCase()\n  return ext ? IMAGE_EXTS.has(ext) : false\n}\n"],"names":[],"mappings":";;;AA+BA,MAAM,YAAY;AAClB,MAAM,YAAY;AAIX,MAAM,gBAA6C,CAAC;AAAA,EACzD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,SAAS,MAAM,OAAoC,IAAI;AAC7D,QAAM,SAAS,MAAM,OAAgC,IAAI;AACzD,QAAM,eAAe,MAAM,OAA8B,IAAI;AAC7D,QAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,KAAK;AAGhD,QAAM,0BAA0B,MAAM,OAAe,CAAC;AACtD,QAAM,UAAU,MAAM,MAAM;AAAE,QAAI,wBAAwB,QAAS,sBAAqB,wBAAwB,OAAO;AAAA,EAAE,GAAG,CAAA,CAAE;AAG9H,QAAM,iBAAiB,MAAM,OAA2B,UAAU;AAGlE,QAAM,sBAAsB,MAAM,OAAO,KAAK;AAG9C,QAAM,UAAU,MAAM;AACpB,yBAAqB,EAAE,MAAM,MAAM;AAAA,EACrC,GAAG,CAAC,oBAAoB,CAAC;AAKzB,QAAM,UAAU,MAAM;AACpB,cAAU,KAAK;AACf,mBAAe,UAAU;AAEzB,UAAM,MAAM,OAAO;AACnB,QAAI,OAAO,IAAI,YAAY,IAAI,eAAe,GAAG;AAE/C,cAAQ,QAAA,EAAU,KAAK,MAAM,iBAAiB;AAAA,IAChD;AAAA,EAEF,GAAG,CAAC,KAAK,GAAG,CAAC;AAGb,QAAM,kBAAkB,MAAM,YAAY,CAAC,QAAgC;AACzE,UAAM,MAAM,OAAO;AACnB,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,OAAO,CAAC,UAAW,QAAO;AAC/B,QAAI,CAAC,IAAI,gBAAgB,CAAC,IAAI,cAAe,QAAO;AACpD,UAAM,KAAK,UAAU;AACrB,UAAM,KAAK,UAAU;AACrB,QAAI,MAAM,KAAK,MAAM,EAAG,QAAO;AAC/B,UAAM,aAAa,KAAK,IAAI;AAC5B,UAAM,cAAc,KAAK,IAAI;AAE7B,WAAO,QAAQ,cAAc,aAAa,KAAK,IAAI,YAAY,WAAW;AAAA,EAC5E,GAAG,CAAA,CAAE;AAEL,QAAM,aAAa,MAAM,YAAY,CAAC,UAA0B;AAC9D,UAAM,UAAU,KAAK,IAAI,WAAW,KAAK,IAAI,WAAW,KAAK,CAAC;AAK9D,WAAO,KAAK,MAAM,UAAU,GAAG;AAAA,EACjC,GAAG,CAAA,CAAE;AAGL,QAAM,kBAAkB,MAAM,YAAY,MAAM;AAC9C,cAAU,IAAI;AACd,UAAM,QAAQ,gBAAgB,UAAU;AACxC,QAAI,SAAS,KAAM;AACnB,UAAM,MAAM,WAAW,KAAK;AAC5B,mBAAe,UAAU;AAEzB,QAAI,wBAAwB,QAAS,sBAAqB,wBAAwB,OAAO;AACzF,4BAAwB,UAAU,sBAAsB,MAAM;AAC5D,8BAAwB,UAAU;AAClC,mBAAa,GAAG;AAAA,IAClB,CAAC;AAAA,EACH,GAAG,CAAC,iBAAiB,YAAY,YAAY,CAAC;AAK9C,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,OAAQ;AACb,UAAM,YAAY,aAAa;AAC/B,QAAI,CAAC,UAAW;AAChB,QAAI,QAAQ;AACZ,UAAM,MAAM,IAAI,eAAe,MAAM;AACnC,UAAI,4BAA4B,KAAK;AACrC,cAAQ,sBAAsB,MAAM;AAClC,gBAAQ;AACR,cAAM,OAAO,eAAe;AAC5B,YAAI,SAAS,SAAU;AACvB,cAAM,QAAQ,gBAAgB,IAAI;AAClC,YAAI,SAAS,KAAM;AACnB,qBAAa,WAAW,KAAK,CAAC;AAAA,MAChC,CAAC;AAAA,IACH,CAAC;AACD,QAAI,QAAQ,SAAS;AACrB,WAAO,MAAM;AACX,UAAI,WAAA;AACJ,UAAI,4BAA4B,KAAK;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,QAAQ,iBAAiB,YAAY,YAAY,CAAC;AAGtD,QAAM,oBAAoB,MAAM,YAAY,MAAM;AAChD,QAAI,CAAC,OAAQ;AACb,UAAM,WAAW,gBAAgB,UAAU;AAC3C,QAAI,YAAY,KAAM;AACtB,UAAM,SAAS,WAAW,QAAQ;AAElC,UAAM,QAAQ,KAAK,IAAI,OAAO,MAAM,IAAI;AACxC,UAAM,YAAY,QAAQ,MAAM;AAChC,mBAAe,UAAU,QAAQ,WAAW;AAC5C,iBAAa,SAAS;AAAA,EACxB,GAAG,CAAC,QAAQ,MAAM,iBAAiB,YAAY,YAAY,CAAC;AAI5D,QAAM,UAAU,MAAM;AACpB,UAAM,MAAM,OAAO;AACnB,QAAI,CAAC,OAAO,CAAC,OAAQ;AACrB,UAAM,eAAe,IAAI,MAAM;AAC/B,UAAM,cAAc,OAAO;AAC3B,QAAI,KAAK,IAAI,eAAe,WAAW,IAAI,KAAO;AAElD,wBAAoB,UAAU;AAC9B,QAAI,WAAW,aAAa,GAAG;AAE/B,UAAM,IAAI,WAAW,MAAM;AAAE,0BAAoB,UAAU;AAAA,IAAM,GAAG,GAAG;AACvE,WAAO,MAAM,aAAa,CAAC;AAAA,EAC7B,GAAG,CAAC,MAAM,MAAM,CAAC;AAGjB,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,cAAc,CAAC,OAAQ;AAC5B,UAAM,QAAQ,gBAAgB,WAAW,GAAG;AAC5C,QAAI,SAAS,KAAM;AACnB,mBAAe,UAAU,WAAW;AACpC,iBAAa,WAAW,KAAK,CAAC;AAAA,EAChC,GAAG,CAAC,YAAY,QAAQ,iBAAiB,YAAY,YAAY,CAAC;AAIlE,QAAM,oBAAoB,MAAM;AAAA,IAC9B,CAAC,MAA4B,UAA6B;AACxD,UAAI,oBAAoB,QAAS;AACjC,YAAM,WAAW,KAAK,MAAM,MAAM,QAAQ,GAAG;AAC7C,UAAI,aAAa,MAAM;AACrB,uBAAe,UAAU;AACzB,qBAAa,QAAQ;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAAC,MAAM,YAAY;AAAA,EAAA;AAGrB,6BACG,OAAA,EAAI,KAAK,cAAc,WAAU,iCAAgC,eAAe,mBAC/E,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,KAAK;AAAA,MACL,cAAc;AAAA,MACd,UAAU;AAAA,MACV,UAAU;AAAA,MACV,cAAY;AAAA,MACZ,iBAAe;AAAA,MAKf,eAAe;AAAA,MAOf,OAAO,EAAE,MAAM,KAAA;AAAA,MAGf,aAAa,EAAE,UAAU,KAAA;AAAA,MACzB,aAAa;AAAA,MAUb,UAAA,oBAAC,oBAAA,EAAmB,cAAa,mBAC/B,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAK,KAAK;AAAA,UACV,KAAK,KAAK;AAAA,UACV,QAAQ;AAAA,UACR,WAAW;AAAA,UAEX,WAAU;AAAA,UACV,OAAO,EAAE,eAAe,OAAA;AAAA,QAAO;AAAA,MAAA,EACjC,CACF;AAAA,IAAA;AAAA,EAAA,GAEJ;AAEJ;AACA,cAAc,cAAc;AAE5B,MAAM,aAAa,oBAAI,IAAI,CAAC,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,QAAQ,OAAO,KAAK,CAAC;AAGtF,SAAS,eAAe,MAAmD;;AAChF,MAAI,KAAK,SAAS,WAAW,QAAQ,EAAG,QAAO;AAC/C,QAAM,OAAM,UAAK,KAAK,MAAM,GAAG,EAAE,IAAA,MAArB,mBAA4B;AACxC,SAAO,MAAM,WAAW,IAAI,GAAG,IAAI;AACrC;"}

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+/**
+ * HoverCard — hover 顯示可互動內容的浮層（行為 primitive）
+ *
+ * 跟 Tooltip 的差異：內容可互動（按鈕、連結、hover 子元素）。
+ *
+ * **不含視覺樣式**——bg、border、shadow、padding 由 consumer 決定：
+ * - OverflowIndicator：深色 Tooltip 樣式（bg-tooltip + data-theme="dark"）
+ * - NameCard：亮色 Card 樣式（bg-surface-raised + elevation-200）
+ *
+ * 只提供：z-index、動畫、sideOffset。
+ */
+declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
+declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const hoverCardMeta: {
+    readonly component: "HoverCard";
+    readonly family: null;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-surface-raised"];
+        readonly fg: readonly ["--foreground"];
+        readonly ring: readonly [];
+    };
+};
+export { HoverCard, HoverCardTrigger, HoverCardContent };
+//# sourceMappingURL=hover-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../src/components/HoverCard/hover-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAA;AAKhE;;;;;;;;;;GAUG;AAEH,QAAA,MAAM,SAAS,6CAA0B,CAAA;AAEzC,QAAA,MAAM,gBAAgB,oHAA6B,CAAA;AAEnD,QAAA,MAAM,gBAAgB,oKAkCpB,CAAA;AAKF,eAAO,MAAM,aAAa;;;;;;;;;;;CAehB,CAAA;AAEV,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}

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

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "../../lib/utils.js";
+import { OVERLAY_SIDE_OFFSET } from "../../tokens/elevation/overlay-geometry.js";
+const HoverCard = HoverCardPrimitive.Root;
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = OVERLAY_SIDE_OFFSET, collisionPadding = 12, ...props }, ref) => (
+  // HoverCardPrimitive.Portal(2026-04-23):把 Content 搬到 `document.body`。
+  // 不 Portal 時 Content 會 DOM-nested 在 trigger subtree,如 trigger 位於 OverflowIndicator
+  // `data-theme="dark"` tooltip 內部 → Avatar 自帶 HoverCard 的 Content 也卡在 dark subtree,
+  // CSS var(--foreground) 繼承 dark 值 → NameCard 內部文字變 white 看不見(user 抓的 bug)。
+  // Portal 到 body 讓 CSS 繼承 chain 從 app root data-theme 起算,不受 trigger subtree 污染。
+  //
+  // collisionPadding=12:Radix / browser 內部 1-2px rounding 讓 visual padding 比 prop 值少 1-2px。
+  // 提高到 12 保證使用者實際看到 ≥ 8px viewport edge gap(overlay-surface「靠邊 8px」canonical)。
+  /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    HoverCardPrimitive.Content,
+    {
+      ref,
+      align,
+      sideOffset,
+      collisionPadding,
+      className: cn(
+        "z-50 outline-none",
+        // 2026-05-04 viewport-aware max-h SSOT(對齊 Popover):header/footer 永遠 in-viewport,body 壓縮 scroll
+        // 2026-05-05 audit dim 35 fix:加 `min-h-0` 完成 M25 chain invariant
+        "max-h-[var(--radix-hover-card-content-available-height,100vh)] flex flex-col overflow-hidden min-h-0",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "origin-[var(--radix-hover-card-content-transform-origin)]",
+        className
+      ),
+      ...props
+    }
+  ) })
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+const hoverCardMeta = {
+  component: "HoverCard",
+  family: null,
+  // non-family composite / overlay / layout
+  variants: {},
+  sizes: {},
+  states: ["default", "hover", "active", "focus-visible", "disabled"],
+  tokens: {
+    bg: ["bg-surface-raised"],
+    fg: ["--foreground"],
+    ring: []
+  }
+};
+export {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+  hoverCardMeta
+};
+//# sourceMappingURL=hover-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.js","sources":["../../../src/components/HoverCard/hover-card.tsx"],"sourcesContent":["import * 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\"\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 * - NameCard：亮色 Card 樣式（bg-surface-raised + elevation-200）\n *\n * 只提供：z-index、動畫、sideOffset。\n */\n\nconst HoverCard = HoverCardPrimitive.Root\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 值 → NameCard 內部文字變 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        \"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', 'hover', 'active', 'focus-visible', 'disabled'],\n  tokens: {\n    bg: ['bg-surface-raised'],\n    fg: ['--foreground'],\n    ring: [],\n  },\n} as const\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,YAAY,mBAAmB;AAErC,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,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,WAAW,SAAS,UAAU,iBAAiB,UAAU;AAAA,EAClE,QAAQ;AAAA,IACN,IAAI,CAAC,mBAAmB;AAAA,IACxB,IAAI,CAAC,cAAc;AAAA,IACnB,MAAM,CAAA;AAAA,EAAC;AAEX;"}

package/dist/components/Input/input.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import type { LucideIcon } from 'lucide-react';
+import type { FieldMode, FieldVariant } from '../../components/Field/field-types';
+import { fieldWrapperStyles } from '../../components/Field/field-wrapper';
+import { type InlineActionConfig } from '../../patterns/element-anatomy/item-anatomy';
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, Omit<VariantProps<typeof fieldWrapperStyles>, 'mode' | 'variant'> {
+    /** Field display mode */
+    mode?: FieldMode;
+    /**
+     * Visual chrome(正交於 mode);Phase B1(2026-05-05)從 `variant` 改名 `chrome`,對齊 FieldContext.variant 透傳。
+     * - `'default'`(預設)— Field wrapper 完整 variant:bg-surface + 明顯 border + hover/focus 回饋。適用表單、Field 內嵌。
+     * - `'bare'` — 透明 variant,hover / focus 才出現 border。適用 Toolbar inline editing(如 FileViewer zoom input / chart config toolbar / rich text toolbar number input)+ DataTable cell-as-input。保留 padding / typography / height,只拿掉背景和常態 border。
+     *
+     * 透傳:在 `<Field variant="bare">` 內自動繼承 context.variant;per-prop override context。
+     * 世界級對照(bare):VS Code settings input / Figma toolbar number / Notion prop input。
+     */
+    variant?: FieldVariant;
+    /** Error 狀態（正交於 mode）。border-error + aria-invalid。 */
+    error?: boolean;
+    /** 左側靜態 icon — 輔助理解 input 用途（如 Search）。fg-muted。 */
+    startIcon?: LucideIcon;
+    /** 右側 inline action — 宣告式 API，Field 根據 size 自動渲染。 */
+    endAction?: InlineActionConfig;
+    /**
+     * 右側 slot(ReactNode)— escape hatch 供 consumer 放自訂元素(如 DropdownMenuTrigger asChild + ItemInlineActionButton)。
+     * 跟 `endAction` 互斥(同時傳 endSlot 會優先,endAction 被忽略)。
+     *
+     * **使用情境**:ZoomInput 需要 chevron 作 DropdownMenuTrigger anchor,config-only API 無法做到。
+     * **禁止情境**:表單欄位 / 一般 inline action → 用 `endAction` 宣告式 API。
+     */
+    endSlot?: React.ReactNode;
+    /**
+     * Loading 狀態(async 驗證 / debounce fetch 中)。
+     * - **input 保持可編輯**(user 可以邊改邊讀,debounce 場景 UX 最好)
+     * - 世界級對照:Ant Input.Search 派(input editable during loading);非 Material readonly 派
+     * - 自動在 endAction slot 塞 `<CircularProgress size={iconSize}/>`(與 endAction prop 互斥)
+     * - 宣告 `aria-busy="true"` 讓 screen reader 感知處理中
+     */
+    loading?: boolean;
+    /**
+     * Auto-width:Input 寬度 = 內容寬(value / placeholder 文字寬)+ startIcon + endAction + padding。
+     * 使用 CSS `field-sizing: content`(Chrome 123+ / Safari 17.4+;Firefox 還在實驗)。
+     *
+     * **使用情境**:
+     * - Inline edit(VS Code setting row / Figma property toolbar number input)
+     * - ZoomInput(FileViewer 縮放比例:輸入「100%」自動縮到三位數寬)
+     * - Tag / Chip 內 inline rename
+     *
+     * **不要用在**:表單 Field(Field 需要欄寬對齊,不該隨值跳動)
+     *
+     * **fallback**:不支援 `field-sizing` 的瀏覽器會退化為 `w-auto`(wrapper 縮到 content 尺寸,
+     * input 本身有 min-width 避免消失)。UX 上稍不一致但不致斷;若必須精準對齊所有瀏覽器,
+     * consumer 可自行傳 `style={{ width: ... }}` 顯式寬度,不走 auto。
+     */
+    autoWidth?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const inputMeta: {
+    readonly component: "Input";
+    readonly family: 4;
+    readonly variants: {};
+    readonly sizes: {};
+    readonly states: readonly ["default", "hover", "active", "focus-visible", "disabled"];
+    readonly tokens: {
+        readonly bg: readonly ["bg-surface"];
+        readonly fg: readonly ["text-fg-disabled", "text-fg-muted"];
+        readonly ring: readonly [];
+    };
+};
+export { Input };
+//# sourceMappingURL=input.d.ts.map

package/dist/components/Input/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE9C,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,8CAA8C,CAAA;AAC3F,OAAO,EAAE,kBAAkB,EAAkC,MAAM,gDAAgD,CAAA;AAEnH,OAAO,EAAgC,KAAK,kBAAkB,EAAE,MAAM,uDAAuD,CAAA;AAM7H,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC,EAC/D,IAAI,CAAC,YAAY,CAAC,OAAO,kBAAkB,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnE,yBAAyB;IACzB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,qDAAqD;IACrD,SAAS,CAAC,EAAE,kBAAkB,CAAA;IAC9B;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;;;;;;;;;;OAcG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAKD,QAAA,MAAM,KAAK,qFAwIV,CAAA;AAQD,eAAO,MAAM,SAAS;;;;;;;;;;;CAeZ,CAAA;AAEV,OAAO,EAAE,KAAK,EAAE,CAAA"}