@yogiswara/honcho-editor-ui 1.4.24 → 2.0.0

package/dist/components/editor/HSliderLightMobile.js

@@ -68,12 +68,13 @@ export default function HSliderLightMobile(props) {
                         },
                         '& .MuiSlider-thumb': {
                             background: colors.surface,
+                            boxShadow: 'none',
                             opacity: 1,
                         },
                         '& .MuiSlider-thumb:hover': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.exposureScore, step: 0.1, min: -5, max: 5, onChange: (_event, newValue) => props.onExposureChange(newValue) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -5, 5, props.onContrastChange), sx: {
+                    }, size: "small", value: props.exposureScore, step: 0.1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange(newValue) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onContrastChange), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",
@@ -121,6 +122,7 @@ export default function HSliderLightMobile(props) {
                         },
                         '& .MuiSlider-thumb': {
                             background: colors.surface,
+                            boxShadow: 'none',
                             opacity: 1,
                         },
                         '& .MuiSlider-thumb:hover': {
@@ -174,6 +176,7 @@ export default function HSliderLightMobile(props) {
                         },
                         '& .MuiSlider-thumb': {
                             background: colors.surface,
+                            boxShadow: 'none',
                             opacity: 1,
                         },
                         '& .MuiSlider-thumb:hover': {
@@ -227,6 +230,7 @@ export default function HSliderLightMobile(props) {
                         },
                         '& .MuiSlider-thumb': {
                             background: colors.surface,
+                            boxShadow: 'none',
                             opacity: 1,
                         },
                         '& .MuiSlider-thumb:hover': {
@@ -280,6 +284,7 @@ export default function HSliderLightMobile(props) {
                         },
                         '& .MuiSlider-thumb': {
                             background: colors.surface,
+                            boxShadow: 'none',
                             opacity: 1,
                         },
                         '& .MuiSlider-thumb:hover': {
@@ -333,6 +338,7 @@ export default function HSliderLightMobile(props) {
                         },
                         '& .MuiSlider-thumb': {
                             background: colors.surface,
+                            boxShadow: 'none',
                             opacity: 1,
                         },
                         '& .MuiSlider-thumb:hover': {

package/dist/hooks/editor/useHonchoEditor.d.ts

@@ -40,6 +40,8 @@ export declare function useHonchoEditor(controller: Controller, initImageId: str
     canvasRef: import("react").MutableRefObject<HTMLCanvasElement | null>;
     canvasContainerRef: import("react").MutableRefObject<HTMLDivElement | null>;
     fileInputRef: import("react").MutableRefObject<HTMLInputElement | null>;
+    handleShowOriginal: () => void;
+    handleShowEdited: () => void;
     editorStatus: string;
     isEditorReady: boolean;
     isImageLoaded: boolean;

package/dist/hooks/editor/useHonchoEditor.js

@@ -10,9 +10,6 @@ const initialAdjustments = {
 };
 // const clamp = (value: number) => Math.max(-100, Math.min(100, value));
 export function useHonchoEditor(controller, initImageId, firebaseUid) {
-    // const [currentImageId, setCurrentImageId] = useState<string>(initImageId);
-    // const [currentImageData, setCurrentImageData] = useState<Gallery | null>(null);
-    // const [currentAdjustmentsState, setCurrentAdjustmentsState] = useState<AdjustmentState>(initialAdjustments);
     const { onSwipeNext, onSwipePrev, isNextAvailable, isPrevAvailable, isLoading: isGalleryLoading, error: galleryError, currentImageData: galleryImageData } = useGallerySwipe(firebaseUid, initImageId, controller);
     // The useAdjustmentHistory hook now manages all undo/redo and adjustment state logic.
     const { currentState: currentAdjustmentsState, actions: historyActions, historyInfo, config: historyConfig, } = useAdjustmentHistory(initialAdjustments);
@@ -117,126 +114,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     //     }
     //     setSelectedImageIds(newSelectedIds);
     // }, [selectedImageIds, tempScore, tintScore, vibranceScore, saturationScore, exposureScore, highlightsScore, shadowsScore, whitesScore, blacksScore, contrastScore, clarityScore, sharpnessScore]);
-    // const createAbsoluteSetter = (key: keyof AdjustmentState, setter: React.Dispatch<React.SetStateAction<number>>) => (value: number) => {
-    //     setter(value); // Update UI slider
-    //     if(isBulkEditing) {
-    //         setAdjustmentsMap(prevMap => {
-    //             const newMap = new Map(prevMap);
-    //             selectedImageIds.forEach(id => {
-    //                 const currentState = newMap.get(id) || initialAdjustments;
-    //                 newMap.set(id, { ...currentState, [key]: value });
-    //             });
-    //             return newMap;
-    //         });
-    //     }
-    // };
-    // const createRelativeAdjuster = (key: keyof AdjustmentState, uiSetter: React.Dispatch<React.SetStateAction<number>>, amount: number) => () => {
-    //     uiSetter(prev => clamp(prev + amount));
-    //     if (isBulkEditing) {
-    //         setAdjustmentsMap(prevMap => {
-    //             const newMap = new Map(prevMap);
-    //             selectedImageIds.forEach(id => {
-    //                 const currentState = newMap.get(id) || initialAdjustments;
-    //                 const currentValue = currentState[key];
-    //                 const newValue = clamp(currentValue + amount);
-    //                 newMap.set(id, { ...currentState, [key]: newValue });
-    //             });
-    //             console.log("this is UI Setter: ", uiSetter);
-    //             return newMap;
-    //         });
-    //     }
-    // };
-    // const setTempScoreAbs = createAbsoluteSetter('tempScore', setTempScore);
-    // const setTintScoreAbs = createAbsoluteSetter('tintScore', setTintScore);
-    // const setVibranceScoreAbs = createAbsoluteSetter('vibranceScore', setVibranceScore);
-    // const setSaturationScoreAbs = createAbsoluteSetter('saturationScore', setSaturationScore);
-    // const setExposureScoreAbs = createAbsoluteSetter('exposureScore', setExposureScore);
-    // const setHighlightsScoreAbs = createAbsoluteSetter('highlightsScore', setHighlightsScore);
-    // const setShadowsScoreAbs = createAbsoluteSetter('shadowsScore', setShadowsScore);
-    // const setWhitesScoreAbs = createAbsoluteSetter('whitesScore', setWhitesScore);
-    // const setBlacksScoreAbs = createAbsoluteSetter('blacksScore', setBlacksScore);
-    // const setContrastScoreAbs = createAbsoluteSetter('contrastScore', setContrastScore);
-    // const setClarityScoreAbs = createAbsoluteSetter('clarityScore', setClarityScore);
-    // const setSharpnessScoreAbs = createAbsoluteSetter('sharpnessScore', setSharpnessScore);
-    // // MARK: - Bulk Editor Handlers
-    // const handleBulkTempDecreaseMax = createRelativeAdjuster('tempScore', setTempScore, -20);
-    // const handleBulkTempDecrease = createRelativeAdjuster('tempScore', setTempScore, -5);
-    // const handleBulkTempIncrease = createRelativeAdjuster('tempScore', setTempScore, 5);
-    // const handleBulkTempIncreaseMax = createRelativeAdjuster('tempScore', setTempScore, 20);
-    // const handleBulkTintDecreaseMax = createRelativeAdjuster('tintScore', setTintScore, -20);
-    // const handleBulkTintDecrease = createRelativeAdjuster('tintScore', setTintScore, -5);
-    // const handleBulkTintIncrease = createRelativeAdjuster('tintScore', setTintScore, 5);
-    // const handleBulkTintIncreaseMax = createRelativeAdjuster('tintScore', setTintScore, 20);
-    // const handleBulkVibranceDecreaseMax = createRelativeAdjuster('vibranceScore', setVibranceScore, -20);
-    // const handleBulkVibranceDecrease = createRelativeAdjuster('vibranceScore', setVibranceScore, -5);
-    // const handleBulkVibranceIncrease = createRelativeAdjuster('vibranceScore', setVibranceScore, 5);
-    // const handleBulkVibranceIncreaseMax = createRelativeAdjuster('vibranceScore', setVibranceScore, 20);
-    // const handleBulkSaturationDecreaseMax = createRelativeAdjuster('saturationScore', setSaturationScore, -20);
-    // const handleBulkSaturationDecrease = createRelativeAdjuster('saturationScore', setSaturationScore, -5);
-    // const handleBulkSaturationIncrease = createRelativeAdjuster('saturationScore', setSaturationScore, 5);
-    // const handleBulkSaturationIncreaseMax = createRelativeAdjuster('saturationScore', setSaturationScore, 20);
-    // const handleBulkExposureDecreaseMax = createRelativeAdjuster('exposureScore', setExposureScore, -20);
-    // const handleBulkExposureDecrease = createRelativeAdjuster('exposureScore', setExposureScore, -5);
-    // const handleBulkExposureIncrease = createRelativeAdjuster('exposureScore', setExposureScore, 5);
-    // const handleBulkExposureIncreaseMax = createRelativeAdjuster('exposureScore', setExposureScore, 20);
-    // const handleBulkContrastDecreaseMax = createRelativeAdjuster('contrastScore', setContrastScore, -20);
-    // const handleBulkContrastDecrease = createRelativeAdjuster('contrastScore', setContrastScore, -5);
-    // const handleBulkContrastIncrease = createRelativeAdjuster('contrastScore', setContrastScore, 5);
-    // const handleBulkContrastIncreaseMax = createRelativeAdjuster('contrastScore', setContrastScore, 20);
-    // const handleBulkHighlightsDecreaseMax = createRelativeAdjuster('highlightsScore', setHighlightsScore, -20);
-    // const handleBulkHighlightsDecrease = createRelativeAdjuster('highlightsScore', setHighlightsScore, -5);
-    // const handleBulkHighlightsIncrease = createRelativeAdjuster('highlightsScore', setHighlightsScore, 5);
-    // const handleBulkHighlightsIncreaseMax = createRelativeAdjuster('highlightsScore', setHighlightsScore, 20);
-    // const handleBulkShadowsDecreaseMax = createRelativeAdjuster('shadowsScore', setShadowsScore, -20);
-    // const handleBulkShadowsDecrease = createRelativeAdjuster('shadowsScore', setShadowsScore, -5);
-    // const handleBulkShadowsIncrease = createRelativeAdjuster('shadowsScore', setShadowsScore, 5);
-    // const handleBulkShadowsIncreaseMax = createRelativeAdjuster('shadowsScore', setShadowsScore, 20);
-    // const handleBulkWhitesDecreaseMax = createRelativeAdjuster('whitesScore', setWhitesScore, -20);
-    // const handleBulkWhitesDecrease = createRelativeAdjuster('whitesScore', setWhitesScore, -5);
-    // const handleBulkWhitesIncrease = createRelativeAdjuster('whitesScore', setWhitesScore, 5);
-    // const handleBulkWhitesIncreaseMax = createRelativeAdjuster('whitesScore', setWhitesScore, 20);
-    // const handleBulkBlacksDecreaseMax = createRelativeAdjuster('blacksScore', setBlacksScore, -20);
-    // const handleBulkBlacksDecrease = createRelativeAdjuster('blacksScore', setBlacksScore, -5);
-    // const handleBulkBlacksIncrease = createRelativeAdjuster('blacksScore', setBlacksScore, 5);
-    // const handleBulkBlacksIncreaseMax = createRelativeAdjuster('blacksScore', setBlacksScore, 20);
-    // const handleBulkClarityDecreaseMax = createRelativeAdjuster('clarityScore', setClarityScore, -20);
-    // const handleBulkClarityDecrease = createRelativeAdjuster('clarityScore', setClarityScore, -5);
-    // const handleBulkClarityIncrease = createRelativeAdjuster('clarityScore', setClarityScore, 5);
-    // const handleBulkClarityIncreaseMax = createRelativeAdjuster('clarityScore', setClarityScore, 20);
-    // const handleBulkSharpnessDecreaseMax = createRelativeAdjuster('sharpnessScore', setSharpnessScore, -20);
-    // const handleBulkSharpnessDecrease = createRelativeAdjuster('sharpnessScore', setSharpnessScore, -5);
-    // const handleBulkSharpnessIncrease = createRelativeAdjuster('sharpnessScore', setSharpnessScore, 5);
-    // const handleBulkSharpnessIncreaseMax = createRelativeAdjuster('sharpnessScore', setSharpnessScore, 20);
-    // // Bulk Editing Handlers
-    // const toggleBulkEditing = () => {
-    //     setIsBulkEditing(prev => {
-    //         const isNowBulk = !prev;
-    //         setSelectedImages(isNowBulk ? 'Selected' : 'Select');
-    //         return isNowBulk;
-    //     });
-    // };
-    // const handleSelectBulkPreset = (event: SelectChangeEvent<string>) => setSelectedBulkPreset(event.target.value as string);
-    // MARK : Image original and canvas
-    // const handleShowOriginal = useCallback(() => {
-    //     if (!editorRef.current || !isImageLoaded) return;
-    //     console.log("Showing original image...");
-    //     // 1. Set the flag to true to pause history recording
-    //     setIsViewingOriginal(true);
-    //     // 2. Apply the initial state to the view
-    //     // applyAdjustmentState(initialAdjustments);
-    // }, [isImageLoaded]);
-    // const handleShowEdited = useCallback(() => {
-    //     if (!editorRef.current || !isImageLoaded) return;
-    //     console.log("Restoring edited image...");
-    //     const latestState = history[historyIndex];
-    //     if (latestState) {
-    //         // 3. Re-apply the latest state from history
-    //         // applyAdjustmentState(latestState);
-    //     }
-    //     // 4. Set the flag back to false AFTER the state has been restored.
-    //     // A small timeout ensures this runs after the re-render.
-    //     setTimeout(() => setIsViewingOriginal(false), 0);
-    // }, [isImageLoaded, history, historyIndex]);
     // Mobile Panel Drag Handlers
     const handleContentHeightChange = useCallback((height) => {
         if (height > 0 && height !== contentHeight)
@@ -329,7 +206,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
                 editorRef.current = editor;
                 setIsEditorReady(true);
                 setEditorStatus("Ready! Select an image to start.");
-                console.log("[Editor] Initialization successful."); // Log entry
             }
             catch (error) {
                 console.error("[Editor] CRITICAL: Editor initialization failed:", error); // Critical error log
@@ -357,6 +233,21 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     const handlePresetAccordionChange = (panel) => (_, isExpanded) => {
         setPresetExpandedPanels(prev => isExpanded ? [...new Set([...prev, panel])] : prev.filter(p => p !== panel));
     };
+    const handleShowOriginal = useCallback(() => {
+        if (!editorRef.current || !isImageLoaded || !canvasRef.current)
+            return;
+        console.log("Showing original image...");
+        editorRef.current.setAdjustments(mapAdjustmentStateToAdjustmentEditor(initialAdjustments));
+        editorRef.current.processImage();
+        editorRef.current.renderToCanvas(canvasRef.current);
+    }, [isImageLoaded, editorRef, canvasRef]);
+    const handleShowEdited = useCallback(() => {
+        if (!editorRef.current || !isImageLoaded || !canvasRef.current)
+            return;
+        editorRef.current.setAdjustments(mapAdjustmentStateToAdjustmentEditor(currentAdjustmentsState));
+        editorRef.current.processImage();
+        editorRef.current.renderToCanvas(canvasRef.current);
+    }, [isImageLoaded, editorRef, canvasRef, currentAdjustmentsState]);
     // MARK: - Preset Handlers
     // Also it calls for the backend endpoint
     const handleSelectMobilePreset = (presetId) => setSelectedMobilePreset(presetId);
@@ -714,6 +605,8 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         canvasRef,
         canvasContainerRef,
         fileInputRef,
+        handleShowOriginal,
+        handleShowEdited,
         // Status & State
         editorStatus,
         isEditorReady,

package/dist/hooks/editor/useHonchoEditorBulk.d.ts

@@ -0,0 +1,74 @@
+import { SelectChangeEvent } from "@mui/material";
+import { AdjustmentState, ImageItem } from './useHonchoEditor';
+export declare function useHonchoEditorBulk(): {
+    isBulkEditing: boolean;
+    selectedImages: string;
+    imageList: ImageItem[];
+    selectedImageIds: Set<string>;
+    adjustmentsMap: Map<string, AdjustmentState>;
+    selectedBulkPreset: string;
+    handleFileChangeBulk: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleToggleImageSelection: (imageId: string) => void;
+    toggleBulkEditing: () => void;
+    handleSelectBulkPreset: (event: SelectChangeEvent<string>) => void;
+    setTempScore: (value: number) => void;
+    setTintScore: (value: number) => void;
+    setVibranceScore: (value: number) => void;
+    setSaturationScore: (value: number) => void;
+    setExposureScore: (value: number) => void;
+    setHighlightsScore: (value: number) => void;
+    setShadowsScore: (value: number) => void;
+    setWhitesScore: (value: number) => void;
+    setBlacksScore: (value: number) => void;
+    setContrastScore: (value: number) => void;
+    setClarityScore: (value: number) => void;
+    setSharpnessScore: (value: number) => void;
+    handleBulkTempDecreaseMax: () => void;
+    handleBulkTempDecrease: () => void;
+    handleBulkTempIncrease: () => void;
+    handleBulkTempIncreaseMax: () => void;
+    handleBulkTintDecreaseMax: () => void;
+    handleBulkTintDecrease: () => void;
+    handleBulkTintIncrease: () => void;
+    handleBulkTintIncreaseMax: () => void;
+    handleBulkVibranceDecreaseMax: () => void;
+    handleBulkVibranceDecrease: () => void;
+    handleBulkVibranceIncrease: () => void;
+    handleBulkVibranceIncreaseMax: () => void;
+    handleBulkSaturationDecreaseMax: () => void;
+    handleBulkSaturationDecrease: () => void;
+    handleBulkSaturationIncrease: () => void;
+    handleBulkSaturationIncreaseMax: () => void;
+    handleBulkExposureDecreaseMax: () => void;
+    handleBulkExposureDecrease: () => void;
+    handleBulkExposureIncrease: () => void;
+    handleBulkExposureIncreaseMax: () => void;
+    handleBulkContrastDecreaseMax: () => void;
+    handleBulkContrastDecrease: () => void;
+    handleBulkContrastIncrease: () => void;
+    handleBulkContrastIncreaseMax: () => void;
+    handleBulkHighlightsDecreaseMax: () => void;
+    handleBulkHighlightsDecrease: () => void;
+    handleBulkHighlightsIncrease: () => void;
+    handleBulkHighlightsIncreaseMax: () => void;
+    handleBulkShadowsDecreaseMax: () => void;
+    handleBulkShadowsDecrease: () => void;
+    handleBulkShadowsIncrease: () => void;
+    handleBulkShadowsIncreaseMax: () => void;
+    handleBulkWhitesDecreaseMax: () => void;
+    handleBulkWhitesDecrease: () => void;
+    handleBulkWhitesIncrease: () => void;
+    handleBulkWhitesIncreaseMax: () => void;
+    handleBulkBlacksDecreaseMax: () => void;
+    handleBulkBlacksDecrease: () => void;
+    handleBulkBlacksIncrease: () => void;
+    handleBulkBlacksIncreaseMax: () => void;
+    handleBulkClarityDecreaseMax: () => void;
+    handleBulkClarityDecrease: () => void;
+    handleBulkClarityIncrease: () => void;
+    handleBulkClarityIncreaseMax: () => void;
+    handleBulkSharpnessDecreaseMax: () => void;
+    handleBulkSharpnessDecrease: () => void;
+    handleBulkSharpnessIncrease: () => void;
+    handleBulkSharpnessIncreaseMax: () => void;
+};

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -0,0 +1,235 @@
+'use client';
+import { useState, useCallback, useEffect } from 'react';
+import { useAdjustmentHistory } from '../useAdjustmentHistory';
+const initialAdjustments = {
+    tempScore: 0, tintScore: 0, vibranceScore: 0, exposureScore: 0, highlightsScore: 0, shadowsScore: 0,
+    whitesScore: 0, blacksScore: 0, saturationScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
+};
+const clamp = (value) => Math.max(-100, Math.min(100, value));
+export function useHonchoEditorBulk() {
+    const { currentState, actions: historyActions, historyInfo } = useAdjustmentHistory(initialAdjustments);
+    // State for Bulk Editing
+    const [isBulkEditing, setIsBulkEditing] = useState(false);
+    const [selectedImages, setSelectedImages] = useState('Select');
+    const [imageList, setImageList] = useState([]);
+    const [selectedImageIds, setSelectedImageIds] = useState(new Set());
+    const [adjustmentsMap, setAdjustmentsMap] = useState(new Map());
+    const [selectedBulkPreset, setSelectedBulkPreset] = useState('preset1');
+    const handleFileChangeBulk = (event) => {
+        const files = event.target?.files;
+        if (!files || files.length <= 1) {
+            // If it's not a bulk operation, we clear the state.
+            setIsBulkEditing(false);
+            setImageList([]);
+            setSelectedImageIds(new Set());
+            setAdjustmentsMap(new Map());
+            return;
+        }
+        ;
+        setIsBulkEditing(true);
+        const newImageList = Array.from(files).map((file, index) => ({
+            id: `${file.name}-${Date.now()}-${index}`,
+            name: file.name,
+            file: file,
+            url: URL.createObjectURL(file),
+        }));
+        const newAdjustmentsMap = new Map();
+        newImageList.forEach(image => {
+            newAdjustmentsMap.set(image.id, { ...initialAdjustments });
+        });
+        setAdjustmentsMap(newAdjustmentsMap);
+        setImageList(newImageList);
+        setSelectedImageIds(new Set(newImageList.map(img => img.id)));
+    };
+    const handleToggleImageSelection = useCallback((imageId) => {
+        const newSelectedIds = new Set(selectedImageIds);
+        if (newSelectedIds.has(imageId)) {
+            if (newSelectedIds.size > 1) { // Prevent deselecting the last image
+                newSelectedIds.delete(imageId);
+            }
+        }
+        else {
+            newSelectedIds.add(imageId);
+        }
+        setSelectedImageIds(newSelectedIds);
+    }, [selectedImageIds]);
+    const toggleBulkEditing = () => {
+        setIsBulkEditing(prev => {
+            const isNowBulk = !prev;
+            setSelectedImages(isNowBulk ? 'Selected' : 'Select');
+            return isNowBulk;
+        });
+    };
+    const handleSelectBulkPreset = (event) => setSelectedBulkPreset(event.target.value);
+    // This factory creates functions that adjust a value for all selected images
+    const createAbsoluteSetter = (key, setter) => (value) => {
+        setter(value); // Update UI slider
+        if (isBulkEditing) {
+            setAdjustmentsMap(prevMap => {
+                const newMap = new Map(prevMap);
+                selectedImageIds.forEach(id => {
+                    const currentState = newMap.get(id) || initialAdjustments;
+                    newMap.set(id, { ...currentState, [key]: value });
+                });
+                return newMap;
+            });
+        }
+    };
+    const updateAdjustments = useCallback((newValues) => {
+        const newState = { ...currentState, ...newValues };
+        historyActions.pushState(newState);
+    }, [currentState, historyActions]);
+    const createRelativeAdjuster = (key, amount) => () => {
+        const currentValue = currentState[key];
+        const newValue = clamp(currentValue + amount);
+        updateAdjustments({ [key]: newValue });
+    };
+    useEffect(() => {
+        if (!isBulkEditing)
+            return;
+        setAdjustmentsMap(prevMap => {
+            const newMap = new Map(prevMap);
+            selectedImageIds.forEach(id => {
+                // Apply the new global state to each selected image
+                newMap.set(id, currentState);
+            });
+            return newMap;
+        });
+    }, [currentState, selectedImageIds, isBulkEditing]);
+    const setTempScore = (value) => updateAdjustments({ tempScore: value });
+    const setTintScore = (value) => updateAdjustments({ tintScore: value });
+    const setVibranceScore = (value) => updateAdjustments({ vibranceScore: value });
+    const setSaturationScore = (value) => updateAdjustments({ saturationScore: value });
+    const setExposureScore = (value) => updateAdjustments({ exposureScore: value });
+    const setHighlightsScore = (value) => updateAdjustments({ highlightsScore: value });
+    const setShadowsScore = (value) => updateAdjustments({ shadowsScore: value });
+    const setWhitesScore = (value) => updateAdjustments({ whitesScore: value });
+    const setBlacksScore = (value) => updateAdjustments({ blacksScore: value });
+    const setContrastScore = (value) => updateAdjustments({ contrastScore: value });
+    const setClarityScore = (value) => updateAdjustments({ clarityScore: value });
+    const setSharpnessScore = (value) => updateAdjustments({ sharpnessScore: value });
+    const handleBulkTempDecreaseMax = createRelativeAdjuster('tempScore', -20);
+    const handleBulkTempDecrease = createRelativeAdjuster('tempScore', -5);
+    const handleBulkTempIncrease = createRelativeAdjuster('tempScore', 5);
+    const handleBulkTempIncreaseMax = createRelativeAdjuster('tempScore', 20);
+    const handleBulkTintDecreaseMax = createRelativeAdjuster('tintScore', -20);
+    const handleBulkTintDecrease = createRelativeAdjuster('tintScore', -5);
+    const handleBulkTintIncrease = createRelativeAdjuster('tintScore', 5);
+    const handleBulkTintIncreaseMax = createRelativeAdjuster('tintScore', 20);
+    const handleBulkVibranceDecreaseMax = createRelativeAdjuster('vibranceScore', -20);
+    const handleBulkVibranceDecrease = createRelativeAdjuster('vibranceScore', -5);
+    const handleBulkVibranceIncrease = createRelativeAdjuster('vibranceScore', 5);
+    const handleBulkVibranceIncreaseMax = createRelativeAdjuster('vibranceScore', 20);
+    const handleBulkSaturationDecreaseMax = createRelativeAdjuster('saturationScore', -20);
+    const handleBulkSaturationDecrease = createRelativeAdjuster('saturationScore', -5);
+    const handleBulkSaturationIncrease = createRelativeAdjuster('saturationScore', 5);
+    const handleBulkSaturationIncreaseMax = createRelativeAdjuster('saturationScore', 20);
+    const handleBulkExposureDecreaseMax = createRelativeAdjuster('exposureScore', -20);
+    const handleBulkExposureDecrease = createRelativeAdjuster('exposureScore', -5);
+    const handleBulkExposureIncrease = createRelativeAdjuster('exposureScore', 5);
+    const handleBulkExposureIncreaseMax = createRelativeAdjuster('exposureScore', 20);
+    const handleBulkContrastDecreaseMax = createRelativeAdjuster('contrastScore', -20);
+    const handleBulkContrastDecrease = createRelativeAdjuster('contrastScore', -5);
+    const handleBulkContrastIncrease = createRelativeAdjuster('contrastScore', 5);
+    const handleBulkContrastIncreaseMax = createRelativeAdjuster('contrastScore', 20);
+    const handleBulkHighlightsDecreaseMax = createRelativeAdjuster('highlightsScore', -20);
+    const handleBulkHighlightsDecrease = createRelativeAdjuster('highlightsScore', -5);
+    const handleBulkHighlightsIncrease = createRelativeAdjuster('highlightsScore', 5);
+    const handleBulkHighlightsIncreaseMax = createRelativeAdjuster('highlightsScore', 20);
+    const handleBulkShadowsDecreaseMax = createRelativeAdjuster('shadowsScore', -20);
+    const handleBulkShadowsDecrease = createRelativeAdjuster('shadowsScore', -5);
+    const handleBulkShadowsIncrease = createRelativeAdjuster('shadowsScore', 5);
+    const handleBulkShadowsIncreaseMax = createRelativeAdjuster('shadowsScore', 20);
+    const handleBulkWhitesDecreaseMax = createRelativeAdjuster('whitesScore', -20);
+    const handleBulkWhitesDecrease = createRelativeAdjuster('whitesScore', -5);
+    const handleBulkWhitesIncrease = createRelativeAdjuster('whitesScore', 5);
+    const handleBulkWhitesIncreaseMax = createRelativeAdjuster('whitesScore', 20);
+    const handleBulkBlacksDecreaseMax = createRelativeAdjuster('blacksScore', -20);
+    const handleBulkBlacksDecrease = createRelativeAdjuster('blacksScore', -5);
+    const handleBulkBlacksIncrease = createRelativeAdjuster('blacksScore', 5);
+    const handleBulkBlacksIncreaseMax = createRelativeAdjuster('blacksScore', 20);
+    const handleBulkClarityDecreaseMax = createRelativeAdjuster('clarityScore', -20);
+    const handleBulkClarityDecrease = createRelativeAdjuster('clarityScore', -5);
+    const handleBulkClarityIncrease = createRelativeAdjuster('clarityScore', 5);
+    const handleBulkClarityIncreaseMax = createRelativeAdjuster('clarityScore', 20);
+    const handleBulkSharpnessDecreaseMax = createRelativeAdjuster('sharpnessScore', -20);
+    const handleBulkSharpnessDecrease = createRelativeAdjuster('sharpnessScore', -5);
+    const handleBulkSharpnessIncrease = createRelativeAdjuster('sharpnessScore', 5);
+    const handleBulkSharpnessIncreaseMax = createRelativeAdjuster('sharpnessScore', 20);
+    return {
+        isBulkEditing,
+        selectedImages,
+        imageList,
+        selectedImageIds,
+        adjustmentsMap,
+        selectedBulkPreset,
+        handleFileChangeBulk,
+        handleToggleImageSelection,
+        toggleBulkEditing,
+        handleSelectBulkPreset,
+        // Bulk Adjustment Handlers
+        setTempScore,
+        setTintScore,
+        setVibranceScore,
+        setSaturationScore,
+        setExposureScore,
+        setHighlightsScore,
+        setShadowsScore,
+        setWhitesScore,
+        setBlacksScore,
+        setContrastScore,
+        setClarityScore,
+        setSharpnessScore,
+        // Adjustment
+        handleBulkTempDecreaseMax,
+        handleBulkTempDecrease,
+        handleBulkTempIncrease,
+        handleBulkTempIncreaseMax,
+        handleBulkTintDecreaseMax,
+        handleBulkTintDecrease,
+        handleBulkTintIncrease,
+        handleBulkTintIncreaseMax,
+        handleBulkVibranceDecreaseMax,
+        handleBulkVibranceDecrease,
+        handleBulkVibranceIncrease,
+        handleBulkVibranceIncreaseMax,
+        handleBulkSaturationDecreaseMax,
+        handleBulkSaturationDecrease,
+        handleBulkSaturationIncrease,
+        handleBulkSaturationIncreaseMax,
+        // Adjustment Light
+        handleBulkExposureDecreaseMax,
+        handleBulkExposureDecrease,
+        handleBulkExposureIncrease,
+        handleBulkExposureIncreaseMax,
+        handleBulkContrastDecreaseMax,
+        handleBulkContrastDecrease,
+        handleBulkContrastIncrease,
+        handleBulkContrastIncreaseMax,
+        handleBulkHighlightsDecreaseMax,
+        handleBulkHighlightsDecrease,
+        handleBulkHighlightsIncrease,
+        handleBulkHighlightsIncreaseMax,
+        handleBulkShadowsDecreaseMax,
+        handleBulkShadowsDecrease,
+        handleBulkShadowsIncrease,
+        handleBulkShadowsIncreaseMax,
+        handleBulkWhitesDecreaseMax,
+        handleBulkWhitesDecrease,
+        handleBulkWhitesIncrease,
+        handleBulkWhitesIncreaseMax,
+        handleBulkBlacksDecreaseMax,
+        handleBulkBlacksDecrease,
+        handleBulkBlacksIncrease,
+        handleBulkBlacksIncreaseMax,
+        // Adjustment Details
+        handleBulkClarityDecreaseMax,
+        handleBulkClarityDecrease,
+        handleBulkClarityIncrease,
+        handleBulkClarityIncreaseMax,
+        handleBulkSharpnessDecreaseMax,
+        handleBulkSharpnessDecrease,
+        handleBulkSharpnessIncrease,
+        handleBulkSharpnessIncreaseMax,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "1.4.24",
+  "version": "2.0.0",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",