@yogiswara/honcho-editor-ui 2.5.10 → 2.6.0

package/dist/components/editor/HBulkPreset.js

@@ -21,13 +21,23 @@ export default function HBulkPreset(props) {
         return (_jsx(CardMedia, { component: "img", image: isExpanded ? "/v1/svg/expand-editor.svg" : "/v1/svg/expanded-editor.svg", sx: { width: "11.67px", height: "5.83px", right: '14px', position: 'absolute', pointerEvents: 'none' } }));
     };
     return (_jsx(_Fragment, { children: _jsx(Stack, { children: _jsxs(Accordion, { sx: accordionStyle, expanded: isPanelExpanded('preset'), onChange: props.onPanelChange('preset'), disableGutters: true, children: [_jsx(AccordionSummary, { sx: { pr: 0 }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { width: '100%' }, children: [_jsx(Typography, { sx: { ...typography.titleMedium, color: colors.surface }, children: "Preset" }), _jsx(CardMedia, { component: "img", image: isPanelExpanded('preset') ? "/v1/svg/expanded-editor.svg" : "/v1/svg/expand-editor.svg", sx: { width: "11.67px", height: "5.83px" } })] }) }), _jsx(AccordionDetails, { sx: { pr: "4px" }, children: _jsx(FormControl, { fullWidth: true, children: _jsxs(Select, { fullWidth: true, value: props.selectedPreset, onChange: props.onSelectPreset, IconComponent: CustomSelectIcon, renderValue: (selectedId) => {
+                                    // Handle empty selection case
+                                    if (!selectedId) {
+                                        return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, opacity: 0.7 }, children: "Select Preset" });
+                                    }
                                     // Uses props.presets to find the name
                                     const selectedPresetObject = props.presets.find(p => p.id === selectedId);
                                     if (!selectedPresetObject) {
-                                        return _jsx(Typography, { sx: { ...typography.bodyMedium }, children: "Select" });
+                                        return _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, opacity: 0.7 }, children: "Select Preset" });
                                     }
                                     return _jsx(Typography, { sx: { ...typography.bodyMedium }, children: selectedPresetObject.name });
                                 }, MenuProps: {
                                     slotProps: { paper: { sx: { backgroundColor: colors.onBackground, color: colors.surface, border: `1px solid ${colors.onSurfaceVariant1}`, mt: '20px', width: '178px', boxShadow: 'none' } } }
-                                }, sx: { border: `1px solid ${colors.outlineVariant}`, height: '44px', width: '215px', boxShadow: 'none' }, children: [props.presets.map((preset) => (_jsx(MenuItem, { value: preset.id, sx: { borderRadius: '4px', py: '4px', my: '0px', px: '0px', mx: '0px' }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-around", alignItems: "center", sx: { width: '100%', py: '0px', px: '0px', mx: '0px', my: '4px' }, children: [_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", mr: '-16px', px: '0px', visibility: props.selectedPreset === preset.id ? 'visible' : 'hidden' } }), _jsx(Typography, { sx: { width: '24px', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', color: colors.surface, pr: "82px", pl: "0px", ml: "0px", justifyContent: 'flex-start', ...typography.bodyMedium }, children: preset.name }), _jsx(IconButton, { "aria-label": `Options for ${preset.name}`, onClick: (event) => props.onPresetMenuClick(event, preset.id), sx: { padding: "0px", margin: "0px", mr: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options", sx: { width: '20px', height: '20px' } }) })] }) }, preset.id))), _jsx(Box, { sx: { px: '16px', my: '8px' }, children: _jsx(Button, { fullWidth: true, variant: "outlined", sx: { ...typography.labelMedium, height: '40px', color: colors.onBackground, backgroundColor: colors.surface, borderRadius: '100px', borderColor: colors.surface, textTransform: 'none', '&:hover': { backgroundColor: '#e0e0e0', borderColor: colors.surface } }, onClick: props.onOpenPresetModal, children: "Create Preset" }) })] }) }) })] }) }) }));
+                                }, sx: { border: `1px solid ${colors.outlineVariant}`, height: '44px', width: '215px', boxShadow: 'none' }, children: [_jsx(MenuItem, { value: "", sx: { borderRadius: '4px', py: '4px', my: '0px', px: '0px', mx: '0px' }, children: _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: { width: '100%', py: '0px', px: '0px', mx: '0px', my: '4px' }, children: _jsx(Typography, { sx: {
+                                                    width: '100%',
+                                                    textAlign: 'center',
+                                                    color: colors.surface,
+                                                    opacity: 0.7,
+                                                    ...typography.bodyMedium
+                                                }, children: "No Preset" }) }) }), props.presets.map((preset) => (_jsx(MenuItem, { value: preset.id, sx: { borderRadius: '4px', py: '4px', my: '0px', px: '0px', mx: '0px' }, children: _jsxs(Stack, { direction: "row", justifyContent: "space-around", alignItems: "center", sx: { width: '100%', py: '0px', px: '0px', mx: '0px', my: '4px' }, children: [_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", mr: '-16px', px: '0px', visibility: props.selectedPreset === preset.id ? 'visible' : 'hidden' } }), _jsx(Typography, { sx: { width: '24px', textWrap: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', color: colors.surface, pr: "82px", pl: "0px", ml: "0px", justifyContent: 'flex-start', ...typography.bodyMedium }, children: preset.name }), _jsx(IconButton, { "aria-label": `Options for ${preset.name}`, onClick: (event) => props.onPresetMenuClick(event, preset.id), sx: { padding: "0px", margin: "0px", mr: "0px" }, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options", sx: { width: '20px', height: '20px' } }) })] }) }, preset.id))), _jsx(Box, { sx: { px: '16px', my: '8px' }, children: _jsx(Button, { fullWidth: true, variant: "outlined", sx: { ...typography.labelMedium, height: '40px', color: colors.onBackground, backgroundColor: colors.surface, borderRadius: '100px', borderColor: colors.surface, textTransform: 'none', '&:hover': { backgroundColor: '#e0e0e0', borderColor: colors.surface } }, onClick: props.onOpenPresetModal, children: "Create Preset" }) })] }) }) })] }) }) }));
 }

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

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

package/dist/hooks/demo/HonchoEditorBulkDemo.js

@@ -0,0 +1,228 @@
+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 { useHonchoEditorBulk } from '../editor/useHonchoEditorBulk';
+// 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(),
+    },
+});
+// Mock Controller implementation
+const createMockController = () => {
+    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'),
+    ];
+    return {
+        onGetImage: async (uid, imageId) => {
+            await new Promise(resolve => setTimeout(resolve, 500));
+            const image = mockImages.find(img => img.id === imageId);
+            if (!image)
+                throw new Error(`Image ${imageId} not found`);
+            return image;
+        },
+        getImageList: async (uid, eventId, page) => {
+            await new Promise(resolve => setTimeout(resolve, 800));
+            const pageSize = 4;
+            const startIndex = (page - 1) * pageSize;
+            const endIndex = startIndex + pageSize;
+            const pageImages = mockImages.slice(startIndex, endIndex);
+            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) => {
+            await new Promise(resolve => setTimeout(resolve, 200));
+        },
+        handleBack: (uid, imageId) => {
+            console.log(`Back to: ${imageId}`);
+        },
+        getPresets: async (uid) => {
+            return [
+                { 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 },
+            ];
+        },
+        createPreset: async (uid, name, settings) => {
+            console.log(`Creating preset: ${name}`, settings);
+        },
+        deletePreset: async (uid, presetId) => {
+            console.log(`Deleting preset: ${presetId}`);
+        },
+        updatePreset: async (uid, data) => {
+            console.log(`Updating preset:`, data);
+        },
+        createEditorConfig: async (uid, payload) => {
+            await new Promise(resolve => setTimeout(resolve, 300));
+            console.log('Creating editor config:', payload);
+        },
+        getEditorHistory: async (uid, imageId) => {
+            await new Promise(resolve => setTimeout(resolve, 200));
+            // Mock history response - return empty history for demo
+            return {
+                current_task_id: "",
+                history: []
+            };
+        },
+        getGalleryUpdateTimestamp: async (uid, eventId) => {
+            await new Promise(resolve => setTimeout(resolve, 100));
+            return {
+                gallery: []
+            };
+        },
+        setHistoryIndex: async (uid, imageId, taskId) => {
+            await new Promise(resolve => setTimeout(resolve, 100));
+            console.log(`Setting history index for image ${imageId} to task ${taskId}`);
+        },
+    };
+};
+const AdjustmentControls = ({ label, onDecreaseMax, onDecrease, onIncrease, onIncreaseMax, disabled = false }) => (_jsxs(Box, { mb: 2, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: label }), _jsxs(ButtonGroup, { size: "small", variant: "outlined", children: [_jsx(Button, { onClick: onDecreaseMax, disabled: disabled, children: "--" }), _jsx(Button, { onClick: onDecrease, disabled: disabled, children: "-" }), _jsx(Button, { onClick: onIncrease, disabled: disabled, children: "+" }), _jsx(Button, { onClick: onIncreaseMax, disabled: disabled, children: "++" })] })] }));
+export const HonchoEditorBulkDemo = () => {
+    const [controller] = useState(() => createMockController());
+    const [showAdjustments, setShowAdjustments] = useState(false);
+    const { imageData, isLoading, error, selectedIds, hasMore, selectedBulkPreset, presets, // Add presets
+    activePreset, // Add activePreset
+    handleToggleImageSelection, handleLoadMore, handleRefresh, handleSelectBulkPreset, handleBackCallbackBulk, 
+    // Temperature adjustments
+    handleBulkTempDecreaseMax, handleBulkTempDecrease, handleBulkTempIncrease, handleBulkTempIncreaseMax, 
+    // Tint adjustments
+    handleBulkTintDecreaseMax, handleBulkTintDecrease, handleBulkTintIncrease, handleBulkTintIncreaseMax, 
+    // Exposure adjustments
+    handleBulkExposureDecreaseMax, handleBulkExposureDecrease, handleBulkExposureIncrease, handleBulkExposureIncreaseMax, 
+    // Contrast adjustments
+    handleBulkContrastDecreaseMax, handleBulkContrastDecrease, handleBulkContrastIncrease, handleBulkContrastIncreaseMax, 
+    // Clarity adjustments
+    handleBulkClarityDecreaseMax, handleBulkClarityDecrease, handleBulkClarityIncrease, handleBulkClarityIncreaseMax, 
+    // History actions
+    handleUndo, handleRedo, handleReset, historyInfo, } = useHonchoEditorBulk(controller, 'demo-event', 'demo-user');
+    // 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: () => {
+                                console.log('Debug Info:', {
+                                    selectedIds,
+                                    selectedCount,
+                                    showAdjustments,
+                                    presets: presets.map(p => ({ id: p.id, name: p.name })),
+                                    selectedBulkPreset,
+                                    activePreset: activePreset ? { id: activePreset.id, name: activePreset.name } : null,
+                                    imageData: imageData.map(img => ({ key: img.key, isSelected: img.isSelected }))
+                                });
+                            }, children: "Debug Selection" }), _jsx(Button, { variant: "outlined", onClick: handleBackCallbackBulk, children: "Back" }), _jsx(Chip, { label: `${selectedCount} of ${totalCount} selected`, color: selectedCount > 0 ? "primary" : "default" }), hasMore && (_jsx(Button, { variant: "outlined", onClick: handleLoadMore, disabled: isLoading, children: "Load More" })), _jsxs(FormControl, { size: "small", sx: { minWidth: 150 }, children: [_jsx(InputLabel, { children: "Bulk Preset" }), _jsxs(Select, { value: selectedBulkPreset, onChange: handleSelectBulkPreset, label: "Bulk Preset", displayEmpty: true, children: [_jsx(MenuItem, { value: "", children: _jsx("em", { children: "No Preset" }) }), presets.map((preset) => (_jsxs(MenuItem, { value: preset.id, children: [preset.name, activePreset?.id === preset.id && ' ✓'] }, preset.id)))] })] }), _jsxs(Typography, { variant: "body2", sx: { ml: 2, opacity: 0.7 }, children: ["Active: ", activePreset ? activePreset.name : 'None', " | Presets: ", presets.length] })] }) }), showAdjustments && (_jsxs(Paper, { sx: { p: 3, mb: 3 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [_jsxs(Typography, { variant: "h6", children: ["Bulk Adjustments (", selectedCount, " images selected)"] }), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Button, { variant: "outlined", size: "small", onClick: handleUndo, disabled: !historyInfo.canUndo, sx: { minWidth: 80 }, children: "Undo" }), _jsx(Button, { variant: "outlined", size: "small", onClick: handleRedo, disabled: !historyInfo.canRedo, sx: { minWidth: 80 }, children: "Redo" }), _jsx(Button, { variant: "outlined", size: "small", onClick: () => handleReset(), disabled: selectedCount === 0, color: "warning", sx: { minWidth: 80 }, children: "Reset" })] })] }), selectedCount === 0 && (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: "Select one or more images below to enable bulk adjustments" })), _jsxs(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: ["History: ", historyInfo.currentIndex + 1, "/", historyInfo.totalStates, " states | Can Undo: ", historyInfo.canUndo ? 'Yes' : 'No', " | Can Redo: ", historyInfo.canRedo ? 'Yes' : 'No'] }), _jsxs(Grid, { container: true, spacing: 3, children: [_jsxs(Grid, { item: true, xs: 12, md: 3, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Color" }), _jsx(AdjustmentControls, { label: "Temperature", onDecreaseMax: handleBulkTempDecreaseMax, onDecrease: handleBulkTempDecrease, onIncrease: handleBulkTempIncrease, onIncreaseMax: handleBulkTempIncreaseMax, disabled: selectedCount === 0 }), _jsx(AdjustmentControls, { label: "Tint", onDecreaseMax: handleBulkTintDecreaseMax, onDecrease: handleBulkTintDecrease, onIncrease: handleBulkTintIncrease, onIncreaseMax: handleBulkTintIncreaseMax, disabled: selectedCount === 0 })] }), _jsxs(Grid, { item: true, xs: 12, md: 3, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Light" }), _jsx(AdjustmentControls, { label: "Exposure", onDecreaseMax: handleBulkExposureDecreaseMax, onDecrease: handleBulkExposureDecrease, onIncrease: handleBulkExposureIncrease, onIncreaseMax: handleBulkExposureIncreaseMax, disabled: selectedCount === 0 }), _jsx(AdjustmentControls, { label: "Contrast", onDecreaseMax: handleBulkContrastDecreaseMax, onDecrease: handleBulkContrastDecrease, onIncrease: handleBulkContrastIncrease, onIncreaseMax: handleBulkContrastIncreaseMax, disabled: selectedCount === 0 })] }), _jsxs(Grid, { item: true, xs: 12, md: 3, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Details" }), _jsx(AdjustmentControls, { label: "Clarity", onDecreaseMax: handleBulkClarityDecreaseMax, onDecrease: handleBulkClarityDecrease, onIncrease: handleBulkClarityIncrease, onIncreaseMax: handleBulkClarityIncreaseMax, disabled: selectedCount === 0 })] })] })] })), _jsx(Grid, { container: true, spacing: 2, children: imageData.map((image) => {
+                    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." })] })] }));
+};
+export default HonchoEditorBulkDemo;

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

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