@yogiswara/honcho-editor-ui 2.2.0 → 2.2.2

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { AdjustmentValues } from "../../../lib/editor/honcho-editor";
 import type { PhotoData as BulkPhotoData } from "../../../hooks/editor/useHonchoEditorBulk";
-interface ExtendedPhotoData extends BulkPhotoData {
+export interface ExtendedPhotoData extends BulkPhotoData {
     adjustments?: Partial<AdjustmentValues>;
     frame?: string;
 }
@@ -10,9 +10,9 @@ interface ImageGalleryProps {
     isSelectedMode: boolean;
     isHiddenGallery: boolean;
     enableEditor: boolean;
-    onPreview: (photo: ExtendedPhotoData) => () => void;
+    onPreview: (photo: ExtendedPhotoData) => void;
     onSelectedMode: () => void;
-    onToggleSelect: (photo: ExtendedPhotoData) => () => void;
+    onToggleSelect: (photo: ExtendedPhotoData) => void;
 }
-declare const AlbumImageGallery: React.FC<ImageGalleryProps>;
-export default AlbumImageGallery;
+export declare const AlbumImageGallery: React.FC<ImageGalleryProps>;
+export {};

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

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Stack } from "@mui/material";
 import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
 import GalleryImageItem from "./ImageItem";
-const AlbumImageGallery = (props) => {
+export const AlbumImageGallery = (props) => {
     const { imageCollection, isSelectedMode, isHiddenGallery, enableEditor, // Destructure the new prop
     onPreview, onSelectedMode, onToggleSelect, } = props;
     console.log("imageCollection: ", imageCollection);
@@ -27,7 +27,6 @@ const AlbumImageGallery = (props) => {
                     };
                     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, data: photo }) }, photo.key));
+                            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, data: photo }) }, photo.key));
                 }) }) }) }));
 };
-export default AlbumImageGallery;

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

@@ -1,6 +1,7 @@
 import { SelectChangeEvent } from "@mui/material";
-import { AdjustmentState, ImageItem, Controller, Preset } from './useHonchoEditor';
+import { AdjustmentState, Controller, Preset } from './useHonchoEditor';
 import { Gallery, ResponseGalleryPaging } from '../../hooks/editor/type';
+import { AdjustmentValues } from "../../lib/editor/honcho-editor";
 export interface PhotoData {
     key: string;
     src: string;
@@ -9,7 +10,7 @@ export interface PhotoData {
     height: number;
     alt: string;
     isSelected: boolean;
-    originalData: Gallery;
+    adjustments?: Partial<AdjustmentValues>;
 }
 export interface ControllerBulk {
     onGetImage(firebaseUid: string, imageID: string): Promise<Gallery>;
@@ -20,39 +21,15 @@ export interface ControllerBulk {
     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): {
+export declare function useHonchoEditorBulk(controller: 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[];
-    currentBatch: import("../useAdjustmentHistoryBatch").BatchAdjustmentState;
     selectedIds: string[];
-    allImageIds: string[];
-    adjustmentsMap: Map<string, AdjustmentState>;
+    handleBackCallbackBulk: () => void;
     selectedBulkPreset: string;
     handleToggleImageSelection: (imageId: string) => void;
-    toggleBulkEditing: () => void;
     handleSelectBulkPreset: (event: SelectChangeEvent<string>) => void;
-    setTempScore: (value: number) => void;
-    setTintScore: (value: number) => void;
-    setVibranceScore: (value: number) => void;
-    setSaturationScore: (value: number) => void;
-    setExposureScore: (value: number) => void;
-    setHighlightsScore: (value: number) => void;
-    setShadowsScore: (value: number) => void;
-    setWhitesScore: (value: number) => void;
-    setBlacksScore: (value: number) => void;
-    setContrastScore: (value: number) => void;
-    setClarityScore: (value: number) => void;
-    setSharpnessScore: (value: number) => void;
     handleBulkTempDecreaseMax: () => void;
     handleBulkTempDecrease: () => void;
     handleBulkTempIncrease: () => void;

package/dist/hooks/editor/useHonchoEditorBulk.js

@@ -1,28 +1,28 @@
 'use client';
-import { useState, useCallback, useEffect, useMemo } from 'react';
-import { useAdjustmentHistory } from '../useAdjustmentHistory';
+import { useState, useCallback, useEffect } from 'react';
 import { useAdjustmentHistoryBatch } from '../useAdjustmentHistoryBatch';
 // Helper function to map the API response to the format our UI component needs
 const mapGalleryToPhotoData = (gallery) => {
-    // Use thumbnail as the primary source, with fallbacks for safety
-    const bestImage = gallery.thumbnail || gallery.download || { path: '', width: 1, height: 1, key: gallery.id, size: 0 };
     return {
         key: gallery.id,
-        src: bestImage.path,
-        original: gallery.download?.path || bestImage.path,
-        width: bestImage.width || 1,
-        height: bestImage.height || 1,
+        src: gallery.raw_thumbnail?.path ? gallery.raw_thumbnail.path : gallery.thumbnail?.path,
+        original: gallery.download?.path || gallery.thumbnail?.path,
+        width: gallery.thumbnail?.width,
+        height: gallery.thumbnail?.height,
         alt: gallery.id || 'gallery image',
         isSelected: false, // Default to not selected
-        originalData: gallery,
+        adjustments: gallery.editor_config?.color_adjustment,
     };
 };
-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 mapToImageAdjustmentConfig = (gallery) => {
+    return {
+        imageId: gallery.id,
+        adjustment: mapColorAdjustmentToAdjustmentState(gallery.editor_config?.color_adjustment),
+    };
 };
-const clamp = (value) => Math.max(-100, Math.min(100, value));
 function mapColorAdjustmentToAdjustmentState(adj) {
+    if (!adj)
+        return undefined;
     return {
         tempScore: adj.temperature || 0,
         tintScore: adj.tint || 0,
@@ -38,76 +38,22 @@ function mapColorAdjustmentToAdjustmentState(adj) {
         sharpnessScore: adj.sharpness || 0,
     };
 }
-export function useHonchoEditorBulk(controllerBulk, eventID, firebaseUid) {
-    const { currentState, actions: historyActions, } = useAdjustmentHistory(initialAdjustments);
-    const { currentBatch, selectedIds, allImageIds, actions: batchActions, historyInfo } = useAdjustmentHistoryBatch({});
+export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
+    const { currentBatch, selectedIds, actions: batchActions } = 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 [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(() => {
-        const lastSelectedId = selectedImageIds.length > 0 ? selectedImageIds[selectedImageIds.length - 1] : eventID;
-        controllerBulk.handleBack(firebaseUid, lastSelectedId);
-    }, [controllerBulk, firebaseUid, selectedImageIds, eventID]);
-    const handleSelectedMode = useCallback(() => setIsSelectedMode(true), []);
-    const handleToggleSelect = useCallback((photoToToggle) => () => {
-        setImageCollection(current => current.map(p => p.key === photoToToggle.key ? { ...p, isSelected: !p.isSelected } : p));
-        if (!isSelectedMode)
-            setIsSelectedMode(true);
-    }, [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;
-            setSelectedImages(isNowBulk ? 'Selected' : 'Select');
-            return isNowBulk;
-        });
-    };
+        const lastSelectedId = selectedIds.length > 0 ? selectedIds[selectedIds.length - 1] : eventID;
+        controller.handleBack(firebaseUid, lastSelectedId);
+    }, [controller, firebaseUid, selectedIds, eventID]);
     const handleSelectBulkPreset = (event) => setSelectedBulkPreset(event.target.value);
     // This factory creates functions that adjust a value for all selected images
-    const updateAdjustments = useCallback((newValues) => {
-        const newState = { ...currentState, ...newValues };
-        historyActions.pushState(newState);
-        console.log('Updated adjustments:', newState);
-    }, [currentState, historyActions]);
-    const createRelativeAdjuster = (key, amount) => () => {
-        const currentValue = currentState[key];
-        const newValue = clamp(currentValue + amount);
-        updateAdjustments({ [key]: newValue });
-    };
-    const setTempScore = (value) => updateAdjustments({ tempScore: value });
-    const setTintScore = (value) => updateAdjustments({ tintScore: value });
-    const setVibranceScore = (value) => updateAdjustments({ vibranceScore: value });
-    const setSaturationScore = (value) => updateAdjustments({ saturationScore: value });
-    const setExposureScore = (value) => updateAdjustments({ exposureScore: value });
-    const setHighlightsScore = (value) => updateAdjustments({ highlightsScore: value });
-    const setShadowsScore = (value) => updateAdjustments({ shadowsScore: value });
-    const setWhitesScore = (value) => updateAdjustments({ whitesScore: value });
-    const setBlacksScore = (value) => updateAdjustments({ blacksScore: value });
-    const setContrastScore = (value) => updateAdjustments({ contrastScore: value });
-    const setClarityScore = (value) => updateAdjustments({ clarityScore: value });
-    const setSharpnessScore = (value) => updateAdjustments({ sharpnessScore: value });
+    const createRelativeAdjuster = useCallback((key, amount) => () => {
+        batchActions.adjustSelected({ [key]: amount });
+    }, [batchActions]);
     const handleBulkTempDecreaseMax = createRelativeAdjuster('tempScore', -20);
     const handleBulkTempDecrease = createRelativeAdjuster('tempScore', -5);
     const handleBulkTempIncrease = createRelativeAdjuster('tempScore', 5);
@@ -161,8 +107,9 @@ export function useHonchoEditorBulk(controllerBulk, eventID, firebaseUid) {
         if (eventID && firebaseUid) {
             setIsLoading(true);
             setError(null);
-            controllerBulk.getImageList(firebaseUid, eventID, 1)
+            controller.getImageList(firebaseUid, eventID, 1)
                 .then(response => {
+                batchActions.syncAdjustment(response.gallery.map(mapToImageAdjustmentConfig));
                 const mappedData = response.gallery.map(mapGalleryToPhotoData);
                 setImageCollection(mappedData);
             })
@@ -174,42 +121,30 @@ export function useHonchoEditorBulk(controllerBulk, eventID, firebaseUid) {
                 setIsLoading(false);
             });
         }
-    }, [eventID, firebaseUid, controllerBulk]);
+    }, [eventID, firebaseUid, controller]);
+    useEffect(() => {
+        // react the changes in the batch state
+        if (currentBatch.allImages) {
+            setImageCollection((current) => {
+                const updated = current.map((image) => {
+                    const adjustment = currentBatch.allImages[image.key];
+                    return adjustment ? { ...image, ...adjustment } : image;
+                });
+                return updated;
+            });
+            console.log("Adjustment changed detected");
+        }
+    }, [currentBatch.allImages]);
     return {
         imageCollection,
-        isSelectedMode,
         isLoading,
         error,
-        selectedImageIds,
+        selectedIds,
         // Gallery Handlers
-        handleSelectedMode,
-        handleToggleSelect,
-        handlePreview,
         handleBackCallbackBulk,
-        isBulkEditing,
-        selectedImages,
-        imageList,
-        currentBatch,
-        selectedIds,
-        allImageIds,
-        adjustmentsMap,
         selectedBulkPreset,
         handleToggleImageSelection: batchActions.toggleSelection,
-        toggleBulkEditing,
         handleSelectBulkPreset,
-        // Bulk Adjustment Handlers
-        setTempScore,
-        setTintScore,
-        setVibranceScore,
-        setSaturationScore,
-        setExposureScore,
-        setHighlightsScore,
-        setShadowsScore,
-        setWhitesScore,
-        setBlacksScore,
-        setContrastScore,
-        setClarityScore,
-        setSharpnessScore,
         // Adjustment
         handleBulkTempDecreaseMax,
         handleBulkTempDecrease,

package/dist/index.d.ts

@@ -21,10 +21,13 @@ export { default as HWatermarkView } from './components/editor/HWatermarkView';
 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 { default as AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
+export { AlbumImageGallery, ExtendedPhotoData } from './components/editor/GalleryAlbum/AlbumImageGallery';
 export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
 export { default as SimplifiedAlbumGallery } from './components/editor/GalleryAlbum/SimplifiedAlbumGallery';
 export { default as SimplifiedImageItem } from './components/editor/GalleryAlbum/SimplifiedImageItem';
+export { EditorProvider, useEditorContext } from './lib/context/EditorContext';
+export { useImageProcessor } from './lib/hooks/useImageProcessor';
+export { useEditorHeadless } from './lib/hooks/useEditorHeadless';
 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,10 +18,13 @@ export { default as HWatermarkView } from './components/editor/HWatermarkView';
 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 { default as AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
+export { AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
 export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
 export { default as SimplifiedAlbumGallery } from './components/editor/GalleryAlbum/SimplifiedAlbumGallery';
 export { default as SimplifiedImageItem } from './components/editor/GalleryAlbum/SimplifiedImageItem';
+export { EditorProvider, useEditorContext } from './lib/context/EditorContext';
+export { useImageProcessor } from './lib/hooks/useImageProcessor';
+export { useEditorHeadless } from './lib/hooks/useEditorHeadless';
 // --- History Hooks ---
 export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';

package/dist/lib/context/EditorContext.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { EditorProcessingService } from '../context/EditorProcessingService';
+interface EditorContextValue {
+    isReady: boolean;
+    error: Error | null;
+    processingService: EditorProcessingService;
+    queueStatus: {
+        queueLength: number;
+        isProcessing: boolean;
+        hasProcessor: boolean;
+    };
+}
+interface EditorProviderProps {
+    children: React.ReactNode;
+}
+export declare const EditorProvider: React.FC<EditorProviderProps>;
+export declare const useEditorContext: () => EditorContextValue;
+export {};

package/dist/lib/context/EditorContext.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useState } from 'react';
+import { useEditorHeadless } from '../hooks/useEditorHeadless';
+import { EditorProcessingService } from '../context/EditorProcessingService';
+const EditorContext = createContext(null);
+export const EditorProvider = ({ children }) => {
+    // Single editor instance for the entire app
+    const { editor, isReady, error, processImage } = useEditorHeadless();
+    // Single processing service instance
+    const [processingService] = useState(() => new EditorProcessingService());
+    const [queueStatus, setQueueStatus] = useState(processingService.getQueueStatus());
+    // Connect the editor to the processing service when ready
+    useEffect(() => {
+        if (isReady && processImage) {
+            console.debug('Connecting editor to processing service - editor ready:', isReady);
+            processingService.setProcessor(processImage);
+        }
+        else {
+            console.debug('Editor not ready yet - isReady:', isReady, 'processImage:', !!processImage);
+        }
+    }, [isReady, processImage, processingService]);
+    // Update queue status periodically - now event-driven instead of polling
+    useEffect(() => {
+        const updateStatus = () => {
+            setQueueStatus(processingService.getQueueStatus());
+        };
+        // Add listener for immediate updates
+        processingService.addStatusChangeListener(updateStatus);
+        // Optional: Keep a fallback interval for safety (much less frequent)
+        const interval = setInterval(updateStatus, 5000); // 5 seconds instead of 1
+        return () => {
+            processingService.removeStatusChangeListener(updateStatus);
+            clearInterval(interval);
+        };
+    }, [processingService]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            processingService.cleanup(); // Use new cleanup method
+        };
+    }, [processingService]);
+    const contextValue = {
+        isReady,
+        error,
+        processingService,
+        queueStatus,
+    };
+    return (_jsx(EditorContext.Provider, { value: contextValue, children: children }));
+};
+// Custom hook to use the editor context
+export const useEditorContext = () => {
+    const context = useContext(EditorContext);
+    if (!context) {
+        throw new Error('useEditorContext must be used within an EditorProvider');
+    }
+    return context;
+};

package/dist/lib/context/EditorProcessingService.d.ts

@@ -0,0 +1,34 @@
+import type { AdjustmentValues } from '../editor/honcho-editor';
+export interface EditorTask {
+    id: string;
+    path: string;
+    frame: string | null;
+    adjustments?: Partial<AdjustmentValues>;
+    priority?: number;
+}
+export interface EditorResponse {
+    id: string;
+    path: string;
+}
+export declare class EditorProcessingService {
+    private processingQueue;
+    private isProcessing;
+    private processImage?;
+    private pendingProcessingTimeout?;
+    private statusChangeListeners;
+    constructor();
+    setProcessor(processImage: (task: EditorTask) => Promise<EditorResponse>): void;
+    addStatusChangeListener(listener: () => void): void;
+    removeStatusChangeListener(listener: () => void): void;
+    private notifyStatusChange;
+    requestProcessing(task: EditorTask): Promise<EditorResponse>;
+    private scheduleProcessing;
+    private processQueue;
+    getQueueStatus(): {
+        queueLength: number;
+        isProcessing: boolean;
+        hasProcessor: boolean;
+    };
+    clearQueue(): void;
+    cleanup(): void;
+}

package/dist/lib/context/EditorProcessingService.js

@@ -0,0 +1,190 @@
+// Simple priority queue implementation using binary heap
+class PriorityQueue {
+    constructor() {
+        this.heap = [];
+    }
+    // Insert item maintaining priority order - O(log n)
+    enqueue(item) {
+        this.heap.push(item);
+        this.heapifyUp(this.heap.length - 1);
+    }
+    // Remove highest priority item - O(log n)
+    dequeue() {
+        if (this.heap.length === 0)
+            return undefined;
+        if (this.heap.length === 1)
+            return this.heap.pop();
+        const root = this.heap[0];
+        this.heap[0] = this.heap.pop();
+        this.heapifyDown(0);
+        return root;
+    }
+    get length() {
+        return this.heap.length;
+    }
+    clear() {
+        return this.heap.splice(0);
+    }
+    heapifyUp(index) {
+        while (index > 0) {
+            const parentIndex = Math.floor((index - 1) / 2);
+            if (this.compare(this.heap[index], this.heap[parentIndex]) <= 0)
+                break;
+            [this.heap[index], this.heap[parentIndex]] = [this.heap[parentIndex], this.heap[index]];
+            index = parentIndex;
+        }
+    }
+    heapifyDown(index) {
+        while (true) {
+            let maxIndex = index;
+            const leftChild = 2 * index + 1;
+            const rightChild = 2 * index + 2;
+            if (leftChild < this.heap.length && this.compare(this.heap[leftChild], this.heap[maxIndex]) > 0) {
+                maxIndex = leftChild;
+            }
+            if (rightChild < this.heap.length && this.compare(this.heap[rightChild], this.heap[maxIndex]) > 0) {
+                maxIndex = rightChild;
+            }
+            if (maxIndex === index)
+                break;
+            [this.heap[index], this.heap[maxIndex]] = [this.heap[maxIndex], this.heap[index]];
+            index = maxIndex;
+        }
+    }
+    // Compare function: higher priority first, then older timestamp
+    compare(a, b) {
+        if (a.priority !== b.priority) {
+            return (a.priority || 0) - (b.priority || 0);
+        }
+        return b.timestamp - a.timestamp; // Older first (reversed for min-heap behavior)
+    }
+}
+export class EditorProcessingService {
+    constructor() {
+        this.processingQueue = new PriorityQueue();
+        this.isProcessing = false;
+        this.statusChangeListeners = [];
+        console.debug('EditorProcessingService created');
+    }
+    // Set the processing function from the editor
+    setProcessor(processImage) {
+        this.processImage = processImage;
+        console.debug('Editor processor set, queue length:', this.processingQueue.length);
+        // Start processing if there are queued items
+        if (this.processingQueue.length > 0) {
+            this.scheduleProcessing();
+        }
+    }
+    // Add listener for status changes
+    addStatusChangeListener(listener) {
+        this.statusChangeListeners.push(listener);
+    }
+    // Remove status change listener
+    removeStatusChangeListener(listener) {
+        const index = this.statusChangeListeners.indexOf(listener);
+        if (index > -1) {
+            this.statusChangeListeners.splice(index, 1);
+        }
+    }
+    // Notify status change listeners
+    notifyStatusChange() {
+        this.statusChangeListeners.forEach(listener => listener());
+    }
+    // Add task to processing queue
+    async requestProcessing(task) {
+        return new Promise((resolve, reject) => {
+            // Validate that we have a processor
+            if (!this.processImage) {
+                console.warn('No processor available, rejecting task:', task.id);
+                reject(new Error('Editor not ready - processor not set'));
+                return;
+            }
+            const queueItem = {
+                ...task,
+                priority: task.priority || 0,
+                resolve,
+                reject,
+                timestamp: Date.now(),
+            };
+            // Add to priority queue - O(log n)
+            this.processingQueue.enqueue(queueItem);
+            console.debug(`Added task ${task.id} to queue. Queue length: ${this.processingQueue.length}`);
+            // Notify status change
+            this.notifyStatusChange();
+            // Schedule processing with debouncing
+            this.scheduleProcessing();
+        });
+    }
+    // Debounced processing to avoid starting processing on every single addition
+    scheduleProcessing() {
+        if (this.pendingProcessingTimeout) {
+            clearTimeout(this.pendingProcessingTimeout);
+        }
+        this.pendingProcessingTimeout = setTimeout(() => {
+            this.processQueue();
+        }, 5); // 5ms debounce
+    }
+    // Process queue sequentially
+    async processQueue() {
+        if (this.isProcessing || this.processingQueue.length === 0 || !this.processImage) {
+            return;
+        }
+        this.isProcessing = true;
+        this.notifyStatusChange();
+        console.debug('Starting queue processing...');
+        while (this.processingQueue.length > 0) {
+            // Get highest priority item - O(log n) vs O(n log n) sorting
+            const item = this.processingQueue.dequeue();
+            console.debug(`Processing task ${item.id} (priority: ${item.priority || 0}, queue remaining: ${this.processingQueue.length})`);
+            try {
+                const result = await this.processImage(item);
+                item.resolve(result);
+            }
+            catch (error) {
+                console.error(`Failed to process task ${item.id}:`, error);
+                item.reject(error instanceof Error ? error : new Error(String(error)));
+            }
+            // Yield control to browser for UI updates - more efficient than setTimeout
+            await new Promise(resolve => {
+                if (typeof requestIdleCallback !== 'undefined') {
+                    requestIdleCallback(resolve);
+                }
+                else {
+                    // Fallback for environments without requestIdleCallback
+                    setTimeout(resolve, 0);
+                }
+            });
+            // Notify status change after each item
+            this.notifyStatusChange();
+        }
+        this.isProcessing = false;
+        this.notifyStatusChange();
+        console.debug('Queue processing complete');
+    }
+    // Get current queue status
+    getQueueStatus() {
+        return {
+            queueLength: this.processingQueue.length,
+            isProcessing: this.isProcessing,
+            hasProcessor: !!this.processImage,
+        };
+    }
+    // Clear the queue (useful for cleanup)
+    clearQueue() {
+        const clearedItems = this.processingQueue.clear();
+        clearedItems.forEach(item => {
+            item.reject(new Error('Queue cleared'));
+        });
+        this.notifyStatusChange();
+        console.debug(`Cleared ${clearedItems.length} items from queue`);
+    }
+    // Cleanup method for removing timeouts
+    cleanup() {
+        if (this.pendingProcessingTimeout) {
+            clearTimeout(this.pendingProcessingTimeout);
+            this.pendingProcessingTimeout = undefined;
+        }
+        this.clearQueue();
+        this.statusChangeListeners.length = 0;
+    }
+}

package/dist/lib/hooks/useEditor.d.ts

@@ -0,0 +1,22 @@
+import type { EditorTask, EditorResponse } from '../context/EditorProcessingService';
+interface UseEditorOptions {
+    priority?: number;
+}
+interface UseEditorResult {
+    processImage: (task: Omit<EditorTask, 'priority'>) => Promise<EditorResponse>;
+    isEditorReady: boolean;
+    editorError: Error | null;
+    queueStatus: {
+        queueLength: number;
+        isProcessing: boolean;
+        hasProcessor: boolean;
+    };
+}
+/**
+ * Lightweight hook for components to request image processing
+ * Uses the global editor instance via context
+ */
+export declare const useEditor: (options?: UseEditorOptions) => UseEditorResult;
+export declare const useEditorHighPriority: () => UseEditorResult;
+export declare const useEditorLowPriority: () => UseEditorResult;
+export {};

package/dist/lib/hooks/useEditor.js

@@ -0,0 +1,35 @@
+'use client';
+import { useCallback } from 'react';
+import { useEditorContext } from '../context/EditorContext';
+/**
+ * Lightweight hook for components to request image processing
+ * Uses the global editor instance via context
+ */
+export const useEditor = (options = {}) => {
+    const { isReady, error, processingService, queueStatus } = useEditorContext();
+    const { priority = 0 } = options;
+    const processImage = useCallback(async (task) => {
+        if (!isReady) {
+            throw new Error('Editor not ready');
+        }
+        const taskWithPriority = {
+            ...task,
+            priority,
+        };
+        return processingService.requestProcessing(taskWithPriority);
+    }, [isReady, processingService, priority]);
+    return {
+        processImage,
+        isEditorReady: isReady,
+        editorError: error,
+        queueStatus,
+    };
+};
+// Convenience hook for high-priority processing (e.g., visible images)
+export const useEditorHighPriority = () => {
+    return useEditor({ priority: 10 });
+};
+// Convenience hook for low-priority processing (e.g., off-screen images)
+export const useEditorLowPriority = () => {
+    return useEditor({ priority: 1 });
+};

package/dist/lib/hooks/useEditorHeadless.d.ts

@@ -0,0 +1,18 @@
+import { AdjustmentValues, HonchoEditor } from '../editor/honcho-editor';
+interface EditorTask {
+    id: string;
+    path: string;
+    frame: string | null;
+    adjustments?: Partial<AdjustmentValues>;
+}
+interface EditorResponse {
+    id: string;
+    path: string;
+}
+export declare function useEditorHeadless(): {
+    editor: HonchoEditor | null;
+    isReady: boolean;
+    error: Error | null;
+    processImage: (task: EditorTask) => Promise<EditorResponse>;
+};
+export {};

package/dist/lib/hooks/useEditorHeadless.js

@@ -0,0 +1,128 @@
+'use client';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { HonchoEditor, HonchoEditorUtils } from '../editor/honcho-editor';
+export function useEditorHeadless() {
+    const editorRef = useRef(null);
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    const [isScriptLoaded, setIsScriptLoaded] = useState(false);
+    // Load script dynamically without component
+    useEffect(() => {
+        const loadScript = () => {
+            // Check if script is already loaded
+            if (document.querySelector('script[src="/honcho-photo-editor.js"]')) {
+                setIsScriptLoaded(true);
+                return;
+            }
+            const script = document.createElement('script');
+            script.src = '/honcho-photo-editor.js';
+            script.async = true;
+            script.onload = () => {
+                console.debug('Honcho photo editor script loaded');
+                setIsScriptLoaded(true);
+            };
+            script.onerror = () => {
+                console.error('Failed to load honcho photo editor script');
+                setError(new Error('Failed to load editor script'));
+            };
+            document.head.appendChild(script);
+        };
+        loadScript();
+        // Cleanup script on unmount
+        return () => {
+            const script = document.querySelector('script[src="/honcho-photo-editor.js"]');
+            if (script) {
+                script.remove();
+            }
+        };
+    }, []);
+    // Initialize editor when script is loaded
+    useEffect(() => {
+        if (!isScriptLoaded)
+            return;
+        const initialize = async () => {
+            try {
+                console.debug('Script loaded, initializing editor...');
+                if (!editorRef.current) {
+                    editorRef.current = new HonchoEditor();
+                }
+                await editorRef.current.initialize(false);
+                setIsReady(true);
+            }
+            catch (e) {
+                console.error("Failed to initialize editor:", e);
+                setError(e instanceof Error ? e : new Error(String(e)));
+            }
+        };
+        initialize();
+        return () => {
+            editorRef.current?.cleanup();
+        };
+    }, [isScriptLoaded]);
+    // Helper function to load image as blob with fallback
+    const loadImageAsBlob = async (url) => {
+        try {
+            // Try direct fetch first (faster, no server load)
+            const response = await fetch(url, {
+                mode: 'cors',
+                credentials: 'omit'
+            });
+            if (!response.ok) {
+                throw new Error(`Direct fetch failed: ${response.statusText}`);
+            }
+            return response.blob();
+        }
+        catch (error) {
+            console.warn(`Direct fetch failed for ${url}, trying proxy fallback:`, error);
+            // Fallback to proxy API if CORS or other fetch issues
+            try {
+                const proxyUrl = `/api/image?imageUrl=${encodeURIComponent(url)}`;
+                const response = await fetch(proxyUrl);
+                if (!response.ok) {
+                    throw new Error(`Proxy fetch failed: ${response.statusText}`);
+                }
+                return response.blob();
+            }
+            catch (proxyError) {
+                console.error(`Both direct and proxy fetch failed for ${url}:`, proxyError);
+                throw new Error(`Failed to load image: ${proxyError instanceof Error ? proxyError.message : 'Unknown error'}`);
+            }
+        }
+    };
+    // Process single image task
+    const processImage = useCallback(async (task) => {
+        if (!editorRef.current || !isReady) {
+            throw new Error('Editor not ready');
+        }
+        try {
+            console.debug(`Processing image: ${task.id}`);
+            // Load original image as blob first
+            const imageBlob = await loadImageAsBlob(task.path);
+            // Convert blob to File for HonchoEditor
+            const imageFile = new File([imageBlob], `image-${task.id}`, { type: imageBlob.type });
+            // Load frame if provided
+            let frameFile = null;
+            if (task.frame) {
+                const frameBlob = await loadImageAsBlob(task.frame);
+                frameFile = new File([frameBlob], `frame-${task.id}`, { type: frameBlob.type });
+            }
+            // Process image using HonchoEditor's one-shot method
+            const processedImageData = await editorRef.current.processImageOneShot(imageFile, task.adjustments, frameFile);
+            // Convert ImageData to Blob
+            const processedBlob = await HonchoEditorUtils.imageDataToBlob(processedImageData);
+            // Create blob URL for processed result
+            const blobUrl = URL.createObjectURL(processedBlob);
+            return { id: task.id, path: blobUrl };
+        }
+        catch (error) {
+            console.error(`Failed to process image ${task.id}:`, error);
+            throw new Error(`Failed to process image: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+    }, [isReady, loadImageAsBlob]);
+    return {
+        editor: editorRef.current,
+        isReady,
+        error,
+        processImage
+    };
+}

package/dist/lib/hooks/useImageProcessor.d.ts

@@ -0,0 +1,15 @@
+import type { AdjustmentValues } from '../editor/honcho-editor';
+interface UseImageProcessorProps {
+    photoId: string;
+    photoSrc: string;
+    enableEditor?: boolean;
+    adjustments?: Partial<AdjustmentValues>;
+    frame?: string | null;
+    priority?: 'high' | 'low';
+}
+interface UseImageProcessorReturn {
+    processedImageSrc: string;
+    isProcessingComplete: boolean;
+}
+export declare function useImageProcessor({ photoId, photoSrc, enableEditor, adjustments, frame, priority, }: UseImageProcessorProps): UseImageProcessorReturn;
+export {};

package/dist/lib/hooks/useImageProcessor.js

@@ -0,0 +1,57 @@
+import { useState, useEffect, useMemo } from 'react';
+import { useEditorHighPriority, useEditorLowPriority } from '../hooks/useEditor';
+export function useImageProcessor({ photoId, photoSrc, enableEditor = true, adjustments, frame, priority = 'low', }) {
+    const { processImage, isEditorReady } = priority === 'high'
+        ? useEditorHighPriority()
+        : useEditorLowPriority();
+    // State for processed image and processing status
+    const [processedImageSrc, setProcessedImageSrc] = useState(photoSrc);
+    const [isProcessingComplete, setIsProcessingComplete] = useState(false);
+    // Memoize adjustments to prevent unnecessary effect triggers
+    const adjustmentsString = useMemo(() => adjustments ? JSON.stringify(adjustments) : '', [adjustments]);
+    const frameMemoized = useMemo(() => frame ? frame : null, [frame]);
+    // Process image when adjustments change
+    useEffect(() => {
+        if (!enableEditor || !isEditorReady || !adjustments) {
+            console.debug("Skipping editor processing:", {
+                enableEditor,
+                isEditorReady,
+                hasAdjustments: !!adjustments,
+                hasFrame: frameMemoized
+            });
+            setProcessedImageSrc(photoSrc);
+            setIsProcessingComplete(true);
+            return;
+        }
+        // Reset processing state when starting new processing
+        setIsProcessingComplete(false);
+        let cancelled = false;
+        const processImageWithEditor = async () => {
+            try {
+                const result = await processImage({
+                    id: photoId,
+                    path: photoSrc,
+                    frame: frameMemoized,
+                    adjustments: adjustments
+                });
+                if (!cancelled) {
+                    setProcessedImageSrc(result.path);
+                    setIsProcessingComplete(true);
+                }
+            }
+            catch (error) {
+                if (!cancelled) {
+                    console.error({ error, photoKey: photoId, isEditorReady }, 'Failed to process image with editor');
+                }
+            }
+        };
+        processImageWithEditor();
+        return () => {
+            cancelled = true;
+        };
+    }, [photoSrc, adjustmentsString, frameMemoized, enableEditor, isEditorReady, processImage, photoId]);
+    return {
+        processedImageSrc,
+        isProcessingComplete
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",