@nice2dev/ui-graphics 1.1.0 → 1.1.1

package/dist/cjs/photo/usePhotoEditor.js

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var i18n = require('../core/i18n.js');
+var photoEditorActions = require('./photoEditorActions.js');
 var photoFilters = require('./photoFilters.js');
 var photoOverlays = require('./photoOverlays.js');
-var photoEditorActions = require('./photoEditorActions.js');
 
 /**
  * usePhotoEditor.ts — Custom hook encapsulating all PhotoEditor state & logic.
@@ -13,7 +13,7 @@ var photoEditorActions = require('./photoEditorActions.js');
  * 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 } = i18n.useNiceTranslation();
     const t = (key, def) => _t(key, def);
     // ── State ──
@@ -21,12 +21,12 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     const [image, setImage] = React.useState(null);
     const [loading, setLoading] = React.useState(true);
     // Tabs
-    const [activeTab, setActiveTabRaw] = React.useState("filters");
+    const [activeTab, setActiveTabRaw] = React.useState('filters');
     const [cropMode, setCropMode] = React.useState(false);
     // Filter
-    const [selectedFilter, setSelectedFilter] = React.useState("none");
+    const [selectedFilter, setSelectedFilter] = React.useState('none');
     const [filterIntensity, setFilterIntensity] = React.useState(1);
-    const [filterCategory, setFilterCategory] = React.useState("all");
+    const [filterCategory, setFilterCategory] = React.useState('all');
     const [filterParams] = React.useState({});
     // Adjustments
     const [adjustments, setAdjustments] = React.useState({ ...photoFilters.DEFAULT_ADJUSTMENTS });
@@ -53,22 +53,22 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     // Sticker / emoji
     const [emojiCat, setEmojiCat] = React.useState(photoOverlays.EMOJI_CATALOG[0].id);
     // Text overlay
-    const [textDraft, setTextDraft] = React.useState("Tekst");
-    const [textColor, setTextColor] = React.useState("#ffffff");
+    const [textDraft, setTextDraft] = React.useState('Tekst');
+    const [textColor, setTextColor] = React.useState('#ffffff');
     const [textBold, setTextBold] = React.useState(true);
     const [textItalic, setTextItalic] = React.useState(false);
     const [textOutline, setTextOutline] = React.useState(true);
     const [textFontSize, setTextFontSize] = React.useState(36);
     const [textBg, setTextBg] = React.useState(false);
     // Shape
-    const [shapeStroke, setShapeStroke] = React.useState("#ffffff");
-    const [shapeFill, setShapeFill] = React.useState("");
+    const [shapeStroke, setShapeStroke] = React.useState('#ffffff');
+    const [shapeFill, setShapeFill] = React.useState('');
     const [shapeStrokeW, setShapeStrokeW] = React.useState(3);
     // Frame
-    const [frameColor, setFrameColor] = React.useState("#ffffff");
+    const [frameColor, setFrameColor] = React.useState('#ffffff');
     const [frameThick, setFrameThick] = React.useState(3);
     // Drawing
-    const [drawColor, setDrawColor] = React.useState("#ff0000");
+    const [drawColor, setDrawColor] = React.useState('#ff0000');
     const [drawWidth, setDrawWidth] = React.useState(4);
     const [isDrawing, setIsDrawing] = React.useState(false);
     const [livePoints, setLivePoints] = React.useState([]);
@@ -83,17 +83,18 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     const containerRef = React.useRef(null);
     // ── Derived ──
     const accent = playerColor;
-    const accentDim = playerColor + "55";
-    const selectedOverlay = React.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 = React.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 = React.useCallback((tab) => {
         setActiveTabRaw(tab);
-        setCropMode(tab === "crop");
+        setCropMode(tab === 'crop');
     }, []);
     // ── History ──
     const pushHistory = React.useCallback(() => {
-        if (suppressHistoryRef.current)
+        if (suppressHistoryRef.current) {
             return;
+        }
         const state = {
             selectedFilter,
             filterIntensity,
@@ -102,11 +103,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 = React.useCallback((s) => {
         suppressHistoryRef.current = true;
         setSelectedFilter(s.selectedFilter);
@@ -116,9 +127,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 = React.useCallback(() => {
         if (historyIdx > 0) {
@@ -147,12 +160,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
@@ -168,11 +182,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();
@@ -181,30 +199,52 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [image]);
     // ── Render main canvas ──
     const renderMain = React.useCallback(() => {
-        if (!image || !mainCanvasRef.current)
+        if (!image || !mainCanvasRef.current) {
             return;
+        }
         photoFilters.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) {
                     photoOverlays.renderAllOverlays(ctx, overlays, cw, ch);
-                if (livePoints.length > 1)
+                }
+                if (livePoints.length > 1) {
                     photoOverlays.renderLiveStroke(ctx, livePoints, drawColor, drawWidth, cw, ch);
+                }
             }
         }
-    }, [image, selectedFilter, filterParams, filterIntensity, adjustments, cropRect, cropMode, rotation, flipH, flipV, overlays, livePoints, drawColor, drawWidth]);
-    React.useEffect(() => { renderMain(); }, [renderMain]);
+    }, [
+        image,
+        selectedFilter,
+        filterParams,
+        filterIntensity,
+        adjustments,
+        cropRect,
+        cropMode,
+        rotation,
+        flipH,
+        flipV,
+        overlays,
+        livePoints,
+        drawColor,
+        drawWidth,
+    ]);
+    React.useEffect(() => {
+        renderMain();
+    }, [renderMain]);
     // Render compare canvas (original)
     React.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;
@@ -212,24 +252,27 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [image, showCompare, cropRect]);
     // ── Filter thumbnails ──
     const filteredList = React.useMemo(() => {
-        if (filterCategory === "all")
+        if (filterCategory === 'all') {
             return photoFilters.PHOTO_FILTERS;
-        return photoFilters.PHOTO_FILTERS.filter(f => f.category === filterCategory || f.id === "none");
+        }
+        return photoFilters.PHOTO_FILTERS.filter((f) => f.category === filterCategory || f.id === 'none');
     }, [filterCategory]);
     const generateThumbnail = React.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);
@@ -237,8 +280,9 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [image]);
     // ── Crop interaction ──
     const getCanvasScale = React.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;
@@ -251,31 +295,32 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
         setCropStart({ mx: e.clientX, my: e.clientY, rect: { ...cropRect } });
     }, [cropRect]);
     React.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) {
@@ -285,7 +330,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 {
@@ -305,82 +350,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
     React.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 ──
     React.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 = React.useCallback((key, value) => {
-        setAdjustments(prev => ({ ...prev, [key]: value }));
+        setAdjustments((prev) => ({ ...prev, [key]: value }));
     }, []);
     const handleAdjChangeEnd = React.useCallback(() => pushHistory(), [pushHistory]);
     // ── Overlay helpers ──
     const addOverlay = React.useCallback((ov) => {
-        setOverlays(prev => [...prev, ov]);
+        setOverlays((prev) => [...prev, ov]);
         setSelectedOverlayId(ov.id);
         setTimeout(() => pushHistory(), 30);
     }, [pushHistory]);
     const updateOverlay = React.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 = React.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 = React.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 = React.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;
@@ -388,8 +438,9 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, []);
     // ── Canvas fraction from mouse event ──
     const getCanvasFraction = React.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)),
@@ -399,10 +450,11 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     // ── Canvas mouse handlers ──
     const handleCanvasMouseDown = React.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]]);
@@ -424,7 +476,7 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     const handleCanvasMouseMove = React.useCallback((e) => {
         const { fx, fy } = getCanvasFraction(e);
         if (isDrawing) {
-            setLivePoints(prev => [...prev, [fx, fy]]);
+            setLivePoints((prev) => [...prev, [fx, fy]]);
             return;
         }
         if (overlayDragging && overlayDragStart && selectedOverlayId) {
@@ -435,19 +487,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 = React.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 = photoOverlays.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));
             }
@@ -466,21 +530,46 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [isDrawing, livePoints, drawColor, drawWidth, overlayDragging, pushHistory]);
     // ── Actions ──
     const buildExportParams = React.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 = React.useCallback(async () => {
-        if (!image || !mainCanvasRef.current)
+        if (!image || !mainCanvasRef.current) {
             return;
-        const exportCanvas = document.createElement("canvas");
+        }
+        const exportCanvas = document.createElement('canvas');
         photoFilters.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) {
                 photoOverlays.renderAllOverlays(ctx, overlays, exportCanvas.width, exportCanvas.height);
+            }
         }
-        const file = await photoFilters.canvasToFile(exportCanvas, "player-photo.jpg", 0.92);
+        const file = await photoFilters.canvasToFile(exportCanvas, 'player-photo.jpg', 0.92);
         const editorState = photoOverlays.serializeEditorState({
             filter: selectedFilter,
             filterIntensity,
@@ -492,9 +581,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 = React.useCallback(() => {
-        setSelectedFilter("none");
+        setSelectedFilter('none');
         setFilterIntensity(1);
         setAdjustments({ ...photoFilters.DEFAULT_ADJUSTMENTS });
         setRotation(0);
@@ -511,25 +612,30 @@ function usePhotoEditor({ src, playerColor = "#00aaff", onSave, onCancel, initia
     }, [image, pushHistory]);
     const handleDownload = React.useCallback(async () => {
         const p = buildExportParams();
-        if (!p)
+        if (!p) {
             return;
+        }
         const blob = await photoEditorActions.getExportBlob(p);
-        if (blob)
+        if (blob) {
             photoEditorActions.handleDownloadBlob(blob);
+        }
     }, [buildExportParams]);
     const handleCopyToClipboard = React.useCallback(async () => {
         const p = buildExportParams();
-        if (!p)
+        if (!p) {
             return;
+        }
         await photoEditorActions.handleCopyImageToClipboard(p);
     }, [buildExportParams]);
     const handleShareNative = React.useCallback(async () => {
         const p = buildExportParams();
-        if (!p)
+        if (!p) {
             return;
+        }
         const blob = await photoEditorActions.getExportBlob(p);
-        if (blob)
+        if (blob) {
             await photoEditorActions.handleNativeShare(blob);
+        }
     }, [buildExportParams]);
     // ── Return ──
     return {