[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "XOXO - PDF Viewer & Editor", description: "View and edit your PDF documents with ease", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 325 90% 70%; --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 325 90% 70%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 325 90% 70%; --primary-foreground: 355.7 100% 97.3%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 325 90% 70%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .pdf-container { width: 100%; height: 100%; overflow: auto; } .pdf-page { position: relative; margin: 10px auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); background-color: white; } .pdf-canvas-layer { position: absolute; top: 0; left: 0; } .annotation-layer { position: absolute; top: 0; left: 0; pointer-events: none; } .drawing-canvas { position: absolute; top: 0; left: 0; cursor: crosshair; } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, "fade-in": { from: { opacity: "0" }, to: { opacity: "1" }, }, "fade-out": { from: { opacity: "1" }, to: { opacity: "0" }, }, "slide-up": { from: { transform: "translateY(10px)", opacity: "0" }, to: { transform: "translateY(0)", opacity: "1" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", "fade-in": "fade-in 0.3s ease-in-out", "fade-out": "fade-out 0.3s ease-in-out", "slide-up": "slide-up 0.3s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/pdf-uploader.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { FileUp, X } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface PDFUploaderProps { isOpen: boolean onClose: () => void onUpload: (file: File) => void } export function PDFUploader({ isOpen, onClose, onUpload }: PDFUploaderProps) { const [isDragging, setIsDragging] = useState(false) const [selectedFile, setSelectedFile] = useState(null) const fileInputRef = useRef(null) const { toast } = useToast() const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = () => { setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) const files = e.dataTransfer.files if (files.length > 0) { validateAndSetFile(files[0]) } } const handleFileChange = (e: React.ChangeEvent) => { if (e.target.files && e.target.files.length > 0) { validateAndSetFile(e.target.files[0]) } } const validateAndSetFile = (file: File) => { if (file.type !== "application/pdf") { toast({ title: "Invalid file type", description: "Please select a PDF file.", variant: "destructive", }) return } setSelectedFile(file) } const handleUpload = () => { if (selectedFile) { onUpload(selectedFile) setSelectedFile(null) } } const handleCancel = () => { setSelectedFile(null) onClose() } return ( ) } [V0_FILE]typescriptreact:file="components/ui/dialog.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as DialogPrimitive from "@radix-ui/react-dialog" import { X } from "lucide-react" import { cn } from "@/lib/utils" const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} Close )) DialogContent.displayName = DialogPrimitive.Content.displayName const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (

) DialogHeader.displayName = "DialogHeader" const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (

) DialogFooter.displayName = "DialogFooter" const DialogTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogTitle.displayName = DialogPrimitive.Title.displayName const DialogDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) DialogDescription.displayName = DialogPrimitive.Description.displayName export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } [V0_FILE]typescriptreact:file="components/ui/popover.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as PopoverPrimitive from "@radix-ui/react-popover" import { cn } from "@/lib/utils" const Popover = PopoverPrimitive.Root const PopoverTrigger = PopoverPrimitive.Trigger const PopoverContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( )) PopoverContent.displayName = PopoverPrimitive.Content.displayName export { Popover, PopoverTrigger, PopoverContent } [V0_FILE]typescriptreact:file="components/ui/tabs.tsx" isEdit="true" isMerged="true" "use client" import * as React from "react" import * as TabsPrimitive from "@radix-ui/react-tabs" import { cn } from "@/lib/utils" const Tabs = TabsPrimitive.Root const TabsList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsList.displayName = TabsPrimitive.List.displayName const TabsTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsTrigger.displayName = TabsPrimitive.Trigger.displayName const TabsContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) TabsContent.displayName = TabsPrimitive.Content.displayName export { Tabs, TabsList, TabsTrigger, TabsContent } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "dependencies": { "framer-motion": "^10.16.4", "react-pdf": "^7.5.1" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { PlusCircle } from "lucide-react" import { PDFList } from "@/components/pdf-list" import { PDFUploader } from "@/components/pdf-uploader" import { useToast } from "@/hooks/use-toast" import { motion } from "framer-motion" export default function Home() { const [pdfs, setPdfs] = useState([]) const [isUploaderOpen, setIsUploaderOpen] = useState(false) const { toast } = useToast() // Load PDFs from localStorage on component mount useEffect(() => { const storedPdfs = localStorage.getItem("pdfs") if (storedPdfs) { setPdfs(JSON.parse(storedPdfs)) } }, []) // Save PDFs to localStorage whenever they change useEffect(() => { localStorage.setItem("pdfs", JSON.stringify(pdfs)) }, [pdfs]) const handleAddPDF = (file: File) => { // Create a new PDF file entry const reader = new FileReader() reader.onload = (e) => { const newPdf: PDFFile = { id: Date.now().toString(), name: file.name, data: e.target?.result as string, dateAdded: new Date().toISOString(), } setPdfs((prev) => [...prev, newPdf]) setIsUploaderOpen(false) toast({ title: "PDF Added", description: `${file.name} has been added to your collection.`, }) } reader.readAsDataURL(file) } const handleDeletePDF = (id: string) => { setPdfs((prev) => prev.filter((pdf) => pdf.id !== id)) toast({ title: "PDF Deleted", description: "The PDF has been removed from your collection.", }) } return (

XOXO PDF Manager

setIsUploaderOpen(false)} onUpload={handleAddPDF} /> ) } export interface PDFFile { id: string name: string data: string dateAdded: string } [V0_FILE]typescriptreact:file="app/home/page.tsx.bak" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { PlusCircle } from "lucide-react" import { PDFList } from "@/components/pdf-list" import { PDFUploader } from "@/components/pdf-uploader" import { useToast } from "@/hooks/use-toast" import { motion } from "framer-motion" export default function HomePage() { const [pdfs, setPdfs] = useState([]) const [isUploaderOpen, setIsUploaderOpen] = useState(false) const { toast } = useToast() // Load PDFs from localStorage on component mount useEffect(() => { const storedPdfs = localStorage.getItem("pdfs") if (storedPdfs) { setPdfs(JSON.parse(storedPdfs)) } }, []) // Save PDFs to localStorage whenever they change useEffect(() => { localStorage.setItem("pdfs", JSON.stringify(pdfs)) }, [pdfs]) const handleAddPDF = (file: File) => { // Create a new PDF file entry const reader = new FileReader() reader.onload = (e) => { const newPdf: PDFFile = { id: Date.now().toString(), name: file.name, data: e.target?.result as string, dateAdded: new Date().toISOString(), } setPdfs((prev) => [...prev, newPdf]) setIsUploaderOpen(false) toast({ title: "PDF Added", description: `${file.name} has been added to your collection.`, }) } reader.readAsDataURL(file) } const handleDeletePDF = (id: string) => { setPdfs((prev) => prev.filter((pdf) => pdf.id !== id)) toast({ title: "PDF Deleted", description: "The PDF has been removed from your collection.", }) } return (

XOXO PDF Manager

setIsUploaderOpen(false)} onUpload={handleAddPDF} /> ) } export interface PDFFile { id: string name: string data: string dateAdded: string } [V0_FILE]typescriptreact:file="app/home/page.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { PlusCircle } from "lucide-react" import { PDFList } from "@/components/pdf-list" import { PDFUploader } from "@/components/pdf-uploader" import { useToast } from "@/hooks/use-toast" import { motion } from "framer-motion" export default function HomePage() { const [pdfs, setPdfs] = useState([]) const [isUploaderOpen, setIsUploaderOpen] = useState(false) const { toast } = useToast() // Load PDFs from localStorage on component mount useEffect(() => { const storedPdfs = localStorage.getItem("pdfs") if (storedPdfs) { setPdfs(JSON.parse(storedPdfs)) } }, []) // Save PDFs to localStorage whenever they change useEffect(() => { localStorage.setItem("pdfs", JSON.stringify(pdfs)) }, [pdfs]) const handleAddPDF = (file: File) => { // Create a new PDF file entry const reader = new FileReader() reader.onload = (e) => { const newPdf: PDFFile = { id: Date.now().toString(), name: file.name, data: e.target?.result as string, dateAdded: new Date().toISOString(), } setPdfs((prev) => [...prev, newPdf]) setIsUploaderOpen(false) toast({ title: "PDF Added", description: `${file.name} has been added to your collection.`, }) } reader.readAsDataURL(file) } const handleDeletePDF = (id: string) => { setPdfs((prev) => prev.filter((pdf) => pdf.id !== id)) toast({ title: "PDF Deleted", description: "The PDF has been removed from your collection.", }) } return (

XOXO PDF Manager

setIsUploaderOpen(false)} onUpload={handleAddPDF} /> ) } export interface PDFFile { id: string name: string data: string dateAdded: string } [V0_FILE]typescriptreact:file="components/pdf-list.tsx" isEdit="true" isMerged="true" "use client" import { useRouter } from "next/navigation" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { FileText, MoreVertical, Trash2, Download, Calendar } from "lucide-react" import type { PDFFile } from "@/app/page" import { motion } from "framer-motion" interface PDFListProps { pdfs: PDFFile[] onDelete: (id: string) => void } export function PDFList({ pdfs, onDelete }: PDFListProps) { const router = useRouter() const handleOpenPDF = (id: string) => { router.push(`/editor/${id}`) } const handleDownloadPDF = (pdf: PDFFile) => { const link = document.createElement("a") link.href = pdf.data link.download = pdf.name document.body.appendChild(link) link.click() document.body.removeChild(link) } const formatDate = (dateString: string) => { const date = new Date(dateString) return date.toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric", }) } return (

{pdfs.length === 0 ? (

No PDFs yet

Add a PDF to get started.

) : ( pdfs.map((pdf, index) => (

handleOpenPDF(pdf.id)}>

{pdf.name}

Added {formatDate(pdf.dateAdded)}

e.stopPropagation()}> handleDownloadPDF(pdf)}> Download onDelete(pdf.id)} className="text-destructive focus:text-destructive" > Delete

)) )}

) } [V0_FILE]typescriptreact:file="app/editor/loading.tsx" isEdit="true" isMerged="true" import { Loader2 } from "lucide-react" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/editor/[id]/loading.tsx" isEdit="true" isMerged="true" import { Loader2 } from "lucide-react" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="hooks/use-mobile.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" export function useMobile(breakpoint = 768): boolean { const [isMobile, setIsMobile] = useState(false) useEffect(() => { // Check if window is defined (browser environment) if (typeof window === "undefined") return // Initial check setIsMobile(window.innerWidth < breakpoint) // Handler for window resize const handleResize = () => { setIsMobile(window.innerWidth < breakpoint) } // Add event listener window.addEventListener("resize", handleResize) // Clean up return () => { window.removeEventListener("resize", handleResize) } }, [breakpoint]) return isMobile } [V0_FILE]typescriptreact:file="components/editor-toolbar.tsx" isEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { MousePointer, Pencil, Type, Eraser, Highlighter, FilePlus } from "lucide-react" import { motion } from "framer-motion" import { useMobile } from "@/hooks/use-mobile" interface EditorToolbarProps { currentTool: string onToolChange: (tool: string) => void currentColor: string onColorChange: (color: string) => void } export function EditorToolbar({ currentTool, onToolChange, currentColor, onColorChange }: EditorToolbarProps) { const isMobile = useMobile() const tools = [ { id: "cursor", icon: MousePointer, label: "Select" }, { id: "pen", icon: Pencil, label: "Pen" }, { id: "text", icon: Type, label: "Text" }, { id: "eraser", icon: Eraser, label: "Eraser" }, { id: "highlight", icon: Highlighter, label: "Highlight" }, { id: "add-page", icon: FilePlus, label: "Add Page" }, ] const colors = [ { id: "pink", value: "#ff3399" }, { id: "blue", value: "#0099ff" }, { id: "green", value: "#00cc66" }, { id: "yellow", value: "#ffcc00" }, { id: "red", value: "#ff3333" }, { id: "black", value: "#000000" }, ] // Mobile toolbar (bottom of screen) if (isMobile) { return (

{tools.map((tool) => (

{tool.id === "pen" || tool.id === "highlight" ? (

{colors.map((color) => (

) : ( )}

))}

) } // Desktop toolbar (left side) return (

{tools.map((tool) => (

{tool.id === "pen" || tool.id === "highlight" ? (

{tool.label}

{colors.map((color) => (

) : (

{tool.label}

)}

))}

) } [V0_FILE]typescriptreact:file="utils/path-smoothing.ts" /** * Smooths a drawing path using Catmull-Rom spline interpolation * @param points The original points array * @param tension Controls how tight the curve is (0-1, default 0.5) * @param segments Number of segments to create between points * @returns Smoothed path with interpolated points */ export function smoothPath( points: { x: number; y: number }[], tension = 0.5, segments = 3, ): { x: number; y: number }[] { if (points.length < 3) return points const result: { x: number; y: number }[] = [] // Add the first point result.push(points[0]) // Process middle points with Catmull-Rom spline for (let i = 0; i < points.length - 2; i++) { const p0 = i > 0 ? points[i - 1] : points[i] const p1 = points[i] const p2 = points[i + 1] const p3 = i < points.length - 2 ? points[i + 2] : p2 // Add interpolated points between p1 and p2 for (let t = 1; t <= segments; t++) { const t1 = t / (segments + 1) // Catmull-Rom spline calculation const t2 = t1 * t1 const t3 = t2 * t1 const x = 0.5 * (2 * p1.x + (-p0.x + p2.x) * t1 + (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 + (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3) const y = 0.5 * (2 * p1.y + (-p0.y + p2.y) * t1 + (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 + (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3) result.push({ x, y }) } // Add the current point result.push(p1) } // Add the last point result.push(points[points.length - 1]) return result } /** * Simplifies a path by removing points that are too close together * @param points The original points array * @param minDistance Minimum distance between points * @returns Simplified path */ export function simplifyPath(points: { x: number; y: number }[], minDistance = 2): { x: number; y: number }[] { if (points.length <= 2) return points const result: { x: number; y: number }[] = [points[0]] for (let i = 1; i < points.length; i++) { const prev = result[result.length - 1] const curr = points[i] const distance = Math.sqrt(Math.pow(curr.x - prev.x, 2) + Math.pow(curr.y - prev.y, 2)) if (distance >= minDistance) { result.push(curr) } } return result } [V0_FILE]typescriptreact:file="hooks/use-touch-drawing.ts" "use client" import type React from "react" import { useState, useRef } from "react" import { simplifyPath, smoothPath } from "@/utils/path-smoothing" interface Point { x: number y: number } interface TouchDrawingOptions { smoothing?: boolean simplify?: boolean touchOffset?: { x: number; y: number } minDistance?: number smoothingTension?: number smoothingSegments?: number } export function useTouchDrawing(options: TouchDrawingOptions = {}) { const { smoothing = true, simplify = true, touchOffset = { x: 0, y: -10 }, // Offset cursor slightly above touch point minDistance = 2, smoothingTension = 0.5, smoothingSegments = 3, } = options const [isDrawing, setIsDrawing] = useState(false) const [currentPath, setCurrentPath] = useState([]) const lastPointRef = useRef(null) const canvasRef = useRef(null) // Clear the canvas const clearCanvas = () => { if (!canvasRef.current) return const ctx = canvasRef.current.getContext("2d") if (ctx) { ctx.clearRect(0, 0, canvasRef.current.width, canvasRef.current.height) } } // Get position with touch offset applied const getAdjustedPosition = (clientX: number, clientY: number): Point => { if (!canvasRef.current) return { x: 0, y: 0 } const canvas = canvasRef.current const rect = canvas.getBoundingClientRect() return { x: (clientX - rect.left + touchOffset.x) * (canvas.width / rect.width), y: (clientY - rect.top + touchOffset.y) * (canvas.height / rect.height), } } // Start drawing const startDrawing = (e: React.TouchEvent | React.MouseEvent) => { e.preventDefault() // Get position based on event type let position: Point if ("touches" in e) { // Touch event position = getAdjustedPosition(e.touches[0].clientX, e.touches[0].clientY) } else { // Mouse event position = getAdjustedPosition(e.clientX, e.clientY) } setIsDrawing(true) setCurrentPath([position]) lastPointRef.current = position // Start drawing on canvas if (canvasRef.current) { const ctx = canvasRef.current.getContext("2d") if (ctx) { ctx.beginPath() ctx.moveTo(position.x, position.y) } } } // Continue drawing const draw = (e: React.TouchEvent | React.MouseEvent) => { if (!isDrawing) return e.preventDefault() // Get position based on event type let position: Point if ("touches" in e) { // Touch event - prevent scrolling position = getAdjustedPosition(e.touches[0].clientX, e.touches[0].clientY) } else { // Mouse event position = getAdjustedPosition(e.clientX, e.clientY) } // Add point to path setCurrentPath((prev) => [...prev, position]) // Draw line on canvas if (canvasRef.current && lastPointRef.current) { const ctx = canvasRef.current.getContext("2d") if (ctx) { ctx.lineTo(position.x, position.y) ctx.stroke() } } lastPointRef.current = position } // End drawing const endDrawing = () => { if (!isDrawing) return setIsDrawing(false) // Process the path if needed let finalPath = [...currentPath] if (simplify && finalPath.length > 2) { finalPath = simplifyPath(finalPath, minDistance) } if (smoothing && finalPath.length > 2) { finalPath = smoothPath(finalPath, smoothingTension, smoothingSegments) } // Reset for next drawing lastPointRef.current = null return finalPath } return { isDrawing, currentPath, canvasRef, startDrawing, draw, endDrawing, clearCanvas, } } [V0_FILE]typescriptreact:file="components/drawing-indicator.tsx" "use client" import { motion, AnimatePresence } from "framer-motion" interface DrawingIndicatorProps { isVisible: boolean tool: string color: string } export function DrawingIndicator({ isVisible, tool, color }: DrawingIndicatorProps) { return ( {isVisible && (

{tool === "pen" ? "Drawing" : "Highlighting"} )} ) } [V0_FILE]typescriptreact:file="app/editor/[id]/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { PDFViewer } from "@/components/pdf-viewer" import { EditorToolbar } from "@/components/editor-toolbar" import { DrawingIndicator } from "@/components/drawing-indicator" import { useToast } from "@/hooks/use-toast" import { ArrowLeft, Save } from "lucide-react" import { motion } from "framer-motion" import { useMobile } from "@/hooks/use-mobile" export default function EditorPage({ params }: { params: { id: string } }) { const router = useRouter() const { toast } = useToast() const pdfId = params.id const isMobile = useMobile() const [pdfData, setPdfData] = useState(null) const [pdfName, setPdfName] = useState("") const [currentTool, setCurrentTool] = useState("cursor") const [currentColor, setCurrentColor] = useState("#ff3399") const [isDrawing, setIsDrawing] = useState(false) const [annotations, setAnnotations] = useState([]) // Load PDF data from localStorage useEffect(() => { if (!pdfId) { router.push("/") return } const storedPdfs = localStorage.getItem("pdfs") if (storedPdfs) { const pdfs = JSON.parse(storedPdfs) const pdf = pdfs.find((p: any) => p.id === pdfId) if (pdf) { setPdfData(pdf.data) setPdfName(pdf.name) } else { router.push("/") } } else { router.push("/") } }, [pdfId, router]) const handleSave = () => { // In a real app, we would save the annotations to the PDF // For this demo, we'll just show a toast toast({ title: "PDF Saved", description: "Your changes have been saved.", }) } const handleToolChange = (tool: string) => { setCurrentTool(tool) // Reset drawing state when changing tools setIsDrawing(false) } const handleColorChange = (color: string) => { setCurrentColor(color) } const handleAddAnnotation = (annotation: Annotation) => { setAnnotations((prev) => [...prev, annotation]) } // Track drawing state for the indicator const handleDrawingStateChange = (drawing: boolean) => { setIsDrawing(drawing) } return (

{pdfName}

{!isMobile && ( )}

{pdfData && ( )}

{isMobile && ( <> )} ) } export interface Annotation { id: string type: string points?: { x: number; y: number }[] text?: string position?: { x: number; y: number } color: string pageIndex: number } [V0_FILE]typescriptreact:file="components/pdf-viewer.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Document, Page, pdfjs } from "react-pdf" import type { Annotation } from "@/app/editor/[id]/page" import { useToast } from "@/hooks/use-toast" import { Loader2 } from "lucide-react" import { useMobile } from "@/hooks/use-mobile" import { useTouchDrawing } from "@/hooks/use-touch-drawing" // Set up the worker for PDF.js pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js` interface PDFViewerProps { pdfData: string currentTool: string currentColor: string annotations: Annotation[] onAddAnnotation: (annotation: Annotation) => void onDrawingStateChange?: (isDrawing: boolean) => void } export function PDFViewer(props: PDFViewerProps) { const { pdfData, currentTool, currentColor, annotations, onAddAnnotation } = props const [numPages, setNumPages] = useState(null) const [pageWidth, setPageWidth] = useState(0) const [pageHeight, setPageHeight] = useState(0) const [currentPage, setCurrentPage] = useState(1) const [scale, setScale] = useState(1.0) const isMobile = useMobile() const { toast } = useToast() // Use our custom touch drawing hook const { isDrawing, currentPath, canvasRef, startDrawing, draw, endDrawing, clearCanvas } = useTouchDrawing({ touchOffset: { x: 0, y: -15 }, // Offset cursor above finger for better visibility smoothing: true, simplify: true, minDistance: isMobile ? 1 : 2, // More precise on mobile smoothingTension: 0.5, smoothingSegments: 4, }) // Visual feedback for touch drawing const [cursorPosition, setCursorPosition] = useState<{ x: number; y: number } | null>(null) const containerRef = useRef(null) // Adjust scale based on screen size useEffect(() => { if (isMobile) { setScale(0.8) // Smaller scale for mobile } else { setScale(1.0) // Default scale for desktop } }, [isMobile]) // Set up canvas when tool changes useEffect(() => { if (canvasRef.current && (currentTool === "pen" || currentTool === "highlight")) { const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (ctx) { ctx.strokeStyle = currentColor ctx.lineWidth = currentTool === "pen" ? 2 : 8 ctx.lineCap = "round" ctx.lineJoin = "round" if (currentTool === "highlight") { ctx.globalAlpha = 0.3 } else { ctx.globalAlpha = 1.0 } } } }, [currentTool, currentColor]) const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { setNumPages(numPages) } const handlePageLoadSuccess = (page: any) => { const viewport = page.getViewport({ scale: 1 }) setPageWidth(viewport.width) setPageHeight(viewport.height) // Set up canvas dimensions if (canvasRef.current) { canvasRef.current.width = viewport.width canvasRef.current.height = viewport.height } } // Handle cursor position for visual feedback const handlePointerMove = (e: React.PointerEvent) => { if (currentTool !== "pen" && currentTool !== "highlight") { setCursorPosition(null) return } if (!canvasRef.current) return const canvas = canvasRef.current const rect = canvas.getBoundingClientRect() setCursorPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top, }) } const handlePointerLeave = () => { setCursorPosition(null) } // Handle drawing start const handleDrawStart = (e: React.TouchEvent | React.MouseEvent) => { if (currentTool !== "pen" && currentTool !== "highlight") return startDrawing(e) props.onDrawingStateChange?.(true) } // Handle drawing const handleDrawMove = (e: React.TouchEvent | React.MouseEvent) => { if (currentTool !== "pen" && currentTool !== "highlight") return draw(e) } // Handle drawing end const handleDrawEnd = () => { if (currentTool !== "pen" && currentTool !== "highlight") return const finalPath = endDrawing() props.onDrawingStateChange?.(false) if (finalPath && finalPath.length > 1) { // Add the annotation onAddAnnotation({ id: Date.now().toString(), type: currentTool, points: finalPath, color: currentColor, pageIndex: currentPage - 1, }) // Clear the canvas for the next drawing clearCanvas() } } const handleAddText = (e: React.MouseEvent | React.TouchEvent) => { if (currentTool !== "text") return // Get position let clientX, clientY if ("touches" in e) { clientX = e.touches[0].clientX clientY = e.touches[0].clientY } else { clientX = (e as React.MouseEvent).clientX clientY = (e as React.MouseEvent).clientY } if (!canvasRef.current) return const canvas = canvasRef.current const rect = canvas.getBoundingClientRect() const x = (clientX - rect.left) * (canvas.width / rect.width) const y = (clientY - rect.top) * (canvas.height / rect.height) const text = prompt("Enter text:") if (text) { onAddAnnotation({ id: Date.now().toString(), type: "text", text, position: { x, y }, color: currentColor, pageIndex: currentPage - 1, }) } } const handleAddPage = () => { if (currentTool !== "add-page") return toast({ title: "Page Added", description: "A new blank page has been added to your PDF.", }) } const renderAnnotations = () => { const pageAnnotations = annotations.filter((a) => a.pageIndex === currentPage - 1) return (

{pageAnnotations.map((annotation) => { if (annotation.type === "text" && annotation.position && annotation.text) { return (

{annotation.text}

) } return null })}

) } // Render drawing cursor for better precision const renderCursor = () => { if (!cursorPosition || !isMobile || (currentTool !== "pen" && currentTool !== "highlight")) { return null } return (

) } return (

} error={

Failed to load PDF

} >

{Array.from(new Array(numPages || 0), (_, index) => (

{ if (currentTool === "text") { handleAddText(e) } else if (currentTool === "add-page") { handleAddPage() } }} > 0 ? pageWidth * scale : undefined} onLoadSuccess={handlePageLoadSuccess} onRenderSuccess={() => setCurrentPage(index + 1)} renderTextLayer={false} renderAnnotationLayer={false} /> {currentPage === index + 1 && (

)}

))}

) }