@orbit-work/ui 0.1.0

package/src/components/domain/office/OfficePreview/index.tsx

@@ -0,0 +1,782 @@
+"use client"
+
+import {
+  type CSSProperties,
+  type ComponentProps,
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react"
+import { cn } from "../../../../lib/utils"
+import { createSpreadsheet, readOnlyInput, transferExcelToSpreadSheet } from "../../../../utils/office-excel"
+import { ZoomIn, ZoomOut } from "../../../composite/Icons"
+import { PptxSlide } from "../../../composite/PptxRenderer/PptxSlide"
+import { PT_TO_PX } from "../../../composite/PptxRenderer/constants"
+import type { PptxParseResult } from "../../../composite/PptxRenderer/types"
+import { Skeleton } from "../../../composite/Skeleton"
+import { Button, EmptyState, InlineMessage } from "../../../primitives"
+import { type AttachmentMenuOption, OpenWithMenu } from "../../chat/Attachment"
+
+// ─── OfficePreview ───
+
+/**
+ * OfficePreview —— 04 预览域的 Office 适配器（Word / Excel / PowerPoint）。
+ *
+ * 归口口径（蓝图批次④「PreviewDialog 壳 + 各适配器」）：适配器只负责**内容**，
+ * 壳（标题栏读数、下载/打开方式动作组、模态立面、载/错/空三态）一律交给
+ * `FilePreviewDialog`。`chrome={false}` 就是「我坐在壳里」的开关：关掉自绘的
+ * 卡片边框与圆角，让内容铺满壳的内容区。开箱即用的组合见同目录 `OfficePreviewDialog`。
+ *
+ * 衬底制式：Office 走壳的 `plain` 而非 `paper`——三种渲染器各自带纸
+ * （docx-preview 的白页衬灰底、pptx 的幻灯片底、x-spreadsheet 的 canvas 恒亮网格，
+ * 见 styles/xspreadsheet.css 头注释的两域划分），壳再叠一层纸会出现纸中纸。
+ *
+ * R3 中性件：无信标/荧黄元素；缩放读数按 §7 走 mono＋tabular-nums。
+ */
+export type OfficeFileType = "word" | "excel" | "powerpoint" | "unknown"
+
+export type OfficePreviewProps = ComponentProps<"div"> & {
+  /** 文件 URL（http、blob、或本地文件协议） */
+  src?: string
+  /** 文件类型提示 */
+  fileType?: OfficeFileType
+  /**
+   * 自定义加载指示器。没有 `src` 时传它即视为**调用方自述载中**（取文件的那一层
+   * 知道自己在载），此时出载态而不是空态——载态优先于空态。
+   */
+  loading?: ReactNode
+  /** 自定义错误内容 */
+  error?: ReactNode
+  /**
+   * 自绘卡片立面（边框＋圆角）。坐进 `FilePreviewDialog` 壳时传 `false`：
+   * 壳已经给了模态立面，适配器再画一圈边就成了双层框。默认 `true` 保持独立可用。
+   */
+  chrome?: boolean
+  /** 用系统默认应用打开文件的回调（简单模式） */
+  onOpen?: () => void
+  /** "打开方式"菜单选项列表加载器（和 Attachment 卡一致） */
+  onRequestOpenWithOptions?: () => Promise<AttachmentMenuOption[]> | AttachmentMenuOption[]
+  /** "打开方式"菜单选中回调 */
+  onOpenWith?: (option: AttachmentMenuOption) => void
+}
+
+const FILE_TYPE_LABELS: Record<OfficeFileType, string> = {
+  word: "Word 文档",
+  excel: "Excel 表格",
+  powerpoint: "PowerPoint 演示",
+  unknown: "Office 文档",
+}
+
+type RenderState = "idle" | "loading" | "ready" | "empty" | "error"
+
+/**
+ * 带中文人话的解析错误。第三方解析库（docx-preview / exceljs / pptxtojson）与 fetch
+ * 抛的都是裸英文，直接甩给用户就是 V1 的「把 stack 当文案」。§6 错误态口径＝
+ * **人话一句 ＋ mono ≤2 行详情**：`human` 出正文，原文降级进折叠的 mono 详情。
+ */
+class OfficeLoadError extends Error {
+  human: string
+  detail: string
+  constructor(human: string, detail = "") {
+    super(human)
+    this.name = "OfficeLoadError"
+    this.human = human
+    this.detail = detail
+  }
+}
+
+/** 把第三方库/网络层的裸英文归成一句中文人话；归不上的落通用句，原文仍留在 mono 详情里。 */
+function localizeOfficeError(raw: string, fileType: OfficeFileType): string {
+  const label = FILE_TYPE_LABELS[fileType]
+  if (/network|failed to fetch|load failed|err_|dns/i.test(raw)) return `${label}没取到，检查一下文件地址还在不在。`
+  if (/password|encrypt/i.test(raw)) return `${label}设了密码，先解除保护再预览。`
+  if (/corrupt|invalid|malformed|zip|central directory|unexpected end/i.test(raw))
+    return `${label}读不出来，文件可能已经损坏。`
+  return `${label}没解析出来。`
+}
+
+export function OfficePreview({
+  className = "",
+  src,
+  fileType = "unknown",
+  loading: loadingNode,
+  error: errorNode,
+  chrome = true,
+  onOpen,
+  onRequestOpenWithOptions,
+  onOpenWith,
+  children,
+  ...props
+}: OfficePreviewProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const renderIdRef = useRef(0)
+  const bufferRef = useRef<ArrayBuffer | null>(null)
+  const [state, setState] = useState<RenderState>("idle")
+  const [errorMsg, setErrorMsg] = useState("")
+  // 裸英文原文只进 mono 详情行，不当正文（§6 人话一句 ＋ mono ≤2 行）
+  const [errorDetail, setErrorDetail] = useState("")
+  // x-spreadsheet 自带 ResizeObserver 与实例，卸载时要一起收掉
+  const excelDisposeRef = useRef<(() => void) | null>(null)
+
+  // PowerPoint state
+  const [pptxData, setPptxData] = useState<PptxParseResult | null>(null)
+  const [slideCount, setSlideCount] = useState(0)
+  const [activeSlide, setActiveSlide] = useState(0)
+  const [pptZoom, setPptZoom] = useState(1)
+  const [slideFitScale, setSlideFitScale] = useState(0)
+  const mainSlideRef = useRef<HTMLDivElement>(null)
+  const pptxBodyRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!src || !container) {
+      setState("idle")
+      return
+    }
+
+    const renderId = renderIdRef.current + 1
+    renderIdRef.current = renderId
+    const superseded = () => renderIdRef.current !== renderId
+
+    setState("loading")
+    setErrorMsg("")
+    setErrorDetail("")
+
+    void (async () => {
+      try {
+        let buffer: ArrayBuffer
+        if (bufferRef.current) {
+          buffer = bufferRef.current
+        } else {
+          const response = await fetch(src)
+          if (!response.ok)
+            throw new OfficeLoadError(
+              `${FILE_TYPE_LABELS[fileType]}没取到，检查一下文件地址还在不在。`,
+              `HTTP ${response.status} ${response.statusText}`.trim(),
+            )
+          buffer = await response.arrayBuffer()
+          if (superseded()) return
+          bufferRef.current = buffer
+        }
+
+        container.replaceChildren()
+        switch (fileType) {
+          case "word":
+            await renderWord(buffer, container)
+            break
+          case "excel": {
+            excelDisposeRef.current?.()
+            const dispose = await renderExcel(buffer, container, () => ({
+              width: bodyRef.current?.clientWidth ?? 0,
+              height: bodyRef.current?.clientHeight ?? 0,
+            }))
+            excelDisposeRef.current = dispose
+            if (superseded()) return
+            // 空工作簿：没有实例可挂，落 empty 档由 React 渲 EmptyState。
+            if (!dispose) {
+              setState("empty")
+              return
+            }
+            break
+          }
+          case "powerpoint": {
+            const { parse } = await import("pptxtojson")
+            const result = await parse(buffer, {
+              imageMode: "base64",
+              videoMode: "blob",
+              audioMode: "blob",
+            })
+            if (superseded()) return
+            setPptxData(result as PptxParseResult)
+            setSlideCount(result.slides.length)
+            setActiveSlide(0)
+            break
+          }
+          default:
+            throw new OfficeLoadError("这种文件暂时打不开。", `unsupported fileType: ${fileType}`)
+        }
+        if (superseded()) return
+        setState("ready")
+      } catch (err) {
+        if (superseded()) return
+        const raw = err instanceof Error ? err.message : String(err ?? "")
+        setState("error")
+        setErrorMsg(err instanceof OfficeLoadError ? err.human : localizeOfficeError(raw, fileType))
+        setErrorDetail(err instanceof OfficeLoadError ? err.detail : raw)
+      }
+    })()
+
+    return () => {
+      renderIdRef.current += 1
+    }
+  }, [src, fileType])
+
+  // 组件卸载时收掉 x-spreadsheet 实例与它的 ResizeObserver
+  useEffect(
+    () => () => {
+      excelDisposeRef.current?.()
+      excelDisposeRef.current = null
+    },
+    [],
+  )
+
+  useEffect(() => {
+    bufferRef.current = null
+    setPptxData(null)
+    setSlideCount(0)
+    setActiveSlide(0)
+  }, [src])
+
+  // Zoom & pan interaction on main panel
+  useEffect(() => {
+    if (fileType !== "powerpoint" || !slideCount) return
+    const slide = mainSlideRef.current
+    const panel = slide?.parentElement
+    if (!panel || !slide) return
+
+    const baseZoom = pptxBodyRef.current?.dataset.owState === "collapsed" ? 0.9 : 1
+    let zoom = baseZoom
+    let panX = 0
+    let panY = 0
+    let dragging = false
+    let startX = 0
+    let startY = 0
+    let startPanX = 0
+    let startPanY = 0
+
+    const applyTransform = () => {
+      slide.style.transform = `scale(${zoom}) translate(${panX}px, ${panY}px)`
+      setPptZoom(zoom)
+      panel.style.cursor = zoom > 1.01 ? "grab" : ""
+    }
+
+    const onWheel = (e: WheelEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        e.preventDefault()
+        const delta = -e.deltaY * 0.01
+        zoom = Math.min(5, Math.max(0.25, zoom + delta))
+        if (zoom <= 1) {
+          panX = 0
+          panY = 0
+        }
+        applyTransform()
+      } else if (zoom > 1.01) {
+        e.preventDefault()
+        panX -= e.deltaX / zoom
+        panY -= e.deltaY / zoom
+        applyTransform()
+      }
+    }
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (zoom <= 1.01) return
+      e.preventDefault()
+      dragging = true
+      startX = e.clientX
+      startY = e.clientY
+      startPanX = panX
+      startPanY = panY
+      panel.style.cursor = "grabbing"
+      panel.setPointerCapture(e.pointerId)
+    }
+
+    const onPointerMove = (e: PointerEvent) => {
+      if (!dragging) return
+      panX = startPanX + (e.clientX - startX) / zoom
+      panY = startPanY + (e.clientY - startY) / zoom
+      applyTransform()
+    }
+
+    const onPointerUp = (e: PointerEvent) => {
+      if (!dragging) return
+      dragging = false
+      panel.style.cursor = zoom > 1.01 ? "grab" : ""
+      panel.releasePointerCapture(e.pointerId)
+    }
+
+    const onDblClick = () => {
+      zoom = baseZoom
+      panX = 0
+      panY = 0
+      applyTransform()
+    }
+
+    const setZoomFromToolbar = (newZoom: number) => {
+      zoom = Math.min(5, Math.max(0.25, newZoom))
+      if (zoom <= 1) {
+        panX = 0
+        panY = 0
+      }
+      applyTransform()
+    }
+    ;(panel as any).__pptxSetZoom = setZoomFromToolbar
+
+    panel.addEventListener("wheel", onWheel, { passive: false })
+    panel.addEventListener("pointerdown", onPointerDown)
+    panel.addEventListener("pointermove", onPointerMove)
+    panel.addEventListener("pointerup", onPointerUp)
+    panel.addEventListener("dblclick", onDblClick)
+
+    return () => {
+      panel.removeEventListener("wheel", onWheel)
+      panel.removeEventListener("pointerdown", onPointerDown)
+      panel.removeEventListener("pointermove", onPointerMove)
+      panel.removeEventListener("pointerup", onPointerUp)
+      panel.removeEventListener("dblclick", onDblClick)
+      delete (panel as any).__pptxSetZoom
+    }
+  }, [fileType, slideCount, activeSlide])
+
+  const handleZoomChange = (newZoom: number) => {
+    const panel = mainSlideRef.current?.parentElement
+    if (panel && (panel as any).__pptxSetZoom) {
+      ;(panel as any).__pptxSetZoom(newZoom)
+    }
+  }
+
+  const handlePptxKeyDown = useCallback(
+    (event: ReactKeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return
+
+      const target = event.target as HTMLElement
+      if (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)) return
+
+      event.preventDefault()
+      const offset = event.key === "ArrowUp" ? -1 : 1
+      setActiveSlide((current) => Math.min(Math.max(current + offset, 0), slideCount - 1))
+    },
+    [slideCount],
+  )
+
+  const handlePptxPointerDown = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
+    const target = event.target as HTMLElement
+    if (target.closest('button, a, input, textarea, select, [contenteditable="true"]')) return
+    event.currentTarget.focus({ preventScroll: true })
+  }, [])
+
+  useEffect(() => {
+    if (!slideCount) return
+    const activeThumbnail = pptxBodyRef.current?.querySelector<HTMLElement>(
+      "[data-slot='pptx-thumb'][data-ow-state='active']",
+    )
+    activeThumbnail?.scrollIntoView({ block: "nearest" })
+  }, [activeSlide, slideCount])
+
+  // Toggle collapsed class based on panel width
+  useEffect(() => {
+    if (fileType !== "powerpoint" || !pptxBodyRef.current) return
+    const body = pptxBodyRef.current
+    const check = () => {
+      if (body.clientWidth < 750) {
+        body.dataset.owState = "collapsed"
+      } else {
+        delete body.dataset.owState
+      }
+    }
+    check()
+    const observer = new ResizeObserver(check)
+    observer.observe(body)
+    return () => observer.disconnect()
+  }, [fileType, slideCount])
+
+  // Compute fit scale for main slide based on panel size
+  useEffect(() => {
+    if (fileType !== "powerpoint" || !pptxData || !slideCount) return
+    const slide = mainSlideRef.current
+    const panel = slide?.parentElement
+    if (!panel) return
+
+    const refit = () => {
+      const panelWidth = panel.clientWidth
+      const panelHeight = panel.clientHeight
+      if (!panelWidth || !panelHeight) return
+      const nativeW = pptxData.size.width * PT_TO_PX
+      const nativeH = pptxData.size.height * PT_TO_PX
+      const collapsed = pptxBodyRef.current?.dataset.owState === "collapsed"
+      const fitRatio = collapsed ? 0.81 : 0.9
+      const scale = Math.min((panelWidth * fitRatio) / nativeW, (panelHeight * fitRatio) / nativeH)
+      setSlideFitScale(scale)
+    }
+    refit()
+    const observer = new ResizeObserver(refit)
+    observer.observe(panel)
+    return () => observer.disconnect()
+  }, [fileType, slideCount, pptxData])
+
+  const isPptx = fileType === "powerpoint" && state === "ready" && slideCount > 0
+  // 调用方给了自定义 loading 节点却还没有 src ＝ 它自己在取文件，自述「载中」。
+  // 原来 `!src` 分支排在 `state === "loading"` 前面，state 恒为 idle，loadingNode 永不可达
+  // ——WordLoading 那类 story 渲出来是空态不是载态。载态优先于空态。
+  const selfDeclaredLoading = !src && loadingNode != null
+
+  return (
+    <div
+      data-slot="office-preview"
+      data-ow-chrome={chrome ? undefined : "none"}
+      className={cn(
+        "flex flex-col w-full h-full bg-ow-bg overflow-hidden",
+        // 坐进 PreviewDialog 壳时不再自绘立面（§5 一件事只有一层边）
+        chrome && "[border-radius:var(--ow-radius-card)] border border-ow-border-strong",
+        className,
+      )}
+      {...props}
+    >
+      {/* Body */}
+      <div
+        data-ow-part="body"
+        className="flex-1 min-h-0 relative flex flex-col items-center justify-center pl-0.5"
+        ref={bodyRef}
+      >
+        {/* §6 容器三态：空＝EmptyState 信标母题（G5）· 载＝Skeleton 呼吸（禁 shimmer）·
+            错＝InlineMessage error tint 三件套（人话一句 ＋ 折叠 mono 详情）。
+            原来三态共用一个 text-3 灰字居中的 div，空态还自画了一套彩色文件类型图标
+            ——判断表「空态：灰字居中 → G5」，且母题唯一语汇是信标。 */}
+        {state === "loading" || selfDeclaredLoading ? (
+          <div
+            data-ow-part="loading"
+            role="status"
+            aria-live="polite"
+            aria-label={`正在打开${FILE_TYPE_LABELS[fileType]}`}
+            className="flex w-full max-w-[560px] flex-col gap-3 p-8"
+          >
+            {loadingNode ?? (
+              <>
+                <Skeleton variant="line" height={18} width="46%" />
+                <Skeleton variant="line" height={13} />
+                <Skeleton variant="line" height={13} />
+                <Skeleton variant="line" height={13} width="78%" />
+                <Skeleton variant="block" height={180} />
+              </>
+            )}
+          </div>
+        ) : !src ? (
+          <div data-ow-part="empty" className="flex w-full items-center justify-center p-8">
+            <EmptyState message={`暂无 ${FILE_TYPE_LABELS[fileType]}`} />
+          </div>
+        ) : state === "empty" ? (
+          <div data-ow-part="empty" className="flex w-full items-center justify-center p-8">
+            <EmptyState message="这个表格里没有工作表。" />
+          </div>
+        ) : state === "error" ? (
+          <div data-ow-part="error" className="flex w-full max-w-[560px] flex-col p-8">
+            {errorNode ?? (
+              <InlineMessage variant="error" detail={errorDetail}>
+                {errorMsg || `${FILE_TYPE_LABELS[fileType]}没解析出来。`}
+              </InlineMessage>
+            )}
+          </div>
+        ) : null}
+
+        {/* PowerPoint dual-panel layout */}
+        {isPptx && pptxData && (
+          <div data-ow-part="pptx-panels" className="flex flex-col w-full flex-1 min-h-0 overflow-hidden self-stretch">
+            {/* Toolbar */}
+            <div
+              data-ow-part="pptx-toolbar"
+              /* §7 控件高：条高钉 --ow-h-lg(40)，不再用 py-1.5 靠 6+28+6 凑（同簇 PdfPreview header 同口径）。 */
+              className="flex items-center gap-1 px-3 border-b border-ow-border flex-shrink-0 bg-ow-bg"
+              style={{ height: "var(--ow-h-lg)" }}
+            >
+              <span data-ow-part="spacer" className="flex-1" />
+              <Button
+                type="button"
+                data-ow-part="toolbar-btn"
+                variant="ghost"
+                size="sm"
+                className="w-7 h-7 p-0 text-ow-text-2 hover:bg-ow-surface"
+                onClick={() => handleZoomChange(pptZoom - 0.25)}
+                title="缩小"
+              >
+                <ZoomOut width={14} height={14} />
+              </Button>
+              <span
+                data-ow-part="toolbar-zoom"
+                // §7 读数（百分比）一律 mono ＋ tabular-nums，缩放时数字不跳宽
+                className="min-w-10 text-center font-medium text-ow-fs-caption leading-none font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums] text-ow-text-2 select-none"
+              >
+                {Math.round(pptZoom * 100)}%
+              </span>
+              <Button
+                type="button"
+                data-ow-part="toolbar-btn"
+                variant="ghost"
+                size="sm"
+                className="w-7 h-7 p-0 text-ow-text-2 hover:bg-ow-surface"
+                onClick={() => handleZoomChange(pptZoom + 0.25)}
+                title="放大"
+              >
+                <ZoomIn width={14} height={14} />
+              </Button>
+              {(onOpen || onRequestOpenWithOptions) && (
+                <OpenWithMenu
+                  label="打开方式"
+                  onOpen={onOpen}
+                  onRequestOptions={onRequestOpenWithOptions}
+                  onSelect={onOpenWith}
+                />
+              )}
+            </div>
+            <div
+              data-ow-part="pptx-body"
+              /* 焦点环三件套（§6 既定态）：环宽/环色/缝全走 token。这一格铺满壳的内容区且父级
+                  overflow-hidden，正 offset 会被裁掉，所以缝取负值内收（同 xspreadsheet.css / assistant-settings.css）。 */
+              className="grid grid-cols-[200px_minmax(0,1fr)] grid-rows-[1fr] flex-1 min-h-0 overflow-hidden relative focus:outline-none focus-visible:[outline:var(--ow-focus-ring-w)_solid_var(--ow-focus-ring)] focus-visible:[outline-offset:calc(var(--ow-focus-ring-offset)*-1)]"
+              ref={pptxBodyRef}
+              tabIndex={0}
+              role="region"
+              aria-label={`PowerPoint 预览，第 ${activeSlide + 1} 页，共 ${slideCount} 页`}
+              onKeyDown={handlePptxKeyDown}
+              onPointerDown={handlePptxPointerDown}
+            >
+              {/* Thumbnails */}
+              <div
+                data-ow-part="pptx-thumbs"
+                /* §5 表面三档：贴地侧栏取实心面档 --ow-surface，不做半透明毛玻璃
+                    （bg-ow-bg/72 + backdrop-blur 是 V1 的「玻璃层」语汇，2.0 只有地/面/井三档）。 */
+                className="flex flex-col gap-2 py-4 px-3 overflow-y-auto overflow-x-hidden min-h-0 border-r border-ow-border bg-ow-surface scrollbar-thin"
+              >
+                {pptxData.slides.map((slide, i) => (
+                  <PptxThumbnail
+                    key={i}
+                    slide={slide}
+                    index={i}
+                    isActive={i === activeSlide}
+                    slideWidth={pptxData.size.width}
+                    slideHeight={pptxData.size.height}
+                    onClick={setActiveSlide}
+                  />
+                ))}
+              </div>
+              {/* Main slide panel */}
+              <div
+                data-ow-part="pptx-main"
+                className="relative overflow-hidden bg-ow-surface flex items-center justify-center min-h-0 h-full"
+              >
+                <div
+                  data-ow-part="pptx-slide"
+                  /* §5 贴地零影：幻灯片坐在 pptx-main 面板里是贴地内容不是弹层，
+                     纸面立边靠 1px --ow-border 表达（同文件 renderWord 也在 strip
+                     docx-preview 注入的 box-shadow，口径就此一致）。 */
+                  className="relative overflow-hidden [border-radius:var(--ow-radius-md)] border border-ow-border origin-center flex-shrink-0"
+                  ref={mainSlideRef}
+                  style={{
+                    width: pptxData.size.width * PT_TO_PX * slideFitScale,
+                    height: pptxData.size.height * PT_TO_PX * slideFitScale,
+                  }}
+                >
+                  <div
+                    style={{
+                      transform: `scale(${slideFitScale})`,
+                      transformOrigin: "top left",
+                    }}
+                  >
+                    {pptxData.slides[activeSlide] && (
+                      <PptxSlide
+                        slide={pptxData.slides[activeSlide]}
+                        slideWidth={pptxData.size.width}
+                        slideHeight={pptxData.size.height}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Non-pptx content container */}
+        <div
+          ref={containerRef}
+          data-ow-part="content"
+          className="w-full h-full overflow-auto box-border"
+          style={{ display: state === "ready" && !isPptx ? undefined : "none" }}
+        />
+        {children}
+      </div>
+    </div>
+  )
+}
+
+// ─── Thumbnail ───
+
+interface PptxThumbnailProps {
+  slide: PptxParseResult["slides"][number]
+  index: number
+  isActive: boolean
+  slideWidth: number
+  slideHeight: number
+  onClick: (index: number) => void
+}
+
+const PptxThumbnail = memo(function PptxThumbnail({
+  slide,
+  index,
+  isActive,
+  slideWidth,
+  slideHeight,
+  onClick,
+}: PptxThumbnailProps) {
+  const nativeWidthPx = slideWidth * PT_TO_PX
+  const nativeHeightPx = slideHeight * PT_TO_PX
+  const thumbRef = useRef<HTMLSpanElement>(null)
+  const [thumbScale, setThumbScale] = useState(0)
+
+  useEffect(() => {
+    const el = thumbRef.current
+    if (!el) return
+    const compute = () => {
+      const w = el.clientWidth
+      if (w > 0) setThumbScale(w / nativeWidthPx)
+    }
+    compute()
+    const observer = new ResizeObserver(compute)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [nativeWidthPx])
+
+  const handleClick = useCallback(() => onClick(index), [onClick, index])
+
+  return (
+    <Button
+      type="button"
+      data-slot="pptx-thumb"
+      data-ow-state={isActive ? "active" : undefined}
+      variant="unstyled"
+      /* R2/§15：选中态不能用 --ow-primary tint —— 暗档 primary 就是荧黄，一列缩略图
+         全成状态极。改中性底（hover→selected-bg）＋当前页边框加粗＋页码提色，
+         R1 双编码里形状与文字各占一样，颜色只做第二编码。§9 动效走 ease-beacon 120ms。 */
+      className="group grid grid-cols-[32px_minmax(0,1fr)] items-center gap-2 p-2 border-0 [border-radius:var(--ow-radius-sm)] bg-transparent cursor-pointer text-left [transition:background-color_var(--ow-dur-1)_var(--ow-ease-beacon)] hover:bg-ow-hover active:bg-ow-press data-[ow-state=active]:bg-ow-selected-bg"
+      onClick={handleClick}
+    >
+      <span
+        data-ow-part="num"
+        // §7 读数：页码 mono ＋ tabular-nums，页数进两位时不跳宽
+        className="font-medium text-ow-fs-body leading-none font-[family-name:var(--ow-font-mono)] [font-variant-numeric:tabular-nums] text-ow-text-3 text-center group-data-[ow-state=active]:text-ow-text"
+      >
+        {index + 1}
+      </span>
+      <span
+        data-ow-part="slide"
+        className="block relative w-full [border-radius:var(--ow-radius-2xs)] border border-ow-border group-data-[ow-state=active]:border-ow-border-strong bg-ow-bg overflow-hidden pointer-events-none [transition:border-color_var(--ow-dur-1)_var(--ow-ease-beacon)]"
+        ref={thumbRef}
+        style={{ aspectRatio: `${slideWidth} / ${slideHeight}` }}
+      >
+        {thumbScale > 0 && (
+          <span
+            style={{
+              display: "block",
+              transform: `scale(${thumbScale})`,
+              transformOrigin: "top left",
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: nativeWidthPx,
+              height: nativeHeightPx,
+            }}
+          >
+            <PptxSlide slide={slide} slideWidth={slideWidth} slideHeight={slideHeight} />
+          </span>
+        )}
+      </span>
+    </Button>
+  )
+})
+
+// ─── Renderers (Word / Excel) ───
+
+async function renderWord(buffer: ArrayBuffer, container: HTMLElement): Promise<void> {
+  const { renderAsync } = await import("docx-preview")
+  await renderAsync(buffer, container, undefined, {
+    className: "ow-docx-body",
+    inWrapper: true,
+  })
+  // docx-preview injects a <style> with box-shadow on the page sections — strip it.
+  container.querySelectorAll<HTMLStyleElement>("style").forEach((style) => {
+    style.textContent = (style.textContent || "").replace(/box-shadow:[^;]+;/g, "")
+  })
+  // §14 白底浅字坑：纸面恒白（styles/components.css 把 section 的 background 定在
+  // --ow-paper），所以纸上任何**继承语义色**的节点必须走浅档墨色，否则暗主题下会出现
+  // 白纸浅字。docx-preview 的页节点是它自己建的 DOM，React 侧挂不上属性，只能渲完补打
+  // ——与 PreviewDialog 的 paper 制式（纸页 data-theme="light"）同一口径。
+  // 文档自带的墨色（docx-preview 从主题解析出的内联 color）不受影响，仍是文档自己的黑。
+  container.querySelectorAll<HTMLElement>("section.ow-docx-body, section.docx").forEach((page) => {
+    page.dataset.theme = "light"
+  })
+}
+
+// exceljs 4.4 throws "Cannot read properties of undefined (reading 'anchors')"
+// while reconciling drawings: `xlsx.js` does `(drawing.anchors || [])` over every
+// entry of the parsed drawings map, which guards `.anchors` being falsy but not
+// `drawing` itself being undefined. A drawing part that fails to parse (wrong
+// root tag, truncated XML) lands in that map as undefined and takes the whole
+// load down, even though we only ever render cell text.
+//
+// `ignoreNodes` alone is not enough — it suppresses the worksheet's own drawing
+// node, but that reconcile loop iterates the drawings map independently. Removing
+// the drawing parts alone is worse than nothing: it leaves the sheet's dangling
+// relationship behind and *causes* this same failure. Only both together cover
+// every case, so the zip rewrite runs strictly as a fallback and healthy files
+// never pay for it.
+async function loadWorkbookIgnoringDrawings(buffer: ArrayBuffer) {
+  const ExcelJS = await import("exceljs")
+  const loadOptions = { ignoreNodes: ["drawing", "picture"] }
+  try {
+    const workbook = new ExcelJS.Workbook()
+    await workbook.xlsx.load(buffer, loadOptions)
+    return workbook
+  } catch {
+    const JSZip = (await import("jszip")).default
+    const zip = await JSZip.loadAsync(buffer)
+    for (const entry of Object.keys(zip.files)) {
+      if (entry.replace(/^\//, "").startsWith("xl/drawings/")) zip.remove(entry)
+    }
+    const sanitized = await zip.generateAsync({ type: "arraybuffer" })
+    const workbook = new ExcelJS.Workbook()
+    await workbook.xlsx.load(sanitized, loadOptions)
+    return workbook
+  }
+}
+
+/**
+ * 用 x-spreadsheet 渲染工作簿，转换层与实例参数移植自 vue-office。
+ *
+ * 多 Sheet 切换交给 x-spreadsheet 自己的 bottombar，所以这里不再需要外层
+ * sheet tabs。返回值是清理函数：实例把自己挂在 container 上，还额外注册了
+ * 一个 window resize 监听。
+ */
+async function renderExcel(
+  buffer: ArrayBuffer,
+  container: HTMLElement,
+  measure: () => { width: number; height: number },
+): Promise<(() => void) | null> {
+  const workbook = await loadWorkbookIgnoringDrawings(buffer)
+  // 空工作簿返回 null＝「没挂任何实例」，空态交回 React（state="empty" → EmptyState 母题）。
+  // 原来这里直接 innerHTML 写一段灰字 <p>，节点不在 React 树里，G5 母题进不去。
+  if (!workbook.worksheets.length) return null
+
+  const mount = document.createElement("div")
+  mount.className = "ow-excel-sheet"
+  mount.setAttribute("data-slot", "excel-sheet")
+  container.appendChild(mount)
+
+  const sheet = await createSpreadsheet(mount, measure)
+  sheet.loadData(transferExcelToSpreadSheet(workbook, { minColLength: 20 }))
+  // 只读模式下 x-spreadsheet 仍渲染可编辑的隐藏 input，双击单元格会进编辑态
+  readOnlyInput(mount)
+
+  // x-spreadsheet 只监听 window resize，面板内部的尺寸变化（侧栏折叠、
+  // 分割条拖动）不会触发重排，所以补一个 ResizeObserver 走它的 reload。
+  const observer = new ResizeObserver(() => sheet.sheet.reload?.())
+  observer.observe(container)
+
+  return () => {
+    observer.disconnect()
+    mount.remove()
+  }
+}