kritzel-stencil 0.0.128 → 0.0.130

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$1 = require('./index-CfXjPLHb.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)}";
 
@@ -204,14 +204,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"]
@@ -243,14 +243,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;
@@ -261,7 +261,7 @@ class KritzelDevicesHelper {
     }
 }
 
-const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}:host(.mobile) .kritzel-control:hover{background-color:unset}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}:host(.mobile) .kritzel-control:active{background-color:unset}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
+const kritzelControlsCss = ":host{display:flex;flex-direction:column;user-select:none}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:10000;position:relative}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;outline:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-divider{width:var(--kritzel-controls-divider-width, 1px);height:var(--kritzel-controls-divider-height, 24px);background-color:var(--kritzel-controls-divider-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;width:40px;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:pointer}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{position:fixed;bottom:66px;left:50%;transform:translateX(-50%);z-index:10001}";
 
 const KritzelControls = class {
     constructor(hostRef) {
@@ -356,13 +356,13 @@ const KritzelControls = class {
     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: {
+        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 => {
+            }, 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: '9e568217b23632d73b051350d7f795f0cd7ab9ed', class: "kritzel-controls" }, this.controls.map(control => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             if (control.type === 'tool') {
                 return (index.h("button", { class: {
@@ -618,7 +618,7 @@ 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) {
@@ -710,6 +710,7 @@ const KritzelEditor = class {
         this.isControlsReady = false;
         this.isWorkspaceManagerReady = false;
         this.workspaces = [];
+        this.isVirtualKeyboardOpen = false;
     }
     onIsEngineReady(newValue) {
         if (newValue && this.isControlsReady) {
@@ -755,6 +756,7 @@ const KritzelEditor = class {
     }
     componentDidLoad() {
         this.registerCustomSvgIcons();
+        this.listenForMobileKeyboard();
     }
     async checkIsReady() {
         await customElements.whenDefined('kritzel-editor');
@@ -776,8 +778,14 @@ 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 {
@@ -1087,128 +1095,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,
@@ -1500,6 +1393,48 @@ class KritzelWorkspace {
     }
 }
 
+class KritzelObjectMap {
+    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 {
     get history() {
         return this._history;
@@ -1511,10 +1446,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);
@@ -1535,14 +1470,7 @@ class KritzelStore {
         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([
@@ -1574,13 +1502,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 +1599,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 +1725,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);
@@ -2307,8 +2229,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() {
@@ -2337,19 +2259,19 @@ const KritzelEngine = class {
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (index.h(index.Host, { key: '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: {
+        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: ", (_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: 'af94b5061f0803588fece6cccdf540f46f13ca05' }, "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: '89c0d21ce94f4eda72153554fadbd6942e785edc' }, "TranslateX: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.translateX), index.h("div", { key: '340b5165265241972a7a940268c7940063ba8c12' }, "TranslateY: ", (_f = this.store.state) === null || _f === void 0 ? void 0 :
+            _f.translateY), index.h("div", { key: '428054b3ea4a1c327f03d6b37bfe6331dea6c57b' }, "ViewportWidth: ", (_g = this.store.state) === null || _g === void 0 ? void 0 :
+            _g.viewportWidth), index.h("div", { key: 'd67420ef633627413066a28b8ef9ac43c520015d' }, "ViewportHeight: ", (_h = this.store.state) === null || _h === void 0 ? void 0 :
+            _h.viewportHeight), index.h("div", { key: 'dedf9eb89c79fa496f7b6d0df9c646898f66b3d4' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '59bb8416941fd84305f2892f24098f6f4a084401' }, "Scale: ", (_j = this.store.state) === null || _j === void 0 ? void 0 :
+            _j.scale), index.h("div", { key: '6705a4cec22e4e33f75e296e17bc2952a3d1cba7' }, "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: 'ca22e0a377a11fdca851b38f1bf425648cd3b9dd' }, "HasViewportChanged: ", ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: '57508b9ee24a5af631e6bb1eace404c39af14f82' }, "IsEnabled: ", ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.isEnabled) ? 'true' : 'false'), index.h("div", { key: 'f6cea367b5007f767afb25a033215abda734de9d' }, "IsScaling: ", ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.isScaling) ? 'true' : 'false'), index.h("div", { key: '4386ef749facd2e54da7f58aa2713b87ed76f2df' }, "IsPanning: ", ((_q = this.store.state) === null || _q === void 0 ? void 0 : _q.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: ", (_r = this.store.state) === null || _r === void 0 ? void 0 :
+            _r.pointerX), index.h("div", { key: '4f21199328ffadddcc58b7d6b102a89e5079f676' }, "PointerY: ", (_s = this.store.state) === null || _s === void 0 ? void 0 :
+            _s.pointerY), index.h("div", { key: 'ac705f38cb323b8dc8cbf95f875657c5dec5c9ae' }, "SelectedObjects: ", ((_t = this.store.state.selectionGroup) === null || _t === void 0 ? void 0 : _t.objects.length) || 0)), index.h("div", { key: '2ca55c53246e64520af6720a3f87d2357295ca7f', 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 = this.store.state.objectsMap.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: {
@@ -2450,7 +2372,7 @@ const KritzelEngine = class {
                         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: {
+            }), index.h("svg", { key: '0098f1b8233d45f49dc8bdcc13c08f20c04b65e1', 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(),
                 left: '0',
@@ -2460,7 +2382,7 @@ const KritzelEngine = class {
                 transform: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.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: (_3 = this.store.state.currentPath) === null || _3 === void 0 ? void 0 : _3.viewBox }, index.h("path", { key: '08310713fa8f2f1f695b1b61bb2b6e5a5f77f192', 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: '2529447e26ba02689303be39cc593dfafc25b96c', 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: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
@@ -2472,7 +2394,7 @@ const KritzelEngine = class {
                     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.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 })));
+            } })), ((_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: '7c10277160eb1bc51581e4dfbdd4d0cdf626ed8c', store: this.store })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -2588,183 +2510,306 @@ 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}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(.inactive):not(.active):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):not(.inactive):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-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-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item-button:focus{background-color:var(--kritzel-context-menu-item-hover-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-item-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.childMenuAnchor = null;
-        this.cancelButton = null;
-        this.saveButton = null;
-    }
-    onEditingIndexChange(newValue) {
-        if (newValue === null) {
-            this.openChildMenuIndex = null;
-            this.editInput = undefined;
-            return;
-        }
-    }
-    handleWindowClick(event) {
-        if (this.openChildMenuIndex === null) {
-            return;
-        }
-        const target = event.target;
-        if (!this.host.contains(target)) {
-            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();
-        }
+        this.selectedIndex = null;
+        this.onOverlayClick = (event) => {
+            event.stopPropagation();
+            this.itemCloseChildMenu.emit(this.openChildMenuItem);
+        };
+        this.handleItemSelect = (event) => {
+            event.stopPropagation();
+            this.itemSelect.emit(event.detail);
+        };
+        this.handleSave = (event) => {
+            event.stopPropagation();
+            this.itemSave.emit(event.detail);
+        };
+        this.handleCancel = (event) => {
+            event.stopPropagation();
+            this.itemCancel.emit(event.detail);
+        };
+        this.handleToggleChildMenu = (event) => {
+            event.stopPropagation();
+            this.itemToggleChildMenu.emit(event.detail);
+        };
+        this.handleCloseChildMenu = (event) => {
+            event.stopPropagation();
+            this.itemCloseChildMenu.emit(event.detail);
+        };
     }
-    handleEnter(event) {
-        var _a;
-        if (event.key === 'Enter') {
-            if (this.editingIndex !== null) {
-                (_a = this.saveButton) === null || _a === void 0 ? void 0 : _a.click();
-                return;
-            }
+    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);
     }
     render() {
-        return (index.h(index.Host, { key: '6d98c1d40c1af36b7b36c45ddc96fb89ab6ebdca', tabIndex: 0 }, 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,
-            }, 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", { 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("button", { ref: el => (this.cancelButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_a = item.cancel) === null || _a === void 0 ? void 0 : _a.call(item, item); } }, index.h("kritzel-icon", { name: "x", size: 16 })), index.h("button", { ref: el => (this.saveButton = el), class: "menu-item-button", tabIndex: 0, onClick: () => { var _a; return (_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}.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");
+        this.parent = null;
+        this.isDirty = false;
+        this.handleItemSelect = (event) => {
+            event.stopPropagation();
+            this.itemSelect.emit({ item: this.item, parent: this.parent });
+        };
+        this.handleInputChange = (event) => {
+            event.stopPropagation();
+            const target = event.target;
+            this.item.label = target.value;
+            this.isDirty = true;
+        };
+        this.handleSave = (event) => {
+            event.stopPropagation();
+            this.host.focus();
+            this.itemSave.emit(this.item);
+        };
+        this.handleCancel = (event) => {
+            event.stopPropagation();
+            this.host.focus();
+            this.itemCancel.emit(this.item);
+        };
+        this.handleMenuToggle = (event) => {
+            event.stopPropagation();
+            this.itemToggleChildMenu.emit({ item: this.item, childMenuAnchor: event.target });
+        };
+        this.handleMenuClose = () => {
+            this.itemCloseChildMenu.emit(this.item);
+        };
     }
-    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;
+    onItemChange(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.isDirty = false;
         }
-        return this.getScrollableParent(parent);
     }
-    static isElementInViewport(element) {
-        if (!element) {
-            return false;
+    componentDidLoad() {
+        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;
+    }
+    componentDidUpdate() {
+        if (this.item.isEditing && this.inputRef && !this.isDirty) {
+            this.inputRef.focus();
+            this.inputRef.select();
         }
-        const parentRect = scrollableParent.getBoundingClientRect();
-        return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
     }
-}
+    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()));
+    }
+    get host() { return index.getElement(this); }
+    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();
-        };
+        this.id = `portal-${index$1.ObjectHelper.generateUUID()}`;
+        this.defaultOffset = 0;
+        this.minLeft = 0;
     }
     anchorChanged(newValue) {
         if (newValue) {
+            this.openPortal();
             this.calculatePosition();
+            if (this.autoFocus) {
+                this.focusFirstElement();
+            }
+        }
+        else {
+            this.closePortal();
+        }
+    }
+    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 === null || activeElement === void 0 ? void 0 : activeElement.click) {
+                event.preventDefault();
+                activeElement.click();
+            }
         }
     }
     handleResize() {
         this.calculatePosition();
     }
+    focusFirstElement() {
+        requestAnimationFrame(() => {
+            var _a, _b;
+            (_b = (_a = this.firstFocusableElement) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
+        });
+    }
+    getDeepActiveElement() {
+        var _a;
+        let activeEl = document.activeElement;
+        while ((_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.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() {
+        var _a, _b;
+        const slotEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const firstAssigned = slotEl === null || slotEl === void 0 ? void 0 : slotEl.assignedElements({ flatten: true })[0];
+        if (!firstAssigned)
+            return null;
+        const focusable = this.getFocusableElements(firstAssigned);
+        return (_b = focusable[0]) !== null && _b !== void 0 ? _b : 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 = (_a = this.offsetX) !== null && _a !== void 0 ? _a : 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);
@@ -2775,25 +2820,29 @@ const KritzelPortal = class {
             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 = (_a = this.offsetY) !== null && _a !== void 0 ? _a : 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)
@@ -2803,86 +2852,80 @@ 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' })));
     }
+    get host() { return index.getElement(this); }
     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}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-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%))}: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.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.buttonIcon = 'plus';
         this.dropdownIcon = 'chevron-down';
-        this.options = [];
-        this.disabled = false;
-        this.activeItemIndex = null;
-        this.editingIndex = null;
+        this.items = [];
+        this.mainButtonDisabled = false;
+        this.menuButtonDisabled = false;
         this.isMenuOpen = false;
-        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.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
+        this.handleButtonClick = (event) => {
+            event.stopPropagation();
+            this.buttonClick.emit();
         };
-        this.toggleMenu = () => {
+        this.toggleMenu = (event) => {
+            event.stopPropagation();
             if (this.isMenuOpen) {
                 this.closeMenu();
             }
             else {
-                this.openMenu();
+                this.openMenu(event);
             }
         };
-        this.handleButtonClick = () => {
-            if (!this.disabled) {
-                this.buttonClick.emit();
-            }
+        this.openMenu = (event) => {
+            event.stopPropagation();
+            this.isMenuOpen = true;
+            this.anchorElement = this.host;
+        };
+        this.closeMenu = () => {
+            this.isMenuOpen = false;
+            this.anchorElement = null;
+            this.close.emit();
+        };
+        this.handleItemSelect = event => {
+            this.itemSelect.emit(event.detail);
+        };
+        this.handleItemSave = event => {
+            this.itemSave.emit(event.detail);
+        };
+        this.handleItemCancel = event => {
+            this.itemCancel.emit(event.detail);
+        };
+        this.handleItemToggleChildMenu = event => {
+            this.itemToggleChildMenu.emit(event.detail);
+        };
+        this.handleItemCloseChildMenu = event => {
+            this.itemCloseChildMenu.emit(event.detail);
         };
     }
-    async openMenu() {
-        if (this.disabled || this.isMenuOpen)
-            return;
-        this.isMenuOpen = true;
-        this.menuOpened.emit();
-        document.addEventListener('click', this.handleDocumentClick, { once: true });
-    }
-    async closeMenu() {
-        if (this.disabled || !this.isMenuOpen)
+    async open() {
+        if (this.isMenuOpen)
             return;
-        this.isMenuOpen = false;
-        this.menuClosed.emit();
-        this.host.focus();
+        this.openMenu(new MouseEvent('click'));
     }
     render() {
-        return (index.h(index.Host, { key: 'cf133b2867dffe6b9d70259c7d44b86342411d38', tabIndex: 0 }, index.h("button", { key: '3044cd9cbe02dde919a276b9f1d8f1f24b8514e9', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && index.h("kritzel-icon", { key: '4ed314f7288df567bb35a909c4919cf353788dd2', name: this.buttonIcon }), this.buttonText && (index.h("span", { key: '68b2148200e4698468aae137d16a4b5f17764f9f' }, this.buttonText, " (", this.options.length, ")"))), index.h("div", { key: '5047a2aea1d31e80fba8f6350e4b64572198c87d', class: "split-divider" }), index.h("button", { key: 'd7b33d9c717553d7cff3c3d2fafe90ce9dce1e67', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, index.h("kritzel-icon", { key: 'a3d485aee5e9843c2d07d367a0d5743bfc8f3d5c', name: this.dropdownIcon })), index.h("kritzel-portal", { key: '2bb8f5c58884e6c73d3d7025a8e6efce770ab039', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (index.h("kritzel-menu", { key: '3f2bb51a43ec78ff8664d5f625afa21cf9ecfb8c', 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); }
 };
@@ -2902,7 +2945,7 @@ const KritzelStrokeSize = class {
         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 }))))));
@@ -2951,23 +2994,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`,
@@ -3001,7 +3044,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;
@@ -3014,52 +3057,14 @@ const KritzelWorkspaceManager = class {
         this.isWorkspaceManagerReady = index.createEvent(this, "isWorkspaceManagerReady");
         this.workspaceChange = index.createEvent(this, "workspaceChange");
         this.workspaces = [];
-        this.editingIndex = null;
+        this.childMenuAnchor = null;
+        this.openChildMenuItem = 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.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);
-            }
-        };
+        this.editingItemId = null;
+        this.kritzelEngineRef = null;
     }
     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();
@@ -3067,42 +3072,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) {
-        if (this.editingIndex !== null)
+    async select(item, parent) {
+        if (this.editingItemId) {
             return;
-        this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
-        this.workspaceChange.emit(workspace);
+        }
+        if (item.action) {
+            item.action(item, parent);
+            return;
+        }
+        this.workspaceChange.emit(item.value);
+    }
+    async add() {
+        this.newWorkspace = new 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(Object.assign(Object.assign({}, item.value), { name: item.label }));
+            this.workspaceChange.emit(this.newWorkspace);
+        }
+        else {
+            await this.kritzelEngineRef.updateWorkspace(Object.assign(Object.assign({}, 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: '1703451717d5583d6520edfbcdbe38a5b8f6840f' }, index.h("kritzel-split-button", { key: 'efd5d9b714ee72b23fd28c9b20ea6985957fe9b9', 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 => {
+            var _a, _b, _c, _d;
+            return {
+                id: ws.id,
+                label: ws.name,
+                value: ws,
+                isEditing: this.editingItemId === ws.id,
+                isSelected: ((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === ws.id,
+                isNewItem: ((_b = this.newWorkspace) === null || _b === void 0 ? void 0 : _b.id) === ws.id,
+                isChildMenuOpen: ((_c = this.openChildMenuItem) === null || _c === void 0 ? void 0 : _c.id) === ws.id,
+                childMenuAnchor: ((_d = this.openChildMenuItem) === null || _d === void 0 ? void 0 : _d.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); }
 };
@@ -3124,10 +3187,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