@kasuvia/sdk 0.0.8 → 0.0.9

package/src/components/shared/ImageEditorModal.tsx

@@ -0,0 +1,1066 @@
+"use client";
+
+import {
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+  useMemo,
+} from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import {
+  Camera,
+  Check,
+  Contrast as ContrastIcon,
+  Crop,
+  FlipHorizontal,
+  FlipVertical,
+  Image as ImageIcon,
+  Info,
+  Loader2,
+  Maximize2,
+  Move,
+  RectangleHorizontal,
+  RectangleVertical,
+  RotateCcw,
+  RotateCw,
+  Sliders,
+  Smartphone,
+  Sparkles,
+  Square,
+  Sun,
+  Tv,
+  Upload,
+  Wand2,
+  X,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
+import { toast } from "sonner";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface ImageEditorModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onImageSelect: (processedImage: Blob, fileName: string) => void;
+  aspectRatio?: number;
+  /** Max file size in bytes. Defaults to 10 MB. */
+  maxFileSize?: number;
+  acceptedFormats?: string[];
+  maxDimension?: number;
+  initialFile?: File | null;
+  /** Output blob format. Defaults to "image/jpeg". Pass "image/png" for alpha. */
+  outputFormat?: "image/jpeg" | "image/png";
+  /** JPEG export quality 0–1. */
+  outputQuality?: number;
+  /** Minimum output dimensions. */
+  minWidth?: number;
+  minHeight?: number;
+}
+
+interface AspectPreset {
+  label: string;
+  ratio: number | undefined;
+  icon: React.ReactNode;
+}
+
+interface CropBox {
+  x: number; // fraction 0..1 of frame container width
+  y: number;
+  w: number;
+  h: number;
+}
+
+type HandleType =
+  | "nw" | "n" | "ne"
+  | "w" | "e"
+  | "sw" | "s" | "se"
+  | "body"
+  | null;
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+const HANDLE_SIZE = 14; // px
+const DEFAULT_CROP: CropBox = { x: 0.05, y: 0.05, w: 0.9, h: 0.9 };
+
+const ASPECT_PRESETS: AspectPreset[] = [
+  { label: "Free",           ratio: undefined, icon: <Move             className="w-3.5 h-3.5" /> },
+  { label: "Original",       ratio: -1,        icon: <ImageIcon        className="w-3.5 h-3.5" /> },
+  { label: "1 : 1",          ratio: 1,         icon: <Square           className="w-3.5 h-3.5" /> },
+  { label: "16 : 9",         ratio: 16 / 9,    icon: <Tv               className="w-3.5 h-3.5" /> },
+  { label: "9 : 16",         ratio: 9 / 16,    icon: <Smartphone       className="w-3.5 h-3.5" /> },
+  { label: "4 : 3",          ratio: 4 / 3,     icon: <RectangleHorizontal className="w-3.5 h-3.5" /> },
+  { label: "3 : 4",          ratio: 3 / 4,     icon: <RectangleVertical   className="w-3.5 h-3.5" /> },
+  { label: "4 : 5",          ratio: 4 / 5,     icon: <RectangleVertical   className="w-3.5 h-3.5" /> },
+  { label: "3 : 2",          ratio: 3 / 2,     icon: <RectangleHorizontal className="w-3.5 h-3.5" /> },
+  { label: "2 : 3",          ratio: 2 / 3,     icon: <RectangleVertical   className="w-3.5 h-3.5" /> },
+];
+
+const HANDLE_DEFS = [
+  { key: "nw" as HandleType, cursor: "nwse-resize", style: { left: -7, top: -7 } },
+  { key: "ne" as HandleType, cursor: "nesw-resize", style: { right: -7, top: -7 } },
+  { key: "sw" as HandleType, cursor: "nesw-resize", style: { left: -7, bottom: -7 } },
+  { key: "se" as HandleType, cursor: "nwse-resize", style: { right: -7, bottom: -7 } },
+  { key: "n"  as HandleType, cursor: "ns-resize",   style: { left: "calc(50% - 7px)", top: -7, width: 14 } },
+  { key: "s"  as HandleType, cursor: "ns-resize",   style: { left: "calc(50% - 7px)", bottom: -7, width: 14 } },
+  { key: "w"  as HandleType, cursor: "ew-resize",   style: { top: "calc(50% - 7px)", left: -7, height: 14 } },
+  { key: "e"  as HandleType, cursor: "ew-resize",   style: { top: "calc(50% - 7px)", right: -7, height: 14 } },
+] as const;
+
+// ─── Helper Components ────────────────────────────────────────────────────────
+
+function InlineSlider({
+  value,
+  onValueChange,
+  min,
+  max,
+  step = 1,
+  className,
+}: {
+  value: number[];
+  onValueChange: (value: number[]) => void;
+  min: number;
+  max: number;
+  step?: number;
+  className?: string;
+}) {
+  return (
+    <input
+      type="range"
+      min={min}
+      max={max}
+      step={step}
+      value={value[0]}
+      onChange={(e) => onValueChange([parseFloat(e.target.value)])}
+      className={`w-full h-1.5 bg-muted rounded-lg appearance-none cursor-pointer accent-primary ${className ?? ""}`}
+    />
+  );
+}
+
+// ─── Main Component ───────────────────────────────────────────────────────────
+
+/**
+ * ImageEditorModal — Studio-grade full-screen image editor.
+ *
+ * Features:
+ * - Fullscreen, theme-aware responsive modal layout
+ * - File drop / camera photo capture
+ * - Freehand / aspect-locked crop selection box with handles & rule-of-thirds grid
+ * - Pan, zoom, rotation slider, ±90° rotate buttons, horizontal & vertical flip
+ * - Brightness, contrast, saturation, blur adjustments
+ * - Offscreen canvas export slicing exact crop region into JPEG/PNG Blob
+ */
+export function ImageEditorModal({
+  open,
+  onOpenChange,
+  onImageSelect,
+  aspectRatio: initialAspectRatio,
+  maxFileSize = 10 * 1024 * 1024,
+  acceptedFormats = ["image/jpeg", "image/png", "image/webp"],
+  maxDimension = 4000,
+  initialFile = null,
+  outputFormat = "image/jpeg",
+  outputQuality = 0.92,
+  minWidth,
+  minHeight,
+}: ImageEditorModalProps) {
+  // ── Image source ──────────────────────────────────────────────────────────
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [fileName, setFileName] = useState("");
+  const [sourceDimensions, setSourceDimensions] = useState<{ width: number; height: number } | null>(null);
+
+  // ── Active tool panel ──────────────────────────────────────────────────────
+  const [activeTab, setActiveTab] = useState<"crop" | "adjust">("crop");
+
+  // ── Transform state ────────────────────────────────────────────────────────
+  const [pan, setPan]           = useState({ x: 0, y: 0 });
+  const [zoom, setZoom]         = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const [flipX, setFlipX]       = useState(false);
+  const [flipY, setFlipY]       = useState(false);
+
+  // ── Adjustment state ───────────────────────────────────────────────────────
+  const [brightness, setBrightness] = useState(0);  // -100..100
+  const [contrast, setContrast]     = useState(0);
+  const [saturation, setSaturation] = useState(0);
+  const [blur, setBlur]             = useState(0);   // 0..10px
+
+  // ── Crop state ─────────────────────────────────────────────────────────────
+  const [activePresetRatio, setActivePresetRatio] = useState<number | undefined>(initialAspectRatio);
+  const [cropBox, setCropBox] = useState<CropBox>(DEFAULT_CROP);
+  const [isDraggingBox, setIsDraggingBox] = useState(false);
+
+  // ── UI state ───────────────────────────────────────────────────────────────
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [showCamera, setShowCamera]     = useState(false);
+  const [isCameraStarting, setIsCameraStarting] = useState(false);
+  const [cameraSupported] = useState(
+    () => typeof navigator !== "undefined" && !!navigator.mediaDevices?.getUserMedia
+  );
+
+  // ── Refs ───────────────────────────────────────────────────────────────────
+  const frameRef     = useRef<HTMLDivElement>(null);
+  const canvasRef    = useRef<HTMLCanvasElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const videoRef     = useRef<HTMLVideoElement>(null);
+  const cameraStreamRef = useRef<MediaStream | null>(null);
+  const loadedInitialFileRef = useRef<File | null>(null);
+
+  const dragStartRef = useRef<{
+    handle: HandleType;
+    startBox: CropBox;
+    startMousePx: { x: number; y: number };
+    frameRect: DOMRect;
+  } | null>(null);
+
+  // ── Helpers ────────────────────────────────────────────────────────────────
+  const clamp = (v: number, lo: number, hi: number) => Math.max(lo, Math.min(hi, v));
+
+  const effectiveAspectRatio = useMemo(() => {
+    if (activePresetRatio === -1 && sourceDimensions) {
+      return sourceDimensions.width / sourceDimensions.height;
+    }
+    return activePresetRatio && activePresetRatio > 0 ? activePresetRatio : undefined;
+  }, [activePresetRatio, sourceDimensions]);
+
+  const isSourceBelowMin = useMemo(() => {
+    if (!sourceDimensions) return false;
+    return (
+      (minWidth  && sourceDimensions.width  < minWidth)  ||
+      (minHeight && sourceDimensions.height < minHeight)
+    );
+  }, [sourceDimensions, minWidth, minHeight]);
+
+  const filterStyle = useMemo(() => {
+    const b = 100 + brightness;
+    const c = 100 + contrast;
+    const s = 100 + saturation;
+    return `brightness(${b}%) contrast(${c}%) saturate(${s}%) blur(${blur}px)`;
+  }, [brightness, contrast, saturation, blur]);
+
+  // ── Reset ──────────────────────────────────────────────────────────────────
+  const resetEdits = useCallback(() => {
+    setPan({ x: 0, y: 0 });
+    setZoom(1);
+    setRotation(0);
+    setFlipX(false);
+    setFlipY(false);
+    setBrightness(0);
+    setContrast(0);
+    setSaturation(0);
+    setBlur(0);
+    setCropBox(DEFAULT_CROP);
+    setActivePresetRatio(initialAspectRatio);
+  }, [initialAspectRatio]);
+
+  const resetModal = useCallback(() => {
+    setImageSrc(null);
+    setSourceDimensions(null);
+    setFileName("");
+    setShowCamera(false);
+    resetEdits();
+    if (fileInputRef.current) fileInputRef.current.value = "";
+  }, [resetEdits]);
+
+  const stopCamera = useCallback(() => {
+    cameraStreamRef.current?.getTracks().forEach((t) => t.stop());
+    cameraStreamRef.current = null;
+  }, []);
+
+  const handleClose = useCallback(() => {
+    stopCamera();
+    resetModal();
+    onOpenChange(false);
+  }, [stopCamera, resetModal, onOpenChange]);
+
+  // ── Keyboard & scroll lock ─────────────────────────────────────────────────
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => { if (e.key === "Escape") handleClose(); };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, handleClose]);
+
+  useEffect(() => {
+    document.body.style.overflow = open ? "hidden" : "";
+    return () => { document.body.style.overflow = ""; };
+  }, [open]);
+
+  // ── Camera ─────────────────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!showCamera) return;
+    let cancelled = false;
+    (async () => {
+      setIsCameraStarting(true);
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" }, audio: false });
+        if (cancelled) { stream.getTracks().forEach((t) => t.stop()); return; }
+        cameraStreamRef.current = stream;
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream;
+          await videoRef.current.play();
+        }
+      } catch (err) {
+        if (!cancelled) {
+          toast.error("Camera access denied", {
+            description: err instanceof Error ? err.message : "Grant camera permission in your browser settings.",
+          });
+          setShowCamera(false);
+        }
+      } finally {
+        if (!cancelled) setIsCameraStarting(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [showCamera]);
+
+  useEffect(() => () => { cameraStreamRef.current?.getTracks().forEach((t) => t.stop()); }, []);
+
+  // ── File loading ───────────────────────────────────────────────────────────
+  const loadFile = useCallback(
+    (file: File) => {
+      if (file.size > maxFileSize) {
+        toast.error("File too large", { description: `Maximum file size is ${(maxFileSize / 1024 / 1024).toFixed(1)} MB.` });
+        return;
+      }
+      if (!acceptedFormats.includes(file.type)) {
+        toast.error("Unsupported file format", {
+          description: `Accepted formats: ${acceptedFormats.map((f) => f.split("/")[1]?.toUpperCase()).join(", ")}`,
+        });
+        return;
+      }
+      if (file.type === "image/svg+xml") {
+        onImageSelect(file, file.name);
+        onOpenChange(false);
+        toast.success("Image selected");
+        return;
+      }
+      setFileName(file.name);
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result as string;
+        const img = new Image();
+        img.onload = () => {
+          setSourceDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+          setImageSrc(dataUrl);
+          setCropBox(DEFAULT_CROP);
+          setPan({ x: 0, y: 0 });
+          setZoom(1);
+          if (
+            (minWidth  && img.naturalWidth  < minWidth) ||
+            (minHeight && img.naturalHeight < minHeight)
+          ) {
+            toast.info("Low-resolution image", {
+              description: `Source is ${img.naturalWidth}×${img.naturalHeight}px. It will be upscaled to meet the ${minWidth ?? img.naturalWidth}×${minHeight ?? img.naturalHeight}px target.`,
+            });
+          }
+        };
+        img.src = dataUrl;
+      };
+      reader.readAsDataURL(file);
+    },
+    [maxFileSize, acceptedFormats, minWidth, minHeight, onImageSelect, onOpenChange]
+  );
+
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) loadFile(file);
+    },
+    [loadFile]
+  );
+
+  const capturePhoto = useCallback(() => {
+    const video = videoRef.current;
+    if (!video || video.readyState < 2) return;
+    const canvas = document.createElement("canvas");
+    canvas.width  = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.drawImage(video, 0, 0);
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) return;
+        const file = new File([blob], `capture-${Date.now()}.jpg`, { type: "image/jpeg" });
+        stopCamera();
+        setShowCamera(false);
+        loadFile(file);
+      },
+      "image/jpeg",
+      0.92
+    );
+  }, [loadFile, stopCamera]);
+
+  useEffect(() => {
+    if (open && initialFile && loadedInitialFileRef.current !== initialFile) {
+      loadedInitialFileRef.current = initialFile;
+      loadFile(initialFile);
+    }
+    if (!open) loadedInitialFileRef.current = null;
+  }, [open, initialFile, loadFile]);
+
+  // ── Aspect-ratio preset ────────────────────────────────────────────────────
+  const applyAspectRatioToCropBox = useCallback(
+    (ratio: number | undefined) => {
+      if (!ratio || ratio <= 0 || !frameRef.current) return;
+      const rect = frameRef.current.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+      const vpAR = rect.width / rect.height;
+      const targetFractionAR = ratio / vpAR;
+      setCropBox((cur) => {
+        let { x, y, w, h } = cur;
+        const cx = x + w / 2;
+        const cy = y + h / 2;
+        if (w / h > targetFractionAR) {
+          w = h * targetFractionAR;
+        } else {
+          h = w / targetFractionAR;
+        }
+        w = clamp(w, 0.1, 1);
+        h = clamp(h, 0.1, 1);
+        x = clamp(cx - w / 2, 0, 1 - w);
+        y = clamp(cy - h / 2, 0, 1 - h);
+        return { x, y, w, h };
+      });
+    },
+    []
+  );
+
+  const handleSelectPreset = useCallback(
+    (preset: AspectPreset) => {
+      setActivePresetRatio(preset.ratio);
+      if (preset.ratio === -1 && sourceDimensions) {
+        applyAspectRatioToCropBox(sourceDimensions.width / sourceDimensions.height);
+      } else {
+        applyAspectRatioToCropBox(preset.ratio);
+      }
+    },
+    [sourceDimensions, applyAspectRatioToCropBox]
+  );
+
+  // ── Crop drag ──────────────────────────────────────────────────────────────
+  const startDrag = useCallback(
+    (e: React.PointerEvent, handle: HandleType) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (!frameRef.current) return;
+
+      const frameRect = frameRef.current.getBoundingClientRect();
+      setIsDraggingBox(true);
+
+      dragStartRef.current = {
+        handle,
+        startBox: { ...cropBox },
+        startMousePx: { x: e.clientX, y: e.clientY },
+        frameRect,
+      };
+
+      const onMove = (me: PointerEvent) => {
+        const ref = dragStartRef.current;
+        if (!ref) return;
+        const { handle: h, startBox: sb, startMousePx: sm, frameRect: r } = ref;
+        const dx = (me.clientX - sm.x) / r.width;
+        const dy = (me.clientY - sm.y) / r.height;
+
+        setCropBox(() => {
+          let { x, y, w, h: _h } = { ...sb };
+
+          if (h === "body") {
+            x = clamp(x + dx, 0, 1 - w);
+            y = clamp(y + dy, 0, 1 - _h);
+          } else {
+            let x1 = x, y1 = y, x2 = x + w, y2 = y + _h;
+            if (h === "nw" || h === "w" || h === "sw") x1 = clamp(x + dx, 0, x2 - 0.05);
+            if (h === "ne" || h === "e" || h === "se") x2 = clamp(x + w + dx, x1 + 0.05, 1);
+            if (h === "nw" || h === "n" || h === "ne") y1 = clamp(y + dy, 0, y2 - 0.05);
+            if (h === "sw" || h === "s" || h === "se") y2 = clamp(y + _h + dy, y1 + 0.05, 1);
+            w = x2 - x1; _h = y2 - y1;
+
+            if (effectiveAspectRatio && effectiveAspectRatio > 0) {
+              const vpAR = r.width / r.height;
+              const tAR  = effectiveAspectRatio / vpAR;
+              if (h === "n" || h === "s") { w = clamp(_h * tAR, 0.05, 1 - x1); x2 = x1 + w; }
+              else                         { _h = clamp(w / tAR, 0.05, 1 - y1); y2 = y1 + _h; }
+            }
+
+            x = clamp(x1, 0, 1);
+            y = clamp(y1, 0, 1);
+            w = clamp(x2 - x, 0.05, 1 - x);
+            _h = clamp(y2 - y, 0.05, 1 - y);
+          }
+          return { x, y, w, h: _h };
+        });
+      };
+
+      const onUp = () => {
+        setIsDraggingBox(false);
+        dragStartRef.current = null;
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        window.removeEventListener("pointercancel", onUp);
+      };
+
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+      window.addEventListener("pointercancel", onUp);
+    },
+    [cropBox, effectiveAspectRatio]
+  );
+
+  // Pointer-down on canvas background → pan
+  const handleFramePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if ((e.target as HTMLElement).closest("[data-crop-handle]")) return;
+      e.preventDefault();
+      const sx = e.clientX, sy = e.clientY;
+      const spx = pan.x, spy = pan.y;
+      const onMove = (me: PointerEvent) => setPan({ x: spx + me.clientX - sx, y: spy + me.clientY - sy });
+      const onUp   = () => { window.removeEventListener("pointermove", onMove); window.removeEventListener("pointerup", onUp); };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [pan]
+  );
+
+  // ── Export / apply ─────────────────────────────────────────────────────────
+  const handleApply = useCallback(async () => {
+    if (!imageSrc || !canvasRef.current || !frameRef.current) return;
+    setIsProcessing(true);
+    try {
+      const image = new Image();
+      image.src = imageSrc;
+      await new Promise<void>((res, rej) => { image.onload = () => res(); image.onerror = () => rej(new Error("Image failed to load")); });
+
+      const origW = image.naturalWidth;
+      const origH = image.naturalHeight;
+      const rad    = (rotation * Math.PI) / 180;
+      const absSin = Math.abs(Math.sin(rad));
+      const absCos = Math.abs(Math.cos(rad));
+      const rotW = origW * absCos + origH * absSin;
+      const rotH = origW * absSin + origH * absCos;
+
+      // Render rotated+flipped+filtered image to offscreen canvas
+      const offscreen = document.createElement("canvas");
+      offscreen.width  = Math.ceil(rotW);
+      offscreen.height = Math.ceil(rotH);
+      const offCtx = offscreen.getContext("2d")!;
+      offCtx.imageSmoothingEnabled  = true;
+      offCtx.imageSmoothingQuality  = "high";
+      offCtx.filter = filterStyle;
+      offCtx.translate(rotW / 2, rotH / 2);
+      offCtx.rotate(rad);
+      offCtx.scale(flipX ? -1 : 1, flipY ? -1 : 1);
+      offCtx.drawImage(image, -origW / 2, -origH / 2);
+
+      // Map crop box fractions back to offscreen coordinates
+      const vpRect = frameRef.current.getBoundingClientRect();
+      const vpW = vpRect.width, vpH = vpRect.height;
+      const baseScale     = Math.min(vpW / rotW, vpH / rotH);
+      const effectiveScale = baseScale * zoom;
+      const displayedW   = rotW * effectiveScale;
+      const displayedH   = rotH * effectiveScale;
+      const marginX = (vpW - displayedW) / 2 + pan.x;
+      const marginY = (vpH - displayedH) / 2 + pan.y;
+
+      const cropPxX = cropBox.x * vpW, cropPxY = cropBox.y * vpH;
+      const cropPxW = cropBox.w * vpW, cropPxH = cropBox.h * vpH;
+
+      const sx  = clamp((cropPxX - marginX) / effectiveScale, 0, rotW);
+      const sy  = clamp((cropPxY - marginY) / effectiveScale, 0, rotH);
+      const sx2 = clamp((cropPxX + cropPxW - marginX) / effectiveScale, 0, rotW);
+      const sy2 = clamp((cropPxY + cropPxH - marginY) / effectiveScale, 0, rotH);
+      const sw  = Math.max(1, sx2 - sx);
+      const sh  = Math.max(1, sy2 - sy);
+
+      let outW = sw, outH = sh;
+
+      const maxSide = Math.max(outW, outH);
+      if (maxDimension && maxSide > maxDimension) {
+        const ds = maxDimension / maxSide; outW *= ds; outH *= ds;
+      }
+      if (minWidth  && outW < minWidth)  { const us = minWidth  / outW; outW = minWidth;  outH *= us; }
+      if (minHeight && outH < minHeight) { const us = minHeight / outH; outH = minHeight; outW *= us; }
+      outW = Math.round(Math.max(1, outW));
+      outH = Math.round(Math.max(1, outH));
+
+      const outputCanvas = canvasRef.current;
+      outputCanvas.width  = outW;
+      outputCanvas.height = outH;
+      const outCtx = outputCanvas.getContext("2d")!;
+      outCtx.imageSmoothingEnabled = true;
+      outCtx.imageSmoothingQuality = "high";
+      if (outputFormat === "image/jpeg") { outCtx.fillStyle = "#fff"; outCtx.fillRect(0, 0, outW, outH); }
+      outCtx.drawImage(offscreen, sx, sy, sw, sh, 0, 0, outW, outH);
+
+      outputCanvas.toBlob(
+        (blob) => {
+          if (!blob) { toast.error("Failed to process image. Please try again."); return; }
+          const ext      = outputFormat === "image/png" ? "png" : "jpg";
+          const baseName = fileName.replace(/\.[^./]+$/, "") || "edited-image";
+          onImageSelect(blob, `${baseName}.${ext}`);
+          resetModal();
+          onOpenChange(false);
+          toast.success("Image updated successfully");
+        },
+        outputFormat,
+        outputQuality
+      );
+    } catch (err) {
+      toast.error("Failed to process image", {
+        description: err instanceof Error ? err.message : "Please try again.",
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [
+    imageSrc, rotation, flipX, flipY, zoom, pan, cropBox, fileName,
+    filterStyle, maxDimension, minWidth, minHeight,
+    outputFormat, outputQuality, onImageSelect, onOpenChange, resetModal,
+  ]);
+
+  // ── Early exit when not open ───────────────────────────────────────────────
+  if (!open) return null;
+
+  const btnBase =
+    "inline-flex items-center justify-center rounded-md text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50";
+
+  // ─── Render ────────────────────────────────────────────────────────────────
+  return (
+    <AnimatePresence>
+      {open && (
+        <div className="fixed inset-0 z-50 select-none flex">
+          {/* Backdrop */}
+          <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={handleClose} />
+
+          {/* Editor — true fullscreen, theme-aware */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.98 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.98 }}
+            transition={{ duration: 0.15, ease: "easeOut" }}
+            className="relative z-10 flex flex-col w-full h-full bg-background text-foreground overflow-hidden"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Studio Image Editor"
+          >
+
+            {/* ── Slim top bar (h-11 = 44px) ─────────────────────────────── */}
+            <div className="flex items-center gap-2 px-3 sm:px-4 h-11 border-b border-border bg-card shrink-0">
+
+              {/* Icon + title */}
+              <div className="flex items-center gap-2 min-w-0 flex-1">
+                <Wand2 className="w-4 h-4 text-primary shrink-0" />
+                <span className="text-sm font-semibold text-foreground leading-none truncate">
+                  Studio Editor
+                </span>
+                {sourceDimensions && (
+                  <span className="text-[11px] text-muted-foreground hidden sm:inline truncate">
+                    · {sourceDimensions.width}×{sourceDimensions.height}px
+                    {minWidth && minHeight ? ` (min ${minWidth}×${minHeight})` : ""}
+                  </span>
+                )}
+                {isSourceBelowMin && (
+                  <span className="hidden sm:inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/15 text-amber-600 dark:text-amber-400 border border-amber-500/30 shrink-0">
+                    <Info className="w-3 h-3" />
+                    Upscale
+                  </span>
+                )}
+              </div>
+
+              {/* Tabs (only when editing) */}
+              {imageSrc && (
+                <div className="flex items-center bg-muted rounded-md p-0.5 gap-0.5 shrink-0">
+                  <button
+                    type="button"
+                    id="editor-tab-crop"
+                    onClick={() => setActiveTab("crop")}
+                    className={[
+                      "flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-all",
+                      activeTab === "crop"
+                        ? "bg-background text-foreground shadow-sm font-semibold"
+                        : "text-muted-foreground hover:text-foreground",
+                    ].join(" ")}
+                  >
+                    <Crop className="w-3 h-3 text-primary" />
+                    <span>Crop</span>
+                  </button>
+                  <button
+                    type="button"
+                    id="editor-tab-adjust"
+                    onClick={() => setActiveTab("adjust")}
+                    className={[
+                      "flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-all",
+                      activeTab === "adjust"
+                        ? "bg-background text-foreground shadow-sm font-semibold"
+                        : "text-muted-foreground hover:text-foreground",
+                    ].join(" ")}
+                  >
+                    <Sliders className="w-3 h-3 text-secondary" />
+                    <span>Adjust</span>
+                  </button>
+                </div>
+              )}
+
+              {/* Reset + Close */}
+              <div className="flex items-center gap-1 shrink-0">
+                {imageSrc && (
+                  <button
+                    type="button"
+                    onClick={resetEdits}
+                    className={`${btnBase} h-7 text-xs px-2.5 text-muted-foreground hover:text-foreground hover:bg-muted border border-transparent rounded-md`}
+                  >
+                    <RotateCcw className="w-3 h-3 sm:mr-1" />
+                    <span className="hidden sm:inline">Reset</span>
+                  </button>
+                )}
+                <button
+                  type="button"
+                  onClick={handleClose}
+                  id="editor-close-btn"
+                  className={`${btnBase} h-7 w-7 rounded-full text-muted-foreground hover:text-foreground hover:bg-muted`}
+                  aria-label="Close editor"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            </div>
+
+            {/* ── Main body ─────────────────────────────────────────────── */}
+            <div className="flex-1 flex flex-col overflow-hidden min-h-0">
+              {!imageSrc ? (
+                /* ── Upload / Camera screen ─────────────────────────── */
+                showCamera ? (
+                  <div className="flex-1 flex flex-col items-center justify-center p-6 bg-background">
+                    <div className="w-full max-w-sm space-y-4">
+                      <div className="relative aspect-video rounded-xl overflow-hidden border border-border bg-muted flex items-center justify-center">
+                        {isCameraStarting && (
+                          <div className="absolute inset-0 flex items-center justify-center bg-background/80 z-10">
+                            <Loader2 className="w-6 h-6 animate-spin text-primary" />
+                          </div>
+                        )}
+                        <video ref={videoRef} autoPlay playsInline muted className="w-full h-full object-cover" />
+                      </div>
+                      <div className="flex gap-3">
+                        <button
+                          type="button"
+                          onClick={() => { stopCamera(); setShowCamera(false); }}
+                          className={`${btnBase} flex-1 bg-muted border border-border text-foreground hover:bg-muted/80 h-9 px-4 rounded-lg`}
+                        >
+                          <X className="w-4 h-4 mr-1.5" /> Cancel
+                        </button>
+                        <button
+                          type="button"
+                          onClick={capturePhoto}
+                          disabled={isCameraStarting}
+                          id="camera-capture-btn"
+                          className={`${btnBase} flex-1 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 rounded-lg font-medium`}
+                        >
+                          <Camera className="w-4 h-4 mr-1.5" /> Capture
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex-1 flex flex-col items-center justify-center p-6 bg-background">
+                    <div className="w-full max-w-sm border-2 border-dashed border-border hover:border-primary/50 transition-colors rounded-2xl p-8 text-center space-y-5 bg-card/60">
+                      <div className="w-14 h-14 bg-primary/10 text-primary rounded-2xl flex items-center justify-center mx-auto border border-primary/20">
+                        <Upload className="w-7 h-7" />
+                      </div>
+                      <div className="space-y-1">
+                        <p className="text-base font-semibold text-foreground">Select an Image</p>
+                        <p className="text-xs text-muted-foreground">
+                          JPEG, PNG or WebP · up to {(maxFileSize / 1024 / 1024).toFixed(0)} MB
+                        </p>
+                      </div>
+                      <div className="flex flex-wrap items-center justify-center gap-3">
+                        <button
+                          type="button"
+                          id="editor-choose-file-btn"
+                          onClick={() => fileInputRef.current?.click()}
+                          className={`${btnBase} bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-6 rounded-xl font-medium shadow-md`}
+                        >
+                          Choose File
+                        </button>
+                        {cameraSupported && (
+                          <button
+                            type="button"
+                            id="editor-camera-btn"
+                            onClick={() => setShowCamera(true)}
+                            className={`${btnBase} bg-card border border-border text-foreground hover:bg-muted h-9 px-5 rounded-xl font-medium`}
+                          >
+                            <Camera className="w-4 h-4 mr-1.5" /> Camera
+                          </button>
+                        )}
+                      </div>
+                      <input ref={fileInputRef} type="file" className="hidden" accept={acceptedFormats.join(",")} onChange={handleFileChange} />
+                    </div>
+                  </div>
+                )
+              ) : (
+                /* ── Editing workspace ──────────────────────────────── */
+                <>
+                  {/* Canvas — fills ALL remaining space */}
+                  <div className="flex-1 relative bg-muted/30 overflow-hidden select-none min-h-0">
+                    {/* Dot-grid backdrop */}
+                    <div
+                      className="absolute inset-0 pointer-events-none opacity-[0.15]"
+                      style={{
+                        backgroundImage: "radial-gradient(circle, hsl(var(--muted-foreground)/0.6) 1px, transparent 1px)",
+                        backgroundSize: "20px 20px",
+                      }}
+                    />
+
+                    {/* Zoom pill — floating, top-left, very compact */}
+                    <div className="absolute top-2 left-2 z-30 flex items-center bg-card/90 border border-border rounded-md shadow-sm backdrop-blur-sm">
+                      <button
+                        type="button"
+                        id="editor-zoom-out"
+                        onClick={() => setZoom((z) => Math.max(0.2, z - 0.15))}
+                        className="h-6 w-6 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
+                        title="Zoom out"
+                      >
+                        <ZoomOut className="w-3 h-3" />
+                      </button>
+                      <span className="w-9 text-center font-mono text-[10px] text-foreground font-medium">
+                        {Math.round(zoom * 100)}%
+                      </span>
+                      <button
+                        type="button"
+                        id="editor-zoom-in"
+                        onClick={() => setZoom((z) => Math.min(5, z + 0.15))}
+                        className="h-6 w-6 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
+                        title="Zoom in"
+                      >
+                        <ZoomIn className="w-3 h-3" />
+                      </button>
+                      <div className="h-3 w-px bg-border mx-0.5" />
+                      <button
+                        type="button"
+                        id="editor-fit-btn"
+                        onClick={() => { setZoom(1); setPan({ x: 0, y: 0 }); }}
+                        className="h-6 w-6 flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
+                        title="Fit to view"
+                      >
+                        <Maximize2 className="w-3 h-3" />
+                      </button>
+                    </div>
+
+                    {/* Draggable frame */}
+                    <div
+                      ref={frameRef}
+                      onPointerDown={handleFramePointerDown}
+                      className="absolute inset-3 touch-none cursor-grab active:cursor-grabbing"
+                    >
+                      {/* Image */}
+                      <div className="absolute inset-0 flex items-center justify-center">
+                        <img
+                          src={imageSrc}
+                          alt="Editor preview"
+                          draggable={false}
+                          className="max-w-full max-h-full object-contain pointer-events-none select-none block"
+                          style={{
+                            transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom * (flipX ? -1 : 1)}, ${zoom * (flipY ? -1 : 1)}) rotate(${rotation}deg)`,
+                            filter: filterStyle,
+                            transition: isDraggingBox ? "none" : "transform 0.1s ease-out",
+                          }}
+                        />
+                      </div>
+
+                      {/* Crop overlay */}
+                      <div className="absolute inset-0 pointer-events-none z-10">
+                        <div
+                          className="absolute"
+                          style={{
+                            left:   `${cropBox.x * 100}%`,
+                            top:    `${cropBox.y * 100}%`,
+                            width:  `${cropBox.w * 100}%`,
+                            height: `${cropBox.h * 100}%`,
+                            boxShadow: "0 0 0 9999px rgba(0,0,0,0.55)",
+                          }}
+                        >
+                          {/* Drag body */}
+                          <div
+                            data-crop-handle="body"
+                            onPointerDown={(e) => startDrag(e, "body")}
+                            className="absolute inset-0 border-2 border-white/90 cursor-move pointer-events-auto group"
+                          >
+                            {/* Rule-of-thirds */}
+                            <div className={`absolute inset-0 grid grid-cols-3 grid-rows-3 transition-opacity ${isDraggingBox ? "opacity-50" : "opacity-0 group-hover:opacity-30"}`}>
+                              {Array.from({ length: 9 }).map((_, i) => (
+                                <div key={i} className={[(i % 3 !== 2) ? "border-r border-white/50" : "", (i < 6) ? "border-b border-white/50" : ""].join(" ")} />
+                              ))}
+                            </div>
+                            {/* Corner L-brackets */}
+                            {[
+                              "absolute -top-px -left-px border-t-2 border-l-2",
+                              "absolute -top-px -right-px border-t-2 border-r-2",
+                              "absolute -bottom-px -left-px border-b-2 border-l-2",
+                              "absolute -bottom-px -right-px border-b-2 border-r-2",
+                            ].map((cls, i) => (
+                              <div key={i} className={`${cls} w-3.5 h-3.5 border-white pointer-events-none`} />
+                            ))}
+                          </div>
+
+                          {/* Resize handles */}
+                          {HANDLE_DEFS.map(({ key, cursor, style }) => (
+                            <div
+                              key={key}
+                              data-crop-handle={key}
+                              onPointerDown={(e) => key && startDrag(e, key)}
+                              className="absolute bg-white border border-black/30 rounded-sm shadow-sm pointer-events-auto z-20 hover:scale-110 transition-transform"
+                              style={{ width: HANDLE_SIZE, height: HANDLE_SIZE, cursor, ...style }}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* ── Compact bottom controls ──────────────────────── */}
+                  {activeTab === "crop" ? (
+                    <div className="bg-card border-t border-border shrink-0">
+                      {/* Row 1: Rotation + flip/rotate buttons */}
+                      <div className="flex items-center gap-2 px-3 sm:px-4 h-10 border-b border-border/50">
+                        <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider shrink-0">Rotate</span>
+                        <div className="flex-1 min-w-0">
+                          <InlineSlider
+                            value={[rotation]}
+                            onValueChange={([v]) => setRotation(v)}
+                            min={-180}
+                            max={180}
+                            step={1}
+                          />
+                        </div>
+                        <span className="font-mono text-[11px] text-foreground w-8 text-right shrink-0">{rotation}°</span>
+                        <div className="h-4 w-px bg-border mx-1 shrink-0" />
+                        {/* −90 */}
+                        <button
+                          type="button"
+                          id="editor-rotate-ccw"
+                          onClick={() => setRotation((r) => r - 90)}
+                          title="Rotate −90°"
+                          className="h-7 px-2 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground border border-border rounded hover:bg-muted transition-colors shrink-0"
+                        >
+                          <RotateCcw className="w-3 h-3" /><span className="hidden sm:inline">−90°</span>
+                        </button>
+                        {/* +90 */}
+                        <button
+                          type="button"
+                          id="editor-rotate-cw"
+                          onClick={() => setRotation((r) => r + 90)}
+                          title="Rotate +90°"
+                          className="h-7 px-2 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground border border-border rounded hover:bg-muted transition-colors shrink-0"
+                        >
+                          <RotateCw className="w-3 h-3" /><span className="hidden sm:inline">+90°</span>
+                        </button>
+                        <div className="h-4 w-px bg-border mx-0.5 shrink-0" />
+                        {/* Flip H */}
+                        <button
+                          type="button"
+                          id="editor-flip-h"
+                          onClick={() => setFlipX((f) => !f)}
+                          title="Flip Horizontal"
+                          className={["h-7 w-7 flex items-center justify-center rounded border transition-colors shrink-0", flipX ? "bg-primary/10 text-primary border-primary/40" : "border-border text-muted-foreground hover:text-foreground hover:bg-muted"].join(" ")}
+                        >
+                          <FlipHorizontal className="w-3.5 h-3.5" />
+                        </button>
+                        {/* Flip V */}
+                        <button
+                          type="button"
+                          id="editor-flip-v"
+                          onClick={() => setFlipY((f) => !f)}
+                          title="Flip Vertical"
+                          className={["h-7 w-7 flex items-center justify-center rounded border transition-colors shrink-0", flipY ? "bg-primary/10 text-primary border-primary/40" : "border-border text-muted-foreground hover:text-foreground hover:bg-muted"].join(" ")}
+                        >
+                          <FlipVertical className="w-3.5 h-3.5" />
+                        </button>
+                      </div>
+
+                      {/* Row 2: Aspect ratio presets */}
+                      <div className="flex items-center gap-1.5 px-3 sm:px-4 h-9 overflow-x-auto scrollbar-hide">
+                        {ASPECT_PRESETS.map((preset) => {
+                          const active = activePresetRatio === preset.ratio;
+                          return (
+                            <button
+                              key={preset.label}
+                              type="button"
+                              onClick={() => handleSelectPreset(preset)}
+                              className={[
+                                "flex items-center gap-1 px-2.5 py-1 rounded text-[11px] font-medium border shrink-0 transition-all whitespace-nowrap",
+                                active
+                                  ? "bg-primary/10 border-primary/50 text-primary font-semibold"
+                                  : "border-border text-muted-foreground hover:text-foreground hover:bg-muted",
+                              ].join(" ")}
+                            >
+                              {preset.icon}
+                              <span>{preset.label}</span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  ) : (
+                    /* Adjustments panel — compact 2-col grid */
+                    <div className="bg-card border-t border-border px-4 py-3 shrink-0">
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3 max-w-4xl mx-auto">
+                        {[
+                          { label: "Brightness", icon: <Sun className="w-3 h-3 text-amber-500" />, value: brightness, set: setBrightness, min: -100, max: 100, unit: "%" },
+                          { label: "Contrast",   icon: <ContrastIcon className="w-3 h-3 text-blue-500" />, value: contrast, set: setContrast, min: -100, max: 100, unit: "%" },
+                          { label: "Saturation", icon: <Sparkles className="w-3 h-3 text-violet-500" />, value: saturation, set: setSaturation, min: -100, max: 100, unit: "%" },
+                          { label: "Blur",        icon: <Sliders className="w-3 h-3 text-emerald-500" />, value: blur, set: setBlur, min: 0, max: 10, step: 0.5, unit: "px" },
+                        ].map(({ label, icon, value, set, min, max, step = 1, unit }) => (
+                          <div key={label} className="flex items-center gap-2">
+                            <span className="flex items-center gap-1 text-[11px] font-medium text-foreground w-20 shrink-0">{icon}{label}</span>
+                            <div className="flex-1 min-w-0">
+                              <InlineSlider value={[value]} onValueChange={([v]) => set(v)} min={min} max={max} step={step} />
+                            </div>
+                            <span className="font-mono text-[11px] text-muted-foreground w-9 text-right shrink-0">{value}{unit}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* ── Slim footer (h-10 = 40px) ──────────────────────── */}
+                  <div className="flex items-center justify-between gap-3 px-3 sm:px-4 h-10 border-t border-border bg-card shrink-0">
+                    <button
+                      type="button"
+                      id="editor-cancel-btn"
+                      onClick={resetModal}
+                      className={`${btnBase} flex items-center gap-1.5 h-7 px-3 text-xs text-muted-foreground hover:text-foreground border border-border rounded hover:bg-muted transition-colors`}
+                    >
+                      <X className="w-3 h-3" />
+                      Cancel
+                    </button>
+
+                    <button
+                      type="button"
+                      id="editor-apply-btn"
+                      onClick={handleApply}
+                      disabled={isProcessing}
+                      className={`${btnBase} flex items-center gap-1.5 h-7 px-5 text-xs font-semibold bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors disabled:opacity-60`}
+                    >
+                      {isProcessing ? (
+                        <Loader2 className="w-3 h-3 animate-spin" />
+                      ) : (
+                        <Check className="w-3 h-3" />
+                      )}
+                      {isProcessing ? "Processing…" : "Apply Edits"}
+                    </button>
+                  </div>
+                </>
+              )}
+            </div>
+          </motion.div>
+
+          {/* Hidden export canvas */}
+          <canvas ref={canvasRef} className="hidden" aria-hidden="true" />
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+export default ImageEditorModal;