committing since i am heading to bed

app/api/presentations/generate/route.ts

@@ -1,6 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { GeminiClient } from '@/lib/gemini-client';
-import { HFClient } from '@/lib/hf-client';
+import { HFClient, HFGenerationError } from '@/lib/hf-client';
 import { buildSlidePrompt, normalizeLayout } from '@/lib/slide-prompt';
 
 async function fetchImageForSlide(query: string): Promise<string | undefined> {
@@ -27,13 +27,71 @@ interface Slide {
   id: string;
   title: string;
   subtitle?: string;
-  content: string[];
+  content: string | string[];
+  columns?: Array<{ heading: string; text: string }>;
   notes?: string;
   imageUrl?: string;
   imageKeyword?: string;
   layout: string;
 }
 
+function toStringArray(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value
+      .filter((entry): entry is string => typeof entry === 'string')
+      .map((entry) => entry.trim())
+      .filter(Boolean);
+  }
+
+  if (typeof value === 'string' && value.trim()) {
+    return [value.trim()];
+  }
+
+  return [];
+}
+
+function normalizeSlideContent(content: unknown, layout: string): string | string[] {
+  const items = toStringArray(content);
+
+  if (layout === 'agenda' || layout === 'references') {
+    return items;
+  }
+
+  return items.join(' ');
+}
+
+function normalizeColumns(value: unknown): Array<{ heading: string; text: string }> | undefined {
+  if (!Array.isArray(value)) return undefined;
+
+  const columns = value
+    .map((entry, index) => {
+      if (!entry || typeof entry !== 'object') return null;
+      const heading = typeof (entry as { heading?: unknown }).heading === 'string'
+        ? (entry as { heading: string }).heading.trim()
+        : `Column ${index + 1}`;
+      const text = typeof (entry as { text?: unknown }).text === 'string'
+        ? (entry as { text: string }).text.trim()
+        : '';
+
+      if (!heading && !text) return null;
+      return { heading: heading || `Column ${index + 1}`, text };
+    })
+    .filter((entry): entry is { heading: string; text: string } => Boolean(entry))
+    .slice(0, 3);
+
+  return columns.length ? columns : undefined;
+}
+
+function deriveColumnsFromContent(content: unknown): Array<{ heading: string; text: string }> | undefined {
+  const items = toStringArray(content).slice(0, 3);
+  if (!items.length) return undefined;
+
+  return items.map((text, index) => ({
+    heading: `Pillar ${index + 1}`,
+    text,
+  }));
+}
+
 export async function POST(req: NextRequest) {
   try {
     const { prompt, model } = await req.json();
@@ -69,15 +127,21 @@ export async function POST(req: NextRequest) {
         const slidesArray = parsed.slides || (Array.isArray(parsed) ? parsed : []);
         const total = slidesArray.length;
 
-        slides = slidesArray.map((slide: any, index: number) => ({
-          id: `slide-${index + 1}`,
-          title: slide.title || `Slide ${index + 1}`,
-          subtitle: slide.subtitle || undefined,
-          content: Array.isArray(slide.content) ? slide.content : (slide.content ? [slide.content] : []),
-          notes: slide.notes || '',
-          layout: normalizeLayout(slide.layout || '', index, total),
-          imageKeyword: slide.imageKeyword || slide.imageKeywords || '',
-        }));
+        slides = slidesArray.map((slide: any, index: number) => {
+          const layout = normalizeLayout(slide.layout || '', index, total);
+          return {
+            id: `slide-${index + 1}`,
+            title: slide.title || `Slide ${index + 1}`,
+            subtitle: slide.subtitle || undefined,
+            layout,
+            content: normalizeSlideContent(slide.content, layout),
+            columns: layout === 'three_columns'
+              ? (normalizeColumns(slide.columns) || deriveColumnsFromContent(slide.content))
+              : undefined,
+            notes: slide.notes || '',
+            imageKeyword: slide.imageKeyword || slide.imageKeywords || '',
+          };
+        });
       } catch (error) {
         console.error('Gemini generation error:', error);
         slides = createFallbackSlides(prompt);
@@ -92,7 +156,39 @@ export async function POST(req: NextRequest) {
       const hf = new HFClient({ apiKey: hfToken, model });
 
       try {
-        const response = await hf.generateSlideContent(systemPrompt, model);
+        const fallbackModels = [
+          'deepseek-ai/DeepSeek-V3.1',
+          'meta-llama/Llama-4-Maverick-17B-128E-Instruct',
+        ].filter((candidate) => candidate !== model);
+
+        let response = '';
+
+        try {
+          response = await hf.generateSlideContent(systemPrompt, model);
+        } catch (error) {
+          const primaryMessage = error instanceof Error ? error.message : 'Unknown provider error';
+          const shouldRetry = error instanceof HFGenerationError
+            ? !error.status || error.status >= 500
+            : true;
+
+          if (!shouldRetry) throw error;
+
+          let recovered = false;
+          for (const fallbackModel of fallbackModels) {
+            try {
+              console.warn(`Primary HF model failed (${primaryMessage}). Retrying with ${fallbackModel}.`);
+              response = await hf.generateSlideContent(systemPrompt, fallbackModel);
+              recovered = true;
+              break;
+            } catch (fallbackError) {
+              const fallbackMessage = fallbackError instanceof Error ? fallbackError.message : 'Unknown provider error';
+              console.warn(`HF fallback model ${fallbackModel} failed: ${fallbackMessage}`);
+            }
+          }
+
+          if (!recovered) throw error;
+        }
+
         console.log('Raw HF response (first 500 chars):', response.substring(0, 500));
 
         if (!response || response.trim().length === 0) {
@@ -140,19 +236,26 @@ export async function POST(req: NextRequest) {
         const slidesArray = parsed.slides || (Array.isArray(parsed) ? parsed : []);
         const total = slidesArray.length;
 
-        slides = slidesArray.map((slide: any, index: number) => ({
-          id: `slide-${index + 1}`,
-          title: slide.title || `Slide ${index + 1}`,
-          subtitle: slide.subtitle || undefined,
-          content: Array.isArray(slide.content) ? slide.content : (slide.content ? [slide.content] : []),
-          notes: slide.notes || '',
-          layout: normalizeLayout(slide.layout || '', index, total),
-          imageKeyword: slide.imageKeyword || slide.imageKeywords || '',
-        }));
+        slides = slidesArray.map((slide: any, index: number) => {
+          const layout = normalizeLayout(slide.layout || '', index, total);
+          return {
+            id: `slide-${index + 1}`,
+            title: slide.title || `Slide ${index + 1}`,
+            subtitle: slide.subtitle || undefined,
+            layout,
+            content: normalizeSlideContent(slide.content, layout),
+            columns: layout === 'three_columns'
+              ? (normalizeColumns(slide.columns) || deriveColumnsFromContent(slide.content))
+              : undefined,
+            notes: slide.notes || '',
+            imageKeyword: slide.imageKeyword || slide.imageKeywords || '',
+          };
+        });
 
         console.log(`Parsed ${slides.length} slides`);
       } catch (error) {
-        console.error('HuggingFace generation error:', error);
+        const message = error instanceof Error ? error.message : 'Unknown provider error';
+        console.warn(`HuggingFace generation failed, using fallback slides: ${message}`);
         slides = createFallbackSlides(prompt);
       }
     }
@@ -180,11 +283,10 @@ function createFallbackSlides(prompt: string): Slide[] {
   return [
     { id: 'slide-1', title, subtitle: `Overview of ${prompt.toLowerCase()}`, content: [], layout: 'title_subtitle', imageKeyword: '' },
     { id: 'slide-2', title: 'Agenda', content: ['Background & Context', 'Key Concepts', 'Analysis', 'Benefits & Impact'], layout: 'agenda', imageKeyword: '' },
-    { id: 'slide-3', title: 'Background & Context', content: ['Understanding the fundamentals', 'Historical context and relevance', 'Why this topic matters'], layout: 'title_and_text', imageKeyword: '' },
-    { id: 'slide-4', title: 'Key Concepts', content: ['Primary concepts and definitions', 'Core principles', 'Essential components'], layout: 'image_and_text', imageKeyword: `${prompt.toLowerCase()} concept` },
-    { id: 'slide-5', title: 'Analysis', content: ['Current trends', 'Key insights', 'Critical analysis'], layout: 'title_and_text', imageKeyword: '' },
-    { id: 'slide-6', title: 'Benefits & Impact', content: ['Expected benefits', 'Measurable impact', 'Long-term value'], layout: 'title_and_text', imageKeyword: '' },
-    { id: 'slide-7', title: 'References', content: ['Industry publications and reports'], layout: 'references', imageKeyword: '' },
-    { id: 'slide-8', title: 'Thank You', subtitle: 'Questions welcome', content: [], layout: 'thank_you', imageKeyword: '' },
+    { id: 'slide-3', title: 'Background & Context', content: `This section introduces the core context behind ${prompt.toLowerCase()} and frames why the topic matters right now.`, layout: 'title_and_text', imageKeyword: '' },
+    { id: 'slide-4', title: 'Key Concepts', content: `This slide highlights the main concepts, practical principles, and important patterns someone should understand about ${prompt.toLowerCase()}.`, layout: 'image_and_text', imageKeyword: `${prompt.toLowerCase()} concept` },
+    { id: 'slide-5', title: 'Analysis', content: `This section summarizes the most relevant trends, observations, and implications surrounding ${prompt.toLowerCase()} in a concise way.`, layout: 'title_and_text', imageKeyword: '' },
+    { id: 'slide-6', title: 'Benefits & Impact', content: `This slide explains the likely benefits, measurable outcomes, and longer-term value that can come from ${prompt.toLowerCase()}.`, layout: 'title_and_text', imageKeyword: '' },
+    { id: 'slide-7', title: 'Thank You', subtitle: 'Questions welcome', content: [], layout: 'thank_you', imageKeyword: '' },
   ];
 }

app/api/search-images/route.ts

@@ -12,8 +12,8 @@ import { NextRequest, NextResponse } from 'next/server';
 // Sign up at: https://unsplash.com/developers
 const UNSPLASH_ACCESS_KEY = process.env.UNSPLASH_ACCESS_KEY || process.env.NEXT_PUBLIC_UNSPLASH_ACCESS_KEY || 'demo';
 
-interface UnsplashImage {
-  id: string;
+interface UnsplashImage {
+  id: string;
   urls: {
     raw: string;
     full: string;
@@ -26,15 +26,44 @@ interface UnsplashImage {
   user: {
     name: string;
     username: string;
-  };
-}
-
-export async function GET(request: NextRequest) {
-  try {
-    const searchParams = request.nextUrl.searchParams;
-    const query = searchParams.get('query');
-    const perPage = searchParams.get('per_page') || '1';
-    const page = searchParams.get('page') || '1';
+  };
+}
+
+function createFallbackResults(query: string, perPage: number, page: number) {
+  const safePerPage = Math.min(Math.max(perPage, 1), 20);
+
+  return Array.from({ length: safePerPage }, (_, index) => {
+    const seed = `${query || 'presentation'}-${page}-${index + 1}`;
+    const baseUrl = `https://picsum.photos/seed/${encodeURIComponent(seed)}`;
+
+    return {
+      id: `fallback-${seed}`,
+      urls: {
+        raw: `${baseUrl}/1600/900`,
+        full: `${baseUrl}/1600/900`,
+        regular: `${baseUrl}/1200/675`,
+        small: `${baseUrl}/800/450`,
+        thumb: `${baseUrl}/320/180`,
+      },
+      alt_description: query || 'presentation',
+      description: `Fallback image for: ${query || 'presentation'}`,
+      user: {
+        name: 'Fallback Library',
+        username: 'fallback-library',
+      },
+      links: {
+        download_location: '',
+      },
+    };
+  });
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams;
+    const query = searchParams.get('query');
+    const perPage = Number(searchParams.get('per_page') || '1');
+    const page = Number(searchParams.get('page') || '1');
 
     if (!query) {
       return NextResponse.json(
@@ -43,28 +72,16 @@ export async function GET(request: NextRequest) {
       );
     }
 
-    // If no API key is set, return placeholder images
-    if (UNSPLASH_ACCESS_KEY === 'demo') {
-      console.log('Using placeholder images (no Unsplash API key configured)');
-      return NextResponse.json({
-        results: [{
-          id: 'placeholder',
-          urls: {
-            regular: `https://images.unsplash.com/photo-1557683316-973673baf926?w=800&q=80`,
-            small: `https://images.unsplash.com/photo-1557683316-973673baf926?w=400&q=80`,
-            thumb: `https://images.unsplash.com/photo-1557683316-973673baf926?w=200&q=80`,
-          },
-          alt_description: query,
-          description: `Placeholder image for: ${query}`,
-          user: {
-            name: 'Unsplash',
-            username: 'unsplash'
-          }
-        }],
-        total: 1,
-        message: 'Using placeholder - Add UNSPLASH_ACCESS_KEY to .env.local for real images'
-      });
-    }
+    // If no API key is set, return placeholder images
+    if (UNSPLASH_ACCESS_KEY === 'demo') {
+      console.log('Using placeholder images (no Unsplash API key configured)');
+      return NextResponse.json({
+        results: createFallbackResults(query, perPage, page),
+        total: perPage,
+        total_pages: 1,
+        message: 'Using fallback results - add UNSPLASH_ACCESS_KEY to .env.local for real Unsplash images',
+      });
+    }
 
     // Make request to Unsplash API
     const unsplashUrl = `https://api.unsplash.com/search/photos?query=${encodeURIComponent(query)}&per_page=${perPage}&page=${page}&orientation=landscape`;
@@ -79,22 +96,13 @@ export async function GET(request: NextRequest) {
       const errorText = await response.text();
       console.error('Unsplash API error:', response.status, errorText);
 
-      if (response.status === 401) {
-        return NextResponse.json(
-          { error: 'Invalid Unsplash API key. Please check your configuration.' },
-          { status: 401 }
-        );
-      }
-
-      if (response.status === 403) {
-        return NextResponse.json(
-          { error: 'Rate limit exceeded. Please try again later or upgrade your Unsplash plan.' },
-          { status: 429 }
-        );
-      }
-
-      throw new Error(`Unsplash API returned ${response.status}`);
-    }
+      return NextResponse.json({
+        results: createFallbackResults(query, perPage, page),
+        total: perPage,
+        total_pages: 1,
+        message: `Unsplash unavailable (${response.status}), using fallback results`,
+      });
+    }
 
     const data = await response.json();
 
@@ -104,14 +112,20 @@ export async function GET(request: NextRequest) {
       total_pages: data.total_pages,
     });
 
-  } catch (error) {
-    console.error('Image search error:', error);
-    return NextResponse.json(
-      {
-        error: 'Failed to search images',
-        details: error instanceof Error ? error.message : 'Unknown error'
-      },
-      { status: 500 }
-    );
-  }
-}
+  } catch (error) {
+    console.error('Image search error:', error);
+    return NextResponse.json(
+      {
+        results: createFallbackResults(
+          request.nextUrl.searchParams.get('query') || 'presentation',
+          Number(request.nextUrl.searchParams.get('per_page') || '1'),
+          Number(request.nextUrl.searchParams.get('page') || '1')
+        ),
+        total: Number(request.nextUrl.searchParams.get('per_page') || '1'),
+        total_pages: 1,
+        message: error instanceof Error ? error.message : 'Unknown error',
+      },
+      { status: 200 }
+    );
+  }
+}

app/globals.css

@@ -334,7 +334,7 @@ input::placeholder {
 }
 
 /* Neo-brutalism template utilities */
-.neo-shadow { box-shadow: 4px 4px 0px 0px rgba(0,0,0,1); }
-.neo-shadow-lg { box-shadow: 6px 6px 0px 0px rgba(0,0,0,1); }
-.neo-shadow-purple { box-shadow: 4px 4px 0px 0px #A000A0; }
-.neo-border { border: 3px solid black; }
+.neo-shadow { box-shadow: 8px 8px 0px 0px rgba(0,0,0,1); }
+.neo-shadow-lg { box-shadow: 10px 10px 0px 0px rgba(0,0,0,1); }
+.neo-shadow-purple { box-shadow: 8px 8px 0px 0px #A000A0; }
+.neo-border { border: 3px solid black; }

app/layout.tsx

@@ -12,7 +12,7 @@
  */
 
 import type { Metadata } from "next";
-import { Geist, Geist_Mono, Sora, Inter, Roboto, Open_Sans, Lato, Montserrat, Poppins, Playfair_Display, Merriweather } from "next/font/google";
+import { Geist, Geist_Mono, Sora, Inter, Roboto, Roboto_Mono, Open_Sans, Lato, Montserrat, Poppins, Playfair_Display, Merriweather } from "next/font/google";
 import "./globals.css";
 
 // Primary sans-serif font used throughout the application
@@ -46,6 +46,11 @@ const roboto = Roboto({
   weight: ["300", "400", "500", "700"],
 });
 
+const robotoMono = Roboto_Mono({
+  variable: "--font-roboto-mono",
+  subsets: ["latin"],
+});
+
 // Clean, humanist sans-serif for presentations
 const openSans = Open_Sans({
   variable: "--font-open-sans",
@@ -107,7 +112,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${sora.variable} ${inter.variable} ${roboto.variable} ${openSans.variable} ${lato.variable} ${montserrat.variable} ${poppins.variable} ${playfair.variable} ${merriweather.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${sora.variable} ${inter.variable} ${roboto.variable} ${robotoMono.variable} ${openSans.variable} ${lato.variable} ${montserrat.variable} ${poppins.variable} ${playfair.variable} ${merriweather.variable} antialiased`}
       >
         <ThemeProvider>
           {children}

app/page.tsx

@@ -1,273 +1 @@
-'use client';
-
-import React, { useState, useRef, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
-import { LogIn, Moon, Sun, ArrowUp, Check, ChevronDown, User, LogOut } from 'lucide-react';
-import { useTheme } from '@/components/ThemeProvider';
-import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
-
-export default function HomePage() {
-  const [prompt, setPrompt] = useState('');
-  const [template, setTemplate] = useState('neobrutalism');
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [isSelectOpen, setIsSelectOpen] = useState(false);
-  const [user, setUser] = useState<{ name: string; avatarUrl?: string } | null>(null);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  const selectRef = useRef<HTMLDivElement>(null);
-  const { theme, setTheme } = useTheme();
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    
-    const initializeAuth = async () => {
-      // Check stored auth
-      const stored = localStorage.getItem('hf_oauth');
-      if (stored) {
-        try {
-          const parsed = JSON.parse(stored);
-          setUser({ name: parsed.userInfo.name || parsed.userInfo.preferred_username, avatarUrl: parsed.userInfo.avatarUrl || parsed.userInfo.picture || '' });
-          if (parsed.accessToken) {
-            localStorage.setItem('hf_api_key', parsed.accessToken);
-          }
-        } catch {
-          localStorage.removeItem('hf_oauth');
-        }
-      }
-
-      // Handle redirect
-      try {
-        const result = await oauthHandleRedirectIfPresent();
-        if (result) {
-          const ui = result.userInfo as any;
-          const userData = {
-            accessToken: result.accessToken,
-            accessTokenExpiresAt: result.accessTokenExpiresAt,
-            userInfo: {
-              name: ui.preferred_username || ui.name,
-              fullname: ui.name || '',
-              avatarUrl: ui.picture || ui.avatarUrl || '',
-              email: ui.email,
-            }
-          };
-          localStorage.setItem('hf_oauth', JSON.stringify(userData));
-          localStorage.setItem('hf_api_key', result.accessToken);
-          setUser({ name: userData.userInfo.name, avatarUrl: userData.userInfo.avatarUrl });
-          // Clean URL
-          window.history.replaceState({}, document.title, window.location.pathname);
-        }
-      } catch (err) {
-        console.error('OAuth error:', err);
-      }
-    };
-
-    initializeAuth();
-  }, []);
-
-  const handleSignIn = async () => {
-    try {
-      const res = await fetch('/api/auth/client-id');
-      const { clientId } = await res.json();
-      if (!clientId) {
-        console.error('HuggingFace Client ID not configured');
-        return;
-      }
-      const loginUrl = await oauthLoginUrl({
-        clientId,
-        scopes: 'openid profile inference-api',
-        redirectUrl: `${window.location.origin}/`,
-      });
-      window.location.href = loginUrl + '&prompt=consent';
-    } catch (err) {
-      console.error('Sign in error:', err);
-    }
-  };
-
-  const handleSignOut = () => {
-    localStorage.removeItem('hf_oauth');
-    localStorage.removeItem('hf_api_key');
-    setUser(null);
-  };
-
-  const router = useRouter();
-
-  const templates = [
-    'neobrutalism',
-    'galeryn',
-    'noisy'
-  ];
-
-  const handleSubmit = () => {
-    if (!prompt.trim()) return;
-    setIsGenerating(true);
-
-    // Store generation parameters (keys must match GoogleSlidesEditor.tsx)
-    sessionStorage.setItem('generationPrompt', prompt);
-    sessionStorage.setItem('generationModel', 'meta-llama/Llama-3.3-70B-Instruct:together');
-    sessionStorage.setItem('isGenerating', 'true');
-    localStorage.setItem('ppt_theme', template);
-
-    router.push('/editor');
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      handleSubmit();
-    }
-  };
-
-  // Auto-resize textarea
-  useEffect(() => {
-    if (textareaRef.current) {
-      textareaRef.current.style.height = 'auto';
-      textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 300)}px`;
-    }
-  }, [prompt]);
-
-  // Close select on click outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
-        setIsSelectOpen(false);
-      }
-    };
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  if (!mounted) return null;
-
-  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">
-      {/* Navbar */}
-      <nav className="flex items-center justify-between px-6 py-6 font-sans">
-        <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>
-        </div>
-        
-        <div className="flex items-center gap-6">
-          <button
-            onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-            className="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50"
-          >
-            {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
-            <span className="sr-only">Toggle theme</span>
-          </button>
-          
-          {user ? (
-            <div className="flex items-center gap-4 group">
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full overflow-hidden border border-zinc-200 dark:border-zinc-800">
-                  {user.avatarUrl ? (
-                    <img src={user.avatarUrl} alt={user.name} className="w-full h-full object-cover" />
-                  ) : (
-                    <div className="w-full h-full bg-zinc-100 dark:bg-zinc-900 flex items-center justify-center">
-                      <User className="w-4 h-4 text-zinc-500" />
-                    </div>
-                  )}
-                </div>
-                <span className="text-sm font-medium text-zinc-700 dark:text-zinc-300 hidden md:block">
-                  {user.name}
-                </span>
-              </div>
-              <button 
-                onClick={handleSignOut}
-                className="text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-50 transition-colors"
-                title="Sign Out"
-              >
-                <LogOut className="w-4 h-4" />
-              </button>
-            </div>
-          ) : (
-            <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"
-            >
-              <LogIn className="w-4 h-4" />
-              <span>Log in with Huggingface</span>
-            </button>
-          )}
-        </div>
-      </nav>
-
-      {/* Main Content */}
-      <main className="flex-1 flex flex-col items-center justify-center p-6 md:p-12 w-full max-w-4xl mx-auto space-y-12">
-        
-        {/* Hero Section */}
-        <div className="text-center">
-          <h1 className="text-3xl md:text-4xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-100">
-            What kind of presentation do you need today?
-          </h1>
-        </div>
-
-        {/* Builder Input Section */}
-        <div className="w-full max-w-3xl">
-          <div className="bg-[#f4f4f5] dark:bg-[#2f2f2f] rounded-[2rem] p-3 md:p-4 flex flex-col transition-all border border-zinc-200 dark:border-zinc-700 shadow-sm focus-within:ring-1 focus-within:ring-zinc-300 dark:focus-within:ring-zinc-500">
-            <textarea
-              ref={textareaRef}
-              value={prompt}
-              onChange={(e) => setPrompt(e.target.value)}
-              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-400 text-base outline-none resize-none px-2 md:px-3 py-2 leading-relaxed"
-              style={{ overflow: 'hidden' }}
-            />
-            
-            <div className="flex items-center justify-end gap-2 mt-2 px-2 pb-1">
-              <div className="relative" ref={selectRef}>
-                <button
-                  onClick={() => setIsSelectOpen(!isSelectOpen)}
-                  className="flex h-9 items-center justify-between gap-2 rounded-2xl bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-zinc-700 px-4 py-2 text-sm font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors shadow-sm"
-                >
-                  <span className="truncate">{template}</span>
-                  <ChevronDown className={`h-4 w-4 opacity-50 transition-transform ${isSelectOpen ? 'rotate-180' : ''}`} />
-                </button>
-                
-                {isSelectOpen && (
-                  <div className="absolute right-0 bottom-full mb-2 z-50 min-w-[12rem] overflow-hidden rounded-2xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-[#18181b] text-zinc-950 dark:text-zinc-50 shadow-xl animate-in fade-in slide-in-from-bottom-2">
-                    <div className="p-1.5">
-                      {templates.map((t) => (
-                        <div
-                          key={t}
-                          onClick={() => {
-                            setTemplate(t);
-                            setIsSelectOpen(false);
-                          }}
-                          className="relative flex w-full cursor-pointer select-none items-center rounded-xl py-2 pl-9 pr-4 text-sm font-medium hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
-                        >
-                          <span className="absolute left-3 flex h-4 w-4 items-center justify-center">
-                            {template === t && <Check className="h-4 w-4" />}
-                          </span>
-                          {t}
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-              <button
-                onClick={handleSubmit}
-                disabled={!prompt.trim() || isGenerating}
-                className={`flex h-9 w-9 items-center justify-center rounded-2xl transition-all flex-shrink-0 ${
-                  prompt.trim() && !isGenerating
-                    ? 'bg-black text-white dark:bg-white dark:text-black hover:opacity-80 shadow-md'
-                    : 'bg-[#e5e5e5] text-zinc-400 dark:bg-zinc-700 dark:text-zinc-500 cursor-not-allowed'
-                }`}
-              >
-                <ArrowUp className="h-5 w-5" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </main>
-
-      {/* Brand Icon (Fixed bottom left like in image) */}
-      <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">
-          <span className="text-white dark:text-black font-bold text-xs italic">N</span>
-        </div>
-      </div>
-    </div>
-  );
-}
+export { default } from '@/components/home/HomePage';

components/UnsplashImageSearch.tsx

@@ -138,6 +138,8 @@ export default function UnsplashImageSearch({ onImageSelect, onClose }: Unsplash
                 <img
                   src={image.urls.small}
                   alt={image.alt_description || 'Unsplash image'}
+                  loading="lazy"
+                  referrerPolicy="no-referrer"
                   className="w-full h-full object-cover transition-transform group-hover:scale-105"
                 />
                 <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-opacity flex items-center justify-center">

components/editor/BottomToolbar.tsx

@@ -1,10 +1,7 @@
 import React from "react";
 import {
-    MousePointer2,
     ChevronDown,
     Type,
-    Copy,
-    Link,
     Image,
     Search,
     Minus,
@@ -27,6 +24,9 @@ interface BottomToolbarProps {
     zoom: number;
     setZoom: (fn: (z: number) => number) => void;
 
+    // Mode
+    isTemplateTheme?: boolean;
+
     // Selection
     selectedId: string | null;
 
@@ -65,6 +65,26 @@ const COLOR_PRESETS = [
     "#547BEE",
 ];
 
+const LAYOUT_ORDER: LayoutType[] = [
+    "title_subtitle",
+    "agenda",
+    "title_and_text",
+    "three_columns",
+    "image_and_text",
+    "references",
+    "thank_you",
+];
+
+const LAYOUT_LABELS: Record<LayoutType, string> = {
+    title_subtitle: "Title & Subtitle",
+    agenda: "Agenda",
+    title_and_text: "Title & Text",
+    three_columns: "Three Columns",
+    image_and_text: "Image & Text",
+    references: "References",
+    thank_you: "Thank You",
+};
+
 function ToolButton({
     children,
     title,
@@ -106,6 +126,7 @@ export default function BottomToolbar(props: BottomToolbarProps) {
         onFileChange,
         zoom,
         setZoom,
+        isTemplateTheme = false,
         selectedId,
         availableLayouts,
         currentLayout,
@@ -124,65 +145,69 @@ export default function BottomToolbar(props: BottomToolbarProps) {
     const [showColorMenu, setShowColorMenu] = React.useState(false);
     const [showAddSlideMenu, setShowAddSlideMenu] = React.useState(false);
     const [customColor, setCustomColor] = React.useState("");
+    const layoutOptions = React.useMemo(() => {
+        if (!availableLayouts?.length) return [];
+
+        const layoutsById = new Map<LayoutType, string>();
+        availableLayouts.forEach((layout) => {
+            layoutsById.set(layout.id, layout.name || LAYOUT_LABELS[layout.id]);
+        });
+
+        if (!layoutsById.has("three_columns")) {
+            layoutsById.set("three_columns", LAYOUT_LABELS.three_columns);
+        }
+
+        return LAYOUT_ORDER
+            .filter((layoutId) => layoutsById.has(layoutId))
+            .map((layoutId) => ({
+                id: layoutId,
+                name: layoutsById.get(layoutId) || LAYOUT_LABELS[layoutId],
+            }));
+    }, [availableLayouts]);
 
     return (
         <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50">
             <div className="flex items-center gap-0.5 px-2 py-1.5 bg-white rounded-xl shadow-lg border border-gray-200">
-                {/* Select Tool */}
-                <ToolButton title="Select" active={!selectedId}>
-                    <MousePointer2 className="w-5 h-5" />
-                </ToolButton>
-
-                <Divider />
+                {!isTemplateTheme && (
+                    <>
+                        <ToolButton title="Text" onClick={addText}>
+                            <Type className="w-5 h-5" />
+                        </ToolButton>
 
-                {/* Text Tool */}
-                <ToolButton title="Text" onClick={addText}>
-                    <Type className="w-5 h-5" />
-                </ToolButton>
-
-                {/* Duplicate/Copy */}
-                <ToolButton title="Duplicate">
-                    <Copy className="w-5 h-5" />
-                </ToolButton>
-
-                {/* Link */}
-                <ToolButton title="Link">
-                    <Link className="w-5 h-5" />
-                </ToolButton>
-
-                {/* Image with dropdown */}
-                <div className="relative">
-                    <ToolButton title="Image" onClick={() => setShowImageMenu(!showImageMenu)} dropdown>
-                        <Image className="w-5 h-5" />
-                    </ToolButton>
-                    {showImageMenu && (
-                        <>
-                            <div className="fixed inset-0 z-40" onClick={() => setShowImageMenu(false)} />
-                            <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-white rounded-lg shadow-xl border border-gray-200 py-1 z-50 min-w-[160px]">
-                                <button
-                                    onClick={() => { addImage(); setShowImageMenu(false); }}
-                                    className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"
-                                >
-                                    <Image className="w-4 h-4" />
-                                    Upload image
-                                </button>
-                                <button
-                                    onClick={() => { openUnsplashSearch(); setShowImageMenu(false); }}
-                                    className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"
-                                >
-                                    <Search className="w-4 h-4" />
-                                    Search Unsplash
-                                </button>
-                            </div>
-                        </>
-                    )}
-                </div>
-                <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={onFileChange} />
+                        <div className="relative">
+                            <ToolButton title="Image" onClick={() => setShowImageMenu(!showImageMenu)} dropdown>
+                                <Image className="w-5 h-5" />
+                            </ToolButton>
+                            {showImageMenu && (
+                                <>
+                                    <div className="fixed inset-0 z-40" onClick={() => setShowImageMenu(false)} />
+                                    <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-white rounded-lg shadow-xl border border-gray-200 py-1 z-50 min-w-[160px]">
+                                        <button
+                                            onClick={() => { addImage(); setShowImageMenu(false); }}
+                                            className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"
+                                        >
+                                            <Image className="w-4 h-4" />
+                                            Upload image
+                                        </button>
+                                        <button
+                                            onClick={() => { openUnsplashSearch(); setShowImageMenu(false); }}
+                                            className="w-full flex items-center gap-3 px-3 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors"
+                                        >
+                                            <Search className="w-4 h-4" />
+                                            Search Unsplash
+                                        </button>
+                                    </div>
+                                </>
+                            )}
+                        </div>
+                        <input ref={fileInputRef} type="file" accept="image/*" className="hidden" onChange={onFileChange} />
 
-                <Divider />
+                        <Divider />
+                    </>
+                )}
 
                 {/* Layout Selector */}
-                {availableLayouts && availableLayouts.length > 0 && onLayoutChange && (
+                {layoutOptions.length > 0 && onLayoutChange && (
                     <div className="relative">
                         <ToolButton title="Layout" onClick={() => setShowLayoutMenu(!showLayoutMenu)} dropdown>
                             <Layout className="w-5 h-5" />
@@ -191,7 +216,7 @@ export default function BottomToolbar(props: BottomToolbarProps) {
                             <>
                                 <div className="fixed inset-0 z-40" onClick={() => setShowLayoutMenu(false)} />
                                 <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-white rounded-lg shadow-xl border border-gray-200 py-1 z-50 min-w-[180px]">
-                                    {availableLayouts.map((layout) => (
+                                    {layoutOptions.map((layout) => (
                                         <button
                                             key={layout.id}
                                             onClick={() => { onLayoutChange(layout.id); setShowLayoutMenu(false); }}
@@ -207,7 +232,7 @@ export default function BottomToolbar(props: BottomToolbarProps) {
                 )}
 
                 {/* Font Selector */}
-                {onFontChange && (
+                {!isTemplateTheme && onFontChange && (
                     <div className="relative">
                         <ToolButton title="Font" onClick={() => setShowFontMenu(!showFontMenu)} dropdown>
                             <span className="text-sm font-medium w-5 h-5 flex items-center justify-center">A</span>
@@ -233,7 +258,7 @@ export default function BottomToolbar(props: BottomToolbarProps) {
                 )}
 
                 {/* Color Picker */}
-                {onColorChange && (
+                {!isTemplateTheme && onColorChange && (
                     <div className="relative">
                         <ToolButton title="Text Color" onClick={() => setShowColorMenu(!showColorMenu)}>
                             <Palette className="w-5 h-5" />
@@ -284,10 +309,10 @@ export default function BottomToolbar(props: BottomToolbarProps) {
                     </div>
                 )}
 
-                <Divider />
+                {!isTemplateTheme && (onFontChange || onColorChange) && <Divider />}
 
                 {/* Add Slide with Layout */}
-                {onAddSlideWithLayout && availableLayouts && availableLayouts.length > 0 && (
+                {onAddSlideWithLayout && layoutOptions.length > 0 && (
                     <div className="relative">
                         <ToolButton title="Add Slide" onClick={() => setShowAddSlideMenu(!showAddSlideMenu)} dropdown>
                             <PlusCircle className="w-5 h-5" />
@@ -297,7 +322,7 @@ export default function BottomToolbar(props: BottomToolbarProps) {
                                 <div className="fixed inset-0 z-40" onClick={() => setShowAddSlideMenu(false)} />
                                 <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 bg-white rounded-lg shadow-xl border border-gray-200 py-1 z-50 min-w-[180px]">
                                     <div className="px-3 py-1.5 text-xs font-semibold text-gray-400 uppercase tracking-wider">Add slide</div>
-                                    {availableLayouts.map((layout) => (
+                                    {layoutOptions.map((layout) => (
                                         <button
                                             key={layout.id}
                                             onClick={() => { onAddSlideWithLayout(layout.id); setShowAddSlideMenu(false); }}

components/editor/GoogleSlidesEditor.tsx

@@ -30,6 +30,7 @@ import { createId, withinBounds, getWorkshopLayoutBackground, createLayoutElemen
 import { useSlideHistory } from '@/hooks/useSlideHistory';
 import { useKeyboardShortcuts } from '@/hooks/useKeyboardShortcuts';
 import { useExport } from '@/hooks/useExport';
+import { normalizeTemplateId } from '@/lib/template-options';
 
 export default function GoogleSlidesEditor() {
   // Presentation data
@@ -52,6 +53,7 @@ export default function GoogleSlidesEditor() {
   const [isAIEditing, setIsAIEditing] = useState(false);  // AI is processing text
   const [showAIDialog, setShowAIDialog] = useState(false);  // AI dialog visible
   const [showUnsplashSearch, setShowUnsplashSearch] = useState(false);
+  const [templateImageSelection, setTemplateImageSelection] = useState<{ slideId: string; field: 'imageUrl' } | null>(null);
 
   // DOM REFERENCES - For direct DOM manipulation
   const fileInputRef = useRef<HTMLInputElement>(null);  // Hidden file input for images
@@ -70,20 +72,58 @@ export default function GoogleSlidesEditor() {
       if (spec.id !== slideId) return spec;
       if (field === 'title') return { ...spec, title: value };
       if (field === 'subtitle') return { ...spec, subtitle: value };
-      if (field === 'body' && index !== undefined && spec.body) {
-        const newBody = [...spec.body];
-        newBody[index] = { ...newBody[index], text: value };
+      if (field === 'body' && index !== undefined) {
+        const newBody = [...(spec.body || [])];
+        newBody[index] = { ...(newBody[index] || {}), text: value };
         return { ...spec, body: newBody };
       }
-      if (field === 'items' && index !== undefined && spec.items) {
-        const newItems = [...spec.items];
+      if (field === 'items' && index !== undefined) {
+        const newItems = [...(spec.items || [])];
         newItems[index] = { text: value };
         return { ...spec, items: newItems };
       }
+      if (field === 'columns' && index !== undefined) {
+        try {
+          const parsed = JSON.parse(value) as { heading?: string; text?: string };
+          const newColumns = [...(spec.columns || [])];
+          newColumns[index] = {
+            heading: parsed.heading || `Column ${index + 1}`,
+            text: parsed.text || '',
+          };
+          return { ...spec, columns: newColumns };
+        } catch {
+          return spec;
+        }
+      }
+      if (field === 'imageUrl') return { ...spec, imageUrl: value };
       return spec;
     }));
   }, []);
 
+  const handleTemplateImageRequest = useCallback((slideId: string) => {
+    setTemplateImageSelection({ slideId, field: 'imageUrl' });
+    setShowUnsplashSearch(true);
+  }, []);
+
+  const handleSlideFormattingUpdate = useCallback((slideId: string, key: string, patch: Record<string, unknown>) => {
+    setSlideSpecs((prev) =>
+      prev.map((spec) => {
+        if (spec.id !== slideId) return spec;
+
+        return {
+          ...spec,
+          formatting: {
+            ...(spec.formatting || {}),
+            [key]: {
+              ...((spec.formatting || {})[key] || {}),
+              ...patch,
+            },
+          },
+        };
+      })
+    );
+  }, []);
+
   // User avatar (loaded from localStorage to avoid hydration mismatch)
   const [avatarUrl, setAvatarUrl] = useState('');
   const [avatarName, setAvatarName] = useState('');
@@ -123,7 +163,7 @@ export default function GoogleSlidesEditor() {
     document.head.appendChild(link);
 
     // Load theme from localStorage if set from homepage
-    const savedTheme = localStorage.getItem('ppt_theme');
+    const savedTheme = normalizeTemplateId(localStorage.getItem('ppt_theme'));
     if (savedTheme && savedTheme in themes) {
       setCurrentTheme(savedTheme as keyof typeof themes);
     }
@@ -138,6 +178,11 @@ export default function GoogleSlidesEditor() {
     const generationModel = sessionStorage.getItem('generationModel');
     const generationImageSource = sessionStorage.getItem('generationImageSource');
     const isGeneratingFlag = sessionStorage.getItem('isGenerating');
+    const resolvedTheme = (normalizeTemplateId(localStorage.getItem('ppt_theme')) || currentTheme) as keyof typeof themes;
+
+    if (resolvedTheme !== currentTheme) {
+      setCurrentTheme(resolvedTheme);
+    }
 
     if (isGeneratingFlag === 'true' && generationPrompt && generationModel) {
       setIsGenerating(true);
@@ -177,8 +222,9 @@ export default function GoogleSlidesEditor() {
           const data = await response.json();
 
           // Transform API response to editor format
-          const headingFont = themes[currentTheme].headingFont || 'Arial';
-          const bodyFont = themes[currentTheme].bodyFont || 'Arial';
+          const activeTheme = themes[resolvedTheme];
+          const headingFont = activeTheme.headingFont || 'Arial';
+          const bodyFont = activeTheme.bodyFont || 'Arial';
           const generatedSlides: SlideModel[] = data.slides.map((slide: any, index: number) => {
             const layout = slide.layout || 'titleContent';
             let elements: EditorElement[] = [];
@@ -196,7 +242,7 @@ export default function GoogleSlidesEditor() {
                   height: 60,
                   text: slide.title || `Slide ${index + 1}`,
                   fontSize: 36,
-                  color: themes[currentTheme].titleColor,
+                  color: activeTheme.titleColor,
                   fontWeight: 'bold',
                   fontStyle: 'normal',
                   textDecoration: 'none',
@@ -212,7 +258,7 @@ export default function GoogleSlidesEditor() {
                   height: 280,
                   text: Array.isArray(slide.content) ? slide.content.join('\n\n') : slide.content || '',
                   fontSize: 18,
-                  color: themes[currentTheme].textColor,
+                  color: activeTheme.textColor,
                   fontWeight: 'normal',
                   fontStyle: 'normal',
                   textDecoration: 'none',
@@ -247,7 +293,7 @@ export default function GoogleSlidesEditor() {
                   height: 330,
                   text: leftContent,
                   fontSize: 20,
-                  color: themes[currentTheme].textColor,
+                  color: activeTheme.textColor,
                   fontWeight: 'normal',
                   fontStyle: 'normal',
                   textDecoration: 'none',
@@ -263,7 +309,7 @@ export default function GoogleSlidesEditor() {
                   height: 330,
                   text: rightContent,
                   fontSize: 20,
-                  color: themes[currentTheme].textColor,
+                  color: activeTheme.textColor,
                   fontWeight: 'normal',
                   fontStyle: 'normal',
                   textDecoration: 'none',
@@ -271,6 +317,62 @@ export default function GoogleSlidesEditor() {
                   fontFamily: bodyFont,
                 } as TextElement
               ];
+            } else if (layout === 'three_columns' && Array.isArray(slide.columns) && slide.columns.length > 0) {
+              elements = [
+                {
+                  id: createId(),
+                  type: 'text',
+                  x: 50,
+                  y: 30,
+                  width: 700,
+                  height: 50,
+                  text: slide.title || `Slide ${index + 1}`,
+                  fontSize: 34,
+                  color: activeTheme.titleColor,
+                  fontWeight: 'bold',
+                  fontStyle: 'normal',
+                  textDecoration: 'none',
+                  align: 'left',
+                  fontFamily: headingFont,
+                } as TextElement,
+                ...slide.columns.slice(0, 3).flatMap((column: any, columnIndex: number) => {
+                  const x = 45 + (columnIndex * 245);
+                  return [
+                    {
+                      id: createId(),
+                      type: 'text',
+                      x,
+                      y: 115,
+                      width: 210,
+                      height: 45,
+                      text: column.heading || `Column ${columnIndex + 1}`,
+                      fontSize: 22,
+                      color: activeTheme.titleColor,
+                      fontWeight: 'bold',
+                      fontStyle: 'normal',
+                      textDecoration: 'none',
+                      align: 'left',
+                      fontFamily: headingFont,
+                    } as TextElement,
+                    {
+                      id: createId(),
+                      type: 'text',
+                      x,
+                      y: 175,
+                      width: 210,
+                      height: 190,
+                      text: column.text || '',
+                      fontSize: 16,
+                      color: activeTheme.textColor,
+                      fontWeight: 'normal',
+                      fontStyle: 'normal',
+                      textDecoration: 'none',
+                      align: 'left',
+                      fontFamily: bodyFont,
+                    } as TextElement,
+                  ];
+                }),
+              ];
             } else {
               // Default: Title + Content layout
               elements = [
@@ -283,7 +385,7 @@ export default function GoogleSlidesEditor() {
                   height: 60,
                   text: slide.title || `Slide ${index + 1}`,
                   fontSize: 36,
-                  color: themes[currentTheme].titleColor,
+                  color: activeTheme.titleColor,
                   fontWeight: 'bold',
                   fontStyle: 'normal',
                   textDecoration: 'none',
@@ -299,7 +401,7 @@ export default function GoogleSlidesEditor() {
                   height: 280,
                   text: Array.isArray(slide.content) ? slide.content.join('\n\n') : slide.content || '',
                   fontSize: 20,
-                  color: themes[currentTheme].textColor,
+                  color: activeTheme.textColor,
                   fontWeight: 'normal',
                   fontStyle: 'normal',
                   textDecoration: 'none',
@@ -325,7 +427,7 @@ export default function GoogleSlidesEditor() {
           // Also create SlideSpec[] for template-based rendering
           const specs: SlideSpec[] = data.slides.map((slide: any, index: number) => {
             // Use layout from API if it's a valid LayoutType, otherwise infer
-            const validLayouts = ['title_subtitle', 'agenda', 'title_and_text', 'image_and_text', 'references', 'thank_you'];
+            const validLayouts = ['title_subtitle', 'agenda', 'title_and_text', 'three_columns', 'image_and_text', 'references', 'thank_you'];
             let layout: LayoutType;
             if (slide.layout && validLayouts.includes(slide.layout)) {
               layout = slide.layout as LayoutType;
@@ -337,14 +439,31 @@ export default function GoogleSlidesEditor() {
               layout = 'title_and_text';
             }
 
+            const contentArray = Array.isArray(slide.content)
+              ? slide.content
+              : (typeof slide.content === 'string' && slide.content.trim() ? [slide.content.trim()] : []);
+            const 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;
+
             return {
               id: `slide-${index + 1}`,
-              templateId: currentTheme,
+              templateId: resolvedTheme,
               layout,
               title: slide.title || `Slide ${index + 1}`,
               subtitle: slide.subtitle || (layout === 'title_subtitle' ? (Array.isArray(slide.content) ? slide.content[0] : slide.content) : undefined),
-              body: ['title_subtitle', 'thank_you'].includes(layout) ? undefined : (Array.isArray(slide.content) ? slide.content.map((text: string) => ({ text })) : slide.content ? [{ text: slide.content }] : undefined),
-              items: layout === 'agenda' ? (Array.isArray(slide.content) ? slide.content.map((text: string) => ({ text })) : undefined) : undefined,
+              body: ['title_subtitle', 'thank_you', 'agenda', 'references', 'three_columns'].includes(layout)
+                ? undefined
+                : (contentArray.length ? [{ text: contentArray.join(' ') }] : undefined),
+              items: ['agenda', 'references'].includes(layout)
+                ? contentArray.map((text: string) => ({ text }))
+                : undefined,
+              columns: layout === 'three_columns' ? columns : undefined,
               imageUrl: slide.imageUrl || undefined,
             };
           });
@@ -367,7 +486,7 @@ export default function GoogleSlidesEditor() {
           setSlides([
             {
               id: createId(),
-              elements: createLayoutElements('titleContent', currentTheme),
+              elements: createLayoutElements('titleContent', resolvedTheme),
             },
           ]);
 
@@ -382,10 +501,10 @@ export default function GoogleSlidesEditor() {
     } else if (slides.length === 0) {
       // Initialize with one default slide if no generation
       const initialSlides = [
-        {
-          id: createId(),
-          elements: createLayoutElements('titleContent', currentTheme),
-        },
+          {
+            id: createId(),
+            elements: createLayoutElements('titleContent', resolvedTheme),
+          },
       ];
       setSlides(initialSlides);
       // Save initial state to history
@@ -434,7 +553,7 @@ export default function GoogleSlidesEditor() {
 
   // PDF/PPTX export via useExport hook
   const { exportToPDF, exportToPPTX } = useExport({
-    slideRef, slides, currentTheme, currentSlideIndex, zoom,
+    slideRef, slides, slideSpecs, currentTheme, currentSlideIndex, zoom,
     selectedId, isEditingTextId, presentationTitle,
     setCurrentSlideIndex, setZoom, setSelectedId, setIsEditingTextId,
   });
@@ -1239,6 +1358,7 @@ export default function GoogleSlidesEditor() {
         if (field.key === 'title' && !updated.title) updated.title = field.defaultValue;
         if (field.key === 'subtitle' && !updated.subtitle) updated.subtitle = field.defaultValue;
         if (field.key === 'body' && !updated.body) updated.body = field.defaultValue;
+        if (field.key === 'columns' && !updated.columns) updated.columns = field.defaultValue;
         if (field.key === 'items' && !updated.items) updated.items = field.defaultValue;
         if (field.key === 'imageUrl' && !updated.imageUrl) updated.imageUrl = field.defaultValue;
       }
@@ -1285,6 +1405,7 @@ export default function GoogleSlidesEditor() {
           if (field.key === 'title') newSpec.title = field.defaultValue;
           if (field.key === 'subtitle') newSpec.subtitle = field.defaultValue;
           if (field.key === 'body') newSpec.body = field.defaultValue;
+          if (field.key === 'columns') newSpec.columns = field.defaultValue;
           if (field.key === 'items') newSpec.items = field.defaultValue;
           if (field.key === 'imageUrl') newSpec.imageUrl = field.defaultValue;
         }
@@ -1391,12 +1512,14 @@ export default function GoogleSlidesEditor() {
                   <div
                     className="absolute inset-0 overflow-hidden"
                     style={{
-                      backgroundColor: (themes[currentTheme] as any).solidBackground || (themes[currentTheme] as any).background
+                      backgroundColor: isTemplateTheme
+                        ? 'transparent'
+                        : ((themes[currentTheme] as any).solidBackground || (themes[currentTheme] as any).background)
                     }}
                   >
                     {isTemplateTheme && slideSpecs[idx] ? (
                       /* Template thumbnail via SlideFactory */
-                      <div style={{ transform: 'scale(0.125)', transformOrigin: '0 0', width: 800, height: 450 }}>
+                      <div style={{ transform: 'scale(0.25)', transformOrigin: '0 0', width: 800, height: 450 }}>
                         {renderSlide(slideSpecs[idx], currentTheme as ThemeName)}
                       </div>
                     ) : (
@@ -1521,6 +1644,8 @@ export default function GoogleSlidesEditor() {
                     {renderSlide(slideSpecs[currentSlideIndex], currentTheme as ThemeName, {
                       isEditable: true,
                       onFieldUpdate: handleSlideFieldUpdate,
+                      onRequestImageSelect: handleTemplateImageRequest,
+                      onFormattingUpdate: handleSlideFormattingUpdate,
                     })}
                   </div>
                 )}
@@ -1562,11 +1687,15 @@ export default function GoogleSlidesEditor() {
           <BottomToolbar
             addText={addText}
             addImage={addImage}
-            openUnsplashSearch={() => setShowUnsplashSearch(true)}
+            openUnsplashSearch={() => {
+              setTemplateImageSelection(null);
+              setShowUnsplashSearch(true);
+            }}
             fileInputRef={fileInputRef}
             onFileChange={onFileChange}
             zoom={zoom}
             setZoom={setZoom}
+            isTemplateTheme={isTemplateTheme}
             selectedId={selectedId}
             availableLayouts={templateLayouts}
             currentLayout={currentSlideLayout}
@@ -1584,8 +1713,19 @@ export default function GoogleSlidesEditor() {
       {/* Unsplash Image Search */}
       {showUnsplashSearch && (
         <UnsplashImageSearch
-          onImageSelect={(url) => { addImageFromUrl(url); setShowUnsplashSearch(false); }}
-          onClose={() => setShowUnsplashSearch(false)}
+          onImageSelect={(url) => {
+            if (templateImageSelection) {
+              handleSlideFieldUpdate(templateImageSelection.slideId, templateImageSelection.field, url);
+              setTemplateImageSelection(null);
+            } else {
+              addImageFromUrl(url);
+            }
+            setShowUnsplashSearch(false);
+          }}
+          onClose={() => {
+            setShowUnsplashSearch(false);
+            setTemplateImageSelection(null);
+          }}
         />
       )}
 
@@ -1614,5 +1754,3 @@ export default function GoogleSlidesEditor() {
     </div >
   );
 }
-
-

components/editor/SlideThumbnailPanel.tsx

@@ -29,15 +29,19 @@ export function SlideThumbnailPanel(props: SlideThumbnailPanelProps) {
                                     ? '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 scale-[0.1] origin-top-left transform">
-                                    <div key={`${slide.id}-${theme}`} className="w-[1000px] h-[562px]">
-                                        {renderSlide(slide, theme)}
-                                    </div>
-                                </div>
-                            </div>
+                            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">

components/home/HomePage.tsx

@@ -5,10 +5,11 @@ import { useRouter } from 'next/navigation';
 import { LogIn, Moon, Sun, ArrowUp, Check, ChevronDown, User, LogOut } from 'lucide-react';
 import { useTheme } from '@/components/ThemeProvider';
 import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
+import { TEMPLATE_OPTIONS, TemplateOptionId, getTemplateLabel, normalizeTemplateId } from '@/lib/template-options';
 
 export default function HomePage() {
   const [prompt, setPrompt] = useState('');
-  const [template, setTemplate] = useState('neobrutalism');
+  const [template, setTemplate] = useState<TemplateOptionId>('neobrutalism');
   const [isGenerating, setIsGenerating] = useState(false);
   const [isSelectOpen, setIsSelectOpen] = useState(false);
   const [user, setUser] = useState<{ name: string; avatarUrl?: string } | null>(null);
@@ -19,6 +20,11 @@ export default function HomePage() {
 
   useEffect(() => {
     setMounted(true);
+
+    const savedTemplate = normalizeTemplateId(localStorage.getItem('ppt_theme'));
+    if (savedTemplate) {
+      setTemplate(savedTemplate);
+    }
     
     const initializeAuth = async () => {
       // Check stored auth
@@ -91,12 +97,6 @@ export default function HomePage() {
 
   const router = useRouter();
 
-  const templates = [
-    'neobrutalism',
-    'galeryn',
-    'noisy'
-  ];
-
   const handleSubmit = () => {
     if (!prompt.trim()) return;
     setIsGenerating(true);
@@ -219,26 +219,26 @@ export default function HomePage() {
                   onClick={() => setIsSelectOpen(!isSelectOpen)}
                   className="flex h-9 items-center justify-between gap-2 rounded-xl bg-white dark:bg-[#09090b] border border-zinc-200 dark:border-zinc-800 px-4 py-2 text-xs font-medium text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors"
                 >
-                  <span className="truncate">{template}</span>
+                  <span className="truncate">{getTemplateLabel(template)}</span>
                   <ChevronDown className={`h-3.5 w-3.5 opacity-50 transition-transform ${isSelectOpen ? 'rotate-180' : ''}`} />
                 </button>
                 
                 {isSelectOpen && (
                   <div className="absolute right-0 bottom-full mb-2 z-50 min-w-[12rem] overflow-hidden rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-[#09090b] text-zinc-950 dark:text-zinc-50 shadow-xl animate-in fade-in slide-in-from-bottom-2">
                     <div className="p-1">
-                      {templates.map((t) => (
+                      {TEMPLATE_OPTIONS.map((option) => (
                         <div
-                          key={t}
+                          key={option.id}
                           onClick={() => {
-                            setTemplate(t);
+                            setTemplate(option.id);
                             setIsSelectOpen(false);
                           }}
                           className="relative flex w-full cursor-pointer select-none items-center rounded-lg py-2 pl-9 pr-4 text-xs font-medium hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors"
                         >
                           <span className="absolute left-3 flex h-3.5 w-3.5 items-center justify-center">
-                            {template === t && <Check className="h-3.5 w-3.5" />}
+                            {template === option.id && <Check className="h-3.5 w-3.5" />}
                           </span>
-                          {t}
+                          {option.label}
                         </div>
                       ))}
                     </div>

components/slides/SlideFactory.tsx

@@ -3,15 +3,15 @@ import { SlideSpec, getTemplateById, TemplateStyles } from '@/data/templates';
 
 // Template-specific layout components
 import {
-  NeoTitleSubtitle, NeoAgenda, NeoTitleAndText,
+  NeoTitleSubtitle, NeoAgenda, NeoTitleAndText, NeoThreeColumns,
   NeoImageAndText, NeoReferences, NeoThankYou,
 } from './neobrutalism/layouts';
 import {
-  NoisyTitleSubtitle, NoisyAgenda, NoisyTitleAndText,
+  NoisyTitleSubtitle, NoisyAgenda, NoisyThreeColumns, NoisyTitleAndText,
   NoisyImageAndText, NoisyReferences, NoisyThankYou,
 } from './noisy/layouts';
 import {
-  GalerynTitleSubtitle, GalerynAgenda, GalerynTitleAndText,
+  GalerynTitleSubtitle, GalerynAgenda, GalerynThreeColumns, GalerynTitleAndText,
   GalerynImageAndText, GalerynReferences, GalerynThankYou,
 } from './galeryn/layouts';
 
@@ -19,6 +19,7 @@ import {
 import TitleSlideLayout from './TitleSlideLayout';
 import AgendaSlideLayout from './AgendaSlideLayout';
 import TitleAndBodyLayout from './TitleAndBodyLayout';
+import ThreeColumnLayout from './ThreeColumnLayout';
 import ImageAndTextLayout from './ImageAndTextLayout';
 import ReferenceLayout from './ReferenceLayout';
 import ThankYouLayout from './ThankYouLayout';
@@ -29,6 +30,8 @@ export type { SlideSpec } from '@/data/templates';
 export interface RenderSlideOptions {
   isEditable?: boolean;
   onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  onRequestImageSelect?: (slideId: string) => void;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
 }
 
 /**
@@ -41,7 +44,7 @@ export function renderSlide(
   _theme?: string,
   options?: RenderSlideOptions
 ): React.ReactNode {
-  const { isEditable = false, onFieldUpdate } = options || {};
+  const { isEditable = false, onFieldUpdate, onRequestImageSelect, onFormattingUpdate } = options || {};
 
   const template = getTemplateById(spec.templateId);
   if (!template) {
@@ -53,12 +56,15 @@ export function renderSlide(
     title: spec.title || '',
     subtitle: spec.subtitle,
     body: spec.body,
+    columns: spec.columns,
     items: spec.items,
     imageUrl: spec.imageUrl,
+    formatting: spec.formatting,
     styles,
     slideId: spec.id,
     isEditable,
     onFieldUpdate,
+    onFormattingUpdate,
   };
 
   // Template-specific rendering
@@ -67,7 +73,8 @@ export function renderSlide(
       case 'title_subtitle': return <NeoTitleSubtitle {...commonProps} />;
       case 'agenda': return <NeoAgenda {...commonProps} />;
       case 'title_and_text': return <NeoTitleAndText {...commonProps} />;
-      case 'image_and_text': return <NeoImageAndText {...commonProps} />;
+      case 'three_columns': return <NeoThreeColumns {...commonProps} />;
+      case 'image_and_text': return <NeoImageAndText {...commonProps} onRequestImageSelect={onRequestImageSelect} />;
       case 'references': return <NeoReferences {...commonProps} />;
       case 'thank_you': return <NeoThankYou {...commonProps} />;
     }
@@ -77,8 +84,9 @@ export function renderSlide(
     switch (spec.layout) {
       case 'title_subtitle': return <NoisyTitleSubtitle {...commonProps} />;
       case 'agenda': return <NoisyAgenda {...commonProps} />;
+      case 'three_columns': return <NoisyThreeColumns {...commonProps} />;
       case 'title_and_text': return <NoisyTitleAndText {...commonProps} />;
-      case 'image_and_text': return <NoisyImageAndText {...commonProps} />;
+      case 'image_and_text': return <NoisyImageAndText {...commonProps} onRequestImageSelect={onRequestImageSelect} />;
       case 'references': return <NoisyReferences {...commonProps} />;
       case 'thank_you': return <NoisyThankYou {...commonProps} />;
     }
@@ -88,8 +96,9 @@ export function renderSlide(
     switch (spec.layout) {
       case 'title_subtitle': return <GalerynTitleSubtitle {...commonProps} />;
       case 'agenda': return <GalerynAgenda {...commonProps} />;
+      case 'three_columns': return <GalerynThreeColumns {...commonProps} />;
       case 'title_and_text': return <GalerynTitleAndText {...commonProps} />;
-      case 'image_and_text': return <GalerynImageAndText {...commonProps} />;
+      case 'image_and_text': return <GalerynImageAndText {...commonProps} onRequestImageSelect={onRequestImageSelect} />;
       case 'references': return <GalerynReferences {...commonProps} />;
       case 'thank_you': return <GalerynThankYou {...commonProps} />;
     }
@@ -103,6 +112,8 @@ export function renderSlide(
       return <AgendaSlideLayout title={spec.title || ''} items={spec.items || []} styles={styles} slideId={spec.id} isEditable={isEditable} onFieldUpdate={onFieldUpdate} />;
     case 'title_and_text':
       return <TitleAndBodyLayout title={spec.title || ''} body={spec.body || []} styles={styles} slideId={spec.id} isEditable={isEditable} onFieldUpdate={onFieldUpdate} />;
+    case 'three_columns':
+      return <ThreeColumnLayout title={spec.title || ''} columns={spec.columns || []} styles={styles} slideId={spec.id} isEditable={isEditable} onFieldUpdate={onFieldUpdate} />;
     case 'image_and_text':
       return <ImageAndTextLayout title={spec.title || ''} body={spec.body?.[0]?.text || spec.subtitle || ''} imageUrl={spec.imageUrl} styles={styles} slideId={spec.id} isEditable={isEditable} onFieldUpdate={onFieldUpdate} />;
     case 'references':

components/slides/galeryn/layouts.tsx

@@ -1,312 +1,636 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { GripHorizontal, Image as ImageIcon } from 'lucide-react';
 import { TemplateStyles } from '@/data/templates';
-
-// ============================================================================
-// SHARED TYPES
-// ============================================================================
+import { PersistedDraggableSurface, SlideFormattingMap } from '@/components/slides/shared/PersistedDraggableSurface';
 
 interface LayoutProps {
   title: string;
   subtitle?: string;
   body?: Array<{ heading?: string; text: string }>;
+  columns?: Array<{ heading: string; text: string }>;
   items?: Array<{ text: string }>;
   imageUrl?: string;
+  formatting?: SlideFormattingMap;
   styles: TemplateStyles;
   slideId?: string;
   isEditable?: boolean;
   onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
+  onRequestImageSelect?: (slideId: string) => void;
+}
+
+interface DraggableSurfaceProps {
+  children: React.ReactNode;
+  constraintsRef: React.RefObject<HTMLDivElement | null>;
+  isEditable?: boolean;
+  slideId?: string;
+  formatKey: string;
+  formatting?: SlideFormattingMap;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  handleClassName?: string;
 }
 
-// ============================================================================
-// GALERYN THEME CONSTANTS
-// ============================================================================
+interface EditableContentProps {
+  value: string;
+  as?: React.ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  isEditable?: boolean;
+  multiline?: boolean;
+  onCommit?: (value: string) => void;
+}
+
+const DEFAULT_AGENDA_IMAGE =
+  'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&q=80&w=1000';
 
 const COLORS = {
-  bg: '#fbf9f4',
+  background: '#fbf9f4',
   text: '#021d30',
-  accent: '#021d30',
+  surface: '#f5f3ee',
   secondary: '#d4e8d4',
-  cardBg: '#f5f3ee',
-  placeholder: '#eae8e3',
+  placeholder: '#ebe5da',
+  white: '#ffffff',
 };
 
-const FONTS = {
-  serif: 'Newsreader, "Times New Roman", Georgia, serif',
-  sans: 'Manrope, "Helvetica Neue", Arial, sans-serif',
-};
+function stopPointerDown(e: React.PointerEvent<HTMLElement>) {
+  e.stopPropagation();
+}
+
+function readEditableValue(value: string) {
+  return value
+    .replace(/\u00a0/g, ' ')
+    .replace(/\r/g, '')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
+function formatIndex(index: number) {
+  return String(index).padStart(2, '0');
+}
+
+function parseAgendaItem(text: string) {
+  const [title, description] = text.split('||').map((part) => part.trim());
+  return {
+    title: title || text || '',
+    description: description || '',
+  };
+}
+
+function serializeAgendaItem(title: string, description: string) {
+  return description ? `${title} || ${description}` : title;
+}
 
-// ============================================================================
-// 1. GalerynTitleSubtitle
-// ============================================================================
+function DraggableSurface({
+  children,
+  constraintsRef,
+  isEditable = false,
+  slideId,
+  formatKey,
+  formatting,
+  onFormattingUpdate,
+  className,
+  style,
+  handleClassName = '-top-6 left-1/2 -translate-x-1/2',
+}: DraggableSurfaceProps) {
+  return (
+    <PersistedDraggableSurface
+      constraintsRef={constraintsRef}
+      slideId={slideId}
+      formatKey={formatKey}
+      formatting={formatting}
+      onFormattingUpdate={onFormattingUpdate}
+      isEditable={isEditable}
+      className={className}
+      style={style}
+      handleClassName={handleClassName}
+      groupClassName="group"
+      handle={
+        <div className="rounded border border-black/10 bg-white p-1 shadow-md opacity-0 transition-opacity group-hover:opacity-100">
+          <GripHorizontal size={14} className="text-black" />
+        </div>
+      }
+    >
+      {children}
+    </PersistedDraggableSurface>
+  );
+}
+
+function EditableContent({
+  value,
+  as = 'div',
+  className,
+  style,
+  isEditable = false,
+  multiline = false,
+  onCommit,
+}: EditableContentProps) {
+  const contentRef = useRef<HTMLElement>(null);
+  const Component = as as any;
+
+  useEffect(() => {
+    if (!contentRef.current) return;
+    if (document.activeElement === contentRef.current) return;
+    if (contentRef.current.innerText !== value) {
+      contentRef.current.innerText = value;
+    }
+  }, [value]);
+
+  return (
+    <Component
+      ref={contentRef}
+      contentEditable={isEditable}
+      suppressContentEditableWarning
+      spellCheck={false}
+      onPointerDown={stopPointerDown}
+      onBlur={() => {
+        if (!isEditable || !contentRef.current || !onCommit) return;
+        const nextValue = readEditableValue(contentRef.current.innerText);
+        if (nextValue !== value) {
+          onCommit(nextValue);
+        } else if (contentRef.current.innerText !== value) {
+          contentRef.current.innerText = value;
+        }
+      }}
+      onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          if (contentRef.current) {
+            contentRef.current.innerText = value;
+          }
+          (e.currentTarget as HTMLElement).blur();
+        }
+
+        if (!multiline && e.key === 'Enter') {
+          e.preventDefault();
+          (e.currentTarget as HTMLElement).blur();
+        }
+      }}
+      className={`outline-none ${isEditable ? 'cursor-text' : ''} ${className || ''}`}
+      style={{
+        whiteSpace: multiline ? 'pre-line' : 'normal',
+        ...style,
+      }}
+    >
+      {value}
+    </Component>
+  );
+}
+
+function EditorialImage({
+  src,
+  alt,
+  constraintsRef,
+  isEditable = false,
+  slideId,
+  formatKey,
+  formatting,
+  onFormattingUpdate,
+  onReplace,
+  className,
+  children,
+}: {
+  src?: string;
+  alt: string;
+  constraintsRef: React.RefObject<HTMLDivElement | null>;
+  isEditable?: boolean;
+  slideId?: string;
+  formatKey: string;
+  formatting?: SlideFormattingMap;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
+  onReplace?: () => void;
+  className?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <DraggableSurface
+      constraintsRef={constraintsRef}
+      isEditable={isEditable}
+      slideId={slideId}
+      formatKey={formatKey}
+      formatting={formatting}
+      onFormattingUpdate={onFormattingUpdate}
+      className={className}
+      handleClassName="top-4 right-4"
+    >
+      <div className="relative h-full w-full overflow-hidden">
+        {src ? (
+          <img
+            src={src}
+            alt={alt}
+            referrerPolicy="no-referrer"
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          <div
+            className="flex h-full w-full items-center justify-center"
+            style={{ backgroundColor: COLORS.placeholder }}
+          >
+            <ImageIcon size={28} className="text-[#021d30]/25" />
+          </div>
+        )}
+
+        {children}
+
+        {isEditable && onReplace && (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/35 opacity-0 transition-opacity group-hover:opacity-100">
+            <button
+              type="button"
+              onClick={onReplace}
+              onPointerDown={stopPointerDown}
+              className="pointer-events-auto inline-flex items-center gap-2 rounded bg-black/70 px-4 py-2 text-sm font-bold text-white transition-colors hover:bg-black/85"
+            >
+              <ImageIcon size={16} />
+              Replace Image
+            </button>
+          </div>
+        )}
+      </div>
+    </DraggableSurface>
+  );
+}
 
 export function GalerynTitleSubtitle({
   title,
   subtitle,
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<string | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
-
-  const handleBlur = (field: string) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'subtitle' && tempSubtitle !== subtitle) onFieldUpdate(slideId, 'subtitle', tempSubtitle);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'subtitle') setTempSubtitle(subtitle || '');
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
 
   return (
     <div
-      className="w-full h-full flex flex-col items-center justify-center relative overflow-hidden p-8"
-      style={{ backgroundColor: COLORS.bg }}
+      ref={slideRef}
+      className="h-full w-full overflow-hidden px-12 py-16 md:px-16 md:py-20"
+      style={{ backgroundColor: styles.colors.background || COLORS.background }}
     >
-      {/* Title */}
-      {editingField === 'title' ? (
-        <input
-          type="text"
-          value={tempTitle}
-          onChange={(e) => setTempTitle(e.target.value)}
-          onBlur={() => handleBlur('title')}
-          onKeyDown={(e) => handleKeyDown(e, 'title')}
-          className="w-full text-center bg-transparent outline-none"
-          style={{
-            fontSize: '72px',
-            fontFamily: FONTS.serif,
-            fontWeight: 800,
-            color: COLORS.text,
-            letterSpacing: '-0.04em',
-            lineHeight: 1,
-            textTransform: 'uppercase' as const,
-          }}
-          autoFocus
-        />
-      ) : (
-        <h1
-          className={`text-center ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-          style={{
-            fontSize: '72px',
-            fontFamily: FONTS.serif,
-            fontWeight: 800,
-            color: COLORS.text,
-            letterSpacing: '-0.04em',
-            lineHeight: 1,
-            textTransform: 'uppercase' as const,
-          }}
-          onClick={() => { if (isEditable) { setEditingField('title'); setTempTitle(title); } }}
-        >
-          {title || 'Presentation Title'}
-        </h1>
-      )}
-
-      {/* Subtitle */}
-      {(subtitle || isEditable) && (
-        editingField === 'subtitle' ? (
-          <input
-            type="text"
-            value={tempSubtitle}
-            onChange={(e) => setTempSubtitle(e.target.value)}
-            onBlur={() => handleBlur('subtitle')}
-            onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
-            className="w-full text-center bg-transparent outline-none mt-6"
-            style={{
-              fontSize: '12px',
-              fontFamily: FONTS.sans,
-              color: COLORS.text,
-              opacity: 0.8,
-              maxWidth: '480px',
-            }}
-            autoFocus
-          />
-        ) : (
-          <p
-            className={`text-center mt-6 ${isEditable ? 'cursor-pointer hover:opacity-60' : ''}`}
-            style={{
-              fontSize: '12px',
-              fontFamily: FONTS.sans,
-              color: COLORS.text,
-              opacity: 0.8,
-              maxWidth: '480px',
-              lineHeight: 1.6,
-            }}
-            onClick={() => { if (isEditable) { setEditingField('subtitle'); setTempSubtitle(subtitle || ''); } }}
+      <div className="flex h-full flex-col justify-center">
+        <div className="flex flex-1 items-center justify-center">
+          <DraggableSurface
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey="title"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="mx-auto max-w-full"
           >
-            {subtitle || (isEditable ? 'Click to add subtitle' : '')}
-          </p>
-        )
-      )}
+            <EditableContent
+              as="h1"
+              value={title || 'GALERYN'}
+              isEditable={isEditable}
+              multiline
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+              }}
+              className="text-center"
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '128px',
+                fontWeight: 800,
+                letterSpacing: '-0.08em',
+                lineHeight: 0.9,
+                color: styles.colors.text,
+              }}
+            />
+          </DraggableSurface>
+        </div>
+
+        {(subtitle || isEditable) && (
+          <div className="mx-auto flex max-w-[560px] justify-center">
+            <DraggableSurface
+              constraintsRef={slideRef}
+              isEditable={isEditable}
+              slideId={slideId}
+              formatKey="subtitle"
+              formatting={formatting}
+              onFormattingUpdate={onFormattingUpdate}
+              className="w-full"
+            >
+              <EditableContent
+                as="p"
+                value={subtitle || ''}
+                isEditable={isEditable}
+                multiline
+                onCommit={(value) => {
+                  if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'subtitle', value);
+                }}
+                className="text-center"
+                style={{
+                  fontFamily: styles.fonts.body,
+                  fontSize: '15px',
+                  lineHeight: 1.75,
+                  color: styles.colors.text,
+                  opacity: 0.9,
+                }}
+              />
+            </DraggableSurface>
+          </div>
+        )}
+      </div>
     </div>
   );
 }
 
-// ============================================================================
-// 2. GalerynAgenda
-// ============================================================================
-
 export function GalerynAgenda({
   title,
-  subtitle,
   items = [],
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempItems, setTempItems] = useState(items.map((i) => i.text));
-
-  const handleBlur = (field: string, index?: number) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'items' && index !== undefined && tempItems[index] !== items[index]?.text)
-      onFieldUpdate(slideId, 'items', tempItems[index], index);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field, index); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'items') setTempItems(items.map((i) => i.text));
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
+  const agendaItems = items.length ? items : [{ text: '' }];
 
   return (
     <div
-      className="w-full h-full flex flex-row relative overflow-hidden"
-      style={{ backgroundColor: COLORS.bg }}
+      ref={slideRef}
+      className="flex h-full w-full overflow-hidden"
+      style={{ backgroundColor: styles.colors.background || COLORS.background }}
     >
-      {/* Left strip — narrow image / decorative area */}
-      <div
-        className="flex flex-col justify-end p-5"
-        style={{ width: '18%', backgroundColor: COLORS.placeholder }}
-      >
-        <span
-          style={{
-            fontSize: '10px',
-            fontFamily: FONTS.serif,
-            fontStyle: 'italic',
-            color: COLORS.text,
-            opacity: 0.5,
-            lineHeight: 1.5,
-          }}
-        >
-          {subtitle || 'A curated overview of topics and themes.'}
-        </span>
+      <div className="h-full w-[19%] p-4">
+        <EditorialImage
+          src={DEFAULT_AGENDA_IMAGE}
+          alt="Editorial texture"
+          constraintsRef={slideRef}
+          isEditable={isEditable}
+          slideId={slideId}
+          formatKey="agenda-image"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          className="h-full w-full"
+        />
       </div>
 
-      {/* Right main content */}
-      <div className="flex-1 flex flex-col p-8">
-        {/* Title */}
-        {editingField?.field === 'title' ? (
-          <input
-            type="text"
-            value={tempTitle}
-            onChange={(e) => setTempTitle(e.target.value)}
-            onBlur={() => handleBlur('title')}
-            onKeyDown={(e) => handleKeyDown(e, 'title')}
-            className="bg-transparent outline-none mb-6"
-            style={{
-              fontSize: '36px',
-              fontFamily: FONTS.serif,
-              fontWeight: 800,
-              color: COLORS.text,
-            }}
-            autoFocus
-          />
-        ) : (
-          <h2
-            className={`mb-6 ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-            style={{
-              fontSize: '36px',
-              fontFamily: FONTS.serif,
-              fontWeight: 800,
-              color: COLORS.text,
-              lineHeight: 1.1,
-            }}
-            onClick={() => { if (isEditable) { setEditingField({ field: 'title' }); setTempTitle(title); } }}
+      <div className="flex flex-1 flex-col px-10 py-12 md:px-14 md:py-14">
+        <div className="mb-10 flex justify-center">
+          <DraggableSurface
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey="agenda-title"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="w-fit"
           >
-            {title}
-          </h2>
-        )}
+            <EditableContent
+              as="h2"
+              value={title || 'Table of Contents'}
+              isEditable={isEditable}
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+              }}
+              className="text-center"
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '54px',
+                fontWeight: 800,
+                lineHeight: 1,
+                color: styles.colors.text,
+              }}
+            />
+          </DraggableSurface>
+        </div>
+
+        <div className="flex flex-1 justify-center">
+          <div className="flex w-full max-w-[560px] flex-col justify-center">
+            {agendaItems.map((item, index) => {
+              const parsed = parseAgendaItem(item.text);
+
+              return (
+                <DraggableSurface
+                  key={`${index}-${item.text}`}
+                  constraintsRef={slideRef}
+                  isEditable={isEditable}
+                  slideId={slideId}
+                  formatKey={`agenda-item-${index}`}
+                  formatting={formatting}
+                  onFormattingUpdate={onFormattingUpdate}
+                  className="border-b border-[#021d30]/10 py-4"
+                  handleClassName="-top-4 right-0"
+                >
+                  <div className="flex items-end justify-between gap-6">
+                    <div className="min-w-0 flex-1">
+                      <EditableContent
+                        as="h3"
+                        value={parsed.title}
+                        isEditable={isEditable}
+                        onCommit={(value) => {
+                          if (slideId && onFieldUpdate) {
+                            onFieldUpdate(slideId, 'items', serializeAgendaItem(value, parsed.description), index);
+                          }
+                        }}
+                        style={{
+                          fontFamily: styles.fonts.body,
+                          fontSize: '22px',
+                          fontWeight: 700,
+                          color: styles.colors.text,
+                          lineHeight: 1.2,
+                        }}
+                      />
+                      {(parsed.description || isEditable) && (
+                        <EditableContent
+                          as="p"
+                          value={parsed.description}
+                          isEditable={isEditable}
+                          multiline
+                          onCommit={(value) => {
+                            if (slideId && onFieldUpdate) {
+                              onFieldUpdate(slideId, 'items', serializeAgendaItem(parsed.title, value), index);
+                            }
+                          }}
+                          className="mt-1 lowercase"
+                          style={{
+                            fontFamily: styles.fonts.body,
+                            fontSize: '12px',
+                            lineHeight: 1.55,
+                            color: styles.colors.text,
+                            opacity: 0.6,
+                          }}
+                        />
+                      )}
+                    </div>
+
+                    <span
+                      className="shrink-0"
+                      style={{
+                        fontFamily: styles.fonts.body,
+                        fontSize: '26px',
+                        fontWeight: 700,
+                        color: styles.colors.text,
+                      }}
+                    >
+                      {formatIndex(index + 1)}
+                    </span>
+                  </div>
+                </DraggableSurface>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function GalerynThreeColumns({
+  title,
+  columns = [],
+  formatting,
+  styles,
+  slideId,
+  isEditable = false,
+  onFieldUpdate,
+  onFormattingUpdate,
+}: LayoutProps) {
+  const slideRef = useRef<HTMLDivElement>(null);
+  const columnItems = columns.length ? columns : [{ heading: '', text: '' }];
 
-        {/* Items list */}
-        <div className="flex flex-col flex-1">
-          {items.map((item, i) => (
-            <div
-              key={i}
-              className="flex items-center justify-between py-3"
-              style={{ borderBottom: `1px solid rgba(2, 29, 48, 0.1)` }}
+  return (
+    <div
+      ref={slideRef}
+      className="h-full w-full overflow-hidden px-14 py-16 md:px-16 md:py-20"
+      style={{ backgroundColor: styles.colors.background || COLORS.background }}
+    >
+      <div className="flex h-full flex-col justify-center">
+        <div className="mb-16 flex items-start justify-between gap-8">
+          <DraggableSurface
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey="columns-title"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="max-w-[520px]"
+          >
+            <EditableContent
+              as="h2"
+              value={title || 'Core Principles'}
+              isEditable={isEditable}
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+              }}
+              style={{
+                fontFamily: styles.fonts.heading,
+                fontSize: '54px',
+                fontWeight: 700,
+                lineHeight: 1,
+                color: styles.colors.text,
+              }}
+            />
+          </DraggableSurface>
+
+          <DraggableSurface
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey="columns-tag"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="shrink-0"
+            handleClassName="-top-5 right-0"
+          >
+            <span
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '13px',
+                fontWeight: 600,
+                letterSpacing: '0.08em',
+                color: styles.colors.text,
+                opacity: 0.55,
+              }}
             >
-              {/* Item text */}
-              {editingField?.field === 'items' && editingField?.index === i ? (
-                <input
-                  type="text"
-                  value={tempItems[i] || ''}
-                  onChange={(e) => {
-                    const next = [...tempItems];
-                    next[i] = e.target.value;
-                    setTempItems(next);
-                  }}
-                  onBlur={() => handleBlur('items', i)}
-                  onKeyDown={(e) => handleKeyDown(e, 'items', i)}
-                  className="flex-1 bg-transparent outline-none"
-                  style={{
-                    fontSize: '14px',
-                    fontFamily: FONTS.sans,
-                    color: COLORS.text,
-                  }}
-                  autoFocus
-                />
-              ) : (
+              001 // Design
+            </span>
+          </DraggableSurface>
+        </div>
+
+        <div className="grid grid-cols-3 gap-10">
+          {columnItems.map((column, index) => (
+              <DraggableSurface
+                key={`${index}-${column.heading}-${column.text}`}
+                constraintsRef={slideRef}
+                isEditable={isEditable}
+                slideId={slideId}
+                formatKey={`column-${index}`}
+                formatting={formatting}
+                onFormattingUpdate={onFormattingUpdate}
+                className="h-full"
+              >
+              <div className="flex h-full flex-col items-start">
                 <span
-                  className={`flex-1 ${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
+                  className="mb-5"
                   style={{
-                    fontSize: '14px',
-                    fontFamily: FONTS.sans,
-                    color: COLORS.text,
-                    lineHeight: 1.5,
-                  }}
-                  onClick={() => {
-                    if (isEditable) {
-                      setEditingField({ field: 'items', index: i });
-                      setTempItems(items.map((x) => x.text));
-                    }
+                    fontFamily: styles.fonts.body,
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    letterSpacing: '0.08em',
+                    color: styles.colors.text,
+                    opacity: 0.55,
                   }}
                 >
-                  {item.text}
+                  {formatIndex(index + 1)}
                 </span>
-              )}
 
-              {/* Zero-padded number */}
-              <span
-                style={{
-                  fontSize: '12px',
-                  fontFamily: FONTS.sans,
-                  color: COLORS.text,
-                  opacity: 0.35,
-                  marginLeft: '16px',
-                  fontVariantNumeric: 'tabular-nums',
-                }}
-              >
-                {String(i + 1).padStart(2, '0')}
-              </span>
-            </div>
+                <EditableContent
+                  as="h3"
+                  value={column.heading}
+                  isEditable={isEditable}
+                  onCommit={(value) => {
+                    if (slideId && onFieldUpdate) {
+                      onFieldUpdate(
+                        slideId,
+                        'columns',
+                        JSON.stringify({ heading: value, text: column.text }),
+                        index
+                      );
+                    }
+                  }}
+                  className="mb-5"
+                  style={{
+                    fontFamily: styles.fonts.body,
+                    fontSize: '28px',
+                    fontWeight: 700,
+                    lineHeight: 1.1,
+                    color: styles.colors.text,
+                  }}
+                />
+
+                <EditableContent
+                  as="p"
+                  value={column.text}
+                  isEditable={isEditable}
+                  multiline
+                  onCommit={(value) => {
+                    if (slideId && onFieldUpdate) {
+                      onFieldUpdate(
+                        slideId,
+                        'columns',
+                        JSON.stringify({ heading: column.heading, text: value }),
+                        index
+                      );
+                    }
+                  }}
+                  style={{
+                    fontFamily: styles.fonts.body,
+                    fontSize: '15px',
+                    lineHeight: 1.75,
+                    color: styles.colors.text,
+                    opacity: 0.72,
+                  }}
+                />
+              </div>
+            </DraggableSurface>
           ))}
         </div>
       </div>
@@ -314,574 +638,409 @@ export function GalerynAgenda({
   );
 }
 
-// ============================================================================
-// 3. GalerynTitleAndText
-// ============================================================================
-
 export function GalerynTitleAndText({
   title,
   body = [],
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempBody, setTempBody] = useState(body.map((b) => b.text));
-
-  const handleBlur = (field: string, index?: number) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'body' && index !== undefined && tempBody[index] !== body[index]?.text)
-      onFieldUpdate(slideId, 'body', tempBody[index], index);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleBlur(field, index); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'body') setTempBody(body.map((b) => b.text));
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
+  const bodyItems = body.length ? body : [{ text: '' }];
 
   return (
     <div
-      className="w-full h-full flex flex-row items-center relative overflow-hidden p-10"
-      style={{ backgroundColor: COLORS.bg }}
+      ref={slideRef}
+      className="flex h-full w-full items-center overflow-hidden px-14 py-16 md:px-16"
+      style={{ backgroundColor: styles.colors.background || COLORS.background }}
     >
-      {/* Left column — Title */}
-      <div className="w-1/2 pr-8 flex flex-col justify-center">
-        {editingField?.field === 'title' ? (
-          <input
-            type="text"
-            value={tempTitle}
-            onChange={(e) => setTempTitle(e.target.value)}
-            onBlur={() => handleBlur('title')}
-            onKeyDown={(e) => handleKeyDown(e, 'title')}
-            className="w-full bg-transparent outline-none"
-            style={{
-              fontSize: '48px',
-              fontFamily: FONTS.serif,
-              fontWeight: 800,
-              color: COLORS.text,
-              lineHeight: 1.05,
-              letterSpacing: '-0.02em',
-            }}
-            autoFocus
-          />
-        ) : (
-          <h2
-            className={`${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-            style={{
-              fontSize: '48px',
-              fontFamily: FONTS.serif,
-              fontWeight: 800,
-              color: COLORS.text,
-              lineHeight: 1.05,
-              letterSpacing: '-0.02em',
-            }}
-            onClick={() => { if (isEditable) { setEditingField({ field: 'title' }); setTempTitle(title); } }}
+      <div className="grid w-full grid-cols-12 gap-10">
+        <div className="col-span-7 flex items-start">
+          <DraggableSurface
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey="title-and-text-title"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="max-w-[440px]"
           >
-            {title}
-          </h2>
-        )}
-      </div>
+            <EditableContent
+              as="h2"
+              value={title || 'The Architectural Precision of Design'}
+              isEditable={isEditable}
+              multiline
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+              }}
+              style={{
+                fontFamily: styles.fonts.heading,
+                fontSize: '68px',
+                fontWeight: 700,
+                lineHeight: 0.95,
+                letterSpacing: '-0.04em',
+                color: styles.colors.text,
+              }}
+            />
+          </DraggableSurface>
+        </div>
 
-      {/* Right column — Body */}
-      <div className="w-1/2 pl-8 flex flex-col justify-center gap-4">
-        {body.map((b, i) => (
-          <div key={i}>
-            {b.heading && (
-              <span
-                style={{
-                  fontSize: '10px',
-                  fontFamily: FONTS.sans,
-                  fontWeight: 700,
-                  color: COLORS.text,
-                  textTransform: 'uppercase' as const,
-                  letterSpacing: '0.1em',
-                  opacity: 0.45,
-                  display: 'block',
-                  marginBottom: '4px',
-                }}
-              >
-                {b.heading}
-              </span>
-            )}
-
-            {editingField?.field === 'body' && editingField?.index === i ? (
-              <textarea
-                value={tempBody[i] || ''}
-                onChange={(e) => {
-                  const next = [...tempBody];
-                  next[i] = e.target.value;
-                  setTempBody(next);
-                }}
-                onBlur={() => handleBlur('body', i)}
-                onKeyDown={(e) => handleKeyDown(e, 'body', i)}
-                className="w-full bg-transparent outline-none resize-none"
-                style={{
-                  fontSize: '14px',
-                  fontFamily: FONTS.sans,
-                  color: COLORS.text,
-                  lineHeight: 1.7,
-                  opacity: 0.8,
-                }}
-                rows={3}
-                autoFocus
-              />
-            ) : (
-              <p
-                className={`${isEditable ? 'cursor-pointer hover:opacity-60' : ''}`}
-                style={{
-                  fontSize: '14px',
-                  fontFamily: FONTS.sans,
-                  color: COLORS.text,
-                  lineHeight: 1.7,
-                  opacity: 0.8,
-                }}
-                onClick={() => {
-                  if (isEditable) {
-                    setEditingField({ field: 'body', index: i });
-                    setTempBody(body.map((x) => x.text));
-                  }
-                }}
-              >
-                {b.text}
-              </p>
-            )}
-          </div>
-        ))}
+        <div className="col-span-5 flex flex-col justify-end gap-5">
+          {bodyItems.map((entry, index) => (
+            <DraggableSurface
+              key={`${index}-${entry.text}`}
+              constraintsRef={slideRef}
+              isEditable={isEditable}
+              slideId={slideId}
+              formatKey={`title-and-text-body-${index}`}
+              formatting={formatting}
+              onFormattingUpdate={onFormattingUpdate}
+              className="w-full"
+              handleClassName="-top-4 right-0"
+            >
+              <div>
+                {entry.heading && (
+                  <div
+                    className="mb-2 uppercase"
+                    style={{
+                      fontFamily: styles.fonts.body,
+                      fontSize: '11px',
+                      fontWeight: 700,
+                      letterSpacing: '0.12em',
+                      color: styles.colors.text,
+                      opacity: 0.45,
+                    }}
+                  >
+                    {entry.heading}
+                  </div>
+                )}
+
+                <EditableContent
+                  as="p"
+                  value={entry.text}
+                  isEditable={isEditable}
+                  multiline
+                  onCommit={(value) => {
+                    if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'body', value, index);
+                  }}
+                  style={{
+                    fontFamily: styles.fonts.body,
+                    fontSize: '16px',
+                    lineHeight: 1.75,
+                    color: styles.colors.text,
+                    opacity: 0.8,
+                  }}
+                />
+              </div>
+            </DraggableSurface>
+          ))}
+        </div>
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 4. GalerynImageAndText
-// ============================================================================
-
 export function GalerynImageAndText({
   title,
   body = [],
   imageUrl,
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
+  onRequestImageSelect,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<string | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempBody, setTempBody] = useState(body[0]?.text || '');
-
-  const handleBlur = (field: string) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'body' && tempBody !== (body[0]?.text || '')) onFieldUpdate(slideId, 'body', tempBody, 0);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
-    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleBlur(field); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      setTempTitle(title);
-      setTempBody(body[0]?.text || '');
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
+  const bodyText = body[0]?.text || '';
 
   return (
     <div
-      className="w-full h-full flex flex-row relative overflow-hidden"
-      style={{ backgroundColor: COLORS.bg }}
+      ref={slideRef}
+      className="flex h-full w-full overflow-hidden"
+      style={{ backgroundColor: styles.colors.background || COLORS.background }}
     >
-      {/* Left — Image */}
-      <div className="w-1/2 h-full relative" style={{ backgroundColor: COLORS.placeholder }}>
-        {imageUrl ? (
-          <img
-            src={imageUrl}
-            alt={title}
-            className="w-full h-full object-cover"
-          />
-        ) : (
-          <div className="w-full h-full flex items-center justify-center">
-            <svg
-              className="w-10 h-10"
-              fill="none"
-              stroke={COLORS.text}
-              strokeWidth={0.8}
-              viewBox="0 0 24 24"
-              style={{ opacity: 0.2 }}
-            >
-              <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
-            </svg>
-          </div>
-        )}
-
-        {/* Small label overlay */}
-        <div
-          className="absolute bottom-3 left-3 px-2 py-1"
-          style={{
-            backgroundColor: 'rgba(255, 255, 255, 0.25)',
-            backdropFilter: 'blur(8px)',
-            WebkitBackdropFilter: 'blur(8px)',
-          }}
+      <div className="h-full w-1/2 p-4 pr-2">
+        <EditorialImage
+          src={imageUrl}
+          alt={title || 'Galeryn image'}
+          constraintsRef={slideRef}
+          isEditable={isEditable}
+          slideId={slideId}
+          formatKey="image-card"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          onReplace={
+            isEditable && slideId && onRequestImageSelect
+              ? () => onRequestImageSelect(slideId)
+              : undefined
+          }
+          className="h-full w-full"
         >
-          <span
+          <div
+            className="absolute bottom-8 left-8 px-4 py-2"
             style={{
-              fontSize: '8px',
-              fontFamily: FONTS.sans,
-              fontWeight: 600,
-              color: COLORS.text,
-              textTransform: 'uppercase' as const,
-              letterSpacing: '0.1em',
-              opacity: 0.7,
+              backgroundColor: 'rgba(255,255,255,0.5)',
+              backdropFilter: 'blur(12px)',
+              WebkitBackdropFilter: 'blur(12px)',
             }}
           >
-            001 Stories
-          </span>
-        </div>
+            <span
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '12px',
+                fontWeight: 600,
+                color: styles.colors.text,
+                letterSpacing: '0.08em',
+              }}
+            >
+              001 Stories
+            </span>
+          </div>
+        </EditorialImage>
       </div>
 
-      {/* Right — Text */}
       <div
-        className="w-1/2 h-full flex flex-col justify-center p-10"
-        style={{ backgroundColor: COLORS.cardBg }}
+        className="flex h-full w-1/2 items-center p-12 md:p-16"
+        style={{ backgroundColor: styles.colors.cardBg || COLORS.surface }}
       >
-        {/* Title */}
-        {editingField === 'title' ? (
-          <input
-            type="text"
-            value={tempTitle}
-            onChange={(e) => setTempTitle(e.target.value)}
-            onBlur={() => handleBlur('title')}
-            onKeyDown={(e) => handleKeyDown(e, 'title')}
-            className="w-full bg-transparent outline-none mb-4"
-            style={{
-              fontSize: '28px',
-              fontFamily: FONTS.serif,
-              fontWeight: 700,
-              color: COLORS.text,
-              lineHeight: 1.2,
-            }}
-            autoFocus
-          />
-        ) : (
-          <h2
-            className={`mb-4 ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-            style={{
-              fontSize: '28px',
-              fontFamily: FONTS.serif,
-              fontWeight: 700,
-              color: COLORS.text,
-              lineHeight: 1.2,
-            }}
-            onClick={() => { if (isEditable) { setEditingField('title'); setTempTitle(title); } }}
-          >
-            {title}
-          </h2>
-        )}
+        <DraggableSurface
+          constraintsRef={slideRef}
+          isEditable={isEditable}
+          slideId={slideId}
+          formatKey="image-text-content"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          className="w-full"
+        >
+          <div className="flex flex-col items-start">
+            <EditableContent
+              as="h2"
+              value={title || 'Curated Experiences'}
+              isEditable={isEditable}
+              multiline
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+              }}
+              className="mb-8"
+              style={{
+                fontFamily: styles.fonts.heading,
+                fontSize: '54px',
+                fontWeight: 700,
+                lineHeight: 0.98,
+                color: styles.colors.text,
+              }}
+            />
 
-        {/* Body */}
-        {editingField === 'body' ? (
-          <textarea
-            value={tempBody}
-            onChange={(e) => setTempBody(e.target.value)}
-            onBlur={() => handleBlur('body')}
-            onKeyDown={(e) => handleKeyDown(e, 'body')}
-            className="w-full bg-transparent outline-none resize-none"
-            style={{
-              fontSize: '14px',
-              fontFamily: FONTS.sans,
-              color: COLORS.text,
-              lineHeight: 1.7,
-              opacity: 0.8,
-            }}
-            rows={5}
-            autoFocus
-          />
-        ) : (
-          <p
-            className={`${isEditable ? 'cursor-pointer hover:opacity-60' : ''}`}
-            style={{
-              fontSize: '14px',
-              fontFamily: FONTS.sans,
-              color: COLORS.text,
-              lineHeight: 1.7,
-              opacity: 0.8,
-            }}
-            onClick={() => { if (isEditable) { setEditingField('body'); setTempBody(body[0]?.text || ''); } }}
-          >
-            {body[0]?.text || (isEditable ? 'Click to add description' : '')}
-          </p>
-        )}
+            <EditableContent
+              as="p"
+              value={bodyText}
+              isEditable={isEditable}
+              multiline
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'body', value, 0);
+              }}
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '16px',
+                lineHeight: 1.8,
+                color: styles.colors.text,
+                opacity: 0.8,
+              }}
+            />
+          </div>
+        </DraggableSurface>
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 5. GalerynReferences
-// ============================================================================
-
 export function GalerynReferences({
   title,
   items = [],
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempItems, setTempItems] = useState(items.map((i) => i.text));
-
-  const handleBlur = (field: string, index?: number) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'items' && index !== undefined && tempItems[index] !== items[index]?.text)
-      onFieldUpdate(slideId, 'items', tempItems[index], index);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field, index); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'items') setTempItems(items.map((i) => i.text));
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
+  const referenceItems = items.length ? items : [{ text: '' }];
 
   return (
     <div
-      className="w-full h-full flex flex-col relative overflow-hidden p-10"
-      style={{ backgroundColor: COLORS.bg }}
+      ref={slideRef}
+      className="h-full w-full overflow-hidden px-14 py-16 md:px-16"
+      style={{ backgroundColor: styles.colors.background || COLORS.background }}
     >
-      {/* Title */}
-      {editingField?.field === 'title' ? (
-        <input
-          type="text"
-          value={tempTitle}
-          onChange={(e) => setTempTitle(e.target.value)}
-          onBlur={() => handleBlur('title')}
-          onKeyDown={(e) => handleKeyDown(e, 'title')}
-          className="bg-transparent outline-none mb-6"
-          style={{
-            fontSize: '28px',
-            fontFamily: FONTS.serif,
-            fontWeight: 700,
-            color: COLORS.text,
-          }}
-          autoFocus
-        />
-      ) : (
-        <h2
-          className={`mb-6 ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-          style={{
-            fontSize: '28px',
-            fontFamily: FONTS.serif,
-            fontWeight: 700,
-            color: COLORS.text,
-            lineHeight: 1.2,
-          }}
-          onClick={() => { if (isEditable) { setEditingField({ field: 'title' }); setTempTitle(title); } }}
+      <div className="flex h-full flex-col justify-center">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          isEditable={isEditable}
+          slideId={slideId}
+          formatKey="references-title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          className="mb-10 w-fit"
         >
-          {title}
-        </h2>
-      )}
+          <EditableContent
+            as="h2"
+            value={title || 'References'}
+            isEditable={isEditable}
+            onCommit={(value) => {
+              if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+            }}
+            style={{
+              fontFamily: styles.fonts.heading,
+              fontSize: '52px',
+              fontWeight: 700,
+              lineHeight: 1,
+              color: styles.colors.text,
+            }}
+          />
+        </DraggableSurface>
 
-      {/* Reference Items */}
-      <div className="flex flex-col flex-1">
-        {items.map((item, i) => (
-          <div
-            key={i}
-            className="flex items-start gap-4 py-3"
-            style={{ borderBottom: '1px solid rgba(2, 29, 48, 0.1)' }}
-          >
-            {/* Numbered label */}
-            <span
-              className="shrink-0"
-              style={{
-                fontSize: '11px',
-                fontFamily: FONTS.sans,
-                fontWeight: 600,
-                color: COLORS.text,
-                opacity: 0.4,
-                marginTop: '2px',
-                fontVariantNumeric: 'tabular-nums',
-              }}
+        <div className="flex max-w-[720px] flex-col gap-4">
+          {referenceItems.map((item, index) => (
+            <DraggableSurface
+              key={`${index}-${item.text}`}
+              constraintsRef={slideRef}
+              isEditable={isEditable}
+              slideId={slideId}
+              formatKey={`reference-item-${index}`}
+              formatting={formatting}
+              onFormattingUpdate={onFormattingUpdate}
+              className="w-full"
+              handleClassName="-top-4 right-0"
             >
-              [{i + 1}]
-            </span>
+              <div className="flex items-baseline gap-5 border-b border-[#021d30]/10 pb-3">
+                <span
+                  className="shrink-0"
+                  style={{
+                    fontFamily: styles.fonts.body,
+                    fontSize: '12px',
+                    fontWeight: 600,
+                    color: styles.colors.text,
+                    opacity: 0.35,
+                  }}
+                >
+                  [{index + 1}]
+                </span>
 
-            {/* Item text */}
-            {editingField?.field === 'items' && editingField?.index === i ? (
-              <input
-                type="text"
-                value={tempItems[i] || ''}
-                onChange={(e) => {
-                  const next = [...tempItems];
-                  next[i] = e.target.value;
-                  setTempItems(next);
-                }}
-                onBlur={() => handleBlur('items', i)}
-                onKeyDown={(e) => handleKeyDown(e, 'items', i)}
-                className="flex-1 bg-transparent outline-none"
-                style={{
-                  fontSize: '13px',
-                  fontFamily: FONTS.sans,
-                  color: COLORS.text,
-                }}
-                autoFocus
-              />
-            ) : (
-              <span
-                className={`flex-1 ${isEditable ? 'cursor-pointer hover:opacity-60' : ''}`}
-                style={{
-                  fontSize: '13px',
-                  fontFamily: FONTS.sans,
-                  color: COLORS.text,
-                  lineHeight: 1.6,
-                  opacity: 0.75,
-                }}
-                onClick={() => {
-                  if (isEditable) {
-                    setEditingField({ field: 'items', index: i });
-                    setTempItems(items.map((x) => x.text));
-                  }
-                }}
-              >
-                {item.text}
-              </span>
-            )}
-          </div>
-        ))}
+                <EditableContent
+                  as="p"
+                  value={item.text}
+                  isEditable={isEditable}
+                  multiline
+                  onCommit={(value) => {
+                    if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'items', value, index);
+                  }}
+                  style={{
+                    fontFamily: styles.fonts.body,
+                    fontSize: '16px',
+                    lineHeight: 1.7,
+                    color: styles.colors.text,
+                    opacity: 0.82,
+                  }}
+                />
+              </div>
+            </DraggableSurface>
+          ))}
+        </div>
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 6. GalerynThankYou
-// ============================================================================
-
 export function GalerynThankYou({
   title,
   subtitle,
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<string | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
-
-  const handleBlur = (field: string) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'subtitle' && tempSubtitle !== subtitle) onFieldUpdate(slideId, 'subtitle', tempSubtitle);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'subtitle') setTempSubtitle(subtitle || '');
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
 
   return (
     <div
-      className="w-full h-full flex flex-col items-center justify-center relative overflow-hidden p-10"
-      style={{ backgroundColor: COLORS.text }}
+      ref={slideRef}
+      className="relative h-full w-full overflow-hidden px-12 py-16 md:px-16"
+      style={{ backgroundColor: styles.colors.text || COLORS.text }}
     >
-      {/* Title */}
-      {editingField === 'title' ? (
-        <input
-          type="text"
-          value={tempTitle}
-          onChange={(e) => setTempTitle(e.target.value)}
-          onBlur={() => handleBlur('title')}
-          onKeyDown={(e) => handleKeyDown(e, 'title')}
-          className="w-full text-center bg-transparent outline-none"
-          style={{
-            fontSize: '52px',
-            fontFamily: FONTS.serif,
-            fontWeight: 700,
-            color: COLORS.bg,
-            lineHeight: 1.1,
-          }}
-          autoFocus
-        />
-      ) : (
-        <h1
-          className={`text-center ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-          style={{
-            fontSize: '52px',
-            fontFamily: FONTS.serif,
-            fontWeight: 700,
-            color: COLORS.bg,
-            lineHeight: 1.1,
-          }}
-          onClick={() => { if (isEditable) { setEditingField('title'); setTempTitle(title); } }}
+      <div className="flex h-full flex-col items-center justify-center text-center">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          isEditable={isEditable}
+          slideId={slideId}
+          formatKey="thank-you-title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          className="mb-5"
         >
-          {title}
-        </h1>
-      )}
-
-      {/* Subtitle */}
-      {(subtitle || isEditable) && (
-        editingField === 'subtitle' ? (
-          <input
-            type="text"
-            value={tempSubtitle}
-            onChange={(e) => setTempSubtitle(e.target.value)}
-            onBlur={() => handleBlur('subtitle')}
-            onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
-            className="w-full text-center bg-transparent outline-none mt-5"
-            style={{
-              fontSize: '14px',
-              fontFamily: FONTS.sans,
-              color: COLORS.bg,
-              opacity: 0.6,
+          <EditableContent
+            as="h2"
+            value={title || 'Thank You'}
+            isEditable={isEditable}
+            onCommit={(value) => {
+              if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
             }}
-            autoFocus
-          />
-        ) : (
-          <p
-            className={`text-center mt-5 ${isEditable ? 'cursor-pointer hover:opacity-40' : ''}`}
             style={{
-              fontSize: '14px',
-              fontFamily: FONTS.sans,
-              color: COLORS.bg,
-              opacity: 0.6,
-              lineHeight: 1.6,
+              fontFamily: styles.fonts.heading,
+              fontSize: '84px',
+              fontWeight: 700,
+              lineHeight: 0.95,
+              color: COLORS.white,
             }}
-            onClick={() => { if (isEditable) { setEditingField('subtitle'); setTempSubtitle(subtitle || ''); } }}
+          />
+        </DraggableSurface>
+
+        {(subtitle || isEditable) && (
+          <DraggableSurface
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey="thank-you-subtitle"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="max-w-[520px]"
           >
-            {subtitle || (isEditable ? 'Click to add subtitle' : '')}
-          </p>
-        )
-      )}
+            <EditableContent
+              as="p"
+              value={subtitle || ''}
+              isEditable={isEditable}
+              multiline
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'subtitle', value);
+              }}
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '16px',
+                lineHeight: 1.7,
+                color: COLORS.white,
+                opacity: 0.62,
+              }}
+            />
+          </DraggableSurface>
+        )}
+      </div>
 
-      {/* Bottom label */}
       <div
-        className="absolute bottom-6 left-0 right-0 text-center"
+        className="absolute bottom-8 left-0 right-0 text-center"
         style={{
-          fontSize: '8px',
-          fontFamily: FONTS.sans,
+          fontFamily: styles.fonts.body,
+          fontSize: '11px',
           fontWeight: 600,
-          color: COLORS.bg,
-          opacity: 0.3,
           letterSpacing: '0.3em',
-          textTransform: 'uppercase' as const,
+          color: COLORS.white,
+          opacity: 0.4,
         }}
       >
         GALERYN CO. // 2026

components/slides/neobrutalism/layouts.tsx

@@ -1,49 +1,115 @@
 'use client';
 
-import React, { useState } from 'react';
-import { Star } from 'lucide-react';
+import React, { useRef, useState } from 'react';
+import { Link as LinkIcon, Star } from 'lucide-react';
 import { TemplateStyles } from '@/data/templates';
-
-// ============================================================================
-// SHARED PROPS & HELPERS
-// ============================================================================
+import { PersistedDraggableSurface, SlideFormattingMap } from '@/components/slides/shared/PersistedDraggableSurface';
 
 interface LayoutProps {
   title: string;
   subtitle?: string;
   body?: Array<{ heading?: string; text: string }>;
+  columns?: Array<{ heading: string; text: string }>;
   items?: Array<{ text: string }>;
   imageUrl?: string;
+  formatting?: SlideFormattingMap;
   styles: TemplateStyles;
   slideId?: string;
   isEditable?: boolean;
   onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
+  onRequestImageSelect?: (slideId: string) => void;
+}
+
+interface DraggableSurfaceProps {
+  children: React.ReactNode;
+  constraintsRef: React.RefObject<HTMLDivElement | null>;
+  slideId?: string;
+  formatKey: string;
+  formatting?: SlideFormattingMap;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
+  isEditable?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
-/** Dot-pattern overlay shared by all neo-brutalism layouts */
 function DotOverlay({ pattern }: { pattern?: string }) {
   if (!pattern) return null;
+
   return (
     <div
       aria-hidden
-      className="absolute inset-0 opacity-30 pointer-events-none"
+      className="absolute inset-0 pointer-events-none opacity-30"
       style={{ background: pattern }}
     />
   );
 }
 
-// ============================================================================
-// 1. NeoTitleSubtitle
-// ============================================================================
+function DraggableSurface({
+  children,
+  constraintsRef,
+  slideId,
+  formatKey,
+  formatting,
+  onFormattingUpdate,
+  isEditable = false,
+  className,
+  style,
+}: DraggableSurfaceProps) {
+  return (
+    <PersistedDraggableSurface
+      constraintsRef={constraintsRef}
+      slideId={slideId}
+      formatKey={formatKey}
+      formatting={formatting}
+      onFormattingUpdate={onFormattingUpdate}
+      isEditable={isEditable}
+      className={className}
+      style={style}
+      groupClassName=""
+      whileDrag={{ scale: 1.02, zIndex: 40 }}
+    >
+      {children}
+    </PersistedDraggableSurface>
+  );
+}
+
+function stopPointerDown(e: React.PointerEvent<HTMLElement>) {
+  e.stopPropagation();
+}
+
+function parseReference(text: string, index: number) {
+  const parts = text
+    .split('||')
+    .map((part) => part.trim())
+    .filter(Boolean);
+
+  if (parts.length >= 2) {
+    return {
+      label: parts[0],
+      value: parts[1],
+      url: parts[2],
+    };
+  }
+
+  return {
+    label: `REF_${String(index + 1).padStart(2, '0')}`,
+    value: text,
+    url: '',
+  };
+}
 
 export function NeoTitleSubtitle({
   title,
   subtitle,
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
+  const slideRef = useRef<HTMLDivElement>(null);
   const [editingField, setEditingField] = useState<string | null>(null);
   const [tempTitle, setTempTitle] = useState(title);
   const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
@@ -56,273 +122,318 @@ export function NeoTitleSubtitle({
   };
 
   const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field); }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleBlur(field);
+    }
     if (e.key === 'Escape') {
       setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'subtitle') setTempSubtitle(subtitle || '');
+      setTempTitle(title);
+      setTempSubtitle(subtitle || '');
     }
   };
 
   return (
     <div
-      className="w-full h-full flex flex-col items-center justify-center relative overflow-hidden"
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden px-8 py-10"
       style={{ backgroundColor: '#F5F5F0', color: styles.colors.text }}
     >
       <DotOverlay pattern={styles.dotPattern} />
 
-      <div className="relative z-10 flex flex-col items-center text-center px-6">
-        {/* Title box */}
-        <div
-          className="relative"
+      <div className="relative z-10 flex w-full flex-col items-center gap-8">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+          className="relative w-full max-w-[680px] -rotate-1"
         >
-          {/* Star decoration */}
-          <Star
-            className="absolute -top-3 -right-3 text-neo-purple fill-neo-yellow"
-            size={22}
-            strokeWidth={2.5}
-          />
-
-          {editingField === 'title' ? (
-            <input
-              type="text"
-              value={tempTitle}
-              onChange={(e) => setTempTitle(e.target.value)}
-              onBlur={() => handleBlur('title')}
-              onKeyDown={(e) => handleKeyDown(e, 'title')}
-              className="bg-neo-lime neo-border neo-shadow text-center outline-none"
-              style={{
-                fontFamily: styles.fonts.heading,
-                fontSize: '42px',
-                fontWeight: 900,
-                color: '#000',
-                textTransform: 'uppercase',
-                padding: '10px 28px',
-                transform: 'rotate(-1deg)',
-                letterSpacing: '-0.02em',
-                width: '100%',
-              }}
-              autoFocus
-            />
-          ) : (
-            <h1
-              className={`bg-neo-lime neo-border neo-shadow ${isEditable ? 'cursor-pointer' : ''}`}
-              style={{
-                fontFamily: styles.fonts.heading,
-                fontSize: '42px',
-                fontWeight: 900,
-                color: '#000',
-                textTransform: 'uppercase',
-                padding: '10px 28px',
-                transform: 'rotate(-1deg)',
-                letterSpacing: '-0.02em',
-                display: 'inline-block',
-              }}
-              onClick={() => { if (isEditable) { setEditingField('title'); setTempTitle(title); } }}
-            >
-              {title || 'TITLE'}
-            </h1>
-          )}
-        </div>
+          <div className="relative bg-neo-lime neo-border neo-shadow px-8 py-10 md:px-10 md:py-12">
+            <div className="absolute -right-4 -top-4 bg-neo-lime neo-border p-1">
+              <div className="bg-black p-1">
+                <Star className="h-5 w-5 fill-current text-neo-lime" />
+              </div>
+            </div>
 
-        {/* Subtitle card */}
-        {(subtitle || isEditable) && (
-          <div
-            className="mt-4"
-          >
+            {editingField === 'title' ? (
+              <textarea
+                value={tempTitle}
+                onChange={(e) => setTempTitle(e.target.value)}
+                onBlur={() => handleBlur('title')}
+                onKeyDown={(e) => handleKeyDown(e, 'title')}
+                onPointerDown={stopPointerDown}
+                className="w-full resize-none bg-transparent text-center outline-none"
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '54px',
+                  fontWeight: 900,
+                  color: '#000',
+                  lineHeight: 0.92,
+                  letterSpacing: '-0.05em',
+                  textTransform: 'uppercase',
+                }}
+                rows={2}
+                autoFocus
+              />
+            ) : (
+              <h1
+                className={isEditable ? 'cursor-text' : ''}
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '54px',
+                  fontWeight: 900,
+                  color: '#000',
+                  lineHeight: 0.92,
+                  letterSpacing: '-0.05em',
+                  textAlign: 'center',
+                  textTransform: 'uppercase',
+                  whiteSpace: 'pre-line',
+                }}
+                onClick={() => {
+                  if (isEditable) {
+                    setEditingField('title');
+                    setTempTitle(title);
+                  }
+                }}
+              >
+                {title || 'NEO-BRUTALISM'}
+              </h1>
+            )}
+          </div>
+        </DraggableSurface>
+
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="subtitle"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+          className="w-full max-w-[560px]"
+        >
+          <div className="bg-white neo-border neo-shadow px-6 py-5 md:px-8 md:py-6">
             {editingField === 'subtitle' ? (
-              <input
-                type="text"
+              <textarea
                 value={tempSubtitle}
                 onChange={(e) => setTempSubtitle(e.target.value)}
                 onBlur={() => handleBlur('subtitle')}
                 onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
-                className="neo-border text-center outline-none"
+                onPointerDown={stopPointerDown}
+                className="w-full resize-none bg-transparent text-center outline-none"
                 style={{
                   fontFamily: styles.fonts.body,
-                  fontSize: '14px',
-                  fontWeight: 700,
+                  fontSize: '18px',
+                  fontWeight: 800,
                   color: '#000',
+                  lineHeight: 1.2,
+                  letterSpacing: '-0.02em',
                   textTransform: 'uppercase',
-                  padding: '8px 20px',
-                  backgroundColor: '#fff',
-                  width: '100%',
                 }}
+                rows={2}
                 autoFocus
               />
             ) : (
               <p
-                className={`neo-border ${isEditable ? 'cursor-pointer' : ''}`}
+                className={isEditable ? 'cursor-text' : ''}
                 style={{
                   fontFamily: styles.fonts.body,
-                  fontSize: '14px',
-                  fontWeight: 700,
+                  fontSize: '18px',
+                  fontWeight: 800,
                   color: '#000',
+                  lineHeight: 1.2,
+                  letterSpacing: '-0.02em',
+                  textAlign: 'center',
                   textTransform: 'uppercase',
-                  padding: '8px 20px',
-                  backgroundColor: '#fff',
-                  display: 'inline-block',
-                  letterSpacing: '0.04em',
+                  whiteSpace: 'pre-line',
+                }}
+                onClick={() => {
+                  if (isEditable) {
+                    setEditingField('subtitle');
+                    setTempSubtitle(subtitle || '');
+                  }
                 }}
-                onClick={() => { if (isEditable) { setEditingField('subtitle'); setTempSubtitle(subtitle || ''); } }}
               >
                 {subtitle || (isEditable ? 'Click to add subtitle' : '')}
               </p>
             )}
           </div>
-        )}
+        </DraggableSurface>
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 2. NeoAgenda
-// ============================================================================
-
 export function NeoAgenda({
   title,
   items = [],
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
+  const slideRef = useRef<HTMLDivElement>(null);
   const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
   const [tempTitle, setTempTitle] = useState(title);
-  const [tempItems, setTempItems] = useState(items.map((i) => i.text));
+  const [tempItems, setTempItems] = useState(items.map((item) => item.text));
 
   const handleBlur = (field: string, index?: number) => {
     if (!slideId || !onFieldUpdate) return;
     if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'items' && index !== undefined && tempItems[index] !== items[index]?.text)
+    if (field === 'items' && index !== undefined && tempItems[index] !== items[index]?.text) {
       onFieldUpdate(slideId, 'items', tempItems[index], index);
+    }
     setEditingField(null);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field, index); }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleBlur(field, index);
+    }
     if (e.key === 'Escape') {
       setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'items') setTempItems(items.map((i) => i.text));
+      setTempTitle(title);
+      setTempItems(items.map((item) => item.text));
     }
   };
 
-  // Pad items to fill a 3-column grid (min 3)
-  const displayItems = items.length > 0 ? items : [];
-
   return (
     <div
-      className="w-full h-full flex flex-col relative overflow-hidden p-7"
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col overflow-hidden px-7 py-7"
       style={{ backgroundColor: '#F5F5F0', color: styles.colors.text }}
     >
       <DotOverlay pattern={styles.dotPattern} />
 
-      <div className="relative z-10 flex flex-col h-full">
-        {/* Title */}
-        <div
-          className="mb-5"
+      <div className="relative z-10 flex h-full flex-col">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="agenda-title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+          className="mb-6 self-start"
         >
           {editingField?.field === 'title' ? (
-            <input
-              type="text"
+            <textarea
               value={tempTitle}
               onChange={(e) => setTempTitle(e.target.value)}
               onBlur={() => handleBlur('title')}
               onKeyDown={(e) => handleKeyDown(e, 'title')}
-              className="bg-transparent outline-none"
+              onPointerDown={stopPointerDown}
+              className="w-[340px] resize-none bg-transparent outline-none"
               style={{
                 fontFamily: styles.fonts.heading,
-                fontSize: '32px',
+                fontSize: '36px',
                 fontWeight: 900,
                 color: '#000',
+                lineHeight: 0.95,
+                letterSpacing: '-0.04em',
                 textTransform: 'uppercase',
-                letterSpacing: '-0.02em',
               }}
+              rows={2}
               autoFocus
             />
           ) : (
             <h2
-              className={`${isEditable ? 'cursor-pointer' : ''}`}
+              className={isEditable ? 'cursor-text' : ''}
               style={{
                 fontFamily: styles.fonts.heading,
-                fontSize: '32px',
+                fontSize: '36px',
                 fontWeight: 900,
                 color: '#000',
+                lineHeight: 0.95,
+                letterSpacing: '-0.04em',
                 textTransform: 'uppercase',
-                letterSpacing: '-0.02em',
+                whiteSpace: 'pre-line',
+              }}
+              onClick={() => {
+                if (isEditable) {
+                  setEditingField({ field: 'title' });
+                  setTempTitle(title);
+                }
               }}
-              onClick={() => { if (isEditable) { setEditingField({ field: 'title' }); setTempTitle(title); } }}
             >
-              {title}
+              {title || 'THE_MISSION_PLAN'}
             </h2>
           )}
-        </div>
+        </DraggableSurface>
 
-        {/* Cards grid */}
-        <div className="grid grid-cols-3 gap-3 flex-1">
-          {displayItems.map((item, i) => (
-            <div
-              key={i}
-              className="neo-border neo-shadow-purple bg-white flex flex-col justify-between"
-              style={{
-                padding: '14px 16px',
-                minHeight: '120px',
-              }}
+        <div className="grid flex-1 grid-cols-3 gap-3">
+          {items.map((item, index) => (
+            <DraggableSurface
+              key={`${item.text}-${index}`}
+              constraintsRef={slideRef}
+              slideId={slideId}
+              formatKey={`agenda-card-${index}`}
+              formatting={formatting}
+              onFormattingUpdate={onFormattingUpdate}
+              isEditable={isEditable}
             >
-              <span
-                className="text-neo-purple"
-                style={{
-                  fontFamily: styles.fonts.heading,
-                  fontSize: '13px',
-                  fontWeight: 900,
-                  letterSpacing: '0.04em',
-                }}
-              >
-                {String(i + 1).padStart(2, '0')}/
-              </span>
-
-              {editingField?.field === 'items' && editingField?.index === i ? (
-                <input
-                  type="text"
-                  value={tempItems[i] || ''}
-                  onChange={(e) => {
-                    const next = [...tempItems];
-                    next[i] = e.target.value;
-                    setTempItems(next);
-                  }}
-                  onBlur={() => handleBlur('items', i)}
-                  onKeyDown={(e) => handleKeyDown(e, 'items', i)}
-                  className="bg-transparent outline-none mt-2"
-                  style={{
-                    fontFamily: styles.fonts.body,
-                    fontSize: '14px',
-                    fontWeight: 700,
-                    color: '#000',
-                  }}
-                  autoFocus
-                />
-              ) : (
+              <div className="flex h-full min-h-[112px] flex-col bg-white neo-border neo-shadow-purple p-4">
                 <span
-                  className={`mt-2 ${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
+                  className="mb-2 text-neo-purple"
                   style={{
-                    fontFamily: styles.fonts.body,
-                    fontSize: '14px',
-                    fontWeight: 700,
-                    color: '#000',
-                  }}
-                  onClick={() => {
-                    if (isEditable) {
-                      setEditingField({ field: 'items', index: i });
-                      setTempItems(items.map((x) => x.text));
-                    }
+                    fontFamily: styles.fonts.heading,
+                    fontSize: '15px',
+                    fontWeight: 900,
+                    letterSpacing: '0.04em',
                   }}
                 >
-                  {item.text}
+                  {String(index + 1).padStart(2, '0')}/
                 </span>
-              )}
-            </div>
+
+                {editingField?.field === 'items' && editingField.index === index ? (
+                  <textarea
+                    value={tempItems[index] || ''}
+                    onChange={(e) => {
+                      const next = [...tempItems];
+                      next[index] = e.target.value;
+                      setTempItems(next);
+                    }}
+                    onBlur={() => handleBlur('items', index)}
+                    onKeyDown={(e) => handleKeyDown(e, 'items', index)}
+                    onPointerDown={stopPointerDown}
+                    className="w-full flex-1 resize-none bg-transparent outline-none"
+                    style={{
+                      fontFamily: styles.fonts.body,
+                      fontSize: '18px',
+                      fontWeight: 800,
+                      color: '#000',
+                      lineHeight: 1.05,
+                    }}
+                    rows={3}
+                    autoFocus
+                  />
+                ) : (
+                  <div
+                    className={isEditable ? 'cursor-text' : ''}
+                    style={{
+                      fontFamily: styles.fonts.body,
+                      fontSize: '18px',
+                      fontWeight: 800,
+                      color: '#000',
+                      lineHeight: 1.05,
+                      whiteSpace: 'pre-line',
+                    }}
+                    onClick={() => {
+                      if (isEditable) {
+                        setEditingField({ field: 'items', index });
+                        setTempItems(items.map((entry) => entry.text));
+                      }
+                    }}
+                  >
+                    {item.text}
+                  </div>
+                )}
+              </div>
+            </DraggableSurface>
           ))}
         </div>
       </div>
@@ -330,473 +441,887 @@ export function NeoAgenda({
   );
 }
 
-// ============================================================================
-// 3. NeoTitleAndText
-// ============================================================================
-
 export function NeoTitleAndText({
   title,
   body = [],
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
+  const slideRef = useRef<HTMLDivElement>(null);
   const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
   const [tempTitle, setTempTitle] = useState(title);
-  const [tempBody, setTempBody] = useState(body.map((b) => b.text));
+  const [tempBody, setTempBody] = useState(body.map((entry) => entry.text));
+  const bodyText = body[0]?.text || '';
 
   const handleBlur = (field: string, index?: number) => {
     if (!slideId || !onFieldUpdate) return;
     if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'body' && index !== undefined && tempBody[index] !== body[index]?.text)
+    if (field === 'body' && index !== undefined && tempBody[index] !== body[index]?.text) {
       onFieldUpdate(slideId, 'body', tempBody[index], index);
+    }
     setEditingField(null);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleBlur(field, index); }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleBlur(field, index);
+    }
     if (e.key === 'Escape') {
       setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'body') setTempBody(body.map((b) => b.text));
+      setTempTitle(title);
+      setTempBody(body.map((entry) => entry.text));
     }
   };
 
-  const bodyText = body.length > 0 ? body[0].text : '';
-
   return (
     <div
-      className="w-full h-full flex flex-col items-center justify-center relative overflow-hidden p-8"
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden px-8 py-10"
       style={{ backgroundColor: '#F5F5F0', color: styles.colors.text }}
     >
       <DotOverlay pattern={styles.dotPattern} />
 
-      <div className="relative z-10 flex flex-col items-center text-center max-w-[680px] w-full">
-        {/* Title in cyan box */}
-        <div
+      <div className="relative z-10 flex w-full max-w-[680px] flex-col items-center gap-6">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="title-and-text-title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+          className="w-full max-w-[540px]"
         >
-          {editingField?.field === 'title' ? (
-            <input
-              type="text"
-              value={tempTitle}
-              onChange={(e) => setTempTitle(e.target.value)}
-              onBlur={() => handleBlur('title')}
-              onKeyDown={(e) => handleKeyDown(e, 'title')}
-              className="bg-neo-cyan neo-border neo-shadow text-center outline-none"
-              style={{
-                fontFamily: styles.fonts.heading,
-                fontSize: '32px',
-                fontWeight: 900,
-                color: '#000',
-                textTransform: 'uppercase',
-                padding: '8px 24px',
-                width: '100%',
-              }}
-              autoFocus
-            />
-          ) : (
-            <h2
-              className={`bg-neo-cyan neo-border neo-shadow ${isEditable ? 'cursor-pointer' : ''}`}
-              style={{
-                fontFamily: styles.fonts.heading,
-                fontSize: '32px',
-                fontWeight: 900,
-                color: '#000',
-                textTransform: 'uppercase',
-                padding: '8px 24px',
-                display: 'inline-block',
-              }}
-              onClick={() => { if (isEditable) { setEditingField({ field: 'title' }); setTempTitle(title); } }}
-            >
-              {title}
-            </h2>
-          )}
-        </div>
+          <div className="bg-neo-cyan neo-border neo-shadow px-8 py-6">
+            {editingField?.field === 'title' ? (
+              <textarea
+                value={tempTitle}
+                onChange={(e) => setTempTitle(e.target.value)}
+                onBlur={() => handleBlur('title')}
+                onKeyDown={(e) => handleKeyDown(e, 'title')}
+                onPointerDown={stopPointerDown}
+                className="w-full resize-none bg-transparent text-center outline-none"
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '40px',
+                  fontWeight: 900,
+                  color: '#000',
+                  lineHeight: 0.95,
+                  letterSpacing: '-0.04em',
+                  textTransform: 'uppercase',
+                }}
+                rows={2}
+                autoFocus
+              />
+            ) : (
+              <h2
+                className={isEditable ? 'cursor-text text-center' : 'text-center'}
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '40px',
+                  fontWeight: 900,
+                  color: '#000',
+                  lineHeight: 0.95,
+                  letterSpacing: '-0.04em',
+                  textTransform: 'uppercase',
+                  whiteSpace: 'pre-line',
+                }}
+                onClick={() => {
+                  if (isEditable) {
+                    setEditingField({ field: 'title' });
+                    setTempTitle(title);
+                  }
+                }}
+              >
+                {title || 'THE PROBLEM'}
+              </h2>
+            )}
+          </div>
+        </DraggableSurface>
 
-        {/* Body text card */}
-        <div
-          className="mt-5 w-full"
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="title-and-text-body"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+          className="w-full"
         >
-          {editingField?.field === 'body' && editingField?.index === 0 ? (
-            <textarea
-              value={tempBody[0] || ''}
-              onChange={(e) => {
-                const next = [...tempBody];
-                next[0] = e.target.value;
-                setTempBody(next);
-              }}
-              onBlur={() => handleBlur('body', 0)}
-              onKeyDown={(e) => handleKeyDown(e, 'body', 0)}
-              className="neo-border bg-white w-full outline-none resize-none text-center"
-              style={{
-                fontFamily: styles.fonts.body,
-                fontSize: '16px',
-                color: '#000',
-                lineHeight: 1.65,
-                padding: '16px 20px',
-              }}
-              rows={4}
-              autoFocus
-            />
-          ) : (
-            <p
-              className={`neo-border bg-white ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-              style={{
-                fontFamily: styles.fonts.body,
-                fontSize: '16px',
-                color: '#000',
-                lineHeight: 1.65,
-                padding: '16px 20px',
-              }}
-              onClick={() => {
-                if (isEditable) {
-                  setEditingField({ field: 'body', index: 0 });
-                  setTempBody(body.map((b) => b.text));
-                }
-              }}
+          <div className="bg-white neo-border neo-shadow px-8 py-8 md:px-10 md:py-10">
+            {editingField?.field === 'body' && editingField.index === 0 ? (
+              <textarea
+                value={tempBody[0] || ''}
+                onChange={(e) => {
+                  const next = [...tempBody];
+                  next[0] = e.target.value;
+                  setTempBody(next);
+                }}
+                onBlur={() => handleBlur('body', 0)}
+                onKeyDown={(e) => handleKeyDown(e, 'body', 0)}
+                onPointerDown={stopPointerDown}
+                className="w-full resize-none bg-transparent text-center outline-none"
+                style={{
+                  fontFamily: styles.fonts.body,
+                  fontSize: '24px',
+                  fontWeight: 600,
+                  color: '#000',
+                  lineHeight: 1.25,
+                }}
+                rows={5}
+                autoFocus
+              />
+            ) : (
+              <p
+                className={isEditable ? 'cursor-text text-center' : 'text-center'}
+                style={{
+                  fontFamily: styles.fonts.body,
+                  fontSize: '24px',
+                  fontWeight: 600,
+                  color: '#000',
+                  lineHeight: 1.25,
+                  whiteSpace: 'pre-line',
+                }}
+                onClick={() => {
+                  if (isEditable) {
+                    setEditingField({ field: 'body', index: 0 });
+                    setTempBody(body.map((entry) => entry.text));
+                  }
+                }}
+              >
+                {bodyText || (isEditable ? 'Click to add text' : '')}
+              </p>
+            )}
+          </div>
+        </DraggableSurface>
+      </div>
+    </div>
+  );
+}
+
+export function NeoThreeColumns({
+  title,
+  columns = [],
+  formatting,
+  styles,
+  slideId,
+  isEditable = false,
+  onFieldUpdate,
+  onFormattingUpdate,
+}: LayoutProps) {
+  const slideRef = useRef<HTMLDivElement>(null);
+  const [editingField, setEditingField] = useState<{ field: string; index?: number; sub?: 'heading' | 'text' } | null>(null);
+  const [tempTitle, setTempTitle] = useState(title);
+  const [tempColumns, setTempColumns] = useState(columns);
+
+  const handleBlur = (field: string, index?: number) => {
+    if (!slideId || !onFieldUpdate) return;
+    if (field === 'title' && tempTitle !== title) {
+      onFieldUpdate(slideId, 'title', tempTitle);
+    }
+    if (field === 'columns' && index !== undefined && tempColumns[index]) {
+      onFieldUpdate(slideId, 'columns', JSON.stringify(tempColumns[index]), index);
+    }
+    setEditingField(null);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleBlur(field, index);
+    }
+    if (e.key === 'Escape') {
+      setEditingField(null);
+      setTempTitle(title);
+      setTempColumns(columns);
+    }
+  };
+
+  const displayColumns = columns.length
+    ? columns
+    : [
+      { heading: 'FOUNDATIONAL STRUCTURE', text: 'Define the first structural pillar here.' },
+      { heading: 'RADICAL TRANSPARENCY', text: 'Define the second structural pillar here.' },
+      { heading: 'DYNAMIC SCALABILITY', text: 'Define the third structural pillar here.' },
+    ];
+
+  return (
+    <div
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col overflow-hidden px-7 py-7"
+      style={{ backgroundColor: '#F5F5F0', color: styles.colors.text }}
+    >
+      <DotOverlay pattern={styles.dotPattern} />
+
+      <div className="relative z-10 flex h-full flex-col">
+        <div className="mb-6 flex items-start justify-between gap-4">
+          <DraggableSurface
+            constraintsRef={slideRef}
+            slideId={slideId}
+            formatKey="columns-title"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            isEditable={isEditable}
+            className="self-start"
+          >
+            <div className="bg-neo-lime neo-border neo-shadow px-6 py-4">
+              {editingField?.field === 'title' ? (
+                <textarea
+                  value={tempTitle}
+                  onChange={(e) => setTempTitle(e.target.value)}
+                  onBlur={() => handleBlur('title')}
+                  onKeyDown={(e) => handleKeyDown(e, 'title')}
+                  onPointerDown={stopPointerDown}
+                  className="w-[320px] resize-none bg-transparent outline-none"
+                  style={{
+                    fontFamily: styles.fonts.heading,
+                    fontSize: '34px',
+                    fontWeight: 900,
+                    color: '#000',
+                    lineHeight: 0.95,
+                    letterSpacing: '-0.05em',
+                    textTransform: 'uppercase',
+                  }}
+                  rows={2}
+                  autoFocus
+                />
+              ) : (
+                <h2
+                  className={isEditable ? 'cursor-text' : ''}
+                  style={{
+                    fontFamily: styles.fonts.heading,
+                    fontSize: '34px',
+                    fontWeight: 900,
+                    color: '#000',
+                    lineHeight: 0.95,
+                    letterSpacing: '-0.05em',
+                    textTransform: 'uppercase',
+                    whiteSpace: 'pre-line',
+                  }}
+                  onClick={() => {
+                    if (isEditable) {
+                      setEditingField({ field: 'title' });
+                      setTempTitle(title);
+                    }
+                  }}
+                >
+                  {title || 'THE 3 PILLARS'}
+                </h2>
+              )}
+            </div>
+          </DraggableSurface>
+
+          <DraggableSurface
+            constraintsRef={slideRef}
+            slideId={slideId}
+            formatKey="columns-decor"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            isEditable={isEditable}
+          >
+            <div className="opacity-25">
+              <div className="h-16 w-16 neo-border bg-white" />
+            </div>
+          </DraggableSurface>
+        </div>
+
+        <div className="grid flex-1 grid-cols-3 gap-4">
+          {displayColumns.slice(0, 3).map((column, index) => (
+            <DraggableSurface
+              key={`${column.heading}-${index}`}
+              constraintsRef={slideRef}
+              slideId={slideId}
+              formatKey={`column-card-${index}`}
+              formatting={formatting}
+              onFormattingUpdate={onFormattingUpdate}
+              isEditable={isEditable}
             >
-              {bodyText || (isEditable ? 'Click to add text' : '')}
-            </p>
-          )}
+              <div className="flex h-full flex-col overflow-hidden bg-white neo-border neo-shadow">
+                <div className="border-b-[3px] border-black bg-neo-lime px-5 py-4">
+                  <span
+                    style={{
+                      fontFamily: styles.fonts.heading,
+                      fontSize: '30px',
+                      fontWeight: 900,
+                      color: '#000',
+                      lineHeight: 1,
+                    }}
+                  >
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                </div>
+
+                <div className="flex flex-1 flex-col px-5 py-5">
+                  {editingField?.field === 'columns' && editingField.index === index && editingField.sub === 'heading' ? (
+                    <textarea
+                      value={tempColumns[index]?.heading || column.heading}
+                      onChange={(e) => {
+                        const next = [...tempColumns];
+                        next[index] = { ...(next[index] || column), heading: e.target.value };
+                        setTempColumns(next);
+                      }}
+                      onBlur={() => handleBlur('columns', index)}
+                      onKeyDown={(e) => handleKeyDown(e, 'columns', index)}
+                      onPointerDown={stopPointerDown}
+                      className="mb-4 w-full resize-none bg-transparent outline-none"
+                      style={{
+                        fontFamily: styles.fonts.heading,
+                        fontSize: '22px',
+                        fontWeight: 900,
+                        color: '#000',
+                        lineHeight: 1,
+                        textTransform: 'uppercase',
+                      }}
+                      rows={2}
+                      autoFocus
+                    />
+                  ) : (
+                    <h3
+                      className={isEditable ? 'mb-4 cursor-text' : 'mb-4'}
+                      style={{
+                        fontFamily: styles.fonts.heading,
+                        fontSize: '22px',
+                        fontWeight: 900,
+                        color: '#000',
+                        lineHeight: 1,
+                        textTransform: 'uppercase',
+                        whiteSpace: 'pre-line',
+                      }}
+                      onClick={() => {
+                        if (isEditable) {
+                          setEditingField({ field: 'columns', index, sub: 'heading' });
+                          setTempColumns(displayColumns);
+                        }
+                      }}
+                    >
+                      {column.heading}
+                    </h3>
+                  )}
+
+                  {editingField?.field === 'columns' && editingField.index === index && editingField.sub === 'text' ? (
+                    <textarea
+                      value={tempColumns[index]?.text || column.text}
+                      onChange={(e) => {
+                        const next = [...tempColumns];
+                        next[index] = { ...(next[index] || column), text: e.target.value };
+                        setTempColumns(next);
+                      }}
+                      onBlur={() => handleBlur('columns', index)}
+                      onKeyDown={(e) => handleKeyDown(e, 'columns', index)}
+                      onPointerDown={stopPointerDown}
+                      className="w-full flex-1 resize-none bg-transparent outline-none"
+                      style={{
+                        fontFamily: styles.fonts.body,
+                        fontSize: '16px',
+                        fontWeight: 600,
+                        color: '#000',
+                        lineHeight: 1.45,
+                      }}
+                      autoFocus
+                    />
+                  ) : (
+                    <p
+                      className={isEditable ? 'cursor-text' : ''}
+                      style={{
+                        fontFamily: styles.fonts.body,
+                        fontSize: '16px',
+                        fontWeight: 600,
+                        color: '#000',
+                        lineHeight: 1.45,
+                        whiteSpace: 'pre-line',
+                      }}
+                      onClick={() => {
+                        if (isEditable) {
+                          setEditingField({ field: 'columns', index, sub: 'text' });
+                          setTempColumns(displayColumns);
+                        }
+                      }}
+                    >
+                      {column.text}
+                    </p>
+                  )}
+                </div>
+              </div>
+            </DraggableSurface>
+          ))}
         </div>
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 4. NeoImageAndText
-// ============================================================================
-
 export function NeoImageAndText({
   title,
   body = [],
   imageUrl,
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
+  onRequestImageSelect,
 }: LayoutProps) {
+  const slideRef = useRef<HTMLDivElement>(null);
   const [editingField, setEditingField] = useState<string | null>(null);
   const [tempTitle, setTempTitle] = useState(title);
-  const [tempBody, setTempBody] = useState(body.length > 0 ? body[0].text : '');
+  const [tempBody, setTempBody] = useState(body[0]?.text || '');
+  const bodyText = body[0]?.text || '';
 
   const handleBlur = (field: string) => {
     if (!slideId || !onFieldUpdate) return;
     if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'body' && tempBody !== (body[0]?.text || '')) onFieldUpdate(slideId, 'body', tempBody, 0);
+    if (field === 'body' && tempBody !== bodyText) onFieldUpdate(slideId, 'body', tempBody, 0);
     setEditingField(null);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
-    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleBlur(field); }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleBlur(field);
+    }
     if (e.key === 'Escape') {
       setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'body') setTempBody(body.length > 0 ? body[0].text : '');
+      setTempTitle(title);
+      setTempBody(bodyText);
     }
   };
 
-  const bodyText = body.length > 0 ? body[0].text : '';
-
   return (
     <div
-      className="w-full h-full flex flex-col relative overflow-hidden p-7"
+      ref={slideRef}
+      className="relative flex h-full w-full items-center justify-center overflow-hidden px-7 py-8"
       style={{ backgroundColor: '#F5F5F0', color: styles.colors.text }}
     >
       <DotOverlay pattern={styles.dotPattern} />
 
-      <div className="relative z-10 flex flex-col h-full">
-        {/* Title in lime box */}
-        <div
-          className="mb-4 self-start"
+      <div className="relative z-10 flex h-full w-full items-center gap-6">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="image-card"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+          className="w-[48%] rotate-2"
         >
-          {editingField === 'title' ? (
-            <input
-              type="text"
-              value={tempTitle}
-              onChange={(e) => setTempTitle(e.target.value)}
-              onBlur={() => handleBlur('title')}
-              onKeyDown={(e) => handleKeyDown(e, 'title')}
-              className="bg-neo-lime neo-border neo-shadow outline-none"
-              style={{
-                fontFamily: styles.fonts.heading,
-                fontSize: '26px',
-                fontWeight: 900,
-                color: '#000',
-                textTransform: 'uppercase',
-                padding: '6px 18px',
+          <div className="relative bg-neo-yellow neo-border neo-shadow p-4">
+            {isEditable && slideId && onRequestImageSelect && (
+              <button
+                type="button"
+                onClick={() => onRequestImageSelect(slideId)}
+                onPointerDown={stopPointerDown}
+                className="absolute right-3 top-3 z-20 bg-black px-3 py-1.5 text-xs font-black uppercase tracking-wide text-white neo-border hover:bg-neo-purple"
+              >
+                Replace
+              </button>
+            )}
+
+            <div
+              className={`overflow-hidden neo-border bg-white ${isEditable && slideId && onRequestImageSelect ? 'cursor-pointer' : ''}`}
+              onClick={() => {
+                if (isEditable && slideId && onRequestImageSelect) {
+                  onRequestImageSelect(slideId);
+                }
               }}
-              autoFocus
-            />
-          ) : (
-            <h2
-              className={`bg-neo-lime neo-border neo-shadow ${isEditable ? 'cursor-pointer' : ''}`}
+            >
+              {imageUrl ? (
+                <img
+                  src={imageUrl}
+                  alt={title}
+                  className="h-[250px] w-full object-cover"
+                />
+              ) : (
+                <div className="flex h-[250px] items-center justify-center bg-[#f5f5f0] p-6 text-center">
+                  <span
+                    style={{
+                      fontFamily: styles.fonts.body,
+                      fontSize: '14px',
+                      fontWeight: 800,
+                      color: '#000',
+                      opacity: 0.6,
+                      textTransform: 'uppercase',
+                    }}
+                  >
+                    Drop in an image for this slide
+                  </span>
+                </div>
+              )}
+            </div>
+            <div
+              className="mt-4 text-center"
               style={{
                 fontFamily: styles.fonts.heading,
-                fontSize: '26px',
+                fontSize: '18px',
                 fontWeight: 900,
                 color: '#000',
                 textTransform: 'uppercase',
-                padding: '6px 18px',
-                display: 'inline-block',
+                letterSpacing: '-0.03em',
               }}
-              onClick={() => { if (isEditable) { setEditingField('title'); setTempTitle(title); } }}
             >
-              {title}
-            </h2>
-          )}
-        </div>
+              FIG 1. STRUCTURAL HONESTY
+            </div>
+          </div>
+        </DraggableSurface>
 
-        {/* Two-column layout */}
-        <div className="flex gap-5 flex-1 min-h-0">
-          {/* Image side */}
-          <div
-            className="w-[48%] shrink-0 neo-border overflow-hidden"
-            style={{ backgroundColor: '#fff' }}
-          >
-            {imageUrl ? (
-              <img
-                src={imageUrl}
-                alt={title}
-                className="w-full h-full object-cover"
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="image-text"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+          className="w-[44%] -rotate-1"
+        >
+          <div className="bg-white neo-border neo-shadow px-7 py-8">
+            {editingField === 'title' ? (
+              <textarea
+                value={tempTitle}
+                onChange={(e) => setTempTitle(e.target.value)}
+                onBlur={() => handleBlur('title')}
+                onKeyDown={(e) => handleKeyDown(e, 'title')}
+                onPointerDown={stopPointerDown}
+                className="mb-5 w-full resize-none bg-transparent outline-none"
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '42px',
+                  fontWeight: 900,
+                  color: '#000',
+                  lineHeight: 0.95,
+                  letterSpacing: '-0.05em',
+                  textTransform: 'uppercase',
+                }}
+                rows={2}
+                autoFocus
               />
             ) : (
-              <div
-                className="w-full h-full flex items-center justify-center"
+              <h2
+                className={isEditable ? 'mb-5 cursor-text' : 'mb-5'}
                 style={{
-                  border: '3px dashed #000',
-                  margin: '8px',
-                  width: 'calc(100% - 16px)',
-                  height: 'calc(100% - 16px)',
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '42px',
+                  fontWeight: 900,
+                  color: '#000',
+                  lineHeight: 0.95,
+                  letterSpacing: '-0.05em',
+                  textTransform: 'uppercase',
+                  whiteSpace: 'pre-line',
+                }}
+                onClick={() => {
+                  if (isEditable) {
+                    setEditingField('title');
+                    setTempTitle(title);
+                  }
                 }}
               >
-                <span
-                  style={{
-                    fontFamily: styles.fonts.body,
-                    fontSize: '13px',
-                    fontWeight: 700,
-                    color: '#000',
-                    opacity: 0.45,
-                    textTransform: 'uppercase',
-                  }}
-                >
-                  Click to add image
-                </span>
-              </div>
+                {title || 'VISUAL IMPACT'}
+              </h2>
             )}
-          </div>
 
-          {/* Text side */}
-          <div
-            className="flex-1 flex flex-col justify-center"
-          >
-            <div
-              className="neo-border bg-white h-full flex items-center"
-              style={{ padding: '16px 18px' }}
-            >
-              {editingField === 'body' ? (
-                <textarea
-                  value={tempBody}
-                  onChange={(e) => setTempBody(e.target.value)}
-                  onBlur={() => handleBlur('body')}
-                  onKeyDown={(e) => handleKeyDown(e, 'body')}
-                  className="w-full h-full bg-transparent outline-none resize-none"
-                  style={{
-                    fontFamily: styles.fonts.body,
-                    fontSize: '14px',
-                    color: '#000',
-                    lineHeight: 1.65,
-                  }}
-                  autoFocus
-                />
-              ) : (
-                <p
-                  className={`${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
-                  style={{
-                    fontFamily: styles.fonts.body,
-                    fontSize: '14px',
-                    color: '#000',
-                    lineHeight: 1.65,
-                  }}
-                  onClick={() => { if (isEditable) { setEditingField('body'); setTempBody(bodyText); } }}
-                >
-                  {bodyText || (isEditable ? 'Click to add description' : '')}
-                </p>
-              )}
-            </div>
+            {editingField === 'body' ? (
+              <textarea
+                value={tempBody}
+                onChange={(e) => setTempBody(e.target.value)}
+                onBlur={() => handleBlur('body')}
+                onKeyDown={(e) => handleKeyDown(e, 'body')}
+                onPointerDown={stopPointerDown}
+                className="h-[170px] w-full resize-none bg-transparent outline-none"
+                style={{
+                  fontFamily: styles.fonts.body,
+                  fontSize: '18px',
+                  fontWeight: 600,
+                  color: '#000',
+                  lineHeight: 1.45,
+                }}
+                autoFocus
+              />
+            ) : (
+              <p
+                className={isEditable ? 'cursor-text' : ''}
+                style={{
+                  fontFamily: styles.fonts.body,
+                  fontSize: '18px',
+                  fontWeight: 600,
+                  color: '#000',
+                  lineHeight: 1.45,
+                  whiteSpace: 'pre-line',
+                }}
+                onClick={() => {
+                  if (isEditable) {
+                    setEditingField('body');
+                    setTempBody(bodyText);
+                  }
+                }}
+              >
+                {bodyText || (isEditable ? 'Click to add description' : '')}
+              </p>
+            )}
           </div>
-        </div>
+        </DraggableSurface>
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 5. NeoReferences
-// ============================================================================
-
 export function NeoReferences({
   title,
   items = [],
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
+  const slideRef = useRef<HTMLDivElement>(null);
   const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
   const [tempTitle, setTempTitle] = useState(title);
-  const [tempItems, setTempItems] = useState(items.map((i) => i.text));
+  const [tempItems, setTempItems] = useState(items.map((item) => item.text));
 
   const handleBlur = (field: string, index?: number) => {
     if (!slideId || !onFieldUpdate) return;
     if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'items' && index !== undefined && tempItems[index] !== items[index]?.text)
+    if (field === 'items' && index !== undefined && tempItems[index] !== items[index]?.text) {
       onFieldUpdate(slideId, 'items', tempItems[index], index);
+    }
     setEditingField(null);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field, index); }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleBlur(field, index);
+    }
     if (e.key === 'Escape') {
       setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'items') setTempItems(items.map((i) => i.text));
+      setTempTitle(title);
+      setTempItems(items.map((item) => item.text));
     }
   };
 
   return (
     <div
-      className="w-full h-full flex flex-col relative overflow-hidden p-7"
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col overflow-hidden px-7 py-7"
       style={{ backgroundColor: '#F5F5F0', color: styles.colors.text }}
     >
       <DotOverlay pattern={styles.dotPattern} />
 
-      <div className="relative z-10 flex flex-col h-full">
-        {/* Title in black box with white text */}
-        <div
-          className="mb-5 self-start"
+      <div className="relative z-10 flex h-full flex-col">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="references-title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+          className="mb-6 self-start"
         >
-          {editingField?.field === 'title' ? (
-            <input
-              type="text"
-              value={tempTitle}
-              onChange={(e) => setTempTitle(e.target.value)}
-              onBlur={() => handleBlur('title')}
-              onKeyDown={(e) => handleKeyDown(e, 'title')}
-              className="neo-border outline-none"
-              style={{
-                fontFamily: styles.fonts.heading,
-                fontSize: '26px',
-                fontWeight: 900,
-                color: '#fff',
-                backgroundColor: '#000',
-                textTransform: 'uppercase',
-                padding: '6px 18px',
-              }}
-              autoFocus
-            />
-          ) : (
-            <h2
-              className={`neo-border ${isEditable ? 'cursor-pointer' : ''}`}
-              style={{
-                fontFamily: styles.fonts.heading,
-                fontSize: '26px',
-                fontWeight: 900,
-                color: '#fff',
-                backgroundColor: '#000',
-                textTransform: 'uppercase',
-                padding: '6px 18px',
-                display: 'inline-block',
-              }}
-              onClick={() => { if (isEditable) { setEditingField({ field: 'title' }); setTempTitle(title); } }}
-            >
-              {title}
-            </h2>
-          )}
-        </div>
-
-        {/* Reference list */}
-        <div className="flex flex-col flex-1">
-          {items.map((item, i) => (
-            <div
-              key={i}
-              className="flex items-center gap-3 py-3"
-              style={{ borderBottom: '2px solid #000' }}
-            >
-              {/* Purple label */}
-              <span
-                className="shrink-0 bg-neo-purple text-white"
+          <div className="bg-black neo-border neo-shadow px-6 py-4 text-white">
+            {editingField?.field === 'title' ? (
+              <textarea
+                value={tempTitle}
+                onChange={(e) => setTempTitle(e.target.value)}
+                onBlur={() => handleBlur('title')}
+                onKeyDown={(e) => handleKeyDown(e, 'title')}
+                onPointerDown={stopPointerDown}
+                className="w-[320px] resize-none bg-transparent outline-none"
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '28px',
+                  fontWeight: 900,
+                  color: '#fff',
+                  lineHeight: 0.95,
+                  letterSpacing: '-0.04em',
+                  textTransform: 'uppercase',
+                }}
+                rows={2}
+                autoFocus
+              />
+            ) : (
+              <h2
+                className={isEditable ? 'cursor-text' : ''}
                 style={{
                   fontFamily: styles.fonts.heading,
-                  fontSize: '11px',
+                  fontSize: '28px',
                   fontWeight: 900,
-                  padding: '2px 8px',
-                  letterSpacing: '0.04em',
+                  color: '#fff',
+                  lineHeight: 0.95,
+                  letterSpacing: '-0.04em',
+                  textTransform: 'uppercase',
+                  whiteSpace: 'pre-line',
+                }}
+                onClick={() => {
+                  if (isEditable) {
+                    setEditingField({ field: 'title' });
+                    setTempTitle(title);
+                  }
                 }}
               >
-                [{String(i + 1).padStart(2, '0')}]
-              </span>
+                {title || 'REFERENCES_&_SOURCES'}
+              </h2>
+            )}
+          </div>
+        </DraggableSurface>
 
-              {editingField?.field === 'items' && editingField?.index === i ? (
-                <input
-                  type="text"
-                  value={tempItems[i] || ''}
-                  onChange={(e) => {
-                    const next = [...tempItems];
-                    next[i] = e.target.value;
-                    setTempItems(next);
-                  }}
-                  onBlur={() => handleBlur('items', i)}
-                  onKeyDown={(e) => handleKeyDown(e, 'items', i)}
-                  className="flex-1 bg-transparent outline-none"
-                  style={{
-                    fontFamily: styles.fonts.body,
-                    fontSize: '14px',
-                    color: '#000',
-                  }}
-                  autoFocus
-                />
-              ) : (
+        <div className="grid flex-1 grid-cols-[1.4fr_0.9fr] gap-6">
+          <div className="space-y-4 overflow-hidden">
+            {items.map((item, index) => {
+              const parsed = parseReference(item.text, index);
+
+              return (
+                <DraggableSurface
+                  key={`${item.text}-${index}`}
+                  constraintsRef={slideRef}
+                  slideId={slideId}
+                  formatKey={`reference-item-${index}`}
+                  formatting={formatting}
+                  onFormattingUpdate={onFormattingUpdate}
+                  isEditable={isEditable}
+                >
+                  <div className="border-b-[3px] border-black bg-white/70 p-3 backdrop-blur-sm">
+                    <span
+                      className="mb-1 block text-neo-purple"
+                      style={{
+                        fontFamily: styles.fonts.heading,
+                        fontSize: '12px',
+                        fontWeight: 900,
+                        letterSpacing: '0.12em',
+                        textTransform: 'uppercase',
+                      }}
+                    >
+                      {parsed.label}
+                    </span>
+
+                    {editingField?.field === 'items' && editingField.index === index ? (
+                      <textarea
+                        value={tempItems[index] || ''}
+                        onChange={(e) => {
+                          const next = [...tempItems];
+                          next[index] = e.target.value;
+                          setTempItems(next);
+                        }}
+                        onBlur={() => handleBlur('items', index)}
+                        onKeyDown={(e) => handleKeyDown(e, 'items', index)}
+                        onPointerDown={stopPointerDown}
+                        className="w-full resize-none bg-transparent outline-none"
+                        style={{
+                          fontFamily: styles.fonts.body,
+                          fontSize: '18px',
+                          fontWeight: 700,
+                          color: '#000',
+                          lineHeight: 1.25,
+                        }}
+                        rows={2}
+                        autoFocus
+                      />
+                    ) : parsed.url ? (
+                      <a
+                        href={parsed.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2"
+                        style={{
+                          fontFamily: styles.fonts.body,
+                          fontSize: '18px',
+                          fontWeight: 700,
+                          color: '#000',
+                          lineHeight: 1.25,
+                        }}
+                        onClick={(e) => {
+                          if (isEditable) {
+                            e.preventDefault();
+                            setEditingField({ field: 'items', index });
+                            setTempItems(items.map((entry) => entry.text));
+                          }
+                        }}
+                      >
+                        <span>{parsed.value}</span>
+                        <LinkIcon className="h-4 w-4 shrink-0" />
+                      </a>
+                    ) : (
+                      <div
+                        className={isEditable ? 'cursor-text' : ''}
+                        style={{
+                          fontFamily: styles.fonts.body,
+                          fontSize: '18px',
+                          fontWeight: 700,
+                          color: '#000',
+                          lineHeight: 1.25,
+                          whiteSpace: 'pre-line',
+                        }}
+                        onClick={() => {
+                          if (isEditable) {
+                            setEditingField({ field: 'items', index });
+                            setTempItems(items.map((entry) => entry.text));
+                          }
+                        }}
+                      >
+                        {parsed.value}
+                      </div>
+                    )}
+                  </div>
+                </DraggableSurface>
+              );
+            })}
+          </div>
+
+          <DraggableSurface
+            constraintsRef={slideRef}
+            slideId={slideId}
+            formatKey="references-note"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            isEditable={isEditable}
+            className="self-start"
+          >
+            <div className="flex flex-col gap-4 bg-neo-yellow neo-border neo-shadow p-6">
+              <div className="inline-block w-fit -rotate-2 bg-black px-4 py-2 text-white">
                 <span
-                  className={`flex-1 ${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
                   style={{
-                    fontFamily: styles.fonts.body,
-                    fontSize: '14px',
-                    color: '#000',
-                    lineHeight: 1.5,
-                  }}
-                  onClick={() => {
-                    if (isEditable) {
-                      setEditingField({ field: 'items', index: i });
-                      setTempItems(items.map((x) => x.text));
-                    }
+                    fontFamily: styles.fonts.heading,
+                    fontSize: '20px',
+                    fontWeight: 900,
+                    textTransform: 'uppercase',
                   }}
                 >
-                  {item.text}
+                  RAW SOURCES
                 </span>
-              )}
+              </div>
+              <p
+                style={{
+                  fontFamily: styles.fonts.body,
+                  fontSize: '16px',
+                  fontWeight: 700,
+                  color: '#000',
+                  lineHeight: 1.4,
+                }}
+              >
+                Reference entries stay editable inline. Use <span className="font-black">label || title || url</span> if you want a tagged source with a clickable link.
+              </p>
             </div>
-          ))}
+          </DraggableSurface>
         </div>
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 6. NeoThankYou
-// ============================================================================
-
 export function NeoThankYou({
   title,
   subtitle,
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
+  const slideRef = useRef<HTMLDivElement>(null);
   const [editingField, setEditingField] = useState<string | null>(null);
   const [tempTitle, setTempTitle] = useState(title);
   const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
@@ -809,131 +1334,149 @@ export function NeoThankYou({
   };
 
   const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field); }
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleBlur(field);
+    }
     if (e.key === 'Escape') {
       setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'subtitle') setTempSubtitle(subtitle || '');
+      setTempTitle(title);
+      setTempSubtitle(subtitle || '');
     }
   };
 
   return (
     <div
-      className="w-full h-full flex flex-col items-center justify-center relative overflow-hidden"
-      style={{ backgroundColor: '#D9FF00', color: '#000' }}
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden px-8 py-10"
+      style={{ backgroundColor: '#F5F5F0', color: styles.colors.text }}
     >
       <DotOverlay pattern={styles.dotPattern} />
 
-      <div className="relative z-10 flex flex-col items-center text-center">
-        {/* THE_END badge */}
-        <div
-          className="absolute -top-8 -left-10 bg-neo-purple neo-border"
-          style={{
-            transform: 'rotate(-12deg)',
-            padding: '4px 14px',
-          }}
+      <div className="relative z-10 flex w-full flex-col items-center gap-8">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="thank-you-title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+          className="relative"
         >
-          <span
-            style={{
-              fontFamily: styles.fonts.heading,
-              fontSize: '11px',
-              fontWeight: 900,
-              color: '#fff',
-              textTransform: 'uppercase',
-              letterSpacing: '0.08em',
-            }}
-          >
-            THE_END
-          </span>
-        </div>
+          <div className="relative bg-neo-lime neo-border neo-shadow px-10 py-12 md:px-14 md:py-14">
+            <div className="absolute -left-6 -top-6 rotate-12 bg-neo-purple px-4 py-3 text-white neo-border">
+              <span
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '18px',
+                  fontWeight: 900,
+                  textTransform: 'uppercase',
+                }}
+              >
+                THE_END
+              </span>
+            </div>
 
-        {/* Main title */}
-        <div
-        >
-          {editingField === 'title' ? (
-            <input
-              type="text"
-              value={tempTitle}
-              onChange={(e) => setTempTitle(e.target.value)}
-              onBlur={() => handleBlur('title')}
-              onKeyDown={(e) => handleKeyDown(e, 'title')}
-              className="neo-border neo-shadow text-center outline-none"
-              style={{
-                fontFamily: styles.fonts.heading,
-                fontSize: '52px',
-                fontWeight: 900,
-                color: '#000',
-                textTransform: 'uppercase',
-                padding: '10px 36px',
-                backgroundColor: '#fff',
-                letterSpacing: '-0.02em',
-                width: '100%',
-              }}
-              autoFocus
-            />
-          ) : (
-            <h1
-              className={`neo-border neo-shadow ${isEditable ? 'cursor-pointer' : ''}`}
-              style={{
-                fontFamily: styles.fonts.heading,
-                fontSize: '52px',
-                fontWeight: 900,
-                color: '#000',
-                textTransform: 'uppercase',
-                padding: '10px 36px',
-                backgroundColor: '#fff',
-                display: 'inline-block',
-                letterSpacing: '-0.02em',
-              }}
-              onClick={() => { if (isEditable) { setEditingField('title'); setTempTitle(title); } }}
-            >
-              {title || 'THANK YOU!'}
-            </h1>
-          )}
-        </div>
+            {editingField === 'title' ? (
+              <textarea
+                value={tempTitle}
+                onChange={(e) => setTempTitle(e.target.value)}
+                onBlur={() => handleBlur('title')}
+                onKeyDown={(e) => handleKeyDown(e, 'title')}
+                onPointerDown={stopPointerDown}
+                className="w-full resize-none bg-transparent text-center outline-none"
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '58px',
+                  fontWeight: 900,
+                  color: '#000',
+                  lineHeight: 0.9,
+                  letterSpacing: '-0.05em',
+                  textTransform: 'uppercase',
+                }}
+                rows={2}
+                autoFocus
+              />
+            ) : (
+              <h2
+                className={isEditable ? 'cursor-text text-center' : 'text-center'}
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '58px',
+                  fontWeight: 900,
+                  color: '#000',
+                  lineHeight: 0.9,
+                  letterSpacing: '-0.05em',
+                  textTransform: 'uppercase',
+                  whiteSpace: 'pre-line',
+                }}
+                onClick={() => {
+                  if (isEditable) {
+                    setEditingField('title');
+                    setTempTitle(title);
+                  }
+                }}
+              >
+                {title || 'THANK YOU!'}
+              </h2>
+            )}
+          </div>
+        </DraggableSurface>
 
-        {/* Subtitle */}
-        {(subtitle || isEditable) && (
-          <div
-            className="mt-4"
-          >
+        <DraggableSurface
+          constraintsRef={slideRef}
+          slideId={slideId}
+          formatKey="thank-you-subtitle"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          isEditable={isEditable}
+        >
+          <div className="bg-white/70 px-3 py-2">
             {editingField === 'subtitle' ? (
-              <input
-                type="text"
+              <textarea
                 value={tempSubtitle}
                 onChange={(e) => setTempSubtitle(e.target.value)}
                 onBlur={() => handleBlur('subtitle')}
                 onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
-                className="text-center outline-none bg-transparent"
+                onPointerDown={stopPointerDown}
+                className="w-full resize-none bg-transparent text-center outline-none"
                 style={{
                   fontFamily: styles.fonts.body,
-                  fontSize: '14px',
-                  fontWeight: 700,
+                  fontSize: '18px',
+                  fontWeight: 800,
                   color: '#000',
+                  lineHeight: 1.2,
+                  letterSpacing: '0.08em',
                   textTransform: 'uppercase',
-                  letterSpacing: '0.12em',
-                  width: '100%',
                 }}
+                rows={2}
                 autoFocus
               />
             ) : (
               <p
-                className={`${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
+                className={isEditable ? 'cursor-text text-center' : 'text-center'}
                 style={{
                   fontFamily: styles.fonts.body,
-                  fontSize: '14px',
-                  fontWeight: 700,
+                  fontSize: '18px',
+                  fontWeight: 800,
                   color: '#000',
+                  lineHeight: 1.2,
+                  letterSpacing: '0.08em',
                   textTransform: 'uppercase',
-                  letterSpacing: '0.12em',
+                  whiteSpace: 'pre-line',
+                }}
+                onClick={() => {
+                  if (isEditable) {
+                    setEditingField('subtitle');
+                    setTempSubtitle(subtitle || '');
+                  }
                 }}
-                onClick={() => { if (isEditable) { setEditingField('subtitle'); setTempSubtitle(subtitle || ''); } }}
               >
                 {subtitle || (isEditable ? 'Click to add subtitle' : '')}
               </p>
             )}
           </div>
-        )}
+        </DraggableSurface>
       </div>
     </div>
   );

components/slides/noisy/layouts.tsx

@@ -1,237 +1,417 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useEffect, useId, useRef } from 'react';
+import { GripHorizontal, Image as ImageIcon } from 'lucide-react';
 import { TemplateStyles } from '@/data/templates';
-
-// ============================================================================
-// SHARED TYPES
-// ============================================================================
+import { PersistedDraggableSurface, SlideFormattingMap } from '@/components/slides/shared/PersistedDraggableSurface';
 
 interface LayoutProps {
   title: string;
   subtitle?: string;
   body?: Array<{ heading?: string; text: string }>;
+  columns?: Array<{ heading: string; text: string }>;
   items?: Array<{ text: string }>;
   imageUrl?: string;
+  formatting?: SlideFormattingMap;
   styles: TemplateStyles;
   slideId?: string;
   isEditable?: boolean;
   onFieldUpdate?: (slideId: string, field: string, value: string, index?: number) => void;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
+  onRequestImageSelect?: (slideId: string) => void;
+}
+
+interface DraggableSurfaceProps {
+  children: React.ReactNode;
+  constraintsRef: React.RefObject<HTMLDivElement | null>;
+  isEditable?: boolean;
+  slideId?: string;
+  formatKey: string;
+  formatting?: SlideFormattingMap;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
+  className?: string;
+  style?: React.CSSProperties;
+  handleClassName?: string;
+}
+
+interface EditableContentProps {
+  value: string;
+  as?: React.ElementType;
+  className?: string;
+  style?: React.CSSProperties;
+  isEditable?: boolean;
+  multiline?: boolean;
+  onCommit?: (value: string) => void;
+}
+
+const DEFAULT_IMAGE = 'https://picsum.photos/seed/presentation/800/600';
+const DEFAULT_TRANSLITERATION_IMAGE = 'https://picsum.photos/seed/transliteration/800/600';
+
+function stopPointerDown(e: React.PointerEvent<HTMLElement>) {
+  e.stopPropagation();
+}
+
+function readEditableValue(value: string) {
+  return value
+    .replace(/\u00a0/g, ' ')
+    .replace(/\r/g, '')
+    .replace(/\n{3,}/g, '\n\n')
+    .trim();
+}
+
+function formatIndex(index: number) {
+  return String(index).padStart(2, '0');
+}
+
+function NoiseOverlay() {
+  const filterId = useId().replace(/:/g, '');
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-0 opacity-60 mix-blend-overlay">
+      <svg className="h-full w-full">
+        <filter id={filterId}>
+          <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch" />
+          <feColorMatrix type="saturate" values="0" />
+        </filter>
+        <rect width="100%" height="100%" filter={`url(#${filterId})`} />
+      </svg>
+    </div>
+  );
+}
+
+function DraggableSurface({
+  children,
+  constraintsRef,
+  isEditable = false,
+  slideId,
+  formatKey,
+  formatting,
+  onFormattingUpdate,
+  className,
+  style,
+  handleClassName = '-top-6 left-1/2 -translate-x-1/2',
+}: DraggableSurfaceProps) {
+  return (
+    <PersistedDraggableSurface
+      constraintsRef={constraintsRef}
+      slideId={slideId}
+      formatKey={formatKey}
+      formatting={formatting}
+      onFormattingUpdate={onFormattingUpdate}
+      isEditable={isEditable}
+      className={className}
+      style={style}
+      handleClassName={handleClassName}
+      groupClassName="group"
+      handle={
+        <div className="rounded bg-blue-600 p-1 text-white shadow-md opacity-0 transition-all group-hover:scale-110 group-hover:opacity-100 group-hover:bg-blue-500">
+          <GripHorizontal size={16} />
+        </div>
+      }
+    >
+      {children}
+    </PersistedDraggableSurface>
+  );
 }
 
-// ============================================================================
-// NOISE OVERLAY
-// ============================================================================
-
-const NoiseOverlay = () => (
-  <div className="absolute inset-0 pointer-events-none z-0 opacity-60 mix-blend-overlay">
-    <svg className="w-full h-full">
-      <filter id="noise-filter">
-        <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch" />
-        <feColorMatrix type="saturate" values="0" />
-      </filter>
-      <rect width="100%" height="100%" filter="url(#noise-filter)" />
-    </svg>
-  </div>
-);
-
-// ============================================================================
-// 1. NoisyTitleSubtitle
-// ============================================================================
+function EditableContent({
+  value,
+  as = 'div',
+  className,
+  style,
+  isEditable = false,
+  multiline = false,
+  onCommit,
+}: EditableContentProps) {
+  const contentRef = useRef<HTMLElement>(null);
+  const Component = as as any;
+
+  useEffect(() => {
+    if (!contentRef.current) return;
+    if (document.activeElement === contentRef.current) return;
+    if (contentRef.current.innerText !== value) {
+      contentRef.current.innerText = value;
+    }
+  }, [value]);
+
+  return (
+    <Component
+      ref={contentRef}
+      contentEditable={isEditable}
+      suppressContentEditableWarning
+      spellCheck={false}
+      onPointerDown={stopPointerDown}
+      onBlur={() => {
+        if (!isEditable || !contentRef.current || !onCommit) return;
+        const nextValue = readEditableValue(contentRef.current.innerText);
+        if (nextValue !== value) {
+          onCommit(nextValue);
+        } else if (contentRef.current.innerText !== value) {
+          contentRef.current.innerText = value;
+        }
+      }}
+      onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {
+        if (e.key === 'Escape') {
+          e.preventDefault();
+          if (contentRef.current) {
+            contentRef.current.innerText = value;
+          }
+          (e.currentTarget as HTMLElement).blur();
+        }
+
+        if (!multiline && e.key === 'Enter') {
+          e.preventDefault();
+          (e.currentTarget as HTMLElement).blur();
+        }
+      }}
+      className={`outline-none ${isEditable ? 'cursor-text hover:ring-2 hover:ring-blue-500/30' : ''} ${className || ''}`}
+      style={{
+        whiteSpace: multiline ? 'pre-line' : 'normal',
+        ...style,
+      }}
+    >
+      {value}
+    </Component>
+  );
+}
+
+function DraggableImage({
+  src,
+  alt,
+  constraintsRef,
+  isEditable = false,
+  slideId,
+  formatKey,
+  formatting,
+  onFormattingUpdate,
+  onReplace,
+  className,
+}: {
+  src?: string;
+  alt: string;
+  constraintsRef: React.RefObject<HTMLDivElement | null>;
+  isEditable?: boolean;
+  slideId?: string;
+  formatKey: string;
+  formatting?: SlideFormattingMap;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
+  onReplace?: () => void;
+  className?: string;
+}) {
+  const imageSrc = src || DEFAULT_IMAGE;
+
+  return (
+    <DraggableSurface
+      constraintsRef={constraintsRef}
+      isEditable={isEditable}
+      slideId={slideId}
+      formatKey={formatKey}
+      formatting={formatting}
+      onFormattingUpdate={onFormattingUpdate}
+      className={className}
+      handleClassName="-top-6 left-1/2 -translate-x-1/2"
+    >
+      <div className="relative h-full w-full overflow-hidden rounded-lg shadow-lg">
+        <img
+          src={imageSrc}
+          alt={alt}
+          referrerPolicy="no-referrer"
+          className="h-full w-full max-w-full rounded-lg object-cover"
+        />
+
+        {isEditable && onReplace && (
+          <button
+            type="button"
+            onClick={onReplace}
+            onPointerDown={stopPointerDown}
+            className="absolute right-2 top-2 z-30 inline-flex items-center gap-2 rounded bg-blue-600/85 px-3 py-2 text-xs font-bold text-white opacity-30 shadow-md transition-all hover:bg-blue-500 group-hover:opacity-100"
+          >
+            <ImageIcon size={16} />
+            Replace
+          </button>
+        )}
+      </div>
+    </DraggableSurface>
+  );
+}
 
 export function NoisyTitleSubtitle({
   title,
   subtitle,
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<string | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
-
-  const handleBlur = (field: string) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'subtitle' && tempSubtitle !== subtitle) onFieldUpdate(slideId, 'subtitle', tempSubtitle);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'subtitle') setTempSubtitle(subtitle || '');
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
 
   return (
     <div
-      className="w-full h-full flex flex-col justify-center relative overflow-hidden p-10"
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col justify-center overflow-hidden p-12 md:p-16"
       style={{ backgroundColor: '#547BEE' }}
     >
       <NoiseOverlay />
 
-      <div className="relative z-10">
-        {/* Title */}
-        {editingField === 'title' ? (
-          <input
-            type="text"
-            value={tempTitle}
-            onChange={(e) => setTempTitle(e.target.value)}
-            onBlur={() => handleBlur('title')}
-            onKeyDown={(e) => handleKeyDown(e, 'title')}
-            className="w-full bg-transparent outline-none font-mono font-bold underline decoration-2 underline-offset-4 mb-4"
-            style={{ fontSize: '36px', color: '#ffffff' }}
-            autoFocus
+      <div className="relative z-10 flex flex-col gap-8">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          isEditable={isEditable}
+          slideId={slideId}
+          formatKey="title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          className="w-fit"
+        >
+          <EditableContent
+            as="h1"
+            value={title || 'Presentation Title'}
+            isEditable={isEditable}
+            multiline
+            onCommit={(value) => {
+              if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+            }}
+            className="mb-0 underline decoration-2 underline-offset-8"
+            style={{
+              fontFamily: styles.fonts.heading,
+              fontSize: '64px',
+              fontWeight: 700,
+              color: '#ffffff',
+              lineHeight: 1.05,
+            }}
           />
-        ) : (
-          <h1
-            className={`font-mono font-bold underline decoration-2 underline-offset-4 mb-4 ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-            style={{ fontSize: '36px', color: '#ffffff', lineHeight: 1.2 }}
-            onClick={() => { if (isEditable) { setEditingField('title'); setTempTitle(title); } }}
-          >
-            {title || 'Presentation Title'}
-          </h1>
-        )}
+        </DraggableSurface>
 
-        {/* Subtitle */}
         {(subtitle || isEditable) && (
-          editingField === 'subtitle' ? (
-            <input
-              type="text"
-              value={tempSubtitle}
-              onChange={(e) => setTempSubtitle(e.target.value)}
-              onBlur={() => handleBlur('subtitle')}
-              onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
-              className="w-full bg-transparent outline-none font-mono"
-              style={{ fontSize: '16px', color: '#ffffff', opacity: 0.85 }}
-              autoFocus
+          <DraggableSurface
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey="subtitle"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="max-w-[780px]"
+          >
+            <EditableContent
+              as="p"
+              value={subtitle || ''}
+              isEditable={isEditable}
+              multiline
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'subtitle', value);
+              }}
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '26px',
+                lineHeight: 1.6,
+                color: '#ffffff',
+                opacity: 0.95,
+              }}
             />
-          ) : (
-            <p
-              className={`font-mono ${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
-              style={{ fontSize: '16px', color: '#ffffff', opacity: 0.85, lineHeight: 1.6 }}
-              onClick={() => { if (isEditable) { setEditingField('subtitle'); setTempSubtitle(subtitle || ''); } }}
-            >
-              {subtitle || (isEditable ? 'Click to add subtitle' : '')}
-            </p>
-          )
+          </DraggableSurface>
         )}
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 2. NoisyAgenda
-// ============================================================================
-
 export function NoisyAgenda({
   title,
   items = [],
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempItems, setTempItems] = useState(items.map((i) => i.text));
-
-  const handleBlur = (field: string, index?: number) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'items' && index !== undefined && tempItems[index] !== items[index]?.text)
-      onFieldUpdate(slideId, 'items', tempItems[index], index);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field, index); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'items') setTempItems(items.map((i) => i.text));
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
+  const agendaItems = items.length ? items : [{ text: '' }, { text: '' }, { text: '' }];
 
   return (
     <div
-      className="w-full h-full flex flex-col relative overflow-hidden p-10"
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col overflow-hidden p-12 md:p-16"
       style={{ backgroundColor: '#547BEE' }}
     >
       <NoiseOverlay />
 
-      <div className="relative z-10 flex flex-col h-full">
-        {/* Title */}
-        {editingField?.field === 'title' ? (
-          <input
-            type="text"
-            value={tempTitle}
-            onChange={(e) => setTempTitle(e.target.value)}
-            onBlur={() => handleBlur('title')}
-            onKeyDown={(e) => handleKeyDown(e, 'title')}
-            className="bg-transparent outline-none font-mono font-bold underline decoration-2 underline-offset-4 mb-8"
-            style={{ fontSize: '28px', color: '#ffffff' }}
-            autoFocus
+      <div className="relative z-10 flex h-full flex-col">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          isEditable={isEditable}
+          slideId={slideId}
+          formatKey="agenda-title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          className="mb-16 w-fit"
+        >
+          <EditableContent
+            as="h1"
+            value={title || 'Agenda'}
+            isEditable={isEditable}
+            onCommit={(value) => {
+              if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+            }}
+            className="underline decoration-2 underline-offset-8"
+            style={{
+              fontFamily: styles.fonts.heading,
+              fontSize: '54px',
+              fontWeight: 700,
+              color: '#ffffff',
+              lineHeight: 1.05,
+            }}
           />
-        ) : (
-          <h2
-            className={`font-mono font-bold underline decoration-2 underline-offset-4 mb-8 ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-            style={{ fontSize: '28px', color: '#ffffff' }}
-            onClick={() => { if (isEditable) { setEditingField({ field: 'title' }); setTempTitle(title); } }}
-          >
-            {title}
-          </h2>
-        )}
-
-        {/* Agenda Items - horizontal row */}
-        <div className="flex flex-row items-start justify-center gap-8 flex-1">
-          {items.map((item, i) => (
-            <div key={i} className="flex flex-col items-center text-center" style={{ minWidth: '120px', maxWidth: '180px' }}>
-              {/* Big number */}
+        </DraggableSurface>
+
+        <div
+          className="grid flex-1 items-center gap-8"
+          style={{ gridTemplateColumns: `repeat(${Math.min(agendaItems.length, 3)}, minmax(0, 1fr))` }}
+        >
+          {agendaItems.map((item, index) => (
+            <DraggableSurface
+              key={`${index}-${item.text}`}
+              constraintsRef={slideRef}
+              isEditable={isEditable}
+              slideId={slideId}
+              formatKey={`agenda-item-${index}`}
+              formatting={formatting}
+              onFormattingUpdate={onFormattingUpdate}
+              className="flex h-full flex-col items-center justify-center text-center"
+            >
               <span
-                className="font-mono font-bold"
-                style={{ fontSize: '64px', color: '#ffffff', lineHeight: 1 }}
+                style={{
+                  fontFamily: styles.fonts.heading,
+                  fontSize: '140px',
+                  fontWeight: 700,
+                  lineHeight: 0.9,
+                  letterSpacing: '-0.06em',
+                  color: '#ffffff',
+                }}
               >
-                {String(i + 1).padStart(2, '0')}
+                {formatIndex(index + 1)}
               </span>
 
-              {/* Coral accent bar */}
-              <div
-                className="my-3"
-                style={{ width: '40px', height: '4px', backgroundColor: '#FF7A59', borderRadius: '2px' }}
+              <div className="mb-6 mt-4 h-4 w-40 bg-[#FF7A59]" />
+
+              <EditableContent
+                as="span"
+                value={item.text}
+                isEditable={isEditable}
+                multiline
+                onCommit={(value) => {
+                  if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'items', value, index);
+                }}
+                style={{
+                  fontFamily: styles.fonts.body,
+                  fontSize: '32px',
+                  lineHeight: 1.35,
+                  color: '#ffffff',
+                }}
               />
-
-              {/* Item text */}
-              {editingField?.field === 'items' && editingField?.index === i ? (
-                <input
-                  type="text"
-                  value={tempItems[i] || ''}
-                  onChange={(e) => {
-                    const next = [...tempItems];
-                    next[i] = e.target.value;
-                    setTempItems(next);
-                  }}
-                  onBlur={() => handleBlur('items', i)}
-                  onKeyDown={(e) => handleKeyDown(e, 'items', i)}
-                  className="w-full bg-transparent outline-none text-center font-mono"
-                  style={{ fontSize: '14px', color: '#ffffff' }}
-                  autoFocus
-                />
-              ) : (
-                <span
-                  className={`font-mono ${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
-                  style={{ fontSize: '14px', color: '#ffffff', opacity: 0.9, lineHeight: 1.5 }}
-                  onClick={() => { if (isEditable) { setEditingField({ field: 'items', index: i }); setTempItems(items.map((x) => x.text)); } }}
-                >
-                  {item.text}
-                </span>
-              )}
-            </div>
+            </DraggableSurface>
           ))}
         </div>
       </div>
@@ -239,422 +419,471 @@ export function NoisyAgenda({
   );
 }
 
-// ============================================================================
-// 3. NoisyTitleAndText
-// ============================================================================
+export function NoisyThreeColumns({
+  title,
+  columns = [],
+  formatting,
+  styles,
+  slideId,
+  isEditable = false,
+  onFieldUpdate,
+  onFormattingUpdate,
+}: LayoutProps) {
+  const slideRef = useRef<HTMLDivElement>(null);
+  const columnItems = columns.length ? columns : [{ heading: '', text: '' }];
+
+  return (
+    <div
+      ref={slideRef}
+      className="flex h-full w-full flex-col overflow-hidden bg-white p-12 md:p-16"
+    >
+      <DraggableSurface
+        constraintsRef={slideRef}
+        isEditable={isEditable}
+        slideId={slideId}
+        formatKey="columns-title"
+        formatting={formatting}
+        onFormattingUpdate={onFormattingUpdate}
+        className="mb-14 w-fit"
+      >
+        <EditableContent
+          as="h1"
+          value={title || 'Three Column Layout'}
+          isEditable={isEditable}
+          onCommit={(value) => {
+            if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+          }}
+          className="underline decoration-2 underline-offset-8"
+          style={{
+            fontFamily: styles.fonts.heading,
+            fontSize: '54px',
+            fontWeight: 700,
+            color: '#547BEE',
+            lineHeight: 1.05,
+          }}
+        />
+      </DraggableSurface>
+
+      <div
+        className="grid flex-1 gap-10"
+        style={{ gridTemplateColumns: `repeat(${Math.min(columnItems.length, 3)}, minmax(0, 1fr))` }}
+      >
+        {columnItems.map((column, index) => (
+          <DraggableSurface
+            key={`${index}-${column.heading}-${column.text}`}
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey={`column-${index}`}
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="flex h-full flex-col"
+          >
+            <EditableContent
+              as="h2"
+              value={column.heading}
+              isEditable={isEditable}
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) {
+                  onFieldUpdate(
+                    slideId,
+                    'columns',
+                    JSON.stringify({ heading: value, text: column.text }),
+                    index
+                  );
+                }
+              }}
+              className="mb-6"
+              style={{
+                fontFamily: styles.fonts.heading,
+                fontSize: '32px',
+                fontWeight: 700,
+                color: '#547BEE',
+                lineHeight: 1.15,
+              }}
+            />
+
+            <EditableContent
+              as="p"
+              value={column.text}
+              isEditable={isEditable}
+              multiline
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) {
+                  onFieldUpdate(
+                    slideId,
+                    'columns',
+                    JSON.stringify({ heading: column.heading, text: value }),
+                    index
+                  );
+                }
+              }}
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '26px',
+                lineHeight: 1.55,
+                color: '#1f2937',
+              }}
+            />
+          </DraggableSurface>
+        ))}
+      </div>
+    </div>
+  );
+}
 
 export function NoisyTitleAndText({
   title,
   body = [],
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempBody, setTempBody] = useState(body.map((b) => b.text));
-
-  const handleBlur = (field: string, index?: number) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'body' && index !== undefined && tempBody[index] !== body[index]?.text)
-      onFieldUpdate(slideId, 'body', tempBody[index], index);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field, index); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'body') setTempBody(body.map((b) => b.text));
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
+  const bodyItems = body.length ? body : [{ text: '' }];
 
   return (
     <div
-      className="w-full h-full flex flex-col relative overflow-hidden p-10"
-      style={{ backgroundColor: '#ffffff' }}
+      ref={slideRef}
+      className="flex h-full w-full flex-col overflow-hidden bg-white p-12 md:p-16"
     >
-      <div className="relative z-10 flex flex-col h-full">
-        {/* Title */}
-        {editingField?.field === 'title' ? (
-          <input
-            type="text"
-            value={tempTitle}
-            onChange={(e) => setTempTitle(e.target.value)}
-            onBlur={() => handleBlur('title')}
-            onKeyDown={(e) => handleKeyDown(e, 'title')}
-            className="bg-transparent outline-none font-mono font-bold underline decoration-2 underline-offset-4 mb-6"
-            style={{ fontSize: '28px', color: '#547BEE' }}
-            autoFocus
-          />
-        ) : (
-          <h2
-            className={`font-mono font-bold underline decoration-2 underline-offset-4 mb-6 ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-            style={{ fontSize: '28px', color: '#547BEE' }}
-            onClick={() => { if (isEditable) { setEditingField({ field: 'title' }); setTempTitle(title); } }}
+      <DraggableSurface
+        constraintsRef={slideRef}
+        isEditable={isEditable}
+        slideId={slideId}
+        formatKey="title-and-text-title"
+        formatting={formatting}
+        onFormattingUpdate={onFormattingUpdate}
+        className="mb-10 w-fit"
+      >
+        <EditableContent
+          as="h1"
+          value={title || 'Slide Title'}
+          isEditable={isEditable}
+          onCommit={(value) => {
+            if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+          }}
+          className="underline decoration-2 underline-offset-8"
+          style={{
+            fontFamily: styles.fonts.heading,
+            fontSize: '54px',
+            fontWeight: 700,
+            color: '#547BEE',
+            lineHeight: 1.05,
+          }}
+        />
+      </DraggableSurface>
+
+      <div className="flex flex-1 flex-col gap-8">
+        {bodyItems.map((entry, index) => (
+          <DraggableSurface
+            key={`${index}-${entry.heading}-${entry.text}`}
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey={`title-and-text-body-${index}`}
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="w-full max-w-[1080px]"
           >
-            {title}
-          </h2>
-        )}
-
-        {/* Body Points */}
-        <div className="flex flex-col gap-4 flex-1">
-          {body.map((b, i) => (
-            <div key={i} className="flex items-start gap-3">
-              {/* Heading */}
-              {b.heading && (
-                <span
-                  className="font-mono font-bold shrink-0"
-                  style={{ fontSize: '14px', color: '#547BEE' }}
-                >
-                  {b.heading}
-                </span>
-              )}
-
-              {/* Body text */}
-              {editingField?.field === 'body' && editingField?.index === i ? (
-                <textarea
-                  value={tempBody[i] || ''}
-                  onChange={(e) => {
-                    const next = [...tempBody];
-                    next[i] = e.target.value;
-                    setTempBody(next);
-                  }}
-                  onBlur={() => handleBlur('body', i)}
-                  onKeyDown={(e) => handleKeyDown(e, 'body', i)}
-                  className="w-full bg-transparent outline-none resize-none font-mono"
-                  style={{ fontSize: '14px', color: '#1f2937', lineHeight: 1.7 }}
-                  rows={2}
-                  autoFocus
-                />
-              ) : (
-                <p
-                  className={`font-mono leading-relaxed ${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
-                  style={{ fontSize: '14px', color: '#1f2937', lineHeight: 1.7 }}
-                  onClick={() => {
-                    if (isEditable) {
-                      setEditingField({ field: 'body', index: i });
-                      setTempBody(body.map((x) => x.text));
-                    }
+            <div>
+              {entry.heading && (
+                <div
+                  className="mb-4"
+                  style={{
+                    fontFamily: styles.fonts.heading,
+                    fontSize: '36px',
+                    fontWeight: 700,
+                    color: '#547BEE',
                   }}
                 >
-                  {b.text}
-                </p>
+                  {entry.heading}
+                </div>
               )}
+
+              <EditableContent
+                as="p"
+                value={entry.text}
+                isEditable={isEditable}
+                multiline
+                onCommit={(value) => {
+                  if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'body', value, index);
+                }}
+                style={{
+                  fontFamily: styles.fonts.body,
+                  fontSize: '34px',
+                  lineHeight: 1.5,
+                  color: '#1f2937',
+                }}
+              />
             </div>
-          ))}
-        </div>
+          </DraggableSurface>
+        ))}
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 4. NoisyImageAndText
-// ============================================================================
-
 export function NoisyImageAndText({
   title,
   body = [],
   imageUrl,
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
+  onRequestImageSelect,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<string | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempBody, setTempBody] = useState(body[0]?.text || '');
-
-  const handleBlur = (field: string) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'body' && tempBody !== (body[0]?.text || '')) onFieldUpdate(slideId, 'body', tempBody, 0);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
-    if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleBlur(field); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      setTempTitle(title);
-      setTempBody(body[0]?.text || '');
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
+  const bodyText = body[0]?.text || '';
 
   return (
     <div
-      className="w-full h-full flex flex-col relative overflow-hidden"
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col overflow-hidden"
       style={{ backgroundColor: '#F2725C' }}
     >
       <NoiseOverlay />
 
-      <div className="relative z-10 flex flex-col h-full p-10">
-        {/* Title */}
-        {editingField === 'title' ? (
-          <input
-            type="text"
-            value={tempTitle}
-            onChange={(e) => setTempTitle(e.target.value)}
-            onBlur={() => handleBlur('title')}
-            onKeyDown={(e) => handleKeyDown(e, 'title')}
-            className="bg-transparent outline-none font-mono font-bold underline decoration-2 underline-offset-4 mb-6"
-            style={{ fontSize: '28px', color: '#ffffff' }}
-            autoFocus
+      <div className="relative z-10 flex h-full flex-col p-12 md:p-16">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          isEditable={isEditable}
+          slideId={slideId}
+          formatKey="image-title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          className="mb-10 w-fit"
+        >
+          <EditableContent
+            as="h1"
+            value={title || 'Visual Results'}
+            isEditable={isEditable}
+            onCommit={(value) => {
+              if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+            }}
+            className="underline decoration-2 underline-offset-8"
+            style={{
+              fontFamily: styles.fonts.heading,
+              fontSize: '54px',
+              fontWeight: 700,
+              color: '#ffffff',
+              lineHeight: 1.05,
+            }}
           />
-        ) : (
-          <h2
-            className={`font-mono font-bold underline decoration-2 underline-offset-4 mb-6 ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-            style={{ fontSize: '28px', color: '#ffffff' }}
-            onClick={() => { if (isEditable) { setEditingField('title'); setTempTitle(title); } }}
-          >
-            {title}
-          </h2>
-        )}
-
-        {/* Two columns: image + text */}
-        <div className="flex flex-row gap-8 flex-1 min-h-0">
-          {/* Left: Image */}
-          <div className="w-1/2 h-full rounded overflow-hidden flex items-center justify-center" style={{ backgroundColor: 'rgba(255,255,255,0.15)' }}>
-            {imageUrl ? (
-              <img
-                src={imageUrl}
-                alt={title}
-                className="w-full h-full object-cover"
-              />
-            ) : (
-              <div className="flex flex-col items-center justify-center gap-2 text-white/60">
-                <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
-                </svg>
-                <span className="font-mono text-xs">Image placeholder</span>
-              </div>
-            )}
+        </DraggableSurface>
+
+        <div className="flex flex-1 items-center gap-10">
+          <div className="flex w-1/2 justify-center">
+            <DraggableImage
+              src={imageUrl || DEFAULT_TRANSLITERATION_IMAGE}
+              alt={title || 'Noisy visual'}
+              constraintsRef={slideRef}
+              isEditable={isEditable}
+              slideId={slideId}
+              formatKey="image-card"
+              formatting={formatting}
+              onFormattingUpdate={onFormattingUpdate}
+              onReplace={
+                isEditable && slideId && onRequestImageSelect
+                  ? () => onRequestImageSelect(slideId)
+                  : undefined
+              }
+              className="w-full"
+            />
           </div>
 
-          {/* Right: Text */}
-          <div className="w-1/2 flex flex-col justify-center">
-            {editingField === 'body' ? (
-              <textarea
-                value={tempBody}
-                onChange={(e) => setTempBody(e.target.value)}
-                onBlur={() => handleBlur('body')}
-                onKeyDown={(e) => handleKeyDown(e, 'body')}
-                className="w-full bg-transparent outline-none resize-none font-mono"
-                style={{ fontSize: '14px', color: '#ffffff', lineHeight: 1.7 }}
-                rows={6}
-                autoFocus
-              />
-            ) : (
-              <p
-                className={`font-mono ${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
-                style={{ fontSize: '14px', color: '#ffffff', lineHeight: 1.7, opacity: 0.95 }}
-                onClick={() => { if (isEditable) { setEditingField('body'); setTempBody(body[0]?.text || ''); } }}
-              >
-                {body[0]?.text || (isEditable ? 'Click to add description' : '')}
-              </p>
-            )}
-          </div>
+          <DraggableSurface
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey="image-body"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="flex w-1/2 flex-col gap-8"
+          >
+            <EditableContent
+              as="p"
+              value={bodyText}
+              isEditable={isEditable}
+              multiline
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'body', value, 0);
+              }}
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '30px',
+                lineHeight: 1.55,
+                color: '#ffffff',
+              }}
+            />
+          </DraggableSurface>
         </div>
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 5. NoisyReferences
-// ============================================================================
-
 export function NoisyReferences({
   title,
   items = [],
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<{ field: string; index?: number } | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempItems, setTempItems] = useState(items.map((i) => i.text));
-
-  const handleBlur = (field: string, index?: number) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'items' && index !== undefined && tempItems[index] !== items[index]?.text)
-      onFieldUpdate(slideId, 'items', tempItems[index], index);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string, index?: number) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field, index); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'items') setTempItems(items.map((i) => i.text));
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
+  const referenceItems = items.length ? items : [{ text: '' }];
 
   return (
     <div
-      className="w-full h-full flex flex-col relative overflow-hidden p-10"
-      style={{ backgroundColor: '#ffffff' }}
+      ref={slideRef}
+      className="flex h-full w-full flex-col overflow-hidden bg-white p-12 md:p-16"
     >
-      <div className="relative z-10 flex flex-col h-full">
-        {/* Title */}
-        {editingField?.field === 'title' ? (
-          <input
-            type="text"
-            value={tempTitle}
-            onChange={(e) => setTempTitle(e.target.value)}
-            onBlur={() => handleBlur('title')}
-            onKeyDown={(e) => handleKeyDown(e, 'title')}
-            className="bg-transparent outline-none font-mono font-bold underline decoration-2 underline-offset-4 mb-6"
-            style={{ fontSize: '28px', color: '#547BEE' }}
-            autoFocus
-          />
-        ) : (
-          <h2
-            className={`font-mono font-bold underline decoration-2 underline-offset-4 mb-6 ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-            style={{ fontSize: '28px', color: '#547BEE' }}
-            onClick={() => { if (isEditable) { setEditingField({ field: 'title' }); setTempTitle(title); } }}
+      <DraggableSurface
+        constraintsRef={slideRef}
+        isEditable={isEditable}
+        slideId={slideId}
+        formatKey="references-title"
+        formatting={formatting}
+        onFormattingUpdate={onFormattingUpdate}
+        className="mb-10 w-fit"
+      >
+        <EditableContent
+          as="h1"
+          value={title || 'References'}
+          isEditable={isEditable}
+          onCommit={(value) => {
+            if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+          }}
+          className="underline decoration-2 underline-offset-8"
+          style={{
+            fontFamily: styles.fonts.heading,
+            fontSize: '54px',
+            fontWeight: 700,
+            color: '#547BEE',
+            lineHeight: 1.05,
+          }}
+        />
+      </DraggableSurface>
+
+      <div className="flex flex-1 flex-col gap-6">
+        {referenceItems.map((item, index) => (
+          <DraggableSurface
+            key={`${index}-${item.text}`}
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey={`reference-item-${index}`}
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="w-full"
           >
-            {title}
-          </h2>
-        )}
-
-        {/* Reference Items */}
-        <div className="flex flex-col gap-3 flex-1">
-          {items.map((item, i) => (
-            <div
-              key={i}
-              className="flex items-start gap-3 py-2"
-              style={{ borderBottom: '1px solid #e5e7eb' }}
-            >
-              {/* Bullet dot */}
-              <div
-                className="shrink-0 mt-2 rounded-full"
-                style={{ width: '6px', height: '6px', backgroundColor: '#547BEE' }}
+            <div className="flex items-start gap-4 border-b border-gray-200 py-2">
+              <div className="mt-3 h-1.5 w-1.5 shrink-0 rounded-full bg-[#547BEE]" />
+              <EditableContent
+                as="p"
+                value={item.text}
+                isEditable={isEditable}
+                multiline
+                onCommit={(value) => {
+                  if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'items', value, index);
+                }}
+                style={{
+                  fontFamily: styles.fonts.body,
+                  fontSize: '30px',
+                  lineHeight: 1.55,
+                  color: '#1f2937',
+                }}
               />
-
-              {editingField?.field === 'items' && editingField?.index === i ? (
-                <input
-                  type="text"
-                  value={tempItems[i] || ''}
-                  onChange={(e) => {
-                    const next = [...tempItems];
-                    next[i] = e.target.value;
-                    setTempItems(next);
-                  }}
-                  onBlur={() => handleBlur('items', i)}
-                  onKeyDown={(e) => handleKeyDown(e, 'items', i)}
-                  className="flex-1 bg-transparent outline-none font-mono"
-                  style={{ fontSize: '14px', color: '#1f2937' }}
-                  autoFocus
-                />
-              ) : (
-                <span
-                  className={`flex-1 font-mono ${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
-                  style={{ fontSize: '14px', color: '#1f2937', lineHeight: 1.6, opacity: 0.85 }}
-                  onClick={() => { if (isEditable) { setEditingField({ field: 'items', index: i }); setTempItems(items.map((x) => x.text)); } }}
-                >
-                  {item.text}
-                </span>
-              )}
             </div>
-          ))}
-        </div>
+          </DraggableSurface>
+        ))}
       </div>
     </div>
   );
 }
 
-// ============================================================================
-// 6. NoisyThankYou
-// ============================================================================
-
 export function NoisyThankYou({
   title,
   subtitle,
+  formatting,
   styles,
   slideId,
   isEditable = false,
   onFieldUpdate,
+  onFormattingUpdate,
 }: LayoutProps) {
-  const [editingField, setEditingField] = useState<string | null>(null);
-  const [tempTitle, setTempTitle] = useState(title);
-  const [tempSubtitle, setTempSubtitle] = useState(subtitle || '');
-
-  const handleBlur = (field: string) => {
-    if (!slideId || !onFieldUpdate) return;
-    if (field === 'title' && tempTitle !== title) onFieldUpdate(slideId, 'title', tempTitle);
-    if (field === 'subtitle' && tempSubtitle !== subtitle) onFieldUpdate(slideId, 'subtitle', tempSubtitle);
-    setEditingField(null);
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, field: string) => {
-    if (e.key === 'Enter') { e.preventDefault(); handleBlur(field); }
-    if (e.key === 'Escape') {
-      setEditingField(null);
-      if (field === 'title') setTempTitle(title);
-      if (field === 'subtitle') setTempSubtitle(subtitle || '');
-    }
-  };
+  const slideRef = useRef<HTMLDivElement>(null);
 
   return (
     <div
-      className="w-full h-full flex flex-col items-center justify-center relative overflow-hidden p-10"
+      ref={slideRef}
+      className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden p-12 md:p-16"
       style={{ backgroundColor: '#547BEE' }}
     >
       <NoiseOverlay />
 
-      <div className="relative z-10 text-center">
-        {/* Title */}
-        {editingField === 'title' ? (
-          <input
-            type="text"
-            value={tempTitle}
-            onChange={(e) => setTempTitle(e.target.value)}
-            onBlur={() => handleBlur('title')}
-            onKeyDown={(e) => handleKeyDown(e, 'title')}
-            className="w-full text-center bg-transparent outline-none font-mono font-bold mb-4"
-            style={{ fontSize: '48px', color: '#ffffff' }}
-            autoFocus
+      <div className="relative z-10 flex flex-col items-center text-center">
+        <DraggableSurface
+          constraintsRef={slideRef}
+          isEditable={isEditable}
+          slideId={slideId}
+          formatKey="thank-you-title"
+          formatting={formatting}
+          onFormattingUpdate={onFormattingUpdate}
+          className="mb-6"
+        >
+          <EditableContent
+            as="h1"
+            value={title || 'Thank You!'}
+            isEditable={isEditable}
+            onCommit={(value) => {
+              if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'title', value);
+            }}
+            style={{
+              fontFamily: styles.fonts.heading,
+              fontSize: '88px',
+              fontWeight: 700,
+              color: '#ffffff',
+              lineHeight: 1,
+            }}
           />
-        ) : (
-          <h1
-            className={`font-mono font-bold mb-4 ${isEditable ? 'cursor-pointer hover:opacity-80' : ''}`}
-            style={{ fontSize: '48px', color: '#ffffff', lineHeight: 1.2 }}
-            onClick={() => { if (isEditable) { setEditingField('title'); setTempTitle(title); } }}
-          >
-            {title}
-          </h1>
-        )}
+        </DraggableSurface>
 
-        {/* Subtitle */}
         {(subtitle || isEditable) && (
-          editingField === 'subtitle' ? (
-            <input
-              type="text"
-              value={tempSubtitle}
-              onChange={(e) => setTempSubtitle(e.target.value)}
-              onBlur={() => handleBlur('subtitle')}
-              onKeyDown={(e) => handleKeyDown(e, 'subtitle')}
-              className="w-full text-center bg-transparent outline-none font-mono"
-              style={{ fontSize: '20px', color: '#ffffff', opacity: 0.85 }}
-              autoFocus
+          <DraggableSurface
+            constraintsRef={slideRef}
+            isEditable={isEditable}
+            slideId={slideId}
+            formatKey="thank-you-subtitle"
+            formatting={formatting}
+            onFormattingUpdate={onFormattingUpdate}
+            className="w-fit"
+          >
+            <EditableContent
+              as="p"
+              value={subtitle || ''}
+              isEditable={isEditable}
+              multiline
+              onCommit={(value) => {
+                if (slideId && onFieldUpdate) onFieldUpdate(slideId, 'subtitle', value);
+              }}
+              style={{
+                fontFamily: styles.fonts.body,
+                fontSize: '38px',
+                color: '#ffffff',
+                opacity: 0.9,
+              }}
             />
-          ) : (
-            <p
-              className={`font-mono ${isEditable ? 'cursor-pointer hover:opacity-70' : ''}`}
-              style={{ fontSize: '20px', color: '#ffffff', opacity: 0.85 }}
-              onClick={() => { if (isEditable) { setEditingField('subtitle'); setTempSubtitle(subtitle || ''); } }}
-            >
-              {subtitle || (isEditable ? 'Click to add subtitle' : '')}
-            </p>
-          )
+          </DraggableSurface>
         )}
       </div>
     </div>

components/slides/shared/PersistedDraggableSurface.tsx

@@ -0,0 +1,303 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { motion, useDragControls } from 'framer-motion';
+
+export type SlideFormattingMap = Record<string, Record<string, unknown>>;
+export type TemplateTextAlign = 'left' | 'center' | 'right';
+
+interface TemplateSurfaceSelectionContextValue {
+  selectedFormatKey: string | null;
+  onSelectFormatKey?: (formatKey: string | null) => void;
+}
+
+const TemplateSurfaceSelectionContext = createContext<TemplateSurfaceSelectionContextValue>({
+  selectedFormatKey: null,
+});
+
+export function TemplateSurfaceSelectionProvider({
+  children,
+  selectedFormatKey,
+  onSelectFormatKey,
+}: React.PropsWithChildren<TemplateSurfaceSelectionContextValue>) {
+  return (
+    <TemplateSurfaceSelectionContext.Provider value={{ selectedFormatKey, onSelectFormatKey }}>
+      {children}
+    </TemplateSurfaceSelectionContext.Provider>
+  );
+}
+
+function useTemplateSurfaceSelection() {
+  return useContext(TemplateSurfaceSelectionContext);
+}
+
+export function readFormattedTextAlign(
+  formatting: SlideFormattingMap | undefined,
+  formatKey: string,
+  fallback: TemplateTextAlign = 'left'
+): TemplateTextAlign {
+  const value = formatting?.[formatKey]?.textAlign;
+  return value === 'left' || value === 'center' || value === 'right' ? value : fallback;
+}
+
+interface PersistedDraggableSurfaceProps {
+  children: React.ReactNode;
+  constraintsRef: React.RefObject<HTMLDivElement | null>;
+  slideId?: string;
+  formatKey: string;
+  formatting?: SlideFormattingMap;
+  onFormattingUpdate?: (slideId: string, key: string, patch: Record<string, unknown>) => void;
+  isEditable?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  handleClassName?: string;
+  handle?: React.ReactNode;
+  groupClassName?: string;
+  whileDrag?: any;
+}
+
+function readAxis(value: unknown) {
+  return typeof value === 'number' && Number.isFinite(value) ? value : 0;
+}
+
+function readDimension(value: unknown) {
+  return typeof value === 'number' && Number.isFinite(value) && value > 0 ? value : undefined;
+}
+
+export function PersistedDraggableSurface({
+  children,
+  constraintsRef,
+  slideId,
+  formatKey,
+  formatting,
+  onFormattingUpdate,
+  isEditable = false,
+  className,
+  style,
+  handleClassName = '-top-6 left-1/2 -translate-x-1/2',
+  handle,
+  groupClassName,
+  whileDrag,
+}: PersistedDraggableSurfaceProps) {
+  const controls = useDragControls();
+  const elementRef = useRef<HTMLDivElement>(null);
+  const resizeState = useRef<{
+    handle: 'n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw';
+    pointerId: number;
+    startX: number;
+    startY: number;
+    startFrame: { x: number; y: number; width?: number; height?: number };
+    measuredWidth: number;
+    measuredHeight: number;
+  } | null>(null);
+  const { selectedFormatKey, onSelectFormatKey } = useTemplateSurfaceSelection();
+  const selected = selectedFormatKey === formatKey;
+  const storedFrame = useMemo(
+    () => ({
+      x: readAxis(formatting?.[formatKey]?.x),
+      y: readAxis(formatting?.[formatKey]?.y),
+      width: readDimension(formatting?.[formatKey]?.width),
+      height: readDimension(formatting?.[formatKey]?.height),
+    }),
+    [formatKey, formatting]
+  );
+  const [frame, setFrame] = useState(storedFrame);
+  const textAlign = readFormattedTextAlign(formatting, formatKey, 'left');
+
+  useEffect(() => {
+    setFrame(storedFrame);
+  }, [storedFrame]);
+
+  useEffect(() => {
+    if (!selected) {
+      resizeState.current = null;
+    }
+  }, [selected]);
+
+  useEffect(() => {
+    if (!isEditable) return;
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const state = resizeState.current;
+      if (!state) return;
+
+      const dx = event.clientX - state.startX;
+      const dy = event.clientY - state.startY;
+      const baseWidth = state.startFrame.width ?? state.measuredWidth;
+      const baseHeight = state.startFrame.height ?? state.measuredHeight;
+      const minWidth = Math.min(140, baseWidth);
+      const minHeight = Math.min(72, baseHeight);
+
+      let nextX = state.startFrame.x;
+      let nextY = state.startFrame.y;
+      let nextWidth = baseWidth;
+      let nextHeight = baseHeight;
+
+      if (state.handle.includes('e')) {
+        nextWidth = Math.max(minWidth, baseWidth + dx);
+      }
+
+      if (state.handle.includes('s')) {
+        nextHeight = Math.max(minHeight, baseHeight + dy);
+      }
+
+      if (state.handle.includes('w')) {
+        const width = Math.max(minWidth, baseWidth - dx);
+        nextX = state.startFrame.x + (baseWidth - width);
+        nextWidth = width;
+      }
+
+      if (state.handle.includes('n')) {
+        const height = Math.max(minHeight, baseHeight - dy);
+        nextY = state.startFrame.y + (baseHeight - height);
+        nextHeight = height;
+      }
+
+      setFrame({
+        x: nextX,
+        y: nextY,
+        width: nextWidth,
+        height: nextHeight,
+      });
+    };
+
+    const handlePointerUp = () => {
+      const state = resizeState.current;
+      if (!state) return;
+
+      resizeState.current = null;
+
+      if (slideId && onFormattingUpdate) {
+        setFrame((currentFrame) => {
+          onFormattingUpdate(slideId, formatKey, {
+            x: currentFrame.x,
+            y: currentFrame.y,
+            width: currentFrame.width,
+            height: currentFrame.height,
+          });
+          return currentFrame;
+        });
+      }
+    };
+
+    window.addEventListener('pointermove', handlePointerMove);
+    window.addEventListener('pointerup', handlePointerUp);
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [formatKey, isEditable, onFormattingUpdate, slideId]);
+
+  const startResize = (
+    handle: 'n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw',
+    event: React.PointerEvent<HTMLButtonElement>
+  ) => {
+    if (!isEditable || !elementRef.current) return;
+
+    const measuredWidth = elementRef.current.offsetWidth;
+    const measuredHeight = elementRef.current.offsetHeight;
+
+    resizeState.current = {
+      handle,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      startFrame: frame,
+      measuredWidth,
+      measuredHeight,
+    };
+
+    onSelectFormatKey?.(formatKey);
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleDragEnd = (_: unknown, info: { offset: { x: number; y: number } }) => {
+    if (!isEditable) return;
+
+    const nextFrame = {
+      ...frame,
+      x: frame.x + info.offset.x,
+      y: frame.y + info.offset.y,
+    };
+
+    setFrame(nextFrame);
+
+    if (slideId && onFormattingUpdate) {
+      onFormattingUpdate(slideId, formatKey, nextFrame);
+    }
+  };
+
+  const showResizeHandles = isEditable && selected;
+  const surfaceStyle: React.CSSProperties = {
+    ...(style || {}),
+    textAlign,
+  };
+
+  if (typeof frame.width === 'number') {
+    surfaceStyle.width = frame.width;
+  }
+
+  if (typeof frame.height === 'number') {
+    surfaceStyle.height = frame.height;
+  }
+
+  return (
+    <motion.div
+      ref={elementRef}
+      drag={isEditable}
+      dragControls={controls}
+      dragListener={isEditable && !handle}
+      dragMomentum={false}
+      dragElastic={0.04}
+      dragConstraints={constraintsRef}
+      whileDrag={isEditable ? (whileDrag || { scale: 1.01, zIndex: 40 }) : undefined}
+      onPointerDown={() => {
+        if (!isEditable) return;
+        onSelectFormatKey?.(formatKey);
+      }}
+      onDragEnd={handleDragEnd}
+      data-template-surface="true"
+      data-template-align={textAlign}
+      className={`${isEditable ? `relative ${groupClassName || 'group'} cursor-grab active:cursor-grabbing` : 'relative'} ${selected ? 'z-30' : ''} ${className || ''}`}
+      style={{ ...surfaceStyle, x: frame.x, y: frame.y }}
+    >
+      {isEditable && handle ? (
+        <div
+          onPointerDown={(e) => controls.start(e)}
+          style={{ touchAction: 'none' }}
+          className={`absolute z-30 ${handleClassName}`}
+        >
+          {handle}
+        </div>
+      ) : null}
+      {showResizeHandles ? (
+        <>
+          <div className="pointer-events-none absolute inset-0 rounded border border-blue-500 shadow-[0_0_0_1px_rgba(59,130,246,0.18)]" />
+          {[
+            { handle: 'nw', className: '-left-1.5 -top-1.5 cursor-nwse-resize' },
+            { handle: 'n', className: 'left-1/2 -top-1.5 -translate-x-1/2 cursor-ns-resize' },
+            { handle: 'ne', className: '-right-1.5 -top-1.5 cursor-nesw-resize' },
+            { handle: 'e', className: '-right-1.5 top-1/2 -translate-y-1/2 cursor-ew-resize' },
+            { handle: 'se', className: '-right-1.5 -bottom-1.5 cursor-nwse-resize' },
+            { handle: 's', className: 'left-1/2 -bottom-1.5 -translate-x-1/2 cursor-ns-resize' },
+            { handle: 'sw', className: '-left-1.5 -bottom-1.5 cursor-nesw-resize' },
+            { handle: 'w', className: '-left-1.5 top-1/2 -translate-y-1/2 cursor-ew-resize' },
+          ].map((entry) => (
+            <button
+              key={entry.handle}
+              type="button"
+              aria-label={`Resize ${entry.handle}`}
+              onPointerDown={(event) =>
+                startResize(entry.handle as 'n' | 'e' | 's' | 'w' | 'ne' | 'nw' | 'se' | 'sw', event)
+              }
+              className={`absolute z-40 h-3 w-3 rounded-sm border border-blue-600 bg-white shadow ${entry.className}`}
+            />
+          ))}
+        </>
+      ) : null}
+      {children}
+    </motion.div>
+  );
+}

data/templates/galeryn.ts

@@ -30,7 +30,13 @@ export const galerynTemplate: Template = {
       name: 'Title & Subtitle',
       fields: [
         { key: 'title', label: 'Title', type: 'text', defaultValue: 'GALERYN' },
-        { key: 'subtitle', label: 'Subtitle', type: 'text', defaultValue: 'Visual storytelling and unique moments captured elegantly with refined minimalism.' },
+        {
+          key: 'subtitle',
+          label: 'Subtitle',
+          type: 'text',
+          defaultValue:
+            'Sit amet consectetur adipiscing elit duis. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Lorem donec massa sapien faucibus et. Vel orci porta non pulvinar neque laoreet suspendisse interdum.',
+        },
       ],
     },
     {
@@ -43,11 +49,11 @@ export const galerynTemplate: Template = {
           label: 'Agenda Items',
           type: 'list',
           defaultValue: [
-            { text: 'Tell About Us' },
-            { text: 'Stories' },
-            { text: 'Our Concept' },
-            { text: 'Design Style' },
-            { text: 'Contact Info' },
+            { text: 'Tell About Us || Lone lowe effr at set, costomed poloring elt.' },
+            { text: 'Stories || Lone lowe effr at set, costomed poinring elt.' },
+            { text: 'Our Concept || Lone lowe effr at set, customed poinring etc.' },
+            { text: 'Design Style || Lone lowe effr at aat, customer poinring etc.' },
+            { text: 'Contact Info || Lone lowe effr at aas, customer poinring ett.' },
           ],
         },
       ],
@@ -67,13 +73,42 @@ export const galerynTemplate: Template = {
         },
       ],
     },
+    {
+      id: 'three_columns',
+      name: 'Three Columns',
+      fields: [
+        { key: 'title', label: 'Title', type: 'text', defaultValue: 'Core Principles' },
+        {
+          key: 'columns',
+          label: 'Columns',
+          type: 'list',
+          defaultValue: [
+            { heading: 'Asymmetry', text: 'Rejecting center-aligned boredom in favor of weighted layouts that guide the eye.' },
+            { heading: 'White Space', text: 'Using negative space as a functional element to create breathing room for ideas.' },
+            { heading: 'Tension', text: 'The juxtaposition of heritage serifs against precise modern sans-serif typography.' },
+          ],
+        },
+      ],
+    },
     {
       id: 'image_and_text',
       name: 'Image & Text',
       fields: [
         { key: 'title', label: 'Title', type: 'text', defaultValue: 'Curated Experiences' },
-        { key: 'body', label: 'Description', type: 'text', defaultValue: 'We are creating engaging content using design philosophies that improve brand awareness and customer engagement.' },
-        { key: 'imageUrl', label: 'Image URL', type: 'image', defaultValue: '' },
+        {
+          key: 'body',
+          label: 'Description',
+          type: 'text',
+          defaultValue:
+            'We are creating engaging content using artificial intelligence technologies and data analysis for social media platforms. Our goal is to improve brand awareness, customer retention, and loyalty for our clients.',
+        },
+        {
+          key: 'imageUrl',
+          label: 'Image URL',
+          type: 'image',
+          defaultValue:
+            'https://images.unsplash.com/photo-1494438639946-1ebd1d20bf85?auto=format&fit=crop&q=80&w=1000',
+        },
       ],
     },
     {

data/templates/index.ts

@@ -11,6 +11,7 @@ export type LayoutType =
   | 'title_subtitle'
   | 'agenda'
   | 'title_and_text'
+  | 'three_columns'
   | 'image_and_text'
   | 'references'
   | 'thank_you';
@@ -107,6 +108,7 @@ export interface SlideSpec {
   title?: string;
   subtitle?: string;
   body?: Array<{ heading?: string; text: string }>;
+  columns?: Array<{ heading: string; text: string }>;
   items?: Array<{ text: string }>;
   imageUrl?: string;
   /** Per-field formatting overrides captured by the editor */
@@ -130,6 +132,7 @@ export function createDefaultSlides(templateId: string): SlideSpec[] {
       if (field.key === 'title') spec.title = field.defaultValue;
       else if (field.key === 'subtitle') spec.subtitle = field.defaultValue;
       else if (field.key === 'body') spec.body = field.defaultValue;
+      else if (field.key === 'columns') spec.columns = field.defaultValue;
       else if (field.key === 'items') spec.items = field.defaultValue;
       else if (field.key === 'imageUrl') spec.imageUrl = field.defaultValue;
     }

data/templates/neo-brutalism.ts

@@ -2,7 +2,7 @@ import { Template } from './index';
 
 export const neoBrutalismTemplate: Template = {
   id: 'neobrutalism',
-  name: 'Neo Brutalism',
+  name: 'Neo-Brutal',
   description: 'Bold, raw aesthetic with thick borders, vivid colors, and strong shadows',
   thumbnail: '🟡',
   styles: {
@@ -68,11 +68,28 @@ export const neoBrutalismTemplate: Template = {
         },
       ],
     },
+    {
+      id: 'three_columns',
+      name: 'Three Columns',
+      fields: [
+        { key: 'title', label: 'Title', type: 'text', defaultValue: 'THE 3 PILLARS' },
+        {
+          key: 'columns',
+          label: 'Columns',
+          type: 'list',
+          defaultValue: [
+            { heading: 'FOUNDATIONAL STRUCTURE', text: 'The core architectural framework that supports high-velocity iteration and strong creative direction.' },
+            { heading: 'RADICAL TRANSPARENCY', text: 'A clear, visible system for decisions, tradeoffs, and communication across the entire presentation.' },
+            { heading: 'DYNAMIC SCALABILITY', text: 'A modular setup that can grow without losing its structure, clarity, or visual impact.' },
+          ],
+        },
+      ],
+    },
     {
       id: 'image_and_text',
       name: 'Image & Text',
       fields: [
-        { key: 'title', label: 'Title', type: 'text', defaultValue: 'VISUAL INSIGHT' },
+        { key: 'title', label: 'Title', type: 'text', defaultValue: 'VISUAL IMPACT' },
         { key: 'body', label: 'Description', type: 'text', defaultValue: 'Add a description of your image or visual content here.' },
         { key: 'imageUrl', label: 'Image URL', type: 'image', defaultValue: '' },
       ],
@@ -81,7 +98,7 @@ export const neoBrutalismTemplate: Template = {
       id: 'references',
       name: 'References',
       fields: [
-        { key: 'title', label: 'Title', type: 'text', defaultValue: 'REFERENCES & SOURCES' },
+        { key: 'title', label: 'Title', type: 'text', defaultValue: 'REFERENCES_&_SOURCES' },
         {
           key: 'items',
           label: 'References',

data/templates/noisy.ts

@@ -2,8 +2,8 @@ import { Template } from './index';
 
 export const noisyTemplate: Template = {
   id: 'noisy',
-  name: 'Noisy',
-  description: 'Bold monospace aesthetic with noise texture overlay and vibrant colors',
+  name: 'Distortion',
+  description: 'Bold distorted monospace aesthetic with noise texture overlay and high-contrast color blocking',
   thumbnail: '📡',
   styles: {
     colors: {
@@ -15,8 +15,8 @@ export const noisyTemplate: Template = {
       cardBg: '#ffffff',
     },
     fonts: {
-      heading: "'Roboto Mono', monospace",
-      body: "'Roboto Mono', monospace",
+      heading: 'var(--font-roboto-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      body: 'var(--font-roboto-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
     },
     border: {
       width: '0px',
@@ -66,6 +66,23 @@ export const noisyTemplate: Template = {
         },
       ],
     },
+    {
+      id: 'three_columns',
+      name: 'Three Columns',
+      fields: [
+        { key: 'title', label: 'Title', type: 'text', defaultValue: 'THREE SIGNALS' },
+        {
+          key: 'columns',
+          label: 'Columns',
+          type: 'list',
+          defaultValue: [
+            { heading: 'INPUT', text: 'The first column introduces the initial signal, source, or condition.' },
+            { heading: 'SYSTEM', text: 'The second column explains the mechanism, workflow, or decision layer.' },
+            { heading: 'OUTPUT', text: 'The final column summarizes the outcome, result, or audience-facing impact.' },
+          ],
+        },
+      ],
+    },
     {
       id: 'image_and_text',
       name: 'Image & Text',

hooks/useExport.ts

@@ -1,11 +1,14 @@
-import html2canvas from 'html2canvas';
 import jsPDF from 'jspdf';
 import type { SlideModel } from '@/lib/editor-types';
-import { themes, TEMPLATE_THEMES } from '@/lib/editor-themes';
+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;
@@ -18,37 +21,50 @@ interface UseExportParams {
   setIsEditingTextId: (id: string | null) => void;
 }
 
-function sanitizeColorsForExport(clonedDoc: Document) {
-  const style = clonedDoc.createElement('style');
-  style.textContent = `
-    * { transition: none !important; animation: none !important; }
-    .dark * { background-color: #242424 !important; color: #fafafa !important; }
-    body, html { background: #ffffff !important; }
-  `;
-  clonedDoc.head.appendChild(style);
-
-  const allElements = clonedDoc.querySelectorAll('*');
-  allElements.forEach((el: Element) => {
-    const style = el.getAttribute('style');
-    if (style) {
-      const sanitized = style
-        .replace(/lab\([^)]+\)/g, '#000000')
-        .replace(/lch\([^)]+\)/g, '#000000')
-        .replace(/oklch\([^)]+\)/g, '#000000')
-        .replace(/oklab\([^)]+\)/g, '#000000')
-        .replace(/color\([^)]+\)/g, '#000000');
-      if (sanitized !== style) el.setAttribute('style', sanitized);
-    }
+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, currentTheme, currentSlideIndex, zoom,
-  selectedId, isEditingTextId, presentationTitle,
-  setCurrentSlideIndex, setZoom, setSelectedId, setIsEditingTextId,
+  slideRef, slides, slideSpecs, currentTheme,
+  currentSlideIndex, zoom, selectedId, isEditingTextId,
+  presentationTitle, setCurrentSlideIndex, setZoom,
+  setSelectedId, setIsEditingTextId,
 }: UseExportParams) {
+  const captureNode = async (node: HTMLElement) => captureElementAsPng(node, { scale: 2 });
+
+  const captureEditorSlides = async (): Promise<string[]> => {
+    if (!slideRef.current || slides.length === 0) return [];
 
-  const captureAllSlides = async (): Promise<string[]> => {
     const originalSlideIndex = currentSlideIndex;
     const originalZoom = zoom;
     const originalSelectedId = selectedId;
@@ -57,57 +73,43 @@ export function useExport({
     setSelectedId(null);
     setIsEditingTextId(null);
     setZoom(1);
-    await new Promise(resolve => setTimeout(resolve, 300));
+    await waitForFonts();
+    await new Promise((resolve) => setTimeout(resolve, 250));
 
     const images: string[] = [];
-    for (let i = 0; i < slides.length; i++) {
-      setCurrentSlideIndex(i);
-      await new Promise(resolve => setTimeout(resolve, 400));
+
+    for (let index = 0; index < slides.length; index++) {
+      setCurrentSlideIndex(index);
+      await new Promise((resolve) => setTimeout(resolve, 450));
+
       if (!slideRef.current) continue;
 
-      const canvas = await html2canvas(slideRef.current, {
-        backgroundColor: null,
-        scale: 2,
-        logging: false,
-        useCORS: true,
-        allowTaint: true,
-        onclone: (clonedDoc) => {
-          const el = clonedDoc.querySelector('[style*="width: 800px"]') as HTMLElement | null;
-          if (el && !TEMPLATE_THEMES.has(currentTheme)) {
-            const theme = themes[currentTheme] as any;
-            if (theme.backgroundImage) {
-              el.style.backgroundImage = theme.backgroundImage;
-              el.style.backgroundSize = theme.backgroundSize || 'cover';
-              el.style.backgroundPosition = theme.backgroundPosition || 'center';
-              if (theme.backgroundColor) el.style.backgroundColor = theme.backgroundColor;
-            } else if (theme.background) {
-              el.style.backgroundColor = theme.background;
-            } else if (theme.solidBackground) {
-              el.style.backgroundColor = theme.solidBackground;
-            }
-          }
-          sanitizeColorsForExport(clonedDoc);
-        },
-      });
-      images.push(canvas.toDataURL('image/png'));
+      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 captureAllSlides();
+      const images = await captureEditorSlides();
       const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [800, 450] });
-      images.forEach((imgData, i) => {
-        if (i > 0) pdf.addPage();
-        pdf.addImage(imgData, 'PNG', 0, 0, 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) {
@@ -118,18 +120,14 @@ export function useExport({
 
   const exportToPPTX = async () => {
     if (!slideRef.current || slides.length === 0) return;
+
     try {
-      const images = await captureAllSlides();
-      const pptxgen = (await import('pptxgenjs')).default;
-      const pres = new pptxgen();
-      pres.defineLayout({ name: 'LAYOUT_16x9', width: 10, height: 5.625 });
-      pres.layout = 'LAYOUT_16x9';
-      for (const imgData of images) {
-        const slide = pres.addSlide();
-        slide.addImage({ data: imgData, x: 0, y: 0, w: 10, h: 5.625 });
-      }
-      const sanitizedTitle = presentationTitle.replace(/[^a-zA-Z0-9 -]/g, '').trim() || 'presentation';
-      await pres.writeFile({ fileName: `${sanitizedTitle}.pptx` });
+      await exportEditablePptx({
+        slides,
+        slideSpecs,
+        currentTheme,
+        presentationTitle,
+      });
     } catch (error) {
       console.error('Error exporting to PPTX:', error);
       alert('Failed to export to PPTX. Please try again.');

lib/capture-element.ts

@@ -0,0 +1,200 @@
+interface CaptureOptions {
+  scale?: number;
+}
+
+function blobToDataUrl(blob: Blob) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(typeof reader.result === 'string' ? reader.result : '');
+    reader.onerror = () => reject(reader.error || new Error('Failed to read blob as data URL'));
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function urlToDataUrl(url: string) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch asset: ${response.status}`);
+  }
+
+  return blobToDataUrl(await response.blob());
+}
+
+async function inlineCssUrls(value: string) {
+  const matches = Array.from(value.matchAll(/url\((['"]?)(.*?)\1\)/gi));
+  if (matches.length === 0) return value;
+
+  let nextValue = value;
+  for (const match of matches) {
+    const rawUrl = match[2]?.trim();
+    if (!rawUrl || rawUrl.startsWith('data:') || rawUrl.startsWith('blob:')) continue;
+
+    try {
+      const dataUrl = await urlToDataUrl(rawUrl);
+      nextValue = nextValue.replace(match[0], `url("${dataUrl}")`);
+    } catch {
+      // Leave the original URL in place when it can't be inlined.
+    }
+  }
+
+  return nextValue;
+}
+
+async function copyComputedStyles(source: Element, clone: HTMLElement | SVGElement) {
+  const computed = window.getComputedStyle(source);
+
+  for (let index = 0; index < computed.length; index++) {
+    const property = computed[index];
+    if (!property) continue;
+
+    let value = computed.getPropertyValue(property);
+    if (!value) continue;
+
+    if (property === 'background-image' || property === 'mask-image' || property === '-webkit-mask-image') {
+      value = await inlineCssUrls(value);
+    }
+
+    clone.style.setProperty(property, value, computed.getPropertyPriority(property));
+  }
+
+  clone.style.setProperty('animation', 'none');
+  clone.style.setProperty('transition', 'none');
+  clone.style.setProperty('caret-color', 'transparent');
+}
+
+async function cloneNodeForCapture(node: Node): Promise<Node> {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.cloneNode(false);
+  }
+
+  if (!(node instanceof Element)) {
+    return node.cloneNode(false);
+  }
+
+  if (node instanceof HTMLCanvasElement) {
+    const image = document.createElement('img');
+    image.src = node.toDataURL('image/png');
+    image.width = node.width;
+    image.height = node.height;
+    await copyComputedStyles(node, image);
+    return image;
+  }
+
+  const clone = node.cloneNode(false) as HTMLElement | SVGElement;
+  await copyComputedStyles(node, clone);
+
+  if (node instanceof HTMLImageElement && clone instanceof HTMLImageElement) {
+    const source = node.currentSrc || node.src;
+    clone.loading = 'eager';
+    clone.decoding = 'sync';
+    clone.removeAttribute('srcset');
+
+    if (source) {
+      if (source.startsWith('data:') || source.startsWith('blob:')) {
+        clone.src = source;
+      } else {
+        try {
+          clone.src = await urlToDataUrl(source);
+        } catch {
+          clone.src = source;
+        }
+      }
+    }
+  }
+
+  if (node instanceof HTMLInputElement && clone instanceof HTMLInputElement) {
+    clone.value = node.value;
+    if (node.checked) clone.setAttribute('checked', 'checked');
+  }
+
+  if (node instanceof HTMLTextAreaElement && clone instanceof HTMLTextAreaElement) {
+    clone.value = node.value;
+    clone.textContent = node.value;
+  }
+
+  if (node instanceof HTMLSelectElement && clone instanceof HTMLSelectElement) {
+    clone.value = node.value;
+  }
+
+  for (const child of Array.from(node.childNodes)) {
+    clone.appendChild(await cloneNodeForCapture(child));
+  }
+
+  return clone;
+}
+
+async function waitForClonedImages(root: HTMLElement) {
+  const images = Array.from(root.querySelectorAll('img'));
+
+  await Promise.all(
+    images.map(
+      (image) =>
+        new Promise<void>((resolve) => {
+          if (image.complete) {
+            resolve();
+            return;
+          }
+
+          image.onload = () => resolve();
+          image.onerror = () => resolve();
+        })
+    )
+  );
+}
+
+function loadImage(url: string) {
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.decoding = 'async';
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error('Failed to load rendered SVG image'));
+    image.src = url;
+  });
+}
+
+export async function captureElementAsPng(node: HTMLElement, options: CaptureOptions = {}) {
+  const scale = options.scale ?? 2;
+  const width = Math.round(node.offsetWidth);
+  const height = Math.round(node.offsetHeight);
+
+  const wrapper = document.createElement('div');
+  wrapper.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+  wrapper.style.width = `${width}px`;
+  wrapper.style.height = `${height}px`;
+  wrapper.style.overflow = 'hidden';
+  wrapper.style.margin = '0';
+  wrapper.style.padding = '0';
+  wrapper.style.boxSizing = 'border-box';
+
+  const clonedNode = await cloneNodeForCapture(node);
+  wrapper.appendChild(clonedNode);
+  await waitForClonedImages(wrapper);
+
+  const serialized = new XMLSerializer().serializeToString(wrapper);
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
+      <foreignObject x="0" y="0" width="100%" height="100%">${serialized}</foreignObject>
+    </svg>
+  `;
+
+  const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' });
+  const url = URL.createObjectURL(blob);
+
+  try {
+    const image = await loadImage(url);
+    const canvas = document.createElement('canvas');
+    canvas.width = width * scale;
+    canvas.height = height * scale;
+
+    const context = canvas.getContext('2d');
+    if (!context) {
+      throw new Error('Failed to create canvas context');
+    }
+
+    context.scale(scale, scale);
+    context.drawImage(image, 0, 0, width, height);
+    return canvas.toDataURL('image/png');
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}

lib/editable-pptx-export.ts

@@ -0,0 +1,1542 @@
+import PptxGenJS from 'pptxgenjs';
+import { getTemplateById, type SlideSpec } from '@/data/templates';
+import type { SlideModel, TextElement, ImageElement, ShapeElement } from '@/lib/editor-types';
+import { themes as editorThemes, TEMPLATE_THEMES } from '@/lib/editor-themes';
+
+const PPT_WIDTH = 10;
+const PPT_HEIGHT = 5.625;
+const CANVAS_WIDTH = 800;
+const PX_TO_IN = PPT_WIDTH / CANVAS_WIDTH;
+
+type Rect = { x: number; y: number; w: number; h: number };
+type PptxSlide = PptxGenJS.Slide;
+type ImageProps = PptxGenJS.ImageProps;
+
+interface EditablePptxExportParams {
+  slides: SlideModel[];
+  slideSpecs: SlideSpec[];
+  currentTheme: keyof typeof editorThemes;
+  presentationTitle: string;
+}
+
+function pxToIn(value: number) {
+  return value * PX_TO_IN;
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.max(min, Math.min(value, max));
+}
+
+function cleanText(value: string | undefined | null) {
+  return (value || '').replace(/\r\n/g, '\n').trim();
+}
+
+function upperText(value: string | undefined | null) {
+  return cleanText(value).toUpperCase();
+}
+
+function normalizeColor(color: string | undefined, fallback = '000000') {
+  if (!color) return fallback;
+  const hex = color.trim().replace(/^#/, '');
+  if (/^[0-9a-fA-F]{3}$/.test(hex)) {
+    return hex
+      .split('')
+      .map((char) => `${char}${char}`)
+      .join('')
+      .toUpperCase();
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(hex)) return hex.toUpperCase();
+  return fallback;
+}
+
+function normalizeOpacity(opacity: number | undefined) {
+  if (typeof opacity !== 'number' || Number.isNaN(opacity)) return 0;
+  return clamp(Math.round((1 - opacity) * 100), 0, 100);
+}
+
+function sanitizeFileName(title: string) {
+  return title.replace(/[^a-zA-Z0-9 -]/g, '').trim() || 'presentation';
+}
+
+function normalizeFontFace(font: string | undefined, fallback = 'Arial') {
+  if (!font) return fallback;
+  const raw = font
+    .split(',')
+    .map((item) => item.trim().replace(/^['"]|['"]$/g, ''))
+    .find(Boolean);
+
+  if (!raw) return fallback;
+
+  const lower = raw.toLowerCase();
+  if (lower.includes('newsreader')) return 'Georgia';
+  if (lower.includes('inter')) return 'Arial';
+  if (lower.includes('manrope')) return 'Arial';
+  if (lower.includes('anton')) return 'Arial Black';
+  if (lower.includes('oswald')) return 'Arial Narrow';
+  if (lower.includes('roboto mono') || lower.includes('courier') || lower.includes('mono')) return 'Courier New';
+  if (lower.includes('serif')) return 'Georgia';
+  if (lower.includes('sans')) return 'Arial';
+  return raw;
+}
+
+function bodyToParagraph(body: SlideSpec['body']) {
+  return (body || [])
+    .map((item) => {
+      const heading = cleanText(item.heading);
+      const text = cleanText(item.text);
+      if (heading && text) return `${heading}\n${text}`;
+      return heading || text;
+    })
+    .filter(Boolean)
+    .join('\n\n');
+}
+
+function splitAgendaItem(text: string) {
+  const [heading, description] = text.split('||').map((part) => cleanText(part));
+  return { heading: heading || cleanText(text), description };
+}
+
+function formattingOffset(spec: SlideSpec, key: string) {
+  const source = spec.formatting?.[key];
+  const x = typeof source?.x === 'number' && Number.isFinite(source.x) ? source.x : 0;
+  const y = typeof source?.y === 'number' && Number.isFinite(source.y) ? source.y : 0;
+  return { x: pxToIn(x), y: pxToIn(y) };
+}
+
+function withOffset(spec: SlideSpec, key: string, rect: Rect): Rect {
+  const offset = formattingOffset(spec, key);
+  return { x: rect.x + offset.x, y: rect.y + offset.y, w: rect.w, h: rect.h };
+}
+
+function addTextBox(slide: PptxSlide, text: string, rect: Rect, options: Record<string, unknown> = {}) {
+  slide.addText(text || ' ', {
+    x: rect.x,
+    y: rect.y,
+    w: rect.w,
+    h: rect.h,
+    margin: 0,
+    fit: 'shrink',
+    valign: 'middle',
+    ...options,
+  });
+}
+
+function addRect(
+  slide: PptxSlide,
+  rect: Rect,
+  fillColor: string,
+  lineColor = fillColor,
+  extra: Record<string, unknown> = {}
+) {
+  slide.addShape('rect', {
+    x: rect.x,
+    y: rect.y,
+    w: rect.w,
+    h: rect.h,
+    fill: { color: normalizeColor(fillColor) },
+    line: { color: normalizeColor(lineColor), width: 1 },
+    ...extra,
+  });
+}
+
+function getImageSizing(rect: Rect): Pick<ImageProps, 'x' | 'y' | 'w' | 'h' | 'sizing'> {
+  return {
+    x: rect.x,
+    y: rect.y,
+    w: rect.w,
+    h: rect.h,
+    sizing: { type: 'cover', w: rect.w, h: rect.h },
+  };
+}
+
+async function sourceToImageProps(src: string | undefined, rect: Rect): Promise<ImageProps | null> {
+  const cleanSrc = cleanText(src);
+  if (!cleanSrc) return null;
+
+  if (cleanSrc.startsWith('data:')) {
+    return { data: cleanSrc, ...getImageSizing(rect) };
+  }
+
+  try {
+    const response = await fetch(cleanSrc);
+    if (!response.ok) throw new Error(`Image fetch failed: ${response.status}`);
+    const blob = await response.blob();
+    const dataUrl = await new Promise<string>((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(typeof reader.result === 'string' ? reader.result : '');
+      reader.onerror = () => reject(reader.error || new Error('Failed to read image'));
+      reader.readAsDataURL(blob);
+    });
+    if (dataUrl) return { data: dataUrl, ...getImageSizing(rect) };
+  } catch {
+    if (/^https?:\/\//i.test(cleanSrc)) {
+      return { path: cleanSrc, ...getImageSizing(rect) };
+    }
+  }
+
+  return null;
+}
+
+async function addImage(slide: PptxSlide, src: string | undefined, rect: Rect) {
+  const imageProps = await sourceToImageProps(src, rect);
+  if (imageProps) {
+    slide.addImage(imageProps);
+    return;
+  }
+
+  addRect(slide, rect, 'E5E7EB', 'CBD5E1');
+  addTextBox(slide, 'Image unavailable', rect, {
+    fontSize: 16,
+    color: '475569',
+    fontFace: 'Arial',
+    align: 'center',
+    valign: 'middle',
+  });
+}
+
+function addEditorText(slide: PptxSlide, element: TextElement) {
+  addTextBox(
+    slide,
+    cleanText(element.text),
+    {
+      x: pxToIn(element.x),
+      y: pxToIn(element.y),
+      w: pxToIn(element.width),
+      h: pxToIn(element.height),
+    },
+    {
+      fontFace: normalizeFontFace(element.fontFamily),
+      fontSize: Math.max(8, Math.round(element.fontSize * 0.72)),
+      color: normalizeColor(element.color),
+      bold: element.fontWeight === 'bold',
+      italic: element.fontStyle === 'italic',
+      underline: element.textDecoration === 'underline',
+      align: element.align,
+      rotate: element.rotation || 0,
+      valign: 'top',
+      margin: 0,
+    }
+  );
+}
+
+async function addEditorImage(slide: PptxSlide, element: ImageElement) {
+  await addImage(slide, element.src, {
+    x: pxToIn(element.x),
+    y: pxToIn(element.y),
+    w: pxToIn(element.width),
+    h: pxToIn(element.height),
+  });
+}
+
+function addEditorShape(slide: PptxSlide, element: ShapeElement) {
+  const rect = {
+    x: pxToIn(element.x),
+    y: pxToIn(element.y),
+    w: pxToIn(element.width),
+    h: pxToIn(element.height),
+  };
+  const line = {
+    color: normalizeColor(element.borderColor),
+    width: Math.max(0.75, element.borderWidth),
+    transparency: normalizeOpacity(element.opacity),
+  };
+  const fill = {
+    color: normalizeColor(element.backgroundColor, 'FFFFFF'),
+    transparency: normalizeOpacity(element.opacity),
+  };
+  const common = { ...rect, rotate: element.rotation || 0, line, fill };
+
+  switch (element.shapeType) {
+    case 'rectangle':
+      slide.addShape('rect', common);
+      return;
+    case 'circle':
+      slide.addShape('ellipse', common);
+      return;
+    case 'triangle':
+      slide.addShape('triangle', common);
+      return;
+    case 'arrow':
+      slide.addShape('chevron', common);
+      return;
+    case 'star':
+      slide.addShape('star5', common);
+      return;
+    case 'diamond':
+      slide.addShape('diamond', common);
+      return;
+    case 'hexagon':
+      slide.addShape('hexagon', common);
+      return;
+    case 'line':
+      slide.addShape('line', {
+        ...rect,
+        rotate: element.rotation || 0,
+        line: {
+          color: normalizeColor(element.borderColor),
+          width: Math.max(1, element.borderWidth),
+          transparency: normalizeOpacity(element.opacity),
+        },
+      });
+      return;
+  }
+}
+
+async function addLegacySlide(
+  slide: PptxSlide,
+  slideModel: SlideModel,
+  currentTheme: keyof typeof editorThemes
+) {
+  const theme = editorThemes[currentTheme] as {
+    solidBackground?: string;
+    background?: string;
+    backgroundImage?: string;
+  };
+  slide.background = { color: normalizeColor(theme.solidBackground || theme.background, 'FFFFFF') };
+
+  const backgroundImage = theme.backgroundImage?.match(/url\((['"]?)(.*?)\1\)/)?.[2];
+  if (backgroundImage) {
+    await addImage(slide, backgroundImage, { x: 0, y: 0, w: PPT_WIDTH, h: PPT_HEIGHT });
+    slide.addShape('rect', {
+      x: 0,
+      y: 0,
+      w: PPT_WIDTH,
+      h: PPT_HEIGHT,
+      fill: { color: normalizeColor(theme.solidBackground || '000000'), transparency: 30 },
+      line: { color: normalizeColor(theme.solidBackground || '000000'), transparency: 100 },
+    });
+  }
+
+  for (const element of slideModel.elements) {
+    if (element.type === 'text') {
+      addEditorText(slide, element);
+      continue;
+    }
+    if (element.type === 'image') {
+      await addEditorImage(slide, element);
+      continue;
+    }
+    addEditorShape(slide, element);
+  }
+}
+
+function addNeoBackground(slide: PptxSlide) {
+  slide.background = { color: 'F5F5F0' };
+}
+
+function addGalerynBackground(slide: PptxSlide) {
+  slide.background = { color: 'FBF9F4' };
+}
+
+function addNoisyBackground(slide: PptxSlide, color = '547BEE') {
+  slide.background = { color };
+}
+
+function addNeoDotPattern(slide: PptxSlide) {
+  const spacing = 0.42;
+  const dotSize = 0.022;
+  for (let y = 0.18; y < PPT_HEIGHT - 0.08; y += spacing) {
+    for (let x = 0.18; x < PPT_WIDTH - 0.08; x += spacing) {
+      slide.addShape('ellipse', {
+        x,
+        y,
+        w: dotSize,
+        h: dotSize,
+        fill: { color: '000000', transparency: 55 },
+        line: { color: '000000', transparency: 100 },
+      });
+    }
+  }
+}
+
+function addNeoShadowCard(
+  slide: PptxSlide,
+  rect: Rect,
+  fillColor: string,
+  options: { rotate?: number; shadowX?: number; shadowY?: number; lineWidth?: number } = {}
+) {
+  const {
+    rotate = 0,
+    shadowX = 0.12,
+    shadowY = 0.12,
+    lineWidth = 2.25,
+  } = options;
+
+  slide.addShape('rect', {
+    x: rect.x + shadowX,
+    y: rect.y + shadowY,
+    w: rect.w,
+    h: rect.h,
+    rotate,
+    fill: { color: '000000' },
+    line: { color: '000000', transparency: 100 },
+  });
+
+  slide.addShape('rect', {
+    x: rect.x,
+    y: rect.y,
+    w: rect.w,
+    h: rect.h,
+    rotate,
+    fill: { color: normalizeColor(fillColor) },
+    line: { color: '000000', width: lineWidth },
+  });
+}
+
+function addNeoTitleSubtitle(slide: PptxSlide, spec: SlideSpec) {
+  addNeoBackground(slide);
+  addNeoDotPattern(slide);
+
+  const titleCard = withOffset(spec, 'title', { x: 0.72, y: 0.78, w: 8.15, h: 2.02 });
+  addNeoShadowCard(slide, titleCard, 'D9FF00', { rotate: -1.2, shadowX: 0.12, shadowY: 0.12 });
+  addTextBox(slide, upperText(spec.title), { x: titleCard.x + 0.36, y: titleCard.y + 0.3, w: titleCard.w - 0.72, h: titleCard.h - 0.6 }, {
+    fontFace: 'Arial Black',
+    fontSize: 31,
+    bold: true,
+    color: '000000',
+    align: 'center',
+    valign: 'middle',
+    rotate: -1.2,
+  });
+
+  const badgeRect = { x: titleCard.x + titleCard.w - 0.48, y: titleCard.y - 0.16, w: 0.48, h: 0.48 };
+  addNeoShadowCard(slide, badgeRect, 'D9FF00', { shadowX: 0.05, shadowY: 0.05 });
+  slide.addShape('rect', {
+    x: badgeRect.x + 0.08,
+    y: badgeRect.y + 0.08,
+    w: badgeRect.w - 0.16,
+    h: badgeRect.h - 0.16,
+    fill: { color: '000000' },
+    line: { color: '000000', transparency: 100 },
+  });
+  addTextBox(slide, '★', { x: badgeRect.x + 0.115, y: badgeRect.y + 0.085, w: 0.25, h: 0.24 }, {
+    fontFace: 'Arial Black',
+    fontSize: 16,
+    bold: true,
+    color: 'D9FF00',
+    align: 'center',
+    valign: 'middle',
+  });
+
+  const subtitleCard = withOffset(spec, 'subtitle', { x: 1.52, y: 3.35, w: 7.0, h: 1.02 });
+  addNeoShadowCard(slide, subtitleCard, 'FFFFFF', { shadowX: 0.1, shadowY: 0.1 });
+  addTextBox(slide, upperText(spec.subtitle), { x: subtitleCard.x + 0.28, y: subtitleCard.y + 0.22, w: subtitleCard.w - 0.56, h: subtitleCard.h - 0.44 }, {
+    fontFace: 'Arial',
+    fontSize: 15,
+    bold: true,
+    color: '000000',
+    align: 'center',
+    valign: 'middle',
+  });
+}
+
+function addNeoAgenda(slide: PptxSlide, spec: SlideSpec) {
+  addNeoBackground(slide);
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'agenda-title', { x: 0.55, y: 0.45, w: 4.2, h: 0.65 }), {
+    fontFace: 'Arial Black',
+    fontSize: 25,
+    bold: true,
+    color: '000000',
+  });
+
+  const cards = [
+    { x: 0.55, y: 1.45 },
+    { x: 3.45, y: 1.45 },
+    { x: 6.35, y: 1.45 },
+    { x: 0.55, y: 3.28 },
+    { x: 3.45, y: 3.28 },
+  ];
+
+  (spec.items || []).slice(0, 5).forEach((item, index) => {
+    const rect = withOffset(spec, `agenda-card-${index}`, { x: cards[index]?.x || 0.55, y: cards[index]?.y || 3.28, w: 2.45, h: 1.45 });
+    addRect(slide, rect, 'FFFFFF', '000000', { line: { color: '000000', width: 2.25 } });
+    addTextBox(slide, `${String(index + 1).padStart(2, '0')}`, { x: rect.x + 0.16, y: rect.y + 0.12, w: 0.4, h: 0.2 }, {
+      fontFace: 'Arial',
+      fontSize: 11,
+      bold: true,
+      color: 'A000A0',
+    });
+    addTextBox(slide, cleanText(item.text), { x: rect.x + 0.16, y: rect.y + 0.42, w: rect.w - 0.32, h: rect.h - 0.55 }, {
+      fontFace: 'Arial Black',
+      fontSize: 18,
+      bold: true,
+      color: '000000',
+      valign: 'middle',
+    });
+  });
+}
+
+function addNeoTitleAndText(slide: PptxSlide, spec: SlideSpec) {
+  addNeoBackground(slide);
+  const titleRect = withOffset(spec, 'title-and-text-title', { x: 2.2, y: 1.0, w: 5.6, h: 0.85 });
+  addRect(slide, titleRect, '00FFFF', '000000', { line: { color: '000000', width: 2.25 } });
+  addTextBox(slide, cleanText(spec.title), titleRect, {
+    fontFace: 'Arial Black',
+    fontSize: 26,
+    bold: true,
+    color: '000000',
+    align: 'center',
+  });
+
+  const bodyRect = withOffset(spec, 'title-and-text-body', { x: 1.25, y: 2.2, w: 7.5, h: 1.7 });
+  addRect(slide, bodyRect, 'FFFFFF', '000000', { line: { color: '000000', width: 2.25 } });
+  addTextBox(slide, bodyToParagraph(spec.body), bodyRect, {
+    fontFace: 'Arial',
+    fontSize: 18,
+    color: '000000',
+    align: 'center',
+    valign: 'middle',
+  });
+}
+
+function addNeoThreeColumns(slide: PptxSlide, spec: SlideSpec) {
+  addNeoBackground(slide);
+  const titleRect = withOffset(spec, 'columns-title', { x: 0.55, y: 0.45, w: 3.8, h: 0.75 });
+  addRect(slide, titleRect, 'D9FF00', '000000', { line: { color: '000000', width: 2.25 } });
+  addTextBox(slide, cleanText(spec.title), titleRect, {
+    fontFace: 'Arial Black',
+    fontSize: 22,
+    bold: true,
+    color: '000000',
+  });
+
+  const columnX = [0.55, 3.35, 6.15];
+  (spec.columns || []).slice(0, 3).forEach((column, index) => {
+    const rect = withOffset(spec, `column-card-${index}`, { x: columnX[index], y: 1.65, w: 2.55, h: 3.25 });
+    addRect(slide, rect, 'FFFFFF', '000000', { line: { color: '000000', width: 2.25 } });
+    addRect(slide, { x: rect.x, y: rect.y, w: rect.w, h: 0.65 }, 'D9FF00', '000000', {
+      line: { color: '000000', width: 0.75 },
+    });
+    addTextBox(slide, String(index + 1).padStart(2, '0'), { x: rect.x + 0.15, y: rect.y + 0.12, w: 0.5, h: 0.2 }, {
+      fontFace: 'Arial Black',
+      fontSize: 14,
+      bold: true,
+      color: '000000',
+    });
+    addTextBox(slide, cleanText(column.heading), { x: rect.x + 0.18, y: rect.y + 0.85, w: rect.w - 0.36, h: 0.65 }, {
+      fontFace: 'Arial Black',
+      fontSize: 16,
+      bold: true,
+      color: '000000',
+      valign: 'top',
+    });
+    addTextBox(slide, cleanText(column.text), { x: rect.x + 0.18, y: rect.y + 1.65, w: rect.w - 0.36, h: 1.25 }, {
+      fontFace: 'Arial',
+      fontSize: 11,
+      color: '000000',
+      valign: 'top',
+    });
+  });
+}
+
+async function addNeoImageAndText(slide: PptxSlide, spec: SlideSpec) {
+  addNeoBackground(slide);
+  const imageCard = withOffset(spec, 'image-card', { x: 0.6, y: 0.7, w: 4.15, h: 3.45 });
+  addRect(slide, imageCard, 'FFD700', '000000', { line: { color: '000000', width: 2.25 } });
+  await addImage(slide, spec.imageUrl, { x: imageCard.x + 0.18, y: imageCard.y + 0.18, w: imageCard.w - 0.36, h: 2.5 });
+  addTextBox(slide, 'FIG 1. STRUCTURAL HONESTY', { x: imageCard.x + 0.18, y: imageCard.y + 2.82, w: imageCard.w - 0.36, h: 0.32 }, {
+    fontFace: 'Arial Black',
+    fontSize: 11,
+    bold: true,
+    color: '000000',
+    align: 'center',
+  });
+
+  const textCard = withOffset(spec, 'image-text', { x: 5.3, y: 1.15, w: 4.05, h: 2.65 });
+  addRect(slide, textCard, 'FFFFFF', '000000', { line: { color: '000000', width: 2.25 } });
+  addTextBox(slide, cleanText(spec.title), { x: textCard.x + 0.2, y: textCard.y + 0.2, w: textCard.w - 0.4, h: 0.8 }, {
+    fontFace: 'Arial Black',
+    fontSize: 24,
+    bold: true,
+    color: '000000',
+  });
+  addTextBox(slide, bodyToParagraph(spec.body), { x: textCard.x + 0.2, y: textCard.y + 1.1, w: textCard.w - 0.4, h: 1.2 }, {
+    fontFace: 'Arial',
+    fontSize: 12,
+    color: '000000',
+    valign: 'top',
+  });
+}
+
+function addNeoReferences(slide: PptxSlide, spec: SlideSpec) {
+  addNeoBackground(slide);
+  const titleRect = withOffset(spec, 'references-title', { x: 0.55, y: 0.45, w: 4.0, h: 0.65 });
+  addRect(slide, titleRect, '000000', '000000');
+  addTextBox(slide, cleanText(spec.title), titleRect, {
+    fontFace: 'Arial Black',
+    fontSize: 18,
+    bold: true,
+    color: 'FFFFFF',
+  });
+
+  (spec.items || []).slice(0, 6).forEach((item, index) => {
+    const row = withOffset(spec, `reference-item-${index}`, { x: 0.7, y: 1.45 + index * 0.62, w: 5.1, h: 0.45 });
+    addTextBox(slide, `[${index + 1}]`, { x: row.x, y: row.y, w: 0.4, h: row.h }, {
+      fontFace: 'Arial Black',
+      fontSize: 12,
+      color: 'A000A0',
+      bold: true,
+    });
+    addTextBox(slide, cleanText(item.text), { x: row.x + 0.45, y: row.y, w: row.w - 0.45, h: row.h }, {
+      fontFace: 'Arial',
+      fontSize: 12,
+      color: '000000',
+    });
+  });
+
+  const noteRect = withOffset(spec, 'references-note', { x: 6.4, y: 1.55, w: 2.85, h: 2.0 });
+  addRect(slide, noteRect, 'FFD700', '000000', { line: { color: '000000', width: 2.25 } });
+  addTextBox(slide, 'ADD_NEW_SOURCE', { x: noteRect.x + 0.2, y: noteRect.y + 0.22, w: noteRect.w - 0.4, h: 0.3 }, {
+    fontFace: 'Arial Black',
+    fontSize: 14,
+    color: '000000',
+    bold: true,
+  });
+}
+
+function addNeoThankYou(slide: PptxSlide, spec: SlideSpec) {
+  addNeoBackground(slide);
+  const labelRect = { x: 1.95, y: 0.7, w: 1.3, h: 0.4 };
+  addRect(slide, labelRect, 'A000A0', '000000', { line: { color: '000000', width: 2.25 } });
+  addTextBox(slide, 'THE_END', labelRect, {
+    fontFace: 'Arial Black',
+    fontSize: 12,
+    color: 'FFFFFF',
+    bold: true,
+    align: 'center',
+  });
+
+  const titleRect = withOffset(spec, 'thank-you-title', { x: 2.0, y: 1.05, w: 5.9, h: 2.2 });
+  addRect(slide, titleRect, 'D9FF00', '000000', { line: { color: '000000', width: 2.25 } });
+  addTextBox(slide, cleanText(spec.title), titleRect, {
+    fontFace: 'Arial Black',
+    fontSize: 30,
+    bold: true,
+    color: '000000',
+    align: 'center',
+    valign: 'middle',
+  });
+
+  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'thank-you-subtitle', { x: 2.2, y: 4.05, w: 5.6, h: 0.42 }), {
+    fontFace: 'Arial',
+    fontSize: 13,
+    bold: true,
+    color: '000000',
+    align: 'center',
+  });
+}
+
+function addGalerynTitleSubtitle(slide: PptxSlide, spec: SlideSpec) {
+  addGalerynBackground(slide);
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title', { x: 1.0, y: 1.1, w: 8.0, h: 1.55 }), {
+    fontFace: 'Georgia',
+    fontSize: 42,
+    bold: true,
+    color: '021D30',
+    align: 'center',
+    valign: 'middle',
+  });
+  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'subtitle', { x: 2.0, y: 3.65, w: 6.0, h: 0.85 }), {
+    fontFace: 'Arial',
+    fontSize: 12,
+    color: '021D30',
+    align: 'center',
+    valign: 'middle',
+  });
+}
+
+async function addGalerynAgenda(slide: PptxSlide, spec: SlideSpec) {
+  addGalerynBackground(slide);
+  const imageRect = withOffset(spec, 'agenda-image', { x: 0, y: 0, w: 1.8, h: PPT_HEIGHT });
+  await addImage(slide, spec.imageUrl || 'https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&q=80&w=1000', imageRect);
+
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'agenda-title', { x: 2.45, y: 0.72, w: 5.1, h: 0.75 }), {
+    fontFace: 'Georgia',
+    fontSize: 26,
+    bold: true,
+    color: '021D30',
+    align: 'center',
+  });
+
+  (spec.items || []).slice(0, 5).forEach((item, index) => {
+    const { heading, description } = splitAgendaItem(item.text);
+    const row = withOffset(spec, `agenda-item-${index}`, { x: 2.2, y: 1.6 + index * 0.68, w: 5.7, h: 0.55 });
+    slide.addShape('line', {
+      x: row.x,
+      y: row.y + row.h,
+      w: row.w,
+      h: 0,
+      line: { color: 'CBD5D1', width: 1 },
+    });
+    addTextBox(slide, heading, { x: row.x, y: row.y, w: 3.8, h: 0.24 }, {
+      fontFace: 'Arial',
+      fontSize: 15,
+      bold: true,
+      color: '021D30',
+    });
+    addTextBox(slide, description, { x: row.x, y: row.y + 0.24, w: 3.8, h: 0.22 }, {
+      fontFace: 'Arial',
+      fontSize: 9,
+      color: '021D30',
+      transparency: 35,
+    });
+    addTextBox(slide, String(index + 1).padStart(2, '0'), { x: row.x + 4.55, y: row.y + 0.05, w: 0.4, h: 0.2 }, {
+      fontFace: 'Arial',
+      fontSize: 14,
+      bold: true,
+      color: '021D30',
+      align: 'right',
+    });
+  });
+}
+
+function addGalerynThreeColumns(slide: PptxSlide, spec: SlideSpec) {
+  addGalerynBackground(slide);
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'columns-title', { x: 0.85, y: 0.7, w: 4.1, h: 0.55 }), {
+    fontFace: 'Georgia',
+    fontSize: 24,
+    bold: true,
+    color: '021D30',
+  });
+  addTextBox(slide, '001 // Design', withOffset(spec, 'columns-tag', { x: 7.2, y: 0.78, w: 1.75, h: 0.22 }), {
+    fontFace: 'Arial',
+    fontSize: 10,
+    color: '021D30',
+    transparency: 35,
+    align: 'right',
+  });
+
+  const columnX = [0.85, 3.45, 6.05];
+  (spec.columns || []).slice(0, 3).forEach((column, index) => {
+    const rect = withOffset(spec, `column-${index}`, { x: columnX[index], y: 1.85, w: 2.0, h: 2.3 });
+    addTextBox(slide, `0${index + 1}`, { x: rect.x, y: rect.y, w: 0.35, h: 0.18 }, {
+      fontFace: 'Arial',
+      fontSize: 10,
+      color: '021D30',
+      transparency: 35,
+    });
+    addTextBox(slide, cleanText(column.heading), { x: rect.x, y: rect.y + 0.35, w: rect.w, h: 0.5 }, {
+      fontFace: 'Arial',
+      fontSize: 16,
+      bold: true,
+      color: '021D30',
+    });
+    addTextBox(slide, cleanText(column.text), { x: rect.x, y: rect.y + 0.95, w: rect.w, h: 0.9 }, {
+      fontFace: 'Arial',
+      fontSize: 10,
+      color: '021D30',
+      transparency: 25,
+      valign: 'top',
+    });
+  });
+}
+
+function addGalerynTitleAndText(slide: PptxSlide, spec: SlideSpec) {
+  addGalerynBackground(slide);
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title-and-text-title', { x: 0.8, y: 1.4, w: 4.5, h: 1.2 }), {
+    fontFace: 'Georgia',
+    fontSize: 26,
+    bold: true,
+    color: '021D30',
+    valign: 'middle',
+  });
+  addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'title-and-text-body-0', { x: 5.7, y: 2.2, w: 3.2, h: 1.2 }), {
+    fontFace: 'Arial',
+    fontSize: 12,
+    color: '021D30',
+    transparency: 20,
+    valign: 'middle',
+  });
+}
+
+async function addGalerynImageAndText(slide: PptxSlide, spec: SlideSpec) {
+  addGalerynBackground(slide);
+  await addImage(slide, spec.imageUrl, withOffset(spec, 'image-card', { x: 0, y: 0, w: 5, h: PPT_HEIGHT }));
+  addTextBox(slide, '001 Stories', { x: 0.72, y: 4.58, w: 1.45, h: 0.22 }, {
+    fontFace: 'Arial',
+    fontSize: 10,
+    color: 'FFFFFF',
+    fill: { color: '021D30', transparency: 20 },
+    margin: [3, 4, 3, 4],
+  });
+
+  addRect(slide, { x: 5, y: 0, w: 5, h: PPT_HEIGHT }, 'F5F3EE', 'F5F3EE');
+  const textRect = withOffset(spec, 'image-text-content', { x: 5.7, y: 1.55, w: 3.4, h: 2.0 });
+  addTextBox(slide, cleanText(spec.title), { x: textRect.x, y: textRect.y, w: textRect.w, h: 0.65 }, {
+    fontFace: 'Georgia',
+    fontSize: 24,
+    bold: true,
+    color: '021D30',
+  });
+  addTextBox(slide, bodyToParagraph(spec.body), { x: textRect.x, y: textRect.y + 0.9, w: textRect.w, h: 1.1 }, {
+    fontFace: 'Arial',
+    fontSize: 12,
+    color: '021D30',
+    transparency: 20,
+    valign: 'top',
+  });
+}
+
+function addGalerynReferences(slide: PptxSlide, spec: SlideSpec) {
+  addGalerynBackground(slide);
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'references-title', { x: 0.95, y: 0.8, w: 3, h: 0.55 }), {
+    fontFace: 'Georgia',
+    fontSize: 24,
+    bold: true,
+    color: '021D30',
+  });
+
+  (spec.items || []).slice(0, 6).forEach((item, index) => {
+    const row = withOffset(spec, `reference-item-${index}`, { x: 1.0, y: 1.7 + index * 0.62, w: 7.1, h: 0.4 });
+    addTextBox(slide, `[${index + 1}]`, { x: row.x, y: row.y, w: 0.35, h: row.h }, {
+      fontFace: 'Arial',
+      fontSize: 10,
+      color: '021D30',
+      transparency: 50,
+    });
+    addTextBox(slide, cleanText(item.text), { x: row.x + 0.45, y: row.y, w: row.w - 0.45, h: row.h }, {
+      fontFace: 'Arial',
+      fontSize: 12,
+      color: '021D30',
+    });
+    slide.addShape('line', {
+      x: row.x + 0.45,
+      y: row.y + row.h,
+      w: row.w - 0.45,
+      h: 0,
+      line: { color: 'D6D3D1', width: 0.75 },
+    });
+  });
+}
+
+function addGalerynThankYou(slide: PptxSlide, spec: SlideSpec) {
+  slide.background = { color: '021D30' };
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'thank-you-title', { x: 2.0, y: 1.95, w: 6, h: 0.9 }), {
+    fontFace: 'Georgia',
+    fontSize: 30,
+    bold: true,
+    color: 'FBF9F4',
+    align: 'center',
+    valign: 'middle',
+  });
+  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'thank-you-subtitle', { x: 2.5, y: 2.95, w: 5, h: 0.3 }), {
+    fontFace: 'Arial',
+    fontSize: 12,
+    color: 'FBF9F4',
+    transparency: 35,
+    align: 'center',
+  });
+  addTextBox(slide, 'GALERYN CO. // 2026', { x: 3.15, y: 4.15, w: 3.7, h: 0.22 }, {
+    fontFace: 'Arial',
+    fontSize: 9,
+    color: 'FBF9F4',
+    charSpacing: 2,
+    align: 'center',
+  });
+}
+
+function addNoisyTitleSubtitle(slide: PptxSlide, spec: SlideSpec) {
+  addNoisyBackground(slide);
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title', { x: 0.85, y: 1.1, w: 4.8, h: 0.8 }), {
+    fontFace: 'Courier New',
+    fontSize: 28,
+    bold: true,
+    color: 'FFFFFF',
+    underline: true,
+  });
+  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'subtitle', { x: 0.95, y: 2.15, w: 5.7, h: 1.8 }), {
+    fontFace: 'Courier New',
+    fontSize: 16,
+    color: 'FFFFFF',
+    valign: 'top',
+  });
+}
+
+function addNoisyAgenda(slide: PptxSlide, spec: SlideSpec) {
+  addNoisyBackground(slide);
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'agenda-title', { x: 0.85, y: 0.72, w: 2.2, h: 0.6 }), {
+    fontFace: 'Courier New',
+    fontSize: 24,
+    bold: true,
+    color: 'FFFFFF',
+    underline: true,
+  });
+
+  (spec.items || []).slice(0, 6).forEach((item, index) => {
+    const column = index % 3;
+    const row = Math.floor(index / 3);
+    const rect = withOffset(spec, `agenda-item-${index}`, {
+      x: 1.0 + column * 2.8,
+      y: 1.65 + row * 2.0,
+      w: 2.0,
+      h: 1.6,
+    });
+    addTextBox(slide, String(index + 1).padStart(2, '0'), { x: rect.x, y: rect.y, w: rect.w, h: 0.7 }, {
+      fontFace: 'Courier New',
+      fontSize: 34,
+      bold: true,
+      color: 'FFFFFF',
+      align: 'center',
+    });
+    addRect(slide, { x: rect.x + 0.2, y: rect.y + 0.84, w: rect.w - 0.4, h: 0.08 }, 'FF7A59', 'FF7A59');
+    addTextBox(slide, cleanText(item.text), { x: rect.x, y: rect.y + 1.0, w: rect.w, h: 0.42 }, {
+      fontFace: 'Courier New',
+      fontSize: 13,
+      color: 'FFFFFF',
+      align: 'center',
+      valign: 'middle',
+    });
+  });
+}
+
+function addNoisyThreeColumns(slide: PptxSlide, spec: SlideSpec) {
+  slide.background = { color: 'FFFFFF' };
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'columns-title', { x: 0.8, y: 0.72, w: 4.8, h: 0.55 }), {
+    fontFace: 'Courier New',
+    fontSize: 22,
+    bold: true,
+    color: '547BEE',
+    underline: true,
+  });
+
+  const columnX = [0.85, 3.55, 6.25];
+  (spec.columns || []).slice(0, 3).forEach((column, index) => {
+    const rect = withOffset(spec, `column-${index}`, { x: columnX[index], y: 1.7, w: 2.1, h: 2.4 });
+    addTextBox(slide, cleanText(column.heading), { x: rect.x, y: rect.y, w: rect.w, h: 0.48 }, {
+      fontFace: 'Courier New',
+      fontSize: 16,
+      bold: true,
+      color: '547BEE',
+    });
+    addTextBox(slide, cleanText(column.text), { x: rect.x, y: rect.y + 0.62, w: rect.w, h: 1.1 }, {
+      fontFace: 'Courier New',
+      fontSize: 12,
+      color: '1F2937',
+      valign: 'top',
+    });
+  });
+}
+
+function addNoisyTitleAndText(slide: PptxSlide, spec: SlideSpec) {
+  slide.background = { color: 'FFFFFF' };
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title-and-text-title', { x: 0.85, y: 0.75, w: 4.5, h: 0.55 }), {
+    fontFace: 'Courier New',
+    fontSize: 22,
+    bold: true,
+    color: '547BEE',
+    underline: true,
+  });
+  addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'title-and-text-body-0', { x: 0.9, y: 1.7, w: 8.1, h: 2.5 }), {
+    fontFace: 'Courier New',
+    fontSize: 16,
+    color: '1F2937',
+    valign: 'top',
+  });
+}
+
+async function addNoisyImageAndText(slide: PptxSlide, spec: SlideSpec) {
+  addNoisyBackground(slide, 'F2725C');
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'image-title', { x: 0.8, y: 0.75, w: 4.0, h: 0.55 }), {
+    fontFace: 'Courier New',
+    fontSize: 22,
+    bold: true,
+    color: 'FFFFFF',
+    underline: true,
+  });
+
+  await addImage(slide, spec.imageUrl, withOffset(spec, 'image-card', { x: 0.9, y: 1.6, w: 4.1, h: 2.7 }));
+  addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'image-body', { x: 5.45, y: 1.65, w: 3.45, h: 2.25 }), {
+    fontFace: 'Courier New',
+    fontSize: 14,
+    color: 'FFFFFF',
+    valign: 'top',
+  });
+}
+
+function addNoisyReferences(slide: PptxSlide, spec: SlideSpec) {
+  slide.background = { color: 'FFFFFF' };
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'references-title', { x: 0.8, y: 0.75, w: 3.5, h: 0.55 }), {
+    fontFace: 'Courier New',
+    fontSize: 22,
+    bold: true,
+    color: '547BEE',
+    underline: true,
+  });
+
+  (spec.items || []).slice(0, 8).forEach((item, index) => {
+    addTextBox(slide, `• ${cleanText(item.text)}`, withOffset(spec, `reference-item-${index}`, { x: 0.95, y: 1.65 + index * 0.45, w: 8.0, h: 0.3 }), {
+      fontFace: 'Courier New',
+      fontSize: 12,
+      color: '1F2937',
+      valign: 'middle',
+    });
+  });
+}
+
+function addNoisyThankYou(slide: PptxSlide, spec: SlideSpec) {
+  addNoisyBackground(slide);
+  addTextBox(slide, cleanText(spec.title), withOffset(spec, 'thank-you-title', { x: 2.1, y: 1.95, w: 5.8, h: 0.9 }), {
+    fontFace: 'Courier New',
+    fontSize: 30,
+    bold: true,
+    color: 'FFFFFF',
+    align: 'center',
+    valign: 'middle',
+  });
+  addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'thank-you-subtitle', { x: 2.8, y: 3.0, w: 4.4, h: 0.35 }), {
+    fontFace: 'Courier New',
+    fontSize: 15,
+    color: 'FFFFFF',
+    align: 'center',
+  });
+}
+
+async function addTemplateBackground(slide: PptxSlide, backgroundImage: string) {
+  const cleanSrc = cleanText(backgroundImage);
+  if (!cleanSrc) return;
+
+  if (cleanSrc.startsWith('data:')) {
+    slide.addImage({ data: cleanSrc, x: 0, y: 0, w: PPT_WIDTH, h: PPT_HEIGHT });
+    return;
+  }
+
+  slide.addImage({ path: cleanSrc, x: 0, y: 0, w: PPT_WIDTH, h: PPT_HEIGHT });
+}
+
+function addNeoTextOverlay(slide: PptxSlide, spec: SlideSpec) {
+  switch (spec.layout) {
+    case 'title_subtitle':
+      addTextBox(slide, upperText(spec.title), withOffset(spec, 'title', { x: 1.08, y: 1.08, w: 7.15, h: 1.35 }), {
+        fontFace: 'Arial Black',
+        fontSize: 31,
+        bold: true,
+        color: '000000',
+        align: 'center',
+        valign: 'middle',
+        rotate: -1.2,
+      });
+      addTextBox(slide, upperText(spec.subtitle), withOffset(spec, 'subtitle', { x: 1.8, y: 3.58, w: 6.45, h: 0.56 }), {
+        fontFace: 'Arial',
+        fontSize: 14,
+        bold: true,
+        color: '000000',
+        align: 'center',
+        valign: 'middle',
+      });
+      return;
+    case 'agenda':
+      addTextBox(slide, upperText(spec.title), withOffset(spec, 'agenda-title', { x: 0.55, y: 0.45, w: 4.2, h: 0.65 }), {
+        fontFace: 'Arial Black',
+        fontSize: 25,
+        bold: true,
+        color: '000000',
+      });
+      {
+        const cards = [
+          { x: 0.72, y: 1.98, w: 2.05, h: 0.62 },
+          { x: 3.62, y: 1.98, w: 2.05, h: 0.62 },
+          { x: 6.52, y: 1.98, w: 2.05, h: 0.62 },
+          { x: 0.72, y: 3.82, w: 2.05, h: 0.62 },
+          { x: 3.62, y: 3.82, w: 2.05, h: 0.62 },
+        ];
+        (spec.items || []).slice(0, 5).forEach((item, index) => {
+          addTextBox(slide, upperText(item.text), withOffset(spec, `agenda-card-${index}`, cards[index]), {
+            fontFace: 'Arial Black',
+            fontSize: 17,
+            bold: true,
+            color: '000000',
+            align: 'left',
+            valign: 'top',
+          });
+        });
+      }
+      return;
+    case 'title_and_text':
+      addTextBox(slide, upperText(spec.title), withOffset(spec, 'title-and-text-title', { x: 2.45, y: 1.18, w: 5.1, h: 0.5 }), {
+        fontFace: 'Arial Black',
+        fontSize: 26,
+        bold: true,
+        color: '000000',
+        align: 'center',
+      });
+      addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'title-and-text-body', { x: 1.62, y: 2.78, w: 6.75, h: 0.78 }), {
+        fontFace: 'Arial',
+        fontSize: 18,
+        color: '000000',
+        align: 'center',
+        valign: 'middle',
+      });
+      return;
+    case 'three_columns':
+      addTextBox(slide, upperText(spec.title), withOffset(spec, 'columns-title', { x: 0.75, y: 0.65, w: 3.3, h: 0.45 }), {
+        fontFace: 'Arial Black',
+        fontSize: 22,
+        bold: true,
+        color: '000000',
+      });
+      {
+        const columnX = [0.76, 3.56, 6.36];
+        (spec.columns || []).slice(0, 3).forEach((column, index) => {
+          const key = `column-card-${index}`;
+          addTextBox(slide, upperText(column.heading), withOffset(spec, key, { x: columnX[index] + 0.18, y: 2.5, w: 2.0, h: 0.55 }), {
+            fontFace: 'Arial Black',
+            fontSize: 15,
+            bold: true,
+            color: '000000',
+            valign: 'top',
+          });
+          addTextBox(slide, cleanText(column.text), withOffset(spec, key, { x: columnX[index] + 0.18, y: 3.42, w: 2.0, h: 1.0 }), {
+            fontFace: 'Arial',
+            fontSize: 10.5,
+            color: '000000',
+            valign: 'top',
+          });
+        });
+      }
+      return;
+    case 'image_and_text':
+      addTextBox(slide, upperText(spec.title), withOffset(spec, 'image-text', { x: 5.5, y: 1.4, w: 3.55, h: 0.7 }), {
+        fontFace: 'Arial Black',
+        fontSize: 24,
+        bold: true,
+        color: '000000',
+      });
+      addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'image-text', { x: 5.5, y: 2.35, w: 3.5, h: 1.15 }), {
+        fontFace: 'Arial',
+        fontSize: 12,
+        color: '000000',
+        valign: 'top',
+      });
+      return;
+    case 'references':
+      addTextBox(slide, upperText(spec.title), withOffset(spec, 'references-title', { x: 0.74, y: 0.56, w: 3.6, h: 0.3 }), {
+        fontFace: 'Arial Black',
+        fontSize: 18,
+        bold: true,
+        color: 'FFFFFF',
+      });
+      (spec.items || []).slice(0, 6).forEach((item, index) => {
+        addTextBox(slide, cleanText(item.text), withOffset(spec, `reference-item-${index}`, { x: 1.15, y: 1.5 + index * 0.62, w: 4.5, h: 0.24 }), {
+          fontFace: 'Arial',
+          fontSize: 12,
+          color: '000000',
+        });
+      });
+      return;
+    case 'thank_you':
+      addTextBox(slide, upperText(spec.title), withOffset(spec, 'thank-you-title', { x: 2.35, y: 1.6, w: 5.15, h: 1.35 }), {
+        fontFace: 'Arial Black',
+        fontSize: 30,
+        bold: true,
+        color: '000000',
+        align: 'center',
+        valign: 'middle',
+      });
+      addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'thank-you-subtitle', { x: 2.35, y: 4.08, w: 5.5, h: 0.22 }), {
+        fontFace: 'Arial',
+        fontSize: 13,
+        bold: true,
+        color: '000000',
+        align: 'center',
+      });
+      return;
+  }
+}
+
+function addGalerynTextOverlay(slide: PptxSlide, spec: SlideSpec) {
+  switch (spec.layout) {
+    case 'title_subtitle':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title', { x: 1.15, y: 1.68, w: 7.7, h: 0.86 }), {
+        fontFace: 'Georgia',
+        fontSize: 42,
+        bold: true,
+        color: '021D30',
+        align: 'center',
+      });
+      addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'subtitle', { x: 2.1, y: 3.72, w: 5.8, h: 0.5 }), {
+        fontFace: 'Arial',
+        fontSize: 11,
+        color: '021D30',
+        align: 'center',
+        valign: 'middle',
+      });
+      return;
+    case 'agenda':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'agenda-title', { x: 2.45, y: 0.9, w: 5.0, h: 0.48 }), {
+        fontFace: 'Georgia',
+        fontSize: 25,
+        bold: true,
+        color: '021D30',
+        align: 'center',
+      });
+      (spec.items || []).slice(0, 5).forEach((item, index) => {
+        const parsed = splitAgendaItem(item.text);
+        addTextBox(slide, parsed.heading, withOffset(spec, `agenda-item-${index}`, { x: 2.25, y: 1.78 + index * 0.68, w: 3.6, h: 0.2 }), {
+          fontFace: 'Arial',
+          fontSize: 15,
+          bold: true,
+          color: '021D30',
+        });
+        addTextBox(slide, parsed.description, withOffset(spec, `agenda-item-${index}`, { x: 2.25, y: 2.02 + index * 0.68, w: 3.6, h: 0.18 }), {
+          fontFace: 'Arial',
+          fontSize: 8.5,
+          color: '021D30',
+          transparency: 35,
+        });
+      });
+      return;
+    case 'three_columns':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'columns-title', { x: 0.85, y: 0.7, w: 4.1, h: 0.34 }), {
+        fontFace: 'Georgia',
+        fontSize: 24,
+        bold: true,
+        color: '021D30',
+      });
+      {
+        const columnX = [0.85, 3.45, 6.05];
+        (spec.columns || []).slice(0, 3).forEach((column, index) => {
+          addTextBox(slide, cleanText(column.heading), withOffset(spec, `column-${index}`, { x: columnX[index], y: 2.2, w: 2.0, h: 0.32 }), {
+            fontFace: 'Arial',
+            fontSize: 16,
+            bold: true,
+            color: '021D30',
+          });
+          addTextBox(slide, cleanText(column.text), withOffset(spec, `column-${index}`, { x: columnX[index], y: 2.82, w: 2.0, h: 0.62 }), {
+            fontFace: 'Arial',
+            fontSize: 10,
+            color: '021D30',
+            transparency: 25,
+            valign: 'top',
+          });
+        });
+      }
+      return;
+    case 'title_and_text':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title-and-text-title', { x: 0.86, y: 1.76, w: 4.1, h: 0.84 }), {
+        fontFace: 'Georgia',
+        fontSize: 26,
+        bold: true,
+        color: '021D30',
+        valign: 'middle',
+      });
+      addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'title-and-text-body-0', { x: 5.78, y: 2.58, w: 3.05, h: 0.66 }), {
+        fontFace: 'Arial',
+        fontSize: 12,
+        color: '021D30',
+        transparency: 20,
+        valign: 'middle',
+      });
+      return;
+    case 'image_and_text':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'image-text-content', { x: 5.72, y: 1.68, w: 3.3, h: 0.44 }), {
+        fontFace: 'Georgia',
+        fontSize: 24,
+        bold: true,
+        color: '021D30',
+      });
+      addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'image-text-content', { x: 5.72, y: 2.55, w: 3.2, h: 0.85 }), {
+        fontFace: 'Arial',
+        fontSize: 12,
+        color: '021D30',
+        transparency: 20,
+        valign: 'top',
+      });
+      return;
+    case 'references':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'references-title', { x: 0.95, y: 0.82, w: 3.0, h: 0.34 }), {
+        fontFace: 'Georgia',
+        fontSize: 24,
+        bold: true,
+        color: '021D30',
+      });
+      (spec.items || []).slice(0, 6).forEach((item, index) => {
+        addTextBox(slide, cleanText(item.text), withOffset(spec, `reference-item-${index}`, { x: 1.42, y: 1.7 + index * 0.62, w: 6.55, h: 0.2 }), {
+          fontFace: 'Arial',
+          fontSize: 12,
+          color: '021D30',
+        });
+      });
+      return;
+    case 'thank_you':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'thank-you-title', { x: 2.0, y: 2.08, w: 6.0, h: 0.45 }), {
+        fontFace: 'Georgia',
+        fontSize: 30,
+        bold: true,
+        color: 'FBF9F4',
+        align: 'center',
+      });
+      addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'thank-you-subtitle', { x: 2.5, y: 3.05, w: 5.0, h: 0.16 }), {
+        fontFace: 'Arial',
+        fontSize: 12,
+        color: 'FBF9F4',
+        transparency: 35,
+        align: 'center',
+      });
+      return;
+  }
+}
+
+function addNoisyTextOverlay(slide: PptxSlide, spec: SlideSpec) {
+  switch (spec.layout) {
+    case 'title_subtitle':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title', { x: 0.8, y: 1.2, w: 4.4, h: 0.38 }), {
+        fontFace: 'Courier New',
+        fontSize: 28,
+        bold: true,
+        color: 'FFFFFF',
+        underline: true,
+      });
+      addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'subtitle', { x: 0.82, y: 2.0, w: 5.8, h: 1.5 }), {
+        fontFace: 'Courier New',
+        fontSize: 16,
+        color: 'FFFFFF',
+        valign: 'top',
+      });
+      return;
+    case 'agenda':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'agenda-title', { x: 0.82, y: 0.82, w: 2.0, h: 0.34 }), {
+        fontFace: 'Courier New',
+        fontSize: 24,
+        bold: true,
+        color: 'FFFFFF',
+        underline: true,
+      });
+      (spec.items || []).slice(0, 6).forEach((item, index) => {
+        const column = index % 3;
+        const row = Math.floor(index / 3);
+        addTextBox(slide, cleanText(item.text), withOffset(spec, `agenda-item-${index}`, {
+          x: 0.98 + column * 2.8,
+          y: 2.68 + row * 2.0,
+          w: 2.02,
+          h: 0.26,
+        }), {
+          fontFace: 'Courier New',
+          fontSize: 13,
+          color: 'FFFFFF',
+          align: 'center',
+          valign: 'middle',
+        });
+      });
+      return;
+    case 'three_columns':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'columns-title', { x: 0.8, y: 0.82, w: 4.6, h: 0.34 }), {
+        fontFace: 'Courier New',
+        fontSize: 22,
+        bold: true,
+        color: '547BEE',
+        underline: true,
+      });
+      {
+        const columnX = [0.85, 3.55, 6.25];
+        (spec.columns || []).slice(0, 3).forEach((column, index) => {
+          addTextBox(slide, cleanText(column.heading), withOffset(spec, `column-${index}`, { x: columnX[index], y: 1.72, w: 2.1, h: 0.28 }), {
+            fontFace: 'Courier New',
+            fontSize: 16,
+            bold: true,
+            color: '547BEE',
+          });
+          addTextBox(slide, cleanText(column.text), withOffset(spec, `column-${index}`, { x: columnX[index], y: 2.34, w: 2.1, h: 0.95 }), {
+            fontFace: 'Courier New',
+            fontSize: 12,
+            color: '1F2937',
+            valign: 'top',
+          });
+        });
+      }
+      return;
+    case 'title_and_text':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'title-and-text-title', { x: 0.82, y: 0.82, w: 4.5, h: 0.34 }), {
+        fontFace: 'Courier New',
+        fontSize: 22,
+        bold: true,
+        color: '547BEE',
+        underline: true,
+      });
+      addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'title-and-text-body-0', { x: 0.92, y: 1.76, w: 8.0, h: 1.9 }), {
+        fontFace: 'Courier New',
+        fontSize: 16,
+        color: '1F2937',
+        valign: 'top',
+      });
+      return;
+    case 'image_and_text':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'image-title', { x: 0.82, y: 0.82, w: 4.0, h: 0.34 }), {
+        fontFace: 'Courier New',
+        fontSize: 22,
+        bold: true,
+        color: 'FFFFFF',
+        underline: true,
+      });
+      addTextBox(slide, bodyToParagraph(spec.body), withOffset(spec, 'image-body', { x: 5.48, y: 1.72, w: 3.3, h: 1.9 }), {
+        fontFace: 'Courier New',
+        fontSize: 14,
+        color: 'FFFFFF',
+        valign: 'top',
+      });
+      return;
+    case 'references':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'references-title', { x: 0.82, y: 0.82, w: 3.4, h: 0.34 }), {
+        fontFace: 'Courier New',
+        fontSize: 22,
+        bold: true,
+        color: '547BEE',
+        underline: true,
+      });
+      (spec.items || []).slice(0, 8).forEach((item, index) => {
+        addTextBox(slide, cleanText(item.text), withOffset(spec, `reference-item-${index}`, { x: 1.12, y: 1.68 + index * 0.45, w: 7.65, h: 0.2 }), {
+          fontFace: 'Courier New',
+          fontSize: 12,
+          color: '1F2937',
+          valign: 'middle',
+        });
+      });
+      return;
+    case 'thank_you':
+      addTextBox(slide, cleanText(spec.title), withOffset(spec, 'thank-you-title', { x: 2.1, y: 2.18, w: 5.8, h: 0.45 }), {
+        fontFace: 'Courier New',
+        fontSize: 30,
+        bold: true,
+        color: 'FFFFFF',
+        align: 'center',
+      });
+      addTextBox(slide, cleanText(spec.subtitle), withOffset(spec, 'thank-you-subtitle', { x: 2.8, y: 3.06, w: 4.4, h: 0.22 }), {
+        fontFace: 'Courier New',
+        fontSize: 15,
+        color: 'FFFFFF',
+        align: 'center',
+      });
+      return;
+  }
+}
+
+async function addTemplateSlide(slide: PptxSlide, spec: SlideSpec) {
+  const template = getTemplateById(spec.templateId);
+  if (!template) {
+    slide.background = { color: 'FFFFFF' };
+    addTextBox(slide, cleanText(spec.title) || 'Slide', { x: 1, y: 1, w: 8, h: 1 }, {
+      fontFace: 'Arial',
+      fontSize: 28,
+      color: '000000',
+    });
+    return;
+  }
+
+  if (spec.templateId === 'neobrutalism') {
+    switch (spec.layout) {
+      case 'title_subtitle':
+        addNeoTitleSubtitle(slide, spec);
+        return;
+      case 'agenda':
+        addNeoAgenda(slide, spec);
+        return;
+      case 'title_and_text':
+        addNeoTitleAndText(slide, spec);
+        return;
+      case 'three_columns':
+        addNeoThreeColumns(slide, spec);
+        return;
+      case 'image_and_text':
+        await addNeoImageAndText(slide, spec);
+        return;
+      case 'references':
+        addNeoReferences(slide, spec);
+        return;
+      case 'thank_you':
+        addNeoThankYou(slide, spec);
+        return;
+    }
+  }
+
+  if (spec.templateId === 'galeryn') {
+    switch (spec.layout) {
+      case 'title_subtitle':
+        addGalerynTitleSubtitle(slide, spec);
+        return;
+      case 'agenda':
+        await addGalerynAgenda(slide, spec);
+        return;
+      case 'title_and_text':
+        addGalerynTitleAndText(slide, spec);
+        return;
+      case 'three_columns':
+        addGalerynThreeColumns(slide, spec);
+        return;
+      case 'image_and_text':
+        await addGalerynImageAndText(slide, spec);
+        return;
+      case 'references':
+        addGalerynReferences(slide, spec);
+        return;
+      case 'thank_you':
+        addGalerynThankYou(slide, spec);
+        return;
+    }
+  }
+
+  switch (spec.layout) {
+    case 'title_subtitle':
+      addNoisyTitleSubtitle(slide, spec);
+      return;
+    case 'agenda':
+      addNoisyAgenda(slide, spec);
+      return;
+    case 'title_and_text':
+      addNoisyTitleAndText(slide, spec);
+      return;
+    case 'three_columns':
+      addNoisyThreeColumns(slide, spec);
+      return;
+    case 'image_and_text':
+      await addNoisyImageAndText(slide, spec);
+      return;
+    case 'references':
+      addNoisyReferences(slide, spec);
+      return;
+    case 'thank_you':
+      addNoisyThankYou(slide, spec);
+      return;
+  }
+}
+
+function addTemplateTextOverlay(slide: PptxSlide, spec: SlideSpec) {
+  if (spec.templateId === 'neobrutalism') {
+    addNeoTextOverlay(slide, spec);
+    return;
+  }
+
+  if (spec.templateId === 'galeryn') {
+    addGalerynTextOverlay(slide, spec);
+    return;
+  }
+
+  addNoisyTextOverlay(slide, spec);
+}
+
+export async function exportEditablePptx({
+  slides,
+  slideSpecs,
+  currentTheme,
+  presentationTitle,
+}: EditablePptxExportParams) {
+  const pptx = new PptxGenJS();
+  pptx.defineLayout({ name: 'LAYOUT_16x9', width: PPT_WIDTH, height: PPT_HEIGHT });
+  pptx.layout = 'LAYOUT_16x9';
+  pptx.author = 'AI PowerPoint Generator';
+  pptx.company = 'AI Generated';
+  pptx.subject = 'Editable presentation export';
+  pptx.title = presentationTitle || 'Presentation';
+
+  if (TEMPLATE_THEMES.has(currentTheme) && slideSpecs.length > 0) {
+    for (const spec of slideSpecs) {
+      const slide = pptx.addSlide();
+      await addTemplateSlide(slide, spec);
+    }
+  } else {
+    for (const slideModel of slides) {
+      const slide = pptx.addSlide();
+      await addLegacySlide(slide, slideModel, currentTheme);
+    }
+  }
+
+  await pptx.writeFile({ fileName: `${sanitizeFileName(presentationTitle)}.pptx` });
+}

lib/hf-client.ts

@@ -15,6 +15,23 @@ export interface ConversationalModels {
   [key: string]: FireworksModel;
 }
 
+export class HFGenerationError extends Error {
+  status?: number;
+  provider?: string;
+  model?: string;
+
+  constructor(message: string, options?: { status?: number; provider?: string; model?: string; cause?: unknown }) {
+    super(message);
+    this.name = 'HFGenerationError';
+    this.status = options?.status;
+    this.provider = options?.provider;
+    this.model = options?.model;
+    if (options?.cause !== undefined) {
+      (this as Error & { cause?: unknown }).cause = options.cause;
+    }
+  }
+}
+
 const conversationalModels: ConversationalModels = {
   "meta-llama/Llama-3.3-70B-Instruct:together": {
     "_id": "llama-33-70b-instruct",
@@ -54,12 +71,10 @@ export class HFClient {
 
   async generateSlideContent(prompt: string, model?: string): Promise<string> {
     const activeModel = model || this.defaultModel;
-    let colonIndex = activeModel.indexOf(":", activeModel.indexOf("/") + 1);
-    let hasEncodedProvider = colonIndex !== -1;
-    let modelId = hasEncodedProvider ? activeModel.substring(0, colonIndex) : activeModel;
-    let provider = hasEncodedProvider ? activeModel.substring(colonIndex + 1) : "fireworks-ai";
-
-    // Removed auto-correct logic; allowing Llama-3.3-70B-Instruct to pass through natively
+    const colonIndex = activeModel.indexOf(":", activeModel.indexOf("/") + 1);
+    const hasEncodedProvider = colonIndex !== -1;
+    const modelId = hasEncodedProvider ? activeModel.substring(0, colonIndex) : activeModel;
+    const provider = hasEncodedProvider ? activeModel.substring(colonIndex + 1) : "fireworks-ai";
 
     try {
       const completion = await this.client.chatCompletion({
@@ -77,8 +92,19 @@ export class HFClient {
 
       return completion.choices[0]?.message?.content || "";
     } catch (error) {
-      console.error("Error generating slide content:", error);
-      throw new Error("Failed to generate slide content");
+      const status = typeof error === 'object' && error !== null
+        ? (error as { httpResponse?: { status?: number } }).httpResponse?.status
+        : undefined;
+      const message = status
+        ? `Hugging Face provider request failed with status ${status}`
+        : 'Hugging Face provider request failed';
+
+      throw new HFGenerationError(message, {
+        status,
+        provider,
+        model: modelId,
+        cause: error,
+      });
     }
   }
 

lib/imageService.ts

@@ -3,12 +3,14 @@
  * Handles fetching images from Unsplash API for slide generation
  */
 
+import { searchUnsplash } from './unsplash';
+
 interface UnsplashImage {
   id: string;
   urls: {
     regular: string;
     small: string;
-    thumb: string;
+    full: string;
   };
   alt_description: string | null;
   user: {
@@ -40,26 +42,10 @@ export async function fetchImageForSlide(keywords: string): Promise<ImageSearchR
   }
 
   try {
-    // Call our API endpoint to search Unsplash
-    const response = await fetch(
-      `${process.env.NEXT_PUBLIC_BASE_URL || 'http://localhost:3000'}/api/search-images?query=${encodeURIComponent(keywords)}&per_page=1`,
-      {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-      }
-    );
-
-    if (!response.ok) {
-      console.warn('Image search failed, using fallback');
-      return getFallbackImage();
-    }
-
-    const data = await response.json();
+    const results = await searchUnsplash(keywords, 1);
 
-    if (data.results && data.results.length > 0) {
-      const image: UnsplashImage = data.results[0];
+    if (results.length > 0) {
+      const image: UnsplashImage = results[0];
       return {
         imageUrl: image.urls.regular,
         attribution: {

lib/orchestrator.ts

@@ -74,6 +74,7 @@ export interface SlideJSON {
   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>;
@@ -177,6 +178,14 @@ export async function generatePresentation(req: GenerationRequest): Promise<Pres
       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 || '',

lib/slide-prompt.ts

@@ -16,7 +16,8 @@ export interface GeneratedSlideOutput {
 export interface GeneratedSlide {
   title: string;
   subtitle?: string;
-  content?: string[];
+  content?: string | string[];
+  columns?: Array<{ heading: string; text: string }>;
   body?: Array<{ text: string }>;
   layout: LayoutType;
   imageKeyword?: string;
@@ -33,11 +34,11 @@ export function buildSlidePrompt(topic: string): string {
 INSTRUCTIONS:
 1. Generate 8-10 slides with detailed, topic-specific content
 2. The first slide title should relate to the topic (NOT "Reuben AI")
-3. All content must be specific — NO generic placeholders
-4. Each bullet point: 15-25 words with concrete information
+3. All content must be specific and avoid generic placeholders
+4. For "title_and_text" and "image_and_text" slides, write one short paragraph of 30-55 words
 5. Generate relevant imageKeyword for Unsplash (2-4 descriptive terms)
 
-OUTPUT FORMAT — Return ONLY valid JSON matching this exact structure:
+OUTPUT FORMAT - Return ONLY valid JSON matching this exact structure:
 {
   "presentationName": "A short name for the presentation file",
   "slides": [
@@ -55,22 +56,26 @@ OUTPUT FORMAT — Return ONLY valid JSON matching this exact structure:
     },
     {
       "title": "Key Point Title",
-      "content": ["Detailed explanation with specific information (15-25 words)", "Another point with evidence or examples (15-25 words)"],
+      "content": "A single short paragraph with concrete, topic-specific information and a clear takeaway for the audience.",
       "layout": "title_and_text",
       "imageKeyword": ""
     },
+    {
+      "title": "Three Key Pillars",
+      "columns": [
+        { "heading": "Pillar One", "text": "Short paragraph for the first column." },
+        { "heading": "Pillar Two", "text": "Short paragraph for the second column." },
+        { "heading": "Pillar Three", "text": "Short paragraph for the third column." }
+      ],
+      "layout": "three_columns",
+      "imageKeyword": ""
+    },
     {
       "title": "Visual Topic Title",
-      "content": ["Description of the visual content and its relevance (15-25 words)"],
+      "content": "A single short paragraph describing the visual, its relevance, and the main insight the audience should remember.",
       "layout": "image_and_text",
       "imageKeyword": "specific relevant search terms for Unsplash"
     },
-    {
-      "title": "References",
-      "content": ["Source Name - Description 2024", "Another Source - Relevant Publication"],
-      "layout": "references",
-      "imageKeyword": ""
-    },
     {
       "title": "Thank You",
       "subtitle": "Contact information or closing message",
@@ -83,17 +88,16 @@ OUTPUT FORMAT — Return ONLY valid JSON matching this exact structure:
 SLIDE ORDER RULES:
 - Slide 1: MUST be "title_subtitle" layout
 - Slide 2: MUST be "agenda" layout
-- Slides 3-7/8: Mix of "title_and_text" and "image_and_text" (model decides distribution)
-- Second-to-last slide: "references" (only if relevant to topic)
+- Slides 3-7/8: Mix of "title_and_text", "three_columns", and "image_and_text" (model decides distribution)
 - Last slide: MUST be "thank_you" layout
 
 LAYOUT VALUES (use EXACTLY these strings):
-- "title_subtitle" — Opening slide with title and subtitle
-- "agenda" — Table of contents / agenda items
-- "title_and_text" — Text-heavy content slide (no image needed)
-- "image_and_text" — Content slide with image (MUST have imageKeyword)
-- "references" — Sources and citations
-- "thank_you" — Closing slide
+- "title_subtitle" - Opening slide with title and subtitle
+- "agenda" - Table of contents / agenda items
+- "title_and_text" - Text-heavy content slide with one short paragraph
+- "three_columns" - A slide with exactly three columns, each with a heading and short paragraph
+- "image_and_text" - Content slide with one short paragraph and image (MUST have imageKeyword)
+- "thank_you" - Closing slide
 
 IMAGE KEYWORD RULES:
 - For "image_and_text" slides: ALWAYS provide 2-4 specific search terms
@@ -101,6 +105,13 @@ IMAGE KEYWORD RULES:
 - Examples: "modern office workspace", "artificial intelligence circuit", "sustainable green energy"
 - Leave empty ("") for all other layout types
 
+CONTENT RULES:
+- "agenda" and "references" should use arrays of short strings
+- "title_and_text" and "image_and_text" should use a single string paragraph, not an array
+- "three_columns" should use a "columns" array with exactly 3 objects, each containing "heading" and "text"
+- Keep paragraphs compact and presentation-friendly, not essay-length
+- Do NOT add a trailing references slide before "thank_you" unless the user explicitly asks for one
+
 VALIDATION:
 - Output MUST be valid JSON parseable by JSON.parse
 - NO markdown formatting, NO code blocks, NO explanatory text
@@ -116,6 +127,7 @@ export const VALID_LAYOUTS: LayoutType[] = [
   'title_subtitle',
   'agenda',
   'title_and_text',
+  'three_columns',
   'image_and_text',
   'references',
   'thank_you',
@@ -123,29 +135,30 @@ export const VALID_LAYOUTS: LayoutType[] = [
 
 /** Normalize a layout string from AI output to a valid LayoutType */
 export function normalizeLayout(layout: string, index: number, totalSlides: number): LayoutType {
-  // Direct match
   if (VALID_LAYOUTS.includes(layout as LayoutType)) {
     return layout as LayoutType;
   }
 
-  // Map old layout names to new ones
   const layoutMap: Record<string, LayoutType> = {
-    'titleContent': 'title_subtitle',
-    'title': 'title_subtitle',
-    'titleContentImage': 'image_and_text',
+    titleContent: 'title_subtitle',
+    title: 'title_subtitle',
+    titleContentImage: 'image_and_text',
     'content-image': 'image_and_text',
-    'twoContent': 'title_and_text',
+    twoContent: 'title_and_text',
     'two-column': 'title_and_text',
-    'bullets': 'title_and_text',
-    'section': 'title_and_text',
-    'chart': 'title_and_text',
+    columns: 'three_columns',
+    threeColumns: 'three_columns',
+    'three-column': 'three_columns',
+    three_column: 'three_columns',
+    bullets: 'title_and_text',
+    section: 'title_and_text',
+    chart: 'title_and_text',
   };
 
   if (layoutMap[layout]) {
     return layoutMap[layout];
   }
 
-  // Fallback based on position
   if (index === 0) return 'title_subtitle';
   if (index === 1) return 'agenda';
   if (index === totalSlides - 1) return 'thank_you';

lib/template-options.ts

@@ -0,0 +1,28 @@
+export const TEMPLATE_OPTIONS = [
+  { id: 'neobrutalism', label: 'Neo-Brutal' },
+  { id: 'galeryn', label: 'Galeryn' },
+  { id: 'noisy', label: 'Distortion' },
+] as const;
+
+export type TemplateOptionId = (typeof TEMPLATE_OPTIONS)[number]['id'];
+
+const TEMPLATE_ALIASES: Record<string, TemplateOptionId> = {
+  neobrutal: 'neobrutalism',
+  neobrutalism: 'neobrutalism',
+  galeryn: 'galeryn',
+  noisy: 'noisy',
+  distortion: 'noisy',
+};
+
+function sanitizeTemplateKey(value: string) {
+  return value.toLowerCase().replace(/[\s_-]+/g, '');
+}
+
+export function normalizeTemplateId(value?: string | null): TemplateOptionId | null {
+  if (!value) return null;
+  return TEMPLATE_ALIASES[sanitizeTemplateKey(value)] || null;
+}
+
+export function getTemplateLabel(templateId: TemplateOptionId) {
+  return TEMPLATE_OPTIONS.find((option) => option.id === templateId)?.label || templateId;
+}

lib/theme-system.ts

@@ -2,6 +2,7 @@
  * Theme System
  *
  * Supports three templates: neobrutalism, galeryn, and noisy.
+ * User-facing labels are Neo-Brutal, Galeryn, and Distortion.
  * Layout-specific styling is handled by the template config in data/templates/.
  * This file exists for backward compatibility with components that reference ThemeName.
  */
@@ -25,7 +26,7 @@ export interface Theme {
 export const themes: Theme[] = [
   {
     name: 'neobrutalism',
-    displayName: 'Neo Brutalism',
+    displayName: 'Neo-Brutal',
     default: {
       background: 'bg-[#F5F5F0]',
       textColor: 'text-black',
@@ -46,7 +47,7 @@ export const themes: Theme[] = [
   },
   {
     name: 'noisy',
-    displayName: 'Noisy',
+    displayName: 'Distortion',
     default: {
       background: 'bg-[#547BEE]',
       textColor: 'text-white',

lib/unsplash.ts

@@ -42,6 +42,8 @@ export interface UnsplashImage {
   user: {
     /** Display name of the photographer. */
     name: string;
+    /** Public username used for attribution links. */
+    username: string;
   };
 }
 

package-lock.json

@@ -24,7 +24,6 @@
         "clsx": "^2.1.1",
         "cohere-ai": "^7.20.0",
         "framer-motion": "^12.38.0",
-        "html2canvas": "^1.4.1",
         "jspdf": "^4.2.1",
         "lucide-react": "^0.577.0",
         "next": "16.2.1",

package.json

@@ -25,7 +25,6 @@
     "clsx": "^2.1.1",
     "cohere-ai": "^7.20.0",
     "framer-motion": "^12.38.0",
-    "html2canvas": "^1.4.1",
     "jspdf": "^4.2.1",
     "lucide-react": "^0.577.0",
     "next": "16.2.1",

package_tmp.json

@@ -25,8 +25,7 @@
     "clsx": "^2.1.1",
     "cohere-ai": "^7.20.0",
     "framer-motion": "^12.38.0",
-    "html2canvas": "^1.4.1",
-    "jspdf": "^4.2.1",
+    "jspdf": "^4.2.1",
     "lucide-react": "^0.577.0",
     "next": "16.2.1",
     "next-auth": "^4.24.13",