@yogiswara/honcho-editor-ui 2.7.13 → 2.7.14

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -1,427 +0,0 @@
-'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";
-// Helper function to map the API response to the format our UI component needs
-const mapGalleryToPhotoData = (gallery, selectedIds) => {
-    return {
-        key: gallery.id,
-        src: gallery.raw_thumbnail?.path ? gallery.raw_thumbnail.path : gallery.thumbnail?.path,
-        original: gallery.download?.path || gallery.thumbnail?.path,
-        width: gallery.thumbnail?.width,
-        height: gallery.thumbnail?.height,
-        alt: gallery.id || 'gallery image',
-        isSelected: selectedIds.includes(gallery.id),
-        adjustments: gallery.editor_config?.color_adjustment,
-    };
-};
-const mapToImageAdjustmentConfig = (gallery) => {
-    return {
-        imageId: gallery.id,
-        adjustment: mapColorAdjustmentToAdjustmentState(gallery.editor_config?.color_adjustment),
-    };
-};
-function mapColorAdjustmentToAdjustmentState(adj) {
-    if (!adj)
-        return undefined;
-    return {
-        tempScore: adj.temperature || 0,
-        tintScore: adj.tint || 0,
-        vibranceScore: adj.vibrance || 0,
-        saturationScore: adj.saturation || 0,
-        exposureScore: adj.exposure || 0,
-        highlightsScore: adj.highlights || 0,
-        shadowsScore: adj.shadows || 0,
-        whitesScore: adj.whites || 0,
-        blacksScore: adj.blacks || 0,
-        contrastScore: adj.contrast || 0,
-        clarityScore: adj.clarity || 0,
-        sharpnessScore: adj.sharpness || 0,
-    };
-}
-// Helper function to convert Preset to AdjustmentState
-const presetToAdjustmentState = (preset) => {
-    return {
-        tempScore: preset.temperature || 0,
-        tintScore: preset.tint || 0,
-        vibranceScore: preset.vibrance || 0,
-        saturationScore: preset.saturation || 0,
-        exposureScore: preset.exposure || 0,
-        highlightsScore: preset.highlights || 0,
-        shadowsScore: preset.shadows || 0,
-        whitesScore: preset.whites || 0,
-        blacksScore: preset.blacks || 0,
-        contrastScore: preset.contrast || 0,
-        clarityScore: preset.clarity || 0,
-        sharpnessScore: preset.sharpness || 0,
-    };
-};
-// Helper function to compare adjustment states
-const adjustmentsMatch = (a, b) => {
-    const keys = [
-        'tempScore', 'tintScore', 'vibranceScore', 'saturationScore',
-        'exposureScore', 'highlightsScore', 'shadowsScore', 'whitesScore',
-        'blacksScore', 'contrastScore', 'clarityScore', 'sharpnessScore'
-    ];
-    return keys.every(key => (a[key] || 0) === (b[key] || 0));
-};
-/**
- * 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 function useHonchoEditorBulk(controller, eventID, firebaseUid) {
-    console.log('[useHonchoEditorBulk] 🏭 Initializing with controller for multi-image backend sync');
-    const { currentBatch, selectedIds, actions: batchActions, historyInfo } = useAdjustmentHistoryBatch({
-        controller,
-        firebaseUid,
-        eventId: eventID,
-        devWarnings: true
-    });
-    const { images, info, actions } = usePaging(controller, firebaseUid, eventID, {
-        autoLoad: true,
-        autoReset: false // Prevent auto-reset to avoid loops
-    });
-    // Preset management
-    const { presets, actions: presetActions } = usePreset(controller, firebaseUid, {
-        autoLoad: true,
-        devWarnings: true
-    });
-    // Track which images have been synced to prevent loops
-    const lastSyncedImageIds = useRef(new Set());
-    // State for Bulk Editing  
-    const [selectedBulkPreset, setSelectedBulkPreset] = useState('');
-    // Calculate active preset based on selected images' adjustments
-    const activePreset = useMemo(() => {
-        if (selectedIds.length === 0) {
-            return null;
-        }
-        // Get adjustments for all selected images
-        const selectedAdjustments = selectedIds.map(imageId => {
-            return currentBatch.allImages[imageId] || {
-                tempScore: 0, tintScore: 0, vibranceScore: 0, saturationScore: 0,
-                exposureScore: 0, highlightsScore: 0, shadowsScore: 0, whitesScore: 0,
-                blacksScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
-            };
-        });
-        // Check if all selected images have the same adjustments
-        const firstAdjustment = selectedAdjustments[0];
-        const allSameAdjustments = selectedAdjustments.every(adj => adjustmentsMatch(adj, firstAdjustment));
-        if (!allSameAdjustments) {
-            // Selected images have different adjustments
-            return null;
-        }
-        // Find preset that matches the common adjustment state
-        const matchingPreset = presets.find(preset => {
-            const presetAdjustments = presetToAdjustmentState(preset);
-            return adjustmentsMatch(presetAdjustments, firstAdjustment);
-        });
-        return matchingPreset || null;
-    }, [selectedIds, currentBatch.allImages, presets]);
-    // Update selectedBulkPreset when activePreset changes
-    useEffect(() => {
-        setSelectedBulkPreset(activePreset?.id || '');
-    }, [activePreset]);
-    // Use loading states from usePaging instead of local state
-    const isLoading = info.isLoading;
-    const error = info.error;
-    const hasMore = info.hasMore;
-    const imageData = useMemo(() => {
-        // console.debug("imageData recalculating with:", {
-        //     imagesLength: images.length,
-        //     selectedIds,
-        //     currentBatch_allImages: currentBatch.allImages,
-        //     currentBatch_allImages_keys: Object.keys(currentBatch.allImages)
-        // });
-        const res = images.map(item => {
-            const basePhoto = mapGalleryToPhotoData(item, selectedIds);
-            const batchAdjustment = currentBatch.allImages[item.id];
-            if (batchAdjustment) {
-                const adjustmentsValues = mapAdjustmentStateToAdjustmentEditor(batchAdjustment);
-                basePhoto.adjustments = adjustmentsValues;
-            }
-            // Merge batch adjustments over backend adjustments
-            return batchAdjustment ? { ...basePhoto } : basePhoto;
-        });
-        return res;
-    }, [images, selectedIds, currentBatch.allImages]);
-    // Store the latest batchActions.syncAdjustment in a ref to avoid dependency issues
-    const syncAdjustmentRef = useRef(batchActions.syncAdjustment);
-    syncAdjustmentRef.current = batchActions.syncAdjustment;
-    // Safe sync: Only sync new images to prevent infinite loops
-    useEffect(() => {
-        console.log('[useHonchoEditorBulk] 🔄 Sync effect triggered:', {
-            imagesLength: images.length,
-            imageIds: images.map(img => img.id),
-            lastSyncedImageIds: Array.from(lastSyncedImageIds.current),
-            lastSyncedCount: lastSyncedImageIds.current.size
-        });
-        if (images.length === 0)
-            return;
-        // Check if we have new images that haven't been synced
-        const currentImageIds = new Set(images.map(img => img.id));
-        const hasNewImages = images.some(img => !lastSyncedImageIds.current.has(img.id));
-        console.log('[useHonchoEditorBulk] 🔍 New images check:', {
-            currentImageIds: Array.from(currentImageIds),
-            hasNewImages,
-            newImages: images.filter(img => !lastSyncedImageIds.current.has(img.id)).map(img => img.id)
-        });
-        if (hasNewImages) {
-            console.log('[useHonchoEditorBulk] ⚠️ SYNC TRIGGER: Syncing new images to batch (THIS RESETS HISTORY!):', images.length);
-            syncAdjustmentRef.current(images.map(mapToImageAdjustmentConfig));
-            lastSyncedImageIds.current = currentImageIds;
-        }
-        else {
-            console.log('[useHonchoEditorBulk] ✅ No new images, skipping sync (history preserved)');
-        }
-    }, [images]); // Only depend on images, not batchActions
-    const handleBackCallbackBulk = useCallback(() => {
-        const lastSelectedId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] : "";
-        controller.handleBack(firebaseUid, lastSelectedId);
-    }, [controller, firebaseUid, selectedIds]);
-    const handleSelectBulkPreset = useCallback((event) => {
-        const presetId = event.target.value;
-        setSelectedBulkPreset(presetId);
-        console.log('[useHonchoEditorBulk] 🎨 Preset selection attempt:', {
-            presetId,
-            selectedImages: selectedIds,
-            imageCount: selectedIds.length,
-            hasController: !!controller,
-            hasFirebaseUid: !!firebaseUid
-        });
-        if (!presetId) {
-            console.log('[useHonchoEditorBulk] ❌ No preset ID provided, skipping backend call');
-            return;
-        }
-        if (selectedIds.length === 0) {
-            console.log('[useHonchoEditorBulk] ❌ No images selected, skipping backend call');
-            return;
-        }
-        console.log('[useHonchoEditorBulk] 🎨 Applying preset to multiple images:', {
-            presetId,
-            selectedImages: selectedIds,
-            imageCount: selectedIds.length
-        });
-        // Find the preset
-        const preset = presets.find(p => p.id === presetId);
-        if (!preset) {
-            console.log('[useHonchoEditorBulk] ❌ Preset not found in presets list:', presetId);
-            return;
-        }
-        // Convert preset to adjustment state
-        const presetAdjustments = presetToAdjustmentState(preset);
-        console.log('[useHonchoEditorBulk] 📤 Sending preset adjustments to controller for each image:', presetAdjustments);
-        console.log('[useHonchoEditorBulk] 🔄 About to call batchActions.adjustSelectedWithPreset');
-        // Apply preset directly to all selected images using the clean action
-        // This will trigger backend calls for each selected image via adjustSelectedWithPreset
-        batchActions.adjustSelectedWithPreset(presetAdjustments);
-        console.log('[useHonchoEditorBulk] ✅ Called batchActions.adjustSelectedWithPreset, backend calls should be triggered');
-    }, [presets, selectedIds, batchActions, controller, firebaseUid]);
-    // This factory creates functions that adjust a value for all selected images
-    const createRelativeAdjuster = useCallback((key, amount) => () => {
-        console.debug(`[useHonchoEditorBulk] 🎛️ Bulk ${key} adjustment:`, {
-            key,
-            amount,
-            selectedImages: selectedIds,
-            imageCount: selectedIds.length
-        });
-        console.debug('[useHonchoEditorBulk] 📤 Sending bulk adjustment to controller for each selected image');
-        console.debug("currentBatch.allImages before:", currentBatch.allImages);
-        batchActions.adjustSelected({ [key]: amount });
-        // Debug after a short delay to see if the state changed
-        setTimeout(() => {
-            console.debug("currentBatch.allImages after:", currentBatch.allImages);
-        }, 100);
-    }, [batchActions, selectedIds, currentBatch.allImages]);
-    const handleBulkTempDecreaseMax = createRelativeAdjuster('tempScore', -20);
-    const handleBulkTempDecrease = createRelativeAdjuster('tempScore', -5);
-    const handleBulkTempIncrease = createRelativeAdjuster('tempScore', 5);
-    const handleBulkTempIncreaseMax = createRelativeAdjuster('tempScore', 20);
-    const handleBulkTintDecreaseMax = createRelativeAdjuster('tintScore', -20);
-    const handleBulkTintDecrease = createRelativeAdjuster('tintScore', -5);
-    const handleBulkTintIncrease = createRelativeAdjuster('tintScore', 5);
-    const handleBulkTintIncreaseMax = createRelativeAdjuster('tintScore', 20);
-    const handleBulkVibranceDecreaseMax = createRelativeAdjuster('vibranceScore', -20);
-    const handleBulkVibranceDecrease = createRelativeAdjuster('vibranceScore', -5);
-    const handleBulkVibranceIncrease = createRelativeAdjuster('vibranceScore', 5);
-    const handleBulkVibranceIncreaseMax = createRelativeAdjuster('vibranceScore', 20);
-    const handleBulkSaturationDecreaseMax = createRelativeAdjuster('saturationScore', -20);
-    const handleBulkSaturationDecrease = createRelativeAdjuster('saturationScore', -5);
-    const handleBulkSaturationIncrease = createRelativeAdjuster('saturationScore', 5);
-    const handleBulkSaturationIncreaseMax = createRelativeAdjuster('saturationScore', 20);
-    const handleBulkExposureDecreaseMax = createRelativeAdjuster('exposureScore', -20);
-    const handleBulkExposureDecrease = createRelativeAdjuster('exposureScore', -5);
-    const handleBulkExposureIncrease = createRelativeAdjuster('exposureScore', 5);
-    const handleBulkExposureIncreaseMax = createRelativeAdjuster('exposureScore', 20);
-    const handleBulkContrastDecreaseMax = createRelativeAdjuster('contrastScore', -20);
-    const handleBulkContrastDecrease = createRelativeAdjuster('contrastScore', -5);
-    const handleBulkContrastIncrease = createRelativeAdjuster('contrastScore', 5);
-    const handleBulkContrastIncreaseMax = createRelativeAdjuster('contrastScore', 20);
-    const handleBulkHighlightsDecreaseMax = createRelativeAdjuster('highlightsScore', -20);
-    const handleBulkHighlightsDecrease = createRelativeAdjuster('highlightsScore', -5);
-    const handleBulkHighlightsIncrease = createRelativeAdjuster('highlightsScore', 5);
-    const handleBulkHighlightsIncreaseMax = createRelativeAdjuster('highlightsScore', 20);
-    const handleBulkShadowsDecreaseMax = createRelativeAdjuster('shadowsScore', -20);
-    const handleBulkShadowsDecrease = createRelativeAdjuster('shadowsScore', -5);
-    const handleBulkShadowsIncrease = createRelativeAdjuster('shadowsScore', 5);
-    const handleBulkShadowsIncreaseMax = createRelativeAdjuster('shadowsScore', 20);
-    const handleBulkWhitesDecreaseMax = createRelativeAdjuster('whitesScore', -20);
-    const handleBulkWhitesDecrease = createRelativeAdjuster('whitesScore', -5);
-    const handleBulkWhitesIncrease = createRelativeAdjuster('whitesScore', 5);
-    const handleBulkWhitesIncreaseMax = createRelativeAdjuster('whitesScore', 20);
-    const handleBulkBlacksDecreaseMax = createRelativeAdjuster('blacksScore', -20);
-    const handleBulkBlacksDecrease = createRelativeAdjuster('blacksScore', -5);
-    const handleBulkBlacksIncrease = createRelativeAdjuster('blacksScore', 5);
-    const handleBulkBlacksIncreaseMax = createRelativeAdjuster('blacksScore', 20);
-    const handleBulkClarityDecreaseMax = createRelativeAdjuster('clarityScore', -20);
-    const handleBulkClarityDecrease = createRelativeAdjuster('clarityScore', -5);
-    const handleBulkClarityIncrease = createRelativeAdjuster('clarityScore', 5);
-    const handleBulkClarityIncreaseMax = createRelativeAdjuster('clarityScore', 20);
-    const handleBulkSharpnessDecreaseMax = createRelativeAdjuster('sharpnessScore', -20);
-    const handleBulkSharpnessDecrease = createRelativeAdjuster('sharpnessScore', -5);
-    const handleBulkSharpnessIncrease = createRelativeAdjuster('sharpnessScore', 5);
-    const handleBulkSharpnessIncreaseMax = createRelativeAdjuster('sharpnessScore', 20);
-    // const loadImages = useCallback(async (pageNum: number) => {
-    //     // Use the correct loading state
-    //     if (pageNum === 1) {
-    //         setIsLoading(true);
-    //     } else {
-    //         setIsFetchingMore(true);
-    //     }
-    //     setError(null);
-    //     try {
-    //         const response = await controller.getImageList(firebaseUid, eventID, pageNum);
-    //         // Sync adjustments for the new images with the batch history
-    //         batchActions.syncAdjustment(response.gallery.map(mapToImageAdjustmentConfig));
-    //         // Append new images for page > 1, otherwise replace
-    //         setImageCollection(prev => pageNum === 1 ? response.gallery : [...prev, ...response.gallery]);
-    //         setPage(response.current_page);
-    //         setHasMore(response.next_page > 0 && response.gallery.length > 0);
-    //     } catch (err: any) {
-    //         console.error("Failed to fetch image list:", err);
-    //         setError(err.message || "Could not load images.");
-    //     } finally {
-    //         if (pageNum === 1) {
-    //             setIsLoading(false);
-    //         } else {
-    //             setIsFetchingMore(false);
-    //         }
-    //     }
-    // }, [controller, firebaseUid, eventID, batchActions]);
-    // const loadMoreImages = useCallback(() => {
-    //     if (!isFetchingMore && hasMore) {
-    //         loadImages(page + 1);
-    //     }
-    // }, [isFetchingMore, hasMore, page, loadImages]);
-    // Note: Image loading is now handled by usePaging hook
-    // The sync logic above handles syncing loaded images to batch state
-    // useEffect(() => {
-    //     if (eventID && firebaseUid) {
-    //         setImageCollection([]); // reset when event changes
-    //         setPage(1);
-    //         loadImages(1);
-    //     }
-    // }, [eventID, firebaseUid, loadImages]);
-    return {
-        imageData,
-        isLoading,
-        error,
-        selectedIds,
-        hasMore,
-        // loadMoreImages,
-        // Gallery Handlers
-        handleBackCallbackBulk,
-        // Preset functionality
-        presets,
-        selectedBulkPreset,
-        activePreset,
-        handleSelectBulkPreset,
-        // Preset creation handlers
-        presetActions, // Expose preset actions for create/rename/delete
-        handleToggleImageSelection: batchActions.toggleSelection,
-        handleLoadMore: actions.loadMore,
-        handleRefresh: actions.refresh,
-        // Adjustment
-        handleBulkTempDecreaseMax,
-        handleBulkTempDecrease,
-        handleBulkTempIncrease,
-        handleBulkTempIncreaseMax,
-        handleBulkTintDecreaseMax,
-        handleBulkTintDecrease,
-        handleBulkTintIncrease,
-        handleBulkTintIncreaseMax,
-        handleBulkVibranceDecreaseMax,
-        handleBulkVibranceDecrease,
-        handleBulkVibranceIncrease,
-        handleBulkVibranceIncreaseMax,
-        handleBulkSaturationDecreaseMax,
-        handleBulkSaturationDecrease,
-        handleBulkSaturationIncrease,
-        handleBulkSaturationIncreaseMax,
-        // Adjustment Light
-        handleBulkExposureDecreaseMax,
-        handleBulkExposureDecrease,
-        handleBulkExposureIncrease,
-        handleBulkExposureIncreaseMax,
-        handleBulkContrastDecreaseMax,
-        handleBulkContrastDecrease,
-        handleBulkContrastIncrease,
-        handleBulkContrastIncreaseMax,
-        handleBulkHighlightsDecreaseMax,
-        handleBulkHighlightsDecrease,
-        handleBulkHighlightsIncrease,
-        handleBulkHighlightsIncreaseMax,
-        handleBulkShadowsDecreaseMax,
-        handleBulkShadowsDecrease,
-        handleBulkShadowsIncrease,
-        handleBulkShadowsIncreaseMax,
-        handleBulkWhitesDecreaseMax,
-        handleBulkWhitesDecrease,
-        handleBulkWhitesIncrease,
-        handleBulkWhitesIncreaseMax,
-        handleBulkBlacksDecreaseMax,
-        handleBulkBlacksDecrease,
-        handleBulkBlacksIncrease,
-        handleBulkBlacksIncreaseMax,
-        // Adjustment Details
-        handleBulkClarityDecreaseMax,
-        handleBulkClarityDecrease,
-        handleBulkClarityIncrease,
-        handleBulkClarityIncreaseMax,
-        handleBulkSharpnessDecreaseMax,
-        handleBulkSharpnessDecrease,
-        handleBulkSharpnessIncrease,
-        handleBulkSharpnessIncreaseMax,
-        // History actions
-        handleUndo: () => {
-            console.log('[useHonchoEditorBulk] ⏪ Undo requested for multiple images:', {
-                selectedImages: selectedIds,
-                imageCount: selectedIds.length
-            });
-            console.log('[useHonchoEditorBulk] 📤 Sending undo (setHistoryIndex) to controller for each image');
-            return batchActions.undo();
-        },
-        handleRedo: () => {
-            console.log('[useHonchoEditorBulk] ⏩ Redo requested for multiple images:', {
-                selectedImages: selectedIds,
-                imageCount: selectedIds.length
-            });
-            console.log('[useHonchoEditorBulk] 📤 Sending redo (setHistoryIndex) to controller for each image');
-            return batchActions.redo();
-        },
-        handleReset: batchActions.reset,
-        historyInfo,
-    };
-}

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

@@ -1,44 +0,0 @@
-import { Controller, AdjustmentState, Preset } from './type';
-import { Gallery } from './type';
-import { AdjustmentValues } from '../../lib/editor/honcho-editor';
-export interface UseHonchoEditorSingleOptions {
-    controller: Controller;
-    initImageId: string;
-    firebaseUid: string;
-}
-export interface UseHonchoEditorSingleState {
-    currentImageData: Gallery | null;
-    isGalleryLoading: boolean;
-    galleryError: string | null;
-    currentAdjustments: AdjustmentState;
-    isBatchMode: boolean;
-    canUndo: boolean;
-    canRedo: boolean;
-    isNextAvailable: boolean;
-    isPrevAvailable: boolean;
-    presets: Preset[];
-    activePreset: Preset | null;
-    presetsLoading: boolean;
-    presetsError: string | null;
-}
-export interface UseHonchoEditorSingleActions {
-    navigateNext: () => void;
-    navigatePrev: () => void;
-    updateAdjustment: (field: keyof AdjustmentState, value: number) => void;
-    setBatchMode: (enabled: boolean) => void;
-    startBatchMode: () => void;
-    endBatchMode: () => void;
-    undo: () => void;
-    redo: () => void;
-    reset: () => void;
-    loadPresets: () => Promise<void>;
-    applyPreset: (preset: Preset) => void;
-    createPreset: (name: string, adjustments: AdjustmentState) => Promise<Preset | null>;
-    renamePreset: (presetId: string, newName: string) => Promise<boolean>;
-    deletePreset: (presetId: string) => Promise<void>;
-    getEditorAdjustments: () => AdjustmentValues;
-}
-export declare function useHonchoEditorSingle({ controller, initImageId, firebaseUid }: UseHonchoEditorSingleOptions): {
-    state: UseHonchoEditorSingleState;
-    actions: UseHonchoEditorSingleActions;
-};

package/dist/hooks/editor/useHonchoEditorSingle.js

@@ -1,162 +0,0 @@
-'use client';
-import { useCallback, useMemo } from 'react';
-import { useAdjustmentHistory } from '../useAdjustmentHistory';
-import { useGallerySwipe } from '../useGallerySwipe';
-import { usePreset } from '../usePreset';
-// Default adjustment values
-const initialAdjustments = {
-    tempScore: 0, tintScore: 0, vibranceScore: 0, saturationScore: 0,
-    exposureScore: 0, highlightsScore: 0, shadowsScore: 0, whitesScore: 0,
-    blacksScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
-};
-export function useHonchoEditorSingle({ controller, initImageId, firebaseUid }) {
-    // Memoize parameters to prevent unnecessary re-renders
-    const memoizedController = useMemo(() => controller, [controller]);
-    const memoizedInitImageId = useMemo(() => initImageId, [initImageId]);
-    const memoizedFirebaseUid = useMemo(() => firebaseUid, [firebaseUid]);
-    // Initialize business logic hooks only
-    const adjustmentHistory = useAdjustmentHistory(initialAdjustments, memoizedController, memoizedFirebaseUid, memoizedInitImageId);
-    const gallerySwipe = useGallerySwipe(memoizedFirebaseUid, memoizedInitImageId, memoizedController);
-    const presetHook = usePreset(memoizedController, memoizedFirebaseUid, { autoLoad: true });
-    // Find active preset based on current adjustments
-    const activePreset = presetHook.actions.findByAdjustments(adjustmentHistory.currentState);
-    // Actions - pure business logic, no editor interaction - wrapped in useCallback to prevent re-renders
-    const navigateNext = useCallback(() => {
-        if (gallerySwipe.isNextAvailable) {
-            gallerySwipe.onSwipeNext();
-        }
-    }, [gallerySwipe.isNextAvailable, gallerySwipe.onSwipeNext]);
-    const navigatePrev = useCallback(() => {
-        if (gallerySwipe.isPrevAvailable) {
-            gallerySwipe.onSwipePrev();
-        }
-    }, [gallerySwipe.isPrevAvailable, gallerySwipe.onSwipePrev]);
-    const updateAdjustment = useCallback((field, value) => {
-        const newState = {
-            ...adjustmentHistory.currentState,
-            [field]: value
-        };
-        adjustmentHistory.actions.pushState(newState);
-    }, [adjustmentHistory.currentState, adjustmentHistory.actions.pushState]);
-    const setBatchMode = useCallback((enabled) => {
-        adjustmentHistory.config.setBatchMode(enabled);
-    }, [adjustmentHistory.config.setBatchMode]);
-    const startBatchMode = useCallback(() => {
-        adjustmentHistory.config.setBatchMode(true);
-    }, [adjustmentHistory.config.setBatchMode]);
-    const endBatchMode = useCallback(() => {
-        adjustmentHistory.config.setBatchMode(false);
-    }, [adjustmentHistory.config.setBatchMode]);
-    const undo = useCallback(() => {
-        adjustmentHistory.actions.undo();
-    }, [adjustmentHistory.actions.undo]);
-    const redo = useCallback(() => {
-        adjustmentHistory.actions.redo();
-    }, [adjustmentHistory.actions.redo]);
-    const reset = useCallback(async () => {
-        // 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)
-        adjustmentHistory.actions.pushState(initialAdjustments);
-        // Then sync to backend
-        await adjustmentHistory.config.syncToBackend();
-    }, [adjustmentHistory.actions.pushState, adjustmentHistory.config.syncToBackend]);
-    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');
-        const adjustmentState = {
-            tempScore: preset.temperature,
-            tintScore: preset.tint,
-            vibranceScore: preset.vibrance,
-            saturationScore: preset.saturation,
-            exposureScore: preset.exposure,
-            highlightsScore: preset.highlights,
-            shadowsScore: preset.shadows,
-            whitesScore: preset.whites,
-            blacksScore: preset.blacks,
-            contrastScore: preset.contrast,
-            clarityScore: preset.clarity,
-            sharpnessScore: preset.sharpness,
-        };
-        // Apply preset directly and add to history
-        adjustmentHistory.actions.pushState(adjustmentState);
-        // Then sync to backend
-        await adjustmentHistory.config.syncToBackend();
-    }, [adjustmentHistory.actions.pushState, adjustmentHistory.config.syncToBackend]);
-    const createPreset = useCallback(async (name, adjustments) => {
-        return await presetHook.actions.create(name, adjustments);
-    }, [presetHook.actions.create]);
-    const renamePreset = useCallback(async (presetId, newName) => {
-        return await presetHook.actions.rename(presetId, newName);
-    }, [presetHook.actions.rename]);
-    const deletePreset = useCallback(async (presetId) => {
-        await presetHook.actions.delete(presetId);
-    }, [presetHook.actions.delete]);
-    const getEditorAdjustments = useCallback(() => {
-        const adjustments = adjustmentHistory.currentState;
-        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,
-        };
-    }, [adjustmentHistory.currentState]);
-    const actions = {
-        // Navigation
-        navigateNext,
-        navigatePrev,
-        // Adjustments
-        updateAdjustment,
-        setBatchMode,
-        startBatchMode,
-        endBatchMode,
-        // History
-        undo,
-        redo,
-        reset,
-        // Presets
-        loadPresets,
-        applyPreset,
-        createPreset,
-        renamePreset,
-        deletePreset,
-        // Adjustment conversion for editor
-        getEditorAdjustments
-    };
-    // State - pure business state, no editor state
-    const state = {
-        // Image state
-        currentImageData: gallerySwipe.currentImageData,
-        isGalleryLoading: gallerySwipe.isLoading,
-        galleryError: gallerySwipe.error,
-        // Adjustment state
-        currentAdjustments: adjustmentHistory.currentState,
-        isBatchMode: adjustmentHistory.historyInfo.isBatchMode,
-        canUndo: adjustmentHistory.historyInfo.canUndo,
-        canRedo: adjustmentHistory.historyInfo.canRedo,
-        // Navigation state
-        isNextAvailable: gallerySwipe.isNextAvailable,
-        isPrevAvailable: gallerySwipe.isPrevAvailable,
-        // Preset state
-        presets: presetHook.presets,
-        activePreset: activePreset || null,
-        presetsLoading: presetHook.info.isLoading,
-        presetsError: presetHook.info.error,
-    };
-    return {
-        state,
-        actions
-    };
-}