@file-viewer/renderer-typst 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,48 @@
+# @file-viewer/renderer-typst
+
+Standalone Typst renderer package for Flyfish File Viewer. It reads `.typ` / `.typst` source files directly and uses the browser WASM compiler / renderer from `@myriaddreamin/typst.ts` to produce paged SVG output, so source-code fallback is never treated as a successful preview.
+
+## Usage
+
+```ts
+import FileViewer from '@file-viewer/vue3'
+import { typstRenderer } from '@file-viewer/renderer-typst'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: typstRenderer,
+}
+```
+
+You can also compose it with other renderer packages:
+
+```ts
+import { pdfRenderer } from '@file-viewer/renderer-pdf'
+import { typstRenderer } from '@file-viewer/renderer-typst'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: [pdfRenderer, typstRenderer],
+}
+```
+
+## Capabilities
+
+- Supports `.typ` and `.typst`.
+- Compiles Typst source in the browser and renders SVG pages.
+- Preserves page size metadata for preview, zoom, print, and HTML export.
+- Supports `options.typst.renderTimeoutMs` for long-running documents.
+- Reports clear diagnostics for missing WASM assets, wrong MIME types, network failures, and Typst compile errors.
+
+## Offline Assets
+
+The default asset paths are:
+
+- `wasm/typst/typst_ts_web_compiler_bg.wasm`
+- `wasm/typst/typst_ts_renderer_bg.wasm`
+
+For private deployments, override them with `options.typst.compilerWasmUrl` and `options.typst.rendererWasmUrl`. The runtime does not depend on public CDNs.
+
+## Migration Note
+
+Typst rendering has moved out of `@file-viewer/core` into this package. Core only keeps the `renderFileViewerTypst()` compatibility export with a clear installation error, and no longer installs `@myriaddreamin/*` by default. Install this renderer explicitly, or use `@file-viewer/preset-all`, when real Typst preview is required.

package/README.md

@@ -0,0 +1,48 @@
+# @file-viewer/renderer-typst
+
+Flyfish File Viewer 的独立 Typst renderer 包。它直接读取 `.typ` / `.typst` 源文件，并使用 `@myriaddreamin/typst.ts` 的浏览器 WASM compiler / renderer 输出按页 SVG，避免用源码视图冒充预览成功。
+
+## 用法
+
+```ts
+import FileViewer from '@file-viewer/vue3'
+import { typstRenderer } from '@file-viewer/renderer-typst'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: typstRenderer,
+}
+```
+
+也可以和其他 renderer 一起组合：
+
+```ts
+import { pdfRenderer } from '@file-viewer/renderer-pdf'
+import { typstRenderer } from '@file-viewer/renderer-typst'
+
+const options = {
+  rendererMode: 'replace',
+  renderers: [pdfRenderer, typstRenderer],
+}
+```
+
+## 能力边界
+
+- 支持 `.typ`、`.typst`。
+- 浏览器端真实编译 Typst 源文件并输出 SVG 页面。
+- 支持页面尺寸识别、缩放、打印和 HTML 导出。
+- 支持 `options.typst.renderTimeoutMs` 编译超时控制。
+- WASM 缺失、MIME 错误、网络错误或编译错误会给出明确诊断。
+
+## 离线资产
+
+默认会从 viewer assets 下读取：
+
+- `wasm/typst/typst_ts_web_compiler_bg.wasm`
+- `wasm/typst/typst_ts_renderer_bg.wasm`
+
+私有化部署时可以通过 `options.typst.compilerWasmUrl` 和 `options.typst.rendererWasmUrl` 覆盖。预览运行时不会访问公共 CDN。
+
+## 迁移说明
+
+Typst 渲染已经从 `@file-viewer/core` 迁移到本包。core 只保留 `renderFileViewerTypst()` 兼容导出并给出明确安装提示，不再默认安装 `@myriaddreamin/*`。需要 Typst 真实预览时，请显式安装本包，或直接使用 `@file-viewer/preset-all`。

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 typstRendererDefinition: RendererDefinition;
+export declare const renderFileViewerTypst: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
+export declare const typstRenderer: FileViewerRendererPlugin<FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>>;
+export default typstRenderer;

package/dist/index.js

@@ -0,0 +1,17 @@
+import { DEFAULT_RENDERER_DEFINITIONS, } from '@file-viewer/core';
+const typstDefinition = DEFAULT_RENDERER_DEFINITIONS.find(definition => definition.id === 'typst');
+if (!typstDefinition) {
+    throw new Error('@file-viewer/renderer-typst could not locate the core Typst renderer definition.');
+}
+export const typstRendererDefinition = typstDefinition;
+export const renderFileViewerTypst = (buffer, target, type, context) => import('./typst.js').then(({ default: renderTypst }) => renderTypst(buffer, target, type, context));
+export const typstRenderer = {
+    id: 'file-viewer-renderer-typst',
+    label: 'Flyfish File Viewer Typst renderer',
+    definitions: [typstRendererDefinition],
+    handlers: [{
+            rendererId: typstRendererDefinition.id,
+            handler: renderFileViewerTypst,
+        }],
+};
+export default typstRenderer;

package/dist/typst.d.ts

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

package/dist/typst.js

@@ -0,0 +1,544 @@
+import { $typst } from '@myriaddreamin/typst.ts';
+import { resolveFileViewerTypstCompilerWasmUrl, resolveFileViewerTypstRendererWasmUrl, } from '@file-viewer/core/assets';
+import { createFileViewerZoomChangeEmitter, formatCssPixels, registerFileViewerZoomProvider, readFileViewerText, unregisterFileViewerZoomProvider, } from '@file-viewer/core';
+const typstStyle = `
+.typst-viewer{min-height:100%;overflow:auto;background:#eef1f4;color:#172033}
+.typst-toolbar{position:sticky;top:0;z-index:2;display:flex;min-height:52px;align-items:center;justify-content:space-between;gap:16px;padding:10px 18px;border-bottom:1px solid rgba(120,134,155,.18);background:rgba(248,250,252,.92);backdrop-filter:blur(16px)}
+.typst-toolbar div{min-width:0}
+.typst-toolbar strong,.typst-toolbar span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.typst-toolbar strong{color:#172033;font-size:14px;font-weight:800}
+.typst-toolbar span,.typst-toolbar em{color:#6a778b;font-size:12px;font-style:normal;font-weight:700}
+.typst-pages{display:flex;min-height:calc(100% - 52px);flex-direction:column;align-items:center;gap:22px;box-sizing:border-box;padding:28px 16px 44px}
+.typst-page-shell{max-width:100%;overflow:hidden;border:1px solid rgba(20,35,53,.1);background:#fff;box-shadow:0 18px 44px rgba(15,23,42,.14)}
+.typst-page-content svg{display:block;width:100%;height:auto}
+.typst-loading,.typst-error{width:min(520px,calc(100% - 32px));box-sizing:border-box;margin:80px auto;padding:26px;border:1px solid rgba(120,134,155,.18);border-radius:14px;background:#fff;box-shadow:0 18px 44px rgba(15,23,42,.12)}
+.typst-loading{display:grid;justify-items:center;gap:10px;text-align:center}
+.typst-loading span{width:34px;height:34px;border:3px solid rgba(46,130,94,.18);border-top-color:#239661;border-radius:999px;animation:typst-spin .8s linear infinite}
+.typst-loading strong,.typst-error strong{color:#172033;font-size:16px}
+.typst-loading p{margin:0;color:#6a778b;font-size:13px}
+.typst-error{color:#9f1d1d}
+.typst-error pre{max-height:360px;margin:14px 0 0;overflow:auto;border-radius:10px;background:#fff1f2;color:#9f1d1d;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:12px;line-height:1.7;padding:14px;white-space:pre-wrap}
+.file-viewer[data-viewer-theme='dark'] .typst-viewer{background:#101820;color:#e6edf3}
+.file-viewer[data-viewer-theme='dark'] .typst-toolbar{border-bottom-color:rgba(139,148,158,.22);background:rgba(15,23,42,.9)}
+.file-viewer[data-viewer-theme='dark'] .typst-toolbar strong{color:#f8fafc}
+.file-viewer[data-viewer-theme='dark'] .typst-toolbar span,.file-viewer[data-viewer-theme='dark'] .typst-toolbar em{color:#9aa7b8}
+.file-viewer[data-viewer-theme='dark'] .typst-page-shell{border-color:rgba(139,148,158,.26);box-shadow:0 24px 56px rgba(0,0,0,.38)}
+.file-viewer[data-viewer-theme='dark'] .typst-loading,.file-viewer[data-viewer-theme='dark'] .typst-error{border-color:rgba(139,148,158,.22);background:#151b23;box-shadow:0 24px 56px rgba(0,0,0,.32)}
+.file-viewer[data-viewer-theme='dark'] .typst-loading strong,.file-viewer[data-viewer-theme='dark'] .typst-error strong{color:#f8fafc}
+@keyframes typst-spin{to{transform:rotate(360deg)}}
+@media (max-width:767px){.typst-toolbar{align-items:flex-start;flex-direction:column;gap:4px}.typst-pages{gap:16px;padding:16px 10px 28px}}
+@media (prefers-color-scheme:dark){.file-viewer[data-viewer-theme='system'] .typst-viewer{background:#101820;color:#e6edf3}.file-viewer[data-viewer-theme='system'] .typst-toolbar{border-bottom-color:rgba(139,148,158,.22);background:rgba(15,23,42,.9)}.file-viewer[data-viewer-theme='system'] .typst-toolbar strong{color:#f8fafc}.file-viewer[data-viewer-theme='system'] .typst-toolbar span,.file-viewer[data-viewer-theme='system'] .typst-toolbar em{color:#9aa7b8}.file-viewer[data-viewer-theme='system'] .typst-page-shell{border-color:rgba(139,148,158,.26);box-shadow:0 24px 56px rgba(0,0,0,.38)}.file-viewer[data-viewer-theme='system'] .typst-loading,.file-viewer[data-viewer-theme='system'] .typst-error{border-color:rgba(139,148,158,.22);background:#151b23;box-shadow:0 24px 56px rgba(0,0,0,.32)}.file-viewer[data-viewer-theme='system'] .typst-loading strong,.file-viewer[data-viewer-theme='system'] .typst-error strong{color:#f8fafc}}
+`;
+let typstEngineConfigKey = '';
+const DEFAULT_TYPST_RENDER_TIMEOUT_MS = 60000;
+class TypstRenderTimeoutError extends Error {
+    constructor(timeoutMs) {
+        super(`Typst 编译超过 ${Math.round(timeoutMs / 1000)} 秒`);
+        this.name = 'TypstRenderTimeoutError';
+    }
+}
+const createStyle = (documentRef) => {
+    const style = documentRef.createElement('style');
+    style.textContent = typstStyle;
+    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 getWindowOverride = (key) => {
+    if (typeof window === 'undefined') {
+        return undefined;
+    }
+    return window[key];
+};
+const configureTypstEngine = (compilerWasmUrl, rendererWasmUrl) => {
+    const configKey = `${compilerWasmUrl}\n${rendererWasmUrl}`;
+    if (typstEngineConfigKey === configKey) {
+        return;
+    }
+    $typst.setCompilerInitOptions({
+        getModule: () => compilerWasmUrl,
+    });
+    $typst.setRendererInitOptions({
+        getModule: () => rendererWasmUrl,
+    });
+    typstEngineConfigKey = configKey;
+};
+const pushUniqueTypstCandidate = (candidates, candidate) => {
+    if (candidates.some(item => item.compilerWasmUrl === candidate.compilerWasmUrl &&
+        item.rendererWasmUrl === candidate.rendererWasmUrl)) {
+        return;
+    }
+    candidates.push(candidate);
+};
+const resolveTypstEngineCandidates = (context, documentBaseUrl) => {
+    var _a;
+    const typstOptions = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.typst;
+    const compilerOverride = getWindowOverride('__FLYFISH_TYPST_COMPILER_WASM_URL__');
+    const rendererOverride = getWindowOverride('__FLYFISH_TYPST_RENDERER_WASM_URL__');
+    const compilerWasmUrl = resolveFileViewerTypstCompilerWasmUrl(typstOptions, [
+        compilerOverride,
+    ], documentBaseUrl);
+    const rendererWasmUrl = resolveFileViewerTypstRendererWasmUrl(typstOptions, [
+        rendererOverride,
+    ], documentBaseUrl);
+    const hasConfiguredAsset = Boolean((typstOptions === null || typstOptions === void 0 ? void 0 : typstOptions.compilerWasmUrl) ||
+        (typstOptions === null || typstOptions === void 0 ? void 0 : typstOptions.rendererWasmUrl) ||
+        compilerOverride ||
+        rendererOverride);
+    const candidates = [];
+    pushUniqueTypstCandidate(candidates, {
+        compilerWasmUrl,
+        rendererWasmUrl,
+        source: hasConfiguredAsset ? 'configured' : 'local',
+        preflight: !hasConfiguredAsset,
+    });
+    return candidates;
+};
+const isHttpUrl = (url) => /^https?:\/\//i.test(url);
+const isKnownMissingWasmUrl = async (url) => {
+    if (typeof fetch !== 'function' || !isHttpUrl(url)) {
+        return false;
+    }
+    try {
+        const response = await fetch(url, {
+            cache: 'force-cache',
+            method: 'HEAD',
+        });
+        return response.status === 404 || response.status === 410;
+    }
+    catch {
+        return false;
+    }
+};
+const resolveKnownMissingTypstAsset = async (candidate) => {
+    if (await isKnownMissingWasmUrl(candidate.compilerWasmUrl)) {
+        return `Typst compiler WASM missing: ${candidate.compilerWasmUrl}`;
+    }
+    if (await isKnownMissingWasmUrl(candidate.rendererWasmUrl)) {
+        return `Typst renderer WASM missing: ${candidate.rendererWasmUrl}`;
+    }
+    return '';
+};
+const isTypstAssetLoadError = (error) => {
+    if (Array.isArray(error)) {
+        return false;
+    }
+    const message = error instanceof Error ? error.message : String(error);
+    return /wasm|webassembly|fetch|module|instantiate|compile|network|404|410/i.test(message);
+};
+const escapeAttribute = (value) => {
+    return value.replace(/[&<>"']/g, char => {
+        const entities = {
+            '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&#39;',
+        };
+        return entities[char] || char;
+    });
+};
+const readNumberAttribute = (element, name) => {
+    const value = Number.parseFloat(element.getAttribute(name) || '');
+    return Number.isFinite(value) && value > 0 ? value : 0;
+};
+const removeUnsafeSvgContent = (root) => {
+    root.querySelectorAll('script').forEach(script => script.remove());
+    root.querySelectorAll('*').forEach(element => {
+        Array.from(element.attributes).forEach(attribute => {
+            const name = attribute.name.toLowerCase();
+            const value = attribute.value.trim().toLowerCase();
+            if (name.startsWith('on') || value.startsWith('javascript:')) {
+                element.removeAttribute(attribute.name);
+            }
+        });
+    });
+};
+const serializeNode = (node) => {
+    return new XMLSerializer().serializeToString(node);
+};
+const parseTypstSvgPages = (svgText) => {
+    const parser = new DOMParser();
+    const documentSvg = parser.parseFromString(svgText, 'image/svg+xml');
+    const parseError = documentSvg.querySelector('parsererror');
+    if (parseError) {
+        throw new Error(parseError.textContent || 'Typst SVG 解析失败');
+    }
+    removeUnsafeSvgContent(documentSvg);
+    const root = documentSvg.documentElement;
+    const sharedNodes = Array.from(root.children)
+        .filter(child => ['style', 'defs'].includes(child.tagName.toLowerCase()))
+        .map(serializeNode)
+        .join('');
+    const pageGroups = Array.from(root.querySelectorAll('g.typst-page'));
+    const fallbackWidth = readNumberAttribute(root, 'data-width') ||
+        readNumberAttribute(root, 'width') ||
+        596;
+    const fallbackHeight = readNumberAttribute(root, 'data-height') ||
+        readNumberAttribute(root, 'height') ||
+        842;
+    if (!pageGroups.length) {
+        return [{
+                index: 1,
+                width: fallbackWidth,
+                height: fallbackHeight,
+                svg: svgText,
+            }];
+    }
+    return pageGroups.map((group, index) => {
+        const pageWidth = readNumberAttribute(group, 'data-page-width') || fallbackWidth;
+        const pageHeight = readNumberAttribute(group, 'data-page-height') || fallbackHeight;
+        const pageClone = group.cloneNode(true);
+        pageClone.setAttribute('transform', 'translate(0, 0)');
+        const pageSvg = [
+            `<svg style="overflow:visible;" class="typst-doc" viewBox="0 0 ${pageWidth} ${pageHeight}" width="${pageWidth}" height="${pageHeight}" data-width="${pageWidth}" data-height="${pageHeight}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">`,
+            sharedNodes,
+            serializeNode(pageClone),
+            '</svg>',
+        ].join('');
+        return {
+            index: index + 1,
+            width: pageWidth,
+            height: pageHeight,
+            svg: pageSvg,
+        };
+    });
+};
+const formatTypstError = (error) => {
+    if (Array.isArray(error)) {
+        return error.map(item => {
+            if (item && typeof item === 'object' && 'message' in item) {
+                const severity = 'severity' in item ? String(item.severity) : 'Error';
+                return `${severity}: ${String(item.message)}`;
+            }
+            return String(item);
+        }).join('\n');
+    }
+    if (error instanceof Error) {
+        return error.message;
+    }
+    return String(error);
+};
+const formatTypstRuntimeError = (error) => {
+    const message = formatTypstError(error);
+    if (error instanceof TypstRenderTimeoutError) {
+        return [
+            message,
+            '请检查 Typst 源文件复杂度，或通过 options.typst.renderTimeoutMs 调大浏览器端编译超时。'
+        ].join('\n\n');
+    }
+    if (isTypstAssetLoadError(error)) {
+        return [
+            message,
+            'Typst 需要本地 compiler / renderer WASM。请运行 file-viewer-copy-assets，或配置 options.typst.compilerWasmUrl / options.typst.rendererWasmUrl，并确认服务器以 application/wasm 返回资源。'
+        ].join('\n\n');
+    }
+    return message;
+};
+const clampZoom = (value) => {
+    return Math.min(3, Math.max(0.3, Number(value.toFixed(2))));
+};
+const normalizeRenderTimeoutMs = (timeoutMs) => {
+    if (!Number.isFinite(timeoutMs) || timeoutMs === undefined) {
+        return DEFAULT_TYPST_RENDER_TIMEOUT_MS;
+    }
+    return Math.max(0, timeoutMs);
+};
+const withRenderTimeout = async (promise, timeoutMs) => {
+    if (timeoutMs <= 0) {
+        return promise;
+    }
+    let timeoutId;
+    const timeoutPromise = new Promise((_, reject) => {
+        timeoutId = setTimeout(() => reject(new TypstRenderTimeoutError(timeoutMs)), timeoutMs);
+    });
+    try {
+        return await Promise.race([promise, timeoutPromise]);
+    }
+    finally {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+    }
+};
+const buildExportStyles = () => `
+  <style>
+    .typst-export-document {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 18px;
+      margin: 0;
+      padding: 24px;
+      background: #eef1f4;
+    }
+    .typst-export-page {
+      box-sizing: border-box;
+      flex: 0 0 auto;
+      overflow: hidden;
+      background: #ffffff;
+      box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
+    }
+    .typst-export-page svg {
+      display: block;
+      width: 100%;
+      height: auto;
+    }
+  </style>
+`;
+const buildExportHtml = (pages, filename) => {
+    return `${buildExportStyles()}<main class="typst-export-document" aria-label="${escapeAttribute(filename || 'Typst document')}">${pages.map(page => {
+        const width = formatCssPixels(page.width);
+        const height = formatCssPixels(page.height);
+        return `<section class="typst-export-page viewer-print-page" style="--viewer-print-page-width:${width};--viewer-print-page-height:${height};width:${width};height:${height};" aria-label="Page ${page.index}">${page.svg}</section>`;
+    }).join('')}</main>`;
+};
+const buildPrintStyle = (pages) => {
+    const firstPage = pages[0];
+    const width = firstPage ? formatCssPixels(firstPage.width) : '596px';
+    const height = firstPage ? formatCssPixels(firstPage.height) : '842px';
+    return `
+    @page { size: ${width} ${height}; margin: 0; }
+    @media print {
+      html,
+      body {
+        width: ${width};
+        min-width: ${width};
+        margin: 0 !important;
+        background: #ffffff !important;
+      }
+      .typst-export-document {
+        display: block !important;
+        margin: 0 !important;
+        padding: 0 !important;
+        background: #ffffff !important;
+      }
+      .typst-export-page {
+        display: block !important;
+        margin: 0 !important;
+        border: 0 !important;
+        box-shadow: none !important;
+        break-after: page;
+        page-break-after: always;
+      }
+      .typst-export-page:last-child {
+        break-after: auto;
+        page-break-after: auto;
+      }
+      .typst-export-page svg {
+        width: 100% !important;
+        height: auto !important;
+      }
+    }
+  `;
+};
+const buildExportAdapter = (pages, filename) => {
+    if (!pages.length) {
+        return null;
+    }
+    return {
+        includeDocumentStyles: false,
+        print: true,
+        exportHtml: true,
+        printStyle: () => buildPrintStyle(pages),
+        toHtml: () => buildExportHtml(pages, filename),
+    };
+};
+const getPageSummary = (pages) => {
+    if (!pages.length) {
+        return '0 pages';
+    }
+    const firstPage = pages[0];
+    return `${pages.length} pages / ${Math.round(firstPage.width)} x ${Math.round(firstPage.height)} pt`;
+};
+export default async function renderTypst(buffer, target, _type, context) {
+    const source = await readFileViewerText(buffer);
+    const documentRef = target.ownerDocument || document;
+    const zoomEmitter = createFileViewerZoomChangeEmitter();
+    let state = 'loading';
+    let pages = [];
+    let errorMessage = '';
+    let zoom = 1;
+    let renderToken = 0;
+    let disposed = false;
+    const pageShells = new Map();
+    const root = createElement(documentRef, 'div', 'typst-viewer');
+    root.dataset.viewerZoomProvider = 'typst';
+    const toolbar = createElement(documentRef, 'header', 'typst-toolbar');
+    const titleGroup = createElement(documentRef, 'div');
+    const title = createElement(documentRef, 'strong', undefined, (context === null || context === void 0 ? void 0 : context.filename) || 'Typst document');
+    const summary = createElement(documentRef, 'span', undefined, 'Typst WASM renderer');
+    const status = createElement(documentRef, 'em', undefined, '正在编译');
+    const body = createElement(documentRef, 'div');
+    titleGroup.append(title, summary);
+    toolbar.append(titleGroup, status);
+    root.append(toolbar, body);
+    target.replaceChildren(createStyle(documentRef), root);
+    const getZoomState = () => ({
+        scale: zoom,
+        label: `${Math.round(zoom * 100)}%`,
+        canZoomIn: zoom < 3,
+        canZoomOut: zoom > 0.3,
+        canReset: zoom !== 1,
+        minScale: 0.3,
+        maxScale: 3,
+    });
+    const applyPageZoom = () => {
+        pages.forEach(page => {
+            const shell = pageShells.get(page.index);
+            if (!shell) {
+                return;
+            }
+            shell.style.width = `${page.width * zoom}px`;
+            shell.style.maxWidth = '100%';
+            shell.style.height = 'auto';
+        });
+    };
+    const setZoom = (scale) => {
+        zoom = clampZoom(scale);
+        applyPageZoom();
+        zoomEmitter.emit();
+        return getZoomState();
+    };
+    registerFileViewerZoomProvider(root, {
+        zoomIn: () => setZoom(zoom + 0.1),
+        zoomOut: () => setZoom(zoom - 0.1),
+        resetZoom: () => setZoom(1),
+        setZoom,
+        getState: getZoomState,
+        subscribe: zoomEmitter.subscribe,
+    });
+    const registerExportAdapter = () => {
+        var _a;
+        (_a = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _a === void 0 ? void 0 : _a.call(context, buildExportAdapter(pages, context.filename));
+    };
+    const renderLoading = () => {
+        const loading = createElement(documentRef, 'div', 'typst-loading');
+        loading.setAttribute('role', 'status');
+        loading.append(createElement(documentRef, 'span'), createElement(documentRef, 'strong', undefined, '正在解析 Typst'), createElement(documentRef, 'p', undefined, '加载编译器并生成页面预览...'));
+        body.replaceChildren(loading);
+    };
+    const renderError = () => {
+        const error = createElement(documentRef, 'div', 'typst-error');
+        error.append(createElement(documentRef, 'strong', undefined, 'Typst 渲染失败'), createElement(documentRef, 'pre', undefined, errorMessage));
+        body.replaceChildren(error);
+    };
+    const renderPages = () => {
+        pageShells.clear();
+        const pagesRoot = createElement(documentRef, 'main', 'typst-pages');
+        pagesRoot.setAttribute('aria-label', 'Typst preview pages');
+        pages.forEach(page => {
+            const shell = createElement(documentRef, 'section', 'typst-page-shell');
+            shell.setAttribute('aria-label', `Page ${page.index}`);
+            const content = createElement(documentRef, 'div', 'typst-page-content');
+            content.innerHTML = page.svg;
+            shell.append(content);
+            pageShells.set(page.index, shell);
+            pagesRoot.append(shell);
+        });
+        body.replaceChildren(pagesRoot);
+        applyPageZoom();
+    };
+    const syncUi = () => {
+        summary.textContent = state === 'ready'
+            ? getPageSummary(pages)
+            : 'Typst WASM renderer';
+        status.textContent = state === 'loading'
+            ? '正在编译'
+            : state === 'error'
+                ? '编译失败'
+                : '已渲染';
+        if (state === 'loading') {
+            renderLoading();
+        }
+        else if (state === 'error') {
+            renderError();
+        }
+        else {
+            renderPages();
+        }
+    };
+    const renderTypstSvg = async () => {
+        var _a, _b;
+        const candidates = resolveTypstEngineCandidates(context, documentRef.baseURI);
+        const timeoutMs = normalizeRenderTimeoutMs((_b = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.typst) === null || _b === void 0 ? void 0 : _b.renderTimeoutMs);
+        let lastError;
+        for (const candidate of candidates) {
+            const missingAsset = candidate.preflight
+                ? await resolveKnownMissingTypstAsset(candidate)
+                : '';
+            if (missingAsset) {
+                lastError = new Error(missingAsset);
+                continue;
+            }
+            try {
+                configureTypstEngine(candidate.compilerWasmUrl, candidate.rendererWasmUrl);
+                return await withRenderTimeout($typst.svg({
+                    mainContent: source,
+                    data_selection: {
+                        body: true,
+                        defs: true,
+                        css: true,
+                        js: false,
+                    },
+                }), timeoutMs);
+            }
+            catch (error) {
+                lastError = error;
+                if (error instanceof TypstRenderTimeoutError || !isTypstAssetLoadError(error)) {
+                    throw error;
+                }
+            }
+        }
+        throw lastError instanceof Error ? lastError : new Error('Typst WASM 加载失败');
+    };
+    const render = async () => {
+        var _a, _b;
+        const token = ++renderToken;
+        state = 'loading';
+        errorMessage = '';
+        pages = [];
+        (_a = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _a === void 0 ? void 0 : _a.call(context, null);
+        syncUi();
+        try {
+            const svg = await renderTypstSvg();
+            if (disposed || token !== renderToken) {
+                return;
+            }
+            pages = parseTypstSvgPages(svg);
+            state = 'ready';
+            syncUi();
+            registerExportAdapter();
+            (_b = context === null || context === void 0 ? void 0 : context.onProgressiveRender) === null || _b === void 0 ? void 0 : _b.call(context);
+        }
+        catch (error) {
+            if (disposed || token !== renderToken) {
+                return;
+            }
+            errorMessage = formatTypstRuntimeError(error);
+            state = 'error';
+            syncUi();
+        }
+    };
+    void render();
+    return {
+        $el: target,
+        unmount() {
+            var _a;
+            disposed = true;
+            renderToken += 1;
+            unregisterFileViewerZoomProvider(root);
+            (_a = context === null || context === void 0 ? void 0 : context.registerExportAdapter) === null || _a === void 0 ? void 0 : _a.call(context, null);
+            target.replaceChildren();
+        },
+    };
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@file-viewer/renderer-typst",
+  "version": "2.0.11",
+  "private": false,
+  "type": "module",
+  "description": "Standalone Typst renderer plugin for Flyfish File Viewer powered by browser WASM.",
+  "keywords": [
+    "file-viewer",
+    "renderer",
+    "typst",
+    "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-typst.git",
+    "directory": "packages/renderers/typst"
+  },
+  "homepage": "https://doc.file-viewer.app/guide/on-demand-renderers",
+  "bugs": {
+    "url": "https://github.com/flyfish-dev/file-viewer-renderer-typst/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",
+    "@myriaddreamin/typst-ts-renderer": "0.7.0",
+    "@myriaddreamin/typst-ts-web-compiler": "0.7.0",
+    "@myriaddreamin/typst.ts": "0.7.0"
+  },
+  "devDependencies": {
+    "typescript": "^6.0.3"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "tsc -b tsconfig.json",
+    "type-check": "tsc -b tsconfig.json"
+  }
+}