@yogiswara/honcho-editor-ui 2.6.14 → 2.7.0

package/dist/components/editor/HAccordionPreset.js

@@ -40,15 +40,16 @@ export default function HAccordionPreset(props) {
                                                 justifyContent: 'flex-start',
                                                 ...typography.bodyMedium
                                             }, onClick: () => props.onSelectPreset(preset.id), children: preset.name })), props.selectedPreset === preset.id && (_jsx(Button, { sx: {
-                                                width: '84px',
+                                                flex: 1,
+                                                minWidth: 0,
                                                 textWrap: 'nowrap',
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
+                                                textTransform: 'none',
                                                 display: 'block',
                                                 color: colors.surface,
-                                                pr: "82px",
-                                                pl: "0px",
-                                                ml: "0px",
+                                                pl: 0,
+                                                ml: 0,
                                                 justifyContent: 'flex-start',
                                                 ...typography.bodyMedium
                                             }, onClick: () => props.onSelectPreset(preset.id), children: preset.name })), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [props.selectedPreset === preset.id && (_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px" } })), _jsx(IconButton, { "aria-label": preset.name, onClick: (event) => props.onPresetMenuClick(event, preset.id), sx: { padding: "0px", margin: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options", sx: { padding: "0px", margin: "0px" } }) })] })] }, preset.id))), _jsx(Button, { variant: "text", sx: { color: colors.surface, border: "1px solid",

package/dist/hooks/demo/HonchoEditorBulkDemo.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { Box, Container, Typography, Button, Grid, Card, CardMedia, CardContent, Checkbox, Chip, Alert, CircularProgress, ButtonGroup, Paper, Divider, FormControl, InputLabel, Select, MenuItem, Stack } from '@mui/material';
+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,
@@ -9,28 +10,28 @@ const createMockGallery = (id, adjustments) => ({
     event_id: 'demo-event',
     download: {
         key: `${id}-download`,
-        path: `https://picsum.photos/800/600?random=${id}`,
+        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://picsum.photos/800/600?random=${id}`,
+        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://picsum.photos/300/200?random=${id}`,
+        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://picsum.photos/300/200?random=${id}`,
+        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,
@@ -64,18 +65,13 @@ const createMockGallery = (id, adjustments) => ({
 // Mock Controller implementation
 const createMockController = () => {
     console.log('[Controller] 🏭 createMockController() called - Creating new mock controller instance for bulk editor');
-    const mockImages = [
-        createMockGallery('1', { tempScore: 5, exposureScore: 2 }),
-        createMockGallery('2'),
-        createMockGallery('3', { contrastScore: -3, clarityScore: 8 }),
-        createMockGallery('4'),
-        createMockGallery('5', { vibranceScore: 10 }),
-        createMockGallery('6'),
-        createMockGallery('7', { tempScore: -8, tintScore: 4 }),
-        createMockGallery('8'),
-        createMockGallery('9'),
-        createMockGallery('10'),
-    ];
+    // 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}`);
@@ -91,7 +87,7 @@ const createMockController = () => {
         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 = 4;
+            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);
@@ -103,7 +99,7 @@ const createMockController = () => {
                 next_page: endIndex < mockImages.length ? page + 1 : 0,
                 sum_of_image: pageImages.length,
             };
-            console.log(`[Controller] 📋 getImageList returning ${pageImages.length} images for page ${page}`, result);
+            console.log(`[Controller] 📋 getImageList returning ${pageImages.length} images for page ${page} (total available: ${mockImages.length})`, result);
             return result;
         },
         syncConfig: async (uid) => {
@@ -173,6 +169,191 @@ const createMockController = () => {
     };
 };
 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
+    }), [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);
@@ -191,42 +372,23 @@ export const HonchoEditorBulkDemo = () => {
     handleBulkClarityDecreaseMax, handleBulkClarityDecrease, handleBulkClarityIncrease, handleBulkClarityIncreaseMax, 
     // History actions
     handleUndo, handleRedo, handleReset, historyInfo, } = useHonchoEditorBulk(controller, 'demo-event', 'demo-user');
-    // Debug logging for preset state - less frequent
-    React.useEffect(() => {
-        const interval = setInterval(() => {
-            console.log('[HonchoEditorBulkDemo] Preset state:', {
-                presets: presets.map(p => ({ id: p.id, name: p.name })),
-                selectedBulkPreset,
-                activePreset: activePreset ? { id: activePreset.id, name: activePreset.name } : null,
-                selectedCount: selectedIds.length
-            });
-        }, 5000); // Every 5 seconds instead of on every render
-        return () => clearInterval(interval);
-    }, [presets, selectedBulkPreset, activePreset, selectedIds.length]);
     const selectedCount = selectedIds.length;
     const totalCount = imageData.length;
-    // Debug logging for presets
-    console.log('[HonchoEditorBulkDemo] Preset state:', {
-        presets: presets.map(p => ({ id: p.id, name: p.name })),
-        selectedBulkPreset,
-        activePreset: activePreset ? { id: activePreset.id, name: activePreset.name } : null,
-        selectedCount
-    });
-    const getAdjustmentSummary = (image) => {
-        const adjustments = [];
-        if (image.tempScore !== 0)
-            adjustments.push(`Temp: ${image.tempScore > 0 ? '+' : ''}${image.tempScore}`);
-        if (image.exposureScore !== 0)
-            adjustments.push(`Exp: ${image.exposureScore > 0 ? '+' : ''}${image.exposureScore}`);
-        if (image.contrastScore !== 0)
-            adjustments.push(`Con: ${image.contrastScore > 0 ? '+' : ''}${image.contrastScore}`);
-        if (image.clarityScore !== 0)
-            adjustments.push(`Cla: ${image.clarityScore > 0 ? '+' : ''}${image.clarityScore}`);
-        if (image.vibranceScore !== 0)
-            adjustments.push(`Vib: ${image.vibranceScore > 0 ? '+' : ''}${image.vibranceScore}`);
-        return adjustments;
-    };
-    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 in action with mock data" }), 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: () => {
+    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,
@@ -236,22 +398,7 @@ export const HonchoEditorBulkDemo = () => {
                                     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) => {
-                    const adjustments = getAdjustmentSummary(image);
-                    return (_jsx(Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 3, children: _jsxs(Card, { sx: {
-                                border: image.isSelected ? 2 : 1,
-                                borderColor: image.isSelected ? 'primary.main' : 'divider',
-                                cursor: 'pointer',
-                                transition: 'all 0.2s',
-                                '&:hover': {
-                                    transform: 'translateY(-2px)',
-                                    boxShadow: 2,
-                                }
-                            }, onClick: () => handleToggleImageSelection(image.key), children: [_jsx(CardMedia, { component: "img", height: "200", image: image.src, alt: image.alt, sx: { objectFit: 'cover' } }), _jsxs(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] }), _jsx(Checkbox, { checked: image.isSelected, size: "small", onClick: (e) => {
-                                                        e.stopPropagation();
-                                                        handleToggleImageSelection(image.key);
-                                                    } })] }), adjustments.length > 0 && (_jsx(Box, { mt: 1, children: _jsx(Stack, { direction: "row", spacing: 0.5, flexWrap: "wrap", children: adjustments.map((adj, index) => (_jsx(Chip, { label: adj, size: "small", variant: "outlined", sx: { fontSize: '0.7rem', height: 20 } }, index))) }) }))] })] }) }, 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." })] })] }));
+                            }, 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') {

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

@@ -41,8 +41,8 @@ export interface Watermark {
 }
 export interface EditorConfig {
     color_adjustment: ColorAdjustment;
-    transformation_adjustment: TransformationAdjustment[];
-    watermarks: Watermark[];
+    transformation_adjustment?: TransformationAdjustment[];
+    watermarks?: Watermark[];
 }
 export interface Content {
     key: string;

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -3,6 +3,7 @@ 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 {
@@ -138,24 +139,22 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
     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)
-        });
+        // 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];
-            console.debug(`Processing image ${item.id}:`, {
-                basePhoto,
-                batchAdjustment,
-                hasBatchAdjustment: !!batchAdjustment
-            });
+            if (batchAdjustment) {
+                const adjustmentsValues = mapAdjustmentStateToAdjustmentEditor(batchAdjustment);
+                basePhoto.adjustments = adjustmentsValues;
+            }
             // Merge batch adjustments over backend adjustments
-            return batchAdjustment ? { ...basePhoto, ...batchAdjustment } : basePhoto;
+            return batchAdjustment ? { ...basePhoto } : basePhoto;
         });
-        console.debug("imageData result:", res);
         return res;
     }, [images, selectedIds, currentBatch.allImages]);
     // Store the latest batchActions.syncAdjustment in a ref to avoid dependency issues

package/dist/lib/context/EditorProcessingService.d.ts

@@ -5,6 +5,7 @@ export interface EditorTask {
     frame: string | null;
     adjustments?: Partial<AdjustmentValues>;
     priority?: number;
+    abortSignal?: AbortSignal;
 }
 export interface EditorResponse {
     id: string;
@@ -24,6 +25,7 @@ export declare class EditorProcessingService {
     requestProcessing(task: EditorTask): Promise<EditorResponse>;
     private scheduleProcessing;
     private processQueue;
+    private removeFromQueue;
     getQueueStatus(): {
         queueLength: number;
         isProcessing: boolean;

package/dist/lib/context/EditorProcessingService.js

@@ -25,6 +25,25 @@ class PriorityQueue {
     clear() {
         return this.heap.splice(0);
     }
+    // Remove item by ID (for cancellation)
+    removeById(id) {
+        const index = this.heap.findIndex(item => item.id === id);
+        if (index === -1)
+            return false;
+        // Replace with last element and heapify
+        const removed = this.heap[index];
+        if (index === this.heap.length - 1) {
+            this.heap.pop();
+        }
+        else {
+            this.heap[index] = this.heap.pop();
+            // Re-heapify from this position
+            this.heapifyDown(index);
+            this.heapifyUp(index);
+        }
+        console.debug(`Removed task ${id} from queue`);
+        return true;
+    }
     heapifyUp(index) {
         while (index > 0) {
             const parentIndex = Math.floor((index - 1) / 2);
@@ -93,6 +112,12 @@ export class EditorProcessingService {
     // Add task to processing queue
     async requestProcessing(task) {
         return new Promise((resolve, reject) => {
+            // Check if already aborted before adding to queue
+            if (task.abortSignal?.aborted) {
+                console.debug(`Task ${task.id} already aborted, not adding to queue`);
+                reject(new Error('Task aborted before processing'));
+                return;
+            }
             // Validate that we have a processor
             if (!this.processImage) {
                 console.warn('No processor available, rejecting task:', task.id);
@@ -105,7 +130,17 @@ export class EditorProcessingService {
                 resolve,
                 reject,
                 timestamp: Date.now(),
+                abortSignal: task.abortSignal,
             };
+            // Set up abort listener to remove from queue if cancelled
+            if (task.abortSignal) {
+                const abortHandler = () => {
+                    console.debug(`Task ${task.id} aborted, removing from queue if still pending`);
+                    this.removeFromQueue(task.id);
+                    reject(new Error('Task aborted'));
+                };
+                task.abortSignal.addEventListener('abort', abortHandler, { once: true });
+            }
             // Add to priority queue - O(log n)
             this.processingQueue.enqueue(queueItem);
             console.debug(`Added task ${task.id} to queue. Queue length: ${this.processingQueue.length}`);
@@ -135,10 +170,26 @@ export class EditorProcessingService {
         while (this.processingQueue.length > 0) {
             // Get highest priority item - O(log n) vs O(n log n) sorting
             const item = this.processingQueue.dequeue();
+            // Check if the item was aborted before processing
+            if (item.abortSignal?.aborted) {
+                console.debug(`Skipping aborted task ${item.id}`);
+                item.reject(new Error('Task aborted'));
+                continue;
+            }
             console.debug(`Processing task ${item.id} (priority: ${item.priority || 0}, queue remaining: ${this.processingQueue.length})`);
             try {
+                // Check abort signal again before actual processing
+                if (item.abortSignal?.aborted) {
+                    throw new Error('Task aborted during processing');
+                }
                 const result = await this.processImage(item);
-                item.resolve(result);
+                // Final check before resolving
+                if (!item.abortSignal?.aborted) {
+                    item.resolve(result);
+                }
+                else {
+                    item.reject(new Error('Task aborted after processing'));
+                }
             }
             catch (error) {
                 console.error(`Failed to process task ${item.id}:`, error);
@@ -161,6 +212,14 @@ export class EditorProcessingService {
         this.notifyStatusChange();
         console.debug('Queue processing complete');
     }
+    // Remove task from queue by ID
+    removeFromQueue(id) {
+        const removed = this.processingQueue.removeById(id);
+        if (removed) {
+            this.notifyStatusChange();
+        }
+        return removed;
+    }
     // Get current queue status
     getQueueStatus() {
         return {

package/dist/lib/hooks/useImageProcessor.d.ts

@@ -6,10 +6,13 @@ interface UseImageProcessorProps {
     adjustments?: Partial<AdjustmentValues>;
     frame?: string | null;
     priority?: 'high' | 'low';
+    abortSignal?: AbortSignal;
 }
 interface UseImageProcessorReturn {
     processedImageSrc: string;
     isProcessingComplete: boolean;
+    cancelProcessing: () => void;
+    isProcessing: boolean;
 }
-export declare function useImageProcessor({ photoId, photoSrc, enableEditor, adjustments, frame, priority, }: UseImageProcessorProps): UseImageProcessorReturn;
+export declare function useImageProcessor({ photoId, photoSrc, enableEditor, adjustments, frame, priority, abortSignal, }: UseImageProcessorProps): UseImageProcessorReturn;
 export {};

package/dist/lib/hooks/useImageProcessor.js

@@ -1,57 +1,113 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { useEditorHighPriority, useEditorLowPriority } from '../hooks/useEditor';
-export function useImageProcessor({ photoId, photoSrc, enableEditor = true, adjustments, frame, priority = 'low', }) {
+export function useImageProcessor({ photoId, photoSrc, enableEditor = true, adjustments, frame, priority = 'low', abortSignal, }) {
     const { processImage, isEditorReady } = priority === 'high'
         ? useEditorHighPriority()
         : useEditorLowPriority();
     // State for processed image and processing status
     const [processedImageSrc, setProcessedImageSrc] = useState(photoSrc);
     const [isProcessingComplete, setIsProcessingComplete] = useState(false);
+    const [isProcessing, setIsProcessing] = useState(false);
+    // Internal abort controller for this hook
+    const abortControllerRef = useRef(null);
+    // Function to cancel current processing
+    const cancelProcessing = () => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+        }
+        setIsProcessing(false);
+        console.debug(`[useImageProcessor] Cancelled processing for image ${photoId}`);
+    };
     // Memoize adjustments to prevent unnecessary effect triggers
     const adjustmentsString = useMemo(() => adjustments ? JSON.stringify(adjustments) : '', [adjustments]);
     const frameMemoized = useMemo(() => frame ? frame : null, [frame]);
     // Process image when adjustments change
     useEffect(() => {
+        // Cancel any previous processing
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
         if (!enableEditor || !isEditorReady || !adjustments) {
             console.debug("Skipping editor processing:", {
                 enableEditor,
                 isEditorReady,
                 hasAdjustments: !!adjustments,
-                hasFrame: frameMemoized
+                hasFrame: frameMemoized,
+                photoId
             });
             setProcessedImageSrc(photoSrc);
             setIsProcessingComplete(true);
+            setIsProcessing(false);
             return;
         }
+        // Create new abort controller for this processing cycle
+        const controller = new AbortController();
+        abortControllerRef.current = controller;
         // Reset processing state when starting new processing
         setIsProcessingComplete(false);
-        let cancelled = false;
+        setIsProcessing(true);
         const processImageWithEditor = async () => {
             try {
+                // Check if already aborted before starting
+                if (controller.signal.aborted || abortSignal?.aborted) {
+                    console.debug(`[useImageProcessor] Aborted before processing started for image ${photoId}`);
+                    return;
+                }
+                console.debug(`[useImageProcessor] Starting processing for image ${photoId}`);
                 const result = await processImage({
                     id: photoId,
                     path: photoSrc,
                     frame: frameMemoized,
-                    adjustments: adjustments
+                    adjustments: adjustments,
+                    abortSignal: controller.signal // Pass the abort signal to the processing service
                 });
-                if (!cancelled) {
+                // Check if aborted after processing completes
+                if (!controller.signal.aborted && !abortSignal?.aborted) {
+                    console.debug(`[useImageProcessor] Completed processing for image ${photoId}`);
                     setProcessedImageSrc(result.path);
                     setIsProcessingComplete(true);
+                    setIsProcessing(false);
+                }
+                else {
+                    console.debug(`[useImageProcessor] Aborted after processing completed for image ${photoId}`);
                 }
             }
             catch (error) {
-                if (!cancelled) {
+                if (error.name === 'AbortError' || controller.signal.aborted || abortSignal?.aborted) {
+                    console.debug(`[useImageProcessor] Processing cancelled for image ${photoId}`);
+                }
+                else {
                     console.error({ error, photoKey: photoId, isEditorReady }, 'Failed to process image with editor');
                 }
+                setIsProcessing(false);
             }
         };
         processImageWithEditor();
         return () => {
-            cancelled = true;
+            // Cleanup: abort the controller when effect cleanup runs
+            controller.abort();
+            if (abortControllerRef.current === controller) {
+                abortControllerRef.current = null;
+            }
+        };
+    }, [photoSrc, adjustmentsString, frameMemoized, enableEditor, isEditorReady, processImage, photoId, abortSignal]);
+    // Listen to external abort signal
+    useEffect(() => {
+        if (!abortSignal)
+            return;
+        const handleAbort = () => {
+            cancelProcessing();
+        };
+        abortSignal.addEventListener('abort', handleAbort);
+        return () => {
+            abortSignal.removeEventListener('abort', handleAbort);
         };
-    }, [photoSrc, adjustmentsString, frameMemoized, enableEditor, isEditorReady, processImage, photoId]);
+    }, [abortSignal]);
     return {
         processedImageSrc,
-        isProcessingComplete
+        isProcessingComplete,
+        cancelProcessing,
+        isProcessing
     };
 }

package/dist/utils/imageLoader.js

@@ -17,7 +17,6 @@ export async function loadImageAsBlob(url) {
         return response.blob();
     }
     catch (error) {
-        console.warn(`Direct fetch failed for ${url}, trying proxy fallback:`, error);
         // Fallback to proxy API if CORS or other fetch issues
         try {
             const proxyUrl = `/api/image?imageUrl=${encodeURIComponent(url)}`;
@@ -38,13 +37,9 @@ export async function loadImageAsBlob(url) {
  */
 export async function loadImageAsFile(url) {
     try {
-        console.debug(`Loading image from URL: ${url}`);
         // Load image as blob with CORS handling
         const imageBlob = await loadImageAsBlob(url);
-        // Convert blob to File for HonchoEditor
-        const imageFile = new File([imageBlob], 'image', { type: imageBlob.type });
-        console.debug('Image loaded and converted to File successfully');
-        return imageFile;
+        return new File([imageBlob], 'image', { type: imageBlob.type });
     }
     catch (error) {
         console.error(`Failed to load image from URL ${url}:`, error);

package/package.json

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