@yogiswara/honcho-editor-ui 2.7.13 → 2.7.15

package/dist/components/editor/HAccordionPreset.js

@@ -27,21 +27,23 @@ export default function HAccordionPreset(props) {
     };
     const isPanelExpanded = (panelName) => props.expandedPanels.includes(panelName);
     return (_jsx(_Fragment, { children: _jsx(Box, { children: _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsxs(Stack, { direction: "column", gap: "8px", sx: { pt: '0px', pb: '0px', mx: '0px', width: '100%' }, children: [props.presets.map((preset) => (_jsxs(Stack, { direction: "row", alignItems: "center", sx: { width: "100%" }, children: [_jsx(Box, { sx: { width: 100, flexShrink: 0 }, children: _jsx(Button, { sx: {
-                                                    flex: 1,
-                                                    minWidth: 0, // allow ellipsis to kick in
-                                                    textTransform: "none",
-                                                    display: "block", // keep flex for left alignment
-                                                    justifyContent: "flex-start",
-                                                    alignItems: "center",
+                                                    width: '100px',
+                                                    textWrap: 'nowrap',
+                                                    overflow: 'hidden',
+                                                    textOverflow: 'ellipsis',
+                                                    display: 'block',
+                                                    textTransform: 'none',
                                                     color: colors.surface,
-                                                    pl: 0,
-                                                    ml: 0,
-                                                    ...typography.bodyMedium,
+                                                    // pr: "120px", // No longer needed since the button is full width
+                                                    pl: "0px",
+                                                    ml: "0px",
+                                                    justifyContent: 'flex-start',
+                                                    ...typography.bodyMedium
                                                 }, onClick: () => props.onSelectPreset(preset.id), children: _jsx(Box, { component: "span", sx: {
                                                         overflow: "hidden",
                                                         textOverflow: "ellipsis",
                                                         whiteSpace: "nowrap",
-                                                        minWidth: 0, // critical for flex children
+                                                        minWidth: 0,
                                                     }, children: preset.name }) }) }), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, sx: { ml: "auto" }, children: [props.selectedPreset === preset.id && (_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px" } })), _jsx(IconButton, { "aria-label": preset.name, onClick: (event) => props.onPresetMenuClick(event, preset.id), sx: { p: 0, m: 0 }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options" }) })] })] }, preset.id))), _jsx(Button, { variant: "text", sx: { color: colors.surface, border: "1px solid",
                                         borderColor: colors.surface,
                                         borderRadius: "40px",

package/dist/components/editor/HHeaderEditor.js

@@ -11,10 +11,10 @@ export default function HHeaderEditor(props) {
     return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", width: "100%", sx: {
                 id: 'HHeaderEditor',
                 pr: !isMobile ? "24px" : "6px",
-                position: 'fixed',
-                top: 0,
-                left: 0,
-                right: 0,
+                position: isMobile ? 'fixed' : 'relative',
+                top: isMobile ? 0 : 'auto',
+                left: isMobile ? 0 : 'auto',
+                right: isMobile ? 0 : 'auto',
                 zIndex: 1300,
                 backgroundColor: 'transparent',
             }, children: [_jsx(Stack, { direction: "row", justifyContent: "flex-start", sx: { pl: !isMobile ? "0px" : "14px" }, children: _jsx(IconButton, { "aria-label": "back", onClick: props.onBack, sx: {

package/dist/hooks/editor/useHonchoEditorSingle.js

@@ -37,7 +37,7 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
             [field]: value
         };
         adjustmentHistory.actions.pushState(newState);
-    }, [adjustmentHistory.currentState, adjustmentHistory.actions.pushState]);
+    }, [adjustmentHistory.currentState, adjustmentHistory.actions.pushState, adjustmentHistory.historyInfo.isBatchMode]);
     const setBatchMode = useCallback((enabled) => {
         adjustmentHistory.config.setBatchMode(enabled);
     }, [adjustmentHistory.config.setBatchMode]);
@@ -57,17 +57,17 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
         // Reset means setting all adjustments to 0 and adding it as new history entry
         // This allows users to undo the reset operation
         // Reset acts like normal adjustment - each reset creates a new history entry
-        console.log('Resetting adjustments to 0 - adding to history and sending to backend');
-        // First add reset to history (this creates local history entry)
+        console.log('Resetting adjustments to 0 - adding to history');
+        // Always add reset to history (this automatically syncs to backend via batch mode)
+        await adjustmentHistory.config.setBatchMode(true);
         adjustmentHistory.actions.pushState(initialAdjustments);
-        // Then sync to backend
-        await adjustmentHistory.config.syncToBackend();
-    }, [adjustmentHistory.actions.pushState, adjustmentHistory.config.syncToBackend]);
+        await adjustmentHistory.config.setBatchMode(false, true); // forceHistory = true
+    }, [adjustmentHistory.actions.pushState, adjustmentHistory.config.setBatchMode]);
     const loadPresets = useCallback(async () => {
         await presetHook.actions.load();
     }, [presetHook.actions.load]);
     const applyPreset = useCallback(async (preset) => {
-        console.log('Applying preset:', preset.name, '- saving to backend history');
+        console.log('Applying preset:', preset.name);
         const adjustmentState = {
             tempScore: preset.temperature,
             tintScore: preset.tint,
@@ -82,11 +82,12 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
             clarityScore: preset.clarity,
             sharpnessScore: preset.sharpness,
         };
-        // Apply preset directly and add to history
+        console.log('Applying preset:', preset.name, 'with adjustments:', adjustmentState);
+        // Always apply preset and add to history (this automatically syncs to backend via batch mode)
+        await adjustmentHistory.config.setBatchMode(true);
         adjustmentHistory.actions.pushState(adjustmentState);
-        // Then sync to backend
-        await adjustmentHistory.config.syncToBackend();
-    }, [adjustmentHistory.actions.pushState, adjustmentHistory.config.syncToBackend]);
+        await adjustmentHistory.config.setBatchMode(false, true); // forceHistory = true
+    }, [adjustmentHistory.actions.pushState, adjustmentHistory.config.setBatchMode]);
     const createPreset = useCallback(async (name, adjustments) => {
         return await presetHook.actions.create(name, adjustments);
     }, [presetHook.actions.create]);
@@ -101,16 +102,16 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
         return {
             temperature: adjustments.tempScore,
             tint: adjustments.tintScore,
-            vibrance: adjustments.vibranceScore / 100,
-            saturation: adjustments.saturationScore / 100,
-            exposure: (adjustments.exposureScore / 100) * 3,
-            highlights: adjustments.highlightsScore / 100,
-            shadows: adjustments.shadowsScore / 100,
-            whites: adjustments.whitesScore / 100,
-            blacks: adjustments.blacksScore / 100,
-            contrast: adjustments.contrastScore / 100,
-            clarity: adjustments.clarityScore / 100,
-            sharpness: adjustments.sharpnessScore / 100,
+            vibrance: adjustments.vibranceScore,
+            saturation: adjustments.saturationScore,
+            exposure: adjustments.exposureScore,
+            highlights: adjustments.highlightsScore,
+            shadows: adjustments.shadowsScore,
+            whites: adjustments.whitesScore,
+            blacks: adjustments.blacksScore,
+            contrast: adjustments.contrastScore,
+            clarity: adjustments.clarityScore,
+            sharpness: adjustments.sharpnessScore,
         };
     }, [adjustmentHistory.currentState]);
     const actions = {

package/dist/hooks/useAdjustmentHistory.d.ts

@@ -49,6 +49,8 @@ export interface HistoryActions {
     trimHistory: (keepLast: number) => void;
     /** Replace entire history with new list of adjustment states */
     syncHistory: (newHistory: AdjustmentState[], targetIndex?: number) => void;
+    /** Sync history from backend using getEditorHistory */
+    syncFromBackend: () => Promise<void>;
 }
 /**
  * Configuration actions for runtime adjustment
@@ -57,11 +59,9 @@ export interface HistoryConfig {
     /** Set maximum history size */
     setMaxSize: (size: number | 'unlimited') => void;
     /** Enable or disable batch mode */
-    setBatchMode: (enabled: boolean) => Promise<void>;
+    setBatchMode: (enabled: boolean, forceHistory?: boolean) => Promise<void>;
     /** Get current memory usage estimate */
     getMemoryUsage: () => number;
-    /** Force sync current state to backend */
-    syncToBackend: () => Promise<void>;
 }
 /**
  * Return type for the useAdjustmentHistory hook

package/dist/hooks/useAdjustmentHistory.js

@@ -18,6 +18,25 @@ const convertAdjustmentStateToColorAdjustment = (adjustmentState) => {
         sharpness: adjustmentState.sharpnessScore,
     };
 };
+/**
+ * Convert ColorAdjustment from backend to AdjustmentState format
+ */
+const convertColorAdjustmentToAdjustmentState = (colorAdjustment) => {
+    return {
+        tempScore: colorAdjustment.temperature,
+        tintScore: colorAdjustment.tint,
+        saturationScore: colorAdjustment.saturation,
+        vibranceScore: colorAdjustment.vibrance,
+        exposureScore: colorAdjustment.exposure,
+        contrastScore: colorAdjustment.contrast,
+        highlightsScore: colorAdjustment.highlights,
+        shadowsScore: colorAdjustment.shadows,
+        whitesScore: colorAdjustment.whites,
+        blacksScore: colorAdjustment.blacks,
+        clarityScore: colorAdjustment.clarity,
+        sharpnessScore: colorAdjustment.sharpness,
+    };
+};
 /**
  * Compare two AdjustmentState objects for equality
  * Uses JSON.stringify for deep comparison of all adjustment values
@@ -79,7 +98,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         currentImageId
     ]);
     // Core state management
-    const [history, setHistory] = useState([{ state: initialState }]);
+    const [history, setHistory] = useState([{ state: initialState, taskId: `initial_${Date.now()}` }]);
     const [currentIndex, setCurrentIndex] = useState(0);
     const [currentState, setCurrentState] = useState(initialState);
     // Batch mode state - ref to avoid triggering effects
@@ -97,11 +116,17 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         largeHistoryWarningShown: false
     });
     // Sync currentState with history when not in batch mode
+    // useEffect(() => {
+    //     if (!batchModeRef.current) {
+    //         console.log(`[useAdjustmentHistory] Syncing currentState with history:`, history[currentIndex]?.state);
+    //         setCurrentState(history[currentIndex]?.state || initialState);
+    //     }
+    // }, [history, currentIndex, initialState]);
     useEffect(() => {
-        if (!batchModeRef.current) {
-            setCurrentState(history[currentIndex]?.state || initialState);
+        if (internalOptions.currentImageId) {
+            syncFromBackend().catch(console.error);
         }
-    }, [history, currentIndex, initialState]);
+    }, [internalOptions.currentImageId, internalOptions.firebaseUid, internalOptions.controller]);
     const getMemoryUsage = useCallback(() => {
         try {
             const historyString = JSON.stringify(history);
@@ -160,12 +185,15 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         if (batchModeRef.current) {
             // In batch mode: Don't update history yet, just update UI state
             // History will be updated when batch mode ends
+            console.log(`[useAdjustmentHistory] Pushing state in batch mode:`, newState);
             return;
         }
         // Normal mode: Update history immediately
         setHistory(prevHistory => {
             const truncatedHistory = prevHistory.slice(0, currentIndex + 1);
-            const newHistory = [...truncatedHistory, { state: newState }];
+            // const taskId = `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+            // we put the taskId empty to check this state no need to save it
+            const newHistory = [...truncatedHistory, { state: newState, taskId: "" }];
             setCurrentIndex(newHistory.length - 1);
             return newHistory;
         });
@@ -178,6 +206,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             const newState = historyEntry.state;
             setCurrentIndex(newIndex);
             setCurrentState(newState);
+            console.log(`[useAdjustmentHistory] Undoing to index ${newIndex}:`, newState);
             // Call controller to set history index in backend if taskId exists
             if (historyEntry.taskId && internalOptions.controller && internalOptions.firebaseUid && internalOptions.currentImageId) {
                 try {
@@ -189,6 +218,9 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
                     console.error('❌ Failed to set history index for undo:', error);
                 }
             }
+            else {
+                console.log("🔙 Undo: No taskId available for setting history index", historyEntry.taskId, internalOptions.firebaseUid, internalOptions.currentImageId);
+            }
             // Exit batch mode when undoing
             if (batchModeRef.current) {
                 batchModeRef.current = false;
@@ -205,6 +237,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             const newState = historyEntry.state;
             setCurrentIndex(newIndex);
             setCurrentState(newState);
+            console.log(`[useAdjustmentHistory] Redoing to index ${newIndex}:`, newState);
             // Call controller to set history index in backend if taskId exists
             if (historyEntry.taskId && internalOptions.controller && internalOptions.firebaseUid && internalOptions.currentImageId) {
                 try {
@@ -216,11 +249,14 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
                     console.error('❌ Failed to set history index for redo:', error);
                 }
             }
+            else {
+                console.warn('🔄 Redo: No taskId available for setting history index', historyEntry.taskId, internalOptions.firebaseUid, internalOptions.currentImageId);
+            }
         }
     }, [currentIndex, history, internalOptions]);
     // Reset history with new initial state
     const reset = useCallback((newInitialState) => {
-        setHistory([{ state: newInitialState }]);
+        setHistory([{ state: newInitialState, taskId: `reset_${Date.now()}` }]);
         setCurrentIndex(0);
         setCurrentState(newInitialState);
         batchModeRef.current = internalOptions.enableBatching;
@@ -244,7 +280,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     }, [history]);
     // Clear all history and start fresh
     const clearHistory = useCallback(() => {
-        setHistory([{ state: currentState }]);
+        setHistory([{ state: currentState, taskId: `clear_${Date.now()}` }]);
         setCurrentIndex(0);
         batchModeRef.current = internalOptions.enableBatching;
         batchStartIndexRef.current = null;
@@ -260,62 +296,69 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     }, [trimHistoryToSize]);
     // Sync/replace entire history with new list
     const syncHistory = useCallback((newHistory, targetIndex) => {
-        // Validate input
-        if (!Array.isArray(newHistory) || newHistory.length === 0) {
-            console.warn('syncHistory: newHistory must be a non-empty array');
-            return;
-        }
-        // Validate all items are AdjustmentState objects
-        const isValidHistory = newHistory.every(state => state && typeof state === 'object' &&
-            typeof state.tempScore === 'number' &&
-            typeof state.tintScore === 'number' &&
-            typeof state.vibranceScore === 'number' &&
-            typeof state.saturationScore === 'number' &&
-            typeof state.exposureScore === 'number' &&
-            typeof state.highlightsScore === 'number' &&
-            typeof state.shadowsScore === 'number' &&
-            typeof state.whitesScore === 'number' &&
-            typeof state.blacksScore === 'number' &&
-            typeof state.contrastScore === 'number' &&
-            typeof state.clarityScore === 'number' &&
-            typeof state.sharpnessScore === 'number');
-        if (!isValidHistory) {
-            console.warn('syncHistory: All items in newHistory must be valid AdjustmentState objects');
-            return;
-        }
-        // Exit batch mode if active
-        if (batchModeRef.current) {
-            batchModeRef.current = false;
-            batchStartIndexRef.current = null;
-            batchStartStateRef.current = null;
-        }
-        // Determine target index
-        let finalIndex = targetIndex ?? newHistory.length - 1; // Default to last item
-        finalIndex = Math.max(0, Math.min(finalIndex, newHistory.length - 1)); // Clamp to valid range
-        // Create a copy of the new history to avoid mutations and convert to HistoryEntry format
-        const historyToSet = newHistory.map(state => ({ state: { ...state } }));
-        // Apply max size limit if needed
-        if (maxSizeRef.current !== 'unlimited' && historyToSet.length > maxSizeRef.current) {
-            const trimAmount = historyToSet.length - maxSizeRef.current;
-            const trimmedHistory = historyToSet.slice(trimAmount);
-            // Adjust target index
-            finalIndex = Math.max(0, finalIndex - trimAmount);
-            setHistory(trimmedHistory);
-            setCurrentIndex(finalIndex);
-            setCurrentState(trimmedHistory[finalIndex].state);
-            if (devWarningsRef.current) {
-                console.warn(`syncHistory: Trimmed ${trimAmount} entries to respect maxSize of ${maxSizeRef.current}`);
-            }
-        }
-        else {
-            // Set history as-is
-            setHistory(historyToSet);
-            setCurrentIndex(finalIndex);
-            setCurrentState(historyToSet[finalIndex].state);
-        }
-        if (devWarningsRef.current) {
-            console.log(`syncHistory: Synchronized ${historyToSet.length} states, current index: ${finalIndex}`);
-        }
+        throw Error('syncHistory is not implemented yet');
+        // // Validate input
+        // if (!Array.isArray(newHistory) || newHistory.length === 0) {
+        //     console.warn('syncHistory: newHistory must be a non-empty array');
+        //     return;
+        // }
+        // // Validate all items are AdjustmentState objects
+        // const isValidHistory = newHistory.every(state => 
+        //     state && typeof state === 'object' &&
+        //     typeof state.tempScore === 'number' &&
+        //     typeof state.tintScore === 'number' &&
+        //     typeof state.vibranceScore === 'number' &&
+        //     typeof state.saturationScore === 'number' &&
+        //     typeof state.exposureScore === 'number' &&
+        //     typeof state.highlightsScore === 'number' &&
+        //     typeof state.shadowsScore === 'number' &&
+        //     typeof state.whitesScore === 'number' &&
+        //     typeof state.blacksScore === 'number' &&
+        //     typeof state.contrastScore === 'number' &&
+        //     typeof state.clarityScore === 'number' &&
+        //     typeof state.sharpnessScore === 'number'
+        // );
+        // if (!isValidHistory) {
+        //     console.warn('syncHistory: All items in newHistory must be valid AdjustmentState objects');
+        //     return;
+        // }
+        // // Exit batch mode if active
+        // if (batchModeRef.current) {
+        //     batchModeRef.current = false;
+        //     batchStartIndexRef.current = null;
+        //     batchStartStateRef.current = null;
+        // }
+        // // Determine target index
+        // let finalIndex = targetIndex ?? newHistory.length - 1; // Default to last item
+        // finalIndex = Math.max(0, Math.min(finalIndex, newHistory.length - 1)); // Clamp to valid range
+        // // Create a copy of the new history to avoid mutations and convert to HistoryEntry format
+        // const historyToSet = newHistory.map((state, index) => ({ 
+        //     state: { ...state }, 
+        //     taskId: `sync_${Date.now()}_${index}` 
+        // }));
+        // // Apply max size limit if needed
+        // if (maxSizeRef.current !== 'unlimited' && historyToSet.length > maxSizeRef.current) {
+        //     const trimAmount = historyToSet.length - maxSizeRef.current;
+        //     const trimmedHistory = historyToSet.slice(trimAmount);
+        //     // Adjust target index
+        //     finalIndex = Math.max(0, finalIndex - trimAmount);
+        //     setHistory(trimmedHistory);
+        //     setCurrentIndex(finalIndex);
+        //     console.log(`syncHistory: Trimmed ${trimAmount} entries to respect maxSize of ${maxSizeRef.current}`);
+        //     setCurrentState(trimmedHistory[finalIndex].state);
+        //     if (devWarningsRef.current) {
+        //         console.warn(`syncHistory: Trimmed ${trimAmount} entries to respect maxSize of ${maxSizeRef.current}`);
+        //     }
+        // } else {
+        //     // Set history as-is
+        //     setHistory(historyToSet);
+        //     setCurrentIndex(finalIndex);
+        //     console.log(`syncHistory: Synchronized ${historyToSet.length} states, current index: ${finalIndex}`);
+        //     setCurrentState(historyToSet[finalIndex].state);
+        // }
+        // if (devWarningsRef.current) {
+        //     console.log(`syncHistory: Synchronized ${historyToSet.length} states, current index: ${finalIndex}`);
+        // }
     }, []);
     // Configuration setters
     const setMaxSize = useCallback((size) => {
@@ -324,7 +367,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             enforceMaxSize();
         }
     }, [enforceMaxSize]);
-    const setBatchMode = useCallback(async (enabled) => {
+    const setBatchMode = useCallback(async (enabled, forceHistory = false) => {
         const wasInBatch = batchModeRef.current;
         console.log(`🔧 setBatchMode called: enabled=${enabled}, wasInBatch=${wasInBatch}, currentIndex=${currentIndex}, historyLength=${history.length}`);
         if (enabled && !wasInBatch) {
@@ -332,27 +375,40 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             batchModeRef.current = true;
             batchStartIndexRef.current = currentIndex;
             batchStartStateRef.current = currentState;
-            console.log("Current start batch ", currentState, `batchStartIndex=${currentIndex}`);
+            console.log("🔧 setBatchMode(true): Starting batch mode", {
+                currentState,
+                currentIndex,
+                batchStartState: currentState
+            });
         }
         else if (!enabled && wasInBatch) {
             // Guard against double execution
+            console.log("🔧 setBatchMode: Ending batch mode", batchModeProcessingRef.current);
             if (batchModeProcessingRef.current) {
                 console.log("⚠️ setBatchMode(false) already processing, skipping duplicate call");
                 return;
             }
+            console.log("🔧 setBatchMode: Ending batch mode", currentState, `batchStartIndex=${batchStartIndexRef.current}`);
             // Ending batch mode - commit final state to history
             batchModeProcessingRef.current = true;
             batchModeRef.current = false;
             // Only add to history if state actually changed from batch start
-            if (batchStartStateRef.current &&
-                !compareAdjustmentStates(currentState, batchStartStateRef.current)) {
+            const statesEqual = batchStartStateRef.current ?
+                compareAdjustmentStates(currentState, batchStartStateRef.current) : true;
+            console.log("🔧 setBatchMode(false): Comparing states", {
+                currentState,
+                batchStartState: batchStartStateRef.current,
+                statesEqual,
+                forceHistory,
+                willAddToHistory: batchStartStateRef.current && (!statesEqual || forceHistory)
+            });
+            if (batchStartStateRef.current && (!statesEqual || forceHistory)) {
                 // Generate a unique task ID for this history entry
                 const taskId = `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
                 setHistory(prevHistory => {
                     // Check if we were in the middle of history BEFORE any truncation
                     // Handle case where batchStartIndexRef.current might be null (e.g., after undo)
                     const batchStartIndex = batchStartIndexRef.current ?? currentIndex;
-                    const wasInMiddleOfHistory = batchStartIndex < prevHistory.length - 1;
                     const truncatedHistory = prevHistory.slice(0, batchStartIndex + 1);
                     const newHistoryEntry = {
                         state: currentState,
@@ -401,11 +457,78 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
                     }
                 }
             }
+            else {
+                if (forceHistory) {
+                    console.log("🔧 setBatchMode: Force history requested but no batch start state");
+                }
+                else {
+                    console.log("🔧 setBatchMode: No changes since batch start, not adding to history");
+                }
+            }
             batchStartIndexRef.current = null;
             batchStartStateRef.current = null;
             batchModeProcessingRef.current = false; // Reset processing flag
         }
     }, [currentIndex, currentState, internalOptions]);
+    // Sync history from backend using getEditorHistory
+    const syncFromBackend = useCallback(async () => {
+        if (!internalOptions.controller || !internalOptions.firebaseUid || !internalOptions.currentImageId) {
+            console.warn('⚠️ syncFromBackend: Controller, firebaseUid, or currentImageId not provided - cannot sync from backend');
+            return;
+        }
+        try {
+            console.log('🔄 Syncing history from backend using getEditorHistory');
+            const historyResponse = await internalOptions.controller.getEditorHistory(internalOptions.firebaseUid, internalOptions.currentImageId);
+            console.log('📥 Received history response from backend:', historyResponse);
+            // Sort history by timestamp (oldest first) before processing
+            const sortedHistory = [...historyResponse.history].sort((a, b) => {
+                const timeA = new Date(a.log.created_at).getTime();
+                const timeB = new Date(b.log.created_at).getTime();
+                return timeA - timeB; // Ascending order (oldest first)
+            });
+            console.log('📋 Sorted history by timestamp:', sortedHistory.map(entry => ({
+                task_id: entry.task_id,
+                timestamp: entry.log.created_at
+            })));
+            // Convert backend history to AdjustmentState format with taskIds
+            const backendHistoryEntries = sortedHistory.map((entry) => ({
+                state: convertColorAdjustmentToAdjustmentState(entry.editor_config.color_adjustment),
+                taskId: entry.task_id
+            }));
+            // Find the index of the current task
+            let currentTaskIndex = -1;
+            if (historyResponse.current_task_id) {
+                currentTaskIndex = backendHistoryEntries.findIndex(entry => entry.taskId === historyResponse.current_task_id);
+            }
+            // If current_task_id is not found in history, default to the last entry
+            if (currentTaskIndex === -1 && backendHistoryEntries.length > 0) {
+                currentTaskIndex = backendHistoryEntries.length - 1;
+                console.warn(`⚠️ Current task ID "${historyResponse.current_task_id}" not found in history, defaulting to last entry`);
+            }
+            // Handle empty history case
+            if (backendHistoryEntries.length === 0) {
+                console.log('📝 Backend history is empty, keeping current local history');
+                return;
+            }
+            // Exit batch mode if active
+            if (batchModeRef.current) {
+                batchModeRef.current = false;
+                batchStartIndexRef.current = null;
+                batchStartStateRef.current = null;
+            }
+            // Update history state with backend data
+            setHistory(backendHistoryEntries);
+            setCurrentIndex(Math.max(0, currentTaskIndex));
+            console.log(`📍 Setting current index to: ${Math.max(0, currentTaskIndex)} (task_id: ${historyResponse.current_task_id})`);
+            setCurrentState(backendHistoryEntries[Math.max(0, currentTaskIndex)].state);
+            console.log(`✅ Successfully synced ${backendHistoryEntries.length} history entries from backend`);
+            console.log(`📍 Set current index to: ${Math.max(0, currentTaskIndex)} (task_id: ${historyResponse.current_task_id})`);
+        }
+        catch (error) {
+            console.error('❌ Failed to sync history from backend:', error);
+            throw error;
+        }
+    }, [internalOptions]);
     // History info object
     const historyInfo = useMemo(() => ({
         canUndo: currentIndex > 0,
@@ -425,60 +548,15 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         clearHistory,
         getHistory,
         trimHistory,
-        syncHistory
-    }), [pushState, undo, redo, reset, jumpToIndex, clearHistory, getHistory, trimHistory, syncHistory]);
-    // Force sync current state to backend
-    const syncToBackend = useCallback(async () => {
-        if (internalOptions.controller && internalOptions.firebaseUid && internalOptions.currentImageId) {
-            try {
-                console.log('🔄 Force syncing current state to backend');
-                // Check if we're in middle of history (not at the latest)
-                const wasInMiddleOfHistory = currentIndex < history.length - 1;
-                let replaceFromTaskId;
-                if (wasInMiddleOfHistory) {
-                    // Get the task_id from the current history entry to use as replace_from
-                    const currentHistoryEntry = history[currentIndex];
-                    replaceFromTaskId = currentHistoryEntry?.taskId;
-                    console.log(`📍 In middle of history (index ${currentIndex}), using replace_from: ${replaceFromTaskId}`);
-                }
-                // Generate a unique task ID for this sync
-                const taskId = `task_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-                const createEditorConfigPayload = {
-                    gallery_id: internalOptions.currentImageId,
-                    task_id: taskId,
-                    color_adjustment: convertAdjustmentStateToColorAdjustment(currentState),
-                    ...(replaceFromTaskId && { replace_from: replaceFromTaskId })
-                };
-                await internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, createEditorConfigPayload);
-                console.log('✅ Successfully synced current state to backend');
-                // Update the current history entry with the new task ID
-                setHistory(prevHistory => {
-                    const newHistory = [...prevHistory];
-                    if (newHistory[currentIndex]) {
-                        newHistory[currentIndex] = {
-                            ...newHistory[currentIndex],
-                            taskId: taskId
-                        };
-                    }
-                    return newHistory;
-                });
-            }
-            catch (error) {
-                console.error('❌ Failed to sync current state to backend:', error);
-                throw error;
-            }
-        }
-        else {
-            console.warn('⚠️ Controller, firebaseUid, or currentImageId not provided - skipping backend sync');
-        }
-    }, [currentState, currentIndex, history, internalOptions]);
+        syncHistory,
+        syncFromBackend
+    }), [pushState, undo, redo, reset, jumpToIndex, clearHistory, getHistory, trimHistory, syncHistory, syncFromBackend]);
     // Config object - stabilized with useMemo
     const config = useMemo(() => ({
         setMaxSize,
         setBatchMode,
-        getMemoryUsage,
-        syncToBackend
-    }), [setMaxSize, setBatchMode, getMemoryUsage, syncToBackend]);
+        getMemoryUsage
+    }), [setMaxSize, setBatchMode, getMemoryUsage]);
     // Apply max size enforcement when history changes
     useEffect(() => {
         enforceMaxSize();

package/dist/lib/hooks/useEditorHeadless.js

@@ -125,7 +125,7 @@ export function useEditorHeadless(options = {}) {
                     console.debug('HonchoEditor instance created successfully');
                 }
                 console.debug('Initializing HonchoEditor...');
-                await editorRef.current.initialize(false);
+                await editorRef.current.initialize(true);
                 console.debug('HonchoEditor initialized successfully');
                 setIsReady(true);
             }

package/package.json

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