@yogiswara/honcho-editor-ui 2.5.9 → 2.6.0

package/dist/hooks/useGallerySwipe.d.ts

@@ -1,4 +1,4 @@
-import { Controller } from "./editor/useHonchoEditor";
+import { Controller } from "./editor/type";
 import { Gallery } from "./editor/type";
 /**
  * Return type for the useGallerySwipe hook

package/dist/hooks/usePaging.d.ts

@@ -0,0 +1,89 @@
+import { Gallery } from './editor/type';
+import { Controller } from "./editor/type";
+/**
+ * Configuration options for the paging hook
+ */
+export interface PagingOptions {
+    /** Enable development warnings for debugging */
+    devWarnings?: boolean;
+    /** Auto-load first page on hook initialization */
+    autoLoad?: boolean;
+    /** Reset pagination when dependencies change */
+    autoReset?: boolean;
+}
+/**
+ * Information about the current paging state
+ */
+export interface PagingInfo {
+    /** Whether images are currently being loaded */
+    isLoading: boolean;
+    /** Whether more pages are being loaded */
+    isLoadingMore: boolean;
+    /** Error message if any operation failed */
+    error: string | null;
+    /** Current page number */
+    currentPage: number;
+    /** Whether there are more pages to load */
+    hasMore: boolean;
+    /** Total number of images loaded */
+    totalImages: number;
+    /** Whether the hook has been initialized */
+    isInitialized: boolean;
+}
+/**
+ * Actions available for paging management
+ */
+export interface PagingActions {
+    /** Load more images (next page) - only one instance can run at a time */
+    loadMore: () => Promise<void>;
+    /** Refresh/reload from first page */
+    refresh: () => Promise<void>;
+    /** Reset pagination state */
+    reset: () => void;
+}
+/**
+ * Return type for the usePaging hook
+ */
+export interface UsePagingReturn {
+    /** Current list of images */
+    images: Gallery[];
+    /** Information about paging state */
+    info: PagingInfo;
+    /** Available paging actions */
+    actions: PagingActions;
+}
+/**
+ * Hook for managing paginated image loading with ControllerBulk.
+ *
+ * **Key Features:**
+ * - **Paginated Loading**: Handles page-by-page image loading
+ * - **State Management**: Maintains image list and pagination state
+ * - **Load More**: Seamlessly loads and appends next pages
+ * - **Mutation**: Update specific images without full reload
+ * - **Error Handling**: Provides error states for failed operations
+ * - **Auto-loading**: Optional automatic first page loading
+ *
+ * **Typical Usage:**
+ * ```typescript
+ * const { images, info, actions } = usePaging(controller, firebaseUid, eventId, {
+ *   autoLoad: true,
+ *   autoReset: true
+ * });
+ *
+ * // Load more images
+ * await actions.loadMore();
+ *
+ * // Refresh from beginning
+ * await actions.refresh();
+ *
+ * // Update specific image
+ * actions.mutateImage(imageId, (img) => ({ ...img, isSelected: true }));
+ * ```
+ *
+ * @param controller - Backend controller for API communication
+ * @param firebaseUid - User identifier for backend operations
+ * @param eventId - Event identifier for image list
+ * @param options - Configuration options
+ * @returns Object with images, info, and actions
+ */
+export declare function usePaging(controller: Controller | null, firebaseUid: string, eventId: string, options?: PagingOptions): UsePagingReturn;

package/dist/hooks/usePaging.js

@@ -0,0 +1,211 @@
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+/**
+ * Hook for managing paginated image loading with ControllerBulk.
+ *
+ * **Key Features:**
+ * - **Paginated Loading**: Handles page-by-page image loading
+ * - **State Management**: Maintains image list and pagination state
+ * - **Load More**: Seamlessly loads and appends next pages
+ * - **Mutation**: Update specific images without full reload
+ * - **Error Handling**: Provides error states for failed operations
+ * - **Auto-loading**: Optional automatic first page loading
+ *
+ * **Typical Usage:**
+ * ```typescript
+ * const { images, info, actions } = usePaging(controller, firebaseUid, eventId, {
+ *   autoLoad: true,
+ *   autoReset: true
+ * });
+ *
+ * // Load more images
+ * await actions.loadMore();
+ *
+ * // Refresh from beginning
+ * await actions.refresh();
+ *
+ * // Update specific image
+ * actions.mutateImage(imageId, (img) => ({ ...img, isSelected: true }));
+ * ```
+ *
+ * @param controller - Backend controller for API communication
+ * @param firebaseUid - User identifier for backend operations
+ * @param eventId - Event identifier for image list
+ * @param options - Configuration options
+ * @returns Object with images, info, and actions
+ */
+export function usePaging(controller, firebaseUid, eventId, options = {}) {
+    // Memoize options to prevent re-renders when object is recreated with same values
+    const memoizedOptions = useMemo(() => ({
+        devWarnings: options.devWarnings ?? false,
+        autoLoad: options.autoLoad ?? false,
+        autoReset: options.autoReset ?? true
+    }), [options.devWarnings, options.autoLoad, options.autoReset]);
+    // Core state
+    const [images, setImages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [error, setError] = useState(null);
+    const [currentPage, setCurrentPage] = useState(1);
+    const [hasMore, setHasMore] = useState(true);
+    const [isInitialized, setIsInitialized] = useState(false);
+    // Track if loadMore is currently running to prevent spam
+    const isLoadMoreRunningRef = useRef(false);
+    // Track dependencies with stable refs
+    const controllerRef = useRef(controller);
+    const firebaseUidRef = useRef(firebaseUid);
+    const eventIdRef = useRef(eventId);
+    // Only update refs when values actually change
+    if (controllerRef.current !== controller) {
+        controllerRef.current = controller;
+    }
+    if (firebaseUidRef.current !== firebaseUid) {
+        firebaseUidRef.current = firebaseUid;
+    }
+    if (eventIdRef.current !== eventId) {
+        eventIdRef.current = eventId;
+    }
+    // Helper function to log debug messages
+    const debugLog = useCallback((message, data) => {
+        if (memoizedOptions.devWarnings) {
+            console.log(`[usePaging] ${message}`, data || '');
+        }
+    }, [memoizedOptions.devWarnings]);
+    // Helper function to handle errors
+    const handleError = useCallback((operation, error) => {
+        const errorMessage = `Failed to ${operation}: ${error instanceof Error ? error.message : String(error)}`;
+        setError(errorMessage);
+        debugLog(`Error in ${operation}`, error);
+    }, [debugLog]);
+    // Load images for a specific page
+    const loadPage = useCallback(async (pageNum, isLoadMore = false) => {
+        if (!controllerRef.current || !firebaseUidRef.current || !eventIdRef.current) {
+            debugLog('Load skipped: missing controller, firebaseUid, or eventId');
+            return;
+        }
+        // Set appropriate loading state
+        if (isLoadMore) {
+            setIsLoadingMore(true);
+        }
+        else {
+            setIsLoading(true);
+        }
+        setError(null);
+        try {
+            debugLog(`Loading page ${pageNum}...`, { isLoadMore });
+            const response = await controllerRef.current.getImageList(firebaseUidRef.current, eventIdRef.current, pageNum);
+            debugLog('Page loaded successfully', {
+                page: response.current_page,
+                imageCount: response.gallery.length,
+                hasNext: response.next_page > 0
+            });
+            // Update images list
+            setImages(prev => {
+                if (isLoadMore) {
+                    // Append new images for load more
+                    return [...prev, ...response.gallery];
+                }
+                else {
+                    // Replace all images for initial load or refresh
+                    return response.gallery;
+                }
+            });
+            // Update pagination state
+            setCurrentPage(response.current_page);
+            setHasMore(response.next_page > 0 && response.gallery.length > 0);
+            if (!isInitialized) {
+                setIsInitialized(true);
+            }
+        }
+        catch (err) {
+            handleError(`load page ${pageNum}`, err);
+            // On error, don't change images if it's load more
+            if (!isLoadMore) {
+                setImages([]);
+            }
+        }
+        finally {
+            if (isLoadMore) {
+                setIsLoadingMore(false);
+            }
+            else {
+                setIsLoading(false);
+            }
+        }
+    }, [debugLog, handleError, isInitialized]);
+    // Load more images (next page) - spam-protected
+    const loadMore = useCallback(async () => {
+        // Prevent multiple concurrent loadMore calls
+        if (isLoadMoreRunningRef.current || isLoadingMore || !hasMore) {
+            debugLog('Load more skipped', {
+                isLoadMoreRunning: isLoadMoreRunningRef.current,
+                isLoadingMore,
+                hasMore
+            });
+            return;
+        }
+        // Mark as running to prevent spam
+        isLoadMoreRunningRef.current = true;
+        try {
+            debugLog('Loading more images...', { nextPage: currentPage + 1 });
+            await loadPage(currentPage + 1, true);
+        }
+        finally {
+            // Always reset the running flag
+            isLoadMoreRunningRef.current = false;
+        }
+    }, [isLoadingMore, hasMore, currentPage, loadPage, debugLog]);
+    // Refresh from first page
+    const refresh = useCallback(async () => {
+        debugLog('Refreshing from first page...');
+        setCurrentPage(1);
+        setHasMore(true);
+        await loadPage(1, false);
+    }, [loadPage, debugLog]);
+    // Reset pagination state
+    const reset = useCallback(() => {
+        debugLog('Resetting pagination state');
+        setImages([]);
+        setCurrentPage(1);
+        setHasMore(true);
+        setError(null);
+        setIsInitialized(false);
+        // Reset loadMore running flag when page changes
+        isLoadMoreRunningRef.current = false;
+    }, [debugLog]);
+    // Auto-load first page on initialization
+    useEffect(() => {
+        if (memoizedOptions.autoLoad && controller && firebaseUid && eventId && !isInitialized) {
+            debugLog('Auto-loading first page...');
+            loadPage(1, false);
+        }
+    }, [memoizedOptions.autoLoad, controller, firebaseUid, eventId, isInitialized, loadPage, debugLog]);
+    // Reset when dependencies change (if autoReset is enabled)
+    useEffect(() => {
+        if (memoizedOptions.autoReset && isInitialized) {
+            debugLog('Dependencies changed, resetting state');
+            reset();
+        }
+    }, [controller, firebaseUid, eventId, memoizedOptions.autoReset, isInitialized, reset, debugLog]);
+    // Paging info object - memoized to prevent re-renders
+    const info = useMemo(() => ({
+        isLoading,
+        isLoadingMore,
+        error,
+        currentPage,
+        hasMore,
+        totalImages: images.length,
+        isInitialized
+    }), [isLoading, isLoadingMore, error, currentPage, hasMore, images.length, isInitialized]);
+    // Actions object - memoized to prevent re-renders
+    const actions = useMemo(() => ({
+        loadMore,
+        refresh,
+        reset
+    }), [loadMore, refresh, reset]);
+    // Return object - memoized to prevent re-renders
+    return useMemo(() => ({
+        images,
+        info,
+        actions
+    }), [images, info, actions]);
+}

package/dist/hooks/usePreset.d.ts

@@ -1,4 +1,4 @@
-import { Controller, Preset, AdjustmentState } from './editor/useHonchoEditor';
+import { Controller, Preset, AdjustmentState } from './editor/type';
 /**
  * Configuration options for the preset hook
  */

package/dist/hooks/usePreset.js

@@ -42,25 +42,27 @@ export function usePreset(controller, firebaseUid, options = {}) {
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const [isInitialized, setIsInitialized] = useState(false);
-    // Track controller and firebaseUid changes with stable refs
-    const controllerRef = useRef(controller);
-    const firebaseUidRef = useRef(firebaseUid);
-    // Only update refs when values actually change
-    if (controllerRef.current !== controller) {
-        controllerRef.current = controller;
-    }
-    if (firebaseUidRef.current !== firebaseUid) {
-        firebaseUidRef.current = firebaseUid;
-    }
     // Helper function to log debug messages - memoized to prevent re-renders
     const debugLog = useCallback((message, data) => {
         if (memoizedOptions.devWarnings) {
             console.log(`[usePreset] ${message}`, data || '');
         }
     }, [memoizedOptions.devWarnings]);
+    // Stable references for controller and firebaseUid to detect actual changes
+    const stableControllerRef = useRef(controller);
+    const stableFirebaseUidRef = useRef(firebaseUid);
+    const prevStableControllerRef = useRef(controller);
+    const prevStableFirebaseUidRef = useRef(firebaseUid);
+    // Update refs only when values actually change (by reference)
+    if (stableControllerRef.current !== controller) {
+        stableControllerRef.current = controller;
+    }
+    if (stableFirebaseUidRef.current !== firebaseUid) {
+        stableFirebaseUidRef.current = firebaseUid;
+    }
     // Helper function to handle errors
     const handleError = useCallback((operation, error) => {
-        const errorMessage = `Failed to ${operation}: ${error?.message || error}`;
+        const errorMessage = `Failed to ${operation}: ${error instanceof Error ? error.message : String(error)}`;
         setError(errorMessage);
         debugLog(`Error in ${operation}`, error);
         return false;
@@ -68,50 +70,44 @@ export function usePreset(controller, firebaseUid, options = {}) {
     // Load presets from backend
     const load = useCallback(async () => {
         console.log("Load Presets Get Function Called");
-        if (!controllerRef.current || !firebaseUidRef.current) {
+        if (!stableControllerRef.current || !stableFirebaseUidRef.current) {
             debugLog('Load skipped: missing controller or firebaseUid');
             return;
         }
         setIsLoading(true);
         setError(null);
-        console.log('before GOINT to load 2.5. STATE UPDATE: setPresets is being called with:', presets);
         try {
             debugLog('Loading presets from backend...');
-            const loadedPresets = await controllerRef.current.getPresets(firebaseUidRef.current);
-            console.log('✅ 3. STATE UPDATE: setPresets is being called with:', loadedPresets);
+            const loadedPresets = await stableControllerRef.current.getPresets(stableFirebaseUidRef.current);
             setPresets(loadedPresets);
-            console.log('✅ 4. STATE UPDATE: setIsInitialized is being called with:', true);
-            console.log('presets thats called:', presets);
             setIsInitialized(true);
             debugLog('Presets loaded successfully', { count: loadedPresets.length });
         }
         catch (err) {
             handleError('load presets', err);
-            console.log('4. catch ERROR!');
             setPresets([]); // Clear presets on error
         }
         finally {
-            console.log('5. STATE UPDATE: setIsLoading is being called with:', false);
             setIsLoading(false);
         }
     }, [debugLog, handleError]);
     // Fire-and-forget version of load for internal use
     const loadInBackground = useCallback(() => {
-        if (!controllerRef.current || !firebaseUidRef.current) {
+        if (!stableControllerRef.current || !stableFirebaseUidRef.current) {
             debugLog('Background load skipped: missing controller or firebaseUid');
             return;
         }
         debugLog('Background loading presets...');
         // Don't set loading state for background operations
-        controllerRef.current.getPresets(firebaseUidRef.current)
-            .then(loadedPresets => {
+        stableControllerRef.current.getPresets(stableFirebaseUidRef.current)
+            .then((loadedPresets) => {
             setPresets(loadedPresets);
             if (!isInitialized) {
                 setIsInitialized(true);
             }
             debugLog('Background presets loaded successfully', { count: loadedPresets.length });
         })
-            .catch(err => {
+            .catch((err) => {
             debugLog('Background load failed:', err);
             // Don't set error state for background operations
         });
@@ -119,7 +115,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
     // Create a new preset
     const create = useCallback(async (name, settings) => {
         console.log("Create Preset Get Function Called");
-        if (!controllerRef.current || !firebaseUidRef.current) {
+        if (!stableControllerRef.current || !stableFirebaseUidRef.current) {
             debugLog('Create skipped: missing controller or firebaseUid');
             return null;
         }
@@ -137,7 +133,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
         try {
             debugLog('Creating preset...', { name, settings });
             // Fire the create request but don't wait for preset data in response
-            await controllerRef.current.createPreset(firebaseUidRef.current, name, settings);
+            await stableControllerRef.current.createPreset(stableFirebaseUidRef.current, name, settings);
             debugLog('Preset creation request completed');
             const newPreset = {
                 id: `temp-${Date.now()}`, // Use a temporary ID
@@ -178,7 +174,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
     }, [presets, debugLog, handleError, loadInBackground]);
     // Rename an existing preset
     const rename = useCallback(async (presetId, newName) => {
-        if (!controllerRef.current || !firebaseUidRef.current) {
+        if (!stableControllerRef.current || !stableFirebaseUidRef.current) {
             debugLog('Rename skipped: missing controller or firebaseUid');
             return false;
         }
@@ -201,7 +197,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
         try {
             debugLog('Renaming preset...', { presetId, oldName: existingPreset.name, newName });
             const updatedPreset = { ...existingPreset, name: newName };
-            await controllerRef.current.updatePreset(firebaseUidRef.current, updatedPreset);
+            await stableControllerRef.current.updatePreset(stableFirebaseUidRef.current, updatedPreset);
             // Update local state
             setPresets(prev => prev.map(p => p.id === presetId ? updatedPreset : p));
             debugLog('Preset renamed successfully');
@@ -218,7 +214,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
     // Delete a preset
     const deletePreset = useCallback(async (presetId) => {
         console.log("Delete Presets Get Function Called");
-        if (!controllerRef.current || !firebaseUidRef.current) {
+        if (!stableControllerRef.current || !stableFirebaseUidRef.current) {
             debugLog('Delete skipped: missing controller or firebaseUid');
             return false;
         }
@@ -231,7 +227,7 @@ export function usePreset(controller, firebaseUid, options = {}) {
         setError(null);
         try {
             debugLog('Deleting preset...', { presetId, name: existingPreset.name });
-            await controllerRef.current.deletePreset(firebaseUidRef.current, presetId);
+            await stableControllerRef.current.deletePreset(stableFirebaseUidRef.current, presetId);
             // Remove from local state
             setPresets(prev => prev.filter(p => p.id !== presetId));
             debugLog('Preset deleted successfully');
@@ -294,20 +290,24 @@ export function usePreset(controller, firebaseUid, options = {}) {
     }, [presets, debugLog]);
     // Auto-load presets on initialization - stable dependencies
     useEffect(() => {
-        if (memoizedOptions.autoLoad && controller && firebaseUid && !isInitialized) {
+        if (memoizedOptions.autoLoad && stableControllerRef.current && stableFirebaseUidRef.current && !isInitialized) {
             debugLog('Auto-loading presets...');
             load();
         }
-    }, [memoizedOptions.autoLoad, controller, firebaseUid, isInitialized, load, debugLog]);
-    // Clear state when controller or firebaseUid changes
+    }, [memoizedOptions.autoLoad, isInitialized, load]);
+    // Clear state when controller or firebaseUid changes - but only when they actually change
     useEffect(() => {
-        if (isInitialized) {
+        const controllerChanged = prevStableControllerRef.current !== stableControllerRef.current;
+        const firebaseUidChanged = prevStableFirebaseUidRef.current !== stableFirebaseUidRef.current;
+        if ((controllerChanged || firebaseUidChanged) && isInitialized) {
             debugLog('Controller or firebaseUid changed, clearing state');
-            // setPresets([]);
             setError(null);
             setIsInitialized(false);
+            // Don't clear presets to avoid flicker - they'll be reloaded
         }
-    }, [controller, firebaseUid, isInitialized, debugLog]);
+        prevStableControllerRef.current = stableControllerRef.current;
+        prevStableFirebaseUidRef.current = stableFirebaseUidRef.current;
+    }, [stableControllerRef.current, stableFirebaseUidRef.current, isInitialized]);
     // Preset info object - memoized to prevent re-renders
     const info = useMemo(() => ({
         isLoading,

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export { useHonchoEditor } from './hooks/editor/useHonchoEditor';
-export type { Controller, AdjustmentState, Preset, ImageItem, } from './hooks/editor/useHonchoEditor';
+export { useHonchoEditorSingle } from './hooks/editor/useHonchoEditorSingle';
 export { useHonchoEditorBulk } from './hooks/editor/useHonchoEditorBulk';
-export type { PhotoData, ControllerBulk } from './hooks/editor/useHonchoEditorBulk';
+export type { Controller, AdjustmentState, Preset, ImageItem, } from './hooks/editor/type';
+export type { PhotoData } from './hooks/editor/useHonchoEditorBulk';
 export type { Gallery, Content } from './hooks/editor/type';
 export { default as HHeaderEditor } from './components/editor/HHeaderEditor';
 export { default as HFooter } from './components/editor/HFooter';
@@ -29,6 +29,7 @@ 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 { usePreset, type UsePresetReturn, type PresetInfo, type PresetActions, type PresetOptions } from './hooks/usePreset';
+export { usePaging, type UsePagingReturn, type PagingInfo, type PagingActions, type PagingOptions } from './hooks/usePaging';
 export { default as useColors } from './themes/colors';
 export { default as useHonchoTypography } from './themes/honchoTheme';
 export { default as useIsMobile } from './utils/isMobile';

package/dist/index.js

@@ -1,4 +1,4 @@
-export { useHonchoEditor } from './hooks/editor/useHonchoEditor';
+export { useHonchoEditorSingle } from './hooks/editor/useHonchoEditorSingle';
 export { useHonchoEditorBulk } from './hooks/editor/useHonchoEditorBulk';
 export { default as HHeaderEditor } from './components/editor/HHeaderEditor';
 export { default as HFooter } from './components/editor/HFooter';
@@ -28,6 +28,8 @@ export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';
 // --- Preset Hook ---
 export { usePreset } from './hooks/usePreset';
+// --- Paging Hook ---
+export { usePaging } from './hooks/usePaging';
 // --- Theme & Utils ---
 export { default as useColors } from './themes/colors';
 export { default as useHonchoTypography } from './themes/honchoTheme';

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { EditorProcessingService } from '../context/EditorProcessingService';
+import HonchoEditor from "../editor/honcho-editor";
 interface EditorContextValue {
     isReady: boolean;
     error: Error | null;
@@ -9,9 +10,18 @@ interface EditorContextValue {
         isProcessing: boolean;
         hasProcessor: boolean;
     };
+    editor: HonchoEditor | null;
+    loadImageFromUrl: ((url: string) => Promise<{
+        width: number;
+        height: number;
+    }>) | null;
 }
 interface EditorProviderProps {
     children: React.ReactNode;
+    /** URL to the honcho-photo-editor.js script (defaults to '/honcho-photo-editor.js') */
+    scriptUrl?: string;
+    /** URL to the honcho-photo-editor.wasm file (defaults to '/honcho-photo-editor.wasm') */
+    wasmUrl?: string;
 }
 export declare const EditorProvider: React.FC<EditorProviderProps>;
 export declare const useEditorContext: () => EditorContextValue;

package/dist/lib/context/EditorContext.js

@@ -4,9 +4,9 @@ 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 }) => {
+export const EditorProvider = ({ children, scriptUrl = '/honcho-photo-editor.js', wasmUrl = '/honcho-photo-editor.wasm' }) => {
     // Single editor instance for the entire app
-    const { editor, isReady, error, processImage } = useEditorHeadless();
+    const { editor, isReady, error, processImage, loadImageFromUrl } = useEditorHeadless({ scriptUrl, wasmUrl });
     // Single processing service instance
     const [processingService] = useState(() => new EditorProcessingService());
     const [queueStatus, setQueueStatus] = useState(processingService.getQueueStatus());
@@ -45,6 +45,8 @@ export const EditorProvider = ({ children }) => {
         error,
         processingService,
         queueStatus,
+        editor: editor,
+        loadImageFromUrl
     };
     return (_jsx(EditorContext.Provider, { value: contextValue, children: children }));
 };

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

@@ -1,4 +1,12 @@
-import { AdjustmentValues, HonchoEditor } from '../editor/honcho-editor';
+import type { AdjustmentValues, HonchoEditor } from '../editor/honcho-editor';
+declare global {
+    interface Window {
+        HonchoEditor: new () => any;
+        HonchoEditorUtils: {
+            imageDataToBlob: (imageData: ImageData, format?: string, quality?: number) => Promise<Blob>;
+        };
+    }
+}
 interface EditorTask {
     id: string;
     path: string;
@@ -9,10 +17,18 @@ interface EditorResponse {
     id: string;
     path: string;
 }
-export declare function useEditorHeadless(): {
+interface UseEditorHeadlessOptions {
+    scriptUrl?: string;
+    wasmUrl?: string;
+}
+export declare function useEditorHeadless(options?: UseEditorHeadlessOptions): {
     editor: HonchoEditor | null;
     isReady: boolean;
     error: Error | null;
     processImage: (task: EditorTask) => Promise<EditorResponse>;
+    loadImageFromUrl: (url: string) => Promise<{
+        width: number;
+        height: number;
+    }>;
 };
 export {};