[V0_FILE]markdown:file="README.md" isMerged="true" # Magni *Automatically synced with your [v0.dev](https://v0.dev) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/s16hs-projects/magnify) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.dev-black?style=for-the-badge)](https://v0.dev/chat/projects/v1tF9TdRWne) ## Overview This repository will stay in sync with your deployed chats on [v0.dev](https://v0.dev). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.dev](https://v0.dev). ## Deployment Your project is live at: **[https://vercel.com/s16hs-projects/magnify](https://vercel.com/s16hs-projects/magnify)** ## Build your app Continue building your app on: **[https://v0.dev/chat/projects/v1tF9TdRWne](https://v0.dev/chat/projects/v1tF9TdRWne)** ## How It Works 1. Create and modify your project using [v0.dev](https://v0.dev) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .text-balance { text-wrap: balance; } } @layer base { :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --chart-1: 12 76% 61%; --chart-2: 173 58% 39%; --chart-3: 197 37% 24%; --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; --sidebar-primary-foreground: 0 0% 98%; --sidebar-accent: 240 4.8% 95.9%; --sidebar-accent-foreground: 240 5.9% 10%; --sidebar-border: 220 13% 91%; --sidebar-ring: 217.2 91.2% 59.8%; } .dark { --background: 0 0% 3.9%; --foreground: 0 0% 98%; --card: 0 0% 3.9%; --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; --primary: 0 0% 98%; --primary-foreground: 0 0% 9%; --secondary: 0 0% 14.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; --accent: 0 0% 14.9%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 0 0% 14.9%; --input: 0 0% 14.9%; --ring: 0 0% 83.1%; --chart-1: 220 70% 50%; --chart-2: 160 60% 45%; --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; --sidebar-primary: 224.3 76.3% 48%; --sidebar-primary-foreground: 0 0% 100%; --sidebar-accent: 240 3.7% 15.9%; --sidebar-accent-foreground: 240 4.8% 95.9%; --sidebar-border: 240 3.7% 15.9%; --sidebar-ring: 217.2 91.2% 59.8%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Minimal Slider Styles */ .relative.h-2.w-full.grow.overflow-hidden.rounded-full.bg-secondary { height: 0.25rem; /* Thinner track: h-1 (0.25rem) - Default is h-2 (0.5rem) */ } .block.h-5.w-5.rounded-full.border-2.border-primary.bg-background { height: 1rem; /* Smaller thumb: h-4 (1rem) - Default is h-5 (1.25rem) */ width: 1rem; /* Smaller thumb: w-4 (1rem) - Default is w-5 (1.25rem) */ border-width: 1px; /* Thinner border: border (1px) - Default is border-2 */ } /* Rounded Color Picker Swatch (WebKit specific) */ input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; } input[type="color"]::-webkit-color-swatch { border: none; border-radius: 0.375rem; /* Corresponds to rounded-md */ } /* Custom cursor for grabbing */ .cursor-grabbing { cursor: grabbing; } [V0_FILE]png:file="app/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_wDoK8PIZNboi5yAcKou1LGJf8o6n/V1MLVMj22sN5HyRTguFV7R/app/apple-icon.png" isMerged="true" [V0_FILE]png:file="app/icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_wDoK8PIZNboi5yAcKou1LGJf8o6n/V1MLVMj22sN5HyRTguFV7R/app/icon.png" isMerged="true" [V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_wDoK8PIZNboi5yAcKou1LGJf8o6n/V1MLVMj22sN5HyRTguFV7R/public/logo.png" isMerged="true" [V0_FILE]typescriptreact:file="components/dynamic-logo.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { motion } from "framer-motion" interface DynamicLogoProps { size?: number squareColor?: string circleColor?: string title?: string onInitialSvgGenerated?: (svgDataUrl: string) => void } const DynamicLogo: React.FC = ({ size = 36, squareColor = "black", circleColor = "white", title = "Dynamic Logo", onInitialSvgGenerated, }) => { const circleDiameter = size / 4 const circleRadius = circleDiameter / 2 // For mouse following: circle edge stays within the main square const minFollowCoordinate = circleRadius const maxFollowCoordinate = size - circleRadius // For initial random placement: // 1. Outer "safe area" (e.g., 27x27 for 36px size) const safeAreaProportion = 27 / 36 const scaledSafeAreaSize = size * safeAreaProportion const safeAreaPadding = (size - scaledSafeAreaSize) / 2 // e.g., (36-27)/2 = 4.5 for size 36 // Min/max for circle CENTER within the safe area const minInitialCenter = safeAreaPadding + circleRadius const maxInitialCenter = size - safeAreaPadding - circleRadius const initialRandomRange = maxInitialCenter - minInitialCenter // 2. Inner "dead zone" (e.g., 12x12 for 36px size) - circle CENTER should avoid this const deadZonePhysicalSize = size / 3 // 12px for a 36px logo const deadZoneStart = (size - deadZonePhysicalSize) / 2 // e.g., (36-12)/2 = 12 const deadZoneEnd = deadZoneStart + deadZonePhysicalSize // e.g., 12 + 12 = 24 // State for the initial random position, set once on mount const [initialPosition, setInitialPosition] = useState({ x: size / 2, y: size / 2 }) // State for the current animated position (follows mouse or resets to initial) const [circlePosition, setCirclePosition] = useState({ x: size / 2, y: size / 2 }) const svgRef = useRef(null) useEffect(() => { let randomCx: number, randomCy: number let attempts = 0 const maxAttempts = 50 if (initialRandomRange < 0) { randomCx = size / 2 randomCy = size / 2 } else { do { randomCx = minInitialCenter + Math.random() * initialRandomRange randomCy = minInitialCenter + Math.random() * initialRandomRange attempts++ } while ( randomCx > deadZoneStart && randomCx < deadZoneEnd && randomCy > deadZoneStart && randomCy < deadZoneEnd && attempts < maxAttempts ) if (attempts >= maxAttempts) { randomCx = minInitialCenter randomCy = minInitialCenter } } const newInitialPosition = { x: randomCx, y: randomCy } setInitialPosition(newInitialPosition) setCirclePosition(newInitialPosition) if (onInitialSvgGenerated) { const faviconSvgString = ` `.trim() const faviconDataUrl = `data:image/svg+xml,${encodeURIComponent(faviconSvgString)}` onInitialSvgGenerated(faviconDataUrl) } // eslint-disable-next-line react-hooks/exhaustive-deps }, [ size, squareColor, circleColor, circleRadius, onInitialSvgGenerated, minInitialCenter, initialRandomRange, deadZoneStart, deadZoneEnd, maxInitialCenter, ]) const handleMouseMove = (event: React.MouseEvent) => { if (!svgRef.current) return const rect = svgRef.current.getBoundingClientRect() const mouseXInSVG = event.clientX - rect.left const mouseYInSVG = event.clientY - rect.top const targetX = Math.max(minFollowCoordinate, Math.min(mouseXInSVG, maxFollowCoordinate)) const targetY = Math.max(minFollowCoordinate, Math.min(mouseYInSVG, maxFollowCoordinate)) setCirclePosition({ x: targetX, y: targetY }) } const handleMouseLeave = () => { // Reset to the initial random position setCirclePosition(initialPosition) } return ( ) } export default DynamicLogo [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" // Required for useState and event handlers import { useState, useEffect } from "react" import ImageMagnifier from "@/components/image-magnifier" import Link from "next/link" import DynamicLogo from "@/components/dynamic-logo" export default function HomePage() { const [isTitleAndSubtitleVisible, setIsTitleAndSubtitleVisible] = useState(true) const [faviconUrl, setFaviconUrl] = useState(null) useEffect(() => { if (faviconUrl) { let link: HTMLLinkElement | null = document.querySelector("link[rel~='icon']") if (!link) { link = document.createElement("link") link.rel = "icon" document.head.prepend(link) } link.href = faviconUrl link.type = "image/svg+xml" } }, [faviconUrl]) const handleImagePresenceChange = (hasImage: boolean) => { setIsTitleAndSubtitleVisible(!hasImage) } return (

{isTitleAndSubtitleVisible && (

Magnifying Glass Effect

Quickly add a circular zoom overlay to an image.

)}

) } [V0_FILE]typescriptreact:file="components/image-magnifier.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect, useCallback, useMemo } from "react" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Card, CardContent } from "@/components/ui/card" import { motion, AnimatePresence } from "framer-motion" import { ImageIcon, ImagePlus, Copy, DownloadIcon, Loader2, Check } from "lucide-react" import { cn } from "@/lib/utils" import { useToast } from "@/hooks/use-toast" function usePrevious(value: T): T | undefined { const ref = useRef() useEffect(() => { ref.current = value }, [value]) return ref.current } interface Dimensions { width: number height: number } interface RelativePosition { x: number y: number } interface MagnifierConfig { magnifierContentDiameter: number zoomLevel: number magnifierBorderColor: string dimOpacity: number } interface ImageMagnifierProps { onImagePresenceChange?: (hasImage: boolean) => void } type ImageStatus = "idle" | "loading" | "loaded" | "error" const LOCAL_STORAGE_KEY = "imageMagnifierConfig" const MIN_ZOOM = 1.5 const MAX_ZOOM = 10.0 const ZOOM_STEP = 0.1 const MIN_MAGNIFIER_DIAMETER = 50 const MAX_MAGNIFIER_DIAMETER = 300 const DIAMETER_STEP_SLIDER = 10 const DEFAULT_BORDER_THICKNESS = 2 const DEFAULT_BORDER_COLOR = "#ffffff" const DEFAULT_MAGNIFIER_DIAMETER = 150 const DEFAULT_ZOOM_LEVEL = 2.0 const DEFAULT_DIM_OPACITY = 0.5 const MIN_DIM_OPACITY = 0.0 const MAX_DIM_OPACITY = 1.0 const DIM_OPACITY_STEP = 0.05 const SPINNER_DELAY_MS = 100 const SUCCESS_DISPLAY_MS = 1500 const GENERIC_UPLOAD_ERROR_MESSAGE = "Something went wrong while uploading the image." function hexToRgba(hex: string, alpha = 1): string { const r = Number.parseInt(hex.slice(1, 3), 16) const g = Number.parseInt(hex.slice(3, 5), 16) const b = Number.parseInt(hex.slice(5, 7), 16) if (isNaN(r) || isNaN(g) || isNaN(b)) { return `rgba(255, 255, 255, ${alpha})` } return `rgba(${r}, ${g}, ${b}, ${alpha})` } const ShortcutPillDisplay: React.FC<{ keys: string[] }> = ({ keys }) => { if (!keys || keys.length === 0) return null return (

{keys.map((key, index) => ( 0 && "ml-0.5", )} > {key} ))}

) } function getDistance(touch1: Touch, touch2: Touch): number { return Math.sqrt(Math.pow(touch1.clientX - touch2.clientX, 2) + Math.pow(touch1.clientY - touch2.clientY, 2)) } export default function ImageMagnifier({ onImagePresenceChange }: ImageMagnifierProps) { const [imageSrc, setImageSrc] = useState(null) const [originalFileName, setOriginalFileName] = useState(null) const [originalImageDimensions, setOriginalImageDimensions] = useState(null) const [renderedImageDimensions, setRenderedImageDimensions] = useState(null) const prevRenderedImageDimensionsRef = useRef(null) const [imageStatus, setImageStatus] = useState("idle") const [imageLoadError, setImageLoadError] = useState(null) const [showDelayedLoadingUI, setShowDelayedLoadingUI] = useState(false) const [magnifierActive, setMagnifierActive] = useState(false) const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }) const [isMagnifierFixed, setIsMagnifierFixed] = useState(false) const [relativeFixedPosition, setRelativeFixedPosition] = useState(null) const prevIsMagnifierFixed = usePrevious(isMagnifierFixed) const [magnifierContentDiameter, setMagnifierContentDiameter] = useState(DEFAULT_MAGNIFIER_DIAMETER) const [zoomLevel, setZoomLevel] = useState(DEFAULT_ZOOM_LEVEL) const [magnifierBorderColor, setMagnifierBorderColor] = useState(DEFAULT_BORDER_COLOR) const [dimOpacity, setDimOpacity] = useState(DEFAULT_DIM_OPACITY) const [isDraggingOver, setIsDraggingOver] = useState(false) const [isPinching, setIsPinching] = useState(false) const [isDraggingMagnifier, setIsDraggingMagnifier] = useState(false) const [isCopying, setIsCopying] = useState(false) const [isDownloading, setIsDownloading] = useState(false) const [showCopySuccess, setShowCopySuccess] = useState(false) const [showDownloadSuccess, setShowDownloadSuccess] = useState(false) const copyTimeoutRef = useRef(null) const downloadTimeoutRef = useRef(null) const copySuccessTimeoutRef = useRef(null) const downloadSuccessTimeoutRef = useRef(null) const loadingDelayTimeoutRef = useRef(null) const imageContainerRef = useRef(null) const imageRef = useRef(null) const hiddenFileInputRef = useRef(null) const initialPinchDistanceRef = useRef(null) const initialMagnifierDiameterRef = useRef(null) const dragStartOffsetRef = useRef({ x: 0, y: 0 }) const justDraggedRef = useRef(false) const isDraggingWithTouchRef = useRef(false) const touchStartPositionRef = useRef({ x: 0, y: 0 }) const { toast } = useToast() const actualFixedPosition = useMemo(() => { if ( isMagnifierFixed && relativeFixedPosition && renderedImageDimensions && renderedImageDimensions.width > 0 && renderedImageDimensions.height > 0 ) { return { x: relativeFixedPosition.x * renderedImageDimensions.width, y: relativeFixedPosition.y * renderedImageDimensions.height, } } return { x: 0, y: 0 } }, [isMagnifierFixed, relativeFixedPosition, renderedImageDimensions]) const displayPosition = isMagnifierFixed ? actualFixedPosition : mousePosition const magnifierElementTotalDiameter = magnifierContentDiameter + 2 * DEFAULT_BORDER_THICKNESS useEffect(() => { return () => { if (copyTimeoutRef.current) clearTimeout(copyTimeoutRef.current) if (downloadTimeoutRef.current) clearTimeout(downloadTimeoutRef.current) if (copySuccessTimeoutRef.current) clearTimeout(copySuccessTimeoutRef.current) if (downloadSuccessTimeoutRef.current) clearTimeout(downloadSuccessTimeoutRef.current) if (loadingDelayTimeoutRef.current) clearTimeout(loadingDelayTimeoutRef.current) } }, []) useEffect(() => { if (imageStatus === "loading") { if (loadingDelayTimeoutRef.current) clearTimeout(loadingDelayTimeoutRef.current) loadingDelayTimeoutRef.current = setTimeout(() => { if (imageStatus === "loading") { setShowDelayedLoadingUI(true) } }, SPINNER_DELAY_MS) } else { if (loadingDelayTimeoutRef.current) clearTimeout(loadingDelayTimeoutRef.current) setShowDelayedLoadingUI(false) } }, [imageStatus]) useEffect(() => { if (onImagePresenceChange) { onImagePresenceChange(!!(imageSrc && imageStatus === "loaded")) } }, [imageSrc, imageStatus, onImagePresenceChange]) useEffect(() => { if (typeof window !== "undefined") { const savedConfigRaw = localStorage.getItem(LOCAL_STORAGE_KEY) if (savedConfigRaw) { try { const savedConfig: MagnifierConfig = JSON.parse(savedConfigRaw) setMagnifierContentDiameter(savedConfig.magnifierContentDiameter ?? DEFAULT_MAGNIFIER_DIAMETER) const savedZoom = savedConfig.zoomLevel ?? DEFAULT_ZOOM_LEVEL setZoomLevel(Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, savedZoom))) setMagnifierBorderColor(savedConfig.magnifierBorderColor ?? DEFAULT_BORDER_COLOR) setDimOpacity(savedConfig.dimOpacity ?? DEFAULT_DIM_OPACITY) } catch (error) { console.error("Failed to parse magnifier config from localStorage:", error) } } else { setMagnifierContentDiameter(DEFAULT_MAGNIFIER_DIAMETER) setZoomLevel(DEFAULT_ZOOM_LEVEL) setMagnifierBorderColor(DEFAULT_BORDER_COLOR) setDimOpacity(DEFAULT_DIM_OPACITY) } } }, []) useEffect(() => { if (typeof window !== "undefined") { const config: MagnifierConfig = { magnifierContentDiameter, zoomLevel, magnifierBorderColor, dimOpacity, } localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(config)) } }, [magnifierContentDiameter, zoomLevel, magnifierBorderColor, dimOpacity]) useEffect(() => { const handleImageResizeOrLoad = () => { if (!imageRef.current) return const rectInEffect = imageRef.current.getBoundingClientRect() const newRenderedDims = { width: rectInEffect.width, height: rectInEffect.height } const oldRenderedDims = prevRenderedImageDimensionsRef.current setRenderedImageDimensions(newRenderedDims) if (isMagnifierFixed && prevIsMagnifierFixed === true) { if (oldRenderedDims && oldRenderedDims.width > 0 && newRenderedDims.width > 0) { const scaleFactor = newRenderedDims.width / oldRenderedDims.width if (scaleFactor > 0 && Number.isFinite(scaleFactor) && scaleFactor !== 1) { setMagnifierContentDiameter((prevDiameter) => { const newDiameter = Math.round(prevDiameter * scaleFactor) return Math.max(MIN_MAGNIFIER_DIAMETER, Math.min(MAX_MAGNIFIER_DIAMETER, newDiameter)) }) } } } prevRenderedImageDimensionsRef.current = newRenderedDims } if (imageSrc && imageStatus === "loaded") { const imgElement = imageRef.current if (imgElement) { if (imgElement.complete && imgElement.naturalWidth > 0) { handleImageResizeOrLoad() } else { imgElement.addEventListener("load", handleImageResizeOrLoad) } window.addEventListener("resize", handleImageResizeOrLoad) return () => { imgElement.removeEventListener("load", handleImageResizeOrLoad) window.removeEventListener("resize", handleImageResizeOrLoad) } } } else { prevRenderedImageDimensionsRef.current = null setRenderedImageDimensions(null) if (imageStatus !== "loading") { setOriginalImageDimensions(null) } setRelativeFixedPosition(null) } }, [imageSrc, imageStatus, isMagnifierFixed, prevIsMagnifierFixed, relativeFixedPosition]) const resetImageState = useCallback(() => { setImageSrc(null) setOriginalFileName(null) setOriginalImageDimensions(null) setRenderedImageDimensions(null) setIsMagnifierFixed(false) setRelativeFixedPosition(null) setIsPinching(false) setIsDraggingMagnifier(false) }, []) const processFile = useCallback( (file: File | null | undefined, fileNameToUse: string | null) => { setImageLoadError(null) if (file) { setImageStatus("loading") const reader = new FileReader() reader.onload = (e) => { const loadedSrc = e.target?.result as string setImageSrc(loadedSrc) setIsMagnifierFixed(false) setRelativeFixedPosition(null) setZoomLevel(DEFAULT_ZOOM_LEVEL) setMagnifierContentDiameter(DEFAULT_MAGNIFIER_DIAMETER) setIsPinching(false) setIsDraggingMagnifier(false) const img = new Image() img.onload = () => { setOriginalImageDimensions({ width: img.naturalWidth, height: img.naturalHeight }) setImageLoadError(null) setImageStatus("loaded") } img.onerror = () => { console.error("Failed to load image into tag. File:", fileNameToUse) resetImageState() setImageLoadError(GENERIC_UPLOAD_ERROR_MESSAGE) setImageStatus("error") } img.src = loadedSrc } reader.onerror = () => { console.error("FileReader error for file:", fileNameToUse) resetImageState() setImageLoadError("Failed to read the selected file. Please try again.") setImageStatus("error") } reader.readAsDataURL(file) } else { resetImageState() setImageStatus("idle") setImageLoadError(null) } }, [resetImageState], ) useEffect(() => { const handlePaste = (event: ClipboardEvent) => { setImageLoadError(null) setImageStatus("idle") const items = event.clipboardData?.items if (!items) return for (let i = 0; i < items.length; i++) { const item = items[i] if (item.kind === "file" && item.type.startsWith("image/")) { const file = item.getAsFile() if (file) { event.preventDefault() let currentFileName: string if (file.name === "image.png" || !file.name.includes(".")) { currentFileName = "pasted-image.png" } else { currentFileName = file.name } setOriginalFileName(currentFileName) processFile(file, currentFileName) break } } } } window.addEventListener("paste", handlePaste) return () => window.removeEventListener("paste", handlePaste) }, [processFile, toast]) const handleHiddenInputChange = (event: React.ChangeEvent) => { setImageLoadError(null) setImageStatus("idle") const files = event.target.files if (files && files.length > 0) { const file = files[0] const currentFileName = file.name setOriginalFileName(currentFileName) processFile(file, currentFileName) } else { if (!imageSrc || imageStatus !== "loaded") { processFile(null, null) } if (event.target) event.target.value = "" } } const handleDropZoneClick = () => { if (imageStatus !== "loading") { setImageLoadError(null) if (imageStatus === "error") setImageStatus("idle") } hiddenFileInputRef.current?.click() } const handleDragOver = (event: React.DragEvent) => { event.preventDefault() if (imageStatus !== "loading") setIsDraggingOver(true) } const handleDragLeave = (event: React.DragEvent) => { event.preventDefault() setIsDraggingOver(false) } const handleDrop = (event: React.DragEvent) => { event.preventDefault() setIsDraggingOver(false) setImageLoadError(null) setImageStatus("idle") const file = event.dataTransfer.files?.[0] if (file) { const currentFileName = file.name setOriginalFileName(currentFileName) processFile(file, currentFileName) } else { processFile(null, null) } } const generateMagnifiedImageAsBlob = useCallback(async (): Promise => { if ( !imageRef.current || !originalImageDimensions || !renderedImageDimensions || !isMagnifierFixed || imageStatus !== "loaded" ) { console.error("Cannot generate image: missing refs, dimensions, magnifier not fixed, or image not fully loaded.") return null } if (renderedImageDimensions.width === 0 || renderedImageDimensions.height === 0) { console.error("Cannot generate image: rendered dimensions are zero.") return null } const canvas = document.createElement("canvas") const ctx = canvas.getContext("2d") if (!ctx) { console.error("Cannot generate image: failed to get canvas context.") return null } const tempImg = new Image() tempImg.crossOrigin = "anonymous" try { await new Promise((resolve, reject) => { tempImg.onload = () => resolve() tempImg.onerror = (err) => { console.error("Error loading image onto tempImg for canvas drawing:", err) reject(new Error("Failed to load image for canvas generation.")) } tempImg.src = imageRef.current!.src }) } catch (error) { toast({ variant: "destructive", title: "Image Generation Failed", description: "Could not load the source image for processing. It might be corrupted.", }) return null } canvas.width = tempImg.naturalWidth canvas.height = tempImg.naturalHeight ctx.drawImage(tempImg, 0, 0, tempImg.naturalWidth, tempImg.naturalHeight) const scaleToOriginalX = tempImg.naturalWidth / renderedImageDimensions.width const scaleToOriginalY = tempImg.naturalHeight / renderedImageDimensions.height const avgScale = (scaleToOriginalX + scaleToOriginalY) / 2 const magnifierCenterXOnOriginal = actualFixedPosition.x * scaleToOriginalX const magnifierCenterYOnOriginal = actualFixedPosition.y * scaleToOriginalY const currentMagnifierContentDiameterOnOriginal = magnifierContentDiameter * avgScale const currentMagnifierBorderThicknessOnOriginal = DEFAULT_BORDER_THICKNESS * avgScale const dimmingCutoutRadius = currentMagnifierContentDiameterOnOriginal / 2 + currentMagnifierBorderThicknessOnOriginal if (isMagnifierFixed) { ctx.fillStyle = `rgba(0, 0, 0, ${dimOpacity})` ctx.fillRect(0, 0, canvas.width, canvas.height) ctx.save() ctx.globalCompositeOperation = "destination-out" ctx.beginPath() ctx.arc(magnifierCenterXOnOriginal, magnifierCenterYOnOriginal, dimmingCutoutRadius, 0, Math.PI * 2) ctx.fillStyle = "black" ctx.fill() ctx.restore() } const outerEdgeRadius = dimmingCutoutRadius ctx.save() ctx.beginPath() ctx.arc(magnifierCenterXOnOriginal, magnifierCenterYOnOriginal, outerEdgeRadius, 0, Math.PI * 2) // Match the live preview's shadow properties ctx.shadowColor = "rgba(0,0,0,0.3)" // Correct alpha ctx.shadowBlur = (35 + 5) * avgScale // Approximation of CSS blur + spread ctx.shadowOffsetX = 0 ctx.shadowOffsetY = 8 * avgScale // Correct offset // FIX: Use an opaque fill color to cast a visible shadow. // The magnifier content and border are drawn over this, so the fill itself is hidden. ctx.fillStyle = "black" ctx.fill() ctx.restore() if (currentMagnifierBorderThicknessOnOriginal > 0) { ctx.save() // Use fillStyle for a solid, crisp ring ctx.fillStyle = hexToRgba(magnifierBorderColor, 1.0) const borderOuterRadius = currentMagnifierContentDiameterOnOriginal / 2 + currentMagnifierBorderThicknessOnOriginal const borderInnerRadius = currentMagnifierContentDiameterOnOriginal / 2 ctx.beginPath() // Create the outer circle path ctx.arc(magnifierCenterXOnOriginal, magnifierCenterYOnOriginal, borderOuterRadius, 0, Math.PI * 2) // Create the inner circle path in the opposite direction to form a "hole" ctx.arc(magnifierCenterXOnOriginal, magnifierCenterYOnOriginal, borderInnerRadius, 0, Math.PI * 2, true) // Fill the resulting ring shape ctx.fill() ctx.restore() } ctx.save() const contentRadius = currentMagnifierContentDiameterOnOriginal / 2 ctx.beginPath() ctx.arc(magnifierCenterXOnOriginal, magnifierCenterYOnOriginal, contentRadius, 0, Math.PI * 2) ctx.clip() ctx.save() ctx.shadowColor = "rgba(0,0,0,0.3)" ctx.shadowBlur = 10 * avgScale ctx.shadowOffsetX = 0 ctx.shadowOffsetY = 0 ctx.beginPath() const largeRectSize = Math.max(canvas.width, canvas.height) * 2 + ctx.shadowBlur * 2 ctx.rect( magnifierCenterXOnOriginal - largeRectSize / 2, magnifierCenterYOnOriginal - largeRectSize / 2, largeRectSize, largeRectSize, ) ctx.arc(magnifierCenterXOnOriginal, magnifierCenterYOnOriginal, contentRadius, 0, Math.PI * 2, true) ctx.fillStyle = "black" ctx.fill() ctx.restore() const sourceRectX = magnifierCenterXOnOriginal - contentRadius / zoomLevel const sourceRectY = magnifierCenterYOnOriginal - contentRadius / zoomLevel const sourceRectWidth = currentMagnifierContentDiameterOnOriginal / zoomLevel const sourceRectHeight = currentMagnifierContentDiameterOnOriginal / zoomLevel const destX = magnifierCenterXOnOriginal - contentRadius const destY = magnifierCenterYOnOriginal - contentRadius const destWidth = currentMagnifierContentDiameterOnOriginal const destHeight = currentMagnifierContentDiameterOnOriginal ctx.drawImage( tempImg, sourceRectX, sourceRectY, sourceRectWidth, sourceRectHeight, destX, destY, destWidth, destHeight, ) ctx.restore() return new Promise((resolve) => canvas.toBlob(resolve, "image/png")) }, [ originalImageDimensions, renderedImageDimensions, isMagnifierFixed, relativeFixedPosition, magnifierContentDiameter, magnifierBorderColor, zoomLevel, actualFixedPosition, dimOpacity, toast, imageStatus, ]) const handleMouseMoveOnImageContainer = useCallback( (event: React.MouseEvent) => { if (isDraggingMagnifier || !imageContainerRef.current || isPinching || imageStatus !== "loaded") return const imageElement = imageRef.current if (!imageElement) return const rect = imageElement.getBoundingClientRect() if (rect.width === 0 || rect.height === 0) return if ( !renderedImageDimensions || renderedImageDimensions.width !== rect.width || renderedImageDimensions.height !== rect.height ) { const newDims = { width: rect.width, height: rect.height } setRenderedImageDimensions(newDims) prevRenderedImageDimensionsRef.current = newDims } if (!isMagnifierFixed) { const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width)) const y = Math.max(0, Math.min(event.clientY - rect.top, rect.height)) setMousePosition({ x, y }) } }, [isDraggingMagnifier, isPinching, isMagnifierFixed, renderedImageDimensions, imageStatus], ) const handleClickOnImageContainer = useCallback( (event: React.MouseEvent) => { if (justDraggedRef.current) return const imageElement = imageRef.current if (!imageSrc || imageStatus !== "loaded" || isPinching || !imageElement || isDraggingMagnifier) return const imageRect = imageElement.getBoundingClientRect() if (imageRect.width === 0 || imageRect.height === 0) return const clickXOnImage = Math.max(0, Math.min(event.clientX - imageRect.left, imageRect.width)) const clickYOnImage = Math.max(0, Math.min(event.clientY - imageRect.top, imageRect.height)) const newRelativePosition = { x: clickXOnImage / imageRect.width, y: clickYOnImage / imageRect.height } setRelativeFixedPosition(newRelativePosition) const currentActualDims = { width: imageRect.width, height: imageRect.height } setRenderedImageDimensions(currentActualDims) prevRenderedImageDimensionsRef.current = currentActualDims setMousePosition({ x: clickXOnImage, y: clickYOnImage }) setIsMagnifierFixed(true) }, [imageSrc, imageStatus, isPinching, isDraggingMagnifier], ) const handleMouseDownOnImageContainer = useCallback( (event: React.MouseEvent) => { const imageElement = imageRef.current if ( event.button !== 0 || !imageSrc || imageStatus !== "loaded" || !isMagnifierFixed || !imageElement || isPinching || !renderedImageDimensions ) return const imageRect = imageElement.getBoundingClientRect() const clickXOnImage = event.clientX - imageRect.left const clickYOnImage = event.clientY - imageRect.top const currentActualFixedPos = actualFixedPosition const distToCenter = Math.sqrt( Math.pow(clickXOnImage - currentActualFixedPos.x, 2) + Math.pow(clickYOnImage - currentActualFixedPos.y, 2), ) if (distToCenter <= magnifierElementTotalDiameter / 2) { event.preventDefault() dragStartOffsetRef.current = { x: clickXOnImage - currentActualFixedPos.x, y: clickYOnImage - currentActualFixedPos.y, } justDraggedRef.current = false // Reset for this new interaction setIsDraggingMagnifier(true) } }, [ imageSrc, imageStatus, isMagnifierFixed, isPinching, renderedImageDimensions, actualFixedPosition, magnifierElementTotalDiameter, setIsDraggingMagnifier, ], ) useEffect(() => { if (!isDraggingMagnifier) { return } const handleMouseMove = (event: MouseEvent) => { if (!imageRef.current || !renderedImageDimensions || !dragStartOffsetRef.current) return const imageRect = imageRef.current.getBoundingClientRect() if (imageRect.width === 0 || imageRect.height === 0) return const mouseXOnImage = event.clientX - imageRect.left const mouseYOnImage = event.clientY - imageRect.top let newAbsCenterX = mouseXOnImage - dragStartOffsetRef.current.x let newAbsCenterY = mouseYOnImage - dragStartOffsetRef.current.y newAbsCenterX = Math.max(0, Math.min(newAbsCenterX, renderedImageDimensions.width)) newAbsCenterY = Math.max(0, Math.min(newAbsCenterY, renderedImageDimensions.height)) if (renderedImageDimensions.width > 0 && renderedImageDimensions.height > 0) { const newRelX = newAbsCenterX / renderedImageDimensions.width const newRelY = newAbsCenterY / renderedImageDimensions.height setRelativeFixedPosition({ x: newRelX, y: newRelY }) } justDraggedRef.current = true } const handleMouseUp = () => { setIsDraggingMagnifier(false) } window.addEventListener("mousemove", handleMouseMove) window.addEventListener("mouseup", handleMouseUp) return () => { window.removeEventListener("mousemove", handleMouseMove) window.removeEventListener("mouseup", handleMouseUp) } }, [isDraggingMagnifier, renderedImageDimensions, setRelativeFixedPosition]) const handleWheelScroll = useCallback( (event: WheelEvent) => { if (!imageSrc || imageStatus !== "loaded" || !imageContainerRef.current || isPinching || !renderedImageDimensions) return const imageElement = imageRef.current if (!imageElement) return const imageRect = imageElement.getBoundingClientRect() const eventMouseX = event.clientX - imageRect.left const eventMouseY = event.clientY - imageRect.top const magnifierRadius = magnifierElementTotalDiameter / 2 const distanceToMagnifierCenter = Math.sqrt( Math.pow(eventMouseX - displayPosition.x, 2) + Math.pow(eventMouseY - displayPosition.y, 2), ) if (!((magnifierActive || isMagnifierFixed) && distanceToMagnifierCenter <= magnifierRadius)) return event.preventDefault() setZoomLevel((prevZoom) => { let newZoom = prevZoom + (event.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP) newZoom = Number.parseFloat(newZoom.toFixed(1)) return Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, newZoom)) }) }, [ imageSrc, imageStatus, magnifierActive, isMagnifierFixed, isPinching, displayPosition, magnifierElementTotalDiameter, renderedImageDimensions, ], ) const handleTouchStart = useCallback( (event: TouchEvent) => { if (!imageSrc || imageStatus !== "loaded" || !imageContainerRef.current || !renderedImageDimensions) return const imageElement = imageRef.current if (!imageElement) return const imageRect = imageElement.getBoundingClientRect() const isTouchOverMagnifier = (touch: Touch): boolean => { const touchX = touch.clientX - imageRect.left const touchY = touch.clientY - imageRect.top const magnifierRadius = magnifierElementTotalDiameter / 2 return ( Math.sqrt(Math.pow(touchX - displayPosition.x, 2) + Math.pow(touchY - displayPosition.y, 2)) <= magnifierRadius ) } if (event.touches.length === 1) { const touch = event.touches[0] if (isMagnifierFixed && isTouchOverMagnifier(touch)) { event.preventDefault() const touchX = touch.clientX - imageRect.left const touchY = touch.clientY - imageRect.top const currentActualFixedPos = actualFixedPosition dragStartOffsetRef.current = { x: touchX - currentActualFixedPos.x, y: touchY - currentActualFixedPos.y } isDraggingWithTouchRef.current = true setIsDraggingMagnifier(true) justDraggedRef.current = false touchStartPositionRef.current = { x: touchX, y: touchY } } } else if (event.touches.length === 2) { if (isTouchOverMagnifier(event.touches[0]) && isTouchOverMagnifier(event.touches[1])) { event.preventDefault() setIsPinching(true) initialPinchDistanceRef.current = getDistance(event.touches[0], event.touches[1]) initialMagnifierDiameterRef.current = magnifierContentDiameter isDraggingWithTouchRef.current = false setIsDraggingMagnifier(false) } else { setIsPinching(false) } } }, [ imageSrc, imageStatus, magnifierContentDiameter, displayPosition, magnifierElementTotalDiameter, renderedImageDimensions, isMagnifierFixed, actualFixedPosition, ], ) const handleTouchMove = useCallback( (event: TouchEvent) => { if (!imageSrc || imageStatus !== "loaded" || !renderedImageDimensions) return if (event.touches.length === 1 && isDraggingWithTouchRef.current && isDraggingMagnifier) { event.preventDefault() const touch = event.touches[0] const imageElement = imageRef.current if (!imageElement) return const imageRect = imageElement.getBoundingClientRect() const touchX = touch.clientX - imageRect.left const touchY = touch.clientY - imageRect.top let newAbsCenterX = touchX - dragStartOffsetRef.current.x let newAbsCenterY = touchY - dragStartOffsetRef.current.y newAbsCenterX = Math.max(0, Math.min(newAbsCenterX, renderedImageDimensions.width)) newAbsCenterY = Math.max(0, Math.min(newAbsCenterY, renderedImageDimensions.height)) const newRelX = newAbsCenterX / renderedImageDimensions.width const newRelY = newAbsCenterY / renderedImageDimensions.height setRelativeFixedPosition({ x: newRelX, y: newRelY }) } else if (event.touches.length === 2 && isPinching) { if (initialPinchDistanceRef.current === null || initialMagnifierDiameterRef.current === null) return event.preventDefault() const currentPinchDistance = getDistance(event.touches[0], event.touches[1]) const scaleFactor = currentPinchDistance / initialPinchDistanceRef.current let newDiameter = initialMagnifierDiameterRef.current * scaleFactor newDiameter = Math.round(newDiameter / DIAMETER_STEP_SLIDER) * DIAMETER_STEP_SLIDER setMagnifierContentDiameter(Math.max(MIN_MAGNIFIER_DIAMETER, Math.min(MAX_MAGNIFIER_DIAMETER, newDiameter))) } }, [imageSrc, imageStatus, isPinching, isDraggingMagnifier, renderedImageDimensions], ) const handleTouchEnd = useCallback( (event: TouchEvent) => { if (isPinching && event.touches.length < 2) { initialPinchDistanceRef.current = null initialMagnifierDiameterRef.current = null setIsPinching(false) } if (isDraggingWithTouchRef.current && event.touches.length === 0) { isDraggingWithTouchRef.current = false if (isDraggingMagnifier) { justDraggedRef.current = true setTimeout(() => { justDraggedRef.current = false }, 0) } setIsDraggingMagnifier(false) } }, [isPinching, isDraggingMagnifier], ) useEffect(() => { const container = imageContainerRef.current if (container && imageSrc && imageStatus === "loaded") { const wheelHandler = (e: Event) => handleWheelScroll(e as WheelEvent) const touchStartHandler = (e: Event) => handleTouchStart(e as TouchEvent) const touchMoveHandler = (e: Event) => handleTouchMove(e as TouchEvent) const touchEndHandler = (e: Event) => handleTouchEnd(e as TouchEvent) container.addEventListener("wheel", wheelHandler, { passive: false }) container.addEventListener("touchstart", touchStartHandler, { passive: false }) container.addEventListener("touchmove", touchMoveHandler, { passive: false }) container.addEventListener("touchend", touchEndHandler) container.addEventListener("touchcancel", touchEndHandler) return () => { container.removeEventListener("wheel", wheelHandler) container.removeEventListener("touchstart", touchStartHandler) container.removeEventListener("touchmove", touchMoveHandler) container.removeEventListener("touchend", touchEndHandler) container.removeEventListener("touchcancel", touchEndHandler) } } }, [imageSrc, imageStatus, handleWheelScroll, handleTouchStart, handleTouchMove, handleTouchEnd]) let bgPosXStyle = "0px", bgPosYStyle = "0px" if ( imageSrc && imageStatus === "loaded" && renderedImageDimensions && renderedImageDimensions.width > 0 && renderedImageDimensions.height > 0 && (magnifierActive || isMagnifierFixed) ) { const sourceAreaCenterX = displayPosition.x * zoomLevel const sourceAreaCenterY = displayPosition.y * zoomLevel const bgPosX = sourceAreaCenterX - magnifierContentDiameter / 2 const bgPosY = sourceAreaCenterY - magnifierContentDiameter / 2 bgPosXStyle = `-${bgPosX}px` bgPosYStyle = `-${bgPosY}px` } const magnifierStyle: React.CSSProperties = imageSrc && imageStatus === "loaded" && originalImageDimensions && renderedImageDimensions && renderedImageDimensions.width > 0 && renderedImageDimensions.height > 0 && (magnifierActive || isMagnifierFixed) ? { position: "absolute", left: `${displayPosition.x - magnifierElementTotalDiameter / 2}px`, top: `${displayPosition.y - magnifierElementTotalDiameter / 2}px`, width: `${magnifierElementTotalDiameter}px`, height: `${magnifierElementTotalDiameter}px`, backgroundImage: `url(${imageSrc})`, backgroundRepeat: "no-repeat", backgroundSize: `${renderedImageDimensions.width * zoomLevel}px ${renderedImageDimensions.height * zoomLevel}px`, backgroundPositionX: bgPosXStyle, backgroundPositionY: bgPosYStyle, border: `${DEFAULT_BORDER_THICKNESS}px solid ${hexToRgba(magnifierBorderColor, 0.95)}`, borderRadius: "50%", boxShadow: `inset 0 0 12px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,0,0,0.1), 0 8px 35px 5px rgba(0,0,0,0.3)`, pointerEvents: "none", overflow: "hidden", touchAction: "none", imageRendering: "auto", zIndex: 20, } : {} const dimmingOverlayStyle: React.CSSProperties = isMagnifierFixed && imageStatus === "loaded" && renderedImageDimensions && actualFixedPosition ? { position: "absolute", top: 0, left: 0, width: `${renderedImageDimensions.width}px`, height: `${renderedImageDimensions.height}px`, backgroundColor: `rgba(0, 0, 0, ${dimOpacity})`, maskImage: `radial-gradient(circle ${magnifierElementTotalDiameter / 2}px at ${actualFixedPosition.x}px ${actualFixedPosition.y}px, transparent 0, transparent ${magnifierElementTotalDiameter / 2}px, black ${magnifierElementTotalDiameter / 2}px)`, WebkitMaskImage: `radial-gradient(circle ${magnifierElementTotalDiameter / 2}px at ${actualFixedPosition.x}px ${actualFixedPosition.y}px, transparent 0, transparent ${magnifierElementTotalDiameter / 2}px, black ${magnifierElementTotalDiameter / 2}px)`, pointerEvents: "none", zIndex: 10, } : {} const showMagnifierControls = imageSrc && imageStatus === "loaded" const showDropzoneArea = !showMagnifierControls const showCrosshairCursor = imageSrc && imageStatus === "loaded" && magnifierActive && !isMagnifierFixed && !isPinching && !isDraggingMagnifier const showGrabbingCursor = imageSrc && imageStatus === "loaded" && isDraggingMagnifier const showDefaultCursor = imageSrc && imageStatus === "loaded" && !showCrosshairCursor && !showGrabbingCursor const handleCopyToClipboard = useCallback(async () => { setIsCopying(true) const blob = await generateMagnifiedImageAsBlob() if (blob) { const url = URL.createObjectURL(blob) const img = new Image() img.src = url img.onload = () => { const canvas = document.createElement("canvas") canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext("2d") if (ctx) { ctx.drawImage(img, 0, 0) canvas.toBlob((blob) => { if (blob) { navigator.clipboard .write([new ClipboardItem({ "image/png": blob })]) .then(() => { setShowCopySuccess(true) setTimeout(() => { setShowCopySuccess(false) setIsCopying(false) }, SUCCESS_DISPLAY_MS) }) .catch((error) => { console.error("Failed to copy image to clipboard:", error) toast({ variant: "destructive", title: "Copy Failed", description: "Could not copy the image to your clipboard.", }) setIsCopying(false) }) } }) } } } else { toast({ variant: "destructive", title: "Copy Failed", description: "Could not generate the image for copying.", }) setIsCopying(false) } }, [generateMagnifiedImageAsBlob, toast]) const handleDownload = useCallback(async () => { setIsDownloading(true) const blob = await generateMagnifiedImageAsBlob() if (blob) { const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "magnified-image.png" document.body.appendChild(a) a.click() document.body.removeChild(a) setShowDownloadSuccess(true) setTimeout(() => { setShowDownloadSuccess(false) setIsDownloading(false) }, SUCCESS_DISPLAY_MS) } else { toast({ variant: "destructive", title: "Download Failed", description: "Could not generate the image for downloading.", }) setIsDownloading(false) } }, [generateMagnifiedImageAsBlob, toast]) return ( {showMagnifierControls && (

{/* Zoom Level */}

Zoom Level: {zoomLevel.toFixed(1)}x

setZoomLevel(value[0])} className="cursor-default mt-2" />

{/* Magnifier Size */}

Magnifier Size: {Math.round(magnifierContentDiameter)}px

setMagnifierContentDiameter(value[0])} className="cursor-default mt-2" />

{/* Overlay Opacity */}

Overlay Opacity: {Math.round(dimOpacity * 100)}%

setDimOpacity(value[0])} className="cursor-default mt-2" />

{/* Border Color */}

Border Color

setMagnifierBorderColor(e.target.value)} className="w-full h-[2.6rem] border border-slate-300 dark:border-slate-700 hover:border-slate-500 dark:hover:border-slate-500 rounded-md cursor-default mt-2 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background" />

)} {showDropzoneArea ? (

{ if (imageStatus === "error") { return "border-red-500 dark:border-red-400 hover:border-red-600 dark:hover:border-red-500 bg-gray-50" } if (imageStatus === "loading") { return "bg-gray-50 border-input" } if (isDraggingOver) { return "border-primary bg-accent" } return "bg-gray-50 border-input hover:bg-gray-100 hover:border-primary/70" })(), )} onClick={imageStatus !== "loading" ? handleDropZoneClick : undefined} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={imageStatus !== "loading" ? handleDrop : undefined} >

{imageStatus === "loading" && showDelayedLoadingUI ? ( <>

Uploading Image...

) : ( <>

Upload Image

Drop an image here, paste from your clipboard, or click to select a file.

)}

{imageStatus === "error" && imageLoadError && (

{imageLoadError}

)}

) : (

{ if (imageStatus === "loaded" && !isPinching && !isDraggingMagnifier) setMagnifierActive(true) }} onMouseLeave={() => { if (imageStatus === "loaded" && !isMagnifierFixed && !isPinching && !isDraggingMagnifier) setMagnifierActive(false) setIsDraggingOver(false) }} onClick={handleClickOnImageContainer} onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={handleDrop} > Uploaded preview

{isMagnifierFixed && renderedImageDimensions && imageStatus === "loaded" && (

)} {imageSrc && imageStatus === "loaded" && renderedImageDimensions && renderedImageDimensions.width > 0 && renderedImageDimensions.height > 0 && (magnifierActive || isMagnifierFixed) &&

}

)} {showMagnifierControls && (

)} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="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" import { Analytics } from "@vercel/analytics/react" import { Suspense } from "react" const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }) const siteUrl = "https://magnify.so" export const metadata: Metadata = { metadataBase: new URL(siteUrl), title: { default: "Magnifying Glass Effect", template: "%s | magnify.so", }, description: "Easily add a professional magnifier effect to your screenshots. Customize zoom, size, and border for the perfect highlight.", openGraph: { title: "Magnifying Glass Effect", description: "Easily add a professional magnifier effect to your screenshots. Customize zoom, size, and border for the perfect highlight.", url: siteUrl, siteName: "magnify.so", images: [ { url: "/og-image.png", width: 1200, height: 630, alt: "magnify.so - Screenshot Magnifier Tool", }, ], locale: "en_US", type: "website", }, twitter: { card: "summary_large_image", title: "Magnifying Glass Effect", description: "Easily add a professional magnifier effect to your screenshots. Customize zoom, size, and border for the perfect highlight.", images: ["/og-image.png"], creator: "@s16h_", }, robots: { index: true, follow: true, googleBot: { index: true, follow: true, "max-video-preview": -1, "max-image-preview": "large", "max-snippet": -1, }, }, generator: "v0.dev", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" { "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": "15.5.6", "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": "^1.1.2", "zod": "3.25.76", "framer-motion": "12.23.24" }, "devDependencies": { "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "^5" } }