diff_changes.txt

diff --git a/app/page.tsx b/app/page.tsx
index 62228b9..60ed463 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2294,15 +2294,24 @@ const InteractiveReactPreview = ({
       background: transparent; 
       color: ${textColor}; 
       font-family: system-ui, -apple-system, sans-serif;
-      width: fit-content;
-      min-width: 200px;
+      width: ${isFullWidth ? '100%' : 'fit-content'};
+      min-width: ${isFullWidth ? '900px' : 'unset'};
       max-width: 100%;
     }
     #root { 
-      width: fit-content;
-      min-width: 200px;
+      width: ${isFullWidth ? '100%' : 'fit-content'};
+      min-width: ${isFullWidth ? '900px' : 'unset'};
       max-width: 100%;
+      display: ${isFullWidth ? 'block' : 'inline-block'};
     }
+    /* Full-width sections - like Storybook */
+    ${isFullWidth ? `
+    header, footer, nav, section, main, .container, .wrapper, .hero, .footer, .header {
+      width: 100% !important;
+      min-width: 900px !important;
+      max-width: 100% !important;
+    }
+    ` : ''}
     .error-display {
       background: #fef2f2;
       border: 1px solid #fecaca;
@@ -2535,11 +2544,11 @@ const InteractiveReactPreview = ({
       });
     };
     
-    // Size reporting
+    // Size reporting - actual content size, no minimums
     const sendSize = () => {
       const root = document.getElementById('root');
-      const height = Math.max(root?.scrollHeight || 100, root?.offsetHeight || 100, 100);
-      const width = Math.max(root?.scrollWidth || 120, root?.offsetWidth || 120, 120);
+      const height = root?.scrollHeight || root?.offsetHeight || 40;
+      const width = root?.scrollWidth || root?.offsetWidth || 40;
       window.parent.postMessage({ type: 'IFRAME_SIZE', height, width }, '*');
     };
     
@@ -2594,7 +2603,7 @@ const InteractiveReactPreview = ({
   </script>
 </body>
 </html>`;
-  }, [code, background]);
+  }, [code, background, isFullWidth]);
   
   // Listen for size messages
   useEffect(() => {
@@ -2621,7 +2630,7 @@ const InteractiveReactPreview = ({
   }, [onSizeChange]);
 
   return (
-    <div className={cn("relative", isFullWidth ? "w-full" : "inline-flex justify-center w-full", className)}>
+    <div className={cn("relative", isFullWidth ? "w-full" : "inline-block", className)}>
       {error && (
         <div className="absolute top-2 left-2 right-2 z-10 bg-red-500/90 text-white text-xs p-2 rounded">
           {error}
@@ -2632,11 +2641,13 @@ const InteractiveReactPreview = ({
         srcDoc={iframeDoc}
         className="border-0"
         style={{ 
-          width: isFullWidth ? '100%' : (iframeWidth > 200 ? `${iframeWidth}px` : 'fit-content'),
-          minWidth: isFullWidth ? '100%' : '200px',
+          // Full-width components (product sections) get wide layout like Storybook
+          // Small components (button, icon, card) hug their actual content - no artificial sizes
+          width: isFullWidth ? '100%' : (iframeWidth > 0 ? `${iframeWidth}px` : 'fit-content'),
+          minWidth: isFullWidth ? '900px' : undefined,
           maxWidth: '100%',
-          height: `${iframeHeight}px`, 
-          minHeight: isFullWidth ? '200px' : '120px',
+          height: iframeHeight > 0 ? `${iframeHeight}px` : 'fit-content', 
+          minHeight: isFullWidth ? '200px' : undefined,
           background: 'transparent',
         }}
         sandbox="allow-scripts allow-same-origin"
@@ -3179,11 +3190,11 @@ function ReplayToolContent() {
     
     const newPositions: Record<string, { x: number; y: number }> = {};
     
-    // Layout config
-    const GAP = 32; // Gap between components
-    const START_X = 60;
-    const START_Y = 60;
-    const MAX_ROW_WIDTH = 1400; // Max width before wrapping to new row
+    // Layout config - generous spacing for large sections
+    const GAP = 40; // Gap between components
+    const START_X = 40;
+    const START_Y = 40;
+    const MAX_ROW_WIDTH = 2000; // Max width before wrapping - allow large sections side by side
     
     // Get actual or estimated sizes for each component
     const getComponentSize = (comp: any) => {
@@ -3192,28 +3203,37 @@ function ReplayToolContent() {
       if (actualSize?.width && actualSize?.height) {
         return { width: actualSize.width + 32, height: actualSize.height + 60 }; // Add padding for label/border
       }
-      // Estimate based on layer/category
+      // Estimate based on layer/category - REALISTIC sizes for each type
       const layer = (comp.layer || comp.category || '').toLowerCase();
       const name = (comp.name || '').toLowerCase();
       
-      // Full-width components (sections, heroes, footers)
-      if (layer === 'product' || name.includes('hero') || name.includes('section') || name.includes('footer') || name.includes('header')) {
-        return { width: 450, height: 280 };
+      // Full-width sections (hero, footer, header, pricing, features) - typically 1200px+ wide
+      if (layer === 'product' || name.includes('hero') || name.includes('section') || 
+          name.includes('footer') || name.includes('header') || name.includes('pricing') ||
+          name.includes('feature') || name.includes('cta') || name.includes('banner')) {
+        return { width: 900, height: 400 };
+      }
+      // Medium-large patterns (cards, listings, rows)
+      if (layer === 'patterns' || name.includes('card') || name.includes('listing') || 
+          name.includes('row') || name.includes('item')) {
+        return { width: 400, height: 280 };
       }
-      // Medium components (cards, patterns)
-      if (layer === 'patterns' || name.includes('card') || name.includes('feature') || name.includes('listing')) {
-        return { width: 320, height: 240 };
+      // Medium components (navbar, sidebar, form)
+      if (layer === 'components' || name.includes('nav') || name.includes('form') || 
+          name.includes('modal') || name.includes('sidebar')) {
+        return { width: 350, height: 200 };
       }
-      // Small components (buttons, badges, primitives)
-      if (layer === 'primitives' || name.includes('button') || name.includes('badge') || name.includes('icon')) {
-        return { width: 180, height: 100 };
+      // Small primitives (buttons, badges, icons, text, divider)
+      if (layer === 'primitives' || name.includes('button') || name.includes('badge') || 
+          name.includes('icon') || name.includes('text') || name.includes('divider')) {
+        return { width: 200, height: 100 };
       }
       // Default medium
-      return { width: 280, height: 180 };
+      return { width: 320, height: 180 };
     };
     
-    // Group by layer for organized layout
-    const layers = ['primitives', 'components', 'patterns', 'product'];
+    // Group by layer for organized layout - LARGEST FIRST (product -> primitives)
+    const layers = ['product', 'patterns', 'components', 'primitives'];
     const componentsByLayer: Record<string, any[]> = {};
     layers.forEach(l => componentsByLayer[l] = []);
     
@@ -3591,11 +3611,26 @@ function ReplayToolContent() {
   useEffect(() => {
     const handleResize = (e: MessageEvent) => {
       if (e.data?.type === 'resize' && e.data?.id && e.data?.width && e.data?.height) {
+        const compId = `comp-${e.data.id}`;
+        const w = e.data.width;
+        const h = e.data.height;
+        
+        // Update iframe size directly
         const iframe = document.getElementById(`iframe-${e.data.id}`) as HTMLIFrameElement;
         if (iframe) {
-          iframe.style.width = `${e.data.width}px`;
-          iframe.style.height = `${e.data.height}px`;
+          iframe.style.width = `${w}px`;
+          iframe.style.height = `${h}px`;
         }
+        
+        // Also update blueprintSizes state so auto-layout knows actual sizes
+        setBlueprintSizes(prev => {
+          const existing = prev[compId];
+          // Only update if size changed significantly (avoid unnecessary re-renders)
+          if (existing && Math.abs(existing.width - w) < 5 && Math.abs(existing.height - h) < 5) {
+            return prev;
+          }
+          return { ...prev, [compId]: { width: w, height: h } };
+        });
       }
     };
     window.addEventListener('message', handleResize);
@@ -18130,11 +18165,6 @@ export default function GeneratedPage() {
                                         {(libraryData as any)?.overview?.description || selectedDoc.content?.projectContext || selectedDoc.content?.description || "Component library extracted from UI"}
                                       </p>
                                     </div>
-                                    <div className="flex items-center gap-2 flex-wrap">
-                                      <span className="px-3 py-1 text-xs rounded-full bg-zinc-800 text-zinc-400 border border-zinc-700">
-                                        {(libraryData as any)?.overview?.theme || selectedDoc.content?.themeType || "dark"} theme
-                                      </span>
-                                    </div>
                                   </div>
                                   
                                   {/* Stats Cards - Atomic Design Breakdown */}
@@ -18422,7 +18452,7 @@ export default function GeneratedPage() {
                               )}
                               
                               {/* ═══════════════════════════════════════════════════════════════════════════════ */}
-                              {/* COMPONENTS GALLERY PAGE - SupaColors Style */}
+                              {/* COMPONENTS GALLERY PAGE - Real components from libraryData */}
                               {/* ═══════════════════════════════════════════════════════════════════════════════ */}
                               {selectedDoc.type === "components" && (
                                 <div className="space-y-8">
@@ -18431,7 +18461,7 @@ export default function GeneratedPage() {
                                     <div>
                                       <h1 className={cn("text-3xl font-bold mb-2", libraryBackground === "light" ? "text-zinc-900" : "text-white")}>Components</h1>
                                       <p className={cn("text-sm", libraryBackground === "light" ? "text-zinc-600" : "text-zinc-400")}>
-                                        Live previews of all UI components with variants and states
+                                        All extracted components organized by layer
                                       </p>
                                     </div>
                                     <div className="flex items-center gap-2">
@@ -18439,228 +18469,65 @@ export default function GeneratedPage() {
                                     </div>
                                   </div>
                                   
-                                  {/* Buttons Section */}
-                                  <div className={cn("rounded-xl border overflow-hidden", libraryBackground === "light" ? "border-zinc-200 bg-white" : "border-zinc-800 bg-zinc-900/50")}>
-                                    <div className={cn("px-5 py-4 border-b", libraryBackground === "light" ? "border-zinc-200 bg-zinc-50" : "border-zinc-800 bg-zinc-900")}>
-                                      <h3 className={cn("font-semibold", libraryBackground === "light" ? "text-zinc-800" : "text-zinc-200")}>Buttons</h3>
-                                      <p className={cn("text-xs mt-0.5", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Interactive button components with multiple variants</p>
-                                    </div>
-                                    <div className="p-6">
-                                      <div className="grid grid-cols-3 gap-8">
-                                        {/* Flat Buttons */}
-                                        <div>
-                                          <div className={cn("text-[10px] uppercase tracking-wider mb-4 font-medium", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Buttons · Flat</div>
-                                          <div className="space-y-3">
-                                            <button className="w-full px-4 py-2.5 bg-blue-500 text-white text-sm font-medium rounded-lg hover:bg-blue-600 transition-colors">Default</button>
-                                            <button className={cn("w-full px-4 py-2.5 text-sm font-medium rounded-lg border transition-colors", libraryBackground === "light" ? "border-zinc-300 text-zinc-700 hover:bg-zinc-50" : "border-zinc-600 text-zinc-300 hover:bg-zinc-800")}>Outline</button>
-                                            <button className="w-full px-4 py-2.5 text-sm font-medium rounded-lg text-blue-500 hover:bg-blue-500/10 transition-colors">Ghost</button>
-                                            <button className="w-full px-4 py-2.5 bg-zinc-600 text-zinc-400 text-sm font-medium rounded-lg cursor-not-allowed opacity-50">Disabled</button>
-                                          </div>
-                                        </div>
-                                        {/* Depth Buttons */}
-                                        <div>
-                                          <div className={cn("text-[10px] uppercase tracking-wider mb-4 font-medium", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Buttons · Depth</div>
-                                          <div className="space-y-3">
-                                            <button className="w-full px-4 py-2.5 bg-gradient-to-b from-blue-400 to-blue-600 text-white text-sm font-medium rounded-lg shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 transition-all">Default</button>
-                                            <button className="w-full px-4 py-2.5 bg-gradient-to-b from-blue-500 to-blue-700 text-white text-sm font-medium rounded-lg shadow-lg shadow-blue-500/30">Hover</button>
-                                            <button className="w-full px-4 py-2.5 bg-gradient-to-b from-blue-600 to-blue-800 text-white text-sm font-medium rounded-lg shadow-inner">Active</button>
-                                            <button className="w-full px-4 py-2.5 bg-gradient-to-b from-zinc-500 to-zinc-600 text-zinc-400 text-sm font-medium rounded-lg cursor-not-allowed opacity-50">Disabled</button>
-                                          </div>
-                                        </div>
-                                        {/* Button Sizes */}
-                                        <div>
-                                          <div className={cn("text-[10px] uppercase tracking-wider mb-4 font-medium", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Button Sizes</div>
-                                          <div className="space-y-3">
-                                            <button className="w-full px-3 py-1.5 bg-blue-500 text-white text-xs font-medium rounded-md hover:bg-blue-600 transition-colors">Small</button>
-                                            <button className="w-full px-4 py-2 bg-blue-500 text-white text-sm font-medium rounded-lg hover:bg-blue-600 transition-colors">Default</button>
-                                            <button className="w-full px-5 py-2.5 bg-blue-500 text-white text-base font-medium rounded-lg hover:bg-blue-600 transition-colors">Large</button>
-                                            <button className="w-full px-6 py-3 bg-blue-500 text-white text-lg font-medium rounded-xl hover:bg-blue-600 transition-colors">Extra Large</button>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  
-                                  {/* Form Elements Section */}
-                                  <div className={cn("rounded-xl border overflow-hidden", libraryBackground === "light" ? "border-zinc-200 bg-white" : "border-zinc-800 bg-zinc-900/50")}>
-                                    <div className={cn("px-5 py-4 border-b", libraryBackground === "light" ? "border-zinc-200 bg-zinc-50" : "border-zinc-800 bg-zinc-900")}>
-                                      <h3 className={cn("font-semibold", libraryBackground === "light" ? "text-zinc-800" : "text-zinc-200")}>Form Elements</h3>
-                                      <p className={cn("text-xs mt-0.5", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Input fields, selects, checkboxes and radio buttons</p>
-                                    </div>
-                                    <div className="p-6">
-                                      <div className="grid grid-cols-3 gap-8">
-                                        {/* Inputs */}
-                                        <div>
-                                          <div className={cn("text-[10px] uppercase tracking-wider mb-4 font-medium", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Text Inputs</div>
-                                          <div className="space-y-3">
-                                            <div>
-                                              <label className={cn("text-xs block mb-1.5", libraryBackground === "light" ? "text-zinc-600" : "text-zinc-400")}>Default</label>
-                                              <input type="text" placeholder="Enter text..." className={cn("w-full px-3 py-2 text-sm rounded-lg border focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all", libraryBackground === "light" ? "border-zinc-300 bg-white text-zinc-900" : "border-zinc-700 bg-zinc-800 text-white")} />
-                                            </div>
-                                            <div>
-                                              <label className={cn("text-xs block mb-1.5", libraryBackground === "light" ? "text-zinc-600" : "text-zinc-400")}>With Icon</label>
-                                              <div className="relative">
-                                                <Search className={cn("absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4", libraryBackground === "light" ? "text-zinc-400" : "text-zinc-500")} />
-                                                <input type="text" placeholder="Search..." className={cn("w-full pl-9 pr-3 py-2 text-sm rounded-lg border focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all", libraryBackground === "light" ? "border-zinc-300 bg-white text-zinc-900" : "border-zinc-700 bg-zinc-800 text-white")} />
-                                              </div>
-                                            </div>
-                                            <div>
-                                              <label className={cn("text-xs block mb-1.5 text-red-500")}>Error State</label>
-                                              <input type="text" placeholder="Invalid input" className="w-full px-3 py-2 text-sm rounded-lg border-2 border-red-500 bg-red-500/5 text-white focus:ring-2 focus:ring-red-500 outline-none" />
-                                            </div>
-                                          </div>
-                                        </div>
-                                        {/* Selects & Textareas */}
-                                        <div>
-                                          <div className={cn("text-[10px] uppercase tracking-wider mb-4 font-medium", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Select & Textarea</div>
-                                          <div className="space-y-3">
-                                            <div>
-                                              <label className={cn("text-xs block mb-1.5", libraryBackground === "light" ? "text-zinc-600" : "text-zinc-400")}>Select</label>
-                                              <select className={cn("w-full px-3 py-2 text-sm rounded-lg border outline-none", libraryBackground === "light" ? "border-zinc-300 bg-white text-zinc-900" : "border-zinc-700 bg-zinc-800 text-white")}>
-                                                <option>Option One</option>
-                                                <option>Option Two</option>
-                                                <option>Option Three</option>
-                                              </select>
-                                            </div>
-                                            <div>
-                                              <label className={cn("text-xs block mb-1.5", libraryBackground === "light" ? "text-zinc-600" : "text-zinc-400")}>Textarea</label>
-                                              <textarea placeholder="Enter description..." rows={3} className={cn("w-full px-3 py-2 text-sm rounded-lg border focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all resize-none", libraryBackground === "light" ? "border-zinc-300 bg-white text-zinc-900" : "border-zinc-700 bg-zinc-800 text-white")} />
-                                            </div>
-                                          </div>
-                                        </div>
-                                        {/* Checkboxes & Radios */}
-                                        <div>
-                                          <div className={cn("text-[10px] uppercase tracking-wider mb-4 font-medium", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Checkboxes & Radios</div>
-                                          <div className="space-y-3">
-                                            <div className="flex items-center gap-2">
-                                              <input type="checkbox" id="cb1" className="w-4 h-4 rounded border-zinc-600 bg-zinc-800 text-blue-500 focus:ring-blue-500" defaultChecked />
-                                              <label htmlFor="cb1" className={cn("text-sm", libraryBackground === "light" ? "text-zinc-700" : "text-zinc-300")}>Checked</label>
-                                            </div>
-                                            <div className="flex items-center gap-2">
-                                              <input type="checkbox" id="cb2" className="w-4 h-4 rounded border-zinc-600 bg-zinc-800 text-blue-500 focus:ring-blue-500" />
-                                              <label htmlFor="cb2" className={cn("text-sm", libraryBackground === "light" ? "text-zinc-700" : "text-zinc-300")}>Unchecked</label>
-                                            </div>
-                                            <div className="flex items-center gap-2">
-                                              <input type="radio" name="radio" id="r1" className="w-4 h-4 border-zinc-600 bg-zinc-800 text-blue-500 focus:ring-blue-500" defaultChecked />
-                                              <label htmlFor="r1" className={cn("text-sm", libraryBackground === "light" ? "text-zinc-700" : "text-zinc-300")}>Option A</label>
-                                            </div>
-                                            <div className="flex items-center gap-2">
-                                              <input type="radio" name="radio" id="r2" className="w-4 h-4 border-zinc-600 bg-zinc-800 text-blue-500 focus:ring-blue-500" />
-                                              <label htmlFor="r2" className={cn("text-sm", libraryBackground === "light" ? "text-zinc-700" : "text-zinc-300")}>Option B</label>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  
-                                  {/* Progress & Alerts Section */}
-                                  <div className={cn("rounded-xl border overflow-hidden", libraryBackground === "light" ? "border-zinc-200 bg-white" : "border-zinc-800 bg-zinc-900/50")}>
-                                    <div className={cn("px-5 py-4 border-b", libraryBackground === "light" ? "border-zinc-200 bg-zinc-50" : "border-zinc-800 bg-zinc-900")}>
-                                      <h3 className={cn("font-semibold", libraryBackground === "light" ? "text-zinc-800" : "text-zinc-200")}>Feedback Components</h3>
-                                      <p className={cn("text-xs mt-0.5", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Progress bars, alerts, and notification components</p>
-                                    </div>
-                                    <div className="p-6">
-                                      <div className="grid grid-cols-2 gap-8">
-                                        {/* Progress Bars */}
-                                        <div>
-                                          <div className={cn("text-[10px] uppercase tracking-wider mb-4 font-medium", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Progress</div>
-                                          <div className="space-y-4">
-                                            <div>
-                                              <div className="flex justify-between text-xs mb-1.5">
-                                                <span className={libraryBackground === "light" ? "text-zinc-600" : "text-zinc-400"}>Downloads</span>
-                                                <span className={libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500"}>75%</span>
-                                              </div>
-                                              <div className={cn("h-2 rounded-full overflow-hidden", libraryBackground === "light" ? "bg-zinc-200" : "bg-zinc-700")}>
-                                                <div className="h-full w-[75%] bg-blue-500 rounded-full" />
-                                              </div>
-                                            </div>
-                                            <div>
-                                              <div className="flex justify-between text-xs mb-1.5">
-                                                <span className={libraryBackground === "light" ? "text-zinc-600" : "text-zinc-400"}>Uploads</span>
-                                                <span className={libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500"}>45%</span>
-                                              </div>
-                                              <div className={cn("h-2 rounded-full overflow-hidden", libraryBackground === "light" ? "bg-zinc-200" : "bg-zinc-700")}>
-                                                <div className="h-full w-[45%] bg-emerald-500 rounded-full" />
-                                              </div>
-                                            </div>
-                                            <div>
-                                              <div className="flex justify-between text-xs mb-1.5">
-                                                <span className={libraryBackground === "light" ? "text-zinc-600" : "text-zinc-400"}>Storage</span>
-                                                <span className={libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500"}>90%</span>
-                                              </div>
-                                              <div className={cn("h-2 rounded-full overflow-hidden", libraryBackground === "light" ? "bg-zinc-200" : "bg-zinc-700")}>
-                                                <div className="h-full w-[90%] bg-amber-500 rounded-full" />
-                                              </div>
-                                            </div>
+                                  {/* Components by Layer */}
+                                  {(() => {
+                                    const layers = [
+                                      { id: 'primitives', name: 'Primitives', color: 'blue', desc: 'Basic building blocks' },
+                                      { id: 'components', name: 'Components', color: 'emerald', desc: 'Composite elements' },
+                                      { id: 'patterns', name: 'Patterns', color: 'amber', desc: 'Reusable patterns' },
+                                      { id: 'product', name: 'Product', color: 'rose', desc: 'Business-specific' },
+                                    ];
+                                    const compsByLayer: Record<string, any[]> = {};
+                                    layers.forEach(l => compsByLayer[l.id] = []);
+                                    (libraryData?.components || []).forEach((comp: any) => {
+                                      const layer = (comp.layer || 'components').toLowerCase();
+                                      if (compsByLayer[layer]) compsByLayer[layer].push(comp);
+                                      else compsByLayer.components.push(comp);
+                                    });
+                                    
+                                    return layers.map(layer => {
+                                      const comps = compsByLayer[layer.id];
+                                      if (comps.length === 0) return null;
+                                      return (
+                                        <div key={layer.id} className={cn("rounded-xl border overflow-hidden", libraryBackground === "light" ? "border-zinc-200 bg-white" : "border-zinc-800 bg-zinc-900/50")}>
+                                          <div className={cn("px-5 py-4 border-b", libraryBackground === "light" ? "border-zinc-200 bg-zinc-50" : "border-zinc-800 bg-zinc-900")}>
+                                            <h3 className={cn("font-semibold flex items-center gap-2", libraryBackground === "light" ? "text-zinc-800" : "text-zinc-200")}>
+                                              <span className={`w-2 h-2 rounded-full bg-${layer.color}-500`} />
+                                              {layer.name}
+                                              <span className="text-xs font-normal text-zinc-500">({comps.length})</span>
+                                            </h3>
+                                            <p className={cn("text-xs mt-0.5", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>{layer.desc}</p>
                                           </div>
-                                        </div>
-                                        {/* Alerts */}
-                                        <div>
-                                          <div className={cn("text-[10px] uppercase tracking-wider mb-4 font-medium", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Alerts</div>
-                                          <div className="space-y-3">
-                                            <div className={cn("px-4 py-3 rounded-lg border flex items-start gap-3", libraryBackground === "light" ? "bg-blue-50 border-blue-200" : "bg-blue-500/10 border-blue-500/20")}>
-                                              <Info className="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" />
-                                              <div>
-                                                <div className={cn("text-sm font-medium", libraryBackground === "light" ? "text-blue-800" : "text-blue-400")}>Information</div>
-                                                <div className={cn("text-xs", libraryBackground === "light" ? "text-blue-600" : "text-blue-400/70")}>This is an informational alert.</div>
-                                              </div>
-                                            </div>
-                                            <div className={cn("px-4 py-3 rounded-lg border flex items-start gap-3", libraryBackground === "light" ? "bg-emerald-50 border-emerald-200" : "bg-emerald-500/10 border-emerald-500/20")}>
-                                              <Check className="w-4 h-4 text-emerald-500 mt-0.5 flex-shrink-0" />
-                                              <div>
-                                                <div className={cn("text-sm font-medium", libraryBackground === "light" ? "text-emerald-800" : "text-emerald-400")}>Success</div>
-                                                <div className={cn("text-xs", libraryBackground === "light" ? "text-emerald-600" : "text-emerald-400/70")}>Operation completed successfully.</div>
-                                              </div>
-                                            </div>
-                                            <div className={cn("px-4 py-3 rounded-lg border flex items-start gap-3", libraryBackground === "light" ? "bg-amber-50 border-amber-200" : "bg-amber-500/10 border-amber-500/20")}>
-                                              <AlertTriangle className="w-4 h-4 text-amber-500 mt-0.5 flex-shrink-0" />
-                                              <div>
-                                                <div className={cn("text-sm font-medium", libraryBackground === "light" ? "text-amber-800" : "text-amber-400")}>Warning</div>
-                                                <div className={cn("text-xs", libraryBackground === "light" ? "text-amber-600" : "text-amber-400/70")}>Please review before continuing.</div>
-                                              </div>
+                                          <div className="p-4">
+                                            <div className="grid grid-cols-2 lg:grid-cols-3 gap-3">
+                                              {comps.map((comp: any) => (
+                                                <button
+                                                  key={comp.id}
+                                                  onClick={() => setSelectedLibraryItem(`comp-${comp.id}`)}
+                                                  className={cn(
+                                                    "p-4 rounded-lg border text-left transition-all hover:border-blue-500/50",
+                                                    libraryBackground === "light" ? "border-zinc-200 bg-zinc-50 hover:bg-zinc-100" : "border-zinc-700 bg-zinc-800/50 hover:bg-zinc-800"
+                                                  )}
+                                                >
+                                                  <div className={cn("font-medium text-sm mb-1", libraryBackground === "light" ? "text-zinc-800" : "text-zinc-200")}>{comp.name}</div>
+                                                  <div className={cn("text-xs line-clamp-2", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>{comp.description || 'No description'}</div>
+                                                </button>
+                                              ))}
                                             </div>
                                           </div>
                                         </div>
-                                      </div>
-                                    </div>
-                                  </div>
+                                      );
+                                    });
+                                  })()}
                                   
-                                  {/* Stats Cards Section */}
-                                  <div className={cn("rounded-xl border overflow-hidden", libraryBackground === "light" ? "border-zinc-200 bg-white" : "border-zinc-800 bg-zinc-900/50")}>
-                                    <div className={cn("px-5 py-4 border-b", libraryBackground === "light" ? "border-zinc-200 bg-zinc-50" : "border-zinc-800 bg-zinc-900")}>
-                                      <h3 className={cn("font-semibold", libraryBackground === "light" ? "text-zinc-800" : "text-zinc-200")}>Stats & Cards</h3>
-                                      <p className={cn("text-xs mt-0.5", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Data visualization cards and metric displays</p>
+                                  {/* Empty state */}
+                                  {(!libraryData?.components || libraryData.components.length === 0) && (
+                                    <div className={cn("p-12 rounded-xl border text-center", libraryBackground === "light" ? "border-zinc-200 bg-zinc-50" : "border-zinc-800 bg-zinc-900/50")}>
+                                      <Layers className={cn("w-10 h-10 mx-auto mb-4", libraryBackground === "light" ? "text-zinc-400" : "text-zinc-600")} />
+                                      <p className={cn("text-sm mb-1", libraryBackground === "light" ? "text-zinc-600" : "text-zinc-400")}>No components extracted yet</p>
+                                      <p className={cn("text-xs", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>Generate Library to extract components from your video</p>
                                     </div>
-                                    <div className="p-6">
-                                      <div className="grid grid-cols-3 gap-4">
-                                        <div className={cn("p-5 rounded-xl border", libraryBackground === "light" ? "bg-gradient-to-br from-blue-50 to-indigo-50 border-blue-200" : "bg-gradient-to-br from-blue-500/10 to-indigo-500/10 border-blue-500/20")}>
-                                          <div className="flex items-center justify-between mb-2">
-                                            <span className={cn("text-xs font-medium", libraryBackground === "light" ? "text-blue-600" : "text-blue-400")}>Total Revenue</span>
-                                            <span className="text-xs text-emerald-500">↑ +12.5%</span>
-                                          </div>
-                                          <div className={cn("text-2xl font-bold", libraryBackground === "light" ? "text-zinc-900" : "text-white")}>$1,250.00</div>
-                                          <div className={cn("text-[10px] mt-1", libraryBackground === "light" ? "text-blue-600" : "text-blue-400")}>Trending up this month</div>
-                                        </div>
-                                        <div className={cn("p-5 rounded-xl border", libraryBackground === "light" ? "bg-gradient-to-br from-amber-50 to-orange-50 border-amber-200" : "bg-gradient-to-br from-amber-500/10 to-orange-500/10 border-amber-500/20")}>
-                                          <div className="flex items-center justify-between mb-2">
-                                            <span className={cn("text-xs font-medium", libraryBackground === "light" ? "text-amber-600" : "text-amber-400")}>New Customers</span>
-                                            <span className="text-xs text-red-500">↓ -20%</span>
-                                          </div>
-                                          <div className={cn("text-2xl font-bold", libraryBackground === "light" ? "text-zinc-900" : "text-white")}>1,234</div>
-                                          <div className={cn("text-[10px] mt-1", libraryBackground === "light" ? "text-amber-600" : "text-amber-400")}>Down 20% this period</div>
-                                        </div>
-                                        <div className={cn("p-5 rounded-xl border", libraryBackground === "light" ? "bg-gradient-to-br from-emerald-50 to-teal-50 border-emerald-200" : "bg-gradient-to-br from-emerald-500/10 to-teal-500/10 border-emerald-500/20")}>
-                                          <div className="flex items-center justify-between mb-2">
-                                            <span className={cn("text-xs font-medium", libraryBackground === "light" ? "text-emerald-600" : "text-emerald-400")}>Active Accounts</span>
-                                            <span className="text-xs text-emerald-500">↑ +12.6%</span>
-                                          </div>
-                                          <div className={cn("text-2xl font-bold", libraryBackground === "light" ? "text-zinc-900" : "text-white")}>45,678</div>
-                                          <div className={cn("text-[10px] mt-1", libraryBackground === "light" ? "text-emerald-600" : "text-emerald-400")}>Strong user retention</div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
+                                  )}
                                 </div>
                               )}
                               
@@ -19269,41 +19136,52 @@ module.exports = {
                                     </p>
                                   </div>
                                   
-                                  {/* AI-Generated Examples */}
-                                  {selectedDoc.content?.examples && selectedDoc.content.examples.length > 0 ? (
-                                    <div>
-                                      <h2 className={cn("text-xl font-semibold mb-4 flex items-center gap-2", libraryBackground === "light" ? "text-zinc-900" : "text-white")}>
-                                        <Code className="w-5 h-5 text-zinc-400" /> Code Examples
-                                      </h2>
-                                      <div className="space-y-6">
-                                        {selectedDoc.content.examples.map((example: any, i: number) => (
-                                          <div key={i} className={cn("rounded-xl border overflow-hidden", libraryBackground === "light" ? "border-zinc-200" : "border-zinc-800")}>
-                                            <div className={cn("px-4 py-3 flex items-center justify-between", libraryBackground === "light" ? "bg-zinc-50 border-b border-zinc-200" : "bg-zinc-900 border-b border-zinc-800")}>
-                                              <div>
-                                                <h3 className={cn("font-semibold text-sm", libraryBackground === "light" ? "text-zinc-800" : "text-zinc-200")}>{example.title}</h3>
-                                                <p className={cn("text-xs mt-0.5", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>{example.description}</p>
+                                  {/* Code Examples - from AI or auto-generated from components */}
+                                  {(() => {
+                                    // Use AI examples if available, otherwise generate from components
+                                    const examples = selectedDoc.content?.examples && selectedDoc.content.examples.length > 0 
+                                      ? selectedDoc.content.examples 
+                                      : libraryData?.components?.slice(0, 4).map((comp: any) => ({
+                                          title: comp.name,
+                                          description: comp.description || `${comp.layer || 'Component'} - ${comp.name}`,
+                                          code: comp.code || `<${comp.name} />`
+                                        }));
+                                    
+                                    return examples && examples.length > 0 ? (
+                                      <div>
+                                        <h2 className={cn("text-xl font-semibold mb-4 flex items-center gap-2", libraryBackground === "light" ? "text-zinc-900" : "text-white")}>
+                                          <Code className="w-5 h-5 text-zinc-400" /> Code Examples
+                                        </h2>
+                                        <div className="space-y-6">
+                                          {examples.map((example: any, i: number) => (
+                                            <div key={i} className={cn("rounded-xl border overflow-hidden", libraryBackground === "light" ? "border-zinc-200" : "border-zinc-800")}>
+                                              <div className={cn("px-4 py-3 flex items-center justify-between", libraryBackground === "light" ? "bg-zinc-50 border-b border-zinc-200" : "bg-zinc-900 border-b border-zinc-800")}>
+                                                <div>
+                                                  <h3 className={cn("font-semibold text-sm", libraryBackground === "light" ? "text-zinc-800" : "text-zinc-200")}>{example.title}</h3>
+                                                  <p className={cn("text-xs mt-0.5", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>{example.description}</p>
+                                                </div>
+                                                <button 
+                                                  onClick={() => navigator.clipboard.writeText((example.code || '').replace(/\\n/g, '\n'))}
+                                                  className="px-3 py-1 text-xs bg-zinc-700 text-white rounded hover:bg-zinc-600"
+                                                >
+                                                  Copy
+                                                </button>
                                               </div>
-                                              <button 
-                                                onClick={() => navigator.clipboard.writeText(example.code.replace(/\\n/g, '\n'))}
-                                                className="px-3 py-1 text-xs bg-zinc-700 text-white rounded hover:bg-zinc-600"
-                                              >
-                                                Copy
-                                              </button>
+                                              <pre className={cn("p-4 text-sm font-mono overflow-x-auto max-h-64", libraryBackground === "light" ? "bg-zinc-50" : "bg-[#0d0d0d]")}>
+                                                <code className={libraryBackground === "light" ? "text-zinc-800" : "text-zinc-300"}>{(example.code || '').replace(/\\n/g, '\n')}</code>
+                                              </pre>
                                             </div>
-                                            <pre className={cn("p-4 text-sm font-mono overflow-x-auto", libraryBackground === "light" ? "bg-zinc-50" : "bg-[#0d0d0d]")}>
-                                              <code className={libraryBackground === "light" ? "text-zinc-800" : "text-zinc-300"}>{example.code.replace(/\\n/g, '\n')}</code>
-                                            </pre>
-                                          </div>
-                                        ))}
+                                          ))}
+                                        </div>
                                       </div>
-                                    </div>
-                                  ) : (
-                                    <div className={cn("p-8 rounded-lg border text-center", libraryBackground === "light" ? "border-zinc-200 bg-zinc-50" : "border-zinc-800 bg-zinc-900/50")}>
-                                      <Code className={cn("w-8 h-8 mx-auto mb-3", libraryBackground === "light" ? "text-zinc-400" : "text-zinc-600")} />
-                                      <p className={cn("text-sm", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>No code examples extracted yet</p>
-                                      <p className={cn("text-xs mt-1", libraryBackground === "light" ? "text-zinc-400" : "text-zinc-600")}>Generate Library to extract real code snippets from your components</p>
-                                    </div>
-                                  )}
+                                    ) : (
+                                      <div className={cn("p-8 rounded-lg border text-center", libraryBackground === "light" ? "border-zinc-200 bg-zinc-50" : "border-zinc-800 bg-zinc-900/50")}>
+                                        <Code className={cn("w-8 h-8 mx-auto mb-3", libraryBackground === "light" ? "text-zinc-400" : "text-zinc-600")} />
+                                        <p className={cn("text-sm", libraryBackground === "light" ? "text-zinc-500" : "text-zinc-500")}>No components extracted yet</p>
+                                        <p className={cn("text-xs mt-1", libraryBackground === "light" ? "text-zinc-400" : "text-zinc-600")}>Generate Library to extract components from your video</p>
+                                      </div>
+                                    );
+                                  })()}
                                   
                                   {/* Atomic Design Categories - from AI */}
                                   {(selectedDoc.content?.atoms || selectedDoc.content?.molecules || selectedDoc.content?.organisms) && (
@@ -19507,22 +19385,22 @@ module.exports = {
                                   
                                   return (
                                     <div className="w-full flex-1"
-                                      style={{ minHeight: '200px' }}
+                                      style={{ minHeight: '100px' }}
                                     >
                                       {/* Viewport container - changes width based on mobile/desktop */}
                                       <div 
                                         className={cn(
-                                          "transition-all duration-300 mx-auto",
+                                          "transition-all duration-300",
                                           libraryViewport === "mobile" 
-                                            ? "w-[375px] border-x border-zinc-700/50 shadow-lg" 
+                                            ? "w-[375px] border-x border-zinc-700/50 shadow-lg mx-auto" 
                                             : "w-full"
                                         )}
                                       >
                                       <div 
-                                        className="p-6 relative transition-transform duration-200"
+                                        className="p-4 relative transition-transform duration-200"
                                         style={{ 
                                           transform: `scale(${libraryZoom / 100})`, 
-                                          transformOrigin: 'top center'
+                                          transformOrigin: 'top left'
                                         }}
                                       >
                                       {liveCode ? (
@@ -19531,10 +19409,6 @@ module.exports = {
                                             "transition-all duration-300 relative group/measure inline-block",
                                             showLibraryOutline && "outline outline-1 outline-dashed outline-zinc-500/50"
                                           )}
-                                          style={{ 
-                                            width: libraryPreviewSize.width > 0 ? `${libraryPreviewSize.width}px` : 'auto',
-                                            minWidth: '120px'
-                                          }}
                                         >
                                           {/* Storybook-like measurement overlay */}
                                           {(showLibraryOutline || showLibraryRuler) && (
@@ -20694,181 +20568,141 @@ module.exports = {
                                         .replace(/pravatar\.cc\/(\d+)(?:\?img=\d+)?$/g, `pravatar.cc/$1?img=${Math.abs(comp.id?.charCodeAt(0) || 1) % 70 + 1}`)
                                         .replace(/pollinations\.ai\/prompt\/([^?]+)\?/g, `pollinations.ai/prompt/$1?seed=${comp.id || 'stable'}&`);
                                       
+                                      // Determine if this is a full-width component
+                                      const isFullWidthComp = ['product', 'section', 'hero', 'footer', 'header', 'page', 'nav'].includes(
+                                        comp.category?.toLowerCase() || comp.layer?.toLowerCase() || ''
+                                      ) || comp.name?.toLowerCase().includes('hero') || comp.name?.toLowerCase().includes('footer') || 
+                                         comp.name?.toLowerCase().includes('section') || comp.name?.toLowerCase().includes('header');
+                                      
                                       return (
-                                      <div className="relative inline-block">
-                                        <iframe
-                                          key={`bp-iframe-${comp.id}-${isSelected && blueprintEditedCode ? blueprintEditedCode.slice(0, 50) : 'orig'}`}
-                                          srcDoc={`<!DOCTYPE html>
-<html><head>
-<meta charset="utf-8">
-<meta name="referrer" content="no-referrer">
-<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval' data: blob:; img-src * data: blob: https:;">
-<script src="https://cdn.tailwindcss.com"></script>
-<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
-<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-<style>
-*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:none;-ms-overflow-style:none}
-html,body{font-family:Inter,system-ui,sans-serif;background:transparent;overflow:hidden!important;width:100%!important;height:100%!important}
-body{display:flex;flex-direction:column;padding:0;width:100%!important}
-#root{display:flex;flex-direction:column;width:100%}
-/* RESPONSIVE: All containers stretch to fill iframe width */
-body>*,#root>*{width:100%!important;max-width:100%!important;flex-shrink:0}
-/* Full-width sections */
-header,footer,nav,section,article,main,.container,.wrapper,.hero,.footer,.header,.section,.pricing,.cta,.banner{width:100%!important;max-width:100%!important}
-/* Flex containers */
-.flex{flex-wrap:wrap}
-/* Grid responsive */
-.grid{width:100%}
-@media(max-width:640px){.grid{grid-template-columns:1fr!important}.md\\:grid-cols-2,.md\\:grid-cols-3,.md\\:grid-cols-4,.lg\\:grid-cols-2,.lg\\:grid-cols-3,.lg\\:grid-cols-4{grid-template-columns:1fr!important}}
-/* Hide scrollbars */
-*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
-/* Images responsive */
-img{max-width:100%!important;height:auto!important;display:block;object-fit:cover}
-img[src=""]{display:none}
-img:not([src]){display:none}
-video{max-width:100%;border-radius:inherit}
-/* Text wrap */
-p,h1,h2,h3,h4,h5,h6,span,a{word-wrap:break-word;overflow-wrap:break-word}
-/* Padding responsive */
-@media(max-width:400px){.px-6,.px-8,.px-10,.px-12{padding-left:1rem!important;padding-right:1rem!important}.py-16,.py-20,.py-24{padding-top:2rem!important;padding-bottom:2rem!important}}
-/* FIX: Make uninitialized Lucide icons invisible (not display:none to preserve layout) */
-i[data-lucide]:empty{opacity:0!important;width:1em;height:1em}
-i[data-lucide]:not(:has(svg)){opacity:0!important;width:1em;height:1em}
-/* Style initialized Lucide icons - make visible */
-i[data-lucide]:has(svg){opacity:1!important}
-i[data-lucide] svg{width:inherit;height:inherit;stroke:currentColor;fill:none}
-/* Only hide icon wrappers that are truly broken (not whole sections) */
-.lucide:empty,.lucide-icon:empty{opacity:0;width:1em;height:1em}
-</style>
-<script>
-function autoResize(){
-  const body=document.body;
-  // Report natural content size - hug to actual content
-  const w=Math.max(body.scrollWidth,body.offsetWidth,100);
-  const h=body.scrollHeight||body.offsetHeight||24;
-  parent.postMessage({type:'resize',id:'${comp.id}',width:w,height:h},'*');
-}
-// Handle parent iframe resize - content should adapt
-function handleParentResize(){
-  // Force reflow for responsive CSS
-  document.body.style.width='100%';
-  document.body.offsetHeight; // Force reflow
-  setTimeout(autoResize,50);
-}
-// Listen for resize from parent
-window.addEventListener('message',e=>{
-  if(e.data?.type==='PARENT_RESIZE'){handleParentResize()}
-});
-function initIcons(){
-  if(typeof lucide!=='undefined'){
-    try{lucide.createIcons()}catch(e){}
-  }
-}
-window.onload=()=>{
-  initIcons();
-  autoResize();
-  setTimeout(()=>{initIcons();autoResize()},100);
-  setTimeout(()=>{initIcons();autoResize()},500);
-  setTimeout(()=>{initIcons();autoResize()},1000);
-};
-// Observe body for changes
-new ResizeObserver(()=>{setTimeout(autoResize,10)}).observe(document.body);
-// Fix broken images - replace with Unsplash placeholders (same as Library)
-const fixBrokenImages = () => {
-  document.querySelectorAll('img').forEach((img, index) => {
-    if (img.dataset.fixed) return;
-    const src = img.getAttribute('src') || '';
-    const isBroken = !src || src === '' || 
-      src.startsWith('/') || src.startsWith('./') || src.startsWith('../') ||
-      src.includes('placeholder') || src.includes('example.com') ||
-      src.includes('undefined') || src.includes('null');
-    if (isBroken) {
-      const alt = (img.getAttribute('alt') || '').toLowerCase();
-      const className = (img.className || '').toLowerCase();
-      let query = 'abstract';
-      if (alt.includes('avatar') || alt.includes('profile') || className.includes('avatar') || className.includes('rounded-full')) {
-        query = 'portrait,face';
-      } else if (alt.includes('blog') || alt.includes('cover') || alt.includes('hero')) {
-        query = 'technology,minimal';
-      } else if (alt.includes('product')) {
-        query = 'product,minimal';
-      }
-      const photos = ['1618005182384-a83a8bd57fbe', '1557683316-973673baf926', '1579546929518-9e396f3cc809', '1558591710-4b4a1ae0f04d', '1557804506-669a67965ba0'];
-      img.src = 'https://images.unsplash.com/photo-' + photos[index % 5] + '?w=400&h=300&fit=crop&auto=format';
-      img.dataset.fixed = 'true';
-    }
-    img.onerror = function() {
-      if (!this.dataset.errorFixed) {
-        const photos = ['1618005182384-a83a8bd57fbe', '1557683316-973673baf926', '1579546929518-9e396f3cc809'];
-        this.src = 'https://images.unsplash.com/photo-' + photos[Math.floor(Math.random() * 3)] + '?w=400&h=300&fit=crop&auto=format';
-        this.dataset.errorFixed = 'true';
-      }
-    };
-    if(!img.complete){img.onload=autoResize}
-  });
-};
-// Run fixes
-setTimeout(fixBrokenImages, 100);
-setTimeout(fixBrokenImages, 500);
-setTimeout(fixBrokenImages, 1500);
-// Also observe mutations
-new MutationObserver(()=>{fixBrokenImages()}).observe(document.body,{childList:true,subtree:true});
-</script>
-</head><body>${jsxToHtml(stableCode)}</body></html>`}
-                                          className="border-0 pointer-events-none"
-                                          scrolling="no"
-                                          loading="eager"
-                                          id={`iframe-${comp.id}`}
-                                          onLoad={(e) => {
-                                            const iframe = e.target as HTMLIFrameElement;
-                                            // Only auto-size if user hasn't set a custom size
-                                            const customSize = blueprintSizes[id];
-                                            if (customSize?.width || customSize?.height) return;
-                                            try {
-                                              const doc = iframe.contentDocument || iframe.contentWindow?.document;
-                                              if (doc?.body) {
-                                                const w = doc.body.scrollWidth;
-                                                const h = doc.body.scrollHeight;
-                                                iframe.style.width = w + 'px';
-                                                iframe.style.height = h + 'px';
-                                              }
-                                            } catch(err) {}
-                                          }}
-                                          style={{ 
-                                            // Full-width for sections/pages, fit-content for cards/buttons
-                                            width: size?.width ? `${size.width}px` : 
-                                              ['product', 'section', 'hero', 'footer', 'header', 'page', 'nav'].includes(comp.category?.toLowerCase() || comp.layer?.toLowerCase() || '') 
-                                                ? '100%' : 'fit-content',
-                                            height: size?.height ? `${size.height}px` : 'fit-content',
-                                            minWidth: ['product', 'section', 'hero', 'footer', 'header', 'page'].includes(comp.category?.toLowerCase() || '') ? '400px' : '150px',
-                                            minHeight: '60px',
-                                            maxWidth: ['product', 'section', 'hero', 'footer', 'header', 'page'].includes(comp.category?.toLowerCase() || comp.layer?.toLowerCase() || '') 
-                                              ? '100%' : '400px',
-                                            background: 'transparent',
-                                            display: 'block'
+                                      <div 
+                                        className="relative"
+                                        style={{
+                                          // Small components: hug content (no min-width)
+                                          // Full-width components: need min-width for proper layout
+                                          width: size?.width ? `${size.width}px` : (isFullWidthComp ? '900px' : 'fit-content'),
+                                          height: size?.height ? `${size.height}px` : 'fit-content',
+                                          minWidth: isFullWidthComp ? '600px' : undefined,
+                                          minHeight: isFullWidthComp ? '200px' : undefined
+                                        }}
+                                      >
+                                        {/* Use same InteractiveReactPreview as Library for identical rendering */}
+                                        <InteractiveReactPreview 
+                                          code={stableCode}
+                                          background="dark"
+                                          className="pointer-events-none"
+                                          onSizeChange={(newSize) => {
+                                            // Update blueprint sizes for auto-layout
+                                            setBlueprintSizes(prev => ({
+                                              ...prev,
+                                              [id]: newSize
+                                            }));
                                           }}
-                                          sandbox="allow-scripts allow-same-origin"
-                                          referrerPolicy="no-referrer"
+                                          isFullWidth={isFullWidthComp}
                                         />
                                         {/* Selection indicator - minimal, clean like Library */}
                                         {isSelected && (
                                           <>
                                             {/* Simple selection border */}
-                                            <div className="absolute inset-0 border-2 border-zinc-500 rounded pointer-events-none" />
+                                            <div className="absolute inset-0 border-2 border-blue-500 rounded pointer-events-none" />
                                             
-                                            {/* Single resize handle - bottom right corner only */}
-                                            <div
+                                            {/* Resize handles - all 4 corners + 4 edges */}
+                                            {/* Corner: top-left */}
+                                            <div 
+                                              data-resize-handle="nw"
+                                              className="absolute -top-1.5 -left-1.5 w-3 h-3 bg-blue-500 border-2 border-white rounded-sm cursor-nw-resize z-10 hover:bg-blue-400"
+                                              onMouseDown={(e) => {
+                                                e.stopPropagation();
+                                                setResizingComponent({ id, handle: 'nw' });
+                                                setResizeStart({ x: e.clientX, y: e.clientY, width: size?.width || 100, height: size?.height || 100 });
+                                              }}
+                                            />
+                                            {/* Corner: top-right */}
+                                            <div 
+                                              data-resize-handle="ne"
+                                              className="absolute -top-1.5 -right-1.5 w-3 h-3 bg-blue-500 border-2 border-white rounded-sm cursor-ne-resize z-10 hover:bg-blue-400"
+                                              onMouseDown={(e) => {
+                                                e.stopPropagation();
+                                                setResizingComponent({ id, handle: 'ne' });
+                                                setResizeStart({ x: e.clientX, y: e.clientY, width: size?.width || 100, height: size?.height || 100 });
+                                              }}
+                                            />
+                                            {/* Corner: bottom-left */}
+                                            <div 
+                                              data-resize-handle="sw"
+                                              className="absolute -bottom-1.5 -left-1.5 w-3 h-3 bg-blue-500 border-2 border-white rounded-sm cursor-sw-resize z-10 hover:bg-blue-400"
+                                              onMouseDown={(e) => {
+                                                e.stopPropagation();
+                                                setResizingComponent({ id, handle: 'sw' });
+                                                setResizeStart({ x: e.clientX, y: e.clientY, width: size?.width || 100, height: size?.height || 100 });
+                                              }}
+                                            />
+                                            {/* Corner: bottom-right */}
+                                            <div 
                                               data-resize-handle="se"
-                                              className="absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize z-20 flex items-center justify-center"
+                                              className="absolute -bottom-1.5 -right-1.5 w-3 h-3 bg-blue-500 border-2 border-white rounded-sm cursor-se-resize z-10 hover:bg-blue-400"
                                               onMouseDown={(e) => {
                                                 e.stopPropagation();
-                                                const iframe = document.getElementById(`iframe-${comp.id}`) as HTMLIFrameElement;
                                                 setResizingComponent({ id, handle: 'se' });
-                                                setResizeStart({ x: e.clientX, y: e.clientY, width: iframe?.offsetWidth || 200, height: iframe?.offsetHeight || 100 });
+                                                setResizeStart({ x: e.clientX, y: e.clientY, width: size?.width || 100, height: size?.height || 100 });
                                               }}
-                                            >
-                                              <div className="w-2 h-2 bg-zinc-400 rounded-sm" />
-                                            </div>
+                                            />
+                                            {/* Edge: top */}
+                                            <div 
+                                              data-resize-handle="n"
+                                              className="absolute -top-1 left-1/2 -translate-x-1/2 w-6 h-2 bg-blue-500 border border-white rounded-sm cursor-n-resize z-10 hover:bg-blue-400"
+                                              onMouseDown={(e) => {
+                                                e.stopPropagation();
+                                                setResizingComponent({ id, handle: 'n' });
+                                                setResizeStart({ x: e.clientX, y: e.clientY, width: size?.width || 100, height: size?.height || 100 });
+                                              }}
+                                            />
+                                            {/* Edge: bottom */}
+                                            <div 
+                                              data-resize-handle="s"
+                                              className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-6 h-2 bg-blue-500 border border-white rounded-sm cursor-s-resize z-10 hover:bg-blue-400"
+                                              onMouseDown={(e) => {
+                                                e.stopPropagation();
+                                                setResizingComponent({ id, handle: 's' });
+                                                setResizeStart({ x: e.clientX, y: e.clientY, width: size?.width || 100, height: size?.height || 100 });
+                                              }}
+                                            />
+                                            {/* Edge: left */}
+                                            <div 
+                                              data-resize-handle="w"
+                                              className="absolute top-1/2 -left-1 -translate-y-1/2 w-2 h-6 bg-blue-500 border border-white rounded-sm cursor-w-resize z-10 hover:bg-blue-400"
+                                              onMouseDown={(e) => {
+                                                e.stopPropagation();
+                                                setResizingComponent({ id, handle: 'w' });
+                                                setResizeStart({ x: e.clientX, y: e.clientY, width: size?.width || 100, height: size?.height || 100 });
+                                              }}
+                                            />
+                                            {/* Edge: right */}
+                                            <div 
+                                              data-resize-handle="e"
+                                              className="absolute top-1/2 -right-1 -translate-y-1/2 w-2 h-6 bg-blue-500 border border-white rounded-sm cursor-e-resize z-10 hover:bg-blue-400"
+                                              onMouseDown={(e) => {
+                                                e.stopPropagation();
+                                                setResizingComponent({ id, handle: 'e' });
+                                                setResizeStart({ x: e.clientX, y: e.clientY, width: size?.width || 100, height: size?.height || 100 });
+                                              }}
+                                            />
+                                            
+                                            {/* Dimension labels */}
+                                            {(showLibraryOutline || showLibraryRuler) && size && (
+                                              <>
+                                                <div className="absolute -top-5 left-0 right-0 flex justify-center">
+                                                  <span className="px-1.5 py-0.5 text-[9px] font-mono text-zinc-400 bg-zinc-800 rounded border border-zinc-700">
+                                                    {size.width}px
+                                                  </span>
+                                                </div>
+                                                <div className="absolute -left-6 top-0 bottom-0 flex items-center">
+                                                  <span className="px-1.5 py-0.5 text-[9px] font-mono text-zinc-400 bg-zinc-800 rounded border border-zinc-700" style={{writingMode: 'vertical-rl', transform: 'rotate(180deg)'}}>
+                                                    {size.height}px
+                                                  </span>
+                                                </div>
+                                              </>
+                                            )}
                                           </>
                                         )}
                                       </div>