@yogiswara/honcho-editor-ui 2.0.7 → 2.1.1

package/dist/color.d.ts

@@ -0,0 +1,9 @@
+export declare const neutral: {
+    white: string;
+    10: string;
+    25: string;
+    50: string;
+    75: string;
+    100: string;
+    200: string;
+};

package/dist/color.js

@@ -0,0 +1,9 @@
+export const neutral = {
+    white: "#FFFFFF",
+    10: "#F9F9F9",
+    25: "#DBDBDB",
+    50: "#8D8D8D",
+    75: "#575757",
+    100: "#0A0A1C",
+    200: "#000000",
+};

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { GallerySetup } from "../../../hooks/editor/type";
+import { AdjustmentValues } from "../../../lib/editor/honcho-editor";
+interface PhotoData extends GallerySetup {
+    adjustments?: Partial<AdjustmentValues>;
+    frame?: string;
+}
+interface ImageGalleryProps {
+    imageCollection: PhotoData[];
+    isSelectedMode: boolean;
+    isHiddenGallery: boolean;
+    enableEditor: boolean;
+    onPreview: (photo: PhotoData) => () => void;
+    onSelectedMode: () => void;
+    onToggleSelect: (photo: PhotoData) => () => void;
+}
+declare const AlbumImageGallery: React.FC<ImageGalleryProps>;
+export default AlbumImageGallery;

package/dist/components/editor/GalleryAlbum/AlbumImageGallery.js

@@ -1,52 +1,32 @@
-"use strict";
-// "use client";
-// import React from "react";
-// import { Box } from "@mui/material";
-// import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
-// import ImageItem from "../GalleryAlbum/ImageItem";
-// import { GallerySetup } from "../../../hooks/editor/type";
-// interface ImageGalleryProps {
-// 	imageCollection: GallerySetup[];
-// 	isSelectedMode: boolean;
-// 	isHiddenGallery: boolean;
-// 	onPreview: (photo: unknown) => () => void;
-// 	onSelectedMode: () => void;
-// 	onToggleSelect: (photo: unknown) => () => void;
-// }
-// const AlbumImageGallery: React.FC<ImageGalleryProps> = (props) => {
-// 	const {
-// 		imageCollection,
-// 		isSelectedMode,
-// 		isHiddenGallery,
-// 		onPreview,
-// 		onSelectedMode,
-// 		onToggleSelect,
-// 	} = props;
-// 	return (
-// 		<section>
-// 			<ResponsiveMasonry columnsCountBreakPoints={{ 750: 2, 900: 4 }}>
-// 				<Masonry>
-// 					{imageCollection.map((photo, index) => (
-// 						<Box key={photo.key} sx={{ m: 0.5 }}>
-// 							<ImageItem
-// 								margin="0px"
-// 								index={index}
-// 								photo={photo}
-// 								direction="column"
-// 								isFullScreenMode={false}
-// 								isSelected={photo.isSelected}
-// 								isSelectedMode={isSelectedMode}
-// 								isHiddenGallery={isHiddenGallery}
-// 								onPreview={onPreview(photo)}
-// 								onSelectedMode={onSelectedMode}
-// 								onToggleSelect={onToggleSelect(photo)}
-// 								frame={photo.frame}
-// 							/>
-// 						</Box>
-// 					))}
-// 				</Masonry>
-// 			</ResponsiveMasonry>
-// 		</section>
-// 	);
-// };
-// export default AlbumImageGallery;
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+import GalleryImageItem from "./ImageItem";
+const AlbumImageGallery = (props) => {
+    const { imageCollection, isSelectedMode, isHiddenGallery, enableEditor, // Destructure the new prop
+    onPreview, onSelectedMode, onToggleSelect, } = props;
+    return (_jsx("section", { children: _jsx(ResponsiveMasonry, { columnsCountBreakPoints: { 750: 2, 900: 4 }, children: _jsx(Masonry, { children: imageCollection.map((photo, index) => {
+                    // This guard clause is still important for runtime safety.
+                    if (!photo.key || !photo.src) {
+                        console.warn("Skipping item without a key or src:", photo);
+                        return null;
+                    }
+                    // NEW: Create a new object that matches the 'PhotoProps' interface.
+                    // This explicitly tells TypeScript that all required fields are present.
+                    const imageItemPhotoProps = {
+                        key: photo.key,
+                        src: photo.src,
+                        width: photo.width,
+                        height: photo.height,
+                        alt: photo.alt,
+                        // We pass the original photo object in the generic 'photo' property
+                        // in case ImageItem needs it for other operations.
+                        photo: photo,
+                    };
+                    return (_jsx(Box, { sx: { m: 0.5 }, children: _jsx(GalleryImageItem, { margin: "0px", index: index, 
+                            // UPDATED: Pass the new, correctly-typed object.
+                            photo: imageItemPhotoProps, direction: "column", isFullScreenMode: false, isSelected: photo.isSelected, isSelectedMode: isSelectedMode, isHiddenGallery: isHiddenGallery, onPreview: onPreview(photo), onSelectedMode: onSelectedMode, onToggleSelect: onToggleSelect(photo), enableEditor: enableEditor, adjustments: photo.adjustments, frame: photo.frame }) }, photo.key));
+                }) }) }) }));
+};
+export default AlbumImageGallery;

package/dist/components/editor/GalleryAlbum/ImageItem.d.ts

@@ -0,0 +1,28 @@
+import type { AdjustmentValues } from "../../../lib/editor/honcho-editor";
+import { GallerySetup } from "../../../hooks/editor/type";
+interface PhotoProps<T> {
+    src: string;
+    alt?: string;
+    width: number;
+    height: number;
+    key: string;
+    photo?: T;
+}
+interface Props {
+    margin?: any;
+    index: number;
+    photo: PhotoProps<GallerySetup>;
+    direction: "row" | "column";
+    isSelectedMode: boolean;
+    isFullScreenMode: boolean;
+    isSelected?: boolean;
+    isHiddenGallery: boolean;
+    onToggleSelect: () => void;
+    onPreview: () => void;
+    onSelectedMode: () => void;
+    enableEditor?: boolean;
+    adjustments?: Partial<AdjustmentValues>;
+    frame?: string | null;
+}
+declare const GalleryImageItem: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default GalleryImageItem;

package/dist/components/editor/GalleryAlbum/ImageItem.js

@@ -1,246 +1,165 @@
-"use strict";
-// import { CSSProperties, useMemo } from "react";
-// import { Box, CardMedia, useTheme } from "@mui/material";
-// import { TickCircle } from "iconsax-react";
-// import CustomTickIcon from "@/assets/svg/Tick";
-// import { useImageProcessor } from "@/lib/hooks/useImageProcessor";
-// import type { AdjustmentValues } from "@/lib/honcho-editor";
-// import { GallerySetup } from "../../../hooks/editor/type";
-// import { neutral } from "@/color";
-// import { log } from "@/utils/logger";
-// const imgStyle = {
-// 	transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s",
-// 	width: "100%",
-// 	// objectFit: "contain",
-// 	//height: "100%",
-// };
-// const selectedImgStyle = {
-// 	borderRadius: "8px",
-// 	transform: "translateZ(0px) scale3d(1, 1, 1)",
-// 	// transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s"
-// };
-// interface PhotoProps<T> {
-// 	src: string;
-// 	alt: string;
-// 	width: number;
-// 	height: number;
-// 	key: string;
-// 	// other properties
-// 	photo?: T;
-// }
-// interface Props {
-// 	margin?: any;
-// 	index: number;
-// 	photo: PhotoProps<GallerySetup>;
-// 	// onClick: renderImageClickHandler | null
-// 	direction: "row" | "column";
-// 	isSelectedMode: boolean;
-// 	isFullScreenMode: boolean; // this preview Mode we plan to use this component on there
-// 	isSelected: boolean;
-// 	isHiddenGallery: boolean;
-// 	onToggleSelect: () => void;
-// 	onPreview: () => void;
-// 	onSelectedMode: () => void;
-// 	// NEW: Editor interceptor props
-// 	enableEditor?: boolean;
-// 	adjustments?: Partial<AdjustmentValues>;
-// 	frame?: string | null;
-// }
-// const ImageItem = (props: Props) => {
-// 	const { photo, margin, enableEditor = true, adjustments, frame } = props;
-// 	const theme = useTheme();
-// 	// Memoize adjustments to prevent infinite re-renders
-// 	const memoizedAdjustments = useMemo(() => ({
-// 		...adjustments,
-// 		exposure: 50,
-// 	}), [adjustments]);
-// 	// Use the image processor hook
-// 	const { processedImageSrc, isProcessingComplete } = useImageProcessor({
-// 		photoId: photo.key,
-// 		photoSrc: photo.src,
-// 		enableEditor,
-// 		adjustments: memoizedAdjustments,
-// 		frame
-// 	});
-// 	const styleHiddenGallery: CSSProperties = useMemo(() => {
-// 		if (props.isHiddenGallery) {
-// 			return { filter: "blur(20px)", pointerEvents: "none" };
-// 		} else {
-// 			return {};
-// 		}
-// 	}, [props.isHiddenGallery]);
-// 	const commonStyle = useMemo(() => {
-// 		return {
-// 			backgroundColor: neutral.white,
-// 			overflow: "hidden",
-// 			position: "relative",
-// 			width: "100%",
-// 			aspectRatio: `${photo.width}/${photo.height}`,
-// 		};
-// 	}, [props.direction, props.photo]);
-// 	const handleImageClick = () => {
-// 		log.debug(
-// 			{
-// 				isFullMode: props.isFullScreenMode,
-// 				isShowGallery: props.isHiddenGallery,
-// 			},
-// 			"handleImageClick"
-// 		);
-// 		if (!props.isFullScreenMode && !props.isHiddenGallery) {
-// 			if (props.isSelectedMode) {
-// 				log.debug("handleImageClick with toggle select");
-// 				props.onToggleSelect();
-// 			} else {
-// 				log.debug("handleImageClick with preview");
-// 				props.onPreview();
-// 			}
-// 		}
-// 	};
-// 	const handleImageSelectedIconClick = () => {
-// 		log.debug("handleImageSelectedIconClick");
-// 		if (!props.isFullScreenMode) {
-// 			if (!props.isSelectedMode) {
-// 				props.onSelectedMode();
-// 			}
-// 			props.onToggleSelect();
-// 		}
-// 	};
-// 	const imageSx = useMemo(() => {
-// 		const baseStyles = props.isSelected ? {
-// 			...imgStyle,
-// 			...selectedImgStyle,
-// 			...styleHiddenGallery,
-// 			aspectRatio: `${photo.width}/${photo.height}`,
-// 		} : {
-// 			...imgStyle,
-// 			...styleHiddenGallery,
-// 		};
-// 		return {
-// 			...baseStyles,
-// 			opacity: isProcessingComplete ? 1 : 0,
-// 			transition: 'opacity 0.3s ease-in-out',
-// 		};
-// 	}, [props.isSelected, styleHiddenGallery, photo.width, photo.height, isProcessingComplete]);
-// 	const boxNotSelected = useMemo(
-// 		() => ({
-// 			margin,
-// 			// height: photo.height,
-// 			width: "100%",
-// 			...commonStyle,
-// 			transition: ".3s",
-// 			// "&:hover": { padding: "12px", backgroundColor: "primary.light1" },
-// 			"&:-webkit-transition": { transition: ".3s" },
-// 			"&:hover > .checkbox": { display: props.isHiddenGallery ? "" : "block" },
-// 			cursor:
-// 				props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
-// 			backgroundColor: props.isFullScreenMode
-// 				? "rgba(0,0,0,0.1)"
-// 				: "transparent",
-// 		}),
-// 		[margin, commonStyle, props.isHiddenGallery, props.isFullScreenMode]
-// 	);
-// 	const boxSelected = useMemo(
-// 		() => ({
-// 			margin,
-// 			// height: photo.height,
-// 			width: "100%",
-// 			...commonStyle,
-// 			cursor:
-// 				props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
-// 			transition: ".3s",
-// 			"&:-webkit-transition": { transition: ".3s" },
-// 			padding: { xs: "13px 12px", sm: "21.31px 25.56px 21.32px 27.68px" },
-// 			backgroundColor: theme.palette.light["Surface-Variant-2"],
-// 		}),
-// 		[
-// 			margin,
-// 			commonStyle,
-// 			theme.palette.light,
-// 			props.isFullScreenMode,
-// 			props.isHiddenGallery,
-// 		]
-// 	);
-// 	const boxOuterSx = useMemo(() => {
-// 		if (props.isFullScreenMode) {
-// 			return {
-// 				margin,
-// 				width: "100%",
-// 				...commonStyle,
-// 			};
-// 		} else {
-// 			if (props.isSelected) {
-// 				return { ...boxSelected };
-// 			} else {
-// 				return { ...boxNotSelected };
-// 			}
-// 		}
-// 	}, [
-// 		props.isFullScreenMode,
-// 		photo.height,
-// 		photo.width,
-// 		commonStyle,
-// 		boxSelected,
-// 		boxNotSelected,
-// 		margin,
-// 		props.isSelected,
-// 	]);
-// 	return (
-// 		<Box id={"Box_image"} key={photo.key} sx={boxOuterSx} className={"image"}>
-// 			{!props.isHiddenGallery &&
-// 				(props.isSelected ? (
-// 					<Box
-// 						color={"primary.dark1"}
-// 						onClick={handleImageSelectedIconClick}
-// 						sx={{
-// 							position: "absolute",
-// 							width: "19px",
-// 							height: "19px",
-// 							zIndex: "2",
-// 							left: "5px",
-// 							top: "5px",
-// 							borderRadius: { xs: "50%", sm: 0 },
-// 						}}
-// 						className={"checkbox"}
-// 					>
-// 						<CustomTickIcon />
-// 					</Box>
-// 				) : (
-// 					<Box
-// 						color={"neutral.light2"}
-// 						onClick={handleImageSelectedIconClick}
-// 						sx={{
-// 							position: "absolute",
-// 							width: "19px",
-// 							height: "19px",
-// 							zIndex: "1",
-// 							left: "5px",
-// 							top: "5px",
-// 							display: "none",
-// 							visibility: {
-// 								xs: props.isSelectedMode ? "visible" : "hidden",
-// 								sm: "visible",
-// 							},
-// 						}}
-// 						className={"checkbox"}
-// 					>
-// 						<TickCircle
-// 							style={{ width: "24px", height: "24px" }}
-// 							color="white"
-// 						/>
-// 					</Box>
-// 				))}
-// 			<CardMedia
-// 				id="card_media"
-// 				component="img"
-// 				className="image"
-// 				loading="lazy"
-// 				alt={photo.alt}
-// 				sx={imageSx}
-// 				src={processedImageSrc}
-// 				width="100%"
-// 				onClick={handleImageClick}
-// 			/>
-// 		</Box>
-// 	);
-// };
-// export default ImageItem;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Box, CardMedia, useTheme } from "@mui/material";
+import { TickCircle } from "iconsax-react";
+import CustomTickIcon from "../svg/Tick";
+import { neutral } from "../../../color";
+const initialAdjustments = {
+    temperature: 0, tint: 0, saturation: 0, vibrance: 0, exposure: 0, contrast: 0,
+    highlights: 0, shadows: 0, whites: 0, blacks: 0, clarity: 0, sharpness: 0,
+};
+const imgStyle = {
+    transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s",
+    width: "100%",
+    // objectFit: "contain",
+    //height: "100%",
+};
+const selectedImgStyle = {
+    borderRadius: "8px",
+    transform: "translateZ(0px) scale3d(1, 1, 1)",
+    // transition: "transform .135s cubic-bezier(0.0,0.0,0.2,1),opacity linear .15s"
+};
+const GalleryImageItem = (props) => {
+    const { photo, margin, adjustments, isSelected = false } = props;
+    const theme = useTheme();
+    const hasAdjustments = useMemo(() => {
+        if (!adjustments)
+            return false;
+        return Object.keys(initialAdjustments).some(key => adjustments[key] !== initialAdjustments[key]);
+    }, [adjustments]);
+    const styleHiddenGallery = useMemo(() => {
+        if (props.isHiddenGallery) {
+            return { filter: "blur(20px)", pointerEvents: "none" };
+        }
+        else {
+            return {};
+        }
+    }, [props.isHiddenGallery]);
+    const commonStyle = useMemo(() => {
+        return {
+            backgroundColor: neutral.white,
+            overflow: "hidden",
+            position: "relative",
+            width: "100%",
+            aspectRatio: `${photo.width}/${photo.height}`,
+        };
+    }, [props.direction, props.photo]);
+    const handleImageClick = () => {
+        console.debug({
+            isFullMode: props.isFullScreenMode,
+            isShowGallery: props.isHiddenGallery,
+        }, "handleImageClick");
+        if (!props.isFullScreenMode && !props.isHiddenGallery) {
+            if (props.isSelectedMode) {
+                console.debug("handleImageClick with toggle select");
+                props.onToggleSelect();
+            }
+            else {
+                console.debug("handleImageClick with preview");
+                props.onPreview();
+            }
+        }
+    };
+    const handleImageSelectedIconClick = () => {
+        console.debug("handleImageSelectedIconClick");
+        if (!props.isFullScreenMode) {
+            if (!props.isSelectedMode) {
+                props.onSelectedMode();
+            }
+            props.onToggleSelect();
+        }
+    };
+    const imageSx = useMemo(() => {
+        const baseStyles = isSelected ? {
+            ...imgStyle,
+            ...selectedImgStyle,
+            ...styleHiddenGallery,
+            aspectRatio: `${photo.width}/${photo.height}`,
+        } : {
+            ...imgStyle,
+            ...styleHiddenGallery,
+        };
+        return {
+            ...baseStyles,
+            opacity: 1, // Previously depended on isProcessingComplete
+            transition: 'opacity 0.3s ease-in-out',
+        };
+    }, [isSelected, styleHiddenGallery, photo.width, photo.height]);
+    const boxNotSelected = useMemo(() => ({
+        margin,
+        // height: photo.height,
+        ...commonStyle,
+        transition: ".3s",
+        // "&:hover": { padding: "12px", backgroundColor: "primary.light1" },
+        "&:-webkit-transition": { transition: ".3s" },
+        "&:hover > .checkbox": { display: props.isHiddenGallery ? "" : "block" },
+        cursor: props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
+        backgroundColor: props.isFullScreenMode
+            ? "rgba(0,0,0,0.1)"
+            : "transparent",
+    }), [margin, commonStyle, props.isHiddenGallery, props.isFullScreenMode]);
+    const boxSelected = useMemo(() => ({
+        margin,
+        // height: photo.height,
+        ...commonStyle,
+        cursor: props.isFullScreenMode || props.isHiddenGallery ? "inherit" : "pointer",
+        transition: ".3s",
+        "&:-webkit-transition": { transition: ".3s" },
+        padding: { xs: "13px 12px", sm: "21.31px 25.56px 21.32px 27.68px" },
+        backgroundColor: theme.palette.light["Surface-Variant-2"],
+    }), [
+        margin,
+        commonStyle,
+        theme.palette.light,
+        props.isFullScreenMode,
+        props.isHiddenGallery,
+    ]);
+    const boxOuterSx = useMemo(() => {
+        if (props.isFullScreenMode) {
+            return {
+                margin,
+                ...commonStyle,
+            };
+        }
+        else {
+            if (props.isSelected) {
+                return { ...boxSelected };
+            }
+            else {
+                return { ...boxNotSelected };
+            }
+        }
+    }, [
+        props.isFullScreenMode,
+        photo.height,
+        photo.width,
+        commonStyle,
+        boxSelected,
+        boxNotSelected,
+        margin,
+        props.isSelected,
+    ]);
+    return (_jsxs(Box, { id: "Box_image", sx: boxOuterSx, className: "image", children: [!props.isHiddenGallery &&
+                (hasAdjustments && isSelected ? (_jsx(Box, { color: "primary.dark1", onClick: handleImageSelectedIconClick, sx: {
+                        position: "absolute",
+                        width: "19px",
+                        height: "19px",
+                        zIndex: "2",
+                        left: "5px",
+                        top: "5px",
+                        borderRadius: { xs: "50%", sm: 0 },
+                    }, className: "checkbox", children: _jsx(CustomTickIcon, {}) })) : (_jsx(Box, { color: "neutral.light2", onClick: handleImageSelectedIconClick, sx: {
+                        position: "absolute",
+                        width: "19px",
+                        height: "19px",
+                        zIndex: "1",
+                        left: "5px",
+                        top: "5px",
+                        display: "none",
+                        visibility: {
+                            xs: props.isSelectedMode ? "visible" : "hidden",
+                            sm: "visible",
+                        },
+                    }, className: "checkbox", children: _jsx(TickCircle, { style: { width: "24px", height: "24px" }, color: "white" }) }))), _jsx(CardMedia, { id: "card_media", component: "img", className: "image", loading: "lazy", alt: photo.alt ?? "Image", sx: imageSx, src: photo.src, width: "100%", onClick: handleImageClick })] }, photo.key));
+};
+export default GalleryImageItem;

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

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

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

@@ -0,0 +1,6 @@
+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/hooks/editor/useHonchoEditorBulk.d.ts

@@ -1,6 +1,15 @@
 import { SelectChangeEvent } from "@mui/material";
 import { AdjustmentState, ImageItem, Controller, Preset } from './useHonchoEditor';
 import { Gallery, ResponseGalleryPaging } from '../../hooks/editor/type';
+export interface PhotoData {
+    key: string;
+    src: string;
+    width: number;
+    height: number;
+    alt: string;
+    isSelected: boolean;
+    originalData: Gallery;
+}
 export interface ControllerBulk {
     onGetImage(firebaseUid: string, imageID: string): Promise<Gallery>;
     getImageList(firebaseUid: string, eventID: string, page: number): Promise<ResponseGalleryPaging>;
@@ -11,17 +20,26 @@ export interface ControllerBulk {
     deletePreset(firebaseUid: string, presetId: string): Promise<void>;
 }
 export declare function useHonchoEditorBulk(controllerBulk: Controller, eventID: string, firebaseUid: string): {
+    imageCollection: PhotoData[];
+    isSelectedMode: boolean;
+    isLoading: boolean;
+    error: string | null;
+    selectedImageIds: string[];
+    handleSelectedMode: () => void;
+    handleToggleSelect: (photoToToggle: PhotoData) => () => void;
+    handlePreview: (photo: PhotoData) => () => void;
+    handleBackCallbackBulk: () => void;
     isBulkEditing: boolean;
     selectedImages: string;
     imageList: ImageItem[];
-    selectedImageIds: Set<string>;
+    currentBatch: import("../useAdjustmentHistoryBatch").BatchAdjustmentState;
+    selectedIds: string[];
+    allImageIds: string[];
     adjustmentsMap: Map<string, AdjustmentState>;
     selectedBulkPreset: string;
-    handleFileChangeBulk: (event: React.ChangeEvent<HTMLInputElement>) => void;
     handleToggleImageSelection: (imageId: string) => void;
     toggleBulkEditing: () => void;
     handleSelectBulkPreset: (event: SelectChangeEvent<string>) => void;
-    handleBackCallbackBulk: () => void;
     setTempScore: (value: number) => void;
     setTintScore: (value: number) => void;
     setVibranceScore: (value: number) => void;

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -1,81 +1,83 @@
 'use client';
-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, useMemo } from 'react';
 import { useAdjustmentHistory } from '../useAdjustmentHistory';
 import { useAdjustmentHistoryBatch } from '../useAdjustmentHistoryBatch';
+// Helper function to map the API response to the format our UI component needs
+const mapGalleryToPhotoData = (gallery) => ({
+    key: gallery.id,
+    src: gallery.raw_edited?.path || gallery.download?.path || '',
+    width: gallery.raw_edited?.width || 1, // Default to 1 to prevent division by zero
+    height: gallery.raw_edited?.height || 1,
+    alt: gallery.id || 'gallery image',
+    isSelected: false, // All images start as unselected
+    originalData: gallery,
+});
 const initialAdjustments = {
     tempScore: 0, tintScore: 0, vibranceScore: 0, exposureScore: 0, highlightsScore: 0, shadowsScore: 0,
     whitesScore: 0, blacksScore: 0, saturationScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
 };
 const clamp = (value) => Math.max(-100, Math.min(100, value));
+function mapColorAdjustmentToAdjustmentState(adj) {
+    return {
+        tempScore: adj.temperature || 0,
+        tintScore: adj.tint || 0,
+        vibranceScore: adj.vibrance || 0,
+        saturationScore: adj.saturation || 0,
+        exposureScore: adj.exposure || 0,
+        highlightsScore: adj.highlights || 0,
+        shadowsScore: adj.shadows || 0,
+        whitesScore: adj.whites || 0,
+        blacksScore: adj.blacks || 0,
+        contrastScore: adj.contrast || 0,
+        clarityScore: adj.clarity || 0,
+        sharpnessScore: adj.sharpness || 0,
+    };
+}
 export function useHonchoEditorBulk(controllerBulk, eventID, firebaseUid) {
-    const { currentState, actions: historyActions, historyInfo } = useAdjustmentHistory(initialAdjustments);
-    const { currentBatch, selectedIds, allImageIds, actions: batchActions, } = useAdjustmentHistoryBatch({
-        maxSize: historyInfo.historySize,
-        defaultAdjustmentState: currentState,
-    });
+    const { currentState, actions: historyActions, } = useAdjustmentHistory(initialAdjustments);
+    const { currentBatch, selectedIds, allImageIds, actions: batchActions, historyInfo } = useAdjustmentHistoryBatch({});
     // State for Bulk Editing
+    const [imageCollection, setImageCollection] = useState([]);
+    const [isSelectedMode, setIsSelectedMode] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
     const [isBulkEditing, setIsBulkEditing] = useState(false);
     const [selectedImages, setSelectedImages] = useState('Select');
     const [imageList, setImageList] = useState([]);
-    const [selectedImageIds, setSelectedImageIds] = useState(new Set());
     const [adjustmentsMap, setAdjustmentsMap] = useState(new Map());
     const [selectedBulkPreset, setSelectedBulkPreset] = useState('preset1');
+    const [isEditorReady, setIsEditorReady] = useState(false);
+    const selectedImageIds = useMemo(() => imageCollection.filter(p => p.isSelected).map(p => p.key), [imageCollection]);
     const handleBackCallbackBulk = useCallback(() => {
-        // 1. Convert the Set of selected IDs into an array to get the last item.
-        const selectedIdsArray = Array.from(selectedImageIds);
-        // 2. Determine which ID to send back.
-        //    - If any images are selected, get the ID of the LAST one in the array.
-        //    - If no images are selected, fall back to using the eventID.
-        const idToSendBack = selectedIdsArray.length > 0
-            ? selectedIdsArray[selectedIdsArray.length - 1]
-            : eventID;
-        // 3. Check if we have an ID to send, otherwise log a warning.
-        if (!idToSendBack) {
-            console.warn("handleBack called, but no selected image ID or eventID was available.");
-            window.history.back();
-            return;
-        }
-        // 4. Call the controller with the chosen ID (either the last imageId or the eventId).
-        controllerBulk.handleBack(firebaseUid, idToSendBack);
+        const lastSelectedId = selectedImageIds.length > 0 ? selectedImageIds[selectedImageIds.length - 1] : eventID;
+        controllerBulk.handleBack(firebaseUid, lastSelectedId);
     }, [controllerBulk, firebaseUid, selectedImageIds, eventID]);
-    const handleFileChangeBulk = (event) => {
-        const files = event.target?.files;
-        if (!files || files.length <= 1) {
-            // If it's not a bulk operation, we clear the state.
-            setIsBulkEditing(false);
-            setImageList([]);
-            setSelectedImageIds(new Set());
-            setAdjustmentsMap(new Map());
-            return;
+    const handleSelectedMode = useCallback(() => {
+        setIsSelectedMode(true);
+    }, []);
+    const handleToggleSelect = useCallback((photoToToggle) => () => {
+        setImageCollection(currentCollection => currentCollection.map(photo => photo.key === photoToToggle.key
+            ? { ...photo, isSelected: !photo.isSelected }
+            : photo));
+        // Automatically enter selection mode on first selection
+        if (!isSelectedMode) {
+            setIsSelectedMode(true);
         }
-        ;
-        setIsBulkEditing(true);
-        const newImageList = Array.from(files).map((file, index) => ({
-            id: `${file.name}-${Date.now()}-${index}`,
-            name: file.name,
-            file: file,
-            url: URL.createObjectURL(file),
-        }));
-        const newAdjustmentsMap = new Map();
-        newImageList.forEach(image => {
-            newAdjustmentsMap.set(image.id, { ...initialAdjustments });
-        });
-        setAdjustmentsMap(newAdjustmentsMap);
-        setImageList(newImageList);
-        setSelectedImageIds(new Set(newImageList.map(img => img.id)));
-    };
-    const handleToggleImageSelection = useCallback((imageId) => {
-        const newSelectedIds = new Set(selectedImageIds);
-        if (newSelectedIds.has(imageId)) {
-            if (newSelectedIds.size > 1) { // Prevent deselecting the last image
-                newSelectedIds.delete(imageId);
-            }
-        }
-        else {
-            newSelectedIds.add(imageId);
-        }
-        setSelectedImageIds(newSelectedIds);
-    }, [selectedImageIds]);
+    }, [isSelectedMode]);
+    const handlePreview = useCallback((photo) => () => {
+        console.log("Previewing image:", photo.key);
+    }, []);
+    // const handleToggleImageSelection = useCallback((imageId: string) => {
+    //     const newSelectedIds = new Set(selectedImageIds);
+    //     if (newSelectedIds.has(imageId)) {
+    //         if (newSelectedIds.size > 1) { // Prevent deselecting the last image
+    //             newSelectedIds.delete(imageId);
+    //         }
+    //     } else {
+    //         newSelectedIds.add(imageId);
+    //     }
+    //     setSelectedImageIds(newSelectedIds);
+    // }, [selectedImageIds]);
     const toggleBulkEditing = () => {
         setIsBulkEditing(prev => {
             const isNowBulk = !prev;
@@ -85,19 +87,6 @@ export function useHonchoEditorBulk(controllerBulk, eventID, firebaseUid) {
     };
     const handleSelectBulkPreset = (event) => setSelectedBulkPreset(event.target.value);
     // This factory creates functions that adjust a value for all selected images
-    const createAbsoluteSetter = (key, setter) => (value) => {
-        setter(value); // Update UI slider
-        if (isBulkEditing) {
-            setAdjustmentsMap(prevMap => {
-                const newMap = new Map(prevMap);
-                selectedImageIds.forEach(id => {
-                    const currentState = newMap.get(id) || initialAdjustments;
-                    newMap.set(id, { ...currentState, [key]: value });
-                });
-                return newMap;
-            });
-        }
-    };
     const updateAdjustments = useCallback((newValues) => {
         const newState = { ...currentState, ...newValues };
         historyActions.pushState(newState);
@@ -108,18 +97,6 @@ export function useHonchoEditorBulk(controllerBulk, eventID, firebaseUid) {
         const newValue = clamp(currentValue + amount);
         updateAdjustments({ [key]: newValue });
     };
-    useEffect(() => {
-        if (!isBulkEditing)
-            return;
-        setAdjustmentsMap(prevMap => {
-            const newMap = new Map(prevMap);
-            selectedImageIds.forEach(id => {
-                // Apply the new global state to each selected image
-                newMap.set(id, currentState);
-            });
-            return newMap;
-        });
-    }, [currentState, selectedImageIds, isBulkEditing]);
     const setTempScore = (value) => updateAdjustments({ tempScore: value });
     const setTintScore = (value) => updateAdjustments({ tintScore: value });
     const setVibranceScore = (value) => updateAdjustments({ vibranceScore: value });
@@ -180,18 +157,57 @@ export function useHonchoEditorBulk(controllerBulk, eventID, firebaseUid) {
     const handleBulkSharpnessDecrease = createRelativeAdjuster('sharpnessScore', -5);
     const handleBulkSharpnessIncrease = createRelativeAdjuster('sharpnessScore', 5);
     const handleBulkSharpnessIncreaseMax = createRelativeAdjuster('sharpnessScore', 20);
+    // Extract selected image IDs for other operations (like applying bulk adjustments)
+    useEffect(() => {
+        if (eventID && firebaseUid) {
+            setIsLoading(true);
+            setError(null);
+            controllerBulk.getImageList(firebaseUid, eventID, 1)
+                .then(response => {
+                const images = response.gallery;
+                // Prepare the initial data for the batch history hook
+                const imageConfigs = images.map(img => ({
+                    imageId: img.id,
+                    adjustment: img.editor_config?.color_adjustment
+                        ? mapColorAdjustmentToAdjustmentState(img.editor_config.color_adjustment)
+                        : initialAdjustments
+                }));
+                // Populate the batch history with all fetched images
+                batchActions.setSelection(imageConfigs);
+                // Immediately clear the selection so no images are selected by default
+                batchActions.clearSelection();
+            })
+                .catch(err => {
+                console.error("Failed to fetch gallery:", err);
+                setError(err.message || "Could not load images.");
+            })
+                .finally(() => {
+                setIsLoading(false);
+            });
+        }
+    }, [eventID, firebaseUid, controllerBulk, batchActions]);
     return {
+        imageCollection,
+        isSelectedMode,
+        isLoading,
+        error,
+        selectedImageIds,
+        // Gallery Handlers
+        handleSelectedMode,
+        handleToggleSelect,
+        handlePreview,
+        handleBackCallbackBulk,
         isBulkEditing,
         selectedImages,
         imageList,
-        selectedImageIds,
+        currentBatch,
+        selectedIds,
+        allImageIds,
         adjustmentsMap,
         selectedBulkPreset,
-        handleFileChangeBulk,
-        handleToggleImageSelection,
+        handleToggleImageSelection: batchActions.toggleSelection,
         toggleBulkEditing,
         handleSelectBulkPreset,
-        handleBackCallbackBulk,
         // Bulk Adjustment Handlers
         setTempScore,
         setTintScore,

package/dist/index.d.ts

@@ -20,6 +20,8 @@ export { default as HModalMobile } from './components/editor/HModalMobile';
 export { default as HPresetOptionsMenu } from './components/editor/HPresetOptionMenu';
 export { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox, HAlertPresetSave } from './components/editor/HAlertBox';
 export { useHonchoEditorBulk } from './hooks/editor/useHonchoEditorBulk';
+export { default as AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
+export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
 export { useAdjustmentHistory, type UseAdjustmentHistoryReturn, type HistoryInfo, type HistoryActions, type HistoryConfig } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type ImageAdjustmentConfig, type BatchHistoryInfo, type BatchHistoryActions, type BatchHistoryConfig } from './hooks/useAdjustmentHistoryBatch';
 export { default as useColors } from './themes/colors';

package/dist/index.js

@@ -18,6 +18,8 @@ export { default as HModalMobile } from './components/editor/HModalMobile';
 export { default as HPresetOptionsMenu } from './components/editor/HPresetOptionMenu';
 export { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox, HAlertPresetSave } from './components/editor/HAlertBox';
 export { useHonchoEditorBulk } from './hooks/editor/useHonchoEditorBulk';
+export { default as AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
+export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
 // --- History Hooks ---
 export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.0.7",
+  "version": "2.1.1",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -49,6 +49,7 @@
   "keywords": [],
   "author": "",
   "dependencies": {
+    "iconsax-react": "^0.0.8",
     "react-responsive-masonry": "^2.7.1"
   }
 }