Made many changes

.claude/settings.local.json

@@ -17,7 +17,9 @@
       "Bash(netstat:*)",
       "Bash(findstr:*)",
       "Bash(timeout:*)",
-      "Bash(NUL)"
+      "Bash(NUL)",
+      "Bash(npm ls:*)",
+      "Bash(npm view:*)"
     ],
     "deny": [],
     "ask": []

app/api/export-pptx/route.ts

@@ -34,13 +34,10 @@ const themeColors: Record<string, { background: string; title: string; text: str
   workshop: { background: 'EFE8DF', title: '0E0E0E', text: '151515' },
   light: { background: 'FFFFFF', title: '202124', text: '5f6368' },
   dark: { background: '1a1a1a', title: 'FFFFFF', text: 'e0e0e0' },
-  oceanBreeze: { background: '667eea', title: 'FFFFFF', text: 'f0f0f0' },
-  sunsetGlow: { background: 'ff6b6b', title: 'FFFFFF', text: 'FFFFFF' },
-  forestMist: { background: '134e5e', title: 'FFFFFF', text: 'e8f5e9' },
-  midnightBlue: { background: '0f2027', title: '64b5f6', text: 'e1f5fe' },
-  geometricDark: { background: '16213e', title: '00d2ff', text: 'e0e0e0' },
-  stripedProfessional: { background: '2c3e50', title: 'ecf0f1', text: 'bdc3c7' },
-  dotGrid: { background: 'ecf0f1', title: '2c3e50', text: '34495e' },
+  darkModern: { background: '1a1a2e', title: '64b5f6', text: 'e1f5fe' },
+  professionalBlue: { background: '1e3a8a', title: 'FFFFFF', text: 'dbeafe' },
+  elegantGreen: { background: '065f46', title: 'FFFFFF', text: 'd1fae5' },
+  sophisticatedPurple: { background: '581c87', title: 'FFFFFF', text: 'e9d5ff' },
   corporateCity: { background: '1a1a1a', title: 'FFFFFF', text: 'e0e0e0' },
   techInnovation: { background: '0d1b2a', title: '00d9ff', text: 'e0e0e0' },
   natureSerene: { background: '4caf50', title: 'FFFFFF', text: 'FFFFFF' },
@@ -87,45 +84,53 @@ export async function POST(request: NextRequest) {
     slides.forEach((slideData, index) => {
       const slide = pres.addSlide();
 
-      // Add theme background
+      // Add theme background with proper color format
       slide.background = { fill: colors.background };
 
-      // Add title with theme colors
+      // Add title with theme colors and better positioning
       slide.addText(slideData.title, {
         x: 0.5,
         y: 0.5,
         w: 9,
-        h: 1.0,
-        fontSize: 36,
+        h: 1.2,
+        fontSize: 40,
         bold: true,
         color: colors.title,
         align: 'left',
-        fontFace: 'Arial',
+        fontFace: 'Calibri',
+        valign: 'top',
       });
 
-      // Add content points with theme colors
+      // Add content points with theme colors and better spacing
       if (slideData.content && slideData.content.length > 0) {
-        slideData.content.forEach((point, pointIndex) => {
-          // Add bullet point
-          slide.addShape('circle', {
-            x: 0.7,
-            y: 1.8 + (pointIndex * 0.5),
-            w: 0.12,
-            h: 0.12,
-            fill: { color: colors.title }
+        const contentArray: any[] = [];
+
+        slideData.content.forEach((point) => {
+          contentArray.push({
+            text: point,
+            options: {
+              bullet: true,
+              fontSize: 20,
+              color: colors.text,
+              fontFace: 'Calibri',
+              paraSpaceBefore: 6,
+              paraSpaceAfter: 6,
+              indentLevel: 0,
+            }
           });
+        });
 
-          // Add content text
-          slide.addText(point, {
-            x: 1.0,
-            y: 1.7 + (pointIndex * 0.5),
-            w: 8.5,
-            h: 0.4,
-            fontSize: 18,
-            color: colors.text,
-            fontFace: 'Arial',
-            valign: 'middle',
-          });
+        // Add all content as a single text block with bullets
+        slide.addText(contentArray, {
+          x: 0.5,
+          y: 1.8,
+          w: 9,
+          h: 3.2,
+          fontSize: 20,
+          color: colors.text,
+          fontFace: 'Calibri',
+          valign: 'top',
+          align: 'left',
         });
       }
 

app/api/generate-slides/route.ts

@@ -50,23 +50,38 @@ export async function POST(request: NextRequest) {
     // Get API token based on auth method
     let apiToken: string | undefined;
 
-    if (authMethod === 'api-key') {
+    // First check for HF API key in cookies (from login)
+    const hfApiKeyCookie = request.cookies.get('hf_api_key')?.value;
+
+    if (hfApiKeyCookie) {
+      apiToken = hfApiKeyCookie;
+    } else if (authMethod === 'api-key') {
       const authHeader = request.headers.get('authorization');
       if (authHeader?.startsWith('Bearer ')) {
         apiToken = authHeader.slice(7);
+      } else {
+        // Check localStorage API key sent via header
+        const localStorageKey = request.headers.get('x-hf-api-key');
+        if (localStorageKey) {
+          apiToken = localStorageKey;
+        } else {
+          return NextResponse.json(
+            { error: 'API token required. Please connect your Hugging Face account.' },
+            { status: 401 }
+          );
+        }
+      }
+    } else {
+      // Check localStorage API key sent via header
+      const localStorageKey = request.headers.get('x-hf-api-key');
+      if (localStorageKey) {
+        apiToken = localStorageKey;
       } else {
         return NextResponse.json(
-          { error: 'API token required for API key authentication' },
+          { error: 'Please connect your Hugging Face account to use AI generation.' },
           { status: 401 }
         );
       }
-    } else {
-      // For OAuth, we'd normally get the token from session
-      // For demo purposes, we'll require API key
-      return NextResponse.json(
-        { error: 'Please use API key authentication for this demo' },
-        { status: 401 }
-      );
     }
 
     // Initialize Hugging Face client (supports multiple providers)
@@ -78,17 +93,19 @@ export async function POST(request: NextRequest) {
 Your task: Create a professional, engaging presentation about: "${prompt}"
 
 CRITICAL INSTRUCTIONS:
-1. Analyze the topic carefully and determine the optimal number of slides (typically 5-10 slides)
-2. Structure the presentation logically with clear flow: Introduction → Main Points → Analysis/Examples → Benefits/Impact → Conclusion
-3. Each content point must be specific, actionable, and relevant to the topic - NO generic placeholders
-4. Use concrete examples, statistics, or real-world applications when appropriate
-5. Make content compelling and audience-focused
+1. The FIRST slide must have "Reuben AI" as the title
+2. Analyze the topic carefully and determine the optimal number of slides (typically 5-10 slides)
+3. Structure the presentation logically with clear flow: Introduction → Main Points → Analysis/Examples → Benefits/Impact → Conclusion
+4. Each content point must be specific, detailed, actionable, and relevant to the topic - NO generic placeholders
+5. Use concrete examples, statistics, or real-world applications when appropriate
+6. Make content compelling and audience-focused with rich, detailed explanations
+7. Generate specific, high-quality image keywords for Unsplash that match the slide content
 
 OUTPUT FORMAT - Return ONLY a valid JSON array with this exact structure:
 [
   {
-    "title": "Presentation Title Based on Topic",
-    "content": ["Subtitle or tagline", "Author information if relevant"],
+    "title": "Reuben AI",
+    "content": ["${prompt}", "Professional AI-Powered Presentation"],
     "layout": "titleContent",
     "imageKeywords": ""
   },
@@ -110,10 +127,12 @@ LAYOUT RULES:
 - "twoContent" → Comparisons, before/after, pros/cons (use sparingly)
 
 IMAGE KEYWORDS RULES:
-- For titleContentImage layout: Provide 2-4 specific, relevant search terms
-- Examples: "artificial intelligence neural network", "sustainable energy solar panels", "team collaboration office"
-- Leave empty ("") for titleContent and twoContent layouts
-- Make keywords specific to the slide's actual content
+- For titleContentImage layout: ALWAYS provide 2-4 specific, relevant search terms for high-quality Unsplash images
+- Keywords should be concrete nouns and descriptive terms that will find professional stock photos
+- Examples: "modern office workspace", "artificial intelligence technology", "sustainable green energy", "team collaboration meeting"
+- Leave empty ("") ONLY for the first title slide and conclusion slides
+- Make keywords specific and visual - think about what would make a good photograph
+- At the end of the presentation, list all image keywords used for easy reference
 
 CONTENT QUALITY RULES:
 - Each bullet point should be 15-25 words with specific information

components/auth/HuggingFaceLogin.tsx

@@ -0,0 +1,228 @@
+import React, { useState, useEffect } from 'react';
+import { X, LogIn, LogOut, User, Key } from 'lucide-react';
+
+interface HuggingFaceLoginProps {
+  onAuthChange?: (isAuthenticated: boolean) => void;
+}
+
+export default function HuggingFaceLogin({ onAuthChange }: HuggingFaceLoginProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [apiKey, setApiKey] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+  useEffect(() => {
+    // Check if user is already authenticated
+    checkAuthentication();
+  }, []);
+
+  const checkAuthentication = async () => {
+    try {
+      const response = await fetch('/api/auth/hf', {
+        method: 'GET',
+      });
+      const data = await response.json();
+      setIsAuthenticated(data.authenticated);
+      if (onAuthChange) {
+        onAuthChange(data.authenticated);
+      }
+    } catch (error) {
+      console.error('Failed to check authentication:', error);
+    }
+  };
+
+  const handleLogin = async () => {
+    if (!apiKey.trim()) {
+      setError('Please enter your Hugging Face API key');
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const response = await fetch('/api/auth/hf', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ apiKey: apiKey.trim() }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Authentication failed');
+      }
+
+      // Save to localStorage as well for client-side usage
+      localStorage.setItem('hf_api_key', apiKey.trim());
+
+      setIsAuthenticated(true);
+      setIsOpen(false);
+      setApiKey('');
+
+      if (onAuthChange) {
+        onAuthChange(true);
+      }
+
+      // Show success message
+      alert('Successfully connected to Hugging Face! You can now use HF models for generation.');
+    } catch (error) {
+      setError((error as Error).message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await fetch('/api/auth/hf', {
+        method: 'DELETE',
+      });
+
+      // Clear localStorage
+      localStorage.removeItem('hf_api_key');
+
+      setIsAuthenticated(false);
+
+      if (onAuthChange) {
+        onAuthChange(false);
+      }
+    } catch (error) {
+      console.error('Failed to logout:', error);
+    }
+  };
+
+  return (
+    <>
+      {/* Login Button */}
+      <button
+        onClick={() => isAuthenticated ? handleLogout() : setIsOpen(true)}
+        className="flex items-center gap-2 px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+        title={isAuthenticated ? 'Logout from Hugging Face' : 'Login with Hugging Face'}
+      >
+        {isAuthenticated ? (
+          <>
+            <User className="w-4 h-4 text-green-600" />
+            <span className="hidden sm:inline">HF Connected</span>
+            <LogOut className="w-3 h-3" />
+          </>
+        ) : (
+          <>
+            <svg
+              className="w-4 h-4"
+              viewBox="0 0 32 32"
+              fill="currentColor"
+            >
+              <path d="M16.878 1.377c-1.097-.01-2.033.84-2.177 1.94-.144 1.1-1.816 14.35-1.816 14.35s-.28-1.311-.576-2.602c-.297-1.29-.561-2.27-.768-2.653-.207-.384-1.234-1.503-2.115-1.405-.882.098-1.65.956-1.555 1.9.095.943 2.633 10.51 2.633 10.51s-.827-1.23-1.604-2.444c-.516-.806-1.001-1.525-1.192-1.745-.382-.44-1.064-.615-1.665-.41-.752.257-1.28 1.014-1.16 1.823.12.81 4.919 8.378 9.568 9.64 4.649 1.263 9.13-1.8 10.24-6.282 1.11-4.482 3.05-13.01 3.16-13.65.111-.64-.185-1.29-.735-1.62-.55-.329-5.188-3.301-7.238-3.302z"/>
+            </svg>
+            <span className="hidden sm:inline">Connect HF</span>
+          </>
+        )}
+      </button>
+
+      {/* Login Dialog */}
+      {isOpen && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[2000]">
+          <div className="bg-white rounded-lg shadow-xl w-[450px]">
+            {/* Header */}
+            <div className="flex items-center justify-between p-4 border-b">
+              <div className="flex items-center gap-2">
+                <svg
+                  className="w-6 h-6"
+                  viewBox="0 0 32 32"
+                  fill="currentColor"
+                >
+                  <path d="M16.878 1.377c-1.097-.01-2.033.84-2.177 1.94-.144 1.1-1.816 14.35-1.816 14.35s-.28-1.311-.576-2.602c-.297-1.29-.561-2.27-.768-2.653-.207-.384-1.234-1.503-2.115-1.405-.882.098-1.65.956-1.555 1.9.095.943 2.633 10.51 2.633 10.51s-.827-1.23-1.604-2.444c-.516-.806-1.001-1.525-1.192-1.745-.382-.44-1.064-.615-1.665-.41-.752.257-1.28 1.014-1.16 1.823.12.81 4.919 8.378 9.568 9.64 4.649 1.263 9.13-1.8 10.24-6.282 1.11-4.482 3.05-13.01 3.16-13.65.111-.64-.185-1.29-.735-1.62-.55-.329-5.188-3.301-7.238-3.302z"/>
+                </svg>
+                <h2 className="text-lg font-semibold">Connect to Hugging Face</h2>
+              </div>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="p-1 hover:bg-gray-100 rounded transition-colors"
+              >
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            {/* Content */}
+            <div className="p-4 space-y-4">
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <div className="flex items-start gap-2">
+                  <span className="text-blue-600 text-lg">ℹ️</span>
+                  <div className="text-sm">
+                    <p className="font-medium text-blue-800">Why connect to Hugging Face?</p>
+                    <p className="text-blue-700 mt-1">
+                      Access thousands of AI models for advanced text generation and editing.
+                      Get your free API key at{' '}
+                      <a
+                        href="https://huggingface.co/settings/tokens"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="underline font-medium"
+                      >
+                        huggingface.co/settings/tokens
+                      </a>
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* API Key Input */}
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">
+                  <Key className="inline w-4 h-4 mr-1" />
+                  Hugging Face API Key
+                </label>
+                <input
+                  type="password"
+                  value={apiKey}
+                  onChange={(e) => setApiKey(e.target.value)}
+                  className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  placeholder="hf_..."
+                  disabled={isLoading}
+                />
+              </div>
+
+              {/* Error Message */}
+              {error && (
+                <div className="bg-red-50 border border-red-200 rounded-lg p-3">
+                  <p className="text-sm text-red-700">{error}</p>
+                </div>
+              )}
+            </div>
+
+            {/* Footer */}
+            <div className="flex items-center justify-end gap-3 p-4 border-t">
+              <button
+                onClick={() => setIsOpen(false)}
+                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleLogin}
+                disabled={isLoading}
+                className="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+              >
+                {isLoading ? (
+                  <>
+                    <div className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full" />
+                    Connecting...
+                  </>
+                ) : (
+                  <>
+                    <LogIn className="w-4 h-4" />
+                    Connect
+                  </>
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

components/editor/AIToolsDialog.tsx

@@ -0,0 +1,201 @@
+import React, { useState } from 'react';
+import { X, Sparkles, RefreshCw, FileText, Maximize2 } from 'lucide-react';
+
+interface AIToolsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  selectedText: string;
+  onApply: (newText: string) => void;
+  onAIEdit: (action: 'refine' | 'change' | 'expand') => Promise<string>;
+}
+
+export default function AIToolsDialog({
+  isOpen,
+  onClose,
+  selectedText,
+  onApply,
+  onAIEdit
+}: AIToolsDialogProps) {
+  const [currentText, setCurrentText] = useState(selectedText);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [selectedAction, setSelectedAction] = useState<'refine' | 'change' | 'expand' | null>(null);
+
+  if (!isOpen) return null;
+
+  const handleAction = async (action: 'refine' | 'change' | 'expand') => {
+    setIsProcessing(true);
+    setSelectedAction(action);
+    try {
+      const newText = await onAIEdit(action);
+      setCurrentText(newText);
+    } catch (error) {
+      console.error('AI edit error:', error);
+    } finally {
+      setIsProcessing(false);
+      setSelectedAction(null);
+    }
+  };
+
+  const handleApply = () => {
+    onApply(currentText);
+    onClose();
+  };
+
+  const handleCancel = () => {
+    setCurrentText(selectedText);
+    onClose();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[1000]">
+      <div className="bg-white rounded-lg shadow-xl w-[600px] max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b">
+          <div className="flex items-center gap-2">
+            <Sparkles className="w-5 h-5 text-purple-600" />
+            <h2 className="text-lg font-semibold">AI Text Tools</h2>
+          </div>
+          <button
+            onClick={handleCancel}
+            className="p-1 hover:bg-gray-100 rounded transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-auto p-4">
+          <div className="space-y-4">
+            {/* Action buttons */}
+            <div className="grid grid-cols-3 gap-3">
+              <button
+                onClick={() => handleAction('refine')}
+                disabled={isProcessing}
+                className={`
+                  p-4 rounded-lg border-2 transition-all
+                  ${isProcessing && selectedAction === 'refine'
+                    ? 'border-purple-500 bg-purple-50'
+                    : 'border-gray-200 hover:border-purple-400 hover:bg-purple-50'}
+                  ${isProcessing ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}
+                `}
+              >
+                <div className="flex flex-col items-center gap-2">
+                  {isProcessing && selectedAction === 'refine' ? (
+                    <div className="animate-spin h-6 w-6 border-2 border-purple-600 border-t-transparent rounded-full" />
+                  ) : (
+                    <Sparkles className="w-6 h-6 text-purple-600" />
+                  )}
+                  <div className="text-sm font-medium">Refine Text</div>
+                  <div className="text-xs text-gray-500 text-center">Make it more professional</div>
+                </div>
+              </button>
+
+              <button
+                onClick={() => handleAction('change')}
+                disabled={isProcessing}
+                className={`
+                  p-4 rounded-lg border-2 transition-all
+                  ${isProcessing && selectedAction === 'change'
+                    ? 'border-purple-500 bg-purple-50'
+                    : 'border-gray-200 hover:border-purple-400 hover:bg-purple-50'}
+                  ${isProcessing ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}
+                `}
+              >
+                <div className="flex flex-col items-center gap-2">
+                  {isProcessing && selectedAction === 'change' ? (
+                    <div className="animate-spin h-6 w-6 border-2 border-purple-600 border-t-transparent rounded-full" />
+                  ) : (
+                    <RefreshCw className="w-6 h-6 text-purple-600" />
+                  )}
+                  <div className="text-sm font-medium">Rewrite</div>
+                  <div className="text-xs text-gray-500 text-center">Different wording, same meaning</div>
+                </div>
+              </button>
+
+              <button
+                onClick={() => handleAction('expand')}
+                disabled={isProcessing}
+                className={`
+                  p-4 rounded-lg border-2 transition-all
+                  ${isProcessing && selectedAction === 'expand'
+                    ? 'border-purple-500 bg-purple-50'
+                    : 'border-gray-200 hover:border-purple-400 hover:bg-purple-50'}
+                  ${isProcessing ? 'cursor-not-allowed opacity-75' : 'cursor-pointer'}
+                `}
+              >
+                <div className="flex flex-col items-center gap-2">
+                  {isProcessing && selectedAction === 'expand' ? (
+                    <div className="animate-spin h-6 w-6 border-2 border-purple-600 border-t-transparent rounded-full" />
+                  ) : (
+                    <Maximize2 className="w-6 h-6 text-purple-600" />
+                  )}
+                  <div className="text-sm font-medium">Expand</div>
+                  <div className="text-xs text-gray-500 text-center">Add more detail</div>
+                </div>
+              </button>
+            </div>
+
+            {/* Text preview */}
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                Preview
+              </label>
+              <div className="relative">
+                <textarea
+                  value={currentText}
+                  onChange={(e) => setCurrentText(e.target.value)}
+                  className="w-full h-40 p-3 border rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-purple-500"
+                  placeholder="Your text will appear here..."
+                />
+                {isProcessing && (
+                  <div className="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center rounded-lg">
+                    <div className="flex items-center gap-2">
+                      <div className="animate-spin h-5 w-5 border-2 border-purple-600 border-t-transparent rounded-full" />
+                      <span className="text-sm text-gray-600">AI is working...</span>
+                    </div>
+                  </div>
+                )}
+              </div>
+              <div className="mt-2 flex items-center justify-between text-xs text-gray-500">
+                <span>{currentText.split(' ').length} words</span>
+                <span>{currentText.length} characters</span>
+              </div>
+            </div>
+
+            {/* Comparison */}
+            {currentText !== selectedText && (
+              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                <div className="flex items-start gap-2">
+                  <FileText className="w-4 h-4 text-yellow-600 mt-0.5" />
+                  <div className="flex-1">
+                    <div className="text-sm font-medium text-yellow-800">Changes made</div>
+                    <div className="text-xs text-yellow-700 mt-1">
+                      The text has been modified. Click "Apply Changes" to save or "Cancel" to revert.
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-end gap-3 p-4 border-t">
+          <button
+            onClick={handleCancel}
+            className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleApply}
+            disabled={isProcessing}
+            className="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Apply Changes
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

components/editor/GoogleSlidesEditor.tsx

@@ -89,6 +89,8 @@ import { Shape, createShape } from '@/lib/shapes-system';
 import ShapesPanel from '@/components/editor/ShapesPanel';
 import PowerPointRibbon from '@/components/editor/PowerPointRibbon';
 import ShapeRenderer from '@/components/shapes/ShapeRenderer';
+import AIToolsDialog from '@/components/editor/AIToolsDialog';
+import HuggingFaceLogin from '@/components/auth/HuggingFaceLogin';
 
 // ============================================================================
 // TYPE DEFINITIONS - Define the structure of all elements in the editor
@@ -162,121 +164,57 @@ const themes = {
     bodyFont: 'Arial'
   },
 
-  // Workshop Theme - Paper & Grid Design
+  // Professional Workshop Theme
   workshop: {
-    // Grid background pattern (24px grid on paper) - matches pinboard aesthetic
-    backgroundImage: `
-      repeating-linear-gradient(0deg, #D6CEC2 0, #D6CEC2 1px, transparent 1px, transparent 24px),
-      repeating-linear-gradient(90deg, #D6CEC2 0, #D6CEC2 1px, transparent 1px, transparent 24px)
-    `,
-    backgroundSize: '24px 24px',
-    backgroundPosition: '0 0',
-    backgroundColor: '#EFE8DF', // Paper color
-    titleColor: '#0E0E0E', // Black
-    textColor: '#151515', // Off-black
+    background: '#EFE8DF',
+    titleColor: '#0E0E0E',
+    textColor: '#151515',
     gradient: false,
     solidBackground: '#EFE8DF',
     headingFont: 'Anton',
-    bodyFont: 'Manrope',
-    // Theme accent colors (for sticky notes, labels, decorations)
-    accentCoral: '#E76C63',
-    accentGreen: '#6C8E5F',
-    accentTeal: '#3AA6A6',
-    accentSand: '#E9DCCF',
-    accentPurple: '#6C58A6',
-    paperDark: '#E6DED2',
-    gridLine: '#D6CEC2',
-    shadowColor: 'rgba(0, 0, 0, 0.28)'
-  },
-
-  // Gradient Themes
-  oceanBreeze: {
-    backgroundImage: 'linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%)',
-    titleColor: '#ffffff',
-    textColor: '#f0f0f0',
-    gradient: true,
-    solidBackground: '#667eea',
-    headingFont: 'Arial',
-    bodyFont: 'Arial'
+    bodyFont: 'Manrope'
   },
 
-  sunsetGlow: {
-    backgroundImage: 'linear-gradient(135deg, #ff6b6b 0%, #feca57 50%, #ee5a6f 100%)',
-    titleColor: '#ffffff',
-    textColor: '#ffffff',
-    gradient: true,
-    solidBackground: '#ff6b6b',
-    headingFont: 'Arial',
-    bodyFont: 'Arial'
-  },
-
-  forestMist: {
-    backgroundImage: 'linear-gradient(135deg, #134e5e 0%, #71b280 100%)',
-    titleColor: '#ffffff',
-    textColor: '#e8f5e9',
-    gradient: true,
-    solidBackground: '#134e5e',
-    headingFont: 'Arial',
-    bodyFont: 'Arial'
-  },
-
-  midnightBlue: {
-    backgroundImage: 'linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%)',
+  // Modern Dark Theme
+  darkModern: {
+    background: '#1a1a2e',
     titleColor: '#64b5f6',
     textColor: '#e1f5fe',
-    gradient: true,
-    solidBackground: '#0f2027',
+    gradient: false,
+    solidBackground: '#1a1a2e',
     headingFont: 'Arial',
     bodyFont: 'Arial'
   },
 
-  // Pattern Themes
-  geometricDark: {
-    backgroundImage: `
-      linear-gradient(45deg, #1a1a2e 25%, transparent 25%),
-      linear-gradient(-45deg, #1a1a2e 25%, transparent 25%),
-      linear-gradient(45deg, transparent 75%, #1a1a2e 75%),
-      linear-gradient(-45deg, transparent 75%, #1a1a2e 75%),
-      linear-gradient(#16213e, #16213e)
-    `,
-    backgroundSize: '20px 20px, 20px 20px, 20px 20px, 20px 20px, 100% 100%',
-    backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px, 0 0',
-    titleColor: '#00d2ff',
-    textColor: '#e0e0e0',
+  // Professional Blue
+  professionalBlue: {
+    background: '#1e3a8a',
+    titleColor: '#ffffff',
+    textColor: '#dbeafe',
     gradient: false,
-    solidBackground: '#16213e',
+    solidBackground: '#1e3a8a',
     headingFont: 'Arial',
     bodyFont: 'Arial'
   },
 
-  stripedProfessional: {
-    backgroundImage: `
-      repeating-linear-gradient(
-        45deg,
-        #2c3e50,
-        #2c3e50 10px,
-        #34495e 10px,
-        #34495e 20px
-      )
-    `,
-    titleColor: '#ecf0f1',
-    textColor: '#bdc3c7',
+  // Elegant Green
+  elegantGreen: {
+    background: '#065f46',
+    titleColor: '#ffffff',
+    textColor: '#d1fae5',
     gradient: false,
-    solidBackground: '#2c3e50',
+    solidBackground: '#065f46',
     headingFont: 'Arial',
     bodyFont: 'Arial'
   },
 
-  dotGrid: {
-    backgroundImage: `
-      radial-gradient(circle, #3498db 1px, transparent 1px),
-      linear-gradient(#ecf0f1, #ecf0f1)
-    `,
-    backgroundSize: '30px 30px, 100% 100%',
-    titleColor: '#2c3e50',
-    textColor: '#34495e',
+  // Sophisticated Purple
+  sophisticatedPurple: {
+    background: '#581c87',
+    titleColor: '#ffffff',
+    textColor: '#e9d5ff',
     gradient: false,
-    solidBackground: '#ecf0f1',
+    solidBackground: '#581c87',
     headingFont: 'Arial',
     bodyFont: 'Arial'
   },
@@ -768,6 +706,7 @@ export default function GoogleSlidesEditor() {
   const [currentTheme, setCurrentTheme] = useState<keyof typeof themes>('white');  // Active theme
   const [isGenerating, setIsGenerating] = useState(false);  // AI generation in progress
   const [generationError, setGenerationError] = useState<string | null>(null);  // AI errors
+  const [presentationTitle, setPresentationTitle] = useState('Untitled Presentation');  // Editable title
 
   // EDITOR UI STATE
   const [currentSlideIndex, setCurrentSlideIndex] = useState(0);  // Which slide is active
@@ -780,6 +719,7 @@ export default function GoogleSlidesEditor() {
   const [showExportMenu, setShowExportMenu] = useState(false);  // Export dropdown visible
   const [showAIMenu, setShowAIMenu] = useState(false);  // AI menu visible
   const [isAIEditing, setIsAIEditing] = useState(false);  // AI is processing text
+  const [showAIDialog, setShowAIDialog] = useState(false);  // AI dialog visible
 
   // DOM REFERENCES - For direct DOM manipulation
   const fileInputRef = useRef<HTMLInputElement>(null);  // Hidden file input for images
@@ -886,14 +826,20 @@ export default function GoogleSlidesEditor() {
           };
 
           if (!generationModel.includes('gemini')) {
-            // For HF models, try to get the OAuth token
-            const hfOAuth = localStorage.getItem('hf_oauth');
-            if (hfOAuth) {
-              try {
-                const oauthData = JSON.parse(hfOAuth);
-                headers['x-hf-token'] = oauthData.accessToken;
-              } catch (e) {
-                console.error('Failed to parse HF OAuth data:', e);
+            // For HF models, try to get the API key from localStorage
+            const hfApiKey = localStorage.getItem('hf_api_key');
+            if (hfApiKey) {
+              headers['x-hf-api-key'] = hfApiKey;
+            } else {
+              // Also check for OAuth token (legacy support)
+              const hfOAuth = localStorage.getItem('hf_oauth');
+              if (hfOAuth) {
+                try {
+                  const oauthData = JSON.parse(hfOAuth);
+                  headers['x-hf-token'] = oauthData.accessToken;
+                } catch (e) {
+                  console.error('Failed to parse HF OAuth data:', e);
+                }
               }
             }
           }
@@ -1196,6 +1142,48 @@ export default function GoogleSlidesEditor() {
     return () => window.removeEventListener('keydown', onKey);
   }, [selectedId, currentSlideIndex, handleUndo, handleRedo, isEditingTextId, currentSlide.elements, updateElement]); // saveToHistory is stable
 
+  // Helper function to sanitize CSS colors for export
+  const sanitizeColorsForExport = (clonedDoc: Document) => {
+    // Create a style element to override problematic colors
+    const style = clonedDoc.createElement('style');
+    style.textContent = `
+      /* Override any potentially problematic colors with safe fallbacks */
+      * {
+        /* Ensure no lab(), lch(), oklch() or other modern color functions are used */
+        transition: none !important;
+        animation: none !important;
+      }
+      /* Replace any computed styles that might use modern color functions */
+      .dark * {
+        background-color: #242424 !important;
+        color: #fafafa !important;
+      }
+      body, html {
+        background: #ffffff !important;
+      }
+    `;
+    clonedDoc.head.appendChild(style);
+
+    // Check and replace any inline styles with modern color functions
+    const allElements = clonedDoc.querySelectorAll('*');
+    allElements.forEach((el: HTMLElement) => {
+      const style = el.getAttribute('style');
+      if (style) {
+        // Replace various modern color functions with safe fallbacks
+        const sanitized = style
+          .replace(/lab\([^)]+\)/g, '#000000')
+          .replace(/lch\([^)]+\)/g, '#000000')
+          .replace(/oklch\([^)]+\)/g, '#000000')
+          .replace(/oklab\([^)]+\)/g, '#000000')
+          .replace(/color\([^)]+\)/g, '#000000');
+
+        if (sanitized !== style) {
+          el.setAttribute('style', sanitized);
+        }
+      }
+    });
+  };
+
   // PDF Export function
   const exportToPDF = async () => {
     if (!slideRef.current || slides.length === 0) return;
@@ -1232,11 +1220,32 @@ export default function GoogleSlidesEditor() {
 
         // Capture the slide with html2canvas
         const canvas = await html2canvas(slideRef.current, {
-          backgroundColor: '#ffffff',
+          backgroundColor: null, // Use transparent to preserve the theme background
           scale: 2,
           logging: false,
           useCORS: true,
           allowTaint: true,
+          // Add onclone to fix color issues and preserve theme
+          onclone: (clonedDoc) => {
+            // Apply theme styles to cloned document
+            const slideElement = clonedDoc.querySelector('[style*="width: 800px"]');
+            if (slideElement && slideElement instanceof HTMLElement) {
+              const theme = themes[currentTheme] as any;
+              if (theme.backgroundImage) {
+                slideElement.style.backgroundImage = theme.backgroundImage;
+                slideElement.style.backgroundSize = theme.backgroundSize || 'cover';
+                slideElement.style.backgroundPosition = theme.backgroundPosition || 'center';
+                if (theme.backgroundColor) {
+                  slideElement.style.backgroundColor = theme.backgroundColor;
+                }
+              } else if (theme.background) {
+                slideElement.style.backgroundColor = theme.background;
+              } else if (theme.solidBackground) {
+                slideElement.style.backgroundColor = theme.solidBackground;
+              }
+            }
+            sanitizeColorsForExport(clonedDoc);
+          },
         });
 
         const imgData = canvas.toDataURL('image/png');
@@ -1248,7 +1257,9 @@ export default function GoogleSlidesEditor() {
         pdf.addImage(imgData, 'PNG', 0, 0, 800, 450);
       }
 
-      pdf.save('presentation.pdf');
+      // Use presentation title for filename, sanitize it
+      const sanitizedTitle = presentationTitle.replace(/[^a-zA-Z0-9 -]/g, '').trim() || 'presentation';
+      pdf.save(`${sanitizedTitle}.pdf`);
 
       // Restore original state
       setCurrentSlideIndex(originalSlideIndex);
@@ -1302,7 +1313,9 @@ export default function GoogleSlidesEditor() {
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      a.download = 'presentation.pptx';
+      // Use presentation title for filename, sanitize it
+      const sanitizedTitle = presentationTitle.replace(/[^a-zA-Z0-9 -]/g, '').trim() || 'presentation';
+      a.download = `${sanitizedTitle}.pptx`;
       document.body.appendChild(a);
       a.click();
       window.URL.revokeObjectURL(url);
@@ -1352,25 +1365,22 @@ export default function GoogleSlidesEditor() {
     );
   };
 
-  // AI Text Editing
-  const handleAIEdit = async (action: 'refine' | 'change' | 'expand') => {
-    if (!selectedId) return;
-    
+  // AI Text Editing - returns the edited text for the dialog
+  const handleAIEdit = async (action: 'refine' | 'change' | 'expand'): Promise<string> => {
     const selectedElement = currentSlide.elements.find(e => e.id === selectedId);
-    if (!selectedElement || selectedElement.type !== 'text') return;
-    
+    if (!selectedElement || selectedElement.type !== 'text') {
+      throw new Error('No text element selected');
+    }
+
     const textEl = selectedElement as TextElement;
     const originalText = textEl.text;
-    
-    setIsAIEditing(true);
-    setShowAIMenu(false);
-    
+
     try {
       // Get HF token if available
       const headers: Record<string, string> = {
         'Content-Type': 'application/json',
       };
-      
+
       const hfOAuth = localStorage.getItem('hf_oauth');
       if (hfOAuth) {
         try {
@@ -1380,7 +1390,7 @@ export default function GoogleSlidesEditor() {
           console.error('Failed to parse HF OAuth data:', e);
         }
       }
-      
+
       const response = await fetch('/api/ai-edit-text', {
         method: 'POST',
         headers,
@@ -1389,21 +1399,25 @@ export default function GoogleSlidesEditor() {
           action,
         }),
       });
-      
+
       if (!response.ok) {
         throw new Error('Failed to edit text');
       }
-      
+
       const data = await response.json();
-      updateElement(selectedId, { text: data.text });
-      setIsAIEditing(false);
+      return data.text;
     } catch (error) {
       console.error('AI editing error:', error);
-      alert('Failed to edit text with AI. Please try again.');
-      setIsAIEditing(false);
+      throw error;
     }
   };
 
+  // Handle opening AI dialog from ribbon
+  const handleOpenAIDialog = () => {
+    setShowAIMenu(false);
+    setShowAIDialog(true);
+  };
+
   const addText = () => {
     const newId = createId();
     setSlides(prev => {
@@ -2073,17 +2087,25 @@ export default function GoogleSlidesEditor() {
   return (
     <div className="h-dvh w-full flex flex-col bg-gray-100 text-gray-800 min-w-[768px]">
       {/* Topbar mimicking Google Slides */}
-      <div className="border-b bg-white text-black">
+      <div className="border-b bg-white text-black overflow-visible">
         <div className="flex items-center gap-2 md:gap-3 px-2 md:px-3 py-2">
-          <input defaultValue="Untitled presentation" className="text-sm font-medium px-2 py-1 rounded hover:bg-gray-100 focus:bg-gray-100 outline-none text-black max-w-xs flex-shrink min-w-0" style={{ fontFamily: 'Inter, sans-serif' }} />
+          <input
+            value={presentationTitle}
+            onChange={(e) => setPresentationTitle(e.target.value)}
+            className="text-sm font-medium px-2 py-1 rounded hover:bg-gray-100 focus:bg-gray-100 outline-none text-black max-w-xs flex-shrink min-w-0"
+            style={{ fontFamily: 'Inter, sans-serif' }}
+            placeholder="Enter presentation title"
+          />
           <div className="ml-auto flex items-center gap-2">
-             <button className="px-2 md:px-3 py-1.5 rounded border text-sm hover:bg-gray-50 flex items-center gap-1 md:gap-2 text-black" style={{ fontFamily: 'Inter, sans-serif' }}><FiPlay /> <span className="hidden sm:inline">Slideshow</span></button>
+            <HuggingFaceLogin onAuthChange={(authenticated) => {
+              console.log('HF Auth changed:', authenticated);
+            }} />
             <div className="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0" />
           </div>
         </div>
 
         {/* Toolbar */}
-        <div className="px-2 md:px-3 pb-2">
+        <div className="px-2 md:px-3 pb-2 overflow-visible">
           <PowerPointRibbon
             handleUndo={handleUndo}
             handleRedo={handleRedo}
@@ -2108,7 +2130,7 @@ export default function GoogleSlidesEditor() {
             showAIMenu={showAIMenu}
             setShowAIMenu={setShowAIMenu}
             isAIEditing={isAIEditing}
-            handleAIEdit={handleAIEdit}
+            handleAIEdit={handleOpenAIDialog}
             applyLayout={applyLayout}
             currentTheme={currentTheme}
             applyTheme={applyTheme}
@@ -2642,6 +2664,27 @@ export default function GoogleSlidesEditor() {
           </div>
         </main>
       </div>
+
+      {/* AI Tools Dialog */}
+      {showAIDialog && selectedId && (() => {
+        const selectedElement = currentSlide.elements.find(e => e.id === selectedId);
+        if (selectedElement?.type === 'text') {
+          const textEl = selectedElement as TextElement;
+          return (
+            <AIToolsDialog
+              isOpen={showAIDialog}
+              onClose={() => setShowAIDialog(false)}
+              selectedText={textEl.text}
+              onApply={(newText) => {
+                updateElement(selectedId, { text: newText });
+                setShowAIDialog(false);
+              }}
+              onAIEdit={handleAIEdit}
+            />
+          );
+        }
+        return null;
+      })()}
     </div>
   );
 }

components/editor/PowerPointRibbon.tsx

@@ -55,7 +55,7 @@ interface PowerPointRibbonProps {
   showAIMenu: boolean;
   setShowAIMenu: (show: boolean) => void;
   isAIEditing: boolean;
-  handleAIEdit: (action: string) => void;
+  handleAIEdit: (action: string | 'dialog') => void;
 
   // Layout & Theme
   applyLayout: (layout: string) => void;
@@ -163,7 +163,7 @@ export default function PowerPointRibbon(props: PowerPointRibbonProps) {
   const isTextSelected = !!textEl;
 
   return (
-    <div className="w-full bg-white border-b border-gray-200 overflow-x-auto">
+    <div className="w-full bg-white border-b border-gray-200 overflow-x-auto overflow-y-visible scrollbar-hide">
       <div className="flex items-stretch divide-x divide-gray-200 px-2 pt-2 min-w-max">
         {/* Edit */}
         <Group label="Edit" withDivider>
@@ -328,16 +328,15 @@ export default function PowerPointRibbon(props: PowerPointRibbonProps) {
             >
               <option value="white">⚪ White</option>
               <option value="workshop">📝 Workshop</option>
-              <optgroup label="Gradients">
-                <option value="oceanBreeze">🌊 Ocean Breeze</option>
-                <option value="sunsetGlow">🌅 Sunset Glow</option>
-                <option value="forestMist">🌲 Forest Mist</option>
-                <option value="midnightBlue">🌙 Midnight Blue</option>
-              </optgroup>
-              <optgroup label="Patterns">
-                <option value="geometricDark">◆ Geometric Dark</option>
-                <option value="stripedProfessional">▤ Striped Professional</option>
-                <option value="dotGrid">⋯ Dot Grid</option>
+              <option value="darkModern">🌙 Dark Modern</option>
+              <option value="professionalBlue">💼 Professional Blue</option>
+              <option value="elegantGreen">🌿 Elegant Green</option>
+              <option value="sophisticatedPurple">💜 Sophisticated Purple</option>
+              <optgroup label="Photo Themes">
+                <option value="corporateCity">🏢 Corporate City</option>
+                <option value="techInnovation">💻 Tech Innovation</option>
+                <option value="natureSerene">🌳 Nature Serene</option>
+                <option value="minimalistConcrete">⬜ Minimalist</option>
               </optgroup>
             </select>
             <select
@@ -380,33 +379,14 @@ export default function PowerPointRibbon(props: PowerPointRibbonProps) {
           <div className="flex flex-col gap-1">
             {textEl && (
               <>
-                <div className="relative">
-                  <MiniButton
-                    title="AI Edit"
-                    onClick={() => setShowAIMenu(!showAIMenu)}
-                    wide
-                  >
-                    {isAIEditing ? (
-                      <div className="animate-spin h-3 w-3 border-2 border-purple-600 border-t-transparent rounded-full" />
-                    ) : (
-                      <Sparkles className="w-4 h-4" />
-                    )}
-                    <span className="ml-1 text-[12px]">AI</span>
-                  </MiniButton>
-                  {showAIMenu && (
-                    <div className="absolute left-0 mt-1 bg-white border rounded shadow-lg z-10 min-w-[140px]">
-                      <button onClick={() => handleAIEdit('refine')} className="w-full px-3 py-2 text-left text-[12px] hover:bg-gray-100">
-                        ✨ Refine text
-                      </button>
-                      <button onClick={() => handleAIEdit('change')} className="w-full px-3 py-2 text-left text-[12px] hover:bg-gray-100">
-                        🔄 Change content
-                      </button>
-                      <button onClick={() => handleAIEdit('expand')} className="w-full px-3 py-2 text-left text-[12px] hover:bg-gray-100">
-                        📝 Make longer
-                      </button>
-                    </div>
-                  )}
-                </div>
+                <MiniButton
+                  title="AI Edit"
+                  onClick={() => handleAIEdit('dialog')}
+                  wide
+                >
+                  <Sparkles className="w-4 h-4" />
+                  <span className="ml-1 text-[12px]">AI</span>
+                </MiniButton>
                 <button
                   title="Delete"
                   onClick={() => {
@@ -431,7 +411,7 @@ export default function PowerPointRibbon(props: PowerPointRibbonProps) {
                 <span className="ml-1 text-[12px]">Export</span>
               </MiniButton>
               {showExportMenu && (
-                <div className="absolute left-0 mt-1 bg-white border rounded shadow-lg z-10 min-w-[100px]">
+                <div className="absolute left-0 mt-1 bg-white border rounded shadow-lg z-[100] min-w-[100px]">
                   <button onClick={() => { exportToPDF(); setShowExportMenu(false); }} className="w-full px-3 py-2 text-left text-[12px] hover:bg-gray-100 flex items-center gap-2">
                     <Download className="w-3 h-3" /> PDF
                   </button>

components/editor/ShapesPanel.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Shape } from '@/lib/shapes-system';
 import ShapePicker from '@/components/shapes/ShapePicker';
 import ShapeEditor from '@/components/shapes/ShapeEditor';
 import { Shapes, Plus, Edit2, Trash2, X } from 'lucide-react';
+import { createPortal } from 'react-dom';
 
 interface ShapesPanelProps {
   shapes: Shape[];
@@ -23,6 +24,9 @@ export default function ShapesPanel({
 }: ShapesPanelProps) {
   const [showPicker, setShowPicker] = useState(false);
   const [showEditor, setShowEditor] = useState(false);
+  const [isPortalReady, setIsPortalReady] = useState(false);
+  const [pickerPosition, setPickerPosition] = useState<{ top: number; left: number } | null>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   const selectedShape = shapes.find(s => s.id === selectedShapeId);
 
@@ -32,6 +36,33 @@ export default function ShapesPanel({
     onShapeSelect(shape.id);
   };
 
+  const updatePickerPosition = () => {
+    if (!buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    const panelWidth = 320; // ShapePicker w-80
+    const spacing = 8;
+    let left = rect.right - panelWidth;
+    left = Math.max(spacing, Math.min(left, window.innerWidth - panelWidth - spacing));
+    const top = rect.bottom + spacing;
+    setPickerPosition({ top, left });
+  };
+
+  useEffect(() => {
+    setIsPortalReady(true);
+  }, []);
+
+  useEffect(() => {
+    if (!showPicker) return;
+    updatePickerPosition();
+    const onScrollOrResize = () => updatePickerPosition();
+    window.addEventListener('scroll', onScrollOrResize, true);
+    window.addEventListener('resize', onScrollOrResize);
+    return () => {
+      window.removeEventListener('scroll', onScrollOrResize, true);
+      window.removeEventListener('resize', onScrollOrResize);
+    };
+  }, [showPicker]);
+
   const handleDeleteShape = () => {
     if (selectedShapeId) {
       onShapeDelete(selectedShapeId);
@@ -48,6 +79,7 @@ export default function ShapesPanel({
     <div className="relative">
       {/* Shapes Button */}
       <button
+        ref={buttonRef}
         onClick={() => setShowPicker(!showPicker)}
         className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
           showPicker
@@ -65,15 +97,21 @@ export default function ShapesPanel({
         )}
       </button>
 
-      {/* Shape Picker Dropdown */}
-      {showPicker && (
-        <div className="absolute top-full mt-2 right-0 z-50">
-          <ShapePicker
-            onShapeSelect={handleAddShape}
-            onClose={() => setShowPicker(false)}
-          />
-        </div>
-      )}
+      {/* Shape Picker Dropdown (Portal) */}
+      {isPortalReady && showPicker && pickerPosition &&
+        createPortal(
+          <div
+            className="fixed z-[1000]"
+            style={{ top: pickerPosition.top, left: pickerPosition.left }}
+          >
+            <ShapePicker
+              onShapeSelect={handleAddShape}
+              onClose={() => setShowPicker(false)}
+            />
+          </div>,
+          document.body
+        )
+      }
 
       {/* Edit Shape Button (when shape is selected) */}
       {selectedShapeId && !showEditor && (
@@ -88,7 +126,7 @@ export default function ShapesPanel({
 
       {/* Shape Editor Dropdown */}
       {showEditor && selectedShape && (
-        <div className="absolute top-full mt-2 right-0 z-50">
+        <div className="absolute top-full mt-2 right-0 z-[100]">
           <ShapeEditor
             shape={selectedShape}
             onChange={onShapeUpdate}
@@ -100,7 +138,7 @@ export default function ShapesPanel({
 
       {/* Shapes List (when shapes exist) */}
       {shapes.length > 0 && !showPicker && (
-        <div className="absolute top-full mt-2 right-0 bg-white rounded-lg shadow-xl border border-gray-200 p-3 w-64 max-h-80 overflow-y-auto z-40">
+        <div className="absolute top-full mt-2 right-0 bg-white rounded-lg shadow-xl border border-gray-200 p-3 w-64 max-h-80 overflow-y-auto z-[100]">
           <div className="flex items-center justify-between mb-3">
             <h4 className="text-sm font-semibold text-gray-900">Shapes ({shapes.length})</h4>
             <button

components/shapes/ShapePicker.tsx

@@ -40,7 +40,7 @@ export default function ShapePicker({ onShapeSelect, onClose }: ShapePickerProps
       </div>
 
       {/* Category Tabs */}
-      <div className="flex gap-2 mb-4 overflow-x-auto">
+      <div className="flex gap-2 mb-4 overflow-x-auto scrollbar-hide">
         {Object.keys(categories).map((category) => (
           <button
             key={category}

lib/gemini-client.ts

@@ -12,7 +12,7 @@ export class GeminiClient {
     // Use provided API key or environment variable, fallback to demo key
     const apiKey = config.apiKey || process.env.NEXT_PUBLIC_GEMINI_API_KEY || 'AIzaSyCfv-5BPXsihzyp-dn4oe5SBBvF1MDd-sE';
     this.genAI = new GoogleGenerativeAI(apiKey);
-    this.model = this.genAI.getGenerativeModel({ model: 'gemini-2.0-flash-exp' }); // Use available model
+    this.model = this.genAI.getGenerativeModel({ model: 'gemini-2.0-flash-exp' }); // Using Gemini 2.0 Flash
   }
 
   async generateSlideContent(prompt: string): Promise<string> {

lib/orchestrator.ts

@@ -29,10 +29,12 @@ export interface PresentationJSON {
 const systemFewShot = `You are an expert presentation strategist and designer. Create a professional, engaging 5-10 slide presentation with detailed, topic-specific content.
 
 CRITICAL REQUIREMENTS:
-1. All content must be specific to the user's topic - NO generic placeholders
-2. Each bullet point should be 15-25 words with concrete information
-3. Use relevant, actionable content with examples or data when appropriate
-4. Structure presentation logically: Title → Context → Main Points → Analysis → Benefits → Conclusion
+1. The FIRST slide must have "Reuben AI" as the main title
+2. All content must be specific to the user's topic - NO generic placeholders
+3. Each bullet point should be 15-25 words with concrete, detailed information
+4. Use relevant, actionable content with examples or data when appropriate
+5. Structure presentation logically: Title → Context → Main Points → Analysis → Benefits → Conclusion
+6. Generate specific, relevant image keywords for visual search (2-4 words) that will fetch high-quality images from Unsplash
 
 Return STRICT JSON matching this schema:
 {
@@ -41,8 +43,8 @@ Return STRICT JSON matching this schema:
     {
       "id": "slide-1",
       "layout": "title",
-      "title": "Topic-Specific Title",
-      "subtitle": "Engaging subtitle or tagline"
+      "title": "Reuben AI",
+      "subtitle": "Topic-specific subtitle based on user's input"
     },
     {
       "id": "slide-2",