omni-viewer-core 0.1.0

package/dist/viewers/markdown/index.js

@@ -0,0 +1,425 @@
+import { ALLOWED_LINK_SCHEMES } from '../../host/index.js';
+import { parseMarkdown } from '../../parsers/markdown/index.js';
+import { MountAbortedError, VIEWER_ROOT_CLASS } from '../types.js';
+import { createMarkdownController } from './controller.js';
+import { maskMathSegments, mathSegmentLiteral } from './math.js';
+import { markdownViewerCss } from './styles.js';
+export { parseMarkdown } from '../../parsers/markdown/index.js';
+export { markdownViewerCss } from './styles.js';
+export { createMarkdownController } from './controller.js';
+export { maskMathSegments, mathSegmentLiteral } from './math.js';
+export const MARKDOWN_VIEWER_META = {
+    id: 'markdown', displayNameKey: 'markdown.title',
+    extensions: ['md', 'markdown', 'mdown', 'mkdn', 'mkd'], priority: 10,
+    requiredServices: [],
+    optionalServices: ['clipboard', 'navigation', 'documentAssets', 'writeback'],
+    inputOwnership: 'borrows'
+};
+const SANITIZE = {
+    USE_PROFILES: { html: true }, ADD_ATTR: ['target', 'rel'],
+    FORBID_TAGS: ['style', 'script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'textarea', 'select'],
+    FORBID_ATTR: ['style', 'srcdoc'], ALLOW_UNKNOWN_PROTOCOLS: false
+};
+const SVG_SANITIZE = {
+    USE_PROFILES: { svg: true, svgFilters: true }, ADD_TAGS: ['foreignObject'],
+    ADD_ATTR: ['dominant-baseline', 'text-anchor', 'viewBox', 'xmlns', 'role', 'aria-roledescription']
+};
+// KaTeX htmlAndMathml output: spans positioned via inline style, a MathML
+// twin for accessibility, and SVG for stretchy delimiters. `style` is allowed
+// only inside these fragments — the outer document keeps FORBID_ATTR:style.
+const MATH_SANITIZE = {
+    USE_PROFILES: { html: true, mathMl: true, svg: true },
+    ADD_ATTR: ['style', 'aria-hidden', 'encoding', 'definitionurl'],
+    FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'button', 'textarea', 'select', 'a', 'img']
+};
+export async function mountMarkdownViewer(input, container, ctx, deps, options = {}) {
+    if (options.signal?.aborted)
+        throw new MountAbortedError();
+    const parseOptions = {
+        ...(options.signal ? { signal: options.signal } : {}),
+        ...(options.limits ? { limits: options.limits } : {}),
+        ...(options.markdownLimits ? { markdownLimits: options.markdownLimits } : {})
+    };
+    const parsed = parseMarkdown(input.data, parseOptions);
+    if (parsed.result.status === 'failed')
+        throw new Error(parsed.result.failure.messageKey);
+    const doc = parsed.result.document;
+    const root = options.styleIsolation !== 'scoped' && typeof container.attachShadow === 'function'
+        ? (container.shadowRoot ?? container.attachShadow({ mode: 'open' })) : container;
+    if (root === container)
+        container.classList.add(VIEWER_ROOT_CLASS, 'omni-viewer--markdown');
+    else {
+        const style = document.createElement('style');
+        style.textContent = markdownViewerCss;
+        root.append(style);
+    }
+    const t = ctx.i18n.t.bind(ctx.i18n);
+    const controller = createMarkdownController(doc.text, doc.headings);
+    const disposers = [];
+    let assetReleases = new Set();
+    let disposed = false;
+    let renderVersion = 0;
+    let renderedHtml = '';
+    let diagramCount = 0;
+    const el = (tag, className, text) => {
+        const node = document.createElement(tag);
+        if (className)
+            node.className = className;
+        if (text !== undefined)
+            node.textContent = text;
+        return node;
+    };
+    const on = (node, type, listener) => {
+        node.addEventListener(type, listener);
+        disposers.push(() => node.removeEventListener(type, listener));
+    };
+    const button = (key, className = 'omni-markdown__button') => {
+        const node = el('button', className, t(key));
+        node.type = 'button';
+        return node;
+    };
+    const shell = el('section', `${VIEWER_ROOT_CLASS} omni-viewer--markdown omni-markdown`);
+    const header = el('header', 'omni-markdown__header');
+    const titleBox = el('div');
+    titleBox.append(el('div', 'omni-markdown__title', input.fileName), el('div', 'omni-markdown__summary'));
+    const status = el('div', 'omni-markdown__status', t('markdown.ready'));
+    header.append(titleBox, status);
+    const toolbar = el('div', 'omni-markdown__toolbar');
+    const modeGroup = el('div', 'omni-markdown__toolbar-group');
+    const modeButtons = new Map();
+    for (const [mode, key] of [['preview', 'markdown.preview'], ['split', 'markdown.split'], ['source', 'markdown.source']]) {
+        const node = button(key);
+        node.dataset.viewMode = mode;
+        modeButtons.set(mode, node);
+        modeGroup.append(node);
+    }
+    const actionGroup = el('div', 'omni-markdown__toolbar-group');
+    const renderButton = button('markdown.render', 'omni-markdown__button omni-markdown__button--primary');
+    const copyHtmlButton = button('markdown.copyHtml');
+    const copySourceButton = button('markdown.copySource');
+    const undoButton = button('markdown.undo');
+    const redoButton = button('markdown.redo');
+    actionGroup.append(renderButton, undoButton, redoButton, copyHtmlButton, copySourceButton);
+    toolbar.append(modeGroup, actionGroup);
+    const workspace = el('main', 'omni-markdown__workspace');
+    const previewPanel = el('section', 'omni-markdown__panel omni-markdown__preview-panel');
+    const previewHeader = el('div', 'omni-markdown__panel-header');
+    const previewCaption = el('span', 'omni-markdown__caption', t('markdown.rendering'));
+    previewHeader.append(el('span', undefined, t('markdown.preview')), previewCaption);
+    const preview = el('article', 'omni-markdown__preview');
+    previewPanel.append(previewHeader, preview);
+    const sourcePanel = el('section', 'omni-markdown__panel omni-markdown__source-panel');
+    const sourceHeader = el('div', 'omni-markdown__panel-header');
+    const sourceCaption = el('span', 'omni-markdown__caption', t('markdown.editable'));
+    sourceHeader.append(el('span', undefined, t('markdown.source')), sourceCaption);
+    const source = el('textarea', 'omni-markdown__source');
+    source.spellcheck = false;
+    source.value = doc.text;
+    sourcePanel.append(sourceHeader, source);
+    workspace.append(previewPanel, sourcePanel);
+    const message = el('div', 'omni-markdown__message');
+    message.hidden = true;
+    shell.append(header, toolbar, workspace, message);
+    root.append(shell);
+    const releaseAssets = () => { for (const release of assetReleases)
+        release(); assetReleases = new Set(); };
+    const setStatus = (key, kind = '') => {
+        status.textContent = t(key);
+        status.className = `omni-markdown__status${kind ? ` is-${kind}` : ''}`;
+    };
+    const showMessage = (text) => { message.textContent = text; message.hidden = !text; };
+    const syncState = () => {
+        const state = controller.state;
+        workspace.classList.toggle('is-split', state.mode === 'split');
+        previewPanel.hidden = state.mode === 'source';
+        sourcePanel.hidden = state.mode === 'preview';
+        for (const [mode, node] of modeButtons)
+            node.classList.toggle('is-active', mode === state.mode);
+        renderButton.classList.toggle('is-dirty', state.dirty);
+        undoButton.disabled = !state.canUndo;
+        redoButton.disabled = !state.canRedo;
+        sourceCaption.textContent = t(state.dirty ? 'markdown.edited' : 'markdown.editable');
+        if (state.dirty)
+            setStatus('markdown.modified');
+    };
+    const hardenContent = (version) => {
+        preview.querySelectorAll('a').forEach(anchor => {
+            const href = anchor.getAttribute('href') ?? '';
+            anchor.removeAttribute('href');
+            if (href.startsWith('#')) {
+                anchor.setAttribute('href', href);
+                return;
+            }
+            try {
+                const url = new URL(href);
+                if (!ALLOWED_LINK_SCHEMES.includes(url.protocol) || !ctx.navigation)
+                    throw new Error('blocked');
+                anchor.setAttribute('role', 'link');
+                anchor.tabIndex = 0;
+                on(anchor, 'click', (() => void ctx.navigation.openExternalUrl(href)));
+            }
+            catch {
+                anchor.setAttribute('aria-disabled', 'true');
+            }
+        });
+        preview.querySelectorAll('img').forEach(image => {
+            const path = image.getAttribute('src') ?? '';
+            image.removeAttribute('src');
+            if (!validRelativeAsset(path) || !ctx.documentAssets) {
+                image.replaceWith(document.createTextNode(image.alt || t('markdown.assetUnavailable')));
+                return;
+            }
+            void ctx.documentAssets.resolve(path).then(asset => {
+                if (!asset) {
+                    if (!disposed && version === renderVersion)
+                        image.replaceWith(document.createTextNode(image.alt || t('markdown.assetUnavailable')));
+                    return;
+                }
+                let released = false;
+                const release = () => { if (!released) {
+                    released = true;
+                    assetReleases.delete(release);
+                    asset.dispose();
+                } };
+                if (disposed || version !== renderVersion) {
+                    release();
+                    return;
+                }
+                assetReleases.add(release);
+                image.src = asset.url;
+                image.addEventListener('load', release, { once: true });
+                image.addEventListener('error', release, { once: true });
+            }).catch(() => { if (!disposed && version === renderVersion)
+                image.replaceWith(document.createTextNode(image.alt || t('markdown.assetUnavailable'))); });
+        });
+    };
+    const renderEnhancements = async (version) => {
+        diagramCount = 0;
+        const purifier = deps.createDOMPurify(window);
+        const codes = [...preview.querySelectorAll('pre > code')];
+        for (const [index, code] of codes.entries()) {
+            const language = codeLanguage(code);
+            if (language === 'mermaid' && deps.diagrams?.renderMermaid) {
+                diagramCount++;
+                const frame = el('div', 'omni-markdown__diagram omni-markdown__diagram--mermaid');
+                frame.setAttribute('role', 'img');
+                try {
+                    frame.innerHTML = purifier.sanitize(await deps.diagrams.renderMermaid(`omni-md-${version}-${index}`, code.textContent ?? ''), SVG_SANITIZE);
+                }
+                catch (error) {
+                    frame.classList.add('is-invalid');
+                    frame.textContent = errorText(error, t('markdown.diagramFailed'));
+                }
+                if (version === renderVersion)
+                    code.closest('pre')?.replaceWith(frame);
+            }
+            else if (['plantuml', 'puml', 'uml'].includes(language) && deps.diagrams?.renderPlantUml) {
+                diagramCount++;
+                const frame = el('div', 'omni-markdown__diagram omni-markdown__diagram--plantuml');
+                frame.setAttribute('role', 'img');
+                try {
+                    frame.innerHTML = purifier.sanitize(new XMLSerializer().serializeToString(deps.diagrams.renderPlantUml(code.textContent ?? '', document)), SVG_SANITIZE);
+                }
+                catch (error) {
+                    frame.classList.add('is-invalid');
+                    frame.textContent = errorText(error, t('markdown.diagramFailed'));
+                }
+                code.closest('pre')?.replaceWith(frame);
+            }
+            else if (deps.highlighter) {
+                const sourceText = code.textContent ?? '';
+                const result = language && deps.highlighter.getLanguage(language)
+                    ? deps.highlighter.highlight(sourceText, { language, ignoreIllegals: true }) : deps.highlighter.highlightAuto(sourceText);
+                code.innerHTML = purifier.sanitize(result.value, { ALLOWED_TAGS: ['span'], ALLOWED_ATTR: ['class'] });
+                code.classList.add('hljs');
+                if (result.language)
+                    code.dataset.language = result.language;
+            }
+        }
+    };
+    const applyMath = (segments) => {
+        if (!segments.length || !deps.math)
+            return;
+        const math = deps.math;
+        const purifier = deps.createDOMPurify(window);
+        const walker = document.createTreeWalker(preview, NodeFilter.SHOW_TEXT);
+        const textNodes = [];
+        while (walker.nextNode()) {
+            const node = walker.currentNode;
+            if (node.parentElement?.closest('pre, code, textarea'))
+                continue;
+            if (node.nodeValue?.includes('omni-math-token-'))
+                textNodes.push(node);
+        }
+        for (const node of textNodes) {
+            const fragment = document.createDocumentFragment();
+            for (const part of (node.nodeValue ?? '').split(/(%%omni-math-token-\d+%%)/)) {
+                const match = /^%%omni-math-token-(\d+)%%$/.exec(part);
+                const segment = match ? segments[Number(match[1])] : undefined;
+                if (!segment) {
+                    if (part)
+                        fragment.append(document.createTextNode(part));
+                    continue;
+                }
+                const holder = el('span', `omni-markdown__math${segment.display ? ' omni-markdown__math--display' : ''}`);
+                try {
+                    holder.innerHTML = purifier.sanitize(math.renderToHtml(segment.source, segment.display), MATH_SANITIZE);
+                }
+                catch {
+                    holder.classList.add('is-invalid');
+                    holder.textContent = mathSegmentLiteral(segment);
+                }
+                fragment.append(holder);
+            }
+            node.replaceWith(fragment);
+        }
+    };
+    const boundedRenderSource = (sourceText) => {
+        const outcome = parseMarkdown(new TextEncoder().encode(sourceText), parseOptions);
+        if (outcome.result.status === 'failed')
+            throw new Error(t(outcome.result.failure.messageKey));
+        return { source: outcome.result.document.renderText, partial: outcome.result.status === 'partial' };
+    };
+    const renderMarkdown = async (save) => {
+        const version = ++renderVersion;
+        releaseAssets();
+        setStatus('markdown.rendering');
+        showMessage('');
+        try {
+            // Re-apply the parser limits on every render: the editor may have
+            // changed since mount, and marked/DOM must never see an unbounded source.
+            const bounded = boundedRenderSource(controller.state.source);
+            // Math is lifted out before marked (emphasis would corrupt TeX)
+            // and re-inserted into the sanitized DOM afterwards.
+            const masked = deps.math ? maskMathSegments(bounded.source) : { masked: bounded.source, segments: [] };
+            const sanitizedHtml = deps.createDOMPurify(window).sanitize(deps.render.parse(masked.masked), SANITIZE);
+            renderedHtml = sanitizedHtml.replace(/%%omni-math-token-(\d+)%%/g, (whole, at) => { const segment = masked.segments[Number(at)]; return segment ? mathSegmentLiteral(segment) : whole; });
+            preview.replaceChildren();
+            const holder = new DOMParser().parseFromString(sanitizedHtml, 'text/html');
+            while (holder.body.firstChild)
+                preview.append(holder.body.firstChild);
+            preview.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach((heading, index) => heading.id = `heading-${index}`);
+            hardenContent(version);
+            await renderEnhancements(version);
+            if (disposed || version !== renderVersion)
+                return;
+            applyMath(masked.segments);
+            const lines = controller.state.source ? controller.state.source.split(/\r?\n/).length : 0;
+            const words = controller.state.source.match(/\S+/g)?.length ?? 0;
+            titleBox.querySelector('.omni-markdown__summary').textContent = t('markdown.summary', { lines, words });
+            previewCaption.textContent = diagramCount ? t('markdown.renderedDiagrams', { count: diagramCount }) : t('markdown.rendered');
+            setStatus('markdown.rendered', 'valid');
+            if (bounded.partial)
+                showMessage(t('diag.markdown.limit-exceeded'));
+            if (save)
+                await saveSource();
+        }
+        catch (error) {
+            preview.replaceChildren();
+            renderedHtml = '';
+            previewCaption.textContent = t('markdown.renderFailed');
+            setStatus('markdown.invalid', 'invalid');
+            showMessage(errorText(error, t('markdown.renderFailed')));
+        }
+    };
+    const saveSource = async () => {
+        if (!ctx.writeback) {
+            showMessage(t('common.noWriteback'));
+            setStatus('common.saveFailed', 'invalid');
+            return;
+        }
+        try {
+            await ctx.writeback.write(new TextEncoder().encode(controller.state.source));
+            controller.dispatch({ type: 'mark-saved' });
+            setStatus('common.savedToOriginal', 'valid');
+            sourceCaption.textContent = t('common.savedToOriginal');
+        }
+        catch (error) {
+            ctx.logger.log('error', `markdown save failed: ${String(error)}`);
+            setStatus('common.saveFailed', 'invalid');
+            showMessage(errorText(error, t('common.saveFailed')));
+        }
+    };
+    const copy = async (value, successKey) => {
+        if (!ctx.clipboard)
+            return;
+        try {
+            await ctx.clipboard.writeText(value);
+            setStatus(successKey, 'valid');
+        }
+        catch (error) {
+            ctx.logger.log('error', `markdown copy failed: ${String(error)}`);
+        }
+    };
+    for (const [mode, node] of modeButtons)
+        on(node, 'click', (() => controller.dispatch({ type: 'set-mode', mode })));
+    on(source, 'input', (() => controller.dispatch({ type: 'edit-source', source: source.value })));
+    on(source, 'keydown', (event => {
+        const keyboard = event;
+        const key = keyboard.key.toLowerCase();
+        const command = keyboard.metaKey || keyboard.ctrlKey;
+        if (command && key === 'z') {
+            keyboard.preventDefault();
+            controller.dispatch({ type: keyboard.shiftKey ? 'redo' : 'undo' });
+            source.value = controller.state.source;
+        }
+        else if (command && key === 'y') {
+            keyboard.preventDefault();
+            controller.dispatch({ type: 'redo' });
+            source.value = controller.state.source;
+        }
+        else if (command && key === 's') {
+            keyboard.preventDefault();
+            if (ctx.writeback)
+                void renderMarkdown(true);
+            else
+                void saveSource();
+        }
+        else if (keyboard.shiftKey && keyboard.key === 'Enter') {
+            keyboard.preventDefault();
+            void renderMarkdown(Boolean(ctx.writeback));
+        }
+    }));
+    // Render remains useful in read-only adapters. Saving is coupled only when
+    // the host actually advertised and supplied writeback.
+    on(renderButton, 'click', (() => void renderMarkdown(Boolean(ctx.writeback))));
+    on(undoButton, 'click', (() => { controller.dispatch({ type: 'undo' }); source.value = controller.state.source; }));
+    on(redoButton, 'click', (() => { controller.dispatch({ type: 'redo' }); source.value = controller.state.source; }));
+    on(copyHtmlButton, 'click', (() => void copy(renderedHtml, 'markdown.htmlCopied')));
+    on(copySourceButton, 'click', (() => void copy(source.value, 'markdown.sourceCopied')));
+    if (!ctx.clipboard) {
+        for (const node of [copyHtmlButton, copySourceButton]) {
+            node.disabled = true;
+            node.title = t('common.noClipboard');
+        }
+    }
+    const off = controller.subscribe(syncState);
+    disposers.push(off);
+    syncState();
+    await renderMarkdown(false);
+    if (options.signal?.aborted) {
+        shell.remove();
+        releaseAssets();
+        throw new MountAbortedError();
+    }
+    return { dispose() { disposed = true; renderVersion++; releaseAssets(); for (const dispose of disposers.splice(0))
+            dispose(); shell.remove(); } };
+}
+function codeLanguage(block) {
+    for (const name of block.classList)
+        if (name.startsWith('language-'))
+            return name.slice(9).toLowerCase();
+        else if (name.startsWith('lang-'))
+            return name.slice(5).toLowerCase();
+    return '';
+}
+function errorText(error, fallback) { return error instanceof Error ? error.message : fallback; }
+function validRelativeAsset(path) {
+    try {
+        const decoded = decodeURIComponent(path);
+        return !!decoded && !/^(?:[a-z][a-z0-9+.-]*:|[\\/])|(?:^|[\\/])\.\.(?:[\\/]|$)/i.test(decoded);
+    }
+    catch {
+        return false;
+    }
+}

package/dist/viewers/markdown/math.d.ts

@@ -0,0 +1,21 @@
+export interface MathSegment {
+    source: string;
+    display: boolean;
+}
+export interface MaskedMathSource {
+    masked: string;
+    segments: MathSegment[];
+}
+/** Deliberately free of `_`/`*`/`$` so markdown inline rules ignore it. */
+export declare const MATH_TOKEN_PREFIX = "omni-math-token-";
+export declare const MATH_TOKEN_PATTERN: RegExp;
+/** Literal text a segment came from, for copy-HTML output and fallbacks. */
+export declare function mathSegmentLiteral(segment: MathSegment): string;
+/**
+ * Replace `$...$` (inline) and `$$...$$` (display) TeX spans with placeholder
+ * tokens. Fenced code blocks and inline code spans are left untouched.
+ * Inline rules follow KaTeX auto-render: content must not start or end with
+ * whitespace and the closing `$` must not be followed by a digit. Display
+ * math may span lines but not blank lines.
+ */
+export declare function maskMathSegments(source: string): MaskedMathSource;

package/dist/viewers/markdown/math.js

@@ -0,0 +1,100 @@
+// TeX math extraction for the markdown viewer. Math must be lifted out of the
+// source BEFORE marked runs: `$a_i + b_i$` would otherwise be mangled by
+// emphasis parsing. Segments are replaced with inert placeholder tokens that
+// survive marked and DOMPurify unchanged, then swapped for rendered math in
+// the sanitized preview DOM (same post-sanitize slot pattern as diagrams).
+/** Deliberately free of `_`/`*`/`$` so markdown inline rules ignore it. */
+export const MATH_TOKEN_PREFIX = 'omni-math-token-';
+const TOKEN = (index) => `%%${MATH_TOKEN_PREFIX}${index}%%`;
+export const MATH_TOKEN_PATTERN = /%%omni-math-token-(\d+)%%/g;
+/** Literal text a segment came from, for copy-HTML output and fallbacks. */
+export function mathSegmentLiteral(segment) {
+    return segment.display ? `$$${segment.source}$$` : `$${segment.source}$`;
+}
+const FENCE = /^(`{3,}|~{3,})/;
+const MAX_DISPLAY_MATH_LENGTH = 5000;
+const MAX_INLINE_MATH_LENGTH = 1000;
+/**
+ * Replace `$...$` (inline) and `$$...$$` (display) TeX spans with placeholder
+ * tokens. Fenced code blocks and inline code spans are left untouched.
+ * Inline rules follow KaTeX auto-render: content must not start or end with
+ * whitespace and the closing `$` must not be followed by a digit. Display
+ * math may span lines but not blank lines.
+ */
+export function maskMathSegments(source) {
+    const segments = [];
+    let out = '';
+    let index = 0;
+    let atLineStart = true;
+    let fence = null;
+    const lineEnd = (from) => {
+        const at = source.indexOf('\n', from);
+        return at === -1 ? source.length : at;
+    };
+    while (index < source.length) {
+        if (atLineStart) {
+            const rest = source.slice(index, lineEnd(index));
+            const marker = FENCE.exec(rest)?.[1];
+            if (marker) {
+                if (!fence)
+                    fence = marker[0].repeat(3);
+                else if (marker.startsWith(fence))
+                    fence = null;
+            }
+        }
+        const char = source[index];
+        atLineStart = char === '\n';
+        if (fence) {
+            out += char;
+            index++;
+            continue;
+        }
+        if (char === '\\' && source[index + 1] === '$') {
+            out += '\\$';
+            index += 2;
+            continue;
+        }
+        if (char === '`') {
+            // Inline code span: copy verbatim through the matching backtick run.
+            let run = 1;
+            while (source[index + run] === '`')
+                run++;
+            const close = source.indexOf('`'.repeat(run), index + run);
+            const end = close === -1 ? index + run : close + run;
+            const span = source.slice(index, end);
+            out += span;
+            if (span.includes('\n'))
+                atLineStart = span.endsWith('\n');
+            index = end;
+            continue;
+        }
+        if (char === '$') {
+            if (source[index + 1] === '$') {
+                const close = source.indexOf('$$', index + 2);
+                const body = close === -1 ? '' : source.slice(index + 2, close);
+                if (close !== -1 && body.trim() && !/\n[ \t]*\n/.test(body) && body.length <= MAX_DISPLAY_MATH_LENGTH) {
+                    segments.push({ source: body.trim(), display: true });
+                    out += TOKEN(segments.length - 1);
+                    atLineStart = false;
+                    index = close + 2;
+                    continue;
+                }
+            }
+            else {
+                const end = lineEnd(index);
+                const line = source.slice(index + 1, end);
+                const match = /^([^\s$](?:[^$]*[^\s$])?)\$(?!\d)/.exec(line);
+                if (match && match[1].length <= MAX_INLINE_MATH_LENGTH && !match[1].includes('`')) {
+                    segments.push({ source: match[1], display: false });
+                    out += TOKEN(segments.length - 1);
+                    atLineStart = false;
+                    index += 1 + match[0].length;
+                    continue;
+                }
+            }
+        }
+        out += char;
+        index++;
+    }
+    return { masked: out, segments };
+}

package/dist/viewers/markdown/self-loading.d.ts

@@ -0,0 +1,5 @@
+import type { MarkdownViewerDeps } from './index.js';
+/** Convenience loader for web adapters. Markdown parsing and sanitizing are
+ * required; syntax highlighting and diagram engines enhance the viewer when
+ * their optional peer packages are installed. */
+export declare function loadMarkdownViewerDeps(): Promise<MarkdownViewerDeps>;

package/dist/viewers/markdown/self-loading.js

@@ -0,0 +1,48 @@
+/** Convenience loader for web adapters. Markdown parsing and sanitizing are
+ * required; syntax highlighting and diagram engines enhance the viewer when
+ * their optional peer packages are installed. */
+export async function loadMarkdownViewerDeps() {
+    const [markedModule, purifierModule] = await Promise.all([
+        import('marked'), import('dompurify')
+    ]);
+    const marked = markedModule;
+    const create = purifierModule.default;
+    const deps = {
+        render: { parse: text => marked.marked.parse(text) },
+        createDOMPurify: window => create(window)
+    };
+    const [highlightResult, mermaidResult, plantUmlResult, katexResult] = await Promise.allSettled([
+        import('highlight.js'), import('mermaid'), import('puml-canvas-js'),
+        import('katex')
+    ]);
+    if (highlightResult.status === 'fulfilled') {
+        const module = highlightResult.value;
+        deps.highlighter = module.default ?? module;
+    }
+    const mermaid = mermaidResult.status === 'fulfilled'
+        ? mermaidResult.value.default
+        : undefined;
+    const plantUml = plantUmlResult.status === 'fulfilled'
+        ? plantUmlResult.value.render
+        : undefined;
+    if (mermaid || plantUml) {
+        if (mermaid)
+            mermaid.initialize({ startOnLoad: false, theme: 'base', securityLevel: 'strict', maxTextSize: 200000 });
+        deps.diagrams = {
+            ...(mermaid ? { renderMermaid: async (id, source) => (await mermaid.render(id, source)).svg } : {}),
+            ...(plantUml ? { renderPlantUml: (source, document) => plantUml(source, { document }) } : {})
+        };
+    }
+    if (katexResult.status === 'fulfilled') {
+        const module = katexResult.value;
+        const katex = module.default ?? (module.renderToString ? module : undefined);
+        if (katex) {
+            // KaTeX layout also needs katex.css (+fonts) — the adapter loads
+            // those into the page/shadow root alongside the core stylesheet.
+            deps.math = {
+                renderToHtml: (source, displayMode) => katex.renderToString(source, { displayMode, throwOnError: false, output: 'htmlAndMathml' })
+            };
+        }
+    }
+    return deps;
+}

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

@@ -0,0 +1 @@
+export declare const markdownViewerCss = "\n.omni-viewer--markdown{box-sizing:border-box;min-height:100%;padding:18px;display:flex;flex-direction:column;gap:14px;color:var(--omni-fg,#d4d4d4);background:var(--omni-bg,#1e1e1e);font:var(--omni-font-size,13px)/1.5 var(--omni-font-family,system-ui,sans-serif);--md-border:var(--omni-border,#454545);--md-muted:var(--omni-muted,#aaa);--md-panel:var(--omni-panel-bg,rgba(127,127,127,.05));--md-code:var(--omni-code-bg,rgba(127,127,127,.14));}\n.omni-markdown *{box-sizing:border-box}.omni-markdown__header,.omni-markdown__toolbar,.omni-markdown__toolbar-group,.omni-markdown__panel-header{display:flex;align-items:center;gap:10px}.omni-markdown__header{align-items:flex-start;justify-content:space-between;gap:16px}.omni-markdown__title{font-size:16px;font-weight:600;margin-bottom:4px;word-break:break-word}.omni-markdown__summary,.omni-markdown__caption{color:var(--md-muted);font-size:12px}.omni-markdown__status{padding:7px 10px;border-radius:999px;border:1px solid var(--md-border);background:rgba(79,193,255,.16);font-size:12px;font-weight:600;white-space:nowrap}.omni-markdown__status.is-valid{background:rgba(46,160,67,.16);color:var(--omni-success,#3fb950)}.omni-markdown__status.is-invalid{background:rgba(244,71,71,.14);color:var(--omni-error,#f44747)}\n.omni-markdown__toolbar{flex-wrap:wrap}.omni-markdown__toolbar-group{flex-wrap:wrap;padding:7px;border:1px solid var(--md-border);border-radius:8px;background:var(--md-panel)}.omni-markdown__button{cursor:pointer;border:1px solid var(--md-border);background:var(--omni-button-secondary-bg,rgba(127,127,127,.16));color:inherit;border-radius:6px;padding:7px 10px;font:inherit}.omni-markdown__button:hover:not(:disabled){background:rgba(127,127,127,.26)}.omni-markdown__button--primary{background:var(--omni-accent,#0e639c);color:var(--omni-accent-fg,#fff);border-color:var(--omni-accent,#0e639c)}.omni-markdown__button.is-active{border-color:var(--omni-focus,#007fd4);background:color-mix(in srgb,var(--omni-focus,#007fd4) 22%,transparent)}.omni-markdown__button.is-dirty{border-color:var(--omni-warning,#cca700)}.omni-markdown__button:disabled{cursor:default;opacity:.5}\n.omni-markdown__workspace{display:grid;grid-template-columns:minmax(360px,1fr);gap:14px;min-height:68vh}.omni-markdown__workspace.is-split{grid-template-columns:minmax(320px,1.1fr) minmax(300px,.9fr)}.omni-markdown__workspace.is-split .omni-markdown__source-panel{grid-column:1;grid-row:1}.omni-markdown__workspace.is-split .omni-markdown__preview-panel{grid-column:2;grid-row:1}.omni-markdown__panel{display:flex;flex-direction:column;min-height:0;border:1px solid var(--md-border);border-radius:8px;background:var(--md-panel);overflow:hidden}.omni-markdown__panel[hidden]{display:none}.omni-markdown__panel-header{justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--md-border)}\n.omni-markdown__preview{flex:1;min-height:0;overflow:auto;padding:22px;line-height:1.65}.omni-markdown__preview>:first-child{margin-top:0}.omni-markdown__preview>:last-child{margin-bottom:0}.omni-markdown__preview h1,.omni-markdown__preview h2,.omni-markdown__preview h3,.omni-markdown__preview h4{line-height:1.25;margin:1.35em 0 .65em}.omni-markdown__preview h1{font-size:28px;padding-bottom:8px;border-bottom:1px solid var(--md-border)}.omni-markdown__preview h2{font-size:22px;padding-bottom:6px;border-bottom:1px solid var(--md-border)}.omni-markdown__preview h3{font-size:18px}.omni-markdown__preview h4{font-size:15px}.omni-markdown__preview a{color:var(--omni-link,#4daafc)}.omni-markdown__preview p,.omni-markdown__preview ul,.omni-markdown__preview ol,.omni-markdown__preview blockquote,.omni-markdown__preview pre,.omni-markdown__preview table{margin:0 0 1em}.omni-markdown__preview blockquote{border-left:4px solid var(--md-border);padding:8px 14px;color:var(--md-muted)}.omni-markdown__preview code{font-family:var(--omni-mono,monospace);background:var(--md-code);border-radius:4px;padding:.15em .35em}.omni-markdown__preview pre{overflow:auto;background:var(--md-code);border-radius:8px;padding:14px}.omni-markdown__preview pre code{display:block;padding:0;background:transparent}.omni-markdown__preview table{width:100%;border-collapse:collapse;display:block;overflow:auto}.omni-markdown__preview th,.omni-markdown__preview td{border:1px solid var(--md-border);padding:7px 10px}.omni-markdown__preview img{max-width:100%;height:auto}\n.omni-markdown__source{flex:1;width:100%;min-height:62vh;resize:none;border:0;outline:0;padding:16px;background:var(--omni-editor-bg,var(--omni-bg,#1e1e1e));color:inherit;font:13px/1.55 var(--omni-mono,monospace);tab-size:4}.omni-markdown__message{padding:10px 12px;border:1px solid var(--omni-error,#f44747);border-radius:6px;color:var(--omni-error,#f44747);white-space:pre-wrap}.omni-markdown__diagram{overflow:auto;margin:0 0 1em;padding:16px;border:1px solid var(--md-border);border-radius:8px;background:#fff;color:#111}.omni-markdown__diagram svg{display:block;max-width:100%;height:auto;margin:0 auto}.omni-markdown__diagram.is-invalid{color:var(--omni-error,#f44747);background:rgba(244,71,71,.1);white-space:pre-wrap}\n.omni-markdown__math--display{display:block;margin:0 0 1em;text-align:center;overflow-x:auto}.omni-markdown__math.is-invalid{color:var(--omni-error,#f44747);font-family:var(--omni-mono,monospace);white-space:pre-wrap}\n.omni-markdown__preview .hljs-comment,.omni-markdown__preview .hljs-quote{color:#6a9955;font-style:italic}.omni-markdown__preview .hljs-keyword,.omni-markdown__preview .hljs-selector-tag{color:#c586c0}.omni-markdown__preview .hljs-string,.omni-markdown__preview .hljs-regexp{color:#ce9178}.omni-markdown__preview .hljs-number,.omni-markdown__preview .hljs-literal{color:#b5cea8}.omni-markdown__preview .hljs-title,.omni-markdown__preview .hljs-section{color:#dcdcaa}.omni-markdown__preview .hljs-type,.omni-markdown__preview .hljs-built_in{color:#4ec9b0}.omni-markdown__preview .hljs-attr,.omni-markdown__preview .hljs-name{color:#9cdcfe}.omni-markdown__preview .hljs-meta,.omni-markdown__preview .hljs-symbol{color:#d7ba7d}\n@media(max-width:760px){.omni-markdown__workspace.is-split{grid-template-columns:1fr}.omni-markdown__workspace.is-split .omni-markdown__source-panel,.omni-markdown__workspace.is-split .omni-markdown__preview-panel{grid-column:1;grid-row:auto}}\n";

package/dist/viewers/markdown/styles.js

@@ -0,0 +1,11 @@
+export const markdownViewerCss = `
+.omni-viewer--markdown{box-sizing:border-box;min-height:100%;padding:18px;display:flex;flex-direction:column;gap:14px;color:var(--omni-fg,#d4d4d4);background:var(--omni-bg,#1e1e1e);font:var(--omni-font-size,13px)/1.5 var(--omni-font-family,system-ui,sans-serif);--md-border:var(--omni-border,#454545);--md-muted:var(--omni-muted,#aaa);--md-panel:var(--omni-panel-bg,rgba(127,127,127,.05));--md-code:var(--omni-code-bg,rgba(127,127,127,.14));}
+.omni-markdown *{box-sizing:border-box}.omni-markdown__header,.omni-markdown__toolbar,.omni-markdown__toolbar-group,.omni-markdown__panel-header{display:flex;align-items:center;gap:10px}.omni-markdown__header{align-items:flex-start;justify-content:space-between;gap:16px}.omni-markdown__title{font-size:16px;font-weight:600;margin-bottom:4px;word-break:break-word}.omni-markdown__summary,.omni-markdown__caption{color:var(--md-muted);font-size:12px}.omni-markdown__status{padding:7px 10px;border-radius:999px;border:1px solid var(--md-border);background:rgba(79,193,255,.16);font-size:12px;font-weight:600;white-space:nowrap}.omni-markdown__status.is-valid{background:rgba(46,160,67,.16);color:var(--omni-success,#3fb950)}.omni-markdown__status.is-invalid{background:rgba(244,71,71,.14);color:var(--omni-error,#f44747)}
+.omni-markdown__toolbar{flex-wrap:wrap}.omni-markdown__toolbar-group{flex-wrap:wrap;padding:7px;border:1px solid var(--md-border);border-radius:8px;background:var(--md-panel)}.omni-markdown__button{cursor:pointer;border:1px solid var(--md-border);background:var(--omni-button-secondary-bg,rgba(127,127,127,.16));color:inherit;border-radius:6px;padding:7px 10px;font:inherit}.omni-markdown__button:hover:not(:disabled){background:rgba(127,127,127,.26)}.omni-markdown__button--primary{background:var(--omni-accent,#0e639c);color:var(--omni-accent-fg,#fff);border-color:var(--omni-accent,#0e639c)}.omni-markdown__button.is-active{border-color:var(--omni-focus,#007fd4);background:color-mix(in srgb,var(--omni-focus,#007fd4) 22%,transparent)}.omni-markdown__button.is-dirty{border-color:var(--omni-warning,#cca700)}.omni-markdown__button:disabled{cursor:default;opacity:.5}
+.omni-markdown__workspace{display:grid;grid-template-columns:minmax(360px,1fr);gap:14px;min-height:68vh}.omni-markdown__workspace.is-split{grid-template-columns:minmax(320px,1.1fr) minmax(300px,.9fr)}.omni-markdown__workspace.is-split .omni-markdown__source-panel{grid-column:1;grid-row:1}.omni-markdown__workspace.is-split .omni-markdown__preview-panel{grid-column:2;grid-row:1}.omni-markdown__panel{display:flex;flex-direction:column;min-height:0;border:1px solid var(--md-border);border-radius:8px;background:var(--md-panel);overflow:hidden}.omni-markdown__panel[hidden]{display:none}.omni-markdown__panel-header{justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--md-border)}
+.omni-markdown__preview{flex:1;min-height:0;overflow:auto;padding:22px;line-height:1.65}.omni-markdown__preview>:first-child{margin-top:0}.omni-markdown__preview>:last-child{margin-bottom:0}.omni-markdown__preview h1,.omni-markdown__preview h2,.omni-markdown__preview h3,.omni-markdown__preview h4{line-height:1.25;margin:1.35em 0 .65em}.omni-markdown__preview h1{font-size:28px;padding-bottom:8px;border-bottom:1px solid var(--md-border)}.omni-markdown__preview h2{font-size:22px;padding-bottom:6px;border-bottom:1px solid var(--md-border)}.omni-markdown__preview h3{font-size:18px}.omni-markdown__preview h4{font-size:15px}.omni-markdown__preview a{color:var(--omni-link,#4daafc)}.omni-markdown__preview p,.omni-markdown__preview ul,.omni-markdown__preview ol,.omni-markdown__preview blockquote,.omni-markdown__preview pre,.omni-markdown__preview table{margin:0 0 1em}.omni-markdown__preview blockquote{border-left:4px solid var(--md-border);padding:8px 14px;color:var(--md-muted)}.omni-markdown__preview code{font-family:var(--omni-mono,monospace);background:var(--md-code);border-radius:4px;padding:.15em .35em}.omni-markdown__preview pre{overflow:auto;background:var(--md-code);border-radius:8px;padding:14px}.omni-markdown__preview pre code{display:block;padding:0;background:transparent}.omni-markdown__preview table{width:100%;border-collapse:collapse;display:block;overflow:auto}.omni-markdown__preview th,.omni-markdown__preview td{border:1px solid var(--md-border);padding:7px 10px}.omni-markdown__preview img{max-width:100%;height:auto}
+.omni-markdown__source{flex:1;width:100%;min-height:62vh;resize:none;border:0;outline:0;padding:16px;background:var(--omni-editor-bg,var(--omni-bg,#1e1e1e));color:inherit;font:13px/1.55 var(--omni-mono,monospace);tab-size:4}.omni-markdown__message{padding:10px 12px;border:1px solid var(--omni-error,#f44747);border-radius:6px;color:var(--omni-error,#f44747);white-space:pre-wrap}.omni-markdown__diagram{overflow:auto;margin:0 0 1em;padding:16px;border:1px solid var(--md-border);border-radius:8px;background:#fff;color:#111}.omni-markdown__diagram svg{display:block;max-width:100%;height:auto;margin:0 auto}.omni-markdown__diagram.is-invalid{color:var(--omni-error,#f44747);background:rgba(244,71,71,.1);white-space:pre-wrap}
+.omni-markdown__math--display{display:block;margin:0 0 1em;text-align:center;overflow-x:auto}.omni-markdown__math.is-invalid{color:var(--omni-error,#f44747);font-family:var(--omni-mono,monospace);white-space:pre-wrap}
+.omni-markdown__preview .hljs-comment,.omni-markdown__preview .hljs-quote{color:#6a9955;font-style:italic}.omni-markdown__preview .hljs-keyword,.omni-markdown__preview .hljs-selector-tag{color:#c586c0}.omni-markdown__preview .hljs-string,.omni-markdown__preview .hljs-regexp{color:#ce9178}.omni-markdown__preview .hljs-number,.omni-markdown__preview .hljs-literal{color:#b5cea8}.omni-markdown__preview .hljs-title,.omni-markdown__preview .hljs-section{color:#dcdcaa}.omni-markdown__preview .hljs-type,.omni-markdown__preview .hljs-built_in{color:#4ec9b0}.omni-markdown__preview .hljs-attr,.omni-markdown__preview .hljs-name{color:#9cdcfe}.omni-markdown__preview .hljs-meta,.omni-markdown__preview .hljs-symbol{color:#d7ba7d}
+@media(max-width:760px){.omni-markdown__workspace.is-split{grid-template-columns:1fr}.omni-markdown__workspace.is-split .omni-markdown__source-panel,.omni-markdown__workspace.is-split .omni-markdown__preview-panel{grid-column:1;grid-row:auto}}
+`;

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

@@ -0,0 +1,19 @@
+import type { ClipboardService, HostContext } from '../../host/index.js';
+import { type MountOptions, type ViewerHandle, type ViewerInput } from '../types.js';
+export { parseMat } from '../../parsers/mat/index.js';
+export type { MatDocument, MatTable, MatVariable } from '../../parsers/mat/index.js';
+export { matViewerCss } from './styles.js';
+export declare const MAT_VIEWER_META: {
+    id: string;
+    displayNameKey: string;
+    extensions: string[];
+    priority: number;
+    requiredServices: readonly [];
+    optionalServices: readonly ["clipboard"];
+    inputOwnership: "borrows";
+};
+export type MatViewerContext = HostContext & {
+    clipboard?: ClipboardService;
+};
+export declare const MAT_RENDER_ROW_LIMIT = 1000;
+export declare function mountMatViewer(input: ViewerInput, container: HTMLElement, ctx: MatViewerContext, options?: MountOptions): Promise<ViewerHandle>;