@yogiswara/honcho-editor-ui 2.8.10 → 2.9.0

package/dist/hooks/demo/HonchoEditorSingleCleanDemo.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const HonchoEditorSingleCleanDemo: React.FC;
+export default HonchoEditorSingleCleanDemo;

package/dist/hooks/demo/HonchoEditorSingleCleanDemo.js

@@ -0,0 +1,354 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Box, Container, Typography, Button, Card, CardMedia, CardContent, Alert, CircularProgress, Paper, Divider, TextField, Stack, Slider, Grid, IconButton, Tooltip, } from '@mui/material';
+import { NavigateBefore, NavigateNext, Undo, Redo, RestartAlt, ZoomIn, ZoomOut, FitScreen, Home, Palette } from '@mui/icons-material';
+import { useHonchoEditorSingle } from '../editor/useHonchoEditorSingle';
+import { useEditorHeadless } from '../../lib/hooks/useEditorHeadless';
+// Mock data and controller (same as before)
+// Mock data for demonstration
+const createMockGallery = (id, adjustments) => ({
+    id,
+    uid: 'demo-user',
+    event_id: 'demo-event',
+    download: {
+        key: `${id}-download`,
+        path: `https://picsum.photos/800/600?random=${id}`,
+        size: 1024000,
+        width: 800,
+        height: 600,
+    },
+    download_edited: {
+        key: `${id}-download-edited`,
+        path: `https://picsum.photos/800/600?random=${id}`,
+        size: 1024000,
+        width: 800,
+        height: 600,
+    },
+    thumbnail: {
+        key: `${id}-thumb`,
+        path: `https://picsum.photos/300/200?random=${id}`,
+        size: 50000,
+        width: 300,
+        height: 200,
+    },
+    thumbnail_edited: {
+        key: `${id}-thumb-edited`,
+        path: `https://picsum.photos/300/200?random=${id}`,
+        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(),
+    },
+});
+const createMockController = () => {
+    console.log('🏭 createMockController() called - Creating new mock controller instance');
+    const mockImages = [
+        createMockGallery('1', { tempScore: 5, exposureScore: 2 }),
+        createMockGallery('2', { contrastScore: -3, clarityScore: 8 }),
+        createMockGallery('3', { vibranceScore: 10, saturationScore: 5 }),
+        createMockGallery('4', { tempScore: -8, tintScore: 4 }),
+        createMockGallery('5', { exposureScore: -5, shadowsScore: 15 }),
+    ];
+    return {
+        onGetImage: async (uid, imageId) => {
+            console.log(`[Controller] 📷 onGetImage called: uid=${uid}, imageId=${imageId}`);
+            await new Promise(resolve => setTimeout(resolve, 300));
+            const image = mockImages.find(img => img.id === imageId);
+            if (!image)
+                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, 500));
+            const pageSize = 4;
+            const startIndex = (page - 1) * pageSize;
+            const endIndex = startIndex + pageSize;
+            const pageImages = mockImages.slice(startIndex, endIndex);
+            console.log(`[Controller] 📋 getImageList returning ${pageImages.length} images for page ${page}`);
+            return {
+                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,
+            };
+        },
+        syncConfig: async (uid) => {
+            console.log(`[Controller] 🔄 syncConfig called: uid=${uid}`);
+            await new Promise(resolve => setTimeout(resolve, 200));
+        },
+        handleBack: (uid, imageId) => {
+            console.log(`[Controller] ⬅️ handleBack called: uid=${uid}, imageId=${imageId}`);
+            console.log(`Back to gallery from image: ${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(`🎨 getPresets returning ${presets.length} presets`);
+            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(`Creating preset: ${name}`, settings);
+        },
+        deletePreset: async (uid, presetId) => {
+            console.log(`[Controller] 🗑️ deletePreset called: uid=${uid}, presetId=${presetId}`);
+            await new Promise(resolve => setTimeout(resolve, 300));
+            console.log(`Deleting preset: ${presetId}`);
+        },
+        updatePreset: async (uid, data) => {
+            console.log(`[Controller] 🔄 updatePreset called: uid=${uid}`, data);
+            await new Promise(resolve => setTimeout(resolve, 300));
+            console.log(`Updating preset:`, data);
+        },
+        createEditorConfig: async (uid, payload) => {
+            console.log(`[Controller] ⚙️ createEditorConfig called: uid=${uid}`, payload);
+            await new Promise(resolve => setTimeout(resolve, 200));
+            console.log('Creating editor config:', payload);
+        },
+        getEditorHistory: async (uid, imageId) => {
+            console.log(`[Controller] 📚 getEditorHistory called: uid=${uid}, imageId=${imageId}`);
+            await new Promise(resolve => setTimeout(resolve, 200));
+            return { current_task_id: "", history: [] };
+        },
+        getGalleryUpdateTimestamp: async (uid, eventId) => {
+            console.log(`[Controller] ⏰ getGalleryUpdateTimestamp called: uid=${uid}, eventId=${eventId}`);
+            await new Promise(resolve => setTimeout(resolve, 100));
+            return { gallery: [] };
+        },
+        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(`Setting history index for image ${imageId} to task ${taskId}`);
+        },
+    };
+};
+// Dumb Adjustment Slider Component
+const AdjustmentSlider = ({ label, value, field, onValueChange, onDragStart, onDragEnd, isBatchMode, min = -100, max = 100, step = 1 }) => {
+    return (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "body2", gutterBottom: true, children: [label, ": ", value, isBatchMode && (_jsx(Box, { component: "span", sx: {
+                            ml: 1,
+                            px: 1,
+                            py: 0.25,
+                            backgroundColor: 'warning.main',
+                            color: 'warning.contrastText',
+                            borderRadius: 1,
+                            fontSize: '0.75rem',
+                            fontWeight: 'bold'
+                        }, children: "LIVE EDIT" }))] }), _jsx(Slider, { value: value, onChange: (_, newValue) => {
+                    const numValue = newValue;
+                    onValueChange(field, numValue);
+                }, onMouseDown: () => {
+                    if (!isBatchMode) {
+                        onDragStart();
+                    }
+                }, onMouseUp: () => {
+                    onDragEnd();
+                }, onTouchStart: () => {
+                    if (!isBatchMode) {
+                        onDragStart();
+                    }
+                }, onTouchEnd: () => {
+                    onDragEnd();
+                }, min: min, max: max, step: step, valueLabelDisplay: "auto", size: "small" })] }));
+};
+// Dumb Preset Card Component
+const PresetCard = ({ preset, onApply, onDelete, isActive }) => (_jsx(Card, { sx: {
+        border: isActive ? 2 : 1,
+        borderColor: isActive ? 'primary.main' : 'divider',
+        cursor: 'pointer',
+        transition: 'all 0.2s',
+        '&:hover': {
+            boxShadow: 2,
+            transform: 'translateY(-1px)',
+        }
+    }, onClick: () => onApply(preset), children: _jsxs(CardContent, { sx: { p: 2, '&:last-child': { pb: 2 } }, children: [_jsxs(Typography, { variant: "subtitle2", gutterBottom: true, children: [preset.name, isActive && ' ✓'] }), _jsxs(Typography, { variant: "caption", color: "text.secondary", display: "block", sx: { mb: 1 }, children: ["Temp: ", preset.temperature > 0 ? '+' : '', preset.temperature, ", Exp: ", preset.exposure > 0 ? '+' : '', preset.exposure, ", Con: ", preset.contrast > 0 ? '+' : '', preset.contrast] }), _jsxs(Box, { sx: { mt: 1, display: 'flex', gap: 1 }, children: [_jsx(Button, { size: "small", variant: "outlined", onClick: (e) => {
+                            e.stopPropagation();
+                            onApply(preset);
+                        }, children: "Apply" }), _jsx(Button, { size: "small", variant: "outlined", color: "error", onClick: (e) => {
+                            e.stopPropagation();
+                            onDelete(preset.id);
+                        }, children: "Delete" })] })] }) }));
+export const HonchoEditorSingleCleanDemo = () => {
+    // Initialize mock controller
+    const [controller] = useState(() => createMockController());
+    // UI state (only UI-specific state here)
+    const [showAdjustments, setShowAdjustments] = useState(true);
+    const [newPresetName, setNewPresetName] = useState('');
+    const [isImageLoaded, setIsImageLoaded] = useState(false);
+    // Business logic hook - handles adjustments, presets, navigation
+    const { state, actions } = useHonchoEditorSingle({
+        controller,
+        initImageId: '1',
+        firebaseUid: 'demo-user'
+    });
+    // Editor hook - handles editor operations separately
+    const editorHeadless = useEditorHeadless({
+        scriptUrl: '/honcho-photo-editor.js',
+        wasmUrl: '/honcho-photo-editor.wasm'
+    });
+    // Refs for canvas rendering
+    const canvasRef = useRef(null);
+    // Load image when gallery data changes
+    useEffect(() => {
+        if (state.currentImageData && editorHeadless.isReady && editorHeadless.loadImageFromUrl) {
+            console.log('Loading image to editor:', state.currentImageData.id);
+            setIsImageLoaded(false);
+            const imageUrl = state.currentImageData.raw_edited?.path || state.currentImageData.download.path;
+            editorHeadless.loadImageFromUrl(imageUrl)
+                .then((size) => {
+                console.log('Image loaded successfully:', size);
+                setIsImageLoaded(true);
+            })
+                .catch((error) => {
+                console.error('Error loading image:', error);
+                setIsImageLoaded(false);
+            });
+        }
+    }, [state.currentImageData, editorHeadless.isReady, editorHeadless.loadImageFromUrl]);
+    // Apply adjustments to editor when they change
+    useEffect(() => {
+        if (editorHeadless.editor && isImageLoaded && canvasRef.current) {
+            console.log('Applying adjustments to editor:', state.currentAdjustments);
+            // Get converted adjustments from business logic hook
+            const editorAdjustments = actions.getEditorAdjustments();
+            try {
+                editorHeadless.editor.setAdjustments(editorAdjustments);
+                editorHeadless.editor.processImage();
+                editorHeadless.editor.renderToCanvas(canvasRef.current);
+                console.log('Rendered to canvas successfully');
+            }
+            catch (error) {
+                console.error('Error rendering to canvas:', error);
+            }
+        }
+    }, [state.currentAdjustments, editorHeadless.editor, isImageLoaded, actions]);
+    // Helper functions that only handle UI logic
+    const handleCreatePreset = async () => {
+        if (!newPresetName.trim())
+            return;
+        try {
+            const preset = await actions.createPreset(newPresetName, state.currentAdjustments);
+            if (preset) {
+                setNewPresetName('');
+                console.log('Preset created successfully:', preset);
+            }
+            else {
+                console.error('Failed to create preset');
+            }
+        }
+        catch (error) {
+            console.error('Error creating preset:', error);
+        }
+    };
+    const navigationNext = useCallback(() => {
+        // Must be set to avoid adjust without image
+        setIsImageLoaded(false);
+        actions.navigateNext();
+    }, [actions]);
+    const navigationPrev = useCallback(() => {
+        // Must be set to avoid adjust without image
+        setIsImageLoaded(false);
+        actions.navigatePrev();
+    }, [actions]);
+    const getAdjustmentSummary = (adjustments) => {
+        const summary = [];
+        if (adjustments.tempScore !== 0)
+            summary.push(`Temp: ${adjustments.tempScore > 0 ? '+' : ''}${adjustments.tempScore}`);
+        if (adjustments.exposureScore !== 0)
+            summary.push(`Exp: ${adjustments.exposureScore > 0 ? '+' : ''}${adjustments.exposureScore}`);
+        if (adjustments.contrastScore !== 0)
+            summary.push(`Con: ${adjustments.contrastScore > 0 ? '+' : ''}${adjustments.contrastScore}`);
+        if (adjustments.clarityScore !== 0)
+            summary.push(`Cla: ${adjustments.clarityScore > 0 ? '+' : ''}${adjustments.clarityScore}`);
+        return summary.join(', ') || 'No adjustments';
+    };
+    return (_jsxs(Container, { maxWidth: "xl", sx: { py: 4 }, children: [_jsx(Typography, { variant: "h3", gutterBottom: true, align: "center", children: "Clean Honcho Editor Single Image Demo" }), _jsx(Typography, { variant: "subtitle1", align: "center", color: "text.secondary", gutterBottom: true, children: "This is a \"dumb\" view-only component that consumes state from useHonchoEditorSingle" }), (state.galleryError || state.presetsError) && (_jsx(Alert, { severity: "error", sx: { mb: 3 }, children: state.galleryError || state.presetsError })), _jsxs(Grid, { container: true, spacing: 3, children: [_jsx(Grid, { item: true, xs: 12, md: 8, children: _jsxs(Paper, { sx: { p: 2, mb: 2 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "h6", children: ["Image ", state.currentImageData?.id, state.activePreset && ` - ${state.activePreset.name}`] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Tooltip, { title: "Previous Image", children: _jsx("span", { children: _jsx(IconButton, { onClick: navigationPrev, disabled: !state.isPrevAvailable || state.isGalleryLoading, children: _jsx(NavigateBefore, {}) }) }) }), _jsx(Tooltip, { title: "Next Image", children: _jsx("span", { children: _jsx(IconButton, { onClick: navigationNext, disabled: !state.isNextAvailable || state.isGalleryLoading, children: _jsx(NavigateNext, {}) }) }) }), _jsx(Tooltip, { title: "Back to Gallery", children: _jsx(IconButton, { onClick: () => console.log('Back to gallery'), children: _jsx(Home, {}) }) }), _jsx(Divider, { orientation: "vertical", flexItem: true }), _jsx(Tooltip, { title: "Zoom In", children: _jsx(IconButton, { onClick: () => console.log('Zoom in'), children: _jsx(ZoomIn, {}) }) }), _jsx(Tooltip, { title: "Zoom Out", children: _jsx(IconButton, { onClick: () => console.log('Zoom out'), children: _jsx(ZoomOut, {}) }) }), _jsx(Tooltip, { title: "Fit to Screen", children: _jsx(IconButton, { onClick: () => console.log('Fit to screen'), children: _jsx(FitScreen, {}) }) }), _jsx(Typography, { variant: "body2", sx: { alignSelf: 'center', minWidth: '60px' }, children: "100%" })] })] }), _jsxs(Box, { sx: {
+                                        position: 'relative',
+                                        width: '100%',
+                                        height: '500px',
+                                        bgcolor: '#f5f5f5',
+                                        border: 1,
+                                        borderColor: 'divider',
+                                        borderRadius: 1,
+                                        overflow: 'hidden',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center'
+                                    }, children: [editorHeadless.isReady && (_jsx(Box, { sx: {
+                                                position: 'absolute',
+                                                top: 8,
+                                                right: 8,
+                                                zIndex: 3,
+                                                px: 1,
+                                                py: 0.5,
+                                                backgroundColor: 'success.main',
+                                                color: 'success.contrastText',
+                                                borderRadius: 1,
+                                                fontSize: '0.75rem',
+                                                fontWeight: 'bold'
+                                            }, children: "EDITOR ACTIVE" })), state.currentImageData ? (_jsx(CardMedia, { component: "img", image: state.currentImageData.download.path, alt: `Image ${state.currentImageData.id}`, sx: {
+                                                maxWidth: '100%',
+                                                maxHeight: '100%',
+                                                objectFit: 'contain',
+                                                transition: 'transform 0.1s ease-out',
+                                                opacity: editorHeadless.isReady ? 0.3 : 1,
+                                                zIndex: 1
+                                            } })) : state.isGalleryLoading ? (_jsx(CircularProgress, {})) : (_jsx(Typography, { color: "text.secondary", children: "No image loaded" })), _jsx("canvas", { ref: canvasRef, style: {
+                                                position: 'absolute',
+                                                top: 0,
+                                                left: 0,
+                                                width: '100%',
+                                                height: '100%',
+                                                objectFit: 'contain',
+                                                pointerEvents: 'none',
+                                                zIndex: state.currentImageData && editorHeadless.isReady ? 2 : 0,
+                                                opacity: state.currentImageData && editorHeadless.isReady ? 1 : 0,
+                                            } })] }), _jsxs(Stack, { direction: "row", justifyContent: "center", spacing: 1, sx: { mt: 2 }, children: [_jsx(Tooltip, { title: "Undo", children: _jsx("span", { children: _jsx(Button, { variant: "outlined", size: "small", onClick: actions.undo, disabled: !state.canUndo, startIcon: _jsx(Undo, {}), children: "Undo" }) }) }), _jsx(Tooltip, { title: "Redo", children: _jsx("span", { children: _jsx(Button, { variant: "outlined", size: "small", onClick: actions.redo, disabled: !state.canRedo, startIcon: _jsx(Redo, {}), children: "Redo" }) }) }), _jsx(Tooltip, { title: "Reset All", children: _jsx(Button, { variant: "outlined", size: "small", onClick: actions.reset, color: "warning", startIcon: _jsx(RestartAlt, {}), children: "Reset" }) })] }), _jsx(Box, { sx: { mt: 2, p: 1, bgcolor: 'grey.50', borderRadius: 1 }, children: _jsxs(Typography, { variant: "caption", color: "text.secondary", children: ["Current Adjustments: ", getAdjustmentSummary(state.currentAdjustments), state.isBatchMode && (_jsx(Box, { component: "span", sx: {
+                                                    ml: 1,
+                                                    px: 1,
+                                                    py: 0.25,
+                                                    backgroundColor: 'warning.main',
+                                                    color: 'warning.contrastText',
+                                                    borderRadius: 1,
+                                                    fontSize: '0.625rem',
+                                                    fontWeight: 'bold'
+                                                }, children: "BATCH MODE" }))] }) })] }) }), _jsxs(Grid, { item: true, xs: 12, md: 4, children: [_jsxs(Paper, { sx: { p: 2, mb: 2 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [_jsx(Typography, { variant: "h6", children: "Controls" }), _jsxs(Button, { variant: "outlined", size: "small", onClick: () => setShowAdjustments(!showAdjustments), startIcon: _jsx(Palette, {}), children: [showAdjustments ? 'Hide' : 'Show', " Adjustments"] })] }), showAdjustments && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, sx: { mt: 2 }, children: "Color" }), _jsx(AdjustmentSlider, { label: "Temperature", value: state.currentAdjustments.tempScore, field: "tempScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(AdjustmentSlider, { label: "Tint", value: state.currentAdjustments.tintScore, field: "tintScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(AdjustmentSlider, { label: "Vibrance", value: state.currentAdjustments.vibranceScore, field: "vibranceScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(AdjustmentSlider, { label: "Saturation", value: state.currentAdjustments.saturationScore, field: "saturationScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(Divider, { sx: { my: 2 } }), _jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Light" }), _jsx(AdjustmentSlider, { label: "Exposure", value: state.currentAdjustments.exposureScore, field: "exposureScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(AdjustmentSlider, { label: "Contrast", value: state.currentAdjustments.contrastScore, field: "contrastScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(AdjustmentSlider, { label: "Highlights", value: state.currentAdjustments.highlightsScore, field: "highlightsScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(AdjustmentSlider, { label: "Shadows", value: state.currentAdjustments.shadowsScore, field: "shadowsScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(AdjustmentSlider, { label: "Whites", value: state.currentAdjustments.whitesScore, field: "whitesScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(AdjustmentSlider, { label: "Blacks", value: state.currentAdjustments.blacksScore, field: "blacksScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(Divider, { sx: { my: 2 } }), _jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Details" }), _jsx(AdjustmentSlider, { label: "Clarity", value: state.currentAdjustments.clarityScore, field: "clarityScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode }), _jsx(AdjustmentSlider, { label: "Sharpness", value: state.currentAdjustments.sharpnessScore, field: "sharpnessScore", onValueChange: actions.updateAdjustment, onDragStart: actions.startBatchMode, onDragEnd: actions.endBatchMode, isBatchMode: state.isBatchMode })] }))] }), _jsxs(Paper, { sx: { p: 2 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "h6", children: ["Presets (", state.presets.length, ")"] }), _jsx(Button, { variant: "outlined", size: "small", onClick: actions.loadPresets, disabled: state.presetsLoading, children: "Refresh" })] }), state.presetsError && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: state.presetsError })), state.presetsLoading && (_jsx(Box, { display: "flex", justifyContent: "center", py: 2, children: _jsx(CircularProgress, { size: 20 }) })), _jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Quick Actions" }), _jsxs(Stack, { direction: "row", spacing: 1, flexWrap: "wrap", useFlexGap: true, children: [_jsx(Button, { size: "small", variant: !state.activePreset ? "contained" : "outlined", onClick: actions.reset, children: "Reset All" }), state.activePreset && (_jsxs(Button, { size: "small", variant: "outlined", color: "info", disabled: true, children: ["Active: ", state.activePreset.name] }))] })] }), _jsx(Divider, { sx: { my: 2 } }), _jsx(Stack, { spacing: 1, sx: { maxHeight: '300px', overflowY: 'auto' }, children: state.presets.length === 0 && !state.presetsLoading ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { textAlign: 'center', py: 2 }, children: "No presets available. Create your first preset below!" })) : (state.presets.map((preset) => (_jsx(PresetCard, { preset: preset, onApply: actions.applyPreset, onDelete: actions.deletePreset, isActive: state.activePreset?.id === preset.id }, preset.id)))) }), _jsx(Divider, { sx: { my: 2 } }), _jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Create New Preset" }), _jsx(Typography, { variant: "caption", color: "text.secondary", display: "block", sx: { mb: 1 }, children: "Save current adjustments as a new preset" }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(TextField, { placeholder: "Enter preset name...", value: newPresetName, onChange: (e) => setNewPresetName(e.target.value), size: "small", fullWidth: true, onKeyPress: (e) => {
+                                                    if (e.key === 'Enter') {
+                                                        handleCreatePreset();
+                                                    }
+                                                } }), _jsx(Button, { variant: "contained", size: "small", onClick: handleCreatePreset, disabled: !newPresetName.trim() || state.presetsLoading, children: "Create" })] })] })] })] }), _jsxs(Box, { mt: 4, children: [_jsx(Divider, {}), _jsx(Typography, { variant: "body2", color: "text.secondary", align: "center", sx: { mt: 2 }, children: "Clean Architecture Demo: This component is \"dumb\" and only renders UI. All logic is handled by useHonchoEditorSingle hook." }), _jsx(Paper, { sx: { p: 2, mt: 2, bgcolor: 'grey.50' }, children: _jsxs(Typography, { variant: "caption", display: "block", children: [_jsx("strong", { children: "Debug Info:" }), _jsx("br", {}), "Current Image: ", state.currentImageData?.id, " | Gallery Loading: ", state.isGalleryLoading ? 'Yes' : 'No', " | Image Loaded: ", isImageLoaded ? 'Yes' : 'No', " | Next Available: ", state.isNextAvailable ? 'Yes' : 'No', " | Prev Available: ", state.isPrevAvailable ? 'Yes' : 'No', " | Active Preset: ", state.activePreset?.name || 'None', " | Can Undo: ", state.canUndo ? 'Yes' : 'No', " | Can Redo: ", state.canRedo ? 'Yes' : 'No', " | Batch Mode: ", state.isBatchMode ? 'Yes' : 'No', " | Editor Ready: ", editorHeadless.isReady ? 'Yes' : 'No'] }) })] })] }));
+};
+export default HonchoEditorSingleCleanDemo;

package/dist/hooks/demo/index.d.ts

@@ -0,0 +1,2 @@
+export { HonchoEditorBulkDemo } from './HonchoEditorBulkDemo';
+export { HonchoEditorSingleCleanDemo } from './HonchoEditorSingleCleanDemo';

package/dist/hooks/demo/index.js

@@ -0,0 +1,2 @@
+export { HonchoEditorBulkDemo } from './HonchoEditorBulkDemo';
+export { HonchoEditorSingleCleanDemo } from './HonchoEditorSingleCleanDemo';

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

@@ -0,0 +1,174 @@
+interface Log {
+    created_at: string;
+    updated_at: string;
+}
+export interface Content {
+    key: string;
+    path: string;
+    size: number;
+    width: number;
+    height: number;
+}
+export interface ColorAdjustment {
+    temperature: number;
+    tint: number;
+    saturation: number;
+    vibrance: number;
+    exposure: number;
+    contrast: number;
+    highlights: number;
+    shadows: number;
+    whites: number;
+    blacks: number;
+    clarity: number;
+    sharpness: number;
+}
+export interface TransformationAdjustment {
+    angle_score?: number;
+    direction?: "cw" | "ccw";
+    scale_score?: number;
+    keep_dimension?: boolean;
+    flip_mode?: "horizontal" | "vertical" | "mix";
+    aspect_ratio?: string;
+    width?: number;
+    height?: number;
+}
+export interface Watermark {
+    path: string;
+    max_pct: [number, number];
+    anchor: [string, number | null, number[] | null];
+    rotate_deg: [number, "cw" | "ccw"];
+}
+export interface EditorConfig {
+    color_adjustment: ColorAdjustment;
+    transformation_adjustment?: TransformationAdjustment[];
+    watermarks?: Watermark[];
+}
+export interface Content {
+    key: string;
+    path: string;
+    size: number;
+    width: number;
+    height: number;
+}
+export interface GallerySetup {
+    src: string;
+    original: string;
+    srcSet?: string | string[] | undefined;
+    sizes?: string | string[] | undefined;
+    width: number;
+    height: number;
+    alt: string | undefined;
+    key: string | undefined;
+    frame?: string | undefined;
+    isSelected?: boolean | undefined;
+}
+export interface Gallery {
+    id: string;
+    uid: string;
+    event_id: string;
+    download: Content;
+    download_edited: Content;
+    raw?: Content;
+    raw_edited?: Content;
+    raw_preview?: Content;
+    raw_thumbnail?: Content;
+    original?: Content;
+    original_edited?: Content;
+    large?: Content;
+    large_edited?: Content;
+    medium?: Content;
+    medium_edited?: Content;
+    small?: Content;
+    small_edited?: Content;
+    mini?: Content;
+    mini_edited?: Content;
+    create_from?: string[];
+    thumbnail: Content;
+    thumbnail_edited: Content;
+    is_original: boolean;
+    available: boolean;
+    show_gallery: boolean;
+    editor_config?: EditorConfig;
+    log: Log;
+}
+export interface ResponseGalleryPaging {
+    gallery: Gallery[];
+    limit: number;
+    current_page: number;
+    prev_page: number;
+    next_page: number;
+    sum_of_image?: number;
+}
+export interface EditorHistoryEntry {
+    id: string;
+    gallery_id: string;
+    event_id: string;
+    task_id: string;
+    editor_config: EditorConfig;
+    log: Log;
+}
+export interface CreateEditorTaskRequest {
+    gallery_id: string;
+    task_id: string;
+    color_adjustment: ColorAdjustment;
+    replace_from?: string;
+}
+export interface GetHistoryResponse {
+    current_task_id: string;
+    history: EditorHistoryEntry[];
+}
+export interface GetGalleryUpdateTimestampResponse {
+    gallery: string[];
+}
+export interface AdjustmentState {
+    tempScore: number;
+    tintScore: number;
+    vibranceScore: number;
+    saturationScore: number;
+    exposureScore: number;
+    highlightsScore: number;
+    shadowsScore: number;
+    whitesScore: number;
+    blacksScore: number;
+    contrastScore: number;
+    clarityScore: number;
+    sharpnessScore: number;
+}
+export interface Preset {
+    id: string;
+    name: string;
+    is_default: boolean;
+    temperature: number;
+    tint: number;
+    saturation: number;
+    vibrance: number;
+    exposure: number;
+    contrast: number;
+    highlights: number;
+    shadows: number;
+    whites: number;
+    blacks: number;
+    clarity: number;
+    sharpness: number;
+}
+export interface Controller {
+    onGetImage(firebaseUid: string, imageID: string): Promise<Gallery>;
+    getImageList(firebaseUid: string, eventId: string, page: number): Promise<ResponseGalleryPaging>;
+    syncConfig(firebaseUid: string): Promise<void>;
+    handleBack(firebaseUid: string, imageID: string): void;
+    getPresets(firebaseUid: string): Promise<Preset[]>;
+    createPreset(firebaseUid: string, name: string, settings: AdjustmentState): Promise<void>;
+    deletePreset(firebaseUid: string, presetId: string): Promise<void>;
+    updatePreset(firebaseUid: string, data: Preset): Promise<void>;
+    createEditorConfig(firebaseUid: string, payload: CreateEditorTaskRequest): Promise<void>;
+    getEditorHistory(firebaseUid: string, imageID: string): Promise<GetHistoryResponse>;
+    getGalleryUpdateTimestamp(firebaseUid: string, eventID: string, timestamp: number): Promise<GetGalleryUpdateTimestampResponse>;
+    setHistoryIndex(firebaseUid: string, imageID: string, taskID: string): Promise<void>;
+}
+export interface ImageItem {
+    id: string;
+    url: string;
+    file: File;
+}
+export {};

package/dist/hooks/editor/type.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,96 @@
+import { SelectChangeEvent } from "@mui/material";
+import { Controller, Preset } from './type';
+import { AdjustmentValues } from "../../lib/editor/honcho-editor";
+export interface PhotoData {
+    key: string;
+    src: string;
+    original: string;
+    width: number;
+    height: number;
+    alt: string;
+    isSelected: boolean;
+    adjustments?: Partial<AdjustmentValues>;
+}
+/**
+ * Hook for bulk photo editing with multi-image backend synchronization.
+ *
+ * **Multi-Image Backend Sync:**
+ * - Each selected image maintains its own history and backend state
+ * - History operations (undo/redo) trigger separate controller.setHistoryIndex() calls for each selected image
+ * - Preset application triggers separate controller.createEditorConfig() calls for each selected image
+ * - Adjustment changes trigger separate controller.createEditorConfig() calls for each selected image
+ *
+ * **Key Features:**
+ * - Individual history tracking per image with backend persistence
+ * - Bulk operations that respect per-image differences
+ * - Automatic backend synchronization for all state changes
+ * - Comprehensive logging of multi-image operations
+ */
+export declare function useHonchoEditorBulk(controller: Controller, eventID: string, firebaseUid: string): {
+    imageData: PhotoData[];
+    isLoading: boolean;
+    error: string | null;
+    selectedIds: string[];
+    hasMore: boolean;
+    handleBackCallbackBulk: () => void;
+    presets: Preset[];
+    selectedBulkPreset: string;
+    activePreset: Preset | null;
+    handleSelectBulkPreset: (event: SelectChangeEvent<string>) => void;
+    presetActions: import("../usePreset").PresetActions;
+    handleToggleImageSelection: (imageId: string) => void;
+    handleLoadMore: () => Promise<void>;
+    handleRefresh: () => Promise<void>;
+    handleBulkTempDecreaseMax: () => void;
+    handleBulkTempDecrease: () => void;
+    handleBulkTempIncrease: () => void;
+    handleBulkTempIncreaseMax: () => void;
+    handleBulkTintDecreaseMax: () => void;
+    handleBulkTintDecrease: () => void;
+    handleBulkTintIncrease: () => void;
+    handleBulkTintIncreaseMax: () => void;
+    handleBulkVibranceDecreaseMax: () => void;
+    handleBulkVibranceDecrease: () => void;
+    handleBulkVibranceIncrease: () => void;
+    handleBulkVibranceIncreaseMax: () => void;
+    handleBulkSaturationDecreaseMax: () => void;
+    handleBulkSaturationDecrease: () => void;
+    handleBulkSaturationIncrease: () => void;
+    handleBulkSaturationIncreaseMax: () => void;
+    handleBulkExposureDecreaseMax: () => void;
+    handleBulkExposureDecrease: () => void;
+    handleBulkExposureIncrease: () => void;
+    handleBulkExposureIncreaseMax: () => void;
+    handleBulkContrastDecreaseMax: () => void;
+    handleBulkContrastDecrease: () => void;
+    handleBulkContrastIncrease: () => void;
+    handleBulkContrastIncreaseMax: () => void;
+    handleBulkHighlightsDecreaseMax: () => void;
+    handleBulkHighlightsDecrease: () => void;
+    handleBulkHighlightsIncrease: () => void;
+    handleBulkHighlightsIncreaseMax: () => void;
+    handleBulkShadowsDecreaseMax: () => void;
+    handleBulkShadowsDecrease: () => void;
+    handleBulkShadowsIncrease: () => void;
+    handleBulkShadowsIncreaseMax: () => void;
+    handleBulkWhitesDecreaseMax: () => void;
+    handleBulkWhitesDecrease: () => void;
+    handleBulkWhitesIncrease: () => void;
+    handleBulkWhitesIncreaseMax: () => void;
+    handleBulkBlacksDecreaseMax: () => void;
+    handleBulkBlacksDecrease: () => void;
+    handleBulkBlacksIncrease: () => void;
+    handleBulkBlacksIncreaseMax: () => void;
+    handleBulkClarityDecreaseMax: () => void;
+    handleBulkClarityDecrease: () => void;
+    handleBulkClarityIncrease: () => void;
+    handleBulkClarityIncreaseMax: () => void;
+    handleBulkSharpnessDecreaseMax: () => void;
+    handleBulkSharpnessDecrease: () => void;
+    handleBulkSharpnessIncrease: () => void;
+    handleBulkSharpnessIncreaseMax: () => void;
+    handleUndo: () => void;
+    handleRedo: () => void;
+    handleReset: (imageIds?: string[]) => void;
+    historyInfo: import("../useAdjustmentHistoryBatch").BatchHistoryInfo;
+};