@owomark/view 0.1.0 → 0.1.2

package/dist/chunk-3CKPBCIP.js

@@ -0,0 +1,144 @@
+// 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);
+  }
+};
+
+export {
+  BlockLayoutMap
+};

package/dist/{chunk-Z7WJR3XO.js → chunk-4V3WQMGV.js}

@@ -892,9 +892,10 @@ function visit(node) {
   }
 }
 function transform(node) {
-  const sideType = String(node.properties["data-side-type"] || "plain");
-  const sideText = node.properties["data-side-text"] ? String(node.properties["data-side-text"]) : null;
-  const isOrphan = node.properties["data-side-orphan"] != null;
+  const properties = node.properties ?? {};
+  const sideType = String(properties["data-side-type"] || "plain");
+  const sideText = properties["data-side-text"] ? String(properties["data-side-text"]) : null;
+  const isOrphan = properties["data-side-orphan"] != null;
   const mainContent = el("div", { class: "side-annotation-main" }, node.children);
   const asideChildren = [];
   if (isOrphan) {

package/dist/chunk-6LWPFJCB.js

@@ -0,0 +1,23 @@
+// 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;
+  }
+};
+
+export {
+  HeightProjectionCache
+};

package/dist/chunk-F3LG7AML.js

@@ -0,0 +1,192 @@
+// src/virtual/viewport-manager.ts
+var BLOCK_ID_ATTR = "data-block-id";
+var SOURCE_START_ATTR = "data-source-line-start";
+var SOURCE_END_ATTR = "data-source-line-end";
+var HEIGHT_TRANSITION = "top 0.15s ease-out";
+var TOTAL_HEIGHT_TRANSITION = "height 0.15s ease-out";
+var 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_ATTR, block.blockId);
+        wrapper.setAttribute(SOURCE_START_ATTR, String(block.startLine));
+        wrapper.setAttribute(SOURCE_END_ATTR, 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_ATTR, String(block.startLine));
+        wrapper.setAttribute(SOURCE_END_ATTR, 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);
+    }
+  }
+};
+
+export {
+  VirtualViewportManager
+};

package/dist/chunk-Y72HQJQI.js

@@ -0,0 +1,45 @@
+// 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;
+}
+
+export {
+  FALLBACK_BLOCK_HEIGHT,
+  estimateBlockHeight
+};

package/dist/index.js

@@ -17,7 +17,20 @@ import {
   rehypeSideAnnotation,
   remarkConvertSoftBreaksToHardBreaks,
   remarkSideAnnotation
-} from "./chunk-Z7WJR3XO.js";
+} from "./chunk-4V3WQMGV.js";
+import {
+  BlockLayoutMap
+} from "./chunk-3CKPBCIP.js";
+import {
+  HeightProjectionCache
+} from "./chunk-6LWPFJCB.js";
+import {
+  FALLBACK_BLOCK_HEIGHT,
+  estimateBlockHeight
+} from "./chunk-Y72HQJQI.js";
+import {
+  VirtualViewportManager
+} from "./chunk-F3LG7AML.js";
 
 // src/editor.ts
 import { createDomAdapter } from "@owomark/core/internal/dom-adapter";
@@ -1175,208 +1188,6 @@ function createIncrementalEngine(options) {
   }
 }
 
-// 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;
@@ -1434,195 +1245,6 @@ var OffscreenMeasurer = class {
   }
 };
 
-// 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 ?? "";

package/dist/internal/virtual/block-layout-map.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Block Layout Map — coordinate table for virtual layout.
+ *
+ * Maintains blockId → { offsetY, height } for all blocks.
+ * When any block's height changes, all subsequent blocks' offsetY are recomputed.
+ */
+type BlockLayout = {
+    blockId: string;
+    offsetY: number;
+    height: number;
+    measured: boolean;
+};
+declare class BlockLayoutMap {
+    private layouts;
+    private indexMap;
+    private _totalHeight;
+    get totalHeight(): number;
+    get size(): number;
+    /**
+     * 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: string[], getEstimatedHeight: (blockId: string) => number): void;
+    /**
+     * Update a single block's height. Returns true if the height actually changed.
+     * Recomputes offsetY for all subsequent blocks.
+     */
+    updateHeight(blockId: string, height: number, measured: boolean): boolean;
+    /**
+     * 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: Iterable<{
+        blockId: string;
+        height: number;
+        measured: boolean;
+    }>): boolean;
+    /**
+     * Invalidate all measured heights (e.g., on container width change).
+     * Heights revert to estimated values via the provided estimator.
+     */
+    invalidateAll(getEstimatedHeight: (blockId: string) => number): void;
+    getLayout(blockId: string): BlockLayout | null;
+    getLayoutAt(index: number): BlockLayout | null;
+    /**
+     * Find the range of block indices visible within [scrollTop, scrollTop + viewportHeight],
+     * expanded by bufferPx on each side.
+     */
+    getVisibleRange(scrollTop: number, viewportHeight: number, bufferPx: number): {
+        startIndex: number;
+        endIndex: number;
+    };
+    getAllLayouts(): readonly BlockLayout[];
+    private recomputeFrom;
+    /**
+     * Binary search: find the index of the block that contains the given Y offset.
+     */
+    private findIndexAtOffset;
+}
+
+export { BlockLayoutMap };

package/dist/internal/virtual/block-layout-map.js

@@ -0,0 +1,6 @@
+import {
+  BlockLayoutMap
+} from "../../chunk-3CKPBCIP.js";
+export {
+  BlockLayoutMap
+};

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

@@ -0,0 +1,17 @@
+/**
+ * Height Projection Cache.
+ *
+ * Stores renderKey → measuredHeight so that blocks with the same
+ * renderKey (same content + theme + kind) can reuse a known height
+ * when they re-enter the viewport, eliminating layout shift.
+ */
+declare class HeightProjectionCache {
+    private cache;
+    get(renderKey: string): number | undefined;
+    set(renderKey: string, height: number): void;
+    has(renderKey: string): boolean;
+    clear(): void;
+    get size(): number;
+}
+
+export { HeightProjectionCache };

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

@@ -0,0 +1,6 @@
+import {
+  HeightProjectionCache
+} from "../../chunk-6LWPFJCB.js";
+export {
+  HeightProjectionCache
+};

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

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

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

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

package/dist/internal/virtual/viewport-manager.d.ts

@@ -0,0 +1,63 @@
+import { PreviewBlock } from '@owomark/core';
+import { BlockLayoutMap } from './block-layout-map.js';
+
+/**
+ * Virtual Viewport Manager.
+ *
+ * Manages which blocks are mounted to the visible DOM based on scroll position.
+ * Uses absolute positioning for block wrappers and sets container total height
+ * to create a virtual scrollbar.
+ */
+
+declare class VirtualViewportManager {
+    private root;
+    private scrollContainer;
+    private contentLayer;
+    /** Currently mounted block wrappers, keyed by blockId. */
+    private mounted;
+    /** Unmount callbacks for DOM-mounted renderers. */
+    private domUnmounts;
+    /** Buffer size as fraction of viewport height (each side). */
+    private bufferFraction;
+    /**
+     * Mount the viewport manager onto a root element.
+     * Creates an inner scroll container with a content layer for absolute positioning.
+     */
+    mount(root: HTMLElement): void;
+    /**
+     * 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: PreviewBlock[], layoutMap: BlockLayoutMap): {
+        mounted: Set<string>;
+        unmounted: Set<string>;
+        newlyMounted: Set<string>;
+    };
+    /**
+     * Update all mounted block positions from the layout map.
+     */
+    updateAllPositions(layoutMap: BlockLayoutMap): void;
+    /**
+     * Get the wrapper element for a mounted block.
+     */
+    getWrapper(blockId: string): HTMLElement | null;
+    /**
+     * Set HTML content for a block wrapper.
+     */
+    setBlockHtml(blockId: string, html: string): void;
+    /**
+     * Mount a DOM renderer into a block wrapper.
+     */
+    mountDomContent(blockId: string, mountFn: (container: HTMLElement) => void, unmountFn?: () => void): void;
+    /**
+     * Get currently mounted block IDs.
+     */
+    getMountedBlockIds(): string[];
+    /**
+     * Destroy: cleanup all mounted blocks and DOM.
+     */
+    destroy(): void;
+    private cleanupDomMount;
+}
+
+export { VirtualViewportManager };

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

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

package/dist/static.js

@@ -17,7 +17,7 @@ import {
   rehypeSideAnnotation,
   remarkConvertSoftBreaksToHardBreaks,
   remarkSideAnnotation
-} from "./chunk-Z7WJR3XO.js";
+} from "./chunk-4V3WQMGV.js";
 export {
   Callout,
   CodeDemo,

package/package.json

@@ -1,20 +1,12 @@
 {
   "name": "@owomark/view",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Rendering engine, preview engine, DOM view layer, and official base theme for OwoMark.",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/kzhoa/qblog.git",
-    "directory": "owomark/packages/owomark-view"
-  },
-  "bugs": {
-    "url": "https://github.com/kzhoa/qblog/issues"
-  },
   "keywords": [
     "markdown",
     "preview",
@@ -33,14 +25,37 @@
       "types": "./dist/static.d.ts",
       "import": "./dist/static.js"
     },
+    "./internal/virtual/block-layout-map": {
+      "types": "./dist/internal/virtual/block-layout-map.d.ts",
+      "import": "./dist/internal/virtual/block-layout-map.js"
+    },
+    "./internal/virtual/height-cache": {
+      "types": "./dist/internal/virtual/height-cache.d.ts",
+      "import": "./dist/internal/virtual/height-cache.js"
+    },
+    "./internal/virtual/height-estimator": {
+      "types": "./dist/internal/virtual/height-estimator.d.ts",
+      "import": "./dist/internal/virtual/height-estimator.js"
+    },
+    "./internal/virtual/viewport-manager": {
+      "types": "./dist/internal/virtual/viewport-manager.d.ts",
+      "import": "./dist/internal/virtual/viewport-manager.js"
+    },
     "./style.css": "./src/style.css",
     "./mdx-components.css": "./src/mdx-components/mdx-components.css",
     "./owomark.css": "./src/theme/owomark.css",
+    "./preview.css": "./src/theme/preview.css",
     "./light.css": "./src/theme/light.css",
     "./dark.css": "./src/theme/dark.css",
+    "./slash-menu.css": "./src/theme/slash-menu.css",
     "./side-annotation.css": "./src/theme/side-annotation.css"
   },
-  "files": ["dist", "src/style.css", "src/mdx-components/mdx-components.css", "src/theme"],
+  "files": [
+    "dist",
+    "src/style.css",
+    "src/mdx-components/mdx-components.css",
+    "src/theme"
+  ],
   "sideEffects": [
     "./src/style.css",
     "./src/mdx-components/mdx-components.css",
@@ -54,7 +69,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@owomark/core": "^0.1.0",
+    "@owomark/core": "^0.1.2",
     "rehype-katex": "^6.0.3",
     "rehype-pretty-code": "^0.14.1",
     "rehype-slug": "^6.0.0",
@@ -74,9 +89,15 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
-    "@mdx-js/mdx": { "optional": true },
-    "react": { "optional": true },
-    "react-dom": { "optional": true }
+    "@mdx-js/mdx": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "^19.0.0",

package/src/theme/owomark.css

@@ -34,6 +34,10 @@
 
 /* Block styles */
 
+.owo-block-paragraph {
+  margin: 0.5rem 0 0.5rem;
+}
+
 .owo-block-heading {
   color: var(--owo-editor-heading, #111827);
   font-family: var(--owo-editor-heading-font, inherit);

package/src/theme/preview.css

@@ -0,0 +1,210 @@
+/* OwoMark optional preview typography preset.
+ * Import this explicitly when the host wants the official reading baseline.
+ * All selectors are scoped to `.owomark-prose` and consume `--owo-*` /
+ * `--owo-preview-*` variables with fallbacks. */
+
+.owomark-prose {
+  color: var(--owo-preview-text, var(--owo-text, #1f2937));
+  font-size: var(--owo-preview-font-size, 1rem);
+  line-height: var(--owo-preview-line-height, 1.75);
+  max-width: none;
+}
+
+.owomark-prose > :first-child {
+  margin-top: 0;
+}
+
+.owomark-prose > :last-child {
+  margin-bottom: 0;
+}
+
+.owomark-prose .anchor {
+  color: var(--owo-preview-anchor, var(--owo-text-muted, #64748b));
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.owomark-prose :is(h1, h2, h3, h4, h5, h6):hover .anchor {
+  opacity: 1;
+}
+
+.owomark-prose h1 {
+  color: var(--owo-preview-heading-color, var(--owo-text, #111827));
+  font-size: var(--owo-preview-h1-size, 2.25rem);
+  margin-top: 0;
+  margin-bottom: var(--owo-preview-h1-margin-bottom, 2rem);
+  line-height: var(--owo-preview-h1-line-height, 1.3);
+}
+
+.owomark-prose h2 {
+  color: var(--owo-preview-heading-color, var(--owo-text, #111827));
+  font-size: var(--owo-preview-h2-size, 1.5rem);
+  margin-top: var(--owo-preview-h2-margin-top, 2.5rem);
+  margin-bottom: var(--owo-preview-h2-margin-bottom, 1.5rem);
+  padding-bottom: var(--owo-preview-h2-padding-bottom, 0.5rem);
+  border-bottom: 1px solid var(--owo-preview-divider, var(--owo-border, #e2e8f0));
+  line-height: var(--owo-preview-h2-line-height, 1.35);
+}
+
+.owomark-prose h3 {
+  color: var(--owo-preview-heading-color, var(--owo-text, #111827));
+  font-size: var(--owo-preview-h3-size, 1.25rem);
+  margin-top: var(--owo-preview-h3-margin-top, 2rem);
+  margin-bottom: var(--owo-preview-h3-margin-bottom, 1rem);
+  line-height: var(--owo-preview-h3-line-height, 1.4);
+}
+
+.owomark-prose p {
+  margin-bottom: var(--owo-preview-p-margin, 1rem);
+}
+
+.owomark-prose ul {
+  list-style-type: disc;
+  padding-left: var(--owo-preview-list-indent, 1.5rem);
+  margin-bottom: var(--owo-preview-list-margin, 1.5rem);
+}
+
+.owomark-prose ol {
+  list-style-type: decimal;
+  padding-left: var(--owo-preview-list-indent, 1.5rem);
+  margin-bottom: var(--owo-preview-list-margin, 1.5rem);
+}
+
+.owomark-prose blockquote {
+  border-left: var(--owo-preview-blockquote-border-width, 4px) solid
+    var(--owo-preview-blockquote-border, var(--owo-border, #e2e8f0));
+  padding-left: var(--owo-preview-blockquote-padding-left, 1rem);
+  margin-left: 0;
+  margin-bottom: var(--owo-preview-blockquote-gap, 1.5rem);
+  color: var(--owo-preview-blockquote-text, var(--owo-text-muted, #64748b));
+}
+
+.owomark-prose code {
+  font-family: var(--owo-preview-font-mono, var(--owo-font-mono, system-ui, monospace));
+  background-color: var(--owo-preview-inline-code-bg, rgba(148, 163, 184, 0.16));
+  padding: var(--owo-preview-inline-code-padding, 0.08em 0.28em);
+  border-radius: var(--owo-preview-inline-code-radius, 3px);
+  border: 1px solid var(--owo-preview-inline-code-border, rgba(226, 232, 240, 0.9));
+  color: var(--owo-preview-inline-code-text, var(--owo-preview-text, var(--owo-text, #1f2937)));
+  font-size: var(--owo-preview-inline-code-size, 0.9em);
+}
+
+.owomark-prose code.language-math.math-inline {
+  font-family: inherit;
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  font-size: 1em;
+  vertical-align: baseline;
+}
+
+.owomark-prose pre {
+  background-color: var(--owo-preview-code-block-bg, var(--owo-surface-raised, #f8fafc));
+  padding: var(--owo-preview-code-block-padding, 1rem);
+  border: 1px solid var(--owo-preview-code-block-border, var(--owo-border, #e2e8f0));
+  border-radius: var(--owo-preview-code-block-radius, 8px);
+  box-shadow: var(--owo-preview-code-block-shadow, none);
+  overflow-x: auto;
+  margin-top: var(--owo-preview-code-block-margin-top, 0.5rem);
+  margin-bottom: var(--owo-preview-code-block-margin-bottom, 0.5rem);
+}
+
+.owomark-prose pre code {
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  color: inherit;
+}
+
+.owomark-prose pre.shiki {
+  background-color: var(--owo-preview-code-block-bg, var(--owo-surface-raised, #f8fafc));
+  padding: var(--owo-preview-code-block-padding, 1rem);
+  border: 1px solid var(--owo-preview-code-block-border, var(--owo-border, #e2e8f0));
+  border-radius: var(--owo-preview-code-block-radius, 8px);
+  box-shadow: var(--owo-preview-code-block-shadow, none);
+}
+
+.owomark-prose pre.shiki code {
+  display: grid;
+  gap: 0;
+}
+
+.owomark-prose pre.shiki span[data-line] {
+  min-height: var(--owo-preview-code-line-min-height, 1.5rem);
+}
+
+.owomark-prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--owo-preview-image-radius, 4px);
+  margin: var(--owo-preview-image-margin, 2rem 0);
+}
+
+.owomark-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: var(--owo-preview-table-margin, 1.5rem);
+}
+
+.owomark-prose th,
+.owomark-prose td {
+  border: 1px solid var(--owo-preview-table-border, var(--owo-border, #e2e8f0));
+  padding: var(--owo-preview-table-cell-padding, 0.625rem 0.75rem);
+  text-align: left;
+}
+
+.owomark-prose th {
+  background-color: var(--owo-preview-table-header-bg, var(--owo-surface-raised, #f8fafc));
+}
+
+.owomark-prose .katex {
+  font-size: 1em;
+  line-height: 1.2;
+}
+
+.owomark-prose .katex-html {
+  display: inline-block;
+  max-width: 100%;
+}
+
+.owomark-prose .katex-display {
+  display: block;
+  margin: var(--owo-preview-katex-display-margin, 2rem 0);
+  padding: var(--owo-preview-katex-display-padding, 0.35rem 0.25rem 0.6rem);
+  text-align: center;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: var(--owo-preview-divider, var(--owo-border, #e2e8f0)) transparent;
+}
+
+.owomark-prose .katex-display::-webkit-scrollbar {
+  height: 6px;
+}
+
+.owomark-prose .katex-display::-webkit-scrollbar-thumb {
+  background-color: var(--owo-preview-divider, var(--owo-border, #e2e8f0));
+  border-radius: 9999px;
+}
+
+.owomark-prose .katex-display::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.owomark-prose .katex-display > .katex {
+  display: inline-block;
+  min-width: max-content;
+  white-space: nowrap;
+  text-align: center;
+  font-size: var(--owo-preview-katex-display-size, 1.22em);
+  line-height: 1.35;
+  padding: 0 0.4rem;
+}
+
+.owomark-prose .katex-display > .katex .base {
+  margin: 0.1em 0;
+}