@arbisoft/react-design-tool 1.0.48 → 1.0.50

package/README.md

@@ -40,13 +40,13 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.47
+npm install @arbisoft/react-design-tool@1.0.49
 ```
 
 OR
 
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.47
+yarn add @arbisoft/react-design-tool@1.0.49
 
 ```
 
@@ -413,4 +413,66 @@ Used to set configure allowed images formats for our gallert
 
 ```jsx
 <Studio allowedFormats={['png', 'jpg']} />
-```
+```
+
+### (New) QR ID Controls
+
+#### 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.
+
+**Example:**
+```jsx
+<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).
+
+**Example:**
+```jsx
+<Studio
+  showQrIdToggle
+  qrId="FA-98231"
+/>
+```
+#### 26. `qrIdText` (Object)
+
+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.
+
+> **Coordinates are in base canvas units** (unscaled page size, not affected by zoom).
+
+| 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
+<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,
+  }}
+/>
+```