@yogiswara/honcho-editor-ui 3.3.4 → 3.4.0

package/dist/hooks/demo/HonchoEditorBulkDemo.js

@@ -1,411 +1,770 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState, useMemo, useRef, useEffect } from 'react';
-import { Box, Container, Typography, Button, Grid, Card, CardContent, Checkbox, Chip, Alert, CircularProgress, ButtonGroup, Paper, Divider, FormControl, InputLabel, Select, MenuItem, Stack } from '@mui/material';
-import { useHonchoEditorBulk } from '../editor/useHonchoEditorBulk';
-import { useImageProcessor } from "../../lib/hooks/useImageProcessor";
-// Mock data for demonstration
-const createMockGallery = (id, adjustments) => ({
-    id,
-    uid: 'demo-user',
-    event_id: 'demo-event',
-    download: {
-        key: `${id}-download`,
-        path: `https://s3.ap-southeast-1.amazonaws.com/dev.pronto.ubersnap/event/689c514d225024b1172ed297/media/95d811da-72a1-4e97-91cc-94446f0a10ad/original.jpeg`,
-        size: 1024000,
-        width: 800,
-        height: 600,
-    },
-    download_edited: {
-        key: `${id}-download-edited`,
-        path: `https://s3.ap-southeast-1.amazonaws.com/dev.pronto.ubersnap/event/689c514d225024b1172ed297/media/95d811da-72a1-4e97-91cc-94446f0a10ad/original.jpeg`,
-        size: 1024000,
-        width: 800,
-        height: 600,
-    },
-    thumbnail: {
-        key: `${id}-thumb`,
-        path: `https://s3.ap-southeast-1.amazonaws.com/dev.pronto.ubersnap/event/689c514d225024b1172ed297/media/95d811da-72a1-4e97-91cc-94446f0a10ad/original.jpeg`,
-        size: 50000,
-        width: 300,
-        height: 200,
-    },
-    thumbnail_edited: {
-        key: `${id}-thumb-edited`,
-        path: `https://s3.ap-southeast-1.amazonaws.com/dev.pronto.ubersnap/event/689c514d225024b1172ed297/media/95d811da-72a1-4e97-91cc-94446f0a10ad/thumbnail.jpeg`,
-        size: 50000,
-        width: 300,
-        height: 200,
-    },
-    is_original: true,
-    available: true,
-    show_gallery: true,
-    editor_config: {
-        color_adjustment: {
-            temperature: adjustments?.tempScore || 0,
-            tint: adjustments?.tintScore || 0,
-            vibrance: adjustments?.vibranceScore || 0,
-            saturation: adjustments?.saturationScore || 0,
-            exposure: adjustments?.exposureScore || 0,
-            highlights: adjustments?.highlightsScore || 0,
-            shadows: adjustments?.shadowsScore || 0,
-            whites: adjustments?.whitesScore || 0,
-            blacks: adjustments?.blacksScore || 0,
-            contrast: adjustments?.contrastScore || 0,
-            clarity: adjustments?.clarityScore || 0,
-            sharpness: adjustments?.sharpnessScore || 0,
-        },
-        transformation_adjustment: [],
-        watermarks: [],
-    },
-    log: {
-        created_at: new Date().toISOString(),
-        updated_at: new Date().toISOString(),
-    },
-});
-// Mock Controller implementation
-const createMockController = () => {
-    console.log('[Controller] 🏭 createMockController() called - Creating new mock controller instance for bulk editor');
-    // Generate mock images from 1 to 1277 using picsum.dev static URLs
-    const mockImages = [];
-    for (let i = 1; i <= 1000; i++) {
-        const id = i.toString();
-        // let adjustments: Partial<AdjustmentState> | undefined;
-        mockImages.push(createMockGallery(id, undefined));
-    }
-    return {
-        onGetImage: async (uid, imageId) => {
-            console.log(`[Controller] 📷 onGetImage called: uid=${uid}, imageId=${imageId}`);
-            await new Promise(resolve => setTimeout(resolve, 500));
-            const image = mockImages.find(img => img.id === imageId);
-            if (!image) {
-                console.error(`[Controller] ❌ Image ${imageId} not found`);
-                throw new Error(`Image ${imageId} not found`);
-            }
-            console.log(`[Controller] 📷 onGetImage returning image:`, image.id);
-            return image;
-        },
-        getImageList: async (uid, eventId, page) => {
-            console.log(`[Controller] 📋 getImageList called: uid=${uid}, eventId=${eventId}, page=${page}`);
-            await new Promise(resolve => setTimeout(resolve, 800));
-            const pageSize = 1000; // Increased page size for better UX with more images
-            const startIndex = (page - 1) * pageSize;
-            const endIndex = startIndex + pageSize;
-            const pageImages = mockImages.slice(startIndex, endIndex);
-            const result = {
-                gallery: pageImages,
-                limit: pageSize,
-                current_page: page,
-                prev_page: page > 1 ? page - 1 : 0,
-                next_page: endIndex < mockImages.length ? page + 1 : 0,
-                sum_of_image: pageImages.length,
-            };
-            console.log(`[Controller] 📋 getImageList returning ${pageImages.length} images for page ${page} (total available: ${mockImages.length})`, result);
-            return result;
-        },
-        syncConfig: async (uid) => {
-            console.log(`[Controller] 🔄 syncConfig called: uid=${uid}`);
-            await new Promise(resolve => setTimeout(resolve, 200));
-            console.log(`[Controller] 🔄 syncConfig completed for uid=${uid}`);
-        },
-        handleBack: (uid, imageId) => {
-            console.log(`[Controller] ⬅️ handleBack called: uid=${uid}, imageId=${imageId}`);
-            console.log(`[Controller] ⬅️ Back to: ${imageId}`);
-        },
-        getPresets: async (uid) => {
-            console.log(`[Controller] 🎨 getPresets called: uid=${uid}`);
-            await new Promise(resolve => setTimeout(resolve, 300));
-            const presets = [
-                { id: '1', name: 'Warm Sunset', is_default: false, temperature: 15, tint: 5, saturation: 8, vibrance: 12, exposure: 2, contrast: 5, highlights: -10, shadows: 8, whites: 3, blacks: -5, clarity: 4, sharpness: 6 },
-                { id: '2', name: 'Cool Morning', is_default: false, temperature: -12, tint: -3, saturation: -2, vibrance: 5, exposure: 1, contrast: 3, highlights: -5, shadows: 12, whites: 8, blacks: -8, clarity: 6, sharpness: 4 },
-                { id: '3', name: 'High Contrast', is_default: false, temperature: 0, tint: 0, saturation: 5, vibrance: 8, exposure: 0, contrast: 20, highlights: -15, shadows: 15, whites: 10, blacks: -10, clarity: 15, sharpness: 8 },
-            ];
-            console.log(`[Controller] 🎨 getPresets returning ${presets.length} presets`, presets.map(p => ({ id: p.id, name: p.name })));
-            return presets;
-        },
-        createPreset: async (uid, name, settings) => {
-            console.log(`[Controller] ➕ createPreset called: uid=${uid}, name=${name}`, settings);
-            await new Promise(resolve => setTimeout(resolve, 500));
-            console.log(`[Controller] ➕ createPreset completed: ${name}`);
-        },
-        deletePreset: async (uid, presetId) => {
-            console.log(`[Controller] 🗑️ deletePreset called: uid=${uid}, presetId=${presetId}`);
-            await new Promise(resolve => setTimeout(resolve, 300));
-            console.log(`[Controller] 🗑️ deletePreset completed: ${presetId}`);
-        },
-        updatePreset: async (uid, data) => {
-            console.log(`[Controller] 🔄 updatePreset called: uid=${uid}`, data);
-            await new Promise(resolve => setTimeout(resolve, 300));
-            console.log(`[Controller] 🔄 updatePreset completed:`, data.name);
-        },
-        createEditorConfig: async (uid, payload) => {
-            console.log(`[Controller] ⚙️ createEditorConfig called: uid=${uid}`, payload);
-            await new Promise(resolve => setTimeout(resolve, 300));
-            console.log(`[Controller] ⚙️ createEditorConfig completed for gallery_id=${payload.gallery_id}, task_id=${payload.task_id}`);
-        },
-        getEditorHistory: async (uid, imageId) => {
-            console.log(`[Controller] 📚 getEditorHistory called: uid=${uid}, imageId=${imageId}`);
-            await new Promise(resolve => setTimeout(resolve, 200));
-            const result = {
-                current_task_id: "",
-                history: []
-            };
-            console.log(`[Controller] 📚 getEditorHistory returning empty history for demo:`, result);
-            return result;
-        },
-        getGalleryUpdateTimestamp: async (uid, eventId) => {
-            console.log(`[Controller] ⏰ getGalleryUpdateTimestamp called: uid=${uid}, eventId=${eventId}`);
-            await new Promise(resolve => setTimeout(resolve, 100));
-            const result = {
-                gallery: []
-            };
-            console.log(`[Controller] ⏰ getGalleryUpdateTimestamp returning:`, result);
-            return result;
-        },
-        setHistoryIndex: async (uid, imageId, taskId) => {
-            console.log(`[Controller] 📍 setHistoryIndex called: uid=${uid}, imageId=${imageId}, taskId=${taskId}`);
-            await new Promise(resolve => setTimeout(resolve, 100));
-            console.log(`[Controller] 📍 setHistoryIndex completed - Set history index for image ${imageId} to task ${taskId}`);
-        },
-    };
-};
-const AdjustmentControls = ({ label, onDecreaseMax, onDecrease, onIncrease, onIncreaseMax, disabled = false }) => (_jsxs(Box, { mb: 2, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: label }), _jsxs(ButtonGroup, { size: "small", variant: "outlined", children: [_jsx(Button, { onClick: onDecreaseMax, disabled: disabled, children: "--" }), _jsx(Button, { onClick: onDecrease, disabled: disabled, children: "-" }), _jsx(Button, { onClick: onIncrease, disabled: disabled, children: "+" }), _jsx(Button, { onClick: onIncreaseMax, disabled: disabled, children: "++" })] })] }));
-const ImageCard = React.memo(({ image, onToggleSelection }) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const [shouldLoadImage, setShouldLoadImage] = useState(false);
-    const [isInView, setIsInView] = useState(false);
-    const cardRef = useRef(null);
-    const abortControllerRef = useRef(null);
-    useEffect(() => {
-        const visibilityObserver = new IntersectionObserver(([entry]) => {
-            if (entry.isIntersecting) {
-                setIsVisible(true);
-                setIsInView(true);
-                // Delay image loading slightly to ensure smooth scrolling
-                setTimeout(() => setShouldLoadImage(true), 100);
-                // Don't disconnect here as we want to track when it goes out of view
-            }
-            else {
-                setIsInView(false);
-                // Cancel processing when going out of view
-                if (abortControllerRef.current) {
-                    console.debug(`[ImageCard] Cancelling processing for image ${image.key} - out of view`);
-                    abortControllerRef.current.abort();
-                }
-            }
-        }, {
-            threshold: 0.1, // Trigger when 10% of the element is visible
-            rootMargin: '100px', // Start loading 100px before the element comes into view
-        });
-        if (cardRef.current) {
-            visibilityObserver.observe(cardRef.current);
-        }
-        return () => {
-            visibilityObserver.disconnect();
-            // Cancel any ongoing processing when component unmounts
-            if (abortControllerRef.current) {
-                abortControllerRef.current.abort();
-            }
-        };
-    }, [image.key]);
-    // Track adjustments changes for debugging
-    useEffect(() => {
-        console.log("[ImageCard] Adjustments changed for image", image.key, ":", image.adjustments);
-    }, [image.adjustments, image.key]);
-    // Create a key that changes when adjustments change to force abort controller recreation
-    const adjustmentsKey = useMemo(() => {
-        return JSON.stringify(image.adjustments);
-    }, [image.adjustments]);
-    // Store the current abort signal in a ref to prevent it from changing on every render
-    const currentAbortSignalRef = useRef();
-    const isInitializedRef = useRef(false);
-    // Much more conservative abort controller management - only recreate when absolutely necessary
-    useEffect(() => {
-        if (shouldLoadImage && isInView) {
-            // Only create abort controller if we don't have one OR if this is the first time
-            if (!abortControllerRef.current || !isInitializedRef.current) {
-                console.debug(`[ImageCard] Creating initial abort controller for image ${image.key}`);
-                if (abortControllerRef.current) {
-                    abortControllerRef.current.abort();
-                }
-                abortControllerRef.current = new AbortController();
-                currentAbortSignalRef.current = abortControllerRef.current.signal;
-                isInitializedRef.current = true;
-            }
-            // For adjustment changes, don't recreate the controller - let useImageProcessor handle it
-        }
-        else {
-            // Only clean up when not visible or not loading
-            if (abortControllerRef.current && isInitializedRef.current) {
-                console.debug(`[ImageCard] Cleaning up abort controller for image ${image.key} - not visible or not loading`);
-                abortControllerRef.current.abort();
-                abortControllerRef.current = null;
-                currentAbortSignalRef.current = undefined;
-                isInitializedRef.current = false;
-            }
-        }
-        return () => {
-            if (abortControllerRef.current) {
-                abortControllerRef.current.abort();
-                abortControllerRef.current = null;
-                currentAbortSignalRef.current = undefined;
-                isInitializedRef.current = false;
-            }
-        };
-    }, [shouldLoadImage, isInView, image.key]); // Remove adjustmentsKey from dependencies
-    // Separate effect to handle adjustment changes without recreating abort controller
-    useEffect(() => {
-        if (shouldLoadImage && isInView && isInitializedRef.current) {
-            console.debug(`[ImageCard] Adjustments changed for image ${image.key} - letting useImageProcessor handle the change`);
-        }
-    }, [adjustmentsKey, shouldLoadImage, isInView, image.key]);
-    // Memoize the useImageProcessor call to prevent unnecessary hook calls
-    const imageProcessorParams = useMemo(() => ({
-        photoId: image.key,
-        photoSrc: image.src,
-        adjustments: image.adjustments,
-        enableEditor: shouldLoadImage && isInView, // Only enable when we should load the image AND it's in view
-        abortSignal: currentAbortSignalRef.current, // Use stable abort signal
-        frame: null,
-    }), [image.key, image.src, image.adjustments, shouldLoadImage, isInView]);
-    // Only call useImageProcessor when the card is visible AND we should load the image AND it's in view
-    const { processedImageSrc, isProcessingComplete, cancelProcessing, isProcessing } = useImageProcessor(imageProcessorParams);
-    // Cancel processing when card goes out of view
-    useEffect(() => {
-        if (!isInView && isProcessing) {
-            console.debug(`[ImageCard] Cancelling processing for image ${image.key} - no longer in view`);
-            cancelProcessing();
-        }
-    }, [isInView, isProcessing, cancelProcessing, image.key]);
-    // Memoize the toggle selection handler to prevent unnecessary re-renders
-    const handleToggleSelection = useMemo(() => {
-        return () => onToggleSelection(image.key);
-    }, [onToggleSelection, image.key]);
-    const handleCheckboxClick = useMemo(() => {
-        return (e) => {
-            e.stopPropagation();
-            onToggleSelection(image.key);
-        };
-    }, [onToggleSelection, image.key]);
-    // Create placeholder content for non-visible cards
-    const renderPlaceholder = () => (_jsxs(Box, { sx: {
-            height: 200,
-            backgroundColor: 'grey.100',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexDirection: 'column'
-        }, children: [_jsx(CircularProgress, { size: 24, sx: { mb: 1 } }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: "Loading..." })] }));
-    // Create processing indicator
-    const renderProcessingOverlay = () => {
-        return isProcessing && shouldLoadImage && isInView ? (_jsxs(Box, { sx: {
-                position: 'absolute',
-                top: 8,
-                right: 8,
-                backgroundColor: 'rgba(0, 0, 0, 0.8)',
-                color: 'white',
-                borderRadius: 1,
-                px: 1,
-                py: 0.5,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 0.5,
-                zIndex: 1,
-                maxWidth: '120px'
-            }, children: [_jsx(CircularProgress, { size: 12, color: "inherit" }), _jsx(Typography, { variant: "caption", children: "Processing" })] })) : null;
-    };
-    return (_jsxs(Card, { ref: cardRef, sx: {
-            border: image.isSelected ? 2 : 1,
-            borderColor: image.isSelected ? 'primary.main' : 'divider',
-            cursor: 'pointer',
-            transition: 'all 0.2s',
-            position: 'relative',
-            opacity: 1,
-            '&:hover': {
-                transform: 'translateY(-2px)',
-                boxShadow: 2,
-            }
-        }, onClick: handleToggleSelection, children: [shouldLoadImage ? (_jsxs(Box, { sx: { position: 'relative', width: '100%', height: '200px' }, children: [_jsx("img", { id: "image-card-media", src: processedImageSrc, alt: "", style: {
-                            width: '100%',
-                            height: '200px',
-                            objectFit: 'cover',
-                            opacity: 1,
-                            display: 'block'
-                        }, loading: "lazy" }), renderProcessingOverlay()] })) : (renderPlaceholder()), _jsx(CardContent, { sx: { pb: 1 }, children: _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Image ", image.key, !shouldLoadImage && (_jsx(Typography, { component: "span", variant: "caption", sx: { ml: 1 }, children: "(waiting...)" })), !isInView && shouldLoadImage && (_jsx(Typography, { component: "span", variant: "caption", sx: { ml: 1, color: 'warning.main' }, children: "(paused)" }))] }), _jsx(Checkbox, { checked: image.isSelected, size: "small", onClick: handleCheckboxClick })] }) })] }));
-}, (prevProps, nextProps) => {
-    // Custom comparison function for React.memo - be more strict to prevent unnecessary re-renders
-    const prevAdj = prevProps.image.adjustments || {};
-    const nextAdj = nextProps.image.adjustments || {};
-    // Only re-render if key properties actually change
-    const shouldUpdate = (prevProps.image.key !== nextProps.image.key ||
-        prevProps.image.isSelected !== nextProps.image.isSelected ||
-        prevProps.image.src !== nextProps.image.src ||
-        // Compare individual adjustment properties to avoid JSON.stringify issues
-        prevAdj.temperature !== nextAdj.temperature ||
-        prevAdj.tint !== nextAdj.tint ||
-        prevAdj.exposure !== nextAdj.exposure ||
-        prevAdj.contrast !== nextAdj.contrast ||
-        prevAdj.clarity !== nextAdj.clarity ||
-        prevAdj.vibrance !== nextAdj.vibrance ||
-        prevAdj.saturation !== nextAdj.saturation ||
-        prevAdj.highlights !== nextAdj.highlights ||
-        prevAdj.shadows !== nextAdj.shadows ||
-        prevAdj.whites !== nextAdj.whites ||
-        prevAdj.blacks !== nextAdj.blacks ||
-        prevAdj.sharpness !== nextAdj.sharpness);
-    // Return false to re-render, true to skip re-render
-    return !shouldUpdate;
-});
-export const HonchoEditorBulkDemo = () => {
-    const [controller] = useState(() => createMockController());
-    const [showAdjustments, setShowAdjustments] = useState(false);
-    const { imageData, isLoading, error, selectedIds, hasMore, selectedBulkPreset, presets, // Add presets
-    activePreset, // Add activePreset
-    handleToggleImageSelection, handleLoadMore, handleRefresh, handleSelectBulkPreset, handleBackCallbackBulk, 
-    // Temperature adjustments
-    handleBulkTempDecreaseMax, handleBulkTempDecrease, handleBulkTempIncrease, handleBulkTempIncreaseMax, 
-    // Tint adjustments
-    handleBulkTintDecreaseMax, handleBulkTintDecrease, handleBulkTintIncrease, handleBulkTintIncreaseMax, 
-    // Exposure adjustments
-    handleBulkExposureDecreaseMax, handleBulkExposureDecrease, handleBulkExposureIncrease, handleBulkExposureIncreaseMax, 
-    // Contrast adjustments
-    handleBulkContrastDecreaseMax, handleBulkContrastDecrease, handleBulkContrastIncrease, handleBulkContrastIncreaseMax, 
-    // Clarity adjustments
-    handleBulkClarityDecreaseMax, handleBulkClarityDecrease, handleBulkClarityIncrease, handleBulkClarityIncreaseMax, 
-    // History actions
-    handleUndo, handleRedo, handleReset, historyInfo, } = useHonchoEditorBulk(controller, 'demo-event', 'demo-user');
-    const selectedCount = selectedIds.length;
-    const totalCount = imageData.length;
-    return (_jsxs(Container, { maxWidth: "xl", sx: { py: 4 }, children: [_jsx(Typography, { variant: "h3", gutterBottom: true, align: "center", children: "Honcho Editor Bulk Demo" }), _jsx(Typography, { variant: "subtitle1", align: "center", color: "text.secondary", gutterBottom: true, children: "This demo shows the useHonchoEditorBulk hook with 1,277 mock images from picsum.dev" }), error && (_jsx(Alert, { severity: "error", sx: { mb: 3 }, children: error })), _jsx(Paper, { sx: { p: 3, mb: 3 }, children: _jsxs(Stack, { direction: "row", spacing: 2, alignItems: "center", flexWrap: "wrap", children: [_jsx(Button, { variant: "contained", onClick: handleRefresh, disabled: isLoading, children: isLoading ? _jsx(CircularProgress, { size: 20 }) : 'Refresh Images' }), _jsxs(Button, { variant: "outlined", onClick: () => setShowAdjustments(!showAdjustments), children: [showAdjustments ? 'Hide' : 'Show', " Adjustments"] }), _jsx(Button, { variant: "outlined", onClick: () => {
-                                // Select all images on current page
-                                imageData.forEach(image => {
-                                    if (!image.isSelected) {
-                                        handleToggleImageSelection(image.key);
-                                    }
-                                });
-                            }, disabled: isLoading || imageData.length === 0, children: "Select All" }), _jsx(Button, { variant: "outlined", onClick: () => {
-                                // Deselect all images
-                                imageData.forEach(image => {
-                                    if (image.isSelected) {
-                                        handleToggleImageSelection(image.key);
-                                    }
-                                });
-                            }, disabled: isLoading || selectedCount === 0, children: "Clear Selection" }), _jsx(Button, { variant: "outlined", onClick: () => {
-                                console.log('Debug Info:', {
-                                    selectedIds,
-                                    selectedCount,
-                                    showAdjustments,
-                                    presets: presets.map(p => ({ id: p.id, name: p.name })),
-                                    selectedBulkPreset,
-                                    activePreset: activePreset ? { id: activePreset.id, name: activePreset.name } : null,
-                                    imageData: imageData.map(img => ({ key: img.key, isSelected: img.isSelected }))
-                                });
-                            }, children: "Debug Selection" }), _jsx(Button, { variant: "outlined", onClick: handleBackCallbackBulk, children: "Back" }), _jsx(Chip, { label: `${selectedCount} of ${totalCount} selected`, color: selectedCount > 0 ? "primary" : "default" }), hasMore && (_jsx(Button, { variant: "outlined", onClick: handleLoadMore, disabled: isLoading, children: "Load More" })), _jsxs(FormControl, { size: "small", sx: { minWidth: 150 }, children: [_jsx(InputLabel, { children: "Bulk Preset" }), _jsxs(Select, { value: selectedBulkPreset, onChange: handleSelectBulkPreset, label: "Bulk Preset", displayEmpty: true, children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: "No Preset" }) }), presets.map((preset) => (_jsxs(MenuItem, { value: preset.id, children: [preset.name, activePreset?.id === preset.id && ' ✓'] }, preset.id)))] })] }), _jsxs(Typography, { variant: "body2", sx: { ml: 2, opacity: 0.7 }, children: ["Active: ", activePreset ? activePreset.name : 'None', " | Presets: ", presets.length] })] }) }), showAdjustments && (_jsxs(Paper, { sx: { p: 3, mb: 3 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "h6", children: ["Bulk Adjustments (", selectedCount, " images selected)"] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { variant: "outlined", size: "small", onClick: handleUndo, disabled: !historyInfo.canUndo, sx: { minWidth: 80 }, children: "Undo" }), _jsx(Button, { variant: "outlined", size: "small", onClick: handleRedo, disabled: !historyInfo.canRedo, sx: { minWidth: 80 }, children: "Redo" }), _jsx(Button, { variant: "outlined", size: "small", onClick: () => handleReset(), disabled: selectedCount === 0, color: "warning", sx: { minWidth: 80 }, children: "Reset" })] })] }), selectedCount === 0 && (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Select one or more images below to enable bulk adjustments" })), _jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: ["History: ", historyInfo.currentIndex + 1, "/", historyInfo.totalStates, " states | Can Undo: ", historyInfo.canUndo ? 'Yes' : 'No', " | Can Redo: ", historyInfo.canRedo ? 'Yes' : 'No'] }), _jsxs(Grid, { container: true, spacing: 3, children: [_jsxs(Grid, { item: true, xs: 12, md: 3, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Color" }), _jsx(AdjustmentControls, { label: "Temperature", onDecreaseMax: handleBulkTempDecreaseMax, onDecrease: handleBulkTempDecrease, onIncrease: handleBulkTempIncrease, onIncreaseMax: handleBulkTempIncreaseMax, disabled: selectedCount === 0 }), _jsx(AdjustmentControls, { label: "Tint", onDecreaseMax: handleBulkTintDecreaseMax, onDecrease: handleBulkTintDecrease, onIncrease: handleBulkTintIncrease, onIncreaseMax: handleBulkTintIncreaseMax, disabled: selectedCount === 0 })] }), _jsxs(Grid, { item: true, xs: 12, md: 3, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Light" }), _jsx(AdjustmentControls, { label: "Exposure", onDecreaseMax: handleBulkExposureDecreaseMax, onDecrease: handleBulkExposureDecrease, onIncrease: handleBulkExposureIncrease, onIncreaseMax: handleBulkExposureIncreaseMax, disabled: selectedCount === 0 }), _jsx(AdjustmentControls, { label: "Contrast", onDecreaseMax: handleBulkContrastDecreaseMax, onDecrease: handleBulkContrastDecrease, onIncrease: handleBulkContrastIncrease, onIncreaseMax: handleBulkContrastIncreaseMax, disabled: selectedCount === 0 })] }), _jsxs(Grid, { item: true, xs: 12, md: 3, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Details" }), _jsx(AdjustmentControls, { label: "Clarity", onDecreaseMax: handleBulkClarityDecreaseMax, onDecrease: handleBulkClarityDecrease, onIncrease: handleBulkClarityIncrease, onIncreaseMax: handleBulkClarityIncreaseMax, disabled: selectedCount === 0 })] })] })] })), _jsx(Grid, { container: true, spacing: 2, children: imageData.map((image) => (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, children: _jsx(ImageCard, { image: image, onToggleSelection: handleToggleImageSelection }) }, image.key))) }), isLoading && imageData.length === 0 && (_jsx(Box, { display: "flex", justifyContent: "center", py: 4, children: _jsx(CircularProgress, {}) })), _jsxs(Box, { mt: 4, children: [_jsx(Divider, {}), _jsx(Typography, { variant: "body2", color: "text.secondary", align: "center", sx: { mt: 2 }, children: "Demo Notes: This uses mock data and simulated API calls. Select images and try the bulk adjustment controls above." })] })] }));
-};
-// Add debugging function to global scope for manual testing
-if (typeof window !== 'undefined') {
-    window.testPresetSelection = () => {
-        console.log("🧪 Manual preset test - this would normally be called by the UI");
-        console.log("🧪 To test properly, use the actual preset dropdown in the UI above");
-    };
-}
-export default HonchoEditorBulkDemo;
+"use strict";
+// import React, { useState, useMemo, useRef, useEffect } from 'react';
+// import {
+//     Box,
+//     Container,
+//     Typography,
+//     Button,
+//     Grid,
+//     Card,
+//     CardMedia,
+//     CardContent,
+//     CardActions,
+//     Checkbox,
+//     Chip,
+//     Alert,
+//     CircularProgress,
+//     ButtonGroup,
+//     Paper,
+//     Divider,
+//     FormControl,
+//     InputLabel,
+//     Select,
+//     MenuItem,
+//     Stack
+// } from '@mui/material';
+// import { PhotoData, useHonchoEditorBulk } from '../editor/useHonchoEditorBulk';
+// import { Controller, AdjustmentState, Preset } from '../editor/type';
+// import { Gallery, ResponseGalleryPaging, CreateEditorTaskRequest, GetHistoryResponse, GetGalleryUpdateTimestampResponse } from '../editor/type';
+// import { useEditorHeadless } from "../../lib/hooks/useEditorHeadless";
+// import { useImageProcessor } from "../../lib/hooks/useImageProcessor";
+// // Mock data for demonstration
+// const createMockGallery = (id: string, adjustments?: Partial<AdjustmentState>): Gallery => ({
+//     id,
+//     uid: 'demo-user',
+//     event_id: 'demo-event',
+//     download: {
+//         key: `${id}-download`,
+//         path: `https://s3.ap-southeast-1.amazonaws.com/dev.pronto.ubersnap/event/689c514d225024b1172ed297/media/95d811da-72a1-4e97-91cc-94446f0a10ad/original.jpeg`,
+//         size: 1024000,
+//         width: 800,
+//         height: 600,
+//     },
+//     download_edited: {
+//         key: `${id}-download-edited`,
+//         path: `https://s3.ap-southeast-1.amazonaws.com/dev.pronto.ubersnap/event/689c514d225024b1172ed297/media/95d811da-72a1-4e97-91cc-94446f0a10ad/original.jpeg`,
+//         size: 1024000,
+//         width: 800,
+//         height: 600,
+//     },
+//     thumbnail: {
+//         key: `${id}-thumb`,
+//         path: `https://s3.ap-southeast-1.amazonaws.com/dev.pronto.ubersnap/event/689c514d225024b1172ed297/media/95d811da-72a1-4e97-91cc-94446f0a10ad/original.jpeg`,
+//         size: 50000,
+//         width: 300,
+//         height: 200,
+//     },
+//     thumbnail_edited: {
+//         key: `${id}-thumb-edited`,
+//         path: `https://s3.ap-southeast-1.amazonaws.com/dev.pronto.ubersnap/event/689c514d225024b1172ed297/media/95d811da-72a1-4e97-91cc-94446f0a10ad/thumbnail.jpeg`,
+//         size: 50000,
+//         width: 300,
+//         height: 200,
+//     },
+//     is_original: true,
+//     available: true,
+//     show_gallery: true,
+//     editor_config: {
+//         color_adjustment: {
+//             temperature: adjustments?.tempScore || 0,
+//             tint: adjustments?.tintScore || 0,
+//             vibrance: adjustments?.vibranceScore || 0,
+//             saturation: adjustments?.saturationScore || 0,
+//             exposure: adjustments?.exposureScore || 0,
+//             highlights: adjustments?.highlightsScore || 0,
+//             shadows: adjustments?.shadowsScore || 0,
+//             whites: adjustments?.whitesScore || 0,
+//             blacks: adjustments?.blacksScore || 0,
+//             contrast: adjustments?.contrastScore || 0,
+//             clarity: adjustments?.clarityScore || 0,
+//             sharpness: adjustments?.sharpnessScore || 0,
+//         },
+//         transformation_adjustment: [],
+//         watermarks: [],
+//     },
+//     log: {
+//         created_at: new Date().toISOString(),
+//         updated_at: new Date().toISOString(),
+//     },
+// });
+// // Mock Controller implementation
+// const createMockController = (): Controller => {
+//     console.log('[Controller] 🏭 createMockController() called - Creating new mock controller instance for bulk editor');
+//     // Generate mock images from 1 to 1277 using picsum.dev static URLs
+//     const mockImages: Gallery[] = [];
+//     for (let i = 1; i <= 1000; i++) {
+//         const id = i.toString();
+//         // let adjustments: Partial<AdjustmentState> | undefined;
+//         mockImages.push(createMockGallery(id, undefined));
+//     }
+//     return {
+//         onGetImage: async (uid: string, imageId: string) => {
+//             console.log(`[Controller] 📷 onGetImage called: uid=${uid}, imageId=${imageId}`);
+//             await new Promise(resolve => setTimeout(resolve, 500));
+//             const image = mockImages.find(img => img.id === imageId);
+//             if (!image) {
+//                 console.error(`[Controller] ❌ Image ${imageId} not found`);
+//                 throw new Error(`Image ${imageId} not found`);
+//             }
+//             console.log(`[Controller] 📷 onGetImage returning image:`, image.id);
+//             return image;
+//         },
+//         getImageList: async (uid: string, eventId: string, page: number) => {
+//             console.log(`[Controller] 📋 getImageList called: uid=${uid}, eventId=${eventId}, page=${page}`);
+//             await new Promise(resolve => setTimeout(resolve, 800));
+//             const pageSize = 1000; // Increased page size for better UX with more images
+//             const startIndex = (page - 1) * pageSize;
+//             const endIndex = startIndex + pageSize;
+//             const pageImages = mockImages.slice(startIndex, endIndex);
+//             const result = {
+//                 gallery: pageImages,
+//                 limit: pageSize,
+//                 current_page: page,
+//                 prev_page: page > 1 ? page - 1 : 0,
+//                 next_page: endIndex < mockImages.length ? page + 1 : 0,
+//                 sum_of_image: pageImages.length,
+//             } as ResponseGalleryPaging;
+//             console.log(`[Controller] 📋 getImageList returning ${pageImages.length} images for page ${page} (total available: ${mockImages.length})`, result);
+//             return result;
+//         },
+//         syncConfig: async (uid: string) => {
+//             console.log(`[Controller] 🔄 syncConfig called: uid=${uid}`);
+//             await new Promise(resolve => setTimeout(resolve, 200));
+//             console.log(`[Controller] 🔄 syncConfig completed for uid=${uid}`);
+//         },
+//         handleBack: (uid: string, imageId: string) => {
+//             console.log(`[Controller] ⬅️ handleBack called: uid=${uid}, imageId=${imageId}`);
+//             console.log(`[Controller] ⬅️ Back to: ${imageId}`);
+//         },
+//         getPresets: async (uid: string) => {
+//             console.log(`[Controller] 🎨 getPresets called: uid=${uid}`);
+//             await new Promise(resolve => setTimeout(resolve, 300));
+//             const presets = [
+//                 { id: '1', name: 'Warm Sunset', is_default: false, temperature: 15, tint: 5, saturation: 8, vibrance: 12, exposure: 2, contrast: 5, highlights: -10, shadows: 8, whites: 3, blacks: -5, clarity: 4, sharpness: 6 },
+//                 { id: '2', name: 'Cool Morning', is_default: false, temperature: -12, tint: -3, saturation: -2, vibrance: 5, exposure: 1, contrast: 3, highlights: -5, shadows: 12, whites: 8, blacks: -8, clarity: 6, sharpness: 4 },
+//                 { id: '3', name: 'High Contrast', is_default: false, temperature: 0, tint: 0, saturation: 5, vibrance: 8, exposure: 0, contrast: 20, highlights: -15, shadows: 15, whites: 10, blacks: -10, clarity: 15, sharpness: 8 },
+//             ] as Preset[];
+//             console.log(`[Controller] 🎨 getPresets returning ${presets.length} presets`, presets.map(p => ({ id: p.id, name: p.name })));
+//             return presets;
+//         },
+//         createPreset: async (uid: string, name: string, settings: AdjustmentState) => {
+//             console.log(`[Controller] ➕ createPreset called: uid=${uid}, name=${name}`, settings);
+//             await new Promise(resolve => setTimeout(resolve, 500));
+//             console.log(`[Controller] ➕ createPreset completed: ${name}`);
+//         },
+//         deletePreset: async (uid: string, presetId: string) => {
+//             console.log(`[Controller] 🗑️ deletePreset called: uid=${uid}, presetId=${presetId}`);
+//             await new Promise(resolve => setTimeout(resolve, 300));
+//             console.log(`[Controller] 🗑️ deletePreset completed: ${presetId}`);
+//         },
+//         updatePreset: async (uid: string, data: Preset) => {
+//             console.log(`[Controller] 🔄 updatePreset called: uid=${uid}`, data);
+//             await new Promise(resolve => setTimeout(resolve, 300));
+//             console.log(`[Controller] 🔄 updatePreset completed:`, data.name);
+//         },
+//         createEditorConfig: async (uid: string, payload: CreateEditorTaskRequest) => {
+//             console.log(`[Controller] ⚙️ createEditorConfig called: uid=${uid}`, payload);
+//             await new Promise(resolve => setTimeout(resolve, 300));
+//             console.log(`[Controller] ⚙️ createEditorConfig completed for gallery_id=${payload.gallery_id}, task_id=${payload.task_id}`);
+//         },
+//         getEditorHistory: async (uid: string, imageId: string): Promise<GetHistoryResponse> => {
+//             console.log(`[Controller] 📚 getEditorHistory called: uid=${uid}, imageId=${imageId}`);
+//             await new Promise(resolve => setTimeout(resolve, 200));
+//             const result = {
+//                 current_task_id: "",
+//                 history: []
+//             };
+//             console.log(`[Controller] 📚 getEditorHistory returning empty history for demo:`, result);
+//             return result;
+//         },
+//         getGalleryUpdateTimestamp: async (uid: string, eventId: string): Promise<GetGalleryUpdateTimestampResponse> => {
+//             console.log(`[Controller] ⏰ getGalleryUpdateTimestamp called: uid=${uid}, eventId=${eventId}`);
+//             await new Promise(resolve => setTimeout(resolve, 100));
+//             const result = {
+//                 gallery: []
+//             };
+//             console.log(`[Controller] ⏰ getGalleryUpdateTimestamp returning:`, result);
+//             return result;
+//         },
+//         setHistoryIndex: async (uid: string, imageId: string, taskId: string) => {
+//             console.log(`[Controller] 📍 setHistoryIndex called: uid=${uid}, imageId=${imageId}, taskId=${taskId}`);
+//             await new Promise(resolve => setTimeout(resolve, 100));
+//             console.log(`[Controller] 📍 setHistoryIndex completed - Set history index for image ${imageId} to task ${taskId}`);
+//         },
+//     };
+// };
+// const AdjustmentControls: React.FC<{
+//     label: string;
+//     onDecreaseMax: () => void;
+//     onDecrease: () => void;
+//     onIncrease: () => void;
+//     onIncreaseMax: () => void;
+//     disabled?: boolean;
+// }> = ({ label, onDecreaseMax, onDecrease, onIncrease, onIncreaseMax, disabled = false }) => (
+//     <Box mb={2}>
+//         <Typography variant="body2" gutterBottom>{label}</Typography>
+//         <ButtonGroup size="small" variant="outlined">
+//             <Button onClick={onDecreaseMax} disabled={disabled}>--</Button>
+//             <Button onClick={onDecrease} disabled={disabled}>-</Button>
+//             <Button onClick={onIncrease} disabled={disabled}>+</Button>
+//             <Button onClick={onIncreaseMax} disabled={disabled}>++</Button>
+//         </ButtonGroup>
+//     </Box>
+// );
+// const ImageCard = React.memo<{
+//     image: PhotoData;
+//     onToggleSelection: (key: string) => void;
+// }>(({ image, onToggleSelection }) => {
+//     const [isVisible, setIsVisible] = useState(false);
+//     const [shouldLoadImage, setShouldLoadImage] = useState(false);
+//     const [isInView, setIsInView] = useState(false);
+//     const cardRef = useRef<HTMLDivElement>(null);
+//     const abortControllerRef = useRef<AbortController | null>(null);
+//     useEffect(() => {
+//         const visibilityObserver = new IntersectionObserver(
+//             ([entry]) => {
+//                 if (entry.isIntersecting) {
+//                     setIsVisible(true);
+//                     setIsInView(true);
+//                     // Delay image loading slightly to ensure smooth scrolling
+//                     setTimeout(() => setShouldLoadImage(true), 100);
+//                     // Don't disconnect here as we want to track when it goes out of view
+//                 } else {
+//                     setIsInView(false);
+//                     // Cancel processing when going out of view
+//                     if (abortControllerRef.current) {
+//                         console.debug(`[ImageCard] Cancelling processing for image ${image.key} - out of view`);
+//                         abortControllerRef.current.abort();
+//                     }
+//                 }
+//             },
+//             {
+//                 threshold: 0.1, // Trigger when 10% of the element is visible
+//                 rootMargin: '100px', // Start loading 100px before the element comes into view
+//             }
+//         );
+//         if (cardRef.current) {
+//             visibilityObserver.observe(cardRef.current);
+//         }
+//         return () => {
+//             visibilityObserver.disconnect();
+//             // Cancel any ongoing processing when component unmounts
+//             if (abortControllerRef.current) {
+//                 abortControllerRef.current.abort();
+//             }
+//         };
+//     }, [image.key]);
+//     // Track adjustments changes for debugging
+//     useEffect(() => {
+//         console.log("[ImageCard] Adjustments changed for image", image.key, ":", image.adjustments);
+//     }, [image.adjustments, image.key]);
+//     // Create a key that changes when adjustments change to force abort controller recreation
+//     const adjustmentsKey = useMemo(() => {
+//         return JSON.stringify(image.adjustments);
+//     }, [image.adjustments]);
+//     // Store the current abort signal in a ref to prevent it from changing on every render
+//     const currentAbortSignalRef = useRef<AbortSignal | undefined>();
+//     const isInitializedRef = useRef(false);
+//     // Much more conservative abort controller management - only recreate when absolutely necessary
+//     useEffect(() => {
+//         if (shouldLoadImage && isInView) {
+//             // Only create abort controller if we don't have one OR if this is the first time
+//             if (!abortControllerRef.current || !isInitializedRef.current) {
+//                 console.debug(`[ImageCard] Creating initial abort controller for image ${image.key}`);
+//                 if (abortControllerRef.current) {
+//                     abortControllerRef.current.abort();
+//                 }
+//                 abortControllerRef.current = new AbortController();
+//                 currentAbortSignalRef.current = abortControllerRef.current.signal;
+//                 isInitializedRef.current = true;
+//             }
+//             // For adjustment changes, don't recreate the controller - let useImageProcessor handle it
+//         } else {
+//             // Only clean up when not visible or not loading
+//             if (abortControllerRef.current && isInitializedRef.current) {
+//                 console.debug(`[ImageCard] Cleaning up abort controller for image ${image.key} - not visible or not loading`);
+//                 abortControllerRef.current.abort();
+//                 abortControllerRef.current = null;
+//                 currentAbortSignalRef.current = undefined;
+//                 isInitializedRef.current = false;
+//             }
+//         }
+//         return () => {
+//             if (abortControllerRef.current) {
+//                 abortControllerRef.current.abort();
+//                 abortControllerRef.current = null;
+//                 currentAbortSignalRef.current = undefined;
+//                 isInitializedRef.current = false;
+//             }
+//         };
+//     }, [shouldLoadImage, isInView, image.key]); // Remove adjustmentsKey from dependencies
+//     // Separate effect to handle adjustment changes without recreating abort controller
+//     useEffect(() => {
+//         if (shouldLoadImage && isInView && isInitializedRef.current) {
+//             console.debug(`[ImageCard] Adjustments changed for image ${image.key} - letting useImageProcessor handle the change`);
+//         }
+//     }, [adjustmentsKey, shouldLoadImage, isInView, image.key]);
+//     // Memoize the useImageProcessor call to prevent unnecessary hook calls
+//     const imageProcessorParams = useMemo(() => ({
+//         photoId: image.key, 
+//         photoSrc: image.src, 
+//         adjustments: image.adjustments, 
+//         enableEditor: shouldLoadImage && isInView, // Only enable when we should load the image AND it's in view
+//         abortSignal: currentAbortSignalRef.current, // Use stable abort signal
+//         frame: null,
+//     }), [image.key, image.src, image.adjustments, shouldLoadImage, isInView]);
+//     // Only call useImageProcessor when the card is visible AND we should load the image AND it's in view
+//     const { processedImageSrc, isProcessingComplete, cancelProcessing, isProcessing } = useImageProcessor(imageProcessorParams);
+//     // Cancel processing when card goes out of view
+//     useEffect(() => {
+//         if (!isInView && isProcessing) {
+//             console.debug(`[ImageCard] Cancelling processing for image ${image.key} - no longer in view`);
+//             cancelProcessing();
+//         }
+//     }, [isInView, isProcessing, cancelProcessing, image.key]);
+//     // Memoize the toggle selection handler to prevent unnecessary re-renders
+//     const handleToggleSelection = useMemo(() => {
+//         return () => onToggleSelection(image.key);
+//     }, [onToggleSelection, image.key]);
+//     const handleCheckboxClick = useMemo(() => {
+//         return (e: React.MouseEvent) => {
+//             e.stopPropagation();
+//             onToggleSelection(image.key);
+//         };
+//     }, [onToggleSelection, image.key]);
+//     // Create placeholder content for non-visible cards
+//     const renderPlaceholder = () => (
+//         <Box
+//             sx={{
+//                 height: 200,
+//                 backgroundColor: 'grey.100',
+//                 display: 'flex',
+//                 alignItems: 'center',
+//                 justifyContent: 'center',
+//                 flexDirection: 'column'
+//             }}
+//         >
+//             <CircularProgress size={24} sx={{ mb: 1 }} />
+//             <Typography variant="caption" color="text.secondary">
+//                 Loading...
+//             </Typography>
+//         </Box>
+//     );
+//     // Create processing indicator
+//     const renderProcessingOverlay = () => {
+//         return isProcessing && shouldLoadImage && isInView ? (
+//             <Box
+//                 sx={{
+//                     position: 'absolute',
+//                     top: 8,
+//                     right: 8,
+//                     backgroundColor: 'rgba(0, 0, 0, 0.8)',
+//                     color: 'white',
+//                     borderRadius: 1,
+//                     px: 1,
+//                     py: 0.5,
+//                     display: 'flex',
+//                     alignItems: 'center',
+//                     gap: 0.5,
+//                     zIndex: 1,
+//                     maxWidth: '120px'
+//                 }}
+//             >
+//                 <CircularProgress size={12} color="inherit" />
+//                 <Typography variant="caption">Processing</Typography>
+//             </Box>
+//         ) : null;
+//     };
+//     return (
+//         <Card
+//             ref={cardRef}
+//             sx={{
+//                 border: image.isSelected ? 2 : 1,
+//                 borderColor: image.isSelected ? 'primary.main' : 'divider',
+//                 cursor: 'pointer',
+//                 transition: 'all 0.2s',
+//                 position: 'relative',
+//                 opacity: 1,
+//                 '&:hover': {
+//                     transform: 'translateY(-2px)',
+//                     boxShadow: 2,
+//                 }
+//             }}
+//             onClick={handleToggleSelection}
+//         >
+//             {shouldLoadImage ? (
+//                 <Box sx={{ position: 'relative', width: '100%', height: '200px' }}>
+//                     <img
+//                         id="image-card-media"
+//                         src={processedImageSrc}
+//                         alt=""
+//                         style={{ 
+//                             width: '100%',
+//                             height: '200px',
+//                             objectFit: 'cover',
+//                             opacity: 1,
+//                             display: 'block'
+//                         }}
+//                         loading="lazy"
+//                     />
+//                     {renderProcessingOverlay()}
+//                 </Box>
+//             ) : (
+//                 renderPlaceholder()
+//             )}
+//             <CardContent sx={{ pb: 1 }}>
+//                 <Box display="flex" alignItems="center" justifyContent="space-between">
+//                     <Typography variant="body2" color="text.secondary">
+//                         Image {image.key}
+//                         {!shouldLoadImage && (
+//                             <Typography 
+//                                 component="span" 
+//                                 variant="caption" 
+//                                 sx={{ ml: 1 }}
+//                             >
+//                                 (waiting...)
+//                             </Typography>
+//                         )}
+//                         {!isInView && shouldLoadImage && (
+//                             <Typography 
+//                                 component="span" 
+//                                 variant="caption" 
+//                                 sx={{ ml: 1, color: 'warning.main' }}
+//                             >
+//                                 (paused)
+//                             </Typography>
+//                         )}
+//                     </Typography>
+//                     <Checkbox
+//                         checked={image.isSelected}
+//                         size="small"
+//                         onClick={handleCheckboxClick}
+//                     />
+//                 </Box>
+//             </CardContent>
+//         </Card>
+//     );
+// }, (prevProps, nextProps) => {
+//     // Custom comparison function for React.memo - be more strict to prevent unnecessary re-renders
+//     const prevAdj = prevProps.image.adjustments || {};
+//     const nextAdj = nextProps.image.adjustments || {};
+//     // Only re-render if key properties actually change
+//     const shouldUpdate = (
+//         prevProps.image.key !== nextProps.image.key ||
+//         prevProps.image.isSelected !== nextProps.image.isSelected ||
+//         prevProps.image.src !== nextProps.image.src ||
+//         // Compare individual adjustment properties to avoid JSON.stringify issues
+//         prevAdj.temperature !== nextAdj.temperature ||
+//         prevAdj.tint !== nextAdj.tint ||
+//         prevAdj.exposure !== nextAdj.exposure ||
+//         prevAdj.contrast !== nextAdj.contrast ||
+//         prevAdj.clarity !== nextAdj.clarity ||
+//         prevAdj.vibrance !== nextAdj.vibrance ||
+//         prevAdj.saturation !== nextAdj.saturation ||
+//         prevAdj.highlights !== nextAdj.highlights ||
+//         prevAdj.shadows !== nextAdj.shadows ||
+//         prevAdj.whites !== nextAdj.whites ||
+//         prevAdj.blacks !== nextAdj.blacks ||
+//         prevAdj.sharpness !== nextAdj.sharpness
+//     );
+//     // Return false to re-render, true to skip re-render
+//     return !shouldUpdate;
+// });
+// export const HonchoEditorBulkDemo: React.FC = () => {
+//     const [controller] = useState(() => createMockController());
+//     const [showAdjustments, setShowAdjustments] = useState(false);
+//     const {
+//         imageData,
+//         isLoading,
+//         error,
+//         selectedIds,
+//         hasMore,
+//         selectedBulkPreset,
+//         presets, // Add presets
+//         activePreset, // Add activePreset
+//         handleToggleImageSelection,
+//         handleLoadMore,
+//         handleRefresh,
+//         handleSelectBulkPreset,
+//         handleBackCallbackBulk,
+//         // Temperature adjustments
+//         handleBulkTempDecreaseMax,
+//         handleBulkTempDecrease,
+//         handleBulkTempIncrease,
+//         handleBulkTempIncreaseMax,
+//         // Tint adjustments
+//         handleBulkTintDecreaseMax,
+//         handleBulkTintDecrease,
+//         handleBulkTintIncrease,
+//         handleBulkTintIncreaseMax,
+//         // Exposure adjustments
+//         handleBulkExposureDecreaseMax,
+//         handleBulkExposureDecrease,
+//         handleBulkExposureIncrease,
+//         handleBulkExposureIncreaseMax,
+//         // Contrast adjustments
+//         handleBulkContrastDecreaseMax,
+//         handleBulkContrastDecrease,
+//         handleBulkContrastIncrease,
+//         handleBulkContrastIncreaseMax,
+//         // Clarity adjustments
+//         handleBulkClarityDecreaseMax,
+//         handleBulkClarityDecrease,
+//         handleBulkClarityIncrease,
+//         handleBulkClarityIncreaseMax,
+//         // History actions
+//         handleUndo,
+//         handleRedo,
+//         handleReset,
+//         historyInfo,
+//     } = useHonchoEditorBulk(controller, 'demo-event', 'demo-user');
+//     const selectedCount = selectedIds.length;
+//     const totalCount = imageData.length;
+//     return (
+//         <Container maxWidth="xl" sx={{ py: 4 }}>
+//             <Typography variant="h3" gutterBottom align="center">
+//                 Honcho Editor Bulk Demo
+//             </Typography>
+//             <Typography variant="subtitle1" align="center" color="text.secondary" gutterBottom>
+//                 This demo shows the useHonchoEditorBulk hook with 1,277 mock images from picsum.dev
+//             </Typography>
+//             {error && (
+//                 <Alert severity="error" sx={{ mb: 3 }}>
+//                     {error}
+//                 </Alert>
+//             )}
+//             <Paper sx={{ p: 3, mb: 3 }}>
+//                 <Stack direction="row" spacing={2} alignItems="center" flexWrap="wrap">
+//                     <Button
+//                         variant="contained"
+//                         onClick={handleRefresh}
+//                         disabled={isLoading}
+//                     >
+//                         {isLoading ? <CircularProgress size={20} /> : 'Refresh Images'}
+//                     </Button>
+//                     <Button
+//                         variant="outlined"
+//                         onClick={() => setShowAdjustments(!showAdjustments)}
+//                     >
+//                         {showAdjustments ? 'Hide' : 'Show'} Adjustments
+//                     </Button>
+//                     <Button
+//                         variant="outlined"
+//                         onClick={() => {
+//                             // Select all images on current page
+//                             imageData.forEach(image => {
+//                                 if (!image.isSelected) {
+//                                     handleToggleImageSelection(image.key);
+//                                 }
+//                             });
+//                         }}
+//                         disabled={isLoading || imageData.length === 0}
+//                     >
+//                         Select All
+//                     </Button>
+//                     <Button
+//                         variant="outlined"
+//                         onClick={() => {
+//                             // Deselect all images
+//                             imageData.forEach(image => {
+//                                 if (image.isSelected) {
+//                                     handleToggleImageSelection(image.key);
+//                                 }
+//                             });
+//                         }}
+//                         disabled={isLoading || selectedCount === 0}
+//                     >
+//                         Clear Selection
+//                     </Button>
+//                     <Button
+//                         variant="outlined"
+//                         onClick={() => {
+//                             console.log('Debug Info:', {
+//                                 selectedIds,
+//                                 selectedCount,
+//                                 showAdjustments,
+//                                 presets: presets.map(p => ({ id: p.id, name: p.name })),
+//                                 selectedBulkPreset,
+//                                 activePreset: activePreset ? { id: activePreset.id, name: activePreset.name } : null,
+//                                 imageData: imageData.map(img => ({ key: img.key, isSelected: img.isSelected }))
+//                             });
+//                         }}
+//                     >
+//                         Debug Selection
+//                     </Button>
+//                     <Button
+//                         variant="outlined"
+//                         onClick={handleBackCallbackBulk}
+//                     >
+//                         Back
+//                     </Button>
+//                     <Chip
+//                         label={`${selectedCount} of ${totalCount} selected`}
+//                         color={selectedCount > 0 ? "primary" : "default"}
+//                     />
+//                     {hasMore && (
+//                         <Button
+//                             variant="outlined"
+//                             onClick={handleLoadMore}
+//                             disabled={isLoading}
+//                         >
+//                             Load More
+//                         </Button>
+//                     )}
+//                     <FormControl size="small" sx={{ minWidth: 150 }}>
+//                         <InputLabel>Bulk Preset</InputLabel>
+//                         <Select
+//                             value={selectedBulkPreset}
+//                             onChange={handleSelectBulkPreset}
+//                             label="Bulk Preset"
+//                             displayEmpty
+//                         >
+//                             <MenuItem value="">
+//                                 <em>No Preset</em>
+//                             </MenuItem>
+//                             {presets.map((preset) => (
+//                                 <MenuItem key={preset.id} value={preset.id}>
+//                                     {preset.name}
+//                                     {activePreset?.id === preset.id && ' ✓'}
+//                                 </MenuItem>
+//                             ))}
+//                         </Select>
+//                     </FormControl>
+//                     <Typography variant="body2" sx={{ ml: 2, opacity: 0.7 }}>
+//                         Active: {activePreset ? activePreset.name : 'None'} | Presets: {presets.length}
+//                     </Typography>
+//                 </Stack>
+//             </Paper>
+//             {showAdjustments && (
+//                 <Paper sx={{ p: 3, mb: 3 }}>
+//                     <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 2 }}>
+//                         <Typography variant="h6">
+//                             Bulk Adjustments ({selectedCount} images selected)
+//                         </Typography>
+//                         <Stack direction="row" spacing={1}>
+//                             <Button
+//                                 variant="outlined"
+//                                 size="small"
+//                                 onClick={handleUndo}
+//                                 disabled={!historyInfo.canUndo}
+//                                 sx={{ minWidth: 80 }}
+//                             >
+//                                 Undo
+//                             </Button>
+//                             <Button
+//                                 variant="outlined"
+//                                 size="small"
+//                                 onClick={handleRedo}
+//                                 disabled={!historyInfo.canRedo}
+//                                 sx={{ minWidth: 80 }}
+//                             >
+//                                 Redo
+//                             </Button>
+//                             <Button
+//                                 variant="outlined"
+//                                 size="small"
+//                                 onClick={() => handleReset()}
+//                                 disabled={selectedCount === 0}
+//                                 color="warning"
+//                                 sx={{ minWidth: 80 }}
+//                             >
+//                                 Reset
+//                             </Button>
+//                         </Stack>
+//                     </Stack>
+//                     {selectedCount === 0 && (
+//                         <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+//                             Select one or more images below to enable bulk adjustments
+//                         </Typography>
+//                     )}
+//                     <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+//                         History: {historyInfo.currentIndex + 1}/{historyInfo.totalStates} states |
+//                         Can Undo: {historyInfo.canUndo ? 'Yes' : 'No'} |
+//                         Can Redo: {historyInfo.canRedo ? 'Yes' : 'No'}
+//                     </Typography>
+//                     <Grid container spacing={3}>
+//                         <Grid item xs={12} md={3}>
+//                             <Typography variant="subtitle2" gutterBottom>Color</Typography>
+//                             <AdjustmentControls
+//                                 label="Temperature"
+//                                 onDecreaseMax={handleBulkTempDecreaseMax}
+//                                 onDecrease={handleBulkTempDecrease}
+//                                 onIncrease={handleBulkTempIncrease}
+//                                 onIncreaseMax={handleBulkTempIncreaseMax}
+//                                 disabled={selectedCount === 0}
+//                             />
+//                             <AdjustmentControls
+//                                 label="Tint"
+//                                 onDecreaseMax={handleBulkTintDecreaseMax}
+//                                 onDecrease={handleBulkTintDecrease}
+//                                 onIncrease={handleBulkTintIncrease}
+//                                 onIncreaseMax={handleBulkTintIncreaseMax}
+//                                 disabled={selectedCount === 0}
+//                             />
+//                         </Grid>
+//                         <Grid item xs={12} md={3}>
+//                             <Typography variant="subtitle2" gutterBottom>Light</Typography>
+//                             <AdjustmentControls
+//                                 label="Exposure"
+//                                 onDecreaseMax={handleBulkExposureDecreaseMax}
+//                                 onDecrease={handleBulkExposureDecrease}
+//                                 onIncrease={handleBulkExposureIncrease}
+//                                 onIncreaseMax={handleBulkExposureIncreaseMax}
+//                                 disabled={selectedCount === 0}
+//                             />
+//                             <AdjustmentControls
+//                                 label="Contrast"
+//                                 onDecreaseMax={handleBulkContrastDecreaseMax}
+//                                 onDecrease={handleBulkContrastDecrease}
+//                                 onIncrease={handleBulkContrastIncrease}
+//                                 onIncreaseMax={handleBulkContrastIncreaseMax}
+//                                 disabled={selectedCount === 0}
+//                             />
+//                         </Grid>
+//                         <Grid item xs={12} md={3}>
+//                             <Typography variant="subtitle2" gutterBottom>Details</Typography>
+//                             <AdjustmentControls
+//                                 label="Clarity"
+//                                 onDecreaseMax={handleBulkClarityDecreaseMax}
+//                                 onDecrease={handleBulkClarityDecrease}
+//                                 onIncrease={handleBulkClarityIncrease}
+//                                 onIncreaseMax={handleBulkClarityIncreaseMax}
+//                                 disabled={selectedCount === 0}
+//                             />
+//                         </Grid>
+//                     </Grid>
+//                 </Paper>
+//             )}
+//             <Grid container spacing={2}>
+//                 {imageData.map((image) => (
+//                     <Grid item xs={12} sm={6} md={4} lg={3} key={image.key}>
+//                         <ImageCard
+//                             image={image}
+//                             onToggleSelection={handleToggleImageSelection}
+//                         />
+//                     </Grid>
+//                 ))}
+//             </Grid>
+//             {isLoading && imageData.length === 0 && (
+//                 <Box display="flex" justifyContent="center" py={4}>
+//                     <CircularProgress />
+//                 </Box>
+//             )}
+//             <Box mt={4}>
+//                 <Divider />
+//                 <Typography variant="body2" color="text.secondary" align="center" sx={{ mt: 2 }}>
+//                     Demo Notes: This uses mock data and simulated API calls.
+//                     Select images and try the bulk adjustment controls above.
+//                 </Typography>
+//             </Box>
+//         </Container>
+//     );
+// };
+// // Add debugging function to global scope for manual testing
+// if (typeof window !== 'undefined') {
+//     (window as any).testPresetSelection = () => {
+//         console.log("🧪 Manual preset test - this would normally be called by the UI");
+//         console.log("🧪 To test properly, use the actual preset dropdown in the UI above");
+//     };
+// }
+// export default HonchoEditorBulkDemo;