@yogiswara/honcho-editor-ui 2.5.10 → 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

@@ -1,5 +1,5 @@
 import { Gallery } from './editor/type';
-import { Controller } from "./editor/useHonchoEditor";
+import { Controller } from "./editor/type";
 /**
  * Configuration options for the paging hook
  */

package/dist/hooks/usePaging.js

@@ -72,7 +72,7 @@ export function usePaging(controller, firebaseUid, eventId, options = {}) {
     }, [memoizedOptions.devWarnings]);
     // 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);
     }, [debugLog]);

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';

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';

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 {};

package/dist/lib/hooks/useEditorHeadless.js

@@ -1,41 +1,110 @@
 'use client';
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { HonchoEditor, HonchoEditorUtils } from '../editor/honcho-editor';
-export function useEditorHeadless() {
+import { loadImageAsFile } from '../../utils/imageLoader';
+export function useEditorHeadless(options = {}) {
+    const { scriptUrl = '/honcho-photo-editor.js', wasmUrl = '/honcho-photo-editor.wasm' } = options;
     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"]')) {
+        const loadScripts = async () => {
+            // Check if HonchoEditor is already available
+            if (window.HonchoEditor) {
+                console.debug('HonchoEditor already available globally');
                 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);
+            // Load WASM module first
+            const loadWasmModule = () => {
+                return new Promise((resolve, reject) => {
+                    // Check if WASM module is already loaded
+                    if (document.querySelector(`script[src="${scriptUrl}"]`)) {
+                        console.debug('WASM module script already exists');
+                        resolve();
+                        return;
+                    }
+                    console.debug(`Loading WASM module from: ${scriptUrl}`);
+                    const wasmScript = document.createElement('script');
+                    wasmScript.src = scriptUrl;
+                    wasmScript.async = true;
+                    wasmScript.onload = () => {
+                        console.debug('WASM module script loaded');
+                        resolve();
+                    };
+                    wasmScript.onerror = () => {
+                        console.error(`Failed to load WASM module from: ${scriptUrl}`);
+                        reject(new Error('Failed to load WASM module'));
+                    };
+                    document.head.appendChild(wasmScript);
+                });
             };
-            script.onerror = () => {
-                console.error('Failed to load honcho photo editor script');
-                setError(new Error('Failed to load editor script'));
+            // Load wrapper script that creates HonchoEditor constructor
+            const loadWrapperScript = () => {
+                return new Promise((resolve, reject) => {
+                    const wrapperUrl = '/honcho-editor.js';
+                    // Check if wrapper script is already loaded
+                    if (document.querySelector(`script[src="${wrapperUrl}"]`)) {
+                        console.debug('Wrapper script already exists');
+                        resolve();
+                        return;
+                    }
+                    console.debug(`Loading HonchoEditor wrapper from: ${wrapperUrl}`);
+                    const wrapperScript = document.createElement('script');
+                    wrapperScript.src = wrapperUrl;
+                    wrapperScript.async = true;
+                    wrapperScript.onload = () => {
+                        console.debug('Wrapper script loaded');
+                        resolve();
+                    };
+                    wrapperScript.onerror = () => {
+                        console.error(`Failed to load wrapper script from: ${wrapperUrl}`);
+                        reject(new Error('Failed to load wrapper script'));
+                    };
+                    document.head.appendChild(wrapperScript);
+                });
             };
-            document.head.appendChild(script);
+            try {
+                // Load WASM module first
+                await loadWasmModule();
+                // Then load the wrapper that creates the constructor
+                await loadWrapperScript();
+                // Wait for HonchoEditor constructor to be available
+                const waitForConstructor = () => {
+                    return new Promise((resolve, reject) => {
+                        const checkInterval = setInterval(() => {
+                            if (window.HonchoEditor && typeof window.HonchoEditor === 'function') {
+                                console.debug('HonchoEditor constructor now available');
+                                clearInterval(checkInterval);
+                                resolve();
+                            }
+                        }, 100);
+                        // Timeout after 10 seconds
+                        setTimeout(() => {
+                            clearInterval(checkInterval);
+                            if (!window.HonchoEditor) {
+                                console.error('Timeout waiting for HonchoEditor constructor');
+                                reject(new Error('Timeout waiting for HonchoEditor constructor'));
+                            }
+                        }, 10000);
+                    });
+                };
+                await waitForConstructor();
+                setIsScriptLoaded(true);
+            }
+            catch (error) {
+                console.error('Failed to load HonchoEditor scripts:', error);
+                setError(error instanceof Error ? error : new Error(String(error)));
+            }
         };
-        loadScript();
-        // Cleanup script on unmount
+        loadScripts();
+        // Cleanup scripts on unmount (but be careful not to remove if other components need it)
         return () => {
-            const script = document.querySelector('script[src="/honcho-photo-editor.js"]');
-            if (script) {
-                script.remove();
-            }
+            // Don't remove the scripts on unmount as other components might need them
+            // The scripts should stay loaded for the lifetime of the app
         };
-    }, []);
+    }, [scriptUrl]);
     // Initialize editor when script is loaded
     useEffect(() => {
         if (!isScriptLoaded)
@@ -43,10 +112,21 @@ export function useEditorHeadless() {
         const initialize = async () => {
             try {
                 console.debug('Script loaded, initializing editor...');
+                // Double-check that HonchoEditor is available
+                if (!window.HonchoEditor) {
+                    throw new Error('window.HonchoEditor is not available');
+                }
+                if (typeof window.HonchoEditor !== 'function') {
+                    throw new Error(`window.HonchoEditor is not a constructor (type: ${typeof window.HonchoEditor})`);
+                }
                 if (!editorRef.current) {
-                    editorRef.current = new HonchoEditor();
+                    console.debug('Creating new HonchoEditor instance...');
+                    editorRef.current = new window.HonchoEditor();
+                    console.debug('HonchoEditor instance created successfully');
                 }
+                console.debug('Initializing HonchoEditor...');
                 await editorRef.current.initialize(false);
+                console.debug('HonchoEditor initialized successfully');
                 setIsReady(true);
             }
             catch (e) {
@@ -56,39 +136,12 @@ export function useEditorHeadless() {
         };
         initialize();
         return () => {
-            editorRef.current?.cleanup();
+            if (editorRef.current) {
+                console.debug('Cleaning up HonchoEditor...');
+                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) {
@@ -96,20 +149,17 @@ export function useEditorHeadless() {
         }
         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 original image as File using the new utility
+            const imageFile = await loadImageAsFile(task.path);
             // 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 });
+                frameFile = await loadImageAsFile(task.frame);
             }
             // 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);
+            const processedBlob = await window.HonchoEditorUtils.imageDataToBlob(processedImageData);
             // Create blob URL for processed result
             const blobUrl = URL.createObjectURL(processedBlob);
             return { id: task.id, path: blobUrl };
@@ -118,11 +168,40 @@ export function useEditorHeadless() {
             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]);
+    }, [isReady]);
+    // Helper function to load image from URL with CORS handling
+    const loadImageFromUrl = useCallback(async (url) => {
+        if (!editorRef.current || !isReady) {
+            throw new Error('Editor not ready');
+        }
+        try {
+            console.debug(`Loading image from URL: ${url}`);
+            // First try direct load with CORS
+            try {
+                const size = await editorRef.current.loadImageFromUrl(url);
+                console.debug('Image loaded successfully via direct URL');
+                return size;
+            }
+            catch (directError) {
+                console.warn('Direct URL load failed, trying blob approach:', directError);
+                // Fallback: Load as File using the new utility
+                const imageFile = await loadImageAsFile(url);
+                // Load via file method
+                const size = await editorRef.current.loadImageFromFile(imageFile);
+                console.debug('Image loaded successfully via file fallback');
+                return size;
+            }
+        }
+        catch (error) {
+            console.error(`Failed to load image from URL ${url}:`, error);
+            throw new Error(`Failed to load image: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+    }, [isReady]);
     return {
         editor: editorRef.current,
         isReady,
         error,
-        processImage
+        processImage,
+        loadImageFromUrl
     };
 }

package/dist/utils/adjustment.d.ts

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

package/dist/utils/adjustment.js

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

package/dist/utils/imageLoader.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Image loading utilities with CORS handling and fallback mechanisms
+ */
+/**
+ * Load image as blob with CORS handling and proxy fallback
+ */
+export declare function loadImageAsBlob(url: string): Promise<Blob>;
+/**
+ * Load image from URL and convert to File object with CORS handling and fallback mechanisms
+ */
+export declare function loadImageAsFile(url: string): Promise<File>;