Fix iframe smooth transitions injection error

- Add proper null checks for iframe document and head element
- Add document ready state validation before injecting styles
- Implement try-catch error handling for appendChild operations
- Add retry mechanism with multiple timeouts for document readiness
- Improve error logging and warnings for debugging

Fixes: TypeError when doc.head.appendChild(style) fails due to null head element

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/editor/preview/index.tsx

@@ -137,7 +137,23 @@ export const Preview = forwardRef<
 
     const injectSmoothTransitions = () => {
       const doc = iframe.contentDocument;
-      if (!doc) return;
+      if (!doc) {
+        console.warn('⚠️ Iframe document not available for smooth transitions');
+        return;
+      }
+
+      // Ensure document structure exists
+      if (!doc.head) {
+        console.warn('⚠️ Iframe document head not available for smooth transitions');
+        return;
+      }
+
+      // Check if document is ready
+      if (doc.readyState !== 'complete' && doc.readyState !== 'interactive') {
+        console.log('⏳ Document not ready, will retry smooth transitions injection');
+        setTimeout(injectSmoothTransitions, 50);
+        return;
+      }
 
       const existingStyle = doc.getElementById('smooth-transitions');
       if (existingStyle) {
@@ -145,85 +161,93 @@ export const Preview = forwardRef<
         existingStyle.remove();
       }
 
-      const style = doc.createElement('style');
-      style.id = 'smooth-transitions';
-      style.textContent = `
-        /* Enhanced smooth transitions for zero-flash updates */
-        * {
-          transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
-                     background-color 0.2s ease, 
-                     color 0.2s ease, 
-                     border-color 0.2s ease,
-                     transform 0.2s ease !important;
-        }
-        
-        /* Prevent flash during content updates */
-        body {
-          transition: opacity 0.15s ease !important;
-          will-change: opacity;
-        }
-        
-        /* Smooth content updates */
-        .content-updating {
-          animation: contentUpdate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        
-        @keyframes contentUpdate {
-          0% { 
-            opacity: 0.9; 
-            transform: translateY(1px);
+      try {
+        const style = doc.createElement('style');
+        style.id = 'smooth-transitions';
+        style.textContent = `
+          /* Enhanced smooth transitions for zero-flash updates */
+          * {
+            transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), 
+                       background-color 0.2s ease, 
+                       color 0.2s ease, 
+                       border-color 0.2s ease,
+                       transform 0.2s ease !important;
           }
-          100% { 
-            opacity: 1; 
-            transform: translateY(0);
+          
+          /* Prevent flash during content updates */
+          body {
+            transition: opacity 0.15s ease !important;
+            will-change: opacity;
           }
-        }
-        
-        /* New element entrance */
-        .element-entering {
-          animation: elementEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        
-        @keyframes elementEnter {
-          0% {
-            opacity: 0;
-            transform: translateY(8px) scale(0.98);
+          
+          /* Smooth content updates */
+          .content-updating {
+            animation: contentUpdate 0.3s cubic-bezier(0.4, 0, 0.2, 1);
           }
-          100% {
-            opacity: 1;
-            transform: translateY(0) scale(1);
+          
+          @keyframes contentUpdate {
+            0% { 
+              opacity: 0.9; 
+              transform: translateY(1px);
+            }
+            100% { 
+              opacity: 1; 
+              transform: translateY(0);
+            }
           }
-        }
-        
-        /* Subtle glow for changed content */
-        .content-changed {
-          animation: contentGlow 0.6s ease-in-out;
-        }
-        
-        @keyframes contentGlow {
-          0%, 100% { 
-            box-shadow: none; 
-            background-color: transparent;
+          
+          /* New element entrance */
+          .element-entering {
+            animation: elementEnter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
           }
-          30% { 
-            box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
-            background-color: rgba(59, 130, 246, 0.05);
+          
+          @keyframes elementEnter {
+            0% {
+              opacity: 0;
+              transform: translateY(8px) scale(0.98);
+            }
+            100% {
+              opacity: 1;
+              transform: translateY(0) scale(1);
+            }
           }
-        }
+          
+          /* Subtle glow for changed content */
+          .content-changed {
+            animation: contentGlow 0.6s ease-in-out;
+          }
+          
+          @keyframes contentGlow {
+            0%, 100% { 
+              box-shadow: none; 
+              background-color: transparent;
+            }
+            30% { 
+              box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
+              background-color: rgba(59, 130, 246, 0.05);
+            }
+          }
+          
+          /* Optimize rendering performance */
+          * {
+            backface-visibility: hidden;
+            -webkit-font-smoothing: antialiased;
+          }
+        `;
         
-        /* Optimize rendering performance */
-        * {
-          backface-visibility: hidden;
-          -webkit-font-smoothing: antialiased;
-        }
-      `;
-      doc.head.appendChild(style);
-      console.log('✨ Enhanced smooth transitions injected into iframe');
+        doc.head.appendChild(style);
+        console.log('✨ Enhanced smooth transitions injected into iframe');
+      } catch (error) {
+        console.error('❌ Failed to inject smooth transitions:', error);
+      }
     };
 
     // Inject on iframe load and when content changes
     const handleLoad = () => {
+      // Use multiple timeouts to ensure document is ready
       setTimeout(injectSmoothTransitions, 10);
+      setTimeout(injectSmoothTransitions, 50);
+      setTimeout(injectSmoothTransitions, 100);
     };
     
     iframe.addEventListener('load', handleLoad);