@yogiswara/honcho-editor-ui 2.7.13 → 2.7.14

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

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

package/dist/hooks/demo/HonchoEditorSingleCleanDemo.js

@@ -1,354 +0,0 @@
-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

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

package/dist/hooks/demo/index.js

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

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

@@ -1,174 +0,0 @@
-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

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

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

@@ -1,96 +0,0 @@
-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;
-};