@yogiswara/honcho-editor-ui 3.8.1 → 3.8.3

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

@@ -12,14 +12,6 @@ export interface PhotoData {
     isSelected: boolean;
     adjustments?: Partial<AdjustmentValues>;
 }
-export interface GalleryDataProps {
-    photos: any[];
-    isLoading: boolean;
-    isLoadingMore: boolean;
-    hasMore: boolean;
-    loadMore: () => void;
-    reloadGallery: () => void;
-}
 export interface CopyCheckboxes {
     color: {
         temperature: boolean;
@@ -163,4 +155,4 @@ export interface UseHonchoEditorBulkReturn {
  * - Automatic backend synchronization for all state changes
  * - Comprehensive logging of multi-image operations
  */
-export declare function useHonchoEditorBulk(controller: Controller, eventID: string, firebaseUid: string, galleryHookData: GalleryDataProps): UseHonchoEditorBulkReturn;
+export declare function useHonchoEditorBulk(controller: Controller, eventID: string, firebaseUid: string): UseHonchoEditorBulkReturn;

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -1,6 +1,7 @@
 'use client';
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useAdjustmentHistoryBatch } from '../useAdjustmentHistoryBatch';
+import { usePaging } from "../usePaging";
 import { usePreset } from "../usePreset";
 import { mapAdjustmentStateToAdjustmentEditor } from "../../utils/adjustment";
 import { log } from '../../utils/logger';
@@ -141,16 +142,13 @@ const getCurrentAdjustmentsForCopy = (selectedIds, currentBatch) => {
  * - Automatic backend synchronization for all state changes
  * - Comprehensive logging of multi-image operations
  */
-export function useHonchoEditorBulk(controller, eventID, firebaseUid, galleryHookData) {
+export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
     const { state, actions: batchActions } = useAdjustmentHistoryBatch(controller, firebaseUid, eventID);
     const { currentBatch, selectedIds } = state;
-    // const { images, info, actions } = usePaging(controller, firebaseUid, eventID, {
-    //     autoLoad: true,
-    //     autoReset: false,  // Prevent auto-reset to avoid loops
-    // });
-    const images = useMemo(() => {
-        return galleryHookData.photos.map(p => p.value || p);
-    }, [galleryHookData.photos]);
+    const { images, info, actions } = usePaging(controller, firebaseUid, eventID, {
+        autoLoad: true,
+        autoReset: false, // Prevent auto-reset to avoid loops
+    });
     // Preset management
     const { presets, info: presetInfo, actions: presetActions } = usePreset(controller, firebaseUid, {
         autoLoad: true,
@@ -180,12 +178,12 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid, galleryHoo
     };
     const readyState = useMemo(() => {
         const paging = {
-            isReady: !galleryHookData.isLoading, // Simplified ready check
-            isLoading: galleryHookData.isLoading,
+            isReady: info.isReady ?? (info.isInitialized && !info.isLoading && info.error === null),
+            isLoading: info.isLoading,
         };
         log.debug("[useHonchoEditorBulk] 📊 Paging state");
         const history = {
-            isReady: state.isReady ?? true,
+            isReady: state.isReady ?? true, // History sync happens on-demand, not blocking
             isLoading: state.isLoading ?? false
         };
         log.debug("[useHonchoEditorBulk] 📊 History state");
@@ -193,15 +191,26 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid, galleryHoo
             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 }
         };
     }, [
-        galleryHookData.isLoading, // Updated dependency
+        info.isReady,
+        info.isInitialized,
+        info.isLoading,
+        info.error,
         state.isReady,
         state.isLoading,
         presetInfo.isReady,
@@ -287,9 +296,9 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid, galleryHoo
         }, '[useHonchoEditorBulk] 🎨 Preset selection updated');
     }, [activePreset]);
     // Use loading states from usePaging instead of local state
-    const isLoading = galleryHookData.isLoading;
-    const error = null;
-    const hasMore = galleryHookData.hasMore;
+    const isLoading = info.isLoading;
+    const error = info.error;
+    const hasMore = info.hasMore;
     const imageData = useMemo(() => {
         const res = images.map(item => {
             const basePhoto = mapGalleryToPhotoData(item, selectedIds);
@@ -527,7 +536,7 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid, galleryHoo
     return {
         imageData,
         isLoading,
-        isLoadingMore: galleryHookData.isLoadingMore,
+        isLoadingMore: info.isLoadingMore,
         error,
         selectedIds,
         hasMore,
@@ -545,8 +554,8 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid, galleryHoo
         // Preset creation handlers
         presetActions, // Expose preset actions for create/rename/delete
         handleToggleImageSelection: batchActions.toggleSelection,
-        handleLoadMore: async () => { galleryHookData.loadMore(); },
-        handleRefresh: async () => { galleryHookData.reloadGallery(); },
+        handleLoadMore: actions.loadMore,
+        handleRefresh: actions.refresh,
         // Adjustment
         handleBulkTempDecreaseMax,
         handleBulkTempDecrease,

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

@@ -47,7 +47,7 @@ export interface UseHonchoEditorSingleActions {
     setBatchMode: (enabled: boolean) => void;
     startBatchMode: () => void;
     endBatchMode: () => void;
-    updateFromSocket: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment) => void;
+    updateFromSocket: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment, preset_id?: string) => void;
     pushState: (state: AdjustmentState) => void;
     undo: () => void;
     redo: () => void;

package/dist/hooks/editor/useHonchoEditorSingle.js

@@ -166,8 +166,8 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
             sharpness: adjustments.sharpnessScore,
         };
     }, [adjustmentHistory.currentState]);
-    const updateFromSocket = useCallback((imageId, adjustmentTaskId, adjustment) => {
-        adjustmentHistory.actions.updateFromBackend(imageId, adjustmentTaskId, adjustment);
+    const updateFromSocket = useCallback((imageId, adjustmentTaskId, adjustment, preset_id) => {
+        adjustmentHistory.actions.updateFromBackend(imageId, adjustmentTaskId, adjustment, preset_id);
     }, [adjustmentHistory.actions.updateFromBackend]);
     const actions = {
         // Navigation

package/dist/hooks/useAdjustmentHistory.d.ts

@@ -53,7 +53,7 @@ export interface HistoryActions {
     /** Sync history from backend using getEditorHistory */
     syncFromBackend: () => Promise<void>;
     /** Update specific history entry from backend without changing current index */
-    updateFromBackend: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment) => void;
+    updateFromBackend: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment, preset_id?: string) => void;
 }
 /**
  * Configuration actions for runtime adjustment

package/dist/hooks/useAdjustmentHistory.js

@@ -22,7 +22,7 @@ const convertAdjustmentStateToColorAdjustment = (adjustmentState) => {
 /**
  * Convert ColorAdjustment from backend to AdjustmentState format
  */
-const convertColorAdjustmentToAdjustmentState = (colorAdjustment) => {
+const convertColorAdjustmentToAdjustmentState = (colorAdjustment, preset_id) => {
     return {
         tempScore: colorAdjustment.temperature,
         tintScore: colorAdjustment.tint,
@@ -36,6 +36,7 @@ const convertColorAdjustmentToAdjustmentState = (colorAdjustment) => {
         blacksScore: colorAdjustment.blacks,
         clarityScore: colorAdjustment.clarity,
         sharpnessScore: Math.max(0, Math.min(100, colorAdjustment.sharpness)),
+        preset_id: preset_id,
     };
 };
 /**
@@ -579,32 +580,32 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         }
     }, [internalOptions]);
     // Update specific history entry from backend without changing current index
-    const updateFromBackend = useCallback((imageId, adjustmentTaskId, adjustment) => {
+    const updateFromBackend = useCallback((imageId, adjustmentTaskId, adjustment, preset_id) => {
         // Ignore updates if imageID doesn't match current image
         if (imageId !== internalOptions.currentImageId) {
-            console.log(`🚫 updateFromBackend: Ignoring update for different image (${imageId} vs ${internalOptions.currentImageId})`);
+            log.debug({ receivedImageId: imageId, currentImageId: internalOptions.currentImageId }, '🚫 updateFromBackend: Ignoring update for different image');
             return;
         }
         // Ignore updates during batch mode
         if (batchModeRef.current) {
-            console.log(`🚫 updateFromBackend: Ignoring update during batch mode for taskId: ${adjustmentTaskId}`);
+            log.debug({ adjustmentTaskId }, '🚫 updateFromBackend: Ignoring update during batch mode for taskId');
             return;
         }
-        console.log(`🔄 updateFromBackend: Received update for taskId: ${adjustmentTaskId}, imageId: ${imageId}`);
+        log.info({ adjustmentTaskId, imageId, preset_id }, '🔄 updateFromBackend: Received update');
         // Convert ColorAdjustment to AdjustmentState
-        const updatedState = convertColorAdjustmentToAdjustmentState(adjustment);
+        const updatedState = convertColorAdjustmentToAdjustmentState(adjustment, preset_id);
         setHistory(prevHistory => {
             // Find the index of the task to update
             const taskIndex = prevHistory.findIndex(entry => entry.taskId === adjustmentTaskId);
             if (taskIndex === -1) {
                 // Task doesn't exist in current history, we need to sync from backend
                 // to get the complete history with proper chronological order
-                console.log(`📝 updateFromBackend: TaskId ${adjustmentTaskId} not found in current history, triggering sync from backend`);
+                log.info({ adjustmentTaskId }, '📝 updateFromBackend: TaskId not found in current history, triggering sync from backend');
                 // Don't modify history here, instead trigger a sync
                 // Use setTimeout to avoid calling async function inside setState
                 setTimeout(() => {
                     syncFromBackend().catch(error => {
-                        console.error('❌ Failed to sync history after unknown taskId:', error);
+                        log.error({ error, adjustmentTaskId }, '❌ Failed to sync history after unknown taskId');
                     });
                 }, 0);
                 // Return unchanged history for now
@@ -613,10 +614,10 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             // Task exists, check if it's the current index
             const isCurrentIndex = taskIndex === currentIndexRef.current;
             if (isCurrentIndex) {
-                console.log(`🔄 updateFromBackend: Updating current index (${taskIndex}) but not changing current state`);
+                log.debug({ taskIndex }, '🔄 updateFromBackend: Updating current index but not changing current state');
             }
             else {
-                console.log(`🔄 updateFromBackend: Updating history entry at index ${taskIndex} (far behind current ${currentIndexRef.current})`);
+                log.debug({ taskIndex, currentIndex: currentIndexRef.current }, '🔄 updateFromBackend: Updating history entry far behind current');
             }
             // Update the specific history entry
             const updatedHistory = [...prevHistory];
@@ -626,7 +627,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             };
             return updatedHistory;
         });
-        console.log(`✅ updateFromBackend: Successfully updated taskId ${adjustmentTaskId}`);
+        log.info({ adjustmentTaskId }, '✅ updateFromBackend: Successfully updated taskId');
     }, [internalOptions]);
     // History info object
     const historyInfo = useMemo(() => ({

package/package.json

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