@yogiswara/honcho-editor-ui 2.10.19 → 2.11.0

package/dist/components/editor/HAlertBox.js

@@ -28,7 +28,7 @@ export function HAlertCopyBox() {
 }
 export function HAlertInternetConnectionBox(props) {
     const colors = useColors();
-    return (_jsx(Alert, { icon: _jsx("img", { src: "v1/svg/check-ratio-editor.svg" }), sx: {
+    return (_jsx(Alert, { icon: _jsx("img", { src: "v1/svg/alert-circle-internet-problem.svg" }), sx: {
             position: 'absolute',
             top: '10%',
             left: '50%',

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

@@ -1,52 +1,14 @@
 import React from "react";
-import { AdjustmentState } from '../../hooks/editor/type';
-type Preset = {
-    id: string;
-    name: string;
-};
 interface Props {
-    presets: Preset[];
-    activePanel: string;
+    activePanelMobile: string;
     activeSubPanel: string;
-    setActivePanel: (tab: string) => void;
-    setActiveSubPanel: (subTab: string) => void;
-    innerRef?: React.Ref<HTMLDivElement>;
+    setActivePanelMobile: (tab: string) => void;
+    subNavigation: React.ReactNode;
+    panelContent: React.ReactNode;
     panelRef: React.RefObject<HTMLDivElement>;
     contentRef: React.RefObject<HTMLDivElement | null>;
     panelHeight: number;
     handleDragStart: (e: React.MouseEvent | React.TouchEvent) => void;
-    onContentHeightChange: (height: number) => void;
-    tempScore: number;
-    tintScore: number;
-    vibranceScore: number;
-    saturationScore: number;
-    exposureScore: number;
-    highlightsScore: number;
-    shadowScore: number;
-    whiteScore: number;
-    blackScore: number;
-    contrastScore: number;
-    clarityScore: number;
-    sharpnessScore: number;
-    setTempScore: (field: keyof AdjustmentState, value: number) => void;
-    setTintScore: (field: keyof AdjustmentState, value: number) => void;
-    setVibranceScore: (field: keyof AdjustmentState, value: number) => void;
-    setSaturationScore: (field: keyof AdjustmentState, value: number) => void;
-    onExposureChange: (field: keyof AdjustmentState, value: number) => void;
-    onHighlightsChange: (field: keyof AdjustmentState, value: number) => void;
-    onShadowsChange: (field: keyof AdjustmentState, value: number) => void;
-    onWhitesChange: (field: keyof AdjustmentState, value: number) => void;
-    onBlacksChange: (field: keyof AdjustmentState, value: number) => void;
-    onContrastChange: (field: keyof AdjustmentState, value: number) => void;
-    onClarityChange: (field: keyof AdjustmentState, value: number) => void;
-    onSharpnessChange: (field: keyof AdjustmentState, value: number) => void;
-    isBatchMode: boolean;
-    onDragStart: () => void;
-    onDragEnd: () => void;
-    selectedPreset: string | null;
-    onSelectPreset: (id: string) => void;
-    onOpenPresetModal: () => void;
-    presetOptionModal: (event: React.MouseEvent<HTMLElement>, presetId: string) => void;
 }
 export default function HImageEditorMobile(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/editor/HImageEditorMobile.js

@@ -1,42 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { BottomNavigation, BottomNavigationAction, Box, CardMedia, Paper, Stack } from "@mui/material";
-import useHonchoTypography from "../../themes/honchoTheme";
-import useColors from '../../themes/colors';
-import HTabColorAdjustmentMobile from "./HTabColorAdjustmentMobile";
-import HTabPresetMobile from "./HTabPresetMobile";
-// Data structure for the sub-navigation tabs
-const subTabs = {
-    colorAdjustment: [
-        { value: "color", label: "Color", inactiveIcon: "/v1/svg/new-mobile-coloAdjustment-notpress.svg", activeIcon: "/v1/svg/new-mobile-coloAdjustment-presssvg.svg" },
-        { value: "light", label: "Light", inactiveIcon: "/v1/svg/light-inactive-mobile.svg", activeIcon: "/v1/svg/light-active-mobile.svg" },
-        // { value: "details", label: "Details", inactiveIcon: "/v1/svg/details-inactive-mobile.svg", activeIcon: "/v1/svg/details-active-mobile.svg"},
-    ],
-    aspectRatio: [
-        { value: "portrait", label: "Portrait" },
-        { value: "square", label: "Square" },
-        { value: "wide", label: "Wide" },
-    ],
-    preset: [
-        { value: "Preset", label: "Preset", inactiveIcon: "/v1/svg/preset-inactive-mobile.svg", activeIcon: "/v1/svg/preset-active-mobile.svg" },
-    ],
-};
+import { Box, Paper, Stack } from "@mui/material";
+// The hardcoded `subTabs` and `renderPanelContent` are now removed.
 export default function HImageEditorMobile(props) {
-    const typography = useHonchoTypography();
-    const colors = useColors();
+    // The handleChange function now only needs the renamed prop
     const handleChange = (event, newValue) => {
-        props.setActivePanel(newValue);
-    };
-    const currentSubTabs = subTabs[props.activePanel];
-    // Helper function to render the correct content inside the draggable panel
-    const renderPanelContent = () => {
-        switch (props.activePanel) {
-            case 'colorAdjustment':
-                return _jsx(HTabColorAdjustmentMobile, { activeSubPanel: props.activeSubPanel, innerRef: props.innerRef, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd, onExposureChange: props.onExposureChange, onContrastChange: props.onContrastChange, onHighlightsChange: props.onHighlightsChange, onShadowsChange: props.onShadowsChange, onWhitesChange: props.onWhitesChange, onBlacksChange: props.onBlacksChange, setTempScore: props.setTempScore, setTintScore: props.setTintScore, setVibranceScore: props.setVibranceScore, setSaturationScore: props.setSaturationScore, exposureScore: props.exposureScore, contrastScore: props.contrastScore, highlightsScore: props.highlightsScore, shadowScore: props.shadowScore, whiteScore: props.whiteScore, blackScore: props.blackScore, tempScore: props.tempScore, tintScore: props.tintScore, vibranceScore: props.vibranceScore, saturationScore: props.saturationScore, isBatchMode: props.isBatchMode, sharpnessScore: props.sharpnessScore, onSharpnessChange: props.onSharpnessChange, clarityScore: props.clarityScore, onClarityChange: props.onClarityChange });
-            case 'preset':
-                return _jsx(HTabPresetMobile, { ...props });
-            default:
-                return null;
-        }
+        props.setActivePanelMobile(newValue);
     };
     return (_jsx(Paper, { elevation: 0, sx: {
             id: 'HImageEditorMobile',
@@ -70,23 +38,5 @@ export default function HImageEditorMobile(props) {
                                 overflowY: 'auto',
                                 scrollbarWidth: 'none',
                                 '&::-webkit-scrollbar': { display: 'none' },
-                            }, children: renderPanelContent() })] })), currentSubTabs && (_jsx(Paper, { sx: {
-                        backgroundColor: colors.onBackground,
-                        paddingTop: "10px",
-                        pb: "0px",
-                        mb: "0px",
-                        px: "44px",
-                        borderRadius: "0px",
-                    }, elevation: 3, children: _jsx(BottomNavigation, { showLabels: true, sx: { backgroundColor: colors.onBackground, gap: '10px' }, children: currentSubTabs.map((tab) => {
-                            const isActive = props.activeSubPanel === tab.value;
-                            const iconSrc = isActive ? tab.activeIcon : tab.inactiveIcon;
-                            return (_jsx(BottomNavigationAction, { label: tab.label, value: tab.value, onClick: () => props.setActiveSubPanel(isActive ? '' : tab.value), icon: iconSrc && _jsx(CardMedia, { component: "img", image: iconSrc, sx: { width: "20px", height: "20px", mb: "5px" } }), sx: {
-                                    color: isActive ? colors.surface : colors.onSurfaceVariant1,
-                                    minWidth: 'auto', p: 0,
-                                    '& .MuiBottomNavigationAction-label': {
-                                        ...typography.labelSmall,
-                                        color: isActive ? colors.surface : colors.onSurfaceVariant1,
-                                    }
-                                } }, tab.value));
-                        }) }) })), _jsx(Paper, { sx: { backgroundColor: colors.onBackground, borderRadius: "0px" }, elevation: 3, children: _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: { pt: "0px", pb: "0px", mb: "0px", mr: "0px", ml: "0px" }, children: _jsxs(BottomNavigation, { value: props.activePanel, onChange: handleChange, sx: { backgroundColor: colors.onBackground }, children: [_jsx(BottomNavigationAction, { value: "colorAdjustment", sx: { px: '12px', py: '0px', minWidth: 'auto' }, icon: _jsx(CardMedia, { component: "img", image: props.activePanel === 'colorAdjustment' ? "/v1/svg/color-adjustment-active-mobile.svg" : "/v1/svg/color-adjustment-inactive-mobile.svg", sx: { width: "20px", height: "20px" } }) }), _jsx(BottomNavigationAction, { value: "preset", sx: { px: '12px', py: '0px', minWidth: 'auto' }, icon: _jsx(CardMedia, { component: "img", image: props.activePanel === 'preset' ? "/v1/svg/preset-and-watermark-active-mobile.svg" : "/v1/svg/preset-and-watermark-inactive-mobile.svg", sx: { width: "20px", height: "20px" } }) })] }) }) })] }) }));
+                            }, children: props.panelContent })] })), props.subNavigation] }) }));
 }

package/dist/components/editor/HSliderColorMobile.js

@@ -30,6 +30,7 @@ function useAdjustmentField(propValue, setValue, onDragStart, onDragEnd, isBatch
         // start batch on first valid change
         if (!started && !isBatchMode) {
             onDragStart();
+            console.log("[MOBILE UI] Starting batch: ", onDragStart);
             setStarted(true);
         }
         setValue(num);
@@ -41,6 +42,7 @@ function useAdjustmentField(propValue, setValue, onDragStart, onDragEnd, isBatch
         setLocal("0");
         setValue(0);
         if (!isBatchMode) {
+            console.log("[MOBILE UI] ending batch: ", onDragEnd);
             onDragEnd();
         }
     };
@@ -77,7 +79,16 @@ function useAdjustmentField(propValue, setValue, onDragStart, onDragEnd, isBatch
 export default function HSliderColorMobile(props) {
     const typography = useHonchoTypography();
     const colors = useColors();
-    const tempSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
+    console.log(`[HSliderColorMobile TEMPERATURE] Received tempScore prop: ${props.tempScore}`);
+    const handleDragStartWithLog = () => {
+        console.log('[HSliderColorMobile TEMPERATURE] SLIDER onDragStart triggered.');
+        props.onDragStart();
+    };
+    const handleDragEndWithLog = () => {
+        console.log('[HSliderColorMobile TEMPERATURE] SLIDER onDragEnd triggered.');
+        props.onDragEnd();
+    };
+    const tempSliderRef = useSliderEvents(handleDragStartWithLog, handleDragEndWithLog, props.isBatchMode);
     const tintSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
     const vibranceSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
     const saturationSliderRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
@@ -107,21 +118,6 @@ export default function HSliderColorMobile(props) {
         borderBottom: 'none',
         pl: '2px',
     };
-    const formatValue = (value) => {
-        if (value > 0)
-            return `+${value}`;
-        return value.toString();
-    };
-    const handleInputChange = (event, min, max, onChange) => {
-        const value = event.target.value;
-        if (value === '+' || value === '-')
-            return;
-        let numericValue = parseInt(value, 10);
-        if (isNaN(numericValue))
-            numericValue = 0;
-        const clampedValue = Math.max(min, Math.min(max, numericValue));
-        onChange(clampedValue);
-    };
     return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px" }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px', '&:focus-within .MuiFilledInput-input': focusedInputStyle }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, onDoubleClick: tempInput.handleDoubleClick, children: "Temperature" }), _jsx(Typography, { sx: {
                                 ...typography.bodyMedium, // Use your standard typography
                                 color: colors.surface,

package/dist/components/editor/HTabColorAdjustmentMobile.js

@@ -4,5 +4,6 @@ import HSliderLightMobile from "./HSliderLightMobile";
 import HSliderDetailsMobile from "./HSliderDetailsMobile";
 import { Box } from "@mui/material";
 export default function HTabColorAdjustmentMobile(props) {
+    console.log(`[HTabColorAdjustmentMobile TEMPERATURE] Passing down tempScore: ${props.tempScore}`);
     return (_jsxs(Box, { ref: props.innerRef, children: [props.activeSubPanel === "light" && _jsx(HSliderLightMobile, { exposureScore: props.exposureScore, contrastScore: props.contrastScore, highlightsScore: props.highlightsScore, shadowScore: props.shadowScore, whiteScore: props.whiteScore, blackScore: props.blackScore, isBatchMode: props.isBatchMode, onExposureChange: props.onExposureChange, onContrastChange: props.onContrastChange, onHighlightsChange: props.onHighlightsChange, onShadowsChange: props.onShadowsChange, onWhitesChange: props.onWhitesChange, onBlacksChange: props.onBlacksChange, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }), props.activeSubPanel === "color" && _jsx(HSliderColorMobile, { tempScore: props.tempScore, tintScore: props.tintScore, vibranceScore: props.vibranceScore, saturationScore: props.saturationScore, isBatchMode: props.isBatchMode, setTempScore: props.setTempScore, setTintScore: props.setTintScore, setVibranceScore: props.setVibranceScore, setSaturationScore: props.setSaturationScore, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd }), props.activeSubPanel === "details" && _jsx(HSliderDetailsMobile, { clarityScore: props.clarityScore, sharpnessScore: props.sharpnessScore, isBatchMode: props.isBatchMode, onClarityChange: props.onClarityChange, onSharpnessChange: props.onSharpnessChange, onDragStart: props.onDragStart, onDragEnd: props.onDragEnd })] }));
 }

package/dist/index.d.ts

@@ -33,6 +33,8 @@ export { ImageSize, HonchoEditor, AdjustmentValues, AdjustmentRange, AdjustmentR
 export { default as HPresetDeleteDialog } from './components/editor/HPresetDelete';
 export { default as HModalDialog } from './components/modal/HModalDialog';
 export { default as HModalRename } from './components/modal/HModalRename';
+export { default as HTabColorAdjustmentMobile } from './components/editor/HTabColorAdjustmentMobile';
+export { default as HTabPresetMobile } from './components/editor/HTabPresetMobile';
 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';

package/dist/index.js

@@ -32,6 +32,8 @@ export { HonchoEditor } from './lib/editor/honcho-editor';
 export { default as HPresetDeleteDialog } from './components/editor/HPresetDelete';
 export { default as HModalDialog } from './components/modal/HModalDialog';
 export { default as HModalRename } from './components/modal/HModalRename';
+export { default as HTabColorAdjustmentMobile } from './components/editor/HTabColorAdjustmentMobile';
+export { default as HTabPresetMobile } from './components/editor/HTabPresetMobile';
 // --- History Hooks ---
 export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';

package/package.json

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