@yogiswara/honcho-editor-ui 1.0.0

package/dist/components/editor/HImageEditorMobile.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BottomNavigation, BottomNavigationAction, Box, CardMedia, Paper, Stack } from "@mui/material";
+import useColors from "@/colors";
+import useHonchoTypography from "@/honchoTheme";
+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/white-balance-inactive-mobile.svg", activeIcon: "/v1/svg/white-balance-active-mobile.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" },
+    ],
+};
+export default function HImageEditorMobile(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    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, { ...props });
+            case 'preset':
+                return _jsx(HTabPresetMobile, { ...props });
+            default:
+                return null;
+        }
+    };
+    return (_jsx(Paper, { elevation: 0, sx: {
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1300,
+            backgroundColor: 'transparent',
+        }, children: _jsxs(Stack, { direction: "column", children: [props.activeSubPanel && (_jsxs(Paper, { ref: props.panelRef, elevation: 3, className: "draggable-panel MuiPaper-transition", sx: {
+                        height: `${props.panelHeight}px`,
+                        maxHeight: '80vh',
+                        backgroundColor: 'rgba(40, 40, 40, 0.85)',
+                        overflow: 'hidden',
+                        borderRadius: "0px",
+                        '&.MuiPaper-transition': {
+                            transition: 'height 0.5s ease-in-out',
+                        },
+                    }, children: [_jsx(Box, { onMouseDown: props.handleDragStart, onTouchStart: props.handleDragStart, sx: {
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                pt: '5px',
+                                pb: '12px',
+                                cursor: 'ns-resize',
+                                touchAction: 'none',
+                            }, children: _jsx(Box, { sx: { width: 40, height: 5, borderRadius: '2.5px', backgroundColor: 'rgba(255, 255, 255, 0.5)' } }) }), _jsx(Box, { ref: props.contentRef, sx: {
+                                paddingX: "8px",
+                                paddingBottom: 3,
+                                height: 'calc(100% - 30px)',
+                                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" } }) })] }) }) })] }) }));
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+interface Props {
+    children: React.ReactNode;
+    activePanel: string;
+    activeSubPanel: string;
+    setActivePanel: (tab: string) => void;
+    setActiveSubPanel: (subTab: string) => void;
+    panelRef: React.RefObject<HTMLDivElement>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    panelHeight: number;
+    handleDragStart: (e: React.MouseEvent | React.TouchEvent) => void;
+}
+export default function HImageEditorMobileLayout(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HImageEditorMobileLayout.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { BottomNavigation, BottomNavigationAction, Box, CardMedia, Paper, Stack } from "@mui/material";
+import useColors from "@/colors";
+import useHonchoTypography from "@/honchoTheme";
+// Data structure for the sub-navigation tabs
+const subTabs = {
+    colorAdjustment: [
+        { value: "color", label: "Color", inactiveIcon: "/v1/svg/white-balance-inactive-mobile.svg", activeIcon: "/v1/svg/white-balance-active-mobile.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" },
+    ],
+};
+export default function HImageEditorMobileLayout(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    const handleChange = (event, newValue) => {
+        props.setActivePanel(newValue);
+    };
+    const currentSubTabs = subTabs[props.activePanel];
+    return (_jsx(Paper, { elevation: 0, sx: {
+            position: 'fixed',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1300,
+            backgroundColor: 'transparent',
+        }, children: _jsxs(Stack, { direction: "column", children: [props.activeSubPanel && (_jsxs(Paper, { ref: props.panelRef, elevation: 3, className: "draggable-panel MuiPaper-transition", sx: {
+                        height: `${props.panelHeight}px`, maxHeight: '60vh',
+                        backgroundColor: 'rgba(40, 40, 40, 0.85)', overflow: 'hidden', borderRadius: "0px",
+                        '&.MuiPaper-transition': { transition: 'height 0.5s ease-in-out' },
+                    }, children: [_jsx(Box, { onMouseDown: props.handleDragStart, onTouchStart: props.handleDragStart, sx: {
+                                display: 'flex', justifyContent: 'center', alignItems: 'center',
+                                pt: '5px', pb: '12px', cursor: 'ns-resize', touchAction: 'none',
+                            }, children: _jsx(Box, { sx: { width: 40, height: 5, borderRadius: '2.5px', backgroundColor: 'rgba(255, 255, 255, 0.5)' } }) }), _jsx(Box, { ref: props.contentRef, sx: {
+                                paddingX: "8px", paddingBottom: 3, height: 'calc(100% - 30px)',
+                                overflowY: 'auto', scrollbarWidth: 'none', '&::-webkit-scrollbar': { display: 'none' },
+                            }, children: props.children })] })), currentSubTabs && (_jsx(Paper, { sx: { backgroundColor: colors.onBackground, paddingTop: "10px", 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", pb: "0px", mb: "0px" }, elevation: 3, children: _jsx(Stack, { direction: "row", justifyContent: "center", alignItems: "center", sx: { pt: "4px", 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: "aspectRatio", sx: { px: '12px', py: '0px', minWidth: 'auto' }, icon: _jsx(CardMedia, { component: "img", image: props.activePanel === 'aspectRatio' ? "/v1/svg/aspect-ratio-inactive-mobile.svg" : "/v1/svg/aspect-ratio-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" } }) })] }) }) })] }) }));
+}

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

@@ -0,0 +1 @@
+export default function HImageEditorPage(): import("react/jsx-runtime").JSX.Element;

package/dist/components/editor/HImageEditorPage.js

@@ -0,0 +1,187 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useMemo, Suspense } from "react";
+import { Box, Stack, CircularProgress, Typography, Checkbox, Paper } from "@mui/material";
+import useColors from "@/colors";
+import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh'; // Magic Wand Icon
+import Script from "next/script";
+import useIsMobile from "@/utils/isMobile";
+// Components
+import HHeaderEditor from "@/components/editor/HHeaderEditor";
+import HAccordionColorAdjustment from "@/components/editor/HAccordionColorAdjustment";
+import HAccordionPreset from "@/components/editor/HAccordionPreset";
+import { HBaseDialog } from "@/components/editor/HDialogBox";
+import { HDialogCopy, HDialogPreset } from "@/components/editor/HDialogCopy";
+import HImageEditorMobile from "@/components/editor/HImageEditorMobile";
+import HImageEditorDesktop from "@/components/editor/HImageEditorDekstop";
+import HImageEditorBulkDekstop from "@/components/editor/HImageEditorBulkDekstop";
+import HImageEditorBulkMobile from "@/components/editor/HImageEditorBulkMobile";
+import HBulkAccordionColorAdjustment from "@/components/editor/HBulkAccordionColorAdjustment";
+import HBulkPreset from "@/components/editor/HBulkPreset";
+import HModalEditorDekstop from "@/components/editor/HModalEditorDekstop";
+import HFooter from "@/components/editor/HFooter";
+import { HTextField } from "@/components/editor/HTextField";
+import HWatermarkView from "@/components/editor/HWatermarkView";
+import HModalMobile from "@/components/editor/HModalMobile";
+import HPresetOptionsMenu from "@/components/editor/HPresetOptionMenu";
+import { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox } from "@/components/editor/HAlertBox";
+// Hooks
+import { useHonchoEditor } from "@/hooks/editor/useHonchoEditor";
+const initialAdjustments = {
+    tempScore: 0, tintScore: 0, vibranceScore: 0, exposureScore: 0, highlightsScore: 0, shadowsScore: 0,
+    whitesScore: 0, blacksScore: 0, saturationScore: 0, contrastScore: 0, clarityScore: 0, sharpnessScore: 0,
+};
+// Helper to check if an image has any edits
+const hasAdjustments = (state) => {
+    if (!state)
+        return false;
+    return Object.values(state).some(value => value !== 0);
+};
+function HImageEditorClient() {
+    const localController = useMemo(() => ({
+        /**
+         * The handleBack logic is now defined directly inside the page component.
+         */
+        handleBack: function () {
+            if (window.webkit?.messageHandlers?.nativeHandler) {
+                window.webkit.messageHandlers.nativeHandler.postMessage("back");
+                console.log("Sent 'back' message to iOS native handler.");
+            }
+            else if (window.Android?.goBack) {
+                console.log("Android environment detected. Calling goBack().");
+                window.Android.goBack();
+            }
+            else {
+                console.log("Standard web browser detected. Navigating back in history.");
+                window.history.back();
+            }
+        },
+        // --- Provide placeholder implementations for other required methods ---
+        // These are necessary to satisfy the Controller interface contract.
+        onGetImage: async (imageID) => {
+            console.log("onGetImage called with:", imageID);
+            // Return a placeholder or the actual web implementation
+            const imageUrl = `https://d2cxumz3vt1s04.cloudfront.net/staging/gallery-photo/67ee6b55b8e4273707f68978/preview/${imageID}.jpeg`;
+            return imageUrl;
+        },
+        getImageList: async () => { return []; },
+        syncConfig: async () => { },
+        getPresets: async () => { return []; },
+        createPreset: async () => { return null; },
+        deletePreset: async () => { },
+        renamePreset: async () => { },
+    }), []);
+    const editor = useHonchoEditor(localController);
+    const isMobile = useIsMobile();
+    const colors = useColors();
+    const [displayedToken, setDisplayedToken] = useState(null);
+    const [displayedImageId, setDisplayedImageId] = useState(null);
+    // Dummy/placeholder handlers that remain in the component
+    const handleScale = (event) => editor.setAnchorMenuZoom(event.currentTarget);
+    const handleBeforeAfter = () => console.log("Before/After toggled!");
+    // const handleZoomMenuClose = () => editor.setAnchorMenuZoom(null);
+    // const handleZoomAction = (level: string) => { console.log(`Zoom: ${level}`); handleZoomMenuClose(); };
+    const renderActivePanelBulk = () => {
+        // MARK: Dekstop Bulk Editor panels
+        switch (editor.activePanel) {
+            case 'colorAdjustment':
+                return (_jsx(HBulkAccordionColorAdjustment
+                // Adjustments Colors
+                , { 
+                    // Adjustments Colors
+                    onTempDecreaseMax: editor.handleBulkTempDecreaseMax, onTempDecrease: editor.handleBulkTempDecrease, onTempIncrease: editor.handleBulkTempIncrease, onTempIncreaseMax: editor.handleBulkTempIncreaseMax, onTintDecreaseMax: editor.handleBulkTintDecreaseMax, onTintDecrease: editor.handleBulkTintDecrease, onTintIncrease: editor.handleBulkTintIncrease, onTintIncreaseMax: editor.handleBulkTintIncreaseMax, onVibranceDecreaseMax: editor.handleBulkVibranceDecreaseMax, onVibranceDecrease: editor.handleBulkVibranceDecrease, onVibranceIncrease: editor.handleBulkVibranceIncrease, onVibranceIncreaseMax: editor.handleBulkVibranceIncreaseMax, onSaturationDecreaseMax: editor.handleBulkSaturationDecreaseMax, onSaturationDecrease: editor.handleBulkSaturationDecrease, onSaturationIncrease: editor.handleBulkSaturationIncrease, onSaturationIncreaseMax: editor.handleBulkSaturationIncreaseMax, 
+                    // Adjustments Light
+                    onExposureDecreaseMax: editor.handleBulkExposureDecreaseMax, onExposureDecrease: editor.handleBulkExposureDecrease, onExposureIncrease: editor.handleBulkExposureIncrease, onExposureIncreaseMax: editor.handleBulkExposureIncreaseMax, onContrastDecreaseMax: editor.handleBulkContrastDecreaseMax, onContrastDecrease: editor.handleBulkContrastDecrease, onContrastIncrease: editor.handleBulkContrastIncrease, onContrastIncreaseMax: editor.handleBulkContrastIncreaseMax, onHighlightsDecreaseMax: editor.handleBulkHighlightsDecreaseMax, onHighlightsDecrease: editor.handleBulkHighlightsDecrease, onHighlightsIncrease: editor.handleBulkHighlightsIncrease, onHighlightsIncreaseMax: editor.handleBulkHighlightsIncreaseMax, onShadowsDecreaseMax: editor.handleBulkShadowsDecreaseMax, onShadowsDecrease: editor.handleBulkShadowsDecrease, onShadowsIncrease: editor.handleBulkShadowsIncrease, onShadowsIncreaseMax: editor.handleBulkShadowsIncreaseMax, onWhitesDecreaseMax: editor.handleBulkWhitesDecreaseMax, onWhitesDecrease: editor.handleBulkWhitesDecrease, onWhitesIncrease: editor.handleBulkWhitesIncrease, onWhitesIncreaseMax: editor.handleBulkWhitesIncreaseMax, onBlacksDecreaseMax: editor.handleBulkBlacksDecreaseMax, onBlacksDecrease: editor.handleBulkBlacksDecrease, onBlacksIncrease: editor.handleBulkBlacksIncrease, onBlacksIncreaseMax: editor.handleBulkBlacksIncreaseMax, 
+                    // Adjustments Details
+                    onClarityDecreaseMax: editor.handleBulkClarityDecreaseMax, onClarityDecrease: editor.handleBulkClarityDecrease, onClarityIncrease: editor.handleBulkClarityIncrease, onClarityIncreaseMax: editor.handleBulkClarityIncreaseMax, onSharpnessDecreaseMax: editor.handleBulkSharpnessDecreaseMax, onSharpnessDecrease: editor.handleBulkSharpnessDecrease, onSharpnessIncrease: editor.handleBulkSharpnessIncrease, onSharpnessIncreaseMax: editor.handleBulkSharpnessIncreaseMax, 
+                    // Panels Management
+                    expandedPanels: editor.colorAdjustmentExpandedPanels, onPanelChange: editor.handleColorAccordionChange }));
+            case 'preset':
+                return (_jsx(HBulkPreset, { presets: editor.presets, selectedPreset: editor.selectedBulkPreset, onSelectPreset: editor.handleSelectBulkPreset, expandedPanels: editor.presetExpandedPanels, onPanelChange: editor.handlePresetAccordionChange, presetMenuAnchorEl: editor.presetMenuAnchorEl, activePresetMenuId: editor.activePresetMenuId, isMenuOpen: Boolean(editor.presetMenuAnchorEl), onPresetMenuClick: editor.handlePresetMenuClick, onPresetMenuClose: editor.handlePresetMenuClose, onRemovePreset: editor.handleRemovePreset, onRenamePreset: editor.handleOpenRenameModal, onDeletePreset: editor.handleDeletePreset, onOpenPresetModal: editor.handleOpenPresetModal }));
+            default: return null;
+        }
+    };
+    const renderActivePanel = () => {
+        // MARK: Dekstop Editor panels
+        switch (editor.activePanel) {
+            case 'colorAdjustment':
+                return (_jsx(HAccordionColorAdjustment, { tempScore: editor.tempScore, setTempScore: editor.setTempScore, tintScore: editor.tintScore, setTintScore: editor.setTintScore, vibranceScore: editor.vibranceScore, setVibranceScore: editor.setVibranceScore, saturationScore: editor.saturationScore, setSaturationScore: editor.setSaturationScore, exposureScore: editor.exposureScore, setExposureScore: editor.setExposureScore, HighlightsScore: editor.highlightsScore, setHighlightsScore: editor.setHighlightsScore, shadowsScore: editor.shadowsScore, setShadowsScore: editor.setShadowsScore, whitesScore: editor.whitesScore, setWhitesScore: editor.setWhitesScore, blacksScore: editor.blacksScore, setBlacksScore: editor.setBlacksScore, contrastScore: editor.contrastScore, setContrastScore: editor.setContrastScore, clarityScore: editor.clarityScore, setClarityScore: editor.setClarityScore, sharpnessScore: editor.sharpnessScore, setSharpnessScore: editor.setSharpnessScore, expandedPanels: editor.colorAdjustmentExpandedPanels, onPanelChange: editor.handleColorAccordionChange }));
+            case 'preset':
+                return (_jsx(HAccordionPreset, { presets: editor.presets, expandedPanels: editor.presetExpandedPanels, onChange: editor.handlePresetAccordionChange, onOpenPresetModal: editor.handleOpenPresetModal, onOpenWatermarkView: editor.handleOpenWatermarkView, selectedPreset: editor.selectedDesktopPreset, onSelectPreset: editor.handleSelectDesktopPreset, presetMenuAnchorEl: editor.presetMenuAnchorEl, onPresetMenuClick: editor.handlePresetMenuClick, onPresetMenuClose: editor.handlePresetMenuClose, activePresetMenuId: editor.activePresetMenuId, onRemovePreset: editor.handleRemovePreset, onRenamePreset: editor.handleOpenRenameModal, onDeletePreset: editor.handleDeletePreset }));
+            default: return null;
+        }
+    };
+    if (editor.isCreatingWatermark) {
+        return (_jsx(HWatermarkView, { onSaveWatermark: editor.handleSaveWatermark, onCancelWatermark: editor.handleCancelWatermark }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Script, { src: "/honcho-photo-editor.js", strategy: "lazyOnload", onReady: () => {
+                    editor.handleScriptReady();
+                } }), _jsxs(Stack, { direction: "column", justifyContent: "center", sx: { width: '100%', height: isMobile ? '100%' : '100vh', background: 'black', pl: isMobile ? 0 : "24px", pr: isMobile ? 0 : "0px" }, children: [editor.isConnectionSlow && _jsx(HAlertInternetConnectionBox, { onClose: editor.handleAlertClose }), !editor.isOnline && _jsx(HAlertInternetBox, {}), editor.isPresetCreated && !isMobile && _jsx(HAlertInternetBox, {}), editor.showCopyAlert && _jsx(HAlertCopyBox, {}), displayedToken && (_jsx(Box, { sx: { p: 1, mx: 2, backgroundColor: 'grey.900', borderRadius: 1, mt: 1 }, children: _jsxs(Typography, { variant: "caption", sx: { color: 'lime', fontFamily: 'monospace', wordBreak: 'break-all' }, children: [_jsx("strong", { children: "Token Received:" }), " ", displayedToken] }) })), displayedImageId && (_jsx(Box, { sx: { p: 1, mx: 2, backgroundColor: 'grey.900', borderRadius: 1, mt: 1 }, children: _jsxs(Typography, { variant: "caption", sx: { color: 'white', fontFamily: 'monospace', wordBreak: 'break-all' }, children: [_jsx("strong", { children: "Image ID:" }), " ", displayedImageId] }) })), _jsx(HHeaderEditor, { onBack: editor.handleBack, onUndo: editor.handleUndo, onRedo: editor.handleRedo, onRevert: editor.handleRevert, onCopyEdit: editor.handleOpenCopyDialog, onPasteEdit: editor.handlePasteEdit, isPasteEnabled: editor.isPasteAvailable, anchorEl: editor.headerMenuAnchorEl, onMenuClick: editor.handleHeaderMenuClick, onMenuClose: editor.handleHeaderMenuClose, onSelectButton: editor.toggleBulkEditing, valueSelect: editor.selectedImages }), _jsxs(Stack, { direction: isMobile ? "column" : "row", justifyContent: "space-between", alignItems: "stretch", sx: { width: '100%', flexGrow: 1, overflow: 'hidden' }, children: [_jsxs(Box, { sx: {
+                                    flexGrow: 1,
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    alignItems: 'center', // This will now work correctly on mobile
+                                    position: 'relative',
+                                    p: isMobile ? 2 : 4,
+                                    minHeight: 720
+                                }, children: [_jsx("input", { type: "file", ref: editor.fileInputRef, onChange: editor.handleFileChange, multiple: true, accept: "image/*", style: { display: 'none' } }), !editor.isImageLoaded ? (_jsxs(Box, { onClick: () => editor.fileInputRef.current?.click(), sx: { display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', border: '2px dashed grey', borderRadius: 2, p: 4, cursor: editor.isEditorReady ? 'pointer' : 'default', textAlign: 'center', color: 'grey.500', width: '100%', height: '300px' }, children: [!editor.isEditorReady && _jsx(CircularProgress, { color: "inherit", sx: { mb: 2 } }), _jsx(Typography, { variant: "h6", children: editor.editorStatus })] })) : (editor.isBulkEditing ? (
+                                    // Responsive Image Grid for Bulk Edit
+                                    _jsx(Box, { sx: {
+                                            display: 'grid',
+                                            gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+                                            gap: 2,
+                                            width: '100%',
+                                            height: '100%',
+                                            p: 1
+                                        }, children: editor.imageList.map(image => {
+                                            const imageAdjustments = editor.adjustmentsMap.get(image.id) || initialAdjustments;
+                                            const isEdited = hasAdjustments(imageAdjustments);
+                                            return (_jsxs(Paper, { elevation: 3, sx: {
+                                                    position: 'relative',
+                                                    overflow: 'hidden',
+                                                    aspectRatio: '1 / 1',
+                                                    '& img': {
+                                                        width: '100%',
+                                                        height: '100%',
+                                                        objectFit: 'cover',
+                                                        display: 'block',
+                                                        transition: 'opacity 0.2s ease-in-out',
+                                                        opacity: editor.selectedImageIds.has(image.id) ? 1 : 0.4,
+                                                    }
+                                                }, children: [_jsx("img", { src: image.url, alt: image.name }), _jsx(Checkbox, { checked: editor.selectedImageIds.has(image.id), onChange: () => editor.handleToggleImageSelection(image.id), sx: {
+                                                            position: 'absolute', top: 4, left: 4, color: 'common.white',
+                                                            '&.Mui-checked': { color: '#1976d2' },
+                                                            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                                                            '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.7)' }
+                                                        } }), isEdited && (_jsx(AutoFixHighIcon, { fontSize: "small", sx: {
+                                                            position: 'absolute',
+                                                            bottom: 8,
+                                                            right: 8,
+                                                            color: 'white',
+                                                            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                                                            borderRadius: '50%',
+                                                            padding: '2px'
+                                                        } }))] }, image.id));
+                                        }) })) : (
+                                    // Canvas for Single Edit
+                                    _jsx("canvas", { ref: editor.canvasRef, style: { display: 'block', maxWidth: '100%', maxHeight: '100%', width: 'auto', height: 'auto' } })))] }), !isMobile && !editor.isBulkEditing && (_jsx(HImageEditorDesktop, { activePanel: editor.activePanel, setActivePanel: editor.setActivePanel, onScale: handleScale, onBeforeAfter: handleBeforeAfter, isPanelOpen: !isMobile, anchorElZoom: editor.anchorMenuZoom, onZoomMenuClose: () => editor.setAnchorMenuZoom(null), onZoomAction: editor.handleZoomAction, footer: _jsx(HFooter, { anchorElZoom: editor.anchorMenuZoom, onScale: (event) => editor.setAnchorMenuZoom(event.currentTarget), onShowOriginal: editor.handleShowOriginal, onShowEdited: editor.handleShowEdited, onZoomMenuClose: () => editor.setAnchorMenuZoom(null), onZoomAction: editor.handleZoomAction, zoomLevelText: editor.zoomLevelText }), children: renderActivePanel() })), !isMobile && editor.isBulkEditing && (_jsx(HImageEditorBulkDekstop, { activePanel: editor.activePanel, setActivePanel: editor.setActivePanel, onScale: handleScale, onBeforeAfter: handleBeforeAfter, isPanelOpen: !isMobile, anchorElZoom: editor.anchorMenuZoom, onZoomMenuClose: () => editor.setAnchorMenuZoom(null), onZoomAction: editor.handleZoomAction, footer: _jsx(HFooter, { anchorElZoom: editor.anchorMenuZoom, onScale: (event) => editor.setAnchorMenuZoom(event.currentTarget), onShowOriginal: editor.handleShowOriginal, onShowEdited: editor.handleShowEdited, onZoomMenuClose: () => editor.setAnchorMenuZoom(null), onZoomAction: editor.handleZoomAction, zoomLevelText: editor.zoomLevelText }), children: renderActivePanelBulk() })), isMobile && !editor.isBulkEditing && (_jsx(HImageEditorMobile, { presets: editor.presets, contentRef: editor.contentRef, panelRef: editor.panelRef, panelHeight: editor.panelHeight, handleDragStart: editor.handleDragStart, onContentHeightChange: editor.handleContentHeightChange, activePanel: editor.activePanel, setActivePanel: (panel) => { editor.setActivePanel(panel); editor.setActiveSubPanel(''); }, activeSubPanel: editor.activeSubPanel, setActiveSubPanel: editor.setActiveSubPanel, 
+                                // Color Adjustments
+                                tempScore: editor.tempScore, onTempChange: editor.setTempScore, tintScore: editor.tintScore, onTintChange: editor.setTintScore, vibranceScore: editor.vibranceScore, onVibranceChange: editor.setVibranceScore, saturationScore: editor.saturationScore, onSaturationChange: editor.setSaturationScore, 
+                                // Adjustments Light
+                                exposureScore: editor.exposureScore, onExposureChange: editor.setExposureScore, contrastScore: editor.contrastScore, onContrastChange: editor.setContrastScore, highlightsScore: editor.highlightsScore, onHighlightsChange: editor.setHighlightsScore, shadowScore: editor.shadowsScore, onShadowsChange: editor.setShadowsScore, whiteScore: editor.whitesScore, onWhitesChange: editor.setWhitesScore, blackScore: editor.blacksScore, onBlacksChange: editor.setBlacksScore, 
+                                // Adjustments Details
+                                clarityScore: editor.clarityScore, onClarityChange: editor.setClarityScore, sharpnessScore: editor.sharpnessScore, onSharpnessChange: editor.setSharpnessScore, 
+                                // Modal Management
+                                onOpenPresetModal: editor.handleOpenPresetModalMobile, presetOptionModal: editor.handlePresetMenuClick, selectedPreset: editor.selectedMobilePreset, onSelectPreset: editor.handleSelectMobilePreset })), isMobile && editor.isBulkEditing && (_jsx(HImageEditorBulkMobile, { presets: editor.presets, contentRef: editor.contentRef, panelRef: editor.panelRef, panelHeight: editor.panelHeight, handleDragStart: editor.handleDragStart, onContentHeightChange: editor.handleContentHeightChange, activePanel: editor.activePanel, setActivePanel: (panel) => { editor.setActivePanel(panel); editor.setActiveSubPanel(''); }, activeSubPanel: editor.activeSubPanel, setActiveSubPanel: editor.setActiveSubPanel, 
+                                // Color Adjustments
+                                onTempDecreaseMax: editor.handleBulkTempDecreaseMax, onTempDecrease: editor.handleBulkTempDecrease, onTempIncrease: editor.handleBulkTempIncrease, onTempIncreaseMax: editor.handleBulkTempIncreaseMax, onTintDecreaseMax: editor.handleBulkTintDecreaseMax, onTintDecrease: editor.handleBulkTintDecrease, onTintIncrease: editor.handleBulkTintIncrease, onTintIncreaseMax: editor.handleBulkTintIncreaseMax, onVibranceDecreaseMax: editor.handleBulkVibranceDecreaseMax, onVibranceDecrease: editor.handleBulkVibranceDecrease, onVibranceIncrease: editor.handleBulkVibranceIncrease, onVibranceIncreaseMax: editor.handleBulkVibranceIncreaseMax, onSaturationDecreaseMax: editor.handleBulkSaturationDecreaseMax, onSaturationDecrease: editor.handleBulkSaturationDecrease, onSaturationIncrease: editor.handleBulkSaturationIncrease, onSaturationIncreaseMax: editor.handleBulkSaturationIncreaseMax, 
+                                // Adjustments Light
+                                onExposureDecreaseMax: editor.handleBulkExposureDecreaseMax, onExposureDecrease: editor.handleBulkExposureDecrease, onExposureIncrease: editor.handleBulkExposureIncrease, onExposureIncreaseMax: editor.handleBulkExposureIncreaseMax, onContrastDecreaseMax: editor.handleBulkContrastDecreaseMax, onContrastDecrease: editor.handleBulkContrastDecrease, onContrastIncrease: editor.handleBulkContrastIncrease, onContrastIncreaseMax: editor.handleBulkContrastIncreaseMax, onHighlightsDecreaseMax: editor.handleBulkHighlightsDecreaseMax, onHighlightsDecrease: editor.handleBulkHighlightsDecrease, onHighlightsIncrease: editor.handleBulkHighlightsIncrease, onHighlightsIncreaseMax: editor.handleBulkHighlightsIncreaseMax, onShadowsDecreaseMax: editor.handleBulkShadowsDecreaseMax, onShadowsDecrease: editor.handleBulkShadowsDecrease, onShadowsIncrease: editor.handleBulkShadowsIncrease, onShadowsIncreaseMax: editor.handleBulkShadowsIncreaseMax, onWhitesDecreaseMax: editor.handleBulkWhitesDecreaseMax, onWhitesDecrease: editor.handleBulkWhitesDecrease, onWhitesIncrease: editor.handleBulkWhitesIncrease, onWhitesIncreaseMax: editor.handleBulkWhitesIncreaseMax, onBlacksDecreaseMax: editor.handleBulkBlacksDecreaseMax, onBlacksDecrease: editor.handleBulkBlacksDecrease, onBlacksIncrease: editor.handleBulkBlacksIncrease, onBlacksIncreaseMax: editor.handleBulkBlacksIncreaseMax, 
+                                // Adjustments Details
+                                onClarityDecreaseMax: editor.handleBulkClarityDecreaseMax, onClarityDecrease: editor.handleBulkClarityDecrease, onClarityIncrease: editor.handleBulkClarityIncrease, onClarityIncreaseMax: editor.handleBulkClarityIncreaseMax, onSharpnessDecreaseMax: editor.handleBulkSharpnessDecreaseMax, onSharpnessDecrease: editor.handleBulkSharpnessDecrease, onSharpnessIncrease: editor.handleBulkSharpnessIncrease, onSharpnessIncreaseMax: editor.handleBulkSharpnessIncreaseMax, selectedPresetBulk: editor.selectedBulkPreset, onOpenPresetModalBulk: editor.handleOpenPresetModalMobile, onSelectPresetBulk: editor.handleSelectBulkPreset, onPresetMenuClickBulk: editor.handlePresetMenuClick })), _jsx(HPresetOptionsMenu, { anchorEl: editor.presetMenuAnchorEl, isOpen: Boolean(editor.presetMenuAnchorEl), onClose: editor.handlePresetMenuClose, onRemove: editor.handleRemovePreset, onRename: editor.handleOpenRenameModal, onDelete: editor.handleDeletePreset, isPresetSelected: (editor.isBulkEditing ? editor.selectedBulkPreset : editor.selectedDesktopPreset) === editor.activePresetMenuId }), _jsx(HModalEditorDekstop, { modalName: "preset", modalOpen: editor.isPresetModalOpen, modalTitle: "Create Preset", modalInformation: "Choose settings to include in preset", action: _jsx(HDialogPreset, { colorChecks: editor.copyColorChecks, lightChecks: editor.copyLightChecks, detailsChecks: editor.copyDetailsChecks, setColorChecks: editor.setCopyColorChecks, setLightChecks: editor.setCopyLightChecks, setDetailsChecks: editor.setCopyDetailsChecks, expanded: editor.copyDialogExpanded, onParentChange: editor.handleCopyParentChange, onChildChange: editor.handleCopyChildChange, onToggleExpand: editor.handleToggleCopyDialogExpand }), modalClose: editor.handleClosePresetModal, onConfirm: editor.handleCreatePreset, children: _jsx(HTextField, { valueName: editor.presetName, setName: editor.handleNameChange }) }), _jsx(HModalMobile, { modalName: "preset", modalOpen: editor.isPresetModalOpenMobile, modalTitle: "Create Preset", modalInformation: "Create a preset with the current Light, Colour and Details settings", modalClose: editor.handleClosePresetModalMobile, onConfirm: editor.handleCreatePresetMobile, children: _jsx(HTextField, { valueName: editor.presetName, setName: editor.handleNameChange }) })] })] }), editor.isCopyDialogOpen && (_jsx(HBaseDialog, { open: editor.isCopyDialogOpen, title: "Copy Edits", onClose: editor.handleCloseCopyDialog, action: _jsx(HDialogCopy, { onCopyEdit: editor.handleConfirmCopy, colorChecks: editor.copyColorChecks, lightChecks: editor.copyLightChecks, detailsChecks: editor.copyDetailsChecks, setColorChecks: editor.setCopyColorChecks, setLightChecks: editor.setCopyLightChecks, setDetailsChecks: editor.setCopyDetailsChecks, expanded: editor.copyDialogExpanded, onParentChange: editor.handleCopyParentChange, onChildChange: editor.handleCopyChildChange, onToggleExpand: editor.handleToggleCopyDialogExpand }) }))] }));
+}
+export default function HImageEditorPage() {
+    const colors = useColors();
+    const fallbackUI = (_jsx(Stack, { sx: { width: '100%', height: '100vh', alignItems: 'center', justifyContent: 'center', background: 'black' }, children: _jsx(CircularProgress, { sx: { color: colors.onSurfaceVariant } }) }));
+    return (_jsx(Suspense, { fallback: fallbackUI, children: _jsx(HImageEditorClient, {}) }));
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+interface Props {
+    modalName: string;
+    modalOpen: boolean;
+    modalTitle: string;
+    modalInformation: string;
+    children: React.ReactNode;
+    action?: React.ReactNode;
+    modalClose: () => void;
+    onConfirm: () => void;
+}
+export default function HModalEditorDekstop(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HModalEditorDekstop.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Modal, Box, Typography, Button, Stack } from "@mui/material";
+import useColors from "@/colors";
+import useHonchoTypography from "@/honchoTheme";
+// Create modal for any usage coverage
+export default function HModalEditorDekstop(props) {
+    const colors = useColors();
+    const typography = useHonchoTypography();
+    const style = {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 500,
+        bgcolor: 'background.paper',
+        boxShadow: 24,
+        p: 4,
+        borderRadius: 6,
+        spacing: 6,
+    };
+    return (_jsx(_Fragment, { children: _jsx(Modal, { open: props.modalOpen, onClose: props.modalClose, children: _jsxs(Box, { sx: style, children: [_jsx(Typography, { variant: "h6", color: "initial", children: props.modalTitle }), _jsx(Box, { sx: { mt: 2 }, children: props.children }), _jsx(Typography, { color: "initial", children: props.modalInformation }), _jsx(Stack, { children: props.action }), _jsxs(Stack, { direction: "row", spacing: 2, sx: { mt: 3, justifyContent: 'flex-end' }, children: [_jsx(Button, { sx: { ...typography.labelMedium, color: colors.onSurface, backgroundColor: colors.surface, }, onClick: props.modalClose, children: "Cancel" }), _jsx(Button, { sx: { ...typography.labelMedium, color: colors.onSurface, backgroundColor: colors.surface, }, onClick: props.onConfirm, children: "Save" })] })] }) }) }));
+}

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

@@ -0,0 +1,12 @@
+import React from "react";
+interface Props {
+    modalName: string;
+    modalOpen: boolean;
+    modalTitle: string;
+    modalInformation: string;
+    children: React.ReactNode;
+    modalClose: () => void;
+    onConfirm: () => void;
+}
+export default function HModalMobile(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HModalMobile.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Modal, Box, Typography, Button, Stack, IconButton, CardMedia } from "@mui/material";
+import useColors from "@/colors";
+export default function HModalMobile(props) {
+    const colors = useColors();
+    return (_jsx(_Fragment, { children: _jsx(Modal, { open: props.modalOpen, onClose: props.modalClose, children: _jsxs(Stack, { direction: "column", spacing: 2, height: "100%", sx: { p: "10px", backgroundColor: colors.surface }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Stack, { direction: "row", justifyContent: "flex-start", alignItems: "center", spacing: 1, children: [_jsx(IconButton, { "aria-label": "close", onClick: props.modalClose, children: _jsx(CardMedia, { component: "img", image: "/v1/svg/exit-button-modal-mobile.svg" }) }), _jsx(Typography, { variant: "h6", color: "initial", children: props.modalTitle })] }), _jsx(Button, { onClick: props.onConfirm, children: "Save" })] }), _jsx(Typography, { variant: "inherit", color: "initial", children: props.modalInformation }), _jsx(Box, { sx: { mt: 2 }, children: props.children })] }) }) }));
+}

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

@@ -0,0 +1,11 @@
+interface Props {
+    anchorEl: null | HTMLElement;
+    isOpen: boolean;
+    onClose: () => void;
+    isPresetSelected: boolean;
+    onRemove: () => void;
+    onRename: () => void;
+    onDelete: () => void;
+}
+export default function HPresetOptionsMenu(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/HPresetOptionMenu.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu, MenuItem, ListItemText, CardMedia, Stack } from "@mui/material";
+import useHonchoTypography from "@/honchoTheme";
+import useColors from "@/colors";
+export default function HPresetOptionsMenu(props) {
+    const typography = useHonchoTypography();
+    const colors = useColors();
+    return (_jsxs(Menu, { id: "preset-options-menu", anchorEl: props.anchorEl, open: props.isOpen, onClose: props.onClose, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, slotProps: {
+            paper: {
+                sx: {
+                    backgroundColor: colors.onBackground,
+                    color: colors.surface,
+                    border: `1px solid ${colors.onSurfaceVariant1}`,
+                    '& .MuiMenuItem-root:hover': {
+                        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+                    },
+                },
+            },
+        }, children: [props.isPresetSelected && (_jsx(MenuItem, { onClick: props.onRemove, children: _jsxs(Stack, { direction: "row", spacing: "10px", children: [_jsx(CardMedia, { component: "img", image: "/v1/svg/remove-preset-menu-button.svg", sx: { width: '20px', height: '20px' } }), _jsx(ListItemText, { sx: { ...typography.bodyMedium }, children: "Remove Preset" })] }) })), _jsx(MenuItem, { onClick: props.onRename, children: _jsxs(Stack, { direction: "row", spacing: "10px", children: [_jsx(CardMedia, { component: "img", image: "/v1/svg/rename-menu-button.svg", sx: { width: '20px', height: '20px' } }), _jsx(ListItemText, { sx: { ...typography.bodyMedium }, children: "Rename" })] }) }), _jsx(MenuItem, { onClick: props.onDelete, children: _jsxs(Stack, { direction: "row", spacing: "10px", children: [_jsx(CardMedia, { component: "img", image: "/v1/svg/delete-menu-button.svg", sx: { width: '20px', height: '20px' } }), _jsx(ListItemText, { sx: { ...typography.bodyMedium, color: colors.error }, children: "Delete" })] }) })] }));
+}

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

@@ -0,0 +1,12 @@
+interface Props {
+    tempScore: number;
+    tintScore: number;
+    saturationScore: number;
+    vibranceScore: number;
+    onTempChange: (value: number) => void;
+    onTintChange: (value: number) => void;
+    onVibranceChange: (value: number) => void;
+    onSaturationChange: (value: number) => void;
+}
+export default function HSliderColorMobile(props: Props): import("react/jsx-runtime").JSX.Element;
+export {};