@san-siva/blogkit 1.1.36 → 1.1.38

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

@@ -1,4 +1,4 @@
-var styles = {"margin-top--1":"CodeBlock-module_margin-top--1__mApFz","margin-bottom--2":"CodeBlock-module_margin-bottom--2__fz9IX","code-block":"CodeBlock-module_code-block__ah1AG","code-block__wrapper":"CodeBlock-module_code-block__wrapper__-IUGO","code-block__header":"CodeBlock-module_code-block__header__93VEU","code-block__header__title":"CodeBlock-module_code-block__header__title__xxZgC","code-block__header__copy":"CodeBlock-module_code-block__header__copy__NCWSg","code-block__header__copy--active":"CodeBlock-module_code-block__header__copy--active__5ByAp","code-block--static":"CodeBlock-module_code-block--static__1gBzz"};
+var styles = {"margin-top--1":"CodeBlock-module_margin-top--1__mApFz","margin-bottom--2":"CodeBlock-module_margin-bottom--2__fz9IX","code-block":"CodeBlock-module_code-block__ah1AG","code-block__wrapper":"CodeBlock-module_code-block__wrapper__-IUGO","code-block__header":"CodeBlock-module_code-block__header__93VEU","code-block__header__title":"CodeBlock-module_code-block__header__title__xxZgC","code-block__header__actions":"CodeBlock-module_code-block__header__actions__vClnL","code-block__header__expand":"CodeBlock-module_code-block__header__expand__PBJlP","code-block__header__expand--collapse":"CodeBlock-module_code-block__header__expand--collapse__93Kth","code-block__header__copy":"CodeBlock-module_code-block__header__copy__NCWSg","code-block__header__copy--active":"CodeBlock-module_code-block__header__copy--active__5ByAp","code-block__modal":"CodeBlock-module_code-block__modal__nNvcI","code-block__modal__content":"CodeBlock-module_code-block__modal__content__qWuic","code-block__modal__wrapper":"CodeBlock-module_code-block__modal__wrapper__me6hC","code-block--static":"CodeBlock-module_code-block--static__1gBzz"};
 
 export { styles as default };
 //# sourceMappingURL=CodeBlock.module.scss.js.map

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

@@ -1 +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"}
+{"version":3,"file":"MermaidViewport.d.ts","sourceRoot":"","sources":["../../../src/components/MermaidViewport.tsx"],"names":[],"mappings":"AAEA,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,4CAsCtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/CodeBlockDynamic.tsx"],"names":[],"mappings":"AAMA,OAAO,mCAAmC,CAAC;AAM3C,UAAU,UAAU;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AAED,QAAA,MAAM,SAAS,GAAI,iDAKhB,UAAU,4CAiDZ,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CodeBlockDynamic.d.ts","sourceRoot":"","sources":["../../../src/dynamicComponents/CodeBlockDynamic.tsx"],"names":[],"mappings":"AAOA,OAAO,mCAAmC,CAAC;AAM3C,UAAU,UAAU;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACd;AASD,QAAA,MAAM,SAAS,GAAI,iDAKhB,UAAU,4CAmGZ,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -17,6 +17,7 @@ export declare const usePanZoom: ({ initialTransform, minScale, maxScale, zoomSt
     onMouseUp: () => void;
     zoomIn: () => void;
     zoomOut: () => void;
+    zoomAtPoint: (deltaY: number, pointX: number, pointY: number) => void;
     reset: () => void;
 };
 export type PanZoom = ReturnType<typeof usePanZoom>;

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

@@ -1 +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"}
+{"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;;;;0BAiCX,MAAM,UAAU,MAAM,UAAU,MAAM;;CAkChD,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.36",
+	"version": "1.1.38",
 	"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/components/MermaidViewport.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react';
+
 import type { PanZoom } from '../hooks/usePanZoom';
 
 interface MermaidViewportProps {
@@ -16,25 +18,44 @@ const MermaidViewport = ({
 	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}
-	>
+}: MermaidViewportProps) => {
+	const viewportRef = useRef<HTMLDivElement>(null);
+	const { zoomAtPoint } = pan;
+
+	useEffect(() => {
+		const el = viewportRef.current;
+		if (!el) return;
+		const onWheel = (e: WheelEvent) => {
+			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 (
 		<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',
-			}}
+			ref={viewportRef}
+			className={`${className} ${pan.isDragging ? draggingClassName : ''}`}
+			style={hidden ? { display: 'none' } : undefined}
+			onMouseDown={pan.onMouseDown}
+			onMouseMove={pan.onMouseMove}
+			onMouseUp={pan.onMouseUp}
+			onMouseLeave={pan.onMouseUp}
 		>
-			<div ref={contentRef} id={contentId} />
+			<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>
-	</div>
-);
+	);
+};
 
 export default MermaidViewport;

package/src/dynamicComponents/CodeBlockDynamic.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
@@ -17,6 +18,13 @@ interface Properties {
 	code?: string;
 }
 
+const lineNumberStyle = {
+	color: '#95a1b1',
+	fontSize: '0.9em',
+	paddingRight: '1em',
+	marginRight: '8px',
+};
+
 const CodeBlock = ({
 	language = 'javascript',
 	code = '',
@@ -24,6 +32,7 @@ const CodeBlock = ({
 	hasMarginDown = false,
 }: Properties) => {
 	const [isCopyMode, setCopyMode] = useState(false);
+	const [isExpanded, setIsExpanded] = useState(false);
 
 	const copyToClipboard = async () => {
 		try {
@@ -37,38 +46,87 @@ const CodeBlock = ({
 		}
 	};
 
-	const lineNumberStyle = {
-		color: '#95a1b1',
-		fontSize: '0.9em',
-		paddingRight: '1em',
-		marginRight: '8px',
-	};
+	useEffect(() => {
+		if (!isExpanded) return;
+		const onKey = (e: KeyboardEvent) => {
+			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 (
-		<div
-			className={`${styles['code-block']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${
-				hasMarginDown ? styles['margin-bottom--2'] : ''
-			}`}
-		>
-			<div className={styles['code-block__header']}>
-				<div className={styles['code-block__header__title']}>{language}</div>
+	const renderHeader = (expanded: boolean) => (
+		<div className={styles['code-block__header']}>
+			<div className={styles['code-block__header__title']}>{language}</div>
+			<div className={styles['code-block__header__actions']}>
+				<div
+					className={`${styles['code-block__header__expand']} ${
+						expanded ? styles['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'}
+				/>
 				<div
 					className={`${styles['code-block__header__copy']} ${
 						isCopyMode ? styles['code-block__header__copy--active'] : ''
 					}`}
 					onClick={copyToClipboard}
+					role="button"
+					aria-label="Copy code"
+					title="Copy code"
 				/>
 			</div>
-			<div className={styles['code-block__wrapper']}>
-				<SH
-					language={language}
-					style={dracula}
-					showLineNumbers
-					lineNumberStyle={lineNumberStyle}
-				>
-					{code}
-				</SH>
-			</div>
+		</div>
+	);
+
+	const renderHighlighter = () => (
+		<SH
+			language={language}
+			style={dracula}
+			showLineNumbers
+			lineNumberStyle={lineNumberStyle}
+		>
+			{code}
+		</SH>
+	);
+
+	return (
+		<div
+			className={`${styles['code-block']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${
+				hasMarginDown ? styles['margin-bottom--2'] : ''
+			}`}
+		>
+			{renderHeader(false)}
+			<div className={styles['code-block__wrapper']}>{renderHighlighter()}</div>
+
+			{isExpanded &&
+				typeof document !== 'undefined' &&
+				createPortal(
+					<div
+						className={styles['code-block__modal']}
+						onClick={() => setIsExpanded(false)}
+						role="dialog"
+						aria-modal="true"
+					>
+						<div
+							className={styles['code-block__modal__content']}
+							onClick={e => e.stopPropagation()}
+						>
+							{renderHeader(true)}
+							<div className={styles['code-block__modal__wrapper']}>
+								{renderHighlighter()}
+							</div>
+						</div>
+					</div>,
+					document.body
+				)}
 		</div>
 	);
 };

package/src/hooks/usePanZoom.ts

@@ -86,6 +86,26 @@ export const usePanZoom = ({
 		}));
 	}, [apply, zoomStep, minScale]);
 
+	const zoomAtPoint = useCallback(
+		(deltaY: number, pointX: number, pointY: number) => {
+			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 = useCallback(() => {
 		apply(() => initialTransform);
 	}, [apply, initialTransform]);
@@ -98,6 +118,7 @@ export const usePanZoom = ({
 		onMouseUp,
 		zoomIn,
 		zoomOut,
+		zoomAtPoint,
 		reset,
 	};
 };

package/src/styles/CodeBlock.module.scss

@@ -85,6 +85,41 @@ $code-block-background-color: #282a36;
 			color: stylekit.$color--code;
 		}
 
+		&__actions {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			gap: stylekit.rem(4);
+		}
+
+		&__expand {
+			position: relative;
+			height: stylekit.rem(32);
+			width: stylekit.rem(32);
+			cursor: pointer;
+			transition: all 0.2s ease-in-out;
+
+			&::before {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background-image: url('../assets/expand.svg');
+				background-size: stylekit.rem(14) stylekit.rem(14);
+				background-position: center;
+				background-repeat: no-repeat;
+				filter: invert(1);
+			}
+
+			&:hover {
+				background-color: stylekit.$color--grey-dark;
+				border-radius: 100%;
+			}
+
+			&--collapse::before {
+				background-image: url('../assets/collapse.svg');
+			}
+		}
+
 		&__copy {
 			height: stylekit.rem(32);
 			width: stylekit.rem(32);
@@ -106,6 +141,76 @@ $code-block-background-color: #282a36;
 			}
 		}
 	}
+
+	&__modal {
+		position: fixed;
+		inset: 0;
+		z-index: 9999;
+		background-color: rgba(0, 0, 0, 0.7);
+		display: flex;
+		align-items: stretch;
+		justify-content: stretch;
+
+		code {
+			font-size: unset;
+			font-weight: unset;
+			background-color: unset;
+			padding: unset;
+		}
+
+		&__content {
+			background-color: $code-block-background-color;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			position: relative;
+		}
+
+		&__wrapper {
+			flex: 1;
+			font-family: stylekit.$font-family--code;
+			overflow: auto;
+
+			scrollbar-width: thin;
+			scrollbar-color: stylekit.$color--grey-dark $code-block-background-color;
+
+			&::-webkit-scrollbar {
+				height: 8px;
+				width: 8px;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: $code-block-background-color;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background-color: stylekit.$color--grey-dark;
+				border-radius: 4px;
+			}
+
+			padding: stylekit.rem(18);
+			tab-size: 2;
+
+			> pre {
+				margin: 0;
+				padding: 0 !important;
+				width: max-content;
+				min-width: 100%;
+
+				> code,
+				> code > * {
+					font-family: stylekit.$font-family--code;
+					font-size: stylekit.$font-size--small;
+					font-weight: unset;
+					font-style: unset;
+					line-height: stylekit.$line-height--normal;
+					color: unset;
+					text-align: left !important;
+				}
+			}
+		}
+	}
 }
 
 .margin-top--1 {

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

@@ -5,8 +5,14 @@ declare const styles: {
   readonly 'code-block__wrapper': string;
   readonly 'code-block__header': string;
   readonly 'code-block__header__title': string;
+  readonly 'code-block__header__actions': string;
+  readonly 'code-block__header__expand': string;
+  readonly 'code-block__header__expand--collapse': string;
   readonly 'code-block__header__copy': string;
   readonly 'code-block__header__copy--active': string;
+  readonly 'code-block__modal': string;
+  readonly 'code-block__modal__content': string;
+  readonly 'code-block__modal__wrapper': string;
 	readonly 'code-block--static': string;
   readonly 'margin-top--1': string;
   readonly 'margin-bottom--2': string;