[V0_FILE]typescript:file="lib/types.ts" isEdit="true" isMerged="true" export interface SlideElement { id: string type: "text" | "image" | "title" content: string position: { x: number y: number width: number height: number } style?: { fontSize?: number fontWeight?: string textAlign?: "left" | "center" | "right" color?: string } } export interface Slide { id: string elements: SlideElement[] background?: string } export interface Theme { id: string name: string colors: { background: string text: string accent: string secondary: string } } [V0_FILE]typescript:file="lib/themes.ts" isMerged="true" import type { Theme } from "@/lib/types" export const themes: Theme[] = [ { id: "modern-blue", name: "Modern Blue", colors: { background: "#ffffff", text: "#1e293b", accent: "#3b82f6", secondary: "#e0f2fe", }, }, { id: "professional-dark", name: "Professional Dark", colors: { background: "#1e293b", text: "#f8fafc", accent: "#60a5fa", secondary: "#334155", }, }, { id: "warm-sunset", name: "Warm Sunset", colors: { background: "#fef3c7", text: "#78350f", accent: "#f59e0b", secondary: "#fde68a", }, }, { id: "fresh-green", name: "Fresh Green", colors: { background: "#f0fdf4", text: "#14532d", accent: "#22c55e", secondary: "#bbf7d0", }, }, { id: "elegant-purple", name: "Elegant Purple", colors: { background: "#faf5ff", text: "#581c87", accent: "#a855f7", secondary: "#e9d5ff", }, }, { id: "corporate-gray", name: "Corporate Gray", colors: { background: "#f8fafc", text: "#0f172a", accent: "#64748b", secondary: "#e2e8f0", }, }, ] export function getThemeById(id: string): Theme { return themes.find((theme) => theme.id === id) || themes[0] } [V0_FILE]typescriptreact:file="components/theme-selector.tsx" isMerged="true" "use client" import { themes } from "@/lib/themes" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Palette, Check } from "lucide-react" import { cn } from "@/lib/utils" interface ThemeSelectorProps { selectedThemeId: string onThemeChange: (themeId: string) => void } export function ThemeSelector({ selectedThemeId, onThemeChange }: ThemeSelectorProps) { return (

Choose a Theme

{themes.map((theme) => ( ))}

) } [V0_FILE]typescriptreact:file="components/slide-preview.tsx" isMerged="true" "use client" import type { Slide, Theme } from "@/lib/types" import { cn } from "@/lib/utils" interface SlidePreviewProps { slide: Slide theme: Theme className?: string } export function SlidePreview({ slide, theme, className }: SlidePreviewProps) { return (

{slide.title}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import "./globals.css" import { Toaster } from "sonner" const geistSans = Geist({ subsets: ["latin"], }) const geistMono = Geist_Mono({ subsets: ["latin"], }) export const metadata: Metadata = { title: "AI PowerPoint Generator", description: "Transform your ideas into professional presentations instantly", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/slide-editor.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEditor, EditorContent } from "@tiptap/react" import StarterKit from "@tiptap/starter-kit" import Placeholder from "@tiptap/extension-placeholder" import TextAlign from "@tiptap/extension-text-align" import { TextStyle } from "@tiptap/extension-text-style" import { Color } from "@tiptap/extension-color" import { Button } from "@/components/ui/button" import { Bold, Italic, List, AlignLeft, AlignCenter, AlignRight, Heading1, Heading2 } from "lucide-react" import { cn } from "@/lib/utils" interface SlideEditorProps { content: string onChange: (content: string) => void placeholder?: string className?: string } export function SlideEditor({ content, onChange, placeholder, className }: SlideEditorProps) { const editor = useEditor({ extensions: [ StarterKit.configure({ heading: { levels: [1, 2, 3], }, }), Placeholder.configure({ placeholder: placeholder || "Start typing...", }), TextAlign.configure({ types: ["heading", "paragraph"], }), TextStyle, Color, ], content, onUpdate: ({ editor }) => { onChange(editor.getHTML()) }, editorProps: { attributes: { class: "prose prose-sm max-w-none focus:outline-none min-h-[200px] px-4 py-3", }, }, }) if (!editor) { return null } return (

{/* Toolbar */}

{/* Editor Content */}

) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.0", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.76", "ai": "5.0.78", "pptxgenjs": "^3.12.0", "react-draggable": "^4.4.6", "react-rnd": "^10.4.13", "@tiptap/react": "3.7.2", "@tiptap/starter-kit": "3.7.2", "@tiptap/extension-placeholder": "3.7.2", "@tiptap/extension-text-align": "3.7.2", "@tiptap/extension-text-style": "3.7.2", "@tiptap/extension-color": "3.7.2", "@tiptap/extension-image": "3.7.2", "classnames": "2.5.1" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "@types/react-draggable": "^4.4.6", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/slide-canvas-editor.tsx" isMerged="true" "use client" import type React from "react" import { useEditor, EditorContent } from "@tiptap/react" import StarterKit from "@tiptap/starter-kit" import Placeholder from "@tiptap/extension-placeholder" import TextAlign from "@tiptap/extension-text-align" import { TextStyle } from "@tiptap/extension-text-style" import { Color } from "@tiptap/extension-color" import Image from "@tiptap/extension-image" import { Button } from "@/components/ui/button" import { Bold, Italic, List, AlignLeft, AlignCenter, AlignRight, Heading1, Heading2, ImagePlus } from "lucide-react" import { cn } from "@/lib/utils" import type { Theme } from "@/lib/types" import { useRef } from "react" interface SlideCanvasEditorProps { title: string content: string onTitleChange: (title: string) => void onContentChange: (content: string) => void theme: Theme className?: string } export function SlideCanvasEditor({ title, content, onTitleChange, onContentChange, theme, className, }: SlideCanvasEditorProps) { const fileInputRef = useRef(null) const editor = useEditor({ extensions: [ StarterKit.configure({ heading: { levels: [1, 2, 3], }, }), Placeholder.configure({ placeholder: "Add your content here...", }), TextAlign.configure({ types: ["heading", "paragraph"], }), TextStyle, Color, Image.configure({ inline: false, allowBase64: true, HTMLAttributes: { class: "rounded-lg max-w-full h-auto cursor-move", }, }), ], content, onUpdate: ({ editor }) => { onContentChange(editor.getHTML()) }, editorProps: { attributes: { class: "prose prose-lg max-w-none focus:outline-none min-h-[400px] px-12 py-8", style: `color: ${theme.textColor}`, }, }, }) const handleImageUpload = () => { fileInputRef.current?.click() } const handleFileChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] if (!file || !editor) return const reader = new FileReader() reader.onload = (event) => { const url = event.target?.result as string editor.chain().focus().setImage({ src: url }).run() } reader.readAsDataURL(file) } if (!editor) { return null } return (

{/* Toolbar */}

{/* Title Editor */}

onTitleChange(e.target.value)} className="w-full text-4xl font-bold bg-transparent border-none focus:outline-none focus:ring-0 placeholder:text-opacity-50" style={{ color: theme.primaryColor }} placeholder="Slide Title" />

{/* Content Editor */}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Loader2, Sparkles, Download, FileJson, Upload } from "lucide-react" import { SlideCanvas } from "@/components/slide-canvas" import { ThemeSelector } from "@/components/theme-selector" import { getThemeById } from "@/lib/themes" import { exportToPPTX } from "@/lib/export-pptx" import type { Slide } from "@/lib/types" import { cn } from "@/lib/utils" import { toast } from "sonner" export default function Home() { const [prompt, setPrompt] = useState("") const [slides, setSlides] = useState([]) const [isGenerating, setIsGenerating] = useState(false) const [isExporting, setIsExporting] = useState(false) const [isExportingJSON, setIsExportingJSON] = useState(false) const [error, setError] = useState("") const [selectedThemeId, setSelectedThemeId] = useState("modern-blue") const fileInputRef = useRef(null) const currentTheme = getThemeById(selectedThemeId) const handleGenerate = async () => { if (!prompt.trim()) { setError("Please enter a prompt") return } setIsGenerating(true) setError("") try { const response = await fetch("/api/generate-slides", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt }), }) if (!response.ok) { throw new Error("Failed to generate slides") } const data = await response.json() console.log("[v0] Received slides data:", data) const slidesWithIds = data.slides.map((slide: any, index: number) => ({ id: `slide-${index}`, elements: slide.elements || [], })) console.log("[v0] Processed slides:", slidesWithIds) setSlides(slidesWithIds) } catch (err) { setError("Failed to generate presentation. Please try again.") console.error("[v0] Generation error:", err) } finally { setIsGenerating(false) } } const handleExport = async () => { setIsExporting(true) try { await exportToPPTX(slides, currentTheme, "AI Generated Presentation") toast.success("Presentation exported successfully!") } catch (err) { console.error("[v0] Export error:", err) toast.error("Failed to export presentation. Please try again.") } finally { setIsExporting(false) } } const handleExportJSON = () => { setIsExportingJSON(true) try { const dataStr = JSON.stringify( { slides, theme: selectedThemeId, exportedAt: new Date().toISOString(), }, null, 2, ) const dataBlob = new Blob([dataStr], { type: "application/json" }) const url = URL.createObjectURL(dataBlob) const link = document.createElement("a") link.href = url link.download = `presentation-${Date.now()}.json` document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(url) toast.success("Slides exported as JSON successfully!") } catch (err) { console.error("[v0] JSON export error:", err) toast.error("Failed to export JSON. Please try again.") } finally { setIsExportingJSON(false) } } const handleImportJSON = (event: React.ChangeEvent) => { const file = event.target.files?.[0] if (!file) return const reader = new FileReader() reader.onload = (e) => { try { const content = e.target?.result as string const data = JSON.parse(content) if (data.slides && Array.isArray(data.slides)) { setSlides(data.slides) if (data.theme) { setSelectedThemeId(data.theme) } toast.success("Presentation imported successfully!") } else { toast.error("Invalid JSON format. Expected slides array.") } } catch (err) { console.error("[v0] JSON import error:", err) toast.error("Failed to import JSON. Please check the file format.") } } reader.readAsText(file) // Reset input so the same file can be selected again if (fileInputRef.current) { fileInputRef.current.value = "" } } return (

{/* Header */}

AI PowerPoint Generator

Transform your ideas into professional presentations instantly

{/* Prompt Input Section */} {slides.length === 0 && (

Describe your presentation

setPrompt(e.target.value)}
                  className="min-h-[160px] text-base resize-none"
                  disabled={isGenerating}
                />

{error && <p className="text-sm text-red-600 mt-3">{error}</p>}

<Button
                  onClick={handleGenerate}
                  disabled={isGenerating || !prompt.trim()}
                  size="lg"
                  className="w-full mt-6 text-base h-12"
                >
                  {isGenerating ? (
                    <>
                      <Loader2 className="w-5 h-5 mr-2 animate-spin" />
                      Generating your presentation...
                    </>
                  ) : (
                    <>
                      <Sparkles className="w-5 h-5 mr-2" />
                      Generate Presentation
                    </>
                  )}
                </Button>
              </div>

{/* Import JSON Section */}
              <div className="relative">
                <div className="absolute inset-0 flex items-center">
                  <div className="w-full border-t border-slate-300" />
                </div>
                <div className="relative flex justify-center text-sm">
                  <span className="px-4 bg-gradient-to-br from-slate-50 to-slate-100 text-slate-500">
                    Or import existing presentation
                  </span>
                </div>
              </div>

<div className="bg-white rounded-2xl shadow-lg p-8 border border-slate-200">
                <input
                  ref={fileInputRef}
                  type="file"
                  accept=".json"
                  onChange={handleImportJSON}
                  className="hidden"
                  id="json-upload"
                />
                <label htmlFor="json-upload">
                  <Button
                    type="button"
                    variant="outline"
                    size="lg"
                    className="w-full h-12 text-base border-2 border-dashed hover:border-blue-500 hover:bg-blue-50 bg-transparent"
                    onClick={() => fileInputRef.current?.click()}
                  >
                    <Upload className="w-5 h-5 mr-2" />
                    Import from JSON
                  </Button>
                </label>
                <p className="text-sm text-slate-500 text-center mt-3">
                  Upload a previously exported presentation JSON file
                </p>
              </div>
            </div>
          )}

{slides.length > 0 && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h2 className="text-2xl font-bold text-slate-900">Edit Your Presentation ({slides.length} slides)</h2>
                <div className="flex items-center gap-3">
                  <Button
                    onClick={handleExportJSON}
                    disabled={isExportingJSON}
                    size="default"
                    variant="outline"
                    className="border-blue-600 text-blue-600 hover:bg-blue-50 bg-transparent"
                  >
                    {isExportingJSON ? (
                      <>
                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                        Exporting...
                      </>
                    ) : (
                      <>
                        <FileJson className="w-4 h-4 mr-2" />
                        Export JSON
                      </>
                    )}
                  </Button>
                  <Button
                    onClick={handleExport}
                    disabled={isExporting}
                    size="default"
                    className="bg-green-600 hover:bg-green-700"
                  >
                    {isExporting ? (
                      <>
                        <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                        Exporting...
                      </>
                    ) : (
                      <>
                        <Download className="w-4 h-4 mr-2" />
                        Export to PPTX
                      </>
                    )}
                  </Button>
                  <ThemeSelector selectedThemeId={selectedThemeId} onThemeChange={setSelectedThemeId} />
                  <Button
                    onClick={() => {
                      setSlides([])
                      setPrompt("")
                    }}
                    variant="outline"
                  >
                    Start Over
                  </Button>
                </div>
              </div>

<SlideCanvas slides={slides} onSlidesChange={setSlides} theme={currentTheme} />
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="lib/export-pptx.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import PptxGenJS from "pptxgenjs"
import type { Slide, Theme, SlideElement } from "@/lib/types"

export async function exportToPPTX(slides: Slide[], theme: Theme, presentationTitle = "Presentation") {
  const pptx = new PptxGenJS()

// Set presentation properties
  pptx.author = "AI PowerPoint Generator"
  pptx.title = presentationTitle
  pptx.subject = "Generated Presentation"

const CANVAS_WIDTH = 960
  const CANVAS_HEIGHT = 540

// PowerPoint slide dimensions (inches) - 16:9 aspect ratio
  const PPTX_WIDTH = 10
  const PPTX_HEIGHT = 5.625

// Helper function to convert pixel coordinates to inches
  const pxToInches = (px: number, isWidth: boolean) => {
    if (isWidth) {
      return (px / CANVAS_WIDTH) * PPTX_WIDTH
    } else {
      return (px / CANVAS_HEIGHT) * PPTX_HEIGHT
    }
  }

// Helper function to strip HTML tags from content
  const stripHtml = (html: string) => {
    return html
      .replace(/<br\s*\/?>/gi, "\n")
      .replace(/<\/p>/gi, "\n")
      .replace(/<[^>]*>/g, "")
      .replace(/ /g, " ")
      .trim()
  }

// Process each slide
  slides.forEach((slide) => {
    const pptxSlide = pptx.addSlide()

// Set slide background
    pptxSlide.background = { color: theme.colors.background.replace("#", "") }

// Process each element in the slide
    slide.elements.forEach((element: SlideElement) => {
      const x = pxToInches(element.position.x, true)
      const y = pxToInches(element.position.y, false)
      const w = pxToInches(element.position.width, true)
      const h = pxToInches(element.position.height, false)

if (element.type === "image") {
        // Add image element
        if (element.content && element.content.startsWith("data:image")) {
          pptxSlide.addImage({
            data: element.content,
            x,
            y,
            w,
            h,
          })
        }
      } else if (element.type === "title") {
        // Add title element
        const cleanContent = stripHtml(element.content)
        pptxSlide.addText(cleanContent, {
          x,
          y,
          w,
          h,
          fontSize: element.style?.fontSize || 36,
          bold: element.style?.fontWeight === "bold" || element.style?.fontWeight === "700",
          color: (element.style?.color || theme.colors.accent).replace("#", ""),
          fontFace: "Arial",
          align: element.style?.textAlign || "left",
          valign: "top",
        })
      } else if (element.type === "text") {
        // Add text element
        const cleanContent = stripHtml(element.content)
        pptxSlide.addText(cleanContent, {
          x,
          y,
          w,
          h,
          fontSize: element.style?.fontSize || 18,
          bold: element.style?.fontWeight === "bold" || element.style?.fontWeight === "700",
          color: (element.style?.color || theme.colors.text).replace("#", ""),
          fontFace: "Arial",
          align: element.style?.textAlign || "left",
          valign: "top",
        })
      }
    })
  })

// Generate and download the file
  const fileName = `${presentationTitle.replace(/[^a-z0-9]/gi, "_").toLowerCase()}.pptx`
  await pptx.writeFile({ fileName })
}
[V0_FILE]typescript:file="app/api/generate-slides/route.ts" isEdit="true" isQuickEdit="true" isMerged="true"
import { generateText } from "ai"

export async function POST(req: Request) {
  try {
    const { prompt } = await req.json()

if (!prompt) {
      return Response.json({ error: "Prompt is required" }, { status: 400 })
    }

const { text } = await generateText({
      model: "openai/gpt-4o-mini",
      prompt: `You are a presentation expert. Generate a structured presentation based on the following prompt: "${prompt}"

Return a JSON array of slides. Each slide should have an "elements" array containing objects with:
- id: unique identifier (use element-1, element-2, etc.)
- type: "title", "text", or "image"
- content: The text content (for images, use a descriptive placeholder like "[Image: solar panels]")
- position: { x: number, y: number, width: number, height: number } in pixels
  - Slide canvas is 960x540 pixels (16:9 aspect ratio)
  - Title elements: typically x: 80, y: 50, width: 400, height: 70
  - Text elements: typically x: 80, y: 150, width: 350, height: 180
  - Image placeholders: typically x: 550, y: 150, width: 320, height: 240
- style: { fontSize: number, fontWeight: "normal" | "bold", textAlign: "left" | "center" }

Generate 5-8 slides that comprehensively cover the topic. For each slide:
- First element should be a title (type: "title", left-aligned, bold, fontSize: 42)
- Add 2-3 text elements with bullet points or paragraphs (fontSize: 18)
- Include image placeholders where relevant (type: "image") positioned on the right side

Return ONLY valid JSON, no markdown formatting or additional text.`,
    })

// Parse the AI response
    let slides
    try {
      const cleanedText = text
        .replace(/```json\n?/g, "")
        .replace(/```\n?/g, "")
        .trim()
      slides = JSON.parse(cleanedText)
    } catch (parseError) {
      console.error("[v0] Failed to parse AI response:", text)
      return Response.json({ error: "Failed to parse AI response" }, { status: 500 })
    }

return Response.json({ slides })
  } catch (error) {
    console.error("[v0] Error generating slides:", error)
    return Response.json({ error: "Failed to generate slides" }, { status: 500 })
  }
}
[V0_FILE]typescriptreact:file="components/draggable-element.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import cn from "classnames"

import { Rnd } from "react-rnd"
import { useState, useRef, useEffect } from "react"
import { Trash2, GripVertical } from "lucide-react"
import { Button } from "@/components/ui/button"
import type { SlideElement, Theme } from "@/lib/types"

interface DraggableElementProps {
  element: SlideElement
  onUpdate: (element: SlideElement) => void
  onDelete: () => void
  theme: Theme
  isSelected: boolean
  onSelect: () => void
}

export function DraggableElement({ element, onUpdate, onDelete, theme, isSelected, onSelect }: DraggableElementProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [content, setContent] = useState(element.content)
  const textareaRef = useRef<HTMLTextAreaElement>(null)

useEffect(() => {
    if (isEditing && textareaRef.current) {
      textareaRef.current.focus()
      textareaRef.current.select()
    }
  }, [isEditing])

const handleDoubleClick = () => {
    if (element.type !== "image") {
      setIsEditing(true)
    }
  }

const handleBlur = () => {
    setIsEditing(false)
    if (content !== element.content) {
      onUpdate({ ...element, content })
    }
  }

const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Escape") {
      setIsEditing(false)
      setContent(element.content)
    } else if (e.key === "Enter" && e.ctrlKey) {
      handleBlur()
    }
  }

const getTextColor = () => {
    return element.type === "title" ? theme.colors.accent : theme.colors.text
  }

return (
    <Rnd
      size={{ width: element.position.width, height: element.position.height }}
      position={{ x: element.position.x, y: element.position.y }}
      onDragStop={(e, d) => {
        onUpdate({
          ...element,
          position: { ...element.position, x: d.x, y: d.y },
        })
      }}
      onResizeStop={(e, direction, ref, delta, position) => {
        onUpdate({
          ...element,
          position: {
            x: position.x,
            y: position.y,
            width: Number.parseInt(ref.style.width),
            height: Number.parseInt(ref.style.height),
          },
        })
      }}
      bounds="parent"
      className={cn("group transition-all", isSelected ? "cursor-move" : "cursor-pointer", isEditing && "cursor-text")}
      style={{
        zIndex: isSelected ? 10 : 1,
      }}
      onClick={(e) => {
        e.stopPropagation()
        onSelect()
      }}
      enableResizing={isSelected}
      disableDragging={isEditing}
      resizeHandleStyles={{
        top: { cursor: "n-resize", display: isSelected ? "block" : "none" },
        right: { cursor: "e-resize", display: isSelected ? "block" : "none" },
        bottom: { cursor: "s-resize", display: isSelected ? "block" : "none" },
        left: { cursor: "w-resize", display: isSelected ? "block" : "none" },
        topRight: { cursor: "ne-resize", display: isSelected ? "block" : "none" },
        bottomRight: { cursor: "se-resize", display: isSelected ? "block" : "none" },
        bottomLeft: { cursor: "sw-resize", display: isSelected ? "block" : "none" },
        topLeft: { cursor: "nw-resize", display: isSelected ? "block" : "none" },
      }}
      resizeHandleClasses={{
        top: "resize-handle resize-handle-top",
        right: "resize-handle resize-handle-right",
        bottom: "resize-handle resize-handle-bottom",
        left: "resize-handle resize-handle-left",
        topRight: "resize-handle resize-handle-corner",
        bottomRight: "resize-handle resize-handle-corner",
        bottomLeft: "resize-handle resize-handle-corner",
        topLeft: "resize-handle resize-handle-corner",
      }}
    >
      <div
        className={cn(
          "relative w-full h-full rounded transition-all",
          isSelected && "ring-2 ring-blue-500 ring-offset-0",
        )}
        style={{
          backgroundColor: isSelected && element.type !== "image" ? "rgba(59, 130, 246, 0.05)" : "transparent",
        }}
      >
        {/* Drag Handle */}
        {isSelected && !isEditing && (
          <div className="absolute -top-8 left-0 right-0 flex items-center justify-between bg-blue-500 text-white px-2 py-1 rounded-t text-xs z-20 shadow-md">
            <div className="flex items-center gap-1">
              <GripVertical className="w-3 h-3" />
              <span className="capitalize">{element.type}</span>
            </div>
            <Button
              variant="ghost"
              size="sm"
              onClick={(e) => {
                e.stopPropagation()
                onDelete()
              }}
              className="h-5 w-5 p-0 hover:bg-red-600 text-white"
            >
              <Trash2 className="w-3 h-3" />
            </Button>
          </div>
        )}

{/* Content */}
        {element.type === "image" ? (
          <div className="w-full h-full rounded overflow-hidden">
            {element.content ? (
              <img
                src={element.content || "/placeholder.svg"}
                alt="Slide image"
                className="w-full h-full object-cover"
                draggable={false}
              />
            ) : (
              <div
                className="w-full h-full bg-slate-200 rounded flex items-center justify-center text-slate-500 text-sm border-2 border-dashed border-slate-300"
                style={{ backgroundColor: theme.colors.secondary + "20" }}
              >
                Image Placeholder
              </div>
            )}
          </div>
        ) : isEditing ? (
          <textarea
            ref={textareaRef}
            value={content}
            onChange={(e) => setContent(e.target.value)}
            onBlur={handleBlur}
            onKeyDown={handleKeyDown}
            className="w-full h-full resize-none border-2 border-blue-500 rounded p-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
            style={{
              fontSize: element.style?.fontSize || (element.type === "title" ? 32 : 20),
              fontWeight: element.style?.fontWeight || (element.type === "title" ? "bold" : "normal"),
              textAlign: element.style?.textAlign || "left",
              color: getTextColor(),
              lineHeight: "1.4",
            }}
          />
        ) : (
          <div
            onDoubleClick={handleDoubleClick}
            className="w-full h-full p-3 cursor-text overflow-auto rounded"
            style={{
              fontSize: element.style?.fontSize || (element.type === "title" ? 32 : 20),
              fontWeight: element.style?.fontWeight || (element.type === "title" ? "bold" : "normal"),
              textAlign: element.style?.textAlign || "left",
              color: getTextColor(),
              whiteSpace: "pre-wrap",
              wordBreak: "break-word",
              lineHeight: "1.4",
            }}
          >
            {element.content || "Double-click to edit"}
          </div>
        )}
      </div>
    </Rnd>
  )
}
[V0_FILE]typescriptreact:file="components/slide-canvas.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { ChevronLeft, ChevronRight, Plus, Trash2, Type, ImageIcon, Loader2 } from "lucide-react"
import { DraggableElement } from "@/components/draggable-element"
import type { Slide, SlideElement, Theme } from "@/lib/types"
import { cn } from "@/lib/utils"

interface SlideCanvasProps {
  slides: Slide[]
  onSlidesChange: (slides: Slide[]) => void
  theme: Theme
}

export function SlideCanvas({ slides, onSlidesChange, theme }: SlideCanvasProps) {
  const [currentSlideIndex, setCurrentSlideIndex] = useState(0)
  const [selectedElementId, setSelectedElementId] = useState<string | null>(null)
  const [isUploadingImage, setIsUploadingImage] = useState(false)

const currentSlide = slides[currentSlideIndex]

const updateElement = (elementId: string, updatedElement: SlideElement) => {
    const updatedSlides = slides.map((slide, index) =>
      index === currentSlideIndex
        ? {
            ...slide,
            elements: slide.elements.map((el) => (el.id === elementId ? updatedElement : el)),
          }
        : slide,
    )
    onSlidesChange(updatedSlides)
  }

const deleteElement = (elementId: string) => {
    const updatedSlides = slides.map((slide, index) =>
      index === currentSlideIndex
        ? {
            ...slide,
            elements: slide.elements.filter((el) => el.id !== elementId),
          }
        : slide,
    )
    onSlidesChange(updatedSlides)
    setSelectedElementId(null)
  }

const addTextElement = () => {
    const newElement: SlideElement = {
      id: `element-${Date.now()}`,
      type: "text",
      content: "New text box",
      position: { x: 100, y: 200, width: 280, height: 100 },
      style: { fontSize: 20, fontWeight: "normal", textAlign: "left" },
    }
    const updatedSlides = slides.map((slide, index) =>
      index === currentSlideIndex ? { ...slide, elements: [...slide.elements, newElement] } : slide,
    )
    onSlidesChange(updatedSlides)
    setSelectedElementId(newElement.id)
  }

const compressImage = (file: File): Promise<string> => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onload = (e) => {
        const img = new Image()
        img.onload = () => {
          const canvas = document.createElement("canvas")
          const ctx = canvas.getContext("2d")
          if (!ctx) {
            reject(new Error("Could not get canvas context"))
            return
          }

let width = img.width
          let height = img.height
          const maxWidth = 1920
          const maxHeight = 1080

if (width > maxWidth || height > maxHeight) {
            const ratio = Math.min(maxWidth / width, maxHeight / height)
            width = width * ratio
            height = height * ratio
          }

canvas.width = width
          canvas.height = height
          ctx.drawImage(img, 0, 0, width, height)

const compressedDataUrl = canvas.toDataURL("image/jpeg", 0.8)
          resolve(compressedDataUrl)
        }
        img.onerror = () => reject(new Error("Failed to load image"))
        img.src = e.target?.result as string
      }
      reader.onerror = () => reject(new Error("Failed to read file"))
      reader.readAsDataURL(file)
    })
  }

const addImageElement = async () => {
    const input = document.createElement("input")
    input.type = "file"
    input.accept = "image/*"
    input.onchange = async (e) => {
      const file = (e.target as HTMLInputElement).files?.[0]
      if (file) {
        setIsUploadingImage(true)
        try {
          const compressedImage = await compressImage(file)
          const newElement: SlideElement = {
            id: `element-${Date.now()}`,
            type: "image",
            content: compressedImage,
            position: { x: 300, y: 150, width: 320, height: 240 },
          }
          const updatedSlides = slides.map((slide, index) =>
            index === currentSlideIndex ? { ...slide, elements: [...slide.elements, newElement] } : slide,
          )
          onSlidesChange(updatedSlides)
          setSelectedElementId(newElement.id)
        } catch (error) {
          console.error("[v0] Error compressing image:", error)
          alert("Failed to upload image. Please try a different image.")
        } finally {
          setIsUploadingImage(false)
        }
      }
    }
    input.click()
  }

const addSlide = () => {
    const newSlide: Slide = {
      id: `slide-${Date.now()}`,
      elements: [
        {
          id: `element-${Date.now()}`,
          type: "title",
          content: "New Slide",
          position: { x: 80, y: 50, width: 500, height: 80 },
          style: { fontSize: 42, fontWeight: "bold", textAlign: "left" },
        },
      ],
    }
    onSlidesChange([...slides, newSlide])
    setCurrentSlideIndex(slides.length)
  }

const deleteSlide = () => {
    if (slides.length === 1) return
    const updatedSlides = slides.filter((_, index) => index !== currentSlideIndex)
    onSlidesChange(updatedSlides)
    setCurrentSlideIndex(Math.max(0, currentSlideIndex - 1))
  }

return (
    <div className="flex gap-6">
      {/* Slide Thumbnails */}
      <div className="w-48 flex-shrink-0">
        <div className="sticky top-6 space-y-3">
          <h3 className="text-sm font-semibold text-slate-700 mb-3">Slides</h3>
          <div className="space-y-2 max-h-[600px] overflow-y-auto">
            {slides.map((slide, index) => (
              <button
                key={slide.id}
                onClick={() => setCurrentSlideIndex(index)}
                className={cn(
                  "w-full text-left p-3 rounded-lg border-2 transition-all hover:border-blue-300",
                  currentSlideIndex === index ? "border-blue-500 bg-blue-50" : "border-slate-200 bg-white",
                )}
              >
                <div className="text-xs font-medium text-slate-500 mb-1">Slide {index + 1}</div>
                <div className="text-sm font-medium text-slate-900 truncate">
                  {slide.elements.find((el) => el.type === "title")?.content || "Untitled"}
                </div>
              </button>
            ))}
          </div>
          <Button onClick={addSlide} variant="outline" size="sm" className="w-full bg-transparent">
            <Plus className="w-4 h-4 mr-2" />
            Add Slide
          </Button>
        </div>
      </div>

{/* Main Canvas */}
      <div className="flex-1">
        <div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden">
          {/* Canvas Header */}
          <div className="bg-slate-50 border-b px-6 py-4 flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setCurrentSlideIndex(Math.max(0, currentSlideIndex - 1))}
                disabled={currentSlideIndex === 0}
              >
                <ChevronLeft className="w-4 h-4" />
              </Button>
              <span className="text-sm font-medium text-slate-700">
                Slide {currentSlideIndex + 1} of {slides.length}
              </span>
              <Button
                variant="ghost"
                size="sm"
                onClick={() => setCurrentSlideIndex(Math.min(slides.length - 1, currentSlideIndex + 1))}
                disabled={currentSlideIndex === slides.length - 1}
              >
                <ChevronRight className="w-4 h-4" />
              </Button>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="outline" size="sm" onClick={addTextElement}>
                <Type className="w-4 h-4 mr-2" />
                Add Text
              </Button>
              <Button variant="outline" size="sm" onClick={addImageElement} disabled={isUploadingImage}>
                {isUploadingImage ? (
                  <>
                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                    Uploading...
                  </>
                ) : (
                  <>
                    <ImageIcon className="w-4 h-4 mr-2" />
                    Add Image
                  </>
                )}
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={deleteSlide}
                disabled={slides.length === 1}
                className="text-red-600 hover:text-red-700 hover:bg-red-50"
              >
                <Trash2 className="w-4 h-4 mr-2" />
                Delete
              </Button>
            </div>
          </div>

{/* Canvas Content */}
          <div className="p-8 bg-slate-100 flex items-center justify-center">
            <div
              className="relative shadow-2xl"
              style={{
                width: 960,
                height: 540,
                backgroundColor: theme.colors.background,
              }}
              onClick={() => setSelectedElementId(null)}
            >
              {currentSlide.elements.map((element) => (
                <DraggableElement
                  key={element.id}
                  element={element}
                  onUpdate={(updated) => updateElement(element.id, updated)}
                  onDelete={() => deleteElement(element.id)}
                  theme={theme}
                  isSelected={selectedElementId === element.id}
                  onSelect={() => setSelectedElementId(element.id)}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.145 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.145 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
  --font-sans: "Geist", "Geist Fallback";
  --font-mono: "Geist Mono", "Geist Mono Fallback";
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Added styles for Tiptap image resizing and dragging */
.ProseMirror img {
  max-width: 100%;
  height: auto;
  cursor: move;
  border-radius: 0.5rem;
  transition: all 0.2s;
  /* Make images resizable */
  resize: both;
  overflow: hidden;
}

.ProseMirror img:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ProseMirror img.ProseMirror-selectednode {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* Made resize handles much more subtle and only visible on hover */
.resize-handle {
  position: absolute;
  background: rgba(59, 130, 246, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  z-index: 30;
  transition: all 0.2s ease;
  opacity: 0;
}

/* Show handles on hover */
.group:hover .resize-handle {
  opacity: 1;
}

.resize-handle:hover {
  background: rgba(37, 99, 235, 0.8);
  transform: scale(1.15);
  opacity: 1;
}

/* Reduced size of edge handles from 50px to 30px */
.resize-handle-top,
.resize-handle-bottom {
  width: 30px;
  height: 4px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
}

.resize-handle-top {
  top: -2px;
}

.resize-handle-bottom {
  bottom: -2px;
}

.resize-handle-left,
.resize-handle-right {
  width: 4px;
  height: 30px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 2px;
}

.resize-handle-left {
  left: -2px;
}

.resize-handle-right {
  right: -2px;
}

/* Reduced corner handle size from 10px to 8px */
.resize-handle-corner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

/* Fixed corner handle positioning to be at actual corners */
.resize-handle-corner:nth-of-type(1) {
  top: -4px;
  left: -4px;
}

.resize-handle-corner:nth-of-type(2) {
  top: -4px;
  right: -4px;
}

.resize-handle-corner:nth-of-type(3) {
  bottom: -4px;
  right: -4px;
}

.resize-handle-corner:nth-of-type(4) {
  bottom: -4px;
  left: -4px;
}</article></body></html>

About

Tags

Share

About

Tags

Share

More from shrix1

About

Tags

Share

About

Tags

Share

More from shrix1