@owomark/view 0.1.0

package/dist/index.js

@@ -0,0 +1,2047 @@
+import {
+  Callout,
+  CodeDemo,
+  DEFAULT_MDX_COMPONENTS,
+  FileTree,
+  Kbd,
+  Step,
+  Steps,
+  THEME_DARK_CLASS,
+  THEME_LIGHT_CLASS,
+  Tab,
+  Tabs,
+  createOwoMarkProcessor,
+  getOwoMarkPlugins,
+  getThemeClassName,
+  rehypeMathDisplayFix,
+  rehypeSideAnnotation,
+  remarkConvertSoftBreaksToHardBreaks,
+  remarkSideAnnotation
+} from "./chunk-Z7WJR3XO.js";
+
+// src/editor.ts
+import { createDomAdapter } from "@owomark/core/internal/dom-adapter";
+
+// src/view-engine.ts
+import {
+  readSelection,
+  restoreSelection,
+  invalidateBlockCache,
+  linearToVirtual,
+  virtualToLinear,
+  getBlockStartOffset,
+  tokenizeBlock
+} from "@owomark/core";
+import { createBlockElement, updateBlockElement } from "@owomark/core";
+
+// src/dom/slash-menu.ts
+var MENU_GAP = 4;
+var MENU_MAX_HEIGHT = 320;
+var MENU_WIDTH = 280;
+function createSlashMenuOverlay(root, core) {
+  const doc = root.ownerDocument;
+  const maybeWin = doc.defaultView;
+  if (!maybeWin) {
+    return { destroy() {
+    } };
+  }
+  const win = maybeWin;
+  let menuEl = null;
+  let state = core.getSlashState();
+  let position = null;
+  let frameId = 0;
+  function getCaretRect() {
+    const sel = win.getSelection();
+    if (!sel || sel.rangeCount === 0) return null;
+    const range = sel.getRangeAt(0).cloneRange();
+    range.collapse(true);
+    const rect = range.getBoundingClientRect();
+    if (rect.width === 0 && rect.height === 0 && rect.top === 0) return null;
+    return { top: rect.top, left: rect.left, bottom: rect.bottom };
+  }
+  function computeMenuPosition(caret) {
+    const viewportHeight = win.innerHeight;
+    const viewportWidth = win.innerWidth;
+    let top;
+    if (caret.bottom + MENU_GAP + MENU_MAX_HEIGHT <= viewportHeight) {
+      top = caret.bottom + MENU_GAP;
+    } else {
+      top = caret.top - MENU_GAP - MENU_MAX_HEIGHT;
+    }
+    let left = caret.left;
+    if (left + MENU_WIDTH > viewportWidth - 8) {
+      left = viewportWidth - MENU_WIDTH - 8;
+    }
+    if (left < 8) left = 8;
+    return { top: Math.max(0, top), left };
+  }
+  function groupByCategory(commands) {
+    const groups = [];
+    const seen = /* @__PURE__ */ new Map();
+    for (const cmd of commands) {
+      const cat = cmd.category ?? "";
+      let group = seen.get(cat);
+      if (!group) {
+        group = { category: cat, commands: [] };
+        seen.set(cat, group);
+        groups.push(group);
+      }
+      group.commands.push(cmd);
+    }
+    return groups;
+  }
+  function ensureMenu() {
+    if (menuEl) return menuEl;
+    menuEl = doc.createElement("div");
+    menuEl.className = "owo-slash-menu";
+    menuEl.setAttribute("role", "listbox");
+    menuEl.style.position = "fixed";
+    menuEl.style.width = `${MENU_WIDTH}px`;
+    menuEl.style.maxHeight = `${MENU_MAX_HEIGHT}px`;
+    menuEl.style.overflow = "auto";
+    menuEl.style.zIndex = "9999";
+    doc.body.appendChild(menuEl);
+    return menuEl;
+  }
+  function removeMenu() {
+    if (menuEl) {
+      menuEl.remove();
+      menuEl = null;
+    }
+    position = null;
+  }
+  function updatePosition() {
+    const caret = getCaretRect();
+    if (!caret) return false;
+    position = computeMenuPosition(caret);
+    return true;
+  }
+  function schedulePositionUpdate() {
+    if (!state.active && !state.pending) {
+      position = null;
+      return;
+    }
+    if (updatePosition()) {
+      render();
+      return;
+    }
+    if (frameId) win.cancelAnimationFrame(frameId);
+    frameId = win.requestAnimationFrame(() => {
+      frameId = 0;
+      if (updatePosition()) {
+        render();
+      }
+    });
+  }
+  const itemPool = /* @__PURE__ */ new Map();
+  let lastRenderedIds = [];
+  function createItemEl(cmd, globalIndex, isSelected) {
+    const itemEl = doc.createElement("div");
+    itemEl.setAttribute("role", "option");
+    itemEl.addEventListener("pointerdown", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const idx = Number(itemEl.dataset.globalIndex);
+      core.executeSlashCommand(idx);
+      root.focus();
+    });
+    if (cmd.icon) {
+      const iconEl = doc.createElement("span");
+      iconEl.className = "owo-slash-menu__icon";
+      iconEl.textContent = cmd.icon;
+      itemEl.appendChild(iconEl);
+    }
+    const contentEl = doc.createElement("div");
+    contentEl.className = "owo-slash-menu__content";
+    const labelEl = doc.createElement("span");
+    labelEl.className = "owo-slash-menu__label";
+    contentEl.appendChild(labelEl);
+    const shortcutEl = doc.createElement("span");
+    shortcutEl.className = "owo-slash-menu__shortcut";
+    contentEl.appendChild(shortcutEl);
+    const descEl = doc.createElement("span");
+    descEl.className = "owo-slash-menu__desc";
+    contentEl.appendChild(descEl);
+    itemEl.appendChild(contentEl);
+    updateItemEl(itemEl, cmd, globalIndex, isSelected);
+    return itemEl;
+  }
+  function updateItemEl(itemEl, cmd, globalIndex, isSelected) {
+    itemEl.dataset.globalIndex = String(globalIndex);
+    itemEl.className = `owo-slash-menu__item${isSelected ? " owo-slash-menu__item--selected" : ""}`;
+    itemEl.setAttribute("aria-selected", isSelected ? "true" : "false");
+    if (isSelected) {
+      itemEl.setAttribute("data-selected", "true");
+    } else {
+      itemEl.removeAttribute("data-selected");
+    }
+    const contentEl = itemEl.querySelector(".owo-slash-menu__content");
+    if (contentEl) {
+      const labelEl = contentEl.querySelector(".owo-slash-menu__label");
+      if (labelEl) labelEl.textContent = cmd.label;
+      const shortcutEl = contentEl.querySelector(".owo-slash-menu__shortcut");
+      if (shortcutEl) shortcutEl.textContent = cmd.shortcut ?? "";
+      const descEl = contentEl.querySelector(".owo-slash-menu__desc");
+      if (descEl) descEl.textContent = cmd.description ?? "";
+    }
+  }
+  function render() {
+    if (!state.active && !state.pending || !position) {
+      removeMenu();
+      return;
+    }
+    const el = ensureMenu();
+    el.style.top = `${position.top}px`;
+    el.style.left = `${position.left}px`;
+    const indexMap = /* @__PURE__ */ new Map();
+    state.filteredCommands.forEach((cmd, i) => indexMap.set(cmd, i));
+    const currentIds = [];
+    el.textContent = "";
+    if (state.pending) {
+      const pending = doc.createElement("div");
+      pending.className = "owo-slash-menu__pending";
+      pending.textContent = "Executing...";
+      el.appendChild(pending);
+    }
+    for (const group of groupByCategory(state.filteredCommands)) {
+      const groupEl = doc.createElement("div");
+      groupEl.className = "owo-slash-menu__group";
+      if (group.category) {
+        const categoryEl = doc.createElement("div");
+        categoryEl.className = "owo-slash-menu__category";
+        categoryEl.textContent = group.category;
+        groupEl.appendChild(categoryEl);
+      }
+      for (const cmd of group.commands) {
+        const globalIndex = indexMap.get(cmd) ?? -1;
+        const isSelected = globalIndex === state.selectedIndex;
+        currentIds.push(cmd.id);
+        let itemEl = itemPool.get(cmd.id);
+        if (itemEl) {
+          updateItemEl(itemEl, cmd, globalIndex, isSelected);
+        } else {
+          itemEl = createItemEl(cmd, globalIndex, isSelected);
+          itemPool.set(cmd.id, itemEl);
+        }
+        groupEl.appendChild(itemEl);
+      }
+      el.appendChild(groupEl);
+    }
+    for (const oldId of lastRenderedIds) {
+      if (!currentIds.includes(oldId)) {
+        itemPool.delete(oldId);
+      }
+    }
+    lastRenderedIds = currentIds;
+    const selected = el.querySelector('[data-selected="true"]');
+    if (selected && typeof selected.scrollIntoView === "function") {
+      selected.scrollIntoView({ block: "nearest" });
+    }
+  }
+  function handlePointerDown(e) {
+    if (!state.active) return;
+    const target = e.target;
+    if (menuEl && target && menuEl.contains(target)) return;
+    core.dismissSlashMenu();
+  }
+  function handleViewportChange() {
+    if (!state.active && !state.pending) return;
+    schedulePositionUpdate();
+  }
+  const unsubSlash = core.onSlashStateChange((nextState) => {
+    state = nextState;
+    if (!state.active && !state.pending) {
+      removeMenu();
+      return;
+    }
+    render();
+    schedulePositionUpdate();
+  });
+  doc.addEventListener("pointerdown", handlePointerDown, true);
+  win.addEventListener("resize", handleViewportChange);
+  win.addEventListener("scroll", handleViewportChange, true);
+  if (state.active || state.pending) {
+    render();
+    schedulePositionUpdate();
+  }
+  return {
+    destroy() {
+      unsubSlash();
+      if (frameId) {
+        win.cancelAnimationFrame(frameId);
+        frameId = 0;
+      }
+      doc.removeEventListener("pointerdown", handlePointerDown, true);
+      win.removeEventListener("resize", handleViewportChange);
+      win.removeEventListener("scroll", handleViewportChange, true);
+      removeMenu();
+      itemPool.clear();
+      lastRenderedIds = [];
+    }
+  };
+}
+
+// src/view-engine.ts
+function createViewEngine(options) {
+  const { core } = options;
+  let root = null;
+  let activeBlockId = null;
+  let compositionJustEnded = false;
+  let pendingNativeSync = false;
+  let slashMenu = null;
+  const unsubs = [];
+  function getBlockElements() {
+    if (!root) return /* @__PURE__ */ new Map();
+    const map = /* @__PURE__ */ new Map();
+    for (const child of root.children) {
+      if (child instanceof HTMLElement && child.hasAttribute("data-owo-block")) {
+        const id = child.getAttribute("data-block-id");
+        if (id) map.set(id, child);
+      }
+    }
+    return map;
+  }
+  function activateBlock(blockId) {
+    if (activeBlockId === blockId) return;
+    const blocks = getBlockElements();
+    if (activeBlockId) {
+      const oldEl = blocks.get(activeBlockId);
+      if (oldEl) {
+        oldEl.contentEditable = "false";
+      }
+    }
+    const newEl = blocks.get(blockId);
+    if (newEl) {
+      newEl.contentEditable = "true";
+      activeBlockId = blockId;
+    }
+  }
+  function deactivateAll() {
+    const blocks = getBlockElements();
+    for (const el of blocks.values()) {
+      el.contentEditable = "false";
+    }
+    activeBlockId = null;
+  }
+  function renderFull(doc) {
+    if (!root) return;
+    const ownerDoc = root.ownerDocument;
+    root.textContent = "";
+    let offset = 0;
+    for (let i = 0; i < doc.blocks.length; i++) {
+      const block = doc.blocks[i];
+      const tokens = tokenizeBlock(block.raw, block.type, offset);
+      const el = createBlockElement(
+        ownerDoc,
+        tokens,
+        i,
+        block.type,
+        block.type === "heading" ? block.headingLevel : void 0,
+        block.depth
+      );
+      el.setAttribute("data-block-id", block.id);
+      el.contentEditable = "false";
+      root.appendChild(el);
+      offset += block.raw.length + 1;
+    }
+    if (activeBlockId) {
+      const blocks = getBlockElements();
+      const activeEl = blocks.get(activeBlockId);
+      if (activeEl) {
+        activeEl.contentEditable = "true";
+      } else {
+        activeBlockId = null;
+      }
+    }
+    invalidateBlockCache(root);
+  }
+  function renderDirty(oldDoc, newDoc) {
+    if (!root) return;
+    if (oldDoc.blocks.length !== newDoc.blocks.length) {
+      renderFull(newDoc);
+      return;
+    }
+    const ownerDoc = root.ownerDocument;
+    const blockEls = [...root.querySelectorAll("[data-owo-block]")];
+    for (let i = 0; i < newDoc.blocks.length; i++) {
+      const oldBlock = oldDoc.blocks[i];
+      const newBlock = newDoc.blocks[i];
+      if (oldBlock === newBlock) continue;
+      if (core.getComposition().active && newBlock.id === activeBlockId) continue;
+      const offset = getBlockStartOffset(newDoc, i);
+      const tokens = tokenizeBlock(newBlock.raw, newBlock.type, offset);
+      const el = blockEls[i];
+      if (el) {
+        updateBlockElement(
+          ownerDoc,
+          el,
+          tokens,
+          newBlock.type,
+          newBlock.type === "heading" ? newBlock.headingLevel : void 0,
+          newBlock.depth
+        );
+        el.setAttribute("data-block-id", newBlock.id);
+        if (newBlock.id === activeBlockId) {
+          el.contentEditable = "true";
+        } else {
+          el.contentEditable = "false";
+        }
+      }
+    }
+  }
+  function getActiveBlockFromSelection(vsel) {
+    if (!vsel) return null;
+    return vsel.focus.blockId;
+  }
+  function syncActiveBlockFromDOM() {
+    if (!root || !activeBlockId) return;
+    const blocks = getBlockElements();
+    const activeEl = blocks.get(activeBlockId);
+    if (!activeEl) return;
+    const textContent = activeEl.textContent ?? "";
+    const doc = core.getDocument();
+    const blockIndex = doc.blocks.findIndex((b) => b.id === activeBlockId);
+    if (blockIndex === -1) return;
+    const block = doc.blocks[blockIndex];
+    if (textContent === block.raw) return;
+    const parts = doc.blocks.map((b, i) => i === blockIndex ? textContent : b.raw);
+    const newMarkdown = parts.join("\n");
+    const sel = readSelection(root);
+    core.syncText(newMarkdown, sel);
+  }
+  function getCaretFromPoint(x, y) {
+    const ownerDoc = root?.ownerDocument;
+    if (!ownerDoc) return null;
+    if ("caretPositionFromPoint" in ownerDoc) {
+      const pos = ownerDoc.caretPositionFromPoint(x, y);
+      if (pos) return { node: pos.offsetNode, offset: pos.offset };
+    }
+    if ("caretRangeFromPoint" in ownerDoc) {
+      const range = ownerDoc.caretRangeFromPoint(x, y);
+      if (range) return { node: range.startContainer, offset: range.startOffset };
+    }
+    return null;
+  }
+  function findBlockIdFromElement(el) {
+    let current = el;
+    while (current && current !== root) {
+      if (current.hasAttribute("data-block-id")) {
+        return current.getAttribute("data-block-id");
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+  function onBeforeInput(e) {
+    if (core.getComposition().active) return;
+    const sel = readSelection(root);
+    const oldDoc = core.getDocument();
+    const result = core.applyBeforeInput(
+      { inputType: e.inputType, data: e.data },
+      sel
+    );
+    if (result.action === "handled") {
+      e.preventDefault();
+      syncEmptyAttr();
+    } else if (result.action === "allow-native") {
+      pendingNativeSync = true;
+    }
+  }
+  function onInput() {
+    if (core.getComposition().active) return;
+    if (compositionJustEnded) {
+      compositionJustEnded = false;
+      syncActiveBlockFromDOM();
+    } else if (pendingNativeSync) {
+      pendingNativeSync = false;
+      syncActiveBlockFromDOM();
+    }
+  }
+  function onKeyDown(e) {
+    if (core.getComposition().active) return;
+    const sel = readSelection(root);
+    const result = core.applyKeyDown(
+      {
+        key: e.key,
+        ctrlKey: e.ctrlKey,
+        metaKey: e.metaKey,
+        altKey: e.altKey,
+        shiftKey: e.shiftKey
+      },
+      sel
+    );
+    if (result.action === "handled") {
+      e.preventDefault();
+      syncEmptyAttr();
+    }
+  }
+  function onPaste(e) {
+    e.preventDefault();
+    const raw = e.clipboardData?.getData("text/plain") ?? "";
+    const sel = readSelection(root);
+    core.applyPaste({ text: raw }, sel);
+    syncEmptyAttr();
+  }
+  function onCompositionStart() {
+    const sel = readSelection(root);
+    core.handleCompositionStart(sel);
+  }
+  function onCompositionUpdate() {
+    core.handleCompositionUpdate();
+  }
+  function onCompositionEnd() {
+    const sel = readSelection(root);
+    core.handleCompositionEnd(sel);
+    compositionJustEnded = true;
+    requestAnimationFrame(() => {
+      if (compositionJustEnded) {
+        compositionJustEnded = false;
+        syncActiveBlockFromDOM();
+      }
+    });
+  }
+  function onSelectionChange() {
+    if (!root || core.getComposition().active) return;
+    const sel = readSelection(root);
+    if (sel) {
+      core.updateSelection(sel);
+      const vsel = linearToVirtual(core.getDocument(), sel);
+      const targetBlockId = getActiveBlockFromSelection(vsel);
+      if (targetBlockId && targetBlockId !== activeBlockId) {
+        activateBlock(targetBlockId);
+        const linearSel = virtualToLinear(core.getDocument(), vsel);
+        invalidateBlockCache(root);
+        restoreSelection(root, linearSel);
+      }
+    }
+  }
+  function onMouseDown(e) {
+    if (!root) return;
+    const target = e.target;
+    const blockId = findBlockIdFromElement(target);
+    if (blockId && blockId !== activeBlockId) {
+      activateBlock(blockId);
+      const caret = getCaretFromPoint(e.clientX, e.clientY);
+      if (caret) {
+      } else {
+        const doc = core.getDocument();
+        const blockIndex = doc.blocks.findIndex((b) => b.id === blockId);
+        if (blockIndex >= 0) {
+          const offset = getBlockStartOffset(doc, blockIndex);
+          const sel = { anchor: offset, focus: offset };
+          core.updateSelection(sel);
+          invalidateBlockCache(root);
+          restoreSelection(root, sel);
+        }
+      }
+    }
+  }
+  function syncEmptyAttr() {
+    if (!root) return;
+    const doc = core.getDocument();
+    const empty = doc.blocks.length === 0 || doc.blocks.length === 1 && doc.blocks[0].raw === "";
+    if (empty) root.setAttribute("data-owo-empty", "true");
+    else root.removeAttribute("data-owo-empty");
+  }
+  let lastDoc = null;
+  let pendingSelection = null;
+  function onDocumentChange(doc, vsel) {
+    if (!root) return;
+    const oldDoc = lastDoc;
+    lastDoc = doc;
+    pendingSelection = vsel;
+    if (oldDoc) {
+      renderDirty(oldDoc, doc);
+    } else {
+      renderFull(doc);
+    }
+    const targetBlockId = getActiveBlockFromSelection(vsel);
+    if (targetBlockId && targetBlockId !== activeBlockId) {
+      activateBlock(targetBlockId);
+    }
+    if (pendingSelection) {
+      const linearSel = virtualToLinear(doc, pendingSelection);
+      invalidateBlockCache(root);
+      restoreSelection(root, linearSel);
+      pendingSelection = null;
+    }
+  }
+  function mount(element) {
+    root = element;
+    root.setAttribute("role", "textbox");
+    root.setAttribute("aria-multiline", "true");
+    root.setAttribute("aria-label", "Markdown editor");
+    root.classList.add("owo-editor-root");
+    root.style.whiteSpace = "pre-wrap";
+    root.style.wordBreak = "break-word";
+    root.style.outline = "none";
+    root.contentEditable = "false";
+    const unsubDoc = core.onDocumentChange(onDocumentChange);
+    unsubs.push(unsubDoc);
+    lastDoc = core.getDocument();
+    renderFull(lastDoc);
+    syncEmptyAttr();
+    const doc = core.getDocument();
+    if (doc.blocks.length > 0) {
+      const vsel = core.getVirtualSelection();
+      const targetBlockId = getActiveBlockFromSelection(vsel);
+      if (targetBlockId) {
+        activateBlock(targetBlockId);
+        const sel = core.getSelection();
+        if (sel) {
+          invalidateBlockCache(root);
+          restoreSelection(root, sel);
+        }
+      }
+    }
+    root.addEventListener("beforeinput", onBeforeInput);
+    root.addEventListener("input", onInput);
+    root.addEventListener("compositionstart", onCompositionStart);
+    root.addEventListener("compositionupdate", onCompositionUpdate);
+    root.addEventListener("compositionend", onCompositionEnd);
+    root.addEventListener("keydown", onKeyDown);
+    root.addEventListener("paste", onPaste);
+    root.addEventListener("mousedown", onMouseDown);
+    const onDocSelectionChange = () => onSelectionChange();
+    root.ownerDocument.addEventListener("selectionchange", onDocSelectionChange);
+    unsubs.push(() => {
+      root?.ownerDocument.removeEventListener("selectionchange", onDocSelectionChange);
+    });
+    slashMenu = createSlashMenuOverlay(root, core);
+  }
+  function destroy() {
+    if (!root) return;
+    root.removeEventListener("beforeinput", onBeforeInput);
+    root.removeEventListener("input", onInput);
+    root.removeEventListener("compositionstart", onCompositionStart);
+    root.removeEventListener("compositionupdate", onCompositionUpdate);
+    root.removeEventListener("compositionend", onCompositionEnd);
+    root.removeEventListener("keydown", onKeyDown);
+    root.removeEventListener("paste", onPaste);
+    root.removeEventListener("mousedown", onMouseDown);
+    for (const unsub of unsubs) unsub();
+    unsubs.length = 0;
+    slashMenu?.destroy();
+    slashMenu = null;
+    root = null;
+    activeBlockId = null;
+    lastDoc = null;
+  }
+  return {
+    mount,
+    destroy,
+    getActiveBlockId: () => activeBlockId
+  };
+}
+
+// src/editor.ts
+function createOwoMarkView(core, element) {
+  const engine = createViewEngine({ core });
+  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";
+var BLOCK_ID_ATTR = "data-block-id";
+var SOURCE_START_ATTR = "data-source-line-start";
+var SOURCE_END_ATTR = "data-source-line-end";
+var PreviewDomPatcher = class {
+  root = null;
+  blockElements = /* @__PURE__ */ new Map();
+  /** Tracked unmount callbacks for DOM-mounted renderers. */
+  domUnmounts = /* @__PURE__ */ new Map();
+  mount(root) {
+    this.root = root;
+    this.blockElements.clear();
+  }
+  destroy() {
+    for (const unmount of this.domUnmounts.values()) {
+      try {
+        unmount();
+      } catch {
+      }
+    }
+    this.domUnmounts.clear();
+    this.root = null;
+    this.blockElements.clear();
+  }
+  /**
+   * Full render: replace all content with the given blocks.
+   */
+  fullRender(blocks, htmlMap) {
+    if (!this.root) return;
+    for (const unmount of this.domUnmounts.values()) {
+      try {
+        unmount();
+      } catch {
+      }
+    }
+    this.domUnmounts.clear();
+    this.root.textContent = "";
+    this.blockElements.clear();
+    const doc = this.root.ownerDocument;
+    for (const block of blocks) {
+      const wrapper = this.createBlockWrapper(doc, block);
+      wrapper.innerHTML = htmlMap.get(block.blockId) ?? "";
+      this.root.appendChild(wrapper);
+      this.blockElements.set(block.blockId, wrapper);
+    }
+  }
+  /**
+   * Incremental patch: update only dirty blocks.
+   * Handles additions, removals, and content changes.
+   */
+  patch(blocks, htmlMap, dirtyBlockIds) {
+    if (!this.root) return;
+    const doc = this.root.ownerDocument;
+    const newBlockIds = new Set(blocks.map((b) => b.blockId));
+    const oldBlockIds = new Set(this.blockElements.keys());
+    const structureChanged = blocks.length !== oldBlockIds.size || blocks.some((b) => !oldBlockIds.has(b.blockId));
+    if (structureChanged) {
+      this.rebuildWithReuse(blocks, htmlMap, dirtyBlockIds, doc);
+      return;
+    }
+    for (const blockId of dirtyBlockIds) {
+      const el = this.blockElements.get(blockId);
+      if (el) {
+        const block = blocks.find((b) => b.blockId === blockId);
+        if (block) {
+          this.cleanupDomMount(blockId);
+          this.updateBlockAttributes(el, block);
+          el.innerHTML = htmlMap.get(blockId) ?? "";
+        }
+      }
+    }
+  }
+  /**
+   * Rebuild DOM while reusing non-dirty block wrappers.
+   */
+  rebuildWithReuse(blocks, htmlMap, dirtyBlockIds, doc) {
+    if (!this.root) return;
+    const newBlockIds = new Set(blocks.map((b) => b.blockId));
+    for (const blockId of this.domUnmounts.keys()) {
+      if (dirtyBlockIds.has(blockId) || !newBlockIds.has(blockId)) {
+        this.cleanupDomMount(blockId);
+      }
+    }
+    const existingElements = new Map(this.blockElements);
+    this.root.textContent = "";
+    this.blockElements.clear();
+    for (const block of blocks) {
+      const existing = existingElements.get(block.blockId);
+      if (existing && !dirtyBlockIds.has(block.blockId)) {
+        this.updateBlockAttributes(existing, block);
+        this.root.appendChild(existing);
+        this.blockElements.set(block.blockId, existing);
+      } else {
+        const wrapper = this.createBlockWrapper(doc, block);
+        wrapper.innerHTML = htmlMap.get(block.blockId) ?? "";
+        this.root.appendChild(wrapper);
+        this.blockElements.set(block.blockId, wrapper);
+      }
+    }
+  }
+  /**
+   * Update a single block's HTML content in place.
+   * Used by idle-scheduled backfill and deferred renders.
+   */
+  patchBlockHtml(blockId, html) {
+    const el = this.blockElements.get(blockId);
+    if (!el) return;
+    this.cleanupDomMount(blockId);
+    el.innerHTML = html;
+  }
+  /**
+   * Mount a DOM renderer into a block's wrapper element.
+   * The renderer controls the wrapper's DOM directly.
+   */
+  mountDomContent(blockId, mountFn, unmountFn) {
+    const el = this.blockElements.get(blockId);
+    if (!el) return;
+    this.cleanupDomMount(blockId);
+    el.innerHTML = "";
+    mountFn(el);
+    if (unmountFn) this.domUnmounts.set(blockId, unmountFn);
+  }
+  /**
+   * Cleanup a previous DOM mount for a block, if any.
+   */
+  cleanupDomMount(blockId) {
+    const unmount = this.domUnmounts.get(blockId);
+    if (unmount) {
+      try {
+        unmount();
+      } catch (e) {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(`[PreviewDomPatcher] cleanupDomMount failed for block "${blockId}":`, e);
+        }
+      }
+      this.domUnmounts.delete(blockId);
+    }
+  }
+  createBlockWrapper(doc, block) {
+    const wrapper = doc.createElement("div");
+    wrapper.setAttribute(BLOCK_ATTR, block.blockId);
+    this.updateBlockAttributes(wrapper, block);
+    return wrapper;
+  }
+  updateBlockAttributes(el, block) {
+    el.setAttribute(BLOCK_ID_ATTR, block.blockId);
+    el.setAttribute(SOURCE_START_ATTR, String(block.startLine));
+    el.setAttribute(SOURCE_END_ATTR, String(block.endLine));
+  }
+  /**
+   * Get the DOM element for a given blockId.
+   */
+  getBlockElement(blockId) {
+    return this.blockElements.get(blockId) ?? null;
+  }
+};
+
+// 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);
+    }
+  };
+}
+
+// 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 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 text = block.raw.replace(/^#{1,6}\s*/, "");
+      return `<h${level}>${renderInline(text)}</h${level}>`;
+    }
+    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/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);
+function isCacheInvalidation(state) {
+  return state.dirtyReason === "theme-change" || state.dirtyReason === "renderer-change" || state.dirtyReason === "custom-block-change";
+}
+function collectDirtyBlockIds(state, oldBlocks) {
+  const dirty = /* @__PURE__ */ new Set();
+  const newBlocks = state.previewBlocks;
+  if (!state.dirtyRange) return dirty;
+  const { startBlock, endBlock } = state.dirtyRange;
+  for (let i = startBlock; i <= endBlock && i < newBlocks.length; i++) {
+    dirty.add(newBlocks[i].blockId);
+  }
+  const newIds = new Set(newBlocks.map((b) => b.blockId));
+  for (const old of oldBlocks) {
+    if (!newIds.has(old.blockId)) {
+      dirty.add(old.blockId);
+    }
+  }
+  return dirty;
+}
+function makeContext(version, themeKey, signal) {
+  return { version, themeKey, sourceLineOffset: 0, abortSignal: signal };
+}
+function cancelAllIdle(pendingIdleIds) {
+  for (const id of pendingIdleIds) cancelIdle(id);
+  pendingIdleIds.length = 0;
+}
+function isDeferred(block, registry) {
+  const def = registry.get(block.kind);
+  return def?.priority === "deferred";
+}
+function createRenderBlockFull(registry, renderCache, externalRenderBlock) {
+  return async function renderBlockFull(block, baseContext) {
+    const context = {
+      ...baseContext,
+      sourceLineOffset: block.startLine - 1
+    };
+    const customRenderer = registry.get(block.kind);
+    if (customRenderer) {
+      const result = await customRenderer.render(block, context);
+      if (result.kind === "html") {
+        renderCache.set(block.renderKey, result.html);
+      }
+      return result;
+    }
+    const cached = renderCache.get(block.renderKey);
+    if (cached !== void 0) return { kind: "html", html: cached };
+    if (externalRenderBlock) {
+      const html2 = await externalRenderBlock(block, context);
+      renderCache.set(block.renderKey, html2);
+      return { kind: "html", html: html2 };
+    }
+    const html = renderBlockDefault(block);
+    renderCache.set(block.renderKey, html);
+    return { kind: "html", html };
+  };
+}
+
+// src/strategies/incremental.ts
+var COLD_START_SYNC_LIMIT = 20;
+var COLD_START_BLOCK_THRESHOLD = 50;
+function createIncrementalEngine(options) {
+  const themeKey = options?.themeKey ?? "";
+  const viewportFirst = options?.viewportFirst ?? false;
+  const registry = options?.registry ?? createRendererRegistry();
+  const externalRenderBlock = options?.renderBlock;
+  const onContentUpdate = options?.onContentUpdate;
+  const patcher = new PreviewDomPatcher();
+  const renderCache = /* @__PURE__ */ new Map();
+  let renderedVersion = 0;
+  let lastBlocks = [];
+  let mounted = false;
+  let pendingAbort = null;
+  let pendingIdleIds = [];
+  let pendingBackfill = /* @__PURE__ */ new Set();
+  const renderBlockFull = createRenderBlockFull(registry, renderCache, externalRenderBlock);
+  function applyResult(blockId, result) {
+    if (result.kind === "html") {
+      patcher.patchBlockHtml(blockId, result.html);
+    } else {
+      patcher.mountDomContent(blockId, result.mount, result.unmount);
+    }
+  }
+  function scheduleBlockRender(block, baseContext, signal, targetVersion) {
+    const id = scheduleIdle(() => {
+      if (signal.aborted || renderedVersion > targetVersion) return;
+      renderBlockFull(block, baseContext).then((result) => {
+        if (signal.aborted || renderedVersion > targetVersion) return;
+        applyResult(block.blockId, result);
+        pendingBackfill.delete(block.blockId);
+        onContentUpdate?.();
+      }).catch((err) => {
+        if (!signal.aborted) {
+          console.error(`Preview deferred render error (${block.blockId}):`, err);
+        }
+      });
+    });
+    pendingIdleIds.push(id);
+  }
+  async function rescheduleBackfill(blocks, state, baseContext, signal) {
+    cancelAllIdle(pendingIdleIds);
+    const visibleSet = new Set(state.visibleBlockIds);
+    const pendingBlocks = blocks.filter((b) => pendingBackfill.has(b.blockId));
+    for (const block of pendingBlocks) {
+      if (signal.aborted) return;
+      if (!visibleSet.has(block.blockId)) continue;
+      const result = await renderBlockFull(block, baseContext);
+      if (signal.aborted) return;
+      applyResult(block.blockId, result);
+      pendingBackfill.delete(block.blockId);
+      onContentUpdate?.();
+    }
+    for (const block of pendingBlocks) {
+      if (signal.aborted) return;
+      if (!pendingBackfill.has(block.blockId)) continue;
+      scheduleBlockRender(block, baseContext, signal, state.version);
+    }
+  }
+  return {
+    mount(root) {
+      patcher.mount(root);
+      mounted = true;
+    },
+    destroy() {
+      pendingAbort?.abort();
+      pendingAbort = null;
+      cancelAllIdle(pendingIdleIds);
+      patcher.destroy();
+      renderCache.clear();
+      pendingBackfill.clear();
+      mounted = false;
+      lastBlocks = [];
+      renderedVersion = 0;
+    },
+    async update(state) {
+      if (state.version <= renderedVersion) return;
+      if (!mounted) return;
+      pendingAbort?.abort();
+      cancelAllIdle(pendingIdleIds);
+      const abortController = new AbortController();
+      pendingAbort = abortController;
+      const signal = abortController.signal;
+      const baseContext = makeContext(state.version, themeKey, signal);
+      const blocks = state.previewBlocks;
+      try {
+        if (isCacheInvalidation(state)) {
+          renderCache.clear();
+        }
+        const isInitial = lastBlocks.length === 0 || state.dirtyReason === "full-rebuild" || isCacheInvalidation(state);
+        if (isInitial) {
+          await handleFullRender(blocks, state, baseContext, signal);
+        } else {
+          await handleIncrementalUpdate(blocks, state, baseContext, signal);
+        }
+        if (signal.aborted) return;
+        lastBlocks = blocks;
+        renderedVersion = state.version;
+        onContentUpdate?.();
+      } catch (err) {
+        if (!signal.aborted) {
+          console.error("Preview engine render error:", err);
+        }
+      } finally {
+        if (pendingAbort === abortController) {
+          pendingAbort = null;
+        }
+      }
+    },
+    getRenderedVersion() {
+      return renderedVersion;
+    }
+  };
+  async function handleFullRender(blocks, state, baseContext, signal) {
+    const visibleSet = new Set(state.visibleBlockIds);
+    const useViewportFirst = viewportFirst && visibleSet.size > 0;
+    const useColdStartLimit = !useViewportFirst && blocks.length > COLD_START_BLOCK_THRESHOLD;
+    const realtimeVisible = [];
+    const realtimeOffscreen = [];
+    const deferredAll = [];
+    for (let i = 0; i < blocks.length; i++) {
+      const block = blocks[i];
+      if (isDeferred(block, registry)) {
+        deferredAll.push(block);
+      } else if (useViewportFirst && !visibleSet.has(block.blockId)) {
+        realtimeOffscreen.push(block);
+      } else if (useColdStartLimit && i >= COLD_START_SYNC_LIMIT) {
+        realtimeOffscreen.push(block);
+      } else {
+        realtimeVisible.push(block);
+      }
+    }
+    const htmlMap = /* @__PURE__ */ new Map();
+    const domMounts = [];
+    for (const block of realtimeVisible) {
+      if (signal.aborted) return;
+      const result = await renderBlockFull(block, baseContext);
+      if (result.kind === "html") {
+        htmlMap.set(block.blockId, result.html);
+      } else {
+        htmlMap.set(block.blockId, "");
+        domMounts.push({ blockId: block.blockId, result });
+      }
+    }
+    if (signal.aborted) return;
+    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);
+    }
+  }
+  async function handleIncrementalUpdate(blocks, state, baseContext, signal) {
+    const dirtyBlockIds = collectDirtyBlockIds(state, lastBlocks);
+    if (dirtyBlockIds.size === 0) {
+      if (viewportFirst && pendingBackfill.size > 0 && state.visibleBlockIds.length > 0) {
+        await rescheduleBackfill(blocks, state, baseContext, signal);
+      }
+      return;
+    }
+    const realtimeDirty = [];
+    const deferredDirty = [];
+    for (const block of blocks) {
+      if (!dirtyBlockIds.has(block.blockId)) continue;
+      if (isDeferred(block, registry)) {
+        deferredDirty.push(block);
+      } else {
+        realtimeDirty.push(block);
+      }
+    }
+    const htmlMap = /* @__PURE__ */ new Map();
+    const realtimeDirtyIds = /* @__PURE__ */ new Set();
+    const domMountResults = /* @__PURE__ */ new Map();
+    for (const block of realtimeDirty) {
+      if (signal.aborted) return;
+      const result = await renderBlockFull(block, baseContext);
+      realtimeDirtyIds.add(block.blockId);
+      if (result.kind === "html") {
+        htmlMap.set(block.blockId, result.html);
+      } else {
+        htmlMap.set(block.blockId, "");
+        domMountResults.set(block.blockId, result);
+      }
+    }
+    for (const block of blocks) {
+      if (realtimeDirtyIds.has(block.blockId)) continue;
+      if (dirtyBlockIds.has(block.blockId)) continue;
+      const cached = renderCache.get(block.renderKey);
+      if (cached !== void 0) {
+        htmlMap.set(block.blockId, cached);
+      }
+    }
+    if (signal.aborted) return;
+    patcher.patch(blocks, htmlMap, realtimeDirtyIds);
+    for (const [blockId, result] of domMountResults) {
+      if (signal.aborted) return;
+      applyResult(blockId, result);
+    }
+    for (const block of deferredDirty) {
+      scheduleBlockRender(block, baseContext, signal, state.version);
+    }
+  }
+}
+
+// src/virtual/block-layout-map.ts
+var BlockLayoutMap = class {
+  layouts = [];
+  indexMap = /* @__PURE__ */ new Map();
+  _totalHeight = 0;
+  get totalHeight() {
+    return this._totalHeight;
+  }
+  get size() {
+    return this.layouts.length;
+  }
+  /**
+   * Rebuild the layout table from a new block list.
+   * Blocks that already have measured heights retain them;
+   * new blocks use the provided estimated height.
+   */
+  rebuild(blockIds, getEstimatedHeight) {
+    const oldHeights = /* @__PURE__ */ new Map();
+    for (const layout of this.layouts) {
+      oldHeights.set(layout.blockId, { height: layout.height, measured: layout.measured });
+    }
+    this.layouts = [];
+    this.indexMap.clear();
+    let offsetY = 0;
+    for (let i = 0; i < blockIds.length; i++) {
+      const blockId = blockIds[i];
+      const existing = oldHeights.get(blockId);
+      const height = existing ? existing.height : getEstimatedHeight(blockId);
+      const measured = existing ? existing.measured : false;
+      this.layouts.push({ blockId, offsetY, height, measured });
+      this.indexMap.set(blockId, i);
+      offsetY += height;
+    }
+    this._totalHeight = offsetY;
+  }
+  /**
+   * Update a single block's height. Returns true if the height actually changed.
+   * Recomputes offsetY for all subsequent blocks.
+   */
+  updateHeight(blockId, height, measured) {
+    const idx = this.indexMap.get(blockId);
+    if (idx === void 0) return false;
+    const layout = this.layouts[idx];
+    if (layout.height === height && layout.measured === measured) return false;
+    layout.height = height;
+    layout.measured = measured;
+    this.recomputeFrom(idx);
+    return true;
+  }
+  /**
+   * Batch-update multiple block heights with a single recompute pass.
+   * Avoids O(k·n) when k blocks change in the same frame (e.g. ResizeObserver).
+   */
+  updateHeightBatch(updates) {
+    let minChangedIndex = Infinity;
+    for (const { blockId, height, measured } of updates) {
+      const idx = this.indexMap.get(blockId);
+      if (idx === void 0) continue;
+      const layout = this.layouts[idx];
+      if (layout.height === height && layout.measured === measured) continue;
+      layout.height = height;
+      layout.measured = measured;
+      if (idx < minChangedIndex) minChangedIndex = idx;
+    }
+    if (minChangedIndex === Infinity) return false;
+    this.recomputeFrom(minChangedIndex);
+    return true;
+  }
+  /**
+   * Invalidate all measured heights (e.g., on container width change).
+   * Heights revert to estimated values via the provided estimator.
+   */
+  invalidateAll(getEstimatedHeight) {
+    let offsetY = 0;
+    for (const layout of this.layouts) {
+      layout.height = getEstimatedHeight(layout.blockId);
+      layout.measured = false;
+      layout.offsetY = offsetY;
+      offsetY += layout.height;
+    }
+    this._totalHeight = offsetY;
+  }
+  getLayout(blockId) {
+    const idx = this.indexMap.get(blockId);
+    return idx !== void 0 ? this.layouts[idx] : null;
+  }
+  getLayoutAt(index) {
+    return this.layouts[index] ?? null;
+  }
+  /**
+   * Find the range of block indices visible within [scrollTop, scrollTop + viewportHeight],
+   * expanded by bufferPx on each side.
+   */
+  getVisibleRange(scrollTop, viewportHeight, bufferPx) {
+    const top = Math.max(0, scrollTop - bufferPx);
+    const bottom = scrollTop + viewportHeight + bufferPx;
+    if (this.layouts.length === 0) {
+      return { startIndex: 0, endIndex: -1 };
+    }
+    const startIndex = this.findIndexAtOffset(top);
+    const endIndex = this.findIndexAtOffset(bottom);
+    return {
+      startIndex: Math.max(0, startIndex),
+      endIndex: Math.min(this.layouts.length - 1, endIndex)
+    };
+  }
+  getAllLayouts() {
+    return this.layouts;
+  }
+  // -------------------------------------------------------------------------
+  // Private
+  // -------------------------------------------------------------------------
+  recomputeFrom(fromIndex) {
+    let offsetY = fromIndex > 0 ? this.layouts[fromIndex - 1].offsetY + this.layouts[fromIndex - 1].height : 0;
+    for (let i = fromIndex; i < this.layouts.length; i++) {
+      this.layouts[i].offsetY = offsetY;
+      offsetY += this.layouts[i].height;
+    }
+    this._totalHeight = offsetY;
+  }
+  /**
+   * Binary search: find the index of the block that contains the given Y offset.
+   */
+  findIndexAtOffset(y) {
+    let lo = 0;
+    let hi = this.layouts.length - 1;
+    while (lo <= hi) {
+      const mid = lo + hi >>> 1;
+      const layout = this.layouts[mid];
+      if (layout.offsetY + layout.height <= y) {
+        lo = mid + 1;
+      } else if (layout.offsetY > y) {
+        hi = mid - 1;
+      } else {
+        return mid;
+      }
+    }
+    return Math.min(lo, this.layouts.length - 1);
+  }
+};
+
+// src/virtual/height-cache.ts
+var HeightProjectionCache = class {
+  cache = /* @__PURE__ */ new Map();
+  get(renderKey) {
+    return this.cache.get(renderKey);
+  }
+  set(renderKey, height) {
+    this.cache.set(renderKey, height);
+  }
+  has(renderKey) {
+    return this.cache.has(renderKey);
+  }
+  clear() {
+    this.cache.clear();
+  }
+  get size() {
+    return this.cache.size;
+  }
+};
+
+// src/virtual/height-estimator.ts
+var DEFAULT_PARAGRAPH_HEIGHT = 40;
+var FALLBACK_BLOCK_HEIGHT = 40;
+var CODE_LINE_HEIGHT = 22;
+var CODE_MIN_HEIGHT = 44;
+var TEXT_LINE_HEIGHT = 24;
+var THEMATIC_BREAK_HEIGHT = 24;
+var HEAVY_SMALL_THRESHOLD = 3;
+var HEAVY_MEDIUM_THRESHOLD = 10;
+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) {
+  const lineCount = block.endLine - block.startLine + 1;
+  if (HEAVY_KINDS.has(block.kind)) {
+    return estimateHeavyBlockHeight(lineCount);
+  }
+  if (block.kind === "code-fence") {
+    return Math.max(CODE_MIN_HEIGHT, lineCount * CODE_LINE_HEIGHT);
+  }
+  if (block.kind === "thematic-break") {
+    return THEMATIC_BREAK_HEIGHT;
+  }
+  if (lineCount <= 1) return DEFAULT_PARAGRAPH_HEIGHT;
+  return DEFAULT_PARAGRAPH_HEIGHT + (lineCount - 1) * TEXT_LINE_HEIGHT;
+}
+function estimateHeavyBlockHeight(lineCount) {
+  if (lineCount <= HEAVY_SMALL_THRESHOLD) return HEAVY_SMALL_HEIGHT;
+  if (lineCount <= HEAVY_MEDIUM_THRESHOLD) {
+    const t = (lineCount - HEAVY_SMALL_THRESHOLD) / (HEAVY_MEDIUM_THRESHOLD - HEAVY_SMALL_THRESHOLD);
+    return HEAVY_SMALL_HEIGHT + t * (HEAVY_MEDIUM_HEIGHT - HEAVY_SMALL_HEIGHT);
+  }
+  if (lineCount <= HEAVY_LARGE_THRESHOLD) {
+    const t = (lineCount - HEAVY_MEDIUM_THRESHOLD) / (HEAVY_LARGE_THRESHOLD - HEAVY_MEDIUM_THRESHOLD);
+    return HEAVY_MEDIUM_HEIGHT + t * (HEAVY_LARGE_HEIGHT - HEAVY_MEDIUM_HEIGHT);
+  }
+  return HEAVY_LARGE_HEIGHT;
+}
+
+// src/virtual/offscreen-measurer.ts
+var OffscreenMeasurer = class {
+  container = null;
+  widthSource = null;
+  resizeObserver = null;
+  currentWidth = 0;
+  /**
+   * Initialize the measurer. Creates the offscreen container and attaches
+   * it to the document, syncing width with the source element.
+   */
+  init(widthSource) {
+    this.widthSource = widthSource;
+    const doc = widthSource.ownerDocument;
+    this.container = doc.createElement("div");
+    this.container.setAttribute("aria-hidden", "true");
+    this.container.style.cssText = [
+      "visibility: hidden",
+      "position: absolute",
+      "top: -9999px",
+      "left: 0",
+      "contain: layout paint style",
+      "overflow: hidden",
+      "pointer-events: none"
+    ].join(";");
+    this.currentWidth = widthSource.clientWidth;
+    this.container.style.width = `${this.currentWidth}px`;
+    doc.body.appendChild(this.container);
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newWidth = entry.contentRect.width;
+        if (newWidth !== this.currentWidth && this.container) {
+          this.currentWidth = newWidth;
+          this.container.style.width = `${newWidth}px`;
+        }
+      }
+    });
+    this.resizeObserver.observe(widthSource);
+  }
+  /**
+   * Get the current width of the measurer container.
+   */
+  getWidth() {
+    return this.currentWidth;
+  }
+  /**
+   * Cleanup: disconnect observer, remove container from DOM.
+   */
+  destroy() {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = null;
+    this.container?.remove();
+    this.container = null;
+    this.widthSource = null;
+    this.currentWidth = 0;
+  }
+};
+
+// src/virtual/viewport-manager.ts
+var BLOCK_ID_ATTR2 = "data-block-id";
+var SOURCE_START_ATTR2 = "data-source-line-start";
+var SOURCE_END_ATTR2 = "data-source-line-end";
+var HEIGHT_TRANSITION = "top 0.15s ease-out";
+var TOTAL_HEIGHT_TRANSITION = "height 0.15s ease-out";
+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>`;
+}
+function ensureSkeletonStyles(doc) {
+  try {
+    if (doc.getElementById?.("owo-skeleton-styles")) 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}}`;
+    const target = doc.head ?? doc.body;
+    target?.appendChild(style);
+  } catch {
+  }
+}
+var VirtualViewportManager = class {
+  root = null;
+  scrollContainer = null;
+  contentLayer = null;
+  /** Currently mounted block wrappers, keyed by blockId. */
+  mounted = /* @__PURE__ */ new Map();
+  /** Unmount callbacks for DOM-mounted renderers. */
+  domUnmounts = /* @__PURE__ */ new Map();
+  /** Buffer size as fraction of viewport height (each side). */
+  bufferFraction = 0.5;
+  /**
+   * Mount the viewport manager onto a root element.
+   * Creates an inner scroll container with a content layer for absolute positioning.
+   */
+  mount(root) {
+    this.root = root;
+    this.scrollContainer = root;
+    root.style.overflow = "auto";
+    root.style.position = "relative";
+    const doc = root.ownerDocument;
+    ensureSkeletonStyles(doc);
+    this.contentLayer = doc.createElement("div");
+    this.contentLayer.style.position = "relative";
+    this.contentLayer.style.width = "100%";
+    this.contentLayer.style.transition = TOTAL_HEIGHT_TRANSITION;
+    root.appendChild(this.contentLayer);
+  }
+  /**
+   * Update which blocks are mounted based on scroll position and layout map.
+   * Returns the set of blockIds that are newly mounted (need rendering).
+   */
+  reconcile(blocks, layoutMap) {
+    if (!this.scrollContainer || !this.contentLayer) {
+      return { mounted: /* @__PURE__ */ new Set(), unmounted: /* @__PURE__ */ new Set(), newlyMounted: /* @__PURE__ */ new Set() };
+    }
+    const scrollTop = this.scrollContainer.scrollTop;
+    const viewportHeight = this.scrollContainer.clientHeight;
+    const bufferPx = viewportHeight * this.bufferFraction;
+    this.contentLayer.style.height = `${layoutMap.totalHeight}px`;
+    const { startIndex, endIndex } = layoutMap.getVisibleRange(
+      scrollTop,
+      viewportHeight,
+      bufferPx
+    );
+    const shouldMount = /* @__PURE__ */ new Set();
+    for (let i = startIndex; i <= endIndex && i < blocks.length; i++) {
+      shouldMount.add(blocks[i].blockId);
+    }
+    const unmounted = /* @__PURE__ */ new Set();
+    for (const [blockId, wrapper] of this.mounted) {
+      if (!shouldMount.has(blockId)) {
+        this.cleanupDomMount(blockId);
+        wrapper.remove();
+        this.mounted.delete(blockId);
+        unmounted.add(blockId);
+      }
+    }
+    const newlyMounted = /* @__PURE__ */ new Set();
+    const doc = this.contentLayer.ownerDocument;
+    for (let i = startIndex; i <= endIndex && i < blocks.length; i++) {
+      const block = blocks[i];
+      const layout = layoutMap.getLayoutAt(i);
+      if (!layout) continue;
+      let wrapper = this.mounted.get(block.blockId);
+      if (!wrapper) {
+        wrapper = doc.createElement("div");
+        wrapper.setAttribute(BLOCK_ID_ATTR2, block.blockId);
+        wrapper.setAttribute(SOURCE_START_ATTR2, String(block.startLine));
+        wrapper.setAttribute(SOURCE_END_ATTR2, String(block.endLine));
+        wrapper.style.position = "absolute";
+        wrapper.style.left = "0";
+        wrapper.style.width = "100%";
+        wrapper.style.transition = HEIGHT_TRANSITION;
+        wrapper.innerHTML = createSkeletonHtml(layout.height);
+        this.contentLayer.appendChild(wrapper);
+        this.mounted.set(block.blockId, wrapper);
+        newlyMounted.add(block.blockId);
+      } else {
+        wrapper.setAttribute(SOURCE_START_ATTR2, String(block.startLine));
+        wrapper.setAttribute(SOURCE_END_ATTR2, String(block.endLine));
+      }
+      wrapper.style.top = `${layout.offsetY}px`;
+    }
+    return {
+      mounted: shouldMount,
+      unmounted,
+      newlyMounted
+    };
+  }
+  /**
+   * Update all mounted block positions from the layout map.
+   */
+  updateAllPositions(layoutMap) {
+    if (this.contentLayer) {
+      this.contentLayer.style.height = `${layoutMap.totalHeight}px`;
+    }
+    for (const [blockId, wrapper] of this.mounted) {
+      const layout = layoutMap.getLayout(blockId);
+      if (layout) {
+        wrapper.style.top = `${layout.offsetY}px`;
+      }
+    }
+  }
+  /**
+   * Get the wrapper element for a mounted block.
+   */
+  getWrapper(blockId) {
+    return this.mounted.get(blockId) ?? null;
+  }
+  /**
+   * Set HTML content for a block wrapper.
+   */
+  setBlockHtml(blockId, html) {
+    const wrapper = this.mounted.get(blockId);
+    if (!wrapper) return;
+    this.cleanupDomMount(blockId);
+    wrapper.innerHTML = html;
+  }
+  /**
+   * Mount a DOM renderer into a block wrapper.
+   */
+  mountDomContent(blockId, mountFn, unmountFn) {
+    const wrapper = this.mounted.get(blockId);
+    if (!wrapper) return;
+    this.cleanupDomMount(blockId);
+    wrapper.innerHTML = "";
+    mountFn(wrapper);
+    if (unmountFn) this.domUnmounts.set(blockId, unmountFn);
+  }
+  /**
+   * Get currently mounted block IDs.
+   */
+  getMountedBlockIds() {
+    return Array.from(this.mounted.keys());
+  }
+  /**
+   * Destroy: cleanup all mounted blocks and DOM.
+   */
+  destroy() {
+    for (const unmount of this.domUnmounts.values()) {
+      try {
+        unmount();
+      } catch {
+      }
+    }
+    this.domUnmounts.clear();
+    for (const wrapper of this.mounted.values()) {
+      wrapper.remove();
+    }
+    this.mounted.clear();
+    this.contentLayer?.remove();
+    this.contentLayer = null;
+    this.scrollContainer = null;
+    this.root = null;
+  }
+  cleanupDomMount(blockId) {
+    const unmount = this.domUnmounts.get(blockId);
+    if (unmount) {
+      try {
+        unmount();
+      } catch {
+      }
+      this.domUnmounts.delete(blockId);
+    }
+  }
+};
+
+// src/strategies/virtual.ts
+function createVirtualEngine(options) {
+  const themeKey = options?.themeKey ?? "";
+  const registry = options?.registry ?? createRendererRegistry();
+  const externalRenderBlock = options?.renderBlock;
+  const onContentUpdate = options?.onContentUpdate;
+  const layoutMap = new BlockLayoutMap();
+  const heightCache = new HeightProjectionCache();
+  const measurer = new OffscreenMeasurer();
+  const viewport = new VirtualViewportManager();
+  const renderCache = /* @__PURE__ */ new Map();
+  const renderBlockFull = createRenderBlockFull(registry, renderCache, externalRenderBlock);
+  let renderedVersion = 0;
+  let lastBlocks = [];
+  let blockMap = /* @__PURE__ */ new Map();
+  let mounted = false;
+  let root = null;
+  let pendingAbort = null;
+  let pendingIdleIds = [];
+  let scrollHandler = null;
+  let scrollRafId = 0;
+  let pendingScrollAbort = null;
+  let blockResizeObserver = null;
+  let observedWrappers = /* @__PURE__ */ new Set();
+  let lastMeasurerWidth = 0;
+  function getInitialHeight(block) {
+    const cached = heightCache.get(block.renderKey);
+    if (cached !== void 0) return cached;
+    return estimateBlockHeight(block);
+  }
+  async function renderAndMountBlock(block, baseContext, signal) {
+    if (signal.aborted) return;
+    const result = await renderBlockFull(block, baseContext);
+    if (signal.aborted) return;
+    if (result.kind === "html") {
+      viewport.setBlockHtml(block.blockId, result.html);
+    } else {
+      viewport.mountDomContent(block.blockId, result.mount, result.unmount);
+    }
+    const wrapper = viewport.getWrapper(block.blockId);
+    if (wrapper) {
+      const realHeight = wrapper.offsetHeight;
+      if (realHeight > 0) {
+        heightCache.set(block.renderKey, realHeight);
+        const changed = layoutMap.updateHeight(block.blockId, realHeight, true);
+        if (changed) {
+          viewport.updateAllPositions(layoutMap);
+        }
+      }
+      observeWrapper(block.blockId, wrapper);
+    }
+  }
+  function setupResizeObserver() {
+    blockResizeObserver = new ResizeObserver((entries) => {
+      const updates = [];
+      for (const entry of entries) {
+        const el = entry.target;
+        const blockId = el.getAttribute("data-block-id");
+        if (!blockId) continue;
+        const newHeight = entry.borderBoxSize?.[0]?.blockSize ?? el.offsetHeight;
+        if (newHeight <= 0) continue;
+        const block = blockMap.get(blockId);
+        if (block) {
+          heightCache.set(block.renderKey, newHeight);
+        }
+        updates.push({ blockId, height: newHeight, measured: true });
+      }
+      if (updates.length > 0 && layoutMap.updateHeightBatch(updates)) {
+        viewport.updateAllPositions(layoutMap);
+        onContentUpdate?.();
+      }
+    });
+  }
+  function observeWrapper(blockId, wrapper) {
+    if (!blockResizeObserver || observedWrappers.has(blockId)) return;
+    blockResizeObserver.observe(wrapper);
+    observedWrappers.add(blockId);
+  }
+  function unobserveWrapper(blockId) {
+    if (!blockResizeObserver || !observedWrappers.has(blockId)) return;
+    const wrapper = viewport.getWrapper(blockId);
+    if (wrapper) {
+      blockResizeObserver.unobserve(wrapper);
+    }
+    observedWrappers.delete(blockId);
+  }
+  function onScroll() {
+    if (scrollRafId) return;
+    scrollRafId = requestAnimationFrame(() => {
+      scrollRafId = 0;
+      handleScrollUpdate();
+    });
+  }
+  function handleScrollUpdate() {
+    if (!mounted || lastBlocks.length === 0) return;
+    const { unmounted, newlyMounted } = viewport.reconcile(lastBlocks, layoutMap);
+    for (const blockId of unmounted) {
+      unobserveWrapper(blockId);
+    }
+    if (newlyMounted.size > 0) {
+      pendingScrollAbort?.abort();
+      const abortController = new AbortController();
+      pendingScrollAbort = abortController;
+      const signal = abortController.signal;
+      const baseContext = makeContext(renderedVersion, themeKey, signal);
+      for (const blockId of newlyMounted) {
+        const block = blockMap.get(blockId);
+        if (!block) continue;
+        if (isDeferred(block, registry)) {
+          scheduleDeferredRender(block, baseContext, signal);
+        } else {
+          renderAndMountBlock(block, baseContext, signal).catch((err) => {
+            if (!signal.aborted) {
+              console.error(`Virtual scroll render error (${blockId}):`, err);
+            }
+          });
+        }
+      }
+    }
+  }
+  function scheduleDeferredRender(block, baseContext, signal) {
+    const id = scheduleIdle(() => {
+      if (signal.aborted) return;
+      renderAndMountBlock(block, baseContext, signal).then(() => {
+        if (!signal.aborted) onContentUpdate?.();
+      }).catch((err) => {
+        if (!signal.aborted) {
+          console.error(`Virtual deferred render error (${block.blockId}):`, err);
+        }
+      });
+    });
+    pendingIdleIds.push(id);
+  }
+  function checkWidthChange() {
+    const currentWidth = measurer.getWidth();
+    if (currentWidth !== lastMeasurerWidth && lastMeasurerWidth > 0) {
+      lastMeasurerWidth = currentWidth;
+      heightCache.clear();
+      layoutMap.invalidateAll((blockId) => {
+        const block = blockMap.get(blockId);
+        return block ? estimateBlockHeight(block) : FALLBACK_BLOCK_HEIGHT;
+      });
+      return true;
+    }
+    lastMeasurerWidth = currentWidth;
+    return false;
+  }
+  return {
+    mount(rootEl) {
+      root = rootEl;
+      viewport.mount(rootEl);
+      measurer.init(rootEl);
+      setupResizeObserver();
+      scrollHandler = onScroll;
+      rootEl.addEventListener("scroll", scrollHandler, { passive: true });
+      lastMeasurerWidth = measurer.getWidth();
+      mounted = true;
+    },
+    destroy() {
+      pendingAbort?.abort();
+      pendingAbort = null;
+      pendingScrollAbort?.abort();
+      pendingScrollAbort = null;
+      cancelAllIdle(pendingIdleIds);
+      if (scrollRafId) {
+        cancelAnimationFrame(scrollRafId);
+        scrollRafId = 0;
+      }
+      if (root && scrollHandler) {
+        root.removeEventListener("scroll", scrollHandler);
+        scrollHandler = null;
+      }
+      blockResizeObserver?.disconnect();
+      blockResizeObserver = null;
+      observedWrappers.clear();
+      viewport.destroy();
+      measurer.destroy();
+      renderCache.clear();
+      heightCache.clear();
+      mounted = false;
+      lastBlocks = [];
+      blockMap.clear();
+      renderedVersion = 0;
+      root = null;
+    },
+    async update(state) {
+      if (state.version <= renderedVersion) return;
+      if (!mounted) return;
+      pendingAbort?.abort();
+      pendingScrollAbort?.abort();
+      pendingScrollAbort = null;
+      cancelAllIdle(pendingIdleIds);
+      const abortController = new AbortController();
+      pendingAbort = abortController;
+      const signal = abortController.signal;
+      const baseContext = makeContext(state.version, themeKey, signal);
+      const blocks = state.previewBlocks;
+      try {
+        const cacheInvalid = isCacheInvalidation(state);
+        if (cacheInvalid) {
+          renderCache.clear();
+          heightCache.clear();
+        }
+        const widthChanged = checkWidthChange();
+        const isInitial = lastBlocks.length === 0 || state.dirtyReason === "full-rebuild" || cacheInvalid || widthChanged;
+        const staleIds = new Set(blockMap.keys());
+        for (const block of blocks) {
+          blockMap.set(block.blockId, block);
+          staleIds.delete(block.blockId);
+        }
+        for (const id of staleIds) blockMap.delete(id);
+        if (isInitial) {
+          await handleFullRebuild(blocks, state, baseContext, signal);
+        } else {
+          await handleIncrementalUpdate(blocks, state, baseContext, signal);
+        }
+        if (signal.aborted) return;
+        lastBlocks = blocks;
+        renderedVersion = state.version;
+        onContentUpdate?.();
+      } catch (err) {
+        if (!signal.aborted) {
+          console.error("Virtual preview engine render error:", err);
+        }
+      } finally {
+        if (pendingAbort === abortController) {
+          pendingAbort = null;
+        }
+      }
+    },
+    getRenderedVersion() {
+      return renderedVersion;
+    }
+  };
+  async function handleFullRebuild(blocks, _state, baseContext, signal) {
+    for (const blockId of observedWrappers) {
+      const wrapper = viewport.getWrapper(blockId);
+      if (wrapper && blockResizeObserver) {
+        blockResizeObserver.unobserve(wrapper);
+      }
+    }
+    observedWrappers.clear();
+    const blockIds = blocks.map((b) => b.blockId);
+    layoutMap.rebuild(blockIds, (blockId) => {
+      const block = blockMap.get(blockId);
+      return block ? getInitialHeight(block) : FALLBACK_BLOCK_HEIGHT;
+    });
+    const { mounted: mountedSet } = viewport.reconcile(blocks, layoutMap);
+    if (signal.aborted) return;
+    for (const blockId of mountedSet) {
+      if (signal.aborted) return;
+      const block = blockMap.get(blockId);
+      if (!block) continue;
+      if (isDeferred(block, registry)) {
+        scheduleDeferredRender(block, baseContext, signal);
+      } else {
+        await renderAndMountBlock(block, baseContext, signal);
+      }
+    }
+  }
+  async function handleIncrementalUpdate(blocks, state, baseContext, signal) {
+    const dirtyBlockIds = collectDirtyBlockIds(state, lastBlocks);
+    const blockIds = blocks.map((b) => b.blockId);
+    layoutMap.rebuild(blockIds, (blockId) => {
+      const block = blockMap.get(blockId);
+      return block ? getInitialHeight(block) : FALLBACK_BLOCK_HEIGHT;
+    });
+    const { unmounted, newlyMounted } = viewport.reconcile(blocks, layoutMap);
+    for (const blockId of unmounted) {
+      unobserveWrapper(blockId);
+    }
+    if (signal.aborted) return;
+    const mountedBlockIds = viewport.getMountedBlockIds();
+    const toRender = /* @__PURE__ */ new Set();
+    for (const blockId of mountedBlockIds) {
+      if (newlyMounted.has(blockId) || dirtyBlockIds.has(blockId)) {
+        toRender.add(blockId);
+      }
+    }
+    for (const blockId of toRender) {
+      if (signal.aborted) return;
+      const block = blockMap.get(blockId);
+      if (!block) continue;
+      if (isDeferred(block, registry)) {
+        scheduleDeferredRender(block, baseContext, signal);
+      } else {
+        await renderAndMountBlock(block, baseContext, signal);
+      }
+    }
+  }
+}
+
+// src/engine.ts
+function createOwoMarkPreviewEngine(options) {
+  const strategy = options?.strategy ?? "virtual";
+  switch (strategy) {
+    case "incremental":
+      return createIncrementalEngine(options);
+    case "virtual":
+      return createVirtualEngine(options);
+    default:
+      throw new Error(`Unknown preview strategy: ${strategy}`);
+  }
+}
+
+// src/dom/side-annotation-positioner.ts
+var SideAnnotationPositioner = class {
+  container;
+  resizeObserver = null;
+  repositionScheduled = false;
+  constructor(container) {
+    this.container = container;
+    this.setupResizeObserver();
+  }
+  setupResizeObserver() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.scheduleReposition();
+    });
+    this.resizeObserver.observe(this.container);
+  }
+  scheduleReposition() {
+    if (this.repositionScheduled) return;
+    this.repositionScheduled = true;
+    requestAnimationFrame(() => {
+      this.repositionScheduled = false;
+      this.reposition();
+    });
+  }
+  /**
+   * Scan all side annotations in the container, detect overlaps,
+   * and apply offset positioning to avoid collisions.
+   */
+  reposition() {
+    const annotations = this.container.querySelectorAll(".side-annotation");
+    if (annotations.length <= 1) return;
+    const containerRect = this.container.getBoundingClientRect();
+    const items = [];
+    for (const annotation of annotations) {
+      const aside = annotation.querySelector(".side-annotation-aside");
+      if (!aside) continue;
+      const asideRect = aside.getBoundingClientRect();
+      const annotationRect = annotation.getBoundingClientRect();
+      items.push({
+        annotation,
+        aside,
+        // Original top position relative to container
+        naturalTop: asideRect.top - containerRect.top,
+        naturalBottom: asideRect.bottom - containerRect.top,
+        height: asideRect.height,
+        // Anchor block top (the main content area)
+        anchorTop: annotationRect.top - containerRect.top,
+        // Applied offset
+        offset: 0
+      });
+    }
+    items.sort((a, b) => a.naturalTop - b.naturalTop);
+    for (let i = 1; i < items.length; i++) {
+      const prev = items[i - 1];
+      const curr = items[i];
+      const prevBottom = prev.naturalTop + prev.offset + prev.height;
+      const currTop = curr.naturalTop + curr.offset;
+      if (prevBottom > currTop) {
+        const gap = 8;
+        curr.offset = prevBottom - curr.naturalTop + gap;
+      }
+    }
+    for (const item of items) {
+      if (item.offset > 0) {
+        item.aside.style.position = "relative";
+        item.aside.style.top = `${item.offset}px`;
+        if (item.offset > 20) {
+          item.aside.classList.add("side-annotation-offset");
+          item.aside.setAttribute("data-offset", String(Math.round(item.offset)));
+        }
+      } else {
+        item.aside.style.position = "";
+        item.aside.style.top = "";
+        item.aside.classList.remove("side-annotation-offset");
+        item.aside.removeAttribute("data-offset");
+      }
+    }
+    for (const item of items) {
+      if (this.resizeObserver) {
+        this.resizeObserver.observe(item.annotation);
+      }
+    }
+  }
+  destroy() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+};
+export {
+  Callout,
+  CodeDemo,
+  DEFAULT_MDX_COMPONENTS,
+  FileTree,
+  Kbd,
+  PreviewDomPatcher,
+  SideAnnotationPositioner,
+  Step,
+  Steps,
+  THEME_DARK_CLASS,
+  THEME_LIGHT_CLASS,
+  Tab,
+  Tabs,
+  createOwoMarkPreviewEngine,
+  createOwoMarkProcessor,
+  createOwoMarkVanillaEditor,
+  createOwoMarkView,
+  createRendererRegistry,
+  createViewEngine,
+  getOwoMarkPlugins,
+  getThemeClassName,
+  rehypeMathDisplayFix,
+  rehypeSideAnnotation,
+  remarkConvertSoftBreaksToHardBreaks,
+  remarkSideAnnotation,
+  renderBlockDefault
+};