omni-viewer-core 0.20.0 → 0.21.0

package/README.md

@@ -13,7 +13,7 @@ models, viewers mount into a DOM element, and everything host-specific
 ## Supported formats
 
 - **Documents** — PDF, Word (DOCX and legacy DOC), HWP, PowerPoint (PPTX and
-  legacy PPT), Markdown, Jupyter Notebook (.ipynb), EPUB e-books (2 and 3),
+  legacy PPT), HTML, Markdown, Jupyter Notebook (.ipynb), EPUB e-books (2 and 3),
   LaTeX (structure and math preview, not typesetting)
 - **Data & spreadsheets** — Excel, CSV/TSV, JSON, JSONL/NDJSON, YAML, TOML, XML,
   Parquet, Avro, HDF5, MATLAB MAT, NumPy (NPY/NPZ), Safetensors, GGUF, ONNX, TFLite/LiteRT,
@@ -28,6 +28,12 @@ models, viewers mount into a DOM element, and everything host-specific
 - **Diagrams & GIS** — Mermaid, PlantUML, ESRI Shapefile
 - **Archives** — ZIP-family listing and safe entry preview
 
+The HTML viewer handles `.html` and `.htm` files with preview and source tabs.
+The preview runs in a sandboxed iframe with scripts, external resources, and
+navigation removed or blocked; inline styles and embedded data images remain.
+Files over 8 MiB show a bounded source preview. Very dense markup opens in
+source view to keep parsing responsive.
+
 ## Install
 
 ```sh

package/dist/i18n/catalog.en.js

@@ -1221,6 +1221,12 @@ export const CATALOG_EN = {
     'image.spriteDetection.failed': 'Sprite detection failed.',
     'image.saveAsPng': 'Save as PNG',
     'image.saveAsPng.note': 'The edited image is saved as PNG (.png).',
+    // HTML viewer
+    'html.title': 'HTML',
+    'html.preview': 'Preview',
+    'html.source': 'Source',
+    'html.tooLarge': 'Preview is unavailable above {limit} bytes. Showing the first part of the source.',
+    'html.tooComplex': 'This document is too complex to preview safely. Showing the source.',
     // Fallback viewer
     'fallback.title.text': 'Text preview',
     'fallback.title.hex': 'Hex preview',

package/dist/i18n/catalog.ja.js

@@ -1076,6 +1076,9 @@ export const CATALOG_JA = {
     'image.tool.detectSprites.unavailable': 'この環境ではスプライト検出を利用できません',
     'image.spriteDetection.working': 'スプライトを検出中…', 'image.spriteDetection.failed': 'スプライトの検出に失敗しました。',
     'image.saveAsPng': 'PNGとして保存', 'image.saveAsPng.note': '編集した画像はPNG（.png）として保存されます。',
+    'html.title': 'HTML', 'html.preview': 'プレビュー', 'html.source': 'ソース',
+    'html.tooLarge': '{limit}バイトを超えるためプレビューできません。ソースの先頭を表示します。',
+    'html.tooComplex': '文書が複雑すぎるため安全にプレビューできません。ソースを表示します。',
     'fallback.title.text': 'テキストプレビュー', 'fallback.title.hex': '16進数プレビュー',
     'fallback.truncated': 'プレビューは先頭{bytes}バイトまでに切り詰められました。',
     'fallback.reason.missing-dependency': 'この環境では完全なビューアーを読み込めませんでした。',

package/dist/i18n/catalog.ko.js

@@ -1202,6 +1202,9 @@ export const CATALOG_KO = {
     'image.saveAsPng': 'PNG로 저장',
     'image.saveAsPng.note': '편집된 이미지는 PNG(.png)로 저장됩니다.',
     // 폴백 뷰어
+    'html.title': 'HTML', 'html.preview': '미리보기', 'html.source': '소스',
+    'html.tooLarge': '{limit}바이트를 초과해 미리보기를 표시할 수 없습니다. 소스의 앞부분을 표시합니다.',
+    'html.tooComplex': '문서가 너무 복잡해 미리보기를 표시할 수 없습니다. 소스를 표시합니다.',
     'fallback.title.text': '텍스트 미리보기',
     'fallback.title.hex': '16진수 미리보기',
     'fallback.truncated': '미리보기가 처음 {bytes}바이트로 잘렸습니다.',

package/dist/i18n/catalog.zh-cn.js

@@ -1042,6 +1042,9 @@ export const CATALOG_ZH_CN = {
     'image.tool.detectSprites': '检测精灵图', 'image.tool.detectSprites.unavailable': '此平台无法检测精灵图',
     'image.spriteDetection.working': '正在检测精灵图…', 'image.spriteDetection.failed': '精灵图检测失败。',
     'image.saveAsPng': '另存为 PNG', 'image.saveAsPng.note': '编辑后的图像将保存为 PNG（.png）。',
+    'html.title': 'HTML', 'html.preview': '预览', 'html.source': '源代码',
+    'html.tooLarge': '文件超过 {limit} 字节，无法预览。正在显示源代码的开头部分。',
+    'html.tooComplex': '文档过于复杂，无法安全预览。正在显示源代码。',
     'fallback.title.text': '文本预览', 'fallback.title.hex': '十六进制预览',
     'fallback.truncated': '预览已截断，仅显示前 {bytes} 字节。',
     'fallback.reason.missing-dependency': '此平台无法加载完整查看器。',

package/dist/registry/index.d.ts

@@ -124,11 +124,12 @@ export declare const HWP_VIEWER_DESCRIPTOR: ViewerDescriptor;
  */
 export declare const IMAGE_VIEWER_DESCRIPTOR: ViewerDescriptor;
 export declare const MARKDOWN_VIEWER_DESCRIPTOR: ViewerDescriptor;
+export declare const HTML_VIEWER_DESCRIPTOR: ViewerDescriptor;
 export declare const ARCHIVE_MAGIC_SIGNATURES: readonly MagicSignature[];
 /** Archive is intentionally lower priority than Office container viewers. */
 export declare const ARCHIVE_VIEWER_DESCRIPTOR: ViewerDescriptor;
 export declare const CORE_VIEWER_DESCRIPTORS: readonly ViewerDescriptor[];
-export { looksLikeHar, looksLikeNotebook, looksLikeJsonDocument, looksLikeJsonl, looksLikeLatex, looksLikeOpenVinoIr, looksLikeProto, looksLikeXml, sniffTextViewer } from './sniff.js';
+export { looksLikeHar, looksLikeNotebook, looksLikeJsonDocument, looksLikeJsonl, looksLikeHtml, looksLikeLatex, looksLikeOpenVinoIr, looksLikeProto, looksLikeXml, sniffTextViewer } from './sniff.js';
 export { CONTAINER_SNIFF_BYTES, OFFICE_CONTAINER_BY_EXT, OLE_MAGIC, ZIP_MAGIC, sniffContainer, type ContainerKind } from './container.js';
 export { probeContainer } from './probe.js';
 export interface DetectionResult {

package/dist/registry/index.js

@@ -240,6 +240,10 @@ export const MARKDOWN_VIEWER_DESCRIPTOR = {
     extensions: ['md', 'markdown', 'mdown', 'mkdn', 'mkd'], priority: 10,
     requiredServices: [], optionalServices: ['clipboard', 'navigation', 'documentAssets', 'writeback', 'save']
 };
+export const HTML_VIEWER_DESCRIPTOR = {
+    id: 'html', displayNameKey: 'html.title', extensions: ['html', 'htm'], priority: 10,
+    requiredServices: [], optionalServices: []
+};
 export const ARCHIVE_MAGIC_SIGNATURES = [
     [{ offset: 0, bytes: [0x50, 0x4b, 0x03, 0x04] }], [{ offset: 0, bytes: [0x50, 0x4b, 0x05, 0x06] }],
     [{ offset: 257, bytes: [0x75, 0x73, 0x74, 0x61, 0x72] }], [{ offset: 0, bytes: [0x1f, 0x8b] }],
@@ -294,6 +298,7 @@ export const CORE_VIEWER_DESCRIPTORS = [
     EXCEL_VIEWER_DESCRIPTOR,
     IMAGE_VIEWER_DESCRIPTOR,
     MARKDOWN_VIEWER_DESCRIPTOR,
+    HTML_VIEWER_DESCRIPTOR,
     NOTEBOOK_VIEWER_DESCRIPTOR,
     ARCHIVE_VIEWER_DESCRIPTOR,
     CSV_VIEWER_DESCRIPTOR,
@@ -306,7 +311,7 @@ export const CORE_VIEWER_DESCRIPTORS = [
     LATEX_VIEWER_DESCRIPTOR,
     FALLBACK_VIEWER_DESCRIPTOR
 ];
-export { looksLikeHar, looksLikeNotebook, looksLikeJsonDocument, looksLikeJsonl, looksLikeLatex, looksLikeOpenVinoIr, looksLikeProto, looksLikeXml, sniffTextViewer } from './sniff.js';
+export { looksLikeHar, looksLikeNotebook, looksLikeJsonDocument, looksLikeJsonl, looksLikeHtml, looksLikeLatex, looksLikeOpenVinoIr, looksLikeProto, looksLikeXml, sniffTextViewer } from './sniff.js';
 export { CONTAINER_SNIFF_BYTES, OFFICE_CONTAINER_BY_EXT, OLE_MAGIC, ZIP_MAGIC, sniffContainer } from './container.js';
 export { probeContainer } from './probe.js';
 /**

package/dist/registry/sniff.d.ts

@@ -28,6 +28,8 @@ export declare function looksLikeProto(text: string): boolean;
  * plain TeX files the viewer cannot read structurally (docs/viewers/latex.md §1).
  */
 export declare function looksLikeLatex(text: string): boolean;
+/** Claim only recognizable HTML documents; fragments need a file extension. */
+export declare function looksLikeHtml(text: string): boolean;
 /**
  * True if `text` starts like an XML document: after a BOM, whitespace, the
  * declaration, comments, processing instructions and a DOCTYPE comes a start
@@ -43,4 +45,4 @@ export declare function looksLikeXml(text: string): boolean;
  * multi-line object streams so a `{…}\n{…}` file is never mis-claimed as JSON;
  * if no jsonl viewer is registered the caller falls through to fallback.
  */
-export declare function sniffTextViewer(text: string): 'jsonl' | 'har' | 'notebook' | 'json' | 'openvino' | 'xml' | 'proto' | 'latex' | null;
+export declare function sniffTextViewer(text: string): 'jsonl' | 'har' | 'notebook' | 'json' | 'html' | 'openvino' | 'xml' | 'proto' | 'latex' | null;

package/dist/registry/sniff.js

@@ -86,6 +86,12 @@ export function looksLikeLatex(text) {
     const sample = text.slice(0, 64 * 1024).replace(/(^|[^\\])%.*$/gm, '$1');
     return /(^|[^\\])\\documentclass\s*(\[[^\]]*\])?\s*\{[^}]+\}/.test(sample);
 }
+/** Claim only recognizable HTML documents; fragments need a file extension. */
+export function looksLikeHtml(text) {
+    const sample = text.slice(0, 64 * 1024).replace(/^\uFEFF?\s*/, '');
+    const start = sample.replace(/^(?:<!--[\s\S]*?-->\s*)*/, '');
+    return /^<!doctype\s+html(?:\s|>|\[)/i.test(start) || /^<html(?:\s|>)/i.test(start);
+}
 /**
  * True if `text` starts like an XML document: after a BOM, whitespace, the
  * declaration, comments, processing instructions and a DOCTYPE comes a start
@@ -158,6 +164,8 @@ export function sniffTextViewer(text) {
         return 'notebook';
     if (looksLikeJsonDocument(text))
         return 'json';
+    if (looksLikeHtml(text))
+        return 'html';
     // An OpenVINO IR is `.xml`, an extension no viewer claims, so its `<net
     // version><layers>` root is the only route to the viewer.
     if (looksLikeOpenVinoIr(text))

package/dist/styles/html.css

@@ -0,0 +1,15 @@
+
+.omni-viewer--html{all:initial}
+:host,.omni-viewer--html{display:block;height:100%;box-sizing:border-box;color:var(--omni-fg,#d4d4d4);background:var(--omni-bg,#1e1e1e);font:var(--omni-font-size,13px)/1.4 var(--omni-font,system-ui,sans-serif)}
+.omni-html,.omni-html *{box-sizing:border-box}
+.omni-html{display:flex;flex-direction:column;height:100%;min-height:0}
+.omni-html__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--omni-border,#3c3c3c)}
+.omni-html__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.omni-html__tabs{display:flex;gap:4px;flex:none}
+.omni-html__tabs button{font:inherit;color:inherit;background:transparent;border:1px solid var(--omni-border,#3c3c3c);border-radius:4px;padding:4px 10px;cursor:pointer}
+.omni-html__tabs button[aria-pressed=true]{background:var(--omni-accent,#0e639c);color:var(--omni-accent-fg,#fff)}
+.omni-html__tabs button:disabled{opacity:.5;cursor:default}
+.omni-html__preview{display:block;flex:1;min-height:0;width:100%;border:0;background:#fff}
+.omni-html__source{flex:1;min-height:0;overflow:auto;margin:0;padding:12px;font:13px/1.5 var(--omni-font-mono,monospace);white-space:pre;tab-size:4}
+.omni-html__note{margin:0;padding:8px 12px;color:var(--omni-warning-fg,#cca700);border-bottom:1px solid var(--omni-border,#3c3c3c)}
+.omni-html [hidden]{display:none!important}

package/dist/viewers/html/index.d.ts

@@ -0,0 +1,19 @@
+import type { HostContext } from '../../host/index.js';
+import { type MountOptions, type ViewerHandle, type ViewerInput } from '../types.js';
+export { htmlViewerCss } from './styles.js';
+export declare const HTML_VIEWER_META: {
+    id: string;
+    displayNameKey: string;
+    extensions: string[];
+    priority: number;
+    requiredServices: readonly [];
+    optionalServices: readonly [];
+    inputOwnership: "borrows";
+};
+/** Avoid decoding and embedding an unbounded document in both the source pane and iframe. */
+export declare const HTML_PREVIEW_MAX_BYTES: number;
+export declare const HTML_PREVIEW_MAX_DELIMITERS = 20000;
+/** Honor a BOM or an early HTML charset declaration before decoding bytes. */
+export declare function decodeHtmlText(data: Uint8Array): string;
+export declare function htmlPreviewDocument(source: string): string;
+export declare function mountHtmlViewer(input: ViewerInput, container: HTMLElement, ctx: HostContext, options?: MountOptions): Promise<ViewerHandle>;

package/dist/viewers/html/index.js

@@ -0,0 +1,254 @@
+import { MountAbortedError, VIEWER_ROOT_CLASS } from '../types.js';
+import { htmlViewerCss } from './styles.js';
+export { htmlViewerCss } from './styles.js';
+export const HTML_VIEWER_META = {
+    id: 'html', displayNameKey: 'html.title', extensions: ['html', 'htm'], priority: 10,
+    requiredServices: [], optionalServices: [],
+    inputOwnership: 'borrows'
+};
+/** Avoid decoding and embedding an unbounded document in both the source pane and iframe. */
+export const HTML_PREVIEW_MAX_BYTES = 8 * 1024 * 1024;
+export const HTML_PREVIEW_MAX_DELIMITERS = 20_000;
+const SOURCE_HEAD_BYTES = 256 * 1024;
+function hasExcessiveMarkup(source) {
+    // Every parsed element needs source markup. Count delimiters before any
+    // DOM parsing so dense, small files cannot create an unbounded DOM tree.
+    let count = 0;
+    for (let index = source.indexOf('<'); index !== -1; index = source.indexOf('<', index + 1)) {
+        if (++count > HTML_PREVIEW_MAX_DELIMITERS)
+            return true;
+    }
+    return false;
+}
+// The iframe has an opaque origin and no sandbox permissions. This policy is
+// deliberately inside srcdoc as well: host CSPs cannot be relied on to protect
+// the frame in every adapter. Inline CSS and embedded images remain usable.
+const PREVIEW_CSP = "default-src 'none'; img-src data:; style-src 'unsafe-inline'; font-src data:; object-src 'none'; frame-src 'none'; form-action 'none'; base-uri 'none'; navigate-to 'none'";
+function tagEnd(source, from) {
+    let quote = '';
+    for (let index = from; index < source.length; index++) {
+        const char = source[index];
+        if (quote) {
+            if (char === quote)
+                quote = '';
+        }
+        else if (char === '"' || char === "'")
+            quote = char;
+        else if (char === '>')
+            return index;
+    }
+    return -1;
+}
+/** Scan opening tags without mistaking comments, attributes, or raw text for markup. */
+function* openingTags(source) {
+    let index = 0;
+    let templateDepth = 0;
+    while (index < source.length) {
+        const start = source.indexOf('<', index);
+        if (start < 0)
+            return;
+        if (source.startsWith('<!--', start)) {
+            const end = source.indexOf('-->', start + 4);
+            index = end < 0 ? source.length : end + 3;
+            continue;
+        }
+        const templateEnd = /^<\/template(?=[\s/>])/i.exec(source.slice(start, start + 32));
+        if (templateEnd && templateDepth > 0) {
+            const end = tagEnd(source, start + templateEnd[0].length);
+            if (end < 0)
+                return;
+            templateDepth--;
+            index = end + 1;
+            continue;
+        }
+        const found = /^<([a-z][\w:-]*)\b/i.exec(source.slice(start, start + 64));
+        if (!found) {
+            index = start + 1;
+            continue;
+        }
+        const name = found[1].toLowerCase();
+        const end = tagEnd(source, start + found[0].length);
+        if (end < 0)
+            return;
+        index = end + 1;
+        if (name === 'template') {
+            templateDepth++;
+            continue;
+        }
+        if (templateDepth === 0)
+            yield { name, attributes: source.slice(start + found[0].length, end) };
+        if (['script', 'style', 'textarea', 'title', 'xmp', 'noscript', 'noembed', 'noframes'].includes(name)) {
+            const closing = new RegExp(`</${name}(?=[\\s/>])`, 'ig');
+            closing.lastIndex = index;
+            const match = closing.exec(source);
+            const closeEnd = match ? tagEnd(source, closing.lastIndex) : -1;
+            index = closeEnd < 0 ? source.length : closeEnd + 1;
+        }
+    }
+}
+function safeRootAttributes(source, tag) {
+    // Parsing a complete document in a template drops its root elements. Read
+    // their opening tags separately so selectors like body.page still work.
+    let match;
+    for (const candidate of openingTags(source)) {
+        if (candidate.name === tag) {
+            match = candidate;
+            break;
+        }
+    }
+    if (!match)
+        return '';
+    const holder = document.createElement('template');
+    holder.innerHTML = `<div${match.attributes}></div>`;
+    const element = holder.content.firstElementChild;
+    if (!element)
+        return '';
+    return [...element.attributes]
+        .filter(({ name }) => ['class', 'id', 'lang', 'dir', 'style'].includes(name) || name.startsWith('data-'))
+        .map(({ name, value }) => ` ${name}="${value.replace(/&/g, '&amp;').replace(/"/g, '&quot;')}\"`)
+        .join('');
+}
+/** Honor a BOM or an early HTML charset declaration before decoding bytes. */
+export function decodeHtmlText(data) {
+    let encoding = 'utf-8';
+    if (data[0] === 0xff && data[1] === 0xfe)
+        encoding = 'utf-16le';
+    else if (data[0] === 0xfe && data[1] === 0xff)
+        encoding = 'utf-16be';
+    else if (!(data[0] === 0xef && data[1] === 0xbb && data[2] === 0xbf)) {
+        const head = Array.from(data.subarray(0, 1024), byte => String.fromCharCode(byte)).join('');
+        for (const tag of openingTags(head)) {
+            if (tag.name !== 'meta')
+                continue;
+            const holder = document.createElement('template');
+            holder.innerHTML = `<meta${tag.attributes}>`;
+            const meta = holder.content.firstElementChild;
+            const contentCharset = /charset\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s;]+))/i.exec(meta?.getAttribute('content') ?? '');
+            const declared = meta?.getAttribute('charset') ??
+                (meta?.getAttribute('http-equiv')?.toLowerCase() === 'content-type'
+                    ? contentCharset?.[1] ?? contentCharset?.[2] ?? contentCharset?.[3]
+                    : undefined);
+            if (declared) {
+                encoding = declared;
+                break;
+            }
+        }
+    }
+    try {
+        return new TextDecoder(encoding).decode(data);
+    }
+    catch {
+        return new TextDecoder('utf-8').decode(data);
+    }
+}
+export function htmlPreviewDocument(source) {
+    // Template contents are inert and do not load resources while being parsed.
+    // Strip navigation and resource attributes too: frame self-navigation is
+    // possible in some engines even with an empty sandbox and navigate-to CSP.
+    const template = document.createElement('template');
+    template.innerHTML = source;
+    // <noscript> changes parsing mode when the sandbox disables scripts: its
+    // text can become active markup in the iframe, so remove the whole node.
+    // Nested templates can become declarative shadow roots when reparsed in
+    // srcdoc, and their children are invisible to querySelectorAll here.
+    template.content.querySelectorAll('script,noscript,template,base,link,meta,iframe,frame,frameset,object,embed,form,portal').forEach(node => node.remove());
+    template.content.querySelectorAll('*').forEach(node => {
+        for (const attribute of [...node.attributes]) {
+            const name = attribute.name.toLowerCase();
+            const value = attribute.value.trim();
+            if (name.startsWith('on') || ['srcdoc', 'srcset', 'ping', 'action', 'formaction', 'poster', 'background'].includes(name)) {
+                node.removeAttributeNode(attribute);
+            }
+            else if (name === 'href' || name === 'xlink:href') {
+                if (!value.startsWith('#'))
+                    node.removeAttributeNode(attribute);
+            }
+            else if (name === 'src') {
+                if (node.localName !== 'img' || !/^data:image\/(?:png|jpeg|gif|webp|svg\+xml)(?:;[^,]*)?,/i.test(value))
+                    node.removeAttributeNode(attribute);
+            }
+        }
+    });
+    // The policy is before all untrusted content, including malformed heads.
+    return `<!doctype html><html${safeRootAttributes(source, 'html')}><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="${PREVIEW_CSP}"></head><body${safeRootAttributes(source, 'body')}>${template.innerHTML}</body></html>`;
+}
+export async function mountHtmlViewer(input, container, ctx, options = {}) {
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    const isolation = options.styleIsolation ?? 'shadow';
+    let root;
+    if (isolation === 'shadow' && typeof container.attachShadow === 'function') {
+        root = container.shadowRoot ?? container.attachShadow({ mode: 'open' });
+        const style = document.createElement('style');
+        style.textContent = htmlViewerCss;
+        root.append(style);
+    }
+    else {
+        container.classList.add(VIEWER_ROOT_CLASS, 'omni-viewer--html');
+        root = container;
+    }
+    const t = ctx.i18n.t.bind(ctx.i18n);
+    const frame = document.createElement('section');
+    frame.className = 'omni-html';
+    const header = document.createElement('header');
+    header.className = 'omni-html__header';
+    const title = document.createElement('strong');
+    title.className = 'omni-html__title';
+    title.textContent = input.fileName;
+    header.append(title);
+    const tabs = document.createElement('div');
+    tabs.className = 'omni-html__tabs';
+    const previewButton = document.createElement('button');
+    previewButton.type = 'button';
+    previewButton.textContent = t('html.preview');
+    const sourceButton = document.createElement('button');
+    sourceButton.type = 'button';
+    sourceButton.textContent = t('html.source');
+    tabs.append(previewButton, sourceButton);
+    header.append(tabs);
+    frame.append(header);
+    const tooLarge = input.data.byteLength > HTML_PREVIEW_MAX_BYTES;
+    const bytes = tooLarge ? input.data.subarray(0, SOURCE_HEAD_BYTES) : input.data;
+    const source = decodeHtmlText(bytes);
+    const tooComplex = !tooLarge && hasExcessiveMarkup(source);
+    const sourceOnly = tooLarge || tooComplex;
+    const preview = document.createElement('iframe');
+    preview.className = 'omni-html__preview';
+    preview.title = t('html.preview');
+    preview.setAttribute('sandbox', '');
+    preview.referrerPolicy = 'no-referrer';
+    // An oversized document is source-only, avoiding partial active markup.
+    if (!sourceOnly)
+        preview.srcdoc = htmlPreviewDocument(source);
+    const sourcePane = document.createElement('pre');
+    sourcePane.className = 'omni-html__source';
+    sourcePane.textContent = source;
+    if (sourceOnly) {
+        const note = document.createElement('p');
+        note.className = 'omni-html__note';
+        note.textContent = tooLarge
+            ? t('html.tooLarge', { limit: HTML_PREVIEW_MAX_BYTES })
+            : t('html.tooComplex');
+        frame.append(note);
+    }
+    frame.append(preview, sourcePane);
+    root.append(frame);
+    const setView = (view) => {
+        preview.hidden = view !== 'preview';
+        sourcePane.hidden = view !== 'source';
+        previewButton.setAttribute('aria-pressed', String(view === 'preview'));
+        sourceButton.setAttribute('aria-pressed', String(view === 'source'));
+    };
+    previewButton.disabled = sourceOnly;
+    previewButton.addEventListener('click', () => setView('preview'));
+    sourceButton.addEventListener('click', () => setView('source'));
+    setView(sourceOnly ? 'source' : 'preview');
+    return {
+        dispose() {
+            preview.removeAttribute('srcdoc');
+            root.replaceChildren();
+            if (root === container)
+                container.classList.remove(VIEWER_ROOT_CLASS, 'omni-viewer--html');
+        }
+    };
+}

package/dist/viewers/html/styles.d.ts

@@ -0,0 +1 @@
+export declare const htmlViewerCss = "\n.omni-viewer--html{all:initial}\n:host,.omni-viewer--html{display:block;height:100%;box-sizing:border-box;color:var(--omni-fg,#d4d4d4);background:var(--omni-bg,#1e1e1e);font:var(--omni-font-size,13px)/1.4 var(--omni-font,system-ui,sans-serif)}\n.omni-html,.omni-html *{box-sizing:border-box}\n.omni-html{display:flex;flex-direction:column;height:100%;min-height:0}\n.omni-html__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--omni-border,#3c3c3c)}\n.omni-html__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.omni-html__tabs{display:flex;gap:4px;flex:none}\n.omni-html__tabs button{font:inherit;color:inherit;background:transparent;border:1px solid var(--omni-border,#3c3c3c);border-radius:4px;padding:4px 10px;cursor:pointer}\n.omni-html__tabs button[aria-pressed=true]{background:var(--omni-accent,#0e639c);color:var(--omni-accent-fg,#fff)}\n.omni-html__tabs button:disabled{opacity:.5;cursor:default}\n.omni-html__preview{display:block;flex:1;min-height:0;width:100%;border:0;background:#fff}\n.omni-html__source{flex:1;min-height:0;overflow:auto;margin:0;padding:12px;font:13px/1.5 var(--omni-font-mono,monospace);white-space:pre;tab-size:4}\n.omni-html__note{margin:0;padding:8px 12px;color:var(--omni-warning-fg,#cca700);border-bottom:1px solid var(--omni-border,#3c3c3c)}\n.omni-html [hidden]{display:none!important}\n";

package/dist/viewers/html/styles.js

@@ -0,0 +1,16 @@
+export const htmlViewerCss = `
+.omni-viewer--html{all:initial}
+:host,.omni-viewer--html{display:block;height:100%;box-sizing:border-box;color:var(--omni-fg,#d4d4d4);background:var(--omni-bg,#1e1e1e);font:var(--omni-font-size,13px)/1.4 var(--omni-font,system-ui,sans-serif)}
+.omni-html,.omni-html *{box-sizing:border-box}
+.omni-html{display:flex;flex-direction:column;height:100%;min-height:0}
+.omni-html__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--omni-border,#3c3c3c)}
+.omni-html__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.omni-html__tabs{display:flex;gap:4px;flex:none}
+.omni-html__tabs button{font:inherit;color:inherit;background:transparent;border:1px solid var(--omni-border,#3c3c3c);border-radius:4px;padding:4px 10px;cursor:pointer}
+.omni-html__tabs button[aria-pressed=true]{background:var(--omni-accent,#0e639c);color:var(--omni-accent-fg,#fff)}
+.omni-html__tabs button:disabled{opacity:.5;cursor:default}
+.omni-html__preview{display:block;flex:1;min-height:0;width:100%;border:0;background:#fff}
+.omni-html__source{flex:1;min-height:0;overflow:auto;margin:0;padding:12px;font:13px/1.5 var(--omni-font-mono,monospace);white-space:pre;tab-size:4}
+.omni-html__note{margin:0;padding:8px 12px;color:var(--omni-warning-fg,#cca700);border-bottom:1px solid var(--omni-border,#3c3c3c)}
+.omni-html [hidden]{display:none!important}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omni-viewer-core",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Shared parsing + rendering core for Omni Viewer (vscode / chrome / obsidian / web)",
   "type": "module",
   "license": "MIT",
@@ -399,6 +399,10 @@
       "types": "./dist/viewers/fallback/index.d.ts",
       "default": "./dist/viewers/fallback/index.js"
     },
+    "./viewers/html": {
+      "types": "./dist/viewers/html/index.d.ts",
+      "default": "./dist/viewers/html/index.js"
+    },
     "./viewers/pdf": {
       "types": "./dist/viewers/pdf/index.d.ts",
       "default": "./dist/viewers/pdf/index.js"