working on production

app/api/auth/callback/route.ts

@@ -1,96 +0,0 @@
-/**
- * HuggingFace OAuth 2.0 Callback Handler
- *
- * This route handles the redirect from HuggingFace after the user authorises
- * the application via the OAuth flow.  It exchanges the one-time `code`
- * parameter for a long-lived access token and then redirects the user back to
- * the home page.
- *
- * Flow:
- *  1. User clicks "Connect with HuggingFace" → browser redirected to HF.
- *  2. User grants permission → HF redirects back here with `?code=…`.
- *  3. This handler exchanges the code for an access token.
- *  4. The token is appended to the home page URL so the client can store it.
- *
- * Environment variables required:
- *  - HUGGINGFACE_CLIENT_ID     — OAuth application client ID
- *  - HUGGINGFACE_CLIENT_SECRET — OAuth application client secret
- *
- * Security note:
- *  For this demo the token is passed in a query parameter which exposes it in
- *  browser history and server logs.  A production implementation should use
- *  httpOnly cookies or a server-side session instead.
- *
- * Route: GET /api/auth/callback
- */
-
-import { NextRequest, NextResponse } from 'next/server';
-
-/**
- * GET /api/auth/callback
- *
- * Handles the OAuth redirect from HuggingFace.  On success redirects to
- * `/?token=<access_token>&auth=success`.  On any failure redirects to
- * `/?error=<reason>`.
- *
- * @param request - NextRequest; the `code` and `error` query params are read.
- * @returns A redirect response — never a JSON body.
- */
-export async function GET(request: NextRequest) {
-  const searchParams = request.nextUrl.searchParams;
-
-  // Read the OAuth code sent by HuggingFace on successful authorisation
-  const code = searchParams.get('code');
-  // HuggingFace may also send an `error` parameter when the user denies access
-  const error = searchParams.get('error');
-
-  // If HuggingFace signalled an error, redirect back with a friendly flag
-  if (error) {
-    // Redirect to home with error
-    return NextResponse.redirect(new URL('/?error=auth_failed', request.url));
-  }
-
-  // Guard: code must be present to proceed with token exchange
-  if (!code) {
-    return NextResponse.redirect(new URL('/?error=no_code', request.url));
-  }
-
-  try {
-    // Exchange code for access token — standard OAuth 2.0 code exchange
-    const tokenResponse = await fetch('https://huggingface.co/oauth/token', {
-      method: 'POST',
-      headers: {
-        // HuggingFace token endpoint expects URL-encoded form data
-        'Content-Type': 'application/x-www-form-urlencoded',
-      },
-      body: new URLSearchParams({
-        client_id: process.env.HUGGINGFACE_CLIENT_ID!,         // OAuth app ID
-        client_secret: process.env.HUGGINGFACE_CLIENT_SECRET!, // OAuth app secret
-        code,                                                   // One-time authorisation code
-        grant_type: 'authorization_code',                       // OAuth grant type
-        // The redirect_uri must match exactly what was registered with HF
-        redirect_uri: `${new URL(request.url).origin}/api/auth/callback`,
-      }),
-    });
-
-    // Non-OK response means the code was invalid, expired, or the credentials wrong
-    if (!tokenResponse.ok) {
-      throw new Error('Failed to exchange code for token');
-    }
-
-    const tokenData = await tokenResponse.json();
-    const accessToken = tokenData.access_token; // The bearer token to store
-
-    // In a real app, you'd store this token securely (session, JWT, etc.)
-    // For this demo, we'll redirect with the token in a query parameter
-    // Note: This is not secure for production use
-    return NextResponse.redirect(
-      new URL(`/?token=${accessToken}&auth=success`, request.url)
-    );
-
-  } catch (error) {
-    console.error('OAuth callback error:', error);
-    // Redirect home with a descriptive error flag the frontend can handle
-    return NextResponse.redirect(new URL('/?error=token_exchange_failed', request.url));
-  }
-}

app/api/auth/hf/route.ts

@@ -1,144 +0,0 @@
-/**
- * Hugging Face API Key Authentication Endpoint
- *
- * Manages server-side validation and storage of the user's Hugging Face API
- * key in an httpOnly cookie so it can be forwarded to AI generation routes
- * without exposing the raw key to client-side JavaScript.
- *
- * Routes:
- *  POST   /api/auth/hf  — Validate and store an HF API key
- *  GET    /api/auth/hf  — Check whether the user is currently authenticated
- *  DELETE /api/auth/hf  — Log out by deleting the stored cookie
- *
- * Cookie: `hf_api_key`
- *  - httpOnly: true   (not accessible from JS — prevents XSS theft)
- *  - secure: true     (HTTPS only in production)
- *  - sameSite: strict (prevents CSRF)
- *  - maxAge: 24h
- */
-
-import { NextRequest, NextResponse } from 'next/server';
-
-/**
- * POST /api/auth/hf
- *
- * Validates the provided Hugging Face API key by making a lightweight test
- * request to the HF router.  On success the key is stored in an httpOnly
- * cookie and a success response is returned.
- *
- * @param request - NextRequest containing `{ apiKey: string }` in its JSON body.
- * @returns 200 with `{ success: true }` on valid key, 400 on missing key,
- *          401 on invalid key, 500 on unexpected errors.
- */
-export async function POST(request: NextRequest) {
-  try {
-    const body = await request.json();
-    const { apiKey }: { apiKey: string } = body;
-
-    // Require the API key to be present in the request body
-    if (!apiKey) {
-      return NextResponse.json(
-        { error: 'API key is required' },
-        { status: 400 }
-      );
-    }
-
-    // Validate HF API key by making a test request to the HF router
-    try {
-      const testResponse = await fetch('https://router.huggingface.co/v1/models', {
-        headers: {
-          // HF API keys are passed as Bearer tokens
-          'Authorization': `Bearer ${apiKey}`,
-          'Content-Type': 'application/json'
-        }
-      });
-
-      // A non-OK response means the key is invalid or expired
-      if (!testResponse.ok) {
-        return NextResponse.json(
-          { error: 'Invalid HF Pro API key' },
-          { status: 401 }
-        );
-      }
-
-      // Build the success response and attach the secure API key cookie
-      // Store API key in session/cookie (in a real app, use proper session management)
-      const response = NextResponse.json({
-        success: true,
-        message: 'Successfully authenticated with HF Pro'
-      });
-
-      // Set httpOnly cookie for API key (secure in production)
-      response.cookies.set('hf_api_key', apiKey, {
-        httpOnly: true,                                        // Hidden from client JS
-        secure: process.env.NODE_ENV === 'production',        // HTTPS only in prod
-        sameSite: 'strict',                                    // No cross-site sending
-        maxAge: 24 * 60 * 60 * 1000                           // 24 hours in milliseconds
-      });
-
-      return response;
-
-    } catch {
-      // Network error or unexpected failure during the validation call
-      return NextResponse.json(
-        { error: 'Failed to validate API key' },
-        { status: 401 }
-      );
-    }
-
-  } catch (error) {
-    console.error('HF authentication error:', error);
-    return NextResponse.json(
-      { error: 'Authentication failed' },
-      { status: 500 }
-    );
-  }
-}
-
-/**
- * GET /api/auth/hf
- *
- * Checks whether the current request carries a valid `hf_api_key` cookie.
- * Used by the frontend on mount to restore the user's authenticated state.
- *
- * @param request - NextRequest; the `hf_api_key` cookie is read from it.
- * @returns 200 with `{ authenticated: boolean }`.
- */
-export async function GET(request: NextRequest) {
-  // Read the API key from the httpOnly cookie set during POST
-  const apiKey = request.cookies.get('hf_api_key')?.value;
-
-  // No cookie present → user is not authenticated
-  if (!apiKey) {
-    return NextResponse.json(
-      { authenticated: false },
-      { status: 200 }
-    );
-  }
-
-  // Cookie is present → user previously authenticated successfully
-  return NextResponse.json({
-    authenticated: true,
-    message: 'User is authenticated with HF Pro'
-  });
-}
-
-/**
- * DELETE /api/auth/hf
- *
- * Logs the user out by deleting the `hf_api_key` cookie.
- * The cookie deletion is sent as a Set-Cookie header with an expired date.
- *
- * @returns 200 with `{ success: true }` always.
- */
-export async function DELETE() {
-  // Build the response first, then remove the cookie from it
-  const response = NextResponse.json({
-    success: true,
-    message: 'Successfully logged out'
-  });
-
-  // Instruct the browser to delete the API key cookie immediately
-  response.cookies.delete('hf_api_key');
-  return response;
-}

app/api/export-pptx/route.ts

@@ -1,179 +0,0 @@
-/*
- * File: app/api/export-pptx/route.ts
- * Description: API endpoint for exporting presentations to PowerPoint format
- * This endpoint receives slide data from the frontend and generates a .pptx file
- * using the pptxgenjs library with modern styling and gradient effects.
- *
- * Features:
- * - Creates PowerPoint presentations with gradient backgrounds
- * - Supports multiple slides with titles and bullet points
- * - Adds speaker notes and modern styling
- * - Returns base64-encoded PowerPoint file
- *
- * Method: POST
- * Input: JSON array of slides with title, content, and optional notes
- * Output: Base64-encoded PowerPoint file
- */
-
-import { NextRequest, NextResponse } from 'next/server';
-import pptxgen from 'pptxgenjs';
-
-/**
- * Slide interface defining the structure of each presentation slide
- */
-interface Slide {
-  id: string;
-  title: string;
-  content: string[];
-  notes?: string;
-}
-
-// Theme color mappings (solid colors for PPTX compatibility)
-const themeColors: Record<string, { background: string; title: string; text: string }> = {
-  white: { background: 'FFFFFF', title: '202124', text: '5f6368' },
-  workshop: { background: 'EFE8DF', title: '0E0E0E', text: '151515' },
-  light: { background: 'FFFFFF', title: '202124', text: '5f6368' },
-  dark: { background: '1a1a1a', title: 'FFFFFF', text: 'e0e0e0' },
-  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' },
-  minimalistConcrete: { background: 'f5f5f5', title: '212121', text: '424242' },
-  blueGrad: { background: '1e293b', title: '60a5fa', text: 'e2e8f0' },
-  cyanGrad: { background: '0e7490', title: 'FFFFFF', text: 'e0f2fe' },
-  purpleBlue: { background: '1e40af', title: 'FFFFFF', text: 'e0e7ff' },
-  green: { background: '065f46', title: 'FFFFFF', text: 'd1fae5' },
-  amberGlow: { background: '0e0e0f', title: 'f97316', text: 'FFFFFF' }
-};
-
-/**
- * POST handler for generating PowerPoint presentations
- * Processes slide data and creates a styled .pptx file
- */
-export async function POST(request: NextRequest) {
-  try {
-    const { slides, theme = 'light' }: { slides: Slide[]; theme?: string } = await request.json();
-
-    if (!slides || !Array.isArray(slides) || slides.length === 0) {
-      return NextResponse.json(
-        { error: 'Slides array is required' },
-        { status: 400 }
-      );
-    }
-
-    // Get theme colors or default to light
-    const colors = themeColors[theme] || themeColors.light;
-
-    // Create new presentation
-    const pres = new pptxgen();
-
-    // Set presentation properties
-    pres.author = 'AI PowerPoint Generator';
-    pres.company = 'AI Generated';
-    pres.subject = 'AI Generated Presentation';
-    pres.title = slides[0]?.title || 'Presentation';
-
-    // Define slide layout and styling
-    pres.defineLayout({ name: 'LAYOUT_16x9', width: 10, height: 5.625 });
-    pres.layout = 'LAYOUT_16x9';
-
-    // Process each slide
-    slides.forEach((slideData, index) => {
-      const slide = pres.addSlide();
-
-      // Add theme background with proper color format
-      slide.background = { fill: colors.background };
-
-      // Add title with theme colors and better positioning
-      slide.addText(slideData.title, {
-        x: 0.5,
-        y: 0.5,
-        w: 9,
-        h: 1.2,
-        fontSize: 40,
-        bold: true,
-        color: colors.title,
-        align: 'left',
-        fontFace: 'Calibri',
-        valign: 'top',
-      });
-
-      // Add content points with theme colors and better spacing
-      if (slideData.content && slideData.content.length > 0) {
-        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 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',
-        });
-      }
-
-      // Add slide number
-      slide.addText(`${index + 1}`, {
-        x: 9.3,
-        y: 5.1,
-        w: 0.5,
-        h: 0.3,
-        fontSize: 12,
-        color: colors.text,
-        align: 'center',
-        valign: 'middle',
-        fontFace: 'Arial'
-      });
-
-      // Add speaker notes if available
-      if (slideData.notes) {
-        slide.addNotes(slideData.notes);
-      }
-    });
-
-    // Generate the presentation
-    const pptxBuffer = await pres.write({ outputType: 'nodebuffer' });
-
-    // Convert to Buffer and then to ArrayBuffer for NextResponse
-    const buffer = Buffer.from(pptxBuffer as Uint8Array);
-    const arrayBuffer = buffer.buffer.slice(buffer.byteOffset, buffer.byteOffset + buffer.byteLength);
-
-    // Return the file as a response
-    return new NextResponse(arrayBuffer, {
-      status: 200,
-      headers: {
-        'Content-Type': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-        'Content-Disposition': 'attachment; filename="presentation.pptx"',
-      },
-    });
-
-  } catch (error) {
-    console.error('Export error:', error);
-    return NextResponse.json(
-      { error: 'Failed to export presentation' },
-      { status: 500 }
-    );
-  }
-}

app/api/generate-slides/route.ts

@@ -1,340 +0,0 @@
-/**
- * API endpoint for generating presentation slides using AI models.
- * Integrates with Hugging Face Inference API via HF Inference.
- *
- * Method: POST
- * Input: { prompt: string, model: string }
- * Output: { presentationName: string, slides: GeneratedSlide[] }
- */
-
-import { InferenceClient } from '@huggingface/inference';
-import { NextRequest, NextResponse } from 'next/server';
-import { fetchImagesForSlides } from '@/lib/imageService';
-import { buildSlidePrompt, normalizeLayout } from '@/lib/slide-prompt';
-import type { GeneratedSlide } from '@/lib/slide-prompt';
-import { LLAMA_PRESENTATION_MODEL, isAllowedPresentationModel } from '@/lib/ai-models';
-
-interface Slide {
-  id: string;
-  title: string;
-  subtitle?: string;
-  content: string[];
-  notes?: string;
-  layout: string;
-  imageKeyword?: string;
-  imageUrl?: string;
-}
-
-export async function POST(request: NextRequest) {
-  try {
-    const { prompt, model } = await request.json();
-
-    if (!prompt) {
-      return NextResponse.json(
-        { error: 'Prompt is required' },
-        { status: 400 }
-      );
-    }
-
-    if (!isAllowedPresentationModel(model)) {
-      console.warn(`Ignoring unsupported presentation model "${model}" and forcing ${LLAMA_PRESENTATION_MODEL}.`);
-    }
-
-    const actualModel = LLAMA_PRESENTATION_MODEL;
-
-    // Resolve HF token: header → cookie → Bearer
-    let apiToken: string | undefined;
-
-    const hfTokenHeader = request.headers.get('x-hf-token');
-    if (hfTokenHeader) apiToken = hfTokenHeader;
-
-    if (!apiToken) {
-      const hfApiKeyCookie = request.cookies.get('hf_api_key')?.value;
-      if (hfApiKeyCookie) apiToken = hfApiKeyCookie;
-    }
-
-    if (!apiToken) {
-      const authHeader = request.headers.get('authorization');
-      if (authHeader?.startsWith('Bearer ')) apiToken = authHeader.slice(7);
-    }
-
-    if (!apiToken) {
-      return NextResponse.json(
-        { error: 'HuggingFace authentication required. Please connect your Hugging Face account to use AI generation.' },
-        { status: 401 }
-      );
-    }
-
-    const hf = new InferenceClient(apiToken);
-    const slideGenerationPrompt = buildSlidePrompt(prompt);
-
-    try {
-      console.log(`Attempting to use model: ${actualModel}`);
-
-      const modelId = actualModel.replace(/:hf-inference$/, '');
-
-      const response = await hf.textGeneration({
-        model: modelId,
-        inputs: slideGenerationPrompt,
-        parameters: {
-          max_new_tokens: 4000,
-          temperature: 0.5,
-          do_sample: true,
-          top_p: 0.92,
-          top_k: 50,
-          repetition_penalty: 1.15,
-          return_full_text: false,
-        },
-      });
-
-      const generatedText = response.generated_text;
-      console.log('Model response received, length:', generatedText.length);
-
-      let slides: Slide[] = [];
-      let presentationName = prompt.length > 50 ? prompt.substring(0, 47) + '...' : prompt;
-
-      try {
-        let cleanText = generatedText.trim();
-
-        // Remove prompt echo if present
-        const promptIndex = cleanText.indexOf(slideGenerationPrompt);
-        if (promptIndex !== -1) {
-          cleanText = cleanText.substring(promptIndex + slideGenerationPrompt.length).trim();
-        }
-
-        // Remove markdown code blocks
-        cleanText = cleanText.replace(/^```(?:json)?\s*\n?/i, '').replace(/\n?```\s*$/i, '');
-
-        // Try to parse as object with presentationName (new format)
-        let parsed: any = null;
-
-        // Strategy 1: Try full object parse { presentationName, slides }
-        const objMatch = cleanText.match(/\{[\s\S]*"presentationName"[\s\S]*"slides"[\s\S]*\}/);
-        if (objMatch) {
-          try {
-            parsed = JSON.parse(objMatch[0]);
-          } catch { /* fall through */ }
-        }
-
-        // Strategy 2: Find from first { to last }
-        if (!parsed) {
-          const firstBrace = cleanText.indexOf('{');
-          const lastBrace = cleanText.lastIndexOf('}');
-          if (firstBrace !== -1 && lastBrace !== -1 && lastBrace > firstBrace) {
-            const potentialJson = cleanText.substring(firstBrace, lastBrace + 1);
-            if (potentialJson.includes('"presentationName"') || potentialJson.includes('"slides"')) {
-              try {
-                parsed = JSON.parse(potentialJson);
-              } catch { /* fall through */ }
-            }
-          }
-        }
-
-        // Strategy 3: Find a JSON array (old format fallback)
-        if (!parsed) {
-          const arrayMatch = cleanText.match(/\[\s*\{[\s\S]*?"title"[\s\S]*?\}\s*\]/);
-          if (arrayMatch) {
-            const arr = JSON.parse(arrayMatch[0]);
-            parsed = { slides: Array.isArray(arr) ? arr : [arr] };
-          } else {
-            const firstBracket = cleanText.indexOf('[');
-            const lastBracket = cleanText.lastIndexOf(']');
-            if (firstBracket !== -1 && lastBracket !== -1 && lastBracket > firstBracket) {
-              const potentialJson = cleanText.substring(firstBracket, lastBracket + 1);
-              if (potentialJson.includes('"title"')) {
-                const arr = JSON.parse(potentialJson);
-                parsed = { slides: Array.isArray(arr) ? arr : [arr] };
-              }
-            }
-          }
-        }
-
-        if (!parsed) {
-          throw new Error('No valid JSON structure found in response');
-        }
-
-        // Extract presentationName
-        if (parsed.presentationName) {
-          presentationName = String(parsed.presentationName).trim();
-        }
-
-        // Extract slides array
-        const slidesArray = Array.isArray(parsed.slides) ? parsed.slides : (Array.isArray(parsed) ? parsed : []);
-        const totalSlides = slidesArray.length;
-
-        slides = slidesArray
-          .filter((slide: any) => slide && typeof slide === 'object' && slide.title)
-          .map((slide: any, index: number) => ({
-            id: `slide-${index + 1}`,
-            title: String(slide.title || `Slide ${index + 1}`).trim(),
-            subtitle: slide.subtitle ? String(slide.subtitle).trim() : undefined,
-            content: Array.isArray(slide.content)
-              ? slide.content.filter((c: any) => c && typeof c === 'string').map((c: string) => c.trim())
-              : slide.content ? [String(slide.content).trim()] : [],
-            notes: slide.notes ? String(slide.notes).trim() : '',
-            layout: normalizeLayout(slide.layout || '', index, totalSlides),
-            imageKeyword: slide.imageKeyword ? String(slide.imageKeyword).trim()
-              : slide.imageKeywords ? String(slide.imageKeywords).trim() : '',
-          }));
-
-        console.log(`Successfully parsed ${slides.length} slides from JSON`);
-      } catch (jsonError) {
-        console.error('JSON parsing failed:', jsonError);
-        console.log('Falling back to text parsing');
-        slides = parseTextToSlides(generatedText, prompt);
-      }
-
-      if (slides.length === 0) {
-        slides = createFallbackSlides(prompt);
-      }
-
-      // Fetch images for image_and_text slides
-      const slidesToFetchImages = slides
-        .map((slide, index) => ({
-          index,
-          keywords: slide.imageKeyword || '',
-          layout: slide.layout,
-        }))
-        .filter(item => item.layout === 'image_and_text' && item.keywords.trim() !== '');
-
-      if (slidesToFetchImages.length > 0) {
-        try {
-          const imageResults = await fetchImagesForSlides(slidesToFetchImages);
-          imageResults.forEach(({ index, result }) => {
-            if (slides[index]) {
-              slides[index].imageUrl = result.imageUrl;
-            }
-          });
-          console.log(`Successfully fetched ${imageResults.length} images`);
-        } catch (imageError) {
-          console.error('Error fetching images:', imageError);
-        }
-      }
-
-      return NextResponse.json({ presentationName, slides });
-
-    } catch (modelError: unknown) {
-      console.error('Model error:', modelError);
-
-      let errorMessage = 'Unknown model error';
-      let statusCode = 500;
-
-      if (modelError instanceof Error && modelError.message) {
-        if (modelError.message.includes('not supported for task') || modelError.message.includes('conversational')) {
-          errorMessage = `Model ${actualModel} does not support text generation with HF Inference.`;
-          statusCode = 400;
-        } else if (modelError.message.includes('Rate limit') || modelError.message.includes('quota')) {
-          errorMessage = 'HF Inference rate limit reached. Please try again in a moment.';
-          statusCode = 429;
-        } else if (modelError.message.includes('Authentication') || modelError.message.includes('Unauthorized')) {
-          errorMessage = 'Invalid Hugging Face API token. Please check your API key.';
-          statusCode = 401;
-        } else if (modelError.message.includes('Model') && (modelError.message.includes('not found') || modelError.message.includes('not available'))) {
-          errorMessage = `Model ${actualModel} not found on HF Inference.`;
-          statusCode = 404;
-        } else {
-          errorMessage = modelError.message;
-        }
-      }
-
-      if (statusCode >= 400 && statusCode < 500) {
-        return NextResponse.json({ error: errorMessage }, { status: statusCode });
-      }
-
-      const slides = createFallbackSlides(prompt);
-      return NextResponse.json({
-        presentationName: prompt.length > 50 ? prompt.substring(0, 47) + '...' : prompt,
-        slides,
-        warning: `Model generation failed: ${errorMessage}. Using fallback content.`
-      });
-    }
-
-  } catch (error) {
-    console.error('API error:', error);
-    return NextResponse.json({ error: 'Failed to generate slides' }, { status: 500 });
-  }
-}
-
-function parseTextToSlides(text: string, prompt: string): Slide[] {
-  const lines = text.split('\n').filter(line => line.trim());
-  const slides: Slide[] = [];
-
-  if (text.includes('Internal Server Error') || text.includes('error') || text.includes('Error')) {
-    return createFallbackSlides(prompt);
-  }
-
-  let currentSlide: Partial<Slide> = {};
-  let slideIndex = 1;
-
-  for (let i = 0; i < lines.length; i++) {
-    const trimmedLine = lines[i].trim();
-    if (trimmedLine.length < 2) continue;
-
-    const isTitleLine =
-      trimmedLine.startsWith('#') ||
-      trimmedLine.includes('Slide') ||
-      trimmedLine.includes('SLIDE') ||
-      trimmedLine.match(/^\d+\.?\s/) ||
-      (trimmedLine.length > 5 && trimmedLine.length < 60 && !trimmedLine.includes('.') && i < lines.length / 2);
-
-    if (isTitleLine) {
-      if (currentSlide.title) {
-        slides.push({
-          id: `slide-${slideIndex}`,
-          title: currentSlide.title,
-          content: currentSlide.content || ['Content for this slide'],
-          notes: currentSlide.notes || '',
-          layout: normalizeLayout('', slideIndex - 1, 0),
-        });
-        slideIndex++;
-      }
-
-      const title = trimmedLine
-        .replace(/^#+\s*/, '')
-        .replace(/slide\s*\d*:?\s*/i, '')
-        .replace(/^\d+\.?\s*/, '')
-        .trim();
-
-      currentSlide = { title: title || `Slide ${slideIndex}`, content: [] };
-    } else if (trimmedLine.match(/^[-•*○]/)) {
-      if (!currentSlide.content) currentSlide.content = [];
-      const bulletContent = trimmedLine.replace(/^[-•*○]\s*/, '').trim();
-      if (bulletContent) currentSlide.content.push(bulletContent);
-    } else if (currentSlide.title && trimmedLine.length > 10) {
-      if (!currentSlide.content) currentSlide.content = [];
-      currentSlide.content.push(trimmedLine);
-    }
-  }
-
-  if (currentSlide.title) {
-    slides.push({
-      id: `slide-${slideIndex}`,
-      title: currentSlide.title,
-      content: currentSlide.content || ['Content for this slide'],
-      notes: currentSlide.notes || '',
-      layout: normalizeLayout('', slideIndex - 1, 0),
-    });
-  }
-
-  if (slides.length === 0 || slides.every(slide => slide.content.length === 0)) {
-    return createFallbackSlides(prompt);
-  }
-
-  return slides;
-}
-
-function createFallbackSlides(prompt: string): Slide[] {
-  const title = prompt.length > 50 ? prompt.substring(0, 47) + '...' : prompt;
-
-  return [
-    { id: 'slide-1', title, subtitle: `A comprehensive overview of ${prompt.toLowerCase()}`, content: [], layout: 'title_subtitle', imageKeyword: '' },
-    { id: 'slide-2', title: 'Agenda', content: ['Background & Context', 'Key Concepts', 'Analysis & Insights', 'Practical Applications', 'Benefits & Impact'], layout: 'agenda', imageKeyword: '' },
-    { id: 'slide-3', title: 'Background & Context', content: [`Understanding the fundamentals of ${prompt.toLowerCase()}`, 'Historical context and current relevance', 'Why this topic matters today'], layout: 'title_and_text', imageKeyword: '' },
-    { id: 'slide-4', title: 'Key Concepts', content: ['Primary concepts and definitions', 'Core principles and frameworks', 'Essential components to understand'], layout: 'image_and_text', imageKeyword: `${prompt.toLowerCase()} concept diagram` },
-    { id: 'slide-5', title: 'Analysis & Insights', content: ['Current trends and patterns', 'Data-driven insights and findings', 'Expert opinions and research'], layout: 'title_and_text', imageKeyword: '' },
-    { id: 'slide-6', title: 'Practical Applications', content: ['Real-world use cases and examples', 'Best practices and recommendations', 'Common challenges and solutions'], layout: 'image_and_text', imageKeyword: `${prompt.toLowerCase()} practical application` },
-    { id: 'slide-7', title: 'Benefits & Impact', content: ['Expected benefits and positive outcomes', 'Measurable impact and results', 'Long-term advantages and value'], layout: 'title_and_text', imageKeyword: '' },
-    { id: 'slide-8', title: 'References', content: ['Industry reports and publications', 'Research papers and case studies'], layout: 'references', imageKeyword: '' },
-    { id: 'slide-9', title: 'Thank You', subtitle: 'Questions and discussion welcome', content: [], layout: 'thank_you', imageKeyword: '' },
-  ];
-}

app/api/presentations/route.ts

@@ -1,79 +0,0 @@
-/*
- * File: app/api/presentations/route.ts
- * Description: Main API endpoint for generating presentations using multiple AI providers
- * This endpoint orchestrates the presentation generation process by routing requests
- * to appropriate AI providers (Gemini, HuggingFace, etc.) based on the selected model.
- *
- * Features:
- * - Multi-provider support (Gemini, HuggingFace)
- * - Intelligent provider selection based on model name
- * - Integration with orchestrator library for generation logic
- * - Returns structured presentation data with metadata
- *
- * Method: POST
- * Input: { prompt: string, model?: string, provider?: Provider }
- * Output: { success: boolean, presentation: object, metadata: object }
- */
-
-import { NextRequest, NextResponse } from 'next/server';
-import { generatePresentation, type GenerationRequest, type Provider } from '@/lib/orchestrator';
-import { LLAMA_PRESENTATION_MODEL, LLAMA_PRESENTATION_PROVIDER, isAllowedPresentationModel } from '@/lib/ai-models';
-
-/**
- * POST handler for presentation generation
- * Routes requests to appropriate AI providers and returns generated content
- */
-export async function POST(request: NextRequest) {
-  try {
-    const body = await request.json();
-    const { prompt, model, provider }: { prompt: string; model?: string; provider?: Provider } = body;
-
-    if (!prompt) {
-      return NextResponse.json(
-        { error: 'Prompt is required' },
-        { status: 400 }
-      );
-    }
-
-    if (provider && provider !== LLAMA_PRESENTATION_PROVIDER) {
-      console.warn(`Ignoring unsupported provider "${provider}" and forcing ${LLAMA_PRESENTATION_PROVIDER}.`);
-    }
-
-    if (!isAllowedPresentationModel(model)) {
-      console.warn(`Ignoring unsupported presentation model "${model}" and forcing ${LLAMA_PRESENTATION_MODEL}.`);
-    }
-
-    const finalProvider: Provider = LLAMA_PRESENTATION_PROVIDER;
-
-    const generationRequest: GenerationRequest = {
-      prompt,
-      provider: finalProvider,
-      model: LLAMA_PRESENTATION_MODEL,
-    };
-
-    const presentation = await generatePresentation(generationRequest);
-
-    return NextResponse.json({
-      success: true,
-      presentation,
-      metadata: {
-        provider: finalProvider,
-        model: generationRequest.model,
-        timestamp: new Date().toISOString()
-      }
-    });
-
-  } catch (error) {
-    console.error('Error generating presentation:', error);
-
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-
-    return NextResponse.json(
-      {
-        error: 'Failed to generate presentation',
-        details: errorMessage
-      },
-      { status: 500 }
-    );
-  }
-}

app/api/upload-template/route.ts

@@ -1,141 +0,0 @@
-/**
- * PowerPoint Template Upload and Modification Endpoint
- *
- * Accepts a `.pptx` or `.ppt` file along with a user prompt and generates a
- * new AI-modified presentation that incorporates the requested changes while
- * preserving the structure of the original template.
- *
- * The uploaded file is converted to a Base64 string and attached to the
- * generation request as `templateContext`.  In the current implementation the
- * context is forwarded to the orchestrator for prompt engineering but the raw
- * binary is not parsed — full template-aware generation is a future enhancement.
- *
- * Accepted file types:
- *  - `application/vnd.openxmlformats-officedocument.presentationml.presentation` (.pptx)
- *  - `application/vnd.ms-powerpoint` (.ppt)
- *
- * Method: POST (multipart/form-data)
- * Form fields:
- *  - `file`  — The PowerPoint template file (required)
- *  - `prompt` — Instructions for how to modify the template (required)
- *  - `model`  — AI model slug to use (optional, defaults to provider default)
- */
-
-import { NextRequest, NextResponse } from 'next/server';
-import { generatePresentation, type GenerationRequest, type Provider } from '@/lib/orchestrator';
-import { LLAMA_PRESENTATION_MODEL, LLAMA_PRESENTATION_PROVIDER, isAllowedPresentationModel } from '@/lib/ai-models';
-
-/**
- * POST /api/upload-template
- *
- * Validates the uploaded file, determines the AI provider from the model slug,
- * builds an enhanced prompt that includes template-context instructions, and
- * delegates to the shared {@link generatePresentation} orchestrator.
- *
- * @param request - NextRequest containing `multipart/form-data` with `file`,
- *                  `prompt`, and optional `model` fields.
- * @returns 200 `{ success, presentation, metadata }` on success,
- *          400 on validation failures,
- *          500 on generation errors.
- */
-export async function POST(request: NextRequest) {
-  try {
-    // Parse the multipart form data from the request
-    const formData = await request.formData();
-    const file = formData.get('file') as File;
-    const prompt = formData.get('prompt') as string;
-    const model = formData.get('model') as string;
-
-    // Both the template file and a user prompt are required to proceed
-    if (!file || !prompt) {
-      return NextResponse.json(
-        { error: 'File and prompt are required' },
-        { status: 400 }
-      );
-    }
-
-    // Validate file type — only PowerPoint formats are accepted
-    const allowedTypes = [
-      'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
-      'application/vnd.ms-powerpoint'  // .ppt (legacy format)
-    ];
-
-    // Check both the MIME type and file extension for robust validation
-    if (!allowedTypes.includes(file.type) && !file.name.endsWith('.pptx') && !file.name.endsWith('.ppt')) {
-      return NextResponse.json(
-        { error: 'Invalid file type. Please upload a PowerPoint file (.pptx or .ppt)' },
-        { status: 400 }
-      );
-    }
-
-    // Convert file to base64 for processing
-    // The Base64 string is attached to the generation request for future
-    // template-parsing implementations
-    const arrayBuffer = await file.arrayBuffer();
-    const base64File = Buffer.from(arrayBuffer).toString('base64');
-
-    if (!isAllowedPresentationModel(model)) {
-      console.warn(`Ignoring unsupported presentation model "${model}" and forcing ${LLAMA_PRESENTATION_MODEL}.`);
-    }
-
-    const finalProvider: Provider = LLAMA_PRESENTATION_PROVIDER;
-
-    // Build an enhanced prompt that instructs the AI to act as a template editor
-    // rather than generating a presentation from scratch
-    const enhancedPrompt = `
-You are an expert presentation editor. I have uploaded a PowerPoint template and want you to modify it based on the following instructions:
-
-User Instructions: ${prompt}
-
-Please analyze the uploaded PowerPoint template and create a new presentation that incorporates the requested changes. The template contains the original structure and content that should be preserved where appropriate, but modified according to the user's specifications.
-
-Focus on:
-1. Maintaining the overall structure and layout of the original template
-2. Applying the requested changes (color schemes, content updates, new slides, etc.)
-3. Ensuring professional quality and consistency
-4. Preserving any important branding or design elements unless specifically asked to change them
-
-Generate a complete presentation that reflects both the original template's strengths and the requested modifications.
-`;
-
-    const generationRequest: GenerationRequest = {
-      prompt: enhancedPrompt,
-      provider: finalProvider,
-      model: LLAMA_PRESENTATION_MODEL,
-      // Add template context - in a real implementation, you'd parse the PowerPoint file
-      templateContext: {
-        fileName: file.name,
-        fileSize: file.size,
-        fileType: file.type,
-        base64Content: base64File  // Raw file bytes encoded as Base64
-      }
-    };
-
-    // Delegate to the shared generation orchestrator
-    const presentation = await generatePresentation(generationRequest);
-
-    return NextResponse.json({
-      success: true,
-      presentation,
-      metadata: {
-        provider: finalProvider,
-        model: generationRequest.model,
-        originalFile: file.name,          // Let the client display the source filename
-        timestamp: new Date().toISOString()
-      }
-    });
-
-  } catch (error) {
-    console.error('Error processing template:', error);
-
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-
-    return NextResponse.json(
-      {
-        error: 'Failed to process template',
-        details: errorMessage
-      },
-      { status: 500 }
-    );
-  }
-}

app/editor/page.tsx

@@ -16,7 +16,8 @@
 
 'use client';
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
 import GoogleSlidesEditor from '@/components/editor/GoogleSlidesEditor';
 
 /**
@@ -25,9 +26,24 @@ import GoogleSlidesEditor from '@/components/editor/GoogleSlidesEditor';
  * All the complex logic is handled within GoogleSlidesEditor
  */
 export default function EditorPage() {
-  return (
-    <GoogleSlidesEditor />
-  );
-}
+  const router = useRouter();
+  const [hasEditorAccess, setHasEditorAccess] = useState(false);
+
+  useEffect(() => {
+    const editorAccess = sessionStorage.getItem('editorAccess') === 'true';
+
+    if (!editorAccess) {
+      router.replace('/');
+      return;
+    }
 
+    setHasEditorAccess(true);
+  }, [router]);
+
+  if (!hasEditorAccess) {
+    return null;
+  }
+
+  return <GoogleSlidesEditor />;
+}
 

app/layout.tsx

@@ -92,8 +92,8 @@ const merriweather = Merriweather({
 
 // SEO and browser metadata configuration
 export const metadata: Metadata = {
-  title: "PowerPoint Generator",
-  description: "Generate PowerPoint presentations",
+  title: "Powerpoint.ai",
+  description: "Generate presentations with Powerpoint.ai",
 };
 
 import { ThemeProvider } from "@/components/ThemeProvider";

components/HFAuth.tsx

@@ -1,145 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
-
-interface OAuthResult {
-  accessToken: string;
-  userInfo: {
-    id: string;
-    name: string;
-    fullname?: string;
-    email: string;
-    avatarUrl?: string;
-  };
-}
-
-interface HFAuthProps {
-  onAuthSuccess: (result: OAuthResult) => void;
-  onAuthError: (error: string) => void;
-}
-
-export default function HFAuth({ onAuthSuccess, onAuthError }: HFAuthProps) {
-  const [isLoading, setIsLoading] = useState(true);
-  const [oauthResult, setOauthResult] = useState<OAuthResult | null>(null);
-
-  useEffect(() => {
-    const initializeAuth = async () => {
-      try {
-        // Check for existing OAuth result in localStorage
-        let stored = localStorage.getItem('hf_oauth');
-        if (stored) {
-          try {
-            const parsedResult = JSON.parse(stored);
-            setOauthResult(parsedResult);
-            onAuthSuccess(parsedResult);
-            setIsLoading(false);
-            return;
-          } catch {
-            localStorage.removeItem('hf_oauth');
-          }
-        }
-
-        // Handle OAuth redirect if present
-        const result = await oauthHandleRedirectIfPresent();
-        if (result) {
-          const oauthData: OAuthResult = {
-            accessToken: result.accessToken,
-            userInfo: result.userInfo as unknown as OAuthResult['userInfo']
-          };
-
-          setOauthResult(oauthData);
-          localStorage.setItem('hf_oauth', JSON.stringify(oauthData));
-          onAuthSuccess(oauthData);
-        }
-      } catch (error) {
-        console.error('OAuth initialization error:', error);
-        onAuthError('Failed to initialize authentication');
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    initializeAuth();
-  }, [onAuthSuccess, onAuthError]);
-
-  const handleSignIn = async () => {
-    try {
-      setIsLoading(true);
-      // Default scopes for reading user info
-      const scopes = 'read-repos read-billing';
-      const loginUrl = await oauthLoginUrl({ scopes });
-      window.location.href = loginUrl + '&prompt=consent';
-    } catch (error) {
-      console.error('Sign in error:', error);
-      onAuthError('Failed to initiate sign in');
-      setIsLoading(false);
-    }
-  };
-
-  const handleSignOut = () => {
-    localStorage.removeItem('hf_oauth');
-    setOauthResult(null);
-    // Redirect to clean URL without OAuth parameters
-    const cleanUrl = window.location.href.replace(/[?&]code=[^&]*/, '').replace(/[?&]state=[^&]*/, '');
-    window.location.href = cleanUrl;
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center justify-center p-4">
-        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-orange-600"></div>
-        <span className="ml-2 text-sm text-gray-600">Checking authentication...</span>
-      </div>
-    );
-  }
-
-  if (oauthResult) {
-    return (
-      <div className="flex items-center gap-3 p-3 bg-green-50 border border-green-200 rounded-lg">
-        <img
-          src={oauthResult.userInfo.avatarUrl || 'https://www.gravatar.com/avatar/0000?d=mp'}
-          alt={oauthResult.userInfo.name}
-          className="w-8 h-8 rounded-full"
-        />
-        <div className="flex-1">
-          <div className="text-sm font-medium text-green-800">
-            Welcome, {oauthResult.userInfo.fullname || oauthResult.userInfo.name}!
-          </div>
-          <div className="text-xs text-green-600">Signed in with Hugging Face</div>
-        </div>
-        <button
-          onClick={handleSignOut}
-          className="px-3 py-1 text-xs bg-green-600 text-white rounded hover:bg-green-700 transition-colors"
-        >
-          Sign Out
-        </button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="text-center p-6">
-      <div className="mb-4">
-        <h3 className="text-lg font-semibold text-gray-900 mb-2">Sign in with Hugging Face</h3>
-        <p className="text-sm text-gray-600 mb-4">
-          Connect your Hugging Face account to access AI-powered presentation generation
-        </p>
-      </div>
-
-      <button
-        onClick={handleSignIn}
-        className="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-yellow-400 to-orange-500 text-white font-medium rounded-lg hover:from-yellow-500 hover:to-orange-600 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:scale-105"
-      >
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
-        </svg>
-        Sign in with Hugging Face
-      </button>
-
-      <div className="mt-4 text-xs text-gray-500">
-        Secure OAuth authentication • Your data stays private
-      </div>
-    </div>
-  );
-}

components/InteractivePresenter.tsx

@@ -1,36 +0,0 @@
-"use client";
-import React, { useMemo, useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
-import { renderSlide, SlideSpec } from './slides/SlideFactory';
-
-export default function InteractivePresenter({ slides }: { slides: SlideSpec[] }) {
-  const [theme, setTheme] = useState<'dark'|'light'>('dark');
-  const content = useMemo(() => slides || [], [slides]);
-
-  return (
-    <div className="w-full grid grid-cols-1 lg:grid-cols-[1fr_340px] gap-4">
-      <div className="rounded-2xl overflow-hidden border border-gray-200 bg-white">
-        <Swiper className="w-full h-[70vh]">
-          {content.map((s) => (
-            <SwiperSlide key={s.id}>
-              <div className="w-full h-[70vh]">{renderSlide(s, theme)}</div>
-            </SwiperSlide>
-          ))}
-        </Swiper>
-      </div>
-      <aside className="bg-white border border-gray-200 rounded-2xl p-4 h-[70vh] overflow-auto">
-        <div className="flex items-center justify-between mb-3">
-          <div className="font-semibold">Editor</div>
-          <select className="border rounded px-2 py-1" value={theme} onChange={(e)=>setTheme(e.target.value as 'dark' | 'light')}>
-            <option value="dark">Dark</option>
-            <option value="light">Light</option>
-          </select>
-        </div>
-        <p className="text-sm text-gray-600">Live preview. Future: per-slide editing, regenerate, layout swap.</p>
-      </aside>
-    </div>
-  );
-}
-
-

components/auth/HuggingFaceLogin.tsx

@@ -1,263 +0,0 @@
-'use client';
-
-import React, { useState, useEffect, useCallback } from 'react';
-import { X, LogIn, LogOut, User } from 'lucide-react';
-import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
-
-interface OAuthResult {
-  accessToken: string;
-  accessTokenExpiresAt: Date;
-  userInfo: {
-    id: string;
-    name: string;
-    fullname: string;
-    email?: string;
-    avatarUrl: string;
-    isPro?: boolean;
-  };
-}
-
-interface HuggingFaceLoginProps {
-  onAuthChange?: (isAuthenticated: boolean) => void;
-  className?: string;
-  variant?: 'light' | 'dark';
-}
-
-export default function HuggingFaceLogin({ onAuthChange, className, variant = 'light' }: HuggingFaceLoginProps) {
-  const [isLoading, setIsLoading] = useState(true);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [oauthResult, setOauthResult] = useState<OAuthResult | null>(null);
-  const [showUserMenu, setShowUserMenu] = useState(false);
-
-  // Handle OAuth callback and check for existing session
-  useEffect(() => {
-    const initializeAuth = async () => {
-      try {
-        // First, check for existing OAuth result in localStorage
-        const stored = localStorage.getItem('hf_oauth');
-        if (stored) {
-          try {
-            const parsedResult = JSON.parse(stored) as OAuthResult;
-            // Check if token is still valid (not expired)
-            const expiresAt = new Date(parsedResult.accessTokenExpiresAt);
-            if (expiresAt > new Date()) {
-              setOauthResult(parsedResult);
-              setIsAuthenticated(true);
-              // Also store the access token for API usage
-              localStorage.setItem('hf_api_key', parsedResult.accessToken);
-              onAuthChange?.(true);
-              setIsLoading(false);
-              return;
-            } else {
-              // Token expired, clear it
-              localStorage.removeItem('hf_oauth');
-              localStorage.removeItem('hf_api_key');
-            }
-          } catch {
-            localStorage.removeItem('hf_oauth');
-            localStorage.removeItem('hf_api_key');
-          }
-        }
-
-        // Handle OAuth redirect if present (user just came back from HuggingFace)
-        const result = await oauthHandleRedirectIfPresent();
-        if (result) {
-          // Cast userInfo to access all properties (HF types may be incomplete)
-          const userInfo = result.userInfo as any;
-          const oauthData: OAuthResult = {
-            accessToken: result.accessToken,
-            accessTokenExpiresAt: result.accessTokenExpiresAt,
-            userInfo: {
-              id: userInfo.sub || userInfo.id || userInfo.name,
-              name: userInfo.preferred_username || userInfo.name,
-              fullname: userInfo.name || userInfo.fullname || '',
-              email: userInfo.email,
-              avatarUrl: userInfo.picture || userInfo.avatarUrl || '',
-              isPro: userInfo.isPro || false,
-            }
-          };
-
-          setOauthResult(oauthData);
-          setIsAuthenticated(true);
-
-          // Store in localStorage for persistence
-          localStorage.setItem('hf_oauth', JSON.stringify(oauthData));
-          localStorage.setItem('hf_api_key', oauthData.accessToken);
-
-          onAuthChange?.(true);
-
-          // Clean up URL by removing OAuth parameters
-          const cleanUrl = window.location.origin + window.location.pathname;
-          window.history.replaceState({}, document.title, cleanUrl);
-        }
-      } catch (error) {
-        console.error('OAuth initialization error:', error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    initializeAuth();
-  }, [onAuthChange]);
-
-  const handleSignIn = useCallback(async () => {
-    try {
-      setIsLoading(true);
-
-      const res = await fetch('/api/auth/client-id');
-      const { clientId } = await res.json();
-      if (!clientId) {
-        throw new Error('HuggingFace Client ID not configured');
-      }
-
-      // Request scopes needed for inference API access
-      // 'inference-api' scope allows using the user's credits
-      const scopes = 'openid profile inference-api';
-      const loginUrl = await oauthLoginUrl({
-        clientId,
-        scopes,
-        redirectUrl: `${window.location.origin}/`,
-      });
-      // Redirect to HuggingFace OAuth page
-      window.location.href = loginUrl;
-    } catch (error) {
-      console.error('Sign in error:', error);
-      alert('Failed to initiate sign in. Please try again.');
-      setIsLoading(false);
-    }
-  }, []);
-
-  const handleSignOut = useCallback(() => {
-    localStorage.removeItem('hf_oauth');
-    localStorage.removeItem('hf_api_key');
-    setOauthResult(null);
-    setIsAuthenticated(false);
-    setShowUserMenu(false);
-    onAuthChange?.(false);
-  }, [onAuthChange]);
-
-  // Loading state
-  if (isLoading) {
-    return (
-      <button
-        disabled
-        className={`flex items-center gap-2 px-3 py-1.5 text-sm border rounded-lg opacity-50 cursor-not-allowed
-          ${variant === 'dark' ? 'border-white/10 text-white/50' : 'border-gray-300 text-gray-500'} ${className || ''}`}
-      >
-        <div className={`animate-spin h-4 w-4 border-2 border-t-transparent rounded-full ${variant === 'dark' ? 'border-white/50' : 'border-gray-400'}`} />
-        <span className="hidden sm:inline">Loading...</span>
-      </button>
-    );
-  }
-
-  // Authenticated state - show user info
-  if (isAuthenticated && oauthResult) {
-    return (
-      <div className={`relative ${className || ''}`}>
-        <button
-          onClick={() => setShowUserMenu(!showUserMenu)}
-          className={`flex items-center gap-2 px-3 py-1.5 text-sm border rounded-lg transition-colors
-            ${variant === 'dark'
-              ? 'border-green-500/30 bg-green-500/10 hover:bg-green-500/20 text-green-300'
-              : 'border-green-300 bg-green-50 hover:bg-green-100 text-green-700'
-            }`}
-          title="Signed in with Hugging Face"
-        >
-          {oauthResult.userInfo.avatarUrl ? (
-            <img
-              src={oauthResult.userInfo.avatarUrl}
-              alt={oauthResult.userInfo.name}
-              className="w-5 h-5 rounded-full"
-            />
-          ) : (
-            <User className={`w-4 h-4 ${variant === 'dark' ? 'text-green-400' : 'text-green-600'}`} />
-          )}
-          <span className="hidden sm:inline font-medium">
-            {oauthResult.userInfo.name}
-          </span>
-          {oauthResult.userInfo.isPro && (
-            <span className="text-xs bg-gradient-to-r from-yellow-400 to-orange-500 text-white px-1.5 py-0.5 rounded-full font-medium">
-              PRO
-            </span>
-          )}
-        </button>
-
-        {/* Dropdown menu */}
-        {showUserMenu && (
-          <>
-            {/* Backdrop */}
-            <div
-              className="fixed inset-0 z-[1999]"
-              onClick={() => setShowUserMenu(false)}
-            />
-
-            {/* Menu */}
-            <div className="absolute right-0 top-full mt-2 w-64 bg-white rounded-lg shadow-xl border border-gray-200 z-[2000] text-gray-900 text-left">
-              <div className="p-3 border-b">
-                <div className="flex items-center gap-3">
-                  {oauthResult.userInfo.avatarUrl ? (
-                    <img
-                      src={oauthResult.userInfo.avatarUrl}
-                      alt={oauthResult.userInfo.name}
-                      className="w-10 h-10 rounded-full"
-                    />
-                  ) : (
-                    <div className="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
-                      <User className="w-6 h-6 text-gray-500" />
-                    </div>
-                  )}
-                  <div>
-                    <div className="font-medium text-gray-900">
-                      {oauthResult.userInfo.fullname || oauthResult.userInfo.name}
-                    </div>
-                    <div className="text-sm text-gray-500">
-                      @{oauthResult.userInfo.name}
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              <div className="p-2">
-                <div className="px-3 py-2 text-xs text-gray-500">
-                  <p>✓ Connected to HuggingFace</p>
-                  <p className="mt-1">Your inference credits will be used when generating with HF models.</p>
-                </div>
-
-                <button
-                  onClick={handleSignOut}
-                  className="w-full flex items-center gap-2 px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded transition-colors"
-                >
-                  <LogOut className="w-4 h-4" />
-                  Sign Out
-                </button>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-    );
-  }
-
-  // Not authenticated - show sign in button
-  return (
-    <button
-      onClick={handleSignIn}
-      className={`flex items-center gap-2 px-3 py-1.5 text-sm border rounded-lg transition-colors
-        ${variant === 'dark'
-          ? 'border-white/20 hover:bg-white/10 text-white hover:border-white/40'
-          : 'border-gray-300 hover:bg-gray-50 hover:border-orange-400 hover:bg-orange-50 text-gray-700'
-        } ${className || ''}`}
-      title="Sign in with Hugging Face"
-    >
-      <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">Sign in with HF</span>
-      <LogIn className="w-3 h-3" />
-    </button>
-  );
-}

components/editor/GoogleSlidesEditor.tsx

@@ -24,7 +24,7 @@ import { getTemplateById, LayoutType } from '@/data/templates';
 import type { ThemeName } from '@/lib/theme-system';
 
 // Shared types, themes, and layout helpers
-import type { TextElement, ImageElement, ShapeElement, ShapeType, EditorElement, SlideModel, AlignmentGuide } from '@/lib/editor-types';
+import type { TextElement, ImageElement, ShapeElement, EditorElement, SlideModel, AlignmentGuide } from '@/lib/editor-types';
 import { themes, TEMPLATE_THEMES } from '@/lib/editor-themes';
 import { createId, withinBounds, getWorkshopLayoutBackground, createLayoutElements } from '@/lib/layout-templates';
 import { useSlideHistory } from '@/hooks/useSlideHistory';
@@ -54,8 +54,6 @@ export default function GoogleSlidesEditor() {
   const [zoom, setZoom] = useState(1);  // Canvas zoom level (0.5 to 2)
 
   // MENU/MODAL STATE
-  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
   const [showUnsplashSearch, setShowUnsplashSearch] = useState(false);
@@ -521,69 +519,11 @@ export default function GoogleSlidesEditor() {
     setSelectedId,
   });
 
-  // PDF/PPTX export via useExport hook
-  const { exportToPDF, exportToPPTX } = useExport({
-    slideRef, slides, slideSpecs, currentTheme, currentSlideIndex, zoom,
-    selectedId, isEditingTextId, presentationTitle,
-    setCurrentSlideIndex, setZoom, setSelectedId, setIsEditingTextId,
+  // PPTX export via useExport hook
+  const { exportToPPTX } = useExport({
+    slideRef, slides, slideSpecs, currentTheme, presentationTitle,
   });
 
-  // Apply layout to current slide
-  const applyLayout = (layout: string) => {
-    setSlides(prev => {
-      const copy = [...prev];
-      const newElements = createLayoutElements(layout, currentTheme);
-
-      copy[currentSlideIndex] = {
-        ...copy[currentSlideIndex],
-        elements: newElements,
-        layout: layout, // Store the layout for background styling
-      };
-      return copy;
-    });
-    saveToHistory(slides);
-  };
-
-  // Apply theme to all slides
-  const applyTheme = (theme: keyof typeof themes) => {
-    setCurrentTheme(theme);
-    setSlides(prev =>
-      prev.map(slide => ({
-        ...slide,
-        elements: slide.elements.map(el => {
-          if (el.type === 'text') {
-            const isHeading = (el as TextElement).fontSize >= 32;
-            const fontFamily = isHeading ? (themes[theme].headingFont || 'Arial') : (themes[theme].bodyFont || 'Arial');
-            const color = isHeading ? themes[theme].titleColor : themes[theme].textColor;
-            return { ...el, color, fontFamily };
-          }
-          return el;
-        }),
-      }))
-    );
-
-    // When switching to a template theme and slideSpecs is empty, create specs from existing slides
-    if (TEMPLATE_THEMES.has(theme) && slideSpecs.length === 0 && slides.length > 0) {
-      const specs: SlideSpec[] = slides.map((slide, index) => {
-        const textElements = slide.elements.filter(e => e.type === 'text') as TextElement[];
-        const titleEl = textElements.find(e => e.fontSize >= 32);
-        const bodyEls = textElements.filter(e => e.fontSize < 32);
-        const imageEls = slide.elements.filter(e => e.type === 'image');
-        const hasImage = imageEls.length > 0;
-        return {
-          id: `slide-${index + 1}`,
-          templateId: theme,
-          layout: (index === 0 ? 'title_subtitle' : (hasImage ? 'image_and_text' : 'title_and_text')) as LayoutType,
-          title: titleEl?.text || `Slide ${index + 1}`,
-          subtitle: index === 0 && bodyEls.length > 0 ? bodyEls[0].text : undefined,
-          body: index === 0 ? undefined : bodyEls.map(e => ({ text: e.text })),
-          imageUrl: hasImage ? (imageEls[0] as any).src : undefined,
-        };
-      });
-      setSlideSpecs(specs);
-    }
-  };
-
   // AI Text Editing - returns the edited text for the dialog
   const handleAIEdit = async (action: 'refine' | 'change' | 'expand' | 'regenerate' | 'shorten'): Promise<string> => {
     const selectedElement = currentSlide.elements.find(e => e.id === selectedId);
@@ -602,10 +542,10 @@ export default function GoogleSlidesEditor() {
         'Content-Type': 'application/json',
       };
 
-      // Get the HF API key from localStorage (set by HuggingFaceLogin component)
+      // Get the signed-in user's HF token if available
       const hfApiKey = localStorage.getItem('hf_api_key');
       if (hfApiKey) {
-        // Use x-hf-token header - this is the user's HF API key which will deduct their credits
+        // Use x-hf-token so the request is billed against the user's HF credits
         headers['x-hf-token'] = hfApiKey;
       }
 
@@ -708,31 +648,6 @@ export default function GoogleSlidesEditor() {
     img.src = url;
   };
 
-  // Add shape element
-  const addShape = (shapeType: ShapeType = 'rectangle') => {
-    const newId = createId();
-    setSlides(prev => {
-      const copy = [...prev];
-      const el: ShapeElement = {
-        id: newId,
-        type: 'shape',
-        shapeType: shapeType,
-        x: 300,
-        y: 150,
-        width: shapeType === 'line' ? 200 : 150,
-        height: shapeType === 'line' ? 4 : 150,
-        backgroundColor: '#3b82f6',
-        borderColor: '#2563eb',
-        borderWidth: 2,
-        opacity: 1,
-      };
-      copy[currentSlideIndex] = { ...copy[currentSlideIndex], elements: [...copy[currentSlideIndex].elements, el] };
-      return copy;
-    });
-    setSelectedId(newId);
-    saveToHistory(slides);
-  };
-
   // Delete element (text, image, etc.)
   const deleteElement = (id: string) => {
     setSlides(prev => {
@@ -1435,42 +1350,13 @@ export default function GoogleSlidesEditor() {
             placeholder="Enter presentation title"
           />
           <div className="ml-auto flex items-center gap-3">
-            {/* Export Button */}
-            <div className="relative">
-              <button
-                onClick={() => setShowExportMenu(!showExportMenu)}
-                className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
-              >
-                <FiDownload className="w-4 h-4" />
-                <span>Export</span>
-              </button>
-              {showExportMenu && (
-                <>
-                  {/* Backdrop */}
-                  <div
-                    className="fixed inset-0 z-[1999]"
-                    onClick={() => setShowExportMenu(false)}
-                  />
-                  {/* Dropdown */}
-                  <div className="absolute right-0 top-full mt-2 w-48 bg-white rounded-lg shadow-xl border border-gray-200 z-[2000] py-1">
-                    <button
-                      onClick={() => { setShowExportMenu(false); exportToPDF(); }}
-                      className="w-full flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
-                    >
-                      <span className="text-red-500">📄</span>
-                      Export as PDF
-                    </button>
-                    <button
-                      onClick={() => { setShowExportMenu(false); exportToPPTX(); }}
-                      className="w-full flex items-center gap-3 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition-colors"
-                    >
-                      <span className="text-orange-500">📊</span>
-                      Export as PPTX
-                    </button>
-                  </div>
-                </>
-              )}
-            </div>
+            <button
+              onClick={exportToPPTX}
+              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
+            >
+              <FiDownload className="w-4 h-4" />
+              <span>Export PPTX</span>
+            </button>
             {/* Profile Picture */}
             {avatarUrl ? (
               <img
@@ -1768,3 +1654,4 @@ export default function GoogleSlidesEditor() {
     </div >
   );
 }
+

components/editor/GoogleSlidesMenubar.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-
-export default function GoogleSlidesMenubar() {
-    const menus = ['File', 'Edit', 'View', 'Insert', 'Format', 'Arrange', 'Tools', 'Extensions', 'Help'];
-
-    return (
-        <div className="flex items-center gap-1 px-2 text-[13px] text-[#202124] select-none">
-            {menus.map((menu) => (
-                <button
-                    key={menu}
-                    className="px-2 py-0.5 rounded-[4px] hover:bg-[#f1f3f4] transition-colors"
-                >
-                    {menu}
-                </button>
-            ))}
-            <div className="ml-4 text-[12px] text-[#5f6368] hover:underline cursor-pointer">
-                Last edit was seconds ago
-            </div>
-        </div>
-    );
-}

components/editor/GoogleSlidesToolbar.tsx

@@ -1,373 +0,0 @@
-import React, { useState } from 'react';
-import {
-    Undo2, Redo2, Printer, PaintRoller, MousePointer2, Type, Image as ImageIcon,
-    Minus, Plus, Bold, Italic, Underline, Link, MessageSquarePlus,
-    AlignLeft, AlignCenter, AlignRight, AlignJustify, List, ListOrdered,
-    Indent, Outdent, Baseline, Highlighter, MoreHorizontal, CheckSquare
-} from 'lucide-react';
-
-interface GoogleSlidesToolbarProps {
-    handleUndo: () => void;
-    handleRedo: () => void;
-    historyIndex: number;
-    historyLength: number;
-    zoom: number;
-    setZoom: (fn: (z: number) => number) => void;
-    addText: () => void;
-    addImage: () => void;
-    fileInputRef: React.RefObject<HTMLInputElement | null>;
-    onFileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    selectedId: string | null;
-    selectedElement: any;
-    updateElement: (id: string, props: any) => void;
-    fonts: string[];
-    applyLayout: (layout: string) => void;
-    currentTheme: string;
-    applyTheme: (theme: string) => void;
-    themes: any;
-    deleteElement: (id: string) => void;
-    showAIMenu: boolean;
-    setShowAIMenu: (show: boolean) => void;
-    isAIEditing: boolean;
-    handleAIEdit: (action: string | 'dialog') => void;
-    showExportMenu: boolean;
-    setShowExportMenu: (show: boolean) => void;
-    exportToPDF: () => void;
-    exportToPPTX: () => void;
-}
-
-export default function GoogleSlidesToolbar(props: GoogleSlidesToolbarProps) {
-    const {
-        handleUndo, handleRedo, historyIndex, historyLength,
-        zoom, setZoom, addText, addImage, fileInputRef, onFileChange,
-        selectedId, selectedElement, updateElement, fonts,
-        applyLayout, currentTheme, applyTheme, themes,
-        showAIMenu, setShowAIMenu, isAIEditing, handleAIEdit,
-        showExportMenu, setShowExportMenu, exportToPDF, exportToPPTX
-    } = props;
-
-    const [showThemeMenu, setShowThemeMenu] = useState(false);
-
-    const textEl = selectedElement?.type === 'text' ? selectedElement : null;
-    const isTextSelected = !!textEl;
-
-    const Separator = () => <div className="w-px h-5 bg-gray-300 mx-1" />;
-
-    const IconButton = ({
-        children, title, onClick, disabled, active
-    }: {
-        children: React.ReactNode, title: string, onClick?: () => void, disabled?: boolean, active?: boolean
-    }) => (
-        <button
-            title={title}
-            onClick={onClick}
-            onMouseDown={(e) => e.preventDefault()}
-            disabled={disabled}
-            className={`p-1 rounded-[4px] hover:bg-[#f1f3f4] disabled:opacity-30 disabled:hover:bg-transparent transition-colors ${active ? 'bg-[#e8f0fe] text-[#1a73e8]' : 'text-[#444746]'}`}
-        >
-            {children}
-        </button>
-    );
-
-    return (
-        <div className="w-full bg-[#f9fbfd] rounded-full mx-2 my-1 px-4 py-1.5 flex items-center gap-1 overflow-x-auto scrollbar-hide shadow-sm border border-[#e1e3e1]">
-            {/* History */}
-            <IconButton title="Undo (Ctrl+Z)" onClick={handleUndo} disabled={historyIndex <= 0}>
-                <Undo2 size={16} />
-            </IconButton>
-            <IconButton title="Redo (Ctrl+Y)" onClick={handleRedo} disabled={historyIndex >= historyLength - 1}>
-                <Redo2 size={16} />
-            </IconButton>
-            <IconButton title="Print">
-                <Printer size={16} />
-            </IconButton>
-            <IconButton title="Paint format">
-                <PaintRoller size={16} />
-            </IconButton>
-
-            <Separator />
-
-            {/* Zoom */}
-            <div className="flex items-center gap-1 px-1 hover:bg-[#f1f3f4] rounded-[4px] cursor-pointer" title="Zoom">
-                <span className="text-[13px] font-medium text-[#444746]">{Math.round(zoom * 100)}%</span>
-                <button onClick={() => setZoom(z => Math.max(0.5, z - 0.1))} className="p-0.5"><Minus size={10} /></button>
-                <button onClick={() => setZoom(z => Math.min(2, z + 0.1))} className="p-0.5"><Plus size={10} /></button>
-            </div>
-
-            <Separator />
-
-            {/* Tools */}
-            <IconButton title="Select" active>
-                <MousePointer2 size={16} />
-            </IconButton>
-            <IconButton title="Text box" onClick={addText}>
-                <div className="border border-[#444746] rounded-[2px] px-0.5">
-                    <Type size={14} />
-                </div>
-            </IconButton>
-            <IconButton title="Insert image" onClick={addImage}>
-                <ImageIcon size={16} />
-            </IconButton>
-            <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={onFileChange} />
-
-            <IconButton title="Line">
-                <Minus size={16} className="rotate-45" />
-            </IconButton>
-
-            <Separator />
-
-            {/* Font Controls */}
-            <select
-                value={textEl?.fontFamily || 'Arial'}
-                onChange={(e) => selectedId && updateElement(selectedId, { fontFamily: e.target.value })}
-                disabled={!isTextSelected}
-                className="h-7 px-2 text-[13px] bg-transparent hover:bg-[#f1f3f4] rounded-[4px] border-none focus:ring-0 cursor-pointer disabled:opacity-50 max-w-[100px]"
-            >
-                {fonts.map(font => (
-                    <option key={font} value={font}>{font}</option>
-                ))}
-            </select>
-
-            <div className="w-px h-4 bg-gray-300 mx-0.5" />
-
-            <div className="flex items-center">
-                <button
-                    className="p-1 hover:bg-[#f1f3f4] rounded-[4px] disabled:opacity-30"
-                    disabled={!isTextSelected}
-                    onClick={() => selectedId && updateElement(selectedId, { fontSize: (textEl?.fontSize || 24) - 1 })}
-                >
-                    <Minus size={12} />
-                </button>
-                <input
-                    type="text"
-                    value={textEl?.fontSize || 24}
-                    onChange={(e) => selectedId && updateElement(selectedId, { fontSize: parseInt(e.target.value) || 24 })}
-                    disabled={!isTextSelected}
-                    className="w-8 text-center text-[13px] bg-transparent border border-transparent hover:border-gray-300 rounded-[2px] focus:border-blue-500 outline-none"
-                />
-                <button
-                    className="p-1 hover:bg-[#f1f3f4] rounded-[4px] disabled:opacity-30"
-                    disabled={!isTextSelected}
-                    onClick={() => selectedId && updateElement(selectedId, { fontSize: (textEl?.fontSize || 24) + 1 })}
-                >
-                    <Plus size={12} />
-                </button>
-            </div>
-
-            <Separator />
-
-            <IconButton
-                title="Bold (Ctrl+B)"
-                onClick={() => selectedId && updateElement(selectedId, { fontWeight: textEl?.fontWeight === 'bold' ? 'normal' : 'bold' })}
-                disabled={!isTextSelected}
-                active={textEl?.fontWeight === 'bold'}
-            >
-                <Bold size={16} />
-            </IconButton>
-            <IconButton
-                title="Italic (Ctrl+I)"
-                onClick={() => selectedId && updateElement(selectedId, { fontStyle: textEl?.fontStyle === 'italic' ? 'normal' : 'italic' })}
-                disabled={!isTextSelected}
-                active={textEl?.fontStyle === 'italic'}
-            >
-                <Italic size={16} />
-            </IconButton>
-            <IconButton
-                title="Underline (Ctrl+U)"
-                onClick={() => selectedId && updateElement(selectedId, { textDecoration: textEl?.textDecoration === 'underline' ? 'none' : 'underline' })}
-                disabled={!isTextSelected}
-                active={textEl?.textDecoration === 'underline'}
-            >
-                <Underline size={16} />
-            </IconButton>
-
-            <div className="flex items-center gap-1">
-                <IconButton title="Text color" disabled={!isTextSelected}>
-                    <div className="flex flex-col items-center">
-                        <Baseline size={14} />
-                        <div className="w-3 h-1 mt-0.5" style={{ backgroundColor: textEl?.color || '#000000' }} />
-                    </div>
-                    <input
-                        type="color"
-                        value={textEl?.color || '#000000'}
-                        onChange={(e) => selectedId && updateElement(selectedId, { color: e.target.value })}
-                        className="absolute inset-0 opacity-0 w-full h-full cursor-pointer"
-                        disabled={!isTextSelected}
-                    />
-                </IconButton>
-                <IconButton title="Highlight color" disabled={!isTextSelected}>
-                    <div className="flex flex-col items-center">
-                        <Highlighter size={14} />
-                        <div className="w-3 h-1 mt-0.5 bg-transparent border border-gray-300" />
-                    </div>
-                </IconButton>
-            </div>
-
-            <Separator />
-
-            <IconButton title="Insert link" disabled={!isTextSelected}>
-                <Link size={16} />
-            </IconButton>
-            <IconButton title="Add comment">
-                <MessageSquarePlus size={16} />
-            </IconButton>
-
-            {/* AI Edit */}
-            <div className="relative">
-                <IconButton
-                    title="AI Edit"
-                    disabled={!isTextSelected && !selectedId}
-                    onClick={() => setShowAIMenu(!showAIMenu)}
-                    active={showAIMenu}
-                >
-                    <div className="flex items-center gap-1">
-                        {isAIEditing ? (
-                            <div className="animate-spin h-3 w-3 border-2 border-blue-600 border-t-transparent rounded-full" />
-                        ) : (
-                            <span className="text-[10px]">✨</span>
-                        )}
-                        <span className="text-[11px] font-medium">AI</span>
-                    </div>
-                </IconButton>
-                {showAIMenu && (
-                    <div className="absolute top-full left-0 mt-1 bg-white border rounded shadow-lg z-50 min-w-[160px]">
-                        <button onClick={() => handleAIEdit('refine')} className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100">✨ Refine text</button>
-                        <button onClick={() => handleAIEdit('change')} className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100">🔄 Change content</button>
-                        <button onClick={() => handleAIEdit('expand')} className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100">📝 Make it longer</button>
-                        <button onClick={() => handleAIEdit('dialog')} className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100 border-t">💬 Open AI Chat</button>
-                    </div>
-                )}
-            </div>
-
-            {/* Export */}
-            <div className="relative">
-                <IconButton
-                    title="Export"
-                    onClick={() => setShowExportMenu(!showExportMenu)}
-                    active={showExportMenu}
-                >
-                    <div className="flex items-center gap-1">
-                        <Printer size={14} />
-                        <span className="text-[11px] font-medium">Export</span>
-                    </div>
-                </IconButton>
-                {showExportMenu && (
-                    <div className="absolute top-full left-0 mt-1 bg-white border rounded shadow-lg z-50 min-w-[120px]">
-                        <button onClick={() => { exportToPDF(); setShowExportMenu(false); }} className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100">PDF Document</button>
-                        <button onClick={() => { exportToPPTX(); setShowExportMenu(false); }} className="w-full px-4 py-2 text-left text-sm hover:bg-gray-100">PowerPoint (.pptx)</button>
-                    </div>
-                )}
-            </div>
-
-            <Separator />
-
-            <IconButton
-                title="Align"
-                disabled={!isTextSelected}
-                onClick={() => {
-                    const nextAlign = textEl?.align === 'left' ? 'center' : textEl?.align === 'center' ? 'right' : 'left';
-                    selectedId && updateElement(selectedId, { align: nextAlign });
-                }}
-            >
-                {textEl?.align === 'center' ? <AlignCenter size={16} /> : textEl?.align === 'right' ? <AlignRight size={16} /> : <AlignLeft size={16} />}
-            </IconButton>
-
-            <IconButton title="Line & paragraph spacing" disabled={!isTextSelected}>
-                <MoreHorizontal size={16} />
-            </IconButton>
-
-            <IconButton title="Checklist" disabled={!isTextSelected}>
-                <CheckSquare size={16} />
-            </IconButton>
-
-            <IconButton title="Bulleted list" disabled={!isTextSelected}>
-                <List size={16} />
-            </IconButton>
-
-            <IconButton title="Numbered list" disabled={!isTextSelected}>
-                <ListOrdered size={16} />
-            </IconButton>
-
-            <IconButton title="Decrease indent" disabled={!isTextSelected}>
-                <Outdent size={16} />
-            </IconButton>
-
-            <IconButton title="Increase indent" disabled={!isTextSelected}>
-                <Indent size={16} />
-            </IconButton>
-
-            <IconButton title="Clear formatting" disabled={!isTextSelected}>
-                <div className="relative">
-                    <Type size={14} />
-                    <div className="absolute -bottom-1 -right-1 text-[10px]">\</div>
-                </div>
-            </IconButton>
-
-            <Separator />
-
-            <button className="px-2 py-1 text-[13px] hover:bg-[#f1f3f4] rounded-[4px] text-[#444746]">Background</button>
-            <button className="px-2 py-1 text-[13px] hover:bg-[#f1f3f4] rounded-[4px] text-[#444746]">Layout</button>
-
-            <div className="relative">
-                <button
-                    onClick={() => setShowThemeMenu(!showThemeMenu)}
-                    className={`px-2 py-1 text-[13px] hover:bg-[#f1f3f4] rounded-[4px] text-[#444746] ${showThemeMenu ? 'bg-[#e8f0fe] text-[#1a73e8]' : ''}`}
-                >
-                    Theme
-                </button>
-                {showThemeMenu && (
-                    <div className="absolute top-full left-0 mt-1 bg-white border rounded shadow-lg z-50 min-w-[200px] max-h-[400px] overflow-y-auto p-2">
-                        <div className="text-xs font-semibold text-gray-500 mb-1 px-2">Basic</div>
-                        <button onClick={() => { applyTheme('white'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded bg-white"></div> White
-                        </button>
-                        <button onClick={() => { applyTheme('workshop'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded bg-[#EFE8DF]"></div> Workshop
-                        </button>
-
-                        <div className="text-xs font-semibold text-gray-500 mt-2 mb-1 px-2">Gradients</div>
-                        <button onClick={() => { applyTheme('oceanBreeze'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded" style={{ background: 'linear-gradient(135deg, #00B4DB 0%, #0083B0 100%)' }}></div> Ocean Breeze
-                        </button>
-                        <button onClick={() => { applyTheme('sunsetGlow'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded" style={{ background: 'linear-gradient(135deg, #FF512F 0%, #DD2476 100%)' }}></div> Sunset Glow
-                        </button>
-                        <button onClick={() => { applyTheme('forestMist'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded" style={{ background: 'linear-gradient(135deg, #134E5E 0%, #71B280 100%)' }}></div> Forest Mist
-                        </button>
-                        <button onClick={() => { applyTheme('midnightBlue'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded" style={{ background: 'linear-gradient(to bottom, #0f2027, #203a43, #2c5364)' }}></div> Midnight Blue
-                        </button>
-
-                        <div className="text-xs font-semibold text-gray-500 mt-2 mb-1 px-2">Patterns</div>
-                        <button onClick={() => { applyTheme('geometricDark'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded bg-[#232526]"></div> Geometric Dark
-                        </button>
-                        <button onClick={() => { applyTheme('stripedProfessional'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded bg-white"></div> Striped Professional
-                        </button>
-                        <button onClick={() => { applyTheme('dotGrid'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded bg-[#f0f2f5]"></div> Dot Grid
-                        </button>
-
-                        <div className="text-xs font-semibold text-gray-500 mt-2 mb-1 px-2">Images</div>
-                        <button onClick={() => { applyTheme('corporateCity'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded bg-gray-800"></div> Corporate City
-                        </button>
-                        <button onClick={() => { applyTheme('techInnovation'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded bg-blue-900"></div> Tech Innovation
-                        </button>
-                        <button onClick={() => { applyTheme('natureSerene'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded bg-green-700"></div> Nature Serene
-                        </button>
-                        <button onClick={() => { applyTheme('minimalistConcrete'); setShowThemeMenu(false); }} className="w-full px-2 py-1.5 text-left text-sm hover:bg-gray-100 rounded flex items-center gap-2">
-                            <div className="w-4 h-4 border rounded bg-gray-200"></div> Minimalist Concrete
-                        </button>
-                    </div>
-                )}
-            </div>
-            <button className="px-2 py-1 text-[13px] hover:bg-[#f1f3f4] rounded-[4px] text-[#444746]">Transition</button>
-
-        </div>
-    );
-}

components/editor/SlideThumbnailPanel.tsx

@@ -1,77 +0,0 @@
-import { Trash2 } from 'lucide-react';
-import { renderSlide } from '@/components/slides/SlideFactory';
-
-type SlideThumbnailPanelProps = {
-    slides: any[];
-    currentSlideIndex: number;
-    setCurrentSlideIndex: (index: number) => void;
-    handleDeleteSlide: (index: number) => void;
-    theme: any;
-}
-
-export function SlideThumbnailPanel(props: SlideThumbnailPanelProps) {
-    const { slides, currentSlideIndex, setCurrentSlideIndex, handleDeleteSlide, theme } = props;
-
-    return (
-        <div className="w-[260px] bg-slate-900/70 text-white border-r border-white/10 flex flex-col shrink-0 overflow-y-auto scrollbar-hide">
-            <div className="p-3 border-b border-white/10 bg-white/[0.04]">
-                <h3 className="font-medium text-sm flex items-center justify-between">
-                    <span>Slides</span>
-                    <span className="text-xs text-white/60">{slides.length} total</span>
-                </h3>
-            </div>
-            <div className="flex-1 overflow-y-auto p-1.5">
-                <div className="space-y-2">
-                    {slides.map((slide, index) => (
-                        <div
-                            key={slide.id}
-                            className={`relative group cursor-pointer rounded-lg overflow-hidden transition-all ${index === currentSlideIndex
-                                    ? 'ring-2 ring-emerald-400 bg-emerald-400/10 border-emerald-400/50 scale-105'
-                                    : 'hover:ring-1 hover:ring-white/30 bg-white/[0.02] hover:bg-white/[0.05]'
-                                } shadow-lg border border-white/10`}
-                            onClick={() => setCurrentSlideIndex(index)}
-                        >
-                            <div className="aspect-video p-1.5">
-                                <div className="w-full h-full overflow-hidden">
-                                    <div
-                                        key={`${slide.id}-${theme}`}
-                                        className="origin-top-left transform"
-                                        style={{ width: 800, height: 450, transform: 'scale(0.25)' }}
-                                    >
-                                        {renderSlide(slide, theme)}
-                                    </div>
-                                </div>
-                            </div>
-
-                            {/* Slide Number */}
-                            <div className="absolute top-1 left-1 bg-slate-900/80 text-white text-xs px-1.5 py-0.5 rounded">
-                                {index + 1}
-                            </div>
-
-                            {/* Delete Button */}
-                            {slides.length > 1 && (
-                                <button
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        handleDeleteSlide(index);
-                                    }}
-                                    className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity p-1 bg-red-500 text-white rounded hover:bg-red-600"
-                                    title="Delete slide"
-                                >
-                                    <Trash2 size={12} />
-                                </button>
-                            )}
-
-                            {/* Slide Title */}
-                            <div className="px-2 py-1 bg-white/[0.04] border-t border-white/10">
-                                <p className="text-xs truncate">
-                                    {slide.title || `Slide ${index + 1}`}
-                                </p>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            </div>
-        </div>
-    )
-}

components/home/HomePage.tsx

@@ -14,6 +14,9 @@ export default function HomePage() {
   const [isGenerating, setIsGenerating] = useState(false);
   const [isSelectOpen, setIsSelectOpen] = useState(false);
   const [user, setUser] = useState<{ name: string; avatarUrl?: string } | null>(null);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const [isAuthReady, setIsAuthReady] = useState(false);
+  const [isHuggingFaceSpace, setIsHuggingFaceSpace] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const selectRef = useRef<HTMLDivElement>(null);
   const { theme, setTheme } = useTheme();
@@ -21,6 +24,10 @@ export default function HomePage() {
 
   useEffect(() => {
     setMounted(true);
+    const hostname = window.location.hostname;
+    const isEmbedded = window.self !== window.top;
+    const isSpaceHost = hostname.endsWith('.hf.space') || hostname === 'huggingface.co';
+    setIsHuggingFaceSpace(isSpaceHost || isEmbedded);
 
     const savedTemplate = normalizeTemplateId(localStorage.getItem('ppt_theme'));
     if (savedTemplate) {
@@ -28,31 +35,34 @@ export default function HomePage() {
     }
     
     const initializeAuth = async () => {
-      // Check stored auth
-      const stored = localStorage.getItem('hf_oauth');
-      if (stored) {
-        try {
-          const parsed = JSON.parse(stored);
-          const expiresAt = parsed.accessTokenExpiresAt ? new Date(parsed.accessTokenExpiresAt) : null;
+      try {
+        // Check stored auth
+        const stored = localStorage.getItem('hf_oauth');
+        if (stored) {
+          try {
+            const parsed = JSON.parse(stored);
+            const expiresAt = parsed.accessTokenExpiresAt ? new Date(parsed.accessTokenExpiresAt) : null;
 
-          if (expiresAt && expiresAt > new Date() && parsed.accessToken) {
-            setUser({
-              name: parsed.userInfo.name || parsed.userInfo.preferred_username,
-              avatarUrl: parsed.userInfo.avatarUrl || parsed.userInfo.picture || '',
-            });
-            localStorage.setItem('hf_api_key', parsed.accessToken);
-          } else {
+            if (expiresAt && expiresAt > new Date() && parsed.accessToken) {
+              setUser({
+                name: parsed.userInfo.name || parsed.userInfo.preferred_username,
+                avatarUrl: parsed.userInfo.avatarUrl || parsed.userInfo.picture || '',
+              });
+              localStorage.setItem('hf_api_key', parsed.accessToken);
+              setSubmitError(null);
+            } else {
+              localStorage.removeItem('hf_oauth');
+              localStorage.removeItem('hf_api_key');
+              sessionStorage.removeItem('editorAccess');
+            }
+          } catch {
             localStorage.removeItem('hf_oauth');
             localStorage.removeItem('hf_api_key');
+            sessionStorage.removeItem('editorAccess');
           }
-        } catch {
-          localStorage.removeItem('hf_oauth');
-          localStorage.removeItem('hf_api_key');
         }
-      }
 
-      // Handle redirect
-      try {
+        // Handle redirect
         const result = await oauthHandleRedirectIfPresent();
         if (result) {
           const ui = result.userInfo as any;
@@ -69,11 +79,14 @@ export default function HomePage() {
           localStorage.setItem('hf_oauth', JSON.stringify(userData));
           localStorage.setItem('hf_api_key', result.accessToken);
           setUser({ name: userData.userInfo.name, avatarUrl: userData.userInfo.avatarUrl });
+          setSubmitError(null);
           // Clean URL
           window.history.replaceState({}, document.title, window.location.pathname);
         }
       } catch (err) {
         console.error('OAuth error:', err);
+      } finally {
+        setIsAuthReady(true);
       }
     };
 
@@ -93,7 +106,17 @@ export default function HomePage() {
         scopes: 'openid profile inference-api',
         redirectUrl: `${window.location.origin}/`,
       });
-      window.location.href = loginUrl + '&prompt=consent';
+      const destination = `${loginUrl}&prompt=consent`;
+      if (isHuggingFaceSpace) {
+        const topNavigation = window.open(destination, '_top');
+
+        if (!topNavigation) {
+          window.open(destination, '_blank', 'noopener,noreferrer');
+        }
+        return;
+      }
+
+      window.location.assign(destination);
     } catch (err) {
       console.error('Sign in error:', err);
     }
@@ -102,18 +125,29 @@ export default function HomePage() {
   const handleSignOut = () => {
     localStorage.removeItem('hf_oauth');
     localStorage.removeItem('hf_api_key');
+    sessionStorage.removeItem('editorAccess');
     setUser(null);
   };
 
   const router = useRouter();
 
   const handleSubmit = () => {
-    if (!prompt.trim()) return;
+    const trimmedPrompt = prompt.trim();
+    if (!trimmedPrompt) return;
+    if (!isAuthReady) return;
+
+    if (!user) {
+      setSubmitError('Please log in with Hugging Face before generating a presentation.');
+      return;
+    }
+
+    setSubmitError(null);
     setIsGenerating(true);
 
-    sessionStorage.setItem('generationPrompt', prompt);
+    sessionStorage.setItem('generationPrompt', trimmedPrompt);
     sessionStorage.setItem('generationModel', LLAMA_PRESENTATION_MODEL);
     sessionStorage.setItem('isGenerating', 'true');
+    sessionStorage.setItem('editorAccess', 'true');
     localStorage.setItem('ppt_theme', template);
 
     router.push('/editor');
@@ -150,9 +184,9 @@ export default function HomePage() {
   return (
     <div className="min-h-screen flex flex-col bg-white dark:bg-[#09090b] selection:bg-zinc-200 dark:selection:bg-zinc-800 transition-colors duration-300 font-sans">
       {/* Navbar */}
-      <nav className="flex items-center justify-between px-6 py-6">
+      <nav className={`relative z-20 flex items-center justify-between px-6 ${isHuggingFaceSpace ? 'pb-6 pt-16' : 'py-6'}`}>
         <div className="flex items-center gap-2 text-zinc-950 dark:text-zinc-50">
-          <span className="text-xl font-semibold tracking-tight">Slide.ai</span>
+          <span className="text-xl font-semibold tracking-tight">Powerpoint.ai</span>
         </div>
         
         <div className="flex items-center gap-6">
@@ -191,10 +225,10 @@ export default function HomePage() {
           ) : (
             <button 
               onClick={handleSignIn}
-              className="flex items-center gap-2 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-all text-sm font-medium"
+              className="pointer-events-auto flex items-center gap-2 text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-all text-sm font-medium"
             >
               <LogIn className="w-4 h-4" />
-              <span>Log in with Huggingface</span>
+              <span>Log in with Hugging Face</span>
             </button>
           )}
         </div>
@@ -216,7 +250,12 @@ export default function HomePage() {
             <textarea
               ref={textareaRef}
               value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
+              onChange={(e) => {
+                setPrompt(e.target.value);
+                if (submitError) {
+                  setSubmitError(null);
+                }
+              }}
               onKeyDown={handleKeyDown}
               placeholder="How can I help you today?"
               className="w-full min-h-[100px] bg-transparent text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-500 dark:placeholder:text-zinc-500 text-lg outline-none resize-none px-4 py-2"
@@ -257,22 +296,20 @@ export default function HomePage() {
               </div>
               <button
                 onClick={handleSubmit}
-                disabled={!prompt.trim() || isGenerating}
+                disabled={!prompt.trim() || isGenerating || !isAuthReady}
                 className="flex h-9 w-9 items-center justify-center rounded-xl bg-zinc-200 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-300 dark:hover:bg-zinc-700 hover:text-zinc-900 dark:hover:text-zinc-50 transition-all disabled:opacity-30 disabled:cursor-not-allowed"
               >
                 <ArrowUp className="h-5 w-5" />
               </button>
             </div>
           </div>
+          {submitError && (
+            <p className="mt-3 px-2 text-sm font-medium text-red-600 dark:text-red-400">
+              {submitError}
+            </p>
+          )}
         </div>
       </main>
-
-      {/* Brand Icon (Fixed bottom left) */}
-      <div className="fixed bottom-6 left-6">
-        <div className="w-8 h-8 rounded-full bg-zinc-950 dark:bg-white flex items-center justify-center shadow-lg border border-white/5">
-          <span className="text-white dark:text-black font-bold text-xs italic">N</span>
-        </div>
-      </div>
     </div>
   );
 }

components/ui/button.tsx

@@ -1,59 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean
-  }) {
-  const Comp = asChild ? Slot : "button"
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  )
-}
-
-export { Button, buttonVariants }

components/ui/dialog.tsx

@@ -1,143 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Dialog({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
-
-function DialogTrigger({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
-
-function DialogPortal({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose({
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      className={cn(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogContent({
-  className,
-  children,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
-      <DialogOverlay />
-      <DialogPrimitive.Content
-        data-slot="dialog-content"
-        className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        {showCloseButton && (
-          <DialogPrimitive.Close
-            data-slot="dialog-close"
-            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
-          >
-            <XIcon />
-            <span className="sr-only">Close</span>
-          </DialogPrimitive.Close>
-        )}
-      </DialogPrimitive.Content>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DialogTitle({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn("text-lg leading-none font-semibold", className)}
-      {...props}
-    />
-  )
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}

components/ui/dropdown-menu.tsx

@@ -1,257 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
-
-function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
-
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  )
-}
-
-function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
-    <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.CheckboxItem>
-  )
-}
-
-function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  )
-}
-
-function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="dropdown-menu-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-}

components/ui/popover.tsx

@@ -1,48 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
-
-import { cn } from "@/lib/utils"
-
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
-
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
-
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
-}
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
-
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

components/ui/select.tsx

@@ -1,185 +0,0 @@
-"use client"
-
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Select({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
-
-function SelectGroup({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}
-
-function SelectValue({
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
-
-function SelectTrigger({
-  className,
-  size = "default",
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
-    <SelectPrimitive.Trigger
-      data-slot="select-trigger"
-      data-size={size}
-      className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
-      </SelectPrimitive.Icon>
-    </SelectPrimitive.Trigger>
-  )
-}
-
-function SelectContent({
-  className,
-  children,
-  position = "popper",
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
-  return (
-    <SelectPrimitive.Portal>
-      <SelectPrimitive.Content
-        data-slot="select-content"
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
-          position === "popper" &&
-            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-          className
-        )}
-        position={position}
-        {...props}
-      >
-        <SelectScrollUpButton />
-        <SelectPrimitive.Viewport
-          className={cn(
-            "p-1",
-            position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
-          )}
-        >
-          {children}
-        </SelectPrimitive.Viewport>
-        <SelectScrollDownButton />
-      </SelectPrimitive.Content>
-    </SelectPrimitive.Portal>
-  )
-}
-
-function SelectLabel({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
-  return (
-    <SelectPrimitive.Label
-      data-slot="select-label"
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
-    <SelectPrimitive.Item
-      data-slot="select-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
-        className
-      )}
-      {...props}
-    >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
-        <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </SelectPrimitive.ItemIndicator>
-      </span>
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </SelectPrimitive.Item>
-  )
-}
-
-function SelectSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
-  return (
-    <SelectPrimitive.Separator
-      data-slot="select-separator"
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}

components/ui/textarea.tsx

@@ -1,18 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
-  return (
-    <textarea
-      data-slot="textarea"
-      className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export { Textarea }

hooks/useEditableField.ts

@@ -1,56 +0,0 @@
-'use client';
-
-import { useState, useCallback } from 'react';
-
-interface UseEditableFieldParams {
-  slideId?: string;
-  isEditable?: boolean;
-  onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
-}
-
-export function useEditableField({ slideId, isEditable, onFieldUpdate }: UseEditableFieldParams) {
-  const [editingField, setEditingField] = useState<string | null>(null);
-  const [tempValues, setTempValues] = useState<Record<string, string>>({});
-
-  const startEditing = useCallback((field: string, currentValue: string) => {
-    if (!isEditable) return;
-    setEditingField(field);
-    setTempValues(prev => ({ ...prev, [field]: currentValue }));
-  }, [isEditable]);
-
-  const updateTemp = useCallback((field: string, value: string) => {
-    setTempValues(prev => ({ ...prev, [field]: value }));
-  }, []);
-
-  const commitEdit = useCallback((field: string, index?: number) => {
-    const value = tempValues[field];
-    if (value !== undefined && slideId && onFieldUpdate) {
-      onFieldUpdate(slideId, field, value, index);
-    }
-    setEditingField(null);
-  }, [tempValues, slideId, onFieldUpdate]);
-
-  const cancelEdit = useCallback(() => {
-    setEditingField(null);
-  }, []);
-
-  const handleKeyDown = useCallback((e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      commitEdit(field, index);
-    }
-    if (e.key === 'Escape') {
-      cancelEdit();
-    }
-  }, [commitEdit, cancelEdit]);
-
-  return {
-    editingField,
-    tempValues,
-    startEditing,
-    updateTemp,
-    commitEdit,
-    cancelEdit,
-    handleKeyDown,
-  };
-}

hooks/useExport.ts

@@ -1,123 +1,20 @@
-import jsPDF from 'jspdf';
 import type { SlideModel } from '@/lib/editor-types';
 import { themes } from '@/lib/editor-themes';
 import type { SlideSpec } from '@/data/templates';
 import { exportEditablePptx } from '@/lib/editable-pptx-export';
-import { captureElementAsPng } from '@/lib/capture-element';
 
 interface UseExportParams {
   slideRef: React.RefObject<HTMLDivElement | null>;
   slides: SlideModel[];
   slideSpecs: SlideSpec[];
   currentTheme: keyof typeof themes;
-  currentSlideIndex: number;
-  zoom: number;
-  selectedId: string | null;
-  isEditingTextId: string | null;
   presentationTitle: string;
-  setCurrentSlideIndex: (i: number) => void;
-  setZoom: (z: number) => void;
-  setSelectedId: (id: string | null) => void;
-  setIsEditingTextId: (id: string | null) => void;
-}
-
-function waitForPaint() {
-  return new Promise<void>((resolve) => {
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => resolve());
-    });
-  });
-}
-
-async function waitForFonts() {
-  if ('fonts' in document) {
-    await (document as Document & { fonts: FontFaceSet }).fonts.ready;
-  }
-}
-
-async function waitForImages(container: HTMLElement) {
-  const images = Array.from(container.querySelectorAll('img'));
-
-  await Promise.all(
-    images.map(
-      (image) =>
-        new Promise<void>((resolve) => {
-          if (image.complete) {
-            resolve();
-            return;
-          }
-
-          image.onload = () => resolve();
-          image.onerror = () => resolve();
-        })
-    )
-  );
 }
 
 export function useExport({
   slideRef, slides, slideSpecs, currentTheme,
-  currentSlideIndex, zoom, selectedId, isEditingTextId,
-  presentationTitle, setCurrentSlideIndex, setZoom,
-  setSelectedId, setIsEditingTextId,
+  presentationTitle,
 }: UseExportParams) {
-  const captureNode = async (node: HTMLElement) => captureElementAsPng(node, { scale: 2 });
-
-  const captureEditorSlides = async (): Promise<string[]> => {
-    if (!slideRef.current || slides.length === 0) return [];
-
-    const originalSlideIndex = currentSlideIndex;
-    const originalZoom = zoom;
-    const originalSelectedId = selectedId;
-    const originalEditingTextId = isEditingTextId;
-
-    setSelectedId(null);
-    setIsEditingTextId(null);
-    setZoom(1);
-    await waitForFonts();
-    await new Promise((resolve) => setTimeout(resolve, 250));
-
-    const images: string[] = [];
-
-    for (let index = 0; index < slides.length; index++) {
-      setCurrentSlideIndex(index);
-      await new Promise((resolve) => setTimeout(resolve, 450));
-
-      if (!slideRef.current) continue;
-
-      await waitForFonts();
-      await waitForImages(slideRef.current);
-      await waitForPaint();
-      images.push(await captureNode(slideRef.current));
-    }
-
-    setCurrentSlideIndex(originalSlideIndex);
-    setZoom(originalZoom);
-    setSelectedId(originalSelectedId);
-    setIsEditingTextId(originalEditingTextId);
-
-    return images;
-  };
-
-  const exportToPDF = async () => {
-    if (!slideRef.current || slides.length === 0) return;
-
-    try {
-      const images = await captureEditorSlides();
-      const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [800, 450] });
-
-      images.forEach((imageData, index) => {
-        if (index > 0) pdf.addPage();
-        pdf.addImage(imageData, 'PNG', 0, 0, 800, 450);
-      });
-
-      const sanitizedTitle = presentationTitle.replace(/[^a-zA-Z0-9 -]/g, '').trim() || 'presentation';
-      pdf.save(`${sanitizedTitle}.pdf`);
-    } catch (error) {
-      console.error('Error exporting to PDF:', error);
-      alert('Failed to export to PDF. Please try again.');
-    }
-  };
-
   const exportToPPTX = async () => {
     if (!slideRef.current || slides.length === 0) return;
 
@@ -134,5 +31,5 @@ export function useExport({
     }
   };
 
-  return { exportToPDF, exportToPPTX };
+  return { exportToPPTX };
 }

lib/imageService.ts

@@ -1,127 +0,0 @@
-/**
- * Image Service
- * Handles fetching images from Unsplash API for slide generation
- */
-
-import { searchUnsplash } from './unsplash';
-
-interface UnsplashImage {
-  id: string;
-  urls: {
-    regular: string;
-    small: string;
-    full: string;
-  };
-  alt_description: string | null;
-  user: {
-    name: string;
-    username: string;
-  };
-}
-
-interface ImageSearchResult {
-  imageUrl: string;
-  attribution: {
-    photographer: string;
-    photographerUrl: string;
-  } | null;
-}
-
-/**
- * Fetch a relevant image from Unsplash based on keywords
- * @param keywords - Search keywords (e.g., "technology innovation futuristic")
- * @returns Image URL and attribution info
- */
-export async function fetchImageForSlide(keywords: string): Promise<ImageSearchResult> {
-  // If no keywords provided, return default placeholder
-  if (!keywords || keywords.trim() === '') {
-    return {
-      imageUrl: 'https://images.pexels.com/photos/18803582/pexels-photo-18803582.jpeg?auto=compress&cs=tinysrgb&w=800',
-      attribution: null
-    };
-  }
-
-  try {
-    const results = await searchUnsplash(keywords, 1);
-
-    if (results.length > 0) {
-      const image: UnsplashImage = results[0];
-      return {
-        imageUrl: image.urls.regular,
-        attribution: {
-          photographer: image.user.name,
-          photographerUrl: `https://unsplash.com/@${image.user.username}?utm_source=presentation-generator&utm_medium=referral`
-        }
-      };
-    }
-
-    // No results found, use fallback
-    return getFallbackImage();
-
-  } catch (error) {
-    console.error('Error fetching image:', error);
-    return getFallbackImage();
-  }
-}
-
-/**
- * Fetch multiple images for multiple slides
- * @param slidesWithKeywords - Array of objects with slide info and keywords
- * @returns Array of image URLs in same order
- */
-export async function fetchImagesForSlides(
-  slidesWithKeywords: Array<{ index: number; keywords: string }>
-): Promise<Array<{ index: number; result: ImageSearchResult }>> {
-  // Fetch all images in parallel for better performance
-  const promises = slidesWithKeywords.map(async (slide) => {
-    const result = await fetchImageForSlide(slide.keywords);
-    return {
-      index: slide.index,
-      result
-    };
-  });
-
-  return Promise.all(promises);
-}
-
-/**
- * Get a high-quality fallback image
- */
-function getFallbackImage(): ImageSearchResult {
-  // Rotate through different fallback images for variety
-  const fallbackImages = [
-    'https://images.pexels.com/photos/18803582/pexels-photo-18803582.jpeg?auto=compress&cs=tinysrgb&w=800',
-    'https://images.unsplash.com/photo-1557683316-973673baf926?w=800&q=80',
-    'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=800&q=80',
-    'https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=800&q=80',
-  ];
-
-  const randomImage = fallbackImages[Math.floor(Math.random() * fallbackImages.length)];
-
-  return {
-    imageUrl: randomImage,
-    attribution: null
-  };
-}
-
-/**
- * Extract relevant keywords from slide title and content for image search
- * @param title - Slide title
- * @param content - Slide content array
- * @returns Optimized search keywords
- */
-export function generateImageKeywords(title: string, content: string[]): string {
-  // Common words to filter out
-  const stopWords = ['the', 'a', 'an', 'and', 'or', 'but', 'in', 'on', 'at', 'to', 'for', 'of', 'with', 'by'];
-
-  // Combine title and first content item
-  const text = `${title} ${content[0] || ''}`.toLowerCase();
-
-  // Extract meaningful words
-  const words = text
-    .split(/\s+/)
-    .filter(word => word.length > 3 && !stopWords.includes(word))
-    .slice(0, 3); // Take first 3 meaningful words
-
-  return words.join(' ');
-}

lib/orchestrator.ts

@@ -1,123 +0,0 @@
-/**
- * Presentation Generation Orchestrator
- *
- * This module is the single entry-point for AI-powered presentation generation.
- * It uses the approved Hugging Face Llama 3.3 70B model for generation.
- *
- * After content is generated the orchestrator enriches slides that carry image
- * keyword hints by fetching real photos from Unsplash.
- *
- * The function always returns a {@link PresentationJSON}. If the model
- * produces unparseable output the result defaults to `{ theme: "dark", slides: [] }`.
- */
-
-import { HFClient } from './hf-client';
-import { searchUnsplash } from './unsplash';
-import { buildSlidePrompt, normalizeLayout } from './slide-prompt';
-import { LLAMA_PRESENTATION_MODEL } from './ai-models';
-
-export type Provider = 'hf';
-
-export interface GenerationRequest {
-  prompt: string;
-  provider: Provider;
-  model?: string;
-  templateContext?: {
-    fileName: string;
-    fileSize: number;
-    fileType: string;
-    base64Content: string;
-  };
-}
-
-export interface SlideJSON {
-  id: string;
-  layout: string;
-  title?: string;
-  subtitle?: string;
-  body?: Array<{ heading?: string; text: string }>;
-  columns?: Array<{ heading: string; text: string }>;
-  chart?: {
-    type: 'bar' | 'line' | 'pie';
-    data: Record<string, unknown>;
-    options?: Record<string, unknown>;
-  };
-  images?: string[];
-  imageKeyword?: string;
-}
-
-export interface PresentationJSON {
-  theme: string;
-  presentationName?: string;
-  slides: SlideJSON[];
-}
-
-export async function generatePresentation(req: GenerationRequest): Promise<PresentationJSON> {
-  const slidePrompt = buildSlidePrompt(req.prompt);
-  const hfApiKey = process.env.HF_API_KEY || process.env.NEXT_PUBLIC_HF_API_KEY;
-
-  if (!hfApiKey) {
-    throw new Error('HF Pro API key required for Llama 3.3 70B generation');
-  }
-
-  if (req.provider && req.provider !== 'hf') {
-    console.warn(`Ignoring unsupported provider "${req.provider}" and forcing hf.`);
-  }
-
-  if (req.model && req.model !== LLAMA_PRESENTATION_MODEL) {
-    console.warn(`Ignoring unsupported presentation model "${req.model}" and forcing ${LLAMA_PRESENTATION_MODEL}.`);
-  }
-
-  const raw = await new HFClient({
-    apiKey: hfApiKey,
-    model: LLAMA_PRESENTATION_MODEL,
-  }).generateSlideContent(slidePrompt, LLAMA_PRESENTATION_MODEL);
-
-  let parsed: PresentationJSON;
-
-  try {
-    const rawParsed = JSON.parse(raw);
-    parsed = {
-      theme: rawParsed.theme || 'professional',
-      presentationName: rawParsed.presentationName,
-      slides: [],
-    };
-
-    const slidesArray = rawParsed.slides || (Array.isArray(rawParsed) ? rawParsed : []);
-    const total = slidesArray.length;
-
-    parsed.slides = slidesArray.map((slide: any, index: number) => ({
-      id: slide.id || `slide-${index + 1}`,
-      layout: normalizeLayout(slide.layout || '', index, total),
-      title: slide.title,
-      subtitle: slide.subtitle,
-      body: slide.body,
-      columns: Array.isArray(slide.columns)
-        ? slide.columns
-            .filter((column: any) => column && typeof column === 'object')
-            .map((column: any, columnIndex: number) => ({
-              heading: String(column.heading || `Column ${columnIndex + 1}`),
-              text: String(column.text || ''),
-            }))
-        : undefined,
-      chart: slide.chart,
-      images: slide.images,
-      imageKeyword: slide.imageKeyword || slide.imageKeywords || '',
-    }));
-  } catch {
-    parsed = { theme: 'dark', slides: [] };
-  }
-
-  for (const slide of parsed.slides) {
-    const keyword = slide.imageKeyword || (slide.images && slide.images.length ? slide.images[0] : '');
-    if (keyword && slide.layout === 'image_and_text') {
-      const results = await searchUnsplash(keyword, 3);
-      slide.images = results.map((result) => result.urls.regular);
-    } else if (slide.images && slide.images.length) {
-      const results = await searchUnsplash(slide.images[0], 3);
-      slide.images = results.map((result) => result.urls.regular);
-    }
-  }
-
-  return parsed;
-}

lib/ppt-generator.ts

@@ -1,567 +0,0 @@
-/**
- * PowerPoint File Generator
- *
- * Uses the `pptxgenjs` library to produce native `.pptx` files from the
- * application's internal slide data model.
- *
- * Three slide types are supported:
- *  - `"title"`       — Opening title card with author info and date
- *  - `"content"`     — Bullet-point content slide with optional stats sidebar
- *  - `"conclusion"`  — Closing slide with key takeaways and a call-to-action
- *
- * The generated file uses Inter / Playfair Display as the primary typefaces
- * and a 16:9 aspect ratio (industry standard).
- *
- * Usage:
- * ```ts
- * import { generatePowerPoint } from '@/lib/ppt-generator';
- * await generatePowerPoint(slidesArray);
- * // A file named "Generated-Presentation.pptx" will be downloaded
- * ```
- */
-
-import PptxGenJS from 'pptxgenjs';
-
-// ---------------------------------------------------------------------------
-// Data-model types
-// ---------------------------------------------------------------------------
-
-/**
- * The content payload for a single slide.  Different slide types use different
- * subsets of these fields — unused fields are simply ignored.
- */
-interface SlideContent {
-  /** Optional override for the slide's main title text. */
-  title?: string;
-  /** Tagline or sub-heading shown beneath the title. */
-  subtitle?: string;
-  /** Presenter's full name (title slides only). */
-  authorName?: string;
-  /** Presenter's job title or role (title slides only). */
-  authorTitle?: string;
-  /** Formatted date string displayed in the footer (title slides only). */
-  date?: string;
-  /**
-   * Main content items rendered as styled bullet-point cards.
-   * Each item has a short `title` label and a longer `description`.
-   */
-  points?: Array<{ title: string; description: string }>;
-  /**
-   * Key metrics displayed in a sidebar panel on content slides.
-   * Each stat shows a large `number` with a descriptive `label`.
-   */
-  stats?: Array<{ number: string; label: string }>;
-  /** Optional pull-quote or highlighted text. */
-  highlightText?: string;
-  /**
-   * Short takeaway strings rendered as numbered boxes in the conclusion slide.
-   * Recommended 3-4 items.
-   */
-  takeaways?: string[];
-  /** Heading text for the call-to-action box (conclusion slide). */
-  ctaTitle?: string;
-  /** Body copy inside the call-to-action box. */
-  ctaText?: string;
-  /** Button label inside the call-to-action box (currently decorative in PPTX). */
-  ctaButtonText?: string;
-  /** Contact details shown at the very bottom of the conclusion slide. */
-  contactInfo?: string;
-}
-
-/**
- * A single slide in the presentation data model.
- *
- * @property id      - Unique identifier used for React list keys.
- * @property type    - Determines which slide template is rendered.
- * @property title   - Slide heading (may be overridden by `content.title`).
- * @property content - Rich content payload; fields depend on `type`.
- */
-export interface SlideData {
-  id: string;
-  type: 'title' | 'content' | 'conclusion';
-  title: string;
-  content: SlideContent;
-}
-
-// ---------------------------------------------------------------------------
-// PPTGenerator class
-// ---------------------------------------------------------------------------
-
-/**
- * Orchestrates the creation of a `.pptx` file from an array of {@link SlideData}
- * objects.
- *
- * Instantiate once per export operation, then call {@link generatePresentation}.
- */
-export class PPTGenerator {
-  /** The `pptxgenjs` presentation instance being constructed. */
-  private pptx: PptxGenJS;
-
-  /** Creates a new generator instance and initialises the base presentation. */
-  constructor() {
-    this.pptx = new PptxGenJS();
-    this.setupPresentation();
-  }
-
-  /**
-   * Configures global presentation properties applied to every slide:
-   *  - 16:9 `LAYOUT_16x9` aspect ratio
-   *  - Inter as the default body/heading typeface
-   */
-  private setupPresentation() {
-    this.pptx.layout = 'LAYOUT_16x9';
-    this.pptx.theme = {
-      headFontFace: 'Inter',
-      bodyFontFace: 'Inter',
-    };
-  }
-
-  /**
-   * Iterates over the provided slides, delegates to the appropriate builder
-   * method based on `slide.type`, then triggers the file download.
-   *
-   * `writeFile` initiates a browser-side download, so this method does not
-   * return meaningful file data — the returned Blob is a placeholder for API
-   * consistency.
-   *
-   * @param slides - Ordered array of slide data to render.
-   * @returns A Promise that resolves to a placeholder Blob when download starts.
-   */
-  generatePresentation(slides: SlideData[]): Promise<Blob> {
-    return new Promise((resolve, reject) => {
-      try {
-        // Build each slide using the type-specific builder methods
-        slides.forEach((slide) => {
-          switch (slide.type) {
-            case 'title':
-              this.createTitleSlide(slide);
-              break;
-            case 'content':
-              this.createContentSlide(slide);
-              break;
-            case 'conclusion':
-              this.createConclusionSlide(slide);
-              break;
-          }
-        });
-
-        // Trigger browser download; pptxgenjs handles the file serialisation
-        this.pptx.writeFile({ fileName: 'Generated-Presentation.pptx' })
-          .then(() => {
-            // Since writeFile downloads directly, we'll create a blob for consistency
-            resolve(new Blob(['Presentation generated successfully'], { type: 'text/plain' }));
-          })
-          .catch(reject);
-      } catch (error) {
-        reject(error);
-      }
-    });
-  }
-
-  /**
-   * Creates an opening title slide with a purple gradient background.
-   *
-   * Layout (all measurements in inches on a 10×5.625 canvas):
-   *  - Title text:  centered, y=2, h=2, 48pt Playfair Display Bold, white
-   *  - Subtitle:    centered, y=4, h=1, 24pt Inter, light grey
-   *  - Author info: centered, y=6.5, h=1, 16pt Inter, near-white
-   *  - Date stamp:  right-aligned, y=7.5, 12pt Inter, muted grey
-   *
-   * @param slide - Slide data object; `content.authorName`, `subtitle`, `date` are used.
-   */
-  private createTitleSlide(slide: SlideData) {
-    const titleSlide = this.pptx.addSlide();
-
-    // Background gradient — deep violet matching the app's brand colour
-    titleSlide.background = { fill: '667eea' };
-
-    // Main title — large, bold, centred
-    titleSlide.addText(slide.content.title || slide.title, {
-      x: 1,
-      y: 2,
-      w: 8,
-      h: 2,
-      fontSize: 48,
-      fontFace: 'Playfair Display',
-      color: 'FFFFFF',
-      bold: true,
-      align: 'center',
-      valign: 'middle',
-    });
-
-    // Subtitle — softer styling below the main title
-    titleSlide.addText(slide.content.subtitle || '', {
-      x: 1,
-      y: 4,
-      w: 8,
-      h: 1,
-      fontSize: 24,
-      fontFace: 'Inter',
-      color: 'E2E8F0', // Light slate
-      align: 'center',
-      valign: 'middle',
-    });
-
-    // Author block — name and job title stacked on two lines
-    titleSlide.addText(`${slide.content.authorName || 'Author'}\n${slide.content.authorTitle || ''}`, {
-      x: 1,
-      y: 6.5,
-      w: 8,
-      h: 1,
-      fontSize: 16,
-      fontFace: 'Inter',
-      color: 'F1F5F9', // Near white
-      align: 'center',
-      valign: 'middle',
-    });
-
-    // Date stamp — small, right-aligned, muted
-    titleSlide.addText(slide.content.date || new Date().toLocaleDateString(), {
-      x: 8,
-      y: 7.5,
-      w: 2,
-      h: 0.5,
-      fontSize: 12,
-      fontFace: 'Inter',
-      color: '94A3B8', // Slate-400
-      align: 'right',
-    });
-  }
-
-  /**
-   * Creates a content slide with white background, bullet-point cards, and an
-   * optional stats sidebar.
-   *
-   * Layout:
-   *  - Blue accent rule beneath the title
-   *  - Title at y=0.5, subtitle at y=1.2
-   *  - Up to ~4 content point cards (auto-positioned, y starts at 2.2 with 1.2in spacing)
-   *  - Optional right-side stats panel (x=7, w=2.5, h=4)
-   *
-   * @param slide - Slide data object; `content.points` and `content.stats` are used.
-   */
-  private createContentSlide(slide: SlideData) {
-    const contentSlide = this.pptx.addSlide();
-
-    // White background for maximum readability
-    contentSlide.background = { fill: 'FFFFFF' };
-
-    // Thin blue accent rule beneath the title for visual separation
-    contentSlide.addShape('rect', {
-      x: 0.5,
-      y: 0.8,    // Just below the title text block
-      w: 9,
-      h: 0.1,    // Very thin horizontal line
-      fill: { color: '2563EB' }, // Tailwind blue-600
-    });
-
-    // Main slide title
-    contentSlide.addText(slide.title, {
-      x: 0.5,
-      y: 0.5,
-      w: 9,
-      h: 1,
-      fontSize: 36,
-      fontFace: 'Inter',
-      color: '0F172A', // Slate-900 — near black
-      bold: true,
-    });
-
-    // Optional subtitle / descriptive sub-heading
-    contentSlide.addText(slide.content.subtitle || '', {
-      x: 0.5,
-      y: 1.2,
-      w: 9,
-      h: 0.5,
-      fontSize: 16,
-      fontFace: 'Inter',
-      color: '64748B', // Slate-500 — muted grey
-    });
-
-    // Render each bullet-point card as a rounded rectangle with a green dot
-    if (slide.content.points && Array.isArray(slide.content.points)) {
-      slide.content.points.forEach((point, index: number) => {
-        // Stack cards vertically with 1.2-inch spacing between each
-        const yPos = 2.2 + (index * 1.2);
-
-        // Background card — light grey with a subtle border
-        contentSlide.addShape('rect', {
-          x: 0.5,
-          y: yPos,
-          w: 6,
-          h: 1,
-          fill: { color: 'F8FAFC' },   // Slate-50
-          line: { color: 'E2E8F0', width: 1 }, // Slate-200 border
-          rectRadius: 0.1,              // Rounded corners
-        });
-
-        // Green circular bullet indicator on the left edge
-        contentSlide.addShape('ellipse', {
-          x: 0.2,
-          y: yPos + 0.3, // Vertically centred within the card
-          w: 0.4,
-          h: 0.4,
-          fill: { color: '10B981' }, // Emerald-500
-        });
-
-        // Point title — bold, dark text at the top of the card
-        contentSlide.addText(point.title || `Point ${index + 1}`, {
-          x: 0.8,
-          y: yPos + 0.1,
-          w: 5.5,
-          h: 0.4,
-          fontSize: 14,
-          fontFace: 'Inter',
-          color: '0F172A',
-          bold: true,
-        });
-
-        // Point description — muted grey, smaller font
-        contentSlide.addText(point.description || '', {
-          x: 0.8,
-          y: yPos + 0.5,
-          w: 5.5,
-          h: 0.4,
-          fontSize: 12,
-          fontFace: 'Inter',
-          color: '64748B',
-        });
-      });
-    }
-
-    // Optional stats sidebar — only rendered when stats are provided
-    if (slide.content.stats && Array.isArray(slide.content.stats)) {
-      // Sidebar container panel
-      contentSlide.addShape('rect', {
-        x: 7,
-        y: 2,
-        w: 2.5,
-        h: 4,
-        fill: { color: 'F8FAFC' },
-        line: { color: 'E2E8F0', width: 1 },
-        rectRadius: 0.1,
-      });
-
-      // "Key Metrics" heading at the top of the sidebar
-      contentSlide.addText('Key Metrics', {
-        x: 7.2,
-        y: 2.2,
-        w: 2.1,
-        h: 0.4,
-        fontSize: 14,
-        fontFace: 'Inter',
-        color: '0F172A',
-        bold: true,
-      });
-
-      // Render each stat as a stacked number + label pair
-      slide.content.stats.forEach((stat, index: number) => {
-        // Each stat occupies ~0.8 inches of vertical space
-        const yPos = 2.8 + (index * 0.8);
-
-        // Large blue number for visual impact
-        contentSlide.addText(stat.number || '0', {
-          x: 7.2,
-          y: yPos,
-          w: 2.1,
-          h: 0.4,
-          fontSize: 18,
-          fontFace: 'Inter',
-          color: '2563EB', // Blue-600
-          bold: true,
-          align: 'center',
-        });
-
-        // Small grey label beneath the number
-        contentSlide.addText(stat.label || '', {
-          x: 7.2,
-          y: yPos + 0.3,
-          w: 2.1,
-          h: 0.3,
-          fontSize: 10,
-          fontFace: 'Inter',
-          color: '64748B',
-          align: 'center',
-        });
-      });
-    }
-  }
-
-  /**
-   * Creates a closing conclusion slide with a green background, key takeaway
-   * boxes, and a call-to-action panel.
-   *
-   * Layout:
-   *  - Green background (Emerald-500 `#10B981`)
-   *  - Large white title at the top
-   *  - "Key Takeaways" sub-heading
-   *  - Numbered takeaway boxes arranged horizontally (x advances by 2.5in)
-   *  - Semi-transparent CTA panel at y=5.5
-   *  - "Thank You" sign-off and contact info at the bottom
-   *
-   * @param slide - Slide data; `content.takeaways`, `ctaTitle`, `ctaText`,
-   *               and `contactInfo` are used.
-   */
-  private createConclusionSlide(slide: SlideData) {
-    const conclusionSlide = this.pptx.addSlide();
-
-    // Vibrant green background to signal the end of the presentation
-    conclusionSlide.background = { fill: '10B981' };
-
-    // Main slide title — large Playfair Display for elegance
-    conclusionSlide.addText(slide.title, {
-      x: 1,
-      y: 0.5,
-      w: 8,
-      h: 1.5,
-      fontSize: 48,
-      fontFace: 'Playfair Display',
-      color: 'FFFFFF',
-      bold: true,
-      align: 'center',
-    });
-
-    // "Key Takeaways" section heading
-    conclusionSlide.addText('Key Takeaways', {
-      x: 1,
-      y: 2.5,
-      w: 8,
-      h: 0.5,
-      fontSize: 24,
-      fontFace: 'Inter',
-      color: 'FFFFFF',
-      bold: true,
-      align: 'center',
-    });
-
-    // Render each takeaway in a semi-transparent numbered box
-    if (slide.content.takeaways && Array.isArray(slide.content.takeaways)) {
-      slide.content.takeaways.forEach((takeaway: string, index: number) => {
-        // Boxes are laid out horizontally; each takes 2.5 inches of width
-        const xPos = 1 + (index * 2.5);
-
-        // Frosted-glass style box background
-        conclusionSlide.addShape('rect', {
-          x: xPos,
-          y: 3.5,
-          w: 2.2,
-          h: 1.5,
-          fill: { color: 'FFFFFF', transparency: 85 }, // Very translucent white
-          line: { color: 'FFFFFF', width: 1, transparency: 50 },
-          rectRadius: 0.2,
-        });
-
-        // Small circle behind the ordinal number
-        conclusionSlide.addShape('ellipse', {
-          x: xPos + 0.1,
-          y: 3.6,
-          w: 0.3,
-          h: 0.3,
-          fill: { color: 'FFFFFF', transparency: 70 },
-        });
-
-        // Ordinal number (1, 2, 3…) centred in the circle
-        conclusionSlide.addText((index + 1).toString(), {
-          x: xPos + 0.1,
-          y: 3.6,
-          w: 0.3,
-          h: 0.3,
-          fontSize: 12,
-          fontFace: 'Inter',
-          color: 'FFFFFF',
-          bold: true,
-          align: 'center',
-          valign: 'middle',
-        });
-
-        // Takeaway body text within the box
-        conclusionSlide.addText(takeaway, {
-          x: xPos + 0.1,
-          y: 4,
-          w: 2,
-          h: 1,
-          fontSize: 12,
-          fontFace: 'Inter',
-          color: 'FFFFFF',
-          valign: 'top',
-        });
-      });
-    }
-
-    // Call-to-action panel — semi-transparent white box near the bottom
-    conclusionSlide.addShape('rect', {
-      x: 2,
-      y: 5.5,
-      w: 6,
-      h: 1.5,
-      fill: { color: 'FFFFFF', transparency: 80 },
-      line: { color: 'FFFFFF', width: 2 },
-      rectRadius: 0.2,
-    });
-
-    // CTA heading — prominently centred in the panel
-    conclusionSlide.addText(slide.content.ctaTitle || 'Next Steps', {
-      x: 2.2,
-      y: 5.7,
-      w: 5.6,
-      h: 0.5,
-      fontSize: 20,
-      fontFace: 'Inter',
-      color: 'FFFFFF',
-      bold: true,
-      align: 'center',
-    });
-
-    // CTA body text — supporting description beneath the heading
-    conclusionSlide.addText(slide.content.ctaText || 'Ready to implement these insights?', {
-      x: 2.2,
-      y: 6.2,
-      w: 5.6,
-      h: 0.8,
-      fontSize: 14,
-      fontFace: 'Inter',
-      color: 'F1F5F9', // Very light slate
-      align: 'center',
-    });
-
-    // "Thank You" sign-off in the brand serif font
-    conclusionSlide.addText('Thank You', {
-      x: 1,
-      y: 7.5,
-      w: 8,
-      h: 0.5,
-      fontSize: 24,
-      fontFace: 'Playfair Display',
-      color: 'FFFFFF',
-      align: 'center',
-    });
-
-    // Contact info footer — small text at the very bottom
-    conclusionSlide.addText(slide.content.contactInfo || 'Contact us for more information', {
-      x: 1,
-      y: 8,
-      w: 8,
-      h: 0.3,
-      fontSize: 12,
-      fontFace: 'Inter',
-      color: 'E2E8F0', // Light slate
-      align: 'center',
-    });
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Convenience wrapper
-// ---------------------------------------------------------------------------
-
-/**
- * Convenience function that creates a one-shot {@link PPTGenerator} and
- * immediately triggers the PowerPoint file download.
- *
- * @param slides - Ordered array of slide data to render.
- * @returns A Promise that resolves when the download has been initiated.
- */
-export const generatePowerPoint = async (slides: SlideData[]): Promise<void> => {
-  const generator = new PPTGenerator();
-  await generator.generatePresentation(slides);
-};

lib/unsplash.ts

@@ -1,90 +0,0 @@
-/**
- * Unsplash Image Search Helper
- *
- * Provides a single lightweight function for searching the Unsplash API.
- * This module is used by the orchestrator when enriching generated slides
- * with relevant stock photography.
- *
- * API key is read from `process.env.UNSPLASH_ACCESS_KEY`.
- * If no key is present the function silently returns an empty array so the
- * rest of the generation pipeline can continue without images.
- *
- * Unsplash rate limits:
- *  - Demo / development: 50 requests / hour
- *  - Production (approved app): 5,000 requests / hour
- *
- * @see https://unsplash.com/developers for key registration
- */
-
-import axios from 'axios';
-
-/**
- * The subset of Unsplash photo fields used by the application.
- * Only the properties that are consumed downstream are typed here.
- */
-export interface UnsplashImage {
-  /** Unique Unsplash photo ID. */
-  id: string;
-  /** Human-readable description written by the photographer (may be null). */
-  description: string | null;
-  /** Machine-generated alt text derived from image content (may be null). */
-  alt_description: string | null;
-  /** Pre-sized image URLs provided by the Unsplash CDN. */
-  urls: {
-    /** ~400 px wide — suitable for thumbnails. */
-    small: string;
-    /** ~1080 px wide — suitable for slide backgrounds. */
-    regular: string;
-    /** Full-resolution download URL. */
-    full: string;
-  };
-  /** Photographer attribution (must be shown when displaying photos). */
-  user: {
-    /** Display name of the photographer. */
-    name: string;
-    /** Public username used for attribution links. */
-    username: string;
-  };
-}
-
-/**
- * Searches the Unsplash API for landscape-oriented photos matching `query`.
- *
- * Results are filtered to landscape orientation automatically so they fit
- * standard 16:9 slide dimensions without distortion.
- *
- * @param query   - Search keywords (e.g. `"artificial intelligence technology"`).
- * @param perPage - Maximum number of results to return (default: 6).
- * @returns Array of {@link UnsplashImage} objects, or an empty array when the
- *          API key is missing or the request fails.
- *
- * @example
- * const images = await searchUnsplash("sustainable energy", 3);
- * const firstImageUrl = images[0]?.urls.regular;
- */
-export async function searchUnsplash(query: string, perPage = 6): Promise<UnsplashImage[]> {
-  // Read the Unsplash access key from the environment
-  const key = process.env.UNSPLASH_ACCESS_KEY;
-
-  // Bail out silently when no key is configured — callers handle the empty array
-  if (!key) return [];
-
-  // Base URL for the Unsplash search endpoint
-  const url = `https://api.unsplash.com/search/photos`;
-
-  // Perform the search request using axios for automatic error handling
-  const { data } = await axios.get(url, {
-    params: {
-      query,                      // The user-supplied search term
-      per_page: perPage,          // Limit the number of results returned
-      orientation: 'landscape',   // Only return landscape photos for 16:9 slides
-    },
-    headers: {
-      // Unsplash requires the Client-ID header for authentication
-      Authorization: `Client-ID ${key}`,
-    },
-  });
-
-  // `data.results` is the array of photo objects; default to empty if absent
-  return (data.results || []) as UnsplashImage[];
-}