@owomark/view 0.1.6 → 0.1.8

package/dist/index.js

@@ -7,27 +7,27 @@ import {
 import {
   FALLBACK_BLOCK_HEIGHT,
   estimateBlockHeight
-} from "./chunk-KHKPOH74.js";
+} from "./chunk-BPOZMVU7.js";
 import {
   VirtualViewportManager,
   createSkeletonHtml,
   ensureSkeletonStyles
-} from "./chunk-WA6XHBZS.js";
-
-// src/editor.ts
-import { createDomAdapter } from "@owomark/core/internal/dom-adapter";
+} 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;
@@ -635,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";
@@ -794,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;
   }
@@ -811,63 +800,13 @@ 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);
-    }
-  };
-}
+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) {
@@ -877,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>");
@@ -897,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");
@@ -940,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);
@@ -970,7 +1345,7 @@ 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, scheduler) {
@@ -979,9 +1354,14 @@ function createRenderBlockFull(registry, renderCache, externalRenderBlock, sched
       ...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.workerModuleUrl && scheduler) {
+      if (customRenderer.mode === "html-worker-safe" && customRenderer.workerRendererId && scheduler) {
         try {
           const html2 = await scheduler.submitWorkerTask(block, customRenderer, context);
           renderCache.set(block.renderKey, html2);
@@ -1708,7 +2088,8 @@ function createPreviewTaskScheduler(options) {
   }
   const scheduler = {
     submitWorkerTask(block, rendererDef, context) {
-      if (permanentlyFailed || !rendererDef.workerModuleUrl) {
+      const rendererId = rendererDef.workerRendererId;
+      if (permanentlyFailed || !rendererId) {
         return Promise.reject(new Error("Worker unavailable"));
       }
       const slot = getLeastBusySlot();
@@ -1723,7 +2104,7 @@ function createPreviewTaskScheduler(options) {
           type: "render",
           taskId,
           block: serializeBlock(block),
-          rendererModuleUrl: rendererDef.workerModuleUrl,
+          rendererId,
           context: {
             version: context.version,
             themeKey: context.themeKey,
@@ -1879,7 +2260,6 @@ export {
   THEME_DARK_CLASS,
   THEME_LIGHT_CLASS,
   createOwoMarkPreviewEngine,
-  createOwoMarkVanillaEditor,
   createOwoMarkView,
   createPreviewTaskScheduler,
   createRendererRegistry,
@@ -1887,5 +2267,9 @@ export {
   createViewEngine,
   ensureSkeletonStyles,
   getThemeClassName,
-  renderBlockDefault
+  isCardsFamilyPreviewBlock,
+  isSideAnnotationPreviewBlock,
+  renderBlockDefault,
+  renderCardsFamilyPreviewBlock,
+  renderSideAnnotationPreviewBlock
 };

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

@@ -1,5 +1,5 @@
 import { PreviewBlock } from '@owomark/core';
-import { P as PreviewRendererRegistry } from '../../types-DsL_4tUb.js';
+import { P as PreviewRendererRegistry } from '../../types-D4TVpyP7.js';
 
 declare function estimateBlockHeight(block: PreviewBlock, registry?: PreviewRendererRegistry): number;
 

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

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

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

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