@yogiswara/honcho-editor-ui 3.6.7 → 3.6.9

package/dist/components/editor/HImageEditorSkeleton.js

@@ -23,7 +23,7 @@ export default function HImageEditorSkeleton(props) {
                                     transform: 'scale(0.92)',
                                 },
                                 transition: 'transform 0.1s ease-in-out',
-                            }, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 0.1, sx: { pt: !isMobile ? "0px" : "2px", pr: isMobile ? "10px" : "5px" }, children: _jsx(Skeleton, { variant: "rounded", width: "131px", height: "18px", 
+                            }, children: _jsx(CardMedia, { title: "back", src: "svg/Back.svg", component: "img" }) }) }), _jsx(Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 0.1, sx: { pt: !isMobile ? "0px" : "2px", pr: isMobile ? "10px" : "6px" }, children: _jsx(Skeleton, { variant: "rounded", width: "110px", height: "18px", 
                             // animation="wave"
                             sx: {
                                 bgcolor: alpha(colors.background, 0.1),
@@ -38,35 +38,35 @@ export default function HImageEditorSkeleton(props) {
                             position: 'inherit',
                             right: '40px',
                             top: '55px',
-                            width: '250px',
+                            width: '272px',
                             pt: '4px',
                             height: 'calc(100vh - 70px)',
                             zIndex: 1200,
                             backgroundColor: '#000000',
                             overflow: 'hidden',
-                        }, children: _jsxs(Stack, { direction: "row", sx: { height: '100%', p: "0px" }, children: [_jsxs(Stack, { direction: "column", sx: { height: '95%' }, children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "178px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) })] }), _jsxs(Stack, { justifyContent: "flex-start", 
+                        }, children: _jsxs(Stack, { direction: "row", sx: { height: '100%', p: "0px" }, children: [_jsxs(Stack, { direction: "column", sx: { height: '95%' }, children: [_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "198px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "198px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "198px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "198px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', p: "0px", pt: "8px" }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', py: "6px", gap: "8px" }, children: [_jsx(Skeleton, { variant: "rounded", width: "198px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.1), } }), _jsx(Skeleton, { variant: "rounded", width: "198px", height: "18px", sx: { bgcolor: alpha(colors.background, 0.07), } })] }) })] }), _jsxs(Stack, { justifyContent: "flex-start", 
                                     // spacing={"15px"}
                                     sx: {
-                                        width: '10px',
+                                        // width: '10px',
                                         flexShrink: 0,
                                         pt: "0px",
-                                        pl: "9px",
+                                        pl: "8px",
                                     }, children: [_jsx(Box, { sx: {
                                                 width: "50px",
-                                                height: "52px",
+                                                height: "48px",
                                                 py: "17px",
                                                 px: "16px",
-                                            }, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
+                                            }, children: _jsx(Skeleton, { variant: "circular", width: 20, height: 20, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
                                                 width: "50px",
-                                                height: "52px",
+                                                height: "48px",
                                                 py: "17px",
                                                 px: "16px",
-                                            }, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
+                                            }, children: _jsx(Skeleton, { variant: "circular", width: 20, height: 20, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Box, { sx: {
                                                 width: "50px",
-                                                height: "52px",
+                                                height: "48px",
                                                 py: "17px",
                                                 px: "16px",
-                                            }, children: _jsx(Skeleton, { variant: "circular", width: 18, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] })] }) })), isMobile && (_jsx(Paper, { elevation: 0, sx: {
+                                            }, children: _jsx(Skeleton, { variant: "circular", width: 20, height: 20, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] })] }) })), isMobile && (_jsx(Paper, { elevation: 0, sx: {
                             position: 'fixed',
                             bottom: 0,
                             left: 0,
@@ -78,10 +78,10 @@ export default function HImageEditorSkeleton(props) {
                                         pt: "110px",
                                         // px: "143px",
                                         gap: "10px"
-                                    }, children: _jsx(Skeleton, { variant: "rounded", width: "156px", height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: {
-                                        pt: "6px",
-                                        pb: "13px",
+                                    }, children: _jsx(Skeleton, { variant: "rounded", width: "260px", height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) }), _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: {
+                                        pt: "24px",
+                                        pb: "16px",
                                         px: "16px",
                                         gap: "24px"
-                                    }, children: _jsx(Skeleton, { variant: "rounded", width: 74, height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] }) }))] })] }));
+                                    }, children: _jsx(Skeleton, { variant: "rounded", width: "88px", height: 18, sx: { bgcolor: alpha(colors.background, 0.1), } }) })] }) }))] })] }));
 }

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

@@ -32,43 +32,26 @@ export interface CopyCheckboxes {
         sharpness: boolean;
     };
 }
-/**
- * Helper function to create selective adjustments based on checkboxes
- */
-/**
- * Hook for bulk photo editing with multi-image backend synchronization.
- *
- * **Multi-Image Backend Sync:**
- * - Each selected image maintains its own history and backend state
- * - History operations (undo/redo) trigger separate controller.setHistoryIndex() calls for each selected image
- * - Preset application triggers separate controller.createEditorConfig() calls for each selected image
- * - Adjustment changes trigger separate controller.createEditorConfig() calls for each selected image
- *
- * **Key Features:**
- * - Individual history tracking per image with backend persistence
- * - Bulk operations that respect per-image differences
- * - Automatic backend synchronization for all state changes
- * - Comprehensive logging of multi-image operations
- */
-export declare function useHonchoEditorBulk(controller: Controller, eventID: string, firebaseUid: string): {
+export interface UseHonchoEditorBulkReturn {
     imageData: PhotoData[];
     isLoading: boolean;
     isLoadingMore: boolean;
     error: string | null;
     selectedIds: string[];
     hasMore: boolean;
+    gallerySetupData: GallerySetup[];
     handleBackCallbackBulk: () => void;
+    handleToggleImageSelection: (imageId: string) => Promise<void>;
+    handleLoadMore: () => Promise<void>;
+    handleRefresh: () => Promise<void>;
+    clearSelection: () => void;
+    selectAllImages: () => void;
     presets: Preset[];
     selectedBulkPreset: string;
     activePreset: Preset | null;
     presetSummary: string;
     handleSelectBulkPreset: (presetId: string) => void;
-    clearSelection: () => void;
-    selectAllImages: () => void;
-    presetActions: import("../usePreset").PresetActions;
-    handleToggleImageSelection: (imageId: string) => Promise<void>;
-    handleLoadMore: () => Promise<void>;
-    handleRefresh: () => Promise<void>;
+    presetActions: any;
     handleBulkTempDecreaseMax: () => void;
     handleBulkTempDecrease: () => void;
     handleBulkTempIncrease: () => void;
@@ -135,5 +118,41 @@ export declare function useHonchoEditorBulk(controller: Controller, eventID: str
     adjustSelected: (delta: Partial<AdjustmentState>) => void;
     adjustSelectedWithPreset: (presetAdjustments: AdjustmentState, presetId: string) => void;
     adjustSelectedWithPaste: (adjustments: Partial<AdjustmentState>) => void;
-    gallerySetupData: GallerySetup[];
-};
+    readyState: {
+        isReady: boolean;
+        isLoading: boolean;
+        operations: {
+            paging: {
+                isReady: boolean;
+                isLoading: boolean;
+            };
+            history: {
+                isReady: boolean;
+                isLoading: boolean;
+            };
+            presets: {
+                isReady: boolean;
+                isLoading: boolean;
+            };
+        };
+    };
+}
+/**
+ * Helper function to create selective adjustments based on checkboxes
+ */
+/**
+ * Hook for bulk photo editing with multi-image backend synchronization.
+ *
+ * **Multi-Image Backend Sync:**
+ * - Each selected image maintains its own history and backend state
+ * - History operations (undo/redo) trigger separate controller.setHistoryIndex() calls for each selected image
+ * - Preset application triggers separate controller.createEditorConfig() calls for each selected image
+ * - Adjustment changes trigger separate controller.createEditorConfig() calls for each selected image
+ *
+ * **Key Features:**
+ * - Individual history tracking per image with backend persistence
+ * - Bulk operations that respect per-image differences
+ * - Automatic backend synchronization for all state changes
+ * - Comprehensive logging of multi-image operations
+ */
+export declare function useHonchoEditorBulk(controller: Controller, eventID: string, firebaseUid: string): UseHonchoEditorBulkReturn;

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -150,7 +150,7 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
         autoReset: false, // Prevent auto-reset to avoid loops
     });
     // Preset management
-    const { presets, actions: presetActions } = usePreset(controller, firebaseUid, {
+    const { presets, info: presetInfo, actions: presetActions } = usePreset(controller, firebaseUid, {
         autoLoad: true,
     });
     // Track which images have been synced to prevent loops
@@ -176,6 +176,47 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
         }
         return true;
     };
+    const readyState = useMemo(() => {
+        const paging = {
+            isReady: info.isReady ?? (info.isInitialized && !info.isLoading && info.error === null),
+            isLoading: info.isLoading,
+        };
+        log.debug("[useHonchoEditorBulk] 📊 Paging state");
+        const history = {
+            isReady: state.isReady ?? true, // History sync happens on-demand, not blocking
+            isLoading: state.isLoading ?? false
+        };
+        log.debug("[useHonchoEditorBulk] 📊 History state");
+        const presets = {
+            isReady: presetInfo.isReady ?? (presetInfo.isInitialized && !presetInfo.isLoading),
+            isLoading: presetInfo.isLoading
+        };
+        log.debug("[useHonchoEditorBulk] 📊 Preset state");
+        const allReady = paging.isReady && history.isReady && presets.isReady;
+        const anyLoading = paging.isLoading || history.isLoading || presets.isLoading;
+        log.debug({
+            paging: { isReady: paging.isReady, isLoading: paging.isLoading },
+            history: { isReady: history.isReady, isLoading: history.isLoading },
+            presets: { isReady: presets.isReady, isLoading: presets.isLoading },
+            allReady,
+            anyLoading
+        }, '[useHonchoEditorBulk] 📊 Ready state computed');
+        return {
+            isReady: allReady,
+            isLoading: anyLoading,
+            operations: { paging, history, presets }
+        };
+    }, [
+        info.isReady,
+        info.isInitialized,
+        info.isLoading,
+        info.error,
+        state.isReady,
+        state.isLoading,
+        presetInfo.isReady,
+        presetInfo.isInitialized,
+        presetInfo.isLoading
+    ]);
     // Calculate active preset based on preset_id from history (not value comparison)
     const { activePreset, presetSummary } = useMemo(() => {
         if (selectedIds.length === 0) {
@@ -591,5 +632,6 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
         adjustSelectedWithPaste: batchActions.adjustSelectedWithPaste,
         // Gallery setup data for AlbumImageGalleryInfinite
         gallerySetupData,
+        readyState,
     };
 }

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

@@ -21,6 +21,24 @@ export interface UseHonchoEditorSingleState {
     activePreset: Preset | null;
     presetsLoading: boolean;
     presetsError: string | null;
+    readyState: {
+        isReady: boolean;
+        isLoading: boolean;
+        operations: {
+            gallery: {
+                isReady: boolean;
+                isLoading: boolean;
+            };
+            adjustments: {
+                isReady: boolean;
+                isLoading: boolean;
+            };
+            presets: {
+                isReady: boolean;
+                isLoading: boolean;
+            };
+        };
+    };
 }
 export interface UseHonchoEditorSingleActions {
     navigateNext: () => void;

package/dist/hooks/editor/useHonchoEditorSingle.js

@@ -3,6 +3,7 @@ import { useEffect, useCallback, useMemo } from 'react';
 import { useAdjustmentHistory } from '../useAdjustmentHistory';
 import { useGallerySwipe } from '../useGallerySwipe';
 import { usePreset } from '../usePreset';
+import { log } from '../../utils/logger';
 // Default adjustment values
 const initialAdjustments = {
     tempScore: 0, tintScore: 0, vibranceScore: 0, saturationScore: 0,
@@ -23,9 +24,9 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
     // loop on every 5 seconds to refresh the backend()
     useEffect(() => {
         if (gallerySwipe.currentImageData?.id) {
-            console.log('Syncing adjustment history from backend for image ID:', gallerySwipe.currentImageData.id);
+            log.debug({ imageId: gallerySwipe.currentImageData.id }, 'Syncing adjustment history from backend for image ID:');
             adjustmentHistory.actions.syncFromBackend()
-                .then(() => { console.log('Adjustment history synced from backend'); })
+                .then(() => { log.debug('Adjustment history synced from backend'); })
                 .catch(console.error);
         }
     }, [gallerySwipe.currentImageData?.id]);
@@ -80,7 +81,7 @@ 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');
+        log.debug('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);
@@ -90,7 +91,7 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
         await presetHook.actions.load();
     }, [presetHook.actions.load]);
     const applyPreset = useCallback(async (preset) => {
-        console.log('Applying preset:', preset.name);
+        log.debug({ presetName: preset.name }, 'Applying preset:');
         const adjustmentState = {
             tempScore: preset.temperature,
             tintScore: preset.tint,
@@ -105,7 +106,9 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
             clarityScore: preset.clarity,
             sharpnessScore: preset.sharpness,
         };
-        console.log('Applying preset:', preset.name, 'with adjustments:', adjustmentState);
+        log.debug({ presetName: preset.name }, `Applying preset:`);
+        log.debug({ adjustmentState }, `with adjustments:`);
+        // '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);
@@ -120,6 +123,32 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
     const deletePreset = useCallback(async (presetId) => {
         await presetHook.actions.delete(presetId);
     }, [presetHook.actions.delete]);
+    const readyState = useMemo(() => {
+        const gallery = {
+            isReady: !gallerySwipe.isLoading && gallerySwipe.currentImageData !== null,
+            isLoading: gallerySwipe.isLoading
+        };
+        const adjustments = {
+            isReady: adjustmentHistory.historyInfo.isReady,
+            isLoading: adjustmentHistory.historyInfo.isLoading
+        };
+        const presets = {
+            isReady: presetHook.info.isReady,
+            isLoading: presetHook.info.isLoading
+        };
+        return {
+            isReady: gallery.isReady && adjustments.isReady && presets.isReady,
+            isLoading: gallery.isLoading || adjustments.isLoading || presets.isLoading,
+            operations: { gallery, adjustments, presets }
+        };
+    }, [
+        gallerySwipe.isLoading,
+        gallerySwipe.currentImageData,
+        adjustmentHistory.historyInfo.isReady,
+        adjustmentHistory.historyInfo.isLoading,
+        presetHook.info.isReady,
+        presetHook.info.isLoading
+    ]);
     const getEditorAdjustments = useCallback(() => {
         const adjustments = adjustmentHistory.currentState;
         return {
@@ -183,6 +212,7 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
         activePreset: activePreset || null,
         presetsLoading: presetHook.info.isLoading,
         presetsError: presetHook.info.error,
+        readyState,
     };
     return {
         state,

package/dist/hooks/useAdjustmentHistory.d.ts

@@ -27,6 +27,10 @@ export interface HistoryInfo {
     historySize: number;
     /** Whether batch mode is currently active */
     isBatchMode: boolean;
+    /** Whether the history has been synced from backend at least once */
+    isReady: boolean;
+    /** Whether the history is currently syncing from backend */
+    isLoading: boolean;
 }
 /**
  * Actions available for history management

package/dist/hooks/useAdjustmentHistory.js

@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
+import { log } from '../utils/logger';
 /**
  * Convert AdjustmentState to ColorAdjustment format for backend
  */
@@ -122,6 +123,9 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         lastUpdateTime: Date.now(),
         largeHistoryWarningShown: false
     });
+    // Syncing from backend state
+    const [isSyncingFromBackend, setIsSyncingFromBackend] = useState(false);
+    const [hasSyncedOnce, setHasSyncedOnce] = useState(false);
     // Sync currentState with history when not in batch mode
     // useEffect(() => {
     //     if (!batchModeRef.current) {
@@ -494,6 +498,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             console.warn('⚠️ syncFromBackend: Controller, firebaseUid, or currentImageId not provided - cannot sync from backend');
             return;
         }
+        setIsSyncingFromBackend(true);
         try {
             console.log('🔄 Syncing history from backend using getEditorHistory');
             const historyResponse = await internalOptions.controller.getEditorHistory(internalOptions.firebaseUid, internalOptions.currentImageId);
@@ -562,11 +567,16 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             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})`);
+            setHasSyncedOnce(true); // NEW: Mark as synced
+            log.info('✅ Successfully synced history from backend');
         }
         catch (error) {
-            console.error('❌ Failed to sync history from backend:', error);
+            log.error({ error }, '❌ Failed to sync history from backend');
             throw error;
         }
+        finally {
+            setIsSyncingFromBackend(false); // NEW: Track sync end
+        }
     }, [internalOptions]);
     // Update specific history entry from backend without changing current index
     const updateFromBackend = useCallback((imageId, adjustmentTaskId, adjustment) => {
@@ -625,8 +635,10 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         currentIndex: currentIndex,
         totalStates: history.length,
         historySize: getMemoryUsage(),
-        isBatchMode: batchModeRef.current
-    }), [history.length, getMemoryUsage, currentIndex]);
+        isBatchMode: batchModeRef.current,
+        isReady: hasSyncedOnce && !isSyncingFromBackend,
+        isLoading: isSyncingFromBackend
+    }), [history.length, getMemoryUsage, currentIndex, hasSyncedOnce, isSyncingFromBackend]);
     // Actions object - stabilized with useMemo
     const actions = useMemo(() => ({
         pushState,

package/dist/hooks/useAdjustmentHistoryBatch.d.ts

@@ -68,6 +68,12 @@ export interface BatchHistoryState {
     totalImages: number;
     /** Current size of history in memory */
     historySize: number;
+    /** Whether the hook is operating in batch mode */
+    isReady: boolean;
+    /** Whether the hook is currently syncing with backend */
+    isLoading: boolean;
+    /** Whether the hook is currently syncing adjustments with backend */
+    isSyncing: boolean;
 }
 /**
  * Actions available for batch history management

package/dist/hooks/useAdjustmentHistoryBatch.js

@@ -130,6 +130,8 @@ export function useAdjustmentHistoryBatch(controller, firebaseUid, eventId, opti
     // Configuration refs
     const maxSizeRef = useRef(internalOptions.maxSize);
     const devWarningsRef = useRef(internalOptions.devWarnings);
+    const [isSyncingHistory, setIsSyncingHistory] = useState(false);
+    const [hasInitialSync, setHasInitialSync] = useState(false);
     // Helper function to rebuild currentBatch from imageHistories
     const rebuildCurrentBatch = useCallback(() => {
         log.debug({
@@ -1489,6 +1491,7 @@ export function useAdjustmentHistoryBatch(controller, firebaseUid, eventId, opti
             }
             return;
         }
+        setIsSyncingHistory(true);
         try {
             log.info({ imageId }, `[useAdjustmentHistoryBatch] 🔄 Syncing history for image`);
             const historyResponse = await internalOptions.controller.getEditorHistory(internalOptions.firebaseUid, imageId);
@@ -1528,10 +1531,15 @@ export function useAdjustmentHistoryBatch(controller, firebaseUid, eventId, opti
                 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
             });
+            setHasInitialSync(true); // NEW: Mark as synced at least once
+            log.info({ imageId }, `[useAdjustmentHistoryBatch] ✅ History synced successfully`);
         }
         catch (error) {
             log.error({ imageId, error }, `[useAdjustmentHistoryBatch] ❌ Failed to sync history for image`);
         }
+        finally {
+            setIsSyncingHistory(false); // NEW: Track sync end
+        }
     }, [internalOptions, mapColorAdjustmentToAdjustmentState]);
     // Sync history for all images that have updates since last timestamp
     const syncHistoryFromBackendAll = useCallback(async () => {
@@ -1590,8 +1598,11 @@ export function useAdjustmentHistoryBatch(controller, firebaseUid, eventId, opti
         totalStates: imageHistories.reduce((sum, h) => sum + h.history.length, 0),
         selectedCount: selectedIds.length,
         totalImages: allImageIds.length,
-        historySize: getMemoryUsage()
-    }), [currentBatch, selectedIds, allImageIds, canUndoSelected, canRedoSelected, imageHistories, getMemoryUsage]);
+        historySize: getMemoryUsage(),
+        isReady: hasInitialSync && !isSyncingHistory,
+        isLoading: isSyncingHistory,
+        isSyncing: isSyncingHistory
+    }), [currentBatch, selectedIds, allImageIds, canUndoSelected, canRedoSelected, imageHistories, getMemoryUsage, hasInitialSync, isSyncingHistory]);
     // Update state from socket - handles both selected and non-selected images
     const updateFromSocket = useCallback(async (imageId, adjustmentTaskId, adjustment, preset_id) => {
         log.info({

package/dist/hooks/useGallerySwipe.d.ts

@@ -19,6 +19,10 @@ interface UseGallerySwipeReturn {
     isLoading: boolean;
     /** Error message if any operation fails */
     error: string | null;
+    /** Overall readiness state of the hook */
+    isReady: boolean;
+    /** Indicates if there was an error during initialization */
+    hasError: boolean;
 }
 /**
  * Custom hook for handling image gallery navigation with automatic pagination

package/dist/hooks/useGallerySwipe.js

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from "react";
+import { log } from '../utils/logger';
 /**
  * Custom hook for handling image gallery navigation with automatic pagination
  *
@@ -76,7 +77,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
                 }
             }
             catch (err) {
-                console.error(`Error fetching page ${page}:`, err);
+                log.error({ page, err }, `Error fetching page`);
                 break;
             }
         }
@@ -104,7 +105,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             }
         }
         catch (err) {
-            console.error('Error loading next page:', err);
+            log.error({ err }, 'Error loading next page');
         }
         return [];
     }, [hasNextPage, currentEventId, controller, firebaseUid, currentPage]);
@@ -147,7 +148,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             // Step 3: Get complete image list by searching through pages
             // This ensures we have navigation context for the current image
             const allImages = await getImageListUntilFound(initImageId, gallery.event_id);
-            console.log("Print all images Id: ", allImages.map(image => image.id).join(', '));
+            log.debug({ imageIds: allImages.map(image => image.id) }, "Print all images Id");
             setCurrentImageList(allImages);
             // Step 4: Update tracking refs to prevent unnecessary re-initialization
             prevFirebaseUid.current = firebaseUid;
@@ -157,7 +158,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
             setError(errorMessage);
-            console.error('Error initializing gallery:', err);
+            log.error({ err }, 'Error initializing gallery');
         }
         finally {
             setIsLoading(false);
@@ -179,19 +180,20 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         setError(null);
         try {
             // Debug logging
-            console.log("=== SWIPE NEXT DEBUG ===");
-            console.log("currentImageId:", currentImageId);
-            console.log("currentImageList length:", currentImageList.length);
-            console.log("currentImageList IDs:", currentImageList.map(img => img.id).join(", "));
+            log.debug({
+                currentImageId,
+                currentImageListLength: currentImageList.length,
+                currentImageListIds: currentImageList.map(img => img.id),
+                currentIndex: getCurrentImageIndex()
+            }, "=== SWIPE NEXT DEBUG ===");
             // Calculate current index
             const currentIndex = getCurrentImageIndex();
-            console.log("Current index: ", currentIndex);
             if (currentIndex === -1) {
                 throw new Error('Current image not found in list');
             }
             // Scenario 1: At the last image of current list
             if (currentIndex === currentImageList.length - 1) {
-                console.log("[SCENARIO 1] if last image: " + currentImageList.length);
+                log.debug({ currentImageListLength: currentImageList.length }, "[SCENARIO 1] if last image");
                 // Try to load next page for more images
                 const newImages = await loadNextPage();
                 if (newImages.length > 0) {
@@ -200,7 +202,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
                     setCurrentImageList(updatedList);
                     // Navigate to first image of the new page
                     const nextImage = newImages[0];
-                    console.log("Setting currentImageId to:", nextImage.id);
+                    log.debug({ nextImageId: nextImage.id }, "Setting currentImageId to");
                     setCurrentImageId(nextImage.id);
                     // Fetch complete data for the new current image
                     const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);
@@ -216,8 +218,11 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             else {
                 // Scenario 2: Navigate to next image in current list
                 const nextImage = currentImageList[currentIndex + 1];
-                console.log("[SCENARIO 2] Navigating to next image:", nextImage.id);
-                console.log("Setting currentImageId from", currentImageId, "to", nextImage.id);
+                log.debug({
+                    nextImageId: nextImage.id,
+                    fromImageId: currentImageId,
+                    toImageId: nextImage.id
+                }, "[SCENARIO 2] Navigating to next image");
                 setCurrentImageId(nextImage.id);
                 // Fetch complete data for the next image
                 const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);
@@ -229,7 +234,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Error moving to next image';
             setError(errorMessage);
-            console.error('Error in onSwipeNext:', err);
+            log.error({ err }, 'Error in onSwipeNext');
         }
         finally {
             setIsLoading(false);
@@ -272,7 +277,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         catch (err) {
             const errorMessage = err instanceof Error ? err.message : 'Error moving to previous image';
             setError(errorMessage);
-            console.error('Error in onSwipePrev:', err);
+            log.error({ err }, 'Error in onSwipePrev');
         }
         finally {
             setIsLoading(false);
@@ -326,7 +331,7 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
             // Additional check: only update if this is truly an external change
             // If prevInitImageId is different from initImageId, it's an external change
             if (prevInitImageId.current !== initImageId) {
-                console.log("External initImageId change detected, updating currentImageId");
+                log.debug({ oldImageId: prevInitImageId.current, newImageId: initImageId }, "External initImageId change detected, updating currentImageId");
                 setCurrentImageId(initImageId);
             }
         }
@@ -339,6 +344,8 @@ export function useGallerySwipe(firebaseUid, initImageId, controller) {
         onSwipeNext,
         onSwipePrev,
         isLoading,
-        error
+        error,
+        isReady: isInitialized && currentImageData !== null && !isLoading,
+        hasError: error !== null
     };
 }

package/dist/hooks/usePaging.d.ts

@@ -29,6 +29,8 @@ export interface PagingInfo {
     totalImages: number;
     /** Whether the hook has been initialized */
     isInitialized: boolean;
+    /** Whether the hook is ready to use */
+    isReady: boolean;
 }
 /**
  * Actions available for paging management

package/dist/hooks/usePaging.js

@@ -195,7 +195,8 @@ export function usePaging(controller, firebaseUid, eventId, options = {}) {
         currentPage,
         hasMore,
         totalImages: images.length,
-        isInitialized
+        isInitialized,
+        isReady: isInitialized && isLoading
     }), [isLoading, isLoadingMore, error, currentPage, hasMore, images.length, isInitialized]);
     // Actions object - memoized to prevent re-renders
     const actions = useMemo(() => ({

package/dist/hooks/usePreset.d.ts

@@ -43,7 +43,10 @@ export interface UsePresetReturn {
     /** Current list of presets */
     presets: Preset[];
     /** Information about preset state */
-    info: PresetInfo;
+    info: PresetInfo & {
+        /** Ready state - true when presets are loaded and not loading */
+        isReady: boolean;
+    };
     /** Available preset actions */
     actions: PresetActions;
 }

package/dist/hooks/usePreset.js

@@ -1,4 +1,5 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { log } from '../utils/logger';
 /**
  * Hook for managing presets with backend communication through Controller.
  *
@@ -45,7 +46,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
     // Helper function to log debug messages - memoized to prevent re-renders
     const debugLog = useCallback((message, data) => {
         if (memoizedOptions.devWarnings) {
-            console.log(`[usePreset] ${message}`, data || '');
+            log.debug({ data }, `[usePreset] ${message}`);
         }
     }, [memoizedOptions.devWarnings]);
     // Stable references for controller and firebaseUid to detect actual changes
@@ -69,7 +70,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
     }, [debugLog]);
     // Load presets from backend
     const load = useCallback(async () => {
-        console.log("Load Presets Get Function Called");
+        log.info("Load Presets Get Function Called");
         if (!stableControllerRef.current || !stableFirebaseUidRef.current) {
             debugLog('Load skipped: missing controller or firebaseUid');
             return;
@@ -118,7 +119,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
     }, [debugLog, isInitialized]);
     // Create a new preset
     const create = useCallback(async (name, settings) => {
-        console.log("Create Preset Get Function Called");
+        log.info("Create Preset Get Function Called");
         if (!stableControllerRef.current || !stableFirebaseUidRef.current) {
             debugLog('Create skipped: missing controller or firebaseUid');
             return null;
@@ -212,7 +213,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
     }, [presets, debugLog, handleError]);
     // Delete a preset
     const deletePreset = useCallback(async (presetId) => {
-        console.log("Delete Presets Get Function Called");
+        log.info("Delete Presets Get Function Called");
         if (!stableControllerRef.current || !stableFirebaseUidRef.current) {
             debugLog('Delete skipped: missing controller or firebaseUid');
             return false;
@@ -242,9 +243,13 @@ export function usePreset(controller, firebaseUid, options = {}) {
     }, [presets, debugLog, handleError]);
     // Find preset that matches the given adjustment state
     const findByAdjustments = useCallback((adjustments) => {
-        // Helper function to normalize adjustment values (treat null/undefined as 0)
+        // Helper function to normalize adjustment values (treat null/undefined as 0, convert strings to numbers)
         const normalizeValue = (value) => {
-            return value ?? 0;
+            if (value == null)
+                return 0;
+            if (typeof value === 'string')
+                return parseFloat(value) || 0;
+            return value;
         };
         // Helper function to convert Preset to AdjustmentState for comparison
         const presetToAdjustmentState = (preset) => {
@@ -325,7 +330,8 @@ export function usePreset(controller, firebaseUid, options = {}) {
         isLoading,
         error,
         count: Array.isArray(presets) ? presets.length : 0,
-        isInitialized
+        isInitialized,
+        isReady: isInitialized && !isLoading && error === null
     }), [isLoading, error, presets, isInitialized]);
     // Actions object - memoized to prevent re-renders when functions don't change
     const actions = useMemo(() => ({
@@ -338,7 +344,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
     // Return object - memoized to prevent re-renders when values don't change
     return useMemo(() => ({
         presets,
-        info,
+        info: { ...info, isReady: info.isInitialized && !info.isLoading && info.error === null },
         actions
     }), [presets, info, actions]);
 }

package/package.json

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