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

package/dist/cjs/components/code-block/code-block-code.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * Props for the CodeBlockCode component.
+ */
+type CodeBlockCodeProps = {
+    /** The raw source code to display as fallback */
+    code: string;
+    /** Pre-rendered HTML from Shiki highlighter */
+    highlightedHtml?: string | null;
+};
+/**
+ * A component that renders code with optional syntax highlighting.
+ *
+ * If `highlightedHtml` is provided, it renders the pre-highlighted HTML.
+ * Otherwise, it falls back to displaying the raw code in a `<pre>` block.
+ *
+ * @param props - The component props
+ * @param props.code - The raw source code to display as fallback
+ * @param props.highlightedHtml - Pre-rendered HTML from Shiki highlighter
+ * @returns The rendered code element
+ */
+declare function CodeBlockCode({ code, highlightedHtml }: CodeBlockCodeProps): React.JSX.Element;
+
+export { type CodeBlockCodeProps, CodeBlockCode as default };

package/dist/cjs/components/code-block/code-block-code.js

@@ -0,0 +1,41 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var code_block_code_exports = {};
+__export(code_block_code_exports, {
+  default: () => CodeBlockCode
+});
+module.exports = __toCommonJS(code_block_code_exports);
+var import_react = __toESM(require("react"));
+function CodeBlockCode({ code, highlightedHtml }) {
+  if (highlightedHtml) {
+    return /* @__PURE__ */ import_react.default.createElement("div", { dangerouslySetInnerHTML: { __html: highlightedHtml } });
+  }
+  return /* @__PURE__ */ import_react.default.createElement("pre", null, /* @__PURE__ */ import_react.default.createElement("code", null, code));
+}
+//# sourceMappingURL=code-block-code.js.map

package/dist/cjs/components/code-block/code-block-code.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/code-block/code-block-code.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * Props for the CodeBlockCode component.\n */\nexport type CodeBlockCodeProps = {\n  /** The raw source code to display as fallback */\n  code: string;\n  /** Pre-rendered HTML from Shiki highlighter */\n  highlightedHtml?: string | null;\n};\n\n/**\n * A component that renders code with optional syntax highlighting.\n *\n * If `highlightedHtml` is provided, it renders the pre-highlighted HTML.\n * Otherwise, it falls back to displaying the raw code in a `<pre>` block.\n *\n * @param props - The component props\n * @param props.code - The raw source code to display as fallback\n * @param props.highlightedHtml - Pre-rendered HTML from Shiki highlighter\n * @returns The rendered code element\n */\nexport default function CodeBlockCode({ code, highlightedHtml }: CodeBlockCodeProps) {\n  if (highlightedHtml) {\n    return <div dangerouslySetInnerHTML={{ __html: highlightedHtml }} />;\n  }\n  return (\n    <pre>\n      <code>{code}</code>\n    </pre>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAuBH,SAAR,cAA+B,EAAE,MAAM,gBAAgB,GAAuB;AACnF,MAAI,iBAAiB;AACnB,WAAO,6BAAAA,QAAA,cAAC,SAAI,yBAAyB,EAAE,QAAQ,gBAAgB,GAAG;AAAA,EACpE;AACA,SACE,6BAAAA,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,cAAM,IAAK,CACd;AAEJ;","names":["React"]}

package/dist/cjs/components/code-block/code-block.js

@@ -32,12 +32,13 @@ __export(code_block_exports, {
 });
 module.exports = __toCommonJS(code_block_exports);
 var import_react = __toESM(require("react"));
+var import_code_block_code = __toESM(require("./code-block-code"));
 var import_code_block_header = __toESM(require("./code-block-header"));
 var import_code_block_icon = __toESM(require("./code-block-icon"));
 var import_shiki = require("./shiki");
 async function CodeBlock({ code, ...props }) {
   const [language, filename] = props.language.split(":");
   const html = await (0, import_shiki.highlighteCode)(code, language);
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block" }, /* @__PURE__ */ import_react.default.createElement(import_code_block_header.default, { icon: /* @__PURE__ */ import_react.default.createElement(import_code_block_icon.default, { language }), filename, code }), html && /* @__PURE__ */ import_react.default.createElement("div", { dangerouslySetInnerHTML: { __html: html } }), !html && /* @__PURE__ */ import_react.default.createElement("pre", null, code));
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "code-block" }, /* @__PURE__ */ import_react.default.createElement(import_code_block_header.default, { icon: /* @__PURE__ */ import_react.default.createElement(import_code_block_icon.default, { language }), filename, code }), /* @__PURE__ */ import_react.default.createElement(import_code_block_code.default, { code, highlightedHtml: html }));
 }
 //# sourceMappingURL=code-block.js.map

package/dist/cjs/components/code-block/code-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-block/code-block.tsx"],"sourcesContent":["import React from 'react';\n\nimport CodeBlockHeader from './code-block-header';\nimport CodeBlockIcon from './code-block-icon';\nimport { highlighteCode } from './shiki';\n\nimport type { CodeBlockComponentProps } from '@hackersheet/react-document-content';\n\n/**\n * A component that renders a syntax-highlighted code block.\n *\n * The header displays a language icon, optional filename (extracted from the\n * colon-delimited language string), and a copy button.\n *\n * Uses Shiki for syntax highlighting. Falls back to a plain `<pre>` block\n * if highlighting fails.\n *\n * @param props - The component props\n * @param props.code - The source code to display\n * @param props.language - Language identifier, optionally with filename (e.g., \"typescript:example.ts\")\n * @returns The rendered code block element\n */\nexport default async function CodeBlock({ code, ...props }: CodeBlockComponentProps) {\n  const [language, filename] = props.language.split(':');\n\n  const html = await highlighteCode(code, language);\n\n  return (\n    <div className=\"code-block\">\n      <CodeBlockHeader icon={<CodeBlockIcon language={language} />} filename={filename} code={code} />\n      {html && <div dangerouslySetInnerHTML={{ __html: html }} />}\n      {!html && <pre>{code}</pre>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,+BAA4B;AAC5B,6BAA0B;AAC1B,mBAA+B;AAkB/B,eAAO,UAAiC,EAAE,MAAM,GAAG,MAAM,GAA4B;AACnF,QAAM,CAAC,UAAU,QAAQ,IAAI,MAAM,SAAS,MAAM,GAAG;AAErD,QAAM,OAAO,UAAM,6BAAe,MAAM,QAAQ;AAEhD,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAU,gBACb,6BAAAA,QAAA,cAAC,yBAAAC,SAAA,EAAgB,MAAM,6BAAAD,QAAA,cAAC,uBAAAE,SAAA,EAAc,UAAoB,GAAI,UAAoB,MAAY,GAC7F,QAAQ,6BAAAF,QAAA,cAAC,SAAI,yBAAyB,EAAE,QAAQ,KAAK,GAAG,GACxD,CAAC,QAAQ,6BAAAA,QAAA,cAAC,aAAK,IAAK,CACvB;AAEJ;","names":["React","CodeBlockHeader","CodeBlockIcon"]}
+{"version":3,"sources":["../../../../src/components/code-block/code-block.tsx"],"sourcesContent":["import React from 'react';\n\nimport CodeBlockCode from './code-block-code';\nimport CodeBlockHeader from './code-block-header';\nimport CodeBlockIcon from './code-block-icon';\nimport { highlighteCode } from './shiki';\n\nimport type { CodeBlockComponentProps } from '@hackersheet/react-document-content';\n\n/**\n * A component that renders a syntax-highlighted code block.\n *\n * The header displays a language icon, optional filename (extracted from the\n * colon-delimited language string), and a copy button.\n *\n * Uses Shiki for syntax highlighting. Falls back to a plain `<pre>` block\n * if highlighting fails.\n *\n * @param props - The component props\n * @param props.code - The source code to display\n * @param props.language - Language identifier, optionally with filename (e.g., \"typescript:example.ts\")\n * @returns The rendered code block element\n */\nexport default async function CodeBlock({ code, ...props }: CodeBlockComponentProps) {\n  const [language, filename] = props.language.split(':');\n\n  const html = await highlighteCode(code, language);\n\n  return (\n    <div className=\"code-block\">\n      <CodeBlockHeader icon={<CodeBlockIcon language={language} />} filename={filename} code={code} />\n      <CodeBlockCode code={code} highlightedHtml={html} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,6BAA0B;AAC1B,+BAA4B;AAC5B,6BAA0B;AAC1B,mBAA+B;AAkB/B,eAAO,UAAiC,EAAE,MAAM,GAAG,MAAM,GAA4B;AACnF,QAAM,CAAC,UAAU,QAAQ,IAAI,MAAM,SAAS,MAAM,GAAG;AAErD,QAAM,OAAO,UAAM,6BAAe,MAAM,QAAQ;AAEhD,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAU,gBACb,6BAAAA,QAAA,cAAC,yBAAAC,SAAA,EAAgB,MAAM,6BAAAD,QAAA,cAAC,uBAAAE,SAAA,EAAc,UAAoB,GAAI,UAAoB,MAAY,GAC9F,6BAAAF,QAAA,cAAC,uBAAAG,SAAA,EAAc,MAAY,iBAAiB,MAAM,CACpD;AAEJ;","names":["React","CodeBlockHeader","CodeBlockIcon","CodeBlockCode"]}

package/dist/cjs/components/code-block/shiki.js

@@ -57,10 +57,11 @@ async function highlighteCode(code, language) {
   });
   return html;
 }
+const additionalLanguages = [import("shiki/langs/mermaid.mjs")];
 const getShikiHighlighter = (0, import_react.cache)(async () => {
   return (0, import_web.getSingletonHighlighterCore)({
     themes: [import("@shikijs/themes/github-light"), import("@shikijs/themes/github-dark-dimmed")],
-    langs: Object.values(import_web.bundledLanguages),
+    langs: [...Object.values(import_web.bundledLanguages), ...additionalLanguages],
     engine: (0, import_javascript.createJavaScriptRegexEngine)()
   });
 });

package/dist/cjs/components/code-block/shiki.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-block/shiki.ts"],"sourcesContent":["import {\n  transformerNotationDiff,\n  transformerNotationWordHighlight,\n  transformerRemoveNotationEscape,\n  transformerNotationHighlight,\n} from '@shikijs/transformers';\nimport { cache } from 'react';\nimport { bundledLanguages, getSingletonHighlighterCore } from 'shiki/bundle/web';\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript';\n\nexport async function highlighteCode(code: string, language: string) {\n  const highlighter = await getShikiHighlighter();\n  const shikiLangs = highlighter.getLoadedLanguages();\n  const shikiLang = shikiLangs.find((lang) => lang === language);\n\n  if (shikiLang === undefined && language !== 'text') {\n    return null;\n  }\n\n  const html = highlighter.codeToHtml(code.trim(), {\n    lang: shikiLang || 'text',\n    themes: {\n      light: 'github-light',\n      dark: 'github-dark-dimmed',\n    },\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerRemoveNotationEscape(),\n    ],\n  });\n\n  return html;\n}\n\nconst getShikiHighlighter = cache(async () => {\n  return getSingletonHighlighterCore({\n    themes: [import('@shikijs/themes/github-light'), import('@shikijs/themes/github-dark-dimmed')],\n    langs: Object.values(bundledLanguages),\n    engine: createJavaScriptRegexEngine(),\n  });\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKO;AACP,mBAAsB;AACtB,iBAA8D;AAC9D,wBAA4C;AAE5C,eAAsB,eAAe,MAAc,UAAkB;AACnE,QAAM,cAAc,MAAM,oBAAoB;AAC9C,QAAM,aAAa,YAAY,mBAAmB;AAClD,QAAM,YAAY,WAAW,KAAK,CAAC,SAAS,SAAS,QAAQ;AAE7D,MAAI,cAAc,UAAa,aAAa,QAAQ;AAClD,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,YAAY,WAAW,KAAK,KAAK,GAAG;AAAA,IAC/C,MAAM,aAAa;AAAA,IACnB,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,cAAc;AAAA,UACZ,6CAAwB;AAAA,UACxB,kDAA6B;AAAA,UAC7B,sDAAiC;AAAA,UACjC,qDAAgC;AAAA,IAClC;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,0BAAsB,oBAAM,YAAY;AAC5C,aAAO,wCAA4B;AAAA,IACjC,QAAQ,CAAC,OAAO,8BAA8B,GAAG,OAAO,oCAAoC,CAAC;AAAA,IAC7F,OAAO,OAAO,OAAO,2BAAgB;AAAA,IACrC,YAAQ,+CAA4B;AAAA,EACtC,CAAC;AACH,CAAC;","names":[]}
+{"version":3,"sources":["../../../../src/components/code-block/shiki.ts"],"sourcesContent":["import {\n  transformerNotationDiff,\n  transformerNotationWordHighlight,\n  transformerRemoveNotationEscape,\n  transformerNotationHighlight,\n} from '@shikijs/transformers';\nimport { cache } from 'react';\nimport { bundledLanguages, getSingletonHighlighterCore } from 'shiki/bundle/web';\nimport { createJavaScriptRegexEngine } from 'shiki/engine/javascript';\n\nexport async function highlighteCode(code: string, language: string) {\n  const highlighter = await getShikiHighlighter();\n  const shikiLangs = highlighter.getLoadedLanguages();\n  const shikiLang = shikiLangs.find((lang) => lang === language);\n\n  if (shikiLang === undefined && language !== 'text') {\n    return null;\n  }\n\n  const html = highlighter.codeToHtml(code.trim(), {\n    lang: shikiLang || 'text',\n    themes: {\n      light: 'github-light',\n      dark: 'github-dark-dimmed',\n    },\n    transformers: [\n      transformerNotationDiff(),\n      transformerNotationHighlight(),\n      transformerNotationWordHighlight(),\n      transformerRemoveNotationEscape(),\n    ],\n  });\n\n  return html;\n}\n\n/**\n * Additional languages not included in the web bundle.\n * These are loaded dynamically to keep the initial bundle size small.\n */\nconst additionalLanguages = [import('shiki/langs/mermaid.mjs')];\n\nconst getShikiHighlighter = cache(async () => {\n  return getSingletonHighlighterCore({\n    themes: [import('@shikijs/themes/github-light'), import('@shikijs/themes/github-dark-dimmed')],\n    langs: [...Object.values(bundledLanguages), ...additionalLanguages],\n    engine: createJavaScriptRegexEngine(),\n  });\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKO;AACP,mBAAsB;AACtB,iBAA8D;AAC9D,wBAA4C;AAE5C,eAAsB,eAAe,MAAc,UAAkB;AACnE,QAAM,cAAc,MAAM,oBAAoB;AAC9C,QAAM,aAAa,YAAY,mBAAmB;AAClD,QAAM,YAAY,WAAW,KAAK,CAAC,SAAS,SAAS,QAAQ;AAE7D,MAAI,cAAc,UAAa,aAAa,QAAQ;AAClD,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,YAAY,WAAW,KAAK,KAAK,GAAG;AAAA,IAC/C,MAAM,aAAa;AAAA,IACnB,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,IACR;AAAA,IACA,cAAc;AAAA,UACZ,6CAAwB;AAAA,UACxB,kDAA6B;AAAA,UAC7B,sDAAiC;AAAA,UACjC,qDAAgC;AAAA,IAClC;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAMA,MAAM,sBAAsB,CAAC,OAAO,yBAAyB,CAAC;AAE9D,MAAM,0BAAsB,oBAAM,YAAY;AAC5C,aAAO,wCAA4B;AAAA,IACjC,QAAQ,CAAC,OAAO,8BAA8B,GAAG,OAAO,oCAAoC,CAAC;AAAA,IAC7F,OAAO,CAAC,GAAG,OAAO,OAAO,2BAAgB,GAAG,GAAG,mBAAmB;AAAA,IAClE,YAAQ,+CAA4B;AAAA,EACtC,CAAC;AACH,CAAC;","names":[]}

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

@@ -1,6 +1,14 @@
 export { default as Mermaid, default } from './mermaid.js';
+export { default as MermaidClient, MermaidClientProps } from './mermaid-client.js';
+export { MermaidDiagramView, MermaidDiagramViewProps } from './mermaid-diagram-view.js';
+export { MermaidDiagramContent, MermaidDiagramContentProps } from './mermaid-diagram-content.js';
+export { MermaidFullscreenModal, MermaidFullscreenModalProps } from './mermaid-fullscreen-modal.js';
+export { MermaidZoomControls, MermaidZoomControlsProps } from './mermaid-zoom-controls.js';
 export { hasValidSvgDimensions, normalizeCode } from './mermaid-utils.js';
 export { MermaidRenderResult, renderWithBeautifulMermaid } from './mermaid-renderer.js';
 export { destroyIframe, renderWithIframe } from './mermaid-iframe-renderer.js';
+export { PanZoomState, Position, UsePanZoomReturn, default as usePanZoom } from './use-pan-zoom.js';
+export { default as useBodyScrollLock } from './use-body-scroll-lock.js';
+export { default as useEscapeKey } from './use-escape-key.js';
 import 'react';
 import '@hackersheet/react-document-content';

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

@@ -29,26 +29,50 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var mermaid_exports = {};
 __export(mermaid_exports, {
   Mermaid: () => import_mermaid2.default,
+  MermaidClient: () => import_mermaid_client.default,
+  MermaidDiagramContent: () => import_mermaid_diagram_content.MermaidDiagramContent,
+  MermaidDiagramView: () => import_mermaid_diagram_view.MermaidDiagramView,
+  MermaidFullscreenModal: () => import_mermaid_fullscreen_modal.MermaidFullscreenModal,
+  MermaidZoomControls: () => import_mermaid_zoom_controls.MermaidZoomControls,
   default: () => import_mermaid.default,
   destroyIframe: () => import_mermaid_iframe_renderer.destroyIframe,
   hasValidSvgDimensions: () => import_mermaid_utils.hasValidSvgDimensions,
   normalizeCode: () => import_mermaid_utils.normalizeCode,
   renderWithBeautifulMermaid: () => import_mermaid_renderer.renderWithBeautifulMermaid,
-  renderWithIframe: () => import_mermaid_iframe_renderer.renderWithIframe
+  renderWithIframe: () => import_mermaid_iframe_renderer.renderWithIframe,
+  useBodyScrollLock: () => import_use_body_scroll_lock.useBodyScrollLock,
+  useEscapeKey: () => import_use_escape_key.useEscapeKey,
+  usePanZoom: () => import_use_pan_zoom.usePanZoom
 });
 module.exports = __toCommonJS(mermaid_exports);
 var import_mermaid = __toESM(require("./mermaid"));
 var import_mermaid2 = __toESM(require("./mermaid"));
+var import_mermaid_client = __toESM(require("./mermaid-client"));
+var import_mermaid_diagram_view = require("./mermaid-diagram-view");
+var import_mermaid_diagram_content = require("./mermaid-diagram-content");
+var import_mermaid_fullscreen_modal = require("./mermaid-fullscreen-modal");
+var import_mermaid_zoom_controls = require("./mermaid-zoom-controls");
 var import_mermaid_utils = require("./mermaid-utils");
 var import_mermaid_renderer = require("./mermaid-renderer");
 var import_mermaid_iframe_renderer = require("./mermaid-iframe-renderer");
+var import_use_pan_zoom = require("./use-pan-zoom");
+var import_use_body_scroll_lock = require("./use-body-scroll-lock");
+var import_use_escape_key = require("./use-escape-key");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Mermaid,
+  MermaidClient,
+  MermaidDiagramContent,
+  MermaidDiagramView,
+  MermaidFullscreenModal,
+  MermaidZoomControls,
   destroyIframe,
   hasValidSvgDimensions,
   normalizeCode,
   renderWithBeautifulMermaid,
-  renderWithIframe
+  renderWithIframe,
+  useBodyScrollLock,
+  useEscapeKey,
+  usePanZoom
 });
 //# 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 { 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"]}
+{"version":3,"sources":["../../../../src/components/mermaid/index.ts"],"sourcesContent":["/**\n * Mermaid diagram component and utilities.\n * @module\n */\n\n// Main components\nexport { default } from './mermaid';\nexport { default as Mermaid } from './mermaid';\nexport { default as MermaidClient } from './mermaid-client';\n\n// Sub-components\nexport { MermaidDiagramView } from './mermaid-diagram-view';\nexport { MermaidDiagramContent } from './mermaid-diagram-content';\nexport { MermaidFullscreenModal } from './mermaid-fullscreen-modal';\nexport { MermaidZoomControls } from './mermaid-zoom-controls';\n\n// Utilities\nexport { hasValidSvgDimensions, normalizeCode } from './mermaid-utils';\nexport { renderWithBeautifulMermaid } from './mermaid-renderer';\nexport { destroyIframe, renderWithIframe } from './mermaid-iframe-renderer';\n\n// Hooks\nexport { usePanZoom } from './use-pan-zoom';\nexport { useBodyScrollLock } from './use-body-scroll-lock';\nexport { useEscapeKey } from './use-escape-key';\n\n// Types\nexport type { MermaidRenderResult } from './mermaid-renderer';\nexport type { MermaidClientProps } from './mermaid-client';\nexport type { MermaidDiagramViewProps } from './mermaid-diagram-view';\nexport type { MermaidDiagramContentProps } from './mermaid-diagram-content';\nexport type { MermaidFullscreenModalProps } from './mermaid-fullscreen-modal';\nexport type { MermaidZoomControlsProps } from './mermaid-zoom-controls';\nexport type { PanZoomState, Position, UsePanZoomReturn } from './use-pan-zoom';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA,qBAAwB;AACxB,IAAAA,kBAAmC;AACnC,4BAAyC;AAGzC,kCAAmC;AACnC,qCAAsC;AACtC,sCAAuC;AACvC,mCAAoC;AAGpC,2BAAqD;AACrD,8BAA2C;AAC3C,qCAAgD;AAGhD,0BAA2B;AAC3B,kCAAkC;AAClC,4BAA6B;","names":["import_mermaid"]}

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

@@ -0,0 +1,36 @@
+import React from 'react';
+
+/**
+ * Props for the MermaidClient component.
+ */
+type MermaidClientProps = {
+    /** The mermaid diagram code */
+    code: string;
+    /** Pre-rendered HTML from Shiki highlighter for code view */
+    highlightedHtml?: string | null;
+};
+/**
+ * Client component for rendering Mermaid diagrams with interactive features.
+ *
+ * @remarks
+ * This component handles:
+ * - Diagram rendering using beautiful-mermaid with iframe fallback
+ * - Theme switching (light/dark)
+ * - Toggle between diagram and code view
+ * - Syntax-highlighted code display during loading
+ *
+ * Component architecture:
+ * - MermaidClient: Main controller for rendering and state management
+ * - MermaidDiagramView: Diagram display with pan/zoom (separate file)
+ * - MermaidFullscreenModal: Fullscreen view (separate file)
+ * - MermaidZoomControls: Reusable zoom buttons (memoized)
+ * - MermaidDiagramContent: SVG renderer (memoized)
+ *
+ * @param props - The component props
+ * @param props.code - The mermaid diagram code
+ * @param props.highlightedHtml - Pre-rendered HTML from Shiki highlighter
+ * @returns The rendered mermaid component
+ */
+declare function MermaidClient({ code, highlightedHtml }: MermaidClientProps): React.JSX.Element;
+
+export { type MermaidClientProps, MermaidClient as default };

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

@@ -0,0 +1,124 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var mermaid_client_exports = {};
+__export(mermaid_client_exports, {
+  default: () => MermaidClient
+});
+module.exports = __toCommonJS(mermaid_client_exports);
+var import_next_themes = require("next-themes");
+var import_react = __toESM(require("react"));
+var import_mermaid_diagram_view = require("./mermaid-diagram-view");
+var import_mermaid_iframe_renderer = require("./mermaid-iframe-renderer");
+var import_mermaid_renderer = require("./mermaid-renderer");
+var import_code_block_code = __toESM(require("../code-block/code-block-code"));
+var import_code_block_header = __toESM(require("../code-block/code-block-header"));
+var import_code_block_icon = __toESM(require("../code-block/code-block-icon"));
+function MermaidClient({ code, highlightedHtml }) {
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  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)();
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  const renderDiagram = (0, import_react.useCallback)(async () => {
+    const currentTheme = theme === "system" ? systemTheme : theme;
+    const isDark = currentTheme === "dark";
+    try {
+      const result2 = await (0, import_mermaid_renderer.renderWithBeautifulMermaid)(code, isDark);
+      if (result2) {
+        setRenderState({ status: "success", svg: result2 });
+        return;
+      }
+    } catch {
+    }
+    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, theme, systemTheme]);
+  (0, import_react.useEffect)(() => {
+    if (!mounted) {
+      return;
+    }
+    renderDiagram();
+  }, [mounted, renderDiagram]);
+  const toggleViewMode = (0, import_react.useCallback)(() => {
+    setViewMode((prev) => prev === "diagram" ? "code" : "diagram");
+  }, []);
+  const isLoading = !mounted || renderState.status === "loading";
+  const hasError = renderState.status === "error";
+  const showDiagram = viewMode === "diagram" && !hasError && !isLoading;
+  if (showDiagram) {
+    return /* @__PURE__ */ import_react.default.createElement(import_mermaid_diagram_view.MermaidDiagramView, { svg: renderState.svg, onToggleViewMode: toggleViewMode });
+  }
+  return /* @__PURE__ */ import_react.default.createElement(
+    MermaidCodeView,
+    {
+      code,
+      highlightedHtml,
+      hasError,
+      isLoading,
+      errorMessage: renderState.status === "error" ? renderState.message : void 0,
+      onToggleViewMode: toggleViewMode
+    }
+  );
+}
+function MermaidCodeView({
+  code,
+  highlightedHtml,
+  hasError,
+  isLoading,
+  errorMessage,
+  onToggleViewMode
+}) {
+  const toggleButton = /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onToggleViewMode,
+      className: "mermaid-toggle-btn",
+      title: "Show diagram",
+      disabled: hasError || isLoading
+    },
+    "Diagram"
+  );
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `code-block mermaid-block mermaid-code-view ${hasError ? "has-error" : ""} ${isLoading ? "is-loading" : ""}`
+    },
+    /* @__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 && errorMessage ? /* @__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, errorMessage)) : null, /* @__PURE__ */ import_react.default.createElement(import_code_block_code.default, { code, highlightedHtml }))
+  );
+}
+//# sourceMappingURL=mermaid-client.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/mermaid/mermaid-client.tsx"],"sourcesContent":["'use client';\n\nimport { useTheme } from 'next-themes';\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport { MermaidDiagramView } from './mermaid-diagram-view';\nimport { renderWithIframe } from './mermaid-iframe-renderer';\nimport { renderWithBeautifulMermaid } from './mermaid-renderer';\nimport CodeBlockCode from '../code-block/code-block-code';\nimport CodeBlockHeader from '../code-block/code-block-header';\nimport CodeBlockIcon from '../code-block/code-block-icon';\n\n/**\n * Props for the MermaidClient component.\n */\nexport type MermaidClientProps = {\n  /** The mermaid diagram code */\n  code: string;\n  /** Pre-rendered HTML from Shiki highlighter for code view */\n  highlightedHtml?: string | null;\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 * Client component for rendering Mermaid diagrams with interactive features.\n *\n * @remarks\n * This component handles:\n * - Diagram rendering using beautiful-mermaid with iframe fallback\n * - Theme switching (light/dark)\n * - Toggle between diagram and code view\n * - Syntax-highlighted code display during loading\n *\n * Component architecture:\n * - MermaidClient: Main controller for rendering and state management\n * - MermaidDiagramView: Diagram display with pan/zoom (separate file)\n * - MermaidFullscreenModal: Fullscreen view (separate file)\n * - MermaidZoomControls: Reusable zoom buttons (memoized)\n * - MermaidDiagramContent: SVG renderer (memoized)\n *\n * @param props - The component props\n * @param props.code - The mermaid diagram code\n * @param props.highlightedHtml - Pre-rendered HTML from Shiki highlighter\n * @returns The rendered mermaid component\n */\nexport default function MermaidClient({ code, highlightedHtml }: MermaidClientProps) {\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  const isLoading = !mounted || renderState.status === 'loading';\n  const hasError = renderState.status === 'error';\n  const showDiagram = viewMode === 'diagram' && !hasError && !isLoading;\n\n  if (showDiagram) {\n    return <MermaidDiagramView svg={renderState.svg} onToggleViewMode={toggleViewMode} />;\n  }\n\n  return (\n    <MermaidCodeView\n      code={code}\n      highlightedHtml={highlightedHtml}\n      hasError={hasError}\n      isLoading={isLoading}\n      errorMessage={renderState.status === 'error' ? renderState.message : undefined}\n      onToggleViewMode={toggleViewMode}\n    />\n  );\n}\n\n/**\n * Props for the MermaidCodeView component.\n */\ntype MermaidCodeViewProps = {\n  /** The mermaid diagram code */\n  code: string;\n  /** Pre-rendered HTML from Shiki highlighter */\n  highlightedHtml?: string | null;\n  /** Whether there is an error */\n  hasError: boolean;\n  /** Whether the diagram is loading */\n  isLoading: boolean;\n  /** Error message if hasError is true */\n  errorMessage?: string;\n  /** Callback to toggle view mode */\n  onToggleViewMode: () => void;\n};\n\n/**\n * Code view for Mermaid diagrams with syntax highlighting.\n *\n * @param props - The component props\n * @returns The code view component\n */\nfunction MermaidCodeView({\n  code,\n  highlightedHtml,\n  hasError,\n  isLoading,\n  errorMessage,\n  onToggleViewMode,\n}: MermaidCodeViewProps) {\n  const toggleButton = (\n    <button\n      type=\"button\"\n      onClick={onToggleViewMode}\n      className=\"mermaid-toggle-btn\"\n      title=\"Show diagram\"\n      disabled={hasError || isLoading}\n    >\n      Diagram\n    </button>\n  );\n\n  return (\n    <div\n      className={`code-block mermaid-block mermaid-code-view ${hasError ? 'has-error' : ''} ${isLoading ? 'is-loading' : ''}`}\n    >\n      <CodeBlockHeader icon={<CodeBlockIcon language=\"mermaid\" />} code={code} actions={toggleButton} />\n      <div className=\"mermaid-code\">\n        {hasError && errorMessage ? (\n          <div className=\"mermaid-error-message\">\n            <strong>Syntax Error</strong>\n            <span>{errorMessage}</span>\n          </div>\n        ) : null}\n        <CodeBlockCode code={code} highlightedHtml={highlightedHtml} />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["result","React","CodeBlockHeader","CodeBlockIcon","CodeBlockCode"]}

package/dist/cjs/components/mermaid/mermaid-diagram-content.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+
+/**
+ * Props for the MermaidDiagramContent component.
+ */
+type MermaidDiagramContentProps = {
+    /** The rendered SVG string */
+    svg: string;
+};
+/**
+ * Component for rendering the Mermaid diagram SVG.
+ *
+ * @remarks
+ * This component is memoized to prevent unnecessary re-renders
+ * when only the SVG content matters. Uses dangerouslySetInnerHTML
+ * to render the pre-rendered SVG string from Mermaid.
+ *
+ * @param props - The component props
+ * @param props.svg - The rendered SVG string
+ * @returns The diagram content
+ */
+declare function MermaidDiagramContentComponent({ svg }: MermaidDiagramContentProps): React.JSX.Element;
+declare const MermaidDiagramContent: React.MemoExoticComponent<typeof MermaidDiagramContentComponent>;
+
+export { MermaidDiagramContent, type MermaidDiagramContentProps, MermaidDiagramContent as default };

package/dist/cjs/components/mermaid/mermaid-diagram-content.js

@@ -0,0 +1,46 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var mermaid_diagram_content_exports = {};
+__export(mermaid_diagram_content_exports, {
+  MermaidDiagramContent: () => MermaidDiagramContent,
+  default: () => mermaid_diagram_content_default
+});
+module.exports = __toCommonJS(mermaid_diagram_content_exports);
+var import_react = __toESM(require("react"));
+function MermaidDiagramContentComponent({ svg }) {
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "mermaid-diagram", dangerouslySetInnerHTML: { __html: svg } });
+}
+const MermaidDiagramContent = (0, import_react.memo)(MermaidDiagramContentComponent);
+var mermaid_diagram_content_default = MermaidDiagramContent;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MermaidDiagramContent
+});
+//# sourceMappingURL=mermaid-diagram-content.js.map

package/dist/cjs/components/mermaid/mermaid-diagram-content.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/mermaid/mermaid-diagram-content.tsx"],"sourcesContent":["'use client';\n\nimport React, { memo } from 'react';\n\n/**\n * Props for the MermaidDiagramContent component.\n */\nexport type MermaidDiagramContentProps = {\n  /** The rendered SVG string */\n  svg: string;\n};\n\n/**\n * Component for rendering the Mermaid diagram SVG.\n *\n * @remarks\n * This component is memoized to prevent unnecessary re-renders\n * when only the SVG content matters. Uses dangerouslySetInnerHTML\n * to render the pre-rendered SVG string from Mermaid.\n *\n * @param props - The component props\n * @param props.svg - The rendered SVG string\n * @returns The diagram content\n */\nfunction MermaidDiagramContentComponent({ svg }: MermaidDiagramContentProps) {\n  return <div className=\"mermaid-diagram\" dangerouslySetInnerHTML={{ __html: svg }} />;\n}\n\nexport const MermaidDiagramContent = memo(MermaidDiagramContentComponent);\n\nexport default MermaidDiagramContent;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA4B;AAsB5B,SAAS,+BAA+B,EAAE,IAAI,GAA+B;AAC3E,SAAO,6BAAAA,QAAA,cAAC,SAAI,WAAU,mBAAkB,yBAAyB,EAAE,QAAQ,IAAI,GAAG;AACpF;AAEO,MAAM,4BAAwB,mBAAK,8BAA8B;AAExE,IAAO,kCAAQ;","names":["React"]}

package/dist/cjs/components/mermaid/mermaid-diagram-view.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+
+/**
+ * Props for the MermaidDiagramView component.
+ */
+type MermaidDiagramViewProps = {
+    /** The rendered SVG string */
+    svg: string;
+    /** Callback to toggle between diagram and code view */
+    onToggleViewMode: () => void;
+};
+/**
+ * Component for displaying Mermaid diagrams with pan and zoom functionality.
+ *
+ * @remarks
+ * This component provides:
+ * - Zoom in/out using mouse wheel (Ctrl/Cmd + wheel) or buttons
+ * - Pan by dragging when zoomed in
+ * - Double-click to reset zoom
+ * - Keyboard shortcuts (+/- for zoom, Ctrl+0 for reset)
+ * - Fullscreen modal view
+ * - Resizable container
+ *
+ * @param props - The component props
+ * @param props.svg - The rendered SVG string
+ * @param props.onToggleViewMode - Callback to toggle view mode
+ * @returns The rendered diagram view with pan/zoom controls
+ */
+declare function MermaidDiagramViewComponent({ svg, onToggleViewMode }: MermaidDiagramViewProps): React.JSX.Element;
+declare const MermaidDiagramView: React.MemoExoticComponent<typeof MermaidDiagramViewComponent>;
+
+export { MermaidDiagramView, type MermaidDiagramViewProps, MermaidDiagramView as default };

package/dist/cjs/components/mermaid/mermaid-diagram-view.js

@@ -0,0 +1,88 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var mermaid_diagram_view_exports = {};
+__export(mermaid_diagram_view_exports, {
+  MermaidDiagramView: () => MermaidDiagramView,
+  default: () => mermaid_diagram_view_default
+});
+module.exports = __toCommonJS(mermaid_diagram_view_exports);
+var import_react = __toESM(require("react"));
+var import_mermaid_diagram_content = require("./mermaid-diagram-content");
+var import_mermaid_fullscreen_modal = require("./mermaid-fullscreen-modal");
+var import_mermaid_zoom_controls = require("./mermaid-zoom-controls");
+var import_use_pan_zoom = require("./use-pan-zoom");
+function MermaidDiagramViewComponent({ svg, onToggleViewMode }) {
+  const { containerRef, contentRef, state, zoomIn, zoomOut, reset, isDragging, isZoomed } = (0, import_use_pan_zoom.usePanZoom)();
+  const [isFullscreen, setIsFullscreen] = (0, import_react.useState)(false);
+  const cursorStyle = isDragging ? "grabbing" : isZoomed ? "grab" : "default";
+  const openFullscreen = (0, import_react.useCallback)(() => {
+    setIsFullscreen(true);
+  }, []);
+  const closeFullscreen = (0, import_react.useCallback)(() => {
+    setIsFullscreen(false);
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "mermaid-block mermaid-diagram-view" }, /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: "mermaid-pan-zoom-container", tabIndex: 0, style: { cursor: cursorStyle } }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: contentRef,
+      className: "mermaid-pan-zoom-content",
+      style: {
+        transform: `translate(${state.position.x}px, ${state.position.y}px) scale(${state.scale})`
+      }
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_mermaid_diagram_content.MermaidDiagramContent, { svg })
+  )), /* @__PURE__ */ import_react.default.createElement("div", { className: "mermaid-controls" }, /* @__PURE__ */ import_react.default.createElement(
+    import_mermaid_zoom_controls.MermaidZoomControls,
+    {
+      onZoomIn: zoomIn,
+      onZoomOut: zoomOut,
+      onReset: reset,
+      isZoomed,
+      onFullscreen: openFullscreen
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: onToggleViewMode,
+      className: "mermaid-toggle-btn",
+      title: "Show code",
+      "aria-label": "Show code"
+    },
+    "Code"
+  )), isFullscreen ? /* @__PURE__ */ import_react.default.createElement(import_mermaid_fullscreen_modal.MermaidFullscreenModal, { svg, onClose: closeFullscreen }) : null);
+}
+const MermaidDiagramView = (0, import_react.memo)(MermaidDiagramViewComponent);
+var mermaid_diagram_view_default = MermaidDiagramView;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MermaidDiagramView
+});
+//# sourceMappingURL=mermaid-diagram-view.js.map

package/dist/cjs/components/mermaid/mermaid-diagram-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/mermaid/mermaid-diagram-view.tsx"],"sourcesContent":["'use client';\n\nimport React, { memo, useCallback, useState } from 'react';\n\nimport { MermaidDiagramContent } from './mermaid-diagram-content';\nimport { MermaidFullscreenModal } from './mermaid-fullscreen-modal';\nimport { MermaidZoomControls } from './mermaid-zoom-controls';\nimport { usePanZoom } from './use-pan-zoom';\n\n/**\n * Props for the MermaidDiagramView component.\n */\nexport type MermaidDiagramViewProps = {\n  /** The rendered SVG string */\n  svg: string;\n  /** Callback to toggle between diagram and code view */\n  onToggleViewMode: () => void;\n};\n\n/**\n * Component for displaying Mermaid diagrams with pan and zoom functionality.\n *\n * @remarks\n * This component provides:\n * - Zoom in/out using mouse wheel (Ctrl/Cmd + wheel) or buttons\n * - Pan by dragging when zoomed in\n * - Double-click to reset zoom\n * - Keyboard shortcuts (+/- for zoom, Ctrl+0 for reset)\n * - Fullscreen modal view\n * - Resizable container\n *\n * @param props - The component props\n * @param props.svg - The rendered SVG string\n * @param props.onToggleViewMode - Callback to toggle view mode\n * @returns The rendered diagram view with pan/zoom controls\n */\nfunction MermaidDiagramViewComponent({ svg, onToggleViewMode }: MermaidDiagramViewProps) {\n  const { containerRef, contentRef, state, zoomIn, zoomOut, reset, isDragging, isZoomed } = usePanZoom();\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const cursorStyle = isDragging ? 'grabbing' : isZoomed ? 'grab' : 'default';\n\n  const openFullscreen = useCallback(() => {\n    setIsFullscreen(true);\n  }, []);\n\n  const closeFullscreen = useCallback(() => {\n    setIsFullscreen(false);\n  }, []);\n\n  return (\n    <div className=\"mermaid-block mermaid-diagram-view\">\n      <div ref={containerRef} className=\"mermaid-pan-zoom-container\" tabIndex={0} style={{ cursor: cursorStyle }}>\n        <div\n          ref={contentRef}\n          className=\"mermaid-pan-zoom-content\"\n          style={{\n            transform: `translate(${state.position.x}px, ${state.position.y}px) scale(${state.scale})`,\n          }}\n        >\n          <MermaidDiagramContent svg={svg} />\n        </div>\n      </div>\n      <div className=\"mermaid-controls\">\n        <MermaidZoomControls\n          onZoomIn={zoomIn}\n          onZoomOut={zoomOut}\n          onReset={reset}\n          isZoomed={isZoomed}\n          onFullscreen={openFullscreen}\n        />\n        <button\n          type=\"button\"\n          onClick={onToggleViewMode}\n          className=\"mermaid-toggle-btn\"\n          title=\"Show code\"\n          aria-label=\"Show code\"\n        >\n          Code\n        </button>\n      </div>\n      {isFullscreen ? <MermaidFullscreenModal svg={svg} onClose={closeFullscreen} /> : null}\n    </div>\n  );\n}\n\nexport const MermaidDiagramView = memo(MermaidDiagramViewComponent);\n\nexport default MermaidDiagramView;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAmD;AAEnD,qCAAsC;AACtC,sCAAuC;AACvC,mCAAoC;AACpC,0BAA2B;AA6B3B,SAAS,4BAA4B,EAAE,KAAK,iBAAiB,GAA4B;AACvF,QAAM,EAAE,cAAc,YAAY,OAAO,QAAQ,SAAS,OAAO,YAAY,SAAS,QAAI,gCAAW;AACrG,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAEtD,QAAM,cAAc,aAAa,aAAa,WAAW,SAAS;AAElE,QAAM,qBAAiB,0BAAY,MAAM;AACvC,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB,0BAAY,MAAM;AACxC,oBAAgB,KAAK;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,SACE,6BAAAA,QAAA,cAAC,SAAI,WAAU,wCACb,6BAAAA,QAAA,cAAC,SAAI,KAAK,cAAc,WAAU,8BAA6B,UAAU,GAAG,OAAO,EAAE,QAAQ,YAAY,KACvG,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,OAAO;AAAA,QACL,WAAW,aAAa,MAAM,SAAS,CAAC,OAAO,MAAM,SAAS,CAAC,aAAa,MAAM,KAAK;AAAA,MACzF;AAAA;AAAA,IAEA,6BAAAA,QAAA,cAAC,wDAAsB,KAAU;AAAA,EACnC,CACF,GACA,6BAAAA,QAAA,cAAC,SAAI,WAAU,sBACb,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,cAAc;AAAA;AAAA,EAChB,GACA,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,MACV,OAAM;AAAA,MACN,cAAW;AAAA;AAAA,IACZ;AAAA,EAED,CACF,GACC,eAAe,6BAAAA,QAAA,cAAC,0DAAuB,KAAU,SAAS,iBAAiB,IAAK,IACnF;AAEJ;AAEO,MAAM,yBAAqB,mBAAK,2BAA2B;AAElE,IAAO,+BAAQ;","names":["React"]}