@yogiswara/honcho-editor-ui 2.6.6 → 2.6.7

package/dist/hooks/useAdjustmentHistoryBatch.js

@@ -120,22 +120,49 @@ export function useAdjustmentHistoryBatch(options = {}) {
     const [selectedIds, setSelectedIds] = useState([]);
     const [imageHistories, setImageHistories] = useState([]);
     const [currentBatch, setCurrentBatch] = useState(createEmptyBatchState());
+    const [lastUpdateTimestamp, setLastUpdateTimestamp] = useState(Date.now());
     // Configuration refs
     const maxSizeRef = useRef(internalOptions.maxSize);
     const devWarningsRef = useRef(internalOptions.devWarnings);
     // Helper function to rebuild currentBatch from imageHistories
     const rebuildCurrentBatch = useCallback(() => {
+        console.log('[useAdjustmentHistoryBatch] 🔧 rebuildCurrentBatch called with imageHistories:', imageHistories.map(h => ({
+            imageId: h.imageId,
+            currentHistoryEntryId: h.currentHistoryEntryId,
+            historyLength: h.history.length,
+            historyIds: h.history.map(entry => entry.id)
+        })));
         const newBatch = createEmptyBatchState();
         imageHistories.forEach(imageHistory => {
             // Find current adjustment using currentHistoryEntryId
             const currentEntry = imageHistory.history.find(entry => entry.id === imageHistory.currentHistoryEntryId);
+            console.log(`[useAdjustmentHistoryBatch] 🔍 rebuildCurrentBatch for image ${imageHistory.imageId}:`, {
+                currentHistoryEntryId: imageHistory.currentHistoryEntryId,
+                foundCurrentEntry: !!currentEntry,
+                historyLength: imageHistory.history.length,
+                historyIds: imageHistory.history.map(entry => entry.id)
+            });
             if (currentEntry) {
                 newBatch.allImages[imageHistory.imageId] = currentEntry.adjustment;
                 if (selectedIds.includes(imageHistory.imageId)) {
                     newBatch.currentSelection[imageHistory.imageId] = currentEntry.adjustment;
                 }
+                console.log(`[useAdjustmentHistoryBatch] ✅ Successfully rebuilt batch for image ${imageHistory.imageId}`);
+            }
+            else {
+                console.error(`[useAdjustmentHistoryBatch] ❌ CRITICAL: Current entry not found for image ${imageHistory.imageId}!`, {
+                    searchingFor: imageHistory.currentHistoryEntryId,
+                    availableIds: imageHistory.history.map(entry => entry.id),
+                    historyLength: imageHistory.history.length
+                });
             }
         });
+        console.log('[useAdjustmentHistoryBatch] 🔧 rebuildCurrentBatch result:', {
+            allImagesCount: Object.keys(newBatch.allImages).length,
+            currentSelectionCount: Object.keys(newBatch.currentSelection).length,
+            allImagesIds: Object.keys(newBatch.allImages),
+            currentSelectionIds: Object.keys(newBatch.currentSelection)
+        });
         return newBatch;
     }, [imageHistories, selectedIds]);
     // Sync currentBatch with imageHistories
@@ -184,76 +211,105 @@ export function useAdjustmentHistoryBatch(options = {}) {
             }
             return;
         }
-        // Store backend operations to perform after state update
+        // Prepare backend operations BEFORE state update (outside setImageHistories)
         const backendOperations = [];
-        setImageHistories(prevHistories => {
-            return prevHistories.map(imageHistory => {
-                if (!selectedIds.includes(imageHistory.imageId)) {
-                    return imageHistory; // No change for unselected images
+        // Process each image to prepare operations
+        const operationsToApply = [];
+        imageHistories.forEach(imageHistory => {
+            if (!selectedIds.includes(imageHistory.imageId)) {
+                return; // Skip images not being adjusted
+            }
+            // Get current adjustment from current entry
+            const currentEntry = imageHistory.history.find(entry => entry.id === imageHistory.currentHistoryEntryId);
+            const currentAdjustment = currentEntry?.adjustment || createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
+            // Apply deltas with clamping
+            const newAdjustment = { ...currentAdjustment };
+            Object.keys(delta).forEach(key => {
+                const deltaValue = delta[key];
+                if (typeof deltaValue === 'number') {
+                    const currentValue = newAdjustment[key];
+                    newAdjustment[key] = Math.max(-100, Math.min(100, currentValue + deltaValue));
                 }
-                // Get current adjustment from current entry
-                const currentEntry = imageHistory.history.find(entry => entry.id === imageHistory.currentHistoryEntryId);
-                const currentAdjustment = currentEntry?.adjustment || createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
-                // Apply deltas with clamping
-                const newAdjustment = { ...currentAdjustment };
-                Object.keys(delta).forEach(key => {
-                    const deltaValue = delta[key];
-                    if (typeof deltaValue === 'number') {
-                        const currentValue = newAdjustment[key];
-                        newAdjustment[key] = Math.max(-100, Math.min(100, currentValue + deltaValue));
-                    }
+            });
+            // Check if user is in the middle of history (not at latest state)
+            const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
+            const isInMiddleOfHistory = currentEntryIndex < imageHistory.history.length - 1;
+            let replaceFromTaskId;
+            console.log(`[useAdjustmentHistoryBatch] 🎯 Delta replace logic for image ${imageHistory.imageId}:`, {
+                currentEntryIndex,
+                historyLength: imageHistory.history.length,
+                isInMiddleOfHistory,
+                currentEntryId: currentEntry?.id
+            });
+            if (isInMiddleOfHistory) {
+                // If user is in middle of history, get the task ID of current position
+                replaceFromTaskId = currentEntry?.id;
+                console.log(`[useAdjustmentHistoryBatch] 🔄 DELTA will REPLACE current position. replaceFromTaskId=${replaceFromTaskId}`);
+            }
+            else {
+                console.log(`[useAdjustmentHistoryBatch] ➕ DELTA will ADD new entry (at end of history)`);
+            }
+            // Generate new task ID for backend (same as entry ID)
+            const taskId = generateTaskId();
+            // Create new entry with task ID
+            const newEntryId = taskId; // Use the same ID for both entry and task
+            const newEntry = {
+                id: newEntryId,
+                adjustment: newAdjustment
+            };
+            // Build new history
+            let newHistory;
+            if (isInMiddleOfHistory) {
+                // If in middle of history, truncate from current position and add new entry
+                newHistory = [...imageHistory.history.slice(0, currentEntryIndex + 1), newEntry];
+            }
+            else {
+                // If at end of history, just add new entry
+                newHistory = [...imageHistory.history, newEntry];
+            }
+            // Trim if needed
+            const maxSize = maxSizeRef.current;
+            const trimmedHistory = typeof maxSize === 'number' && newHistory.length > maxSize
+                ? newHistory.slice(-maxSize)
+                : newHistory;
+            // Store operation for state update
+            operationsToApply.push({
+                imageId: imageHistory.imageId,
+                newEntryId,
+                newHistory: trimmedHistory
+            });
+            // Prepare backend operation (OUTSIDE state setter)
+            if (internalOptions.controller && internalOptions.firebaseUid) {
+                backendOperations.push({
+                    imageId: imageHistory.imageId,
+                    taskId,
+                    adjustment: newAdjustment,
+                    replaceFromTaskId
                 });
-                // Check if user is in the middle of history (not at latest state)
-                const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
-                const isInMiddleOfHistory = currentEntryIndex < imageHistory.history.length - 1;
-                let replaceFromTaskId;
-                if (isInMiddleOfHistory) {
-                    // If user is in middle of history, get the task ID of current position
-                    replaceFromTaskId = currentEntry?.id;
-                }
-                // Generate new task ID for backend (same as entry ID)
-                const taskId = generateTaskId();
-                // Create new entry with task ID
-                const newEntryId = taskId; // Use the same ID for both entry and task
-                const newEntry = {
-                    id: newEntryId,
-                    adjustment: newAdjustment
-                };
-                // Prepare backend operation
-                if (internalOptions.controller && internalOptions.firebaseUid) {
-                    backendOperations.push({
-                        imageId: imageHistory.imageId,
-                        taskId,
-                        adjustment: newAdjustment,
-                        replaceFromTaskId
-                    });
-                }
-                // Build new history
-                let newHistory;
-                if (isInMiddleOfHistory) {
-                    // If in middle of history, truncate from current position and add new entry
-                    newHistory = [...imageHistory.history.slice(0, currentEntryIndex + 1), newEntry];
-                }
-                else {
-                    // If at end of history, just add new entry
-                    newHistory = [...imageHistory.history, newEntry];
+            }
+        });
+        // Now update state with prepared operations (no backend preparation inside)
+        setImageHistories(prevHistories => {
+            return prevHistories.map(imageHistory => {
+                // Find operation for this image
+                const operation = operationsToApply.find(op => op.imageId === imageHistory.imageId);
+                if (!operation) {
+                    return imageHistory; // No change for images not being adjusted
                 }
-                // Trim if needed
-                const maxSize = maxSizeRef.current;
-                const trimmedHistory = typeof maxSize === 'number' && newHistory.length > maxSize
-                    ? newHistory.slice(-maxSize)
-                    : newHistory;
+                console.log(`[useAdjustmentHistoryBatch] 📝 Applying state update for delta on image ${imageHistory.imageId}`);
                 return {
                     ...imageHistory,
-                    history: trimmedHistory,
-                    currentHistoryEntryId: newEntryId // Update current pointer
+                    history: operation.newHistory,
+                    currentHistoryEntryId: operation.newEntryId // Update current pointer
                 };
             });
         });
-        // Perform backend operations asynchronously
+        // Perform backend operations asynchronously (already prepared)
         if (backendOperations.length > 0 && internalOptions.controller && internalOptions.firebaseUid) {
             try {
+                console.log(`[useAdjustmentHistoryBatch] 📤 Syncing ${backendOperations.length} adjustments to backend (createEditorConfig for each image)`);
                 const promises = backendOperations.map(async (operation) => {
+                    console.log(`[useAdjustmentHistoryBatch] 🔄 Calling createEditorConfig for image ${operation.imageId} with taskId ${operation.taskId}`);
                     await internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, {
                         gallery_id: operation.imageId,
                         task_id: operation.taskId,
@@ -263,89 +319,118 @@ export function useAdjustmentHistoryBatch(options = {}) {
                 });
                 await Promise.all(promises);
                 if (devWarningsRef.current) {
-                    console.log(`[useAdjustmentHistoryBatch] Synced ${backendOperations.length} adjustments to backend`);
+                    console.log(`[useAdjustmentHistoryBatch] ✅ Successfully synced ${backendOperations.length} adjustments to backend`);
                 }
             }
             catch (error) {
-                console.error('[useAdjustmentHistoryBatch] Failed to sync adjustments to backend:', error);
+                console.error('[useAdjustmentHistoryBatch] ❌ Failed to sync adjustments to backend:', error);
             }
         }
-    }, [selectedIds, internalOptions]);
-    // Apply preset values directly to selected images - preserves history for each image individually
-    const adjustSelectedWithPreset = useCallback(async (presetAdjustments) => {
-        if (selectedIds.length === 0) {
+    }, [selectedIds, internalOptions, imageHistories]);
+    // Shared function for applying adjustments (used by both reset and preset)
+    const applyAdjustmentToSelected = useCallback(async (adjustment, operationType, targetImageIds) => {
+        const idsToProcess = targetImageIds || selectedIds;
+        if (idsToProcess.length === 0) {
             if (devWarningsRef.current) {
-                console.warn('[useAdjustmentHistoryBatch] adjustSelectedWithPreset called with no selection');
+                console.warn(`[useAdjustmentHistoryBatch] ❌ ${operationType} called with no images to process`);
             }
             return;
         }
-        // Store backend operations to perform after state update
+        console.log(`[useAdjustmentHistoryBatch] 🔄 ${operationType.toUpperCase()} called for images:`, idsToProcess);
+        // Prepare backend operations BEFORE state update (outside setImageHistories)
         const backendOperations = [];
+        // Process each image to prepare operations
+        const operationsToApply = [];
+        imageHistories.forEach(imageHistory => {
+            if (!idsToProcess.includes(imageHistory.imageId)) {
+                return; // Skip images not being processed
+            }
+            console.log(`[useAdjustmentHistoryBatch] 🔄 Processing ${operationType} for image ${imageHistory.imageId}`);
+            // Get current entry for replace_from logic
+            const currentEntry = imageHistory.history.find(entry => entry.id === imageHistory.currentHistoryEntryId);
+            const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
+            const isInMiddleOfHistory = currentEntryIndex < imageHistory.history.length - 1;
+            let replaceFromTaskId;
+            console.log(`[useAdjustmentHistoryBatch] 🎯 ${operationType.toUpperCase()} replace logic for image ${imageHistory.imageId}:`, {
+                currentEntryIndex,
+                historyLength: imageHistory.history.length,
+                isInMiddleOfHistory,
+                currentEntryId: currentEntry?.id
+            });
+            if (isInMiddleOfHistory && currentEntry?.id) {
+                // Only use replace_from when truly in middle of history (not at latest)
+                replaceFromTaskId = currentEntry.id;
+                console.log(`[useAdjustmentHistoryBatch] 🔄 ${operationType.toUpperCase()} will REPLACE current position. replaceFromTaskId=${replaceFromTaskId}`);
+            }
+            else {
+                console.log(`[useAdjustmentHistoryBatch] ➕ ${operationType.toUpperCase()} will ADD new entry (at end of history)`);
+            }
+            // Create new entry with adjustment
+            const newEntryId = generateEntryId();
+            const newEntry = {
+                id: newEntryId,
+                adjustment
+            };
+            // Build new history
+            let newHistory;
+            if (isInMiddleOfHistory) {
+                // If in middle of history, truncate from current position and add new entry
+                newHistory = [...imageHistory.history.slice(0, currentEntryIndex + 1), newEntry];
+            }
+            else {
+                // If at end of history, just add new entry
+                newHistory = [...imageHistory.history, newEntry];
+            }
+            // Trim if needed
+            const maxSize = maxSizeRef.current;
+            const trimmedHistory = typeof maxSize === 'number' && newHistory.length > maxSize
+                ? newHistory.slice(-maxSize)
+                : newHistory;
+            // Store operation for state update
+            operationsToApply.push({
+                imageId: imageHistory.imageId,
+                newEntryId,
+                newHistory: trimmedHistory
+            });
+            // Prepare backend operation (OUTSIDE state setter)
+            if (internalOptions.controller && internalOptions.firebaseUid) {
+                console.log(`[useAdjustmentHistoryBatch] ✅ Adding ${operationType.toUpperCase()} backend operation for image ${imageHistory.imageId} with taskId ${newEntryId}`, {
+                    replaceFromTaskId,
+                    willReplace: !!replaceFromTaskId
+                });
+                backendOperations.push({
+                    imageId: imageHistory.imageId,
+                    taskId: newEntryId,
+                    adjustment,
+                    replaceFromTaskId
+                });
+            }
+        });
+        // Now update state with prepared operations (no backend preparation inside)
         setImageHistories(prevHistories => {
             return prevHistories.map(imageHistory => {
-                if (!selectedIds.includes(imageHistory.imageId)) {
-                    return imageHistory; // No change for unselected images
-                }
-                // Get current adjustment from current entry
-                const currentEntry = imageHistory.history.find(entry => entry.id === imageHistory.currentHistoryEntryId);
-                const currentAdjustment = currentEntry?.adjustment || createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
-                // Apply preset values with clamping (same as adjustSelected logic)
-                const newAdjustment = { ...presetAdjustments };
-                Object.keys(newAdjustment).forEach(key => {
-                    const presetValue = newAdjustment[key];
-                    newAdjustment[key] = Math.max(-100, Math.min(100, presetValue));
-                });
-                // Check if user is in the middle of history (not at latest state)
-                const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
-                const isInMiddleOfHistory = currentEntryIndex < imageHistory.history.length - 1;
-                let replaceFromTaskId;
-                if (isInMiddleOfHistory) {
-                    // If user is in middle of history, get the task ID of current position
-                    replaceFromTaskId = currentEntry?.id;
-                }
-                // Generate new task ID for backend (same as entry ID)
-                const taskId = generateTaskId();
-                // Create new entry with task ID
-                const newEntryId = taskId; // Use the same ID for both entry and task
-                const newEntry = {
-                    id: newEntryId,
-                    adjustment: newAdjustment
-                };
-                // Prepare backend operation
-                if (internalOptions.controller && internalOptions.firebaseUid) {
-                    backendOperations.push({
-                        imageId: imageHistory.imageId,
-                        taskId,
-                        adjustment: newAdjustment,
-                        replaceFromTaskId
-                    });
-                }
-                // Build new history
-                let newHistory;
-                if (isInMiddleOfHistory) {
-                    // If in middle of history, truncate from current position and add new entry
-                    newHistory = [...imageHistory.history.slice(0, currentEntryIndex + 1), newEntry];
+                // Find operation for this image
+                const operation = operationsToApply.find(op => op.imageId === imageHistory.imageId);
+                if (!operation) {
+                    return imageHistory; // No change for images not being processed
                 }
-                else {
-                    // If at end of history, just add new entry
-                    newHistory = [...imageHistory.history, newEntry];
-                }
-                // Trim if needed
-                const maxSize = maxSizeRef.current;
-                const trimmedHistory = typeof maxSize === 'number' && newHistory.length > maxSize
-                    ? newHistory.slice(-maxSize)
-                    : newHistory;
+                console.log(`[useAdjustmentHistoryBatch] 📝 Applying state update for ${operationType} on image ${imageHistory.imageId}`);
                 return {
                     ...imageHistory,
-                    history: trimmedHistory,
-                    currentHistoryEntryId: newEntryId // Update current pointer
+                    history: operation.newHistory,
+                    currentHistoryEntryId: operation.newEntryId // Update current pointer
                 };
             });
         });
-        // Perform backend operations asynchronously
+        // Perform backend operations asynchronously (already prepared)
         if (backendOperations.length > 0 && internalOptions.controller && internalOptions.firebaseUid) {
             try {
+                console.log(`[useAdjustmentHistoryBatch] 📤 Syncing ${backendOperations.length} ${operationType} operations to backend (createEditorConfig for each image)`);
                 const promises = backendOperations.map(async (operation) => {
+                    console.log(`[useAdjustmentHistoryBatch] 🔄 Calling createEditorConfig for ${operationType} on image ${operation.imageId} with taskId ${operation.taskId}`, {
+                        replaceFrom: operation.replaceFromTaskId,
+                        hasReplaceFrom: !!operation.replaceFromTaskId
+                    });
                     await internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, {
                         gallery_id: operation.imageId,
                         task_id: operation.taskId,
@@ -355,14 +440,48 @@ export function useAdjustmentHistoryBatch(options = {}) {
                 });
                 await Promise.all(promises);
                 if (devWarningsRef.current) {
-                    console.log(`[useAdjustmentHistoryBatch] Synced ${backendOperations.length} preset adjustments to backend`);
+                    console.log(`[useAdjustmentHistoryBatch] ✅ Successfully synced ${backendOperations.length} ${operationType} operations to backend`);
                 }
             }
             catch (error) {
-                console.error('[useAdjustmentHistoryBatch] Failed to sync preset adjustments to backend:', error);
+                console.error(`[useAdjustmentHistoryBatch] ❌ Failed to sync ${operationType} to backend:`, error);
             }
         }
-    }, [selectedIds, internalOptions]);
+        console.log(`[useAdjustmentHistoryBatch] 📊 ${operationType.toUpperCase()} backend operations prepared: ${backendOperations.length}`);
+    }, [selectedIds, internalOptions, imageHistories]);
+    // Apply preset values directly to selected images - now uses shared logic
+    const adjustSelectedWithPreset = useCallback(async (presetAdjustments) => {
+        console.log('[useAdjustmentHistoryBatch] 🎨 adjustSelectedWithPreset called with:', {
+            selectedIds,
+            selectedCount: selectedIds.length,
+            presetAdjustments,
+            hasController: !!internalOptions.controller,
+            hasFirebaseUid: !!internalOptions.firebaseUid,
+            imageHistoriesCount: imageHistories.length,
+            imageHistoriesIds: imageHistories.map(h => h.imageId)
+        });
+        console.log('[useAdjustmentHistoryBatch] 🔍 PRESET: Current imageHistories state at start:', imageHistories.map(h => ({
+            imageId: h.imageId,
+            currentHistoryEntryId: h.currentHistoryEntryId,
+            historyLength: h.history.length,
+            historyIds: h.history.map(entry => entry.id)
+        })));
+        if (selectedIds.length === 0) {
+            if (devWarningsRef.current) {
+                console.warn('[useAdjustmentHistoryBatch] ❌ adjustSelectedWithPreset called with no selection');
+            }
+            return;
+        }
+        // Apply preset values with clamping
+        const clampedPreset = { ...presetAdjustments };
+        Object.keys(clampedPreset).forEach(key => {
+            const presetValue = clampedPreset[key];
+            clampedPreset[key] = Math.max(-100, Math.min(100, presetValue));
+        });
+        console.log('[useAdjustmentHistoryBatch] 🎨 Using SHARED logic for preset (same as reset)');
+        // Use the same logic as reset, just with preset values instead of default values
+        await applyAdjustmentToSelected(clampedPreset, 'preset');
+    }, [selectedIds, internalOptions, imageHistories, applyAdjustmentToSelected]);
     // Set specific adjustment states for specified images (removed since not needed)
     // Undo last changes to selected images - entry-based history version with backend sync
     const undo = useCallback(async () => {
@@ -372,53 +491,102 @@ export function useAdjustmentHistoryBatch(options = {}) {
             }
             return;
         }
+        console.log('[useAdjustmentHistoryBatch] 🔍 UNDO: Before undo, current imageHistories state:', imageHistories.map(h => ({
+            imageId: h.imageId,
+            currentHistoryEntryId: h.currentHistoryEntryId,
+            historyLength: h.history.length,
+            historyIds: h.history.map(entry => entry.id)
+        })));
+        // Prepare backend operations BEFORE state update (outside setImageHistories)
         let anyChanges = false;
         const backendOperations = [];
+        // Process each image to prepare operations
+        const operationsToApply = [];
+        imageHistories.forEach(imageHistory => {
+            if (!selectedIds.includes(imageHistory.imageId)) {
+                return; // Skip images not selected
+            }
+            console.log(`[useAdjustmentHistoryBatch] 🔍 UNDO: Processing image ${imageHistory.imageId} with history:`, {
+                currentHistoryEntryId: imageHistory.currentHistoryEntryId,
+                historyLength: imageHistory.history.length,
+                historyIds: imageHistory.history.map(entry => entry.id)
+            });
+            // Find current entry index
+            const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
+            if (currentEntryIndex <= 0) {
+                console.log(`[useAdjustmentHistoryBatch] 🔍 UNDO: Cannot undo image ${imageHistory.imageId} - at first entry or not found`);
+                return; // Cannot undo if at first entry or entry not found
+            }
+            // Move to previous entry
+            const previousEntry = imageHistory.history[currentEntryIndex - 1];
+            anyChanges = true;
+            console.log(`[useAdjustmentHistoryBatch] 🔍 UNDO: Moving image ${imageHistory.imageId} from index ${currentEntryIndex} to ${currentEntryIndex - 1}`, {
+                fromId: imageHistory.currentHistoryEntryId,
+                toId: previousEntry.id,
+                preservedHistoryLength: imageHistory.history.length
+            });
+            // Store operation for state update
+            operationsToApply.push({
+                imageId: imageHistory.imageId,
+                newCurrentHistoryEntryId: previousEntry.id
+            });
+            // Prepare backend sync operation (OUTSIDE state setter)
+            if (previousEntry.id && internalOptions.controller && internalOptions.firebaseUid) {
+                backendOperations.push({
+                    imageId: imageHistory.imageId,
+                    taskId: previousEntry.id
+                });
+            }
+        });
+        // Now update state with prepared operations (no backend preparation inside)
         setImageHistories(prevHistories => {
-            return prevHistories.map(imageHistory => {
-                if (!selectedIds.includes(imageHistory.imageId)) {
-                    return imageHistory; // No change for unselected images
-                }
-                // Find current entry index
-                const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
-                if (currentEntryIndex <= 0) {
-                    return imageHistory; // Cannot undo if at first entry or entry not found
-                }
-                // Move to previous entry
-                const previousEntry = imageHistory.history[currentEntryIndex - 1];
-                anyChanges = true;
-                // Prepare backend sync operation
-                if (previousEntry.id && internalOptions.controller && internalOptions.firebaseUid) {
-                    backendOperations.push({
-                        imageId: imageHistory.imageId,
-                        taskId: previousEntry.id
-                    });
+            const result = prevHistories.map(imageHistory => {
+                // Find operation for this image
+                const operation = operationsToApply.find(op => op.imageId === imageHistory.imageId);
+                if (!operation) {
+                    return imageHistory; // No change for images not selected
                 }
-                return {
+                console.log(`[useAdjustmentHistoryBatch] 📝 Applying state update for undo on image ${imageHistory.imageId}`);
+                const updatedHistory = {
                     ...imageHistory,
-                    currentHistoryEntryId: previousEntry.id
+                    currentHistoryEntryId: operation.newCurrentHistoryEntryId
                 };
+                console.log(`[useAdjustmentHistoryBatch] 🔍 UNDO: Updated image ${imageHistory.imageId} history:`, {
+                    currentHistoryEntryId: updatedHistory.currentHistoryEntryId,
+                    historyLength: updatedHistory.history.length,
+                    historyIds: updatedHistory.history.map(entry => entry.id)
+                });
+                return updatedHistory;
             });
+            console.log('[useAdjustmentHistoryBatch] 🔍 UNDO: After undo, final imageHistories state:', result.map(h => ({
+                imageId: h.imageId,
+                currentHistoryEntryId: h.currentHistoryEntryId,
+                historyLength: h.history.length,
+                historyIds: h.history.map(entry => entry.id)
+            })));
+            return result;
         });
-        // Sync with backend
+        // Sync with backend (already prepared)
         if (backendOperations.length > 0 && internalOptions.controller && internalOptions.firebaseUid) {
             try {
+                console.log(`[useAdjustmentHistoryBatch] ⏪ Syncing ${backendOperations.length} undo operations to backend (setHistoryIndex for each image)`);
                 const promises = backendOperations.map(async (operation) => {
+                    console.log(`[useAdjustmentHistoryBatch] 🔄 Calling setHistoryIndex for undo on image ${operation.imageId} to taskId ${operation.taskId}`);
                     await internalOptions.controller.setHistoryIndex(internalOptions.firebaseUid, operation.imageId, operation.taskId);
                 });
                 await Promise.all(promises);
                 if (devWarningsRef.current) {
-                    console.log(`[useAdjustmentHistoryBatch] Synced ${backendOperations.length} undo operations to backend`);
+                    console.log(`[useAdjustmentHistoryBatch] ✅ Successfully synced ${backendOperations.length} undo operations to backend`);
                 }
             }
             catch (error) {
-                console.error('[useAdjustmentHistoryBatch] Failed to sync undo to backend:', error);
+                console.error('[useAdjustmentHistoryBatch] ❌ Failed to sync undo to backend:', error);
             }
         }
         if (!anyChanges && devWarningsRef.current) {
             console.warn('[useAdjustmentHistoryBatch] Undo skipped - no changes to undo for selected images');
         }
-    }, [selectedIds, internalOptions]);
+    }, [selectedIds, internalOptions, imageHistories]);
     // Redo next changes to selected images - entry-based history version with backend sync
     const redo = useCallback(async () => {
         if (selectedIds.length === 0) {
@@ -427,53 +595,70 @@ export function useAdjustmentHistoryBatch(options = {}) {
             }
             return;
         }
+        // Step 1: Prepare redo operations from current state
         let anyChanges = false;
+        const operationsToApply = [];
         const backendOperations = [];
-        setImageHistories(prevHistories => {
-            return prevHistories.map(imageHistory => {
-                if (!selectedIds.includes(imageHistory.imageId)) {
-                    return imageHistory; // No change for unselected images
-                }
-                // Find current entry index
-                const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
-                if (currentEntryIndex >= imageHistory.history.length - 1 || currentEntryIndex === -1) {
-                    return imageHistory; // Cannot redo if at last entry or entry not found
-                }
-                // Move to next entry
-                const nextEntry = imageHistory.history[currentEntryIndex + 1];
-                anyChanges = true;
-                // Prepare backend sync operation
-                if (nextEntry.id && internalOptions.controller && internalOptions.firebaseUid) {
-                    backendOperations.push({
-                        imageId: imageHistory.imageId,
-                        taskId: nextEntry.id
-                    });
-                }
-                return {
-                    ...imageHistory,
-                    currentHistoryEntryId: nextEntry.id
-                };
+        imageHistories.forEach(imageHistory => {
+            if (!selectedIds.includes(imageHistory.imageId)) {
+                return; // Skip unselected images
+            }
+            // Find current entry index
+            const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
+            if (currentEntryIndex >= imageHistory.history.length - 1 || currentEntryIndex === -1) {
+                return; // Cannot redo if at last entry or entry not found
+            }
+            // Move to next entry
+            const nextEntry = imageHistory.history[currentEntryIndex + 1];
+            anyChanges = true;
+            operationsToApply.push({
+                imageId: imageHistory.imageId,
+                nextEntryId: nextEntry.id
             });
+            // Prepare backend sync operation
+            if (nextEntry.id && internalOptions.controller && internalOptions.firebaseUid) {
+                backendOperations.push({
+                    imageId: imageHistory.imageId,
+                    taskId: nextEntry.id
+                });
+            }
         });
-        // Sync with backend
+        // Step 2: Apply state updates cleanly
+        if (operationsToApply.length > 0) {
+            setImageHistories(prevHistories => {
+                return prevHistories.map(imageHistory => {
+                    const operation = operationsToApply.find(op => op.imageId === imageHistory.imageId);
+                    if (!operation) {
+                        return imageHistory; // No change for this image
+                    }
+                    return {
+                        ...imageHistory,
+                        currentHistoryEntryId: operation.nextEntryId
+                    };
+                });
+            });
+        }
+        // Step 3: Sync with backend
         if (backendOperations.length > 0 && internalOptions.controller && internalOptions.firebaseUid) {
             try {
+                console.log(`[useAdjustmentHistoryBatch] ⏩ Syncing ${backendOperations.length} redo operations to backend (setHistoryIndex for each image)`);
                 const promises = backendOperations.map(async (operation) => {
+                    console.log(`[useAdjustmentHistoryBatch] 🔄 Calling setHistoryIndex for redo on image ${operation.imageId} to taskId ${operation.taskId}`);
                     await internalOptions.controller.setHistoryIndex(internalOptions.firebaseUid, operation.imageId, operation.taskId);
                 });
                 await Promise.all(promises);
                 if (devWarningsRef.current) {
-                    console.log(`[useAdjustmentHistoryBatch] Synced ${backendOperations.length} redo operations to backend`);
+                    console.log(`[useAdjustmentHistoryBatch] ✅ Successfully synced ${backendOperations.length} redo operations to backend`);
                 }
             }
             catch (error) {
-                console.error('[useAdjustmentHistoryBatch] Failed to sync redo to backend:', error);
+                console.error('[useAdjustmentHistoryBatch] ❌ Failed to sync redo to backend:', error);
             }
         }
         if (!anyChanges && devWarningsRef.current) {
             console.warn('[useAdjustmentHistoryBatch] Redo skipped - no changes to redo for selected images');
         }
-    }, [selectedIds, internalOptions]);
+    }, [selectedIds, internalOptions, imageHistories]);
     // Check if any selected image can be undone
     const canUndoSelected = useCallback(() => {
         return selectedIds.some(imageId => {
@@ -494,38 +679,16 @@ export function useAdjustmentHistoryBatch(options = {}) {
             return currentEntryIndex >= 0 && currentEntryIndex < imageHistory.history.length - 1;
         });
     }, [selectedIds, imageHistories]);
-    // Reset selected images to default state - entry-based history version
-    const reset = useCallback((imageIds) => {
+    // Reset selected images to default state - now uses shared logic
+    const reset = useCallback(async (imageIds) => {
         const idsToReset = imageIds || selectedIds;
-        if (idsToReset.length === 0)
-            return;
+        console.log('[useAdjustmentHistoryBatch] 🔄 reset called for images:', idsToReset);
+        // Create default state
         const defaultState = createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
-        setImageHistories(prevHistories => {
-            return prevHistories.map(imageHistory => {
-                if (!idsToReset.includes(imageHistory.imageId)) {
-                    return imageHistory; // No change for images not being reset
-                }
-                // Create new entry with default state
-                const newEntryId = generateEntryId();
-                const newEntry = {
-                    id: newEntryId,
-                    adjustment: defaultState
-                };
-                // Add to this image's history
-                const newHistory = [...imageHistory.history, newEntry];
-                // Trim if needed
-                const maxSize = maxSizeRef.current;
-                const trimmedHistory = typeof maxSize === 'number' && newHistory.length > maxSize
-                    ? newHistory.slice(-maxSize)
-                    : newHistory;
-                return {
-                    ...imageHistory,
-                    history: trimmedHistory,
-                    currentHistoryEntryId: newEntryId
-                };
-            });
-        });
-    }, [selectedIds, internalOptions.defaultAdjustmentState]);
+        console.log('[useAdjustmentHistoryBatch] 🔄 Using SHARED logic for reset (same as preset)');
+        // Use the same logic as preset, just with default values instead of preset values
+        await applyAdjustmentToSelected(defaultState, 'reset', idsToReset);
+    }, [selectedIds, internalOptions.defaultAdjustmentState, applyAdjustmentToSelected]);
     // Selection management with initial adjustments - single state update
     const setSelection = useCallback((configs) => {
         const imageIds = configs.map(config => config.imageId);
@@ -859,6 +1022,114 @@ export function useAdjustmentHistoryBatch(options = {}) {
             });
         }
     }, []);
+    // Sync gallery updates - check for updated galleries and refresh their history
+    const syncGalleryUpdates = useCallback(async () => {
+        if (!internalOptions.controller || !internalOptions.firebaseUid || !internalOptions.eventId) {
+            if (devWarningsRef.current) {
+                console.warn('[useAdjustmentHistoryBatch] syncGalleryUpdates: Missing required options (controller, firebaseUid, or eventId)');
+            }
+            return;
+        }
+        try {
+            // Step 1: Check for gallery updates since last timestamp
+            console.log(`[useAdjustmentHistoryBatch] 🔄 Checking for gallery updates since timestamp: ${lastUpdateTimestamp}`);
+            const updateResponse = await internalOptions.controller.getGalleryUpdateTimestamp(internalOptions.firebaseUid, internalOptions.eventId, lastUpdateTimestamp);
+            if (!updateResponse.gallery || updateResponse.gallery.length === 0) {
+                if (devWarningsRef.current) {
+                    console.log('[useAdjustmentHistoryBatch] ✅ No gallery updates found');
+                }
+                return;
+            }
+            console.log(`[useAdjustmentHistoryBatch] 📥 Found ${updateResponse.gallery.length} updated galleries:`, updateResponse.gallery);
+            // Step 2: Fetch history for each updated gallery
+            const historyPromises = updateResponse.gallery.map(async (galleryId) => {
+                try {
+                    console.log(`[useAdjustmentHistoryBatch] 🔄 Fetching history for gallery: ${galleryId}`);
+                    const historyResponse = await internalOptions.controller.getEditorHistory(internalOptions.firebaseUid, galleryId);
+                    return {
+                        imageId: galleryId,
+                        currentTaskId: historyResponse.current_task_id,
+                        backendHistory: historyResponse.history || [],
+                        success: true
+                    };
+                }
+                catch (error) {
+                    console.error(`[useAdjustmentHistoryBatch] ❌ Failed to fetch history for gallery ${galleryId}:`, error);
+                    return {
+                        imageId: galleryId,
+                        currentTaskId: '',
+                        backendHistory: [],
+                        success: false
+                    };
+                }
+            });
+            const historyResults = await Promise.all(historyPromises);
+            const successfulUpdates = historyResults.filter(result => result.success && result.backendHistory.length > 0);
+            if (successfulUpdates.length === 0) {
+                if (devWarningsRef.current) {
+                    console.log('[useAdjustmentHistoryBatch] ℹ️ No valid history updates to apply');
+                }
+                // Update timestamp even if no valid updates
+                setLastUpdateTimestamp(Date.now());
+                return;
+            }
+            // Step 3: Prepare history updates from backend data
+            const historyUpdates = [];
+            successfulUpdates.forEach(result => {
+                const { imageId, currentTaskId, backendHistory } = result;
+                if (backendHistory.length > 0) {
+                    // Convert backend history to local history entries
+                    const historyEntries = backendHistory.map((entry) => ({
+                        id: entry.task_id, // Use backend task_id as our entry id
+                        adjustment: mapColorAdjustmentToAdjustmentState ?
+                            mapColorAdjustmentToAdjustmentState(entry.editor_config.color_adjustment) :
+                            createDefaultAdjustmentState(internalOptions.defaultAdjustmentState)
+                    }));
+                    historyUpdates.push({
+                        imageId,
+                        newHistory: historyEntries,
+                        newCurrentEntryId: currentTaskId // Use current_task_id as current history entry
+                    });
+                    console.log(`[useAdjustmentHistoryBatch] 📝 Prepared history update for gallery ${imageId}:`, {
+                        historyEntries: historyEntries.length,
+                        currentEntryId: currentTaskId
+                    });
+                }
+            });
+            // Step 4: Apply history updates cleanly to state
+            if (historyUpdates.length > 0) {
+                setImageHistories(prevHistories => {
+                    return prevHistories.map(imageHistory => {
+                        const update = historyUpdates.find(u => u.imageId === imageHistory.imageId);
+                        if (!update) {
+                            return imageHistory; // No update for this image
+                        }
+                        // Replace entire history with updated backend data
+                        return {
+                            ...imageHistory,
+                            history: update.newHistory,
+                            currentHistoryEntryId: update.newCurrentEntryId
+                        };
+                    });
+                });
+                console.log(`[useAdjustmentHistoryBatch] ✅ Successfully updated history for ${historyUpdates.length} galleries`);
+            }
+            // Step 5: Update timestamp to mark successful sync
+            setLastUpdateTimestamp(Date.now());
+            if (devWarningsRef.current) {
+                console.log('[useAdjustmentHistoryBatch] 🔄 Gallery sync completed', {
+                    totalChecked: updateResponse.gallery.length,
+                    successfulUpdates: successfulUpdates.length,
+                    appliedUpdates: historyUpdates.length,
+                    newTimestamp: Date.now()
+                });
+            }
+        }
+        catch (error) {
+            console.error('[useAdjustmentHistoryBatch] ❌ Failed to sync gallery updates:', error);
+            // Don't update timestamp on error, so we can retry
+        }
+    }, [internalOptions, lastUpdateTimestamp, mapColorAdjustmentToAdjustmentState]);
     // Configuration actions
     const setMaxSize = useCallback((size) => {
         maxSizeRef.current = size;
@@ -885,6 +1156,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
         reset,
         setSelection,
         syncAdjustment,
+        syncGalleryUpdates,
         toggleSelection,
         selectAll,
         clearSelection,
@@ -894,7 +1166,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
         syncBatch
     }), [
         adjustSelected, adjustSelectedWithPreset, undo, redo, reset,
-        setSelection, syncAdjustment, toggleSelection, selectAll, clearSelection,
+        setSelection, syncAdjustment, syncGalleryUpdates, toggleSelection, selectAll, clearSelection,
         jumpToIndex, clearHistory, getCurrentBatch, syncBatch
     ]);
     // Config object - stabilized with useMemo