@djangocfg/ui-nextjs 2.1.27 → 2.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.27",
+  "version": "2.1.28",
   "description": "Next.js UI component library with Radix UI primitives, Tailwind CSS styling, charts, and form components",
   "keywords": [
     "ui-components",
@@ -58,8 +58,8 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.27",
-    "@djangocfg/ui-core": "^2.1.27",
+    "@djangocfg/api": "^2.1.28",
+    "@djangocfg/ui-core": "^2.1.28",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -104,7 +104,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.27",
+    "@djangocfg/typescript-config": "^2.1.28",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

package/src/hooks/useLocalStorage.ts

@@ -74,7 +74,6 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
             const key = keys[i];
             if (key) {
               localStorage.removeItem(key);
-              localStorage.removeItem(`${key}_timestamp`);
             }
           } catch {
             // Ignore errors when removing items
@@ -133,8 +132,6 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
           } else {
             window.localStorage.setItem(key, JSON.stringify(valueToStore));
           }
-          // Add timestamp for cleanup
-          window.localStorage.setItem(`${key}_timestamp`, Date.now().toString());
         } catch (storageError: any) {
           // If quota exceeded, clear old data and try again
           if (storageError.name === 'QuotaExceededError' || 
@@ -151,7 +148,6 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
               } else {
                 window.localStorage.setItem(key, JSON.stringify(valueToStore));
               }
-              window.localStorage.setItem(`${key}_timestamp`, Date.now().toString());
             } catch (retryError) {
               console.error(`Failed to set localStorage key "${key}" after clearing old data:`, retryError);
               // If still fails, force clear all and try one more time
@@ -163,7 +159,6 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
                 } else {
                   window.localStorage.setItem(key, JSON.stringify(valueToStore));
                 }
-                window.localStorage.setItem(`${key}_timestamp`, Date.now().toString());
               } catch (finalError) {
                 console.error(`Failed to set localStorage key "${key}" after force clearing:`, finalError);
                 // If still fails, just update the state without localStorage
@@ -190,7 +185,6 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
       if (typeof window !== 'undefined') {
         try {
           window.localStorage.removeItem(key);
-          window.localStorage.removeItem(`${key}_timestamp`);
         } catch (removeError: any) {
           // If removal fails due to quota, try to clear some data first
           if (removeError.name === 'QuotaExceededError' || 
@@ -198,10 +192,9 @@ export function useLocalStorage<T>(key: string, initialValue: T) {
               removeError.message?.includes('quota')) {
             console.warn('localStorage quota exceeded during removal, clearing old data...');
             clearOldData();
-            
+
             try {
               window.localStorage.removeItem(key);
-              window.localStorage.removeItem(`${key}_timestamp`);
             } catch (retryError) {
               console.error(`Failed to remove localStorage key "${key}" after clearing:`, retryError);
               // If still fails, force clear all

package/src/tools/Mermaid/Mermaid.client.tsx

@@ -1,288 +1,42 @@
 'use client';
 
-import mermaid from 'mermaid';
-import React, { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React from 'react';
 import { useResolvedTheme } from '../../hooks/useResolvedTheme';
+import { useMermaidRenderer } from './hooks/useMermaidRenderer';
+import { useMermaidFullscreen } from './hooks/useMermaidFullscreen';
+import { MermaidFullscreenModal } from './components/MermaidFullscreenModal';
 
 interface MermaidProps {
     chart: string;
     className?: string;
-    isCompact?: boolean; // Compact mode for smaller font sizes
+    isCompact?: boolean;
 }
 
-// Utility function to apply text colors to Mermaid SVG
-const applyMermaidTextColors = (container: HTMLElement, textColor: string) => {
-    const svgElement = container.querySelector('svg');
-    if (svgElement) {
-        // SVG text elements use 'fill'
-        svgElement.querySelectorAll('text').forEach((el) => {
-            (el as SVGElement).style.fill = textColor;
-        });
-
-        // HTML elements inside foreignObject use 'color'
-        svgElement.querySelectorAll('.nodeLabel, .edgeLabel').forEach((el) => {
-            (el as HTMLElement).style.color = textColor;
-        });
-    }
-};
-
-// Detect if diagram is vertical (tall and narrow)
-const isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {
-    const viewBox = svgElement.getAttribute('viewBox');
-    if (viewBox) {
-        const [, , width, height] = viewBox.split(' ').map(Number);
-        // Consider vertical if height is more than 1.5x the width
-        return height > width * 1.5;
-    }
-    // Fallback to computed dimensions
-    const bbox = svgElement.getBBox?.();
-    if (bbox) {
-        return bbox.height > bbox.width * 1.5;
-    }
-    return false;
-};
-
 const Mermaid: React.FC<MermaidProps> = ({ chart, className = '', isCompact = false }) => {
-    const mermaidRef = useRef<HTMLDivElement>(null);
-    const fullscreenRef = useRef<HTMLDivElement>(null);
-    const [isFullscreen, setIsFullscreen] = useState(false);
-    const [svgContent, setSvgContent] = useState<string>('');
-    const [isVertical, setIsVertical] = useState(false);
     const theme = useResolvedTheme();
 
-    useEffect(() => {
-        // Get CSS variables for semantic colors
-        const getCSSVariable = (variable: string) => {
-            if (typeof document === 'undefined') return '';
-            const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
-            return value ? `hsl(${value})` : '';
-        };
-
-        // Font size based on compact mode
-        const diagramFontSize = isCompact ? '12px' : '14px';
-
-        // Note: In Mermaid v11+, mermaidAPI.reset() no longer exists
-        // Re-initialization happens automatically via mermaid.initialize()
-
-        const themeVariables = theme === 'dark' ? {
-                // Dark theme - vibrant and clear
-                primaryColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
-                primaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
-                primaryBorderColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
-
-                secondaryColor: getCSSVariable('--muted') || 'hsl(217.2 32.6% 17.5%)',
-                secondaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
-                secondaryBorderColor: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',
-
-                tertiaryColor: getCSSVariable('--accent') || 'hsl(217.2 32.6% 20%)',
-                tertiaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
-                tertiaryBorderColor: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',
-
-                // Main elements - darker with good contrast
-                mainBkg: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
-                textColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
-                nodeBorder: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',
-                nodeTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
-
-                // Alternative backgrounds
-                secondBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 17.5%)',
-
-                // Lines and edges - lighter for visibility
-                lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
-                edgeLabelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
-
-                // Clusters
-                clusterBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 12%)',
-                clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
-
-                // Background
-                background: getCSSVariable('--background') || 'hsl(222.2 84% 4.9%)',
-
-                // Labels
-                labelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
-                labelTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
-
-                // Special states
-                errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 62.8% 30.6%)',
-                errorTextColor: 'hsl(210 40% 98%)',
-
-                fontSize: diagramFontSize,
-                fontFamily: 'Inter, system-ui, sans-serif',
-            } : {
-                // Light theme - clean and professional
-                primaryColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
-                primaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
-                primaryBorderColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
-
-                secondaryColor: getCSSVariable('--secondary') || 'hsl(210 40% 96.1%)',
-                secondaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
-                secondaryBorderColor: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',
-
-                tertiaryColor: getCSSVariable('--muted') || 'hsl(210 40% 96.1%)',
-                tertiaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
-                tertiaryBorderColor: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',
-
-                // Main elements - white with good contrast
-                mainBkg: getCSSVariable('--card') || 'hsl(0 0% 100%)',
-                textColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
-                nodeBorder: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',
-                nodeTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
-
-                // Alternative backgrounds
-                secondBkg: getCSSVariable('--muted') || 'hsl(210 40% 96.1%)',
-
-                // Lines and edges - vibrant primary color
-                lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
-                edgeLabelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',
-
-                // Clusters - subtle background
-                clusterBkg: getCSSVariable('--accent') || 'hsl(210 40% 98%)',
-                clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
-
-                // Background
-                background: getCSSVariable('--background') || 'hsl(0 0% 100%)',
-
-                // Labels
-                labelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',
-                labelTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
-
-                // Special states
-                errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 84.2% 60.2%)',
-                errorTextColor: 'hsl(210 40% 98%)',
-
-                fontSize: diagramFontSize,
-                fontFamily: 'Inter, system-ui, sans-serif',
-            };
-
-        // Initialize mermaid with dynamic theme configuration
-        mermaid.initialize({
-            startOnLoad: false,
-            theme: 'base', // Use 'base' theme for better custom variable support
-            securityLevel: 'loose',
-            fontFamily: 'Inter, system-ui, sans-serif',
-            flowchart: {
-                useMaxWidth: true,
-                htmlLabels: true,
-                curve: 'basis',
-            },
-            themeVariables,
-        });
-
-        // Render the chart
-        // Mermaid v11+ requires unique IDs - use random suffix to avoid conflicts
-        const renderChart = async () => {
-            if (!mermaidRef.current || !chart) return;
-
-            try {
-                const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`;
-                const { svg } = await mermaid.render(id, chart);
-
-                if (mermaidRef.current) {
-                    // Post-process SVG to force correct text colors
-                    const textColor = theme === 'dark'
-                        ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'
-                        : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';
-
-                    // Add inline style to override any conflicting styles
-                    const processedSvg = svg.replace(
-                        /<svg /,
-                        `<svg style="--mermaid-text-color: ${textColor};" `
-                    );
-
-                    mermaidRef.current.innerHTML = processedSvg;
-                    setSvgContent(processedSvg);
-
-                    // Apply text colors and responsive styles using utility function
-                    applyMermaidTextColors(mermaidRef.current, textColor);
-
-                    // Make inline SVG responsive and detect orientation
-                    const svgElement = mermaidRef.current.querySelector('svg');
-                    if (svgElement) {
-                        svgElement.style.maxWidth = '100%';
-                        svgElement.style.height = 'auto';
-                        svgElement.style.display = 'block';
-
-                        // Detect if diagram is vertical
-                        setIsVertical(isVerticalDiagram(svgElement));
-                    }
-                }
-            } catch (error) {
-                console.error('Mermaid rendering error:', error);
-                if (mermaidRef.current) {
-                    mermaidRef.current.innerHTML = `
-                        <div class="p-4 text-destructive bg-destructive/10 border border-destructive/20 rounded-sm">
-                            <p class="font-semibold">Mermaid Diagram Error</p>
-                            <p class="text-sm">${error instanceof Error ? error.message : 'Unknown error'}</p>
-                        </div>
-                    `;
-                }
-            }
-        };
-
-        renderChart();
-    }, [chart, theme, isCompact]);
+    // Rendering logic
+    const { mermaidRef, svgContent, isVertical, isRendering } = useMermaidRenderer({
+        chart,
+        theme,
+        isCompact,
+    });
+
+    // Fullscreen modal logic
+    const {
+        isFullscreen,
+        fullscreenRef,
+        openFullscreen,
+        closeFullscreen,
+        handleBackdropClick,
+    } = useMermaidFullscreen();
 
     const handleClick = () => {
         if (svgContent) {
-            setIsFullscreen(true);
-        }
-    };
-
-    const handleClose = () => {
-        setIsFullscreen(false);
-    };
-
-    const handleBackdropClick = (e: React.MouseEvent) => {
-        if (e.target === e.currentTarget) {
-            handleClose();
+            openFullscreen();
         }
     };
 
-    // Handle ESC key
-    useEffect(() => {
-        const handleEscKey = (event: KeyboardEvent) => {
-            if (event.key === 'Escape' && isFullscreen) {
-                handleClose();
-            }
-        };
-
-        if (isFullscreen) {
-            document.addEventListener('keydown', handleEscKey);
-            document.body.style.overflow = 'hidden'; // Prevent background scroll
-        }
-
-        return () => {
-            document.removeEventListener('keydown', handleEscKey);
-            document.body.style.overflow = 'unset';
-        };
-    }, [isFullscreen]);
-
-    // Apply text colors to fullscreen modal after render
-    useEffect(() => {
-        if (isFullscreen && fullscreenRef.current) {
-            const getCSSVariable = (variable: string) => {
-                if (typeof document === 'undefined') return '';
-                const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
-                return value ? `hsl(${value})` : '';
-            };
-
-            const textColor = theme === 'dark'
-                ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'
-                : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';
-
-            applyMermaidTextColors(fullscreenRef.current, textColor);
-
-            // Make SVG responsive
-            const svgElement = fullscreenRef.current.querySelector('svg');
-            if (svgElement) {
-                svgElement.style.display = 'block';
-                svgElement.style.height = 'auto';
-                svgElement.style.maxWidth = '100%';
-            }
-        }
-    }, [isFullscreen, theme]);
-
     return (
         <>
             <div
@@ -293,53 +47,35 @@ const Mermaid: React.FC<MermaidProps> = ({ chart, className = '', isCompact = fa
                     <h6 className="text-sm font-semibold text-foreground">Diagram</h6>
                     <p className="text-xs text-muted-foreground mt-1">Click to view fullscreen</p>
                 </div>
-                <div className="p-4">
+                <div className="relative p-4 overflow-hidden">
                     <div
                         ref={mermaidRef}
                         className="flex justify-center items-center min-h-[200px]"
+                        style={{ isolation: 'isolate' }}
                     />
+                    {isRendering && (
+                        <div className="absolute inset-0 flex items-center justify-center bg-background/50 backdrop-blur-sm">
+                            <div className="flex flex-col items-center gap-2">
+                                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+                                <p className="text-xs text-muted-foreground">Rendering diagram...</p>
+                            </div>
+                        </div>
+                    )}
                 </div>
             </div>
 
-            {/* Fullscreen Modal - rendered in portal */}
-            {isFullscreen && typeof document !== 'undefined' && createPortal(
-                <div
-                    className="fixed inset-0 z-9999 flex items-center justify-center p-4"
-                    style={{ backgroundColor: 'rgb(0 0 0 / 0.75)' }}
-                    onClick={handleBackdropClick}
-                >
-                    <div className={`relative bg-card rounded-sm shadow-xl max-h-[95vh] flex flex-col border border-border ${
-                        isVertical
-                            ? 'w-auto max-w-[500px]'
-                            : 'max-w-[95vw] w-full h-full'
-                    }`}>
-                        {/* Header */}
-                        <div className="flex items-center justify-between py-4 px-6 border-b border-border">
-                            <h3 className="text-sm font-medium text-foreground py-0 my-0">Diagram</h3>
-                            <button
-                                onClick={handleClose}
-                                className="text-muted-foreground hover:text-foreground transition-colors"
-                            >
-                                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                                </svg>
-                            </button>
-                        </div>
-
-                        {/* Content with scroll */}
-                        <div className="flex-1 overflow-auto p-6">
-                            <div
-                                ref={fullscreenRef}
-                                className="min-h-full flex items-start justify-center"
-                                dangerouslySetInnerHTML={{ __html: svgContent }}
-                            />
-                        </div>
-                    </div>
-                </div>,
-                document.body
-            )}
+            <MermaidFullscreenModal
+                isOpen={isFullscreen}
+                svgContent={svgContent}
+                isVertical={isVertical}
+                theme={theme}
+                chart={chart}
+                fullscreenRef={fullscreenRef}
+                onClose={closeFullscreen}
+                onBackdropClick={handleBackdropClick}
+            />
         </>
     );
 };
 
-export default Mermaid; 
+export default Mermaid;

package/src/tools/Mermaid/components/MermaidCodeViewer.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import React, { useState } from 'react';
+
+interface MermaidCodeViewerProps {
+    chart: string;
+    renderPreview: () => React.ReactNode;
+}
+
+export const MermaidCodeViewer: React.FC<MermaidCodeViewerProps> = ({
+    chart,
+    renderPreview,
+}) => {
+    const [activeTab, setActiveTab] = useState<'preview' | 'code'>('preview');
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = async () => {
+        await navigator.clipboard.writeText(chart);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Tabs */}
+            <div className="flex items-center justify-between border-b border-border px-4">
+                <div className="flex">
+                    <button
+                        onClick={() => setActiveTab('preview')}
+                        className={`px-4 py-3 text-sm font-medium transition-colors relative ${
+                            activeTab === 'preview'
+                                ? 'text-foreground'
+                                : 'text-muted-foreground hover:text-foreground'
+                        }`}
+                    >
+                        Preview
+                        {activeTab === 'preview' && (
+                            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
+                        )}
+                    </button>
+                    <button
+                        onClick={() => setActiveTab('code')}
+                        className={`px-4 py-3 text-sm font-medium transition-colors relative ${
+                            activeTab === 'code'
+                                ? 'text-foreground'
+                                : 'text-muted-foreground hover:text-foreground'
+                        }`}
+                    >
+                        Code
+                        {activeTab === 'code' && (
+                            <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-primary" />
+                        )}
+                    </button>
+                </div>
+
+                {/* Copy button - show only on Code tab */}
+                {activeTab === 'code' && (
+                    <button
+                        onClick={handleCopy}
+                        className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium bg-primary/10 hover:bg-primary/20 text-primary rounded transition-colors"
+                    >
+                        {copied ? (
+                            <>
+                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                </svg>
+                                Copied!
+                            </>
+                        ) : (
+                            <>
+                                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                                </svg>
+                                Copy
+                            </>
+                        )}
+                    </button>
+                )}
+            </div>
+
+            {/* Content */}
+            <div className="flex-1 overflow-auto">
+                {activeTab === 'preview' ? (
+                    <div className="p-6 flex items-center justify-center min-h-full">
+                        {renderPreview()}
+                    </div>
+                ) : (
+                    <pre className="p-6 text-sm font-mono text-foreground bg-muted/30 h-full overflow-auto">
+                        <code>{chart}</code>
+                    </pre>
+                )}
+            </div>
+        </div>
+    );
+};

package/src/tools/Mermaid/components/MermaidFullscreenModal.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { applyMermaidTextColors } from '../utils/mermaid-helpers';
+import { MermaidCodeViewer } from './MermaidCodeViewer';
+
+interface MermaidFullscreenModalProps {
+    isOpen: boolean;
+    svgContent: string;
+    isVertical: boolean;
+    theme: string;
+    chart: string;
+    fullscreenRef: React.RefObject<HTMLDivElement>;
+    onClose: () => void;
+    onBackdropClick: (e: React.MouseEvent) => void;
+}
+
+export const MermaidFullscreenModal: React.FC<MermaidFullscreenModalProps> = ({
+    isOpen,
+    svgContent,
+    isVertical,
+    theme,
+    chart,
+    fullscreenRef,
+    onClose,
+    onBackdropClick,
+}) => {
+    // Apply text colors to fullscreen modal after render
+    useEffect(() => {
+        if (isOpen && fullscreenRef.current) {
+            const getCSSVariable = (variable: string) => {
+                if (typeof document === 'undefined') return '';
+                const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+                return value ? `hsl(${value})` : '';
+            };
+
+            const textColor = theme === 'dark'
+                ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'
+                : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';
+
+            applyMermaidTextColors(fullscreenRef.current, textColor);
+
+            // Make SVG responsive
+            const svgElement = fullscreenRef.current.querySelector('svg');
+            if (svgElement) {
+                svgElement.style.display = 'block';
+                svgElement.style.height = 'auto';
+                svgElement.style.maxWidth = '100%';
+
+                // For vertical diagrams, limit width
+                if (isVertical) {
+                    svgElement.style.maxWidth = '600px';
+                    svgElement.style.margin = '0 auto';
+                }
+            }
+        }
+    }, [isOpen, theme, isVertical, fullscreenRef]);
+
+    if (!isOpen || typeof document === 'undefined') return null;
+
+    return createPortal(
+        <div
+            className="fixed inset-0 z-9999 flex items-center justify-center p-4"
+            style={{ backgroundColor: 'rgb(0 0 0 / 0.75)' }}
+            onClick={onBackdropClick}
+        >
+            <div className={`relative bg-card rounded-sm shadow-xl max-h-[95vh] flex flex-col border border-border ${
+                isVertical
+                    ? 'w-auto max-w-[600px]'
+                    : 'max-w-[90vw] w-auto'
+            }`}>
+                {/* Header */}
+                <div className="flex items-center justify-between py-4 px-6 border-b border-border">
+                    <h3 className="text-sm font-medium text-foreground py-0 my-0">Diagram</h3>
+                    <button
+                        onClick={onClose}
+                        className="text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                </div>
+
+                {/* Content - Code Viewer with tabs */}
+                <div className="flex-1 overflow-hidden">
+                    <MermaidCodeViewer
+                        chart={chart}
+                        renderPreview={() => (
+                            <div
+                                ref={fullscreenRef}
+                                dangerouslySetInnerHTML={{ __html: svgContent }}
+                            />
+                        )}
+                    />
+                </div>
+            </div>
+        </div>,
+        document.body
+    );
+};

package/src/tools/Mermaid/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useMermaidRenderer } from './useMermaidRenderer';
+export { useMermaidValidation } from './useMermaidValidation';
+export { useMermaidCleanup } from './useMermaidCleanup';
+export { useMermaidFullscreen } from './useMermaidFullscreen';

package/src/tools/Mermaid/hooks/useMermaidCleanup.ts

@@ -0,0 +1,27 @@
+/**
+ * Hook for cleaning up orphaned Mermaid DOM nodes
+ */
+
+import { useEffect } from 'react';
+
+export function useMermaidCleanup() {
+    const cleanupMermaidErrors = () => {
+        if (typeof document === 'undefined') return;
+
+        // Remove error text nodes that Mermaid might append to body
+        document.querySelectorAll('[id^="mermaid-"]').forEach((node) => {
+            if (node.parentNode === document.body) {
+                node.remove();
+            }
+        });
+    };
+
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            cleanupMermaidErrors();
+        };
+    }, []);
+
+    return { cleanupMermaidErrors };
+}

package/src/tools/Mermaid/hooks/useMermaidFullscreen.ts

@@ -0,0 +1,46 @@
+/**
+ * Hook for managing Mermaid fullscreen modal
+ */
+
+import { useState, useEffect, useRef } from 'react';
+
+export function useMermaidFullscreen() {
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const fullscreenRef = useRef<HTMLDivElement>(null);
+
+    const openFullscreen = () => setIsFullscreen(true);
+    const closeFullscreen = () => setIsFullscreen(false);
+
+    const handleBackdropClick = (e: React.MouseEvent) => {
+        if (e.target === e.currentTarget) {
+            closeFullscreen();
+        }
+    };
+
+    // Handle ESC key
+    useEffect(() => {
+        const handleEscKey = (event: KeyboardEvent) => {
+            if (event.key === 'Escape' && isFullscreen) {
+                closeFullscreen();
+            }
+        };
+
+        if (isFullscreen) {
+            document.addEventListener('keydown', handleEscKey);
+            document.body.style.overflow = 'hidden';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleEscKey);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isFullscreen]);
+
+    return {
+        isFullscreen,
+        fullscreenRef,
+        openFullscreen,
+        closeFullscreen,
+        handleBackdropClick,
+    };
+}

package/src/tools/Mermaid/hooks/useMermaidRenderer.ts

@@ -0,0 +1,224 @@
+/**
+ * Hook for rendering Mermaid diagrams with debounce and validation
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+import { useMermaidValidation } from './useMermaidValidation';
+import { useMermaidCleanup } from './useMermaidCleanup';
+
+interface UseMermaidRendererProps {
+    chart: string;
+    theme: string;
+    isCompact?: boolean;
+}
+
+interface MermaidRenderResult {
+    mermaidRef: React.RefObject<HTMLDivElement>;
+    svgContent: string;
+    isVertical: boolean;
+    isRendering: boolean;
+}
+
+// Utility function to apply text colors to Mermaid SVG
+const applyMermaidTextColors = (container: HTMLElement, textColor: string) => {
+    const svgElement = container.querySelector('svg');
+    if (svgElement) {
+        // SVG text elements use 'fill'
+        svgElement.querySelectorAll('text').forEach((el) => {
+            (el as SVGElement).style.fill = textColor;
+        });
+
+        // HTML elements inside foreignObject use 'color'
+        svgElement.querySelectorAll('.nodeLabel, .edgeLabel').forEach((el) => {
+            (el as HTMLElement).style.color = textColor;
+        });
+    }
+};
+
+// Detect if diagram is vertical (tall and narrow)
+const isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {
+    const viewBox = svgElement.getAttribute('viewBox');
+    if (viewBox) {
+        const [, , width, height] = viewBox.split(' ').map(Number);
+        return height > width * 1.5;
+    }
+    const bbox = svgElement.getBBox?.();
+    if (bbox) {
+        return bbox.height > bbox.width * 1.5;
+    }
+    return false;
+};
+
+export function useMermaidRenderer({ chart, theme, isCompact = false }: UseMermaidRendererProps): MermaidRenderResult {
+    const mermaidRef = useRef<HTMLDivElement>(null);
+    const renderTimerRef = useRef<NodeJS.Timeout | null>(null);
+    const [svgContent, setSvgContent] = useState<string>('');
+    const [isVertical, setIsVertical] = useState(false);
+    const [isRendering, setIsRendering] = useState(false);
+
+    const { isMermaidCodeComplete } = useMermaidValidation();
+    const { cleanupMermaidErrors } = useMermaidCleanup();
+
+    useEffect(() => {
+        // Get CSS variables for semantic colors
+        const getCSSVariable = (variable: string) => {
+            if (typeof document === 'undefined') return '';
+            const value = getComputedStyle(document.documentElement).getPropertyValue(variable).trim();
+            return value ? `hsl(${value})` : '';
+        };
+
+        const diagramFontSize = isCompact ? '12px' : '14px';
+
+        const themeVariables = theme === 'dark' ? {
+            primaryColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            primaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            primaryBorderColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            secondaryColor: getCSSVariable('--muted') || 'hsl(217.2 32.6% 17.5%)',
+            secondaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            secondaryBorderColor: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',
+            tertiaryColor: getCSSVariable('--accent') || 'hsl(217.2 32.6% 20%)',
+            tertiaryTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            tertiaryBorderColor: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',
+            mainBkg: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
+            textColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            nodeBorder: getCSSVariable('--border') || 'hsl(217.2 32.6% 27.5%)',
+            nodeTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            secondBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 17.5%)',
+            lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            edgeLabelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
+            clusterBkg: getCSSVariable('--muted') || 'hsl(217.2 32.6% 12%)',
+            clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            background: getCSSVariable('--background') || 'hsl(222.2 84% 4.9%)',
+            labelBackground: getCSSVariable('--card') || 'hsl(222.2 84% 8%)',
+            labelTextColor: getCSSVariable('--foreground') || 'hsl(210 40% 98%)',
+            errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 62.8% 30.6%)',
+            errorTextColor: 'hsl(210 40% 98%)',
+            fontSize: diagramFontSize,
+            fontFamily: 'Inter, system-ui, sans-serif',
+        } : {
+            primaryColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            primaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            primaryBorderColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            secondaryColor: getCSSVariable('--secondary') || 'hsl(210 40% 96.1%)',
+            secondaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            secondaryBorderColor: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',
+            tertiaryColor: getCSSVariable('--muted') || 'hsl(210 40% 96.1%)',
+            tertiaryTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            tertiaryBorderColor: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',
+            mainBkg: getCSSVariable('--card') || 'hsl(0 0% 100%)',
+            textColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            nodeBorder: getCSSVariable('--border') || 'hsl(214.3 31.8% 91.4%)',
+            nodeTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            secondBkg: getCSSVariable('--muted') || 'hsl(210 40% 96.1%)',
+            lineColor: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            edgeLabelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',
+            clusterBkg: getCSSVariable('--accent') || 'hsl(210 40% 98%)',
+            clusterBorder: getCSSVariable('--primary') || 'hsl(221.2 83.2% 53.3%)',
+            background: getCSSVariable('--background') || 'hsl(0 0% 100%)',
+            labelBackground: getCSSVariable('--card') || 'hsl(0 0% 100%)',
+            labelTextColor: getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)',
+            errorBkgColor: getCSSVariable('--destructive') || 'hsl(0 84.2% 60.2%)',
+            errorTextColor: 'hsl(210 40% 98%)',
+            fontSize: diagramFontSize,
+            fontFamily: 'Inter, system-ui, sans-serif',
+        };
+
+        mermaid.initialize({
+            startOnLoad: false,
+            theme: 'base',
+            securityLevel: 'loose',
+            fontFamily: 'Inter, system-ui, sans-serif',
+            flowchart: {
+                useMaxWidth: true,
+                htmlLabels: true,
+                curve: 'basis',
+            },
+            themeVariables,
+        });
+
+        const renderChart = async () => {
+            if (!mermaidRef.current || !chart) return;
+
+            // Validate code completeness
+            if (!isMermaidCodeComplete(chart)) {
+                setIsRendering(true);
+                return;
+            }
+
+            try {
+                setIsRendering(true);
+
+                // Clear container
+                if (mermaidRef.current) {
+                    mermaidRef.current.innerHTML = '';
+                }
+
+                const id = `mermaid-${Math.random().toString(36).substring(2, 9)}`;
+                const { svg } = await mermaid.render(id, chart);
+
+                if (mermaidRef.current) {
+                    const textColor = theme === 'dark'
+                        ? getCSSVariable('--foreground') || 'hsl(0 0% 90%)'
+                        : getCSSVariable('--foreground') || 'hsl(222.2 84% 4.9%)';
+
+                    const processedSvg = svg.replace(
+                        /<svg /,
+                        `<svg style="--mermaid-text-color: ${textColor};" `
+                    );
+
+                    mermaidRef.current.innerHTML = processedSvg;
+                    setSvgContent(processedSvg);
+
+                    applyMermaidTextColors(mermaidRef.current, textColor);
+
+                    const svgElement = mermaidRef.current.querySelector('svg');
+                    if (svgElement) {
+                        svgElement.style.maxWidth = '100%';
+                        svgElement.style.height = 'auto';
+                        svgElement.style.display = 'block';
+                        setIsVertical(isVerticalDiagram(svgElement));
+                    }
+                }
+
+                setIsRendering(false);
+            } catch (error) {
+                console.error('Mermaid rendering error:', error);
+                setIsRendering(false);
+                cleanupMermaidErrors();
+
+                if (mermaidRef.current) {
+                    mermaidRef.current.innerHTML = `
+                        <div class="p-4 text-destructive bg-destructive/10 border border-destructive/20 rounded-sm">
+                            <p class="font-semibold">Mermaid Diagram Error</p>
+                            <p class="text-sm">${error instanceof Error ? error.message : 'Unknown error'}</p>
+                        </div>
+                    `;
+                }
+            }
+        };
+
+        // Clear previous timer
+        if (renderTimerRef.current) {
+            clearTimeout(renderTimerRef.current);
+        }
+
+        // Debounce: wait 500ms after last update
+        renderTimerRef.current = setTimeout(() => {
+            renderChart();
+        }, 500);
+
+        return () => {
+            if (renderTimerRef.current) {
+                clearTimeout(renderTimerRef.current);
+            }
+        };
+    }, [chart, theme, isCompact, isMermaidCodeComplete, cleanupMermaidErrors]);
+
+    return {
+        mermaidRef,
+        svgContent,
+        isVertical,
+        isRendering,
+    };
+}

package/src/tools/Mermaid/hooks/useMermaidValidation.ts

@@ -0,0 +1,29 @@
+/**
+ * Hook for validating Mermaid code completeness
+ */
+
+export function useMermaidValidation() {
+    const isMermaidCodeComplete = (code: string): boolean => {
+        if (!code || code.trim().length === 0) return false;
+
+        const trimmed = code.trim();
+
+        // Check if code has basic structure
+        const lines = trimmed.split('\n');
+        if (lines.length < 2) return false; // Need at least diagram type + one element
+
+        // Check for common incomplete patterns
+        const lastLine = lines[lines.length - 1].trim();
+
+        // Incomplete if last line ends with arrow without destination
+        if (lastLine.match(/-->?\s*$/)) return false;
+        if (lastLine.match(/-->\|[^|]*\|\s*$/)) return false;
+
+        // Incomplete if last line ends with opening bracket/parenthesis
+        if (lastLine.match(/[\[({]\s*$/)) return false;
+
+        return true;
+    };
+
+    return { isMermaidCodeComplete };
+}

package/src/tools/Mermaid/utils/mermaid-helpers.ts

@@ -0,0 +1,33 @@
+/**
+ * Helper utilities for Mermaid diagram rendering
+ */
+
+// Utility function to apply text colors to Mermaid SVG
+export const applyMermaidTextColors = (container: HTMLElement, textColor: string) => {
+    const svgElement = container.querySelector('svg');
+    if (svgElement) {
+        // SVG text elements use 'fill'
+        svgElement.querySelectorAll('text').forEach((el) => {
+            (el as SVGElement).style.fill = textColor;
+        });
+
+        // HTML elements inside foreignObject use 'color'
+        svgElement.querySelectorAll('.nodeLabel, .edgeLabel').forEach((el) => {
+            (el as HTMLElement).style.color = textColor;
+        });
+    }
+};
+
+// Detect if diagram is vertical (tall and narrow)
+export const isVerticalDiagram = (svgElement: SVGSVGElement): boolean => {
+    const viewBox = svgElement.getAttribute('viewBox');
+    if (viewBox) {
+        const [, , width, height] = viewBox.split(' ').map(Number);
+        return height > width * 1.5;
+    }
+    const bbox = svgElement.getBBox?.();
+    if (bbox) {
+        return bbox.height > bbox.width * 1.5;
+    }
+    return false;
+};