kritzel-stencil 0.0.129 → 0.0.131

package/dist/cjs/{kritzel-brush-style_22.cjs.entry.js → kritzel-brush-style_23.cjs.entry.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-CUSIflVf.js');
-var index$1 = require('./index-C7Read21.js');
+var index = require('./index-nzUNdMPh.js');
+var index$1 = require('./index-BwINBV6L.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)}";
 
@@ -9,12 +9,13 @@ const KritzelBrushStyle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.typeChange = index.createEvent(this, "typeChange");
-        this.type = 'pen';
-        this.brushOptions = [
-            { value: 'pen', label: 'Pen' },
-            { value: 'highlighter', label: 'Highlighter' },
-        ];
     }
+    type = 'pen';
+    brushOptions = [
+        { value: 'pen', label: 'Pen' },
+        { value: 'highlighter', label: 'Highlighter' },
+    ];
+    typeChange;
     handleDropdownValueChange(event) {
         this.typeChange.emit(event.detail);
     }
@@ -33,8 +34,9 @@ const kritzelColorCss = ":host{display:flex}.checkerboard-bg{background:repeatin
 const KritzelColor = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.size = 24;
     }
+    value;
+    size = 24;
     isLightColor(hexColor) {
         if (!hexColor)
             return false;
@@ -90,11 +92,12 @@ const KritzelColorPalette = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.colorChange = index.createEvent(this, "colorChange");
-        this.colors = [];
-        this.selectedColor = null;
-        this.isExpanded = false;
-        this.isOpaque = false;
     }
+    colors = [];
+    selectedColor = null;
+    isExpanded = false;
+    isOpaque = false;
+    colorChange;
     handleColorClick(color) {
         this.selectedColor = color;
         this.colorChange.emit(color);
@@ -128,8 +131,12 @@ const KritzelContextMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.actionSelected = index.createEvent(this, "actionSelected");
-        this.processedItems = [];
     }
+    items;
+    objects;
+    actionSelected;
+    get hostElement() { return index.getElement(this); }
+    processedItems = [];
     componentWillLoad() {
         this.updateMenuItems();
     }
@@ -164,7 +171,6 @@ const KritzelContextMenu = class {
     render() {
         return (index.h(index.Host, { key: '96569454f806a6d17380315b4d0200236fe22550' }, index.h("div", { key: '0e5899a2901e1e9ab9d657824e105121ce785bdc', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index$1) => (index.h("button", { key: `${item.label}-${index$1}`, class: { 'menu-item': true, disabled: isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), onTouchStart: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
     }
-    get hostElement() { return index.getElement(this); }
     static get watchers() { return {
         "items": ["onItemsChanged"]
     }; }
@@ -177,9 +183,11 @@ const KritzelControlBrushConfig = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toolChange = index.createEvent(this, "toolChange");
-        this.isExpanded = false;
-        this.palette = [];
     }
+    tool;
+    isExpanded = false;
+    toolChange;
+    palette = [];
     handleToolChange(newTool) {
         this.palette = newTool.palettes[newTool.type];
     }
@@ -204,14 +212,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: 'd099d1c6722678fdfb06c34eb0860e8819dd17ca' }, index.h("div", { key: '0856f0150666415ee452a0fcec5c76b6d25b82c4', style: {
+        return (index.h(index.Host, { key: 'a1f04aba4ed04e91c7b375e0f88bcff4fea1cba4' }, index.h("div", { key: 'c7cd734c96498c8cd6a27321fb6d11773e7aa8a9', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-brush-style", { key: '364e6026d1b280a02c3618c7ded11f40c7e3cba4', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: 'fc58c9ceb9e92ef8c79836e686b9a64653f91210', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: 'ab219c72a9ace56853c725ba75767be2079a3c10', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '8757c754217a3de88dad2c465ff748571716ae64', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '056b227dd9a92b06588816739b55a80f5ce80835', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-brush-style", { key: '67958dc2a34302eb23fabbafea3c7dc7863f1984', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: '5c84a72d9f337dff253a161abe19acb832275272', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, index.h("kritzel-icon", { key: 'b3e0c44db35b53a584757e18b507df09f30bfa8a', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'eb098094ae69aa5901244f9686a3eb990271c07d', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '18ae184b282ca2ec6511a6ac0065914edf66f91b', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -225,8 +233,10 @@ const KritzelControlTextConfig = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.toolChange = index.createEvent(this, "toolChange");
-        this.isExpanded = false;
     }
+    tool;
+    isExpanded = false;
+    toolChange;
     handleToggleExpand() {
         this.isExpanded = !this.isExpanded;
     }
@@ -243,14 +253,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: 'f0d35cc43f1fe58a5a26f21dad99f1a733b66cce' }, index.h("div", { key: 'efc7d31c11460015a41185b4215e9ff45970abdd', style: {
+        return (index.h(index.Host, { key: 'a5c0e3eb4343637d758888d7d2a0843549fa0c25' }, index.h("div", { key: '1d4d42af117ed9da1a91d1747a7d6f6531e0de9b', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-font-family", { key: '7f7d3ccb061d4b0e5e0f181ba4224f3de430a88c', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '6676fcfa245874d54fa9933888c242c6f611c58c', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '0734f636889c77f9087a2de2899a28ebd8df30a2', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '68373ef79578d6a73028da681f1e3b0e8e3e5874', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '56e6828f6ceaac3d37910b7d092a30bacbd84519', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, index.h("kritzel-font-family", { key: 'b19e1edcbc7bafb0829d3e173d33cff37d2a5959', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: 'ca3dce970ee5dd1a7c8c617127777859b45380c4', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '241d82cd06db8d20794a369a4df6e6a71531131a', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: 'ec82e5c09046e70e904cc1ec9716c53bec9cac2b', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '1cbddf6e6de21bd62f3803cca9e21ef9e01f15c0', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -267,14 +277,15 @@ const KritzelControls = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.isControlsReady = index.createEvent(this, "isControlsReady");
-        this.controls = [];
-        this.activeControl = null;
-        this.isUtilityPanelVisible = true;
-        this.firstConfig = null;
-        this.isTooltipVisible = false;
-        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-        this.kritzelEngine = null;
     }
+    controls = [];
+    activeControl = null;
+    isUtilityPanelVisible = true;
+    isControlsReady;
+    firstConfig = null;
+    isTooltipVisible = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    get host() { return index.getElement(this); }
     handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
@@ -283,28 +294,25 @@ const KritzelControls = class {
         this.isTooltipVisible = false;
     }
     handleKeyDown(event) {
-        var _a;
         if (event.key === 'Escape') {
             event.preventDefault();
             this.closeTooltip();
-            (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
+            this.kritzelEngine?.enable();
         }
     }
     async handleActiveToolChange(event) {
-        var _a;
         this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
+        await this.kritzelEngine?.setFocus();
     }
     async closeTooltip() {
         this.isTooltipVisible = false;
     }
+    kritzelEngine = null;
     get activeToolAsTextTool() {
-        var _a;
-        return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
+        return this.activeControl?.tool;
     }
     get activeToolAsBrushTool() {
-        var _a;
-        return (_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.tool;
+        return this.activeControl?.tool;
     }
     async componentWillLoad() {
         await this.initializeEngine();
@@ -344,48 +352,44 @@ const KritzelControls = class {
         }
     }
     handleConfigClick(event) {
-        var _a;
         event.stopPropagation();
         this.isTooltipVisible = !this.isTooltipVisible;
-        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.disable();
+        this.kritzelEngine?.disable();
     }
     async handleToolChange(event) {
-        this.activeControl = Object.assign(Object.assign({}, this.activeControl), { tool: event.detail });
+        this.activeControl = { ...this.activeControl, tool: event.detail };
         await this.kritzelEngine.changeActiveTool(this.activeControl.tool);
     }
     render() {
-        var _a, _b;
-        const hasNoConfig = ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.config) === undefined || ((_b = this.activeControl) === null || _b === void 0 ? void 0 : _b.config) === null;
-        return (index.h(index.Host, { key: 'af04746b6eaa04a51482cd9d25ba3ab303d631f1', class: {
+        const hasNoConfig = this.activeControl?.config === undefined || this.activeControl?.config === null;
+        return (index.h(index.Host, { key: '7ab1f3e176848cb9a34be7e7b90e13c2a861d78b', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: 'd6ecb1087a332162f3fc809ed4321fc48f72c3e7', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: 'f168b27cb9cc3a1a7d0028055cd58c60cec9776f', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, onUndo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.undo(); }, onRedo: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.redo(); }, onDelete: () => { var _a; return (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.delete(); } })), index.h("div", { key: '34723e47249d53fd544848d2d577deba4df1f131', class: "kritzel-controls" }, this.controls.map(control => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            }, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), index.h("div", { key: '9e568217b23632d73b051350d7f795f0cd7ab9ed', class: "kritzel-controls" }, this.controls.map(control => {
             if (control.type === 'tool') {
                 return (index.h("button", { class: {
                         'kritzel-control': true,
-                        'selected': ((_a = this.activeControl) === null || _a === void 0 ? void 0 : _a.name) === (control === null || control === void 0 ? void 0 : control.name),
-                    }, key: control.name, onClick: _event => { var _a; return (_a = this.handleControlClick) === null || _a === void 0 ? void 0 : _a.call(this, control); } }, index.h("kritzel-icon", { name: control.icon })));
+                        'selected': this.activeControl?.name === control?.name,
+                    }, key: control.name, onClick: _event => this.handleControlClick?.(control) }, index.h("kritzel-icon", { name: control.icon })));
             }
             if (control.type === 'divider') {
                 return index.h("div", { class: "kritzel-divider", key: control.name });
             }
-            if (control.type === 'config' && control.name === ((_b = this.firstConfig) === null || _b === void 0 ? void 0 : _b.name) && this.activeControl) {
-                return (index.h("div", { class: "kritzel-config-container", key: control.name }, index.h("kritzel-tooltip", { isVisible: this.isTooltipVisible, anchorElement: (_c = this.host.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.kritzel-config-container') }, index.h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (index.h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })), this.activeControl.name === 'text' && (index.h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => { var _a; return (_a = this.handleToolChange) === null || _a === void 0 ? void 0 : _a.call(this, event); } })))), index.h("div", { class: "kritzel-config", onClick: event => { var _a; return (_a = this.handleConfigClick) === null || _a === void 0 ? void 0 : _a.call(this, event); }, style: {
+            if (control.type === 'config' && control.name === this.firstConfig?.name && this.activeControl) {
+                return (index.h("div", { class: "kritzel-config-container", key: control.name }, index.h("kritzel-tooltip", { isVisible: this.isTooltipVisible, anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container') }, index.h("div", { style: { width: '294px', height: '100%' } }, this.activeControl.name === 'brush' && (index.h("kritzel-control-brush-config", { tool: this.activeToolAsBrushTool, onToolChange: event => this.handleToolChange?.(event) })), this.activeControl.name === 'text' && (index.h("kritzel-control-text-config", { tool: this.activeToolAsTextTool, onToolChange: event => this.handleToolChange?.(event) })))), index.h("div", { class: "kritzel-config", onClick: event => this.handleConfigClick?.(event), style: {
                         cursor: this.activeControl.config ? 'pointer' : 'default',
                         pointerEvents: hasNoConfig ? 'none' : 'auto',
-                    } }, this.activeControl.tool instanceof index$1.KritzelBrushTool && (index.h("div", { class: "color-container" }, index.h("kritzel-color", { value: (_d = this.activeToolAsBrushTool) === null || _d === void 0 ? void 0 : _d.color, size: (_e = this.activeToolAsBrushTool) === null || _e === void 0 ? void 0 : _e.size, style: {
+                    } }, this.activeControl.tool instanceof index$1.KritzelBrushTool && (index.h("div", { class: "color-container" }, index.h("kritzel-color", { value: this.activeToolAsBrushTool?.color, size: this.activeToolAsBrushTool?.size, style: {
                         borderRadius: '50%',
                         border: 'none',
-                    } }))), this.activeControl.tool instanceof index$1.KritzelTextTool && (index.h("div", { class: "font-container" }, index.h("kritzel-font", { fontFamily: (_f = this.activeToolAsTextTool) === null || _f === void 0 ? void 0 : _f.fontFamily, size: (_g = this.activeToolAsTextTool) === null || _g === void 0 ? void 0 : _g.fontSize, color: (_h = this.activeToolAsTextTool) === null || _h === void 0 ? void 0 : _h.fontColor }))), hasNoConfig && index.h("div", { class: "no-config" }))));
+                    } }))), this.activeControl.tool instanceof index$1.KritzelTextTool && (index.h("div", { class: "font-container" }, index.h("kritzel-font", { fontFamily: this.activeToolAsTextTool?.fontFamily, size: this.activeToolAsTextTool?.fontSize, color: this.activeToolAsTextTool?.fontColor }))), hasNoConfig && index.h("div", { class: "no-config" }))));
             }
         }))));
     }
     static get assetsDirs() { return ["../assets"]; }
-    get host() { return index.getElement(this); }
 };
 KritzelControls.style = kritzelControlsCss;
 
@@ -394,11 +398,13 @@ const kritzelCursorTrailCss = ":host{display:block;position:fixed;top:0;left:0;w
 const KritzelCursorTrail = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.cursorTrailPoints = [];
-        this.isLeftButtonDown = false;
-        this.TRAIL_DURATION_MS = 100;
-        this.MAX_TRAIL_POINTS = 50;
     }
+    store;
+    cursorTrailPoints = [];
+    isLeftButtonDown = false;
+    trailCleanupIntervalId;
+    TRAIL_DURATION_MS = 100;
+    MAX_TRAIL_POINTS = 50;
     componentDidLoad() {
         this.trailCleanupIntervalId = window.setInterval(() => {
             const now = Date.now();
@@ -484,44 +490,17 @@ const KritzelDropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.valueChanged = index.createEvent(this, "valueChanged");
-        this.options = [];
-        this.selectStyles = {};
-        this.hasSuffixContent = false;
-        this.hasPrefixContent = false;
-        this.handleSelectChange = (event) => {
-            const newValue = event.target.value;
-            if (this.internalValue !== newValue) {
-                this.internalValue = newValue;
-                this.valueChanged.emit(this.internalValue);
-            }
-        };
-        this.evaluateSuffixContent = () => {
-            if (this.suffixSlotElement) {
-                const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
-                if (this.hasSuffixContent !== newHasContent) {
-                    this.hasSuffixContent = newHasContent;
-                }
-            }
-            else {
-                if (this.hasSuffixContent !== false) {
-                    this.hasSuffixContent = false;
-                }
-            }
-        };
-        this.evaluatePrefixContent = () => {
-            if (this.prefixSlotElement) {
-                const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
-                if (this.hasPrefixContent !== newHasContent) {
-                    this.hasPrefixContent = newHasContent;
-                }
-            }
-            else {
-                if (this.hasPrefixContent !== false) {
-                    this.hasPrefixContent = false;
-                }
-            }
-        };
     }
+    options = [];
+    value;
+    width;
+    selectStyles = {};
+    internalValue;
+    hasSuffixContent = false;
+    hasPrefixContent = false;
+    valueChanged;
+    suffixSlotElement;
+    prefixSlotElement;
     componentWillLoad() {
         this.updateInternalValue(this.value, false);
         this.evaluateSuffixContent();
@@ -553,13 +532,46 @@ const KritzelDropdown = class {
             }
         }
     }
+    handleSelectChange = (event) => {
+        const newValue = event.target.value;
+        if (this.internalValue !== newValue) {
+            this.internalValue = newValue;
+            this.valueChanged.emit(this.internalValue);
+        }
+    };
+    evaluateSuffixContent = () => {
+        if (this.suffixSlotElement) {
+            const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
+            if (this.hasSuffixContent !== newHasContent) {
+                this.hasSuffixContent = newHasContent;
+            }
+        }
+        else {
+            if (this.hasSuffixContent !== false) {
+                this.hasSuffixContent = false;
+            }
+        }
+    };
+    evaluatePrefixContent = () => {
+        if (this.prefixSlotElement) {
+            const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
+            if (this.hasPrefixContent !== newHasContent) {
+                this.hasPrefixContent = newHasContent;
+            }
+        }
+        else {
+            if (this.hasPrefixContent !== false) {
+                this.hasPrefixContent = false;
+            }
+        }
+    };
     render() {
         const selectClasses = {
             'custom-select': true,
             'has-suffix-border': this.hasSuffixContent,
             'has-prefix-border': this.hasPrefixContent,
         };
-        return (index.h(index.Host, { key: '32c5f5a4f807c1e316c91b795c005b8d30ce6189' }, index.h("div", { key: 'b1cbeff18e688da4a2f7472be290b9527a619f07', class: "dropdown-wrapper" }, index.h("slot", { key: 'b3bbb7e21c6f5620cab41aa4b1c7206b6c75fd86', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), index.h("select", { key: '8b2dcdc125bee59cf29fce7c980b755e78d5816e', class: selectClasses, style: Object.assign(Object.assign({}, this.selectStyles), { width: this.width }), onInput: this.handleSelectChange }, this.options.map(option => (index.h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), index.h("slot", { key: '8d83f0dea41ac959bf2392948efef33bb70d0154', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
+        return (index.h(index.Host, { key: '32c5f5a4f807c1e316c91b795c005b8d30ce6189' }, index.h("div", { key: 'b1cbeff18e688da4a2f7472be290b9527a619f07', class: "dropdown-wrapper" }, index.h("slot", { key: 'b3bbb7e21c6f5620cab41aa4b1c7206b6c75fd86', name: "prefix", ref: el => this.prefixSlotElement = el, onSlotchange: this.evaluatePrefixContent }), index.h("select", { key: '8b2dcdc125bee59cf29fce7c980b755e78d5816e', class: selectClasses, style: { ...this.selectStyles, width: this.width }, onInput: this.handleSelectChange }, this.options.map(option => (index.h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), index.h("slot", { key: '8d83f0dea41ac959bf2392948efef33bb70d0154', name: "suffix", ref: el => this.suffixSlotElement = el, onSlotchange: this.evaluateSuffixContent }))));
     }
     static get watchers() { return {
         "value": ["externalValueChanged"],
@@ -569,6 +581,7 @@ const KritzelDropdown = class {
 KritzelDropdown.style = kritzelDropdownCss;
 
 class KritzelIconRegistry {
+    static registry = new Map();
     static register(name, svgContent) {
         if (this.registry.has(name)) {
             console.warn(`[IconRegistry] Icon "${name}" is already registered. It will be overwritten.`);
@@ -589,7 +602,6 @@ class KritzelIconRegistry {
         return this.registry.has(name);
     }
 }
-KritzelIconRegistry.registry = new Map();
 KritzelIconRegistry.registerIcons({
     'cursor': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"/></svg>',
     'pen': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/></svg>',
@@ -618,99 +630,103 @@ 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-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:14px;left:14px}kritzel-split-button{position:absolute;top:14px;left:14px;z-index:1}kritzel-controls{position:absolute;bottom:28px}";
 
 const KritzelEditor = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.isReady = index.createEvent(this, "isReady");
-        this.scaleMax = ABSOLUTE_SCALE_MAX;
-        this.scaleMin = ABSOLUTE_SCALE_MIN;
-        this.controls = [
-            {
-                name: 'selection',
-                type: 'tool',
-                tool: index$1.KritzelSelectionTool,
-                icon: 'cursor',
-            },
-            {
-                name: 'brush',
-                type: 'tool',
-                tool: index$1.KritzelBrushTool,
-                icon: 'pen',
-                isDefault: true,
-                config: index$1.DEFAULT_BRUSH_CONFIG,
-            },
-            {
-                name: 'eraser',
-                type: 'tool',
-                tool: index$1.KritzelEraserTool,
-                icon: 'eraser',
-            },
-            {
-                name: 'text',
-                type: 'tool',
-                tool: index$1.KritzelTextTool,
-                icon: 'type',
-                config: index$1.DEFAULT_TEXT_CONFIG,
-            },
-            {
-                name: 'image',
-                type: 'tool',
-                tool: index$1.KritzelImageTool,
-                icon: 'image',
-            },
-            {
-                name: 'divider',
-                type: 'divider',
-            },
-            {
-                name: 'config',
-                type: 'config',
-            },
-        ];
-        this.globalContextMenuItems = [
-            {
-                label: 'Paste',
-                icon: 'paste',
-                disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
-                action: menu => this.engineRef.paste(menu.x, menu.y),
-            },
-            { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
-        ];
-        this.objectContextMenuItems = [
-            {
-                label: 'Edit',
-                icon: 'pen',
-                visible: (_, objects) => objects.length === 1 && objects[0].isEditable,
-                action: (_, objects) => {
-                    if (objects.length === 1) {
-                        const object = objects[0];
-                        if (object.isEditable) {
-                            object.edit();
-                        }
+    }
+    scaleMax = ABSOLUTE_SCALE_MAX;
+    scaleMin = ABSOLUTE_SCALE_MIN;
+    controls = [
+        {
+            name: 'selection',
+            type: 'tool',
+            tool: index$1.KritzelSelectionTool,
+            icon: 'cursor',
+        },
+        {
+            name: 'brush',
+            type: 'tool',
+            tool: index$1.KritzelBrushTool,
+            icon: 'pen',
+            isDefault: true,
+            config: index$1.DEFAULT_BRUSH_CONFIG,
+        },
+        {
+            name: 'eraser',
+            type: 'tool',
+            tool: index$1.KritzelEraserTool,
+            icon: 'eraser',
+        },
+        {
+            name: 'text',
+            type: 'tool',
+            tool: index$1.KritzelTextTool,
+            icon: 'type',
+            config: index$1.DEFAULT_TEXT_CONFIG,
+        },
+        {
+            name: 'image',
+            type: 'tool',
+            tool: index$1.KritzelImageTool,
+            icon: 'image',
+        },
+        {
+            name: 'divider',
+            type: 'divider',
+        },
+        {
+            name: 'config',
+            type: 'config',
+        },
+    ];
+    globalContextMenuItems = [
+        {
+            label: 'Paste',
+            icon: 'paste',
+            disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
+            action: menu => this.engineRef.paste(menu.x, menu.y),
+        },
+        { label: 'Select All', icon: 'select-all', action: () => this.selectAllObjectsInViewport() },
+    ];
+    objectContextMenuItems = [
+        {
+            label: 'Edit',
+            icon: 'pen',
+            visible: (_, objects) => objects.length === 1 && objects[0].isEditable,
+            action: (_, objects) => {
+                if (objects.length === 1) {
+                    const object = objects[0];
+                    if (object.isEditable) {
+                        object.edit();
                     }
-                },
-            },
-            { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },
-            {
-                label: 'Paste',
-                icon: 'paste',
-                disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
-                action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
+                }
             },
-            { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
-            { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
-            { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
-        ];
-        this.customSvgIcons = {};
-        this.isControlsVisible = true;
-        this.isUtilityPanelVisible = true;
-        this.isEngineReady = false;
-        this.isControlsReady = false;
-        this.isWorkspaceManagerReady = false;
-        this.workspaces = [];
-    }
+        },
+        { label: 'Copy', icon: 'copy', action: () => this.engineRef.copy() },
+        {
+            label: 'Paste',
+            icon: 'paste',
+            disabled: async () => (await this.engineRef.getCopiedObjects()).length === 0,
+            action: (menu, _) => this.engineRef.paste(menu.x, menu.y),
+        },
+        { label: 'Delete', icon: 'delete', action: () => this.engineRef.delete() },
+        { label: 'Bring to Front', icon: 'bring-to-front', action: () => this.engineRef.bringToFront() },
+        { label: 'Send to Back', icon: 'send-to-back', action: () => this.engineRef.sendToBack() },
+    ];
+    customSvgIcons = {};
+    isControlsVisible = true;
+    isUtilityPanelVisible = true;
+    isReady;
+    get host() { return index.getElement(this); }
+    isEngineReady = false;
+    isControlsReady = false;
+    isWorkspaceManagerReady = false;
+    workspaces = [];
+    activeWorkspace;
+    isVirtualKeyboardOpen = false;
     onIsEngineReady(newValue) {
         if (newValue && this.isControlsReady) {
             this.checkIsReady();
@@ -753,8 +769,12 @@ const KritzelEditor = class {
             event.preventDefault();
         }
     }
+    engineRef;
+    controlsRef;
+    splitButtonRef;
     componentDidLoad() {
         this.registerCustomSvgIcons();
+        this.listenForMobileKeyboard();
     }
     async checkIsReady() {
         await customElements.whenDefined('kritzel-editor');
@@ -776,10 +796,15 @@ const KritzelEditor = class {
             KritzelIconRegistry.register(name, svg);
         }
     }
+    listenForMobileKeyboard() {
+        index$1.KritzelKeyboardHelper.onKeyboardVisibleChanged(isOpen => {
+            console.log('Mobile keyboard visibility changed:', isOpen);
+            this.isVirtualKeyboardOpen = isOpen;
+        });
+    }
     render() {
-        return (index.h(index.Host, { key: '9fe00d70c1a875076e545ca447e2f8d817ebb2fd' }, index.h("kritzel-workspace-manager", { key: 'ca9ce9f8f277e92f78315e7eaba2bc523da5b9cb', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => this.activeWorkspace = event.detail, onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.h("kritzel-engine", { key: '098a4690198f0678e7b4c6c897f86ad1698f510f', ref: el => (this.engineRef = el), workspace: this.activeWorkspace, scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.workspaces = event.detail }), index.h("kritzel-controls", { key: 'e1795f5a7460617628c09766f213c212e48f25e5', ref: el => (this.controlsRef = el), controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, style: this.isControlsVisible ? { display: 'flex' } : { display: 'none' }, onIsControlsReady: () => (this.isControlsReady = true) })));
+        return (index.h(index.Host, { key: '0f51215c0ede25bf8edfbf1420fc8d6c64175b8a' }, index.h("kritzel-workspace-manager", { key: '14affeb4c161a401d9cca32d0681d576b67b5199', workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => this.activeWorkspace = event.detail, onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), index.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 }), index.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) })));
     }
-    get host() { return index.getElement(this); }
     static get watchers() { return {
         "isEngineReady": ["onIsEngineReady"],
         "isControlsReady": ["onIsControlsReady"]
@@ -788,10 +813,11 @@ const KritzelEditor = class {
 KritzelEditor.style = kritzelEditorCss;
 
 class KritzelViewport {
+    _store;
+    initialTouchDistance = 0;
+    startX = 0;
+    startY = 0;
     constructor(store, host) {
-        this.initialTouchDistance = 0;
-        this.startX = 0;
-        this.startY = 0;
         this._store = store;
         this._store.state.host = host;
         this._store.state.viewportWidth = host.clientWidth;
@@ -938,6 +964,8 @@ class KritzelViewport {
 }
 
 class UpdateViewportCommand extends index$1.KritzelBaseCommand {
+    currentViewport;
+    previousViewport;
     constructor(store, initiator, previousViewport, skipHistory = false) {
         super(store, initiator, skipHistory);
         this.previousViewport = previousViewport;
@@ -960,10 +988,12 @@ class UpdateViewportCommand extends index$1.KritzelBaseCommand {
 }
 
 class KritzelCircularBuffer {
+    buffer;
+    capacity;
+    head = 0;
+    tail = 0;
+    size = 0;
     constructor(capacity) {
-        this.head = 0;
-        this.tail = 0;
-        this.size = 0;
         this.capacity = capacity;
         this.buffer = new Array(capacity).fill(null);
     }
@@ -1006,6 +1036,10 @@ class KritzelCircularBuffer {
 }
 
 class KritzelHistory {
+    _store;
+    undoStack;
+    redoStack;
+    previousViewport;
     constructor(store) {
         this._store = store;
         this.undoStack = new KritzelCircularBuffer(this._store.state.historyBufferSize);
@@ -1087,128 +1121,13 @@ class KritzelHistory {
     }
 }
 
-class KritzelOctree {
-    constructor(bounds, capacity = 8) {
-        this.objects = [];
-        this.children = null;
-        this.bounds = bounds;
-        this.capacity = capacity;
-    }
-    reset() {
-        this.objects = [];
-        this.children = null;
-    }
-    insert(object) {
-        if (!this.intersects(object.rotatedBoundingBox, this.bounds)) {
-            return false;
-        }
-        if (this.objects.length < this.capacity && this.children === null) {
-            this.objects.push(object);
-            return true;
-        }
-        if (this.children === null) {
-            this.subdivide();
-        }
-        for (const child of this.children) {
-            if (child.insert(object)) {
-                return true;
-            }
-        }
-        return false;
-    }
-    update(object) {
-        const index = this.objects.findIndex(o => o.id === object.id);
-        if (index !== -1) {
-            this.objects[index] = object;
-            return true;
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                if (child.update(object)) {
-                    return true;
-                }
-            }
-        }
-        return false;
-    }
-    remove(predicate) {
-        const index = this.objects.findIndex(o => predicate(o));
-        if (index !== -1) {
-            this.objects.splice(index, 1);
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                child.remove(predicate);
-            }
-        }
-    }
-    query(range) {
-        const results = [];
-        if (!this.intersects(range, this.bounds)) {
-            return results;
-        }
-        for (const object of this.objects) {
-            if (this.intersects(object.rotatedBoundingBox, range)) {
-                results.push(object);
-            }
-        }
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.query(range));
-            }
-        }
-        return results;
-    }
-    filter(predicate) {
-        const results = this.objects.filter(o => predicate(o));
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.filter(predicate));
-            }
-        }
-        return results;
-    }
-    allObjects() {
-        const results = [...this.objects];
-        if (this.children !== null) {
-            for (const child of this.children) {
-                results.push(...child.allObjects());
-            }
-        }
-        return results;
-    }
-    subdivide() {
-        const { x, y, z, width, height, depth } = this.bounds;
-        const halfWidth = width / 2;
-        const halfHeight = height / 2;
-        const halfDepth = depth / 2;
-        this.children = [
-            new KritzelOctree({ x, y, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y: y + halfHeight, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y: y + halfHeight, z, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x, y: y + halfHeight, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-            new KritzelOctree({ x: x + halfWidth, y: y + halfHeight, z: z + halfDepth, width: halfWidth, height: halfHeight, depth: halfDepth }, this.capacity),
-        ];
-    }
-    intersects(a, b) {
-        return !(a.x >= b.x + b.width || // a is completely to the right of b
-            a.x + a.width <= b.x || // a is completely to the left of b
-            a.y >= b.y + b.height || // a is completely below b
-            a.y + a.height <= b.y // a is completely above b
-        );
-    }
-}
-
 const DEFAULT_ENGINE_STATE = {
     activeWorkspace: null,
     activeTool: null,
     activeText: null,
     currentPath: null,
     copiedObjects: null,
-    objectsOctree: null,
+    objectsMap: null,
     selectionBox: null,
     selectionGroup: null,
     resizeHandleType: null,
@@ -1264,8 +1183,11 @@ const DEFAULT_ENGINE_STATE = {
 };
 
 class KritzelDatabase {
+    db = null;
+    dbName;
+    dbVersion;
+    isLoggingEnabled;
     constructor(dbName, dbVersion, isLoggingEnabled = false) {
-        this.db = null;
         this.dbName = dbName;
         this.dbVersion = dbVersion;
         this.isLoggingEnabled = isLoggingEnabled;
@@ -1390,8 +1312,7 @@ class KritzelDatabase {
                 resolve(requestResult);
             };
             transaction.onabort = () => {
-                var _a;
-                reject((_a = transaction.error) !== null && _a !== void 0 ? _a : new Error('Transaction aborted'));
+                reject(transaction.error ?? new Error('Transaction aborted'));
             };
             transaction.onerror = () => {
                 reject(transaction.error);
@@ -1449,9 +1370,8 @@ class KritzelDatabase {
                 Promise.all(promises).then(() => resolve(results));
             };
             transaction.onabort = () => {
-                var _a;
                 console.error('[IndexedDB] Batch transaction aborted:', transaction.error);
-                reject((_a = transaction.error) !== null && _a !== void 0 ? _a : new Error('Transaction aborted'));
+                reject(transaction.error ?? new Error('Transaction aborted'));
             };
             transaction.onerror = () => {
                 console.error('[IndexedDB] Batch transaction error:', transaction.error);
@@ -1490,17 +1410,56 @@ class KritzelDatabase {
     }
 }
 
-class KritzelWorkspace {
-    constructor(id, name, viewport = { translateX: 0, translateY: 0, scale: 1 }) {
-        this.id = id;
-        this.name = name;
-        this.createdAt = new Date();
-        this.updatedAt = new Date();
-        this.viewport = viewport;
+class KritzelObjectMap {
+    map;
+    constructor() {
+        this.map = new Map();
+    }
+    reset() {
+        this.map.clear();
+    }
+    insert(object) {
+        if (!object.id) {
+            return false;
+        }
+        this.map.set(object.id, object);
+        return true;
+    }
+    update(object) {
+        if (!object.id || !this.map.has(object.id)) {
+            return false;
+        }
+        this.map.set(object.id, object);
+        return true;
+    }
+    remove(predicate) {
+        for (const [id, object] of this.map) {
+            if (predicate(object)) {
+                this.map.delete(id);
+            }
+        }
+    }
+    filter(predicate) {
+        const results = [];
+        for (const object of this.map.values()) {
+            if (predicate(object)) {
+                results.push(object);
+            }
+        }
+        return results;
+    }
+    allObjects() {
+        return Array.from(this.map.values());
     }
 }
 
 class KritzelStore {
+    _kritzelEngine;
+    _state;
+    _history;
+    _database;
+    _listeners = new Map();
+    objects = [];
     get history() {
         return this._history;
     }
@@ -1511,10 +1470,10 @@ class KritzelStore {
         return this._state;
     }
     get currentZIndex() {
-        return this._state.objectsOctree.filter(o => !(o instanceof index$1.KritzelSelectionGroup) && !(o instanceof index$1.KrtizelSelectionBox)).length;
+        return this._state.objectsMap.filter(o => !(o instanceof index$1.KritzelSelectionGroup) && !(o instanceof index$1.KrtizelSelectionBox)).length;
     }
     get allObjects() {
-        return this._state.objectsOctree.allObjects();
+        return this._state.objectsMap.allObjects();
     }
     get selectedObjects() {
         return this.allObjects.filter(o => !(o instanceof index$1.KritzelSelectionGroup)).filter(o => o.isSelected);
@@ -1529,20 +1488,11 @@ class KritzelStore {
         return this._state.isEnabled === false || this._state.isReady === false || this._state.activeWorkspace === null;
     }
     constructor(kritzelEngine) {
-        this._listeners = new Map();
-        this.objects = [];
         this._state = DEFAULT_ENGINE_STATE;
         this._kritzelEngine = kritzelEngine;
         this._history = new KritzelHistory(this);
         this._database = new KritzelDatabase('kritzelDB', 1, this._state.debugInfo.logDatabase);
-        this._state.objectsOctree = new KritzelOctree({
-            x: -Infinity,
-            y: -Infinity,
-            z: -Infinity,
-            width: Infinity,
-            height: Infinity,
-            depth: Infinity,
-        });
+        this._state.objectsMap = new KritzelObjectMap();
     }
     async initializeDatabase() {
         await this._database.open([
@@ -1555,11 +1505,10 @@ class KritzelStore {
         this.rerender();
     }
     async initializeWorkspace(workspace) {
-        var _a;
         const workspaces = await this.getWorkspaces();
         const mostRecentWorkspace = [...workspaces].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())[0];
-        const fallbackWorkspace = new KritzelWorkspace(index$1.ObjectHelper.generateUUID(), 'New Workspace');
-        this._state.activeWorkspace = (_a = workspace !== null && workspace !== void 0 ? workspace : mostRecentWorkspace) !== null && _a !== void 0 ? _a : fallbackWorkspace;
+        const fallbackWorkspace = new index$1.KritzelWorkspace(index$1.ObjectHelper.generateUUID(), 'New Workspace');
+        this._state.activeWorkspace = workspace ?? mostRecentWorkspace ?? fallbackWorkspace;
         const isExistingWorkspace = await this.getWorkspace(this._state.activeWorkspace.id);
         if (isExistingWorkspace) {
             await this.updateWorkspace(this._state.activeWorkspace);
@@ -1574,13 +1523,13 @@ class KritzelStore {
         await this.initializeWorkspaceObjects(this._state.activeWorkspace.id);
     }
     async initializeWorkspaceObjects(workspaceId) {
-        this._state.objectsOctree.reset();
+        this._state.objectsMap.reset();
         this._history.reset();
         const objectsFromDb = await this._database.getAllByRange('objects', IDBKeyRange.bound([workspaceId], [workspaceId, '\uffff']));
         const reviver = new index$1.KritzelReviver(this);
         objectsFromDb.forEach(element => {
             const revivedObject = reviver.revive(element);
-            this._state.objectsOctree.insert(revivedObject);
+            this._state.objectsMap.insert(revivedObject);
         });
         this.rerender();
     }
@@ -1671,6 +1620,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);
     }
     rerender() {
         if (this._kritzelEngine) {
@@ -1796,15 +1746,8 @@ class KritzelStore {
         this.history.executeCommand(new index$1.AddSelectionGroupCommand(this, this, selectionGroup));
     }
     selectAllObjectsInViewport() {
-        const objectsInViewport = this._state.objectsOctree
-            .query({
-            x: -this._state.translateX / this._state.scale,
-            y: -this._state.translateY / this._state.scale,
-            z: this._state.scale,
-            width: this._state.viewportWidth / this._state.scale,
-            height: this._state.viewportHeight / this._state.scale,
-            depth: 100,
-        })
+        const objectsInViewport = this._state.objectsMap
+            .filter(o => o.isInViewport())
             .filter(o => !(o instanceof index$1.KritzelSelectionGroup) && !(o instanceof index$1.KrtizelSelectionBox) && !(o instanceof KritzelContextMenu));
         if (objectsInViewport.length > 0) {
             const selectionGroup = index$1.KritzelSelectionGroup.create(this);
@@ -1837,8 +1780,7 @@ class KritzelStore {
         this.state.activeText = null;
     }
     getObjectFromPointerEvent(event, selector = '.object') {
-        var _a;
-        const shadowRoot = (_a = this.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+        const shadowRoot = this.state.host?.shadowRoot;
         if (!shadowRoot)
             return null;
         const clientX = event.clientX;
@@ -1853,8 +1795,7 @@ class KritzelStore {
         return null;
     }
     getObjectsFromPointerEvent(event, selector = '.object') {
-        var _a;
-        const shadowRoot = (_a = this.state.host) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+        const shadowRoot = this.state.host?.shadowRoot;
         if (!shadowRoot)
             return [];
         const clientX = event.clientX;
@@ -1972,10 +1913,10 @@ class KritzelKeyHandler extends index$1.KritzelBaseHandler {
 }
 
 class KritzelContextMenuHandler extends index$1.KritzelBaseHandler {
+    globalContextMenuItems = [];
+    objectContextMenuItems = [];
     constructor(store, globalContextMenuItems, objectContextMenuItems) {
         super(store);
-        this.globalContextMenuItems = [];
-        this.objectContextMenuItems = [];
         this.globalContextMenuItems = globalContextMenuItems;
         this.objectContextMenuItems = objectContextMenuItems;
     }
@@ -2024,6 +1965,17 @@ class KritzelClassHelper {
 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 {
+    workspace;
+    activeTool;
+    globalContextMenuItems;
+    objectContextMenuItems;
+    scaleMax = ABSOLUTE_SCALE_MAX;
+    scaleMin = ABSOLUTE_SCALE_MIN;
+    isEngineReady;
+    activeToolChange;
+    workspacesChange;
+    get host() { return index.getElement(this); }
+    forceUpdate = 0;
     onWorkspaceChange(newWorkspace) {
         if (newWorkspace) {
             this.store.initializeWorkspace(newWorkspace);
@@ -2049,6 +2001,11 @@ const KritzelEngine = class {
             this.store.state.scaleMin = newValue;
         }
     }
+    store;
+    viewport;
+    contextMenuHandler;
+    keyHandler;
+    contextMenuElement = null;
     get isSelecting() {
         return this.store.state.activeTool instanceof index$1.KritzelSelectionTool && this.store.state.isSelecting;
     }
@@ -2060,10 +2017,6 @@ const KritzelEngine = class {
         this.isEngineReady = index.createEvent(this, "isEngineReady");
         this.activeToolChange = index.createEvent(this, "activeToolChange");
         this.workspacesChange = index.createEvent(this, "workspacesChange");
-        this.scaleMax = ABSOLUTE_SCALE_MAX;
-        this.scaleMin = ABSOLUTE_SCALE_MIN;
-        this.forceUpdate = 0;
-        this.contextMenuElement = null;
         this.store = new KritzelStore(this);
     }
     componentWillLoad() {
@@ -2083,7 +2036,6 @@ const KritzelEngine = class {
         }
     }
     handleWheel(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
@@ -2091,10 +2043,9 @@ const KritzelEngine = class {
             this.hideContextMenu();
         }
         this.viewport.handleWheel(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handleWheel(ev);
+        this.store.state?.activeTool?.handleWheel(ev);
     }
     handlePointerDown(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
@@ -2111,36 +2062,33 @@ const KritzelEngine = class {
         this.host.setPointerCapture(ev.pointerId);
         this.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerDown(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerDown(ev);
+        this.store.state?.activeTool?.handlePointerDown(ev);
     }
     handlePointerMove(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
         this.store.state.pointers.set(ev.pointerId, ev);
         this.viewport.handlePointerMove(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerMove(ev);
+        this.store.state?.activeTool?.handlePointerMove(ev);
     }
     handlePointerUp(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
         this.store.state.pointers.delete(ev.pointerId);
         this.host.releasePointerCapture(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
+        this.store.state?.activeTool?.handlePointerUp(ev);
     }
     handlePointerCancel(ev) {
-        var _a, _b;
         if (this.store.isDisabled) {
             return;
         }
         this.host.releasePointerCapture(ev.pointerId);
         this.store.state.pointers.delete(ev.pointerId);
         this.viewport.handlePointerUp(ev);
-        (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeTool) === null || _b === void 0 ? void 0 : _b.handlePointerUp(ev);
+        this.store.state?.activeTool?.handlePointerUp(ev);
     }
     handleContextMenu(ev) {
         ev.preventDefault();
@@ -2189,11 +2137,10 @@ const KritzelEngine = class {
         return Promise.resolve(registeredTool);
     }
     async changeActiveTool(tool) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.state.activeTool?.onDeactivate();
         this.store.setState('activeTool', tool);
         this.store.deselectAllObjects();
-        tool === null || tool === void 0 ? void 0 : tool.onActivate();
+        tool?.onActivate();
     }
     async setFocus() {
         this.host.focus();
@@ -2270,15 +2217,13 @@ const KritzelEngine = class {
         return this.store.state.selectionGroup ? this.store.state.selectionGroup.objects : [];
     }
     async selectObjects(objects) {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.state.activeTool?.onDeactivate();
         this.store.setState('activeTool', index$1.KritzelToolRegistry.getTool('selection'));
         this.store.deselectAllObjects();
         this.store.selectObjects(objects);
     }
     async selectAllObjectsInViewport() {
-        var _a;
-        (_a = this.store.state.activeTool) === null || _a === void 0 ? void 0 : _a.onDeactivate();
+        this.store.state.activeTool?.onDeactivate();
         this.store.setState('activeTool', index$1.KritzelToolRegistry.getTool('selection'));
         this.store.deselectAllObjects();
         this.store.selectAllObjectsInViewport();
@@ -2293,8 +2238,7 @@ const KritzelEngine = class {
         return object;
     }
     async getCopiedObjects() {
-        var _a;
-        return ((_a = this.store.state.copiedObjects) === null || _a === void 0 ? void 0 : _a.objects) || [];
+        return this.store.state.copiedObjects?.objects || [];
     }
     async createWorkspace(workspace) {
         return this.store.createWorkspace(workspace).then(() => {
@@ -2307,8 +2251,8 @@ const KritzelEngine = class {
         });
     }
     async deleteWorkspace(workspace) {
-        return this.store.deleteWorkspace(workspace).then(() => {
-            this.workspacesChange.emit(this.store.state.workspaces.filter(ws => ws.id !== workspace.id));
+        return this.store.deleteWorkspace(workspace).then(async () => {
+            this.workspacesChange.emit(this.store.state.workspaces);
         });
     }
     async getWorkspaces() {
@@ -2332,149 +2276,134 @@ const KritzelEngine = class {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (index.h(index.Host, { key: 'c7e747aa6106e7904cf9f44db37fa285a6fb4434' }, index.h("div", { key: 'b75652ab9f9531dce765cbe448ad3131c172d06a', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'fd1355bd640b9296949f6bbcf084589578654db6' }, "ActiveWorkspaceId: ", (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeWorkspace) === null || _b === void 0 ? void 0 :
-            _b.id), index.h("div", { key: '8520e3e774e97ebc42ee86401fbfbafbe41c88e8' }, "ActiveWorkspaceName: ", (_d = (_c = this.store.state) === null || _c === void 0 ? void 0 : _c.activeWorkspace) === null || _d === void 0 ? void 0 :
-            _d.name), index.h("div", { key: 'f247b4d76cd018e787a9b59829deedeb6c5c5272' }, "TranslateX: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.translateX), index.h("div", { key: 'e0438479bc9e950ef2cbe88ed0aa0b8ec1888890' }, "TranslateY: ", (_f = this.store.state) === null || _f === void 0 ? void 0 :
-            _f.translateY), index.h("div", { key: '1735fde66588e285039bcc090dee71630608d666' }, "ViewportWidth: ", (_g = this.store.state) === null || _g === void 0 ? void 0 :
-            _g.viewportWidth), index.h("div", { key: '15f8b3305c27a395b8aa6463c5acec42bb3e3ddd' }, "ViewportHeight: ", (_h = this.store.state) === null || _h === void 0 ? void 0 :
-            _h.viewportHeight), index.h("div", { key: 'd2e39bae191c7256967d0140f38e75dccf95f24c' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: 'cd3f53ff4a8f119a2ef975133f69fc3798fe0f71' }, "Scale: ", (_j = this.store.state) === null || _j === void 0 ? void 0 :
-            _j.scale), index.h("div", { key: 'b1f8c77589a80fe49d0947602bda46438921f7a8' }, "ActiveTool: ", (_l = (_k = this.store.state) === null || _k === void 0 ? void 0 : _k.activeTool) === null || _l === void 0 ? void 0 :
-            _l.name), index.h("div", { key: '41cd94f58f71cd5c1cffc679ada5fc51f6ceeea7' }, "HasViewportChanged: ", ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'bf8495bb924673aad3a9ca57ed0bf9ac23874dfb' }, "IsEnabled: ", ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.isEnabled) ? 'true' : 'false'), index.h("div", { key: '3823936f5b46b100742f94fac8d7e87ed93ddb58' }, "IsScaling: ", ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.isScaling) ? 'true' : 'false'), index.h("div", { key: '62eb836fff78b050cdab8cbef54f88f9d5b644ba' }, "IsPanning: ", ((_q = this.store.state) === null || _q === void 0 ? void 0 : _q.isPanning) ? 'true' : 'false'), index.h("div", { key: 'dac6b8d18ae8f6317bdd318ad48a9612f9942613' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: 'af232e2cd738e255029f5611531c246ac63a28ce' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '95a44fef4b6befe95bfadfc62957103b48bf76b6' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'e8162d4de449a0d6756c2f540fca28353c193438' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '4440d023cd4982c834736e06863698c3baf72353' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'd3e467dd18e53850df4d5bedf2b69f54b1fbe5c6' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'df6e4bca16cbe4346786a544d6f6c53d87bdb699' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '532aebf1ff35cc578f12e36cdaf00713ffc76b97' }, "PointerX: ", (_r = this.store.state) === null || _r === void 0 ? void 0 :
-            _r.pointerX), index.h("div", { key: 'f710f8c8d27979da4a40e50452e2cdd63cdefa98' }, "PointerY: ", (_s = this.store.state) === null || _s === void 0 ? void 0 :
-            _s.pointerY), index.h("div", { key: '0175010e1d5a22be81ca0b2d88dd1aff217eacfd' }, "SelectedObjects: ", ((_t = this.store.state.selectionGroup) === null || _t === void 0 ? void 0 : _t.objects.length) || 0)), index.h("div", { key: 'dc2964c479405ed147bd5f090e24262595a474e2', id: "origin", class: "origin", style: {
-                transform: `matrix(${(_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale}, 0, 0, ${(_v = this.store.state) === null || _v === void 0 ? void 0 : _v.scale}, ${(_w = this.store.state) === null || _w === void 0 ? void 0 : _w.translateX}, ${(_x = this.store.state) === null || _x === void 0 ? void 0 : _x.translateY})`,
-            } }, (_y = this.store.state.objectsOctree.allObjects()) === null || _y === void 0 ? void 0 :
-            _y.map(object => {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                return (index.h("div", { key: object.id, style: { display: object.isInViewport() ? 'block' : 'none', transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
-                        height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: `rotate(${object.rotationDegrees}deg)`,
-                        transformOrigin: 'center',
-                        opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                    } }, index.h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
-                        minHeight: '0',
-                        minWidth: '0',
-                        backgroundColor: object.backgroundColor,
-                        borderColor: object.borderColor,
-                        borderWidth: object.borderWidth + 'px',
-                        borderStyle: 'solid',
-                        padding: object.padding + 'px',
-                        overflow: 'visible',
-                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => (el ? object.mount(el) : object.unmount()), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object === null || object === void 0 ? void 0 : object.height.toString(),
-                        width: object === null || object === void 0 ? void 0 : object.width.toString(),
-                        position: 'absolute',
-                        overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, index.h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => (el ? object.mount(el) : object.unmount()), src: object.src, style: {
-                        width: '100%',
-                        height: '100%',
-                        userSelect: 'none',
-                        pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("textarea", { ref: el => (el ? object.mount(el) : object.unmount()), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
-                        width: '100%',
-                        height: '100%',
-                        color: object.fontColor,
-                        fontSize: ((_a = object.fontSize) === null || _a === void 0 ? void 0 : _a.toString()) + 'px',
-                        fontFamily: object.fontFamily,
-                        border: 'none',
-                        outline: 'none',
-                        resize: 'none',
-                        overflow: 'hidden',
-                        display: 'block',
-                        padding: '1px',
-                        whiteSpace: 'nowrap',
-                        pointerEvents: object.isReadonly ? 'none' : 'auto',
-                        cursor: object.isReadonly ? 'default' : 'text',
-                        caretColor: object.isReadonly ? 'transparent' : 'auto',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
-                        width: '100%',
-                        height: '100%',
-                        pointerEvents: 'auto',
-                        overflow: 'hidden',
-                        display: 'block',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
-                        width: '100%',
-                        height: '100%',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
-                        width: '100%',
-                        height: '100%',
-                    } }))), index.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} / ${(_b = this.store.state) === null || _b === void 0 ? void 0 : _b.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), index.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} / ${(_c = this.store.state) === null || _c === void 0 ? void 0 : _c.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), index.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} / ${(_d = this.store.state) === null || _d === void 0 ? void 0 : _d.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), index.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} / ${(_e = this.store.state) === null || _e === void 0 ? void 0 : _e.scale})`,
-                        strokeLinecap: 'square',
-                    }, visibility: object.isSelected ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / ((_f = this.store.state) === null || _f === void 0 ? void 0 : _f.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_g = this.store.state) === null || _g === void 0 ? void 0 : _g.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.scale)}`, style: {
-                        fill: 'transparent',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.scale)), style: {
-                        stroke: 'var(--kritzel-selection-border-color, #007AFF)',
-                        strokeWidth: `calc(var(--kritzel-selection-border-width, 2px) * ${object.scale} / ${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale})`,
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "rotation-handle", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale)), r: `${(baseHandleSize * object.scale) / ((_s = this.store.state) === null || _s === void 0 ? void 0 : _s.scale)}`, style: {
-                        fill: 'var(--kritzel-selection-handle-color, #000000)',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "rotation-handle-overlay", cx: object.totalWidth / 2, cy: -((15 * object.scale) / ((_t = this.store.state) === null || _t === void 0 ? void 0 : _t.scale)), r: `${(baseHandleTouchSize * object.scale) / ((_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale)}`, style: {
-                        fill: 'transparent',
-                        cursor: 'grab',
-                    }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), index.h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), index.h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
-            }), index.h("svg", { key: '86f9a08bea3ac2d261b14b2eec471fafd20ca11f', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
-                height: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.height.toString(),
-                width: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.width.toString(),
+        return (index.h(index.Host, { key: 'fd353ff17bcde1a9ab646b6f463d1c6ce00a3dff' }, index.h("div", { key: '45bc2af8f1a3a2bfa3aa76a478c7bf208027da0c', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '50e932febc35c7dbe852ad99d96ca4f0e0b742fc' }, "ActiveWorkspaceId: ", this.store.state?.activeWorkspace?.id), index.h("div", { key: 'af94b5061f0803588fece6cccdf540f46f13ca05' }, "ActiveWorkspaceName: ", this.store.state?.activeWorkspace?.name), index.h("div", { key: '89c0d21ce94f4eda72153554fadbd6942e785edc' }, "TranslateX: ", this.store.state?.translateX), index.h("div", { key: '340b5165265241972a7a940268c7940063ba8c12' }, "TranslateY: ", this.store.state?.translateY), index.h("div", { key: '428054b3ea4a1c327f03d6b37bfe6331dea6c57b' }, "ViewportWidth: ", this.store.state?.viewportWidth), index.h("div", { key: 'd67420ef633627413066a28b8ef9ac43c520015d' }, "ViewportHeight: ", this.store.state?.viewportHeight), index.h("div", { key: 'dedf9eb89c79fa496f7b6d0df9c646898f66b3d4' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '59bb8416941fd84305f2892f24098f6f4a084401' }, "Scale: ", this.store.state?.scale), index.h("div", { key: '6705a4cec22e4e33f75e296e17bc2952a3d1cba7' }, "ActiveTool: ", this.store.state?.activeTool?.name), index.h("div", { key: 'ca22e0a377a11fdca851b38f1bf425648cd3b9dd' }, "HasViewportChanged: ", this.store.state?.hasViewportChanged ? 'true' : 'false'), index.h("div", { key: '57508b9ee24a5af631e6bb1eace404c39af14f82' }, "IsEnabled: ", this.store.state?.isEnabled ? 'true' : 'false'), index.h("div", { key: 'f6cea367b5007f767afb25a033215abda734de9d' }, "IsScaling: ", this.store.state?.isScaling ? 'true' : 'false'), index.h("div", { key: '4386ef749facd2e54da7f58aa2713b87ed76f2df' }, "IsPanning: ", this.store.state?.isPanning ? 'true' : 'false'), index.h("div", { key: '1713185b36a50dfe0f9efa0c92394222db80a377' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: '5104f428b808e7d843712302ad2e58b619876bee' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '2cb3b27a00627188e7082fa94169eb961a1ae6ed' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '7407656e61be665f27e706738faa6d318e2c1d04' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '701bf05c25cb3d3728af6602f694e6064627ea59' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: '772c345ea9c64ef800fdbb26919f1a54ca889025' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'dc687c8ba24182b8b61979ad334b989d3be72ec6' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '10cbc575a7905396a76eca4e7b56be719755aeb4' }, "PointerX: ", this.store.state?.pointerX), index.h("div", { key: '4f21199328ffadddcc58b7d6b102a89e5079f676' }, "PointerY: ", this.store.state?.pointerY), index.h("div", { key: 'ac705f38cb323b8dc8cbf95f875657c5dec5c9ae' }, "SelectedObjects: ", this.store.state.selectionGroup?.objects.length || 0)), index.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 (index.h("div", { key: object.id, style: { display: object.isInViewport() ? 'block' : 'none', transform: object?.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, index.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',
+                    top: '0',
+                    position: 'absolute',
+                    transform: `rotate(${object.rotationDegrees}deg)`,
+                    transformOrigin: 'center',
+                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                } }, index.h("foreignObject", { x: "0", y: "0", width: object.totalWidth.toString(), height: object.totalHeight.toString(), style: {
+                    minHeight: '0',
+                    minWidth: '0',
+                    backgroundColor: object.backgroundColor,
+                    borderColor: object.borderColor,
+                    borderWidth: object.borderWidth + 'px',
+                    borderStyle: 'solid',
+                    padding: object.padding + 'px',
+                    overflow: 'visible',
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => (el ? object.mount(el) : object.unmount()), xmlns: "http://www.w3.org/2000/svg", style: {
+                    height: object?.height.toString(),
+                    width: object?.width.toString(),
+                    position: 'absolute',
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, index.h("path", { d: object?.d, fill: object.fill, stroke: object?.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => (el ? object.mount(el) : object.unmount()), src: object.src, style: {
+                    width: '100%',
+                    height: '100%',
+                    userSelect: 'none',
+                    pointerEvents: 'none',
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("textarea", { ref: el => (el ? object.mount(el) : object.unmount()), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
+                    width: '100%',
+                    height: '100%',
+                    color: object.fontColor,
+                    fontSize: object.fontSize?.toString() + 'px',
+                    fontFamily: object.fontFamily,
+                    border: 'none',
+                    outline: 'none',
+                    resize: 'none',
+                    overflow: 'hidden',
+                    display: 'block',
+                    padding: '1px',
+                    whiteSpace: 'nowrap',
+                    pointerEvents: object.isReadonly ? 'none' : 'auto',
+                    cursor: object.isReadonly ? 'default' : 'text',
+                    caretColor: object.isReadonly ? 'transparent' : 'auto',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    overflow: 'hidden',
+                    display: 'block',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    width: '100%',
+                    height: '100%',
+                } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
+                    width: '100%',
+                    height: '100%',
+                } }))), index.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})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), index.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})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), index.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})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), index.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})`,
+                    strokeLinecap: 'square',
+                }, visibility: object.isSelected ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-left", cx: "0", cy: "0", r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-left", cx: "0", cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay top-right", cx: object.totalWidth, cy: "0", r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-left", cx: "0", cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("circle", { class: "resize-handle-overlay bottom-right", cx: object.totalWidth, cy: object.totalHeight, r: `${(baseHandleTouchSize * object.scale) / this.store.state?.scale}`, style: {
+                    fill: 'transparent',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("line", { x1: object.totalWidth / 2, y1: "0", x2: object.totalWidth / 2, y2: -((15 * object.scale) / this.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' }), index.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: {
+                    fill: 'var(--kritzel-selection-handle-color, #000000)',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.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: {
+                    fill: 'transparent',
+                    cursor: 'grab',
+                }, visibility: object.isSelected && !this.isSelecting ? 'visible' : 'hidden' }), index.h("g", { style: { display: this.store.state.debugInfo.showObjectInfo ? 'block' : 'none', pointerEvents: 'none' } }, index.h("foreignObject", { x: object.totalWidth.toString(), y: "0", width: "400px", height: "160px", style: { minHeight: '0', minWidth: '0', display: object.isDebugInfoVisible ? 'block' : 'none' } }, index.h("div", { style: { width: '100%', height: '100%' } }, index.h("div", { style: { whiteSpace: 'nowrap' } }, "zIndex: ", object.zIndex), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateX: ", object.translateX), index.h("div", { style: { whiteSpace: 'nowrap' } }, "translateY: ", object.translateY), index.h("div", { style: { whiteSpace: 'nowrap' } }, "width: ", object.width), index.h("div", { style: { whiteSpace: 'nowrap' } }, "height: ", object.height), index.h("div", { style: { whiteSpace: 'nowrap' } }, "scale: ", object.scale), index.h("div", { style: { whiteSpace: 'nowrap' } }, "rotation: ", object.rotation), index.h("div", { style: { whiteSpace: 'nowrap' } }, "x: ", object.x), index.h("div", { style: { whiteSpace: 'nowrap' } }, "y: ", object.y)))))));
+        }), index.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(),
                 left: '0',
                 top: '0',
-                zIndex: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.zIndex.toString(),
+                zIndex: this.store.state.currentPath?.zIndex.toString(),
                 position: 'absolute',
-                transform: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.transformationMatrix,
+                transform: this.store.state.currentPath?.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_3 = this.store.state.currentPath) === null || _3 === void 0 ? void 0 : _3.viewBox }, index.h("path", { key: '66ebcf1791c993d62b34a2e4da1d4279428a17dd', d: (_4 = this.store.state.currentPath) === null || _4 === void 0 ? void 0 : _4.d, fill: (_5 = this.store.state.currentPath) === null || _5 === void 0 ? void 0 : _5.fill, stroke: (_6 = this.store.state.currentPath) === null || _6 === void 0 ? void 0 : _6.stroke }))), this.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: 'af91784e3afc84b71d5186237d287c31d472d80a', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_7 = this.store.state.selectionGroup) === null || _7 === void 0 ? void 0 : _7.objects) || [], style: {
+            }, viewBox: this.store.state.currentPath?.viewBox }, index.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 && (index.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: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
                 zIndex: '10000',
             }, onActionSelected: event => {
-                var _a;
                 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,
-                }, (_a = this.store.state.selectionGroup) === null || _a === void 0 ? void 0 : _a.objects);
+                }, this.store.state.selectionGroup?.objects);
                 this.hideContextMenu();
-            } })), ((_8 = this.store.state) === null || _8 === void 0 ? void 0 : _8.activeTool) instanceof index$1.KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '573a4422b742044df5f240b260bc66e83d004520', store: this.store })));
+            } })), this.store.state?.activeTool instanceof index$1.KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: '7c10277160eb1bc51581e4dfbdd4d0cdf626ed8c', store: this.store })));
     }
-    get host() { return index.getElement(this); }
     static get watchers() { return {
         "workspace": ["onWorkspaceChange"],
         "scaleMax": ["validateScaleMax"],
@@ -2488,10 +2417,10 @@ const kritzelFontCss = ":host{display:block}.font-preview{color:var(--kritzel-fo
 const KritzelFont = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.fontFamily = 'Arial, sans-serif';
-        this.size = 24;
-        this.color = '#000000';
     }
+    fontFamily = 'Arial, sans-serif';
+    size = 24;
+    color = '#000000';
     render() {
         return (index.h(index.Host, { key: 'd318355704f1bf66468dd793e5e38da827076d3b' }, index.h("div", { key: '447b4fba97f5d1900060859943438733667aed08', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
@@ -2508,22 +2437,21 @@ const KritzelFontFamily = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.fontFamilyChange = index.createEvent(this, "fontFamilyChange");
-        this.fontOptions = [
-            { value: 'arial', label: 'Arial' },
-            { value: 'verdana', label: 'Verdana' },
-            { value: 'helvetica', label: 'Helvetica' },
-            { value: 'tahoma', label: 'Tahoma' },
-            { value: 'trebuchet ms', label: 'Trebuchet MS' },
-            { value: 'times new roman', label: 'Times New Roman' },
-            { value: 'georgia', label: 'Georgia' },
-            { value: 'garamond', label: 'Garamond' },
-            { value: 'courier new', label: 'Courier New' },
-            { value: 'brush script mt', label: 'Brush Script MT' },
-        ];
-        this.handleDropdownValueChange = (event) => {
-            this.fontFamilyChange.emit(event.detail);
-        };
     }
+    fontOptions = [
+        { value: 'arial', label: 'Arial' },
+        { value: 'verdana', label: 'Verdana' },
+        { value: 'helvetica', label: 'Helvetica' },
+        { value: 'tahoma', label: 'Tahoma' },
+        { value: 'trebuchet ms', label: 'Trebuchet MS' },
+        { value: 'times new roman', label: 'Times New Roman' },
+        { value: 'georgia', label: 'Georgia' },
+        { value: 'garamond', label: 'Garamond' },
+        { value: 'courier new', label: 'Courier New' },
+        { value: 'brush script mt', label: 'Brush Script MT' },
+    ];
+    selectedFontFamily;
+    fontFamilyChange;
     componentWillLoad() {
         if (this.fontOptions && this.fontOptions.length > 0) {
             const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);
@@ -2532,6 +2460,9 @@ const KritzelFontFamily = class {
             }
         }
     }
+    handleDropdownValueChange = (event) => {
+        this.fontFamilyChange.emit(event.detail);
+    };
     render() {
         const dropdownOptions = this.fontOptions.map(option => ({
             value: option.value,
@@ -2549,10 +2480,11 @@ const KritzelFontSize = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.sizeChange = index.createEvent(this, "sizeChange");
-        this.sizes = [8, 10, 12, 16, 20, 24];
-        this.selectedSize = null;
-        this.fontFamily = 'Arial';
     }
+    sizes = [8, 10, 12, 16, 20, 24];
+    selectedSize = null;
+    fontFamily = 'Arial';
+    sizeChange;
     handleSizeClick(size) {
         this.selectedSize = size;
         this.sizeChange.emit(size);
@@ -2571,8 +2503,10 @@ const kritzelIconCss = ":host{display:inline-flex;justify-content:center;align-i
 const KritzelIcon = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.size = 24;
     }
+    name;
+    label;
+    size = 24;
     render() {
         const svgContent = KritzelIconRegistry.get(this.name);
         if (!svgContent) {
@@ -2588,226 +2522,354 @@ const KritzelIcon = class {
 };
 KritzelIcon.style = kritzelIconCss;
 
-const kritzelMenuCss = ":host{display:flex;flex-direction:column;min-width:180px;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);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:2;gap:var(--kritzel-menu-item-gap, 4px);overflow-y:auto;scrollbar-color:#ebebeb transparent;scrollbar-width:thin}:host(.mobile){--kritzel-menu-item-button-hover-background-color:transparent;--kritzel-menu-item-button-focus-background-color:transparent}button{all:unset;background:transparent;border:0;padding:0;margin:0;font:inherit;color:inherit;line-height:inherit;text-align:inherit;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;border-radius:0;-webkit-tap-highlight-color:transparent}button:focus{outline:none}:host(:focus){outline:none}.menu-item{display:flex;align-items:center;justify-content:space-between;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-family:sans-serif;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);gap:var(--kritzel-context-menu-item-gap, 12px)}.menu-item:focus,.menu-item:focus-within{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.menu-item:not(.disabled):not(.active):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):not(.active):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.active{color:var(--kritzel-controls-background-color, #ffffff);background-color:var(--kritzel-controls-control-selected-background-color, #007aff)}.menu-item.active kritzel-icon{filter:brightness(0) invert(1)}.menu-item.active:hover{background-color:var(--kritzel-controls-control-selected-hover-background-color, #0075f1)}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);background-color:transparent;cursor:default}.menu-item.child-open{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%)) !important}.menu-item.active.menu-item.child-open{background-color:var(--kritzel-controls-control-selected-active-background-color, #0075f1) !important}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.menu-item.edit-mode input{background:transparent;border:none;outline:none;font-size:inherit;font-family:inherit;color:inherit;padding:0;width:100%;padding:2px 0px;border-bottom:1px solid var(--kritzel-context-menu-item-color, #333333)}.menu-item.active.edit-mode input{border-bottom:1px solid var(--kritzel-controls-background-color, #ffffff)}.menu-item.edit-mode input::selection{background-color:var(--kritzel-controls-control-selected-background-color, #007aff);border-radius:4px;color:var(--kritzel-controls-background-color, #ffffff)}.menu-item.active.edit-mode input::selection{background-color:var(--kritzel-menu-item-selected-input-background-color, #ffffff34)}.menu-item.edit-mode{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item.edit-mode.active{background-color:var(--kritzel-context-menu-item-hover-background-color, #007aff)}.menu-item-button{background:transparent;border:none;outline:none;cursor:pointer;padding:4px;border-radius:8px;display:flex;align-items:center;justify-content:center}.menu-item-button:hover{background-color:var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-button:focus{background-color:var(--kritzel-menu-item-button-focus-background-color, hsl(0, 0%, 0%, 4.3%))}.edit-container,.view-container{width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-context-menu-item-gap, 4px)}";
+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 KritzelMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.itemSelect = index.createEvent(this, "itemSelect");
+        this.itemSave = index.createEvent(this, "itemSave");
+        this.itemCancel = index.createEvent(this, "itemCancel");
+        this.itemToggleChildMenu = index.createEvent(this, "itemToggleChildMenu");
+        this.itemCloseChildMenu = index.createEvent(this, "itemCloseChildMenu");
         this.close = index.createEvent(this, "close");
-        this.items = [];
-        this.parentIndex = null;
-        this.parent = null;
-        this.activeItemIndex = null;
-        this.editingIndex = null;
-        this.openChildMenuIndex = null;
-        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-        this.childMenuAnchor = null;
-        this.childMenu = null;
-        this.cancelButton = null;
-        this.saveButton = null;
-    }
-    onEditingIndexChange(newValue) {
-        if (newValue === null) {
-            this.openChildMenuIndex = null;
-            this.editInput = undefined;
-            return;
-        }
-    }
-    handleWindowClick(event) {
-        requestAnimationFrame(() => {
-            if (this.childMenu === null) {
-                return;
-            }
-            const target = event.target;
-            if (!target.contains(this.childMenu)) {
-                this.openChildMenuIndex = null;
-            }
-        });
     }
-    handleEscape(event) {
-        var _a;
-        if (event.key === 'Escape') {
-            if (this.openChildMenuIndex !== null) {
-                return;
-            }
-            if (this.editingIndex !== null) {
-                (_a = this.cancelButton) === null || _a === void 0 ? void 0 : _a.click();
-                return;
-            }
-            this.close.emit();
-        }
-    }
-    handleEnter(event) {
-        var _a;
-        if (event.key === 'Enter') {
-            if (this.editingIndex !== null) {
-                (_a = this.saveButton) === null || _a === void 0 ? void 0 : _a.click();
-                return;
-            }
+    get host() { return index.getElement(this); }
+    items;
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    close;
+    selectedIndex = null;
+    async setFocus() {
+        const firstItem = this.host.querySelector('kritzel-menu-item');
+        if (firstItem) {
+            firstItem.focus();
         }
     }
-    componentDidLoad() {
-        requestAnimationFrame(() => {
-            this.host.focus();
-        });
-    }
-    isViewMode(index) {
-        return this.editingIndex !== index;
+    get openChildMenuItem() {
+        return this.items.find(item => item.isChildMenuOpen);
     }
-    handleSelect(item) {
-        var _a;
-        if (item.disabled || this.editingIndex !== null || this.openChildMenuIndex !== null) {
-            return;
-        }
-        (_a = item.select) === null || _a === void 0 ? void 0 : _a.call(item, item);
+    get editingMenuItem() {
+        return this.items.find(item => item.isEditing);
     }
+    onOverlayClick = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(this.openChildMenuItem);
+    };
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit(event.detail);
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.itemSave.emit(event.detail);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.itemCancel.emit(event.detail);
+    };
+    handleToggleChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleCloseChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(event.detail);
+    };
     render() {
-        return (index.h(index.Host, { key: 'b5321fa13564d847a9432eb26e777d33f4b8412c', tabIndex: 0, class: { mobile: this.isTouchDevice } }, this.items.map((item, index$1) => (index.h("button", { tabIndex: 0, class: {
-                'menu-item': true,
-                'disabled': item.disabled,
-                'inactive': this.openChildMenuIndex !== null && this.openChildMenuIndex !== index$1,
-                'child-open': this.openChildMenuIndex === index$1,
-                'edit-mode': this.editingIndex === index$1,
-                'active': this.activeItemIndex === index$1,
-            }, style: {
-                pointerEvents: (this.editingIndex !== null && this.editingIndex !== index$1) || (this.openChildMenuIndex !== null && this.openChildMenuIndex !== index$1) ? 'none' : 'auto',
-            }, onClick: () => this.handleSelect(item) }, this.isViewMode(index$1) === true && (index.h("div", { class: "view-container" }, index.h("span", { class: "menu-item-label" }, item.label), index.h("div", null, item.children && item.children.length > 0 && (index.h("button", { class: "menu-item-button", tabIndex: 0, onClick: event => {
-                if (this.editingIndex !== null)
-                    return;
-                event.stopPropagation();
-                this.childMenuAnchor = this.openChildMenuIndex === index$1 ? null : event.currentTarget;
-                this.openChildMenuIndex = this.openChildMenuIndex === index$1 ? null : index$1;
-            } }, index.h("kritzel-icon", { name: "ellipsis-vertical", size: 16 }))), this.openChildMenuIndex === index$1 && (index.h("kritzel-portal", { anchor: this.childMenuAnchor, offsetY: 4, onClose: () => (this.openChildMenuIndex = null) }, index.h("kritzel-menu", { ref: el => {
-                this.childMenu = el;
-            }, style: { minWidth: '100px' }, items: item.children, parentIndex: index$1, parent: item, onClose: () => {
-                var _a;
-                this.openChildMenuIndex = null;
-                (_a = this.childMenuAnchor) === null || _a === void 0 ? void 0 : _a.focus();
-            } })))))), this.isViewMode(index$1) === false && (index.h("div", { class: "edit-container" }, index.h("input", { tabIndex: 0, ref: el => {
-                this.editInput = el;
-                requestAnimationFrame(() => {
-                    var _a, _b;
-                    (_a = this.editInput) === null || _a === void 0 ? void 0 : _a.focus();
-                    (_b = this.editInput) === null || _b === void 0 ? void 0 : _b.select();
-                });
-            }, type: "text", name: 'menu-item-' + index$1, value: item.label, onInput: e => (item.label = e.target.value) }), index.h("div", { style: { display: 'flex', gap: '8px' } }, index.h("div", { class: "menu-item-button", ref: el => (this.cancelButton = el), tabIndex: 0, onClick: () => {
-                var _a;
-                (_a = item.cancel) === null || _a === void 0 ? void 0 : _a.call(item, item);
-            } }, index.h("kritzel-icon", { name: "x", size: 16 })), index.h("div", { class: "menu-item-button", ref: el => (this.saveButton = el), tabIndex: 0, onClick: () => {
-                var _a;
-                (_a = item.save) === null || _a === void 0 ? void 0 : _a.call(item, item);
-            } }, index.h("kritzel-icon", { name: "check", size: 16 }))))))))));
+        return (index.h(index.Host, { key: 'c82bde4dc70fdc79df7471bb10396394f6c3870a', onClick: e => e.stopPropagation() }, this.openChildMenuItem && index.h("div", { key: '5fe0323aaa0da44abe736c6ef5e0516113c7820d', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map((item) => (index.h("kritzel-menu-item", { key: item.id, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
-    get host() { return index.getElement(this); }
-    static get watchers() { return {
-        "editingIndex": ["onEditingIndexChange"]
-    }; }
 };
 KritzelMenu.style = kritzelMenuCss;
 
-class KritzelHTMLHelper {
-    static getNumericValueFromStyle(element, property) {
-        const value = window.getComputedStyle(element).getPropertyValue(property);
-        return parseFloat(value) || 0;
+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 KritzelMenuItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.itemSelect = index.createEvent(this, "itemSelect");
+        this.itemSave = index.createEvent(this, "itemSave");
+        this.itemCancel = index.createEvent(this, "itemCancel");
+        this.itemToggleChildMenu = index.createEvent(this, "itemToggleChildMenu");
+        this.itemCloseChildMenu = index.createEvent(this, "itemCloseChildMenu");
     }
-    static getScrollableParent(element) {
-        var _a, _b;
-        if (!element) {
-            return window;
-        }
-        const parent = (_b = (_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.host) !== null && _b !== void 0 ? _b : 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;
+    get host() { return index.getElement(this); }
+    item;
+    onItemChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.isDirty = false;
+        }
+    }
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    isDirty = false;
+    inputRef;
+    componentDidLoad() {
+        if (this.item.isEditing && this.inputRef && !this.isDirty) {
+            this.inputRef.focus();
+            this.inputRef.select();
         }
-        return this.getScrollableParent(parent);
     }
-    static isElementInViewport(element) {
-        if (!element) {
-            return false;
+    componentDidUpdate() {
+        if (this.item.isEditing && this.inputRef && !this.isDirty) {
+            this.inputRef.focus();
+            this.inputRef.select();
         }
-        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;
     }
-}
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit({ item: this.item, parent: this.parent });
+    };
+    handleInputChange = (event) => {
+        event.stopPropagation();
+        const target = event.target;
+        this.item.label = target.value;
+        this.isDirty = true;
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemSave.emit(this.item);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.host.focus();
+        this.itemCancel.emit(this.item);
+    };
+    handleMenuToggle = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target });
+    };
+    handleMenuClose = () => {
+        this.itemCloseChildMenu.emit(this.item);
+    };
+    renderViewMode() {
+        return [
+            index.h("div", { class: "menu-item-content left" }, index.h("div", null, this.item.label)),
+            index.h("div", { class: "menu-item-content right" }, this.item.children &&
+                this.item.children.length > 0 && [
+                index.h("button", { id: "child-menu-toggle", class: "action-button", onClick: this.handleMenuToggle, disabled: this.item.isDisabled }, index.h("kritzel-icon", { name: "ellipsis-vertical", size: 16 })),
+                index.h("kritzel-portal", { anchor: this.item.childMenuAnchor, offsetY: 4, onClose: this.handleMenuClose }, index.h("kritzel-menu", { items: this.item.children, parent: this.item, onItemSelect: event => this.itemSelect.emit(event.detail), onItemSave: event => this.itemSave.emit(event.detail), onItemCancel: event => this.itemCancel.emit(event.detail), onClose: this.handleMenuClose })),
+            ]),
+        ];
+    }
+    renderEditMode() {
+        return [
+            index.h("div", { class: "menu-item-content left" }, index.h("input", { ref: el => (this.inputRef = el), type: "text", class: "edit-input", value: this.item.label, onInput: this.handleInputChange })),
+            index.h("div", { class: "menu-item-content right" }, index.h("div", { tabIndex: !this.isDirty && !this.item.isNewItem ? -1 : 0, class: { 'action-button': true, 'disabled': !this.isDirty && !this.item.isNewItem }, onClick: this.handleSave }, index.h("kritzel-icon", { name: "check", size: 16 })), index.h("div", { tabIndex: 0, class: "action-button", onClick: this.handleCancel }, index.h("kritzel-icon", { name: "x", size: 16 }))),
+        ];
+    }
+    render() {
+        return (index.h(index.Host, { key: '5440ed43726d00ab65e7f423f065c1a3fa74e39e', tabIndex: 0, class: {
+                'selected': this.item.isSelected,
+                'editing': this.item.isEditing,
+                'disabled': this.item.isDisabled,
+                'child-open': this.item.isChildMenuOpen,
+            }, onClick: this.handleItemSelect }, index.h("div", { key: '69542710179216a1df47bde5d474a72e4a07aa5b', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+    }
+    static get watchers() { return {
+        "item": ["onItemChange"]
+    }; }
+};
+KritzelMenuItem.style = kritzelMenuItemCss;
 
-const DEFAULT_OFFSET = 0;
-const MIN_LEFT_POSITION = 0;
-const Z_INDEX = '9005';
-const ID_PORTAL = 'portal';
 const KritzelPortal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.close = index.createEvent(this, "close");
-        this.autoFocus = true;
-        this.moved = false;
-        this.handleScroll = () => {
-            const isAnchorInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
-            if (!isAnchorInViewport) {
-                this.close.emit();
-                return;
-            }
-            this.calculatePosition();
-        };
     }
+    get host() { return index.getElement(this); }
+    anchor;
     anchorChanged(newValue) {
         if (newValue) {
+            this.openPortal();
             this.calculatePosition();
+            if (this.autoFocus) {
+                this.focusFirstElement();
+            }
+        }
+        else {
+            this.closePortal();
+        }
+    }
+    offsetX;
+    offsetY;
+    autoFocus = true;
+    close;
+    handleOutsideClick(event) {
+        event.stopPropagation();
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleKeyDown(event) {
+        event.stopPropagation();
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        if (event.key === 'Escape') {
+            this.anchor.focus();
+            this.close.emit();
+            this.closePortal();
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+        if (event.key === 'Enter') {
+            const activeElement = this.getDeepActiveElement();
+            if (activeElement?.click) {
+                event.preventDefault();
+                activeElement.click();
+            }
         }
     }
     handleResize() {
         this.calculatePosition();
     }
+    portal;
+    id = `portal-${index$1.ObjectHelper.generateUUID()}`;
+    defaultOffset = 0;
+    minLeft = 0;
+    focusFirstElement() {
+        requestAnimationFrame(() => {
+            this.firstFocusableElement?.focus?.();
+        });
+    }
+    getDeepActiveElement() {
+        let activeEl = document.activeElement;
+        while (activeEl?.shadowRoot?.activeElement) {
+            activeEl = activeEl.shadowRoot.activeElement;
+        }
+        return activeEl;
+    }
+    trapFocus(event) {
+        const focusableElements = this.getFocusableElements(this.host);
+        if (focusableElements.length === 0)
+            return;
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+        const activeElement = this.getDeepActiveElement();
+        if (event.shiftKey) {
+            /* shift + tab */
+            if (activeElement === firstFocusable) {
+                lastFocusable.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            /* tab */
+            if (activeElement === lastFocusable) {
+                firstFocusable.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    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);
+        return focusable[0] ?? firstAssigned;
+    }
+    get lastAddedPortal() {
+        const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
+        return portals.length ? portals[portals.length - 1] : null;
+    }
     calculateLeft() {
-        var _a;
         if (!this.anchor || !this.portal)
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetX) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET;
+        const offset = this.offsetX ?? this.defaultOffset;
         let left = refRect.left + offset;
-        const maxLeft = window.innerWidth - portalRect.width - MIN_LEFT_POSITION;
-        if (left < MIN_LEFT_POSITION)
-            left = MIN_LEFT_POSITION;
+        const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
+        if (left < this.minLeft)
+            left = this.minLeft;
         if (left > maxLeft)
             left = maxLeft;
         return Math.round(left + window.scrollX);
     }
     calculateTop() {
-        var _a;
         if (!this.anchor || !this.portal)
             return 0;
         const refRect = this.anchor.getBoundingClientRect();
         const portalRect = this.portal.getBoundingClientRect();
-        const offset = (_a = this.offsetY) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET;
+        const offset = this.offsetY ?? this.defaultOffset;
         let top = refRect.bottom + offset;
         if (top + portalRect.height > window.innerHeight) {
             top = refRect.top - portalRect.height - offset;
         }
         return Math.round(top + window.scrollY);
     }
-    createPortal() {
+    openPortal() {
         this.portal = document.createElement('div');
-        this.portal.setAttribute('id', ID_PORTAL);
-        this.portal.style.zIndex = Z_INDEX;
+        this.portal.setAttribute('id', this.id);
+        this.portal.style.zIndex = '1';
         this.portal.style.position = 'absolute';
         this.portal.style.top = '0px';
         this.portal.style.left = '0px';
+        this.portal.appendChild(this.host);
         document.body.append(this.portal);
     }
-    moveElementToPortal() {
-        this.portal.appendChild(this.element);
-        this.moved = true;
+    closePortal() {
+        const portal = document.getElementById(this.id);
+        if (!portal)
+            return;
+        document.body.removeChild(portal);
+        this.host.remove();
     }
     calculatePosition() {
         if (!this.anchor || !this.portal)
@@ -2817,89 +2879,91 @@ const KritzelPortal = class {
         this.portal.style.top = `${top}px`;
         this.portal.style.left = `${left}px`;
     }
-    componentWillLoad() {
-        this.createPortal();
-    }
-    componentDidLoad() {
-        var _a;
-        this.moveElementToPortal();
-        if (this.anchor) {
-            this.calculatePosition();
-            this.scrollableParent = KritzelHTMLHelper.getScrollableParent(this.anchor);
-            (_a = this.scrollableParent) === null || _a === void 0 ? void 0 : _a.addEventListener('scroll', this.handleScroll);
-        }
-    }
-    disconnectedCallback() {
-        var _a;
-        this.moved ? this.portal.remove() : (this.moved = true);
-        (_a = this.scrollableParent) === null || _a === void 0 ? void 0 : _a.removeEventListener('scroll', this.handleScroll);
-    }
     render() {
-        return (index.h(index.Host, { key: 'e39525c3e9ddbf738b63ac0c08d8c1e2264783b1', ref: el => (this.element = el) }, index.h("slot", { key: '95202c5bea32c77dc1dde0a12a58ac9bcebd8812' })));
+        return (index.h(index.Host, { key: '968f0360b9396da16f5b970293ba20f8a1dcc09a', style: { display: this.anchor ? 'block' : 'none' } }, index.h("slot", { key: '0fe1569bde60a834e9226d7c838d113a64151164' })));
     }
     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-controls-padding, 4px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);gap:var(--kritzel-context-menu-item-gap, 4px)}:host(:focus){outline:none}:host(.mobile){--kritzel-context-menu-item-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-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 12px);font-size:var(--kritzel-context-menu-item-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{outline:none;background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-context-menu-item-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-controls-divider-width, 1px);height:24px;background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}";
+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 KritzelSplitButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.buttonClick = index.createEvent(this, "buttonClick");
-        this.optionSelect = index.createEvent(this, "optionSelect");
-        this.menuOpened = index.createEvent(this, "menuOpened");
-        this.menuClosed = index.createEvent(this, "menuClosed");
-        this.dropdownIcon = 'chevron-down';
-        this.options = [];
-        this.disabled = false;
-        this.activeItemIndex = null;
-        this.editingIndex = null;
-        this.isMenuOpen = false;
-        this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
-        this.handleDocumentClick = (event) => {
-            const path = (event.composedPath && event.composedPath()) || [];
-            const clickedInside = path.some(node => (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-SPLIT-BUTTON' || (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-MENU');
-            if (!clickedInside) {
-                this.closeMenu();
-            }
-            else if (this.isMenuOpen) {
-                document.addEventListener('click', this.handleDocumentClick, { once: true });
-            }
-        };
-        this.toggleMenu = () => {
-            if (this.isMenuOpen) {
-                this.closeMenu();
-            }
-            else {
-                this.openMenu();
-            }
-        };
-        this.handleButtonClick = () => {
-            if (!this.disabled) {
-                this.buttonClick.emit();
-            }
-        };
+        this.itemSelect = index.createEvent(this, "itemSelect");
+        this.itemSave = index.createEvent(this, "itemSave");
+        this.itemCancel = index.createEvent(this, "itemCancel");
+        this.itemToggleChildMenu = index.createEvent(this, "itemToggleChildMenu");
+        this.itemCloseChildMenu = index.createEvent(this, "itemCloseChildMenu");
+        this.close = index.createEvent(this, "close");
     }
-    async openMenu() {
-        if (this.disabled || this.isMenuOpen)
+    get host() { return index.getElement(this); }
+    buttonIcon = 'plus';
+    dropdownIcon = 'chevron-down';
+    items = [];
+    mainButtonDisabled = false;
+    menuButtonDisabled = false;
+    buttonClick;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    close;
+    isMenuOpen = false;
+    isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+    anchorElement;
+    splitMenuButtonRef;
+    menuRef;
+    async open() {
+        if (this.isMenuOpen)
             return;
-        this.isMenuOpen = true;
-        this.menuOpened.emit();
-        document.addEventListener('click', this.handleDocumentClick, { once: true });
+        this.openMenu(new MouseEvent('click'));
     }
-    async closeMenu() {
-        if (this.disabled || !this.isMenuOpen)
-            return;
+    handleButtonClick = (event) => {
+        event.stopPropagation();
+        this.buttonClick.emit();
+    };
+    toggleMenu = (event) => {
+        event.stopPropagation();
+        if (this.isMenuOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu(event);
+        }
+    };
+    openMenu = (event) => {
+        event.stopPropagation();
+        this.isMenuOpen = true;
+        this.anchorElement = this.host;
+    };
+    closeMenu = () => {
         this.isMenuOpen = false;
-        this.menuClosed.emit();
-        this.host.focus();
-    }
+        this.anchorElement = null;
+        this.close.emit();
+    };
+    handleItemSelect = event => {
+        this.itemSelect.emit(event.detail);
+    };
+    handleItemSave = event => {
+        this.itemSave.emit(event.detail);
+    };
+    handleItemCancel = event => {
+        this.itemCancel.emit(event.detail);
+    };
+    handleItemToggleChildMenu = event => {
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleItemCloseChildMenu = event => {
+        this.itemCloseChildMenu.emit(event.detail);
+    };
     render() {
-        return (index.h(index.Host, { key: '1c0010ff46e3e6ac4753f332e683752f82bfb699', tabIndex: 0, class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'b9e60cea56197641c15a58a3899d09a604a0ca20', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && index.h("kritzel-icon", { key: '3bd9a97e9511eb734665bd45e646f68d9cdcafc5', name: this.buttonIcon }), this.buttonText && (index.h("span", { key: 'f4a7bbd42bfdf8b748167b439a25ec7cc9f72ecf' }, this.buttonText, " (", this.options.length, ")"))), index.h("div", { key: 'bd6ce66c2debee87fa78904730a7fa09bcfe6514', class: "split-divider" }), index.h("button", { key: '5a7b918856ebfc77dd8aa290acb62f4fceaff2b3', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, index.h("kritzel-icon", { key: '28ab4da8d1c4703f0df6551dd85791528b6af793', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '72746c9acfcbdc56f2a053662d3f1e8596d71eb9', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (index.h("kritzel-menu", { key: '98af211f4dbc21c4a5fd7223c9441a54451b38a2', style: { maxHeight: '300px', width: '180px' }, items: this.options, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onClose: () => this.closeMenu() })))));
+        return (index.h(index.Host, { key: 'be79d702d2c400d1feedeb89eca6fc78559f30f3', class: { mobile: this.isTouchDevice } }, index.h("button", { key: 'e4a74c56c122ea617f44f1d7e31672d1f913de46', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && index.h("kritzel-icon", { key: '44bd79270e7cc4a17b45133b5c513642013e5a66', name: this.buttonIcon })), index.h("div", { key: '2392e8c6f75510c529585a69c861b2fcafdef5ce', class: "split-divider" }), index.h("button", { key: 'bcdf61c2a195271771479de385db3b4982f6cad2', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, index.h("kritzel-icon", { key: '90383a8690111c97054fb8ac93b91cb6644de137', name: this.dropdownIcon })), index.h("kritzel-portal", { key: 'c6a4c32ab731fede13e1382bff9dbd68794b1103', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, index.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 }))));
     }
-    get host() { return index.getElement(this); }
 };
 KritzelSplitButton.style = kritzelSplitButtonCss;
 
@@ -2909,15 +2973,16 @@ const KritzelStrokeSize = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.sizeChange = index.createEvent(this, "sizeChange");
-        this.sizes = [4, 6, 8, 12, 16, 24];
-        this.selectedSize = null;
     }
+    sizes = [4, 6, 8, 12, 16, 24];
+    selectedSize = null;
+    sizeChange;
     handleSizeClick(size) {
         this.selectedSize = size;
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: '0185d3243c35c49169324c98f87df6a286fc3d31' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: 'f9f0fe49963655a2beeffe5c369ccbe018c8aa5e' }, this.sizes.map(size => (index.h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-color", { value: '#000000', size: size }))))));
@@ -2931,13 +2996,15 @@ const MOBILE_BREAKPOINT = 768;
 const KritzelTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.isVisible = false;
-        this.arrowSize = 8;
-        this.offsetY = 24;
-        this.positionX = 0;
-        this.arrowOffset = '0px';
-        this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
     }
+    isVisible = false;
+    anchorElement;
+    arrowSize = 8;
+    offsetY = 24;
+    get el() { return index.getElement(this); }
+    positionX = 0;
+    arrowOffset = '0px';
+    isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
     handleWindowResize() {
         this.isMobileView = window.innerWidth < MOBILE_BREAKPOINT;
         this.calculateAdjustedPosition();
@@ -2950,10 +3017,9 @@ const KritzelTooltip = class {
         this.calculateAdjustedPosition();
     }
     calculateAdjustedPosition() {
-        var _a;
         if (this.isVisible && this.anchorElement) {
             const anchorRect = this.anchorElement.getBoundingClientRect();
-            const tooltipContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.tooltip-content');
+            const tooltipContent = this.el.shadowRoot?.querySelector('.tooltip-content');
             if (!this.isMobileView) {
                 this.positionX = anchorRect.left + anchorRect.width / 2;
                 this.arrowOffset = `calc(${50}% - ${this.arrowSize}px)`;
@@ -2966,23 +3032,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7610e8185e037813cc363daa3212a4164a20daaf', style: {
+        return (index.h(index.Host, { key: '6eb67bcfd08234affe3724dff4d94ddf7907a1a7', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: !this.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, index.h("div", { key: 'bd5c1f0f7ff3afddfcf2469277189d026e79b453', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: '547e5a8fcb8131225461881a1ad0125fa4b0d55b' }), index.h("div", { key: 'de1d30c31667a81a36873d32bec20fcc911ec89f', class: "tooltip-arrow-wrapper", style: {
+            } }, index.h("div", { key: '9314b30b71200776e3728027b2ac7332cf4ab669', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: '80cb8d0a8a91d9c816580cedc02fc9382fb07f8c' }), index.h("div", { key: '87fb2399463a0eb7beb1ca0f2c2867d8ff033f3a', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, index.h("div", { key: 'ebbf83bd4d35e252b0258a7c81ebcef48ac10004', class: "tooltip-arrow", style: {
+            } }, index.h("div", { key: 'fc3953ad9b6aa5a4b2228653573fc3a7e37c0487', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), index.h("div", { key: '918ca46c438657dc4f72ccc73f81d58076d637c5', class: "tooltip-arrow-rect", style: {
+            } }), index.h("div", { key: '5b8e4e3eb90c4c47c47fa47dc96e4149794e1732', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -2990,7 +3056,6 @@ const KritzelTooltip = class {
                 bottom: `${this.arrowSize * 2}px`,
             } })))));
     }
-    get el() { return index.getElement(this); }
 };
 KritzelTooltip.style = kritzelTooltipCss;
 
@@ -3003,6 +3068,9 @@ const KritzelUtilityPanel = class {
         this.redo = index.createEvent(this, "redo");
         this.delete = index.createEvent(this, "delete");
     }
+    undo;
+    redo;
+    delete;
     handleUndo(event) {
         if (event.cancelable) {
             event.preventDefault();
@@ -3016,7 +3084,7 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'cf7b5c501b6535fda22b17ea218e90bd60223c6e' }, index.h("button", { key: '05db2cee7f2e191674167ef503e70718200bf904', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '10412c038b9d4e66851c8a0c9b51b99607bac397', name: "undo" })), index.h("button", { key: 'edf0289de8ce5cddd9341bc1855eae095274226c', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '46263e3d3f166b224c9a18ba383085e020fac51a', name: "redo" })), index.h("div", { key: '3a6c0eca21f44887683d6308ca5741b095eceb77', class: "utility-separator" }), index.h("button", { key: 'ced83e0c47fc920edabdc5b3379a8805f1827374', class: "utility-button" }, index.h("kritzel-icon", { key: 'd49c6412d778d34fe21e86482f2114631621106a', name: "delete", onClick: () => this.delete.emit() }))));
+        return (index.h(index.Host, { key: '134058928a840d11fdc39849b35f08b21840fc0c' }, index.h("button", { key: '8d80cb496983b0709c06bacb12ca6819789aa47d', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: 'c6733ef61ab6a272f80a580243fdd15063b8bf0c', name: "undo" })), index.h("button", { key: 'dc6147152bccd43ea54b9af20d019d305e550987', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '3ab8bced0f398a8d5f053cb0f388199fd2148bfc', name: "redo" })), index.h("div", { key: 'ebbfd25fb69faf2b669de20dc74a3dcabc01f489', class: "utility-separator" }), index.h("button", { key: 'd86caf8a7f2c2bc899b09871f555973137693eb9', class: "utility-button" }, index.h("kritzel-icon", { key: 'e1b4e9eef3d3ab2a2ddd1688818d4bcd2d7226c1', name: "delete", onClick: () => this.delete.emit() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;
@@ -3028,55 +3096,20 @@ const KritzelWorkspaceManager = class {
         index.registerInstance(this, hostRef);
         this.isWorkspaceManagerReady = index.createEvent(this, "isWorkspaceManagerReady");
         this.workspaceChange = index.createEvent(this, "workspaceChange");
-        this.workspaces = [];
-        this.editingIndex = null;
-        this.newWorkspace = null;
-        this.kritzelEngine = null;
-        this.handleNewWorkspace = async () => {
-            var _a;
-            await ((_a = this.splitButtonRef) === null || _a === void 0 ? void 0 : _a.openMenu());
-            requestAnimationFrame(() => {
-                this.newWorkspace = new KritzelWorkspace(index$1.ObjectHelper.generateUUID(), 'New Workspace');
-                this.editingIndex = 0;
-            });
-        };
-        this.handleMenuClosed = () => {
-            this.editingIndex = null;
-            this.newWorkspace = null;
-        };
-        this.handleSave = async (item) => {
-            const workspace = item.value;
-            const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
-            if (this.newWorkspace) {
-                await this.kritzelEngine.createWorkspace(updatedWorkspace);
-                this.editingIndex = null;
-                this.newWorkspace = null;
-                this.selectWorkspace(updatedWorkspace);
-            }
-            else {
-                await this.kritzelEngine.updateWorkspace(updatedWorkspace);
-                this.editingIndex = null;
-                this.newWorkspace = null;
-            }
-        };
-        this.handleRename = (index) => {
-            this.editingIndex = index;
-        };
-        this.handleDelete = async (workspaceToDelete) => {
-            var _a;
-            await this.kritzelEngine.deleteWorkspace(workspaceToDelete);
-            if (((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === workspaceToDelete.id) {
-                const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;
-                this.selectWorkspace(newActiveWorkspace);
-            }
-        };
     }
+    get host() { return index.getElement(this); }
+    activeWorkspace;
+    workspaces = [];
+    isWorkspaceManagerReady;
+    workspaceChange;
+    childMenuAnchor = null;
+    openChildMenuItem = null;
+    newWorkspace = null;
+    editingItemId = null;
+    kritzelEngineRef = null;
+    splitButtonRef;
     get sortedWorkspaces() {
-        const uniqueWorkspaces = [...new Map(this.workspaces.map(workspace => [workspace.id, workspace])).values()];
-        return [this.newWorkspace, ...uniqueWorkspaces].filter(ws => ws !== null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
-    }
-    get activeItemIndex() {
-        return this.sortedWorkspaces.findIndex(ws => { var _a; return ws.id === ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id); });
+        return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
     }
     async componentWillLoad() {
         await this.initializeEngine();
@@ -3084,45 +3117,100 @@ const KritzelWorkspaceManager = class {
     }
     async initializeEngine() {
         await customElements.whenDefined('kritzel-engine');
-        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
-        if (!this.kritzelEngine) {
+        this.kritzelEngineRef = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngineRef) {
             throw new Error('kritzel-engine not found in parent element.');
         }
     }
-    handleSelect(workspace) {
-        this.selectWorkspace(workspace);
-    }
-    selectWorkspace(workspace) {
-        debugger;
-        if (this.editingIndex !== null)
+    async select(item, parent) {
+        if (this.editingItemId) {
+            return;
+        }
+        if (item.action) {
+            item.action(item, parent);
             return;
-        this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
-        this.workspaceChange.emit(workspace);
+        }
+        this.workspaceChange.emit(item.value);
+    }
+    async add() {
+        this.newWorkspace = new index$1.KritzelWorkspace(index$1.ObjectHelper.generateUUID(), 'New Workspace');
+        this.editingItemId = this.newWorkspace.id;
+        await this.splitButtonRef.open();
+    }
+    edit(item) {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+        requestAnimationFrame(() => {
+            this.editingItemId = item.id;
+        });
+    }
+    async save(item) {
+        if (this.newWorkspace) {
+            await this.kritzelEngineRef.createWorkspace({ ...item.value, name: item.label });
+            this.workspaceChange.emit(this.newWorkspace);
+        }
+        else {
+            await this.kritzelEngineRef.updateWorkspace({ ...item.value, name: item.label });
+        }
+        this.editingItemId = null;
+        this.newWorkspace = null;
+    }
+    cancel() {
+        this.newWorkspace = null;
+        this.editingItemId = null;
+    }
+    async delete(item) {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+        await this.kritzelEngineRef.deleteWorkspace(item.value);
+    }
+    toggleChildMenu(item, anchor) {
+        this.openChildMenuItem = item;
+        this.childMenuAnchor = anchor;
+    }
+    closeChildMenu() {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+    }
+    closeMenu() {
+        this.cancel();
+        this.closeChildMenu();
     }
     render() {
-        const workspaceSelectionOptions = this.sortedWorkspaces.map((ws, index) => ({
-            label: ws.name,
-            value: ws,
-            select: () => this.handleSelect(ws),
-            cancel: this.handleMenuClosed,
-            save: this.handleSave,
-            children: [
-                {
-                    label: 'Rename',
-                    value: 'rename',
-                    select: () => this.handleRename(index),
-                },
-                {
-                    label: 'Delete',
-                    value: 'delete',
-                    disabled: this.sortedWorkspaces.length <= 1,
-                    select: () => this.handleDelete(ws),
-                },
-            ],
-        }));
-        return (index.h(index.Host, { key: '4d060aee853a47ea451f707c6de345b6efcbd678' }, index.h("kritzel-split-button", { key: 'cb52b41b25c7ddc8584e96a2151efc6406166e99', ref: el => (this.splitButtonRef = el), buttonIcon: "plus", options: workspaceSelectionOptions, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onButtonClick: this.handleNewWorkspace, onMenuClosed: this.handleMenuClosed })));
+        console.log('render workspace manager');
+        const menuItems = this.sortedWorkspaces
+            .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
+            .filter(ws => ws !== null)
+            .map(ws => {
+            return {
+                id: ws.id,
+                label: ws.name,
+                value: ws,
+                isEditing: this.editingItemId === ws.id,
+                isSelected: this.activeWorkspace?.id === ws.id,
+                isNewItem: this.newWorkspace?.id === ws.id,
+                isChildMenuOpen: this.openChildMenuItem?.id === ws.id,
+                childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,
+                children: [
+                    {
+                        id: `${ws.id}-rename`,
+                        label: 'Rename',
+                        value: 'rename',
+                        action: (_item, parent) => this.edit(parent),
+                    },
+                    {
+                        id: `${ws.id}-delete`,
+                        label: 'Delete',
+                        value: 'delete',
+                        action: (_item, parent) => this.delete(parent),
+                    },
+                ],
+            };
+        });
+        return (index.h(index.Host, null, index.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();
+            } })));
     }
-    get host() { return index.getElement(this); }
 };
 KritzelWorkspaceManager.style = kritzelWorkspaceManagerCss;
 
@@ -3142,10 +3230,11 @@ exports.kritzel_font_family = KritzelFontFamily;
 exports.kritzel_font_size = KritzelFontSize;
 exports.kritzel_icon = KritzelIcon;
 exports.kritzel_menu = KritzelMenu;
+exports.kritzel_menu_item = KritzelMenuItem;
 exports.kritzel_portal = KritzelPortal;
 exports.kritzel_split_button = KritzelSplitButton;
 exports.kritzel_stroke_size = KritzelStrokeSize;
 exports.kritzel_tooltip = KritzelTooltip;
 exports.kritzel_utility_panel = KritzelUtilityPanel;
 exports.kritzel_workspace_manager = KritzelWorkspaceManager;
-//# 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-portal.kritzel-split-button.kritzel-stroke-size.kritzel-tooltip.kritzel-utility-panel.kritzel-workspace-manager.entry.cjs.js.map
+//# 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.cjs.js.map