@file-viewer/renderer-data 2.0.11

package/LICENSE

@@ -0,0 +1,160 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+"License" shall mean the terms and conditions for use, reproduction, and
+distribution as defined by Sections 1 through 9 of this document.
+
+"Licensor" shall mean the copyright owner or entity authorized by the copyright
+owner that is granting the License.
+
+"Legal Entity" shall mean the union of the acting entity and all other entities
+that control, are controlled by, or are under common control with that entity.
+For the purposes of this definition, "control" means (i) the power, direct or
+indirect, to cause the direction or management of such entity, whether by
+contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the
+outstanding shares, or (iii) beneficial ownership of such entity.
+
+"You" (or "Your") shall mean an individual or Legal Entity exercising
+permissions granted by this License.
+
+"Source" form shall mean the preferred form for making modifications, including
+but not limited to software source code, documentation source, and configuration
+files.
+
+"Object" form shall mean any form resulting from mechanical transformation or
+translation of a Source form, including but not limited to compiled object code,
+generated documentation, and conversions to other media types.
+
+"Work" shall mean the work of authorship, whether in Source or Object form,
+made available under the License, as indicated by a copyright notice that is
+included in or attached to the work.
+
+"Derivative Works" shall mean any work, whether in Source or Object form, that
+is based on (or derived from) the Work and for which the editorial revisions,
+annotations, elaborations, or other modifications represent, as a whole, an
+original work of authorship. For the purposes of this License, Derivative Works
+shall not include works that remain separable from, or merely link (or bind by
+name) to the interfaces of, the Work and Derivative Works thereof.
+
+"Contribution" shall mean any work of authorship, including the original version
+of the Work and any modifications or additions to that Work or Derivative Works
+thereof, that is intentionally submitted to Licensor for inclusion in the Work by
+the copyright owner or by an individual or Legal Entity authorized to submit on
+behalf of the copyright owner. For the purposes of this definition, "submitted"
+means any form of electronic, verbal, or written communication sent to the
+Licensor or its representatives, including but not limited to communication on
+electronic mailing lists, source code control systems, and issue tracking systems
+that are managed by, or on behalf of, the Licensor for the purpose of discussing
+and improving the Work, but excluding communication that is conspicuously marked
+or otherwise designated in writing by the copyright owner as "Not a
+Contribution."
+
+"Contributor" shall mean Licensor and any individual or Legal Entity on behalf
+of whom a Contribution has been received by Licensor and subsequently
+incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of this
+License, each Contributor hereby grants to You a perpetual, worldwide,
+non-exclusive, no-charge, royalty-free, irrevocable copyright license to
+reproduce, prepare Derivative Works of, publicly display, publicly perform,
+sublicense, and distribute the Work and such Derivative Works in Source or
+Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of this License,
+each Contributor hereby grants to You a perpetual, worldwide, non-exclusive,
+no-charge, royalty-free, irrevocable (except as stated in this section) patent
+license to make, have made, use, offer to sell, sell, import, and otherwise
+transfer the Work, where such license applies only to those patent claims
+licensable by such Contributor that are necessarily infringed by their
+Contribution(s) alone or by combination of their Contribution(s) with the Work to
+which such Contribution(s) was submitted. If You institute patent litigation
+against any entity (including a cross-claim or counterclaim in a lawsuit)
+alleging that the Work or a Contribution incorporated within the Work
+constitutes direct or contributory patent infringement, then any patent licenses
+granted to You under this License for that Work shall terminate as of the date
+such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the Work or
+Derivative Works thereof in any medium, with or without modifications, and in
+Source or Object form, provided that You meet the following conditions:
+
+(a) You must give any other recipients of the Work or Derivative Works a copy of
+this License; and
+
+(b) You must cause any modified files to carry prominent notices stating that
+You changed the files; and
+
+(c) You must retain, in the Source form of any Derivative Works that You
+distribute, all copyright, patent, trademark, and attribution notices from the
+Source form of the Work, excluding those notices that do not pertain to any part
+of the Derivative Works; and
+
+(d) If the Work includes a "NOTICE" text file as part of its distribution, then
+any Derivative Works that You distribute must include a readable copy of the
+attribution notices contained within such NOTICE file, excluding those notices
+that do not pertain to any part of the Derivative Works, in at least one of the
+following places: within a NOTICE text file distributed as part of the Derivative
+Works; within the Source form or documentation, if provided along with the
+Derivative Works; or, within a display generated by the Derivative Works, if and
+wherever such third-party notices normally appear. The contents of the NOTICE
+file are for informational purposes only and do not modify the License. You may
+add Your own attribution notices within Derivative Works that You distribute,
+alongside or as an addendum to the NOTICE text from the Work, provided that such
+additional attribution notices cannot be construed as modifying the License.
+
+You may add Your own copyright statement to Your modifications and may provide
+additional or different license terms and conditions for use, reproduction, or
+distribution of Your modifications, or for any such Derivative Works as a whole,
+provided Your use, reproduction, and distribution of the Work otherwise complies
+with the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise, any
+Contribution intentionally submitted for inclusion in the Work by You to the
+Licensor shall be under the terms and conditions of this License, without any
+additional terms or conditions. Notwithstanding the above, nothing herein shall
+supersede or modify the terms of any separate license agreement you may have
+executed with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade names,
+trademarks, service marks, or product names of the Licensor, except as required
+for reasonable and customary use in describing the origin of the Work and
+reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or agreed to in
+writing, Licensor provides the Work (and each Contributor provides its
+Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied, including, without limitation, any warranties or
+conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+PARTICULAR PURPOSE. You are solely responsible for determining the
+appropriateness of using or redistributing the Work and assume any risks
+associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory, whether in
+tort (including negligence), contract, or otherwise, unless required by
+applicable law (such as deliberate and grossly negligent acts) or agreed to in
+writing, shall any Contributor be liable to You for damages, including any
+direct, indirect, special, incidental, or consequential damages of any character
+arising as a result of this License or out of the use or inability to use the
+Work (including but not limited to damages for loss of goodwill, work stoppage,
+computer failure or malfunction, or any and all other commercial damages or
+losses), even if such Contributor has been advised of the possibility of such
+damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing the Work or
+Derivative Works thereof, You may choose to offer, and charge a fee for,
+acceptance of support, warranty, indemnity, or other liability obligations and/or
+rights consistent with this License. However, in accepting such obligations, You
+may act only on Your own behalf and on Your sole responsibility, not on behalf of
+any other Contributor, and only if You agree to indemnify, defend, and hold each
+Contributor harmless for any liability incurred by, or claims asserted against,
+such Contributor by reason of your accepting any such warranty or additional
+liability.
+
+END OF TERMS AND CONDITIONS
+
+Copyright 2026 Flyfish Viewer

package/README.en.md

@@ -0,0 +1,44 @@
+# @file-viewer/renderer-data
+
+Standalone data asset renderer for Flyfish File Viewer. It covers PSD, SQLite, Parquet, Avro, WASM, fonts, AI/EPS, WebArchive, and other non-document data assets without forcing regular document preview users to install data parsing dependencies.
+
+## Usage
+
+```ts
+import FileViewer from '@file-viewer/vue3'
+import { dataRenderer } from '@file-viewer/renderer-data'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: dataRenderer,
+}
+```
+
+You can compose it with other renderers:
+
+```ts
+import { dataRenderer } from '@file-viewer/renderer-data'
+import { textRenderer } from '@file-viewer/renderer-text'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: [dataRenderer, textRenderer],
+}
+```
+
+## Offline Assets
+
+SQLite preview depends on the `sql.js` WASM file. The default URL is still resolved through `@file-viewer/core/assets` as `wasm/data/sql-wasm.wasm`, and applications can override it through `options.data.sqlWasmUrl`.
+
+## Migration Notes
+
+`@file-viewer/core` no longer bundles the data asset renderer and no longer installs `ag-psd`, `sql.js`, `hyparquet`, or `avsc` by default. Install this package explicitly, or use `@file-viewer/preset-all`, when you need PSD, SQLite, Parquet, Avro, WASM, font, AI, EPS, or WebArchive previews.
+
+## Scope
+
+- PSD uses `ag-psd` for canvas and layer previews with layer visibility toggles, redraw, and unified zoom.
+- SQLite uses `sql.js` for table metadata and sample rows.
+- Parquet uses `hyparquet` for column metadata and sample rows.
+- Avro uses `avsc` for object container schema and sample data.
+- WASM uses browser `WebAssembly.Module` to inspect imports and exports safely.
+- AI/EPS/WebArchive fall back to safe summaries and readable text snippets without executing scripts.

package/README.md

@@ -0,0 +1,44 @@
+# @file-viewer/renderer-data
+
+Flyfish File Viewer 的独立数据资产 renderer 包。它承接 PSD、SQLite、Parquet、Avro、WASM、字体、AI/EPS、WebArchive 等非文档型数据资产预览，避免普通文档预览场景安装数据解析链路。
+
+## 用法
+
+```ts
+import FileViewer from '@file-viewer/vue3'
+import { dataRenderer } from '@file-viewer/renderer-data'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: dataRenderer,
+}
+```
+
+也可以和其他 renderer 一起组合：
+
+```ts
+import { dataRenderer } from '@file-viewer/renderer-data'
+import { textRenderer } from '@file-viewer/renderer-text'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: [dataRenderer, textRenderer],
+}
+```
+
+## 离线资产
+
+SQLite 预览依赖 `sql.js` WASM。默认路径仍由 `@file-viewer/core/assets` 统一解析为 `wasm/data/sql-wasm.wasm`，也可以通过 `options.data.sqlWasmUrl` 指定自托管地址。
+
+## 迁移说明
+
+`@file-viewer/core` 已不再内置数据资产 renderer，也不再默认安装 `ag-psd`、`sql.js`、`hyparquet` 和 `avsc`。需要 PSD / SQLite / Parquet / Avro / WASM / 字体 / AI / EPS / WebArchive 预览时，请显式安装本包，或使用 `@file-viewer/preset-all` 聚合能力。
+
+## 能力边界
+
+- PSD 使用 `ag-psd` 读取画布和图层，支持图层选择显隐、重绘和统一缩放。
+- SQLite 使用 `sql.js` 读取表结构和首个表的示例数据。
+- Parquet 使用 `hyparquet` 读取列式元数据和示例行。
+- Avro 使用 `avsc` 读取对象容器 schema 与示例数据。
+- WASM 使用浏览器 `WebAssembly.Module` 安全读取 import/export 摘要。
+- AI/EPS/WebArchive 等格式以摘要和可读文本片段安全展示，不执行脚本。

package/dist/data.d.ts

@@ -0,0 +1,7 @@
+import type { FileRenderContext, FileViewerRenderedInstance } from '@file-viewer/core';
+declare global {
+    interface Window {
+        __FLYFISH_DATA_SQL_WASM_URL__?: string;
+    }
+}
+export default function renderDataAsset(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/data.js

@@ -0,0 +1,334 @@
+import { resolveFileViewerDataSqlWasmUrl } from '@file-viewer/core/assets';
+const dataStyle = `
+.data-viewer{min-height:100%;padding:28px;background:#eef1f4;color:#132235}
+.data-card{max-width:1080px;margin:0 auto;overflow:hidden;border:1px solid rgba(15,23,42,.08);border-radius:8px;background:#fff;box-shadow:0 18px 48px rgba(15,23,42,.12)}
+.data-header{padding:20px 24px;border-bottom:1px solid rgba(15,23,42,.08)}
+.data-header span{color:#0f766e;font-size:12px;font-weight:800}
+.data-header h2{margin:6px 0 0;font-size:24px}
+.data-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:rgba(15,23,42,.08)}
+.data-summary div{min-width:0;padding:15px 18px;background:#f8fafc}
+.data-summary span{display:block;color:#64748b;font-size:12px}
+.data-summary strong{display:block;margin-top:5px;overflow:hidden;color:#132235;font-size:15px;text-overflow:ellipsis;white-space:nowrap}
+.font-preview{padding:34px 28px;border-top:1px solid rgba(15,23,42,.08);font-size:42px;line-height:1.45;word-break:break-word}
+.asset-image{padding:24px;border-top:1px solid rgba(15,23,42,.08);background:#f8fafc;text-align:center}
+.asset-image img{max-width:100%;max-height:70vh;box-shadow:0 10px 30px rgba(15,23,42,.16)}
+.asset-text{margin:0;padding:18px 24px;overflow:auto;border-top:1px solid rgba(15,23,42,.08);background:#111827;color:#e5e7eb;font-size:13px;line-height:1.7}
+.data-table-wrap{max-height:520px;overflow:auto;border-top:1px solid rgba(15,23,42,.08)}
+.data-table{width:100%;border-collapse:collapse;font-size:13px}
+.data-table th,.data-table td{max-width:260px;padding:10px 12px;border-bottom:1px solid rgba(15,23,42,.08);overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}
+.data-table th{position:sticky;top:0;background:#f8fafc;color:#64748b;z-index:1}
+`;
+const fontMimeMap = {
+    otf: 'font/otf',
+    ttf: 'font/ttf',
+    woff: 'font/woff',
+    woff2: 'font/woff2',
+};
+const sampleText = 'Flyfish Viewer 轻量预览 AaBbCc 1234567890';
+const createStyle = (documentRef) => {
+    const style = documentRef.createElement('style');
+    style.textContent = dataStyle;
+    return style;
+};
+const createElement = (documentRef, tagName, className, text) => {
+    const element = documentRef.createElement(tagName);
+    if (className) {
+        element.className = className;
+    }
+    if (text !== undefined) {
+        element.textContent = text;
+    }
+    return element;
+};
+const formatBytes = (value) => {
+    if (value < 1024) {
+        return `${value} B`;
+    }
+    if (value < 1024 * 1024) {
+        return `${(value / 1024).toFixed(1)} KB`;
+    }
+    return `${(value / 1024 / 1024).toFixed(1)} MB`;
+};
+const makeRows = (rows) => {
+    return rows.slice(0, 30).map(row => {
+        const next = {};
+        Object.entries(row).slice(0, 24).forEach(([key, value]) => {
+            if (typeof value === 'bigint') {
+                next[key] = value.toString();
+            }
+            else if (value instanceof Uint8Array) {
+                next[key] = `[bytes:${value.byteLength}]`;
+            }
+            else if (value && typeof value === 'object') {
+                next[key] = JSON.stringify(value).slice(0, 180);
+            }
+            else {
+                next[key] = value;
+            }
+        });
+        return next;
+    });
+};
+const extractReadableText = (buffer, max = 8000) => {
+    const bytes = new Uint8Array(buffer);
+    const ascii = Array.from(bytes.slice(0, Math.min(bytes.length, max)))
+        .map(byte => (byte >= 32 && byte <= 126) || byte === 10 || byte === 13 || byte === 9
+        ? String.fromCharCode(byte)
+        : ' ')
+        .join('')
+        .replace(/[ \t]{3,}/g, ' ');
+    return ascii.trim().slice(0, max);
+};
+const readMagic = (buffer, length = 12) => {
+    return String.fromCharCode(...new Uint8Array(buffer.slice(0, length)));
+};
+const getWindowSqlWasmOverride = (documentRef) => {
+    return documentRef.defaultView?.__FLYFISH_DATA_SQL_WASM_URL__ ||
+        (typeof window !== 'undefined' ? window.__FLYFISH_DATA_SQL_WASM_URL__ : undefined);
+};
+const renderFont = async (documentRef, buffer, type) => {
+    const family = `FlyfishPreviewFont-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const ownerWindow = documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
+    const FontFaceConstructor = ownerWindow?.FontFace || (typeof FontFace !== 'undefined' ? FontFace : undefined);
+    if (!FontFaceConstructor) {
+        throw new Error('当前浏览器不支持 FontFace API');
+    }
+    const face = new FontFaceConstructor(family, buffer);
+    await face.load();
+    documentRef.fonts?.add(face);
+    return {
+        title: '字体文件预览',
+        fontFamily: family,
+        summary: [
+            { label: '格式', value: type.toUpperCase() },
+            { label: '大小', value: formatBytes(buffer.byteLength) },
+            { label: '渲染方式', value: 'Browser FontFace API' },
+        ],
+    };
+};
+const renderSqlite = async (documentRef, buffer, context) => {
+    const { default: initSqlJs } = await import('sql.js');
+    const sqlWasmUrl = resolveFileViewerDataSqlWasmUrl(context?.options?.data, [
+        getWindowSqlWasmOverride(documentRef),
+    ], documentRef.baseURI);
+    const SQL = await initSqlJs({ locateFile: () => sqlWasmUrl });
+    const db = new SQL.Database(new Uint8Array(buffer));
+    try {
+        const tableResult = db.exec("select name, type from sqlite_master where type in ('table','view') and name not like 'sqlite_%' order by type, name");
+        const tables = tableResult[0]?.values || [];
+        const firstTable = String(tables[0]?.[0] || '');
+        const rows = firstTable
+            ? db.exec(`select * from "${firstTable.replace(/"/g, '""')}" limit 30`)[0]
+            : null;
+        return {
+            title: 'SQLite 数据库预览',
+            summary: [
+                { label: '对象数', value: String(tables.length) },
+                { label: '示例表', value: firstTable || '-' },
+                { label: '渲染方式', value: 'sql.js WASM' },
+            ],
+            rows: rows
+                ? makeRows(rows.values.map((values) => Object.fromEntries(rows.columns.map((column, index) => [column, values[index]]))))
+                : makeRows(tables.map((value) => ({ name: value[0], type: value[1] }))),
+        };
+    }
+    finally {
+        db.close();
+    }
+};
+const renderParquet = async (buffer) => {
+    const { parquetMetadataAsync, parquetReadObjects } = await import('hyparquet');
+    const file = {
+        byteLength: buffer.byteLength,
+        slice: (start, end) => buffer.slice(start, end),
+    };
+    const metadata = await parquetMetadataAsync(file);
+    const rows = await parquetReadObjects({ file, rowFormat: 'object', rowEnd: 30 });
+    return {
+        title: 'Parquet 列式数据预览',
+        summary: [
+            { label: '行数', value: metadata.num_rows?.toString?.() || '-' },
+            { label: '列数', value: String(metadata.schema?.filter(item => item.name).length || 0) },
+            { label: '渲染方式', value: 'hyparquet' },
+        ],
+        rows: makeRows(rows),
+    };
+};
+const renderAvro = async (buffer) => {
+    const avro = await import('avsc/etc/browser/avsc.js');
+    const decoder = avro.createBlobDecoder(new Blob([buffer]));
+    const rows = [];
+    let schema = '';
+    await new Promise((resolve, reject) => {
+        decoder.on('metadata', (type) => {
+            schema = type?.toString?.() || '';
+        });
+        decoder.on('data', (value) => {
+            if (rows.length < 30) {
+                rows.push(value);
+            }
+        });
+        decoder.on('end', resolve);
+        decoder.on('error', reject);
+    });
+    return {
+        title: 'Avro 对象容器预览',
+        summary: [
+            { label: '示例行', value: String(rows.length) },
+            { label: 'Schema', value: schema ? '已读取' : '未读取' },
+            { label: '渲染方式', value: 'avsc' },
+        ],
+        rows: makeRows(rows),
+        text: schema.slice(0, 6000),
+    };
+};
+const renderWasm = async (buffer) => {
+    const module = await WebAssembly.compile(buffer.slice(0));
+    const imports = WebAssembly.Module.imports(module);
+    const exports = WebAssembly.Module.exports(module);
+    return {
+        title: 'WebAssembly 模块预览',
+        summary: [
+            { label: '导入', value: String(imports.length) },
+            { label: '导出', value: String(exports.length) },
+            { label: '渲染方式', value: 'WebAssembly.Module' },
+        ],
+        rows: makeRows([
+            ...imports.map(item => ({ kind: 'import', module: item.module, name: item.name, type: item.kind })),
+            ...exports.map(item => ({ kind: 'export', module: '-', name: item.name, type: item.kind })),
+        ]),
+    };
+};
+const renderPostScriptLike = async (buffer, type) => ({
+    title: type === 'eps' ? 'EPS 矢量文件摘要' : 'Illustrator 文件摘要',
+    summary: [
+        { label: 'Magic', value: readMagic(buffer).replace(/\s/g, ' ') },
+        { label: '大小', value: formatBytes(buffer.byteLength) },
+        { label: '说明', value: type === 'ai' ? '非 PDF-compatible AI 按摘要展示' : 'PostScript 摘要展示' },
+    ],
+    text: extractReadableText(buffer),
+});
+const renderWebArchive = async (buffer) => ({
+    title: 'WebArchive 摘要预览',
+    summary: [
+        { label: '容器', value: readMagic(buffer).startsWith('bplist') ? 'Binary plist' : 'WebArchive' },
+        { label: '大小', value: formatBytes(buffer.byteLength) },
+        { label: '说明', value: '安全提取可读片段，不执行网页脚本' },
+    ],
+    text: extractReadableText(buffer),
+});
+const buildPreview = async (documentRef, buffer, type, context) => {
+    if (type in fontMimeMap) {
+        return renderFont(documentRef, buffer, type);
+    }
+    if (type === 'sqlite') {
+        return renderSqlite(documentRef, buffer, context);
+    }
+    if (type === 'parquet') {
+        return renderParquet(buffer);
+    }
+    if (type === 'avro') {
+        return renderAvro(buffer);
+    }
+    if (type === 'wasm') {
+        return renderWasm(buffer);
+    }
+    if (type === 'ai' || type === 'eps') {
+        return renderPostScriptLike(buffer, type);
+    }
+    if (type === 'webarchive') {
+        return renderWebArchive(buffer);
+    }
+    return {
+        title: '数据资产摘要',
+        summary: [
+            { label: '格式', value: type.toUpperCase() },
+            { label: '大小', value: formatBytes(buffer.byteLength) },
+        ],
+        text: extractReadableText(buffer),
+    };
+};
+const appendSummary = (documentRef, parent, summary) => {
+    const summaryRoot = createElement(documentRef, 'div', 'data-summary');
+    summary.forEach(item => {
+        const cell = createElement(documentRef, 'div');
+        cell.append(createElement(documentRef, 'span', undefined, item.label), createElement(documentRef, 'strong', undefined, item.value));
+        summaryRoot.appendChild(cell);
+    });
+    parent.appendChild(summaryRoot);
+};
+const appendRows = (documentRef, parent, rows) => {
+    if (!rows?.length) {
+        return;
+    }
+    const keys = Object.keys(rows[0]);
+    const wrap = createElement(documentRef, 'div', 'data-table-wrap');
+    const table = createElement(documentRef, 'table', 'data-table');
+    const thead = createElement(documentRef, 'thead');
+    const headRow = createElement(documentRef, 'tr');
+    keys.forEach(key => {
+        headRow.appendChild(createElement(documentRef, 'th', undefined, key));
+    });
+    thead.appendChild(headRow);
+    const tbody = createElement(documentRef, 'tbody');
+    rows.forEach(row => {
+        const tr = createElement(documentRef, 'tr');
+        keys.forEach(key => {
+            tr.appendChild(createElement(documentRef, 'td', undefined, String(row[key] ?? '')));
+        });
+        tbody.appendChild(tr);
+    });
+    table.append(thead, tbody);
+    wrap.appendChild(table);
+    parent.appendChild(wrap);
+};
+const renderPreviewDom = (documentRef, preview, type) => {
+    const root = createElement(documentRef, 'div', 'data-viewer');
+    const card = createElement(documentRef, 'section', 'data-card');
+    const header = createElement(documentRef, 'header', 'data-header');
+    header.append(createElement(documentRef, 'span', undefined, type.toUpperCase()), createElement(documentRef, 'h2', undefined, preview.title));
+    card.appendChild(header);
+    appendSummary(documentRef, card, preview.summary);
+    if (preview.fontFamily) {
+        const fontPreview = createElement(documentRef, 'div', 'font-preview', sampleText);
+        fontPreview.style.fontFamily = preview.fontFamily;
+        card.appendChild(fontPreview);
+    }
+    if (preview.image) {
+        const imageWrap = createElement(documentRef, 'div', 'asset-image');
+        const image = createElement(documentRef, 'img');
+        image.src = preview.image;
+        image.alt = '资产预览';
+        imageWrap.appendChild(image);
+        card.appendChild(imageWrap);
+    }
+    if (preview.text) {
+        card.appendChild(createElement(documentRef, 'pre', 'asset-text', preview.text));
+    }
+    appendRows(documentRef, card, preview.rows);
+    root.appendChild(card);
+    return root;
+};
+export default async function renderDataAsset(buffer, target, type = 'bin', context) {
+    const documentRef = target.ownerDocument || document;
+    const normalizedType = type.toLowerCase();
+    if (normalizedType === 'ai' && readMagic(buffer, 5) === '%PDF-' && context?.renderNestedBuffer) {
+        const rendered = await context.renderNestedBuffer(buffer, 'pdf', target, context);
+        if (rendered) {
+            return rendered;
+        }
+    }
+    if (normalizedType === 'psd') {
+        const { default: renderPsdAsset } = await import('./psd.js');
+        return renderPsdAsset(buffer, target);
+    }
+    const preview = await buildPreview(documentRef, buffer, normalizedType, context);
+    const root = renderPreviewDom(documentRef, preview, normalizedType);
+    target.replaceChildren(createStyle(documentRef), root);
+    return {
+        $el: root,
+        unmount() {
+            target.replaceChildren();
+        },
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { type FileRenderHandler, type FileViewerRenderedInstance, type FileViewerRendererPlugin, type RendererDefinition } from '@file-viewer/core';
+export declare const dataRendererDefinition: RendererDefinition;
+export declare const renderFileViewerData: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
+export declare const dataRenderer: FileViewerRendererPlugin<FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>>;
+export default dataRenderer;

package/dist/index.js

@@ -0,0 +1,17 @@
+import { DEFAULT_RENDERER_DEFINITIONS, } from '@file-viewer/core';
+const dataDefinition = DEFAULT_RENDERER_DEFINITIONS.find(definition => definition.id === 'data-asset');
+if (!dataDefinition) {
+    throw new Error('@file-viewer/renderer-data could not locate the shared data asset renderer definition.');
+}
+export const dataRendererDefinition = dataDefinition;
+export const renderFileViewerData = (buffer, target, type, context) => import('./data.js').then(({ default: renderDataAsset }) => renderDataAsset(buffer, target, type, context));
+export const dataRenderer = {
+    id: 'file-viewer-renderer-data',
+    label: 'Flyfish File Viewer data asset renderer',
+    definitions: [dataRendererDefinition],
+    handlers: [{
+            rendererId: dataRendererDefinition.id,
+            handler: renderFileViewerData,
+        }],
+};
+export default dataRenderer;

package/dist/psd.d.ts

@@ -0,0 +1,2 @@
+import { type FileViewerRenderedInstance } from '@file-viewer/core';
+export default function renderPsdAsset(buffer: ArrayBuffer, target: HTMLDivElement): Promise<FileViewerRenderedInstance>;

package/dist/psd.js

@@ -0,0 +1,247 @@
+import { createFileViewerZoomChangeEmitter, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
+const psdStyle = `
+.psd-viewer{display:grid;height:100%;min-height:460px;grid-template-rows:auto minmax(0,1fr);--psd-bg:#eef1f4;--psd-surface:#fff;--psd-border:rgba(15,23,42,.1);--psd-text:#132235;--psd-muted:#64748b;--psd-accent:#0f766e;background:var(--psd-bg);color:var(--psd-text);box-sizing:border-box}
+.psd-toolbar{position:sticky;top:0;z-index:2;display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-bottom:1px solid var(--psd-border);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-sizing:border-box}
+.psd-title{display:flex;min-width:0;flex-direction:column;gap:2px}
+.psd-title strong{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
+.psd-title span{color:var(--psd-muted);font-size:12px;font-weight:700}
+.psd-actions{display:flex;flex-shrink:0;align-items:center;gap:6px}
+.psd-actions button{height:30px;min-width:34px;border:1px solid rgba(100,116,139,.28);border-radius:6px;background:#fff;color:#132235;cursor:pointer;font-size:12px;font-weight:800}
+.psd-actions button:hover{border-color:rgba(15,118,110,.45);color:var(--psd-accent)}
+.psd-actions span{min-width:48px;color:var(--psd-muted);font-size:12px;font-weight:800;text-align:center}
+.psd-layout{display:grid;min-height:0;grid-template-columns:280px minmax(0,1fr)}
+.psd-sidebar{min-height:0;overflow:auto;border-right:1px solid var(--psd-border);background:rgba(248,250,252,.86)}
+.psd-sidebar-header{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid var(--psd-border);background:rgba(248,250,252,.94);font-size:12px;font-weight:800}
+.psd-layer-list{margin:0;padding:8px;list-style:none}
+.psd-layer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:start;margin:0 0 6px;padding:8px;border:1px solid transparent;border-radius:8px;background:#fff}
+.psd-layer:hover{border-color:rgba(15,118,110,.24)}
+.psd-layer input{margin-top:2px;accent-color:var(--psd-accent)}
+.psd-layer strong{display:block;overflow:hidden;font-size:12px;text-overflow:ellipsis;white-space:nowrap}
+.psd-layer span{display:block;margin-top:3px;color:var(--psd-muted);font-size:11px}
+.psd-stage{min-width:0;min-height:0;overflow:auto;padding:28px}
+.psd-canvas-wrap{display:inline-block;transform-origin:top left;transition:transform .18s ease}
+.psd-canvas-shell{display:inline-block;padding:18px;border:1px solid var(--psd-border);border-radius:8px;background:
+  linear-gradient(45deg,#e5e7eb 25%,transparent 25%),
+  linear-gradient(-45deg,#e5e7eb 25%,transparent 25%),
+  linear-gradient(45deg,transparent 75%,#e5e7eb 75%),
+  linear-gradient(-45deg,transparent 75%,#e5e7eb 75%);
+  background-color:#fff;background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;box-shadow:0 18px 48px rgba(15,23,42,.14)}
+.psd-canvas-shell canvas{display:block;max-width:none;background:transparent}
+.psd-empty{padding:20px;color:var(--psd-muted);font-weight:700}
+.file-viewer[data-viewer-theme='dark'] .psd-viewer{--psd-bg:#0d1117;--psd-surface:#161b22;--psd-border:rgba(139,148,158,.24);--psd-text:#e6edf3;--psd-muted:#8b949e}
+.file-viewer[data-viewer-theme='dark'] .psd-toolbar{background:rgba(13,17,23,.92)}
+.file-viewer[data-viewer-theme='dark'] .psd-sidebar,.file-viewer[data-viewer-theme='dark'] .psd-sidebar-header{background:rgba(22,27,34,.92)}
+.file-viewer[data-viewer-theme='dark'] .psd-layer,.file-viewer[data-viewer-theme='dark'] .psd-actions button{background:#161b22;color:#e6edf3}
+@media (prefers-color-scheme:dark){.file-viewer[data-viewer-theme='system'] .psd-viewer{--psd-bg:#0d1117;--psd-surface:#161b22;--psd-border:rgba(139,148,158,.24);--psd-text:#e6edf3;--psd-muted:#8b949e}.file-viewer[data-viewer-theme='system'] .psd-toolbar{background:rgba(13,17,23,.92)}.file-viewer[data-viewer-theme='system'] .psd-sidebar,.file-viewer[data-viewer-theme='system'] .psd-sidebar-header{background:rgba(22,27,34,.92)}.file-viewer[data-viewer-theme='system'] .psd-layer,.file-viewer[data-viewer-theme='system'] .psd-actions button{background:#161b22;color:#e6edf3}}
+@media (max-width:760px){.psd-layout{grid-template-columns:1fr}.psd-sidebar{max-height:240px;border-right:0;border-bottom:1px solid var(--psd-border)}.psd-stage{padding:14px}}
+`;
+const createElement = (documentRef, tagName, className, text) => {
+    const element = documentRef.createElement(tagName);
+    if (className) {
+        element.className = className;
+    }
+    if (typeof text === 'string') {
+        element.textContent = text;
+    }
+    return element;
+};
+const createStyle = (documentRef) => {
+    const style = documentRef.createElement('style');
+    style.textContent = psdStyle;
+    return style;
+};
+const toCanvas = (documentRef, source) => {
+    if (!source) {
+        return undefined;
+    }
+    const ownerWindow = documentRef.defaultView || (typeof window !== 'undefined' ? window : undefined);
+    if (ownerWindow && source instanceof ownerWindow.HTMLCanvasElement) {
+        return source;
+    }
+    if (ownerWindow && source instanceof ownerWindow.ImageData) {
+        const canvas = documentRef.createElement('canvas');
+        canvas.width = source.width;
+        canvas.height = source.height;
+        canvas.getContext('2d')?.putImageData(source, 0, 0);
+        return canvas;
+    }
+    if (typeof source === 'object' &&
+        'data' in source &&
+        'width' in source &&
+        'height' in source) {
+        const pixelData = source;
+        const canvas = documentRef.createElement('canvas');
+        canvas.width = pixelData.width;
+        canvas.height = pixelData.height;
+        const clamped = new Uint8ClampedArray(pixelData.data.length);
+        clamped.set(pixelData.data);
+        const ImageDataConstructor = ownerWindow?.ImageData || ImageData;
+        canvas.getContext('2d')?.putImageData(new ImageDataConstructor(clamped, pixelData.width, pixelData.height), 0, 0);
+        return canvas;
+    }
+    return undefined;
+};
+const flattenLayers = (documentRef, layers, depth = 0, path = '') => {
+    if (!Array.isArray(layers)) {
+        return [];
+    }
+    return layers.flatMap((layer, index) => {
+        const name = String(layer.name || `Layer ${index + 1}`);
+        const id = `${path}${index}`;
+        const canvas = toCanvas(documentRef, layer.canvas || layer.imageData);
+        const item = {
+            id,
+            name,
+            depth,
+            left: Number(layer.left || 0),
+            top: Number(layer.top || 0),
+            width: Math.max(0, Number(layer.right || 0) - Number(layer.left || 0)),
+            height: Math.max(0, Number(layer.bottom || 0) - Number(layer.top || 0)),
+            hidden: Boolean(layer.hidden),
+            canvas
+        };
+        return [item, ...flattenLayers(documentRef, layer.children, depth + 1, `${id}.`)];
+    });
+};
+const clampZoom = (value) => {
+    return Math.min(4, Math.max(0.1, Number(value.toFixed(2))));
+};
+export default async function renderPsdAsset(buffer, target) {
+    const documentRef = target.ownerDocument || document;
+    const { readPsd } = await import('ag-psd');
+    const psd = readPsd(buffer, { useImageData: true });
+    const compositeCanvas = toCanvas(documentRef, psd.canvas || psd.imageData);
+    const layers = flattenLayers(documentRef, psd.children);
+    const drawableLayers = layers.filter(layer => layer.canvas);
+    const selected = new Set(drawableLayers.filter(layer => !layer.hidden).map(layer => layer.id));
+    let zoom = 1;
+    const zoomEmitter = createFileViewerZoomChangeEmitter();
+    const root = createElement(documentRef, 'div', 'psd-viewer');
+    root.dataset.viewerZoomProvider = 'psd';
+    const toolbar = createElement(documentRef, 'div', 'psd-toolbar');
+    const title = createElement(documentRef, 'div', 'psd-title');
+    title.append(createElement(documentRef, 'strong', undefined, 'PSD 图层预览'), createElement(documentRef, 'span', undefined, `${psd.width || 0} x ${psd.height || 0} · ${layers.length} layers · ag-psd`));
+    const actions = createElement(documentRef, 'div', 'psd-actions');
+    const zoomOut = createElement(documentRef, 'button', undefined, '-');
+    const zoomLabel = createElement(documentRef, 'span', undefined, '100%');
+    const zoomIn = createElement(documentRef, 'button', undefined, '+');
+    const reset = createElement(documentRef, 'button', undefined, '适合');
+    const showAll = createElement(documentRef, 'button', undefined, '全显');
+    const hideAll = createElement(documentRef, 'button', undefined, '全隐');
+    [zoomOut, zoomIn, reset, showAll, hideAll].forEach(button => {
+        button.type = 'button';
+    });
+    actions.append(zoomOut, zoomLabel, zoomIn, reset, showAll, hideAll);
+    toolbar.append(title, actions);
+    const layout = createElement(documentRef, 'div', 'psd-layout');
+    const sidebar = createElement(documentRef, 'aside', 'psd-sidebar');
+    const sidebarHeader = createElement(documentRef, 'div', 'psd-sidebar-header');
+    sidebarHeader.append(createElement(documentRef, 'span', undefined, '图层'), createElement(documentRef, 'span', undefined, `${drawableLayers.length} 可重绘`));
+    const list = createElement(documentRef, 'ul', 'psd-layer-list');
+    sidebar.append(sidebarHeader, list);
+    const stage = createElement(documentRef, 'main', 'psd-stage');
+    const wrap = createElement(documentRef, 'div', 'psd-canvas-wrap');
+    const shell = createElement(documentRef, 'div', 'psd-canvas-shell');
+    const canvas = createElement(documentRef, 'canvas');
+    canvas.width = Math.max(1, Number(psd.width || compositeCanvas?.width || 1));
+    canvas.height = Math.max(1, Number(psd.height || compositeCanvas?.height || 1));
+    shell.appendChild(canvas);
+    wrap.appendChild(shell);
+    stage.appendChild(wrap);
+    layout.append(sidebar, stage);
+    root.append(toolbar, layout);
+    target.replaceChildren(createStyle(documentRef), root);
+    const redraw = () => {
+        const context = canvas.getContext('2d');
+        if (!context) {
+            return;
+        }
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        const visibleLayerCanvases = drawableLayers.filter(layer => selected.has(layer.id));
+        if (!visibleLayerCanvases.length && compositeCanvas) {
+            context.drawImage(compositeCanvas, 0, 0);
+            return;
+        }
+        visibleLayerCanvases.slice().reverse().forEach(layer => {
+            if (layer.canvas) {
+                context.drawImage(layer.canvas, layer.left, layer.top);
+            }
+        });
+    };
+    if (!layers.length) {
+        list.appendChild(createElement(documentRef, 'li', 'psd-empty', '未发现可展示图层，使用合成图预览。'));
+    }
+    layers.forEach(layer => {
+        const item = createElement(documentRef, 'li', 'psd-layer');
+        item.style.paddingLeft = `${8 + layer.depth * 14}px`;
+        const checkbox = createElement(documentRef, 'input');
+        checkbox.type = 'checkbox';
+        checkbox.disabled = !layer.canvas;
+        checkbox.checked = selected.has(layer.id);
+        checkbox.addEventListener('change', () => {
+            if (checkbox.checked) {
+                selected.add(layer.id);
+            }
+            else {
+                selected.delete(layer.id);
+            }
+            redraw();
+        });
+        const copy = createElement(documentRef, 'div');
+        copy.append(createElement(documentRef, 'strong', undefined, layer.name), createElement(documentRef, 'span', undefined, `${layer.left},${layer.top} · ${layer.width} x ${layer.height}${layer.hidden ? ' · hidden' : ''}`));
+        item.append(checkbox, copy);
+        list.appendChild(item);
+    });
+    const getZoomState = () => ({
+        scale: zoom,
+        label: `${Math.round(zoom * 100)}%`,
+        canZoomIn: zoom < 4,
+        canZoomOut: zoom > 0.1,
+        canReset: zoom !== 1,
+        minScale: 0.1,
+        maxScale: 4
+    });
+    const setZoom = (scale) => {
+        zoom = clampZoom(scale);
+        wrap.style.transform = `scale(${zoom})`;
+        zoomLabel.textContent = `${Math.round(zoom * 100)}%`;
+        zoomEmitter.emit();
+        return getZoomState();
+    };
+    zoomOut.addEventListener('click', () => setZoom(zoom - 0.1));
+    zoomIn.addEventListener('click', () => setZoom(zoom + 0.1));
+    reset.addEventListener('click', () => setZoom(1));
+    showAll.addEventListener('click', () => {
+        drawableLayers.forEach(layer => selected.add(layer.id));
+        list.querySelectorAll('input[type="checkbox"]').forEach(input => {
+            if (!input.disabled)
+                input.checked = true;
+        });
+        redraw();
+    });
+    hideAll.addEventListener('click', () => {
+        selected.clear();
+        list.querySelectorAll('input[type="checkbox"]').forEach(input => {
+            if (!input.disabled)
+                input.checked = false;
+        });
+        redraw();
+    });
+    registerFileViewerZoomProvider(root, {
+        zoomIn: () => setZoom(zoom + 0.1),
+        zoomOut: () => setZoom(zoom - 0.1),
+        resetZoom: () => setZoom(1),
+        setZoom,
+        getState: getZoomState,
+        subscribe: zoomEmitter.subscribe
+    });
+    redraw();
+    setZoom(1);
+    return {
+        $el: root,
+        unmount() {
+            unregisterFileViewerZoomProvider(root);
+            target.replaceChildren();
+        }
+    };
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@file-viewer/renderer-data",
+  "version": "2.0.11",
+  "private": false,
+  "type": "module",
+  "description": "Standalone data asset renderer plugin for Flyfish File Viewer with PSD, SQLite, Parquet, Avro, WASM, font, AI/EPS, and WebArchive previews.",
+  "keywords": [
+    "file-viewer",
+    "renderer",
+    "data",
+    "sqlite",
+    "parquet",
+    "avro",
+    "psd",
+    "wasm",
+    "document-preview",
+    "document-viewer",
+    "file-preview",
+    "self-hosted"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "author": {
+    "name": "Wangyu",
+    "email": "wybaby168@gmail.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flyfish-dev/file-viewer-renderer-data.git",
+    "directory": "packages/renderers/data"
+  },
+  "homepage": "https://doc.file-viewer.app/guide/on-demand-renderers",
+  "bugs": {
+    "url": "https://github.com/flyfish-dev/file-viewer-renderer-data/issues"
+  },
+  "funding": {
+    "type": "individual",
+    "url": "https://dev.flyfish.group/shop"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "README.en.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@file-viewer/core": "^2.0.11",
+    "ag-psd": "^30.1.1",
+    "avsc": "^5.7.9",
+    "hyparquet": "^1.26.0",
+    "sql.js": "^1.14.1"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "type-check": "tsc -b tsconfig.json"
+  }
+}