@owomark/view 0.1.5 → 0.1.6

package/dist/{chunk-Y72HQJQI.js → chunk-KHKPOH74.js}

@@ -11,10 +11,9 @@ var HEAVY_LARGE_THRESHOLD = 50;
 var HEAVY_SMALL_HEIGHT = 60;
 var HEAVY_MEDIUM_HEIGHT = 200;
 var HEAVY_LARGE_HEIGHT = 500;
-var HEAVY_KINDS = /* @__PURE__ */ new Set(["mermaid", "katex", "math-block", "chart", "embed"]);
-function estimateBlockHeight(block) {
+function estimateBlockHeight(block, registry) {
   const lineCount = block.endLine - block.startLine + 1;
-  if (HEAVY_KINDS.has(block.kind)) {
+  if (registry?.isHeavy(block.kind)) {
     return estimateHeavyBlockHeight(lineCount);
   }
   if (block.kind === "code-fence") {

package/dist/{chunk-F3LG7AML.js → chunk-WA6XHBZS.js}

@@ -1,25 +1,44 @@
-// src/virtual/viewport-manager.ts
-var BLOCK_ID_ATTR = "data-block-id";
-var SOURCE_START_ATTR = "data-source-line-start";
-var SOURCE_END_ATTR = "data-source-line-end";
-var HEIGHT_TRANSITION = "top 0.15s ease-out";
-var TOTAL_HEIGHT_TRANSITION = "height 0.15s ease-out";
+// src/dom/skeleton.ts
 var SKELETON_GAP = 8;
-function createSkeletonHtml(height) {
-  const innerHeight = Math.max(height - SKELETON_GAP, 8);
-  return `<div class="owo-skeleton" style="height:${innerHeight}px;margin-bottom:${SKELETON_GAP}px;border-radius:4px;background:linear-gradient(90deg,#e2e2e2 25%,#efefef 50%,#e2e2e2 75%);background-size:200% 100%;animation:zm-skeleton-pulse 1.5s ease-in-out infinite" aria-hidden="true"></div>`;
+var SKELETON_LINE_HEIGHT = 14;
+var SKELETON_PADDING = 24;
+function createSkeletonHtml(options = {}) {
+  const { height, lines } = options;
+  const lineCount = lines ?? (height != null ? Math.max(1, Math.min(5, Math.round(Math.max(height - SKELETON_PADDING, 8) / (SKELETON_LINE_HEIGHT + SKELETON_GAP)))) : 3);
+  const heightStyle = height != null ? ` style="height:${height}px;min-height:${height}px"` : "";
+  const lineEls = [];
+  for (let i = 0; i < lineCount; i++) {
+    const isLast = i === lineCount - 1;
+    lineEls.push(`<div class="owo-mdx-skeleton owo-mdx-skeleton-line"${isLast ? ' style="width:60%"' : ""}></div>`);
+  }
+  return `<div class="owo-mdx-skeleton-block"${heightStyle} aria-hidden="true">${lineEls.join("")}</div>`;
 }
+var SKELETON_CSS = `
+.owo-mdx-skeleton{background:linear-gradient(90deg,var(--owo-skeleton-base,#e5e7eb) 25%,var(--owo-skeleton-shine,#f3f4f6) 50%,var(--owo-skeleton-base,#e5e7eb) 75%);background-size:200% 100%;animation:owo-mdx-skeleton-shimmer 1.5s ease-in-out infinite;border-radius:4px}
+@keyframes owo-mdx-skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
+.owo-mdx-skeleton-block{display:flex;flex-direction:column;gap:8px;padding:12px 0}
+.owo-mdx-skeleton-line{height:14px}
+.owo-mdx-skeleton-line:last-child{width:60%}
+`.trim();
+var STYLE_ID = "owo-mdx-skeleton-styles";
 function ensureSkeletonStyles(doc) {
   try {
-    if (doc.getElementById?.("owo-skeleton-styles")) return;
+    if (doc.getElementById?.(STYLE_ID)) return;
     const style = doc.createElement("style");
-    style.id = "owo-skeleton-styles";
-    style.textContent = `@keyframes zm-skeleton-pulse{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
+    style.id = STYLE_ID;
+    style.textContent = SKELETON_CSS;
     const target = doc.head ?? doc.body;
     target?.appendChild(style);
   } catch {
   }
 }
+
+// src/virtual/viewport-manager.ts
+var BLOCK_ID_ATTR = "data-block-id";
+var SOURCE_START_ATTR = "data-source-line-start";
+var SOURCE_END_ATTR = "data-source-line-end";
+var HEIGHT_TRANSITION = "top 0.15s ease-out";
+var TOTAL_HEIGHT_TRANSITION = "height 0.15s ease-out";
 var VirtualViewportManager = class {
   root = null;
   scrollContainer = null;
@@ -93,7 +112,7 @@ var VirtualViewportManager = class {
         wrapper.style.left = "0";
         wrapper.style.width = "100%";
         wrapper.style.transition = HEIGHT_TRANSITION;
-        wrapper.innerHTML = createSkeletonHtml(layout.height);
+        wrapper.innerHTML = createSkeletonHtml({ height: layout.height });
         this.contentLayer.appendChild(wrapper);
         this.mounted.set(block.blockId, wrapper);
         newlyMounted.add(block.blockId);
@@ -188,5 +207,7 @@ var VirtualViewportManager = class {
 };
 
 export {
+  createSkeletonHtml,
+  ensureSkeletonStyles,
   VirtualViewportManager
 };

package/dist/index.d.ts

@@ -1,5 +1,7 @@
-import { OwoMarkCore, OwoMarkEditorInstance, OwoMarkSharedState, PreviewBlockKind, PreviewBlock } from '@owomark/core';
+import { OwoMarkCore, OwoMarkEditorInstance, PreviewBlock } from '@owomark/core';
 export { DocumentChangeCallback } from '@owomark/core';
+import { O as OwoMarkPreviewEngineOptions, a as OwoMarkPreviewEngine, P as PreviewRendererRegistry, b as PreviewTaskScheduler } from './types-DsL_4tUb.js';
+export { c as PreviewBlockMetadata, d as PreviewBlockRenderer, e as PreviewCacheEntry, f as PreviewRenderContext, g as PreviewRenderPhase, h as PreviewRenderResult, i as PreviewRendererDefinition, j as PreviewRendererMode, k as PreviewStrategy, l as PreviewTaskPriority } from './types-DsL_4tUb.js';
 
 /**
  * Three-layer view engine for OwoMark.
@@ -45,77 +47,6 @@ declare function createOwoMarkView(core: OwoMarkCore, element: HTMLElement): Owo
  */
 declare function createOwoMarkVanillaEditor(): OwoMarkEditorInstance;
 
-type PreviewRenderPhase = 'idle' | 'rendering' | 'highlighting' | 'ready' | 'error';
-type PreviewCacheEntry = {
-    blockId: string;
-    renderKey: string;
-    html: string;
-    highlighted: boolean;
-    themeKey: string;
-    updatedAt: number;
-};
-type PreviewRenderContext = {
-    version: number;
-    themeKey: string;
-    abortSignal?: AbortSignal;
-    /**
-     * Line offset to add to source-line attributes in the rendered HTML.
-     * When a block starts at line N in the document, the renderer processes
-     * its raw content starting from line 1; this offset (N - 1) must be
-     * added to `data-source-line-start/end` so scroll sync anchors map
-     * to the correct document lines.
-     */
-    sourceLineOffset: number;
-};
-type PreviewRenderResult = {
-    kind: 'html';
-    html: string;
-} | {
-    kind: 'dom';
-    mount: (container: HTMLElement) => void;
-    unmount?: () => void;
-};
-type PreviewRendererMode = 'html-worker-safe' | 'dom-main-thread';
-type PreviewTaskPriority = 'realtime' | 'deferred';
-type PreviewRendererDefinition = {
-    mode: PreviewRendererMode;
-    priority: PreviewTaskPriority;
-    render: PreviewBlockRenderer;
-    version: string;
-};
-type PreviewBlockRenderer = (block: PreviewBlock, context: PreviewRenderContext) => Promise<PreviewRenderResult> | PreviewRenderResult;
-type PreviewRendererRegistry = {
-    get(kind: PreviewBlockKind): PreviewRendererDefinition | null;
-    register(kind: PreviewBlockKind, renderer: PreviewRendererDefinition): void;
-    unregister(kind: PreviewBlockKind): void;
-};
-type PreviewStrategy = 'incremental' | 'virtual';
-type OwoMarkPreviewEngineOptions = {
-    strategy?: PreviewStrategy;
-    themeKey?: string;
-    registry?: PreviewRendererRegistry;
-    viewportFirst?: boolean;
-    /**
-     * External block renderer function. When provided, the engine uses this
-     * instead of the built-in default renderer. This allows the host to supply
-     * its own Markdown pipeline (unified, remark, rehype, Shiki, etc.) without
-     * the preview package bundling those heavy dependencies.
-     */
-    renderBlock?: (block: PreviewBlock, context: PreviewRenderContext) => Promise<string>;
-    /**
-     * Called after every DOM mutation — including idle-backfilled and deferred
-     * block renders — not just after the synchronous update() return.
-     * Use for scroll sync or other post-DOM-update side effects.
-     */
-    onContentUpdate?: () => void;
-};
-type OwoMarkPreviewEngine = {
-    mount(root: HTMLElement): void;
-    destroy(): void;
-    update(state: OwoMarkSharedState): void;
-    getRenderedVersion(): number;
-};
-
 /**
  * OwoMark Preview Engine factory.
  *
@@ -145,6 +76,18 @@ declare function createRendererRegistry(): PreviewRendererRegistry;
  */
 declare function renderBlockDefault(block: PreviewBlock): string;
 
+declare function createPreviewTaskScheduler(options?: {
+    poolSize?: number;
+    onCrash?: () => void;
+}): PreviewTaskScheduler;
+
+type SkeletonOptions = {
+    height?: number;
+    lines?: number;
+};
+declare function createSkeletonHtml(options?: SkeletonOptions): string;
+declare function ensureSkeletonStyles(doc: Document): void;
+
 /**
  * DOM patcher: blockId-driven incremental DOM updates.
  *
@@ -226,4 +169,4 @@ declare const THEME_DARK_CLASS = "owo-theme-dark";
 type OwoMarkThemeName = 'light' | 'dark' | string;
 declare function getThemeClassName(theme: OwoMarkThemeName): string;
 
-export { type OwoMarkPreviewEngine, type OwoMarkPreviewEngineOptions, type OwoMarkThemeName, type OwoMarkView, type OwoMarkViewEngine, type PreviewBlockRenderer, type PreviewCacheEntry, PreviewDomPatcher, type PreviewRenderContext, type PreviewRenderPhase, type PreviewRenderResult, type PreviewRendererDefinition, type PreviewRendererMode, type PreviewRendererRegistry, type PreviewStrategy, type PreviewTaskPriority, SideAnnotationPositioner, THEME_DARK_CLASS, THEME_LIGHT_CLASS, type ViewEngineOptions, createOwoMarkPreviewEngine, createOwoMarkVanillaEditor, createOwoMarkView, createRendererRegistry, createViewEngine, getThemeClassName, renderBlockDefault };
+export { OwoMarkPreviewEngine, OwoMarkPreviewEngineOptions, type OwoMarkThemeName, type OwoMarkView, type OwoMarkViewEngine, PreviewDomPatcher, PreviewRendererRegistry, PreviewTaskScheduler, SideAnnotationPositioner, type SkeletonOptions, THEME_DARK_CLASS, THEME_LIGHT_CLASS, type ViewEngineOptions, createOwoMarkPreviewEngine, createOwoMarkVanillaEditor, createOwoMarkView, createPreviewTaskScheduler, createRendererRegistry, createSkeletonHtml, createViewEngine, ensureSkeletonStyles, getThemeClassName, renderBlockDefault };

package/dist/index.js

@@ -7,10 +7,12 @@ import {
 import {
   FALLBACK_BLOCK_HEIGHT,
   estimateBlockHeight
-} from "./chunk-Y72HQJQI.js";
+} from "./chunk-KHKPOH74.js";
 import {
-  VirtualViewportManager
-} from "./chunk-F3LG7AML.js";
+  VirtualViewportManager,
+  createSkeletonHtml,
+  ensureSkeletonStyles
+} from "./chunk-WA6XHBZS.js";
 
 // src/editor.ts
 import { createDomAdapter } from "@owomark/core/internal/dom-adapter";
@@ -809,17 +811,60 @@ var PreviewDomPatcher = class {
 };
 
 // src/renderer/registry.ts
+var DEFAULT_HEAVY_KINDS = [
+  { kind: "mermaid", meta: { mode: "html-worker-safe", priority: "deferred", heavy: true } },
+  { kind: "katex", meta: { mode: "html-worker-safe", priority: "deferred", heavy: true } },
+  { kind: "math-block", meta: { mode: "html-worker-safe", priority: "deferred", heavy: true } },
+  { kind: "chart", meta: { mode: "html-worker-safe", priority: "deferred", heavy: true } },
+  { kind: "embed", meta: { mode: "html-worker-safe", priority: "deferred", heavy: true } }
+];
 function createRendererRegistry() {
   const renderers = /* @__PURE__ */ new Map();
+  const metadata = /* @__PURE__ */ new Map();
+  for (const { kind, meta } of DEFAULT_HEAVY_KINDS) {
+    metadata.set(kind, meta);
+  }
   return {
     get(kind) {
       return renderers.get(kind) ?? null;
     },
     register(kind, renderer) {
       renderers.set(kind, renderer);
+      if (!metadata.has(kind)) {
+        metadata.set(kind, {
+          mode: renderer.mode,
+          priority: renderer.priority
+        });
+      }
     },
     unregister(kind) {
       renderers.delete(kind);
+    },
+    registerMetadata(kind, meta) {
+      metadata.set(kind, meta);
+    },
+    isHeavy(kind) {
+      const meta = metadata.get(kind);
+      if (meta?.heavy) return true;
+      const def = renderers.get(kind);
+      return def?.priority === "deferred" || false;
+    },
+    getMode(kind) {
+      const def = renderers.get(kind);
+      if (def) return def.mode;
+      return metadata.get(kind)?.mode ?? null;
+    },
+    getPriority(kind) {
+      const def = renderers.get(kind);
+      if (def) return def.priority;
+      return metadata.get(kind)?.priority ?? null;
+    },
+    listRegistered() {
+      const kinds = /* @__PURE__ */ new Set([
+        ...renderers.keys(),
+        ...metadata.keys()
+      ]);
+      return Array.from(kinds);
     }
   };
 }
@@ -928,7 +973,7 @@ function isDeferred(block, registry) {
   const def = registry.get(block.kind);
   return def?.priority === "deferred";
 }
-function createRenderBlockFull(registry, renderCache, externalRenderBlock) {
+function createRenderBlockFull(registry, renderCache, externalRenderBlock, scheduler) {
   return async function renderBlockFull(block, baseContext) {
     const context = {
       ...baseContext,
@@ -936,6 +981,14 @@ function createRenderBlockFull(registry, renderCache, externalRenderBlock) {
     };
     const customRenderer = registry.get(block.kind);
     if (customRenderer) {
+      if (customRenderer.mode === "html-worker-safe" && customRenderer.workerModuleUrl && scheduler) {
+        try {
+          const html2 = await scheduler.submitWorkerTask(block, customRenderer, context);
+          renderCache.set(block.renderKey, html2);
+          return { kind: "html", html: html2 };
+        } catch {
+        }
+      }
       const result = await customRenderer.render(block, context);
       if (result.kind === "html") {
         renderCache.set(block.renderKey, result.html);
@@ -962,6 +1015,7 @@ function createIncrementalEngine(options) {
   const themeKey = options?.themeKey ?? "";
   const viewportFirst = options?.viewportFirst ?? false;
   const registry = options?.registry ?? createRendererRegistry();
+  const scheduler = options?.scheduler;
   const externalRenderBlock = options?.renderBlock;
   const onContentUpdate = options?.onContentUpdate;
   const patcher = new PreviewDomPatcher();
@@ -972,7 +1026,7 @@ function createIncrementalEngine(options) {
   let pendingAbort = null;
   let pendingIdleIds = [];
   let pendingBackfill = /* @__PURE__ */ new Set();
-  const renderBlockFull = createRenderBlockFull(registry, renderCache, externalRenderBlock);
+  const renderBlockFull = createRenderBlockFull(registry, renderCache, externalRenderBlock, scheduler);
   function applyResult(blockId, result) {
     if (result.kind === "html") {
       patcher.patchBlockHtml(blockId, result.html);
@@ -1018,12 +1072,14 @@ function createIncrementalEngine(options) {
   return {
     mount(root) {
       patcher.mount(root);
+      ensureSkeletonStyles(root.ownerDocument);
       mounted = true;
     },
     destroy() {
       pendingAbort?.abort();
       pendingAbort = null;
       cancelAllIdle(pendingIdleIds);
+      scheduler?.release();
       patcher.destroy();
       renderCache.clear();
       pendingBackfill.clear();
@@ -1101,18 +1157,26 @@ function createIncrementalEngine(options) {
       }
     }
     if (signal.aborted) return;
+    pendingBackfill = /* @__PURE__ */ new Set();
+    for (const block of realtimeOffscreen) {
+      const height = estimateBlockHeight(block, registry);
+      htmlMap.set(block.blockId, createSkeletonHtml({ height }));
+      pendingBackfill.add(block.blockId);
+    }
+    for (const block of deferredAll) {
+      const height = estimateBlockHeight(block, registry);
+      htmlMap.set(block.blockId, createSkeletonHtml({ height }));
+      pendingBackfill.add(block.blockId);
+    }
     patcher.fullRender(blocks, htmlMap);
     for (const { blockId, result } of domMounts) {
       if (signal.aborted) return;
       applyResult(blockId, result);
     }
-    pendingBackfill = /* @__PURE__ */ new Set();
     for (const block of realtimeOffscreen) {
-      pendingBackfill.add(block.blockId);
       scheduleBlockRender(block, baseContext, signal, state.version);
     }
     for (const block of deferredAll) {
-      pendingBackfill.add(block.blockId);
       scheduleBlockRender(block, baseContext, signal, state.version);
     }
   }
@@ -1229,6 +1293,7 @@ var OffscreenMeasurer = class {
 function createVirtualEngine(options) {
   const themeKey = options?.themeKey ?? "";
   const registry = options?.registry ?? createRendererRegistry();
+  const scheduler = options?.scheduler;
   const externalRenderBlock = options?.renderBlock;
   const onContentUpdate = options?.onContentUpdate;
   const layoutMap = new BlockLayoutMap();
@@ -1236,7 +1301,7 @@ function createVirtualEngine(options) {
   const measurer = new OffscreenMeasurer();
   const viewport = new VirtualViewportManager();
   const renderCache = /* @__PURE__ */ new Map();
-  const renderBlockFull = createRenderBlockFull(registry, renderCache, externalRenderBlock);
+  const renderBlockFull = createRenderBlockFull(registry, renderCache, externalRenderBlock, scheduler);
   let renderedVersion = 0;
   let lastBlocks = [];
   let blockMap = /* @__PURE__ */ new Map();
@@ -1253,7 +1318,7 @@ function createVirtualEngine(options) {
   function getInitialHeight(block) {
     const cached = heightCache.get(block.renderKey);
     if (cached !== void 0) return cached;
-    return estimateBlockHeight(block);
+    return estimateBlockHeight(block, registry);
   }
   async function renderAndMountBlock(block, baseContext, signal) {
     if (signal.aborted) return;
@@ -1365,7 +1430,7 @@ function createVirtualEngine(options) {
       heightCache.clear();
       layoutMap.invalidateAll((blockId) => {
         const block = blockMap.get(blockId);
-        return block ? estimateBlockHeight(block) : FALLBACK_BLOCK_HEIGHT;
+        return block ? estimateBlockHeight(block, registry) : FALLBACK_BLOCK_HEIGHT;
       });
       return true;
     }
@@ -1400,6 +1465,7 @@ function createVirtualEngine(options) {
       blockResizeObserver?.disconnect();
       blockResizeObserver = null;
       observedWrappers.clear();
+      scheduler?.release();
       viewport.destroy();
       measurer.destroy();
       renderCache.clear();
@@ -1525,11 +1591,185 @@ function createOwoMarkPreviewEngine(options) {
       return createIncrementalEngine(options);
     case "virtual":
       return createVirtualEngine(options);
+    case "mdx":
+      throw new Error(
+        'The "mdx" strategy is implemented by @owomark/react OwoMarkPreview, not by @owomark/view createOwoMarkPreviewEngine().'
+      );
     default:
       throw new Error(`Unknown preview strategy: ${strategy}`);
   }
 }
 
+// src/worker/preview-task-scheduler.ts
+var MAX_CONSECUTIVE_CRASHES = 3;
+var CRASH_WINDOW_MS = 3e4;
+function serializeBlock(block) {
+  return {
+    kind: block.kind,
+    raw: block.raw,
+    blockId: block.blockId,
+    renderKey: block.renderKey,
+    startLine: block.startLine,
+    endLine: block.endLine
+  };
+}
+function createPreviewTaskScheduler(options) {
+  const poolSize = options?.poolSize ?? Math.max(1, (typeof navigator !== "undefined" ? navigator.hardwareConcurrency ?? 4 : 4) - 1);
+  let refCount = 1;
+  let taskCounter = 0;
+  let permanentlyFailed = false;
+  const crashTimestamps = [];
+  const pendingTasks = /* @__PURE__ */ new Map();
+  const workers = [];
+  let nextWorkerIndex = 0;
+  function createWorkerSlot() {
+    try {
+      if (typeof Worker === "undefined") return null;
+      const worker = new Worker(
+        new URL("./preview-render.worker.js", import.meta.url),
+        { type: "module" }
+      );
+      const slot = { worker, pendingCount: 0, dead: false };
+      worker.onmessage = (e) => {
+        const resp = e.data;
+        slot.pendingCount--;
+        const pending = pendingTasks.get(resp.taskId);
+        if (!pending) return;
+        pendingTasks.delete(resp.taskId);
+        if (resp.ok) {
+          pending.resolve(resp.html);
+        } else {
+          pending.reject(new Error(resp.error));
+        }
+      };
+      worker.onerror = () => {
+        slot.dead = true;
+        slot.pendingCount = 0;
+        worker.terminate();
+        recordCrash();
+        options?.onCrash?.();
+      };
+      return slot;
+    } catch {
+      return null;
+    }
+  }
+  function recordCrash() {
+    const now = Date.now();
+    crashTimestamps.push(now);
+    while (crashTimestamps.length > 0 && now - crashTimestamps[0] > CRASH_WINDOW_MS) {
+      crashTimestamps.shift();
+    }
+    if (crashTimestamps.length >= MAX_CONSECUTIVE_CRASHES) {
+      permanentlyFailed = true;
+      terminateAll();
+    }
+  }
+  function getLeastBusySlot() {
+    if (permanentlyFailed) return null;
+    let best = null;
+    for (const slot of workers) {
+      if (slot.dead) continue;
+      if (!best || slot.pendingCount < best.pendingCount) {
+        best = slot;
+      }
+    }
+    if (best) return best;
+    if (workers.length < poolSize) {
+      const slot = createWorkerSlot();
+      if (slot) {
+        workers.push(slot);
+        return slot;
+      }
+    }
+    for (let i = 0; i < workers.length; i++) {
+      if (workers[i].dead) {
+        const slot = createWorkerSlot();
+        if (slot) {
+          workers[i] = slot;
+          return slot;
+        }
+      }
+    }
+    return null;
+  }
+  function terminateAll() {
+    for (const slot of workers) {
+      if (!slot.dead) {
+        slot.dead = true;
+        slot.worker.terminate();
+      }
+    }
+    workers.length = 0;
+    for (const [, pending] of pendingTasks) {
+      pending.reject(new Error("Scheduler terminated"));
+    }
+    pendingTasks.clear();
+  }
+  const scheduler = {
+    submitWorkerTask(block, rendererDef, context) {
+      if (permanentlyFailed || !rendererDef.workerModuleUrl) {
+        return Promise.reject(new Error("Worker unavailable"));
+      }
+      const slot = getLeastBusySlot();
+      if (!slot) {
+        return Promise.reject(new Error("No worker available"));
+      }
+      const taskId = ++taskCounter;
+      return new Promise((resolve, reject) => {
+        pendingTasks.set(taskId, { resolve, reject });
+        slot.pendingCount++;
+        slot.worker.postMessage({
+          type: "render",
+          taskId,
+          block: serializeBlock(block),
+          rendererModuleUrl: rendererDef.workerModuleUrl,
+          context: {
+            version: context.version,
+            themeKey: context.themeKey,
+            sourceLineOffset: context.sourceLineOffset
+          }
+        });
+      });
+    },
+    cancel(taskId) {
+      const pending = pendingTasks.get(taskId);
+      if (pending) {
+        pendingTasks.delete(taskId);
+        pending.reject(new Error("Task cancelled"));
+      }
+      const msg = { type: "cancel", taskId };
+      for (const slot of workers) {
+        if (!slot.dead) slot.worker.postMessage(msg);
+      }
+    },
+    cancelAll() {
+      for (const [, pending] of pendingTasks) {
+        pending.reject(new Error("All tasks cancelled"));
+      }
+      pendingTasks.clear();
+      const msg = { type: "cancel-all" };
+      for (const slot of workers) {
+        if (!slot.dead) {
+          slot.pendingCount = 0;
+          slot.worker.postMessage(msg);
+        }
+      }
+    },
+    acquire() {
+      refCount++;
+      return scheduler;
+    },
+    release() {
+      if (--refCount <= 0) {
+        refCount = 0;
+        terminateAll();
+      }
+    }
+  };
+  return scheduler;
+}
+
 // src/dom/side-annotation-positioner.ts
 var SideAnnotationPositioner = class {
   container;
@@ -1641,8 +1881,11 @@ export {
   createOwoMarkPreviewEngine,
   createOwoMarkVanillaEditor,
   createOwoMarkView,
+  createPreviewTaskScheduler,
   createRendererRegistry,
+  createSkeletonHtml,
   createViewEngine,
+  ensureSkeletonStyles,
   getThemeClassName,
   renderBlockDefault
 };

package/dist/internal/virtual/height-estimator.d.ts

@@ -1,13 +1,6 @@
 import { PreviewBlock } from '@owomark/core';
+import { P as PreviewRendererRegistry } from '../../types-DsL_4tUb.js';
 
-/**
- * Heuristic height estimation for blocks before measurement.
- *
- * Uses block kind and source line count to produce a rough height estimate.
- * These estimates are used as initial placeholder heights in the coordinate
- * table until real measurement completes.
- */
-
-declare function estimateBlockHeight(block: PreviewBlock): number;
+declare function estimateBlockHeight(block: PreviewBlock, registry?: PreviewRendererRegistry): number;
 
 export { estimateBlockHeight };

package/dist/internal/virtual/height-estimator.js

@@ -1,6 +1,6 @@
 import {
   estimateBlockHeight
-} from "../../chunk-Y72HQJQI.js";
+} from "../../chunk-KHKPOH74.js";
 export {
   estimateBlockHeight
 };

package/dist/internal/virtual/viewport-manager.js

@@ -1,6 +1,6 @@
 import {
   VirtualViewportManager
-} from "../../chunk-F3LG7AML.js";
+} from "../../chunk-WA6XHBZS.js";
 export {
   VirtualViewportManager
 };

package/dist/types-DsL_4tUb.d.ts

@@ -0,0 +1,93 @@
+import { OwoMarkSharedState, PreviewBlockKind, PreviewBlock } from '@owomark/core';
+
+type PreviewRenderPhase = 'idle' | 'rendering' | 'highlighting' | 'ready' | 'error';
+type PreviewCacheEntry = {
+    blockId: string;
+    renderKey: string;
+    html: string;
+    highlighted: boolean;
+    themeKey: string;
+    updatedAt: number;
+};
+type PreviewRenderContext = {
+    version: number;
+    themeKey: string;
+    abortSignal?: AbortSignal;
+    /**
+     * Line offset to add to source-line attributes in the rendered HTML.
+     * When a block starts at line N in the document, the renderer processes
+     * its raw content starting from line 1; this offset (N - 1) must be
+     * added to `data-source-line-start/end` so scroll sync anchors map
+     * to the correct document lines.
+     */
+    sourceLineOffset: number;
+};
+type PreviewRenderResult = {
+    kind: 'html';
+    html: string;
+} | {
+    kind: 'dom';
+    mount: (container: HTMLElement) => void;
+    unmount?: () => void;
+};
+type PreviewRendererMode = 'html-worker-safe' | 'dom-main-thread';
+type PreviewTaskPriority = 'realtime' | 'deferred';
+type PreviewRendererDefinition = {
+    mode: PreviewRendererMode;
+    priority: PreviewTaskPriority;
+    render: PreviewBlockRenderer;
+    version: string;
+    workerModuleUrl?: string;
+};
+type PreviewBlockRenderer = (block: PreviewBlock, context: PreviewRenderContext) => Promise<PreviewRenderResult> | PreviewRenderResult;
+type PreviewBlockMetadata = {
+    mode: PreviewRendererMode;
+    priority: PreviewTaskPriority;
+    heavy?: boolean;
+};
+type PreviewRendererRegistry = {
+    get(kind: PreviewBlockKind): PreviewRendererDefinition | null;
+    register(kind: PreviewBlockKind, renderer: PreviewRendererDefinition): void;
+    unregister(kind: PreviewBlockKind): void;
+    registerMetadata(kind: PreviewBlockKind, meta: PreviewBlockMetadata): void;
+    isHeavy(kind: PreviewBlockKind): boolean;
+    getMode(kind: PreviewBlockKind): PreviewRendererMode | null;
+    getPriority(kind: PreviewBlockKind): PreviewTaskPriority | null;
+    listRegistered(): PreviewBlockKind[];
+};
+type PreviewTaskScheduler = {
+    submitWorkerTask(block: PreviewBlock, rendererDef: PreviewRendererDefinition, context: PreviewRenderContext): Promise<string>;
+    cancel(taskId: number): void;
+    cancelAll(): void;
+    acquire(): PreviewTaskScheduler;
+    release(): void;
+};
+type PreviewStrategy = 'incremental' | 'virtual' | 'mdx';
+type OwoMarkPreviewEngineOptions = {
+    strategy?: PreviewStrategy;
+    themeKey?: string;
+    registry?: PreviewRendererRegistry;
+    scheduler?: PreviewTaskScheduler;
+    viewportFirst?: boolean;
+    /**
+     * External block renderer function. When provided, the engine uses this
+     * instead of the built-in default renderer. This allows the host to supply
+     * its own Markdown pipeline (unified, remark, rehype, Shiki, etc.) without
+     * the preview package bundling those heavy dependencies.
+     */
+    renderBlock?: (block: PreviewBlock, context: PreviewRenderContext) => Promise<string>;
+    /**
+     * Called after every DOM mutation — including idle-backfilled and deferred
+     * block renders — not just after the synchronous update() return.
+     * Use for scroll sync or other post-DOM-update side effects.
+     */
+    onContentUpdate?: () => void;
+};
+type OwoMarkPreviewEngine = {
+    mount(root: HTMLElement): void;
+    destroy(): void;
+    update(state: OwoMarkSharedState): void;
+    getRenderedVersion(): number;
+};
+
+export type { OwoMarkPreviewEngineOptions as O, PreviewRendererRegistry as P, OwoMarkPreviewEngine as a, PreviewTaskScheduler as b, PreviewBlockMetadata as c, PreviewBlockRenderer as d, PreviewCacheEntry as e, PreviewRenderContext as f, PreviewRenderPhase as g, PreviewRenderResult as h, PreviewRendererDefinition as i, PreviewRendererMode as j, PreviewStrategy as k, PreviewTaskPriority as l };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owomark/view",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Rendering engine, preview engine, DOM view layer, and official base theme for OwoMark.",
   "type": "module",
   "main": "./dist/index.js",
@@ -62,7 +62,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@owomark/core": "^0.1.5"
+    "@owomark/core": "^0.1.6"
   },
   "devDependencies": {
     "tsup": "^8.5.1"

package/src/theme/dark.css

@@ -59,8 +59,14 @@
   --owo-syntax-code-fence: #7f849c;
   --owo-syntax-code-lang: #fab387;
   --owo-syntax-list-marker: #fab387;
+  --owo-syntax-task-marker: #f9c74f;
+  --owo-syntax-task-marker-checked: #a6e3a1;
+  --owo-syntax-table-separator: #6c7086;
+  --owo-syntax-strikethrough: #cdd6f4;
   --owo-syntax-blockquote-marker: #585b70;
   --owo-syntax-hr: #45475a;
+  --owo-syntax-html: #cba6f7;
+  --owo-syntax-math: #94e2d5;
 
   /* Toolbar */
   --owo-toolbar-bg: #252536;

package/src/theme/light.css

@@ -59,8 +59,14 @@
   --owo-syntax-code-fence: #64748b;
   --owo-syntax-code-lang: #ea580c;
   --owo-syntax-list-marker: #ea580c;
+  --owo-syntax-task-marker: #d97706;
+  --owo-syntax-task-marker-checked: #16a34a;
+  --owo-syntax-table-separator: #94a3b8;
+  --owo-syntax-strikethrough: #1f2937;
   --owo-syntax-blockquote-marker: #9ca3af;
   --owo-syntax-hr: #d1d5db;
+  --owo-syntax-html: #7c3aed;
+  --owo-syntax-math: #0f766e;
 
   /* Toolbar */
   --owo-toolbar-bg: #f8fafc;

package/src/theme/owomark.css

@@ -126,6 +126,20 @@
   font-weight: 600;
 }
 
+.owo-syntax-task-marker {
+  color: var(--owo-syntax-task-marker, var(--owo-syntax-list-marker, currentColor));
+  font-weight: 600;
+}
+
+.owo-syntax-task-marker-checked {
+  color: var(--owo-syntax-task-marker-checked, var(--owo-success, currentColor));
+  font-weight: 700;
+}
+
+.owo-syntax-table-separator {
+  color: var(--owo-syntax-table-separator, var(--owo-syntax-marker, currentColor));
+}
+
 .owo-syntax-blockquote-marker {
   color: transparent;
   font-size: inherit;
@@ -149,15 +163,21 @@
   font-size: 0.9em;
 }
 
+.owo-syntax-strikethrough {
+  color: var(--owo-syntax-strikethrough, var(--owo-editor-text, currentColor));
+  text-decoration-line: line-through;
+  text-decoration-thickness: 0.08em;
+}
+
 .owo-syntax-hr {
   color: var(--owo-syntax-hr, #d1d5db);
 }
 
 .owo-syntax-html {
-  color: var(--owo-syntax-keyword, #7c3aed);
+  color: var(--owo-syntax-html, var(--owo-syntax-keyword, currentColor));
 }
 
 .owo-syntax-math {
-  color: var(--owo-syntax-string, #0f766e);
+  color: var(--owo-syntax-math, var(--owo-syntax-string, currentColor));
   font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
 }