@san-siva/blogkit 1.1.35 → 1.1.37

package/dist/assets/collapse.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg width="800px" height="800px" viewBox="0 0 48 48" fill="#313030" xmlns="http://www.w3.org/2000/svg">
+  <title>collapse-fullscreen</title>
+  <g id="Layer_2" data-name="Layer 2">
+    <g id="invisible_box" data-name="invisible box">
+      <rect width="48" height="48" fill="none"/>
+    </g>
+    <g id="icons_Q2" data-name="icons Q2">
+      <g>
+        <path d="M8,26a2,2,0,0,0-2,2.3A2.1,2.1,0,0,0,8.1,30h7.1L4.7,40.5a2,2,0,0,0-.2,2.8A1.8,1.8,0,0,0,6,44a2,2,0,0,0,1.4-.6L18,32.8v7.1A2.1,2.1,0,0,0,19.7,42,2,2,0,0,0,22,40V28a2,2,0,0,0-2-2Z"/>
+        <path d="M43.7,4.8a2,2,0,0,0-3.1-.2L30,15.2V8.1A2.1,2.1,0,0,0,28.3,6,2,2,0,0,0,26,8V20a2,2,0,0,0,2,2H39.9A2.1,2.1,0,0,0,42,20.3,2,2,0,0,0,40,18H32.8L43.4,7.5A2.3,2.3,0,0,0,43.7,4.8Z"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/assets/expand.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-2 -2 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 10L21 3M21 3H16.5M21 3V7.5M10 14L3 21M3 21H7.5M3 21L3 16.5" stroke="#313030" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/assets/reset.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#313030" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
+    <path d="M960 0v213.333c411.627 0 746.667 334.934 746.667 746.667S1371.627 1706.667 960 1706.667 213.333 1371.733 213.333 960c0-197.013 78.4-382.507 213.334-520.747v254.08H640V106.667H53.333V320h191.04C88.64 494.08 0 720.96 0 960c0 529.28 430.613 960 960 960s960-430.72 960-960S1489.387 0 960 0" fill-rule="evenodd"/>
+</svg>

package/dist/assets/zoom-in.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-1 -1 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    
+    <title>zoom-in</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-308.000000, -1139.000000)" fill="#313030" stroke="#313030" stroke-width="1.5" stroke-linejoin="round">
+            <path d="M321.46,1163.45 C315.17,1163.45 310.07,1158.44 310.07,1152.25 C310.07,1146.06 315.17,1141.04 321.46,1141.04 C327.75,1141.04 332.85,1146.06 332.85,1152.25 C332.85,1158.44 327.75,1163.45 321.46,1163.45 L321.46,1163.45 Z M339.688,1169.25 L331.429,1161.12 C333.592,1158.77 334.92,1155.67 334.92,1152.25 C334.92,1144.93 328.894,1139 321.46,1139 C314.026,1139 308,1144.93 308,1152.25 C308,1159.56 314.026,1165.49 321.46,1165.49 C324.672,1165.49 327.618,1164.38 329.932,1162.53 L338.225,1170.69 C338.629,1171.09 339.284,1171.09 339.688,1170.69 C340.093,1170.3 340.093,1169.65 339.688,1169.25 L339.688,1169.25 Z M326.519,1151.41 L322.522,1151.41 L322.522,1147.41 C322.522,1146.85 322.075,1146.41 321.523,1146.41 C320.972,1146.41 320.524,1146.85 320.524,1147.41 L320.524,1151.41 L316.529,1151.41 C315.978,1151.41 315.53,1151.59 315.53,1152.14 C315.53,1152.7 315.978,1153.41 316.529,1153.41 L320.524,1153.41 L320.524,1157.41 C320.524,1157.97 320.972,1158.41 321.523,1158.41 C322.075,1158.41 322.522,1157.97 322.522,1157.41 L322.522,1153.41 L326.519,1153.41 C327.07,1153.41 327.518,1152.96 327.518,1152.41 C327.518,1151.86 327.07,1151.41 326.519,1151.41 L326.519,1151.41 Z" id="zoom-in" sketch:type="MSShapeGroup">
+
+</path>
+        </g>
+    </g>
+</svg>

package/dist/assets/zoom-out.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-1 -1 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    
+    <title>zoom-out</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-360.000000, -1139.000000)" fill="#313030" stroke="#313030" stroke-width="1.5" stroke-linejoin="round">
+            <path d="M373.46,1163.45 C367.17,1163.45 362.071,1158.44 362.071,1152.25 C362.071,1146.06 367.17,1141.04 373.46,1141.04 C379.75,1141.04 384.85,1146.06 384.85,1152.25 C384.85,1158.44 379.75,1163.45 373.46,1163.45 L373.46,1163.45 Z M391.688,1169.25 L383.429,1161.12 C385.592,1158.77 386.92,1155.67 386.92,1152.25 C386.92,1144.93 380.894,1139 373.46,1139 C366.026,1139 360,1144.93 360,1152.25 C360,1159.56 366.026,1165.49 373.46,1165.49 C376.672,1165.49 379.618,1164.38 381.932,1162.53 L390.225,1170.69 C390.629,1171.09 391.284,1171.09 391.688,1170.69 C392.093,1170.3 392.093,1169.65 391.688,1169.25 L391.688,1169.25 Z M378.689,1151.41 L368.643,1151.41 C368.102,1151.41 367.663,1151.84 367.663,1152.37 C367.663,1152.9 368.102,1153.33 368.643,1153.33 L378.689,1153.33 C379.23,1153.33 379.669,1152.9 379.669,1152.37 C379.669,1151.84 379.23,1151.41 378.689,1151.41 L378.689,1151.41 Z" id="zoom-out" sketch:type="MSShapeGroup">
+
+</path>
+        </g>
+    </g>
+</svg>

package/dist/cjs/components/MermaidControls.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var Mermaid_module = require('../styles/Mermaid.module.scss.js');
+
+const MermaidControls = ({ className, isExpanded, onZoomIn, onZoomOut, onReset, onToggleExpand, }) => {
+    const toggleLabel = isExpanded ? 'Close fullscreen' : 'Expand to fullscreen';
+    const toggleModifier = isExpanded
+        ? Mermaid_module.default['mermaid__controls__btn--collapse']
+        : Mermaid_module.default['mermaid__controls__btn--expand'];
+    return (jsxRuntime.jsxs("div", { className: className, children: [jsxRuntime.jsx("button", { className: `${Mermaid_module.default['mermaid__controls__btn']} ${Mermaid_module.default['mermaid__controls__btn--zoom-in']}`, onClick: onZoomIn, "aria-label": "Zoom in", title: "Zoom in" }), jsxRuntime.jsx("button", { className: `${Mermaid_module.default['mermaid__controls__btn']} ${Mermaid_module.default['mermaid__controls__btn--zoom-out']}`, onClick: onZoomOut, "aria-label": "Zoom out", title: "Zoom out" }), jsxRuntime.jsx("button", { className: `${Mermaid_module.default['mermaid__controls__btn']} ${Mermaid_module.default['mermaid__controls__btn--reset']}`, onClick: onReset, "aria-label": "Reset view", title: "Reset view" }), jsxRuntime.jsx("button", { className: `${Mermaid_module.default['mermaid__controls__btn']} ${toggleModifier}`, onClick: onToggleExpand, "aria-label": toggleLabel, title: toggleLabel })] }));
+};
+
+exports.default = MermaidControls;
+//# sourceMappingURL=MermaidControls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidControls.js","sources":["../../../src/components/MermaidControls.tsx"],"sourcesContent":["import styles from '../styles/Mermaid.module.scss';\n\ninterface MermaidControlsProps {\n\tclassName: string;\n\tisExpanded: boolean;\n\tonZoomIn: () => void;\n\tonZoomOut: () => void;\n\tonReset: () => void;\n\tonToggleExpand: () => void;\n}\n\nconst MermaidControls = ({\n\tclassName,\n\tisExpanded,\n\tonZoomIn,\n\tonZoomOut,\n\tonReset,\n\tonToggleExpand,\n}: MermaidControlsProps) => {\n\tconst toggleLabel = isExpanded ? 'Close fullscreen' : 'Expand to fullscreen';\n\tconst toggleModifier = isExpanded\n\t\t? styles['mermaid__controls__btn--collapse']\n\t\t: styles['mermaid__controls__btn--expand'];\n\treturn (\n\t\t<div className={className}>\n\t\t\t<button\n\t\t\t\tclassName={`${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--zoom-in']}`}\n\t\t\t\tonClick={onZoomIn}\n\t\t\t\taria-label=\"Zoom in\"\n\t\t\t\ttitle=\"Zoom in\"\n\t\t\t/>\n\t\t\t<button\n\t\t\t\tclassName={`${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--zoom-out']}`}\n\t\t\t\tonClick={onZoomOut}\n\t\t\t\taria-label=\"Zoom out\"\n\t\t\t\ttitle=\"Zoom out\"\n\t\t\t/>\n\t\t\t<button\n\t\t\t\tclassName={`${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--reset']}`}\n\t\t\t\tonClick={onReset}\n\t\t\t\taria-label=\"Reset view\"\n\t\t\t\ttitle=\"Reset view\"\n\t\t\t/>\n\t\t\t<button\n\t\t\t\tclassName={`${styles['mermaid__controls__btn']} ${toggleModifier}`}\n\t\t\t\tonClick={onToggleExpand}\n\t\t\t\taria-label={toggleLabel}\n\t\t\t\ttitle={toggleLabel}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\nexport default MermaidControls;\n"],"names":["styles","_jsxs","_jsx"],"mappings":";;;;;;;AAWA,MAAM,eAAe,GAAG,CAAC,EACxB,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,cAAc,GACQ,KAAI;IAC1B,MAAM,WAAW,GAAG,UAAU,GAAG,kBAAkB,GAAG,sBAAsB;IAC5E,MAAM,cAAc,GAAG;AACtB,UAAEA,sBAAM,CAAC,kCAAkC;AAC3C,UAAEA,sBAAM,CAAC,gCAAgC,CAAC;IAC3C,QACCC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,SAAS,aACxBC,cAAA,CAAA,QAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGF,sBAAM,CAAC,wBAAwB,CAAC,CAAA,CAAA,EAAIA,sBAAM,CAAC,iCAAiC,CAAC,EAAE,EAC7F,OAAO,EAAE,QAAQ,EAAA,YAAA,EACN,SAAS,EACpB,KAAK,EAAC,SAAS,EAAA,CACd,EACFE,cAAA,CAAA,QAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGF,sBAAM,CAAC,wBAAwB,CAAC,IAAIA,sBAAM,CAAC,kCAAkC,CAAC,CAAA,CAAE,EAC9F,OAAO,EAAE,SAAS,EAAA,YAAA,EACP,UAAU,EACrB,KAAK,EAAC,UAAU,EAAA,CACf,EACFE,cAAA,CAAA,QAAA,EAAA,EACC,SAAS,EAAE,GAAGF,sBAAM,CAAC,wBAAwB,CAAC,CAAA,CAAA,EAAIA,sBAAM,CAAC,+BAA+B,CAAC,CAAA,CAAE,EAC3F,OAAO,EAAE,OAAO,EAAA,YAAA,EACL,YAAY,EACvB,KAAK,EAAC,YAAY,GACjB,EACFE,cAAA,CAAA,QAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGF,sBAAM,CAAC,wBAAwB,CAAC,CAAA,CAAA,EAAI,cAAc,CAAA,CAAE,EAClE,OAAO,EAAE,cAAc,EAAA,YAAA,EACX,WAAW,EACvB,KAAK,EAAE,WAAW,EAAA,CACjB,CAAA,EAAA,CACG;AAER;;;;"}

package/dist/cjs/components/MermaidViewport.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const MermaidViewport = ({ className, draggingClassName, pan, contentRef, contentId, hidden, }) => {
+    const viewportRef = react.useRef(null);
+    const { zoomAtPoint } = pan;
+    react.useEffect(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            if (!e.ctrlKey)
+                return;
+            e.preventDefault();
+            const rect = el.getBoundingClientRect();
+            zoomAtPoint(e.deltaY, e.clientX - rect.left, e.clientY - rect.top);
+        };
+        el.addEventListener('wheel', onWheel, { passive: false });
+        return () => el.removeEventListener('wheel', onWheel);
+    }, [zoomAtPoint]);
+    return (jsxRuntime.jsx("div", { ref: viewportRef, className: `${className} ${pan.isDragging ? draggingClassName : ''}`, style: hidden ? { display: 'none' } : undefined, onMouseDown: pan.onMouseDown, onMouseMove: pan.onMouseMove, onMouseUp: pan.onMouseUp, onMouseLeave: pan.onMouseUp, children: jsxRuntime.jsx("div", { style: {
+                transform: `translate(${pan.transform.x}px, ${pan.transform.y}px) scale(${pan.transform.scale})`,
+                transformOrigin: '0 0',
+                transition: pan.isDragging ? 'none' : 'transform 0.1s ease',
+            }, children: jsxRuntime.jsx("div", { ref: contentRef, id: contentId }) }) }));
+};
+
+exports.default = MermaidViewport;
+//# sourceMappingURL=MermaidViewport.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidViewport.js","sources":["../../../src/components/MermaidViewport.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { PanZoom } from '../hooks/usePanZoom';\n\ninterface MermaidViewportProps {\n\tclassName: string;\n\tdraggingClassName: string;\n\tpan: PanZoom;\n\tcontentRef: React.RefObject<HTMLDivElement>;\n\tcontentId?: string;\n\thidden?: boolean;\n}\n\nconst MermaidViewport = ({\n\tclassName,\n\tdraggingClassName,\n\tpan,\n\tcontentRef,\n\tcontentId,\n\thidden,\n}: MermaidViewportProps) => {\n\tconst viewportRef = useRef<HTMLDivElement>(null);\n\tconst { zoomAtPoint } = pan;\n\n\tuseEffect(() => {\n\t\tconst el = viewportRef.current;\n\t\tif (!el) return;\n\t\tconst onWheel = (e: WheelEvent) => {\n\t\t\tif (!e.ctrlKey) return;\n\t\t\te.preventDefault();\n\t\t\tconst rect = el.getBoundingClientRect();\n\t\t\tzoomAtPoint(e.deltaY, e.clientX - rect.left, e.clientY - rect.top);\n\t\t};\n\t\tel.addEventListener('wheel', onWheel, { passive: false });\n\t\treturn () => el.removeEventListener('wheel', onWheel);\n\t}, [zoomAtPoint]);\n\n\treturn (\n\t\t<div\n\t\t\tref={viewportRef}\n\t\t\tclassName={`${className} ${pan.isDragging ? draggingClassName : ''}`}\n\t\t\tstyle={hidden ? { display: 'none' } : undefined}\n\t\t\tonMouseDown={pan.onMouseDown}\n\t\t\tonMouseMove={pan.onMouseMove}\n\t\t\tonMouseUp={pan.onMouseUp}\n\t\t\tonMouseLeave={pan.onMouseUp}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\ttransform: `translate(${pan.transform.x}px, ${pan.transform.y}px) scale(${pan.transform.scale})`,\n\t\t\t\t\ttransformOrigin: '0 0',\n\t\t\t\t\ttransition: pan.isDragging ? 'none' : 'transform 0.1s ease',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div ref={contentRef} id={contentId} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default MermaidViewport;\n"],"names":["useRef","useEffect","_jsx"],"mappings":";;;;;;;AAaA,MAAM,eAAe,GAAG,CAAC,EACxB,SAAS,EACT,iBAAiB,EACjB,GAAG,EACH,UAAU,EACV,SAAS,EACT,MAAM,GACgB,KAAI;AAC1B,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAChD,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,GAAG;IAE3BC,eAAS,CAAC,MAAK;AACd,QAAA,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,EAAE;YAAE;AACT,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YACjC,IAAI,CAAC,CAAC,CAAC,OAAO;gBAAE;YAChB,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE;YACvC,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;AACnE,QAAA,CAAC;AACD,QAAA,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACzD,OAAO,MAAM,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AACtD,IAAA,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjB,IAAA,QACCC,cAAA,CAAA,KAAA,EAAA,EACC,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,CAAA,EAAG,SAAS,CAAA,CAAA,EAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EACpE,KAAK,EAAE,MAAM,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAC/C,WAAW,EAAE,GAAG,CAAC,WAAW,EAC5B,WAAW,EAAE,GAAG,CAAC,WAAW,EAC5B,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,YAAY,EAAE,GAAG,CAAC,SAAS,EAAA,QAAA,EAE3BA,cAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAE;AACN,gBAAA,SAAS,EAAE,CAAA,UAAA,EAAa,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,IAAA,EAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,UAAA,EAAa,GAAG,CAAC,SAAS,CAAC,KAAK,CAAA,CAAA,CAAG;AAChG,gBAAA,eAAe,EAAE,KAAK;gBACtB,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,qBAAqB;AAC3D,aAAA,EAAA,QAAA,EAEDA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAA,CAAI,EAAA,CAClC,EAAA,CACD;AAER;;;;"}

package/dist/cjs/dynamicComponents/CodeBlockDynamic.js

@@ -5,14 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var reactDom = require('react-dom');
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
 var prism = require('react-syntax-highlighter/dist/esm/styles/prism');
 require('prismjs/themes/prism-tomorrow.css');
 var CodeBlock_module = require('../styles/CodeBlock.module.scss.js');
 
 const SH = reactSyntaxHighlighter.Prism;
+const lineNumberStyle = {
+    color: '#95a1b1',
+    fontSize: '0.9em',
+    paddingRight: '1em',
+    marginRight: '8px',
+};
 const CodeBlock = ({ language = 'javascript', code = '', hasMarginUp = false, hasMarginDown = false, }) => {
     const [isCopyMode, setCopyMode] = react.useState(false);
+    const [isExpanded, setIsExpanded] = react.useState(false);
     const copyToClipboard = async () => {
         try {
             await navigator.clipboard.writeText(code);
@@ -25,13 +33,26 @@ const CodeBlock = ({ language = 'javascript', code = '', hasMarginUp = false, ha
             console.error('Failed to copy:', error);
         }
     };
-    const lineNumberStyle = {
-        color: '#95a1b1',
-        fontSize: '0.9em',
-        paddingRight: '1em',
-        marginRight: '8px',
-    };
-    return (jsxRuntime.jsxs("div", { className: `${CodeBlock_module.default['code-block']} ${hasMarginUp ? CodeBlock_module.default['margin-top--1'] : ''} ${hasMarginDown ? CodeBlock_module.default['margin-bottom--2'] : ''}`, children: [jsxRuntime.jsxs("div", { className: CodeBlock_module.default['code-block__header'], children: [jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__header__title'], children: language }), jsxRuntime.jsx("div", { className: `${CodeBlock_module.default['code-block__header__copy']} ${isCopyMode ? CodeBlock_module.default['code-block__header__copy--active'] : ''}`, onClick: copyToClipboard })] }), jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__wrapper'], children: jsxRuntime.jsx(SH, { language: language, style: prism.dracula, showLineNumbers: true, lineNumberStyle: lineNumberStyle, children: code }) })] }));
+    react.useEffect(() => {
+        if (!isExpanded)
+            return;
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                setIsExpanded(false);
+        };
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        window.addEventListener('keydown', onKey);
+        return () => {
+            document.body.style.overflow = previousOverflow;
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [isExpanded]);
+    const renderHeader = (expanded) => (jsxRuntime.jsxs("div", { className: CodeBlock_module.default['code-block__header'], children: [jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__header__title'], children: language }), jsxRuntime.jsxs("div", { className: CodeBlock_module.default['code-block__header__actions'], children: [jsxRuntime.jsx("div", { className: `${CodeBlock_module.default['code-block__header__expand']} ${expanded ? CodeBlock_module.default['code-block__header__expand--collapse'] : ''}`, onClick: () => setIsExpanded(!expanded), role: "button", "aria-label": expanded ? 'Close fullscreen' : 'Expand to fullscreen', title: expanded ? 'Close fullscreen' : 'Expand to fullscreen' }), jsxRuntime.jsx("div", { className: `${CodeBlock_module.default['code-block__header__copy']} ${isCopyMode ? CodeBlock_module.default['code-block__header__copy--active'] : ''}`, onClick: copyToClipboard, role: "button", "aria-label": "Copy code", title: "Copy code" })] })] }));
+    const renderHighlighter = () => (jsxRuntime.jsx(SH, { language: language, style: prism.dracula, showLineNumbers: true, lineNumberStyle: lineNumberStyle, children: code }));
+    return (jsxRuntime.jsxs("div", { className: `${CodeBlock_module.default['code-block']} ${hasMarginUp ? CodeBlock_module.default['margin-top--1'] : ''} ${hasMarginDown ? CodeBlock_module.default['margin-bottom--2'] : ''}`, children: [renderHeader(false), jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__wrapper'], children: renderHighlighter() }), isExpanded &&
+                typeof document !== 'undefined' &&
+                reactDom.createPortal(jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__modal'], onClick: () => setIsExpanded(false), role: "dialog", "aria-modal": "true", children: jsxRuntime.jsxs("div", { className: CodeBlock_module.default['code-block__modal__content'], onClick: e => e.stopPropagation(), children: [renderHeader(true), jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__modal__wrapper'], children: renderHighlighter() })] }) }), document.body)] }));
 };
 
 exports.default = CodeBlock;

package/dist/cjs/dynamicComponents/CodeBlockDynamic.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockDynamic.js","sources":["../../../src/dynamicComponents/CodeBlockDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport 'prismjs/themes/prism-tomorrow.css';\n\nconst SH = SyntaxHighlighter as any;\n\nimport styles from '../styles/CodeBlock.module.scss';\n\ninterface Properties {\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n\tlanguage?: string;\n\tcode?: string;\n}\n\nconst CodeBlock = ({\n\tlanguage = 'javascript',\n\tcode = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: Properties) => {\n\tconst [isCopyMode, setCopyMode] = useState(false);\n\n\tconst copyToClipboard = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopyMode(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetCopyMode(false);\n\t\t\t}, 1000);\n\t\t} catch (error) {\n\t\t\tconsole.error('Failed to copy:', error);\n\t\t}\n\t};\n\n\tconst lineNumberStyle = {\n\t\tcolor: '#95a1b1',\n\t\tfontSize: '0.9em',\n\t\tpaddingRight: '1em',\n\t\tmarginRight: '8px',\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['code-block']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${\n\t\t\t\thasMarginDown ? styles['margin-bottom--2'] : ''\n\t\t\t}`}\n\t\t>\n\t\t\t<div className={styles['code-block__header']}>\n\t\t\t\t<div className={styles['code-block__header__title']}>{language}</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles['code-block__header__copy']} ${\n\t\t\t\t\t\tisCopyMode ? styles['code-block__header__copy--active'] : ''\n\t\t\t\t\t}`}\n\t\t\t\t\tonClick={copyToClipboard}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className={styles['code-block__wrapper']}>\n\t\t\t\t<SH\n\t\t\t\t\tlanguage={language}\n\t\t\t\t\tstyle={dracula}\n\t\t\t\t\tshowLineNumbers\n\t\t\t\t\tlineNumberStyle={lineNumberStyle}\n\t\t\t\t>\n\t\t\t\t\t{code}\n\t\t\t\t</SH>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default CodeBlock;\n"],"names":["SyntaxHighlighter","useState","_jsxs","styles","_jsx","dracula"],"mappings":";;;;;;;;;;;AAQA,MAAM,EAAE,GAAGA,4BAAwB;AAWnC,MAAM,SAAS,GAAG,CAAC,EAClB,QAAQ,GAAG,YAAY,EACvB,IAAI,GAAG,EAAE,EACT,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACT,KAAI;IAChB,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,eAAe,GAAG,YAAW;AAClC,QAAA,IAAI;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;YACzC,WAAW,CAAC,IAAI,CAAC;YACjB,UAAU,CAAC,MAAK;gBACf,WAAW,CAAC,KAAK,CAAC;YACnB,CAAC,EAAE,IAAI,CAAC;QACT;QAAE,OAAO,KAAK,EAAE;AACf,YAAA,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,CAAC;QACxC;AACD,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG;AACvB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,WAAW,EAAE,KAAK;KAClB;IAED,QACCC,eAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGC,wBAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAGA,wBAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAA,EAC/E,aAAa,GAAGA,wBAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,CAAA,CAAE,EAAA,QAAA,EAAA,CAEFD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,wBAAM,CAAC,oBAAoB,CAAC,EAAA,QAAA,EAAA,CAC3CC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,wBAAM,CAAC,2BAA2B,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,EACrEC,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGD,wBAAM,CAAC,0BAA0B,CAAC,CAAA,CAAA,EAC/C,UAAU,GAAGA,wBAAM,CAAC,kCAAkC,CAAC,GAAG,EAC3D,CAAA,CAAE,EACF,OAAO,EAAE,eAAe,EAAA,CACvB,CAAA,EAAA,CACG,EACNC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,wBAAM,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAC5CC,cAAA,CAAC,EAAE,EAAA,EACF,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAEC,aAAO,EACd,eAAe,EAAA,IAAA,EACf,eAAe,EAAE,eAAe,EAAA,QAAA,EAE/B,IAAI,EAAA,CACD,EAAA,CACA,CAAA,EAAA,CACD;AAER;;;;"}
+{"version":3,"file":"CodeBlockDynamic.js","sources":["../../../src/dynamicComponents/CodeBlockDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport 'prismjs/themes/prism-tomorrow.css';\n\nconst SH = SyntaxHighlighter as any;\n\nimport styles from '../styles/CodeBlock.module.scss';\n\ninterface Properties {\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n\tlanguage?: string;\n\tcode?: string;\n}\n\nconst lineNumberStyle = {\n\tcolor: '#95a1b1',\n\tfontSize: '0.9em',\n\tpaddingRight: '1em',\n\tmarginRight: '8px',\n};\n\nconst CodeBlock = ({\n\tlanguage = 'javascript',\n\tcode = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: Properties) => {\n\tconst [isCopyMode, setCopyMode] = useState(false);\n\tconst [isExpanded, setIsExpanded] = useState(false);\n\n\tconst copyToClipboard = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopyMode(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetCopyMode(false);\n\t\t\t}, 1000);\n\t\t} catch (error) {\n\t\t\tconsole.error('Failed to copy:', error);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (!isExpanded) return;\n\t\tconst onKey = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') setIsExpanded(false);\n\t\t};\n\t\tconst previousOverflow = document.body.style.overflow;\n\t\tdocument.body.style.overflow = 'hidden';\n\t\twindow.addEventListener('keydown', onKey);\n\t\treturn () => {\n\t\t\tdocument.body.style.overflow = previousOverflow;\n\t\t\twindow.removeEventListener('keydown', onKey);\n\t\t};\n\t}, [isExpanded]);\n\n\tconst renderHeader = (expanded: boolean) => (\n\t\t<div className={styles['code-block__header']}>\n\t\t\t<div className={styles['code-block__header__title']}>{language}</div>\n\t\t\t<div className={styles['code-block__header__actions']}>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles['code-block__header__expand']} ${\n\t\t\t\t\t\texpanded ? styles['code-block__header__expand--collapse'] : ''\n\t\t\t\t\t}`}\n\t\t\t\t\tonClick={() => setIsExpanded(!expanded)}\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-label={expanded ? 'Close fullscreen' : 'Expand to fullscreen'}\n\t\t\t\t\ttitle={expanded ? 'Close fullscreen' : 'Expand to fullscreen'}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles['code-block__header__copy']} ${\n\t\t\t\t\t\tisCopyMode ? styles['code-block__header__copy--active'] : ''\n\t\t\t\t\t}`}\n\t\t\t\t\tonClick={copyToClipboard}\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-label=\"Copy code\"\n\t\t\t\t\ttitle=\"Copy code\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\tconst renderHighlighter = () => (\n\t\t<SH\n\t\t\tlanguage={language}\n\t\t\tstyle={dracula}\n\t\t\tshowLineNumbers\n\t\t\tlineNumberStyle={lineNumberStyle}\n\t\t>\n\t\t\t{code}\n\t\t</SH>\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['code-block']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${\n\t\t\t\thasMarginDown ? styles['margin-bottom--2'] : ''\n\t\t\t}`}\n\t\t>\n\t\t\t{renderHeader(false)}\n\t\t\t<div className={styles['code-block__wrapper']}>{renderHighlighter()}</div>\n\n\t\t\t{isExpanded &&\n\t\t\t\ttypeof document !== 'undefined' &&\n\t\t\t\tcreatePortal(\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={styles['code-block__modal']}\n\t\t\t\t\t\tonClick={() => setIsExpanded(false)}\n\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={styles['code-block__modal__content']}\n\t\t\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{renderHeader(true)}\n\t\t\t\t\t\t\t<div className={styles['code-block__modal__wrapper']}>\n\t\t\t\t\t\t\t\t{renderHighlighter()}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>,\n\t\t\t\t\tdocument.body\n\t\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default CodeBlock;\n"],"names":["SyntaxHighlighter","useState","useEffect","_jsxs","styles","_jsx","dracula","createPortal"],"mappings":"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"}

package/dist/cjs/dynamicComponents/MermaidDynamic.js

@@ -5,7 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var reactDom = require('react-dom');
 var mermaid = require('mermaid');
+var MermaidControls = require('../components/MermaidControls.js');
+var MermaidViewport = require('../components/MermaidViewport.js');
+var usePanZoom = require('../hooks/usePanZoom.js');
 var CalloutStatic = require('../staticComponents/CalloutStatic.js');
 var Mermaid_module = require('../styles/Mermaid.module.scss.js');
 
@@ -25,102 +29,75 @@ mermaid.initialize({
         diagramMarginX: 0,
     },
 });
-const MIN_SCALE = 0.5;
-const MAX_SCALE = 4;
-const ZOOM_STEP = 0.15;
 const Mermaid = ({ code = '', id = '', hasMarginUp = false, hasMarginDown = false, }) => {
     const [enabled, setEnabled] = react.useState(false);
     const [error, setError] = react.useState(null);
-    const [transform, setTransform] = react.useState({ scale: 1, x: 0, y: 0 });
-    const [isDragging, setIsDragging] = react.useState(false);
+    const [isExpanded, setIsExpanded] = react.useState(false);
     const mermaidReference = react.useRef(null);
-    const viewportRef = react.useRef(null);
+    const modalMermaidReference = react.useRef(null);
     const renderCount = react.useRef(0);
-    const transformRef = react.useRef({ scale: 1, x: 0, y: 0 });
-    const isDraggingRef = react.useRef(false);
-    const dragStart = react.useRef({
-        mouseX: 0,
-        mouseY: 0,
-        transformX: 0,
-        transformY: 0,
-    });
-    const applyTransform = react.useCallback((updater) => {
-        const next = updater(transformRef.current);
-        transformRef.current = next;
-        setTransform(next);
-    }, []);
-    const initializeMermaid = react.useCallback(async () => {
-        if (!mermaidReference.current || !code)
-            return;
-        const renderId = `mermaid-diagram-${id}-${++renderCount.current}`;
-        document.getElementById(renderId)?.remove();
+    const inline = usePanZoom.usePanZoom();
+    const modal = usePanZoom.usePanZoom();
+    const renderInto = react.useCallback(async (target, prefix) => {
+        if (!target || !code)
+            return false;
+        const renderId = `${prefix}-${id}-${++renderCount.current}`;
         try {
             const { svg, bindFunctions } = await mermaid.render(renderId, code);
-            if (!mermaidReference.current || !svg)
-                return;
-            mermaidReference.current.innerHTML = svg;
-            bindFunctions?.(mermaidReference.current);
-            setEnabled(true);
+            if (!svg)
+                return false;
+            target.innerHTML = svg;
+            bindFunctions?.(target);
+            return true;
         }
         catch (err) {
             const message = err instanceof Error ? err.message : 'Failed to render diagram';
             setError(message);
+            return false;
         }
     }, [code, id]);
     react.useEffect(() => {
         if (!code)
             return;
         setError(null);
-        applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
-        const timer = setTimeout(initializeMermaid, 100);
+        inline.reset();
+        const timer = setTimeout(() => {
+            renderInto(mermaidReference.current, 'mermaid-diagram').then(ok => {
+                if (ok)
+                    setEnabled(true);
+            });
+        }, 100);
         return () => clearTimeout(timer);
-    }, [code, initializeMermaid, applyTransform]);
-    const handleMouseDown = react.useCallback((e) => {
-        e.preventDefault();
-        isDraggingRef.current = true;
-        setIsDragging(true);
-        dragStart.current = {
-            mouseX: e.clientX,
-            mouseY: e.clientY,
-            transformX: transformRef.current.x,
-            transformY: transformRef.current.y,
-        };
-    }, []);
-    const handleMouseMove = react.useCallback((e) => {
-        if (!isDraggingRef.current)
+    }, [code, renderInto, inline.reset]);
+    react.useEffect(() => {
+        if (!isExpanded)
+            return;
+        modal.reset();
+        const timer = setTimeout(() => {
+            renderInto(modalMermaidReference.current, 'mermaid-modal');
+        }, 0);
+        return () => clearTimeout(timer);
+    }, [isExpanded, renderInto, modal.reset]);
+    react.useEffect(() => {
+        if (!isExpanded)
             return;
-        applyTransform(prev => ({
-            ...prev,
-            x: dragStart.current.transformX + (e.clientX - dragStart.current.mouseX),
-            y: dragStart.current.transformY + (e.clientY - dragStart.current.mouseY),
-        }));
-    }, [applyTransform]);
-    const handleMouseUp = react.useCallback(() => {
-        isDraggingRef.current = false;
-        setIsDragging(false);
-    }, []);
-    const zoomIn = react.useCallback(() => {
-        applyTransform(prev => ({
-            ...prev,
-            scale: Math.min(prev.scale * (1 + ZOOM_STEP), MAX_SCALE),
-        }));
-    }, [applyTransform]);
-    const zoomOut = react.useCallback(() => {
-        applyTransform(prev => ({
-            ...prev,
-            scale: Math.max(prev.scale * (1 - ZOOM_STEP), MIN_SCALE),
-        }));
-    }, [applyTransform]);
-    const resetView = react.useCallback(() => {
-        applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
-    }, [applyTransform]);
+        const onKey = (e) => {
+            if (e.key === 'Escape')
+                setIsExpanded(false);
+        };
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        window.addEventListener('keydown', onKey);
+        return () => {
+            document.body.style.overflow = previousOverflow;
+            window.removeEventListener('keydown', onKey);
+        };
+    }, [isExpanded]);
     return (jsxRuntime.jsxs("div", { className: `${Mermaid_module.default.mermaid}
 				${hasMarginUp ? Mermaid_module.default['margin-top--1'] : ''}
-				${hasMarginDown ? Mermaid_module.default['margin-bottom--2'] : ''}`, children: [error ? (jsxRuntime.jsx(CalloutStatic.default, { type: "error", children: jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("b", { children: "Diagram error:" }), " ", error] }) })) : !enabled ? (jsxRuntime.jsx(CalloutStatic.default, { type: "info", children: jsxRuntime.jsx("p", { children: "Rendering diagram..." }) })) : (jsxRuntime.jsxs("div", { className: Mermaid_module.default['mermaid__controls'], children: [jsxRuntime.jsx("button", { className: Mermaid_module.default['mermaid__controls__btn'], onClick: zoomIn, children: "+" }), jsxRuntime.jsx("button", { className: Mermaid_module.default['mermaid__controls__btn'], onClick: zoomOut, children: "\u2212" }), jsxRuntime.jsx("button", { className: Mermaid_module.default['mermaid__controls__btn'], onClick: resetView, children: "Reset" })] })), jsxRuntime.jsx("div", { ref: viewportRef, className: `${Mermaid_module.default['mermaid__viewport']} ${isDragging ? Mermaid_module.default['mermaid__viewport--dragging'] : ''}`, style: enabled ? undefined : { display: 'none' }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, children: jsxRuntime.jsx("div", { style: {
-                        transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
-                        transformOrigin: '0 0',
-                        transition: isDragging ? 'none' : 'transform 0.1s ease',
-                    }, children: jsxRuntime.jsx("div", { ref: mermaidReference, id: id }) }) })] }));
+				${hasMarginDown ? Mermaid_module.default['margin-bottom--2'] : ''}`, children: [error ? (jsxRuntime.jsx(CalloutStatic.default, { type: "error", children: jsxRuntime.jsxs("p", { children: [jsxRuntime.jsx("b", { children: "Diagram error:" }), " ", error] }) })) : !enabled ? (jsxRuntime.jsx(CalloutStatic.default, { type: "info", children: jsxRuntime.jsx("p", { children: "Rendering diagram..." }) })) : (jsxRuntime.jsx(MermaidControls.default, { className: Mermaid_module.default['mermaid__controls'], isExpanded: false, onZoomIn: inline.zoomIn, onZoomOut: inline.zoomOut, onReset: inline.reset, onToggleExpand: () => setIsExpanded(true) })), jsxRuntime.jsx(MermaidViewport.default, { className: Mermaid_module.default['mermaid__viewport'], draggingClassName: Mermaid_module.default['mermaid__viewport--dragging'], pan: inline, contentRef: mermaidReference, contentId: id, hidden: !enabled }), isExpanded &&
+                typeof document !== 'undefined' &&
+                reactDom.createPortal(jsxRuntime.jsx("div", { className: Mermaid_module.default['mermaid__modal'], onClick: () => setIsExpanded(false), role: "dialog", "aria-modal": "true", children: jsxRuntime.jsxs("div", { className: Mermaid_module.default['mermaid__modal__content'], onClick: e => e.stopPropagation(), children: [jsxRuntime.jsx(MermaidControls.default, { className: Mermaid_module.default['mermaid__modal__controls'], isExpanded: true, onZoomIn: modal.zoomIn, onZoomOut: modal.zoomOut, onReset: modal.reset, onToggleExpand: () => setIsExpanded(false) }), jsxRuntime.jsx(MermaidViewport.default, { className: Mermaid_module.default['mermaid__modal__viewport'], draggingClassName: Mermaid_module.default['mermaid__modal__viewport--dragging'], pan: modal, contentRef: modalMermaidReference })] }) }), document.body)] }));
 };
 
 exports.default = Mermaid;

package/dist/cjs/dynamicComponents/MermaidDynamic.js.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidDynamic.js","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport mermaid from 'mermaid';\n\nimport CalloutStatic from '../staticComponents/CalloutStatic';\nimport styles from '../styles/Mermaid.module.scss';\n\ninterface MermaidProperties {\n\tcode: string;\n\tid: string;\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nmermaid.initialize({\n\tstartOnLoad: false,\n\ttheme: 'default',\n\ttimeline: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n\tflowchart: {\n\t\tuseMaxWidth: true,\n\t\tdiagramPadding: 0,\n\t},\n\tsequence: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n});\n\nconst MIN_SCALE = 0.5;\nconst MAX_SCALE = 4;\nconst ZOOM_STEP = 0.15;\n\nconst Mermaid = ({\n\tcode = '',\n\tid = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: MermaidProperties) => {\n\tconst [enabled, setEnabled] = useState(false);\n\tconst [error, setError] = useState<string | null>(null);\n\tconst [transform, setTransform] = useState({ scale: 1, x: 0, y: 0 });\n\tconst [isDragging, setIsDragging] = useState(false);\n\n\tconst mermaidReference = useRef<HTMLDivElement>(null);\n\tconst viewportRef = useRef<HTMLDivElement>(null);\n\tconst renderCount = useRef(0);\n\tconst transformRef = useRef({ scale: 1, x: 0, y: 0 });\n\tconst isDraggingRef = useRef(false);\n\tconst dragStart = useRef({\n\t\tmouseX: 0,\n\t\tmouseY: 0,\n\t\ttransformX: 0,\n\t\ttransformY: 0,\n\t});\n\n\tconst applyTransform = useCallback(\n\t\t(\n\t\t\tupdater: (\n\t\t\t\tprev: typeof transformRef.current\n\t\t\t) => typeof transformRef.current\n\t\t) => {\n\t\t\tconst next = updater(transformRef.current);\n\t\t\ttransformRef.current = next;\n\t\t\tsetTransform(next);\n\t\t},\n\t\t[]\n\t);\n\n\tconst initializeMermaid = useCallback(async () => {\n\t\tif (!mermaidReference.current || !code) return;\n\t\tconst renderId = `mermaid-diagram-${id}-${++renderCount.current}`;\n\t\tdocument.getElementById(renderId)?.remove();\n\t\ttry {\n\t\t\tconst { svg, bindFunctions } = await mermaid.render(renderId, code);\n\t\t\tif (!mermaidReference.current || !svg) return;\n\t\t\tmermaidReference.current.innerHTML = svg;\n\t\t\tbindFunctions?.(mermaidReference.current);\n\t\t\tsetEnabled(true);\n\t\t} catch (err) {\n\t\t\tconst message =\n\t\t\t\terr instanceof Error ? err.message : 'Failed to render diagram';\n\t\t\tsetError(message);\n\t\t}\n\t}, [code, id]);\n\n\tuseEffect(() => {\n\t\tif (!code) return;\n\t\tsetError(null);\n\t\tapplyTransform(() => ({ scale: 1, x: 0, y: 0 }));\n\t\tconst timer = setTimeout(initializeMermaid, 100);\n\t\treturn () => clearTimeout(timer);\n\t}, [code, initializeMermaid, applyTransform]);\n\n\n\n\tconst handleMouseDown = useCallback((e: React.MouseEvent) => {\n\t\te.preventDefault();\n\t\tisDraggingRef.current = true;\n\t\tsetIsDragging(true);\n\t\tdragStart.current = {\n\t\t\tmouseX: e.clientX,\n\t\t\tmouseY: e.clientY,\n\t\t\ttransformX: transformRef.current.x,\n\t\t\ttransformY: transformRef.current.y,\n\t\t};\n\t}, []);\n\n\tconst handleMouseMove = useCallback(\n\t\t(e: React.MouseEvent) => {\n\t\t\tif (!isDraggingRef.current) return;\n\t\t\tapplyTransform(prev => ({\n\t\t\t\t...prev,\n\t\t\t\tx:\n\t\t\t\t\tdragStart.current.transformX + (e.clientX - dragStart.current.mouseX),\n\t\t\t\ty:\n\t\t\t\t\tdragStart.current.transformY + (e.clientY - dragStart.current.mouseY),\n\t\t\t}));\n\t\t},\n\t\t[applyTransform]\n\t);\n\n\tconst handleMouseUp = useCallback(() => {\n\t\tisDraggingRef.current = false;\n\t\tsetIsDragging(false);\n\t}, []);\n\n\tconst zoomIn = useCallback(() => {\n\t\tapplyTransform(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.min(prev.scale * (1 + ZOOM_STEP), MAX_SCALE),\n\t\t}));\n\t}, [applyTransform]);\n\n\tconst zoomOut = useCallback(() => {\n\t\tapplyTransform(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.max(prev.scale * (1 - ZOOM_STEP), MIN_SCALE),\n\t\t}));\n\t}, [applyTransform]);\n\n\tconst resetView = useCallback(() => {\n\t\tapplyTransform(() => ({ scale: 1, x: 0, y: 0 }));\n\t}, [applyTransform]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mermaid}\n\t\t\t\t${hasMarginUp ? styles['margin-top--1'] : ''}\n\t\t\t\t${hasMarginDown ? styles['margin-bottom--2'] : ''}`}\n\t\t>\n\t\t\t{error ? (\n\t\t\t\t<CalloutStatic type=\"error\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<b>Diagram error:</b> {error}\n\t\t\t\t\t</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : !enabled ? (\n\t\t\t\t<CalloutStatic type=\"info\">\n\t\t\t\t\t<p>Rendering diagram...</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : (\n\t\t\t\t<div className={styles['mermaid__controls']}>\n\t\t\t\t\t<button className={styles['mermaid__controls__btn']} onClick={zoomIn}>\n\t\t\t\t\t\t+\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclassName={styles['mermaid__controls__btn']}\n\t\t\t\t\t\tonClick={zoomOut}\n\t\t\t\t\t>\n\t\t\t\t\t\t−\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclassName={styles['mermaid__controls__btn']}\n\t\t\t\t\t\tonClick={resetView}\n\t\t\t\t\t>\n\t\t\t\t\t\tReset\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tref={viewportRef}\n\t\t\t\tclassName={`${styles['mermaid__viewport']} ${\n\t\t\t\t\tisDragging ? styles['mermaid__viewport--dragging'] : ''\n\t\t\t\t}`}\n\t\t\t\tstyle={enabled ? undefined : { display: 'none' }}\n\t\t\t\tonMouseDown={handleMouseDown}\n\t\t\t\tonMouseMove={handleMouseMove}\n\t\t\t\tonMouseUp={handleMouseUp}\n\t\t\t\tonMouseLeave={handleMouseUp}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttransform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,\n\t\t\t\t\t\ttransformOrigin: '0 0',\n\t\t\t\t\t\ttransition: isDragging ? 'none' : 'transform 0.1s ease',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<div ref={mermaidReference} id={id} />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default Mermaid;\n"],"names":["useState","useRef","useCallback","useEffect","_jsxs","styles","_jsx","CalloutStatic"],"mappings":";;;;;;;;;;AAgBA,OAAO,CAAC,UAAU,CAAC;AAClB,IAAA,WAAW,EAAE,KAAK;AAClB,IAAA,KAAK,EAAE,SAAS;AAChB,IAAA,QAAQ,EAAE;AACT,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,cAAc,EAAE,CAAC;AACjB,KAAA;AACD,IAAA,SAAS,EAAE;AACV,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,cAAc,EAAE,CAAC;AACjB,KAAA;AACD,IAAA,QAAQ,EAAE;AACT,QAAA,WAAW,EAAE,IAAI;AACjB,QAAA,cAAc,EAAE,CAAC;AACjB,KAAA;AACD,CAAA,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG;AACrB,MAAM,SAAS,GAAG,CAAC;AACnB,MAAM,SAAS,GAAG,IAAI;AAEtB,MAAM,OAAO,GAAG,CAAC,EAChB,IAAI,GAAG,EAAE,EACT,EAAE,GAAG,EAAE,EACP,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACF,KAAI;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGA,cAAQ,CAAgB,IAAI,CAAC;IACvD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAGA,cAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IACpE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AAEnD,IAAA,MAAM,gBAAgB,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACrD,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAChD,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAC,CAAC,CAAC;AAC7B,IAAA,MAAM,YAAY,GAAGA,YAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;AACrD,IAAA,MAAM,aAAa,GAAGA,YAAM,CAAC,KAAK,CAAC;IACnC,MAAM,SAAS,GAAGA,YAAM,CAAC;AACxB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,UAAU,EAAE,CAAC;AACb,QAAA,UAAU,EAAE,CAAC;AACb,KAAA,CAAC;AAEF,IAAA,MAAM,cAAc,GAAGC,iBAAW,CACjC,CACC,OAEgC,KAC7B;QACH,MAAM,IAAI,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AAC1C,QAAA,YAAY,CAAC,OAAO,GAAG,IAAI;QAC3B,YAAY,CAAC,IAAI,CAAC;IACnB,CAAC,EACD,EAAE,CACF;AAED,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CAAC,YAAW;AAChD,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,IAAI;YAAE;QACxC,MAAM,QAAQ,GAAG,CAAA,gBAAA,EAAmB,EAAE,CAAA,CAAA,EAAI,EAAE,WAAW,CAAC,OAAO,CAAA,CAAE;QACjE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE;AAC3C,QAAA,IAAI;AACH,YAAA,MAAM,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,MAAM,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC;AACnE,YAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,IAAI,CAAC,GAAG;gBAAE;AACvC,YAAA,gBAAgB,CAAC,OAAO,CAAC,SAAS,GAAG,GAAG;AACxC,YAAA,aAAa,GAAG,gBAAgB,CAAC,OAAO,CAAC;YACzC,UAAU,CAAC,IAAI,CAAC;QACjB;QAAE,OAAO,GAAG,EAAE;AACb,YAAA,MAAM,OAAO,GACZ,GAAG,YAAY,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,0BAA0B;YAChE,QAAQ,CAAC,OAAO,CAAC;QAClB;AACD,IAAA,CAAC,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IAEdC,eAAS,CAAC,MAAK;AACd,QAAA,IAAI,CAAC,IAAI;YAAE;QACX,QAAQ,CAAC,IAAI,CAAC;QACd,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;QAChD,MAAM,KAAK,GAAG,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC;AAChD,QAAA,OAAO,MAAM,YAAY,CAAC,KAAK,CAAC;IACjC,CAAC,EAAE,CAAC,IAAI,EAAE,iBAAiB,EAAE,cAAc,CAAC,CAAC;AAI7C,IAAA,MAAM,eAAe,GAAGD,iBAAW,CAAC,CAAC,CAAmB,KAAI;QAC3D,CAAC,CAAC,cAAc,EAAE;AAClB,QAAA,aAAa,CAAC,OAAO,GAAG,IAAI;QAC5B,aAAa,CAAC,IAAI,CAAC;QACnB,SAAS,CAAC,OAAO,GAAG;YACnB,MAAM,EAAE,CAAC,CAAC,OAAO;YACjB,MAAM,EAAE,CAAC,CAAC,OAAO;AACjB,YAAA,UAAU,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;AAClC,YAAA,UAAU,EAAE,YAAY,CAAC,OAAO,CAAC,CAAC;SAClC;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAGA,iBAAW,CAClC,CAAC,CAAmB,KAAI;QACvB,IAAI,CAAC,aAAa,CAAC,OAAO;YAAE;AAC5B,QAAA,cAAc,CAAC,IAAI,KAAK;AACvB,YAAA,GAAG,IAAI;AACP,YAAA,CAAC,EACA,SAAS,CAAC,OAAO,CAAC,UAAU,IAAI,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC;AACtE,YAAA,CAAC,EACA,SAAS,CAAC,OAAO,CAAC,UAAU,IAAI,CAAC,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC;AACtE,SAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EACD,CAAC,cAAc,CAAC,CAChB;AAED,IAAA,MAAM,aAAa,GAAGA,iBAAW,CAAC,MAAK;AACtC,QAAA,aAAa,CAAC,OAAO,GAAG,KAAK;QAC7B,aAAa,CAAC,KAAK,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,MAAM,GAAGA,iBAAW,CAAC,MAAK;AAC/B,QAAA,cAAc,CAAC,IAAI,KAAK;AACvB,YAAA,GAAG,IAAI;AACP,YAAA,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC,EAAE,SAAS,CAAC;AACxD,SAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,MAAM,OAAO,GAAGA,iBAAW,CAAC,MAAK;AAChC,QAAA,cAAc,CAAC,IAAI,KAAK;AACvB,YAAA,GAAG,IAAI;AACP,YAAA,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC,EAAE,SAAS,CAAC;AACxD,SAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,MAAM,SAAS,GAAGA,iBAAW,CAAC,MAAK;QAClC,cAAc,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;AACjD,IAAA,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAEpB,IAAA,QACCE,eAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGC,sBAAM,CAAC,OAAO;MACzB,WAAW,GAAGA,sBAAM,CAAC,eAAe,CAAC,GAAG,EAAE;AAC1C,IAAA,EAAA,aAAa,GAAGA,sBAAM,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EAAA,CAEnD,KAAK,IACLC,cAAA,CAACC,qBAAa,EAAA,EAAC,IAAI,EAAC,OAAO,EAAA,QAAA,EAC1BH,eAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,CACCE,mDAAqB,EAAA,GAAA,EAAE,KAAK,CAAA,EAAA,CACzB,EAAA,CACW,IACb,CAAC,OAAO,IACXA,cAAA,CAACC,qBAAa,EAAA,EAAC,IAAI,EAAC,MAAM,YACzBD,cAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,CAA2B,EAAA,CACZ,KAEhBF,yBAAK,SAAS,EAAEC,sBAAM,CAAC,mBAAmB,CAAC,EAAA,QAAA,EAAA,CAC1CC,2BAAQ,SAAS,EAAED,sBAAM,CAAC,wBAAwB,CAAC,EAAE,OAAO,EAAE,MAAM,EAAA,QAAA,EAAA,GAAA,EAAA,CAE3D,EACTC,2BACC,SAAS,EAAED,sBAAM,CAAC,wBAAwB,CAAC,EAC3C,OAAO,EAAE,OAAO,EAAA,QAAA,EAAA,QAAA,EAAA,CAGR,EACTC,2BACC,SAAS,EAAED,sBAAM,CAAC,wBAAwB,CAAC,EAC3C,OAAO,EAAE,SAAS,sBAGV,CAAA,EAAA,CACJ,CACN,EACDC,cAAA,CAAA,KAAA,EAAA,EACC,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,CAAA,EAAGD,sBAAM,CAAC,mBAAmB,CAAC,CAAA,CAAA,EACxC,UAAU,GAAGA,sBAAM,CAAC,6BAA6B,CAAC,GAAG,EACtD,CAAA,CAAE,EACF,KAAK,EAAE,OAAO,GAAG,SAAS,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,EAChD,WAAW,EAAE,eAAe,EAC5B,WAAW,EAAE,eAAe,EAC5B,SAAS,EAAE,aAAa,EACxB,YAAY,EAAE,aAAa,EAAA,QAAA,EAE3BC,cAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAE;AACN,wBAAA,SAAS,EAAE,CAAA,UAAA,EAAa,SAAS,CAAC,CAAC,CAAA,IAAA,EAAO,SAAS,CAAC,CAAC,CAAA,UAAA,EAAa,SAAS,CAAC,KAAK,CAAA,CAAA,CAAG;AACpF,wBAAA,eAAe,EAAE,KAAK;wBACtB,UAAU,EAAE,UAAU,GAAG,MAAM,GAAG,qBAAqB;AACvD,qBAAA,EAAA,QAAA,EAEDA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,gBAAgB,EAAE,EAAE,EAAE,EAAE,EAAA,CAAI,EAAA,CACjC,EAAA,CACD,CAAA,EAAA,CACD;AAER;;;;"}
+{"version":3,"file":"MermaidDynamic.js","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport mermaid from 'mermaid';\n\nimport MermaidControls from '../components/MermaidControls';\nimport MermaidViewport from '../components/MermaidViewport';\nimport { usePanZoom } from '../hooks/usePanZoom';\nimport CalloutStatic from '../staticComponents/CalloutStatic';\nimport styles from '../styles/Mermaid.module.scss';\n\ninterface MermaidProperties {\n\tcode: string;\n\tid: string;\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n}\n\nmermaid.initialize({\n\tstartOnLoad: false,\n\ttheme: 'default',\n\ttimeline: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n\tflowchart: {\n\t\tuseMaxWidth: true,\n\t\tdiagramPadding: 0,\n\t},\n\tsequence: {\n\t\tuseMaxWidth: true,\n\t\tdiagramMarginX: 0,\n\t},\n});\n\nconst Mermaid = ({\n\tcode = '',\n\tid = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: MermaidProperties) => {\n\tconst [enabled, setEnabled] = useState(false);\n\tconst [error, setError] = useState<string | null>(null);\n\tconst [isExpanded, setIsExpanded] = useState(false);\n\n\tconst mermaidReference = useRef<HTMLDivElement>(null);\n\tconst modalMermaidReference = useRef<HTMLDivElement>(null);\n\tconst renderCount = useRef(0);\n\n\tconst inline = usePanZoom();\n\tconst modal = usePanZoom();\n\n\tconst renderInto = useCallback(\n\t\tasync (target: HTMLDivElement | null, prefix: string) => {\n\t\t\tif (!target || !code) return false;\n\t\t\tconst renderId = `${prefix}-${id}-${++renderCount.current}`;\n\t\t\ttry {\n\t\t\t\tconst { svg, bindFunctions } = await mermaid.render(renderId, code);\n\t\t\t\tif (!svg) return false;\n\t\t\t\ttarget.innerHTML = svg;\n\t\t\t\tbindFunctions?.(target);\n\t\t\t\treturn true;\n\t\t\t} catch (err) {\n\t\t\t\tconst message =\n\t\t\t\t\terr instanceof Error ? err.message : 'Failed to render diagram';\n\t\t\t\tsetError(message);\n\t\t\t\treturn false;\n\t\t\t}\n\t\t},\n\t\t[code, id]\n\t);\n\n\tuseEffect(() => {\n\t\tif (!code) return;\n\t\tsetError(null);\n\t\tinline.reset();\n\t\tconst timer = setTimeout(() => {\n\t\t\trenderInto(mermaidReference.current, 'mermaid-diagram').then(ok => {\n\t\t\t\tif (ok) setEnabled(true);\n\t\t\t});\n\t\t}, 100);\n\t\treturn () => clearTimeout(timer);\n\t}, [code, renderInto, inline.reset]);\n\n\tuseEffect(() => {\n\t\tif (!isExpanded) return;\n\t\tmodal.reset();\n\t\tconst timer = setTimeout(() => {\n\t\t\trenderInto(modalMermaidReference.current, 'mermaid-modal');\n\t\t}, 0);\n\t\treturn () => clearTimeout(timer);\n\t}, [isExpanded, renderInto, modal.reset]);\n\n\tuseEffect(() => {\n\t\tif (!isExpanded) return;\n\t\tconst onKey = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') setIsExpanded(false);\n\t\t};\n\t\tconst previousOverflow = document.body.style.overflow;\n\t\tdocument.body.style.overflow = 'hidden';\n\t\twindow.addEventListener('keydown', onKey);\n\t\treturn () => {\n\t\t\tdocument.body.style.overflow = previousOverflow;\n\t\t\twindow.removeEventListener('keydown', onKey);\n\t\t};\n\t}, [isExpanded]);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles.mermaid}\n\t\t\t\t${hasMarginUp ? styles['margin-top--1'] : ''}\n\t\t\t\t${hasMarginDown ? styles['margin-bottom--2'] : ''}`}\n\t\t>\n\t\t\t{error ? (\n\t\t\t\t<CalloutStatic type=\"error\">\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<b>Diagram error:</b> {error}\n\t\t\t\t\t</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : !enabled ? (\n\t\t\t\t<CalloutStatic type=\"info\">\n\t\t\t\t\t<p>Rendering diagram...</p>\n\t\t\t\t</CalloutStatic>\n\t\t\t) : (\n\t\t\t\t<MermaidControls\n\t\t\t\t\tclassName={styles['mermaid__controls']}\n\t\t\t\t\tisExpanded={false}\n\t\t\t\t\tonZoomIn={inline.zoomIn}\n\t\t\t\t\tonZoomOut={inline.zoomOut}\n\t\t\t\t\tonReset={inline.reset}\n\t\t\t\t\tonToggleExpand={() => setIsExpanded(true)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<MermaidViewport\n\t\t\t\tclassName={styles['mermaid__viewport']}\n\t\t\t\tdraggingClassName={styles['mermaid__viewport--dragging']}\n\t\t\t\tpan={inline}\n\t\t\t\tcontentRef={mermaidReference}\n\t\t\t\tcontentId={id}\n\t\t\t\thidden={!enabled}\n\t\t\t/>\n\n\t\t\t{isExpanded &&\n\t\t\t\ttypeof document !== 'undefined' &&\n\t\t\t\tcreatePortal(\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={styles['mermaid__modal']}\n\t\t\t\t\t\tonClick={() => setIsExpanded(false)}\n\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={styles['mermaid__modal__content']}\n\t\t\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<MermaidControls\n\t\t\t\t\t\t\t\tclassName={styles['mermaid__modal__controls']}\n\t\t\t\t\t\t\t\tisExpanded={true}\n\t\t\t\t\t\t\t\tonZoomIn={modal.zoomIn}\n\t\t\t\t\t\t\t\tonZoomOut={modal.zoomOut}\n\t\t\t\t\t\t\t\tonReset={modal.reset}\n\t\t\t\t\t\t\t\tonToggleExpand={() => setIsExpanded(false)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<MermaidViewport\n\t\t\t\t\t\t\t\tclassName={styles['mermaid__modal__viewport']}\n\t\t\t\t\t\t\t\tdraggingClassName={styles['mermaid__modal__viewport--dragging']}\n\t\t\t\t\t\t\t\tpan={modal}\n\t\t\t\t\t\t\t\tcontentRef={modalMermaidReference}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>,\n\t\t\t\t\tdocument.body\n\t\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default Mermaid;\n"],"names":["useState","useRef","usePanZoom","useCallback","useEffect","_jsxs","styles","_jsx","CalloutStatic","MermaidControls","MermaidViewport","createPortal"],"mappings":"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"}

package/dist/cjs/hooks/usePanZoom.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var react = require('react');
+
+const DEFAULT_INITIAL_TRANSFORM = { scale: 1, x: 0, y: 0 };
+const DEFAULT_MIN_SCALE = 0.5;
+const DEFAULT_MAX_SCALE = 4;
+const DEFAULT_ZOOM_STEP = 0.15;
+const usePanZoom = ({ initialTransform = DEFAULT_INITIAL_TRANSFORM, minScale = DEFAULT_MIN_SCALE, maxScale = DEFAULT_MAX_SCALE, zoomStep = DEFAULT_ZOOM_STEP, } = {}) => {
+    const [transform, setTransform] = react.useState(initialTransform);
+    const [isDragging, setIsDragging] = react.useState(false);
+    const transformRef = react.useRef(initialTransform);
+    const isDraggingRef = react.useRef(false);
+    const dragStart = react.useRef({
+        mouseX: 0,
+        mouseY: 0,
+        transformX: 0,
+        transformY: 0,
+    });
+    const apply = react.useCallback((updater) => {
+        const next = updater(transformRef.current);
+        transformRef.current = next;
+        setTransform(next);
+    }, []);
+    const onMouseDown = react.useCallback((e) => {
+        e.preventDefault();
+        isDraggingRef.current = true;
+        setIsDragging(true);
+        dragStart.current = {
+            mouseX: e.clientX,
+            mouseY: e.clientY,
+            transformX: transformRef.current.x,
+            transformY: transformRef.current.y,
+        };
+    }, []);
+    const onMouseMove = react.useCallback((e) => {
+        if (!isDraggingRef.current)
+            return;
+        apply(prev => ({
+            ...prev,
+            x: dragStart.current.transformX + (e.clientX - dragStart.current.mouseX),
+            y: dragStart.current.transformY + (e.clientY - dragStart.current.mouseY),
+        }));
+    }, [apply]);
+    const onMouseUp = react.useCallback(() => {
+        isDraggingRef.current = false;
+        setIsDragging(false);
+    }, []);
+    const zoomIn = react.useCallback(() => {
+        apply(prev => ({
+            ...prev,
+            scale: Math.min(prev.scale * (1 + zoomStep), maxScale),
+        }));
+    }, [apply, zoomStep, maxScale]);
+    const zoomOut = react.useCallback(() => {
+        apply(prev => ({
+            ...prev,
+            scale: Math.max(prev.scale * (1 - zoomStep), minScale),
+        }));
+    }, [apply, zoomStep, minScale]);
+    const zoomAtPoint = react.useCallback((deltaY, pointX, pointY) => {
+        apply(prev => {
+            const factor = deltaY < 0 ? 1 + zoomStep : 1 - zoomStep;
+            const newScale = Math.max(minScale, Math.min(maxScale, prev.scale * factor));
+            if (newScale === prev.scale)
+                return prev;
+            const ratio = newScale / prev.scale;
+            return {
+                scale: newScale,
+                x: pointX - (pointX - prev.x) * ratio,
+                y: pointY - (pointY - prev.y) * ratio,
+            };
+        });
+    }, [apply, zoomStep, minScale, maxScale]);
+    const reset = react.useCallback(() => {
+        apply(() => initialTransform);
+    }, [apply, initialTransform]);
+    return {
+        transform,
+        isDragging,
+        onMouseDown,
+        onMouseMove,
+        onMouseUp,
+        zoomIn,
+        zoomOut,
+        zoomAtPoint,
+        reset,
+    };
+};
+
+exports.usePanZoom = usePanZoom;
+//# sourceMappingURL=usePanZoom.js.map

package/dist/cjs/hooks/usePanZoom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanZoom.js","sources":["../../../src/hooks/usePanZoom.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface Transform {\n\tscale: number;\n\tx: number;\n\ty: number;\n}\n\nexport interface UsePanZoomOptions {\n\tinitialTransform?: Transform;\n\tminScale?: number;\n\tmaxScale?: number;\n\tzoomStep?: number;\n}\n\nconst DEFAULT_INITIAL_TRANSFORM: Transform = { scale: 1, x: 0, y: 0 };\nconst DEFAULT_MIN_SCALE = 0.5;\nconst DEFAULT_MAX_SCALE = 4;\nconst DEFAULT_ZOOM_STEP = 0.15;\n\nexport const usePanZoom = ({\n\tinitialTransform = DEFAULT_INITIAL_TRANSFORM,\n\tminScale = DEFAULT_MIN_SCALE,\n\tmaxScale = DEFAULT_MAX_SCALE,\n\tzoomStep = DEFAULT_ZOOM_STEP,\n}: UsePanZoomOptions = {}) => {\n\tconst [transform, setTransform] = useState<Transform>(initialTransform);\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst transformRef = useRef<Transform>(initialTransform);\n\tconst isDraggingRef = useRef(false);\n\tconst dragStart = useRef({\n\t\tmouseX: 0,\n\t\tmouseY: 0,\n\t\ttransformX: 0,\n\t\ttransformY: 0,\n\t});\n\n\tconst apply = useCallback((updater: (prev: Transform) => Transform) => {\n\t\tconst next = updater(transformRef.current);\n\t\ttransformRef.current = next;\n\t\tsetTransform(next);\n\t}, []);\n\n\tconst onMouseDown = useCallback((e: React.MouseEvent) => {\n\t\te.preventDefault();\n\t\tisDraggingRef.current = true;\n\t\tsetIsDragging(true);\n\t\tdragStart.current = {\n\t\t\tmouseX: e.clientX,\n\t\t\tmouseY: e.clientY,\n\t\t\ttransformX: transformRef.current.x,\n\t\t\ttransformY: transformRef.current.y,\n\t\t};\n\t}, []);\n\n\tconst onMouseMove = useCallback(\n\t\t(e: React.MouseEvent) => {\n\t\t\tif (!isDraggingRef.current) return;\n\t\t\tapply(prev => ({\n\t\t\t\t...prev,\n\t\t\t\tx:\n\t\t\t\t\tdragStart.current.transformX + (e.clientX - dragStart.current.mouseX),\n\t\t\t\ty:\n\t\t\t\t\tdragStart.current.transformY + (e.clientY - dragStart.current.mouseY),\n\t\t\t}));\n\t\t},\n\t\t[apply]\n\t);\n\n\tconst onMouseUp = useCallback(() => {\n\t\tisDraggingRef.current = false;\n\t\tsetIsDragging(false);\n\t}, []);\n\n\tconst zoomIn = useCallback(() => {\n\t\tapply(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.min(prev.scale * (1 + zoomStep), maxScale),\n\t\t}));\n\t}, [apply, zoomStep, maxScale]);\n\n\tconst zoomOut = useCallback(() => {\n\t\tapply(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.max(prev.scale * (1 - zoomStep), minScale),\n\t\t}));\n\t}, [apply, zoomStep, minScale]);\n\n\tconst zoomAtPoint = useCallback(\n\t\t(deltaY: number, pointX: number, pointY: number) => {\n\t\t\tapply(prev => {\n\t\t\t\tconst factor = deltaY < 0 ? 1 + zoomStep : 1 - zoomStep;\n\t\t\t\tconst newScale = Math.max(\n\t\t\t\t\tminScale,\n\t\t\t\t\tMath.min(maxScale, prev.scale * factor)\n\t\t\t\t);\n\t\t\t\tif (newScale === prev.scale) return prev;\n\t\t\t\tconst ratio = newScale / prev.scale;\n\t\t\t\treturn {\n\t\t\t\t\tscale: newScale,\n\t\t\t\t\tx: pointX - (pointX - prev.x) * ratio,\n\t\t\t\t\ty: pointY - (pointY - prev.y) * ratio,\n\t\t\t\t};\n\t\t\t});\n\t\t},\n\t\t[apply, zoomStep, minScale, maxScale]\n\t);\n\n\tconst reset = useCallback(() => {\n\t\tapply(() => initialTransform);\n\t}, [apply, initialTransform]);\n\n\treturn {\n\t\ttransform,\n\t\tisDragging,\n\t\tonMouseDown,\n\t\tonMouseMove,\n\t\tonMouseUp,\n\t\tzoomIn,\n\t\tzoomOut,\n\t\tzoomAtPoint,\n\t\treset,\n\t};\n};\n\nexport type PanZoom = ReturnType<typeof usePanZoom>;\n"],"names":["useState","useRef","useCallback"],"mappings":"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"}