@arbisoft/react-design-tool 1.0.65 → 1.0.66

package/README.md

@@ -14,14 +14,14 @@ Perfect for integrating into applications that require user-driven visual conten
 
 ### Image tinting at a glance
 - Select any image to reveal **Tint Color**, **Tint Strength (0–100%)**, and **Remove Tint**.
-- Default tint strength is set to **60%** for balanced coloring without hiding details.
+- Default tint strength starts at **0%** so users can dial tint in progressively.
 - Works on-canvas and in exported images (Konva filter-based).
 
 ---
 
 ## 🔔 What’s New
 
-- **Image tinting for photos**: New **Tint Color** and **Tint Strength** controls appear when an image is selected. Default tint is a balanced 60%, adjustable 0–100%, with a one-click **Remove Tint**.
+- **Image tinting for photos**: New **Tint Color** and **Tint Strength** controls appear only when an image is selected. Tint now starts at 0% and is adjustable to 100%, with a one-click **Remove Tint**.
 - **Auto-placement for QR ID**: When enabled, the QR ID text is **automatically positioned above the Location text** (`LOCATION_ELEMENT_ID`).  
   If the Location element doesn’t exist, it’s **centered on the canvas**.
 - **Persistent QR ID across template switches**: If the QR ID was visible before switching templates, it stays visible and **reflows** for the new template.
@@ -64,13 +64,13 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.64
+npm install @arbisoft/react-design-tool@1.0.66
 ```
 
 OR
 
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.64
+yarn add @arbisoft/react-design-tool@1.0.66
 
 ```
 

package/dist/cjs/index.js

@@ -3792,6 +3792,7 @@ var ImageToolBar = function ImageToolBar(_ref) {
     onClearImageTint = _ref.onClearImageTint,
     selectedElement = _ref.selectedElement,
     languageLocale = _ref.languageLocale;
+  var isSelectedImage = isElementOfSameType(selectedElement, elementTypes.image);
   return /*#__PURE__*/React.createElement(RowContainer$2, null, /*#__PURE__*/React.createElement(StrokePicker, {
     value: isElementOfSameType(selectedElement, elementTypes.image) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.strokeWidth : imageStrokeWidth,
     onChangeStrokeWidth: onChangeImageStrokeWidth,
@@ -3803,19 +3804,19 @@ var ImageToolBar = function ImageToolBar(_ref) {
     value: isElementOfSameType(selectedElement, elementTypes.image) ? selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.opacity : imageOpacity,
     onChangeOpacity: onChangeImageOpacity,
     languageLocale: languageLocale
-  }), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
+  }), isSelectedImage && /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
     gap: 8,
     tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang2 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang2 === void 0 ? void 0 : _TEXT_DICTIONARY$lang2.MONOCHROME_COLOR,
     tooltipPosition: 'bottom'
   }, /*#__PURE__*/React.createElement(StyledText, {
     fontFamily: theme.fonts.secondary
   }, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang3 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang3 === void 0 ? void 0 : _TEXT_DICTIONARY$lang3.MONOCHROME_COLOR), /*#__PURE__*/React.createElement(ColorBox, {
-    backgroundColor: isElementOfSameType(selectedElement, elementTypes.image) ? (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintColor) || imageTintColor : imageTintColor,
+    backgroundColor: (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintColor) || imageTintColor,
     onChange: onChangeImageTintColor
-  })), /*#__PURE__*/React.createElement(OpacityPicker, {
+  })), isSelectedImage && /*#__PURE__*/React.createElement(OpacityPicker, {
     tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang4 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang4 === void 0 ? void 0 : _TEXT_DICTIONARY$lang4.MONOCHROME_STRENGTH,
     tooltipPosition: 'bottom',
-    value: isElementOfSameType(selectedElement, elementTypes.image) ? (_selectedElement$tint = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintStrength) !== null && _selectedElement$tint !== void 0 ? _selectedElement$tint : imageTintStrength : imageTintStrength,
+    value: (_selectedElement$tint = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintStrength) !== null && _selectedElement$tint !== void 0 ? _selectedElement$tint : imageTintStrength,
     min: 0,
     max: 1,
     step: 0.05,
@@ -3823,12 +3824,12 @@ var ImageToolBar = function ImageToolBar(_ref) {
     leftChild: /*#__PURE__*/React.createElement(StyledText, {
       fontFamily: theme.fonts.secondary
     }, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang5 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang5 === void 0 ? void 0 : _TEXT_DICTIONARY$lang5.TINT_SHORT)
-  }), /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
+  }), isSelectedImage && /*#__PURE__*/React.createElement(ToolBarButtonWrapper, {
     gap: 8,
     tooltip: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.CLEAR_MONOCHROME,
     tooltipPosition: 'bottom',
     onClick: onClearImageTint,
-    disabled: isElementOfSameType(selectedElement, elementTypes.image) ? ((_selectedElement$tint2 = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintStrength) !== null && _selectedElement$tint2 !== void 0 ? _selectedElement$tint2 : 0) <= 0 : imageTintStrength <= 0
+    disabled: ((_selectedElement$tint2 = selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.tintStrength) !== null && _selectedElement$tint2 !== void 0 ? _selectedElement$tint2 : 0) <= 0
   }, /*#__PURE__*/React.createElement(StyledText, {
     fontFamily: theme.fonts.secondary
   }, TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.CLEAR_MONOCHROME)));
@@ -6777,7 +6778,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState40 = _slicedToArray(_useState39, 2),
     imageTintColor = _useState40[0],
     setImageTintColor = _useState40[1];
-  var _useState41 = React.useState(0.6),
+  var _useState41 = React.useState(0),
     _useState42 = _slicedToArray(_useState41, 2),
     imageTintStrength = _useState42[0],
     setImageTintStrength = _useState42[1];