kritzel-stencil 0.0.131 → 0.0.133

package/dist/esm/{kritzel-brush-style_23.entry.js → kritzel-color_22.entry.js}

@@ -1,31 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-oCOlsFCN.js';
-import { K as KritzelBrushTool, a as KritzelTextTool, b as KritzelMouseButton, c as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, d as KritzelEraserTool, e as DEFAULT_TEXT_CONFIG, f as KritzelImageTool, g as KritzelKeyboardHelper, h as KritzelEventHelper, i as KritzelBaseCommand, j as KritzelSelectionGroup, k as KrtizelSelectionBox, l as KritzelWorkspace, O as ObjectHelper, m as KritzelReviver, R as RemoveSelectionGroupCommand, n as RemoveObjectCommand, B as BatchCommand, A as AddObjectCommand, o as AddSelectionGroupCommand, p as KritzelToolRegistry, U as UpdateObjectCommand, q as KritzelBaseHandler, r as KritzelBaseTool } from './index-B-oSk-v8.js';
-
-const kritzelBrushStyleCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:default;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}";
-
-const KritzelBrushStyle = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.typeChange = createEvent(this, "typeChange");
-    }
-    type = 'pen';
-    brushOptions = [
-        { value: 'pen', label: 'Pen' },
-        { value: 'highlighter', label: 'Highlighter' },
-    ];
-    typeChange;
-    handleDropdownValueChange(event) {
-        this.typeChange.emit(event.detail);
-    }
-    render() {
-        const dropdownOptions = this.brushOptions.map(option => ({
-            value: option.value,
-            label: option.label,
-        }));
-        return (h(Host, { key: 'd7af382fe6f613aa16a5146785990ad2faa17f60' }, h("kritzel-dropdown", { key: '6d6d330d415c210058834b2968774b3db2ab7fc4', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'c9fb33795b8e25f68c1d2ae248dc82a6de29e199', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: '975c95b545a1c27ae2984405ac298592eec9743d', name: this.type, size: 16 })))));
-    }
-};
-KritzelBrushStyle.style = kritzelBrushStyleCss;
+import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-oCOlsFCN.js';
+import { K as KritzelBrushTool, a as KritzelTextTool, b as KritzelMouseButton, c as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, d as KritzelEraserTool, e as DEFAULT_TEXT_CONFIG, f as KritzelImageTool, g as KritzelWorkspace, h as KritzelKeyboardHelper, i as KritzelEventHelper, j as KritzelBaseHandler, k as KritzelToolRegistry, l as KritzelSelectionGroup, B as BatchCommand, R as RemoveSelectionGroupCommand, A as AddSelectionGroupCommand, m as KritzelBaseCommand, n as KrtizelSelectionBox, O as ObjectHelper, o as KritzelReviver, p as RemoveObjectCommand, q as AddObjectCommand, U as UpdateObjectCommand, r as KritzelBaseTool } from './index-DY3KqYWc.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)}";
 
@@ -61,13 +35,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (h(Host, { key: '1468f3502f7d10d182ac72a05ce4b1e520353f8a' }, h("div", { key: 'd30d47667b1b72a970c4ee0da887dd59a663eae7', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '198dba41e1600d76faace18de78191d2b7a551ec' }, h("div", { key: 'ee690cffb7925e09cb2c51022eec607247a4849f', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '073fd85967e53b609103a9fe47028bcda849e5ec', class: {
+            } }, h("div", { key: '66cc8df8fabd008db8c00942994875e3e8d722ce', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -84,7 +58,7 @@ const KritzelColor = class {
 };
 KritzelColor.style = kritzelColorCss;
 
-const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
+const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
 
 const KritzelColorPalette = class {
     constructor(hostRef) {
@@ -110,12 +84,12 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: 'dddc32b0904800092d45727e833181af32eb8766' }, h("div", { key: '293cbed8e9c62b5f409b7dcdca0df5de9d65b758', class: {
+        return (h(Host, { key: '2ead7cd530ce181856e5f582f086a22a1fe69390' }, h("div", { key: 'fcc75b267f36e271d50615bfde42a29c28aa2536', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
-                height: expandedHeight
-            } }, displayedColors.map(color => (h("div", { class: {
+                height: expandedHeight,
+            } }, displayedColors.map(color => (h("div", { tabIndex: 0, class: {
                 'color-container': true,
                 'selected': this.selectedColor === color,
             }, onClick: () => this.handleColorClick(color) }, h("kritzel-color", { value: color })))))));
@@ -129,16 +103,25 @@ const KritzelContextMenu = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.actionSelected = createEvent(this, "actionSelected");
+        this.close = createEvent(this, "close");
     }
+    get host() { return getElement(this); }
     items;
+    onItemsChanged() {
+        this.updateMenuItems();
+    }
     objects;
     actionSelected;
-    get hostElement() { return getElement(this); }
+    close;
     processedItems = [];
-    componentWillLoad() {
-        this.updateMenuItems();
+    handleOutsideClick(event) {
+        event.preventDefault();
+        const path = event.composedPath();
+        if (!path.includes(this.host)) {
+            this.close.emit();
+        }
     }
-    onItemsChanged() {
+    componentWillLoad() {
         this.updateMenuItems();
     }
     handleItemClick(item, isDisabled) {
@@ -146,15 +129,6 @@ const KritzelContextMenu = class {
             this.actionSelected.emit(item);
         }
     }
-    async evaluateProperty(value, defaultValue) {
-        if (typeof value === 'boolean') {
-            return value;
-        }
-        if (typeof value === 'function') {
-            return await Promise.resolve(value(null, this.objects));
-        }
-        return defaultValue;
-    }
     async updateMenuItems() {
         const processed = [];
         for (const item of this.items) {
@@ -166,8 +140,17 @@ const KritzelContextMenu = class {
         }
         this.processedItems = processed;
     }
+    async evaluateProperty(value, defaultValue) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return await Promise.resolve(value(null, this.objects));
+        }
+        return defaultValue;
+    }
     render() {
-        return (h(Host, { key: '96569454f806a6d17380315b4d0200236fe22550' }, h("div", { key: '0e5899a2901e1e9ab9d657824e105121ce785bdc', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, disabled: isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), onTouchStart: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
+        return (h(Host, { key: 'ff72bd31f6c0f3193674710bccab829f14e011d3' }, h("div", { key: '80cd7a99dc9bb1fb9ec4edb09a9bacde70dde7c3', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
     }
     static get watchers() { return {
         "items": ["onItemsChanged"]
@@ -175,7 +158,7 @@ const KritzelContextMenu = class {
 };
 KritzelContextMenu.style = kritzelContextMenuCss;
 
-const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";
+const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";
 
 const KritzelControlBrushConfig = class {
     constructor(hostRef) {
@@ -183,12 +166,12 @@ const KritzelControlBrushConfig = class {
         this.toolChange = createEvent(this, "toolChange");
     }
     tool;
-    isExpanded = false;
-    toolChange;
-    palette = [];
     handleToolChange(newTool) {
         this.palette = newTool.palettes[newTool.type];
     }
+    isExpanded = false;
+    toolChange;
+    palette = [];
     componentWillLoad() {
         this.palette = this.tool.palettes[this.tool.type];
     }
@@ -210,14 +193,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: 'a1f04aba4ed04e91c7b375e0f88bcff4fea1cba4' }, h("div", { key: 'c7cd734c96498c8cd6a27321fb6d11773e7aa8a9', style: {
+        return (h(Host, { key: '8fe8c0564f491121c0c44c6ff4083034f92dbb67' }, h("div", { key: '3e8a69b827785976768bfc1e809126bee7c48c62', style: {
                 display: 'flex',
                 flexDirection: 'row',
-                alignItems: 'center',
+                alignItems: this.isExpanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-brush-style", { key: '67958dc2a34302eb23fabbafea3c7dc7863f1984', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '5c84a72d9f337dff253a161abe19acb832275272', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: 'b3e0c44db35b53a584757e18b507df09f30bfa8a', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'eb098094ae69aa5901244f9686a3eb990271c07d', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '18ae184b282ca2ec6511a6ac0065914edf66f91b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-color-palette", { key: 'c9056f81cf47d81fef0a0f5743000dcd6633258a', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: '2f307264b80a732d976edeb025d509bc1164606b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '08133ba0a23353b2bb3f87c685a7a0798b8dd16c', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '3de25cc80029ffdfdc173c4c79e937a7dc329743', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -251,14 +234,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: 'a5c0e3eb4343637d758888d7d2a0843549fa0c25' }, h("div", { key: '1d4d42af117ed9da1a91d1747a7d6f6531e0de9b', style: {
+        return (h(Host, { key: '3695b187943af25566885d63257ae3de9f405ea5' }, h("div", { key: '7bb146ae3c188478ba17f18f70fd170ce3536308', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-font-family", { key: 'b19e1edcbc7bafb0829d3e173d33cff37d2a5959', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: 'ca3dce970ee5dd1a7c8c617127777859b45380c4', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '241d82cd06db8d20794a369a4df6e6a71531131a', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'ec82e5c09046e70e904cc1ec9716c53bec9cac2b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '1cbddf6e6de21bd62f3803cca9e21ef9e01f15c0', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-font-family", { key: '87f4c5ac2e2a4cfea216b1b828faad231438b9ec', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '2e73aaf7da659b9e069c247cc762f68394212293', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '785b664697ba266432c535ea26e0665f8d8d657f', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: 'ed2517a39d254b77f45154914b3ce6a934f66c33', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '9b25c9607fa69c991e769852e3e3e378e48387bd', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -267,15 +250,36 @@ class KritzelDevicesHelper {
     static isTouchDevice() {
         return window.matchMedia('(any-pointer: coarse)').matches;
     }
+    static isAndroid() {
+        return /android/i.test(navigator.userAgent);
+    }
+    static isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent);
+    }
+    static detectOS() {
+        if (this.isIOS()) {
+            return 'iOS';
+        }
+        else if (this.isAndroid()) {
+            return 'Android';
+        }
+        else {
+            return 'Other';
+        }
+    }
+    static isFirefox() {
+        return /firefox/i.test(navigator.userAgent);
+    }
 }
 
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer;border-radius:50%}.kritzel-config:focus{outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);z-index:10001}";
 
 const KritzelControls = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.isControlsReady = createEvent(this, "isControlsReady");
     }
+    get host() { return getElement(this); }
     controls = [];
     activeControl = null;
     isUtilityPanelVisible = true;
@@ -283,7 +287,6 @@ const KritzelControls = class {
     firstConfig = null;
     isTooltipVisible = false;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-    get host() { return getElement(this); }
     handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
@@ -300,12 +303,12 @@ const KritzelControls = class {
     }
     async handleActiveToolChange(event) {
         this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-        await this.kritzelEngine?.setFocus();
     }
     async closeTooltip() {
         this.isTooltipVisible = false;
     }
     kritzelEngine = null;
+    tooltipRef = null;
     get activeToolAsTextTool() {
         return this.activeControl?.tool;
     }
@@ -352,21 +355,33 @@ const KritzelControls = class {
     handleConfigClick(event) {
         event.stopPropagation();
         this.isTooltipVisible = !this.isTooltipVisible;
-        this.kritzelEngine?.disable();
+        if (this.isTooltipVisible) {
+            this.kritzelEngine?.disable();
+        }
+        else {
+            this.kritzelEngine?.enable();
+        }
+        setTimeout(() => {
+            this.tooltipRef?.focusContent();
+        }, 100);
     }
     async handleToolChange(event) {
         this.activeControl = { ...this.activeControl, tool: event.detail };
         await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
     }
+    handleTooltipClosed() {
+        this.isTooltipVisible = false;
+        this.kritzelEngine?.enable();
+    }
     render() {
         const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
-        return (h(Host, { key: '7ab1f3e176848cb9a34be7e7b90e13c2a861d78b', class: {
+        return (h(Host, { key: 'a463310d88265b71097f838bf775abdcabc99225', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'f168b27cb9cc3a1a7d0028055cd58c60cec9776f', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '267e9c26b41a52c655209dbaa8c85cbd72323577', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '9e568217b23632d73b051350d7f795f0cd7ab9ed', class: "kritzel-controls" }, this.controls.map(control => {
+            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'c55773245c925e1b972f3e83cb4d8f1c93ebe995', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 return (h("button", { class: {
                         'kritzel-control': true,
@@ -377,7 +392,11 @@ const KritzelControls = class {
                 return h("div", { class: "kritzel-divider", key: control.name });
             }
             if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
-                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container') }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), style: {
+                return (h("div", { class: "kritzel-config-container", key: control.name }, h("kritzel-tooltip", { ref: el => (this.tooltipRef = el), isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), onTooltipClosed: () => this.handleTooltipClosed() }, h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), h("div", { tabIndex: 0, class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), onKeyDown: event => {
+                        if (event.key === 'Enter') {
+                            this.handleConfigClick?.(event);
+                        }
+                    }, style: {
                         cursor: this.activeControl.config ? 'pointer' : 'default',
                         pointerEvents: hasNoConfig ? 'none' : 'auto',
                     } }, this.activeControl.tool instanceof KritzelBrushTool && (h("div", { class: "color-container" }, h("kritzel-color", { value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
@@ -397,26 +416,9 @@ const KritzelCursorTrail = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
-    store;
+    core;
     cursorTrailPoints = [];
     isLeftButtonDown = false;
-    trailCleanupIntervalId;
-    TRAIL_DURATION_MS = 100;
-    MAX_TRAIL_POINTS = 50;
-    componentDidLoad() {
-        this.trailCleanupIntervalId = window.setInterval(() => {
-            const now = Date.now();
-            const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);
-            if (newTrailPoints.length !== this.cursorTrailPoints.length) {
-                this.cursorTrailPoints = newTrailPoints;
-            }
-        }, 50);
-    }
-    disconnectedCallback() {
-        if (this.trailCleanupIntervalId) {
-            window.clearInterval(this.trailCleanupIntervalId);
-        }
-    }
     handleMouseDown(ev) {
         if (ev.pointerType === 'mouse') {
             if (ev.button === KritzelMouseButton.Left) {
@@ -425,7 +427,7 @@ const KritzelCursorTrail = class {
             }
         }
         if (ev.pointerType === 'touch') {
-            if (this.store.state.pointers.size === 1) {
+            if (this.core.store.state.pointers.size === 1) {
                 this.isLeftButtonDown = true;
                 this.cursorTrailPoints = [];
             }
@@ -452,14 +454,31 @@ const KritzelCursorTrail = class {
             }
         }
         if (ev.pointerType === 'touch') {
-            if (this.store.state.pointers.size === 0) {
+            if (this.core.store.state.pointers.size === 0) {
                 this.isLeftButtonDown = false;
                 this.cursorTrailPoints = [];
             }
         }
     }
+    trailCleanupIntervalId;
+    TRAIL_DURATION_MS = 100;
+    MAX_TRAIL_POINTS = 50;
+    componentDidLoad() {
+        this.trailCleanupIntervalId = window.setInterval(() => {
+            const now = Date.now();
+            const newTrailPoints = this.cursorTrailPoints.filter(p => now - p.timestamp < this.TRAIL_DURATION_MS);
+            if (newTrailPoints.length !== this.cursorTrailPoints.length) {
+                this.cursorTrailPoints = newTrailPoints;
+            }
+        }, 50);
+    }
+    disconnectedCallback() {
+        if (this.trailCleanupIntervalId) {
+            window.clearInterval(this.trailCleanupIntervalId);
+        }
+    }
     render() {
-        return (h(Host, { key: 'c519ab89ffb793de887a870bafe8772f7584f097' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'db7ac0975c5a39c0b68d8fd4af4edd4d15f439f3', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: '87003b14680b3cbca302e7b31ff57e74cc774e25' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'aa6460089c9f3157d2dea9396405b14ab8cc1710', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -490,7 +509,15 @@ const KritzelDropdown = class {
         this.valueChanged = createEvent(this, "valueChanged");
     }
     options = [];
+    optionsChanged() {
+        this.updateInternalValue(this.internalValue, true);
+    }
     value;
+    externalValueChanged(newValue) {
+        if (newValue !== this.internalValue) {
+            this.updateInternalValue(newValue, false);
+        }
+    }
     width;
     selectStyles = {};
     internalValue;
@@ -504,14 +531,6 @@ const KritzelDropdown = class {
         this.evaluateSuffixContent();
         this.evaluatePrefixContent();
     }
-    externalValueChanged(newValue) {
-        if (newValue !== this.internalValue) {
-            this.updateInternalValue(newValue, false);
-        }
-    }
-    optionsChanged() {
-        this.updateInternalValue(this.internalValue, true);
-    }
     updateInternalValue(proposedValue, emitChange) {
         let finalValue = proposedValue;
         if (this.options && this.options.length > 0) {
@@ -569,11 +588,11 @@ const KritzelDropdown = class {
             'has-suffix-border': this.hasSuffixContent,
             'has-prefix-border': this.hasPrefixContent,
         };
-        return (h(Host, { key: '32c5f5a4f807c1e316c91b795c005b8d30ce6189' }, h("div", { key: 'b1cbeff18e688da4a2f7472be290b9527a619f07', class: "dropdown-wrapper" }, h("slot", { key: 'b3bbb7e21c6f5620cab41aa4b1c7206b6c75fd86', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), h("select", { key: '8b2dcdc125bee59cf29fce7c980b755e78d5816e', class: selectClasses, style: { ...this.selectStyles, width: this.width }, onInput: this.handleSelectChange }, this.options.map(option => (h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), h("slot", { key: '8d83f0dea41ac959bf2392948efef33bb70d0154', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
+        return (h(Host, { key: 'f24911715685ced571843ba7be6631248c8519b7' }, h("div", { key: '520fdb74afdef8bd5228f76074e51981f44b910d', class: "dropdown-wrapper" }, h("slot", { key: 'cf6628437946b57ad0b27c066639e0b64b5a28f8', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("select", { key: '3203ccd5b9c8b84e8f41bddfcb07786e879f0035', class: selectClasses, style: { ...this.selectStyles, width: this.width }, onInput: this.handleSelectChange }, this.options.map(option => (h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), h("slot", { key: 'd0abb52e082db81860c09d2c48b7c065adb406f3', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }))));
     }
     static get watchers() { return {
-        "value": ["externalValueChanged"],
-        "options": ["optionsChanged"]
+        "options": ["optionsChanged"],
+        "value": ["externalValueChanged"]
     }; }
 };
 KritzelDropdown.style = kritzelDropdownCss;
@@ -628,13 +647,14 @@ KritzelIconRegistry.registerIcons({
 const ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
 
-const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{position:absolute;top:14px;left:14px}kritzel-split-button{position:absolute;top:14px;left:14px;z-index:1}kritzel-controls{position:absolute;bottom:28px}";
+const kritzelEditorCss = "kritzel-editor{display:flex;margin:0;position:relative;overflow:hidden;width:100%;height:100%;align-items:center;justify-content:center;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}kritzel-workspace-manager{position:absolute;top:var(--kritzel-editor-workspace-manager-top, 14px);left:var(--kritzel-editor-workspace-manager-left, 14px)}kritzel-controls{position:absolute;bottom:var(--kritzel-editor-controls-bottom, 14px);transition:transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out)}kritzel-controls.keyboard-open{transform:var(--kritzel-editor-controls-transform, translateY(300%))}";
 
 const KritzelEditor = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.isReady = createEvent(this, "isReady");
     }
+    get host() { return getElement(this); }
     scaleMax = ABSOLUTE_SCALE_MAX;
     scaleMin = ABSOLUTE_SCALE_MIN;
     controls = [
@@ -718,7 +738,6 @@ const KritzelEditor = class {
     isControlsVisible = true;
     isUtilityPanelVisible = true;
     isReady;
-    get host() { return getElement(this); }
     isEngineReady = false;
     isControlsReady = false;
     isWorkspaceManagerReady = false;
@@ -735,6 +754,11 @@ const KritzelEditor = class {
             this.checkIsReady();
         }
     }
+    handleTouchStart(event) {
+        if (event.cancelable) {
+            event.preventDefault();
+        }
+    }
     async getObjectById(id) {
         return this.engineRef.getObjectById(id);
     }
@@ -762,10 +786,21 @@ const KritzelEditor = class {
     async centerObjectInViewport(object) {
         return this.engineRef.centerObjectInViewport(object);
     }
-    handleTouchStart(event) {
-        if (event.cancelable) {
-            event.preventDefault();
-        }
+    async createWorkspace(name, viewport) {
+        const workspace = new KritzelWorkspace(`workspace-${Date.now()}`, name, viewport);
+        return this.engineRef.createWorkspace(workspace);
+    }
+    async updateWorkspace(workspace) {
+        return this.engineRef.updateWorkspace(workspace);
+    }
+    async deleteWorkspace(workspace) {
+        return this.engineRef.deleteWorkspace(workspace);
+    }
+    async getWorkspaces() {
+        return this.engineRef.getWorkspaces();
+    }
+    async getActiveWorkspace() {
+        return this.engineRef.getActiveWorkspace();
     }
     engineRef;
     controlsRef;
@@ -773,6 +808,7 @@ const KritzelEditor = class {
     componentDidLoad() {
         this.registerCustomSvgIcons();
         this.listenForMobileKeyboard();
+        this.setOsSpecificCssVariables();
     }
     async checkIsReady() {
         await customElements.whenDefined('kritzel-editor');
@@ -796,12 +832,37 @@ const KritzelEditor = class {
     }
     listenForMobileKeyboard() {
         KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {
-            console.log('Mobile keyboard visibility changed:', isOpen);
             this.isVirtualKeyboardOpen = isOpen;
         });
     }
+    setOsSpecificCssVariables() {
+        const os = KritzelDevicesHelper.detectOS();
+        switch (os) {
+            case 'iOS':
+                // iOS specific adjustments
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-transition', 'cubic-bezier(0.25, 0.1, 0.25, 1.0)');
+                this.host.style.setProperty('--kritzel-editor-controls-transform', 'translateY(200%)');
+                this.host.style.setProperty('--kritzel-editor-controls-transition-duration', '0.25s');
+                break;
+            case 'Android':
+                // Android specific adjustments
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-bottom', '24px');
+                break;
+            default:
+                // Default for Windows/Linux
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-top', '14px');
+                this.host.style.setProperty('--kritzel-editor-workspace-manager-left', '14px');
+                this.host.style.setProperty('--kritzel-editor-controls-bottom', '14px');
+                break;
+        }
+    }
     render() {
-        return (h(Host, { key: '0f51215c0ede25bf8edfbf1420fc8d6c64175b8a' }, h("kritzel-workspace-manager", { key: '14affeb4c161a401d9cca32d0681d576b67b5199', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => this.activeWorkspace = event.detail, onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: '0e96fdbfbe412ea0a0bae49c693190b71e78f112', 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 }), h("kritzel-controls", { key: '6098132ddf95b5dd4b1a1a6492b31f0ef43693c4', style: { display: this.isVirtualKeyboardOpen ? 'none' : (this.isControlsVisible ? 'flex' : 'none') }, ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (h(Host, { key: '17c4e1ce489a5cd359972e67105019ad64703b19' }, h("kritzel-workspace-manager", { key: '963f62afe326d33eccdabda804bc3e260aafc306', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-engine", { key: 'f60f67d06ce73f5f86716fc0ec68408c71100d82', 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) }), h("kritzel-controls", { key: '1dc25c1bbb50978cfac3cdaa2d3ae0a32ca7c4f7', 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"],
@@ -811,117 +872,119 @@ const KritzelEditor = class {
 KritzelEditor.style = kritzelEditorCss;
 
 class KritzelViewport {
-    _store;
+    _core;
     initialTouchDistance = 0;
     startX = 0;
     startY = 0;
-    constructor(store, host) {
-        this._store = store;
-        this._store.state.host = host;
-        this._store.state.viewportWidth = host.clientWidth;
-        this._store.state.viewportHeight = host.clientHeight;
-        this._store.state.startX = 0;
-        this._store.state.startY = 0;
-        this._store.state.translateX = 0;
-        this._store.state.translateY = 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);
     }
     handleResize() {
-        this._store.state.viewportWidth = this._store.state.host.clientWidth;
-        this._store.state.viewportHeight = this._store.state.host.clientHeight;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
+        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.rerender();
     }
     handlePointerDown(event) {
         if (event.pointerType === 'mouse') {
-            const adjustedClientX = event.clientX - this._store.offsetX;
-            const adjustedClientY = event.clientY - this._store.offsetY;
+            const adjustedClientX = event.clientX - this._core.store.offsetX;
+            const adjustedClientY = event.clientY - this._core.store.offsetY;
             if (event.button === KritzelMouseButton.Right) {
-                this._store.state.isPanning = true;
-                this._store.state.startX = adjustedClientX;
-                this._store.state.startY = adjustedClientY;
+                this._core.store.setState('isPanning', true);
+                this._core.store.setState('startX', adjustedClientX);
+                this._core.store.setState('startY', adjustedClientY);
             }
         }
         if (event.pointerType === 'touch') {
-            const activePointers = Array.from(this._store.state.pointers.values());
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
-                this._store.state.currentPath = null;
-                this._store.state.isScaling = true;
-                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
-                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
-                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
-                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
+                this._core.store.setState('currentPath', null);
+                this._core.store.setState('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;
+                const secondTouchY = activePointers[1].clientY - this._core.store.offsetY;
                 this.initialTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
                 this.startX = (firstTouchX + secondTouchX) / 2;
                 this.startY = (firstTouchY + secondTouchY) / 2;
-                this._store.rerender();
+                this._core.rerender();
             }
         }
     }
     handlePointerMove(event) {
         if (event.pointerType === 'mouse') {
-            const hostRect = this._store.state.host.getBoundingClientRect();
+            const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-            if (this._store.state.isPanning) {
-                this._store.state.translateX -= this._store.state.startX - xRelativeToHost;
-                this._store.state.translateY -= this._store.state.startY - yRelativeToHost;
-                this._store.state.startX = xRelativeToHost;
-                this._store.state.startY = yRelativeToHost;
-                this._store.state.hasViewportChanged = true;
-                this._store.state.skipContextMenu = true;
-                this._store.rerender();
-                this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+            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);
+            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.rerender();
+                this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
             }
         }
         if (event.pointerType === 'touch') {
-            const hostRect = this._store.state.host.getBoundingClientRect();
+            const hostRect = this._core.store.state.host.getBoundingClientRect();
             const xRelativeToHost = event.clientX - hostRect.left;
             const yRelativeToHost = event.clientY - hostRect.top;
-            this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-            this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-            const activePointers = Array.from(this._store.state.pointers.values());
+            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);
+            const activePointers = Array.from(this._core.store.state.pointers.values());
             if (activePointers.length === 2) {
-                const firstTouchX = activePointers[0].clientX - this._store.offsetX;
-                const firstTouchY = activePointers[0].clientY - this._store.offsetY;
-                const secondTouchX = activePointers[1].clientX - this._store.offsetX;
-                const secondTouchY = activePointers[1].clientY - this._store.offsetY;
+                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;
+                const secondTouchY = activePointers[1].clientY - this._core.store.offsetY;
                 const currentTouchDistance = Math.sqrt(Math.pow(firstTouchX - secondTouchX, 2) + Math.pow(firstTouchY - secondTouchY, 2));
                 const midpointX = (firstTouchX + secondTouchX) / 2;
                 const midpointY = (firstTouchY + secondTouchY) / 2;
                 const scaleRatio = currentTouchDistance / this.initialTouchDistance;
-                const newScale = this._store.state.scale * scaleRatio;
-                if (newScale > this._store.state.scaleMax || newScale < this._store.state.scaleMin) {
-                    this._store.state.translateX += midpointX - this.startX;
-                    this._store.state.translateY += midpointY - this.startY;
+                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);
                 }
                 else {
-                    const translateXAdjustment = (midpointX - this._store.state.translateX) * (scaleRatio - 1);
-                    const translateYAdjustment = (midpointY - this._store.state.translateY) * (scaleRatio - 1);
-                    this._store.state.translateX += midpointX - this.startX - translateXAdjustment;
-                    this._store.state.translateY += midpointY - this.startY - translateYAdjustment;
-                    this._store.state.scale = newScale;
+                    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.initialTouchDistance = currentTouchDistance;
                 }
                 this.startX = midpointX;
                 this.startY = midpointY;
-                this._store.state.hasViewportChanged = true;
-                this._store.rerender();
-                this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+                this._core.store.setState('hasViewportChanged', true);
+                this._core.rerender();
+                this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
             }
         }
     }
     handlePointerUp(event) {
         if (event.pointerType === 'mouse') {
-            if (this._store.state.isPanning) {
-                this._store.state.isPanning = false;
-                this._store.rerender();
+            if (this._core.store.state.isPanning) {
+                this._core.store.setState('isPanning', false);
+                this._core.rerender();
             }
         }
         if (event.pointerType === 'touch') {
-            this._store.state.isScaling = false;
-            this._store.rerender();
+            this._core.store.setState('isScaling', false);
+            this._core.rerender();
         }
     }
     handleWheel(event) {
@@ -934,188 +997,169 @@ class KritzelViewport {
         }
     }
     handleZoom(event) {
-        const rect = this._store.state.host.getBoundingClientRect();
+        this._core.store.setState('isScaling', true);
+        const rect = this._core.store.state.host.getBoundingClientRect();
         const xRelativeToHost = event.clientX - rect.left;
         const yRelativeToHost = event.clientY - rect.top;
-        this._store.state.pointerX = (xRelativeToHost - this._store.state.translateX) / this._store.state.scale;
-        this._store.state.pointerY = (yRelativeToHost - this._store.state.translateY) / this._store.state.scale;
-        const delta = event.deltaY > 0 ? -this._store.state.scaleStep * this._store.state.scale : this._store.state.scaleStep * this._store.state.scale;
-        const newScale = Math.min(this._store.state.scaleMax, Math.max(this._store.state.scaleMin, this._store.state.scale + delta));
-        const scaleRatio = newScale / this._store.state.scale;
-        const translateXAdjustment = (xRelativeToHost - this._store.state.translateX) * (scaleRatio - 1);
-        const translateYAdjustment = (yRelativeToHost - this._store.state.translateY) * (scaleRatio - 1);
-        this._store.state.scale = newScale;
-        this._store.state.translateX -= translateXAdjustment;
-        this._store.state.translateY -= translateYAdjustment;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
+        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);
+        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.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.rerender();
+        }, 300);
     }
     handlePan(event) {
+        this._core.store.setState('isPanning', true);
         const panSpeed = 0.8;
-        this._store.state.translateX -= event.deltaX * panSpeed;
-        this._store.state.translateY -= event.deltaY * panSpeed;
-        this._store.state.hasViewportChanged = true;
-        this._store.rerender();
-        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
-    }
-}
-
-class UpdateViewportCommand extends KritzelBaseCommand {
-    currentViewport;
-    previousViewport;
-    constructor(store, initiator, previousViewport, skipHistory = false) {
-        super(store, initiator, skipHistory);
-        this.previousViewport = previousViewport;
-        this.currentViewport = {
-            scale: this._store.state.scale,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-    execute() {
-        this._store.state.scale = this.currentViewport.scale;
-        this._store.state.translateX = this.currentViewport.translateX;
-        this._store.state.translateY = this.currentViewport.translateY;
-    }
-    undo() {
-        this._store.state.scale = this.previousViewport.scale;
-        this._store.state.translateX = this.previousViewport.translateX;
-        this._store.state.translateY = this.previousViewport.translateY;
+        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.rerender();
+        this._core.updateWorkspaceViewport(this._core.store.state.translateX, this._core.store.state.translateY, this._core.store.state.scale);
+        setTimeout(() => {
+            this._core.store.setState('isPanning', false);
+            this._core.rerender();
+        }, 300);
     }
 }
 
-class KritzelCircularBuffer {
-    buffer;
-    capacity;
-    head = 0;
-    tail = 0;
-    size = 0;
-    constructor(capacity) {
-        this.capacity = capacity;
-        this.buffer = new Array(capacity).fill(null);
+class KritzelKeyHandler extends KritzelBaseHandler {
+    constructor(core) {
+        super(core);
     }
-    add(item) {
-        this.buffer[this.head] = item;
-        this.head = (this.head + 1) % this.capacity;
-        if (this.size < this.capacity) {
-            this.size++;
+    handleKeyDown(event) {
+        this._core.store.setState('isCtrlKeyPressed', event.ctrlKey);
+        if (this._core.store.state.isCtrlKeyPressed) {
+            event.preventDefault();
         }
-        else {
-            this.tail = (this.tail + 1) % this.capacity;
+        if (event.key === 'Escape' && this._core.store.state.selectionGroup) {
+            this._core.clearSelection();
         }
-    }
-    pop() {
-        if (this.size === 0) {
-            return null;
+        if (event.key === 'Delete' && this._core.store.state.selectionGroup) {
+            this._core.delete();
         }
-        this.head = (this.head - 1 + this.capacity) % this.capacity;
-        const item = this.buffer[this.head];
-        this.buffer[this.head] = null;
-        this.size--;
-        return item;
-    }
-    peek() {
-        if (this.size === 0) {
-            return null;
+        if (event.key === 'z' && event.ctrlKey) {
+            this._core.history.undo();
+        }
+        if (event.key === 'y' && event.ctrlKey) {
+            this._core.history.redo();
+        }
+        if (event.key === 's' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'b' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('brush'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'e' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('eraser'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'i' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('image'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'x' && event.ctrlKey) {
+            this._core.store.setState('activeTool', KritzelToolRegistry.getTool('text'));
+            this._core.deselectAllObjects();
+        }
+        if (event.key === 'c' && event.ctrlKey && this._core.store.state.selectionGroup) {
+            this._core.copy();
+            this._core.rerender();
+        }
+        if (event.key === 'v' && event.ctrlKey && this._core.store.state.copiedObjects) {
+            this._core.paste();
+        }
+        if (event.key === '+' && event.ctrlKey && this._core.store.state.selectionGroup) {
+            this._core.bringForward();
+        }
+        if (event.key === '-' && event.ctrlKey && this._core.store.state.selectionGroup) {
+            this._core.sendBackward();
+        }
+        if (event.key === '*' && event.shiftKey && this._core.store.state.selectionGroup) {
+            this._core.bringToFront();
+        }
+        if (event.key === '_' && event.shiftKey && this._core.store.state.selectionGroup) {
+            this._core.sendToBack();
+        }
+        if (event.key === 'a' && event.ctrlKey && this._core.store.state.activeText) {
+            this._core.store.state.activeText.selectAll();
+        }
+        if (event.key === 'v' && event.ctrlKey && this._core.store.state.activeText) {
+            this._core.store.state.activeText.insertFromClipboard();
         }
-        const lastIndex = (this.head - 1 + this.capacity) % this.capacity;
-        return this.buffer[lastIndex];
-    }
-    isEmpty() {
-        return this.size === 0;
     }
-    clear() {
-        this.buffer.fill(null);
-        this.head = 0;
-        this.tail = 0;
-        this.size = 0;
+    handleKeyUp(event) {
+        this._core.store.setState('isCtrlKeyPressed', event.ctrlKey);
     }
 }
 
-class KritzelHistory {
-    _store;
-    undoStack;
-    redoStack;
-    previousViewport;
-    constructor(store) {
-        this._store = store;
-        this.undoStack = new KritzelCircularBuffer(this._store.state.historyBufferSize);
-        this.redoStack = new KritzelCircularBuffer(this._store.state.historyBufferSize);
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
-    }
-    reset() {
-        this.undoStack.clear();
-        this.redoStack.clear();
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY
-        };
+class KritzelContextMenuHandler extends KritzelBaseHandler {
+    globalContextMenuItems = [];
+    objectContextMenuItems = [];
+    constructor(core, globalContextMenuItems, objectContextMenuItems) {
+        super(core);
+        this.globalContextMenuItems = globalContextMenuItems;
+        this.objectContextMenuItems = objectContextMenuItems;
     }
-    executeCommand(command) {
-        if (this._store.state.hasViewportChanged) {
-            this.addUpdateViewportCommand();
-        }
-        command.execute();
-        if (command.skipHistory === false) {
-            if (this._store.state.debugInfo.logCommands) {
-                console.info('add', command);
-            }
-            this.undoStack.add(command);
-            if (this.redoStack.isEmpty() === false) {
-                this.redoStack.clear();
-            }
+    handleContextMenu(event) {
+        if (!(this._core.store.state.activeTool instanceof KritzelSelectionTool)) {
+            return;
         }
-        this._store.rerender();
-    }
-    undo() {
-        if (this._store.state.hasViewportChanged) {
-            const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
-            command.undo();
-            this._store.state.hasViewportChanged = false;
-            this._store.rerender();
+        if (this._core.store.state.skipContextMenu) {
+            this._core.store.setState('skipContextMenu', false);
             return;
         }
-        const command = this.undoStack.pop();
-        if (command) {
-            command.undo();
-            if (this._store.state.debugInfo.logCommands)
-                console.info('undo', command);
-            this.redoStack.add(command);
+        const selectedObject = this._core.getObjectFromPointerEvent(event, '.object');
+        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
+            const selectionGroup = KritzelSelectionGroup.create(this._core);
+            selectionGroup.addOrRemove(selectedObject);
+            selectionGroup.isSelected = true;
+            selectionGroup.rotation = selectedObject.rotation;
+            this._core.store.setState('isSelecting', false);
+            const batch = new BatchCommand(this._core, this, [
+                new RemoveSelectionGroupCommand(this._core, this._core.store.state.selectionGroup),
+                new AddSelectionGroupCommand(this._core, this, selectionGroup),
+            ]);
+            this._core.history.executeCommand(batch);
+        }
+        this._core.store.setState('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;
+        const menuHeightEstimate = 200;
+        const margin = 10;
+        if (x + menuWidthEstimate > window.innerWidth - margin) {
+            x = window.innerWidth - menuWidthEstimate - margin;
         }
-        this._store.rerender();
-    }
-    redo() {
-        const command = this.redoStack.pop();
-        if (command) {
-            command.execute();
-            if (this._store.state.debugInfo.logCommands)
-                console.info('redo', command);
-            this.undoStack.add(command);
+        if (y + menuHeightEstimate > window.innerHeight - margin) {
+            y = window.innerHeight - menuHeightEstimate - margin;
         }
-        this._store.rerender();
+        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.rerender();
     }
-    addUpdateViewportCommand() {
-        const command = new UpdateViewportCommand(this._store, this, this.previousViewport);
-        command.execute();
-        this.undoStack.add(command);
-        if (this.redoStack.isEmpty() === false) {
-            this.redoStack.clear();
-        }
-        this._store.state.hasViewportChanged = false;
-        this.previousViewport = {
-            scale: this._store.state.scale,
-            scaleStep: this._store.state.scaleStep,
-            translateX: this._store.state.translateX,
-            translateY: this._store.state.translateY,
-        };
+}
+
+class KritzelClassHelper {
+    static isInstanceOf(object, className) {
+        return !!object && object.__class__ === className;
     }
 }
 
@@ -1134,7 +1178,6 @@ const DEFAULT_ENGINE_STATE = {
     isEnabled: true,
     isScaling: false,
     isPanning: false,
-    isFocused: false,
     isSelecting: false,
     isResizing: false,
     isResizeHandleSelected: false,
@@ -1197,7 +1240,7 @@ class KritzelDatabase {
                 return;
             }
             if (this.isLoggingEnabled) {
-                console.log(`[IndexedDB] Opening database: ${this.dbName}, version: ${this.dbVersion}`);
+                console.info(`[IndexedDB] Opening database: ${this.dbName}, version: ${this.dbVersion}`);
             }
             const request = indexedDB.open(this.dbName, this.dbVersion);
             request.onerror = () => {
@@ -1207,25 +1250,25 @@ class KritzelDatabase {
             request.onsuccess = () => {
                 this.db = request.result;
                 if (this.isLoggingEnabled) {
-                    console.log(`[IndexedDB] Database opened successfully.`);
+                    console.info(`[IndexedDB] Database opened successfully.`);
                 }
                 resolve();
             };
             request.onupgradeneeded = event => {
                 if (this.isLoggingEnabled) {
-                    console.log(`[IndexedDB] Upgrade needed for database: ${this.dbName}`);
+                    console.info(`[IndexedDB] Upgrade needed for database: ${this.dbName}`);
                 }
                 const db = event.target.result;
                 stores.forEach(storeConfig => {
                     if (!db.objectStoreNames.contains(storeConfig.name)) {
                         if (this.isLoggingEnabled) {
-                            console.log(`[IndexedDB] Creating store: ${storeConfig.name}`);
+                            console.info(`[IndexedDB] Creating store: ${storeConfig.name}`);
                         }
                         const store = db.createObjectStore(storeConfig.name, storeConfig.options);
                         if (storeConfig.indices) {
                             storeConfig.indices.forEach(index => {
                                 if (this.isLoggingEnabled) {
-                                    console.log(`[IndexedDB] Creating index: ${index.name} on store: ${storeConfig.name}`);
+                                    console.info(`[IndexedDB] Creating index: ${index.name} on store: ${storeConfig.name}`);
                                 }
                                 store.createIndex(index.name, index.keyPath, index.options);
                             });
@@ -1238,7 +1281,7 @@ class KritzelDatabase {
     close() {
         if (this.db) {
             if (this.isLoggingEnabled) {
-                console.log(`[IndexedDB] Closing database: ${this.dbName}`);
+                console.info(`[IndexedDB] Closing database: ${this.dbName}`);
             }
             this.db.close();
             this.db = null;
@@ -1246,43 +1289,51 @@ class KritzelDatabase {
     }
     async add(storeName, item) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Add:', { storeName, item });
+            console.info('[IndexedDB] Add:', { storeName, item });
+        }
+        if (item.serialize === undefined) {
+            throw new Error('Item does not implement KritzelSerializable interface.');
         }
-        return this.executeTransaction(storeName, 'readwrite', store => store.add(item));
+        const serializedItem = item.serialize();
+        return this.executeTransaction(storeName, 'readwrite', store => store.add(serializedItem));
     }
     async get(storeName, key) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Get:', { storeName, key });
+            console.info('[IndexedDB] Get:', { storeName, key });
         }
         return this.executeTransaction(storeName, 'readonly', store => store.get(key));
     }
     async getAll(storeName) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] GetAll:', { storeName });
+            console.info('[IndexedDB] GetAll:', { storeName });
         }
         return this.executeTransaction(storeName, 'readonly', store => store.getAll());
     }
     async update(storeName, item) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Update:', { storeName, item });
+            console.info('[IndexedDB] Update:', { storeName, item });
         }
-        return this.executeTransaction(storeName, 'readwrite', store => store.put(item));
+        if (item.serialize === undefined) {
+            throw new Error('Item does not implement KritzelSerializable interface.');
+        }
+        const serializedItem = item.serialize();
+        return this.executeTransaction(storeName, 'readwrite', store => store.put(serializedItem));
     }
     async delete(storeName, key) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Delete:', { storeName, key });
+            console.info('[IndexedDB] Delete:', { storeName, key });
         }
         return this.executeTransaction(storeName, 'readwrite', store => store.delete(key));
     }
     async deleteByRange(storeName, range) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] DeleteByRange:', { storeName, range });
+            console.info('[IndexedDB] DeleteByRange:', { storeName, range });
         }
         return this.executeTransaction(storeName, 'readwrite', store => store.delete(range));
     }
     async getAllByRange(storeName, range) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] GetAllByRange:', { storeName, range });
+            console.info('[IndexedDB] GetAllByRange:', { storeName, range });
         }
         return this.executeTransaction(storeName, 'readonly', store => {
             return store.getAll(range);
@@ -1290,7 +1341,7 @@ class KritzelDatabase {
     }
     async getAllByIndex(storeName, indexName, query) {
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] GetAllByIndex:', { storeName, indexName, query });
+            console.info('[IndexedDB] GetAllByIndex:', { storeName, indexName, query });
         }
         return this.executeTransaction(storeName, 'readonly', store => {
             const index = store.index(indexName);
@@ -1326,7 +1377,7 @@ class KritzelDatabase {
         }
         const storeNames = await this.extractStoreNamesFromActions(actions);
         if (this.isLoggingEnabled) {
-            console.log('[IndexedDB] Starting batch transaction:', { storeNames });
+            console.info('[IndexedDB] Starting batch transaction:', { storeNames });
         }
         return new Promise((resolve, reject) => {
             const transaction = this.db.transaction(storeNames, 'readwrite');
@@ -1344,13 +1395,13 @@ class KritzelDatabase {
                 executeTransaction: (storeName, mode, action) => {
                     return new Promise((resolveRequest, rejectRequest) => {
                         if (this.isLoggingEnabled) {
-                            console.log('[IndexedDB] Executing batch action:', { storeName, mode });
+                            console.info('[IndexedDB] Executing batch action:', { storeName, mode });
                         }
                         const store = transaction.objectStore(storeName);
                         const request = action(store);
                         request.onsuccess = () => {
                             if (this.isLoggingEnabled) {
-                                console.log('[IndexedDB] Batch action request successful:', { result: request.result });
+                                console.info('[IndexedDB] Batch action request successful:', { result: request.result });
                             }
                             resolveRequest(request.result);
                         };
@@ -1363,7 +1414,7 @@ class KritzelDatabase {
             };
             transaction.oncomplete = () => {
                 if (this.isLoggingEnabled) {
-                    console.log('[IndexedDB] Batch transaction complete.');
+                    console.info('[IndexedDB] Batch transaction complete.');
                 }
                 Promise.all(promises).then(() => resolve(results));
             };
@@ -1408,6 +1459,164 @@ class KritzelDatabase {
     }
 }
 
+class UpdateViewportCommand extends KritzelBaseCommand {
+    currentViewport;
+    previousViewport;
+    constructor(core, initiator, previousViewport, skipHistory = false) {
+        super(core, initiator, skipHistory);
+        this.previousViewport = previousViewport;
+        this.currentViewport = {
+            scale: this._core.store.state.scale,
+            translateX: this._core.store.state.translateX,
+            translateY: this._core.store.state.translateY,
+        };
+    }
+    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);
+    }
+    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);
+    }
+}
+
+class KritzelCircularBuffer {
+    buffer;
+    capacity;
+    head = 0;
+    tail = 0;
+    size = 0;
+    constructor(capacity) {
+        this.capacity = capacity;
+        this.buffer = new Array(capacity).fill(null);
+    }
+    add(item) {
+        this.buffer[this.head] = item;
+        this.head = (this.head + 1) % this.capacity;
+        if (this.size < this.capacity) {
+            this.size++;
+        }
+        else {
+            this.tail = (this.tail + 1) % this.capacity;
+        }
+    }
+    pop() {
+        if (this.size === 0) {
+            return null;
+        }
+        this.head = (this.head - 1 + this.capacity) % this.capacity;
+        const item = this.buffer[this.head];
+        this.buffer[this.head] = null;
+        this.size--;
+        return item;
+    }
+    peek() {
+        if (this.size === 0) {
+            return null;
+        }
+        const lastIndex = (this.head - 1 + this.capacity) % this.capacity;
+        return this.buffer[lastIndex];
+    }
+    isEmpty() {
+        return this.size === 0;
+    }
+    clear() {
+        this.buffer.fill(null);
+        this.head = 0;
+        this.tail = 0;
+        this.size = 0;
+    }
+}
+
+class KritzelHistory {
+    _core;
+    undoStack;
+    redoStack;
+    previousViewport;
+    constructor(core) {
+        this._core = core;
+        this.undoStack = new KritzelCircularBuffer(this._core.store.state.historyBufferSize);
+        this.redoStack = new KritzelCircularBuffer(this._core.store.state.historyBufferSize);
+        this.previousViewport = {
+            scale: this._core.store.state.scale,
+            scaleStep: this._core.store.state.scaleStep,
+            translateX: this._core.store.state.translateX,
+            translateY: this._core.store.state.translateY,
+        };
+    }
+    reset() {
+        this.undoStack.clear();
+        this.redoStack.clear();
+        this.previousViewport = {
+            scale: this._core.store.state.scale,
+            scaleStep: this._core.store.state.scaleStep,
+            translateX: this._core.store.state.translateX,
+            translateY: this._core.store.state.translateY
+        };
+    }
+    executeCommand(command) {
+        if (this._core.store.state.hasViewportChanged) {
+            this.addUpdateViewportCommand();
+        }
+        command.execute();
+        if (command.skipHistory === false) {
+            if (this._core.store.state.debugInfo.logCommands) {
+                console.info('add', command);
+            }
+            this.undoStack.add(command);
+            if (this.redoStack.isEmpty() === false) {
+                this.redoStack.clear();
+            }
+        }
+        this._core.rerender();
+    }
+    undo() {
+        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.rerender();
+            return;
+        }
+        const command = this.undoStack.pop();
+        if (command) {
+            command.undo();
+            if (this._core.store.state.debugInfo.logCommands)
+                console.info('undo', command);
+            this.redoStack.add(command);
+        }
+        this._core.rerender();
+    }
+    redo() {
+        const command = this.redoStack.pop();
+        if (command) {
+            command.execute();
+            if (this._core.store.state.debugInfo.logCommands)
+                console.info('redo', command);
+            this.undoStack.add(command);
+        }
+        this._core.rerender();
+    }
+    addUpdateViewportCommand() {
+        const command = new UpdateViewportCommand(this._core, this, this.previousViewport);
+        command.execute();
+        this.undoStack.add(command);
+        if (this.redoStack.isEmpty() === false) {
+            this.redoStack.clear();
+        }
+        this._core.store.setState('hasViewportChanged', false);
+        this.previousViewport = {
+            scale: this._core.store.state.scale,
+            scaleStep: this._core.store.state.scaleStep,
+            translateX: this._core.store.state.translateX,
+            translateY: this._core.store.state.translateY,
+        };
+    }
+}
+
 class KritzelObjectMap {
     map;
     constructor() {
@@ -1452,18 +1661,8 @@ class KritzelObjectMap {
 }
 
 class KritzelStore {
-    _kritzelEngine;
     _state;
-    _history;
-    _database;
     _listeners = new Map();
-    objects = [];
-    get history() {
-        return this._history;
-    }
-    get database() {
-        return this._database;
-    }
     get state() {
         return this._state;
     }
@@ -1479,18 +1678,58 @@ class KritzelStore {
     get offsetX() {
         return this._state.host.getBoundingClientRect().left;
     }
-    get offsetY() {
-        return this._state.host.getBoundingClientRect().top;
+    get offsetY() {
+        return this._state.host.getBoundingClientRect().top;
+    }
+    get isDisabled() {
+        return this._state.isEnabled === false || this._state.isReady === false || this._state.activeWorkspace === null;
+    }
+    constructor(state) {
+        this._state = state;
+        this._state.objectsMap = new KritzelObjectMap();
+    }
+    onStateChange(property, listener) {
+        if (!this._listeners.has(property)) {
+            this._listeners.set(property, new Set());
+        }
+        this._listeners.get(property).add(listener);
+    }
+    getState(property) {
+        return this._state[property];
+    }
+    setState(property, value) {
+        const oldValue = this._state[property];
+        if (oldValue !== value) {
+            this._state[property] = value;
+            if (this._listeners.has(property)) {
+                this._listeners.get(property).forEach(listener => listener(value, oldValue, String(property)));
+            }
+        }
+    }
+}
+
+class KritzelCore {
+    _kritzelEngine;
+    _store;
+    _history;
+    _database;
+    get engine() {
+        return this._kritzelEngine;
+    }
+    get history() {
+        return this._history;
+    }
+    get database() {
+        return this._database;
     }
-    get isDisabled() {
-        return this._state.isEnabled === false || this._state.isReady === false || this._state.activeWorkspace === null;
+    get store() {
+        return this._store;
     }
     constructor(kritzelEngine) {
-        this._state = DEFAULT_ENGINE_STATE;
         this._kritzelEngine = kritzelEngine;
+        this._store = new KritzelStore(DEFAULT_ENGINE_STATE);
         this._history = new KritzelHistory(this);
-        this._database = new KritzelDatabase('kritzelDB', 1, this._state.debugInfo.logDatabase);
-        this._state.objectsMap = new KritzelObjectMap();
+        this._database = new KritzelDatabase('kritzelDB', 1, this._store.state.debugInfo.logDatabase);
     }
     async initializeDatabase() {
         await this._database.open([
@@ -1506,52 +1745,50 @@ class KritzelStore {
         const workspaces = await this.getWorkspaces();
         const mostRecentWorkspace = [...workspaces].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())[0];
         const fallbackWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
-        this._state.activeWorkspace = workspace ?? mostRecentWorkspace ?? fallbackWorkspace;
-        const isExistingWorkspace = await this.getWorkspace(this._state.activeWorkspace.id);
+        this._store.setState('activeWorkspace', workspace ?? mostRecentWorkspace ?? fallbackWorkspace);
+        const isExistingWorkspace = await this.getWorkspace(this._store.state.activeWorkspace.id);
         if (isExistingWorkspace) {
-            await this.updateWorkspace(this._state.activeWorkspace);
+            await this.updateWorkspace(this._store.state.activeWorkspace);
         }
         else {
-            await this.createWorkspace(this._state.activeWorkspace);
+            await this.createWorkspace(this._store.state.activeWorkspace);
         }
-        this._state.workspaces = await this.getWorkspaces();
-        this.state.translateX = this._state.activeWorkspace.viewport.translateX;
-        this.state.translateY = this._state.activeWorkspace.viewport.translateY;
-        this.state.scale = this._state.activeWorkspace.viewport.scale;
-        await this.initializeWorkspaceObjects(this._state.activeWorkspace.id);
+        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);
+        await this.initializeWorkspaceObjects(this._store.state.activeWorkspace.id);
     }
     async initializeWorkspaceObjects(workspaceId) {
-        this._state.objectsMap.reset();
+        this._store.state.objectsMap.reset();
         this._history.reset();
         const objectsFromDb = await this._database.getAllByRange('objects', IDBKeyRange.bound([workspaceId], [workspaceId, '\uffff']));
         const reviver = new KritzelReviver(this);
         objectsFromDb.forEach(element => {
             const revivedObject = reviver.revive(element);
-            this._state.objectsMap.insert(revivedObject);
+            this._store.state.objectsMap.insert(revivedObject);
         });
         this.rerender();
     }
     async updateWorkspaceViewport(translateX, translateY, scale) {
-        if (!this.state.activeWorkspace) {
+        const activeWorkspace = this._store.state.activeWorkspace;
+        if (!activeWorkspace) {
             throw new Error('Workspace not initialized');
         }
-        this.state.activeWorkspace.viewport = {
-            translateX,
-            translateY,
-            scale,
-        };
-        this.state.activeWorkspace.updatedAt = new Date();
-        await this._database.update('workspaces', this.state.activeWorkspace);
+        activeWorkspace.viewport = { translateX, translateY, scale };
+        activeWorkspace.updatedAt = new Date();
+        await this._database.update('workspaces', activeWorkspace);
     }
     async addObjectToDatabase(object) {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        if (!this.state.activeWorkspace) {
+        const activeWorkspace = this._store.state.activeWorkspace;
+        if (!activeWorkspace) {
             throw new Error('Workspace not initialized');
         }
-        this.state.activeWorkspace.updatedAt = new Date();
-        await this._database.batch([db => db.add('objects', object), db => db.update('workspaces', this.state.activeWorkspace)]).catch(err => {
+        activeWorkspace.updatedAt = new Date();
+        await this._database.batch([db => db.add('objects', object), db => db.update('workspaces', activeWorkspace)]).catch(err => {
             console.error('Error adding object to database:', err);
         });
     }
@@ -1559,11 +1796,12 @@ class KritzelStore {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        if (!this.state.activeWorkspace) {
+        const activeWorkspace = this._store.state.activeWorkspace;
+        if (!activeWorkspace) {
             throw new Error('Workspace not initialized');
         }
-        this.state.activeWorkspace.updatedAt = new Date();
-        await this._database.batch([db => db.update('objects', object), db => db.update('workspaces', this.state.activeWorkspace)]).catch(err => {
+        activeWorkspace.updatedAt = new Date();
+        await this._database.batch([db => db.update('objects', object), db => db.update('workspaces', activeWorkspace)]).catch(err => {
             console.error('Error updating object in database:', err);
         });
     }
@@ -1571,25 +1809,28 @@ class KritzelStore {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        if (!this.state.activeWorkspace) {
+        const activeWorkspace = this._store.state.activeWorkspace;
+        if (!activeWorkspace) {
             throw new Error('Workspace not initialized');
         }
-        this.state.activeWorkspace.updatedAt = new Date();
-        await this._database.batch([db => db.delete('objects', [this.state.activeWorkspace.id, objectId]), db => db.update('workspaces', this.state.activeWorkspace)]).catch(err => {
+        activeWorkspace.updatedAt = new Date();
+        await this._database.batch([db => db.delete('objects', [activeWorkspace.id, objectId]), db => db.update('workspaces', activeWorkspace)]).catch(err => {
             console.error('Error deleting object from database:', err);
         });
     }
-    getWorkspace(id) {
+    async getWorkspace(id) {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        return this._database.get('workspaces', id);
+        const reviver = new KritzelReviver(this);
+        return this._database.get('workspaces', id).then(rawWorkspace => (rawWorkspace ? reviver.revive(rawWorkspace) : null));
     }
-    getWorkspaces() {
+    async getWorkspaces() {
         if (!this._database) {
             throw new Error('Database not initialized');
         }
-        return this._database.getAll('workspaces');
+        const reviver = new KritzelReviver(this);
+        return this._database.getAll('workspaces').then(rawWorkspaces => rawWorkspaces.map(ws => reviver.revive(ws)));
     }
     async createWorkspace(workspace) {
         if (!this._database) {
@@ -1598,7 +1839,7 @@ class KritzelStore {
         workspace.createdAt = new Date();
         workspace.updatedAt = new Date();
         await this._database.add('workspaces', workspace);
-        this.state.workspaces.push(workspace);
+        this._store.state.workspaces.push(workspace);
     }
     async updateWorkspace(workspace) {
         if (!this._database) {
@@ -1606,9 +1847,11 @@ class KritzelStore {
         }
         workspace.updatedAt = new Date();
         await this._database.update('workspaces', workspace);
-        const index = this.state.workspaces.findIndex(w => w.id === workspace.id);
+        const workspaces = this._store.state.workspaces;
+        const index = workspaces.findIndex(w => w.id === workspace.id);
         if (index !== -1) {
-            this.state.workspaces[index] = workspace;
+            workspaces[index] = workspace;
+            this._store.setState('workspaces', workspaces);
         }
     }
     async deleteWorkspace(workspace) {
@@ -1618,7 +1861,7 @@ class KritzelStore {
         const objectRange = IDBKeyRange.bound([workspace.id], [workspace.id, '\uffff']);
         await this._database.deleteByRange('objects', objectRange);
         await this._database.delete('workspaces', workspace.id);
-        this.state.workspaces = this.state.workspaces.filter(ws => ws.id !== workspace.id);
+        this._store.setState('workspaces', this._store.state.workspaces.filter(ws => ws.id !== workspace.id));
     }
     rerender() {
         if (this._kritzelEngine) {
@@ -1626,7 +1869,7 @@ class KritzelStore {
         }
     }
     findObjectById(id) {
-        for (const object of this.allObjects) {
+        for (const object of this._store.allObjects) {
             if (object.id === id) {
                 return object;
             }
@@ -1634,33 +1877,18 @@ class KritzelStore {
         return null;
     }
     deselectAllObjects() {
-        if (this._state.selectionGroup) {
+        if (this._store.state.selectionGroup) {
             this._history.executeCommand(new RemoveSelectionGroupCommand(this, this));
         }
     }
-    onStateChange(property, listener) {
-        if (!this._listeners.has(property)) {
-            this._listeners.set(property, new Set());
-        }
-        this._listeners.get(property).add(listener);
-    }
-    setState(property, value) {
-        const oldValue = this._state[property];
-        if (oldValue !== value) {
-            this._state[property] = value;
-            if (this._listeners.has(property)) {
-                this._listeners.get(property).forEach(listener => listener(value, oldValue, String(property)));
-            }
-        }
-    }
     delete() {
-        if (!this.state.selectionGroup) {
+        if (!this._store.state.selectionGroup) {
             return;
         }
-        const deleteSelectedObjectsCommand = this.state.selectionGroup.objects.map(obj => new RemoveObjectCommand(this, this.state.selectionGroup, obj));
-        const removeSelectionGroupCommand = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
+        const deleteSelectedObjectsCommand = this._store.state.selectionGroup.objects.map(obj => new RemoveObjectCommand(this, this._store.state.selectionGroup, obj));
+        const removeSelectionGroupCommand = new RemoveSelectionGroupCommand(this, this._store.state.selectionGroup);
         const commands = [...deleteSelectedObjectsCommand, removeSelectionGroupCommand];
-        this.history.executeCommand(new BatchCommand(this, this.state.selectionGroup, commands));
+        this.history.executeCommand(new BatchCommand(this, this._store.state.selectionGroup, commands));
     }
     deleteObject(id, skipHistory = false) {
         const object = this.findObjectById(id);
@@ -1670,28 +1898,30 @@ class KritzelStore {
         }
     }
     copy() {
-        this.state.copiedObjects = this.state.selectionGroup.copy();
+        this._store.setState('copiedObjects', this._store.state.selectionGroup.copy());
     }
     paste(x, y) {
-        this.state.copiedObjects.isSelected = true;
-        const adjustedX = x !== undefined ? x : this.state.copiedObjects.translateX + 25;
-        const adjustedY = y !== undefined ? y : this.state.copiedObjects.translateY + 25;
-        this.state.copiedObjects.updatePosition(adjustedX, adjustedY);
+        const copiedObjects = this._store.state.copiedObjects;
+        copiedObjects.isSelected = true;
+        this._store.setState('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);
         const commands = [];
-        if (this.state.selectionGroup !== null) {
-            commands.push(new RemoveSelectionGroupCommand(this, this.state.selectionGroup));
+        if (this._store.state.selectionGroup !== null) {
+            commands.push(new RemoveSelectionGroupCommand(this, this._store.state.selectionGroup));
         }
-        const addCopiedObjectsCommands = this.state.copiedObjects.objects.map(obj => new AddObjectCommand(this, this, obj));
-        const addCopiedObjectsAsSelectionGroupCommand = new AddSelectionGroupCommand(this, this, this.state.copiedObjects);
+        const addCopiedObjectsCommands = this._store.state.copiedObjects.objects.map(obj => new AddObjectCommand(this, this, obj));
+        const addCopiedObjectsAsSelectionGroupCommand = new AddSelectionGroupCommand(this, this, this._store.state.copiedObjects);
         commands.push(...addCopiedObjectsCommands, addCopiedObjectsAsSelectionGroupCommand);
         this.history.executeCommand(new BatchCommand(this, this, commands));
-        this.state.isSelecting = false;
-        this.state.copiedObjects = this.state.selectionGroup.copy();
-        this.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this._store.setState('isSelecting', false);
+        this._store.setState('copiedObjects', this._store.state.selectionGroup.copy());
+        this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
     }
     bringForward(object) {
-        const max = this.allObjects.length + 1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const max = this._store.allObjects.length + 1;
+        const objects = object ? [object] : this._store.state.selectionGroup.objects;
         const increaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === max) {
                 return;
@@ -1702,7 +1932,7 @@ class KritzelStore {
     }
     sendBackward(object) {
         const min = 0;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const objects = object ? [object] : this._store.state.selectionGroup.objects;
         const decreaseZIndexCommands = objects.map(obj => {
             if (obj.zIndex === min) {
                 return;
@@ -1712,16 +1942,16 @@ class KritzelStore {
         this.history.executeCommand(new BatchCommand(this, this, decreaseZIndexCommands));
     }
     bringToFront(object) {
-        const max = Math.max(...this.allObjects.map(obj => obj.zIndex)) + 1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const max = Math.max(...this._store.allObjects.map(obj => obj.zIndex)) + 1;
+        const objects = object ? [object] : this._store.state.selectionGroup.objects;
         const increaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: max });
         });
         this.history.executeCommand(new BatchCommand(this, this, increaseZIndexCommands));
     }
     sendToBack(object) {
-        const min = Math.min(...this.allObjects.map(obj => obj.zIndex)) - 1;
-        const objects = object ? [object] : this.state.selectionGroup.objects;
+        const min = Math.min(...this._store.allObjects.map(obj => obj.zIndex)) - 1;
+        const objects = object ? [object] : this._store.state.selectionGroup.objects;
         const decreaseZIndexCommands = objects.map(obj => {
             return new UpdateObjectCommand(this, this, obj, { zIndex: min });
         });
@@ -1737,14 +1967,14 @@ class KritzelStore {
             selectionGroup.addOrRemove(obj);
         });
         selectionGroup.isSelected = true;
-        this.state.selectionGroup = selectionGroup;
+        this._store.setState('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.objectsMap
+        const objectsInViewport = this._store.state.objectsMap
             .filter(o => o.isInViewport())
             .filter(o => !(o instanceof KritzelSelectionGroup) && !(o instanceof KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
@@ -1754,31 +1984,31 @@ class KritzelStore {
                 selectionGroup.addOrRemove(obj);
             });
             selectionGroup.isSelected = true;
-            this.state.isSelecting = false;
+            this._store.setState('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'));
+            this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
         }
     }
     clearSelection() {
-        const command = new RemoveSelectionGroupCommand(this, this.state.selectionGroup);
+        const command = new RemoveSelectionGroupCommand(this, this._store.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;
+        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);
     }
     resetActiveText() {
-        if (this.state.activeText && this.state.activeText.value === ' ') {
-            this.deleteObject(this.state.activeText.id, true);
+        if (this._store.state.activeText && this._store.state.activeText.value === ' ') {
+            this.deleteObject(this._store.state.activeText.id, true);
         }
-        this.state.activeText = null;
+        this._store.setState('activeText', null);
     }
     getObjectFromPointerEvent(event, selector = '.object') {
-        const shadowRoot = this.state.host?.shadowRoot;
+        const shadowRoot = this._store.state.host?.shadowRoot;
         if (!shadowRoot)
             return null;
         const clientX = event.clientX;
@@ -1788,12 +2018,14 @@ class KritzelStore {
             return null;
         const selectedObject = elementAtPoint.closest(selector);
         if (selectedObject) {
-            return this.allObjects.find(object => selectedObject.id === object.id);
+            const foundObject = this._store.allObjects.find(object => selectedObject.id === object.id);
+            const isHit = foundObject?.hitTest(clientX, clientY);
+            return isHit ? foundObject : null;
         }
         return null;
     }
     getObjectsFromPointerEvent(event, selector = '.object') {
-        const shadowRoot = this.state.host?.shadowRoot;
+        const shadowRoot = this._store.state.host?.shadowRoot;
         if (!shadowRoot)
             return [];
         const clientX = event.clientX;
@@ -1809,288 +2041,119 @@ class KritzelStore {
             }
         });
         if (objectIds.size > 0) {
-            return this.allObjects.filter(object => objectIds.has(object.id)).sort((a, b) => b.zIndex - a.zIndex);
+            return this._store.allObjects.filter(object => objectIds.has(object.id)).sort((a, b) => b.zIndex - a.zIndex);
         }
         return [];
     }
     getCanvasPoint(event) {
-        if (!this.state.host) {
+        if (!this._store.state.host) {
             return { x: 0, y: 0 };
         }
-        // Get the position of the kritzel-engine host element relative to the viewport
-        const hostRect = this.state.host.getBoundingClientRect();
-        // 1. Make the pointer coordinates relative to the host element
+        const hostRect = this._store.state.host.getBoundingClientRect();
         const xRelativeToHost = event.clientX - hostRect.left;
         const yRelativeToHost = event.clientY - hostRect.top;
-        // 2. Reverse the translation applied to the #origin div
-        const xWithoutTranslate = xRelativeToHost - this.state.translateX;
-        const yWithoutTranslate = yRelativeToHost - this.state.translateY;
-        // 3. Reverse the scaling to get the final world coordinates
-        const worldX = xWithoutTranslate / this.state.scale;
-        const worldY = yWithoutTranslate / this.state.scale;
+        const xWithoutTranslate = xRelativeToHost - this._store.state.translateX;
+        const yWithoutTranslate = yRelativeToHost - this._store.state.translateY;
+        const worldX = xWithoutTranslate / this._store.state.scale;
+        const worldY = yWithoutTranslate / this._store.state.scale;
         return { x: worldX, y: worldY };
     }
 }
 
-class KritzelKeyHandler extends KritzelBaseHandler {
-    constructor(store) {
-        super(store);
-    }
-    handleKeyDown(event) {
-        if (this._store.state.isFocused === false) {
-            return;
-        }
-        this._store.state.isCtrlKeyPressed = event.ctrlKey;
-        if (this._store.state.isCtrlKeyPressed) {
-            event.preventDefault();
-        }
-        if (event.key === 'Escape' && this._store.state.selectionGroup) {
-            this._store.clearSelection();
-        }
-        if (event.key === 'Delete' && this._store.state.selectionGroup) {
-            this._store.delete();
-        }
-        if (event.key === 'z' && event.ctrlKey) {
-            this._store.history.undo();
-        }
-        if (event.key === 'y' && event.ctrlKey) {
-            this._store.history.redo();
-        }
-        if (event.key === 's' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'b' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('brush'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'e' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('eraser'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'i' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('image'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'x' && event.ctrlKey) {
-            this._store.setState('activeTool', KritzelToolRegistry.getTool('text'));
-            this._store.deselectAllObjects();
-        }
-        if (event.key === 'c' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.copy();
-            this._store.rerender();
-        }
-        if (event.key === 'v' && event.ctrlKey && this._store.state.copiedObjects) {
-            this._store.paste();
-        }
-        if (event.key === '+' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.bringForward();
-        }
-        if (event.key === '-' && event.ctrlKey && this._store.state.selectionGroup) {
-            this._store.sendBackward();
-        }
-        if (event.key === '*' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.bringToFront();
-        }
-        if (event.key === '_' && event.shiftKey && this._store.state.selectionGroup) {
-            this._store.sendToBack();
-        }
-        if (event.key === 'a' && event.ctrlKey && this._store.state.activeText) {
-            this._store.state.activeText.selectAll();
-        }
-        if (event.key === 'v' && event.ctrlKey && this._store.state.activeText) {
-            this._store.state.activeText.insertFromClipboard();
-        }
-    }
-    handleKeyUp(event) {
-        if (this._store.state.isFocused === false) {
-            return;
-        }
-        this._store.state.isCtrlKeyPressed = event.ctrlKey;
-    }
-}
-
-class KritzelContextMenuHandler extends KritzelBaseHandler {
-    globalContextMenuItems = [];
-    objectContextMenuItems = [];
-    constructor(store, globalContextMenuItems, objectContextMenuItems) {
-        super(store);
-        this.globalContextMenuItems = globalContextMenuItems;
-        this.objectContextMenuItems = objectContextMenuItems;
-    }
-    handleContextMenu(event) {
-        if (this._store.state.skipContextMenu) {
-            this._store.state.skipContextMenu = false;
-            return;
-        }
-        const selectedObject = this._store.getObjectFromPointerEvent(event, '.object');
-        if (selectedObject && !(selectedObject instanceof KritzelSelectionGroup)) {
-            this._store.state.selectionGroup = KritzelSelectionGroup.create(this._store);
-            this._store.state.selectionGroup.addOrRemove(selectedObject);
-            this._store.state.selectionGroup.isSelected = true;
-            this._store.state.selectionGroup.rotation = selectedObject.rotation;
-            this._store.state.isSelecting = false;
-            this._store.history.executeCommand(new AddSelectionGroupCommand(this._store, this, this._store.state.selectionGroup));
-        }
-        this._store.state.contextMenuItems = this._store.state.selectionGroup ? this.objectContextMenuItems : this.globalContextMenuItems;
-        let x = event.clientX - this._store.offsetX;
-        let y = event.clientY - this._store.offsetY;
-        const menuWidthEstimate = 150;
-        const menuHeightEstimate = 200;
-        const margin = 10;
-        if (x + menuWidthEstimate > window.innerWidth - margin) {
-            x = window.innerWidth - menuWidthEstimate - margin;
-        }
-        if (y + menuHeightEstimate > window.innerHeight - margin) {
-            y = window.innerHeight - menuHeightEstimate - margin;
-        }
-        x = Math.max(margin, x);
-        y = Math.max(margin, y);
-        this._store.state.contextMenuX = x;
-        this._store.state.contextMenuY = y;
-        this._store.state.isContextMenuVisible = true;
-        this._store.state.isEnabled = false;
-        this._store.rerender();
-    }
-}
-
-class KritzelClassHelper {
-    static isInstanceOf(object, className) {
-        return !!object && object.__class__ === className;
-    }
-}
-
 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 KritzelEngine = class {
+    get host() { return getElement(this); }
     workspace;
+    onWorkspaceChange(newWorkspace) {
+        if (this.core.store.state.activeWorkspace !== newWorkspace) {
+            this.core.initializeWorkspace(newWorkspace);
+        }
+    }
     activeTool;
     globalContextMenuItems;
     objectContextMenuItems;
     scaleMax = ABSOLUTE_SCALE_MAX;
-    scaleMin = ABSOLUTE_SCALE_MIN;
-    isEngineReady;
-    activeToolChange;
-    workspacesChange;
-    get host() { return getElement(this); }
-    forceUpdate = 0;
-    onWorkspaceChange(newWorkspace) {
-        if (newWorkspace) {
-            this.store.initializeWorkspace(newWorkspace);
-        }
-    }
     validateScaleMax(newValue) {
         if (newValue > ABSOLUTE_SCALE_MAX) {
             console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
             this.scaleMax = ABSOLUTE_SCALE_MAX;
-            this.store.state.scaleMax = this.scaleMax;
+            this.core.store.setState('scaleMax', this.scaleMax);
         }
         else {
-            this.store.state.scaleMax = newValue;
+            this.core.store.setState('scaleMax', newValue);
         }
     }
+    scaleMin = ABSOLUTE_SCALE_MIN;
     validateScaleMin(newValue) {
         if (newValue < ABSOLUTE_SCALE_MIN) {
             console.warn(`scaleMin cannot be less than ${ABSOLUTE_SCALE_MIN}.`);
             this.scaleMin = ABSOLUTE_SCALE_MIN;
-            this.store.state.scaleMin = this.scaleMin;
+            this.core.store.setState('scaleMin', this.scaleMin);
         }
         else {
-            this.store.state.scaleMin = newValue;
-        }
-    }
-    store;
-    viewport;
-    contextMenuHandler;
-    keyHandler;
-    contextMenuElement = null;
-    get isSelecting() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.isSelecting;
-    }
-    get isSelectionActive() {
-        return this.store.state.activeTool instanceof KritzelSelectionTool && this.store.state.selectionGroup !== null;
-    }
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.isEngineReady = createEvent(this, "isEngineReady");
-        this.activeToolChange = createEvent(this, "activeToolChange");
-        this.workspacesChange = createEvent(this, "workspacesChange");
-        this.store = new KritzelStore(this);
-    }
-    componentWillLoad() {
-        this.validateScaleMax(this.scaleMax);
-        this.validateScaleMin(this.scaleMin);
-    }
-    async componentDidLoad() {
-        this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
-        this.keyHandler = new KritzelKeyHandler(this.store);
-        this.viewport = new KritzelViewport(this.store, this.host);
-        this._registerStateChangeListeners();
-        await this.store.initializeDatabase();
-        await this.store.initializeWorkspace(this.workspace);
-        if (this.store.state.isReady === false) {
-            this.store.state.isReady = true;
-            this.isEngineReady.emit(this.store.state);
+            this.core.store.setState('scaleMin', newValue);
         }
     }
+    isEngineReady;
+    activeToolChange;
+    workspacesChange;
+    longpress;
+    forceUpdate = 0;
     handleWheel(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        if (this.store.state.isContextMenuVisible) {
+        if (this.core.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
         this.viewport.handleWheel(ev);
-        this.store.state?.activeTool?.handleWheel(ev);
+        this.core.store.state?.activeTool?.handleWheel(ev);
     }
     handlePointerDown(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        if (KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
-            return;
+        if (KritzelDevicesHelper.isTouchDevice()) {
+            KritzelEventHelper.onLongPress(ev, (event) => this.longpress.emit(event));
         }
-        KritzelEventHelper.onLongTouchPress(ev, (event) => {
-            if (!(this.store.state.activeTool instanceof KritzelSelectionTool)) {
-                return;
-            }
-            this.contextMenuHandler.handleContextMenu(event);
-        });
         this.host.setPointerCapture(ev.pointerId);
-        this.store.state.pointers.set(ev.pointerId, ev);
+        this.core.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerDown(ev);
-        this.store.state?.activeTool?.handlePointerDown(ev);
+        this.core.store.state?.activeTool?.handlePointerDown(ev);
     }
     handlePointerMove(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        this.store.state.pointers.set(ev.pointerId, ev);
+        this.core.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerMove(ev);
-        this.store.state?.activeTool?.handlePointerMove(ev);
+        this.core.store.state?.activeTool?.handlePointerMove(ev);
     }
     handlePointerUp(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
-        this.store.state.pointers.delete(ev.pointerId);
+        this.core.store.state.pointers.delete(ev.pointerId);
         this.host.releasePointerCapture(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        this.store.state?.activeTool?.handlePointerUp(ev);
+        this.core.store.state?.activeTool?.handlePointerUp(ev);
     }
     handlePointerCancel(ev) {
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
         this.host.releasePointerCapture(ev.pointerId);
-        this.store.state.pointers.delete(ev.pointerId);
+        this.core.store.state.pointers.delete(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        this.store.state?.activeTool?.handlePointerUp(ev);
+        this.core.store.state?.activeTool?.handlePointerUp(ev);
+    }
+    handleLongPress(ev) {
+        this.contextMenuHandler.handleContextMenu(ev.detail);
     }
     handleContextMenu(ev) {
         ev.preventDefault();
-        if (this.store.isDisabled) {
+        if (this.core.store.isDisabled) {
             return;
         }
         if (ev.pointerType === 'touch') {
@@ -2107,26 +2170,12 @@ const KritzelEngine = class {
     handleKeyUp(ev) {
         this.keyHandler.handleKeyUp(ev);
     }
-    updateFocus(ev) {
-        if (this.store.isDisabled) {
-            return;
-        }
-        const rect = this.store.state.host.getBoundingClientRect();
-        const isInside = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
-        const path = ev.composedPath();
-        const kritzelEngineElement = this.host.closest('kritzel-engine');
-        const isInKritzelEngine = path.includes(kritzelEngineElement || this.host);
-        this.store.setState('isFocused', isInside && isInKritzelEngine);
-    }
-    handleClick() {
-        this.enable();
-    }
     async registerTool(toolName, toolClass, toolConfig) {
         if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof KritzelBaseTool)) {
             console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
             return null;
         }
-        const registeredTool = KritzelToolRegistry.registerTool(toolName, toolClass, this.store);
+        const registeredTool = KritzelToolRegistry.registerTool(toolName, toolClass, this.core);
         if (toolConfig) {
             Object.entries(toolConfig).forEach(([key, value]) => {
                 registeredTool[key] = value;
@@ -2135,153 +2184,188 @@ const KritzelEngine = class {
         return Promise.resolve(registeredTool);
     }
     async changeActiveTool(tool) {
-        this.store.state.activeTool?.onDeactivate();
-        this.store.setState('activeTool', tool);
-        this.store.deselectAllObjects();
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', tool);
+        this.core.deselectAllObjects();
         tool?.onActivate();
     }
-    async setFocus() {
-        this.host.focus();
-        this.store.state.isFocused = true;
-    }
     async disable() {
-        this.store.state.isEnabled = false;
-        this.forceUpdate++;
+        this.core.store.setState('isEnabled', false);
+        this.core.rerender();
     }
     async enable() {
-        this.store.state.isEnabled = true;
-        this.forceUpdate++;
+        this.core.store.setState('isEnabled', true);
+        this.core.rerender();
     }
     async delete() {
-        this.store.delete();
+        this.core.delete();
     }
     async copy() {
-        this.store.copy();
+        this.core.copy();
     }
     async paste(x, y) {
-        this.store.paste(x, y);
+        this.core.paste(x, y);
     }
     async bringForward(object) {
-        this.store.bringForward(object);
+        this.core.bringForward(object);
     }
     async sendBackward(object) {
-        this.store.sendBackward(object);
+        this.core.sendBackward(object);
     }
     async bringToFront(object) {
-        this.store.bringToFront(object);
+        this.core.bringToFront(object);
     }
     async sendToBack(object) {
-        this.store.sendToBack(object);
+        this.core.sendToBack(object);
     }
     async undo() {
-        this.store.history.undo();
+        this.core.history.undo();
     }
     async redo() {
-        this.store.history.redo();
+        this.core.history.redo();
     }
     async hideContextMenu() {
-        this.store.state.pointers.clear();
-        this.store.state.isContextMenuVisible = false;
-        this.store.state.selectionBox = null;
-        this.store.state.isSelecting = false;
+        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.rerender();
     }
     async getObjectById(id) {
-        const object = this.store.objects.find(obj => obj.id === id);
+        const object = this.core.store.allObjects.find(obj => obj.id === id);
         return object || null;
     }
     async addObject(object) {
-        this.store.deselectAllObjects();
+        this.core.deselectAllObjects();
         object.id = object.generateId();
-        object._store = this.store;
-        object.scale = object.scale ? object.scale : this.store.state.scale;
-        object.zIndex = this.store.currentZIndex;
-        const command = new AddObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
+        object._core = this.core;
+        object.scale = object.scale ? object.scale : this.core.store.state.scale;
+        object.zIndex = this.core.store.currentZIndex;
+        const command = new AddObjectCommand(this.core, this, object);
+        this.core.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);
+        this.core.deselectAllObjects();
+        const command = new UpdateObjectCommand(this.core, this, object, updatedProperties);
+        this.core.history.executeCommand(command);
         return object;
     }
     async removeObject(object) {
-        this.store.deselectAllObjects();
-        const command = new RemoveObjectCommand(this.store, this, object);
-        this.store.history.executeCommand(command);
+        this.core.deselectAllObjects();
+        const command = new RemoveObjectCommand(this.core, this, object);
+        this.core.history.executeCommand(command);
         return object;
     }
     async getSelectedObjects() {
-        return this.store.state.selectionGroup ? this.store.state.selectionGroup.objects : [];
+        return this.core.store.state.selectionGroup ? this.core.store.state.selectionGroup.objects : [];
     }
     async selectObjects(objects) {
-        this.store.state.activeTool?.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectObjects(objects);
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.deselectAllObjects();
+        this.core.selectObjects(objects);
     }
     async selectAllObjectsInViewport() {
-        this.store.state.activeTool?.onDeactivate();
-        this.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
-        this.store.deselectAllObjects();
-        this.store.selectAllObjectsInViewport();
+        this.core.store.state.activeTool?.onDeactivate();
+        this.core.store.setState('activeTool', KritzelToolRegistry.getTool('selection'));
+        this.core.deselectAllObjects();
+        this.core.selectAllObjectsInViewport();
     }
     async clearSelection() {
-        this.store.clearSelection();
+        this.core.clearSelection();
     }
     async centerObjectInViewport(object) {
         object.centerInViewport();
-        const command = new UpdateObjectCommand(this.store, this, object, object);
-        this.store.history.executeCommand(command);
+        const command = new UpdateObjectCommand(this.core, this, object, object);
+        this.core.history.executeCommand(command);
         return object;
     }
     async getCopiedObjects() {
-        return this.store.state.copiedObjects?.objects || [];
+        return this.core.store.state.copiedObjects?.objects || [];
     }
     async createWorkspace(workspace) {
-        return this.store.createWorkspace(workspace).then(() => {
-            this.workspacesChange.emit(this.store.state.workspaces);
-        });
+        workspace._core = this.core;
+        await this.core.createWorkspace(workspace);
+        this.workspacesChange.emit(this.core.store.state.workspaces);
+        return workspace;
     }
     async updateWorkspace(workspace) {
-        return this.store.updateWorkspace(workspace).then(() => {
-            this.workspacesChange.emit(this.store.state.workspaces);
-        });
+        await this.core.updateWorkspace(workspace);
+        this.workspacesChange.emit(this.core.store.state.workspaces);
     }
     async deleteWorkspace(workspace) {
-        return this.store.deleteWorkspace(workspace).then(async () => {
-            this.workspacesChange.emit(this.store.state.workspaces);
-        });
+        await this.core.deleteWorkspace(workspace);
+        this.workspacesChange.emit(this.core.store.state.workspaces);
     }
     async getWorkspaces() {
-        return this.store.getWorkspaces();
+        return this.core.getWorkspaces();
+    }
+    async getActiveWorkspace() {
+        return this.core.store.state.activeWorkspace;
+    }
+    core;
+    viewport;
+    contextMenuHandler;
+    keyHandler;
+    contextMenuElement = null;
+    get isSelecting() {
+        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.isSelecting;
+    }
+    get isSelectionActive() {
+        return this.core.store.state.activeTool instanceof KritzelSelectionTool && this.core.store.state.selectionGroup !== null;
+    }
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.isEngineReady = createEvent(this, "isEngineReady");
+        this.activeToolChange = createEvent(this, "activeToolChange");
+        this.workspacesChange = createEvent(this, "workspacesChange");
+        this.longpress = createEvent(this, "longpress");
+        this.core = new KritzelCore(this);
+    }
+    componentWillLoad() {
+        this.validateScaleMax(this.scaleMax);
+        this.validateScaleMin(this.scaleMin);
+    }
+    async componentDidLoad() {
+        this.contextMenuHandler = new KritzelContextMenuHandler(this.core, this.globalContextMenuItems, this.objectContextMenuItems);
+        this.keyHandler = new KritzelKeyHandler(this.core);
+        this.viewport = new KritzelViewport(this.core, this.host);
+        await this.core.initializeDatabase();
+        await this.core.initializeWorkspace(this.workspace);
+        this._registerStateChangeListeners();
+        if (this.core.store.state.isReady === false) {
+            this.core.store.setState('isReady', true);
+            this.isEngineReady.emit(this.core.store.state);
+        }
     }
     _registerStateChangeListeners() {
-        this.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
-        this.store.onStateChange('isFocused', this._handleIsFocusedChange.bind(this));
+        this.core.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
     }
     _handleActiveToolChange(activeTool) {
         if (!(activeTool instanceof KritzelSelectionTool)) {
-            this.store.clearSelection();
+            this.core.clearSelection();
         }
-        this.store.state.skipContextMenu = false;
+        this.core.store.setState('skipContextMenu', false);
         this.activeToolChange.emit(activeTool);
         KritzelKeyboardHelper.forceHideKeyboard();
     }
-    _handleIsFocusedChange(isFocused) {
-        if (!isFocused) {
-            this.store.resetActiveText();
-        }
-    }
     render() {
         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 (h(Host, { key: 'fd353ff17bcde1a9ab646b6f463d1c6ce00a3dff' }, h("div", { key: '45bc2af8f1a3a2bfa3aa76a478c7bf208027da0c', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '50e932febc35c7dbe852ad99d96ca4f0e0b742fc' }, "ActiveWorkspaceId: ", this.store.state?.activeWorkspace?.id), h("div", { key: 'af94b5061f0803588fece6cccdf540f46f13ca05' }, "ActiveWorkspaceName: ", this.store.state?.activeWorkspace?.name), h("div", { key: '89c0d21ce94f4eda72153554fadbd6942e785edc' }, "TranslateX: ", this.store.state?.translateX), h("div", { key: '340b5165265241972a7a940268c7940063ba8c12' }, "TranslateY: ", this.store.state?.translateY), h("div", { key: '428054b3ea4a1c327f03d6b37bfe6331dea6c57b' }, "ViewportWidth: ", this.store.state?.viewportWidth), h("div", { key: 'd67420ef633627413066a28b8ef9ac43c520015d' }, "ViewportHeight: ", this.store.state?.viewportHeight), h("div", { key: 'dedf9eb89c79fa496f7b6d0df9c646898f66b3d4' }, "ObjectsInViewport. ", this.store.objects.length), h("div", { key: '59bb8416941fd84305f2892f24098f6f4a084401' }, "Scale: ", this.store.state?.scale), h("div", { key: '6705a4cec22e4e33f75e296e17bc2952a3d1cba7' }, "ActiveTool: ", this.store.state?.activeTool?.name), h("div", { key: 'ca22e0a377a11fdca851b38f1bf425648cd3b9dd' }, "HasViewportChanged: ", this.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '57508b9ee24a5af631e6bb1eace404c39af14f82' }, "IsEnabled: ", this.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'f6cea367b5007f767afb25a033215abda734de9d' }, "IsScaling: ", this.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '4386ef749facd2e54da7f58aa2713b87ed76f2df' }, "IsPanning: ", this.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '1713185b36a50dfe0f9efa0c92394222db80a377' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), h("div", { key: '5104f428b808e7d843712302ad2e58b619876bee' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '2cb3b27a00627188e7082fa94169eb961a1ae6ed' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '7407656e61be665f27e706738faa6d318e2c1d04' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '701bf05c25cb3d3728af6602f694e6064627ea59' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '772c345ea9c64ef800fdbb26919f1a54ca889025' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'dc687c8ba24182b8b61979ad334b989d3be72ec6' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), h("div", { key: '10cbc575a7905396a76eca4e7b56be719755aeb4' }, "PointerX: ", this.store.state?.pointerX), h("div", { key: '4f21199328ffadddcc58b7d6b102a89e5079f676' }, "PointerY: ", this.store.state?.pointerY), h("div", { key: 'ac705f38cb323b8dc8cbf95f875657c5dec5c9ae' }, "SelectedObjects: ", this.store.state.selectionGroup?.objects.length || 0)), h("div", { key: '2ca55c53246e64520af6720a3f87d2357295ca7f', id: "origin", class: "origin", style: {
-                transform: `matrix(${this.store.state?.scale}, 0, 0, ${this.store.state?.scale}, ${this.store.state?.translateX}, ${this.store.state?.translateY})`,
-            } }, this.store.state.objectsMap.allObjects()?.map(object => {
-            return (h("div", { key: object.id, style: { display: object.isInViewport() ? 'block' : 'none', transform: object?.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
+        return (h(Host, { key: 'da47553aad7abf8b5daab177c6933a9177b91089' }, h("div", { key: '4e64b43bfb85a61154d36ca8ecd3518d61445d50', class: "debug-panel", style: { display: this.core.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, h("div", { key: '21742da9258a2b929b81c0ca6c8f37f41b228ad4' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'de31fcf57b0faf8fad2bb39336eeea35dbec35ca' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: 'a2cb298a867f92349b5e1fb556ee5f9c6110f1c7' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '28697bfcecf9f8b4b1972a90cd02855767433047' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '7fb25f6e9c9b8dea11832dbd311d2cc0b981cbeb' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '92aeade312b3d28e4c9b0e1c7ca55f6932fd23d9' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'a4fd8090acaf094e44fdc2e72fcc388695b412c4' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '6ff28100b64bafdffcb8fe9d49cd041a6a374817' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '12a61ad3d070563eb721d0d4068143962914b2bc' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '437309daa2af1a64c9b9d3548fe12e075dd4a8bd' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'e6841095c220ebf081604c548729f085ec9d17bd' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: 'b07316a528782f7560c2e42f7bd9edd473cc256c' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '7160a5aa21c4cdbf2b523f620c819ad541a2e466' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '9ad29a686bc76b47d4c5040121b468428ade437a' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '68f240aa7d7188996647afd0df73d63a253e18a1' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '260010c089bdf0e8fd8c2406c39394ef79a85262' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: '6b07975c781801b0a7d7727d0666a6765aa9e889' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '83c949c9ed26c3d445421ba1f965a742f5fc149f' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: '1687122785d3370da5d91a975dd56f11aebc81c1' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: 'a28e152a0510c9e3eef5624de1b5512baf45b37c' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '09e5a0157002fe95a46415d32a3eb17be8d959a9' }, "SelectedObjects: ", this.core.store.state.selectionGroup?.objects.length || 0)), h("div", { key: '5228fbae773f30d91b129c257ef08adca10a6a70', 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 (h("div", { key: object.id, style: {
+                    display: object.isInViewport() ? 'block' : 'none',
+                    transform: object?.transformationMatrix,
+                    transformOrigin: 'top left',
+                    zIndex: object.zIndex.toString(),
+                    position: 'absolute',
+                } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
                     height: object?.totalHeight.toString(),
                     width: object?.totalWidth.toString(),
                     left: '0',
@@ -2338,69 +2422,71 @@ const KritzelEngine = class {
                 } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
                     width: '100%',
                     height: '100%',
+                    backgroundColor: KritzelDevicesHelper.isFirefox() ? object.backgroundColor : 'transparent',
+                    borderWidth: KritzelDevicesHelper.isFirefox() ? object.borderWidth + 'px' : '0',
+                    borderStyle: KritzelDevicesHelper.isFirefox() ? 'solid' : 'none',
+                    borderColor: KritzelDevicesHelper.isFirefox() ? object.borderColor : 'transparent',
                 } }))), h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
                 }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: "0", x2: "0", y2: object.totalHeight, style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
                 }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: "0", y1: object.totalHeight, x2: object.totalWidth, y2: object.totalHeight, style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
                 }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth, y1: "0", x2: object.totalWidth, y2: object.totalHeight, style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
                     strokeLinecap: 'square',
-                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.store.state?.scale), style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.core.store.state?.scale), style: {
                     stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.store.state?.scale})`,
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${this.core.store.state?.scale})`,
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'var(--kritzel-selection-handle-color, #000000)',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / this.core.store.state?.scale), r: `${(baseHandleTouchSize * object.scale) / this.core.store.state?.scale}`, style: {
                     fill: 'transparent',
                     cursor: 'grab',
-                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
-        }), h("svg", { key: '0098f1b8233d45f49dc8bdcc13c08f20c04b65e1', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
-                height: this.store.state.currentPath?.height.toString(),
-                width: this.store.state.currentPath?.width.toString(),
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), h("g", { style: { display: this.core.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, h("div", { style: { width: '100%', height: '100%' } }, h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
+        }), h("svg", { key: "current-path", class: "object", xmlns: "http://www.w3.org/2000/svg", width: this.core.store.state.currentPath?.width, height: this.core.store.state.currentPath?.height, style: {
                 left: '0',
                 top: '0',
-                zIndex: this.store.state.currentPath?.zIndex.toString(),
+                zIndex: this.core.store.state.currentPath?.zIndex.toString(),
                 position: 'absolute',
-                transform: this.store.state.currentPath?.transformationMatrix,
+                transform: this.core.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: this.store.state.currentPath?.viewBox }, h("path", { key: '08310713fa8f2f1f695b1b61bb2b6e5a5f77f192', d: this.store.state.currentPath?.d, fill: this.store.state.currentPath?.fill, stroke: this.store.state.currentPath?.stroke }))), this.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '2529447e26ba02689303be39cc593dfafc25b96c', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: this.store.state.selectionGroup?.objects || [], style: {
+            }, viewBox: this.core.store.state.currentPath?.viewBox }, h("path", { key: '6dedb398968d275166e042660c4718635b57da84', 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 && (h("kritzel-context-menu", { key: '09ae0d7842918bcb4ae9fd16d416badc19942264', 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.store.state.contextMenuX}px`,
-                top: `${this.store.state.contextMenuY}px`,
+                left: `${this.core.store.state.contextMenuX}px`,
+                top: `${this.core.store.state.contextMenuY}px`,
                 zIndex: '10000',
             }, onActionSelected: event => {
                 event.detail.action({
-                    x: (-this.store.state.translateX + this.store.state.contextMenuX) / this.store.state.scale,
-                    y: (-this.store.state.translateY + this.store.state.contextMenuY) / this.store.state.scale,
-                }, this.store.state.selectionGroup?.objects);
+                    x: (-this.core.store.state.translateX + this.core.store.state.contextMenuX) / this.core.store.state.scale,
+                    y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
+                }, this.core.store.state.selectionGroup?.objects);
                 this.hideContextMenu();
-            } })), this.store.state?.activeTool instanceof KritzelEraserTool && !this.store.state.isScaling && h("kritzel-cursor-trail", { key: '7c10277160eb1bc51581e4dfbdd4d0cdf626ed8c', store: this.store })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'e0863ccf8c52ebef822827d8eeac62d3619134ca', core: this.core })));
     }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
@@ -2420,7 +2506,7 @@ const KritzelFont = class {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: 'd318355704f1bf66468dd793e5e38da827076d3b' }, h("div", { key: '447b4fba97f5d1900060859943438733667aed08', class: "font-preview", style: {
+        return (h(Host, { key: '0d0f0f75b64f579ca236950334fafde7f0ef2a38' }, h("div", { key: 'e71524879ded9727891bdd43f1a41ae5eef49175', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -2467,7 +2553,7 @@ const KritzelFontFamily = class {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (h(Host, { key: '801b1dbc2b7da7d00fb00ed6a8d8ee7be3e9ef17' }, h("kritzel-dropdown", { key: '5f774c0b31ca16a1c8acda1c73ea3aacc2784649', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: '3c101155ff08854f665750f8988fb3691a77c04a', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '48d2ead137a8a35f06fb8b5487431e2ce613c755', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (h(Host, { key: 'd05a099adf8623b8c67d68f3861c1cd401e86e2c' }, h("kritzel-dropdown", { key: 'b95af194feaaf5748bb0d584617d217e4b3b8180', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: '04a0a72f9297dc6c34a2a2019cae111d8725bcf4', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: 'f14b59f29bcce33f890b74c1fb8d1dad0ad6fd31', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
 };
 KritzelFontFamily.style = kritzelFontFamilyCss;
@@ -2488,7 +2574,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '08571feed86b37208956608b170ca1f782b7fb18' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '583659340d8f3bfb2ff6f64f2cd692ac07cb32d6' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -2496,7 +2582,7 @@ const KritzelFontSize = class {
 };
 KritzelFontSize.style = kritzelFontSizeCss;
 
-const kritzelIconCss = ":host{display:inline-flex;justify-content:center;align-items:center;}span{display:flex;align-items:center;width:100%;height:100%;}span>svg{width:100%;height:100%}";
+const kritzelIconCss = ":host{display:inline-flex;justify-content:center;align-items:center;color:var(--kritzel-icon-color, inherited)}span{display:flex;align-items:center;width:100%;height:100%;}span>svg{width:100%;height:100%}";
 
 const KritzelIcon = class {
     constructor(hostRef) {
@@ -2520,7 +2606,7 @@ const KritzelIcon = class {
 };
 KritzelIcon.style = kritzelIconCss;
 
-const kritzelMenuCss = ":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 180px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:300px}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}";
+const kritzelMenuCss = ":host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin;max-height:300px}:host(:focus-visible){outline:var(--kritzel-menu-focus-outline, 2px solid #e3e3e3)}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}";
 
 const KritzelMenu = class {
     constructor(hostRef) {
@@ -2543,7 +2629,7 @@ const KritzelMenu = class {
     close;
     selectedIndex = null;
     async setFocus() {
-        const firstItem = this.host.querySelector('kritzel-menu-item');
+        const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');
         if (firstItem) {
             firstItem.focus();
         }
@@ -2579,12 +2665,12 @@ const KritzelMenu = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: 'c82bde4dc70fdc79df7471bb10396394f6c3870a', onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: '5fe0323aaa0da44abe736c6ef5e0516113c7820d', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map((item) => (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 (h(Host, { key: 'd971df2bd948b07f7bf2abc589c226d57891d05e', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'dfa6846429aac15a5912b87acd45610663200a3e', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map((item) => (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;
 
-const kritzelMenuItemCss = ":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);border-radius:var(--kritzel-menu-item-border-radius, 12px);outline:none;cursor:default}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none}:host(.child-open){background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;outline:none;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}";
+const kritzelMenuItemCss = ":host{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;padding:var(--kritzel-menu-item-padding, 8px);box-sizing:border-box;gap:16px;height:var(--kritzel-menu-item-height, 40px);min-height:var(--kritzel-menu-item-min-height, 40px);font-family:sans-serif;font-size:var(--kritzel-menu-item-font-size, 14px);color:var(--kritzel-menu-item-color, #333333);border-radius:var(--kritzel-menu-item-border-radius, 12px);outline:none;cursor:default}:host(:hover) .menu-item-overlay,:host(:focus-within) .menu-item-overlay{background-color:var(--kritzel-menu-item-overlay-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff);color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected.editing){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}:host(.selected) .edit-input{color:var(--kritzel-menu-item-selected-color, #ffffff)}:host(.selected) .action-button kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-selected-color, #ffffff)}kritzel-icon{--kritzel-icon-color:var(--kritzel-menu-item-color, #333333)}:host(.selected) .edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, rgba(255, 255, 255, 0.16))}:host(.editing){background-color:var(--kritzel-menu-item-editing-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.disabled){opacity:0.5;pointer-events:none !important}:host(.child-open){background-color:var(--kritzel-menu-item-child-open-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.child-open.selected){background-color:var(--kritzel-menu-item-selected-bg, #007aff)}.menu-item-overlay{position:absolute;inset:0;background-color:transparent;z-index:0;pointer-events:none;border-radius:var(--kritzel-menu-item-border-radius, 12px)}.menu-item-content{display:flex;align-items:center;gap:8px;position:relative;z-index:1;height:100%}.left{justify-content:flex-start;flex:1;min-width:0}.left>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.right{justify-content:flex-end}.edit-input{flex:1;height:var(--kritzel-menu-item-input-height, 24px);padding:0;background-color:transparent;border-radius:0;border:none;border-bottom:1px solid var(--kritzel-menu-item-input-border, #ccc);font-size:var(--kritzel-context-menu-item-font-size, 14px);width:100%;min-width:0;box-sizing:border-box;outline:none}.edit-input::selection{background-color:var(--kritzel-menu-item-input-selection-color, #007bff);color:var(--kritzel-menu-item-input-selection-text-color, #ffffff)}.action-button{padding:4px;border-radius:8px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background-color:transparent;background:transparent;outline:none;-webkit-tap-highlight-color:transparent}.action-button:hover,.action-button:focus{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.action-button.disabled{pointer-events:none;opacity:0.5}";
 
 const KritzelMenuItem = class {
     constructor(hostRef) {
@@ -2610,18 +2696,32 @@ const KritzelMenuItem = class {
     itemCloseChildMenu;
     isDirty = false;
     inputRef;
-    componentDidLoad() {
+    focusInput() {
         if (this.item.isEditing && this.inputRef && !this.isDirty) {
             this.inputRef.focus();
-            this.inputRef.select();
+            if (KritzelDevicesHelper.isIOS()) {
+                const length = this.inputRef.value.length;
+                this.inputRef.setSelectionRange(length, length);
+            }
+            else {
+                this.inputRef.select();
+            }
         }
     }
+    componentDidLoad() {
+        this.setDeviceSpecificStyles();
+        this.focusInput();
+    }
     componentDidUpdate() {
-        if (this.item.isEditing && this.inputRef && !this.isDirty) {
-            this.inputRef.focus();
-            this.inputRef.select();
-        }
+        this.focusInput();
     }
+    setDeviceSpecificStyles = () => {
+        const isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+        if (isTouchDevice) {
+            this.host.style.setProperty('--kritzel-menu-item-overlay-background-color', 'transparent');
+            this.host.style.setProperty('--kritzel-menu-item-button-hover-background-color', 'transparent');
+        }
+    };
     handleItemSelect = (event) => {
         event.stopPropagation();
         this.itemSelect.emit({ item: this.item, parent: this.parent });
@@ -2662,16 +2762,16 @@ const KritzelMenuItem = class {
     renderEditMode() {
         return [
             h("div", { class: "menu-item-content left" }, h("input", { ref: el => (this.inputRef = el), type: "text", class: "edit-input", value: this.item.label, onInput: this.handleInputChange })),
-            h("div", { class: "menu-item-content right" }, h("div", { tabIndex: !this.isDirty && !this.item.isNewItem ? -1 : 0, class: { 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }, onClick: this.handleSave }, h("kritzel-icon", { name: "check", size: 16 })), h("div", { tabIndex: 0, class: "action-button", onClick: this.handleCancel }, h("kritzel-icon", { name: "x", size: 16 }))),
+            h("div", { class: "menu-item-content right" }, h("div", { tabIndex: 0, class: "action-button", onClick: this.handleCancel }, h("kritzel-icon", { name: "x", size: 16 })), h("div", { tabIndex: !this.isDirty && !this.item.isNewItem ? -1 : 0, class: { 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }, onClick: this.handleSave }, h("kritzel-icon", { name: "check", size: 16 }))),
         ];
     }
     render() {
-        return (h(Host, { key: '5440ed43726d00ab65e7f423f065c1a3fa74e39e', tabIndex: 0, class: {
+        return (h(Host, { key: 'a35e1e3427568f436a36b43ba87af3710a4e83c5', 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 }, h("div", { key: '69542710179216a1df47bde5d474a72e4a07aa5b', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: '42eef5a16b9b164839c1fe133e38ecb505c07632', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get watchers() { return {
         "item": ["onItemChange"]
@@ -2679,6 +2779,70 @@ const KritzelMenuItem = class {
 };
 KritzelMenuItem.style = kritzelMenuItemCss;
 
+class KritzelHTMLHelper {
+    static getNumericValueFromStyle(element, property) {
+        const value = window.getComputedStyle(element).getPropertyValue(property);
+        return parseFloat(value) || 0;
+    }
+    static getScrollableParent(element) {
+        if (!element) {
+            return window;
+        }
+        const parent = element.parentNode?.host ?? element.parentElement;
+        if (!parent || parent.tagName === 'BODY') {
+            return window;
+        }
+        const style = window.getComputedStyle(parent);
+        if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {
+            return parent;
+        }
+        return this.getScrollableParent(parent);
+    }
+    static isElementInViewport(element) {
+        if (!element) {
+            return false;
+        }
+        const scrollableParent = this.getScrollableParent(element);
+        const rect = element.getBoundingClientRect();
+        if (scrollableParent === window) {
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;
+        }
+        const parentRect = scrollableParent.getBoundingClientRect();
+        return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
+    }
+    static getFocusableElements(root) {
+        if (!root)
+            return [];
+        const focusableElements = [];
+        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
+        const isVisible = (el) => {
+            return el.offsetParent !== null;
+        };
+        const find = (element) => {
+            // Check if the element itself is focusable
+            if (element instanceof HTMLElement && element.matches(focusableSelector) && !element.hasAttribute('disabled') && isVisible(element)) {
+                focusableElements.push(element);
+            }
+            // Traverse shadow DOM
+            if (element.shadowRoot) {
+                Array.from(element.shadowRoot.children).forEach(find);
+            }
+            // Traverse slotted content
+            if (element.tagName === 'SLOT') {
+                element.assignedElements({ flatten: true }).forEach(find);
+            }
+            // Traverse light DOM children if there is no shadow root
+            if (!element.shadowRoot) {
+                Array.from(element.children).forEach(find);
+            }
+        };
+        find(root);
+        return focusableElements;
+    }
+}
+
 const KritzelPortal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -2754,7 +2918,7 @@ const KritzelPortal = class {
         return activeEl;
     }
     trapFocus(event) {
-        const focusableElements = this.getFocusableElements(this.host);
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
         if (focusableElements.length === 0)
             return;
         const firstFocusable = focusableElements[0];
@@ -2775,51 +2939,12 @@ const KritzelPortal = class {
             }
         }
     }
-    getFocusableElements(root) {
-        if (!root)
-            return [];
-        const focusableElements = [];
-        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
-        const isVisible = (el) => {
-            return el.offsetParent !== null;
-        };
-        // Check if the root element itself is focusable
-        if (root.matches(focusableSelector) && !root.hasAttribute('disabled') && isVisible(root)) {
-            focusableElements.push(root);
-        }
-        // Function to recursively find focusable elements
-        const findFocusable = (element) => {
-            // Search in shadow root
-            if (element.shadowRoot) {
-                Array.from(element.shadowRoot.querySelectorAll(focusableSelector)).forEach(el => {
-                    if (isVisible(el)) {
-                        focusableElements.push(el);
-                    }
-                });
-                Array.from(element.shadowRoot.children).forEach(findFocusable);
-            }
-            // Search in light DOM
-            Array.from(element.querySelectorAll(focusableSelector)).forEach(el => {
-                if (!focusableElements.includes(el) && isVisible(el)) {
-                    focusableElements.push(el);
-                }
-            });
-            // Handle slotted content
-            if (element.tagName === 'SLOT') {
-                element.assignedElements({ flatten: true }).forEach(el => findFocusable(el));
-            }
-            Array.from(element.children).forEach(findFocusable);
-        };
-        findFocusable(root);
-        // Return unique elements in document order
-        return [...new Set(focusableElements)];
-    }
     get firstFocusableElement() {
         const slotEl = this.host.shadowRoot?.querySelector('slot');
         const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
         if (!firstAssigned)
             return null;
-        const focusable = this.getFocusableElements(firstAssigned);
+        const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);
         return focusable[0] ?? firstAssigned;
     }
     get lastAddedPortal() {
@@ -2878,25 +3003,26 @@ const KritzelPortal = class {
         this.portal.style.left = `${left}px`;
     }
     render() {
-        return (h(Host, { key: '968f0360b9396da16f5b970293ba20f8a1dcc09a', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '0fe1569bde60a834e9226d7c838d113a64151164' })));
+        return (h(Host, { key: 'a994d8ab8c758bc92836693f35f8d9415913cfff', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'a9b9a71d82e9b57de24e5ecfa90197a27ed691c4' })));
     }
     static get watchers() { return {
         "anchor": ["anchorChanged"]
     }; }
 };
 
-const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(:focus){outline:none}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";
+const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";
 
 const KritzelSplitButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.buttonClick = createEvent(this, "buttonClick");
+        this.mainButtonClick = createEvent(this, "mainButtonClick");
         this.itemSelect = createEvent(this, "itemSelect");
         this.itemSave = createEvent(this, "itemSave");
         this.itemCancel = createEvent(this, "itemCancel");
         this.itemToggleChildMenu = createEvent(this, "itemToggleChildMenu");
         this.itemCloseChildMenu = createEvent(this, "itemCloseChildMenu");
-        this.close = createEvent(this, "close");
+        this.menuOpen = createEvent(this, "menuOpen");
+        this.menuClose = createEvent(this, "menuClose");
     }
     get host() { return getElement(this); }
     buttonIcon = 'plus';
@@ -2904,13 +3030,14 @@ const KritzelSplitButton = class {
     items = [];
     mainButtonDisabled = false;
     menuButtonDisabled = false;
-    buttonClick;
+    mainButtonClick;
     itemSelect;
     itemSave;
     itemCancel;
     itemToggleChildMenu;
     itemCloseChildMenu;
-    close;
+    menuOpen;
+    menuClose;
     isMenuOpen = false;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
     anchorElement;
@@ -2919,11 +3046,18 @@ const KritzelSplitButton = class {
     async open() {
         if (this.isMenuOpen)
             return;
-        this.openMenu(new MouseEvent('click'));
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+        this.menuOpen.emit();
+    }
+    async focusMenu() {
+        if (this.menuRef) {
+            await this.menuRef.setFocus();
+        }
     }
     handleButtonClick = (event) => {
         event.stopPropagation();
-        this.buttonClick.emit();
+        this.mainButtonClick.emit();
     };
     toggleMenu = (event) => {
         event.stopPropagation();
@@ -2938,11 +3072,13 @@ const KritzelSplitButton = class {
         event.stopPropagation();
         this.isMenuOpen = true;
         this.anchorElement = this.host;
+        this.menuOpen.emit();
     };
     closeMenu = () => {
         this.isMenuOpen = false;
         this.anchorElement = null;
-        this.close.emit();
+        this.splitMenuButtonRef?.blur();
+        this.menuClose.emit();
     };
     handleItemSelect = event => {
         this.itemSelect.emit(event.detail);
@@ -2960,12 +3096,12 @@ const KritzelSplitButton = class {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: 'be79d702d2c400d1feedeb89eca6fc78559f30f3', class: { mobile: this.isTouchDevice } }, h("button", { key: 'e4a74c56c122ea617f44f1d7e31672d1f913de46', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '44bd79270e7cc4a17b45133b5c513642013e5a66', name: this.buttonIcon })), h("div", { key: '2392e8c6f75510c529585a69c861b2fcafdef5ce', class: "split-divider" }), h("button", { key: 'bcdf61c2a195271771479de385db3b4982f6cad2', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '90383a8690111c97054fb8ac93b91cb6644de137', name: this.dropdownIcon })), h("kritzel-portal", { key: 'c6a4c32ab731fede13e1382bff9dbd68794b1103', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '8b792c9a2d4af60ba464bb80551c5358e21bfa96', 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 }))));
+        return (h(Host, { key: '2521559224e78ed1984446320a1601e77ccf2843', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a924ad4590506cb5209ef9fa1babca5312ec0513', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: '214565d158d4d3c06ad883559aa7bac2827a593f', name: this.buttonIcon })), h("div", { key: '2f7d189c46c08227c3006d226a0ee3065f241bf4', class: "split-divider" }), h("button", { key: '4d6e2e224e3719fe3685ee289af94680c120abf6', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: 'bc8176681dfedde9d13b9af561d8bdff8613098f', name: this.dropdownIcon })), h("kritzel-portal", { key: 'afb44cd208f52350cbc82e050d6dee0ba734391d', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'b28f04138daa8777e6c9b2aa7fa3b5f2f62fd914', 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 }))));
     }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss;
 
-const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";
+const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:focus-visible{outline:var(--kritzel-stroke-size-focus-outline, 2px auto #e3e3e3)}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";
 
 const KritzelStrokeSize = class {
     constructor(hostRef) {
@@ -2980,7 +3116,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: 'f9f0fe49963655a2beeffe5c369ccbe018c8aa5e' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '001a0ef8408d19532b57a521929c0cba54e99c52' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
@@ -2994,19 +3130,38 @@ const MOBILE_BREAKPOINT = 768;
 const KritzelTooltip = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.tooltipClosed = createEvent(this, "tooltipClosed");
     }
+    get host() { return getElement(this); }
     isVisible = false;
     anchorElement;
     arrowSize = 8;
     offsetY = 24;
-    get el() { return getElement(this); }
+    tooltipClosed;
     positionX = 0;
     arrowOffset = '0px';
     isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
+    handleOutsideClick(event) {
+        if (!this.isVisible)
+            return;
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.tooltipClosed.emit();
+        }
+    }
     handleWindowResize() {
         this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
         this.calculateAdjustedPosition();
     }
+    async focusContent() {
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+    componentDidLoad() {
+        this.focusSlottedContent();
+    }
     componentWillLoad() {
         this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
         this.calculateAdjustedPosition();
@@ -3014,10 +3169,18 @@ const KritzelTooltip = class {
     componentWillUpdate() {
         this.calculateAdjustedPosition();
     }
+    focusSlottedContent() {
+        const slot = this.host.shadowRoot?.querySelector('slot');
+        const assignedElements = slot?.assignedElements() || [];
+        if (assignedElements.length > 0) {
+            const firstElement = assignedElements[0];
+            firstElement.focus();
+        }
+    }
     calculateAdjustedPosition() {
         if (this.isVisible && this.anchorElement) {
             const anchorRect = this.anchorElement.getBoundingClientRect();
-            const tooltipContent = this.el.shadowRoot?.querySelector('.tooltip-content');
+            const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content');
             if (!this.isMobileView) {
                 this.positionX = anchorRect.left + anchorRect.width / 2;
                 this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`;
@@ -3030,23 +3193,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (h(Host, { key: '6eb67bcfd08234affe3724dff4d94ddf7907a1a7', style: {
+        return (h(Host, { key: '8c3aeff60625f43f129afa70367cdb7a68a4b271', 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`,
-            } }, h("div", { key: '9314b30b71200776e3728027b2ac7332cf4ab669', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '80cb8d0a8a91d9c816580cedc02fc9382fb07f8c' }), h("div", { key: '87fb2399463a0eb7beb1ca0f2c2867d8ff033f3a', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: 'b22b606c2a836c2c9bbe21c6b470754753ccb309', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '783403f4b5560012c9f6bd184a8c5eb26428e148' }), h("div", { key: 'bb98400edc5c6e05fd4ed2a476a5821f93964b8e', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: 'fc3953ad9b6aa5a4b2228653573fc3a7e37c0487', class: "tooltip-arrow", style: {
+            } }, h("div", { key: '850a058d635113a7870f25fa288a6447394c53ed', 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))',
-            } }), h("div", { key: '5b8e4e3eb90c4c47c47fa47dc96e4149794e1732', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: 'bbb3dc2673e2dfe4443ad80540dfc9e5a25c6c06', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -3057,7 +3220,7 @@ const KritzelTooltip = class {
 };
 KritzelTooltip.style = kritzelTooltipCss;
 
-const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
+const kritzelUtilityPanelCss = ":host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:rgb(226, 226, 226);width:fit-content;user-select:none}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;outline:none;background:none;cursor:pointer;color:#333333;-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:focus{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-separator{width:1px;height:16px;background-color:hsl(0, 0%, 0%, 4.3%)}";
 
 const KritzelUtilityPanel = class {
     constructor(hostRef) {
@@ -3082,7 +3245,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '134058928a840d11fdc39849b35f08b21840fc0c' }, h("button", { key: '8d80cb496983b0709c06bacb12ca6819789aa47d', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'c6733ef61ab6a272f80a580243fdd15063b8bf0c', name: "undo" })), h("button", { key: 'dc6147152bccd43ea54b9af20d019d305e550987', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '3ab8bced0f398a8d5f053cb0f388199fd2148bfc', name: "redo" })), h("div", { key: 'ebbfd25fb69faf2b669de20dc74a3dcabc01f489', class: "utility-separator" }), h("button", { key: 'd86caf8a7f2c2bc899b09871f555973137693eb9', class: "utility-button" }, h("kritzel-icon", { key: 'e1b4e9eef3d3ab2a2ddd1688818d4bcd2d7226c1', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '8109ccff01374c046d057021dfbcabdc632d829f' }, h("button", { key: '0d51cfb401974edf1a2a8810d2244f8a977c347f', class: "utility-button", onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1d13ee6bbf060402e0b1349d41b728875314e2e5', name: "undo" })), h("button", { key: 'f2fe59e7c99cb1550052088b507313cfaed72f29', class: "utility-button", onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '74bf8c20f61144ab4abc5804dcd8f39917d2c966', name: "redo" })), h("div", { key: '0c9a942e786425b32e984fefdc97b1abb5077997', class: "utility-separator" }), h("button", { key: '44ca9340c2f73212332e9b3ed93ed93b8f7c6944', class: "utility-button" }, h("kritzel-icon", { key: '7b4c3d9a105e0c25b5bbc11ff1bc1cbed9833e03', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;
@@ -3131,9 +3294,9 @@ const KritzelWorkspaceManager = class {
         this.workspaceChange.emit(item.value);
     }
     async add() {
+        await this.splitButtonRef.open();
         this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
         this.editingItemId = this.newWorkspace.id;
-        await this.splitButtonRef.open();
     }
     edit(item) {
         this.openChildMenuItem = null;
@@ -3144,11 +3307,14 @@ const KritzelWorkspaceManager = class {
     }
     async save(item) {
         if (this.newWorkspace) {
-            await this.kritzelEngineRef.createWorkspace({ ...item.value, name: item.label });
+            this.newWorkspace.name = item.label;
+            await this.kritzelEngineRef.createWorkspace(this.newWorkspace);
             this.workspaceChange.emit(this.newWorkspace);
         }
         else {
-            await this.kritzelEngineRef.updateWorkspace({ ...item.value, name: item.label });
+            const workspace = item.value;
+            workspace.name = item.label;
+            await this.kritzelEngineRef.updateWorkspace(workspace);
         }
         this.editingItemId = null;
         this.newWorkspace = null;
@@ -3161,6 +3327,11 @@ const KritzelWorkspaceManager = class {
         this.openChildMenuItem = null;
         this.childMenuAnchor = null;
         await this.kritzelEngineRef.deleteWorkspace(item.value);
+        if (item.value.id === this.activeWorkspace?.id) {
+            this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;
+            this.workspaceChange.emit(this.activeWorkspace);
+        }
+        await this.splitButtonRef.focusMenu();
     }
     toggleChildMenu(item, anchor) {
         this.openChildMenuItem = item;
@@ -3170,12 +3341,15 @@ const KritzelWorkspaceManager = class {
         this.openChildMenuItem = null;
         this.childMenuAnchor = null;
     }
-    closeMenu() {
+    handleMenuOpen() {
+        this.kritzelEngineRef.disable();
+    }
+    handleMenuClose() {
         this.cancel();
         this.closeChildMenu();
+        this.kritzelEngineRef.enable();
     }
     render() {
-        console.log('render workspace manager');
         const menuItems = this.sortedWorkspaces
             .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
             .filter(ws => ws !== null)
@@ -3200,17 +3374,16 @@ const KritzelWorkspaceManager = class {
                         id: `${ws.id}-delete`,
                         label: 'Delete',
                         value: 'delete',
+                        isDisabled: this.sortedWorkspaces.length <= 1,
                         action: (_item, parent) => this.delete(parent),
                     },
                 ],
             };
         });
-        return (h(Host, null, h("kritzel-split-button", { ref: el => (this.splitButtonRef = el), items: menuItems, mainButtonDisabled: this.editingItemId != null, onButtonClick: () => this.add(), onItemSelect: event => this.select(event.detail.item, event.detail.parent), onItemToggleChildMenu: event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor), onItemSave: event => this.save(event.detail), onItemCancel: () => this.cancel(), onItemCloseChildMenu: () => this.closeChildMenu(), onClose: () => {
-                this.closeMenu();
-            } })));
+        return (h(Host, null, h("kritzel-split-button", { ref: el => (this.splitButtonRef = el), items: menuItems, mainButtonDisabled: this.editingItemId != null, onMainButtonClick: () => this.add(), onItemSelect: event => this.select(event.detail.item, event.detail.parent), onItemToggleChildMenu: event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor), onItemSave: event => this.save(event.detail), onItemCancel: () => this.cancel(), onItemCloseChildMenu: () => this.closeChildMenu(), onMenuOpen: () => this.handleMenuOpen(), onMenuClose: () => this.handleMenuClose() })));
     }
 };
 KritzelWorkspaceManager.style = kritzelWorkspaceManagerCss;
 
-export { KritzelBrushStyle as kritzel_brush_style, KritzelColor as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControlBrushConfig as kritzel_control_brush_config, KritzelControlTextConfig as kritzel_control_text_config, KritzelControls as kritzel_controls, KritzelCursorTrail as kritzel_cursor_trail, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelPortal as kritzel_portal, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWorkspaceManager as kritzel_workspace_manager };
-//# sourceMappingURL=kritzel-brush-style.kritzel-color.kritzel-color-palette.kritzel-context-menu.kritzel-control-brush-config.kritzel-control-text-config.kritzel-controls.kritzel-cursor-trail.kritzel-dropdown.kritzel-editor.kritzel-engine.kritzel-font.kritzel-font-family.kritzel-font-size.kritzel-icon.kritzel-menu.kritzel-menu-item.kritzel-portal.kritzel-split-button.kritzel-stroke-size.kritzel-tooltip.kritzel-utility-panel.kritzel-workspace-manager.entry.js.map
+export { KritzelColor as kritzel_color, KritzelColorPalette as kritzel_color_palette, KritzelContextMenu as kritzel_context_menu, KritzelControlBrushConfig as kritzel_control_brush_config, KritzelControlTextConfig as kritzel_control_text_config, KritzelControls as kritzel_controls, KritzelCursorTrail as kritzel_cursor_trail, KritzelDropdown as kritzel_dropdown, KritzelEditor as kritzel_editor, KritzelEngine as kritzel_engine, KritzelFont as kritzel_font, KritzelFontFamily as kritzel_font_family, KritzelFontSize as kritzel_font_size, KritzelIcon as kritzel_icon, KritzelMenu as kritzel_menu, KritzelMenuItem as kritzel_menu_item, KritzelPortal as kritzel_portal, KritzelSplitButton as kritzel_split_button, KritzelStrokeSize as kritzel_stroke_size, KritzelTooltip as kritzel_tooltip, KritzelUtilityPanel as kritzel_utility_panel, KritzelWorkspaceManager as kritzel_workspace_manager };
+//# sourceMappingURL=kritzel-color.kritzel-color-palette.kritzel-context-menu.kritzel-control-brush-config.kritzel-control-text-config.kritzel-controls.kritzel-cursor-trail.kritzel-dropdown.kritzel-editor.kritzel-engine.kritzel-font.kritzel-font-family.kritzel-font-size.kritzel-icon.kritzel-menu.kritzel-menu-item.kritzel-portal.kritzel-split-button.kritzel-stroke-size.kritzel-tooltip.kritzel-utility-panel.kritzel-workspace-manager.entry.js.map