@yogiswara/honcho-editor-ui 1.3.7 → 1.3.9

package/dist/hooks/useGallerySwipe.d.ts

@@ -0,0 +1,36 @@
+import { Controller } from "./editor/useHonchoEditor";
+import { Gallery } from "./editor/type";
+/**
+ * Return type for the useGallerySwipe hook
+ * Provides image navigation functionality with pagination support
+ */
+interface UseGallerySwipeReturn {
+    /** Current image data object containing all image information */
+    currentImageData: Gallery | null;
+    /** Whether next image navigation is available (considers pagination) */
+    isNextAvailable: boolean;
+    /** Whether previous image navigation is available */
+    isPrevAvailable: boolean;
+    /** Function to navigate to the next image (async due to potential API calls) */
+    onSwipeNext: () => Promise<void>;
+    /** Function to navigate to the previous image (async due to potential API calls) */
+    onSwipePrev: () => Promise<void>;
+    /** Loading state during image transitions and API calls */
+    isLoading: boolean;
+    /** Error message if any operation fails */
+    error: string | null;
+}
+/**
+ * Custom hook for handling image gallery navigation with automatic pagination
+ *
+ * This hook manages image swipe/navigation functionality across a paginated gallery.
+ * It handles the complexity of finding images across multiple pages and loading
+ * additional pages as needed during navigation.
+ *
+ * @param firebaseUid - User's Firebase UID (can be null during initialization)
+ * @param initImageId - Initial image ID to start with (can be null during initialization)
+ * @param controller - Controller instance for API calls (can be null during initialization)
+ * @returns Object containing current image data and navigation functions
+ */
+export declare function useGallerySwipe(firebaseUid: string | null, initImageId: string | null, controller: Controller | null): UseGallerySwipeReturn;
+export {};

package/dist/hooks/useGallerySwipe.example.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Example usage of the useGallerySwipe hook
+ * This shows various integration patterns and use cases
+ */
+/**
+ * Basic example: Simple image gallery with navigation buttons
+ */
+export declare function BasicGalleryExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Advanced example: Gallery with keyboard navigation and swipe gestures
+ */
+export declare function AdvancedGalleryExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Integration example: Using with existing useHonchoEditor
+ */
+export declare function EditorIntegrationExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Mobile-optimized example with touch gestures
+ */
+export declare function MobileGalleryExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Error handling and loading states example
+ */
+export declare function ErrorHandlingExample(): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useGallerySwipe.example.js

@@ -0,0 +1,184 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useGallerySwipe } from './useGallerySwipe';
+import { useState, useEffect } from 'react';
+/**
+ * Example usage of the useGallerySwipe hook
+ * This shows various integration patterns and use cases
+ */
+/**
+ * Basic example: Simple image gallery with navigation buttons
+ */
+export function BasicGalleryExample() {
+    const [firebaseUid, setFirebaseUid] = useState('user123');
+    const [currentImageId, setCurrentImageId] = useState('image_001');
+    const [controller, setController] = useState(null);
+    // Initialize controller (replace with your actual controller initialization)
+    useEffect(() => {
+        // Your controller initialization logic here
+        const initController = async () => {
+            // const controllerInstance = new YourController();
+            // setController(controllerInstance);
+        };
+        initController();
+    }, []);
+    const { currentImageData, isNextAvailable, isPrevAvailable, onSwipeNext, onSwipePrev, isLoading, error } = useGallerySwipe(firebaseUid, currentImageId, controller);
+    return (_jsxs("div", { className: "gallery-container", children: [error && (_jsxs("div", { className: "error-message", style: { color: 'red' }, children: ["Error: ", error] })), isLoading && (_jsx("div", { className: "loading-indicator", children: "Loading..." })), currentImageData && (_jsxs("div", { className: "image-display", children: [_jsx("img", { src: currentImageData.download?.path || currentImageData.raw_edited?.path, alt: `Image ${currentImageData.id}`, style: { maxWidth: '100%', height: 'auto' } }), _jsxs("p", { children: ["Image ID: ", currentImageData.id] }), _jsxs("p", { children: ["Event ID: ", currentImageData.event_id] })] })), _jsxs("div", { className: "navigation-controls", children: [_jsx("button", { onClick: onSwipePrev, disabled: !isPrevAvailable || isLoading, className: "nav-button prev", children: "\u2190 Previous" }), _jsx("button", { onClick: onSwipeNext, disabled: !isNextAvailable || isLoading, className: "nav-button next", children: "Next \u2192" })] })] }));
+}
+/**
+ * Advanced example: Gallery with keyboard navigation and swipe gestures
+ */
+export function AdvancedGalleryExample() {
+    const [firebaseUid] = useState('user456');
+    const [selectedImageId, setSelectedImageId] = useState('initial_image_id');
+    const [controller] = useState(null); // Replace with actual controller
+    const gallerySwipe = useGallerySwipe(firebaseUid, selectedImageId, controller);
+    // Keyboard navigation
+    useEffect(() => {
+        const handleKeyPress = async (event) => {
+            if (gallerySwipe.isLoading)
+                return;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    if (gallerySwipe.isPrevAvailable) {
+                        await gallerySwipe.onSwipePrev();
+                    }
+                    break;
+                case 'ArrowRight':
+                    event.preventDefault();
+                    if (gallerySwipe.isNextAvailable) {
+                        await gallerySwipe.onSwipeNext();
+                    }
+                    break;
+            }
+        };
+        window.addEventListener('keydown', handleKeyPress);
+        return () => window.removeEventListener('keydown', handleKeyPress);
+    }, [gallerySwipe]);
+    // Touch/swipe gesture handlers (basic implementation)
+    const [touchStart, setTouchStart] = useState(null);
+    const [touchEnd, setTouchEnd] = useState(null);
+    const handleTouchStart = (e) => {
+        setTouchEnd(null);
+        setTouchStart(e.targetTouches[0].clientX);
+    };
+    const handleTouchMove = (e) => {
+        setTouchEnd(e.targetTouches[0].clientX);
+    };
+    const handleTouchEnd = async () => {
+        if (!touchStart || !touchEnd)
+            return;
+        const distance = touchStart - touchEnd;
+        const isLeftSwipe = distance > 50;
+        const isRightSwipe = distance < -50;
+        if (isLeftSwipe && gallerySwipe.isNextAvailable) {
+            await gallerySwipe.onSwipeNext();
+        }
+        if (isRightSwipe && gallerySwipe.isPrevAvailable) {
+            await gallerySwipe.onSwipePrev();
+        }
+    };
+    return (_jsxs("div", { className: "advanced-gallery", children: [_jsxs("div", { className: "gallery-header", children: [_jsx("h2", { children: "Advanced Gallery Navigation" }), _jsxs("div", { className: "status-indicators", children: [_jsx("span", { className: `status ${gallerySwipe.isLoading ? 'loading' : 'ready'}`, children: gallerySwipe.isLoading ? 'Loading...' : 'Ready' }), _jsxs("span", { className: "navigation-status", children: ["Prev: ", gallerySwipe.isPrevAvailable ? '✓' : '✗', " | Next: ", gallerySwipe.isNextAvailable ? '✓' : '✗'] })] })] }), _jsxs("div", { className: "image-container", onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, style: {
+                    touchAction: 'pan-x',
+                    userSelect: 'none',
+                    position: 'relative'
+                }, children: [gallerySwipe.currentImageData ? (_jsxs("div", { className: "image-wrapper", children: [_jsx("img", { src: gallerySwipe.currentImageData.raw_edited?.path ||
+                                    gallerySwipe.currentImageData.download?.path, alt: `Gallery image ${gallerySwipe.currentImageData.id}`, style: {
+                                    width: '100%',
+                                    height: 'auto',
+                                    display: 'block'
+                                } }), _jsxs("div", { className: "image-info", children: [_jsxs("p", { children: ["ID: ", gallerySwipe.currentImageData.id] }), _jsxs("p", { children: ["Event: ", gallerySwipe.currentImageData.event_id] })] })] })) : (_jsx("div", { className: "no-image", children: "No image loaded" })), gallerySwipe.error && (_jsx("div", { className: "error-overlay", children: gallerySwipe.error }))] }), _jsx("div", { className: "instructions", children: _jsx("p", { children: "Use arrow keys, navigation buttons, or swipe to navigate" }) })] }));
+}
+/**
+ * Integration example: Using with existing useHonchoEditor
+ */
+export function EditorIntegrationExample() {
+    const [firebaseUid] = useState('editor_user');
+    const [currentImageId, setCurrentImageId] = useState('editor_image_001');
+    const [controller] = useState(null);
+    // Gallery navigation hook
+    const { currentImageData, isNextAvailable, isPrevAvailable, onSwipeNext, onSwipePrev, isLoading: galleryLoading, error: galleryError } = useGallerySwipe(firebaseUid, currentImageId, controller);
+    // Update current image ID when gallery navigation changes
+    useEffect(() => {
+        if (currentImageData?.id && currentImageData.id !== currentImageId) {
+            setCurrentImageId(currentImageData.id);
+            // Trigger any editor updates here
+            // e.g., loadImageFromId(firebaseUid, currentImageData.id);
+        }
+    }, [currentImageData, currentImageId, firebaseUid]);
+    // Example: Integrate with your existing editor handlers
+    const handleImageChange = async (direction) => {
+        try {
+            if (direction === 'next' && isNextAvailable) {
+                await onSwipeNext();
+            }
+            else if (direction === 'prev' && isPrevAvailable) {
+                await onSwipePrev();
+            }
+        }
+        catch (error) {
+            console.error('Navigation error:', error);
+        }
+    };
+    return (_jsxs("div", { className: "editor-integration", children: [_jsxs("div", { className: "editor-header", children: [_jsx("button", { onClick: () => handleImageChange('prev'), disabled: !isPrevAvailable || galleryLoading, className: "nav-btn", children: "\u27E8 Prev Image" }), _jsx("span", { className: "current-image-info", children: currentImageData ? `Image: ${currentImageData.id}` : 'No image' }), _jsx("button", { onClick: () => handleImageChange('next'), disabled: !isNextAvailable || galleryLoading, className: "nav-btn", children: "Next Image \u27E9" })] }), galleryError && (_jsxs("div", { className: "error-banner", children: ["Gallery Error: ", galleryError] })), _jsx("div", { className: "editor-content", children: currentImageData && (_jsxs("div", { className: "editor-canvas", children: [_jsxs("p", { children: ["Editing: ", currentImageData.id] }), _jsxs("p", { children: ["Event: ", currentImageData.event_id] })] })) }), galleryLoading && (_jsx("div", { className: "loading-overlay", children: "Loading next image..." }))] }));
+}
+/**
+ * Mobile-optimized example with touch gestures
+ */
+export function MobileGalleryExample() {
+    const [firebaseUid] = useState('mobile_user');
+    const [imageId] = useState('mobile_image_001');
+    const [controller] = useState(null);
+    const gallery = useGallerySwipe(firebaseUid, imageId, controller);
+    // Mobile-specific gesture handling
+    const [swipeThreshold] = useState(75); // Minimum distance for swipe
+    const [touchStartX, setTouchStartX] = useState(0);
+    const [touchStartY, setTouchStartY] = useState(0);
+    const handleTouchStart = (e) => {
+        setTouchStartX(e.touches[0].clientX);
+        setTouchStartY(e.touches[0].clientY);
+    };
+    const handleTouchEnd = async (e) => {
+        const touchEndX = e.changedTouches[0].clientX;
+        const touchEndY = e.changedTouches[0].clientY;
+        const deltaX = touchStartX - touchEndX;
+        const deltaY = Math.abs(touchStartY - touchEndY);
+        // Only process horizontal swipes (ignore vertical)
+        if (deltaY < 100 && Math.abs(deltaX) > swipeThreshold) {
+            if (deltaX > 0 && gallery.isNextAvailable) {
+                // Swipe left - next image
+                await gallery.onSwipeNext();
+            }
+            else if (deltaX < 0 && gallery.isPrevAvailable) {
+                // Swipe right - previous image
+                await gallery.onSwipePrev();
+            }
+        }
+    };
+    return (_jsxs("div", { className: "mobile-gallery", style: { touchAction: 'pan-y' }, children: [_jsx("div", { className: "mobile-header", children: _jsxs("div", { className: "navigation-dots", children: [_jsx("span", { className: `dot ${gallery.isPrevAvailable ? 'active' : 'inactive'}`, children: "\u25CF" }), _jsx("span", { className: "current-dot", children: "\u25CF" }), _jsx("span", { className: `dot ${gallery.isNextAvailable ? 'active' : 'inactive'}`, children: "\u25CF" })] }) }), _jsxs("div", { className: "swipe-area", onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, style: {
+                    width: '100%',
+                    height: '70vh',
+                    position: 'relative',
+                    overflow: 'hidden'
+                }, children: [gallery.currentImageData && (_jsx("img", { src: gallery.currentImageData.download?.path, alt: "Gallery image", style: {
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'contain',
+                            userSelect: 'none',
+                            pointerEvents: 'none'
+                        } })), gallery.isLoading && (_jsxs("div", { className: "mobile-loading", children: [_jsx("div", { className: "spinner", children: "\u25D0" }), _jsx("p", { children: "Loading..." })] })), gallery.error && (_jsx("div", { className: "mobile-error", children: _jsxs("p", { children: ["\u26A0\uFE0F ", gallery.error] }) }))] }), _jsx("div", { className: "mobile-footer", children: _jsxs("p", { className: "swipe-hint", children: ["Swipe left/right to navigate \u2022 ", gallery.currentImageData?.id || 'No image'] }) })] }));
+}
+/**
+ * Error handling and loading states example
+ */
+export function ErrorHandlingExample() {
+    const [firebaseUid] = useState('test_user');
+    const [imageId] = useState('test_image');
+    const [controller] = useState(null);
+    const { currentImageData, isNextAvailable, isPrevAvailable, onSwipeNext, onSwipePrev, isLoading, error } = useGallerySwipe(firebaseUid, imageId, controller);
+    const handleRetry = () => {
+        // Force re-initialization by changing a key prop or calling a refresh function
+        window.location.reload(); // Simple retry approach
+    };
+    return (_jsxs("div", { className: "error-handling-example", children: [_jsxs("div", { className: "status-panel", children: [_jsx("h3", { children: "Gallery Status" }), _jsxs("div", { className: "status-grid", children: [_jsxs("div", { className: "status-item", children: [_jsx("label", { children: "Loading:" }), _jsx("span", { className: isLoading ? 'status-active' : 'status-inactive', children: isLoading ? 'Yes' : 'No' })] }), _jsxs("div", { className: "status-item", children: [_jsx("label", { children: "Error:" }), _jsx("span", { className: error ? 'status-error' : 'status-ok', children: error || 'None' })] }), _jsxs("div", { className: "status-item", children: [_jsx("label", { children: "Current Image:" }), _jsx("span", { children: currentImageData?.id || 'None' })] }), _jsxs("div", { className: "status-item", children: [_jsx("label", { children: "Navigation:" }), _jsxs("span", { children: ["Prev: ", isPrevAvailable ? '✓' : '✗', " | Next: ", isNextAvailable ? '✓' : '✗'] })] })] }), error && (_jsx("div", { className: "error-actions", children: _jsx("button", { onClick: handleRetry, className: "retry-button", children: "Retry" }) }))] }), _jsx("div", { className: "gallery-content", children: currentImageData ? (_jsx("div", { className: "image-preview", children: _jsx("img", { src: currentImageData.download?.path, alt: "Current", style: { maxWidth: '300px', maxHeight: '200px' } }) })) : (_jsx("div", { className: "no-content", children: isLoading ? 'Loading gallery...' : 'No image available' })) }), _jsxs("div", { className: "navigation-test", children: [_jsx("button", { onClick: onSwipePrev, disabled: !isPrevAvailable || isLoading, children: "Test Previous" }), _jsx("button", { onClick: onSwipeNext, disabled: !isNextAvailable || isLoading, children: "Test Next" })] })] }));
+}

package/dist/hooks/useGallerySwipe.js

@@ -0,0 +1,321 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+/**
+ * Custom hook for handling image gallery navigation with automatic pagination
+ *
+ * This hook manages image swipe/navigation functionality across a paginated gallery.
+ * It handles the complexity of finding images across multiple pages and loading
+ * additional pages as needed during navigation.
+ *
+ * @param firebaseUid - User's Firebase UID (can be null during initialization)
+ * @param initImageId - Initial image ID to start with (can be null during initialization)
+ * @param controller - Controller instance for API calls (can be null during initialization)
+ * @returns Object containing current image data and navigation functions
+ */
+export function useGallerySwipe(firebaseUid, initImageId, controller) {
+    // Core state for current image and navigation
+    const [currentImageId, setCurrentImageId] = useState(initImageId);
+    const [currentImageData, setCurrentImageData] = useState(null);
+    const [currentEventId, setCurrentEventId] = useState(null);
+    // Pagination and image list state
+    const [currentImageList, setCurrentImageList] = useState([]);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [hasNextPage, setHasNextPage] = useState(false);
+    // UI state management
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Refs to track parameter changes and avoid unnecessary re-initialization
+    // This prevents the hook from re-initializing when the same values are passed
+    const prevFirebaseUid = useRef(null);
+    const prevInitImageId = useRef(null);
+    /**
+     * Get the index of the current image in the loaded image list
+     * Returns -1 if the current image is not found in the list
+     */
+    const getCurrentImageIndex = useCallback(() => {
+        if (!currentImageId || currentImageList.length === 0)
+            return -1;
+        return currentImageList.findIndex(img => img.id === currentImageId);
+    }, [currentImageId, currentImageList]);
+    /**
+     * Fetch image pages sequentially until the target image is found
+     * This is necessary because we don't know which page contains the initial image
+     *
+     * @param imageId - The target image ID to find
+     * @param eventId - The event ID to search within
+     * @returns Array of all gallery images up to and including the page containing the target image
+     */
+    const getImageListUntilFound = useCallback(async (imageId, eventId) => {
+        let page = 1;
+        let allImages = [];
+        let isFound = false;
+        // Search through pages until we find the target image or reach safety limit
+        while (!isFound && page <= 100) { // Safety limit to prevent infinite loop
+            try {
+                const response = await controller.getImageList(firebaseUid, eventId, page);
+                if (response.gallery && response.gallery.length > 0) {
+                    // Accumulate all images from previous pages
+                    allImages = [...allImages, ...response.gallery];
+                    // Check if target image is found in current page
+                    isFound = response.gallery.some(img => img.id === imageId);
+                    if (isFound) {
+                        // Update pagination state when target is found
+                        setCurrentPage(page);
+                        setHasNextPage(response.next_page !== 0 && response.next_page > response.current_page);
+                        break;
+                    }
+                    // If no next page exists, stop searching
+                    if (response.next_page === 0 || response.next_page <= response.current_page) {
+                        break;
+                    }
+                    page++;
+                }
+                else {
+                    // Empty response, stop searching
+                    break;
+                }
+            }
+            catch (err) {
+                console.error(`Error fetching page ${page}:`, err);
+                break;
+            }
+        }
+        return allImages;
+    }, [controller, firebaseUid]);
+    /**
+     * Load the next page of images when user reaches the end of current list
+     * This enables seamless navigation across page boundaries
+     *
+     * @returns Array of new images from the next page, or empty array if no more pages
+     */
+    const loadNextPage = useCallback(async () => {
+        // Check prerequisites before attempting to load next page
+        if (!hasNextPage || !currentEventId || !controller || !firebaseUid) {
+            return [];
+        }
+        try {
+            const nextPageNum = currentPage + 1;
+            const response = await controller.getImageList(firebaseUid, currentEventId, nextPageNum);
+            if (response.gallery && response.gallery.length > 0) {
+                // Update pagination state with new page information
+                setCurrentPage(nextPageNum);
+                setHasNextPage(response.next_page !== 0 && response.next_page > response.current_page);
+                return response.gallery;
+            }
+        }
+        catch (err) {
+            console.error('Error loading next page:', err);
+        }
+        return [];
+    }, [hasNextPage, currentEventId, controller, firebaseUid, currentPage]);
+    /**
+     * Initialize or re-initialize the gallery when parameters change
+     * This function:
+     * 1. Fetches initial image data
+     * 2. Discovers the event ID from the image
+     * 3. Loads all image pages until the initial image is found
+     * 4. Sets up pagination state
+     *
+     * Only re-initializes when parameters actually change to avoid unnecessary API calls
+     */
+    const initializeGallery = useCallback(async () => {
+        // Early return if required parameters are missing
+        if (!firebaseUid || !initImageId || !controller) {
+            setCurrentImageData(null);
+            setCurrentImageList([]);
+            setIsInitialized(false);
+            return;
+        }
+        // Check if re-initialization is needed by comparing with previous values
+        const needsReinit = prevFirebaseUid.current !== firebaseUid ||
+            prevInitImageId.current !== initImageId ||
+            !isInitialized;
+        if (!needsReinit)
+            return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            // Step 1: Get initial image data to discover event ID
+            const gallery = await controller.onGetImage(firebaseUid, initImageId);
+            if (!gallery) {
+                throw new Error('Failed to fetch initial image data');
+            }
+            // Step 2: Set up initial state with discovered data
+            setCurrentImageData(gallery);
+            setCurrentImageId(initImageId);
+            setCurrentEventId(gallery.event_id);
+            // Step 3: Get complete image list by searching through pages
+            // This ensures we have navigation context for the current image
+            const allImages = await getImageListUntilFound(initImageId, gallery.event_id);
+            setCurrentImageList(allImages);
+            // Step 4: Update tracking refs to prevent unnecessary re-initialization
+            prevFirebaseUid.current = firebaseUid;
+            prevInitImageId.current = initImageId;
+            setIsInitialized(true);
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+            setError(errorMessage);
+            console.error('Error initializing gallery:', err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [firebaseUid, initImageId, controller, getImageListUntilFound, isInitialized]);
+    /**
+     * Navigate to the next image in the gallery
+     * Handles two scenarios:
+     * 1. Next image exists in current loaded list - navigate directly
+     * 2. At end of current list - load next page and navigate to first image of new page
+     *
+     * @returns Promise that resolves when navigation is complete
+     */
+    const onSwipeNext = useCallback(async () => {
+        // Prevent action if no current image or already loading
+        if (!currentImageId || isLoading)
+            return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            const currentIndex = getCurrentImageIndex();
+            if (currentIndex === -1) {
+                throw new Error('Current image not found in list');
+            }
+            // Scenario 1: At the last image of current list
+            if (currentIndex === currentImageList.length - 1) {
+                // Try to load next page for more images
+                const newImages = await loadNextPage();
+                if (newImages.length > 0) {
+                    // Extend current list with new images
+                    const updatedList = [...currentImageList, ...newImages];
+                    setCurrentImageList(updatedList);
+                    // Navigate to first image of the new page
+                    const nextImage = newImages[0];
+                    setCurrentImageId(nextImage.id);
+                    // Fetch complete data for the new current image
+                    const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);
+                    if (nextImageData) {
+                        setCurrentImageData(nextImageData);
+                    }
+                }
+                else {
+                    // No more pages available - end of gallery reached
+                    setError('No more images available');
+                }
+            }
+            else {
+                // Scenario 2: Navigate to next image in current list
+                const nextImage = currentImageList[currentIndex + 1];
+                setCurrentImageId(nextImage.id);
+                // Fetch complete data for the next image
+                const nextImageData = await controller.onGetImage(firebaseUid, nextImage.id);
+                if (nextImageData) {
+                    setCurrentImageData(nextImageData);
+                }
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Error moving to next image';
+            setError(errorMessage);
+            console.error('Error in onSwipeNext:', err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [currentImageId, isLoading, getCurrentImageIndex, currentImageList, loadNextPage, controller, firebaseUid]);
+    /**
+     * Navigate to the previous image in the gallery
+     * Only works within the currently loaded image list
+     * (Previous pages are not loaded on-demand for backward navigation)
+     *
+     * @returns Promise that resolves when navigation is complete
+     */
+    const onSwipePrev = useCallback(async () => {
+        // Prevent action if no current image or already loading
+        if (!currentImageId || isLoading)
+            return;
+        setIsLoading(true);
+        setError(null);
+        try {
+            const currentIndex = getCurrentImageIndex();
+            if (currentIndex === -1) {
+                throw new Error('Current image not found in list');
+            }
+            if (currentIndex > 0) {
+                // Navigate to previous image in the current list
+                const prevImage = currentImageList[currentIndex - 1];
+                setCurrentImageId(prevImage.id);
+                // Fetch complete data for the previous image
+                const prevImageData = await controller.onGetImage(firebaseUid, prevImage.id);
+                if (prevImageData) {
+                    setCurrentImageData(prevImageData);
+                }
+            }
+            else {
+                // Already at the first image of loaded list
+                setError('Already at the first image');
+            }
+        }
+        catch (err) {
+            const errorMessage = err instanceof Error ? err.message : 'Error moving to previous image';
+            setError(errorMessage);
+            console.error('Error in onSwipePrev:', err);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [currentImageId, isLoading, getCurrentImageIndex, currentImageList, controller, firebaseUid]);
+    /**
+     * Calculate if next image navigation is available
+     * Returns true if:
+     * 1. There's a next image in the current loaded list, OR
+     * 2. We're at the end of current list but more pages are available
+     *
+     * @returns Boolean indicating if next navigation is possible
+     */
+    const isNextAvailable = useCallback(() => {
+        if (isLoading)
+            return false;
+        const currentIndex = getCurrentImageIndex();
+        if (currentIndex === -1)
+            return false;
+        // If we're not at the last image, next is definitely available
+        if (currentIndex < currentImageList.length - 1)
+            return true;
+        // If we're at the last image but there are more pages, next is still available
+        return hasNextPage;
+    }, [isLoading, getCurrentImageIndex, currentImageList.length, hasNextPage]);
+    /**
+     * Calculate if previous image navigation is available
+     * Returns true if there's a previous image in the currently loaded list
+     *
+     * @returns Boolean indicating if previous navigation is possible
+     */
+    const isPrevAvailable = useCallback(() => {
+        if (isLoading)
+            return false;
+        const currentIndex = getCurrentImageIndex();
+        return currentIndex > 0;
+    }, [isLoading, getCurrentImageIndex]);
+    // Initialize when dependencies change
+    useEffect(() => {
+        initializeGallery();
+    }, [initializeGallery]);
+    // Update currentImageId when initImageId changes (but only if different)
+    // This allows the hook to respond to external changes to the initial image ID
+    useEffect(() => {
+        if (initImageId && initImageId !== currentImageId) {
+            setCurrentImageId(initImageId);
+        }
+    }, [initImageId, currentImageId]);
+    // Return all the functionality and state that components need
+    return {
+        currentImageData,
+        isNextAvailable: isNextAvailable(),
+        isPrevAvailable: isPrevAvailable(),
+        onSwipeNext,
+        onSwipePrev,
+        isLoading,
+        error
+    };
+}

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/utils/adjustment.d.ts

@@ -0,0 +1,5 @@
+import { ColorAdjustment } from "../hooks/editor/type";
+import { AdjustmentState } from "../hooks/editor/useHonchoEditor";
+import { AdjustmentValues } from "../lib/editor/honcho-editor";
+export declare function mapAdjustmentStateToAdjustmentEditor(state: AdjustmentState): AdjustmentValues;
+export declare function mapColorAdjustmentToAdjustmentState(colors: ColorAdjustment): AdjustmentState;

package/dist/utils/adjustment.js

@@ -0,0 +1,32 @@
+export function mapAdjustmentStateToAdjustmentEditor(state) {
+    return {
+        temperature: state.tempScore,
+        tint: state.tintScore,
+        saturation: state.saturationScore,
+        vibrance: state.vibranceScore,
+        exposure: state.exposureScore,
+        contrast: state.contrastScore,
+        highlights: state.highlightsScore,
+        shadows: state.shadowsScore,
+        whites: state.whitesScore,
+        blacks: state.blacksScore,
+        clarity: state.clarityScore,
+        sharpness: state.sharpnessScore,
+    };
+}
+export function mapColorAdjustmentToAdjustmentState(colors) {
+    return {
+        tempScore: colors.temperature,
+        tintScore: colors.tint,
+        vibranceScore: colors.vibrance,
+        saturationScore: colors.saturation,
+        exposureScore: colors.exposure,
+        highlightsScore: colors.highlights,
+        shadowsScore: colors.shadows,
+        whitesScore: colors.whites,
+        blacksScore: colors.blacks,
+        contrastScore: colors.contrast,
+        clarityScore: colors.clarity,
+        sharpnessScore: colors.sharpness
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -10,7 +10,10 @@
     "public"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
@@ -26,12 +29,18 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^6.1.2",
     "@mui/material": "^6.1.2",
+    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "jest": "^30.0.5",
+    "jest-environment-jsdom": "^30.0.5",
     "next": "^13.5.6 || ^14.0.0",
     "react": "^18",
     "react-dom": "^18",
+    "ts-jest": "^29.4.1",
     "tsup": "^8.0.0",
     "typescript": "^5"
   },