@owomark/react 0.1.6 → 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,7 +757,7 @@ var OwoMarkEditor = forwardRef(
 );
 
 // src/OwoMarkPreview.tsx
-import { useRef as useRef8, useEffect as useEffect6 } from "react";
+import { forwardRef as forwardRef3, useEffect as useEffect8, useRef as useRef11 } from "react";
 import {
   createOwoMarkPreviewEngine
 } from "@owomark/view";
@@ -596,31 +765,31 @@ import {
 // src/MdxPreview.tsx
 import {
   Component,
-  useEffect as useEffect5,
-  useMemo as useMemo4,
-  useRef as useRef7,
-  useState as useState5,
-  useSyncExternalStore
+  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 useMemo2, useRef as useRef4 } from "react";
+import { useMemo as useMemo3, useRef as useRef5 } from "react";
 import { createSkeletonHtml, ensureSkeletonStyles } from "@owomark/view";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function MdxSkeleton({ height, lines, className, style }) {
-  const injected = useRef4(false);
+  const injected = useRef5(false);
   if (!injected.current && typeof document !== "undefined") {
     ensureSkeletonStyles(document);
     injected.current = true;
   }
-  const html = useMemo2(
+  const html = useMemo3(
     () => createSkeletonHtml({ height, lines: lines ?? (height == null ? 3 : void 0) }),
     [height, lines]
   );
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       className: className ?? void 0,
@@ -632,13 +801,13 @@ function MdxSkeleton({ height, lines, className, style }) {
 
 // src/MdxComponentShell.tsx
 import {
-  useRef as useRef5,
-  useState as useState3,
-  useEffect as useEffect3,
+  useRef as useRef6,
+  useState as useState4,
+  useEffect as useEffect4,
   useLayoutEffect as useLayoutEffect3,
-  useCallback as useCallback2
+  useCallback as useCallback3
 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var componentHeightCache = /* @__PURE__ */ new Map();
 var DEFAULT_ESTIMATED_HEIGHT = 80;
 function shallowPropsFingerprint(props) {
@@ -652,11 +821,11 @@ function shallowPropsFingerprint(props) {
   return parts.join("&");
 }
 function MdxComponentShell({ name, propsFingerprint, children }) {
-  const containerRef = useRef5(null);
-  const [status, setStatus] = useState3("skeleton");
+  const containerRef = useRef6(null);
+  const [status, setStatus] = useState4("skeleton");
   const cacheKey = propsFingerprint ? `${name}:${propsFingerprint}` : name;
   const estimatedHeight = componentHeightCache.get(cacheKey) ?? DEFAULT_ESTIMATED_HEIGHT;
-  useEffect3(() => {
+  useEffect4(() => {
     const id = requestAnimationFrame(() => setStatus("mounting"));
     return () => cancelAnimationFrame(id);
   }, []);
@@ -665,7 +834,7 @@ function MdxComponentShell({ name, propsFingerprint, children }) {
     const id = requestAnimationFrame(() => setStatus("ready"));
     return () => cancelAnimationFrame(id);
   }, [status]);
-  const measureHeight = useCallback2(() => {
+  const measureHeight = useCallback3(() => {
     const el = containerRef.current;
     if (!el) return;
     const h = el.getBoundingClientRect().height;
@@ -673,7 +842,7 @@ function MdxComponentShell({ name, propsFingerprint, children }) {
       componentHeightCache.set(cacheKey, h);
     }
   }, [cacheKey]);
-  useEffect3(() => {
+  useEffect4(() => {
     const el = containerRef.current;
     if (!el || status !== "ready") return;
     measureHeight();
@@ -682,14 +851,14 @@ function MdxComponentShell({ name, propsFingerprint, children }) {
     return () => ro.disconnect();
   }, [status, measureHeight]);
   if (status === "skeleton") {
-    return /* @__PURE__ */ jsx7(MdxSkeleton, { height: estimatedHeight });
+    return /* @__PURE__ */ jsx8(MdxSkeleton, { height: estimatedHeight });
   }
-  return /* @__PURE__ */ jsx7("div", { ref: containerRef, children });
+  return /* @__PURE__ */ jsx8("div", { ref: containerRef, children });
 }
 function wrapWithShell(name, Component2) {
   function ShellWrapped(props) {
     const fingerprint = shallowPropsFingerprint(props);
-    return /* @__PURE__ */ jsx7(MdxComponentShell, { name, propsFingerprint: fingerprint, children: /* @__PURE__ */ jsx7(Component2, { ...props }) });
+    return /* @__PURE__ */ jsx8(MdxComponentShell, { name, propsFingerprint: fingerprint, children: /* @__PURE__ */ jsx8(Component2, { ...props }) });
   }
   ShellWrapped.displayName = `MdxShell(${name})`;
   return ShellWrapped;
@@ -730,8 +899,8 @@ function parseCompileError(error, kind) {
 }
 
 // src/useMdxPreviewCompilation.ts
-import { useEffect as useEffect4, useMemo as useMemo3, useRef as useRef6, useState as useState4 } from "react";
-import { deriveRenderKey } from "@owomark/core";
+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";
@@ -745,6 +914,7 @@ import {
 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;
@@ -783,6 +953,7 @@ function tryCreateWorker() {
       const pending = pendingRequests.get(response.id);
       if (!pending) return;
       pendingRequests.delete(response.id);
+      pending.cleanup?.();
       if (response.ok) {
         pending.resolve(response.code);
       } else {
@@ -795,6 +966,7 @@ function tryCreateWorker() {
       workerInstance = null;
       for (const [id, pending] of pendingRequests) {
         pendingRequests.delete(id);
+        pending.cleanup?.();
         pending.reject({ message: "MDX compile worker crashed", kind: "compile" });
       }
     };
@@ -833,8 +1005,15 @@ function compileInWorker(markdown, options, inspection) {
   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 });
+    pendingRequests.set(id, { resolve, reject, cleanup });
     workerRef.postMessage({
       type: "compile",
       id,
@@ -850,6 +1029,17 @@ function compileInWorker(markdown, options, inspection) {
         sourceMap: inspection?.sourceMap
       }
     });
+    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;
@@ -857,6 +1047,7 @@ function compileInWorker(markdown, options, inspection) {
     const pending = pendingRequests.get(id);
     if (pending) {
       pendingRequests.delete(id);
+      pending.cleanup?.();
       pending.reject({ message: "Compilation cancelled", kind: "compile" });
     }
     workerRef.postMessage({ type: "cancel", id });
@@ -894,6 +1085,7 @@ async function compileOnMainThread(markdown, options, inspection) {
   }
 }
 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;
@@ -933,7 +1125,439 @@ async function runMdxCode(code) {
 
 // src/mdx-preview-utils.tsx
 import { renderBlockDefault } from "@owomark/view";
-import { jsx as jsx8 } from "react/jsx-runtime";
+
+// 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: () => {
+        }
+      };
+    }
+    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()
+    });
+    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 () => {
+      clearTimeout(timer);
+      activeCancel?.();
+      activeRequestRef.current = null;
+    };
+  }, [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,
+    {
+      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) {
@@ -944,8 +1568,21 @@ function getObjectIdentity(value) {
   objectIdentityMap.set(value, id);
   return String(id);
 }
-function buildRuntimeComponents(mdxAnalysis, baseComponents) {
-  const components = { ...baseComponents };
+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;
@@ -957,7 +1594,7 @@ function buildRuntimeComponents(mdxAnalysis, baseComponents) {
         if (existing === void 0) {
           cursor[part] = function MissingComponent(props) {
             const { children, ...restProps } = props;
-            return /* @__PURE__ */ jsx8("div", { "data-mdx-missing": componentName, ...restProps, children });
+            return /* @__PURE__ */ jsx10("div", { "data-mdx-missing": componentName, ...restProps, children });
           };
         }
         return;
@@ -1010,10 +1647,10 @@ function useMdxPreviewCompilation({
   mdx,
   wrappedComponents
 }) {
-  const requestIdRef = useRef6(0);
-  const cancelRef = useRef6(null);
-  const blockCacheRef = useRef6(/* @__PURE__ */ new Map());
-  const [mdxDisplay, setMdxDisplay] = useState4({
+  const requestIdRef = useRef8(0);
+  const cancelRef = useRef8(null);
+  const blockCacheRef = useRef8(/* @__PURE__ */ new Map());
+  const [mdxDisplay, setMdxDisplay] = useState6({
     code: null,
     Content: null,
     runtimeComponents: null,
@@ -1022,8 +1659,8 @@ function useMdxPreviewCompilation({
     pending: false,
     error: null
   });
-  const [markdownHtml, setMarkdownHtml] = useState4(null);
-  useEffect4(() => {
+  const [markdownHtml, setMarkdownHtml] = useState6(null);
+  useEffect6(() => {
     acquireMdxWorker();
     return () => {
       cancelRef.current?.();
@@ -1031,7 +1668,7 @@ function useMdxPreviewCompilation({
       releaseMdxWorker();
     };
   }, []);
-  const mdxInspection = useMemo3(
+  const mdxInspection = useMemo5(
     () => inspectMdxSource2(snapshot.markdown, {
       enableMath: mdx?.enableMath,
       enableSideAnnotation: mdx?.enableSideAnnotation,
@@ -1046,14 +1683,13 @@ function useMdxPreviewCompilation({
       snapshot.markdown
     ]
   );
-  const hasMdx = mdxInspection.hasMdxSyntax;
-  const optionsFingerprint = useMemo3(() => {
+  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?.enableCodeHighlight),
       b(mdx?.sourceAnchors),
       ds(mdx?.extraRemarkDescriptors),
       ds(mdx?.extraRehypeDescriptors),
@@ -1063,26 +1699,25 @@ function useMdxPreviewCompilation({
   }, [
     mdx?.enableMath,
     mdx?.enableSideAnnotation,
-    mdx?.enableCodeHighlight,
     mdx?.sourceAnchors,
     mdx?.extraRemarkDescriptors,
     mdx?.extraRehypeDescriptors,
     mdx?.extraRemarkPlugins,
     mdx?.extraRehypePlugins
   ]);
-  const compileKey = useMemo3(
-    () => deriveRenderKey(`${snapshot.markdown}:${optionsFingerprint}`, "custom", ""),
+  const compileKey = useMemo5(
+    () => deriveRenderKey2(`${snapshot.markdown}:${optionsFingerprint}`, "custom", ""),
     [snapshot.markdown, optionsFingerprint]
   );
-  const componentFingerprint = useMemo3(
-    () => `cp${getObjectIdentity(mdx?.components)}`,
-    [mdx?.components]
+  const componentFingerprint = useMemo5(
+    () => `cp${getObjectIdentity(mdx?.components)}:theme:${themeKey}`,
+    [mdx?.components, themeKey]
   );
-  const renderKey = useMemo3(
+  const renderKey = useMemo5(
     () => `${compileKey}:${componentFingerprint}`,
     [compileKey, componentFingerprint]
   );
-  useEffect4(() => {
+  useEffect6(() => {
     if (!snapshot.markdown.trim()) {
       cancelRef.current?.();
       cancelRef.current = null;
@@ -1131,7 +1766,10 @@ function useMdxPreviewCompilation({
               return {
                 ...prev,
                 Content,
-                runtimeComponents: buildRuntimeComponents(mdxInspection, wrappedComponents),
+                runtimeComponents: buildRuntimeComponents(mdxInspection, wrappedComponents, {
+                  themeKey,
+                  documentVersion: snapshot.contentVersion
+                }),
                 renderKey,
                 pending: false,
                 error: null
@@ -1157,7 +1795,7 @@ function useMdxPreviewCompilation({
       const { promise, cancel } = compileMdx(snapshot.markdown, {
         enableMath: mdx?.enableMath,
         enableSideAnnotation: mdx?.enableSideAnnotation,
-        enableCodeHighlight: mdx?.enableCodeHighlight,
+        enableCodeHighlight: false,
         sourceAnchors: mdx?.sourceAnchors,
         extraRemarkDescriptors: mdx?.extraRemarkDescriptors,
         extraRehypeDescriptors: mdx?.extraRehypeDescriptors,
@@ -1174,7 +1812,10 @@ function useMdxPreviewCompilation({
           setMdxDisplay({
             code,
             Content,
-            runtimeComponents: buildRuntimeComponents(mdxInspection, wrappedComponents),
+            runtimeComponents: buildRuntimeComponents(mdxInspection, wrappedComponents, {
+              themeKey,
+              documentVersion: snapshot.contentVersion
+            }),
             compileKey,
             renderKey,
             pending: false,
@@ -1198,9 +1839,9 @@ function useMdxPreviewCompilation({
   }, [
     compileKey,
     hasMdx,
-    mdx?.enableCodeHighlight,
     mdx?.enableMath,
     mdx?.enableSideAnnotation,
+    mdx?.forceFullDocumentCompile,
     mdx?.extraRehypeDescriptors,
     mdx?.extraRehypePlugins,
     mdx?.extraRemarkDescriptors,
@@ -1213,6 +1854,7 @@ function useMdxPreviewCompilation({
     renderBlock,
     renderKey,
     snapshot.markdown,
+    snapshot.contentVersion,
     snapshot.previewBlocks,
     themeKey,
     wrappedComponents
@@ -1224,8 +1866,43 @@ function useMdxPreviewCompilation({
   };
 }
 
+// src/useOwoMarkSharedState.ts
+import { useRef as useRef9, useSyncExternalStore, useCallback as useCallback4 } from "react";
+import {
+  createSharedStateStore
+} from "@owomark/core";
+function useOwoMarkSharedState(options) {
+  const controllerRef = useRef9(null);
+  if (!controllerRef.current) {
+    controllerRef.current = createSharedStateStore(options);
+  }
+  return controllerRef.current;
+}
+function useSharedStateSnapshot(controller) {
+  const subscribe = useCallback4(
+    (onStoreChange) => controller.subscribe(onStoreChange),
+    [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 jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+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}`;
@@ -1234,11 +1911,11 @@ function locationText(error) {
 function ErrorNotice({ error }) {
   const location = locationText(error);
   const label = error.kind === "compile" ? "MDX Compile" : "MDX Runtime";
-  return /* @__PURE__ */ jsx9("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__ */ jsxs3("div", { className: "flex items-start gap-2", children: [
-    /* @__PURE__ */ jsx9("span", { className: "mt-0.5 shrink-0 font-mono text-[11px] font-bold uppercase", children: label }),
-    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-      location && /* @__PURE__ */ jsx9("span", { className: "mr-2 rounded bg-[var(--owo-cmp-danger-border)] px-1.5 py-0.5 font-mono text-xs", children: location }),
-      /* @__PURE__ */ jsx9("span", { className: "break-words", children: error.message })
+  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 })
     ] })
   ] }) });
 }
@@ -1252,28 +1929,41 @@ var RuntimeErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ jsx9(ErrorNotice, { error: this.state.error });
+      return /* @__PURE__ */ jsx11(ErrorNotice, { error: this.state.error });
     }
     return this.props.children;
   }
 };
-function useStoreSnapshot(store) {
-  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+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
+  );
 }
-function MdxPreview(props) {
+var MdxPreview = forwardRef2(function MdxPreview2(props, ref) {
   const {
     state,
+    markdown,
     className,
     themeKey = "",
     ariaLabel,
+    onScroll,
+    scrollController,
+    scrollSync = "bidirectional",
     renderBlock,
     mdx,
     onContentUpdate
   } = props;
-  const snapshot = useStoreSnapshot(state);
-  const rootRef = useRef7(null);
-  const [runtimeError, setRuntimeError] = useState5(null);
-  const wrappedComponents = useMemo4(() => {
+  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)) {
@@ -1298,192 +1988,277 @@ function MdxPreview(props) {
     mdx,
     wrappedComponents
   });
-  useEffect5(() => {
+  useEffect7(() => {
     setRuntimeError(null);
   }, [mdxDisplay.renderKey]);
-  useEffect5(() => {
+  useEffect7(() => {
     const root = rootRef.current;
-    if (!root || !onContentUpdate) return;
-    const observer = new ResizeObserver(() => onContentUpdate());
+    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]);
-  useEffect5(() => {
-    if (!onContentUpdate) return;
-    const id = requestAnimationFrame(() => onContentUpdate());
+  }, [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]);
+  }, [mdxDisplay, markdownHtml, runtimeError, onContentUpdate, scrollController, scrollSync]);
   const hasContent = mdxDisplay.Content !== null || markdownHtml !== null;
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
-      ref: rootRef,
+      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__ */ jsx9("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__ */ jsx9(ErrorNotice, { error: mdxDisplay.error }),
-        runtimeError && /* @__PURE__ */ jsx9(ErrorNotice, { error: runtimeError }),
-        !hasContent && mdxDisplay.pending && /* @__PURE__ */ jsx9(MdxSkeleton, { lines: 8 }),
-        markdownHtml !== null && markdownHtml.map(({ blockId, html }) => /* @__PURE__ */ jsx9("div", { dangerouslySetInnerHTML: { __html: html } }, blockId)),
-        mdxDisplay.Content && mdxDisplay.runtimeComponents && /* @__PURE__ */ jsx9(RuntimeErrorBoundary, { onError: setRuntimeError, children: /* @__PURE__ */ jsx9(mdxDisplay.Content, { components: mdxDisplay.runtimeComponents }) }, mdxDisplay.renderKey)
+        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 jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function isController(store) {
   return typeof store.updateVisibleBlockIds === "function";
 }
-var OwoMarkPreview = function OwoMarkPreview2(props) {
-  const {
-    state,
-    className,
-    strategy,
-    themeKey,
-    registry,
-    viewportFirst,
-    ariaLabel,
-    renderBlock,
-    mdx,
-    onContentUpdate
-  } = props;
-  if (strategy === "mdx") {
-    return /* @__PURE__ */ jsx10(
-      MdxPreview,
-      {
-        state,
-        className,
-        themeKey,
-        ariaLabel,
-        renderBlock,
-        mdx,
-        onContentUpdate
+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();
       }
-    );
-  }
-  const onContentUpdateRef = useRef8(onContentUpdate);
-  onContentUpdateRef.current = onContentUpdate;
-  const renderBlockRef = useRef8(renderBlock);
-  renderBlockRef.current = renderBlock;
-  const hasRenderBlock = !!renderBlock;
-  const containerRef = useRef8(null);
-  const engineRef = useRef8(null);
-  useEffect6(() => {
-    if (!containerRef.current) return;
-    const engineOptions = {
+    };
+    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,
-      renderBlock: hasRenderBlock ? (block, ctx) => renderBlockRef.current(block, ctx) : void 0,
-      onContentUpdate: () => onContentUpdateRef.current?.()
-    };
-    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;
-    };
-  }, [strategy, themeKey, registry, viewportFirst, hasRenderBlock]);
-  useEffect6(() => {
-    const unsub = state.subscribe((newState) => {
-      const engine = engineRef.current;
-      if (engine) {
-        void engine.update(newState);
-      }
-    });
-    return unsub;
-  }, [state]);
-  useEffect6(() => {
-    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);
-          }
+      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
         }
-        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);
+    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
       }
-    });
-    mutation.observe(container, { childList: true, subtree: true });
-    return () => {
-      observer.disconnect();
-      mutation.disconnect();
-    };
-  }, [viewportFirst, state]);
-  return /* @__PURE__ */ jsx10(
-    "div",
-    {
-      ref: containerRef,
-      className,
-      role: "document",
-      "aria-label": ariaLabel ?? "Preview",
-      "aria-live": "polite"
-    }
-  );
-};
-
-// src/useOwoMarkSharedState.ts
-import { useRef as useRef9, useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback3 } from "react";
-import {
-  createSharedStateStore
-} from "@owomark/core";
-function useOwoMarkSharedState(options) {
-  const controllerRef = useRef9(null);
-  if (!controllerRef.current) {
-    controllerRef.current = createSharedStateStore(options);
+    );
   }
-  return controllerRef.current;
-}
-function useSharedStateSnapshot(controller) {
-  const subscribe = useCallback3(
-    (onStoreChange) => controller.subscribe(onStoreChange),
-    [controller]
-  );
-  const getSnapshot = useCallback3(() => controller.getState(), [controller]);
-  return useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
-}
+);
 
 // src/useBlockContext.ts
-import { useState as useState6, useEffect as useEffect8 } from "react";
+import { useState as useState8, useEffect as useEffect9 } from "react";
 function useBlockContext(core) {
-  const [blockContext, setBlockContext] = useState6(
+  const [blockContext, setBlockContext] = useState8(
     () => core.getBlockContext()
   );
-  useEffect8(() => {
+  useEffect9(() => {
     setBlockContext(core.getBlockContext());
     return core.onBlockContextChange((ctx) => {
       setBlockContext(ctx);
@@ -1495,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 useState7, useCallback as useCallback4, useRef as useRef10, useEffect as useEffect9, useMemo as useMemo5 } 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 = useRef10(/* @__PURE__ */ new Map());
-  const [scrollTop, setScrollTop] = useState7(0);
-  const [viewportHeight, setViewportHeight] = useState7(0);
-  const [heightCacheVersion, setHeightCacheVersion] = useState7(0);
-  const rafRef = useRef10(0);
-  const [container, setContainer] = useState7(null);
-  useEffect9(() => {
+  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);
   });
-  useEffect9(() => {
+  useEffect11(() => {
     if (!container) return;
     setViewportHeight(container.clientHeight);
     const ro = new ResizeObserver((entries) => {
@@ -1523,7 +2326,7 @@ function useVirtualList(options) {
     ro.observe(container);
     return () => ro.disconnect();
   }, [container]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!container) return;
     const onScroll = () => {
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
@@ -1537,27 +2340,27 @@ function useVirtualList(options) {
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
     };
   }, [container]);
-  const rows = useMemo5(
+  const rows = useMemo7(
     () => buildVirtualRows(blocks, heightCacheRef.current, charsPerLine),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [blocks, charsPerLine, heightCacheVersion]
   );
-  const visibleRange = useMemo5(
+  const visibleRange = useMemo7(
     () => computeVisibleRange(rows, scrollTop, viewportHeight, overscan),
     [rows, scrollTop, viewportHeight, overscan]
   );
-  const updateBlockHeight = useCallback4((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 = useCallback4(
+  const isBlockVisible = useCallback5(
     (blockIndex) => blockIndex >= visibleRange.startIndex && blockIndex <= visibleRange.endIndex,
     [visibleRange]
   );
-  const invalidateAllHeights = useCallback4(() => {
+  const invalidateAllHeights = useCallback5(() => {
     heightCacheRef.current.clear();
     setHeightCacheVersion((v) => v + 1);
   }, []);
@@ -1574,7 +2377,9 @@ function useVirtualList(options) {
 // src/index.ts
 import { registerPlugin } from "@owomark/processor";
 export {
+  AsyncCodeBlock,
   DEFAULT_EDITOR_CONFIG,
+  DEFAULT_TOOLBAR_COMPONENT_COMMANDS,
   EditorBlock,
   EditorDecorator,
   EditorLeaf,
@@ -1585,6 +2390,7 @@ export {
   SlashMenu,
   THEME_DARK_CLASS,
   THEME_LIGHT_CLASS,
+  Toolbar,
   acquireMdxWorker,
   clearComponentHeightCache,
   computeMenuPosition,
@@ -1597,6 +2403,8 @@ export {
   useBlockContext,
   useOwoMarkCore,
   useOwoMarkSharedState,
+  useScrollController,
+  useSharedStateSelector,
   useSharedStateSnapshot,
   useVirtualList,
   wrapWithShell