@owomark/react 0.1.5 → 0.1.7

package/dist/index.js

@@ -1,20 +1,20 @@
 // src/OwoMarkEditor.tsx
 import {
-  useRef as useRef3,
-  useEffect as useEffect2,
+  useRef as useRef4,
+  useEffect as useEffect3,
   useImperativeHandle,
   forwardRef,
-  useCallback
+  useCallback as useCallback2
 } from "react";
 import { getThemeClassName } from "@owomark/view";
 
 // src/editor/EditorBlock.tsx
 import { memo as memo3, useMemo } from "react";
-import { BLOCK_TYPE_TO_CLASS, BQ_STEP, buildBlockquoteBarsBoxShadow } from "@owomark/core";
+import { BLOCK_TYPE_TO_CLASS, BQ_STEP, buildBlockquoteBarsBoxShadow } from "@owomark/core/browser";
 
 // src/editor/EditorDecorator.tsx
 import { memo as memo2 } from "react";
-import { TOKEN_TO_CLASS } from "@owomark/core";
+import { TOKEN_TO_CLASS } from "@owomark/core/browser";
 
 // src/editor/EditorLeaf.tsx
 import { memo } from "react";
@@ -58,6 +58,9 @@ var EditorBlock = memo3(
       {
         "data-owo-block": blockIndex,
         "data-block-id": block.id,
+        "data-source-key": block.sourceKey,
+        "data-source-line-start": block.startLine,
+        "data-source-line-end": block.endLine,
         className,
         style: bqStyle,
         ...headingLevel ? { "data-owo-heading": headingLevel } : {},
@@ -224,33 +227,135 @@ function groupByCategory(commands) {
   return groups;
 }
 
-// src/useOwoMarkCore.ts
+// src/toolbar/Toolbar.tsx
 import {
-  useRef as useRef2,
+  useMemo as useMemo2,
   useState as useState2,
+  useRef as useRef2,
+  useEffect as useEffect2,
+  useCallback,
+  memo as memo5
+} from "react";
+import {
+  editorEntryRegistry
+} from "@owomark/core";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var EMPTY_IDS = [];
+var COLLAPSE_BREAKPOINT = 420;
+var Toolbar = memo5(function Toolbar2({ core, toolbarConfig }) {
+  const commandIds = toolbarConfig.componentCommands ?? EMPTY_IDS;
+  const cacheKey = commandIds.join(",");
+  const commands = useMemo2(() => {
+    const registry = core.getCommandRegistry();
+    const result = [];
+    for (const id of commandIds) {
+      const descriptor = editorEntryRegistry.list().find((entry) => entry.commandId === id);
+      if (!descriptor || descriptor.entryKind !== "component") {
+        if (process.env.NODE_ENV !== "production") {
+          console.warn(`[OwoMark Toolbar] Unknown component command id: "${id}", skipping.`);
+        }
+        continue;
+      }
+      const cmd = registry.get(id);
+      if (cmd && cmd.toolbarEligible) {
+        result.push(cmd);
+      }
+    }
+    return result;
+  }, [core, cacheKey]);
+  const containerRef = useRef2(null);
+  const [collapsed, setCollapsed] = useState2(false);
+  const [popoverOpen, setPopoverOpen] = useState2(false);
+  const popoverRef = useRef2(null);
+  useEffect2(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setCollapsed(entry.contentRect.width < COLLAPSE_BREAKPOINT);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  useEffect2(() => {
+    if (!popoverOpen) return;
+    function handlePointerDown(e) {
+      if (popoverRef.current && !popoverRef.current.contains(e.target)) {
+        setPopoverOpen(false);
+      }
+    }
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
+  }, [popoverOpen]);
+  const handleCommandClick = useCallback((e, cmdId) => {
+    e.preventDefault();
+    core.executeCommandById(cmdId);
+    setPopoverOpen(false);
+  }, [core]);
+  if (commands.length === 0) return null;
+  const buttons = commands.map((cmd) => /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: "owo-toolbar__component-button",
+      onPointerDown: (e) => handleCommandClick(e, cmd.id),
+      children: [
+        cmd.icon && /* @__PURE__ */ jsx5("span", { className: "owo-toolbar__component-icon", children: cmd.icon }),
+        /* @__PURE__ */ jsx5("span", { className: "owo-toolbar__component-label", children: cmd.label })
+      ]
+    },
+    cmd.id
+  ));
+  return /* @__PURE__ */ jsx5("div", { ref: containerRef, className: "owo-toolbar__components-group", role: "toolbar", "aria-label": "Components", children: collapsed ? /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        className: "owo-toolbar__collapse-trigger",
+        onPointerDown: (e) => {
+          e.preventDefault();
+          setPopoverOpen((v) => !v);
+        },
+        children: [
+          /* @__PURE__ */ jsx5("span", { className: "owo-toolbar__component-label", children: "Components" }),
+          /* @__PURE__ */ jsx5("span", { "aria-hidden": "true", children: popoverOpen ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    popoverOpen && /* @__PURE__ */ jsx5("div", { ref: popoverRef, className: "owo-toolbar__popover", children: buttons })
+  ] }) : buttons });
+});
+
+// src/useOwoMarkCore.ts
+import {
+  useRef as useRef3,
+  useState as useState3,
   useLayoutEffect as useLayoutEffect2
 } from "react";
 import {
   createOwoMarkCore,
-  readSelection,
-  restoreSelection,
-  invalidateBlockCache,
   virtualToLinear
 } from "@owomark/core";
+import {
+  readSelection,
+  restoreSelection,
+  invalidateBlockCache
+} from "@owomark/core/browser";
 function useOwoMarkCore(options) {
   const { initialMarkdown, readOnly = false } = options;
-  const containerRef = useRef2(null);
-  const coreRef = useRef2(null);
-  const composingRef = useRef2(false);
-  const pendingSelectionRef = useRef2(null);
-  const onCompositionStateChangeRef = useRef2(options.onCompositionStateChange);
+  const containerRef = useRef3(null);
+  const coreRef = useRef3(null);
+  const composingRef = useRef3(false);
+  const pendingSelectionRef = useRef3(null);
+  const onCompositionStateChangeRef = useRef3(options.onCompositionStateChange);
   onCompositionStateChangeRef.current = options.onCompositionStateChange;
   if (!coreRef.current) {
     coreRef.current = createOwoMarkCore({ initialMarkdown });
   }
   const core = coreRef.current;
-  const [doc, setDoc] = useState2(() => core.getDocument());
-  const [slashState, setSlashState] = useState2(() => core.getSlashState());
+  const [doc, setDoc] = useState3(() => core.getDocument());
+  const [slashState, setSlashState] = useState3(() => core.getSlashState());
   useLayoutEffect2(() => {
     const el = containerRef.current;
     if (!el) return;
@@ -407,13 +512,25 @@ function useOwoMarkCore(options) {
 }
 
 // src/config.ts
+var DEFAULT_TOOLBAR_COMPONENT_COMMANDS = [
+  "component-note",
+  "component-callout",
+  "component-code-demo",
+  "component-details",
+  "component-steps",
+  "component-tabs"
+];
 var DEFAULT_EDITOR_CONFIG = {
   indentMode: "auto",
   enableSideAnnotation: true,
   enableMath: true,
+  enableComponents: true,
   enableMarkdownSandbox: true,
   markdownSandbox: {
     outerFenceTicks: 4
+  },
+  toolbarConfig: {
+    componentCommands: DEFAULT_TOOLBAR_COMPONENT_COMMANDS
   }
 };
 function resolveEditorConfig(config) {
@@ -423,6 +540,10 @@ function resolveEditorConfig(config) {
     markdownSandbox: {
       ...DEFAULT_EDITOR_CONFIG.markdownSandbox,
       ...config?.markdownSandbox
+    },
+    toolbarConfig: {
+      ...DEFAULT_EDITOR_CONFIG.toolbarConfig,
+      ...config?.toolbarConfig
     }
   };
 }
@@ -430,6 +551,7 @@ function deriveProcessorOptions(config) {
   return {
     enableSideAnnotation: config.enableSideAnnotation,
     enableMath: config.enableMath,
+    enableComponents: config.enableComponents,
     enableMarkdownSandbox: config.enableMarkdownSandbox,
     markdownSandbox: config.markdownSandbox
   };
@@ -437,7 +559,7 @@ function deriveProcessorOptions(config) {
 
 // src/OwoMarkEditor.tsx
 import "@owomark/view/style.css";
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var OwoMarkEditor = forwardRef(
   function OwoMarkEditor2(props, ref) {
     const {
@@ -455,6 +577,7 @@ var OwoMarkEditor = forwardRef(
       commandsRef,
       coreRef: externalCoreRef,
       controller,
+      scrollController,
       indentMode: indentModeProp = "auto",
       ariaLabel,
       config: configProp
@@ -464,21 +587,24 @@ var OwoMarkEditor = forwardRef(
     const theme = themeProp;
     const enableSideAnnotation = resolved.enableSideAnnotation;
     const enableMath = resolved.enableMath;
+    const enableComponents = resolved.enableComponents;
+    const toolbarConfig = resolved.toolbarConfig;
     const isControlled = value !== void 0;
-    const lastExternalValue = useRef3(value ?? defaultValue ?? "");
-    const suppressOnChange = useRef3(false);
+    const lastExternalValue = useRef4(value ?? defaultValue ?? "");
+    const suppressOnChange = useRef4(false);
+    const boundSurfaceRef = useRef4(null);
     const { core, doc, slashState, containerRef } = useOwoMarkCore({
       initialMarkdown: lastExternalValue.current,
       readOnly,
       onCompositionStateChange
     });
-    const handleSlashSelect = useCallback((index) => {
+    const handleSlashSelect = useCallback2((index) => {
       core.executeSlashCommand(index);
     }, [core]);
-    const handleSlashDismiss = useCallback(() => {
+    const handleSlashDismiss = useCallback2(() => {
       core.dismissSlashMenu();
     }, [core]);
-    useEffect2(() => {
+    useEffect3(() => {
       if (typeof externalCoreRef === "function") externalCoreRef(core);
       else if (externalCoreRef && typeof externalCoreRef === "object") {
         externalCoreRef.current = core;
@@ -490,7 +616,7 @@ var OwoMarkEditor = forwardRef(
         }
       };
     }, [core, externalCoreRef]);
-    useEffect2(() => {
+    useEffect3(() => {
       const unsub = core.onChange((markdown) => {
         if (suppressOnChange.current) return;
         lastExternalValue.current = markdown;
@@ -498,15 +624,45 @@ var OwoMarkEditor = forwardRef(
       });
       return unsub;
     }, [core, onChange]);
-    useEffect2(() => {
+    useEffect3(() => {
       if (!onSelectionChange) return;
       return core.onSelectionChange(onSelectionChange);
     }, [core, onSelectionChange]);
-    useEffect2(() => {
+    useEffect3(() => {
       if (!controller) return;
       return controller.connectEditor(core);
     }, [core, controller]);
-    useEffect2(() => {
+    useEffect3(() => {
+      const root = containerRef.current;
+      if (!root || !scrollController) return;
+      const measure = () => {
+        scrollController.measureSurface("editor");
+      };
+      const resizeObserver = new ResizeObserver(measure);
+      resizeObserver.observe(root);
+      const mutationObserver = new MutationObserver(measure);
+      mutationObserver.observe(root, {
+        childList: true,
+        subtree: true,
+        characterData: true
+      });
+      const frame = requestAnimationFrame(measure);
+      let disposed = false;
+      if (typeof document !== "undefined" && document.fonts) {
+        document.fonts.ready.then(() => {
+          if (!disposed) {
+            measure();
+          }
+        });
+      }
+      return () => {
+        disposed = true;
+        cancelAnimationFrame(frame);
+        resizeObserver.disconnect();
+        mutationObserver.disconnect();
+      };
+    }, [doc, scrollController, containerRef]);
+    useEffect3(() => {
       if (!isControlled) return;
       if (value === lastExternalValue.current) return;
       suppressOnChange.current = true;
@@ -514,21 +670,24 @@ var OwoMarkEditor = forwardRef(
       lastExternalValue.current = value;
       suppressOnChange.current = false;
     }, [core, value, isControlled]);
-    useEffect2(() => {
+    useEffect3(() => {
       core.setIndentMode(indentMode);
     }, [core, indentMode]);
-    useEffect2(() => {
+    useEffect3(() => {
       core.setEnableSideAnnotation(enableSideAnnotation);
     }, [core, enableSideAnnotation]);
-    useEffect2(() => {
+    useEffect3(() => {
       core.setEnableMath(enableMath);
     }, [core, enableMath]);
-    useEffect2(() => {
+    useEffect3(() => {
+      core.setEnableComponents(enableComponents);
+    }, [core, enableComponents]);
+    useEffect3(() => {
       if (containerRef.current && ariaLabel) {
         containerRef.current.setAttribute("aria-label", ariaLabel);
       }
     }, [ariaLabel, containerRef]);
-    useEffect2(() => {
+    useEffect3(() => {
       if (containerRef.current) {
         containerRef.current.contentEditable = readOnly ? "false" : "true";
         if (readOnly) {
@@ -558,13 +717,23 @@ var OwoMarkEditor = forwardRef(
       themeClassName,
       className
     ].filter(Boolean).join(" ");
-    const setRefs = useCallback((el) => {
+    const setRefs = useCallback2((el) => {
+      if (scrollController && boundSurfaceRef.current !== el) {
+        if (boundSurfaceRef.current) {
+          scrollController.unbindSurface("editor", boundSurfaceRef.current);
+        }
+        if (el) {
+          scrollController.bindSurface("editor", el);
+        }
+        boundSurfaceRef.current = el;
+      }
       containerRef.current = el;
       if (typeof ref === "function") ref(el);
       else if (ref) ref.current = el;
-    }, [ref, containerRef]);
-    return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-      /* @__PURE__ */ jsx5(
+    }, [ref, containerRef, scrollController]);
+    return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx6(Toolbar, { core, toolbarConfig }),
+      /* @__PURE__ */ jsx6(
         "div",
         {
           ref: setRefs,
@@ -572,10 +741,10 @@ var OwoMarkEditor = forwardRef(
           "data-placeholder": placeholder,
           onScroll,
           suppressContentEditableWarning: true,
-          children: doc.blocks.map((block, i) => /* @__PURE__ */ jsx5(EditorBlock, { block, blockIndex: i }, block.id))
+          children: doc.blocks.map((block, i) => /* @__PURE__ */ jsx6(EditorBlock, { block, blockIndex: i }, block.id))
         }
       ),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         SlashMenu,
         {
           state: slashState,
@@ -588,144 +757,1508 @@ var OwoMarkEditor = forwardRef(
 );
 
 // src/OwoMarkPreview.tsx
-import { useRef as useRef4, useEffect as useEffect3 } from "react";
+import { forwardRef as forwardRef3, useEffect as useEffect8, useRef as useRef11 } from "react";
 import {
   createOwoMarkPreviewEngine
 } from "@owomark/view";
-import { jsx as jsx6 } from "react/jsx-runtime";
-function isController(store) {
-  return typeof store.updateVisibleBlockIds === "function";
+
+// src/MdxPreview.tsx
+import {
+  Component,
+  forwardRef as forwardRef2,
+  useEffect as useEffect7,
+  useMemo as useMemo6,
+  useRef as useRef10,
+  useState as useState7
+} from "react";
+import {
+  DEFAULT_MDX_COMPONENTS
+} from "@owomark/processor";
+
+// src/MdxSkeleton.tsx
+import { useMemo as useMemo3, useRef as useRef5 } from "react";
+import { createSkeletonHtml, ensureSkeletonStyles } from "@owomark/view";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function MdxSkeleton({ height, lines, className, style }) {
+  const injected = useRef5(false);
+  if (!injected.current && typeof document !== "undefined") {
+    ensureSkeletonStyles(document);
+    injected.current = true;
+  }
+  const html = useMemo3(
+    () => createSkeletonHtml({ height, lines: lines ?? (height == null ? 3 : void 0) }),
+    [height, lines]
+  );
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: className ?? void 0,
+      style,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
 }
-var OwoMarkPreview = function OwoMarkPreview2(props) {
-  const {
-    state,
-    className,
-    strategy,
-    themeKey,
-    registry,
-    viewportFirst,
-    ariaLabel,
-    renderBlock,
-    onContentUpdate
-  } = props;
-  const onContentUpdateRef = useRef4(onContentUpdate);
-  onContentUpdateRef.current = onContentUpdate;
-  const renderBlockRef = useRef4(renderBlock);
-  renderBlockRef.current = renderBlock;
-  const hasRenderBlock = !!renderBlock;
-  const containerRef = useRef4(null);
-  const engineRef = useRef4(null);
-  useEffect3(() => {
-    if (!containerRef.current) return;
-    const engineOptions = {
-      strategy,
-      themeKey,
-      registry,
-      viewportFirst,
-      renderBlock: hasRenderBlock ? (block, ctx) => renderBlockRef.current(block, ctx) : void 0,
-      onContentUpdate: () => onContentUpdateRef.current?.()
+
+// src/MdxComponentShell.tsx
+import {
+  useRef as useRef6,
+  useState as useState4,
+  useEffect as useEffect4,
+  useLayoutEffect as useLayoutEffect3,
+  useCallback as useCallback3
+} from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var componentHeightCache = /* @__PURE__ */ new Map();
+var DEFAULT_ESTIMATED_HEIGHT = 80;
+function shallowPropsFingerprint(props) {
+  const keys = Object.keys(props).sort();
+  const parts = [];
+  for (const key of keys) {
+    const val = props[key];
+    if (typeof val === "function" || typeof val === "object") continue;
+    parts.push(`${key}=${String(val)}`);
+  }
+  return parts.join("&");
+}
+function MdxComponentShell({ name, propsFingerprint, children }) {
+  const containerRef = useRef6(null);
+  const [status, setStatus] = useState4("skeleton");
+  const cacheKey = propsFingerprint ? `${name}:${propsFingerprint}` : name;
+  const estimatedHeight = componentHeightCache.get(cacheKey) ?? DEFAULT_ESTIMATED_HEIGHT;
+  useEffect4(() => {
+    const id = requestAnimationFrame(() => setStatus("mounting"));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  useLayoutEffect3(() => {
+    if (status !== "mounting") return;
+    const id = requestAnimationFrame(() => setStatus("ready"));
+    return () => cancelAnimationFrame(id);
+  }, [status]);
+  const measureHeight = useCallback3(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const h = el.getBoundingClientRect().height;
+    if (h > 0) {
+      componentHeightCache.set(cacheKey, h);
+    }
+  }, [cacheKey]);
+  useEffect4(() => {
+    const el = containerRef.current;
+    if (!el || status !== "ready") return;
+    measureHeight();
+    const ro = new ResizeObserver(() => measureHeight());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [status, measureHeight]);
+  if (status === "skeleton") {
+    return /* @__PURE__ */ jsx8(MdxSkeleton, { height: estimatedHeight });
+  }
+  return /* @__PURE__ */ jsx8("div", { ref: containerRef, children });
+}
+function wrapWithShell(name, Component2) {
+  function ShellWrapped(props) {
+    const fingerprint = shallowPropsFingerprint(props);
+    return /* @__PURE__ */ jsx8(MdxComponentShell, { name, propsFingerprint: fingerprint, children: /* @__PURE__ */ jsx8(Component2, { ...props }) });
+  }
+  ShellWrapped.displayName = `MdxShell(${name})`;
+  return ShellWrapped;
+}
+function clearComponentHeightCache() {
+  componentHeightCache.clear();
+}
+
+// src/mdx-error.ts
+function parseMdxErrorDetails(error) {
+  if (error && typeof error === "object") {
+    const value = error;
+    if (typeof value.line === "number") {
+      return {
+        message: value.message ?? String(error),
+        line: value.line,
+        column: typeof value.column === "number" ? value.column : void 0
+      };
+    }
+    const text = value.message ?? String(error);
+    const match = text.match(/\((\d+):(\d+)/);
+    if (match) {
+      return {
+        message: text,
+        line: Number(match[1]),
+        column: Number(match[2])
+      };
+    }
+    return { message: text };
+  }
+  return { message: String(error) };
+}
+function parseCompileError(error, kind) {
+  return {
+    ...parseMdxErrorDetails(error),
+    kind
+  };
+}
+
+// src/useMdxPreviewCompilation.ts
+import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef8, useState as useState6 } from "react";
+import { deriveRenderKey as deriveRenderKey2 } from "@owomark/core";
+
+// src/mdx-runtime.ts
+import { compile, run } from "@mdx-js/mdx";
+import * as jsxRuntime from "react/jsx-runtime";
+import {
+  getOwoMarkPlugins,
+  allBuiltinDescriptors,
+  inspectMdxSource,
+  remapMdxErrorDetails
+} from "@owomark/processor";
+var workerInstance = null;
+var workerRefCount = 0;
+var requestCounter = 0;
+var WORKER_COMPILE_TIMEOUT_MS = 5e3;
+var MAX_CRASHES = 3;
+var CRASH_COOLDOWN_MS = 5e3;
+var CRASH_WINDOW_MS = 3e4;
+var permanentlyFailed = false;
+var crashTimestamps = [];
+var pendingRequests = /* @__PURE__ */ new Map();
+function recordCrash() {
+  const now = Date.now();
+  crashTimestamps.push(now);
+  while (crashTimestamps.length > 0 && now - crashTimestamps[0] > CRASH_WINDOW_MS) {
+    crashTimestamps.shift();
+  }
+  if (crashTimestamps.length >= MAX_CRASHES) {
+    permanentlyFailed = true;
+  }
+}
+function canCreateWorker() {
+  if (permanentlyFailed) return false;
+  if (crashTimestamps.length === 0) return true;
+  return Date.now() - crashTimestamps[crashTimestamps.length - 1] >= CRASH_COOLDOWN_MS;
+}
+function tryCreateWorker() {
+  if (workerInstance) return workerInstance;
+  if (!canCreateWorker()) return null;
+  try {
+    if (typeof Worker === "undefined") {
+      permanentlyFailed = true;
+      return null;
+    }
+    const worker = new Worker(
+      new URL("./mdx.worker.js", import.meta.url),
+      { type: "module" }
+    );
+    worker.onmessage = (e) => {
+      const response = e.data;
+      const pending = pendingRequests.get(response.id);
+      if (!pending) return;
+      pendingRequests.delete(response.id);
+      pending.cleanup?.();
+      if (response.ok) {
+        pending.resolve(response.code);
+      } else {
+        pending.reject({ ...response.error, kind: "compile" });
+      }
     };
-    const engine = createOwoMarkPreviewEngine(engineOptions);
-    engine.mount(containerRef.current);
-    engineRef.current = engine;
-    const currentState = state.getState();
-    void engine.update(currentState);
-    return () => {
-      engine.destroy();
-      engineRef.current = null;
+    worker.onerror = () => {
+      recordCrash();
+      worker.terminate();
+      workerInstance = null;
+      for (const [id, pending] of pendingRequests) {
+        pendingRequests.delete(id);
+        pending.cleanup?.();
+        pending.reject({ message: "MDX compile worker crashed", kind: "compile" });
+      }
     };
-  }, [strategy, themeKey, registry, viewportFirst, hasRenderBlock]);
-  useEffect3(() => {
-    const unsub = state.subscribe((newState) => {
-      const engine = engineRef.current;
-      if (engine) {
-        void engine.update(newState);
+    workerInstance = worker;
+    return worker;
+  } catch {
+    recordCrash();
+    return null;
+  }
+}
+function acquireMdxWorker() {
+  workerRefCount++;
+}
+function releaseMdxWorker() {
+  if (--workerRefCount <= 0) {
+    workerRefCount = 0;
+    if (workerInstance) {
+      workerInstance.terminate();
+      workerInstance = null;
+    }
+    for (const [, pending] of pendingRequests) {
+      pending.reject({ message: "Worker released", kind: "compile" });
+    }
+    pendingRequests.clear();
+  }
+}
+function compileInWorker(markdown, options, inspection) {
+  const maybeWorker = tryCreateWorker();
+  if (!maybeWorker) {
+    return {
+      promise: Promise.reject(new Error("Worker unavailable")),
+      cancel: () => {
+      }
+    };
+  }
+  const workerRef = maybeWorker;
+  const id = ++requestCounter;
+  let cancelled = false;
+  let timeoutId = null;
+  const cleanup = () => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  const promise = new Promise((resolve, reject) => {
+    pendingRequests.set(id, { resolve, reject, cleanup });
+    workerRef.postMessage({
+      type: "compile",
+      id,
+      markdown,
+      options: {
+        enableMath: options.enableMath,
+        enableSideAnnotation: options.enableSideAnnotation,
+        enableCodeHighlight: options.enableCodeHighlight,
+        sourceAnchors: options.sourceAnchors,
+        extraRemarkDescriptors: options.extraRemarkDescriptors,
+        extraRehypeDescriptors: options.extraRehypeDescriptors,
+        preparedSource: inspection?.compileSource,
+        sourceMap: inspection?.sourceMap
       }
     });
-    return unsub;
-  }, [state]);
-  useEffect3(() => {
-    const container = containerRef.current;
-    if (!viewportFirst || !container || !isController(state)) return;
-    const controller = state;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const visible = /* @__PURE__ */ new Set();
-        for (const id of controller.getState().visibleBlockIds) {
-          visible.add(id);
-        }
-        for (const entry of entries) {
-          const blockId = entry.target.getAttribute("data-block-id");
-          if (!blockId) continue;
-          if (entry.isIntersecting) {
-            visible.add(blockId);
-          } else {
-            visible.delete(blockId);
-          }
+    timeoutId = setTimeout(() => {
+      const pending = pendingRequests.get(id);
+      if (!pending) return;
+      pendingRequests.delete(id);
+      cleanup();
+      try {
+        workerRef.postMessage({ type: "cancel", id });
+      } catch {
+      }
+      pending.reject({ message: "MDX compile worker timed out", kind: "compile" });
+    }, WORKER_COMPILE_TIMEOUT_MS);
+  });
+  function cancel() {
+    if (cancelled) return;
+    cancelled = true;
+    const pending = pendingRequests.get(id);
+    if (pending) {
+      pendingRequests.delete(id);
+      pending.cleanup?.();
+      pending.reject({ message: "Compilation cancelled", kind: "compile" });
+    }
+    workerRef.postMessage({ type: "cancel", id });
+  }
+  return { promise, cancel };
+}
+async function compileOnMainThread(markdown, options, inspection) {
+  const resolvedInspection = inspection ?? inspectMdxSource(markdown, {
+    enableMath: options.enableMath,
+    enableSideAnnotation: options.enableSideAnnotation,
+    extraRemarkDescriptors: options.extraRemarkDescriptors,
+    extraRemarkPlugins: options.extraRemarkPlugins
+  });
+  const { remarkPlugins, rehypePlugins } = getOwoMarkPlugins({
+    mode: "production",
+    enableMath: options.enableMath,
+    enableSideAnnotation: options.enableSideAnnotation,
+    enableCodeHighlight: options.enableCodeHighlight,
+    sourceAnchors: options.sourceAnchors,
+    extraRemarkDescriptors: options.extraRemarkDescriptors,
+    extraRehypeDescriptors: options.extraRehypeDescriptors,
+    extraRemarkPlugins: options.extraRemarkPlugins,
+    extraRehypePlugins: options.extraRehypePlugins,
+    mdxSourceMap: resolvedInspection.sourceMap
+  });
+  try {
+    const result = await compile(resolvedInspection.compileSource, {
+      outputFormat: "function-body",
+      remarkPlugins,
+      rehypePlugins
+    });
+    return String(result);
+  } catch (error) {
+    throw remapMdxErrorDetails(error, resolvedInspection.sourceMap);
+  }
+}
+function requiresMainThread(options) {
+  if (options.preferWorker !== true) return true;
+  if (options.extraRemarkPlugins?.length || options.extraRehypePlugins?.length) return true;
+  if (options.extraRemarkDescriptors?.length && !allBuiltinDescriptors(options.extraRemarkDescriptors)) return true;
+  if (options.extraRehypeDescriptors?.length && !allBuiltinDescriptors(options.extraRehypeDescriptors)) return true;
+  return false;
+}
+function compileMdx(markdown, options, inspection) {
+  if (requiresMainThread(options)) {
+    return {
+      promise: compileOnMainThread(markdown, options, inspection),
+      cancel: () => {
+      }
+    };
+  }
+  const workerCompile = compileInWorker(markdown, options, inspection);
+  let settled = false;
+  const promise = workerCompile.promise.catch(() => {
+    if (settled) throw new Error("Compilation cancelled");
+    return compileOnMainThread(markdown, options, inspection);
+  });
+  return {
+    promise,
+    cancel: () => {
+      settled = true;
+      workerCompile.cancel();
+    }
+  };
+}
+async function runMdxCode(code) {
+  const module = await run(code, {
+    ...jsxRuntime,
+    baseUrl: import.meta.url
+  });
+  return {
+    Content: module.default
+  };
+}
+
+// src/mdx-preview-utils.tsx
+import { renderBlockDefault } from "@owomark/view";
+
+// src/AsyncCodeBlock.tsx
+import {
+  Children,
+  isValidElement,
+  useEffect as useEffect5,
+  useMemo as useMemo4,
+  useRef as useRef7,
+  useState as useState5
+} from "react";
+
+// src/highlight-cache-key.ts
+import { deriveRenderKey } from "@owomark/core";
+
+// src/highlight-types.ts
+var HIGHLIGHT_WORKER_TIMEOUT_MS = 3500;
+var HIGHLIGHT_COMPONENT_DEBOUNCE_MS = 120;
+var HIGHLIGHT_CACHE_MAX_ENTRIES = 200;
+var DEFAULT_HIGHLIGHT_THEME = "vitesse-light";
+var HIGHLIGHTER_VERSION = "owomark-shiki-js-v1";
+
+// src/highlight-cache-key.ts
+function buildHighlightCacheKey(input) {
+  return deriveRenderKey(
+    [
+      input.code,
+      input.language ?? "",
+      input.themeKey,
+      input.meta ?? "",
+      HIGHLIGHTER_VERSION
+    ].join("\u241F"),
+    "code-fence",
+    ""
+  );
+}
+
+// src/highlight-worker-manager.ts
+var HighlightWorkerManager = class {
+  timeoutMs;
+  cacheMaxEntries;
+  workerFactory;
+  worker = null;
+  workerFailureCount = 0;
+  requestCounter = 0;
+  cache = /* @__PURE__ */ new Map();
+  inflightByCacheKey = /* @__PURE__ */ new Map();
+  inflightByTaskId = /* @__PURE__ */ new Map();
+  constructor(options = {}) {
+    this.timeoutMs = options.timeoutMs ?? HIGHLIGHT_WORKER_TIMEOUT_MS;
+    this.cacheMaxEntries = options.cacheMaxEntries ?? HIGHLIGHT_CACHE_MAX_ENTRIES;
+    this.workerFactory = options.workerFactory;
+  }
+  highlight(input) {
+    const request = {
+      ...input,
+      requestId: `highlight-${++this.requestCounter}`,
+      themeKey: input.themeKey?.trim() || DEFAULT_HIGHLIGHT_THEME
+    };
+    const cached = this.getCached(request.cacheKey);
+    if (cached) {
+      return {
+        request,
+        promise: Promise.resolve({
+          ...request,
+          ok: true,
+          html: cached
+        }),
+        cancel: () => {
         }
-        controller.updateVisibleBlockIds([...visible]);
-      },
-      { root: container, rootMargin: "200px 0px" }
-    );
-    const wrappers = container.querySelectorAll("[data-block-id]");
-    for (const wrapper of wrappers) {
-      observer.observe(wrapper);
-    }
-    const mutation = new MutationObserver((mutations) => {
-      for (const m of mutations) {
-        for (const node of m.addedNodes) {
-          if (node instanceof HTMLElement && node.hasAttribute("data-block-id")) {
-            observer.observe(node);
-          }
+      };
+    }
+    let task = this.inflightByCacheKey.get(request.cacheKey);
+    if (!task) {
+      task = this.startTask(request);
+    }
+    const promise = new Promise((resolve, reject) => {
+      task.consumers.set(request.requestId, {
+        request,
+        resolve,
+        reject
+      });
+    });
+    return {
+      request,
+      promise,
+      cancel: () => this.cancelRequest(request.requestId)
+    };
+  }
+  resetForTesting() {
+    this.worker?.terminate();
+    this.worker = null;
+    this.workerFailureCount = 0;
+    this.requestCounter = 0;
+    this.cache.clear();
+    this.inflightByCacheKey.clear();
+    this.inflightByTaskId.clear();
+  }
+  ensureWorker() {
+    if (this.worker) {
+      return this.worker;
+    }
+    if (!this.workerFactory && typeof Worker === "undefined") {
+      return null;
+    }
+    try {
+      const worker = this.workerFactory ? this.workerFactory() : new Worker(
+        new URL("./highlight.worker.js", import.meta.url),
+        { type: "module" }
+      );
+      if (!worker) {
+        return null;
+      }
+      worker.onmessage = (event) => {
+        this.handleWorkerMessage(event.data);
+      };
+      worker.onerror = () => {
+        this.workerFailureCount += 1;
+        this.worker?.terminate();
+        this.worker = null;
+        const tasks = [...this.inflightByTaskId.values()];
+        for (const task of tasks) {
+          this.finishTaskWithError(task, "Code highlight worker crashed");
         }
+      };
+      this.worker = worker;
+      return worker;
+    } catch {
+      this.workerFailureCount += 1;
+      return null;
+    }
+  }
+  startTask(request) {
+    const task = {
+      taskId: request.requestId,
+      cacheKey: request.cacheKey,
+      request,
+      consumers: /* @__PURE__ */ new Map(),
+      timeoutId: null
+    };
+    this.inflightByCacheKey.set(task.cacheKey, task);
+    this.inflightByTaskId.set(task.taskId, task);
+    const worker = this.ensureWorker();
+    if (!worker) {
+      queueMicrotask(() => {
+        this.finishTaskWithError(task, "Code highlight worker unavailable");
+      });
+      return task;
+    }
+    task.timeoutId = setTimeout(() => {
+      this.cancelTask(task, "Code highlight timed out");
+    }, this.timeoutMs);
+    worker.postMessage({
+      type: "highlight",
+      ...request
+    });
+    return task;
+  }
+  handleWorkerMessage(message) {
+    const task = this.inflightByTaskId.get(message.taskId);
+    if (!task) {
+      return;
+    }
+    this.clearTaskTimeout(task);
+    this.inflightByTaskId.delete(task.taskId);
+    this.inflightByCacheKey.delete(task.cacheKey);
+    if (message.ok) {
+      this.setCached(task.cacheKey, message.html);
+    }
+    for (const consumer of task.consumers.values()) {
+      consumer.resolve(message.ok ? {
+        ...consumer.request,
+        ok: true,
+        html: message.html
+      } : {
+        ...consumer.request,
+        ok: false,
+        error: message.error
+      });
+    }
+  }
+  cancelRequest(requestId) {
+    for (const task of this.inflightByTaskId.values()) {
+      if (!task.consumers.has(requestId)) {
+        continue;
       }
+      const consumer = task.consumers.get(requestId);
+      task.consumers.delete(requestId);
+      consumer.reject(new Error("Highlight request cancelled"));
+      if (task.consumers.size === 0) {
+        this.cancelTask(task, "Highlight request cancelled");
+      }
+      return;
+    }
+  }
+  cancelTask(task, error) {
+    this.worker?.postMessage({
+      type: "cancel",
+      taskId: task.taskId
+    });
+    this.finishTaskWithError(task, error);
+  }
+  finishTaskWithError(task, error) {
+    this.clearTaskTimeout(task);
+    this.inflightByTaskId.delete(task.taskId);
+    this.inflightByCacheKey.delete(task.cacheKey);
+    for (const consumer of task.consumers.values()) {
+      consumer.resolve({
+        ...consumer.request,
+        ok: false,
+        error
+      });
+    }
+    task.consumers.clear();
+  }
+  clearTaskTimeout(task) {
+    if (task.timeoutId !== null) {
+      clearTimeout(task.timeoutId);
+      task.timeoutId = null;
+    }
+  }
+  getCached(cacheKey) {
+    const cached = this.cache.get(cacheKey);
+    if (!cached) {
+      return null;
+    }
+    cached.touchedAt = Date.now();
+    this.cache.delete(cacheKey);
+    this.cache.set(cacheKey, cached);
+    return cached.html;
+  }
+  setCached(cacheKey, html) {
+    this.cache.delete(cacheKey);
+    this.cache.set(cacheKey, {
+      html,
+      touchedAt: Date.now()
     });
-    mutation.observe(container, { childList: true, subtree: true });
+    while (this.cache.size > this.cacheMaxEntries) {
+      const oldestKey = this.cache.keys().next().value;
+      if (!oldestKey) {
+        break;
+      }
+      this.cache.delete(oldestKey);
+    }
+  }
+};
+var singletonManager = null;
+function getHighlightWorkerManager() {
+  if (!singletonManager) {
+    singletonManager = new HighlightWorkerManager();
+  }
+  return singletonManager;
+}
+
+// src/AsyncCodeBlock.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+var nextBlockInstanceId = 1;
+function pickProps(source, omitKeys) {
+  if (!source) {
+    return {};
+  }
+  const next = {};
+  for (const [key, value] of Object.entries(source)) {
+    if (omitKeys.includes(key)) {
+      continue;
+    }
+    next[key] = value;
+  }
+  return next;
+}
+function renderPlainCode(props, status) {
+  const preProps = pickProps(props.preProps, ["children"]);
+  const codeProps = pickProps(props.codeProps, ["children", "className"]);
+  return /* @__PURE__ */ jsx9(
+    "figure",
+    {
+      "data-rehype-pretty-code-figure": "",
+      "data-owo-code-block-state": status,
+      className: "owo-async-code-block",
+      children: /* @__PURE__ */ jsx9(
+        "pre",
+        {
+          ...preProps,
+          className: ["shiki", props.themeKey, props.className].filter(Boolean).join(" "),
+          "data-language": props.language ?? "text",
+          "data-theme": props.themeKey,
+          children: /* @__PURE__ */ jsx9(
+            "code",
+            {
+              ...codeProps,
+              "data-language": props.language ?? "text",
+              "data-theme": props.themeKey,
+              style: { display: "grid" },
+              children: props.code.split("\n").map((line, index, allLines) => /* @__PURE__ */ jsxs4("span", { "data-line": "", children: [
+                line,
+                index < allLines.length - 1 ? "\n" : ""
+              ] }, `${index}:${line}`))
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function AsyncCodeBlock(props) {
+  const {
+    code,
+    language,
+    meta,
+    themeKey,
+    documentVersion,
+    manager: managerProp
+  } = props;
+  const manager = managerProp ?? getHighlightWorkerManager();
+  const blockInstanceIdRef = useRef7(`async-code-block-${nextBlockInstanceId++}`);
+  const activeRequestRef = useRef7(null);
+  const [state, setState] = useState5({ status: "plain", html: null });
+  const cacheKey = useMemo4(() => buildHighlightCacheKey({
+    code,
+    language,
+    themeKey,
+    meta
+  }), [code, language, meta, themeKey]);
+  useEffect5(() => {
+    setState((current) => current.status === "highlighted" && current.html ? current : { status: "loading", html: null });
+    let activeCancel = null;
+    const timer = setTimeout(() => {
+      const task = manager.highlight({
+        documentVersion,
+        blockInstanceId: blockInstanceIdRef.current,
+        cacheKey,
+        code,
+        language,
+        themeKey,
+        meta
+      });
+      activeRequestRef.current = task.request.requestId;
+      activeCancel = task.cancel;
+      void task.promise.then((response) => {
+        if (activeRequestRef.current !== response.requestId) {
+          return;
+        }
+        if (response.documentVersion !== documentVersion) {
+          return;
+        }
+        if (response.cacheKey !== cacheKey) {
+          return;
+        }
+        if (response.ok) {
+          setState({ status: "highlighted", html: response.html });
+          return;
+        }
+        setState({ status: "plain", html: null });
+      }).catch(() => {
+        if (activeRequestRef.current === task.request.requestId) {
+          setState({ status: "plain", html: null });
+        }
+      });
+    }, HIGHLIGHT_COMPONENT_DEBOUNCE_MS);
     return () => {
-      observer.disconnect();
-      mutation.disconnect();
+      clearTimeout(timer);
+      activeCancel?.();
+      activeRequestRef.current = null;
     };
-  }, [viewportFirst, state]);
-  return /* @__PURE__ */ jsx6(
-    "div",
+  }, [cacheKey, code, documentVersion, language, manager, meta, themeKey]);
+  if (state.status === "highlighted") {
+    return /* @__PURE__ */ jsx9(
+      "figure",
+      {
+        "data-rehype-pretty-code-figure": "",
+        "data-owo-code-block-state": "highlighted",
+        className: "owo-async-code-block",
+        dangerouslySetInnerHTML: { __html: state.html }
+      }
+    );
+  }
+  return renderPlainCode(props, state.status);
+}
+function readCodeText(children) {
+  if (typeof children === "string") {
+    return children;
+  }
+  if (Array.isArray(children)) {
+    return children.map(readCodeText).join("");
+  }
+  if (isValidElement(children)) {
+    return readCodeText(children.props.children);
+  }
+  return "";
+}
+function getLanguageFromClassName(className) {
+  if (!className) {
+    return null;
+  }
+  const match = className.match(/language-([A-Za-z0-9_-]+)/);
+  return match?.[1] ?? null;
+}
+function MdxAsyncPre(props) {
+  const {
+    themeKey,
+    documentVersion,
+    children,
+    ...nativePreProps
+  } = props;
+  if (Children.count(children) !== 1) {
+    return /* @__PURE__ */ jsx9("pre", { ...nativePreProps, children });
+  }
+  const child = Children.only(children);
+  if (!isValidElement(child)) {
+    return /* @__PURE__ */ jsx9("pre", { ...nativePreProps, children });
+  }
+  const language = getLanguageFromClassName(child.props.className);
+  const meta = typeof child.props["data-meta"] === "string" ? child.props["data-meta"] : null;
+  const code = readCodeText(child.props.children);
+  return /* @__PURE__ */ jsx9(
+    AsyncCodeBlock,
     {
-      ref: containerRef,
-      className,
-      role: "document",
-      "aria-label": ariaLabel ?? "Preview",
-      "aria-live": "polite"
+      code,
+      language,
+      meta,
+      themeKey,
+      documentVersion,
+      className: child.props.className,
+      codeProps: child.props,
+      preProps: nativePreProps
     }
   );
-};
+}
+function MdxInlineCode(props) {
+  return /* @__PURE__ */ jsx9("code", { ...props });
+}
+
+// src/mdx-preview-utils.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var objectIdentityMap = /* @__PURE__ */ new WeakMap();
+var nextObjectIdentity = 1;
+function getObjectIdentity(value) {
+  if (!value) return "0";
+  const existing = objectIdentityMap.get(value);
+  if (existing) return String(existing);
+  const id = nextObjectIdentity++;
+  objectIdentityMap.set(value, id);
+  return String(id);
+}
+function buildRuntimeComponents(mdxAnalysis, baseComponents, runtimeContext) {
+  const components = {
+    ...baseComponents,
+    pre: function RuntimeAsyncPre(props) {
+      return /* @__PURE__ */ jsx10(
+        MdxAsyncPre,
+        {
+          ...props,
+          themeKey: runtimeContext.themeKey,
+          documentVersion: runtimeContext.documentVersion
+        }
+      );
+    },
+    code: MdxInlineCode
+  };
+  function registerMissingComponentPath(componentName) {
+    const parts = componentName.split(".");
+    let cursor = components;
+    for (let index = 0; index < parts.length; index += 1) {
+      const part = parts[index];
+      const isLeaf = index === parts.length - 1;
+      const existing = cursor[part];
+      if (isLeaf) {
+        if (existing === void 0) {
+          cursor[part] = function MissingComponent(props) {
+            const { children, ...restProps } = props;
+            return /* @__PURE__ */ jsx10("div", { "data-mdx-missing": componentName, ...restProps, children });
+          };
+        }
+        return;
+      }
+      if (existing == null) {
+        const nested = {};
+        cursor[part] = nested;
+        cursor = nested;
+        continue;
+      }
+      if (typeof existing === "function") {
+        return;
+      }
+      cursor = existing;
+    }
+  }
+  for (const name of mdxAnalysis.componentNames) {
+    registerMissingComponentPath(name);
+  }
+  return components;
+}
+async function renderMarkdownBlocksCached(blocks, themeKey, cache, renderBlock) {
+  const nextCache = /* @__PURE__ */ new Map();
+  const results = await Promise.all(blocks.map(async (block) => {
+    const cached = cache.get(block.renderKey);
+    if (cached !== void 0) {
+      nextCache.set(block.renderKey, cached);
+      return { blockId: block.blockId, html: cached };
+    }
+    const context = {
+      version: 0,
+      themeKey,
+      sourceLineOffset: block.startLine - 1
+    };
+    const html = renderBlock ? await renderBlock(block, context) : await renderBlockDefault(block);
+    nextCache.set(block.renderKey, html);
+    return { blockId: block.blockId, html };
+  }));
+  cache.clear();
+  for (const [k, v] of nextCache) cache.set(k, v);
+  return results;
+}
+
+// src/useMdxPreviewCompilation.ts
+import { inspectMdxSource as inspectMdxSource2 } from "@owomark/processor";
+function useMdxPreviewCompilation({
+  snapshot,
+  themeKey,
+  renderBlock,
+  mdx,
+  wrappedComponents
+}) {
+  const requestIdRef = useRef8(0);
+  const cancelRef = useRef8(null);
+  const blockCacheRef = useRef8(/* @__PURE__ */ new Map());
+  const [mdxDisplay, setMdxDisplay] = useState6({
+    code: null,
+    Content: null,
+    runtimeComponents: null,
+    compileKey: null,
+    renderKey: null,
+    pending: false,
+    error: null
+  });
+  const [markdownHtml, setMarkdownHtml] = useState6(null);
+  useEffect6(() => {
+    acquireMdxWorker();
+    return () => {
+      cancelRef.current?.();
+      cancelRef.current = null;
+      releaseMdxWorker();
+    };
+  }, []);
+  const mdxInspection = useMemo5(
+    () => inspectMdxSource2(snapshot.markdown, {
+      enableMath: mdx?.enableMath,
+      enableSideAnnotation: mdx?.enableSideAnnotation,
+      extraRemarkDescriptors: mdx?.extraRemarkDescriptors,
+      extraRemarkPlugins: mdx?.extraRemarkPlugins
+    }),
+    [
+      mdx?.enableMath,
+      mdx?.enableSideAnnotation,
+      mdx?.extraRemarkDescriptors,
+      mdx?.extraRemarkPlugins,
+      snapshot.markdown
+    ]
+  );
+  const hasMdx = mdx?.forceFullDocumentCompile === true || mdxInspection.hasMdxSyntax;
+  const optionsFingerprint = useMemo5(() => {
+    const b = (v) => v === true ? "1" : v === false ? "0" : "_";
+    const ds = (arr) => arr?.length ? arr.map((d) => d.options ? `${d.name}(${JSON.stringify(d.options)})` : d.name).join(",") : "";
+    return [
+      b(mdx?.enableMath),
+      b(mdx?.enableSideAnnotation),
+      b(mdx?.sourceAnchors),
+      ds(mdx?.extraRemarkDescriptors),
+      ds(mdx?.extraRehypeDescriptors),
+      `rp${getObjectIdentity(mdx?.extraRemarkPlugins)}`,
+      `hp${getObjectIdentity(mdx?.extraRehypePlugins)}`
+    ].join("|");
+  }, [
+    mdx?.enableMath,
+    mdx?.enableSideAnnotation,
+    mdx?.sourceAnchors,
+    mdx?.extraRemarkDescriptors,
+    mdx?.extraRehypeDescriptors,
+    mdx?.extraRemarkPlugins,
+    mdx?.extraRehypePlugins
+  ]);
+  const compileKey = useMemo5(
+    () => deriveRenderKey2(`${snapshot.markdown}:${optionsFingerprint}`, "custom", ""),
+    [snapshot.markdown, optionsFingerprint]
+  );
+  const componentFingerprint = useMemo5(
+    () => `cp${getObjectIdentity(mdx?.components)}:theme:${themeKey}`,
+    [mdx?.components, themeKey]
+  );
+  const renderKey = useMemo5(
+    () => `${compileKey}:${componentFingerprint}`,
+    [compileKey, componentFingerprint]
+  );
+  useEffect6(() => {
+    if (!snapshot.markdown.trim()) {
+      cancelRef.current?.();
+      cancelRef.current = null;
+      setMarkdownHtml(null);
+      setMdxDisplay({
+        code: null,
+        Content: null,
+        runtimeComponents: null,
+        compileKey: null,
+        renderKey: null,
+        pending: false,
+        error: null
+      });
+      return;
+    }
+    const requestId = ++requestIdRef.current;
+    if (!hasMdx) {
+      cancelRef.current?.();
+      cancelRef.current = null;
+      void renderMarkdownBlocksCached(snapshot.previewBlocks, themeKey, blockCacheRef.current, renderBlock).then((blocks) => {
+        if (requestIdRef.current !== requestId) return;
+        setMarkdownHtml(blocks);
+        setMdxDisplay({
+          code: null,
+          Content: null,
+          runtimeComponents: null,
+          compileKey: null,
+          renderKey: null,
+          pending: false,
+          error: null
+        });
+      });
+      return;
+    }
+    if (mdxDisplay.compileKey === compileKey && mdxDisplay.code) {
+      if (mdxDisplay.renderKey !== renderKey) {
+        const rerunId = ++requestIdRef.current;
+        const cachedCode = mdxDisplay.code;
+        setMdxDisplay((prev) => ({ ...prev, pending: true, error: null }));
+        void (async () => {
+          try {
+            const { Content } = await runMdxCode(cachedCode);
+            if (requestIdRef.current !== rerunId) return;
+            setMdxDisplay((prev) => {
+              if (prev.compileKey !== compileKey || prev.code !== cachedCode) return prev;
+              return {
+                ...prev,
+                Content,
+                runtimeComponents: buildRuntimeComponents(mdxInspection, wrappedComponents, {
+                  themeKey,
+                  documentVersion: snapshot.contentVersion
+                }),
+                renderKey,
+                pending: false,
+                error: null
+              };
+            });
+          } catch (error) {
+            if (requestIdRef.current !== rerunId) return;
+            setMdxDisplay((prev) => ({
+              ...prev,
+              pending: false,
+              error: parseCompileError(error, "runtime")
+            }));
+          }
+        })();
+      }
+      return;
+    }
+    setMdxDisplay((prev) => ({ ...prev, pending: true, error: null }));
+    setMarkdownHtml(null);
+    cancelRef.current?.();
+    cancelRef.current = null;
+    const timer = setTimeout(() => {
+      const { promise, cancel } = compileMdx(snapshot.markdown, {
+        enableMath: mdx?.enableMath,
+        enableSideAnnotation: mdx?.enableSideAnnotation,
+        enableCodeHighlight: false,
+        sourceAnchors: mdx?.sourceAnchors,
+        extraRemarkDescriptors: mdx?.extraRemarkDescriptors,
+        extraRehypeDescriptors: mdx?.extraRehypeDescriptors,
+        extraRemarkPlugins: mdx?.extraRemarkPlugins,
+        extraRehypePlugins: mdx?.extraRehypePlugins
+      }, mdxInspection);
+      cancelRef.current = cancel;
+      void (async () => {
+        try {
+          const code = await promise;
+          if (requestIdRef.current !== requestId) return;
+          const { Content } = await runMdxCode(code);
+          if (requestIdRef.current !== requestId) return;
+          setMdxDisplay({
+            code,
+            Content,
+            runtimeComponents: buildRuntimeComponents(mdxInspection, wrappedComponents, {
+              themeKey,
+              documentVersion: snapshot.contentVersion
+            }),
+            compileKey,
+            renderKey,
+            pending: false,
+            error: null
+          });
+        } catch (error) {
+          if (requestIdRef.current !== requestId) return;
+          setMdxDisplay((prev) => ({
+            ...prev,
+            pending: false,
+            error: parseCompileError(error, "compile")
+          }));
+        }
+      })();
+    }, 200);
+    return () => {
+      clearTimeout(timer);
+      cancelRef.current?.();
+      cancelRef.current = null;
+    };
+  }, [
+    compileKey,
+    hasMdx,
+    mdx?.enableMath,
+    mdx?.enableSideAnnotation,
+    mdx?.forceFullDocumentCompile,
+    mdx?.extraRehypeDescriptors,
+    mdx?.extraRehypePlugins,
+    mdx?.extraRemarkDescriptors,
+    mdx?.extraRemarkPlugins,
+    mdxInspection,
+    mdx?.sourceAnchors,
+    mdxDisplay.compileKey,
+    mdxDisplay.Content,
+    mdxDisplay.renderKey,
+    renderBlock,
+    renderKey,
+    snapshot.markdown,
+    snapshot.contentVersion,
+    snapshot.previewBlocks,
+    themeKey,
+    wrappedComponents
+  ]);
+  return {
+    hasMdx,
+    markdownHtml,
+    mdxDisplay
+  };
+}
 
 // src/useOwoMarkSharedState.ts
-import { useRef as useRef5, useSyncExternalStore, useCallback as useCallback2 } from "react";
+import { useRef as useRef9, useSyncExternalStore, useCallback as useCallback4 } from "react";
 import {
   createSharedStateStore
 } from "@owomark/core";
 function useOwoMarkSharedState(options) {
-  const controllerRef = useRef5(null);
+  const controllerRef = useRef9(null);
   if (!controllerRef.current) {
     controllerRef.current = createSharedStateStore(options);
   }
   return controllerRef.current;
 }
 function useSharedStateSnapshot(controller) {
-  const subscribe = useCallback2(
+  const subscribe = useCallback4(
     (onStoreChange) => controller.subscribe(onStoreChange),
     [controller]
   );
-  const getSnapshot = useCallback2(() => controller.getState(), [controller]);
+  const getSnapshot = useCallback4(() => controller.getState(), [controller]);
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}
+function useSharedStateSelector(store, selector, isEqual = Object.is) {
+  const selectedRef = useRef9(selector(store.getState()));
+  const selected = selector(store.getState());
+  if (!isEqual(selectedRef.current, selected)) {
+    selectedRef.current = selected;
+  }
+  const subscribe = useCallback4((onStoreChange) => store.subscribeWithSelector(selector, (nextSelected) => {
+    if (isEqual(selectedRef.current, nextSelected)) return;
+    selectedRef.current = nextSelected;
+    onStoreChange();
+  }, isEqual), [isEqual, selector, store]);
+  const getSnapshot = useCallback4(() => selectedRef.current, []);
   return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
 }
 
+// src/MdxPreview.tsx
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function locationText(error) {
+  if (error.line == null) return null;
+  if (error.column == null) return `\u884C ${error.line}`;
+  return `\u884C ${error.line}:${error.column}`;
+}
+function ErrorNotice({ error }) {
+  const location = locationText(error);
+  const label = error.kind === "compile" ? "MDX Compile" : "MDX Runtime";
+  return /* @__PURE__ */ jsx11("div", { className: "sticky top-0 z-10 mb-4 rounded-md border border-[var(--owo-cmp-danger-border)] bg-[var(--owo-cmp-danger-bg)] px-4 py-3 text-sm text-[var(--owo-cmp-danger-text)]", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-2", children: [
+    /* @__PURE__ */ jsx11("span", { className: "mt-0.5 shrink-0 font-mono text-[11px] font-bold uppercase", children: label }),
+    /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+      location && /* @__PURE__ */ jsx11("span", { className: "mr-2 rounded bg-[var(--owo-cmp-danger-border)] px-1.5 py-0.5 font-mono text-xs", children: location }),
+      /* @__PURE__ */ jsx11("span", { className: "break-words", children: error.message })
+    ] })
+  ] }) });
+}
+var RuntimeErrorBoundary = class extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error: parseCompileError(error, "runtime") };
+  }
+  componentDidCatch(error) {
+    this.props.onError(parseCompileError(error, "runtime"));
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ jsx11(ErrorNotice, { error: this.state.error });
+    }
+    return this.props.children;
+  }
+};
+function useMdxPreviewContentSnapshot(store, markdownOverride) {
+  return useSharedStateSelector(
+    store,
+    (snapshot) => ({
+      markdown: markdownOverride ?? snapshot.markdown,
+      previewBlocks: snapshot.previewBlocks,
+      contentVersion: snapshot.contentVersion
+    }),
+    (prev, next) => prev.markdown === next.markdown && prev.previewBlocks === next.previewBlocks && prev.contentVersion === next.contentVersion
+  );
+}
+var MdxPreview = forwardRef2(function MdxPreview2(props, ref) {
+  const {
+    state,
+    markdown,
+    className,
+    themeKey = "",
+    ariaLabel,
+    onScroll,
+    scrollController,
+    scrollSync = "bidirectional",
+    renderBlock,
+    mdx,
+    onContentUpdate
+  } = props;
+  const snapshot = useMdxPreviewContentSnapshot(state, markdown);
+  const rootRef = useRef10(null);
+  const boundSurfaceRef = useRef10(null);
+  const [runtimeError, setRuntimeError] = useState7(null);
+  const wrappedComponents = useMemo6(() => {
+    const wrapComponentMap = (componentMap) => {
+      const wrapped = {};
+      for (const [name, component] of Object.entries(componentMap)) {
+        if (typeof component === "function") {
+          wrapped[name] = wrapWithShell(name, component);
+          continue;
+        }
+        wrapped[name] = wrapComponentMap(component);
+      }
+      return wrapped;
+    };
+    const merged = {
+      ...DEFAULT_MDX_COMPONENTS,
+      ...mdx?.components ?? {}
+    };
+    return wrapComponentMap(merged);
+  }, [mdx?.components]);
+  const { markdownHtml, mdxDisplay } = useMdxPreviewCompilation({
+    snapshot,
+    themeKey,
+    renderBlock,
+    mdx,
+    wrappedComponents
+  });
+  useEffect7(() => {
+    setRuntimeError(null);
+  }, [mdxDisplay.renderKey]);
+  useEffect7(() => {
+    const root = rootRef.current;
+    if (!root || !onContentUpdate && (!scrollController || scrollSync === "off")) return;
+    const notify = () => {
+      onContentUpdate?.();
+      if (scrollController && scrollSync !== "off") {
+        scrollController.measureSurface("preview");
+      }
+    };
+    const observer = new ResizeObserver(() => notify());
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [onContentUpdate, scrollController, scrollSync]);
+  useEffect7(() => {
+    if (!onContentUpdate && (!scrollController || scrollSync === "off")) return;
+    const id = requestAnimationFrame(() => {
+      onContentUpdate?.();
+      if (scrollController && scrollSync !== "off") {
+        scrollController.measureSurface("preview");
+      }
+    });
+    return () => cancelAnimationFrame(id);
+  }, [mdxDisplay, markdownHtml, runtimeError, onContentUpdate, scrollController, scrollSync]);
+  const hasContent = mdxDisplay.Content !== null || markdownHtml !== null;
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: (node) => {
+        if (scrollController && scrollSync !== "off" && boundSurfaceRef.current !== node) {
+          if (boundSurfaceRef.current) {
+            scrollController.unbindSurface("preview", boundSurfaceRef.current);
+          }
+          if (node) {
+            scrollController.bindSurface("preview", node);
+          }
+          boundSurfaceRef.current = node;
+        } else if ((!scrollController || scrollSync === "off") && boundSurfaceRef.current) {
+          scrollController?.unbindSurface("preview", boundSurfaceRef.current);
+          boundSurfaceRef.current = null;
+        }
+        rootRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className,
+      role: "document",
+      "aria-label": ariaLabel ?? "Preview",
+      "aria-live": "polite",
+      onScroll,
+      children: [
+        mdxDisplay.pending && hasContent && /* @__PURE__ */ jsx11("div", { className: "pointer-events-none sticky top-0 z-10 mb-3 h-0.5 w-full animate-pulse rounded-full bg-p400" }),
+        mdxDisplay.error && /* @__PURE__ */ jsx11(ErrorNotice, { error: mdxDisplay.error }),
+        runtimeError && /* @__PURE__ */ jsx11(ErrorNotice, { error: runtimeError }),
+        !hasContent && mdxDisplay.pending && /* @__PURE__ */ jsx11(MdxSkeleton, { lines: 8 }),
+        markdownHtml !== null && markdownHtml.map(({ blockId, html }) => /* @__PURE__ */ jsx11("div", { dangerouslySetInnerHTML: { __html: html } }, blockId)),
+        mdxDisplay.Content && mdxDisplay.runtimeComponents && /* @__PURE__ */ jsx11(RuntimeErrorBoundary, { onError: setRuntimeError, children: /* @__PURE__ */ jsx11(mdxDisplay.Content, { components: mdxDisplay.runtimeComponents }) }, mdxDisplay.renderKey)
+      ]
+    }
+  );
+});
+
+// src/OwoMarkPreview.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function isController(store) {
+  return typeof store.updateVisibleBlockIds === "function";
+}
+function usePreviewSurfaceAdapter(rootRef, scrollController, scrollSync = "bidirectional", observeDeps = []) {
+  useEffect8(() => {
+    const root = rootRef.current;
+    if (!root || !scrollController || scrollSync === "off") return;
+    const measure = () => {
+      scrollController.measureSurface("preview");
+    };
+    const resizeObserver = new ResizeObserver(() => measure());
+    resizeObserver.observe(root);
+    const observeChildren = () => {
+      resizeObserver.disconnect();
+      resizeObserver.observe(root);
+      Array.from(root.children).forEach((child) => resizeObserver.observe(child));
+    };
+    observeChildren();
+    const mutationObserver = new MutationObserver(() => {
+      observeChildren();
+      measure();
+    });
+    mutationObserver.observe(root, { childList: true, subtree: true, characterData: true });
+    const onLoad = (event) => {
+      if (event.target?.tagName === "IMG") {
+        measure();
+      }
+    };
+    root.addEventListener("load", onLoad, true);
+    const frame = requestAnimationFrame(measure);
+    let disposed = false;
+    if (typeof document !== "undefined" && document.fonts) {
+      document.fonts.ready.then(() => {
+        if (!disposed) measure();
+      });
+    }
+    return () => {
+      disposed = true;
+      cancelAnimationFrame(frame);
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+      root.removeEventListener("load", onLoad, true);
+    };
+  }, [rootRef, scrollController, scrollSync, ...observeDeps]);
+}
+var OwoMarkPreview = forwardRef3(
+  function OwoMarkPreview2(props, ref) {
+    const {
+      state,
+      markdown,
+      className,
+      strategy,
+      themeKey,
+      registry,
+      viewportFirst,
+      ariaLabel,
+      scrollController,
+      scrollSync = "bidirectional",
+      onScroll,
+      renderBlock,
+      mdx,
+      onContentUpdate
+    } = props;
+    if (strategy === "mdx") {
+      return /* @__PURE__ */ jsx12(
+        MdxPreview,
+        {
+          ref,
+          state,
+          markdown,
+          className,
+          themeKey,
+          ariaLabel,
+          onScroll,
+          scrollController,
+          scrollSync,
+          onContentUpdate,
+          renderBlock,
+          mdx
+        }
+      );
+    }
+    const renderBlockRef = useRef11(renderBlock);
+    renderBlockRef.current = renderBlock;
+    const hasRenderBlock = !!renderBlock;
+    const containerRef = useRef11(null);
+    const boundSurfaceRef = useRef11(null);
+    const engineRef = useRef11(null);
+    usePreviewSurfaceAdapter(containerRef, scrollController, scrollSync, [
+      strategy,
+      themeKey,
+      registry,
+      viewportFirst,
+      hasRenderBlock
+    ]);
+    useEffect8(() => {
+      if (!containerRef.current) return;
+      const engineOptions = {
+        strategy,
+        themeKey,
+        registry,
+        viewportFirst,
+        renderBlock: hasRenderBlock ? (block, ctx) => renderBlockRef.current(block, ctx) : void 0,
+        onContentUpdate
+      };
+      const engine = createOwoMarkPreviewEngine(engineOptions);
+      engine.mount(containerRef.current);
+      engineRef.current = engine;
+      void engine.update(state.getState());
+      return () => {
+        engine.destroy();
+        engineRef.current = null;
+      };
+    }, [strategy, themeKey, registry, viewportFirst, hasRenderBlock]);
+    useEffect8(() => {
+      const unsub = state.subscribe((newState) => {
+        const engine = engineRef.current;
+        if (engine) {
+          engine.update(newState);
+          requestAnimationFrame(() => {
+            if (scrollController && scrollSync !== "off") {
+              scrollController.measureSurface("preview");
+            }
+            onContentUpdate?.();
+          });
+        }
+      });
+      return unsub;
+    }, [state, scrollController, scrollSync, onContentUpdate]);
+    useEffect8(() => {
+      const container = containerRef.current;
+      if (!viewportFirst || !container || !isController(state)) return;
+      const controller = state;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const visible = /* @__PURE__ */ new Set();
+          for (const id of controller.getState().visibleBlockIds) {
+            visible.add(id);
+          }
+          for (const entry of entries) {
+            const blockId = entry.target.getAttribute("data-block-id");
+            if (!blockId) continue;
+            if (entry.isIntersecting) visible.add(blockId);
+            else visible.delete(blockId);
+          }
+          controller.updateVisibleBlockIds([...visible]);
+        },
+        { root: container, rootMargin: "200px 0px" }
+      );
+      const wrappers = container.querySelectorAll("[data-block-id]");
+      for (const wrapper of wrappers) {
+        observer.observe(wrapper);
+      }
+      const mutation = new MutationObserver((mutations) => {
+        for (const m of mutations) {
+          for (const node of m.addedNodes) {
+            if (node instanceof HTMLElement && node.hasAttribute("data-block-id")) {
+              observer.observe(node);
+            }
+          }
+        }
+      });
+      mutation.observe(container, { childList: true, subtree: true });
+      return () => {
+        observer.disconnect();
+        mutation.disconnect();
+      };
+    }, [viewportFirst, state]);
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref: (node) => {
+          if (scrollController && scrollSync !== "off" && boundSurfaceRef.current !== node) {
+            if (boundSurfaceRef.current) {
+              scrollController.unbindSurface("preview", boundSurfaceRef.current);
+            }
+            if (node) {
+              scrollController.bindSurface("preview", node);
+            }
+            boundSurfaceRef.current = node;
+          } else if ((!scrollController || scrollSync === "off") && boundSurfaceRef.current) {
+            scrollController?.unbindSurface("preview", boundSurfaceRef.current);
+            boundSurfaceRef.current = null;
+          }
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className,
+        role: "document",
+        "aria-label": ariaLabel ?? "Preview",
+        "aria-live": "polite",
+        onScroll
+      }
+    );
+  }
+);
+
 // src/useBlockContext.ts
-import { useState as useState3, useEffect as useEffect5 } from "react";
+import { useState as useState8, useEffect as useEffect9 } from "react";
 function useBlockContext(core) {
-  const [blockContext, setBlockContext] = useState3(
+  const [blockContext, setBlockContext] = useState8(
     () => core.getBlockContext()
   );
-  useEffect5(() => {
+  useEffect9(() => {
     setBlockContext(core.getBlockContext());
     return core.onBlockContextChange((ctx) => {
       setBlockContext(ctx);
@@ -737,24 +2270,52 @@ function useBlockContext(core) {
 // src/index.ts
 import { getThemeClassName as getThemeClassName2, THEME_LIGHT_CLASS, THEME_DARK_CLASS } from "@owomark/view";
 
+// src/useScrollController.ts
+import { useEffect as useEffect10, useRef as useRef12 } from "react";
+import {
+  createScrollController
+} from "@owomark/core/browser";
+function useScrollController(controller) {
+  const scrollControllerRef = useRef12(null);
+  if (!scrollControllerRef.current) {
+    scrollControllerRef.current = createScrollController();
+  }
+  const sc = scrollControllerRef.current;
+  useEffect10(() => {
+    const state = controller.getState();
+    sc.updateProjection(state.previewBlocks, state.contentVersion);
+    return controller.subscribeWithSelector(
+      (snapshot) => ({
+        previewBlocks: snapshot.previewBlocks,
+        contentVersion: snapshot.contentVersion
+      }),
+      ({ previewBlocks, contentVersion }) => {
+        sc.updateProjection(previewBlocks, contentVersion);
+      },
+      (prev, next) => prev.contentVersion === next.contentVersion
+    );
+  }, [controller, sc]);
+  return sc;
+}
+
 // src/useVirtualList.ts
-import { useState as useState4, useCallback as useCallback3, useRef as useRef6, useEffect as useEffect6, useMemo as useMemo2 } from "react";
+import { useState as useState9, useCallback as useCallback5, useRef as useRef13, useEffect as useEffect11, useMemo as useMemo7 } from "react";
 import {
   buildVirtualRows,
   computeVisibleRange
 } from "@owomark/core";
 function useVirtualList(options) {
   const { blocks, containerRef, overscan = 5, charsPerLine = 80 } = options;
-  const heightCacheRef = useRef6(/* @__PURE__ */ new Map());
-  const [scrollTop, setScrollTop] = useState4(0);
-  const [viewportHeight, setViewportHeight] = useState4(0);
-  const [heightCacheVersion, setHeightCacheVersion] = useState4(0);
-  const rafRef = useRef6(0);
-  const [container, setContainer] = useState4(null);
-  useEffect6(() => {
+  const heightCacheRef = useRef13(/* @__PURE__ */ new Map());
+  const [scrollTop, setScrollTop] = useState9(0);
+  const [viewportHeight, setViewportHeight] = useState9(0);
+  const [heightCacheVersion, setHeightCacheVersion] = useState9(0);
+  const rafRef = useRef13(0);
+  const [container, setContainer] = useState9(null);
+  useEffect11(() => {
     setContainer(containerRef.current);
   });
-  useEffect6(() => {
+  useEffect11(() => {
     if (!container) return;
     setViewportHeight(container.clientHeight);
     const ro = new ResizeObserver((entries) => {
@@ -765,7 +2326,7 @@ function useVirtualList(options) {
     ro.observe(container);
     return () => ro.disconnect();
   }, [container]);
-  useEffect6(() => {
+  useEffect11(() => {
     if (!container) return;
     const onScroll = () => {
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
@@ -779,27 +2340,27 @@ function useVirtualList(options) {
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
     };
   }, [container]);
-  const rows = useMemo2(
+  const rows = useMemo7(
     () => buildVirtualRows(blocks, heightCacheRef.current, charsPerLine),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [blocks, charsPerLine, heightCacheVersion]
   );
-  const visibleRange = useMemo2(
+  const visibleRange = useMemo7(
     () => computeVisibleRange(rows, scrollTop, viewportHeight, overscan),
     [rows, scrollTop, viewportHeight, overscan]
   );
-  const updateBlockHeight = useCallback3((blockId, height) => {
+  const updateBlockHeight = useCallback5((blockId, height) => {
     const cache = heightCacheRef.current;
     if (cache.get(blockId) !== height) {
       cache.set(blockId, height);
       setHeightCacheVersion((v) => v + 1);
     }
   }, []);
-  const isBlockVisible = useCallback3(
+  const isBlockVisible = useCallback5(
     (blockIndex) => blockIndex >= visibleRange.startIndex && blockIndex <= visibleRange.endIndex,
     [visibleRange]
   );
-  const invalidateAllHeights = useCallback3(() => {
+  const invalidateAllHeights = useCallback5(() => {
     heightCacheRef.current.clear();
     setHeightCacheVersion((v) => v + 1);
   }, []);
@@ -813,75 +2374,12 @@ function useVirtualList(options) {
   };
 }
 
-// src/MdxSkeleton.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function MdxSkeleton({ height, lines = 3, className, style }) {
-  const combinedStyle = {
-    ...style,
-    ...height != null ? { height, minHeight: height } : {}
-  };
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: `owo-mdx-skeleton-block ${className ?? ""}`,
-      style: combinedStyle,
-      "aria-hidden": "true",
-      children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx7("div", { className: "owo-mdx-skeleton owo-mdx-skeleton-line" }, i))
-    }
-  );
-}
-
-// src/MdxComponentShell.tsx
-import {
-  useRef as useRef7,
-  useState as useState5,
-  useEffect as useEffect7,
-  useCallback as useCallback4
-} from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var componentHeightCache = /* @__PURE__ */ new Map();
-var DEFAULT_ESTIMATED_HEIGHT = 80;
-function MdxComponentShell({ name, children }) {
-  const containerRef = useRef7(null);
-  const [ready, setReady] = useState5(false);
-  const estimatedHeight = componentHeightCache.get(name) ?? DEFAULT_ESTIMATED_HEIGHT;
-  useEffect7(() => {
-    const id = requestAnimationFrame(() => setReady(true));
-    return () => cancelAnimationFrame(id);
-  }, []);
-  const measureHeight = useCallback4(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const h = el.getBoundingClientRect().height;
-    if (h > 0) {
-      componentHeightCache.set(name, h);
-    }
-  }, [name]);
-  useEffect7(() => {
-    const el = containerRef.current;
-    if (!el || !ready) return;
-    measureHeight();
-    const ro = new ResizeObserver(() => measureHeight());
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, [ready, measureHeight]);
-  if (!ready) {
-    return /* @__PURE__ */ jsx8(MdxSkeleton, { height: estimatedHeight });
-  }
-  return /* @__PURE__ */ jsx8("div", { ref: containerRef, children });
-}
-function wrapWithShell(name, Component) {
-  function ShellWrapped(props) {
-    return /* @__PURE__ */ jsx8(MdxComponentShell, { name, children: /* @__PURE__ */ jsx8(Component, { ...props }) });
-  }
-  ShellWrapped.displayName = `MdxShell(${name})`;
-  return ShellWrapped;
-}
-function clearComponentHeightCache() {
-  componentHeightCache.clear();
-}
+// src/index.ts
+import { registerPlugin } from "@owomark/processor";
 export {
+  AsyncCodeBlock,
   DEFAULT_EDITOR_CONFIG,
+  DEFAULT_TOOLBAR_COMPONENT_COMMANDS,
   EditorBlock,
   EditorDecorator,
   EditorLeaf,
@@ -892,15 +2390,21 @@ export {
   SlashMenu,
   THEME_DARK_CLASS,
   THEME_LIGHT_CLASS,
+  Toolbar,
+  acquireMdxWorker,
   clearComponentHeightCache,
   computeMenuPosition,
   deriveProcessorOptions,
   getCaretRect,
   getThemeClassName2 as getThemeClassName,
+  registerPlugin,
+  releaseMdxWorker,
   resolveEditorConfig,
   useBlockContext,
   useOwoMarkCore,
   useOwoMarkSharedState,
+  useScrollController,
+  useSharedStateSelector,
   useSharedStateSnapshot,
   useVirtualList,
   wrapWithShell