file-viewer3 1.0.8 → 1.0.25

package/dist/example/SOURCES.md

@@ -0,0 +1,49 @@
+# Public Sample Sources
+
+本目录中的 PDF、DOCX、PPTX、CAD、3D 模型、绘图、音频、EPUB 和 MSG 示例文件使用项目方提供的真实资料、可追溯的公开样本或项目内最小夹具；UMD、EML、OLB、DRA 和压缩包示例文件由项目内生成，用于固定回归对应结构。后续替换这些文件时，请优先选择许可清楚、可直接访问 raw 文件的公开仓库、国际组织公开文档或项目方明确授权的资料，并同步更新本文件与 `README.md`。
+
+| Local file | Source | License | Purpose |
+| --- | --- | --- | --- |
+| `drawing.dxf` | `https://github.com/mozman/ezdxf/blob/master/examples_dxf/wipeout_door.dxf` | MIT | Real DXF CAD drawing for pan, zoom and layer smoke tests |
+| `word.docx` | `https://www.basel.int/Portals/4/download.aspx?d=UNEP-CHW.15-6-Add.5-Rev.1.Chinese.docx` | Public Basel Convention document, source attribution required | Rich Chinese DOCX preview with headings, long-form text, tables, drawings, responsive white paper and print/export smoke tests |
+| `template.dot` | Copied from project `test.doc` fixture and saved with the Word 97-2003 template extension | Apache-2.0 | DOT extension routing smoke test for legacy Word template preview |
+| `ppt.pptx` | `https://github.com/hcp4715/R4Psy/blob/main/slides/chapter_1.pptx` | CC-BY-4.0 | Rich Chinese presentation smoke test for slide layout, images, theme styling and media-heavy PPTX rendering |
+| `pdf.pdf` | Project-owner provided `PDF沉浸式翻译技术说明.pdf` | Demo distribution authorized by project owner | 13-page PDF toolbar, scale, page/tree sidebar, print, export and dark-shell isolation smoke tests |
+| `sample.dwg` | `https://github.com/dshn06/cad-webviewer-unity/blob/main/cad-webview/public/cad-data/data/baseline-sample.dwg` | MIT | Real DWG sample for Worker + LibreDWG WASM geometry smoke tests |
+| `samples/apache/blocks_and_tables.dwf` | `https://issues.apache.org/jira/browse/TIKA-1823` attachment `blocks_and_tables.dwf` | Apache Software Foundation Jira attachment | Native DWF 6 container smoke test for blocks, tables, W2D graphics and MIME/header handling |
+| `samples/autodesk/house.dwfx` | `https://github.com/Developer-Autodesk/viewer-javascript-tutorial/blob/master/Sample%20files/House.dwfx` | MIT | Official Autodesk Viewer tutorial DWFx sample for native DWFx/XPS rendering, multi-page structure and CAD viewport smoke tests |
+| `samples/autodesk/robot-arm.dwfx` | `https://github.com/Developer-Autodesk/viewer-javascript-tutorial/blob/master/Sample%20files/RobotArm1.dwfx` | MIT | Official Autodesk Viewer tutorial DWFx sample for W2D/W3D native rendering and assembly drawing smoke tests |
+| `model.gltf` / `model.obj` / `model.stl` / `model.ply` / `model.step` | Project-generated minimal fixtures | Apache-2.0 | Three.js model rendering and engineering-format fallback smoke tests |
+| `flow.excalidraw` | `https://github.com/neo4j-labs/agent-memory/blob/main/docs/assets/images/diagrams/excalidraw/poleo-model.excalidraw` | Apache-2.0 | Real Excalidraw scene for official restore/export smoke tests |
+| `process.drawio` | `https://github.com/jgraph/drawio-diagrams/blob/dev/blog/data-flow.drawio` | Apache-2.0 | Official draw.io sample for diagrams.net viewer smoke tests |
+| `book.umd` | 项目内生成的最小 UMD 文本电子书 fixture | Apache-2.0 | UMD ebook metadata, table-of-contents and zlib text smoke tests |
+| `report.typ` | Project-generated Typst multi-page fixture | Apache-2.0 | Direct Typst source preview and browser WASM smoke tests |
+| `archive.zip` / `archive.tar.gz` | Project-packaged PDF, public DOCX, Markdown, TypeScript and JSON sample set | See bundled file sources | Archive directory, lazy extraction, cache and nested preview smoke tests |
+| `sample.eml` | Project-generated MIME email fixture | Apache-2.0 | EML headers, text/html body, attachment download and attachment preview smoke tests |
+| `sample.msg` | `https://github.com/HiraokaHyperTools/msgreader/blob/master/test/A%20memo.msg` | MIT | Outlook MSG parsing smoke test through @kenjiuno/msgreader |
+| `sample.olb` / `sample.dra` | Project-generated CFB EDA fixtures | Apache-2.0 | OLB/DRA structure tree, entity, property and readable-string smoke tests |
+| `audio.mp3` | `https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3` | CC0 | Small MP3 sample for native audio playback smoke tests |
+| `audio.ogg` | `https://commons.wikimedia.org/wiki/File:Example.ogg` | CC BY-SA 3.0 | OGG Vorbis sample for native audio playback smoke tests |
+| `book.epub` | `https://www.gutenberg.org/ebooks/928.epub3.images` | Public domain in the USA | EPUB sample for epubjs table-of-contents and paginated reading smoke tests |
+
+运行时说明:
+
+- `sample.dwg` 是真实 DWG 文件；运行时通过 `@flyfish-dev/cad-viewer` 按需加载 DWG Worker 和 LibreDWG WASM，验证浏览器本地 DWG 几何预览链路。
+- `samples/apache/blocks_and_tables.dwf` 来自 Apache Tika `TIKA-1823` 的公开 Jira 附件，保留 `(DWF V06.00)PK` 文件头，用于验证原生 DWF 6 ZIP 容器、块、表格、W2D 图形和 MIME/header 识别。
+- `samples/autodesk/house.dwfx` 来自 Autodesk 官方 Viewer 教程仓库，用于验证 DWFx / XPS native renderer、图形、多页结构和视图适配；该文件约 17MB，但只在用户选择样例时按需加载。
+- `samples/autodesk/robot-arm.dwfx` 同样来自 Autodesk 官方 Viewer 教程仓库，用于验证 W2D/W3D native renderer 和复杂装配图形。
+- `word.docx` 来自 Basel Convention 公开中文正式文档，覆盖标题层级、长正文、表格、图示、白色纸张和完整打印回归；该样本保留真实文档复杂度，但避免默认 Demo 首屏触发超大 DOCX 保护。
+- `template.dot` 复用 `test.doc` 的二进制内容，仅用于验证 Word 97-2003 模板扩展名能正确进入老 Word 渲染链路。
+- `ppt.pptx` 来自 `hcp4715/R4Psy` 的 CC-BY-4.0 中文课程课件，覆盖多页幻灯片、图片资源、主题样式、组合元素和富文本排版。
+- `pdf.pdf` 是项目方提供的 13 页真实技术说明 PDF，覆盖缩放、页侧边栏、树形导航、打印、导出和暗色外壳隔离回归。
+- `model.gltf`、`model.obj`、`model.stl`、`model.ply` 和 `model.step` 是最小 3D fixture，用于验证 Three.js 预览和工程格式转换提示。
+- `flow.excalidraw` 先经过 `@excalidraw/excalidraw` 的官方 `restore`，再用 `exportToSvg` 输出只读预览，以兼容公开样例中常见的精简字段。
+- `process.drawio` 由 diagrams.net 官方 `GraphViewer` 解析，组件不自行实现 draw.io 方言解析。
+- `audio.mp3` 与 `audio.ogg` 只用于验证浏览器原生音频播放能力；不同浏览器对编码的支持存在差异。
+- `book.epub` 来自 Project Gutenberg，运行时由 `epubjs` 解析 EPUB 包、目录和章节资源。
+- `book.umd` 由项目内生成，覆盖 UMD 文件头、元数据、章节偏移、章节标题和 zlib 压缩正文段。
+- `report.typ` 由项目内编写，覆盖 Typst 标题、表格、公式、代码块、多页输出、页面尺寸和打印/HTML 导出，线上 Demo 会直接读取源文件并通过浏览器端 WASM 编译预览。
+- `archive.zip` 与 `archive.tar.gz` 由本目录中的 PDF、DOCX、Markdown、TypeScript 和 JSON 示例打包，用于验证 `libarchive.js` Worker、按需解压、IndexedDB 缓存和内部文件继续预览；其中 DOCX 同步使用当前公开中文 Word 样例。
+- `sample.eml` 是标准 MIME fixture，用于验证 EML 头信息、HTML/文本正文和附件链路。
+- `sample.msg` 来自 `HiraokaHyperTools/msgreader` 测试样例，用于验证 Outlook MSG 解析。
+- `sample.olb` 与 `sample.dra` 是项目内生成的 CFB 夹具，用于验证 OLB / DRA 结构树、对象候选、属性和可读字符串索引。

package/dist/example/app.log

@@ -0,0 +1,13 @@
+2026-06-12T10:00:00+08:00 INFO  viewer boot version=1.0.23 framework=vue3
+2026-05-19T10:00:01+08:00 INFO  sample-picker open groups=7 default=document
+2026-05-19T10:00:02+08:00 INFO  preview start file=/example/word.docx source=url
+2026-05-19T10:00:03+08:00 INFO  renderer loaded name=word chunk=docx-preview elapsed=86ms
+2026-05-19T10:00:04+08:00 INFO  preview ready pages=3 scale=fit-width
+2026-05-19T10:01:10+08:00 INFO  preview start file=/example/code.ts source=url
+2026-05-19T10:01:10+08:00 INFO  renderer loaded name=code chunk=highlight.js language=typescript
+2026-05-19T10:01:11+08:00 WARN  remote-url cors-check status=skipped reason=local-sample
+2026-06-12T10:02:20+08:00 INFO  preview start file=/example/sample.dwg source=url
+2026-06-12T10:02:21+08:00 INFO  renderer loaded name=cad chunk=@flyfish-dev/cad-viewer worker=libredwg wasm=true
+2026-06-12T10:02:22+08:00 INFO  preview ready file=/example/samples/apache/blocks_and_tables.dwf renderer=dwf-viewer canvases=4
+2026-05-19T10:03:00+08:00 ERROR pdf-load requestId=qa-42 message="network aborted by new preview"
+2026-05-19T10:03:01+08:00 INFO  request ignored requestId=qa-42 reason=stale-render-version

package/dist/example/change.diff

@@ -0,0 +1,40 @@
+diff --git a/viewer.ts b/viewer.ts
+index 1111111..3333333 100644
+--- a/viewer.ts
++++ b/viewer.ts
+@@ -1,8 +1,24 @@
+-const renderer = 'text'
++const renderer = 'highlight.js'
++
++type PreviewMode = 'url' | 'file'
++
+ export default renderer
+
+-export function open(url: string) {
+-  return fetch(url)
++export async function open(url: string, mode: PreviewMode = 'url') {
++  const response = await fetch(url, { credentials: 'include' })
++  if (!response.ok) {
++    throw new Error(`Preview download failed: ${response.status}`)
++  }
++
++  const blob = await response.blob()
++  if (mode === 'file') {
++    const filename = decodeURIComponent(url.split('/').pop() || 'preview.bin')
++    return new File([blob], filename, { type: blob.type })
++  }
++
++  return blob
+ }
+diff --git a/styles.css b/styles.css
+index aaaaaaa..bbbbbbb 100644
+--- a/styles.css
++++ b/styles.css
+@@ -4,6 +4,9 @@
+ .preview-shell {
+   min-height: 100vh;
+   overflow: hidden;
++  display: grid;
++  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
++  background: #f6f8fb;
+ }

package/dist/example/code.cjs

@@ -0,0 +1,38 @@
+const fs = require('node:fs')
+const path = require('node:path')
+
+const rootDir = path.resolve(__dirname, '..', '..')
+const distDir = path.join(rootDir, 'dist')
+
+function readManifest() {
+  const manifestPath = path.join(distDir, '.vite', 'manifest.json')
+  if (!fs.existsSync(manifestPath)) {
+    return {}
+  }
+  return JSON.parse(fs.readFileSync(manifestPath, 'utf8'))
+}
+
+function pickAssets(manifest) {
+  return Object.entries(manifest)
+    .filter(([, entry]) => entry.isEntry || entry.file.endsWith('.css'))
+    .map(([source, entry]) => ({
+      source,
+      file: entry.file,
+      css: entry.css || []
+    }))
+}
+
+module.exports = {
+  rootDir,
+  distDir,
+  readManifest,
+  pickAssets,
+  createReport() {
+    const assets = pickAssets(readManifest())
+    return {
+      generatedAt: new Date().toISOString(),
+      assetCount: assets.length,
+      assets
+    }
+  }
+}

package/dist/example/code.css

@@ -0,0 +1,64 @@
+:root {
+  --viewer-bg: #f6f8fb;
+  --viewer-card: #ffffff;
+  --viewer-border: rgba(15, 23, 42, 0.1);
+  --viewer-accent: #2563eb;
+  --viewer-success: #16a34a;
+  --viewer-text: #0f172a;
+}
+
+.viewer-shell {
+  display: grid;
+  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
+  min-height: 100vh;
+  background: var(--viewer-bg);
+  color: var(--viewer-text);
+}
+
+.sample-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border-right: 1px solid var(--viewer-border);
+}
+
+.sample-card {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px;
+  border: 1px solid var(--viewer-border);
+  border-radius: 8px;
+  background: var(--viewer-card);
+  transition: border-color 160ms ease, transform 160ms ease;
+}
+
+.sample-card:hover {
+  border-color: color-mix(in srgb, var(--viewer-accent), white 55%);
+  transform: translateY(-1px);
+}
+
+.sample-card[aria-current='true'] {
+  border-color: var(--viewer-success);
+  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.12);
+}
+
+.viewer-panel {
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--viewer-border);
+  background: #e5e7eb;
+}
+
+@media (max-width: 780px) {
+  .viewer-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .sample-sidebar {
+    border-right: 0;
+    border-bottom: 1px solid var(--viewer-border);
+  }
+}

package/dist/example/code.java

@@ -0,0 +1,55 @@
+import java.util.List;
+import java.util.Locale;
+import java.util.Map;
+import java.util.Optional;
+
+public final class PreviewFile {
+    private static final Map<String, String> RENDERERS = Map.of(
+        "pdf", "pdfjs-dist",
+        "ofd", "DLTech21/ofd.js",
+        "typ", "typst.ts",
+        "dxf", "@flyfish-dev/cad-viewer",
+        "dwg", "@flyfish-dev/cad-viewer",
+        "dwf", "@flyfish-dev/cad-viewer",
+        "dwfx", "@flyfish-dev/cad-viewer",
+        "xps", "@flyfish-dev/cad-viewer",
+        "json", "highlight.js"
+    );
+
+    private final String name;
+    private final long size;
+
+    public PreviewFile(String name, long size) {
+        this.name = name;
+        this.size = size;
+    }
+
+    public String extension() {
+        int index = name.lastIndexOf('.');
+        return index >= 0 ? name.substring(index + 1).toLowerCase(Locale.ROOT) : "";
+    }
+
+    public Optional<String> renderer() {
+        return Optional.ofNullable(RENDERERS.get(extension()));
+    }
+
+    public boolean requiresAsyncChunk() {
+        return renderer().isPresent() || size > 1024 * 1024;
+    }
+
+    public static void main(String[] args) {
+        List<PreviewFile> files = List.of(
+            new PreviewFile("contract.pdf", 827_000),
+            new PreviewFile("invoice.ofd", 4_278_691),
+            new PreviewFile("report.typ", 18_000),
+            new PreviewFile("snippet.java", 2_400)
+        );
+
+        files.forEach(file -> System.out.printf(
+            "%s -> %s async=%s%n",
+            file.name,
+            file.renderer().orElse("fallback"),
+            file.requiresAsyncChunk()
+        ));
+    }
+}

package/dist/example/code.js

@@ -0,0 +1,55 @@
+const RENDERER_GROUPS = {
+  document: ['doc', 'docx', 'pdf', 'ofd', 'typ', 'typst'],
+  sheet: ['xlsx', 'xls', 'csv', 'ods'],
+  drawing: ['dxf', 'dwg', 'dwf', 'dwfx', 'xps'],
+  source: ['js', 'ts', 'tsx', 'vue', 'json', 'yaml']
+}
+
+const DEFAULT_ICON = {
+  label: 'FILE',
+  tone: '#64748b'
+}
+
+function normalizeExtension(filename = '') {
+  const cleanName = filename.split('?')[0].split('#')[0]
+  const dotIndex = cleanName.lastIndexOf('.')
+  return dotIndex >= 0 ? cleanName.slice(dotIndex + 1).toLowerCase() : ''
+}
+
+export function resolvePreviewMeta(filename) {
+  const extension = normalizeExtension(filename)
+
+  for (const [group, extensions] of Object.entries(RENDERER_GROUPS)) {
+    if (extensions.includes(extension)) {
+      return {
+        group,
+        extension,
+        icon: extension.toUpperCase(),
+        supported: true
+      }
+    }
+  }
+
+  return {
+    group: 'unknown',
+    extension,
+    icon: DEFAULT_ICON.label,
+    supported: false
+  }
+}
+
+export async function createPreviewFile(url, fallbackName = 'download.bin') {
+  const response = await fetch(url, { credentials: 'include' })
+  if (!response.ok) {
+    throw new Error(`Download failed with ${response.status}`)
+  }
+
+  const blob = await response.blob()
+  const name = decodeURIComponent(url.split('/').pop() || fallbackName)
+  return new File([blob], name, { type: blob.type })
+}
+
+const samples = ['invoice.ofd', 'report.typ', 'drawing.dxf', 'component.vue', 'archive.unknown']
+const summary = samples.map(resolvePreviewMeta)
+
+console.table(summary)

package/dist/example/code.jsx

@@ -0,0 +1,43 @@
+import { useMemo, useState } from 'react'
+
+const formatGroups = [
+  { title: 'Documents', items: ['docx', 'pdf', 'ofd'] },
+  { title: 'Drawings', items: ['dxf', 'dwg', 'dwf', 'dwfx', 'xps'] },
+  { title: 'Code', items: ['js', 'ts', 'vue', 'json'] }
+]
+
+export function PreviewPicker({ onSelect }) {
+  const [activeGroup, setActiveGroup] = useState('Documents')
+
+  const visibleItems = useMemo(() => {
+    return formatGroups.find(group => group.title === activeGroup)?.items || []
+  }, [activeGroup])
+
+  return (
+    <section className="preview-picker">
+      <nav aria-label="Preview groups">
+        {formatGroups.map(group => (
+          <button
+            key={group.title}
+            className={group.title === activeGroup ? 'active' : ''}
+            type="button"
+            onClick={() => setActiveGroup(group.title)}
+          >
+            {group.title}
+          </button>
+        ))}
+      </nav>
+
+      <ul>
+        {visibleItems.map(type => (
+          <li key={type}>
+            <button type="button" onClick={() => onSelect(type)}>
+              <strong>{type.toUpperCase()}</strong>
+              <span>Open sample.{type}</span>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}

package/dist/example/code.mjs

@@ -0,0 +1,36 @@
+export const runtime = 'browser-module'
+
+const rendererLoaders = {
+  pdf: () => import('/src/package/vendors/pdf'),
+  ofd: () => import('/src/package/vendors/ofd'),
+  dxf: () => import('/src/package/vendors/cad'),
+  json: () => import('/src/package/vendors/text')
+}
+
+export function getExtension(url) {
+  return new URL(url, window.location.href)
+    .pathname
+    .split('.')
+    .pop()
+    .toLowerCase()
+}
+
+export async function loadRenderer(url) {
+  const extension = getExtension(url)
+  const loader = rendererLoaders[extension] || rendererLoaders.json
+  const startedAt = performance.now()
+  const module = await loader()
+
+  return {
+    extension,
+    module,
+    elapsed: Math.round(performance.now() - startedAt)
+  }
+}
+
+export async function preview(url, target) {
+  const { extension, module, elapsed } = await loadRenderer(url)
+  target.dataset.extension = extension
+  target.dataset.loadedIn = `${elapsed}ms`
+  return module.default
+}

package/dist/example/code.py

@@ -0,0 +1,56 @@
+from dataclasses import dataclass
+from pathlib import Path
+from typing import Iterable
+
+
+@dataclass(frozen=True)
+class PreviewFile:
+    name: str
+    size: int
+    source: str = "url"
+
+    @property
+    def extension(self) -> str:
+        return Path(self.name).suffix.removeprefix(".").lower()
+
+    @property
+    def is_large(self) -> bool:
+        return self.size > 5 * 1024 * 1024
+
+
+RENDERERS = {
+    "pdf": "pdfjs-dist",
+    "ofd": "DLTech21/ofd.js",
+    "typ": "typst.ts",
+    "typst": "typst.ts",
+    "dxf": "@flyfish-dev/cad-viewer",
+    "dwg": "@flyfish-dev/cad-viewer",
+    "dwf": "@flyfish-dev/cad-viewer",
+    "dwfx": "@flyfish-dev/cad-viewer",
+    "xps": "@flyfish-dev/cad-viewer",
+    "json": "highlight.js",
+    "py": "highlight.js",
+}
+
+
+def build_preview_queue(files: Iterable[PreviewFile]) -> list[dict[str, str]]:
+    queue = []
+    for item in files:
+        renderer = RENDERERS.get(item.extension, "fallback")
+        queue.append({
+            "name": item.name,
+            "renderer": renderer,
+            "priority": "low" if item.is_large else "normal",
+        })
+    return queue
+
+
+samples = [
+    PreviewFile("invoice.ofd", 428000),
+    PreviewFile("report.typ", 18000),
+    PreviewFile("house.dwfx", 17_000_000),
+    PreviewFile("trace.log", 12000),
+]
+
+for job in build_preview_queue(samples):
+    print(f"{job['name']}: {job['renderer']} ({job['priority']})")

package/dist/example/code.ts

@@ -0,0 +1,78 @@
+import { computed, ref } from 'vue'
+
+type PreviewStatus = 'idle' | 'downloading' | 'rendering' | 'ready' | 'error'
+type PreviewKind = 'document' | 'sheet' | 'drawing' | 'source' | 'media' | 'unknown'
+
+interface PreviewSource {
+  id: string
+  filename: string
+  url: string
+  size?: number
+  updatedAt?: string
+}
+
+interface RenderPlan {
+  kind: PreviewKind
+  extension: string
+  lazyChunk: string
+  preferredInput: 'url' | 'file'
+}
+
+const chunkMap: Record<string, RenderPlan['kind']> = {
+  doc: 'document',
+  docx: 'document',
+  pdf: 'document',
+  ofd: 'document',
+  typ: 'document',
+  typst: 'document',
+  xlsx: 'sheet',
+  csv: 'sheet',
+  dxf: 'drawing',
+  dwg: 'drawing',
+  ts: 'source',
+  json: 'source',
+  mp4: 'media'
+}
+
+export const activeSource = ref<PreviewSource>({
+  id: 'sample-typst',
+  filename: 'report.typ',
+  url: '/example/report.typ',
+  updatedAt: '2026-06-06T17:40:00+08:00'
+})
+
+export const status = ref<PreviewStatus>('idle')
+export const statusText = computed(() => `${activeSource.value.filename} / ${status.value}`)
+
+function getExtension(filename: string) {
+  const dotIndex = filename.lastIndexOf('.')
+  return dotIndex >= 0 ? filename.slice(dotIndex + 1).toLowerCase() : ''
+}
+
+export function createRenderPlan(source: PreviewSource): RenderPlan {
+  const extension = getExtension(source.filename)
+  const kind = chunkMap[extension] || 'unknown'
+
+  return {
+    kind,
+    extension,
+    lazyChunk: kind === 'unknown' ? 'fallback' : `${kind}-${extension}`,
+    preferredInput: source.url.includes('/download') ? 'file' : 'url'
+  }
+}
+
+export async function openPreview(source: PreviewSource) {
+  activeSource.value = source
+  status.value = 'downloading'
+
+  const response = await fetch(source.url, { credentials: 'include' })
+  if (!response.ok) {
+    status.value = 'error'
+    throw new Error(`Download failed: ${response.status}`)
+  }
+
+  status.value = 'rendering'
+  const blob = await response.blob()
+  status.value = 'ready'
+  return new File([blob], source.filename, { type: blob.type })
+}

package/dist/example/code.tsx

@@ -0,0 +1,36 @@
+import { useMemo } from 'react'
+
+type PreviewState = 'idle' | 'loading' | 'ready' | 'error'
+
+type PreviewBadgeProps = {
+  type: string
+  state: PreviewState
+  filename: string
+  onOpen?: (filename: string) => void
+}
+
+const toneByState: Record<PreviewState, string> = {
+  idle: '#64748b',
+  loading: '#2563eb',
+  ready: '#16a34a',
+  error: '#dc2626'
+}
+
+export function PreviewBadge({ type, state, filename, onOpen }: PreviewBadgeProps) {
+  const label = useMemo(() => {
+    return `${type.toUpperCase()} / ${state}`
+  }, [type, state])
+
+  return (
+    <button
+      className='preview-badge'
+      style={{ borderColor: toneByState[state], color: toneByState[state] }}
+      type='button'
+      aria-label={`Open ${filename}`}
+      onClick={() => onOpen?.(filename)}
+    >
+      <strong>{label}</strong>
+      <span>{filename}</span>
+    </button>
+  )
+}

package/dist/example/component.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+type SampleFile = {
+  name: string
+  type: string
+  size: number
+}
+
+const files = ref<SampleFile[]>([
+  { name: 'contract.pdf', type: 'pdf', size: 184320 },
+  { name: 'invoice.ofd', type: 'ofd', size: 98304 },
+  { name: 'drawing.dxf', type: 'dxf', size: 42752 }
+])
+
+const selected = ref(files.value[0])
+
+const title = computed(() => {
+  return `${selected.value.name} / ${selected.value.type.toUpperCase()}`
+})
+
+function selectFile(file: SampleFile) {
+  selected.value = file
+}
+</script>
+
+<template>
+  <section class="sample">
+    <header>
+      <span>Flyfish Viewer</span>
+      <strong>{{ title }}</strong>
+    </header>
+
+    <button
+      v-for="file in files"
+      :key="file.name"
+      type="button"
+      :class="{ active: file.name === selected.name }"
+      @click="selectFile(file)"
+    >
+      <span>{{ file.type }}</span>
+      <strong>{{ file.name }}</strong>
+      <em>{{ Math.round(file.size / 1024) }} KB</em>
+    </button>
+  </section>
+</template>
+
+<style scoped>
+.sample {
+  display: grid;
+  gap: 10px;
+  padding: 16px;
+  color: #21a366;
+}
+
+.sample button {
+  display: grid;
+  grid-template-columns: 42px minmax(0, 1fr) auto;
+  gap: 8px;
+  border: 1px solid #d8e3dc;
+  border-radius: 8px;
+  background: #fff;
+}
+
+.sample button.active {
+  border-color: currentColor;
+}
+</style>