labellife-design-tool 2.2.8 → 2.3.0

package/dist/esm/index.js

@@ -48,6 +48,15 @@ import '@mui/icons-material/Crop';
 import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
 import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
 import SwapVertIcon from '@mui/icons-material/SwapVert';
+import OpenWithIcon from '@mui/icons-material/OpenWith';
+import '@mui/icons-material/AlignHorizontalLeft';
+import '@mui/icons-material/AlignHorizontalCenter';
+import '@mui/icons-material/AlignHorizontalRight';
+import '@mui/icons-material/AlignVerticalTop';
+import '@mui/icons-material/AlignVerticalCenter';
+import '@mui/icons-material/AlignVerticalBottom';
+import VerticalAlignTopIcon from '@mui/icons-material/VerticalAlignTop';
+import VerticalAlignBottomIcon from '@mui/icons-material/VerticalAlignBottom';
 import ZoomInIcon from '@mui/icons-material/ZoomIn';
 import ZoomOutIcon from '@mui/icons-material/ZoomOut';
 import FitScreenIcon from '@mui/icons-material/FitScreen';
@@ -6900,7 +6909,7 @@ function ImagesGrid(_ref) {
   });
 }
 
-var _excluded$2 = ["inputField", "promptText", "inputType", "required", "placeholder", "options", "minSelections", "maxSelections"];
+var _excluded$2 = ["inputField", "promptText", "inputType", "required", "removeIfSkipped", "placeholder", "options", "minSelections", "maxSelections"];
 var IMAGE_PLACEHOLDER_SRC = "data:image/svg+xml;charset=utf-8,".concat(encodeURIComponent("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"400\" height=\"400\" viewBox=\"0 0 400 400\">\n    <rect width=\"400\" height=\"400\" fill=\"#f0f2f5\" rx=\"12\"/>\n    <rect x=\"110\" y=\"90\" width=\"180\" height=\"145\" rx=\"10\" fill=\"#dde1e7\"/>\n    <circle cx=\"158\" cy=\"135\" r=\"22\" fill=\"#f0f2f5\"/>\n    <polygon points=\"110,235 168,163 210,205 250,163 290,235\" fill=\"#c8cdd6\"/>\n    <rect x=\"140\" y=\"268\" width=\"120\" height=\"14\" rx=\"7\" fill=\"#c8cdd6\"/>\n    <rect x=\"160\" y=\"292\" width=\"80\" height=\"10\" rx=\"5\" fill=\"#dde1e7\"/>\n  </svg>"));
 
 // ── Date formatting helpers ──────────────────────────────────────────
@@ -7141,6 +7150,30 @@ var InputFieldsPanelContent = observer(function (_ref3) {
     _useState30 = _slicedToArray(_useState29, 2),
     listOptions = _useState30[0],
     setListOptions = _useState30[1];
+  var _useState31 = useState(false),
+    _useState32 = _slicedToArray(_useState31, 2),
+    textRemoveIfSkipped = _useState32[0],
+    setTextRemoveIfSkipped = _useState32[1];
+  var _useState33 = useState(false),
+    _useState34 = _slicedToArray(_useState33, 2),
+    dateRemoveIfSkipped = _useState34[0],
+    setDateRemoveIfSkipped = _useState34[1];
+  var _useState35 = useState(false),
+    _useState36 = _slicedToArray(_useState35, 2),
+    integerRemoveIfSkipped = _useState36[0],
+    setIntegerRemoveIfSkipped = _useState36[1];
+  var _useState37 = useState(false),
+    _useState38 = _slicedToArray(_useState37, 2),
+    imageRemoveIfSkipped = _useState38[0],
+    setImageRemoveIfSkipped = _useState38[1];
+  var _useState39 = useState(false),
+    _useState40 = _slicedToArray(_useState39, 2),
+    radioRemoveIfSkipped = _useState40[0],
+    setRadioRemoveIfSkipped = _useState40[1];
+  var _useState41 = useState(false),
+    _useState42 = _slicedToArray(_useState41, 2),
+    listRemoveIfSkipped = _useState42[0],
+    setListRemoveIfSkipped = _useState42[1];
   var addInputElement = function addInputElement(inputType) {
     var extra = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var page = store.activePage;
@@ -7160,7 +7193,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
           inputType: 'image',
           placeholder: t('sidePanel.inputFields.imagePlaceholder', 'Upload image'),
           promptText: extra.promptText || t('sidePanel.inputFields.defaultImagePrompt', 'Please upload an image'),
-          required: extra.required || false
+          required: extra.required || false,
+          removeIfSkipped: extra.removeIfSkipped || false
         }
       });
     } else {
@@ -7216,7 +7250,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
           inputType: inputType,
           placeholder: placeholder,
           promptText: extra.promptText || defaultPrompt,
-          required: extra.required || false
+          required: extra.required || false,
+          removeIfSkipped: extra.removeIfSkipped || false
         }, inputType === 'date' ? {
           dateFormat: extra.dateFormat || 'MM-DD-YYYY'
         } : {}), ['radio', 'list'].includes(inputType) ? {
@@ -7267,7 +7302,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         onClick: function onClick() {
           return addInputElement('text', {
             promptText: textPrompt,
-            required: textRequired
+            required: textRequired,
+            removeIfSkipped: textRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -7302,6 +7338,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !textRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: textRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setTextRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsx(InputFieldCard, {
         icon: /*#__PURE__*/jsx(CalendarTodayIcon, {
           fontSize: "small"
@@ -7312,7 +7365,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
           return addInputElement('date', {
             dateFormat: dateFormat,
             promptText: datePrompt,
-            required: dateRequired
+            required: dateRequired,
+            removeIfSkipped: dateRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -7347,6 +7401,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !dateRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: dateRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setDateRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsxs(FormControl, {
         size: "small",
         sx: {
@@ -7386,7 +7457,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         onClick: function onClick() {
           return addInputElement('integer', {
             promptText: integerPrompt,
-            required: integerRequired
+            required: integerRequired,
+            removeIfSkipped: integerRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -7421,6 +7493,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !integerRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: integerRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setIntegerRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsx(InputFieldCard, {
         icon: /*#__PURE__*/jsx(ImageIcon, {
           fontSize: "small"
@@ -7430,7 +7519,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         onClick: function onClick() {
           return addInputElement('image', {
             promptText: imagePrompt,
-            required: imageRequired
+            required: imageRequired,
+            removeIfSkipped: imageRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -7465,6 +7555,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !imageRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: imageRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setImageRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsx(InputFieldCard, {
         icon: /*#__PURE__*/jsx(RadioButtonCheckedIcon, {
           fontSize: "small"
@@ -7475,7 +7582,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
           return addInputElement('radio', {
             promptText: radioPrompt,
             required: radioRequired,
-            options: radioOptions
+            options: radioOptions,
+            removeIfSkipped: radioRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -7510,6 +7618,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
         sx: {
           ml: 5.5
         }
+      }), !radioRequired && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: radioRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setRadioRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       }), /*#__PURE__*/jsx(OptionsEditor, {
         options: radioOptions,
         onChange: setRadioOptions
@@ -7524,7 +7649,8 @@ var InputFieldsPanelContent = observer(function (_ref3) {
             promptText: listPrompt,
             minSelections: listMinSelections,
             maxSelections: listMaxSelections,
-            options: listOptions
+            options: listOptions,
+            removeIfSkipped: listRemoveIfSkipped
           });
         }
       }), /*#__PURE__*/jsx(TextField, {
@@ -7597,6 +7723,23 @@ var InputFieldsPanelContent = observer(function (_ref3) {
           fontSize: 10
         },
         children: listMinSelections > 0 ? "Required \xB7 min ".concat(listMinSelections).concat(listMaxSelections > 0 ? ", max ".concat(listMaxSelections) : ', no max') : "Optional \xB7 max ".concat(listMaxSelections > 0 ? listMaxSelections : '∞')
+      }), listMinSelections === 0 && /*#__PURE__*/jsx(FormControlLabel, {
+        control: /*#__PURE__*/jsx(Checkbox, {
+          size: "small",
+          checked: listRemoveIfSkipped,
+          onChange: function onChange(e) {
+            return setListRemoveIfSkipped(e.target.checked);
+          }
+        }),
+        label: /*#__PURE__*/jsx(Typography, {
+          sx: {
+            fontSize: 12
+          },
+          children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+        }),
+        sx: {
+          ml: 5.5
+        }
       })]
     }), /*#__PURE__*/jsx(Divider, {
       sx: {
@@ -7629,30 +7772,34 @@ var InputFieldsPanelContent = observer(function (_ref3) {
 var MarkAsVariableForm = observer(function (_ref4) {
   var _selectedElement$cust;
   var store = _ref4.store;
-  var _useState31 = useState(''),
-    _useState32 = _slicedToArray(_useState31, 2),
-    markLabel = _useState32[0],
-    setMarkLabel = _useState32[1];
-  var _useState33 = useState(false),
-    _useState34 = _slicedToArray(_useState33, 2),
-    markRequired = _useState34[0],
-    setMarkRequired = _useState34[1];
-  var _useState35 = useState('text'),
-    _useState36 = _slicedToArray(_useState35, 2),
-    markInputType = _useState36[0],
-    setMarkInputType = _useState36[1];
-  var _useState37 = useState(['Option 1', 'Option 2']),
-    _useState38 = _slicedToArray(_useState37, 2),
-    markOptions = _useState38[0],
-    setMarkOptions = _useState38[1];
-  var _useState39 = useState(0),
-    _useState40 = _slicedToArray(_useState39, 2),
-    markMinSelections = _useState40[0],
-    setMarkMinSelections = _useState40[1];
-  var _useState41 = useState(2),
-    _useState42 = _slicedToArray(_useState41, 2),
-    markMaxSelections = _useState42[0],
-    setMarkMaxSelections = _useState42[1];
+  var _useState43 = useState(''),
+    _useState44 = _slicedToArray(_useState43, 2),
+    markLabel = _useState44[0],
+    setMarkLabel = _useState44[1];
+  var _useState45 = useState(false),
+    _useState46 = _slicedToArray(_useState45, 2),
+    markRequired = _useState46[0],
+    setMarkRequired = _useState46[1];
+  var _useState47 = useState('text'),
+    _useState48 = _slicedToArray(_useState47, 2),
+    markInputType = _useState48[0],
+    setMarkInputType = _useState48[1];
+  var _useState49 = useState(['Option 1', 'Option 2']),
+    _useState50 = _slicedToArray(_useState49, 2),
+    markOptions = _useState50[0],
+    setMarkOptions = _useState50[1];
+  var _useState51 = useState(0),
+    _useState52 = _slicedToArray(_useState51, 2),
+    markMinSelections = _useState52[0],
+    setMarkMinSelections = _useState52[1];
+  var _useState53 = useState(2),
+    _useState54 = _slicedToArray(_useState53, 2),
+    markMaxSelections = _useState54[0],
+    setMarkMaxSelections = _useState54[1];
+  var _useState55 = useState(false),
+    _useState56 = _slicedToArray(_useState55, 2),
+    markRemoveIfSkipped = _useState56[0],
+    setMarkRemoveIfSkipped = _useState56[1];
   var selectedIds = store.selectedElementsIds || [];
   var selectedElement = selectedIds.length === 1 ? store.getElementById(selectedIds[0]) : null;
   var isImageElement = (selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.type) === 'image';
@@ -7661,13 +7808,14 @@ var MarkAsVariableForm = observer(function (_ref4) {
   var isAlreadyVariable = !!(selectedElement !== null && selectedElement !== void 0 && (_selectedElement$cust = selectedElement.custom) !== null && _selectedElement$cust !== void 0 && _selectedElement$cust.inputField);
   useEffect(function () {
     if (selectedElement && isSupportedElement) {
-      var _selectedElement$cust2, _selectedElement$cust3, _selectedElement$cust4, _selectedElement$cust5, _selectedElement$cust6, _selectedElement$cust7;
+      var _selectedElement$cust2, _selectedElement$cust3, _selectedElement$cust4, _selectedElement$cust5, _selectedElement$cust6, _selectedElement$cust7, _selectedElement$cust8;
       setMarkLabel(((_selectedElement$cust2 = selectedElement.custom) === null || _selectedElement$cust2 === void 0 ? void 0 : _selectedElement$cust2.promptText) || '');
       setMarkRequired(!!((_selectedElement$cust3 = selectedElement.custom) !== null && _selectedElement$cust3 !== void 0 && _selectedElement$cust3.required));
       setMarkInputType(isImageElement ? 'image' : ((_selectedElement$cust4 = selectedElement.custom) === null || _selectedElement$cust4 === void 0 ? void 0 : _selectedElement$cust4.inputType) || 'text');
       setMarkOptions(((_selectedElement$cust5 = selectedElement.custom) === null || _selectedElement$cust5 === void 0 ? void 0 : _selectedElement$cust5.options) || ['Option 1', 'Option 2']);
       setMarkMinSelections(((_selectedElement$cust6 = selectedElement.custom) === null || _selectedElement$cust6 === void 0 ? void 0 : _selectedElement$cust6.minSelections) || 0);
       setMarkMaxSelections(((_selectedElement$cust7 = selectedElement.custom) === null || _selectedElement$cust7 === void 0 ? void 0 : _selectedElement$cust7.maxSelections) || 2);
+      setMarkRemoveIfSkipped(!!((_selectedElement$cust8 = selectedElement.custom) !== null && _selectedElement$cust8 !== void 0 && _selectedElement$cust8.removeIfSkipped));
     } else {
       setMarkLabel('');
       setMarkRequired(false);
@@ -7675,6 +7823,7 @@ var MarkAsVariableForm = observer(function (_ref4) {
       setMarkOptions(['Option 1', 'Option 2']);
       setMarkMinSelections(0);
       setMarkMaxSelections(2);
+      setMarkRemoveIfSkipped(false);
     }
   }, [selectedElement === null || selectedElement === void 0 ? void 0 : selectedElement.id]);
   var handleMark = function handleMark() {
@@ -7685,7 +7834,8 @@ var MarkAsVariableForm = observer(function (_ref4) {
         inputField: true,
         promptText: markLabel.trim(),
         inputType: effectiveType,
-        required: markRequired
+        required: markRequired,
+        removeIfSkipped: !markRequired && markRemoveIfSkipped
       }, ['radio', 'list'].includes(effectiveType) ? {
         options: markOptions.filter(Boolean)
       } : {}), effectiveType === 'list' ? {
@@ -7702,6 +7852,7 @@ var MarkAsVariableForm = observer(function (_ref4) {
       _ref5.promptText;
       _ref5.inputType;
       _ref5.required;
+      _ref5.removeIfSkipped;
       _ref5.placeholder;
       _ref5.options;
       _ref5.minSelections;
@@ -7922,6 +8073,20 @@ var MarkAsVariableForm = observer(function (_ref4) {
         },
         children: t('sidePanel.inputFields.required', 'Required')
       })
+    }), !markRequired && /*#__PURE__*/jsx(FormControlLabel, {
+      control: /*#__PURE__*/jsx(Checkbox, {
+        size: "small",
+        checked: markRemoveIfSkipped,
+        onChange: function onChange(e) {
+          return setMarkRemoveIfSkipped(e.target.checked);
+        }
+      }),
+      label: /*#__PURE__*/jsx(Typography, {
+        sx: {
+          fontSize: 12
+        },
+        children: t('sidePanel.inputFields.removeIfSkipped', 'Remove if skipped')
+      })
     }), /*#__PURE__*/jsx(Button, {
       variant: "contained",
       size: "small",
@@ -8063,6 +8228,21 @@ function _loadGoogleFont() {
 var DEFAULT_FONTS = ['ABeeZee', 'Abel', 'Abhaya Libre', 'Abril Fatface', 'Aclonica', 'Acme', 'Actor', 'Adamina', 'Advent Pro', 'Aguafina Script', 'Akronim', 'Aladin', 'Alata', 'Alatsi', 'Albert Sans', 'Aldrich', 'Alef', 'Alegreya', 'Alegreya Sans', 'Alegreya Sans SC', 'Alegreya SC', 'Aleo', 'Alex Brush', 'Alfa Slab One', 'Alice', 'Alike', 'Alike Angular', 'Allan', 'Allerta', 'Allerta Stencil', 'Allison', 'Allura', 'Almarai', 'Almendra', 'Almendra Display', 'Almendra SC', 'Alumni Sans', 'Alumni Sans Inline One', 'Amarante', 'Amaranth', 'Amatic SC', 'Amethysta', 'Amiko', 'Amiri', 'Amita', 'Anaheim', 'Andada Pro', 'Andika', 'Anek Bangla', 'Anek Devanagari', 'Anek Gujarati', 'Anek Gurmukhi', 'Anek Kannada', 'Anek Latin', 'Anek Malayalam', 'Anek Odia', 'Anek Tamil', 'Anek Telugu', 'Angkor', 'Annie Use Your Telescope', 'Anonymous Pro', 'Antic', 'Antic Didone', 'Antic Slab', 'Anton', 'Antonio', 'Anybody', 'Arapey', 'Arbutus', 'Arbutus Slab', 'Architects Daughter', 'Archivo', 'Archivo Black', 'Archivo Narrow', 'Are You Serious', 'Aref Ruqaa', 'Arima', 'Arimo', 'Arizonia', 'Armata', 'Arsenal', 'Artifika', 'Arvo', 'Arya', 'Asap', 'Asap Condensed', 'Asar', 'Asset', 'Assistant', 'Astloch', 'Asul', 'Athiti', 'Atkinson Hyperlegible', 'Atma', 'Atomic Age', 'Aubrey', 'Audiowide', 'Autour One', 'Average', 'Average Sans', 'Averia Gruesa Libre', 'Averia Libre', 'Averia Sans Libre', 'Averia Serif Libre', 'Azeret Mono', 'B612', 'B612 Mono', 'Bad Script', 'Bahiana', 'Bahianita', 'Bai Jamjuree', 'Bakbak One', 'Ballet', 'Baloo 2', 'Baloo Bhai 2', 'Baloo Bhaijaan 2', 'Baloo Bhaina 2', 'Baloo Chettan 2', 'Baloo Da 2', 'Baloo Paaji 2', 'Baloo Tamma 2', 'Baloo Tammudu 2', 'Baloo Thambi 2', 'Balsamiq Sans', 'Balthazar', 'Bangers', 'Barlow', 'Barlow Condensed', 'Barlow Semi Condensed', 'Barriecito', 'Barrio', 'Basic', 'Baskervville', 'Battambang', 'Baumans', 'Bayon', 'Be Vietnam Pro', 'Beau Rivage', 'Bebas Neue', 'Belgrano', 'Bellefair', 'Belleza', 'Bellota', 'Bellota Text', 'BenchNine', 'Benne', 'Bentham', 'Berkshire Swash', 'Besley', 'Beth Ellen', 'Bevan', 'BIZ UDGothic', 'BIZ UDMincho', 'BIZ UDPGothic', 'BIZ UDPMincho', 'Big Shoulders Display', 'Big Shoulders Inline Display', 'Big Shoulders Inline Text', 'Big Shoulders Stencil Display', 'Big Shoulders Stencil Text', 'Big Shoulders Text', 'Bigelow Rules', 'Bigshot One', 'Bilbo', 'Bilbo Swash Caps', 'BioRhyme', 'BioRhyme Expanded', 'Birthstone', 'Birthstone Bounce', 'Bitter', 'Black And White Picture', 'Black Han Sans', 'Black Ops One', 'Blaka', 'Blaka Hollow', 'Blaka Ink', 'Blinker', 'Bodoni Moda', 'Bokor', 'Bona Nova', 'Bonbon', 'Bonheur Royale', 'Boogaloo', 'Bowlby One', 'Bowlby One SC', 'Brawler', 'Bree Serif', 'Brygada 1918', 'Bubblegum Sans', 'Bubbler One', 'Buda', 'Buenard', 'Bungee', 'Bungee Hairline', 'Bungee Inline', 'Bungee Outline', 'Bungee Shade', 'Bungee Spice', 'Butcherman', 'Butterfly Kids', 'Cabin', 'Cabin Condensed', 'Cabin Sketch', 'Caesar Dressing', 'Cagliostro', 'Cairo', 'Cairo Play', 'Caladea', 'Calistoga', 'Calligraffitti', 'Cambay', 'Cambo', 'Candal', 'Cantarell', 'Cantata One', 'Cantora One', 'Caprasimo', 'Capriola', 'Caramel', 'Carattere', 'Cardo', 'Carlito', 'Carme', 'Carrois Gothic', 'Carrois Gothic SC', 'Carter One', 'Castoro', 'Catamaran', 'Caudex', 'Caveat', 'Caveat Brush', 'Cedarville Cursive', 'Ceviche One', 'Chakra Petch', 'Changa', 'Changa One', 'Chango', 'Charis SIL', 'Charm', 'Charmonman', 'Chathura', 'Chau Philomene One', 'Chela One', 'Chelsea Market', 'Chenla', 'Cherry Bomb One', 'Cherry Cream Soda', 'Cherry Swash', 'Chewy', 'Chicle', 'Chilanka', 'Chivo', 'Chivo Mono', 'Chonburi', 'Cinzel', 'Cinzel Decorative', 'Clicker Script', 'Coda', 'Coda Caption', 'Codystar', 'Coiny', 'Combo', 'Comfortaa', 'Comforter', 'Comforter Brush', 'Comic Neue', 'Coming Soon', 'Commissioner', 'Concert One', 'Condiment', 'Content', 'Contrail One', 'Convergence', 'Cookie', 'Copse', 'Corben', 'Corinthia', 'Cormorant', 'Cormorant Garamond', 'Cormorant Infant', 'Cormorant SC', 'Cormorant Unicase', 'Cormorant Upright', 'Courgette', 'Courier Prime', 'Cousine', 'Coustard', 'Covered By Your Grace', 'Crafty Girls', 'Creepster', 'Crete Round', 'Crimson Pro', 'Crimson Text', 'Croissant One', 'Crushed', 'Cuprum', 'Cute Font', 'Cutive', 'Cutive Mono', 'DM Mono', 'DM Sans', 'DM Serif Display', 'DM Serif Text', 'Damion', 'Dancing Script', 'Dangrek', 'Darker Grotesque', 'David Libre', 'Dawning of a New Day', 'Days One', 'Dekko', 'Dela Gothic One', 'Delius', 'Delius Swash Caps', 'Delius Unicase', 'Della Respira', 'Denk One', 'Devonshire', 'Dhurjati', 'Didact Gothic', 'Diplomata', 'Diplomata SC', 'Do Hyeon', 'Dokdo', 'Domine', 'Donegal One', 'Dongle', 'Doppio One', 'Dorsa', 'Dosis', 'DotGothic16', 'Dr Sugiyama', 'Duru Sans', 'DynaPuff', 'Dynalight', 'EB Garamond', 'Eagle Lake', 'East Sea Dokdo', 'Eater', 'Economica', 'Eczar', 'El Messiri', 'Electrolize', 'Elsie', 'Elsie Swash Caps', 'Emblema One', 'Emilys Candy', 'Encode Sans', 'Encode Sans Condensed', 'Encode Sans Expanded', 'Encode Sans SC', 'Encode Sans Semi Condensed', 'Encode Sans Semi Expanded', 'Engagement', 'Englebert', 'Enriqueta', 'Ephesis', 'Epilogue', 'Erica One', 'Esteban', 'Estonia', 'Euphoria Script', 'Ewert', 'Exo', 'Exo 2', 'Expletus Sans', 'Explora', 'Fahkwang', 'Familjen Grotesk', 'Fanwood Text', 'Farro', 'Farsan', 'Fascinate', 'Fascinate Inline', 'Faster One', 'Fasthand', 'Fauna One', 'Faustina', 'Federant', 'Federo', 'Felipa', 'Fenix', 'Festive', 'Finger Paint', 'Finlandica', 'Fira Code', 'Fira Mono', 'Fira Sans', 'Fira Sans Condensed', 'Fira Sans Extra Condensed', 'Fjalla One', 'Fjord One', 'Flamenco', 'Flavors', 'Fleur De Leah', 'Flow Block', 'Flow Circular', 'Flow Rounded', 'Fondamento', 'Fontdiner Swanky', 'Forum', 'Fragment Mono', 'Francois One', 'Frank Ruhl Libre', 'Fraunces', 'Freckle Face', 'Fredericka the Great', 'Fredoka', 'Freehand', 'Fresca', 'Frijole', 'Fruktur', 'Fugaz One', 'Fuggles', 'Fuzzy Bubbles', 'GFS Didot', 'GFS Neohellenic', 'Gabriela', 'Gaegu', 'Gafata', 'Galada', 'Galdeano', 'Galindo', 'Gamja Flower', 'Gantari', 'Gas', 'Gayathri', 'Gelasio', 'Gemunu Libre', 'Genos', 'Gentium Book Plus', 'Gentium Plus', 'Geo', 'Georama', 'Geostar', 'Geostar Fill', 'Germania One', 'Gideon Roman', 'Gidugu', 'Gilda Display', 'Girassol', 'Give You Glory', 'Glass Antiqua', 'Glegoo', 'Gloria Hallelujah', 'Glory', 'Gluten', 'Goblin One', 'Gochi Hand', 'Goldman', 'Goldplay', 'Golos Text', 'Gorditas', 'Gothic A1', 'Gotu', 'Goudy Bookletter 1911', 'Gowun Batang', 'Gowun Dodum', 'Graduate', 'Grand Hotel', 'Grandstander', 'Grape Nuts', 'Gravitas One', 'Great Vibes', 'Grechen Fuemen', 'Grenze', 'Grenze Gotisch', 'Grey Qo', 'Griffy', 'Gruppo', 'Gudea', 'Gugi', 'Gulzar', 'Gupter', 'Gurajada', 'Gwendolyn', 'Habibi', 'Hachi Maru Pop', 'Hahmlet', 'Halant', 'Hammersmith One', 'Hanalei', 'Hanalei Fill', 'Handlee', 'Hanken Grotesk', 'Hanuman', 'Happy Monkey', 'Harmattan', 'Headland One', 'Heebo', 'Henny Penny', 'Hepta Slab', 'Herr Von Muellerhoff', 'Hi Melody', 'Hina Mincho', 'Hind', 'Hind Guntur', 'Hind Madurai', 'Hind Siliguri', 'Hind Vadodara', 'Holtwood One SC', 'Homemade Apple', 'Homenaje', 'Hubballi', 'Hurricane', 'IBM Plex Mono', 'IBM Plex Sans', 'IBM Plex Sans Arabic', 'IBM Plex Sans Condensed', 'IBM Plex Sans Devanagari', 'IBM Plex Sans Hebrew', 'IBM Plex Sans JP', 'IBM Plex Sans KR', 'IBM Plex Sans Thai', 'IBM Plex Sans Thai Looped', 'IBM Plex Serif', 'Iceberg', 'Iceland', 'Imbue', 'Imperial Script', 'Imprima', 'Inconsolata', 'Inder', 'Indie Flower', 'Ingrid Darling', 'Inika', 'Inknut Antiqua', 'Inria Sans', 'Inria Serif', 'Inspiration', 'Inter', 'Inter Tight', 'Irish Grover', 'Island Moments', 'Istok Web', 'Italiana', 'Italianno', 'Itim', 'Jacques Francois', 'Jacques Francois Shadow', 'Jaldi', 'JetBrains Mono', 'Jim Nightshade', 'Joan', 'Jockey One', 'Jolly Lodger', 'Jomhuria', 'Jomolhari', 'Josefin Sans', 'Josefin Slab', 'Jost', 'Joti One', 'Jua', 'Judson', 'Julee', 'Julius Sans One', 'Junge', 'Jura', 'K2D', 'Kadwa', 'Kaisei Decol', 'Kaisei HarunoUmi', 'Kaisei Opti', 'Kaisei Tokumin', 'Kalam', 'Kameron', 'Kanit', 'Kantumruy Pro', 'Karantina', 'Karla', 'Karma', 'Katibeh', 'Kaushan Script', 'Kavivanar', 'Kavoon', 'Kdam Thmor Pro', 'Keania One', 'Kelly Slab', 'Kenia', 'Khand', 'Khmer', 'Khula', 'Kings', 'Kirang Haerang', 'Kite One', 'Kiwi Maru', 'Klee One', 'Knewave', 'KoHo', 'Kodchasan', 'Koh Santepheap', 'Kolker Brush', 'Konkhmer Sleokchher', 'Kosugi', 'Kosugi Maru', 'Kotta One', 'Koulen', 'Kranky', 'Kreon', 'Kristi', 'Krona One', 'Krub', 'Kufam', 'Kulim Park', 'Kumar One', 'Kumar One Outline', 'Kumbh Sans', 'Kurale', 'La Belle Aurore', 'Lacquer', 'Laila', 'Lakki Reddy', 'Lalezar', 'Lancelot', 'Langar', 'Lango', 'Lateef', 'Lato', 'Lavishly Yours', 'League Gothic', 'League Script', 'League Spartan', 'Leckerli One', 'Ledger', 'Lekton', 'Lemon', 'Lemonada', 'Lexend', 'Lexend Deca', 'Lexend Exa', 'Lexend Giga', 'Lexend Mega', 'Lexend Peta', 'Lexend Tera', 'Lexend Zetta', 'Libre Barcode 128', 'Libre Barcode 128 Text', 'Libre Barcode 39', 'Libre Barcode 39 Extended', 'Libre Barcode 39 Extended Text', 'Libre Barcode 39 Text', 'Libre Barcode EAN13 Text', 'Libre Baskerville', 'Libre Bodoni', 'Libre Caslon Display', 'Libre Caslon Text', 'Libre Franklin', 'Licorice', 'Life Savers', 'Lilita One', 'Lily Script One', 'Limelight', 'Linden Hill', 'Lingua Franca', 'Literata', 'Liu Jian Mao Cao', 'Livvic', 'Lobster', 'Lobster Two', 'Londrina Outline', 'Londrina Shadow', 'Londrina Sketch', 'Londrina Solid', 'Long Cang', 'Lora', 'Love Light', 'Love Ya Like A Sister', 'Loved by the King', 'Lovers Quarrel', 'Luckiest Guy', 'Lusitana', 'Lustria', 'Luxurious Roman', 'Luxurious Script', 'M PLUS 1', 'M PLUS 1 Code', 'M PLUS 1p', 'M PLUS 2', 'M PLUS Code Latin', 'M PLUS Rounded 1c', 'Ma Shan Zheng', 'Macondo', 'Macondo Swash Caps', 'Mada', 'Magra', 'Maiden Orange', 'Maitree', 'Major Mono Display', 'Mako', 'Mali', 'Mallanna', 'Mandali', 'Manjari', 'Manrope', 'Mansalva', 'Manuale', 'Marcellus', 'Marcellus SC', 'Marck Script', 'Margarine', 'Marhey', 'Markazi Text', 'Marko One', 'Marmelad', 'Martel', 'Martel Sans', 'Marvel', 'Mate', 'Mate SC', 'Maven Pro', 'McLaren', 'Mea Culpa', 'Meddon', 'MedievalSharp', 'Medula One', 'Meera Inimai', 'Megrim', 'Meie Script', 'Meow Script', 'Merienda', 'Merriweather', 'Merriweather Sans', 'Metal', 'Metal Mania', 'Metamorphous', 'Metrophobic', 'Michroma', 'Milonga', 'Miltonian', 'Miltonian Tattoo', 'Mina', 'Miniver', 'Miriam Libre', 'Mirza', 'Miss Fajardose', 'Mitr', 'Mochiy Pop One', 'Mochiy Pop P One', 'Modak', 'Modern Antiqua', 'Mogra', 'Mohave', 'Moirai One', 'Molengo', 'Molle', 'Monda', 'Monofett', 'Monoton', 'Monsieur La Doulaise', 'Montaga', 'Montagu Slab', 'MonteCarlo', 'Montez', 'Montserrat', 'Montserrat Alternates', 'Montserrat Subrayada', 'Moon Dance', 'Moul', 'Moulpali', 'Mountains of Christmas', 'Mouse Memoirs', 'Mr Bedfort', 'Mr Dafoe', 'Mr De Haviland', 'Mrs Saint Delafield', 'Mrs Sheppards', 'Mukta', 'Mukta Mahee', 'Mukta Malar', 'Mukta Vaani', 'Mulish', 'Murecho', 'MuseoModerno', 'My Soul', 'Mynerve', 'Mystery Quest', 'NTR', 'Nabla', 'Nanum Brush Script', 'Nanum Gothic', 'Nanum Gothic Coding', 'Nanum Myeongjo', 'Nanum Pen Script', 'Neonderthaw', 'Nerko One', 'Neucha', 'Neuton', 'New Rocker', 'New Tegomin', 'News Cycle', 'Newsreader', 'Niconne', 'Niramit', 'Nixie One', 'Nobile', 'Nokora', 'Norican', 'Nosifer', 'Notable', 'Nothing You Could Do', 'Noticia Text', 'Noto Color Emoji', 'Noto Emoji', 'Noto Kufi Arabic', 'Noto Music', 'Noto Naskh Arabic', 'Noto Nastaliq Urdu', 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Display', 'Noto Sans Mono', 'Noto Serif', 'Noto Serif Display', 'Nova Cut', 'Nova Flat', 'Nova Mono', 'Nova Oval', 'Nova Round', 'Nova Script', 'Nova Slim', 'Nova Square', 'Numans', 'Nunito', 'Nunito Sans', 'Odibee Sans', 'Odor Mean Chey', 'Offside', 'Oi', 'Old Standard TT', 'Oldenburg', 'Ole', 'Oleo Script', 'Oleo Script Swash Caps', 'Oooh Baby', 'Open Sans', 'Oranienbaum', 'Orbit', 'Orbitron', 'Oregano', 'Orelega One', 'Orienta', 'Original Surfer', 'Oswald', 'Outfit', 'Over the Rainbow', 'Overlock', 'Overlock SC', 'Overpass', 'Overpass Mono', 'Ovo', 'Oxanium', 'Oxygen', 'Oxygen Mono', 'PT Mono', 'PT Sans', 'PT Sans Caption', 'PT Sans Narrow', 'PT Serif', 'PT Serif Caption', 'Pacifico', 'Padauk', 'Padyakke Expanded One', 'Palanquin', 'Palanquin Dark', 'Palette Mosaic', 'Pangolin', 'Paprika', 'Parisienne', 'Passero One', 'Passion One', 'Passions Conflict', 'Pathway Extreme', 'Pathway Gothic One', 'Patrick Hand', 'Patrick Hand SC', 'Pattaya', 'Patua One', 'Pavanam', 'Paytone One', 'Peddana', 'Peralta', 'Permanent Marker', 'Petit Formal Script', 'Petrona', 'Philosopher', 'Phudu', 'Piazzolla', 'Piedra', 'Pinyon Script', 'Pirata One', 'Plaster', 'Play', 'Playball', 'Playfair Display', 'Playfair Display SC', 'Playpen Sans', 'Plus Jakarta Sans', 'Podkova', 'Poiret One', 'Poller One', 'Poltawski Nowy', 'Poly', 'Pompiere', 'Pontano Sans', 'Poor Story', 'Poppins', 'Port Lligat Sans', 'Port Lligat Slab', 'Potta One', 'Pragati Narrow', 'Praise', 'Prata', 'Preahvihear', 'Press Start 2P', 'Pridi', 'Princess Sofia', 'Prociono', 'Prompt', 'Prosto One', 'Proza Libre', 'Public Sans', 'Puppies Play', 'Puritan', 'Purple Purse', 'Pushster', 'Quando', 'Quantico', 'Quattrocento', 'Quattrocento Sans', 'Questrial', 'Quicksand', 'Quintessential', 'Qwigley', 'Qwitcher Grypen', 'REM', 'Racing Sans One', 'Radio Canada', 'Radley', 'Rajdhani', 'Rakkas', 'Raleway', 'Raleway Dots', 'Ramabhadra', 'Ramaraja', 'Rambla', 'Rammetto One', 'Rampart One', 'Ranchers', 'Rancho', 'Ranga', 'Rasa', 'Rationale', 'Ravi Prakash', 'Readex Pro', 'Recursive', 'Red Hat Display', 'Red Hat Mono', 'Red Hat Text', 'Red Rose', 'Redacted', 'Redacted Script', 'Redressed', 'Reem Kufi', 'Reem Kufi Fun', 'Reem Kufi Ink', 'Reenie Beanie', 'Reggae One', 'Revalia', 'Rhodium Libre', 'Ribeye', 'Ribeye Marrow', 'Righteous', 'Risque', 'Road Rage', 'RocknRoll One', 'Rokkitt', 'Romanesco', 'Ropa Sans', 'Rosario', 'Rosarivo', 'Rouge Script', 'Rowdies', 'Rozha One', 'Rubik', 'Rubik Beastly', 'Rubik Bubbles', 'Rubik Burned', 'Rubik Dirt', 'Rubik Distressed', 'Rubik Gemstones', 'Rubik Glitch', 'Rubik Iso', 'Rubik Marker Hatch', 'Rubik Maze', 'Rubik Microbe', 'Rubik Mono One', 'Rubik Moonrocks', 'Rubik Pixels', 'Rubik Puddles', 'Rubik Spray Paint', 'Rubik Storm', 'Rubik Vinyl', 'Rubik Wet Paint', 'Ruda', 'Rufina', 'Ruge Boogie', 'Ruluko', 'Rum Raisin', 'Ruslan Display', 'Russo One', 'Ruthie', 'Rye', 'STIX Two Text', 'Sacramento', 'Sahitya', 'Sail', 'Saira', 'Saira Condensed', 'Saira Extra Condensed', 'Saira Semi Condensed', 'Saira Stencil One', 'Salsa', 'Sanchez', 'Sancreek', 'Sansita', 'Sansita Swashed', 'Sarabun', 'Sarala', 'Sarina', 'Sarpanch', 'Sassybold', 'Satisfy', 'Sawarabi Gothic', 'Sawarabi Mincho', 'Scada', 'Scheherazade New', 'Schoolbell', 'Scope One', 'Seaweed Script', 'Secular One', 'Sedgwick Ave', 'Sedgwick Ave Display', 'Sen', 'Send Flowers', 'Sevillana', 'Seymour One', 'Shadows Into Light', 'Shadows Into Light Two', 'Shalimar', 'Shanti', 'Share', 'Share Tech', 'Share Tech Mono', 'Shippori Antique', 'Shippori Antique B1', 'Shippori Mincho', 'Shippori Mincho B1', 'Shizuru', 'Shojumaru', 'Short Stack', 'Shrikhand', 'Siemreap', 'Sigmar One', 'Signika', 'Signika Negative', 'Silkscreen', 'Simonetta', 'Single Day', 'Sintony', 'Sirin Stencil', 'Six Caps', 'Skranji', 'Slabo 13px', 'Slabo 27px', 'Slackey', 'Smokum', 'Smooch', 'Smooch Sans', 'Smythe', 'Sniglet', 'Snippet', 'Snowburst One', 'Sofadi One', 'Sofia', 'Sofia Sans', 'Sofia Sans Condensed', 'Sofia Sans Extra Condensed', 'Sofia Sans Semi Condensed', 'Solitreo', 'Solway', 'Song Myung', 'Sono', 'Sonsie One', 'Sora', 'Sorts Mill Goudy', 'Source Code Pro', 'Source Sans 3', 'Source Sans Pro', 'Source Serif 4', 'Source Serif Pro', 'Space Grotesk', 'Space Mono', 'Special Elite', 'Spectral', 'Spectral SC', 'Spicy Rice', 'Spinnaker', 'Spirax', 'Splash', 'Spline Sans', 'Spline Sans Mono', 'Squada One', 'Square Peg', 'Sree Krushnadevaraya', 'Sriracha', 'Srisakdi', 'Staatliches', 'Stalemate', 'Stalinist One', 'Stardos Stencil', 'Stick', 'Stick No Bills', 'Stint Ultra Condensed', 'Stint Ultra Expanded', 'Stoke', 'Strait', 'Style Script', 'Stylish', 'Sue Ellen Francisco', 'Suez One', 'Sulphur Point', 'Sumana', 'Sunflower', 'Sunshiney', 'Supermercado One', 'Sura', 'Suranna', 'Suravaram', 'Suwannaphum', 'Swanky and Moo Moo', 'Syncopate', 'Syne', 'Syne Mono', 'Syne Tactile', 'Tac One', 'Tai Heritage Pro', 'Tajawal', 'Tangerine', 'Tapestry', 'Taprom', 'Tauri', 'Taviraj', 'Teko', 'Telex', 'Tenali Ramakrishna', 'Tenor Sans', 'Text Me One', 'Texturina', 'Thasadith', 'The Girl Next Door', 'The Nautigal', 'Tienne', 'Tillana', 'Tilt Neon', 'Tilt Prism', 'Tilt Warp', 'Timmana', 'Tinos', 'Tiro Bangla', 'Tiro Devanagari Marathi', 'Tiro Devanagari Sanskrit', 'Tiro Gurmukhi', 'Tiro Kannada', 'Tiro Tamil', 'Tiro Telugu', 'Titan One', 'Titillium Web', 'Tomorrow', 'Tourney', 'Trade Winds', 'Train One', 'Trirong', 'Trispace', 'Trocchi', 'Trochut', 'Truculenta', 'Trykker', 'Tsukimi Rounded', 'Tulpen One', 'Turret Road', 'Twinkle Star', 'Ubuntu', 'Ubuntu Condensed', 'Ubuntu Mono', 'Uchen', 'Ultra', 'Unbounded', 'Uncial Antiqua', 'Underdog', 'Unica One', 'UnifrakturCook', 'UnifrakturMaguntia', 'Unkempt', 'Unlock', 'Unna', 'Updock', 'Urbanist', 'Vast Shadow', 'Vazirmatn', 'Vesper Libre', 'Viaoda Libre', 'Vibes', 'Vibur', 'Vidaloka', 'Viga', 'Voces', 'Volkhov', 'Vollkorn', 'Vollkorn SC', 'Voltaire', 'Vujahday Script', 'Waiting for the Sunrise', 'Wallpoet', 'Walter Turncoat', 'Warnes', 'Waterfall', 'Wavefont', 'Wellfleet', 'Wendy One', 'Whisper', 'WindSong', 'Wire One', 'Work Sans', 'Wix Madefor Display', 'Wix Madefor Text', 'Xanh Mono', 'Yaldevi', 'Yanone Kaffeesatz', 'Yantramanav', 'Yatra One', 'Yellowtail', 'Yeon Sung', 'Yeseva One', 'Yesteryear', 'Yomogi', 'Yrsa', 'Ysabeau', 'Ysabeau Infant', 'Ysabeau Office', 'Ysabeau SC', 'Yuji Boku', 'Yuji Hentaigana Akari', 'Yuji Hentaigana Akebono', 'Yuji Mai', 'Yuji Syuku', 'Yusei Magic', 'ZCOOL KuaiLe', 'ZCOOL QingKe HuangYou', 'ZCOOL XiaoWei', 'Zen Antique', 'Zen Antique Soft', 'Zen Dots', 'Zen Kaku Gothic Antique', 'Zen Kaku Gothic New', 'Zen Kurenaido', 'Zen Loop', 'Zen Maru Gothic', 'Zen Old Mincho', 'Zen Tokyo Zoo', 'Zeyada', 'Zhi Mang Xing', 'Zilla Slab', 'Zilla Slab Highlight'];
 
 var _excluded$1 = ["fontFamily"];
+var _positionMenuItemSx = {
+  textTransform: 'none',
+  fontSize: 12,
+  fontWeight: 400,
+  color: '#333',
+  justifyContent: 'flex-start',
+  px: 1,
+  py: 0.6,
+  minWidth: 0,
+  '&:hover': {
+    backgroundColor: 'rgba(13,131,205,0.08)'
+  }
+};
+
+// ── Font preview: lightweight Google Font subsets for dropdown ──
 var _fontPreviewLoaded = new Set();
 function loadFontPreview(fontFamily) {
   if (_fontPreviewLoaded.has(fontFamily)) return;
@@ -8743,10 +8923,270 @@ var LineToolbar = observer(function (_ref7) {
   });
 });
 
-// Common controls for all element types
-var CommonControls = observer(function (_ref8) {
+// Position + alignment popover button
+var PositionButton = observer(function (_ref8) {
   var element = _ref8.element,
     store = _ref8.store;
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    anchorEl = _useState4[0],
+    setAnchorEl = _useState4[1];
+  var open = Boolean(anchorEl);
+  var pageW = store.width;
+  var pageH = store.height;
+  var alignEl = function alignEl(xVal, yVal) {
+    var attrs = {};
+    if (xVal !== null) attrs.x = xVal;
+    if (yVal !== null) attrs.y = yVal;
+    element.set(attrs);
+    store.history.addUndoState();
+  };
+  var layer = function layer(fn) {
+    fn();
+    store.history.addUndoState();
+  };
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Button, {
+      size: "small",
+      onClick: function onClick(e) {
+        return setAnchorEl(e.currentTarget);
+      },
+      startIcon: /*#__PURE__*/jsx(OpenWithIcon, {
+        sx: {
+          fontSize: '16px !important'
+        }
+      }),
+      sx: _objectSpread2({
+        textTransform: 'none',
+        fontSize: 12,
+        whiteSpace: 'nowrap',
+        px: 1.5,
+        minWidth: 'auto'
+      }, open ? {
+        backgroundColor: '#e3f2fd',
+        color: '#0d83cd'
+      } : {}),
+      children: t('toolbar.position', 'Position')
+    }), /*#__PURE__*/jsxs(Popover, {
+      open: open,
+      anchorEl: anchorEl,
+      onClose: function onClose() {
+        return setAnchorEl(null);
+      },
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'left'
+      },
+      slotProps: {
+        paper: {
+          sx: {
+            mt: 0.5,
+            p: 2,
+            width: 300,
+            borderRadius: '10px',
+            boxShadow: '0 4px 20px rgba(0,0,0,0.12)'
+          }
+        }
+      },
+      children: [/*#__PURE__*/jsx(Typography, {
+        variant: "caption",
+        sx: {
+          fontWeight: 700,
+          color: '#111',
+          display: 'block',
+          mb: 1,
+          fontSize: 12
+        },
+        children: t('toolbar.layering', 'Layer order')
+      }), /*#__PURE__*/jsxs(Box, {
+        sx: {
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: 0.5,
+          mb: 2
+        },
+        children: [/*#__PURE__*/jsx(Button, {
+          size: "small",
+          startIcon: /*#__PURE__*/jsx(ArrowUpwardIcon, {}),
+          onClick: function onClick() {
+            return layer(function () {
+              return element.moveUp();
+            });
+          },
+          sx: _positionMenuItemSx,
+          children: t('toolbar.up', 'Up')
+        }), /*#__PURE__*/jsx(Button, {
+          size: "small",
+          startIcon: /*#__PURE__*/jsx(ArrowDownwardIcon, {}),
+          onClick: function onClick() {
+            return layer(function () {
+              return element.moveDown();
+            });
+          },
+          sx: _positionMenuItemSx,
+          children: t('toolbar.down', 'Down')
+        }), /*#__PURE__*/jsx(Button, {
+          size: "small",
+          startIcon: /*#__PURE__*/jsx(VerticalAlignTopIcon, {}),
+          onClick: function onClick() {
+            return layer(function () {
+              return element.moveTop();
+            });
+          },
+          sx: _positionMenuItemSx,
+          children: t('toolbar.toForward', 'To front')
+        }), /*#__PURE__*/jsx(Button, {
+          size: "small",
+          startIcon: /*#__PURE__*/jsx(VerticalAlignBottomIcon, {}),
+          onClick: function onClick() {
+            return layer(function () {
+              return element.moveBottom();
+            });
+          },
+          sx: _positionMenuItemSx,
+          children: t('toolbar.toBottom', 'To back')
+        })]
+      }), /*#__PURE__*/jsx(Divider, {
+        sx: {
+          mb: 1.5
+        }
+      }), /*#__PURE__*/jsx(Typography, {
+        variant: "caption",
+        sx: {
+          fontWeight: 700,
+          color: '#111',
+          display: 'block',
+          mb: 1,
+          fontSize: 12
+        },
+        children: t('toolbar.position', 'Position')
+      }), function () {
+        var cx = (pageW - element.width) / 2;
+        var cy = (pageH - element.height) / 2;
+        var rx = pageW - element.width;
+        var by = pageH - element.height;
+        var positions = [{
+          label: 'Top left',
+          x: 0,
+          y: 0,
+          row: 0,
+          col: 0
+        }, {
+          label: 'Top center',
+          x: cx,
+          y: 0,
+          row: 0,
+          col: 1
+        }, {
+          label: 'Top right',
+          x: rx,
+          y: 0,
+          row: 0,
+          col: 2
+        }, {
+          label: 'Middle left',
+          x: 0,
+          y: cy,
+          row: 1,
+          col: 0
+        }, {
+          label: 'Center',
+          x: cx,
+          y: cy,
+          row: 1,
+          col: 1
+        }, {
+          label: 'Middle right',
+          x: rx,
+          y: cy,
+          row: 1,
+          col: 2
+        }, {
+          label: 'Bottom left',
+          x: 0,
+          y: by,
+          row: 2,
+          col: 0
+        }, {
+          label: 'Bottom center',
+          x: cx,
+          y: by,
+          row: 2,
+          col: 1
+        }, {
+          label: 'Bottom right',
+          x: rx,
+          y: by,
+          row: 2,
+          col: 2
+        }];
+        return /*#__PURE__*/jsx(Box, {
+          sx: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(3, 1fr)',
+            gap: 0.5
+          },
+          children: positions.map(function (_ref9) {
+            var label = _ref9.label,
+              x = _ref9.x,
+              y = _ref9.y;
+            return /*#__PURE__*/jsx(Tooltip, {
+              title: label,
+              placement: "top",
+              children: /*#__PURE__*/jsx(IconButton, {
+                size: "small",
+                onClick: function onClick() {
+                  return alignEl(x, y);
+                },
+                sx: {
+                  borderRadius: '6px',
+                  border: '1px solid #e0e0e0',
+                  p: 0.75,
+                  '&:hover': {
+                    backgroundColor: 'rgba(13,131,205,0.08)',
+                    borderColor: '#0d83cd'
+                  }
+                },
+                children: /*#__PURE__*/jsx(Box, {
+                  sx: {
+                    display: 'grid',
+                    gridTemplateColumns: 'repeat(3, 5px)',
+                    gap: '2px'
+                  },
+                  children: [0, 1, 2].map(function (r) {
+                    return [0, 1, 2].map(function (c) {
+                      return /*#__PURE__*/jsx(Box, {
+                        sx: {
+                          width: 5,
+                          height: 5,
+                          borderRadius: '1px',
+                          backgroundColor: r === positions.find(function (p) {
+                            return p.label === label;
+                          }).row && c === positions.find(function (p) {
+                            return p.label === label;
+                          }).col ? '#0d83cd' : '#ccc'
+                        }
+                      }, "".concat(r, "-").concat(c));
+                    });
+                  })
+                })
+              })
+            }, label);
+          })
+        });
+      }()]
+    })]
+  });
+});
+
+// Common controls for all element types
+var CommonControls = observer(function (_ref0) {
+  var element = _ref0.element,
+    store = _ref0.store;
   var isLocked = element.locked;
   var handleDuplicate = function handleDuplicate() {
     if (element.clone) {
@@ -8787,14 +9227,6 @@ var CommonControls = observer(function (_ref8) {
   var handleOpacityCommit = function handleOpacityCommit() {
     store.history.addUndoState();
   };
-  var handleMoveUp = function handleMoveUp() {
-    element.moveUp();
-    store.history.addUndoState();
-  };
-  var handleMoveDown = function handleMoveDown() {
-    element.moveDown();
-    store.history.addUndoState();
-  };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Tooltip, {
       title: t('toolbar.opacity', 'Opacity'),
@@ -8829,24 +9261,9 @@ var CommonControls = observer(function (_ref8) {
       sx: {
         mx: 0.5
       }
-    }), /*#__PURE__*/jsx(Tooltip, {
-      title: t('toolbar.up', 'Move up'),
-      children: /*#__PURE__*/jsx(IconButton, {
-        size: "small",
-        onClick: handleMoveUp,
-        children: /*#__PURE__*/jsx(ArrowUpwardIcon, {
-          fontSize: "small"
-        })
-      })
-    }), /*#__PURE__*/jsx(Tooltip, {
-      title: t('toolbar.down', 'Move down'),
-      children: /*#__PURE__*/jsx(IconButton, {
-        size: "small",
-        onClick: handleMoveDown,
-        children: /*#__PURE__*/jsx(ArrowDownwardIcon, {
-          fontSize: "small"
-        })
-      })
+    }), /*#__PURE__*/jsx(PositionButton, {
+      element: element,
+      store: store
     }), /*#__PURE__*/jsx(Divider, {
       orientation: "vertical",
       flexItem: true,
@@ -8890,26 +9307,26 @@ var CommonControls = observer(function (_ref8) {
 });
 
 // Download button with format/quality popover
-var DefaultDownloadButton = observer(function (_ref9) {
-  var store = _ref9.store;
-  var _useState3 = useState(null),
-    _useState4 = _slicedToArray(_useState3, 2),
-    anchorEl = _useState4[0],
-    setAnchorEl = _useState4[1];
-  var _useState5 = useState('png'),
+var DefaultDownloadButton = observer(function (_ref1) {
+  var store = _ref1.store;
+  var _useState5 = useState(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    fileType = _useState6[0],
-    setFileType = _useState6[1];
+    anchorEl = _useState6[0],
+    setAnchorEl = _useState6[1];
+  var _useState7 = useState('png'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fileType = _useState8[0],
+    setFileType = _useState8[1];
   // Default quality so pixelRatio=1 (output = template's own pixel size).
   // qualityToPixelRatio(q) = q * 3, so q = 1/3 → pixelRatio = 1.
-  var _useState7 = useState(1 / 3),
-    _useState8 = _slicedToArray(_useState7, 2),
-    quality = _useState8[0],
-    setQuality = _useState8[1];
-  var _useState9 = useState(false),
+  var _useState9 = useState(1 / 3),
     _useState0 = _slicedToArray(_useState9, 2),
-    exporting = _useState0[0],
-    setExporting = _useState0[1];
+    quality = _useState0[0],
+    setQuality = _useState0[1];
+  var _useState1 = useState(false),
+    _useState10 = _slicedToArray(_useState1, 2),
+    exporting = _useState10[0],
+    setExporting = _useState10[1];
   var open = Boolean(anchorEl);
   var handleClick = function handleClick(e) {
     setAnchorEl(e.currentTarget);
@@ -9142,15 +9559,15 @@ var DefaultDownloadButton = observer(function (_ref9) {
 });
 
 // Import button — loads a JSON template file into the store
-var DefaultImportButton = observer(function (_ref1) {
-  var store = _ref1.store;
-  var _useState1 = useState(false),
-    _useState10 = _slicedToArray(_useState1, 2),
-    importing = _useState10[0],
-    setImporting = _useState10[1];
+var DefaultImportButton = observer(function (_ref11) {
+  var store = _ref11.store;
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    importing = _useState12[0],
+    setImporting = _useState12[1];
   var fileInputRef = React.useRef(null);
   var handleFileChange = useCallback(/*#__PURE__*/function () {
-    var _ref10 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+    var _ref12 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
       var _e$target$files;
       var file, text, jsonData, _t3;
       return _regenerator().w(function (_context2) {
@@ -9188,7 +9605,7 @@ var DefaultImportButton = observer(function (_ref1) {
       }, _callee2, null, [[2, 4, 5, 6]]);
     }));
     return function (_x) {
-      return _ref10.apply(this, arguments);
+      return _ref12.apply(this, arguments);
     };
   }(), [store]);
   return /*#__PURE__*/jsxs(Fragment, {
@@ -9254,10 +9671,10 @@ var rowSx = {
     display: 'none'
   }
 };
-var Toolbar = observer(function (_ref11) {
-  var store = _ref11.store,
-    _ref11$components = _ref11.components,
-    components = _ref11$components === void 0 ? {} : _ref11$components;
+var Toolbar = observer(function (_ref13) {
+  var store = _ref13.store,
+    _ref13$components = _ref13.components,
+    components = _ref13$components === void 0 ? {} : _ref13$components;
   var ActionControls = components.ActionControls;
   var ImportButton = 'ImportButton' in components ? components.ImportButton : DefaultImportButton;
   var DownloadButton = 'DownloadButton' in components ? components.DownloadButton : DefaultDownloadButton;
@@ -9949,8 +10366,10 @@ var TextElementComponent = observer(function (_ref) {
     var scaleY = absScale.y;
     var cssFontStyle = element.fontStyle === 'italic' ? 'italic' : 'normal';
     var cssFontWeight = String(element.fontWeight || 'normal');
+    var originalText = element.text;
     var textarea = document.createElement('textarea');
-    textarea.value = element.text;
+    textarea.value = '';
+    textarea.placeholder = originalText;
     textarea.style.position = 'absolute';
     textarea.style.top = "".concat(textPosition.y, "px");
     textarea.style.left = "".concat(textPosition.x, "px");
@@ -9983,15 +10402,21 @@ var TextElementComponent = observer(function (_ref) {
     textarea.style.wordBreak = 'break-word';
     textarea.style.minHeight = '0';
     textarea.style.minWidth = '0';
+
+    // Placeholder inherits the element's text color at 40% opacity
+    var placeholderStyle = document.createElement('style');
+    placeholderStyle.textContent = "\n      textarea:placeholder-shown { opacity: 1; }\n      textarea::placeholder { color: ".concat(element.fill, "; opacity: 0.4; }\n    ");
+    stageContainer.appendChild(placeholderStyle);
     stageContainer.appendChild(textarea);
     textarea.focus();
-    textarea.select();
     var removed = false;
     var removeTextarea = function removeTextarea() {
+      var cancel = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
       if (removed) return;
       removed = true;
+      var newText = !cancel && textarea.value.length > 0 ? textarea.value : originalText;
       element.set({
-        text: textarea.value
+        text: newText
       });
       element.toggleEditMode(false);
       if (grp) grp.show();
@@ -9999,12 +10424,15 @@ var TextElementComponent = observer(function (_ref) {
       if (textarea.parentNode) {
         textarea.parentNode.removeChild(textarea);
       }
+      if (placeholderStyle.parentNode) {
+        placeholderStyle.parentNode.removeChild(placeholderStyle);
+      }
     };
-    textarea.addEventListener('blur', removeTextarea);
+    textarea.addEventListener('blur', function () {
+      return removeTextarea(false);
+    });
     textarea.addEventListener('keydown', function (e) {
-      if (e.key === 'Escape') {
-        removeTextarea();
-      }
+      if (e.key === 'Escape') removeTextarea(true);
     });
   };
 
@@ -11164,6 +11592,7 @@ var InputFieldsDialog = observer(function (_ref2) {
     setDisplayIndex = _useState8[1];
   var initialTotalRef = useRef(0);
   var completedHistoryRef = useRef([]);
+  var removedDueToSkipRef = useRef([]);
   var isGoingBackRef = useRef(false);
   var prevBackTriggerRef = useRef(backTrigger);
   var config = getInputFieldsConfig();
@@ -11206,14 +11635,24 @@ var InputFieldsDialog = observer(function (_ref2) {
     var last = completedHistoryRef.current.pop();
     if (!last) return;
     var el = last.el,
-      previousValue = last.previousValue;
+      previousValue = last.previousValue,
+      removed = last.removed;
     if (el) {
       var isImage = el.custom && el.custom.inputType === 'image';
-      el.set(isImage ? {
-        src: previousValue || ''
-      } : {
-        text: previousValue || ''
-      });
+      if (removed) {
+        el.set({
+          visible: true
+        });
+        removedDueToSkipRef.current = removedDueToSkipRef.current.filter(function (e) {
+          return e.id !== el.id;
+        });
+      } else {
+        el.set(isImage ? {
+          src: previousValue || ''
+        } : {
+          text: previousValue || ''
+        });
+      }
       isGoingBackRef.current = true;
       store._unresolveInputField(el);
     }
@@ -11231,6 +11670,15 @@ var InputFieldsDialog = observer(function (_ref2) {
   var currentField = fields[0];
   if (!currentField) return null;
 
+  // ── Helper: clear the removed-elements tracking ref ──────────────────
+  // Elements are kept in the canvas with visible:false — they don't render
+  // on screen or in exports, and can be restored via back navigation at any
+  // point (including back-from-summary via backTrigger) without touching
+  // deleted MST nodes.
+  var _flushRemovedElements = function _flushRemovedElements() {
+    removedDueToSkipRef.current = [];
+  };
+
   // ── Shared submit / skip / back helpers ─────────────────────────────
   var handleSubmit = function handleSubmit(elementId, value) {
     var el = store.getElementById(elementId);
@@ -11254,6 +11702,7 @@ var InputFieldsDialog = observer(function (_ref2) {
     }
     store._resolveInputField(elementId);
     if (fields.length <= 1) {
+      _flushRemovedElements();
       store.history.addUndoState();
       if (_onComplete) _onComplete();
     } else {
@@ -11266,13 +11715,24 @@ var InputFieldsDialog = observer(function (_ref2) {
     var el = store.getElementById(elementId);
     var isImage = el && el.custom && el.custom.inputType === 'image';
     var previousValue = el ? isImage ? el.src : el.text : '';
+    var shouldRemove = !!(el && el.custom && el.custom.removeIfSkipped);
+    if (shouldRemove) {
+      el.set({
+        visible: false
+      });
+      removedDueToSkipRef.current.push(el);
+    }
     completedHistoryRef.current.push({
       el: el,
       previousValue: previousValue,
-      skipped: true
+      skipped: true,
+      removed: shouldRemove
     });
     store._resolveInputField(elementId);
     if (fields.length <= 1) {
+      var hadRemovals = removedDueToSkipRef.current.length > 0;
+      _flushRemovedElements();
+      if (hadRemovals) store.history.addUndoState();
       if (_onComplete) _onComplete();
     } else {
       setDisplayIndex(function (prev) {
@@ -11284,14 +11744,24 @@ var InputFieldsDialog = observer(function (_ref2) {
     var last = completedHistoryRef.current.pop();
     if (!last) return;
     var el = last.el,
-      previousValue = last.previousValue;
+      previousValue = last.previousValue,
+      removed = last.removed;
     if (el) {
       var isImage = el.custom && el.custom.inputType === 'image';
-      el.set(isImage ? {
-        src: previousValue || ''
-      } : {
-        text: previousValue || ''
-      });
+      if (removed) {
+        el.set({
+          visible: true
+        });
+        removedDueToSkipRef.current = removedDueToSkipRef.current.filter(function (e) {
+          return e.id !== el.id;
+        });
+      } else {
+        el.set(isImage ? {
+          src: previousValue || ''
+        } : {
+          text: previousValue || ''
+        });
+      }
       store._unresolveInputField(el);
     }
     setDisplayIndex(function (prev) {
@@ -11325,6 +11795,7 @@ var InputFieldsDialog = observer(function (_ref2) {
       onBack: handleBack,
       canGoBack: canGoBack,
       onComplete: function onComplete() {
+        _flushRemovedElements();
         store.history.addUndoState();
         if (_onComplete) _onComplete();
       }