@yogiswara/honcho-editor-ui 2.5.9 → 2.6.0

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

package/dist/utils/imageLoader.js

@@ -0,0 +1,53 @@
+/**
+ * Image loading utilities with CORS handling and fallback mechanisms
+ */
+/**
+ * Load image as blob with CORS handling and proxy fallback
+ */
+export async function loadImageAsBlob(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'}`);
+        }
+    }
+}
+/**
+ * Load image from URL and convert to File object with CORS handling and fallback mechanisms
+ */
+export async function loadImageAsFile(url) {
+    try {
+        console.debug(`Loading image from URL: ${url}`);
+        // Load image as blob with CORS handling
+        const imageBlob = await loadImageAsBlob(url);
+        // Convert blob to File for HonchoEditor
+        const imageFile = new File([imageBlob], 'image', { type: imageBlob.type });
+        console.debug('Image loaded and converted to File successfully');
+        return imageFile;
+    }
+    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'}`);
+    }
+}

package/package.json

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

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

@@ -1,17 +0,0 @@
-import type { Gallery } from "../../../hooks/editor/type";
-export interface PhotoData {
-    key: string;
-    src: string;
-    width: number;
-    height: number;
-    alt: string;
-    isSelected: boolean;
-    originalData: Gallery;
-}
-interface SimplifiedAlbumGalleryProps {
-    imageCollection: PhotoData[];
-    onToggleSelect: (photo: PhotoData) => void;
-    onPreview: (photo: PhotoData) => void;
-}
-export default function SimplifiedAlbumGallery({ imageCollection, onToggleSelect, onPreview }: SimplifiedAlbumGalleryProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,14 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import SimplifiedImageItem from './SimplifiedImageItem'; // Import the child component
-export default function SimplifiedAlbumGallery({ imageCollection, onToggleSelect, onPreview }) {
-    return (_jsx(Box, { sx: {
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-            gap: '16px',
-            width: '100%',
-            height: '100%',
-            overflowY: 'auto',
-            p: 1
-        }, children: imageCollection.map(photo => (_jsx(SimplifiedImageItem, { photo: photo, onToggleSelect: onToggleSelect, onPreview: onPreview }, photo.key))) }));
-}

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

@@ -1,8 +0,0 @@
-import type { PhotoData } from './SimplifiedAlbumGallery';
-interface SimplifiedImageItemProps {
-    photo: PhotoData;
-    onToggleSelect: (photo: PhotoData) => void;
-    onPreview: (photo: PhotoData) => void;
-}
-export default function SimplifiedImageItem({ photo, onToggleSelect, onPreview }: SimplifiedImageItemProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,30 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box } from '@mui/material';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
-export default function SimplifiedImageItem({ photo, onToggleSelect, onPreview }) {
-    const [isHovered, setIsHovered] = useState(false);
-    return (_jsxs(Box, { onClick: () => onPreview(photo), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), sx: {
-            position: 'relative',
-            cursor: 'pointer',
-            overflow: 'hidden',
-            borderRadius: '8px',
-            '& img': {
-                display: 'block',
-                width: '100%',
-                transition: 'transform 0.2s ease-in-out',
-                transform: isHovered ? 'scale(1.05)' : 'scale(1)',
-            },
-        }, children: [_jsx("img", { src: photo.src, alt: photo.alt, style: { aspectRatio: `${photo.width} / ${photo.height}` } }), _jsx(Box, { onClick: (e) => {
-                    e.stopPropagation(); // Prevent onPreview from firing when clicking checkbox
-                    onToggleSelect(photo);
-                }, sx: {
-                    position: 'absolute',
-                    top: '8px',
-                    left: '8px',
-                    color: 'white',
-                    opacity: photo.isSelected || isHovered ? 1 : 0,
-                    transition: 'opacity 0.2s ease-in-out',
-                }, children: photo.isSelected ? (_jsx(CheckCircleIcon, { sx: { fontSize: '28px', background: 'rgba(0,0,0,0.3)', borderRadius: '50%' } })) : (_jsx(RadioButtonUncheckedIcon, { sx: { fontSize: '28px', background: 'rgba(0,0,0,0.3)', borderRadius: '50%' } })) })] }));
-}

package/dist/components/editor/HImageEditorPage.d.ts

@@ -1 +0,0 @@
-export default function HImageEditorPage(): import("react/jsx-runtime").JSX.Element;