@yogiswara/honcho-editor-ui 2.9.2 → 2.10.0

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

@@ -1,6 +1,7 @@
 import { Controller, AdjustmentState, Preset } from './type';
 import { Gallery } from './type';
-import { AdjustmentValues } from '../../lib/editor/honcho-editor';
+import { AdjustmentValues } from "../../lib/editor/honcho-editor";
+import { ColorAdjustment } from "../../services/type";
 export interface UseHonchoEditorSingleOptions {
     controller: Controller;
     initImageId: string;
@@ -28,6 +29,8 @@ export interface UseHonchoEditorSingleActions {
     setBatchMode: (enabled: boolean) => void;
     startBatchMode: () => void;
     endBatchMode: () => void;
+    updateFromSocket: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment) => void;
+    pushState: (state: AdjustmentState) => void;
     undo: () => void;
     redo: () => void;
     reset: () => void;

package/dist/hooks/editor/useHonchoEditorSingle.js

@@ -1,5 +1,5 @@
 'use client';
-import { useCallback, useMemo } from 'react';
+import { useEffect, useCallback, useMemo } from 'react';
 import { useAdjustmentHistory } from '../useAdjustmentHistory';
 import { useGallerySwipe } from '../useGallerySwipe';
 import { usePreset } from '../usePreset';
@@ -15,11 +15,20 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
     const memoizedInitImageId = useMemo(() => initImageId, [initImageId]);
     const memoizedFirebaseUid = useMemo(() => firebaseUid, [firebaseUid]);
     // Initialize business logic hooks only
-    const adjustmentHistory = useAdjustmentHistory(initialAdjustments, memoizedController, memoizedFirebaseUid, memoizedInitImageId);
     const gallerySwipe = useGallerySwipe(memoizedFirebaseUid, memoizedInitImageId, memoizedController);
+    const adjustmentHistory = useAdjustmentHistory(initialAdjustments, memoizedController, memoizedFirebaseUid, gallerySwipe.currentImageData?.id);
     const presetHook = usePreset(memoizedController, memoizedFirebaseUid, { autoLoad: true });
     // Find active preset based on current adjustments
     const activePreset = presetHook.actions.findByAdjustments(adjustmentHistory.currentState);
+    // loop on every 5 seconds to refresh the backend()
+    useEffect(() => {
+        if (gallerySwipe.currentImageData?.id) {
+            console.log('Syncing adjustment history from backend for image ID:', gallerySwipe.currentImageData.id);
+            adjustmentHistory.actions.syncFromBackend()
+                .then(() => { console.log('Adjustment history synced from backend'); })
+                .catch(console.error);
+        }
+    }, [gallerySwipe.currentImageData?.id]);
     // Actions - pure business logic, no editor interaction - wrapped in useCallback to prevent re-renders
     const navigateNext = useCallback(() => {
         if (gallerySwipe.isNextAvailable) {
@@ -47,6 +56,11 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
     const endBatchMode = useCallback(() => {
         adjustmentHistory.config.setBatchMode(false);
     }, [adjustmentHistory.config.setBatchMode]);
+    const pushState = useCallback(async (state) => {
+        await adjustmentHistory.config.setBatchMode(true);
+        adjustmentHistory.actions.pushState(state);
+        await adjustmentHistory.config.setBatchMode(false, true);
+    }, [adjustmentHistory.actions.pushState]);
     const undo = useCallback(() => {
         adjustmentHistory.actions.undo();
     }, [adjustmentHistory.actions.undo]);
@@ -114,6 +128,9 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
             sharpness: adjustments.sharpnessScore,
         };
     }, [adjustmentHistory.currentState]);
+    const updateFromSocket = useCallback((imageId, adjustmentTaskId, adjustment) => {
+        adjustmentHistory.actions.updateFromBackend(imageId, adjustmentTaskId, adjustment);
+    }, [adjustmentHistory.actions.updateFromBackend]);
     const actions = {
         // Navigation
         navigateNext,
@@ -123,6 +140,8 @@ export function useHonchoEditorSingle({ controller, initImageId, firebaseUid })
         setBatchMode,
         startBatchMode,
         endBatchMode,
+        updateFromSocket,
+        pushState,
         // History
         undo,
         redo,

package/dist/hooks/useAdjustmentHistory.d.ts

@@ -1,4 +1,5 @@
-import { AdjustmentState, Controller } from './editor/type';
+import { AdjustmentState, Controller } from '../hooks/editor/type';
+import { ColorAdjustment } from '../hooks/editor/type';
 /**
  * Configuration options for the adjustment history hook
  */
@@ -47,6 +48,8 @@ export interface HistoryActions {
     trimHistory: (keepLast: number) => void;
     /** Sync history from backend using getEditorHistory */
     syncFromBackend: () => Promise<void>;
+    /** Update specific history entry from backend without changing current index */
+    updateFromBackend: (imageId: string, adjustmentTaskId: string, adjustment: ColorAdjustment) => void;
 }
 /**
  * Configuration actions for runtime adjustment

package/dist/hooks/useAdjustmentHistory.js

@@ -102,6 +102,8 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     const [currentState, setCurrentState] = useState(initialState);
     const currentIndexRef = useRef(0);
     const currentStateRef = useRef(initialState);
+    const currentFirebaseUIDRef = useRef(firebaseUid);
+    const currentImageIdRef = useRef(currentImageId);
     // Batch mode state - ref to avoid triggering effects
     const batchModeRef = useRef(internalOptions.enableBatching);
     const batchStartIndexRef = useRef(null);
@@ -112,6 +114,8 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     const devWarningsRef = useRef(internalOptions.devWarnings);
     // Computed current index for return value (defined early for dependencies)
     const currentIndex = currentIndexRef.current;
+    currentFirebaseUIDRef.current = internalOptions.firebaseUid;
+    currentImageIdRef.current = internalOptions.currentImageId;
     // Performance monitoring
     const performanceRef = useRef({
         lastHistorySize: 1,
@@ -127,9 +131,11 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
     // }, [history, currentIndex, initialState]);
     useEffect(() => {
         if (internalOptions.currentImageId) {
+            console.log(`🔄 Syncing adjustment history from backend for image ID: ${internalOptions.currentImageId}`);
             syncFromBackend().catch(console.error);
         }
     }, [internalOptions.currentImageId, internalOptions.firebaseUid, internalOptions.controller]);
+    console.log(internalOptions);
     const getMemoryUsage = useCallback(() => {
         try {
             const historyString = JSON.stringify(history);
@@ -442,18 +448,18 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
                     return newHistory;
                 });
                 // Call controller to create history in backend - OUTSIDE of setHistory callback
-                if (internalOptions.controller && internalOptions.firebaseUid && internalOptions.currentImageId) {
+                if (internalOptions.controller && currentFirebaseUIDRef.current && currentImageIdRef.current) {
                     try {
                         console.log('🔄 Creating editor history in backend for batch mode end');
                         console.log('📋 Current state for backend:', batchStartIndexRef.current, currentStateRef.current, history.length);
                         const createEditorConfigPayload = {
-                            gallery_id: internalOptions.currentImageId,
+                            gallery_id: currentImageIdRef.current,
                             task_id: taskId,
                             color_adjustment: convertAdjustmentStateToColorAdjustment(currentStateRef.current),
                             ...(replaceFromTaskId && { replace_from: replaceFromTaskId })
                         };
                         // Create editor config with current adjustments
-                        internalOptions.controller.createEditorConfig(internalOptions.firebaseUid, createEditorConfigPayload).then(() => {
+                        internalOptions.controller.createEditorConfig(currentFirebaseUIDRef.current, createEditorConfigPayload).then(() => {
                             console.log('✅ Successfully created editor history in backend');
                         }).catch((error) => {
                             console.error('❌ Failed to create editor history in backend:', error);
@@ -464,9 +470,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
                     }
                 }
                 else {
-                    if (internalOptions.devWarnings) {
-                        console.warn('⚠️ Controller, firebaseUid, or currentImageId not provided - skipping backend history creation');
-                    }
+                    console.warn('⚠️ Controller, firebaseUid, or currentImageId not provided - skipping backend history creation', { controller, firebaseUid, currentImageId });
                 }
             }
             else {
@@ -481,7 +485,7 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             batchStartStateRef.current = null;
             batchModeProcessingRef.current = false; // Reset processing flag
         }
-    }, [internalOptions, history]);
+    }, [internalOptions.controller, history]);
     // Sync history from backend using getEditorHistory
     const syncFromBackend = useCallback(async () => {
         if (!internalOptions.controller || !internalOptions.firebaseUid || !internalOptions.currentImageId) {
@@ -514,7 +518,32 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             }
             // Handle empty history case
             if (backendHistoryEntries.length === 0) {
-                console.log('📝 Backend history is empty, keeping current local history');
+                console.log('📝 Backend history is empty, creating initial adjustment with all values set to 0');
+                // Create initial adjustment state with all values set to 0
+                const initialAdjustmentState = {
+                    tempScore: 0,
+                    tintScore: 0,
+                    saturationScore: 0,
+                    vibranceScore: 0,
+                    exposureScore: 0,
+                    contrastScore: 0,
+                    highlightsScore: 0,
+                    shadowsScore: 0,
+                    whitesScore: 0,
+                    blacksScore: 0,
+                    clarityScore: 0,
+                    sharpnessScore: 0,
+                };
+                const initialHistoryEntry = {
+                    state: initialAdjustmentState,
+                    taskId: `initial_${Date.now()}`
+                };
+                // Set history with initial adjustment
+                setHistory([initialHistoryEntry]);
+                currentIndexRef.current = 0;
+                currentStateRef.current = initialAdjustmentState;
+                setCurrentState(initialAdjustmentState);
+                console.log('✅ Created initial history with all adjustments set to 0');
                 return;
             }
             // Exit batch mode if active
@@ -537,6 +566,56 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
             throw error;
         }
     }, [internalOptions]);
+    // Update specific history entry from backend without changing current index
+    const updateFromBackend = useCallback((imageId, adjustmentTaskId, adjustment) => {
+        // Ignore updates if imageID doesn't match current image
+        if (imageId !== internalOptions.currentImageId) {
+            console.log(`🚫 updateFromBackend: Ignoring update for different image (${imageId} vs ${internalOptions.currentImageId})`);
+            return;
+        }
+        // Ignore updates during batch mode
+        if (batchModeRef.current) {
+            console.log(`🚫 updateFromBackend: Ignoring update during batch mode for taskId: ${adjustmentTaskId}`);
+            return;
+        }
+        console.log(`🔄 updateFromBackend: Received update for taskId: ${adjustmentTaskId}, imageId: ${imageId}`);
+        // Convert ColorAdjustment to AdjustmentState
+        const updatedState = convertColorAdjustmentToAdjustmentState(adjustment);
+        setHistory(prevHistory => {
+            // Find the index of the task to update
+            const taskIndex = prevHistory.findIndex(entry => entry.taskId === adjustmentTaskId);
+            if (taskIndex === -1) {
+                // Task doesn't exist in current history, we need to sync from backend
+                // to get the complete history with proper chronological order
+                console.log(`📝 updateFromBackend: TaskId ${adjustmentTaskId} not found in current history, triggering sync from backend`);
+                // Don't modify history here, instead trigger a sync
+                // Use setTimeout to avoid calling async function inside setState
+                setTimeout(() => {
+                    syncFromBackend().catch(error => {
+                        console.error('❌ Failed to sync history after unknown taskId:', error);
+                    });
+                }, 0);
+                // Return unchanged history for now
+                return prevHistory;
+            }
+            // Task exists, check if it's the current index
+            const isCurrentIndex = taskIndex === currentIndexRef.current;
+            if (isCurrentIndex) {
+                console.log(`🔄 updateFromBackend: Updating current index (${taskIndex}) but not changing current state`);
+            }
+            else {
+                console.log(`🔄 updateFromBackend: Updating history entry at index ${taskIndex} (far behind current ${currentIndexRef.current})`);
+            }
+            // Update the specific history entry
+            const updatedHistory = [...prevHistory];
+            updatedHistory[taskIndex] = {
+                state: updatedState,
+                taskId: adjustmentTaskId
+            };
+            return updatedHistory;
+        });
+        console.log(`✅ updateFromBackend: Successfully updated taskId ${adjustmentTaskId}`);
+    }, [internalOptions]);
     // History info object
     const historyInfo = useMemo(() => ({
         canUndo: currentIndex > 0,
@@ -555,8 +634,9 @@ export function useAdjustmentHistory(initialState, controller, firebaseUid, curr
         clearHistory,
         getHistory,
         trimHistory,
-        syncFromBackend
-    }), [pushState, undo, redo, jumpToIndex, clearHistory, getHistory, trimHistory, syncFromBackend]);
+        syncFromBackend,
+        updateFromBackend
+    }), [pushState, undo, redo, jumpToIndex, clearHistory, getHistory, trimHistory, syncFromBackend, updateFromBackend]);
     // Config object - stabilized with useMemo
     const config = useMemo(() => ({
         setMaxSize,

package/dist/hooks/useAdjustmentHistoryBatch.js

@@ -1,5 +1,5 @@
 import { useState, useCallback, useMemo, useRef, useEffect } from 'react';
-import { mapAdjustmentStateToColorAdjustment, mapColorAdjustmentToAdjustmentState } from '../utils/adjustment';
+import { mapAdjustmentStateToColorAdjustment, mapColorAdjustmentToAdjustmentState } from "../utils/adjustment";
 /**
  * Create default adjustment state
  */

package/dist/hooks/useEditorHeadlessRaceFree.d.ts

@@ -0,0 +1,15 @@
+import HonchoEditor from "../lib/editor/honcho-editor";
+declare global {
+    interface Window {
+        __raceFreeeEditor?: HonchoEditor;
+        __raceFreeEditorInitializing?: boolean;
+    }
+}
+interface UseEditorHeadlessOptions {
+}
+export declare function useEditorHeadlessRaceFree(options?: UseEditorHeadlessOptions): {
+    isReady: boolean;
+    error: Error | null;
+    editor: HonchoEditor | null;
+};
+export {};

package/dist/hooks/useEditorHeadlessRaceFree.js

@@ -0,0 +1,88 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+export function useEditorHeadlessRaceFree(options = {}) {
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    const componentId = useRef(`component-${Date.now()}-${Math.random()}`);
+    console.log(`[RACE-FREE] Hook called in component: ${componentId.current}`);
+    // Get or create shared race-free editor instance
+    const getOrCreateSharedEditor = useCallback(async () => {
+        // If we already have a global instance, return it
+        if (window.__raceFreeeEditor) {
+            console.log(`[RACE-FREE] Reusing existing shared editor instance`);
+            return window.__raceFreeeEditor;
+        }
+        // If already initializing, wait for completion
+        if (window.__raceFreeEditorInitializing) {
+            console.log(`[RACE-FREE] Waiting for shared editor initialization...`);
+            let attempts = 0;
+            while (window.__raceFreeEditorInitializing && attempts < 100) {
+                await new Promise(resolve => setTimeout(resolve, 100));
+                attempts++;
+            }
+            if (window.__raceFreeeEditor) {
+                return window.__raceFreeeEditor;
+            }
+        }
+        // Start initialization
+        window.__raceFreeEditorInitializing = true;
+        console.log(`[RACE-FREE] Creating new shared editor instance`);
+        try {
+            // Wait for global HonchoEditor to be available (loaded by EditorContext)
+            console.log(`[RACE-FREE] Waiting for global HonchoEditor...`);
+            let attempts = 0;
+            const maxAttempts = 100; // 10 seconds max wait
+            while (!window.HonchoEditor && attempts < maxAttempts) {
+                await new Promise(resolve => setTimeout(resolve, 100));
+                attempts++;
+            }
+            if (!window.HonchoEditor) {
+                throw new Error('[RACE-FREE] Global HonchoEditor not available after waiting');
+            }
+            console.log(`[RACE-FREE] Global HonchoEditor available, creating shared instance`);
+            // Create shared instance using the global constructor
+            const editorInstance = new window.HonchoEditor();
+            console.log(`[RACE-FREE] Created new shared HonchoEditor instance`);
+            // Initialize the editor instance
+            await editorInstance.initialize(false);
+            console.log(`[RACE-FREE] Shared HonchoEditor instance initialized`);
+            // Store globally
+            window.__raceFreeeEditor = editorInstance;
+            console.log(`[RACE-FREE] Shared editor instance ready`);
+            return editorInstance;
+        }
+        catch (err) {
+            console.error(`[RACE-FREE] Shared initialization failed:`, err);
+            throw err;
+        }
+        finally {
+            window.__raceFreeEditorInitializing = false;
+        }
+    }, []);
+    // Initialize shared editor instance
+    useEffect(() => {
+        console.log(`[RACE-FREE] Component mounted: ${componentId.current}`);
+        const initializeSharedEditor = async () => {
+            try {
+                await getOrCreateSharedEditor();
+                setIsReady(true);
+                setError(null);
+                console.log(`[RACE-FREE] Component ${componentId.current} ready`);
+            }
+            catch (err) {
+                console.error(`[RACE-FREE] Component ${componentId.current} initialization failed:`, err);
+                setError(err instanceof Error ? err : new Error(String(err)));
+                setIsReady(false);
+            }
+        };
+        initializeSharedEditor();
+        return () => {
+            console.log(`[RACE-FREE] Component unmounting: ${componentId.current}`);
+            // Note: We don't cleanup the shared editor instance here since other components might be using it
+        };
+    }, []); // No dependencies to prevent re-initialization
+    return {
+        isReady,
+        error,
+        editor: window.__raceFreeeEditor || null
+    };
+}

package/dist/lib/editor/honcho-editor.d.ts

@@ -1,4 +1,101 @@
+/**
+ * Honcho Photo Editor - JavaScript Wrapper
+ *
+ * This wrapper provides a clean interface to the C++ image processing engine.
+ *
+ * ARCHITECTURE: Dual-Path Processing
+ * ================================
+ *
+ * FRONTEND (Real-time Preview):
+ * - Uses GPU-to-GPU rendering via renderToCanvas()
+ * - Zero memory copies for 60fps performance
+ * - Optimized for interactive UI sliders
+ *
+ * BACKEND (Server Processing):
+ * - Uses CPU memory path via getProcessedImageData()
+ * - Full quality data export for server workflows
+ * - Headless processing without WebGL context
+ * - Batch processing and API endpoints
+ *
+ * Both paths use the same C++ processing core with identical results.
+ * JavaScript handles all UI and canvas rendering.
+ * C++ handles all image processing algorithms.
+ */
 export class HonchoEditor {
+    static ADJUSTMENT_RANGES: {
+        temperature: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        tint: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        saturation: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        vibrance: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        exposure: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        contrast: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        highlights: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        shadows: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        whites: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        blacks: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        clarity: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+        sharpness: {
+            min: number;
+            max: number;
+            default: number;
+            step: number;
+        };
+    };
     wasmModule: any;
     isInitialized: boolean;
     currentImageData: any;
@@ -203,122 +300,3 @@ export namespace HonchoEditorUtils {
      */
     function formatFileSize(bytes: any): string;
 }
-export namespace ADJUSTMENT_RANGES {
-    namespace temperature {
-        export let min: number;
-        export let max: number;
-        let _default: number;
-        export { _default as default };
-        export let step: number;
-    }
-    namespace tint {
-        let min_1: number;
-        export { min_1 as min };
-        let max_1: number;
-        export { max_1 as max };
-        let _default_1: number;
-        export { _default_1 as default };
-        let step_1: number;
-        export { step_1 as step };
-    }
-    namespace saturation {
-        let min_2: number;
-        export { min_2 as min };
-        let max_2: number;
-        export { max_2 as max };
-        let _default_2: number;
-        export { _default_2 as default };
-        let step_2: number;
-        export { step_2 as step };
-    }
-    namespace vibrance {
-        let min_3: number;
-        export { min_3 as min };
-        let max_3: number;
-        export { max_3 as max };
-        let _default_3: number;
-        export { _default_3 as default };
-        let step_3: number;
-        export { step_3 as step };
-    }
-    namespace exposure {
-        let min_4: number;
-        export { min_4 as min };
-        let max_4: number;
-        export { max_4 as max };
-        let _default_4: number;
-        export { _default_4 as default };
-        let step_4: number;
-        export { step_4 as step };
-    }
-    namespace contrast {
-        let min_5: number;
-        export { min_5 as min };
-        let max_5: number;
-        export { max_5 as max };
-        let _default_5: number;
-        export { _default_5 as default };
-        let step_5: number;
-        export { step_5 as step };
-    }
-    namespace highlights {
-        let min_6: number;
-        export { min_6 as min };
-        let max_6: number;
-        export { max_6 as max };
-        let _default_6: number;
-        export { _default_6 as default };
-        let step_6: number;
-        export { step_6 as step };
-    }
-    namespace shadows {
-        let min_7: number;
-        export { min_7 as min };
-        let max_7: number;
-        export { max_7 as max };
-        let _default_7: number;
-        export { _default_7 as default };
-        let step_7: number;
-        export { step_7 as step };
-    }
-    namespace whites {
-        let min_8: number;
-        export { min_8 as min };
-        let max_8: number;
-        export { max_8 as max };
-        let _default_8: number;
-        export { _default_8 as default };
-        let step_8: number;
-        export { step_8 as step };
-    }
-    namespace blacks {
-        let min_9: number;
-        export { min_9 as min };
-        let max_9: number;
-        export { max_9 as max };
-        let _default_9: number;
-        export { _default_9 as default };
-        let step_9: number;
-        export { step_9 as step };
-    }
-    namespace clarity {
-        let min_10: number;
-        export { min_10 as min };
-        let max_10: number;
-        export { max_10 as max };
-        let _default_10: number;
-        export { _default_10 as default };
-        let step_10: number;
-        export { step_10 as step };
-    }
-    namespace sharpness {
-        let min_11: number;
-        export { min_11 as min };
-        let max_11: number;
-        export { max_11 as max };
-        let _default_11: number;
-        export { _default_11 as default };
-        let step_11: number;
-        export { step_11 as step };
-    }
-}

package/dist/lib/editor/honcho-editor.js

@@ -23,20 +23,7 @@
  * C++ handles all image processing algorithms.
  */
 // Adjustment ranges for UI components
-const ADJUSTMENT_RANGES = {
-    temperature: { min: -100, max: 100, default: 0, step: 1 },
-    tint: { min: -100, max: 100, default: 0, step: 1 },
-    saturation: { min: -100, max: 100, default: 0, step: 1 },
-    vibrance: { min: -100, max: 100, default: 0, step: 1 },
-    exposure: { min: -100, max: 100, default: 0, step: 1 },
-    contrast: { min: -100, max: 100, default: 0, step: 1 },
-    highlights: { min: -100, max: 100, default: 0, step: 1 },
-    shadows: { min: -100, max: 100, default: 0, step: 1 },
-    whites: { min: -100, max: 100, default: 0, step: 1 },
-    blacks: { min: -100, max: 100, default: 0, step: 1 },
-    clarity: { min: -100, max: 100, default: 0, step: 1 },
-    sharpness: { min: -100, max: 100, default: 0, step: 1 }
-};
+// Moved inside HonchoEditor class as static property
 class HonchoEditor {
     constructor() {
         this.wasmModule = null;
@@ -554,6 +541,9 @@ class HonchoEditor {
                 }
                 console.log('✅ Frame applied successfully');
             }
+            else {
+                this.clearFrame();
+            }
             // Step 3: Apply all adjustments
             console.log('🎛️ Applying adjustments:', adjustments);
             const validAdjustments = [
@@ -718,7 +708,7 @@ class HonchoEditor {
      * Validate adjustment value against range
      */
     validateAdjustment(name, value) {
-        const range = ADJUSTMENT_RANGES[name];
+        const range = HonchoEditor.ADJUSTMENT_RANGES[name];
         if (!range) {
             throw new Error(`Unknown adjustment: ${name}`);
         }
@@ -742,6 +732,21 @@ class HonchoEditor {
         this.canvas = null;
     }
 }
+// Static adjustment ranges for UI components
+HonchoEditor.ADJUSTMENT_RANGES = {
+    temperature: { min: -100, max: 100, default: 0, step: 1 },
+    tint: { min: -100, max: 100, default: 0, step: 1 },
+    saturation: { min: -100, max: 100, default: 0, step: 1 },
+    vibrance: { min: -100, max: 100, default: 0, step: 1 },
+    exposure: { min: -100, max: 100, default: 0, step: 1 },
+    contrast: { min: -100, max: 100, default: 0, step: 1 },
+    highlights: { min: -100, max: 100, default: 0, step: 1 },
+    shadows: { min: -100, max: 100, default: 0, step: 1 },
+    whites: { min: -100, max: 100, default: 0, step: 1 },
+    blacks: { min: -100, max: 100, default: 0, step: 1 },
+    clarity: { min: -100, max: 100, default: 0, step: 1 },
+    sharpness: { min: -100, max: 100, default: 0, step: 1 }
+};
 // Export for convenience
 // export default HonchoEditor; // Disabled for browser compatibility
 // Helper functions for common operations
@@ -816,10 +821,10 @@ const HonchoEditorUtils = {
 };
 // Export for both Node.js and browser
 if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { HonchoEditor, HonchoEditorUtils, ADJUSTMENT_RANGES };
+    module.exports = { HonchoEditor, HonchoEditorUtils };
 }
 else {
     window.HonchoEditor = HonchoEditor;
     window.HonchoEditorUtils = HonchoEditorUtils;
-    window.ADJUSTMENT_RANGES = ADJUSTMENT_RANGES;
+    //window.ADJUSTMENT_RANGES = ADJUSTMENT_RANGES;
 }