@san-siva/blogkit 1.1.36 → 1.1.38

package/dist/cjs/components/MermaidViewport.js

@@ -3,12 +3,31 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 
-const MermaidViewport = ({ className, draggingClassName, pan, contentRef, contentId, hidden, }) => (jsxRuntime.jsx("div", { className: `${className} ${pan.isDragging ? draggingClassName : ''}`, style: hidden ? { display: 'none' } : undefined, onMouseDown: pan.onMouseDown, onMouseMove: pan.onMouseMove, onMouseUp: pan.onMouseUp, onMouseLeave: pan.onMouseUp, children: jsxRuntime.jsx("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',
-        }, children: jsxRuntime.jsx("div", { ref: contentRef, id: contentId }) }) }));
+const MermaidViewport = ({ className, draggingClassName, pan, contentRef, contentId, hidden, }) => {
+    const viewportRef = react.useRef(null);
+    const { zoomAtPoint } = pan;
+    react.useEffect(() => {
+        const el = viewportRef.current;
+        if (!el)
+            return;
+        const onWheel = (e) => {
+            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 (jsxRuntime.jsx("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, children: jsxRuntime.jsx("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',
+            }, children: jsxRuntime.jsx("div", { ref: contentRef, id: contentId }) }) }));
+};
 
 exports.default = MermaidViewport;
 //# sourceMappingURL=MermaidViewport.js.map

package/dist/cjs/components/MermaidViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidViewport.js","sources":["../../../src/components/MermaidViewport.tsx"],"sourcesContent":["import type { PanZoom } from '../hooks/usePanZoom';\n\ninterface MermaidViewportProps {\n\tclassName: string;\n\tdraggingClassName: string;\n\tpan: PanZoom;\n\tcontentRef: React.RefObject<HTMLDivElement>;\n\tcontentId?: string;\n\thidden?: boolean;\n}\n\nconst MermaidViewport = ({\n\tclassName,\n\tdraggingClassName,\n\tpan,\n\tcontentRef,\n\tcontentId,\n\thidden,\n}: MermaidViewportProps) => (\n\t<div\n\t\tclassName={`${className} ${pan.isDragging ? draggingClassName : ''}`}\n\t\tstyle={hidden ? { display: 'none' } : undefined}\n\t\tonMouseDown={pan.onMouseDown}\n\t\tonMouseMove={pan.onMouseMove}\n\t\tonMouseUp={pan.onMouseUp}\n\t\tonMouseLeave={pan.onMouseUp}\n\t>\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\ttransform: `translate(${pan.transform.x}px, ${pan.transform.y}px) scale(${pan.transform.scale})`,\n\t\t\t\ttransformOrigin: '0 0',\n\t\t\t\ttransition: pan.isDragging ? 'none' : 'transform 0.1s ease',\n\t\t\t}}\n\t\t>\n\t\t\t<div ref={contentRef} id={contentId} />\n\t\t</div>\n\t</div>\n);\n\nexport default MermaidViewport;\n"],"names":["_jsx"],"mappings":";;;;;;AAWA,MAAM,eAAe,GAAG,CAAC,EACxB,SAAS,EACT,iBAAiB,EACjB,GAAG,EACH,UAAU,EACV,SAAS,EACT,MAAM,GACgB,MACtBA,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAG,SAAS,CAAA,CAAA,EAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,EAAE,EAAE,EACpE,KAAK,EAAE,MAAM,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAC/C,WAAW,EAAE,GAAG,CAAC,WAAW,EAC5B,WAAW,EAAE,GAAG,CAAC,WAAW,EAC5B,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,YAAY,EAAE,GAAG,CAAC,SAAS,EAAA,QAAA,EAE3BA,cAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAE;AACN,YAAA,SAAS,EAAE,CAAA,UAAA,EAAa,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,IAAA,EAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,UAAA,EAAa,GAAG,CAAC,SAAS,CAAC,KAAK,CAAA,CAAA,CAAG;AAChG,YAAA,eAAe,EAAE,KAAK;YACtB,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,qBAAqB;AAC3D,SAAA,EAAA,QAAA,EAEDA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAA,CAAI,EAAA,CAClC,EAAA,CACD;;;;"}
+{"version":3,"file":"MermaidViewport.js","sources":["../../../src/components/MermaidViewport.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nimport type { PanZoom } from '../hooks/usePanZoom';\n\ninterface MermaidViewportProps {\n\tclassName: string;\n\tdraggingClassName: string;\n\tpan: PanZoom;\n\tcontentRef: React.RefObject<HTMLDivElement>;\n\tcontentId?: string;\n\thidden?: boolean;\n}\n\nconst MermaidViewport = ({\n\tclassName,\n\tdraggingClassName,\n\tpan,\n\tcontentRef,\n\tcontentId,\n\thidden,\n}: MermaidViewportProps) => {\n\tconst viewportRef = useRef<HTMLDivElement>(null);\n\tconst { zoomAtPoint } = pan;\n\n\tuseEffect(() => {\n\t\tconst el = viewportRef.current;\n\t\tif (!el) return;\n\t\tconst onWheel = (e: WheelEvent) => {\n\t\t\tif (!e.ctrlKey) return;\n\t\t\te.preventDefault();\n\t\t\tconst rect = el.getBoundingClientRect();\n\t\t\tzoomAtPoint(e.deltaY, e.clientX - rect.left, e.clientY - rect.top);\n\t\t};\n\t\tel.addEventListener('wheel', onWheel, { passive: false });\n\t\treturn () => el.removeEventListener('wheel', onWheel);\n\t}, [zoomAtPoint]);\n\n\treturn (\n\t\t<div\n\t\t\tref={viewportRef}\n\t\t\tclassName={`${className} ${pan.isDragging ? draggingClassName : ''}`}\n\t\t\tstyle={hidden ? { display: 'none' } : undefined}\n\t\t\tonMouseDown={pan.onMouseDown}\n\t\t\tonMouseMove={pan.onMouseMove}\n\t\t\tonMouseUp={pan.onMouseUp}\n\t\t\tonMouseLeave={pan.onMouseUp}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\ttransform: `translate(${pan.transform.x}px, ${pan.transform.y}px) scale(${pan.transform.scale})`,\n\t\t\t\t\ttransformOrigin: '0 0',\n\t\t\t\t\ttransition: pan.isDragging ? 'none' : 'transform 0.1s ease',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div ref={contentRef} id={contentId} />\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default MermaidViewport;\n"],"names":["useRef","useEffect","_jsx"],"mappings":";;;;;;;AAaA,MAAM,eAAe,GAAG,CAAC,EACxB,SAAS,EACT,iBAAiB,EACjB,GAAG,EACH,UAAU,EACV,SAAS,EACT,MAAM,GACgB,KAAI;AAC1B,IAAA,MAAM,WAAW,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAChD,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,GAAG;IAE3BC,eAAS,CAAC,MAAK;AACd,QAAA,MAAM,EAAE,GAAG,WAAW,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,EAAE;YAAE;AACT,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YACjC,IAAI,CAAC,CAAC,CAAC,OAAO;gBAAE;YAChB,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,IAAI,GAAG,EAAE,CAAC,qBAAqB,EAAE;YACvC,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC;AACnE,QAAA,CAAC;AACD,QAAA,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;QACzD,OAAO,MAAM,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC;AACtD,IAAA,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC;AAEjB,IAAA,QACCC,cAAA,CAAA,KAAA,EAAA,EACC,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,CAAA,EAAG,SAAS,CAAA,CAAA,EAAI,GAAG,CAAC,UAAU,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EACpE,KAAK,EAAE,MAAM,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,SAAS,EAC/C,WAAW,EAAE,GAAG,CAAC,WAAW,EAC5B,WAAW,EAAE,GAAG,CAAC,WAAW,EAC5B,SAAS,EAAE,GAAG,CAAC,SAAS,EACxB,YAAY,EAAE,GAAG,CAAC,SAAS,EAAA,QAAA,EAE3BA,cAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAE;AACN,gBAAA,SAAS,EAAE,CAAA,UAAA,EAAa,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,IAAA,EAAO,GAAG,CAAC,SAAS,CAAC,CAAC,CAAA,UAAA,EAAa,GAAG,CAAC,SAAS,CAAC,KAAK,CAAA,CAAA,CAAG;AAChG,gBAAA,eAAe,EAAE,KAAK;gBACtB,UAAU,EAAE,GAAG,CAAC,UAAU,GAAG,MAAM,GAAG,qBAAqB;AAC3D,aAAA,EAAA,QAAA,EAEDA,cAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAA,CAAI,EAAA,CAClC,EAAA,CACD;AAER;;;;"}

package/dist/cjs/dynamicComponents/CodeBlockDynamic.js

@@ -5,14 +5,22 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var reactDom = require('react-dom');
 var reactSyntaxHighlighter = require('react-syntax-highlighter');
 var prism = require('react-syntax-highlighter/dist/esm/styles/prism');
 require('prismjs/themes/prism-tomorrow.css');
 var CodeBlock_module = require('../styles/CodeBlock.module.scss.js');
 
 const SH = reactSyntaxHighlighter.Prism;
+const lineNumberStyle = {
+    color: '#95a1b1',
+    fontSize: '0.9em',
+    paddingRight: '1em',
+    marginRight: '8px',
+};
 const CodeBlock = ({ language = 'javascript', code = '', hasMarginUp = false, hasMarginDown = false, }) => {
     const [isCopyMode, setCopyMode] = react.useState(false);
+    const [isExpanded, setIsExpanded] = react.useState(false);
     const copyToClipboard = async () => {
         try {
             await navigator.clipboard.writeText(code);
@@ -25,13 +33,26 @@ const CodeBlock = ({ language = 'javascript', code = '', hasMarginUp = false, ha
             console.error('Failed to copy:', error);
         }
     };
-    const lineNumberStyle = {
-        color: '#95a1b1',
-        fontSize: '0.9em',
-        paddingRight: '1em',
-        marginRight: '8px',
-    };
-    return (jsxRuntime.jsxs("div", { className: `${CodeBlock_module.default['code-block']} ${hasMarginUp ? CodeBlock_module.default['margin-top--1'] : ''} ${hasMarginDown ? CodeBlock_module.default['margin-bottom--2'] : ''}`, children: [jsxRuntime.jsxs("div", { className: CodeBlock_module.default['code-block__header'], children: [jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__header__title'], children: language }), jsxRuntime.jsx("div", { className: `${CodeBlock_module.default['code-block__header__copy']} ${isCopyMode ? CodeBlock_module.default['code-block__header__copy--active'] : ''}`, onClick: copyToClipboard })] }), jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__wrapper'], children: jsxRuntime.jsx(SH, { language: language, style: prism.dracula, showLineNumbers: true, lineNumberStyle: lineNumberStyle, children: code }) })] }));
+    react.useEffect(() => {
+        if (!isExpanded)
+            return;
+        const onKey = (e) => {
+            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]);
+    const renderHeader = (expanded) => (jsxRuntime.jsxs("div", { className: CodeBlock_module.default['code-block__header'], children: [jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__header__title'], children: language }), jsxRuntime.jsxs("div", { className: CodeBlock_module.default['code-block__header__actions'], children: [jsxRuntime.jsx("div", { className: `${CodeBlock_module.default['code-block__header__expand']} ${expanded ? CodeBlock_module.default['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' }), jsxRuntime.jsx("div", { className: `${CodeBlock_module.default['code-block__header__copy']} ${isCopyMode ? CodeBlock_module.default['code-block__header__copy--active'] : ''}`, onClick: copyToClipboard, role: "button", "aria-label": "Copy code", title: "Copy code" })] })] }));
+    const renderHighlighter = () => (jsxRuntime.jsx(SH, { language: language, style: prism.dracula, showLineNumbers: true, lineNumberStyle: lineNumberStyle, children: code }));
+    return (jsxRuntime.jsxs("div", { className: `${CodeBlock_module.default['code-block']} ${hasMarginUp ? CodeBlock_module.default['margin-top--1'] : ''} ${hasMarginDown ? CodeBlock_module.default['margin-bottom--2'] : ''}`, children: [renderHeader(false), jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__wrapper'], children: renderHighlighter() }), isExpanded &&
+                typeof document !== 'undefined' &&
+                reactDom.createPortal(jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__modal'], onClick: () => setIsExpanded(false), role: "dialog", "aria-modal": "true", children: jsxRuntime.jsxs("div", { className: CodeBlock_module.default['code-block__modal__content'], onClick: e => e.stopPropagation(), children: [renderHeader(true), jsxRuntime.jsx("div", { className: CodeBlock_module.default['code-block__modal__wrapper'], children: renderHighlighter() })] }) }), document.body)] }));
 };
 
 exports.default = CodeBlock;

package/dist/cjs/dynamicComponents/CodeBlockDynamic.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlockDynamic.js","sources":["../../../src/dynamicComponents/CodeBlockDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport 'prismjs/themes/prism-tomorrow.css';\n\nconst SH = SyntaxHighlighter as any;\n\nimport styles from '../styles/CodeBlock.module.scss';\n\ninterface Properties {\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n\tlanguage?: string;\n\tcode?: string;\n}\n\nconst CodeBlock = ({\n\tlanguage = 'javascript',\n\tcode = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: Properties) => {\n\tconst [isCopyMode, setCopyMode] = useState(false);\n\n\tconst copyToClipboard = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopyMode(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetCopyMode(false);\n\t\t\t}, 1000);\n\t\t} catch (error) {\n\t\t\tconsole.error('Failed to copy:', error);\n\t\t}\n\t};\n\n\tconst lineNumberStyle = {\n\t\tcolor: '#95a1b1',\n\t\tfontSize: '0.9em',\n\t\tpaddingRight: '1em',\n\t\tmarginRight: '8px',\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['code-block']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${\n\t\t\t\thasMarginDown ? styles['margin-bottom--2'] : ''\n\t\t\t}`}\n\t\t>\n\t\t\t<div className={styles['code-block__header']}>\n\t\t\t\t<div className={styles['code-block__header__title']}>{language}</div>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles['code-block__header__copy']} ${\n\t\t\t\t\t\tisCopyMode ? styles['code-block__header__copy--active'] : ''\n\t\t\t\t\t}`}\n\t\t\t\t\tonClick={copyToClipboard}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t<div className={styles['code-block__wrapper']}>\n\t\t\t\t<SH\n\t\t\t\t\tlanguage={language}\n\t\t\t\t\tstyle={dracula}\n\t\t\t\t\tshowLineNumbers\n\t\t\t\t\tlineNumberStyle={lineNumberStyle}\n\t\t\t\t>\n\t\t\t\t\t{code}\n\t\t\t\t</SH>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default CodeBlock;\n"],"names":["SyntaxHighlighter","useState","_jsxs","styles","_jsx","dracula"],"mappings":";;;;;;;;;;;AAQA,MAAM,EAAE,GAAGA,4BAAwB;AAWnC,MAAM,SAAS,GAAG,CAAC,EAClB,QAAQ,GAAG,YAAY,EACvB,IAAI,GAAG,EAAE,EACT,WAAW,GAAG,KAAK,EACnB,aAAa,GAAG,KAAK,GACT,KAAI;IAChB,MAAM,CAAC,UAAU,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,eAAe,GAAG,YAAW;AAClC,QAAA,IAAI;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;YACzC,WAAW,CAAC,IAAI,CAAC;YACjB,UAAU,CAAC,MAAK;gBACf,WAAW,CAAC,KAAK,CAAC;YACnB,CAAC,EAAE,IAAI,CAAC;QACT;QAAE,OAAO,KAAK,EAAE;AACf,YAAA,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,CAAC;QACxC;AACD,IAAA,CAAC;AAED,IAAA,MAAM,eAAe,GAAG;AACvB,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,QAAQ,EAAE,OAAO;AACjB,QAAA,YAAY,EAAE,KAAK;AACnB,QAAA,WAAW,EAAE,KAAK;KAClB;IAED,QACCC,eAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGC,wBAAM,CAAC,YAAY,CAAC,CAAA,CAAA,EAAI,WAAW,GAAGA,wBAAM,CAAC,eAAe,CAAC,GAAG,EAAE,CAAA,CAAA,EAC/E,aAAa,GAAGA,wBAAM,CAAC,kBAAkB,CAAC,GAAG,EAC9C,CAAA,CAAE,EAAA,QAAA,EAAA,CAEFD,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,wBAAM,CAAC,oBAAoB,CAAC,EAAA,QAAA,EAAA,CAC3CC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,wBAAM,CAAC,2BAA2B,CAAC,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,EACrEC,cAAA,CAAA,KAAA,EAAA,EACC,SAAS,EAAE,CAAA,EAAGD,wBAAM,CAAC,0BAA0B,CAAC,CAAA,CAAA,EAC/C,UAAU,GAAGA,wBAAM,CAAC,kCAAkC,CAAC,GAAG,EAC3D,CAAA,CAAE,EACF,OAAO,EAAE,eAAe,EAAA,CACvB,CAAA,EAAA,CACG,EACNC,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAED,wBAAM,CAAC,qBAAqB,CAAC,EAAA,QAAA,EAC5CC,cAAA,CAAC,EAAE,EAAA,EACF,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAEC,aAAO,EACd,eAAe,EAAA,IAAA,EACf,eAAe,EAAE,eAAe,EAAA,QAAA,EAE/B,IAAI,EAAA,CACD,EAAA,CACA,CAAA,EAAA,CACD;AAER;;;;"}
+{"version":3,"file":"CodeBlockDynamic.js","sources":["../../../src/dynamicComponents/CodeBlockDynamic.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';\n\nimport 'prismjs/themes/prism-tomorrow.css';\n\nconst SH = SyntaxHighlighter as any;\n\nimport styles from '../styles/CodeBlock.module.scss';\n\ninterface Properties {\n\thasMarginUp?: boolean;\n\thasMarginDown?: boolean;\n\tlanguage?: string;\n\tcode?: string;\n}\n\nconst lineNumberStyle = {\n\tcolor: '#95a1b1',\n\tfontSize: '0.9em',\n\tpaddingRight: '1em',\n\tmarginRight: '8px',\n};\n\nconst CodeBlock = ({\n\tlanguage = 'javascript',\n\tcode = '',\n\thasMarginUp = false,\n\thasMarginDown = false,\n}: Properties) => {\n\tconst [isCopyMode, setCopyMode] = useState(false);\n\tconst [isExpanded, setIsExpanded] = useState(false);\n\n\tconst copyToClipboard = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopyMode(true);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetCopyMode(false);\n\t\t\t}, 1000);\n\t\t} catch (error) {\n\t\t\tconsole.error('Failed to copy:', error);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (!isExpanded) return;\n\t\tconst onKey = (e: KeyboardEvent) => {\n\t\t\tif (e.key === 'Escape') setIsExpanded(false);\n\t\t};\n\t\tconst previousOverflow = document.body.style.overflow;\n\t\tdocument.body.style.overflow = 'hidden';\n\t\twindow.addEventListener('keydown', onKey);\n\t\treturn () => {\n\t\t\tdocument.body.style.overflow = previousOverflow;\n\t\t\twindow.removeEventListener('keydown', onKey);\n\t\t};\n\t}, [isExpanded]);\n\n\tconst renderHeader = (expanded: boolean) => (\n\t\t<div className={styles['code-block__header']}>\n\t\t\t<div className={styles['code-block__header__title']}>{language}</div>\n\t\t\t<div className={styles['code-block__header__actions']}>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles['code-block__header__expand']} ${\n\t\t\t\t\t\texpanded ? styles['code-block__header__expand--collapse'] : ''\n\t\t\t\t\t}`}\n\t\t\t\t\tonClick={() => setIsExpanded(!expanded)}\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-label={expanded ? 'Close fullscreen' : 'Expand to fullscreen'}\n\t\t\t\t\ttitle={expanded ? 'Close fullscreen' : 'Expand to fullscreen'}\n\t\t\t\t/>\n\t\t\t\t<div\n\t\t\t\t\tclassName={`${styles['code-block__header__copy']} ${\n\t\t\t\t\t\tisCopyMode ? styles['code-block__header__copy--active'] : ''\n\t\t\t\t\t}`}\n\t\t\t\t\tonClick={copyToClipboard}\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\taria-label=\"Copy code\"\n\t\t\t\t\ttitle=\"Copy code\"\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\tconst renderHighlighter = () => (\n\t\t<SH\n\t\t\tlanguage={language}\n\t\t\tstyle={dracula}\n\t\t\tshowLineNumbers\n\t\t\tlineNumberStyle={lineNumberStyle}\n\t\t>\n\t\t\t{code}\n\t\t</SH>\n\t);\n\n\treturn (\n\t\t<div\n\t\t\tclassName={`${styles['code-block']} ${hasMarginUp ? styles['margin-top--1'] : ''} ${\n\t\t\t\thasMarginDown ? styles['margin-bottom--2'] : ''\n\t\t\t}`}\n\t\t>\n\t\t\t{renderHeader(false)}\n\t\t\t<div className={styles['code-block__wrapper']}>{renderHighlighter()}</div>\n\n\t\t\t{isExpanded &&\n\t\t\t\ttypeof document !== 'undefined' &&\n\t\t\t\tcreatePortal(\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={styles['code-block__modal']}\n\t\t\t\t\t\tonClick={() => setIsExpanded(false)}\n\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={styles['code-block__modal__content']}\n\t\t\t\t\t\t\tonClick={e => e.stopPropagation()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{renderHeader(true)}\n\t\t\t\t\t\t\t<div className={styles['code-block__modal__wrapper']}>\n\t\t\t\t\t\t\t\t{renderHighlighter()}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>,\n\t\t\t\t\tdocument.body\n\t\t\t\t)}\n\t\t</div>\n\t);\n};\n\nexport default CodeBlock;\n"],"names":["SyntaxHighlighter","useState","useEffect","_jsxs","styles","_jsx","dracula","createPortal"],"mappings":"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"}

package/dist/cjs/hooks/usePanZoom.js

@@ -58,6 +58,20 @@ const usePanZoom = ({ initialTransform = DEFAULT_INITIAL_TRANSFORM, minScale = D
             scale: Math.max(prev.scale * (1 - zoomStep), minScale),
         }));
     }, [apply, zoomStep, minScale]);
+    const zoomAtPoint = react.useCallback((deltaY, pointX, pointY) => {
+        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 = react.useCallback(() => {
         apply(() => initialTransform);
     }, [apply, initialTransform]);
@@ -69,6 +83,7 @@ const usePanZoom = ({ initialTransform = DEFAULT_INITIAL_TRANSFORM, minScale = D
         onMouseUp,
         zoomIn,
         zoomOut,
+        zoomAtPoint,
         reset,
     };
 };

package/dist/cjs/hooks/usePanZoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePanZoom.js","sources":["../../../src/hooks/usePanZoom.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface Transform {\n\tscale: number;\n\tx: number;\n\ty: number;\n}\n\nexport interface UsePanZoomOptions {\n\tinitialTransform?: Transform;\n\tminScale?: number;\n\tmaxScale?: number;\n\tzoomStep?: number;\n}\n\nconst DEFAULT_INITIAL_TRANSFORM: Transform = { scale: 1, x: 0, y: 0 };\nconst DEFAULT_MIN_SCALE = 0.5;\nconst DEFAULT_MAX_SCALE = 4;\nconst DEFAULT_ZOOM_STEP = 0.15;\n\nexport const usePanZoom = ({\n\tinitialTransform = DEFAULT_INITIAL_TRANSFORM,\n\tminScale = DEFAULT_MIN_SCALE,\n\tmaxScale = DEFAULT_MAX_SCALE,\n\tzoomStep = DEFAULT_ZOOM_STEP,\n}: UsePanZoomOptions = {}) => {\n\tconst [transform, setTransform] = useState<Transform>(initialTransform);\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst transformRef = useRef<Transform>(initialTransform);\n\tconst isDraggingRef = useRef(false);\n\tconst dragStart = useRef({\n\t\tmouseX: 0,\n\t\tmouseY: 0,\n\t\ttransformX: 0,\n\t\ttransformY: 0,\n\t});\n\n\tconst apply = useCallback((updater: (prev: Transform) => Transform) => {\n\t\tconst next = updater(transformRef.current);\n\t\ttransformRef.current = next;\n\t\tsetTransform(next);\n\t}, []);\n\n\tconst onMouseDown = useCallback((e: React.MouseEvent) => {\n\t\te.preventDefault();\n\t\tisDraggingRef.current = true;\n\t\tsetIsDragging(true);\n\t\tdragStart.current = {\n\t\t\tmouseX: e.clientX,\n\t\t\tmouseY: e.clientY,\n\t\t\ttransformX: transformRef.current.x,\n\t\t\ttransformY: transformRef.current.y,\n\t\t};\n\t}, []);\n\n\tconst onMouseMove = useCallback(\n\t\t(e: React.MouseEvent) => {\n\t\t\tif (!isDraggingRef.current) return;\n\t\t\tapply(prev => ({\n\t\t\t\t...prev,\n\t\t\t\tx:\n\t\t\t\t\tdragStart.current.transformX + (e.clientX - dragStart.current.mouseX),\n\t\t\t\ty:\n\t\t\t\t\tdragStart.current.transformY + (e.clientY - dragStart.current.mouseY),\n\t\t\t}));\n\t\t},\n\t\t[apply]\n\t);\n\n\tconst onMouseUp = useCallback(() => {\n\t\tisDraggingRef.current = false;\n\t\tsetIsDragging(false);\n\t}, []);\n\n\tconst zoomIn = useCallback(() => {\n\t\tapply(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.min(prev.scale * (1 + zoomStep), maxScale),\n\t\t}));\n\t}, [apply, zoomStep, maxScale]);\n\n\tconst zoomOut = useCallback(() => {\n\t\tapply(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.max(prev.scale * (1 - zoomStep), minScale),\n\t\t}));\n\t}, [apply, zoomStep, minScale]);\n\n\tconst reset = useCallback(() => {\n\t\tapply(() => initialTransform);\n\t}, [apply, initialTransform]);\n\n\treturn {\n\t\ttransform,\n\t\tisDragging,\n\t\tonMouseDown,\n\t\tonMouseMove,\n\t\tonMouseUp,\n\t\tzoomIn,\n\t\tzoomOut,\n\t\treset,\n\t};\n};\n\nexport type PanZoom = ReturnType<typeof usePanZoom>;\n"],"names":["useState","useRef","useCallback"],"mappings":"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"}
+{"version":3,"file":"usePanZoom.js","sources":["../../../src/hooks/usePanZoom.ts"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\n\nexport interface Transform {\n\tscale: number;\n\tx: number;\n\ty: number;\n}\n\nexport interface UsePanZoomOptions {\n\tinitialTransform?: Transform;\n\tminScale?: number;\n\tmaxScale?: number;\n\tzoomStep?: number;\n}\n\nconst DEFAULT_INITIAL_TRANSFORM: Transform = { scale: 1, x: 0, y: 0 };\nconst DEFAULT_MIN_SCALE = 0.5;\nconst DEFAULT_MAX_SCALE = 4;\nconst DEFAULT_ZOOM_STEP = 0.15;\n\nexport const usePanZoom = ({\n\tinitialTransform = DEFAULT_INITIAL_TRANSFORM,\n\tminScale = DEFAULT_MIN_SCALE,\n\tmaxScale = DEFAULT_MAX_SCALE,\n\tzoomStep = DEFAULT_ZOOM_STEP,\n}: UsePanZoomOptions = {}) => {\n\tconst [transform, setTransform] = useState<Transform>(initialTransform);\n\tconst [isDragging, setIsDragging] = useState(false);\n\tconst transformRef = useRef<Transform>(initialTransform);\n\tconst isDraggingRef = useRef(false);\n\tconst dragStart = useRef({\n\t\tmouseX: 0,\n\t\tmouseY: 0,\n\t\ttransformX: 0,\n\t\ttransformY: 0,\n\t});\n\n\tconst apply = useCallback((updater: (prev: Transform) => Transform) => {\n\t\tconst next = updater(transformRef.current);\n\t\ttransformRef.current = next;\n\t\tsetTransform(next);\n\t}, []);\n\n\tconst onMouseDown = useCallback((e: React.MouseEvent) => {\n\t\te.preventDefault();\n\t\tisDraggingRef.current = true;\n\t\tsetIsDragging(true);\n\t\tdragStart.current = {\n\t\t\tmouseX: e.clientX,\n\t\t\tmouseY: e.clientY,\n\t\t\ttransformX: transformRef.current.x,\n\t\t\ttransformY: transformRef.current.y,\n\t\t};\n\t}, []);\n\n\tconst onMouseMove = useCallback(\n\t\t(e: React.MouseEvent) => {\n\t\t\tif (!isDraggingRef.current) return;\n\t\t\tapply(prev => ({\n\t\t\t\t...prev,\n\t\t\t\tx:\n\t\t\t\t\tdragStart.current.transformX + (e.clientX - dragStart.current.mouseX),\n\t\t\t\ty:\n\t\t\t\t\tdragStart.current.transformY + (e.clientY - dragStart.current.mouseY),\n\t\t\t}));\n\t\t},\n\t\t[apply]\n\t);\n\n\tconst onMouseUp = useCallback(() => {\n\t\tisDraggingRef.current = false;\n\t\tsetIsDragging(false);\n\t}, []);\n\n\tconst zoomIn = useCallback(() => {\n\t\tapply(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.min(prev.scale * (1 + zoomStep), maxScale),\n\t\t}));\n\t}, [apply, zoomStep, maxScale]);\n\n\tconst zoomOut = useCallback(() => {\n\t\tapply(prev => ({\n\t\t\t...prev,\n\t\t\tscale: Math.max(prev.scale * (1 - zoomStep), minScale),\n\t\t}));\n\t}, [apply, zoomStep, minScale]);\n\n\tconst zoomAtPoint = useCallback(\n\t\t(deltaY: number, pointX: number, pointY: number) => {\n\t\t\tapply(prev => {\n\t\t\t\tconst factor = deltaY < 0 ? 1 + zoomStep : 1 - zoomStep;\n\t\t\t\tconst newScale = Math.max(\n\t\t\t\t\tminScale,\n\t\t\t\t\tMath.min(maxScale, prev.scale * factor)\n\t\t\t\t);\n\t\t\t\tif (newScale === prev.scale) return prev;\n\t\t\t\tconst ratio = newScale / prev.scale;\n\t\t\t\treturn {\n\t\t\t\t\tscale: newScale,\n\t\t\t\t\tx: pointX - (pointX - prev.x) * ratio,\n\t\t\t\t\ty: pointY - (pointY - prev.y) * ratio,\n\t\t\t\t};\n\t\t\t});\n\t\t},\n\t\t[apply, zoomStep, minScale, maxScale]\n\t);\n\n\tconst reset = useCallback(() => {\n\t\tapply(() => initialTransform);\n\t}, [apply, initialTransform]);\n\n\treturn {\n\t\ttransform,\n\t\tisDragging,\n\t\tonMouseDown,\n\t\tonMouseMove,\n\t\tonMouseUp,\n\t\tzoomIn,\n\t\tzoomOut,\n\t\tzoomAtPoint,\n\t\treset,\n\t};\n};\n\nexport type PanZoom = ReturnType<typeof usePanZoom>;\n"],"names":["useState","useRef","useCallback"],"mappings":"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"}