@arbisoft/react-design-tool 1.0.70 → 1.0.72

package/README.md

@@ -21,10 +21,9 @@ 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.
+- **Canvas size now supports Preset + Custom (mm)**: You can use standard presets or custom `widthMm`/`heightMm`, with backward compatibility for legacy `pageSize.size` templates.
+- **Custom size input UX updated**: Width/Height fields now include explicit labels and `mm` units, and size updates apply automatically as soon as values are valid (no extra Apply click).
+- **Outside boundary preview tightened**: Default `outsideBoundaryPreviewPadding` is reduced from `120` to `80` for a closer canvas boundary preview.
 - **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**.
@@ -68,13 +67,13 @@ yarn add @arbisoft/react-design-tool
 #### ⚠️ Important: Installation Guide for React 18 and Below
 
 ```bash
-npm install @arbisoft/react-design-tool@1.0.69
+npm install @arbisoft/react-design-tool@1.0.71
 ```
 
 OR
 
 ```bash
-yarn add @arbisoft/react-design-tool@1.0.69
+yarn add @arbisoft/react-design-tool@1.0.71
 
 ```
 
@@ -119,6 +118,12 @@ export default function MyComponent() {
         saveButtonText="Save Progress"
         locale="en"
         zoomLevel={100}
+        canvasSize={{ mode: 'preset', preset: 'A4' }}
+        onCanvasSizeChange={(size) => {
+          console.log('canvasSize changed:', size);
+        }}
+        showOutsideBoundaryPreview
+        outsideBoundaryPreviewPadding={80}
       />
     </>
   );
@@ -158,19 +163,6 @@ 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.
@@ -463,9 +455,41 @@ Used to set configure allowed images formats for our gallert
 <Studio allowedFormats={['png', 'jpg']} />
 ```
 
-#### `showOutsideBoundaryPreview` (Boolean)
+#### 24. `canvasSize` (Object)
+
+Set the initial/controlled canvas size in either `preset` or `custom` mode.
 
-Enables a padded outside-canvas preview area around the page.
+- `preset` mode example: `{ mode: 'preset', preset: 'A4' }`
+- `custom` mode example: `{ mode: 'custom', widthMm: 100, heightMm: 100 }`
+
+Legacy templates with `{ type: 'pageSize', size: 'A4' }` are still supported.
+
+**Example:**
+
+```jsx
+<Studio canvasSize={{ mode: 'custom', widthMm: 120, heightMm: 80 }} />
+```
+
+#### 25. `onCanvasSizeChange` (Function)
+
+Callback fired whenever canvas size changes from the editor (preset or custom).
+
+**Example:**
+
+```jsx
+<Studio
+  onCanvasSizeChange={(size) => {
+    // size is either:
+    // { mode: 'preset', preset: 'A4' }
+    // or { mode: 'custom', widthMm: 120, heightMm: 80 }
+    console.log(size);
+  }}
+/>
+```
+
+#### 26. `showOutsideBoundaryPreview` (Boolean)
+
+Shows extra stage area around the page so users can preview outside-page objects.
 
 **Example:**
 
@@ -473,19 +497,24 @@ Enables a padded outside-canvas preview area around the page.
 <Studio showOutsideBoundaryPreview />
 ```
 
-#### `outsideBoundaryPreviewPadding` (Number)
+#### 27. `outsideBoundaryPreviewPadding` (Number)
 
-Sets the outside preview padding (in pixels). Only used when `showOutsideBoundaryPreview` is enabled.
+Controls the outside preview spacing in pixels when `showOutsideBoundaryPreview` is enabled.
+
+- Default: `80`
 
 **Example:**
 
 ```jsx
-<Studio showOutsideBoundaryPreview outsideBoundaryPreviewPadding={120} />
+<Studio
+  showOutsideBoundaryPreview
+  outsideBoundaryPreviewPadding={64}
+/>
 ```
 
 ## 🆕 (Updated) QR ID Controls
 
-### 24. `showQrIdToggle` (boolean)
+### 28. `showQrIdToggle` (boolean)
 
 Shows the **“Show QR ID”** toggle in the sidebar.
 
@@ -493,7 +522,7 @@ Shows the **“Show QR ID”** toggle in the sidebar.
 <Studio showQrIdToggle />
 ```
 
-#### 25. `qrId` (String | Number)
+#### 29. `qrId` (String | Number)
 
 The value rendered in the QR ID text when the toggle is ON.
 
@@ -504,7 +533,7 @@ The value rendered in the QR ID text when the toggle is ON.
   qrId="FA-98231"
 />
 ```
-#### 26. `qrIdText` (**deprecated for placement**)
+#### 30. `qrIdText` (**deprecated for placement**)
 
 > **Deprecated for positioning.**  
 > The QR ID position is now **computed automatically**: