@nice2dev/ui-graphics 1.1.0 → 1.1.1

package/dist/esm/photo/usePhotoEditor.js

@@ -1,8 +1,8 @@
 import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { useNiceTranslation } from '../core/i18n.js';
+import { getExportBlob, handleDownloadBlob, handleCopyImageToClipboard, handleNativeShare } from './photoEditorActions.js';
 import { DEFAULT_ADJUSTMENTS, renderToCanvas, PHOTO_FILTERS, canvasToFile } from './photoFilters.js';
 import { EMOJI_CATALOG, deserializeEditorState, renderAllOverlays, renderLiveStroke, hitTestOverlay, createDrawingOverlay, serializeEditorState, createFrameOverlay, createShapeOverlay, createTextOverlay, createEmojiOverlay } from './photoOverlays.js';
-import { getExportBlob, handleDownloadBlob, handleCopyImageToClipboard, handleNativeShare } from './photoEditorActions.js';
 
 /**
  * usePhotoEditor.ts — Custom hook encapsulating all PhotoEditor state & logic.
@@ -11,7 +11,7 @@ import { getExportBlob, handleDownloadBlob, handleCopyImageToClipboard, handleNa
  * out of the god-component so that the main component file is pure composition.
  */
 // ── Hook ──
-function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initialState }) {
+function usePhotoEditor({ src, playerColor = '#00aaff', onSave, onCancel, initialState, }) {
     const { t: _t } = useNiceTranslation();
     const t = (key, def) => _t(key, def);
     // ── State ──
@@ -19,12 +19,12 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     const [image, setImage] = useState(null);
     const [loading, setLoading] = useState(true);
     // Tabs
-    const [activeTab, setActiveTabRaw] = useState("filters");
+    const [activeTab, setActiveTabRaw] = useState('filters');
     const [cropMode, setCropMode] = useState(false);
     // Filter
-    const [selectedFilter, setSelectedFilter] = useState("none");
+    const [selectedFilter, setSelectedFilter] = useState('none');
     const [filterIntensity, setFilterIntensity] = useState(1);
-    const [filterCategory, setFilterCategory] = useState("all");
+    const [filterCategory, setFilterCategory] = useState('all');
     const [filterParams] = useState({});
     // Adjustments
     const [adjustments, setAdjustments] = useState({ ...DEFAULT_ADJUSTMENTS });
@@ -51,22 +51,22 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     // Sticker / emoji
     const [emojiCat, setEmojiCat] = useState(EMOJI_CATALOG[0].id);
     // Text overlay
-    const [textDraft, setTextDraft] = useState("Tekst");
-    const [textColor, setTextColor] = useState("#ffffff");
+    const [textDraft, setTextDraft] = useState('Tekst');
+    const [textColor, setTextColor] = useState('#ffffff');
     const [textBold, setTextBold] = useState(true);
     const [textItalic, setTextItalic] = useState(false);
     const [textOutline, setTextOutline] = useState(true);
     const [textFontSize, setTextFontSize] = useState(36);
     const [textBg, setTextBg] = useState(false);
     // Shape
-    const [shapeStroke, setShapeStroke] = useState("#ffffff");
-    const [shapeFill, setShapeFill] = useState("");
+    const [shapeStroke, setShapeStroke] = useState('#ffffff');
+    const [shapeFill, setShapeFill] = useState('');
     const [shapeStrokeW, setShapeStrokeW] = useState(3);
     // Frame
-    const [frameColor, setFrameColor] = useState("#ffffff");
+    const [frameColor, setFrameColor] = useState('#ffffff');
     const [frameThick, setFrameThick] = useState(3);
     // Drawing
-    const [drawColor, setDrawColor] = useState("#ff0000");
+    const [drawColor, setDrawColor] = useState('#ff0000');
     const [drawWidth, setDrawWidth] = useState(4);
     const [isDrawing, setIsDrawing] = useState(false);
     const [livePoints, setLivePoints] = useState([]);
@@ -81,17 +81,18 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     const containerRef = useRef(null);
     // ── Derived ──
     const accent = playerColor;
-    const accentDim = playerColor + "55";
-    const selectedOverlay = useMemo(() => { var _a; return (_a = overlays.find(o => o.id === selectedOverlayId)) !== null && _a !== void 0 ? _a : null; }, [overlays, selectedOverlayId]);
+    const accentDim = playerColor + '55';
+    const selectedOverlay = useMemo(() => { var _a; return (_a = overlays.find((o) => o.id === selectedOverlayId)) !== null && _a !== void 0 ? _a : null; }, [overlays, selectedOverlayId]);
     // Tab setter (auto-toggle cropMode)
     const setActiveTab = useCallback((tab) => {
         setActiveTabRaw(tab);
-        setCropMode(tab === "crop");
+        setCropMode(tab === 'crop');
     }, []);
     // ── History ──
     const pushHistory = useCallback(() => {
-        if (suppressHistoryRef.current)
+        if (suppressHistoryRef.current) {
             return;
+        }
         const state = {
             selectedFilter,
             filterIntensity,
@@ -100,11 +101,21 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
             flipH,
             flipV,
             cropRect: cropRect ? { ...cropRect } : null,
-            overlays: overlays.map(o => ({ ...o })),
+            overlays: overlays.map((o) => ({ ...o })),
         };
-        setHistory(prev => [...prev.slice(0, historyIdx + 1), state]);
-        setHistoryIdx(prev => prev + 1);
-    }, [selectedFilter, filterIntensity, adjustments, rotation, flipH, flipV, cropRect, overlays, historyIdx]);
+        setHistory((prev) => [...prev.slice(0, historyIdx + 1), state]);
+        setHistoryIdx((prev) => prev + 1);
+    }, [
+        selectedFilter,
+        filterIntensity,
+        adjustments,
+        rotation,
+        flipH,
+        flipV,
+        cropRect,
+        overlays,
+        historyIdx,
+    ]);
     const restoreState = useCallback((s) => {
         suppressHistoryRef.current = true;
         setSelectedFilter(s.selectedFilter);
@@ -114,9 +125,11 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
         setFlipH(s.flipH);
         setFlipV(s.flipV);
         setCropRect(s.cropRect ? { ...s.cropRect } : null);
-        setOverlays(s.overlays.map(o => ({ ...o })));
+        setOverlays(s.overlays.map((o) => ({ ...o })));
         setSelectedOverlayId(null);
-        setTimeout(() => { suppressHistoryRef.current = false; }, 50);
+        setTimeout(() => {
+            suppressHistoryRef.current = false;
+        }, 50);
     }, []);
     const undo = useCallback(() => {
         if (historyIdx > 0) {
@@ -145,12 +158,13 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
             img.src = URL.createObjectURL(src);
         }
         else {
-            img.crossOrigin = "anonymous";
+            img.crossOrigin = 'anonymous';
             img.src = src;
         }
         return () => {
-            if (img.src.startsWith("blob:"))
+            if (img.src.startsWith('blob:')) {
                 URL.revokeObjectURL(img.src);
+            }
         };
     }, [src]);
     // Push initial history once image loads
@@ -166,11 +180,15 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
                     setRotation(prev.rotation);
                     setFlipH(prev.flipH);
                     setFlipV(prev.flipV);
-                    if (prev.cropRect)
+                    if (prev.cropRect) {
                         setCropRect(prev.cropRect);
-                    if (prev.overlays)
+                    }
+                    if (prev.overlays) {
                         setOverlays(prev.overlays);
-                    setTimeout(() => { suppressHistoryRef.current = false; }, 50);
+                    }
+                    setTimeout(() => {
+                        suppressHistoryRef.current = false;
+                    }, 50);
                 }
             }
             pushHistory();
@@ -179,30 +197,52 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [image]);
     // ── Render main canvas ──
     const renderMain = useCallback(() => {
-        if (!image || !mainCanvasRef.current)
+        if (!image || !mainCanvasRef.current) {
             return;
+        }
         renderToCanvas(mainCanvasRef.current, image, selectedFilter, { ...filterParams, intensity: filterIntensity }, adjustments, cropMode ? null : cropRect, rotation, flipH, flipV);
         if (overlays.length > 0 || livePoints.length > 1) {
-            const ctx = mainCanvasRef.current.getContext("2d");
+            const ctx = mainCanvasRef.current.getContext('2d');
             if (ctx) {
                 const cw = mainCanvasRef.current.width;
                 const ch = mainCanvasRef.current.height;
-                if (overlays.length > 0)
+                if (overlays.length > 0) {
                     renderAllOverlays(ctx, overlays, cw, ch);
-                if (livePoints.length > 1)
+                }
+                if (livePoints.length > 1) {
                     renderLiveStroke(ctx, livePoints, drawColor, drawWidth, cw, ch);
+                }
             }
         }
-    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, cropMode, rotation, flipH, flipV, overlays, livePoints, drawColor, drawWidth]);
-    useEffect(() => { renderMain(); }, [renderMain]);
+    }, [
+        image,
+        selectedFilter,
+        filterParams,
+        filterIntensity,
+        adjustments,
+        cropRect,
+        cropMode,
+        rotation,
+        flipH,
+        flipV,
+        overlays,
+        livePoints,
+        drawColor,
+        drawWidth,
+    ]);
+    useEffect(() => {
+        renderMain();
+    }, [renderMain]);
     // Render compare canvas (original)
     useEffect(() => {
-        if (!image || !compareCanvasRef.current || !showCompare)
+        if (!image || !compareCanvasRef.current || !showCompare) {
             return;
+        }
         const canvas = compareCanvasRef.current;
-        const ctx = canvas.getContext("2d");
-        if (!ctx)
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
             return;
+        }
         const crop = cropRect !== null && cropRect !== void 0 ? cropRect : { x: 0, y: 0, w: image.naturalWidth, h: image.naturalHeight };
         canvas.width = crop.w;
         canvas.height = crop.h;
@@ -210,24 +250,27 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [image, showCompare, cropRect]);
     // ── Filter thumbnails ──
     const filteredList = useMemo(() => {
-        if (filterCategory === "all")
+        if (filterCategory === 'all') {
             return PHOTO_FILTERS;
-        return PHOTO_FILTERS.filter(f => f.category === filterCategory || f.id === "none");
+        }
+        return PHOTO_FILTERS.filter((f) => f.category === filterCategory || f.id === 'none');
     }, [filterCategory]);
     const generateThumbnail = useCallback((canvas, filter) => {
-        if (!image)
+        if (!image) {
             return;
+        }
         const size = 64;
         canvas.width = size;
         canvas.height = size;
-        const ctx = canvas.getContext("2d", { willReadFrequently: true });
-        if (!ctx)
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        if (!ctx) {
             return;
+        }
         const s = Math.min(image.naturalWidth, image.naturalHeight);
         const sx = (image.naturalWidth - s) / 2;
         const sy = (image.naturalHeight - s) / 2;
         ctx.drawImage(image, sx, sy, s, s, 0, 0, size, size);
-        if (filter.id !== "none") {
+        if (filter.id !== 'none') {
             const imgData = ctx.getImageData(0, 0, size, size);
             const filtered = filter.apply(imgData, { intensity: 1 });
             ctx.putImageData(filtered, 0, 0);
@@ -235,8 +278,9 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [image]);
     // ── Crop interaction ──
     const getCanvasScale = useCallback(() => {
-        if (!mainCanvasRef.current || !containerRef.current || !image)
+        if (!mainCanvasRef.current || !containerRef.current || !image) {
             return { sx: 1, sy: 1, ox: 0, oy: 0 };
+        }
         const rect = mainCanvasRef.current.getBoundingClientRect();
         const cw = mainCanvasRef.current.width;
         const ch = mainCanvasRef.current.height;
@@ -249,31 +293,32 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
         setCropStart({ mx: e.clientX, my: e.clientY, rect: { ...cropRect } });
     }, [cropRect]);
     useEffect(() => {
-        if (!cropDragging || !cropStart || !cropRect || !image)
+        if (!cropDragging || !cropStart || !cropRect || !image) {
             return;
+        }
         const handleMove = (e) => {
             const scale = getCanvasScale();
             const dx = (e.clientX - cropStart.mx) * scale.sx;
             const dy = (e.clientY - cropStart.my) * scale.sy;
             const r = { ...cropStart.rect };
             const minSize = 20;
-            if (cropDragging === "move") {
+            if (cropDragging === 'move') {
                 r.x = Math.max(0, Math.min(image.naturalWidth - r.w, r.x + dx));
                 r.y = Math.max(0, Math.min(image.naturalHeight - r.h, r.y + dy));
             }
             else {
-                if (cropDragging.includes("w")) {
+                if (cropDragging.includes('w')) {
                     r.x += dx;
                     r.w -= dx;
                 }
-                if (cropDragging.includes("e")) {
+                if (cropDragging.includes('e')) {
                     r.w += dx;
                 }
-                if (cropDragging.includes("n")) {
+                if (cropDragging.includes('n')) {
                     r.y += dy;
                     r.h -= dy;
                 }
-                if (cropDragging.includes("s")) {
+                if (cropDragging.includes('s')) {
                     r.h += dy;
                 }
                 if (r.w < minSize) {
@@ -283,7 +328,7 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
                     r.h = minSize;
                 }
                 if (cropAspect) {
-                    if (cropDragging.includes("w") || cropDragging.includes("e")) {
+                    if (cropDragging.includes('w') || cropDragging.includes('e')) {
                         r.h = r.w / cropAspect;
                     }
                     else {
@@ -303,82 +348,87 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
             setCropStart(null);
             pushHistory();
         };
-        window.addEventListener("mousemove", handleMove);
-        window.addEventListener("mouseup", handleUp);
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
         return () => {
-            window.removeEventListener("mousemove", handleMove);
-            window.removeEventListener("mouseup", handleUp);
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
         };
     }, [cropDragging, cropStart, cropRect, image, cropAspect, getCanvasScale, pushHistory]);
     // Compare slider drag
     useEffect(() => {
-        if (!compareDragging)
+        if (!compareDragging) {
             return;
+        }
         const handleMove = (e) => {
-            if (!containerRef.current)
+            if (!containerRef.current) {
                 return;
+            }
             const rect = containerRef.current.getBoundingClientRect();
             const pct = Math.max(0, Math.min(100, ((e.clientX - rect.left) / rect.width) * 100));
             setComparePosition(pct);
         };
         const handleUp = () => setCompareDragging(false);
-        window.addEventListener("mousemove", handleMove);
-        window.addEventListener("mouseup", handleUp);
+        window.addEventListener('mousemove', handleMove);
+        window.addEventListener('mouseup', handleUp);
         return () => {
-            window.removeEventListener("mousemove", handleMove);
-            window.removeEventListener("mouseup", handleUp);
+            window.removeEventListener('mousemove', handleMove);
+            window.removeEventListener('mouseup', handleUp);
         };
     }, [compareDragging]);
     // ── Keyboard shortcuts ──
     useEffect(() => {
         const handleKey = (e) => {
-            if (e.ctrlKey && e.key === "z") {
+            if (e.ctrlKey && e.key === 'z') {
                 e.preventDefault();
                 undo();
             }
-            if (e.ctrlKey && e.key === "y") {
+            if (e.ctrlKey && e.key === 'y') {
                 e.preventDefault();
                 redo();
             }
         };
-        window.addEventListener("keydown", handleKey);
-        return () => window.removeEventListener("keydown", handleKey);
+        window.addEventListener('keydown', handleKey);
+        return () => window.removeEventListener('keydown', handleKey);
     }, [undo, redo]);
     // ── Adjustments ──
     const handleAdjChange = useCallback((key, value) => {
-        setAdjustments(prev => ({ ...prev, [key]: value }));
+        setAdjustments((prev) => ({ ...prev, [key]: value }));
     }, []);
     const handleAdjChangeEnd = useCallback(() => pushHistory(), [pushHistory]);
     // ── Overlay helpers ──
     const addOverlay = useCallback((ov) => {
-        setOverlays(prev => [...prev, ov]);
+        setOverlays((prev) => [...prev, ov]);
         setSelectedOverlayId(ov.id);
         setTimeout(() => pushHistory(), 30);
     }, [pushHistory]);
     const updateOverlay = useCallback((id, patch) => {
-        setOverlays(prev => prev.map(o => o.id === id ? { ...o, ...patch } : o));
+        setOverlays((prev) => prev.map((o) => (o.id === id ? { ...o, ...patch } : o)));
     }, []);
     const deleteOverlay = useCallback((id) => {
-        setOverlays(prev => prev.filter(o => o.id !== id));
-        if (selectedOverlayId === id)
+        setOverlays((prev) => prev.filter((o) => o.id !== id));
+        if (selectedOverlayId === id) {
             setSelectedOverlayId(null);
+        }
         setTimeout(() => pushHistory(), 30);
     }, [selectedOverlayId, pushHistory]);
     const moveOverlayForward = useCallback((id) => {
-        setOverlays(prev => {
-            const idx = prev.findIndex(o => o.id === id);
-            if (idx < 0 || idx >= prev.length - 1)
+        setOverlays((prev) => {
+            const idx = prev.findIndex((o) => o.id === id);
+            if (idx < 0 || idx >= prev.length - 1) {
                 return prev;
+            }
             const copy = [...prev];
             [copy[idx], copy[idx + 1]] = [copy[idx + 1], copy[idx]];
             return copy;
         });
     }, []);
     const moveOverlayBack = useCallback((id) => {
-        setOverlays(prev => {
-            const idx = prev.findIndex(o => o.id === id);
-            if (idx <= 0)
+        setOverlays((prev) => {
+            const idx = prev.findIndex((o) => o.id === id);
+            if (idx <= 0) {
                 return prev;
+            }
             const copy = [...prev];
             [copy[idx - 1], copy[idx]] = [copy[idx], copy[idx - 1]];
             return copy;
@@ -386,8 +436,9 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, []);
     // ── Canvas fraction from mouse event ──
     const getCanvasFraction = useCallback((e) => {
-        if (!mainCanvasRef.current)
+        if (!mainCanvasRef.current) {
             return { fx: 0.5, fy: 0.5 };
+        }
         const rect = mainCanvasRef.current.getBoundingClientRect();
         return {
             fx: Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)),
@@ -397,10 +448,11 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     // ── Canvas mouse handlers ──
     const handleCanvasMouseDown = useCallback((e) => {
         var _a, _b, _c, _d;
-        if (cropMode)
+        if (cropMode) {
             return;
+        }
         const { fx, fy } = getCanvasFraction(e);
-        if (activeTab === "draw") {
+        if (activeTab === 'draw') {
             e.preventDefault();
             setIsDrawing(true);
             setLivePoints([[fx, fy]]);
@@ -422,7 +474,7 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     const handleCanvasMouseMove = useCallback((e) => {
         const { fx, fy } = getCanvasFraction(e);
         if (isDrawing) {
-            setLivePoints(prev => [...prev, [fx, fy]]);
+            setLivePoints((prev) => [...prev, [fx, fy]]);
             return;
         }
         if (overlayDragging && overlayDragStart && selectedOverlayId) {
@@ -433,19 +485,31 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
                 y: Math.max(0, Math.min(1, overlayDragStart.oy + dy)),
             });
         }
-    }, [getCanvasFraction, isDrawing, overlayDragging, overlayDragStart, selectedOverlayId, updateOverlay]);
+    }, [
+        getCanvasFraction,
+        isDrawing,
+        overlayDragging,
+        overlayDragStart,
+        selectedOverlayId,
+        updateOverlay,
+    ]);
     const handleCanvasMouseUp = useCallback(() => {
         if (isDrawing && livePoints.length > 1) {
-            const stroke = { points: [...livePoints], color: drawColor, width: drawWidth, opacity: 1 };
+            const stroke = {
+                points: [...livePoints],
+                color: drawColor,
+                width: drawWidth,
+                opacity: 1,
+            };
             if (!drawingOverlayRef.current) {
                 const dOv = createDrawingOverlay();
                 dOv.strokes.push(stroke);
                 drawingOverlayRef.current = dOv;
-                setOverlays(prev => [...prev, dOv]);
+                setOverlays((prev) => [...prev, dOv]);
             }
             else {
                 const id = drawingOverlayRef.current.id;
-                setOverlays(prev => prev.map(o => o.id === id && o.type === "drawing"
+                setOverlays((prev) => prev.map((o) => o.id === id && o.type === 'drawing'
                     ? { ...o, strokes: [...o.strokes, stroke] }
                     : o));
             }
@@ -464,21 +528,46 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [isDrawing, livePoints, drawColor, drawWidth, overlayDragging, pushHistory]);
     // ── Actions ──
     const buildExportParams = useCallback(() => {
-        if (!image)
+        if (!image) {
             return null;
-        return { image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays };
-    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays]);
+        }
+        return {
+            image,
+            selectedFilter,
+            filterParams,
+            filterIntensity,
+            adjustments,
+            cropRect,
+            rotation,
+            flipH,
+            flipV,
+            overlays,
+        };
+    }, [
+        image,
+        selectedFilter,
+        filterParams,
+        filterIntensity,
+        adjustments,
+        cropRect,
+        rotation,
+        flipH,
+        flipV,
+        overlays,
+    ]);
     const handleSave = useCallback(async () => {
-        if (!image || !mainCanvasRef.current)
+        if (!image || !mainCanvasRef.current) {
             return;
-        const exportCanvas = document.createElement("canvas");
+        }
+        const exportCanvas = document.createElement('canvas');
         renderToCanvas(exportCanvas, image, selectedFilter, { ...filterParams, intensity: filterIntensity }, adjustments, cropRect, rotation, flipH, flipV);
         if (overlays.length > 0) {
-            const ctx = exportCanvas.getContext("2d");
-            if (ctx)
+            const ctx = exportCanvas.getContext('2d');
+            if (ctx) {
                 renderAllOverlays(ctx, overlays, exportCanvas.width, exportCanvas.height);
+            }
         }
-        const file = await canvasToFile(exportCanvas, "player-photo.jpg", 0.92);
+        const file = await canvasToFile(exportCanvas, 'player-photo.jpg', 0.92);
         const editorState = serializeEditorState({
             filter: selectedFilter,
             filterIntensity,
@@ -490,9 +579,21 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
             overlays,
         });
         onSave(file, editorState);
-    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, rotation, flipH, flipV, overlays, onSave]);
+    }, [
+        image,
+        selectedFilter,
+        filterParams,
+        filterIntensity,
+        adjustments,
+        cropRect,
+        rotation,
+        flipH,
+        flipV,
+        overlays,
+        onSave,
+    ]);
     const handleReset = useCallback(() => {
-        setSelectedFilter("none");
+        setSelectedFilter('none');
         setFilterIntensity(1);
         setAdjustments({ ...DEFAULT_ADJUSTMENTS });
         setRotation(0);
@@ -509,25 +610,30 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [image, pushHistory]);
     const handleDownload = useCallback(async () => {
         const p = buildExportParams();
-        if (!p)
+        if (!p) {
             return;
+        }
         const blob = await getExportBlob(p);
-        if (blob)
+        if (blob) {
             handleDownloadBlob(blob);
+        }
     }, [buildExportParams]);
     const handleCopyToClipboard = useCallback(async () => {
         const p = buildExportParams();
-        if (!p)
+        if (!p) {
             return;
+        }
         await handleCopyImageToClipboard(p);
     }, [buildExportParams]);
     const handleShareNative = useCallback(async () => {
         const p = buildExportParams();
-        if (!p)
+        if (!p) {
             return;
+        }
         const blob = await getExportBlob(p);
-        if (blob)
+        if (blob) {
             await handleNativeShare(blob);
+        }
     }, [buildExportParams]);
     // ── Return ──
     return {