function MainComponent() { const [image, setImage] = useState(null); const [upload, { loading }] = useUpload(); const [activeMenu, setActiveMenu] = useState(""); const [adjustments, setAdjustments] = useState({ contrast: 100, saturation: 100, brightness: 100 }); const [transform, setTransform] = useState({ rotation: 0, flipHorizontal: false, flipVertical: false, width: 800, height: 600, cropX: 0, cropY: 0, cropWidth: 800, cropHeight: 600, isCropping: false }); const [drawingTool, setDrawingTool] = useState("pen"); const [drawingColor, setDrawingColor] = useState("#000000"); const [lineWidth, setLineWidth] = useState(5); const [isDrawing, setIsDrawing] = useState(false); const [startPoint, setStartPoint] = useState({ x: 0, y: 0 }); const canvasRef = useRef(null); const [textElements, setTextElements] = useState([]); const [newText, setNewText] = useState(""); const [textColor, setTextColor] = useState("#000000"); const [textSize, setTextSize] = useState(16); const [textFont, setTextFont] = useState("Arial"); const [error, setError] = useState(null); const [imagePrompt, setImagePrompt] = useState(""); const [analyzing, setAnalyzing] = useState(false); const [analysisResult, setAnalysisResult] = useState(""); const [generating, setGenerating] = useState(false); const [editHistory, setEditHistory] = useState([]); const [fileName, setFileName] = useState("edited-image.png"); const downloadImage = useCallback(()=>{ if (!image) return; const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const drawingCanvas = canvasRef.current; const img = new Image(); img.crossOrigin = "anonymous"; img.onerror = ()=>{ setError("Failed to load image for download"); }; img.onload = ()=>{ canvas.width = transform.isCropping ? transform.cropWidth : transform.width; canvas.height = transform.isCropping ? transform.cropHeight : transform.height; ctx.save(); ctx.translate(canvas.width / 2, canvas.height / 2); if (transform.rotation !== 0) { ctx.rotate(transform.rotation * Math.PI / 180); } if (transform.flipHorizontal || transform.flipVertical) { ctx.scale(transform.flipHorizontal ? -1 : 1, transform.flipVertical ? -1 : 1); } ctx.translate(-canvas.width / 2, -canvas.height / 2); ctx.filter = `contrast(${adjustments.contrast}%) saturate(${adjustments.saturation}%) brightness(${adjustments.brightness}%)`; if (transform.isCropping) { ctx.drawImage(img, transform.cropX, transform.cropY, transform.cropWidth, transform.cropHeight, 0, 0, canvas.width, canvas.height); } else { ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height); } if (drawingCanvas) { const drawingCtx = drawingCanvas.getContext("2d"); const drawingData = drawingCtx.getImageData(0, 0, drawingCanvas.width, drawingCanvas.height); const tempCanvas = document.createElement("canvas"); tempCanvas.width = canvas.width; tempCanvas.height = canvas.height; const tempCtx = tempCanvas.getContext("2d"); tempCtx.putImageData(drawingData, 0, 0); ctx.drawImage(tempCanvas, 0, 0, canvas.width, canvas.height); } textElements.forEach((element)=>{ ctx.save(); ctx.font = `${element.size}px ${element.font}`; ctx.fillStyle = element.color; if (transform.isCropping) { const x = (element.x - transform.cropX) * canvas.width / transform.cropWidth; const y = (element.y - transform.cropY) * canvas.height / transform.cropHeight; if (x >= 0 && x <= canvas.width && y >= 0 && y <= canvas.height) { ctx.fillText(element.text, x, y); } } else { const x = element.x * canvas.width / transform.width; const y = element.y * canvas.height / transform.height; ctx.fillText(element.text, x, y); } ctx.restore(); }); ctx.restore(); const downloadName = fileName.toLowerCase().endsWith(".png") ? fileName : `${fileName}.png`; canvas.toBlob((blob)=>{ const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = downloadName; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); }, "image/png"); }; img.src = image; }, [ image, adjustments, transform, textElements, canvasRef, fileName ]); const handleDrop = useCallback(async (e)=>{ e.preventDefault(); const file = e.dataTransfer.files[0]; if (file && file.type.startsWith("image/")) { const { url, error } = await upload({ file }); if (error) { setError(error); return; } setImage(url); setFileName(file.name); setEditHistory([]); } }, [ upload ]); const handleUpload = useCallback(async (e)=>{ const file = e.target.files[0]; if (file) { const { url, error } = await upload({ file }); if (error) { setError(error); return; } setImage(url); setFileName(file.name); setEditHistory([]); } }, [ upload ]); const saveEditState = useCallback(()=>{ const canvas = canvasRef.current; if (canvas) { const currentState = { canvasState: canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height), textElements: [ ...textElements ], adjustments: { ...adjustments }, transform: { ...transform } }; setEditHistory((prev)=>[ ...prev, currentState ]); } }, [ textElements, adjustments, transform ]); const undoLastEdit = useCallback(()=>{ if (editHistory.length > 0) { const previousState = editHistory[editHistory.length - 1]; const canvas = canvasRef.current; if (canvas && previousState.canvasState) { const ctx = canvas.getContext("2d"); ctx.putImageData(previousState.canvasState, 0, 0); } setTextElements(previousState.textElements); setAdjustments(previousState.adjustments); setTransform(previousState.transform); setEditHistory((prev)=>prev.slice(0, -1)); } }, [ editHistory ]); const startDrawing = useCallback((e)=>{ const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const x = (e.clientX - rect.left) * scaleX; const y = (e.clientY - rect.top) * scaleY; setIsDrawing(true); setStartPoint({ x, y }); const ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(x, y); canvas.savedData = ctx.getImageData(0, 0, canvas.width, canvas.height); saveEditState(); }, [ saveEditState ]); const draw = useCallback((e)=>{ if (!isDrawing) return; const canvas = canvasRef.current; if (!canvas) return; const rect = canvas.getBoundingClientRect(); const scaleX = canvas.width / rect.width; const scaleY = canvas.height / rect.height; const x = (e.clientX - rect.left) * scaleX; const y = (e.clientY - rect.top) * scaleY; const ctx = canvas.getContext("2d"); ctx.strokeStyle = drawingColor; ctx.fillStyle = drawingColor; ctx.lineWidth = lineWidth; ctx.lineCap = "round"; switch(drawingTool){ case "pen": ctx.lineTo(x, y); ctx.stroke(); break; case "eraser": ctx.globalCompositeOperation = "destination-out"; ctx.lineTo(x, y); ctx.stroke(); ctx.globalCompositeOperation = "source-over"; break; case "line": ctx.putImageData(canvas.savedData, 0, 0); ctx.beginPath(); ctx.moveTo(startPoint.x, startPoint.y); ctx.lineTo(x, y); ctx.stroke(); break; case "rectangle": ctx.putImageData(canvas.savedData, 0, 0); ctx.beginPath(); ctx.rect(startPoint.x, startPoint.y, x - startPoint.x, y - startPoint.y); ctx.stroke(); break; case "circle": ctx.putImageData(canvas.savedData, 0, 0); ctx.beginPath(); const radius = Math.sqrt(Math.pow(x - startPoint.x, 2) + Math.pow(y - startPoint.y, 2)); ctx.arc(startPoint.x, startPoint.y, radius, 0, 2 * Math.PI); ctx.stroke(); break; case "highlighter": ctx.globalAlpha = 0.3; ctx.lineTo(x, y); ctx.stroke(); ctx.globalAlpha = 1.0; break; case "spray": const density = 50; const sprayRadius = lineWidth * 2; for(let i = 0; i < density; i++){ const angle = Math.random() * 2 * Math.PI; const r = Math.random() * sprayRadius; ctx.beginPath(); ctx.arc(x + r * Math.cos(angle), y + r * Math.sin(angle), 1, 0, 2 * Math.PI); ctx.fill(); } break; } }, [ isDrawing, drawingColor, lineWidth, drawingTool, startPoint ]); const stopDrawing = useCallback(()=>{ setIsDrawing(false); const canvas = canvasRef.current; if (canvas) { canvas.savedData = canvas.getContext("2d").getImageData(0, 0, canvas.width, canvas.height); } }, []); const analyzeImage = useCallback(async ()=>{ if (!image) return; setAnalyzing(true); try { const response = await fetch("/integrations/gpt-vision/", { method: "POST", body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: "Describe this image in detail" }, { type: "image_url", image_url: { url: image } } ] } ] }) }); const data = await response.json(); setAnalysisResult(data.choices[0].message.content); } catch (err) { setError("Failed to analyze image"); } finally{ setAnalyzing(false); } }, [ image ]); const generateImage = useCallback(async ()=>{ if (!imagePrompt) return; setGenerating(true); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(imagePrompt)}`, { method: "GET" }); if (!response.ok) { throw new Error("Failed to generate image"); } const data = await response.json(); if (!data.data || !data.data[0]) { throw new Error("No image generated"); } const imageUrl = data.data[0]; setImage(imageUrl); const promptFileName = imagePrompt.slice(0, 30).replace(/[^a-z0-9]/gi, "-").toLowerCase(); setFileName(`${promptFileName}-ai-generated.png`); setTransform({ rotation: 0, flipHorizontal: false, flipVertical: false, width: 800, height: 600 }); setGenerating(false); } catch (err) { setError("Failed to generate image"); setGenerating(false); } }, [ imagePrompt ]); const addText = useCallback(()=>{ if (newText.trim()) { saveEditState(); setTextElements((prev)=>[ ...prev, { id: Date.now(), text: newText, x: 50, y: 50, color: textColor, size: textSize, font: textFont, rotation: 0, isDragging: false } ]); setNewText(""); } }, [ newText, textColor, textSize, textFont, saveEditState ]); const removeText = useCallback((id)=>{ saveEditState(); setTextElements((prev)=>prev.filter((item)=>item.id !== id)); }, [ saveEditState ]); const fonts = [ "Arial", "Times New Roman", "Courier New", "Georgia", "Verdana", "Helvetica", "Palatino", "Garamond", "Bookman", "Comic Sans MS", "Trebuchet MS", "Arial Black", "Impact", "Lucida Sans", "Tahoma", "Century Gothic", "Copperplate", "Optima", "Futura", "Calibri" ]; const handleTextDragStart = useCallback((e, id)=>{ e.preventDefault(); const textElement = textElements.find((el)=>el.id === id); if (textElement) { const rect = e.target.getBoundingClientRect(); const offsetX = e.clientX - rect.left; const offsetY = e.clientY - rect.top; const handleMouseMove = (moveEvent)=>{ const canvas = canvasRef.current; if (!canvas) return; const canvasRect = canvas.getBoundingClientRect(); const x = moveEvent.clientX - canvasRect.left - offsetX; const y = moveEvent.clientY - canvasRect.top - offsetY; setTextElements((prev)=>prev.map((el)=>el.id === id ? { ...el, x: Math.max(0, Math.min(x, canvasRect.width - 100)), y: Math.max(0, Math.min(y, canvasRect.height - 30)) } : el)); }; const handleMouseUp = ()=>{ document.removeEventListener("mousemove", handleMouseMove); document.removeEventListener("mouseup", handleMouseUp); saveEditState(); }; document.addEventListener("mousemove", handleMouseMove); document.addEventListener("mouseup", handleMouseUp); } }, [ textElements, saveEditState ]); const handleRotate = useCallback((degrees)=>{ setTransform((prev)=>({ ...prev, rotation: (prev.rotation + degrees + 360) % 360 })); saveEditState(); }, [ saveEditState ]); const handleFlip = useCallback((direction)=>{ setTransform((prev)=>({ ...prev, flipHorizontal: direction === "horizontal" ? !prev.flipHorizontal : prev.flipHorizontal, flipVertical: direction === "vertical" ? !prev.flipVertical : prev.flipVertical })); saveEditState(); }, [ saveEditState ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-[#1a3837] to-[#2d4f4d] p-4", __source: { fileName: "", lineNumber: 534, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto bg-[#1e1e1e] rounded-lg shadow-xl p-6", __source: { fileName: "", lineNumber: 535, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 mb-6", __source: { fileName: "", lineNumber: 536, columnNumber: 9 }, __self: this }, [ "Adjustments", "Transform", "Drawing", "Text", "AI" ].map((menu)=>/*#__PURE__*/ React.createElement("button", { key: menu, onClick: ()=>setActiveMenu(menu), className: `px-4 py-2 rounded-lg font-semibold ${activeMenu === menu ? "bg-[#2d4f4d] text-white" : "bg-[#1a3837] hover:bg-[#2d4f4d] text-[#b2dfdb]"}`, __source: { fileName: "", lineNumber: 538, columnNumber: 13 }, __self: this }, menu)), image && /*#__PURE__*/ React.createElement("div", { className: "ml-auto flex gap-2 items-center", __source: { fileName: "", lineNumber: 551, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: fileName, onChange: (e)=>setFileName(e.target.value), placeholder: "File name", className: "px-2 py-1 rounded bg-[#1e1e1e] text-white border border-[#2d4f4d]", name: "fileName", __source: { fileName: "", lineNumber: 552, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: image, download: fileName, className: "px-4 py-2 rounded-lg font-semibold bg-[#1a3837] text-white hover:bg-[#2d4f4d]", __source: { fileName: "", lineNumber: 560, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2", __source: { fileName: "", lineNumber: 565, columnNumber: 17 }, __self: this }), "Download Original"), /*#__PURE__*/ React.createElement("button", { onClick: downloadImage, className: "px-4 py-2 rounded-lg font-semibold bg-[#1a3837] text-white hover:bg-[#2d4f4d]", __source: { fileName: "", lineNumber: 568, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paint-brush mr-2", __source: { fileName: "", lineNumber: 572, columnNumber: 17 }, __self: this }), "Download Edited"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-6", __source: { fileName: "", lineNumber: 579, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-3/4", __source: { fileName: "", lineNumber: 580, columnNumber: 11 }, __self: this }, !image ? /*#__PURE__*/ React.createElement("div", { onDrop: handleDrop, onDragOver: (e)=>e.preventDefault(), className: "border-4 border-dashed border-[#2d4f4d] rounded-lg h-[600px] flex items-center justify-center bg-[#1a3837]", __source: { fileName: "", lineNumber: 582, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 587, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleUpload, className: "hidden", id: "imageUpload", name: "imageUpload", __source: { fileName: "", lineNumber: 588, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "imageUpload", className: "bg-[#2d4f4d] text-white px-6 py-3 rounded-lg cursor-pointer hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 596, columnNumber: 19 }, __self: this }, "Upload Image or Drag & Drop"))) : /*#__PURE__*/ React.createElement("div", { className: "relative h-[600px] border rounded-lg overflow-hidden bg-[#1e1e1e] flex items-center justify-center", __source: { fileName: "", lineNumber: 605, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, width: transform.width, height: transform.height, onMouseDown: activeMenu !== "Text" ? startDrawing : undefined, onMouseMove: activeMenu !== "Text" ? draw : undefined, onMouseUp: activeMenu !== "Text" ? stopDrawing : undefined, onMouseOut: activeMenu !== "Text" ? stopDrawing : undefined, className: "absolute top-0 left-0 w-full h-full z-10", style: { pointerEvents: activeMenu === "Text" ? "none" : "auto" }, __source: { fileName: "", lineNumber: 606, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", style: { overflow: "hidden", clipPath: transform.isCropping ? `inset(${transform.cropY}px ${transform.width - (transform.cropX + transform.cropWidth)}px ${transform.height - (transform.cropY + transform.cropHeight)}px ${transform.cropX}px)` : "none" }, __source: { fileName: "", lineNumber: 619, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: image, alt: "Edited image preview", className: "max-w-full max-h-full w-auto h-auto object-contain select-text", style: { filter: ` contrast(${adjustments.contrast}%) saturate(${adjustments.saturation}%) brightness(${adjustments.brightness}%) `, transform: ` rotate(${transform.rotation}deg) scaleX(${transform.flipHorizontal ? -1 : 1}) scaleY(${transform.flipVertical ? -1 : 1}) `, WebkitUserSelect: "auto", userSelect: "auto", pointerEvents: "auto" }, onContextMenu: (e)=>e.stopPropagation(), draggable: "true", __source: { fileName: "", lineNumber: 634, columnNumber: 19 }, __self: this })), textElements.map((element)=>/*#__PURE__*/ React.createElement("div", { key: element.id, onMouseDown: (e)=>handleTextDragStart(e, element.id), style: { position: "absolute", left: `${element.x}px`, top: `${element.y}px`, color: element.color, fontSize: `${element.size}px`, fontFamily: element.font, transform: `rotate(${element.rotation}deg)`, cursor: "move", userSelect: "none", padding: "5px", borderRadius: "4px", backgroundColor: "rgba(26, 56, 55, 0.1)", display: "flex", alignItems: "center", gap: "8px", zIndex: activeMenu === "Text" ? 20 : 10 }, __source: { fileName: "", lineNumber: 658, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 680, columnNumber: 21 }, __self: this }, element.text), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); removeText(element.id); }, className: "bg-[#c62828] text-white rounded-full w-5 h-5 flex items-center justify-center text-xs hover:bg-[#b71c1c] transition-colors", __source: { fileName: "", lineNumber: 681, columnNumber: 21 }, __self: this }, "×"))))), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-1/4 bg-[#1a3837] p-4 rounded-lg", __source: { fileName: "", lineNumber: 696, columnNumber: 11 }, __self: this }, activeMenu === "Adjustments" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 698, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 699, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#b2dfdb]", __source: { fileName: "", lineNumber: 700, columnNumber: 19 }, __self: this }, "Contrast"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "200", value: adjustments.contrast, onChange: (e)=>setAdjustments((prev)=>({ ...prev, contrast: e.target.value })), className: "w-full", name: "contrast", __source: { fileName: "", lineNumber: 701, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 716, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#b2dfdb]", __source: { fileName: "", lineNumber: 717, columnNumber: 19 }, __self: this }, "Saturation"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "200", value: adjustments.saturation, onChange: (e)=>setAdjustments((prev)=>({ ...prev, saturation: e.target.value })), className: "w-full", name: "saturation", __source: { fileName: "", lineNumber: 720, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 735, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#b2dfdb]", __source: { fileName: "", lineNumber: 736, columnNumber: 19 }, __self: this }, "Brightness"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "0", max: "200", value: adjustments.brightness, onChange: (e)=>setAdjustments((prev)=>({ ...prev, brightness: e.target.value })), className: "w-full", name: "brightness", __source: { fileName: "", lineNumber: 739, columnNumber: 19 }, __self: this }))), activeMenu === "Transform" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 758, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 759, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRotate(-90), className: "p-2 rounded bg-[#2d4f4d] text-white hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 760, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo mr-2", __source: { fileName: "", lineNumber: 764, columnNumber: 21 }, __self: this }), "Rotate Left"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRotate(90), className: "p-2 rounded bg-[#2d4f4d] text-white hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 767, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo mr-2", __source: { fileName: "", lineNumber: 771, columnNumber: 21 }, __self: this }), "Rotate Right"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleFlip("horizontal"), className: "p-2 rounded bg-[#2d4f4d] text-white hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 774, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrows-alt-h mr-2", __source: { fileName: "", lineNumber: 778, columnNumber: 21 }, __self: this }), "Flip Horizontal"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleFlip("vertical"), className: "p-2 rounded bg-[#2d4f4d] text-white hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 781, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrows-alt-v mr-2", __source: { fileName: "", lineNumber: 785, columnNumber: 21 }, __self: this }), "Flip Vertical")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 789, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#b2dfdb]", __source: { fileName: "", lineNumber: 790, columnNumber: 19 }, __self: this }, "Crop"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 791, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 792, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-[#b2dfdb] mb-1", __source: { fileName: "", lineNumber: 793, columnNumber: 23 }, __self: this }, "X Position"), /*#__PURE__*/ React.createElement("input", { type: "number", value: transform.cropX, onChange: (e)=>setTransform((prev)=>({ ...prev, cropX: parseInt(e.target.value) })), className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d]", min: "0", name: "cropX", __source: { fileName: "", lineNumber: 796, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 810, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-[#b2dfdb] mb-1", __source: { fileName: "", lineNumber: 811, columnNumber: 23 }, __self: this }, "Y Position"), /*#__PURE__*/ React.createElement("input", { type: "number", value: transform.cropY, onChange: (e)=>setTransform((prev)=>({ ...prev, cropY: parseInt(e.target.value) })), className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d]", min: "0", name: "cropY", __source: { fileName: "", lineNumber: 814, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 828, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-[#b2dfdb] mb-1", __source: { fileName: "", lineNumber: 829, columnNumber: 23 }, __self: this }, "Crop Width"), /*#__PURE__*/ React.createElement("input", { type: "number", value: transform.cropWidth, onChange: (e)=>setTransform((prev)=>({ ...prev, cropWidth: parseInt(e.target.value) })), className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d]", min: "1", name: "cropWidth", __source: { fileName: "", lineNumber: 832, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 846, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-[#b2dfdb] mb-1", __source: { fileName: "", lineNumber: 847, columnNumber: 23 }, __self: this }, "Crop Height"), /*#__PURE__*/ React.createElement("input", { type: "number", value: transform.cropHeight, onChange: (e)=>setTransform((prev)=>({ ...prev, cropHeight: parseInt(e.target.value) })), className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d]", min: "1", name: "cropHeight", __source: { fileName: "", lineNumber: 850, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTransform((prev)=>({ ...prev, isCropping: !prev.isCropping })), className: `w-full p-2 rounded ${transform.isCropping ? "bg-[#c62828] hover:bg-[#b71c1c]" : "bg-[#2d4f4d] hover:bg-[#1a3837]"} text-white`, __source: { fileName: "", lineNumber: 865, columnNumber: 19 }, __self: this }, transform.isCropping ? "Cancel Crop" : "Apply Crop")), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 881, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#b2dfdb]", __source: { fileName: "", lineNumber: 882, columnNumber: 19 }, __self: this }, "Image Size"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 883, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 884, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-[#b2dfdb] mb-1", __source: { fileName: "", lineNumber: 885, columnNumber: 23 }, __self: this }, "Width"), /*#__PURE__*/ React.createElement("input", { type: "number", value: transform.width, onChange: (e)=>setTransform((prev)=>({ ...prev, width: parseInt(e.target.value) })), className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d]", min: "1", name: "width", __source: { fileName: "", lineNumber: 888, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 902, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm text-[#b2dfdb] mb-1", __source: { fileName: "", lineNumber: 903, columnNumber: 23 }, __self: this }, "Height"), /*#__PURE__*/ React.createElement("input", { type: "number", value: transform.height, onChange: (e)=>setTransform((prev)=>({ ...prev, height: parseInt(e.target.value) })), className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d]", min: "1", name: "height", __source: { fileName: "", lineNumber: 906, columnNumber: 23 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-2 mt-2", __source: { fileName: "", lineNumber: 921, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTransform((prev)=>({ ...prev, width: 800, height: 600 })), className: "p-2 rounded bg-[#2d4f4d] text-white hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 922, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-expand mr-2", __source: { fileName: "", lineNumber: 932, columnNumber: 23 }, __self: this }), "Default (800x600)"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTransform((prev)=>({ ...prev, width: 1920, height: 1080 })), className: "p-2 rounded bg-[#2d4f4d] text-white hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 935, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-expand-arrows-alt mr-2", __source: { fileName: "", lineNumber: 945, columnNumber: 23 }, __self: this }), "HD (1920x1080)"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTransform((prev)=>({ ...prev, width: 1080, height: 1080 })), className: "p-2 rounded bg-[#2d4f4d] text-white hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 948, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-square mr-2", __source: { fileName: "", lineNumber: 958, columnNumber: 23 }, __self: this }), "Square (1080x1080)"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTransform((prev)=>({ ...prev, width: 1080, height: 1350 })), className: "p-2 rounded bg-[#2d4f4d] text-white hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 961, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-mobile-alt mr-2", __source: { fileName: "", lineNumber: 971, columnNumber: 23 }, __self: this }), "Story (1080x1350)")))), activeMenu === "Drawing" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 980, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-2 mb-4", __source: { fileName: "", lineNumber: 981, columnNumber: 17 }, __self: this }, [ "pen", "eraser", "line", "rectangle", "circle", "highlighter", "spray" ].map((tool)=>/*#__PURE__*/ React.createElement("button", { key: tool, onClick: ()=>setDrawingTool(tool), className: `p-2 rounded ${drawingTool === tool ? "bg-[#2d4f4d] text-white" : "bg-[#1a3837] text-[#b2dfdb] hover:bg-[#2d4f4d]"}`, __source: { fileName: "", lineNumber: 991, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${tool === "pen" ? "pencil-alt" : tool === "highlighter" ? "highlighter" : tool === "spray" ? "spray-can" : tool}`, __source: { fileName: "", lineNumber: 1000, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1014, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#b2dfdb]", __source: { fileName: "", lineNumber: 1015, columnNumber: 19 }, __self: this }, "Color"), /*#__PURE__*/ React.createElement("input", { type: "color", value: drawingColor, onChange: (e)=>setDrawingColor(e.target.value), className: "w-full", name: "drawingColor", __source: { fileName: "", lineNumber: 1016, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1024, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#b2dfdb]", __source: { fileName: "", lineNumber: 1025, columnNumber: 19 }, __self: this }, "Line Width"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "50", value: lineWidth, onChange: (e)=>setLineWidth(e.target.value), className: "w-full", name: "lineWidth", __source: { fileName: "", lineNumber: 1028, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 1038, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: undoLastEdit, disabled: editHistory.length === 0, className: "w-full bg-[#c62828] text-white py-2 rounded hover:bg-[#b71c1c] disabled:bg-[#1a3837]", __source: { fileName: "", lineNumber: 1039, columnNumber: 19 }, __self: this }, "Undo"))), activeMenu === "Text" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 1051, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: newText, onChange: (e)=>setNewText(e.target.value), placeholder: "Enter text", className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d]", name: "newText", __source: { fileName: "", lineNumber: 1052, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1060, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#b2dfdb]", __source: { fileName: "", lineNumber: 1061, columnNumber: 19 }, __self: this }, "Text Color"), /*#__PURE__*/ React.createElement("input", { type: "color", value: textColor, onChange: (e)=>setTextColor(e.target.value), className: "w-full", name: "textColor", __source: { fileName: "", lineNumber: 1064, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1072, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-[#b2dfdb]", __source: { fileName: "", lineNumber: 1073, columnNumber: 19 }, __self: this }, "Text Size"), /*#__PURE__*/ React.createElement("input", { type: "number", value: textSize, onChange: (e)=>setTextSize(e.target.value), className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d]", min: "8", max: "72", name: "textSize", __source: { fileName: "", lineNumber: 1074, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("select", { value: textFont, onChange: (e)=>setTextFont(e.target.value), className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d]", name: "textFont", __source: { fileName: "", lineNumber: 1084, columnNumber: 17 }, __self: this }, fonts.map((font)=>/*#__PURE__*/ React.createElement("option", { key: font, value: font, __source: { fileName: "", lineNumber: 1091, columnNumber: 21 }, __self: this }, font))), /*#__PURE__*/ React.createElement("button", { onClick: addText, className: "w-full bg-[#2d4f4d] text-white py-2 rounded hover:bg-[#1a3837]", __source: { fileName: "", lineNumber: 1096, columnNumber: 17 }, __self: this }, "Add Text")), activeMenu === "AI" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 1106, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 1107, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: imagePrompt, onChange: (e)=>setImagePrompt(e.target.value), placeholder: "Enter prompt for image generation...", className: "w-full p-2 border rounded bg-[#1e1e1e] text-white border-[#2d4f4d] mb-2", rows: "3", name: "imagePrompt", __source: { fileName: "", lineNumber: 1108, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: generating || !imagePrompt, className: "w-full bg-[#2d4f4d] text-white py-2 rounded hover:bg-[#1a3837] disabled:bg-[#1e1e1e]", __source: { fileName: "", lineNumber: 1116, columnNumber: 19 }, __self: this }, generating ? "Generating..." : "Generate Image")), /*#__PURE__*/ React.createElement("button", { onClick: analyzeImage, disabled: analyzing || !image, className: "w-full bg-[#2d4f4d] text-white py-2 rounded hover:bg-[#1a3837] disabled:bg-[#1e1e1e]", __source: { fileName: "", lineNumber: 1124, columnNumber: 17 }, __self: this }, analyzing ? "Analyzing..." : "Analyze Image"), analysisResult && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-3 bg-[#1e1e1e] rounded text-[#b2dfdb] border border-[#2d4f4d]", __source: { fileName: "", lineNumber: 1132, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 1133, columnNumber: 21 }, __self: this }, "Analysis Result:"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 1134, columnNumber: 21 }, __self: this }, analysisResult))))))); }