@changerawr/markdown 1.1.11 → 1.2.0

package/dist/react/index.d.mts

@@ -22,6 +22,37 @@ interface Extension {
     parseRules: ParseRule[];
     renderRules: RenderRule[];
 }
+/**
+ * Props passed to a framework component registered on a ComponentRenderRule.
+ * The `children` type is intentionally `unknown` here — each framework binding
+ * (React, Astro, etc.) narrows it to the correct type in its own module.
+ */
+interface ComponentTokenProps {
+    token: MarkdownToken;
+    /** Pre-rendered children (framework-specific ReactNode, Astro.slots, etc.) */
+    children?: unknown;
+}
+/**
+ * A render rule that optionally carries a framework component.
+ * The `render` function is always required as a string-output fallback used by
+ * HTML / Tailwind / JSON / Astro outputs.  Framework renderers (React, etc.)
+ * will prefer `component` when present.
+ */
+interface ComponentRenderRule extends RenderRule {
+    /**
+     * Framework component (React.ComponentType, Svelte component, etc.).
+     * Typed as `unknown` here; each framework module provides a narrowed variant.
+     */
+    component?: unknown;
+}
+/**
+ * An Extension that may carry framework components on its render rules.
+ * It is fully compatible with the base `Extension` type and can be registered
+ * with the engine like any regular extension — the engine only uses `render`.
+ */
+interface ComponentExtension extends Extension {
+    renderRules: ComponentRenderRule[];
+}
 type OutputFormat = 'html' | 'tailwind' | 'json';
 interface RendererConfig {
     format: OutputFormat;
@@ -61,6 +92,33 @@ interface ExtensionRegistration {
     conflictingRules?: string[];
 }
 
+/**
+ * Props passed to a React component registered on a ReactComponentRenderRule.
+ */
+interface ReactComponentTokenProps {
+    token: MarkdownToken;
+    /** Rendered children as React nodes (nil when the token has no children) */
+    children?: React.ReactNode;
+}
+/**
+ * A render rule that optionally carries a React component.
+ */
+interface ReactComponentRenderRule {
+    type: string;
+    /** React component used by the React renderer when present. */
+    component?: React.ComponentType<ReactComponentTokenProps>;
+    /** String fallback — used by HTML / Tailwind / Astro renderers. */
+    render: (token: MarkdownToken) => string;
+}
+/**
+ * A ComponentExtension with React components attached to its render rules.
+ * Compatible with the base Extension interface — pass directly to createEngine().
+ */
+interface ReactComponentExtension {
+    name: string;
+    parseRules: ParseRule[];
+    renderRules: ReactComponentRenderRule[];
+}
 /**
  * Props for the MarkdownRenderer component
  */
@@ -89,6 +147,12 @@ interface MarkdownRendererProps {
     onError?: (error: Error) => void;
     /** Custom extensions to register */
     extensions?: Extension[];
+    /**
+     * Component extensions — extensions whose render rules carry React components.
+     * When provided the renderer switches from dangerouslySetInnerHTML to a React
+     * element tree, giving component-rendered tokens full React lifecycle support.
+     */
+    componentExtensions?: ReactComponentExtension[];
     /** Whether to sanitize HTML output */
     sanitize?: boolean;
     /** Allow unsafe HTML (use with caution) */
@@ -106,6 +170,8 @@ interface UseMarkdownOptions {
     debug?: boolean;
     /** Custom extensions */
     extensions?: Extension[];
+    /** Component extensions (React-component-bearing extensions) */
+    componentExtensions?: ReactComponentExtension[];
     /** Debounce delay in milliseconds */
     debounceMs?: number;
     /** Whether to memoize results */
@@ -129,6 +195,11 @@ interface UseMarkdownResult {
     render: (content: string) => void;
     /** Clear current state */
     clear: () => void;
+    /**
+     * Render an arbitrary batch of tokens to an HTML string using the current engine.
+     * Used internally by TokenTreeRenderer to render non-component token groups.
+     */
+    renderBatch: (tokens: MarkdownToken[]) => string;
 }
 /**
  * Options for useMarkdownEngine hook
@@ -168,11 +239,37 @@ interface MarkdownDebugInfo {
  * />
  * ```
  */
-declare function MarkdownRenderer({ content, className, config, format, as: Component, wrapperProps, debug, errorFallback, loading, onRender, onError, extensions, sanitize, allowUnsafeHtml, ...restProps }: MarkdownRendererProps): react_jsx_runtime.JSX.Element;
+declare function MarkdownRenderer({ content, className, config, format, as: Component, wrapperProps, debug, errorFallback, loading, onRender, onError, extensions, componentExtensions, sanitize, allowUnsafeHtml, ...restProps }: MarkdownRendererProps): react_jsx_runtime.JSX.Element;
 declare namespace MarkdownRenderer {
     var displayName: string;
 }
 
+interface TokenTreeRendererProps {
+    tokens: MarkdownToken[];
+    /**
+     * Map from token type → the rule that carries a React component.
+     * Only rules that actually have a `component` field should be in this map.
+     */
+    componentMap: Map<string, ReactComponentRenderRule>;
+    /**
+     * Renders a batch of tokens to an HTML string using the engine.
+     * Used for all tokens that don't have a React component attached.
+     */
+    renderBatch: (tokens: MarkdownToken[]) => string;
+}
+/**
+ * TokenTreeRenderer — walks a token array and renders each token as either:
+ *   • A React component (when the token type has a `component` registered)
+ *   • A raw HTML chunk via `dangerouslySetInnerHTML` (everything else)
+ *
+ * Consecutive non-component tokens are batched into a single HTML chunk so that
+ * list-grouping and other renderer logic (which operates on slices) still works.
+ *
+ * ⚠ Limitation: list items must not be interleaved with component tokens —
+ * the list-grouping in MarkdownRenderer operates on contiguous slices.
+ */
+declare function TokenTreeRenderer({ tokens, componentMap, renderBatch }: TokenTreeRendererProps): React.ReactElement;
+
 interface CacheStats {
     size: number;
     capacity: number;
@@ -280,5 +377,39 @@ declare function useMarkdownDebug(content: string): {
         contentLength: number;
     };
 };
+/**
+ * Hook for rendering markdown with React component extensions (TipTap-style).
+ *
+ * Returns the same values as `useMarkdown` plus:
+ * - `componentMap` — Map<tokenType, ReactComponentRenderRule> for TokenTreeRenderer
+ *
+ * @example
+ * ```tsx
+ * const CardExtension: ReactComponentExtension = {
+ *   name: 'card',
+ *   parseRules: [{ name: 'card', pattern: /:::card\n([\s\S]*?)\n:::/, render: (m) => ({ type: 'card', content: m[1] ?? '', raw: m[0] ?? '' }) }],
+ *   renderRules: [{
+ *     type: 'card',
+ *     component: ({ token, children }) => <div className="card">{children}</div>,
+ *     render: (token) => `<div class="card">${token.content}</div>`
+ *   }]
+ * };
+ *
+ * const { tokens, componentMap, renderBatch } = useMarkdownComponents(content, { componentExtensions: [CardExtension] });
+ * ```
+ */
+declare function useMarkdownComponents(content: string, options?: UseMarkdownOptions & {
+    componentExtensions?: ReactComponentExtension[];
+}): {
+    componentMap: Map<string, ReactComponentRenderRule>;
+    html: string;
+    tokens: MarkdownToken[];
+    isLoading: boolean;
+    error: Error | null;
+    debug: MarkdownDebugInfo | null;
+    render: (content: string) => void;
+    clear: () => void;
+    renderBatch: (tokens: MarkdownToken[]) => string;
+};
 
-export { type EngineConfig, type Extension, type MarkdownDebugInfo, type MarkdownEngineHookOptions, MarkdownRenderer, type MarkdownRendererProps, type MarkdownToken, type OutputFormat, type UseMarkdownOptions, type UseMarkdownResult, useMarkdown, useMarkdownDebug, useMarkdownEngine };
+export { type ComponentExtension, type ComponentRenderRule, type ComponentTokenProps, type EngineConfig, type Extension, type MarkdownDebugInfo, type MarkdownEngineHookOptions, MarkdownRenderer, type MarkdownRendererProps, type MarkdownToken, type OutputFormat, type ReactComponentExtension, type ReactComponentRenderRule, type ReactComponentTokenProps, TokenTreeRenderer, type UseMarkdownOptions, type UseMarkdownResult, useMarkdown, useMarkdownComponents, useMarkdownDebug, useMarkdownEngine };

package/dist/react/index.d.ts

@@ -22,6 +22,37 @@ interface Extension {
     parseRules: ParseRule[];
     renderRules: RenderRule[];
 }
+/**
+ * Props passed to a framework component registered on a ComponentRenderRule.
+ * The `children` type is intentionally `unknown` here — each framework binding
+ * (React, Astro, etc.) narrows it to the correct type in its own module.
+ */
+interface ComponentTokenProps {
+    token: MarkdownToken;
+    /** Pre-rendered children (framework-specific ReactNode, Astro.slots, etc.) */
+    children?: unknown;
+}
+/**
+ * A render rule that optionally carries a framework component.
+ * The `render` function is always required as a string-output fallback used by
+ * HTML / Tailwind / JSON / Astro outputs.  Framework renderers (React, etc.)
+ * will prefer `component` when present.
+ */
+interface ComponentRenderRule extends RenderRule {
+    /**
+     * Framework component (React.ComponentType, Svelte component, etc.).
+     * Typed as `unknown` here; each framework module provides a narrowed variant.
+     */
+    component?: unknown;
+}
+/**
+ * An Extension that may carry framework components on its render rules.
+ * It is fully compatible with the base `Extension` type and can be registered
+ * with the engine like any regular extension — the engine only uses `render`.
+ */
+interface ComponentExtension extends Extension {
+    renderRules: ComponentRenderRule[];
+}
 type OutputFormat = 'html' | 'tailwind' | 'json';
 interface RendererConfig {
     format: OutputFormat;
@@ -61,6 +92,33 @@ interface ExtensionRegistration {
     conflictingRules?: string[];
 }
 
+/**
+ * Props passed to a React component registered on a ReactComponentRenderRule.
+ */
+interface ReactComponentTokenProps {
+    token: MarkdownToken;
+    /** Rendered children as React nodes (nil when the token has no children) */
+    children?: React.ReactNode;
+}
+/**
+ * A render rule that optionally carries a React component.
+ */
+interface ReactComponentRenderRule {
+    type: string;
+    /** React component used by the React renderer when present. */
+    component?: React.ComponentType<ReactComponentTokenProps>;
+    /** String fallback — used by HTML / Tailwind / Astro renderers. */
+    render: (token: MarkdownToken) => string;
+}
+/**
+ * A ComponentExtension with React components attached to its render rules.
+ * Compatible with the base Extension interface — pass directly to createEngine().
+ */
+interface ReactComponentExtension {
+    name: string;
+    parseRules: ParseRule[];
+    renderRules: ReactComponentRenderRule[];
+}
 /**
  * Props for the MarkdownRenderer component
  */
@@ -89,6 +147,12 @@ interface MarkdownRendererProps {
     onError?: (error: Error) => void;
     /** Custom extensions to register */
     extensions?: Extension[];
+    /**
+     * Component extensions — extensions whose render rules carry React components.
+     * When provided the renderer switches from dangerouslySetInnerHTML to a React
+     * element tree, giving component-rendered tokens full React lifecycle support.
+     */
+    componentExtensions?: ReactComponentExtension[];
     /** Whether to sanitize HTML output */
     sanitize?: boolean;
     /** Allow unsafe HTML (use with caution) */
@@ -106,6 +170,8 @@ interface UseMarkdownOptions {
     debug?: boolean;
     /** Custom extensions */
     extensions?: Extension[];
+    /** Component extensions (React-component-bearing extensions) */
+    componentExtensions?: ReactComponentExtension[];
     /** Debounce delay in milliseconds */
     debounceMs?: number;
     /** Whether to memoize results */
@@ -129,6 +195,11 @@ interface UseMarkdownResult {
     render: (content: string) => void;
     /** Clear current state */
     clear: () => void;
+    /**
+     * Render an arbitrary batch of tokens to an HTML string using the current engine.
+     * Used internally by TokenTreeRenderer to render non-component token groups.
+     */
+    renderBatch: (tokens: MarkdownToken[]) => string;
 }
 /**
  * Options for useMarkdownEngine hook
@@ -168,11 +239,37 @@ interface MarkdownDebugInfo {
  * />
  * ```
  */
-declare function MarkdownRenderer({ content, className, config, format, as: Component, wrapperProps, debug, errorFallback, loading, onRender, onError, extensions, sanitize, allowUnsafeHtml, ...restProps }: MarkdownRendererProps): react_jsx_runtime.JSX.Element;
+declare function MarkdownRenderer({ content, className, config, format, as: Component, wrapperProps, debug, errorFallback, loading, onRender, onError, extensions, componentExtensions, sanitize, allowUnsafeHtml, ...restProps }: MarkdownRendererProps): react_jsx_runtime.JSX.Element;
 declare namespace MarkdownRenderer {
     var displayName: string;
 }
 
+interface TokenTreeRendererProps {
+    tokens: MarkdownToken[];
+    /**
+     * Map from token type → the rule that carries a React component.
+     * Only rules that actually have a `component` field should be in this map.
+     */
+    componentMap: Map<string, ReactComponentRenderRule>;
+    /**
+     * Renders a batch of tokens to an HTML string using the engine.
+     * Used for all tokens that don't have a React component attached.
+     */
+    renderBatch: (tokens: MarkdownToken[]) => string;
+}
+/**
+ * TokenTreeRenderer — walks a token array and renders each token as either:
+ *   • A React component (when the token type has a `component` registered)
+ *   • A raw HTML chunk via `dangerouslySetInnerHTML` (everything else)
+ *
+ * Consecutive non-component tokens are batched into a single HTML chunk so that
+ * list-grouping and other renderer logic (which operates on slices) still works.
+ *
+ * ⚠ Limitation: list items must not be interleaved with component tokens —
+ * the list-grouping in MarkdownRenderer operates on contiguous slices.
+ */
+declare function TokenTreeRenderer({ tokens, componentMap, renderBatch }: TokenTreeRendererProps): React.ReactElement;
+
 interface CacheStats {
     size: number;
     capacity: number;
@@ -280,5 +377,39 @@ declare function useMarkdownDebug(content: string): {
         contentLength: number;
     };
 };
+/**
+ * Hook for rendering markdown with React component extensions (TipTap-style).
+ *
+ * Returns the same values as `useMarkdown` plus:
+ * - `componentMap` — Map<tokenType, ReactComponentRenderRule> for TokenTreeRenderer
+ *
+ * @example
+ * ```tsx
+ * const CardExtension: ReactComponentExtension = {
+ *   name: 'card',
+ *   parseRules: [{ name: 'card', pattern: /:::card\n([\s\S]*?)\n:::/, render: (m) => ({ type: 'card', content: m[1] ?? '', raw: m[0] ?? '' }) }],
+ *   renderRules: [{
+ *     type: 'card',
+ *     component: ({ token, children }) => <div className="card">{children}</div>,
+ *     render: (token) => `<div class="card">${token.content}</div>`
+ *   }]
+ * };
+ *
+ * const { tokens, componentMap, renderBatch } = useMarkdownComponents(content, { componentExtensions: [CardExtension] });
+ * ```
+ */
+declare function useMarkdownComponents(content: string, options?: UseMarkdownOptions & {
+    componentExtensions?: ReactComponentExtension[];
+}): {
+    componentMap: Map<string, ReactComponentRenderRule>;
+    html: string;
+    tokens: MarkdownToken[];
+    isLoading: boolean;
+    error: Error | null;
+    debug: MarkdownDebugInfo | null;
+    render: (content: string) => void;
+    clear: () => void;
+    renderBatch: (tokens: MarkdownToken[]) => string;
+};
 
-export { type EngineConfig, type Extension, type MarkdownDebugInfo, type MarkdownEngineHookOptions, MarkdownRenderer, type MarkdownRendererProps, type MarkdownToken, type OutputFormat, type UseMarkdownOptions, type UseMarkdownResult, useMarkdown, useMarkdownDebug, useMarkdownEngine };
+export { type ComponentExtension, type ComponentRenderRule, type ComponentTokenProps, type EngineConfig, type Extension, type MarkdownDebugInfo, type MarkdownEngineHookOptions, MarkdownRenderer, type MarkdownRendererProps, type MarkdownToken, type OutputFormat, type ReactComponentExtension, type ReactComponentRenderRule, type ReactComponentTokenProps, TokenTreeRenderer, type UseMarkdownOptions, type UseMarkdownResult, useMarkdown, useMarkdownComponents, useMarkdownDebug, useMarkdownEngine };

package/dist/react/index.js

@@ -31,7 +31,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   MarkdownRenderer: () => MarkdownRenderer2,
+  TokenTreeRenderer: () => TokenTreeRenderer,
   useMarkdown: () => useMarkdown,
+  useMarkdownComponents: () => useMarkdownComponents,
   useMarkdownDebug: () => useMarkdownDebug,
   useMarkdownEngine: () => useMarkdownEngine
 });
@@ -2141,9 +2143,14 @@ function useMarkdown(initialContent = "", options = {}) {
         newEngine.registerExtension(extension);
       });
     }
+    if (options.componentExtensions) {
+      options.componentExtensions.forEach((ext) => {
+        newEngine.registerExtension(ext);
+      });
+    }
     engineRef.current = newEngine;
     return newEngine;
-  }, [options.config, options.format, options.debug, options.extensions]);
+  }, [options.config, options.format, options.debug, options.extensions, options.componentExtensions]);
   const processMarkdown = (0, import_react.useCallback)((markdownContent) => {
     if (!markdownContent.trim()) {
       setHtml("");
@@ -2195,6 +2202,9 @@ function useMarkdown(initialContent = "", options = {}) {
     setError(null);
     setDebug(null);
   }, []);
+  const renderBatch = (0, import_react.useCallback)((batch) => {
+    return engine.render(batch);
+  }, [engine]);
   return {
     html,
     tokens,
@@ -2202,7 +2212,8 @@ function useMarkdown(initialContent = "", options = {}) {
     error,
     debug,
     render,
-    clear
+    clear,
+    renderBatch
   };
 }
 function useMarkdownEngine(options = {}) {
@@ -2280,9 +2291,74 @@ function useMarkdownDebug(content) {
     }
   };
 }
+function useMarkdownComponents(content, options = {}) {
+  const result = useMarkdown(content, options);
+  const componentMap = (0, import_react.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (options.componentExtensions) {
+      for (const ext of options.componentExtensions) {
+        for (const rule of ext.renderRules) {
+          if (rule.component) {
+            map.set(rule.type, rule);
+          }
+        }
+      }
+    }
+    return map;
+  }, [options.componentExtensions]);
+  return { ...result, componentMap };
+}
 
-// src/react/MarkdownRenderer.tsx
+// src/react/ComponentRenderer.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function TokenTreeRenderer({
+  tokens,
+  componentMap,
+  renderBatch
+}) {
+  const elements = [];
+  let htmlBuffer = [];
+  let keyCounter = 0;
+  const flushBuffer = () => {
+    if (htmlBuffer.length === 0) return;
+    const html = renderBatch(htmlBuffer);
+    elements.push(
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          dangerouslySetInnerHTML: { __html: html }
+        },
+        `html-${keyCounter++}`
+      )
+    );
+    htmlBuffer = [];
+  };
+  for (const token of tokens) {
+    const rule = componentMap.get(token.type);
+    if (rule?.component) {
+      flushBuffer();
+      const Component = rule.component;
+      const childElements = token.children && token.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        TokenTreeRenderer,
+        {
+          tokens: token.children,
+          componentMap,
+          renderBatch
+        }
+      ) : void 0;
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { token, children: childElements }, `comp-${keyCounter++}`)
+      );
+    } else {
+      htmlBuffer.push(token);
+    }
+  }
+  flushBuffer();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: elements });
+}
+
+// src/react/MarkdownRenderer.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function MarkdownRenderer2({
   content,
   className,
@@ -2296,6 +2372,7 @@ function MarkdownRenderer2({
   onRender,
   onError,
   extensions,
+  componentExtensions,
   sanitize = true,
   allowUnsafeHtml = false,
   ...restProps
@@ -2333,9 +2410,20 @@ function MarkdownRenderer2({
     if (extensions) {
       options.extensions = extensions;
     }
+    if (componentExtensions) {
+      options.componentExtensions = componentExtensions;
+    }
     return options;
-  }, [config, format, debug, extensions, sanitize, allowUnsafeHtml]);
-  const { html, tokens, isLoading, error } = useMarkdown(content, markdownOptions);
+  }, [config, format, debug, extensions, componentExtensions, sanitize, allowUnsafeHtml]);
+  const hasComponentExtensions = componentExtensions && componentExtensions.length > 0;
+  const {
+    html,
+    tokens,
+    isLoading,
+    error,
+    renderBatch,
+    componentMap
+  } = useMarkdownComponents(content, markdownOptions);
   (0, import_react2.useEffect)(() => {
     if (html && onRender) {
       onRender(html, tokens);
@@ -2347,21 +2435,36 @@ function MarkdownRenderer2({
     }
   }, [error, onError]);
   if (isLoading && loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: loading });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: loading });
   }
   if (error) {
     if (errorFallback) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: errorFallback(error) });
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: errorFallback(error) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "changerawr-error bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: "Markdown Render Error" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm mt-1", children: error.message })
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "changerawr-error bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "font-medium", children: "Markdown Render Error" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-sm mt-1", children: error.message })
     ] });
   }
+  const wrapperClassName = className ? `${className} changerawr-markdown` : "changerawr-markdown";
+  if (hasComponentExtensions && componentMap.size > 0) {
+    return import_react2.default.createElement(
+      Component,
+      { ...wrapperProps, ...restProps, className: wrapperClassName },
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        TokenTreeRenderer,
+        {
+          tokens,
+          componentMap,
+          renderBatch
+        }
+      )
+    );
+  }
   const finalWrapperProps = {
     ...wrapperProps,
     ...restProps,
-    className: className ? `${className} changerawr-markdown` : "changerawr-markdown",
+    className: wrapperClassName,
     dangerouslySetInnerHTML: { __html: html }
   };
   return import_react2.default.createElement(Component, finalWrapperProps);
@@ -2383,10 +2486,10 @@ var MarkdownErrorBoundary = class extends import_react2.default.Component {
       if (this.props.fallback) {
         return this.props.fallback(this.state.error);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "changerawr-error-boundary bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: "Markdown Component Error" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm mt-1", children: this.state.error.message }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "changerawr-error-boundary bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "font-medium", children: "Markdown Component Error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "text-sm mt-1", children: this.state.error.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "button",
           {
             onClick: () => this.setState({ hasError: false, error: null }),
@@ -2402,7 +2505,9 @@ var MarkdownErrorBoundary = class extends import_react2.default.Component {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   MarkdownRenderer,
+  TokenTreeRenderer,
   useMarkdown,
+  useMarkdownComponents,
   useMarkdownDebug,
   useMarkdownEngine
 });