@owomark/view 0.1.5 → 0.1.7

package/dist/index.js

@@ -7,25 +7,27 @@ import {
 import {
   FALLBACK_BLOCK_HEIGHT,
   estimateBlockHeight
-} from "./chunk-Y72HQJQI.js";
+} from "./chunk-BPOZMVU7.js";
 import {
-  VirtualViewportManager
-} from "./chunk-F3LG7AML.js";
-
-// src/editor.ts
-import { createDomAdapter } from "@owomark/core/internal/dom-adapter";
+  VirtualViewportManager,
+  createSkeletonHtml,
+  ensureSkeletonStyles
+} from "./chunk-656BO747.js";
 
 // src/view-engine.ts
 import {
-  readSelection,
-  restoreSelection,
-  invalidateBlockCache,
   linearToVirtual,
   virtualToLinear,
   getBlockStartOffset,
   tokenizeBlock
 } from "@owomark/core";
-import { createBlockElement, updateBlockElement } from "@owomark/core";
+import {
+  readSelection,
+  restoreSelection,
+  invalidateBlockCache,
+  createBlockElement,
+  updateBlockElement
+} from "@owomark/core/browser";
 
 // src/dom/slash-menu.ts
 var MENU_GAP = 4;
@@ -633,22 +635,6 @@ function createOwoMarkView(core, element) {
   engine.mount(element);
   return engine;
 }
-function createOwoMarkVanillaEditor() {
-  const adapter = createDomAdapter();
-  let slashMenu = null;
-  return {
-    ...adapter,
-    mount(element) {
-      adapter.mount(element);
-      slashMenu = createSlashMenuOverlay(element, adapter.getCore());
-    },
-    destroy() {
-      slashMenu?.destroy();
-      slashMenu = null;
-      adapter.destroy();
-    }
-  };
-}
 
 // src/dom/patcher.ts
 var BLOCK_ATTR = "data-preview-block";
@@ -792,6 +778,11 @@ var PreviewDomPatcher = class {
   createBlockWrapper(doc, block) {
     const wrapper = doc.createElement("div");
     wrapper.setAttribute(BLOCK_ATTR, block.blockId);
+    if ("style" in wrapper && wrapper.style) {
+      wrapper.style.display = "flow-root";
+    } else {
+      wrapper.setAttribute("style", "display: flow-root;");
+    }
     this.updateBlockAttributes(wrapper, block);
     return wrapper;
   }
@@ -809,20 +800,13 @@ var PreviewDomPatcher = class {
 };
 
 // src/renderer/registry.ts
-function createRendererRegistry() {
-  const renderers = /* @__PURE__ */ new Map();
-  return {
-    get(kind) {
-      return renderers.get(kind) ?? null;
-    },
-    register(kind, renderer) {
-      renderers.set(kind, renderer);
-    },
-    unregister(kind) {
-      renderers.delete(kind);
-    }
-  };
-}
+import {
+  CARDS_FAMILY_CUSTOM_BLOCK_KEY as CARDS_FAMILY_CUSTOM_BLOCK_KEY2,
+  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) {
@@ -832,6 +816,39 @@ 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>");
@@ -852,8 +869,8 @@ function renderBlockDefault(block) {
     }
     case "heading": {
       const level = block.headingLevel ?? 1;
-      const text = block.raw.replace(/^#{1,6}\s*/, "");
-      return `<h${level}>${renderInline(text)}</h${level}>`;
+      const { depth, text } = extractHeadingText(block.raw);
+      return wrapInBlockquotes(`<h${level}>${renderInline(text)}</h${level}>`, depth);
     }
     case "code-fence": {
       const lines = block.raw.split("\n");
@@ -895,6 +912,409 @@ function renderBlockDefault(block) {
   }
 }
 
+// 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/renderer/cards-renderer.ts
+import {
+  CARDS_FAMILY_CUSTOM_BLOCK_KEY,
+  isCardsFamilyAttributes,
+  parseMarkdownToDocument
+} from "@owomark/core";
+function escapeHtml3(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function isCardsFamilyPreviewBlock(block) {
+  return block.kind === "custom" && block.attributes?.customBlockKey === CARDS_FAMILY_CUSTOM_BLOCK_KEY && isCardsFamilyAttributes(block.attributes);
+}
+function renderCardBody(markdown) {
+  if (!markdown.trim()) {
+    return "";
+  }
+  const nestedBlocks = parseMarkdownToDocument(markdown).previewBlocks;
+  return nestedBlocks.map((nestedBlock) => {
+    if (isCardsFamilyPreviewBlock(nestedBlock)) {
+      return renderCardsFamilyPreviewBlock(nestedBlock);
+    }
+    if (nestedBlock.kind === "custom" && nestedBlock.attributes?.customBlockKey === "side-annotation") {
+      return renderSideAnnotationPreviewBlock(nestedBlock);
+    }
+    return renderBlockDefault(nestedBlock);
+  }).join("");
+}
+function renderCardsFamilyPreviewBlock(block) {
+  if (!isCardsFamilyPreviewBlock(block)) {
+    throw new Error("[owomark/view] cards renderer requires a cards-family preview block");
+  }
+  const attributes = block.attributes;
+  const cardsHtml = attributes.cards.map((card) => {
+    const toneAttr = card.tone ? ` data-owo-card-tone="${card.tone}"` : "";
+    const toneClass = card.tone ? ` owo-card-tone-${card.tone}` : "";
+    const titleHtml = card.title ? `<header class="owo-card-title">${escapeHtml3(card.title)}</header>` : "";
+    const bodyHtml = renderCardBody(card.bodyMarkdown);
+    return [
+      `<article class="owo-card${toneClass}" data-owo-card${toneAttr}>`,
+      titleHtml,
+      `<div class="owo-card-body">${bodyHtml}</div>`,
+      "</article>"
+    ].join("");
+  }).join("");
+  return [
+    `<section class="owo-cards" data-owo-cards data-owo-cards-cols="${attributes.layout.cols}">`,
+    cardsHtml,
+    "</section>"
+  ].join("");
+}
+
+// src/renderer/registry.ts
+function normalizeTarget(target) {
+  const normalized = {
+    kind: target.kind,
+    customBlockKey: target.customBlockKey ?? null
+  };
+  if (normalized.kind === "custom" && !normalized.customBlockKey) {
+    throw new Error("[owomark/view] custom renderer targets must declare customBlockKey");
+  }
+  return normalized;
+}
+function resolveTargetFromLookup(lookup) {
+  if ("blockId" in lookup) {
+    const block = lookup;
+    if (block.kind === "custom") {
+      const customBlockKey = typeof block.attributes?.customBlockKey === "string" ? block.attributes.customBlockKey : null;
+      if (!customBlockKey) {
+        return {
+          kind: "custom",
+          customBlockKey: null
+        };
+      }
+      return {
+        kind: "custom",
+        customBlockKey
+      };
+    }
+    return {
+      kind: block.kind
+    };
+  }
+  return normalizeTarget(lookup);
+}
+function toSpecificKey(target) {
+  return target.kind === "custom" ? `custom:${target.customBlockKey}` : `kind:${target.kind}`;
+}
+function createRendererRegistry() {
+  const renderers = /* @__PURE__ */ new Map();
+  const metadata = /* @__PURE__ */ new Map();
+  const targets = /* @__PURE__ */ new Map();
+  for (const descriptor of runtimeBlockRegistry.list()) {
+    const target = {
+      kind: descriptor.previewKind,
+      customBlockKey: descriptor.customBlockKey ?? null
+    };
+    const key = toSpecificKey(target);
+    metadata.set(key, {
+      mode: descriptor.rendererMode,
+      priority: descriptor.rendererPriority,
+      heavy: descriptor.heavy
+    });
+    targets.set(key, target);
+  }
+  renderers.set("custom:side-annotation", {
+    mode: metadata.get("custom:side-annotation")?.mode ?? "html-worker-safe",
+    priority: metadata.get("custom:side-annotation")?.priority ?? "realtime",
+    version: "builtin-side-annotation-v1",
+    workerRendererId: "builtin:side-annotation",
+    render(block) {
+      return {
+        kind: "html",
+        html: renderSideAnnotationPreviewBlock(block)
+      };
+    }
+  });
+  targets.set("custom:side-annotation", {
+    kind: "custom",
+    customBlockKey: "side-annotation"
+  });
+  renderers.set(`custom:${CARDS_FAMILY_CUSTOM_BLOCK_KEY2}`, {
+    mode: "html-worker-safe",
+    priority: "realtime",
+    version: "builtin-cards-family-v1",
+    render(block) {
+      return {
+        kind: "html",
+        html: renderCardsFamilyPreviewBlock(block)
+      };
+    }
+  });
+  metadata.set(`custom:${CARDS_FAMILY_CUSTOM_BLOCK_KEY2}`, {
+    mode: "html-worker-safe",
+    priority: "realtime"
+  });
+  targets.set(`custom:${CARDS_FAMILY_CUSTOM_BLOCK_KEY2}`, {
+    kind: "custom",
+    customBlockKey: CARDS_FAMILY_CUSTOM_BLOCK_KEY2
+  });
+  function getMetadata(target) {
+    if (target.kind === "custom" && !target.customBlockKey) {
+      return null;
+    }
+    const specificKey = toSpecificKey(target);
+    return metadata.get(specificKey) ?? null;
+  }
+  function getRenderer(target) {
+    if (target.kind === "custom" && !target.customBlockKey) {
+      return null;
+    }
+    const specificKey = toSpecificKey(target);
+    return renderers.get(specificKey) ?? null;
+  }
+  return {
+    get(lookup) {
+      return getRenderer(resolveTargetFromLookup(lookup));
+    },
+    register(targetLike, renderer) {
+      const target = normalizeTarget(targetLike);
+      const key = toSpecificKey(target);
+      renderers.set(key, renderer);
+      targets.set(key, target);
+      if (!metadata.has(key)) {
+        metadata.set(key, {
+          mode: renderer.mode,
+          priority: renderer.priority
+        });
+      }
+    },
+    unregister(targetLike) {
+      const key = toSpecificKey(normalizeTarget(targetLike));
+      renderers.delete(key);
+    },
+    registerMetadata(targetLike, meta) {
+      const target = normalizeTarget(targetLike);
+      const key = toSpecificKey(target);
+      metadata.set(key, meta);
+      targets.set(key, target);
+    },
+    isHeavy(lookup) {
+      const target = resolveTargetFromLookup(lookup);
+      const meta = getMetadata(target);
+      if (meta?.heavy) return true;
+      const def = getRenderer(target);
+      return def?.priority === "deferred" || false;
+    },
+    getMode(lookup) {
+      const target = resolveTargetFromLookup(lookup);
+      const def = getRenderer(target);
+      if (def) return def.mode;
+      return getMetadata(target)?.mode ?? null;
+    },
+    getPriority(lookup) {
+      const target = resolveTargetFromLookup(lookup);
+      const def = getRenderer(target);
+      if (def) return def.priority;
+      return getMetadata(target)?.priority ?? null;
+    },
+    listRegistered() {
+      const keys = /* @__PURE__ */ new Set([
+        ...renderers.keys(),
+        ...metadata.keys()
+      ]);
+      return Array.from(keys).map((key) => targets.get(key)).filter((target) => target != null);
+    }
+  };
+}
+
 // src/strategies/shared.ts
 var scheduleIdle = typeof globalThis.requestIdleCallback === "function" ? (fn) => globalThis.requestIdleCallback(fn) : (fn) => setTimeout(fn, 1);
 var cancelIdle = typeof globalThis.cancelIdleCallback === "function" ? (id) => globalThis.cancelIdleCallback(id) : (id) => clearTimeout(id);
@@ -925,17 +1345,30 @@ function cancelAllIdle(pendingIdleIds) {
   pendingIdleIds.length = 0;
 }
 function isDeferred(block, registry) {
-  const def = registry.get(block.kind);
+  const def = registry.get(block);
   return def?.priority === "deferred";
 }
-function createRenderBlockFull(registry, renderCache, externalRenderBlock) {
+function createRenderBlockFull(registry, renderCache, externalRenderBlock, scheduler) {
   return async function renderBlockFull(block, baseContext) {
     const context = {
       ...baseContext,
       sourceLineOffset: block.startLine - 1
     };
-    const customRenderer = registry.get(block.kind);
+    if (externalRenderBlock && block.kind === "custom") {
+      const html2 = await externalRenderBlock(block, context);
+      renderCache.set(block.renderKey, html2);
+      return { kind: "html", html: html2 };
+    }
+    const customRenderer = registry.get(block);
     if (customRenderer) {
+      if (customRenderer.mode === "html-worker-safe" && customRenderer.workerRendererId && 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 +1395,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 +1406,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 +1452,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 +1537,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 +1673,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 +1681,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 +1698,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 +1810,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 +1845,7 @@ function createVirtualEngine(options) {
       blockResizeObserver?.disconnect();
       blockResizeObserver = null;
       observedWrappers.clear();
+      scheduler?.release();
       viewport.destroy();
       measurer.destroy();
       renderCache.clear();
@@ -1525,11 +1971,186 @@ 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) {
+      const rendererId = rendererDef.workerRendererId;
+      if (permanentlyFailed || !rendererId) {
+        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),
+          rendererId,
+          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;
@@ -1639,10 +2260,16 @@ export {
   THEME_DARK_CLASS,
   THEME_LIGHT_CLASS,
   createOwoMarkPreviewEngine,
-  createOwoMarkVanillaEditor,
   createOwoMarkView,
+  createPreviewTaskScheduler,
   createRendererRegistry,
+  createSkeletonHtml,
   createViewEngine,
+  ensureSkeletonStyles,
   getThemeClassName,
-  renderBlockDefault
+  isCardsFamilyPreviewBlock,
+  isSideAnnotationPreviewBlock,
+  renderBlockDefault,
+  renderCardsFamilyPreviewBlock,
+  renderSideAnnotationPreviewBlock
 };