@yogiswara/honcho-editor-ui 2.5.9 → 2.6.0

package/dist/hooks/useAdjustmentHistoryBatch.js

@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { mapAdjustmentStateToColorAdjustment, mapColorAdjustmentToAdjustmentState } from '../utils/adjustment';
 /**
  * Create default adjustment state
  */
@@ -37,6 +38,23 @@ const createEmptyBatchState = () => ({
     allImages: {},
     initialStates: {}
 });
+/**
+ * Generate unique ID for history entries using UUID format
+ */
+const generateEntryId = () => {
+    // Simple UUID v4 implementation
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+        const r = Math.random() * 16 | 0;
+        const v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+};
+/**
+ * Generate unique task ID for backend operations (same as entry ID)
+ */
+const generateTaskId = () => {
+    return generateEntryId();
+};
 /**
  * Advanced hook for managing batch AdjustmentState history with selective undo/redo functionality.
  *
@@ -85,192 +103,429 @@ export function useAdjustmentHistoryBatch(options = {}) {
     const internalOptions = useMemo(() => ({
         maxSize: options.maxSize ?? 'unlimited',
         devWarnings: options.devWarnings ?? false,
-        defaultAdjustmentState: options.defaultAdjustmentState ?? {}
+        defaultAdjustmentState: options.defaultAdjustmentState ?? {},
+        controller: options.controller,
+        firebaseUid: options.firebaseUid,
+        eventId: options.eventId
     }), [
         options.maxSize,
         options.devWarnings,
-        options.defaultAdjustmentState
+        options.defaultAdjustmentState,
+        options.controller,
+        options.firebaseUid,
+        options.eventId
     ]);
-    // Core state management - start empty for plain mode
+    // Core state management - using per-image history instead of batch history
     const [allImageIds, setAllImageIds] = useState([]);
     const [selectedIds, setSelectedIds] = useState([]);
-    const [history, setHistory] = useState([createEmptyBatchState()]);
-    const [currentIndex, setCurrentIndex] = useState(0);
+    const [imageHistories, setImageHistories] = useState([]);
     const [currentBatch, setCurrentBatch] = useState(createEmptyBatchState());
     // Configuration refs
     const maxSizeRef = useRef(internalOptions.maxSize);
     const devWarningsRef = useRef(internalOptions.devWarnings);
-    // Sync currentBatch with history
+    // Helper function to rebuild currentBatch from imageHistories
+    const rebuildCurrentBatch = useCallback(() => {
+        const newBatch = createEmptyBatchState();
+        imageHistories.forEach(imageHistory => {
+            // Find current adjustment using currentHistoryEntryId
+            const currentEntry = imageHistory.history.find(entry => entry.id === imageHistory.currentHistoryEntryId);
+            if (currentEntry) {
+                newBatch.allImages[imageHistory.imageId] = currentEntry.adjustment;
+                if (selectedIds.includes(imageHistory.imageId)) {
+                    newBatch.currentSelection[imageHistory.imageId] = currentEntry.adjustment;
+                }
+            }
+        });
+        return newBatch;
+    }, [imageHistories, selectedIds]);
+    // Sync currentBatch with imageHistories
     useEffect(() => {
-        setCurrentBatch(history[currentIndex]);
-    }, [history, currentIndex]);
+        setCurrentBatch(rebuildCurrentBatch());
+    }, [rebuildCurrentBatch]);
     // Memory usage calculation
     const getMemoryUsage = useCallback(() => {
         try {
-            const historyString = JSON.stringify(history);
-            return historyString.length * 2; // Rough estimate: 2 bytes per character
+            const historiesString = JSON.stringify(imageHistories);
+            return historiesString.length * 2; // Rough estimate: 2 bytes per character
         }
         catch (error) {
             console.warn('Failed to estimate memory usage:', error);
-            return history.length * allImageIds.length * 1000; // Fallback estimate
+            return imageHistories.length * 100 * 1000; // Fallback estimate
         }
-    }, [history, allImageIds.length]);
-    // Trim history to specified size
-    const trimHistoryToSize = useCallback((size) => {
+    }, [imageHistories]);
+    // Trim individual image histories to specified size
+    const trimImageHistoriesToSize = useCallback((size) => {
         if (size <= 0)
             return;
-        setHistory(prevHistory => {
-            if (prevHistory.length <= size)
-                return prevHistory;
-            const startIndex = Math.max(0, prevHistory.length - size);
-            const trimmedHistory = prevHistory.slice(startIndex);
-            // Adjust current index
-            setCurrentIndex(prevIndex => {
-                const adjustedIndex = prevIndex - startIndex;
-                return Math.max(0, Math.min(adjustedIndex, trimmedHistory.length - 1));
-            });
-            return trimmedHistory;
-        });
+        setImageHistories(prevHistories => prevHistories.map(imageHistory => ({
+            ...imageHistory,
+            history: imageHistory.history.length <= size
+                ? imageHistory.history
+                : imageHistory.history.slice(-size) // Keep last 'size' entries
+        })));
     }, []);
     // Apply max size limit
     const enforceMaxSize = useCallback(() => {
         if (maxSizeRef.current === 'unlimited')
             return;
         const maxSize = maxSizeRef.current;
-        if (history.length > maxSize) {
-            trimHistoryToSize(maxSize);
+        if (typeof maxSize === 'number' && imageHistories.length > 0) {
+            const totalHistorySize = imageHistories.reduce((sum, h) => sum + h.history.length, 0);
+            if (totalHistorySize > maxSize * imageHistories.length) {
+                trimImageHistoriesToSize(maxSize);
+            }
         }
-    }, [history.length, trimHistoryToSize]);
-    // Push new batch state to history
-    const pushBatchState = useCallback((newBatch) => {
-        // Skip if batch hasn't changed
-        if (compareBatchStates(newBatch, currentBatch)) {
+    }, [imageHistories, trimImageHistoriesToSize]);
+    // Apply adjustment deltas to selected images - with entry-based history and backend sync
+    const adjustSelected = useCallback(async (delta) => {
+        if (selectedIds.length === 0) {
+            if (devWarningsRef.current) {
+                console.warn('[useAdjustmentHistoryBatch] adjustSelected called with no selection');
+            }
             return;
         }
-        // Update currentBatch immediately for smooth UI
-        setCurrentBatch(newBatch);
-        // Update history
-        setHistory(prevHistory => {
-            const truncatedHistory = prevHistory.slice(0, currentIndex + 1);
-            const newHistory = [...truncatedHistory, newBatch];
-            setCurrentIndex(newHistory.length - 1);
-            return newHistory;
+        // Store backend operations to perform after state update
+        const backendOperations = [];
+        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 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;
+                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];
+                }
+                // 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 // Update current pointer
+                };
+            });
         });
-    }, [currentBatch, currentIndex]);
-    // Apply adjustment deltas to selected images
-    const adjustSelected = useCallback((delta) => {
-        if (selectedIds.length === 0)
+        // Perform backend operations asynchronously
+        if (backendOperations.length > 0 && internalOptions.controller && internalOptions.firebaseUid) {
+            try {
+                const promises = backendOperations.map(async (operation) => {
+                    await internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, {
+                        gallery_id: operation.imageId,
+                        task_id: operation.taskId,
+                        color_adjustment: mapAdjustmentStateToColorAdjustment(operation.adjustment),
+                        replace_from: operation.replaceFromTaskId
+                    });
+                });
+                await Promise.all(promises);
+                if (devWarningsRef.current) {
+                    console.log(`[useAdjustmentHistoryBatch] Synced ${backendOperations.length} adjustments to backend`);
+                }
+            }
+            catch (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) {
+            if (devWarningsRef.current) {
+                console.warn('[useAdjustmentHistoryBatch] adjustSelectedWithPreset called with no selection');
+            }
             return;
-        const newBatch = {
-            currentSelection: { ...currentBatch.currentSelection },
-            allImages: { ...currentBatch.allImages },
-            initialStates: { ...currentBatch.initialStates }
-        };
-        // Apply adjustments to selected images in both currentSelection and allImages
-        for (const imageId of selectedIds) {
-            if (newBatch.currentSelection[imageId]) {
-                // Update current selection
-                newBatch.currentSelection[imageId] = {
-                    ...newBatch.currentSelection[imageId],
-                    ...Object.fromEntries(Object.entries(delta).map(([key, value]) => [
-                        key,
-                        newBatch.currentSelection[imageId][key] + value
-                    ]))
+        }
+        // Store backend operations to perform after state update
+        const backendOperations = [];
+        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
                 };
-                // Also update in allImages to persist the changes
-                newBatch.allImages[imageId] = { ...newBatch.currentSelection[imageId] };
+                // 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];
+                }
+                // 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 // Update current pointer
+                };
+            });
+        });
+        // Perform backend operations asynchronously
+        if (backendOperations.length > 0 && internalOptions.controller && internalOptions.firebaseUid) {
+            try {
+                const promises = backendOperations.map(async (operation) => {
+                    await internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, {
+                        gallery_id: operation.imageId,
+                        task_id: operation.taskId,
+                        color_adjustment: mapAdjustmentStateToColorAdjustment(operation.adjustment),
+                        replace_from: operation.replaceFromTaskId
+                    });
+                });
+                await Promise.all(promises);
+                if (devWarningsRef.current) {
+                    console.log(`[useAdjustmentHistoryBatch] Synced ${backendOperations.length} preset adjustments to backend`);
+                }
+            }
+            catch (error) {
+                console.error('[useAdjustmentHistoryBatch] Failed to sync preset adjustments to backend:', error);
             }
         }
-        pushBatchState(newBatch);
-    }, [selectedIds, currentBatch, pushBatchState]);
+    }, [selectedIds, internalOptions]);
     // Set specific adjustment states for specified images (removed since not needed)
-    // Undo last changes to selected images
-    const undo = useCallback(() => {
-        if (currentIndex > 0 && selectedIds.length > 0) {
-            const previousBatch = history[currentIndex - 1];
-            const newBatch = {
-                currentSelection: { ...currentBatch.currentSelection },
-                allImages: { ...currentBatch.allImages },
-                initialStates: { ...currentBatch.initialStates }
-            };
-            // Only restore adjustments for currently selected images
-            for (const imageId of selectedIds) {
-                if (previousBatch.allImages[imageId] && newBatch.currentSelection[imageId]) {
-                    // Restore from previous allImages state (not currentSelection)
-                    newBatch.currentSelection[imageId] = { ...previousBatch.allImages[imageId] };
-                    newBatch.allImages[imageId] = { ...previousBatch.allImages[imageId] };
-                }
+    // 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');
             }
-            // Update current batch and move index back
-            setCurrentBatch(newBatch);
-            setCurrentIndex(currentIndex - 1);
-            // Update the current history entry with the new mixed state
-            setHistory(prevHistory => {
-                const newHistory = [...prevHistory];
-                newHistory[currentIndex] = newBatch;
-                return newHistory;
+            return;
+        }
+        let anyChanges = false;
+        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 <= 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
+                    });
+                }
+                return {
+                    ...imageHistory,
+                    currentHistoryEntryId: previousEntry.id
+                };
             });
-            if (internalOptions.devWarnings) {
-                console.log('useAdjustmentHistoryBatch: Undo completed for selected images only', {
-                    selectedImages: selectedIds,
-                    currentIndex: currentIndex - 1
+        });
+        // Sync with backend
+        if (backendOperations.length > 0 && internalOptions.controller && internalOptions.firebaseUid) {
+            try {
+                const promises = backendOperations.map(async (operation) => {
+                    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`);
+                }
+            }
+            catch (error) {
+                console.error('[useAdjustmentHistoryBatch] Failed to sync undo to backend:', error);
             }
         }
-    }, [currentIndex, selectedIds, history, currentBatch, internalOptions.devWarnings]);
-    // Redo next changes to selected images
-    const redo = useCallback(() => {
-        if (currentIndex < history.length - 1 && selectedIds.length > 0) {
-            const nextBatch = history[currentIndex + 1];
-            const newBatch = {
-                currentSelection: { ...currentBatch.currentSelection },
-                allImages: { ...currentBatch.allImages },
-                initialStates: { ...currentBatch.initialStates }
-            };
-            // Only restore adjustments for currently selected images
-            for (const imageId of selectedIds) {
-                if (nextBatch.allImages[imageId] && newBatch.currentSelection[imageId]) {
-                    // Restore from next allImages state (not currentSelection)
-                    newBatch.currentSelection[imageId] = { ...nextBatch.allImages[imageId] };
-                    newBatch.allImages[imageId] = { ...nextBatch.allImages[imageId] };
-                }
+        if (!anyChanges && devWarningsRef.current) {
+            console.warn('[useAdjustmentHistoryBatch] Undo skipped - no changes to undo for selected images');
+        }
+    }, [selectedIds, internalOptions]);
+    // 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');
             }
-            // Update current batch and move index forward
-            setCurrentBatch(newBatch);
-            setCurrentIndex(currentIndex + 1);
-            // Update the current history entry with the new mixed state
-            setHistory(prevHistory => {
-                const newHistory = [...prevHistory];
-                newHistory[currentIndex + 1] = newBatch;
-                return newHistory;
+            return;
+        }
+        let anyChanges = false;
+        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
+                };
             });
-            if (internalOptions.devWarnings) {
-                console.log('useAdjustmentHistoryBatch: Redo completed for selected images only', {
-                    selectedImages: selectedIds,
-                    currentIndex: currentIndex + 1
+        });
+        // Sync with backend
+        if (backendOperations.length > 0 && internalOptions.controller && internalOptions.firebaseUid) {
+            try {
+                const promises = backendOperations.map(async (operation) => {
+                    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`);
+                }
+            }
+            catch (error) {
+                console.error('[useAdjustmentHistoryBatch] Failed to sync redo to backend:', error);
             }
         }
-    }, [currentIndex, selectedIds, history, currentBatch, internalOptions.devWarnings]);
-    // Reset selected images to default state
+        if (!anyChanges && devWarningsRef.current) {
+            console.warn('[useAdjustmentHistoryBatch] Redo skipped - no changes to redo for selected images');
+        }
+    }, [selectedIds, internalOptions]);
+    // Check if any selected image can be undone
+    const canUndoSelected = useCallback(() => {
+        return selectedIds.some(imageId => {
+            const imageHistory = imageHistories.find(h => h.imageId === imageId);
+            if (!imageHistory)
+                return false;
+            const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
+            return currentEntryIndex > 0;
+        });
+    }, [selectedIds, imageHistories]);
+    // Check if any selected image can be redone
+    const canRedoSelected = useCallback(() => {
+        return selectedIds.some(imageId => {
+            const imageHistory = imageHistories.find(h => h.imageId === imageId);
+            if (!imageHistory)
+                return false;
+            const currentEntryIndex = imageHistory.history.findIndex(entry => entry.id === imageHistory.currentHistoryEntryId);
+            return currentEntryIndex >= 0 && currentEntryIndex < imageHistory.history.length - 1;
+        });
+    }, [selectedIds, imageHistories]);
+    // Reset selected images to default state - entry-based history version
     const reset = useCallback((imageIds) => {
         const idsToReset = imageIds || selectedIds;
         if (idsToReset.length === 0)
             return;
-        const newBatch = {
-            currentSelection: { ...currentBatch.currentSelection },
-            allImages: { ...currentBatch.allImages },
-            initialStates: { ...currentBatch.initialStates }
-        };
         const defaultState = createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
-        for (const imageId of idsToReset) {
-            if (newBatch.currentSelection[imageId]) {
-                newBatch.currentSelection[imageId] = { ...defaultState };
-                newBatch.allImages[imageId] = { ...defaultState };
-            }
-        }
-        pushBatchState(newBatch);
-    }, [selectedIds, currentBatch, pushBatchState, 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]);
     // Selection management with initial adjustments - single state update
     const setSelection = useCallback((configs) => {
         const imageIds = configs.map(config => config.imageId);
@@ -323,54 +578,217 @@ export function useAdjustmentHistoryBatch(options = {}) {
             });
         }
     }, [allImageIds, currentBatch, internalOptions.defaultAdjustmentState, internalOptions.devWarnings]);
-    // Sync adjustments for specific images (clears their history) - single state update
-    const syncAdjustment = useCallback((configs) => {
+    // Sync adjustments for specific images - loads full history from backend
+    const syncAdjustment = useCallback(async (configs) => {
         if (configs.length === 0)
             return;
-        // Build new batch state
-        const newBatch = {
-            currentSelection: { ...currentBatch.currentSelection },
-            allImages: { ...currentBatch.allImages },
-            initialStates: { ...currentBatch.initialStates }
-        };
-        // Process each sync config
-        for (const config of configs) {
-            const { imageId, adjustment } = config;
-            if (adjustment) {
-                const fullAdjustment = {
-                    ...createDefaultAdjustmentState(internalOptions.defaultAdjustmentState),
-                    ...adjustment
-                };
-                // Update all states for this image
-                newBatch.allImages[imageId] = { ...fullAdjustment };
-                newBatch.initialStates[imageId] = { ...fullAdjustment };
-                // If image is currently selected, update current selection too
-                if (newBatch.currentSelection[imageId]) {
-                    newBatch.currentSelection[imageId] = { ...fullAdjustment };
+        // If controller is available, load full history from backend
+        if (internalOptions.controller && internalOptions.firebaseUid) {
+            try {
+                const historyPromises = configs.map(async (config) => {
+                    try {
+                        const historyResponse = await internalOptions.controller.getEditorHistory(internalOptions.firebaseUid, config.imageId);
+                        return {
+                            imageId: config.imageId,
+                            backendHistory: historyResponse.history || [],
+                            fallbackAdjustment: config.adjustment
+                        };
+                    }
+                    catch (error) {
+                        console.warn(`[useAdjustmentHistoryBatch] Failed to load history for image ${config.imageId}:`, error);
+                        return {
+                            imageId: config.imageId,
+                            backendHistory: [],
+                            fallbackAdjustment: config.adjustment
+                        };
+                    }
+                });
+                const historyResults = await Promise.all(historyPromises);
+                setImageHistories(prevHistories => {
+                    const updatedHistories = [...prevHistories];
+                    for (const result of historyResults) {
+                        const { imageId, backendHistory, fallbackAdjustment } = result;
+                        const existingIndex = updatedHistories.findIndex(h => h.imageId === imageId);
+                        if (backendHistory.length > 0) {
+                            // Convert backend history to local history entries
+                            const historyEntries = backendHistory.map((entry, index) => ({
+                                id: entry.task_id, // Use backend task_id as our entry id
+                                adjustment: mapColorAdjustmentToAdjustmentState ?
+                                    mapColorAdjustmentToAdjustmentState(entry.editor_config.color_adjustment) :
+                                    createDefaultAdjustmentState(internalOptions.defaultAdjustmentState)
+                            }));
+                            const newImageHistory = {
+                                imageId,
+                                currentHistoryEntryId: historyEntries[historyEntries.length - 1].id, // Point to latest entry
+                                history: historyEntries
+                            };
+                            if (existingIndex >= 0) {
+                                updatedHistories[existingIndex] = newImageHistory;
+                            }
+                            else {
+                                updatedHistories.push(newImageHistory);
+                            }
+                        }
+                        else {
+                            // No backend history, use fallback adjustment or default
+                            const adjustment = fallbackAdjustment ? {
+                                ...createDefaultAdjustmentState(internalOptions.defaultAdjustmentState),
+                                ...fallbackAdjustment
+                            } : createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
+                            const entryId = generateEntryId();
+                            const entry = {
+                                id: entryId,
+                                adjustment
+                            };
+                            const newImageHistory = {
+                                imageId,
+                                currentHistoryEntryId: entryId,
+                                history: [entry]
+                            };
+                            if (existingIndex >= 0) {
+                                updatedHistories[existingIndex] = newImageHistory;
+                            }
+                            else {
+                                updatedHistories.push(newImageHistory);
+                            }
+                        }
+                    }
+                    return updatedHistories;
+                });
+                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', {
+                        syncedImages: syncedImageIds,
+                        totalHistoryEntries,
+                        historyLoaded: true
+                    });
                 }
             }
+            catch (error) {
+                console.error('[useAdjustmentHistoryBatch] Failed to sync with backend, falling back to local only:', error);
+                // Fall back to local-only sync
+                syncAdjustmentLocal(configs);
+            }
         }
-        // Clear history and start fresh with synced state
-        const freshHistory = [newBatch];
-        setHistory(freshHistory);
-        setCurrentIndex(0);
-        setCurrentBatch(newBatch);
-        if (internalOptions.devWarnings) {
-            const syncedImageIds = configs.map(c => c.imageId);
-            console.log('useAdjustmentHistoryBatch: Synced adjustments (history cleared)', {
-                syncedImages: syncedImageIds,
-                historyCleared: true
-            });
+        else {
+            // No controller available, use local-only sync
+            syncAdjustmentLocal(configs);
         }
-    }, [currentBatch, internalOptions.defaultAdjustmentState, internalOptions.devWarnings]);
+        // Update allImageIds to include any new images
+        const newImageIds = configs.map(c => c.imageId);
+        setAllImageIds(prev => {
+            const combined = Array.from(new Set([...prev, ...newImageIds]));
+            return combined;
+        });
+    }, [internalOptions]);
+    // Local-only sync for fallback
+    const syncAdjustmentLocal = useCallback((configs) => {
+        setImageHistories(prevHistories => {
+            const updatedHistories = [...prevHistories];
+            for (const config of configs) {
+                const { imageId, adjustment } = config;
+                const existingIndex = updatedHistories.findIndex(h => h.imageId === imageId);
+                if (adjustment) {
+                    const fullAdjustment = {
+                        ...createDefaultAdjustmentState(internalOptions.defaultAdjustmentState),
+                        ...adjustment
+                    };
+                    const entryId = generateEntryId();
+                    const entry = {
+                        id: entryId,
+                        adjustment: fullAdjustment
+                    };
+                    if (existingIndex >= 0) {
+                        // Update existing image history, replace with new adjustment as initial state
+                        updatedHistories[existingIndex] = {
+                            imageId,
+                            currentHistoryEntryId: entryId,
+                            history: [entry] // Reset history with synced state
+                        };
+                    }
+                    else {
+                        // Add new image history
+                        updatedHistories.push({
+                            imageId,
+                            currentHistoryEntryId: entryId,
+                            history: [entry]
+                        });
+                    }
+                }
+                else if (existingIndex < 0) {
+                    // Add new image with default state
+                    const defaultState = createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
+                    const entryId = generateEntryId();
+                    const entry = {
+                        id: entryId,
+                        adjustment: defaultState
+                    };
+                    updatedHistories.push({
+                        imageId,
+                        currentHistoryEntryId: entryId,
+                        history: [entry]
+                    });
+                }
+            }
+            return updatedHistories;
+        });
+    }, [internalOptions]);
     const toggleSelection = useCallback((imageId) => {
-        setSelectedIds(prev => prev.includes(imageId)
-            ? prev.filter(id => id !== imageId)
-            : [...prev, imageId]);
-    }, []);
+        setSelectedIds(prev => {
+            const isCurrentlySelected = prev.includes(imageId);
+            const newSelectedIds = isCurrentlySelected
+                ? prev.filter(id => id !== imageId)
+                : [...prev, imageId];
+            // Update currentSelection in batch state
+            const newBatch = {
+                currentSelection: { ...currentBatch.currentSelection },
+                allImages: { ...currentBatch.allImages },
+                initialStates: { ...currentBatch.initialStates }
+            };
+            if (isCurrentlySelected) {
+                // Remove from currentSelection
+                delete newBatch.currentSelection[imageId];
+            }
+            else {
+                // Add to currentSelection - use existing state from allImages or create default
+                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 };
+                }
+            }
+            setCurrentBatch(newBatch);
+            return newSelectedIds;
+        });
+    }, [currentBatch, internalOptions.defaultAdjustmentState]);
     const selectAll = useCallback(() => {
         setSelectedIds([...allImageIds]);
-    }, [allImageIds]);
+        // Update currentSelection to include all images
+        const newBatch = {
+            currentSelection: {},
+            allImages: { ...currentBatch.allImages },
+            initialStates: { ...currentBatch.initialStates }
+        };
+        for (const imageId of allImageIds) {
+            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 };
+            }
+        }
+        setCurrentBatch(newBatch);
+    }, [allImageIds, currentBatch, internalOptions.defaultAdjustmentState]);
     const clearSelection = useCallback(() => {
         setSelectedIds([]);
         // Clear currentSelection but keep allImages and initialStates
@@ -381,18 +799,16 @@ export function useAdjustmentHistoryBatch(options = {}) {
         };
         setCurrentBatch(newBatch);
     }, [currentBatch]);
-    // Other history actions
+    // Jump to specific index - not applicable in per-image history
     const jumpToIndex = useCallback((index) => {
-        if (index >= 0 && index < history.length) {
-            setCurrentIndex(index);
-            setCurrentBatch(history[index]);
+        if (devWarningsRef.current) {
+            console.warn('[useAdjustmentHistoryBatch] jumpToIndex not supported in per-image history mode');
         }
-    }, [history]);
+    }, []);
+    // Clear all history and start fresh
     const clearHistory = useCallback(() => {
-        const freshBatch = createEmptyBatchState();
-        setHistory([freshBatch]);
-        setCurrentIndex(0);
-        setCurrentBatch(freshBatch);
+        setImageHistories([]);
+        setCurrentBatch(createEmptyBatchState());
         setAllImageIds([]);
         setSelectedIds([]);
     }, []);
@@ -403,32 +819,41 @@ export function useAdjustmentHistoryBatch(options = {}) {
             initialStates: { ...currentBatch.initialStates }
         };
     }, [currentBatch]);
+    // Sync entire batch state - adapted for entry-based history
     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');
             return;
         }
-        // Update current state
+        // Convert batch state to entry-based histories
+        const newImageHistories = [];
+        Object.entries(newBatch.allImages).forEach(([imageId, adjustment]) => {
+            const entryId = generateEntryId();
+            const entry = {
+                id: entryId,
+                adjustment
+            };
+            newImageHistories.push({
+                imageId,
+                currentHistoryEntryId: entryId,
+                history: [entry] // Start with current state as single history entry
+            });
+        });
+        // Update state
+        setImageHistories(newImageHistories);
         setCurrentBatch({
             currentSelection: { ...newBatch.currentSelection },
             allImages: { ...newBatch.allImages },
             initialStates: { ...newBatch.initialStates }
         });
-        // Replace history with single entry
-        setHistory([{
-                currentSelection: { ...newBatch.currentSelection },
-                allImages: { ...newBatch.allImages },
-                initialStates: { ...newBatch.initialStates }
-            }]);
-        setCurrentIndex(0);
-        // Update image tracking
+        // Update tracking
         const allImageIds = Object.keys(newBatch.allImages);
         const selectedImageIds = Object.keys(newBatch.currentSelection);
         setAllImageIds(allImageIds);
         setSelectedIds(selectedImageIds);
         if (devWarningsRef.current) {
-            console.log('syncBatch: Synchronized batch state', {
+            console.log('[useAdjustmentHistoryBatch] Synchronized batch state to entry-based history', {
                 totalImages: allImageIds.length,
                 selectedImages: selectedImageIds.length
             });
@@ -441,19 +866,20 @@ export function useAdjustmentHistoryBatch(options = {}) {
             enforceMaxSize();
         }
     }, [enforceMaxSize]);
-    // History info object
+    // History info object - updated for per-image history
     const historyInfo = useMemo(() => ({
-        canUndo: currentIndex > 0 && selectedIds.length > 0,
-        canRedo: currentIndex < history.length - 1 && selectedIds.length > 0,
-        currentIndex,
-        totalStates: history.length,
+        canUndo: canUndoSelected(),
+        canRedo: canRedoSelected(),
+        currentIndex: 0, // Not applicable in per-image history
+        totalStates: imageHistories.reduce((sum, h) => sum + h.history.length, 0),
         selectedCount: selectedIds.length,
         totalImages: allImageIds.length,
         historySize: getMemoryUsage()
-    }), [currentIndex, history.length, selectedIds.length, allImageIds.length, getMemoryUsage]);
+    }), [canUndoSelected, canRedoSelected, imageHistories, selectedIds.length, allImageIds.length, getMemoryUsage]);
     // Actions object - stabilized with useMemo
     const actions = useMemo(() => ({
         adjustSelected,
+        adjustSelectedWithPreset,
         undo,
         redo,
         reset,
@@ -467,7 +893,7 @@ export function useAdjustmentHistoryBatch(options = {}) {
         getCurrentBatch,
         syncBatch
     }), [
-        adjustSelected, undo, redo, reset,
+        adjustSelected, adjustSelectedWithPreset, undo, redo, reset,
         setSelection, syncAdjustment, toggleSelection, selectAll, clearSelection,
         jumpToIndex, clearHistory, getCurrentBatch, syncBatch
     ]);