kritzel-stencil 0.0.139 → 0.0.141

package/dist/cjs/kritzel-color_22.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-nzUNdMPh.js');
-var index$1 = require('./index-DgZMn9B_.js');
+var index = require('./index-DcTwXs_q.js');
+var index$1 = require('./index-BKstgWru.js');
 
 const kritzelColorCss = ":host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}";
 
@@ -37,13 +37,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (index.h(index.Host, { key: '198dba41e1600d76faace18de78191d2b7a551ec' }, index.h("div", { key: 'ee690cffb7925e09cb2c51022eec607247a4849f', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: '000e54c604c8ceca2c44365e95ec1f5bfb1b729a' }, index.h("div", { key: '77b2abeae70e4a80714e1364eb4e11e67f16d066', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: '66cc8df8fabd008db8c00942994875e3e8d722ce', class: {
+            } }, index.h("div", { key: 'df71720cf51d845a36598499adb900a30770c503', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -86,7 +86,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (index.h(index.Host, { key: '2ead7cd530ce181856e5f582f086a22a1fe69390' }, index.h("div", { key: 'fcc75b267f36e271d50615bfde42a29c28aa2536', class: {
+        return (index.h(index.Host, { key: 'd533725a8ab2019ae963959727283fbbf833c56a' }, index.h("div", { key: '7fb50c16d79e9b7330100b0f4e116f8f07b20827', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -151,7 +151,7 @@ const KritzelContextMenu = class {
         return defaultValue;
     }
     render() {
-        return (index.h(index.Host, { key: '908711e45cb4ea41f25c4f66a9d3b03c847f886e' }, index.h("div", { key: '7dcb6e5654ecafebc1fc1a2efb9fa1b8678236c4', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index$1) => (index.h("button", { key: `${item.label}-${index$1}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
+        return (index.h(index.Host, { key: '45b9652285f9c3fe7568cbe222667d23c151622f' }, index.h("div", { key: '9aecc01027f297fa4d991780efaaf51b8d4542dc', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index$1) => (index.h("button", { key: `${item.label}-${index$1}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
     }
     static get watchers() { return {
         "items": ["onItemsChanged"]
@@ -194,14 +194,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '8fe8c0564f491121c0c44c6ff4083034f92dbb67' }, index.h("div", { key: '3e8a69b827785976768bfc1e809126bee7c48c62', style: {
+        return (index.h(index.Host, { key: '4b060826312e6d5a2117f5ba9522553af9b02d6f' }, index.h("div", { key: '0975a250184d5bb2d38cc60263bd718157230d8c', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: this.isExpanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-color-palette", { key: 'c9056f81cf47d81fef0a0f5743000dcd6633258a', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("button", { key: '2f307264b80a732d976edeb025d509bc1164606b', 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: '08133ba0a23353b2bb3f87c685a7a0798b8dd16c', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-stroke-size", { key: '3de25cc80029ffdfdc173c4c79e937a7dc329743', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-color-palette", { key: 'df84a6fdda01bc7bf3aff42e3b88c4bd9dca500f', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("button", { key: 'e43c19612807fc4f9cd1bf04f4fb79a048cfd62b', 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: '915cce6c4744ad175f3836c946330882de840880', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-stroke-size", { key: 'c07eebae3ba1785e2644c6b5a22d23f76be950fb', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -235,14 +235,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '3695b187943af25566885d63257ae3de9f405ea5' }, index.h("div", { key: '7bb146ae3c188478ba17f18f70fd170ce3536308', style: {
+        return (index.h(index.Host, { key: '82e611092700f057bd36823e7f7503fe7a0423ed' }, index.h("div", { key: '37ed39adeeeb58981a917918cd185e96d589e973', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-font-family", { key: '87f4c5ac2e2a4cfea216b1b828faad231438b9ec', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '2e73aaf7da659b9e069c247cc762f68394212293', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '785b664697ba266432c535ea26e0665f8d8d657f', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'ed2517a39d254b77f45154914b3ce6a934f66c33', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '9b25c9607fa69c991e769852e3e3e378e48387bd', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-font-family", { key: 'cd8afc5c4a1eee087610cd3d5a6c05210cfda6b3', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '085f1bba060bde27a7b64dc5477bb51305b76235', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '3ff8fec207120e67f43315c6dace72fc2f6bd0f1', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '2e29d01a6b5c0e4a8ec347e63b6a2698c282db40', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: 'c972068f1251d66e756b8de72fbdd1b6002d1daa', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -376,13 +376,13 @@ const KritzelControls = class {
     }
     render() {
         const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
-        return (index.h(index.Host, { key: 'a463310d88265b71097f838bf775abdcabc99225', class: {
+        return (index.h(index.Host, { key: 'ab3e5f078d6d197c6e10c9dee180c04ef85281bf', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '267e9c26b41a52c655209dbaa8c85cbd72323577', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: '290ceb6f2c46eb7e869a4741dd6600bc7c47bbb4', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: 'c55773245c925e1b972f3e83cb4d8f1c93ebe995', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: 'd2590bc56b709e77910e7159296741c8859158d7', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 return (index.h("button", { class: {
                         'kritzel-control': true,
@@ -479,7 +479,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '87003b14680b3cbca302e7b31ff57e74cc774e25' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: 'aa6460089c9f3157d2dea9396405b14ab8cc1710', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (index.h(index.Host, { key: '10ef620f19d72a8a5c3a12d0d98686bc69308a30' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: 'd03403051e53422aaa28d6360aaa9c0391e3ef6a', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -850,7 +850,7 @@ const KritzelEditor = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'f4f7cb5fbb6b28bac0735d05c2d1ed788c8ef2a7' }, index.h("kritzel-workspace-manager", { key: 'bef6f248a06b7a6576687a82a5ea3eb81d3340c3', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-engine", { key: '8ee352db87d94c367389059074842148e43d8d11', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => (this.workspaces = event.detail) }), index.h("kritzel-controls", { key: '3e5bfa0fd473a551ba4ab7a7137aedbb3d22db19', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (index.h(index.Host, { key: '8dc4fa4d4c3512d3a0ac40d5ab67566720b8a3e4' }, index.h("kritzel-workspace-manager", { key: 'b7a032b8bb01b27af192719b46a3891037770a28', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-engine", { key: '163c4aea9d07290c89e63931ed4a4cf0184757be', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => (this.workspaces = event.detail) }), index.h("kritzel-controls", { key: '4c9307c3831f2b179a446265f3226b0ae1541afc', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, onIsControlsReady: () => (this.isControlsReady = true) })));
     }
     static get watchers() { return {
         "isEngineReady": ["onIsEngineReady"],
@@ -866,18 +866,18 @@ class KritzelViewport {
     startY = 0;
     constructor(core, host) {
         this._core = core;
-        this._core.store.setState('host', host);
-        this._core.store.setState('viewportWidth', host.clientWidth);
-        this._core.store.setState('viewportHeight', host.clientHeight);
-        this._core.store.setState('startX', 0);
-        this._core.store.setState('startY', 0);
-        this._core.store.setState('translateX', 0);
-        this._core.store.setState('translateY', 0);
+        this._core.store.state.host = host;
+        this._core.store.state.viewportWidth = host.clientWidth;
+        this._core.store.state.viewportHeight = host.clientHeight;
+        this._core.store.state.startX = 0;
+        this._core.store.state.startY = 0;
+        this._core.store.state.translateX = 0;
+        this._core.store.state.translateY = 0;
     }
     handleResize() {
-        this._core.store.setState('viewportWidth', this._core.store.state.host.clientWidth);
-        this._core.store.setState('viewportHeight', this._core.store.state.host.clientHeight);
-        this._core.store.setState('hasViewportChanged', true);
+        this._core.store.state.viewportWidth = this._core.store.state.host.clientWidth;
+        this._core.store.state.viewportHeight = this._core.store.state.host.clientHeight;
+        this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
     }
     handlePointerDown(event) {
@@ -885,16 +885,16 @@ class KritzelViewport {
             const adjustedClientX = event.clientX - this._core.store.offsetX;
             const adjustedClientY = event.clientY - this._core.store.offsetY;
             if (event.button === index$1.KritzelMouseButton.Right) {
-                this._core.store.setState('isPanning', true);
-                this._core.store.setState('startX', adjustedClientX);
-                this._core.store.setState('startY', adjustedClientY);
+                this._core.store.state.isPanning = true;
+                this._core.store.state.startX = adjustedClientX;
+                this._core.store.state.startY = adjustedClientY;
             }
         }
         if (event.pointerType === 'touch') {
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
-                this._core.store.setState('currentPath', null);
-                this._core.store.setState('isScaling', true);
+                this._core.store.state.currentPath = null;
+                this._core.store.state.isScaling = true;
                 const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
                 const firstTouchY = activePointers[0].clientY - this._core.store.offsetY;
                 const secondTouchX = activePointers[1].clientX - this._core.store.offsetX;
@@ -911,17 +911,17 @@ class KritzelViewport {
             const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._core.store.setState('pointerX', (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale);
-            this._core.store.setState('pointerY', (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale);
+            this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+            this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
             if (this._core.store.state.isPanning) {
                 const dx = xRelativeToHost - this._core.store.state.startX;
                 const dy = yRelativeToHost - this._core.store.state.startY;
-                this._core.store.setState('translateX', this._core.store.state.translateX + dx);
-                this._core.store.setState('translateY', this._core.store.state.translateY + dy);
-                this._core.store.setState('startX', xRelativeToHost);
-                this._core.store.setState('startY', yRelativeToHost);
-                this._core.store.setState('hasViewportChanged', true);
-                this._core.store.setState('skipContextMenu', true);
+                this._core.store.state.translateX += dx;
+                this._core.store.state.translateY += dy;
+                this._core.store.state.startX = xRelativeToHost;
+                this._core.store.state.startY = yRelativeToHost;
+                this._core.store.state.hasViewportChanged = true;
+                this._core.store.state.skipContextMenu = true;
                 this._core.rerender();
                 this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
             }
@@ -930,8 +930,8 @@ class KritzelViewport {
             const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._core.store.setState('pointerX', (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale);
-            this._core.store.setState('pointerY', (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale);
+            this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+            this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
             const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
                 const firstTouchX = activePointers[0].clientX - this._core.store.offsetX;
@@ -944,20 +944,20 @@ class KritzelViewport {
                 const scaleRatio = currentTouchDistance / this.initialTouchDistance;
                 const newScale = this._core.store.state.scale * scaleRatio;
                 if (newScale > this._core.store.state.scaleMax || newScale < this._core.store.state.scaleMin) {
-                    this._core.store.setState('translateX', this._core.store.state.translateX + midpointX - this.startX);
-                    this._core.store.setState('translateY', this._core.store.state.translateY + midpointY - this.startY);
+                    this._core.store.state.translateX = this._core.store.state.translateX + midpointX - this.startX;
+                    this._core.store.state.translateY = this._core.store.state.translateY + midpointY - this.startY;
                 }
                 else {
                     const translateXAdjustment = (midpointX - this._core.store.state.translateX) * (scaleRatio - 1);
                     const translateYAdjustment = (midpointY - this._core.store.state.translateY) * (scaleRatio - 1);
-                    this._core.store.setState('translateX', this._core.store.state.translateX + midpointX - this.startX - translateXAdjustment);
-                    this._core.store.setState('translateY', this._core.store.state.translateY + midpointY - this.startY - translateYAdjustment);
-                    this._core.store.setState('scale', newScale);
+                    this._core.store.state.translateX = this._core.store.state.translateX + midpointX - this.startX - translateXAdjustment;
+                    this._core.store.state.translateY = this._core.store.state.translateY + midpointY - this.startY - translateYAdjustment;
+                    this._core.store.state.scale = newScale;
                     this.initialTouchDistance = currentTouchDistance;
                 }
                 this.startX = midpointX;
                 this.startY = midpointY;
-                this._core.store.setState('hasViewportChanged', true);
+                this._core.store.state.hasViewportChanged = true;
                 this._core.rerender();
                 this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
             }
@@ -966,12 +966,12 @@ class KritzelViewport {
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
             if (this._core.store.state.isPanning) {
-                this._core.store.setState('isPanning', false);
+                this._core.store.state.isPanning = false;
                 this._core.rerender();
             }
         }
         if (event.pointerType === 'touch') {
-            this._core.store.setState('isScaling', false);
+            this._core.store.state.isScaling = false;
             this._core.rerender();
         }
     }
@@ -984,33 +984,52 @@ class KritzelViewport {
             this.handlePan(event);
         }
     }
+    centerInViewport(object) {
+        const { scale, viewportWidth, viewportHeight } = this._core.store.state;
+        const { x, y, width, height } = object.rotatedBoundingBox;
+        const objectCenterX = x + width / 2;
+        const objectCenterY = y + height / 2;
+        this._core.store.state.translateX = viewportWidth / 2 - objectCenterX * scale;
+        this._core.store.state.translateY = viewportHeight / 2 - objectCenterY * scale;
+        this._core.store.state.hasViewportChanged = true;
+        this._core.rerender();
+        this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
+    }
+    centerFitInViewport(object) {
+        const scaleX = this._core.store.state.viewportWidth / (object.rotatedBoundingBox.width * 1.1);
+        const scaleY = this._core.store.state.viewportHeight / (object.rotatedBoundingBox.height * 1.1);
+        const newScale = Math.min(scaleX, scaleY, this._core.store.state.scaleMax);
+        const clampedScale = Math.max(newScale, this._core.store.state.scaleMin);
+        this._core.store.state.scale = clampedScale;
+        this.centerInViewport(object);
+    }
     handleZoom(event) {
-        this._core.store.setState('isScaling', true);
+        this._core.store.state.isScaling = true;
         const rect = this._core.store.state.host.getBoundingClientRect();
         const xRelativeToHost = event.clientX - rect.left;
         const yRelativeToHost = event.clientY - rect.top;
-        this._core.store.setState('pointerX', (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale);
-        this._core.store.setState('pointerY', (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale);
+        this._core.store.state.pointerX = (xRelativeToHost - this._core.store.state.translateX) / this._core.store.state.scale;
+        this._core.store.state.pointerY = (yRelativeToHost - this._core.store.state.translateY) / this._core.store.state.scale;
         const delta = event.deltaY > 0 ? -this._core.store.state.scaleStep * this._core.store.state.scale : this._core.store.state.scaleStep * this._core.store.state.scale;
         const newScale = Math.min(this._core.store.state.scaleMax, Math.max(this._core.store.state.scaleMin, this._core.store.state.scale + delta));
         const scaleRatio = newScale / this._core.store.state.scale;
         const translateXAdjustment = (xRelativeToHost - this._core.store.state.translateX) * (scaleRatio - 1);
         const translateYAdjustment = (yRelativeToHost - this._core.store.state.translateY) * (scaleRatio - 1);
-        this._core.store.setState('scale', newScale);
-        this._core.store.setState('translateX', this._core.store.state.translateX - translateXAdjustment);
-        this._core.store.setState('translateY', this._core.store.state.translateY - translateYAdjustment);
-        this._core.store.setState('hasViewportChanged', true);
+        this._core.store.state.scale = newScale;
+        this._core.store.state.translateX = this._core.store.state.translateX - translateXAdjustment;
+        this._core.store.state.translateY = this._core.store.state.translateY - translateYAdjustment;
+        this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
         setTimeout(() => {
-            this._core.store.setState('isScaling', false);
+            this._core.store.state.isScaling = false;
         }, 300);
     }
     handlePan(event) {
         const panSpeed = 0.8;
-        this._core.store.setState('translateX', this._core.store.state.translateX - event.deltaX * panSpeed);
-        this._core.store.setState('translateY', this._core.store.state.translateY - event.deltaY * panSpeed);
-        this._core.store.setState('hasViewportChanged', true);
+        this._core.store.state.translateX = this._core.store.state.translateX - event.deltaX * panSpeed;
+        this._core.store.state.translateY = this._core.store.state.translateY - event.deltaY * panSpeed;
+        this._core.store.state.hasViewportChanged = true;
         this._core.rerender();
         this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
     }
@@ -1042,8 +1061,8 @@ class KritzelKeyHandler extends index$1.KritzelBaseHandler {
         },
         { key: 'v', ctrl: true, condition: c => !!c.store.state.copiedObjects && !c.store.state.activeText, action: c => c.paste() },
         // Text editing
-        { key: 'a', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.selectAll() },
-        { key: 'v', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.insertFromClipboard() },
+        // { key: 'a', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.selectAll() },
+        // { key: 'v', ctrl: true, condition: c => !!c.store.state.activeText, action: c => c.store.state.activeText.insertFromClipboard() },
         // Object layering
         { key: '+', ctrl: true, condition: c => !!c.store.state.selectionGroup, action: c => c.bringForward() },
         { key: '-', ctrl: true, condition: c => !!c.store.state.selectionGroup, action: c => c.sendBackward() },
@@ -1060,7 +1079,7 @@ class KritzelKeyHandler extends index$1.KritzelBaseHandler {
         toolInstance.onActivate();
     }
     handleKeyDown(event) {
-        this._core.store.setState('isCtrlKeyPressed', event.ctrlKey);
+        this._core.store.state.isCtrlKeyPressed = event.ctrlKey;
         const shortcut = this.shortcuts.find(s => s.key === event.key && !!s.ctrl === event.ctrlKey && !!s.shift === event.shiftKey && (!s.condition || s.condition(this._core)));
         if (shortcut) {
             event.preventDefault();
@@ -1068,7 +1087,7 @@ class KritzelKeyHandler extends index$1.KritzelBaseHandler {
         }
     }
     handleKeyUp(event) {
-        this._core.store.setState('isCtrlKeyPressed', event.ctrlKey);
+        this._core.store.state.isCtrlKeyPressed = event.ctrlKey;
     }
 }
 
@@ -1085,23 +1104,30 @@ class KritzelContextMenuHandler extends index$1.KritzelBaseHandler {
             return;
         }
         if (this._core.store.state.skipContextMenu) {
-            this._core.store.setState('skipContextMenu', false);
+            this._core.store.state.skipContextMenu = false;
             return;
         }
+        const selectionTool = this._core.store.state.activeTool;
+        selectionTool?.moveHandler?.cancelPendingDrag();
+        if (this._core.store.state.selectionBox) {
+            this._core.store.state.objectsMap.remove(object => object instanceof index$1.KrtizelSelectionBox);
+            this._core.store.state.selectionBox = null;
+            this._core.store.state.isSelecting = false;
+        }
         const selectedObject = this._core.getObjectFromPointerEvent(event, '.object');
-        if (selectedObject && !(selectedObject instanceof index$1.KritzelSelectionGroup)) {
+        if (selectedObject && !(selectedObject instanceof index$1.KritzelSelectionGroup) && !(selectedObject instanceof index$1.KrtizelSelectionBox)) {
             const selectionGroup = index$1.KritzelSelectionGroup.create(this._core);
             selectionGroup.addOrRemove(selectedObject);
             selectionGroup.isSelected = true;
             selectionGroup.rotation = selectedObject.rotation;
-            this._core.store.setState('isSelecting', false);
+            this._core.store.state.isSelecting = false;
             const batch = new index$1.BatchCommand(this._core, this, [
                 new index$1.RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup),
                 new index$1.AddSelectionGroupCommand(this._core, this, selectionGroup),
             ]);
             this._core.history.executeCommand(batch);
         }
-        this._core.store.setState('contextMenuItems', this._core.store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems);
+        this._core.store.state.contextMenuItems = this._core.store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
         let x = event.clientX - this._core.store.offsetX;
         let y = event.clientY - this._core.store.offsetY;
         const menuWidthEstimate = 150;
@@ -1115,10 +1141,10 @@ class KritzelContextMenuHandler extends index$1.KritzelBaseHandler {
         }
         x = Math.max(margin, x);
         y = Math.max(margin, y);
-        this._core.store.setState('contextMenuX', x);
-        this._core.store.setState('contextMenuY', y);
-        this._core.store.setState('isContextMenuVisible', true);
-        this._core.store.setState('isEnabled', false);
+        this._core.store.state.contextMenuX = x;
+        this._core.store.state.contextMenuY = y;
+        this._core.store.state.isContextMenuVisible = true;
+        this._core.store.state.isEnabled = false;
         this._core.rerender();
     }
 }
@@ -1439,14 +1465,14 @@ class UpdateViewportCommand extends index$1.KritzelBaseCommand {
         };
     }
     execute() {
-        this._core.store.setState('scale', this.currentViewport.scale);
-        this._core.store.setState('translateX', this.currentViewport.translateX);
-        this._core.store.setState('translateY', this.currentViewport.translateY);
+        this._core.store.state.scale = this.currentViewport.scale;
+        this._core.store.state.translateX = this.currentViewport.translateX;
+        this._core.store.state.translateY = this.currentViewport.translateY;
     }
     undo() {
-        this._core.store.setState('scale', this.previousViewport.scale);
-        this._core.store.setState('translateX', this.previousViewport.translateX);
-        this._core.store.setState('translateY', this.previousViewport.translateY);
+        this._core.store.state.scale = this.previousViewport.scale;
+        this._core.store.state.translateX = this.previousViewport.translateX;
+        this._core.store.state.translateY = this.previousViewport.translateY;
     }
 }
 
@@ -1544,7 +1570,7 @@ class KritzelHistory {
         if (this._core.store.state.hasViewportChanged) {
             const command = new UpdateViewportCommand(this._core, this, this.previousViewport);
             command.undo();
-            this._core.store.setState('hasViewportChanged', false);
+            this._core.store.state.hasViewportChanged = false;
             this._core.rerender();
             return;
         }
@@ -1555,7 +1581,7 @@ class KritzelHistory {
                 console.info('undo', command);
             this.redoStack.add(command);
         }
-        this._core.store.setState('copiedObjects', null);
+        this._core.store.state.copiedObjects = null;
         this._core.rerender();
     }
     redo() {
@@ -1575,7 +1601,7 @@ class KritzelHistory {
         if (this.redoStack.isEmpty() === false) {
             this.redoStack.clear();
         }
-        this._core.store.setState('hasViewportChanged', false);
+        this._core.store.state.hasViewportChanged = false;
         this.previousViewport = {
             scale: this._core.store.state.scale,
             scaleStep: this._core.store.state.scaleStep,
@@ -1635,11 +1661,14 @@ class KritzelStore {
         return this._state;
     }
     get currentZIndex() {
-        return this._state.objectsMap.filter(o => !(o instanceof index$1.KritzelSelectionGroup) && !(o instanceof index$1.KrtizelSelectionBox)).length;
+        return Math.max(0, ...this._state.objectsMap.filter(o => !(o instanceof index$1.KritzelSelectionGroup) && !(o instanceof index$1.KrtizelSelectionBox)).map(o => o.zIndex)) + 1;
     }
     get allObjects() {
         return this._state.objectsMap.allObjects();
     }
+    get allNonSelectionObjects() {
+        return this._state.objectsMap.allObjects().filter(o => !(o instanceof index$1.KritzelSelectionGroup) && !(o instanceof index$1.KrtizelSelectionBox));
+    }
     get selectedObjects() {
         return this.allObjects.filter(o => !(o instanceof index$1.KritzelSelectionGroup)).filter(o => o.isSelected);
     }
@@ -1713,18 +1742,21 @@ class KritzelCore {
         const workspaces = await this.getWorkspaces();
         const mostRecentWorkspace = [...workspaces].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())[0];
         const fallbackWorkspace = new index$1.KritzelWorkspace(index$1.ObjectHelper.generateUUID(), 'New Workspace');
-        this._store.setState('activeWorkspace', workspace ?? mostRecentWorkspace ?? fallbackWorkspace);
-        const isExistingWorkspace = await this.getWorkspace(this._store.state.activeWorkspace.id);
-        if (isExistingWorkspace) {
+        const candidateWorkspace = workspace ?? mostRecentWorkspace ?? fallbackWorkspace;
+        const existingWorkspace = await this.getWorkspace(candidateWorkspace.id);
+        if (existingWorkspace) {
+            this._store.state.activeWorkspace = existingWorkspace;
             await this.updateWorkspace(this._store.state.activeWorkspace);
         }
         else {
+            this._store.state.activeWorkspace = candidateWorkspace;
             await this.createWorkspace(this._store.state.activeWorkspace);
         }
-        this._store.setState('workspaces', await this.getWorkspaces());
-        this._store.setState('translateX', this._store.state.activeWorkspace.viewport.translateX);
-        this._store.setState('translateY', this._store.state.activeWorkspace.viewport.translateY);
-        this._store.setState('scale', this._store.state.activeWorkspace.viewport.scale);
+        this._store.state.workspaces = await this.getWorkspaces();
+        const viewport = this._store.state.activeWorkspace.viewport ?? { translateX: 0, translateY: 0, scale: 1 };
+        this._store.state.translateX = viewport.translateX ?? 0;
+        this._store.state.translateY = viewport.translateY ?? 0;
+        this._store.state.scale = viewport.scale ?? 1;
         await this.initializeWorkspaceObjects(this._store.state.activeWorkspace.id);
     }
     async initializeWorkspaceObjects(workspaceId) {
@@ -1819,7 +1851,7 @@ class KritzelCore {
         const index = workspaces.findIndex(w => w.id === workspace.id);
         if (index !== -1) {
             workspaces[index] = workspace;
-            this._store.setState('workspaces', workspaces);
+            this._store.state.workspaces = workspaces;
         }
     }
     async deleteWorkspace(workspace) {
@@ -1829,7 +1861,7 @@ class KritzelCore {
         const objectRange = IDBKeyRange.bound([workspace.id], [workspace.id, '\uffff']);
         await this._database.deleteByRange('objects', objectRange);
         await this._database.delete('workspaces', workspace.id);
-        this._store.setState('workspaces', this._store.state.workspaces.filter(ws => ws.id !== workspace.id));
+        this._store.state.workspaces = this._store.state.workspaces.filter(ws => ws.id !== workspace.id);
     }
     rerender() {
         if (this._kritzelEngine) {
@@ -1866,18 +1898,27 @@ class KritzelCore {
         }
     }
     copy() {
-        this._store.setState('copiedObjects', this._store.state.selectionGroup.copy());
+        this._store.state.copiedObjects = this._store.state.selectionGroup.copy();
     }
     paste(x, y) {
         const copiedObjects = this._store.state.copiedObjects;
         copiedObjects.isSelected = true;
-        this._store.setState('copiedObjects', copiedObjects);
+        this._store.state.copiedObjects = copiedObjects;
         const adjustedX = x !== undefined ? x : this._store.state.copiedObjects.translateX + 25 / this._store.state.scale;
         const adjustedY = y !== undefined ? y : this._store.state.copiedObjects.translateY + 25 / this._store.state.scale;
         this._store.state.copiedObjects.updatePosition(adjustedX, adjustedY);
+        this._store.state.copiedObjects.updateZIndices(this._store.currentZIndex);
         const activeWorkspace = this._store.state.activeWorkspace;
-        this.store.state.copiedObjects.updateWorkspaceId(activeWorkspace.id);
-        this.store.state.copiedObjects.updateZIndices(this.store.currentZIndex);
+        if (this.store.state.copiedObjects.workspaceId !== activeWorkspace.id) {
+            this.store.state.copiedObjects.updateWorkspaceId(activeWorkspace.id);
+            if (x !== undefined && y !== undefined) {
+                this._store.state.copiedObjects.updatePosition(x, y);
+            }
+            else {
+                this.store.state.copiedObjects.centerInViewport();
+            }
+            this.engine.viewport.centerFitInViewport(copiedObjects);
+        }
         const commands = [];
         let previousSelectionGroup = null;
         if (this._store.state.selectionGroup !== null) {
@@ -1888,13 +1929,14 @@ class KritzelCore {
         const addCopiedObjectsAsSelectionGroupCommand = new index$1.AddSelectionGroupCommand(this, this, this._store.state.copiedObjects, previousSelectionGroup);
         commands.push(...addCopiedObjectsCommands, addCopiedObjectsAsSelectionGroupCommand);
         this.history.executeCommand(new index$1.BatchCommand(this, this, commands));
-        this._store.setState('isSelecting', false);
-        this._store.setState('copiedObjects', this._store.state.selectionGroup.copy());
+        this._store.state.isSelecting = false;
+        this._store.state.copiedObjects = this._store.state.selectionGroup.copy();
         this._store.setState('activeTool', index$1.KritzelToolRegistry.getTool('selection'));
     }
     bringForward(object) {
-        const max = this._store.allObjects.length + 1;
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
+        const max = allNonSelectionObjectsWithoutCurrent.length > 0 ? Math.max(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) + 1 : 0;
         const increaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === max) {
                 return;
@@ -1904,8 +1946,9 @@ class KritzelCore {
         this.history.executeCommand(new index$1.BatchCommand(this, this, increaseZIndexCommands));
     }
     sendBackward(object) {
-        const min = 0;
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
+        const min = allNonSelectionObjectsWithoutCurrent.length > 0 ? Math.min(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) - 1 : 0;
         const decreaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === min) {
                 return;
@@ -1915,16 +1958,18 @@ class KritzelCore {
         this.history.executeCommand(new index$1.BatchCommand(this, this, decreaseZIndexCommands));
     }
     bringToFront(object) {
-        const max = Math.max(...this._store.allObjects.map(obj => obj.zIndex)) + 1;
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
+        const max = Math.max(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) + 1;
         const increaseZIndexCommands = objects.map(obj => {
             return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: max });
         });
         this.history.executeCommand(new index$1.BatchCommand(this, this, increaseZIndexCommands));
     }
     sendToBack(object) {
-        const min = Math.min(...this._store.allObjects.map(obj => obj.zIndex)) - 1;
         const objects = object ? [object] : this._store.state.selectionGroup.objects;
+        const allNonSelectionObjectsWithoutCurrent = this._store.allNonSelectionObjects.filter(o => objects.findIndex(obj => obj.id === o.id) === -1);
+        const min = Math.min(...allNonSelectionObjectsWithoutCurrent.map(obj => obj.zIndex)) - 1;
         const decreaseZIndexCommands = objects.map(obj => {
             return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: min });
         });
@@ -1940,7 +1985,7 @@ class KritzelCore {
             selectionGroup.addOrRemove(obj);
         });
         selectionGroup.isSelected = true;
-        this._store.setState('selectionGroup', selectionGroup);
+        this._store.state.selectionBox = selectionGroup;
         if (objects.length === 1) {
             selectionGroup.rotation = selectionGroup.objects[0].rotation;
         }
@@ -1957,7 +2002,7 @@ class KritzelCore {
                 selectionGroup.addOrRemove(obj);
             });
             selectionGroup.isSelected = true;
-            this._store.setState('isSelecting', false);
+            this._store.state.isSelecting = false;
             if (objectsInViewport.length === 1) {
                 selectionGroup.rotation = selectionGroup.objects[0].rotation;
             }
@@ -1968,18 +2013,25 @@ class KritzelCore {
     clearSelection() {
         const command = new index$1.RemoveSelectionGroupCommand(this, this._store.state.selectionGroup);
         this.history.executeCommand(command);
-        this._store.setState('selectionGroup', null);
-        this._store.setState('selectionBox', null);
-        this._store.setState('isSelecting', false);
-        this._store.setState('isResizeHandleSelected', false);
-        this._store.setState('isRotationHandleSelected', false);
+        this._store.state.selectionGroup = null;
+        this._store.state.selectionBox = null;
+        this._store.state.isSelecting = false;
+        this._store.state.isResizeHandleSelected = false;
+        this._store.state.isRotationHandleSelected = false;
         this.rerender();
     }
     resetActiveText() {
-        if (this._store.state.activeText && this._store.state.activeText.value === ' ') {
-            this.deleteObject(this._store.state.activeText.id, true);
+        if (this._store.state.activeText) {
+            if (this._store.state.activeText.isEmpty) {
+                console.log('Deleting empty text object', this._store.state.activeText.id);
+                this.deleteObject(this._store.state.activeText.id, true);
+            }
+            else {
+                console.log('Saving active text object before resetting', this._store.state.activeText.id);
+                this._store.state.activeText.save();
+            }
         }
-        this._store.setState('activeText', null);
+        this._store.state.activeText = null;
     }
     getObjectFromPointerEvent(event, selector = '.object') {
         const shadowRoot = this._store.state.host?.shadowRoot;
@@ -2034,7 +2086,7 @@ class KritzelCore {
     }
 }
 
-const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
+const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.ProseMirror{outline:none}p{margin:0;padding:0}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}.PlaygroundEditorTheme__quote{margin:0;margin-left:20px;margin-bottom:10px;font-size:15px;color:rgb(101, 103, 107);border-left-color:rgb(206, 208, 212);border-left-width:4px;border-left-style:solid;padding-left:16px}";
 
 const KritzelEngine = class {
     get host() { return index.getElement(this); }
@@ -2052,10 +2104,10 @@ const KritzelEngine = class {
         if (newValue > ABSOLUTE_SCALE_MAX) {
             console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
             this.scaleMax = ABSOLUTE_SCALE_MAX;
-            this.core.store.setState('scaleMax', this.scaleMax);
+            this.core.store.state.scaleMax = this.scaleMax;
         }
         else {
-            this.core.store.setState('scaleMax', newValue);
+            this.core.store.state.scaleMax = newValue;
         }
     }
     scaleMin = ABSOLUTE_SCALE_MIN;
@@ -2063,10 +2115,10 @@ const KritzelEngine = class {
         if (newValue < ABSOLUTE_SCALE_MIN) {
             console.warn(`scaleMin cannot be less than ${ABSOLUTE_SCALE_MIN}.`);
             this.scaleMin = ABSOLUTE_SCALE_MIN;
-            this.core.store.setState('scaleMin', this.scaleMin);
+            this.core.store.state.scaleMin = this.scaleMin;
         }
         else {
-            this.core.store.setState('scaleMin', newValue);
+            this.core.store.state.scaleMin = newValue;
         }
     }
     isEngineReady;
@@ -2173,11 +2225,11 @@ const KritzelEngine = class {
         tool?.onActivate();
     }
     async disable() {
-        this.core.store.setState('isEnabled', false);
+        this.core.store.state.isEnabled = false;
         this.core.rerender();
     }
     async enable() {
-        this.core.store.setState('isEnabled', true);
+        this.core.store.state.isEnabled = true;
         this.core.rerender();
     }
     async delete() {
@@ -2209,10 +2261,10 @@ const KritzelEngine = class {
     }
     async hideContextMenu() {
         this.core.store.state.pointers.clear();
-        this.core.store.setState('isContextMenuVisible', false);
-        this.core.store.setState('selectionBox', null);
-        this.core.store.setState('isSelecting', false);
-        this.core.store.setState('isEnabled', true);
+        this.core.store.state.isContextMenuVisible = false;
+        this.core.store.state.selectionBox = null;
+        this.core.store.state.isSelecting = false;
+        this.core.store.state.isEnabled = true;
         this.core.rerender();
     }
     async getObjectById(id) {
@@ -2319,7 +2371,7 @@ const KritzelEngine = class {
         await this.core.initializeWorkspace(this.workspace);
         this._registerStateChangeListeners();
         if (this.core.store.state.isReady === false) {
-            this.core.store.setState('isReady', true);
+            this.core.store.state.isReady = true;
             this.isEngineReady.emit(this.core.store.state);
         }
     }
@@ -2330,8 +2382,8 @@ const KritzelEngine = class {
         if (!(activeTool instanceof index$1.KritzelSelectionTool)) {
             this.core.clearSelection();
         }
-        this.core.store.setState('skipContextMenu', false);
-        this.core.store.setState('copiedObjects', null);
+        this.core.store.state.skipContextMenu = false;
+        this.core.store.state.copiedObjects = null;
         this.activeToolChange.emit(activeTool);
         index$1.KritzelKeyboardHelper.forceHideKeyboard();
     }
@@ -2340,7 +2392,9 @@ const KritzelEngine = class {
         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: 'b65542448b46000bfb0f467b503b2c9d9e603eaa' }, index.h("div", { key: '8197e8fe5e768f89d5861cc04d4343d5753b8f88', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '97b720f029fb8034453f28df04779011d641105e' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: 'e4601378a7d3dc92e66edcd5b7ff0022f890c1e3' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '2506d664411df86fd4d59ee703dc1487c7394f15' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'cada25c03ba66f54433cd09b83d9826f79c94c43' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '91853038c5c83116e9ffc296e9acc3b525bbed21' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '0d3f9d47a5c5f9adab73a44436b214b537f5dd57' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '079f2314aed15ea9b95ace2be564ff8e0f60acaa' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: '7d83d8ef32077e9b8d3bd1ddf23e5e1bcb187d0c' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: 'a63d135300e0a24b20e4ea4b631e123a0c492947' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '258d3b009ea75024fc0d2d06000c7c4228312640' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: 'c4dcff04abf12c675d995bad82407d0f5047ebd7' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: 'fcd7bc6d221d0d3eb294ec7f6526a604ccc539d2' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '416ac549246b7a43bf644c536acbff1fb292eb52' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '7d061a0515e33ce836bb550250330c4e2819bc14' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '1debb3ee3e6a8297d427d09f61c8df8827bcfa37' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '7d0fbcbc3e4c40ba21d144afd7d7b56b14227ddc' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '90f5c8d1cf60eb90bb5d136d3457a97d831e361c' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '122a2ad39d27d6f242a286bb2a8298687ab8cbb2' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'f5515be35f5037ec256198f2f916c61b78ab4ec2' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: '2c16ecb22f4063450ef7d17be93ec1a0434a5abd' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '69b531a94a9b7430d70ce80ef3247211c67a516e' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0)), index.h("div", { key: '52b6e44b6fb2b59743f3c48fb1cc2616b19308c7', id: "origin", class: "origin", style: {
+        const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
+        const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
+        return (index.h(index.Host, { key: 'caabd1ecbf2faccdf7fa50d087a8957df4dd1039' }, index.h("div", { key: 'd757e7133ed9dd190c17c383fb716f760f2b3906', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '00ced12dd956b6eecff7ac80429c0fd05cc7d1c3' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), index.h("div", { key: '771f3269627fbe1ef962027f017cf6bdec7bcf8f' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), index.h("div", { key: '0e49a60afdfb776a61f46b53bd6488786778bf77' }, "TranslateX: ", this.core.store.state?.translateX), index.h("div", { key: 'e0438479bc9e950ef2cbe88ed0aa0b8ec1888890' }, "TranslateY: ", this.core.store.state?.translateY), index.h("div", { key: '41d7261ed6b893a97fefb4bb6b199ffea51bd5fe' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), index.h("div", { key: '7b6470008968eeebc5097252b3b9e3d172fd5d22' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), index.h("div", { key: '4012ebdc3234ee2775021b38f385dfa0917736cb' }, "Scale: ", this.core.store.state?.scale), index.h("div", { key: '964d26a0ff4ff93dfa1cc928330c4fbdb0ec9b3d' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), index.h("div", { key: 'cd68a81778d3e0f83f9453cd813538b2223541e8' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '2ea80f3b4216a5e3d727c6c94d8b1782fbde80eb' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: '02966d69182e95a8e91d5252f3dcfc19237caafd' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '85c06265f3af2b793d1827a40bb74b8837690ce3' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '1a2847a815fabc37cae3b7659844975df0c79a81' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'd1482aa165ed6b430ec0e640971c47e233103e87' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '3534e455918183d822374edbc80b621939100bd1' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '7b061a4b08956660ee305316eea2e1d13d66d5de' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '61998d0f4ffc65f5bb155dfe434a3a07667ca5ee' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'bdaeb0af59e844351eb46caf7bbe7e246174ccfe' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '47518514eb67c486583ee61e6747104b4720924a' }, "PointerX: ", this.core.store.state?.pointerX), index.h("div", { key: '9b2ef1c30ecb09bc7df7f765e099f87ea836d697' }, "PointerY: ", this.core.store.state?.pointerY), index.h("div", { key: '72a65218942809918fb5fa1978af83f9442c3ed8' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0), index.h("div", { key: '1f2ad6b79f28306becd7e83f21ca877c7d15941d' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")")), index.h("div", { key: 'ae8afa17ce2a1c0a06a3579091d6f1616fe9b9a7', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, this.core.store.state.objectsMap.allObjects()?.map(object => {
             return (index.h("div", { key: object.id, style: {
@@ -2378,22 +2432,16 @@ const KritzelEngine = class {
                     height: '100%',
                     userSelect: 'none',
                     pointerEvents: 'none',
-                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("textarea", { ref: el => (el ? object.mount(el) : object.unmount()), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
-                    width: '100%',
-                    height: '100%',
-                    color: object.fontColor,
-                    fontSize: object.fontSize?.toString() + 'px',
-                    fontFamily: object.fontFamily,
-                    border: 'none',
-                    outline: 'none',
-                    resize: 'none',
-                    overflow: 'hidden',
-                    display: 'block',
-                    padding: '1px',
-                    whiteSpace: 'nowrap',
-                    pointerEvents: object.isReadonly ? 'none' : 'auto',
-                    cursor: object.isReadonly ? 'default' : 'text',
-                    caretColor: object.isReadonly ? 'transparent' : 'auto',
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
+                    minWidth: object.initialWidth + 'px',
+                    minHeight: object.initialHeight + 'px',
+                    maxWidth: '500px',
+                    height: 'auto',
+                    width: 'max-content',
+                    transformOrigin: 'top left',
+                    transform: `scale(${object.scaleFactor})`,
+                    backgroundColor: object.backgroundColor,
+                    overflow: 'visible'
                 } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
                     width: '100%',
                     height: '100%',
@@ -2459,7 +2507,7 @@ const KritzelEngine = class {
                 transform: this.core.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: this.core.store.state.currentPath?.viewBox }, index.h("path", { key: '2fa37f509acc3573049fc01f22e41fdda6e4acd9', d: this.core.store.state.currentPath?.d, fill: this.core.store.state.currentPath?.fill, stroke: this.core.store.state.currentPath?.stroke }))), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: 'a17f9ff108cf509f3d6e20fc434cffb7a4d72530', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.state.selectionGroup?.objects || [], style: {
+            }, viewBox: this.core.store.state.currentPath?.viewBox }, index.h("path", { key: '9428a1401021b38b8b811fd68af9e24d53301c08', d: this.core.store.state.currentPath?.d, fill: this.core.store.state.currentPath?.fill, stroke: this.core.store.state.currentPath?.stroke }))), this.core.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '1ccc963df66e4210886717644503be6304c6c99f', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.state.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -2470,7 +2518,7 @@ const KritzelEngine = class {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.state.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof index$1.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'a22fa1dba0442fa77a7660ca230d4bb0236e10ea', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof index$1.KritzelEraserTool && !this.core.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '9b51e52c76f21be679491c21d1921d389d6619fc', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -2490,7 +2538,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (index.h(index.Host, { key: '0d0f0f75b64f579ca236950334fafde7f0ef2a38' }, index.h("div", { key: 'e71524879ded9727891bdd43f1a41ae5eef49175', class: "font-preview", style: {
+        return (index.h(index.Host, { key: '0a6f1d1326e9dde84a4122d79f75dc1c75ffe0fb' }, index.h("div", { key: '88a342d01c4150cd4fc5dacca23f7b9904edca52', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -2537,7 +2585,7 @@ const KritzelFontFamily = class {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (index.h(index.Host, { key: 'd05a099adf8623b8c67d68f3861c1cd401e86e2c' }, index.h("kritzel-dropdown", { key: 'b95af194feaaf5748bb0d584617d217e4b3b8180', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: '04a0a72f9297dc6c34a2a2019cae111d8725bcf4', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: 'f14b59f29bcce33f890b74c1fb8d1dad0ad6fd31', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (index.h(index.Host, { key: '27d14ddb4a57b9cd7b936047b6ea6a9251a1ab27' }, index.h("kritzel-dropdown", { key: '20ea042c9a907dc1ac5e16a589a8856f87389e36', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: 'f63fed16477a327aadaeb54feefe35df1780e37d', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: '13b3089606c2e83b256ed2cec6513a9911016754', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
 };
 KritzelFontFamily.style = kritzelFontFamilyCss;
@@ -2558,7 +2606,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: '583659340d8f3bfb2ff6f64f2cd692ac07cb32d6' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: '9f3d851d443352f7437116cf91eff8d8de41e322' }, 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 }))))));
@@ -2653,7 +2701,7 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (index.h(index.Host, { key: '211bd579000294d9edf6f85f2d7244aebe331191', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: 'b1c397118b1fbac934867677073661a69be1cab1', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (index.h(index.Host, { key: 'be122cb0ecff3227d9e69997de76a73940a61860', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: 'ae10bec61e5c5e1a29b444cb7378f15c6692f3b6', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (index.h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
 };
 KritzelMenu.style = kritzelMenuCss;
@@ -2754,12 +2802,12 @@ const KritzelMenuItem = class {
         ];
     }
     render() {
-        return (index.h(index.Host, { key: 'a35e1e3427568f436a36b43ba87af3710a4e83c5', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (index.h(index.Host, { key: '9df3acdaff753e3ed910f848c98e8ad73e2b5f5c', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, index.h("div", { key: '42eef5a16b9b164839c1fe133e38ecb505c07632', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, index.h("div", { key: 'bb73e5c0c3dd87efabcaa0b53d20c7c477b34aa1', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": ["onItemChange"]
@@ -3000,7 +3048,7 @@ const KritzelPortal = class {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (index.h(index.Host, { key: 'a906e21c1257dfc6ed21257cce150db17048f04e', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '972544f2258f8b6dc8c691f3762d5ba806a57c41' })));
+        return (index.h(index.Host, { key: '9c5cdf7126ff1148dd2364cce9d2524862e27d13', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '209a77246fedcea0c24882605487452ff5cc62ce' })));
     }
     static get watchers() { return {
         "anchor": ["anchorChanged"]
@@ -3100,7 +3148,7 @@ const KritzelSplitButton = class {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (index.h(index.Host, { key: 'd18a70b94e3d6860dfac952b26f66e5b96cc6fa0', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'ee65221543fd8984f94d0a0b43beb7e1d28411f2', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && index.h("kritzel-icon", { key: '1dbdd1e4db4087564464e9586e91b48f80b88aae', name: this.buttonIcon })), index.h("div", { key: '78b5e0589e7a3dd0592fb2c1cdaae8732f57b129', class: "split-divider" }), index.h("button", { key: 'cfc5d53f06485a927608a99ea491e36b0e993fcc', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, index.h("kritzel-icon", { key: '0e141b614cbfc758f01d21908d846d16bdce586d', name: this.dropdownIcon })), index.h("kritzel-portal", { key: 'b5def34dcfe5cbbf9641b1218af803937d7a77b6', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: '695f6c85a8ecd44f74ecf7752bf77d0caac69e6a', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (index.h(index.Host, { key: '4ff7809dd62c1dd60600fda592aeac43cd9bc74c', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'db6485fabcffdd75a25d178aca7b653af499a90c', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && index.h("kritzel-icon", { key: '4001a4e23ef53bec2a578310de8c8b593d7b266c', name: this.buttonIcon })), index.h("div", { key: '8ff86d3c01a48b06afca77dd066518efa3589cb1', class: "split-divider" }), index.h("button", { key: 'f1c40edbec3756a7f3681de4e8d0f1981dd312a4', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, index.h("kritzel-icon", { key: '0ddb89976632ae7454e66504f8bab3fd5072c252', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '64531ffd6ac847fd1a99e32aceefea9f18088992', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.h("kritzel-menu", { key: 'f3b86cb71e5ba39e8f98e26b3669416e2cdb4802', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss;
@@ -3120,7 +3168,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: '001a0ef8408d19532b57a521929c0cba54e99c52' }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
+        return (index.h(index.Host, { key: '74579e34c23725e22927afe371c1f7925903720a' }, this.sizes.map(size => (index.h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-color", { value: '#000000', size: size }))))));
@@ -3197,23 +3245,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8c3aeff60625f43f129afa70367cdb7a68a4b271', style: {
+        return (index.h(index.Host, { key: '72a6356a43a15a7abc9a46b0d22c3c62217791e8', 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: 'b22b606c2a836c2c9bbe21c6b470754753ccb309', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: '783403f4b5560012c9f6bd184a8c5eb26428e148' }), index.h("div", { key: 'bb98400edc5c6e05fd4ed2a476a5821f93964b8e', class: "tooltip-arrow-wrapper", style: {
+            } }, index.h("div", { key: '75f5350f23ada0eee009279eddd7d25273ad3740', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: 'ad999154289e933cac1fdc13392de2aec78811a8' }), index.h("div", { key: '6be3f5c24d42898920c339be2cd2f3dd8a82fa80', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, index.h("div", { key: '850a058d635113a7870f25fa288a6447394c53ed', class: "tooltip-arrow", style: {
+            } }, index.h("div", { key: '37397c6245dd6b0def23e2611d118e0c4f5860ef', 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: 'bbb3dc2673e2dfe4443ad80540dfc9e5a25c6c06', class: "tooltip-arrow-rect", style: {
+            } }), index.h("div", { key: 'dbf009c371d46ef0a36e27771758c66e817d9b22', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -3249,7 +3297,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: '8109ccff01374c046d057021dfbcabdc632d829f' }, index.h("button", { key: '0d51cfb401974edf1a2a8810d2244f8a977c347f', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '1d13ee6bbf060402e0b1349d41b728875314e2e5', name: "undo" })), index.h("button", { key: 'f2fe59e7c99cb1550052088b507313cfaed72f29', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '74bf8c20f61144ab4abc5804dcd8f39917d2c966', name: "redo" })), index.h("div", { key: '0c9a942e786425b32e984fefdc97b1abb5077997', class: "utility-separator" }), index.h("button", { key: '44ca9340c2f73212332e9b3ed93ed93b8f7c6944', class: "utility-button" }, index.h("kritzel-icon", { key: '7b4c3d9a105e0c25b5bbc11ff1bc1cbed9833e03', name: "delete", onClick: () => this.delete.emit() }))));
+        return (index.h(index.Host, { key: '8e2eb13668d8787827b10cee7c9daf2abdecc2c6' }, index.h("button", { key: '0773e7ef81bc972ba589333f4ac7e85d98737770', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: 'fa69c1a2535d44bfb871a4d719079d0f900cc6c7', name: "undo" })), index.h("button", { key: 'edc28968f3ec92467d6b4aaa095a71770413d657', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: 'd4cf72e2bda411fe9942d473c5e1ceae62a76074', name: "redo" })), index.h("div", { key: '8927237c6099a147495564657cdef97e7d35d7c1', class: "utility-separator" }), index.h("button", { key: 'e089819f7dd870165130322c3c4a9d754d4ed023', class: "utility-button" }, index.h("kritzel-icon", { key: 'a143770d1b3f8fdbe5c5b36c5d7eaab511cd8a4b', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;