kritzel-stencil 0.0.127 → 0.0.128

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-C05uAr89.js');
-var index$1 = require('./index-BacMQbNR.js');
+var index = require('./index-CUSIflVf.js');
+var index$1 = require('./index-C7Read21.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)}";
 
@@ -61,13 +61,13 @@ const KritzelColor = class {
     }
     render() {
         const isColorVeryLight = this.isLightColor(this.value);
-        return (index.h(index.Host, { key: '8f8bb6c8c710bf6f3731b2be82c0857dd13913f1' }, index.h("div", { key: 'd28526ebcb418130ae8f608ea51c6c8dccffb906', class: "checkerboard-bg", style: {
+        return (index.h(index.Host, { key: '1468f3502f7d10d182ac72a05ce4b1e520353f8a' }, index.h("div", { key: 'd30d47667b1b72a970c4ee0da887dd59a663eae7', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, index.h("div", { key: 'ec6a886f152dd4db4d4a3f86991f3b065ece1b45', class: {
+            } }, index.h("div", { key: '073fd85967e53b609103a9fe47028bcda849e5ec', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -84,7 +84,7 @@ const KritzelColor = class {
 };
 KritzelColor.style = kritzelColorCss;
 
-const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #f0f0f0)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
+const kritzelColorPaletteCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}";
 
 const KritzelColorPalette = class {
     constructor(hostRef) {
@@ -109,7 +109,7 @@ const KritzelColorPalette = class {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (index.h(index.Host, { key: 'bae0e5b2c6444f4a447dbcb13bfd427b4f25ddb6' }, index.h("div", { key: '3020fe3b1eef1cafb8e1720716219464d11c0594', class: {
+        return (index.h(index.Host, { key: 'dddc32b0904800092d45727e833181af32eb8766' }, index.h("div", { key: '293cbed8e9c62b5f409b7dcdca0df5de9d65b758', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -122,83 +122,47 @@ const KritzelColorPalette = class {
 };
 KritzelColorPalette.style = kritzelColorPaletteCss;
 
-const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #f0f0f0);padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
+const kritzelContextMenuCss = ":host{display:block}.menu-container{display:flex;flex-direction:column;background-color:var(--kritzel-context-menu-background-color, #ffffff);border-radius:var(--kritzel-context-menu-border-radius, 12px);box-shadow:var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));border:var(--kritzel-context-menu-border, 1px solid #ebebeb);padding:var(--kritzel-context-menu-padding,4px)}.menu-item{display:flex;align-items:center;gap:var(--kritzel-context-menu-item-gap, 8px);background:none;border:none;text-align:left;padding:var(--kritzel-context-menu-item-padding, 8px);border-radius:var(--kritzel-context-menu-item-border-radius, 12px);cursor:pointer;font-size:var(--kritzel-context-menu-item-font-size, 14px);color:var(--kritzel-context-menu-item-color, #333333);white-space:nowrap;-webkit-tap-highlight-color:transparent}.menu-item:not(.disabled):hover{background-color:var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.menu-item:not(.disabled):active{background-color:var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%))}.menu-item.disabled{color:var(--kritzel-context-menu-item-disabled-color, #aaaaaa);cursor:default}.menu-item kritzel-icon{opacity:0.8;flex-shrink:0}.menu-item.disabled kritzel-icon{opacity:0.4}.label{flex-grow:1}";
 
 const KritzelContextMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.actionSelected = index.createEvent(this, "actionSelected");
-        this.disabledStates = new Map();
-        this.visibleItems = [];
+        this.processedItems = [];
     }
     componentWillLoad() {
-        this.resolveVisibleItems();
-        this.resolveDisabledStates();
+        this.updateMenuItems();
     }
     onItemsChanged() {
-        this.resolveVisibleItems();
-        this.resolveDisabledStates();
+        this.updateMenuItems();
     }
-    handleItemClick(item, index) {
-        if (!this.disabledStates.get(index)) {
+    handleItemClick(item, isDisabled) {
+        if (!isDisabled) {
             this.actionSelected.emit(item);
         }
     }
-    async resolveVisibleItems() {
-        const visibleItems = [];
-        const visibilityPromises = this.items.map(async (item, index) => {
-            let isVisible = true;
-            if (item.visible !== undefined) {
-                if (typeof item.visible === 'boolean') {
-                    isVisible = item.visible;
-                }
-                else if (typeof item.visible === 'function') {
-                    const result = item.visible(null, this.objects);
-                    if (result instanceof Promise) {
-                        isVisible = await result;
-                    }
-                    else {
-                        isVisible = result;
-                    }
-                }
-            }
-            return { item, index, isVisible };
-        });
-        const visibilityResults = await Promise.all(visibilityPromises);
-        visibilityResults.forEach(({ item, isVisible }) => {
+    async evaluateProperty(value, defaultValue) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return await Promise.resolve(value(null, this.objects));
+        }
+        return defaultValue;
+    }
+    async updateMenuItems() {
+        const processed = [];
+        for (const item of this.items) {
+            const isVisible = await this.evaluateProperty(item.visible, true);
             if (isVisible) {
-                visibleItems.push(item);
-            }
-        });
-        this.visibleItems = visibleItems;
-    }
-    async resolveDisabledStates() {
-        const newStates = new Map();
-        const disabledPromises = this.visibleItems.map(async (item, index) => {
-            let isDisabled = false;
-            if (typeof item.disabled === 'boolean') {
-                isDisabled = item.disabled;
+                const isDisabled = await this.evaluateProperty(item.disabled, false);
+                processed.push({ item, isDisabled });
             }
-            else if (typeof item.disabled === 'function') {
-                const result = item.disabled(null, this.objects);
-                if (result instanceof Promise) {
-                    isDisabled = await result;
-                }
-                else {
-                    isDisabled = result;
-                }
-            }
-            newStates.set(index, isDisabled);
-        });
-        await Promise.all(disabledPromises);
-        this.disabledStates = new Map(newStates);
+        }
+        this.processedItems = processed;
     }
     render() {
-        return (index.h(index.Host, { key: 'cc1a338a7bf0d32764c2737f4f32774ccb22370a' }, index.h("div", { key: '4a83b9366332e42b506c3c876c00d77498a2b8b5', class: "menu-container" }, this.visibleItems.map((item, index$1) => {
-            var _a;
-            const isDisabled = (_a = this.disabledStates.get(index$1)) !== null && _a !== void 0 ? _a : false;
-            return (index.h("button", { key: `${item.label}-${index$1}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, index$1), onTouchStart: () => this.handleItemClick(item, index$1), disabled: isDisabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)));
-        }))));
+        return (index.h(index.Host, { key: '96569454f806a6d17380315b4d0200236fe22550' }, index.h("div", { key: '0e5899a2901e1e9ab9d657824e105121ce785bdc', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index$1) => (index.h("button", { key: `${item.label}-${index$1}`, class: { 'menu-item': true, disabled: isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), onTouchStart: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && index.h("kritzel-icon", { name: item.icon, size: 16 }), index.h("span", { class: "label" }, item.label)))))));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -240,14 +204,14 @@ const KritzelControlBrushConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: 'c200146a90a3dd72241e098eff555312fd3125a9' }, index.h("div", { key: '886492ec4c5e15954166c4a7569ba832d0e6eff8', style: {
+        return (index.h(index.Host, { key: 'd099d1c6722678fdfb06c34eb0860e8819dd17ca' }, index.h("div", { key: '0856f0150666415ee452a0fcec5c76b6d25b82c4', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-brush-style", { key: '64e205189fbd740c01d4fd94c5098edae574d69b', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), index.h("button", { key: '4b2d0fbf4d485350223dbc27601e78ab37be8df5', 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: '35262e8456901d10c84437e578317287282cf690', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '4f519179f419a3e3567d2db39d0d8f9f30d5a6a1', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), index.h("kritzel-stroke-size", { key: '05f05946c3ebd2707f1c41c236a2efca47cedbec', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, 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) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
@@ -279,14 +243,14 @@ const KritzelControlTextConfig = class {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (index.h(index.Host, { key: '1c8463a1f6b7bcf81f3b58fc0064330c50d6ada9' }, index.h("div", { key: '69825e6c9be473dda3597c86d51dffff9a6418fd', style: {
+        return (index.h(index.Host, { key: 'f0d35cc43f1fe58a5a26f21dad99f1a733b66cce' }, index.h("div", { key: 'efc7d31c11460015a41185b4215e9ff45970abdd', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, index.h("kritzel-font-family", { key: '56c947950e32989782512a2b00e3be0aaa12d77b', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), index.h("button", { key: '83fdb5908340adc032a7abae9b4b678697e0cff8', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, index.h("kritzel-icon", { key: '739c175fbc3c0c5c342f2983d0e47323bc5b56f4', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), index.h("kritzel-color-palette", { key: '98251da71574b3487bf6ee46f7e4e95d133e1eea', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), index.h("kritzel-font-size", { key: '95c88611a6631a4db5d200aac57e7eeef2c195b8', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, 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) })));
     }
 };
 KritzelControlTextConfig.style = kritzelControlTextConfigCss;
@@ -297,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 #f0f0f0);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, #f0f0f0)}.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, #f0f0f0)}.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}.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 KritzelControls = class {
     constructor(hostRef) {
@@ -311,23 +275,28 @@ const KritzelControls = class {
         this.isTouchDevice = KritzelDevicesHelper.isTouchDevice();
         this.kritzelEngine = null;
     }
-    async handleActiveToolChange(event) {
-        var _a;
-        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
-        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
-    }
-    handleClick(event) {
+    handleDocumentClick(event) {
         const element = event.target;
         if (!this.kritzelEngine || element.closest('.kritzel-tooltip')) {
             return;
         }
         this.isTooltipVisible = false;
-        this.kritzelEngine.enable();
     }
-    async closeTooltip() {
+    handleKeyDown(event) {
+        var _a;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.closeTooltip();
+            (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
+        }
+    }
+    async handleActiveToolChange(event) {
         var _a;
+        this.activeControl = this.controls.find(control => control.tool === event.detail) || null;
+        await ((_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.setFocus());
+    }
+    async closeTooltip() {
         this.isTooltipVisible = false;
-        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.enable();
     }
     get activeToolAsTextTool() {
         var _a;
@@ -375,9 +344,10 @@ const KritzelControls = class {
         }
     }
     handleConfigClick(event) {
+        var _a;
         event.stopPropagation();
         this.isTooltipVisible = !this.isTooltipVisible;
-        this.kritzelEngine.disable();
+        (_a = this.kritzelEngine) === null || _a === void 0 ? void 0 : _a.disable();
     }
     async handleToolChange(event) {
         this.activeControl = Object.assign(Object.assign({}, this.activeControl), { tool: event.detail });
@@ -386,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: 'dfb17219cf1d27d86148bc918b8303d74244700c', class: {
+        return (index.h(index.Host, { key: 'af04746b6eaa04a51482cd9d25ba3ab303d631f1', class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: 'a5eb7c6b59a193ba0bdde53812882c355a7658d4', style: {
+            } }, this.isUtilityPanelVisible && (index.h("kritzel-utility-panel", { key: 'd6ecb1087a332162f3fc809ed4321fc48f72c3e7', 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: 'b51e49664bf6330f22fb07ef64116459ec3832b3', 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: '34723e47249d53fd544848d2d577deba4df1f131', 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: {
@@ -485,7 +455,7 @@ const KritzelCursorTrail = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2bd830d9a7f97a9a7e96a5b6a40535fdaefb904d' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: '3da6a2e65030721cbdb04fba78d15776cb8f281c', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (index.h(index.Host, { key: 'c519ab89ffb793de887a870bafe8772f7584f097' }, this.cursorTrailPoints.length > 1 && (index.h("svg", { key: 'db7ac0975c5a39c0b68d8fd4af4edd4d15f439f3', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',
@@ -638,13 +608,17 @@ KritzelIconRegistry.registerIcons({
     'select-all': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-square-mouse-pointer-icon lucide-square-mouse-pointer"><path d="M12.034 12.681a.498.498 0 0 1 .647-.647l9 3.5a.5.5 0 0 1-.033.943l-3.444 1.068a1 1 0 0 0-.66.66l-1.067 3.443a.5.5 0 0 1-.943.033z"/><path d="M21 11V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h6"/></svg>',
     'download': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>',
     'undo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-undo-icon lucide-undo"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13"/></svg>',
-    'redo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>'
+    'redo': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-redo-icon lucide-redo"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7"/></svg>',
+    'plus': '<svg  width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus-icon lucide-plus"><path d="M5 12h14"/><path d="M12 5v14"/></svg>',
+    'ellipsis-vertical': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ellipsis-vertical-icon lucide-ellipsis-vertical"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>',
+    'x': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',
+    'check': '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'
 });
 
 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-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-controls{position:absolute;bottom:28px}";
 
 const KritzelEditor = class {
     constructor(hostRef) {
@@ -734,6 +708,8 @@ const KritzelEditor = class {
         this.isUtilityPanelVisible = true;
         this.isEngineReady = false;
         this.isControlsReady = false;
+        this.isWorkspaceManagerReady = false;
+        this.workspaces = [];
     }
     onIsEngineReady(newValue) {
         if (newValue && this.isControlsReady) {
@@ -777,32 +753,31 @@ const KritzelEditor = class {
             event.preventDefault();
         }
     }
-    handleKeyDown(event) {
-        var _a;
-        if (event.key === 'Escape') {
-            event.preventDefault();
-            (_a = this.controlsRef) === null || _a === void 0 ? void 0 : _a.closeTooltip();
-        }
-    }
     componentDidLoad() {
         this.registerCustomSvgIcons();
     }
     async checkIsReady() {
         await customElements.whenDefined('kritzel-editor');
+        await customElements.whenDefined('kritzel-workspace-manager');
         await customElements.whenDefined('kritzel-controls');
         await customElements.whenDefined('kritzel-engine');
-        if (!this.isEngineReady || !this.isControlsReady) {
+        if (!this.isEngineReady || !this.isControlsReady || !this.isWorkspaceManagerReady) {
             return;
         }
         this.isReady.emit(this.host);
     }
+    onEngineReady(event) {
+        this.isEngineReady = true;
+        this.activeWorkspace = event.detail.activeWorkspace;
+        this.workspaces = event.detail.workspaces;
+    }
     registerCustomSvgIcons() {
         for (const [name, svg] of Object.entries(this.customSvgIcons)) {
             KritzelIconRegistry.register(name, svg);
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'ddfb1861cc7fe2acda822b9389c3a049fe626deb' }, index.h("kritzel-engine", { key: 'ccbf2c636bdf63630ac06e1e8d3239c79bb7e774', ref: el => (this.engineRef = el), onIsEngineReady: () => (this.isEngineReady = true), scaleMax: this.scaleMax, scaleMin: this.scaleMin, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems }), index.h("kritzel-controls", { key: 'a0111b00ecbcb18c615c7f12f005f0edfe363af8', 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: '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) })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
@@ -873,6 +848,7 @@ class KritzelViewport {
                 this._store.state.hasViewportChanged = true;
                 this._store.state.skipContextMenu = true;
                 this._store.rerender();
+                this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
             }
         }
         if (event.pointerType === 'touch') {
@@ -908,6 +884,7 @@ class KritzelViewport {
                 this.startY = midpointY;
                 this._store.state.hasViewportChanged = true;
                 this._store.rerender();
+                this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
             }
         }
     }
@@ -948,6 +925,7 @@ class KritzelViewport {
         this._store.state.translateY -= translateYAdjustment;
         this._store.state.hasViewportChanged = true;
         this._store.rerender();
+        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
     }
     handlePan(event) {
         const panSpeed = 0.8;
@@ -955,12 +933,13 @@ class KritzelViewport {
         this._store.state.translateY -= event.deltaY * panSpeed;
         this._store.state.hasViewportChanged = true;
         this._store.rerender();
+        this._store.updateWorkspaceViewport(this._store.state.translateX, this._store.state.translateY, this._store.state.scale);
     }
 }
 
 class UpdateViewportCommand extends index$1.KritzelBaseCommand {
-    constructor(store, initiator, previousViewport) {
-        super(store, initiator);
+    constructor(store, initiator, previousViewport, skipHistory = false) {
+        super(store, initiator, skipHistory);
         this.previousViewport = previousViewport;
         this.currentViewport = {
             scale: this._store.state.scale,
@@ -1038,16 +1017,29 @@ class KritzelHistory {
             translateY: this._store.state.translateY,
         };
     }
+    reset() {
+        this.undoStack.clear();
+        this.redoStack.clear();
+        this.previousViewport = {
+            scale: this._store.state.scale,
+            scaleStep: this._store.state.scaleStep,
+            translateX: this._store.state.translateX,
+            translateY: this._store.state.translateY
+        };
+    }
     executeCommand(command) {
         if (this._store.state.hasViewportChanged) {
             this.addUpdateViewportCommand();
         }
         command.execute();
-        if (this._store.state.debugInfo.logCommands)
-            console.info('add', command);
-        this.undoStack.add(command);
-        if (this.redoStack.isEmpty() === false) {
-            this.redoStack.clear();
+        if (command.skipHistory === false) {
+            if (this._store.state.debugInfo.logCommands) {
+                console.info('add', command);
+            }
+            this.undoStack.add(command);
+            if (this.redoStack.isEmpty() === false) {
+                this.redoStack.clear();
+            }
         }
         this._store.rerender();
     }
@@ -1102,6 +1094,10 @@ class KritzelOctree {
         this.bounds = bounds;
         this.capacity = capacity;
     }
+    reset() {
+        this.objects = [];
+        this.children = null;
+    }
     insert(object) {
         if (!this.intersects(object.rotatedBoundingBox, this.bounds)) {
             return false;
@@ -1206,35 +1202,8 @@ class KritzelOctree {
     }
 }
 
-class UpdateObjectCommand extends index$1.KritzelBaseCommand {
-    constructor(store, initiator, object, updatedProperties) {
-        super(store, initiator);
-        this.object = object;
-        this.updatedProperties = updatedProperties;
-        this.previousProperties = {};
-        for (const key in updatedProperties) {
-            if (updatedProperties.hasOwnProperty(key)) {
-                this.previousProperties[key] = this.object[key];
-            }
-        }
-    }
-    execute() {
-        for (const key in this.updatedProperties) {
-            if (this.updatedProperties.hasOwnProperty(key)) {
-                this.object[key] = this.updatedProperties[key];
-            }
-        }
-    }
-    undo() {
-        for (const key in this.previousProperties) {
-            if (this.previousProperties.hasOwnProperty(key)) {
-                this.object[key] = this.previousProperties[key];
-            }
-        }
-    }
-}
-
 const DEFAULT_ENGINE_STATE = {
+    activeWorkspace: null,
     activeTool: null,
     activeText: null,
     currentPath: null,
@@ -1268,6 +1237,7 @@ const DEFAULT_ENGINE_STATE = {
         showObjectInfo: false,
         showViewportInfo: false,
         logCommands: false,
+        logDatabase: false,
     },
     host: null,
     pointerX: 0,
@@ -1275,7 +1245,7 @@ const DEFAULT_ENGINE_STATE = {
     scale: 1,
     scaleMax: 1,
     scaleMin: 1,
-    scaleStep: 0.05,
+    scaleStep: 0.075,
     startX: 0,
     startY: 0,
     translateX: 0,
@@ -1289,13 +1259,254 @@ const DEFAULT_ENGINE_STATE = {
     historyBufferSize: 1000,
     longTouchTimeout: null,
     longTouchDelay: 300,
-    pointers: new Map()
+    pointers: new Map(),
+    workspaces: [],
 };
 
+class KritzelDatabase {
+    constructor(dbName, dbVersion, isLoggingEnabled = false) {
+        this.db = null;
+        this.dbName = dbName;
+        this.dbVersion = dbVersion;
+        this.isLoggingEnabled = isLoggingEnabled;
+    }
+    async open(stores) {
+        return new Promise((resolve, reject) => {
+            if (this.db) {
+                resolve();
+                return;
+            }
+            if (this.isLoggingEnabled) {
+                console.log(`[IndexedDB] Opening database: ${this.dbName}, version: ${this.dbVersion}`);
+            }
+            const request = indexedDB.open(this.dbName, this.dbVersion);
+            request.onerror = () => {
+                console.error('IndexedDB error:', request.error);
+                reject(request.error);
+            };
+            request.onsuccess = () => {
+                this.db = request.result;
+                if (this.isLoggingEnabled) {
+                    console.log(`[IndexedDB] Database opened successfully.`);
+                }
+                resolve();
+            };
+            request.onupgradeneeded = event => {
+                if (this.isLoggingEnabled) {
+                    console.log(`[IndexedDB] Upgrade needed for database: ${this.dbName}`);
+                }
+                const db = event.target.result;
+                stores.forEach(storeConfig => {
+                    if (!db.objectStoreNames.contains(storeConfig.name)) {
+                        if (this.isLoggingEnabled) {
+                            console.log(`[IndexedDB] Creating store: ${storeConfig.name}`);
+                        }
+                        const store = db.createObjectStore(storeConfig.name, storeConfig.options);
+                        if (storeConfig.indices) {
+                            storeConfig.indices.forEach(index => {
+                                if (this.isLoggingEnabled) {
+                                    console.log(`[IndexedDB] Creating index: ${index.name} on store: ${storeConfig.name}`);
+                                }
+                                store.createIndex(index.name, index.keyPath, index.options);
+                            });
+                        }
+                    }
+                });
+            };
+        });
+    }
+    close() {
+        if (this.db) {
+            if (this.isLoggingEnabled) {
+                console.log(`[IndexedDB] Closing database: ${this.dbName}`);
+            }
+            this.db.close();
+            this.db = null;
+        }
+    }
+    async add(storeName, item) {
+        if (this.isLoggingEnabled) {
+            console.log('[IndexedDB] Add:', { storeName, item });
+        }
+        return this.executeTransaction(storeName, 'readwrite', store => store.add(item));
+    }
+    async get(storeName, key) {
+        if (this.isLoggingEnabled) {
+            console.log('[IndexedDB] Get:', { storeName, key });
+        }
+        return this.executeTransaction(storeName, 'readonly', store => store.get(key));
+    }
+    async getAll(storeName) {
+        if (this.isLoggingEnabled) {
+            console.log('[IndexedDB] GetAll:', { storeName });
+        }
+        return this.executeTransaction(storeName, 'readonly', store => store.getAll());
+    }
+    async update(storeName, item) {
+        if (this.isLoggingEnabled) {
+            console.log('[IndexedDB] Update:', { storeName, item });
+        }
+        return this.executeTransaction(storeName, 'readwrite', store => store.put(item));
+    }
+    async delete(storeName, key) {
+        if (this.isLoggingEnabled) {
+            console.log('[IndexedDB] Delete:', { storeName, key });
+        }
+        return this.executeTransaction(storeName, 'readwrite', store => store.delete(key));
+    }
+    async deleteByRange(storeName, range) {
+        if (this.isLoggingEnabled) {
+            console.log('[IndexedDB] DeleteByRange:', { storeName, range });
+        }
+        return this.executeTransaction(storeName, 'readwrite', store => store.delete(range));
+    }
+    async getAllByRange(storeName, range) {
+        if (this.isLoggingEnabled) {
+            console.log('[IndexedDB] GetAllByRange:', { storeName, range });
+        }
+        return this.executeTransaction(storeName, 'readonly', store => {
+            return store.getAll(range);
+        });
+    }
+    async getAllByIndex(storeName, indexName, query) {
+        if (this.isLoggingEnabled) {
+            console.log('[IndexedDB] GetAllByIndex:', { storeName, indexName, query });
+        }
+        return this.executeTransaction(storeName, 'readonly', store => {
+            const index = store.index(indexName);
+            return index.getAll(query);
+        });
+    }
+    async executeTransaction(storeName, mode, action) {
+        if (!this.db) {
+            throw new Error('Database is not open.');
+        }
+        return new Promise((resolve, reject) => {
+            const transaction = this.db.transaction(storeName, mode);
+            const store = transaction.objectStore(storeName);
+            const request = action(store);
+            let requestResult;
+            transaction.oncomplete = () => {
+                resolve(requestResult);
+            };
+            transaction.onabort = () => {
+                var _a;
+                reject((_a = transaction.error) !== null && _a !== void 0 ? _a : new Error('Transaction aborted'));
+            };
+            transaction.onerror = () => {
+                reject(transaction.error);
+            };
+            request.onsuccess = () => {
+                requestResult = request.result;
+            };
+        });
+    }
+    async batch(actions) {
+        if (!this.db) {
+            throw new Error('Database is not open.');
+        }
+        const storeNames = await this.extractStoreNamesFromActions(actions);
+        if (this.isLoggingEnabled) {
+            console.log('[IndexedDB] Starting batch transaction:', { storeNames });
+        }
+        return new Promise((resolve, reject) => {
+            const transaction = this.db.transaction(storeNames, 'readwrite');
+            const results = [];
+            const promises = [];
+            const tempDbInstance = {
+                add: (storeName, item) => this.add(storeName, item),
+                get: (storeName, key) => this.get(storeName, key),
+                getAll: (storeName) => this.getAll(storeName),
+                update: (storeName, item) => this.update(storeName, item),
+                delete: (storeName, key) => this.delete(storeName, key),
+                deleteByRange: (storeName, range) => this.deleteByRange(storeName, range),
+                getAllByRange: (storeName, range) => this.getAllByRange(storeName, range),
+                getAllByIndex: (storeName, indexName, query) => this.getAllByIndex(storeName, indexName, query),
+                executeTransaction: (storeName, mode, action) => {
+                    return new Promise((resolveRequest, rejectRequest) => {
+                        if (this.isLoggingEnabled) {
+                            console.log('[IndexedDB] Executing batch action:', { storeName, mode });
+                        }
+                        const store = transaction.objectStore(storeName);
+                        const request = action(store);
+                        request.onsuccess = () => {
+                            if (this.isLoggingEnabled) {
+                                console.log('[IndexedDB] Batch action request successful:', { result: request.result });
+                            }
+                            resolveRequest(request.result);
+                        };
+                        request.onerror = () => {
+                            console.error('[IndexedDB] Batch action request error:', request.error);
+                            rejectRequest(request.error);
+                        };
+                    });
+                },
+            };
+            transaction.oncomplete = () => {
+                if (this.isLoggingEnabled) {
+                    console.log('[IndexedDB] Batch transaction complete.');
+                }
+                Promise.all(promises).then(() => resolve(results));
+            };
+            transaction.onabort = () => {
+                var _a;
+                console.error('[IndexedDB] Batch transaction aborted:', transaction.error);
+                reject((_a = transaction.error) !== null && _a !== void 0 ? _a : new Error('Transaction aborted'));
+            };
+            transaction.onerror = () => {
+                console.error('[IndexedDB] Batch transaction error:', transaction.error);
+                reject(transaction.error);
+            };
+            actions.forEach((action, index) => {
+                const promise = action(tempDbInstance)
+                    .then(result => {
+                    results[index] = result;
+                })
+                    .catch(err => {
+                    if (!transaction.error) {
+                        transaction.abort();
+                    }
+                    reject(err);
+                });
+                promises.push(promise);
+            });
+        });
+    }
+    async extractStoreNamesFromActions(actions) {
+        const storeNamesSet = new Set();
+        const storeNameCollector = new Proxy(this, {
+            get: (target, prop) => {
+                if (['add', 'get', 'getAll', 'update', 'delete', 'deleteByRange', 'getAllByRange', 'getAllByIndex'].includes(prop)) {
+                    return (storeName) => {
+                        storeNamesSet.add(storeName);
+                        return Promise.resolve();
+                    };
+                }
+                return target[prop];
+            },
+        });
+        await Promise.all(actions.map(action => action(storeNameCollector)));
+        return Array.from(storeNamesSet);
+    }
+}
+
+class KritzelWorkspace {
+    constructor(id, name, viewport = { translateX: 0, translateY: 0, scale: 1 }) {
+        this.id = id;
+        this.name = name;
+        this.createdAt = new Date();
+        this.updatedAt = new Date();
+        this.viewport = viewport;
+    }
+}
+
 class KritzelStore {
     get history() {
         return this._history;
     }
+    get database() {
+        return this._database;
+    }
     get state() {
         return this._state;
     }
@@ -1314,12 +1525,16 @@ class KritzelStore {
     get offsetY() {
         return this._state.host.getBoundingClientRect().top;
     }
+    get isDisabled() {
+        return this._state.isEnabled === false || this._state.isReady === false || this._state.activeWorkspace === null;
+    }
     constructor(kritzelEngine) {
         this._listeners = new Map();
         this.objects = [];
         this._state = DEFAULT_ENGINE_STATE;
         this._kritzelEngine = kritzelEngine;
         this._history = new KritzelHistory(this);
+        this._database = new KritzelDatabase('kritzelDB', 1, this._state.debugInfo.logDatabase);
         this._state.objectsOctree = new KritzelOctree({
             x: -Infinity,
             y: -Infinity,
@@ -1329,16 +1544,135 @@ class KritzelStore {
             depth: Infinity,
         });
     }
-    rerender() {
-        const viewportBounds = {
-            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,
+    async initializeDatabase() {
+        await this._database.open([
+            {
+                name: 'objects',
+                options: { keyPath: ['workspaceId', 'id'] },
+            },
+            { name: 'workspaces', options: { keyPath: 'id' } },
+        ]);
+        this.rerender();
+    }
+    async initializeWorkspace(workspace) {
+        var _a;
+        const workspaces = await this.getWorkspaces();
+        const mostRecentWorkspace = [...workspaces].sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime())[0];
+        const fallbackWorkspace = new KritzelWorkspace(index$1.ObjectHelper.generateUUID(), 'New Workspace');
+        this._state.activeWorkspace = (_a = workspace !== null && workspace !== void 0 ? workspace : mostRecentWorkspace) !== null && _a !== void 0 ? _a : fallbackWorkspace;
+        const isExistingWorkspace = await this.getWorkspace(this._state.activeWorkspace.id);
+        if (isExistingWorkspace) {
+            await this.updateWorkspace(this._state.activeWorkspace);
+        }
+        else {
+            await this.createWorkspace(this._state.activeWorkspace);
+        }
+        this._state.workspaces = await this.getWorkspaces();
+        this.state.translateX = this._state.activeWorkspace.viewport.translateX;
+        this.state.translateY = this._state.activeWorkspace.viewport.translateY;
+        this.state.scale = this._state.activeWorkspace.viewport.scale;
+        await this.initializeWorkspaceObjects(this._state.activeWorkspace.id);
+    }
+    async initializeWorkspaceObjects(workspaceId) {
+        this._state.objectsOctree.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.rerender();
+    }
+    async updateWorkspaceViewport(translateX, translateY, scale) {
+        if (!this.state.activeWorkspace) {
+            throw new Error('Workspace not initialized');
+        }
+        this.state.activeWorkspace.viewport = {
+            translateX,
+            translateY,
+            scale,
         };
-        this.objects = this._state.objectsOctree.query(viewportBounds);
+        this.state.activeWorkspace.updatedAt = new Date();
+        await this._database.update('workspaces', this.state.activeWorkspace);
+    }
+    async addObjectToDatabase(object) {
+        if (!this._database) {
+            throw new Error('Database not initialized');
+        }
+        if (!this.state.activeWorkspace) {
+            throw new Error('Workspace not initialized');
+        }
+        this.state.activeWorkspace.updatedAt = new Date();
+        await this._database.batch([db => db.add('objects', object), db => db.update('workspaces', this.state.activeWorkspace)]).catch(err => {
+            console.error('Error adding object to database:', err);
+        });
+    }
+    async updateObjectInDatabase(object) {
+        if (!this._database) {
+            throw new Error('Database not initialized');
+        }
+        if (!this.state.activeWorkspace) {
+            throw new Error('Workspace not initialized');
+        }
+        this.state.activeWorkspace.updatedAt = new Date();
+        await this._database.batch([db => db.update('objects', object), db => db.update('workspaces', this.state.activeWorkspace)]).catch(err => {
+            console.error('Error updating object in database:', err);
+        });
+    }
+    async deleteObjectFromDatabase(objectId) {
+        if (!this._database) {
+            throw new Error('Database not initialized');
+        }
+        if (!this.state.activeWorkspace) {
+            throw new Error('Workspace not initialized');
+        }
+        this.state.activeWorkspace.updatedAt = new Date();
+        await this._database.batch([db => db.delete('objects', [this.state.activeWorkspace.id, objectId]), db => db.update('workspaces', this.state.activeWorkspace)]).catch(err => {
+            console.error('Error deleting object from database:', err);
+        });
+    }
+    getWorkspace(id) {
+        if (!this._database) {
+            throw new Error('Database not initialized');
+        }
+        return this._database.get('workspaces', id);
+    }
+    getWorkspaces() {
+        if (!this._database) {
+            throw new Error('Database not initialized');
+        }
+        return this._database.getAll('workspaces');
+    }
+    async createWorkspace(workspace) {
+        if (!this._database) {
+            throw new Error('Database not initialized');
+        }
+        workspace.createdAt = new Date();
+        workspace.updatedAt = new Date();
+        await this._database.add('workspaces', workspace);
+        this.state.workspaces.push(workspace);
+    }
+    async updateWorkspace(workspace) {
+        if (!this._database) {
+            throw new Error('Database not initialized');
+        }
+        workspace.updatedAt = new Date();
+        await this._database.update('workspaces', workspace);
+        const index = this.state.workspaces.findIndex(w => w.id === workspace.id);
+        if (index !== -1) {
+            this.state.workspaces[index] = workspace;
+        }
+    }
+    async deleteWorkspace(workspace) {
+        if (!this._database) {
+            throw new Error('Database not initialized');
+        }
+        const objectRange = IDBKeyRange.bound([workspace.id], [workspace.id, '\uffff']);
+        await this._database.deleteByRange('objects', objectRange);
+        await this._database.delete('workspaces', workspace.id);
+    }
+    rerender() {
         if (this._kritzelEngine) {
             this._kritzelEngine.forceUpdate++;
         }
@@ -1380,17 +1714,11 @@ class KritzelStore {
         const commands = [...deleteSelectedObjectsCommand, removeSelectionGroupCommand];
         this.history.executeCommand(new index$1.BatchCommand(this, this.state.selectionGroup, commands));
     }
-    deleteObject(id, isHistoryUpdated = true) {
+    deleteObject(id, skipHistory = false) {
         const object = this.findObjectById(id);
         if (object) {
-            if (isHistoryUpdated) {
-                const removeObjectCommand = new index$1.RemoveObjectCommand(this, this, object);
-                this.history.executeCommand(removeObjectCommand);
-            }
-            else {
-                this._state.objectsOctree.remove(obj => obj.id === id);
-                this.rerender();
-            }
+            const removeObjectCommand = new index$1.RemoveObjectCommand(this, this, object, skipHistory);
+            this.history.executeCommand(removeObjectCommand);
         }
     }
     copy() {
@@ -1420,7 +1748,7 @@ class KritzelStore {
             if (obj.zIndex === max) {
                 return;
             }
-            return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex + 1 });
+            return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex + 1 });
         });
         this.history.executeCommand(new index$1.BatchCommand(this, this, increaseZIndexCommands));
     }
@@ -1431,7 +1759,7 @@ class KritzelStore {
             if (obj.zIndex === min) {
                 return;
             }
-            return new UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex - 1 });
+            return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: obj.zIndex - 1 });
         });
         this.history.executeCommand(new index$1.BatchCommand(this, this, decreaseZIndexCommands));
     }
@@ -1439,7 +1767,7 @@ class KritzelStore {
         const max = Math.max(...this.allObjects.map(obj => obj.zIndex)) + 1;
         const objects = object ? [object] : this.state.selectionGroup.objects;
         const increaseZIndexCommands = objects.map(obj => {
-            return new UpdateObjectCommand(this, this, obj, { zIndex: max });
+            return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: max });
         });
         this.history.executeCommand(new index$1.BatchCommand(this, this, increaseZIndexCommands));
     }
@@ -1447,7 +1775,7 @@ class KritzelStore {
         const min = Math.min(...this.allObjects.map(obj => obj.zIndex)) - 1;
         const objects = object ? [object] : this.state.selectionGroup.objects;
         const decreaseZIndexCommands = objects.map(obj => {
-            return new UpdateObjectCommand(this, this, obj, { zIndex: min });
+            return new index$1.UpdateObjectCommand(this, this, obj, { zIndex: min });
         });
         this.history.executeCommand(new index$1.BatchCommand(this, this, decreaseZIndexCommands));
     }
@@ -1504,8 +1832,7 @@ class KritzelStore {
     }
     resetActiveText() {
         if (this.state.activeText && this.state.activeText.value === ' ') {
-            this.deleteObject(this.state.activeText.id, false);
-            this.history.undoStack.pop();
+            this.deleteObject(this.state.activeText.id, true);
         }
         this.state.activeText = null;
     }
@@ -1572,7 +1899,6 @@ class KritzelKeyHandler extends index$1.KritzelBaseHandler {
     }
     handleKeyDown(event) {
         if (this._store.state.isFocused === false) {
-            event.preventDefault();
             return;
         }
         this._store.state.isCtrlKeyPressed = event.ctrlKey;
@@ -1691,13 +2017,18 @@ class KritzelContextMenuHandler extends index$1.KritzelBaseHandler {
 
 class KritzelClassHelper {
     static isInstanceOf(object, className) {
-        return object.__class__ === className;
+        return !!object && object.__class__ === className;
     }
 }
 
 const kritzelEngineCss = ":host{display:block;position:relative;height:100%;width:100%;overflow:hidden;background-color:var(--kritzel-engine-background-color, #ffffff)}:host,:host *{touch-action:none;user-select:none}.debug-panel{position:absolute;pointer-events:none;top:0;right:0}.origin{position:relative;top:0;left:0;height:0;width:0;pointer-events:none;-webkit-transform-origin:top left;-moz-transform-origin:top left;transform-origin:top left;overflow:visible}.object{overflow:visible}textarea{all:unset;box-sizing:border-box;outline:none !important;border:none !important;overflow:visible}.resize-handle-overlay.top-left,.resize-handle-overlay.bottom-right{cursor:nwse-resize}.resize-handle-overlay.top-right,.resize-handle-overlay.bottom-left{cursor:nesw-resize}.rotation-handle-overlay{cursor:grab}";
 
 const KritzelEngine = class {
+    onWorkspaceChange(newWorkspace) {
+        if (newWorkspace) {
+            this.store.initializeWorkspace(newWorkspace);
+        }
+    }
     validateScaleMax(newValue) {
         if (newValue > ABSOLUTE_SCALE_MAX) {
             console.warn(`scaleMax cannot be greater than ${ABSOLUTE_SCALE_MAX}.`);
@@ -1728,6 +2059,7 @@ const KritzelEngine = class {
         index.registerInstance(this, hostRef);
         this.isEngineReady = index.createEvent(this, "isEngineReady");
         this.activeToolChange = index.createEvent(this, "activeToolChange");
+        this.workspacesChange = index.createEvent(this, "workspacesChange");
         this.scaleMax = ABSOLUTE_SCALE_MAX;
         this.scaleMin = ABSOLUTE_SCALE_MIN;
         this.forceUpdate = 0;
@@ -1738,18 +2070,23 @@ const KritzelEngine = class {
         this.validateScaleMax(this.scaleMax);
         this.validateScaleMin(this.scaleMin);
     }
-    componentDidLoad() {
+    async componentDidLoad() {
         this.contextMenuHandler = new KritzelContextMenuHandler(this.store, this.globalContextMenuItems, this.objectContextMenuItems);
         this.keyHandler = new KritzelKeyHandler(this.store);
         this.viewport = new KritzelViewport(this.store, this.host);
         this._registerStateChangeListeners();
+        await this.store.initializeDatabase();
+        await this.store.initializeWorkspace(this.workspace);
         if (this.store.state.isReady === false) {
             this.store.state.isReady = true;
-            this.isEngineReady.emit();
+            this.isEngineReady.emit(this.store.state);
         }
     }
     handleWheel(ev) {
         var _a, _b;
+        if (this.store.isDisabled) {
+            return;
+        }
         if (this.store.state.isContextMenuVisible) {
             this.hideContextMenu();
         }
@@ -1758,11 +2095,11 @@ const KritzelEngine = class {
     }
     handlePointerDown(ev) {
         var _a, _b;
-        if (index$1.KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
-            this.hideContextMenu();
+        if (this.store.isDisabled) {
             return;
         }
-        if (this.store.state.isEnabled === false) {
+        if (index$1.KritzelEventHelper.isPointerEventOnContextMenu(ev) === false && this.store.state.isContextMenuVisible) {
+            this.hideContextMenu();
             return;
         }
         index$1.KritzelEventHelper.onLongTouchPress(ev, (event) => {
@@ -1778,7 +2115,7 @@ const KritzelEngine = class {
     }
     handlePointerMove(ev) {
         var _a, _b;
-        if (this.store.state.isEnabled === false) {
+        if (this.store.isDisabled) {
             return;
         }
         this.store.state.pointers.set(ev.pointerId, ev);
@@ -1787,7 +2124,7 @@ const KritzelEngine = class {
     }
     handlePointerUp(ev) {
         var _a, _b;
-        if (this.store.state.isEnabled === false) {
+        if (this.store.isDisabled) {
             return;
         }
         this.store.state.pointers.delete(ev.pointerId);
@@ -1797,7 +2134,7 @@ const KritzelEngine = class {
     }
     handlePointerCancel(ev) {
         var _a, _b;
-        if (this.store.state.isEnabled === false) {
+        if (this.store.isDisabled) {
             return;
         }
         this.host.releasePointerCapture(ev.pointerId);
@@ -1807,7 +2144,7 @@ const KritzelEngine = class {
     }
     handleContextMenu(ev) {
         ev.preventDefault();
-        if (this.store.state.isEnabled === false) {
+        if (this.store.isDisabled) {
             return;
         }
         if (ev.pointerType === 'touch') {
@@ -1825,6 +2162,9 @@ const KritzelEngine = class {
         this.keyHandler.handleKeyUp(ev);
     }
     updateFocus(ev) {
+        if (this.store.isDisabled) {
+            return;
+        }
         const rect = this.store.state.host.getBoundingClientRect();
         const isInside = ev.clientX >= rect.left && ev.clientX <= rect.right && ev.clientY >= rect.top && ev.clientY <= rect.bottom;
         const path = ev.composedPath();
@@ -1832,6 +2172,9 @@ const KritzelEngine = class {
         const isInKritzelEngine = path.includes(kritzelEngineElement || this.host);
         this.store.setState('isFocused', isInside && isInKritzelEngine);
     }
+    handleClick() {
+        this.enable();
+    }
     async registerTool(toolName, toolClass, toolConfig) {
         if (typeof toolClass !== 'function' || !(toolClass.prototype instanceof index$1.KritzelBaseTool)) {
             console.error(`Failed to register tool "${toolName}": Tool class must be a constructor function`);
@@ -1913,7 +2256,7 @@ const KritzelEngine = class {
     }
     async updateObject(object, updatedProperties) {
         this.store.deselectAllObjects();
-        const command = new UpdateObjectCommand(this.store, this, object, updatedProperties);
+        const command = new index$1.UpdateObjectCommand(this.store, this, object, updatedProperties);
         this.store.history.executeCommand(command);
         return object;
     }
@@ -1945,7 +2288,7 @@ const KritzelEngine = class {
     }
     async centerObjectInViewport(object) {
         object.centerInViewport();
-        const command = new UpdateObjectCommand(this.store, this, object, object);
+        const command = new index$1.UpdateObjectCommand(this.store, this, object, object);
         this.store.history.executeCommand(command);
         return object;
     }
@@ -1953,6 +2296,24 @@ const KritzelEngine = class {
         var _a;
         return ((_a = this.store.state.copiedObjects) === null || _a === void 0 ? void 0 : _a.objects) || [];
     }
+    async createWorkspace(workspace) {
+        return this.store.createWorkspace(workspace).then(() => {
+            this.workspacesChange.emit(this.store.state.workspaces);
+        });
+    }
+    async updateWorkspace(workspace) {
+        return this.store.updateWorkspace(workspace).then(() => {
+            this.workspacesChange.emit(this.store.state.workspaces);
+        });
+    }
+    async deleteWorkspace(workspace) {
+        return this.store.deleteWorkspace(workspace).then(() => {
+            this.workspacesChange.emit(this.store.state.workspaces.filter(ws => ws.id !== workspace.id));
+        });
+    }
+    async getWorkspaces() {
+        return this.store.getWorkspaces();
+    }
     _registerStateChangeListeners() {
         this.store.onStateChange('activeTool', this._handleActiveToolChange.bind(this));
         this.store.onStateChange('isFocused', this._handleIsFocusedChange.bind(this));
@@ -1971,25 +2332,27 @@ const KritzelEngine = class {
         }
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
         const computedStyle = window.getComputedStyle(this.host);
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
-        return (index.h(index.Host, { key: '9662d9be6c5537340fe8416a5f74f3dec995fc91' }, index.h("div", { key: '4f42e6cf0ee0b77c672e7485a53ffed7a75961fa', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: '75bb2ea8e945c4d65d86a90f4f6da95ccd4425d1' }, "TranslateX: ", (_a = this.store.state) === null || _a === void 0 ? void 0 :
-            _a.translateX), index.h("div", { key: '69558794d6b88fece7c8af2be3cf5930174b8fd6' }, "TranslateY: ", (_b = this.store.state) === null || _b === void 0 ? void 0 :
-            _b.translateY), index.h("div", { key: 'd2e933f23eef9ee56137906f56c5cbadbaadaf23' }, "ViewportWidth: ", (_c = this.store.state) === null || _c === void 0 ? void 0 :
-            _c.viewportWidth), index.h("div", { key: 'c085fee84706c0be930d1e659dedb8a2728130dd' }, "ViewportHeight: ", (_d = this.store.state) === null || _d === void 0 ? void 0 :
-            _d.viewportHeight), index.h("div", { key: 'eeef8323ae0bc5047f038f4794aee4ed718d1183' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: '20172772854ab20ee9dd9b4bf9b969627c649e61' }, "Scale: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
-            _e.scale), index.h("div", { key: '256646b05f63bc6949578acb1739f57a581c86e4' }, "ActiveTool: ", (_g = (_f = this.store.state) === null || _f === void 0 ? void 0 : _f.activeTool) === null || _g === void 0 ? void 0 :
-            _g.name), index.h("div", { key: 'd9e17c3c89a135fcbaf1cdfaa8f8123186c74626' }, "HasViewportChanged: ", ((_h = this.store.state) === null || _h === void 0 ? void 0 : _h.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: '7750bc5b2763e6351eb37f51b54bca965f7e0823' }, "IsEnabled: ", ((_j = this.store.state) === null || _j === void 0 ? void 0 : _j.isEnabled) ? 'true' : 'false'), index.h("div", { key: '59ca295c0ab33fe6d82ccd1072fe64672c9f21b7' }, "IsScaling: ", ((_k = this.store.state) === null || _k === void 0 ? void 0 : _k.isScaling) ? 'true' : 'false'), index.h("div", { key: 'b413ddf6bbc8e7e758abd811f3e66a71a4961a04' }, "IsPanning: ", ((_l = this.store.state) === null || _l === void 0 ? void 0 : _l.isPanning) ? 'true' : 'false'), index.h("div", { key: 'c941fe71c6d3a124bcb02ff6d1efa33d943646aa' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: 'f060e324991d0885770cfbedf8332047a3ede890' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: 'ec3f85f2cc61bb55210cfa952ce8b1af66c4caf4' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: '0376abe30d6456038a98383a82eff2ec955fd69a' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '546d868377d654400e9013f8df54389e08a2c02d' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'b233911cad585a5318dd0a83258d477dd3e286f7' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: '4fd9f89a72c49bb681695030245d4622ffe281b5' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: 'e7c3b3485b945fff20dd0c6601727b52478a283b' }, "PointerX: ", (_m = this.store.state) === null || _m === void 0 ? void 0 :
-            _m.pointerX), index.h("div", { key: '0e940ac9609f23f1e4855206dda52c52eec14fe5' }, "PointerY: ", (_o = this.store.state) === null || _o === void 0 ? void 0 :
-            _o.pointerY), index.h("div", { key: '60475be8341d3a8e28416d91a38d188bce30d15b' }, "SelectedObjects: ", ((_p = this.store.state.selectionGroup) === null || _p === void 0 ? void 0 : _p.objects.length) || 0)), index.h("div", { key: '16608718942fd141d17a5d398045e178fa37eacf', id: "origin", class: "origin", style: {
-                transform: `matrix(${(_q = this.store.state) === null || _q === void 0 ? void 0 : _q.scale}, 0, 0, ${(_r = this.store.state) === null || _r === void 0 ? void 0 : _r.scale}, ${(_s = this.store.state) === null || _s === void 0 ? void 0 : _s.translateX}, ${(_t = this.store.state) === null || _t === void 0 ? void 0 : _t.translateY})`,
-            } }, (_u = this.store.objects) === null || _u === void 0 ? void 0 :
-            _u.map(object => {
+        return (index.h(index.Host, { key: 'c7e747aa6106e7904cf9f44db37fa285a6fb4434' }, index.h("div", { key: 'b75652ab9f9531dce765cbe448ad3131c172d06a', class: "debug-panel", style: { display: this.store.state.debugInfo.showViewportInfo ? 'block' : 'none' } }, index.h("div", { key: 'fd1355bd640b9296949f6bbcf084589578654db6' }, "ActiveWorkspaceId: ", (_b = (_a = this.store.state) === null || _a === void 0 ? void 0 : _a.activeWorkspace) === null || _b === void 0 ? void 0 :
+            _b.id), index.h("div", { key: '8520e3e774e97ebc42ee86401fbfbafbe41c88e8' }, "ActiveWorkspaceName: ", (_d = (_c = this.store.state) === null || _c === void 0 ? void 0 : _c.activeWorkspace) === null || _d === void 0 ? void 0 :
+            _d.name), index.h("div", { key: 'f247b4d76cd018e787a9b59829deedeb6c5c5272' }, "TranslateX: ", (_e = this.store.state) === null || _e === void 0 ? void 0 :
+            _e.translateX), index.h("div", { key: 'e0438479bc9e950ef2cbe88ed0aa0b8ec1888890' }, "TranslateY: ", (_f = this.store.state) === null || _f === void 0 ? void 0 :
+            _f.translateY), index.h("div", { key: '1735fde66588e285039bcc090dee71630608d666' }, "ViewportWidth: ", (_g = this.store.state) === null || _g === void 0 ? void 0 :
+            _g.viewportWidth), index.h("div", { key: '15f8b3305c27a395b8aa6463c5acec42bb3e3ddd' }, "ViewportHeight: ", (_h = this.store.state) === null || _h === void 0 ? void 0 :
+            _h.viewportHeight), index.h("div", { key: 'd2e39bae191c7256967d0140f38e75dccf95f24c' }, "ObjectsInViewport. ", this.store.objects.length), index.h("div", { key: 'cd3f53ff4a8f119a2ef975133f69fc3798fe0f71' }, "Scale: ", (_j = this.store.state) === null || _j === void 0 ? void 0 :
+            _j.scale), index.h("div", { key: 'b1f8c77589a80fe49d0947602bda46438921f7a8' }, "ActiveTool: ", (_l = (_k = this.store.state) === null || _k === void 0 ? void 0 : _k.activeTool) === null || _l === void 0 ? void 0 :
+            _l.name), index.h("div", { key: '41cd94f58f71cd5c1cffc679ada5fc51f6ceeea7' }, "HasViewportChanged: ", ((_m = this.store.state) === null || _m === void 0 ? void 0 : _m.hasViewportChanged) ? 'true' : 'false'), index.h("div", { key: 'bf8495bb924673aad3a9ca57ed0bf9ac23874dfb' }, "IsEnabled: ", ((_o = this.store.state) === null || _o === void 0 ? void 0 : _o.isEnabled) ? 'true' : 'false'), index.h("div", { key: '3823936f5b46b100742f94fac8d7e87ed93ddb58' }, "IsScaling: ", ((_p = this.store.state) === null || _p === void 0 ? void 0 : _p.isScaling) ? 'true' : 'false'), index.h("div", { key: '62eb836fff78b050cdab8cbef54f88f9d5b644ba' }, "IsPanning: ", ((_q = this.store.state) === null || _q === void 0 ? void 0 : _q.isPanning) ? 'true' : 'false'), index.h("div", { key: 'dac6b8d18ae8f6317bdd318ad48a9612f9942613' }, "IsFocused: ", this.store.state.isFocused ? 'true' : 'false'), index.h("div", { key: 'af232e2cd738e255029f5611531c246ac63a28ce' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), index.h("div", { key: '95a44fef4b6befe95bfadfc62957103b48bf76b6' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), index.h("div", { key: 'e8162d4de449a0d6756c2f540fca28353c193438' }, "IsResizeHandleSelected: ", this.store.state.isResizeHandleSelected ? 'true' : 'false'), index.h("div", { key: '4440d023cd4982c834736e06863698c3baf72353' }, "IsRotationHandleSelected: ", this.store.state.isRotationHandleSelected ? 'true' : 'false'), index.h("div", { key: 'd3e467dd18e53850df4d5bedf2b69f54b1fbe5c6' }, "IsDrawing: ", this.store.state.isDrawing ? 'true' : 'false'), index.h("div", { key: 'df6e4bca16cbe4346786a544d6f6c53d87bdb699' }, "IsWriting: ", this.store.state.isWriting ? 'true' : 'false'), index.h("div", { key: '532aebf1ff35cc578f12e36cdaf00713ffc76b97' }, "PointerX: ", (_r = this.store.state) === null || _r === void 0 ? void 0 :
+            _r.pointerX), index.h("div", { key: 'f710f8c8d27979da4a40e50452e2cdd63cdefa98' }, "PointerY: ", (_s = this.store.state) === null || _s === void 0 ? void 0 :
+            _s.pointerY), index.h("div", { key: '0175010e1d5a22be81ca0b2d88dd1aff217eacfd' }, "SelectedObjects: ", ((_t = this.store.state.selectionGroup) === null || _t === void 0 ? void 0 : _t.objects.length) || 0)), index.h("div", { key: 'dc2964c479405ed147bd5f090e24262595a474e2', id: "origin", class: "origin", style: {
+                transform: `matrix(${(_u = this.store.state) === null || _u === void 0 ? void 0 : _u.scale}, 0, 0, ${(_v = this.store.state) === null || _v === void 0 ? void 0 : _v.scale}, ${(_w = this.store.state) === null || _w === void 0 ? void 0 : _w.translateX}, ${(_x = this.store.state) === null || _x === void 0 ? void 0 : _x.translateY})`,
+            } }, (_y = this.store.state.objectsOctree.allObjects()) === null || _y === void 0 ? void 0 :
+            _y.map(object => {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-                return (index.h("div", { style: { 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", key: object.id, id: object.id, class: "object", style: {
+                return (index.h("div", { key: object.id, style: { display: object.isInViewport() ? 'block' : 'none', transform: object === null || object === void 0 ? void 0 : object.transformationMatrix, transformOrigin: 'top left', zIndex: object.zIndex.toString(), position: 'absolute' } }, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", id: object.id, class: "object", style: {
                         height: object === null || object === void 0 ? void 0 : object.totalHeight.toString(),
                         width: object === null || object === void 0 ? void 0 : object.totalWidth.toString(),
                         left: '0',
@@ -2008,17 +2371,17 @@ const KritzelEngine = class {
                         borderStyle: 'solid',
                         padding: object.padding + 'px',
                         overflow: 'visible',
-                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => el ? object.mount(el) : object.unmount(), xmlns: "http://www.w3.org/2000/svg", style: {
+                    } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (index.h("svg", { ref: el => (el ? object.mount(el) : object.unmount()), xmlns: "http://www.w3.org/2000/svg", style: {
                         height: object === null || object === void 0 ? void 0 : object.height.toString(),
                         width: object === null || object === void 0 ? void 0 : object.width.toString(),
                         position: 'absolute',
                         overflow: 'visible',
-                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, index.h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => el ? object.mount(el) : object.unmount(), src: object.src, style: {
+                    }, viewBox: object === null || object === void 0 ? void 0 : object.viewBox }, index.h("path", { d: object === null || object === void 0 ? void 0 : object.d, fill: object.fill, stroke: object === null || object === void 0 ? void 0 : object.stroke }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (index.h("img", { ref: el => (el ? object.mount(el) : object.unmount()), src: object.src, style: {
                         width: '100%',
                         height: '100%',
                         userSelect: 'none',
                         pointerEvents: 'none',
-                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("textarea", { ref: el => el ? object.mount(el) : object.unmount(), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
+                    }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (index.h("textarea", { ref: el => (el ? object.mount(el) : object.unmount()), value: object.value, onKeyDown: event => object.handleKeyDown(event), onInput: event => object.handleInput(event), rows: object.rows, style: {
                         width: '100%',
                         height: '100%',
                         color: object.fontColor,
@@ -2034,16 +2397,16 @@ const KritzelEngine = class {
                         pointerEvents: object.isReadonly ? 'none' : 'auto',
                         cursor: object.isReadonly ? 'default' : 'text',
                         caretColor: object.isReadonly ? 'transparent' : 'auto',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
                         width: '100%',
                         height: '100%',
                         pointerEvents: 'auto',
                         overflow: 'hidden',
                         display: 'block',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (index.h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
                         width: '100%',
                         height: '100%',
-                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (index.h("div", { ref: el => el ? object.mount(el) : object.unmount(), style: {
+                    } })), KritzelClassHelper.isInstanceOf(object, 'KrtizelSelectionBox') && (index.h("div", { ref: el => (el ? object.mount(el) : object.unmount()), style: {
                         width: '100%',
                         height: '100%',
                     } }))), index.h("line", { x1: "0", y1: "0", x2: object.totalWidth, y2: "0", style: {
@@ -2087,17 +2450,17 @@ 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: 'd945e3fae758a66d8d17875203561602446acf9a', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
-                height: (_v = this.store.state.currentPath) === null || _v === void 0 ? void 0 : _v.height.toString(),
-                width: (_w = this.store.state.currentPath) === null || _w === void 0 ? void 0 : _w.width.toString(),
+            }), index.h("svg", { key: '86f9a08bea3ac2d261b14b2eec471fafd20ca11f', class: "object", xmlns: "http://www.w3.org/2000/svg", style: {
+                height: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.height.toString(),
+                width: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.width.toString(),
                 left: '0',
                 top: '0',
-                zIndex: (_x = this.store.state.currentPath) === null || _x === void 0 ? void 0 : _x.zIndex.toString(),
+                zIndex: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.zIndex.toString(),
                 position: 'absolute',
-                transform: (_y = this.store.state.currentPath) === null || _y === void 0 ? void 0 : _y.transformationMatrix,
+                transform: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.transformationMatrix,
                 transformOrigin: 'top left',
                 overflow: 'visible',
-            }, viewBox: (_z = this.store.state.currentPath) === null || _z === void 0 ? void 0 : _z.viewBox }, index.h("path", { key: '111070848aa210dabf4150a9e69326c7a32a2bb7', d: (_0 = this.store.state.currentPath) === null || _0 === void 0 ? void 0 : _0.d, fill: (_1 = this.store.state.currentPath) === null || _1 === void 0 ? void 0 : _1.fill, stroke: (_2 = this.store.state.currentPath) === null || _2 === void 0 ? void 0 : _2.stroke }))), this.store.state.isContextMenuVisible && (index.h("kritzel-context-menu", { key: '13f61253ab96655d6816bfba60b7c1c8e0697533', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.store.state.contextMenuItems, objects: ((_3 = this.store.state.selectionGroup) === null || _3 === void 0 ? void 0 : _3.objects) || [], style: {
+            }, 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: {
                 position: 'fixed',
                 left: `${this.store.state.contextMenuX}px`,
                 top: `${this.store.state.contextMenuY}px`,
@@ -2109,10 +2472,11 @@ 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();
-            } })), ((_4 = this.store.state) === null || _4 === void 0 ? void 0 : _4.activeTool) instanceof index$1.KritzelEraserTool && !this.store.state.isScaling && index.h("kritzel-cursor-trail", { key: 'bcbedb0fd45a7b87e82e78326bfdc0d1a872c1aa', 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: '573a4422b742044df5f240b260bc66e83d004520', store: this.store })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {
+        "workspace": ["onWorkspaceChange"],
         "scaleMax": ["validateScaleMax"],
         "scaleMin": ["validateScaleMin"]
     }; }
@@ -2129,7 +2493,7 @@ const KritzelFont = class {
         this.color = '#000000';
     }
     render() {
-        return (index.h(index.Host, { key: 'e4123d3701933d5de1d5c063f69f6823db849baf' }, index.h("div", { key: '81dde2ff263a8bf110b9c0f0be4a5adc5852fa2f', class: "font-preview", style: {
+        return (index.h(index.Host, { key: 'd318355704f1bf66468dd793e5e38da827076d3b' }, index.h("div", { key: '447b4fba97f5d1900060859943438733667aed08', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -2174,12 +2538,12 @@ const KritzelFontFamily = class {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (index.h(index.Host, { key: 'b56a2dcc19e11c8cf84449d94f43fd93a882ac4e' }, index.h("kritzel-dropdown", { key: '999c75650ce8d83c5b52eda5c96ce0b040e67475', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: 'defbe8238c3037a5128f59f33a51f6ec9fd08dc3', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: '7dd5a7256dde1d38b495f67bdec2d605fde0a1ec', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
+        return (index.h(index.Host, { key: '801b1dbc2b7da7d00fb00ed6a8d8ee7be3e9ef17' }, index.h("kritzel-dropdown", { key: '5f774c0b31ca16a1c8acda1c73ea3aacc2784649', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, index.h("button", { key: '3c101155ff08854f665750f8988fb3691a77c04a', class: "font-style-button", slot: "suffix" }, "B"), index.h("button", { key: '48d2ead137a8a35f06fb8b5487431e2ce613c755', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
     }
 };
 KritzelFontFamily.style = kritzelFontFamilyCss;
 
-const kritzelFontSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:pointer;border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #f0f0f0)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}";
+const kritzelFontSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:pointer;border:2px solid transparent;box-sizing:border-box;border-radius:50%}.size-container:hover{background-color:var(--kritzel-font-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-font-size-selected-background-color, #e0e0e0)}";
 
 const KritzelFontSize = class {
     constructor(hostRef) {
@@ -2194,7 +2558,7 @@ const KritzelFontSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: 'b741185f77e6e6f9fa7a5023d90936d1ebb48d30' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: '08571feed86b37208956608b170ca1f782b7fb18' }, this.sizes.map(size => (index.h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, index.h("kritzel-font", { fontFamily: this.fontFamily, size: size }))))));
@@ -2224,7 +2588,307 @@ const KritzelIcon = class {
 };
 KritzelIcon.style = kritzelIconCss;
 
-const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #f0f0f0)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #f0f0f0)}";
+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 KritzelMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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();
+        }
+    }
+    handleEnter(event) {
+        var _a;
+        if (event.key === 'Enter') {
+            if (this.editingIndex !== null) {
+                (_a = this.saveButton) === null || _a === void 0 ? void 0 : _a.click();
+                return;
+            }
+        }
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.host.focus();
+        });
+    }
+    isViewMode(index) {
+        return this.editingIndex !== index;
+    }
+    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);
+    }
+    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 }))))))))));
+    }
+    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;
+    }
+    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;
+        }
+        return this.getScrollableParent(parent);
+    }
+    static isElementInViewport(element) {
+        if (!element) {
+            return false;
+        }
+        const scrollableParent = this.getScrollableParent(element);
+        const rect = element.getBoundingClientRect();
+        if (scrollableParent === window) {
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;
+        }
+        const parentRect = scrollableParent.getBoundingClientRect();
+        return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
+    }
+}
+
+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();
+        };
+    }
+    anchorChanged(newValue) {
+        if (newValue) {
+            this.calculatePosition();
+        }
+    }
+    handleResize() {
+        this.calculatePosition();
+    }
+    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;
+        let left = refRect.left + offset;
+        const maxLeft = window.innerWidth - portalRect.width - MIN_LEFT_POSITION;
+        if (left < MIN_LEFT_POSITION)
+            left = MIN_LEFT_POSITION;
+        if (left > maxLeft)
+            left = maxLeft;
+        return Math.round(left + window.scrollX);
+    }
+    calculateTop() {
+        var _a;
+        if (!this.anchor || !this.portal)
+            return 0;
+        const refRect = this.anchor.getBoundingClientRect();
+        const portalRect = this.portal.getBoundingClientRect();
+        const offset = (_a = this.offsetY) !== null && _a !== void 0 ? _a : DEFAULT_OFFSET;
+        let top = refRect.bottom + offset;
+        if (top + portalRect.height > window.innerHeight) {
+            top = refRect.top - portalRect.height - offset;
+        }
+        return Math.round(top + window.scrollY);
+    }
+    createPortal() {
+        this.portal = document.createElement('div');
+        this.portal.setAttribute('id', ID_PORTAL);
+        this.portal.style.zIndex = Z_INDEX;
+        this.portal.style.position = 'absolute';
+        this.portal.style.top = '0px';
+        this.portal.style.left = '0px';
+        document.body.append(this.portal);
+    }
+    moveElementToPortal() {
+        this.portal.appendChild(this.element);
+        this.moved = true;
+    }
+    calculatePosition() {
+        if (!this.anchor || !this.portal)
+            return;
+        const top = this.calculateTop();
+        const left = this.calculateLeft();
+        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' })));
+    }
+    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 KritzelSplitButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.buttonClick = index.createEvent(this, "buttonClick");
+        this.optionSelect = index.createEvent(this, "optionSelect");
+        this.menuOpened = index.createEvent(this, "menuOpened");
+        this.menuClosed = index.createEvent(this, "menuClosed");
+        this.dropdownIcon = 'chevron-down';
+        this.options = [];
+        this.disabled = false;
+        this.activeItemIndex = null;
+        this.editingIndex = null;
+        this.isMenuOpen = false;
+        this.handleDocumentClick = (event) => {
+            const path = (event.composedPath && event.composedPath()) || [];
+            const clickedInside = path.some(node => (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-SPLIT-BUTTON' || (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-MENU');
+            if (!clickedInside) {
+                this.closeMenu();
+            }
+            else if (this.isMenuOpen) {
+                document.addEventListener('click', this.handleDocumentClick, { once: true });
+            }
+        };
+        this.toggleMenu = () => {
+            if (this.isMenuOpen) {
+                this.closeMenu();
+            }
+            else {
+                this.openMenu();
+            }
+        };
+        this.handleButtonClick = () => {
+            if (!this.disabled) {
+                this.buttonClick.emit();
+            }
+        };
+    }
+    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)
+            return;
+        this.isMenuOpen = false;
+        this.menuClosed.emit();
+        this.host.focus();
+    }
+    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() })))));
+    }
+    get host() { return index.getElement(this); }
+};
+KritzelSplitButton.style = kritzelSplitButtonCss;
+
+const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:pointer;border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";
 
 const KritzelStrokeSize = class {
     constructor(hostRef) {
@@ -2238,7 +2902,7 @@ const KritzelStrokeSize = class {
         this.sizeChange.emit(size);
     }
     render() {
-        return (index.h(index.Host, { key: 'b481b62184551bc776042f58d2f27beba837f61d' }, this.sizes.map(size => (index.h("div", { class: {
+        return (index.h(index.Host, { key: '0185d3243c35c49169324c98f87df6a286fc3d31' }, 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 }))))));
@@ -2287,23 +2951,23 @@ const KritzelTooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'aed123eda0750df66229f0dd40eeafea39360901', style: {
+        return (index.h(index.Host, { key: '7610e8185e037813cc363daa3212a4164a20daaf', 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: 'ebd77cc44aea3a3ff193717f2dae7eedb55023fd', class: "tooltip-content", onClick: event => event.stopPropagation() }, index.h("slot", { key: '70966228bbe59b894eb472704f08b340c32bbad9' }), index.h("div", { key: '0d82c0f5b1531b39e48b9e80045771e3dda53964', class: "tooltip-arrow-wrapper", style: {
+            } }, 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: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, index.h("div", { key: '24b911e6fe5b5b9a1009d28c797c4c3d00f6f7c7', class: "tooltip-arrow", style: {
+            } }, index.h("div", { key: 'ebbf83bd4d35e252b0258a7c81ebcef48ac10004', 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: '2a15c5e8614e57a763aa3d8d4f8d4138146ac0a7', class: "tooltip-arrow-rect", style: {
+            } }), index.h("div", { key: '918ca46c438657dc4f72ccc73f81d58076d637c5', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,
@@ -2337,11 +3001,113 @@ const KritzelUtilityPanel = class {
         this.redo.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'f381fac2cb032ca19c6945ef4f39673ea0bd0cc5' }, index.h("button", { key: '1f7200672970baf1d0cfcaa116fa3f8f9a39832a', class: "utility-button", onClick: event => this.handleUndo(event) }, index.h("kritzel-icon", { key: '755d9201d80d8db086f07b38e90a01a06e980b50', name: "undo" })), index.h("button", { key: '06e4d5c2956f23245c3d48f21c15d54e8bef8119', class: "utility-button", onClick: event => this.handleRedo(event) }, index.h("kritzel-icon", { key: '13eb6b31c45b67ac399fc7c84b941ddce04c5c86', name: "redo" })), index.h("div", { key: '7f03a576a37649db679b93604c2654d29cc81da4', class: "utility-separator" }), index.h("button", { key: '0c40613e9f6a049cec872d71e9f948d685ec1dbe', class: "utility-button" }, index.h("kritzel-icon", { key: '8cba73bcb02ef8b7c182ba2fd16d98d6855f1c1b', name: "delete", onClick: () => this.delete.emit() }))));
+        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() }))));
     }
 };
 KritzelUtilityPanel.style = kritzelUtilityPanelCss;
 
+const kritzelWorkspaceManagerCss = ":host{display:flex;flex-direction:column;z-index:1}";
+
+const KritzelWorkspaceManager = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.isWorkspaceManagerReady = index.createEvent(this, "isWorkspaceManagerReady");
+        this.workspaceChange = index.createEvent(this, "workspaceChange");
+        this.workspaces = [];
+        this.editingIndex = null;
+        this.newWorkspace = null;
+        this.kritzelEngine = null;
+        this.handleNewWorkspace = async () => {
+            var _a;
+            await ((_a = this.splitButtonRef) === null || _a === void 0 ? void 0 : _a.openMenu());
+            requestAnimationFrame(() => {
+                this.newWorkspace = new KritzelWorkspace(index$1.ObjectHelper.generateUUID(), 'New Workspace');
+                this.editingIndex = 0;
+            });
+        };
+        this.handleMenuClosed = () => {
+            this.editingIndex = null;
+            this.newWorkspace = null;
+        };
+        this.handleSave = async (item) => {
+            const workspace = item.value;
+            const updatedWorkspace = Object.assign(Object.assign({}, workspace), { name: item.label });
+            if (this.newWorkspace) {
+                await this.kritzelEngine.createWorkspace(updatedWorkspace);
+                this.selectWorkspace(updatedWorkspace);
+            }
+            else {
+                await this.kritzelEngine.updateWorkspace(updatedWorkspace);
+            }
+            this.editingIndex = null;
+            this.newWorkspace = null;
+        };
+        this.handleRename = (index) => {
+            this.editingIndex = index;
+        };
+        this.handleDelete = async (workspaceToDelete) => {
+            var _a;
+            await this.kritzelEngine.deleteWorkspace(workspaceToDelete);
+            if (((_a = this.activeWorkspace) === null || _a === void 0 ? void 0 : _a.id) === workspaceToDelete.id) {
+                const newActiveWorkspace = this.sortedWorkspaces.find(w => w.id !== workspaceToDelete.id) || null;
+                this.selectWorkspace(newActiveWorkspace);
+            }
+        };
+    }
+    get 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); });
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        this.isWorkspaceManagerReady.emit();
+    }
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        this.kritzelEngine = this.host.parentElement.querySelector('kritzel-engine');
+        if (!this.kritzelEngine) {
+            throw new Error('kritzel-engine not found in parent element.');
+        }
+    }
+    handleSelect(workspace) {
+        this.selectWorkspace(workspace);
+    }
+    selectWorkspace(workspace) {
+        if (this.editingIndex !== null)
+            return;
+        this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id === workspace.id);
+        this.workspaceChange.emit(workspace);
+    }
+    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 })));
+    }
+    get host() { return index.getElement(this); }
+};
+KritzelWorkspaceManager.style = kritzelWorkspaceManagerCss;
+
 exports.kritzel_brush_style = KritzelBrushStyle;
 exports.kritzel_color = KritzelColor;
 exports.kritzel_color_palette = KritzelColorPalette;
@@ -2357,9 +3123,11 @@ exports.kritzel_font = KritzelFont;
 exports.kritzel_font_family = KritzelFontFamily;
 exports.kritzel_font_size = KritzelFontSize;
 exports.kritzel_icon = KritzelIcon;
+exports.kritzel_menu = KritzelMenu;
+exports.kritzel_portal = KritzelPortal;
+exports.kritzel_split_button = KritzelSplitButton;
 exports.kritzel_stroke_size = KritzelStrokeSize;
 exports.kritzel_tooltip = KritzelTooltip;
 exports.kritzel_utility_panel = KritzelUtilityPanel;
-//# 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-stroke-size.kritzel-tooltip.kritzel-utility-panel.entry.cjs.js.map
-
-//# sourceMappingURL=kritzel-brush-style_18.cjs.entry.js.map
+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