@san-siva/blogkit 1.1.35 → 1.1.37

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/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":"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/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,24 @@
+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;
+    zoomAtPoint: (deltaY: number, pointX: number, pointY: number) => 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;;;;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.35",
+	"version": "1.1.37",
 	"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,61 @@
+import { useEffect, useRef } from 'react';
+
+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) => {
+	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
+			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
+				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/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>
 	);
 };