@hanzo/ui 5.0.1 → 5.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Multi-framework UI library with React, Vue, Svelte, and React Native support. Based on shadcn/ui with comprehensive framework coverage.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package/primitives/mermaid.tsx

@@ -4,7 +4,6 @@ import { RotateCcw, Download } from 'lucide-react';
 import mermaid from 'mermaid';
 import { FC, useEffect, useRef, useState, useCallback } from 'react';
 import { toast } from 'sonner';
-import svgPanZoom from 'svg-pan-zoom';
 import { cn } from '../src/utils';
 import { Button } from './button';
 import { SyntaxHighlighterProps } from './markdown-preview';
@@ -115,13 +114,19 @@ export const MermaidDiagram: FC<MermaidDiagramProps> = ({
             svgElement.style.top = '0';
             svgElement.style.left = '0';
 
-            const panZoomInstance = svgPanZoom(svgElement);
-            panZoomInstance.fit();
-            panZoomInstance.center();
-            panZoomInstance.zoomAtPoint(1, { x: 0, y: 0 });
-            panZoomInstance.disablePan();
-            panZoomInstance.disableZoom();
-            setInstance(panZoomInstance);
+            // Dynamically import svg-pan-zoom only on client side
+            if (typeof window !== 'undefined') {
+              const svgPanZoomModule = await import('svg-pan-zoom');
+              const svgPanZoom = svgPanZoomModule.default || svgPanZoomModule;
+              
+              const panZoomInstance = svgPanZoom(svgElement);
+              panZoomInstance.fit();
+              panZoomInstance.center();
+              panZoomInstance.zoomAtPoint(1, { x: 0, y: 0 });
+              panZoomInstance.disablePan();
+              panZoomInstance.disableZoom();
+              setInstance(panZoomInstance);
+            }
           }
         }