@san-siva/blogkit 1.1.34 → 1.1.36

package/dist/esm/styles/Mermaid.module.scss.js

@@ -1,4 +1,4 @@
-var styles = {"margin-top--1":"Mermaid-module_margin-top--1__W10B7","margin-bottom--2":"Mermaid-module_margin-bottom--2__w3Zct","mermaid":"Mermaid-module_mermaid__02iRo","mermaid__controls":"Mermaid-module_mermaid__controls__0YNFR","mermaid__controls__btn":"Mermaid-module_mermaid__controls__btn__w04sa","mermaid__viewport":"Mermaid-module_mermaid__viewport__KVL-A","mermaid__viewport--dragging":"Mermaid-module_mermaid__viewport--dragging__WjBzf"};
+var styles = {"margin-top--1":"Mermaid-module_margin-top--1__W10B7","margin-bottom--2":"Mermaid-module_margin-bottom--2__w3Zct","mermaid":"Mermaid-module_mermaid__02iRo","mermaid__controls":"Mermaid-module_mermaid__controls__0YNFR","mermaid__controls__btn":"Mermaid-module_mermaid__controls__btn__w04sa","mermaid__controls__btn--zoom-in":"Mermaid-module_mermaid__controls__btn--zoom-in__KX5QE","mermaid__controls__btn--zoom-out":"Mermaid-module_mermaid__controls__btn--zoom-out__Zffvt","mermaid__controls__btn--reset":"Mermaid-module_mermaid__controls__btn--reset__njRg-","mermaid__controls__btn--expand":"Mermaid-module_mermaid__controls__btn--expand__ZriXV","mermaid__controls__btn--collapse":"Mermaid-module_mermaid__controls__btn--collapse__3z9Fo","mermaid__viewport":"Mermaid-module_mermaid__viewport__KVL-A","mermaid__viewport--dragging":"Mermaid-module_mermaid__viewport--dragging__WjBzf","mermaid__modal":"Mermaid-module_mermaid__modal__wkcDB","mermaid__modal__content":"Mermaid-module_mermaid__modal__content__LTlQS","mermaid__modal__controls":"Mermaid-module_mermaid__modal__controls__S3kxt","mermaid__modal__viewport":"Mermaid-module_mermaid__modal__viewport__wxddc","mermaid__modal__viewport--dragging":"Mermaid-module_mermaid__modal__viewport--dragging__fFm72"};
 
 export { styles as default };
 //# sourceMappingURL=Mermaid.module.scss.js.map

package/dist/types/components/MermaidControls.d.ts

@@ -0,0 +1,11 @@
+interface MermaidControlsProps {
+    className: string;
+    isExpanded: boolean;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onReset: () => void;
+    onToggleExpand: () => void;
+}
+declare const MermaidControls: ({ className, isExpanded, onZoomIn, onZoomOut, onReset, onToggleExpand, }: MermaidControlsProps) => import("react/jsx-runtime").JSX.Element;
+export default MermaidControls;
+//# sourceMappingURL=MermaidControls.d.ts.map

package/dist/types/components/MermaidControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidControls.d.ts","sourceRoot":"","sources":["../../../src/components/MermaidControls.tsx"],"names":[],"mappings":"AAEA,UAAU,oBAAoB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,QAAA,MAAM,eAAe,GAAI,0EAOtB,oBAAoB,4CAiCtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/types/components/MermaidViewport.d.ts

@@ -0,0 +1,12 @@
+import type { PanZoom } from '../hooks/usePanZoom';
+interface MermaidViewportProps {
+    className: string;
+    draggingClassName: string;
+    pan: PanZoom;
+    contentRef: React.RefObject<HTMLDivElement>;
+    contentId?: string;
+    hidden?: boolean;
+}
+declare const MermaidViewport: ({ className, draggingClassName, pan, contentRef, contentId, hidden, }: MermaidViewportProps) => import("react/jsx-runtime").JSX.Element;
+export default MermaidViewport;
+//# sourceMappingURL=MermaidViewport.d.ts.map

package/dist/types/components/MermaidViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MermaidViewport.d.ts","sourceRoot":"","sources":["../../../src/components/MermaidViewport.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAEnD,UAAU,oBAAoB;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,GAAG,EAAE,OAAO,CAAC;IACb,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,QAAA,MAAM,eAAe,GAAI,uEAOtB,oBAAoB,4CAmBtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/types/dynamicComponents/MermaidDynamic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"names":[],"mappings":"AASA,UAAU,iBAAiB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAuBD,QAAA,MAAM,OAAO,GAAI,2CAKd,iBAAiB,4CAqKnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"MermaidDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"names":[],"mappings":"AAaA,UAAU,iBAAiB;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAmBD,QAAA,MAAM,OAAO,GAAI,2CAKd,iBAAiB,4CAuInB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/types/hooks/usePanZoom.d.ts

@@ -0,0 +1,23 @@
+export interface Transform {
+    scale: number;
+    x: number;
+    y: number;
+}
+export interface UsePanZoomOptions {
+    initialTransform?: Transform;
+    minScale?: number;
+    maxScale?: number;
+    zoomStep?: number;
+}
+export declare const usePanZoom: ({ initialTransform, minScale, maxScale, zoomStep, }?: UsePanZoomOptions) => {
+    transform: Transform;
+    isDragging: boolean;
+    onMouseDown: (e: React.MouseEvent) => void;
+    onMouseMove: (e: React.MouseEvent) => void;
+    onMouseUp: () => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    reset: () => void;
+};
+export type PanZoom = ReturnType<typeof usePanZoom>;
+//# sourceMappingURL=usePanZoom.d.ts.map

package/dist/types/hooks/usePanZoom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanZoom.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePanZoom.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACV;AAED,MAAM,WAAW,iBAAiB;IACjC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAOD,eAAO,MAAM,UAAU,GAAI,sDAKxB,iBAAsB;;;qBAkBY,KAAK,CAAC,UAAU;qBAa/C,KAAK,CAAC,UAAU;;;;;CA8CrB,CAAC;AAEF,MAAM,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.34",
+	"version": "1.1.36",
 	"description": "A reusable blog component library for React/Next.js applications with code highlighting, diagrams, and rich content features",
 	"main": "dist/cjs/index.js",
 	"module": "dist/esm/index.js",

package/src/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/src/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/src/assets/info.svg

@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#4242FA"/>
+<path d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM11 13H13V7H11V13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z" fill="#3F51B5"/>
 </svg>

package/src/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/src/assets/tick.svg

@@ -1,3 +1,3 @@
 <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.3333 35.7707L8.78133 23.2187L12.552 19.448L21.3333 28.2293L48 1.56267V0H0V48H48V26.6667V9.104L21.3333 35.7707Z" fill="#4242FA"/>
+<path d="M21.3333 35.7707L8.78133 23.2187L12.552 19.448L21.3333 28.2293L48 1.56267V0H0V48H48V26.6667V9.104L21.3333 35.7707Z" fill="#3F51B5"/>
 </svg>

package/src/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/src/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/src/components/MermaidControls.tsx

@@ -0,0 +1,54 @@
+import styles from '../styles/Mermaid.module.scss';
+
+interface MermaidControlsProps {
+	className: string;
+	isExpanded: boolean;
+	onZoomIn: () => void;
+	onZoomOut: () => void;
+	onReset: () => void;
+	onToggleExpand: () => void;
+}
+
+const MermaidControls = ({
+	className,
+	isExpanded,
+	onZoomIn,
+	onZoomOut,
+	onReset,
+	onToggleExpand,
+}: MermaidControlsProps) => {
+	const toggleLabel = isExpanded ? 'Close fullscreen' : 'Expand to fullscreen';
+	const toggleModifier = isExpanded
+		? styles['mermaid__controls__btn--collapse']
+		: styles['mermaid__controls__btn--expand'];
+	return (
+		<div className={className}>
+			<button
+				className={`${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--zoom-in']}`}
+				onClick={onZoomIn}
+				aria-label="Zoom in"
+				title="Zoom in"
+			/>
+			<button
+				className={`${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--zoom-out']}`}
+				onClick={onZoomOut}
+				aria-label="Zoom out"
+				title="Zoom out"
+			/>
+			<button
+				className={`${styles['mermaid__controls__btn']} ${styles['mermaid__controls__btn--reset']}`}
+				onClick={onReset}
+				aria-label="Reset view"
+				title="Reset view"
+			/>
+			<button
+				className={`${styles['mermaid__controls__btn']} ${toggleModifier}`}
+				onClick={onToggleExpand}
+				aria-label={toggleLabel}
+				title={toggleLabel}
+			/>
+		</div>
+	);
+};
+
+export default MermaidControls;

package/src/components/MermaidViewport.tsx

@@ -0,0 +1,40 @@
+import type { PanZoom } from '../hooks/usePanZoom';
+
+interface MermaidViewportProps {
+	className: string;
+	draggingClassName: string;
+	pan: PanZoom;
+	contentRef: React.RefObject<HTMLDivElement>;
+	contentId?: string;
+	hidden?: boolean;
+}
+
+const MermaidViewport = ({
+	className,
+	draggingClassName,
+	pan,
+	contentRef,
+	contentId,
+	hidden,
+}: MermaidViewportProps) => (
+	<div
+		className={`${className} ${pan.isDragging ? draggingClassName : ''}`}
+		style={hidden ? { display: 'none' } : undefined}
+		onMouseDown={pan.onMouseDown}
+		onMouseMove={pan.onMouseMove}
+		onMouseUp={pan.onMouseUp}
+		onMouseLeave={pan.onMouseUp}
+	>
+		<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',
+			}}
+		>
+			<div ref={contentRef} id={contentId} />
+		</div>
+	</div>
+);
+
+export default MermaidViewport;

package/src/dynamicComponents/MermaidDynamic.tsx

@@ -1,9 +1,13 @@
 'use client';
 
 import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 
 import mermaid from 'mermaid';
 
+import MermaidControls from '../components/MermaidControls';
+import MermaidViewport from '../components/MermaidViewport';
+import { usePanZoom } from '../hooks/usePanZoom';
 import CalloutStatic from '../staticComponents/CalloutStatic';
 import styles from '../styles/Mermaid.module.scss';
 
@@ -31,10 +35,6 @@ mermaid.initialize({
 	},
 });
 
-const MIN_SCALE = 0.5;
-const MAX_SCALE = 4;
-const ZOOM_STEP = 0.15;
-
 const Mermaid = ({
 	code = '',
 	id = '',
@@ -43,109 +43,69 @@ const Mermaid = ({
 }: MermaidProperties) => {
 	const [enabled, setEnabled] = useState(false);
 	const [error, setError] = useState<string | null>(null);
-	const [transform, setTransform] = useState({ scale: 1, x: 0, y: 0 });
-	const [isDragging, setIsDragging] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(false);
 
 	const mermaidReference = useRef<HTMLDivElement>(null);
-	const viewportRef = useRef<HTMLDivElement>(null);
+	const modalMermaidReference = useRef<HTMLDivElement>(null);
 	const renderCount = useRef(0);
-	const transformRef = useRef({ scale: 1, x: 0, y: 0 });
-	const isDraggingRef = useRef(false);
-	const dragStart = useRef({
-		mouseX: 0,
-		mouseY: 0,
-		transformX: 0,
-		transformY: 0,
-	});
 
-	const applyTransform = useCallback(
-		(
-			updater: (
-				prev: typeof transformRef.current
-			) => typeof transformRef.current
-		) => {
-			const next = updater(transformRef.current);
-			transformRef.current = next;
-			setTransform(next);
+	const inline = usePanZoom();
+	const modal = usePanZoom();
+
+	const renderInto = useCallback(
+		async (target: HTMLDivElement | null, prefix: string) => {
+			if (!target || !code) return false;
+			const renderId = `${prefix}-${id}-${++renderCount.current}`;
+			try {
+				const { svg, bindFunctions } = await mermaid.render(renderId, code);
+				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]
 	);
 
-	const initializeMermaid = useCallback(async () => {
-		if (!mermaidReference.current || !code) return;
-		const renderId = `mermaid-diagram-${id}-${++renderCount.current}`;
-		document.getElementById(renderId)?.remove();
-		try {
-			const { svg, bindFunctions } = await mermaid.render(renderId, code);
-			if (!mermaidReference.current || !svg) return;
-			mermaidReference.current.innerHTML = svg;
-			bindFunctions?.(mermaidReference.current);
-			setEnabled(true);
-		} catch (err) {
-			const message =
-				err instanceof Error ? err.message : 'Failed to render diagram';
-			setError(message);
-		}
-	}, [code, id]);
-
 	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]);
-
+	}, [code, renderInto, inline.reset]);
 
+	useEffect(() => {
+		if (!isExpanded) return;
+		modal.reset();
+		const timer = setTimeout(() => {
+			renderInto(modalMermaidReference.current, 'mermaid-modal');
+		}, 0);
+		return () => clearTimeout(timer);
+	}, [isExpanded, renderInto, modal.reset]);
 
-	const handleMouseDown = useCallback((e: React.MouseEvent) => {
-		e.preventDefault();
-		isDraggingRef.current = true;
-		setIsDragging(true);
-		dragStart.current = {
-			mouseX: e.clientX,
-			mouseY: e.clientY,
-			transformX: transformRef.current.x,
-			transformY: transformRef.current.y,
+	useEffect(() => {
+		if (!isExpanded) return;
+		const onKey = (e: KeyboardEvent) => {
+			if (e.key === 'Escape') setIsExpanded(false);
 		};
-	}, []);
-
-	const handleMouseMove = useCallback(
-		(e: React.MouseEvent) => {
-			if (!isDraggingRef.current) 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 = useCallback(() => {
-		isDraggingRef.current = false;
-		setIsDragging(false);
-	}, []);
-
-	const zoomIn = useCallback(() => {
-		applyTransform(prev => ({
-			...prev,
-			scale: Math.min(prev.scale * (1 + ZOOM_STEP), MAX_SCALE),
-		}));
-	}, [applyTransform]);
-
-	const zoomOut = useCallback(() => {
-		applyTransform(prev => ({
-			...prev,
-			scale: Math.max(prev.scale * (1 - ZOOM_STEP), MIN_SCALE),
-		}));
-	}, [applyTransform]);
-
-	const resetView = useCallback(() => {
-		applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
-	}, [applyTransform]);
+		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 (
 		<div
@@ -164,45 +124,55 @@ const Mermaid = ({
 					<p>Rendering diagram...</p>
 				</CalloutStatic>
 			) : (
-				<div className={styles['mermaid__controls']}>
-					<button className={styles['mermaid__controls__btn']} onClick={zoomIn}>
-						+
-					</button>
-					<button
-						className={styles['mermaid__controls__btn']}
-						onClick={zoomOut}
-					>
-						−
-					</button>
-					<button
-						className={styles['mermaid__controls__btn']}
-						onClick={resetView}
-					>
-						Reset
-					</button>
-				</div>
+				<MermaidControls
+					className={styles['mermaid__controls']}
+					isExpanded={false}
+					onZoomIn={inline.zoomIn}
+					onZoomOut={inline.zoomOut}
+					onReset={inline.reset}
+					onToggleExpand={() => setIsExpanded(true)}
+				/>
 			)}
-			<div
-				ref={viewportRef}
-				className={`${styles['mermaid__viewport']} ${
-					isDragging ? styles['mermaid__viewport--dragging'] : ''
-				}`}
-				style={enabled ? undefined : { display: 'none' }}
-				onMouseDown={handleMouseDown}
-				onMouseMove={handleMouseMove}
-				onMouseUp={handleMouseUp}
-				onMouseLeave={handleMouseUp}
-			>
-				<div
-					style={{
-						transform: `translate(${transform.x}px, ${transform.y}px) scale(${transform.scale})`,
-						transformOrigin: '0 0',
-						transition: isDragging ? 'none' : 'transform 0.1s ease',
-					}}
-				>
-					<div ref={mermaidReference} id={id} />
-				</div>
-			</div>
+			<MermaidViewport
+				className={styles['mermaid__viewport']}
+				draggingClassName={styles['mermaid__viewport--dragging']}
+				pan={inline}
+				contentRef={mermaidReference}
+				contentId={id}
+				hidden={!enabled}
+			/>
+
+			{isExpanded &&
+				typeof document !== 'undefined' &&
+				createPortal(
+					<div
+						className={styles['mermaid__modal']}
+						onClick={() => setIsExpanded(false)}
+						role="dialog"
+						aria-modal="true"
+					>
+						<div
+							className={styles['mermaid__modal__content']}
+							onClick={e => e.stopPropagation()}
+						>
+							<MermaidControls
+								className={styles['mermaid__modal__controls']}
+								isExpanded={true}
+								onZoomIn={modal.zoomIn}
+								onZoomOut={modal.zoomOut}
+								onReset={modal.reset}
+								onToggleExpand={() => setIsExpanded(false)}
+							/>
+							<MermaidViewport
+								className={styles['mermaid__modal__viewport']}
+								draggingClassName={styles['mermaid__modal__viewport--dragging']}
+								pan={modal}
+								contentRef={modalMermaidReference}
+							/>
+						</div>
+					</div>,
+					document.body
+				)}
 		</div>
 	);
 };

package/src/hooks/usePanZoom.ts

@@ -0,0 +1,105 @@
+import { useCallback, useRef, useState } from 'react';
+
+export interface Transform {
+	scale: number;
+	x: number;
+	y: number;
+}
+
+export interface UsePanZoomOptions {
+	initialTransform?: Transform;
+	minScale?: number;
+	maxScale?: number;
+	zoomStep?: number;
+}
+
+const DEFAULT_INITIAL_TRANSFORM: Transform = { scale: 1, x: 0, y: 0 };
+const DEFAULT_MIN_SCALE = 0.5;
+const DEFAULT_MAX_SCALE = 4;
+const DEFAULT_ZOOM_STEP = 0.15;
+
+export const usePanZoom = ({
+	initialTransform = DEFAULT_INITIAL_TRANSFORM,
+	minScale = DEFAULT_MIN_SCALE,
+	maxScale = DEFAULT_MAX_SCALE,
+	zoomStep = DEFAULT_ZOOM_STEP,
+}: UsePanZoomOptions = {}) => {
+	const [transform, setTransform] = useState<Transform>(initialTransform);
+	const [isDragging, setIsDragging] = useState(false);
+	const transformRef = useRef<Transform>(initialTransform);
+	const isDraggingRef = useRef(false);
+	const dragStart = useRef({
+		mouseX: 0,
+		mouseY: 0,
+		transformX: 0,
+		transformY: 0,
+	});
+
+	const apply = useCallback((updater: (prev: Transform) => Transform) => {
+		const next = updater(transformRef.current);
+		transformRef.current = next;
+		setTransform(next);
+	}, []);
+
+	const onMouseDown = useCallback((e: React.MouseEvent) => {
+		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 = useCallback(
+		(e: React.MouseEvent) => {
+			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 = useCallback(() => {
+		isDraggingRef.current = false;
+		setIsDragging(false);
+	}, []);
+
+	const zoomIn = useCallback(() => {
+		apply(prev => ({
+			...prev,
+			scale: Math.min(prev.scale * (1 + zoomStep), maxScale),
+		}));
+	}, [apply, zoomStep, maxScale]);
+
+	const zoomOut = useCallback(() => {
+		apply(prev => ({
+			...prev,
+			scale: Math.max(prev.scale * (1 - zoomStep), minScale),
+		}));
+	}, [apply, zoomStep, minScale]);
+
+	const reset = useCallback(() => {
+		apply(() => initialTransform);
+	}, [apply, initialTransform]);
+
+	return {
+		transform,
+		isDragging,
+		onMouseDown,
+		onMouseMove,
+		onMouseUp,
+		zoomIn,
+		zoomOut,
+		reset,
+	};
+};
+
+export type PanZoom = ReturnType<typeof usePanZoom>;