@yogiswara/honcho-editor-ui 2.5.10 → 2.6.0

package/dist/hooks/useAdjustmentHistory.demo.d.ts

@@ -1,8 +0,0 @@
-/**
- * Demo component showing batch mode behavior
- */
-export declare function BatchModeDemo(): import("react/jsx-runtime").JSX.Element;
-/**
- * Example showing smooth preset application
- */
-export declare function SmoothPresetDemo(): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useAdjustmentHistory.demo.js

@@ -1,106 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { useAdjustmentHistory } from './useAdjustmentHistory';
-const initialAdjustments = {
-    tempScore: 0, tintScore: 0, vibranceScore: 0, saturationScore: 0,
-    exposureScore: 0, highlightsScore: 0, shadowsScore: 0, whitesScore: 0,
-    blacksScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
-};
-/**
- * Demo component showing batch mode behavior
- */
-export function BatchModeDemo() {
-    const { currentState, historyInfo, actions, config } = useAdjustmentHistory(initialAdjustments);
-    const [updateCount, setUpdateCount] = useState(0);
-    // Track UI updates
-    React.useEffect(() => {
-        setUpdateCount(prev => prev + 1);
-    }, [currentState]);
-    const handleBatchUpdates = async () => {
-        setUpdateCount(0); // Reset counter
-        console.log('Starting batch mode...');
-        config.setBatchMode(true);
-        // These will update currentState 4 times (UI updates)
-        console.log('Push state 1...');
-        actions.pushState({ ...currentState, tempScore: 25 });
-        console.log('Push state 2...');
-        actions.pushState({ ...currentState, tempScore: 50 });
-        console.log('Push state 3...');
-        actions.pushState({ ...currentState, tempScore: 75 });
-        console.log('Push state 4...');
-        actions.pushState({ ...currentState, tempScore: 100 });
-        console.log('Ending batch mode...');
-        config.setBatchMode(false); // Only now will 1 history entry be created
-        console.log('Batch complete!');
-    };
-    const handleInstantUpdates = () => {
-        setUpdateCount(0); // Reset counter
-        // These will create 4 history entries (normal mode)
-        actions.pushState({ ...currentState, tintScore: 25 });
-        actions.pushState({ ...currentState, tintScore: 50 });
-        actions.pushState({ ...currentState, tintScore: 75 });
-        actions.pushState({ ...currentState, tintScore: 100 });
-    };
-    return (_jsxs("div", { style: { padding: '20px', fontFamily: 'monospace' }, children: [_jsx("h2", { children: "Batch Mode Demo" }), _jsxs("div", { style: { marginBottom: '20px', padding: '10px', backgroundColor: '#f5f5f5' }, children: [_jsx("strong", { children: "Current State:" }), _jsxs("div", { children: ["Temperature: ", currentState.tempScore] }), _jsxs("div", { children: ["Tint: ", currentState.tintScore] }), _jsxs("div", { children: ["UI Updates: ", updateCount] }), _jsxs("div", { children: ["History Size: ", historyInfo.totalStates] }), _jsxs("div", { children: ["Can Undo: ", historyInfo.canUndo ? 'Yes' : 'No'] }), _jsxs("div", { children: ["Batch Mode: ", historyInfo.isBatchMode ? 'Active' : 'Inactive'] })] }), _jsxs("div", { style: { display: 'flex', gap: '10px', marginBottom: '20px' }, children: [_jsx("button", { onClick: handleBatchUpdates, style: { padding: '10px', backgroundColor: '#4CAF50', color: 'white', border: 'none' }, children: "Batch Mode (4 UI updates, 1 history entry)" }), _jsx("button", { onClick: handleInstantUpdates, style: { padding: '10px', backgroundColor: '#2196F3', color: 'white', border: 'none' }, children: "Normal Mode (4 UI updates, 4 history entries)" })] }), _jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx("button", { onClick: actions.undo, disabled: !historyInfo.canUndo, style: {
-                            padding: '10px',
-                            backgroundColor: historyInfo.canUndo ? '#FF9800' : '#ccc',
-                            color: 'white',
-                            border: 'none'
-                        }, children: "Undo" }), _jsx("button", { onClick: actions.redo, disabled: !historyInfo.canRedo, style: {
-                            padding: '10px',
-                            backgroundColor: historyInfo.canRedo ? '#9C27B0' : '#ccc',
-                            color: 'white',
-                            border: 'none'
-                        }, children: "Redo" }), _jsx("button", { onClick: () => actions.reset(initialAdjustments), style: { padding: '10px', backgroundColor: '#f44336', color: 'white', border: 'none' }, children: "Reset" })] }), _jsxs("div", { style: { marginTop: '20px', fontSize: '12px', color: '#666' }, children: [_jsx("h3", { children: "How it works:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "Batch Mode:" }), " UI updates immediately on each pushState, but only final state is saved to history when batch ends"] }), _jsxs("li", { children: [_jsx("strong", { children: "Normal Mode:" }), " Each pushState creates both UI update and history entry"] }), _jsxs("li", { children: [_jsx("strong", { children: "Result:" }), " Smooth UI animations with clean undo/redo history"] })] })] })] }));
-}
-/**
- * Example showing smooth preset application
- */
-export function SmoothPresetDemo() {
-    const { currentState, historyInfo, actions, config } = useAdjustmentHistory(initialAdjustments);
-    const dramaticPreset = {
-        tempScore: 50, tintScore: -20, vibranceScore: 80, saturationScore: 60,
-        exposureScore: 30, highlightsScore: -40, shadowsScore: 40, whitesScore: 20,
-        blacksScore: -30, contrastScore: 70, clarityScore: 50, sharpnessScore: 40,
-    };
-    const handleSmoothPreset = async () => {
-        config.setBatchMode(true);
-        // Create smooth transition with multiple steps
-        const steps = 8;
-        for (let i = 1; i <= steps; i++) {
-            const progress = i / steps;
-            const intermediateState = {
-                tempScore: Math.round(currentState.tempScore + (dramaticPreset.tempScore - currentState.tempScore) * progress),
-                tintScore: Math.round(currentState.tintScore + (dramaticPreset.tintScore - currentState.tintScore) * progress),
-                vibranceScore: Math.round(currentState.vibranceScore + (dramaticPreset.vibranceScore - currentState.vibranceScore) * progress),
-                saturationScore: Math.round(currentState.saturationScore + (dramaticPreset.saturationScore - currentState.saturationScore) * progress),
-                exposureScore: Math.round(currentState.exposureScore + (dramaticPreset.exposureScore - currentState.exposureScore) * progress),
-                highlightsScore: Math.round(currentState.highlightsScore + (dramaticPreset.highlightsScore - currentState.highlightsScore) * progress),
-                shadowsScore: Math.round(currentState.shadowsScore + (dramaticPreset.shadowsScore - currentState.shadowsScore) * progress),
-                whitesScore: Math.round(currentState.whitesScore + (dramaticPreset.whitesScore - currentState.whitesScore) * progress),
-                blacksScore: Math.round(currentState.blacksScore + (dramaticPreset.blacksScore - currentState.blacksScore) * progress),
-                contrastScore: Math.round(currentState.contrastScore + (dramaticPreset.contrastScore - currentState.contrastScore) * progress),
-                clarityScore: Math.round(currentState.clarityScore + (dramaticPreset.clarityScore - currentState.clarityScore) * progress),
-                sharpnessScore: Math.round(currentState.sharpnessScore + (dramaticPreset.sharpnessScore - currentState.sharpnessScore) * progress),
-            };
-            actions.pushState(intermediateState);
-            // Small delay for smooth animation
-            await new Promise(resolve => setTimeout(resolve, 100));
-        }
-        config.setBatchMode(false); // Commit final state
-    };
-    return (_jsxs("div", { style: { padding: '20px', fontFamily: 'monospace' }, children: [_jsx("h2", { children: "Smooth Preset Application" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '10px', marginBottom: '20px', fontSize: '12px' }, children: [_jsxs("div", { children: ["Temp: ", currentState.tempScore] }), _jsxs("div", { children: ["Tint: ", currentState.tintScore] }), _jsxs("div", { children: ["Vibrance: ", currentState.vibranceScore] }), _jsxs("div", { children: ["Saturation: ", currentState.saturationScore] }), _jsxs("div", { children: ["Exposure: ", currentState.exposureScore] }), _jsxs("div", { children: ["Highlights: ", currentState.highlightsScore] }), _jsxs("div", { children: ["Shadows: ", currentState.shadowsScore] }), _jsxs("div", { children: ["Whites: ", currentState.whitesScore] }), _jsxs("div", { children: ["Blacks: ", currentState.blacksScore] }), _jsxs("div", { children: ["Contrast: ", currentState.contrastScore] }), _jsxs("div", { children: ["Clarity: ", currentState.clarityScore] }), _jsxs("div", { children: ["Sharpness: ", currentState.sharpnessScore] })] }), _jsx("button", { onClick: handleSmoothPreset, style: {
-                    padding: '15px 30px',
-                    backgroundColor: '#4CAF50',
-                    color: 'white',
-                    border: 'none',
-                    fontSize: '16px',
-                    marginRight: '10px'
-                }, children: "Apply Dramatic Preset (Smooth)" }), _jsx("button", { onClick: actions.undo, disabled: !historyInfo.canUndo, style: {
-                    padding: '15px 30px',
-                    backgroundColor: historyInfo.canUndo ? '#FF9800' : '#ccc',
-                    color: 'white',
-                    border: 'none',
-                    fontSize: '16px'
-                }, children: "Undo Preset" }), _jsx("div", { style: { marginTop: '20px', fontSize: '12px', color: '#666' }, children: _jsx("p", { children: "This demo shows smooth preset application with 8 intermediate steps, but only 1 undo operation!" }) })] }));
-}

package/dist/hooks/useAdjustmentHistory.example.d.ts

@@ -1,38 +0,0 @@
-import { type HistoryInfo } from './useAdjustmentHistory';
-import { AdjustmentState } from './editor/useHonchoEditor';
-export declare function useEditorWithHistory(): {
-    adjustments: AdjustmentState;
-    canUndo: boolean;
-    canRedo: boolean;
-    undo: () => void;
-    redo: () => void;
-    updateTemperature: (newTemp: number) => void;
-    applyPresetWithSmoothUI: (presetState: AdjustmentState) => void;
-    updateMultipleAdjustments: (updates: Partial<AdjustmentState>) => void;
-    loadSavedHistory: (savedStates: AdjustmentState[]) => void;
-    loadHistoryToSpecificPoint: (savedStates: AdjustmentState[], targetIndex: number) => void;
-    mergeWithNewStates: (newStates: AdjustmentState[]) => void;
-    loadPresetVariations: () => void;
-    resetAdjustments: () => void;
-    jumpToIndex: (index: number) => void;
-    getHistory: () => AdjustmentState[];
-    clearHistory: () => void;
-    syncHistory: (newHistory: AdjustmentState[], targetIndex?: number) => void;
-    setBatchMode: (enabled: boolean) => void;
-    setMaxSize: (size: number | "unlimited") => void;
-    getMemoryUsage: () => number;
-    historyInfo: HistoryInfo;
-};
-/**
- * Example integration with your existing useHonchoEditor pattern
- */
-export declare function integrateWithHonchoEditor(): {
-    currentAdjustments: AdjustmentState;
-    canUndo: boolean;
-    canRedo: boolean;
-    handleSliderChange: (key: keyof AdjustmentState, value: number) => void;
-    handlePresetWithAnimation: (presetState: AdjustmentState) => Promise<void>;
-    handleUndo: () => void;
-    handleRedo: () => void;
-    handleRevert: () => void;
-};

package/dist/hooks/useAdjustmentHistory.example.js

@@ -1,182 +0,0 @@
-import { useAdjustmentHistory } from './useAdjustmentHistory';
-/**
- * Example usage of the simplified useAdjustmentHistory hook
- * This shows how to integrate it with your existing useHonchoEditor
- */
-// Example initial adjustment state
-const initialAdjustments = {
-    tempScore: 0,
-    tintScore: 0,
-    vibranceScore: 0,
-    saturationScore: 0,
-    exposureScore: 0,
-    highlightsScore: 0,
-    shadowsScore: 0,
-    whitesScore: 0,
-    blacksScore: 0,
-    contrastScore: 0,
-    clarityScore: 0,
-    sharpnessScore: 0,
-};
-export function useEditorWithHistory() {
-    // Initialize the adjustment history hook
-    const { currentState: currentAdjustments, historyInfo, actions, config } = useAdjustmentHistory(initialAdjustments, {
-        maxSize: 100, // Keep last 100 states
-        enableBatching: false, // Start with batching disabled
-        devWarnings: true // Show performance warnings in development
-    });
-    // Example: Update a single adjustment value
-    const updateTemperature = (newTemp) => {
-        const newState = {
-            ...currentAdjustments,
-            tempScore: newTemp
-        };
-        actions.pushState(newState);
-    };
-    // Example: Apply preset with batch mode for smooth UI updates
-    const applyPresetWithSmoothUI = (presetState) => {
-        // Enable batch mode to group all changes into one undo operation
-        config.setBatchMode(true);
-        // These will update the UI immediately but not create history entries
-        actions.pushState({ ...currentAdjustments, tempScore: presetState.tempScore });
-        actions.pushState({ ...currentAdjustments, tempScore: presetState.tempScore, tintScore: presetState.tintScore });
-        actions.pushState({ ...currentAdjustments, tempScore: presetState.tempScore, tintScore: presetState.tintScore, exposureScore: presetState.exposureScore });
-        actions.pushState(presetState); // Final complete state
-        // Disable batch mode to commit only the final state to history
-        config.setBatchMode(false);
-        // Result: UI updated 4 times (smooth animation), but only 1 undo operation
-    };
-    // Example: Bulk update multiple adjustments
-    const updateMultipleAdjustments = (updates) => {
-        config.setBatchMode(true); // Start batching
-        const newState = {
-            ...currentAdjustments,
-            ...updates
-        };
-        actions.pushState(newState);
-        config.setBatchMode(false); // Commit batch
-    };
-    // Example: Load saved history from storage or API
-    const loadSavedHistory = (savedStates) => {
-        // Load complete history and set to last state
-        actions.syncHistory(savedStates);
-    };
-    // Example: Load history and jump to specific point
-    const loadHistoryToSpecificPoint = (savedStates, targetIndex) => {
-        // Load history and set current position to specific index
-        actions.syncHistory(savedStates, targetIndex);
-    };
-    // Example: Merge current history with new states
-    const mergeWithNewStates = (newStates) => {
-        const currentHistory = actions.getHistory();
-        const mergedHistory = [...currentHistory, ...newStates];
-        actions.syncHistory(mergedHistory);
-    };
-    // Example: Replace with preset variations
-    const loadPresetVariations = () => {
-        const variations = [
-            initialAdjustments, // Original
-            { ...initialAdjustments, tempScore: 25 }, // Warm
-            { ...initialAdjustments, tempScore: -25 }, // Cool
-            { ...initialAdjustments, exposureScore: 20 }, // Bright
-            { ...initialAdjustments, exposureScore: -20 }, // Dark
-        ];
-        actions.syncHistory(variations, 0); // Load variations, start at original
-    };
-    // Example: Reset to initial state
-    const resetAdjustments = () => {
-        actions.reset(initialAdjustments);
-    };
-    return {
-        // Current adjustment values
-        adjustments: currentAdjustments,
-        // History controls
-        canUndo: historyInfo.canUndo,
-        canRedo: historyInfo.canRedo,
-        undo: actions.undo,
-        redo: actions.redo,
-        // Adjustment functions
-        updateTemperature,
-        applyPresetWithSmoothUI,
-        updateMultipleAdjustments,
-        loadSavedHistory,
-        loadHistoryToSpecificPoint,
-        mergeWithNewStates,
-        loadPresetVariations,
-        resetAdjustments,
-        // Advanced features
-        jumpToIndex: actions.jumpToIndex,
-        getHistory: actions.getHistory,
-        clearHistory: actions.clearHistory,
-        syncHistory: actions.syncHistory,
-        // Configuration
-        setBatchMode: config.setBatchMode,
-        setMaxSize: config.setMaxSize,
-        getMemoryUsage: config.getMemoryUsage,
-        // History info
-        historyInfo
-    };
-}
-/**
- * Example integration with your existing useHonchoEditor pattern
- */
-export function integrateWithHonchoEditor() {
-    const history = useAdjustmentHistory(initialAdjustments);
-    // Replace your current manual history management with this:
-    // Instead of:
-    // const [history, setHistory] = useState<AdjustmentState[]>([initialAdjustments]);
-    // const [historyIndex, setHistoryIndex] = useState(0);
-    // Use:
-    const currentAdjustments = history.currentState;
-    const canUndo = history.historyInfo.canUndo;
-    const canRedo = history.historyInfo.canRedo;
-    // When any adjustment changes (e.g., slider value):
-    const handleSliderChange = (key, value) => {
-        const newState = {
-            ...currentAdjustments,
-            [key]: value
-        };
-        history.actions.pushState(newState);
-    };
-    // Smooth preset application with multiple UI updates
-    const handlePresetWithAnimation = async (presetState) => {
-        history.config.setBatchMode(true);
-        // Animate through intermediate states for smooth UI
-        const steps = 4;
-        for (let i = 1; i <= steps; i++) {
-            const progress = i / steps;
-            const intermediateState = {
-                tempScore: Math.round(currentAdjustments.tempScore + (presetState.tempScore - currentAdjustments.tempScore) * progress),
-                tintScore: Math.round(currentAdjustments.tintScore + (presetState.tintScore - currentAdjustments.tintScore) * progress),
-                vibranceScore: Math.round(currentAdjustments.vibranceScore + (presetState.vibranceScore - currentAdjustments.vibranceScore) * progress),
-                saturationScore: Math.round(currentAdjustments.saturationScore + (presetState.saturationScore - currentAdjustments.saturationScore) * progress),
-                exposureScore: Math.round(currentAdjustments.exposureScore + (presetState.exposureScore - currentAdjustments.exposureScore) * progress),
-                highlightsScore: Math.round(currentAdjustments.highlightsScore + (presetState.highlightsScore - currentAdjustments.highlightsScore) * progress),
-                shadowsScore: Math.round(currentAdjustments.shadowsScore + (presetState.shadowsScore - currentAdjustments.shadowsScore) * progress),
-                whitesScore: Math.round(currentAdjustments.whitesScore + (presetState.whitesScore - currentAdjustments.whitesScore) * progress),
-                blacksScore: Math.round(currentAdjustments.blacksScore + (presetState.blacksScore - currentAdjustments.blacksScore) * progress),
-                contrastScore: Math.round(currentAdjustments.contrastScore + (presetState.contrastScore - currentAdjustments.contrastScore) * progress),
-                clarityScore: Math.round(currentAdjustments.clarityScore + (presetState.clarityScore - currentAdjustments.clarityScore) * progress),
-                sharpnessScore: Math.round(currentAdjustments.sharpnessScore + (presetState.sharpnessScore - currentAdjustments.sharpnessScore) * progress),
-            };
-            history.actions.pushState(intermediateState);
-            // Small delay for smooth animation
-            await new Promise(resolve => setTimeout(resolve, 50));
-        }
-        history.config.setBatchMode(false); // Commit only final state to history
-    };
-    // Your existing undo/redo handlers become:
-    const handleUndo = history.actions.undo;
-    const handleRedo = history.actions.redo;
-    const handleRevert = () => history.actions.reset(initialAdjustments);
-    return {
-        currentAdjustments,
-        canUndo,
-        canRedo,
-        handleSliderChange,
-        handlePresetWithAnimation,
-        handleUndo,
-        handleRedo,
-        handleRevert
-    };
-}

package/dist/hooks/useAdjustmentHistory.syncDemo.d.ts

@@ -1,8 +0,0 @@
-/**
- * Demo component showing syncHistory functionality
- */
-export declare function SyncHistoryDemo(): import("react/jsx-runtime").JSX.Element;
-/**
- * Real-world integration example
- */
-export declare function RealWorldSyncExample(): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useAdjustmentHistory.syncDemo.js

@@ -1,180 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { useAdjustmentHistory } from './useAdjustmentHistory';
-const initialAdjustments = {
-    tempScore: 0, tintScore: 0, vibranceScore: 0, saturationScore: 0,
-    exposureScore: 0, highlightsScore: 0, shadowsScore: 0, whitesScore: 0,
-    blacksScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
-};
-/**
- * Demo component showing syncHistory functionality
- */
-export function SyncHistoryDemo() {
-    const { currentState, historyInfo, actions, config } = useAdjustmentHistory(initialAdjustments);
-    // Sample history data for demo
-    const [savedHistoryData] = useState([
-        { ...initialAdjustments }, // Original
-        { ...initialAdjustments, tempScore: 25, tintScore: 10 }, // Warm
-        { ...initialAdjustments, tempScore: 50, tintScore: 20, exposureScore: 15 }, // Warmer + Bright
-        { ...initialAdjustments, tempScore: 75, tintScore: 30, exposureScore: 30, contrastScore: 20 }, // Dramatic warm
-        { ...initialAdjustments, tempScore: 100, tintScore: 40, exposureScore: 50, contrastScore: 40, clarityScore: 25 }, // Final look
-    ]);
-    const [presetCollections] = useState({
-        vintage: [
-            { ...initialAdjustments },
-            { ...initialAdjustments, tempScore: 30, exposureScore: -10 },
-            { ...initialAdjustments, tempScore: 30, exposureScore: -10, contrastScore: -15 },
-            { ...initialAdjustments, tempScore: 30, exposureScore: -10, contrastScore: -15, saturationScore: -20 },
-            { ...initialAdjustments, tempScore: 30, exposureScore: -10, contrastScore: -15, saturationScore: -20, clarityScore: -10 },
-        ],
-        dramatic: [
-            { ...initialAdjustments },
-            { ...initialAdjustments, contrastScore: 30 },
-            { ...initialAdjustments, contrastScore: 30, clarityScore: 40 },
-            { ...initialAdjustments, contrastScore: 30, clarityScore: 40, shadowsScore: -20 },
-            { ...initialAdjustments, contrastScore: 30, clarityScore: 40, shadowsScore: -20, highlightsScore: -10 },
-        ],
-        cool: [
-            { ...initialAdjustments },
-            { ...initialAdjustments, tempScore: -25 },
-            { ...initialAdjustments, tempScore: -25, tintScore: 15 },
-            { ...initialAdjustments, tempScore: -25, tintScore: 15, vibranceScore: 20 },
-            { ...initialAdjustments, tempScore: -25, tintScore: 15, vibranceScore: 20, saturationScore: 10 },
-        ]
-    });
-    // Load saved editing session
-    const handleLoadSavedSession = () => {
-        actions.syncHistory(savedHistoryData);
-        console.log('Loaded saved editing session with', savedHistoryData.length, 'states');
-    };
-    // Load saved session to specific point
-    const handleLoadToSpecificPoint = (index) => {
-        actions.syncHistory(savedHistoryData, index);
-        console.log('Loaded saved session to step', index + 1);
-    };
-    // Load preset collection
-    const handleLoadPresetCollection = (collectionName) => {
-        const collection = presetCollections[collectionName];
-        if (collection) {
-            actions.syncHistory(collection, 0); // Start at original
-            console.log('Loaded', collectionName, 'preset collection');
-        }
-    };
-    // Simulate loading from API/localStorage
-    const handleLoadFromStorage = () => {
-        // Simulate API call or localStorage read
-        const mockStoredData = [
-            { ...initialAdjustments, tempScore: 15, exposureScore: 10 },
-            { ...initialAdjustments, tempScore: 15, exposureScore: 10, contrastScore: 20 },
-            { ...initialAdjustments, tempScore: 15, exposureScore: 10, contrastScore: 20, clarityScore: 15 },
-        ];
-        actions.syncHistory(mockStoredData, 2); // Load to last state
-        console.log('Loaded from storage:', mockStoredData.length, 'states');
-    };
-    // Export current history
-    const handleExportHistory = () => {
-        const currentHistory = actions.getHistory();
-        console.log('Current history to export:', currentHistory);
-        // In real app, you might:
-        // localStorage.setItem('adjustmentHistory', JSON.stringify(currentHistory));
-        // or send to API
-        alert(`Exported ${currentHistory.length} states to console (check browser dev tools)`);
-    };
-    // Merge with additional states
-    const handleMergeStates = () => {
-        const currentHistory = actions.getHistory();
-        const additionalStates = [
-            { ...currentState, sharpnessScore: 25 },
-            { ...currentState, sharpnessScore: 25, clarityScore: currentState.clarityScore + 15 },
-        ];
-        const mergedHistory = [...currentHistory, ...additionalStates];
-        actions.syncHistory(mergedHistory);
-        console.log('Merged additional states, total:', mergedHistory.length);
-    };
-    return (_jsxs("div", { style: { padding: '20px', fontFamily: 'monospace' }, children: [_jsx("h2", { children: "syncHistory Demo" }), _jsxs("div", { style: { marginBottom: '20px', padding: '15px', backgroundColor: '#f5f5f5', borderRadius: '5px' }, children: [_jsx("h3", { children: "Current State" }), _jsxs("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '10px', fontSize: '12px' }, children: [_jsxs("div", { children: ["Temp: ", currentState.tempScore] }), _jsxs("div", { children: ["Tint: ", currentState.tintScore] }), _jsxs("div", { children: ["Exposure: ", currentState.exposureScore] }), _jsxs("div", { children: ["Contrast: ", currentState.contrastScore] }), _jsxs("div", { children: ["Clarity: ", currentState.clarityScore] }), _jsxs("div", { children: ["Vibrance: ", currentState.vibranceScore] }), _jsxs("div", { children: ["Saturation: ", currentState.saturationScore] }), _jsxs("div", { children: ["Sharpness: ", currentState.sharpnessScore] })] }), _jsxs("div", { style: { marginTop: '10px', fontSize: '14px' }, children: [_jsx("strong", { children: "History:" }), " ", historyInfo.currentIndex + 1, " / ", historyInfo.totalStates, " |", _jsx("strong", { children: " Can Undo:" }), " ", historyInfo.canUndo ? 'Yes' : 'No', " |", _jsx("strong", { children: " Can Redo:" }), " ", historyInfo.canRedo ? 'Yes' : 'No'] })] }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { children: "Load Saved Editing Session" }), _jsxs("div", { style: { display: 'flex', gap: '10px', marginBottom: '10px' }, children: [_jsx("button", { onClick: handleLoadSavedSession, style: { padding: '10px', backgroundColor: '#4CAF50', color: 'white', border: 'none' }, children: "Load Complete Session (5 steps)" }), _jsx("button", { onClick: handleLoadFromStorage, style: { padding: '10px', backgroundColor: '#2196F3', color: 'white', border: 'none' }, children: "Load from Storage" })] }), _jsxs("div", { style: { display: 'flex', gap: '5px' }, children: [_jsx("span", { style: { fontSize: '12px', marginRight: '10px' }, children: "Load to specific step:" }), savedHistoryData.map((_, index) => (_jsxs("button", { onClick: () => handleLoadToSpecificPoint(index), style: {
-                                    padding: '5px 10px',
-                                    backgroundColor: '#FF9800',
-                                    color: 'white',
-                                    border: 'none',
-                                    fontSize: '12px'
-                                }, children: ["Step ", index + 1] }, index)))] })] }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { children: "Load Preset Collections" }), _jsx("div", { style: { display: 'flex', gap: '10px' }, children: Object.keys(presetCollections).map(collectionName => (_jsxs("button", { onClick: () => handleLoadPresetCollection(collectionName), style: {
-                                padding: '10px',
-                                backgroundColor: '#9C27B0',
-                                color: 'white',
-                                border: 'none',
-                                textTransform: 'capitalize'
-                            }, children: [collectionName, " Collection"] }, collectionName))) }), _jsx("div", { style: { fontSize: '12px', color: '#666', marginTop: '5px' }, children: "Each collection contains 5 progressive adjustment steps" })] }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { children: "History Management" }), _jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx("button", { onClick: handleExportHistory, style: { padding: '10px', backgroundColor: '#795548', color: 'white', border: 'none' }, children: "Export Current History" }), _jsx("button", { onClick: handleMergeStates, style: { padding: '10px', backgroundColor: '#607D8B', color: 'white', border: 'none' }, children: "Merge Additional States" }), _jsx("button", { onClick: actions.clearHistory, style: { padding: '10px', backgroundColor: '#f44336', color: 'white', border: 'none' }, children: "Clear History" })] })] }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { children: "Navigation" }), _jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [_jsx("button", { onClick: actions.undo, disabled: !historyInfo.canUndo, style: {
-                                    padding: '10px',
-                                    backgroundColor: historyInfo.canUndo ? '#FF5722' : '#ccc',
-                                    color: 'white',
-                                    border: 'none'
-                                }, children: "\u2190 Undo" }), _jsx("button", { onClick: actions.redo, disabled: !historyInfo.canRedo, style: {
-                                    padding: '10px',
-                                    backgroundColor: historyInfo.canRedo ? '#3F51B5' : '#ccc',
-                                    color: 'white',
-                                    border: 'none'
-                                }, children: "Redo \u2192" })] })] }), _jsxs("div", { style: { fontSize: '12px', color: '#666', backgroundColor: '#f9f9f9', padding: '15px', borderRadius: '5px' }, children: [_jsx("h4", { children: "syncHistory Usage:" }), _jsxs("ul", { style: { margin: 0, paddingLeft: '20px' }, children: [_jsxs("li", { children: [_jsx("code", { children: "actions.syncHistory(states)" }), " - Replace entire history with new states, current = last"] }), _jsxs("li", { children: [_jsx("code", { children: "actions.syncHistory(states, index)" }), " - Replace history and set current to specific index"] }), _jsx("li", { children: "Automatically validates all states are valid AdjustmentState objects" }), _jsx("li", { children: "Respects maxSize limits and trims if needed" }), _jsx("li", { children: "Exits batch mode if currently active" }), _jsx("li", { children: "Perfect for loading saved sessions, preset collections, or API data" })] })] })] }));
-}
-/**
- * Real-world integration example
- */
-export function RealWorldSyncExample() {
-    const history = useAdjustmentHistory(initialAdjustments);
-    // Example: Load editing session from API
-    const loadEditingSession = async (sessionId) => {
-        try {
-            // const response = await fetch(`/api/sessions/${sessionId}`);
-            // const sessionData = await response.json();
-            // Mock API response
-            const sessionData = [
-                { ...initialAdjustments },
-                { ...initialAdjustments, tempScore: 20, exposureScore: 15 },
-                { ...initialAdjustments, tempScore: 20, exposureScore: 15, contrastScore: 25 },
-            ];
-            history.actions.syncHistory(sessionData);
-            console.log('Loaded editing session:', sessionId);
-        }
-        catch (error) {
-            console.error('Failed to load session:', error);
-        }
-    };
-    // Example: Save current session to API
-    const saveEditingSession = async () => {
-        const currentHistory = history.actions.getHistory();
-        try {
-            // const response = await fetch('/api/sessions', {
-            //     method: 'POST',
-            //     headers: { 'Content-Type': 'application/json' },
-            //     body: JSON.stringify({ history: currentHistory })
-            // });
-            console.log('Saved session with', currentHistory.length, 'states');
-            return 'session-123'; // Mock session ID
-        }
-        catch (error) {
-            console.error('Failed to save session:', error);
-        }
-    };
-    // Example: Auto-save to localStorage
-    const autoSaveToLocalStorage = () => {
-        const currentHistory = history.actions.getHistory();
-        localStorage.setItem('adjustmentHistory', JSON.stringify(currentHistory));
-        localStorage.setItem('currentIndex', history.historyInfo.currentIndex.toString());
-    };
-    // Example: Load from localStorage on component mount
-    const loadFromLocalStorage = () => {
-        try {
-            const savedHistory = localStorage.getItem('adjustmentHistory');
-            const savedIndex = localStorage.getItem('currentIndex');
-            if (savedHistory) {
-                const parsedHistory = JSON.parse(savedHistory);
-                const targetIndex = savedIndex ? parseInt(savedIndex, 10) : undefined;
-                history.actions.syncHistory(parsedHistory, targetIndex);
-                console.log('Restored from localStorage');
-            }
-        }
-        catch (error) {
-            console.error('Failed to load from localStorage:', error);
-        }
-    };
-    return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h2", { children: "Real-World syncHistory Integration" }), _jsxs("div", { style: { display: 'flex', gap: '10px', marginBottom: '20px' }, children: [_jsx("button", { onClick: () => loadEditingSession('session-123'), children: "Load Session from API" }), _jsx("button", { onClick: saveEditingSession, children: "Save Session to API" }), _jsx("button", { onClick: autoSaveToLocalStorage, children: "Save to LocalStorage" }), _jsx("button", { onClick: loadFromLocalStorage, children: "Load from LocalStorage" })] }), _jsxs("div", { style: { fontSize: '12px', color: '#666' }, children: [_jsx("p", { children: "This example shows how to integrate syncHistory with:" }), _jsxs("ul", { children: [_jsx("li", { children: "API endpoints for session management" }), _jsx("li", { children: "LocalStorage for offline persistence" }), _jsx("li", { children: "Auto-save functionality" }), _jsx("li", { children: "Session restoration on app load" })] })] })] }));
-}

package/dist/hooks/useGallerySwipe.example.d.ts

@@ -1,24 +0,0 @@
-/**
- * Example usage of the useGallerySwipe hook
- * This shows various integration patterns and use cases
- */
-/**
- * Basic example: Simple image gallery with navigation buttons
- */
-export declare function BasicGalleryExample(): import("react/jsx-runtime").JSX.Element;
-/**
- * Advanced example: Gallery with keyboard navigation and swipe gestures
- */
-export declare function AdvancedGalleryExample(): import("react/jsx-runtime").JSX.Element;
-/**
- * Integration example: Using with existing useHonchoEditor
- */
-export declare function EditorIntegrationExample(): import("react/jsx-runtime").JSX.Element;
-/**
- * Mobile-optimized example with touch gestures
- */
-export declare function MobileGalleryExample(): import("react/jsx-runtime").JSX.Element;
-/**
- * Error handling and loading states example
- */
-export declare function ErrorHandlingExample(): import("react/jsx-runtime").JSX.Element;