@solostylist/image-editor 1.0.13 → 1.0.15

package/lib/components/tools-bar/index.js

@@ -1,11 +1,12 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { SFlexBox } from '@solostylist/ui-kit/core';
+import { cloneElement, isValidElement, useCallback, useEffect, useMemo } from 'react';
+import { SAiToolBar, SFlexBox } from '@solostylist/ui-kit';
 import { SELECT_TOOL } from "../../actions";
 import { TABS_TOOLS, TOOLS_ITEMS } from "../tools/tools.constants";
-import { useStore } from "../../hooks";
+import { useImageEditorActions, useStore } from "../../hooks";
 import { TABS_IDS } from "../../utils/constants";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 var ToolsBar = function ToolsBar() {
+  var _ref;
   var _useStore = useStore(),
     t = _useStore.t,
     dispatch = _useStore.dispatch,
@@ -16,10 +17,15 @@ var ToolsBar = function ToolsBar() {
     selectionsIds = _useStore$selectionsI === void 0 ? [] : _useStore$selectionsI,
     _useStore$config = _useStore.config,
     defaultTabId = _useStore$config.defaultTabId,
-    defaultToolId = _useStore$config.defaultToolId;
+    defaultToolId = _useStore$config.defaultToolId,
+    renderFloatingToolbar = _useStore$config.renderFloatingToolbar,
+    toolBarNode = _useStore$config.toolBarNode,
+    language = _useStore$config.language;
+  var _useImageEditorAction = useImageEditorActions(),
+    saveImage = _useImageEditorAction.saveImage;
   var currentTabId = tabId || defaultTabId;
   var tabToolsForCurrentTab = currentTabId ? TABS_TOOLS[currentTabId] : undefined;
-  var currentToolId = toolId || defaultToolId || (tabToolsForCurrentTab === null || tabToolsForCurrentTab === void 0 ? void 0 : tabToolsForCurrentTab[0]);
+  var currentToolId = (_ref = toolId !== null && toolId !== void 0 ? toolId : defaultToolId) !== null && _ref !== void 0 ? _ref : tabToolsForCurrentTab === null || tabToolsForCurrentTab === void 0 ? void 0 : tabToolsForCurrentTab[0];
   var tabTools = useMemo(function () {
     var _TABS_TOOLS$currentTa;
     return currentTabId ? (_TABS_TOOLS$currentTa = TABS_TOOLS[currentTabId]) !== null && _TABS_TOOLS$currentTa !== void 0 ? _TABS_TOOLS$currentTa : [] : [];
@@ -76,6 +82,10 @@ var ToolsBar = function ToolsBar() {
     return OptionsComponent ? _jsx(SFlexBox, {
       gap: 1,
       justifyContent: "center",
+      sx: {
+        width: '100%',
+        minWidth: 0
+      },
       children: _jsx(OptionsComponent, {
         t: t
       })
@@ -91,26 +101,41 @@ var ToolsBar = function ToolsBar() {
       });
     }
   }, []);
-  return _jsxs(SFlexBox, {
-    height: 120,
-    width: "100%",
+  var toolButtons = _jsx(SFlexBox, {
     gap: 1,
-    flexDirection: "column",
     alignItems: "center",
-    sx: {
-      p: 1,
-      zIndex: 10,
-      overflow: 'visible'
-    },
-    children: [toolOptionsElement, _jsx(SFlexBox, {
+    justifyContent: "center",
+    children: items
+  });
+  if (toolBarNode && isValidElement(toolBarNode)) {
+    return _jsx(_Fragment, {
+      children: cloneElement(toolBarNode, {
+        customActionButtons: toolButtons,
+        centerContent: toolOptionsElement
+      })
+    });
+  }
+  if (renderFloatingToolbar) {
+    return _jsx(_Fragment, {
+      children: renderFloatingToolbar({
+        toolButtons: toolButtons,
+        toolOptions: toolOptionsElement,
+        t: t,
+        language: language,
+        onDownload: saveImage
+      })
+    });
+  }
+  return _jsx(SAiToolBar, {
+    hideProcessButton: true,
+    onDownload: saveImage,
+    customActionButtons: _jsxs(SFlexBox, {
       gap: 1,
-      alignItems: "flex-end",
+      alignItems: "center",
       justifyContent: "center",
-      flexWrap: "wrap",
-      height: "100%",
-      width: "100%",
-      children: items
-    })]
+      flexDirection: "column",
+      children: [toolButtons, toolOptionsElement]
+    })
   });
 };
 export default ToolsBar;

package/lib/components/tools-bar/tools-bar-item-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tools-bar-item-button.d.ts","sourceRoot":"","sources":["../../../src/components/tools-bar/tools-bar-item-button.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAK1E,UAAU,2BAA2B;IACnC,IAAI,CAAC,EAAE;QACL,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;KACrB,CAAC;CACH;AAED,UAAU,uBAAuB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,oBAAoB,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,GAAG;QAC1D,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;wIAWE,uBAAuB;AAiC1B,wBAAwC"}
+{"version":3,"file":"tools-bar-item-button.d.ts","sourceRoot":"","sources":["../../../src/components/tools-bar/tools-bar-item-button.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAK1E,UAAU,2BAA2B;IACnC,IAAI,CAAC,EAAE;QACL,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;KACrB,CAAC;CACH;AAED,UAAU,uBAAuB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,EAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,oBAAoB,CAAC,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,GAAG;QAC1D,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,2BAA2B,CAAC;CACzC;wIAWE,uBAAuB;AAuC1B,wBAAwC"}

package/lib/components/tools-bar/tools-bar-item-button.js

@@ -1,10 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import Typography from '@mui/material/Typography';
-import { SButton } from '@solostylist/ui-kit/core';
+import { SButton } from '@solostylist/ui-kit';
 import { memo } from 'react';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var ToolsBarItemButton = function ToolsBarItemButton(_ref) {
-  var _slotProps$icon, _slotProps$icon2;
+  var _slotProps$icon;
   var id = _ref.id,
     _ref$label = _ref.label,
     label = _ref$label === void 0 ? '' : _ref$label,
@@ -19,9 +19,11 @@ var ToolsBarItemButton = function ToolsBarItemButton(_ref) {
   var handleClick = function handleClick(e) {
     onClick(id, e);
   };
+  var iconSlotSx = slotProps === null || slotProps === void 0 || (_slotProps$icon = slotProps.icon) === null || _slotProps$icon === void 0 ? void 0 : _slotProps$icon.sx;
+  var extraIconSxArray = Array.isArray(iconSlotSx) ? iconSlotSx : iconSlotSx ? [iconSlotSx] : [];
   var iconSx = [{
     color: isSelected ? 'primary.main' : 'text.primary'
-  }].concat(_toConsumableArray(Array.isArray(slotProps === null || slotProps === void 0 || (_slotProps$icon = slotProps.icon) === null || _slotProps$icon === void 0 ? void 0 : _slotProps$icon.sx) ? slotProps.icon.sx : slotProps !== null && slotProps !== void 0 && (_slotProps$icon2 = slotProps.icon) !== null && _slotProps$icon2 !== void 0 && _slotProps$icon2.sx ? [slotProps.icon.sx] : []));
+  }].concat(_toConsumableArray(extraIconSxArray));
   return _jsxs(SButton, {
     startIcon: _jsx(Icon, {
       sx: iconSx
@@ -35,6 +37,9 @@ var ToolsBarItemButton = function ToolsBarItemButton(_ref) {
     },
     children: [label && _jsx(Typography, {
       color: isSelected ? 'primary.main' : 'text.primary',
+      sx: {
+        textWrap: 'nowrap'
+      },
       children: label
     }), children]
   });

package/lib/components/topbar/canvas-zooming.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"canvas-zooming.d.ts","sourceRoot":"","sources":["../../../src/components/topbar/canvas-zooming.tsx"],"names":[],"mappings":"AAmBA,QAAA,MAAM,aAAa,+CAqIlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"canvas-zooming.d.ts","sourceRoot":"","sources":["../../../src/components/topbar/canvas-zooming.tsx"],"names":[],"mappings":"AAmBA,QAAA,MAAM,aAAa,+CAwIlB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/components/topbar/canvas-zooming.js

@@ -5,7 +5,7 @@ import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useState } from 'react';
 import { Typography } from '@mui/material';
-import { SFlexBox, SIconButton } from '@solostylist/ui-kit/core';
+import { SFlexBox, SIconButton } from '@solostylist/ui-kit';
 import { ZOOM_CANVAS } from "../../actions";
 import { useStore } from "../../hooks";
 import { DEFAULT_ZOOM_FACTOR, TOOLS_IDS } from "../../utils/constants";
@@ -47,7 +47,7 @@ var CanvasZooming = function CanvasZooming() {
   var fitCanvas = function fitCanvas() {
     var usedAsOrgDimens = resize.width && resize.height && resize || crop.width && crop.height && crop || shownImageDimensions;
     var fitCanvasFactor = getZoomFitFactor(crop.width && crop.height && crop || shownImageDimensions, usedAsOrgDimens);
-    saveZoom(fitCanvasFactor || DEFAULT_ZOOM_FACTOR, true);
+    saveZoom(fitCanvasFactor !== null && fitCanvasFactor !== void 0 ? fitCanvasFactor : DEFAULT_ZOOM_FACTOR, true);
   };
   var zoomOut = function zoomOut() {
     saveZoom(zoom.factor / MULTIPLY_ZOOM_FACTOR);
@@ -61,12 +61,12 @@ var CanvasZooming = function CanvasZooming() {
       toggleZoomingMenu();
       return;
     }
-    var factorToAchieveSelected = resize.width || resize.height ? factor : Math.min(factor * originalImage.width / shownImageDimensions.width, factor * originalImage.height / shownImageDimensions.height);
+    var factorToAchieveSelected = resize.width || resize.height ? factor : Math.min(factor * ((originalImage === null || originalImage === void 0 ? void 0 : originalImage.width) || 0) / shownImageDimensions.width, factor * ((originalImage === null || originalImage === void 0 ? void 0 : originalImage.height) || 0) / shownImageDimensions.height);
     saveZoom(factorToAchieveSelected, true);
     toggleZoomingMenu();
   };
   var isZoomDisabled = toolId === TOOLS_IDS.CROP || isBlockerError;
-  var previewToRealImgFactor = originalImage && !resize.width && !resize.height ? Math.min(shownImageDimensions.width * zoom.factor / originalImage.width, shownImageDimensions.height * zoom.factor / originalImage.height) : zoom.factor;
+  var previewToRealImgFactor = originalImage && !resize.width && !resize.height ? Math.min(shownImageDimensions.width * zoom.factor / ((originalImage === null || originalImage === void 0 ? void 0 : originalImage.width) || 1), shownImageDimensions.height * zoom.factor / ((originalImage === null || originalImage === void 0 ? void 0 : originalImage.height) || 1)) : zoom.factor;
   return _jsxs(SFlexBox, {
     sx: {
       alignItems: 'center',
@@ -119,7 +119,7 @@ var CanvasZooming = function CanvasZooming() {
           children: _jsx(ListItemText, {
             children: label !== null && label !== void 0 ? label : t(labelKey)
           })
-        }, label || labelKey);
+        }, label !== null && label !== void 0 ? label : labelKey);
       })
     })]
   });

package/lib/components/topbar/confirmation-modal.js

@@ -1,4 +1,4 @@
-import { SButton, SDialog, useDialog } from '@solostylist/ui-kit/core';
+import { SButton, SDialog, useDialog } from '@solostylist/ui-kit';
 import { cloneElement, useCallback } from 'react';
 import { RESET } from "../../actions";
 import { useStore } from "../../hooks";
@@ -25,7 +25,7 @@ var ConfirmationModal = function ConfirmationModal(_ref) {
       }
     });
     dialog.handleClose();
-  }, [config]);
+  }, [config, dispatch, dialog]);
   if (typeof onClose !== 'function' && !isReset) {
     return _jsx("span", {});
   }

package/lib/components/topbar/image-dimensions-and-display-toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image-dimensions-and-display-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/topbar/image-dimensions-and-display-toggle.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,+BAA+B,sDA2EpC,CAAC;AAEF,eAAe,+BAA+B,CAAC"}
+{"version":3,"file":"image-dimensions-and-display-toggle.d.ts","sourceRoot":"","sources":["../../../src/components/topbar/image-dimensions-and-display-toggle.tsx"],"names":[],"mappings":"AAWA,QAAA,MAAM,+BAA+B,sDA6EpC,CAAC;AAEF,eAAe,+BAA+B,CAAC"}

package/lib/components/topbar/image-dimensions-and-display-toggle.js

@@ -1,6 +1,6 @@
 import Compare from '@mui/icons-material/Compare';
 import { Typography } from '@mui/material';
-import { SFlexBox, SIconButton } from '@solostylist/ui-kit/core';
+import { SFlexBox, SIconButton } from '@solostylist/ui-kit';
 import { TOGGLE_ORIGINAL_IMAGE_DISPLAY } from "../../actions";
 import { useStore } from "../../hooks";
 import getProperDimensions from "../../utils/get-proper-dimensions";
@@ -53,12 +53,11 @@ var ImageDimensionsAndDisplayToggle = function ImageDimensionsAndDisplayToggle()
     sx: {
       gap: 1,
       alignItems: 'center',
-      order: 2
+      order: 2,
+      borderLeft: '1px solid',
+      borderColor: 'divider'
     },
-    children: [_jsx(Typography, {
-      title: t('imageDimensionsHoverTitle'),
-      children: "".concat(dimensions.width, " x ").concat(dimensions.height, " px")
-    }), _jsx(SIconButton, {
+    children: [_jsx(SIconButton, {
       onMouseDown: isResetted ? undefined : showOriginalImage,
       onTouchStart: isResetted ? undefined : showOriginalImage,
       disabled: isResetted,
@@ -66,6 +65,9 @@ var ImageDimensionsAndDisplayToggle = function ImageDimensionsAndDisplayToggle()
         title: t('showImageTitle')
       },
       children: _jsx(Compare, {})
+    }), _jsx(Typography, {
+      title: t('imageDimensionsHoverTitle'),
+      children: "".concat(dimensions.width, " x ").concat(dimensions.height, " px")
     }), !disableZooming && _jsx(CanvasZooming, {})]
   });
 };

package/lib/components/topbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/topbar/index.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAW5B,UAAU,WAAW;IACnB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,MAAM,GAAI,oBAA+B,WAAW,4CAgDzD,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/topbar/index.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAU5B,UAAU,WAAW;IACnB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,MAAM,GAAI,oBAA+B,WAAW,4CAoDzD,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/topbar/index.js

@@ -1,31 +1,41 @@
 import { Menu } from '@mui/icons-material';
-import { SFlexBox, SIconButton } from '@solostylist/ui-kit/core';
+import { SFlexBox, SIconButton } from '@solostylist/ui-kit';
 import ImageDimensionsAndDisplayToggle from "./image-dimensions-and-display-toggle";
 import RedoButton from "./redo-button";
-import ResetButton from "./reset-button";
-import SaveButton from "./save-button";
 import UndoButton from "./undo-button";
+import ResetButton from "./reset-button";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var Topbar = function Topbar(_ref) {
   var _ref$toggleMainMenu = _ref.toggleMainMenu,
     toggleMainMenu = _ref$toggleMainMenu === void 0 ? function () {} : _ref$toggleMainMenu;
-  return _jsxs(SFlexBox, {
+  return _jsx(SFlexBox, {
     sx: {
-      padding: 1,
-      width: '100%',
-      gap: 1,
+      width: 'calc(100% - var(--s-image-editor-tabs-width, 0px))',
+      justifyContent: 'center',
       alignItems: 'center',
-      justifyContent: 'space-between',
-      borderBottom: '1px solid',
-      borderColor: 'divider',
-      height: 60,
-      minHeight: 60
+      paddingY: 1.5,
+      position: 'absolute',
+      top: 0,
+      left: 'var(--s-image-editor-tabs-width, 0px)',
+      right: 0,
+      maxWidth: '100%',
+      zIndex: 30,
+      backgroundColor: 'transparent',
+      pointerEvents: 'none',
+      transition: 'left 0.3s ease, width 0.3s ease'
     },
-    children: [_jsxs(SFlexBox, {
+    children: _jsxs(SFlexBox, {
       sx: {
+        width: 'fit-content',
         alignItems: 'center',
-        order: 1,
-        gap: 1
+        gap: 1.5,
+        paddingX: 0.5,
+        paddingY: 0.75,
+        borderRadius: 1,
+        backgroundColor: 'background.paper',
+        boxShadow: 1,
+        transition: 'box-shadow 0.3s ease',
+        pointerEvents: 'auto'
       },
       children: [_jsx(SIconButton, {
         onClick: function onClick() {
@@ -38,15 +48,14 @@ var Topbar = function Topbar(_ref) {
           }
         },
         children: _jsx(Menu, {})
-      }), _jsx(SaveButton, {})]
-    }), _jsx(ImageDimensionsAndDisplayToggle, {}), _jsxs(SFlexBox, {
-      sx: {
-        alignItems: 'center',
-        order: 3,
-        gap: 1
-      },
-      children: [_jsx(ResetButton, {}), _jsx(UndoButton, {}), _jsx(RedoButton, {})]
-    })]
+      }), _jsxs(SFlexBox, {
+        sx: {
+          alignItems: 'center',
+          gap: 1
+        },
+        children: [_jsx(ResetButton, {}), _jsx(UndoButton, {}), _jsx(RedoButton, {})]
+      }), _jsx(ImageDimensionsAndDisplayToggle, {})]
+    })
   });
 };
 export default Topbar;

package/lib/components/topbar/redo-button.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import RedoIcon from '@mui/icons-material/Redo';
-import { SIconButton } from '@solostylist/ui-kit/core';
+import { SIconButton } from '@solostylist/ui-kit';
 import { REDO } from "../../actions";
 import { useStore } from "../../hooks";
 import { jsx as _jsx } from "react/jsx-runtime";

package/lib/components/topbar/reset-button.js

@@ -1,5 +1,5 @@
 import ResetIcon from '@mui/icons-material/Refresh';
-import { SIconButton } from '@solostylist/ui-kit/core';
+import { SIconButton } from '@solostylist/ui-kit';
 import { useStore } from "../../hooks";
 import ConfirmationModal from "./confirmation-modal";
 import { jsx as _jsx } from "react/jsx-runtime";

package/lib/components/topbar/save-button.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { SButton, SDialog, SFlexBox, SSelect, STextField, useDialog } from '@solostylist/ui-kit/core';
+import { SButton, SDialog, SFlexBox, SSelect, STextField, useDialog } from '@solostylist/ui-kit';
 import { useEffect, useRef, useState } from 'react';
 import { SET_FEEDBACK, SET_SAVING } from "../../actions";
 import Slider from "../common/slider";
@@ -16,6 +16,7 @@ import restrictNumber from "../../utils/restrict-number";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 var isFieSaveMounted = true;
 var SaveButton = function SaveButton() {
+  var _imageFileInfo$extens, _imageFileInfo$size;
   var state = useStore();
   var optionSaveFnRef = useRef(null);
   var dispatch = state.dispatch,
@@ -49,7 +50,7 @@ var SaveButton = function SaveButton() {
     imageFileInfo = _useState2[0],
     setImageFileInfo = _useState2[1];
   var transformImgFn = useTransformedImgData();
-  var isQualityAcceptable = ['jpeg', 'jpg', 'webp'].includes(imageFileInfo.extension);
+  var isQualityAcceptable = ['jpeg', 'jpg', 'webp'].includes((_imageFileInfo$extens = imageFileInfo.extension) !== null && _imageFileInfo$extens !== void 0 ? _imageFileInfo$extens : '');
   var isBlockerError = feedback.duration === 0;
   var cancelModal = function cancelModal() {
     if (isFieSaveMounted && dialog.open) {
@@ -58,8 +59,9 @@ var SaveButton = function SaveButton() {
     }
   };
   var handleSave = function handleSave() {
+    var _optionSaveFnRef$curr;
     var transformedData = transformImgFn(imageFileInfo, false, true);
-    var onSaveFn = optionSaveFnRef.current || onSave;
+    var onSaveFn = (_optionSaveFnRef$curr = optionSaveFnRef.current) !== null && _optionSaveFnRef$curr !== void 0 ? _optionSaveFnRef$curr : onSave;
     var savingResult = onSaveFn(transformedData.imageData, transformedData.designState);
     var finalizeSaving = function finalizeSaving() {
       dispatch({
@@ -90,7 +92,8 @@ var SaveButton = function SaveButton() {
     setTimeout(handleSave, 3);
   };
   var validateInfoThenSave = function validateInfoThenSave() {
-    var onSaveFn = optionSaveFnRef.current || onSave;
+    var _optionSaveFnRef$curr2;
+    var onSaveFn = (_optionSaveFnRef$curr2 = optionSaveFnRef.current) !== null && _optionSaveFnRef$curr2 !== void 0 ? _optionSaveFnRef$curr2 : onSave;
     if (typeof onSaveFn !== 'function') {
       throw new Error('Please provide onSave function handler.');
     }
@@ -134,7 +137,7 @@ var SaveButton = function SaveButton() {
     }));
   };
   var getFileNameAndExtension = function getFileNameAndExtension() {
-    return getFileFullName(defaultSavedImageName || originalImage.name, forceToPngInEllipticalCrop && (crop === null || crop === void 0 ? void 0 : crop.ratio) === ELLIPSE_CROP ? 'png' : SUPPORTED_IMAGE_TYPES.includes(defaultSavedImageType === null || defaultSavedImageType === void 0 ? void 0 : defaultSavedImageType.toLowerCase()) && defaultSavedImageType || undefined);
+    return getFileFullName(defaultSavedImageName !== null && defaultSavedImageName !== void 0 ? defaultSavedImageName : originalImage === null || originalImage === void 0 ? void 0 : originalImage.title, forceToPngInEllipticalCrop && (crop === null || crop === void 0 ? void 0 : crop.ratio) === ELLIPSE_CROP ? 'png' : SUPPORTED_IMAGE_TYPES.includes(defaultSavedImageType === null || defaultSavedImageType === void 0 ? void 0 : defaultSavedImageType.toLowerCase()) && defaultSavedImageType || undefined);
   };
   var _useState3 = useState(originalImage),
     _useState4 = _slicedToArray(_useState3, 2),
@@ -238,7 +241,7 @@ var SaveButton = function SaveButton() {
           width: "100%"
         }), _jsx(Resize, {
           onChange: resizeImageFile,
-          currentSize: (imageFileInfo === null || imageFileInfo === void 0 ? void 0 : imageFileInfo.size) || {},
+          currentSize: (_imageFileInfo$size = imageFileInfo === null || imageFileInfo === void 0 ? void 0 : imageFileInfo.size) !== null && _imageFileInfo$size !== void 0 ? _imageFileInfo$size : {},
           hideResetButton: true
         })]
       }),

package/lib/components/topbar/topbar-action-buttons.d.ts

@@ -0,0 +1,3 @@
+declare const DownloadButton: () => import("react/jsx-runtime").JSX.Element;
+export default DownloadButton;
+//# sourceMappingURL=topbar-action-buttons.d.ts.map

package/lib/components/topbar/topbar-action-buttons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"topbar-action-buttons.d.ts","sourceRoot":"","sources":["../../../src/components/topbar/topbar-action-buttons.tsx"],"names":[],"mappings":"AAOA,QAAA,MAAM,cAAc,+CAoBnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/components/topbar/topbar-action-buttons.js

@@ -0,0 +1,27 @@
+import { Download } from '@mui/icons-material';
+import { SIconButton } from '@solostylist/ui-kit';
+import { useImageEditorActions, useStore } from "../../hooks";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DownloadButton = function DownloadButton() {
+  var _useImageEditorAction = useImageEditorActions(),
+    saveImage = _useImageEditorAction.saveImage;
+  var _useStore = useStore(),
+    isLoadingGlobally = _useStore.isLoadingGlobally,
+    haveNotSavedChanges = _useStore.haveNotSavedChanges,
+    feedback = _useStore.feedback,
+    config = _useStore.config,
+    t = _useStore.t;
+  var isBlockerError = (feedback === null || feedback === void 0 ? void 0 : feedback.duration) === 0;
+  var disableSaveIfNoChanges = config === null || config === void 0 ? void 0 : config.disableSaveIfNoChanges;
+  return _jsx(SIconButton, {
+    onClick: function onClick() {
+      return saveImage();
+    },
+    disabled: isLoadingGlobally || disableSaveIfNoChanges && !haveNotSavedChanges || isBlockerError,
+    tooltipOptions: {
+      title: t('download')
+    },
+    children: _jsx(Download, {})
+  });
+};
+export default DownloadButton;

package/lib/components/topbar/undo-button.js

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
 import UndoIcon from '@mui/icons-material/Undo';
-import { SIconButton } from '@solostylist/ui-kit/core';
+import { SIconButton } from '@solostylist/ui-kit';
 import { UNDO } from "../../actions";
 import { useStore } from "../../hooks";
 import { jsx as _jsx } from "react/jsx-runtime";

package/lib/context/app-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-provider.d.ts","sourceRoot":"","sources":["../../src/context/app-provider.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAAmC,SAAS,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAQtD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2C3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"app-provider.d.ts","sourceRoot":"","sources":["../../src/context/app-provider.tsx"],"names":[],"mappings":"AAAA,4BAA4B;AAC5B,OAAO,EAAmC,SAAS,EAAE,MAAM,OAAO,CAAC;AAMnE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAQtD,UAAU,gBAAgB;IACxB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;CACrC;AAED,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiD3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/context/app-provider.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { useAppReducer } from "../hooks";
-import { translate, updateTranslations } from "../utils/translator";
+import { updateTranslations } from "../utils/translator";
 import appReducer from "./app-reducer";
 import AppContext from "./app-context";
 import getInitialAppState from "./get-initial-app-state";
@@ -30,18 +30,20 @@ var AppProvider = function AppProvider(_ref) {
       _dispatch(action);
     }
   }, [_dispatch]);
-  useEffect(function () {
-    updateTranslations(config.translations, config.language);
-  }, [config.language, config.translations]);
+  var resolvedTranslations = useMemo(function () {
+    return updateTranslations(config.translations, config.language, config.supportedLanguages);
+  }, [config.language, config.supportedLanguages, config.translations]);
   var theme = useTheme();
   var providedValue = useMemo(function () {
     return _objectSpread(_objectSpread({}, state), {}, {
       config: config,
       theme: theme,
       dispatch: dispatch,
-      t: translate
+      t: function t(key) {
+        return resolvedTranslations[key] || key || '';
+      }
     });
-  }, [config, state]);
+  }, [config, dispatch, resolvedTranslations, state, theme]);
   return _jsx(AppContext.Provider, {
     value: providedValue,
     children: children

package/lib/context/app-reducer.js

@@ -1,5 +1,6 @@
 import actions from "../actions";
 var appReducer = function appReducer(state, action) {
-  return actions[action.type] ? actions[action.type](state, action.payload) || state : state;
+  var _actions$action$type;
+  return actions[action.type] ? (_actions$action$type = actions[action.type](state, action.payload)) !== null && _actions$action$type !== void 0 ? _actions$action$type : state : state;
 };
 export default appReducer;

package/lib/context/default-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-config.d.ts","sourceRoot":"","sources":["../../src/context/default-config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,QAAA,MAAM,aAAa,EA4GH,iBAAiB,CAAC;AAElC,eAAe,aAAa,CAAC"}
+{"version":3,"file":"default-config.d.ts","sourceRoot":"","sources":["../../src/context/default-config.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEtD,QAAA,MAAM,aAAa,EAyHH,iBAAiB,CAAC;AAElC,eAAe,aAAa,CAAC"}

package/lib/context/default-config.js

@@ -71,5 +71,5 @@ var defaultConfig = (_defaultConfig = {
 }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultConfig, TOOLS_IDS.ROTATE, {
   angle: 60,
   componentType: 'slider'
-}), "tabsIds", []), "defaultTabId", TABS_IDS.ADJUST), "defaultToolId", TOOLS_IDS.CROP), "onSave", undefined), "onBeforeSave", undefined), "closeAfterSave", false), "defaultSavedImageName", undefined), "defaultSavedImageType", null), "defaultSavedImageQuality", 0.92), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultConfig, "forceToPngInEllipticalCrop", false), "translations", null), "language", 'en'), "avoidChangesNotSavedAlertOnLeave", false), "loadableDesignState", null), "savingPixelRatio", 4), "previewPixelRatio", window ? window.devicePixelRatio || 1 : 1), "observePluginContainerSize", false), "showCanvasOnly", false), "getCurrentImgDataFnRef", undefined), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultConfig, "onModify", undefined), "useZoomPresetsMenu", true), "disableZooming", false), "noCrossOrigin", false), "disableSaveIfNoChanges", false), "removeSaveButton", false), "resetOnImageSourceChange", false), "backgroundColor", undefined), "backgroundImage", undefined));
+}), "tabsIds", []), "defaultTabId", TABS_IDS.ADJUST), "defaultToolId", TOOLS_IDS.CROP), "onSave", undefined), "onBeforeSave", undefined), "closeAfterSave", false), "defaultSavedImageName", undefined), "savedImageNamePrefix", 'solostylist_image_editor'), "defaultSavedImageType", null), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultConfig, "defaultSavedImageQuality", 0.92), "forceToPngInEllipticalCrop", false), "translations", null), "language", 'en'), "supportedLanguages", ['en', 'vi', 'zh', 'fr']), "avoidChangesNotSavedAlertOnLeave", false), "loadableDesignState", null), "savingPixelRatio", 4), "previewPixelRatio", window ? window.devicePixelRatio || 1 : 1), "observePluginContainerSize", false), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultConfig, "showCanvasOnly", false), "getCurrentImgDataFnRef", undefined), "onModify", undefined), "useZoomPresetsMenu", true), "disableZooming", false), "noCrossOrigin", false), "disableSaveIfNoChanges", false), "removeSaveButton", false), "resetOnImageSourceChange", false), "backgroundColor", undefined), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defaultConfig, "backgroundImage", undefined), "containerHeight", undefined), "editorHeight", undefined), "toolbarHeight", undefined), "rootSx", undefined), "rootClassName", undefined), "canvasAreaHeight", undefined), "canvasBackground", undefined), "renderFloatingToolbar", undefined), "showCanvasCenter", false), _defineProperty(_defineProperty(_defaultConfig, "cropTopOffset", 20), "renderEmptyState", undefined));
 export default defaultConfig;

package/lib/context/default-translations.d.ts

@@ -1,3 +1,4 @@
+export declare const translationsByLanguage: Record<string, Record<string, string>>;
 declare const defaultTranslations: Record<string, string>;
 export default defaultTranslations;
 //# sourceMappingURL=default-translations.d.ts.map

package/lib/context/default-translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../src/context/default-translations.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAoH/C,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../src/context/default-translations.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAwdzE,CAAC;AAEF,QAAA,MAAM,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAE/C,CAAC;AAEF,eAAe,mBAAmB,CAAC"}