@yogiswara/honcho-editor-ui 2.7.13 → 2.7.14

package/dist/components/editor/HTabPresetMobile.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-type Preset = {
-    id: string;
-    name: string;
-};
-interface Props {
-    presets: Preset[];
-    selectedPreset: string | null;
-    presetOptionModal: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
-    onOpenPresetModal: () => void;
-    onSelectPreset: (id: string) => void;
-}
-export default function HTabPresetMobile(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HTabPresetMobile.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Stack, IconButton, CardMedia, Button } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-// Static `presets` array has been removed.
-export default function HTabPresetMobile(props) {
-    const typography = useHonchoTypography();
-    const colors = useColors();
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", spacing: 0, sx: { px: "0px", mx: "0px" }, children: [props.presets.map((preset) => (_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(Button, { sx: { ...typography.bodyMedium, color: colors.surface, justifyContent: 'flex-start', flexGrow: 1, textTransform: 'none' }, onClick: () => props.onSelectPreset(preset.id), children: preset.name }), _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [props.selectedPreset === preset.id && (_jsx(CardMedia, { component: "img", image: "v1/svg/check-ratio-editor.svg", sx: { width: "20px", height: "20px", px: "2px" } })), _jsx(IconButton, { "aria-label": preset.name, sx: { px: "8px" }, onClick: (event) => props.presetOptionModal(event, preset.id), children: _jsx(CardMedia, { component: "img", image: "/v1/svg/dots-editor.svg", alt: "Options" }) })] })] }, preset.id))), _jsx(Button, { variant: "text", sx: { color: colors.surface, border: "1px solid", borderColor: colors.surface, borderRadius: "40px", mt: "12px", textTransform: 'none' }, onClick: props.onOpenPresetModal, children: "Create Preset" })] }) }));
-}

package/dist/components/editor/HTextField.d.ts

@@ -1,14 +0,0 @@
-import React from "react";
-interface Props {
-    valueName: string;
-    setName: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-export declare function HTextField(props: Props): import("react/jsx-runtime").JSX.Element;
-interface PropsRename {
-    valueName: string;
-    setName: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onSaveRenamePreset: () => void;
-    onCancel: () => void;
-}
-export declare function HTextFieldRename(props: PropsRename): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HTextField.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextField, Stack, Button } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-export function HTextField(props) {
-    const colors = useColors();
-    const typography = useHonchoTypography();
-    return (_jsx(_Fragment, { children: _jsx(TextField, { autoFocus: true, margin: "dense", id: "name", label: "Preset Name", type: "text", fullWidth: true, variant: "standard", defaultValue: props.valueName, onChange: props.setName, sx: {
-                backgroundColor: "#F6F6F6",
-                p: "7px",
-                borderRadius: "6px",
-                '& .MuiInputLabel-root': {
-                    color: colors.onSurfaceVariant, // A slightly dimmer color for the placeholder
-                    pt: '10px',
-                    pl: '10px',
-                },
-                '& .MuiInput-input': {
-                    color: colors.onSurface,
-                },
-                '& .MuiInputLabel-root.Mui-focused': {
-                    color: colors.onSurfaceVariant, // Or a different color if you prefer
-                },
-            } }) }));
-}
-export function HTextFieldRename(props) {
-    const colors = useColors();
-    const typography = useHonchoTypography();
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", spacing: 2, children: [_jsx(TextField, { autoFocus: true, type: "text", fullWidth: true, variant: "standard", defaultValue: props.valueName, onChange: props.setName, sx: {
-                        backgroundColor: "#F6F6F6",
-                        p: "7px",
-                        borderRadius: "6px",
-                        '& .MuiInputLabel-root': {
-                            pt: '10px',
-                            pl: '10px',
-                        },
-                    } }), _jsxs(Stack, { direction: "row", justifyContent: "end", alignItems: "center", children: [_jsx(Button, { color: "primary", onClick: props.onCancel, sx: {
-                                backgroundColor: colors.surface,
-                                color: colors.onSurface,
-                                '&:hover': {
-                                    backgroundColor: colors.onSurfaceVariant1,
-                                },
-                                ...typography.titleMedium,
-                            }, children: "Cancel" }), _jsx(Button, { color: "primary", onClick: props.onSaveRenamePreset, sx: {
-                                backgroundColor: colors.surface,
-                                color: colors.onSurface,
-                                '&:hover': {
-                                    backgroundColor: colors.onSurfaceVariant1,
-                                },
-                                ...typography.titleMedium,
-                            }, children: "Save" })] })] }) }));
-}

package/dist/components/editor/HWatermarkView.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    onSaveWatermark: () => void;
-    onCancelWatermark: () => void;
-}
-export default function HWatermarkView(props: Props): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/editor/HWatermarkView.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TextField, Button, Stack } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-export default function HWatermarkView(props) {
-    const colors = useColors();
-    const typography = useHonchoTypography();
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { direction: "column", alignItems: "center", spacing: 5, sx: { pt: "20px", color: colors.surface }, children: [_jsx(TextField, { id: "watermark-name", label: "watermark name", variant: "standard", sx: {
-                        '& .MuiInput-underline:before': {
-                            borderBottomColor: colors.surface
-                        },
-                        '& .MuiInputBase-input': {
-                            color: colors.surface
-                        }
-                    } }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(Button, { variant: "text", sx: { color: colors.surface }, children: "Landscape" }), _jsx(Button, { variant: "text", sx: { color: colors.surface }, children: "Portrait" }), _jsx(Button, { variant: "text", sx: { color: colors.surface }, children: "Square" })] })] }) }));
-}

package/dist/components/editor/svg/Tick.d.ts

@@ -1,2 +0,0 @@
-declare const Tick: () => import("react/jsx-runtime").JSX.Element;
-export default Tick;

package/dist/components/editor/svg/Tick.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SvgIcon } from "@mui/material";
-const Tick = () => {
-    return (_jsx(SvgIcon, { style: { width: "29px", height: "29px" }, children: _jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "5", y: "5", width: "22", height: "22", rx: "11", fill: "black" }), _jsx("path", { d: "M20 13L14.5 18.5L12 16", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
-};
-export default Tick;

package/dist/components/modal/HModalDialog.d.ts

@@ -1,12 +0,0 @@
-interface ModalDialogProps {
-    isOpen: boolean;
-    isLoading?: boolean;
-    title?: string;
-    description?: string;
-    onCancel: () => void;
-    onSubmit: () => void;
-    cancelLabel?: string;
-    submitLabel?: string;
-}
-declare function ModalDialog(props: ModalDialogProps): import("react/jsx-runtime").JSX.Element;
-export default ModalDialog;

package/dist/components/modal/HModalDialog.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Typography, useTheme, } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-const defaultPaperStyle = {
-    borderRadius: "28px",
-    width: { xs: "100%", sm: "456px" },
-    boxShadow: "none",
-};
-function ModalDialog(props) {
-    const { isOpen, isLoading = false, title, description, onCancel, onSubmit, cancelLabel = "Cancel", submitLabel = "Confirm", } = props;
-    const theme = useTheme();
-    const typography = useHonchoTypography();
-    const colors = useColors();
-    return (_jsxs(Dialog, { disableScrollLock: true, open: isOpen, onClose: onCancel, "aria-labelledby": "dialog-title", PaperProps: { sx: defaultPaperStyle }, children: ["``", title && (_jsx(DialogTitle, { children: _jsx(Typography, { variant: "labelLarge", color: colors.onSurface, children: title }) })), _jsx(DialogContent, { sx: { padding: { xs: "24px 24px 0 24px", sm: "24px 24px 0 24px" } }, children: description && (_jsx(Typography, { sx: { color: "#656369", fontSize: 14 }, variant: "bodyMedium", children: description })) }), _jsx(DialogActions, { sx: { padding: 3 }, children: _jsxs(Grid, { container: true, direction: "row", justifyContent: "end", alignItems: "center", gap: 1, children: [_jsx(Button, { variant: "text", onClick: onCancel, children: cancelLabel }), _jsx(Button, { variant: "text", color: "error", disabled: isLoading, onClick: () => onSubmit(), children: submitLabel })] }) })] }));
-}
-;
-export default ModalDialog;

package/dist/components/modal/HModalRename.d.ts

@@ -1,14 +0,0 @@
-interface ModalRenameProps {
-    isOpen: boolean;
-    title?: string;
-    description?: string;
-    action?: React.ReactNode;
-    onCancel: () => void;
-    onSubmit: () => void;
-    cancelLabel?: string;
-    submitLabel?: string;
-    valueName: string;
-    setName: (event: React.ChangeEvent<HTMLInputElement>) => void;
-}
-declare function ModalRename(props: ModalRenameProps): import("react/jsx-runtime").JSX.Element;
-export default ModalRename;

package/dist/components/modal/HModalRename.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Grid, Typography, useTheme, TextField, } from "@mui/material";
-import useColors from '../../themes/colors';
-import useHonchoTypography from "../../themes/honchoTheme";
-const defaultPaperStyle = {
-    borderRadius: "28px",
-    width: { xs: "100%", sm: "456px" },
-    boxShadow: "none",
-};
-function ModalRename(props) {
-    const { isOpen, title, onCancel, onSubmit, cancelLabel = "Cancel", submitLabel = "Confirm", valueName, setName } = props;
-    const colors = useColors();
-    const theme = useTheme();
-    const typography = useHonchoTypography();
-    return (_jsxs(Dialog, { disableScrollLock: true, open: isOpen, onClose: onCancel, "aria-labelledby": "dialog-title", PaperProps: { sx: defaultPaperStyle }, children: [title && (_jsx(DialogTitle, { children: _jsx(Typography, { variant: "labelLarge", color: colors.onSurface, children: title }) })), _jsx(DialogContent, { sx: { padding: { xs: "24px 24px 0 24px", sm: "24px 24px 0 24px" } }, children: _jsx(TextField, { autoFocus: true, margin: "dense", id: "name", label: "Preset Name", type: "text", fullWidth: true, variant: "standard", value: valueName, onChange: setName, sx: {
-                        backgroundColor: "#F6F6F6",
-                        p: "7px",
-                        borderRadius: "6px",
-                        '& .MuiInputLabel-root': {
-                            color: colors.onSurfaceVariant,
-                            pt: '10px',
-                            pl: '10px',
-                        },
-                        '& .MuiInput-input': {
-                            color: colors.onSurface,
-                        },
-                        '& .MuiInputLabel-root.Mui-focused': {
-                            color: colors.onSurfaceVariant,
-                        },
-                    } }) }), _jsx(DialogActions, { sx: { padding: 3 }, children: _jsxs(Grid, { container: true, direction: "row", justifyContent: "end", alignItems: "center", gap: 1, children: [_jsx(Button, { variant: "text", onClick: onCancel, children: cancelLabel }), _jsx(Button, { variant: "text", color: "info", 
-                            // The "disabled" attribute has been removed
-                            onClick: onSubmit, children: submitLabel })] }) })] }));
-}
-;
-export default ModalRename;

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

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

package/dist/hooks/demo/HonchoEditorBulkDemo.js

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