@yogiswara/honcho-editor-ui 3.4.16 → 3.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/editor/HDialogCopy.js +2 -2
  2. package/dist/components/editor/HImageEditorBulkMobile.js +1 -1
  3. package/dist/components/editor/HImageEditorMobile.js +1 -1
  4. package/dist/components/editor/HSliderDetailsMobile.js +142 -141
  5. package/dist/hooks/editor/useHonchoEditorBulk.js +51 -20
  6. package/package.json +1 -1
package/dist/components/editor/HDialogCopy.js CHANGED
@@ -24,7 +24,7 @@ export function HDialogCopy(props) {
24
24
  color: colors.onSurface,
25
25
  '&.Mui-checked, &.Mui-indeterminate': { color: colors.onSurface },
26
26
  };
27
- return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: props.colorChecks.temperature, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: props.colorChecks.tint, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: props.colorChecks.vibrance, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: props.colorChecks.saturation, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.light ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: props.lightChecks.exposure, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: props.lightChecks.contrast, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: props.lightChecks.highlights, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: props.lightChecks.shadows, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: props.lightChecks.whites, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: props.lightChecks.blacks, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsx(Button, { onClick: props.onCopyEdit, sx: { ...typography.labelMedium, mt: '20px', height: '40px', color: colors.surface, backgroundColor: colors.onSurface, borderRadius: '100px', textTransform: 'none' }, children: "Copy" })] }));
27
+ return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: props.expanded.color ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: props.colorChecks.temperature, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: props.colorChecks.tint, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: props.colorChecks.vibrance, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: props.colorChecks.saturation, onChange: (e) => props.onChildChange(e, props.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.light ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: props.lightChecks.exposure, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: props.lightChecks.contrast, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: props.lightChecks.highlights, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: props.lightChecks.shadows, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: props.lightChecks.whites, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: props.lightChecks.blacks, onChange: (e) => props.onChildChange(e, props.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Details" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isDetailsParentChecked, indeterminate: isDetailsParentIndeterminate, onChange: (e) => props.onParentChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => props.onToggleExpand('details'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: props.expanded.details ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: props.expanded.details, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Clarity" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "clarity", checked: props.detailsChecks.clarity, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Sharpness" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "sharpness", checked: props.detailsChecks.sharpness, onChange: (e) => props.onChildChange(e, props.setDetailsChecks), sx: checkboxStyle }) })] }) })] }), _jsx(Button, { onClick: props.onCopyEdit, sx: { ...typography.labelMedium, mt: '20px', height: '40px', color: colors.surface, backgroundColor: colors.onSurface, borderRadius: '100px', textTransform: 'none' }, children: "Copy" })] }));
28
28
  }
29
29
  // A component for the UNCHECKED box
30
30
  const RoundedSquareIcon = ({ color }) => (_jsx("div", { style: {
@@ -76,5 +76,5 @@ export function HDialogPreset(propsPreset) {
76
76
  color: colors.onSurface,
77
77
  '&.Mui-checked, &.Mui-indeterminate': { color: colors.onSurface },
78
78
  };
79
- return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsx(Stack, { direction: "column", alignItems: "flex-start", children: _jsx(Typography, { variant: "inherit", color: "initial", children: propsPreset.descriptionOnCopy }) }), _jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: propsPreset.expanded.color ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: propsPreset.colorChecks.temperature, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: propsPreset.colorChecks.tint, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: propsPreset.colorChecks.vibrance, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: propsPreset.colorChecks.saturation, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.light ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: propsPreset.lightChecks.exposure, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: propsPreset.lightChecks.contrast, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: propsPreset.lightChecks.highlights, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: propsPreset.lightChecks.shadows, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: propsPreset.lightChecks.whites, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: propsPreset.lightChecks.blacks, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) })] }) })] })] }));
79
+ return (_jsxs(Stack, { direction: "column", spacing: 1, sx: { padding: 0, margin: 0, width: '100%' }, children: [_jsxs(Stack, { children: [_jsx(Stack, { direction: "column", alignItems: "flex-start", children: _jsx(Typography, { variant: "inherit", color: "initial", children: propsPreset.descriptionOnCopy }) }), _jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Color" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isColorParentChecked, indeterminate: isColorParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${colorCheckedCount}/${colorValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('color'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { colors: colors.background, transition: 'transform 0.3s', transform: propsPreset.expanded.color ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.color, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Temperature" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "temperature", checked: propsPreset.colorChecks.temperature, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Tint" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "tint", checked: propsPreset.colorChecks.tint, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Vibrance" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "vibrance", checked: propsPreset.colorChecks.vibrance, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Saturation" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), name: "saturation", checked: propsPreset.colorChecks.saturation, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setColorChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Light" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isLightParentChecked, indeterminate: isLightParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${lightCheckedCount}/${lightValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('light'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.light ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.light, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Exposure" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "exposure", checked: propsPreset.lightChecks.exposure, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Contrast" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "contrast", checked: propsPreset.lightChecks.contrast, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Highlights" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "highlights", checked: propsPreset.lightChecks.highlights, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Shadows" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "shadows", checked: propsPreset.lightChecks.shadows, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Whites" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "whites", checked: propsPreset.lightChecks.whites, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Blacks" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "blacks", checked: propsPreset.lightChecks.blacks, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setLightChecks), sx: checkboxStyle }) })] }) })] }), _jsxs(Stack, { children: [_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Details" }), control: _jsx(Checkbox, { color: "default", icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), indeterminateIcon: _jsx(RoundedSquareIndeterminateIcon, { color: colors.onSurface }), checked: isDetailsParentChecked, indeterminate: isDetailsParentIndeterminate, onChange: (e) => propsPreset.onParentChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) }), _jsxs(Stack, { direction: "row", alignItems: "center", children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface }, children: `${detailsCheckedCount}/${detailsValues.length}` }), _jsx(IconButton, { onClick: () => propsPreset.onToggleExpand('details'), size: "small", sx: { pt: "3px" }, children: _jsx(ExpandMoreIcon, { sx: { transition: 'transform 0.3s', transform: propsPreset.expanded.details ? 'rotate(0deg)' : 'rotate(180deg)' } }) })] })] }), _jsx(Collapse, { in: propsPreset.expanded.details, timeout: "auto", unmountOnExit: true, children: _jsxs(Stack, { direction: "column", sx: { ml: 2, pl: 1.5 }, children: [_jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Clarity" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "clarity", checked: propsPreset.detailsChecks.clarity, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) }), _jsx(FormControlLabel, { label: _jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.onSurface, pt: "2px" }, children: "Sharpness" }), control: _jsx(Checkbox, { icon: _jsx(RoundedSquareIcon, { color: colors.onSurface }), checkedIcon: _jsx(RoundedSquareCheckedIcon, { color: colors.onSurface }), color: "default", name: "sharpness", checked: propsPreset.detailsChecks.sharpness, onChange: (e) => propsPreset.onChildChange(e, propsPreset.setDetailsChecks), sx: checkboxStyle }) })] }) })] })] }));
80
80
  }
package/dist/components/editor/HImageEditorBulkMobile.js CHANGED
@@ -9,7 +9,7 @@ const subTabs = {
9
9
  colorAdjustment: [
10
10
  { value: "color", label: "Color", inactiveIcon: "/v1/svg/new-mobile-coloAdjustment-notpress.svg", activeIcon: "/v1/svg/new-mobile-coloAdjustment-presssvg.svg" },
11
11
  { value: "light", label: "Light", inactiveIcon: "/v1/svg/light-inactive-mobile.svg", activeIcon: "/v1/svg/light-active-mobile.svg" },
12
- // { value: "details", label: "Details", inactiveIcon: "/v1/svg/details-inactive-mobile.svg", activeIcon: "/v1/svg/details-active-mobile.svg"},
12
+ { value: "details", label: "Details", inactiveIcon: "/v1/svg/details-inactive-mobile.svg", activeIcon: "/v1/svg/details-active-mobile.svg" },
13
13
  ],
14
14
  aspectRatio: [
15
15
  { value: "portrait", label: "Portrait" },
package/dist/components/editor/HImageEditorMobile.js CHANGED
@@ -9,7 +9,7 @@ const subTabs = {
9
9
  colorAdjustment: [
10
10
  { value: "color", label: "Color", inactiveIcon: "/v1/svg/new-mobile-coloAdjustment-notpress.svg", activeIcon: "/v1/svg/new-mobile-coloAdjustment-presssvg.svg" },
11
11
  { value: "light", label: "Light", inactiveIcon: "/v1/svg/light-inactive-mobile.svg", activeIcon: "/v1/svg/light-active-mobile.svg" },
12
- // { value: "details", label: "Details", inactiveIcon: "/v1/svg/details-inactive-mobile.svg", activeIcon: "/v1/svg/details-active-mobile.svg"},
12
+ { value: "details", label: "Details", inactiveIcon: "/v1/svg/details-inactive-mobile.svg", activeIcon: "/v1/svg/details-active-mobile.svg" },
13
13
  ],
14
14
  aspectRatio: [
15
15
  { value: "portrait", label: "Portrait" },
package/dist/components/editor/HSliderDetailsMobile.js CHANGED
@@ -1,154 +1,155 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { Stack, Slider, Typography, TextField } from "@mui/material";
2
+ import { useEffect, useState } from "react";
3
+ import { Stack, Slider, Typography, Box } from "@mui/material";
3
4
  import useHonchoTypography from "../../themes/honchoTheme";
4
5
  import useColors from '../../themes/colors';
5
- export default function HSliderDetailsMobile(props) {
6
- const typography = useHonchoTypography();
7
- const colors = useColors();
8
- const formatValue = (value) => {
9
- if (value > 0)
10
- return `+${value}`;
6
+ import useSliderEvents from "../editor/sliderComponents/useSliderEvents";
7
+ const formatValue = (value) => {
8
+ if (value > 0)
9
+ return `+${value}`;
10
+ if (value < 0)
11
11
  return value.toString();
12
- };
13
- const handleInputChange = (event, min, max, onChange) => {
14
- const value = event.target.value;
15
- if (value === '+' || value === '-')
12
+ return "0";
13
+ };
14
+ function useAdjustmentField(propValue, setValue, onDragStart, onDragEnd, isBatchMode) {
15
+ const [local, setLocal] = useState(formatValue(propValue));
16
+ const [started, setStarted] = useState(false);
17
+ // keep sync with external changes
18
+ useEffect(() => {
19
+ setLocal(formatValue(propValue));
20
+ }, [propValue]);
21
+ const handleChange = (e, min, max) => {
22
+ const raw = e.target.value;
23
+ setLocal(raw);
24
+ if (raw === "" || raw === "+" || raw === "-")
16
25
  return;
17
- let numericValue = parseInt(value, 10);
18
- if (isNaN(numericValue))
19
- numericValue = 0;
20
- const clampedValue = Math.max(min, Math.min(max, numericValue));
21
- onChange(clampedValue);
26
+ let num = parseInt(raw, 10);
27
+ if (isNaN(num))
28
+ return;
29
+ num = Math.max(min, Math.min(max, num));
30
+ // start batch on first valid change
31
+ if (!started && !isBatchMode) {
32
+ onDragStart();
33
+ console.log("[MOBILE UI] Starting batch: ", onDragStart);
34
+ setStarted(true);
35
+ }
36
+ setValue(num);
37
+ };
38
+ const handleDoubleClick = () => {
39
+ if (!isBatchMode) {
40
+ onDragStart();
41
+ }
42
+ setLocal("0");
43
+ setValue(0);
44
+ if (!isBatchMode) {
45
+ console.log("[MOBILE UI] ending batch: ", onDragEnd);
46
+ onDragEnd();
47
+ }
48
+ };
49
+ const handleBlur = (min, max) => {
50
+ if (local === "" || local === "+" || local === "-") {
51
+ setLocal("0");
52
+ setValue(0);
53
+ }
54
+ else {
55
+ let num = parseInt(local, 10);
56
+ if (isNaN(num))
57
+ num = 0;
58
+ num = Math.max(min, Math.min(max, num));
59
+ setLocal(formatValue(num));
60
+ setValue(num);
61
+ }
62
+ // end batch when user leaves field
63
+ if (started) {
64
+ onDragEnd();
65
+ setStarted(false);
66
+ }
22
67
  };
23
- return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1 }, children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Clarity" }), _jsx(TextField, { hiddenLabel: true, InputProps: { readOnly: true }, id: "filled-hidden-label-small", value: formatValue(props.clarityScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onClarityChange("clarityScore", val)), sx: {
24
- width: "40px",
25
- alignItems: "center",
26
- textAlign: "right",
27
- pr: "4px",
28
- display: "flex",
29
- '& .MuiFilledInput-root': {
30
- backgroundColor: 'transparent',
31
- borderRadius: "0px",
32
- border: 'none',
33
- '&:before': {
34
- borderBottom: 'none',
35
- },
36
- '&:after': {
37
- borderBottom: 'none',
38
- },
39
- '&:hover:not(.Mui-disabled):before': {
40
- borderBottom: 'none',
41
- },
42
- '&.Mui-focused:after': {
43
- borderBottom: 'none',
44
- },
68
+ const handleKeyDown = (e) => {
69
+ if (e.key === "Enter") {
70
+ e.target.blur(); // blur the actual input
71
+ if (started) {
72
+ onDragEnd();
73
+ setStarted(false);
74
+ }
75
+ }
76
+ };
77
+ return { local, handleChange, handleBlur, handleKeyDown, handleDoubleClick };
78
+ }
79
+ export default function HSliderDetailsMobile(props) {
80
+ const typography = useHonchoTypography();
81
+ const colors = useColors();
82
+ const clarityRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
83
+ const sharpnessRef = useSliderEvents(props.onDragStart, props.onDragEnd, props.isBatchMode);
84
+ const clarityInput = useAdjustmentField(props.clarityScore, (val) => props.onClarityChange("clarityScore", val), props.onDragStart, props.onDragEnd, props.isBatchMode);
85
+ const sharpnessInput = useAdjustmentField(props.sharpnessScore, (val) => props.onSharpnessChange("sharpnessScore", val), props.onDragStart, props.onDragEnd, props.isBatchMode);
86
+ return (_jsx(_Fragment, { children: _jsxs(Stack, { spacing: 0, direction: "column", sx: { width: '100%', paddingX: 1, m: "0px", userSelect: 'none' }, onTouchStart: (e) => e.stopPropagation(), children: [_jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: clarityInput.handleDoubleClick, children: "Clarity" }), _jsx(Typography, { sx: {
87
+ ...typography.bodyMedium, // Use your standard typography
88
+ color: colors.surface,
89
+ width: "40px", // Keep the fixed width for alignment
90
+ textAlign: "right", // Keep the text alignment
91
+ }, children: formatValue(props.clarityScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
92
+ position: 'absolute',
93
+ top: "-5px",
94
+ bottom: "-5px",
95
+ // Offset by 16px to align with the slider's track inside the component
96
+ left: 0,
97
+ right: 0,
98
+ zIndex: 1,
99
+ touchAction: 'pan-y', // ✅ 1. Add this to make double-tap reliable on mobile
100
+ userSelect: 'none',
101
+ } }), _jsx(Slider, { sx: {
102
+ width: "100%",
103
+ color: colors.onSurfaceVariant,
104
+ '& .MuiSlider-rail': {
105
+ background: colors.onSurfaceVariant,
106
+ opacity: 1,
45
107
  },
46
- '& .MuiFilledInput-input': {
47
- textAlign: 'right',
48
- padding: 0,
49
- pr: '4px',
50
- color: colors.surface,
51
- fontSize: "14px",
108
+ '& .MuiSlider-thumb': {
109
+ background: colors.surface,
110
+ opacity: 1,
52
111
  },
53
- '& .Mui-focused': {
54
- '& .MuiFilledInput-input': {
55
- backgroundColor: "#1C1B1FB2",
56
- textAlign: 'right',
57
- borderRadius: '5px 5px 0px 0px',
58
- borderBottom: 'none',
59
- pl: '2px',
60
- }
112
+ '& .MuiSlider-thumb:hover': {
113
+ boxShadow: 'none',
114
+ }
115
+ }, slotProps: {
116
+ thumb: {
117
+ ref: clarityRef,
118
+ onDoubleClick: clarityInput.handleDoubleClick
61
119
  }
62
- } })] }), _jsx(Slider, { sx: {
63
- width: "100%",
64
- color: colors.onSurfaceVariant,
65
- '& .MuiSlider-rail': {
66
- background: colors.onSurfaceVariant,
67
- opacity: 1,
68
- },
69
- '& .MuiSlider-thumb': {
70
- background: colors.surface,
71
- opacity: 1,
72
- },
73
- '& .MuiSlider-thumb:hover': {
74
- boxShadow: 'none',
75
- }
76
- }, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue), onDoubleClick: () => props.onClarityChange("clarityScore", 0), onMouseDown: () => {
77
- if (!props.isBatchMode) {
78
- props.onDragStart();
79
- }
80
- }, onMouseUp: () => {
81
- props.onDragEnd();
82
- }, onTouchStart: () => {
83
- if (!props.isBatchMode) {
84
- props.onDragStart();
85
- }
86
- }, onTouchEnd: () => {
87
- props.onDragEnd();
88
- } }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface }, children: "Sharpness" }), _jsx(TextField, { hiddenLabel: true, InputProps: { readOnly: true }, id: "filled-hidden-label-small", value: formatValue(props.sharpnessScore), variant: "filled", onChange: (e) => handleInputChange(e, -100, 100, (val) => props.onSharpnessChange("sharpnessScore", val)), sx: {
89
- width: "40px",
90
- alignItems: "center",
91
- textAlign: "right",
92
- pr: "4px",
93
- display: "flex",
94
- '& .MuiFilledInput-root': {
95
- backgroundColor: 'transparent',
96
- borderRadius: "0px",
97
- border: 'none',
98
- '&:before': {
99
- borderBottom: 'none',
100
- },
101
- '&:after': {
102
- borderBottom: 'none',
103
- },
104
- '&:hover:not(.Mui-disabled):before': {
105
- borderBottom: 'none',
106
- },
107
- '&.Mui-focused:after': {
108
- borderBottom: 'none',
109
- },
120
+ }, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onClarityChange("clarityScore", newValue) })] }), _jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { pt: '10px', pb: '0px' }, children: [_jsx(Typography, { sx: { ...typography.bodyMedium, color: colors.surface, userSelect: 'none' }, onDoubleClick: sharpnessInput.handleDoubleClick, children: "Sharpness" }), _jsx(Typography, { sx: {
121
+ ...typography.bodyMedium, // Use your standard typography
122
+ color: colors.surface,
123
+ width: "40px", // Keep the fixed width for alignment
124
+ textAlign: "right", // Keep the text alignment
125
+ }, children: formatValue(props.sharpnessScore) })] }), _jsxs(Box, { sx: { position: 'relative', width: '100%' }, children: [_jsx("div", { style: {
126
+ position: 'absolute',
127
+ top: "-5px",
128
+ bottom: "-5px",
129
+ // Offset by 16px to align with the slider's track inside the component
130
+ left: 0,
131
+ right: 0,
132
+ zIndex: 1,
133
+ touchAction: 'pan-y', // ✅ 1. Add this to make double-tap reliable on mobile
134
+ userSelect: 'none',
135
+ } }), _jsx(Slider, { sx: {
136
+ width: "100%",
137
+ color: colors.onSurfaceVariant,
138
+ '& .MuiSlider-rail': {
139
+ background: colors.onSurfaceVariant,
140
+ opacity: 1,
110
141
  },
111
- '& .MuiFilledInput-input': {
112
- textAlign: 'right',
113
- padding: 0,
114
- pr: '4px',
115
- color: colors.surface,
116
- fontSize: "14px",
142
+ '& .MuiSlider-thumb': {
143
+ background: colors.surface,
144
+ opacity: 1,
117
145
  },
118
- '& .Mui-focused': {
119
- '& .MuiFilledInput-input': {
120
- backgroundColor: "#1C1B1FB2",
121
- textAlign: 'right',
122
- borderRadius: '5px 5px 0px 0px',
123
- borderBottom: 'none',
124
- pl: '2px',
125
- }
146
+ '& .MuiSlider-thumb:hover': {
147
+ boxShadow: 'none',
148
+ }
149
+ }, slotProps: {
150
+ thumb: {
151
+ ref: sharpnessRef,
152
+ onDoubleClick: sharpnessInput.handleDoubleClick
126
153
  }
127
- } })] }), _jsx(Slider, { sx: {
128
- width: "100%",
129
- color: colors.onSurfaceVariant,
130
- '& .MuiSlider-rail': {
131
- background: colors.onSurfaceVariant,
132
- opacity: 1,
133
- },
134
- '& .MuiSlider-thumb': {
135
- background: colors.surface,
136
- opacity: 1,
137
- },
138
- '& .MuiSlider-thumb:hover': {
139
- boxShadow: 'none',
140
- }
141
- }, size: "small", value: props.sharpnessScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("sharpnessScore", newValue), onDoubleClick: () => props.onSharpnessChange("sharpnessScore", 0), onMouseDown: () => {
142
- if (!props.isBatchMode) {
143
- props.onDragStart();
144
- }
145
- }, onMouseUp: () => {
146
- props.onDragEnd();
147
- }, onTouchStart: () => {
148
- if (!props.isBatchMode) {
149
- props.onDragStart();
150
- }
151
- }, onTouchEnd: () => {
152
- props.onDragEnd();
153
- } })] }) }));
154
+ }, size: "small", value: props.clarityScore, step: 1, min: -100, max: 100, onChange: (_event, newValue) => props.onSharpnessChange("clarityScore", newValue) })] })] }) }));
154
155
  }
package/dist/hooks/editor/useHonchoEditorBulk.js CHANGED
@@ -161,7 +161,6 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
161
161
  const currentAdjustments = useMemo(() => {
162
162
  return getCurrentAdjustmentsForCopy(selectedIds, currentBatch);
163
163
  }, [selectedIds, currentBatch]);
164
- // Calculate active preset based on preset_id from history (not value comparison)
165
164
  const areAdjustmentsEqual = (adj1, adj2) => {
166
165
  // The fix is to use this more specific type for our keys array
167
166
  const keys = [
@@ -177,38 +176,70 @@ export function useHonchoEditorBulk(controller, eventID, firebaseUid) {
177
176
  }
178
177
  return true;
179
178
  };
179
+ // Calculate active preset based on preset_id from history (not value comparison)
180
180
  const { activePreset, presetSummary } = useMemo(() => {
181
181
  if (selectedIds.length === 0) {
182
182
  return { activePreset: null, presetSummary: 'NO_SELECTION' };
183
183
  }
184
- const presetIds = selectedIds.map(id => currentBatch.allImages[id]?.preset_id);
185
- const uniquePresetIds = new Set(presetIds);
186
- // Case 1: All selected images have NO preset.
187
- if (uniquePresetIds.size === 1 && uniquePresetIds.has(undefined)) {
184
+ const imageDetails = selectedIds.map(id => {
185
+ const adjustment = currentBatch.allImages[id];
186
+ const presetId = adjustment?.preset_id || null;
187
+ // Check if preset exists in our presets list
188
+ const matchingPreset = presetId ? presets.find(p => p.id === presetId) : null;
189
+ // Check if the adjustment values actually match the preset values
190
+ let hasValidMatchingPreset = false;
191
+ if (matchingPreset && adjustment) {
192
+ const presetAdjustments = presetToAdjustmentState(matchingPreset);
193
+ hasValidMatchingPreset = areAdjustmentsEqual(adjustment, presetAdjustments);
194
+ }
195
+ return {
196
+ imageId: id,
197
+ presetId,
198
+ matchingPreset,
199
+ hasValidMatchingPreset,
200
+ adjustmentValues: adjustment
201
+ };
202
+ });
203
+ console.log('Debug preset calculation (with custom check):', {
204
+ selectedIds,
205
+ imageDetails: imageDetails.map(detail => ({
206
+ imageId: detail.imageId,
207
+ presetId: detail.presetId,
208
+ presetName: detail.matchingPreset?.name || 'N/A',
209
+ hasValidMatchingPreset: detail.hasValidMatchingPreset,
210
+ isCustomAdjustment: detail.presetId && !detail.hasValidMatchingPreset
211
+ }))
212
+ });
213
+ // Get images that have ACTUALLY matching presets (not just preset IDs)
214
+ const imagesWithValidPresets = imageDetails.filter(detail => detail.hasValidMatchingPreset);
215
+ const validPresetIds = imagesWithValidPresets.map(detail => detail.presetId);
216
+ const uniqueValidPresetIds = new Set(validPresetIds);
217
+ // Case 1: No images have actually matching presets
218
+ // This includes: no preset_id, non-existent preset_id, or preset_id with modified values
219
+ if (imagesWithValidPresets.length === 0) {
220
+ console.log('Case 1: No images have valid matching presets - showing Select');
188
221
  return { activePreset: null, presetSummary: 'NO_SELECTION' };
189
222
  }
190
- // Case 2: A mix of presets, or some with a preset and some without.
191
- if (uniquePresetIds.size > 1) {
192
- return { activePreset: null, presetSummary: 'MULTIPLE_PRESETS' };
193
- }
194
- // Case 3: All have the SAME preset ID. Now we must verify the adjustments.
195
- const singlePresetId = presetIds[0];
196
- if (typeof singlePresetId !== 'string') {
223
+ // Case 2: Some images have valid matching presets, some don't (mixed state)
224
+ if (imagesWithValidPresets.length > 0 && imagesWithValidPresets.length < selectedIds.length) {
225
+ console.log('Case 2: Mixed preset state (some valid, some custom/none) - showing Multiple presets');
197
226
  return { activePreset: null, presetSummary: 'MULTIPLE_PRESETS' };
198
227
  }
199
- const matchingPreset = presets.find(p => p.id === singlePresetId);
200
- if (!matchingPreset) {
228
+ // Case 3: All images have valid matching presets, but different ones
229
+ if (uniqueValidPresetIds.size > 1) {
230
+ console.log('Case 3: Multiple different valid presets - showing Multiple presets');
201
231
  return { activePreset: null, presetSummary: 'MULTIPLE_PRESETS' };
202
232
  }
203
- // THE FINAL VERIFICATION
204
- const firstImageAdjustments = currentBatch.allImages[selectedIds[0]];
205
- const presetAdjustments = presetToAdjustmentState(matchingPreset);
206
- if (firstImageAdjustments && areAdjustmentsEqual(firstImageAdjustments, presetAdjustments)) {
207
- // ID and adjustments match perfectly.
233
+ // Case 4: All images have the same valid matching preset
234
+ const singleValidPresetId = Array.from(uniqueValidPresetIds)[0];
235
+ const matchingPreset = presets.find(p => p.id === singleValidPresetId);
236
+ if (matchingPreset) {
237
+ console.log('Case 4: All images have the same valid matching preset');
208
238
  return { activePreset: matchingPreset, presetSummary: 'SINGLE' };
209
239
  }
210
240
  else {
211
- // This is a custom adjustment! The ID is there but the values don't match.
241
+ // This shouldn't happen given our filtering above, but safety check
242
+ console.log('Case 4 safety check failed - showing Select');
212
243
  return { activePreset: null, presetSummary: 'NO_SELECTION' };
213
244
  }
214
245
  }, [selectedIds, currentBatch.allImages, presets]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yogiswara/honcho-editor-ui",
3
- "version": "3.4.16",
3
+ "version": "3.5.0",
4
4
  "description": "A complete UI component library for the Honcho photo editor.",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",