@orbit-work/ui 0.1.2-preview.0 → 0.1.3

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

@@ -1,782 +0,0 @@
-"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()
-  }
-}