Update DeepSite v2 for Hugging Face Spaces deployment

.gitignore

@@ -39,3 +39,25 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Documentation files
+*.md
+!README.md
+CLAUDE.md
+EMERGENCY_FIX_SUMMARY.md
+GITHUB_REPO_SETUP.md
+PREVIEW_*.md
+SMOOTH_*.md
+TRUE_*.md
+TYPESCRIPT_*.md
+ZERO_*.md
+
+# Test files
+test-*.js
+test-*.mjs
+test-*.html
+debug-*.html
+
+# Backup files
+*.backup
+*.complex-backup

assets/globals.css

@@ -138,40 +138,73 @@
   @apply !bg-neutral-900;
 }
 
-/* ZERO-FLASH dual iframe system for ultra-smooth preview updates */
-#preview-iframe-1, #preview-iframe-2 {
-  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94), 
-              transform 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  /* Prevent flash of unstyled content with white background */
-  background: #ffffff;
-  /* Hardware acceleration for smoother transitions */
-  will-change: opacity, transform;
+/* 🚀 BULLETPROOF ZERO-FLASH PREVIEW SYSTEM */
+
+/* Main preview iframe with anti-flash protection */
+#preview-iframe {
+  /* Bulletproof anti-flash transitions */
+  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  
+  /* Prevent any flash with guaranteed white background */
+  background-color: #ffffff !important;
+  background-image: none !important;
+  
+  /* Hardware acceleration for ultra-smooth performance */
+  will-change: opacity;
   transform: translateZ(0);
+  backface-visibility: hidden;
+  
+  /* Ensure immediate visibility */
+  opacity: 1;
+  
+  /* Smooth scrolling for content updates */
+  scroll-behavior: smooth;
+  
+  /* Prevent layout shifts */
+  min-height: 100%;
+  
+  /* Z-index management */
   z-index: 10;
 }
 
-/* Smooth swapping transitions */
-#preview-iframe-1.swapping, #preview-iframe-2.swapping {
-  transition: opacity 150ms ease-out, transform 150ms ease-out;
+/* Loading state - fade in smoothly */
+#preview-iframe.loading {
+  opacity: 0.7;
+  transition: opacity 150ms ease-out;
 }
 
-/* Legacy iframe support (fallback) */
-#preview-iframe {
-  transition: opacity 300ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  background: #ffffff;
-  will-change: opacity;
+/* Enhanced container for smooth updates */
+.smooth-preview-container {
+  /* Prevent layout jumps and overflow flashes */
+  overflow: hidden;
+  position: relative;
+  
+  /* Ensure smooth transitions */
+  will-change: contents;
+  
+  /* Hardware acceleration */
   transform: translateZ(0);
 }
 
-/* Zero-flash loading states */
-#preview-iframe-1:not([src]):not([srcdoc]), 
-#preview-iframe-2:not([src]):not([srcdoc]) {
-  opacity: 0;
+/* Support for smooth element transitions within iframes */
+.smooth-element-transition {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  will-change: opacity, transform;
 }
 
-#preview-iframe-1[srcdoc], 
-#preview-iframe-2[srcdoc] {
-  opacity: inherit; /* Respect the active/inactive state */
+.smooth-content-update {
+  animation: smoothContentPulse 0.4s ease-in-out;
+}
+
+@keyframes smoothContentPulse {
+  0%, 100% { 
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% { 
+    transform: scale(1.01);
+    opacity: 0.95;
+  }
 }
 
 /* Ultra-smooth fade-in animation for new content with anti-flash */
@@ -245,3 +278,142 @@
 .matched-line {
   @apply bg-sky-500/30;
 }
+
+/* 🎨 ENHANCED IFRAME CONTENT TRANSITIONS */
+
+/* Global styles that will be injected into iframe content */
+.iframe-smooth-transitions * {
+  /* Smooth transitions for all content changes */
+  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
+              color 200ms cubic-bezier(0.4, 0, 0.2, 1),
+              background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
+              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
+              transform 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
+  
+  /* Hardware acceleration */
+  will-change: opacity, transform, background-color;
+  transform: translateZ(0);
+}
+
+/* Smooth element entrance animation */
+.element-entering {
+  opacity: 0 !important;
+  transform: translateY(5px) scale(0.99) translateZ(0) !important;
+  transition: opacity 300ms cubic-bezier(0.34, 1.56, 0.64, 1),
+              transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
+}
+
+.element-entering.entered {
+  opacity: 1 !important;
+  transform: translateY(0) scale(1) translateZ(0) !important;
+}
+
+/* Smooth element exit animation */
+.element-leaving {
+  opacity: 1 !important;
+  transform: translateY(0) scale(1) translateZ(0) !important;
+  transition: opacity 250ms cubic-bezier(0.4, 0, 1, 1),
+              transform 250ms cubic-bezier(0.4, 0, 1, 1) !important;
+}
+
+.element-leaving.left {
+  opacity: 0 !important;
+  transform: translateY(-5px) scale(0.98) translateZ(0) !important;
+}
+
+/* Content change highlight effect */
+.content-changed {
+  animation: contentHighlight 400ms cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transform: translateZ(0);
+}
+
+@keyframes contentHighlight {
+  0%, 100% { 
+    background-color: transparent !important;
+    box-shadow: none !important;
+  }
+  30%, 70% { 
+    background-color: rgba(59, 130, 246, 0.08) !important;
+    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1) !important;
+  }
+}
+
+/* Smooth morphing indicator */
+.morphing-element {
+  position: relative;
+}
+
+.morphing-element::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  background: linear-gradient(90deg, 
+    transparent, 
+    rgba(59, 130, 246, 0.1), 
+    transparent
+  );
+  border-radius: 3px;
+  opacity: 0;
+  animation: morphingGlow 600ms ease-out;
+  pointer-events: none;
+  z-index: 1000;
+}
+
+@keyframes morphingGlow {
+  0% { opacity: 0; transform: translateX(-100%); }
+  50% { opacity: 1; transform: translateX(0); }
+  100% { opacity: 0; transform: translateX(100%); }
+}
+
+/* Ultra-smooth text content updates */
+.text-morphing {
+  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.text-morphing.changing {
+  opacity: 0.7;
+  transform: translateY(1px) translateZ(0);
+}
+
+/* ========================================
+   SMOOTH PREVIEW TRANSITIONS
+   ======================================== */
+
+/* Basic iframe transition for content changes */
+iframe {
+  transition: opacity 0.3s ease-in-out, transform 0.2s ease-out;
+  will-change: opacity;
+}
+
+/* Smooth loading state */
+.preview-updating {
+  opacity: 0.8;
+  transition: opacity 0.2s ease-in-out;
+}
+
+/* Prevent flash during iframe content updates */
+#preview-iframe-1,
+#preview-iframe-2 {
+  background: white;
+  transition: opacity 0.2s ease-in-out;
+}
+
+/* Loading indicator for preview updates */
+.preview-loading-indicator {
+  transition: opacity 0.2s ease-in-out;
+}
+
+/* Hardware acceleration for smooth transitions */
+.preview-container {
+  transform: translateZ(0);
+  will-change: transform;
+}
+
+/* Prevent content jump during updates */
+.preview-iframe-wrapper {
+  position: relative;
+  overflow: hidden;
+}

components/editor/ask-ai/index.tsx

@@ -176,31 +176,109 @@ export function AskAI({
           signal: abortController.signal,
         });
         if (request && request.body) {
-          // Enhanced error checking and debugging
+          // ROBUST ERROR HANDLING: Handle both JSON and HTML error responses
           if (!request.ok) {
             console.error('❌ Request failed:', {
               status: request.status,
               statusText: request.statusText,
+              url: request.url,
               headers: Object.fromEntries(request.headers.entries())
             });
             
             try {
-              const res = await request.json();
-              console.error('❌ Error response:', res);
+              // Get the full response as text first
+              const responseText = await request.text();
+              console.log('📄 Raw error response:', {
+                length: responseText.length,
+                contentType: request.headers.get('content-type'),
+                preview: responseText.substring(0, 500) + (responseText.length > 500 ? '...' : ''),
+                isHtml: responseText.trim().toLowerCase().startsWith('<!doctype html') || responseText.trim().toLowerCase().startsWith('<html')
+              });
+              
+              let res;
               
+              // Check if response is HTML (common for server errors)
+              if (responseText.trim().toLowerCase().startsWith('<!doctype html') || 
+                  responseText.trim().toLowerCase().startsWith('<html') ||
+                  responseText.includes('<title>') || 
+                  responseText.includes('Internal Server Error')) {
+                
+                console.error('❌ HTML error page received instead of JSON');
+                
+                // Extract error info from HTML if possible
+                let errorMessage = 'Server error occurred';
+                const titleMatch = responseText.match(/<title[^>]*>([^<]+)<\/title>/i);
+                if (titleMatch && titleMatch[1]) {
+                  errorMessage = titleMatch[1].trim();
+                }
+                
+                // Look for common error patterns
+                if (responseText.includes('Internal Server Error')) {
+                  errorMessage = 'Internal Server Error - Please try again';
+                } else if (responseText.includes('Service Unavailable')) {
+                  errorMessage = 'Service temporarily unavailable';
+                } else if (responseText.includes('Bad Gateway')) {
+                  errorMessage = 'Gateway error - Please try again';
+                }
+                
+                res = {
+                  ok: false,
+                  error: errorMessage,
+                  message: errorMessage,
+                  isHtmlError: true
+                };
+              } else {
+                // Try to parse as JSON
+                try {
+                  res = JSON.parse(responseText);
+                  console.error('❌ Error response (JSON):', res);
+                } catch (jsonError) {
+                  console.error('❌ Failed to parse JSON, treating as text:', {
+                    jsonError: (jsonError as Error).message || String(jsonError),
+                    responseLength: responseText.length
+                  });
+                  
+                  // Create error object from text response
+                  let errorMessage = responseText.trim();
+                  
+                  // Clean up common error patterns
+                  if (errorMessage.length > 200) {
+                    errorMessage = errorMessage.substring(0, 200) + '...';
+                  }
+                  
+                  if (!errorMessage) {
+                    errorMessage = `HTTP ${request.status}: ${request.statusText}`;
+                  }
+                  
+                  res = {
+                    ok: false,
+                    error: errorMessage,
+                    message: errorMessage,
+                    isTextError: true
+                  };
+                }
+              }
+              
+              // Handle different error types
               if (res.openLogin) {
                 setOpen(true);
               } else if (res.openSelectProvider) {
                 setOpenProvider(true);
-                setProviderError(res.message);
+                setProviderError(res.message || res.error || 'Provider error');
               } else if (res.openProModal) {
                 setOpenProModal(true);
               } else {
-                toast.error(res.message || 'Unknown error occurred');
+                const errorMsg = res.message || res.error || 'Unknown error occurred';
+                console.error('❌ Showing error to user:', errorMsg);
+                toast.error(errorMsg);
               }
             } catch (parseError) {
-              console.error('❌ Failed to parse error response:', parseError);
-              toast.error('Failed to process server response');
+              console.error('❌ Complete failure to parse error response:', {
+                parseError: (parseError as Error).message || String(parseError),
+                status: request.status,
+                statusText: request.statusText
+              });
+              toast.error(`Request failed: ${request.status} ${request.statusText}`);
             }
             setisAiWorking(false);
             return;

components/editor/preview/index-simplified.tsx

@@ -0,0 +1,382 @@
+"use client";
+import { useUpdateEffect } from "react-use";
+import { useMemo, useState, useRef, useEffect, forwardRef, useCallback } from "react";
+import classNames from "classnames";
+import { toast } from "sonner";
+
+import { cn } from "@/lib/utils";
+import { GridPattern } from "@/components/magic-ui/grid-pattern";
+import { htmlTagToText } from "@/lib/html-tag-to-text";
+
+export const Preview = forwardRef<
+  HTMLDivElement,
+  {
+    html: string;
+    isResizing: boolean;
+    isAiWorking: boolean;
+    device: "desktop" | "mobile";
+    currentTab: string;
+    iframeRef?: React.RefObject<HTMLIFrameElement | null>;
+    isEditableModeEnabled?: boolean;
+    onClickElement?: (element: HTMLElement) => void;
+  }
+>(({
+  html,
+  isResizing,
+  isAiWorking,
+  device,
+  currentTab,
+  iframeRef,
+  isEditableModeEnabled,
+  onClickElement,
+}, ref) => {
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [displayHtml, setDisplayHtml] = useState(html);
+  const htmlUpdateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const prevHtmlRef = useRef(html);
+  const internalIframeRef = useRef<HTMLIFrameElement>(null);
+  
+  // Use internal ref if external ref not provided
+  const currentIframeRef = iframeRef || internalIframeRef;
+
+  // Debug logging for initial state
+  useEffect(() => {
+    console.log('🚀 SIMPLIFIED Preview component mounted with HTML:', {
+      htmlLength: html.length,
+      htmlPreview: html.substring(0, 200) + '...',
+      displayHtmlLength: displayHtml.length
+    });
+  }, []);
+
+  // SIMPLIFIED: Reliable HTML update logic with optional smoothness
+  useEffect(() => {
+    console.log('🔄 SIMPLIFIED Preview update triggered:', { 
+      htmlLength: html.length, 
+      isAiWorking, 
+      displayHtmlLength: displayHtml.length,
+      htmlChanged: html !== displayHtml,
+      htmlPreview: html.substring(0, 100) + '...'
+    });
+
+    // PRIORITY: Always ensure HTML updates work immediately
+    if (html !== displayHtml) {
+      console.log('📝 HTML changed! Updating display HTML immediately:', html.length, 'characters');
+      
+      // Clear any pending timeout to prevent conflicts
+      if (htmlUpdateTimeoutRef.current) {
+        clearTimeout(htmlUpdateTimeoutRef.current);
+      }
+
+      // For AI working (streaming), add minimal smoothness
+      if (isAiWorking) {
+        console.log('🤖 AI working - adding minimal delay for smoothness');
+        setIsLoading(true);
+        
+        htmlUpdateTimeoutRef.current = setTimeout(() => {
+          setDisplayHtml(html);
+          prevHtmlRef.current = html;
+          setIsLoading(false);
+          console.log('✅ Delayed update completed for AI streaming');
+        }, 100); // Very short delay for minimal smoothness
+      } else {
+        // Immediate update for manual changes
+        setDisplayHtml(html);
+        prevHtmlRef.current = html;
+        setIsLoading(false);
+        console.log('⚡ Immediate update completed for manual change');
+      }
+    }
+
+    console.log('✅ SIMPLIFIED Preview update completed, displayHtml length:', displayHtml.length);
+  }, [html, isAiWorking]);
+
+  // Add basic smooth transitions via CSS
+  useEffect(() => {
+    const iframe = currentIframeRef.current;
+    if (!iframe || !iframe.contentDocument) return;
+
+    const injectSmoothTransitions = () => {
+      const doc = iframe.contentDocument;
+      if (!doc) return;
+
+      let existingStyle = doc.getElementById('smooth-transitions');
+      if (existingStyle) return;
+
+      const style = doc.createElement('style');
+      style.id = 'smooth-transitions';
+      style.textContent = `
+        /* Smooth transitions for content changes */
+        * {
+          transition: opacity 0.15s ease, background-color 0.15s ease, 
+                     color 0.15s ease, border-color 0.15s ease !important;
+        }
+        
+        /* Prevent flashing during updates */
+        body {
+          transition: opacity 0.1s ease !important;
+        }
+        
+        /* Subtle animations for new content */
+        @keyframes contentFadeIn {
+          from { opacity: 0.8; }
+          to { opacity: 1; }
+        }
+        
+        body.content-updating {
+          animation: contentFadeIn 0.2s ease-in-out;
+        }
+      `;
+      doc.head.appendChild(style);
+      console.log('✨ Smooth transitions injected into iframe');
+    };
+
+    // Inject on iframe load
+    iframe.addEventListener('load', injectSmoothTransitions);
+    
+    // Also try to inject immediately if iframe is already loaded
+    if (iframe.contentDocument?.readyState === 'complete') {
+      injectSmoothTransitions();
+    }
+
+    return () => {
+      iframe.removeEventListener('load', injectSmoothTransitions);
+    };
+  }, [currentIframeRef]);
+
+  // Add content updating class for animations
+  useEffect(() => {
+    const iframe = currentIframeRef.current;
+    if (!iframe || !iframe.contentDocument) return;
+
+    const body = iframe.contentDocument.body;
+    if (!body) return;
+
+    body.classList.add('content-updating');
+    
+    const timeout = setTimeout(() => {
+      body.classList.remove('content-updating');
+    }, 200);
+
+    return () => {
+      clearTimeout(timeout);
+      body.classList.remove('content-updating');
+    };
+  }, [displayHtml, currentIframeRef]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (htmlUpdateTimeoutRef.current) {
+        clearTimeout(htmlUpdateTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Event handlers for editable mode
+  const handleMouseOver = (event: MouseEvent) => {
+    if (currentIframeRef?.current) {
+      const iframeDocument = currentIframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (
+          hoveredElement !== targetElement &&
+          targetElement !== iframeDocument.body
+        ) {
+          console.log("🎯 Edit mode: Element hovered", {
+            tagName: targetElement.tagName,
+            id: targetElement.id || 'no-id',
+            className: targetElement.className || 'no-class'
+          });
+          
+          // Remove previous hover class
+          if (hoveredElement) {
+            hoveredElement.classList.remove("hovered-element");
+          }
+          
+          setHoveredElement(targetElement);
+          targetElement.classList.add("hovered-element");
+        } else {
+          return setHoveredElement(null);
+        }
+      }
+    }
+  };
+  
+  const handleMouseOut = () => {
+    setHoveredElement(null);
+  };
+  
+  const handleClick = (event: MouseEvent) => {
+    console.log("🖱️ Edit mode: Click detected in iframe", {
+      target: event.target,
+      tagName: (event.target as HTMLElement)?.tagName,
+      isBody: event.target === currentIframeRef?.current?.contentDocument?.body,
+      hasOnClickElement: !!onClickElement
+    });
+
+    if (currentIframeRef?.current) {
+      const iframeDocument = currentIframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (targetElement !== iframeDocument.body) {
+          console.log("✅ Edit mode: Valid element clicked, calling onClickElement", {
+            tagName: targetElement.tagName,
+            id: targetElement.id || 'no-id',
+            className: targetElement.className || 'no-class',
+            textContent: targetElement.textContent?.substring(0, 50) + '...'
+          });
+          
+          // Prevent default behavior to avoid navigation
+          event.preventDefault();
+          event.stopPropagation();
+          
+          onClickElement?.(targetElement);
+        } else {
+          console.log("⚠️ Edit mode: Body clicked, ignoring");
+        }
+      } else {
+        console.error("❌ Edit mode: No iframe document available on click");
+      }
+    } else {
+      console.error("❌ Edit mode: No iframe ref available on click");
+    }
+  };
+
+  // Setup event listeners for editable mode
+  useUpdateEffect(() => {
+    const cleanupListeners = () => {
+      if (currentIframeRef?.current?.contentDocument) {
+        const iframeDocument = currentIframeRef.current.contentDocument;
+        iframeDocument.removeEventListener("mouseover", handleMouseOver);
+        iframeDocument.removeEventListener("mouseout", handleMouseOut);
+        iframeDocument.removeEventListener("click", handleClick);
+        console.log("🧹 Edit mode: Cleaned up iframe event listeners");
+      }
+    };
+
+    const setupListeners = () => {
+      try {
+        if (!currentIframeRef?.current) {
+          console.log("⚠️ Edit mode: No iframe ref available");
+          return;
+        }
+
+        const iframeDocument = currentIframeRef.current.contentDocument;
+        if (!iframeDocument) {
+          console.log("⚠️ Edit mode: No iframe content document available");
+          return;
+        }
+
+        // Clean up existing listeners first
+        cleanupListeners();
+
+        if (isEditableModeEnabled) {
+          console.log("🎯 Edit mode: Setting up iframe event listeners");
+          iframeDocument.addEventListener("mouseover", handleMouseOver);
+          iframeDocument.addEventListener("mouseout", handleMouseOut);
+          iframeDocument.addEventListener("click", handleClick);
+          console.log("✅ Edit mode: Event listeners added successfully");
+        } else {
+          console.log("🔇 Edit mode: Disabled, no listeners added");
+        }
+      } catch (error) {
+        console.error("❌ Edit mode: Error setting up listeners:", error);
+      }
+    };
+
+    // Add a small delay to ensure iframe is fully loaded
+    const timeoutId = setTimeout(setupListeners, 100);
+
+    // Clean up when component unmounts or dependencies change
+    return () => {
+      clearTimeout(timeoutId);
+      cleanupListeners();
+    };
+  }, [currentIframeRef, isEditableModeEnabled]);
+
+  const selectedElement = useMemo(() => {
+    if (!isEditableModeEnabled) return null;
+    if (!hoveredElement) return null;
+    return hoveredElement;
+  }, [hoveredElement, isEditableModeEnabled]);
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        "bg-white overflow-hidden relative flex-1 h-full",
+        {
+          "cursor-wait": isLoading && isAiWorking,
+        }
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <GridPattern
+        width={20}
+        height={20}
+        x={-1}
+        y={-1}
+        strokeDasharray={"4 2"}
+        className={cn(
+          "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] z-0 absolute inset-0 h-full w-full fill-neutral-100 stroke-neutral-100"
+        )}
+      />
+      
+      {/* Simplified loading overlay */}
+      {isLoading && isAiWorking && (
+        <div className="absolute inset-0 bg-black/5 backdrop-blur-[0.5px] transition-all duration-300 z-20 flex items-center justify-center">
+          <div className="bg-neutral-800/95 rounded-lg px-4 py-2 text-sm text-neutral-300 border border-neutral-700 shadow-lg">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+              Updating preview...
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* Selected element indicator */}
+      {!isAiWorking && hoveredElement && selectedElement && (
+        <div className="absolute bottom-4 left-4 z-30">
+          <div className="bg-neutral-800/90 rounded-lg px-3 py-2 text-sm text-neutral-300 border border-neutral-700 shadow-lg">
+            <span className="font-medium">
+              {htmlTagToText(selectedElement.tagName.toLowerCase())}
+            </span>
+            {selectedElement.id && (
+              <span className="ml-2 text-neutral-400">#{selectedElement.id}</span>
+            )}
+          </div>
+        </div>
+      )}
+      
+      {/* Simplified single iframe with CSS transitions */}
+      <iframe
+        id="preview-iframe"
+        ref={currentIframeRef}
+        title="output"
+        className={classNames(
+          "w-full select-none h-full transition-all duration-200 ease-out",
+          {
+            "pointer-events-none": isResizing || isAiWorking,
+            "opacity-95 scale-[0.999]": isLoading && isAiWorking,
+            "opacity-100 scale-100": !isLoading || !isAiWorking,
+            "bg-black": true,
+            "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
+              device === "mobile",
+            "lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:rounded-[24px]":
+              device === "desktop",
+          }
+        )}
+        srcDoc={displayHtml}
+        onLoad={() => {
+          console.log('🎯 SIMPLIFIED Preview iframe loaded with HTML length:', displayHtml.length);
+          setIsLoading(false);
+        }}
+      />
+    </div>
+  );
+});
+
+Preview.displayName = "Preview";

components/editor/preview/index.tsx

@@ -1,579 +1,511 @@
 "use client";
- import { useUpdateEffect } from "react-use";
- import { useMemo, useState, useRef, useEffect, forwardRef, useCallback } from "react";
- import classNames from "classnames";
- import { toast } from "sonner";
- 
- import { cn } from "@/lib/utils";
- import { GridPattern } from "@/components/magic-ui/grid-pattern";
- import { htmlTagToText } from "@/lib/html-tag-to-text";
- 
- export const Preview = forwardRef<
-   HTMLDivElement,
-   {
-     html: string;
-     isResizing: boolean;
-     isAiWorking: boolean;
-     device: "desktop" | "mobile";
-     currentTab: string;
-     iframeRef?: React.RefObject<HTMLIFrameElement | null>;
-     isEditableModeEnabled?: boolean;
-     onClickElement?: (element: HTMLElement) => void;
-   }
- >(({
-   html,
-   isResizing,
-   isAiWorking,
-   device,
-   currentTab,
-   iframeRef,
-   isEditableModeEnabled,
-   onClickElement,
- }, ref) => {
-   const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(
-     null
-   );
-   const [isLoading, setIsLoading] = useState(false);
-   const [displayHtml, setDisplayHtml] = useState(html);
-   const htmlUpdateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-   const prevHtmlRef = useRef(html);
-   const updateCountRef = useRef(0);
-
-   // Debug logging for initial state
-   useEffect(() => {
-     console.log('🚀 Preview component mounted with HTML:', {
-       htmlLength: html.length,
-       htmlPreview: html.substring(0, 200) + '...',
-       displayHtmlLength: displayHtml.length
-     });
-   }, []);
-
-   // CRITICAL: Main HTML update logic - handles all HTML changes
-   useEffect(() => {
-     console.log('🔄 Preview update triggered:', { 
-       htmlLength: html.length, 
-       isAiWorking, 
-       displayHtmlLength: displayHtml.length,
-       htmlChanged: html !== displayHtml,
-       htmlPreview: html.substring(0, 100) + '...'
-     });
-
-     // Always update displayHtml when html prop changes
-     if (html !== displayHtml) {
-       console.log('📝 HTML changed! Updating displayHtml from', displayHtml.length, 'to', html.length, 'characters');
-       setDisplayHtml(html);
-       // Also update secondaryHtml to keep both iframes in sync
-       setSecondaryHtml(html);
-       prevHtmlRef.current = html;
-     }
-
-     // Clear any pending timeouts
-     if (htmlUpdateTimeoutRef.current) {
-       clearTimeout(htmlUpdateTimeoutRef.current);
-     }
-
-     // Enhanced updates during AI streaming for smoothness
-     if (isAiWorking && html !== prevHtmlRef.current) {
-       console.log('� AI working - scheduling enhanced smooth update');
-       setIsLoading(true);
-       
-       htmlUpdateTimeoutRef.current = setTimeout(async () => {
-         console.log('🎬 Executing enhanced streaming update');
-         
-         // Try seamless injection for smoother updates during streaming
-         const injectionSuccess = injectContentSeamlessly(html);
-         
-         if (!injectionSuccess) {
-           console.log('💫 Seamless injection not available, using direct update');
-           // displayHtml is already updated above, so iframe will re-render
-         }
-         
-         prevHtmlRef.current = html;
-         setIsLoading(false);
-       }, 200); // Shorter delay for more responsive updates
-     } else {
-       // Immediate update when AI is not working
-       setIsLoading(false);
-     }
-
-     console.log('✅ Preview update completed, displayHtml length:', displayHtml.length);
-   }, [html, isAiWorking]); // Simplified dependencies
- 
-   // DUAL IFRAME SYSTEM for ultra-smooth transitions when injection fails
-   const [activeIframeIndex, setActiveIframeIndex] = useState(0);
-   const [secondaryHtml, setSecondaryHtml] = useState(html); // Initialize with current HTML
-   const iframe1Ref = useRef<HTMLIFrameElement>(null);
-   const iframe2Ref = useRef<HTMLIFrameElement>(null);
-   const [isSwapping, setIsSwapping] = useState(false);
- 
-   // Get the currently active iframe reference
-   const getCurrentIframe = useCallback(() => {
-     return activeIframeIndex === 0 ? iframe1Ref.current : iframe2Ref.current;
-   }, [activeIframeIndex]);
- 
-   // Get the secondary (hidden) iframe reference
-   const getSecondaryIframe = useCallback(() => {
-     return activeIframeIndex === 0 ? iframe2Ref.current : iframe1Ref.current;
-   }, [activeIframeIndex]);
- 
-   // Forward the active iframe ref to maintain backward compatibility
-   useEffect(() => {
-     if (iframeRef) {
-       iframeRef.current = getCurrentIframe();
-     }
-   }, [activeIframeIndex, iframeRef, getCurrentIframe]);
- 
-   // Content buffering for ultra-smooth transitions
-   const [contentBuffer, setContentBuffer] = useState<string[]>([]);
-   const bufferTimeoutRef = useRef<NodeJS.Timeout | null>(null);
- 
-   // Content similarity checking to prevent flash on tiny changes
-   const getContentSimilarity = (html1: string, html2: string) => {
-     // Remove whitespace and normalize for comparison
-     const normalize = (str: string) => str.replace(/\s+/g, ' ').trim();
-     const normalized1 = normalize(html1);
-     const normalized2 = normalize(html2);
-     
-     // Calculate similarity percentage
-     const maxLength = Math.max(normalized1.length, normalized2.length);
-     if (maxLength === 0) return 1;
-     
-     const distance = Math.abs(normalized1.length - normalized2.length);
-     return 1 - (distance / maxLength);
-   };
- 
-   // Buffer management for even smoother updates
-   const addToBuffer = useCallback((newHtml: string) => {
-     setContentBuffer(prev => {
-       const updated = [...prev, newHtml];
-       // Keep only last 3 versions for smooth transitions
-       return updated.slice(-3);
-     });
-     
-     // Auto-flush buffer after delay
-     if (bufferTimeoutRef.current) {
-       clearTimeout(bufferTimeoutRef.current);
-     }
-     
-     bufferTimeoutRef.current = setTimeout(() => {
-       const latestContent = contentBuffer[contentBuffer.length - 1];
-       if (latestContent && latestContent !== displayHtml) {
-         console.log('📦 Buffer: Auto-flushing to latest content');
-         setDisplayHtml(latestContent);
-         setContentBuffer([]);
-       }
-     }, 3000);
-   }, [contentBuffer, displayHtml]);
- 
-   // Ultra-smooth dual iframe swapping for zero-flash transitions
-   const swapIframes = useCallback((newHtml: string) => {
-     const secondary = getSecondaryIframe();
-     if (!secondary) return false;
- 
-     return new Promise<boolean>((resolve) => {
-       console.log('🔄 Starting dual iframe swap for zero-flash transition');
-       setIsSwapping(true);
-       
-       // Pre-load content in secondary iframe
-       setSecondaryHtml(newHtml);
-       
-       // Wait for secondary iframe to load
-       const handleSecondaryLoad = () => {
-         console.log('✨ Secondary iframe loaded, executing seamless swap');
-         
-         // Smooth transition: fade out current, fade in secondary
-         const current = getCurrentIframe();
-         if (current) {
-           current.style.opacity = '0';
-           current.style.transform = 'scale(0.98)';
-         }
-         
-         setTimeout(() => {
-           // Swap active iframe index
-           setActiveIframeIndex(prev => prev === 0 ? 1 : 0);
-           setDisplayHtml(newHtml);
-           
-           // Fade in the new active iframe
-           const newActive = secondary;
-           newActive.style.opacity = '1';
-           newActive.style.transform = 'scale(1)';
-           
-           setTimeout(() => {
-             setIsSwapping(false);
-             resolve(true);
-             console.log('🎯 Dual iframe swap completed - zero flash achieved!');
-           }, 200);
-         }, 150);
-       };
-       
-       secondary.addEventListener('load', handleSecondaryLoad, { once: true });
-       
-       // Fallback timeout
-       setTimeout(() => {
-         if (isSwapping) {
-           setIsSwapping(false);
-           resolve(false);
-           console.log('⏰ Dual iframe swap timeout');
-         }
-       }, 3000);
-     });
-   }, [getCurrentIframe, getSecondaryIframe, isSwapping]);
- 
-   // REVOLUTIONARY: Zero-flash content injection system (no srcDoc updates!)
-   const injectContentSeamlessly = useCallback((newHtml: string, forceUpdate = false) => {
-     const iframe = getCurrentIframe();
-     if (!iframe || !iframe.contentWindow || !iframe.contentDocument) {
-       console.log('🚫 Iframe not ready for seamless injection');
-       return false;
-     }
- 
-     try {
-       const doc = iframe.contentDocument;
-       const currentHtml = doc.documentElement.outerHTML;
-       
-       // Skip if content is identical
-       if (currentHtml === newHtml && !forceUpdate) {
-         return false;
-       }
- 
-       console.log('💉 Seamless content injection starting...', {
-         htmlLength: newHtml.length,
-         currentLength: currentHtml.length,
-         forceUpdate
-       });
- 
-       // SEAMLESS METHOD 1: Direct DOM manipulation (zero flash)
-       // Create a temporary container to parse the new HTML
-       const tempDiv = doc.createElement('div');
-       tempDiv.innerHTML = newHtml;
-       
-       // Get the new body content
-       const newBodyElement = tempDiv.querySelector('body');
-       const newHeadElement = tempDiv.querySelector('head');
-       
-       if (newBodyElement) {
-         // Smoothly replace body content without flash
-         const currentBody = doc.body;
-         if (currentBody) {
-           // Copy styles and classes to maintain visual continuity
-           const bodyStyles = currentBody.style.cssText;
-           const bodyClass = currentBody.className;
-           
-           // Replace content seamlessly
-           currentBody.innerHTML = newBodyElement.innerHTML;
-           currentBody.style.cssText = bodyStyles;
-           currentBody.className = bodyClass;
-           
-           console.log('✨ Body content injected seamlessly');
-         }
-       }
-       
-       if (newHeadElement) {
-         // Update head content if needed (styles, meta tags)
-         const currentHead = doc.head;
-         if (currentHead) {
-           // Only update if head content is significantly different
-           const headDiff = Math.abs(newHeadElement.innerHTML.length - currentHead.innerHTML.length);
-           if (headDiff > 100) {
-             currentHead.innerHTML = newHeadElement.innerHTML;
-             console.log('🧠 Head content updated seamlessly');
-           }
-         }
-       }
-       
-       return true;
-     } catch (error) {
-       console.warn('⚠️ Seamless injection failed, falling back:', error);
-       return false;
-     }
-   }, [getCurrentIframe]);
- 
-   // Cleanup timeout on unmount
-   useEffect(() => {
-     return () => {
-       if (htmlUpdateTimeoutRef.current) {
-         clearTimeout(htmlUpdateTimeoutRef.current);
-       }
-     };
-   }, []);
- 
-   // add event listener to the iframe to track hovered elements (dual iframe compatible)
-   const handleMouseOver = (event: MouseEvent) => {
-     const activeIframe = getCurrentIframe();
-     if (activeIframe) {
-       const iframeDocument = activeIframe.contentDocument;
-       if (iframeDocument) {
-         const targetElement = event.target as HTMLElement;
-         if (
-           hoveredElement !== targetElement &&
-           targetElement !== iframeDocument.body
-         ) {
-           console.log("🎯 Edit mode: Element hovered", {
-             tagName: targetElement.tagName,
-             id: targetElement.id || 'no-id',
-             className: targetElement.className || 'no-class'
-           });
-           
-           // Remove previous hover class
-           if (hoveredElement) {
-             hoveredElement.classList.remove("hovered-element");
-           }
-           
-           setHoveredElement(targetElement);
-           targetElement.classList.add("hovered-element");
-         } else {
-           return setHoveredElement(null);
-         }
-       }
-     }
-   };
-   
-   const handleMouseOut = () => {
-     setHoveredElement(null);
-   };
-   
-   const handleClick = (event: MouseEvent) => {
-     const activeIframe = getCurrentIframe();
-     console.log("🖱️ Edit mode: Click detected in iframe", {
-       target: event.target,
-       tagName: (event.target as HTMLElement)?.tagName,
-       isBody: event.target === activeIframe?.contentDocument?.body,
-       hasOnClickElement: !!onClickElement
-     });
- 
-     if (activeIframe) {
-       const iframeDocument = activeIframe.contentDocument;
-       if (iframeDocument) {
-         const targetElement = event.target as HTMLElement;
-         if (targetElement !== iframeDocument.body) {
-           console.log("✅ Edit mode: Valid element clicked, calling onClickElement", {
-             tagName: targetElement.tagName,
-             id: targetElement.id || 'no-id',
-             className: targetElement.className || 'no-class',
-             textContent: targetElement.textContent?.substring(0, 50) + '...'
-           });
-           
-           // Prevent default behavior to avoid navigation
-           event.preventDefault();
-           event.stopPropagation();
-           
-           onClickElement?.(targetElement);
-         } else {
-           console.log("⚠️ Edit mode: Body clicked, ignoring");
-         }
-       } else {
-         console.error("❌ Edit mode: No iframe document available on click");
-       }
-     } else {
-       console.error("❌ Edit mode: No iframe ref available on click");
-     }
-   };
- 
-   useUpdateEffect(() => {
-     const cleanupListeners = () => {
-       if (iframeRef?.current?.contentDocument) {
-         const iframeDocument = iframeRef.current.contentDocument;
-         iframeDocument.removeEventListener("mouseover", handleMouseOver);
-         iframeDocument.removeEventListener("mouseout", handleMouseOut);
-         iframeDocument.removeEventListener("click", handleClick);
-         console.log("🧹 Edit mode: Cleaned up iframe event listeners");
-       }
-     };
- 
-     const setupListeners = () => {
-       try {
-         if (!iframeRef?.current) {
-           console.log("⚠️ Edit mode: No iframe ref available");
-           return;
-         }
- 
-         const iframeDocument = iframeRef.current.contentDocument;
-         if (!iframeDocument) {
-           console.log("⚠️ Edit mode: No iframe content document available");
-           return;
-         }
- 
-         // Clean up existing listeners first
-         cleanupListeners();
- 
-         if (isEditableModeEnabled) {
-           console.log("🎯 Edit mode: Setting up iframe event listeners");
-           iframeDocument.addEventListener("mouseover", handleMouseOver);
-           iframeDocument.addEventListener("mouseout", handleMouseOut);
-           iframeDocument.addEventListener("click", handleClick);
-           console.log("✅ Edit mode: Event listeners added successfully");
-         } else {
-           console.log("🔇 Edit mode: Disabled, no listeners added");
-         }
-       } catch (error) {
-         console.error("❌ Edit mode: Error setting up listeners:", error);
-       }
-     };
- 
-     // Add a small delay to ensure iframe is fully loaded
-     const timeoutId = setTimeout(setupListeners, 100);
- 
-     // Clean up when component unmounts or dependencies change
-     return () => {
-       clearTimeout(timeoutId);
-       cleanupListeners();
-     };
-   }, [iframeRef, isEditableModeEnabled]);
- 
-   const selectedElement = useMemo(() => {
-     if (!isEditableModeEnabled) return null;
-     if (!hoveredElement) return null;
-     return hoveredElement;
-   }, [hoveredElement, isEditableModeEnabled]);
- 
-   return (
-     <div
-       ref={ref}
-       className={classNames(
-         "w-full border-l border-gray-900 h-full relative z-0 flex items-center justify-center",
-         {
-           "lg:border-l-0": currentTab === "preview",
-         }
-       )}
-     >
-       <GridPattern
-         width={20}
-         height={20}
-         x={-1}
-         y={-1}
-         className={cn(
-           "[mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))] absolute inset-0 h-full w-full"
-         )}
-       />
-       {/* Subtle loading indicator - only during major transitions */}
-       {isLoading && isAiWorking && (
-         <div className="absolute top-3 left-3 z-30">
-           <div className="bg-neutral-900/90 backdrop-blur-sm rounded-full px-3 py-1 text-xs text-neutral-300 border border-neutral-600/30 shadow-sm">
-             <div className="flex items-center gap-2">
-               <div className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-pulse"></div>
-               <span className="font-medium">Updating...</span>
-             </div>
-           </div>
-         </div>
-       )}
-       {/* Gentle progress indicator during AI work */}
-       {isAiWorking && !isLoading && (
-         <div className="absolute top-3 right-3 z-30">
-           <div className="bg-neutral-900/95 backdrop-blur-sm rounded-full px-4 py-2 text-xs text-neutral-300 border border-neutral-600/50 shadow-lg">
-             <div className="flex items-center gap-3">
-               <div className="relative">
-                 <div className="w-2 h-2 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full animate-pulse"></div>
-                 <div className="absolute inset-0 w-2 h-2 bg-gradient-to-r from-green-400 to-emerald-400 rounded-full animate-ping opacity-30"></div>
-               </div>
-               <span className="font-medium">AI generating...</span>
-             </div>
-           </div>
-         </div>
-       )}
-       {!isEditableModeEnabled &&
-         !isAiWorking &&
-         hoveredElement &&
-         selectedElement && (
-         <div
-           className="cursor-pointer absolute bg-sky-500/10 border-[2px] border-dashed border-sky-500 rounded-r-lg rounded-b-lg p-3 z-10 pointer-events-none"
-           style={{
-             top: selectedElement.getBoundingClientRect().top + 24,
-             left: selectedElement.getBoundingClientRect().left + 24,
-             width: selectedElement.getBoundingClientRect().width,
-             height: selectedElement.getBoundingClientRect().height,
-           }}
-         >
-           <span className="bg-sky-500 rounded-t-md text-sm text-neutral-100 px-2 py-0.5 -translate-y-7 absolute top-0 left-0">
-             {htmlTagToText(selectedElement.tagName.toLowerCase())}
-           </span>
-         </div>
-       )}
-       {/* DUAL IFRAME SYSTEM for zero-flash transitions */}
-       {/* Primary iframe */}
-       <iframe
-         id="preview-iframe-1"
-         ref={iframe1Ref}
-         title="output-primary"
-         className={classNames(
-           "absolute inset-0 w-full select-none h-full transition-all duration-300 ease-out",
-           {
-             "pointer-events-none": isResizing || isAiWorking,
-             "opacity-100": activeIframeIndex === 0,
-             "opacity-0": activeIframeIndex !== 0,
-             "bg-white": true,
-             "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
-               device === "mobile",
-             "lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:rounded-[24px]":
-               currentTab !== "preview" && device === "desktop",
-           }
-         )}
-         srcDoc={displayHtml}
-         onLoad={() => {
-           const activeIframe = iframe1Ref.current;
-           console.log("🎬 Primary iframe loaded:", {
-             isActive: activeIframeIndex === 0,
-             hasContentWindow: !!activeIframe?.contentWindow,
-             hasContentDocument: !!activeIframe?.contentDocument,
-             htmlLength: displayHtml.length,
-             srcDocPreview: displayHtml.substring(0, 100) + '...'
-           });
-           
-           setIsLoading(false);
-           
-           if (activeIframe?.contentWindow?.document?.body) {
-             activeIframe.contentWindow.document.body.scrollIntoView({
-               block: isAiWorking ? "end" : "start",
-               inline: "nearest",
-               behavior: "smooth",
-             });
-           }
-         }}
-         key={`primary-${displayHtml.length}`} // Force re-render when content changes
-       />
-       
-       {/* Secondary iframe for seamless swapping */}
-       <iframe
-         id="preview-iframe-2"
-         ref={iframe2Ref}
-         title="output-secondary"
-         className={classNames(
-           "absolute inset-0 w-full select-none h-full transition-all duration-300 ease-out",
-           {
-             "pointer-events-none": isResizing || isAiWorking,
-             "opacity-100": activeIframeIndex === 1,
-             "opacity-0": activeIframeIndex !== 1,
-             "bg-white": true,
-             "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
-               device === "mobile",
-             "lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:rounded-[24px]":
-               currentTab !== "preview" && device === "desktop",
-           }
-         )}
-         srcDoc={secondaryHtml || displayHtml}
-         onLoad={() => {
-           const activeIframe = iframe2Ref.current;
-           console.log("🎬 Secondary iframe loaded:", {
-             isActive: activeIframeIndex === 1,
-             hasContentWindow: !!activeIframe?.contentWindow,
-             hasContentDocument: !!activeIframe?.contentDocument,
-             htmlLength: secondaryHtml.length || displayHtml.length,
-             srcDocPreview: (secondaryHtml || displayHtml).substring(0, 100) + '...'
-           });
-           
-           setIsLoading(false);
-           
-           if (activeIframe?.contentWindow?.document?.body) {
-             activeIframe.contentWindow.document.body.scrollIntoView({
-               block: isAiWorking ? "end" : "start",
-               inline: "nearest",
-               behavior: "smooth",
-             });
-           }
-         }}
-         key={`secondary-${(secondaryHtml || displayHtml).length}`} // Force re-render when content changes
-       />
-     </div>
-   );
- });
- 
- Preview.displayName = "Preview";
+import { useUpdateEffect } from "react-use";
+import { useMemo, useState, useRef, useEffect, forwardRef, useCallback } from "react";
+import classNames from "classnames";
+import { toast } from "sonner";
+
+import { cn } from "@/lib/utils";
+import { GridPattern } from "@/components/magic-ui/grid-pattern";
+import { htmlTagToText } from "@/lib/html-tag-to-text";
+
+export const Preview = forwardRef<
+  HTMLDivElement,
+  {
+    html: string;
+    isResizing: boolean;
+    isAiWorking: boolean;
+    device: "desktop" | "mobile";
+    currentTab: string;
+    iframeRef?: React.RefObject<HTMLIFrameElement | null>;
+    isEditableModeEnabled?: boolean;
+    onClickElement?: (element: HTMLElement) => void;
+  }
+>(({
+  html,
+  isResizing,
+  isAiWorking,
+  device,
+  currentTab,
+  iframeRef,
+  isEditableModeEnabled,
+  onClickElement,
+}, ref) => {
+  const [hoveredElement, setHoveredElement] = useState<HTMLElement | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [displayHtml, setDisplayHtml] = useState(html);
+  const htmlUpdateTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const prevHtmlRef = useRef(html);
+  const internalIframeRef = useRef<HTMLIFrameElement>(null);
+  
+  // Add iframe key for force refresh when needed
+  const [iframeKey, setIframeKey] = useState(0);
+  
+  // Use internal ref if external ref not provided
+  const currentIframeRef = iframeRef || internalIframeRef;
+  
+  // Force refresh iframe if it seems stuck
+  const forceRefresh = useCallback(() => {
+    console.log('🔄 Force refreshing iframe');
+    setIframeKey(prev => prev + 1);
+  }, []);
+
+  // Monitor for stuck updates and force refresh if needed
+  useEffect(() => {
+    if (html !== displayHtml && !isAiWorking) {
+      const timeout = setTimeout(() => {
+        if (html !== displayHtml) {
+          console.log('⚠️ Preview seems stuck, force refreshing');
+          setDisplayHtml(html);
+          forceRefresh();
+        }
+      }, 2000);
+      
+      return () => clearTimeout(timeout);
+    }
+  }, [html, displayHtml, isAiWorking, forceRefresh]);
+
+  // Debug logging for initial state and prop changes
+  useEffect(() => {
+    console.log('🚀 Preview component mounted/updated with HTML:', {
+      htmlLength: html.length,
+      displayHtmlLength: displayHtml.length,
+      htmlPreview: html.substring(0, 200) + '...',
+      isAiWorking,
+      device,
+      currentTab
+    });
+  }, [html, displayHtml, isAiWorking, device, currentTab]);
+
+  // CRITICAL: Reliable HTML update logic with debugging
+  useEffect(() => {
+    console.log('🔄 Preview update triggered:', { 
+      htmlLength: html.length, 
+      isAiWorking, 
+      displayHtmlLength: displayHtml.length,
+      htmlChanged: html !== displayHtml,
+      prevHtmlLength: prevHtmlRef.current.length,
+      htmlPreview: html.substring(0, 100) + '...',
+      displayPreview: displayHtml.substring(0, 100) + '...'
+    });
+
+    // ALWAYS update when HTML prop changes - this is critical
+    if (html !== prevHtmlRef.current) {
+      console.log('📝 HTML prop changed! Forcing update:', {
+        from: prevHtmlRef.current.length,
+        to: html.length,
+        isAiWorking,
+        willUseDelay: isAiWorking
+      });
+      
+      // Clear any pending timeout to prevent conflicts
+      if (htmlUpdateTimeoutRef.current) {
+        clearTimeout(htmlUpdateTimeoutRef.current);
+        console.log('⏰ Cleared pending timeout');
+      }
+
+      // Update ref immediately
+      prevHtmlRef.current = html;
+
+      // For AI working (streaming), add minimal smoothness
+      if (isAiWorking && html.length > 0) {
+        console.log('🤖 AI working - adding minimal delay for smoothness');
+        setIsLoading(true);
+        
+        htmlUpdateTimeoutRef.current = setTimeout(() => {
+          console.log('⚡ Applying delayed HTML update:', html.length);
+          setDisplayHtml(html);
+          setIsLoading(false);
+        }, 100); // Very short delay for minimal smoothness
+      } else {
+        // Immediate update for manual changes or when AI stops
+        console.log('⚡ Applying immediate HTML update:', html.length);
+        setDisplayHtml(html);
+        setIsLoading(false);
+      }
+    } else if (html !== displayHtml) {
+      // Edge case: displayHtml is out of sync
+      console.log('🔧 Fixing displayHtml sync issue');
+      setDisplayHtml(html);
+    }
+
+    console.log('✅ Preview update completed');
+  }, [html, isAiWorking]);
+
+  // Enhanced smooth transitions via CSS injection
+  useEffect(() => {
+    const iframe = currentIframeRef.current;
+    if (!iframe) return;
+
+    const injectSmoothTransitions = () => {
+      const doc = iframe.contentDocument;
+      if (!doc) return;
+
+      let existingStyle = doc.getElementById('smooth-transitions');
+      if (existingStyle) {
+        console.log('🎨 Smooth transitions already injected, updating...');
+        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);
+          }
+          100% { 
+            opacity: 1; 
+            transform: translateY(0);
+          }
+        }
+        
+        /* 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);
+          }
+          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;
+        }
+      `;
+      doc.head.appendChild(style);
+      console.log('✨ Enhanced smooth transitions injected into iframe');
+    };
+
+    // Inject on iframe load and when content changes
+    const handleLoad = () => {
+      setTimeout(injectSmoothTransitions, 10);
+    };
+    
+    iframe.addEventListener('load', handleLoad);
+    
+    // Also try to inject immediately if iframe is already loaded
+    if (iframe.contentDocument?.readyState === 'complete') {
+      injectSmoothTransitions();
+    } else {
+      // Try again after a short delay
+      setTimeout(() => {
+        if (iframe.contentDocument?.readyState === 'complete') {
+          injectSmoothTransitions();
+        }
+      }, 100);
+    }
+
+    return () => {
+      iframe.removeEventListener('load', handleLoad);
+    };
+  }, [currentIframeRef, iframeKey]);
+
+  // Enhanced content updating animations
+  useEffect(() => {
+    const iframe = currentIframeRef.current;
+    if (!iframe) return;
+
+    const addContentUpdateAnimation = () => {
+      const doc = iframe.contentDocument;
+      if (!doc || !doc.body) return;
+
+      const body = doc.body;
+      
+      // Remove any existing animation classes
+      body.classList.remove('content-updating', 'content-changed');
+      
+      // Add animation class
+      body.classList.add('content-updating');
+      
+      console.log('🎬 Applied content update animation');
+      
+      // Remove class after animation
+      const timeout = setTimeout(() => {
+        body.classList.remove('content-updating');
+      }, 300);
+
+      return () => {
+        clearTimeout(timeout);
+        body.classList.remove('content-updating', 'content-changed');
+      };
+    };
+
+    // Small delay to ensure iframe content is ready
+    const timeout = setTimeout(addContentUpdateAnimation, 50);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [displayHtml, currentIframeRef]);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (htmlUpdateTimeoutRef.current) {
+        clearTimeout(htmlUpdateTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Event handlers for editable mode
+  const handleMouseOver = (event: MouseEvent) => {
+    if (currentIframeRef?.current) {
+      const iframeDocument = currentIframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (
+          hoveredElement !== targetElement &&
+          targetElement !== iframeDocument.body
+        ) {
+          console.log("🎯 Edit mode: Element hovered", {
+            tagName: targetElement.tagName,
+            id: targetElement.id || 'no-id',
+            className: targetElement.className || 'no-class'
+          });
+          
+          // Remove previous hover class
+          if (hoveredElement) {
+            hoveredElement.classList.remove("hovered-element");
+          }
+          
+          setHoveredElement(targetElement);
+          targetElement.classList.add("hovered-element");
+        } else {
+          return setHoveredElement(null);
+        }
+      }
+    }
+  };
+  
+  const handleMouseOut = () => {
+    setHoveredElement(null);
+  };
+  
+  const handleClick = (event: MouseEvent) => {
+    console.log("🖱️ Edit mode: Click detected in iframe", {
+      target: event.target,
+      tagName: (event.target as HTMLElement)?.tagName,
+      isBody: event.target === currentIframeRef?.current?.contentDocument?.body,
+      hasOnClickElement: !!onClickElement
+    });
+
+    if (currentIframeRef?.current) {
+      const iframeDocument = currentIframeRef.current.contentDocument;
+      if (iframeDocument) {
+        const targetElement = event.target as HTMLElement;
+        if (targetElement !== iframeDocument.body) {
+          console.log("✅ Edit mode: Valid element clicked, calling onClickElement", {
+            tagName: targetElement.tagName,
+            id: targetElement.id || 'no-id',
+            className: targetElement.className || 'no-class',
+            textContent: targetElement.textContent?.substring(0, 50) + '...'
+          });
+          
+          // Prevent default behavior to avoid navigation
+          event.preventDefault();
+          event.stopPropagation();
+          
+          onClickElement?.(targetElement);
+        } else {
+          console.log("⚠️ Edit mode: Body clicked, ignoring");
+        }
+      } else {
+        console.error("❌ Edit mode: No iframe document available on click");
+      }
+    } else {
+      console.error("❌ Edit mode: No iframe ref available on click");
+    }
+  };
+
+  // Setup event listeners for editable mode
+  useUpdateEffect(() => {
+    const cleanupListeners = () => {
+      if (currentIframeRef?.current?.contentDocument) {
+        const iframeDocument = currentIframeRef.current.contentDocument;
+        iframeDocument.removeEventListener("mouseover", handleMouseOver);
+        iframeDocument.removeEventListener("mouseout", handleMouseOut);
+        iframeDocument.removeEventListener("click", handleClick);
+        console.log("🧹 Edit mode: Cleaned up iframe event listeners");
+      }
+    };
+
+    const setupListeners = () => {
+      try {
+        if (!currentIframeRef?.current) {
+          console.log("⚠️ Edit mode: No iframe ref available");
+          return;
+        }
+
+        const iframeDocument = currentIframeRef.current.contentDocument;
+        if (!iframeDocument) {
+          console.log("⚠️ Edit mode: No iframe content document available");
+          return;
+        }
+
+        // Clean up existing listeners first
+        cleanupListeners();
+
+        if (isEditableModeEnabled) {
+          console.log("🎯 Edit mode: Setting up iframe event listeners");
+          iframeDocument.addEventListener("mouseover", handleMouseOver);
+          iframeDocument.addEventListener("mouseout", handleMouseOut);
+          iframeDocument.addEventListener("click", handleClick);
+          console.log("✅ Edit mode: Event listeners added successfully");
+        } else {
+          console.log("🔇 Edit mode: Disabled, no listeners added");
+        }
+      } catch (error) {
+        console.error("❌ Edit mode: Error setting up listeners:", error);
+      }
+    };
+
+    // Add a small delay to ensure iframe is fully loaded
+    const timeoutId = setTimeout(setupListeners, 100);
+
+    // Clean up when component unmounts or dependencies change
+    return () => {
+      clearTimeout(timeoutId);
+      cleanupListeners();
+    };
+  }, [currentIframeRef, isEditableModeEnabled]);
+
+  const selectedElement = useMemo(() => {
+    if (!isEditableModeEnabled) return null;
+    if (!hoveredElement) return null;
+    return hoveredElement;
+  }, [hoveredElement, isEditableModeEnabled]);
+
+  return (
+    <div
+      ref={ref}
+      className={classNames(
+        "bg-white overflow-hidden relative flex-1 h-full",
+        {
+          "cursor-wait": isLoading && isAiWorking,
+        }
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <GridPattern
+        width={20}
+        height={20}
+        x={-1}
+        y={-1}
+        strokeDasharray={"4 2"}
+        className={cn(
+          "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)] z-0 absolute inset-0 h-full w-full fill-neutral-100 stroke-neutral-100"
+        )}
+      />
+      
+      {/* Simplified loading overlay */}
+      {isLoading && isAiWorking && (
+        <div className="absolute inset-0 bg-black/5 backdrop-blur-[0.5px] transition-all duration-300 z-20 flex items-center justify-center">
+          <div className="bg-neutral-800/95 rounded-lg px-4 py-2 text-sm text-neutral-300 border border-neutral-700 shadow-lg">
+            <div className="flex items-center gap-2">
+              <div className="w-2 h-2 bg-blue-500 rounded-full animate-pulse"></div>
+              Updating preview...
+            </div>
+          </div>
+        </div>
+      )}
+      
+      {/* Selected element indicator */}
+      {!isAiWorking && hoveredElement && selectedElement && (
+        <div className="absolute bottom-4 left-4 z-30">
+          <div className="bg-neutral-800/90 rounded-lg px-3 py-2 text-sm text-neutral-300 border border-neutral-700 shadow-lg">
+            <span className="font-medium">
+              {htmlTagToText(selectedElement.tagName.toLowerCase())}
+            </span>
+            {selectedElement.id && (
+              <span className="ml-2 text-neutral-400">#{selectedElement.id}</span>
+            )}
+          </div>
+        </div>
+      )}
+      
+      {/* Reliable iframe with force refresh capability */}
+      <iframe
+        key={iframeKey}
+        id="preview-iframe"
+        ref={currentIframeRef}
+        title="output"
+        className={classNames(
+          "w-full select-none h-full transition-all duration-200 ease-out",
+          {
+            "pointer-events-none": isResizing || isAiWorking,
+            "opacity-95 scale-[0.999]": isLoading && isAiWorking,
+            "opacity-100 scale-100": !isLoading || !isAiWorking,
+            "bg-black": true,
+            "lg:max-w-md lg:mx-auto lg:!rounded-[42px] lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:h-[80dvh] lg:max-h-[996px]":
+              device === "mobile",
+            "lg:border-[8px] lg:border-neutral-700 lg:shadow-2xl lg:rounded-[24px]":
+              device === "desktop",
+          }
+        )}
+        srcDoc={displayHtml}
+        onLoad={() => {
+          console.log('🎯 Preview iframe loaded:', {
+            displayHtmlLength: displayHtml.length,
+            iframeKey,
+            hasContent: displayHtml.length > 0
+          });
+          setIsLoading(false);
+        }}
+        onError={(e) => {
+          console.error('❌ Iframe loading error:', e);
+          setIsLoading(false);
+        }}
+      />
+    </div>
+  );
+});
+
+Preview.displayName = "Preview";