@yogiswara/honcho-editor-ui 2.0.4 → 2.0.6

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

@@ -0,0 +1,52 @@
+"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;

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

@@ -0,0 +1,246 @@
+"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;

package/dist/components/editor/HSliderLightMobile.js

@@ -74,7 +74,7 @@ export default function HSliderLightMobile(props) {
                         '& .MuiSlider-thumb:hover': {
                             boxShadow: 'none',
                         }
-                    }, size: "small", value: props.exposureScore, step: 0.1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange(newValue) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onContrastChange), sx: {
+                    }, size: "small", value: props.exposureScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onExposureChange(newValue) }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Contrast" }), _jsx(TextField, { hiddenLabel: true, id: "filled-hidden-label-small", value: formatValue(props.contrastScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, props.onContrastChange), sx: {
                                 width: "40px",
                                 alignItems: "center",
                                 textAlign: "right",

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

@@ -44,6 +44,18 @@ export interface EditorConfig {
     transformation_adjustment: TransformationAdjustment[];
     watermarks: Watermark[];
 }
+export interface GallerySetup {
+    src: string;
+    original: string;
+    srcSet?: string | string[] | undefined;
+    sizes?: string | string[] | undefined;
+    width: number;
+    height: number;
+    alt: string | undefined;
+    key: string | undefined;
+    frame?: string | undefined;
+    isSelected?: boolean | undefined;
+}
 export interface Gallery {
     id: string;
     uid: string;

package/dist/hooks/editor/useHonchoEditor.js

@@ -8,7 +8,6 @@ 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: number) => Math.max(-100, Math.min(100, value));
 export function useHonchoEditor(controller, initImageId, firebaseUid) {
     const { onSwipeNext, onSwipePrev, isNextAvailable, isPrevAvailable, isLoading: isGalleryLoading, error: galleryError, currentImageData: galleryImageData } = useGallerySwipe(firebaseUid, initImageId, controller);
     // The useAdjustmentHistory hook now manages all undo/redo and adjustment state logic.
@@ -52,7 +51,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     const [isPresetCreated, setIsPresetCreated] = useState(false);
     const [selectedMobilePreset, setSelectedMobilePreset] = useState('preset1');
     const [selectedDesktopPreset, setSelectedDesktopPreset] = useState('preset1');
-    // const [selectedBulkPreset, setSelectedBulkPreset] = useState<string>('preset1');
     const [presetMenuAnchorEl, setPresetMenuAnchorEl] = useState(null);
     const [activePresetMenuId, setActivePresetMenuId] = useState(null);
     const [isRenameModalOpen, setRenameModalOpen] = useState(false);
@@ -90,30 +88,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     const contentRef = useRef(null);
     // Effect for keyboard shortcuts
     // MARK: - Core Editor Logic
-    // MARK: Batch Edit logic
-    // const handleToggleImageSelection = useCallback((imageId: string) => {
-    //     const newSelectedIds = new Set(selectedImageIds);
-    //     const isCurrentlySelected = newSelectedIds.has(imageId);
-    //     if (isCurrentlySelected) {
-    //         if (newSelectedIds.size > 1) {
-    //             newSelectedIds.delete(imageId);
-    //         }
-    //     } else {
-    //         newSelectedIds.add(imageId);
-    //         // Apply the current UI's adjustments to the newly selected image.
-    //         setAdjustmentsMap(prevMap => {
-    //             const newMap = new Map(prevMap);
-    //             const currentUiState = {
-    //                 tempScore, tintScore, vibranceScore, saturationScore,
-    //                 exposureScore, highlightsScore, shadowsScore, whitesScore,
-    //                 blacksScore, contrastScore, clarityScore, sharpnessScore
-    //             };
-    //             newMap.set(imageId, currentUiState);
-    //             return newMap;
-    //         });
-    //     }
-    //     setSelectedImageIds(newSelectedIds);
-    // }, [selectedImageIds, tempScore, tintScore, vibranceScore, saturationScore, exposureScore, highlightsScore, shadowsScore, whitesScore, blacksScore, contrastScore, clarityScore, sharpnessScore]);
     // Mobile Panel Drag Handlers
     const handleContentHeightChange = useCallback((height) => {
         if (height > 0 && height !== contentHeight)
@@ -164,7 +138,7 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
             return;
         if ((event.ctrlKey || event.metaKey) && event.key === 'c') {
             event.preventDefault();
-            handleOpenCopyDialog(); // Assumes handleOpenCopyDialog is defined in the hook
+            handleOpenCopyDialog();
         }
     }, [ /* handleOpenCopyDialog dependency */]);
     const extractPathFromGallery = useCallback((data) => {
@@ -224,7 +198,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
             return;
         controller.handleBack(firebaseUid, galleryImageData.id);
     }, [controller, firebaseUid, galleryImageData]);
-    // MARK: - UI Handlers (Moved from page.tsx)
     // MARK: - UI Handlers
     // Panel Handlers
     const handleColorAccordionChange = (panel) => (_, isExpanded) => {

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

@@ -1,6 +1,16 @@
 import { SelectChangeEvent } from "@mui/material";
-import { AdjustmentState, ImageItem, Controller } from './useHonchoEditor';
-export declare function useHonchoEditorBulk(controller: Controller, initImageId: string, firebaseUid: string): {
+import { AdjustmentState, ImageItem, Controller, Preset } from './useHonchoEditor';
+import { Gallery, ResponseGalleryPaging } from '../../hooks/editor/type';
+export interface ControllerBulk {
+    onGetImage(firebaseUid: string, imageID: string): Promise<Gallery>;
+    getImageList(firebaseUid: string, eventID: string, page: number): Promise<ResponseGalleryPaging>;
+    syncConfig(firebaseUid: string): Promise<void>;
+    handleBack(firebaseUid: string, eventID: string): void;
+    getPresets(firebaseUid: string): Promise<Preset[]>;
+    createPreset(firebaseUid: string, name: string, settings: AdjustmentState): Promise<Preset>;
+    deletePreset(firebaseUid: string, presetId: string): Promise<void>;
+}
+export declare function useHonchoEditorBulk(controllerBulk: Controller, eventID: string, firebaseUid: string): {
     isBulkEditing: boolean;
     selectedImages: string;
     imageList: ImageItem[];
@@ -11,6 +21,7 @@ export declare function useHonchoEditorBulk(controller: Controller, initImageId:
     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,13 +1,18 @@
 'use client';
 import { useState, useCallback, useEffect } from 'react';
 import { useAdjustmentHistory } from '../useAdjustmentHistory';
+import { useAdjustmentHistoryBatch } from '../useAdjustmentHistoryBatch';
 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));
-export function useHonchoEditorBulk(controller, initImageId, firebaseUid) {
+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,
+    });
     // State for Bulk Editing
     const [isBulkEditing, setIsBulkEditing] = useState(false);
     const [selectedImages, setSelectedImages] = useState('Select');
@@ -15,6 +20,11 @@ export function useHonchoEditorBulk(controller, initImageId, firebaseUid) {
     const [selectedImageIds, setSelectedImageIds] = useState(new Set());
     const [adjustmentsMap, setAdjustmentsMap] = useState(new Map());
     const [selectedBulkPreset, setSelectedBulkPreset] = useState('preset1');
+    const handleBackCallbackBulk = useCallback(() => {
+        if (!eventID)
+            return;
+        controllerBulk.handleBack(firebaseUid, eventID);
+    }, [controllerBulk, firebaseUid, eventID]);
     const handleFileChangeBulk = (event) => {
         const files = event.target?.files;
         if (!files || files.length <= 1) {
@@ -168,6 +178,7 @@ export function useHonchoEditorBulk(controller, initImageId, firebaseUid) {
         handleToggleImageSelection,
         toggleBulkEditing,
         handleSelectBulkPreset,
+        handleBackCallbackBulk,
         // Bulk Adjustment Handlers
         setTempScore,
         setTintScore,

package/dist/hooks/useAdjustmentHistoryBatch.d.ts

@@ -1,9 +1,28 @@
 import { AdjustmentState } from './editor/useHonchoEditor';
+/**
+ * Configuration for image with adjustment state
+ */
+export interface ImageAdjustmentConfig {
+    imageId: string;
+    /** Adjustment state for this image. If not provided, uses default (all zeros) */
+    adjustment?: AdjustmentState;
+}
 /**
  * Batch adjustment state - maps image IDs to their adjustment states
  */
 export interface BatchAdjustmentState {
-    [imageId: string]: AdjustmentState;
+    /** Currently selected images that are being actively adjusted */
+    currentSelection: {
+        [imageId: string]: AdjustmentState;
+    };
+    /** All images that have been selected/adjusted before (persistent state) */
+    allImages: {
+        [imageId: string]: AdjustmentState;
+    };
+    /** Track initial/baseline state for each image */
+    initialStates: {
+        [imageId: string]: AdjustmentState;
+    };
 }
 /**
  * Configuration options for the batch adjustment history hook
@@ -41,16 +60,16 @@ export interface BatchHistoryInfo {
 export interface BatchHistoryActions {
     /** Apply adjustment deltas to selected images */
     adjustSelected: (delta: Partial<AdjustmentState>) => void;
-    /** Set specific adjustment states for specified images */
-    setAdjustments: (adjustments: Partial<BatchAdjustmentState>) => void;
     /** Undo last changes to selected images */
     undo: () => void;
     /** Redo next changes to selected images */
     redo: () => void;
     /** Reset selected images to default state */
     reset: (imageIds?: string[]) => void;
-    /** Set which images are selected */
-    setSelection: (imageIds: string[]) => void;
+    /** Set selection with optional initial adjustments per image */
+    setSelection: (configs: ImageAdjustmentConfig[]) => void;
+    /** Sync/replace adjustment for images (clears their history) */
+    syncAdjustment: (configs: ImageAdjustmentConfig[]) => void;
     /** Add or remove image from selection */
     toggleSelection: (imageId: string) => void;
     /** Select all images */
@@ -74,10 +93,6 @@ export interface BatchHistoryConfig {
     setMaxSize: (size: number | 'unlimited') => void;
     /** Get current memory usage estimate */
     getMemoryUsage: () => number;
-    /** Add new images to the batch */
-    addImages: (imageIds: string[], selectNew?: boolean) => void;
-    /** Remove images from the batch */
-    removeImages: (imageIds: string[]) => void;
 }
 /**
  * Return type for the useAdjustmentHistoryBatch hook
@@ -99,16 +114,45 @@ export interface UseAdjustmentHistoryBatchReturn {
 /**
  * Advanced hook for managing batch AdjustmentState history with selective undo/redo functionality.
  *
- * Features:
- * - Manages multiple images with individual adjustment states
- * - Selective operations that only affect selected images
- * - Proper history tracking for batch operations
- * - Memory usage monitoring and optimization
- * - Flexible selection management
+ * **Pure State Management Design:**
+ * - Starts empty, no image loading functionality
+ * - Focus on state management and history tracking only
+ * - Selection-based operations with persistent state
+ * - Manual selection via `actions.setSelection()`
+ *
+ * **Key Features:**
+ * - **Current Selection**: Images actively being adjusted
+ * - **All Images**: Persistent state for every image touched
+ * - **Selective Operations**: Undo/redo only affects selected images
+ * - **Automatic State Persistence**: Images remain in allImages even when deselected
+ *
+ * **Typical Usage Flow:**
+ * ```typescript
+ * const { actions, currentBatch, selectedIds } = useAdjustmentHistoryBatch();
+ *
+ * // Select images (new images get default state automatically)
+ * actions.setSelection(['img1', 'img2', 'img3']);
+ *
+ * // Apply adjustments to selected images
+ * actions.adjustSelected({ exposureScore: 10 });
+ *
+ * // Change selection (img1, img2 state persists in allImages)
+ * actions.setSelection(['img3']);
+ *
+ * // Adjust only img3
+ * actions.adjustSelected({ contrastScore: 5 });
+ *
+ * // Undo affects only currently selected (img3)
+ * actions.undo();
+ * ```
+ *
+ * **State Structure:**
+ * - `currentBatch.currentSelection`: Currently selected images and their states
+ * - `currentBatch.allImages`: All images that have been selected/adjusted (persistent)
+ * - `selectedIds`: Array of currently selected image IDs
  *
- * @param imageIds - Array of image IDs to manage
  * @param options - Configuration options for history behavior
  * @returns Object with current batch, selection, history info, actions, and config
  */
-export declare function useAdjustmentHistoryBatch(imageIds: string[], options?: BatchHistoryOptions): UseAdjustmentHistoryBatchReturn;
+export declare function useAdjustmentHistoryBatch(options?: BatchHistoryOptions): UseAdjustmentHistoryBatchReturn;
 export {};

package/dist/hooks/useAdjustmentHistoryBatch.js

@@ -21,59 +21,66 @@ const createDefaultAdjustmentState = (overrides) => ({
  * Compare two BatchAdjustmentState objects for equality
  */
 const compareBatchStates = (a, b) => {
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length)
+    try {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    catch (error) {
+        console.warn('Failed to compare batch states with JSON.stringify:', error);
         return false;
-    for (const key of aKeys) {
-        if (!b[key])
-            return false;
-        try {
-            if (JSON.stringify(a[key]) !== JSON.stringify(b[key]))
-                return false;
-        }
-        catch (error) {
-            // Fallback comparison
-            const stateA = a[key];
-            const stateB = b[key];
-            if (stateA.tempScore !== stateB.tempScore ||
-                stateA.tintScore !== stateB.tintScore ||
-                stateA.vibranceScore !== stateB.vibranceScore ||
-                stateA.saturationScore !== stateB.saturationScore ||
-                stateA.exposureScore !== stateB.exposureScore ||
-                stateA.highlightsScore !== stateB.highlightsScore ||
-                stateA.shadowsScore !== stateB.shadowsScore ||
-                stateA.whitesScore !== stateB.whitesScore ||
-                stateA.blacksScore !== stateB.blacksScore ||
-                stateA.contrastScore !== stateB.contrastScore ||
-                stateA.clarityScore !== stateB.clarityScore ||
-                stateA.sharpnessScore !== stateB.sharpnessScore) {
-                return false;
-            }
-        }
     }
-    return true;
 };
+/**
+ * Create empty batch state
+ */
+const createEmptyBatchState = () => ({
+    currentSelection: {},
+    allImages: {},
+    initialStates: {}
+});
 /**
  * Advanced hook for managing batch AdjustmentState history with selective undo/redo functionality.
  *
- * Features:
- * - Manages multiple images with individual adjustment states
- * - Selective operations that only affect selected images
- * - Proper history tracking for batch operations
- * - Memory usage monitoring and optimization
- * - Flexible selection management
+ * **Pure State Management Design:**
+ * - Starts empty, no image loading functionality
+ * - Focus on state management and history tracking only
+ * - Selection-based operations with persistent state
+ * - Manual selection via `actions.setSelection()`
+ *
+ * **Key Features:**
+ * - **Current Selection**: Images actively being adjusted
+ * - **All Images**: Persistent state for every image touched
+ * - **Selective Operations**: Undo/redo only affects selected images
+ * - **Automatic State Persistence**: Images remain in allImages even when deselected
+ *
+ * **Typical Usage Flow:**
+ * ```typescript
+ * const { actions, currentBatch, selectedIds } = useAdjustmentHistoryBatch();
+ *
+ * // Select images (new images get default state automatically)
+ * actions.setSelection(['img1', 'img2', 'img3']);
+ *
+ * // Apply adjustments to selected images
+ * actions.adjustSelected({ exposureScore: 10 });
+ *
+ * // Change selection (img1, img2 state persists in allImages)
+ * actions.setSelection(['img3']);
+ *
+ * // Adjust only img3
+ * actions.adjustSelected({ contrastScore: 5 });
+ *
+ * // Undo affects only currently selected (img3)
+ * actions.undo();
+ * ```
+ *
+ * **State Structure:**
+ * - `currentBatch.currentSelection`: Currently selected images and their states
+ * - `currentBatch.allImages`: All images that have been selected/adjusted (persistent)
+ * - `selectedIds`: Array of currently selected image IDs
  *
- * @param imageIds - Array of image IDs to manage
  * @param options - Configuration options for history behavior
  * @returns Object with current batch, selection, history info, actions, and config
  */
-export function useAdjustmentHistoryBatch(imageIds, options = {}) {
-    // Stabilize imageIds to prevent unnecessary re-renders
-    const stableImageIds = useMemo(() => {
-        // Return same reference if content is identical
-        return imageIds;
-    }, [imageIds.join(',')]); // Only re-memoize if actual content changes
+export function useAdjustmentHistoryBatch(options = {}) {
     // Internal stabilization
     const internalOptions = useMemo(() => ({
         maxSize: options.maxSize ?? 'unlimited',
@@ -84,20 +91,12 @@ export function useAdjustmentHistoryBatch(imageIds, options = {}) {
         options.devWarnings,
         options.defaultAdjustmentState
     ]);
-    // Initialize batch state with all images
-    const createInitialBatch = useCallback((ids) => {
-        const batch = {};
-        for (const id of ids) {
-            batch[id] = createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
-        }
-        return batch;
-    }, [internalOptions.defaultAdjustmentState]);
-    // Core state management - use stable imageIds for initialization
-    const [allImageIds, setAllImageIds] = useState(stableImageIds);
-    const [selectedIds, setSelectedIds] = useState(stableImageIds); // Default select all
-    const [history, setHistory] = useState(() => [createInitialBatch(stableImageIds)]);
+    // Core state management - start empty for plain mode
+    const [allImageIds, setAllImageIds] = useState([]);
+    const [selectedIds, setSelectedIds] = useState([]);
+    const [history, setHistory] = useState([createEmptyBatchState()]);
     const [currentIndex, setCurrentIndex] = useState(0);
-    const [currentBatch, setCurrentBatch] = useState(() => createInitialBatch(stableImageIds));
+    const [currentBatch, setCurrentBatch] = useState(createEmptyBatchState());
     // Configuration refs
     const maxSizeRef = useRef(internalOptions.maxSize);
     const devWarningsRef = useRef(internalOptions.devWarnings);
@@ -105,26 +104,6 @@ export function useAdjustmentHistoryBatch(imageIds, options = {}) {
     useEffect(() => {
         setCurrentBatch(history[currentIndex]);
     }, [history, currentIndex]);
-    // Update when stableImageIds actually changes (content-wise)
-    useEffect(() => {
-        // Only update if the actual content is different, not just reference
-        const currentIdString = allImageIds.join(',');
-        const newIdString = stableImageIds.join(',');
-        if (currentIdString !== newIdString) {
-            const newBatch = createInitialBatch(stableImageIds);
-            setAllImageIds([...stableImageIds]); // Create new array to avoid reference issues
-            setSelectedIds([...stableImageIds]); // Default select all new images
-            setHistory([newBatch]);
-            setCurrentIndex(0);
-            setCurrentBatch(newBatch);
-            if (internalOptions.devWarnings) {
-                console.log('useAdjustmentHistoryBatch: ImageIds updated', {
-                    from: allImageIds,
-                    to: stableImageIds
-                });
-            }
-        }
-    }, [stableImageIds, allImageIds, createInitialBatch, internalOptions.devWarnings]);
     // Memory usage calculation
     const getMemoryUsage = useCallback(() => {
         try {
@@ -182,39 +161,44 @@ export function useAdjustmentHistoryBatch(imageIds, options = {}) {
     const adjustSelected = useCallback((delta) => {
         if (selectedIds.length === 0)
             return;
-        const newBatch = { ...currentBatch };
+        const newBatch = {
+            currentSelection: { ...currentBatch.currentSelection },
+            allImages: { ...currentBatch.allImages },
+            initialStates: { ...currentBatch.initialStates }
+        };
+        // Apply adjustments to selected images in both currentSelection and allImages
         for (const imageId of selectedIds) {
-            if (newBatch[imageId]) {
-                newBatch[imageId] = {
-                    ...newBatch[imageId],
+            if (newBatch.currentSelection[imageId]) {
+                // Update current selection
+                newBatch.currentSelection[imageId] = {
+                    ...newBatch.currentSelection[imageId],
                     ...Object.fromEntries(Object.entries(delta).map(([key, value]) => [
                         key,
-                        newBatch[imageId][key] + value
+                        newBatch.currentSelection[imageId][key] + value
                     ]))
                 };
+                // Also update in allImages to persist the changes
+                newBatch.allImages[imageId] = { ...newBatch.currentSelection[imageId] };
             }
         }
         pushBatchState(newBatch);
     }, [selectedIds, currentBatch, pushBatchState]);
-    // Set specific adjustment states for specified images
-    const setAdjustments = useCallback((adjustments) => {
-        const newBatch = { ...currentBatch };
-        for (const [imageId, adjustment] of Object.entries(adjustments)) {
-            if (newBatch[imageId]) {
-                newBatch[imageId] = { ...newBatch[imageId], ...adjustment };
-            }
-        }
-        pushBatchState(newBatch);
-    }, [currentBatch, pushBatchState]);
+    // Set specific adjustment states for specified images (removed since not needed)
     // Undo last changes to selected images
     const undo = useCallback(() => {
         if (currentIndex > 0 && selectedIds.length > 0) {
             const previousBatch = history[currentIndex - 1];
-            const newBatch = { ...currentBatch };
-            // Only restore selected images from previous state
+            const newBatch = {
+                currentSelection: { ...currentBatch.currentSelection },
+                allImages: { ...currentBatch.allImages },
+                initialStates: { ...currentBatch.initialStates }
+            };
+            // Only restore adjustments for currently selected images
             for (const imageId of selectedIds) {
-                if (previousBatch[imageId] && newBatch[imageId]) {
-                    newBatch[imageId] = { ...previousBatch[imageId] };
+                if (previousBatch.allImages[imageId] && newBatch.currentSelection[imageId]) {
+                    // Restore from previous allImages state (not currentSelection)
+                    newBatch.currentSelection[imageId] = { ...previousBatch.allImages[imageId] };
+                    newBatch.allImages[imageId] = { ...previousBatch.allImages[imageId] };
                 }
             }
             // Update current batch and move index back
@@ -226,17 +210,29 @@ export function useAdjustmentHistoryBatch(imageIds, options = {}) {
                 newHistory[currentIndex] = newBatch;
                 return newHistory;
             });
+            if (internalOptions.devWarnings) {
+                console.log('useAdjustmentHistoryBatch: Undo completed for selected images only', {
+                    selectedImages: selectedIds,
+                    currentIndex: currentIndex - 1
+                });
+            }
         }
-    }, [currentIndex, selectedIds, history, currentBatch]);
+    }, [currentIndex, selectedIds, history, currentBatch, internalOptions.devWarnings]);
     // Redo next changes to selected images
     const redo = useCallback(() => {
         if (currentIndex < history.length - 1 && selectedIds.length > 0) {
             const nextBatch = history[currentIndex + 1];
-            const newBatch = { ...currentBatch };
-            // Only restore selected images from next state
+            const newBatch = {
+                currentSelection: { ...currentBatch.currentSelection },
+                allImages: { ...currentBatch.allImages },
+                initialStates: { ...currentBatch.initialStates }
+            };
+            // Only restore adjustments for currently selected images
             for (const imageId of selectedIds) {
-                if (nextBatch[imageId] && newBatch[imageId]) {
-                    newBatch[imageId] = { ...nextBatch[imageId] };
+                if (nextBatch.allImages[imageId] && newBatch.currentSelection[imageId]) {
+                    // Restore from next allImages state (not currentSelection)
+                    newBatch.currentSelection[imageId] = { ...nextBatch.allImages[imageId] };
+                    newBatch.allImages[imageId] = { ...nextBatch.allImages[imageId] };
                 }
             }
             // Update current batch and move index forward
@@ -248,48 +244,143 @@ export function useAdjustmentHistoryBatch(imageIds, options = {}) {
                 newHistory[currentIndex + 1] = newBatch;
                 return newHistory;
             });
+            if (internalOptions.devWarnings) {
+                console.log('useAdjustmentHistoryBatch: Redo completed for selected images only', {
+                    selectedImages: selectedIds,
+                    currentIndex: currentIndex + 1
+                });
+            }
         }
-    }, [currentIndex, selectedIds, history, currentBatch]);
+    }, [currentIndex, selectedIds, history, currentBatch, internalOptions.devWarnings]);
     // Reset selected images to default state
     const reset = useCallback((imageIds) => {
         const idsToReset = imageIds || selectedIds;
         if (idsToReset.length === 0)
             return;
-        const newBatch = { ...currentBatch };
+        const newBatch = {
+            currentSelection: { ...currentBatch.currentSelection },
+            allImages: { ...currentBatch.allImages },
+            initialStates: { ...currentBatch.initialStates }
+        };
         const defaultState = createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
         for (const imageId of idsToReset) {
-            if (newBatch[imageId]) {
-                newBatch[imageId] = { ...defaultState };
+            if (newBatch.currentSelection[imageId]) {
+                newBatch.currentSelection[imageId] = { ...defaultState };
+                newBatch.allImages[imageId] = { ...defaultState };
             }
         }
         pushBatchState(newBatch);
     }, [selectedIds, currentBatch, pushBatchState, internalOptions.defaultAdjustmentState]);
-    // Selection management
-    const setSelection = useCallback((imageIds) => {
-        // Validate that all imageIds exist
-        const validIds = imageIds.filter(id => allImageIds.includes(id));
-        setSelectedIds(validIds);
-        if (devWarningsRef.current && validIds.length !== imageIds.length) {
-            console.warn('Some image IDs in setSelection do not exist:', imageIds.filter(id => !allImageIds.includes(id)));
-        }
-    }, [allImageIds]);
-    const toggleSelection = useCallback((imageId) => {
-        if (!allImageIds.includes(imageId)) {
-            if (devWarningsRef.current) {
-                console.warn('toggleSelection: Image ID does not exist:', imageId);
+    // Selection management with initial adjustments - single state update
+    const setSelection = useCallback((configs) => {
+        const imageIds = configs.map(config => config.imageId);
+        // Update selectedIds state
+        setSelectedIds(imageIds);
+        // Build new batch state with initial adjustments
+        const newBatch = {
+            currentSelection: {},
+            allImages: { ...currentBatch.allImages },
+            initialStates: { ...currentBatch.initialStates }
+        };
+        // Process each image config
+        for (const config of configs) {
+            const { imageId, adjustment } = config;
+            // If image exists in allImages, use its state
+            if (currentBatch.allImages[imageId]) {
+                newBatch.currentSelection[imageId] = { ...currentBatch.allImages[imageId] };
+            }
+            else {
+                // New image - determine initial state
+                let initialState;
+                if (adjustment) {
+                    // Use provided adjustment as initial state
+                    initialState = {
+                        ...createDefaultAdjustmentState(internalOptions.defaultAdjustmentState),
+                        ...adjustment
+                    };
+                }
+                else {
+                    // Use default state
+                    initialState = createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
+                }
+                // Set initial state for new image
+                newBatch.currentSelection[imageId] = { ...initialState };
+                newBatch.allImages[imageId] = { ...initialState };
+                newBatch.initialStates[imageId] = { ...initialState };
             }
+        }
+        // Update allImageIds to include any new images
+        const newAllImageIds = Array.from(new Set([...allImageIds, ...imageIds]));
+        setAllImageIds(newAllImageIds);
+        // Single state update to prevent multiple re-renders
+        setCurrentBatch(newBatch);
+        if (internalOptions.devWarnings) {
+            console.log('useAdjustmentHistoryBatch: Selection updated with initial adjustments', {
+                selected: imageIds,
+                totalImages: newAllImageIds.length,
+                newImages: imageIds.filter(id => !allImageIds.includes(id)),
+                withInitialAdjustments: configs.filter(c => c.adjustment).length
+            });
+        }
+    }, [allImageIds, currentBatch, internalOptions.defaultAdjustmentState, internalOptions.devWarnings]);
+    // Sync adjustments for specific images (clears their history) - single state update
+    const syncAdjustment = useCallback((configs) => {
+        if (configs.length === 0)
             return;
+        // Build new batch state
+        const newBatch = {
+            currentSelection: { ...currentBatch.currentSelection },
+            allImages: { ...currentBatch.allImages },
+            initialStates: { ...currentBatch.initialStates }
+        };
+        // Process each sync config
+        for (const config of configs) {
+            const { imageId, adjustment } = config;
+            if (adjustment) {
+                const fullAdjustment = {
+                    ...createDefaultAdjustmentState(internalOptions.defaultAdjustmentState),
+                    ...adjustment
+                };
+                // Update all states for this image
+                newBatch.allImages[imageId] = { ...fullAdjustment };
+                newBatch.initialStates[imageId] = { ...fullAdjustment };
+                // If image is currently selected, update current selection too
+                if (newBatch.currentSelection[imageId]) {
+                    newBatch.currentSelection[imageId] = { ...fullAdjustment };
+                }
+            }
+        }
+        // Clear history and start fresh with synced state
+        const freshHistory = [newBatch];
+        setHistory(freshHistory);
+        setCurrentIndex(0);
+        setCurrentBatch(newBatch);
+        if (internalOptions.devWarnings) {
+            const syncedImageIds = configs.map(c => c.imageId);
+            console.log('useAdjustmentHistoryBatch: Synced adjustments (history cleared)', {
+                syncedImages: syncedImageIds,
+                historyCleared: true
+            });
         }
+    }, [currentBatch, internalOptions.defaultAdjustmentState, internalOptions.devWarnings]);
+    const toggleSelection = useCallback((imageId) => {
         setSelectedIds(prev => prev.includes(imageId)
             ? prev.filter(id => id !== imageId)
             : [...prev, imageId]);
-    }, [allImageIds]);
+    }, []);
     const selectAll = useCallback(() => {
         setSelectedIds([...allImageIds]);
     }, [allImageIds]);
     const clearSelection = useCallback(() => {
         setSelectedIds([]);
-    }, []);
+        // Clear currentSelection but keep allImages and initialStates
+        const newBatch = {
+            currentSelection: {},
+            allImages: { ...currentBatch.allImages },
+            initialStates: { ...currentBatch.initialStates }
+        };
+        setCurrentBatch(newBatch);
+    }, [currentBatch]);
     // Other history actions
     const jumpToIndex = useCallback((index) => {
         if (index >= 0 && index < history.length) {
@@ -298,45 +389,49 @@ export function useAdjustmentHistoryBatch(imageIds, options = {}) {
         }
     }, [history]);
     const clearHistory = useCallback(() => {
-        const freshBatch = createInitialBatch(allImageIds);
+        const freshBatch = createEmptyBatchState();
         setHistory([freshBatch]);
         setCurrentIndex(0);
         setCurrentBatch(freshBatch);
-    }, [allImageIds, createInitialBatch]);
+        setAllImageIds([]);
+        setSelectedIds([]);
+    }, []);
     const getCurrentBatch = useCallback(() => {
-        return { ...currentBatch };
+        return {
+            currentSelection: { ...currentBatch.currentSelection },
+            allImages: { ...currentBatch.allImages },
+            initialStates: { ...currentBatch.initialStates }
+        };
     }, [currentBatch]);
     const syncBatch = useCallback((newBatch, targetIndex) => {
         // Validate input
-        if (!newBatch || typeof newBatch !== 'object') {
-            console.warn('syncBatch: newBatch must be a valid BatchAdjustmentState object');
-            return;
-        }
-        // Validate all items are AdjustmentState objects
-        const isValidBatch = Object.values(newBatch).every(state => state && typeof state === 'object' &&
-            typeof state.tempScore === 'number' &&
-            typeof state.tintScore === 'number' &&
-            typeof state.vibranceScore === 'number' &&
-            typeof state.saturationScore === 'number' &&
-            typeof state.exposureScore === 'number' &&
-            typeof state.highlightsScore === 'number' &&
-            typeof state.shadowsScore === 'number' &&
-            typeof state.whitesScore === 'number' &&
-            typeof state.blacksScore === 'number' &&
-            typeof state.contrastScore === 'number' &&
-            typeof state.clarityScore === 'number' &&
-            typeof state.sharpnessScore === 'number');
-        if (!isValidBatch) {
-            console.warn('syncBatch: All values in newBatch must be valid AdjustmentState objects');
+        if (!newBatch || typeof newBatch !== 'object' || !newBatch.currentSelection || !newBatch.allImages || !newBatch.initialStates) {
+            console.warn('syncBatch: newBatch must be a valid BatchAdjustmentState object with currentSelection, allImages, and initialStates');
             return;
         }
         // Update current state
-        setCurrentBatch({ ...newBatch });
+        setCurrentBatch({
+            currentSelection: { ...newBatch.currentSelection },
+            allImages: { ...newBatch.allImages },
+            initialStates: { ...newBatch.initialStates }
+        });
         // Replace history with single entry
-        setHistory([{ ...newBatch }]);
+        setHistory([{
+                currentSelection: { ...newBatch.currentSelection },
+                allImages: { ...newBatch.allImages },
+                initialStates: { ...newBatch.initialStates }
+            }]);
         setCurrentIndex(0);
+        // Update image tracking
+        const allImageIds = Object.keys(newBatch.allImages);
+        const selectedImageIds = Object.keys(newBatch.currentSelection);
+        setAllImageIds(allImageIds);
+        setSelectedIds(selectedImageIds);
         if (devWarningsRef.current) {
-            console.log('syncBatch: Synchronized batch state with', Object.keys(newBatch).length, 'images');
+            console.log('syncBatch: Synchronized batch state', {
+                totalImages: allImageIds.length,
+                selectedImages: selectedImageIds.length
+            });
         }
     }, []);
     // Configuration actions
@@ -346,52 +441,6 @@ export function useAdjustmentHistoryBatch(imageIds, options = {}) {
             enforceMaxSize();
         }
     }, [enforceMaxSize]);
-    const addImages = useCallback((imageIds, selectNew = true) => {
-        const newIds = imageIds.filter(id => !allImageIds.includes(id));
-        if (newIds.length === 0)
-            return;
-        const updatedAllIds = [...allImageIds, ...newIds];
-        const newBatch = { ...currentBatch };
-        // Add default states for new images
-        for (const id of newIds) {
-            newBatch[id] = createDefaultAdjustmentState(internalOptions.defaultAdjustmentState);
-        }
-        setAllImageIds(updatedAllIds);
-        setCurrentBatch(newBatch);
-        // Update history
-        setHistory(prevHistory => {
-            const newHistory = [...prevHistory];
-            newHistory[currentIndex] = newBatch;
-            return newHistory;
-        });
-        // Optionally select new images
-        if (selectNew) {
-            setSelectedIds(prev => [...prev, ...newIds]);
-        }
-    }, [allImageIds, currentBatch, currentIndex, internalOptions.defaultAdjustmentState]);
-    const removeImages = useCallback((imageIds) => {
-        const updatedAllIds = allImageIds.filter(id => !imageIds.includes(id));
-        const updatedSelectedIds = selectedIds.filter(id => !imageIds.includes(id));
-        const newBatch = { ...currentBatch };
-        // Remove images from batch
-        for (const id of imageIds) {
-            delete newBatch[id];
-        }
-        setAllImageIds(updatedAllIds);
-        setSelectedIds(updatedSelectedIds);
-        setCurrentBatch(newBatch);
-        // Update history
-        setHistory(prevHistory => {
-            const newHistory = prevHistory.map(batch => {
-                const cleanedBatch = { ...batch };
-                for (const id of imageIds) {
-                    delete cleanedBatch[id];
-                }
-                return cleanedBatch;
-            });
-            return newHistory;
-        });
-    }, [allImageIds, selectedIds, currentBatch]);
     // History info object
     const historyInfo = useMemo(() => ({
         canUndo: currentIndex > 0 && selectedIds.length > 0,
@@ -405,11 +454,11 @@ export function useAdjustmentHistoryBatch(imageIds, options = {}) {
     // Actions object - stabilized with useMemo
     const actions = useMemo(() => ({
         adjustSelected,
-        setAdjustments,
         undo,
         redo,
         reset,
         setSelection,
+        syncAdjustment,
         toggleSelection,
         selectAll,
         clearSelection,
@@ -418,17 +467,15 @@ export function useAdjustmentHistoryBatch(imageIds, options = {}) {
         getCurrentBatch,
         syncBatch
     }), [
-        adjustSelected, setAdjustments, undo, redo, reset,
-        setSelection, toggleSelection, selectAll, clearSelection,
+        adjustSelected, undo, redo, reset,
+        setSelection, syncAdjustment, toggleSelection, selectAll, clearSelection,
         jumpToIndex, clearHistory, getCurrentBatch, syncBatch
     ]);
     // Config object - stabilized with useMemo
     const config = useMemo(() => ({
         setMaxSize,
-        getMemoryUsage,
-        addImages,
-        removeImages
-    }), [setMaxSize, getMemoryUsage, addImages, removeImages]);
+        getMemoryUsage
+    }), [setMaxSize, getMemoryUsage]);
     // Apply max size enforcement when history changes
     useEffect(() => {
         enforceMaxSize();

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { default as HPresetOptionsMenu } from './components/editor/HPresetOption
 export { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox, HAlertPresetSave } from './components/editor/HAlertBox';
 export { useHonchoEditorBulk } from './hooks/editor/useHonchoEditorBulk';
 export { useAdjustmentHistory, type UseAdjustmentHistoryReturn, type HistoryInfo, type HistoryActions, type HistoryConfig } from './hooks/useAdjustmentHistory';
-export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type BatchHistoryInfo, type BatchHistoryActions, type BatchHistoryConfig } from './hooks/useAdjustmentHistoryBatch';
+export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type ImageAdjustmentConfig, type BatchHistoryInfo, type BatchHistoryActions, type BatchHistoryConfig } from './hooks/useAdjustmentHistoryBatch';
 export { default as useColors } from './themes/colors';
 export { default as useHonchoTypography } from './themes/honchoTheme';
 export { default as useIsMobile } from './utils/isMobile';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -35,6 +35,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-responsive-masonry": "^2.6.0",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
     "next": "^13.5.6 || ^14.0.0",
@@ -46,5 +47,8 @@
   },
   "license": "ISC",
   "keywords": [],
-  "author": ""
+  "author": "",
+  "dependencies": {
+    "react-responsive-masonry": "^2.7.1"
+  }
 }