@owomark/react 0.1.5 → 0.1.6

package/README.md

@@ -135,6 +135,8 @@ For hosts that still need `onChange` callbacks (e.g. for local draft persistence
 />
 ```
 
+When `OwoMarkPreview` runs in `strategy="mdx"`, syntax detection may use internal probe-only masking. The MDX compile path may also apply a private compatibility normalization for indented code blocks, but compile errors and `data-source-line-*` anchors are remapped back to the original editor lines.
+
 ### Custom Block Renderer
 
 Provide a host-side rendering function for full Markdown fidelity (GFM, math, syntax highlighting):
@@ -272,6 +274,53 @@ import '@owomark/view/style.css'; // includes owomark.css + side-annotation.css
 import '@owomark/processor/mdx-components.css'; // built-in MDX component styles
 ```
 
+Built-in MDX components currently include `Callout`, `Note`, `CodeDemo`, `Steps`, `Tabs`, `FileTree`, and `Kbd`.
+
+Use `Note` for supplemental explanation, editor notes, and neutral guidance. Keep `Callout` for stronger feedback semantics such as `info`, `warn`, `error`, or `success`.
+
+| Component | Use for | Example |
+|---|---|---|
+| `Callout` | Strong feedback blocks with explicit severity | `<Callout type="warn">Read this first.</Callout>` |
+| `Note` | Neutral explanation, editor notes, low-emphasis guidance | `<Note title="Editor note">Background context.</Note>` |
+| `CodeDemo` | Code sample + optional title wrapper | `<CodeDemo title="demo" code={"const x = 1;"} />` |
+| `Steps` + `Step` | Ordered task or tutorial flows | `<Steps><Step title="Install">...</Step></Steps>` |
+| `Tabs` + `Tab` | Small tabbed content groups | `<Tabs><Tab label="React">...</Tab></Tabs>` |
+| `FileTree` | File/folder structure snippets | `<FileTree>{"src/\\n  app.ts"}</FileTree>` |
+| `Kbd` | Keyboard keycaps in inline prose | `Press <Kbd>Cmd</Kbd> + <Kbd>K</Kbd>` |
+
+Complete example matrix:
+
+```mdx
+<Note title="Editor note">
+This paragraph is background context, not a warning or status message.
+</Note>
+
+<Callout type="info">
+MDX components ship in the default registry.
+</Callout>
+
+<CodeDemo title="Minimal example" code={`const x = 1;`} />
+
+<Steps>
+  <Step title="Install">Add the package.</Step>
+  <Step title="Render">Mount the preview.</Step>
+</Steps>
+
+<Tabs>
+  <Tab label="React">Use the React bindings.</Tab>
+  <Tab label="Core">Use the framework-agnostic core.</Tab>
+</Tabs>
+
+<FileTree>
+{`src/
+  app.tsx
+  routes/
+    mdx-preview.tsx`}
+</FileTree>
+
+Press <Kbd>Cmd</Kbd> + <Kbd>K</Kbd>.
+```
+
 ### Selective imports
 
 ```ts

package/dist/index.d.ts

@@ -4,7 +4,8 @@ import { IndentMode, OwoMarkSelection, OwoMarkCommands, OwoMarkCore, OwoMarkShar
 export { BlockContext, BlockContextType, BlockInsertType, CommandDefinition, OwoMarkCommands, OwoMarkCore, OwoMarkEditorInstance, OwoMarkSelection, OwoMarkSharedState, OwoMarkSharedStateController, OwoMarkSharedStateStore, PreviewBlock, PreviewBlockKind, SlashState } from '@owomark/core';
 import { OwoMarkThemeName, PreviewStrategy, PreviewRendererRegistry, PreviewRenderContext } from '@owomark/view';
 export { OwoMarkThemeName, PreviewRenderContext, PreviewRenderResult, PreviewRendererDefinition, PreviewRendererRegistry, THEME_DARK_CLASS, THEME_LIGHT_CLASS, getThemeClassName } from '@owomark/view';
-import { OwoMarkProcessorOptions } from '@owomark/processor';
+import { OwoMarkProcessorOptions, PluginDescriptor, PluginEntry, MdxComponentMap } from '@owomark/processor';
+export { registerPlugin } from '@owomark/processor';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type OwoMarkEditorConfig = {
@@ -57,6 +58,18 @@ type OwoMarkEditorProps = {
 };
 declare const OwoMarkEditor: react.ForwardRefExoticComponent<OwoMarkEditorProps & react.RefAttributes<HTMLDivElement>>;
 
+type OwoMarkMdxOptions = {
+    enableMath?: boolean;
+    enableSideAnnotation?: boolean;
+    enableCodeHighlight?: boolean;
+    sourceAnchors?: boolean;
+    extraRemarkDescriptors?: PluginDescriptor[];
+    extraRehypeDescriptors?: PluginDescriptor[];
+    extraRemarkPlugins?: PluginEntry[];
+    extraRehypePlugins?: PluginEntry[];
+    components?: MdxComponentMap;
+};
+
 type OwoMarkPreviewProps = {
     state: OwoMarkSharedStateStore;
     className?: string;
@@ -75,6 +88,8 @@ type OwoMarkPreviewProps = {
      * the latest reference is always used via a stable ref.
      */
     renderBlock?: (block: PreviewBlock, context: PreviewRenderContext) => Promise<string>;
+    /** MDX runtime configuration used by `strategy="mdx"`. */
+    mdx?: OwoMarkMdxOptions;
     /** Called after each successful DOM update. Use to trigger scroll sync. */
     onContentUpdate?: () => void;
 };
@@ -211,38 +226,28 @@ declare function computeMenuPosition(caret: CaretRect, menuHeight: number, menuW
 };
 
 type MdxSkeletonProps = {
-    /** Height in pixels for the skeleton placeholder. */
     height?: number;
-    /** Number of shimmer lines to show. Default: 3. */
     lines?: number;
     className?: string;
     style?: CSSProperties;
 };
-/**
- * Lightweight skeleton loading indicator for MDX component placeholders.
- * Pure CSS animation — no external UI library dependency.
- */
 declare function MdxSkeleton({ height, lines, className, style }: MdxSkeletonProps): react_jsx_runtime.JSX.Element;
 
 type MdxComponentShellProps = {
-    /** Component display name, used as cache key for height estimation. */
     name: string;
+    propsFingerprint?: string;
     children: ReactNode;
 };
-/**
- * Wraps an MDX component to provide:
- * 1. Skeleton placeholder with estimated height before first paint
- * 2. Real-height measurement after mount via ResizeObserver
- * 3. Height caching so subsequent renders of the same component type
- *    use a better estimate, reducing layout shift.
- */
-declare function MdxComponentShell({ name, children }: MdxComponentShellProps): react_jsx_runtime.JSX.Element;
-/**
- * Create a wrapped version of an MDX component that renders inside
- * MdxComponentShell for skeleton loading + height management.
- */
+declare function MdxComponentShell({ name, propsFingerprint, children }: MdxComponentShellProps): react_jsx_runtime.JSX.Element;
 declare function wrapWithShell<P extends Record<string, any>>(name: string, Component: ComponentType<P>): ComponentType<P>;
 /** Clear the height cache (useful for testing or theme changes). */
 declare function clearComponentHeightCache(): void;
 
-export { type CaretRect, DEFAULT_EDITOR_CONFIG, EditorBlock, type EditorBlockProps, EditorDecorator, type EditorDecoratorProps, EditorLeaf, type EditorLeafProps, MdxComponentShell, type MdxComponentShellProps, MdxSkeleton, type MdxSkeletonProps, OwoMarkEditor, type OwoMarkEditorConfig, type OwoMarkEditorProps, OwoMarkPreview, type OwoMarkPreviewProps, SlashMenu, type SlashMenuProps, type UseOwoMarkCoreOptions, type UseOwoMarkCoreReturn, type UseOwoMarkSharedStateOptions, type UseVirtualListOptions, type UseVirtualListResult, clearComponentHeightCache, computeMenuPosition, deriveProcessorOptions, getCaretRect, resolveEditorConfig, useBlockContext, useOwoMarkCore, useOwoMarkSharedState, useSharedStateSnapshot, useVirtualList, wrapWithShell };
+type CancellableCompile = {
+    promise: Promise<string>;
+    cancel: () => void;
+};
+declare function acquireMdxWorker(): void;
+declare function releaseMdxWorker(): void;
+
+export { type CancellableCompile, type CaretRect, DEFAULT_EDITOR_CONFIG, EditorBlock, type EditorBlockProps, EditorDecorator, type EditorDecoratorProps, EditorLeaf, type EditorLeafProps, MdxComponentShell, type MdxComponentShellProps, MdxSkeleton, type MdxSkeletonProps, OwoMarkEditor, type OwoMarkEditorConfig, type OwoMarkEditorProps, type OwoMarkMdxOptions, OwoMarkPreview, type OwoMarkPreviewProps, SlashMenu, type SlashMenuProps, type UseOwoMarkCoreOptions, type UseOwoMarkCoreReturn, type UseOwoMarkSharedStateOptions, type UseVirtualListOptions, type UseVirtualListResult, acquireMdxWorker, clearComponentHeightCache, computeMenuPosition, deriveProcessorOptions, getCaretRect, releaseMdxWorker, resolveEditorConfig, useBlockContext, useOwoMarkCore, useOwoMarkSharedState, useSharedStateSnapshot, useVirtualList, wrapWithShell };

package/dist/index.js

@@ -588,11 +588,754 @@ var OwoMarkEditor = forwardRef(
 );
 
 // src/OwoMarkPreview.tsx
-import { useRef as useRef4, useEffect as useEffect3 } from "react";
+import { useRef as useRef8, useEffect as useEffect6 } from "react";
 import {
   createOwoMarkPreviewEngine
 } from "@owomark/view";
+
+// src/MdxPreview.tsx
+import {
+  Component,
+  useEffect as useEffect5,
+  useMemo as useMemo4,
+  useRef as useRef7,
+  useState as useState5,
+  useSyncExternalStore
+} from "react";
+import {
+  DEFAULT_MDX_COMPONENTS
+} from "@owomark/processor";
+
+// src/MdxSkeleton.tsx
+import { useMemo as useMemo2, useRef as useRef4 } from "react";
+import { createSkeletonHtml, ensureSkeletonStyles } from "@owomark/view";
 import { jsx as jsx6 } from "react/jsx-runtime";
+function MdxSkeleton({ height, lines, className, style }) {
+  const injected = useRef4(false);
+  if (!injected.current && typeof document !== "undefined") {
+    ensureSkeletonStyles(document);
+    injected.current = true;
+  }
+  const html = useMemo2(
+    () => createSkeletonHtml({ height, lines: lines ?? (height == null ? 3 : void 0) }),
+    [height, lines]
+  );
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: className ?? void 0,
+      style,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+}
+
+// src/MdxComponentShell.tsx
+import {
+  useRef as useRef5,
+  useState as useState3,
+  useEffect as useEffect3,
+  useLayoutEffect as useLayoutEffect3,
+  useCallback as useCallback2
+} from "react";
+import { jsx as jsx7 } 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 = useRef5(null);
+  const [status, setStatus] = useState3("skeleton");
+  const cacheKey = propsFingerprint ? `${name}:${propsFingerprint}` : name;
+  const estimatedHeight = componentHeightCache.get(cacheKey) ?? DEFAULT_ESTIMATED_HEIGHT;
+  useEffect3(() => {
+    const id = requestAnimationFrame(() => setStatus("mounting"));
+    return () => cancelAnimationFrame(id);
+  }, []);
+  useLayoutEffect3(() => {
+    if (status !== "mounting") return;
+    const id = requestAnimationFrame(() => setStatus("ready"));
+    return () => cancelAnimationFrame(id);
+  }, [status]);
+  const measureHeight = useCallback2(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const h = el.getBoundingClientRect().height;
+    if (h > 0) {
+      componentHeightCache.set(cacheKey, h);
+    }
+  }, [cacheKey]);
+  useEffect3(() => {
+    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__ */ jsx7(MdxSkeleton, { height: estimatedHeight });
+  }
+  return /* @__PURE__ */ jsx7("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 }) });
+  }
+  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 useEffect4, useMemo as useMemo3, useRef as useRef6, useState as useState4 } from "react";
+import { deriveRenderKey } 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 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);
+      if (response.ok) {
+        pending.resolve(response.code);
+      } else {
+        pending.reject({ ...response.error, kind: "compile" });
+      }
+    };
+    worker.onerror = () => {
+      recordCrash();
+      worker.terminate();
+      workerInstance = null;
+      for (const [id, pending] of pendingRequests) {
+        pendingRequests.delete(id);
+        pending.reject({ message: "MDX compile worker crashed", kind: "compile" });
+      }
+    };
+    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;
+  const promise = new Promise((resolve, reject) => {
+    pendingRequests.set(id, { resolve, reject });
+    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
+      }
+    });
+  });
+  function cancel() {
+    if (cancelled) return;
+    cancelled = true;
+    const pending = pendingRequests.get(id);
+    if (pending) {
+      pendingRequests.delete(id);
+      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.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";
+import { jsx as jsx8 } 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) {
+  const components = { ...baseComponents };
+  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__ */ jsx8("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 = useRef6(0);
+  const cancelRef = useRef6(null);
+  const blockCacheRef = useRef6(/* @__PURE__ */ new Map());
+  const [mdxDisplay, setMdxDisplay] = useState4({
+    code: null,
+    Content: null,
+    runtimeComponents: null,
+    compileKey: null,
+    renderKey: null,
+    pending: false,
+    error: null
+  });
+  const [markdownHtml, setMarkdownHtml] = useState4(null);
+  useEffect4(() => {
+    acquireMdxWorker();
+    return () => {
+      cancelRef.current?.();
+      cancelRef.current = null;
+      releaseMdxWorker();
+    };
+  }, []);
+  const mdxInspection = useMemo3(
+    () => 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 = mdxInspection.hasMdxSyntax;
+  const optionsFingerprint = useMemo3(() => {
+    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),
+      `rp${getObjectIdentity(mdx?.extraRemarkPlugins)}`,
+      `hp${getObjectIdentity(mdx?.extraRehypePlugins)}`
+    ].join("|");
+  }, [
+    mdx?.enableMath,
+    mdx?.enableSideAnnotation,
+    mdx?.enableCodeHighlight,
+    mdx?.sourceAnchors,
+    mdx?.extraRemarkDescriptors,
+    mdx?.extraRehypeDescriptors,
+    mdx?.extraRemarkPlugins,
+    mdx?.extraRehypePlugins
+  ]);
+  const compileKey = useMemo3(
+    () => deriveRenderKey(`${snapshot.markdown}:${optionsFingerprint}`, "custom", ""),
+    [snapshot.markdown, optionsFingerprint]
+  );
+  const componentFingerprint = useMemo3(
+    () => `cp${getObjectIdentity(mdx?.components)}`,
+    [mdx?.components]
+  );
+  const renderKey = useMemo3(
+    () => `${compileKey}:${componentFingerprint}`,
+    [compileKey, componentFingerprint]
+  );
+  useEffect4(() => {
+    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),
+                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: mdx?.enableCodeHighlight,
+        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),
+            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?.enableCodeHighlight,
+    mdx?.enableMath,
+    mdx?.enableSideAnnotation,
+    mdx?.extraRehypeDescriptors,
+    mdx?.extraRehypePlugins,
+    mdx?.extraRemarkDescriptors,
+    mdx?.extraRemarkPlugins,
+    mdxInspection,
+    mdx?.sourceAnchors,
+    mdxDisplay.compileKey,
+    mdxDisplay.Content,
+    mdxDisplay.renderKey,
+    renderBlock,
+    renderKey,
+    snapshot.markdown,
+    snapshot.previewBlocks,
+    themeKey,
+    wrappedComponents
+  ]);
+  return {
+    hasMdx,
+    markdownHtml,
+    mdxDisplay
+  };
+}
+
+// src/MdxPreview.tsx
+import { jsx as jsx9, jsxs as jsxs3 } 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__ */ 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 })
+    ] })
+  ] }) });
+}
+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__ */ jsx9(ErrorNotice, { error: this.state.error });
+    }
+    return this.props.children;
+  }
+};
+function useStoreSnapshot(store) {
+  return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}
+function MdxPreview(props) {
+  const {
+    state,
+    className,
+    themeKey = "",
+    ariaLabel,
+    renderBlock,
+    mdx,
+    onContentUpdate
+  } = props;
+  const snapshot = useStoreSnapshot(state);
+  const rootRef = useRef7(null);
+  const [runtimeError, setRuntimeError] = useState5(null);
+  const wrappedComponents = useMemo4(() => {
+    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
+  });
+  useEffect5(() => {
+    setRuntimeError(null);
+  }, [mdxDisplay.renderKey]);
+  useEffect5(() => {
+    const root = rootRef.current;
+    if (!root || !onContentUpdate) return;
+    const observer = new ResizeObserver(() => onContentUpdate());
+    observer.observe(root);
+    return () => observer.disconnect();
+  }, [onContentUpdate]);
+  useEffect5(() => {
+    if (!onContentUpdate) return;
+    const id = requestAnimationFrame(() => onContentUpdate());
+    return () => cancelAnimationFrame(id);
+  }, [mdxDisplay, markdownHtml, runtimeError, onContentUpdate]);
+  const hasContent = mdxDisplay.Content !== null || markdownHtml !== null;
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: rootRef,
+      className,
+      role: "document",
+      "aria-label": ariaLabel ?? "Preview",
+      "aria-live": "polite",
+      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)
+      ]
+    }
+  );
+}
+
+// src/OwoMarkPreview.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
 function isController(store) {
   return typeof store.updateVisibleBlockIds === "function";
 }
@@ -606,16 +1349,31 @@ var OwoMarkPreview = function OwoMarkPreview2(props) {
     viewportFirst,
     ariaLabel,
     renderBlock,
+    mdx,
     onContentUpdate
   } = props;
-  const onContentUpdateRef = useRef4(onContentUpdate);
+  if (strategy === "mdx") {
+    return /* @__PURE__ */ jsx10(
+      MdxPreview,
+      {
+        state,
+        className,
+        themeKey,
+        ariaLabel,
+        renderBlock,
+        mdx,
+        onContentUpdate
+      }
+    );
+  }
+  const onContentUpdateRef = useRef8(onContentUpdate);
   onContentUpdateRef.current = onContentUpdate;
-  const renderBlockRef = useRef4(renderBlock);
+  const renderBlockRef = useRef8(renderBlock);
   renderBlockRef.current = renderBlock;
   const hasRenderBlock = !!renderBlock;
-  const containerRef = useRef4(null);
-  const engineRef = useRef4(null);
-  useEffect3(() => {
+  const containerRef = useRef8(null);
+  const engineRef = useRef8(null);
+  useEffect6(() => {
     if (!containerRef.current) return;
     const engineOptions = {
       strategy,
@@ -635,7 +1393,7 @@ var OwoMarkPreview = function OwoMarkPreview2(props) {
       engineRef.current = null;
     };
   }, [strategy, themeKey, registry, viewportFirst, hasRenderBlock]);
-  useEffect3(() => {
+  useEffect6(() => {
     const unsub = state.subscribe((newState) => {
       const engine = engineRef.current;
       if (engine) {
@@ -644,7 +1402,7 @@ var OwoMarkPreview = function OwoMarkPreview2(props) {
     });
     return unsub;
   }, [state]);
-  useEffect3(() => {
+  useEffect6(() => {
     const container = containerRef.current;
     if (!viewportFirst || !container || !isController(state)) return;
     const controller = state;
@@ -686,7 +1444,7 @@ var OwoMarkPreview = function OwoMarkPreview2(props) {
       mutation.disconnect();
     };
   }, [viewportFirst, state]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       ref: containerRef,
@@ -699,33 +1457,33 @@ var OwoMarkPreview = function OwoMarkPreview2(props) {
 };
 
 // src/useOwoMarkSharedState.ts
-import { useRef as useRef5, useSyncExternalStore, useCallback as useCallback2 } from "react";
+import { useRef as useRef9, useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback3 } 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 = useCallback3(
     (onStoreChange) => controller.subscribe(onStoreChange),
     [controller]
   );
-  const getSnapshot = useCallback2(() => controller.getState(), [controller]);
-  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  const getSnapshot = useCallback3(() => controller.getState(), [controller]);
+  return useSyncExternalStore2(subscribe, getSnapshot, getSnapshot);
 }
 
 // src/useBlockContext.ts
-import { useState as useState3, useEffect as useEffect5 } from "react";
+import { useState as useState6, useEffect as useEffect8 } from "react";
 function useBlockContext(core) {
-  const [blockContext, setBlockContext] = useState3(
+  const [blockContext, setBlockContext] = useState6(
     () => core.getBlockContext()
   );
-  useEffect5(() => {
+  useEffect8(() => {
     setBlockContext(core.getBlockContext());
     return core.onBlockContextChange((ctx) => {
       setBlockContext(ctx);
@@ -738,23 +1496,23 @@ function useBlockContext(core) {
 import { getThemeClassName as getThemeClassName2, THEME_LIGHT_CLASS, THEME_DARK_CLASS } from "@owomark/view";
 
 // src/useVirtualList.ts
-import { useState as useState4, useCallback as useCallback3, useRef as useRef6, useEffect as useEffect6, useMemo as useMemo2 } from "react";
+import { useState as useState7, useCallback as useCallback4, useRef as useRef10, useEffect as useEffect9, useMemo as useMemo5 } 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 = 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(() => {
     setContainer(containerRef.current);
   });
-  useEffect6(() => {
+  useEffect9(() => {
     if (!container) return;
     setViewportHeight(container.clientHeight);
     const ro = new ResizeObserver((entries) => {
@@ -765,7 +1523,7 @@ function useVirtualList(options) {
     ro.observe(container);
     return () => ro.disconnect();
   }, [container]);
-  useEffect6(() => {
+  useEffect9(() => {
     if (!container) return;
     const onScroll = () => {
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
@@ -779,27 +1537,27 @@ function useVirtualList(options) {
       if (rafRef.current) cancelAnimationFrame(rafRef.current);
     };
   }, [container]);
-  const rows = useMemo2(
+  const rows = useMemo5(
     () => buildVirtualRows(blocks, heightCacheRef.current, charsPerLine),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [blocks, charsPerLine, heightCacheVersion]
   );
-  const visibleRange = useMemo2(
+  const visibleRange = useMemo5(
     () => computeVisibleRange(rows, scrollTop, viewportHeight, overscan),
     [rows, scrollTop, viewportHeight, overscan]
   );
-  const updateBlockHeight = useCallback3((blockId, height) => {
+  const updateBlockHeight = useCallback4((blockId, height) => {
     const cache = heightCacheRef.current;
     if (cache.get(blockId) !== height) {
       cache.set(blockId, height);
       setHeightCacheVersion((v) => v + 1);
     }
   }, []);
-  const isBlockVisible = useCallback3(
+  const isBlockVisible = useCallback4(
     (blockIndex) => blockIndex >= visibleRange.startIndex && blockIndex <= visibleRange.endIndex,
     [visibleRange]
   );
-  const invalidateAllHeights = useCallback3(() => {
+  const invalidateAllHeights = useCallback4(() => {
     heightCacheRef.current.clear();
     setHeightCacheVersion((v) => v + 1);
   }, []);
@@ -813,73 +1571,8 @@ 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 {
   DEFAULT_EDITOR_CONFIG,
   EditorBlock,
@@ -892,11 +1585,14 @@ export {
   SlashMenu,
   THEME_DARK_CLASS,
   THEME_LIGHT_CLASS,
+  acquireMdxWorker,
   clearComponentHeightCache,
   computeMenuPosition,
   deriveProcessorOptions,
   getCaretRect,
   getThemeClassName2 as getThemeClassName,
+  registerPlugin,
+  releaseMdxWorker,
   resolveEditorConfig,
   useBlockContext,
   useOwoMarkCore,

package/dist/mdx.worker.js

@@ -0,0 +1,97 @@
+// src/mdx.worker.ts
+import { compile } from "@mdx-js/mdx";
+import {
+  getOwoMarkPlugins,
+  inspectMdxSource,
+  remapMdxErrorDetails
+} from "@owomark/processor";
+
+// 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) };
+}
+
+// src/mdx.worker.ts
+var cancelledIds = /* @__PURE__ */ new Set();
+self.onmessage = (e) => {
+  const msg = e.data;
+  if (msg.type === "cancel") {
+    cancelledIds.add(msg.id);
+    return;
+  }
+  void handleCompile(msg);
+};
+async function handleCompile(data) {
+  const { id, markdown, options } = data;
+  const inspection = options.preparedSource && options.sourceMap ? null : inspectMdxSource(markdown, {
+    enableMath: options.enableMath,
+    enableSideAnnotation: options.enableSideAnnotation,
+    extraRemarkDescriptors: options.extraRemarkDescriptors
+  });
+  const preparedSource = options.preparedSource ?? inspection.compileSource;
+  const sourceMap = options.sourceMap ?? inspection.sourceMap;
+  try {
+    if (cancelledIds.has(id)) {
+      cancelledIds.delete(id);
+      return;
+    }
+    const { remarkPlugins, rehypePlugins } = getOwoMarkPlugins({
+      mode: "production",
+      enableMath: options.enableMath,
+      enableSideAnnotation: options.enableSideAnnotation,
+      enableCodeHighlight: options.enableCodeHighlight,
+      sourceAnchors: options.sourceAnchors,
+      extraRemarkDescriptors: options.extraRemarkDescriptors,
+      extraRehypeDescriptors: options.extraRehypeDescriptors,
+      mdxSourceMap: sourceMap
+    });
+    if (cancelledIds.has(id)) {
+      cancelledIds.delete(id);
+      return;
+    }
+    const result = await compile(preparedSource, {
+      outputFormat: "function-body",
+      remarkPlugins,
+      rehypePlugins
+    });
+    if (cancelledIds.has(id)) {
+      cancelledIds.delete(id);
+      return;
+    }
+    self.postMessage({
+      id,
+      ok: true,
+      code: String(result)
+    });
+  } catch (error) {
+    if (cancelledIds.has(id)) {
+      cancelledIds.delete(id);
+      return;
+    }
+    self.postMessage({
+      id,
+      ok: false,
+      error: parseMdxErrorDetails(remapMdxErrorDetails(error, sourceMap))
+    });
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owomark/react",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "React bindings and components for the OwoMark editor stack.",
   "type": "module",
   "main": "./dist/index.js",
@@ -33,9 +33,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@owomark/core": "^0.1.5",
-    "@owomark/processor": "^0.1.5",
-    "@owomark/view": "^0.1.5"
+    "@mdx-js/mdx": "^3.0.0",
+    "@owomark/core": "^0.1.6",
+    "@owomark/processor": "^0.1.6",
+    "@owomark/view": "^0.1.6"
   },
   "peerDependencies": {
     "react": ">=18",

package/dist/index.css

@@ -1,32 +0,0 @@
-/* src/MdxSkeleton.css */
-.owo-mdx-skeleton {
-  background:
-    linear-gradient(
-      90deg,
-      var(--owo-skeleton-base, #e5e7eb) 25%,
-      var(--owo-skeleton-shine, #f3f4f6) 50%,
-      var(--owo-skeleton-base, #e5e7eb) 75%);
-  background-size: 200% 100%;
-  animation: owo-mdx-skeleton-shimmer 1.5s ease-in-out infinite;
-  border-radius: 4px;
-}
-@keyframes owo-mdx-skeleton-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}
-.owo-mdx-skeleton-block {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 0;
-}
-.owo-mdx-skeleton-line {
-  height: 14px;
-}
-.owo-mdx-skeleton-line:last-child {
-  width: 60%;
-}