@hackersheet/next-document-content-components 0.1.0-alpha.31 → 0.1.0-alpha.33

package/dist/cjs/components/mermaid/index.d.ts

@@ -1,5 +1,6 @@
 export { default as Mermaid, default } from './mermaid.js';
-export { getErrorMessage, hasValidSvgDimensions, normalizeCode } from './mermaid-utils.js';
-export { MermaidRenderResult, renderWithBeautifulMermaid, renderWithMermaidFallback, withSafeJsonStringify } from './mermaid-renderer.js';
+export { hasValidSvgDimensions, normalizeCode } from './mermaid-utils.js';
+export { MermaidRenderResult, renderWithBeautifulMermaid } from './mermaid-renderer.js';
+export { destroyIframe, renderWithIframe } from './mermaid-iframe-renderer.js';
 import 'react';
 import '@hackersheet/react-document-content';

package/dist/cjs/components/mermaid/index.js

@@ -30,26 +30,25 @@ var mermaid_exports = {};
 __export(mermaid_exports, {
   Mermaid: () => import_mermaid2.default,
   default: () => import_mermaid.default,
-  getErrorMessage: () => import_mermaid_utils.getErrorMessage,
+  destroyIframe: () => import_mermaid_iframe_renderer.destroyIframe,
   hasValidSvgDimensions: () => import_mermaid_utils.hasValidSvgDimensions,
   normalizeCode: () => import_mermaid_utils.normalizeCode,
   renderWithBeautifulMermaid: () => import_mermaid_renderer.renderWithBeautifulMermaid,
-  renderWithMermaidFallback: () => import_mermaid_renderer.renderWithMermaidFallback,
-  withSafeJsonStringify: () => import_mermaid_renderer.withSafeJsonStringify
+  renderWithIframe: () => import_mermaid_iframe_renderer.renderWithIframe
 });
 module.exports = __toCommonJS(mermaid_exports);
 var import_mermaid = __toESM(require("./mermaid"));
 var import_mermaid2 = __toESM(require("./mermaid"));
 var import_mermaid_utils = require("./mermaid-utils");
 var import_mermaid_renderer = require("./mermaid-renderer");
+var import_mermaid_iframe_renderer = require("./mermaid-iframe-renderer");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Mermaid,
-  getErrorMessage,
+  destroyIframe,
   hasValidSvgDimensions,
   normalizeCode,
   renderWithBeautifulMermaid,
-  renderWithMermaidFallback,
-  withSafeJsonStringify
+  renderWithIframe
 });
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/mermaid/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/mermaid/index.ts"],"sourcesContent":["/**\n * Mermaid diagram component and utilities.\n * @module\n */\n\nexport { default } from './mermaid';\nexport { default as Mermaid } from './mermaid';\nexport { getErrorMessage, hasValidSvgDimensions, normalizeCode } from './mermaid-utils';\nexport { renderWithBeautifulMermaid, renderWithMermaidFallback, withSafeJsonStringify } from './mermaid-renderer';\nexport type { MermaidRenderResult } from './mermaid-renderer';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,qBAAwB;AACxB,IAAAA,kBAAmC;AACnC,2BAAsE;AACtE,8BAA6F;","names":["import_mermaid"]}
+{"version":3,"sources":["../../../../src/components/mermaid/index.ts"],"sourcesContent":["/**\n * Mermaid diagram component and utilities.\n * @module\n */\n\nexport { default } from './mermaid';\nexport { default as Mermaid } from './mermaid';\nexport { hasValidSvgDimensions, normalizeCode } from './mermaid-utils';\nexport { renderWithBeautifulMermaid } from './mermaid-renderer';\nexport { destroyIframe, renderWithIframe } from './mermaid-iframe-renderer';\nexport type { MermaidRenderResult } from './mermaid-renderer';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,qBAAwB;AACxB,IAAAA,kBAAmC;AACnC,2BAAqD;AACrD,8BAA2C;AAC3C,qCAAgD;","names":["import_mermaid"]}

package/dist/cjs/components/mermaid/mermaid-iframe-renderer.d.ts

@@ -0,0 +1,33 @@
+import { MermaidRenderResult } from './mermaid-renderer.js';
+
+/**
+ * Sandboxed iframe-based mermaid renderer.
+ * Isolates mermaid rendering from cross-origin iframes on the page.
+ * @module
+ */
+
+/**
+ * Render mermaid diagram using a sandboxed iframe.
+ * This isolates the rendering from any cross-origin content on the page.
+ *
+ * @param code - Mermaid diagram code
+ * @param isDark - Whether to use dark theme
+ * @param timeout - Timeout in milliseconds (default: 10000)
+ * @returns Promise resolving to render result
+ *
+ * @example
+ * ```ts
+ * const result = await renderWithIframe('graph TD; A-->B;', false);
+ * if (result.success) {
+ *   console.log(result.svg);
+ * }
+ * ```
+ */
+declare function renderWithIframe(code: string, isDark: boolean, timeout?: number): Promise<MermaidRenderResult>;
+/**
+ * Clean up the iframe instance.
+ * Call this when the mermaid component is no longer needed.
+ */
+declare function destroyIframe(): void;
+
+export { destroyIframe, renderWithIframe };

package/dist/cjs/components/mermaid/mermaid-iframe-renderer.js

@@ -0,0 +1,138 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var mermaid_iframe_renderer_exports = {};
+__export(mermaid_iframe_renderer_exports, {
+  destroyIframe: () => destroyIframe,
+  renderWithIframe: () => renderWithIframe
+});
+module.exports = __toCommonJS(mermaid_iframe_renderer_exports);
+const MERMAID_CDN_URL = "https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs";
+const generateIframeHtml = () => `
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    body { margin: 0; padding: 0; background: transparent; }
+    #container { display: flex; justify-content: center; }
+  </style>
+</head>
+<body>
+  <div id="container"></div>
+  <script type="module">
+    import('${MERMAID_CDN_URL}')
+      .then((module) => {
+        const mermaid = module.default;
+        const counter = { value: 0 };
+
+        window.addEventListener('message', async (event) => {
+          const { type, code, isDark, requestId } = event.data;
+          if (type !== 'render') return;
+
+          const theme = isDark ? 'dark' : 'default';
+          mermaid.initialize({ startOnLoad: false, theme });
+
+          try {
+            counter.value += 1;
+            const uniqueId = 'mermaid-' + counter.value;
+            const { svg } = await mermaid.render(uniqueId, code);
+            window.parent.postMessage({ type: 'result', success: true, svg, requestId }, '*');
+          } catch (error) {
+            const message = error instanceof Error ? error.message : 'Unknown error';
+            window.parent.postMessage({ type: 'result', success: false, error: message, requestId }, '*');
+          }
+        });
+
+        window.parent.postMessage({ type: 'ready' }, '*');
+      });
+  </script>
+</body>
+</html>
+`;
+const state = {
+  iframe: null,
+  ready: null,
+  pendingRequests: /* @__PURE__ */ new Map()
+};
+const generateRequestId = () => `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+const handleIframeMessage = (event) => {
+  const { data } = event;
+  if (data.type !== "result") return;
+  const resolver = state.pendingRequests.get(data.requestId);
+  if (!resolver) return;
+  state.pendingRequests.delete(data.requestId);
+  const result = data.success && data.svg ? { success: true, svg: data.svg } : { success: false, error: data.error ?? "Unknown error" };
+  resolver(result);
+};
+const createIframe = () => {
+  if (state.ready) {
+    return state.ready;
+  }
+  state.ready = new Promise((resolve) => {
+    const iframe = document.createElement("iframe");
+    iframe.style.cssText = "position:fixed;top:-9999px;left:-9999px;width:1920px;height:1080px;border:0;pointer-events:none;";
+    iframe.sandbox.add("allow-scripts", "allow-same-origin");
+    iframe.srcdoc = generateIframeHtml();
+    const handleReady = (event) => {
+      if (event.source !== iframe.contentWindow || event.data.type !== "ready") return;
+      window.removeEventListener("message", handleReady);
+      window.addEventListener("message", handleIframeMessage);
+      resolve();
+    };
+    window.addEventListener("message", handleReady);
+    document.body.appendChild(iframe);
+    state.iframe = iframe;
+  });
+  return state.ready;
+};
+async function renderWithIframe(code, isDark, timeout = 1e4) {
+  await createIframe();
+  const contentWindow = state.iframe?.contentWindow;
+  if (!contentWindow) {
+    return { success: false, error: "Failed to create iframe" };
+  }
+  const requestId = generateRequestId();
+  return new Promise((resolve) => {
+    const timeoutId = setTimeout(() => {
+      state.pendingRequests.delete(requestId);
+      resolve({ success: false, error: "Render timeout" });
+    }, timeout);
+    state.pendingRequests.set(requestId, (result) => {
+      clearTimeout(timeoutId);
+      resolve(result);
+    });
+    const message = { type: "render", code, isDark, requestId };
+    contentWindow.postMessage(message, "*");
+  });
+}
+function destroyIframe() {
+  if (!state.iframe) return;
+  window.removeEventListener("message", handleIframeMessage);
+  state.iframe.remove();
+  state.iframe = null;
+  state.ready = null;
+  state.pendingRequests.clear();
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  destroyIframe,
+  renderWithIframe
+});
+//# sourceMappingURL=mermaid-iframe-renderer.js.map

package/dist/cjs/components/mermaid/mermaid-iframe-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/mermaid/mermaid-iframe-renderer.ts"],"sourcesContent":["'use client';\n\n/**\n * Sandboxed iframe-based mermaid renderer.\n * Isolates mermaid rendering from cross-origin iframes on the page.\n * @module\n */\n\nimport type { MermaidRenderResult } from './mermaid-renderer';\n\n/**\n * CDN URL for mermaid library.\n * Using ESM build for modern browser compatibility.\n * Used as fallback when beautiful-mermaid doesn't support the diagram type (e.g., Gantt).\n */\nconst MERMAID_CDN_URL = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';\n\n/**\n * Generate the HTML content for the sandboxed iframe.\n * This HTML includes mermaid library and handles postMessage communication.\n *\n * @returns HTML string for iframe srcdoc\n */\nconst generateIframeHtml = (): string => `\n<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"UTF-8\">\n  <style>\n    body { margin: 0; padding: 0; background: transparent; }\n    #container { display: flex; justify-content: center; }\n  </style>\n</head>\n<body>\n  <div id=\"container\"></div>\n  <script type=\"module\">\n    import('${MERMAID_CDN_URL}')\n      .then((module) => {\n        const mermaid = module.default;\n        const counter = { value: 0 };\n\n        window.addEventListener('message', async (event) => {\n          const { type, code, isDark, requestId } = event.data;\n          if (type !== 'render') return;\n\n          const theme = isDark ? 'dark' : 'default';\n          mermaid.initialize({ startOnLoad: false, theme });\n\n          try {\n            counter.value += 1;\n            const uniqueId = 'mermaid-' + counter.value;\n            const { svg } = await mermaid.render(uniqueId, code);\n            window.parent.postMessage({ type: 'result', success: true, svg, requestId }, '*');\n          } catch (error) {\n            const message = error instanceof Error ? error.message : 'Unknown error';\n            window.parent.postMessage({ type: 'result', success: false, error: message, requestId }, '*');\n          }\n        });\n\n        window.parent.postMessage({ type: 'ready' }, '*');\n      });\n  </script>\n</body>\n</html>\n`;\n\n/**\n * Message sent to iframe for rendering.\n */\ninterface RenderMessage {\n  readonly type: 'render';\n  readonly code: string;\n  readonly isDark: boolean;\n  readonly requestId: string;\n}\n\n/**\n * Message received from iframe with render result.\n */\ninterface ResultMessage {\n  readonly type: 'result';\n  readonly requestId: string;\n  readonly success: boolean;\n  readonly svg?: string;\n  readonly error?: string;\n}\n\n/**\n * Message received when iframe is ready.\n */\ninterface ReadyMessage {\n  readonly type: 'ready';\n}\n\ntype IframeMessage = ResultMessage | ReadyMessage;\n\n/**\n * Renderer state container.\n * Using an object instead of separate variables to avoid `let`.\n */\ninterface RendererState {\n  iframe: HTMLIFrameElement | null;\n  ready: Promise<void> | null;\n  readonly pendingRequests: Map<string, (result: MermaidRenderResult) => void>;\n}\n\n/**\n * Singleton renderer state.\n * Reusing a single iframe improves performance.\n */\nconst state: RendererState = {\n  iframe: null,\n  ready: null,\n  pendingRequests: new Map(),\n};\n\n/**\n * Generate a unique request ID.\n *\n * @returns Unique string identifier\n */\nconst generateRequestId = (): string => `${Date.now()}-${Math.random().toString(36).slice(2)}`;\n\n/**\n * Handle messages from the sandboxed iframe.\n *\n * @param event - Message event from iframe\n */\nconst handleIframeMessage = (event: MessageEvent<IframeMessage>): void => {\n  const { data } = event;\n\n  if (data.type !== 'result') return;\n\n  const resolver = state.pendingRequests.get(data.requestId);\n  if (!resolver) return;\n\n  state.pendingRequests.delete(data.requestId);\n\n  const result: MermaidRenderResult =\n    data.success && data.svg\n      ? { success: true, svg: data.svg }\n      : { success: false, error: data.error ?? 'Unknown error' };\n\n  resolver(result);\n};\n\n/**\n * Create and initialize the sandboxed iframe.\n *\n * @returns Promise that resolves when iframe is ready\n */\nconst createIframe = (): Promise<void> => {\n  if (state.ready) {\n    return state.ready;\n  }\n\n  state.ready = new Promise((resolve) => {\n    const iframe = document.createElement('iframe');\n    iframe.style.cssText =\n      'position:fixed;top:-9999px;left:-9999px;width:1920px;height:1080px;border:0;pointer-events:none;';\n    iframe.sandbox.add('allow-scripts', 'allow-same-origin');\n    iframe.srcdoc = generateIframeHtml();\n\n    const handleReady = (event: MessageEvent<IframeMessage>): void => {\n      if (event.source !== iframe.contentWindow || event.data.type !== 'ready') return;\n\n      window.removeEventListener('message', handleReady);\n      window.addEventListener('message', handleIframeMessage);\n      resolve();\n    };\n\n    window.addEventListener('message', handleReady);\n    document.body.appendChild(iframe);\n    state.iframe = iframe;\n  });\n\n  return state.ready;\n};\n\n/**\n * Render mermaid diagram using a sandboxed iframe.\n * This isolates the rendering from any cross-origin content on the page.\n *\n * @param code - Mermaid diagram code\n * @param isDark - Whether to use dark theme\n * @param timeout - Timeout in milliseconds (default: 10000)\n * @returns Promise resolving to render result\n *\n * @example\n * ```ts\n * const result = await renderWithIframe('graph TD; A-->B;', false);\n * if (result.success) {\n *   console.log(result.svg);\n * }\n * ```\n */\nexport async function renderWithIframe(code: string, isDark: boolean, timeout = 10000): Promise<MermaidRenderResult> {\n  await createIframe();\n\n  const contentWindow = state.iframe?.contentWindow;\n  if (!contentWindow) {\n    return { success: false, error: 'Failed to create iframe' };\n  }\n\n  const requestId = generateRequestId();\n\n  return new Promise((resolve) => {\n    const timeoutId = setTimeout(() => {\n      state.pendingRequests.delete(requestId);\n      resolve({ success: false, error: 'Render timeout' });\n    }, timeout);\n\n    state.pendingRequests.set(requestId, (result) => {\n      clearTimeout(timeoutId);\n      resolve(result);\n    });\n\n    const message: RenderMessage = { type: 'render', code, isDark, requestId };\n    contentWindow.postMessage(message, '*');\n  });\n}\n\n/**\n * Clean up the iframe instance.\n * Call this when the mermaid component is no longer needed.\n */\nexport function destroyIframe(): void {\n  if (!state.iframe) return;\n\n  window.removeEventListener('message', handleIframeMessage);\n  state.iframe.remove();\n  state.iframe = null;\n  state.ready = null;\n  state.pendingRequests.clear();\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA,MAAM,kBAAkB;AAQxB,MAAM,qBAAqB,MAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAa3B,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0E7B,MAAM,QAAuB;AAAA,EAC3B,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,iBAAiB,oBAAI,IAAI;AAC3B;AAOA,MAAM,oBAAoB,MAAc,GAAG,KAAK,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,CAAC,CAAC;AAO5F,MAAM,sBAAsB,CAAC,UAA6C;AACxE,QAAM,EAAE,KAAK,IAAI;AAEjB,MAAI,KAAK,SAAS,SAAU;AAE5B,QAAM,WAAW,MAAM,gBAAgB,IAAI,KAAK,SAAS;AACzD,MAAI,CAAC,SAAU;AAEf,QAAM,gBAAgB,OAAO,KAAK,SAAS;AAE3C,QAAM,SACJ,KAAK,WAAW,KAAK,MACjB,EAAE,SAAS,MAAM,KAAK,KAAK,IAAI,IAC/B,EAAE,SAAS,OAAO,OAAO,KAAK,SAAS,gBAAgB;AAE7D,WAAS,MAAM;AACjB;AAOA,MAAM,eAAe,MAAqB;AACxC,MAAI,MAAM,OAAO;AACf,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,QAAQ,IAAI,QAAQ,CAAC,YAAY;AACrC,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,MAAM,UACX;AACF,WAAO,QAAQ,IAAI,iBAAiB,mBAAmB;AACvD,WAAO,SAAS,mBAAmB;AAEnC,UAAM,cAAc,CAAC,UAA6C;AAChE,UAAI,MAAM,WAAW,OAAO,iBAAiB,MAAM,KAAK,SAAS,QAAS;AAE1E,aAAO,oBAAoB,WAAW,WAAW;AACjD,aAAO,iBAAiB,WAAW,mBAAmB;AACtD,cAAQ;AAAA,IACV;AAEA,WAAO,iBAAiB,WAAW,WAAW;AAC9C,aAAS,KAAK,YAAY,MAAM;AAChC,UAAM,SAAS;AAAA,EACjB,CAAC;AAED,SAAO,MAAM;AACf;AAmBA,eAAsB,iBAAiB,MAAc,QAAiB,UAAU,KAAqC;AACnH,QAAM,aAAa;AAEnB,QAAM,gBAAgB,MAAM,QAAQ;AACpC,MAAI,CAAC,eAAe;AAClB,WAAO,EAAE,SAAS,OAAO,OAAO,0BAA0B;AAAA,EAC5D;AAEA,QAAM,YAAY,kBAAkB;AAEpC,SAAO,IAAI,QAAQ,CAAC,YAAY;AAC9B,UAAM,YAAY,WAAW,MAAM;AACjC,YAAM,gBAAgB,OAAO,SAAS;AACtC,cAAQ,EAAE,SAAS,OAAO,OAAO,iBAAiB,CAAC;AAAA,IACrD,GAAG,OAAO;AAEV,UAAM,gBAAgB,IAAI,WAAW,CAAC,WAAW;AAC/C,mBAAa,SAAS;AACtB,cAAQ,MAAM;AAAA,IAChB,CAAC;AAED,UAAM,UAAyB,EAAE,MAAM,UAAU,MAAM,QAAQ,UAAU;AACzE,kBAAc,YAAY,SAAS,GAAG;AAAA,EACxC,CAAC;AACH;AAMO,SAAS,gBAAsB;AACpC,MAAI,CAAC,MAAM,OAAQ;AAEnB,SAAO,oBAAoB,WAAW,mBAAmB;AACzD,QAAM,OAAO,OAAO;AACpB,QAAM,SAAS;AACf,QAAM,QAAQ;AACd,QAAM,gBAAgB,MAAM;AAC9B;","names":[]}

package/dist/cjs/components/mermaid/mermaid-renderer.d.ts

@@ -8,15 +8,6 @@ type MermaidRenderResult = {
     success: false;
     error: string;
 };
-/**
- * Run a function with a patched JSON.stringify that handles circular references.
- * This is needed because mermaid's block-beta renderer tries to stringify DOM elements.
- *
- * @param fn - Async function to execute with safe JSON.stringify
- * @returns Result of the function
- * @internal
- */
-declare function withSafeJsonStringify<T>(fn: () => Promise<T>): Promise<T>;
 /**
  * Render diagram using beautiful-mermaid library.
  * Uses dynamic import to reduce initial bundle size.
@@ -26,15 +17,5 @@ declare function withSafeJsonStringify<T>(fn: () => Promise<T>): Promise<T>;
  * @returns SVG string if successful, null otherwise
  */
 declare function renderWithBeautifulMermaid(code: string, isDark: boolean): Promise<string | null>;
-/**
- * Render diagram using original mermaid library as fallback.
- * Uses dynamic import to reduce initial bundle size.
- *
- * @param code - Mermaid diagram code
- * @param isDark - Whether to use dark theme
- * @param uniqueId - Unique identifier for the mermaid render container
- * @returns Result object with success status and SVG or error message
- */
-declare function renderWithMermaidFallback(code: string, isDark: boolean, uniqueId: string): Promise<MermaidRenderResult>;
 
-export { type MermaidRenderResult, renderWithBeautifulMermaid, renderWithMermaidFallback, withSafeJsonStringify };
+export { type MermaidRenderResult, renderWithBeautifulMermaid };

package/dist/cjs/components/mermaid/mermaid-renderer.js

@@ -29,31 +29,10 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var mermaid_renderer_exports = {};
 __export(mermaid_renderer_exports, {
-  renderWithBeautifulMermaid: () => renderWithBeautifulMermaid,
-  renderWithMermaidFallback: () => renderWithMermaidFallback,
-  withSafeJsonStringify: () => withSafeJsonStringify
+  renderWithBeautifulMermaid: () => renderWithBeautifulMermaid
 });
 module.exports = __toCommonJS(mermaid_renderer_exports);
 var import_mermaid_utils = require("./mermaid-utils");
-async function withSafeJsonStringify(fn) {
-  const originalStringify = JSON.stringify;
-  JSON.stringify = function(value, _replacer, space) {
-    const seen = /* @__PURE__ */ new WeakSet();
-    const safeReplacer = (_key, val) => {
-      if (typeof val === "object" && val !== null) {
-        if (seen.has(val)) return void 0;
-        seen.add(val);
-      }
-      return val;
-    };
-    return originalStringify(value, safeReplacer, space);
-  };
-  try {
-    return await fn();
-  } finally {
-    JSON.stringify = originalStringify;
-  }
-}
 async function renderWithBeautifulMermaid(code, isDark) {
   const { renderMermaid, THEMES } = await import("beautiful-mermaid");
   const colors = isDark ? THEMES["github-dark"] : THEMES["github-light"];
@@ -67,23 +46,8 @@ async function renderWithBeautifulMermaid(code, isDark) {
   }
   return null;
 }
-async function renderWithMermaidFallback(code, isDark, uniqueId) {
-  const mermaid = (await import("mermaid")).default;
-  const mermaidTheme = isDark ? "dark" : "default";
-  mermaid.initialize({ startOnLoad: false, theme: mermaidTheme });
-  try {
-    const { svg } = await withSafeJsonStringify(() => mermaid.render(uniqueId, code));
-    return { success: true, svg };
-  } catch (error) {
-    return { success: false, error: (0, import_mermaid_utils.getErrorMessage)(error) };
-  } finally {
-    document.getElementById(`d${uniqueId}`)?.remove();
-  }
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  renderWithBeautifulMermaid,
-  renderWithMermaidFallback,
-  withSafeJsonStringify
+  renderWithBeautifulMermaid
 });
 //# sourceMappingURL=mermaid-renderer.js.map

package/dist/cjs/components/mermaid/mermaid-renderer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/mermaid/mermaid-renderer.ts"],"sourcesContent":["'use client';\n\n/**\n * Mermaid diagram rendering functions.\n * Handles rendering with beautiful-mermaid and fallback to original mermaid library.\n * @module\n */\n\nimport { getErrorMessage, hasValidSvgDimensions, normalizeCode } from './mermaid-utils';\n\n/**\n * Result type for mermaid rendering operations.\n */\nexport type MermaidRenderResult = { success: true; svg: string } | { success: false; error: string };\n\n/**\n * Run a function with a patched JSON.stringify that handles circular references.\n * This is needed because mermaid's block-beta renderer tries to stringify DOM elements.\n *\n * @param fn - Async function to execute with safe JSON.stringify\n * @returns Result of the function\n * @internal\n */\nexport async function withSafeJsonStringify<T>(fn: () => Promise<T>): Promise<T> {\n  const originalStringify = JSON.stringify;\n  JSON.stringify = function (value, _replacer, space) {\n    const seen = new WeakSet();\n    const safeReplacer = (_key: string, val: unknown) => {\n      if (typeof val === 'object' && val !== null) {\n        if (seen.has(val)) return undefined;\n        seen.add(val);\n      }\n      return val;\n    };\n    return originalStringify(value, safeReplacer, space);\n  };\n  try {\n    return await fn();\n  } finally {\n    JSON.stringify = originalStringify;\n  }\n}\n\n/**\n * Render diagram using beautiful-mermaid library.\n * Uses dynamic import to reduce initial bundle size.\n *\n * @param code - Mermaid diagram code\n * @param isDark - Whether to use dark theme\n * @returns SVG string if successful, null otherwise\n */\nexport async function renderWithBeautifulMermaid(code: string, isDark: boolean): Promise<string | null> {\n  const { renderMermaid, THEMES } = await import('beautiful-mermaid');\n  const colors = isDark ? THEMES['github-dark'] : THEMES['github-light'];\n  const normalizedCode = normalizeCode(code);\n  const result = await renderMermaid(normalizedCode, {\n    ...colors,\n    transparent: true,\n  });\n  if (result && hasValidSvgDimensions(result)) {\n    return result;\n  }\n  return null;\n}\n\n/**\n * Render diagram using original mermaid library as fallback.\n * Uses dynamic import to reduce initial bundle size.\n *\n * @param code - Mermaid diagram code\n * @param isDark - Whether to use dark theme\n * @param uniqueId - Unique identifier for the mermaid render container\n * @returns Result object with success status and SVG or error message\n */\nexport async function renderWithMermaidFallback(\n  code: string,\n  isDark: boolean,\n  uniqueId: string\n): Promise<MermaidRenderResult> {\n  const mermaid = (await import('mermaid')).default;\n  const mermaidTheme = isDark ? 'dark' : 'default';\n  mermaid.initialize({ startOnLoad: false, theme: mermaidTheme });\n  try {\n    const { svg } = await withSafeJsonStringify(() => mermaid.render(uniqueId, code));\n    return { success: true, svg };\n  } catch (error) {\n    return { success: false, error: getErrorMessage(error) };\n  } finally {\n    document.getElementById(`d${uniqueId}`)?.remove();\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,2BAAsE;AAetE,eAAsB,sBAAyB,IAAkC;AAC/E,QAAM,oBAAoB,KAAK;AAC/B,OAAK,YAAY,SAAU,OAAO,WAAW,OAAO;AAClD,UAAM,OAAO,oBAAI,QAAQ;AACzB,UAAM,eAAe,CAAC,MAAc,QAAiB;AACnD,UAAI,OAAO,QAAQ,YAAY,QAAQ,MAAM;AAC3C,YAAI,KAAK,IAAI,GAAG,EAAG,QAAO;AAC1B,aAAK,IAAI,GAAG;AAAA,MACd;AACA,aAAO;AAAA,IACT;AACA,WAAO,kBAAkB,OAAO,cAAc,KAAK;AAAA,EACrD;AACA,MAAI;AACF,WAAO,MAAM,GAAG;AAAA,EAClB,UAAE;AACA,SAAK,YAAY;AAAA,EACnB;AACF;AAUA,eAAsB,2BAA2B,MAAc,QAAyC;AACtG,QAAM,EAAE,eAAe,OAAO,IAAI,MAAM,OAAO,mBAAmB;AAClE,QAAM,SAAS,SAAS,OAAO,aAAa,IAAI,OAAO,cAAc;AACrE,QAAM,qBAAiB,oCAAc,IAAI;AACzC,QAAM,SAAS,MAAM,cAAc,gBAAgB;AAAA,IACjD,GAAG;AAAA,IACH,aAAa;AAAA,EACf,CAAC;AACD,MAAI,cAAU,4CAAsB,MAAM,GAAG;AAC3C,WAAO;AAAA,EACT;AACA,SAAO;AACT;AAWA,eAAsB,0BACpB,MACA,QACA,UAC8B;AAC9B,QAAM,WAAW,MAAM,OAAO,SAAS,GAAG;AAC1C,QAAM,eAAe,SAAS,SAAS;AACvC,UAAQ,WAAW,EAAE,aAAa,OAAO,OAAO,aAAa,CAAC;AAC9D,MAAI;AACF,UAAM,EAAE,IAAI,IAAI,MAAM,sBAAsB,MAAM,QAAQ,OAAO,UAAU,IAAI,CAAC;AAChF,WAAO,EAAE,SAAS,MAAM,IAAI;AAAA,EAC9B,SAAS,OAAO;AACd,WAAO,EAAE,SAAS,OAAO,WAAO,sCAAgB,KAAK,EAAE;AAAA,EACzD,UAAE;AACA,aAAS,eAAe,IAAI,QAAQ,EAAE,GAAG,OAAO;AAAA,EAClD;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/mermaid/mermaid-renderer.ts"],"sourcesContent":["'use client';\n\n/**\n * Mermaid diagram rendering functions.\n * Handles rendering with beautiful-mermaid library.\n * @module\n */\n\nimport { hasValidSvgDimensions, normalizeCode } from './mermaid-utils';\n\n/**\n * Result type for mermaid rendering operations.\n */\nexport type MermaidRenderResult = { success: true; svg: string } | { success: false; error: string };\n\n/**\n * Render diagram using beautiful-mermaid library.\n * Uses dynamic import to reduce initial bundle size.\n *\n * @param code - Mermaid diagram code\n * @param isDark - Whether to use dark theme\n * @returns SVG string if successful, null otherwise\n */\nexport async function renderWithBeautifulMermaid(code: string, isDark: boolean): Promise<string | null> {\n  const { renderMermaid, THEMES } = await import('beautiful-mermaid');\n  const colors = isDark ? THEMES['github-dark'] : THEMES['github-light'];\n  const normalizedCode = normalizeCode(code);\n  const result = await renderMermaid(normalizedCode, {\n    ...colors,\n    transparent: true,\n  });\n  if (result && hasValidSvgDimensions(result)) {\n    return result;\n  }\n  return null;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,2BAAqD;AAerD,eAAsB,2BAA2B,MAAc,QAAyC;AACtG,QAAM,EAAE,eAAe,OAAO,IAAI,MAAM,OAAO,mBAAmB;AAClE,QAAM,SAAS,SAAS,OAAO,aAAa,IAAI,OAAO,cAAc;AACrE,QAAM,qBAAiB,oCAAc,IAAI;AACzC,QAAM,SAAS,MAAM,cAAc,gBAAgB;AAAA,IACjD,GAAG;AAAA,IACH,aAAa;AAAA,EACf,CAAC;AACD,MAAI,cAAU,4CAAsB,MAAM,GAAG;AAC3C,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}

package/dist/cjs/components/mermaid/mermaid-utils.d.ts

@@ -31,19 +31,5 @@ declare function normalizeCode(code: string): string;
  * ```
  */
 declare function hasValidSvgDimensions(svg: string): boolean;
-/**
- * Extract error message from an unknown error value.
- *
- * @param error - Unknown error value (Error object, string, or other)
- * @returns Error message string
- *
- * @example
- * ```ts
- * getErrorMessage(new Error('Parse error')) // returns 'Parse error'
- * getErrorMessage('Something went wrong') // returns 'Something went wrong'
- * getErrorMessage(null) // returns 'Unknown error'
- * ```
- */
-declare function getErrorMessage(error: unknown): string;
 
-export { getErrorMessage, hasValidSvgDimensions, normalizeCode };
+export { hasValidSvgDimensions, normalizeCode };

package/dist/cjs/components/mermaid/mermaid-utils.js

@@ -18,7 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var mermaid_utils_exports = {};
 __export(mermaid_utils_exports, {
-  getErrorMessage: () => getErrorMessage,
   hasValidSvgDimensions: () => hasValidSvgDimensions,
   normalizeCode: () => normalizeCode
 });
@@ -41,18 +40,8 @@ function hasValidSvgDimensions(svg) {
   const height = parseFloat(heightMatch[1]);
   return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0;
 }
-function getErrorMessage(error) {
-  if (error instanceof Error) {
-    return error.message;
-  }
-  if (typeof error === "string") {
-    return error;
-  }
-  return "Unknown error";
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getErrorMessage,
   hasValidSvgDimensions,
   normalizeCode
 });

package/dist/cjs/components/mermaid/mermaid-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/mermaid/mermaid-utils.ts"],"sourcesContent":["/**\n * Utility functions for Mermaid diagram processing.\n * These are pure functions that can be easily unit tested.\n * @module\n */\n\n/** Hoisted regex patterns to avoid recreation on each function call. */\nconst TRAILING_SEMICOLON_REGEX = /;(\\s*)$/;\nconst ARROW_LEFT_REGEX = /(\\w)-->/g;\nconst ARROW_RIGHT_REGEX = /-->(\\w)/g;\nconst WIDTH_REGEX = /width=\"([^\"]+)\"/;\nconst HEIGHT_REGEX = /height=\"([^\"]+)\"/;\n\n/**\n * Normalize mermaid code for beautiful-mermaid compatibility.\n * - Removes trailing semicolons from each line\n * - Adds spaces around arrows (e.g., A-->B becomes A --> B)\n *\n * @param code - Raw mermaid diagram code\n * @returns Normalized code string\n *\n * @example\n * ```ts\n * normalizeCode('A-->B;') // returns 'A --> B'\n * ```\n */\nexport function normalizeCode(code: string): string {\n  return code\n    .split('\\n')\n    .map((line) =>\n      line\n        .replace(TRAILING_SEMICOLON_REGEX, '$1')\n        .replace(ARROW_LEFT_REGEX, '$1 -->')\n        .replace(ARROW_RIGHT_REGEX, '--> $1')\n    )\n    .join('\\n');\n}\n\n/**\n * Check if an SVG string has valid dimensions.\n * beautiful-mermaid returns invalid SVGs with negative/infinite dimensions for unsupported diagrams.\n *\n * @param svg - SVG string to validate\n * @returns true if SVG has valid positive finite dimensions\n *\n * @example\n * ```ts\n * hasValidSvgDimensions('<svg width=\"100\" height=\"50\">...</svg>') // returns true\n * hasValidSvgDimensions('<svg width=\"-1\" height=\"Infinity\">...</svg>') // returns false\n * ```\n */\nexport function hasValidSvgDimensions(svg: string): boolean {\n  const widthMatch = svg.match(WIDTH_REGEX);\n  const heightMatch = svg.match(HEIGHT_REGEX);\n  if (!widthMatch || !heightMatch) return false;\n  const width = parseFloat(widthMatch[1]);\n  const height = parseFloat(heightMatch[1]);\n  return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0;\n}\n\n/**\n * Extract error message from an unknown error value.\n *\n * @param error - Unknown error value (Error object, string, or other)\n * @returns Error message string\n *\n * @example\n * ```ts\n * getErrorMessage(new Error('Parse error')) // returns 'Parse error'\n * getErrorMessage('Something went wrong') // returns 'Something went wrong'\n * getErrorMessage(null) // returns 'Unknown error'\n * ```\n */\nexport function getErrorMessage(error: unknown): string {\n  if (error instanceof Error) {\n    return error.message;\n  }\n  if (typeof error === 'string') {\n    return error;\n  }\n  return 'Unknown error';\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,MAAM,2BAA2B;AACjC,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,cAAc;AACpB,MAAM,eAAe;AAed,SAAS,cAAc,MAAsB;AAClD,SAAO,KACJ,MAAM,IAAI,EACV;AAAA,IAAI,CAAC,SACJ,KACG,QAAQ,0BAA0B,IAAI,EACtC,QAAQ,kBAAkB,QAAQ,EAClC,QAAQ,mBAAmB,QAAQ;AAAA,EACxC,EACC,KAAK,IAAI;AACd;AAeO,SAAS,sBAAsB,KAAsB;AAC1D,QAAM,aAAa,IAAI,MAAM,WAAW;AACxC,QAAM,cAAc,IAAI,MAAM,YAAY;AAC1C,MAAI,CAAC,cAAc,CAAC,YAAa,QAAO;AACxC,QAAM,QAAQ,WAAW,WAAW,CAAC,CAAC;AACtC,QAAM,SAAS,WAAW,YAAY,CAAC,CAAC;AACxC,SAAO,OAAO,SAAS,KAAK,KAAK,OAAO,SAAS,MAAM,KAAK,QAAQ,KAAK,SAAS;AACpF;AAeO,SAAS,gBAAgB,OAAwB;AACtD,MAAI,iBAAiB,OAAO;AAC1B,WAAO,MAAM;AAAA,EACf;AACA,MAAI,OAAO,UAAU,UAAU;AAC7B,WAAO;AAAA,EACT;AACA,SAAO;AACT;","names":[]}
+{"version":3,"sources":["../../../../src/components/mermaid/mermaid-utils.ts"],"sourcesContent":["/**\n * Utility functions for Mermaid diagram processing.\n * These are pure functions that can be easily unit tested.\n * @module\n */\n\n/** Hoisted regex patterns to avoid recreation on each function call. */\nconst TRAILING_SEMICOLON_REGEX = /;(\\s*)$/;\nconst ARROW_LEFT_REGEX = /(\\w)-->/g;\nconst ARROW_RIGHT_REGEX = /-->(\\w)/g;\nconst WIDTH_REGEX = /width=\"([^\"]+)\"/;\nconst HEIGHT_REGEX = /height=\"([^\"]+)\"/;\n\n/**\n * Normalize mermaid code for beautiful-mermaid compatibility.\n * - Removes trailing semicolons from each line\n * - Adds spaces around arrows (e.g., A-->B becomes A --> B)\n *\n * @param code - Raw mermaid diagram code\n * @returns Normalized code string\n *\n * @example\n * ```ts\n * normalizeCode('A-->B;') // returns 'A --> B'\n * ```\n */\nexport function normalizeCode(code: string): string {\n  return code\n    .split('\\n')\n    .map((line) =>\n      line\n        .replace(TRAILING_SEMICOLON_REGEX, '$1')\n        .replace(ARROW_LEFT_REGEX, '$1 -->')\n        .replace(ARROW_RIGHT_REGEX, '--> $1')\n    )\n    .join('\\n');\n}\n\n/**\n * Check if an SVG string has valid dimensions.\n * beautiful-mermaid returns invalid SVGs with negative/infinite dimensions for unsupported diagrams.\n *\n * @param svg - SVG string to validate\n * @returns true if SVG has valid positive finite dimensions\n *\n * @example\n * ```ts\n * hasValidSvgDimensions('<svg width=\"100\" height=\"50\">...</svg>') // returns true\n * hasValidSvgDimensions('<svg width=\"-1\" height=\"Infinity\">...</svg>') // returns false\n * ```\n */\nexport function hasValidSvgDimensions(svg: string): boolean {\n  const widthMatch = svg.match(WIDTH_REGEX);\n  const heightMatch = svg.match(HEIGHT_REGEX);\n  if (!widthMatch || !heightMatch) return false;\n  const width = parseFloat(widthMatch[1]);\n  const height = parseFloat(heightMatch[1]);\n  return Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,MAAM,2BAA2B;AACjC,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAC1B,MAAM,cAAc;AACpB,MAAM,eAAe;AAed,SAAS,cAAc,MAAsB;AAClD,SAAO,KACJ,MAAM,IAAI,EACV;AAAA,IAAI,CAAC,SACJ,KACG,QAAQ,0BAA0B,IAAI,EACtC,QAAQ,kBAAkB,QAAQ,EAClC,QAAQ,mBAAmB,QAAQ;AAAA,EACxC,EACC,KAAK,IAAI;AACd;AAeO,SAAS,sBAAsB,KAAsB;AAC1D,QAAM,aAAa,IAAI,MAAM,WAAW;AACxC,QAAM,cAAc,IAAI,MAAM,YAAY;AAC1C,MAAI,CAAC,cAAc,CAAC,YAAa,QAAO;AACxC,QAAM,QAAQ,WAAW,WAAW,CAAC,CAAC;AACtC,QAAM,SAAS,WAAW,YAAY,CAAC,CAAC;AACxC,SAAO,OAAO,SAAS,KAAK,KAAK,OAAO,SAAS,MAAM,KAAK,QAAQ,KAAK,SAAS;AACpF;","names":[]}

package/dist/cjs/components/mermaid/mermaid.d.ts

@@ -3,12 +3,13 @@ import { MermaidComponentProps } from '@hackersheet/react-document-content';
 
 /**
  * Mermaid diagram component that renders diagrams using beautiful-mermaid.
- * Falls back to the original mermaid library if beautiful-mermaid fails.
+ * Falls back to a sandboxed iframe renderer if beautiful-mermaid fails.
  * Automatically switches between light and dark themes based on the current theme.
  *
  * @remarks
  * - Uses dynamic imports to reduce initial bundle size
  * - Handles hydration mismatch by showing loading state until mounted
+ * - Uses sandboxed iframe for fallback to avoid cross-origin issues
  * - Supports toggling between diagram and code view
  * - Diagram view shows only the rendered diagram without borders
  * - Code view shows the source code in a code block style

package/dist/cjs/components/mermaid/mermaid.js

@@ -34,6 +34,7 @@ __export(mermaid_exports, {
 module.exports = __toCommonJS(mermaid_exports);
 var import_next_themes = require("next-themes");
 var import_react = __toESM(require("react"));
+var import_mermaid_iframe_renderer = require("./mermaid-iframe-renderer");
 var import_mermaid_renderer = require("./mermaid-renderer");
 var import_code_block_header = __toESM(require("../code-block/code-block-header"));
 var import_code_block_icon = __toESM(require("../code-block/code-block-icon"));
@@ -43,8 +44,6 @@ function Mermaid({ code }) {
   const [renderState, setRenderState] = (0, import_react.useState)({ status: "loading" });
   const [viewMode, setViewMode] = (0, import_react.useState)("diagram");
   const { theme, systemTheme } = (0, import_next_themes.useTheme)();
-  const renderCountRef = (0, import_react.useRef)(0);
-  const id = (0, import_react.useId)();
   (0, import_react.useEffect)(() => {
     setMounted(true);
   }, []);
@@ -59,14 +58,13 @@ function Mermaid({ code }) {
       }
     } catch {
     }
-    const uniqueId = `${id}-${++renderCountRef.current}`;
-    const result = await (0, import_mermaid_renderer.renderWithMermaidFallback)(code, isDark, uniqueId);
+    const result = await (0, import_mermaid_iframe_renderer.renderWithIframe)(code, isDark);
     if (result.success) {
       setRenderState({ status: "success", svg: result.svg });
     } else {
       setRenderState({ status: "error", message: result.error });
     }
-  }, [code, id, theme, systemTheme]);
+  }, [code, theme, systemTheme]);
   (0, import_react.useEffect)(() => {
     if (!mounted) {
       return;
@@ -105,6 +103,6 @@ function Mermaid({ code }) {
     },
     "Diagram"
   );
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `code-block mermaid-block mermaid-code-view ${hasError ? "has-error" : ""}` }, /* @__PURE__ */ import_react.default.createElement(import_code_block_header.default, { icon: /* @__PURE__ */ import_react.default.createElement(import_code_block_icon.default, { language: "mermaid" }), code, actions: toggleButton }), /* @__PURE__ */ import_react.default.createElement("div", { className: "mermaid-code" }, hasError && /* @__PURE__ */ import_react.default.createElement("div", { className: "mermaid-error-message" }, /* @__PURE__ */ import_react.default.createElement("strong", null, "Syntax Error"), /* @__PURE__ */ import_react.default.createElement("span", null, renderState.message)), /* @__PURE__ */ import_react.default.createElement("pre", null, /* @__PURE__ */ import_react.default.createElement("code", null, code))));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: `code-block mermaid-block mermaid-code-view ${hasError ? "has-error" : ""}` }, /* @__PURE__ */ import_react.default.createElement(import_code_block_header.default, { icon: /* @__PURE__ */ import_react.default.createElement(import_code_block_icon.default, { language: "mermaid" }), code, actions: toggleButton }), /* @__PURE__ */ import_react.default.createElement("div", { className: "mermaid-code" }, hasError ? /* @__PURE__ */ import_react.default.createElement("div", { className: "mermaid-error-message" }, /* @__PURE__ */ import_react.default.createElement("strong", null, "Syntax Error"), /* @__PURE__ */ import_react.default.createElement("span", null, renderState.message)) : null, /* @__PURE__ */ import_react.default.createElement("pre", null, /* @__PURE__ */ import_react.default.createElement("code", null, code))));
 }
 //# sourceMappingURL=mermaid.js.map

package/dist/cjs/components/mermaid/mermaid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/mermaid/mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'next-themes';\nimport React, { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { renderWithBeautifulMermaid, renderWithMermaidFallback } from './mermaid-renderer';\nimport CodeBlockHeader from '../code-block/code-block-header';\nimport CodeBlockIcon from '../code-block/code-block-icon';\n\nimport type { MermaidComponentProps } from '@hackersheet/react-document-content';\n\n\n/**\n * Render state for the mermaid component.\n */\ntype RenderState = { status: 'loading' } | { status: 'success'; svg: string } | { status: 'error'; message: string };\n\n/**\n * View mode for the mermaid component.\n */\ntype ViewMode = 'diagram' | 'code';\n\n/**\n * Hoisted static loading fallback to prevent recreation on each render.\n */\nconst LoadingFallback = (\n  <div className=\"mermaid-block mermaid-loading\">\n    <div>Loading...</div>\n  </div>\n);\n\n/**\n * Mermaid diagram component that renders diagrams using beautiful-mermaid.\n * Falls back to the original mermaid library if beautiful-mermaid fails.\n * Automatically switches between light and dark themes based on the current theme.\n *\n * @remarks\n * - Uses dynamic imports to reduce initial bundle size\n * - Handles hydration mismatch by showing loading state until mounted\n * - Supports toggling between diagram and code view\n * - Diagram view shows only the rendered diagram without borders\n * - Code view shows the source code in a code block style\n */\nexport default function Mermaid({ code }: MermaidComponentProps) {\n  const [mounted, setMounted] = useState(false);\n  const [renderState, setRenderState] = useState<RenderState>({ status: 'loading' });\n  const [viewMode, setViewMode] = useState<ViewMode>('diagram');\n  const { theme, systemTheme } = useTheme();\n  const renderCountRef = useRef(0);\n  const id = useId();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const renderDiagram = useCallback(async () => {\n    const currentTheme = theme === 'system' ? systemTheme : theme;\n    const isDark = currentTheme === 'dark';\n\n    try {\n      const result = await renderWithBeautifulMermaid(code, isDark);\n      if (result) {\n        setRenderState({ status: 'success', svg: result });\n        return;\n      }\n    } catch {\n      // Fall through to mermaid fallback\n    }\n\n    const uniqueId = `${id}-${++renderCountRef.current}`;\n    const result = await renderWithMermaidFallback(code, isDark, uniqueId);\n    if (result.success) {\n      setRenderState({ status: 'success', svg: result.svg });\n    } else {\n      setRenderState({ status: 'error', message: result.error });\n    }\n  }, [code, id, theme, systemTheme]);\n\n  useEffect(() => {\n    if (!mounted) {\n      return;\n    }\n    renderDiagram();\n  }, [mounted, renderDiagram]);\n\n  const toggleViewMode = useCallback(() => {\n    setViewMode((prev) => (prev === 'diagram' ? 'code' : 'diagram'));\n  }, []);\n\n  if (!mounted || renderState.status === 'loading') {\n    return LoadingFallback;\n  }\n\n  const hasError = renderState.status === 'error';\n  const showDiagram = viewMode === 'diagram' && !hasError;\n\n  if (showDiagram) {\n    return (\n      <div className=\"mermaid-block mermaid-diagram-view\">\n        <div className=\"mermaid-diagram\" dangerouslySetInnerHTML={{ __html: renderState.svg }} />\n        <button\n          type=\"button\"\n          onClick={toggleViewMode}\n          className=\"mermaid-toggle-btn\"\n          title=\"Show code\"\n          aria-label=\"Show code\"\n        >\n          Code\n        </button>\n      </div>\n    );\n  }\n\n  const toggleButton = (\n    <button\n      type=\"button\"\n      onClick={toggleViewMode}\n      className=\"mermaid-toggle-btn\"\n      title=\"Show diagram\"\n      disabled={hasError}\n    >\n      Diagram\n    </button>\n  );\n\n  return (\n    <div className={`code-block mermaid-block mermaid-code-view ${hasError ? 'has-error' : ''}`}>\n      <CodeBlockHeader icon={<CodeBlockIcon language=\"mermaid\" />} code={code} actions={toggleButton} />\n      <div className=\"mermaid-code\">\n        {hasError && (\n          <div className=\"mermaid-error-message\">\n            <strong>Syntax Error</strong>\n            <span>{renderState.message}</span>\n          </div>\n        )}\n        <pre>\n          <code>{code}</code>\n        </pre>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["React","result","CodeBlockHeader","CodeBlockIcon"]}
+{"version":3,"sources":["../../../../src/components/mermaid/mermaid.tsx"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'next-themes';\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport { renderWithIframe } from './mermaid-iframe-renderer';\nimport { renderWithBeautifulMermaid } from './mermaid-renderer';\nimport CodeBlockHeader from '../code-block/code-block-header';\nimport CodeBlockIcon from '../code-block/code-block-icon';\n\nimport type { MermaidComponentProps } from '@hackersheet/react-document-content';\n\n/**\n * Render state for the mermaid component.\n */\ntype RenderState = { status: 'loading' } | { status: 'success'; svg: string } | { status: 'error'; message: string };\n\n/**\n * View mode for the mermaid component.\n */\ntype ViewMode = 'diagram' | 'code';\n\n/**\n * Hoisted static loading fallback to prevent recreation on each render.\n */\nconst LoadingFallback = (\n  <div className=\"mermaid-block mermaid-loading\">\n    <div>Loading...</div>\n  </div>\n);\n\n/**\n * Mermaid diagram component that renders diagrams using beautiful-mermaid.\n * Falls back to a sandboxed iframe renderer if beautiful-mermaid fails.\n * Automatically switches between light and dark themes based on the current theme.\n *\n * @remarks\n * - Uses dynamic imports to reduce initial bundle size\n * - Handles hydration mismatch by showing loading state until mounted\n * - Uses sandboxed iframe for fallback to avoid cross-origin issues\n * - Supports toggling between diagram and code view\n * - Diagram view shows only the rendered diagram without borders\n * - Code view shows the source code in a code block style\n */\nexport default function Mermaid({ code }: MermaidComponentProps) {\n  const [mounted, setMounted] = useState(false);\n  const [renderState, setRenderState] = useState<RenderState>({ status: 'loading' });\n  const [viewMode, setViewMode] = useState<ViewMode>('diagram');\n  const { theme, systemTheme } = useTheme();\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  const renderDiagram = useCallback(async () => {\n    const currentTheme = theme === 'system' ? systemTheme : theme;\n    const isDark = currentTheme === 'dark';\n\n    try {\n      const result = await renderWithBeautifulMermaid(code, isDark);\n      if (result) {\n        setRenderState({ status: 'success', svg: result });\n        return;\n      }\n    } catch {\n      // Fall through to iframe fallback\n    }\n\n    const result = await renderWithIframe(code, isDark);\n    if (result.success) {\n      setRenderState({ status: 'success', svg: result.svg });\n    } else {\n      setRenderState({ status: 'error', message: result.error });\n    }\n  }, [code, theme, systemTheme]);\n\n  useEffect(() => {\n    if (!mounted) {\n      return;\n    }\n    renderDiagram();\n  }, [mounted, renderDiagram]);\n\n  const toggleViewMode = useCallback(() => {\n    setViewMode((prev) => (prev === 'diagram' ? 'code' : 'diagram'));\n  }, []);\n\n  if (!mounted || renderState.status === 'loading') {\n    return LoadingFallback;\n  }\n\n  const hasError = renderState.status === 'error';\n  const showDiagram = viewMode === 'diagram' && !hasError;\n\n  if (showDiagram) {\n    return (\n      <div className=\"mermaid-block mermaid-diagram-view\">\n        <div className=\"mermaid-diagram\" dangerouslySetInnerHTML={{ __html: renderState.svg }} />\n        <button\n          type=\"button\"\n          onClick={toggleViewMode}\n          className=\"mermaid-toggle-btn\"\n          title=\"Show code\"\n          aria-label=\"Show code\"\n        >\n          Code\n        </button>\n      </div>\n    );\n  }\n\n  const toggleButton = (\n    <button\n      type=\"button\"\n      onClick={toggleViewMode}\n      className=\"mermaid-toggle-btn\"\n      title=\"Show diagram\"\n      disabled={hasError}\n    >\n      Diagram\n    </button>\n  );\n\n  return (\n    <div className={`code-block mermaid-block mermaid-code-view ${hasError ? 'has-error' : ''}`}>\n      <CodeBlockHeader icon={<CodeBlockIcon language=\"mermaid\" />} code={code} actions={toggleButton} />\n      <div className=\"mermaid-code\">\n        {hasError ? (\n          <div className=\"mermaid-error-message\">\n            <strong>Syntax Error</strong>\n            <span>{renderState.message}</span>\n          </div>\n        ) : null}\n        <pre>\n          <code>{code}</code>\n        </pre>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["React","result","CodeBlockHeader","CodeBlockIcon"]}

package/dist/esm/components/mermaid/index.d.mts

@@ -1,5 +1,6 @@
 export { default as Mermaid, default } from './mermaid.mjs';
-export { getErrorMessage, hasValidSvgDimensions, normalizeCode } from './mermaid-utils.mjs';
-export { MermaidRenderResult, renderWithBeautifulMermaid, renderWithMermaidFallback, withSafeJsonStringify } from './mermaid-renderer.mjs';
+export { hasValidSvgDimensions, normalizeCode } from './mermaid-utils.mjs';
+export { MermaidRenderResult, renderWithBeautifulMermaid } from './mermaid-renderer.mjs';
+export { destroyIframe, renderWithIframe } from './mermaid-iframe-renderer.mjs';
 import 'react';
 import '@hackersheet/react-document-content';

package/dist/esm/components/mermaid/index.mjs

@@ -1,15 +1,15 @@
 import { default as default2 } from "./mermaid.mjs";
 import { default as default3 } from "./mermaid.mjs";
-import { getErrorMessage, hasValidSvgDimensions, normalizeCode } from "./mermaid-utils.mjs";
-import { renderWithBeautifulMermaid, renderWithMermaidFallback, withSafeJsonStringify } from "./mermaid-renderer.mjs";
+import { hasValidSvgDimensions, normalizeCode } from "./mermaid-utils.mjs";
+import { renderWithBeautifulMermaid } from "./mermaid-renderer.mjs";
+import { destroyIframe, renderWithIframe } from "./mermaid-iframe-renderer.mjs";
 export {
   default3 as Mermaid,
   default2 as default,
-  getErrorMessage,
+  destroyIframe,
   hasValidSvgDimensions,
   normalizeCode,
   renderWithBeautifulMermaid,
-  renderWithMermaidFallback,
-  withSafeJsonStringify
+  renderWithIframe
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/mermaid/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/mermaid/index.ts"],"sourcesContent":["/**\n * Mermaid diagram component and utilities.\n * @module\n */\n\nexport { default } from \"./mermaid.mjs\";\nexport { default as Mermaid } from \"./mermaid.mjs\";\nexport { getErrorMessage, hasValidSvgDimensions, normalizeCode } from \"./mermaid-utils.mjs\";\nexport { renderWithBeautifulMermaid, renderWithMermaidFallback, withSafeJsonStringify } from \"./mermaid-renderer.mjs\";\nexport type { MermaidRenderResult } from \"./mermaid-renderer.mjs\";\n"],"mappings":"AAKA,SAAS,WAAAA,gBAAe;AACxB,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,iBAAiB,uBAAuB,qBAAqB;AACtE,SAAS,4BAA4B,2BAA2B,6BAA6B;","names":["default"]}
+{"version":3,"sources":["../../../../src/components/mermaid/index.ts"],"sourcesContent":["/**\n * Mermaid diagram component and utilities.\n * @module\n */\n\nexport { default } from \"./mermaid.mjs\";\nexport { default as Mermaid } from \"./mermaid.mjs\";\nexport { hasValidSvgDimensions, normalizeCode } from \"./mermaid-utils.mjs\";\nexport { renderWithBeautifulMermaid } from \"./mermaid-renderer.mjs\";\nexport { destroyIframe, renderWithIframe } from \"./mermaid-iframe-renderer.mjs\";\nexport type { MermaidRenderResult } from \"./mermaid-renderer.mjs\";\n"],"mappings":"AAKA,SAAS,WAAAA,gBAAe;AACxB,SAAoB,WAAXA,gBAA0B;AACnC,SAAS,uBAAuB,qBAAqB;AACrD,SAAS,kCAAkC;AAC3C,SAAS,eAAe,wBAAwB;","names":["default"]}

package/dist/esm/components/mermaid/mermaid-iframe-renderer.d.mts

@@ -0,0 +1,33 @@
+import { MermaidRenderResult } from './mermaid-renderer.mjs';
+
+/**
+ * Sandboxed iframe-based mermaid renderer.
+ * Isolates mermaid rendering from cross-origin iframes on the page.
+ * @module
+ */
+
+/**
+ * Render mermaid diagram using a sandboxed iframe.
+ * This isolates the rendering from any cross-origin content on the page.
+ *
+ * @param code - Mermaid diagram code
+ * @param isDark - Whether to use dark theme
+ * @param timeout - Timeout in milliseconds (default: 10000)
+ * @returns Promise resolving to render result
+ *
+ * @example
+ * ```ts
+ * const result = await renderWithIframe('graph TD; A-->B;', false);
+ * if (result.success) {
+ *   console.log(result.svg);
+ * }
+ * ```
+ */
+declare function renderWithIframe(code: string, isDark: boolean, timeout?: number): Promise<MermaidRenderResult>;
+/**
+ * Clean up the iframe instance.
+ * Call this when the mermaid component is no longer needed.
+ */
+declare function destroyIframe(): void;
+
+export { destroyIframe, renderWithIframe };