kritzel-stencil 0.0.105 → 0.0.107

package/dist/cjs/kritzel-brush-style_18.cjs.entry.js

@@ -22,7 +22,7 @@ const KritzelBrushStyle = class {
             value: option.value,
             label: option.label,
         }));
-        return (index.h(index.Host, { key: 'cb9a9485596d25280c6d96e30296ed8c6b3de0e1' }, index.h("kritzel-dropdown", { key: 'b2f22f627e91228ca42bcd2898b468fcb994d5f8', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, index.h("button", { key: '1a8ab8cc0917bcdcbbbd485354853b80dd2f9a7f', class: "brush-style-button", slot: "prefix" }, index.h("kritzel-icon", { key: '62238f43f6a88a0a01d47e56d48179834edc4fc1', name: this.type, size: 16 })))));
+        return (index.h(index.Host, { key: 'd7af382fe6f613aa16a5146785990ad2faa17f60' }, index.h("kritzel-dropdown", { key: '6d6d330d415c210058834b2968774b3db2ab7fc4', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, index.h("button", { key: 'c9fb33795b8e25f68c1d2ae248dc82a6de29e199', class: "brush-style-button", slot: "prefix" }, index.h("kritzel-icon", { key: '975c95b545a1c27ae2984405ac298592eec9743d', name: this.type, size: 16 })))));
     }
 };
 KritzelBrushStyle.style = kritzelBrushStyleCss;
@@ -60,13 +60,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (index.h(index.Host, { key: 'e913815994a30d97f92781e742c4a13de19e59fe' }, index.h("div", { key: 'e0cc40b10dcb298f5b86be7d4283d6bffbd08c2c', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: '19ad3872a132c885c612dc3b96698a0c8dc7214d' }, index.h("div", { key: 'f67108e82396cbaa3d070c8dfc83da2b080ddf47', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '5e0a092a6d3463d852a1760d125fba04494e0d90', class: {
+            } }, index.h("div", { key: '1af0cc3e9f6eebc04cae2367510ef3b98420a818', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -136,7 +136,7 @@ const KritzelContextMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'dfbafed8ab0ab62e8124763431e00283ddfc9aaa' }, index.h("div", { key: 'd0d7cf6241d24bd85ca2f4d2aa3e23aeb4283d82', class: "menu-container" }, this.items.map(item => (index.h("button", { key: `${item.label}-${this.items.indexOf(item)}`, class: { 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }, onClick: () => this.handleItemClick(item), onTouchStart: () => this.handleItemClick(item), disabled: typeof item.disabled === 'function' ? item.disabled() : item.disabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
+        return (index.h(index.Host, { key: 'db318a0936f89f202ef5101447b723c0ba7aa139' }, index.h("div", { key: '53da01021464f605e08c5f910997bb8f21d481a1', class: "menu-container" }, this.items.map(item => (index.h("button", { key: `${item.label}-${this.items.indexOf(item)}`, class: { 'menu-item': true, 'disabled': typeof item.disabled === 'function' ? item.disabled() : item.disabled }, onClick: () => this.handleItemClick(item), onTouchStart: () => this.handleItemClick(item), disabled: typeof item.disabled === 'function' ? item.disabled() : item.disabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
     }
     get hostElement() { return index.getElement(this); }
 };
@@ -175,14 +175,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '1658cc6062f9a62c11a7011e36bd5f892653f691' }, index.h("div", { key: 'bfafd20ebc6f7541e6a0952b555e3aefd0524086', style: {
+        return (index.h(index.Host, { key: '8e7930fcc093f7277ed088d8ec5e54e4cd051b86' }, index.h("div", { key: '08bd37b90decc9054c05d646aabbba0a4985d04c', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-brush-style", { key: '6530b0fbee10db66f6dfd0e482e2a95279f303eb', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: 'f16a4c5aefb298228d29576d6bf8a0632301169d', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: '138726189ee12b0d15dedfdbd07019701712ea3b', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'ca15a07a28ad955d49289299265e1b62da508cfd', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '1017df7a36bad69af055fe08e685a1be3ff48b4b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-brush-style", { key: 'f79744fb6523d0b4fa67c324cbf8ff3eb8a0308d', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: 'dc3bdd90cebb29f2357e13dbc8d2dcaf02ae056e', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: '6e9e6de7fc7c708aad700498e030d2ad7364a9f3', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'c1ffd48a475754bb1447e9d866b494fd3476f050', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '38e265b42fe09d0105e0385d7ec8e7d8d318abb0', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -454,7 +454,7 @@ class KritzelBaseObject {
     get centerY() {
         return this.translateY + this.totalHeight / 2;
     }
-    constructor(store) {
+    constructor() {
         this.__class__ = 'KritzelBaseObject';
         this.visible = true;
         this.borderWidth = 0;
@@ -467,9 +467,14 @@ class KritzelBaseObject {
         this.isMounted = false;
         this.zIndex = 0;
         this.debugInfoVisible = false;
-        this._store = store;
         this.id = this.generateId();
     }
+    static create(store) {
+        const object = new KritzelBaseObject();
+        object._store = store;
+        object.zIndex = store.currentZIndex;
+        return object;
+    }
     mount(element) {
         if (this.isMounted) {
             return;
@@ -528,12 +533,8 @@ class KritzelBaseObject {
 }
 
 class KritzelPath extends KritzelBaseObject {
-    get viewBox() {
-        return `${this.x} ${this.y} ${this.width} ${this.height}`;
-    }
-    constructor(store, options) {
-        var _a, _b, _c, _d, _e, _f;
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KritzelPath';
         this.stroke = 'none';
         this.lineSlack = 0.5;
@@ -544,16 +545,26 @@ class KritzelPath extends KritzelBaseObject {
         this.scale = 1;
         this.visible = true;
         this.debugInfoVisible = true;
-        this.options = options;
-        this.points = (_a = options === null || options === void 0 ? void 0 : options.points) !== null && _a !== void 0 ? _a : [];
-        this.translateX = (_b = options === null || options === void 0 ? void 0 : options.translateX) !== null && _b !== void 0 ? _b : 0;
-        this.translateY = (_c = options === null || options === void 0 ? void 0 : options.translateY) !== null && _c !== void 0 ? _c : 0;
-        this.scale = (_d = options === null || options === void 0 ? void 0 : options.scale) !== null && _d !== void 0 ? _d : 1;
-        this.strokeWidth = (_e = options === null || options === void 0 ? void 0 : options.strokeWidth) !== null && _e !== void 0 ? _e : 8;
-        this.fill = (_f = options === null || options === void 0 ? void 0 : options.fill) !== null && _f !== void 0 ? _f : '#000000';
-        this.zIndex = 9999;
-        this.d = this.generateSvgPath();
-        this.updateDimensions();
+    }
+    get viewBox() {
+        return `${this.x} ${this.y} ${this.width} ${this.height}`;
+    }
+    static create(store, options) {
+        var _a, _b, _c, _d, _e, _f;
+        const object = new KritzelPath();
+        object._store = store;
+        object.id = object.generateId();
+        object.options = options;
+        object.points = (_a = options === null || options === void 0 ? void 0 : options.points) !== null && _a !== void 0 ? _a : [];
+        object.translateX = (_b = options === null || options === void 0 ? void 0 : options.translateX) !== null && _b !== void 0 ? _b : 0;
+        object.translateY = (_c = options === null || options === void 0 ? void 0 : options.translateY) !== null && _c !== void 0 ? _c : 0;
+        object.scale = (_d = options === null || options === void 0 ? void 0 : options.scale) !== null && _d !== void 0 ? _d : 1;
+        object.strokeWidth = (_e = options === null || options === void 0 ? void 0 : options.strokeWidth) !== null && _e !== void 0 ? _e : 8;
+        object.fill = (_f = options === null || options === void 0 ? void 0 : options.fill) !== null && _f !== void 0 ? _f : '#000000';
+        object.zIndex = store.currentZIndex;
+        object.d = object.generateSvgPath();
+        object.updateDimensions();
+        return object;
     }
     resize(x, y, width, height) {
         if (width <= 1 || height <= 1) {
@@ -700,7 +711,7 @@ class KritzelBrushTool extends KritzelBaseTool {
             this._store.state.isDrawing = true;
             const x = event.clientX - this._store.offsetX;
             const y = event.clientY - this._store.offsetY;
-            this._store.state.currentPath = new KritzelPath(this._store, {
+            this._store.state.currentPath = KritzelPath.create(this._store, {
                 points: [[x, y]],
                 translateX: -this._store.state.translateX,
                 translateY: -this._store.state.translateY,
@@ -714,7 +725,7 @@ class KritzelBrushTool extends KritzelBaseTool {
         if (this._store.state.isDrawing) {
             const x = event.clientX - this._store.offsetX;
             const y = event.clientY - this._store.offsetY;
-            this._store.state.currentPath = new KritzelPath(this._store, {
+            this._store.state.currentPath = KritzelPath.create(this._store, {
                 points: [...this._store.state.currentPath.points, [x, y]],
                 translateX: -this._store.state.translateX,
                 translateY: -this._store.state.translateY,
@@ -740,7 +751,7 @@ class KritzelBrushTool extends KritzelBaseTool {
             const x = Math.round(event.touches[0].clientX - this._store.offsetX);
             const y = Math.round(event.touches[0].clientY - this._store.offsetY);
             this._store.state.isDrawing = true;
-            this._store.state.currentPath = new KritzelPath(this._store, {
+            this._store.state.currentPath = KritzelPath.create(this._store, {
                 points: [[x, y]],
                 translateX: -this._store.state.translateX,
                 translateY: -this._store.state.translateY,
@@ -755,7 +766,7 @@ class KritzelBrushTool extends KritzelBaseTool {
         if (this._store.state.touchCount === 1) {
             const x = Math.round(event.touches[0].clientX - this._store.offsetX);
             const y = Math.round(event.touches[0].clientY - this._store.offsetY);
-            this._store.state.currentPath = new KritzelPath(this._store, {
+            this._store.state.currentPath = KritzelPath.create(this._store, {
                 points: [...this._store.state.currentPath.points, [x, y]],
                 translateX: -this._store.state.translateX,
                 translateY: -this._store.state.translateY,
@@ -783,8 +794,8 @@ class KritzelText extends KritzelBaseObject {
     get isReadonly() {
         return !(this._store.state.activeTool instanceof KritzelTextTool);
     }
-    constructor(store, fontSize, fontFamily) {
-        super(store);
+    constructor(config) {
+        super();
         this.__class__ = 'KritzelText';
         this.value = '';
         this.fontFamily = 'Arial';
@@ -794,16 +805,33 @@ class KritzelText extends KritzelBaseObject {
         this.isNew = true;
         this.debugInfoVisible = true;
         this.rows = 1;
-        this.fontSize = fontSize;
-        this.fontFamily = fontFamily;
-        this.translateX = 0;
-        this.translateY = 0;
-        this.width = this.initialWidth / (this._store.state.scale < 0 ? this._store.state.scale : 1);
-        this.height = (this.fontSize * 1.2) / (this._store.state.scale < 0 ? this._store.state.scale : 1);
-        this.padding = 5;
-        this.backgroundColor = 'transparent';
-        this.scale = this._store.state.scale;
-        this.value = ' ';
+        if (config) {
+            this.value = config.value || ' ';
+            this.translateX = config.translateX || 0;
+            this.translateY = config.translateY || 0;
+            this.fontSize = config.fontSize || 8;
+            this.fontFamily = config.fontFamily || 'Arial';
+            this.fontColor = config.fontColor || '#000000';
+            this.height = config.height || (this.fontSize * 1.2);
+            this.width = config.width || 0;
+            this.scale = config.scale || 1;
+        }
+    }
+    static create(store, fontSize, fontFamily) {
+        const object = new KritzelText();
+        object._store = store;
+        object.fontSize = fontSize;
+        object.fontFamily = fontFamily;
+        object.translateX = 0;
+        object.translateY = 0;
+        object.width = object.initialWidth / (object._store.state.scale < 0 ? object._store.state.scale : 1);
+        object.height = (object.fontSize * 1.2) / (object._store.state.scale < 0 ? object._store.state.scale : 1);
+        object.padding = 5;
+        object.backgroundColor = 'transparent';
+        object.scale = object._store.state.scale;
+        object.value = ' ';
+        object.zIndex = store.currentZIndex;
+        return object;
     }
     mount(element) {
         if ((this.isMounted && this.elementRef === element) || this.isInViewport() === false) {
@@ -908,6 +936,37 @@ class KritzelToolRegistry {
 }
 KritzelToolRegistry.registry = {};
 
+class KritzelKeyboardHelper {
+    static forceHideKeyboard() {
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement.blur();
+        }
+    }
+    static enableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            if (!currentContent.includes('interactive-widget=resizes-content')) {
+                currentContent += ', interactive-widget=resizes-content';
+            }
+            meta.setAttribute('content', currentContent);
+        }
+    }
+    static disableInteractiveWidget() {
+        const meta = document.querySelector('meta[name="viewport"][content*="interactive-widget=resizes-content"]');
+        if (meta) {
+            let currentContent = meta.getAttribute('content');
+            let newContent = currentContent.replace(/\s*interactive-widget=resizes-content\s*[,;]?/g, '');
+            newContent = newContent
+                .replace(/,(\s*,)+/g, ',')
+                .replace(/^,/, '')
+                .replace(/,$/, '')
+                .trim();
+            meta.setAttribute('content', newContent);
+        }
+    }
+}
+
 class KritzelTextTool extends KritzelBaseTool {
     constructor(store) {
         super(store);
@@ -955,7 +1014,7 @@ class KritzelTextTool extends KritzelBaseTool {
         }
         const clientX = event.clientX - this._store.offsetX;
         const clientY = event.clientY - this._store.offsetY;
-        const text = new KritzelText(this._store, this.fontSize, this.fontFamily);
+        const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
         text.fontColor = this.fontColor;
         text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
         text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
@@ -990,9 +1049,10 @@ class KritzelTextTool extends KritzelBaseTool {
         if (this._store.state.touchCount > 1) {
             return;
         }
+        KritzelKeyboardHelper.disableInteractiveWidget();
         const clientX = Math.round(event.touches[0].clientX - this._store.offsetX);
         const clientY = Math.round(event.touches[0].clientY - this._store.offsetY);
-        const text = new KritzelText(this._store, this.fontSize, this.fontFamily);
+        const text = KritzelText.create(this._store, this.fontSize, this.fontFamily);
         text.fontColor = this.fontColor;
         text.translateX = (clientX - this._store.state.translateX) / this._store.state.scale;
         text.translateY = (clientY - this._store.state.translateY) / this._store.state.scale;
@@ -1004,6 +1064,7 @@ class KritzelTextTool extends KritzelBaseTool {
         var _a, _b;
         (_a = this._store.state.activeText) === null || _a === void 0 ? void 0 : _a.focus();
         (_b = this._store.state.activeText) === null || _b === void 0 ? void 0 : _b.adjustTextareaSize();
+        KritzelKeyboardHelper.enableInteractiveWidget();
     }
 }
 
@@ -1204,7 +1265,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '604f5c39a01f3aea870861de0a93cd162302d7b2' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '6f69f0b5a871010581b73bff51b2ef7341389f5a', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (index.h(index.Host, { key: 'c0a9b9ebe1634ba020024efed6446791d6a65a2f' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '50c73784eaffe743823bc6a75524fa4dc98566a8', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -1308,7 +1369,7 @@ const KritzelDropdown = class {
             'has-suffix-border': this.hasSuffixContent,
             'has-prefix-border': this.hasPrefixContent,
         };
-        return (index.h(index.Host, { key: '1e4df5425e205d3709d93d71f2e7a47844a5b0f2' }, index.h("div", { key: '6e0d6fa7b35d1d9d61cf2174828d0d0f0d242683', class: "dropdown-wrapper" }, index.h("slot", { key: '07565dc0982498a9b026bc36f285eb728b5c771b', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), index.h("select", { key: 'ba618a1166681f36aae554242192e375286ba7e8', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (index.h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), index.h("slot", { key: '2731003fa214cb3aa968b48db36ab1816d563425', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
+        return (index.h(index.Host, { key: '32c5f5a4f807c1e316c91b795c005b8d30ce6189' }, index.h("div", { key: 'b1cbeff18e688da4a2f7472be290b9527a619f07', class: "dropdown-wrapper" }, index.h("slot", { key: 'b3bbb7e21c6f5620cab41aa4b1c7206b6c75fd86', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), index.h("select", { key: '8b2dcdc125bee59cf29fce7c980b755e78d5816e', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (index.h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), index.h("slot", { key: '8d83f0dea41ac959bf2392948efef33bb70d0154', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
     }
     static get watchers() { return {
         "value": ["externalValueChanged"],
@@ -1461,16 +1522,23 @@ class KritzelEraserTool extends KritzelBaseTool {
 }
 
 class KritzelImage extends KritzelBaseObject {
-    constructor(store) {
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KritzelImage';
         this.src = '';
         this.debugInfoVisible = true;
-        this.x = 0;
-        this.y = 0;
-        this.translateX = 0;
-        this.translateY = 0;
-        this.scale = this._store.state.scale;
+    }
+    static create(store) {
+        const object = new KritzelImage();
+        object._store = store;
+        object.id = object.generateId();
+        object.x = 0;
+        object.y = 0;
+        object.translateX = 0;
+        object.translateY = 0;
+        object.scale = object._store.state.scale;
+        object.zIndex = store.currentZIndex;
+        return object;
     }
     resize(x, y, width, height) {
         if (width <= 1 || height <= 1) {
@@ -1935,17 +2003,23 @@ class KritzelGeometryHelper {
 }
 
 class KrtizelSelectionBox extends KritzelBaseObject {
-    constructor(store) {
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KrtizelSelectionBox';
         this.objects = [];
-        this.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(14, 17, 17, 0.2))';
-        this.borderColor = 'var(--kritzel-selection-box-border-color, rgba(14, 17, 17, 0.5))';
-        this.borderWidth = 2;
-        this.scale = this._store.state.scale;
-        this.height = 0;
-        this.width = 0;
-        this.zIndex = 9999;
+    }
+    static create(store) {
+        const object = new KrtizelSelectionBox();
+        object._store = store;
+        object.id = object.generateId();
+        object.scale = store.state.scale;
+        object.zIndex = 99999;
+        object.backgroundColor = 'var(--kritzel-selection-box-background-color, rgba(14, 17, 17, 0.2))';
+        object.borderColor = 'var(--kritzel-selection-box-border-color, rgba(14, 17, 17, 0.5))';
+        object.borderWidth = 2;
+        object.height = 0;
+        object.width = 0;
+        return object;
     }
 }
 
@@ -2047,7 +2121,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         let clientX, clientY;
         clientX = event.clientX - this._store.offsetX;
         clientY = event.clientY - this._store.offsetY;
-        const selectionBox = new KrtizelSelectionBox(this._store);
+        const selectionBox = KrtizelSelectionBox.create(this._store);
         this.startX = (clientX - this._store.state.translateX) / this._store.state.scale;
         this.startY = (clientY - this._store.state.translateY) / this._store.state.scale;
         selectionBox.translateX = this.startX;
@@ -2068,7 +2142,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         clientY = Math.round(firstTouch.clientY - this._store.offsetY);
         this.touchStartX = clientX;
         this.touchStartY = clientY;
-        const selectionBox = new KrtizelSelectionBox(this._store);
+        const selectionBox = KrtizelSelectionBox.create(this._store);
         this.startX = (clientX - this._store.state.translateX) / this._store.state.scale;
         this.startY = (clientY - this._store.state.translateY) / this._store.state.scale;
         selectionBox.translateX = this.startX;
@@ -2130,7 +2204,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
             return;
         }
         selectedObjects.forEach(o => (o.selected = false));
-        this._store.state.selectionGroup = new KritzelSelectionGroup(this._store);
+        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
         this._store.state.selectionGroup.addOrRemove(selectedObject);
         this._store.state.selectionGroup.selected = true;
         this._store.state.selectionGroup.rotation = this._store.state.selectionGroup.objects[0].rotation;
@@ -2141,7 +2215,7 @@ class KritzelSelectionHandler extends KritzelBaseHandler {
         if (selectedObjects.length === 0) {
             return;
         }
-        this._store.state.selectionGroup = new KritzelSelectionGroup(this._store);
+        this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
         selectedObjects.forEach(o => {
             o.selected = false;
             this._store.state.selectionGroup.addOrRemove(o);
@@ -2281,7 +2355,7 @@ class KritzelSelectionTool extends KritzelBaseTool {
             return object;
         }
         else {
-            const group = new KritzelSelectionGroup(this._store);
+            const group = KritzelSelectionGroup.create(this._store);
             group.translateX = 0;
             group.translateY = 0;
             group.addOrRemove(object);
@@ -2323,16 +2397,16 @@ class KritzelReviver {
                 let revivedObj;
                 switch (obj.__class__) {
                     case 'KritzelPath':
-                        revivedObj = new KritzelPath(this._store).revive(obj);
+                        revivedObj = KritzelPath.create(this._store).revive(obj);
                         break;
                     case 'KritzelText':
-                        revivedObj = new KritzelText(this._store, obj.fontSize, obj.fontFamily).revive(obj);
+                        revivedObj = KritzelText.create(this._store, obj.fontSize, obj.fontFamily).revive(obj);
                         break;
                     case 'KritzelImage':
-                        revivedObj = new KritzelImage(this._store).revive(obj);
+                        revivedObj = KritzelImage.create(this._store).revive(obj);
                         break;
                     case 'KritzelSelectionGroup':
-                        revivedObj = new KritzelSelectionGroup(this._store).revive(obj);
+                        revivedObj = KritzelSelectionGroup.create(this._store).revive(obj);
                         break;
                     case 'KritzelBrushTool':
                         revivedObj = new KritzelBrushTool(this._store);
@@ -2367,17 +2441,23 @@ class KritzelReviver {
 }
 
 class KritzelSelectionGroup extends KritzelBaseObject {
-    constructor(store) {
-        super(store);
+    constructor() {
+        super(...arguments);
         this.__class__ = 'KritzelSelectionGroup';
         this.objects = [];
         this.unchangedObjects = [];
-        this.scale = this._store.state.scale;
-        this.zIndex = 99999;
     }
     get length() {
         return this.objects.length;
     }
+    static create(store) {
+        const object = new KritzelSelectionGroup();
+        object._store = store;
+        object.id = object.generateId();
+        object.scale = store.state.scale;
+        object.zIndex = 99999;
+        return object;
+    }
     addOrRemove(object) {
         const index = this.objects.findIndex(obj => obj.id === object.id);
         if (index === -1) {
@@ -2462,7 +2542,7 @@ class KritzelSelectionGroup extends KritzelBaseObject {
         });
     }
     copy() {
-        const selectionGroup = new KritzelSelectionGroup(this._store);
+        const selectionGroup = KritzelSelectionGroup.create(this._store);
         let currentZIndex = this._store.currentZIndex;
         this.objects.forEach(obj => {
             const copiedObject = obj.copy();
@@ -2601,7 +2681,7 @@ class KritzelImageTool extends KritzelBaseTool {
         return { scaledWidth, scaledHeight };
     }
     createKritzelImage(img, width, height) {
-        const image = new KritzelImage(this._store);
+        const image = KritzelImage.create(this._store);
         image.src = img.src;
         image.width = width;
         image.height = height;
@@ -2610,7 +2690,7 @@ class KritzelImageTool extends KritzelBaseTool {
         return image;
     }
     addImageToStore(image) {
-        const selectionGroup = new KritzelSelectionGroup(this._store);
+        const selectionGroup = KritzelSelectionGroup.create(this._store);
         selectionGroup.addOrRemove(image);
         selectionGroup.selected = true;
         const addImageCommand = new AddObjectCommand(this._store, this, image);
@@ -2780,7 +2860,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '3a2846ec3573702162d669a130420f5b0dca97bd' }, index.h("kritzel-engine", { key: '853d5558e2886c62a3a07109be23145978a0a88f' }), index.h("kritzel-controls", { key: 'eb4d48e6768b4808d3efc43ceb104de72475a4f2', controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
+        return (index.h(index.Host, { key: 'f86e43f5b908d682ba2e20e55466dcdf9f128140' }, index.h("kritzel-engine", { key: '11d72009fd277ea4379b596d57aa2a1b19b9d6bd', ref: el => (this.engineRef = el) }), index.h("kritzel-controls", { key: '4a575354c9bf117b12db7deaafaffcdcb9461bc6', ref: el => (this.controlsRef = el), controls: this.controls, style: this.hideControls ? { display: 'none' } : { display: 'flex' } })));
     }
     get host() { return index.getElement(this); }
 };
@@ -3322,9 +3402,6 @@ class KritzelStore {
             }
         }
     }
-    clearSelection() {
-        this.history.executeCommand(new RemoveSelectionGroupCommand(this, this.state.selectionGroup));
-    }
     delete() {
         if (!this.state.selectionGroup) {
             return;
@@ -3401,7 +3478,23 @@ class KritzelStore {
         });
         this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
     }
-    selectAllInViewport() {
+    selectObjects(objects) {
+        if (objects.length === 0) {
+            return;
+        }
+        const selectionGroup = KritzelSelectionGroup.create(this);
+        objects.forEach(obj => {
+            obj.selected = false;
+            selectionGroup.addOrRemove(obj);
+        });
+        selectionGroup.selected = true;
+        this.state.selectionGroup = selectionGroup;
+        if (objects.length === 1) {
+            selectionGroup.rotation = selectionGroup.objects[0].rotation;
+        }
+        this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
+    }
+    selectAllObjectsInViewport() {
         const objectsInViewport = this._state.objectsOctree
             .query({
             x: -this._state.translateX / this._state.scale,
@@ -3413,17 +3506,29 @@ class KritzelStore {
         })
             .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
-            const selectionGroup = new KritzelSelectionGroup(this);
+            const selectionGroup = KritzelSelectionGroup.create(this);
             objectsInViewport.forEach(obj => {
                 obj.selected = false;
                 selectionGroup.addOrRemove(obj);
             });
             selectionGroup.selected = true;
             this.state.isSelecting = false;
+            if (objectsInViewport.length === 1) {
+                selectionGroup.rotation = selectionGroup.objects[0].rotation;
+            }
             this.history.executeCommand(new AddSelectionGroupCommand(this, this, selectionGroup));
             this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         }
     }
+    clearSelection() {
+        const command = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
+        this.history.executeCommand(command);
+        this.state.selectionGroup = null;
+        this.state.selectionBox = null;
+        this.state.isSelecting = false;
+        this.state.isResizeHandleSelected = false;
+        this.state.isRotationHandleSelected = false;
+    }
     resetActiveText() {
         if (this.state.activeText && this.state.activeText.value === ' ') {
             this.deleteObject(this.state.activeText.id, false);
@@ -3458,15 +3563,6 @@ class KritzelStore {
         }
         return null;
     }
-    resetSelection() {
-        this.state.selectionGroup = null;
-        this.state.selectionBox = null;
-        this.state.isSelecting = false;
-        this.state.isResizeHandleSelected = false;
-        this.state.isRotationHandleSelected = false;
-        this._state.objectsOctree.remove(obj => obj instanceof KritzelSelectionGroup);
-        this.rerender();
-    }
 }
 
 class KritzelKeyHandler extends KritzelBaseHandler {
@@ -3547,14 +3643,6 @@ class KritzelKeyHandler extends KritzelBaseHandler {
     }
 }
 
-class KritzelKeyboardHelper {
-    static forceHideKeyboard() {
-        if (document.activeElement instanceof HTMLElement) {
-            document.activeElement.blur();
-        }
-    }
-}
-
 class KritzelContextMenuHandler extends KritzelBaseHandler {
     constructor(store, globalContextMenuItems, objectContextMenuItems) {
         super(store);
@@ -3606,7 +3694,7 @@ class KritzelContextMenuHandler extends KritzelBaseHandler {
         }
         const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
         if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
-            this._store.state.selectionGroup = new KritzelSelectionGroup(this._store);
+            this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
             this._store.state.selectionGroup.addOrRemove(selectedObject);
             this._store.state.selectionGroup.selected = true;
             this._store.state.selectionGroup.rotation = selectedObject.rotation;
@@ -3663,7 +3751,7 @@ const KritzelEngine = class {
                     this.paste(x, y);
                 },
             },
-            { label: 'Select All', icon: 'select-all', action: () => this.selectAllInViewport() },
+            { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
         ];
         this.objectContextMenuItems = [
             { label: 'Copy', icon: 'copy', action: () => this.copy() },
@@ -3688,7 +3776,7 @@ const KritzelEngine = class {
         this.keyHandler = new KritzelKeyHandler(this.store);
         this.store.onStateChange('activeTool', (activeTool) => {
             if (!(activeTool instanceof KritzelSelectionTool)) {
-                this.store.resetSelection();
+                this.store.clearSelection();
             }
             this.store.state.skipContextMenu = false;
             this.activeToolChange.emit(activeTool);
@@ -3874,9 +3962,6 @@ const KritzelEngine = class {
     async moveToBottom() {
         this.store.moveToBottom();
     }
-    async selectAllInViewport() {
-        this.store.selectAllInViewport();
-    }
     async undo() {
         this.store.history.undo();
     }
@@ -3888,21 +3973,63 @@ const KritzelEngine = class {
         this.store.state.selectionBox = null;
         this.store.state.isSelecting = false;
     }
+    async getObjectById(id) {
+        const object = this.store.objects.find(obj => obj.id === id);
+        return object || null;
+    }
+    async addObject(object) {
+        this.store.deselectAllObjects();
+        object.id = object.generateId();
+        object._store = this.store;
+        object.zIndex = this.store.currentZIndex;
+        const command = new AddObjectCommand(this.store, this, object);
+        this.store.history.executeCommand(command);
+        return object;
+    }
+    async updateObject(object, updatedProperties) {
+        this.store.deselectAllObjects();
+        const command = new UpdateObjectCommand(this.store, this, object, updatedProperties);
+        this.store.history.executeCommand(command);
+        return object;
+    }
+    async removeObject(object) {
+        this.store.deselectAllObjects();
+        const command = new RemoveObjectCommand(this.store, this, object);
+        this.store.history.executeCommand(command);
+        return object;
+    }
+    async selectObjects(objects) {
+        var _a;
+        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.store.deselectAllObjects();
+        this.store.selectObjects(objects);
+    }
+    async selectAllObjectsInViewport() {
+        var _a;
+        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.store.deselectAllObjects();
+        this.store.selectAllObjectsInViewport();
+    }
+    async clearSelection() {
+        this.store.clearSelection();
+    }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (index.h(index.Host, { key: '81d2f8efadded214fde44f3dbaea3b678d0b182b' }, index.h("div", { key: '6657555d40bff3b5d44733e286c4076a82ca2e98', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'e0cf766f7e8c8e7856a6b55c9c24272fa865c86e' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), index.h("div", { key: '6c979eb953d01507fd29013d9186618f8f14588b' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), index.h("div", { key: '3be6ea4a5b5eef5d07ddc48aa8ac2e57edbe0887' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), index.h("div", { key: '70aed9d3ee1227ba2a4f54a95eda27cb748f4b9f' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), index.h("div", { key: 'c2e79c4245e9f107e5512472030684e0ed617d1a' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '66f4284c2d4fd5dae03ffa9b641a28b2528ea117' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), index.h("div", { key: 'e4518d18cf923b57dceb38c07f409471bc178e9d' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), index.h("div", { key: '47ea576f9c78f3bfb3e03649a88ec0f7b544f2d7' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'fe92910fd861170651688fedbdc2f15829c15a58' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'cbe7e87d9a3be8acd47dd45f1b69314a8a9c536a' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '722a58415ae67530dfe611e03a34f30e4c1db64e' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: 'd9686a405ee05480c17358afb865a39bd64a2346' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '383f8e4a9e98b891507ff95416a20279e4d79431' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'fbda2b9f1ba4fe9daefb7f8b36d25d297b47a764' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'c1bb88c228cd6bbd2bdb0fe6bb3fd9b47d92bc2e' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '26c77aadc8cda5f27f746d0c38049d830127c81e' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '885725248c47714a49769b94ba48a3a0f59a7f97' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '035d1c72d476ea9f8110145a25084eca59cfbedc' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'd6ac0024bec7d64ca327e6a5760e427e88269b8d' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.cursorX), index.h("div", { key: 'b3bdd26eb7d5ac0fdfda0f13b7d4cde9f3712954' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.cursorY)), index.h("div", { key: '186591f736514dcdb96f22d5ab3d14347a4c51ae', class: "origin", style: {
+        return (index.h(index.Host, { key: '0c20c50e3ad8ac088902881c35c406ad2f0787d5' }, index.h("div", { key: 'a89d76b5f6a10cbc54c40d034a08b3ceb99be063', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '94345439d02de7d005bb92abb377b7ebeb91fcdb' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
+            _a.translateX), index.h("div", { key: '1e2e3ffc6ad760f089f4d02d94dfeb09bb5725cb' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
+            _b.translateY), index.h("div", { key: '36d6170934959e19b95326d84b32c9abe2385edc' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
+            _c.viewportWidth), index.h("div", { key: '57e5d37af3fd1f6ad24ea89ca525a6f0bc8e014b' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
+            _d.viewportHeight), index.h("div", { key: '8281e788e350db75bbf1fe12dd8c17b91b429135' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '9f42aad27d0a266cbc720d1e13292bea5be84770' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.scale), index.h("div", { key: '76848c1a0eb2379ee0d0314523a540dbeb3d0697' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
+            _g.name), index.h("div", { key: '77f8ff0b660227f7b25c12b74d70946bc1f66e78' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: '229e94fee90a847a853419ae61bc131221313fc6' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'f31784916ab54f9a5eda02cffebe55a1f9aaa51f' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: '4611a6dd48f1033d42fc3b7813634cbc16bf9b3b' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: '14388f4b5cca60d8a2d8d474f941b53a78ad327d' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '2f3dcd488855413e392f56718af640e369d99fae' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '2cd0e44a1d13eaf5d3a942f75a727a074bf37622' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '99d51cf25e02c9d06865bf1f847c704ad8a32110' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '87ab9908a318b238ad1fb00e91dba9c485038443' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '20f291bf45ba06b4107002e288b93f8f61ef9520' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '52244f4f0d368e7bc183eed4c65abe536d134f44' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '641edd47e7bccc7514ed6aeac3ecbead95568dde' }, "CursorX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
+            _m.cursorX), index.h("div", { key: 'bf0826a9cbc800ca0f13d4de4da7dbb21241498f' }, "CursorY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
+            _o.cursorY)), index.h("div", { key: '5659cb254f57b79ca8e33ab11a8087d5ca5088dc', class: "origin", style: {
                 transform: `matrix(${(_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale}, 0, 0, ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.translateX}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateY})`,
             } }, (_t = this.store.objects) === null || _t === void 0 ? void 0 :
             _t.map(object => {
@@ -3999,7 +4126,7 @@ const KritzelEngine = class {
                         fill: 'transparent',
                         cursor: 'grab',
                     }, visibility: object.selected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.debugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation)))))));
-            }), index.h("svg", { key: '9f862215ce2de4cc0745942bc946897f5f5e24b7', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+            }), index.h("svg", { key: '05a35ebb17312d00a4065dc6dc76f3a93a72eff4', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
                 height: (_u = this.store.state.currentPath) === null || _u === void 0 ? void 0 : _u.height.toString(),
                 width: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.width.toString(),
                 left: '0',
@@ -4009,12 +4136,12 @@ const KritzelEngine = class {
                 transform: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: 'e1f0ea5ee56c8fb753438c978750151c688e9330', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '89184b62326fcfde61ee4922ec5d640b16a191a7', ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
+            }, viewBox: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.viewBox }, index.h("path", { key: 'cb232e2697ce6ede2e4d9ed2e1b433ccde3961b5', d: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.d, fill: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.fill, stroke: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.stroke }))), this.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: 'e41b88a78bbd25f692fbdba88fda80993055a078', ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, style: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
-            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '8797da3afce7d97e0f94ec9f90522b9ad35bb71b' })));
+            }, onActionSelected: event => this.handleContextMenuAction(event) })), ((_2 = this.store.state) === null || _2 === void 0 ? void 0 : _2.activeTool) instanceof KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '1d96c0d7fa94ddcf5820fd76fbaf69c54b1face2' })));
     }
     get host() { return index.getElement(this); }
 };
@@ -4030,7 +4157,7 @@ const KritzelFont = class {
         this.color = '#000000';
     }
     render() {
-        return (index.h(index.Host, { key: '6f25832892d8042464751360cc9e2307193f5407' }, index.h("div", { key: '3d2ec48a6a3b3e347c8cc1ab6f129bfacd984776', class: "font-preview", style: {
+        return (index.h(index.Host, { key: 'd0378237899c5641ae4354f3bffb14e3f8bafb59' }, index.h("div", { key: '1475a6ae39ffc97eb780b30c85015c22cecafa6e', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -4075,7 +4202,7 @@ const KritzelFontFamily = class {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (index.h(index.Host, { key: '7ab677468a605e6b23466b73c1c93e258cf85c1a' }, index.h("kritzel-dropdown", { key: '5c2528687d1e5068d958b9f663cb0ceb46a2794e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: 'ab422c954569515f636031ddaaea2ec5f13a7bdc', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: '884116c86f3d710df58f82c10294f66aae95829e', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (index.h(index.Host, { key: 'f420ff18156d54bfc475148a7d9aae0f1441408c' }, index.h("kritzel-dropdown", { key: '6b54fb8265a0eb59a6a681c6a2b7a95fb222671c', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: 'b853c75a425c7baafa7a8e749c90c0b08884375c', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: '68dea850dd1d1f38db727d8be0eec3481890c571', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
 };
 KritzelFontFamily.style = kritzelFontFamilyCss;
@@ -4095,7 +4222,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: '20ad8f22858732c62838693c7b135dc92dbc5910' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: '1c09a403f1e8278d30b2675c3a6e17e12ec79afa' }, this.sizes.map(size => (index.h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -4188,23 +4315,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '30db4852719464fcb9c6964c34992e87a364caa3', style: {
+        return (index.h(index.Host, { key: '3161826337f6957d2e568f52cfe3f57d705af0ed', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: !this.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, index.h("div", { key: '3f270c9bdb1a5282f67034618123a5d61f9f8b40', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'bd4a11782eb2e263f21a8ab57ad64eb4fd4fe7ec' }), index.h("div", { key: '4ede173979b8e0335fb3a012b662a694dc09ea28', class: "tooltip-arrow-wrapper", style: {
+            } }, index.h("div", { key: '12fc4bc05b7be756102ce3779c9be1d51f3fe13b', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: '90f645f8f7cec371aaeda7207a9fb420b02b2ae4' }), index.h("div", { key: '73380e2c6df22bc4a97479a52315e7b34d069fa1', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, index.h("div", { key: 'c96993f91dde76cc5feb0c42dd4e599837121bf7', class: "tooltip-arrow", style: {
+            } }, index.h("div", { key: '2e13cb01a3282e161d3212f4970a93b20ca1a0fe', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), index.h("div", { key: '888f9d44f58969b3f50db04f1cd3d49008872b55', class: "tooltip-arrow-rect", style: {
+            } }), index.h("div", { key: '30ddbd00b928c0c734656d6309eaefbae5baf264', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,