@san-siva/blogkit 1.1.26 → 1.1.29

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"};
+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"};
 
 export { styles as default };
 //# sourceMappingURL=Mermaid.module.scss.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MermaidDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/MermaidDynamic.tsx"],"names":[],"mappings":"AAQA,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,4CAsCnB,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"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,4CAkMnB,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit",
-	"version": "1.1.26",
+	"version": "1.1.29",
 	"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",
@@ -61,6 +61,7 @@
 		"@types/react": "^18.3.12",
 		"@types/react-dom": "^18.3.1",
 		"@types/react-syntax-highlighter": "^15.5.13",
+		"mermaid": "^10.0.0",
 		"postcss": "^8.4.49",
 		"postcss-url": "^10.1.3",
 		"rollup": "^4.27.4",

package/src/dynamicComponents/MermaidDynamic.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import mermaid from 'mermaid';
 
+import CalloutStatic from '../staticComponents/CalloutStatic';
 import styles from '../styles/Mermaid.module.scss';
 
 interface MermaidProperties {
@@ -30,6 +31,10 @@ mermaid.initialize({
 	},
 });
 
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 4;
+const ZOOM_STEP = 0.15;
+
 const Mermaid = ({
 	code = '',
 	id = '',
@@ -37,31 +42,139 @@ const Mermaid = ({
 	hasMarginDown = false,
 }: 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 mermaidReference = useRef<HTMLDivElement>(null);
+	const viewportRef = 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 initializeMermaid = useCallback(async () => {
+		if (!mermaidReference.current || !code) return;
+		const renderId = `mermaid-diagram-${id}-${++renderCount.current}`;
+		document.getElementById(renderId)?.remove();
 		try {
-			if (!mermaidReference.current || !code) return;
-			const { svg, bindFunctions } = await mermaid.render(
-				`mermaid-diagram-${id}`,
-				code
-			);
-			if (!svg) return;
-			mermaidReference.current.innerHTML = svg || '';
+			const { svg, bindFunctions } = await mermaid.render(renderId, code);
+			if (!mermaidReference.current || !svg) return;
+			mermaidReference.current.innerHTML = svg;
 			bindFunctions?.(mermaidReference.current);
 			setEnabled(true);
-		} catch (error) {
-			console.error('Failed to render Mermaid diagram:', error);
+		} catch (err) {
+			const message =
+				err instanceof Error ? err.message : 'Failed to render diagram';
+			setError(message);
 		}
 	}, [code, id]);
 
 	useEffect(() => {
-		if (!code || !mermaidReference.current) return;
-		const timer = setTimeout(async () => {
-			await initializeMermaid();
-		}, 100);
+		if (!code) return;
+		setError(null);
+		applyTransform(() => ({ scale: 1, x: 0, y: 0 }));
+		const timer = setTimeout(initializeMermaid, 100);
 		return () => clearTimeout(timer);
-	}, [code, initializeMermaid]);
+	}, [code, initializeMermaid, applyTransform]);
+
+	const handleWheel = useCallback(
+		(e: WheelEvent) => {
+			e.preventDefault();
+			const factor = e.deltaY < 0 ? 1 + ZOOM_STEP : 1 - ZOOM_STEP;
+			applyTransform(prev => {
+				const newScale = Math.min(
+					Math.max(prev.scale * factor, MIN_SCALE),
+					MAX_SCALE
+				);
+				if (!viewportRef.current) return { ...prev, scale: newScale };
+				const rect = viewportRef.current.getBoundingClientRect();
+				const cursorX = e.clientX - rect.left;
+				const cursorY = e.clientY - rect.top;
+				const ratio = newScale / prev.scale;
+				return {
+					scale: newScale,
+					x: cursorX - (cursorX - prev.x) * ratio,
+					y: cursorY - (cursorY - prev.y) * ratio,
+				};
+			});
+		},
+		[applyTransform]
+	);
+
+	useEffect(() => {
+		const viewport = viewportRef.current;
+		if (!viewport || !enabled) return;
+		viewport.addEventListener('wheel', handleWheel, { passive: false });
+		return () => viewport.removeEventListener('wheel', handleWheel);
+	}, [handleWheel, enabled]);
+
+	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,
+		};
+	}, []);
+
+	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]);
 
 	return (
 		<div
@@ -69,8 +182,56 @@ const Mermaid = ({
 				${hasMarginUp ? styles['margin-top--1'] : ''}
 				${hasMarginDown ? styles['margin-bottom--2'] : ''}`}
 		>
-			{enabled ? null : <p>Diagram Loading...</p>}
-			<div ref={mermaidReference} id={id}></div>
+			{error ? (
+				<CalloutStatic type="error">
+					<p>
+						<b>Diagram error:</b> {error}
+					</p>
+				</CalloutStatic>
+			) : !enabled ? (
+				<CalloutStatic type="info">
+					<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>
+			)}
+			<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>
 		</div>
 	);
 };

package/src/styles/CheckList.module.scss

@@ -1,45 +1,45 @@
 @use '@san-siva/stylekit/styles/index.module.scss' as stylekit;
 
 .check-list {
-  display: flex;
-  flex-direction: column;
-  gap: stylekit.space(1);
+	display: flex;
+	flex-direction: column;
+	gap: stylekit.space(1);
 
-  &__item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
+	&__item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
 
-    &__input {
-      height: stylekit.rem(12);
-      width: stylekit.rem(12);
-      border: 1px solid stylekit.$color--grey-medium;
-      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
-      margin-right: stylekit.space(1);
-      flex-shrink: 0;
+		&__input {
+			height: stylekit.rem(12);
+			width: stylekit.rem(12);
+			border: 1px solid stylekit.$color--grey-medium;
+			box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
+			margin-right: stylekit.space(1);
+			flex-shrink: 0;
 
-      &--checked {
-        height: stylekit.rem(14);
-        width: stylekit.rem(14);
-        background-color: stylekit.$color--base;
-        border: 0px solid stylekit.$color--primary;
-        background-image: url('../assets/tick.svg');
-        background-size: cover;
-      }
-    }
+			&--checked {
+				height: stylekit.rem(14);
+				width: stylekit.rem(14);
+				background-color: stylekit.$color--base;
+				border: 0px solid stylekit.$color--primary;
+				background-image: url('../assets/tick.svg');
+				background-size: cover;
+			}
+		}
 
-    > p {
-      font-size: stylekit.$font-size--small;
-      margin: 0;
-    }
-  }
+		> p {
+			font-size: stylekit.$font-size--small;
+			margin: 0;
+		}
+	}
 }
 
 .margin-top--1 {
-  margin-top: stylekit.space(1);
+	margin-top: stylekit.space(1);
 }
 
 .margin-bottom--2 {
-  margin-bottom: stylekit.space(2);
+	margin-bottom: stylekit.space(2);
 }

package/src/styles/Mermaid.module.scss

@@ -6,12 +6,54 @@
 	> * {
 		background-color: unset;
 	}
+
+	&__controls {
+		display: flex;
+		flex-direction: row;
+		gap: styles.rem(4);
+		justify-content: flex-end;
+		margin-bottom: styles.rem(6);
+		opacity: 0;
+
+		&__btn {
+			background: none;
+			border: 1px solid styles.$color--grey-medium;
+			color: styles.$color--dark;
+			cursor: pointer;
+			font-size: styles.$font-size--very-small;
+			font-weight: styles.$font-weight--500;
+			line-height: 1;
+			padding: styles.rem(4) styles.rem(8);
+			border-radius: styles.rem(2);
+
+			&:hover {
+				background-color: rgba(0, 0, 0, 0.05);
+			}
+		}
+	}
+
+	&__viewport {
+		overflow: hidden;
+		cursor: grab;
+		user-select: none;
+		-webkit-user-select: none;
+
+		&--dragging {
+			cursor: grabbing;
+		}
+	}
+
+	&:hover {
+		.mermaid__controls {
+			opacity: 1;
+		}
+	}
 }
 
 .margin-top--1 {
-  margin-top: styles.space(1);
+	margin-top: styles.space(1);
 }
 
 .margin-bottom--2 {
-  margin-bottom: styles.space(2);
+	margin-bottom: styles.space(2);
 }

package/src/styles/Mermaid.module.scss.d.ts

@@ -1,5 +1,9 @@
 declare const styles: {
   readonly mermaid: string;
+  readonly 'mermaid__controls': string;
+  readonly 'mermaid__controls__btn': string;
+  readonly 'mermaid__viewport': string;
+  readonly 'mermaid__viewport--dragging': string;
   readonly 'margin-top--1': string;
   readonly 'margin-bottom--2': string;
 };