@yogiswara/honcho-editor-ui 2.7.13 → 2.7.14

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

@@ -1,22 +0,0 @@
-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

@@ -1,35 +0,0 @@
-'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

@@ -1,34 +0,0 @@
-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;
-    frame: string | null;
-    adjustments?: Partial<AdjustmentValues>;
-}
-interface EditorResponse {
-    id: string;
-    path: string;
-}
-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,207 +0,0 @@
-'use client';
-import { useState, useEffect, useRef, useCallback } from 'react';
-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 loadScripts = async () => {
-            // Check if HonchoEditor is already available
-            if (window.HonchoEditor) {
-                console.debug('HonchoEditor already available globally');
-                setIsScriptLoaded(true);
-                return;
-            }
-            // 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);
-                });
-            };
-            // 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);
-                });
-            };
-            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)));
-            }
-        };
-        loadScripts();
-        // Cleanup scripts on unmount (but be careful not to remove if other components need it)
-        return () => {
-            // 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)
-            return;
-        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) {
-                    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) {
-                console.error("Failed to initialize editor:", e);
-                setError(e instanceof Error ? e : new Error(String(e)));
-            }
-        };
-        initialize();
-        return () => {
-            if (editorRef.current) {
-                console.debug('Cleaning up HonchoEditor...');
-                editorRef.current?.cleanup();
-            }
-        };
-    }, [isScriptLoaded]);
-    // 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 File using the new utility
-            const imageFile = await loadImageAsFile(task.path);
-            // Load frame if provided
-            let frameFile = null;
-            if (task.frame) {
-                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 window.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]);
-    // 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,
-        loadImageFromUrl
-    };
-}

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

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

package/dist/lib/hooks/useImageProcessor.js

@@ -1,113 +0,0 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { useEditorHighPriority, useEditorLowPriority } from '../hooks/useEditor';
-export function useImageProcessor({ photoId, photoSrc, enableEditor = true, adjustments, frame, priority = 'low', abortSignal, }) {
-    const { processImage, isEditorReady } = priority === 'high'
-        ? useEditorHighPriority()
-        : useEditorLowPriority();
-    // State for processed image and processing status
-    const [processedImageSrc, setProcessedImageSrc] = useState(photoSrc);
-    const [isProcessingComplete, setIsProcessingComplete] = useState(false);
-    const [isProcessing, setIsProcessing] = useState(false);
-    // Internal abort controller for this hook
-    const abortControllerRef = useRef(null);
-    // Function to cancel current processing
-    const cancelProcessing = () => {
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort();
-            abortControllerRef.current = null;
-        }
-        setIsProcessing(false);
-        console.debug(`[useImageProcessor] Cancelled processing for image ${photoId}`);
-    };
-    // 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(() => {
-        // Cancel any previous processing
-        if (abortControllerRef.current) {
-            abortControllerRef.current.abort();
-        }
-        if (!enableEditor || !isEditorReady || !adjustments) {
-            console.debug("Skipping editor processing:", {
-                enableEditor,
-                isEditorReady,
-                hasAdjustments: !!adjustments,
-                hasFrame: frameMemoized,
-                photoId
-            });
-            setProcessedImageSrc(photoSrc);
-            setIsProcessingComplete(true);
-            setIsProcessing(false);
-            return;
-        }
-        // Create new abort controller for this processing cycle
-        const controller = new AbortController();
-        abortControllerRef.current = controller;
-        // Reset processing state when starting new processing
-        setIsProcessingComplete(false);
-        setIsProcessing(true);
-        const processImageWithEditor = async () => {
-            try {
-                // Check if already aborted before starting
-                if (controller.signal.aborted || abortSignal?.aborted) {
-                    console.debug(`[useImageProcessor] Aborted before processing started for image ${photoId}`);
-                    return;
-                }
-                console.debug(`[useImageProcessor] Starting processing for image ${photoId}`);
-                const result = await processImage({
-                    id: photoId,
-                    path: photoSrc,
-                    frame: frameMemoized,
-                    adjustments: adjustments,
-                    abortSignal: controller.signal // Pass the abort signal to the processing service
-                });
-                // Check if aborted after processing completes
-                if (!controller.signal.aborted && !abortSignal?.aborted) {
-                    console.debug(`[useImageProcessor] Completed processing for image ${photoId}`);
-                    setProcessedImageSrc(result.path);
-                    setIsProcessingComplete(true);
-                    setIsProcessing(false);
-                }
-                else {
-                    console.debug(`[useImageProcessor] Aborted after processing completed for image ${photoId}`);
-                }
-            }
-            catch (error) {
-                if (error.name === 'AbortError' || controller.signal.aborted || abortSignal?.aborted) {
-                    console.debug(`[useImageProcessor] Processing cancelled for image ${photoId}`);
-                }
-                else {
-                    console.error({ error, photoKey: photoId, isEditorReady }, 'Failed to process image with editor');
-                }
-                setIsProcessing(false);
-            }
-        };
-        processImageWithEditor();
-        return () => {
-            // Cleanup: abort the controller when effect cleanup runs
-            controller.abort();
-            if (abortControllerRef.current === controller) {
-                abortControllerRef.current = null;
-            }
-        };
-    }, [photoSrc, adjustmentsString, frameMemoized, enableEditor, isEditorReady, processImage, photoId, abortSignal]);
-    // Listen to external abort signal
-    useEffect(() => {
-        if (!abortSignal)
-            return;
-        const handleAbort = () => {
-            cancelProcessing();
-        };
-        abortSignal.addEventListener('abort', handleAbort);
-        return () => {
-            abortSignal.removeEventListener('abort', handleAbort);
-        };
-    }, [abortSignal]);
-    return {
-        processedImageSrc,
-        isProcessingComplete,
-        cancelProcessing,
-        isProcessing
-    };
-}

package/dist/setupTests.d.ts

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

package/dist/setupTests.js

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

package/dist/themes/colors.d.ts

@@ -1,12 +0,0 @@
-interface Colors {
-    onSurface: string;
-    surface: string;
-    onSurfaceVariant: string;
-    onSurfaceVariant1: string;
-    outlineVariant: string;
-    error: string;
-    onBackground: string;
-    background: string;
-}
-export default function useColors(): Colors;
-export {};

package/dist/themes/colors.js

@@ -1,12 +0,0 @@
-export default function useColors() {
-    return {
-        onSurface: "#1C1B1F",
-        surface: "#FFFFFF",
-        onSurfaceVariant: "#949494",
-        onSurfaceVariant1: "#656369",
-        outlineVariant: "#EDEDED",
-        error: "#DC362E",
-        onBackground: "#000000",
-        background: "#FFFFFF"
-    };
-}

package/dist/themes/honchoTheme.d.ts

@@ -1,25 +0,0 @@
-interface HonchoTypography {
-    displayLarge: FontStyle;
-    displayMedium: FontStyle;
-    displaySmall: FontStyle;
-    headlineLarge: FontStyle;
-    headlineMedium: FontStyle;
-    headlineSmall: FontStyle;
-    titleLarge: FontStyle;
-    titleMedium: FontStyle;
-    titleSmall: FontStyle;
-    bodyLarge: FontStyle;
-    bodyMedium: FontStyle;
-    bodySmall: FontStyle;
-    labelLarge: FontStyle;
-    labelMedium: FontStyle;
-    labelSmall: FontStyle;
-}
-interface FontStyle {
-    fontSize: number;
-    lineHeight: string;
-    fontWeight: number;
-    letterSpacing: string;
-}
-export default function useHonchoTypography(): HonchoTypography;
-export {};

package/dist/themes/honchoTheme.js

@@ -1,94 +0,0 @@
-export default function useHonchoTypography() {
-    return {
-        displayLarge: {
-            fontSize: 57,
-            lineHeight: "64px",
-            fontWeight: 500,
-            letterSpacing: "0px"
-        },
-        displayMedium: {
-            fontSize: 45,
-            lineHeight: "52px",
-            fontWeight: 500,
-            letterSpacing: "0px"
-        },
-        displaySmall: {
-            fontSize: 36,
-            lineHeight: "44px",
-            fontWeight: 500,
-            letterSpacing: "0px"
-        },
-        headlineLarge: {
-            fontSize: 32,
-            lineHeight: "40px",
-            fontWeight: 500,
-            letterSpacing: "0px"
-        },
-        headlineMedium: {
-            fontSize: 28,
-            lineHeight: "36px",
-            fontWeight: 500,
-            letterSpacing: "0px"
-        },
-        headlineSmall: {
-            fontSize: 24,
-            lineHeight: "32px",
-            fontWeight: 500,
-            letterSpacing: "0px"
-        },
-        titleLarge: {
-            fontSize: 18,
-            lineHeight: "24px",
-            fontWeight: 500,
-            letterSpacing: "0px"
-        },
-        titleMedium: {
-            fontSize: 16,
-            lineHeight: "24px",
-            fontWeight: 500,
-            letterSpacing: "0.15px"
-        },
-        titleSmall: {
-            fontSize: 14,
-            lineHeight: "20px",
-            fontWeight: 500,
-            letterSpacing: "0.1px"
-        },
-        bodyLarge: {
-            fontSize: 16,
-            lineHeight: "24px",
-            fontWeight: 400,
-            letterSpacing: "0.5px"
-        },
-        bodyMedium: {
-            fontSize: 14,
-            lineHeight: "20px",
-            fontWeight: 400,
-            letterSpacing: "0.25px"
-        },
-        bodySmall: {
-            fontSize: 12,
-            lineHeight: "16px",
-            fontWeight: 400,
-            letterSpacing: "0.4px"
-        },
-        labelLarge: {
-            fontSize: 16,
-            lineHeight: "24px",
-            fontWeight: 500,
-            letterSpacing: "0.1px"
-        },
-        labelMedium: {
-            fontSize: 14,
-            lineHeight: "20px",
-            fontWeight: 500,
-            letterSpacing: "0.1px"
-        },
-        labelSmall: {
-            fontSize: 12,
-            lineHeight: "16px",
-            fontWeight: 500,
-            letterSpacing: "0.1px"
-        },
-    };
-}

package/dist/utils/adjustment.d.ts

@@ -1,6 +0,0 @@
-import { ColorAdjustment } from "../hooks/editor/type";
-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

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

@@ -1,11 +0,0 @@
-/**
- * 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>;