@arbisoft/react-design-tool 1.0.56 → 1.0.61

package/README.md

@@ -12,19 +12,37 @@ With this tool, you can:
 
 Perfect for integrating into applications that require user-driven visual content creation.
 
+---
+
+## 🔔 What’s New
+
+- **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.
+- **No more “ghost selection”**: Selection is cleared when the selected element no longer exists after a template/elements change.
+- **New imperative API**: `reflowQrId()` lets you programmatically re-snap the QR ID above Location (or center) at any time.
+
+> **Heads up:** `qrIdText` **no longer controls placement**. Position is computed automatically from the Location element or canvas center. See the updated “QR ID Controls” section.
+
+---
+
 ## 🎬 Studio Preview
 
 **Live Walkthrough (GIF)**
 
 ![Studio Editor Screenshot](https://i.ibb.co/M5hZtFTG/design-tool.gif)
 
+---
+
 ## 🖥️ Demo
 
 Check out the live demo here:
 
 [![Live Demo](https://img.shields.io/badge/Live-Demo-blue?style=for-the-badge)](https://codesandbox.io/p/sandbox/fdftlr)
 
-## 📦 Installation( react >= 19 )
+---
+
+## 📦 Installation (React ≥ 19)
 
 ```bash
 npm install @arbisoft/react-design-tool
@@ -40,13 +58,13 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.55
+npm install @arbisoft/react-design-tool@1.0.60
 ```
 
 OR
 
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.55
+yarn add @arbisoft/react-design-tool@1.0.60
 
 ```
 
@@ -56,38 +74,45 @@ yarn add @arbisoft/react-design-tool@1.0.55
 import React, { useRef } from 'react';
 import { Studio } from '@arbisoft/react-design-tool';
 
-function MyComponent() {
-    const studioRef = useRef(null);
-
-    return (
-        <Studio
-            ref={studioRef}
-            defaultTemplatesList={[]}
-            customTemplatesList={[]}
-            defaultImages={[]}
-            customImages={[]}
-            uploadImageCallBack={async file => {
-                // Upload logic here
-                return 'url_of_uploaded_image';
-            }}
-            elementsList={[]}
-            qrLink={'http://example.com'}
-            disableWhiteLabel={true}
-            title={'New Title'}
-            styleProps={{
-                primaryColor: 'red',
-            }}
-            defaultText={'Your Default Text'}
-            onSave={async data => {
-                console.log('Saved data:', data);
-            }}
-            saveButtonText={'Save Progress'}
-            locale={'en'}
-        />
-    );
+export default function MyComponent() {
+  const studioRef = useRef<React.ElementRef<typeof Studio>>(null);
+
+  return (
+    <>
+      {/* Optional: a button to re-snap QR ID above the Location text */}
+      <button onClick={() => studioRef.current?.reflowQrId?.()}>
+        Realign QR ID
+      </button>
+
+      <Studio
+        ref={studioRef}
+        defaultTemplatesList={[]}
+        customTemplatesList={[]}
+        defaultImages={[]}
+        customImages={[]}
+        uploadImageCallBack={async (file) => {
+          // Upload logic here
+          return 'https://your-cdn.com/uploaded-image.png';
+        }}
+        elementsList={[]}
+        qrLink="https://example.com"
+        showQrIdToggle
+        qrId="LOT-22-7B"
+        disableWhiteLabel
+        title="New Title"
+        styleProps={{ primaryColor: 'red' }}
+        defaultText="Your Default Text"
+        onSave={async (data) => {
+          console.log('Saved data:', data);
+          // { elements: [...], image: 'data:image/png;base64,...' }
+        }}
+        saveButtonText="Save Progress"
+        locale="en"
+        zoomLevel={100}
+      />
+    </>
+  );
 }
-
-export default MyComponent;
 ```
 
 ## Props Configuration
@@ -415,24 +440,19 @@ Used to set configure allowed images formats for our gallert
 <Studio allowedFormats={['png', 'jpg']} />
 ```
 
-### (New) QR ID Controls
+## 🆕 (Updated) QR ID Controls
 
-#### 24. `showQrIdToggle` (Boolean)
+### 24. `showQrIdToggle` (boolean)
 
-Shows the **“Show QR ID”** toggle in the Templates sidebar.  
-If `true`, the user can add/remove a QR ID text element on the canvas.
+Shows the **“Show QR ID”** toggle in the sidebar.
 
-**Example:**
-```jsx
+```tsx
 <Studio showQrIdToggle />
 ```
 
 #### 25. `qrId` (String | Number)
 
-The value to render as the **QR ID** when the “Show QR ID” toggle is enabled.
-
-- If `qrId` is falsy (`null`, `undefined`, `''`, `0`), enabling the toggle will **not** add the QR ID text.
-- When toggled off and back on, the QR ID text is restored with the **last used** position/style (cached).
+The value rendered in the QR ID text when the toggle is ON.
 
 **Example:**
 ```jsx
@@ -441,38 +461,23 @@ The value to render as the **QR ID** when the “Show QR ID” toggle is enabled
   qrId="FA-98231"
 />
 ```
-#### 26. `qrIdText` (Object)
+#### 26. `qrIdText` (**deprecated for placement**)
 
-Controls the **initial placement and appearance** of the QR ID text *only on first insert*.  
-If the user later moves/edits it and toggles off/on, the element is restored from cache (last known position/style), so these options won’t re-apply until no cached version exists.
+> **Deprecated for positioning.**  
+> The QR ID position is now **computed automatically**:
 
-> **Coordinates are in base canvas units** (unscaled page size, not affected by zoom).
+- If `LOCATION_ELEMENT_ID` (Location text) exists → QR ID is centered **above it**.  
+- Otherwise → QR ID is **centered on the canvas**.
+
+You may still pass stylistic hints that your theme may read (e.g., `color`),  
+but **`x`/`y` positioning fields are ignored** for insert/reflow.
 
-| Field        | Type                            | Default     | Description                                                                                   |
-|-------------|----------------------------------|-------------|-----------------------------------------------------------------------------------------------|
-| `x`         | `number`                         | —           | **Required** for custom placement. X position (base canvas units).                            |
-| `y`         | `number`                         | —           | **Required** for custom placement. Y position (base canvas units).                            |
-| `color`     | `string`                         | theme text  | Text color (e.g., `'#111'`, `'rgba(255,255,255,0.9)'`).                                       |
-| `width`     | `number`                         | `240`       | Text box width (enables neat alignment).                                                      |
-| `textAlign` | `'left' \| 'center' \| 'right'`  | `'center'`  | Horizontal alignment within the text box.                                                     |
-| `pill`      | `boolean`                        | `false`     | If `true`, renders a subtle rounded pill behind the text for readability.                     |
-| `pillColor` | `string`                         | auto        | Pill fill color. If omitted (and `pill: true`), a sensible default is chosen from text color. |
-| `outline`   | `boolean`                        | `false`     | If `true`, adds a thin text stroke and soft shadow for contrast on busy/dark backgrounds.     |
 
 **Example:**
-```jsx
+
+```tsx
 <Studio
   showQrIdToggle
   qrId="LOT-22-7B"
-  qrIdText={{
-    x: 420,              // base canvas coords (unscaled)
-    y: 760,
-    width: 180,
-    textAlign: 'right',
-    color: '#FFFFFF',
-    pill: true,
-    pillColor: 'rgba(0,0,0,0.45)',
-    outline: true,
-  }}
 />
-```
+

package/dist/cjs/index.js

@@ -146,6 +146,9 @@ function _nonIterableRest() {
 function _nonIterableSpread() {
   throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _objectDestructuringEmpty(t) {
+  if (null == t) throw new TypeError("Cannot destructure " + t);
+}
 function ownKeys(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
@@ -2075,7 +2078,6 @@ var TEXT_DICTIONARY = {
 };
 var LOCATION_ELEMENT_ID = 'element-location-text';
 var QRID_ELEMENT_ID = 'element-qrid-text';
-var QRID_ELEMENT_PILL = 'element-qrid-text-pill';
 
 var SideBar = function SideBar(_ref) {
   var _TEXT_DICTIONARY$lang, _TEXT_DICTIONARY$lang2, _TEXT_DICTIONARY$lang3, _TEXT_DICTIONARY$lang4, _TEXT_DICTIONARY$lang5, _TEXT_DICTIONARY$lang6;
@@ -2762,7 +2764,7 @@ var StyledText = styled.p(_templateObject2$g || (_templateObject2$g = _taggedTem
   return "".concat(paddingLeft, "px");
 });
 
-var _excluded$1 = ["image"];
+var _excluded = ["image"];
 var calculatePercentageValue = function calculatePercentageValue(value, percentage) {
   return value * percentage / 100;
 };
@@ -2925,7 +2927,7 @@ var removeImageProperty = function removeImageProperty() {
     if ('image' in elem) {
       // eslint-disable-next-line no-unused-vars
       elem.image;
-        var rest = _objectWithoutProperties(elem, _excluded$1);
+        var rest = _objectWithoutProperties(elem, _excluded);
       return rest;
     }
     return elem;
@@ -6435,7 +6437,6 @@ var isPropValid = /* #__PURE__ */memoize(function (prop) {
 /* Z+1 */
 );
 
-var _excluded = ["ref"];
 /**
  * @typedef {Object} StudioProps
  * @property {string} [title]
@@ -6455,7 +6456,8 @@ var _excluded = ["ref"];
  * @property {'en'|'ru'|'pl'|'de'|'es'|'fr'|'it'} [locale]
  * @property {Function} [onCreateNewTemplate] - called when user creates a new template, passes new canvas elements
  * @property {Function} [onTemplateSelect] - called when a template is selected, passes template id
- * @property {Function} [uploadQRLogoImage] - Optional callback to upload the QR logo image. Should return a string or an object with `{ url }`
+ * @property {Function} [uploadQRLogoImage]
+ *  - Optional callback to upload the QR logo image. Should return a string or an object with `{ url }`
  * @property {number} [zoomLevel] - Optional zoom level (e.g. 100 for 100%)
  * @property {boolean} [showBackgroundImagePicker] - Used to set background image on entire canvas
  * @property {boolean} [showOpacityPicker] - Related to showBackgroundImagePicker and it's opacity
@@ -6468,7 +6470,7 @@ var _excluded = ["ref"];
  * @type {React.ForwardRefExoticComponent<StudioProps & React.RefAttributes<HTMLDivElement>>}
  */
 var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _elements$elements$fi, _elements$find6, _elements$find7, _elements$find8;
+  var _elements$elements$fi, _elements$find5, _elements$find6, _elements$find7;
   var _ref$title = _ref.title,
     title = _ref$title === void 0 ? '' : _ref$title,
     _ref$defaultQrLogo = _ref.defaultQrLogo,
@@ -6506,11 +6508,10 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$showQrIdToggle = _ref.showQrIdToggle,
     showQrIdToggle = _ref$showQrIdToggle === void 0 ? false : _ref$showQrIdToggle,
     _ref$qrId = _ref.qrId,
-    qrId = _ref$qrId === void 0 ? null : _ref$qrId,
-    _ref$qrIdText = _ref.qrIdText,
-    qrIdText = _ref$qrIdText === void 0 ? null : _ref$qrIdText;
+    qrId = _ref$qrId === void 0 ? null : _ref$qrId;
   var stageRef = React.useRef(null);
   var elementCacheRef = React.useRef({});
+  var qrIdActiveRef = React.useRef(false);
   var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     copiedElement = _useState2[0],
@@ -6620,7 +6621,59 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState52 = _slicedToArray(_useState51, 2),
     defaultTextProps = _useState52[0],
     setDefaultTextProps = _useState52[1];
+  var _useState53 = React.useState(qrId),
+    _useState54 = _slicedToArray(_useState53, 2),
+    currentQrId = _useState54[0],
+    setCurrentQrId = _useState54[1];
   var overallLoading = loadingFonts || loadingImages || loadingUploadImage || loading;
+  var getPageDims = React.useCallback(function () {
+    var _base$find;
+    var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
+    var sizeKey = (base === null || base === void 0 || (_base$find = base.find(function (e) {
+      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
+    })) === null || _base$find === void 0 ? void 0 : _base$find.size) || pageSizes.A4;
+    return pageSizesDimensions[sizeKey] || pageSizesDimensions[pageSizes.A4];
+  }, [elements]);
+  var findById = React.useCallback(function (id) {
+    var base = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : elements;
+    return base.find(function (e) {
+      return e.id === id;
+    });
+  }, [elements]);
+
+  /**
+   * Compute the QR-ID frame:
+   * - If LOCATION_ELEMENT_ID exists: center-align above it
+   * - Otherwise: center of page
+   */
+  var computeQrIdFrame = React.useCallback(function () {
+    var _ref2, _loc$fontSize, _loc$x, _loc$width, _loc$y, _ref3, _loc$color, _loc$fontFamily;
+    var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
+    var _getPageDims = getPageDims(base),
+      Cw = _getPageDims.width,
+      Ch = _getPageDims.height;
+    var loc = findById(LOCATION_ELEMENT_ID, base);
+    var fs = Math.max(14, Math.min(28, (_ref2 = (_loc$fontSize = loc === null || loc === void 0 ? void 0 : loc.fontSize) !== null && _loc$fontSize !== void 0 ? _loc$fontSize : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize) !== null && _ref2 !== void 0 ? _ref2 : 16));
+    var GAP = 8; // vertical gap above location text line
+    var width = Number.isFinite(loc === null || loc === void 0 ? void 0 : loc.width) ? loc.width : 240;
+
+    // center horizontally over location text (or page)
+    var x = loc ? Math.max(0, ((_loc$x = loc.x) !== null && _loc$x !== void 0 ? _loc$x : 0) + (((_loc$width = loc.width) !== null && _loc$width !== void 0 ? _loc$width : width) - width) / 2) : Math.max(0, (Cw - width) / 2);
+
+    // place just above location text line (or vertical center)
+    var y = loc ? Math.max(0, ((_loc$y = loc.y) !== null && _loc$y !== void 0 ? _loc$y : 0) - fs - GAP) : Math.max(0, (Ch - fs) / 2);
+    var color = (_ref3 = (_loc$color = loc === null || loc === void 0 ? void 0 : loc.color) !== null && _loc$color !== void 0 ? _loc$color : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color) !== null && _ref3 !== void 0 ? _ref3 : '#111';
+    var fontFamily = (_loc$fontFamily = loc === null || loc === void 0 ? void 0 : loc.fontFamily) !== null && _loc$fontFamily !== void 0 ? _loc$fontFamily : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily;
+    return {
+      x: x,
+      y: y,
+      width: width,
+      textAlign: 'center',
+      fontSize: fs,
+      color: color,
+      fontFamily: fontFamily
+    };
+  }, [getPageDims, findById, defaultTextProps]);
   var undo = React.useCallback(function () {
     if (history.length > 0) {
       setSelectedElement(null);
@@ -6676,9 +6729,41 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setLoading: setLoading,
       undoCount: history.length,
       hasChanges: history.length > 0,
-      redoCount: redoStack.length
+      redoCount: redoStack.length,
+      updateQrId: function updateQrId(newId) {
+        setCurrentQrId(newId);
+        var idx = elements.findIndex(function (e) {
+          return e.id === QRID_ELEMENT_ID;
+        });
+        if (idx > -1) {
+          var frame = computeQrIdFrame(elements);
+          var newElements = _toConsumableArray(elements);
+          newElements[idx] = _objectSpread2(_objectSpread2({}, newElements[idx]), {}, {
+            text: String(newId)
+          }, frame);
+          saveHistory(newElements);
+          if ((selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id) === QRID_ELEMENT_ID) setSelectedElement(newElements[idx]);
+        }
+      },
+      reflowQrId: function reflowQrId() {
+        var idx = elements.findIndex(function (e) {
+          return e.id === QRID_ELEMENT_ID;
+        });
+        if (idx === -1) return;
+        var frame = computeQrIdFrame(elements);
+        var copy = _toConsumableArray(elements);
+        copy[idx] = _objectSpread2(_objectSpread2({}, copy[idx]), frame);
+        saveHistory(copy);
+      }
     };
   });
+  React.useEffect(function () {
+    if (selectedElement && !elements.some(function (e) {
+      return e.id === selectedElement.id;
+    })) {
+      setSelectedElement(null);
+    }
+  }, [elements, selectedElement]);
   React.useEffect(function () {
     if (typeof zoomLevel === 'number') {
       setZoomPercentage(zoomLevel);
@@ -6767,16 +6852,15 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
     if (foundLoc) {
       // store a clean copy (no runtime refs)
-      var _ref2 = foundLoc || {};
-        _ref2.ref;
-        var rest = _objectWithoutProperties(_ref2, _excluded);
+      var _ref4 = foundLoc || {},
+        rest = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
       elementCacheRef.current[LOCATION_ELEMENT_ID] = _objectSpread2({}, rest);
     }
   }, _toConsumableArray(elementsList));
   var LoadImages = function LoadImages(elems) {
     setLoadingImages(true);
-    preloadRelevantImages(elems).then(function (_ref4) {
-      var errors = _ref4.errors;
+    preloadRelevantImages(elems).then(function (_ref5) {
+      var errors = _ref5.errors;
       // console.log('✅ Loaded images:', successes);
       if ((errors === null || errors === void 0 ? void 0 : errors.length) > 0) {
         console.log('❌ Failed images:', errors);
@@ -6815,6 +6899,9 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return e.type === elementTypes.text && e.id === QRID_ELEMENT_ID;
     });
   }, [elements]);
+  React.useEffect(function () {
+    qrIdActiveRef.current = hasQrIdText; // keep this in sync
+  }, [hasQrIdText]);
   var removeElementById = function removeElementById(id) {
     var idx = elements.findIndex(function (e) {
       return e.id === id;
@@ -6823,16 +6910,11 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       var snapshot = _objectSpread2({}, elements[idx]);
       delete snapshot.ref;
       // cache latest props before removing
-      elementCacheRef.current[id] = snapshot;
+      if (id !== QRID_ELEMENT_ID) {
+        elementCacheRef.current[id] = snapshot; // never cache QR-ID
+      }
       var next = elements.slice();
       next.splice(idx, 1);
-      if (id === QRID_ELEMENT_ID) {
-        // remove its pill if present
-        var pillId = "".concat(QRID_ELEMENT_ID, "-pill");
-        for (var i = next.length - 1; i >= 0; i--) {
-          if (next[i].id === pillId) next.splice(i, 1);
-        }
-      }
       if ((selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id) === id) setSelectedElement(null);
       saveHistory(next);
     }
@@ -6850,88 +6932,23 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setSelectedElement(toAdd);
   };
   var addQrIdText = function addQrIdText() {
-    var _elements$find4, _qrIdText$width, _qrIdText$textAlign, _ref5, _qrIdText$color, _ref6, _qrIdText$fontWeight;
-    if (!qrId || hasQrIdText) return;
-
-    // 1) If we’ve seen it before, restore EXACTLY as it was
-    var cached = elementCacheRef.current[QRID_ELEMENT_ID];
-    if (cached) {
-      var toAdd = _objectSpread2(_objectSpread2({}, cached), {}, {
-        id: QRID_ELEMENT_ID,
-        text: String(qrId)
-      });
-      saveHistory([].concat(_toConsumableArray(elements), [toAdd]));
-      setSelectedElement(toAdd);
-      return;
-    }
-
-    // 2) Otherwise, build from external qrIdText + sensible defaults
-    var sizeKey = (elements === null || elements === void 0 || (_elements$find4 = elements.find(function (e) {
-      return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find4 === void 0 ? void 0 : _elements$find4.size) || pageSizes.A4;
-    var _pageSizesDimensions$ = pageSizesDimensions[sizeKey],
-      Cw = _pageSizesDimensions$.width,
-      Ch = _pageSizesDimensions$.height;
-    var fs = (defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontSize) || 16;
-    var lineH = fs * 1.25;
-
-    // --- external layout (REQUIRED x,y for custom placement) ---
-    var hasExternal = qrIdText && typeof qrIdText.x === 'number' && typeof qrIdText.y === 'number';
-    var x = hasExternal ? qrIdText.x : Math.max(0, (Cw - 240) / 2);
-    var y = hasExternal ? qrIdText.y : Math.max(0, (Ch - lineH) / 2);
-    var width = (_qrIdText$width = qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.width) !== null && _qrIdText$width !== void 0 ? _qrIdText$width : 240;
-    var textAlign = (_qrIdText$textAlign = qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.textAlign) !== null && _qrIdText$textAlign !== void 0 ? _qrIdText$textAlign : 'center';
-    var color = (_ref5 = (_qrIdText$color = qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.color) !== null && _qrIdText$color !== void 0 ? _qrIdText$color : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.color) !== null && _ref5 !== void 0 ? _ref5 : '#111';
-
-    // optional readability helpers (opt-in)
-    var wantPill = !!(qrIdText !== null && qrIdText !== void 0 && qrIdText.pill);
-    var pillColor = (qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.pillColor) || (color === '#fff' || color.toLowerCase() === 'white' ? 'rgba(0,0,0,0.35)' : 'rgba(255,255,255,0.85)');
-    var wantOutline = !!(qrIdText !== null && qrIdText !== void 0 && qrIdText.outline);
-    var pillId = "".concat(QRID_ELEMENT_ID, "-pill");
-    var vPad = 8,
-      hPad = 10;
-    var newElements = _toConsumableArray(elements);
-    if (wantPill) {
-      newElements.push({
-        id: pillId,
-        type: elementTypes.square,
-        draggable: true,
-        x: x - hPad,
-        y: y - vPad,
-        width: width + hPad * 2,
-        height: lineH + vPad * 2,
-        cornerRadius: 8,
-        fill: pillColor,
-        opacity: 1,
-        stroke: 'rgba(0,0,0,0.12)',
-        strokeWidth: 1
-      });
-    }
+    var base = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : elements;
+    if (!currentQrId || base.some(function (e) {
+      return e.id === QRID_ELEMENT_ID;
+    })) return;
+    var frame = computeQrIdFrame(base);
     var textProps = _objectSpread2({
       id: QRID_ELEMENT_ID,
       type: elementTypes.text,
       draggable: true,
-      x: x,
-      y: y,
-      width: width,
-      textAlign: textAlign,
-      text: String(qrId),
-      opacity: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity,
-      fontSize: fs,
-      fontFamily: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontFamily,
-      color: color,
-      textDecoration: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.textDecoration,
-      fontStyle: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontStyle,
-      fontWeight: (_ref6 = (_qrIdText$fontWeight = qrIdText === null || qrIdText === void 0 ? void 0 : qrIdText.fontWeight) !== null && _qrIdText$fontWeight !== void 0 ? _qrIdText$fontWeight : defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.fontWeight) !== null && _ref6 !== void 0 ? _ref6 : '400'
-    }, wantOutline && {
-      stroke: color.toLowerCase() === '#ffffff' || color.toLowerCase() === 'white' ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.8)',
-      strokeWidth: 1,
-      shadowColor: 'rgba(0,0,0,0.4)',
-      shadowBlur: 3,
-      shadowOpacity: 0.8
-    });
-    newElements.push(textProps);
-    saveHistory(newElements);
+      text: String(currentQrId),
+      fontWeight: '700',
+      // always bold
+      textAlign: 'center',
+      opacity: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity
+    }, frame);
+    var next = [].concat(_toConsumableArray(base), [textProps]);
+    saveHistory(next);
     setSelectedElement(textProps);
   };
   var toggleLocationText = function toggleLocationText() {
@@ -7000,11 +7017,11 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     saveHistory([].concat(_toConsumableArray(elemClone), [newElement]));
   };
   var onSetPageSize = function onSetPageSize(newSize) {
-    var _elements$find5;
+    var _elements$find4;
     if (!newSize) return;
-    var oldSize = (elements === null || elements === void 0 || (_elements$find5 = elements.find(function (e) {
+    var oldSize = (elements === null || elements === void 0 || (_elements$find4 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find5 === void 0 ? void 0 : _elements$find5.size) || pageSizes.A4;
+    })) === null || _elements$find4 === void 0 ? void 0 : _elements$find4.size) || pageSizes.A4;
     var oldDims = pageSizesDimensions[oldSize];
     var newDims = pageSizesDimensions[newSize];
     var scaleX = newDims.width / oldDims.width;
@@ -7261,6 +7278,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     saveHistory(_toConsumableArray(copyElements));
   };
   var createNewTemplate = function createNewTemplate() {
+    var _elementsRef$current;
     var elems = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [].concat(_toConsumableArray(defaultElements), [{
       type: elementTypes.qr,
       id: "element".concat(Date.now() + 1),
@@ -7277,19 +7295,25 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       opacity: 1,
       logoVisible: false
     }]);
-    var prevElements = elementsRef.current;
-    var prevQrIdText = prevElements.find(function (element) {
-      return element.id === QRID_ELEMENT_ID;
+    var prevHadQrId = (_elementsRef$current = elementsRef.current) === null || _elementsRef$current === void 0 ? void 0 : _elementsRef$current.some(function (e) {
+      return e.id === QRID_ELEMENT_ID;
     });
-    var newQrIdText = elems.find(function (element) {
-      return element.id === QRID_ELEMENT_ID;
-    });
-    if (!(newQrIdText !== null && newQrIdText !== void 0 && newQrIdText.id) && prevQrIdText !== null && prevQrIdText !== void 0 && prevQrIdText.id) {
-      var qrIdPill = prevElements.find(function (element) {
-        return element.id === QRID_ELEMENT_PILL;
-      });
-      if (qrIdPill.id) elems.push(qrIdPill);
-      elems.push(prevQrIdText);
+    var next = _toConsumableArray(elems);
+
+    // If toggle was ON before and current template doesn’t include QR-ID, re-add it above Location (or center)
+    if (prevHadQrId && !next.some(function (e) {
+      return e.id === QRID_ELEMENT_ID;
+    }) && showQrIdToggle && currentQrId) {
+      var frame = computeQrIdFrame(next);
+      next.push(_objectSpread2({
+        id: QRID_ELEMENT_ID,
+        type: elementTypes.text,
+        draggable: true,
+        text: String(currentQrId),
+        fontWeight: '700',
+        textAlign: 'center',
+        opacity: defaultTextProps === null || defaultTextProps === void 0 ? void 0 : defaultTextProps.opacity
+      }, frame));
     }
     setElements(_toConsumableArray(elems));
     setHistory([]);
@@ -7474,7 +7498,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var addQrLogo = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
       var file, result, imageUrl, reader, _t;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.n) {
@@ -7530,7 +7554,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, _callee2, null, [[3, 5, 6, 7]]);
     }));
     return function addQrLogo() {
-      return _ref7.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var addLogo = function addLogo(url) {
@@ -7559,7 +7583,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
   var onSaveProgress = /*#__PURE__*/function () {
-    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
       var processedElements, dataURL;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.n) {
@@ -7593,7 +7617,7 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }, _callee3);
     }));
     return function onSaveProgress() {
-      return _ref8.apply(this, arguments);
+      return _ref7.apply(this, arguments);
     };
   }();
   return /*#__PURE__*/React.createElement(styled.StyleSheetManager, {
@@ -7642,12 +7666,12 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onToggleQrIdText: toggleQrIdText
   }), loadingFonts ? null : /*#__PURE__*/React.createElement(Editor, {
     setLoading: setLoading,
-    cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find6 = elements.find(function (e) {
+    cuttingGuideStroke: (elements === null || elements === void 0 || (_elements$find5 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find6 === void 0 ? void 0 : _elements$find6.cuttingGuideStroke) || 0,
-    cuttingGuideStrokeColor: (elements === null || elements === void 0 || (_elements$find7 = elements.find(function (e) {
+    })) === null || _elements$find5 === void 0 ? void 0 : _elements$find5.cuttingGuideStroke) || 0,
+    cuttingGuideStrokeColor: (elements === null || elements === void 0 || (_elements$find6 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.pageSize);
-    })) === null || _elements$find7 === void 0 ? void 0 : _elements$find7.cuttingGuideStrokeColor) || (theme === null || theme === void 0 ? void 0 : theme.color.black),
+    })) === null || _elements$find6 === void 0 ? void 0 : _elements$find6.cuttingGuideStrokeColor) || (theme === null || theme === void 0 ? void 0 : theme.color.black),
     onChangeCuttingGuideProp: function onChangeCuttingGuideProp(type, value) {
       _onChangeCuttingGuideProp(type, value);
     },
@@ -7689,9 +7713,9 @@ var Studio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     stageRef: stageRef,
     saveHistory: saveHistory,
     onChangeBackgroundImageOpacity: onChangeBackgroundImageOpacity,
-    backgroundImageOpacity: (elements === null || elements === void 0 || (_elements$find8 = elements.find(function (e) {
+    backgroundImageOpacity: (elements === null || elements === void 0 || (_elements$find7 = elements.find(function (e) {
       return (e === null || e === void 0 ? void 0 : e.type) === (elementTypes === null || elementTypes === void 0 ? void 0 : elementTypes.backgroundImage);
-    })) === null || _elements$find8 === void 0 ? void 0 : _elements$find8.opacity) || backgroundImageOpacity,
+    })) === null || _elements$find7 === void 0 ? void 0 : _elements$find7.opacity) || backgroundImageOpacity,
     onDeleteSelectedElement: onDeleteSelectedElement,
     onCopySelectedElement: onCopySelectedElement,
     onToggleLockElement: onToggleLockElement,