@yogiswara/honcho-editor-ui 3.3.3 → 3.4.0

package/dist/hooks/useAdjustmentHistoryBatch.js

@@ -1,5 +1,6 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
 import { mapAdjustmentStateToColorAdjustment, mapColorAdjustmentToAdjustmentState } from "../utils/adjustment";
+import { log } from '../utils/logger';
 /**
  * Create default adjustment state
  */
@@ -26,7 +27,7 @@ const compareBatchStates = (a, b) => {
         return JSON.stringify(a) === JSON.stringify(b);
     }
     catch (error) {
-        console.warn('Failed to compare batch states with JSON.stringify:', error);
+        log.warn({ error }, 'Failed to compare batch states with JSON.stringify');
         return false;
     }
 };
@@ -72,7 +73,7 @@ const generateTaskId = () => {
  *
  * **Typical Usage Flow:**
  * ```typescript
- * const { actions, currentBatch, selectedIds } = useAdjustmentHistoryBatch();
+ * const { state, actions } = useAdjustmentHistoryBatch(controller, firebaseUid, eventId);
  *
  * // Select images (new images get default state automatically)
  * actions.setSelection(['img1', 'img2', 'img3']);
@@ -95,69 +96,78 @@ const generateTaskId = () => {
  * - `currentBatch.allImages`: All images that have been selected/adjusted (persistent)
  * - `selectedIds`: Array of currently selected image IDs
  *
+ * @param controller - Controller for backend operations
+ * @param firebaseUid - Firebase UID for backend operations
+ * @param eventId - Event ID for backend operations
  * @param options - Configuration options for history behavior
- * @returns Object with current batch, selection, history info, actions, and config
+ * @returns Object with state and actions
  */
-export function useAdjustmentHistoryBatch(options = {}) {
+export function useAdjustmentHistoryBatch(controller, firebaseUid, eventId, options = {}) {
     // Internal stabilization
     const internalOptions = useMemo(() => ({
         maxSize: options.maxSize ?? 'unlimited',
         devWarnings: options.devWarnings ?? false,
         defaultAdjustmentState: options.defaultAdjustmentState ?? {},
-        controller: options.controller,
-        firebaseUid: options.firebaseUid,
-        eventId: options.eventId
+        controller,
+        firebaseUid,
+        eventId
     }), [
         options.maxSize,
         options.devWarnings,
         options.defaultAdjustmentState,
-        options.controller,
-        options.firebaseUid,
-        options.eventId
+        controller,
+        firebaseUid,
+        eventId
     ]);
     // Core state management - using per-image history instead of batch history
     const [allImageIds, setAllImageIds] = useState([]);
     const [selectedIds, setSelectedIds] = useState([]);
     const [imageHistories, setImageHistories] = useState([]);
     const [currentBatch, setCurrentBatch] = useState(createEmptyBatchState());
-    const [lastUpdateTimestamp, setLastUpdateTimestamp] = useState(Date.now());
+    const lastUpdateTimestampRef = useRef(Date.now());
+    // Track synced image IDs to avoid re-syncing history
+    const syncedImageHistoryIds = useRef(new Set());
     // 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)
-        })));
+        log.debug({
+            imageHistories: imageHistories.map(h => ({
+                imageId: h.imageId,
+                currentHistoryEntryId: h.currentHistoryEntryId,
+                historyLength: h.history.length,
+                historyIds: h.history.map(entry => entry.id)
+            }))
+        }, '[useAdjustmentHistoryBatch] 🔧 rebuildCurrentBatch called with imageHistories');
         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}:`, {
+            log.debug({
+                imageId: imageHistory.imageId,
                 currentHistoryEntryId: imageHistory.currentHistoryEntryId,
                 foundCurrentEntry: !!currentEntry,
                 historyLength: imageHistory.history.length,
                 historyIds: imageHistory.history.map(entry => entry.id)
-            });
+            }, `[useAdjustmentHistoryBatch] 🔍 rebuildCurrentBatch for image ${imageHistory.imageId}`);
             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}`);
+                log.debug({ imageId: imageHistory.imageId }, `[useAdjustmentHistoryBatch] ✅ Successfully rebuilt batch for image`);
             }
             else {
-                console.error(`[useAdjustmentHistoryBatch] ❌ CRITICAL: Current entry not found for image ${imageHistory.imageId}!`, {
+                log.error({
+                    imageId: imageHistory.imageId,
                     searchingFor: imageHistory.currentHistoryEntryId,
                     availableIds: imageHistory.history.map(entry => entry.id),
                     historyLength: imageHistory.history.length
-                });
+                }, `[useAdjustmentHistoryBatch] ❌ CRITICAL: Current entry not found for image`);
             }
         });
-        console.log('[useAdjustmentHistoryBatch] 🔧 rebuildCurrentBatch result:', {
+        log.debug({
             allImagesCount: Object.keys(newBatch.allImages).length,
             currentSelectionCount: Object.keys(newBatch.currentSelection).length,
             allImagesIds: Object.keys(newBatch.allImages),
@@ -176,7 +186,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
             return historiesString.length * 2; // Rough estimate: 2 bytes per character
         }
         catch (error) {
-            console.warn('Failed to estimate memory usage:', error);
+            log.warn({ error }, 'Failed to estimate memory usage');
             return imageHistories.length * 100 * 1000; // Fallback estimate
         }
     }, [imageHistories]);
@@ -207,7 +217,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
     const adjustSelected = useCallback(async (delta) => {
         if (selectedIds.length === 0) {
             if (devWarningsRef.current) {
-                console.warn('[useAdjustmentHistoryBatch] adjustSelected called with no selection');
+                log.warn('[useAdjustmentHistoryBatch] adjustSelected called with no selection');
             }
             return;
         }
@@ -226,7 +236,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
             const newAdjustment = { ...currentAdjustment };
             Object.keys(delta).forEach(key => {
                 const deltaValue = delta[key];
-                if (typeof deltaValue === 'number') {
+                if (typeof deltaValue === 'number' && key !== 'preset_id') {
                     const currentValue = newAdjustment[key];
                     newAdjustment[key] = Math.max(-100, Math.min(100, currentValue + deltaValue));
                 }
@@ -235,7 +245,8 @@ export function useAdjustmentHistoryBatch(options = {}) {
             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}:`, {
+            log.debug({
+                imageId: imageHistory.imageId,
                 currentEntryIndex,
                 historyLength: imageHistory.history.length,
                 isInMiddleOfHistory,
@@ -244,10 +255,10 @@ export function useAdjustmentHistoryBatch(options = {}) {
             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}`);
+                log.debug({ replaceFromTaskId }, `[useAdjustmentHistoryBatch] 🔄 DELTA will REPLACE current position`);
             }
             else {
-                console.log(`[useAdjustmentHistoryBatch] ➕ DELTA will ADD new entry (at end of history)`);
+                log.debug(`[useAdjustmentHistoryBatch] ➕ DELTA will ADD new entry (at end of history)`);
             }
             // Generate new task ID for backend (same as entry ID)
             const taskId = generateTaskId();
@@ -296,7 +307,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
                 if (!operation) {
                     return imageHistory; // No change for images not being adjusted
                 }
-                console.log(`[useAdjustmentHistoryBatch] 📝 Applying state update for delta on image ${imageHistory.imageId}`);
+                log.debug({ imageId: imageHistory.imageId }, `[useAdjustmentHistoryBatch] 📝 Applying state update for delta on image`);
                 return {
                     ...imageHistory,
                     history: operation.newHistory,
@@ -307,36 +318,43 @@ export function useAdjustmentHistoryBatch(options = {}) {
         // 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)`);
+                log.info({ operationCount: backendOperations.length }, `[useAdjustmentHistoryBatch] 📤 Syncing 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}`);
+                    log.debug({
+                        imageId: operation.imageId,
+                        taskId: operation.taskId,
+                        hasPresetId: !!operation.adjustment.preset_id,
+                        presetId: operation.adjustment.preset_id,
+                        hasReplaceFrom: !!operation.replaceFromTaskId
+                    }, `[useAdjustmentHistoryBatch] 🔄 Calling createEditorConfig for image`);
                     await internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, {
                         gallery_id: operation.imageId,
                         task_id: operation.taskId,
                         color_adjustment: mapAdjustmentStateToColorAdjustment(operation.adjustment),
-                        replace_from: operation.replaceFromTaskId
+                        replace_from: operation.replaceFromTaskId,
+                        preset_id: operation.adjustment.preset_id
                     });
                 });
                 await Promise.all(promises);
                 if (devWarningsRef.current) {
-                    console.log(`[useAdjustmentHistoryBatch] ✅ Successfully synced ${backendOperations.length} adjustments to backend`);
+                    log.info({ operationCount: backendOperations.length }, `[useAdjustmentHistoryBatch] ✅ Successfully synced adjustments to backend`);
                 }
             }
             catch (error) {
-                console.error('[useAdjustmentHistoryBatch] ❌ Failed to sync adjustments to backend:', error);
+                log.error({ error }, '[useAdjustmentHistoryBatch] ❌ Failed to sync adjustments to backend');
             }
         }
     }, [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;
+        const idsToProcess = Array.isArray(targetImageIds) ? targetImageIds : selectedIds;
         if (idsToProcess.length === 0) {
             if (devWarningsRef.current) {
-                console.warn(`[useAdjustmentHistoryBatch] ❌ ${operationType} called with no images to process`);
+                log.warn({ operationType }, `[useAdjustmentHistoryBatch] ❌ Operation called with no images to process`);
             }
             return;
         }
-        console.log(`[useAdjustmentHistoryBatch] 🔄 ${operationType.toUpperCase()} called for images:`, idsToProcess);
+        log.info({ operationType: operationType.toUpperCase(), idsToProcess }, `[useAdjustmentHistoryBatch] 🔄 Operation called for images`);
         // Prepare backend operations BEFORE state update (outside setImageHistories)
         const backendOperations = [];
         // Process each image to prepare operations
@@ -345,13 +363,15 @@ export function useAdjustmentHistoryBatch(options = {}) {
             if (!idsToProcess.includes(imageHistory.imageId)) {
                 return; // Skip images not being processed
             }
-            console.log(`[useAdjustmentHistoryBatch] 🔄 Processing ${operationType} for image ${imageHistory.imageId}`);
+            log.debug({ operationType, imageId: imageHistory.imageId }, `[useAdjustmentHistoryBatch] 🔄 Processing operation for image`);
             // 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}:`, {
+            log.debug({
+                operationType: operationType.toUpperCase(),
+                imageId: imageHistory.imageId,
                 currentEntryIndex,
                 historyLength: imageHistory.history.length,
                 isInMiddleOfHistory,
@@ -360,10 +380,10 @@ export function useAdjustmentHistoryBatch(options = {}) {
             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}`);
+                log.debug({ operationType: operationType.toUpperCase(), replaceFromTaskId }, `[useAdjustmentHistoryBatch] 🔄 Operation will REPLACE current position`);
             }
             else {
-                console.log(`[useAdjustmentHistoryBatch] ➕ ${operationType.toUpperCase()} will ADD new entry (at end of history)`);
+                log.debug({ operationType: operationType.toUpperCase() }, `[useAdjustmentHistoryBatch] ➕ Operation will ADD new entry (at end of history)`);
             }
             // Create new entry with adjustment
             const newEntryId = generateEntryId();
@@ -394,10 +414,13 @@ export function useAdjustmentHistoryBatch(options = {}) {
             });
             // 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}`, {
+                log.debug({
+                    operationType: operationType.toUpperCase(),
+                    imageId: imageHistory.imageId,
+                    taskId: newEntryId,
                     replaceFromTaskId,
                     willReplace: !!replaceFromTaskId
-                });
+                }, `[useAdjustmentHistoryBatch] ✅ Adding backend operation for image`);
                 backendOperations.push({
                     imageId: imageHistory.imageId,
                     taskId: newEntryId,
@@ -414,7 +437,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
                 if (!operation) {
                     return imageHistory; // No change for images not being processed
                 }
-                console.log(`[useAdjustmentHistoryBatch] 📝 Applying state update for ${operationType} on image ${imageHistory.imageId}`);
+                log.debug({ operationType, imageId: imageHistory.imageId }, `[useAdjustmentHistoryBatch] 📝 Applying state update for operation on image`);
                 return {
                     ...imageHistory,
                     history: operation.newHistory,
@@ -425,50 +448,58 @@ export function useAdjustmentHistoryBatch(options = {}) {
         // 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)`);
+                log.info({ operationType, operationCount: backendOperations.length }, `[useAdjustmentHistoryBatch] 📤 Syncing 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}`, {
+                    log.debug({
+                        operationType,
+                        imageId: operation.imageId,
+                        taskId: operation.taskId,
                         replaceFrom: operation.replaceFromTaskId,
-                        hasReplaceFrom: !!operation.replaceFromTaskId
-                    });
+                        hasReplaceFrom: !!operation.replaceFromTaskId,
+                        hasPresetId: !!operation.adjustment.preset_id,
+                        presetId: operation.adjustment.preset_id
+                    }, `[useAdjustmentHistoryBatch] 🔄 Calling createEditorConfig for operation on image`);
                     await internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, {
                         gallery_id: operation.imageId,
                         task_id: operation.taskId,
                         color_adjustment: mapAdjustmentStateToColorAdjustment(operation.adjustment),
-                        replace_from: operation.replaceFromTaskId
+                        replace_from: operation.replaceFromTaskId,
+                        preset_id: operation.adjustment.preset_id
                     });
                 });
                 await Promise.all(promises);
                 if (devWarningsRef.current) {
-                    console.log(`[useAdjustmentHistoryBatch] ✅ Successfully synced ${backendOperations.length} ${operationType} operations to backend`);
+                    log.info({ operationType, operationCount: backendOperations.length }, `[useAdjustmentHistoryBatch] ✅ Successfully synced operations to backend`);
                 }
             }
             catch (error) {
-                console.error(`[useAdjustmentHistoryBatch] ❌ Failed to sync ${operationType} to backend:`, error);
+                log.error({ error, operationType }, '[useAdjustmentHistoryBatch] ❌ Failed to sync operations to backend');
             }
         }
-        console.log(`[useAdjustmentHistoryBatch] 📊 ${operationType.toUpperCase()} backend operations prepared: ${backendOperations.length}`);
+        log.debug({ operationType: operationType.toUpperCase(), operationCount: backendOperations.length }, `[useAdjustmentHistoryBatch] 📊 Backend operations prepared`);
     }, [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:', {
+    const adjustSelectedWithPreset = useCallback(async (presetAdjustments, presetId) => {
+        log.info({
             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)
-        })));
+            imageHistoriesIds: imageHistories.map(h => h.imageId),
+            presetId: presetId
+        }, '[useAdjustmentHistoryBatch] 🎨 adjustSelectedWithPreset called with');
+        log.debug({
+            imageHistories: imageHistories.map(h => ({
+                imageId: h.imageId,
+                currentHistoryEntryId: h.currentHistoryEntryId,
+                historyLength: h.history.length
+            }))
+        }, '[useAdjustmentHistoryBatch] 🔍 PRESET: Current imageHistories state at start');
         if (selectedIds.length === 0) {
             if (devWarningsRef.current) {
-                console.warn('[useAdjustmentHistoryBatch] ❌ adjustSelectedWithPreset called with no selection');
+                log.warn('[useAdjustmentHistoryBatch] ❌ adjustSelectedWithPreset called with no selection');
             }
             return;
         }
@@ -476,27 +507,208 @@ export function useAdjustmentHistoryBatch(options = {}) {
         const clampedPreset = { ...presetAdjustments };
         Object.keys(clampedPreset).forEach(key => {
             const presetValue = clampedPreset[key];
-            clampedPreset[key] = Math.max(-100, Math.min(100, presetValue));
+            if (typeof presetValue === 'number' && key !== 'preset_id') {
+                clampedPreset[key] = Math.max(-100, Math.min(100, presetValue));
+            }
         });
-        console.log('[useAdjustmentHistoryBatch] 🎨 Using SHARED logic for preset (same as reset)');
+        // Include the preset_id in the adjustment state
+        clampedPreset.preset_id = presetId;
+        log.debug({
+            hasPresetId: !!presetId,
+            presetId: presetId,
+            clampedPreset
+        }, '[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]);
+    // Apply partial adjustment values directly to selected images (paste-like behavior)
+    const adjustSelectedWithPaste = useCallback(async (adjustments) => {
+        log.info({
+            selectedIds,
+            selectedCount: selectedIds.length,
+            adjustments,
+            hasController: !!internalOptions.controller,
+            hasFirebaseUid: !!internalOptions.firebaseUid,
+            imageHistoriesCount: imageHistories.length,
+            imageHistoriesIds: imageHistories.map(h => h.imageId),
+        }, '[useAdjustmentHistoryBatch] 📋 adjustSelectedWithPaste called with');
+        if (selectedIds.length === 0) {
+            if (devWarningsRef.current) {
+                log.warn('[useAdjustmentHistoryBatch] ❌ adjustSelectedWithPaste called with no selection');
+            }
+            return;
+        }
+        // Prepare backend operations BEFORE state update (outside setImageHistories)
+        const backendOperations = [];
+        // Process each image to prepare operations
+        const operationsToApply = [];
+        imageHistories.forEach(imageHistory => {
+            if (!selectedIds.includes(imageHistory.imageId)) {
+                return; // Skip images not selected
+            }
+            // Get current adjustment from current entry
+            const currentEntry = imageHistory.history.find(entry => entry.id === imageHistory.currentHistoryEntryId);
+            const currentAdjustment = currentEntry?.adjustment || createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
+            // Merge current values with partial adjustments (only update specified properties)
+            const newAdjustment = { ...currentAdjustment };
+            Object.keys(adjustments).forEach(key => {
+                const pasteValue = adjustments[key];
+                if (typeof pasteValue === 'number' && key !== 'preset_id') {
+                    // Apply clamping to the pasted value
+                    newAdjustment[key] = Math.max(-100, Math.min(100, pasteValue));
+                }
+                else if (key === 'preset_id' && typeof pasteValue === 'string') {
+                    newAdjustment[key] = pasteValue;
+                }
+            });
+            log.debug({
+                imageId: imageHistory.imageId,
+                currentAdjustment,
+                adjustments,
+                newAdjustment
+            }, '[useAdjustmentHistoryBatch] 📋 PASTE: Merging partial adjustments');
+            // 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 && currentEntry?.id) {
+                replaceFromTaskId = currentEntry.id;
+                log.debug({ replaceFromTaskId }, `[useAdjustmentHistoryBatch] 📋 PASTE will REPLACE current position`);
+            }
+            else {
+                log.debug(`[useAdjustmentHistoryBatch] ➕ PASTE will ADD new entry (at end of history)`);
+            }
+            // Generate new task ID for backend (same as entry ID)
+            const taskId = generateTaskId();
+            const newEntryId = taskId;
+            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
+            if (internalOptions.controller && internalOptions.firebaseUid) {
+                log.debug({
+                    imageId: imageHistory.imageId,
+                    taskId: newEntryId,
+                    replaceFromTaskId,
+                    willReplace: !!replaceFromTaskId
+                }, `[useAdjustmentHistoryBatch] ✅ Adding backend operation for PASTE`);
+                backendOperations.push({
+                    imageId: imageHistory.imageId,
+                    taskId: newEntryId,
+                    adjustment: newAdjustment,
+                    replaceFromTaskId
+                });
+            }
+        });
+        if (operationsToApply.length === 0) {
+            log.warn('[useAdjustmentHistoryBatch] 📋 No valid images found for paste operation');
+            return;
+        }
+        // Apply state changes
+        setImageHistories(prev => {
+            const updated = prev.map(imageHistory => {
+                const operation = operationsToApply.find(op => op.imageId === imageHistory.imageId);
+                if (!operation) {
+                    return imageHistory;
+                }
+                return {
+                    ...imageHistory,
+                    currentHistoryEntryId: operation.newEntryId,
+                    history: operation.newHistory
+                };
+            });
+            log.debug({
+                updatedImages: updated.filter(h => selectedIds.includes(h.imageId)).map(h => ({
+                    imageId: h.imageId,
+                    currentHistoryEntryId: h.currentHistoryEntryId,
+                    historyLength: h.history.length
+                }))
+            }, '[useAdjustmentHistoryBatch] 📋 PASTE: Updated imageHistories state');
+            return updated;
+        });
+        // Execute backend operations
+        if (backendOperations.length > 0) {
+            log.info({
+                operationCount: backendOperations.length,
+                operations: backendOperations.map(op => ({
+                    imageId: op.imageId,
+                    taskId: op.taskId,
+                    hasReplaceFrom: !!op.replaceFromTaskId
+                }))
+            }, '[useAdjustmentHistoryBatch] 📋 PASTE: Starting backend operations');
+            // Execute all backend operations concurrently
+            const promises = backendOperations.map(async (operation) => {
+                try {
+                    log.debug({
+                        imageId: operation.imageId,
+                        taskId: operation.taskId,
+                        hasPresetId: !!operation.adjustment.preset_id,
+                        presetId: operation.adjustment.preset_id,
+                        hasReplaceFrom: !!operation.replaceFromTaskId
+                    }, `[useAdjustmentHistoryBatch] 📋 PASTE: Calling createEditorConfig for image`);
+                    await internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, {
+                        gallery_id: operation.imageId,
+                        task_id: operation.taskId,
+                        color_adjustment: mapAdjustmentStateToColorAdjustment(operation.adjustment),
+                        replace_from: operation.replaceFromTaskId,
+                        preset_id: operation.adjustment.preset_id
+                    });
+                    log.debug({
+                        imageId: operation.imageId,
+                        taskId: operation.taskId
+                    }, '[useAdjustmentHistoryBatch] 📋 PASTE: Backend operation completed');
+                }
+                catch (error) {
+                    log.error({
+                        imageId: operation.imageId,
+                        taskId: operation.taskId,
+                        error
+                    }, '[useAdjustmentHistoryBatch] 📋 PASTE: Backend operation failed');
+                }
+            });
+            await Promise.all(promises);
+            log.info('[useAdjustmentHistoryBatch] 📋 PASTE: All backend operations completed');
+        }
+    }, [selectedIds, internalOptions, imageHistories]);
     // 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 () => {
         if (selectedIds.length === 0) {
             if (devWarningsRef.current) {
-                console.warn('[useAdjustmentHistoryBatch] Cannot undo - no images selected');
+                log.warn('[useAdjustmentHistoryBatch] Cannot undo - no images selected');
             }
             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)
-        })));
+        log.debug({
+            imageHistories: imageHistories.map(h => ({
+                imageId: h.imageId,
+                currentHistoryEntryId: h.currentHistoryEntryId,
+                historyLength: h.history.length,
+                historyIds: h.history.map(entry => entry.id)
+            }))
+        }, '[useAdjustmentHistoryBatch] 🔍 UNDO: Before undo, current imageHistories state');
         // Prepare backend operations BEFORE state update (outside setImageHistories)
         let anyChanges = false;
         const backendOperations = [];
@@ -506,25 +718,29 @@ export function useAdjustmentHistoryBatch(options = {}) {
             if (!selectedIds.includes(imageHistory.imageId)) {
                 return; // Skip images not selected
             }
-            console.log(`[useAdjustmentHistoryBatch] 🔍 UNDO: Processing image ${imageHistory.imageId} with history:`, {
+            log.debug({
+                imageId: imageHistory.imageId,
                 currentHistoryEntryId: imageHistory.currentHistoryEntryId,
                 historyLength: imageHistory.history.length,
                 historyIds: imageHistory.history.map(entry => entry.id)
-            });
+            }, `[useAdjustmentHistoryBatch] 🔍 UNDO: Processing image with history`);
             // 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`);
+                log.debug({ imageId: imageHistory.imageId }, `[useAdjustmentHistoryBatch] 🔍 UNDO: Cannot undo image - 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}`, {
+            log.debug({
+                imageId: imageHistory.imageId,
+                fromIndex: currentEntryIndex,
+                toIndex: currentEntryIndex - 1,
                 fromId: imageHistory.currentHistoryEntryId,
                 toId: previousEntry.id,
                 preservedHistoryLength: imageHistory.history.length
-            });
+            }, `[useAdjustmentHistoryBatch] 🔍 UNDO: Moving image from index to index`);
             // Store operation for state update
             operationsToApply.push({
                 imageId: imageHistory.imageId,
@@ -546,52 +762,55 @@ export function useAdjustmentHistoryBatch(options = {}) {
                 if (!operation) {
                     return imageHistory; // No change for images not selected
                 }
-                console.log(`[useAdjustmentHistoryBatch] 📝 Applying state update for undo on image ${imageHistory.imageId}`);
+                log.debug({ imageId: imageHistory.imageId }, `[useAdjustmentHistoryBatch] 📝 Applying state update for undo on image`);
                 const updatedHistory = {
                     ...imageHistory,
                     currentHistoryEntryId: operation.newCurrentHistoryEntryId
                 };
-                console.log(`[useAdjustmentHistoryBatch] 🔍 UNDO: Updated image ${imageHistory.imageId} history:`, {
+                log.debug({
+                    imageId: imageHistory.imageId,
                     currentHistoryEntryId: updatedHistory.currentHistoryEntryId,
                     historyLength: updatedHistory.history.length,
                     historyIds: updatedHistory.history.map(entry => entry.id)
-                });
+                }, `[useAdjustmentHistoryBatch] 🔍 UNDO: Updated image history`);
                 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)
-            })));
+            log.debug({
+                imageHistories: result.map(h => ({
+                    imageId: h.imageId,
+                    currentHistoryEntryId: h.currentHistoryEntryId,
+                    historyLength: h.history.length,
+                    historyIds: h.history.map(entry => entry.id)
+                }))
+            }, '[useAdjustmentHistoryBatch] 🔍 UNDO: After undo, final imageHistories state');
             return result;
         });
         // 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)`);
+                log.info({ operationCount: backendOperations.length }, `[useAdjustmentHistoryBatch] ⏪ Syncing 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}`);
+                    log.debug({ imageId: operation.imageId, taskId: operation.taskId }, `[useAdjustmentHistoryBatch] 🔄 Calling setHistoryIndex for undo on image`);
                     await internalOptions.controller.setHistoryIndex(internalOptions.firebaseUid, operation.imageId, operation.taskId);
                 });
                 await Promise.all(promises);
                 if (devWarningsRef.current) {
-                    console.log(`[useAdjustmentHistoryBatch] ✅ Successfully synced ${backendOperations.length} undo operations to backend`);
+                    log.info({ operationCount: backendOperations.length }, `[useAdjustmentHistoryBatch] ✅ Successfully synced undo operations to backend`);
                 }
             }
             catch (error) {
-                console.error('[useAdjustmentHistoryBatch] ❌ Failed to sync undo to backend:', error);
+                log.error({ error }, '[useAdjustmentHistoryBatch] ❌ Failed to sync undo to backend');
             }
         }
         if (!anyChanges && devWarningsRef.current) {
-            console.warn('[useAdjustmentHistoryBatch] Undo skipped - no changes to undo for selected images');
+            log.warn('[useAdjustmentHistoryBatch] Undo skipped - no changes to undo for selected images');
         }
     }, [selectedIds, internalOptions, imageHistories]);
     // Redo next changes to selected images - entry-based history version with backend sync
     const redo = useCallback(async () => {
         if (selectedIds.length === 0) {
             if (devWarningsRef.current) {
-                console.warn('[useAdjustmentHistoryBatch] Cannot redo - no images selected');
+                log.warn('[useAdjustmentHistoryBatch] Cannot redo - no images selected');
             }
             return;
         }
@@ -641,52 +860,76 @@ export function useAdjustmentHistoryBatch(options = {}) {
         // 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)`);
+                log.info({ operationCount: backendOperations.length }, `[useAdjustmentHistoryBatch] ⏩ Syncing 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}`);
+                    log.debug({ imageId: operation.imageId, taskId: operation.taskId }, `[useAdjustmentHistoryBatch] 🔄 Calling setHistoryIndex for redo on image`);
                     await internalOptions.controller.setHistoryIndex(internalOptions.firebaseUid, operation.imageId, operation.taskId);
                 });
                 await Promise.all(promises);
                 if (devWarningsRef.current) {
-                    console.log(`[useAdjustmentHistoryBatch] ✅ Successfully synced ${backendOperations.length} redo operations to backend`);
+                    log.info({ operationCount: backendOperations.length }, `[useAdjustmentHistoryBatch] ✅ Successfully synced redo operations to backend`);
                 }
             }
             catch (error) {
-                console.error('[useAdjustmentHistoryBatch] ❌ Failed to sync redo to backend:', error);
+                log.error({ error }, '[useAdjustmentHistoryBatch] ❌ Failed to sync redo to backend');
             }
         }
         if (!anyChanges && devWarningsRef.current) {
-            console.warn('[useAdjustmentHistoryBatch] Redo skipped - no changes to redo for selected images');
+            log.warn('[useAdjustmentHistoryBatch] Redo skipped - no changes to redo for selected images');
         }
     }, [selectedIds, internalOptions, imageHistories]);
     // Check if any selected image can be undone
     const canUndoSelected = useCallback(() => {
-        return selectedIds.some(imageId => {
+        const canUndoResults = selectedIds.map(imageId => {
             const imageHistory = imageHistories.find(h => h.imageId === imageId);
             if (!imageHistory)
-                return false;
+                return { imageId, canUndo: false, reason: 'no history' };
             const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
-            return currentEntryIndex > 0;
+            const canUndo = currentEntryIndex > 0;
+            return {
+                imageId,
+                canUndo,
+                currentEntryIndex,
+                historyLength: imageHistory.history.length,
+                currentHistoryEntryId: imageHistory.currentHistoryEntryId
+            };
         });
+        const result = canUndoResults.some(r => r.canUndo);
+        log.debug({ canUndoResults, finalResult: result }, '[useAdjustmentHistoryBatch] 🔍 canUndoSelected check');
+        return result;
     }, [selectedIds, imageHistories]);
     // Check if any selected image can be redone
     const canRedoSelected = useCallback(() => {
-        return selectedIds.some(imageId => {
+        const canRedoResults = selectedIds.map(imageId => {
             const imageHistory = imageHistories.find(h => h.imageId === imageId);
             if (!imageHistory)
-                return false;
+                return { imageId, canRedo: false, reason: 'no history' };
             const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
-            return currentEntryIndex >= 0 && currentEntryIndex < imageHistory.history.length - 1;
+            const canRedo = currentEntryIndex >= 0 && currentEntryIndex < imageHistory.history.length - 1;
+            return {
+                imageId,
+                canRedo,
+                currentEntryIndex,
+                historyLength: imageHistory.history.length,
+                currentHistoryEntryId: imageHistory.currentHistoryEntryId
+            };
         });
+        const result = canRedoResults.some(r => r.canRedo);
+        log.debug({ canRedoResults, finalResult: result }, '[useAdjustmentHistoryBatch] 🔍 canRedoSelected check');
+        return result;
     }, [selectedIds, imageHistories]);
-    // Reset selected images to default state - now uses shared logic
+    // Reset selected images to default state - creates new history entry like regular adjustment
     const reset = useCallback(async (imageIds) => {
-        const idsToReset = imageIds || selectedIds;
-        console.log('[useAdjustmentHistoryBatch] 🔄 reset called for images:', idsToReset);
-        // Create default state
+        const idsToReset = imageIds && imageIds.length > 0 ? imageIds : selectedIds;
+        log.info({ idsToReset }, '[useAdjustmentHistoryBatch] 🔄 reset called for images');
+        // Create default state (all zeros, no preset_id)
         const defaultState = createDefaultAdjustmentState(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
+        if (!idsToReset || idsToReset.length === 0) {
+            log.warn('[useAdjustmentHistoryBatch] ⚠️ No images to reset - no selection available');
+            return;
+        }
+        log.info('[useAdjustmentHistoryBatch] 🔄 Reset creating NEW history entry with all zeros (no preset_id) - acts like regular adjustment');
+        // Use the same logic as preset, creating a new history entry that can be undone
         await applyAdjustmentToSelected(defaultState, 'reset', idsToReset);
     }, [selectedIds, internalOptions.defaultAdjustmentState, applyAdjustmentToSelected]);
     // Selection management with initial adjustments - single state update
@@ -733,14 +976,74 @@ export function useAdjustmentHistoryBatch(options = {}) {
         // Single state update to prevent multiple re-renders
         setCurrentBatch(newBatch);
         if (internalOptions.devWarnings) {
-            console.log('useAdjustmentHistoryBatch: Selection updated with initial adjustments', {
+            log.debug({
                 selected: imageIds,
                 totalImages: newAllImageIds.length,
                 newImages: imageIds.filter(id => !allImageIds.includes(id)),
                 withInitialAdjustments: configs.filter(c => c.adjustment).length
-            });
+            }, 'useAdjustmentHistoryBatch: Selection updated with initial adjustments');
         }
     }, [allImageIds, currentBatch, internalOptions.defaultAdjustmentState, internalOptions.devWarnings]);
+    // Initialize images from pagination data without backend sync - creates initial history entries
+    const initializeFromPagination = useCallback((configs) => {
+        if (configs.length === 0)
+            return;
+        if (devWarningsRef.current) {
+            log.debug({
+                imageCount: configs.length,
+                imageIds: configs.map(c => c.imageId),
+                imagesWithAdjustments: configs.filter(c => c.adjustment).length,
+                scenario: 'PAGINATION_INIT'
+            }, '[useAdjustmentHistoryBatch] 🔄 PAGINATION INIT: Initializing images from pagination data (no backend sync)');
+        }
+        // Update allImageIds to include new images
+        const newImageIds = configs.map(config => config.imageId);
+        setAllImageIds(prevAllIds => {
+            const uniqueIds = Array.from(new Set([...prevAllIds, ...newImageIds]));
+            return uniqueIds;
+        });
+        // Create initial history entries for images from pagination data
+        setImageHistories(prevHistories => {
+            const updatedHistories = [...prevHistories];
+            configs.forEach(config => {
+                // Check if image already has history
+                const existingHistoryIndex = updatedHistories.findIndex(h => h.imageId === config.imageId);
+                if (existingHistoryIndex === -1) {
+                    // Create new history for image with pagination data as initial entry
+                    const initialAdjustment = config.adjustment || createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
+                    const initialEntryId = generateEntryId();
+                    const initialEntry = {
+                        id: initialEntryId,
+                        adjustment: initialAdjustment
+                    };
+                    const newImageHistory = {
+                        imageId: config.imageId,
+                        currentHistoryEntryId: initialEntryId,
+                        history: [initialEntry]
+                    };
+                    updatedHistories.push(newImageHistory);
+                    if (devWarningsRef.current) {
+                        log.debug({
+                            imageId: config.imageId,
+                            entryId: initialEntryId,
+                            hasAdjustments: !!config.adjustment,
+                            adjustment: initialAdjustment,
+                            scenario: 'PAGINATION_INIT'
+                        }, `[useAdjustmentHistoryBatch] ✅ PAGINATION INIT: Created initial history for image`);
+                    }
+                }
+                else {
+                    if (devWarningsRef.current) {
+                        log.debug({ imageId: config.imageId }, `[useAdjustmentHistoryBatch] ⏭️ PAGINATION INIT: Skipping image - already initialized`);
+                    }
+                }
+            });
+            return updatedHistories;
+        });
+        if (devWarningsRef.current) {
+            log.debug('[useAdjustmentHistoryBatch] ✅ PAGINATION INIT: All images initialized with pagination data (undo/redo available when selected)');
+        }
+    }, [internalOptions.defaultAdjustmentState]);
     // Sync adjustments for specific images - loads full history from backend
     const syncAdjustment = useCallback(async (configs) => {
         if (configs.length === 0)
@@ -754,14 +1057,16 @@ export function useAdjustmentHistoryBatch(options = {}) {
                         return {
                             imageId: config.imageId,
                             backendHistory: historyResponse.history || [],
+                            currentTaskId: historyResponse.current_task_id,
                             fallbackAdjustment: config.adjustment
                         };
                     }
                     catch (error) {
-                        console.warn(`[useAdjustmentHistoryBatch] Failed to load history for image ${config.imageId}:`, error);
+                        log.warn({ imageId: config.imageId, error }, `[useAdjustmentHistoryBatch] Failed to load history for image`);
                         return {
                             imageId: config.imageId,
                             backendHistory: [],
+                            currentTaskId: undefined,
                             fallbackAdjustment: config.adjustment
                         };
                     }
@@ -770,19 +1075,34 @@ export function useAdjustmentHistoryBatch(options = {}) {
                 setImageHistories(prevHistories => {
                     const updatedHistories = [...prevHistories];
                     for (const result of historyResults) {
-                        const { imageId, backendHistory, fallbackAdjustment } = result;
+                        const { imageId, backendHistory, currentTaskId, fallbackAdjustment } = result;
                         const existingIndex = updatedHistories.findIndex(h => h.imageId === imageId);
                         if (backendHistory.length > 0) {
+                            // Backend history comes in DESC order (newest first), but we need ASC order (oldest first)
+                            // So we reverse the array to get the correct chronological order
+                            const reversedHistory = [...backendHistory].reverse();
                             // Convert backend history to local history entries
-                            const historyEntries = backendHistory.map((entry, index) => ({
+                            const historyEntries = reversedHistory.map((entry, index) => ({
                                 id: entry.task_id, // Use backend task_id as our entry id
                                 adjustment: mapColorAdjustmentToAdjustmentState ?
-                                    mapColorAdjustmentToAdjustmentState(entry.editor_config.color_adjustment) :
+                                    mapColorAdjustmentToAdjustmentState(entry.editor_config.color_adjustment, entry.editor_config.preset_id) :
                                     createDefaultAdjustmentState(internalOptions.defaultAdjustmentState)
                             }));
+                            // Use backend current_task_id if available, otherwise default to latest entry
+                            const currentEntryId = currentTaskId || historyEntries[historyEntries.length - 1].id;
+                            log.debug({
+                                imageId,
+                                backendCurrentTaskId: currentTaskId,
+                                historyLength: historyEntries.length,
+                                selectedCurrentEntryId: currentEntryId,
+                                isUsingBackendPosition: !!currentTaskId,
+                                allEntryIds: historyEntries.map(e => e.id),
+                                presetIds: historyEntries.map(e => ({ entryId: e.id, preset_id: e.adjustment.preset_id })),
+                                currentEntryPresetId: historyEntries.find(e => e.id === currentEntryId)?.adjustment.preset_id
+                            });
                             const newImageHistory = {
                                 imageId,
-                                currentHistoryEntryId: historyEntries[historyEntries.length - 1].id, // Point to latest entry
+                                currentHistoryEntryId: currentEntryId,
                                 history: historyEntries
                             };
                             if (existingIndex >= 0) {
@@ -821,15 +1141,15 @@ export function useAdjustmentHistoryBatch(options = {}) {
                 if (internalOptions.devWarnings) {
                     const syncedImageIds = configs.map(c => c.imageId);
                     const totalHistoryEntries = historyResults.reduce((sum, result) => sum + result.backendHistory.length, 0);
-                    console.log('[useAdjustmentHistoryBatch] Synced adjustments with backend history', {
+                    log.debug({
                         syncedImages: syncedImageIds,
                         totalHistoryEntries,
                         historyLoaded: true
-                    });
+                    }, '[useAdjustmentHistoryBatch] Synced adjustments with backend history');
                 }
             }
             catch (error) {
-                console.error('[useAdjustmentHistoryBatch] Failed to sync with backend, falling back to local only:', error);
+                log.error({ error }, '[useAdjustmentHistoryBatch] Failed to sync with backend, falling back to local only');
                 // Fall back to local-only sync
                 syncAdjustmentLocal(configs);
             }
@@ -897,7 +1217,9 @@ export function useAdjustmentHistoryBatch(options = {}) {
             return updatedHistories;
         });
     }, [internalOptions]);
-    const toggleSelection = useCallback((imageId) => {
+    const toggleSelection = useCallback(async (imageId) => {
+        const wasSelected = selectedIds.includes(imageId);
+        const isBeingSelected = !wasSelected;
         setSelectedIds(prev => {
             const isCurrentlySelected = prev.includes(imageId);
             const newSelectedIds = isCurrentlySelected
@@ -914,22 +1236,35 @@ export function useAdjustmentHistoryBatch(options = {}) {
                 delete newBatch.currentSelection[imageId];
             }
             else {
-                // Add to currentSelection - use existing state from allImages or create default
+                // Add to currentSelection - use existing state from allImages
                 if (currentBatch.allImages[imageId]) {
                     newBatch.currentSelection[imageId] = { ...currentBatch.allImages[imageId] };
                 }
-                else {
-                    // New image - create default state
-                    const defaultState = createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
-                    newBatch.currentSelection[imageId] = { ...defaultState };
-                    newBatch.allImages[imageId] = { ...defaultState };
-                    newBatch.initialStates[imageId] = { ...defaultState };
+                // Update allImageIds to include new image if not already present
+                if (!allImageIds.includes(imageId)) {
+                    setAllImageIds(prevAllIds => [...prevAllIds, imageId]);
                 }
             }
             setCurrentBatch(newBatch);
             return newSelectedIds;
         });
-    }, [currentBatch, internalOptions.defaultAdjustmentState]);
+        // Sync backend history for newly selected image
+        if (isBeingSelected && internalOptions.controller && internalOptions.firebaseUid) {
+            try {
+                if (devWarningsRef.current) {
+                    log.debug({ imageId }, `[useAdjustmentHistoryBatch] 🔄 SELECTION SYNC: Loading backend history for selected image`);
+                }
+                // Use syncAdjustment to load backend history for the selected image
+                await syncAdjustment([{ imageId }]);
+                if (devWarningsRef.current) {
+                    log.debug({ imageId }, `[useAdjustmentHistoryBatch] ✅ SELECTION SYNC: Backend history loaded for image - undo/redo now available`);
+                }
+            }
+            catch (error) {
+                log.error({ imageId, error }, `[useAdjustmentHistoryBatch] ❌ SELECTION SYNC: Failed to load backend history for image`);
+            }
+        }
+    }, [selectedIds, currentBatch, allImageIds, internalOptions, syncAdjustment]);
     const selectAll = useCallback(() => {
         setSelectedIds([...allImageIds]);
         // Update currentSelection to include all images
@@ -965,7 +1300,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
     // Jump to specific index - not applicable in per-image history
     const jumpToIndex = useCallback((index) => {
         if (devWarningsRef.current) {
-            console.warn('[useAdjustmentHistoryBatch] jumpToIndex not supported in per-image history mode');
+            log.warn('[useAdjustmentHistoryBatch] jumpToIndex not supported in per-image history mode');
         }
     }, []);
     // Clear all history and start fresh
@@ -974,6 +1309,8 @@ export function useAdjustmentHistoryBatch(options = {}) {
         setCurrentBatch(createEmptyBatchState());
         setAllImageIds([]);
         setSelectedIds([]);
+        // Also clear synced history cache when clearing all history
+        syncedImageHistoryIds.current.clear();
     }, []);
     const getCurrentBatch = useCallback(() => {
         return {
@@ -986,7 +1323,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
     const syncBatch = useCallback((newBatch, targetIndex) => {
         // Validate input
         if (!newBatch || typeof newBatch !== 'object' || !newBatch.currentSelection || !newBatch.allImages || !newBatch.initialStates) {
-            console.warn('syncBatch: newBatch must be a valid BatchAdjustmentState object with currentSelection, allImages, and initialStates');
+            log.warn('syncBatch: newBatch must be a valid BatchAdjustmentState object with currentSelection, allImages, and initialStates');
             return;
         }
         // Convert batch state to entry-based histories
@@ -1016,35 +1353,35 @@ export function useAdjustmentHistoryBatch(options = {}) {
         setAllImageIds(allImageIds);
         setSelectedIds(selectedImageIds);
         if (devWarningsRef.current) {
-            console.log('[useAdjustmentHistoryBatch] Synchronized batch state to entry-based history', {
+            log.debug({
                 totalImages: allImageIds.length,
                 selectedImages: selectedImageIds.length
-            });
+            }, '[useAdjustmentHistoryBatch] Synchronized batch state to entry-based history');
         }
     }, []);
     // 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)');
+                log.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);
+            log.info({ timestamp: lastUpdateTimestampRef.current }, `[useAdjustmentHistoryBatch] 🔄 Checking for gallery updates since timestamp`);
+            const updateResponse = await internalOptions.controller.getGalleryUpdateTimestamp(internalOptions.firebaseUid, internalOptions.eventId, lastUpdateTimestampRef.current);
             if (!updateResponse.gallery || updateResponse.gallery.length === 0) {
                 if (devWarningsRef.current) {
-                    console.log('[useAdjustmentHistoryBatch] ✅ No gallery updates found');
+                    log.debug('[useAdjustmentHistoryBatch] ✅ No gallery updates found');
                 }
                 return;
             }
-            console.log(`[useAdjustmentHistoryBatch] 📥 Found ${updateResponse.gallery.length} updated galleries:`, updateResponse.gallery);
+            log.info({ galleryCount: updateResponse.gallery.length, galleries: updateResponse.gallery }, `[useAdjustmentHistoryBatch] 📥 Found updated galleries`);
             // Step 2: Fetch history for each updated gallery
             const historyPromises = updateResponse.gallery.map(async (galleryId) => {
                 try {
-                    console.log(`[useAdjustmentHistoryBatch] 🔄 Fetching history for gallery: ${galleryId}`);
+                    log.debug({ galleryId }, `[useAdjustmentHistoryBatch] 🔄 Fetching history for gallery`);
                     const historyResponse = await internalOptions.controller.getEditorHistory(internalOptions.firebaseUid, galleryId);
                     return {
                         imageId: galleryId,
@@ -1054,7 +1391,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
                     };
                 }
                 catch (error) {
-                    console.error(`[useAdjustmentHistoryBatch] ❌ Failed to fetch history for gallery ${galleryId}:`, error);
+                    log.error({ galleryId, error }, `[useAdjustmentHistoryBatch] ❌ Failed to fetch history for gallery`);
                     return {
                         imageId: galleryId,
                         currentTaskId: '',
@@ -1067,10 +1404,10 @@ export function useAdjustmentHistoryBatch(options = {}) {
             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');
+                    log.debug('[useAdjustmentHistoryBatch] ℹ️ No valid history updates to apply');
                 }
                 // Update timestamp even if no valid updates
-                setLastUpdateTimestamp(Date.now());
+                lastUpdateTimestampRef.current = Date.now();
                 return;
             }
             // Step 3: Prepare history updates from backend data
@@ -1078,11 +1415,14 @@ export function useAdjustmentHistoryBatch(options = {}) {
             successfulUpdates.forEach(result => {
                 const { imageId, currentTaskId, backendHistory } = result;
                 if (backendHistory.length > 0) {
+                    // Backend history comes in DESC order (newest first), but we need ASC order (oldest first)
+                    // So we reverse the array to get the correct chronological order
+                    const reversedHistory = [...backendHistory].reverse();
                     // Convert backend history to local history entries
-                    const historyEntries = backendHistory.map((entry) => ({
+                    const historyEntries = reversedHistory.map((entry) => ({
                         id: entry.task_id, // Use backend task_id as our entry id
                         adjustment: mapColorAdjustmentToAdjustmentState ?
-                            mapColorAdjustmentToAdjustmentState(entry.editor_config.color_adjustment) :
+                            mapColorAdjustmentToAdjustmentState(entry.editor_config.color_adjustment, entry.editor_config.preset_id) :
                             createDefaultAdjustmentState(internalOptions.defaultAdjustmentState)
                     }));
                     historyUpdates.push({
@@ -1090,7 +1430,8 @@ export function useAdjustmentHistoryBatch(options = {}) {
                         newHistory: historyEntries,
                         newCurrentEntryId: currentTaskId // Use current_task_id as current history entry
                     });
-                    console.log(`[useAdjustmentHistoryBatch] 📝 Prepared history update for gallery ${imageId}:`, {
+                    log.debug({
+                        imageId,
                         historyEntries: historyEntries.length,
                         currentEntryId: currentTaskId
                     });
@@ -1112,24 +1453,115 @@ export function useAdjustmentHistoryBatch(options = {}) {
                         };
                     });
                 });
-                console.log(`[useAdjustmentHistoryBatch] ✅ Successfully updated history for ${historyUpdates.length} galleries`);
+                log.info({ updateCount: historyUpdates.length }, `[useAdjustmentHistoryBatch] ✅ Successfully updated history for galleries`);
             }
             // Step 5: Update timestamp to mark successful sync
-            setLastUpdateTimestamp(Date.now());
+            lastUpdateTimestampRef.current = Date.now();
             if (devWarningsRef.current) {
-                console.log('[useAdjustmentHistoryBatch] 🔄 Gallery sync completed', {
+                log.debug({
                     totalChecked: updateResponse.gallery.length,
                     successfulUpdates: successfulUpdates.length,
                     appliedUpdates: historyUpdates.length,
                     newTimestamp: Date.now()
+                }, '[useAdjustmentHistoryBatch] 🔄 Gallery sync completed');
+            }
+        }
+        catch (error) {
+            log.error({ error }, '[useAdjustmentHistoryBatch] ❌ Failed to sync gallery updates');
+            // Don't update timestamp on error, so we can retry
+        }
+    }, [internalOptions, mapColorAdjustmentToAdjustmentState]);
+    // Sync history for a specific image from backend
+    const syncFromBackend = useCallback(async (imageId) => {
+        if (!internalOptions.controller || !internalOptions.firebaseUid) {
+            if (devWarningsRef.current) {
+                log.warn('[useAdjustmentHistoryBatch] syncFromBackend: Missing required options (controller or firebaseUid)');
+            }
+            return;
+        }
+        try {
+            log.info({ imageId }, `[useAdjustmentHistoryBatch] 🔄 Syncing history for image`);
+            const historyResponse = await internalOptions.controller.getEditorHistory(internalOptions.firebaseUid, imageId);
+            if (!historyResponse.history || historyResponse.history.length === 0) {
+                if (devWarningsRef.current) {
+                    log.debug({ imageId }, `[useAdjustmentHistoryBatch] ℹ️ No history found for image`);
+                }
+                return;
+            }
+            // Backend history comes in DESC order (newest first), but we need ASC order (oldest first)
+            // So we reverse the array to get the correct chronological order
+            const reversedHistory = [...historyResponse.history].reverse();
+            // Convert backend history to local history entries
+            const historyEntries = reversedHistory.map((entry) => ({
+                id: entry.task_id,
+                adjustment: mapColorAdjustmentToAdjustmentState ?
+                    mapColorAdjustmentToAdjustmentState(entry.editor_config.color_adjustment, entry.editor_config.preset_id) :
+                    createDefaultAdjustmentState(internalOptions.defaultAdjustmentState)
+            }));
+            // Update the specific image's history
+            setImageHistories(prevHistories => {
+                return prevHistories.map(imageHistory => {
+                    if (imageHistory.imageId === imageId) {
+                        return {
+                            ...imageHistory,
+                            history: historyEntries,
+                            currentHistoryEntryId: historyResponse.current_task_id
+                        };
+                    }
+                    return imageHistory;
                 });
+            });
+            log.info({
+                imageId,
+                historyEntries: historyEntries.length,
+                currentEntryId: historyResponse.current_task_id,
+                presetIds: historyEntries.map(e => ({ entryId: e.id, preset_id: e.adjustment.preset_id })),
+                currentEntryPresetId: historyEntries.find(e => e.id === historyResponse.current_task_id)?.adjustment.preset_id
+            });
+        }
+        catch (error) {
+            log.error({ imageId, error }, `[useAdjustmentHistoryBatch] ❌ Failed to sync history for image`);
+        }
+    }, [internalOptions, mapColorAdjustmentToAdjustmentState]);
+    // Sync history for all images that have updates since last timestamp
+    const syncHistoryFromBackendAll = useCallback(async () => {
+        if (!internalOptions.controller || !internalOptions.firebaseUid || !internalOptions.eventId) {
+            if (devWarningsRef.current) {
+                log.warn('[useAdjustmentHistoryBatch] syncHistoryFromBackendAll: Missing required options (controller, firebaseUid, or eventId)');
+            }
+            return;
+        }
+        try {
+            log.info({ timestamp: lastUpdateTimestampRef.current }, `[useAdjustmentHistoryBatch] 🔄 Checking for gallery updates since timestamp`);
+            const updateResponse = await internalOptions.controller.getGalleryUpdateTimestamp(internalOptions.firebaseUid, internalOptions.eventId, lastUpdateTimestampRef.current);
+            if (!updateResponse.gallery || updateResponse.gallery.length === 0) {
+                if (devWarningsRef.current) {
+                    log.debug('[useAdjustmentHistoryBatch] ✅ No gallery updates found');
+                }
+                return;
+            }
+            log.info({ galleryCount: updateResponse.gallery.length, galleries: updateResponse.gallery }, `[useAdjustmentHistoryBatch] 📥 Found updated galleries`);
+            // Sync history for each updated image one by one
+            for (const imageId of updateResponse.gallery) {
+                await syncFromBackend(imageId);
             }
+            // Update timestamp to mark successful sync
+            lastUpdateTimestampRef.current = Date.now();
+            log.info({
+                totalUpdated: updateResponse.gallery.length,
+                newTimestamp: Date.now()
+            }, '[useAdjustmentHistoryBatch] ✅ Successfully synced all updated galleries');
         }
         catch (error) {
-            console.error('[useAdjustmentHistoryBatch] ❌ Failed to sync gallery updates:', error);
+            log.error({ error }, '[useAdjustmentHistoryBatch] ❌ Failed to sync all gallery updates');
             // Don't update timestamp on error, so we can retry
         }
-    }, [internalOptions, lastUpdateTimestamp, mapColorAdjustmentToAdjustmentState]);
+    }, [internalOptions, syncFromBackend]);
+    // Clear synced history cache - forces re-sync of history for all images
+    const clearSyncedHistoryCache = useCallback(() => {
+        syncedImageHistoryIds.current.clear();
+        log.debug('[useAdjustmentHistoryBatch] 🗑️ Cleared synced history cache - next selection will trigger history sync');
+    }, []);
     // Configuration actions
     const setMaxSize = useCallback((size) => {
         maxSizeRef.current = size;
@@ -1137,8 +1569,11 @@ export function useAdjustmentHistoryBatch(options = {}) {
             enforceMaxSize();
         }
     }, [enforceMaxSize]);
-    // History info object - updated for per-image history
-    const historyInfo = useMemo(() => ({
+    // State object - combines all state information
+    const state = useMemo(() => ({
+        currentBatch,
+        selectedIds,
+        allImageIds,
         canUndo: canUndoSelected(),
         canRedo: canRedoSelected(),
         currentIndex: 0, // Not applicable in per-image history
@@ -1146,44 +1581,142 @@ export function useAdjustmentHistoryBatch(options = {}) {
         selectedCount: selectedIds.length,
         totalImages: allImageIds.length,
         historySize: getMemoryUsage()
-    }), [canUndoSelected, canRedoSelected, imageHistories, selectedIds.length, allImageIds.length, getMemoryUsage]);
+    }), [currentBatch, selectedIds, allImageIds, canUndoSelected, canRedoSelected, imageHistories, getMemoryUsage]);
+    // Update state from socket - handles both selected and non-selected images
+    const updateFromSocket = useCallback(async (imageId, adjustmentTaskId, adjustment, preset_id) => {
+        log.info({
+            imageId,
+            taskId: adjustmentTaskId,
+            isSelected: selectedIds.includes(imageId),
+            hasPresetId: !!preset_id
+        }, `[useAdjustmentHistoryBatch] 🔌 Socket update received for image`);
+        if (selectedIds.includes(imageId)) {
+            // Image is selected - sync full history to get correct position
+            log.debug({ imageId }, `[useAdjustmentHistoryBatch] 🔄 Image is SELECTED - syncing full history`);
+            await syncFromBackend(imageId);
+        }
+        else {
+            // Image is not selected - update state directly without full sync
+            log.debug({ imageId }, `[useAdjustmentHistoryBatch] 📝 Image is NOT SELECTED - updating state directly`);
+            // Convert ColorAdjustment to AdjustmentState
+            const adjustmentState = mapColorAdjustmentToAdjustmentState
+                ? mapColorAdjustmentToAdjustmentState(adjustment, preset_id)
+                : createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
+            // Create new history entry
+            const newEntry = {
+                id: adjustmentTaskId,
+                adjustment: adjustmentState
+            };
+            // Update the image's history and current position
+            setImageHistories(prevHistories => {
+                return prevHistories.map(imageHistory => {
+                    if (imageHistory.imageId === imageId) {
+                        // Add new entry to history and update current position
+                        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: adjustmentTaskId
+                        };
+                    }
+                    return imageHistory;
+                });
+            });
+            // Update batch state for this image if it exists in allImages
+            setCurrentBatch(prevBatch => {
+                if (prevBatch.allImages[imageId]) {
+                    return {
+                        ...prevBatch,
+                        allImages: {
+                            ...prevBatch.allImages,
+                            [imageId]: adjustmentState
+                        }
+                    };
+                }
+                return prevBatch;
+            });
+        }
+    }, [selectedIds, syncFromBackend, mapColorAdjustmentToAdjustmentState, internalOptions.defaultAdjustmentState]);
     // Actions object - stabilized with useMemo
     const actions = useMemo(() => ({
         adjustSelected,
         adjustSelectedWithPreset,
+        adjustSelectedWithPaste,
         undo,
         redo,
         reset,
         setSelection,
+        initializeFromPagination,
         syncAdjustment,
         syncGalleryUpdates,
+        syncFromBackend,
+        syncHistoryFromBackendAll,
+        clearSyncedHistoryCache,
         toggleSelection,
         selectAll,
         clearSelection,
         jumpToIndex,
         clearHistory,
         getCurrentBatch,
-        syncBatch
+        syncBatch,
+        setMaxSize,
+        getMemoryUsage,
+        updateFromSocket
     }), [
-        adjustSelected, adjustSelectedWithPreset, undo, redo, reset,
-        setSelection, syncAdjustment, syncGalleryUpdates, toggleSelection, selectAll, clearSelection,
-        jumpToIndex, clearHistory, getCurrentBatch, syncBatch
+        adjustSelected, adjustSelectedWithPreset, adjustSelectedWithPaste, undo, redo, reset,
+        setSelection, initializeFromPagination, syncAdjustment, syncGalleryUpdates, syncFromBackend, syncHistoryFromBackendAll,
+        clearSyncedHistoryCache, toggleSelection, selectAll, clearSelection, jumpToIndex, clearHistory,
+        getCurrentBatch, syncBatch, setMaxSize, getMemoryUsage, updateFromSocket
     ]);
-    // Config object - stabilized with useMemo
-    const config = useMemo(() => ({
-        setMaxSize,
-        getMemoryUsage
-    }), [setMaxSize, getMemoryUsage]);
-    // Apply max size enforcement when history changes
+    // Apply max size enforcement when history data actually changes
     useEffect(() => {
         enforceMaxSize();
-    }, [enforceMaxSize]);
+    }, [imageHistories]);
+    // Smart history sync: handles both selection changes and pagination scenarios
+    useEffect(() => {
+        if (selectedIds.length === 0)
+            return;
+        // Find selected images that need history syncing
+        const imagesToSync = selectedIds.filter(imageId => {
+            // Check if already synced OR if already exists in imageHistories
+            const alreadySynced = syncedImageHistoryIds.current.has(imageId);
+            const alreadyInHistories = imageHistories.some(h => h.imageId === imageId);
+            return !alreadySynced && !alreadyInHistories;
+        });
+        if (imagesToSync.length === 0) {
+            log.debug('[useAdjustmentHistoryBatch] ✅ All selected images already have synced history');
+            return;
+        }
+        log.info({ imagesToSync }, '[useAdjustmentHistoryBatch] 🔄 Syncing history for selected images (selection or pagination change)');
+        // Sync history for each selected image that needs it
+        const syncPromises = imagesToSync.map(async (imageId) => {
+            try {
+                await syncFromBackend(imageId);
+                syncedImageHistoryIds.current.add(imageId);
+                log.debug({ imageId }, `[useAdjustmentHistoryBatch] ✅ History synced for selected image`);
+            }
+            catch (error) {
+                log.error({ imageId, error }, `[useAdjustmentHistoryBatch] ❌ Failed to sync history for selected image`);
+            }
+        });
+        // Execute all syncs concurrently (but don't await to avoid blocking)
+        Promise.allSettled(syncPromises).then((results) => {
+            const successful = results.filter(r => r.status === 'fulfilled').length;
+            const failed = results.filter(r => r.status === 'rejected').length;
+            log.info({
+                successful,
+                failed,
+                total: imagesToSync.length
+            }, `[useAdjustmentHistoryBatch] 📊 History sync completed for selected images`);
+        });
+    }, [selectedIds, syncFromBackend, imageHistories]);
     return {
-        currentBatch,
-        selectedIds,
-        allImageIds,
-        historyInfo,
-        actions,
-        config
+        state,
+        actions
     };
 }