@yogiswara/honcho-editor-ui 2.2.7 → 2.3.1

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

@@ -10,8 +10,9 @@ export interface Controller {
     syncConfig(firebaseUid: string): Promise<void>;
     handleBack(firebaseUid: string, imageID: string): void;
     getPresets(firebaseUid: string): Promise<Preset[]>;
-    createPreset(firebaseUid: string, name: string, settings: AdjustmentState): Promise<Preset>;
+    createPreset(firebaseUid: string, name: string, settings: AdjustmentState): Promise<void>;
     deletePreset(firebaseUid: string, presetId: string): Promise<void>;
+    updatePreset(firebaseUid: string, data: Preset): Promise<void>;
 }
 export type AdjustmentState = {
     tempScore: number;
@@ -30,6 +31,19 @@ export type AdjustmentState = {
 export type Preset = {
     id: string;
     name: string;
+    is_default: boolean;
+    temperature: number;
+    tint: number;
+    saturation: number;
+    vibrance: number;
+    exposure: number;
+    contrast: number;
+    highlights: number;
+    shadows: number;
+    whites: number;
+    blacks: number;
+    clarity: number;
+    sharpness: number;
 };
 export type ImageItem = {
     id: string;
@@ -170,14 +184,11 @@ export declare function useHonchoEditor(controller: Controller, initImageId: str
     handleSelectDesktopPreset: (presetId: string) => void;
     handlePresetMenuClick: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
     handlePresetMenuClose: () => void;
-    handleCreatePreset: () => Promise<void>;
     handleRemovePreset: () => void;
-    handleDeletePreset: () => Promise<void>;
     handleOpenPresetModal: () => void;
     handleClosePresetModal: () => void;
     handleOpenPresetModalMobile: () => void;
     handleClosePresetModalMobile: () => void;
-    handleCreatePresetMobile: () => Promise<void>;
     setPresetName: import("react").Dispatch<import("react").SetStateAction<string>>;
     handleNameChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     isRenameModalOpen: boolean;

package/dist/hooks/editor/useHonchoEditor.js

@@ -22,6 +22,7 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     const [isEditorReady, setIsEditorReady] = useState(false);
     const [isImageLoaded, setIsImageLoaded] = useState(false);
     const [zoomLevel, setZoomLevel] = useState(1);
+    const [presets, setPresets] = useState([]);
     // MARK: - Adjustment & History State
     const [copiedAdjustments, setCopiedAdjustments] = useState(null);
     const [copyColorChecks, setCopyColorChecks] = useState({ temperature: true, tint: true, vibrance: true, saturation: true });
@@ -46,7 +47,6 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     // Preset State
     const [isPresetModalOpen, setPresetModalOpen] = useState(false);
     const [isPresetModalOpenMobile, setPresetModalOpenMobile] = useState(false);
-    const [presets, setPresets] = useState([]);
     const [presetName, setPresetName] = useState("Type Here");
     const [isPresetCreated, setIsPresetCreated] = useState(false);
     const [selectedMobilePreset, setSelectedMobilePreset] = useState('preset1');
@@ -232,66 +232,11 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
     };
     const handlePresetMenuClose = () => { setPresetMenuAnchorEl(null); setActivePresetMenuId(null); };
     const handleRemovePreset = () => { console.log(`Remove: ${activePresetMenuId}`); handlePresetMenuClose(); };
-    const handleDeletePreset = useCallback(async () => {
-        if (!controller || !activePresetMenuId)
-            return;
-        try {
-            await controller.deletePreset(firebaseUid, activePresetMenuId);
-            // On success, remove the preset from local state
-            setPresets(prevPresets => prevPresets.filter(p => p.id !== activePresetMenuId));
-        }
-        catch (error) {
-            console.error("Failed to delete preset:", error);
-        }
-        handlePresetMenuClose(); // Close the options menu
-    }, [controller, activePresetMenuId]);
     // Preset Modal Handlers
     const handleOpenPresetModal = () => { setIsPresetCreated(false); setPresetModalOpen(true); };
     const handleClosePresetModal = () => setPresetModalOpen(false);
-    const handleCreatePreset = useCallback(async () => {
-        if (!controller)
-            return;
-        // The current adjustment state from the history hook
-        const currentAdjustments = { ...currentAdjustmentsState };
-        try {
-            // Call the controller, which now calls the real API
-            const newPresetFromApi = await controller.createPreset(firebaseUid, presetName, currentAdjustments);
-            // If the API call was successful and returned a preset...
-            if (newPresetFromApi) {
-                // ...add the new preset from the API response to our local state
-                setPresets(prevPresets => [...prevPresets, newPresetFromApi]);
-            }
-        }
-        catch (error) {
-            console.error("Failed to create preset:", error);
-            // Optionally: show an error message to the user here
-        }
-        // Close the modal and show a confirmation
-        setIsPresetCreated(true);
-        handleClosePresetModal();
-        setTimeout(() => setIsPresetCreated(false), 1000); // Hide confirmation after 1s
-    }, [controller, presetName, currentAdjustmentsState, firebaseUid]);
     const handleOpenPresetModalMobile = () => { setIsPresetCreated(false); setPresetModalOpenMobile(true); };
     const handleClosePresetModalMobile = () => setPresetModalOpenMobile(false);
-    const handleCreatePresetMobile = useCallback(async () => {
-        if (!controller)
-            return;
-        console.log("Creating mobile preset:", presetName);
-        const currentAdjustments = { ...currentAdjustmentsState };
-        try {
-            // RE-USE THE SAME LOGIC AS THE DESKTOP VERSION
-            const newPresetFromApi = await controller.createPreset(firebaseUid, presetName, currentAdjustments);
-            if (newPresetFromApi) {
-                setPresets(prevPresets => [...prevPresets, newPresetFromApi]);
-            }
-        }
-        catch (error) {
-            console.error("Failed to create mobile preset:", error);
-        }
-        setIsPresetCreated(true);
-        handleClosePresetModalMobile();
-        setTimeout(() => setIsPresetCreated(false), 1000);
-    }, [controller, presetName, currentAdjustmentsState, firebaseUid]);
     const handleNameChange = (event) => setPresetName(event.target.value);
     // Watermark Handlers
     const handleOpenWatermarkView = () => setIsCreatingWatermark(true);
@@ -697,14 +642,11 @@ export function useHonchoEditor(controller, initImageId, firebaseUid) {
         handleSelectDesktopPreset,
         handlePresetMenuClick,
         handlePresetMenuClose,
-        handleCreatePreset,
         handleRemovePreset,
-        handleDeletePreset,
         handleOpenPresetModal,
         handleClosePresetModal,
         handleOpenPresetModalMobile,
         handleClosePresetModalMobile,
-        handleCreatePresetMobile,
         setPresetName,
         handleNameChange,
         isRenameModalOpen,

package/dist/hooks/usePreset.d.ts

@@ -0,0 +1,82 @@
+import { Controller, Preset, AdjustmentState } from './editor/useHonchoEditor';
+/**
+ * Configuration options for the preset hook
+ */
+export interface PresetOptions {
+    /** Enable development warnings for debugging */
+    devWarnings?: boolean;
+    /** Auto-load presets on hook initialization */
+    autoLoad?: boolean;
+}
+/**
+ * Information about the current preset state
+ */
+export interface PresetInfo {
+    /** Whether presets are currently being loaded */
+    isLoading: boolean;
+    /** Error message if any operation failed */
+    error: string | null;
+    /** Number of presets currently managed */
+    count: number;
+    /** Whether the hook has been initialized */
+    isInitialized: boolean;
+}
+/**
+ * Actions available for preset management
+ */
+export interface PresetActions {
+    /** Create a new preset */
+    create: (name: string, settings: AdjustmentState) => Promise<Preset | null>;
+    /** Rename an existing preset */
+    rename: (presetId: string, newName: string) => Promise<boolean>;
+    /** Delete a preset */
+    delete: (presetId: string) => Promise<boolean>;
+    /** Load/refresh presets from backend */
+    load: () => Promise<void>;
+    /** Find preset that matches the given adjustment state */
+    findByAdjustments: (adjustments: AdjustmentState) => Preset | null;
+}
+/**
+ * Return type for the usePreset hook
+ */
+export interface UsePresetReturn {
+    /** Current list of presets */
+    presets: Preset[];
+    /** Information about preset state */
+    info: PresetInfo;
+    /** Available preset actions */
+    actions: PresetActions;
+}
+/**
+ * Hook for managing presets with backend communication through Controller.
+ *
+ * **Key Features:**
+ * - **Backend Communication**: All operations go through the provided Controller
+ * - **Local State Management**: Maintains local preset list for UI performance
+ * - **CRUD Operations**: Create, rename, delete, and list presets
+ * - **Error Handling**: Provides error states for failed operations
+ * - **Auto-loading**: Optional automatic preset loading on initialization
+ *
+ * **Typical Usage:**
+ * ```typescript
+ * const { presets, actions, info } = usePreset(controller, firebaseUid, { autoLoad: true });
+ *
+ * // Create preset
+ * const newPreset = await actions.create('My Preset', adjustmentState);
+ *
+ * // Rename preset
+ * const success = await actions.rename(presetId, 'New Name');
+ *
+ * // Delete preset
+ * const deleted = await actions.delete(presetId);
+ *
+ * // Manual reload
+ * await actions.load();
+ * ```
+ *
+ * @param controller - Backend controller for API communication
+ * @param firebaseUid - User identifier for backend operations
+ * @param options - Configuration options
+ * @returns Object with presets, info, and actions
+ */
+export declare function usePreset(controller: Controller | null, firebaseUid: string, options?: PresetOptions): UsePresetReturn;

package/dist/hooks/usePreset.js

@@ -0,0 +1,302 @@
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+/**
+ * Hook for managing presets with backend communication through Controller.
+ *
+ * **Key Features:**
+ * - **Backend Communication**: All operations go through the provided Controller
+ * - **Local State Management**: Maintains local preset list for UI performance
+ * - **CRUD Operations**: Create, rename, delete, and list presets
+ * - **Error Handling**: Provides error states for failed operations
+ * - **Auto-loading**: Optional automatic preset loading on initialization
+ *
+ * **Typical Usage:**
+ * ```typescript
+ * const { presets, actions, info } = usePreset(controller, firebaseUid, { autoLoad: true });
+ *
+ * // Create preset
+ * const newPreset = await actions.create('My Preset', adjustmentState);
+ *
+ * // Rename preset
+ * const success = await actions.rename(presetId, 'New Name');
+ *
+ * // Delete preset
+ * const deleted = await actions.delete(presetId);
+ *
+ * // Manual reload
+ * await actions.load();
+ * ```
+ *
+ * @param controller - Backend controller for API communication
+ * @param firebaseUid - User identifier for backend operations
+ * @param options - Configuration options
+ * @returns Object with presets, info, and actions
+ */
+export function usePreset(controller, firebaseUid, options = {}) {
+    // Memoize options to prevent re-renders when object is recreated with same values
+    const memoizedOptions = useMemo(() => ({
+        devWarnings: options.devWarnings ?? false,
+        autoLoad: options.autoLoad ?? false
+    }), [options.devWarnings, options.autoLoad]);
+    // Core state
+    const [presets, setPresets] = useState([]);
+    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]);
+    // Helper function to handle errors
+    const handleError = useCallback((operation, error) => {
+        const errorMessage = `Failed to ${operation}: ${error?.message || error}`;
+        setError(errorMessage);
+        debugLog(`Error in ${operation}`, error);
+        return false;
+    }, [debugLog]);
+    // Load presets from backend
+    const load = useCallback(async () => {
+        if (!controllerRef.current || !firebaseUidRef.current) {
+            debugLog('Load skipped: missing controller or firebaseUid');
+            return;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            debugLog('Loading presets from backend...');
+            const loadedPresets = await controllerRef.current.getPresets(firebaseUidRef.current);
+            setPresets(loadedPresets);
+            setIsInitialized(true);
+            debugLog('Presets loaded successfully', { count: loadedPresets.length });
+        }
+        catch (err) {
+            handleError('load presets', err);
+            setPresets([]); // Clear presets on error
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [debugLog, handleError]);
+    // Fire-and-forget version of load for internal use
+    const loadInBackground = useCallback(() => {
+        if (!controllerRef.current || !firebaseUidRef.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 => {
+            setPresets(loadedPresets);
+            if (!isInitialized) {
+                setIsInitialized(true);
+            }
+            debugLog('Background presets loaded successfully', { count: loadedPresets.length });
+        })
+            .catch(err => {
+            debugLog('Background load failed:', err);
+            // Don't set error state for background operations
+        });
+    }, [debugLog, isInitialized]);
+    // Create a new preset
+    const create = useCallback(async (name, settings) => {
+        if (!controllerRef.current || !firebaseUidRef.current) {
+            debugLog('Create skipped: missing controller or firebaseUid');
+            return null;
+        }
+        if (!name.trim()) {
+            setError('Preset name cannot be empty');
+            return null;
+        }
+        // Check for duplicate names
+        if (presets.some(p => p.name.toLowerCase() === name.toLowerCase())) {
+            setError('A preset with this name already exists');
+            return null;
+        }
+        setIsLoading(true);
+        setError(null);
+        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);
+            debugLog('Preset creation request completed');
+            // Fire and forget: Schedule a delayed refresh to get updated preset list
+            setTimeout(() => {
+                debugLog('Refreshing presets after create (fire and forget)');
+                loadInBackground();
+            }, 500); // 500ms delay to allow backend processing
+            // Return a minimal success indicator since we don't have the actual preset data
+            return { id: 'pending', name, is_default: false };
+        }
+        catch (err) {
+            handleError('create preset', err);
+            return null;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [presets, debugLog, handleError, loadInBackground]);
+    // Rename an existing preset
+    const rename = useCallback(async (presetId, newName) => {
+        if (!controllerRef.current || !firebaseUidRef.current) {
+            debugLog('Rename skipped: missing controller or firebaseUid');
+            return false;
+        }
+        if (!newName.trim()) {
+            setError('Preset name cannot be empty');
+            return false;
+        }
+        const existingPreset = presets.find(p => p.id === presetId);
+        if (!existingPreset) {
+            setError('Preset not found');
+            return false;
+        }
+        // Check for duplicate names (excluding the current preset)
+        if (presets.some(p => p.id !== presetId && p.name.toLowerCase() === newName.toLowerCase())) {
+            setError('A preset with this name already exists');
+            return false;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            debugLog('Renaming preset...', { presetId, oldName: existingPreset.name, newName });
+            const updatedPreset = { ...existingPreset, name: newName };
+            await controllerRef.current.updatePreset(firebaseUidRef.current, updatedPreset);
+            // Update local state
+            setPresets(prev => prev.map(p => p.id === presetId ? updatedPreset : p));
+            debugLog('Preset renamed successfully');
+            return true;
+        }
+        catch (err) {
+            handleError('rename preset', err);
+            return false;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [presets, debugLog, handleError]);
+    // Delete a preset
+    const deletePreset = useCallback(async (presetId) => {
+        if (!controllerRef.current || !firebaseUidRef.current) {
+            debugLog('Delete skipped: missing controller or firebaseUid');
+            return false;
+        }
+        const existingPreset = presets.find(p => p.id === presetId);
+        if (!existingPreset) {
+            setError('Preset not found');
+            return false;
+        }
+        setIsLoading(true);
+        setError(null);
+        try {
+            debugLog('Deleting preset...', { presetId, name: existingPreset.name });
+            await controllerRef.current.deletePreset(firebaseUidRef.current, presetId);
+            // Remove from local state
+            setPresets(prev => prev.filter(p => p.id !== presetId));
+            debugLog('Preset deleted successfully');
+            return true;
+        }
+        catch (err) {
+            handleError('delete preset', err);
+            return false;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [presets, debugLog, handleError]);
+    // Find preset that matches the given adjustment state
+    const findByAdjustments = useCallback((adjustments) => {
+        // Helper function to normalize adjustment values (treat null/undefined as 0)
+        const normalizeValue = (value) => {
+            return value ?? 0;
+        };
+        // Helper function to convert Preset to AdjustmentState for comparison
+        const presetToAdjustmentState = (preset) => {
+            return {
+                tempScore: normalizeValue(preset.temperature),
+                tintScore: normalizeValue(preset.tint),
+                vibranceScore: normalizeValue(preset.vibrance),
+                saturationScore: normalizeValue(preset.saturation),
+                exposureScore: normalizeValue(preset.exposure),
+                highlightsScore: normalizeValue(preset.highlights),
+                shadowsScore: normalizeValue(preset.shadows),
+                whitesScore: normalizeValue(preset.whites),
+                blacksScore: normalizeValue(preset.blacks),
+                contrastScore: normalizeValue(preset.contrast),
+                clarityScore: normalizeValue(preset.clarity),
+                sharpnessScore: normalizeValue(preset.sharpness)
+            };
+        };
+        // Helper function to compare two adjustment states
+        const adjustmentsMatch = (presetSettings, current) => {
+            const keys = [
+                'tempScore', 'tintScore', 'vibranceScore', 'saturationScore',
+                'exposureScore', 'highlightsScore', 'shadowsScore', 'whitesScore',
+                'blacksScore', 'contrastScore', 'clarityScore', 'sharpnessScore'
+            ];
+            return keys.every(key => normalizeValue(presetSettings[key]) === normalizeValue(current[key]));
+        };
+        debugLog('Finding preset by adjustments...', adjustments);
+        // Find preset that matches the current adjustments
+        const matchingPreset = presets.find(preset => {
+            const presetAdjustments = presetToAdjustmentState(preset);
+            return adjustmentsMatch(presetAdjustments, adjustments);
+        });
+        if (matchingPreset) {
+            debugLog('Found matching preset:', matchingPreset);
+            return matchingPreset;
+        }
+        else {
+            debugLog('No matching preset found');
+            return null;
+        }
+    }, [presets, debugLog]);
+    // Auto-load presets on initialization - stable dependencies
+    useEffect(() => {
+        if (memoizedOptions.autoLoad && controller && firebaseUid && !isInitialized) {
+            debugLog('Auto-loading presets...');
+            load();
+        }
+    }, [memoizedOptions.autoLoad, controller, firebaseUid, isInitialized, load, debugLog]);
+    // Clear state when controller or firebaseUid changes
+    useEffect(() => {
+        if (isInitialized) {
+            debugLog('Controller or firebaseUid changed, clearing state');
+            setPresets([]);
+            setError(null);
+            setIsInitialized(false);
+        }
+    }, [controller, firebaseUid, isInitialized, debugLog]);
+    // Preset info object - memoized to prevent re-renders
+    const info = useMemo(() => ({
+        isLoading,
+        error,
+        count: presets.length,
+        isInitialized
+    }), [isLoading, error, presets.length, isInitialized]);
+    // Actions object - memoized to prevent re-renders when functions don't change
+    const actions = useMemo(() => ({
+        create,
+        rename,
+        delete: deletePreset,
+        load,
+        findByAdjustments
+    }), [create, rename, deletePreset, load, findByAdjustments]);
+    // Return object - memoized to prevent re-renders when values don't change
+    return useMemo(() => ({
+        presets,
+        info,
+        actions
+    }), [presets, info, actions]);
+}

package/dist/index.d.ts

@@ -28,6 +28,7 @@ export { useImageProcessor } from './lib/hooks/useImageProcessor';
 export { useEditorHeadless } from './lib/hooks/useEditorHeadless';
 export { useAdjustmentHistory, type UseAdjustmentHistoryReturn, type HistoryInfo, type HistoryActions, type HistoryConfig } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type ImageAdjustmentConfig, type BatchHistoryInfo, type BatchHistoryActions, type BatchHistoryConfig } from './hooks/useAdjustmentHistoryBatch';
+export { usePreset, type UsePresetReturn, type PresetInfo, type PresetActions, type PresetOptions } from './hooks/usePreset';
 export { default as useColors } from './themes/colors';
 export { default as useHonchoTypography } from './themes/honchoTheme';
 export { default as useIsMobile } from './utils/isMobile';

package/dist/index.js

@@ -26,6 +26,8 @@ export { useEditorHeadless } from './lib/hooks/useEditorHeadless';
 // --- History Hooks ---
 export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';
+// --- Preset Hook ---
+export { usePreset } from './hooks/usePreset';
 // --- Theme & Utils ---
 export { default as useColors } from './themes/colors';
 export { default as useHonchoTypography } from './themes/honchoTheme';

package/package.json

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