@l1yp/file-viewer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 l1yp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# @l1yp/file-viewer
+
+浏览器内的**多格式文件查看器**，封装成一个 Vue 3 组件。给它一个文件，它自动识别类型并**完全在浏览器里**解析渲染——**文件字节不经过任何服务器**。支持 60+ 种格式：Office 文档、压缩包、图片、代码、音频、证书、数据库、3D 模型、电子书……
+
+> 从 [chat-share-proxy](https://github.com/) 抽取。完整设计见仓库 `frontend/docs/file-viewer-package-design.md`。
+
+## 特性
+
+- **60+ 格式**：docx/xlsx/pptx/pdf、zip/7z/rar/tar、png/tiff/psd/heic/dcm、csv/jsonl/sqlite、markdown/代码高亮、eml/mht/har、字体/证书/密钥库、epub/mob、drawio/dxf/geojson、hprof/.class/.so/.dll、易语言 .e/.ec 等。
+- **零后端**：上游字节只在浏览器解析；HTML/SVG 走沙箱 iframe、下载端点无法内联执行。
+- **按需分包**：每个查看器是独立的懒加载 chunk，打开 PDF 才拉 PDF 引擎；用不到的格式零成本。
+- **重型依赖可选**：只装你需要的格式的引擎；没装时显示「请安装 X」提示卡，不崩溃。
+- **主题可定制**：CSS 变量作用域限定在组件根，不污染宿主；`theme` prop 或覆盖变量即可换肤。
+
+## 安装
+
+```sh
+npm i @l1yp/file-viewer vue
+```
+
+`vue`（>=3.5）是 peer 依赖。核心解析（代码高亮 / Markdown 数学 / frontmatter）依赖的 `highlight.js` / `katex` / `js-yaml` 会随包自动安装。
+
+**各重型格式的引擎是可选 peer 依赖**——按需安装你要支持的格式：
+
+| 格式 | 需额外安装 |
+| --- | --- |
+| PDF | `pdfjs-dist` |
+| Word `.docx` | `docx-preview` |
+| Excel `.xlsx` | `exceljs numfmt` |
+| PowerPoint `.pptx` | `@aiden0z/pptx-renderer pdfjs-dist` |
+| SQLite `.sqlite/.db` | `sql.js` |
+| 3D 模型 `.stl/.obj/.glb/…` | `three` |
+| 地图 `.geojson/.kml/.gpx` | `maplibre-gl` |
+| Photoshop `.psd` | `ag-psd` |
+| TIFF `.tif/.tiff` | `utif2` |
+| HEIC/HEIF | `heic2any` |
+| EPUB | `epubjs` |
+| DICOM `.dcm` | `dicom-parser`（JPEG2000/JPEG-LS 另需 `@cornerstonejs/codec-openjpeg @cornerstonejs/codec-charls @cornerstonejs/codec-libjpeg-turbo-8bit`） |
+| RAR | `node-unrar-js` |
+| Brotli 归档 `.br` | `brotli-dec-wasm` |
+| 微信/QQ 语音（SILK/AMR） | `silk-wasm @audio/decode-amr` |
+
+未安装某格式的引擎时，打开该文件会显示一张「预览 X 需要安装 `<pkg>`」的卡片（含一键复制安装命令 + 下载原文件），不会报错崩溃。
+
+> **打包器提示**：这些可选依赖在库构建里是 `external`。若你的打包器（Vite/webpack）对未安装的可选依赖在**构建期**报「无法解析」，把你不用的那几个加进 bundler 的 external / `optimizeDeps.exclude` 即可。
+
+## 使用
+
+```ts
+import { FileViewer } from '@l1yp/file-viewer'
+import '@l1yp/file-viewer/style.css' // 必需：查看器的样式在这里
+```
+
+```vue
+<!-- 最简：URL + 文件名 -->
+<FileViewer :src="url" name="report.csv" />
+
+<!-- 内存字节（拖拽 / 上传的 File 直接喂） -->
+<FileViewer :blob="file" :name="file.name" />
+
+<!-- 需要鉴权的 URL：附加 fetch 配置，或用 load 完全自定义取字节 -->
+<FileViewer
+  :input="{
+    src,
+    name,
+    mime,
+    size,
+    fetchConfig: { headers: { Authorization: `Bearer ${token}` } },
+  }"
+  theme="dark"
+  @loaded="onText"
+  @error="onError"
+/>
+```
+
+**数据源**（写在 `input` 上，或用同名简写 props）——四选一，优先级 `text` > `blob` > `load` > `src`：
+
+| 字段 | 说明 |
+| --- | --- |
+| `src` | 可直接 fetch 的 URL（最常用） |
+| `blob` | 内存字节（`Blob`/`File`） |
+| `text` | 已解码文本（文本型查看器免网络） |
+| `fetchConfig` | 附加到 `fetch(src, …)`：headers/credentials/mode …（会触发一次性预取到 blob） |
+| `load` | `() => Promise<Blob \| ArrayBuffer>`，自己拉字节（签名换取 / SDK） |
+
+### 更底层的出口
+
+```ts
+import {
+  FileViewer, // ① 完整面板（含头部、下载、主题），ViewerInput 驱动
+  FileViewerBody, // ② 只有内容区，塞进你自己的外壳
+  classifyViewerFile, // 纯函数：文件 → 用哪个查看器，自己路由
+  isTextFile,
+  fileExt, // 类型判定辅助
+  resolveInput, // 把 ViewerInput 归一化成可 fetch 的源
+} from '@l1yp/file-viewer'
+```
+
+## 主题 / 样式
+
+所有样式的 CSS 变量作用域限定在组件根 `.fv-root`，**不碰宿主全局样式**。三种定制方式：
+
+1. **`theme` prop**：`theme="light | dark | system | inherit"`。`inherit` = 不设主题、直接吃宿主已定义的变量。
+2. **覆盖 CSS 变量**：在你自己的 `.fv-root` 规则里改，例如
+   ```css
+   .fv-root {
+     --accent: #2563eb;
+     --font-mono: 'JetBrains Mono', monospace;
+   }
+   ```
+3. 复制 `dist` 里的令牌整套替换。
+
+> **数学公式**：如需 Markdown 里的数学公式正常显示，宿主需自行 `import 'katex/dist/katex.min.css'`。
+> 直接用低层的 `<FileViewerPanel>`（不带 `.fv-root` 包裹）时，请自己定义那批 CSS 变量，或改用带 `.fv-root` 的 `<FileViewer>`。
+
+## 开发
+
+```sh
+pnpm -C packages/file-viewer type-check   # vue-tsc 类型检查
+pnpm -C packages/file-viewer build        # vp build（JS 分包 + style.css）+ vue-tsc（.d.ts）
+```
+
+## 发布
+
+```sh
+npm pack --dry-run   # 预览将发布的文件（dist + README + LICENSE）
+npm publish          # publishConfig.access=public，已配好公开发布
+```
+
+`prepack` 脚本会在打包/发布前自动重新构建。发布前记得在 `package.json` 补上 `repository` / `homepage` 字段。
+
+## License
+
+MIT

package/dist/FileViewer.js

@@ -0,0 +1,7 @@
+import e from "./_virtual/_plugin-vue_export-helper.js";
+import t from "./FileViewer.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                           */
+//#region src/FileViewer.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-b3eb2d75"]]);
+//#endregion
+export { n as default };

package/dist/FileViewer.vue.d.ts

@@ -0,0 +1,37 @@
+import type { ViewerInput } from './types';
+/**
+ * The batteries-included file viewer (see docs/file-viewer-package-design.md §3). Give it a file — as a full
+ * {@link ViewerInput}, or the shorthand `src`/`blob`/`text` + `name` props — and it normalizes the source
+ * ({@link resolveInput}, honoring `fetchConfig`/`load` for authenticated sources), classifies it
+ * ({@link classifyViewerFile}), and dispatches to the right in-browser viewer via {@link FileViewerBody}.
+ *
+ * The root carries `class="fv-root"` + the resolved `data-theme`, so all tokens (styles/theme.css) are scoped
+ * here — the library never touches the host's global styles. `theme="inherit"` sets no attribute, letting the
+ * host drive light/dark by defining the CSS variables itself.
+ */
+type __VLS_Props = {
+    /** Full input (takes precedence over the shorthand props below). */
+    input?: ViewerInput;
+    /** Shorthand source + descriptors (used when `input` is omitted). */
+    src?: string;
+    name?: string;
+    mime?: string | null;
+    size?: number;
+    blob?: Blob;
+    text?: string;
+    /** Theme: light | dark | system, or `inherit` (no attribute — host-driven). */
+    theme?: 'light' | 'dark' | 'system' | 'inherit';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (message: string) => any;
+    close: () => any;
+    loaded: (text: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onError?: ((message: string) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onLoaded?: ((text: string) => any) | undefined;
+}>, {
+    theme: "light" | "dark" | "system" | "inherit";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/FileViewer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,103 @@
+import { resolveInput as e } from "./lib/resolveInput.js";
+import { fileExt as t } from "./lib/fileType.js";
+import { classifyViewerFile as n } from "./lib/viewerKind.js";
+import r from "./components/FileViewerBody.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, defineComponent as l, onBeforeUnmount as u, openBlock as d, ref as f, toDisplayString as p, watch as m } from "vue";
+//#region src/FileViewer.vue?vue&type=script&setup=true&lang.ts
+var h = ["data-theme"], g = { class: "fv__head" }, _ = ["title"], v = { class: "fv__name" }, y = {
+	key: 0,
+	class: "fv__ext"
+}, b = ["href", "download"], x = { class: "fv__body" }, S = {
+	key: 0,
+	class: "fv__msg"
+}, C = {
+	key: 1,
+	class: "fv__msg fv__msg--err"
+}, w = {
+	key: 3,
+	class: "fv__msg"
+}, T = /*@__PURE__*/ l({
+	__name: "FileViewer",
+	props: {
+		input: {},
+		src: {},
+		name: {},
+		mime: {},
+		size: {},
+		blob: {},
+		text: {},
+		theme: { default: "system" }
+	},
+	emits: [
+		"loaded",
+		"error",
+		"close"
+	],
+	setup(l, { emit: T }) {
+		let E = l, D = T, O = i(() => E.input ? E.input : E.name ? {
+			name: E.name,
+			src: E.src,
+			blob: E.blob,
+			text: E.text,
+			mime: E.mime,
+			size: E.size
+		} : null), k = f(null), A = f(!1), j = f(""), M = null;
+		function N() {
+			M &&= (M.dispose(), null);
+		}
+		async function P(t) {
+			if (N(), k.value = null, j.value = "", t) {
+				A.value = !0;
+				try {
+					let r = await e(t);
+					M = r;
+					let i = n({
+						name: r.name,
+						url: r.url,
+						mime: r.mime,
+						size: r.size
+					});
+					k.value = r.text == null ? i : {
+						...i,
+						content: r.text
+					};
+				} catch (e) {
+					j.value = String(e), D("error", String(e));
+				} finally {
+					A.value = !1;
+				}
+			}
+		}
+		m(O, (e) => void P(e), { immediate: !0 }), u(N);
+		let F = i(() => E.theme === "inherit" ? void 0 : E.theme), I = i(() => O.value?.name ?? ""), L = i(() => t(I.value).toUpperCase()), R = i(() => k.value?.content != null);
+		return (e, t) => (d(), s("div", {
+			class: "fv-root fv",
+			"data-theme": F.value
+		}, [c("header", g, [
+			c("span", {
+				class: "fv__title",
+				title: I.value
+			}, [c("span", v, p(I.value), 1), L.value ? (d(), s("span", y, "· " + p(L.value), 1)) : o("", !0)], 8, _),
+			k.value?.url && !R.value ? (d(), s("a", {
+				key: 0,
+				class: "fv__act",
+				href: k.value.url,
+				download: k.value.name,
+				title: "下载"
+			}, "下载", 8, b)) : o("", !0),
+			c("button", {
+				type: "button",
+				class: "fv__act",
+				title: "关闭",
+				onClick: t[0] ||= (e) => D("close")
+			}, "关闭")
+		]), c("div", x, [A.value ? (d(), s("p", S, "准备中…")) : j.value ? (d(), s("p", C, p(j.value), 1)) : k.value ? (d(), a(r, {
+			key: 2,
+			file: k.value,
+			onLoaded: t[1] ||= (e) => D("loaded", e),
+			onError: t[2] ||= (e) => D("error", e)
+		}, null, 8, ["file"])) : (d(), s("p", w, "未提供文件。"))])], 8, h));
+	}
+});
+//#endregion
+export { T as default };

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,8 @@
+//#region \0plugin-vue:export-helper
+var e = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+};
+//#endregion
+export { e as default };

package/dist/components/AppxViewer.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./AppxViewer.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                           */
+//#region src/components/AppxViewer.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-d5fba7c8"]]);
+//#endregion
+export { n as default };

package/dist/components/AppxViewer.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The side viewer's APPX / MSIX mode: fetch a Windows app package, unzip its manifest in-browser (see
+ * lib/appx.ts — an APPX is an OPC zip, decompressed via the project's own ZIP reader), and surface the
+ * identity (name / version / publisher), dependencies, declared capabilities, applications and languages.
+ * Mirrors BinObjBrowser / MsiViewer: the bytes come from the same download endpoint as any other file and
+ * never leave the browser. An APPX is neither a PE nor an MSI — different container, hence a separate viewer.
+ *
+ * Large-file gate: a package can be hundreds of MB; unless the manifest size is known to be small
+ * (≤ LARGE_THRESHOLD) we show a confirm card and only fetch on click.
+ */
+type __VLS_Props = {
+    url: string;
+    name: string;
+    size?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/AppxViewer.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,174 @@
+import { formatBytes as e } from "../lib/format.js";
+import t from "./icons/Icon.js";
+import { NotAppxError as n, parseAppx as r } from "../lib/appx.js";
+import { Fragment as i, computed as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as ee, defineComponent as u, normalizeClass as te, onBeforeUnmount as ne, onMounted as re, openBlock as d, ref as f, renderList as p, toDisplayString as m, unref as ie, watch as ae } from "vue";
+//#region src/components/AppxViewer.vue?vue&type=script&setup=true&lang.ts
+var oe = { class: "apx" }, se = {
+	key: 0,
+	class: "apx__confirm"
+}, ce = ["title"], le = { class: "apx__confirm-sub" }, h = {
+	key: 1,
+	class: "apx__msg"
+}, g = {
+	key: 2,
+	class: "apx__msg apx__msg--error"
+}, _ = { class: "apx__summary" }, v = { class: "apx__fmt" }, y = { key: 0 }, b = { key: 1 }, x = {
+	key: 0,
+	class: "apx__card"
+}, S = { class: "apx__dl" }, C = { class: "apx__dt" }, w = { class: "apx__dd" }, T = ["title", "onClick"], E = {
+	key: 0,
+	class: "apx__tag"
+}, D = {
+	key: 1,
+	class: "apx__copied"
+}, O = {
+	key: 1,
+	class: "apx__card"
+}, k = { class: "apx__h" }, A = { class: "apx__deps" }, j = { class: "apx__depname" }, M = { class: "apx__depver" }, N = {
+	key: 0,
+	class: "apx__chip"
+}, P = { key: 1 }, F = { key: 2 }, I = {
+	key: 2,
+	class: "apx__card"
+}, L = { class: "apx__h" }, R = { class: "apx__deps" }, ue = { class: "apx__depname" }, z = {
+	key: 0,
+	class: "apx__depver"
+}, B = {
+	key: 3,
+	class: "apx__card"
+}, V = { class: "apx__deps" }, H = { class: "apx__depname" }, U = { class: "apx__depver" }, de = { key: 0 }, fe = {
+	key: 1,
+	class: "apx__depmuted"
+}, pe = { class: "apx__depname" }, me = { class: "apx__depver" }, he = { key: 0 }, ge = {
+	key: 4,
+	class: "apx__card"
+}, _e = { class: "apx__h" }, ve = { class: "apx__tables" }, ye = {
+	key: 5,
+	class: "apx__section"
+}, be = {
+	key: 0,
+	class: "apx__tables apx__tables--pad"
+}, xe = 8 * 1024 * 1024, W = /*@__PURE__*/ u({
+	__name: "AppxViewer",
+	props: {
+		url: {},
+		name: {},
+		size: {}
+	},
+	setup(u) {
+		let W = u, G = f("loading"), K = f(""), q = f(null), J = f(!1);
+		function Y() {
+			q.value = null, J.value = !1, K.value = "", W.size != null && W.size <= xe ? X() : G.value = "confirm";
+		}
+		async function X() {
+			G.value = "loading", K.value = "";
+			try {
+				let e = await fetch(W.url);
+				if (!e.ok) throw Error(`HTTP ${e.status}`);
+				q.value = await r(await e.arrayBuffer()), G.value = "ready";
+			} catch (e) {
+				K.value = e instanceof n || e instanceof Error ? e.message : String(e), G.value = "error";
+			}
+		}
+		let Se = a(() => q.value?.kind === "bundle" ? "捆绑包" : "应用包");
+		function Ce(e) {
+			return !!e && e.toLowerCase().startsWith("ms-resource:");
+		}
+		let Z = a(() => {
+			let e = q.value;
+			if (!e) return [];
+			let t = [], n = (e, n) => {
+				n && t.push({
+					label: e,
+					value: n,
+					hint: Ce(n)
+				});
+			};
+			return n("显示名", e.displayName), n("名称", e.name), n("版本", e.version), n("架构", e.architecture), n("发布者", e.publisherDisplayName), n("发布者证书", e.publisher), t;
+		}), Q = f(""), $;
+		async function we(e) {
+			try {
+				await navigator.clipboard?.writeText(e);
+			} catch {}
+			Q.value = e, clearTimeout($), $ = setTimeout(() => Q.value = "", 1200);
+		}
+		return re(Y), ae(() => W.url, Y), ne(() => clearTimeout($)), (n, r) => (d(), s("div", oe, [G.value === "confirm" ? (d(), s("div", se, [
+			ee(t, {
+				name: "archive",
+				size: 32
+			}),
+			c("p", {
+				class: "apx__confirm-title",
+				title: u.name
+			}, m(u.name), 9, ce),
+			c("p", le, m(u.size == null ? "文件大小未知" : `文件较大（${ie(e)(u.size)}）`) + "，解析需将整个文件下载到浏览器。 ", 1),
+			c("button", {
+				type: "button",
+				class: "apx__btn",
+				onClick: X
+			}, "加载并解析清单")
+		])) : G.value === "loading" ? (d(), s("p", h, "正在解析应用包…")) : G.value === "error" ? (d(), s("div", g, [c("p", null, m(K.value), 1), c("button", {
+			type: "button",
+			class: "apx__retry",
+			onClick: X
+		}, "重试")])) : G.value === "ready" && q.value ? (d(), s(i, { key: 3 }, [
+			c("div", _, [
+				c("span", v, m(Se.value), 1),
+				q.value.version ? (d(), s("span", y, "v" + m(q.value.version), 1)) : o("", !0),
+				q.value.architecture ? (d(), s("span", b, m(q.value.architecture), 1)) : o("", !0),
+				c("span", null, m(q.value.fileCount) + " 个文件", 1)
+			]),
+			Z.value.length ? (d(), s("div", x, [r[1] ||= c("h3", { class: "apx__h" }, "包标识", -1), c("dl", S, [(d(!0), s(i, null, p(Z.value, (e, t) => (d(), s(i, { key: t }, [c("dt", C, m(e.label), 1), c("dd", w, [c("button", {
+				type: "button",
+				class: "apx__copyable",
+				title: `点击复制：${e.value}`,
+				onClick: (t) => we(e.value)
+			}, [
+				c("span", null, m(e.value), 1),
+				e.hint ? (d(), s("span", E, "资源引用")) : o("", !0),
+				Q.value === e.value ? (d(), s("span", D, "已复制")) : o("", !0)
+			], 8, T)])], 64))), 128))])])) : o("", !0),
+			q.value.bundlePackages.length ? (d(), s("div", O, [c("h3", k, "包含的包（" + m(q.value.bundlePackages.length) + "）", 1), c("div", A, [(d(!0), s(i, null, p(q.value.bundlePackages, (e, t) => (d(), s("div", {
+				key: t,
+				class: "apx__dep"
+			}, [c("span", j, m(e.fileName || e.architecture || e.type), 1), c("span", M, [
+				e.architecture ? (d(), s("span", N, m(e.architecture), 1)) : o("", !0),
+				e.type ? (d(), s("span", P, m(e.type), 1)) : o("", !0),
+				e.version ? (d(), s("span", F, "v" + m(e.version), 1)) : o("", !0)
+			])]))), 128))])])) : o("", !0),
+			q.value.applications.length ? (d(), s("div", I, [c("h3", L, "应用（" + m(q.value.applications.length) + "）", 1), c("div", R, [(d(!0), s(i, null, p(q.value.applications, (e, t) => (d(), s("div", {
+				key: t,
+				class: "apx__dep"
+			}, [c("span", ue, m(e.id || "(无 Id)"), 1), e.displayName ? (d(), s("span", z, m(e.displayName), 1)) : o("", !0)]))), 128))])])) : o("", !0),
+			q.value.targetDeviceFamilies.length || q.value.packageDependencies.length ? (d(), s("div", B, [r[4] ||= c("h3", { class: "apx__h" }, "依赖", -1), c("div", V, [(d(!0), s(i, null, p(q.value.targetDeviceFamilies, (e, t) => (d(), s("div", {
+				key: "t" + t,
+				class: "apx__dep"
+			}, [c("span", H, m(e.name), 1), c("span", U, [
+				r[2] ||= c("span", { class: "apx__chip" }, "系统", -1),
+				e.minVersion ? (d(), s("span", de, "≥ " + m(e.minVersion), 1)) : o("", !0),
+				e.maxVersionTested ? (d(), s("span", fe, "测试至 " + m(e.maxVersionTested), 1)) : o("", !0)
+			])]))), 128)), (d(!0), s(i, null, p(q.value.packageDependencies, (e, t) => (d(), s("div", {
+				key: "p" + t,
+				class: "apx__dep"
+			}, [c("span", pe, m(e.name), 1), c("span", me, [r[3] ||= c("span", { class: "apx__chip" }, "包", -1), e.minVersion ? (d(), s("span", he, "≥ " + m(e.minVersion), 1)) : o("", !0)])]))), 128))])])) : o("", !0),
+			q.value.capabilities.length ? (d(), s("div", ge, [c("h3", _e, "能力（" + m(q.value.capabilities.length) + "）", 1), c("div", ve, [(d(!0), s(i, null, p(q.value.capabilities, (e) => (d(), s("span", {
+				key: e,
+				class: "apx__chip"
+			}, m(e), 1))), 128))])])) : o("", !0),
+			q.value.languages.length ? (d(), s("div", ye, [c("button", {
+				type: "button",
+				class: "apx__toggle",
+				onClick: r[0] ||= (e) => J.value = !J.value
+			}, [c("span", { class: te(["apx__caret", { "apx__caret--open": J.value }]) }, "▶", 2), l(" 语言（" + m(q.value.languages.length) + "） ", 1)]), J.value ? (d(), s("div", be, [(d(!0), s(i, null, p(q.value.languages, (e) => (d(), s("span", {
+				key: e,
+				class: "apx__chip"
+			}, m(e), 1))), 128))])) : o("", !0)])) : o("", !0),
+			(d(!0), s(i, null, p(q.value.notes, (e, t) => (d(), s("p", {
+				key: t,
+				class: "apx__note"
+			}, m(e), 1))), 128))
+		], 64)) : o("", !0)]));
+	}
+});
+//#endregion
+export { W as default };

package/dist/components/ArchiveBrowser.js

@@ -0,0 +1,7 @@
+import e from "../_virtual/_plugin-vue_export-helper.js";
+import t from "./ArchiveBrowser.vue_vue_type_script_setup_true_lang.js";
+/* empty css                                                               */
+//#region src/components/ArchiveBrowser.vue
+var n = /*#__PURE__*/ e(t, [["__scopeId", "data-v-9693d0e6"]]);
+//#endregion
+export { n as default };

package/dist/components/ArchiveBrowser.vue.d.ts

@@ -0,0 +1,18 @@
+/**
+ * The side viewer's generic archive mode — the multi-file browser shared by the tar family (tar/gz/xz/bz2) and
+ * rar. Same master→detail UX as {@link ZipBrowser}: a collapsible file tree; selecting an entry extracts just
+ * that one, wraps it in a blob URL, and hands it to {@link FileViewerBody} (so a file inside the archive
+ * previews with every viewer a top-level file gets).
+ *
+ * The format-specific work lives behind {@link OpenedArchive}: this component fetches the bytes, lazy-imports
+ * the right opener by `kind` (so neither the tar codecs nor the rar WASM ship in the main bundle), and drives
+ * everything through `entries` + `extract()`. Extraction may be sync (tar) or async (rar) — every call is awaited.
+ */
+type __VLS_Props = {
+    url: string;
+    name: string;
+    kind: 'tar' | 'rar';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;