@djangocfg/ui-nextjs 2.1.48 → 2.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-nextjs",
-  "version": "2.1.48",
+  "version": "2.1.50",
   "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.48",
-    "@djangocfg/ui-core": "^2.1.48",
+    "@djangocfg/api": "^2.1.50",
+    "@djangocfg/ui-core": "^2.1.50",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "consola": "^3.4.2",
@@ -106,7 +106,7 @@
     "vidstack": "next"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.48",
+    "@djangocfg/typescript-config": "^2.1.50",
     "@types/node": "^24.7.2",
     "eslint": "^9.37.0",
     "tailwindcss-animate": "1.0.7",

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

@@ -68,8 +68,8 @@ export const MermaidFullscreenModal: React.FC<MermaidFullscreenModalProps> = ({
         >
             <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'
+                    ? 'w-auto min-w-[400px] max-w-[600px]'
+                    : 'min-w-[600px] max-w-[90vw] w-auto'
             }`}>
                 {/* Header */}
                 <div className="flex items-center justify-between py-4 px-6 border-b border-border">

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

@@ -2,26 +2,72 @@
  * Hook for cleaning up orphaned Mermaid DOM nodes
  */
 
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 export function useMermaidCleanup() {
-    const cleanupMermaidErrors = () => {
+    const cleanupMermaidErrors = useCallback(() => {
         if (typeof document === 'undefined') return;
 
-        // Remove error text nodes that Mermaid might append to body
+        // Remove all orphaned mermaid elements from body
+        // Mermaid can append: SVGs, divs with errors, text nodes
+
+        // 1. Remove elements with mermaid-* IDs directly in body
         document.querySelectorAll('[id^="mermaid-"]').forEach((node) => {
             if (node.parentNode === document.body) {
                 node.remove();
             }
         });
-    };
+
+        // 2. Remove elements with d prefix (mermaid diagram IDs) directly in body
+        document.querySelectorAll('[id^="d"]').forEach((node) => {
+            if (node.parentNode === document.body && node.id.match(/^d\d+$/)) {
+                node.remove();
+            }
+        });
+
+        // 3. Remove orphaned SVG elements that mermaid creates in body
+        document.querySelectorAll('body > svg').forEach((node) => {
+            // Check if it's a mermaid SVG (has mermaid classes or aria-roledescription)
+            if (node.getAttribute('aria-roledescription') ||
+                node.classList.contains('mermaid') ||
+                node.querySelector('.mermaid') ||
+                node.id?.includes('mermaid')) {
+                node.remove();
+            }
+        });
+
+        // 4. Remove any orphaned error divs with "Syntax error" text
+        document.querySelectorAll('body > div').forEach((node) => {
+            const text = node.textContent || '';
+            if (text.includes('Syntax error in text') ||
+                text.includes('mermaid version') ||
+                node.id?.startsWith('mermaid-') ||
+                node.id?.startsWith('d') && node.id.match(/^d\d+$/)) {
+                node.remove();
+            }
+        });
+
+        // 5. Remove orphaned pre elements with error info
+        document.querySelectorAll('body > pre').forEach((node) => {
+            const text = node.textContent || '';
+            if (text.includes('Syntax error') || text.includes('mermaid')) {
+                node.remove();
+            }
+        });
+    }, []);
 
     // Cleanup on unmount
     useEffect(() => {
         return () => {
             cleanupMermaidErrors();
         };
-    }, []);
+    }, [cleanupMermaidErrors]);
+
+    // Also run cleanup periodically to catch any stray elements
+    useEffect(() => {
+        const interval = setInterval(cleanupMermaidErrors, 1000);
+        return () => clearInterval(interval);
+    }, [cleanupMermaidErrors]);
 
     return { cleanupMermaidErrors };
 }

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

@@ -129,6 +129,7 @@ export function useMermaidRenderer({ chart, theme, isCompact = false }: UseMerma
             startOnLoad: false,
             theme: 'base',
             securityLevel: 'loose',
+            suppressErrorRendering: true, // Prevent mermaid from appending errors to body
             fontFamily: 'Inter, system-ui, sans-serif',
             flowchart: {
                 useMaxWidth: true,