@file-viewer/renderer-text 2.4.0 → 3.0.1

package/README.en.md

@@ -1,6 +1,6 @@
 # @file-viewer/renderer-text
 
-Standalone code, text, Markdown, patch, and git bundle renderer package for Flyfish File Viewer. It handles source highlighting, Markdown reading surfaces, embedded Mermaid diagrams in Markdown, side-by-side patch diffs, git bundle inspection, and unified zoom for `.txt`, `.json`, `.ts`, `.vue`, `.log`, `.md`, `.markdown`, `.patch`, `.bundle`, and other code delivery formats.
+Base code, text, and Markdown renderer package for Flyfish File Viewer. Mermaid, side-by-side patch diff, and Git bundle inspection live in `@file-viewer/capability-mermaid` and `@file-viewer/capability-text-tools`; they are excluded from the standard/full default closure.
 
 ## Usage
 
@@ -13,6 +13,9 @@ const options = {
   renderers: textRenderer,
   text: {
     lineNumbers: true,
+    wrapLongLines: true,
+    prettyPrint: true,
+    prettyPrintMaxBytes: 512 * 1024,
   },
 }
 ```
@@ -34,8 +37,12 @@ const options = {
 - Code and text preview uses `highlight.js` core with per-language dynamic imports instead of registering every language up front.
 - Code, text, and virtualized Markdown source views show their file type, indexing status, and line-count metadata bar by default. Set `options.text.toolbar: false` to hide this renderer-local bar without hiding the viewer-level download, search, or zoom toolbar.
 - Regular code and text previews can show a line-number gutter with `options.text.lineNumbers: true`. The gutter is excluded from copied source, search matches, and assistive reading. Virtual large-text views keep their existing gutter unless it is explicitly set to `false`.
-- `patch` uses `diff2html` on demand for side-by-side review.
-- `bundle` / `bdl` parses Git bundle headers, refs, commit history, file trees, and readable blobs; regular OFS_DELTA / REF_DELTA objects are resolved in the browser, while very large packs or bundles that depend on external prerequisites surface a clear boundary notice.
+- `options.text.wrapLongLines: true` changes layout only and never inserts source newlines. Regular previews keep one gutter entry per logical line; large files remain bounded in the virtual window while wrapping to the available width.
+- `options.text.prettyPrint: true` lazily loads Prettier and only the parser plugins needed by a supported structured format. It formats a display copy, labels the toolbar as a formatted preview, and provides a switch back to the original source. JSON/JSONC/JSON5, JavaScript/TypeScript, HTML/Vue, CSS, YAML, Markdown, GraphQL, and XML share this path.
+- `prettyPrintMaxBytes` limits only Prettier and defaults to the effective `virtualizeAboveBytes` value (512 KiB when omitted). Oversized, malformed, and unsupported inputs fall back to the original source, which continues through the existing regular or virtual renderer. XML uses a conservative whitespace-preserving mode; mixed content and `xml:space="preserve"` stay on the original source path.
+- The legacy `*-full` script-tag IIFE assets do not bundle Prettier, so `prettyPrint` falls back to the original source there. Use the ESM integration (standard component packages or `@file-viewer/preset-*`) for formatted previews.
+- With the text-tools capability installed, `patch` uses `diff2html` for side-by-side review and `bundle` / `bdl` enables Git bundle inspection.
+- With the Mermaid capability installed, fenced Mermaid blocks render as diagrams. Without it, the source stays visible with the exact CLI enablement command.
 - HTML, XML, Vue, and similar files are escaped and shown as source, never executed.
 - Markdown uses `marked` for a read-only reading surface with dark/light theme support, table scrolling, and a unified zoom provider.
 - Markdown no longer falls back to source because of the general large-text threshold. Set `options.text.markdownVirtualizeAboveBytes` only when an application must bound exceptionally large Markdown files.
@@ -43,4 +50,4 @@ const options = {
 
 ## Migration Note
 
-`@file-viewer/core` no longer bundles code / markdown renderers and no longer depends directly on `highlight.js`, `marked`, `diff2html`, or git bundle parsing dependencies. Install this package explicitly for code, text, Markdown, patch, or git bundle preview, or use `@file-viewer/preset-all`, which aggregates this renderer automatically.
+Standard/full includes base code, text, and Markdown without installing `diff2html`, `pako`, or Mermaid. Optional uploads show `npx file-viewer-cli add text-tools --write` or `add mermaid-markdown --write`; `preset-all` is only for explicit all/debug use.

package/README.md

@@ -1,6 +1,6 @@
 # @file-viewer/renderer-text
 
-Flyfish File Viewer 的独立代码、文本、Markdown、patch 和 git bundle renderer 包。它负责 `.txt`、`.json`、`.ts`、`.vue`、`.log`、`.md`、`.markdown`、`.patch`、`.bundle` 等文本与代码交付文件的源码高亮、Markdown 阅读面、Markdown 内嵌 Mermaid 图、左右比对、bundle 结构查看和统一缩放。
+Flyfish File Viewer 的基础代码、文本和 Markdown renderer 包。Mermaid、patch 左右比对和 Git bundle 检查已拆到 `@file-viewer/capability-mermaid` 与 `@file-viewer/capability-text-tools`，不进入 standard/full 默认闭包。
 
 ## 用法
 
@@ -13,6 +13,9 @@ const options = {
   renderers: textRenderer,
   text: {
     lineNumbers: true,
+    wrapLongLines: true,
+    prettyPrint: true,
+    prettyPrintMaxBytes: 512 * 1024,
   },
 }
 ```
@@ -34,8 +37,12 @@ const options = {
 - 代码和文本使用 `highlight.js` core + 按语言动态加载，避免一次性注册全部语言。
 - 代码、文本和超大 Markdown 源码视图默认显示文件类型、索引状态和行数元信息栏；传入 `options.text.toolbar: false` 可隐藏该 renderer 内部栏，不影响 Viewer 的下载、搜索、缩放等全局工具栏。
 - 普通代码和文本可通过 `options.text.lineNumbers: true` 显示行号；行号不会进入复制内容、搜索结果或无障碍朗读。超大文本保留原有的虚拟行号栏，可显式传 `false` 隐藏。
-- `patch` 使用 `diff2html` 按需渲染左右比对视图。
-- `bundle` / `bdl` 会解析 Git bundle header、refs、commit 历史、文件树和可读 blob；常规 OFS_DELTA / REF_DELTA 会在浏览器端还原，超大包或依赖外部 prerequisite 的包会给出清晰边界提示。
+- `options.text.wrapLongLines: true` 仅改变布局，不向源码插入换行。普通预览会按逻辑行维护行号，超大文本仍使用有界虚拟窗口并按可用宽度换行。
+- `options.text.prettyPrint: true` 会在支持的结构化文本上按需加载 Prettier 与对应 parser，仅格式化显示副本；工具栏会标明“格式化预览”，并可切回原始源码。JSON/JSONC/JSON5、JavaScript/TypeScript、HTML/Vue、CSS、YAML、Markdown、GraphQL 和 XML 共用同一路径。
+- `prettyPrintMaxBytes` 只限制 Prettier，默认继承 `virtualizeAboveBytes`（未配置时为 512 KiB）。超限、语法错误或不支持的格式直接回退原始源码，之后仍由普通或虚拟文本 renderer 决定展示方式。XML 使用保守的 whitespace-preserving 模式；检测到混合内容或 `xml:space="preserve"` 时直接保留原文。
+- 历史 `*-full` 包的 script 标签 IIFE 资源不打包 Prettier，该路径下 `prettyPrint` 无错误回退到原始源码；需要格式化预览时使用 ESM 集成（标准组件包或 `@file-viewer/preset-*`）。
+- 安装 text-tools capability 后，`patch` 使用 `diff2html` 渲染左右比对视图，`bundle` / `bdl` 才启用 Git bundle 结构检查。
+- 安装 Mermaid capability 后，Markdown 内嵌 Mermaid 图才会渲染；未安装时保留源码并显示精确 CLI 启用命令。
 - HTML / XML / Vue 等文件按源码方式转义展示，不执行脚本。
 - Markdown 使用 `marked` 输出只读阅读面，并保留明暗主题、表格滚动和统一缩放 provider。
 - Markdown 不再因为通用大文本阈值自动退化成源码；如业务必须限制超大 Markdown，可单独设置 `options.text.markdownVirtualizeAboveBytes`。
@@ -43,4 +50,4 @@ const options = {
 
 ## 迁移说明
 
-`@file-viewer/core` 已不再内置 code / markdown renderer，也不再直接依赖 `highlight.js`、`marked`、`diff2html` 或 Git bundle 解析依赖。需要代码、文本、Markdown、patch 或 git bundle 预览时，请显式安装本包，或使用会自动聚合本包的 `@file-viewer/preset-all`。
+standard/full 默认包含基础代码、文本和 Markdown，不安装 `diff2html`、`pako` 或 Mermaid。打开可选格式时会提示运行 `npx file-viewer-cli add text-tools --write` 或 `add mermaid-markdown --write`；`preset-all` 仅用于显式全量/调试。

package/dist/code.d.ts

@@ -2,10 +2,8 @@ import { type FileRenderContext, type FileViewerRenderedInstance } from '@file-v
 /**
  * Framework-neutral text/code renderer.
  *
- * highlight.js core and language definitions are loaded lazily by format. HTML
- * and XML are highlighted as escaped source text, never executed as real DOM.
- * @param buffer 文本二进制内容
- * @param target 目标
- * @param type 文件扩展名，用于选择 highlight.js 语言
+ * highlight.js core, Prettier standalone, and parser definitions are loaded
+ * lazily by format. HTML and XML are always mounted as escaped source text and
+ * never executed as real DOM.
  */
 export default function renderText(buffer: ArrayBuffer, target: HTMLDivElement, type?: string, context?: FileRenderContext): Promise<FileViewerRenderedInstance>;

package/dist/code.js

@@ -1,6 +1,7 @@
 import { createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, decodeFileViewerTextBuffer, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
 import { codeStyle } from './codeStyle.js';
 import renderLargeText, { shouldVirtualizeTextBuffer } from './largeText.js';
+import { formatFileViewerTextForDisplay, resolveFileViewerPrettyPrintMaxBytes, supportsFileViewerPrettyPrint } from './prettyPrint.js';
 const languageMap = {
     bash: 'bash',
     c: 'cpp',
@@ -15,6 +16,8 @@ const languageMap = {
     bdl: 'plaintext',
     gv: 'plaintext',
     go: 'go',
+    graphql: 'graphql',
+    gql: 'graphql',
     h: 'cpp',
     hcl: 'plaintext',
     hpp: 'cpp',
@@ -60,6 +63,7 @@ const languageLoaders = {
     css: () => import('highlight.js/lib/languages/css'),
     diff: () => import('highlight.js/lib/languages/diff'),
     go: () => import('highlight.js/lib/languages/go'),
+    graphql: () => import('highlight.js/lib/languages/graphql'),
     http: () => import('highlight.js/lib/languages/http'),
     ini: () => import('highlight.js/lib/languages/ini'),
     java: () => import('highlight.js/lib/languages/java'),
@@ -81,8 +85,8 @@ const languageLoaders = {
 };
 let highlighterPromise = null;
 const registeredLanguages = new Set();
-const createElement = (tagName, className, text) => {
-    const element = document.createElement(tagName);
+const createElement = (documentRef, tagName, className, text) => {
+    const element = documentRef.createElement(tagName);
     if (className) {
         element.className = className;
     }
@@ -91,8 +95,8 @@ const createElement = (tagName, className, text) => {
     }
     return element;
 };
-const createStyle = () => {
-    const style = document.createElement('style');
+const createStyle = (documentRef) => {
+    const style = documentRef.createElement('style');
     style.textContent = codeStyle;
     return style;
 };
@@ -139,21 +143,122 @@ const lineCountOf = (value) => {
 const createLineNumberText = (lineCount) => {
     return Array.from({ length: lineCount }, (_, index) => String(index + 1)).join('\n');
 };
+const createWrappedSourceLine = (documentRef, lineNumber) => {
+    const row = createElement(documentRef, 'span', 'code-source-line');
+    row.dataset.line = String(lineNumber);
+    const number = createElement(documentRef, 'span', 'code-source-line-number', String(lineNumber));
+    number.setAttribute('aria-hidden', 'true');
+    const content = createElement(documentRef, 'span', 'code-source-line-content');
+    row.append(number, content);
+    return { row, content };
+};
+/**
+ * Splits trusted highlight.js markup into logical source-line wrappers while
+ * recreating active token spans after every newline. This keeps multiline
+ * comments and strings highlighted without coupling visual wrapping to source
+ * line numbers.
+ */
+const mountWrappedHighlightedLines = (code, highlightedHtml, expectedLineCount) => {
+    const documentRef = code.ownerDocument;
+    const staging = createElement(documentRef, 'span');
+    staging.innerHTML = highlightedHtml;
+    const lines = [createWrappedSourceLine(documentRef, 1)];
+    let lineIndex = 0;
+    const activeElements = [];
+    let activeClones = [];
+    const currentContent = () => lines[lineIndex].content;
+    const currentParent = () => { var _a; return (_a = activeClones[activeClones.length - 1]) !== null && _a !== void 0 ? _a : currentContent(); };
+    const continueOnNextLine = () => {
+        lineIndex += 1;
+        lines.push(createWrappedSourceLine(documentRef, lineIndex + 1));
+        let parent = currentContent();
+        activeClones = activeElements.map(element => {
+            const clone = element.cloneNode(false);
+            parent.append(clone);
+            parent = clone;
+            return clone;
+        });
+    };
+    const visit = (node) => {
+        var _a;
+        if (node.nodeType === 3) {
+            const parts = ((_a = node.textContent) !== null && _a !== void 0 ? _a : '').split(/\r\n|\r|\n/);
+            parts.forEach((part, index) => {
+                if (part) {
+                    currentParent().append(documentRef.createTextNode(part));
+                }
+                if (index < parts.length - 1) {
+                    continueOnNextLine();
+                }
+            });
+            return;
+        }
+        if (node.nodeType !== 1) {
+            return;
+        }
+        const element = node;
+        const clone = element.cloneNode(false);
+        currentParent().append(clone);
+        activeElements.push(element);
+        activeClones.push(clone);
+        Array.from(element.childNodes).forEach(visit);
+        activeElements.pop();
+        activeClones.pop();
+    };
+    Array.from(staging.childNodes).forEach(visit);
+    while (lines.length < expectedLineCount) {
+        lines.push(createWrappedSourceLine(documentRef, lines.length + 1));
+    }
+    code.replaceChildren(...lines.map(line => line.row));
+};
+const mountCodeMarkup = (pre, code, highlightedHtml, lineCount, showLineNumbers, wrapLongLines) => {
+    code.replaceChildren();
+    if (showLineNumbers && wrapLongLines) {
+        pre.className = 'code-area code-area--wrapped-line-numbers';
+        pre.replaceChildren(code);
+        mountWrappedHighlightedLines(code, highlightedHtml, lineCount);
+        return;
+    }
+    pre.className = showLineNumbers ? 'code-area code-area--line-numbers' : 'code-area';
+    if (showLineNumbers) {
+        const gutter = createElement(pre.ownerDocument, 'span', 'code-line-numbers', createLineNumberText(lineCount));
+        gutter.setAttribute('aria-hidden', 'true');
+        pre.replaceChildren(gutter, code);
+    }
+    else {
+        pre.replaceChildren(code);
+    }
+    code.innerHTML = highlightedHtml;
+};
+const canPossiblyFitDecodedPrettyPrintLimit = (buffer, maxBytes) => {
+    // UTF-16 ASCII is the widest supported source encoding relative to its
+    // decoded UTF-8 representation. This fast guard avoids decoding enormous
+    // structured files that cannot possibly fit the configured decoded limit.
+    return buffer.byteLength <= (maxBytes * 2) + 4;
+};
 /**
  * Framework-neutral text/code renderer.
  *
- * highlight.js core and language definitions are loaded lazily by format. HTML
- * and XML are highlighted as escaped source text, never executed as real DOM.
- * @param buffer 文本二进制内容
- * @param target 目标
- * @param type 文件扩展名，用于选择 highlight.js 语言
+ * highlight.js core, Prettier standalone, and parser definitions are loaded
+ * lazily by format. HTML and XML are always mounted as escaped source text and
+ * never executed as real DOM.
  */
 export default async function renderText(buffer, target, type, context) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b;
     const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
     const extension = type || 'txt';
     const normalizedExtension = extension.trim().toLowerCase();
-    if (normalizedExtension !== 'bundle' &&
+    const textOptions = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.text;
+    let sourceText;
+    let prettyPrintResult;
+    if ((textOptions === null || textOptions === void 0 ? void 0 : textOptions.prettyPrint) === true &&
+        supportsFileViewerPrettyPrint(normalizedExtension) &&
+        canPossiblyFitDecodedPrettyPrintLimit(buffer, resolveFileViewerPrettyPrintMaxBytes(textOptions))) {
+        sourceText = decodeFileViewerTextBuffer(buffer, textOptions.encoding).text;
+        prettyPrintResult = await formatFileViewerTextForDisplay(sourceText, normalizedExtension, textOptions, context === null || context === void 0 ? void 0 : context.signal);
+    }
+    if (!(prettyPrintResult === null || prettyPrintResult === void 0 ? void 0 : prettyPrintResult.formatted) &&
+        normalizedExtension !== 'bundle' &&
         normalizedExtension !== 'bdl' &&
         shouldVirtualizeTextBuffer(buffer, context)) {
         return renderLargeText(buffer, target, extension, context);
@@ -166,58 +271,92 @@ export default async function renderText(buffer, target, type, context) {
         const { default: renderGitBundle } = await import('./gitBundle.js');
         return renderGitBundle(buffer, target, extension, context);
     }
-    const text = decodeFileViewerTextBuffer(buffer, (_b = (_a = context === null || context === void 0 ? void 0 : context.options) === null || _a === void 0 ? void 0 : _a.text) === null || _b === void 0 ? void 0 : _b.encoding).text;
+    const originalText = sourceText !== null && sourceText !== void 0 ? sourceText : decodeFileViewerTextBuffer(buffer, textOptions === null || textOptions === void 0 ? void 0 : textOptions.encoding).text;
+    const formattedText = (prettyPrintResult === null || prettyPrintResult === void 0 ? void 0 : prettyPrintResult.formatted) ? prettyPrintResult.text : null;
     const language = resolveLanguage(extension);
-    const lineCount = lineCountOf(text);
-    const showToolbar = ((_d = (_c = context === null || context === void 0 ? void 0 : context.options) === null || _c === void 0 ? void 0 : _c.text) === null || _d === void 0 ? void 0 : _d.toolbar) !== false;
-    const showLineNumbers = ((_f = (_e = context === null || context === void 0 ? void 0 : context.options) === null || _e === void 0 ? void 0 : _e.text) === null || _f === void 0 ? void 0 : _f.lineNumbers) === true;
+    const showToolbar = (textOptions === null || textOptions === void 0 ? void 0 : textOptions.toolbar) !== false;
+    const showLineNumbers = (textOptions === null || textOptions === void 0 ? void 0 : textOptions.lineNumbers) === true;
+    const wrapLongLines = (textOptions === null || textOptions === void 0 ? void 0 : textOptions.wrapLongLines) === true;
+    const documentRef = target.ownerDocument;
     let disposed = false;
     let zoom = 1;
+    let showingFormatted = formattedText !== null;
+    let renderGeneration = 0;
     const zoomEmitter = createZoomChangeEmitter();
-    const root = createElement('div', 'code-viewer');
+    const root = createElement(documentRef, 'div', wrapLongLines ? 'code-viewer code-viewer--wrap-lines' : 'code-viewer');
     root.dataset.viewerZoomProvider = 'code';
     root.dataset.textToolbar = String(showToolbar);
     root.dataset.lineNumbers = String(showLineNumbers);
-    const toolbar = createElement('div', 'code-toolbar');
-    toolbar.append(createElement('span', '', extension.toUpperCase()), createElement('strong', '', `${lineCount} lines`));
-    const pre = createElement('pre', showLineNumbers ? 'code-area code-area--line-numbers' : 'code-area');
-    const code = createElement('code', `hljs language-${language}`);
-    code.innerHTML = language === 'plaintext'
-        ? escapeHtml(text)
-        : t('text.code.loadingHighlight');
-    if (showLineNumbers) {
-        const gutter = createElement('span', 'code-line-numbers', createLineNumberText(lineCount));
-        gutter.setAttribute('aria-hidden', 'true');
-        pre.append(gutter);
-    }
+    root.dataset.wrapLongLines = String(wrapLongLines);
+    root.dataset.prettyPrint = (_b = prettyPrintResult === null || prettyPrintResult === void 0 ? void 0 : prettyPrintResult.reason) !== null && _b !== void 0 ? _b : 'disabled';
+    const toolbar = createElement(documentRef, 'div', 'code-toolbar');
+    const extensionLabel = createElement(documentRef, 'span', '', extension.toUpperCase());
+    const toolbarMeta = createElement(documentRef, 'div', 'code-toolbar-meta');
+    const representationStatus = createElement(documentRef, 'span', 'code-format-status');
+    const representationToggle = createElement(documentRef, 'button', 'code-format-toggle');
+    representationToggle.type = 'button';
+    const lineSummary = createElement(documentRef, 'strong');
+    toolbarMeta.append(representationStatus, representationToggle, lineSummary);
+    toolbar.append(extensionLabel, toolbarMeta);
+    const pre = createElement(documentRef, 'pre', 'code-area');
+    const code = createElement(documentRef, 'code', `hljs language-${language}`);
     pre.append(code);
     if (showToolbar) {
         root.append(toolbar);
     }
     root.append(pre);
     root.style.setProperty('--code-font-size', `${13 * zoom}px`);
-    target.replaceChildren(createStyle(), root);
-    const updateHighlighted = async () => {
+    target.replaceChildren(createStyle(documentRef), root);
+    const currentText = () => showingFormatted && formattedText !== null ? formattedText : originalText;
+    const syncRepresentationControls = (lineCount) => {
+        const formatted = showingFormatted && formattedText !== null;
+        root.dataset.textRepresentation = formatted ? 'formatted' : 'source';
+        lineSummary.textContent = `${lineCount} lines`;
+        representationStatus.hidden = !formatted;
+        representationStatus.textContent = formatted ? t('text.code.formattedPreview') : '';
+        representationToggle.hidden = formattedText === null;
+        representationToggle.textContent = formatted
+            ? t('text.code.showOriginal')
+            : t('text.code.showFormatted');
+        representationToggle.setAttribute('aria-pressed', String(formatted));
+    };
+    const renderCurrentRepresentation = async () => {
+        const generation = renderGeneration + 1;
+        renderGeneration = generation;
+        const text = currentText();
+        const lineCount = lineCountOf(text);
+        syncRepresentationControls(lineCount);
         if (language === 'plaintext') {
+            mountCodeMarkup(pre, code, escapeHtml(text), lineCount, showLineNumbers, wrapLongLines);
             return;
         }
+        code.textContent = t('text.code.loadingHighlight');
         try {
             const hljs = await loadHighlighter();
             const hasLanguage = await registerLanguageOnce(hljs, language);
-            if (disposed) {
+            if (disposed || generation !== renderGeneration) {
                 return;
             }
-            code.innerHTML = hasLanguage
+            const highlighted = hasLanguage
                 ? hljs.highlight(text, { language, ignoreIllegals: true }).value
                 : escapeHtml(text);
+            mountCodeMarkup(pre, code, highlighted, lineCount, showLineNumbers, wrapLongLines);
         }
         catch {
-            if (!disposed) {
-                code.innerHTML = escapeHtml(text);
+            if (!disposed && generation === renderGeneration) {
+                mountCodeMarkup(pre, code, escapeHtml(text), lineCount, showLineNumbers, wrapLongLines);
             }
         }
     };
-    void updateHighlighted();
+    const toggleRepresentation = () => {
+        if (formattedText === null) {
+            return;
+        }
+        showingFormatted = !showingFormatted;
+        void renderCurrentRepresentation();
+    };
+    representationToggle.addEventListener('click', toggleRepresentation);
+    await renderCurrentRepresentation();
     const getZoomState = () => ({
         scale: zoom,
         label: `${Math.round(zoom * 100)}%`,
@@ -245,6 +384,8 @@ export default async function renderText(buffer, target, type, context) {
         $el: target,
         unmount() {
             disposed = true;
+            renderGeneration += 1;
+            representationToggle.removeEventListener('click', toggleRepresentation);
             unregisterFileViewerZoomProvider(root);
             target.replaceChildren();
         }

package/dist/codeStyle.d.ts

@@ -1 +1 @@
-export declare const codeStyle = "\n.code-viewer{min-height:100%;--code-bg:#f6f8fa;--code-toolbar-bg:rgba(255,255,255,.92);--code-border:rgba(31,35,40,.12);--code-text:#24292f;--code-muted:#57606a;--code-keyword:#cf222e;--code-title:#8250df;--code-string:#0a3069;--code-number:#0550ae;--code-comment:#6e7781;--code-attr:#953800;--code-built-in:#116329;background:var(--code-bg);color:var(--code-text);box-sizing:border-box}\n.code-toolbar{position:sticky;top:0;z-index:1;display:flex;height:42px;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;border-bottom:1px solid var(--code-border);background:var(--code-toolbar-bg);backdrop-filter:blur(12px);box-sizing:border-box}\n.code-toolbar span,.code-toolbar strong{color:var(--code-muted);font-size:12px;font-weight:700;letter-spacing:0}\n.code-area{display:block;min-width:min-content;margin:0;padding:18px 20px 28px;overflow:auto;background:transparent;box-sizing:border-box}\n.code-area--line-numbers{display:grid;grid-template-columns:max-content max-content;padding:18px 0 28px}\n.code-line-numbers{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}\n.code-area.code-area--line-numbers code{padding:0 20px}\n.code-area code{display:block;padding:0;overflow:visible;background:transparent;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;tab-size:2;white-space:pre}\n.code-area .hljs-comment,.code-area .hljs-quote{color:var(--code-comment)}\n.code-area .hljs-keyword,.code-area .hljs-selector-tag,.code-area .hljs-subst{color:var(--code-keyword)}\n.code-area .hljs-string,.code-area .hljs-doctag,.code-area .hljs-regexp{color:var(--code-string)}\n.code-area .hljs-title,.code-area .hljs-section,.code-area .hljs-selector-id{color:var(--code-title);font-weight:700}\n.code-area .hljs-number,.code-area .hljs-literal,.code-area .hljs-variable,.code-area .hljs-template-variable{color:var(--code-number)}\n.code-area .hljs-attr,.code-area .hljs-attribute,.code-area .hljs-name,.code-area .hljs-selector-class{color:var(--code-attr)}\n.code-area .hljs-built_in,.code-area .hljs-type,.code-area .hljs-class .hljs-title{color:var(--code-built-in)}\n[data-viewer-theme='dark'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}\n@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}}\n";
+export declare const codeStyle = "\n.code-viewer{min-height:100%;--code-bg:#f6f8fa;--code-toolbar-bg:rgba(255,255,255,.92);--code-border:rgba(31,35,40,.12);--code-text:#24292f;--code-muted:#57606a;--code-keyword:#cf222e;--code-title:#8250df;--code-string:#0a3069;--code-number:#0550ae;--code-comment:#6e7781;--code-attr:#953800;--code-built-in:#116329;--code-accent:#0969da;--code-accent-border:rgba(9,105,218,.28);--code-accent-soft:rgba(9,105,218,.1);background:var(--code-bg);color:var(--code-text);box-sizing:border-box}\n.code-toolbar{position:sticky;top:0;z-index:2;display:flex;height:42px;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;border-bottom:1px solid var(--code-border);background:var(--code-toolbar-bg);backdrop-filter:blur(12px);box-sizing:border-box}\n.code-toolbar span,.code-toolbar strong{color:var(--code-muted);font-size:12px;font-weight:700;letter-spacing:0}\n.code-toolbar-meta{display:inline-flex;min-width:0;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}\n.code-toolbar-meta>span{overflow:hidden;text-overflow:ellipsis}\n.code-format-status{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px solid var(--code-accent-border);border-radius:999px;background:var(--code-accent-soft);color:var(--code-accent)!important;font-size:11px!important}\n.code-format-toggle{min-height:26px;padding:0 9px;border:1px solid var(--code-border);border-radius:6px;background:var(--code-bg);color:var(--code-text);font:600 11px/1.2 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer}\n.code-format-toggle:hover{border-color:var(--code-accent);color:var(--code-accent)}\n.code-format-toggle:focus-visible{outline:2px solid var(--code-accent);outline-offset:2px}\n.code-area{display:block;min-width:min-content;margin:0;padding:18px 20px 28px;overflow:auto;background:transparent;box-sizing:border-box}\n.code-area--line-numbers{display:grid;grid-template-columns:max-content max-content;padding:18px 0 28px}\n.code-line-numbers{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}\n.code-area.code-area--line-numbers code{padding:0 20px}\n.code-area code{display:block;padding:0;overflow:visible;background:transparent;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;tab-size:2;white-space:pre}\n.code-viewer--wrap-lines .code-area{width:100%;min-width:0;overflow-x:hidden}\n.code-viewer--wrap-lines .code-area code{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}\n.code-area--wrapped-line-numbers{display:block;padding:18px 0 28px}\n.code-area--wrapped-line-numbers code{width:100%;padding:0;white-space:normal!important}\n.code-source-line{display:grid;width:100%;min-width:0;grid-template-columns:max-content minmax(0,1fr);align-items:stretch;min-height:1.7em}\n.code-source-line-number{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font:inherit;line-height:inherit;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}\n.code-source-line-content{display:block;min-width:0;padding:0 20px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;box-sizing:border-box}\n.code-source-line-content:empty::after{content:' '}\n.code-area .hljs-comment,.code-area .hljs-quote{color:var(--code-comment)}\n.code-area .hljs-keyword,.code-area .hljs-selector-tag,.code-area .hljs-subst{color:var(--code-keyword)}\n.code-area .hljs-string,.code-area .hljs-doctag,.code-area .hljs-regexp{color:var(--code-string)}\n.code-area .hljs-title,.code-area .hljs-section,.code-area .hljs-selector-id{color:var(--code-title);font-weight:700}\n.code-area .hljs-number,.code-area .hljs-literal,.code-area .hljs-variable,.code-area .hljs-template-variable{color:var(--code-number)}\n.code-area .hljs-attr,.code-area .hljs-attribute,.code-area .hljs-name,.code-area .hljs-selector-class{color:var(--code-attr)}\n.code-area .hljs-built_in,.code-area .hljs-type,.code-area .hljs-class .hljs-title{color:var(--code-built-in)}\n[data-viewer-theme='dark'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787;--code-accent:#58a6ff;--code-accent-border:rgba(88,166,255,.32);--code-accent-soft:rgba(56,139,253,.15)}\n@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787;--code-accent:#58a6ff;--code-accent-border:rgba(88,166,255,.32);--code-accent-soft:rgba(56,139,253,.15)}}\n";

package/dist/codeStyle.js

@@ -1,12 +1,26 @@
 export const codeStyle = `
-.code-viewer{min-height:100%;--code-bg:#f6f8fa;--code-toolbar-bg:rgba(255,255,255,.92);--code-border:rgba(31,35,40,.12);--code-text:#24292f;--code-muted:#57606a;--code-keyword:#cf222e;--code-title:#8250df;--code-string:#0a3069;--code-number:#0550ae;--code-comment:#6e7781;--code-attr:#953800;--code-built-in:#116329;background:var(--code-bg);color:var(--code-text);box-sizing:border-box}
-.code-toolbar{position:sticky;top:0;z-index:1;display:flex;height:42px;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;border-bottom:1px solid var(--code-border);background:var(--code-toolbar-bg);backdrop-filter:blur(12px);box-sizing:border-box}
+.code-viewer{min-height:100%;--code-bg:#f6f8fa;--code-toolbar-bg:rgba(255,255,255,.92);--code-border:rgba(31,35,40,.12);--code-text:#24292f;--code-muted:#57606a;--code-keyword:#cf222e;--code-title:#8250df;--code-string:#0a3069;--code-number:#0550ae;--code-comment:#6e7781;--code-attr:#953800;--code-built-in:#116329;--code-accent:#0969da;--code-accent-border:rgba(9,105,218,.28);--code-accent-soft:rgba(9,105,218,.1);background:var(--code-bg);color:var(--code-text);box-sizing:border-box}
+.code-toolbar{position:sticky;top:0;z-index:2;display:flex;height:42px;align-items:center;justify-content:space-between;gap:16px;padding:0 16px;border-bottom:1px solid var(--code-border);background:var(--code-toolbar-bg);backdrop-filter:blur(12px);box-sizing:border-box}
 .code-toolbar span,.code-toolbar strong{color:var(--code-muted);font-size:12px;font-weight:700;letter-spacing:0}
+.code-toolbar-meta{display:inline-flex;min-width:0;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}
+.code-toolbar-meta>span{overflow:hidden;text-overflow:ellipsis}
+.code-format-status{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border:1px solid var(--code-accent-border);border-radius:999px;background:var(--code-accent-soft);color:var(--code-accent)!important;font-size:11px!important}
+.code-format-toggle{min-height:26px;padding:0 9px;border:1px solid var(--code-border);border-radius:6px;background:var(--code-bg);color:var(--code-text);font:600 11px/1.2 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;cursor:pointer}
+.code-format-toggle:hover{border-color:var(--code-accent);color:var(--code-accent)}
+.code-format-toggle:focus-visible{outline:2px solid var(--code-accent);outline-offset:2px}
 .code-area{display:block;min-width:min-content;margin:0;padding:18px 20px 28px;overflow:auto;background:transparent;box-sizing:border-box}
 .code-area--line-numbers{display:grid;grid-template-columns:max-content max-content;padding:18px 0 28px}
 .code-line-numbers{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}
 .code-area.code-area--line-numbers code{padding:0 20px}
 .code-area code{display:block;padding:0;overflow:visible;background:transparent;color:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono',monospace;font-size:var(--code-font-size,13px);line-height:1.7;tab-size:2;white-space:pre}
+.code-viewer--wrap-lines .code-area{width:100%;min-width:0;overflow-x:hidden}
+.code-viewer--wrap-lines .code-area code{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
+.code-area--wrapped-line-numbers{display:block;padding:18px 0 28px}
+.code-area--wrapped-line-numbers code{width:100%;padding:0;white-space:normal!important}
+.code-source-line{display:grid;width:100%;min-width:0;grid-template-columns:max-content minmax(0,1fr);align-items:stretch;min-height:1.7em}
+.code-source-line-number{position:sticky;left:0;z-index:1;display:block;min-width:4ch;padding:0 12px 0 16px;border-right:1px solid var(--code-border);background:var(--code-bg);color:var(--code-muted);font:inherit;line-height:inherit;text-align:right;white-space:pre;user-select:none;box-sizing:border-box}
+.code-source-line-content{display:block;min-width:0;padding:0 20px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;box-sizing:border-box}
+.code-source-line-content:empty::after{content:' '}
 .code-area .hljs-comment,.code-area .hljs-quote{color:var(--code-comment)}
 .code-area .hljs-keyword,.code-area .hljs-selector-tag,.code-area .hljs-subst{color:var(--code-keyword)}
 .code-area .hljs-string,.code-area .hljs-doctag,.code-area .hljs-regexp{color:var(--code-string)}
@@ -14,6 +28,6 @@ export const codeStyle = `
 .code-area .hljs-number,.code-area .hljs-literal,.code-area .hljs-variable,.code-area .hljs-template-variable{color:var(--code-number)}
 .code-area .hljs-attr,.code-area .hljs-attribute,.code-area .hljs-name,.code-area .hljs-selector-class{color:var(--code-attr)}
 .code-area .hljs-built_in,.code-area .hljs-type,.code-area .hljs-class .hljs-title{color:var(--code-built-in)}
-[data-viewer-theme='dark'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}
-@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787}}
+[data-viewer-theme='dark'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787;--code-accent:#58a6ff;--code-accent-border:rgba(88,166,255,.32);--code-accent-soft:rgba(56,139,253,.15)}
+@media (prefers-color-scheme:dark){[data-viewer-theme='system'] .code-viewer{--code-bg:#0d1117;--code-toolbar-bg:rgba(13,17,23,.92);--code-border:rgba(139,148,158,.24);--code-text:#e6edf3;--code-muted:#8b949e;--code-keyword:#ff7b72;--code-title:#d2a8ff;--code-string:#a5d6ff;--code-number:#79c0ff;--code-comment:#8b949e;--code-attr:#ffa657;--code-built-in:#7ee787;--code-accent:#58a6ff;--code-accent-border:rgba(88,166,255,.32);--code-accent-soft:rgba(56,139,253,.15)}}
 `;

package/dist/gitBundle.js

@@ -1,5 +1,6 @@
 import { createFileViewerTranslator, createFileViewerZoomChangeEmitter as createZoomChangeEmitter, registerFileViewerZoomProvider, unregisterFileViewerZoomProvider } from '@file-viewer/core';
-import { Inflate } from 'pako';
+import { getFileViewerPakoLoader } from './optionalCapabilities.js';
+let Inflate = null;
 const textDecoder = new TextDecoder('utf-8');
 const asciiDecoder = new TextDecoder('latin1');
 const bundleStyle = `
@@ -135,6 +136,8 @@ const readOfsDeltaBase = (bytes, start) => {
     return { value, offset };
 };
 const inflateObject = (bytes, start) => {
+    if (!Inflate)
+        throw new Error('Git bundle support is opt-in. Run `npx file-viewer-cli add text-tools --write`, then `npx file-viewer-cli install --yes`.');
     const inflator = new Inflate();
     let offset = start;
     while (!inflator.ended && offset < bytes.length) {
@@ -476,6 +479,12 @@ const renderMeta = (documentRef, panel, model, t) => {
     }
 };
 export default async function renderGitBundle(buffer, target, type = 'bundle', context) {
+    const loadPako = getFileViewerPakoLoader();
+    if (!loadPako) {
+        throw new Error('Git bundle support is opt-in. Run `npx file-viewer-cli add text-tools --write`, then `npx file-viewer-cli install --yes`.');
+    }
+    ;
+    ({ Inflate } = await loadPako());
     const documentRef = target.ownerDocument || document;
     const t = createFileViewerTranslator(context === null || context === void 0 ? void 0 : context.options);
     const model = await parseBundleModel(buffer, t);

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 import { type FileRenderHandler, type FileViewerRenderedInstance, type FileViewerRendererPlugin, type RendererDefinition } from '@file-viewer/core';
+export { getFileViewerMermaidLoader, getFileViewerDiffToHtml, getFileViewerPakoLoader, registerFileViewerDiffToHtml, registerFileViewerMermaidLoader, registerFileViewerPakoLoader, } from './optionalCapabilities.js';
+export type { FileViewerMermaidLoader, FileViewerMermaidModule, FileViewerDiffToHtml, FileViewerPakoModule, } from './optionalCapabilities.js';
+export { sanitizeFileViewerRichHtml } from './sanitizeHtml.js';
 export declare const textRendererDefinitions: RendererDefinition[];
 export declare const renderFileViewerCode: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;
 export declare const renderFileViewerMarkdown: FileRenderHandler<FileViewerRenderedInstance, HTMLDivElement>;

package/dist/index.js

@@ -1,4 +1,6 @@
 import { DEFAULT_RENDERER_DEFINITIONS, } from '@file-viewer/core';
+export { getFileViewerMermaidLoader, getFileViewerDiffToHtml, getFileViewerPakoLoader, registerFileViewerDiffToHtml, registerFileViewerMermaidLoader, registerFileViewerPakoLoader, } from './optionalCapabilities.js';
+export { sanitizeFileViewerRichHtml } from './sanitizeHtml.js';
 const textRendererIds = ['code', 'markdown'];
 const textDefinitions = DEFAULT_RENDERER_DEFINITIONS.filter(definition => textRendererIds.includes(definition.id));
 if (textDefinitions.length !== textRendererIds.length) {