@san-siva/blogkit 1.1.35 → 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.35",
+	"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/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/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>;