@oml/markdown 0.15.0 → 0.16.1

package/src/static/browser-runtime.ts

@@ -572,4 +572,806 @@ async function applyExecutionResults(): Promise<void> {
 }
 
 setupDownloadHandler();
-void applyExecutionResults();
+
+function ensureInitialContentLoaded(): void {
+    const content = document.getElementById('oml-md-content');
+    if (!content) {
+        return;
+    }
+    if (content.childNodes.length > 0) {
+        return;
+    }
+    const template = document.getElementById('oml-md-initial-content');
+    if (!(template instanceof HTMLTemplateElement)) {
+        return;
+    }
+    content.innerHTML = template.innerHTML;
+}
+
+async function bootstrapStaticRender(): Promise<void> {
+    void pruneOldRuntimeCaches();
+    // Hard gate first paint to prevent transient unhydrated flashes on reload,
+    // even for pages generated before wrapper/boot-class support.
+    const body = document.body;
+    const previousBodyVisibility = body.style.visibility;
+    body.style.visibility = 'hidden';
+
+    // Always start from template content so code blocks are re-hydrated deterministically.
+    // Full-page HTML cache can preserve stale interactive table state across reloads.
+    ensureInitialContentLoaded();
+    try {
+        await applyExecutionResults();
+        await Promise.all([
+            applyJsBlocks(),
+            applyPyBlocks(),
+            applyRBlocks(),
+        ]);
+    } finally {
+        document.documentElement.classList.remove('oml-md-booting');
+        document.body.classList.remove('oml-md-booting');
+        body.style.visibility = previousBodyVisibility || 'visible';
+    }
+}
+
+// ── Shared types ─────────────────────────────────────────────────────────────
+
+type QueryResult = {
+    success: boolean;
+    columns: string[];
+    rows: Record<string, string>[];
+    error?: string;
+};
+
+function getScriptSparqlCache(): Record<string, Record<string, QueryResult>> {
+    return parseJsonNode<Record<string, Record<string, QueryResult>>>('oml-md-script-sparql-cache', {});
+}
+
+const PYTHON_PANEL_CACHE_STORAGE_KEY = 'oml-md-python-panel-cache-v1';
+const R_PANEL_CACHE_STORAGE_KEY = 'oml-md-r-panel-cache-v1';
+const JS_PANEL_CACHE_STORAGE_KEY = 'oml-md-js-panel-cache-v1';
+const MAX_PYTHON_PANEL_CACHE_ENTRIES = 64;
+const MAX_R_PANEL_CACHE_ENTRIES = 64;
+const MAX_JS_PANEL_CACHE_ENTRIES = 64;
+let pythonPanelHtmlCache = readPythonPanelCache();
+let rPanelHtmlCache = readRPanelCache();
+let jsPanelHtmlCache = readJsPanelCache();
+
+function readPythonPanelCache(): Record<string, string> {
+    try {
+        const raw = window.localStorage.getItem(PYTHON_PANEL_CACHE_STORAGE_KEY);
+        const parsed = raw ? JSON.parse(raw) as unknown : {};
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+            return {};
+        }
+        const cache: Record<string, string> = {};
+        for (const [key, value] of Object.entries(parsed)) {
+            if (typeof value === 'string') {
+                cache[key] = value;
+            }
+        }
+        return cache;
+    } catch {
+        return {};
+    }
+}
+
+function rememberPythonPanelCache(key: string, html: string): void {
+    const nextEntries = Object.entries(pythonPanelHtmlCache).filter(([entryKey]) => entryKey !== key);
+    nextEntries.push([key, html]);
+    while (nextEntries.length > MAX_PYTHON_PANEL_CACHE_ENTRIES) {
+        nextEntries.shift();
+    }
+    pythonPanelHtmlCache = Object.fromEntries(nextEntries);
+    try {
+        window.localStorage.setItem(PYTHON_PANEL_CACHE_STORAGE_KEY, JSON.stringify(pythonPanelHtmlCache));
+    } catch {
+        // Ignore storage quota/availability errors; Python still renders normally.
+    }
+}
+
+function readRPanelCache(): Record<string, string> {
+    try {
+        const raw = window.localStorage.getItem(R_PANEL_CACHE_STORAGE_KEY);
+        const parsed = raw ? JSON.parse(raw) as unknown : {};
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+            return {};
+        }
+        const cache: Record<string, string> = {};
+        for (const [key, value] of Object.entries(parsed)) {
+            if (typeof value === 'string') {
+                cache[key] = value;
+            }
+        }
+        return cache;
+    } catch {
+        return {};
+    }
+}
+
+function rememberRPanelCache(key: string, html: string): void {
+    const nextEntries = Object.entries(rPanelHtmlCache).filter(([entryKey]) => entryKey !== key);
+    nextEntries.push([key, html]);
+    while (nextEntries.length > MAX_R_PANEL_CACHE_ENTRIES) {
+        nextEntries.shift();
+    }
+    rPanelHtmlCache = Object.fromEntries(nextEntries);
+    try {
+        window.localStorage.setItem(R_PANEL_CACHE_STORAGE_KEY, JSON.stringify(rPanelHtmlCache));
+    } catch {
+        // Ignore storage quota/availability errors; R still renders normally.
+    }
+}
+
+function readJsPanelCache(): Record<string, string> {
+    try {
+        const raw = window.localStorage.getItem(JS_PANEL_CACHE_STORAGE_KEY);
+        const parsed = raw ? JSON.parse(raw) as unknown : {};
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+            return {};
+        }
+        const cache: Record<string, string> = {};
+        for (const [key, value] of Object.entries(parsed)) {
+            if (typeof value === 'string') {
+                cache[key] = value;
+            }
+        }
+        return cache;
+    } catch {
+        return {};
+    }
+}
+
+function rememberJsPanelCache(key: string, html: string): void {
+    const nextEntries = Object.entries(jsPanelHtmlCache).filter(([entryKey]) => entryKey !== key);
+    nextEntries.push([key, html]);
+    while (nextEntries.length > MAX_JS_PANEL_CACHE_ENTRIES) {
+        nextEntries.shift();
+    }
+    jsPanelHtmlCache = Object.fromEntries(nextEntries);
+    try {
+        window.localStorage.setItem(JS_PANEL_CACHE_STORAGE_KEY, JSON.stringify(jsPanelHtmlCache));
+    } catch {
+        // Ignore storage quota/availability errors; JavaScript still renders normally.
+    }
+}
+
+function buildPythonPanelCacheKey(blockId: string, source: string, blockCache: Record<string, QueryResult>): string {
+    const page = `${window.location.origin}${window.location.pathname}${window.location.search}`;
+    return `python|${page}|${blockId}|${hash32(source)}|${hash32(JSON.stringify(blockCache))}`;
+}
+
+function buildRPanelCacheKey(blockId: string, source: string, blockCache: Record<string, QueryResult>): string {
+    const page = `${window.location.origin}${window.location.pathname}${window.location.search}`;
+    return `r|${page}|${blockId}|${hash32(source)}|${hash32(JSON.stringify(blockCache))}`;
+}
+
+function buildJsPanelCacheKey(blockId: string, source: string, blockCache: Record<string, QueryResult>): string {
+    const page = `${window.location.origin}${window.location.pathname}${window.location.search}`;
+    return `js|${page}|${blockId}|${hash32(source)}|${hash32(JSON.stringify(blockCache))}`;
+}
+
+function hash32(input: string): string {
+    let hash = 2166136261;
+    for (let i = 0; i < input.length; i++) {
+        hash ^= input.charCodeAt(i);
+        hash = Math.imul(hash, 16777619);
+    }
+    return (hash >>> 0).toString(16);
+}
+
+function sparqlResultToHtmlTable(result: QueryResult): string {
+    if (!result.success || result.rows.length === 0) {
+        const msg = result.error ?? 'No results';
+        return result.error
+            ? `<p class="oml-md-js-error">${msg}</p>`
+            : `<p class="oml-md-js-empty">No results</p>`;
+    }
+    const esc = (s: string): string => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const header = result.columns.map((c) => `<th>${esc(c)}</th>`).join('');
+    const body = result.rows.map((row) =>
+        `<tr>${result.columns.map((c) => `<td>${esc(row[c] ?? '')}</td>`).join('')}</tr>`
+    ).join('');
+    return `<div class="oml-md-table-wrapper"><table class="oml-md-table"><thead><tr>${header}</tr></thead><tbody>${body}</tbody></table></div>`;
+}
+
+function makeScriptPanel(): HTMLDivElement {
+    const panel = document.createElement('div');
+    panel.className = 'oml-md-js-result';
+    return panel;
+}
+
+function appendResult(
+    panel: HTMLElement,
+    result: { error?: string }
+): void {
+    if (result.error) {
+        const el = document.createElement('div');
+        el.className = 'oml-md-js-error';
+        el.textContent = result.error;
+        panel.appendChild(el);
+    }
+    if (panel.childElementCount === 0) {
+        const el = document.createElement('div');
+        el.className = 'oml-md-js-empty';
+        el.textContent = '(no output)';
+        panel.appendChild(el);
+    }
+}
+
+// ── JavaScript blocks ─────────────────────────────────────────────────────────
+
+const loadedScripts = new Set<string>();
+
+async function loadScript(url: string): Promise<void> {
+    if (loadedScripts.has(url)) {
+        return;
+    }
+    await new Promise<void>((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = url;
+        script.onload = () => { loadedScripts.add(url); resolve(); };
+        script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
+        document.head.appendChild(script);
+    });
+}
+
+function isPyodideNoise(text: string): boolean {
+    return /^(Loading|Loaded|Unloading) /.test(text)
+        || text.includes('already loaded from')
+        || text.includes('channel');
+}
+
+async function executeJsCode(
+    code: string,
+    blockCache: Record<string, QueryResult>,
+    container: HTMLElement
+): Promise<{ error?: string }> {
+    let statusEl: HTMLElement | undefined = document.createElement('div');
+    statusEl.className = 'oml-md-js-text-output';
+    statusEl.textContent = 'Running JavaScript block…';
+    container.appendChild(statusEl);
+    const clearStatus = (): void => {
+        if (statusEl?.parentElement === container) {
+            container.removeChild(statusEl);
+        }
+        statusEl = undefined;
+    };
+    const appendHtml = (html: string): void => {
+        clearStatus();
+        const el = document.createElement('div');
+        el.className = 'oml-md-js-html-output';
+        el.style.color = window.getComputedStyle(document.body).color;
+        el.innerHTML = html;
+        container.appendChild(el);
+    };
+    const appendText = (text: string): void => {
+        clearStatus();
+        const pre = document.createElement('pre');
+        pre.className = 'oml-md-js-text-output';
+        pre.textContent = text;
+        container.appendChild(pre);
+    };
+    const display = (content: unknown): void => {
+        if (typeof content === 'string') { appendHtml(content); } else { appendText(String(content)); }
+    };
+    const query = async (sparql: string): Promise<QueryResult> => {
+        return blockCache[sparql] ?? { success: false, columns: [], rows: [], error: 'SPARQL not pre-fetched for this query' };
+    };
+    const table = (result: QueryResult): string => sparqlResultToHtmlTable(result);
+    const load = async (url: string): Promise<void> => loadScript(url);
+
+    const savedLog = console.log;
+    const savedWarn = console.warn;
+    const savedError = console.error;
+    console.log = (...args: unknown[]): void => {
+        const text = args.map((v) => (typeof v === 'string' ? v : JSON.stringify(v, null, 2))).join(' ');
+        if (!isPyodideNoise(text)) { appendText(text); }
+    };
+    console.warn = console.log;
+    console.error = (...args: unknown[]): void => {
+        const text = '[error] ' + args.map((v) => (typeof v === 'string' ? v : JSON.stringify(v, null, 2))).join(' ');
+        if (!isPyodideNoise(text)) { appendText(text); }
+    };
+    try {
+        const AsyncFunction = Object.getPrototypeOf(async function () { /* */ }).constructor as new (...a: string[]) => (...a: unknown[]) => Promise<void>;
+        const fn = new AsyncFunction('display', 'query', 'table', 'load', code);
+        await fn(display, query, table, load);
+        clearStatus();
+        return {};
+    } catch (error) {
+        clearStatus();
+        return { error: error instanceof Error ? `${error.name}: ${error.message}` : String(error) };
+    } finally {
+        console.log = savedLog;
+        console.warn = savedWarn;
+        console.error = savedError;
+    }
+}
+
+async function applyJsBlocks(): Promise<void> {
+    const cache = getScriptSparqlCache();
+    const codeNodes = Array.from(document.querySelectorAll<HTMLElement>('pre > code.language-javascript, pre > code.language-js'));
+    const sourceBlocks = codeNodes
+        .map((code) => code.parentElement)
+        .filter((pre): pre is HTMLElement => pre instanceof HTMLElement);
+    for (const pre of sourceBlocks) {
+        pre.style.visibility = 'hidden';
+    }
+    try {
+        for (const code of codeNodes) {
+            const pre = code.parentElement as HTMLElement;
+            const blockId = pre.dataset.omlBlockId ?? '';
+            const blockCache = cache[blockId] ?? {};
+            const source = code.textContent ?? '';
+            const cacheKey = buildJsPanelCacheKey(blockId, source, blockCache);
+            const cachedHtml = jsPanelHtmlCache[cacheKey];
+            if (typeof cachedHtml === 'string') {
+                const panel = makeScriptPanel();
+                panel.innerHTML = cachedHtml;
+                pre.replaceWith(panel);
+                continue;
+            }
+            const panel = makeScriptPanel();
+            pre.replaceWith(panel);
+            const result = await executeJsCode(source, blockCache, panel);
+            appendResult(panel, result);
+            if (!result.error) {
+                rememberJsPanelCache(cacheKey, panel.innerHTML);
+            }
+        }
+    } finally {
+        for (const pre of sourceBlocks) {
+            if (pre.isConnected) {
+                pre.style.visibility = '';
+            }
+        }
+    }
+}
+
+// ── Runtime WASM cache ────────────────────────────────────────────────────────
+//
+// Pyodide runs entirely on the main thread, so patching globalThis.fetch lets us
+// intercept and cache every resource it fetches (WASM, Python stdlib, packages).
+//
+// WebR spawns a Web Worker for R's WASM execution; those fetches happen inside
+// the worker and are NOT visible to a main-thread fetch patch. Caching WebR's
+// heavy assets would require a Service Worker. The interceptor below still covers
+// any resources WebR fetches from the main thread (e.g. the .mjs entry module
+// when future WebR versions do so), and the infrastructure is ready if a SW is
+// added later.
+//
+// Version bump: update PYODIDE_VERSION / WEBR_VERSION constants. The old versioned
+// cache is automatically deleted by pruneOldRuntimeCaches() on the next page load.
+
+const PYODIDE_VERSION = 'v0.27.0';
+const WEBR_VERSION = 'v0.4.2';
+const PYODIDE_CDN_BASE = `https://cdn.jsdelivr.net/pyodide/${PYODIDE_VERSION}/full`;
+const WEBR_CDN_BASE = `https://webr.r-wasm.org/${WEBR_VERSION}`;
+const PYODIDE_CACHE_NAME = `oml-pyodide-${PYODIDE_VERSION}`;
+const WEBR_CACHE_NAME = `oml-webr-${WEBR_VERSION}`;
+const RUNTIME_CACHE_PREFIXES = ['oml-pyodide-', 'oml-webr-'];
+
+// Registry mapping CDN URL prefix → Cache API cache name. The patched fetch
+// below consults this map so multiple runtimes can be intercepted concurrently
+// without re-patching / un-patching (which would race when both load in parallel).
+const runtimeCacheInterceptors = new Map<string, string>();
+const _originalFetch: typeof fetch = globalThis.fetch.bind(globalThis);
+
+if ('caches' in globalThis) {
+    globalThis.fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+        const url = typeof input === 'string' ? input
+            : input instanceof URL ? input.href
+            : (input as Request).url;
+        for (const [prefix, cacheName] of runtimeCacheInterceptors) {
+            if (url.startsWith(prefix)) {
+                try {
+                    const cache = await caches.open(cacheName);
+                    const hit = await cache.match(url);
+                    if (hit) { return hit; }
+                    const response = await _originalFetch(input as RequestInfo, init);
+                    if (response.ok) { await cache.put(url, response.clone()); }
+                    return response;
+                } catch {
+                    break;
+                }
+            }
+        }
+        return _originalFetch(input as RequestInfo, init);
+    };
+}
+
+async function pruneOldRuntimeCaches(): Promise<void> {
+    if (!('caches' in globalThis)) { return; }
+    const current = new Set([PYODIDE_CACHE_NAME, WEBR_CACHE_NAME]);
+    try {
+        const all = await caches.keys();
+        await Promise.all(
+            all
+                .filter((n) => RUNTIME_CACHE_PREFIXES.some((p) => n.startsWith(p)) && !current.has(n))
+                .map((n) => caches.delete(n))
+        );
+    } catch { /* best-effort */ }
+}
+
+// ── Python (Pyodide) blocks ───────────────────────────────────────────────────
+
+interface PyodideInterface {
+    runPythonAsync(code: string): Promise<unknown>;
+    globals: { set(name: string, value: unknown): void };
+    setStdout(opts: { batched: (msg: string) => void }): void;
+    setStderr(opts: { batched: (msg: string) => void }): void;
+    loadPackage(pkg: string | string[]): Promise<void>;
+}
+
+let pyodideInstance: PyodideInterface | null = null;
+let pyodideLoading: Promise<PyodideInterface> | null = null;
+
+async function getPyodide(): Promise<PyodideInterface> {
+    if (pyodideInstance) { return pyodideInstance; }
+    if (pyodideLoading) { return pyodideLoading; }
+    pyodideLoading = (async () => {
+        // Register the CDN interceptor before any fetches so that loadPyodide()'s
+        // internal WASM + stdlib requests are served from / stored in the Cache API.
+        runtimeCacheInterceptors.set(PYODIDE_CDN_BASE, PYODIDE_CACHE_NAME);
+        // Use ES module dynamic import via new Function so that Pyodide's internal
+        // import('./pyodide.asm.js') resolves relative to the CDN module URL, not
+        // the document base URL (which <base href> would redirect to localhost).
+        // This matches the pattern used by WebR.
+        const dynamicImport = new Function('url', 'return import(url)') as
+            (url: string) => Promise<{ loadPyodide: (opts: { indexURL: string }) => Promise<PyodideInterface> }>;
+        const { loadPyodide } = await dynamicImport(`${PYODIDE_CDN_BASE}/pyodide.mjs`);
+        const py = await loadPyodide({ indexURL: `${PYODIDE_CDN_BASE}/` });
+        await py.loadPackage('micropip');
+        pyodideInstance = py;
+        return py;
+    })();
+    return pyodideLoading;
+}
+
+const PY_BOOTSTRAP = `
+def display(html):
+    _js_display(str(html))
+
+async def query(sparql):
+    result = _js_query(sparql)
+    return result.to_py() if hasattr(result, 'to_py') else result
+
+async def load(package):
+    import micropip as _micropip
+    await _micropip.install(package)
+
+def table(data):
+    rows, columns = [], []
+    if isinstance(data, dict) and 'rows' in data:
+        rows = data['rows']
+        columns = data.get('columns', list(rows[0].keys()) if rows else [])
+    elif isinstance(data, list) and data and isinstance(data[0], dict):
+        rows, columns = data, list(data[0].keys())
+    else:
+        try:
+            import pandas as _pd
+            if isinstance(data, _pd.DataFrame):
+                columns, rows = list(data.columns), data.to_dict('records')
+        except ImportError:
+            pass
+    if not rows or not columns:
+        display(str(data))
+        return
+    def _e(s):
+        return str(s).replace('&','&amp;').replace('<','&lt;').replace('>','&gt;')
+    hdr = ''.join(f'<th>{_e(c)}</th>' for c in columns)
+    bdy = ''.join(
+        f'<tr>{"".join(f"<td>{_e(r.get(c,"") if isinstance(r,dict) else "")}</td>" for c in columns)}</tr>'
+        for r in rows
+    )
+    display(f'<div class="oml-md-table-wrapper"><table class="oml-md-table"><thead><tr>{hdr}</tr></thead><tbody>{bdy}</tbody></table></div>')
+`;
+
+let pyodideExecQueue: Promise<unknown> = Promise.resolve();
+
+async function executePyCode(
+    code: string,
+    blockCache: Record<string, QueryResult>,
+    container: HTMLElement
+): Promise<{ error?: string }> {
+    let resolve!: (r: { error?: string }) => void;
+    const queued = new Promise<{ error?: string }>((res) => { resolve = res; });
+    pyodideExecQueue = pyodideExecQueue.then(() => _executePyCode(code, blockCache, container).then(resolve, (e) => resolve({ error: String(e) })));
+    return queued;
+}
+
+async function _executePyCode(
+    code: string,
+    blockCache: Record<string, QueryResult>,
+    container: HTMLElement
+): Promise<{ error?: string }> {
+    if (!container.isConnected) { return {}; }
+    let statusEl: HTMLElement | undefined = document.createElement('div');
+    statusEl.className = 'oml-md-js-text-output';
+    statusEl.textContent = 'Running Python block…';
+    container.appendChild(statusEl);
+    const clearStatus = (): void => {
+        if (statusEl?.parentElement === container) {
+            container.removeChild(statusEl);
+        }
+        statusEl = undefined;
+    };
+    const appendHtml = (html: string): void => {
+        clearStatus();
+        const el = document.createElement('div');
+        el.className = 'oml-md-js-html-output';
+        el.style.color = window.getComputedStyle(document.body).color;
+        el.innerHTML = html;
+        container.appendChild(el);
+    };
+    const appendText = (text: string): void => {
+        clearStatus();
+        const pre = document.createElement('pre');
+        pre.className = 'oml-md-js-text-output';
+        pre.textContent = text;
+        container.appendChild(pre);
+    };
+    let pyodide: PyodideInterface;
+    try {
+        pyodide = await getPyodide();
+        // Keep a single stable status message until output appears.
+    } catch (e) {
+        clearStatus();
+        return { error: `Failed to load Pyodide: ${e instanceof Error ? e.message : String(e)}` };
+    }
+    try {
+        await pyodide.runPythonAsync(PY_BOOTSTRAP);
+    } catch (e) {
+        clearStatus();
+        return { error: `Python bootstrap failed: ${e instanceof Error ? e.message : String(e)}` };
+    }
+    pyodide.globals.set('_js_display', appendHtml);
+    pyodide.globals.set('_js_query', (sparql: string) =>
+        blockCache[sparql] ?? { success: false, columns: [], rows: [], error: 'SPARQL not pre-fetched' });
+    pyodide.setStdout({ batched: appendText });
+    pyodide.setStderr({ batched: () => { /* suppress library noise */ } });
+    try {
+        await pyodide.runPythonAsync(code);
+        clearStatus();
+        return {};
+    } catch (error) {
+        clearStatus();
+        return { error: error instanceof Error ? `${error.name}: ${error.message}` : String(error) };
+    }
+}
+
+async function applyPyBlocks(): Promise<void> {
+    const cache = getScriptSparqlCache();
+    for (const code of Array.from(document.querySelectorAll<HTMLElement>('pre > code.language-python'))) {
+        const pre = code.parentElement as HTMLElement;
+        const blockId = pre.dataset.omlBlockId ?? '';
+        const blockCache = cache[blockId] ?? {};
+        const source = code.textContent ?? '';
+        const cacheKey = buildPythonPanelCacheKey(blockId, source, blockCache);
+        const cachedHtml = pythonPanelHtmlCache[cacheKey];
+        if (typeof cachedHtml === 'string') {
+            const panel = makeScriptPanel();
+            panel.innerHTML = cachedHtml;
+            pre.replaceWith(panel);
+            continue;
+        }
+        const panel = makeScriptPanel();
+        pre.replaceWith(panel);
+        const result = await executePyCode(source, blockCache, panel);
+        appendResult(panel, result);
+        if (!result.error) {
+            rememberPythonPanelCache(cacheKey, panel.innerHTML);
+        }
+    }
+}
+
+// ── R (WebR) blocks ───────────────────────────────────────────────────────────
+
+interface WebRInterface {
+    init(): Promise<void>;
+    evalRVoid(code: string): Promise<void>;
+    evalRString(code: string): Promise<string>;
+}
+
+let webRInstance: WebRInterface | null = null;
+let webRLoading: Promise<WebRInterface> | null = null;
+
+async function getWebR(): Promise<WebRInterface> {
+    if (webRInstance) { return webRInstance; }
+    if (webRLoading) { return webRLoading; }
+    webRLoading = (async () => {
+        // Register the interceptor for any resources WebR fetches from the main
+        // thread. Note: R's WASM is loaded inside a Web Worker, so those fetches
+        // are not visible here and are not cached. Full offline support for WebR
+        // would require a Service Worker to intercept worker-origin requests.
+        runtimeCacheInterceptors.set(WEBR_CDN_BASE, WEBR_CACHE_NAME);
+        const dynamicImport = new Function('url', 'return import(url)') as
+            (url: string) => Promise<{ WebR: new () => WebRInterface }>;
+        const { WebR: WebRClass } = await dynamicImport(`${WEBR_CDN_BASE}/webr.mjs`);
+        const webR = new WebRClass();
+        await webR.init();
+        webRInstance = webR;
+        return webR;
+    })();
+    return webRLoading;
+}
+
+const R_DISPLAY_SENTINEL = '<<OML_DISPLAY>>';
+const R_DISPLAY_END = '<</OML_DISPLAY>>';
+
+const R_BOOTSTRAP = `
+display <- function(html) {
+    .oml_buf_ <<- c(.oml_buf_, paste0('<<OML_DISPLAY>>', html, '<</OML_DISPLAY>>'))
+}
+table <- function(data) {
+    if (is.data.frame(data) || is.matrix(data)) {
+        df <- as.data.frame(data)
+        cols <- colnames(df)
+        hdr <- paste0('<th>', cols, '</th>', collapse='')
+        rows <- apply(df, 1, function(r) {
+            cells <- paste0('<td>', r, '</td>', collapse='')
+            paste0('<tr>', cells, '</tr>')
+        })
+        bdy <- paste(rows, collapse='')
+        display(paste0('<div class="oml-md-table-wrapper"><table class="oml-md-table"><thead><tr>',
+                       hdr, '</tr></thead><tbody>', bdy, '</tbody></table></div>'))
+    } else { print(data) }
+}
+load <- function(pkg) {
+    if (!requireNamespace(pkg, quietly=TRUE)) { webr::install(pkg) }
+    library(pkg, character.only=TRUE)
+}
+`;
+
+function buildRDataFrameCode(result: QueryResult, varName: string): string {
+    const rStr = (s: string): string =>
+        '"' + s.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '') + '"';
+    if (!result.success) {
+        return `${varName} <- (function() stop(${rStr(result.error ?? 'SPARQL query failed')}))()`;
+    }
+    if (result.rows.length === 0) {
+        const colDefs = result.columns.map((c) => `  ${rStr(c)} = character(0)`).join(',\n');
+        return `${varName} <- data.frame(${colDefs ? '\n' + colDefs + ',\n' : ''}  stringsAsFactors = FALSE, check.names = FALSE)`;
+    }
+    const colDefs = result.columns.map((col) => {
+        const vals = result.rows.map((row) => rStr(String(row[col] ?? ''))).join(', ');
+        return `  ${rStr(col)} = c(${vals})`;
+    }).join(',\n');
+    return `${varName} <- data.frame(\n${colDefs},\n  stringsAsFactors = FALSE, check.names = FALSE\n)`;
+}
+
+function extractRQueryStrings(code: string): string[] {
+    const re = /\bquery\s*\(\s*(?:"((?:[^"\\]|\\[\s\S])*)"|'((?:[^'\\]|\\[\s\S])*)')\s*\)/g;
+    const seen = new Set<string>();
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(code)) !== null) {
+        const raw = m[1] ?? m[2];
+        const unesc = raw.replace(/\\n/g, '\n').replace(/\\t/g, '\t').replace(/\\"/g, '"').replace(/\\'/g, "'").replace(/\\\\/g, '\\');
+        seen.add(unesc);
+    }
+    return [...seen];
+}
+
+function rewriteRQueryCalls(code: string, queryMap: Map<string, string>): string {
+    const re = /\bquery\s*\(\s*(?:"((?:[^"\\]|\\[\s\S])*)"|'((?:[^'\\]|\\[\s\S])*)')\s*\)/g;
+    return code.replace(re, (_, dq: string, sq: string) => {
+        const raw = dq ?? sq;
+        const sparql = raw.replace(/\\n/g, '\n').replace(/\\t/g, '\t').replace(/\\"/g, '"').replace(/\\'/g, "'").replace(/\\\\/g, '\\');
+        return queryMap.get(sparql) ?? 'data.frame()';
+    });
+}
+
+function processROutput(
+    raw: string,
+    appendHtml: (html: string) => void,
+    appendText: (text: string) => void
+): void {
+    let remaining = raw;
+    while (remaining.length > 0) {
+        const start = remaining.indexOf(R_DISPLAY_SENTINEL);
+        if (start === -1) { if (remaining.trim()) { appendText(remaining); } break; }
+        if (start > 0) { appendText(remaining.slice(0, start)); }
+        const end = remaining.indexOf(R_DISPLAY_END, start + R_DISPLAY_SENTINEL.length);
+        if (end === -1) { appendText(remaining.slice(start)); break; }
+        appendHtml(remaining.slice(start + R_DISPLAY_SENTINEL.length, end));
+        remaining = remaining.slice(end + R_DISPLAY_END.length);
+    }
+}
+
+async function executeRCode(
+    code: string,
+    blockCache: Record<string, QueryResult>,
+    container: HTMLElement
+): Promise<{ error?: string }> {
+    let statusEl: HTMLElement | undefined = document.createElement('div');
+    statusEl.className = 'oml-md-js-text-output';
+    statusEl.textContent = 'Running R block…';
+    container.appendChild(statusEl);
+    const clearStatus = (): void => {
+        if (statusEl?.parentElement === container) {
+            container.removeChild(statusEl);
+        }
+        statusEl = undefined;
+    };
+    const appendHtml = (html: string): void => {
+        clearStatus();
+        const el = document.createElement('div');
+        el.className = 'oml-md-js-html-output';
+        el.style.color = window.getComputedStyle(document.body).color;
+        el.innerHTML = html;
+        container.appendChild(el);
+    };
+    const appendText = (text: string): void => {
+        clearStatus();
+        const pre = document.createElement('pre');
+        pre.className = 'oml-md-js-text-output';
+        pre.textContent = text;
+        container.appendChild(pre);
+    };
+    const queryStrings = extractRQueryStrings(code);
+    const prefetchResults = queryStrings.map((sparql, i) => {
+        const varName = `.oml_q${i}_`;
+        const result = blockCache[sparql] ?? { success: false, columns: [], rows: [], error: 'SPARQL not pre-fetched' };
+        return { sparql, varName, preamble: buildRDataFrameCode(result, varName) };
+    });
+    let webR: WebRInterface;
+    try {
+        webR = await getWebR();
+    } catch (e) {
+        clearStatus();
+        return { error: `Failed to load WebR: ${e instanceof Error ? e.message : String(e)}` };
+    }
+    try {
+        await webR.evalRVoid(R_BOOTSTRAP);
+    } catch (e) {
+        clearStatus();
+        return { error: `R bootstrap failed: ${e instanceof Error ? e.message : String(e)}` };
+    }
+    let finalCode = code;
+    if (prefetchResults.length > 0) {
+        const queryMap = new Map(prefetchResults.map((r) => [r.sparql, r.varName] as [string, string]));
+        finalCode = prefetchResults.map((r) => r.preamble).join('\n') + '\n' + rewriteRQueryCalls(code, queryMap);
+    }
+    try {
+        await webR.evalRVoid(
+            '.oml_buf_ <- character(0)\n' +
+            'tryCatch({\n' +
+            finalCode + '\n' +
+            '}, error = function(e) { .oml_buf_ <<- c(.oml_buf_, paste0("Error: ", conditionMessage(e))) })\n'
+        );
+        const rawOutput = await webR.evalRString('paste(.oml_buf_, collapse="")');
+        processROutput(rawOutput, appendHtml, appendText);
+        clearStatus();
+        return {};
+    } catch (error) {
+        clearStatus();
+        return { error: error instanceof Error ? `${error.name}: ${error.message}` : String(error) };
+    }
+}
+
+async function applyRBlocks(): Promise<void> {
+    const cache = getScriptSparqlCache();
+    for (const code of Array.from(document.querySelectorAll<HTMLElement>('pre > code.language-r'))) {
+        const pre = code.parentElement as HTMLElement;
+        const blockId = pre.dataset.omlBlockId ?? '';
+        const blockCache = cache[blockId] ?? {};
+        const source = code.textContent ?? '';
+        const cacheKey = buildRPanelCacheKey(blockId, source, blockCache);
+        const cachedHtml = rPanelHtmlCache[cacheKey];
+        if (typeof cachedHtml === 'string') {
+            const panel = makeScriptPanel();
+            panel.innerHTML = cachedHtml;
+            pre.replaceWith(panel);
+            continue;
+        }
+        const panel = makeScriptPanel();
+        pre.replaceWith(panel);
+        const result = await executeRCode(source, blockCache, panel);
+        appendResult(panel, result);
+        if (!result.error) {
+            rememberRPanelCache(cacheKey, panel.innerHTML);
+        }
+    }
+}
+
+void bootstrapStaticRender();