@owomark/view 0.1.5 → 0.1.7

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

@@ -1,13 +1,6 @@
 import { PreviewBlock } from '@owomark/core';
+import { P as PreviewRendererRegistry } from '../../types-D4TVpyP7.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-BPOZMVU7.js";
 export {
   estimateBlockHeight
 };

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

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

package/dist/preview-render.worker.js

@@ -0,0 +1,369 @@
+// src/worker/renderer-registry.ts
+import { runtimeBlockRegistry } from "@owomark/core";
+
+// src/renderer/side-annotation-renderer.ts
+import { SIDE_ANNOTATION_RENDERER_KEY_BY_TYPE } from "@owomark/core/semantic/syntax";
+
+// src/renderer/default-renderer.ts
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var SAFE_URL_PATTERN = /^(?:https?:|mailto:|#|\/)/i;
+function sanitizeUrl(url) {
+  return SAFE_URL_PATTERN.test(url) ? url : "";
+}
+function stripCommonBlockquotePrefixes(raw) {
+  let lines = raw.split("\n");
+  let depth = 0;
+  while (lines.length > 0 && lines.every((line) => line.trim() === "" || /^ {0,3}>\s?/.test(line))) {
+    lines = lines.map((line) => line.trim() === "" ? line : line.replace(/^ {0,3}>\s?/, ""));
+    depth += 1;
+  }
+  return {
+    depth,
+    content: lines.join("\n")
+  };
+}
+function wrapInBlockquotes(content, depth) {
+  let wrapped = content;
+  for (let index = 0; index < depth; index += 1) {
+    wrapped = `<blockquote>${wrapped}</blockquote>`;
+  }
+  return wrapped;
+}
+function extractHeadingText(raw) {
+  const { depth, content } = stripCommonBlockquotePrefixes(raw);
+  const setextMatch = content.match(/^([^\n]+)\n {0,3}(?:=+|-+)\s*$/);
+  if (setextMatch) {
+    return {
+      depth,
+      text: setextMatch[1]
+    };
+  }
+  return {
+    depth,
+    text: content.replace(/^#{1,6}\s*/, "")
+  };
+}
+function renderInline(text) {
+  let html = escapeHtml(text);
+  html = html.replace(/`([^`]+)`/g, "<code>$1</code>");
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/__(.+?)__/g, "<strong>$1</strong>");
+  html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  html = html.replace(/_(.+?)_/g, "<em>$1</em>");
+  html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_, alt, src) => `<img src="${sanitizeUrl(src)}" alt="${alt}" />`);
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, href) => `<a href="${sanitizeUrl(href)}">${label}</a>`);
+  return html;
+}
+function renderBlockDefault(block) {
+  switch (block.kind) {
+    case "paragraph": {
+      const content = renderInline(block.raw);
+      if (block.raw.trim() === "") return "";
+      return `<p>${content}</p>`;
+    }
+    case "heading": {
+      const level = block.headingLevel ?? 1;
+      const { depth, text } = extractHeadingText(block.raw);
+      return wrapInBlockquotes(`<h${level}>${renderInline(text)}</h${level}>`, depth);
+    }
+    case "code-fence": {
+      const lines = block.raw.split("\n");
+      const openMatch = lines[0]?.match(/^[`~]{3,}(.*)/);
+      const lang = openMatch?.[1]?.trim().split(/\s+/)[0] || "";
+      const closeFenceIdx = lines.length - 1;
+      const hasCloseFence = closeFenceIdx > 0 && /^[`~]{3,}\s*$/.test(lines[closeFenceIdx]);
+      const codeLines = lines.slice(1, hasCloseFence ? closeFenceIdx : void 0);
+      const code = escapeHtml(codeLines.join("\n"));
+      const langAttr = lang ? ` class="language-${lang}"` : "";
+      return `<pre data-source-line-start="${block.startLine}" data-source-line-end="${block.endLine}" data-block-id="${block.blockId}"><code${langAttr}>${code}</code></pre>`;
+    }
+    case "unordered-list": {
+      const items = block.raw.split("\n").filter((line) => line.trim()).map((line) => {
+        const text = line.replace(/^\s*[-*+]\s+/, "");
+        return `<li>${renderInline(text)}</li>`;
+      });
+      return `<ul>${items.join("")}</ul>`;
+    }
+    case "ordered-list": {
+      const items = block.raw.split("\n").filter((line) => line.trim()).map((line) => {
+        const text = line.replace(/^\s*\d+\.\s+/, "");
+        return `<li>${renderInline(text)}</li>`;
+      });
+      return `<ol>${items.join("")}</ol>`;
+    }
+    case "blockquote": {
+      const lines = block.raw.split("\n").map((line) => line.replace(/^\s*>\s?/, ""));
+      const content = lines.map((line) => `<p>${renderInline(line)}</p>`).join("");
+      return `<blockquote>${content}</blockquote>`;
+    }
+    case "thematic-break":
+      return "<hr />";
+    case "table":
+    case "math-block":
+    case "html-block":
+    case "custom":
+      return `<div>${escapeHtml(block.raw)}</div>`;
+  }
+}
+
+// src/renderer/side-annotation-renderer.ts
+function escapeHtml2(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function escapeAttribute(text) {
+  return escapeHtml2(text).replace(/'/g, "&#39;");
+}
+function svgSegment(className, width, height, body, extraAttrs = "") {
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" class="${className}"${extraAttrs}>${body}</svg>`;
+}
+function stretchLineDiv() {
+  return '<div class="side-svg-line"></div>';
+}
+function segmented(width, axisPx, segments, extraClass = "") {
+  const className = ["side-annotation-svg", "side-svg-segmented", extraClass].filter(Boolean).join(" ");
+  return `<div class="${className}" style="width:${width};--side-svg-axis:${axisPx}px">${segments.join("")}</div>`;
+}
+function svgPath(d, extra = "") {
+  return `<path d="${d}" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"${extra}></path>`;
+}
+function svgLine(x1, y1, x2, y2, extra = "") {
+  return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"${extra}></line>`;
+}
+function svgPolyline(points, extra = "") {
+  return `<polyline points="${points}" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="square" stroke-linejoin="miter" shape-rendering="geometricPrecision"${extra}></polyline>`;
+}
+function makeSvgForSideType(sideType, orphan) {
+  const rendererKey = SIDE_ANNOTATION_RENDERER_KEY_BY_TYPE[sideType] ?? sideType;
+  if (orphan) {
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="4" viewBox="0 0 4 100" preserveAspectRatio="none" class="side-annotation-svg side-svg-vline">${svgLine(2, "2", 2, "98", ' vector-effect="non-scaling-stroke"')}</svg>`;
+  }
+  switch (rendererKey) {
+    case "brace":
+      return segmented("12px", 6, [
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 1 0.75 C 3.5 0.75, 6 2.5, 6 5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 12, 8, svgPath("M 6 0 C 6 2.5, 11 4, 11 4 C 11 4, 6 5.5, 6 8")),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 6 0.75 C 6 3.5, 3.5 5.25, 1 5.25"))
+      ]);
+    case "left-brace":
+      return segmented("12px", 6, [
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 11 0.75 C 8.5 0.75, 6 2.5, 6 5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 12, 8, svgPath("M 6 0 C 6 2.5, 1 4, 1 4 C 1 4, 6 5.5, 6 8")),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 6 0.75 C 6 3.5, 8.5 5.25, 11 5.25"))
+      ]);
+    case "bracket":
+      return segmented("8px", 4, [
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("1,0.75 4,0.75 4,5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("4,0.75 4,5.25 1,5.25"))
+      ], "side-svg-bracket");
+    case "left-bracket":
+      return segmented("8px", 4, [
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("7,0.75 4,0.75 4,5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("4,0.75 4,5.25 7,5.25"))
+      ], "side-svg-left-bracket");
+    case "line":
+    case "warning":
+    case "question":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="4" viewBox="0 0 4 100" preserveAspectRatio="none" class="side-annotation-svg side-svg-vline">${svgLine(2, "2", 2, "98", ' vector-effect="non-scaling-stroke"')}</svg>`;
+    case "dash":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="4" viewBox="0 0 20 4" class="side-annotation-svg side-svg-dash">${svgLine(1, "2", 19, "2")}</svg>`;
+    case "arrow":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16" class="side-annotation-svg side-svg-arrow">${svgPath("M 1 8 L 20 8 M 16 3 L 21 8 L 16 13")}</svg>`;
+    case "fat-arrow":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16" class="side-annotation-svg side-svg-fat-arrow">${svgPath("M 1 5 L 16 5 M 1 11 L 16 11 M 15 2 L 22 8 L 15 14")}</svg>`;
+    case "wave-arrow":
+      return `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="16" viewBox="0 0 28 16" class="side-annotation-svg side-svg-wave-arrow">${svgPath("M 1 8 C 4 3, 8 13, 12 8 C 16 3, 20 8, 20 8 M 18 3 L 23 8 L 18 13")}</svg>`;
+    case "brace-arrow":
+      return segmented("12px", 6, [
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 1 0.75 C 3.5 0.75, 6 2.5, 6 5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 12, 8, `${svgLine(6, "0", 6, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 6 4 L 19 4 M 16 1.5 L 20 4 L 16 6.5")}`, ' overflow="visible"'),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 6 0.75 C 6 3.5, 3.5 5.25, 1 5.25"))
+      ], "side-svg-compound-arrow");
+    case "brace-fat-arrow":
+      return segmented("12px", 6, [
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 1 0.75 C 3.5 0.75, 6 2.5, 6 5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 12, 8, `${svgLine(6, "0", 6, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 6 2.5 L 14 2.5 M 6 5.5 L 14 5.5 M 13 0.5 L 18 4 L 13 7.5")}`, ' overflow="visible"'),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 12, 6, svgPath("M 6 0.75 C 6 3.5, 3.5 5.25, 1 5.25"))
+      ], "side-svg-compound-arrow");
+    case "bracket-arrow":
+      return segmented("8px", 4, [
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("1,0.75 4,0.75 4,5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 8, 8, `${svgLine(4, "0", 4, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 4 4 L 17 4 M 14 1.5 L 18 4 L 14 6.5")}`, ' overflow="visible"'),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("4,0.75 4,5.25 1,5.25"))
+      ], "side-svg-bracket side-svg-compound-arrow");
+    case "bracket-fat-arrow":
+      return segmented("8px", 4, [
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("1,0.75 4,0.75 4,5.25")),
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 8, 8, `${svgLine(4, "0", 4, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 4 2.5 L 13 2.5 M 4 5.5 L 13 5.5 M 12 0.5 L 17 4 L 12 7.5")}`, ' overflow="visible"'),
+        stretchLineDiv(),
+        svgSegment("side-svg-cap", 8, 6, svgPolyline("4,0.75 4,5.25 1,5.25"))
+      ], "side-svg-bracket side-svg-compound-arrow");
+    case "line-arrow":
+      return segmented("4px", 2, [
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 4, 8, `${svgLine(2, "0", 2, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 2 4 L 15 4 M 12 1.5 L 16 4 L 12 6.5")}`, ' overflow="visible"'),
+        stretchLineDiv()
+      ], "side-svg-compound-arrow");
+    case "line-fat-arrow":
+      return segmented("4px", 2, [
+        stretchLineDiv(),
+        svgSegment("side-svg-beak", 4, 8, `${svgLine(2, "0", 2, "8", ' stroke-linecap="square" shape-rendering="geometricPrecision"')}${svgPath("M 2 2.5 L 11 2.5 M 2 5.5 L 11 5.5 M 10 0.5 L 15 4 L 10 7.5")}`, ' overflow="visible"'),
+        stretchLineDiv()
+      ], "side-svg-compound-arrow");
+    case "brace-warning":
+    case "brace-question":
+      return makeSvgForSideType("brace", false);
+    default:
+      return "";
+  }
+}
+function toPreviewKind(type) {
+  switch (type) {
+    case "heading":
+      return "heading";
+    case "unordered-list":
+      return "unordered-list";
+    case "ordered-list":
+      return "ordered-list";
+    case "blockquote":
+      return "blockquote";
+    case "code-fence":
+      return "code-fence";
+    case "thematic-break":
+      return "thematic-break";
+    case "math-block":
+      return "math-block";
+    case "table":
+      return "table";
+    case "html-block":
+      return "html-block";
+    default:
+      return "paragraph";
+  }
+}
+function renderMainBlocks(block) {
+  const rawMembers = Array.isArray(block.attributes?.mainBlocks) ? block.attributes?.mainBlocks : [];
+  return rawMembers.map((entry, index) => {
+    if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
+      return "";
+    }
+    const type = typeof entry.type === "string" ? entry.type : "paragraph";
+    const raw = typeof entry.raw === "string" ? entry.raw : "";
+    const memberBlock = {
+      blockId: `${block.blockId}:member:${index}`,
+      kind: toPreviewKind(type),
+      raw,
+      startLine: block.startLine,
+      endLine: block.endLine,
+      renderKey: `${block.renderKey}:member:${index}`
+    };
+    if (type === "heading" && typeof entry.headingLevel === "number") {
+      memberBlock.headingLevel = entry.headingLevel;
+    }
+    if (type === "code-fence" && typeof entry.language === "string") {
+      memberBlock.language = entry.language;
+    }
+    return renderBlockDefault(memberBlock);
+  }).join("");
+}
+function isSideAnnotationPreviewBlock(block) {
+  return block.kind === "custom" && block.attributes?.customBlockKey === "side-annotation";
+}
+function renderSideAnnotationPreviewBlock(block) {
+  if (!isSideAnnotationPreviewBlock(block)) {
+    return `<div>${escapeHtml2(block.raw)}</div>`;
+  }
+  const sideType = typeof block.attributes?.sideType === "string" ? block.attributes.sideType : "plain";
+  const annotationText = typeof block.attributes?.annotationText === "string" ? block.attributes.annotationText : "";
+  const orphan = Boolean(block.attributes?.orphan);
+  const className = ["side-annotation", `side-type-${sideType}`, orphan ? "side-orphan" : ""].filter(Boolean).join(" ");
+  const asideClass = ["side-annotation-aside", orphan ? "side-annotation-orphan" : ""].filter(Boolean).join(" ");
+  const decoration = makeSvgForSideType(sideType, orphan);
+  const mainHtml = renderMainBlocks(block);
+  const textHtml = annotationText ? `<span class="side-annotation-text">${escapeHtml2(annotationText)}</span>` : "";
+  return [
+    `<div class="${className}" data-side-type="${escapeAttribute(sideType)}"${orphan ? ' data-side-orphan="true"' : ""}${annotationText ? ` data-side-text="${escapeAttribute(annotationText)}"` : ""}>`,
+    `<div class="side-annotation-main">${mainHtml}</div>`,
+    `<div class="${asideClass}">${decoration}${textHtml}</div>`,
+    "</div>"
+  ].join("");
+}
+
+// src/worker/renderer-registry.ts
+var workerRenderers = /* @__PURE__ */ new Map();
+for (const descriptor of runtimeBlockRegistry.list()) {
+  if (descriptor.workerRendererId !== "builtin:side-annotation") {
+    continue;
+  }
+  workerRenderers.set(descriptor.workerRendererId, (block) => ({
+    kind: "html",
+    html: renderSideAnnotationPreviewBlock(block)
+  }));
+}
+function getWorkerRenderer(rendererId) {
+  return workerRenderers.get(rendererId) ?? null;
+}
+
+// src/worker/preview-render.worker.ts
+var cancelledIds = /* @__PURE__ */ new Set();
+async function handleRender(req) {
+  if (cancelledIds.has(req.taskId)) {
+    cancelledIds.delete(req.taskId);
+    return;
+  }
+  try {
+    const renderer = getWorkerRenderer(req.rendererId);
+    if (!renderer) {
+      throw new Error(`Unknown worker renderer: ${req.rendererId}`);
+    }
+    if (cancelledIds.has(req.taskId)) {
+      cancelledIds.delete(req.taskId);
+      return;
+    }
+    const result = await renderer(req.block, req.context);
+    if (cancelledIds.has(req.taskId)) {
+      cancelledIds.delete(req.taskId);
+      return;
+    }
+    const response = result.kind === "html" && result.html != null ? { taskId: req.taskId, ok: true, html: result.html } : { taskId: req.taskId, ok: false, error: "Renderer returned non-html result in worker context" };
+    self.postMessage(response);
+  } catch (error) {
+    if (cancelledIds.has(req.taskId)) {
+      cancelledIds.delete(req.taskId);
+      return;
+    }
+    self.postMessage({
+      taskId: req.taskId,
+      ok: false,
+      error: error instanceof Error ? error.message : String(error)
+    });
+  }
+}
+self.onmessage = (e) => {
+  const msg = e.data;
+  switch (msg.type) {
+    case "render":
+      void handleRender(msg);
+      break;
+    case "cancel":
+      cancelledIds.add(msg.taskId);
+      break;
+    case "cancel-all":
+      cancelledIds.clear();
+      break;
+  }
+};

package/dist/types-D4TVpyP7.d.ts

@@ -0,0 +1,103 @@
+import { OwoMarkSharedState, PreviewBlock, PreviewBlockKind } 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;
+    workerRendererId?: string;
+    /**
+     * @deprecated Dynamic worker module URLs are incompatible with static
+     * bundlers such as Next.js Turbopack. Prefer `workerRendererId`.
+     */
+    workerModuleUrl?: string;
+};
+type PreviewBlockRenderer = (block: PreviewBlock, context: PreviewRenderContext) => Promise<PreviewRenderResult> | PreviewRenderResult;
+type PreviewBlockMetadata = {
+    mode: PreviewRendererMode;
+    priority: PreviewTaskPriority;
+    heavy?: boolean;
+};
+type PreviewRendererTarget = {
+    kind: PreviewBlockKind;
+    customBlockKey?: string | null;
+};
+type PreviewRendererRegistryLookup = PreviewBlock | PreviewRendererTarget;
+type PreviewRendererRegistry = {
+    get(target: PreviewRendererRegistryLookup): PreviewRendererDefinition | null;
+    register(target: PreviewRendererTarget, renderer: PreviewRendererDefinition): void;
+    unregister(target: PreviewRendererTarget): void;
+    registerMetadata(target: PreviewRendererTarget, meta: PreviewBlockMetadata): void;
+    isHeavy(target: PreviewRendererRegistryLookup): boolean;
+    getMode(target: PreviewRendererRegistryLookup): PreviewRendererMode | null;
+    getPriority(target: PreviewRendererRegistryLookup): PreviewTaskPriority | null;
+    listRegistered(): PreviewRendererTarget[];
+};
+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, PreviewRendererRegistryLookup as k, PreviewRendererTarget as l, PreviewStrategy as m, PreviewTaskPriority as n };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owomark/view",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "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.7"
   },
   "devDependencies": {
     "tsup": "^8.5.1"

package/src/style.css

@@ -4,8 +4,10 @@
 
 /* Structural: editor base styles consuming --owo-editor-* tokens */
 @import './theme/owomark.css';
+@import './theme/cards.css';
 @import './theme/side-annotation.css';
 @import './theme/slash-menu.css';
+@import './theme/toolbar.css';
 
 /* Aesthetic: token value assignments for light and dark presets */
 @import './theme/light.css';

package/src/theme/cards.css

@@ -0,0 +1,50 @@
+.owo-cards {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin: 1rem 0 1.5rem;
+}
+
+.owo-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  min-width: 0;
+  padding: 1rem;
+  border: 1px solid var(--owo-preview-card-border, var(--owo-border, #e2e8f0));
+  border-radius: 0.875rem;
+  background: var(--owo-preview-card-bg, var(--owo-surface-raised, #f8fafc));
+  box-shadow: var(--owo-preview-card-shadow, 0 10px 30px rgba(15, 23, 42, 0.06));
+}
+
+.owo-card-title {
+  margin: 0;
+  color: var(--owo-preview-card-title, var(--owo-text, #111827));
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.owo-card-body > :first-child {
+  margin-top: 0;
+}
+
+.owo-card-body > :last-child {
+  margin-bottom: 0;
+}
+
+.owo-card[data-owo-card-tone="info"] {
+  background: color-mix(in srgb, var(--owo-brand, #2563eb) 7%, var(--owo-preview-card-bg, #f8fafc));
+  border-color: color-mix(in srgb, var(--owo-brand, #2563eb) 22%, var(--owo-preview-card-border, #e2e8f0));
+}
+
+.owo-card[data-owo-card-tone="warning"] {
+  background: color-mix(in srgb, var(--owo-warning, #f59e0b) 9%, var(--owo-preview-card-bg, #f8fafc));
+  border-color: color-mix(in srgb, var(--owo-warning, #f59e0b) 26%, var(--owo-preview-card-border, #e2e8f0));
+}
+
+@media (max-width: 768px) {
+  .owo-cards {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}

package/src/theme/dark.css

@@ -56,11 +56,19 @@
   --owo-syntax-link-url: #89b4fa;
   --owo-syntax-inline-code: #94e2d5;
   --owo-syntax-inline-code-bg: rgba(88, 91, 112, 0.35);
+  --owo-syntax-custom-inline: #f9e2af;
+  --owo-syntax-custom-inline-bg: rgba(250, 179, 135, 0.2);
   --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

@@ -56,11 +56,19 @@
   --owo-syntax-link-url: #2563eb;
   --owo-syntax-inline-code: #0f766e;
   --owo-syntax-inline-code-bg: rgba(148, 163, 184, 0.16);
+  --owo-syntax-custom-inline: #92400e;
+  --owo-syntax-custom-inline-bg: rgba(250, 204, 21, 0.18);
   --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;