@arbisoft/react-design-tool 1.0.67 → 1.0.69

package/README.md

@@ -21,6 +21,10 @@ Perfect for integrating into applications that require user-driven visual conten
 
 ## 🔔 What’s New
 
+- **Configurable template order in sidebar**: You can now control whether **Default** or **Custom Templates** appear first using `templatesDisplayOrder` (`'defaultFirst' | 'customFirst'`).
+- **Custom-template delete UX update**: The delete action for custom templates has been moved to a **top-right hover overlay** with a confirmation prompt to reduce accidental deletes.
+- **Lighter out-of-bounds preview mask**: The outside-canvas preview area is now less visually heavy and can be configured with `showOutsideBoundaryPreview` and `outsideBoundaryPreviewPadding`.
+- **Backspace no longer triggers browser back navigation**: When an element is selected and the user is not typing in an input/textarea/contenteditable field, pressing **Backspace/Delete** now removes the selected element instead.
 - **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**.
@@ -64,13 +68,13 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.66
+npm install @arbisoft/react-design-tool@1.0.69
 ```
 
 OR
 
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.66
+yarn add @arbisoft/react-design-tool@1.0.69
 
 ```
 
@@ -154,6 +158,19 @@ customTemplatesList={[
 ]}
 ```
 
+#### `templatesDisplayOrder` (String)
+
+Controls the display order of template groups in the sidebar.
+
+- `'defaultFirst'` (default): **Default** templates first, then **Custom Templates**
+- `'customFirst'`: **Custom Templates** first, then **Default**
+
+**Example:**
+
+```jsx
+<Studio templatesDisplayOrder="customFirst" />
+```
+
 #### 3. `defaultImages` (Array of URLs)
 
 System-provided stock images.
@@ -446,6 +463,26 @@ Used to set configure allowed images formats for our gallert
 <Studio allowedFormats={['png', 'jpg']} />
 ```
 
+#### `showOutsideBoundaryPreview` (Boolean)
+
+Enables a padded outside-canvas preview area around the page.
+
+**Example:**
+
+```jsx
+<Studio showOutsideBoundaryPreview />
+```
+
+#### `outsideBoundaryPreviewPadding` (Number)
+
+Sets the outside preview padding (in pixels). Only used when `showOutsideBoundaryPreview` is enabled.
+
+**Example:**
+
+```jsx
+<Studio showOutsideBoundaryPreview outsideBoundaryPreviewPadding={120} />
+```
+
 ## 🆕 (Updated) QR ID Controls
 
 ### 24. `showQrIdToggle` (boolean)
@@ -486,4 +523,3 @@ but **`x`/`y` positioning fields are ignored** for insert/reflow.
   showQrIdToggle
   qrId="LOT-22-7B"
 />
-

package/dist/cjs/index.js

@@ -342,6 +342,9 @@ var propTypes$z = {
   disableWhiteLabel: PropTypes.bool,
   defaultTemplatesList: PropTypes.array,
   customTemplatesList: PropTypes.array,
+  templatesDisplayOrder: PropTypes.oneOf(['defaultFirst', 'customFirst']),
+  showOutsideBoundaryPreview: PropTypes.bool,
+  outsideBoundaryPreviewPadding: PropTypes.number,
   qrLink: PropTypes.string,
   styleProps: PropTypes.object,
   defaultText: PropTypes.string,
@@ -2269,10 +2272,12 @@ var propTypes$w = {
   setLoadingUploadImage: PropTypes.func,
   cuttingGuideStroke: PropTypes.number,
   cuttingGuideStrokeColor: PropTypes.string,
-  onChangeCuttingGuideProp: PropTypes.func
+  onChangeCuttingGuideProp: PropTypes.func,
+  showOutsideBoundaryPreview: PropTypes.bool,
+  outsideBoundaryPreviewPadding: PropTypes.number
 };
 
-var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$7, _templateObject5$3;
+var _templateObject$r, _templateObject2$l, _templateObject3$b, _templateObject4$7, _templateObject5$4;
 var Container$4 = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n    flex: 1;\n    display: flex;\n    background-color: ", ";\n    background-image: ", ";\n    position: relative;\n    flex-direction: column;\n    overflow: hidden;\n"])), theme.color.white_F7F7F7, function (_ref) {
   var selectedTab = _ref.selectedTab;
   return selectedTab ? 'none' : "url(".concat(EditorBg, ")");
@@ -2292,7 +2297,7 @@ var InnerContainerWrapper = styled.div(_templateObject3$b || (_templateObject3$b
   return editorWidth || 400;
 });
 var Title = styled.p(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    align-self: flex-start;\n    font-size: 14px;\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n    padding: 0 6px;\n    border-bottom-width: 0;\n"])), theme.color.gray_E8E8E8, theme.fonts.primary, theme.fontWeights[300], theme.color.gray_7A7979);
-var EditorBox = styled.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    min-height: ", "px;\n    min-width: ", "px;\n    background: ", ";\n    box-shadow: 1.317px 1.317px 1.317px 0px rgba(0, 0, 0, 0.08);\n    // transition: all 0.1s ease-in-out;\n    overflow: hidden;\n"])), function (_ref6) {
+var EditorBox = styled.div(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    min-height: ", "px;\n    min-width: ", "px;\n    background: ", ";\n    box-shadow: 1.317px 1.317px 1.317px 0px rgba(0, 0, 0, 0.08);\n    // transition: all 0.1s ease-in-out;\n    overflow: hidden;\n"])), function (_ref6) {
   var editorHeight = _ref6.editorHeight;
   return editorHeight || 470;
 }, function (_ref7) {
@@ -2443,7 +2448,7 @@ var StyledContainer$6 = styled.div(_templateObject$p || (_templateObject$p = _ta
   return disabled ? 'none' : 'all';
 });
 
-var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$6, _templateObject5$2, _templateObject6, _templateObject7;
+var _templateObject$o, _templateObject2$j, _templateObject3$a, _templateObject4$6, _templateObject5$3, _templateObject6$1, _templateObject7$1;
 var Wrapper = styled.span(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n    position: relative;\n    display: inline-flex;\n    cursor: ", ";\n"])), function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? 'not-allowed' : 'pointer';
@@ -2454,13 +2459,13 @@ styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["
   return position === 'top' && styled.css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n            bottom: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
 }, function (_ref3) {
   var position = _ref3.position;
-  return position === 'right' && styled.css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n            top: 50%;\n            left: 105%;\n            transform: translateY(-50%);\n        "])));
+  return position === 'right' && styled.css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n            top: 50%;\n            left: 105%;\n            transform: translateY(-50%);\n        "])));
 }, function (_ref4) {
   var position = _ref4.position;
-  return position === 'bottom' && styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            top: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
+  return position === 'bottom' && styled.css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n            top: 110%;\n            left: 50%;\n            transform: translateX(-50%);\n        "])));
 }, function (_ref5) {
   var position = _ref5.position;
-  return position === 'left' && styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n            top: 50%;\n            right: 105%;\n            transform: translateY(-50%);\n        "])));
+  return position === 'left' && styled.css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n            top: 50%;\n            right: 105%;\n            transform: translateY(-50%);\n        "])));
 }, Wrapper);
 
 var Tooltip = function Tooltip(_ref) {
@@ -3016,14 +3021,16 @@ var removeImageProperty = function removeImageProperty() {
 var exportStageAsImage = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(stageRef, pageSizeKey) {
     var scale,
+      cropArea,
       _args3 = arguments;
     return _regenerator().w(function (_context3) {
       while (1) switch (_context3.n) {
         case 0:
           scale = _args3.length > 2 && _args3[2] !== undefined ? _args3[2] : 2;
+          cropArea = _args3.length > 3 && _args3[3] !== undefined ? _args3[3] : null;
           return _context3.a(2, new Promise(/*#__PURE__*/function () {
             var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(resolve, reject) {
-              var stage, canvas, dataURL, _t;
+              var stage, canvasOptions, canvas, dataURL, _t;
               return _regenerator().w(function (_context2) {
                 while (1) switch (_context2.p = _context2.n) {
                   case 0:
@@ -3035,10 +3042,19 @@ var exportStageAsImage = /*#__PURE__*/function () {
                     }
                     return _context2.a(2, reject('Stage is not available'));
                   case 1:
-                    _context2.n = 2;
-                    return stage.toCanvas({
+                    canvasOptions = {
                       pixelRatio: scale
-                    });
+                    };
+                    if (cropArea && Number.isFinite(cropArea.x) && Number.isFinite(cropArea.y) && Number.isFinite(cropArea.width) && Number.isFinite(cropArea.height)) {
+                      canvasOptions.x = cropArea.x;
+                      canvasOptions.y = cropArea.y;
+                      canvasOptions.width = cropArea.width;
+                      canvasOptions.height = cropArea.height;
+                    }
+
+                    // Create a canvas with the scale factor
+                    _context2.n = 2;
+                    return stage.toCanvas(canvasOptions);
                   case 2:
                     canvas = _context2.v;
                     _context2.n = 3;
@@ -4091,12 +4107,12 @@ var propTypes$i = {
   translation: PropTypes.object
 };
 
-var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$4, _templateObject5$1;
+var _templateObject$e, _templateObject2$a, _templateObject3$7, _templateObject4$4, _templateObject5$2;
 var Container$3 = styled.div(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    position: relative;\n"])));
 var ZoomControlWrapper = styled.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n    border-radius: 6px;\n    height: 44px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background: white;\n"])), theme.color.gray_200);
 var ZoomButton = styled.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 0 14px;\n    cursor: pointer;\n"])));
 var Divider = styled.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n    width: 1px;\n    height: 80%;\n    background: rgba(77, 98, 119, 0.2);\n"])));
-var ZoomPercentage = styled.p(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n    padding: 0 14px;\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n"])), theme.fonts.primary, theme.fontWeights[500], theme.color.icon_gray);
+var ZoomPercentage = styled.p(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n    padding: 0 14px;\n    font-family: ", ";\n    font-weight: ", ";\n    color: ", ";\n"])), theme.fonts.primary, theme.fontWeights[500], theme.color.icon_gray);
 
 var propTypes$h = {
   varient: PropTypes.oneOf(Object.values(ButtonVarients)),
@@ -5364,8 +5380,23 @@ var Editor = function Editor(_ref) {
     onRemoveBackgroundImage = _ref.onRemoveBackgroundImage,
     showBackgroundImagePicker = _ref.showBackgroundImagePicker,
     showOpacityPicker = _ref.showOpacityPicker,
-    changeSelectedElementProperty = _ref.changeSelectedElementProperty;
+    changeSelectedElementProperty = _ref.changeSelectedElementProperty,
+    _ref$showOutsideBound = _ref.showOutsideBoundaryPreview,
+    showOutsideBoundaryPreview = _ref$showOutsideBound === void 0 ? false : _ref$showOutsideBound,
+    _ref$outsideBoundaryP = _ref.outsideBoundaryPreviewPadding,
+    outsideBoundaryPreviewPadding = _ref$outsideBoundaryP === void 0 ? 120 : _ref$outsideBoundaryP;
   var transformerRef = React.useRef(null);
+  var previewPadding = React.useMemo(function () {
+    return showOutsideBoundaryPreview ? Math.max(0, Number(outsideBoundaryPreviewPadding) || 0) : 0;
+  }, [showOutsideBoundaryPreview, outsideBoundaryPreviewPadding]);
+  var stageWidth = React.useMemo(function () {
+    return editorWidth + previewPadding * 2;
+  }, [editorWidth, previewPadding]);
+  var stageHeight = React.useMemo(function () {
+    return editorHeight + previewPadding * 2;
+  }, [editorHeight, previewPadding]);
+  var pageOffsetX = previewPadding;
+  var pageOffsetY = previewPadding;
   React.useEffect(function () {
     if (transformerRef !== null && transformerRef !== void 0 && transformerRef.current) {
       var _stageRef$current;
@@ -5701,14 +5732,14 @@ var Editor = function Editor(_ref) {
     showOpacityPicker: showOpacityPicker,
     changeSelectedElementProperty: changeSelectedElementProperty
   }), /*#__PURE__*/React.createElement(InnerContainer, null, /*#__PURE__*/React.createElement(InnerContainerWrapper, {
-    editorHeight: editorHeight + 50,
-    editorWidth: editorWidth
+    editorHeight: stageHeight + 50,
+    editorWidth: stageWidth
   }, title && /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(EditorBox, {
-    editorHeight: editorHeight,
-    editorWidth: editorWidth
+    editorHeight: stageHeight,
+    editorWidth: stageWidth
   }, !loadingImages && !loadingFonts && /*#__PURE__*/React.createElement(reactKonva.Stage, {
-    width: editorWidth,
-    height: editorHeight,
+    width: stageWidth,
+    height: stageHeight,
     ref: stageRef,
     onMouseDown: function onMouseDown(e) {
       if (e.target === e.target.getStage()) {
@@ -5723,15 +5754,21 @@ var Editor = function Editor(_ref) {
     },
     listening: false
   }, /*#__PURE__*/React.createElement(reactKonva.Rect, {
+    x: pageOffsetX,
+    y: pageOffsetY,
     width: editorWidth,
     height: editorHeight,
     fill: canvasBackgroundColor || theme.color.white
   }), canvasBackgroundImage && /*#__PURE__*/React.createElement(CanvasImage, {
     element: _objectSpread2(_objectSpread2({}, canvasBackgroundImage), {}, {
+      x: pageOffsetX,
+      y: pageOffsetY,
       width: editorWidth,
       height: editorHeight
     })
   })), /*#__PURE__*/React.createElement(reactKonva.Layer, null, /*#__PURE__*/React.createElement(reactKonva.Group, {
+    x: pageOffsetX,
+    y: pageOffsetY,
     scaleX: zoomPercentage / 100,
     scaleY: zoomPercentage / 100
   }, elements === null || elements === void 0 ? void 0 : elements.map(function (el) {
@@ -5762,12 +5799,42 @@ var Editor = function Editor(_ref) {
       }
       return newBox;
     }
-  }))), /*#__PURE__*/React.createElement(reactKonva.Layer, {
+  }))), showOutsideBoundaryPreview && previewPadding > 0 ? /*#__PURE__*/React.createElement(reactKonva.Layer, {
     listening: false
   }, /*#__PURE__*/React.createElement(reactKonva.Rect, {
     listening: false,
     x: 0,
     y: 0,
+    width: stageWidth,
+    height: pageOffsetY,
+    fill: "rgba(0, 0, 0, 0.14)"
+  }), /*#__PURE__*/React.createElement(reactKonva.Rect, {
+    listening: false,
+    x: 0,
+    y: pageOffsetY,
+    width: pageOffsetX,
+    height: editorHeight,
+    fill: "rgba(0, 0, 0, 0.14)"
+  }), /*#__PURE__*/React.createElement(reactKonva.Rect, {
+    listening: false,
+    x: pageOffsetX + editorWidth,
+    y: pageOffsetY,
+    width: stageWidth - (pageOffsetX + editorWidth),
+    height: editorHeight,
+    fill: "rgba(0, 0, 0, 0.14)"
+  }), /*#__PURE__*/React.createElement(reactKonva.Rect, {
+    listening: false,
+    x: 0,
+    y: pageOffsetY + editorHeight,
+    width: stageWidth,
+    height: stageHeight - (pageOffsetY + editorHeight),
+    fill: "rgba(0, 0, 0, 0.14)"
+  })) : null, /*#__PURE__*/React.createElement(reactKonva.Layer, {
+    listening: false
+  }, /*#__PURE__*/React.createElement(reactKonva.Rect, {
+    listening: false,
+    x: pageOffsetX,
+    y: pageOffsetY,
     width: editorWidth,
     height: editorHeight,
     stroke: cuttingGuideStrokeColor,
@@ -5819,6 +5886,7 @@ var propTypes$b = {
   setLoadingUploadImage: PropTypes.func,
   defaultTemplatesList: PropTypes.array,
   customTemplatesList: PropTypes.array,
+  templatesDisplayOrder: PropTypes.oneOf(['defaultFirst', 'customFirst']),
   styleProps: PropTypes.object
 };
 
@@ -5873,7 +5941,8 @@ var propTypes$9 = {
   oncreateNewTemplate: PropTypes.func,
   languageLocale: PropTypes.string,
   defaultTemplatesList: PropTypes.array,
-  customTemplatesList: PropTypes.array
+  customTemplatesList: PropTypes.array,
+  templatesDisplayOrder: PropTypes.oneOf(['defaultFirst', 'customFirst'])
 };
 
 var propTypes$8 = {
@@ -5885,7 +5954,7 @@ var propTypes$8 = {
   content: PropTypes.node
 };
 
-var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$3, _templateObject5;
+var _templateObject$8, _templateObject2$6, _templateObject3$6, _templateObject4$3, _templateObject5$1;
 var CollapsableContainer = styled.div(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    margin-top: ", "px;\n    margin-bottom: ", "px;\n"])), function (_ref) {
   var marginTop = _ref.marginTop;
   return marginTop;
@@ -5896,7 +5965,7 @@ var CollapsableContainer = styled.div(_templateObject$8 || (_templateObject$8 =
 var CollapsableHeader = styled.div(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    cursor: pointer;\n    justify-content: flex-start;\n    align-self: flex-start;\n    margin-bottom: 14px;\n"])));
 var LeftIconWrapper = styled.div(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n    margin-right: 6px;\n    display: flex;\n    align-items: center;\n"])));
 var IconWrapper = styled.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    margin-top: 3px;\n"])));
-var CollapsableContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    display: ", ";\n"])), function (_ref3) {
+var CollapsableContent = styled.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n    display: ", ";\n"])), function (_ref3) {
   var visible = _ref3.visible;
   return visible ? 'flex' : 'none';
 });
@@ -5936,11 +6005,14 @@ var Collapsable = function Collapsable(_ref) {
 };
 Collapsable.propTypes = propTypes$8;
 
-var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$2;
+var _templateObject$7, _templateObject2$5, _templateObject3$5, _templateObject4$2, _templateObject5, _templateObject6, _templateObject7;
 var TemplatesContainer = styled.div(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: 10px;\n    align-items: flex-start;\n"])));
-var TemplateItem = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.2);\n        opacity: 0;\n        transition: opacity 0.3s ease;\n        z-index: 1;\n    }\n\n    &:hover::before {\n        opacity: 1;\n    }\n    &:hover > button {\n        display: flex;\n        z-index: 2;\n    }\n"])));
-var StyledDeleteButton = styled.button(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n    display: none;\n    justify-content: center;\n    align-items: center;\n    height: 30px;\n    width: 30px;\n    padding: 8px;\n    border-radius: 100%;\n    background: rgba(255, 255, 255, 1);\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    &:hover {\n        border-color: #d91919;\n    }\n    &:focus {\n        outline: none;\n    }\n"])));
-var StyledContainer$5 = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    padding: 20px 18px;\n    overflow: auto;\n"])));
+var TemplateItem = styled.div(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    display: flex;\n    flex-direction: column;\n    cursor: pointer;\n    position: relative;\n    gap: 6px;\n    overflow: hidden;\n\n    &::before {\n        content: '';\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background: rgba(0, 0, 0, 0.2);\n        opacity: 0;\n        transition: opacity 0.3s ease;\n        z-index: 1;\n        pointer-events: none;\n    }\n\n    &:hover::before {\n        opacity: 1;\n    }\n"])));
+var StyledDeleteButton = styled.button(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    height: 24px;\n    width: 24px;\n    padding: 0;\n    border-radius: 6px;\n    background: #fff;\n    border: 1px solid #e7e7e7;\n    flex-shrink: 0;\n    z-index: 3;\n    cursor: pointer;\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    opacity: 0;\n    pointer-events: none;\n    transform: translateY(-4px);\n    transition:\n        border-color 0.2s ease,\n        background-color 0.2s ease,\n        opacity 0.2s ease,\n        transform 0.2s ease;\n\n    ", ":hover &,\n    ", ":focus-within & {\n        opacity: 1;\n        pointer-events: auto;\n        transform: translateY(0);\n    }\n\n    img {\n        height: 14px;\n    }\n\n    &:hover {\n        border-color: #d91919;\n        background: #fff5f5;\n    }\n\n    &:focus {\n        outline: 2px solid #d91919;\n        outline-offset: 1px;\n    }\n"])), TemplateItem, TemplateItem);
+var TemplateFooter = styled.div(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n    width: 115px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n"])));
+var TemplateTitle = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    color: #a1a1a1;\n    font-size: 10px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    flex: 1;\n    min-width: 0;\n    line-height: 1.2;\n    padding-bottom: 2px;\n"])));
+var TemplatePreview = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    position: relative;\n    width: 115px;\n    height: 125px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    overflow: hidden;\n\n    img {\n        border-radius: 6px;\n    }\n"])));
+var StyledContainer$5 = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    padding: 20px 18px;\n    overflow: auto;\n"])));
 
 var propTypes$7 = {
   text: PropTypes.string,
@@ -5997,12 +6069,14 @@ var RadioSection = function RadioSection(_ref) {
 RadioSection.propTypes = propTypes$7;
 
 var TemplateSideBar = function TemplateSideBar(_ref) {
-  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7;
+  var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6, _TEXT_DICTIONARY$lang7, _TEXT_DICTIONARY$lang8;
   var oncreateNewTemplate = _ref.oncreateNewTemplate,
     languageLocale = _ref.languageLocale,
     onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
     defaultTemplatesList = _ref.defaultTemplatesList,
     customTemplatesList = _ref.customTemplatesList,
+    _ref$templatesDisplay = _ref.templatesDisplayOrder,
+    templatesDisplayOrder = _ref$templatesDisplay === void 0 ? 'defaultFirst' : _ref$templatesDisplay,
     onTemplateSelect = _ref.onTemplateSelect,
     isLocationTextActive = _ref.isLocationTextActive,
     onToggleLocationText = _ref.onToggleLocationText,
@@ -6019,21 +6093,12 @@ var TemplateSideBar = function TemplateSideBar(_ref) {
             onTemplateSelect(item === null || item === void 0 ? void 0 : item.id);
           }
         }
-      }, /*#__PURE__*/React.createElement(StyledImage, {
+      }, /*#__PURE__*/React.createElement(TemplatePreview, null, /*#__PURE__*/React.createElement(StyledImage, {
         src: item === null || item === void 0 ? void 0 : item.image,
         maxHeight: 125,
         maxWidth: 115,
         borderRadius: 6
-      }), /*#__PURE__*/React.createElement(StyledText, {
-        color: theme.color.gray_A1A1A1,
-        fontSize: 10,
-        style: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          maxWidth: 115
-        }
-      }, item === null || item === void 0 ? void 0 : item.title));
+      })), /*#__PURE__*/React.createElement(TemplateFooter, null, /*#__PURE__*/React.createElement(TemplateTitle, null, item === null || item === void 0 ? void 0 : item.title)));
     }));
   }, []);
   var renderCustomContent = React.useMemo(function () {
@@ -6046,29 +6111,23 @@ var TemplateSideBar = function TemplateSideBar(_ref) {
             onTemplateSelect(item === null || item === void 0 ? void 0 : item.id);
           }
         }
-      }, /*#__PURE__*/React.createElement(StyledImage, {
+      }, /*#__PURE__*/React.createElement(TemplatePreview, null, /*#__PURE__*/React.createElement(StyledImage, {
         src: item === null || item === void 0 ? void 0 : item.image,
         maxHeight: 125,
         maxWidth: 115,
         borderRadius: 6
       }), /*#__PURE__*/React.createElement(StyledDeleteButton, {
+        "aria-label": "Delete ".concat((item === null || item === void 0 ? void 0 : item.title) || 'template'),
         onClick: function onClick(e) {
-          e.stopPropagation(); // ⛔ Prevents parent onClick
-          onDeleteCustomTemplate === null || onDeleteCustomTemplate === void 0 || onDeleteCustomTemplate(item);
+          e.stopPropagation();
+          var shouldDelete = window.confirm("Delete \"".concat((item === null || item === void 0 ? void 0 : item.title) || 'this template', "\"?"));
+          if (shouldDelete) {
+            onDeleteCustomTemplate === null || onDeleteCustomTemplate === void 0 || onDeleteCustomTemplate(item);
+          }
         }
       }, /*#__PURE__*/React.createElement(StyledImage, {
-        src: IconDelete,
-        height: 24
-      })), /*#__PURE__*/React.createElement(StyledText, {
-        color: theme.color.gray_A1A1A1,
-        fontSize: 10,
-        style: {
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          maxWidth: 115
-        }
-      }, item === null || item === void 0 ? void 0 : item.title));
+        src: IconDelete
+      }))), /*#__PURE__*/React.createElement(TemplateFooter, null, /*#__PURE__*/React.createElement(TemplateTitle, null, item === null || item === void 0 ? void 0 : item.title)));
     }));
   }, []);
   return /*#__PURE__*/React.createElement(StyledContainer$5, null, /*#__PURE__*/React.createElement(Button, {
@@ -6120,13 +6179,16 @@ var TemplateSideBar = function TemplateSideBar(_ref) {
     isActive: !!isQrIdTextActive,
     onToggle: onToggleQrIdText,
     disabled: false
-  })) : null), /*#__PURE__*/React.createElement(Collapsable, {
-    title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.DEFAULT,
+  })) : null), templatesDisplayOrder === 'customFirst' && customTemplatesList.length > 0 ? /*#__PURE__*/React.createElement(Collapsable, {
+    title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang6 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang6 === void 0 ? void 0 : _TEXT_DICTIONARY$lang6.CUSTOM_TEMPLATES,
+    content: renderCustomContent
+  }) : null, /*#__PURE__*/React.createElement(Collapsable, {
+    title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.DEFAULT,
     content: renderDefaultContent
-  }), customTemplatesList.length > 0 && /*#__PURE__*/React.createElement(Collapsable, {
-    title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang7 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang7 === void 0 ? void 0 : _TEXT_DICTIONARY$lang7.CUSTOM_TEMPLATES,
+  }), templatesDisplayOrder !== 'customFirst' && customTemplatesList.length > 0 ? /*#__PURE__*/React.createElement(Collapsable, {
+    title: TEXT_DICTIONARY === null || TEXT_DICTIONARY === void 0 || (_TEXT_DICTIONARY$lang8 = TEXT_DICTIONARY[languageLocale]) === null || _TEXT_DICTIONARY$lang8 === void 0 ? void 0 : _TEXT_DICTIONARY$lang8.CUSTOM_TEMPLATES,
     content: renderCustomContent
-  }));
+  }) : null);
 };
 TemplateSideBar.propTypes = propTypes$9;
 
@@ -6466,6 +6528,7 @@ var HelperSideBar = function HelperSideBar(_ref) {
     setLoadingUploadImage = _ref.setLoadingUploadImage,
     defaultTemplatesList = _ref.defaultTemplatesList,
     customTemplatesList = _ref.customTemplatesList,
+    templatesDisplayOrder = _ref.templatesDisplayOrder,
     onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
     styleProps = _ref.styleProps,
     defaultText = _ref.defaultText,
@@ -6491,6 +6554,7 @@ var HelperSideBar = function HelperSideBar(_ref) {
     onDeleteCustomTemplate: onDeleteCustomTemplate,
     defaultTemplatesList: defaultTemplatesList,
     customTemplatesList: customTemplatesList,
+    templatesDisplayOrder: templatesDisplayOrder,
     onTemplateSelect: onTemplateSelect,
     styleProps: styleProps,
     isLocationTextActive: isLocationTextActive,
@@ -6629,6 +6693,9 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
  * @property {boolean} [disableWhiteLabel]
  * @property {Array} [defaultTemplatesList]
  * @property {Array} [customTemplatesList]
+ * @property {'defaultFirst'|'customFirst'} [templatesDisplayOrder]
+ * @property {boolean} [showOutsideBoundaryPreview]
+ * @property {number} [outsideBoundaryPreviewPadding]
  * @property {string} [qrLink]
  * @property {Object} [styleProps]
  * @property {string} [defaultText]
@@ -6667,6 +6734,12 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultTemplatesList = _ref$defaultTemplates === void 0 ? [] : _ref$defaultTemplates,
     _ref$customTemplatesL = _ref.customTemplatesList,
     customTemplatesList = _ref$customTemplatesL === void 0 ? [] : _ref$customTemplatesL,
+    _ref$templatesDisplay = _ref.templatesDisplayOrder,
+    templatesDisplayOrder = _ref$templatesDisplay === void 0 ? 'defaultFirst' : _ref$templatesDisplay,
+    _ref$showOutsideBound = _ref.showOutsideBoundaryPreview,
+    showOutsideBoundaryPreview = _ref$showOutsideBound === void 0 ? false : _ref$showOutsideBound,
+    _ref$outsideBoundaryP = _ref.outsideBoundaryPreviewPadding,
+    outsideBoundaryPreviewPadding = _ref$outsideBoundaryP === void 0 ? 120 : _ref$outsideBoundaryP,
     onDeleteCustomTemplate = _ref.onDeleteCustomTemplate,
     _ref$qrLink = _ref.qrLink,
     qrLink = _ref$qrLink === void 0 ? 'www.google.com' : _ref$qrLink,
@@ -6898,7 +6971,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               case 1:
                 processedElements = removeImageProperty(elements);
                 _context.n = 2;
-                return exportStageAsImage(stageRef);
+                return exportStageAsImage(stageRef, null, 2, exportCropArea);
               case 2:
                 dataURL = _context.v;
                 setLoading(false);
@@ -6963,9 +7036,13 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var isMac = navigator.platform.toUpperCase().includes('MAC');
       var ctrlOrCmd = isMac ? e.metaKey : e.ctrlKey;
       var shiftKey = e.shiftKey;
+      var activeElement = document.activeElement;
+      var isTypingTarget = ['INPUT', 'TEXTAREA'].includes(activeElement === null || activeElement === void 0 ? void 0 : activeElement.tagName) || (activeElement === null || activeElement === void 0 ? void 0 : activeElement.isContentEditable);
+      var isDeleteKey = e.key === 'Delete' || e.key === 'Del';
+      var isBackspaceKey = e.key === 'Backspace';
 
-      // Delete
-      if ((e.key === 'Delete' || e.key === 'Backspace') && selectedElement && (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.draggable) !== false && !['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName) && !document.activeElement.isContentEditable) {
+      // Delete selected element with Delete (Win) or Backspace (Mac)
+      if ((isDeleteKey || isBackspaceKey) && selectedElement && !isTypingTarget) {
         e.preventDefault();
         onDeleteSelectedElement();
       }
@@ -7072,6 +7149,18 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
     })) === null || _elements$find2 === void 0 ? void 0 : _elements$find2.size) || (pageSizes === null || pageSizes === void 0 ? void 0 : pageSizes.A4)]) === null || _pageSizesDimensions2 === void 0 ? void 0 : _pageSizesDimensions2.width, zoomPercentage);
   }, [zoomPercentage, elements]);
+  var normalizedOutsidePreviewPadding = React.useMemo(function () {
+    return Math.max(0, Number(outsideBoundaryPreviewPadding) || 0);
+  }, [outsideBoundaryPreviewPadding]);
+  var exportCropArea = React.useMemo(function () {
+    if (!showOutsideBoundaryPreview) return null;
+    return {
+      x: normalizedOutsidePreviewPadding,
+      y: normalizedOutsidePreviewPadding,
+      width: editorWidth,
+      height: editorHeight
+    };
+  }, [showOutsideBoundaryPreview, normalizedOutsidePreviewPadding, editorWidth, editorHeight]);
   var selectedPageSize = React.useMemo(function () {
     var _elements$find3;
     return (elements === null || elements === void 0 || (_elements$find3 = elements.find(function (e) {
@@ -7814,7 +7903,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           case 2:
             processedElements = removeImageProperty(elements);
             _context3.n = 3;
-            return exportStageAsImage(stageRef);
+            return exportStageAsImage(stageRef, null, 2, exportCropArea);
           case 3:
             dataURL = _context3.v;
             setLoading(false);
@@ -7864,6 +7953,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setLoadingUploadImage: setLoadingUploadImage,
     defaultTemplatesList: defaultTemplatesList,
     customTemplatesList: customTemplatesList,
+    templatesDisplayOrder: templatesDisplayOrder,
     onDeleteCustomTemplate: onDeleteCustomTemplate,
     styleProps: styleProps,
     defaultText: defaultText,
@@ -7953,7 +8043,9 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onRemoveBackgroundImage: onRemoveBackgroundImage,
     showBackgroundImagePicker: showBackgroundImagePicker,
     showOpacityPicker: showOpacityPicker,
-    changeSelectedElementProperty: changeSelectedElementProperty
+    changeSelectedElementProperty: changeSelectedElementProperty,
+    showOutsideBoundaryPreview: showOutsideBoundaryPreview,
+    outsideBoundaryPreviewPadding: normalizedOutsidePreviewPadding
   }), overallLoading && /*#__PURE__*/React.createElement(Overlay, null, /*#__PURE__*/React.createElement(LoadingSpinner, {
     size: "60px",
     color: theme.color.secondary